:root {
  /* Slate steel. Tells the browser to render its own chrome dark too -
     scrollbars, the native picker behind <input type=date>, and the <select>
     dropdown. Without it those stay white and stick out badly. */
  color-scheme: dark;

  /* Surfaces, lightest-last: bg is the page, card-3 the highest nested thing
     (a status pill sitting on a tinted card). */
  --bg:      #0f172a;
  --tabs:    #131f33;
  --header:  #16233a;
  --card:    #1a2740;
  --card-2:  #22304c;
  --card-3:  #2c3d5c;

  --line:    #2a3a55;
  --line-2:  #3a4e70;

  --ink:     #e8eef7;
  --muted:   #7d93b2;
  --faint:   #62779a;

  /* The one accent, and it is chrome only - buttons, the active tab, section
     headers, links, progress fill. Deliberately never used to encode data:
     the four action-status colours further down own that job, and an accent
     that meant two things at once would read as noise. Teal is a near
     neighbour of the On-track status green, which is exactly why it stays off
     the cards - every status appears on a pill with its name written on it,
     so the two never have to be told apart by hue alone. */
  --accent:     #3fd0b8;
  --accent-dim: #2fb39d;
  --accent-ink: #04211c;
  --accent-bg:  #12302c;

  --good: #58c07a;
  --warn: #e0a458;
  --bad:  #e2686a;
  --radius: 10px;

  /* One content column, shared by the tab strip and by main, so the nav's
     edges land on the content grid's edges rather than the viewport's. The
     grid tabs get the full width; reading columns clamp themselves narrower
     further down. */
  --page:      1600px;
  --page-read: 1120px;
  --gutter:    20px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 16px;
}

/* ---- typographic scale ----------------------------------------------------
   Four steps, so a tab reads in order at a squint: a headline number, a title,
   body, then a small tracked-out label. Section labels carry their rank
   through weight and letter-spacing rather than through colour - see the
   accent rule. */
.t-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }

/* login */
#login-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card {
  background: var(--card); border-radius: var(--radius); padding: 28px 24px;
  width: 100%; max-width: 380px; box-shadow: 0 10px 44px rgba(0,0,0,.55);
}
.login-card h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; color: var(--ink); }
.login-card .sub { margin: 4px 0 20px; color: var(--muted); }
.login-card label { display: block; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.login-card input {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--card-2); color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg);
}
::placeholder { color: var(--faint); }
.err { color: var(--bad); font-size: 14px; }

/* shell */
header {
  background: var(--header); color: var(--ink); border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 20;
}
.hdr-title { font-weight: 700; }
.hdr-right { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.chip {
  background: var(--card-2); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 20px; padding: 4px 12px; font-size: 13px; font-weight: 700;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#client-menu {
  position: absolute; top: 100%; right: 10px; margin-top: 4px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.6);
  min-width: 230px; max-height: 60vh; overflow-y: auto; padding: 6px; z-index: 60;
}
.cm-item {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: none; background: none; border-radius: 8px;
  text-align: left; font-size: 14.5px; color: var(--ink);
}
.cm-item:hover { background: var(--card-3); }
.cm-item.current { font-weight: 800; color: var(--ink); }
.cm-item .cm-sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.cm-div { height: 1px; background: var(--line); margin: 6px 4px; }
.page-title {
  margin: 4px 0 16px; font-size: 23px; font-weight: 800;
  letter-spacing: -.01em; color: var(--ink);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.form-grid label { display: block; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid .hint { font-weight: 400; }
.form-grid input, .form-grid textarea {
  display: block; width: 100%; margin-top: 4px; padding: 9px 11px; font: inherit; font-size: 15px;
  border: 1px solid var(--line-2); border-radius: 8px; resize: vertical;
  background: var(--card-2); color: var(--ink);
}
.add-card { border-style: dashed; color: var(--accent); background: var(--card-2); }
.add-card .a-name { color: var(--accent); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--good); }
.dot.pending { background: var(--warn); }
.dot.off { background: var(--bad); }

/* The bar spans the viewport so its rule runs edge to edge, but the buttons
   live in .tabs-inner, which is the same column main is - so Targets sits
   above the first card and Export above the last, rather than 2000px apart. */
#tabs {
  display: flex; background: var(--tabs); border-bottom: 1px solid var(--line);
  position: sticky; top: 44px; z-index: 19;
}
.tabs-inner {
  display: flex; width: 100%; max-width: var(--page); margin: 0 auto;
  padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none;
}
.tabs-inner::-webkit-scrollbar { display: none; }
#tabs button {
  flex: 1; padding: 13px 8px; background: none; border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted); font-weight: 600; font-size: 14.5px; white-space: nowrap;
}
#tabs button:hover { color: var(--ink); }
#tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

main {
  padding: 18px var(--gutter) 90px; max-width: var(--page); margin: 0 auto;
}
/* Long-form reading columns stay narrow inside the wide page: the rubric is a
   stack of level descriptions, the client screen is a form. */
#tab-rubric, #client-view main { max-width: var(--page-read); }
.row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

