/* Projects Dashboard — Account Services & Project Weekly
 *
 * Shares the design language of inf-pto-dashboard and inf-learning (cert tracker):
 * the same palette, the Bricolage/Hanken type pair, the .mh masthead and the light and
 * dark token sets. Adopting their tokens rather than a private palette means these apps
 * keep looking like one suite when any of them is restyled.
 *
 * The status tokens this app already used are ALIASED onto that palette below, so the
 * rest of this stylesheet is unchanged and the four states now theme correctly in dark
 * mode. Status hues must stay distinguishable in both themes -- see docs/status-model.md
 * section 8. The app used to be light-locked for exactly that reason; the shared palette
 * carries proper dark variants for green/amber/red, so the lock is no longer needed.
 */

:root{
  --canvas:#F2EEE5; --paper:#FFFFFF; --ink:#1E1A15; --muted:#6F6757; --rule:#E7E1D6;
  --blue:#014A73; --on-blue:#F4EFE6; --blueline:rgba(255,255,255,.15); --bluesub:#AFCADB;
  --accent:#C33E1D; --moss:#1D7A44; --amber:#A9701A;
  --amber-bg:#FBF0DA; --amber-line:#E9D3A6; --amber-ink:#7A5214;
  --green-bg:#E6F1EA; --green-line:#B7D9C4; --green-ink:#1B6E43;
  --red-bg:#F8E7E2; --red-line:#E7BDB0; --red-ink:#8F2A13;
  --neutral-bg:#F1EDE4; --neutral-line:#D9D2C4; --neutral-ink:#6F6757;
  --track:#ECE6DA; --hover:#EAF1F5; --on-blue-hot:#F5C489;
  --radius:12px; --shadow:0 3px 12px rgba(26,26,26,.06);
}
:root[data-theme="dark"]{
  --canvas:#14120F; --paper:#211E19; --ink:#ECE6DB; --muted:#A79E90; --rule:#332E27;
  --blue:#0F3B58; --on-blue:#EAF2F8; --bluesub:#8FB6CE; --blueline:rgba(255,255,255,.12);
  --accent:#E0682F; --moss:#4CAE6E; --amber:#E0A24A;
  --amber-bg:#3A2A16; --amber-line:#5A4327; --amber-ink:#F2C79E;
  --green-bg:#1C2A22; --green-line:#2F5B41; --green-ink:#8FD3A6;
  --red-bg:#3A211B; --red-line:#6B3327; --red-ink:#F0A88F;
  --neutral-bg:#26221C; --neutral-line:#3D3730; --neutral-ink:#A79E90;
  --track:#3A342B; --hover:#26221C; --on-blue-hot:#FFCE94;
  --shadow:0 6px 20px rgba(0,0,0,.35);
}

/* ---- Aliases: this app's original token names, now resolving to the shared palette.
   Keeping the names means every rule below this block is untouched. ---- */
:root{
  --navy:var(--blue); --navy-soft:var(--blue);
  --ink-2:var(--muted); --ink-3:var(--muted);
  --line:var(--rule); --line-soft:var(--track);
  --surface:var(--paper);

  --notset-dot:var(--neutral-ink); --notset-bg:var(--neutral-bg);
  --notset-bd:var(--neutral-line); --notset-tx:var(--neutral-ink);

  --green-dot:var(--moss); --green-bd:var(--green-line); --green-tx:var(--green-ink);
  --yellow-dot:var(--amber); --yellow-bg:var(--amber-bg);
  --yellow-bd:var(--amber-line); --yellow-tx:var(--amber-ink);
  --red-dot:var(--accent); --red-bd:var(--red-line); --red-tx:var(--red-ink);

  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
}
.disp { font-family: 'Bricolage Grotesque', serif; letter-spacing: -.02em; }

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; }
a { color: var(--blue); }
:root[data-theme="dark"] a { color: var(--bluesub); }

/* ---------------------------------------------------------------- app chrome */
/* Structure and sizing taken from inf-learning (cert tracker), which matches the org
   chart and the PTO dashboard: a one-line white masthead, the blue context band, then a
   sticky tab bar. Same clamps means the white bar is the same depth on all four internal
   pages and the logo does not jump between them. */

.wrap { max-width: 1500px; margin: 0 auto; padding-inline: clamp(1rem, 3vw, 2rem); }

.mh { background: var(--paper); border-bottom: 1px solid var(--rule); }
.mh-in {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  min-height: clamp(52px, 7vh, 76px); padding-block: clamp(.42rem, 1vh, .8rem);
}
/* No fixed flex basis here. The PTO app pins this width because its nav lives in the
   masthead and needs a stable start; ours does not, and the pinned width was squeezing
   the title onto two lines and making the bar twice as deep. */
.mh-l { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.mh-r { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.mh-logo { height: clamp(22px, 3vh, 32px); width: auto; display: block; }
:root[data-theme="dark"] .mh-logo { filter: brightness(1.55); }
:root[data-theme="light"] .mh-logo { filter: none; }
.mh-div { width: 1px; height: 26px; background: var(--rule); }
/* Clamped like the org chart rather than fixed like the learning page. Both agree at a
   normal desktop height (the clamp maxes at the learning page's 1.2rem / 32px); on a
   shallow window the org chart's version shrinks, which is the better behaviour. */
.mh-title { font-size: clamp(.95rem, 1.9vh, 1.2rem); font-weight: 700; white-space: nowrap; }
.mh-title span { font-weight: 400; color: var(--muted); font-style: italic; }

.theme-btn {
  background: var(--paper); border: 1px solid var(--rule); color: var(--muted);
  border-radius: 8px; padding: .4rem .55rem; cursor: pointer; font-size: .85rem;
}

/* ---- Blue context band ---- */
.hero { background: var(--blue); color: var(--on-blue); }
.hero-in {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: clamp(.5rem, 1.3vh, 1.25rem) 2.5rem; flex-wrap: wrap;
  padding-block: clamp(.35rem, .85vh, 1.15rem) clamp(.4rem, .95vh, 1.25rem);
}
.hero-l { min-width: 0; }
.hero-l h1 { font-size: clamp(1.1rem, 2.35vh, 1.9rem); margin: 0; font-weight: 500; line-height: 1.15; }
.hero-l h1 em { font-style: normal; color: var(--on-blue-hot); }
.hero-sub {
  color: var(--bluesub); font-size: clamp(.72rem, 1.5vh, .9rem);
  margin: clamp(.1rem, .3vh, .3rem) 0 0; max-width: 82ch;
}
/* Same rule as the org chart and the learning page: on a shallow screen this sentence
   is the one piece of text carrying no data, so it is what gives way. */
@media (max-height: 800px) { .hero-sub { display: none; } }

.hero-r { display: flex; align-items: flex-end; gap: clamp(1.1rem, 3vw, 2.4rem); flex-wrap: wrap; margin-left: auto; }
.figs { display: flex; gap: clamp(1.1rem, 3vw, 2.4rem); flex-wrap: wrap; }
.fig .v { font-size: clamp(1.2rem, 2.6vh, 2.1rem); line-height: 1; font-weight: 400; }
.fig .lab {
  font-size: clamp(.6rem, 1.2vh, .72rem); color: var(--bluesub);
  margin-top: clamp(.1rem, .3vh, .3rem); text-transform: uppercase; letter-spacing: .07em;
}
.fig.hot .v { color: var(--on-blue-hot); }

.hero-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.hero-btn {
  font: inherit; font-size: clamp(.75rem,1.5vh,.85rem); font-weight: 600;
  background: rgba(255,255,255,.12); color: var(--on-blue);
  border: 1px solid var(--blueline); border-radius: 8px;
  padding: .3rem .65rem; cursor: pointer; white-space: nowrap;
}
.hero-btn:hover { background: rgba(255,255,255,.22); }
.hero-btn:focus-visible { outline: 2px solid var(--on-blue); outline-offset: 1px; }
.hero .mode {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid var(--blueline); background: rgba(255,255,255,.14); color: var(--on-blue);
}

/* ---- Tab bar ---- */
.tabsbar { position: sticky; top: 0; z-index: 40; background: var(--canvas); border-bottom: 1px solid var(--rule); }
.tb-in { display: flex; gap: .25rem; padding-block: .55rem; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none; }
.tb-in::-webkit-scrollbar { display: none; }
.tab {
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--blue); background: transparent;
  border: 1px solid transparent; border-radius: 999px; padding: .45rem 1rem; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto; text-decoration: none;
}
:root[data-theme="dark"] .tab { color: var(--bluesub); }
.tab:hover { background: var(--hover); }
.tab[aria-selected="true"] { background: var(--blue); color: var(--on-blue); cursor: default; }

main { max-width: 1500px; margin: 0 auto; padding: .85rem clamp(1rem,3vw,2rem) 2rem; }
.view[hidden] { display: none; }

.banner {
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--amber-ink);
  margin-bottom: 12px;
}
.banner b { color: var(--amber-ink); }
.banner.ok {
  background: var(--green-bg); border-color: var(--green-line);
  border-left-color: var(--moss); color: var(--green-ink);
}
.banner.ok b { color: var(--green-ink); }
.banner.bad {
  background: var(--red-bg); border-color: var(--red-line);
  border-left-color: var(--accent); color: var(--red-ink);
}
.banner.bad b { color: var(--red-ink); }
.banner ul.tight { margin-top: 5px; }

