/* Upwell product brand (docs/brand.md). Organizations may override only --accent,
   --accent-text and --series-1 inside their pages (decision 0010). Chart and status colors
   were checked with the data-viz palette validator.
   Status colors are for metric status only (decision 0015): --on-target, --near-target and
   --off-target. Coral also marks open items that need action before a month is closed. Every
   other state (closed, preliminary, waiting, complete…) is a neutral pill in --pill. */
:root {
  --deep: #0B2233;        /* product bar, headings, body text */
  --tide: #14527A;        /* brand blue: buttons and links */
  --undercurrent: #157A7A;
  --seafoam: #7FD1C7;
  --seafoam-tint: #D7ECE8;
  --coral: #D9573B;       /* "needs attention" only */
  --bg: #F3F6F7;          /* Surface */
  --surface: #FFFFFF;
  --text: #0B2233;
  --muted: #5B6B78;
  --border: #D9E1E6;       /* card edges and dividers (decorative) */
  --control-border: #748290; /* form fields and buttons: 3.9:1 on white (WCAG 1.4.11, finding F-52) */
  --focus: #14527A;        /* keyboard focus ring: Tide */
  --accent: #14527A;
  --accent-text: #FFFFFF;
  --danger: #B5412A;       /* form errors only, never a status */
  --pill: #14527A;         /* Tide: neutral state pills and notices */
  --radius: 8px;
  --series-1: #1A6493;    /* a lighter step of Tide; Tide itself is too dark for chart lines */
  --mix-focus: #1A6493;   /* a part in focus (VA collections) */
  --mix-rest: #8A96A0;    /* and the rest, quiet; checked with the palette validator in both modes */
  --target: #8A96A0;
  --grid: #E3E9ED;
  --axis: #C5D0D8;
  --text-muted: #5B6B78;
  --on-target: #0ca30c;
  --near-target: #fab219;
  --off-target: #D9573B;   /* Coral; never carries small text */
  --icon-glyph: #FFFFFF;   /* the mark inside a status icon */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Spectral", Georgia, serif;
  font-family: var(--font-body);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08151F;
    --surface: #10273A;
    --text: #E6EEF2;
    --muted: #9FB3C2;
    --border: #1E3A50;
    --control-border: #6A8598; /* 4.0:1 on the dark surface */
    --focus: #7FD1C7;      /* Seafoam */
    --accent: #7FD1C7;
    --accent-text: #0B2233;
    --danger: #F08A73;
    --pill: #7FD1C7;       /* Seafoam */
    /* status colors are the same in dark mode: each clears 3:1 on the dark surface */
    --on-target: #0ca30c;
    --near-target: #fab219;
    --off-target: #D9573B;
    --series-1: #4A9CC9;
    --mix-focus: #8CC8EA;
    --mix-rest: #6E7C88;
    --target: #8A96A0;
    --grid: #1E3A50;
    --axis: #2E4C63;
    --text-muted: #9FB3C2;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--accent); }
.product-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.35rem 1.25rem; background: var(--deep); color: #fff;
}
.product-bar .lockup { display: block; height: 56px; width: auto; }
.product-bar nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: 0.92rem; }
.product-bar a, .product-bar button.link, .product-bar summary { color: var(--seafoam); }
/* Menus in the bars (decision 0015, finding F-20): the user menu, organization switcher and Setup gear. */
details.nav-menu { position: relative; }
details.nav-menu > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; }
details.nav-menu > summary::-webkit-details-marker { display: none; }
details.nav-menu > summary .icon { width: 1.15em; height: 1.15em; }
details.nav-menu .menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; min-width: 230px; padding: 0.4rem 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(4, 30, 46, 0.14);
}
details.nav-menu .menu a, details.nav-menu .menu .menu-item {
  display: block; width: 100%; padding: 0.4rem 0.9rem; color: var(--text); text-decoration: none; border: 0;
  background: none; font: inherit; text-align: left; cursor: pointer;
}
details.nav-menu .menu a:hover, details.nav-menu .menu .menu-item:hover { background: var(--bg); }
details.nav-menu .menu form { margin: 0; }
.menu-note { margin: 0.1rem 0.9rem 0.4rem; font-size: 0.82rem; color: var(--muted); }
.menu-heading {
  margin: 0.5rem 0.9rem 0.15rem; font-size: 0.72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.menu-heading:first-child { margin-top: 0.2rem; }
.org-band {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.6rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--border);
}
.org-identity { display: flex; align-items: center; gap: 0.75rem; }
.org-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.band-month select { width: auto; padding: 0.3rem 0.5rem; font-weight: 600; background: var(--surface); }
.org-identity img { max-height: 36px; max-width: 160px; width: auto; display: block; }
.org-name { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--text); text-decoration: none; }
.org-band nav { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.95rem; }
.org-band nav a { color: var(--muted); text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.org-band nav a:hover { color: var(--text); }
.org-band nav a.active { color: var(--text); border-bottom-color: var(--accent); }
.org-band nav.zones { align-items: center; }
.org-band nav .zone-start { margin-left: 0.6rem; padding-left: 1.1rem; border-left: 1px solid var(--border); }
.org-band nav a.zone-start.active { border-bottom-color: var(--accent); }
.org-band .setup-menu > summary { color: var(--muted); padding: 0.2rem 0 0.2rem 1.1rem; border-bottom: 2px solid transparent; }
.org-band .setup-menu > summary:hover { color: var(--text); }
.org-band .setup-menu > summary.active { color: var(--text); border-bottom-color: var(--accent); }
.org-band nav .count {
  display: inline-block; min-width: 1.35em; padding: 0 0.35em; margin-left: 0.15rem; border-radius: 999px;
  border: 1px solid var(--pill); font-size: 0.75rem; line-height: 1.35; text-align: center; color: var(--text);
}
.entrance-logo { display: block; width: 200px; height: auto; margin: 2.5rem auto 0; }
main { max-width: 1040px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1 { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; margin: 0 0 1rem; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; margin: 1.75rem 0 0.75rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.narrow { max-width: 440px; margin: 2rem auto; }
.muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
form p, form .field { margin: 0 0 0.9rem; }
label { display: block; font-weight: 500; margin-bottom: 0.25rem; }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--control-border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit;
}
/* One visible focus ring for keyboard users everywhere (finding F-52). */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
input[type=checkbox] { margin-right: 0.4rem; }
.checks label { font-weight: 400; display: flex; align-items: center; margin: 0.2rem 0; }
.helptext, .help { display: block; color: var(--muted); font-size: 0.85rem; }
button, .button {
  display: inline-block; padding: 0.5rem 1rem; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--accent); color: var(--accent-text); font: inherit; text-decoration: none;
}
button.secondary, .button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--control-border); }
button.link { background: none; color: var(--accent); padding: 0; text-decoration: underline; }
.errorlist { color: var(--danger); margin: 0.25rem 0; padding-left: 1.1rem; }
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { padding: 0.6rem 0.8rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 0.5rem; }
.messages li.error { border-color: var(--danger); color: var(--danger); }
.messages li.success { border-color: var(--pill); }
/* Icons: 16×16 line drawings sized to the text. */
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon .solid, .icon .fill { fill: currentColor; stroke: none; }
.icon .glyph { stroke: var(--icon-glyph); stroke-width: 1.8; }
/* Pills: a neutral state (Tide outline, icon, word); .tag is a plain label; .attention is an open
   item that needs action before close (Coral icon, the word stays in text color). */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; line-height: 1.45; padding: 0.05rem 0.5rem; border-radius: 999px; border: 1px solid var(--pill); color: var(--text); white-space: nowrap; vertical-align: 0.05em; }