/* ---- 3: one toolbar shape on every tab ------------------------------------
   Filters left, primary action hard right on the content edge, one hairline
   under the lot. A fixed height and a fixed running order mean the year select
   lands on the same pixel whichever tab you arrive on, and the primary button
   is never adjacent to a filter it has nothing to do with. */
.toolbar {
  display: flex; align-items: center; gap: 20px;
  min-height: 60px; margin: 0 0 18px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.tb-filters { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tb-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tb-msg { font-size: 13.5px; color: var(--muted); font-weight: 600; }
@media (max-width: 720px) {
  .toolbar { min-height: 0; padding-bottom: 12px; gap: 10px; }
  .tb-right { margin-left: 0; width: 100%; }
}
label.inline {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
select {
  font-size: 16px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--card-2); color: var(--ink);
}

.primary {
  background: var(--accent); color: var(--accent-ink); border: none; border-radius: 999px;
  padding: 12px 22px; font-weight: 700;
}
.primary:not(:disabled):active { background: var(--accent-dim); }
.primary.small { padding: 8px 16px; font-size: 14px; }
.primary:disabled { opacity: .5; cursor: default; }
.ghost { background: none; border: none; color: var(--accent); font-weight: 600; padding: 8px 4px; }

/* area grid */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.area-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 8px;
}
.area-card:active { transform: scale(.99); }
.area-card .a-name { font-weight: 700; font-size: 17px; }
.area-card .a-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.badge { border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.badge.open { background: var(--st-risk-bg); color: var(--st-risk-ink); }
.badge.complete { background: var(--st-track-bg); color: var(--st-track-ink); }
.badge.none { background: var(--card-3); color: var(--muted); }
/* 12: nine location cards means nine of these on one screen, and the rule
   says under five teal elements a tab. A score bar is data anyway - it is the
   index drawn to length - and the accent is reserved for chrome, so the fill
   is neutral and the length does the talking. */
.a-bar { height: 6px; border-radius: 3px; background: var(--card-3); overflow: hidden; }
.a-bar > div { height: 100%; background: var(--muted); }

/* rubric */
.rubric-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px;
}
#rubric-title { font-weight: 800; font-size: 17px; text-align: center; }
.sec-header {
  margin: 22px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: baseline; gap: 10px;
}
.sec-header .sec-count { font-weight: 700; letter-spacing: .04em; color: var(--faint); }
.cat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden;
}
.cat-head {
  width: 100%; background: none; border: none; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; text-align: left;
}
.cat-head .c-no {
  background: var(--card-2); color: var(--muted); font-weight: 800; border-radius: 8px;
  min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
}
.cat-head .c-name { flex: 1; font-weight: 700; }
.c-score { font-weight: 800; font-size: 17px; color: var(--muted); min-width: 30px; text-align: right; }
.c-score.set { color: var(--ink); }
.cat-body { border-top: 1px solid var(--line); padding: 10px 14px 14px; }
.level {
  width: 100%; text-align: left; display: flex; gap: 10px; align-items: flex-start;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-top: 8px; font-size: 14.5px; line-height: 1.35;
}
.level .pts {
  min-width: 34px; font-weight: 800; color: var(--muted); text-align: center;
  background: var(--card-3); border-radius: 6px; padding: 3px 0;
}
.level.selected .pts { color: var(--accent); background: var(--accent-bg); }
.level.selected { border-color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.note-box { margin-top: 10px; }
.note-box textarea {
  width: 100%; min-height: 54px; font: inherit; font-size: 14.5px; padding: 8px 10px;
  border: 1px solid var(--line-2); border-radius: 8px; resize: vertical;
  background: var(--card-2); color: var(--ink);
}

#score-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 14px;
}
#footer-sections { display: flex; gap: 12px; flex-wrap: wrap; }
#footer-sections span b { color: var(--ink); }
#footer-index { font-weight: 800; font-size: 18px; color: var(--ink); white-space: nowrap; }