/* -------------------------------------------------------------------- counts */

/* Compact by design: the counts are a glance, not a dashboard. Number and label sit on
   one line so four of them cost ~56px of height instead of ~130px. */
/* Five boxes on one band: the four states plus the portfolio total, which also carries
   the expand/collapse controls. Equal height by stretch, so the row reads as a single
   heading block rather than tiles with a stray toolbar underneath. */
.counts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: stretch; }
.count {
  flex: 1 1 170px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--neutral-ink);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.count .n { font-size: 28px; font-weight: 700; line-height: 1; flex: none; }
.count .txt { min-width: 0; }
.count .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  font-weight: 600;
  line-height: 1.2;
}
.count .note { font-size: 11.5px; margin-top: 1px; line-height: 1.25; }
.count.red    { border-left-color: var(--red-dot); }
.count.red .n { color: var(--red-tx); }
.count.yellow    { border-left-color: var(--yellow-dot); }
.count.yellow .n { color: var(--yellow-tx); }
.count.green    { border-left-color: var(--green-dot); }
.count.green .n { color: var(--green-tx); }
.count.notset .n { color: var(--notset-tx); }

/* ------------------------------------------------------------------- badges */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pill.not_set { color: var(--notset-tx); background: var(--notset-bg); border-color: var(--notset-bd); border-style: dashed; }
.pill.not_set::before { background: transparent; border: 1.5px dashed var(--notset-dot); }
.pill.green  { color: var(--green-tx);  background: var(--green-bg);  border-color: var(--green-bd); }
.pill.yellow { color: var(--yellow-tx); background: var(--yellow-bg); border-color: var(--yellow-bd); }
.pill.red    { color: var(--red-tx);    background: var(--red-bg);    border-color: var(--red-bd); }
/* Red also takes a square dot so the state is not carried by hue alone. */
.pill.red::before { border-radius: 2px; }
.pill.yellow::before { border-radius: 2px; transform: rotate(45deg); }

.sig {
  display: inline-block;
  font: 11px/1.6 var(--mono);
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--line-soft);
  color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.sig.warn { background: var(--yellow-bg); border-color: var(--yellow-bd); color: var(--yellow-tx); }
.sig.bad  { background: var(--red-bg);    border-color: var(--red-bd);    color: var(--red-tx); }

.tier {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
}

/* -------------------------------------------------------------------- cards */

section.block { margin-bottom: 20px; }
section.block > h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
section.block > h2 .n {
  background: var(--ink-3);
  color: #fff;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  letter-spacing: 0;
}
section.block.red > h2 .n    { background: var(--red-dot); }
section.block.yellow > h2 .n { background: var(--yellow-dot); }
section.block.notset > h2 .n { background: var(--notset-dot); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 6px;
  padding: 11px 13px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}
.card.red    { border-left-color: var(--red-dot); }
.card.yellow { border-left-color: var(--yellow-dot); }
.card.green  { border-left-color: var(--green-dot); }
.card.not_set { border-left-color: var(--notset-dot); border-left-style: dashed; }

.card-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.card-head .who { flex: 1; min-width: 260px; }
.card-head .co {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  font-weight: 600;
}
.card-head .nm { font-size: 14.5px; font-weight: 600; margin-top: 0; }
.card-head .meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.card-head .meta code { font: 12px var(--mono); color: var(--ink-2); }
.card-head .meta .commit { font-weight: 600; color: var(--ink-2); }
.card-head .meta .commit.missed { color: var(--red-tx); }

.dims { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.dim {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  background: var(--line-soft);
}
.dim b { display: inline; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; opacity: .75; margin-right: 5px; }
.dim.not_set { background: var(--notset-bg); border-color: var(--notset-bd); border-style: dashed; color: var(--notset-tx); }
.dim.green  { background: var(--green-bg);  border-color: var(--green-bd);  color: var(--green-tx); }
.dim.yellow { background: var(--yellow-bg); border-color: var(--yellow-bd); color: var(--yellow-tx); }
.dim.red    { background: var(--red-bg);    border-color: var(--red-bd);    color: var(--red-tx); }
.dim .held {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 3px;
  opacity: .75;
}

.sigs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; align-items: center; }

.brings {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font-size: 13px;
}
.brings dl { margin: 0; display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 3px 12px; }
.brings dt { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.brings dd { margin: 0; }
.brings .missing { color: var(--red-tx); font-style: italic; }
.brings h5 {
  margin: 0 0 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  font-weight: 650;
}
.brings.escalated { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.brings.escalated .brings-own { opacity: .8; }
.brings.escalated .brings-now {
  border-left: 3px solid var(--red-bd);
  padding-left: 13px;
}
.brings.escalated .brings-now h5 { color: var(--red-tx); }
@media (max-width: 760px) {
  .brings.escalated { grid-template-columns: 1fr; }
  .brings.escalated .brings-now { border-left: 0; padding-left: 0; border-top: 1px dashed var(--red-bd); padding-top: 10px; }
}

/* --------------------------------------------------------------------- form */

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
}
label.fld { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
select, input[type=text], input[type=date], textarea {
  font: inherit;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  max-width: 100%;
}
textarea { width: 100%; resize: vertical; min-height: 54px; font-size: 14px; }
select:focus, input:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--navy-soft);
  outline-offset: 1px;
}