.badge .icon { color: var(--pill); width: 1.05em; height: 1.05em; }
.badge.tag { border-color: var(--border); color: var(--muted); }
.badge.attention { border-color: var(--off-target); }
.badge.attention .icon { color: var(--off-target); }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.bottom-bar, .phone-only { display: none; }
.commitments-due ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.commitments-due li { margin: 0.2rem 0; }

/* --- Phone: a quick look (decision 0015, finding F-34; first screen only, D-41) ------------------
   Compact bars, the zones in a bar at the bottom, and the scorecard in the quick-look order: month
   state, NOI and what drives it, practices off target, open items, commitments, headline metrics. */
@media (max-width: 600px) {
  main { padding: 0.85rem 0.85rem 5rem; }
  .product-bar { padding: 0.2rem 0.85rem; }
  .product-bar .lockup { height: 34px; }
  .product-bar .menu-label { display: none; }
  .org-band { padding: 0.45rem 0.85rem; gap: 0.5rem; }
  .org-left { gap: 0.6rem; flex-wrap: nowrap; width: 100%; justify-content: space-between; }
  .org-identity img { max-height: 26px; max-width: 110px; }
  .org-name { font-size: 1rem; }
  .band-month select { padding: 0.25rem 0.4rem; font-size: 0.92rem; }
  .org-band nav.zones { display: none; }
  .bottom-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around;
    align-items: stretch; background: var(--surface); border-top: 1px solid var(--border);
    padding: 0 0.25rem env(safe-area-inset-bottom);
  }
  .bottom-bar > a, .bottom-bar > details > summary {
    display: flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 52px; padding: 0 0.6rem;
    color: var(--muted); text-decoration: none; font-size: 0.92rem; border-top: 2px solid transparent;
  }
  .bottom-bar > a.active { color: var(--text); border-top-color: var(--accent); }
  .bottom-bar .count {
    display: inline-block; min-width: 1.35em; padding: 0 0.35em; border-radius: 999px; border: 1px solid var(--pill);
    font-size: 0.75rem; line-height: 1.35; text-align: center; color: var(--text);
  }
  .more-menu .menu { top: auto; bottom: calc(100% + 0.4rem); right: 0; }
  .phone-only { display: block; }
  .desktop-only { display: none !important; }
  .scorecard-main > .state-row.items-row.phone-only { display: flex; order: 7; margin: 0 0 0.75rem; }
  h1 { font-size: 1.4rem; }

  /* The scorecard's quick-look order */
  .scorecard-main { display: flex; flex-direction: column; }
  .scorecard-main > * { order: 20; }
  .scorecard-main > .messages { order: 0; }
  .scorecard-main > .page-head { order: 1; }
  .scorecard-main > .picker-row { order: 2; margin-bottom: 0.6rem; }
  .scorecard-main > .first-run { order: 4; }
  .scorecard-main > .section-label:not(.headline-label), .scorecard-main > .basis-row { order: 4; margin-top: 0.5rem; }
  .scorecard-main > .lead { order: 5; }
  .scorecard-main > .off-target { order: 6; }
  .scorecard-main > .commitments-due { order: 9; margin-bottom: 0.75rem; }
  .scorecard-main > .headline-label { order: 10; }
  .scorecard-main > .tiles { order: 11; }
  .scorecard-main .tiles { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .scorecard-main .tile { padding: 0.6rem 0.7rem; }
  .scorecard-main .tile .tile-value { font-size: 1.3rem; margin: 0.1rem 0; }
  .scorecard-main .tile .tile-gap, .scorecard-main .tile .tile-sub, .scorecard-main .tile .tile-foot,
  .scorecard-main .tile .tile-links, .scorecard-main .tile .tile-commit { display: none; }
  .scorecard-main .tile .status.large { font-size: 0.88rem; }
  .lead-why .chart-head, .lead-why svg.effect-chart, .lead-why > .help { display: none; }  /* its table stays */
}
/* The narrowest phones, and 400% zoom (320 px wide): the bottom bar fits without sideways scrolling
   (slice 5 of decision 0018, WCAG 1.4.10). */
