:root{
  --cream:#fdf9f2;         /* lighter paper-cream */
  --paper:#ffffff;
  --ink:#33302b;           /* keep text dark for readability */
  --ink-soft:#6f675c;
  --sage:#7cbb86;          /* softened green (was #5fa86b) */
  --sage-deep:#5b9a6a;     /* softened (was #418a52) */
  --sage-soft:#e4f1e6;     /* lighter green wash */
  --clay:#f3a585;          /* softened coral (was #ef8a5d) */
  --clay-soft:#ffe8d6;
  --amber:#f8c662;         /* softened amber (was #f7b733) */
  --amber-soft:#fff2d4;
  --sky:#7cc6d6;           /* softened teal (was #54b3c9) */
  --sky-soft:#e0f2f6;
  --berry:#e08bbb;         /* softened pink (was #d96aa6) */
  --line:#f2e8d9;
  --line-soft:#f8f1e7;
  --shadow:0 2px 4px rgba(80,60,30,.05), 0 12px 34px rgba(80,60,30,.09);
  --radius:20px;
  --radius-sm:13px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:
    radial-gradient(1100px 460px at 12% -8%, rgba(247,183,51,.10), transparent 60%),
    radial-gradient(1000px 480px at 100% 0%, rgba(84,179,201,.09), transparent 55%),
    radial-gradient(900px 520px at 50% 108%, rgba(217,106,166,.06), transparent 60%),
    var(--cream);
  background-attachment:fixed;
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand-name{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.01em}

/* topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,5vw,48px);
  border-bottom:1px solid var(--line);
  background:rgba(255,253,248,.8);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px}
.logo{color:var(--sage);flex:none}
.brand-dot{fill:var(--amber)}
.brand-name{font-size:1.3rem;color:var(--ink)}
.sidebar .brand-name{font-size:1.02rem}
.brand-sub{font-size:.78rem;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase;align-self:flex-end;padding-bottom:3px}
@media(max-width:560px){.brand-sub{display:none}}

/* ===== sidebar shell ===== */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:140px;flex:none;position:sticky;top:0;align-self:flex-start;height:100vh;
  background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;padding:18px 10px;z-index:30;
}
.sidebar-brand{padding:4px 8px 16px}
.nav-items{display:flex;flex-direction:column;gap:4px}
.nav-foot{margin-top:auto;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:10px}
.nav-item{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font-family:inherit;font-size:.72rem;font-weight:600;color:var(--ink-soft);
  background:transparent;border:none;border-radius:10px;padding:8px 9px;cursor:pointer;
  transition:background .14s,color .14s;
}
.nav-item svg{flex:none}
.nav-item:hover{background:var(--sky-soft);color:var(--ink)}
.nav-item.active{background:var(--sage);color:#fff}
.nav-item.subtle{font-size:.82rem;font-weight:500}
.soon-tag{margin-left:auto;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--amber-soft);color:#7a5a16;padding:2px 7px;border-radius:999px}
.nav-item.active .soon-tag{background:rgba(255,255,255,.3);color:#fff}
.content{flex:1;min-width:0;display:flex;flex-direction:column}

/* Collapsible sidebar: a chevron in the header collapses it to an icon-only
   narrow strip on desktop. State persists in localStorage. */
.sidebar-brand{position:relative}
.sidebar-collapse-btn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink-soft);cursor:pointer;transition:background .14s,color .14s}
.sidebar-collapse-btn:hover{background:var(--sky-soft);color:var(--ink)}
.sidebar.collapsed{width:64px;padding:20px 8px}
.sidebar.collapsed .brand-name,
.sidebar.collapsed .nav-item span:not(.soon-tag),
.sidebar.collapsed .soon-tag,
.sidebar.collapsed .nav-classroom-pick,
.sidebar.collapsed .nav-classroom-single,
.sidebar.collapsed .lang-switch{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding:10px 0;gap:0}
.sidebar.collapsed .sidebar-brand{justify-content:center;padding:4px 0 16px}
.sidebar.collapsed .sidebar-collapse-btn{margin:0}
.sidebar.collapsed .sidebar-collapse-btn svg{transform:rotate(180deg)}

/* mobile bar + scrim (hidden on desktop) */
.mobile-bar{display:none;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:35}
.mobile-bar .brand-name{font-size:1.15rem}
.sidebar-scrim{display:none}
@media(max-width:820px){
  .mobile-bar{display:flex}
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s ease;box-shadow:8px 0 30px rgba(0,0,0,.12)}
  .sidebar.open{transform:none}
  .sidebar-brand{display:none}
  .sidebar-scrim{display:block;position:fixed;inset:0;background:rgba(46,42,36,.35);z-index:29;opacity:0;pointer-events:none;transition:opacity .25s}
  .sidebar-scrim.show{opacity:1;pointer-events:auto}
}

.wrap{max-width:780px;margin:0 auto;padding:clamp(24px,5vw,48px) clamp(18px,5vw,28px) 80px}

