:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light;--bg:#f5f7f4;--surface:#ffffff;--surface-2:#eaf1ec;--text:#16251d;--muted:#52675a;--line:#d2ded5;--accent:#06513d;--accent-text:#06513d;--accent-hover:#087054;--button-text:#ffffff;--nav:#ffffff;--shade:rgba(6,81,61,.10);--button-shadow:rgba(6,81,61,.12);--record-ring:rgba(6,81,61,.20);--badge-bg:#e7f2ea;--badge-text:#06513d;--brand-mark-color:#ffffff;--nav-h:78px}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0b1710;--surface:#14231a;--surface-2:#1c3224;--text:#f2f7f1;--muted:#abc2ae;--line:#3b5b45;--accent:#91d0ac;--accent-text:#91d0ac;--accent-hover:#a7debb;--button-text:#0b2115;--nav:#101e15;--shade:rgba(0,0,0,.26);--button-shadow:rgba(0,0,0,.19);--record-ring:rgba(145,208,172,.22);--badge-bg:#23452e;--badge-text:#c5ecd0;--brand-mark-color:#91d0ac}
*{box-sizing:border-box}html{font-size:16px;background:var(--bg)}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}button,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}button:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{display:flex;min-height:100vh}.sidebar{flex:0 0 238px;position:sticky;top:0;height:100vh;padding:35px 18px;border-right:1px solid var(--line);background:var(--surface)}.side-brand{margin:3px 14px 48px;font-size:17px;font-weight:650;letter-spacing:-.05em;white-space:nowrap}.side-brand span,.wordmark strong{color:var(--accent-text);font-weight:650}.desktop-nav{display:grid;gap:7px}.nav-item{width:100%;display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);text-align:left;font-size:17px}.nav-item span{font-size:14px;font-weight:640}.nav-item.active{color:var(--accent-text);background:var(--surface-2);border-color:var(--line)}.nav-item:hover{background:var(--surface-2);color:var(--text)}.workspace{min-width:0;flex:1}.topbar{height:86px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(22px,4vw,66px);border-bottom:1px solid var(--line)}.wordmark{font-size:17px;letter-spacing:.16em;white-space:nowrap}.wordmark strong{letter-spacing:.03em}.icon-button{display:inline-grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--accent-text);width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1}.icon-button:hover{background:var(--surface-2)}main{width:min(100%,940px);margin:0 auto;padding:42px clamp(22px,4vw,56px) 100px}.view{min-height:60vh}.setup-panel{max-width:630px;margin:32px auto 0}.setup-heading{margin-bottom:37px}.setup-heading h1,.view-heading h1{font-size:clamp(2.5rem,5vw,3.6rem);letter-spacing:-.055em;line-height:1.04;margin:0 0 18px;font-weight:700}.setup-heading p,.view-heading p{font-size:1rem;line-height:1.5;margin:0;color:var(--muted)}.setup-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field span{font-size:12px;font-weight:700;color:var(--muted)}.field select{height:61px;width:100%;appearance:none;padding:0 42px 0 18px;border:1px solid var(--line);border-radius:12px;color:var(--text);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2306513d' stroke-width='2' viewBox='0 0 18 18'%3E%3Cpath d='m4 7 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 17px center;font-size:15px;font-weight:560;text-overflow:ellipsis}.field select option{background:var(--surface);color:var(--text)}.availability-note{min-height:26px;margin:22px 0 17px;color:var(--muted);font-size:13px}.primary-button{border:0;border-radius:13px;padding:14px 22px;min-height:53px;background:var(--accent);color:var(--button-text);font-weight:720;box-shadow:0 4px 12px var(--button-shadow)}.primary-button:hover:not(:disabled){background:var(--accent-hover);filter:none}.begin-button{width:100%;display:flex;justify-content:center;align-items:center;gap:12px;font-size:16px}.begin-button span{font-size:22px;line-height:0}.secondary-button{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:13px;font-weight:650}.text-button{border:0;background:none;color:var(--accent-text);font-size:13px;font-weight:650;padding:8px}
.session-controls{display:flex;align-items:center;justify-content:space-between;gap:14px}.persona-pill{appearance:none;border:1px solid var(--line);border-radius:999px;padding:10px 40px 10px 17px;color:var(--text);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2306513d' stroke-width='2' viewBox='0 0 18 18'%3E%3Cpath d='m4 7 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 15px center;font-size:15px;max-width:75%}.filter-button{border:0;background:transparent;color:var(--text);font-size:29px}.session-summary{padding:18px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}.filter-panel{margin:15px 0;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:0 18px 38px var(--shade)}.filter-panel>strong{font-size:16px}.filter-panel>p{margin:5px 0 18px;color:var(--muted);font-size:13px}.filter-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}.filter-fields .field select{font-size:13px;height:47px;padding-left:11px;padding-right:33px}.filter-panel .secondary-button{width:100%}.case-intro{padding:20px 0 14px;border-bottom:1px solid var(--line)}.eyebrow{display:block;color:var(--accent-text);font-size:12px;letter-spacing:.15em;font-weight:800}.case-intro h1{font-size:15px;font-weight:650;line-height:1.35;letter-spacing:0;margin:0}.case-intro p{font-size:1rem;line-height:1.72;margin:0;max-width:760px}.timeline{display:grid;gap:24px;padding:32px 0 40px}.question-card,.feedback-card{max-width:760px}.question-card h3{font-size:clamp(1.55rem,3vw,2rem);margin:0 0 19px;letter-spacing:-.035em;font-weight:630}.question-card p{line-height:1.68;margin:0 0 13px}.question-context{color:var(--muted)}.feedback-card{padding:23px;border:1px solid var(--line);border-radius:17px;background:var(--surface)}.feedback-card .eyebrow{font-size:10px}.answer-history{white-space:pre-wrap;line-height:1.58;margin:11px 0 21px}.feedback-body{padding-top:19px;border-top:1px solid var(--line)}.feedback-body h3{margin:0 0 10px;font-size:19px}.feedback-body h4{margin:22px 0 8px;font-size:14px}.feedback-body p{color:var(--muted);font-size:14px;line-height:1.6;margin:6px 0}.feedback-actions{margin-top:19px}.memory-aid{color:var(--accent-text)!important;font-weight:660}.concept-details{margin-top:18px}.concept-details summary{cursor:pointer;color:var(--accent-text);font-weight:650;font-size:13px}
.answer-composer{position:relative;z-index:5;display:flex;align-items:center;gap:14px;padding:11px 12px 11px 18px;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:0 12px 40px rgba(0,0,0,.27)}.answer-composer textarea{flex:1;min-width:0;max-height:150px;min-height:44px;resize:vertical;border:0;outline:0;color:var(--text);background:transparent;line-height:1.45;padding:12px 0;font-size:15px}.answer-composer textarea::placeholder{color:var(--muted)}.composer-controls{display:flex;align-items:center;gap:9px}.record-button,.send-button{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:20px;touch-action:none;user-select:none}.record-button.recording{color:var(--button-text);background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--record-ring)}.send-button{border:0;background:var(--accent);color:var(--button-text);font-size:23px;box-shadow:0 4px 12px var(--button-shadow)}.record-timer{font-size:12px;color:var(--accent-text);font-variant-numeric:tabular-nums}.record-status{position:absolute;bottom:calc(100% + 6px);left:8px;right:8px;color:var(--muted);font-size:12px;pointer-events:none;text-shadow:0 1px 4px var(--bg)}.record-status:empty{display:none}.audio-review{position:absolute;bottom:calc(100% + 34px);right:0;left:0;padding:12px 17px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 15px 35px var(--shade);display:flex;align-items:center;gap:10px;justify-content:space-between}.audio-review audio{width:min(280px,55%);height:34px}.audio-review>div{display:flex;flex-wrap:wrap;gap:4px}
.content-view{max-width:780px}.view-heading{margin:17px 0 35px}.view-heading h1{margin:10px 0}.progress-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat-card,.dimension-card,.topic-list,.empty-card,.profile-card{border:1px solid var(--line);border-radius:15px;background:var(--surface)}.stat-card{padding:22px;font-size:19px;font-weight:650}.section-heading{font-size:17px;margin:36px 0 14px}.dimension-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.dimension-card{white-space:pre-line;min-height:96px;padding:18px;line-height:1.9;color:var(--text)}.topic-list{padding:6px 20px}.topic-row{padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}.topic-row:last-child{border-bottom:0}.progress-note{font-size:13px;color:var(--muted);line-height:1.5}.empty-card{padding:26px;color:var(--muted)}.profile-card{padding:25px;display:grid;gap:15px;max-width:420px}.profile-card span{color:var(--muted);font-size:13px}.profile-card strong{font-size:17px}.profile-note{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.profile-notice{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--accent-text);font-size:13px;line-height:1.45}.danger-button{border-color:var(--accent);color:var(--accent-text)}.mobile-nav{display:none}
@media(max-width:900px){.sidebar{display:none}.topbar{height:75px;padding:0 26px}.wordmark{font-size:15px}main{padding:28px 26px 130px}.mobile-nav{display:flex;align-items:stretch;position:fixed;z-index:30;bottom:0;left:0;right:0;min-height:var(--nav-h);padding:7px max(8px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));background:var(--nav);border-top:1px solid var(--line);box-shadow:0 -9px 25px var(--shade)}.mobile-nav-item{flex:1;min-width:0;border:0;background:none;color:var(--muted);font-size:11px;font-weight:560;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px}.mobile-nav-item.active{color:var(--accent-text)}.nav-glyph{font-size:23px;line-height:1}.answer-composer{margin:0}.session-controls{margin-top:3px}.timeline{padding-bottom:165px}}
@media(max-width:600px){.topbar{height:68px;padding:0 19px}.wordmark{font-size:13px;letter-spacing:.1em}.topbar .icon-button{width:38px;height:38px;font-size:22px}main{padding:25px 19px 130px}.setup-panel{margin:24px auto 0}.setup-heading h1{font-size:2.55rem}.setup-heading p{font-size:14px}.setup-fields{grid-template-columns:1fr;gap:12px}.field select{height:56px}.filter-fields{grid-template-columns:1fr}.case-intro{padding-top:18px}.case-intro h1{font-size:15px}.case-intro p{font-size:15px;line-height:1.63}.timeline{gap:20px}.answer-composer{padding-left:14px;border-radius:23px}.answer-composer textarea{font-size:14px}.record-button,.send-button{width:42px;height:42px}.audio-review{flex-direction:column;align-items:stretch}.audio-review audio{width:100%}.audio-review>div{justify-content:flex-end}.dimension-grid{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.mobile-nav-item{font-size:10px}.dimension-grid{grid-template-columns:1fr}.wordmark{font-size:12px}.answer-composer{gap:6px}.composer-controls{gap:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.record-status:not(:empty){color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 11px;line-height:1.35;box-shadow:0 8px 20px var(--shade);text-shadow:none}
.nav-glyph{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}.nav-glyph svg{display:block}
@media(max-width:600px){.setup-panel{margin-top:12px}.setup-heading{margin-bottom:22px}.setup-fields{gap:8px}.setup-fields .field select{height:52px}.availability-note{margin:12px 0}}
.topic-row{display:flex;justify-content:space-between;gap:12px}.topic-row strong{color:var(--accent-text)}

/* Mobile viewport and interaction refinements. */
:root{--dock-bg:#f5f7f4}
:root[data-theme="dark"]{--dock-bg:#0d1a13}
html,body,.app-shell,.workspace{max-width:100%;min-width:0}
html,body{overflow-x:clip}
main{min-width:0}
.topbar{gap:12px}
.wordmark{min-width:0;overflow:hidden;text-overflow:ellipsis}
.theme-toggle{flex:none}
.persona-picker{position:relative;min-width:0}
.persona-trigger{display:flex;align-items:center;width:100%;min-height:61px;padding:0 43px 0 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2306513d' stroke-width='2' viewBox='0 0 18 18'%3E%3Cpath d='m4 7 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 17px center;color:var(--text);text-align:left;font-size:16px;font-weight:560;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.persona-trigger.persona-pill{min-height:48px;max-width:100%;border-radius:999px}
.session-persona-picker{flex:1;max-width:430px}
.back-button{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);font-size:24px;line-height:1}
.back-button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-text)}
.persona-menu{position:absolute;z-index:40;top:calc(100% + 7px);left:0;width:max(100%,min(360px,calc(100vw - 38px)));max-height:min(62vh,460px);overflow:auto;padding:7px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 22px 55px rgba(0,0,0,.28);overscroll-behavior:contain}
.persona-option{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:49px;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;opacity:1!important}
.persona-option:not(:disabled):hover,.persona-option:not(:disabled):focus-visible{background:var(--surface-2)}
.persona-option:disabled{color:var(--muted)}
.persona-name{display:block;width:100%;font-size:14px;line-height:1.25;white-space:nowrap;letter-spacing:-.025em}
.persona-badge{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--badge-bg);color:var(--badge-text);font-size:11px;font-weight:750;letter-spacing:.02em}
.persona-check{color:var(--accent-text);font-size:13px;font-weight:750}
.filter-button{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text)}
.filter-button[aria-expanded="true"]{border-color:var(--accent);color:var(--accent-text)}
.filter-button svg{display:block}
.answer-dock{z-index:20;padding:8px;background:var(--dock-bg);border-radius:26px}
.answer-composer{min-width:0;box-shadow:0 12px 36px rgba(0,0,0,.18)}
.answer-composer textarea{font-size:16px;resize:none}
.record-status,.audio-review{position:static;margin:0 8px 8px;box-shadow:none;pointer-events:auto}
.record-status:empty{display:none}
.audio-review{display:flex}





.progress-summary{display:flex;gap:28px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.progress-stat{display:flex;align-items:baseline;gap:7px;color:var(--muted);font-size:14px}
.progress-stat strong{color:var(--text);font-size:24px;line-height:1}
.dimension-list{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:3px 16px}
.dimension-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:45px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.dimension-row:last-child{border-bottom:0}
.dimension-row strong{color:var(--accent-text);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:900px){
  .answer-dock{width:100%;padding:5px 9px 9px;border-radius:0;box-shadow:0 -12px 22px var(--shade)}
  .mobile-nav{height:calc(var(--nav-h) + env(safe-area-inset-bottom));min-height:0;padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));background:var(--dock-bg)}
  .timeline{padding-bottom:195px}
}
@media(max-width:600px){
  .topbar{height:calc(68px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-left:max(19px,env(safe-area-inset-left));padding-right:max(19px,env(safe-area-inset-right))}
  .wordmark{font-size:13px;letter-spacing:.08em}
  .field select,.filter-fields .field select{font-size:16px}
  .persona-trigger{min-height:52px}
  .persona-trigger.persona-pill{min-height:48px}
  .persona-menu{width:min(360px,calc(100vw - 38px))}
  .answer-composer{margin:0;padding-left:14px}
  .answer-composer textarea{font-size:16px}
  .progress-summary{gap:17px}
  .progress-stat{font-size:12px}
  .progress-stat strong{font-size:21px}
  .timeline{padding-bottom:210px}
}
@media(max-width:380px){.persona-name{font-size:12px}}

/* Consistent menus and compact mobile header. */
html,body{touch-action:pan-y;overscroll-behavior-x:none}
.brand-lockup{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.brand-mark{width:27px;height:27px;flex:none}
.brand-mark{display:block;object-fit:cover;border-radius:6px}
.side-brand>span{color:var(--text)}
.side-brand>span>span{color:var(--accent-text)}
.wordmark>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.choice-picker{position:relative;width:100%;min-width:0}
.choice-trigger{width:100%}
.persona-menu{position:fixed;z-index:50;max-width:calc(100vw - 24px);overscroll-behavior:contain}
.choice-option{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.choice-menu{padding:4px}
.choice-menu .choice-option{min-height:44px;padding:5px 11px}
.choice-name{font-size:14px;line-height:1.3}
.filter-fields .choice-trigger{min-height:47px;font-size:14px}
.filter-panel>.filter-availability{margin:0 0 12px;color:var(--muted);font-size:13px}
.filter-panel>.filter-availability:empty{display:none}
.filter-panel .primary-button{width:100%}
@media(max-width:600px){
  .topbar{height:calc(58px + env(safe-area-inset-top))}
  .topbar .brand-mark{width:25px;height:25px}
  main{padding-top:17px}
  .setup-panel{margin-top:0}
  .setup-heading{margin-bottom:18px}
  .setup-heading h1{margin-bottom:14px}
  .session-controls{margin-top:0}
  .session-summary{padding:12px 0}
  .case-intro{padding-top:18px}
}
@media(max-width:380px){.brand-lockup{gap:6px}.wordmark{font-size:12px}}

/* One emerald identity, with a readable dark appearance. */
.case-intro h1,.setup-heading h1,.view-heading h1{color:var(--accent-text)}
.back-button,.filter-button,.record-button:not(.recording){color:var(--accent-text)}
.persona-trigger:hover,.filter-button:hover,.back-button:hover,.record-button:hover{border-color:var(--accent)}
.send-button:hover:not(:disabled){background:var(--accent-hover)}
.primary-button:active:not(:disabled),.send-button:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 6px var(--button-shadow)}
.answer-composer,.persona-menu{box-shadow:0 8px 28px var(--shade)}
:root[data-theme="dark"] .field select,:root[data-theme="dark"] .persona-trigger,:root[data-theme="dark"] .persona-pill{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2391d0ac' stroke-width='2' viewBox='0 0 18 18'%3E%3Cpath d='m4 7 5 5 5-5'/%3E%3C/svg%3E")}
.daily-insights-inline{display:flex;align-items:center;justify-content:center;gap:5px;margin:8px 0 0;min-height:44px}
.daily-insight-bulb{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);opacity:1!important}


.daily-insight-bulb .bulb-glint{display:none}



.answer-composer textarea{resize:none}
.storage-warning{color:var(--accent-text)!important;font-weight:650}
.daily-insight-text{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.005em;line-height:1.25;min-width:0}


:root{--case-viewport-height:100dvh;--case-viewport-top:0px}
/* The mobile case uses the composer frame from before Phase 1. */
@media(max-width:900px){
  html.case-viewport,html.case-viewport body{height:100%;overflow:hidden}
  body.case-viewport .app-shell{position:absolute;top:var(--case-viewport-top);left:0;right:0;height:var(--case-viewport-height);min-height:0;overflow:hidden}
  body.case-viewport .workspace{display:flex;flex-direction:column;flex:1;height:100%;min-height:0;overflow:hidden}
  body.case-viewport .topbar{display:none}
  body.case-viewport #main-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:12px}
  body.case-viewport .timeline{padding-bottom:28px}
  body.case-viewport .answer-dock{position:relative;flex:none;width:100%;max-width:none;padding-bottom:calc(9px + env(safe-area-inset-bottom))}
  body.case-viewport .mobile-nav{display:none}
  body.case-viewport.keyboard-open #main-content{padding-bottom:12px}
}
.answer-composer,.composer-controls{align-items:flex-end}
.composer-controls{align-self:flex-end}
.answer-composer textarea{resize:none;max-height:calc(5 * 1.45em + 24px)}
@media(max-width:380px){.daily-insight-text{font-size:11px}}
@media(max-width:600px) and (max-height:700px){main{padding-top:14px}.setup-panel{margin-top:0}.setup-heading{margin-bottom:14px}.availability-note{min-height:18px;margin:8px 0}}

/* Phase 1: one stable viewport frame and native-feeling controls. */
.app-shell{overscroll-behavior:none}
button,select,.field>span,.nav-item,.mobile-nav-item,.eyebrow{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,select{touch-action:manipulation}
.record-button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.storage-banner{position:relative;z-index:35;padding:10px max(19px,env(safe-area-inset-left)) 10px max(19px,env(safe-area-inset-right));background:var(--surface);border-bottom:1px solid var(--accent);color:var(--accent-text);font-size:14px;line-height:1.4}
.case-intro h1[tabindex="-1"]:focus,.setup-heading h1[tabindex="-1"]:focus,.question-card h3[tabindex="-1"]:focus,.feedback-body h3[tabindex="-1"]:focus{outline:none}

@media(min-width:901px){.answer-dock{position:fixed;bottom:20px;left:calc(238px + (100vw - 238px)/2);transform:translateX(-50%);width:min(760px,calc(100vw - 300px));max-width:100%}}

/* Dataset question packets: readable paragraphs and a clear answer checklist. */
.question-prose p{white-space:pre-line}
.question-prose ul,.question-prose ol{padding-left:24px;line-height:1.6}
.question-prose li{margin:7px 0}
.cover-points{margin-top:25px;padding:17px 19px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cover-points h4{margin:0 0 10px;color:var(--accent-text);font-size:14px}
.cover-list{margin:0;padding-left:22px;line-height:1.55}
.cover-list li{margin:6px 0}
.choice-option:disabled .choice-name{color:var(--muted)}

/* Phase 3: compact answer aid, honest feedback, and a real end state. */
.level-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:12px 0 5px}
.level-cell{min-width:0;padding:9px 4px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);text-align:center}
.level-label{display:block;color:var(--muted);font-size:11px;line-height:1.15;overflow-wrap:anywhere}
.level-value{display:block;margin-top:5px;color:var(--accent-text);font-size:13px;line-height:1.12;overflow-wrap:anywhere}
.improved-note{color:var(--accent-text)!important;font-weight:700}
.delivery-tip{padding:9px 11px;border-left:2px solid var(--accent);background:var(--surface-2)}
.concept-details{padding:11px 0;border-top:1px solid var(--line)}
.concept-details summary{list-style:none}
.concept-details summary::after{content:"⌄";float:right}
.concept-details[open] summary::after{transform:rotate(180deg)}
.end-card{margin-top:29px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.end-card h1{margin:12px 0 19px;color:var(--accent-text);font-size:2rem;letter-spacing:-.04em}
.end-card h2{margin:23px 0 7px;font-size:16px}
.end-card p{color:var(--muted);line-height:1.55}
.end-actions{display:flex;gap:10px;margin-top:20px}
.end-actions button{flex:1;min-width:0}
@media(max-width:600px){.feedback-card{padding:17px}.level-row{gap:3px}.level-cell{padding:7px 2px}.end-card{padding:18px}.end-actions{flex-direction:column}}

/* Phase 4: one clear recommendation, compact choice grid, and readable progress. */
.recommended-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font-size:16px}
.recommended-button span{font-size:21px;line-height:1}
.recommendation-focus{margin:7px 2px 0;color:var(--accent-text);font-size:12px;font-weight:650}
.choose-heading{margin:21px 0 12px;font-size:14px;font-weight:700;color:var(--muted)}
.availability-note:empty{display:none}
.begin-button{width:100%;min-height:48px;font-size:14px;box-shadow:none;background:transparent;border:1.5px solid var(--accent);color:var(--accent-text)}
.topic-list{padding:3px 17px}
.topic-coverage-row{padding:14px 0;border-bottom:1px solid var(--line)}
.topic-coverage-row:last-child{border-bottom:0}
.topic-coverage-label{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font-size:13px;line-height:1.3}
.topic-coverage-label strong{flex:none;color:var(--accent-text);font-size:12px}
.coverage-track{height:5px;margin-top:10px;overflow:hidden;border-radius:999px;background:var(--surface-2)}
.coverage-fill{height:100%;border-radius:inherit;background:var(--accent)}
.history-list{border:1px solid var(--line);border-radius:15px;background:var(--surface);overflow:hidden}
.history-row{display:block;width:100%;padding:14px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);text-align:left}
.history-row:last-child{border-bottom:0}
button.history-row:hover{background:var(--surface-2)}
.history-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.history-heading strong{font-size:14px;line-height:1.3}
.history-heading time{flex:none;color:var(--muted);font-size:11px}
.history-levels{display:block;margin-top:7px;color:var(--muted);font-size:11px;line-height:1.45}
.history-more{display:block;width:100%;margin-top:10px}
@media(max-width:600px){
  .setup-heading{margin-bottom:14px}
  .setup-heading h1{font-size:2.1rem;margin-bottom:8px}
  .setup-heading p{font-size:13px;line-height:1.3;min-height:2.6em}
  .choose-heading{margin:15px 0 9px}
  .setup-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 10px}
  .setup-fields .field{gap:5px}
  .setup-fields .field>span{font-size:11px}
  .setup-fields .persona-trigger{min-height:46px;padding-left:12px;padding-right:31px;font-size:13px;background-position:right 9px center}
  .setup-fields .availability-note{margin:0}
  .setup-fields .choice-trigger{min-height:46px;padding-left:12px;padding-right:31px;font-size:13px;background-position:right 9px center}
  .availability-note{min-height:0;margin:8px 0;font-size:12px}
  .begin-button{margin-top:12px}

  .daily-insights-inline{min-height:38px;margin-top:3px}
  .daily-insight-bulb{width:38px;height:38px}
  .history-heading{display:block}
  .history-heading time{display:block;margin-top:3px}
}