/* dashboard */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
}
.stat .s-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.stat .s-value {
  font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  color: var(--ink); margin-top: 6px;
}
.stat .s-value.s-none { color: var(--faint); font-weight: 600; font-size: 30px; }
.stat .s-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 16px; overflow-x: auto;
}
.panel h3 {
  margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
/* 8: a panel that says its piece in a sentence rather than a one-row table. */
.panel .one-line { margin: 0; font-size: 15px; line-height: 1.55; }
.panel .one-line b { font-weight: 800; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th {
  color: var(--muted); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
}
td.num, th.num { text-align: right; }
.pos { color: var(--good); font-weight: 700; }
.neg { color: var(--bad); font-weight: 700; }
.dn { color: var(--ink); font-weight: 800; }

/* 13: a gap is the point of the assessment, not a failure state - so it
   carries its size in weight and in a bar, and leaves red to lateness. Four
   steps of emphasis, biggest gap heaviest. */
.gap-0 { color: var(--faint); }
.gap-1 { color: var(--muted); font-weight: 600; }
.gap-2 { color: var(--ink); font-weight: 700; }
.gap-3 { color: var(--ink); font-weight: 800; font-size: 15px; }
.gaptrack {
  display: block; width: 96px; height: 6px; border-radius: 3px;
  background: var(--card-3); overflow: hidden;
}
.gaptrack > i { display: block; height: 100%; background: var(--muted); border-radius: 3px; }
.gapbar {
  display: inline-block; height: 8px; background: var(--muted);
  border-radius: 4px; vertical-align: middle;
}
canvas { max-width: 100%; }

/* targets */
.target-row {
  display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; margin-bottom: 0;
}
.target-row .t-name { flex: 1; font-size: 14.5px; }
.target-row input {
  width: 72px; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line-2);
  border-radius: 6px; text-align: center; background: var(--card-2); color: var(--ink);
}
#target-msg { font-size: 14px; color: var(--good); font-weight: 600; }

@media (max-width: 640px) {
  #footer-sections { gap: 8px; font-size: 12.5px; }
  main { padding: 10px; padding-bottom: 96px; }
}

/* ============ added: client card, recommendations, PDCA tracker ============ */

/* six tabs need to scroll on a phone rather than squeeze */
#tabs button { flex: 0 0 auto; min-width: 88px; }
@media (min-width: 720px) { #tabs button { flex: 1 1 auto; } }

.ghost.tiny {
  font-size: 12.5px; padding: 5px 10px; border-radius: 6px;
  color: var(--ink); border: 1px solid var(--line-2); background: var(--card-2);
}
.ghost.tiny:hover { border-color: var(--line-2); background: var(--card-3); }
.ghost.danger { color: var(--bad); }
.fine { font-size: 12px; color: var(--muted); margin: 8px 0 0; white-space: normal; }
.muted { color: var(--muted); }
.note {
  background: var(--st-risk-bg); border: 1px solid var(--st-risk-line); color: var(--st-risk-ink);
  border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px;
}

/* client list: access code row */
.client-card { cursor: pointer; }
.code-row {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px;
}
.code-label { color: var(--muted); font-weight: 600; }
.code-val {
  background: var(--card-3); color: var(--ink); border-radius: 5px;
  padding: 2px 7px; font-size: 12.5px; font-weight: 700;
}
.code-row .ghost { margin-left: auto; }

/* ---- client card ---- */
.card-hero {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ch-name { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.ch-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ch-stats { display: flex; gap: 18px; }
.ch-stats div { text-align: center; }
.ch-stats b { display: block; font-size: 26px; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); }
.ch-stats span {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

.loc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; margin-bottom: 0;
}
.loc-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.loc-name { font-weight: 700; font-size: 16.5px; }
.loc-latest b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.loc-latest span { font-size: 12.5px; color: var(--muted); margin-left: 4px; }

.year-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ychip {
  border: 1px solid var(--ink); border-radius: 8px; background: var(--card-2);
  padding: 7px 11px; min-width: 72px; text-align: center; line-height: 1.25;
  display: flex; flex-direction: column; gap: 1px;
}
.ychip .y { font-size: 12px; font-weight: 700; color: var(--ink); }
.ychip .v { font-size: 17px; font-weight: 800; color: var(--ink); }
.ychip .s { font-size: 10.5px; color: var(--ink); }
.ychip.done { background: var(--st-track-bg); }
.ychip.open { background: var(--st-risk-bg); }
.ychip.hist { background: var(--card); opacity: .6; }
.ychip.new { border-style: dashed; background: var(--accent-bg); }
.ychip:not(:disabled):active { transform: scale(.97); }

/* 14: rendered on every location card, open actions or not, so two cards in
   a row never differ by the height of this line. */
.loc-actions {
  margin-top: auto; padding-top: 10px; background: none; border: none;
  text-align: left; color: var(--muted); font-size: 13px; font-weight: 700;
  min-height: 32px;
}
.loc-actions:not(:disabled):hover { color: var(--ink); }
.loc-actions:disabled { cursor: default; color: var(--faint); font-weight: 600; }

/* ---- recommendations ---- */
.rec-card {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 8px; padding: 11px 12px; margin-bottom: 0;
  display: flex; flex-direction: column;
}
/* Sequencing tier, not a status: Stability first through Perfection last.
   Held on the card edge only, so it never competes with the status pill. */
.rec-card.tier-1 { border-left-color: var(--tier-1); }
.rec-card.tier-2 { border-left-color: var(--tier-2); }
.rec-card.tier-3 { border-left-color: var(--tier-3); }
.rec-card.tier-4 { border-left-color: var(--tier-4); }
.rec-top { display: flex; align-items: flex-start; gap: 12px; }
.rec-rank {
  background: var(--card-3); color: var(--ink); border-radius: 50%; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex: 0 0 auto;
}
.rec-title { flex: 1; min-width: 0; }
.rec-tool { font-weight: 800; font-size: 15.5px; color: var(--ink); }
.rec-where { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.tier-tag {
  display: inline-block; background: var(--card-3); color: var(--muted);
  border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; margin-left: 4px;
}
.rec-nums { text-align: right; flex: 0 0 auto; }
.rec-gap { font-weight: 800; font-size: 15px; }
.rec-sub { font-size: 11.5px; color: var(--muted); }
.rec-why { font-size: 13px; color: var(--muted); margin-top: 8px; }
.rec-move { font-size: 13.5px; margin-top: 6px; line-height: 1.45; }
.add-act { margin-top: 10px; }

.ai-panel { border-left: 4px solid var(--accent); }
.ai-headline { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.ai-summary { font-size: 14px; line-height: 1.55; margin: 0 0 12px; }
.ai-seq { margin: 0; padding-left: 20px; }
.ai-seq li { margin-bottom: 14px; font-size: 13.5px; line-height: 1.5; }
.ai-step-head b { color: var(--ink); font-size: 14.5px; }
.ai-where {
  background: var(--card-3); color: var(--muted); border-radius: 4px;
  padding: 1px 7px; font-size: 11.5px; font-weight: 700; margin-left: 6px;
}
.ai-why { margin-top: 3px; color: var(--muted); }
.ai-90, .ai-meas { margin-top: 4px; }
.ai-watch { margin-top: 10px; font-size: 13.5px; }
.ai-watch ul { margin: 4px 0 0; padding-left: 20px; }
#rec-msg { font-size: 13.5px; color: var(--muted); font-weight: 600; }

/* ---- PDCA board ---- */
.pdca-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px; align-items: start;
}
/* 5: the phase is named in the header and the status is on a pill, so the
   column background was encoding nothing. One barely-there wash of --card for
   every column; the card's derived status carries the colour.
   6: and an empty column is allowed to be short. */
.pdca-col {
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; min-height: 0;
}
.pdca-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); margin-bottom: 10px;
}
.pdca-head span {
  background: var(--card-2); border-radius: 10px; padding: 1px 8px;
  font-size: 11.5px; letter-spacing: 0; color: var(--muted);
}
.pdca-empty {
  text-align: center; color: var(--faint); font-size: 12.5px;
  line-height: 1.4; padding: 4px 6px 8px; white-space: normal;
}
.act-card {
  display: block; width: 100%; text-align: left; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px;
}
.act-card:active { transform: scale(.99); }
.act-title { font-weight: 700; font-size: 13.5px; line-height: 1.35; white-space: normal; }
.act-loc { background: var(--card-3); color: var(--muted); border-radius: 4px; padding: 1px 6px; font-weight: 700; }
.act-tool { font-size: 11.5px; color: var(--muted); margin-top: 4px; white-space: normal; }
@media (max-width: 1100px) {
  .pdca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pdca-grid { grid-template-columns: 1fr; }
}

/* ---- modal ---- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 40;
  display: flex; align-items: flex-start; justify-content: center; padding: 20px;
  overflow-y: auto;
}
.modal.hidden { display: none; }
.modal-card {
  background: var(--card); border-radius: 12px; padding: 16px; width: 100%;
  max-width: 640px; box-shadow: 0 24px 70px rgba(0,0,0,.7); margin: auto;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.modal-head .ghost { font-size: 24px; line-height: 1; padding: 0 8px; }
.modal-card .form-grid select {
  display: block; width: 100%; margin-top: 4px; font-size: 15px;
}
.modal-foot { display: flex; align-items: center; gap: 10px; }
.modal-foot .spacer { flex: 1; }

/* version badge — matches the RDS field app's #ver */
.ver { font-size: 10px; font-weight: 400; opacity: .65; letter-spacing: .5px; }
.login-card h1 .ver { font-size: 11px; vertical-align: middle; }

/* sign out */
.signout {
  background: var(--card-2); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 20px; padding: 4px 11px; font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
}
.signout:active { background: var(--card-3); }

/* PDCA card: header opens the editor, note is edited in place */
.act-card { padding: 10px 10px 8px; }
.act-open {
  display: block; width: 100%; text-align: left; background: none;
  border: none; padding: 0; margin: 0;
}
.act-open:active { transform: scale(.99); }
.act-note { margin-top: 8px; }
.act-note label {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.act-note textarea {
  display: block;
  width: 100%; font: inherit; font-size: 12.5px; line-height: 1.4;
  padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--card-2); resize: vertical; min-height: 44px; color: var(--ink);
}
.act-note textarea:focus {
  outline: none; border-color: var(--accent); background: var(--card-3);
  box-shadow: 0 0 0 2px var(--accent-bg);
}
.act-note textarea.saving { border-color: var(--warn); }
.act-note textarea.saved { border-color: var(--good); }
.act-note textarea.failed { border-color: var(--bad); background: var(--st-late-bg); }
.act-nav {
  display: flex; align-items: center; gap: 6px; margin-top: 7px;
  padding-top: 7px; border-top: 1px solid var(--line);
}
.act-nav .spacer { flex: 1; }
.act-nav .phase-btn { font-size: 11px; padding: 2px 7px; }
.phase-btn:disabled { opacity: .5; }

/* ---- derived action status: Complete / On-track / At Risk / Late ----
   Muted, low-saturation takes on the four signal colours: they read as status
   on a white card without shouting. One token set per state, so the PDCA card,
   the dashboard pill and the legend all pull from the same place. */
:root {
  --st-done-ink:  #8fbde8;  --st-done-bg:  #182741;  --st-done-line:  #2f4a6e;
  --st-track-ink: #7ac795;  --st-track-bg: #16281d;  --st-track-line: #2f5a3d;
  --st-risk-ink:  #d9b96a;  --st-risk-bg:  #2a2415;  --st-risk-line:  #5a4a20;
  --st-late-ink:  #e58888;  --st-late-bg:  #2c1a1c;  --st-late-line:  #593034;

  /* sequencing tiers, used on the rec card edge only */
  --tier-1: #c9787a;  --tier-2: #c2924f;  --tier-3: #6a93c4;  --tier-4: #5fa377;
}
.st-done  { --st-ink: var(--st-done-ink);  --st-bg: var(--st-done-bg);  --st-line: var(--st-done-line); }
.st-track { --st-ink: var(--st-track-ink); --st-bg: var(--st-track-bg); --st-line: var(--st-track-line); }
.st-risk  { --st-ink: var(--st-risk-ink);  --st-bg: var(--st-risk-bg);  --st-line: var(--st-risk-line); }
.st-late  { --st-ink: var(--st-late-ink);  --st-bg: var(--st-late-bg);  --st-line: var(--st-late-line); }

/* the PDCA card, tinted and edged in its status colour */
.act-card.st-done, .act-card.st-track, .act-card.st-risk, .act-card.st-late {
  background: var(--st-bg);
  border-color: var(--st-line);
  border-left: 3px solid var(--st-ink);
}
.act-card .act-note textarea { background: var(--card); }
.act-status {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--st-ink); background: var(--card); border: 1px solid var(--st-line);
  border-radius: 20px; padding: 2px 9px;
}
.act-status i, .st-pill i, .st-key i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--st-ink); flex: none;
}