@media (max-width: 380px) {
  .bottom-bar > a, .bottom-bar > details > summary { padding: 0 0.35rem; font-size: 0.85rem; }
}

/* --- Scorecard ------------------------------------------------------------------------- */
.page-head h1 { margin-bottom: 0.25rem; }
.page-head p { margin-top: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin: 0.75rem 0 1.25rem; }
.filters label.inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-weight: 500; max-width: 100%; }
.filters select { width: auto; max-width: 100%; min-width: 0; }
.picker summary { cursor: pointer; padding: 0.45rem 0.7rem; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); }
.picker-body { margin-top: 0.5rem; padding: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
h2.section-label { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 1.25rem 0 0.5rem; }
/* The lead: NOI and what drives it, then the practices off target (decision 0015, F-04/F-06/F-07). */
.lead { display: grid; grid-template-columns: minmax(190px, 1fr) 2.4fr; gap: 1rem 1.75rem; margin-bottom: 0.75rem; }
.lead-noi { border-right: 1px solid var(--border); padding-right: 1.5rem; }
.lead-value { font-size: 2.9rem; font-weight: 600; line-height: 1.1; margin: 0.2rem 0 0.25rem; }
.lead-why .driver { font-size: 1.08rem; line-height: 1.45; margin: 0.25rem 0 0.35rem; }
.lead-why .off-here { margin: 0.35rem 0 0; }
.lead-why .chart-head { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin: 0.9rem 0 0.25rem; }
.lead-why svg.effect-chart { max-width: 620px; }
.off-target { margin-bottom: 0.75rem; }
.off-list { list-style: none; padding: 0; margin: 0.35rem 0 0.25rem; }
.off-list li { display: flex; flex-wrap: wrap; gap: 0.1rem 0.6rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.off-list li:last-child { border-bottom: 0; }
.off-list a { font-weight: 600; }
.off-count { font-weight: 600; }
.off-names { flex-basis: 100%; color: var(--muted); font-size: 0.88rem; }
@media (max-width: 760px) {
  .lead { grid-template-columns: 1fr; }
  .lead-noi { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
}
.tiles { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; }
.tile-label { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--muted); margin: 0; }
.tile-value { font-size: 1.75rem; font-weight: 600; margin: 0.2rem 0; }
.tile-sub { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.5rem; }
.tile-foot { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0; font-size: 0.85rem; }
/* Metric status: the icon carries the color, the word stays in text color. */
.status { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; white-space: nowrap; color: var(--text); }
.status-icon { width: 1.1em; height: 1.1em; }
.status-on_target .status-icon { color: var(--on-target); }
.status-watch .status-icon { color: var(--near-target); }
.status-watch .status-icon .glyph { stroke: var(--deep); }
.status-off_target .status-icon { color: var(--off-target); }
.status-awaiting, .status-trend_only { color: var(--muted); }
.status.small { font-size: 0.78rem; }
.status.large { font-size: 1.05rem; font-weight: 600; }
.tile-status { margin: 0.1rem 0 0.1rem; }
.tile-gap { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.3rem; }
.tile-note { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.3rem; }
.trend { color: var(--muted); white-space: nowrap; }
.star { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.group-row th { background: var(--bg); font-family: var(--font-body); color: var(--text); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
.subgroup-row th { font-size: 0.8rem; font-weight: 600; color: var(--muted); background: var(--surface); padding-top: 0.75rem; }
.awaiting-row td { font-size: 0.88rem; }
.total-row td { font-weight: 600; }
.compare-table td.num { vertical-align: top; }
.compare-table .cell-value { display: block; font-weight: 500; }
.col-flag { display: flex; justify-content: flex-end; align-items: center; gap: 0.25rem; font-weight: 500; font-size: 0.78rem; color: var(--text); white-space: nowrap; }
.col-flag .icon, .cell-flag .icon { color: var(--off-target); width: 1em; height: 1em; }
.cell-flag { margin-left: 0.3rem; vertical-align: -0.1em; }
.chart-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
.chart-card { margin: 0; }
.chart-card figcaption { font-weight: 600; margin-bottom: 0.25rem; }
.chart-sub { margin: 0 0 0.5rem; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.25rem; }
.key { display: inline-block; width: 16px; height: 2px; background: var(--series-1); margin-left: 0.4rem; }
.key-target, .key-tick { background: var(--target); }
.key-bar { height: 10px; width: 12px; border-radius: 2px; }
.key-tick { width: 2px; height: 12px; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-card > svg.chart { max-width: 720px; }
svg.chart .grid { stroke: var(--grid); stroke-width: 1; }
svg.chart .axis { stroke: var(--axis); stroke-width: 1; }
svg.chart .tick { fill: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
svg.chart .line-actual { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .line-target { fill: none; stroke: var(--target); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .dot-actual { fill: var(--series-1); }
svg.chart .dot-target { fill: var(--target); }
svg.chart .end-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
svg.chart .end-label { fill: var(--muted); font-size: 12.5px; }
svg.chart .end-label.strong { fill: var(--text); font-weight: 600; }
svg.chart .bar { fill: var(--series-1); }
svg.chart .bar-focus { fill: var(--mix-focus); }
svg.chart .bar-rest { fill: var(--mix-rest); }
svg.chart .hover-bar:hover .bar-focus, svg.chart .hover-bar:hover .bar-rest,
svg.chart .hover-bar:focus .bar-focus, svg.chart .hover-bar:focus .bar-rest { opacity: 0.8; }
.panel-chart .mini-head { margin: 0.6rem 0 0.1rem; font-size: 0.85rem; color: var(--muted); }
svg.chart .target-tick { stroke: var(--target); stroke-width: 2; }
svg.chart .office-band { fill: var(--grid); opacity: 0.55; }
.key-office { height: 10px; width: 12px; border-radius: 2px; background: var(--grid); }
svg.chart .hit { fill: transparent; }
svg.chart .crosshair { stroke: var(--axis); stroke-width: 1; opacity: 0; }
svg.chart .hover-col:hover .crosshair, svg.chart .hover-col:focus .crosshair { opacity: 1; }
svg.chart .hover-bar:hover .bar, svg.chart .hover-bar:focus .bar { opacity: 0.8; }
svg.chart g:focus { outline: none; }
svg.chart g:focus-visible .hit { fill: transparent; stroke: var(--focus); stroke-width: 2; }
.table-view { margin-top: 0.5rem; }
.table-view summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; }
@media (max-width: 600px) {
  .chart-grid { grid-template-columns: 1fr; }
  .tile-value { font-size: 1.5rem; }
}

/* --- Data pages ----------------------------------------------------------------------- */
.subnav { display: flex; gap: 1.25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--border); }
.subnav a { color: var(--muted); text-decoration: none; padding: 0.4rem 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a.active { color: var(--text); border-bottom-color: var(--accent); }
.subnav { flex-wrap: wrap; row-gap: 0.25rem; align-items: center; }
.subnav-sep { width: 1px; align-self: stretch; margin: 0.45rem 0; background: var(--border); }
.setup-nav { column-gap: 1rem; font-size: 0.95rem; }
.upload-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
/* Upload drop zones (finding F-43): the file input stays the real control, visually hidden. */
.drop-zone {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.4rem 1rem; text-align: center;
  border: 2px dashed var(--control-border); border-radius: var(--radius); background: var(--bg); cursor: pointer; font-weight: 400;
}
.drop-zone:hover, .drop-zone.dragging { border-color: var(--accent); background: var(--surface); }
.drop-zone:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.drop-title { font-weight: 500; }
.drop-link { color: var(--accent); text-decoration: underline; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.checklist li:last-child { border-bottom: 0; }
.checklist .check { width: 1.1rem; flex: none; text-align: center; }
.checklist li.done .check { color: var(--pill); font-weight: 700; }
.checklist li.missing { color: var(--muted); }
.checks.small { font-size: 0.85rem; margin-top: 0.3rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Settings */
.settings-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
.color-row { display: flex; align-items: center; gap: 0.5rem; }
.color-row input.color-code { width: 8.5rem; font-variant-numeric: tabular-nums; }
.color-row input[type=color] { width: 2.4rem; height: 2.1rem; padding: 0; border: 1px solid var(--control-border); border-radius: 6px; background: var(--surface); cursor: pointer; }
.swatch { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 4px; border: 1px solid var(--border); flex: none; }
.logo-preview { padding: 1rem; border: 1px dashed var(--border); border-radius: var(--radius); margin-bottom: 1rem; background: var(--bg); }
.logo-preview img { max-height: 72px; max-width: 100%; display: block; }
.hours-table input[type=time] { width: 100%; min-width: 7rem; }
input[type=date], input[type=time] { font: inherit; padding: 0.45rem 0.55rem; border: 1px solid var(--control-border); border-radius: 6px; background: var(--bg); color: var(--text); }
.amount-box { display: inline-flex; align-items: center; gap: 0.25rem; }
.amount-box span { color: var(--muted); font-size: 0.9rem; }
.amount-box input.amount { width: 5.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.amount-box input.amount-money { width: 7.5rem; }
.field-error { display: block; color: var(--danger); font-size: 0.8rem; }
.targets-table td { vertical-align: middle; }
.targets-table .metric-cell { min-width: 12rem; }
.targets-table td.center { text-align: center; }
.target-intro { margin-bottom: 1rem; }
.target-intro ul { margin: 0; padding-left: 1.1rem; }
.target-intro li { margin: 0.2rem 0; }
main.wide { max-width: 1280px; }
input.entry-box { width: 6rem; text-align: right; font-variant-numeric: tabular-nums; }
.notice { padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-left: 3px solid var(--pill); border-radius: 6px; background: var(--surface); margin: 0 0 1rem; }
.notice.attention { border-left-color: var(--off-target); }
.notice-card { margin-bottom: 1rem; border-left: 3px solid var(--accent); }
.plain-list { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.plain-list li { padding: 0.2rem 0; }
tr.needs-attention td { background: color-mix(in srgb, var(--off-target) 7%, var(--surface)); }
.completeness { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; margin: 0 0 0.75rem; }
.completeness .badge { font-size: 0.85rem; font-weight: 600; padding: 0.1rem 0.6rem; }
.health-card { margin-bottom: 1rem; }
.flag-card { margin-bottom: 0.75rem; border-left: 3px solid var(--off-target); }
.check-row label { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; }
.check-row input { width: auto; }
.flag-card p { margin: 0 0 0.4rem; }
.flag-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.flag-form input[type=text] { flex: 1 1 18rem; }
.flag-card .help:last-child { margin: 0.35rem 0 0; }
.flag-notes { list-style: none; margin: 0 0 0.6rem; padding: 0 0 0 0.75rem; border-left: 2px solid var(--border); font-size: 0.9rem; }
.flag-notes li { margin-bottom: 0.25rem; }
.recon-status .recon-headline { margin: 0 0 0.35rem; }
.recon-status .plain-list { margin: 0 0 0.5rem; }
details.history { margin: 1rem 0; }
details.history summary { cursor: pointer; color: var(--accent); margin-bottom: 0.5rem; }
dialog.modal { max-width: 560px; width: calc(100% - 2rem); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); color: var(--text); box-shadow: 0 10px 40px rgba(11, 34, 51, 0.25); }
dialog.modal::backdrop { background: rgba(11, 34, 51, 0.45); }
dialog.modal h2 { margin-top: 0; }
.warning-list { padding-left: 1.1rem; }
.close-group { display: flex; align-items: center; gap: 0.4rem; margin: 1rem 0 0.25rem; }
.close-group .icon { width: 1.1em; height: 1.1em; color: var(--off-target); }
.close-group .icon:not(:has(.fill)) { color: var(--pill); }
.warning-list li { margin: 0.3rem 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 0.25rem; }
.downloads { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.9rem; }
.flag-title .category { display: block; font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.integrity-table td { min-width: 12rem; }
/* 12-month strips: needs review is a tall Coral mark, OK a short neutral one, no data an outline,
   so the strip reads without color too. */
.timeline { display: flex; align-items: flex-end; gap: 2px; margin-top: 0.4rem; height: 12px; }
.tick { display: inline-block; width: 8px; height: 12px; border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--axis); vertical-align: bottom; }
.tick-ok { height: 7px; background: color-mix(in srgb, var(--pill) 45%, var(--surface)); box-shadow: none; }
.tick-review { background: var(--off-target); box-shadow: none; }
.integrity-line { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; margin: 0 0 0.75rem; }
.quarter-table th.current, .quarter-table td.current { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); font-weight: 600; }
.commitment { margin-bottom: 0.75rem; }
.commitment p { margin: 0 0 0.35rem; }

/* Definitions (decision 0015, F-18, F-19): a metric's name opens its definition panel. */
button.metric-name { all: unset; cursor: pointer; border-bottom: 1px dotted var(--muted); }
button.metric-name:hover { color: var(--accent); border-bottom-color: var(--accent); }
button.metric-name:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
[popover].definition { max-width: 600px; width: calc(100% - 2rem); max-height: calc(100vh - 3rem); overflow-y: auto; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 10px 40px rgba(11, 34, 51, 0.25); }
[popover].definition::backdrop { background: rgba(11, 34, 51, 0.35); }
.definition-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.definition-head h2 { margin: 0.1rem 0 0.25rem; }
.definition-head .category { margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.definition dl { margin: 0.5rem 0 0; }
.definition dt { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-top: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.definition dd { margin: 0.15rem 0 0; }
.definition .link-item { white-space: nowrap; }
.definition-rule { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.tile-links, .tile-commit { font-size: 0.82rem; margin: 0.45rem 0 0; line-height: 1.45; }
.tile-links > .muted { display: block; }
.tile-links .link-item { display: block; }
.tile-links .status { white-space: nowrap; }
.tile-links .status.small { font-weight: 400; }
.tile-links .sep { display: none; }
.tile-commit { padding-top: 0.4rem; border-top: 1px solid var(--border); }

/* Commitment cards (decision 0015, D-33): why, should move, and a result in three parts. */
.commitment-title { margin-bottom: 0.15rem; }
.card-line { margin: 0.5rem 0 0; }
.line-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 0.1rem; }
.result-line { display: block; }
.commitment-result { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.result-head { font-weight: 600; margin: 0 0 0.25rem; }
.commitment-result textarea { min-height: 3.2rem; }

/* 13-month lines (decision 0015, F-13, F-24) */
svg.chart .event-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
svg.chart .event-mark { fill: var(--muted); }
.key-event { width: 0; height: 12px; border-left: 1px dashed var(--muted); background: none; }
.event-note { margin: 0.2rem 0 0; }
.panel-chart { margin: 0.75rem 0 0.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.panel-chart svg.chart { max-width: 100%; }
.mark-event { margin-top: 0.5rem; }
.mark-event summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; }
.mark-event form { margin-top: 0.5rem; }
.panel-split { margin: 0.75rem 0 0.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.split-table th, .split-table td { padding: 0.35rem 0.5rem; font-size: 0.9rem; }
.trace-sources { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--muted); }
.trace-sources li { margin: 0.15rem 0; }
.panel-hourly .driver { margin: 0.5rem 0 0.25rem; }

/* Compare (decision 0015, F-09): switches, tallies, trend in each cell, links to practice pages */
.view-switches { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 0.75rem; }
.switch { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface); }
.switch a { padding: 0.35rem 0.75rem; font-size: 0.88rem; color: var(--text); text-decoration: none; }
.switch a + a { border-left: 1px solid var(--border); }
.switch a[aria-current] { background: var(--pill); color: var(--surface); }
.tally-row th, .tally-row td { font-size: 0.8rem; font-weight: 400; color: var(--muted); background: var(--surface); }
.tally-row strong { color: var(--text); }
.compare-table .cell-link { display: block; color: inherit; text-decoration: none; }
.compare-table .cell-link:hover .cell-value, .compare-table .cell-link:focus-visible .cell-value { text-decoration: underline; }
.compare-table .cell-trend { display: block; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.col-link { color: inherit; text-decoration: none; }
.col-link:hover { text-decoration: underline; }
.group-wide { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }

/* Milestones (decision D-30, F-10): the stepped milestone line and the dashed full target */
svg.chart .line-goal { fill: none; stroke: var(--target); stroke-width: 1.5; stroke-dasharray: 5 4; }
svg.chart .dot-goal { fill: var(--target); }
.key-goal { background: none; border-top: 2px dashed var(--target); height: 0; }
.cell-note { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 400; white-space: nowrap; }
.col-note { display: block; font-size: 0.72rem; font-weight: 400; color: var(--muted); white-space: normal; }
.milestone-grid input.ms-cell { width: 4.6rem; text-align: right; font-variant-numeric: tabular-nums; padding: 0.35rem 0.4rem; }
.milestone-grid th.current, .milestone-grid td.current { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }

/* --- Narrow screens and 200% zoom: tables become cards (decision 0015, finding F-33) ------------
   Tables marked "stack" show each row as a card: the first cell as its title, then each value
   with its column name (labels come from static/js/app.js). Wide settings grids keep scrolling. */
@media (max-width: 700px) {
  table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack th, table.stack td { display: block; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap:has(> table.stack) { overflow-x: visible; }
  table.stack tr { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); }
  table.stack tbody:last-child tr:last-child { border-bottom: 0; }
  table.stack th, table.stack td { border: 0; padding: 0.12rem 0; text-align: left; }
  table.stack td[data-label] { text-align: right; display: flow-root; white-space: normal; }  /* wraps at 400% zoom */
  table.stack td[data-label]::before {
    content: attr(data-label); float: left; width: 42%; padding-right: 0.75rem; color: var(--muted);
    font-size: 0.85rem; text-align: left; font-weight: 400;
  }
  table.stack tr > :first-child { font-weight: 600; padding-bottom: 0.25rem; }
  table.stack td.empty-cell { display: none; }
  table.stack tr.group-row, table.stack tr.subgroup-row { padding: 0.6rem 0.75rem 0.3rem; background: var(--bg); }
  table.stack tr.group-row > th, table.stack tr.subgroup-row > th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
  table.stack .cell-note, table.stack .help { text-align: right; }
  .compare-table.stack .cell-link { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0.1rem 0.55rem; }
  .compare-table.stack .cell-value { font-size: 1rem; }
}

/* Quarterly review: five-quarter lines beside the numbers (decision 0015, finding F-40). */
svg.sparkline { display: block; overflow: visible; }
svg.sparkline .spark-line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.sparkline .spark-dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 1.5; }
svg.sparkline .spark-target { stroke: var(--target); stroke-width: 1.5; stroke-dasharray: 3 3; }
.focus-table td.spark { width: 124px; }
.quarter-table th .col-note, .focus-table .col-note { display: block; font-weight: 400; font-size: 0.75rem; color: var(--muted); }
.coverage-notes { margin: 0 0 0.6rem; padding-left: 1.1rem; color: var(--muted); font-size: 0.9rem; }

/* First-run strip under the basis heading, until the person closes it (F-47; decision 0018, D-56). */
.first-run { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; margin: 0 0 0.75rem; padding: 0.6rem 0.85rem; border: 1px dashed var(--control-border); border-radius: 6px; background: var(--surface); }
.first-run p { flex: 1 1 28rem; margin: 0; }
.first-run form { margin: 0; }
.first-run button { padding: 0.35rem 0.8rem; }

/* Disclosures open with a chevron instead of the browser's text triangle (finding F-43). */
details:not(.nav-menu) > summary { list-style: none; cursor: pointer; }
details:not(.nav-menu) > summary::-webkit-details-marker { display: none; }
details:not(.nav-menu) > summary::before {
  content: ""; display: inline-block; width: 0.72em; height: 0.72em; margin-right: 0.4em; vertical-align: -0.02em;
  background: currentColor; transition: transform 0.15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
details[open]:not(.nav-menu) > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { details:not(.nav-menu) > summary::before { transition: none; } }

/* Organization color preview (finding F-58): the band as it will look, in both modes. */
.brand-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin: 0.25rem 0 0.5rem; }
.pv { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.pv-caption { margin: 0; padding: 0.3rem 0.7rem; font-size: 0.75rem; color: var(--muted); background: var(--bg); }
.pv-band { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.55rem 0.7rem; }
.pv-org { font-family: var(--font-display); font-weight: 500; }
.pv-tabs { display: flex; gap: 0.7rem; font-size: 0.85rem; }
.pv-tab { padding-bottom: 0.1rem; border-bottom: 2px solid transparent; opacity: 0.75; }
.pv-tab.active { opacity: 1; border-bottom-color: var(--pv-accent); }
.pv-body { margin: 0; padding: 0.5rem 0.7rem 0.7rem; display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; }
.pv-link { color: var(--pv-accent); text-decoration: underline; }
.pv-button { padding: 0.25rem 0.7rem; border-radius: 6px; background: var(--pv-accent); color: var(--pv-on, #fff); }
.pv-light { background: #FFFFFF; color: #0B2233; }
.pv-light .pv-band { border-bottom: 1px solid #D9E1E6; }
.pv-dark { background: #10273A; color: #E6EEF2; }
.pv-dark .pv-band { border-bottom: 1px solid #1E3A50; }
.pv-dark .pv-caption { background: #08151F; color: #9FB3C2; }
.pv-light .pv-caption { background: #F3F6F7; color: #5B6B78; }

/* Skip link (finding F-70): the first stop for keyboard users, shown only when focused. */
.skip-link { position: absolute; left: 0.75rem; top: -3rem; z-index: 50; padding: 0.45rem 0.8rem; border-radius: 6px; background: var(--surface); color: var(--accent); border: 2px solid var(--focus); }
.skip-link:focus { top: 0.6rem; }
#main:focus, #numbers:focus { outline: none; }

/* The basis heading row with "How to read this page" at its right end (decision 0018, D-56, D-57). */
.basis-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 1.25rem 0 0.5rem; }
.basis-row h2.section-label { margin: 0; }
.guide-link { all: unset; cursor: pointer; color: var(--accent); font-size: 0.85rem; text-decoration: underline; white-space: nowrap; }
.guide-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.guide-link .guide-q { display: none; }
.guide-popover { max-width: 32rem; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: 0 10px 30px rgba(4, 30, 46, 0.22); }
.guide-popover::backdrop { background: rgba(4, 30, 46, 0.25); }
.guide-popover p { margin: 0; }
.guide-popover .actions { justify-content: flex-end; margin-top: 0.85rem; }
.guide-popover form { margin: 0; }
@media (max-width: 600px) {
  .guide-link .guide-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .guide-link .guide-q {
    display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px;
    border: 1px solid var(--control-border); text-decoration: none; font-weight: 600; color: var(--accent);
  }
}

/* The state row (decision 0018, D-55): quiet outlined pills beside the practices picker. Tide
   outline (Seafoam in dark mode), text in the text colour, the icon carrying no status colour. */
.picker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0.75rem 0 1rem; }
.picker-row .filters { margin: 0; }
main > .state-row { margin: 0 0 1rem; }  /* Compare: the row on its own line */
.state-row { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.45rem; margin: 0; padding: 0; }
.state-row .pill {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--pill); background: var(--surface); color: var(--text); font: inherit; font-size: 0.86rem;
  line-height: 1.4; cursor: pointer;
}
.state-row .pill .icon { width: 1.05em; height: 1.05em; color: var(--pill); flex: none; }
.state-row .pill:hover { background: var(--bg); }
.state-row .pill-filled, .state-row .pill-filled:hover { background: var(--text); border-color: var(--text); color: var(--surface); }
.state-row .pill-filled .icon { color: currentColor; }
.state-row .pill-attention .icon { color: var(--off-target); }  /* Coral only in the icon (D-38) */
.state-row.items-row.phone-only { display: none; }
.pill-popover {
  max-width: min(26rem, calc(100vw - 2rem)); padding: 0.75rem 0.9rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(4, 30, 46, 0.18);
}
.pill-popover p { margin: 0 0 0.4rem; }
.pill-popover p:last-child { margin-bottom: 0; }
.pill-popover .pill-actions { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.55rem; }
/* Beneath its pill where the browser can anchor it; elsewhere the browser centres it. */
@supports (position-anchor: --a) {
  .pill-popover {
    margin: 0; inset: auto; top: anchor(bottom); left: anchor(left); margin-top: 0.4rem;
    position-try-fallbacks: flip-inline;
  }
}