/* sg-grants-landscape -- dashboard styles.
   No framework, no build step. Tokens first, then components.

   Status colours are the validated set from the dataviz palette, and every one of
   them is paired with a word and a glyph. A status colour never carries meaning
   alone: warning and serious sit below 3:1 on a light surface by design, and the
   label is the mitigation, not a nicety. */

:root {
  color-scheme: light;
  --surface: #fcfcfb;
  --plane: #f9f9f7;
  --raised: #ffffff;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #78766f;
  --line: #e3e2dd;
  --line-2: #cfcec8;

  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --accent: #2f6fb5;
  --accent-soft: #eaf1f9;

  --r: 10px;
  --gap: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    color-scheme: dark;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #1a1a19;
    --plane: #0d0d0d;
    --raised: #232322;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --ink-3: #94938a;
    --line: #34342f;
    --line-2: #45453e;
    --accent: #7aaee8;
    --accent-soft: #1e2b3a;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #1a1a19;
  --plane: #0d0d0d;
  --raised: #232322;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --ink-3: #94938a;
  --line: #34342f;
  --line-2: #45453e;
  --accent: #7aaee8;
  --accent-soft: #1e2b3a;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---------- header + the disclaimer, which is not decoration ---------- */

header { background: var(--surface); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: flex-start; gap: 16px; padding-block: 20px 14px; flex-wrap: wrap; }
h1 { margin: 0 0 2px; font-size: 20px; letter-spacing: -.01em; }
.sub { margin: 0; color: var(--ink-2); font-size: 13.5px; }
.head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.disclaimer {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--line));
  border-radius: var(--r);
  padding: 10px 13px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--ink);
  display: flex; gap: 9px; align-items: flex-start;
}
.disclaimer b { font-weight: 650; }

/* ---------- tabs ---------- */

nav.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--surface); }
nav.tabs button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 13px; font: inherit; font-size: 14px; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
}
nav.tabs button:hover { color: var(--ink); }
nav.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
nav.tabs .count { color: var(--ink-3); font-weight: 400; font-size: 12.5px; }

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

.filters { padding-block: 16px 4px; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filter-row label { font-size: 12.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; min-width: 76px; }

input[type="search"], select {
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--raised); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 8px 11px; min-width: 0;
}
input[type="search"] { flex: 1 1 260px; }
input[type="search"]:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  appearance: none; font: inherit; font-size: 13px; cursor: pointer;
  background: var(--raised); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 11px;
}
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.chip .n { color: var(--ink-3); font-weight: 400; }

.btn {
  appearance: none; font: inherit; font-size: 13px; cursor: pointer;
  background: var(--raised); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 11px;
}
.btn:hover { color: var(--ink); }

/* ---------- the all-sector notice: the filter's honesty ---------- */

.scope-note {
  font-size: 13px; color: var(--ink-2); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--r); padding: 9px 12px; margin: 4px 0 14px;
}

.resultbar { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 6px 0 14px; color: var(--ink-2); font-size: 13.5px; }

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

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--gap); padding-bottom: 40px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--shadow);
}
.card.is-allsector { border-left: 3px solid var(--accent); }
.card h3 { margin: 0; font-size: 15.5px; line-height: 1.35; }
.card .admin { color: var(--ink-2); font-size: 13px; }

.money { font-size: 14px; }
.money b { font-size: 17px; letter-spacing: -.01em; }
.money .none { color: var(--ink-3); font-style: italic; font-size: 13.5px; }

.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  border-radius: 999px; padding: 3px 8px; border: 1px solid;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
/* Every status badge carries a glyph AND a word. Colour is the third signal, never
   the only one -- warning/serious are deliberately low-contrast on light. */
