/* ============================================================================
   RESUME STUDIO
   ----------------------------------------------------------------------------
   Structure follows the one rule that matters in a document tool: the document
   is never off screen. A vertical mode rail switches what the inspector shows;
   the resume itself holds the canvas at all times, so a score, a gap or a
   rewrite is always read next to the page it is talking about.

       ┌────┬──────────────┬──────────────────────────┐
       │rail│  inspector   │   canvas (the document)  │
       └────┴──────────────┴──────────────────────────┘

   Visual system: paper-first. A warm neutral workspace, one signal colour
   (deep emerald), hairline borders, real but restrained elevation. Nothing on
   screen competes with the sheet.

   Sections: 1 tokens · 2 primitives · 3 landing · 4 shell · 5 inspector
             6 instruments · 7 content editor · 8 responsive
   ========================================================================== */

/* ░░ 1 · TOKENS ░░ */
:root{
  --ac:#0b7a6e;                 /* signal */
  --ac-soft:rgba(11,122,110,.10);
  --rs:#0b7a6e;
  --rs-2:#12a08f;
  --rs-3:#075c53;
  --rs-tint:rgba(11,122,110,.09);
  --rs-tint-2:rgba(11,122,110,.22);

  --desk:#eceae5;               /* the workspace surface behind the sheet */
  --surface:#ffffff;
  --sunk:#f6f6f4;
  --hair:#e3e1dc;
  --hair-2:#eeece8;
  --ink:#16181c;
  --ink-2:#4a4f57;
  --ink-3:#82868f;

  --sh-1:0 1px 1px rgba(20,22,28,.04), 0 2px 6px -2px rgba(20,22,28,.08);
  --sh-2:0 2px 4px rgba(20,22,28,.05), 0 12px 28px -14px rgba(20,22,28,.24);
  --sh-3:0 30px 70px -34px rgba(20,22,28,.42);
  --paper:0 1px 2px rgba(20,22,28,.10), 0 18px 44px -22px rgba(20,22,28,.34);

  --r-s:9px; --r-m:13px; --r-l:18px; --r-xl:24px;
  --ease:cubic-bezier(.22,.84,.28,1);

  --rail-w:74px;
  --ins-w:clamp(330px,27vw,420px);
  --ins-w-wide:min(760px,52vw);
  --sbar-h:56px;
}
:root[data-theme="dark"]{
  --rs:#19b09c; --rs-2:#2ad0b8; --rs-3:#0e7d6f;
  --rs-tint:rgba(25,176,156,.13); --rs-tint-2:rgba(25,176,156,.28);
  --ac:#19b09c; --ac-soft:rgba(25,176,156,.13);
  --desk:#0a0c10;
  --surface:#12151b;
  --sunk:#171b22;
  --hair:#242a33;
  --hair-2:#1c212a;
  --ink:#eef1f5;
  --ink-2:#a8b0bd;
  --ink-3:#6f7887;
  --sh-1:0 1px 1px rgba(0,0,0,.5), 0 2px 8px -3px rgba(0,0,0,.7);
  --sh-2:0 2px 6px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.9);
  --sh-3:0 34px 80px -36px rgba(0,0,0,1);
  --paper:0 1px 3px rgba(0,0,0,.7), 0 22px 54px -24px rgba(0,0,0,1);
}

/* ░░ 2 · PRIMITIVES ░░ */
body{ background:var(--desk); color:var(--ink); overflow:hidden; }
body.intake{ overflow-y:auto; overflow-x:hidden; }
::selection{ background:var(--rs-tint-2); }
button{ font-family:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--disp); letter-spacing:-.022em; }

.icon-btn{ width:28px; height:28px; display:grid; place-items:center; flex:none;
  border:1px solid var(--hair); background:var(--surface); color:var(--ink-2);
  border-radius:8px; font-size:.9rem; line-height:1; cursor:pointer;
  transition:.16s var(--ease); }
.icon-btn:hover{ border-color:var(--rs); color:var(--rs); background:var(--rs-tint); }

.gbtn{ font-family:var(--disp); font-weight:600; font-size:.83rem; cursor:pointer;
  padding:.5rem 1.05rem; border-radius:var(--r-s); border:1px solid var(--hair);
  background:var(--surface); color:var(--ink-2); transition:.16s var(--ease);
  white-space:nowrap; }