/* the dashboard action table */
.t-scroll { overflow-x: auto; }
.act-table { width: 100%; }
.act-table .act-cell { white-space: normal; min-width: 200px; max-width: 420px; }
.act-table .st-row { background: var(--st-bg); }
.act-table .st-row td:first-child { box-shadow: inset 3px 0 0 var(--st-ink); }
.st-pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--st-ink);
  background: var(--card); border: 1px solid var(--st-line); border-radius: 20px; padding: 2px 9px;
}
.st-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.st-key {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--st-ink);
  background: var(--st-bg); border: 1px solid var(--st-line);
  border-radius: 20px; padding: 3px 10px;
}

/* ---- At Risk toggle, centred between Delete and Save ---- */
.modal-err { margin: 6px 0 8px; }
.modal-err:empty { display: none; }
.risk-btn {
  background: var(--card-2); color: var(--st-risk-ink); border: 1px solid var(--st-risk-line);
  border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.risk-btn.on {
  background: var(--st-risk-bg); border-color: var(--st-risk-ink);
  box-shadow: inset 0 0 0 1px var(--st-risk-ink);
}
.risk-btn:active { transform: scale(.98); }

/* ---- lock / unlock a saved assessment ----
   Under the chip rather than pinned to its corner: the year chips sit on an 8px
   gap, so a corner badge would overlap the chip next door on a narrow phone. */
.ychip-wrap { display: flex; flex-direction: column; gap: 3px; }
.ychip-wrap .ychip { flex: 1; }
.ychip-lock {
  border: 1px solid var(--line); border-radius: 6px; background: var(--card-2);
  padding: 2px 0; font-size: 11px; line-height: 1.5; color: var(--muted);
}
.ychip-lock.on { border-color: var(--line-2); background: var(--card-3); }
.ychip-lock:active { transform: scale(.94); }
.ychip-lock:disabled { opacity: .5; }
.ychip.locked { background: var(--card); opacity: .72; }
.lock-note {
  background: var(--card-2); border: 1px solid var(--line-2); color: var(--muted);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 600;
  margin-bottom: 10px; white-space: normal;
}

/* ============ added: side-by-side card grids ============
   Targets, Assessments (locations) and the Recommend tab's Prioritized
   Actions were full-width stacks — one card per row, most of it whitespace on
   anything wider than a phone. Each is now an auto-filling grid: narrower
   cards, as many per row as fit, reading 1,2,3... left-to-right then down
   (CSS grid's default row flow). The two *tables* on the Recommend tab —
   "Where to start" and "Site-wide themes" — are untouched. */

/* Assessments: one card per location. The floor is set so a 1600px column
   lands on four per row rather than five - past about 380px a location card
   is mostly air. 14: stretch, not start, so a row shares one height. */
#card-locations {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px; align-items: stretch;
}