.b-good     { color: var(--good);     border-color: color-mix(in srgb, var(--good) 45%, transparent);     background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.b-warning  { color: #7a5300;         border-color: color-mix(in srgb, var(--warning) 60%, transparent);  background: color-mix(in srgb, var(--warning) 20%, var(--surface)); }
.b-serious  { color: #8a3d1c;         border-color: color-mix(in srgb, var(--serious) 55%, transparent);  background: color-mix(in srgb, var(--serious) 18%, var(--surface)); }
.b-critical { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 45%, transparent); background: color-mix(in srgb, var(--critical) 12%, var(--surface)); }
.b-neutral  { color: var(--ink-2);    border-color: var(--line-2);                                        background: var(--raised); }
.b-accent   { color: var(--accent);   border-color: color-mix(in srgb, var(--accent) 45%, transparent);   background: var(--accent-soft); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b-warning { color: var(--warning); }
  :root:not([data-theme="light"]) .b-serious { color: var(--serious); }
}
:root[data-theme="dark"] .b-warning { color: var(--warning); }
:root[data-theme="dark"] .b-serious { color: var(--serious); }

.sectors { display: flex; gap: 5px; flex-wrap: wrap; }
.sector-tag { font-size: 11.5px; color: var(--ink-2); background: var(--raised); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; }

.card footer { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.src {
  font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.src:hover { text-decoration: underline; }
.stamp { font-size: 12px; color: var(--ink-3); margin-left: auto; text-align: right; }

.cmp-toggle { font-size: 12.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }

/* ---------- compare ---------- */

.table-scroll { overflow-x: auto; padding-bottom: 40px; }
table.cmp { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
table.cmp th, table.cmp td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; font-size: 13.5px; }
table.cmp thead th { background: var(--raised); font-size: 13px; position: sticky; top: 0; }
table.cmp tbody th { background: var(--raised); font-weight: 600; color: var(--ink-2); font-size: 12.5px; width: 170px; }
table.cmp td.differs { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }

/* ---------- misc ---------- */

.empty { padding: 40px 16px; text-align: center; color: var(--ink-2); }
.empty b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.note { font-size: 13px; color: var(--ink-2); }
.list { padding-bottom: 40px; }
.row {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; margin-bottom: 10px;
}
.row h4 { margin: 0 0 4px; font-size: 14.5px; }
.row .why { font-size: 13px; color: var(--ink-2); }

footer.page { border-top: 1px solid var(--line); margin-top: 20px; padding-block: 18px 40px; color: var(--ink-3); font-size: 12.5px; }
footer.page a { color: var(--ink-2); }

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .filter-row label { min-width: 0; flex-basis: 100%; }
  .stamp { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* ---------- review flow --------------------------------------------------
   A proposal must never be mistakable for a published figure. That is done
   with structure first (its own bordered block, its own heading that says
   "not published") and colour second, because colour alone fails for the
   readers most likely to be checking a number carefully. */

.review-open {
  margin-left: auto; font: inherit; font-size: .82rem; cursor: pointer;
  background: var(--raised); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 9px;
}
.review-open:hover { color: var(--accent); border-color: var(--accent); }

.review-panel {
  grid-column: 1 / -1; margin-top: 10px; padding: 12px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--raised);
  display: grid; gap: 10px;
}
.review-panel .me { font-size: .82rem; color: var(--ink-2); }
.review-panel fieldset { border: 1px solid var(--line-2); border-radius: 6px; padding: 9px 11px; }
.review-panel legend { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.review-panel label { display: block; font-size: .84rem; margin-bottom: 7px; }
.review-panel input, .review-panel select, .review-panel textarea {
  width: 100%; margin-top: 3px; font: inherit; font-size: .86rem;
  padding: 5px 7px; border: 1px solid var(--line-2); border-radius: 5px;
  background: var(--surface); color: var(--ink);
}
.review-panel button {
  font: inherit; font-size: .84rem; cursor: pointer; padding: 5px 11px;
  border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent-soft); color: var(--accent);
}
.review-close { background: transparent !important; color: var(--ink-2) !important; border-color: var(--line-2) !important; }
.review-msg { font-size: .84rem; min-height: 1.2em; }
.review-msg.good { color: var(--good); }
.review-msg.bad  { color: var(--critical); }

.proposals, .flags {
  grid-column: 1 / -1; margin-top: 9px; padding: 9px 11px;
  border-radius: 7px; border: 1px dashed var(--line-2); background: var(--raised);
}
.proposals h5, .flags h5 {
  margin: 0 0 7px; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-2);
}
.flags { border-style: solid; border-color: color-mix(in srgb, var(--critical) 45%, transparent); }
.proposal, .flag { font-size: .85rem; padding: 6px 0; border-top: 1px solid var(--line-2); }
.proposal:first-of-type, .flag:first-of-type { border-top: 0; }
.proposal .pv { font-variant-numeric: tabular-nums; font-weight: 600; }
.proposal .who, .flag > b { color: var(--ink-2); font-size: .8rem; }
.proposal .pnote { color: var(--ink-2); }
.padmin { margin-top: 5px; display: flex; gap: 6px; }
.padmin button { font-size: .8rem; padding: 3px 9px; }

.review-dialog {
  width: min(560px, calc(100vw - 32px)); padding: 18px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface); color: var(--ink);
}
.review-dialog::backdrop { background: rgba(0,0,0,.42); }
.review-dialog h4 { margin: 0 0 12px; font-size: 1.02rem; }
.review-dialog .review-panel { border: 0; padding: 0; background: transparent; margin: 0; }