/* The three screens of round 2e -- Dashboard, People, Settings -- and the chart
   primitives they share (charts.js). Linked after components.css from index.html and
   kit.html. Nothing here names a colour: every value is a token from tokens.css.

   Class names are scoped to their screen (`.dash`, `.people`, `.settings`) or carry a
   prefix (`.dcard`, `.prow`, `.setsec`), because the Library and the Meeting are being
   built beside this file and `.card`, `.row` and `.toolbar` belong to them. */

/* kit.html only: the two theme panes stacked, because a dashboard tile and a people
   row want the width of a screen rather than half of one. `.scr` is the kit's `.pane`
   under another name -- kit.spec.js counts `.pane` per theme and a second pair would
   make that locator ambiguous. */
.panes.stack{grid-template-columns:minmax(0,1fr)}
.scr{background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-4);padding:var(--sp-3);display:grid;gap:var(--sp-3);
  align-content:start;min-width:0;overflow:hidden}
.scr>.lbl{color:var(--ink-2)}

/* ------------------------------------------------------------------ small utilities */
.vstack{display:grid;gap:var(--sp-3)}
.chiprow{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.scroller{overflow-x:auto;max-width:100%}
.badge{font:500 10px/14px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-1);
  padding:0 5px;font-style:normal;white-space:nowrap}
.nothing{color:var(--ink-2);font-weight:300;font-size:13px;line-height:19px;max-width:62ch}
table.dtable{border-collapse:collapse;width:100%;font-size:13px}
table.dtable th{text-align:left;font:500 11px/14px var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);padding:6px 8px;border-bottom:1px solid var(--line)}
table.dtable td{padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.dtable tr:last-child td{border-bottom:0}
table.dtable td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
table.dtable td .pass{color:var(--ok)}
table.dtable td .fail{color:var(--rec-t)}

/* ------------------------------------------------------------------------- charts */
/* One scale per picture, anchored at zero; the viewBox height is the pixel height, so
   a horizontal rule is one pixel and only the x axis stretches (charts.js). */
.chart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-2);align-items:stretch}
.chart .plot{min-width:0;display:grid;gap:var(--sp-1)}
.bars{display:block;width:100%;overflow:visible}
.bars .axis{stroke:var(--line-2);stroke-width:1}
.bars .bar{fill:var(--ink);opacity:.24;transition:opacity var(--t) var(--ease)}
.bars .bar.quiet{opacity:.12}      /* weekends: present, quieter */
.bars .bar.now{opacity:.78}        /* today */
.bars .bar.solid{opacity:.85}      /* a bar with a hue of its own: stages, not ink */
.bars .bar:hover{opacity:.9}
.spark{display:block;width:100%}
.spark .area{fill:var(--ink);opacity:.1}
.spark .line{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.6}
.yax{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  font:10px/12px var(--mono);color:var(--ink-2);padding-block:0 14px}
.xax{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
  font:10px/14px var(--mono);color:var(--ink-2)}
.xax span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:4px var(--sp-4);font-size:12px;color:var(--ink-2);
  font-weight:300;margin-top:var(--sp-1)}