/* Polish */
.setup-heading h1 span{display:block}
.begin-button:hover:not(:disabled){background:var(--surface-2)}
body.case-viewport .session-controls{padding-top:max(12px,env(safe-area-inset-top))}
.question-prose .question-quote{font-size:1.18rem;line-height:1.5;color:var(--text);border-left:3px solid var(--accent);padding-left:14px}
.question-prose .question-lead{color:var(--muted)}
:root{--level-missing:#69776e;--level-partial:#5c806a;--level-solid:#3b8063;--level-strong:#237557;--level-client-ready:#06513d}
:root[data-theme="dark"]{--level-missing:#a8b4aa;--level-partial:#a3bea9;--level-solid:#85c19c;--level-strong:#69c397;--level-client-ready:#91d0ac}
[data-level="missing"]{--level-color:var(--level-missing)}[data-level="partial"]{--level-color:var(--level-partial)}[data-level="solid"]{--level-color:var(--level-solid)}[data-level="strong"]{--level-color:var(--level-strong)}[data-level="client-ready"]{--level-color:var(--level-client-ready)}[data-level="not-assessed"]{--level-color:var(--level-missing)}
.level-value::before,.level-indicator::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--level-color);vertical-align:middle}
[data-level="not-assessed"]::before{background:transparent;border:1px dashed var(--level-color)}
.primary-button,.secondary-button,.nav-item,.mobile-nav-item,.persona-option,.back-button,.filter-button,.persona-trigger{transition:transform .1s ease}
.primary-button:active:not(:disabled),.secondary-button:active:not(:disabled),.nav-item:active,.mobile-nav-item:active,.persona-option:active:not(:disabled),.back-button:active,.filter-button:active,.persona-trigger:active{transform:scale(.98)}

