/* Shared dashboard theme for Russell's scheduled monitor agents.
   2026-08-23: retokenized to the SwarmKey master-dashboard "Linear idiom"
   (Scheduled/master-dashboard/dashboard-theme.sh) -- near-black ground,
   off-white text, hairline borders, one indigo accent, dot-grid backdrop.
   Dark in both colour schemes by design. Static (no JS) -- these also
   render as email attachments. Edit here; all agents inherit. */
:root {
  --bg: #08090a; --card: #0f1011; --card-2: #191a1b;
  --text: #f7f8f8; --secondary: #8a8f98; --tertiary: #8a8f98; /* tertiary lightened from #62666d (3.3:1, WCAG AA fail) — council 2026-08-24 D5 */
  --border: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.10);
  --accent: #6e74c9; --accent-soft: rgba(110,116,201,0.14); /* aligned to the deployed indigo accent (dashboard-theme.sh + live pages) — council 2026-08-24 D6 */
  --green: #8FCE63; --green-soft: #1B2A12;
  --orange: #F4A63C; --orange-soft: #33240D;
  --red: #F26D6D; --red-soft: #3A1414;
  --purple: #9585FF; --purple-soft: #1E1B3D;
  --shadow-1: none; --shadow-2: none;
  --blk-amber:#F4A63C; --blk-amber-wash:#33240D;
  --blk-violet:#9585FF; --blk-violet-wash:#1E1B3D;
  --blk-teal:#2FC7B4;  --blk-teal-wash:#0C2E2B;
  --blk-navy:#7C9BE0;  --blk-navy-wash:#151F38;
  --blk-green:#8FCE63; --blk-green-wash:#1B2A12;
  --blk-rose:#F26D6D;  --blk-rose-wash:#3A1414;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  line-height: 1.45; font-size: 15px;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 32px 24px 80px; }
header.hero { margin-bottom: 24px; }
.hero .eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.06; margin-top: 6px; }
.meta-line { color: var(--secondary); font-size: 15px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.meta-line .dot { color: var(--tertiary); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 22px 0; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; box-shadow: var(--shadow-1); }
.kpi-label { color: var(--secondary); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-value { font-size: 30px; font-weight: 700; margin-top: 6px; letter-spacing: -0.024em; font-feature-settings: 'tnum'; line-height: 1.1; }
.kpi-sub { font-size: 12px; color: var(--tertiary); margin-top: 4px; font-weight: 600; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow-1); }
.card > h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.018em; margin-bottom: 4px; }
.card > .card-sub { color: var(--secondary); font-size: 13px; margin-bottom: 14px; }
.sec-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--secondary); margin: 6px 0 12px; }

.item { padding: 14px 0; border-top: 1px solid var(--border); }
.item:first-of-type { border-top: 0; padding-top: 2px; }
.item-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item-meta { color: var(--secondary); font-size: 12.5px; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 10px; }
.item-link { color: var(--accent); text-decoration: none; font-size: 12.5px; word-break: break-all; }
.item-link:hover { text-decoration: underline; }
.summary { color: var(--text); font-size: 14px; line-height: 1.55; margin-top: 8px; }
.sub-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--secondary); margin-top: 8px; }

.overview { font-size: 16px; line-height: 1.6; color: var(--text); }

.pill { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-orange { background: var(--orange-soft); color: var(--orange); }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-blue { background: var(--accent-soft); color: var(--accent); }
.pill-purple { background: var(--purple-soft); color: var(--purple); }
.pill-gray { background: var(--card-2); color: var(--tertiary); border: 1px solid var(--border); }

.empty { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 40px 28px; text-align: center; color: var(--secondary); }
.empty-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; }

footer.foot { color: var(--tertiary); font-size: 12px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
a { color: var(--accent); }

/* ---- colour-block accent layer (2026-08-23) ----
   Every card and KPI tile carries a tinted rail; hue cycles by position so a
   brief with N sections reads as N distinct blocks without the agent fragment
   having to know about colour. .pill-* classes map onto the same hue set. */
.card, .kpi, .empty { position: relative; overflow: hidden; padding-left: 30px; }
.kpi { padding-left: 26px; }
.card::before, .kpi::before, .empty::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: var(--wash); border-right: 1px solid var(--border); }
.card, .kpi, .empty { --c: var(--blk-amber); --wash: var(--blk-amber-wash); }
.card:nth-of-type(5n+2), .kpi:nth-child(5n+2) { --c: var(--blk-violet); --wash: var(--blk-violet-wash); }
.card:nth-of-type(5n+3), .kpi:nth-child(5n+3) { --c: var(--blk-teal);   --wash: var(--blk-teal-wash); }
.card:nth-of-type(5n+4), .kpi:nth-child(5n+4) { --c: var(--blk-green);  --wash: var(--blk-green-wash); }
.card:nth-of-type(5n+5), .kpi:nth-child(5n+5) { --c: var(--blk-navy);   --wash: var(--blk-navy-wash); }
.card > h2, .kpi-label, .sec-label { color: var(--c); }
.kpi-sub { color: var(--c); opacity: .85; }
.hero .eyebrow { color: var(--blk-amber); }
.pill { border: 1px solid var(--border); }

/* ---- collapsible topics + outlined kind badges (2026-08-23) ----
   Adopted from the Microsoft Change Digest layout: each topic card is a
   <details> (open by default) whose summary shows the title and item count;
   pills become small uppercase outlined badges coloured by kind. */
details.card > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; margin: -4px 0 0; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
details.card > summary h2::before { content: "\25B8"; font-size: 11px; color: var(--tertiary);
  transition: transform .15s ease; }
details.card[open] > summary h2::before { transform: rotate(90deg); }
details.card > summary .count { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
  color: var(--tertiary); white-space: nowrap; }
details.card[open] > summary { margin-bottom: 12px; }
details.card:not([open]) { padding-bottom: 16px; }
.pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 999px; background: transparent; border: 1px solid currentColor; }
.pill-green { color: var(--green); }  .pill-orange { color: var(--orange); }
.pill-red { color: var(--red); }      .pill-blue { color: var(--accent); }
.pill-purple { color: var(--purple); } .pill-gray { color: var(--secondary); background: transparent; }