/* ObvioHealth Reviews — brand tokens carried over from the mockup.
   Three theme states: light, system-dark, explicit-dark. Every
   colour is defined on bare :root first; the dark blocks only
   redefine. */
:root{
  color-scheme:light;
  --head:'Comfortaa',system-ui,sans-serif;
  --body:'Open Sans',system-ui,-apple-system,sans-serif;
  --bg:#F7F7F8; --surface:#FFFFFF; --surface-2:#F2F2F4;
  --ink:#3C3C41; --ink-strong:#1A1A1A; --muted:#5C5C63; --faint:#6E6E76;
  --rule:#E4E4E8; --rule-strong:#C9C9D0;
  --accent:#D5005F; --accent-ink:#FFFFFF; --accent-soft:#FCE9F1;
  --ok:#1F6F4A; --ok-soft:#E6F4EC;
  --wait:#8A6100; --wait-soft:#F7F0DF;
  --shadow:0 1px 2px rgba(20,20,25,.06),0 8px 24px -12px rgba(20,20,25,.18);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#17171A; --surface:#1E1E21; --surface-2:#26262A;
    --ink:#DCDCE0; --ink-strong:#F2F2F4; --muted:#A6A6AE; --faint:#8E8E97;
    --rule:#2E2E33; --rule-strong:#45454C;
    --accent:#FF4482; --accent-ink:#000000; --accent-soft:#33101F;
    --ok:#4FBF87; --ok-soft:#12291E;
    --wait:#D9A85B; --wait-soft:#2E2612;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#17171A; --surface:#1E1E21; --surface-2:#26262A;
  --ink:#DCDCE0; --ink-strong:#F2F2F4; --muted:#A6A6AE; --faint:#8E8E97;
  --rule:#2E2E33; --rule-strong:#45454C;
  --accent:#FF4482; --accent-ink:#000000; --accent-soft:#33101F;
  --ok:#4FBF87; --ok-soft:#12291E;
  --wait:#D9A85B; --wait-soft:#2E2612;
}
*{box-sizing:border-box}
/* Role gating in this app is the `hidden` attribute, and several
   rules below set display. Without !important the author's
   display wins the cascade and a hidden panel renders in full —
   which for #rosterPanel would mean showing IT controls to
   everyone. This rule is load-bearing, not tidiness. */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);font-weight:400;color:var(--ink-strong);margin:0}
h1{font-size:26px;letter-spacing:-.01em;margin:0 0 4px}
a{color:var(--accent)}
/* Deliberately not a brand colour. This is the one element on the
   page that must not look like it belongs to the design -- it is a
   notice about the system, not a part of it. Amber over the ink
   colour reads in both themes without a second rule. */
.envbar{background:#B45309;color:#fff;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;padding:7px 22px;text-align:center}
.top{background:var(--surface);border-bottom:1px solid var(--rule);padding:0 22px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;padding:13px 0}
.brand .nm{font-family:var(--head);font-size:19px;color:var(--ink-strong);line-height:1}
.brand .sub{font-family:var(--head);font-size:19px;color:var(--accent);line-height:1}
.brand svg{height:25px;width:auto;display:block}
/* The tabs take the auto margin now, so brand sits left and
   everything else rides on the right of the same band. */
.whoami{display:flex;align-items:center;gap:8px;padding:9px 0 9px 18px;
  border-left:1px solid var(--rule);margin-left:6px}
.whoami .av{width:27px;height:27px;border-radius:50%;background:var(--accent);
  color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:10px;flex:none}
.whoami .n{font-weight:600;color:var(--ink-strong);font-size:12.5px;line-height:1.25}
.whoami .r{font-size:10.5px;color:var(--faint);line-height:1.25}
/* Auto / Light / Dark. Segmented so the current state is visible
   without opening anything -- a single icon that toggles hides
   which of the three you are actually in. */
.themer{display:flex;border:1px solid var(--rule-strong);border-radius:5px;overflow:hidden}
.themer button{font-family:inherit;font-size:10.5px;letter-spacing:.02em;padding:4px 8px;
  background:var(--surface);color:var(--muted);border:0;border-right:1px solid var(--rule);
  cursor:pointer;line-height:1.5}
.themer button:last-child{border-right:0}
.themer button:hover{color:var(--ink-strong)}
.themer button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.themer button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
main{max-width:1180px;margin:0 auto;padding:26px 22px 70px}
.dek{color:var(--muted);font-size:14px;margin:0 0 24px;max-width:70ch}

/* ---- section tabs ----
   In the top bar, taking the auto margin so the brand stays left.
   A tab is a way to find a section, never a permission: everything
   behind one is also gated by route rule and an in-function role
   check. The scrollbar is hidden rather than styled -- on a narrow
   window the row scrolls sideways, and a visible bar inside a
   32-pixel-tall band reads as a rendering fault. */
.tabs{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);
  padding:15px 14px 12px;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--ink-strong)}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.view>.panel:first-child{margin-top:0}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  margin-bottom:22px;overflow:hidden}