/* Targets: one row per rubric category, section headers span the full width */
#target-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px; align-items: start;
}
#target-list .sec-header { grid-column: 1 / -1; margin: 14px 0 0; }
#target-list .sec-header:first-child { margin-top: 0; }

/* Recommend: the Prioritized Actions cards only (#rec-list), not the tables */
#rec-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px; align-items: stretch;
}
#rec-list .fine { grid-column: 1 / -1; }

/* A rec card in a 310px column has no room for a right-hand number block on
   the same line, so let it wrap under the title and keep the button on the
   card's bottom edge so a row of cards ends level. */
.rec-card .rec-top { flex-wrap: wrap; }
.rec-card .rec-nums { margin-left: auto; }
.rec-card .rec-tool { font-size: 14.5px; line-height: 1.25; }
.rec-card .rec-why, .rec-card .rec-move { white-space: normal; }
.rec-card .add-act { margin-top: auto; align-self: flex-start; padding-top: 10px; }

/* Below ~700px the grids collapse to a single column on their own (the
   minmax floor exceeds the viewport), which is the phone layout as before. */


/* ============ added: circuit-trace corners ============
   The tabs are short - Targets and Export leave most of a laptop viewport
   empty - so the two lower corners carry a decorative circuit motif.

   Geometry is radial: concentric arcs centred on the page corner itself, with
   vias hopping between neighbouring arcs and spurs breaking off and running
   out along the radius, so the traces sweep *through* the corner and every
   branch aims back into it. Drawing vocabulary is the circuit one - a
   teal-to-blue gradient, ring terminators, connector combs, a racetrack loop
   and a few solid chamfered blocks.

   Two things keep it from turning into a rainbow or a border. Arc spans are
   staggered so no two ends line up, and are clamped by asin(height/radius) so
   a wide arc stops at the top edge instead of running off it mid-sweep. Spurs
   are kept short - long ones drag the weight out of the corner.

   Sized with `contain` and anchored `left bottom`, so the full sweep is always
   visible and the artwork's own corner lands on the viewport's corner at any
   aspect ratio.

   One inline SVG data URI, mirrored for the right-hand side. Inline rather
   than its own file so it rides along in style.css and stays available offline
   without adding an entry to the service worker's SHELL. */