.gbtn:hover{ border-color:var(--rs); color:var(--rs); }
.gbtn.solid{ background:var(--rs); border-color:var(--rs); color:#fff; }
.gbtn.solid:hover{ background:var(--rs-3); border-color:var(--rs-3); color:#fff; }
.gbtn:disabled{ opacity:.5; cursor:not-allowed; }

.tbtn{ border:1px solid var(--hair); background:var(--surface); color:var(--ink-2);
  border-radius:7px; font-size:.72rem; font-family:var(--disp); font-weight:600;
  padding:.28rem .58rem; cursor:pointer; transition:.15s var(--ease); white-space:nowrap; }
.tbtn:hover{ border-color:var(--rs); color:var(--rs); }
.tbtn.ai{ color:var(--rs); border-color:var(--rs-tint-2); background:var(--rs-tint); }
.tbtn.ai:hover{ background:var(--rs); color:#fff; }
.tbtn:disabled{ opacity:.55; cursor:default; }

.addbtn{ font-family:var(--disp); font-weight:600; font-size:.8rem; color:var(--rs);
  background:transparent; border:1px dashed var(--hair); cursor:pointer;
  border-radius:var(--r-s); padding:.5rem .85rem; transition:.16s var(--ease);
  width:100%; text-align:center; }
.addbtn:hover{ border-color:var(--rs); background:var(--rs-tint); }

input, textarea, select{ font-family:var(--body); font-size:.88rem; color:var(--ink);
  background:var(--sunk); border:1px solid var(--hair); border-radius:var(--r-s);
  padding:.54rem .68rem; width:100%; transition:.16s var(--ease); }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--rs);
  background:var(--surface); box-shadow:0 0 0 3px var(--rs-tint); }
input::placeholder, textarea::placeholder{ color:var(--ink-3); }
textarea{ resize:vertical; line-height:1.55; }
label.chk{ display:inline-flex; align-items:center; gap:.42rem; font-size:.83rem;
  color:var(--ink-2); cursor:pointer; user-select:none; }
label.chk input{ width:15px; height:15px; accent-color:var(--rs); }

.mono{ font-family:var(--mono); }
.eyebrow{ font-family:var(--mono); font-size:.61rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }

/* ░░ 3 · INTAKE VIEW ░░
   Modelled on PlagLab: no marketing page standing in front of the tool. You
   land on the masthead, the intake console and your shelf of saved resumes.
   The "why" copy lives in a collapsed disclosure at the foot, not a hero. */
#view-intake{ max-width:1120px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) 4rem; }

.svcbar{ display:flex; align-items:center; gap:.15rem; flex-wrap:wrap;
  padding:.5rem clamp(1rem,4vw,2rem); background:var(--surface);
  border-bottom:1px solid var(--hair); }
.svc-brand{ display:inline-flex; align-items:baseline; gap:.12rem; margin-right:1rem;
  font-family:var(--disp); font-weight:600; font-size:1rem; letter-spacing:-.02em; }
.svc-mark{ width:18px; height:18px; border-radius:5px; align-self:center; margin-right:.45rem;
  background:linear-gradient(140deg,var(--rs),#7b4fc4); }
.svc-brand .w1{ color:var(--ink); }
.svc-brand .w2{ font-weight:800; background:linear-gradient(95deg,#f5921e,#c4399a 48%,#7b4fc4);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.svc-brand .dotai{ font-size:.5em; font-weight:800; letter-spacing:.06em; margin-left:.2em;
  color:#fff; background:linear-gradient(95deg,#c4399a,#5b5bf0); padding:.2em .4em;
  border-radius:5px; align-self:center; }
.svc-link{ font-family:var(--disp); font-weight:600; font-size:.8rem; color:var(--ink-3);
  padding:.42rem .75rem; border-radius:8px; transition:.16s var(--ease); white-space:nowrap; }
.svc-link:hover{ color:var(--ink); background:var(--sunk); }
.svc-link.active{ color:var(--rs); background:var(--rs-tint); }
.svc-account{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
/* back-link to the marketing page — the two halves of the product should be
   reachable from each other, not only from the suite nav */
.svc-how{ color:var(--rs); }
.svc-how::before{ content:"◷"; margin-right:.35rem; font-size:.75em; }

.masthead{ padding:clamp(1.6rem,4vw,2.8rem) 0 clamp(1rem,2vw,1.4rem); }
.mh-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem;
  flex-wrap:wrap; }
.mh-brand h1{ font-family:var(--disp); font-weight:600; letter-spacing:-.038em;
  font-size:clamp(2rem,4.6vw,3.1rem); line-height:1; color:var(--ink); }
.mh-brand h1 .amp{ color:var(--rs); margin:0 .06em; }
.mh-tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-top:.55rem; }
.mh-data{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.mh-datum{ display:flex; flex-direction:column; line-height:1.1; }
.mh-datum b{ font-family:var(--disp); font-weight:700; font-size:1.35rem; color:var(--rs);
  letter-spacing:-.03em; }
.mh-datum small{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.2rem; }
.mh-rule{ height:1px; background:var(--hair); margin:1.2rem 0 .9rem; position:relative; }
.mh-rule i{ position:absolute; left:0; top:-1px; width:88px; height:3px; border-radius:2px;
  background:var(--rs); }
.mh-scope{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; line-height:1.9;
  color:var(--ink-3); max-width:96ch; }

.console{ display:grid; grid-template-columns:1.55fr 1fr; gap:1rem; margin-top:1.4rem; }
.eyebrow{ font-family:var(--mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.55rem; display:block; }
.tray{ position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:.3rem; cursor:pointer; overflow:hidden;
  min-height:262px; padding:2rem 1.4rem; background:var(--surface);
  border:1.5px dashed var(--hair); border-radius:var(--r-l); transition:.2s var(--ease); }
.tray:hover,.tray.drag{ border-color:var(--rs); background:var(--rs-tint); }
.tray:focus-visible{ outline:2px solid var(--rs); outline-offset:2px; }
.tray-laser{ position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--rs),transparent); opacity:0; }
.tray:hover .tray-laser,.tray.drag .tray-laser{ opacity:1; animation:sweep 1.7s var(--ease) infinite; }
@keyframes sweep{ 0%{ transform:translateY(0) } 100%{ transform:translateY(258px) } }
.tray-up{ width:46px; height:46px; color:var(--rs); margin-bottom:.35rem; }
.tray-title{ font-family:var(--disp); font-weight:600; font-size:1.16rem; color:var(--ink); }
.tray-sub{ font-size:.85rem; color:var(--ink-2); max-width:44ch; line-height:1.55; }
.tray-browse{ color:var(--rs); font-weight:600; text-decoration:underline;
  text-underline-offset:2px; }
.tray-fmts{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; justify-content:center;
  margin-top:.75rem; }
.tray-fmts span{ font-family:var(--mono); font-size:.61rem; padding:.16rem .48rem;
  border-radius:20px; background:var(--sunk); border:1px solid var(--hair); color:var(--ink-2); }
.tray-fmts i{ font-style:normal; font-family:var(--mono); font-size:.61rem; color:var(--ink-3);
  margin-left:.3rem; }
.tray-foot{ display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.7rem; }
.tray-foot .ghost{ font-family:var(--disp); font-weight:600; font-size:.79rem; cursor:pointer;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-s); padding:.5rem .8rem; transition:.16s var(--ease); }
.tray-foot .ghost:hover{ border-color:var(--rs); color:var(--rs); background:var(--rs-tint); }

.scope-col{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-l);
  padding:1.1rem 1.15rem; align-self:start; }
.scope-head{ margin-top:1.2rem; }
.srcs{ display:flex; flex-wrap:wrap; gap:.3rem; }
.srcs span{ font-family:var(--mono); font-size:.62rem; padding:.2rem .5rem; border-radius:20px;
  background:var(--sunk); border:1px solid var(--hair); color:var(--ink-2); }
.engine{ display:flex; flex-wrap:wrap; gap:.35rem; }
.est{ font-family:var(--mono); font-size:.62rem; padding:.22rem .55rem; border-radius:20px;
  border:1px solid var(--hair); background:var(--sunk); color:var(--ink-3);
  display:inline-flex; align-items:center; gap:.35rem; }
.est::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-3); }
.est.on{ color:#1f9d57; border-color:rgba(31,157,87,.3); background:rgba(31,157,87,.08); }
.est.on::before{ background:#1f9d57; }
.est.off{ opacity:.6; }
.scope-note{ font-size:.76rem; color:var(--ink-3); line-height:1.55; margin-top:.85rem; }

.epanel{ margin-top:.8rem; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-l); padding:clamp(1rem,2.4vw,1.5rem); box-shadow:var(--sh-1);
  animation:rise .28s var(--ease); }
@keyframes rise{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.epanel h3{ font-weight:600; font-size:1.04rem; }
.epanel .eh{ font-size:.85rem; color:var(--ink-2); margin:.32rem 0 .95rem; line-height:1.58; }
.epanel textarea{ min-height:200px; }
.erow{ display:flex; gap:.55rem; flex-wrap:wrap; align-items:center; margin-top:.8rem; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.fld{ display:flex; flex-direction:column; gap:.26rem; margin-bottom:.6rem; }
.fld label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }

.docket{ margin-top:2.4rem; }
.docket-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--hair); margin-bottom:.9rem;
  flex-wrap:wrap; }
.docket-head h2{ font-weight:600; font-size:1.2rem; }
.docket-stats{ display:flex; gap:1.2rem; font-family:var(--mono); font-size:.65rem;
  color:var(--ink-3); }
.docket-stats b{ color:var(--rs); }
.ledger{ list-style:none; display:grid; gap:.5rem; }
.lrow{ display:grid; grid-template-columns:auto 1fr auto auto auto; gap:.85rem;
  align-items:center; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-m); padding:.75rem .9rem; cursor:pointer; transition:.18s var(--ease); }