.ph{padding:15px 22px;border-bottom:1px solid var(--rule);display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.ph h2{font-size:17px}
.ph .c{font-size:12.5px;color:var(--muted)}
.ph .sp{margin-left:auto;display:flex;gap:8px}
.body{padding:18px 22px}
.idblock{background:var(--surface-2);border:1px solid var(--rule);border-radius:6px;
  padding:14px 16px;display:grid;gap:9px}
.idrow{display:grid;gap:2px 18px}
@media(min-width:560px){.idrow{grid-template-columns:190px 1fr;align-items:baseline}}
.idk{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:600}
.idv{color:var(--ink-strong);font-size:13.5px}
.btn{border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink-strong);
  padding:7px 14px;border-radius:5px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.55;cursor:default;border-color:var(--rule)}
/* Destructive, and dressed as such -- outlined rather than filled,
   so it reads as available without competing with the primary
   action beside it. */
.btn.danger{color:var(--gone,#8C3B3B);border-color:currentColor}
.btn.danger:hover{background:var(--gone-soft,#FBEEEE);border-color:currentColor}
.rowacts{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}

/* ---- the review form ----
   Reads as a document you write into, not a settings screen: the
   question at reading size, its guidance under it, the box under
   that. One column, because a review is answered in order. */
.savestate{font-size:11.5px;color:var(--faint);min-width:64px;text-align:right}
.fsec{border-top:1px solid var(--rule);padding:20px 0 4px}
.fsec:first-of-type{border-top:0}
.fsh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.fsh h4{font-family:var(--head);font-weight:400;font-size:17px;color:var(--ink-strong);margin:0}
.fsh .c{font-size:11.5px;color:var(--faint);margin-left:auto}
.fintro{font-size:13px;color:var(--muted);line-height:1.65;margin:0 0 16px;max-width:70ch;
  padding-left:11px;border-left:2px solid var(--rule-strong)}
.rpt{font-size:12.5px;color:var(--ink-strong);margin:18px 0 8px;padding-bottom:5px;
  border-bottom:1px solid var(--rule)}
.rpt span{color:var(--muted);font-weight:400}
.fq{margin:0 0 18px;max-width:74ch}
.fl{display:block;font-size:14.5px;color:var(--ink-strong);font-weight:600;line-height:1.45}
.req{color:var(--accent);margin-left:3px;font-weight:400}
.fh{font-size:12.5px;color:var(--muted);line-height:1.6;margin:3px 0 7px;max-width:68ch}
.fin{font-family:inherit;font-size:14px;line-height:1.6;width:100%;box-sizing:border-box;
  padding:9px 11px;border-radius:5px;border:1px solid var(--rule-strong);
  background:var(--bg);color:var(--ink-strong);resize:vertical}
.fin:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fin:disabled{background:var(--surface);color:var(--muted);cursor:default;resize:none}
select.fin,input.fin[type="date"]{width:auto;min-width:220px}
.carried{font-size:14px;color:var(--ink-strong);background:var(--sunk,var(--surface));
  border:1px solid var(--rule);border-radius:5px;padding:9px 11px;margin:0;line-height:1.6}

/* The rating. Six segments, the number large enough to click on a
   phone and the label under it so nobody has to remember what a 4
   means. "Not observed" is visually apart from 1-5 because it is
   not the bottom of the scale. */
.rate{display:flex;gap:0;border:1px solid var(--rule-strong);border-radius:6px;overflow:hidden;
  max-width:560px}
.rateopt{flex:1 1 0;min-width:0;background:var(--surface);border:0;border-right:1px solid var(--rule);
  padding:8px 4px 7px;cursor:pointer;font-family:inherit;display:grid;gap:1px;justify-items:center}
.rateopt:last-child{border-right:0;background:var(--bg)}
.rateopt:hover:not(:disabled){background:var(--accent-soft)}
.rateopt .rv{font-size:16px;color:var(--ink-strong);font-variant-numeric:tabular-nums;line-height:1.2}
.rateopt .rl{font-size:9.5px;color:var(--muted);line-height:1.2;text-align:center}
.rateopt.on{background:var(--accent)}
.rateopt.on .rv,.rateopt.on .rl{color:var(--accent-ink)}
.rateopt:disabled{cursor:default;opacity:.6}
.rateopt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:560px){.rateopt .rl{display:none}}

/* ---- the year picker on a review ----
   Segmented rather than a dropdown: there are two or three of
   these, and which years exist is itself worth seeing. */
.years{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap}
.yr{font-family:inherit;font-size:12.5px;padding:6px 12px;border-radius:5px;cursor:pointer;
  border:1px solid var(--rule-strong);background:var(--surface);color:var(--muted);
  display:flex;align-items:baseline;gap:7px}
.yr span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.yr:hover{color:var(--ink-strong)}
.yr.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.yr.on span{color:var(--accent-ink);opacity:.8}
.yr:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.yrsel{display:flex;align-items:center;gap:9px}
.yrsel select{font-family:inherit;font-size:13px;padding:6px 10px;border-radius:5px;
  border:1px solid var(--rule-strong);background:var(--bg);color:var(--ink-strong)}
.yrsel select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.datesedit{padding-top:4px}
.datesedit .fld input:disabled{background:var(--surface);color:var(--muted);cursor:not-allowed}
/* ---- career path ---- */
.chk{padding:14px 0}
.chkdue{font-size:11.5px;color:var(--faint);font-weight:400;margin-left:9px}
.chk .grid2{margin-bottom:0}
.chk textarea.fin{min-height:4.4em}

/* ---- competencies, side by side ----
   HR put the employee reflection and the manager observation in
   two columns of one table so they are read against each other at
   the 1:1. Same intent here, collapsing to one column on a narrow
   screen -- stacked is better than two unreadable columns. */
.comp{padding:16px 0;border-bottom:1px solid var(--rule)}
.comp:last-child{border-bottom:0}
.compname{margin:0;font-size:14.5px;font-weight:600;color:var(--ink-strong);line-height:1.45}
.compcols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.compcol{min-width:0}
.compwho{margin:0 0 5px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
@media (max-width:760px){.compcols{grid-template-columns:1fr;gap:14px}}

/* ---- a locked answer reads as a record ---- */
.answered{font-size:14px;color:var(--ink-strong);line-height:1.65;background:var(--surface);
  border:1px solid var(--rule);border-radius:5px;padding:10px 13px}
.answered p{margin:0 0 8px}
.answered p:last-child{margin-bottom:0}
.answered ul{margin:0;padding-left:20px}
.answered li{margin:0 0 6px;line-height:1.6}
.answered li:last-child{margin-bottom:0}
.answered.none,.answered .none{color:var(--faint);font-style:italic;border-style:dashed}
.revform{border-top:1px solid var(--rule);margin-top:14px;padding-top:14px}
.clash{margin-top:12px}

/* ---- Wins ---- */
.winadd{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:start;
  padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.winadd input[type="date"]{width:auto}
.winadd .btn{align-self:start}
.win{display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rule)}
.win:last-child{border-bottom:0}
.wdate{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.wtext{font-size:14px;color:var(--ink-strong);line-height:1.6;white-space:pre-wrap}
/* The row controls stay out of the way until the row is hovered or
   something inside it has focus -- a log should read as a list,
   not as a list of buttons. */
.wacts{display:flex;gap:10px;opacity:0;transition:opacity .12s}
.win:hover .wacts,.win:focus-within .wacts,.win.editing .wacts{opacity:1}
.win.editing{align-items:start}
@media (prefers-reduced-motion:reduce){.wacts{transition:none}}
@media (max-width:640px){
  .winadd{grid-template-columns:1fr}
  .win{grid-template-columns:1fr;gap:4px}
  .wacts{opacity:1}
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The roster's expand control. A button for keyboard and screen-reader
   behaviour, styled as a link because it reveals rows in place rather
   than performing an action. */
.btn.linkish{border:none;background:none;color:var(--accent);padding:0;font:inherit;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.btn.linkish:hover{border-color:transparent;color:var(--ink-strong)}
.btn.linkish:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;
  letter-spacing:.04em;padding:4px 9px;border-radius:20px;white-space:nowrap}
.chip .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.wait{background:var(--wait-soft);color:var(--wait)}
.chip.you{background:var(--accent);color:var(--accent-ink)}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:10px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--rule)}
td{padding:11px 16px;border-bottom:1px solid var(--rule);font-size:13.5px}
tr:last-child td{border-bottom:0}
.note{font-size:12.5px;color:var(--muted);padding:14px 22px;line-height:1.6;margin:0}
.err{background:var(--accent-soft);border-left:3px solid var(--accent);padding:12px 16px;
  border-radius:4px;font-size:13px;color:var(--ink-strong);margin:0 0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.flush{margin-top:0}
.empty{margin:0;color:var(--muted)}
.summary{margin-bottom:18px}
.foot{padding:14px 0 0}
.logout{margin-left:14px;font-size:12px;font-weight:600;color:var(--muted);
  text-decoration:none;border:1px solid var(--rule-strong);border-radius:5px;padding:5px 11px}
.logout:hover{border-color:var(--accent);color:var(--accent)}
.grid2{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:16px}
.fld{display:grid;gap:5px}
.fld input,.fld select{font-family:inherit;font-size:13.5px;padding:8px 10px;border-radius:5px;
  border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink-strong)}
.fld input:focus-visible,.fld select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.block{border-left:3px solid var(--accent);background:var(--accent-soft);padding:12px 15px;
  border-radius:4px;margin:0 0 12px;font-size:13px;color:var(--ink-strong)}
.warn{border-left:3px solid var(--wait);background:var(--wait-soft);padding:12px 15px;
  border-radius:4px;margin:0 0 12px;font-size:13px;color:var(--ink-strong)}
.good{border-left:3px solid var(--ok);background:var(--ok-soft);padding:12px 15px;
  border-radius:4px;margin:0 0 12px;font-size:13px;color:var(--ink-strong)}
.who-list{margin:7px 0 0;padding-left:18px;font-size:12.5px;color:var(--muted)}

/* ================================================================
   A COMPLETED REVIEW READS AS A DOCUMENT

   Everything below is scoped to .reading, which renderReview sets
   only on a historical review. The live form is untouched: it is
   answered top to bottom in one column and should stay that way.

   A signed review is read differently. It is long -- the longest YE2025
   is about twelve thousand pixels -- it is never edited, and the
   thing a reader wants is to find a section and take in a prompt
   and its answer together. So: a sticky section nav, numbered
   headings, and the prompt beside its answer rather than above it,
   which is the shape HR's Word table had in the first place.
   ================================================================ */

/* ---- section nav ----
   Sticky at the top of the window. The top bar does not stick, so
   there is nothing to sit under. */
.docnav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:2px;
  margin:0 0 20px;overflow-x:auto;scrollbar-width:none;
  background:var(--surface);border-bottom:1px solid var(--rule)}
.docnav::-webkit-scrollbar{display:none}
.docnav .lbl{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);padding-right:12px}
.docnav button{flex:none;background:none;border:0;border-bottom:2px solid transparent;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  padding:11px 9px 9px;cursor:pointer;white-space:nowrap}
.docnav button:hover{color:var(--ink-strong)}
.docnav button[aria-current="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.docnav button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
@media (max-width:640px){.docnav .lbl{display:none}}

/* ---- the cover block ----
   Who this was, when, and under whom -- as it was at the time, not
   as the roster reads today. It opens the document, so it is
   allowed to look like a cover rather than another grey table. */
.revhead{border:1px solid var(--rule);border-left:4px solid var(--accent);border-radius:8px;
  overflow:hidden;margin:0 0 24px;background:var(--surface)}
.revhead .rht{padding:15px 20px 14px;background:var(--accent-soft)}
.revhead .rht h3{font-family:var(--head);font-weight:400;font-size:19px;color:var(--ink-strong);margin:0}
.revhead .rht p{font-size:12.5px;color:var(--muted);margin:4px 0 0;line-height:1.55;max-width:80ch}
.revhead .rhg{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:0 24px;padding:16px 20px 6px}
.revhead .rhk{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}
.revhead .rhv{font-size:13.5px;color:var(--ink-strong);margin:2px 0 14px}

/* ---- section headings ---- */
.reading .fsec{border-top:0;padding:8px 0 10px;scroll-margin-top:64px}
.reading .fsh{gap:11px;align-items:center;padding-bottom:10px;margin-bottom:16px;
  border-bottom:2px solid var(--accent-soft)}
.reading .fsh h4{font-size:18px}
.reading .fsh .c{margin-left:auto}
.fsn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.reading .fintro{margin-bottom:20px}

/* ---- prompt beside answer ----
   HR's template was a two-column table and it read well. Below
   900px there is no room for two columns, and stacked is better
   than two unreadable ones. */
.rq{display:grid;grid-template-columns:290px minmax(0,1fr);column-gap:30px;
  align-items:start;margin:0 0 20px;max-width:none}
@media (max-width:899px){.rq{grid-template-columns:1fr;row-gap:8px}}
.rqp{min-width:0}
.rqp .fl{margin:0}
.rqp .fh{margin:4px 0 0;max-width:40ch}
.rqa{min-width:0}
/* Who wrote it. In a full document read this is the question people
   actually have, and the review no longer has to be read in stage
   order to answer it. */
.rqrole{display:inline-block;margin:7px 0 0;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.rqrole.mgr{color:var(--accent)}
.reading .answered{background:var(--surface-2);border-left:3px solid var(--rule-strong)}
.reading .answered.mgr{border-left-color:var(--accent)}
/* An unanswered box in a signed review is a fact about the
   document, not a field somebody forgot. It gets a line, not the
   same footprint as three paragraphs of writing. */
.unans{margin:0;padding:2px 0;font-size:13px;font-style:italic;color:var(--faint)}

/* ---- repeated blocks: goals, development items ----
   Three goals in a row all headed by a thin grey rule read as one
   long list. Headed as cards, they read as three things. */
.reading .rpt{margin:24px 0 14px;padding:9px 14px;border:0;border-radius:6px;
  background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700}
.reading .rpt strong{font-weight:700}
.reading .rpt span{font-weight:400;opacity:.85}

/* ---- the author of a whole section ----
   Four prompts in the Executive Summary all tagged "Agreed at the
   1:1" is one fact printed four times. When a section has a single
   author it is said once, in the heading. */
.fsauth{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);margin-left:auto;white-space:nowrap}
.fsauth+.chip{margin-left:10px}

/* ---- a section nobody filled in ----
   Four empty boxes is what a blank Executive Summary looked like,
   and it opened the document. The fact is one line; the prompts are
   worth keeping, because "what would have gone here" is the
   question a reader actually has. */
.emptysec{border:1px dashed var(--rule-strong);border-radius:8px;background:var(--surface-2);
  padding:14px 18px;margin:0 0 6px}
.emptysec p{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.emptysec ul{margin:9px 0 0;padding-left:20px}
.emptysec li{font-size:13px;color:var(--ink-strong);margin:0 0 4px;line-height:1.5}
.emptysec li:last-child{margin-bottom:0}

/* ---- competencies ---- */
.reading .comp{border:1px solid var(--rule);border-radius:8px;padding:16px 18px;
  margin:0 0 14px;background:var(--surface)}
.reading .comp:last-child{border-bottom:1px solid var(--rule)}
.reading .compname{font-size:15px}
.reading .compcol{display:flex;flex-direction:column}
.reading .compcol .answered{border-left-width:3px;flex:1}
/* Accent on the manager's side only. Both sides in accent would
   make it decoration; one side makes it the answer to "who said
   this". */
.reading .compcol.mgr .compwho{color:var(--accent);font-weight:700}

/* ---- the section state chip ----
   Nine sections all chipped "Locked" is nine copies of one fact.
   How much of each section was actually filled in is the thing
   worth seeing at a glance. */
.chip.lock{background:var(--surface-2);color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--rule-strong)}
.chip.part{background:var(--wait-soft);color:var(--wait)}

/* ================================================================
   MY TEAM

   The queue first, one review second. The table is the screen a
   manager lives on during a cycle, so the row that is waiting on
   them has to be findable without reading every stage name.
   ================================================================ */
.trow-wait{background:var(--accent-soft)}
.trow-wait td{border-bottom-color:var(--rule)}
.tname{font-weight:600;color:var(--ink-strong)}
.tmeta{font-size:11.5px;color:var(--faint);display:block;margin-top:2px}
.tstage{display:inline-flex;align-items:center;gap:6px}
td.tact{text-align:right;white-space:nowrap}

/* The context a manager reads before writing anything: what the
   person recorded during the year, and the manager's own private
   notes. Folded away by default -- they are reference, not the
   task. */
.ctxwrap{display:grid;gap:12px;margin:0 0 20px}
@media (min-width:860px){.ctxwrap{grid-template-columns:1fr 1fr}}
.ctx{border:1px solid var(--rule);border-radius:8px;background:var(--surface);overflow:hidden}
.ctx>summary{list-style:none;cursor:pointer;padding:11px 15px;font-size:12.5px;font-weight:600;
  color:var(--ink-strong);background:var(--surface-2);display:flex;align-items:center;gap:9px}
.ctx>summary::-webkit-details-marker{display:none}
.ctx>summary::before{content:'▸';color:var(--muted);font-size:11px}
.ctx[open]>summary::before{content:'▾'}
.ctx>summary .n{margin-left:auto;font-weight:400;color:var(--faint);font-size:11.5px}
.ctx .inner{padding:12px 15px}
.ctx .e{padding:9px 0;border-bottom:1px solid var(--rule);font-size:13px;line-height:1.6;
  color:var(--ink-strong);white-space:pre-wrap}
.ctx .e:last-child{border-bottom:0;padding-bottom:0}
.ctx .e .d{display:block;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--accent);
  margin-bottom:3px}
.ctx .none{font-size:12.5px;color:var(--muted);margin:0}

/* One competency, as a card. The rule-between-rows treatment the
   1:1 view uses reads as one long list when there are boxes to
   fill in between each pair. */
#mrBody .comp{border:1px solid var(--rule);border-radius:8px;padding:16px 18px;
  margin:0 0 14px;background:var(--surface)}
#mrBody .comp:last-child{border-bottom:1px solid var(--rule)}
#mrBody .compname{font-size:15px}

/* What they submitted, foldable. Open on the first review of a
   sitting and shut for the rest of it, because a manager with
   twenty of these reads the first one in full and then wants the
   boxes. */
.subm{border:1px solid var(--rule);border-radius:8px;background:var(--surface);
  margin:0 0 22px;overflow:hidden}
.subm>summary{list-style:none;cursor:pointer;padding:13px 18px;background:var(--surface-2);
  display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:400;
  font-size:16px;color:var(--ink-strong)}
.subm>summary::-webkit-details-marker{display:none}
.subm>summary::before{content:'▸';color:var(--muted);font-size:12px;font-family:var(--body)}
.subm[open]>summary::before{content:'▾'}
.subm>summary .c{margin-left:auto;font-family:var(--body);font-size:12px;color:var(--faint)}
.subm .inner{padding:6px 18px 16px}

/* Their half and yours, on one competency. Same shape as the
   completed-review view, because it is the same comparison. */
.mrsplit{display:grid;gap:14px;margin-top:10px}
@media (min-width:820px){.mrsplit{grid-template-columns:1fr 1fr}}
.mrside{min-width:0;display:flex;flex-direction:column}
.mrwho{margin:0 0 6px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.mrside.you .mrwho{color:var(--accent);font-weight:700}
/* Their answer sits at the top of its column and stops there. It
   was set to stretch to the height of the boxes beside it, which
   turned a one-word rating chip into an empty grey slab. */
.mrside .answered{background:var(--surface-2);border-left:3px solid var(--rule-strong)}
.mrside .answered+.answered{margin-top:10px}
.mrside .fq{margin-bottom:12px}
.mrside .fq:last-child{margin-bottom:0}

/* ================================================================
   SIGNING

   The one screen in the app where the thing being recorded is not
   an answer but an act. It reads as a document footer rather than
   another form: the sentence being agreed to at reading size, the
   name box under it, and the fingerprint of what is being signed
   set quietly beneath -- present because it is the thing that makes
   the signature mean something later, small because nobody reads a
   hash.
   ================================================================ */
.sigwrap{max-width:62ch}
.ack{
  font-size:14.5px;line-height:1.7;color:var(--ink-strong);
  padding:16px 18px;background:var(--surface-2);border-radius:6px;
  border-left:3px solid var(--accent);margin:18px 0 0;
}
.signrow{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:0 0 6px}
.signrow .fld{flex:1 1 260px}
.namewarn{
  font-size:12.5px;color:var(--wait);background:var(--wait-soft);
  padding:8px 12px;border-radius:4px;margin:8px 0 0;
}
.fingerprint{
  font-size:11.5px;color:var(--faint);margin:14px 0 0;
  font-variant-numeric:tabular-nums;
}
.sigacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.sigdecline{border-top:1px solid var(--rule);margin-top:22px;padding-top:18px}
.sigdecline summary{
  list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.sigdecline summary::-webkit-details-marker{display:none}
.sigdecline summary::before{content:'▸';font-size:11px;color:var(--faint)}
.sigdecline[open] summary::before{content:'▾'}
.sigdecline .inner{padding-top:14px}

/* Who has signed, and whether what they signed is still what the
   review says. */
.signed{display:grid;gap:10px;margin:0 0 20px}
.signed .s{
  display:grid;gap:2px 14px;padding:13px 15px;border:1px solid var(--rule);
  border-radius:6px;background:var(--surface);
}
@media (min-width:620px){.signed .s{grid-template-columns:150px minmax(0,1fr)}}
.signed .who{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.signed .what{font-size:13.5px;color:var(--ink-strong)}
.signed .what b{font-weight:700}
.signed .meta{font-size:12px;color:var(--faint);margin-top:3px}
.signed .s.declined{border-color:var(--wait-soft);background:var(--wait-soft)}
.signed .s.broken{border-color:var(--accent)}

/* ---- the 1:1 ----
   The executive summary is assembled from what is already written,
   so the button that does the assembling sits with it rather than
   in the page chrome. */
.pullbar{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:13px 16px;background:var(--surface-2);border-radius:6px;margin:0 0 20px;
}
.pullbar p{margin:0;font-size:13px;color:var(--muted);flex:1 1 280px;line-height:1.55}

/* ---- the question-set proof-read screen ----
   Laid out as a document, not a form. The reader is checking
   wording, so the wording is what carries weight: the question at
   reading size, the helper text under it in the same relationship
   it will have on the real form, and the structural notes set back
   so they never compete with the copy being checked. */
.tpleditor{border-top:1px solid var(--rule);margin-top:18px;padding-top:6px}
.tpleditor>.ph{padding:14px 0 12px}
.tpleditor h3{font-size:16px}
.tpleditor>.ph .sp{margin-left:auto}
.tplsec{border:1px solid var(--rule);border-radius:6px;padding:4px 20px 16px;margin:0 0 12px;
  background:var(--surface)}
.tplsh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 0 4px;
  border-bottom:1px solid var(--rule);margin-bottom:12px}
.tplsh h4{font-family:var(--head);font-weight:400;font-size:15px;color:var(--ink-strong);margin:0}
.tpln{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;
  flex:none}
.tplwho{font-size:11.5px;color:var(--faint);margin-left:auto}
.tplsh select{font-family:inherit;font-size:12.5px;padding:5px 8px;border-radius:5px;margin-left:auto;
  border:1px solid var(--rule-strong);background:var(--bg);color:var(--ink-strong)}
.q{padding:9px 0;border-bottom:1px solid var(--rule)}
.q:last-child{border-bottom:none;padding-bottom:2px}
.qt{margin:0;font-size:14px;color:var(--ink-strong);line-height:1.45}
.qh{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}
.qmeta{margin:8px 0 2px;font-size:11.5px;color:var(--faint);line-height:1.6}
/* HR's section intro — the paragraph that explains the section to
   whoever is filling it in. It belongs above the questions and in
   the same weight it has in her document: guidance, not a question. */
.qintro{margin:2px 0 10px;font-size:12.5px;color:var(--muted);line-height:1.65;
  padding-left:11px;border-left:2px solid var(--rule-strong)}
.warn table{margin:10px 0 4px}
.warn th{background:transparent;border-bottom-color:var(--rule-strong)}
.warn td{border-bottom-color:var(--rule)}
.warn select{font-family:inherit;font-size:12.5px;padding:5px 8px;border-radius:4px;
  border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink-strong)}
.warn .btn{padding:5px 11px;font-size:12.5px}

/* ---------- the 360 round ----------

   Three small additions rather than a new visual language: the
   add-a-reviewer row, the reviewer-load warning, and the quote
   block the unattributed responses are rendered as. Everything
   else on those screens is .fq / .fl / .fh / .chip, the same as
   every other form in the app. */
.rvadd{border-top:1px solid var(--rule);padding-top:14px;margin-top:6px}
.rvrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;gap:9px;align-items:start}
@media (max-width:720px){.rvrow{grid-template-columns:1fr}}

/* How many 360 requests this person is already carrying across the
   company. The number is only useful if a heavy one is visible
   without reading the column, so six or more takes the wait colour
   -- HR's bottleneck last year was one person holding nine. */
td.heavy{color:var(--wait);font-weight:600}

/* A 360 answer, shown to the manager and later to the employee.
   Quoted rather than laid out as a field value, because it is
   somebody's words and not the app's. */
.resp{margin:7px 0 0;padding:9px 13px;font-size:13.5px;line-height:1.65;
  color:var(--ink-strong);background:var(--surface);border-left:3px solid var(--rule-strong);
  border-radius:0 5px 5px 0;white-space:pre-wrap}
.resp:first-of-type{margin-top:5px}
.fopt{font-weight:400;color:var(--muted)}

/* changed since you last looked */
.btn .newdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);
  margin-left:7px;vertical-align:middle;box-shadow:0 0 0 2px var(--bg)}

/* finished sections fold to their heading */
.fsec.foldable>.fsh{cursor:pointer;user-select:none}
.fsec.foldable>.fsh:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.fsh .foldstate{margin-left:auto}
.fsh .chev{width:8px;height:8px;margin-left:12px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .15s}
.fsec.folded>.fsh .chev{transform:rotate(-45deg)}
.fsec.folded>:not(.fsh){display:none}
.fsec.folded{padding-bottom:14px}
.docnav .ck{color:var(--ok)}
.mrmine{font-size:16px;margin:22px 0 4px}