.legend .lg{display:inline-flex;align-items:center;gap:6px}
.legend .lg i{width:8px;height:8px;border-radius:2px;background:var(--h,var(--ink-3));flex:none}
.legend .lg b{font-weight:500;color:var(--ink)}
.legend .lg.bad{color:var(--rec-t)}
.gauge{display:grid;gap:5px}
.gaugeh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);font-size:13px}
.gaugeh b{font-size:13px;color:var(--ink)}
.gauge .track{display:block;height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.gauge .track b{display:block;height:100%;width:calc(var(--v,0)*100%);border-radius:3px;
  background:var(--h,var(--ink));opacity:.8;transition:width var(--t-2) var(--ease)}
.gauge .sub{font-size:11px;line-height:16px;color:var(--ink-2);font-weight:300}

/* ---------------------------------------------------------------------- dashboard */
.dash{display:grid;gap:var(--sp-4);align-content:start;max-width:1240px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
@media (max-width:1000px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* FIX (plan 028 finding A6): one tile per row under 520 px meant four tiles of ~110 px
   -- 440 px of numbers -- before the first chart, so a phone saw nothing else above
   the fold. Two columns hold down to 360 px; the single column is kept for the
   narrowest phones, where a 170 px tile really cannot carry a subline. */
@media (max-width:359px){.kpis{grid-template-columns:1fr}}
.kpi{padding:14px 16px 12px;border-radius:var(--r-4);display:grid;gap:var(--sp-1);
  align-content:start;min-height:104px}
.kpi b{font:500 30px/34px var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi b small{font-size:15px;color:var(--ink-2);margin:0 4px 0 1px;letter-spacing:0}
/* ...and the value comes down with the column, so "1 h 20 m" and its subline still fit
   a half-width tile instead of pushing out of it. After `.kpi b small`, or the plain
   rule below would win the tie on specificity by being the later one. */
@media (max-width:520px){.kpi b{font-size:24px;line-height:28px}.kpi b small{font-size:13px}}
.kpi .sub{font-size:12px;line-height:17px;color:var(--ink-2);font-weight:300}
.kpi.warn b{color:var(--warn)}
.kpi.bad b{color:var(--rec-t)}
/* `align-items:start` (plan 028 finding A7): a grid row stretches its items by default,
   so the short To-dos card was drawn as tall as the Spend card beside it and finished
   with 145 px of empty box under its last line. A card is as tall as what is in it. */
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);
  align-items:start}
@media (max-width:1000px){.dgrid{grid-template-columns:1fr}}
.dcard{padding:14px 16px 16px;border-radius:var(--r-4);display:grid;gap:var(--sp-3);
  align-content:start;min-width:0;overflow:hidden}
.dcard.wide{grid-column:1/-1}
.ch{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.ch h3{font-size:13px;line-height:18px;font-weight:500}
.ch .muted{font-size:12px;font-weight:300}
.dash .foot{font-size:12px;font-weight:300}

/* figures: two or three numbers side by side inside a card */
.figures{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6)}
.fig{display:grid;gap:2px;min-width:0}
.fig b{font:500 20px/24px var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fig .sub{font-size:11px;line-height:15px;color:var(--ink-2);font-weight:300}

/* to-dos */
.todostats{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5)}
.tstat{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--ink-2)}
.tstat b{font-size:17px;line-height:22px;color:var(--ink);font-weight:500}
.tstat.over b{color:var(--warn)}
.todolist{display:grid;gap:2px}
/* A row, always inside `.todolist`. Scoped, because R2d's Summary tab has a `.todo`
   of its own (the list, `.todos` there) and every page loads both stylesheets. */
.todolist .todo{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:var(--sp-2);
  align-items:start;padding:6px 8px;margin-inline:-8px;border-radius:var(--r-2);
  transition:background var(--t) var(--ease)}
.todolist .todo:hover{background:var(--glass-2)}
.todolist .todo .txt{display:grid;gap:1px;min-width:0}
.todolist .todo .txt b{font:400 13px/19px var(--sans)}
.todolist .todo .meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--ink-2)}
.todolist .todo .meta a{color:var(--ink-2);text-decoration:none}
.todolist .todo .meta a:hover{color:var(--ink);text-decoration:underline}
.todolist .todo .due{font:12px/18px var(--mono);color:var(--ink-2);white-space:nowrap}
.todolist .todo .due.soon{color:var(--ink)}
.todolist .todo .due.over{color:var(--warn)}
.todolist .todo.done .txt b{text-decoration:line-through;color:var(--ink-2)}
.tickbox{all:unset;cursor:pointer;width:18px;height:18px;margin-top:1px;display:grid;
  place-items:center;border:1px solid var(--line-2);border-radius:var(--r-1);
  color:transparent;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.tickbox:hover{border-color:var(--ink-2);color:var(--ink-2)}
.tickbox[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.todolist .more{font-size:12px;font-weight:300;padding-top:var(--sp-1)}

/* pipeline + attention */
.stagetable td .sdot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--h,var(--ink-3));margin-right:7px}
.attn{display:grid;gap:2px}
.ai{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;
  padding:8px;margin-inline:-8px;border-radius:var(--r-2);font:300 13px/19px var(--sans);
  transition:background var(--t) var(--ease)}
.ai:hover{background:var(--glass-2)}
.ai .dot{width:7px;height:7px;border-radius:50%;background:var(--h,var(--ink-3))}
.ai .txt{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2}
.ai b{font-weight:500}
@media (max-width:560px){
  .ai{grid-template-columns:8px minmax(0,1fr);row-gap:6px}
  .ai .chip{grid-column:2}
}

