/* App shell: one phone-width column; full-bleed on phones, a framed device on desktop. */
html, body, #root { height: 100%; }
body { overflow: hidden; }
.app { position: relative; height: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; background: var(--ground); overflow: hidden; }
@media (min-width: 620px) and (min-height: 720px) {
  body { background: var(--desk); }
  #root { display: grid; place-items: center; }
  .app { width: 400px; height: min(860px, calc(100% - 48px)); border: 3px solid var(--ink); border-radius: 36px; box-shadow: 0 8px 0 0 var(--ink); }
}
.screen { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pad { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.app-tabs { position: relative; flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px max(8px, env(safe-area-inset-left, 0px)) 8px; background: var(--ground); border-top: 2px solid var(--ink); }
.tap { -webkit-tap-highlight-color: transparent; cursor: pointer; }
.tap:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--ink-muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.h-display { margin: 0; font: 800 26px/1.08 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.h-title { margin: 0; font: 700 18px/1.2 var(--font-display); }
.label { font: 700 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }

/* Header for non-feed tabs */
.top { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding-block: 12px; background: var(--ground); border-bottom: 2px solid var(--line); }
.top .fl-xp { flex: 1; }
.brand { font: 800 13px/1 var(--font-display); letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 16px; padding-block: 16px 28px; }

/* Feed */
.app-feed { position: absolute; inset: 0; }
.app-feed .fl-feed > .fl-reel { padding-bottom: 28px; padding-inline-start: max(18px, env(safe-area-inset-left, 0px)); }
.app-feed .fl-reel-rail { bottom: 28px; }
.app-feed .fl-top { padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }

/* Practice cards */
.scn { display: flex; flex-direction: column; border: 2px solid var(--ink); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-pop); }
.scn-head { position: relative; padding: 16px 16px 18px; background: var(--tone); color: var(--on-tone); overflow: hidden; min-height: 92px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.scn-head .big { position: absolute; right: -6px; top: -14px; font: 800 96px/1 var(--font-display); opacity: .16; letter-spacing: -.04em; pointer-events: none; }
.scn-head .eyebrow { font: 700 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.scn-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.scn-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 700 12px/16px var(--font-mono); color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .fl-chip { height: 28px; font-size: 12px; }
.chips .fl-chip-dot { width: 16px; height: 16px; }

/* Skills path */
.trackbar { display: flex; gap: 8px; overflow-x: auto; padding-block: 2px 6px; scrollbar-width: none; }
.trackbar::-webkit-scrollbar { display: none; }
.trk { flex: none; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 700 13px/1 var(--font-body); }
.trk.is-on { background: var(--tone); color: var(--on-tone); }
.path { position: relative; display: flex; flex-direction: column; gap: 18px; padding-block: 8px 24px; }
.node { display: flex; align-items: center; gap: 14px; }
.node-dot { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; border: 3px solid var(--ink); background: var(--surface-raised); color: var(--ink-muted); box-shadow: var(--shadow-pop); }
.node.is-done .node-dot { background: var(--mint); color: var(--on-mint); }
.node.is-now .node-dot { background: var(--volt); color: var(--on-volt); animation: pulse 1.6s ease-in-out infinite; }
.node.is-locked { opacity: .62; }
.node-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.node-txt b { font: 700 15px/20px var(--font-body); }
@keyframes pulse { 50% { transform: scale(1.07); } }

/* Me */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { padding: 12px; border-radius: var(--radius-md); background: var(--surface); border: 2px solid var(--ink); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat b { font: 700 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.week { padding: 14px 16px 12px; border-radius: var(--radius-lg); border: 2px solid var(--ink); background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 110px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.bar i { display: block; width: 100%; max-width: 28px; border-radius: 8px 8px 3px 3px; background: var(--surface-raised); border: 2px solid var(--ink); }
.bar.is-today i { background: var(--lemon); }
.bar span { font: 700 11px/1 var(--font-mono); color: var(--ink-muted); }
.cred { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--cobalt); color: var(--on-cobalt); border: 2px solid var(--ink); }
.cred-ring { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--on-cobalt); font: 700 14px/1 var(--font-mono); }
.empty { padding: 18px; border-radius: var(--radius-lg); border: 2px dashed var(--line); color: var(--ink-muted); font: 500 14px/20px var(--font-body); }

/* Workspace */
.ws { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; background: var(--ground); animation: fl-up .3s cubic-bezier(.2, .9, .3, 1) both; }
.ws-top { flex: none; display: flex; flex-direction: column; gap: 10px; padding-block: 12px 10px; border-bottom: 2px solid var(--ink); background: var(--surface); }
.ws-row { display: flex; align-items: center; gap: 10px; }
.ws-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface-raised); color: var(--ink); display: grid; place-items: center; font-size: 18px; }
.ws-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-title b { font: 700 15px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--lemon); color: var(--on-lemon); border: 2px solid var(--ink); font: 700 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg button { position: relative; height: 38px; border-radius: 12px; border: 2px solid var(--ink); background: var(--surface-raised); color: var(--ink); font: 700 13px/1 var(--font-body); display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg button .fl-ico { font-size: 16px; }
.seg button.is-on { background: var(--cobalt); color: var(--on-cobalt); }
.seg .dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--volt); border: 2px solid var(--ink); }
.ws-body { flex: 1; min-height: 0; overflow-y: auto; }

.card { border: 2px solid var(--ink); border-radius: var(--radius-lg); background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.from { display: flex; gap: 10px; align-items: center; }
.ava { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--font-display); border: 2px solid var(--ink); }
.ava.v { background: var(--volt); color: var(--on-volt); } .ava.p { background: var(--pop); color: var(--on-pop); } .ava.c { background: var(--cobalt); color: var(--on-cobalt); } .ava.m { background: var(--mint); color: var(--on-mint); }
.prose { font: 500 15px/22px var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.facts { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; font: 500 15px/21px var(--font-body); }
.attach { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--ink); background: var(--surface-raised); color: var(--ink); font: 600 14px/1.2 var(--font-body); }
.attach .fl-ico { font-size: 20px; }
.tip { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-raised); font: 500 14px/20px var(--font-body); }
.tip .fl-ico { flex: none; font-size: 18px; color: var(--volt-text); margin-top: 1px; }

/* Chat */
.chat { display: flex; flex-direction: column; height: 100%; }
.msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-block: 16px; }
.msg { max-width: 88%; display: flex; flex-direction: column; gap: 6px; }
.msg.u { align-self: flex-end; }
.msg.u .bubble { background: var(--cobalt); color: var(--on-cobalt); border-radius: 18px 18px 4px 18px; }
.msg.a { align-self: flex-start; }
.msg.a .bubble { background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; }
.bubble { padding: 10px 14px; font: 500 15px/22px var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.note { font: 500 12px/16px var(--font-body); color: var(--ink-muted); }
.thinking { display: inline-flex; gap: 4px; padding: 4px 0; }
.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted); animation: blink 1s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .25; } }
.chat-empty { margin: auto 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sugs { display: flex; flex-wrap: wrap; gap: 8px; }
.sug { padding: 8px 12px; border-radius: var(--radius-pill); border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 600 13px/1.2 var(--font-body); text-align: start; }
.composer { flex: none; display: flex; gap: 8px; align-items: flex-end; padding-block: 10px 12px; border-top: 2px solid var(--line); background: var(--ground); }
.composer textarea { flex: 1; min-width: 0; resize: none; max-height: 132px; padding: 11px 14px; border-radius: 22px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 500 15px/20px var(--font-body); }
.send { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); background: var(--volt); color: var(--on-volt); display: grid; place-items: center; font-size: 20px; box-shadow: var(--shadow-pop); }
.send:disabled { opacity: .4; }
.send:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--shadow-pop-pressed); }
.ai-status { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.ai-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.ai-status.off i { background: var(--lemon); }

/* Mail */
.inbox { display: flex; flex-direction: column; }
.mrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: start; width: 100%; }
.mrow-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mrow-txt b, .mrow-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow-txt b { font: 700 15px/20px var(--font-body); }
.mrow.is-read .mrow-txt b { font-weight: 500; }
.mrow-txt span { font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.mrow time { font: 700 11px/20px var(--font-mono); color: var(--ink-muted); }
.urgent { display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border-radius: 6px; background: var(--danger); color: var(--on-danger); font: 700 10px/14px var(--font-mono); letter-spacing: .06em; vertical-align: 2px; }
.field { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.field label { flex: none; width: 52px; font: 700 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 15px/20px var(--font-body); padding: 4px 0; }
.mailbody { width: 100%; box-sizing: border-box; min-height: 260px; resize: vertical; border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); padding: 12px 14px; font: 500 15px/22px var(--font-body); }
.wc { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* Debrief */
.grade-hero { position: relative; padding: 22px 16px 20px; background: var(--tone, var(--volt)); color: var(--on-tone, var(--on-volt)); border-bottom: 2px solid var(--ink); overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.grade-hero .big { position: absolute; right: 8px; top: -10px; font: 800 120px/1 var(--font-display); letter-spacing: -.05em; opacity: .2; pointer-events: none; }
.checks { display: flex; flex-direction: column; gap: 2px; }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); font: 500 14px/20px var(--font-body); }
.check:last-child { border-bottom: 0; }
.check-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; border: 2px solid var(--ink); }
.check-ico.ok { background: var(--mint); color: var(--on-mint); }
.check-ico.bad { background: var(--danger); color: var(--on-danger); }
.fb { display: flex; flex-direction: column; gap: 10px; }
.fb-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-raised); }
.fb-item p { margin: 0; font: 500 14px/20px var(--font-body); }
.expert { font: 500 13px/19px var(--font-mono); white-space: pre-wrap; background: var(--surface-raised); border-radius: 12px; padding: 12px; overflow-wrap: anywhere; }
.skel { height: 14px; border-radius: 7px; background: var(--surface-raised); animation: blink 1.2s infinite; }

/* Sheets and toast */
.backdrop { position: absolute; inset: 0; z-index: 20; background: var(--scrim); animation: fade .2s ease both; }
@keyframes fade { from { opacity: 0; } }
.app .fl-sheet { z-index: 21; max-height: 82%; overflow-y: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.doc { font: 500 13px/20px var(--font-mono); white-space: pre-wrap; background: var(--surface-raised); border-radius: 12px; padding: 12px; overflow-wrap: anywhere; }
.toast { position: absolute; left: 50%; bottom: 84px; z-index: 30; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--radius-pill); background: var(--ink); color: var(--ground); font: 700 13px/18px var(--font-body); animation: fade .2s ease both; text-align: center; }