/* The app's own names, pointed at the Specimen theme. */
:root{
  --bg:var(--ds-color-bg);--paper:var(--ds-color-surface);--card:var(--ds-color-surface-raised);
  --ink:var(--ds-color-text);--ink-dim:var(--ds-color-text-dim);--muted:var(--ds-color-text-muted);--inverse:var(--ds-color-text-inverse);
  --hair:var(--ds-color-border);--line:var(--ds-color-border-subtle);--strong:var(--ds-color-border-strong);--hover:var(--ds-color-surface-hover);
  --accent:var(--ds-color-accent);--blue:var(--ds-color-accent-alt);--green:var(--ds-color-success);--amber:var(--ds-color-warning);
  --serif:var(--ds-font-display);--sans:var(--ds-font-sans);
  --shadow:var(--ds-shadow-xl);--shadow-soft:var(--ds-shadow-md);--ease:var(--ds-ease-out);
  --fast:var(--ds-duration-fast);--base:var(--ds-duration-base);--slow:var(--ds-duration-slow);
  --r-sm:var(--ds-radius-sm);--r:var(--ds-radius-md);--r-lg:var(--ds-radius-lg);--r-xl:var(--ds-radius-xl);--r-full:var(--ds-radius-full);
  /* the dark results panel */
  --fb-text:color-mix(in srgb,var(--inverse) 82%,transparent);--fb-line:color-mix(in srgb,var(--inverse) 16%,transparent);--fb-chip:color-mix(in srgb,var(--inverse) 10%,var(--ink))
}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{font-family:var(--sans)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* label role: sentence case, text face, no tracking */
.label{font-size:var(--ds-type-label-size);line-height:var(--ds-type-label-leading);font-weight:var(--ds-type-label-weight);letter-spacing:var(--ds-type-label-tracking)}

.app{min-height:100vh;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr)}
header{position:sticky;top:0;z-index:var(--ds-z-nav);height:66px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.brand strong{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:var(--ds-tracking-tight);white-space:nowrap}
.brand span{font-size:var(--ds-text-xs);color:var(--muted);white-space:nowrap}
.mode{display:flex;padding:3px;border:1px solid var(--hair);border-radius:var(--r-full);background:var(--card);flex:none}
.mode button{border:0;background:transparent;border-radius:var(--r-full);padding:6px 13px;font-size:var(--ds-text-xs);font-weight:500;color:var(--muted)}
.mode button[aria-pressed="true"]{background:var(--ink);color:var(--inverse)}
.progress-wrap{display:flex;align-items:center;gap:10px;font-size:var(--ds-text-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.progress{width:110px;height:3px;background:var(--hair);border-radius:var(--r-full);overflow:hidden}
.progress div{height:100%;background:var(--ink);width:0;transition:width var(--slow) var(--ease)}
.lesson-picker-wrap{display:none;flex:1 1 0;min-width:0}
.lesson-picker{width:100%;border:1px solid var(--hair);border-radius:var(--r-full);background:var(--card);font-size:var(--ds-text-xs);padding:6px 10px}

main{display:grid;grid-template-columns:242px minmax(0,1fr) 310px;min-height:calc(100vh - 66px)}
.sidebar{border-right:1px solid var(--line);padding:24px 20px}
.lesson-list{list-style:none;margin:0;padding:0}
.lesson{width:100%;border:0;background:transparent;text-align:left;padding:10px;border-radius:var(--r);color:var(--muted);font-size:var(--ds-text-sm);display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.lesson:hover{color:var(--ink)}
.lesson[aria-current="true"]{background:var(--hover);color:var(--ink);font-weight:600}
.lesson small{font-size:var(--ds-text-xs);font-weight:400;color:var(--muted);display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.lesson .done{width:6px;height:6px;border-radius:50%;background:var(--green)}
.sidebar-note{margin:24px 0 0;border-top:1px solid var(--hair);padding:16px 10px 0;font-size:var(--ds-text-xs);line-height:1.55;color:var(--muted)}

.center{padding:28px;display:flex;align-items:flex-start;justify-content:center}
.stage{width:min(930px,100%);min-height:640px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.stage-head{padding:28px 30px 20px}
h1{font-family:var(--serif);font-size:40px;line-height:1.05;letter-spacing:var(--ds-type-h1-tracking);font-weight:600;margin:0}
.desc{max-width:600px;margin:10px 0 0;font-size:var(--ds-text-sm);line-height:1.55;color:var(--muted)}
.lesson-meta{margin:8px 0 0;color:var(--muted)}

.work{position:relative;display:grid;place-items:center;min-height:400px;padding:36px;background:repeating-linear-gradient(0deg,transparent 0 88px,var(--line) 89px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.work>div{width:100%}

/* learn */
.reading{max-width:720px}
.reading-lead{font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(24px,3vw,40px);line-height:1.15;letter-spacing:-.02em;margin-bottom:28px}
.reading-examples{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.reading-examples>div{border-top:1px solid var(--hair);padding-top:13px}
.reading-examples h3{font-size:var(--ds-type-label-size);line-height:var(--ds-type-label-leading);font-weight:600;color:var(--ink);margin:0 0 6px}
.reading-examples p{font-size:var(--ds-text-sm);line-height:1.55;color:var(--ink-dim);margin:0}
.reading-foot{margin:24px 0 0;font-size:var(--ds-text-xs);line-height:1.6;color:var(--muted)}

/* kerning */
.kern{display:flex;flex-direction:column;align-items:center}
.kern-svg{width:min(860px,100%);height:auto;max-height:300px;overflow:visible;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.solution-text,.editable-glyph{font-family:var(--serif);font-optical-sizing:auto;font-size:156px;font-kerning:normal;font-feature-settings:"kern" 1}
.solution-text{fill:var(--blue);opacity:0;transition:opacity var(--base) var(--ease)}
.editable-glyph{fill:var(--ink);transition:opacity var(--fast) var(--ease),fill var(--fast) var(--ease)}
.editable-glyph.movable{cursor:ew-resize;touch-action:none}
.editable-glyph:focus{outline:none}
#editableGlyphs.dim .editable-glyph:not(.active){opacity:.2}
.marker{fill:none;stroke:var(--muted);stroke-width:2}
.marker.active{fill:var(--accent);stroke:var(--accent)}
.marker.focused{stroke:var(--blue);stroke-width:3}
.kern-svg.squint #editableGlyphs{filter:url(#squint)}
.kern-svg.scored .solution-text{opacity:.72}
.kern-svg.scored .editable-glyph{fill:color-mix(in srgb,var(--ink) 42%,transparent)}
.kern-svg.scored .editable-glyph.movable{cursor:default;touch-action:pan-y}
.kern-svg.view-mine .solution-text{opacity:0}
.kern-svg.view-expert #editableGlyphs{opacity:0}
.kern-svg.view-expert .solution-text{opacity:1}
.kern-error{text-align:center;padding:48px 0}
.kern-error p{margin:0 0 16px;font-size:var(--ds-text-sm);color:var(--muted);line-height:1.5}
.helper{margin:22px 0 0;font-size:var(--ds-text-xs);color:var(--muted);text-align:center;max-width:52ch;line-height:1.5}

/* paragraphs */
.para-card{position:relative;width:min(700px,100%);margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 40px;box-shadow:var(--shadow-soft)}
.para-card.wide{width:min(860px,100%)}
.rivers{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--base) var(--ease)}
.rivers.on{opacity:1}
.river-demo{margin-top:26px;box-shadow:none}
.demo-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.demo-head .sample-title{margin:0}
.river-demo .sample{max-width:40ch;font-size:19px}
.demo-note{margin:16px 0 0;font-size:var(--ds-text-xs);line-height:1.55;color:var(--muted)}
.seg{display:flex;padding:3px;border:1px solid var(--hair);border-radius:var(--r-full);background:var(--paper)}
.seg button{border:0;background:transparent;border-radius:var(--r-full);padding:5px 11px;font-size:var(--ds-text-xs);color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--inverse)}
.sample-title{font-size:var(--ds-text-sm);font-weight:600;margin-bottom:14px}
/* the samples are the thing being judged: wrap them exactly as the browser would, no pretty-wrapping */
.sample{font-family:var(--serif);font-optical-sizing:auto;font-size:20px;line-height:1.3;color:var(--ink);margin:0;text-wrap:wrap;transition:line-height var(--fast) var(--ease),max-width var(--base) var(--ease),word-spacing var(--fast) var(--ease)}
.measure-note{margin-top:20px;display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:var(--ds-type-label-size);font-variant-numeric:tabular-nums}

/* rag */
.rag-card{width:min(820px,100%)}
.rag-layout{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:30px;align-items:start}
/* The editor is always laid out at 20px and scaled to fit (js/text.js), so it breaks the same everywhere */
.rag-fit{margin:-12px}
.rag-editor{font-family:var(--serif);font-optical-sizing:auto;font-size:20px;line-height:1.48;min-height:150px;padding:12px;transform-origin:0 0;border:1px solid transparent;border-radius:var(--r);outline:none;transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);white-space:normal;overflow-wrap:normal;box-sizing:content-box}
.rag-editor:hover{background:var(--hover)}
.rag-editor:focus{border-color:var(--strong);background:var(--card)}
.rag-meta{margin-top:26px;display:flex;gap:8px;flex-wrap:wrap;font-size:var(--ds-text-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.rag-meta span{padding:4px 9px;border:1px solid var(--hair);border-radius:var(--r-full)}
.rag-meta span:empty{display:none}
.rag-meta span.warn{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
.rag-viz-wrap{border-left:1px solid var(--hair);padding-left:18px;min-height:150px}
.rag-viz-title{color:var(--muted);margin-bottom:12px}
.rag-viz{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.rag-bar{height:7px;border-radius:var(--ds-radius-xs);background:var(--strong);transition:width var(--fast) var(--ease),background var(--fast) var(--ease)}
.rag-bar.problem{background:var(--accent)}
.rag-coach{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--hair);font-size:var(--ds-text-xs);line-height:1.55;color:var(--muted)}

/* final */
.score-card{text-align:center;max-width:460px}
.score-card .big{font-family:var(--serif);font-size:80px;font-weight:600;letter-spacing:var(--ds-tracking-tightest);line-height:1;font-variant-numeric:tabular-nums}
.score-card p{font-size:var(--ds-text-sm);color:var(--muted);line-height:1.55;margin:12px auto}
.final-list{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;text-align:left;font-size:var(--ds-text-xs);color:var(--muted)}
.final-list li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--hair);padding:5px 0}
.final-list b{color:var(--ink);font-variant-numeric:tabular-nums}

/* controls */
.controls{padding:18px 30px 22px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end}
.range label{color:var(--muted);display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-variant-numeric:tabular-nums}
.range label span:first-child{color:var(--ink)}
.range-track{position:relative;height:22px;display:flex;align-items:center}
.range input{position:relative;z-index:1;width:100%;margin:0;accent-color:var(--ink);background:transparent}
.range input:disabled{opacity:.35}
.band{position:absolute;top:5px;bottom:5px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--green) 20%,transparent);border:1px solid color-mix(in srgb,var(--green) 45%,transparent)}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{border:1px solid var(--hair);background:var(--card);color:var(--ink);padding:9px 14px;border-radius:var(--r);font-size:var(--ds-text-xs);font-weight:600;touch-action:manipulation}
.btn:hover{border-color:var(--strong)}
.btn[aria-pressed="true"]{background:var(--hover);border-color:var(--strong)}
.btn.primary{background:var(--ink);color:var(--inverse);border-color:var(--ink)}
.btn.accent{background:var(--accent);color:var(--ds-color-accent-contrast);border-color:var(--accent)}
.btn.accent:hover{background:var(--ds-color-accent-hover)}

/* right panel */
.right{border-left:1px solid var(--line);padding:28px 22px;overflow:auto}
.guide-card{border:1px solid var(--hair);background:var(--paper);border-radius:var(--r-lg);padding:16px;margin-bottom:12px}
.guide-card h2{font-size:var(--ds-type-label-size);line-height:var(--ds-type-label-leading);font-weight:600;margin:0 0 6px}
.guide-card p{font-size:var(--ds-text-xs);line-height:1.55;color:var(--muted);margin:0}
.guide-card .aside-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
.tips{list-style:none;margin:0;padding:0}
.tips li{display:flex;gap:9px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair);font-size:var(--ds-text-xs);line-height:1.45;color:var(--ink-dim)}
.tips li:last-child{border-bottom:0}
.tips li::before{content:"\2022";min-width:14px;color:var(--muted);flex:none}
.test-banner{padding:12px;border:1px dashed var(--strong);border-radius:var(--r);font-size:var(--ds-text-xs);line-height:1.5;color:var(--muted);margin-bottom:14px}

.feedback{border-radius:var(--r-lg);padding:16px;background:var(--ink);color:var(--inverse);outline:none}
.feedback .score{font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:var(--ds-tracking-tight);display:block;margin-bottom:4px;font-variant-numeric:tabular-nums}
.feedback p{margin:0 0 10px;color:var(--fb-text);font-size:var(--ds-text-xs);line-height:1.55}
.feedback p:last-child{margin-bottom:0}
.feedback .why{border-top:1px solid var(--fb-line);padding-top:10px}
.feedback .why b{color:var(--inverse)}
.view-switch{display:flex;gap:4px;margin:4px 0 10px;padding:3px;width:max-content;max-width:100%;background:var(--fb-chip);border-radius:var(--r-full)}
.view-switch button{border:0;background:transparent;color:var(--fb-text);padding:5px 11px;border-radius:var(--r-full);font-size:var(--ds-text-xs)}
.view-switch button[aria-pressed="true"]{background:var(--inverse);color:var(--ink)}
.fb-actions{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.fb-actions button{border:1px solid color-mix(in srgb,var(--inverse) 25%,transparent);background:transparent;color:var(--inverse);border-radius:var(--r-full);padding:5px 11px;font-size:var(--ds-text-xs);touch-action:none;user-select:none;-webkit-user-select:none}
.fb-actions button:active,.fb-actions button[aria-pressed="true"]{background:var(--inverse);color:var(--ink)}
.pairs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.pair-chip{font-size:var(--ds-text-xs);padding:3px 8px;border:1px solid var(--fb-line);border-radius:var(--r-full);color:var(--fb-text);font-variant-numeric:tabular-nums}
.pair-chip.good{border-color:color-mix(in srgb,var(--green) 70%,var(--inverse));color:color-mix(in srgb,var(--green) 45%,var(--inverse))}
.pair-chip.close{border-color:color-mix(in srgb,var(--amber) 70%,var(--inverse));color:color-mix(in srgb,var(--amber) 45%,var(--inverse))}
.pair-chip.off{border-color:color-mix(in srgb,var(--accent) 70%,var(--inverse));color:color-mix(in srgb,var(--accent) 40%,var(--inverse))}

@media(max-width:1080px){
  main{grid-template-columns:200px minmax(0,1fr)}
  .right{grid-column:2;border-left:0;border-top:1px solid var(--line);padding:0 28px 28px}
  .right>*{max-width:930px;margin-left:auto;margin-right:auto}
}
@media(max-width:760px){
  header{padding:0 14px;gap:8px}
  .brand span,.progress-wrap{display:none}
  .brand strong{font-size:var(--ds-text-base)}
  .mode button{padding:6px 10px}
  .lesson-picker-wrap{display:block}
  main{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none}
  .right{grid-column:1;padding:0 14px 20px}
  .center{padding:14px}
  .stage{min-height:0}
  .stage-head{padding:22px}
  h1{font-size:32px}
  .work{padding:24px 16px;min-height:320px}
  .controls{grid-template-columns:1fr;padding:16px 20px}
  .actions{justify-content:flex-start}
  .para-card{padding:24px 20px}
  .reading-examples{grid-template-columns:1fr}
  .rag-layout{grid-template-columns:minmax(0,1fr)}
  .rag-viz-wrap{border-left:0;border-top:1px solid var(--hair);padding:16px 0 0;min-height:0}
}
/* Phones and tablets: every control at least 44px tall so it's easy to hit */
@media(pointer:coarse){
  .mode button,.seg button,.view-switch button,.fb-actions button,.btn,.lesson-picker{min-height:var(--ds-control-tap-min)}
}