/* ============================================================
   Pocolindo — interactive prototype
   App shell, routing, interactive states, tweak variants.
   Reuses the bp-* component library from bigpicture.css and the
   Polya tokens from colors_and_type.css.
   ============================================================ */

html, body { margin: 0; height: 100%; overflow: hidden; }
#root { height: 100vh; }
* { box-sizing: border-box; }

/* shared primitives used by shared.jsx */
.pc-avatar { border-radius: var(--r-pill); background: var(--pen-soft); color: var(--pen); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; flex: none; }
.pc-toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 80; align-items: center; pointer-events: none; }
.pc-toast { display: flex; align-items: center; gap: 9px; background: var(--fg-1); color: var(--ink-invert); padding: 11px 16px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-2); animation: toast-in var(--d-base) var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ============================================================
   APP SHELL
   ============================================================ */
.p-app { height: 100vh; display: grid; grid-template-columns: var(--sidenav-w) 1fr; background: var(--bg); color: var(--fg-1); font-family: var(--font-ui); }
.p-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.p-view { flex: 1; min-height: 0; position: relative; }
.p-view.scroll { overflow-y: auto; overflow-x: hidden; }
.p-view.pane { overflow: hidden; }

/* fade between views — transform-only so a frozen/reduced-motion frame stays visible */
.p-fade { animation: p-fade var(--d-screen) var(--ease); }
@keyframes p-fade { from { transform: translateY(7px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .p-fade { animation: none; } }

/* nav active count/live reuse bp-nav-item; add a soft hover transition */
.bp-nav-item { transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); cursor: pointer; }
.bp-btn { transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease); }
.bp-btn:hover { filter: brightness(0.98); }
.bp-btn.primary:hover { background: var(--pen-hover); }
.bp-btn:disabled, .bp-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.p-clickable { cursor: pointer; }
.bp-card.p-clickable { transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.bp-card.p-clickable:hover { border-color: var(--rule-2); box-shadow: var(--shadow-1); }
.bp-room, .bp-lesson, .bp-spiral-row { transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.bp-room.p-clickable:hover, .bp-lesson.p-clickable:hover { border-color: var(--pen-ring); box-shadow: var(--shadow-1); }

/* content max-widths inside scroll views */
.p-wrap { padding: 30px 36px; }
.p-wrap.narrow { max-width: 880px; margin: 0 auto; }
.p-wrap.wide { max-width: 1180px; margin: 0 auto; }

/* the sidenav scroll area can actually scroll if needed */
.bp-side .bp-navscroll { overflow-y: auto; }
.bp-nav-item .cnt.up { color: var(--mastered); }

/* onboarding aside: keep multiline checklist items from overlapping */
.bp-auth-aside .pts { gap: 16px; }
.bp-auth-aside .pt { align-items: flex-start; line-height: 1.4; }
.bp-auth-aside .pt .tick { margin-top: 1px; }

/* prevent flex-shrink text wrapping in chrome (topbar title, section labels, user sub) */
.bp-top .ttl { white-space: nowrap; flex: none; }
.bp-top .right { flex: none; }
.bp-seclabel .bp-caps, .bp-seclabel .link { white-space: nowrap; }
.bp-userrow .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-userrow .grow { min-width: 0; }
/* room cards: let the name/topic column take the row and wrap cleanly under the badge */
.bp-room .rt > div:first-child { flex: 1; min-width: 0; }
.bp-room .rt { gap: 10px; }
.bp-room .nm { overflow-wrap: anywhere; }
.bp-mk-pill { white-space: nowrap; }

/* ============================================================
   ONBOARDING (full-screen, pre-app)
   ============================================================ */
.p-onb { height: 100vh; overflow: hidden; }
.bp-input input { border: none; outline: none; background: transparent; font-family: var(--font-ui); font-size: 15px; color: var(--fg-1); flex: 1; min-width: 0; }
.bp-input input::placeholder { color: var(--fg-4); }
.bp-otp input { width: 100%; height: 100%; border: none; outline: none; background: transparent; text-align: center; font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--fg-1); }
.p-pwtoggle { cursor: pointer; color: var(--fg-3); }

/* ============================================================
   TUTOR SESSION — interactive
   ============================================================ */
.p-session { display: grid; grid-template-columns: var(--chat-w) 1fr; height: 100%; min-height: 0; }
.p-chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--rule); background: var(--bg); }
.p-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 20px 12px; display: flex; flex-direction: column; gap: 13px; }
.p-msg { display: flex; gap: 10px; align-items: flex-start; animation: msg-in var(--d-base) var(--ease); }
.p-msg.student { justify-content: flex-end; }
@keyframes msg-in { from { transform: translateY(7px); } to { transform: none; } }
.p-msg-ava { width: 28px; height: 28px; border-radius: 8px; flex: none; background: var(--pen); display: flex; align-items: center; justify-content: center; }
.p-bubble { border-radius: 14px; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; max-width: 85%; }
.p-bubble.tutor { background: var(--paper); border: 1px solid var(--rule); border-top-left-radius: 5px; }
.p-bubble.student { background: var(--pen-soft); border: 1px solid transparent; border-top-right-radius: 5px; }
.p-think { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; }
.p-think i { width: 7px; height: 7px; border-radius: 99px; background: var(--fg-4); animation: think 1s var(--ease) infinite; }
.p-think i:nth-child(2) { animation-delay: 0.15s; } .p-think i:nth-child(3) { animation-delay: 0.3s; }
@keyframes think { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.p-think-line { font-size: 13px; color: var(--fg-3); font-style: italic; padding: 2px 0; }
.p-cite { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--pen); font-family: var(--font-mono); background: var(--pen-soft); padding: 4px 9px; border-radius: 99px; }
.p-composer { flex: none; border-top: 1px solid var(--rule); padding: 12px 18px 16px; }
.p-quickrow { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.p-quick { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: var(--r-input); border: 1px solid var(--rule-2); background: var(--paper); color: var(--fg-1); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--d-fast) var(--ease); }
.p-quick:hover { background: var(--bg-1); }
.p-quick.hint { background: var(--hi-soft); color: var(--hi-ink); border-color: rgba(245,183,60,0.4); }
.p-inputbar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule-2); border-radius: var(--r-card); padding: 6px 6px 6px 14px; background: var(--paper); }
.p-inputbar input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-ui); font-size: 14.5px; color: var(--fg-1); }
.p-iconbtn { width: 36px; height: 36px; border-radius: var(--r-input); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.p-iconbtn.ghost { background: var(--paper); border: 1px solid var(--rule-2); color: var(--fg-1); }
.p-iconbtn.primary { background: var(--pen); color: #fff; }
.p-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }

/* artifact pane */
.p-artifact { background: var(--bg); overflow-y: auto; padding: 20px 24px; }
.p-art-wrap { max-width: 580px; margin: 0 auto; }
.p-art-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.p-art-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.p-art-canvas { border: 1px solid var(--rule); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow-1); }
.p-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 16px; }
.p-control .lab { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; margin-bottom: 7px; }
.p-control .lab .nm { font-weight: 600; color: var(--fg-1); }
.p-control .lab .v { font-family: var(--font-mono); font-size: 13px; color: var(--pen); font-weight: 600; }
.p-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--bg-2); outline: none; }
.p-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 99px; background: var(--pen); cursor: pointer; box-shadow: var(--shadow-pen); border: 2px solid var(--paper); }
.p-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 99px; background: var(--pen); cursor: pointer; border: 2px solid var(--paper); }
.p-readout { display: flex; gap: 10px; margin-top: 16px; }
.p-readout .cell { flex: 1; border: 1px solid var(--rule); border-radius: var(--r-input); background: var(--paper); padding: 11px 13px; }
.p-readout .cell .k { font-size: 11px; color: var(--fg-3); font-weight: 600; }
.p-readout .cell .val { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-top: 3px; }
.p-readout .cell .val small { font-size: 12px; color: var(--fg-3); font-weight: 500; }