body::before, body::after {
  content: ""; position: fixed; bottom: 0; z-index: 0; pointer-events: none;
  width: min(48vw, 660px); height: min(40vh, 350px);
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20760%20400'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='1'%20x2='1'%20y2='0'%3E%3Cstop%20offset='0'%20stop-color='%233fd0b8'/%3E%3Cstop%20offset='1'%20stop-color='%234f9ed6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='url(%23g)'%20stroke-width='2'%20stroke-linecap='round'%3E%3Cpath%20d='M95.8%20393.3%20A96.0%2096.0%200%200%200%203.4%20304.1'/%3E%3Cpath%20d='M158.0%20400.0%20A158.0%20158.0%200%200%200%2048.8%20249.7'/%3E%3Cpath%20d='M221.1%20353.0%20A226.0%20226.0%200%200%200%200.0%20174.0'/%3E%3Cpath%20d='M300.0%20400.0%20A300.0%20300.0%200%200%200%20150.0%20140.2'/%3E%3Cpath%20d='M378.3%20346.8%20A382.0%20382.0%200%200%200%2026.6%2018.9'/%3E%3Cpath%20d='M470.0%20400.0%20A470.0%20470.0%200%200%200%20289.4%2029.6'/%3E%3Cpath%20d='M83.1%20352.0%20L136.8%20321.0'/%3E%3Cpath%20d='M83.7%20266.0%20L119.8%20208.3'/%3E%3Cpath%20d='M212.4%20322.7%20L281.9%20297.4'/%3E%3Cpath%20d='M112.4%20121.8%20L143.1%2045.8'/%3E%3Cpath%20d='M316.7%20186.4%20L389.6%20137.2'/%3E%3Cpath%20d='M456.0%20286.3%20L549.2%20263.1'/%3E%3Cpath%20d='M94.5%20383.3%20L124.1%20378.1'/%3E%3Cpath%20d='M27.4%20244.4%20L32.3%20216.8'/%3E%3Cpath%20d='M162.6%20243.0%20L185.6%20220.8'/%3E%3Cpath%20d='M31.4%20101.6%20L34.1%2075.8'/%3E%3Cpath%20d='M349.0%20244.6%20L376.4%20232.4'/%3E%3Cpath%20d='M326.5%2061.9%20L345.9%2041.8'/%3E%3Cpath%20d='M212.4%20322.7%20L222.7%20318.9'/%3E%3Cpath%20d='M203.1%20300.9%20L213.0%20296.1'/%3E%3Cpath%20d='M191.7%20280.2%20L201.0%20274.4'/%3E%3Cpath%20d='M178.1%20260.9%20L186.8%20254.1'/%3E%3Cpath%20d='M162.6%20243.0%20L170.5%20235.4'/%3E%3Cpath%20d='M145.3%20226.9%20L152.3%20218.4'/%3E%3Cpath%20d='M126.4%20212.6%20L132.5%20203.5'/%3E%3Cpath%20d='M467.4%20350.9%20L478.4%20349.7'/%3E%3Cpath%20d='M459.7%20302.3%20L470.5%20300.0'/%3E%3Cpath%20d='M447.0%20254.8%20L457.5%20251.4'/%3E%3Cpath%20d='M429.4%20208.8%20L439.4%20204.4'/%3E%3Cpath%20d='M407.0%20165.0%20L416.6%20159.5'/%3E%3Cpath%20d='M380.2%20123.7%20L389.1%20117.3'/%3E%3Cpath%20d='M83.1%20352.0%20L91.8%20347.0'/%3E%3Cpath%20d='M76.7%20342.2%20L84.7%20336.2'/%3E%3Cpath%20d='M69.1%20333.3%20L76.3%20326.4'/%3E%3Cpath%20d='M60.4%20325.4%20L66.7%20317.6'/%3E%3Cpath%20d='M50.9%20318.6%20L56.2%20310.1'/%3E%3Cpath%20d='M40.6%20313.0%20L44.8%20303.9'/%3E%3Crect%20x='270'%20y='344'%20width='48'%20height='26'%20rx='13'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='url(%23g)'%20stroke-width='1.6'%20opacity='.45'%3E%3Cpath%20d='M562.9%20340.8%20A566.0%20566.0%200%200%200%20433.6%2036.2'/%3E%3Cpath%20d='M670.0%20400.0%20A670.0%20670.0%200%200%200%20580.2%2065.0'/%3E%3Cpath%20d='M120.3%20356.2%20A128.0%20128.0%200%200%200%2056.1%20285.0'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='url(%23g)'%20stroke-width='2'%3E%3Ccircle%20cx='95.8'%20cy='393.3'%20r='5'/%3E%3Ccircle%20cx='3.4'%20cy='304.1'%20r='5'/%3E%3Ccircle%20cx='158.0'%20cy='400.0'%20r='5'/%3E%3Ccircle%20cx='48.8'%20cy='249.7'%20r='5'/%3E%3Ccircle%20cx='221.1'%20cy='353.0'%20r='5'/%3E%3Ccircle%20cx='0.0'%20cy='174.0'%20r='5'/%3E%3Ccircle%20cx='300.0'%20cy='400.0'%20r='5'/%3E%3Ccircle%20cx='150.0'%20cy='140.2'%20r='5'/%3E%3Ccircle%20cx='378.3'%20cy='346.8'%20r='5'/%3E%3Ccircle%20cx='26.6'%20cy='18.9'%20r='5'/%3E%3Ccircle%20cx='470.0'%20cy='400.0'%20r='5'/%3E%3Ccircle%20cx='289.4'%20cy='29.6'%20r='5'/%3E%3Ccircle%20cx='124.1'%20cy='378.1'%20r='5'/%3E%3Ccircle%20cx='32.3'%20cy='216.8'%20r='5'/%3E%3Ccircle%20cx='185.6'%20cy='220.8'%20r='5'/%3E%3Ccircle%20cx='34.1'%20cy='75.8'%20r='5'/%3E%3Ccircle%20cx='376.4'%20cy='232.4'%20r='5'/%3E%3Ccircle%20cx='345.9'%20cy='41.8'%20r='5'/%3E%3C/g%3E%3Cg%20fill='url(%23g)'%3E%3Ccircle%20cx='136.8'%20cy='321.0'%20r='4.5'/%3E%3Ccircle%20cx='119.8'%20cy='208.3'%20r='4.5'/%3E%3Ccircle%20cx='281.9'%20cy='297.4'%20r='4.5'/%3E%3Ccircle%20cx='143.1'%20cy='45.8'%20r='4.5'/%3E%3Ccircle%20cx='389.6'%20cy='137.2'%20r='4.5'/%3E%3Ccircle%20cx='549.2'%20cy='263.1'%20r='4.5'/%3E%3Cpath%20d='M430%20300h58l-11%2013h-47z'/%3E%3Cpath%20d='M62%20152h42l11%2011v13h-53z'/%3E%3Cpath%20d='M556%20370h74l-13%2015h-63z'/%3E%3C/g%3E%3C/svg%3E") left bottom / contain no-repeat;
  opacity: .46;
  -webkit-mask-image: linear-gradient(to top right, #000 14%, rgba(0,0,0,.4) 48%, transparent 84%);
  mask-image: linear-gradient(to top right, #000 14%, rgba(0,0,0,.4) 48%, transparent 84%);
}
body::before { left: 0; }
body::after { right: 0; transform: scaleX(-1); }

/* Lift the real UI above the decoration. A fixed pseudo-element at z-index 0
   paints above ordinary in-flow content, so anything the traces could sit on
   top of needs its own stacking position. The header, tab strip, score footer
   and action modal already stack themselves; these two do not - main covers
   both the client list and the app, and the login card is not inside a main
   at all, so it needs naming separately. */
main, #login-view { position: relative; z-index: 1; }

/* On a phone the corners would crowd a one-column layout, and this is a field
   tool first - scoring happens on a handset. Drop them below the tablet break. */
@media (max-width: 720px) { body::before, body::after { display: none; } }


/* ============ 4 + 6 + 10 + 11 + 14: layout rebalance ======================
   Everything below reshapes a card or a column that was carrying its content
   badly. No colour is introduced here that is not already a token above. */

/* ---- 14: every location card is the same height ---------------------------
   Two rows used to render conditionally - the lock button under a year chip,
   and the open-actions link at the foot - so a location with one saved year
   stood a good 60px shorter than its neighbour and the grid read as broken.
   Both rows are now always present: the lock gets a same-size placeholder on
   chips that cannot be locked, and the foot renders disabled when there is
   nothing open. */
.loc-card { display: flex; flex-direction: column; height: 100%; }
.loc-card .year-chips { margin-bottom: 2px; }
.ychip-wrap { min-width: 0; }
.ychip-spacer {
  height: 22px; border: 1px solid transparent; border-radius: 6px;
  pointer-events: none;
}

/* ---- 10: the targets grid -------------------------------------------------
   Was a flex row, so a two-line label such as Material Handling/Presentation
   pushed its own input sideways and out of line with card 16 next door. Now a
   three-column grid whose last track is a fixed width, which puts every input
   on the same offset from its card edge whatever the label does, and a label
   cell tall enough for two lines so wrapping moves nothing. */
.target-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 92px;
  align-items: center; column-gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 0;
}
.target-row .t-no {
  font-size: 12px; font-weight: 800; color: var(--faint); text-align: right;
}
.target-row .t-name {
  font-size: 14px; line-height: 1.3; min-height: 2.6em;
  display: flex; align-items: center; white-space: normal;
}
.t-input { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }
.target-row input {
  width: 62px; font-size: 15px; padding: 6px 8px; border: 1px solid var(--line-2);
  border-radius: 6px; text-align: right; background: var(--card-2); color: var(--ink);
}
/* 10: an unset target is not a target of zero. Empty shows a dash and sits
   quiet; a real value - zero included - is full-strength ink. */
.target-row input:placeholder-shown { color: var(--faint); }
.target-row input::placeholder { color: var(--faint); opacity: 1; }
.t-input .t-of { font-size: 12px; font-weight: 700; color: var(--faint); }

/* ---- 4: the Actions card -------------------------------------------------
   The note box ran the height of a laptop screen and squeezed everything that
   said what the action was into slivers. Reading order is now title, then the
   row that answers "is this in trouble and whose is it", then where it came
   from, then the note. The note opens to a working size on focus and drops
   back afterwards, so a column of cards stays scannable.
   Autosave, the amber/green border states and the Plan/Do arrows are
   untouched - only the order and the resting height changed. */
.act-card { padding: 9px 10px 4px; }
.act-card .act-open { margin-bottom: 5px; }
/* Three lines is enough to recognise an action; the editor holds the rest,
   and the tooltip carries the full title in the meantime. Without the clamp a
   long title alone can push a card past twice its resting height. */
.act-title {
  font-weight: 700; font-size: 14px; line-height: 1.3; white-space: normal;
  color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
}

/* status, owner and due date on one line, always visible without scrolling */
.act-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px;
  font-size: 11.5px; color: var(--muted); margin-bottom: 4px;
}
.act-line .act-status { margin-top: 0; }
.act-line .al-owner { font-weight: 700; color: var(--ink); }
.act-line .al-owner.none { font-weight: 400; color: var(--faint); }
.act-line .al-due { white-space: nowrap; }
.act-line .al-due.overdue { color: var(--st-late-ink); font-weight: 700; }