/* Desktop shell: the sidebar carries the brand and the theme switch, so the duplicate topbar is mobile-only. */
@media(min-width:901px){
  .topbar{display:none}
  .sidebar{display:flex;flex-direction:column}
  .sidebar-theme{display:flex;align-items:center;gap:12px;width:100%;margin-top:auto;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:14px;font-weight:640;text-align:left;transition:transform .1s ease}
  .sidebar-theme:hover{background:var(--surface);border-color:var(--accent)}
  .sidebar-theme:active{transform:scale(.98)}
  .sidebar-theme-glyph{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:20px;line-height:1;color:var(--accent-text)}
  .sidebar-theme-label{white-space:nowrap}
}

/* Desktop home fit: tighten the first-screen rhythm so heading, CTA, the four choices,
   the secondary Start, and Daily Insight sit in one viewport; give Start real separation
   above it and a light-green idle fill that turns emerald on interaction. */
@media(min-width:901px){
  main{padding-top:30px}
  .setup-panel{max-width:660px;margin-top:14px}
  .setup-heading{margin-bottom:22px}
  .setup-heading h1{font-size:clamp(2.2rem,3.4vw,2.9rem);margin-bottom:12px}
  .setup-heading p{font-size:15px;line-height:1.45}
  .recommended-button{min-height:50px}
  .choose-heading{margin:16px 0 10px}
  .setup-fields{gap:12px}
  .setup-fields .field{gap:6px}
  .setup-fields .field>span{font-size:11px}
  .setup-fields .field select,.setup-fields .persona-trigger{height:52px;min-height:52px;font-size:14px}
  .availability-note{min-height:0;margin:12px 0 0}
  .begin-button{margin-top:14px;min-height:46px;background:var(--badge-bg);border-color:var(--accent);color:var(--accent-text);font-weight:680}
  .begin-button:hover:not(:disabled),.begin-button:focus-visible:not(:disabled),.begin-button:active:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--button-text)}
  .begin-button:disabled{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
  .daily-insights-inline{margin-top:10px}
}