/* mastery celebration spring (the one permitted joyful moment) */
.p-celebrate { animation: celebrate 520ms var(--ease-spring); }
@keyframes celebrate { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ============================================================
   PRACTICE — interactive
   ============================================================ */
.bp-opt { transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.bp-opt.p-clickable:hover { border-color: var(--pen-ring); }
.bp-opt.dim { opacity: 0.5; }

/* ============================================================
   FULL-PANE LIVE VIEWS keep their own internal scroll
   ============================================================ */
.p-pane-grid { height: 100%; min-height: 0; }

/* ============================================================
   MODAL / SHEET (buy credits, upgrade confirm)
   ============================================================ */
.p-overlay { position: fixed; inset: 0; background: rgba(27,26,22,0.34); display: flex; align-items: center; justify-content: center; z-index: 70; padding: 24px; animation: p-fade var(--d-base) var(--ease); }
.p-sheet { background: var(--paper); border-radius: var(--r-sheet); box-shadow: var(--shadow-2); width: 100%; max-width: 460px; padding: 26px 26px 22px; animation: sheet-in var(--d-base) var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.p-sheet .sh-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.p-sheet .sh-x { width: 30px; height: 30px; border-radius: var(--r-input); border: none; background: var(--bg-1); color: var(--fg-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.p-credit-opts { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 18px 0; }
.p-credit-opt { border: 1px solid var(--rule-2); border-radius: var(--r-card); padding: 16px 12px; text-align: center; cursor: pointer; transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.p-credit-opt:hover { border-color: var(--pen-ring); }
.p-credit-opt.on { border-color: var(--pen); background: var(--pen-soft); }
.p-credit-opt .amt { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.p-credit-opt .price { font-size: 12.5px; color: var(--fg-3); margin-top: 3px; }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.p-tweak-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--rule-2); background: var(--paper); color: var(--fg-1); font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: var(--shadow-2); }
.p-tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 61; width: 320px; background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r-sheet); box-shadow: var(--shadow-2); overflow: hidden; animation: sheet-in var(--d-base) var(--ease); }
.p-tweaks .tw-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.p-tweaks .tw-head .ti { font-family: var(--font-display); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.p-tweaks .tw-body { padding: 16px; display: flex; flex-direction: column; gap: 18px; max-height: 60vh; overflow-y: auto; }
.tw-row .lab { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 9px; }
.tw-seg { display: flex; gap: 6px; background: var(--bg-1); padding: 4px; border-radius: var(--r-input); }
.tw-seg button { flex: 1; padding: 8px 6px; border-radius: var(--r-sm); border: none; background: transparent; color: var(--fg-2); font-weight: 600; font-size: 13px; cursor: pointer; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.tw-seg button.on { background: var(--paper); color: var(--pen); box-shadow: var(--shadow-1); }

/* ============================================================
   TWEAK VARIANT — DENSITY: compact
   ============================================================ */
[data-density="compact"] { --topbar-h: 52px; }
[data-density="compact"] .p-wrap { padding: 20px 26px; }
[data-density="compact"] .bp-pad { padding: 20px 26px; }
[data-density="compact"] .bp-nav-item { padding: 6px 11px; font-size: 13.5px; }
[data-density="compact"] .bp-card { }
[data-density="compact"] .bp-rooms-grid, [data-density="compact"] .bp-mk-grid { gap: 11px; }
[data-density="compact"] .p-chat-scroll { gap: 9px; padding-top: 16px; }
[data-density="compact"] .bp-h1 { font-size: 23px; }

/* ============================================================
   TWEAK VARIANT — DARK PAPER
   A calm dark exercise-book. Pen/highlighter/mastery retuned for contrast.
   ============================================================ */
[data-paper="dark"] {
  --bg:        #181712;
  --bg-1:      #211F19;
  --bg-2:      #2C2920;
  --paper:     #201E18;
  --ink-invert:#181712;
  --fg-1:      #F2EFE6;
  --fg-2:      #C3BDAE;
  --fg-3:      #938D7F;
  --fg-4:      #6A6557;
  --rule:      rgba(242, 239, 230, 0.12);
  --rule-2:    rgba(242, 239, 230, 0.20);
  --pen:        #8AA0FF;
  --pen-hover:  #A4B6FF;
  --pen-soft:   rgba(120, 150, 255, 0.16);
  --pen-ring:   rgba(120, 150, 255, 0.45);
  --hi:         #F5B73C;
  --hi-wash:    rgba(245, 183, 60, 0.30);
  --hi-ink:     #F0C46B;
  --hi-soft:    rgba(245, 183, 60, 0.16);
  --mastered:      #5FB87D;
  --mastered-soft: rgba(95, 184, 125, 0.18);
  --practising:    #D8A23E;
  --practising-soft: rgba(216, 162, 62, 0.18);
  --shaky:         #E0796A;
  --shaky-soft:    rgba(224, 121, 106, 0.18);
  --grid-line:  rgba(120, 150, 255, 0.10);
  --shadow-pen: 0 6px 20px rgba(80, 110, 230, 0.30);
}
[data-paper="dark"] .bp-pick.on .check,
[data-paper="dark"] .bp-otp .cell.on { box-shadow: 0 0 0 3px var(--pen-soft); }
[data-paper="dark"] .bp-tier .price, [data-paper="dark"] .bp-balance .amt { color: inherit; }
[data-paper="dark"] .bp-stage { background: #0f0e0b; }
[data-paper="dark"] img[src*="pocolindo-mark"] { filter: brightness(0) invert(0.92); }
[data-paper="dark"] .bp-auth-aside img[src*="pocolindo-mark"],
[data-paper="dark"] .p-msg-ava img, [data-paper="dark"] .bp-teach-side img { filter: none; }
[data-paper="dark"] .bp-balance { background: var(--pen-soft); border: 1px solid var(--pen-ring); }
[data-paper="dark"] .bp-balance, [data-paper="dark"] .bp-balance .k, [data-paper="dark"] .bp-balance .foot .l { color: var(--fg-1); }

.katex-host { font-size: 1.04em; }
.ascii-math { font-family: var(--font-mono); font-size: 0.92em; }
.bp-spin { animation: bp-spin 0.7s linear infinite; }
@keyframes bp-spin { to { transform: rotate(360deg); } }

/* never let an entrance animation trap content invisible */
@media (prefers-reduced-motion: reduce) {
  .p-fade, .p-msg, .p-sheet, .p-overlay, .p-tweaks, .pc-toast, .p-celebrate { animation: none !important; }
}