/* where it came from: location, rubric category, CI tool */
.act-where {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px;
  font-size: 11px; color: var(--muted); margin-bottom: 5px; white-space: normal;
}
.act-where .sep { color: var(--faint); }

.act-card .act-note { margin-top: 0; }
.act-card .act-note textarea {
  min-height: 0; height: 64px; margin: 0; transition: height .14s ease;
}
/* An action being written into needs room; one being read past does not. A
   height dragged by hand is an inline style and still wins over both. */
.act-card .act-note textarea:focus { height: 152px; }
.act-nav { margin-top: 4px; padding-top: 4px; }

/* ---- 11: Export as a deliverables page ------------------------------------
   One card per artifact, each saying what is inside it, so the tab that is
   closest to what SMN actually hands over stops being a paragraph and a
   button on an empty screen. */
.dl-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px; align-items: stretch;
}
/* A strip saying what this year's pack actually contains, above the two
   artifacts it goes into. */
.dl-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 18px 20px;
}
.dl-summary:empty { display: none; }
.dl-stat-v {
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: var(--ink);
}
.dl-stat-l {
  font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
}
.dl-stat-s { font-size: 12.5px; color: var(--faint); margin-top: 3px; }

.dl-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px;
}
.dl-kind {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.dl-name { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.dl-sub { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.dl-sheets { list-style: none; margin: 4px 0 0; padding: 0; }
.dl-sheets li {
  display: grid; grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px; padding: 10px 0; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.5;
}
.dl-sheets li b { font-weight: 700; color: var(--ink); }
.dl-sheets li span { color: var(--muted); }
.dl-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 12px; }
.dl-brand {
  display: flex; align-items: center; gap: 10px; margin-top: 2px;
  font-size: 12.5px; color: var(--muted);
}
.dl-brand img {
  height: 26px; width: auto; max-width: 120px; border-radius: 4px; background: var(--card-2);
}
.dl-note { font-size: 12.5px; color: var(--faint); margin: 14px 0 0; line-height: 1.5; }

@media (max-width: 720px) {
  .dl-grid { grid-template-columns: 1fr; }
  .dl-sheets li { grid-template-columns: 1fr; gap: 2px; }
}