/* Desktop menus: unavailable topics carry the same Coming soon pill as roles,
   and long topic labels wrap inside the option and the selected control
   instead of clipping past the edge. Desktop-only; mobile styling untouched. */
@media(min-width:901px){
  .choice-menu .choice-option{flex-wrap:wrap}
  .choice-menu .choice-name{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
  .choice-badge{flex:none;margin-top:1px;white-space:nowrap}
  .choice-picker .choice-trigger,.setup-fields .field .choice-trigger{height:auto;min-height:52px;padding-top:9px;padding-bottom:9px;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
}

/* Daily Insights: the bulb is a real, session-only visual toggle on every
   viewport; "Coming soon" text carries the same pill as an unavailable persona. */
.daily-insight-bulb{cursor:pointer;transition:color .12s ease,transform .1s ease}
.daily-insight-bulb:hover{color:var(--accent-text)}
.daily-insight-bulb:active{transform:scale(.96)}
.daily-insight-bulb[aria-pressed="true"]{color:var(--accent)}
.daily-insights-inline .persona-badge{align-self:center;margin-top:1px}

/* Mobile home fit: pull the first screen's rhythm together so heading, CTA, the
   four choices, the secondary Start, and Daily Insight sit without a large dead
   gap; give the secondary Start a clear gap above it and a light-green idle fill
   that turns emerald on tap/keyboard focus (touch has no hover). */
@media(max-width:600px){
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .setup-panel{margin-top:0}
  .setup-heading{margin-bottom:14px}
  .setup-heading h1{margin-bottom:9px}
  .setup-heading p{min-height:0}
  .recommended-button{min-height:48px}
  .choose-heading{margin:13px 0 9px;font-size:16px;font-weight:750;color:var(--text);letter-spacing:.005em}
  .setup-fields{gap:9px 10px}
  .availability-note{margin:9px 0 0}
  .begin-button{margin-top:16px;background:var(--badge-bg);border-color:var(--accent);color:var(--accent-text);font-weight:680}
  .begin-button:active:not(:disabled),.begin-button:focus-visible:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--button-text)}
  .begin-button:disabled{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
  .daily-insights-inline{margin-top:8px;min-height:34px}
  .daily-insight-bulb{width:38px;height:38px}
  .daily-insight-text{font-size:12px}
}

/* Mobile choices: long topic labels wrap inside the trigger and the menu row so
   the chevron never overlaps text and the control grows instead of clipping.
   The unavailable "Coming soon" pill rides the same row without squeezing. */
@media(max-width:900px){
  .choice-picker .choice-trigger,.setup-fields .field .choice-trigger{height:auto;min-height:52px;padding-top:9px;padding-bottom:9px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.3}
  .choice-menu .choice-option{flex-wrap:wrap;align-items:flex-start;min-height:46px;padding:9px 11px;gap:4px 12px}
  .choice-menu .choice-name{flex:1 1 auto;min-width:0;font-size:14px;white-space:normal;overflow-wrap:anywhere}
  .choice-badge{flex:none;margin-top:1px;white-space:nowrap}
  .choice-menu .persona-badge{align-self:flex-start}
}

/* Progress & Leaderboard presentation: each view now leads with its single heading
   and an aligned subtitle (the redundant eyebrow is gone from the markup), the
   "Not yet assessed" cue is identical in By skill and By topic on web and mobile
   (same size, weight, and dot alignment), long topic labels wrap instead of
   colliding with that cue, and the empty History note is padded inside its card. */
#progress-view .view-heading,#leaderboard-view .view-heading{margin-bottom:28px}
#progress-view .view-heading h1,#leaderboard-view .view-heading h1{margin:0 0 10px}
#progress-view .view-heading p,#leaderboard-view .view-heading p{margin:0}
.dimension-row .level-indicator,.topic-coverage-label .level-indicator{display:inline-flex;align-items:center;font-size:14px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}
.dimension-row .level-indicator::before,.topic-coverage-label .level-indicator::before{flex:none}
.topic-coverage-label>span:first-child{min-width:0;overflow-wrap:anywhere}
.history-list>.progress-note{margin:0;padding:15px 16px}

/* Mobile case composer: the answer area was drawing a full-width pale dock band
   below the case. Here the dock becomes a transparent layout spacer so only the
   rounded input pill shows, floating over the case. The pill keeps the opaque
   surface plus a tight page-coloured ring, so any case text that reaches its
   edge is masked instead of staying legible; there is no wide visible band.
   Scoped to the mobile case viewport only, so the home dock and the desktop
   fixed dock are untouched. */
@media(max-width:900px){
  body.case-viewport .answer-dock{
    background:transparent;
    box-shadow:none;
    border-radius:0;
    padding:8px max(10px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right));
  }
  body.case-viewport .answer-dock .answer-composer{
    background:var(--surface);
    box-shadow:0 0 0 6px var(--bg),0 12px 28px var(--shade);
  }
}