/* -------------------------------------------------------------------------- people */
.people,.person,.settings{max-width:1240px}
.peoplebar{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-3)}
.psearch{width:min(360px,100%);height:32px;display:flex;align-items:center;
  padding-inline:10px;border-radius:var(--r-3)}
.psearch input{all:unset;flex:1;min-width:0;font:13px/18px var(--sans);color:var(--ink)}
.psearch input::placeholder{color:var(--ink-2)}
.plist{display:grid;border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:14px minmax(140px,1fr) auto auto auto auto;
  gap:var(--sp-3);align-items:center;padding:8px;border-bottom:1px solid var(--line);
  min-height:44px}
.prow:hover{background:var(--glass-2)}
.prow.head{min-height:0;padding-block:4px;background:none}
.prow .nm{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.prow .nm a{font:500 14px/20px var(--sans);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .nm a:hover{text-decoration:underline}
.prow .nm.editing{gap:var(--sp-2)}
.prow .nm.editing .field{height:30px}
.prow .n{font:12px/16px var(--mono);color:var(--ink-2);text-align:right;white-space:nowrap}
.prow .acts{display:flex;gap:var(--sp-1);flex-wrap:wrap;justify-content:flex-end}
.sw{width:10px;height:10px;border-radius:50%;background:var(--h,var(--ink-3));flex:none;display:block}
button.sw{all:unset;cursor:pointer;width:14px;height:14px;border-radius:50%;
  background:var(--h,var(--ink-3));box-shadow:0 0 0 1px var(--line-2)}
button.sw:hover{box-shadow:0 0 0 3px var(--accent-soft)}
@media (max-width:900px){
  .prow{grid-template-columns:14px minmax(0,1fr) auto;row-gap:6px}
  .prow .n.seen,.prow.head{display:none}
  .prow .acts{grid-column:1/-1;justify-content:flex-start}
}
.swatches{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.swatch{all:unset;cursor:pointer;width:32px;height:32px;border-radius:var(--r-2);
  background:var(--h);box-shadow:inset 0 1px 0 var(--hl),0 0 0 1px var(--line-2)}
.swatch:hover{box-shadow:inset 0 1px 0 var(--hl),0 0 0 3px var(--accent-soft)}
.picklist{display:grid;gap:2px;max-height:240px;overflow:auto}
.pickopt{all:unset;cursor:pointer;display:grid;grid-template-columns:10px minmax(0,1fr) auto;
  gap:var(--sp-2);align-items:center;padding:7px 8px;border-radius:var(--r-2);font-size:13px}
.pickopt:hover{background:var(--glass-2)}
.pickopt.on{background:var(--ink);color:var(--paper)}
.pickopt .mono{font-size:11px;opacity:.75}

/* one person */
.person .main-head .back{font-size:12px;color:var(--ink-2);text-decoration:none}
.person .main-head .back:hover{color:var(--ink);text-decoration:underline}
.person .figures{padding:14px 16px;border-radius:var(--r-4);margin-bottom:var(--sp-4)}
.person .chiprow{margin-bottom:var(--sp-3)}
.mlist{display:grid;border-top:1px solid var(--line)}
.mrow{display:grid;grid-template-columns:104px minmax(0,1fr) auto auto;gap:var(--sp-4);
  align-items:center;min-height:46px;padding:6px 8px;border-bottom:1px solid var(--line);
  text-decoration:none;transition:background var(--t) var(--ease)}
.mrow:hover{background:var(--glass-2)}
.mrow .sig{height:10px;display:flex;align-items:center}
.mrow .nostrip{display:block;width:100%;height:3px;border-radius:2px;background:var(--line-2)}
.mrow .t{min-width:0;display:grid}
.mrow .t b{font:500 14px/19px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .t span{font:300 12px/16px var(--sans);color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .at,.mrow .du{font:12px/16px var(--mono);color:var(--ink-2);text-align:right}
@media (max-width:700px){
  .mrow{grid-template-columns:64px minmax(0,1fr) auto;gap:var(--sp-3)}
  .mrow .at{display:none}
}

/* ------------------------------------------------------------------------ settings */
.setgrid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:start}
.setsec{padding:16px;border-radius:var(--r-4);display:grid;gap:var(--sp-3);align-content:start;
  min-width:0;overflow:hidden}
.setsec h2{font-size:15px;line-height:20px}
.setsec.wide{grid-column:1/-1}
.setsec .note{font-size:12px;line-height:18px;font-weight:300;max-width:62ch}
.setrow{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap}
.setrow .lbl{padding-bottom:9px}
.setfield{flex:1;min-width:180px}
/* FIX (plan 028 finding B3): a helper sentence belongs to the whole row, not to the
   field's own column -- when it sat inside the field, `align-items:flex-end` aligned
   the button to the bottom of the *sentence* and left it 22 px below its input. It is
   a full-width last item instead. The negative margin is the row's gap traded for the
   5 px `.fieldrow` puts under an input, so the sentence sits where it always did. */
.setsec .setrow .hint{flex:1 0 100%;margin-top:calc(5px - var(--sp-3))}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);margin:0}
.facts div{display:grid;gap:2px;min-width:0}
.facts dt{font:500 11px/14px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
/* FIX (plan 028 finding B3b): this was `white-space:nowrap` with an ellipsis, so in a
   150 px column at 400 px "Wed, Sep 16, 2026 · 01:26 PM" was cut to "Wed, Sep 16,
   2026 · …". A fact is a short value somebody came here to read; two lines cost
   nothing, and a date is not a secret to hide behind an ellipsis. */
.facts dd{margin:0;font-size:13px;overflow-wrap:break-word}
.taglist{display:grid;gap:2px}
.tagrow2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
  padding:6px 8px;margin-inline:-8px;border-radius:var(--r-2)}
.tagrow2 .nm{flex:1 1 90px;min-width:0}
.tagrow2 .chip{margin-left:auto}
.tagrow2:hover{background:var(--glass-2)}
.tagrow2 .nm{font-size:13px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tagrow2 .nm:hover{text-decoration:underline}
.tagrow2 .n{font:11px/16px var(--mono);color:var(--ink-2);text-align:right;white-space:nowrap}
@media (max-width:600px){.tagrow2 .n.muted{display:none}}
.comingsoon{display:grid;gap:var(--sp-2);padding:12px;border:1px dashed var(--line-2);border-radius:var(--r-3)}
.comingsoon .lbl{color:var(--accent-t)}
.comingsoon p{font-size:12px;line-height:18px;font-weight:300}

/* Touch targets below 700 px; the policy is in styles/components.css. The tick box and
   the colour swatches keep their drawn size inside a 40 px box, and the two rows that
   hold them widen their first column to match. */
@media (max-width:699px){
  .psearch{height:44px}
  .psearch input{align-self:stretch}
  .tickbox{position:relative;width:40px;height:40px;margin-top:0;border:0;border-radius:var(--r-2)}
  .tickbox::before{content:"";position:absolute;width:18px;height:18px;border-radius:var(--r-1);
    border:1px solid var(--line-2)}
  .tickbox:hover{border-color:transparent}
  .tickbox[aria-checked="true"]{background:none}
  .tickbox[aria-checked="true"]::before{background:var(--ink);border-color:var(--ink)}
  .tickbox svg{position:relative;z-index:1}
  .todolist .todo{grid-template-columns:40px minmax(0,1fr) auto;align-items:center}
  .todolist .todo .meta a{min-height:40px;display:inline-flex;align-items:center}
  button.sw{width:40px;height:40px;background:none;box-shadow:none;display:grid;place-items:center}
  button.sw::before{content:"";width:14px;height:14px;border-radius:50%;
    background:var(--h,var(--ink-3));box-shadow:0 0 0 1px var(--line-2)}
  button.sw:hover{box-shadow:none}
  button.sw:hover::before{box-shadow:0 0 0 3px var(--accent-soft)}
  .prow{grid-template-columns:40px minmax(0,1fr) auto}
  .prow .nm a{min-height:40px;display:inline-flex;align-items:center}
  /* `.pickopt`, not `.pick`: the rename that unpicked this class from the library's
     own `.pick` box missed the touch target, so the merge dialog's rows were 34 px at
     400 px and e2e/narrow.spec.js said so. */
  .picklist .pickopt{min-height:40px}
  .swatch{width:40px;height:40px}
  .person .main-head .back{min-height:40px;display:inline-flex;align-items:center}
  .tagrow2 .nm{min-height:40px;display:inline-flex;align-items:center}
}