:root {
  /* Light, matching getautoscope.com and the Hidden Shift Scorecard. Tells the
     browser to render its own chrome light too - scrollbars, the native picker
     behind <input type=date>, and the <select> dropdown. Without it those stay
     dark and stick out badly. */
  color-scheme: light;

  /* Surfaces, DARKEST-last - the ramp runs the opposite way from the old dark
     theme. bg is the page and sits slightly grey so a white card lifts off it;
     card-3 is the most deeply nested thing (a status pill on a tinted card)
     and is the most tinted, not the lightest. Ink is AutoScope navy. */
  --bg:      #F4F7FC;
  --tabs:    #FFFFFF;
  --header:  #FFFFFF;
  --card:    #FFFFFF;
  --card-2:  #F3F7FD;
  --card-3:  #E9F0FA;

  --line:    #E3EAF5;
  --line-2:  #CFDAEC;

  --ink:     #0A1A40;
  --muted:   #55638A;
  --faint:   #8492B4;

  /* 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.

     This is AutoScope blue, the exact value the website and the scorecard use.
     It replaced a mint-teal that sat far too close to the On-track status
     green - the old palette needed a written rule to keep the accent off the
     cards because hue alone could not separate them. Blue is nowhere near any
     of the four status colours, so that hazard is gone; the accent still stays
     off the cards, but now by choice rather than by necessity. */
  --accent:     #3B6EF6;
  --accent-dim: #2A52D8;
  --accent-ink: #FFFFFF;
  --accent-bg:  #E8EFFE;

  /* Same three hues as the dark theme, re-levelled for a light ground. --good
     and --bad are TEXT (.pos, .neg, .err, .ghost.danger), so at their dark
     lightness they failed on white and had to come down; --warn is only ever a
     dot or a border, so it is unchanged. */
  --good: #247344;
  --warn: #DFA45C;
  --bad:  #C9414F;
  --radius: 10px;

  /* On the old dark theme a card separated from the page by being lighter than
     it. On light there is nowhere lighter to go - a white card on a near-white
     page is a 1px hairline apart - so the separation has to come from a shadow
     instead. Deliberately shallow and navy-tinted rather than grey: at this
     size it reads as the card sitting on the page, not as a drop shadow. */
  --shadow-card: 0 1px 2px rgba(10,26,64,.04), 0 6px 16px -10px rgba(10,26,64,.16);

  /* 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 18px 50px -20px rgba(10,26,64,.30);
}
.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 16px 42px -16px rgba(10,26,64,.30);
  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. */
/* Targets joins the reading-width tabs. At full page width its grid ran to
   four 344px columns across 1440px, which left a wide gulf between each
   category name and its input and read like a spreadsheet stretched to fill
   the window. Clamped, the columns pack properly and the tab looks composed -
   at the cost of a slightly taller run of rows, which is the better trade. */
#tab-rubric, #tab-targets, #client-view main { max-width: var(--page-read); }

/* Every card surface, lifted off the page. Grouped here rather than added to
   each rule so there is one place to tune the depth. */
.area-card, .cat-card, .stat, .panel, .card-hero, .loc-card,
.rec-card, .act-card, .dl-card, .dl-summary, .target-row {
  box-shadow: var(--shadow-card);
}
.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);
  overflow: hidden;
}

/* ---- evidence photos, beside each rubric card ----------------------------
   The rubric is a reading column and stays one: the card keeps its measure
   and the panel is given its own track to the right, rather than the column
   being widened and the Likert wording allowed to run long. The panel is
   outside the card so it holds its place when the card expands, and so a
   collapsed row still shows whether there is evidence behind the score. */
#tab-rubric { max-width: calc(var(--page-read) + 212px); }
.cat-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px;
  gap: 12px; align-items: start; margin-bottom: 10px;
}
.cat-photos {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-height: 59px; padding: 9px 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.photo-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-thumb {
  width: 38px; height: 38px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--card-2);
}
.photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A frame the browser could not fetch, so the row does not just show a gap. */
.photo-thumb.broken { border-style: dashed; }
.photo-add {
  border: 1px dashed var(--line-2); border-radius: 8px; background: none;
  color: var(--muted); font-weight: 700; font-size: 12px; padding: 9px 10px;
  cursor: pointer;
}
/* Once there is a thumbnail to sit beside, the label is redundant and the
   button shrinks to match the frames. */