button {
  font: inherit;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 6px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
button.ghost { background: #fff; color: var(--navy); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* Segmented four-state picker. Not Set is always present and always first. */
.picker { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.picker input { position: absolute; opacity: 0; pointer-events: none; }
.picker label {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: var(--ink-3);
  border-right: 1px solid var(--line);
  user-select: none;
}
.picker label:last-child { border-right: 0; }
.picker input:checked + label.not_set { background: var(--notset-bg); color: var(--notset-tx); box-shadow: inset 0 -3px 0 var(--notset-dot); }
.picker input:checked + label.green   { background: var(--green-bg);  color: var(--green-tx);  box-shadow: inset 0 -3px 0 var(--green-dot); }
.picker input:checked + label.yellow  { background: var(--yellow-bg); color: var(--yellow-tx); box-shadow: inset 0 -3px 0 var(--yellow-dot); }
.picker input:checked + label.red     { background: var(--red-bg);    color: var(--red-tx);    box-shadow: inset 0 -3px 0 var(--red-dot); }
.picker input:focus-visible + label { outline: 2px solid var(--navy-soft); outline-offset: -2px; }

/* Two columns on wide screens: the pickers need ~440px, so the follow-up fields sit
   beside them rather than doubling the card height. One column below 1100px. */
.assess-body {
  display: grid;
  /* Equal halves. minmax(0,1fr) rather than 1fr so a long project name in the right
     column cannot blow the track out and unbalance the pair. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 28px;
  align-items: start;
  margin-top: 10px;
}
.assess-dims { min-width: 0; }
.assess-side { padding-left: 24px; border-left: 1px solid var(--line-soft); min-width: 0; }
.assess-side .followups { margin-top: 0; }
/* The challenge thread sits in the right column too. Its own top rule is redundant
   there when it is the only thing in the column. */
.assess-side .inputs.quiet { border-top: 0; margin-top: 10px; padding-top: 0; }
.assess-side .followups + .inputs { margin-top: 12px; }

/* Two equal halves need ~510px each for the dimension rows to fit without wrapping,
   so collapse to one column below 1200 rather than 1100. */
@media (max-width: 1200px) {
  .assess-body { grid-template-columns: 1fr; gap: 0; }
  .assess-side { padding-left: 0; border-left: 0; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
}

.assess-row {
  display: grid;
  /* Fixed label column + auto picker, packed left.
     A 1fr label column absorbs all free space and throws the picker to the far right
     edge, which is what happened on cards with no follow-up column. Fixed width also
     keeps every row's picker aligned with the ones above and below it. */
  grid-template-columns: 232px auto;
  justify-content: start;
  gap: 8px 14px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
.assess-row:last-of-type { border-bottom: 0; }
.assess-row .dname { font-size: 13px; font-weight: 600; }
.assess-row .dname small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11.5px; }

.overall-readout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  flex-wrap: wrap;
}

.followups { margin-top: 12px; }
.followups h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.followups .f { margin-bottom: 8px; }
.followups .f > label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 3px; }

/* The one thing that matters gets weight; everything else gets out of the way. */
.followups .f.primary > label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.followups .f.primary textarea { border-color: var(--ink-3); }

.inline-fields { display: flex; gap: 16px; flex-wrap: wrap; margin: 2px 0 4px; }
.inline-fields span { display: inline-flex; align-items: center; gap: 7px; }
.inline-fields label { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.inline-fields input[type=text] { width: 150px; }

details.more { margin-top: 8px; }
details.more > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--navy-soft);
  padding: 3px 0;
  user-select: none;
  width: fit-content;
}
details.more > summary:hover { text-decoration: underline; }
details.more > summary:focus-visible { outline: 2px solid var(--navy-soft); outline-offset: 2px; }
details.more[open] > summary { margin-bottom: 6px; color: var(--ink-3); }

/* -------------------------------------------------------------------- board */

/* Five equal columns that share the width, so the board fits one screen with no
   horizontal scroll. minmax(0,1fr) lets a long project name wrap instead of forcing
   the track wider. */
.lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  overflow: visible; align-items: start; }
.lane {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lane > h3 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.lane > h3 .n { color: var(--ink-3); }
.lane.waiting > h3 { background: var(--yellow-bg); color: var(--yellow-tx); border-bottom-color: var(--yellow-bd); }
.lane-body { padding: 9px; max-height: 66vh; overflow-y: auto; }
.tile {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 7px;
  font-size: 12.5px;
  background: #fff;
}
.tile.red { border-left-color: var(--red-dot); }
.tile.yellow { border-left-color: var(--yellow-dot); }
.tile.green { border-left-color: var(--green-dot); }
.tile.not_set { border-left-color: var(--notset-dot); border-left-style: dashed; }
.tile .co { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.tile .nm { margin: 2px 0 4px; line-height: 1.35; }
.tile .ow { font-size: 11px; color: var(--ink-3); }
.tile .st { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; opacity: .85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------------- table */

table.grid { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13px; }
table.grid th, table.grid td { padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  background: var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 1;
}
table.grid tbody tr:hover { background: #fafcfe; }

/* ------------------------------------------------------------ sortable headers */

table.grid th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.grid th.sortable:hover { background: #e4eaf1; color: var(--navy); }
table.grid th.sortable:focus-visible { outline: 2px solid var(--navy-soft); outline-offset: -2px; }
table.grid th.sortable .arrow {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--ink-3);
  opacity: 0;                       /* reserve the space so headers never shift */
}
table.grid th.sortable:hover .arrow { opacity: .35; }
table.grid th.sortable.active { color: var(--navy); background: #e8eef5; }
table.grid th.sortable.active .arrow { opacity: 1; border-bottom-color: var(--navy); }
table.grid th.sortable.active[aria-sort="descending"] .arrow {
  border-bottom: 0;
  border-top: 5px solid var(--navy);
}

.sort-inline { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.sort-inline select { padding: 3px 7px; font-size: 12px; }

/* ------------------------------------------------------------------- filters */

.toolbar.filters { gap: 14px 16px; }
.fgroup { display: inline-flex; align-items: center; gap: 6px; }
.fgroup select { max-width: 230px; }
.tile .ow .late { color: var(--red-tx); font-weight: 600; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; }
.scroll-x { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }

.empty {
  padding: 26px;
  text-align: center;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: 14px;
}

.note { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.hint { font-size: 12px; color: var(--ink-3); margin: -6px 0 10px; }

button.small { padding: 4px 10px; font-size: 12.5px; }
.topbar button.ghost { background: rgba(255,255,255,.1); color: #fff; border-color: #5b7cad; }
.topbar button.ghost:hover { background: rgba(255,255,255,.2); }
.toolbar.wrap { align-items: stretch; }

/* --------------------------------------------------- escalation explanations */

.reasons { margin-top: 10px; display: grid; gap: 6px; }
.reason {
  font-size: 12.5px;
  padding: 7px 11px;
  border-radius: 6px;
  border-left: 3px solid var(--red-dot);
  background: var(--red-bg);
  color: var(--red-tx);
}
.reason.challenge { border-left-color: var(--yellow-dot); background: var(--yellow-bg); color: var(--yellow-tx); }

/* ----------------------------------------------- team input / challenge thread */

.inputs {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}
.inputs.quiet { margin-top: 7px; padding-top: 6px; }
.inputs h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.inp {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 9px;
  margin-bottom: 6px;
  background: #fcfdfe;
}
.inp.open { border-color: var(--yellow-bd); background: #fffdf6; }
.inp.declined { opacity: .75; }
.inp-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; }
.inp-note { margin-top: 4px; font-size: 12.5px; line-height: 1.4; }
.inp-actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.inp-actions input { flex: 1; min-width: 190px; font-size: 12.5px; padding: 4px 8px; }
.inp-add { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.inp-add input[type=text] { flex: 1; min-width: 220px; font-size: 13px; }

/* ---------------------------------------------------------------- carryover */

.block.carryover {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  box-shadow: var(--shadow);
}
.block.carryover > h2 { border-bottom-color: var(--navy); color: var(--navy); }
.block.carryover .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.block.carryover h4 {
  margin: 0 0 7px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3);
}
ul.tight { margin: 0; padding-left: 18px; font-size: 13.5px; }
ul.tight li { margin-bottom: 7px; }
ul.tight li.overdue { color: var(--red-tx); }
ul.tight li .note { display: block; margin-top: 1px; }
tr.overdue td { background: var(--red-bg); }

@media (max-width: 860px) {
  .block.carryover .cols { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  main { padding: 14px; }
  /* Stack label over picker; the fixed 232px column does not fit a phone. */
  .assess-row { grid-template-columns: 1fr; justify-content: stretch; align-items: start; }
  .assess-body { grid-template-columns: 1fr; }
  .brings dl { grid-template-columns: 1fr; }
}

/* A quiet inline action, for empty states that do not deserve a heading. */
button.linky {
  background: none; border: 0; padding: 2px 0;
  color: var(--navy-soft); font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
button.linky:hover { text-decoration: underline; }
.sig.muted { color: var(--ink-3); opacity: .8; }
.sig.link { text-decoration: none; border-style: solid; }
.sig.link:hover { background: var(--line); }

/* ------------------------------------------------------- collapsible panels */

details.panel { margin-bottom: 4px; }
details.panel > summary,
details.card > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
details.panel > summary::-webkit-details-marker,
details.card > summary::-webkit-details-marker { display: none; }

/* Own disclosure triangle, so it can sit where it reads best. */
details.panel > summary::before,
details.card > summary::before {
  content: "";
  flex: none;
  width: 0; height: 0;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 6px solid var(--ink-3);
  transition: transform .12s ease;
}
details.panel[open] > summary::before,
details.card[open] > summary::before { transform: rotate(90deg); }
details.panel > summary:focus-visible,
details.card > summary:focus-visible { outline: 2px solid var(--navy-soft); outline-offset: 2px; }

/* Section panels (Green, Not submitted, Carryover) */
details.panel > summary {
  padding: 7px 2px;
  border-bottom: 2px solid var(--line);
}
details.panel > summary:hover .ptitle { color: var(--navy); }
.ptitle {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 650;
}
.phint { font-size: 12px; color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; }
details.panel > summary .n {
  background: var(--ink-3); color: #fff; border-radius: 999px;
  padding: 1px 9px; font-size: 12px;
}
details.panel.notset > summary .n { background: var(--notset-dot); }
details.panel.green > summary .n { background: var(--green-dot); }
.panel-body { padding-top: 10px; }

/* Project cards on the status sheet */
details.card.panel-card { padding: 0; }
/* Grid, so every column starts at the same x on every row. Flex made the project
   name begin wherever the client name happened to end. */
details.card > summary {
  padding: 9px 13px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 10px 200px minmax(0, 1fr) 118px 96px 104px;
  align-items: center;
  gap: 12px;
}
details.card[open] > summary { border-bottom: 1px solid var(--line-soft); }
details.card > summary:hover { background: #fafcfe; }
details.card.panel-card > *:not(summary) { padding-left: 13px; padding-right: 13px; }
details.card.panel-card > *:last-child { padding-bottom: 11px; }

.card-summary .s-co {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-summary .s-nm {
  font-size: 13.5px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-summary .s-pill { justify-self: start; }
.card-summary .s-state {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); text-align: right;
}

/* One letter per dimension, coloured. Enough to see what is rated at a glance. */
.minis { display: flex; gap: 3px; flex: none; }
.mini {
  width: 25px; height: 19px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; border: 1px solid;
}
.mini.not_set { background: var(--notset-bg); border-color: var(--notset-bd); color: var(--notset-tx); border-style: dashed; }
.mini.green   { background: var(--green-bg);  border-color: var(--green-bd);  color: var(--green-tx); }
.mini.yellow  { background: var(--yellow-bg); border-color: var(--yellow-bd); color: var(--yellow-tx); }
.mini.red     { background: var(--red-bg);    border-color: var(--red-bd);    color: var(--red-tx); }

@media (max-width: 1000px) {
  details.card > summary { grid-template-columns: 10px 150px minmax(0, 1fr) 118px 92px; }
  .card-summary .s-state { display: none; }
}
@media (max-width: 700px) {
  details.card > summary { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; }
  .card-summary .s-co { display: none; }
  .card-summary .s-pill { justify-self: end; }
}

/* Always-true facts belong in the header, not in a banner that never goes away. */
.topbar .mode {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  padding: 1px 7px; border-radius: 999px; border: 1px solid;
}
.topbar .mode.ok   { color: #cfe9d8; border-color: #4a7c60; background: rgba(26,122,63,.25); }
.topbar .mode.warn { color: #ffe0a8; border-color: #9a7430; background: rgba(214,143,0,.25); }

@media (max-width: 1100px) {
  .lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .lanes { grid-template-columns: 1fr; }
}

/* ---- Uniform status pills -------------------------------------------------
   RED / YELLOW / GREEN / NOT SET are different word lengths, so without a shared
   width the badge column looked ragged down the page. */
.pill {
  min-width: 96px;
  justify-content: center;
  box-sizing: border-box;
}
.card-summary .s-pill .pill { width: 100%; }

/* Count tiles are buttons now: clicking one sorts that status to the top. */
button.count {
  font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--rule); border-left: 3px solid var(--neutral-ink);
}
button.count:hover { background: var(--hover); }
button.count.active { box-shadow: 0 0 0 2px var(--blue) inset; }
button.count:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button.count .lbl, button.count .note { display: block; }

.snap-detail { padding-top: 8px; }
.snap-detail .brings { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---- Blue context band ------------------------------------------------------
   Second row under the masthead, matching the blue hero in the PTO and cert-tracker
   apps so the three sit at the same rhythm. Full bleed, with the inner content on the
   same max-width and padding as .mh-in so every edge lines up down the page.

   It carries what the page IS and which cycle you are in. The counts that used to sit
   in the masthead were always-true trivia crowding the brand row; only the ones with a
   job kept their place, and "N excluded" moved to Data quality where it is actionable. */
.hero { background: var(--blue); color: var(--on-blue); }
.hero-in {
  max-width: 1500px; margin: 0 auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(.35rem, .85vh, 1.15rem) clamp(.4rem, .95vh, 1.25rem);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: clamp(.5rem, 1.3vh, 1.25rem) 2.5rem; flex-wrap: wrap;
}
.hero-l { min-width: 0; }
.hero-l h1 { font-size: clamp(1.1rem, 2.35vh, 1.9rem); margin: 0; font-weight: 500; line-height: 1.15; }
.hero-l h1 em { font-style: normal; color: var(--on-blue-hot); }
.hero-sub {
  color: var(--bluesub); font-size: clamp(.72rem, 1.5vh, .9rem);
  margin: clamp(.1rem, .3vh, .3rem) 0 0; max-width: 82ch;
}
/* Same rule as the org chart and the learning page: on a shallow screen this sentence
   is the one piece of text carrying no data, so it is what gives way. */
@media (max-height: 800px) { .hero-sub { display: none; } }

/* Figures, matching .figs/.fig in inf-learning so the three apps read identically. */
.hero-r { display: flex; align-items: flex-end; gap: clamp(1.1rem, 3vw, 2.4rem); flex-wrap: wrap; margin-left: auto; }
.figs { display: flex; gap: clamp(1.1rem, 3vw, 2.4rem); flex-wrap: wrap; }
.fig .v { font-size: clamp(1.2rem, 2.6vh, 2.1rem); line-height: 1; font-weight: 400; }
.fig .lab {
  font-size: clamp(.6rem, 1.2vh, .72rem); color: var(--bluesub);
  margin-top: clamp(.1rem, .3vh, .3rem); text-transform: uppercase; letter-spacing: .07em;
}
.fig.hot .v { color: var(--on-blue-hot); }

.hero-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.hero-btn {
  font: inherit; font-size: clamp(.75rem,1.5vh,.85rem); font-weight: 600;
  background: rgba(255,255,255,.12); color: var(--on-blue);
  border: 1px solid var(--blueline); border-radius: 8px;
  padding: .3rem .65rem; cursor: pointer; white-space: nowrap;
}
.hero-btn:hover { background: rgba(255,255,255,.22); }
.hero-btn:focus-visible { outline: 2px solid var(--on-blue); outline-offset: 1px; }
.hero .mode {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .1rem .45rem; border-radius: 999px;
  border: 1px solid var(--blueline); background: rgba(255,255,255,.14); color: var(--on-blue);
}

@media (max-width: 700px) {
  .hero-in { gap: .5rem; }
  .hero-r { margin-left: 0; width: 100%; }
}

/* ---- Column headers for the collapsed card lists ---------------------------
   Same grid template as .card-summary so each label sits exactly above the values
   it names. The leading empty cell stands in for the disclosure triangle. */
.list-head {
  display: grid;
  grid-template-columns: 10px 200px minmax(0, 1fr) 118px 96px 104px;
  align-items: center;
  gap: 12px;
  /* The rows are <details class="card"> with a 3px left border and 13px of padding,
     plus the panel inset. The header has none of that, so it needs the same lead-in or
     every label sits left of the values it names. Measured against the rendered row,
     not derived -- the shorthand below must come BEFORE this or it resets it. */
  /* Structural rather than arithmetic: give the header the SAME borders the row carries,
     transparent, and the same padding its <summary> uses. The two boxes are then
     identical by construction, so the grid tracks line up without a magic number — and
     they stay lined up if the card's border ever changes. */
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  padding: 6px 13px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--rule);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 650;
  color: var(--muted);
}
.list-head .lh, .list-head .lh-static { display: inline-flex; align-items: center; gap: 4px; }
/* The Submitted value is right-aligned in the row, so its label has to be too --
   otherwise the header reads as if it belongs to the column before it. */
.list-head > *:last-child { justify-self: end; }
/* No negative margin: it pulled every label 4px left of its grid cell, so the whole
   header sat off the values it names. The hover affordance is vertical padding only. */
.list-head .lh { cursor: pointer; user-select: none; border-radius: 4px; padding: 2px 0; }
.list-head .lh:hover { color: var(--blue); background: var(--hover); }
.list-head .lh:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.list-head .lh.active { color: var(--blue); }
.list-head .lh .arrow {
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0;
}
.list-head .lh:hover .arrow { opacity: .4; }
.list-head .lh.active .arrow { opacity: 1; }
.list-head .lh.active[aria-sort="descending"] .arrow {
  border-bottom: 0; border-top: 5px solid currentColor;
}
/* The dimension-letters column is a legend, not a sort key. */
.list-head .lh-static { letter-spacing: .22em; cursor: help; }

@media (max-width: 1000px) {
  .list-head { grid-template-columns: 10px 150px minmax(0, 1fr) 118px 92px; }
  .list-head > *:last-child { display: none; }
}
@media (max-width: 700px) {
  .list-head { display: none; }   /* rows stack on a phone; headers would not align */
}

/* Dimension key, above the list header. Cheap in height, and it removes the guesswork
   about which of the four each letter pair stands for. */
.dim-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  padding: 0 13px 6px 16px; font-size: 11.5px; color: var(--muted);
}
.dim-legend b {
  display: inline-block; min-width: 25px; text-align: center;
  color: var(--ink); font-weight: 700; font-size: 10.5px;
  border: 1px solid var(--rule); border-radius: 4px; padding: 0 2px; margin-right: .3rem;
}
@media (max-width: 700px) { .dim-legend { display: none; } }

/* The fifth tile stacks: figure on top, controls beneath. */
.count.total { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 8px; }
.count.total .count-row { display: flex; align-items: center; gap: 12px; }
.count.total .txt { display: flex; flex-direction: column; }
.count-actions { display: flex; gap: 6px; }
.count-actions .theme-btn { flex: 1; font-size: 11.5px; padding: .3rem .4rem; }

/* ---- Shoppa's Onboarding (shoppas.html) ------------------------------------
   Standalone area sharing this stylesheet so the suite stays one design system.
   Layout: an IT Glue-style docs browser (sidebar + full-width main), per-entity
   record tables and record pages, sectioned articles, a department board for
   initiatives, and list rows reused across docs, gaps and risks. */

.shp-mini { font-size: .82rem; color: var(--muted); }
label.shp-mini { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
p.shp-mini { margin: .3rem 0; }
.shp-n {
  font-size: .75rem; font-weight: 700; color: var(--muted);
  background: var(--track); border-radius: 999px; padding: .05rem .5rem; white-space: nowrap;
}

.mh-link {
  font-size: .85rem; font-weight: 600; color: var(--muted); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 8px; padding: .4rem .65rem; background: var(--paper);
}
.mh-link:hover { color: var(--ink); border-color: var(--muted); }

.shp-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.spacer { flex: 1; }
.btn {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 8px; padding: .4rem .8rem; display: inline-block;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.btn.primary:hover { filter: brightness(1.12); }
.btn.tiny {
  font-size: .74rem; padding: .2rem .55rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.btn.tiny .ic { width: 12px; height: 12px; }

/* ---- Initiatives board: one column per department ---- */
.shp-lane {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: .9rem;
  padding: .45rem 0; align-items: stretch;
}
.shp-lane-h {
  background: var(--blue); color: var(--on-blue); border-radius: var(--radius);
  padding: .7rem .75rem; box-shadow: var(--shadow); align-self: stretch;
}
.shp-lane-top { display: flex; align-items: center; gap: .55rem; }
.shp-lane-h .ic.lane {
  width: 28px; height: 28px; flex: none; color: var(--on-blue-hot);
  background: rgba(255,255,255,.12); border-radius: 8px; padding: 5px; box-sizing: border-box;
}
.shp-lane-name { font-weight: 700; font-size: .9rem; line-height: 1.2; color: inherit; min-width: 0; }
.shp-lane-meta { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; }
.shp-lane-h .shp-n { background: rgba(255,255,255,.16); color: var(--bluesub); }
.shp-lane-h .shp-col-add {
  background: rgba(255,255,255,.12); border-color: var(--blueline); color: var(--on-blue);
}
.shp-lane-h .shp-col-add:hover { background: rgba(255,255,255,.22); }
.shp-lane-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 8px; align-items: start;
}
.shp-col-add {
  cursor: pointer; font-size: .74rem; font-weight: 600;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
  color: var(--muted); padding: .15rem .5rem;
}
.shp-col-add:hover { color: var(--ink); border-color: var(--muted); }
@media (max-width: 800px) { .shp-lane { grid-template-columns: 1fr; } }
.shp-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: 9px 11px; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; min-height: 118px;
}
.shp-card:hover { border-color: var(--muted); box-shadow: var(--shadow); }
.shp-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.shp-card-top { display: flex; align-items: center; gap: .5rem; margin-bottom: 4px; }
.shp-owner { margin-left: auto; font-size: .75rem; color: var(--muted); }
.shp-card-title {
  font-size: .86rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shp-card-foot {
  margin-top: auto; display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--muted);
}
.shp-card-foot .shp-oi-owner { font-size: .78rem; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-card-flags { display: flex; align-items: center; gap: .5rem; margin-top: 5px; }
.shp-card-flags:empty { display: none; }

/* ---- Docs browser: sidebar + full-width main ---- */
.shp-docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .shp-docs { grid-template-columns: 1fr; } }
.shp-siderail {
  align-self: stretch; background: var(--blue); border-radius: var(--radius);
  box-shadow: var(--shadow); min-height: 100%;
}
.shp-side {
  position: sticky; top: 52px; background: var(--blue);
  border-radius: var(--radius); padding: .45rem .4rem; max-height: calc(100vh - 70px);
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent;
}
.shp-side::-webkit-scrollbar { width: 7px; }
.shp-side::-webkit-scrollbar-track { background: transparent; }
.shp-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 4px; }
.shp-side-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .5rem; }
.shp-side-fold .shp-side-item {
  background: transparent; border: 0; border-radius: 6px; opacity: .8;
  padding: .18rem .55rem; font-size: .8rem;
}
.shp-side-fold .shp-side-item:hover { background: rgba(255,255,255,.08); opacity: 1; }
.shp-side-fold .shp-side-item .shp-n { display: none; }
.shp-side-fold .shp-side-item .ic { opacity: .5; }
.shp-side-fold > summary::-webkit-details-marker { display: none; }
.shp-side-fold > summary .shp-n { background: rgba(255,255,255,.14); color: var(--bluesub); }
.shp-side-fold > summary .chev { margin-left: auto; }
.shp-side-fold > summary .chev::before { content: '▸'; color: var(--bluesub); font-size: .7rem; }
.shp-side-fold[open] > summary .chev::before { content: '▾'; }
.shp-side-group {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bluesub);
  padding: .7rem .55rem .25rem; font-weight: 700;
  border-top: 1px solid var(--blueline); margin-top: .35rem;
}
.shp-side-group:first-of-type { border-top: 0; margin-top: 0; padding-top: .3rem; }
.shp-side-item {
  display: flex; align-items: center; gap: .55rem; padding: .3rem .55rem;
  border-radius: 8px; text-decoration: none; color: var(--on-blue); font-size: .86rem;
}
.shp-side-item .ic { width: 15px; height: 15px; flex: none; opacity: .8; }
.shp-side-item:hover { background: rgba(255,255,255,.1); }
.shp-side-item.on {
  background: rgba(255,255,255,.16); font-weight: 650;
  box-shadow: inset 3px 0 0 var(--on-blue-hot);
}
.shp-side-item.on .ic { opacity: 1; color: var(--on-blue-hot); }
.shp-side-item .shp-n { margin-left: auto; background: rgba(255,255,255,.14); color: var(--bluesub); }
.shp-side-item.on .shp-n { background: rgba(255,255,255,.22); color: var(--on-blue); }
.shp-side-item.empty { color: var(--bluesub); }
.shp-side-item.empty .ic { opacity: .45; }
.shp-side-item.all { font-weight: 650; margin-bottom: .1rem; }

.shp-main { min-width: 0; }
.shp-ro {
  background: var(--neutral-bg); border: 1px solid var(--neutral-line);
  border-radius: 8px; padding: .45rem .8rem; margin: 0 0 .8rem; display: block;
}
.shp-h2 { font-size: 1.12rem; font-weight: 650; margin: 1.1rem 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.shp-h2:first-child { margin-top: 0; }
.shp-h3 { font-size: 1rem; font-weight: 650; margin: 1rem 0 .35rem; display: flex; align-items: center; gap: .5rem; }
.shp-crumb { font-size: .84rem; color: var(--muted); margin: 0 0 .45rem; }
.shp-crumb a { text-decoration: none; }
.shp-cat-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.shp-pagehead {
  display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem;
  padding-bottom: .6rem; border-bottom: 2px solid var(--rule);
}
.shp-pagehead .ic.big {
  width: 34px; height: 34px; flex: none; color: var(--blue); background: var(--hover);
  border-radius: 10px; padding: 7px; box-sizing: border-box;
}
:root[data-theme="dark"] .shp-pagehead .ic.big { color: var(--bluesub); background: var(--track); }
.shp-pagehead h2 { margin: 0; }
.shp-cat-name { display: inline-flex; align-items: center; gap: .45rem; }
.shp-cat-name .ic { width: 15px; height: 15px; color: var(--blue); flex: none; }
:root[data-theme="dark"] .shp-cat-name .ic { color: var(--bluesub); }

.shp-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.shp-cat-tile {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: .55rem .7rem;
}
.shp-cat-tile:hover { border-color: var(--muted); box-shadow: var(--shadow); }
.shp-cat-tile.empty { border-style: dashed; }
.shp-cat-tile.empty .shp-n { background: var(--amber-bg); color: var(--amber-ink); }
.shp-cat-name { font-weight: 650; font-size: .92rem; }
.shp-cat-desc { font-size: .79rem; color: var(--muted); line-height: 1.3; }
.shp-cat-counts { display: flex; gap: 4px; margin-top: 2px; }

.shp-doc-row {
  display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: .45rem .8rem; margin-bottom: 5px; font-size: .92rem; flex-wrap: wrap;
}
a.shp-doc-row:hover { border-color: var(--muted); }
.shp-doc-row.file { cursor: default; }
.shp-doc-name { font-weight: 600; min-width: 0; }

/* ---- Record list tables and record pages ---- */
.shp-table td, .shp-table th { font-size: .86rem; padding: .36rem .6rem; }
.shp-records td:first-child a { font-weight: 600; text-decoration: none; }
.shp-records td:first-child a:hover { text-decoration: underline; }

.shp-kv {
  display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  background: var(--paper); margin: .5rem 0; font-size: .9rem;
}
.shp-kv > .k {
  font-weight: 600; color: var(--muted); padding: .34rem .7rem;
  border-top: 1px solid var(--rule); background: var(--canvas);
}
.shp-kv > .v { padding: .34rem .7rem; border-top: 1px solid var(--rule); min-width: 0; overflow-wrap: anywhere; }
.shp-kv > .k:first-child, .shp-kv > .k:first-child + .v { border-top: 0; }
.shp-kv.wide { font-size: .95rem; }
.shp-kv.wide > .k, .shp-kv.wide > .v { padding: .45rem .8rem; }
:root[data-theme="dark"] .shp-kv > .k { background: var(--track); }

/* ---- Article pages: compact meta strip + collapsible sections ---- */
.shp-art-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; }
.shp-meta {
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: baseline;
  border-block: 1px solid var(--rule); padding-block: .4rem; margin-bottom: .6rem;
}
.shp-meta-bit { font-size: .86rem; display: inline-flex; gap: .4rem; align-items: baseline; max-width: 60ch; }
.shp-meta-bit .lab {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700;
}
.shp-summary {
  background: var(--hover); border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0;
  padding: .55rem .85rem; margin-bottom: .7rem; font-size: .95rem;
}
:root[data-theme="dark"] .shp-summary { background: var(--track); }

details.shp-sec {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  margin-bottom: 6px; overflow: hidden;
}
details.shp-sec > summary {
  cursor: pointer; list-style: none; padding: .55rem .85rem; font-weight: 650; font-size: .98rem;
  display: flex; align-items: center; gap: .5rem;
}
details.shp-sec > summary::before { content: '▸'; color: var(--muted); font-size: .75rem; }
details.shp-sec[open] > summary::before { content: '▾'; }
details.shp-sec > summary::-webkit-details-marker { display: none; }
details.shp-sec > summary:hover { background: var(--hover); }
details.shp-sec > article { padding: .1rem .9rem .7rem; border-top: 1px solid var(--rule); }

.shp-doc { font-size: 14.5px; line-height: 1.55; }
.shp-doc p, .shp-doc li { max-width: 110ch; }
.shp-doc .shp-h { margin: .8em 0 .25em; font-weight: 650; }
.shp-doc h3.shp-h { font-size: 1rem; }
.shp-doc h4.shp-h { font-size: .92rem; }
.shp-doc h5.shp-h, .shp-doc h6.shp-h { font-size: .86rem; color: var(--muted); }
.shp-doc p { margin: .3em 0; }
.shp-doc ul { margin: .25em 0; }
.shp-code {
  background: var(--track); border-radius: 8px; padding: .5rem .8rem;
  font: 12px/1.5 var(--mono); overflow-x: auto; margin: .45em 0;
}
.shp-quote { border-left: 3px solid var(--rule); margin: .45em 0; padding-left: .8rem; color: var(--muted); }
.shp-hr { border: 0; border-top: 1px solid var(--rule); margin: .7em 0; }

/* ---- Dialog ---- */
#shpDlg {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  color: var(--ink); padding: 1.1rem 1.25rem; width: min(480px, 92vw); box-shadow: var(--shadow);
}
#shpDlg::backdrop { background: rgba(20, 18, 15, .45); }
#shpDlg h3 { margin: 0 0 .8rem; }
#shpDlg label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .65rem; }
#shpDlg input, #shpDlg select, #shpDlg textarea {
  display: block; width: 100%; margin-top: 3px; font: inherit; font-size: .88rem;
  color: var(--ink); background: var(--canvas); border: 1px solid var(--rule);
  border-radius: 8px; padding: .4rem .55rem; box-sizing: border-box;
}
#shpDlg .two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
#shpDlg .dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; }

/* Shoppa's runs wider than the meeting dashboard: an IT Glue-style browser earns the
   real estate, and the record tables use it. */
body.shp .wrap { max-width: min(96vw, 1900px); }
body.shp .shp-docs { grid-template-columns: 250px minmax(0, 1fr); }
@media (max-width: 900px) { body.shp .shp-docs { grid-template-columns: 1fr; } }


#shpSearch, #shpDocFilter {
  font: inherit; font-size: .88rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  padding: .32rem .7rem; width: min(340px, 40vw);
}
#shpSearch:focus-visible, #shpDocFilter:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.tb-in { align-items: center; }
#shpDocFilter { width: min(440px, 60vw); }
.shp-cat-head #shpDocFilter { margin-left: auto; }

/* Stat buttons: the summary row on Gaps that doubles as a priority filter. */
.shp-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: .2rem 0 .7rem; }
.shp-stats.onerow { align-items: center; gap: 8px 10px; }
.shp-stats.onerow label {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.shp-stats.onerow select, .shp-stats.onerow input[type="date"] {
  font: inherit; font-size: .82rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 6px; padding: .18rem .4rem;
}
.shp-sort {
  font: inherit; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); background: none; border: 0;
  padding: 0; cursor: pointer; text-align: left;
}
.shp-sort:hover, .shp-sort.on { color: var(--blue); }
:root[data-theme="dark"] .shp-sort:hover, :root[data-theme="dark"] .shp-sort.on { color: var(--bluesub); }
.shp-oi.head {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 84px 150px 175px 86px 18px;
  gap: .2rem .7rem; padding: .35rem .7rem .1rem .55rem; border: 0;
}
.shp-stat {
  font: inherit; display: inline-flex; align-items: baseline; gap: .45rem; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: .35rem .75rem;
}
.shp-stat .n { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.shp-stat .l { font-size: .78rem; color: var(--muted); font-weight: 600; }
.shp-stat.bad .n { color: var(--red-ink); }
.shp-stat.warn .n { color: var(--amber-ink); }
.shp-stat.on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
span.shp-stat { cursor: default; }


.shp-hit { cursor: pointer; }
.shp-hit:hover { border-color: var(--muted); }

/* ---- Section panels: solid banner headers carry the layering ---- */
.shp-panel {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow);
}
.shp-panel-h {
  display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap;
  padding: .5rem .95rem; cursor: pointer; list-style: none; user-select: none;
  background: var(--blue); color: var(--on-blue);
}
.shp-panel-h::-webkit-details-marker { display: none; }
.shp-panel-h .t { font-weight: 700; font-size: 1rem; color: inherit; }
.shp-panel-h .d { font-size: .78rem; color: var(--bluesub); margin-left: auto; text-align: right; max-width: 64ch; }
.shp-panel-h .shp-n.hd { background: rgba(255,255,255,.22); color: inherit; }
.shp-panel-h .chev { align-self: center; margin-left: .3rem; }
.shp-panel-h .chev::before { content: '▾'; font-size: .8rem; opacity: .8; }
.shp-panel:not([open]) .shp-panel-h .chev::before { content: '▸'; }
.shp-panel:not([open]) .shp-panel-h { border-radius: var(--radius); }
.shp-panel.bad .shp-panel-h { background: var(--accent); color: #fff; }
.shp-panel.bad .shp-panel-h .d { color: rgba(255,255,255,.75); }
.shp-panel.warn .shp-panel-h { background: var(--amber); color: #fff; }
.shp-panel.warn .shp-panel-h .d { color: rgba(255,255,255,.8); }
:root[data-theme="dark"] .shp-panel.warn .shp-panel-h { color: #14120F; }
:root[data-theme="dark"] .shp-panel.warn .shp-panel-h .d { color: rgba(20,18,15,.7); }
.shp-panel-b { padding: .55rem .95rem .75rem; }
.shp-panel-b > .shp-doc-row { border-left: 0; border-right: 0; border-radius: 0; margin-bottom: 0; }
.shp-panel-b > .shp-doc-row + .shp-doc-row { border-top: 0; }

.shp-group { margin-bottom: .4rem; }
.shp-group-h {
  display: flex; align-items: baseline; gap: .55rem; cursor: pointer; list-style: none;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  color: var(--blue); background: var(--hover); border-left: 4px solid var(--blue);
  border-radius: 6px; padding: .4rem .7rem; margin: .6rem 0 .25rem;
}
:root[data-theme="dark"] .shp-group-h { color: var(--bluesub); background: var(--track); border-left-color: var(--bluesub); }
.shp-group-h .shp-n { background: var(--blue); color: var(--on-blue); }
.shp-group-h::-webkit-details-marker { display: none; }
.shp-group-h .chev { margin-left: auto; }
.shp-group-h .chev::before { content: '▾'; opacity: .6; }
details.shp-group:not([open]) .shp-group-h .chev::before { content: '▸'; }
div.shp-group-h { cursor: default; }
.shp-group:first-child .shp-group-h, .shp-panel-b > .shp-group-h:first-child { margin-top: .1rem; }

/* Aligned open-item rows: id | priority | item | owner | ask of | raised */
.shp-oi {
  border-top: 1px solid var(--track); border-left: 3px solid transparent;
  font-size: .9rem;
}
.shp-oi > summary {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 84px 150px 175px 86px 18px;
  gap: .2rem .7rem; align-items: center; padding: .4rem .7rem .4rem .55rem;
  cursor: pointer; list-style: none;
}
.shp-oi > summary::-webkit-details-marker { display: none; }
.shp-oi.p-critical { border-left-color: var(--accent); }
.shp-oi.p-high { border-left-color: var(--amber); }
.shp-oi.p-medium { border-left-color: var(--neutral-line); }
.shp-oi:nth-child(odd) { background: var(--canvas); }
:root[data-theme="dark"] .shp-oi:nth-child(odd) { background: var(--hover); }
.shp-oi > summary:hover { background: var(--hover); }
.shp-oi[open] { background: var(--paper); box-shadow: var(--shadow); }
.shp-oi .chev::before { content: '▸'; color: var(--muted); font-size: .7rem; }
.shp-oi[open] .chev::before { content: '▾'; }
.shp-oi-id {
  font: 700 .68rem/1 var(--mono); color: var(--muted);
  background: var(--track); border-radius: 5px; padding: .18rem .3rem;
  white-space: nowrap; text-align: center;
}
.shp-oi-title {
  font-weight: 600; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shp-oi[open] .shp-oi-title { white-space: normal; }
.shp-oi .m-ask, .shp-oi .m-date { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-oi-owner {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.shp-oi-owner .av { flex: none; }
.shp-oi-body {
  padding: .15rem .9rem .6rem 4.2rem;
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
}
.shp-oi-blocks { font-size: .84rem; color: var(--red-ink); line-height: 1.35; }
.shp-oi-desc { font-size: .88rem; line-height: 1.45; max-width: 100ch; }
.shp-oi.ren > summary { grid-template-columns: minmax(0, 1fr) 120px 190px 150px 18px; }
.shp-oi.ren .exp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) {
  .shp-oi.ren > summary { grid-template-columns: minmax(0, 1fr) 18px; }
  .shp-oi.ren > summary > :not(.shp-oi-title):not(.chev) { display: none; }
}
.shp-oi.resolved > summary .shp-oi-title { text-decoration: line-through; color: var(--muted); }
.shp-oi.resolved { border-left-color: var(--green-line); }
@media (max-width: 1100px) {
  .shp-oi > summary { grid-template-columns: 58px minmax(0, 1fr) 84px 18px; }
  .shp-oi > summary .m-owner, .shp-oi > summary .m-ask, .shp-oi > summary .m-date { display: none; }
  .shp-oi-body { padding-left: 1rem; }
}

/* Filter toolbar for the register: labelled selects, reads as controls not columns. */
.shp-oibar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--canvas); border: 1px solid var(--rule); border-radius: 8px;
  padding: .35rem .7rem; margin: .2rem 0 .5rem;
}
:root[data-theme="dark"] .shp-oibar { background: var(--track); }
.shp-oibar label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.shp-oibar select {
  font: inherit; font-size: .84rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 6px; padding: .18rem .4rem;
}

/* Initials avatars: deterministic hue per person. */
.av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  font-size: .6rem; font-weight: 700; letter-spacing: .02em; color: #fff;
}
.av.h0 { background: #1D7A44; } .av.h1 { background: #A9701A; }
.av.h2 { background: #C33E1D; } .av.h3 { background: #014A73; }
.av.h4 { background: #6B4FA0; } .av.h5 { background: #8F2A5B; }
.av.h6 { background: #2F7F71; } .av.h7 { background: #5A6B2F; }

/* Chip rows: compact links for empty asset classes and quiet lists */
.shp-chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin: .3rem 0 .5rem; }
.shp-chip {
  font-size: .8rem; font-weight: 600; text-decoration: none; color: var(--amber-ink);
  background: var(--amber-bg); border: 1px dashed var(--amber-line); border-radius: 999px;
  padding: .18rem .65rem;
}
a.shp-chip:hover { border-style: solid; }
.shp-chip.plain { color: var(--muted); background: var(--track); border: 1px solid var(--rule); }

/* Document-kind chips: the layer that used to live inside the file name. */
.sig.kind {
  background: var(--blue); color: var(--on-blue); border-color: var(--blue);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
:root[data-theme="dark"] .sig.kind { background: var(--track); color: var(--bluesub); border-color: var(--rule); }

details.shp-group.resolved-fold .shp-group-h { color: var(--green-ink); background: var(--green-bg); }

/* Tasks: the layer under an initiative. Checkbox rows in the dialog; a progress
   chip on the card. */
.shp-task {
  display: flex; align-items: center; gap: .5rem; padding: .3rem .1rem;
  border-top: 1px solid var(--track); font-size: .86rem;
}
.shp-task:first-child { border-top: 0; }
.shp-task input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.shp-task .t { min-width: 0; flex: 1; }
.shp-task.done .t { text-decoration: line-through; color: var(--muted); }
.shp-task .shp-mini { flex: none; }
.shp-task .rm { flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .8rem; }
.shp-task .rm:hover { color: var(--red-ink); }
#shpDlg .task-add { display: grid; grid-template-columns: minmax(0,1fr) 110px 128px auto; gap: .4rem; margin-top: .4rem; }
#shpDlg .task-add input { margin-top: 0; }
.shp-card-tasks { font-size: .74rem; color: var(--muted); font-weight: 600; }
.shp-card-tasks.due-soon { color: var(--amber-ink); }

/* Documentation requests: reuse the layered row; summary columns fit request fields. */
.shp-oi.req > summary { grid-template-columns: minmax(0, 1fr) 170px 160px 110px 18px; }
.shp-oi-actions { display: flex; gap: .5rem; }
#shpReqDlg {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  color: var(--ink); padding: 1.1rem 1.25rem; width: min(480px, 92vw); box-shadow: var(--shadow);
}
#shpReqDlg::backdrop { background: rgba(20, 18, 15, .45); }
#shpReqDlg h3 { margin: 0 0 .8rem; }
#shpReqDlg label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .65rem; }
#shpReqDlg input, #shpReqDlg select, #shpReqDlg textarea {
  display: block; width: 100%; margin-top: 3px; font: inherit; font-size: .88rem;
  color: var(--ink); background: var(--canvas); border: 1px solid var(--rule);
  border-radius: 8px; padding: .4rem .55rem; box-sizing: border-box;
}
#shpReqDlg .two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
#shpReqDlg .dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; }
@media (max-width: 1100px) {
  .shp-oi.req > summary { grid-template-columns: minmax(0, 1fr) 18px; }
  .shp-oi.req > summary > :not(.shp-oi-title):not(.chev) { display: none; }
}

/* Topic themes: a parent line with its related items nested one level in. */
details.shp-theme { border-top: 1px solid var(--track); }
details.shp-theme > summary {
  display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none;
  padding: .45rem .7rem .45rem .55rem; font-size: .9rem;
}
details.shp-theme > summary::-webkit-details-marker { display: none; }
details.shp-theme > summary:hover { background: var(--hover); }
.shp-theme-name { font-weight: 700; }
details.shp-theme > summary .chev { margin-left: auto; }
.shp-theme-b { margin-left: 1.1rem; border-left: 2px solid var(--rule); }
.shp-theme-b .shp-oi:nth-child(odd) { background: transparent; }
.shp-theme-b .shp-oi:nth-child(even) { background: var(--canvas); }
:root[data-theme="dark"] .shp-theme-b .shp-oi:nth-child(even) { background: var(--hover); }

/* Docs home: expirations + health side by side, IT Glue org-home style. */
.shp-homegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 14px; align-items: start; margin-top: .9rem; }
.shp-main > .shp-panel:first-of-type, .shp-main .shp-cat-grid + details.shp-panel { margin-top: .9rem; }

.resolved-row .shp-doc-name { text-decoration: line-through; color: var(--muted); }
.shp-doc-row a.shp-doc-name { text-decoration: none; color: var(--ink); font-weight: 600; }
.shp-doc-row a.shp-doc-name:hover { text-decoration: underline; }

/* ---- Ask: grounded answers over the hub ---- */
.shp-askbar { display: flex; gap: .5rem; margin: .2rem 0 .7rem; }
#shpAskQ {
  flex: 1; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px; padding: .55rem .8rem;
}
#shpAskQ:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.shp-askbar .btn { padding: .55rem 1.1rem; }
button.shp-chip { font: inherit; cursor: pointer; }
.shp-answer { font-size: 1rem; line-height: 1.6; max-width: 90ch; }
.shp-answer p { margin: .4em 0; }
.shp-answer li { margin: .2em 0; }
.shp-cite {
  display: inline-block; min-width: 1.15em; text-align: center;
  font-size: .72em; font-weight: 700; vertical-align: .3em;
  background: var(--blue); color: var(--on-blue); border-radius: 4px;
  padding: 0 .25em; margin: 0 .1em; text-decoration: none;
}
.shp-cite:hover { filter: brightness(1.2); }
:root[data-theme="dark"] .shp-cite { background: var(--bluesub); color: var(--canvas); }
.shp-doc-row:target { box-shadow: inset 3px 0 0 var(--blue); background: var(--hover); }
.shp-answer .shp-h { margin: 1em 0 .3em; font-weight: 650; }
.shp-answer h3.shp-h { font-size: 1.05rem; }
.shp-answer h4.shp-h, .shp-answer h5.shp-h { font-size: .95rem; }
.shp-answer code { background: var(--track); border-radius: 4px; padding: .05em .3em; font-size: .9em; }

/* ---- Documentation coverage ------------------------------------------------
   Four states, in the team's own vocabulary and colours from the standard:
   documented, partial, gap, and not-assessed (which is not the same as a gap). */
:root {
  --cov-documented: #1F7A4D;
  --cov-partial:    #2F5F87;
  --cov-gap:        #B23A2F;
  --cov-unassessed: #9AA7B4;
}
:root[data-theme="dark"] {
  --cov-documented: #3E9E6E;
  --cov-partial:    #5D93C4;
  --cov-gap:        #D9614F;
  --cov-unassessed: #7F8C99;
}

.cov-bar {
  display: flex; height: var(--h, 10px); border-radius: 999px; overflow: hidden;
  background: var(--track); margin: .35rem 0;
}
.cov-bar .seg { display: block; height: 100%; }
.cov-bar .seg.documented { background: var(--cov-documented); }
.cov-bar .seg.partial    { background: var(--cov-partial); }
.cov-bar .seg.gap        { background: var(--cov-gap); }
.cov-bar .seg.unassessed { background: var(--cov-unassessed); }

.cov-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.cov-key { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); }
.cov-key .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cov-key .dot.documented { background: var(--cov-documented); }
.cov-key .dot.partial    { background: var(--cov-partial); }
.cov-key .dot.gap        { background: var(--cov-gap); }
.cov-key .dot.unassessed { background: var(--cov-unassessed); }

.cov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cov-card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .6rem .75rem;
}
.cov-card:hover { border-color: var(--muted); box-shadow: var(--shadow); }
.cov-card-h { display: flex; align-items: center; gap: .45rem; }
.cov-card-h .ic { width: 15px; height: 15px; color: var(--blue); flex: none; }
:root[data-theme="dark"] .cov-card-h .ic { color: var(--bluesub); }
.cov-card-h .shp-n { margin-left: auto; }
.cov-card-name { font-weight: 650; font-size: .9rem; }
.cov-card-sub { font-size: .76rem; color: var(--muted); margin: .15rem 0 .1rem; line-height: 1.3; }
.cov-card-counts { display: flex; gap: 4px; }
.cov-mini {
  font-size: .68rem; font-weight: 700; color: #fff; border-radius: 4px; padding: 0 .35rem;
}
.cov-mini.documented { background: var(--cov-documented); }
.cov-mini.partial    { background: var(--cov-partial); }
.cov-mini.gap        { background: var(--cov-gap); }
.cov-mini.unassessed { background: var(--cov-unassessed); }

.cov-row {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) 200px;
  gap: .3rem .8rem; align-items: baseline;
  padding: .4rem .5rem; border-top: 1px solid var(--track);
  border-left: 3px solid transparent; font-size: .9rem;
}
.cov-row:nth-child(odd) { background: var(--canvas); }
:root[data-theme="dark"] .cov-row:nth-child(odd) { background: var(--hover); }
.cov-row.documented { border-left-color: var(--cov-documented); }
.cov-row.partial    { border-left-color: var(--cov-partial); }
.cov-row.gap        { border-left-color: var(--cov-gap); }
.cov-row.unassessed { border-left-color: var(--cov-unassessed); }
.cov-chip {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; border-radius: 5px; padding: .12rem .4rem; text-align: center; white-space: nowrap;
}
.cov-chip.documented { background: var(--cov-documented); }
.cov-chip.partial    { background: var(--cov-partial); }
.cov-chip.gap        { background: var(--cov-gap); }
.cov-chip.unassessed { background: var(--cov-unassessed); }
.cov-artifact { font-weight: 600; line-height: 1.35; }
.cov-note { font-size: .82rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.cov-links { font-size: .8rem; margin-top: 3px; }
.cov-band { text-align: right; overflow-wrap: anywhere; }
.cov-flow { display: flex; gap: .5rem; align-items: baseline; font-size: .86rem; padding: .2rem 0; }
@media (max-width: 1000px) {
  .cov-row { grid-template-columns: 100px minmax(0, 1fr); }
  .cov-band { display: none; }
}

/* ---- Coverage: the one-pager's four-column band grid --------------------------
   Compact cells keep a 26 row lane on one screen; the detail is a click away. */
.cov-bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 1250px) { .cov-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .cov-bands { grid-template-columns: 1fr; } }
.cov-band {
  background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px;
  padding: .5rem .5rem .55rem;
}
:root[data-theme="dark"] .cov-band { background: var(--hover); }
.cov-band-h { border-bottom: 1px solid var(--rule); padding-bottom: .35rem; margin-bottom: .35rem; }
.cov-band-name { font-weight: 700; font-size: .84rem; }
.cov-band-q { font-size: .72rem; color: var(--muted); line-height: 1.3; margin-bottom: .25rem; }
.cov-band-stat .cov-bar { margin: .2rem 0 .1rem; }

.cov-cell {
  display: flex; align-items: center; gap: .4rem; width: 100%; text-align: left;
  font: inherit; font-size: .78rem; line-height: 1.3; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid;
  border-radius: 6px; padding: .3rem .45rem; margin-bottom: 4px; color: var(--ink);
}
.cov-cell:hover { border-color: var(--muted); box-shadow: var(--shadow); }
.cov-cell:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cov-cell.documented { border-left-color: var(--cov-documented); }
.cov-cell.partial    { border-left-color: var(--cov-partial); }
.cov-cell.gap        { border-left-color: var(--cov-gap); }
.cov-cell.unassessed { border-left-color: var(--cov-unassessed); }
.cov-cell-name { min-width: 0; }
.cov-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cov-dot.documented { background: var(--cov-documented); }
.cov-dot.partial    { background: var(--cov-partial); }
.cov-dot.gap        { background: var(--cov-gap); }
.cov-dot.unassessed { background: var(--cov-unassessed); }
.cov-cell.wide { display: inline-flex; width: auto; margin-right: 6px; }
.cov-founds { display: flex; flex-wrap: wrap; }
.cov-headline { font-size: .92rem; margin: .1rem 0 .6rem; }

/* ---- Coverage detail dialog ---- */
#shpCovDlg {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  color: var(--ink); padding: 1.1rem 1.25rem; width: min(560px, 92vw); box-shadow: var(--shadow);
}
#shpCovDlg::backdrop { background: rgba(20, 18, 15, .45); }
#shpCovDlg h3 { margin: .3rem 0 .5rem; font-size: 1.15rem; }
.cov-dlg-h { display: flex; align-items: center; gap: .6rem; }
.cov-dlg-rule { font-size: .92rem; margin: 0 0 .5rem; }
#shpCovDlg .k {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; margin-bottom: 2px;
}
.cov-dlg-state, .cov-dlg-note, .cov-dlg-next, .cov-dlg-links {
  font-size: .88rem; line-height: 1.5; margin-bottom: .7rem;
}
.cov-dlg-note { border-left: 3px solid var(--rule); padding-left: .7rem; }
.cov-dlg-next { background: var(--hover); border-radius: 8px; padding: .5rem .7rem; }
:root[data-theme="dark"] .cov-dlg-next { background: var(--track); }
#shpCovDlg .dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* ---- Coverage: major categories above the specific artifacts ---- */
.cov-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; align-items: start; }
details.cov-cat {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .55rem .7rem .6rem;
}
details.cov-cat[open] { box-shadow: var(--shadow); }
details.cov-cat > summary { cursor: pointer; list-style: none; }
details.cov-cat > summary::-webkit-details-marker { display: none; }
.cov-cat-h { display: flex; align-items: center; gap: .45rem; }
.cov-cat-name { font-weight: 700; font-size: .92rem; min-width: 0; }
.cov-std {
  font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--blue); background: var(--hover); border: 1px solid var(--rule);
  border-radius: 999px; padding: .05rem .4rem; white-space: nowrap;
}
:root[data-theme="dark"] .cov-std { color: var(--bluesub); background: var(--track); }
.cov-cat-h .chev { margin-left: auto; }
.cov-cat-h .chev::before { content: '\25B8'; color: var(--muted); font-size: .7rem; }
details.cov-cat[open] .cov-cat-h .chev::before { content: '\25BE'; }
.cov-cat-sub { font-size: .76rem; color: var(--muted); line-height: 1.35; margin: .15rem 0 .1rem; }
.cov-cat-count { font-size: .74rem; color: var(--muted); font-weight: 600; }
.cov-cat-body { margin-top: .5rem; border-top: 1px solid var(--rule); padding-top: .5rem; }