/* Keyboard-open composer: the dock is the last flex child of the case frame, so
   anchoring the frame bottom to the visual viewport already parks the pill on the
   keyboard. The one thing left to remove is the home-indicator padding: iOS keeps
   reporting safe-area-inset-bottom (~34px) while the keyboard covers that strip,
   and that dead space is what held the pill floating above the keys. The bottom
   inset drops to a tight 4px here; horizontal insets stay so the pill still
   clears the edges.
   Everything reverts when .keyboard-open drops, so the closed state keeps its
   original bottom position. */
@media(max-width:900px){
  body.case-viewport.keyboard-open .answer-dock{padding-bottom:4px}
  body.case-viewport.keyboard-open .answer-dock .answer-composer{box-shadow:0 0 0 6px var(--bg),0 6px 16px var(--shade)}
}

.session-meta{border-bottom:1px solid var(--line)}
.session-meta .session-summary{border-bottom:0}
@media(max-width:900px){
  .session-meta{display:flex;align-items:center;gap:10px}
  .session-meta .session-summary{flex:1;min-width:0;overflow-wrap:anywhere}
}

/* On taller phones, spend the otherwise unused space on a calmer setup rhythm.
   Short screens keep the compact layout so no control is pushed behind the nav. */
@media(max-width:600px) and (min-height:760px){
  .setup-panel{padding-top:clamp(9px,3vh,25px)}
  .setup-heading{margin-bottom:clamp(22px,3.2vh,29px)}
  .choose-heading{margin:clamp(22px,3vh,27px) 0 12px;font-size:18px}
  .setup-fields{gap:clamp(13px,1.8vh,17px) 10px}
  .setup-fields .field .choice-trigger{min-height:56px}
  .begin-button{min-height:56px;margin-top:24px}
  .daily-insights-inline{margin-top:15px}
}