.lrow:hover{ border-color:var(--rs); transform:translateX(2px); box-shadow:var(--sh-1); }
.lrow .ln{ font-family:var(--mono); font-size:.66rem; color:var(--ink-3); min-width:1.6rem; }
.lrow .lt{ min-width:0; }
.lrow .lt b{ display:block; font-family:var(--disp); font-weight:600; font-size:.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrow .lt small{ font-family:var(--mono); font-size:.65rem; color:var(--ink-3); }
.lrow .lfmt{ font-family:var(--mono); font-size:.62rem; padding:.18rem .5rem; border-radius:20px;
  background:var(--sunk); border:1px solid var(--hair); color:var(--ink-2); white-space:nowrap; }
.lrow .lsc{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.lrow .lsc b{ font-family:var(--disp); font-weight:700; font-size:1.05rem; }
.lrow .lsc small{ font-family:var(--mono); font-size:.55rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }
.lrow .lx{ border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  font-size:1.05rem; padding:.15rem .3rem; border-radius:6px; }
.lrow .lx:hover{ color:#d83a52; background:rgba(216,58,82,.1); }
.docket-empty{ text-align:center; padding:2.6rem 1rem; color:var(--ink-3); }
.docket-empty svg{ width:58px; height:58px; color:var(--ink-3); margin-bottom:.6rem; }
.docket-empty p{ font-size:.87rem; line-height:1.7; }
.docket-empty b{ color:var(--ink-2); }

.why{ margin-top:2.6rem; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-l); overflow:hidden; }
.why summary{ cursor:pointer; padding:1rem 1.2rem; font-family:var(--disp); font-weight:600;
  font-size:.92rem; color:var(--ink); list-style:none; display:flex; align-items:center;
  justify-content:space-between; }
.why summary::-webkit-details-marker{ display:none; }
.why summary::after{ content:"▾"; color:var(--ink-3); font-size:.75rem; transition:transform .2s; }
.why[open] summary::after{ transform:rotate(180deg); }
.why summary:hover{ background:var(--sunk); }
.why-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  padding:.4rem 1.2rem 1.4rem; border-top:1px solid var(--hair-2); }
.why-grid div i{ font-style:normal; font-size:1rem; color:var(--rs); }
.why-grid div b{ display:block; font-family:var(--disp); font-weight:600; font-size:.9rem;
  margin:.35rem 0 .25rem; }
.why-grid div p{ font-size:.82rem; color:var(--ink-2); line-height:1.6; }

/* ░░ 4 · SHELL ░░ */
.studio{ display:flex; flex-direction:column; height:calc(100vh - 62px);
  background:var(--desk); }

.sbar{ flex:none; height:var(--sbar-h); display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:0 .85rem;
  background:var(--surface); border-bottom:1px solid var(--hair); }
.sbar-l{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.sbar-back{ width:32px; height:32px; flex:none; display:grid; place-items:center;
  border-radius:9px; border:0; cursor:pointer; color:#fff; font-size:.85rem;
  background:var(--rs); transition:.16s var(--ease); }
.sbar-back:hover{ background:var(--rs-3); }
.doc-title{ font-family:var(--disp); font-weight:600; font-size:.96rem; width:auto;
  max-width:260px; background:transparent; border-color:transparent; padding:.34rem .5rem; }
.doc-title:hover{ background:var(--sunk); border-color:var(--hair); }
.savedot{ font-family:var(--mono); font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); display:inline-flex; align-items:center;
  gap:.35rem; white-space:nowrap; }
.savedot::before{ content:""; width:6px; height:6px; border-radius:50%; background:#1f9d57; }
.savedot.dirty{ color:#c98a1e } .savedot.dirty::before{ background:#c98a1e }
.savedot.busy{ color:var(--rs) } .savedot.busy::before{ background:var(--rs); animation:pulse 1.1s infinite }

.sbar-r{ display:flex; align-items:center; gap:.5rem; flex:none; }
.scorechip{ display:inline-flex; align-items:center; gap:.55rem; padding:.28rem .8rem .28rem .3rem;
  border-radius:30px; background:var(--sunk); border:1px solid var(--hair); cursor:pointer;
  transition:.2s var(--ease); }
.scorechip:hover{ border-color:var(--rs); }
/* Blank document: the chip is a placeholder, not a verdict. Muted so a first
   visit isn't greeted by a red zero on a page nobody has written yet. */
.scorechip.idle .sc-txt b{ color:var(--ink-3); font-weight:500; }
.scorechip.idle .sc-ring{ background:var(--hair); }
.sc-ring{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  flex:none; position:relative;
  background:conic-gradient(var(--c,var(--rs)) calc(var(--p,0)*1%), var(--hair) 0); }
.sc-ring::after{ content:""; position:absolute; inset:3px; border-radius:50%;
  background:var(--sunk); }
.sc-ring i{ position:relative; z-index:1; font-style:normal; font-family:var(--disp);
  font-weight:700; font-size:.78rem; color:var(--c,var(--rs)); }
.sc-txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.sc-txt b{ font-family:var(--disp); font-weight:600; font-size:.76rem; color:var(--ink); }
.sc-txt small{ font-family:var(--mono); font-size:.57rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); }

.stage{ flex:1; min-height:0; display:grid;
  grid-template-columns:var(--rail-w) var(--ins-w) minmax(0,1fr); }
.stage.wide{ grid-template-columns:var(--rail-w) var(--ins-w-wide) minmax(0,1fr); }
/* Each pane is pinned to its column. Auto-placement would shift the canvas
   into the inspector's slot the moment the inspector is display:none — which
   is exactly what the narrow-screen swap does, and it collapsed the document
   to a 38px sliver. */
.rail{ grid-column:1; } .inspector{ grid-column:2; } .canvas{ grid-column:3; }

/* mode rail */
.rail{ background:var(--surface); border-right:1px solid var(--hair);
  display:flex; flex-direction:column; gap:2px; padding:.6rem .5rem; overflow-y:auto; }
.rail button{ position:relative; display:flex; flex-direction:column; align-items:center;
  gap:.28rem; padding:.6rem .2rem .5rem; border:0; background:transparent; cursor:pointer;
  border-radius:var(--r-m); color:var(--ink-3); transition:.16s var(--ease); }
.rail button i{ font-style:normal; font-size:1.12rem; line-height:1; }
.rail button span{ font-family:var(--disp); font-weight:600; font-size:.66rem;
  letter-spacing:.01em; }
.rail button:hover{ background:var(--sunk); color:var(--ink); }
.rail button.on{ background:var(--rs-tint); color:var(--rs); }
.rail button.on::before{ content:""; position:absolute; left:-.5rem; top:22%; bottom:22%;
  width:3px; border-radius:0 3px 3px 0; background:var(--rs); }
.rbadge{ position:absolute; top:.28rem; right:.3rem; font-style:normal;
  font-family:var(--mono); font-size:.54rem; min-width:14px; height:14px; padding:0 3px;
  display:grid; place-items:center; border-radius:20px; background:#d83a52; color:#fff;
  box-shadow:0 0 0 2px var(--surface); }
/* `display:grid` outranks the UA's [hidden]{display:none}, so the badge showed
   before any analysis had run. State the hidden case explicitly. */
.rbadge[hidden]{ display:none; }

/* ░░ 5 · INSPECTOR ░░ */
.inspector{ background:var(--surface); border-right:1px solid var(--hair);
  display:flex; flex-direction:column; min-height:0; }
.ins-head{ flex:none; display:flex; align-items:flex-start; justify-content:space-between;
  gap:.7rem; padding:1rem 1.1rem .85rem; border-bottom:1px solid var(--hair); }
.ins-head h2{ font-weight:600; font-size:1.05rem; }
.ins-head p{ font-size:.79rem; color:var(--ink-3); margin-top:.2rem; line-height:1.5; }
.ins-body{ flex:1; overflow-y:auto; padding:1rem 1.1rem 4rem; }
.ins-body::-webkit-scrollbar{ width:9px }
.ins-body::-webkit-scrollbar-thumb{ background:var(--hair); border-radius:20px }

.blk{ margin-bottom:1.5rem; }
.blk-h{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.6rem; }
.blk-h b{ font-family:var(--disp); font-weight:600; font-size:.82rem; letter-spacing:0;
  text-transform:none; color:var(--ink); }
.hint{ font-size:.81rem; color:var(--ink-3); line-height:1.58; margin-bottom:.7rem; }

.panelcard{ background:var(--sunk); border:1px solid var(--hair); border-radius:var(--r-m);
  padding:.9rem 1rem; margin-bottom:.6rem; }
.note{ font-size:.83rem; color:var(--ink-2); line-height:1.6; background:var(--sunk);
  border:1px solid var(--hair); border-left:3px solid var(--rs);
  border-radius:0 var(--r-s) var(--r-s) 0; padding:.7rem .85rem; margin:.7rem 0; }
.note b{ color:var(--ink); }
.note.warn{ border-left-color:#c98a1e } .note.bad{ border-left-color:#d83a52 }

.loading{ text-align:center; padding:3rem 1rem; }
.spin{ width:32px; height:32px; border-radius:50%; border:3px solid var(--hair);
  border-top-color:var(--rs); animation:spin .8s linear infinite; margin:0 auto; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.loading p{ font-family:var(--disp); font-weight:500; color:var(--ink-2); margin-top:.85rem;
  font-size:.9rem; }
.loading small{ font-family:var(--mono); font-size:.7rem; color:var(--ink-3); }

/* ░░ 6 · INSTRUMENTS ░░ */
.dial{ position:relative; display:grid; place-items:center; flex:none; }
.dial svg{ display:block; overflow:visible; }
.dial .din{ position:absolute; text-align:center; line-height:1; }
.dial .dv{ font-family:var(--disp); font-weight:700; letter-spacing:-.035em;
  font-size:2.1rem; display:block; }
.dial .dv small{ font-size:.85rem; font-weight:600; }
.dial .dl{ font-family:var(--mono); font-size:.57rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.3rem; display:block; }
.dial-track{ stroke:var(--hair) }
.dial-arc{ stroke-linecap:round; transition:stroke-dashoffset 1.1s var(--ease) }

.headline{ display:flex; align-items:center; gap:1.1rem; padding:.2rem 0 1rem;
  border-bottom:1px solid var(--hair-2); margin-bottom:1.1rem; }
.headline .hl-t{ flex:1; min-width:0; }
.headline h3{ font-weight:600; font-size:1.06rem; line-height:1.25; }
.headline p{ font-size:.82rem; color:var(--ink-2); line-height:1.55; margin-top:.35rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.6rem; }
.chip{ font-family:var(--mono); font-size:.64rem; padding:.22rem .55rem; border-radius:20px;
  background:var(--sunk); border:1px solid var(--hair); color:var(--ink-2); }
.chip.g{ background:rgba(31,157,87,.1); color:#1f9d57; border-color:rgba(31,157,87,.26) }
.chip.w{ background:rgba(201,138,30,.11); color:#c98a1e; border-color:rgba(201,138,30,.28) }
.chip.b{ background:rgba(216,58,82,.1); color:#d83a52; border-color:rgba(216,58,82,.26) }
.chip.must::after{ content:"●"; font-size:.4rem; vertical-align:middle; margin-left:.35em }

/* Readiness cap — shown only when the headline score is being held down
   because the document is too empty to judge. Amber, not red: nothing is
   broken, there just isn't a resume here yet. */
.warnblk{ background:rgba(201,138,30,.06); border:1px solid rgba(201,138,30,.24);
  border-left:3px solid #c98a1e; border-radius:0 var(--r-m) var(--r-m) 0;
  padding:.9rem 1rem .5rem; margin-bottom:1.5rem; }
.warnblk .blk-h b{ color:#a06f14 }
.misslist{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.1rem 0 .7rem; }

/* Marks the one block on a panel that a language model wrote, so it isn't read
   with the same authority as the measured numbers around it. */
.ai-caveat{ font-family:var(--mono); font-size:.66rem; line-height:1.55;
  color:var(--ink-3); background:var(--sunk); border:1px dashed var(--hair);
  border-radius:var(--r-s); padding:.5rem .65rem; margin:0 0 .7rem; }
/* A checklist of what is still to come, not a list of errors — so these read
   amber like the block they sit in, never red. Nothing is wrong yet; the user
   simply hasn't typed anything. */
.misslist .chip, .misslist .chip.b{ background:rgba(201,138,30,.1); color:#a06f14;
  border-color:rgba(201,138,30,.28); }
:root[data-theme="dark"] .misslist .chip,
:root[data-theme="dark"] .misslist .chip.b{ color:#d7a94e; }

.radarbox{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.radar-grid,.radar-axis{ stroke:var(--hair); fill:none }
.radar-area{ fill:var(--rs-tint-2); stroke:var(--rs); stroke-width:2; stroke-linejoin:round }
.radar-pt{ fill:var(--rs) }
.radar-lbl{ font-family:var(--mono); font-size:8.5px; fill:var(--ink-3);
  text-transform:uppercase; letter-spacing:.05em }
.rleg{ width:100%; display:grid; gap:.45rem; margin-top:.4rem; }
.rleg-row{ display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:baseline;
  font-size:.82rem; }
.rleg-row span{ color:var(--ink-2) }
.rleg-row b{ font-family:var(--disp); font-weight:700; font-size:.86rem }
.rleg-row .bar{ grid-column:1/-1; height:4px; border-radius:3px; background:var(--hair);
  overflow:hidden }
.rleg-row .bar i{ display:block; height:100%; border-radius:3px; width:0;
  transition:width .8s var(--ease) }

.layer{ border:1px solid var(--hair); border-radius:var(--r-m); margin-bottom:.5rem;
  overflow:hidden; background:var(--surface); transition:border-color .16s; }
.layer:hover{ border-color:var(--rs-tint-2) }
.layer-top{ display:grid; grid-template-columns:1fr auto 14px; gap:.6rem; align-items:center;
  padding:.72rem .85rem; cursor:pointer; }
.layer-top:hover{ background:var(--sunk) }
.layer-name{ font-weight:600; font-size:.85rem }
.layer-name small{ display:block; font-family:var(--mono); font-size:.59rem;
  color:var(--ink-3); font-weight:400; margin-top:.15rem }
.layer-val{ font-family:var(--disp); font-weight:700; font-size:.95rem; letter-spacing:-.02em }
.layer-caret{ color:var(--ink-3); font-size:.58rem; transition:transform .22s var(--ease) }
.layer.open .layer-caret{ transform:rotate(90deg) }
.lbar{ grid-column:1/-1; height:6px; border-radius:4px; background:var(--hair);
  overflow:hidden; margin-top:.1rem }
.lbar i{ display:block; height:100%; border-radius:4px; width:0;
  transition:width .9s var(--ease) }
.layer-body{ display:none; padding:.15rem .85rem .85rem; border-top:1px solid var(--hair-2) }
.layer.open .layer-body{ display:block }
.ev{ display:flex; gap:.55rem; padding:.5rem 0; border-bottom:1px solid var(--hair-2) }
.ev:last-child{ border-bottom:0 }
.ev-dot{ flex:none; width:6px; height:6px; border-radius:50%; margin-top:.42rem }
.ev-good .ev-dot{ background:#1f9d57 } .ev-warn .ev-dot{ background:#c98a1e }
.ev-bad .ev-dot{ background:#d83a52 }  .ev-info .ev-dot{ background:var(--ink-3) }
.ev-txt{ font-size:.81rem; color:var(--ink-2); line-height:1.58 }
.ev-txt b{ color:var(--ink) }
.evi{ display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.4rem }
.evi span{ font-family:var(--mono); font-size:.62rem; padding:.13rem .42rem; border-radius:20px;
  background:var(--sunk); color:var(--ink-2); border:1px solid var(--hair-2) }

.fix{ position:relative; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r-m); padding:.85rem .9rem .85rem 1rem; margin-bottom:.55rem;
  overflow:hidden; transition:.18s var(--ease); }
.fix::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px }
.fix.critical::before{ background:#d83a52 } .fix.major::before{ background:#c98a1e }
.fix.minor::before{ background:var(--hair) }
.fix:hover{ border-color:var(--rs-tint-2) }
.fix-h{ display:flex; align-items:center; gap:.5rem; }
.sev{ font-family:var(--mono); font-size:.54rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .45rem; border-radius:20px; flex:none }
.sev.critical{ background:rgba(216,58,82,.12); color:#d83a52 }
.sev.major{ background:rgba(201,138,30,.13); color:#c98a1e }
.sev.minor{ background:var(--sunk); color:var(--ink-3) }
.fix h4{ font-weight:600; font-size:.86rem; flex:1; min-width:0 }
.fix-where{ font-family:var(--mono); font-size:.61rem; color:var(--ink-3); margin-top:.3rem }
.fix-why{ font-size:.81rem; color:var(--ink-2); line-height:1.58; margin-top:.42rem }
.fix-do{ font-size:.81rem; color:var(--ink); line-height:1.58; margin-top:.45rem;
  padding-left:.65rem; border-left:2px solid var(--rs) }
.fix-rw{ margin-top:.55rem; background:var(--sunk); border:1px solid var(--hair);
  border-radius:var(--r-s); padding:.6rem .7rem; font-size:.82rem; line-height:1.55 }
.fix-rw .fr-l{ font-family:var(--mono); font-size:.55rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rs); display:block; margin-bottom:.28rem }
.fix-acts{ display:flex; gap:.4rem; margin-top:.55rem; flex-wrap:wrap }

.stat{ display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) }
.stat > div{ background:var(--sunk); border:1px solid var(--hair); border-radius:var(--r-m);
  padding:.85rem .9rem }
.stat b{ display:block; font-family:var(--disp); font-weight:700; font-size:1.35rem;
  letter-spacing:-.03em; line-height:1.1 }
.stat span{ display:block; font-size:.72rem; color:var(--ink-3); margin-top:.2rem }
.stat small{ display:block; font-size:.75rem; color:var(--ink-2); margin-top:.4rem;
  line-height:1.45 }

.row{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-m);
  padding:.75rem .85rem; margin-bottom:.5rem }
.row .rk{ font-family:var(--mono); font-size:.57rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rs) }
.row .rb{ font-size:.8rem; color:var(--ink-3); margin-top:.32rem; line-height:1.5;
  padding-left:.6rem; border-left:2px solid rgba(216,58,82,.35) }
.row .ra{ font-size:.83rem; color:var(--ink); margin-top:.32rem; line-height:1.52;
  padding-left:.6rem; border-left:2px solid #1f9d57 }
.row .rd{ font-size:.8rem; color:var(--ink-2); margin-top:.3rem; line-height:1.52 }
.verify{ font-size:.74rem; color:#c98a1e; background:rgba(201,138,30,.09);
  border:1px solid rgba(201,138,30,.26); border-radius:var(--r-s); padding:.38rem .55rem;
  margin-top:.42rem; line-height:1.5 }

/* attention page map */
.pmap{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-m);
  padding:.9rem; }
.pm-page{ background:#fff; border-radius:5px; padding:11px 11px 15px; position:relative;
  box-shadow:var(--sh-1) }
[data-theme="dark"] .pm-page{ background:#0e1219 }
.pm-line{ height:5px; border-radius:3px; margin-bottom:3.5px }
.pm-head{ height:8px; width:50%; margin:0 auto 7px; border-radius:4px; background:var(--hair) }
.pm-sec{ height:4px; width:32%; border-radius:2px; background:var(--ink-3); opacity:.45;
  margin:7px 0 4px }
.pm-key{ display:flex; align-items:center; gap:.45rem; font-size:.76rem; color:var(--ink-2);
  margin-top:.42rem }
.pm-key i{ width:20px; height:5px; border-radius:3px; flex:none }

.heatrow{ display:grid; grid-template-columns:1fr 54px; gap:.6rem; align-items:center;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-s);
  padding:.5rem .65rem; margin-bottom:.35rem }
.heatrow .ht{ font-size:.79rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap }
.heatbar{ height:5px; border-radius:3px; background:var(--hair); overflow:hidden }
.heatbar i{ display:block; height:100%; border-radius:3px; width:0;
  transition:width .7s var(--ease) }

/* template gallery */
.tplgrid{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) }
.tpl{ position:relative; background:var(--surface); border:1.5px solid var(--hair);
  border-radius:var(--r-m); padding:0 0 .7rem; cursor:pointer; text-align:left;
  overflow:hidden; transition:.2s var(--ease); color:var(--ink) }
.tpl:hover{ border-color:var(--rs); transform:translateY(-2px); box-shadow:var(--sh-1) }
.tpl.on{ border-color:var(--rs); box-shadow:0 0 0 3px var(--rs-tint) }
.tpl-thumb{ height:86px; background:#fff; border-bottom:1px solid var(--hair);
  padding:10px 12px; overflow:hidden }
[data-theme="dark"] .tpl-thumb{ background:#0e1219 }
.tt-name{ height:7px; border-radius:3px; background:var(--ink); opacity:.7; margin-bottom:4px }
.tt-sub{ height:3.5px; width:42%; border-radius:2px; background:var(--ink-3); opacity:.6;
  margin-bottom:8px }
.tt-rule{ height:2.5px; border-radius:2px; margin:6px 0 3px }
.tt-l{ height:2.5px; border-radius:2px; background:var(--ink-3); opacity:.3; margin-bottom:2.5px }
.tt-2col{ display:grid; grid-template-columns:1fr 1.9fr; gap:6px }
.tpl-b{ padding:.6rem .7rem 0 }
.tpl b{ display:block; font-family:var(--disp); font-weight:600; font-size:.8rem }
.tp-ats{ display:flex; align-items:center; gap:.32rem; margin-top:.4rem;
  font-family:var(--mono); font-size:.58rem; color:var(--ink-3) }
.tp-dots{ display:flex; gap:2px }
.tp-dots i{ width:4px; height:4px; border-radius:50%; background:var(--hair) }
.tp-dots i.f{ background:#1f9d57 }
.tp-ats.mid .tp-dots i.f{ background:#c98a1e } .tp-ats.low .tp-dots i.f{ background:#d83a52 }
.tp-warn{ font-size:.7rem; color:#c98a1e; line-height:1.42; margin-top:.4rem;
  padding:0 .7rem }
.tpl-badge{ position:absolute; top:.4rem; right:.4rem; font-family:var(--mono);
  font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--rs); padding:.16rem .38rem; border-radius:20px }

.swatches{ display:flex; flex-wrap:wrap; gap:.4rem }
.swatch{ width:28px; height:28px; border-radius:8px; cursor:pointer;
  border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
  transition:.16s var(--ease) }
.swatch:hover{ transform:scale(1.12) }
.swatch.on{ border-color:var(--ink) }

.expcard{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-m);
  padding:.8rem .85rem; cursor:pointer; margin-bottom:.5rem; transition:.18s var(--ease);
  color:var(--ink) }
.expcard:hover{ border-color:var(--rs); transform:translateX(2px) }
.expcard .ei{ display:grid; place-items:center; width:32px; height:32px; flex:none;
  border-radius:9px; background:var(--rs-tint); color:var(--rs); font-size:.9rem;
  border:1px solid var(--rs-tint-2) }
.expcard b{ display:block; font-family:var(--disp); font-weight:600; font-size:.86rem }
.expcard span{ display:block; font-size:.76rem; color:var(--ink-3); line-height:1.45;
  margin-top:.15rem }

/* ░░ 7 · CONTENT EDITOR ░░ */
.seclist{ display:flex; flex-direction:column; gap:2px; margin-bottom:.6rem }
.secrow{ display:flex; align-items:center; gap:.5rem; padding:.5rem .55rem;
  border-radius:var(--r-s); cursor:pointer; border:1px solid transparent;
  transition:.14s var(--ease) }
.secrow:hover{ background:var(--sunk) }
.secrow.on{ background:var(--rs-tint); border-color:var(--rs-tint-2) }
.secrow.drag-over{ box-shadow:inset 0 2px 0 var(--rs) }
.secrow .sg{ color:var(--ink-3); font-size:.75rem; cursor:grab; opacity:.4 }
.secrow:hover .sg{ opacity:1 }
.secrow .sh{ width:6px; height:6px; border-radius:50%; flex:none; background:var(--hair) }
.secrow .sh.good{ background:#1f9d57 } .secrow .sh.warn{ background:#c98a1e }
.secrow .sh.bad{ background:#d83a52 }
.secrow .sn{ flex:1; min-width:0; font-size:.83rem; font-weight:500; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.secrow.on .sn{ color:var(--rs); font-weight:600 }
.secrow .sc{ font-family:var(--mono); font-size:.62rem; color:var(--ink-3) }
.secrow .se{ border:0; background:transparent; cursor:pointer; font-size:.68rem;
  color:var(--ink-3); opacity:.45; padding:.1rem }
.secrow:hover .se{ opacity:1 }
.secrow.off{ opacity:.42 }

.itemcard{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-m);
  padding:.8rem .85rem; margin-bottom:.55rem; transition:.16s var(--ease) }
.itemcard:focus-within{ border-color:var(--rs); box-shadow:0 0 0 3px var(--rs-tint) }
.itemcard.drag-over{ border-color:var(--rs) }
.ic-h{ display:flex; align-items:center; gap:.45rem; padding-bottom:.55rem;
  margin-bottom:.65rem; border-bottom:1px solid var(--hair-2) }
.ic-h .g{ color:var(--ink-3); cursor:grab; font-size:.78rem; opacity:.4 }
.itemcard:hover .ic-h .g{ opacity:1 }
.ic-h b{ flex:1; min-width:0; font-family:var(--disp); font-weight:600; font-size:.83rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ic-h .n{ font-family:var(--mono); font-size:.6rem; color:var(--ink-3) }
.xbtn{ border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  font-size:1rem; line-height:1; padding:.1rem .25rem; border-radius:5px }
.xbtn:hover{ color:#d83a52; background:rgba(216,58,82,.1) }

.blist{ display:flex; flex-direction:column; gap:.38rem; margin-top:.45rem }
.brow{ position:relative; display:flex; align-items:flex-start; gap:.45rem;
  background:var(--sunk); border:1px solid var(--hair); border-radius:var(--r-s);
  padding:.5rem .55rem .5rem .6rem; transition:.16s var(--ease) }
.brow::before{ content:""; position:absolute; left:0; top:7px; bottom:7px; width:2px;
  border-radius:2px; background:transparent; transition:background .2s }
.brow.good::before{ background:#1f9d57 } .brow.warn::before{ background:#c98a1e }
.brow.bad::before{ background:#d83a52 }
.brow:focus-within{ border-color:var(--rs); background:var(--surface);
  box-shadow:0 0 0 3px var(--rs-tint) }
.brow.drag-over{ box-shadow:inset 0 2px 0 var(--rs) }
.brow .bg{ color:var(--ink-3); cursor:grab; font-size:.72rem; padding-top:.25rem; opacity:.35 }
.brow:hover .bg{ opacity:1 }
.brow .bw{ flex:1; min-width:0 }
.brow textarea{ width:100%; border:0; background:transparent; resize:none; padding:0;
  font-size:.85rem; line-height:1.56; min-height:1.5em; overflow:hidden }
.brow textarea:focus{ outline:none; box-shadow:none; background:transparent }
.bmeta{ display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; margin-top:.3rem }
.bchip{ font-family:var(--mono); font-size:.57rem; padding:.12rem .4rem; border-radius:20px;
  background:var(--hair-2); color:var(--ink-3) }
.bchip.good{ background:rgba(31,157,87,.13); color:#1f9d57 }
.bchip.warn{ background:rgba(201,138,30,.14); color:#c98a1e }
.bchip.bad{ background:rgba(216,58,82,.12); color:#d83a52 }
.btools{ display:flex; flex-direction:column; gap:.22rem; opacity:0; transition:opacity .16s }
.brow:hover .btools, .brow:focus-within .btools{ opacity:1 }

/* ░░ 8 · CANVAS ░░ */
.canvas{ display:flex; flex-direction:column; min-height:0; background:var(--desk) }
.cv-bar{ flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; padding:.5rem .9rem; border-bottom:1px solid var(--hair);
  background:var(--surface) }
.cv-meta{ font-family:var(--mono); font-size:.63rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3) }
.cv-tools{ display:flex; align-items:center; gap:.28rem }
.cv-zoom{ font-family:var(--mono); font-size:.66rem; color:var(--ink-3); min-width:34px;
  text-align:center }
.cv-stage{ flex:1; overflow:auto; padding:1.6rem 1.2rem 3rem; display:flex;
  justify-content:center; align-items:flex-start }
.cv-sheet{ flex:none; background:#fff; border-radius:2px; box-shadow:var(--paper) }

/* rewrite popover */
.pop{ position:fixed; z-index:300; width:min(560px,92vw); background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r-l); box-shadow:var(--sh-3);
  padding:1rem; max-height:74vh; overflow-y:auto; animation:rise .2s var(--ease) }
.pop-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem }
.pop-h b{ font-family:var(--disp); font-size:.92rem }
.modes{ display:flex; flex-wrap:wrap; gap:.28rem; margin-bottom:.8rem }
.modes button{ font-family:var(--disp); font-weight:600; font-size:.72rem;
  padding:.32rem .62rem; border-radius:20px; border:1px solid var(--hair);
  background:var(--sunk); color:var(--ink-2); cursor:pointer; transition:.15s }
.modes button:hover{ border-color:var(--rs); color:var(--rs) }
.modes button.on{ background:var(--rs); border-color:var(--rs); color:#fff }
.pop-src{ font-size:.81rem; color:var(--ink-3); background:var(--sunk);
  border-left:2px solid var(--hair); padding:.5rem .7rem; border-radius:0 8px 8px 0;
  margin-bottom:.7rem; line-height:1.55 }
.variant{ border:1px solid var(--hair); border-radius:var(--r-m); padding:.7rem .8rem;
  margin-bottom:.45rem; cursor:pointer; transition:.18s var(--ease) }
.variant:hover{ border-color:var(--rs); background:var(--rs-tint); transform:translateX(2px) }
.variant p{ font-size:.86rem; line-height:1.56; color:var(--ink) }
.variant .vm{ display:flex; gap:.3rem; align-items:center; margin-top:.4rem; flex-wrap:wrap }
.pop-note{ font-size:.75rem; color:var(--ink-3); line-height:1.55; margin-top:.55rem }

/* toasts */
.toasts{ position:fixed; bottom:1.1rem; right:1.1rem; z-index:400; display:flex;
  flex-direction:column; gap:.45rem; align-items:flex-end; pointer-events:none }
.toast{ background:var(--surface); border:1px solid var(--hair); border-left:3px solid var(--rs);
  border-radius:var(--r-m); padding:.68rem .9rem; box-shadow:var(--sh-3); font-size:.85rem;
  color:var(--ink); max-width:min(380px,88vw); pointer-events:auto;
  animation:rise .22s var(--ease); transition:opacity .24s, transform .24s }
.toast.bad{ border-left-color:#d83a52 } .toast.good{ border-left-color:#1f9d57 }

/* ░░ 9 · RESPONSIVE ░░
   Three real breakpoints, not a smooth squeeze:
     ≤1180  the document loses its own column — the inspector takes the width
            and a toggle in the top bar swaps between paper and panel
     ≤1024  the intake console stacks
     ≤620   everything stacks, the mode rail becomes a scrolling strip
   The document is the thing that must stay usable, so on a phone the canvas
   gets a full viewport height of its own rather than being squeezed beside a
   panel that would leave both unreadable. */

/* ── the paper/panel toggle (only exists on narrow screens) ── */
.viewswap{ display:none; }
.viewswap button{ font-family:var(--disp); font-weight:600; font-size:.74rem;
  padding:.32rem .6rem; border:0; background:transparent; color:var(--ink-3);
  border-radius:7px; cursor:pointer; transition:.16s var(--ease); }
.viewswap button.on{ background:var(--surface); color:var(--rs); box-shadow:var(--sh-1); }

@media (max-width:1280px){
  .stage.wide{ grid-template-columns:var(--rail-w) minmax(0,1fr) 0; }
  .stage.wide .canvas{ display:none; }
}

@media (max-width:1180px){
  /* the canvas no longer fits beside a full inspector — swap between them */
  .viewswap{ display:inline-flex; gap:2px; background:var(--sunk);
    border:1px solid var(--hair); border-radius:9px; padding:2px; }
  .stage{ grid-template-columns:var(--rail-w) minmax(0,1fr) 0; }
  .canvas{ display:none; }
  body.show-paper .stage{ grid-template-columns:var(--rail-w) 0 minmax(0,1fr); }
  body.show-paper .inspector{ display:none; }
  body.show-paper .canvas{ display:flex; }
  #insWide{ display:none; }
}

@media (max-width:1024px){
  .console{ grid-template-columns:1fr; }
  .scope-col{ order:2; }
  .tray{ min-height:230px; }
}

@media (max-width:760px){
  .mh-brand h1{ font-size:clamp(1.8rem,9vw,2.4rem); }
  .mh-data{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1.2rem; width:100%; }
  .mh-row{ align-items:flex-start; }
  .mh-scope{ line-height:1.75; }
  .why-grid{ padding:.4rem 1rem 1.2rem; }
}

@media (max-width:620px){
  body{ overflow:auto; }
  .svcbar{ gap:.1rem; padding:.45rem .7rem; }
  .svc-link{ font-size:.74rem; padding:.36rem .55rem; }
  .svc-account{ margin-left:auto; }
  #view-intake{ padding:0 1rem 3rem; }

  .tray{ min-height:200px; padding:1.5rem 1rem; }
  .tray-title{ font-size:1.05rem; }
  .tray-sub{ font-size:.81rem; }
  .tray-foot{ flex-direction:column; }
  .tray-foot .ghost{ width:100%; text-align:center; }

  /* the ledger's five columns become a two-line card */
  .lrow{ grid-template-columns:auto 1fr auto; grid-template-areas:
      "n t s" ". f x"; gap:.4rem .7rem; }
  .lrow .ln{ grid-area:n } .lrow .lt{ grid-area:t } .lrow .lsc{ grid-area:s }
  .lrow .lfmt{ grid-area:f; justify-self:start } .lrow .lx{ grid-area:x }

  /* studio: everything stacks, the rail becomes a scrolling strip */
  .studio{ height:auto; }
  .stage, body.show-paper .stage{ display:block; }
  .rail{ flex-direction:row; overflow-x:auto; border-right:0; gap:.15rem;
    border-bottom:1px solid var(--hair); padding:.4rem .5rem;
    position:sticky; top:0; z-index:15; background:var(--surface); }
  .rail button{ flex:none; min-width:64px; padding:.45rem .3rem .4rem; }
  .rail button.on::before{ left:20%; right:20%; top:auto; bottom:-.4rem; width:auto;
    height:3px; border-radius:3px 3px 0 0; }
  .rbadge{ top:.12rem; right:.5rem }
  /* both panes are shown, stacked — a toggle makes no sense once they fit */
  .inspector, body.show-paper .inspector{ display:flex; border-right:0; }
  /* height:auto so a short resume doesn't reserve most of the screen as empty
     desk; the stage caps itself and scrolls once the document is longer */
  .canvas, body.show-paper .canvas{ display:flex; height:auto;
    border-top:1px solid var(--hair); }
  .cv-stage{ max-height:78vh; padding:1rem .8rem 1.4rem; }
  .viewswap{ display:none; }
  .ins-body{ padding:.9rem .9rem 2rem; }
  .grid2,.grid3{ grid-template-columns:1fr; }
  .sbar{ flex-wrap:wrap; height:auto; padding:.55rem .7rem; gap:.5rem; }
  .doc-title{ max-width:none; flex:1; }
  .sc-txt{ display:none; }
  .layer-top{ grid-template-columns:1fr auto 14px; }
  .heatrow{ grid-template-columns:1fr 46px; }
  .pop{ left:8px !important; right:8px; width:auto; }
}

@media (max-width:420px){
  .mh-datum b{ font-size:1.15rem }
  .tray-fmts i{ display:none }
  .sbar-r{ gap:.35rem }
  .gbtn{ padding:.45rem .75rem; font-size:.78rem }
}
/* ░░ 10 · THE ASSISTANT ░░
   A chat that can change the document, so it needs two things a normal chat
   doesn't: the panel must fill its column (composer pinned to the bottom, not
   floating after the last message), and a proposed edit must render as a
   reviewable before/after card rather than as prose the user has to re-type. */
/* The inspector's generous bottom padding is scroll comfort for the long
   scrolling panels (Score, Content, Insights). The chat is not one of those —
   it is a fixed-height layout with the composer pinned to the bottom, so that
   64px is dead space that pushes the input up off the floor of the panel. */
.ins-body:has(> .chat){ padding-bottom:18px; }
.chat{ display:flex; flex-direction:column; height:100%; min-height:0; }
.chat-log{ flex:1; overflow-y:auto; display:flex; flex-direction:column;
  gap:.85rem; padding:.2rem .1rem 1rem; }
.msg{ max-width:100%; font-size:.87rem; line-height:1.62; }
.msg.you{ align-self:flex-end; max-width:88%; background:var(--rs-tint);
  border:1px solid var(--rs-line, var(--hair)); color:var(--ink);
  border-radius:14px 14px 4px 14px; padding:.6rem .8rem; }
.msg.bot{ color:var(--ink-2); }
.msg.bot p{ margin:.45rem 0; }
.msg.bot p:first-child{ margin-top:0; }
.msg.bot b, .msg.bot strong{ color:var(--ink); font-weight:600; }
.msg.bot ul, .msg.bot ol{ margin:.5rem 0 .5rem 1.1rem; }
.msg.bot li{ margin:.22rem 0; }
.msg.bot code{ font-family:var(--mono); font-size:.86em; background:var(--sunk);
  padding:.08rem .32rem; border-radius:5px; }
.msg-who{ font-family:var(--mono); font-size:.57rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.3rem; }
.msg.bot.think .msg-who::after{ content:" · thinking"; color:var(--rs); }
.caret{ display:inline-block; width:7px; height:1em; vertical-align:-2px;
  background:var(--rs); animation:blink 1s steps(2) infinite; margin-left:1px; }
@keyframes blink{ 50%{ opacity:0 } }

/* proposed edits */
.acts{ display:flex; flex-direction:column; gap:.5rem; margin-top:.7rem; }
.acts-h{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); }
.act{ border:1px solid var(--hair); border-left:3px solid var(--rs);
  border-radius:var(--r-m); background:var(--surface); padding:.7rem .8rem; }
.act-t{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  margin-bottom:.4rem; }
.act-k{ font-family:var(--mono); font-size:.55rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rs); background:var(--rs-tint);
  border:1px solid var(--rs-tint-2); border-radius:20px; padding:.14rem .44rem; }
.act-w{ font-size:.75rem; color:var(--ink-3); }
.act-b{ font-size:.8rem; color:var(--ink-3); line-height:1.5; padding-left:.55rem;
  border-left:2px solid rgba(216,58,82,.32); margin-bottom:.3rem; }
.act-a{ font-size:.84rem; color:var(--ink); line-height:1.55; padding-left:.55rem;
  border-left:2px solid #1f9d57; }
.act-why{ font-size:.76rem; color:var(--ink-2); margin-top:.4rem; line-height:1.5; }
.act.done{ opacity:.55; border-left-color:#1f9d57; }
.act-row{ display:flex; gap:.4rem; margin-top:.55rem; flex-wrap:wrap; }

/* suggestion chips */
.sugg{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.2rem 0 .6rem; }
.sugg button{ font-size:.76rem; font-family:var(--disp); font-weight:500;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--hair);
  border-radius:20px; padding:.36rem .7rem; cursor:pointer;
  transition:.16s var(--ease); text-align:left; }
.sugg button:hover{ border-color:var(--rs); color:var(--rs); background:var(--rs-tint); }

/* composer */
.composer{ flex:none; border-top:1px solid var(--hair); padding-top:.7rem;
  margin-top:.3rem; background:var(--surface); }
.composer-in{ display:flex; gap:.45rem; align-items:flex-end; }
.composer textarea{ flex:1; min-height:42px; max-height:150px; resize:none;
  border-radius:var(--r-m); padding:.6rem .75rem; line-height:1.5; }
.composer .send{ flex:none; width:40px; height:40px; border-radius:var(--r-m);
  border:0; background:var(--rs); color:#fff; font-size:1rem; cursor:pointer;
  transition:.16s var(--ease); }
.composer .send:hover{ background:var(--rs-3); }
.composer .send:disabled{ opacity:.45; cursor:not-allowed; }
.composer-note{ font-size:.7rem; color:var(--ink-3); margin-top:.4rem;
  line-height:1.45; }

/* ░░ 11 · START SHEET ░░
   Was a full page you had to clear before you could build anything, which is
   backwards for a builder — you should land on a resume and be typing. It is
   now a sheet you open from the top bar when you want to bring something in.
   The saved-resume shelf lives inside it; the marketing copy that used to sit
   at the foot of the tool is gone (it belongs on /resume/, not here). */
/* `display:grid` outranks the UA's [hidden]{display:none} — without this the
   sheet stays on screen after it is "closed". Same trap the rail badge hit. */
.startover[hidden]{ display:none; }
.startover{ position:fixed; inset:0; z-index:300; display:grid; place-items:start center;
  padding:clamp(1rem,5vh,3rem) 1rem; overflow-y:auto;
  background:rgba(16,18,22,.55); backdrop-filter:blur(6px);
  animation:fade .18s var(--ease); }
[data-theme="dark"] .startover{ background:rgba(0,0,0,.7); }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.startsheet{ position:relative; width:min(1000px,100%); background:var(--desk);
  border:1px solid var(--hair); border-radius:var(--r-xl); padding:0 clamp(1.1rem,3vw,2.2rem)
  clamp(1.4rem,3vw,2rem); box-shadow:var(--sh-3); animation:rise .24s var(--ease); }
.start-x{ position:absolute; top:.9rem; right:1rem; width:32px; height:32px; z-index:2;
  display:grid; place-items:center; border:1px solid var(--hair); background:var(--surface);
  color:var(--ink-2); border-radius:9px; font-size:1.2rem; line-height:1; cursor:pointer; }
.start-x:hover{ border-color:var(--rs); color:var(--rs); }
.startsheet .masthead{ padding:clamp(1.3rem,3vw,2rem) 0 .9rem; }
.startsheet .mh-brand h1{ font-size:clamp(1.5rem,3.4vw,2.1rem); }
.startsheet .console{ margin-top:1rem; }
.start-shelf{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--hair); }
.start-shelf .ledger{ margin-top:.6rem; max-height:230px; overflow-y:auto; }

/* The top-bar trigger reads as an action, not a back arrow. It has to be a
   flex row with nowrap — the base .sbar-back is a fixed 32px grid cell, and
   adding a label to that clipped the text onto a second line. */
.sbar-back{ width:auto; height:32px; padding:0 .85rem; display:inline-flex;
  align-items:center; gap:.42rem; white-space:nowrap; font-family:var(--disp);
  font-weight:600; font-size:.8rem; line-height:1; }
.sbar-back::after{ content:"Start from…"; }
@media (max-width:620px){ .sbar-back::after{ content:"New"; } }

/* photo control */
.photorow{ display:flex; gap:.8rem; align-items:flex-start; }
.photoprev{ width:76px; height:76px; flex:none; border-radius:12px; overflow:hidden;
  background:var(--sunk); border:1px solid var(--hair); display:grid;
  place-items:center; }
.photoprev img{ width:100%; height:100%; object-fit:cover; display:block; }
.photoprev span{ font-family:var(--mono); font-size:.6rem; color:var(--ink-3); }