/* settings view */
.set-card{margin-bottom:18px}
.set-h{font-size:1.15rem;margin-bottom:4px}
.set-h4{font-size:.95rem;margin-bottom:8px;color:var(--ink-soft)}
.set-sub{color:var(--ink-soft);font-size:.92rem;margin-bottom:14px}
.refdoc-processed-note{background:#eef6ee;border:1px solid #cfe6cf;color:#2f6b3a;border-radius:10px;padding:10px 12px;font-size:.88rem;line-height:1.5;margin:0 0 14px}
.set-divider{height:1px;background:var(--line);margin:18px 0}
.kb-pending{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.kb-pending .kb-file,.kb-list .kb-doc{display:flex;align-items:center;gap:10px;background:#fbf7ee;border:1px solid var(--line-soft);border-radius:10px;padding:9px 12px;font-size:.9rem}
.kb-doc .kb-meta{color:var(--ink-soft);font-size:.82rem;margin-left:auto}
.kb-doc .kb-dl{cursor:pointer;color:var(--sage-deep);font-weight:600;background:var(--sky-soft);border:1px solid var(--line-soft);border-radius:8px;font-size:.8rem;padding:4px 9px;white-space:nowrap}
.kb-doc .kb-dl:hover{background:#e3eef6}
.kb-doc .kb-nodl{margin-left:0;font-style:italic;opacity:.7}
.kb-doc .kb-del{cursor:pointer;color:#b34a2a;font-weight:700;background:none;border:none;font-size:1rem}
.kb-empty{color:var(--ink-soft);font-size:.9rem;font-style:italic}
.kb-file .kb-x{margin-left:auto;cursor:pointer;color:var(--ink-soft);background:none;border:none;font-size:1.1rem}
.set-card textarea{width:100%}
.fw-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.fw-item{display:flex;align-items:center;gap:10px;background:#fbf7ee;border:1px solid var(--line-soft);border-radius:10px;padding:10px 13px}
.fw-item-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.fw-name{font-weight:700;font-size:.92rem}
.fw-basis{font-size:.8rem;color:var(--ink-soft)}
.fw-docnote{font-size:.78rem;color:var(--sage-deep)}
.fw-del{cursor:pointer;color:#b34a2a;font-weight:700;background:none;border:none;font-size:1.1rem;flex-shrink:0}
.fw-add{display:flex;flex-direction:column;gap:12px;border-top:1px dashed var(--line);padding-top:16px}
.fw-add input[type=text]{width:100%}
.fw-row{display:flex;gap:16px;flex-wrap:wrap}
.fw-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px}
.fw-docs{display:flex;flex-direction:column;gap:5px;max-height:130px;overflow:auto;background:#fbf7ee;border:1px solid var(--line-soft);border-radius:10px;padding:9px 11px}
.fw-doc-opt{display:flex;align-items:center;gap:7px;font-size:.86rem;cursor:pointer}
.fw-nodocs{font-size:.84rem;color:var(--ink-soft);font-style:italic}
.fw-toggle{display:flex;align-items:flex-start;gap:9px;font-size:.86rem;color:var(--ink);line-height:1.4;cursor:pointer}
.fw-toggle input{margin-top:3px;flex-shrink:0}

/* assistance dial */
.assist-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.analyze-media-row{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:.86rem;color:var(--ink);cursor:pointer}
.analyze-media-row input{accent-color:var(--sage);width:16px;height:16px;cursor:pointer}
.analyze-media-row[hidden]{display:none}
.assist-label{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.assist-dial{display:inline-flex;background:var(--line-soft);border-radius:999px;padding:3px}
.assist-opt{font-family:inherit;font-size:.86rem;font-weight:600;border:none;background:transparent;color:var(--ink-soft);padding:6px 14px;border-radius:999px;cursor:pointer;transition:all .14s}
/* Secondary control: light-green pill so it reads below the primary green buttons */
.assist-opt.active{background:var(--sage-soft);color:var(--sage-deep);box-shadow:inset 0 0 0 1px rgba(65,138,82,.25)}
.assist-hint{font-size:.82rem;color:var(--ink-soft)}
/* Two-step journey: Step 1 Draft -> Step 2 Finalize */
.step{display:flex;gap:18px;align-items:stretch}
.step-rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:34px}
.step-node{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;background:#fff;color:var(--sage-deep);border:2px solid var(--sage);box-shadow:0 1px 4px rgba(80,60,30,.12)}
.step-line{flex:1;width:2px;background:linear-gradient(var(--sage),var(--line-soft));margin:6px 0;min-height:24px}
.step-body{flex:1;min-width:0;padding-bottom:8px}
.step-head{margin-bottom:14px}
.step-kicker{display:block;font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;color:var(--ink);letter-spacing:.01em}
.step-sub{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:3px;line-height:1.45}
#step2{margin-top:0}
/* Active step (the one currently in view) gets the filled node + brighter rail */
.step.active .step-node{background:var(--sage);color:#fff;border-color:var(--sage)}
.step.active .step-line{background:var(--sage)}
.step2-card{margin-top:18px}
/* Generated note + tags live inside Step 2: blend, don't float as a 3rd card */
#step2 #results{margin-top:18px}
#step2 .editor-card{border:none;box-shadow:none;background:transparent;padding:0;border-top:1px solid var(--line);padding-top:18px;border-radius:0}
#step2 .scene-card{background:#fbf7ee;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:14px}
.inline-loading{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px;padding:22px;background:#fbf7ee;border:1px solid var(--line-soft);border-radius:var(--radius-sm)}
@media(max-width:620px){
  .step{gap:12px}
  .step-rail{width:30px}
  .step-node{width:30px;height:30px;font-size:.95rem}
}

/* Two pathways: AI-enhanced writing vs grammar-only */
.pathways{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch;margin-top:4px}
.pathway{display:flex;flex-direction:column;gap:10px;flex:1;min-width:240px;background:#fbf7ee;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:14px 16px}
.pathway .assist-row{margin-bottom:2px}
.pathway .primary-btn,.pathway .pathway-btn{width:100%;justify-content:center}
/* Match grammar button height to the Light/Full touch buttons (same padding + font-size). */
.pathway.grammar .pathway-btn{font-size:.95rem;padding:11px 14px}
.pathway-hint{font-size:.8rem;color:var(--ink-soft);line-height:1.45}
/* Larger lane heading that replaces the old small 'AI help' label */
.pathway-title{font-family:var(--serif,Georgia,serif);font-size:1.12rem;font-weight:700;color:var(--ink);margin:0 0 2px}
/* Light/Full touch as two real action buttons (not a pill toggle) */
.assist-dial.buttons{display:flex;gap:10px;background:none;padding:0;border-radius:0;margin-top:2px}
/* Both touch buttons use the solid deep-green primary style (same as the
   grammar button). Override the base .assist-opt / .active pill styling so the
   color is symmetric with AI grammar/spell check. */
.assist-dial.buttons .assist-opt,
.assist-dial.buttons .assist-opt.active{flex:1;justify-content:center;font-size:.95rem;padding:11px 14px;border-radius:var(--radius-sm);background:var(--sage,#4a7a52);color:#fff;box-shadow:none}
.assist-dial.buttons .assist-opt:disabled{opacity:.5;cursor:not-allowed}
.pathway.grammar{justify-content:space-between}
.pathway.enhanced{justify-content:space-between}
.pathway.grammar .pathway-hint.top{margin-bottom:auto}
@media(max-width:620px){.pathways{flex-direction:column}}

/* two-lane editor */
.editor-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);padding:clamp(18px,4vw,26px)}
.editor-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:12px;font-size:.82rem;color:var(--ink-soft)}
.legend-chip{display:inline-flex;align-items:center;gap:6px}
.legend-dot{width:12px;height:12px;border-radius:3px}
.legend-dot.teacher{background:var(--ink)}
.legend-dot.ai{background:var(--sky)}
.lane-doc{font-size:1.02rem;line-height:1.75;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:16px 18px;background:#fffdf9;min-height:80px}
.lane-doc:focus{outline:none;box-shadow:0 0 0 3px rgba(122,139,111,.15);border-color:var(--sage)}
.seg-teacher{color:var(--ink)}
.seg-ai{color:#2f7d92;background:var(--sky-soft);border-radius:4px;padding:0 2px;box-shadow:inset 0 -2px 0 rgba(84,179,201,.5);cursor:pointer;transition:background .12s}
.seg-ai:hover{background:#bfe6ee}
.seg-ai.kept{color:var(--ink);background:transparent;box-shadow:none;cursor:auto}
.seg-controls{display:inline-flex;gap:3px;margin:0 3px;vertical-align:middle}
.seg-btn{border:none;background:var(--sky);color:#fff;width:20px;height:20px;border-radius:50%;font-size:.72rem;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.seg-btn.no{background:#d98a6a}
/* Editor AI controls: layered top->bottom (path -> strength -> run). */
.editor-tools{display:flex;flex-direction:column;gap:12px;margin-top:16px;align-items:stretch}

/* Layer 1: two side-by-side, mutually-exclusive path buttons. */
.ai-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ai-choice-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  font-family:inherit;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;
  transition:border-color .15s,background .15s,box-shadow .15s}
.ai-choice-btn:hover{border-color:var(--sage)}
.ai-choice-btn.active{border-color:var(--sage);background:var(--sage-soft);
  box-shadow:inset 0 0 0 1px var(--sage)}
.ai-choice-btn .aic-title{font-size:.95rem;font-weight:700;color:var(--ink)}
.ai-choice-btn.active .aic-title{color:var(--sage-deep)}
.ai-choice-btn .aic-sub{font-size:.8rem;color:var(--ink-soft)}
@media(max-width:560px){.ai-choice{grid-template-columns:1fr}}

/* Layer 2: rewrite strength, visually nested under the rewrite choice. */
.rewrite-strength{display:flex;align-items:center;gap:10px;padding-left:4px}
.rewrite-strength-label{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.editor-dial{margin-right:2px}
.editor-dial .assist-opt{font-size:.82rem;padding:5px 11px}

/* Selecting a path runs it; a small running note shows progress. */
.ai-choice-btn:disabled{opacity:.55;cursor:wait}
.ai-running-note{font-size:.86rem;color:var(--sage-deep);font-weight:600}
.edited-prompt{margin-top:10px;font-size:.88rem;color:var(--sage-deep);background:var(--sky-soft);border-radius:10px;padding:9px 13px}
.link-btn{background:none;border:none;color:var(--sage-deep);font-weight:700;font-family:inherit;font-size:.88rem;cursor:pointer;text-decoration:underline;padding:0}

/* gap prompts */
.gaps-box{margin-top:14px;background:var(--amber-soft);border:1px solid #f0d79a;border-radius:var(--radius-sm);padding:12px 15px}
.gaps-title{font-size:.82rem;font-weight:700;color:#7a5a16;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.gap-item{font-size:.9rem;color:#6b4f12;padding:4px 0;display:flex;gap:8px;align-items:flex-start}
.gap-item .gq{flex:1}
.gap-add{font-size:.78rem;font-weight:600;color:var(--sage-deep);cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:8px;padding:3px 9px;white-space:nowrap}

/* side-by-side tags */
.tags-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media(max-width:560px){.tags-grid{grid-template-columns:1fr}}
.tags-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}
.tags-head-label{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;color:var(--ink)}
.tags-fw{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-soft);font-weight:600}
.tags-fw select{font-size:.85rem;padding:6px 10px;max-width:220px}
.field-hint{font-size:.78rem;color:var(--ink-soft);margin-top:4px;line-height:1.4}
.age-field{margin-top:14px;max-width:340px}
.age-field select{max-width:220px}
.tags-col{border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:12px 14px;background:#fbf7ee}
.tags-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.tags-col.elof h4{color:var(--clay)}
.tags-col.drdp h4{color:var(--sage-deep)}
.tag-item{display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:9px;background:#fff;border:1px solid var(--line-soft);margin-bottom:8px}
.tag-top{display:flex;align-items:center;gap:8px}
.tag-code{font-weight:700;font-size:.8rem;color:#fff;background:var(--sage);border-radius:6px;padding:2px 8px}
.tags-col.elof .tag-code{background:var(--clay)}
.tag-name{font-size:.86rem;font-weight:600}
.tag-confirm{margin-left:auto;display:inline-flex;gap:4px}
.tag-confirm button{border:none;border-radius:6px;width:24px;height:22px;cursor:pointer;font-size:.72rem;font-weight:700}
.tag-yes{background:#e2efe0;color:var(--sage-deep)}
.tag-yes.on{background:var(--sage);color:#fff}
.tag-no{background:#f6e6df;color:#b34a2a}
.tag-evidence{font-size:.8rem;color:var(--ink-soft);font-style:italic}

/* records view */
.record-notice{background:var(--amber-soft);border:1px solid #f0d79a;border-radius:var(--radius-sm);padding:11px 14px;font-size:.86rem;color:#7a5a16;margin-bottom:16px}
.records-list{display:flex;flex-direction:column;gap:12px}
.record-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);padding:14px 16px;box-shadow:var(--shadow)}
.record-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.record-child{font-weight:700}
.record-meta{font-size:.8rem;color:var(--ink-soft);margin-left:auto}
.record-note{font-size:.92rem;color:var(--ink);line-height:1.5}
.record-thumb{display:block;max-width:220px;max-height:160px;width:auto;height:auto;border-radius:10px;border:1px solid var(--line-soft);margin:2px 0 10px;object-fit:cover}
.editor-image-wrap{margin:4px 0 14px}
.editor-image{display:block;max-width:280px;max-height:200px;width:auto;height:auto;border-radius:12px;border:1px solid var(--line-soft);object-fit:cover}
.record-tags{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.record-actions{display:flex;gap:8px;margin-top:10px}
.records-empty{color:var(--ink-soft);font-style:italic;padding:20px;text-align:center}
.records-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.new-obs-btn{white-space:nowrap;flex-shrink:0}
@media(max-width:560px){.records-intro{flex-direction:column}.records-intro .new-obs-btn{width:100%}}

/* lesson placeholder */
/* Lesson view hosts the embedded Curriculum Planner full-bleed. */
.lesson-view,.ratingv2-view,.ratingv3-view{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh}
.lesson-frame{flex:1;width:100%;height:100%;border:0;display:block}
.lesson-placeholder{text-align:center;padding:48px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--ink-soft)}
.lesson-placeholder svg{color:var(--sage)}
.lesson-placeholder h1{font-size:clamp(1.5rem,4vw,2rem);color:var(--ink)}

.intro{text-align:center;margin-bottom:34px}
.intro h1{font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.12;margin-bottom:14px}
.intro h1 .pop{color:var(--clay)}
.intro h1 .pop2{color:var(--sky)}
.lede{color:var(--ink-soft);font-size:1.05rem;max-width:60ch;margin:0 auto}
.lede strong{color:var(--sage-deep);font-weight:600}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(20px,4vw,30px);
}
.upload-card{display:flex;flex-direction:column;gap:18px}

.controls-row{display:flex;gap:14px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:160px}
.field-label{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
input[type=text],select,textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:11px 13px;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
textarea{resize:vertical;line-height:1.5}
input[type=text]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(122,139,111,.15);
}

/* write field + add-media */
.write-field textarea{font-size:1rem}
.add-media-btn{align-self:flex-start}
#mediaBlock{display:flex;flex-direction:column;gap:18px}

/* hint field + mic */
.hint-input-wrap{position:relative}
/* Draft box ~50% taller than the default 4 rows for more comfortable writing. */
.hint-input-wrap textarea{padding-right:48px;min-height:165px}
.mic-btn{
  position:absolute;right:8px;bottom:8px;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--sage-deep);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s;
}
.mic-btn:hover{border-color:var(--sage);background:#f1efe4}
.mic-btn.recording{background:var(--clay);border-color:var(--clay);color:#fff;animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,135,106,.5)}50%{box-shadow:0 0 0 7px rgba(201,135,106,0)}}
.mic-status{font-size:.82rem;color:var(--clay);font-weight:500;margin-top:6px;display:block}

/* video child-select frame */
.frame-select{display:flex;flex-direction:column;gap:10px}
.frame-scrub{display:flex;flex-direction:column;gap:4px}
.frame-scrub label{font-size:.82rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:4px}
.scrub-hint{font-size:.82rem;color:var(--sage-deep)}
#frameStage{min-height:140px}
#pickFrameBtn{align-self:flex-start;margin-top:4px}

/* select hint + child markers */
.select-hint{font-size:.9rem;color:var(--sage-deep);font-weight:500;background:#eef1ea;border-radius:var(--radius-sm);padding:10px 14px}
.img-stage{position:relative;display:flex;justify-content:center;width:100%;line-height:0;background:#000;border-radius:var(--radius-sm)}
.img-stage img{max-width:100%;max-height:340px;width:auto;height:auto;object-fit:contain;display:block;border-radius:var(--radius-sm)}
.marker-layer{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.marker-layer .marker{pointer-events:auto}
.marker{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 4px;border-radius:999px;
  background:rgba(255,253,248,.9);border:2px solid var(--sage);
  color:var(--sage-deep);font-weight:700;font-size:.9rem;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform .12s,background .15s,border-color .15s;
  z-index:2;
}
.marker:hover{transform:translate(-50%,-50%) scale(1.08)}
.marker.sel{background:var(--sage);border-color:#fff;color:#fff}
.marker-box{
  position:absolute;border:2px dashed rgba(122,139,111,.7);border-radius:8px;
  pointer-events:none;z-index:1;transition:border-color .15s,background .15s;
}
.marker-box.sel{border-style:solid;border-color:var(--sage);background:rgba(122,139,111,.16)}

/* dropzone */
.dropzone{
  border:2px dashed var(--line);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#fffdf8,#fbf6ec);
  padding:34px 20px;text-align:center;cursor:pointer;
  transition:border-color .18s,background .18s,transform .12s;
}
.dropzone:hover{border-color:var(--sage)}
.dropzone.drag{border-color:var(--sage);background:#f1efe4;transform:scale(.995)}
.dz-inner{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-soft)}
.dz-inner svg{color:var(--sage)}
.dz-title{font-size:1rem;color:var(--ink);font-weight:500}
.dz-title .link{color:var(--sage-deep);text-decoration:underline}
.dz-hint{font-size:.85rem}
.dropzone.has-image{padding:0;border-style:solid;overflow:hidden}
.dropzone .thumb{width:100%;max-height:340px;object-fit:contain;display:block;background:#000}

/* trimmer */
.trimmer{display:flex;flex-direction:column;gap:12px;padding:6px 2px}
.preview{width:100%;max-height:320px;border-radius:var(--radius-sm);background:#000}
.trim-msg{font-size:.9rem;color:var(--clay);font-weight:500}
.trim-controls{display:flex;flex-direction:column;gap:8px}
.trim-controls label{font-size:.82rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:4px}
input[type=range]{accent-color:var(--sage);width:100%}
.trim-readout{font-size:.9rem;color:var(--ink);display:flex;align-items:center;gap:8px}
.len-badge{margin-left:auto;background:var(--clay-soft);color:#6b4a36;padding:2px 10px;border-radius:999px;font-size:.82rem;font-weight:600}

.hint-field{flex:none}

.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.primary-btn{
  font-family:inherit;font-size:.98rem;font-weight:600;
  background:var(--sage);color:#fff;border:none;cursor:pointer;
  padding:13px 22px;border-radius:var(--radius-sm);
  transition:background .15s,transform .1s,opacity .15s;
}
.primary-btn:hover:not(:disabled){background:var(--sage-deep)}
.primary-btn:active:not(:disabled){transform:translateY(1px)}
.primary-btn:disabled{opacity:.45;cursor:not-allowed}
.ghost-btn{
  font-family:inherit;font-size:.92rem;font-weight:500;
  background:transparent;color:var(--ink-soft);border:1px solid var(--line);
  padding:11px 16px;border-radius:var(--radius-sm);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.ghost-btn:hover{border-color:var(--sage);color:var(--sage-deep)}
.privacy-note{font-size:.8rem;color:var(--ink-soft);opacity:.85}

/* loading */
.loading{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:22px;text-align:center}
.loading p{color:var(--ink-soft)}
.spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--sage);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* results */
.results{margin-top:24px;display:flex;flex-direction:column;gap:18px}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-deep)}
.scene-card p{margin-top:8px;color:var(--ink)}
.detected{color:var(--ink-soft);font-size:.9rem}

.child-card{animation:rise .4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.child-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.child-pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  color:#fff;font-weight:700;font-size:.98rem;flex:none;
  box-shadow:0 2px 6px rgba(80,60,30,.18);
}
/* cheerful rotating pill colors per child */
.child-pill.c0{background:var(--sage)}
.child-pill.c1{background:var(--clay)}
.child-pill.c2{background:var(--sky)}
.child-pill.c3{background:var(--berry)}
.child-pill.c4{background:var(--amber);color:#5b4412}
.child-title{font-family:'Fraunces',serif;font-size:1.15rem}
.child-name-input{max-width:170px;font-size:.88rem;padding:7px 11px;margin-left:auto}

.note-block{
  background:#fbf7ee;border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:14px;
}
.note-label{font-size:.78rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.note-text{color:var(--ink);white-space:pre-wrap}

.domains{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.domain{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px}
.domain-code{font-weight:700;color:#fff;font-size:.82rem;background:var(--sage);border-radius:7px;padding:3px 9px;white-space:nowrap;flex:none}
.domain-body{font-size:.9rem}
.domain-name{font-weight:600;color:var(--ink)}
.domain-rat{color:var(--ink-soft);font-size:.86rem}

.refine-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.refine-row .field{min-width:200px}
.refine-btn{flex:none}
.copy-btn{flex:none}
.copied{color:var(--sage-deep);font-size:.84rem;font-weight:600}

/* staged progress + frame bar */
.progress-wrap{width:100%;max-width:420px;display:flex;flex-direction:column;gap:6px;align-items:center}
.progress-track{width:100%;height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.progress-bar{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--amber),var(--sage));transition:width .2s ease}
.progress-count{font-size:.82rem;color:var(--ink-soft)}
.stage-list{list-style:none;display:flex;flex-direction:column;gap:7px;width:100%;max-width:420px;margin-top:4px}
.stage-list li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-soft);opacity:.55;transition:opacity .2s,color .2s}
.stage-list li .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;font-size:.7rem}
.stage-list li.active{opacity:1;color:var(--ink);font-weight:500}
.stage-list li.active .dot{border-color:var(--sage)}
.stage-list li.done{opacity:1;color:var(--sage-deep)}
.stage-list li.done .dot{background:var(--sage);border-color:var(--sage);color:#fff}

/* streaming caret while a note writes */
.note-text.streaming::after{content:'\258c';color:var(--sage);animation:blink 1s step-start infinite;margin-left:1px}
@keyframes blink{50%{opacity:0}}

/* inline-editable note */
.note-text[contenteditable="true"]{outline:none;border-radius:8px;transition:box-shadow .15s,background .15s}
.note-text[contenteditable="true"]:focus{background:#fff;box-shadow:0 0 0 2px rgba(95,168,107,.35);padding:8px 10px;margin:-8px -10px}
.note-block{position:relative}
.edit-flag{position:absolute;top:10px;right:12px;font-size:.72rem;color:var(--sage-deep);font-weight:600;opacity:0;transition:opacity .2s}
.note-block:hover .edit-flag,.note-text:focus ~ .edit-flag{opacity:.75}

/* refine chips (Gemini-style) */
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip{
  display:inline-flex;align-items:center;gap:4px;
  font-family:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  background:var(--paper);color:var(--sage-deep);
  border:1.5px solid var(--line);border-radius:999px;padding:6px 13px;
  transition:background .14s,border-color .14s,color .14s,transform .1s;
}
.chip:hover{border-color:var(--sage);background:var(--sky-soft)}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--sage);border-color:var(--sage);color:#fff}
.chip .plus{font-weight:700}

/* language toggle */
.lang-row{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.lang-label{font-size:.78rem;color:var(--ink-soft);margin-right:2px}
.lang-btn{
  font-family:inherit;font-size:.84rem;font-weight:600;cursor:pointer;
  background:transparent;border:1.5px solid var(--line);border-radius:9px;
  padding:4px 12px;color:var(--ink-soft);transition:all .14s;
}
.lang-btn:hover{border-color:var(--sky)}
.lang-btn.on{background:var(--sky);border-color:var(--sky);color:#fff}

/* final-note language switch: Original / EN / 中文 / ES */
.note-lang-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.note-lang-btn{
  font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  background:transparent;border:1.5px solid var(--line);border-radius:9px;
  padding:4px 12px;color:var(--ink-soft);transition:all .14s;
}
.note-lang-btn:hover{border-color:var(--sky)}
.note-lang-btn.on{background:var(--sky);border-color:var(--sky);color:#fff}
.note-lang-hint{font-size:.74rem;color:var(--ink-soft);margin-left:4px;flex:1 1 100%}
.note-translated{white-space:pre-wrap;line-height:1.7;color:var(--ink)}
.note-translated.streaming{opacity:.55}

/* top actions + context bar */
.top-actions{display:flex;gap:8px;align-items:center}
.ghost-btn.small{padding:6px 11px;font-size:.82rem}
.ghost-btn.full{width:100%;justify-content:center;text-align:center}
.context-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--sky-soft);border-bottom:1px solid var(--line);
  padding:10px clamp(18px,5vw,48px);position:sticky;top:62px;z-index:15;
}
.context-bar .ctx-label{font-size:.84rem;color:var(--ink-soft);font-weight:600}
.context-bar select{width:auto;min-width:150px;padding:7px 11px;font-size:.9rem}

/* auth / account */
.info-note{background:var(--amber-soft);border:1px solid #f0d79a;border-radius:var(--radius-sm);padding:11px 14px;font-size:.9rem;color:#7a5a16;margin-bottom:6px}
.err-inline{color:#b34a2a;font-size:.88rem;font-weight:500}
.acct-card{background:var(--sky-soft);border-radius:var(--radius-sm);padding:14px 16px}
.acct-name{font-weight:700;font-size:1.05rem}
.acct-meta{color:var(--ink-soft);font-size:.88rem;margin-top:2px}
.drawer.wide{width:min(560px,94vw)}

/* management view */
.mg-section{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:14px}
.mg-section h3{font-size:1.05rem;margin-bottom:8px}
.mg-site{border-left:3px solid var(--sage);padding-left:12px;margin:10px 0}
.mg-site-name{font-weight:600}
.mg-room{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--ink-soft);padding:3px 0}
.mg-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.mg-inline input,.mg-inline select{flex:1;min-width:130px}
.mg-inline .primary-btn,.mg-inline .ghost-btn{flex:none;padding:10px 14px}
.roster-chip{display:inline-block;background:var(--sky-soft);border-radius:999px;padding:3px 10px;font-size:.84rem;margin:3px 4px 0 0}
.jupiter-prompt{background:var(--amber-soft);border:1px dashed #e7c879;border-radius:10px;padding:11px 13px;font-size:.88rem;color:#7a5a16;margin-top:8px}

/* save-to-child on a note */
.save-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.save-btn{flex:none}
.saved-pill{color:var(--sage-deep);font-weight:600;font-size:.86rem}

/* Step 2 bottom save bar */
.editor-save-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.save-view-btn{font-size:1rem;padding:13px 26px}
.clear-page-btn{font-size:.95rem;padding:13px 20px}
.autosave-note{color:var(--sage-deep);font-size:.84rem;font-weight:600;margin-left:auto}
.history-link{font-size:.86rem;color:var(--sky);font-weight:600;cursor:pointer;text-decoration:underline}

/* preferences drawer */
.overlay{position:fixed;inset:0;background:rgba(46,42,36,.34);backdrop-filter:blur(2px);z-index:50;display:flex;justify-content:flex-end}
.drawer{
  width:min(420px,92vw);height:100%;background:var(--paper);
  padding:26px clamp(20px,4vw,30px);overflow-y:auto;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:-12px 0 40px rgba(46,42,36,.16);
  animation:slidein .28s ease both;
}
@keyframes slidein{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:center;justify-content:space-between}
.drawer-head h2{font-size:1.4rem}
.drawer-sub{color:var(--ink-soft);font-size:.92rem;margin-top:-6px}
.icon-btn{background:none;border:none;font-size:1.7rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 4px}
.icon-btn:hover{color:var(--ink)}
.saved-msg{color:var(--sage-deep);font-weight:600;font-size:.9rem}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:999px;
  font-size:.9rem;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.2);
  animation:rise .3s ease both;
}
.err-banner{background:#fbeae3;border:1px solid #e6c3b3;color:#8a3d22;border-radius:var(--radius-sm);padding:13px 16px;font-size:.92rem;margin-top:14px}


/* ---- App Settings: new sections and framework manager ---- */
/* App Settings tab bar */
.set-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px}
.set-tab{font-family:inherit;font-size:.95rem;font-weight:600;color:var(--ink-soft);
  background:none;border:none;border-bottom:2.5px solid transparent;padding:9px 14px;
  cursor:pointer;margin-bottom:-1px;transition:color .14s,border-color .14s}
.set-tab:hover{color:var(--ink)}
.set-tab.active{color:var(--sage-deep);border-bottom-color:var(--sage)}

/* Developer Doc list */
.devdoc-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.devdoc-empty{color:var(--ink-soft);font-style:italic;font-size:.92rem}
.devdoc-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;background:#fff}
.devdoc-main{min-width:0;flex:1}
.devdoc-row-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.devdoc-id{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;font-weight:700;
  color:var(--sage-deep);background:var(--sage-soft);border-radius:6px;padding:2px 7px}
.devdoc-name{font-size:.96rem;font-weight:700;color:var(--ink)}
.devdoc-notes{font-size:.86rem;color:var(--ink-soft);margin:5px 0 4px;white-space:pre-wrap}
.devdoc-date{font-size:.78rem;color:var(--ink-soft)}
.devdoc-actions{display:flex;align-items:center;gap:8px;flex:none}
.devdoc-dl{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;border:1px solid var(--line);color:var(--sage-deep);background:var(--paper);
  text-decoration:none;font-size:1.05rem;font-weight:700}
.devdoc-dl:hover{background:var(--sage-soft)}
.devdoc-del{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper);color:#b3261e;cursor:pointer;font-size:1.1rem;line-height:1}
.devdoc-del:hover{background:#fbe9e7}

.set-section-h{font-family:'Fraunces',Georgia,serif;font-size:1.25rem;font-weight:600;color:var(--ink);margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.set-section-wrap{display:flex;flex-direction:column;gap:0}
.set-coming-soon{display:flex;align-items:center;gap:12px;padding:12px 4px;color:var(--ink-soft);font-size:.94rem}
.set-coming-soon svg{color:var(--sage);flex:none}

/* Framework manager: each framework card */
.fw-item-full{display:flex;flex-direction:column;gap:0;padding:0;background:#fbf7ee;border:1px solid var(--line-soft);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden}
.fw-item-header{display:flex;align-items:center;gap:12px;padding:12px 14px;flex-wrap:wrap}
.fw-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fw-del-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fw-inuse-note{font-size:.78rem;color:var(--clay);font-style:italic}

/* Active toggle checkbox */
.fw-active-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--sage-deep);flex-shrink:0;padding:4px 8px;background:var(--sage-soft);border-radius:8px;border:1px solid var(--line)}
.fw-active-toggle input{accent-color:var(--sage);width:16px;height:16px;cursor:pointer}

/* Read-only 'Active now' badge on a framework card */
.fw-active-badge-wrap{flex-shrink:0;min-width:64px;display:flex;align-items:center}
.fw-active-badge{color:var(--sage-deep);background:var(--sage-soft);border:1px solid var(--line);font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}

/* Age-band controls + tags */
.fw-age-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.fw-age-opt{display:flex;align-items:center;gap:7px;font-size:.9rem;cursor:pointer}
.fw-age-opt input{accent-color:var(--sage);width:16px;height:16px;cursor:pointer}
.fw-age-tag{font-size:.74rem;font-weight:700;color:var(--sky-deep,#3a6ea5);background:var(--sky-soft);border:1px solid var(--line-soft);border-radius:999px;padding:1px 9px;width:fit-content}
.fw-select-age{margin-left:auto;font-size:.76rem;font-weight:600;color:var(--ink-soft);white-space:nowrap}

/* Set-frameworks popover checkbox list */
.fw-select-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.fw-select-opt{display:flex;align-items:center;gap:9px;font-size:.92rem;cursor:pointer;background:#fbf7ee;border:1px solid var(--line-soft);border-radius:9px;padding:9px 12px}
.fw-select-opt input{accent-color:var(--sage);width:16px;height:16px;cursor:pointer}
.fw-select-opt input:disabled{cursor:not-allowed}
.fw-select-opt input:disabled + span{opacity:.5}
.fw-select-empty{font-size:.86rem;color:var(--ink-soft);font-style:italic}

/* Scheduled (future effective date) badge in history */
.fw-history-sched{margin-left:7px;color:#8a6d1f;background:#fbf0cf;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap}

/* Card eyebrow title */
.fw-card-title{
  font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);background:#f3ead9;border-bottom:1px solid var(--line-soft);
  padding:7px 14px;
}

/* Per-framework document section */
.fw-doc-section{border-top:1px solid var(--line-soft);padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:#fffcf7}
.fw-doc-list{display:flex;flex-direction:column;gap:6px}
.fw-upload-area{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fw-upload-area[hidden]{display:none}
.fw-upload-btn{padding:7px 13px;font-size:.85rem}
.fw-upload-status{font-size:.82rem;font-weight:600;line-height:1.4}
.fw-upload-ok{color:var(--sage-deep)}
.fw-upload-err{color:#b34a2a}
.fw-processed-ok{color:var(--sage-deep);font-size:.78rem;font-weight:600;white-space:nowrap}

/* Processed document row on the card (icon + name + status + download) */
.fw-doc-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:#fbf7ee;border:1px solid var(--line-soft);border-radius:10px;padding:9px 12px;font-size:.9rem}
.fw-doc-icon{font-size:1.1rem;line-height:1}
.fw-doc-name{font-weight:600;color:var(--ink);word-break:break-word;flex:1;min-width:120px}
.fw-doc-meta{color:var(--ink-soft);font-size:.8rem;white-space:nowrap}
.fw-doc-okpill{color:var(--sage-deep);background:#dff2e5;font-size:.74rem;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.fw-doc-dl{border:1px solid var(--line-soft);background:var(--sky-soft);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:.9rem;color:var(--sage-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fw-doc-dl:hover{background:#e3eef6}
.fw-doc-del{cursor:pointer;color:#b34a2a;font-weight:700;background:none;border:none;font-size:1.05rem;flex-shrink:0}

/* Active note banner */
.fw-active-note{background:var(--amber-soft);border:1px solid #f0d79a;border-radius:var(--radius-sm);padding:10px 13px;font-size:.86rem;color:#7a5a16;margin-bottom:16px}

/* ---- Frameworks redesign: header row, empty state, modal, history ---- */
.fw-header-row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fw-empty-state{color:var(--ink-soft);font-size:.92rem;font-style:italic;padding:18px 4px;text-align:center;border:2px dashed var(--line);border-radius:var(--radius-sm)}
.fw-created-date{font-size:.76rem;color:var(--ink-soft);}

/* Add Framework modal (centered card, not side drawer) */
.fw-modal-card{
  background:var(--paper);border-radius:var(--radius);box-shadow:0 8px 40px rgba(46,42,36,.22);
  padding:clamp(20px,4vw,30px);width:min(520px,94vw);max-height:92vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:16px;
  animation:rise .26s ease both;
}
#fwAddModal{justify-content:center;align-items:center}
.fw-modal-head{display:flex;align-items:center;justify-content:space-between}
.fw-modal-head h3{font-size:1.25rem;font-family:'Fraunces',Georgia,serif;font-weight:600}
.fw-modal-body{display:flex;flex-direction:column;gap:14px}
.fw-modal-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fw-modal-error{color:#b34a2a;font-size:.88rem;font-weight:500;margin:0}
.fw-modal-hint{font-size:.84rem;color:var(--muted);line-height:1.45;margin:0 0 6px}
.fw-modal-doclist{margin-top:8px}
.fw-modal-doc{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--card,#faf7f1);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font-size:.9rem;
}
.fw-modal-doc-icon{font-size:1.15rem;line-height:1}
.fw-modal-doc-name{font-weight:600;color:var(--ink);word-break:break-word;flex:1;min-width:120px}
.fw-modal-doc-status{font-size:.8rem;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.fw-modal-doc-status.processing{color:#8a6d1f;background:#fbf0cf}
.fw-modal-doc-status.ok{color:#2f7d4f;background:#dff2e5}
.fw-modal-doc-status.fail{color:#b34a2a;background:#f7e0d8}
.fw-modal-doc-dl{
  border:1px solid var(--line);background:var(--paper);border-radius:8px;
  width:30px;height:30px;cursor:pointer;font-size:.95rem;color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fw-modal-doc-dl:hover{background:var(--card,#faf7f1)}

/* Selection history section */
.fw-history-section{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.fw-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.fw-history-title{font-size:1rem;font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--ink);margin:0}
.fw-history-clear{padding:6px 12px;font-size:.82rem}
.fw-set-active-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fw-set-active-btn{flex-shrink:0}
.fw-set-active-note{font-size:.82rem;color:var(--ink-soft);line-height:1.4}
.fw-history-list{display:flex;flex-direction:column;gap:6px}

/* Date portal */
.fw-portal{display:flex;flex-direction:column;gap:8px;background:var(--sky-soft);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:14px}
.fw-portal-label{font-size:.84rem;font-weight:600;color:var(--ink-soft)}
.fw-portal-date{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.9rem;max-width:200px;background:var(--paper)}
.fw-portal-result:empty{display:none}
.fw-portal-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:10px;padding:10px 13px;display:flex;flex-direction:column;gap:4px}
.fw-portal-asof{font-size:.78rem;color:var(--ink-soft);font-weight:600}
.fw-portal-labels{font-weight:700;color:var(--ink);font-size:.95rem}
.fw-portal-meta{font-size:.78rem;color:var(--ink-soft)}
.fw-portal-muted{font-size:.86rem;color:var(--ink-soft);font-style:italic}
.fw-history-empty{color:var(--ink-soft);font-size:.88rem;font-style:italic}
.fw-history-row{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:10px;align-items:baseline;
  background:#fbf7ee;border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:9px 12px;font-size:.87rem;
}
.fw-history-date{color:var(--ink-soft);white-space:nowrap;font-size:.8rem}
.fw-history-labels{font-weight:600;color:var(--ink)}
.fw-history-by{color:var(--ink-soft);font-size:.8rem;white-space:nowrap}
@media(max-width:560px){
  .fw-history-row{grid-template-columns:1fr;gap:3px}
  .fw-history-date,.fw-history-by{font-size:.76rem}
}

/* ---- App-wide language switch (sidebar footer) ---- */
.lang-switch {
  display: flex;
  gap: 4px;
  padding: 6px 4px 2px;
  flex-wrap: wrap;
}
.ui-lang-btn {
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 4px 10px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .14s;
}
.ui-lang-btn:hover {
  border-color: var(--sage);
  color: var(--ink);
}
.ui-lang-btn.active {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}

/* ============================================================
   Site/Classroom + age-band + children rebuild (June 2026)
   ============================================================ */

/* Read-only classroom age band chip, sitting ABOVE the Step 1 card and aligned
   to the card's left edge (it's a sibling of #uploadCard in the same flow). */
.age-band-chip{display:inline-flex;align-items:center;gap:8px;background:var(--sky-soft);
  border:1px solid var(--line-soft);border-radius:999px;padding:5px 13px;margin:0 0 12px;font-size:.86rem}
.age-band-chip .abc-label{color:var(--ink-soft);font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.04em}
.age-band-chip .abc-value{color:var(--ink);font-weight:700}

/* Upload-box privacy line */
.dz-privacy{font-size:.78rem;color:var(--sage-deep);margin-top:6px;line-height:1.4;max-width:36ch}

/* Children observed picker */
.children-field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.child-roster{display:flex;flex-wrap:wrap;gap:8px}
.child-pill{flex:0 0 auto;width:auto;font-family:inherit;font-size:.86rem;border:1px solid var(--line-soft);
  background:#fbf7ee;color:var(--ink);border-radius:999px;padding:5px 14px;cursor:pointer;transition:all .14s;
  white-space:nowrap;line-height:1.2}
.child-pill:hover{border-color:var(--sage)}
.child-pill.on{background:var(--sage);color:#fff;border-color:var(--sage)}
.child-manual{display:flex;gap:8px}
.child-manual input{flex:1;font-family:inherit;font-size:.9rem;border:1px solid var(--line-soft);
  border-radius:9px;padding:8px 11px;background:#fff}
.child-selected{display:flex;flex-wrap:wrap;gap:6px}
.child-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sage-soft);color:var(--ink);
  border-radius:999px;padding:4px 6px 4px 12px;font-size:.86rem;font-weight:600}
.child-chip-x{border:none;background:rgba(0,0,0,.08);color:var(--ink);border-radius:999px;width:18px;height:18px;
  line-height:1;cursor:pointer;font-size:.9rem}
.child-chip-x:hover{background:rgba(0,0,0,.18)}

/* Browser-side face detection stage */
.face-stage{margin-top:12px}
.face-stage-head{margin-bottom:6px}
.face-stage-title{font-size:.84rem;color:var(--ink-soft);font-weight:600}
.face-img-wrap{position:relative;display:inline-block;max-width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft)}
.face-img{display:block;max-width:100%;max-height:340px;height:auto}
.face-marker{position:absolute;border:2px solid var(--sky);background:rgba(84,179,201,.16);border-radius:8px;
  cursor:pointer;padding:0;transition:all .12s}
.face-marker:hover{border-color:var(--sage);background:rgba(95,168,107,.22)}
.face-marker.named{border-color:var(--sage);background:rgba(95,168,107,.30);box-shadow:0 0 0 2px var(--sage)}
.face-name-menu{position:absolute;left:8px;bottom:8px;z-index:5;background:#fff;border:1px solid var(--line-soft);
  border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.16);padding:12px;max-width:280px}
.fnm-title{font-weight:700;font-size:.9rem;margin-bottom:8px}
.fnm-roster{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;max-height:130px;overflow:auto}
.fnm-pick{font-family:inherit;font-size:.82rem;border:1px solid var(--line-soft);background:#fbf7ee;border-radius:999px;
  padding:4px 10px;cursor:pointer}
.fnm-pick:hover{border-color:var(--sage);background:var(--sage-soft)}
.fnm-manual{display:flex;gap:6px}
.fnm-manual input{flex:1;font-family:inherit;font-size:.86rem;border:1px solid var(--line-soft);border-radius:8px;padding:6px 9px}

/* Record card: photo left (compact), text right */
.record-body{display:flex;gap:14px;align-items:flex-start;margin:6px 0 10px}
.record-body.has-thumb .record-note{flex:1;min-width:0}
/* Thumbnail height matches the 3-line preview standard (line-height 1.75 * 3
   on ~1rem text ≈ 84px). Width stays auto via aspect ratio, capped. */
.record-body .record-thumb{flex:none;margin:0;max-width:140px;height:84px;width:auto;object-fit:cover}

/* Manage screen: sites & classrooms redesign */
.mg-add-site{background:#fbf7ee;border:1px solid var(--line-soft);border-radius:12px;padding:12px;margin-bottom:14px}
.mg-site{border:1px solid var(--line-soft);border-left:4px solid var(--sage);border-radius:12px;padding:14px;margin-bottom:14px}
.mg-site-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.mg-site-name{font-size:1.05rem;font-weight:800}
.mg-site-mgr{display:flex;align-items:center;gap:6px}
.mg-mgr-label{font-size:.76rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.mg-mgr-input{font-family:inherit;font-size:.88rem;border:1px solid var(--line-soft);border-radius:8px;padding:6px 9px;min-width:160px}
.mg-add-room{background:var(--sky-soft);border-radius:10px;padding:8px;margin-bottom:10px}
.mg-add-room select,.mg-add-site select{font-family:inherit}
.mg-room{background:#fbf7ee;border:1px solid var(--line-soft);border-radius:10px;padding:11px;margin-bottom:8px}
.mg-room-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.mg-room-name{font-weight:700}
.mg-room-band{font-family:inherit;font-size:.84rem;border:1px solid var(--line-soft);border-radius:8px;padding:4px 8px}
.mg-room-bandtag{font-size:.78rem;background:var(--sage-soft);color:var(--ink);border-radius:999px;padding:3px 10px;font-weight:600}
/* Teacher roster: a vertical list (name + email per row) is the primary content
   of each room. Adding is a single button that opens a popover. */
.mg-room-teachers-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.mg-teachers-label{font-size:.76rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;font-weight:600;margin-bottom:2px}
.mg-teacher-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:6px 10px;background:#fff;border:1px solid var(--line-soft);border-radius:8px}
.mg-teacher-name{font-size:.9rem;font-weight:700;color:var(--ink)}
.mg-teacher-email{font-size:.82rem;color:var(--ink-soft)}
.mg-teachers-none{font-size:.82rem;color:var(--ink-soft);font-style:italic}
.mg-addteacher-btn{align-self:flex-start;font-size:.84rem;padding:6px 12px}

/* Generic popover dialog (used for Add teacher). Centered card over a dim. */
#addTeacherOverlay{justify-content:center;align-items:center;padding:20px}
.popover-card{background:var(--card,#fff);border-radius:16px;max-width:420px;width:92%;
  margin:auto;box-shadow:0 18px 50px rgba(0,0,0,.22);overflow:hidden}
.popover-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.popover-head h2{font-size:1.05rem;margin:0}
.popover-body{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.popover-label{font-size:.78rem;font-weight:600;color:var(--ink-soft);margin-top:6px}
.popover-body input{font-family:inherit;font-size:.92rem;border:1px solid var(--line-soft);
  border-radius:9px;padding:9px 11px;width:100%}
.popover-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.mg-roster-slot{margin-top:6px}

/* App Settings: per-age-group framework boxes */
.fw-band-boxes{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.fw-band-box{border:1px solid var(--line-soft);border-left:4px solid var(--sky);border-radius:12px;padding:14px;background:#fff}
.fw-band-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.fw-band-title{font-size:1rem;font-weight:800}
.fw-band-active{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:.9rem}
.fw-band-active-label{color:var(--ink-soft);font-weight:600}
.fw-band-active-val{font-weight:700;color:var(--ink)}
.fw-band-history{border-top:1px solid var(--line-soft);padding-top:10px}
.fw-band-history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.fw-band-history-title{font-size:.82rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.ghost-btn.small{font-size:.8rem;padding:4px 10px}

/* Records: 5-line clamp + ...more link */
.record-note-wrap{flex:1;min-width:0}
/* Clamped to 5 lines. The "...more" link sits at the END of the 5th line
   (bottom-right), with a small fade behind it so it reads inline, not on a
   new 6th line. When expanded, the note is full height and "...less" sits
   inline right after the text. */
.record-note{position:relative}
.record-note.clamped{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.record-note.clamped .record-more{position:absolute;right:0;bottom:0;margin:0;
  padding-left:26px;background:linear-gradient(90deg,transparent,var(--paper,#fff) 24px)}
.record-more{color:var(--ink);font-weight:600;cursor:pointer;font-size:.9rem}
.record-more:hover{color:var(--sky)}

/* My Preferences page */
.prefs-card{margin-bottom:18px}
.prefs-identity{display:flex;flex-direction:column;gap:8px}
.prefs-id-row{display:flex;gap:12px;align-items:baseline}
.prefs-id-label{flex:none;width:96px;font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.prefs-id-val{font-weight:600;color:var(--ink)}
.prefs-id-signin{color:var(--ink-soft);font-style:italic}
.prefs-expect{background:var(--sky-soft);border-radius:12px;padding:12px 14px;margin:6px 0 14px}
.prefs-expect-label{display:block;font-size:.76rem;color:var(--sage-deep);text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:6px}
.prefs-expect-list{margin:0;padding-left:18px;color:var(--ink);font-size:.9rem;line-height:1.5}
.prefs-card textarea{width:100%;font-family:inherit;font-size:.95rem;border:1px solid var(--line-soft);border-radius:10px;padding:11px 13px;line-height:1.5;resize:vertical}
.prefs-examples{margin:12px 0 16px}
.prefs-examples-label{display:block;font-size:.8rem;color:var(--ink-soft);font-weight:600;margin-bottom:8px}
.prefs-example-chips{display:flex;flex-direction:column;gap:8px}
.prefs-ex-chip{text-align:left;font-family:inherit;font-size:.86rem;line-height:1.45;border:1px dashed var(--line-soft);background:#fbf7ee;color:var(--ink);border-radius:10px;padding:9px 12px;cursor:pointer;transition:all .14s}
.prefs-ex-chip:hover{border-color:var(--sage);border-style:solid;background:var(--sage-soft)}

/* In-Observe classroom switcher row (replaces the old floating context bar) */
.obs-classroom-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.obs-classroom-switch{display:inline-flex;align-items:center;gap:8px}
.obs-classroom-switch .abc-label{font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.obs-classroom-switch select{font-family:inherit;font-size:.9rem;border:1px solid var(--line-soft);border-radius:9px;padding:7px 11px;background:#fff;color:var(--ink)}

/* Super-user-only page banner (red) */
.super-user-banner{color:#b3261e;font-weight:700;font-size:.86rem;margin:0 0 12px;padding:8px 12px;
  background:rgba(179,38,30,.07);border:1px solid rgba(179,38,30,.25);border-radius:10px}

/* Lower-left classroom picker (near the user name) */
.nav-classroom-pick{display:flex;flex-direction:column;gap:4px;padding:6px 10px;margin-top:2px}
.nav-classroom-pick .ncp-label{font-size:.68rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.nav-classroom-pick select{font-family:inherit;font-size:.86rem;border:1px solid var(--line-soft);border-radius:8px;padding:6px 9px;background:#fff;color:var(--ink);max-width:100%}
.nav-classroom-single{font-size:.84rem;color:var(--ink-soft);padding:4px 10px;font-weight:600}

/* Sign out on My Preferences */
.prefs-signout{margin-top:12px;color:#b3261e;border-color:#e3b3ad}
.prefs-signout:hover{color:#fff;background:#b3261e;border-color:#b3261e}

/* ============================================================
   ELOF / DRDP rating view (ported from prototype, namespaced rt-)
   ============================================================ */
.rating-view{max-width:880px;margin:0 auto;padding:0 20px 110px}
.rt-actionbar{position:sticky;top:0;z-index:40;background:rgba(251,249,243,.97);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);margin:0 -20px 0;padding:10px 20px}
.rt-inner{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rt-ab-title{font-weight:700;font-size:.98rem;margin-right:auto;font-family:'Fraunces',Georgia,serif}
.rt-ab-sub{display:block;font-weight:400;color:var(--ink-soft);font-size:.78rem;font-family:inherit}
.rt-ctl{font-family:inherit;font-size:.8rem;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.rt-ctl:hover{border-color:var(--gray,#4a4a44)}
.rt-ctl.on{background:#4a4a44;color:#fff;border-color:#4a4a44}
.rt-ctl.accent{color:var(--amber,#b8852b);border-color:#e6d39b;background:#f6edda;font-weight:600}
.rt-settings-wrap{position:relative}
.rt-settings-panel{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(40,40,30,.14);padding:14px;min-width:230px}
.rt-settings-panel.open{display:block}
.rt-settings-panel .sp-group{margin-bottom:12px}.rt-settings-panel .sp-group:last-child{margin-bottom:0}
.rt-settings-panel .sp-label{font-size:.74rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.rt-seg-ctl{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.rt-seg-ctl button{flex:1;font-family:inherit;font-size:.78rem;border:none;background:none;color:var(--ink-soft);
  padding:6px 11px;cursor:pointer;border-right:1px solid var(--line)}
.rt-seg-ctl button:last-child{border-right:none}
.rt-seg-ctl button.on{background:#4a4a44;color:#fff;font-weight:600}

.rt-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0}
.rt-tab{font-family:inherit;font-size:.95rem;font-weight:600;color:var(--ink-soft);background:none;border:none;
  border-bottom:2.5px solid transparent;padding:9px 14px;cursor:pointer;margin-bottom:-1px}
.rt-tab:hover{color:var(--ink)}
.rt-tab.active{color:var(--sage-deep);border-bottom-color:var(--sage)}

.rt-pickrow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.rt-pick{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--ink-soft);font-weight:600}
.rt-pick select{font-family:inherit;font-size:.9rem;border:1px solid var(--line-soft);border-radius:9px;padding:8px 10px;background:#fff;color:var(--ink);min-width:160px}
.rt-empty{color:var(--ink-soft);font-style:italic;padding:24px 4px}

.rt-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;color:var(--ink-soft);padding:6px 0 12px}
.rt-legend .li{display:inline-flex;align-items:center;gap:6px}
.chipdemo{font-size:.7rem;font-weight:600;border-radius:999px;padding:3px 9px;border:1.5px solid var(--line)}
.chipdemo.sugg{color:#8a6418;border-color:#e6d39b}
.chipdemo.set{background:#4a4a44;color:#fff;border-color:#4a4a44}

/* progress table */
.rt-progress{width:100%;border-collapse:collapse;font-size:.9rem}
.rt-progress th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);padding:8px 10px;border-bottom:2px solid var(--line)}
.rt-progress td{padding:8px 10px;border-bottom:1px solid var(--line-soft)}
.rt-pg-child{font-weight:700;color:var(--ink)}
.rt-pg-cell{cursor:pointer}
.rt-pg-cell:hover .rt-pg-pill{filter:brightness(.97)}
.rt-pg-pill{display:inline-block;font-size:.8rem;font-weight:600;border-radius:999px;padding:4px 11px;border:1px solid var(--line)}
.rt-pg-cell.complete .rt-pg-pill{background:var(--sage-soft);color:var(--sage-deep);border-color:var(--sage)}
.rt-pg-cell.in_progress .rt-pg-pill{background:#f6edda;color:#8a6418;border-color:#e6d39b}
.rt-pg-cell.not_started .rt-pg-pill{background:#fff;color:var(--ink-soft)}

/* goal cards / rows */
.rt-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 18px 6px;margin-top:16px;box-shadow:0 1px 2px rgba(40,40,30,.03)}
.rt-card-head{padding:12px 0 6px}
.rt-card-title{font-size:1.05rem;font-weight:700;font-family:'Fraunces',Georgia,serif}
.rt-code{font-size:.74rem;font-weight:700;color:var(--sage-deep);border:1px solid var(--sage);border-radius:6px;padding:2px 7px;margin-left:6px;font-family:inherit}
.rrow{border-top:1px solid var(--line-soft)}.rrow:first-of-type{border-top:none}
.summary{display:flex;align-items:center;gap:13px;padding:14px 4px;cursor:pointer;border-radius:8px}
.summary:hover{background:var(--paper)}
.rstatus{flex:0 0 auto;font-size:.78rem;font-weight:600;border-radius:999px;padding:5px 12px;border:1.5px solid var(--line);text-align:center;white-space:nowrap}
.rstatus.sugg{color:#8a6418;border-color:#e6d39b}
.rstatus.set{background:#4a4a44;color:#fff;border-color:#4a4a44}
.rstatus.changed{color:var(--ink);border-color:var(--amber,#b8852b)}
.gname{flex:1;font-size:.93rem}
.gname .gc{font-size:.72rem;color:var(--sage-deep);border:1px solid var(--sage);border-radius:5px;padding:1px 6px;margin-right:7px;font-weight:700}
.chev{color:var(--ink-soft);font-size:.85rem;transition:transform .15s;flex:0 0 auto}
.rrow.open .chev{transform:rotate(90deg)}
.detail{display:none;padding:2px 4px 16px 4px}.rrow.open .detail{display:block}
.seg-label{font-size:.74rem;color:var(--ink-soft);margin:2px 0 6px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex-wrap:wrap}
.seg button{font-family:inherit;font-size:.83rem;border:none;background:#fff;color:var(--ink-soft);padding:9px 16px;cursor:pointer;border-right:1px solid var(--line);text-align:left}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--gray-soft,#ece9e2)}
.seg button.sel{background:#4a4a44;color:#fff;font-weight:600}
.seg button.suggmark{box-shadow:inset 0 -3px 0 var(--amber,#b8852b)}
.seg-hint{font-size:.74rem;color:var(--ink-soft);margin-top:6px}
.rt-reason{font-size:.78rem;color:var(--ink-soft);margin-top:8px;background:var(--sky-soft);border-radius:8px;padding:7px 11px}
.dr-toggle{margin-top:12px;font-size:.8rem;color:var(--sage-deep);font-weight:600;background:none;border:none;cursor:pointer;padding:0;font-family:inherit}
.dr-toggle:hover{text-decoration:underline}
.rt-drawer{display:none;margin-top:10px;border:1px dashed var(--sage);border-radius:10px;background:linear-gradient(#fbfdfb,#f3f8f4);padding:14px}
.rt-drawer.open{display:block}
.rt-drawer .dh{font-weight:700;font-size:.92rem;color:var(--sage-deep);margin-bottom:8px}
.measure{border-top:1px solid var(--line-soft);padding:11px 0}.measure:first-of-type{border-top:none}
.m-top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.m-code{font-size:.72rem;font-weight:700;color:var(--sage-deep);border:1px solid var(--sage-deep);border-radius:5px;padding:2px 6px}
.m-name{font-weight:600;font-size:.9rem}
.m-rel{font-size:.72rem;color:var(--ink-soft);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.m-rel.only{color:#8a6418;background:#f6edda;border-color:#e6d39b}
.dlevels{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.dlvl{font-size:.78rem;border:1px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:8px;padding:7px 11px;cursor:pointer;text-align:left}
.dlvl:hover{border-color:var(--sage-deep)}
.dlvl.sel{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff;font-weight:600}
.dlvl.suggmark{box-shadow:inset 0 -3px 0 var(--amber,#b8852b)}
.dlvl .desc{display:block;font-size:.72rem;font-weight:400;opacity:.85;margin-top:2px;white-space:normal}
.obs-row{display:flex;justify-content:flex-end;margin-top:10px}
.obs{font-size:.78rem;color:var(--sky,#3a6ea5);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;font-family:inherit}
.obs:hover{background:var(--sky-soft)}
.ev{margin-top:8px;background:var(--paper);border:1px solid var(--line-soft);border-radius:8px;padding:9px 11px;font-size:.84rem}
.ev .row{padding:6px 0;border-top:1px dashed var(--line)}.ev .row:first-child{border-top:none}
.ev .d{font-size:.72rem;color:var(--ink-soft)}
.rt-defbox{border-color:#e6d39b}
.rt-modal-body{font-size:.88rem;color:var(--ink-soft);margin:0 0 12px}
.rt-modal-warn{background:#f6edda;border:1px solid #e6d39b;color:#7a5a16;border-radius:8px;padding:9px 11px;font-size:.83rem;margin-bottom:12px}
.rt-modal-err{color:#a12c7b;font-size:.78rem;margin-top:5px;min-height:1em}
#rtNameInput.bad{border-color:#a12c7b}
/* ELOF<->DRDP linked rating UI */
.rt-mini{flex:0 0 auto;display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.rt-mini-box{font-size:.6rem;line-height:1;color:var(--ink-soft);padding:4px 6px;border-right:1px solid var(--line-soft);white-space:nowrap;max-width:64px;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.rt-mini-box:last-child{border-right:none}
.rt-mini-box.sel{background:#4a4a44;color:#fff;font-weight:700}
.rt-mini-box.sugg{box-shadow:inset 0 -3px 0 var(--amber,#b8852b);color:#8a6418}
.rt-reftag{color:#8a6418;font-style:italic}
.rt-conflict{margin-top:8px;background:#fbeef6;border:1px solid #e7b8d6;color:#a12c7b;border-radius:8px;padding:7px 11px;font-size:.78rem}
.rrow.conflict>.summary{box-shadow:inset 3px 0 0 #d36fae}
.rt-cands{font-size:.74rem;color:var(--sage-deep);margin:6px 0 2px;font-weight:600}
.dlvl.out{opacity:.42}
.dlvl.cand{border-color:var(--sage)}
/* Guideline applied-status panel (proof it is wired in) */
.gl-applied{margin:12px 0;border:1px solid #cfe3cf;background:#f1f7f1;border-radius:10px;padding:12px 14px}
.gl-applied-head{display:flex;align-items:center;gap:8px;font-weight:700;color:#2f6b34}
.gl-applied-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#2f6b34;color:#fff;font-size:.8rem}
.gl-applied-meta{font-size:.78rem;color:var(--ink-soft);margin:6px 0 8px}
.gl-applied-details summary{cursor:pointer;font-size:.82rem;color:var(--sage-deep);font-weight:600}
.gl-applied-pre{white-space:pre-wrap;word-break:break-word;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0 0;font-size:.78rem;line-height:1.5;max-height:240px;overflow:auto}
.gl-applied-actions{margin-top:10px}
.gl-test-result{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:.8rem}
.gl-test-line{margin:2px 0}
.gl-dirty{color:#a16207;font-size:.8rem;align-self:center}

/* ============================================================
   AI CONTROL CENTER (App Settings tab)
   ============================================================ */
.ai-cc-list { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.ai-cc-module {
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft, #6e6a5e); margin: 14px 0 2px;
}
.ai-cc-row {
  border: 1px solid var(--line-soft, #e0d9c7);
  border-radius: 12px;
  background: #fbf7ee;
  overflow: hidden;
}
/* Collapsible item: native <details>/<summary>, all collapsed by default. */
.ai-cc-collapse { display: block; }
.ai-cc-collapse > .ai-cc-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
}
.ai-cc-collapse > .ai-cc-summary::-webkit-details-marker { display: none; }
/* Disclosure caret on the left, rotates when open. */
.ai-cc-summary::before {
  content: "\25B8"; /* ▸ */
  color: var(--ink-soft, #6e6a5e); font-size: 0.8rem; flex: 0 0 auto;
  transition: transform 0.15s ease; margin-right: 2px;
}
.ai-cc-collapse[open] > .ai-cc-summary::before { transform: rotate(90deg); }
.ai-cc-summary:hover { background: rgba(0,0,0,0.025); }
.ai-cc-summary-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ai-cc-summary-main .ai-cc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-cc-summary-meta { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
/* Green light: on = filled, off = empty/grey. */
.ai-cc-light {
  width: 9px; height: 9px; border-radius: 50%;
  background: #d4cdbb; box-shadow: none; flex: 0 0 auto;
}
.ai-cc-light.on {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.ai-cc-state {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.ai-cc-state.on { color: #166534; background: rgba(34, 197, 94, 0.14); }
.ai-cc-state.off { color: #6e6a5e; background: rgba(110, 106, 94, 0.12); }
.ds-state-draft {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  color: #6e6a5e; background: rgba(110, 106, 94, 0.12);
}
.ds-summary-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Body of an expanded item. */
.ai-cc-collapse[open] > :not(.ai-cc-summary) { margin-left: 16px; margin-right: 16px; }
.ai-cc-collapse[open] > :not(.ai-cc-summary) ~ :not(.ai-cc-summary) { margin-top: 8px; }
.ai-cc-collapse[open] > :last-child { margin-bottom: 14px; }
.ai-cc-collapse[open] > .ai-cc-head,
.ai-cc-collapse[open] > .ai-cc-flabel:first-of-type { margin-top: 6px; }
.ai-cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ai-cc-name { font-weight: 700; font-size: 1rem; }
.ai-cc-purpose { font-size: 0.86rem; color: var(--ink-soft, #6e6a5e); margin-top: 2px; }
.ai-cc-enable { font-size: 0.82rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.ai-cc-flabel { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft, #6e6a5e); margin-top: 4px; }
.ai-cc-row textarea {
  width: 100%; font-family: inherit; font-size: 0.92rem; line-height: 1.5;
  border: 1px solid var(--line-soft, #e0d9c7); border-radius: 8px; padding: 8px 10px; background: #fff;
}
.ai-cc-row .cc-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.ai-cc-doclist { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.ai-cc-doc { font-size: 0.86rem; display: inline-flex; align-items: center; gap: 6px; }
.ai-cc-doc-wrap { display: inline-flex; align-items: center; gap: 4px; }
.ai-cc-docs-hint { margin: 2px 0 6px; }
/* Full-document (no-distill) section cards */
#fullDocList { display: flex; flex-direction: column; gap: 8px; }
.fulldoc-card {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-soft, #e0d9c7); border-radius: 10px;
  padding: 9px 12px; background: #fff;
}
.fulldoc-name { font-weight: 600; font-size: 0.92rem; }
.fulldoc-meta { font-size: 0.78rem; color: var(--ink-soft, #6e6a5e); }
.fulldoc-del { margin-left: auto; }
.cc-std-jump { text-decoration: none; font-weight: 600; margin-left: 2px; opacity: 0.7; }
.cc-std-jump:hover { opacity: 1; }
.ai-cc-doc-del {
  border: none; background: none; cursor: pointer; line-height: 1;
  font-size: 0.9rem; padding: 2px 4px; border-radius: 6px;
  color: var(--ink-soft, #6e6a5e); opacity: 0.55;
}
.ai-cc-doc-del:hover { opacity: 1; color: #b8472a; background: rgba(184, 71, 42, 0.08); }
.ai-cc-doc-del:disabled { opacity: 0.3; cursor: default; }
.ai-cc-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ai-cc-jsonhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.ai-cc-jsonhead .ai-cc-flabel { margin-top: 0; }
.cc-tojson { font-size: 0.78rem; padding: 5px 11px; white-space: nowrap; }

/* AI Control Center: original-vs-modified side-by-side confirm modal */
.ai-diff-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(40, 35, 28, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ai-diff-modal {
  background: #fbf7ee; border: 1px solid var(--line-soft, #e0d9c7);
  border-radius: 14px; padding: 20px; width: min(860px, 96vw);
  max-height: 88vh; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 18px 48px rgba(40, 35, 28, 0.28);
}
.ai-diff-title { font-weight: 700; font-size: 1.05rem; }
.ai-diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 0; }
.ai-diff-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ai-diff-collabel { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft, #6e6a5e); }
.ai-diff-pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; line-height: 1.5;
  border: 1px solid var(--line-soft, #e0d9c7); border-radius: 8px; padding: 10px 12px;
  background: #fff; overflow: auto; max-height: 52vh; flex: 1;
}
.ai-diff-before { background: #fbf3ee; }
.ai-diff-after { background: #f1f7ee; }
.ai-diff-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 640px) {
  .ai-diff-cols { grid-template-columns: 1fr; }
}

/* Source-locator link on each AI row (file · function, opens GitHub) */
.ai-cc-source {
  display: inline-block; margin-top: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem; color: #7a7363; text-decoration: none;
  border: 1px solid var(--line-soft, #e0d9c7); border-radius: 6px;
  padding: 2px 7px; background: #fff;
}
a.ai-cc-source:hover { color: var(--accent-ink, #7e2e18); border-color: var(--accent, #b8472a); }

/* Reference-doc usage mode pills (Reference / JSON / RAG) in ELOF/DRDP settings */
.refmode-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.refmode-pill {
  font-size: .72rem; font-weight: 600;
  border: 1px solid var(--line, #efe2d0); background: #fff;
  color: var(--ink-soft, #6f675c); border-radius: 999px; padding: 2px 10px; cursor: pointer;
}
.refmode-pill.on { color: #fff; border-color: transparent; }
.refmode-pill.on.reference { background: #6a8c5b; }
.refmode-pill.on.json { background: #c06a52; }
.refmode-pill.on.rag { background: #8493ac; }

/* Document standards section (top of AI Control Center) */
.ds-section {
  border: 1px solid var(--line-soft, #e0d9c7); border-radius: 14px;
  padding: 16px; margin-bottom: 18px;
  background: #fdf6ec;
}
.ds-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.ds-section-head .ai-cc-module { margin-top: 0; }
#dsCards { display: flex; flex-direction: column; gap: 14px; }
.ds-card {
  border: 1px solid var(--line-soft, #e0d9c7); border-radius: 12px;
  background: #fff; overflow: hidden;
}
/* The .ai-cc-collapse inside a ds-card lays out the body as a column. */
.ds-card .ai-cc-collapse[open] { padding-bottom: 2px; }
.ds-card.ds-flash { box-shadow: 0 0 0 3px rgba(132, 147, 172, 0.5); transition: box-shadow 0.3s; }
.ds-card-head { display: flex; align-items: center; gap: 10px; }
.ds-title {
  flex: 1; font-weight: 700; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--line-soft, #e0d9c7); border-radius: 8px; padding: 7px 10px; background: #fff;
}
.ds-uploads { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ds-distill { background: #c06a52; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; background: #f3ede0; border: 1px solid var(--line-soft, #e0d9c7);
  border-radius: 999px; padding: 3px 6px 3px 11px;
}
.ds-chip-meta { color: var(--ink-soft, #6e6a5e); font-size: 0.74rem; }
/* Running total of selected docs vs the 40,000-char distill cap. */
.ds-total {
  font-size: 0.78rem; font-weight: 600; color: var(--ink-soft, #6e6a5e);
  margin-top: 2px;
}
.ds-total.over { color: #b8472a; }
.ds-total-warn { font-weight: 600; }
/* Clear distilled info: a reset action, inline with Distill, tinted on hover. */
.ds-clear:not([hidden]) { display: inline-flex; align-items: center; }
.ds-clear:hover { color: #b8472a; border-color: #b8472a; }
.ds-chip-x { border: none; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--ink-soft, #6e6a5e); padding: 0 2px; }
.ds-chip-x:hover { color: var(--accent, #b8472a); }
.ds-card textarea {
  width: 100%; font-family: inherit; font-size: 0.92rem; line-height: 1.5;
  border: 1px solid var(--line-soft, #e0d9c7); border-radius: 8px; padding: 8px 10px; background: #fff;
}
.ds-card .ds-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.ds-applylist { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.ds-apply { font-size: 0.86rem; display: inline-flex; align-items: center; gap: 6px; }
.ds-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ds-deploy { background: #5a8a4a; }
.ds-badge {
  font-size: 0.82rem; font-weight: 600; border-radius: 999px; padding: 3px 12px;
}
.ds-badge-on { color: #2f6b22; background: #e7f3e1; border: 1px solid #bcd9af; }

/* Per-bot add-on indicator: a document standard stacks on this bot. */
.json-addon {
  font-size: 0.82rem; color: #44506a;
  background: #eef2f9; border: 1px solid #cfd8ea; border-radius: 8px;
  padding: 7px 10px; margin-top: 2px;
}
.json-addon-link { color: #3b5aa6; font-weight: 600; text-decoration: none; }
.json-addon-link:hover { text-decoration: underline; }

/* AI Control Center benefits from full width — widen the settings shell only
   while the AI Control tab is the visible panel (other tabs keep 780px). */
.settings-view:has(#setPanelAicontrol:not([hidden])) { max-width: 1200px; }

/* AI Control · Document standards — upload format/limit hint */
.ds-limit-note { font-size: 12px; color: var(--muted, #6b6b6b); margin-top: 4px; line-height: 1.4; }
.ds-row-limit { margin: 6px 0 2px; opacity: .85; }

/* ============================================================
   AI Usage panel (App Settings -> AI Usage tab, admin-only)
   ============================================================ */
.ai-usage-period-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.ai-usage-period {
  padding: 6px 14px; background: #f6f2ea; border: 1px solid #e7e1d3;
  border-radius: 6px; cursor: pointer; font-size: 13px; color: #5b5850;
}
.ai-usage-period.active { background: var(--accent, #c06a52); color: white; border-color: var(--accent, #c06a52); }

.ai-usage-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.ai-usage-card {
  background: #f6f2ea; border: 1px solid #e7e1d3; border-radius: 10px; padding: 12px 14px;
}
.ai-usage-card-k { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; }
.ai-usage-card-v { font-size: 22px; font-weight: 600; color: #1a1813; margin-top: 4px; }

.ai-usage-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ai-usage-top { background: white; border: 1px solid #e7e1d3; border-radius: 10px; padding: 12px; }
.ai-usage-top-h { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px; }
.ai-usage-mini { width: 100%; font-size: 13px; border-collapse: collapse; }
.ai-usage-mini th { font-size: 11px; color: #888; font-weight: 500; padding: 4px 6px; border-bottom: 1px solid #e7e1d3; }
.ai-usage-mini td { padding: 4px 6px; border-bottom: 1px solid #f0eeeb; }

.ai-usage-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.ai-usage-table th {
  font-size: 11px; color: #888; font-weight: 500; padding: 8px 6px;
  border-bottom: 2px solid #e7e1d3; text-align: left;
}
.ai-usage-table td { padding: 6px; border-bottom: 1px solid #f0eeeb; vertical-align: top; }
.ai-usage-action { color: #aaa; margin-left: 2px; }
.ai-usage-status {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: #e8f5e8; color: #2a7a2a;
}
.ai-usage-status.status-error { background: #ffe8e0; color: #c4231f; }
.ai-usage-toggle {
  font-size: 11px; padding: 3px 8px; border: 1px solid #e7e1d3;
  background: white; border-radius: 4px; cursor: pointer;
}
.ai-usage-toggle:hover { background: #f6f2ea; }
.ai-usage-detail {
  background: #fafaf6; padding: 12px; border-radius: 6px; margin: 4px 0;
}
.ai-usage-detail-block { margin-bottom: 8px; }
.ai-usage-detail-block strong { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.ai-usage-detail-block pre {
  white-space: pre-wrap; word-break: break-word; font-size: 12px;
  background: white; padding: 8px; border-radius: 4px; border: 1px solid #e7e1d3;
  max-height: 400px; overflow-y: auto; margin: 0;
}
.ai-usage-detail-meta { font-size: 11px; color: #888; margin-top: 8px; }

@media (max-width: 720px) {
  .ai-usage-tops { grid-template-columns: 1fr; }
}


/* ============================================================================
   Insights view (Phase 1+2 + Quality Signal redesign)
   ============================================================================
   Two tabs: Child view (per-domain rows + QTY/QLT pills) and Classroom view
   (child x ELOF-domain heat matrix). The Child view supports ELOF/DRDP toggle
   and click-to-expand for measure breakdown or linked observations.
*/
.insights-view { max-width: 1280px; margin: 0 auto; padding: 22px 28px; }
.insights-header {
  display: flex; align-items: flex-end; gap: 20px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid #e7e2d9; flex-wrap: wrap;
}
.insights-header h1 { font-size: 22px; margin: 0 0 4px 0; color: #2A2620; }
.insights-sub { font-size: 12px; color: #6E675C; line-height: 1.5; max-width: 540px; }
.insights-tabs {
  display: flex; gap: 4px; background: #f0ede6;
  padding: 4px; border-radius: 9px; margin-left: auto;
}
.ins-tab {
  border: 0; background: transparent;
  padding: 7px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: #8a8275;
  cursor: pointer; letter-spacing: .02em;
}
.ins-tab.active { background: #fff; color: #2E6A52; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.insights-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: #6E675C;
}
.insights-last { font-family: ui-monospace, monospace; }
.insights-refresh {
  background: #BE823F; color: #fff; border: 0;
  font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: 6px;
  cursor: pointer; letter-spacing: .04em; text-transform: uppercase;
}
.insights-refresh:hover { filter: brightness(1.05); }
.insights-refresh:disabled { opacity: .5; cursor: wait; }
.insights-content { min-height: 320px; }
.ins-empty, .ins-error { padding: 40px; text-align: center; color: #888; font-size: 13px; }
.ins-error { color: #B0322B; background: #FDF6F5; border-radius: 8px; }

/* --- Student bar (Child view) --- */
.ins-student-bar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.ins-stu-avatar {
  width: 36px; height: 36px; border-radius: 999px;
  background: #e3f0e8; color: #2e6a52;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.ins-stu-name { font-size: 15px; font-weight: 700; }
.ins-stu-meta { font-size: 11px; color: #888; }
.ins-picker {
  margin-left: auto;
  font-size: 13px; padding: 6px 10px;
  border: 1px solid #E7E2D9; border-radius: 6px;
  background: #fff; min-width: 200px;
}
.ins-toggle {
  display: flex; gap: 2px;
  background: #f0ede6; padding: 4px; border-radius: 8px;
}
.ins-toggle-pill {
  padding: 6px 12px; font-size: 11.5px; font-weight: 700;
  color: #8a8275; border-radius: 6px; cursor: pointer;
  letter-spacing: .02em;
}
.ins-toggle-pill.active { background: #fff; color: #2E6A52; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.ins-toggle-age .ins-toggle-pill.active { background: #BE823F; color: #fff; }

/* --- Coaching banner --- */
.ins-banner {
  border-left: 4px solid;
  padding: 11px 16px; border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
  font-size: 12.5px; line-height: 1.55;
  display: flex; align-items: center; gap: 12px;
}
.ins-banner-info { background: #fbf6ee; border-left-color: #d4a82c; color: #6a5028; }
.ins-banner-celebrate { background: #f4faf6; border-left-color: #2E6A52; color: #1c4435; }
.ins-banner-warn { background: #fdf6f5; border-left-color: #B0322B; color: #6a1828; }
.ins-banner-icon {
  width: 24px; height: 24px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; color: #fff;
}
.ins-banner-info .ins-banner-icon { background: #BE823F; }
.ins-banner-celebrate .ins-banner-icon { background: #2E6A52; }
.ins-banner-warn .ins-banner-icon { background: #B0322B; }
.ins-banner-body { flex: 1; }
.ins-banner-body strong { font-weight: 700; }
.ins-banner-action {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  color: inherit; text-decoration: underline; cursor: pointer;
  white-space: nowrap;
}

/* --- Row layout (Child view, both ELOF and DRDP modes) --- */
.ins-rows { background: #fff; border: 1px solid #f0ede4; border-radius: 10px; overflow: hidden; }
.ins-row {
  display: grid;
  grid-template-columns: 240px 1fr 200px 18px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f0ede4;
  cursor: pointer;
  transition: background 0.12s;
}
.ins-row:last-child { border-bottom: none; }
.ins-row:hover { background: #faf8f3; }
.ins-row.expanded { background: #f8f5ed; }
.ins-row-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-row-title { font-size: 13px; font-weight: 600; color: #2A2620; line-height: 1.3; }
.ins-row-subtitle {
  font-size: 10px; color: #888;
  font-family: ui-monospace, monospace; letter-spacing: 0.04em;
}
.ins-bar {
  height: 10px; background: #f4f1ea;
  border-radius: 3px; overflow: hidden;
}
.ins-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #C8E2D0, #2E6A52);
  border-radius: 3px;
}
.ins-bar-gap {
  height: 10px;
  background: repeating-linear-gradient(45deg, #f8e8e6 0 5px, #fdf4f3 5px 10px);
  border-radius: 3px;
}
.ins-pills { display: flex; gap: 6px; }
.ins-pills-sm .ins-metric { padding: 4px 6px; }
.ins-pills-sm .ins-metric-label { font-size: 7.5px; }
.ins-pills-sm .ins-metric-value { font-size: 12px; }
.ins-metric {
  flex: 1; min-width: 60px;
  background: #faf8f3; border: 1px solid #f0ede4;
  border-radius: 6px; padding: 6px 8px;
  text-align: center;
}
.ins-metric-label {
  font-size: 8.5px; color: #888;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700;
}
.ins-metric-value { font-size: 15px; font-weight: 700; color: #2A2620; margin-top: 1px; }
.ins-metric-qty .ins-metric-value { color: #C0762A; }
.ins-metric-qlt .ins-metric-value { color: #2E6A52; }
.ins-metric-warn { background: #fdfaf0; border-color: #e8d0a0; }
.ins-metric-warn .ins-metric-label { color: #8a5e10; }
.ins-metric-warn .ins-metric-value { color: #7a5a10; }
.ins-metric-gap { background: #fdf6f5; border-color: #f0d4d0; }
.ins-metric-gap .ins-metric-value { color: #B0322B; }
.ins-chev { color: #b8b0a2; font-size: 12px; transition: color 0.12s; }
.ins-chev.open { color: #2E6A52; }

/* --- Expanded sub-rows --- */
.ins-subrows {
  background: #faf8f3;
  padding: 6px 0 10px;
  border-bottom: 1px solid #f0ede4;
}
.ins-subrow {
  display: grid;
  grid-template-columns: 240px 1fr 200px 18px;
  gap: 14px;
  align-items: center;
  padding: 6px 14px 6px 40px;
}
.ins-subrow-name { display: flex; align-items: center; gap: 8px; }
.ins-subrow-code {
  background: #faf6ee; color: #8a6230;
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px;
}
.ins-subrow-empty {
  padding: 10px 16px 10px 40px;
  font-size: 11.5px; color: #888;
  font-style: italic;
}
.ins-obs-row {
  display: grid;
  grid-template-columns: 60px 90px 1fr;
  gap: 10px;
  padding: 7px 14px 7px 40px;
  align-items: center;
  font-size: 11.5px;
}
.ins-obs-date { font-family: ui-monospace, monospace; color: #6E675C; }
.ins-obs-strength {
  font-size: 9px; padding: 2px 7px;
  border-radius: 999px; font-weight: 700;
  text-transform: uppercase; text-align: center; color: #fff;
  letter-spacing: 0.04em;
}
.ins-strength-strong { background: #2E6A52; }
.ins-strength-moderate { background: #C0762A; }
.ins-strength-weak { background: #B8B0A2; }
.ins-obs-text {
  color: #2A2620; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* --- DRDP mode group banner --- */
.ins-group-banner {
  padding: 11px 14px 5px;
  font-size: 10px; font-weight: 700; color: #888;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: #faf8f3;
  border-top: 1px solid #f0ede4;
}
.ins-rows > .ins-group-banner:first-child { border-top: none; }

/* --- Classroom matrix --- */
.ins-matrix {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 11.5px;
  background: #fff; border: 1px solid #f0ede4; border-radius: 10px;
  overflow: hidden;
}
.ins-matrix th, .ins-matrix td {
  padding: 6px 4px; text-align: center; vertical-align: middle;
  border-right: 1px solid #f0ede4;
}
.ins-matrix th { background: #FAF8F3; font-weight: 700; }
.ins-matrix tfoot td { background: #F4F1EA; font-weight: 700; }
.ins-th-child {
  text-align: left !important;
  min-width: 130px; padding-left: 12px !important;
  color: #6E675C; font-family: ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
}
.ins-th-domain { font-family: ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.04em; min-width: 60px; }
.ins-th-total { font-family: ui-monospace, monospace; }
.ins-td-child { text-align: left !important; padding-left: 12px !important;
  font-weight: 600; color: #2A2620; min-width: 130px; }
.ins-td-cell { cursor: pointer; transition: transform .08s; font-weight: 600; }
.ins-td-cell:hover { transform: scale(1.08); border-radius: 4px; outline: 2px solid #2E6A52; }
.ins-cell-empty { background: #FBFAF6; color: #DAD4C7; }
.ins-cell-1 { background: #EDF3EE; color: #2E6A52; }
.ins-cell-2 { background: #D7E8DC; color: #2E6A52; }
.ins-cell-3 { background: #A8CFB4; color: #1C4435; }
.ins-cell-4 { background: #6FAE82; color: #fff; }
.ins-cell-5 { background: #2E6A52; color: #fff; }
.ins-td-total { font-family: ui-monospace, monospace; font-weight: 700;
  color: #6E675C; background: #FAF8F3; }
.ins-td-domain-total { font-family: ui-monospace, monospace; }
.ins-td-domain-total.ins-gap { background: #FDF6F5; color: #B0322B; }

/* --- Legend --- */
.ins-legend {
  display: flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 11px; color: #6E675C;
}
.ins-legend-label { letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; margin-right: 4px; }
.ins-legend-swatch { display: inline-block; width: 22px; height: 14px; border-radius: 3px; border: 1px solid #f0ede4; }
.ins-legend-tip { margin-right: 12px; }

/* =============================================================
   Observe v2 layout — Path A: full-screen canvas, no outer card,
   two mode surfaces (Quick note / Learning story). Elements move
   between surfaces via an input pool + slot pattern. All new rules
   are scoped under .observe-v2. Legacy rules remain intact and
   continue to style inner fields (child roster, dropzone,
   face-stage, trimmer, etc.).
   ============================================================= */

.observe-v2 { max-width: none; padding-inline: clamp(18px, 3vw, 40px); }

.observe-v2 .obs-intro { text-align: center; margin-bottom: 18px; }
.observe-v2 .obs-intro h1 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
.observe-v2 .obs-intro .lede { color: var(--ink-soft); }

/* Toolbar row */
.observe-v2 .obs-toolbar {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}
.observe-v2 .obs-mode-switch {
  display: inline-flex; background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.observe-v2 .obs-mode-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.86rem; font-weight: 600; color: var(--ink-soft);
}
.observe-v2 .obs-mode-btn.active {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px rgba(80,60,30,.08);
}

.observe-v2 .age-band-chip {
  /* Re-use existing styling but let it sit inline in the toolbar. */
  margin: 0;
}

.observe-v2 .obs-inbox-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.86rem; font-weight: 600;
  cursor: pointer;
}
.observe-v2 .obs-inbox-btn:hover { border-color: var(--sage); }
.observe-v2 .obs-inbox-count {
  background: var(--clay); color: white;
  font-size: 0.72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  min-width: 22px; text-align: center;
}
.observe-v2 .obs-inbox-count.empty { background: var(--line); color: var(--ink-soft); }

.observe-v2 .obs-mode-hint {
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin-left: auto;
}
@media (max-width: 700px) {
  .observe-v2 .obs-mode-hint { margin-left: 0; width: 100%; }
}

/* Surface container: no card. Content sits directly on the page. */
.observe-v2 .obs-surface {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Hidden anchors for legacy step ids. */
.observe-v2 .obs-step-anchor { display: contents; }
.observe-v2 .step-rail,
.observe-v2 .step-kicker,
.observe-v2 .step-sub,
.observe-v2 .step-node,
.observe-v2 .step-line,
.observe-v2 .step-head { display: none !important; }
.observe-v2 .step-body { padding: 0 !important; }

/* Input pool is invisible; children are moved out into surface slots. */
.observe-v2 .obs-input-pool {
  display: none !important;
}

/* Slot placeholder — collapses when empty, wraps its child when filled. */
.observe-v2 .obs-slot { display: contents; }

.observe-v2 .obs-divider {
  border: 0; height: 1px;
  background: var(--line);
  margin: 18px 0 20px;
}

/* ---- Quick note surface: flat form, full width ---- */
.observe-v2 .obs-mode-surface[hidden] { display: none !important; }
.observe-v2 .obs-quick { max-width: 960px; margin: 0 auto; }
.observe-v2 .obs-quick .obs-write { margin-bottom: 18px; }
.observe-v2 .obs-quick .obs-write textarea { font-size: 1.02rem; }
.observe-v2 .obs-quick .obs-children { margin-bottom: 18px; }
.observe-v2 .obs-quick .obs-media-section { margin-bottom: 6px; }
.observe-v2 .obs-quick .obs-actions { margin-top: 12px; flex-wrap: wrap; }
.observe-v2 .obs-quick .obs-pathways {
  gap: 20px;
  padding: 0;
  background: transparent;
  border: 0;
}
@media (max-width: 720px) {
  .observe-v2 .obs-quick .obs-pathways { flex-direction: column; }
}

/* ---- Learning story surface ---- */
.observe-v2 .obs-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .observe-v2 .obs-story-grid {
    grid-template-columns: 1fr;
  }
}

/* Timeline: left column */
.observe-v2 .obs-timeline {
  position: relative;
  padding-left: 44px;
}
.observe-v2 .obs-timeline::before {
  content: "";
  position: absolute;
  left: 18px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, #E7DFD1, #E7EEF0);
  border-radius: 2px;
}

.observe-v2 .t-node { position: relative; margin-bottom: 24px; }
.observe-v2 .t-marker {
  position: absolute;
  left: -36px; top: 2px;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--paper);
  border: 2px solid var(--sky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--sky);
  font-weight: 700;
}
.observe-v2 .t-node.text .t-marker { border-color: var(--sage); color: var(--sage); }
.observe-v2 .t-node.photo .t-marker { border-color: var(--clay); color: var(--clay); }
.observe-v2 .t-node.video .t-marker { border-color: #7A5FB0; color: #7A5FB0; }
.observe-v2 .t-node.child .t-marker { border-color: var(--ink-soft); color: var(--ink-soft); }
.observe-v2 .t-node.ai-draft .t-marker {
  border-color: #B77E3E; color: #B77E3E; background: #FFF7EC;
}
.observe-v2 .t-node.now .t-marker {
  border-color: var(--sage); color: var(--sage);
}

.observe-v2 .t-time {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.observe-v2 .t-time-hint {
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
}

/* Inline DRDP/ELOF pills next to node time. */
.observe-v2 .t-inline-tags {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}
.observe-v2 .t-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFF3E6;
  color: #7A4A1E;
  border: 1px dashed #E8B48A;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-transform: none;
}
.observe-v2 .t-pill-info {
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 500;
}

.observe-v2 .t-body {
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.55;
}

/* AI DRAFT node styling */
.observe-v2 .t-draft-card {
  background: linear-gradient(180deg, #FFF9EF, #FFF3DE);
  border: 1px solid #F0D9AC;
  border-radius: 12px;
  padding: 14px 16px;
}
.observe-v2 .t-draft-from {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #B77E3E;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--paper);
  border: 1px solid #F0D9AC;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.observe-v2 .t-draft-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.observe-v2 .t-draft-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #F0D9AC;
  flex-wrap: wrap;
}
.observe-v2 .t-draft-btn {
  background: var(--paper);
  border: 1px solid #F0D9AC;
  color: #7A4A1E;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.observe-v2 .t-draft-btn.primary {
  background: #B77E3E;
  color: #fff;
  border-color: #B77E3E;
}

/* Video 3-step progress */
.observe-v2 .t-video-steps {
  margin-top: 12px;
  background: #FBF5FF;
  border: 1px solid #E5D3F1;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.observe-v2 .tvs-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.observe-v2 .tvs-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--paper);
  border: 1px solid #E5D3F1;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600;
  font-size: 0.72rem;
  color: #6A3F86;
}
.observe-v2 .tvs-step.active {
  background: #A97BC7;
  color: #fff;
  border-color: #A97BC7;
}
.observe-v2 .tvs-step.next { color: var(--ink-soft); }
.observe-v2 .tvs-arrow { color: #C9B5D8; font-size: 0.7rem; }
.observe-v2 .tvs-continue {
  background: #A97BC7;
  color: #fff;
  border: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* NOW node */
.observe-v2 .t-now-hint {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0 0 10px;
}
.observe-v2 .t-now-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.observe-v2 .t-now-pill {
  background: var(--line-soft, #F4EDE1);
  color: var(--ink);
  border: 0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.observe-v2 .t-now-pill:hover { background: #EBE0C7; }

/* Quiet aggregate disclosure line */
.observe-v2 .t-quiet-disclosure {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
}
.observe-v2 .t-quiet-count {
  background: var(--line-soft, #F4EDE1);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.observe-v2 .t-quiet-view {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  margin-left: auto;
  cursor: pointer;
}

/* Right rail */
.observe-v2 .obs-rail {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 900px) {
  .observe-v2 .obs-rail { position: static; }
}
.observe-v2 .obs-rail-block {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.observe-v2 .obs-rail-block h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
  font-weight: 700;
}
.observe-v2 .obs-rail-note {
  color: var(--ink-soft);
  font-size: 0.78rem;
  margin: -4px 0 4px;
}
.observe-v2 .obs-rail-block.privacy {
  background: transparent;
  border: 0;
  padding: 0;
}
.observe-v2 .obs-rail .privacy-note { font-size: 0.75rem; margin: 0; }

/* Sentence starters in the rail */
.observe-v2 .obs-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.observe-v2 .obs-starter {
  background: var(--line-soft, #F4EDE1);
  color: var(--ink);
  border: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.observe-v2 .obs-starter:hover { background: #EBE0C7; }

/* Pathways inside the rail should stack vertically. */
.observe-v2 .obs-story .obs-pathways {
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
}
.observe-v2 .obs-story .obs-actions {
  margin-top: 10px;
  flex-wrap: wrap;
}

/* -------- Inbox drawer -------- */
.obs-inbox-backdrop {
  position: fixed; inset: 0;
  background: rgba(31,42,46,0.28);
  z-index: 55;
}
.obs-inbox-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 40px rgba(80,60,30,0.10);
  padding: 22px;
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.24s ease;
  display: flex; flex-direction: column;
}
.obs-inbox-drawer.open { transform: translateX(0); }
.obs-inbox-drawer[aria-hidden="true"] { pointer-events: none; }
.obs-inbox-drawer.open[aria-hidden="true"] { pointer-events: auto; }

.obs-inbox-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.obs-inbox-head h3 {
  margin: 0 0 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
}
.obs-inbox-sub {
  color: var(--ink-soft);
  font-size: 0.86rem;
  margin: 0;
}
.obs-inbox-close {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink-soft);
}
.obs-inbox-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}
.obs-inbox-empty {
  color: var(--ink-soft);
  font-size: 0.9rem;
  padding: 40px 12px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--line-soft);
}
.obs-inbox-item {
  display: flex; gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--line-soft);
  margin-bottom: 10px;
  cursor: pointer;
}
.obs-inbox-item:hover { border-color: var(--sage); }
.obs-inbox-item .obs-inbox-thumb {
  width: 68px; height: 68px; border-radius: 10px;
  background: var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 22px;
  flex-shrink: 0;
}
.obs-inbox-item .obs-inbox-info { flex: 1; min-width: 0; }
.obs-inbox-item .obs-inbox-info .top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.74rem; color: var(--ink-soft);
  margin-bottom: 4px;
}
.obs-inbox-item .obs-inbox-info .quote {
  font-size: 0.9rem; color: var(--ink);
}
.obs-inbox-item .obs-inbox-info .kids {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px;
}
.obs-inbox-item .obs-inbox-info .kids .kid-chip {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--ink);
}
.obs-inbox-foot {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.obs-inbox-note {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* =============================================================
   Observation (Quick) mode — Media-first two-column layout.
   Left column: media section + story text + inline sentence starters.
   Right column: children + AI pathway + privacy note.
   Scoped under .observe-v2 .obs-quick so it never affects the
   Learning Journal surface or any other view.
   ============================================================= */

.observe-v2 .obs-quick { max-width: 1360px; margin: 0 auto; }

.observe-v2 .obs-quick-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .observe-v2 .obs-quick-grid { grid-template-columns: 1fr; }
}

/* Left column */
.observe-v2 .obs-quick-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Section: media / story text */
.observe-v2 .oqs-section { position: relative; }
.observe-v2 .oqs-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.observe-v2 .oqs-section-icon {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--line-soft, #F4EDE1);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.observe-v2 .oqs-section-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.observe-v2 .oqs-section-note {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

/* Sentence starters directly under the write field */
.observe-v2 .oqs-starters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.observe-v2 .oqs-starters .obs-starter {
  background: var(--line-soft, #F4EDE1);
  color: var(--ink);
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.observe-v2 .oqs-starters .obs-starter:hover { background: #EBE0C7; }

/* Right rail (Observation mode) */
.observe-v2 .obs-quick-rail {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 900px) {
  .observe-v2 .obs-quick-rail { position: static; }
}

/* Reuse the same rail-block style used in the Learning Journal surface. */
.observe-v2 .obs-quick-rail .obs-rail-block {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.observe-v2 .obs-quick-rail .obs-rail-block h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
  font-weight: 700;
}
.observe-v2 .obs-quick-rail .obs-rail-block.privacy {
  background: transparent;
  border: 0;
  padding: 0;
}
.observe-v2 .obs-quick-rail .privacy-note {
  font-size: 0.75rem;
  margin: 0;
}
/* AI pathways stack vertically inside the narrow rail. */
.observe-v2 .obs-quick .obs-pathways {
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
}
.observe-v2 .obs-quick .obs-actions {
  margin-top: 10px;
  flex-wrap: wrap;
}

/* -------- Media tile look (Observation mode only) --------
   The face-stage / trimmer already render the photo or video in their
   own wrapper. We only *decorate* that wrapper with a badge chip in the
   top-left ("PHOTO · primary" or "VIDEO"), a subtle rounded frame, and
   an empty "add another" tile beside it. No JS wiring here — this is
   purely visual dressing for the Media-first mockup. Filename / size
   badges are placeholders for now; they can be filled with real data
   in a later pass. */

.observe-v2 .obs-quick .face-stage,
.observe-v2 .obs-quick .trimmer {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}
.observe-v2 .obs-quick .face-stage::before,
.observe-v2 .obs-quick .trimmer::before {
  content: "PHOTO · primary";
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  background: rgba(31, 42, 46, 0.72);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}
.observe-v2 .obs-quick .trimmer::before { content: "VIDEO"; }

/* Empty tile shown next to the media once something is uploaded. Kept
   as a visual affordance; clicking anywhere on the mediaBlock still
   triggers the file picker via the existing dropzone. */
.observe-v2 .obs-quick .dropzone.has-image::after {
  content: "+ Add photo or video · or drag & drop";
  display: block;
  margin-top: 14px;
  padding: 32px 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-align: center;
}

/* Fix: #grammarBtn (AI grammar/spell check) disabled state.
   The global .primary-btn:disabled applies opacity:.45 which makes
   white text on a green background nearly unreadable. Scoped just to
   #grammarBtn so no other primary button is affected. */
#grammarBtn:disabled {
  background: #C8CFC5;
  color: #fff;
  opacity: 1;
}