/* Make the bulb's selected state visible even without hover on touchscreens. */
.daily-insight-bulb[aria-pressed="true"]{color:var(--accent-text);background:var(--badge-bg)}
.daily-insight-bulb[aria-pressed="true"] .bulb-body{fill:var(--accent)}
.case-home-button{display:none}

@media(max-width:900px){
  .session-controls{gap:8px}
  .session-persona-picker{min-width:0;max-width:none}
  .case-home-button{display:inline-grid;flex:none;width:44px;height:44px;border-radius:14px}
  .session-controls .back-button,.session-controls .filter-button{flex:none}
}

/* The mobile landing screen fits a single viewport; case and progress screens
   retain their own scrolling. Very short screens may scroll to keep every control reachable. */
@media(max-width:600px){
  html.setup-viewport,body.setup-viewport{height:100%;overflow:hidden;overscroll-behavior:none}
  body.setup-viewport .app-shell{height:100dvh;min-height:0;overflow:hidden}
  body.setup-viewport .workspace{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  body.setup-viewport #main-content{flex:1;min-height:0;overflow:hidden;overscroll-behavior:none}
  .level-row{grid-template-columns:1fr;gap:6px}
  .level-cell{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;text-align:left}
  .level-label{font-size:13px;overflow-wrap:normal}
  .level-value{margin-top:0;font-size:13px;overflow-wrap:normal;white-space:nowrap}
}
@media(max-width:600px) and (max-height:700px){body.setup-viewport #main-content{overflow-y:auto}}

.feedback-rating { margin-top: 24px; min-height: 44px; }
.rating-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.rating-row span { margin-right: auto; }
.rating-row button, .rating-reasons button { min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; }
.rating-row button[aria-pressed="true"], .rating-reasons button[aria-pressed="true"] { background: var(--accent); color: var(--button-text); }
.rating-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 13px; }
.copyright { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 24px; }

.feedback-fixes{padding-left:1.2rem;margin:0.5rem 0 1rem}.feedback-fixes li{margin:0.5rem 0;line-height:1.5;overflow-wrap:anywhere}