.photo-add.compact {
  width: 38px; height: 38px; padding: 0; font-size: 17px; line-height: 1;
}
.photo-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.photo-add:disabled { opacity: .55; cursor: not-allowed; }

/* Phone: the panel is a strip under its card rather than a second column -- a
   200px track next to a 320px card leaves neither enough room. */
@media (max-width: 900px) {
  .cat-row { grid-template-columns: 1fr; gap: 6px; }
  .cat-photos { min-height: 0; }
}

.photo-modal-card { max-width: 900px; }
.photo-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; max-height: 68vh; overflow: hidden;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.photo-stage img { display: block; max-width: 100%; max-height: 68vh; object-fit: contain; }
.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;
  user-select: none;   /* a double-click scores it; do not highlight the text */
}
.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; }
/* A password stored with no username: since v25 that pair cannot sign in, so
   it reads as a problem to fix rather than a working credential. */
.code-val.stale { color: var(--bad); font-weight: 600; }
/* the rename/delete pair sits right-aligned as a group, not spread apart by
   the margin-left:auto that pushes the single sign-in button over */
.admin-row { justify-content: flex-end; gap: 6px; }
.admin-row .ghost { margin-left: 0; }

/* ---- 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; }

/* Rename / delete, on every location card. Sits under the open-actions line
   (which carries the margin-top:auto that pins the pair to the card foot). */
.loc-admin {
  display: flex; gap: 6px; justify-content: flex-end;
  padding-top: 8px; border-top: 1px solid var(--line);
}

/* ---- 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(10,26,64,.42); 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 28px 70px -24px rgba(10,26,64,.38); 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 {
  /* The four status hues, each now a dark ink on a pale tint of itself. The
     hues are the ones chosen for the dark theme and carried over deliberately;
     only their lightness moved, because a pill's ink and its background have
     to swap roles when the ground goes from navy to white.

     Done is a muted slate-lavender rather than the sky blue it used to be:
     with a blue accent, a blue "Done" pill would compete with every button on
     the screen. Settled work should recede. */
  --st-done-ink:  #5A6B96;  --st-done-bg:  #EEF1F8;  --st-done-line:  #D5DDEC;
  --st-track-ink: #247344;  --st-track-bg: #E8F5ED;  --st-track-line: #C6E4D2;
  --st-risk-ink:  #7E5B14;  --st-risk-bg:  #FBF3E0;  --st-risk-line:  #EBDCB6;
  --st-late-ink:  #BE424C;  --st-late-bg:  #FBECEE;  --st-late-line:  #F0CFD3;

  /* Sequencing tiers, used on the rec card edge only. These are now the exact
     four severity colours the Hidden Shift Scorecard uses on its own light
     ground - brick, ochre, blue, mint-green - so a client meets one visual
     language across both tools. Tier 3 is a lifted blue rather than --accent
     itself, so a data colour never reads as chrome. */
  --tier-1: #C4453D;  --tier-2: #B4762A;  --tier-3: #5B8BFF;  --tier-4: #17A67B;
}
.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. */

/* ============ 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. */


/* The decorative circuit-trace corners that used to sit here were removed at
   the user's request during the light-theme redesign. `main` and `#login-view`
   keep `position: relative` below: it was introduced to lift the UI above that
   decoration, but positioned ancestors are cheap and removing it could change
   how any absolutely-positioned descendant resolves, so it stays. */
main, #login-view { position: relative; z-index: 1; }


/* ============ 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 ---------------------------
   The open-actions link at the foot used to render only when there was one, so
   a location with nothing open stood shorter than its neighbour and the grid
   read as broken. It is now always present, disabled when there is nothing
   open. (A lock button under each year chip was the other half of this, until
   the lock was removed in v26 - every chip is now the same chip.) */
.loc-card { display: flex; flex-direction: column; height: 100%; }
.loc-card .year-chips { margin-bottom: 2px; }

/* ---- 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(--muted); text-align: right;
}
.target-row .t-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  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; font-weight: 700;
  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; }
}