/* Zoetermeer weather console.
   Dark by default: this is a monitoring surface, meant to sit on a screen. */

:root {
  --bg: #080b10;
  --panel: #0f1520;
  --panel-2: #141c29;
  --line: #1e2a3a;
  --line-soft: #182231;
  --ink: #dde6f1;
  --ink-dim: #93a4b8;
  --ink-faint: #62748a;
  --accent: #38bdf8;
  --accent-warm: #fb923c;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --violet: #a78bfa;
  --rain: #60a5fa;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --radius: 10px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef2f7;
    --panel: #ffffff;
    --panel-2: #f5f8fc;
    --line: #d3dde9;
    --line-soft: #e3eaf3;
    --ink: #101822;
    --ink-dim: #4a5a6e;
    --ink-faint: #7386a0;
    --accent: #0369a1;
    --accent-warm: #c2410c;
    --good: #047857;
    --warn: #a16207;
    --bad: #b91c1c;
    --violet: #6d28d9;
    --rain: #1d4ed8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1560px; margin: 0 auto; padding: 18px 20px 64px; }

/* ---------------------------------------------------------------- header */
header.top {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
header.top h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
header.top .coords { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
header.top .radar-link { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); text-decoration: none; }
header.top .radar-link:hover { color: var(--ink); text-decoration: underline; }
header.top .clock { margin-left: auto; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
header.top .clock strong { display: block; font-size: 19px; color: var(--ink); font-weight: 600; }

.pulse {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); margin-right: 6px; vertical-align: middle;
}
.pulse.stale { background: var(--warn); }
.pulse.dead  { background: var(--bad); }

/* ------------------------------------------------- source menu (all pages) */
.source-nav {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); margin-bottom: 16px;
}
.source-nav > summary {
  list-style: none; cursor: pointer; padding: 9px 14px;
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12px; font-weight: 650; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-faint);
}
.source-nav > summary::-webkit-details-marker { display: none; }
.source-nav > summary::before {
  content: "▸"; font-size: 10px; transform: translateY(-1px);
  transition: transform .12s ease;
}
.source-nav[open] > summary::before { transform: rotate(90deg); }
.source-nav > summary .mono { text-transform: none; letter-spacing: 0; }
.source-nav > summary .all {
  margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500;
}
.source-nav-body {
  padding: 4px 14px 14px;
  display: grid; gap: 10px 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  border-top: 1px solid var(--line-soft);
}
.source-nav .group { display: flex; gap: 8px; align-items: baseline; }
.source-nav .gname {
  flex: 0 0 84px; text-align: right; font-size: 11px; font-weight: 600;
  color: var(--ink-faint); font-family: var(--mono);
  padding-top: 3px; line-height: 1.7;
}
.source-nav .glinks { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.source-nav a.src {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--ink-dim); line-height: 1.6;
}
.source-nav a.src:hover { border-color: var(--accent); color: var(--ink);
  text-decoration: none; }
.source-nav a.src.here {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.source-nav a.src .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
}
.source-nav a.src .dot.good { background: var(--good); }
.source-nav a.src .dot.warn { background: var(--warn); }
.source-nav a.src .dot.bad  { background: var(--bad); }
.source-nav a.src .dot.info { background: var(--accent); }
.source-nav a.src .flag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); border: 1px dashed var(--line); border-radius: 4px;
  padding: 0 3px;
}
@media (max-width: 720px) {
  .source-nav-body { grid-template-columns: 1fr; }
  .source-nav .group { flex-direction: column; gap: 3px; }
  .source-nav .gname { text-align: left; flex-basis: auto; padding-top: 0; }
}

/* ------------------------------------------------------------------ grid */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.card {
  grid-column: span 12;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  min-width: 0;
}
.card > h2 {
  margin: 0 0 12px; font-size: 12px; font-weight: 650;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: 8px;
}
.card > h2 .tag {
  margin-left: auto; font-weight: 500; letter-spacing: 0;
  text-transform: none; font-size: 11px; color: var(--ink-faint);
  font-family: var(--mono);
}
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
@media (max-width: 1180px) {
  .span-3, .span-4, .span-5 { grid-column: span 6; }
  .span-7, .span-8, .span-9 { grid-column: span 12; }
}
@media (max-width: 720px) {
  .grid > .card { grid-column: span 12 !important; }
  .wrap { padding: 12px 12px 48px; }
}

/* ------------------------------------------------------------------- now */
.now { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.now .temp { font-size: 68px; line-height: 0.95; font-weight: 300; letter-spacing: -0.03em; }
.now .temp span { font-size: 26px; color: var(--ink-dim); }
.now .headline { font-size: 17px; margin-top: 6px; }
.now .feels { color: var(--ink-dim); font-size: 13px; margin-top: 2px; }
.now .station {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 8px;
}

.readouts {
  display: grid; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: 8px; overflow: hidden; margin-top: 4px; flex: 1 1 380px;
}
.readout { background: var(--panel); padding: 8px 10px; min-width: 0; }
.readout .k { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* Values can be a long identifier as easily as a number, so they wrap at
   word boundaries and shrink rather than stretching the whole grid row. */
.readout .v {
  font-family: var(--mono); font-size: 17px; margin-top: 1px;
  overflow-wrap: anywhere; line-height: 1.3;
}
.readout .v.long { font-size: 12px; line-height: 1.4; }
.readout .v small { font-size: 11px; color: var(--ink-dim); }
.readout .src { font-size: 10px; color: var(--ink-faint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- alerts */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid; background: var(--panel);
}
.alert .sev { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 4px; flex: none; }
.alert-green  { border-color: var(--line); }
.alert-green .sev  { background: rgba(52,211,153,.16); color: var(--good); }
.alert-yellow { border-color: rgba(251,191,36,.4); }
.alert-yellow .sev { background: rgba(251,191,36,.16); color: var(--warn); }
.alert-orange { border-color: rgba(251,146,60,.5); }
.alert-orange .sev { background: rgba(251,146,60,.18); color: var(--accent-warm); }
.alert-red    { border-color: rgba(248,113,113,.6); }
.alert-red .sev    { background: rgba(248,113,113,.18); color: var(--bad); }
.alert .body { min-width: 0; }
.alert .body b { display: block; }
.alert .body p { margin: 4px 0 0; color: var(--ink-dim); font-size: 13px;
  white-space: pre-wrap; }

/* ------------------------------------------------------------- dayparts */
/* Four equal tiles, one per part of the day. They reuse the .alert-* border
   colours above rather than defining their own, so a warned block looks the
   same here as it does in the banner at the top of the page. */
.dayparts {
  display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) { .dayparts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dayparts { grid-template-columns: 1fr; } }
.daypart {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px 12px; min-width: 0;
}
.daypart.current { border-color: rgba(56,189,248,.45); }
.dp-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dp-head b { font-size: 14px; }
.dp-when { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.dp-date { font-size: 10px; color: var(--ink-faint); margin-left: auto; }
.dp-type {
  font-size: 17px; font-weight: 300; margin: 8px 0 2px;
  color: var(--ink); text-transform: lowercase;
}
.dp-row {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 0; border-top: 1px solid var(--line-soft); font-size: 13px;
}
.dp-row .k {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); flex: 0 0 42px;
}
.dp-row .v { font-family: var(--mono); }
.dp-row .v small { color: var(--ink-dim); font-size: 11px; }
.dp-row .n { margin-left: auto; font-size: 10px; color: var(--ink-faint); }
.dp-arrow { display: inline-block; color: var(--accent); }
.dp-alerts { display: grid; gap: 4px; margin-top: 8px; }
.dp-alert {
  font-size: 11px; font-family: var(--mono); padding: 3px 7px;
  border-radius: 5px; border: 1px solid var(--line); color: var(--ink-dim);
}
.dp-alert b { letter-spacing: 0.06em; }
.dp-alert.yellow { border-color: rgba(251,191,36,.4); color: var(--warn); }
.dp-alert.orange { border-color: rgba(251,146,60,.5); color: var(--accent-warm); }
.dp-alert.red    { border-color: rgba(248,113,113,.6); color: var(--bad); }

/* ----------------------------------------------------------------- table */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
th:first-child, td:first-child { text-align: left; }
thead th {
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; border-bottom-color: var(--line);
  position: sticky; top: 0; background: var(--panel);
}
tbody tr:hover { background: var(--panel-2); }
td.num, th.num { font-family: var(--mono); }
.scroll { overflow-x: auto; max-width: 100%; }
.scroll-y { overflow-y: auto; max-height: 380px; }

/* ---------------------------------------------------------------- chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-family: var(--mono); padding: 2px 7px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim);
  white-space: nowrap;
}
.chip.good { border-color: rgba(52,211,153,.4); color: var(--good); }
.chip.warn { border-color: rgba(251,191,36,.4); color: var(--warn); }
.chip.bad  { border-color: rgba(248,113,113,.5); color: var(--bad); }
.chip.info { border-color: rgba(56,189,248,.4); color: var(--accent); }
.chip.outlet { border-style: dashed; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.bar {
  height: 5px; border-radius: 3px; background: var(--line);
  overflow: hidden; min-width: 44px;
}
.bar > i { display: block; height: 100%; background: var(--accent); }

/* ------------------------------------------------------- hour-by-hour */
/* A 72-row table wants to be scanned down a column, so the rows are tighter
   than the page default and the day breaks carry the eye. */
table.hourly td, table.hourly th { padding: 3px 8px; }
table.hourly td:nth-child(2) { text-align: left; }
table.hourly .part {
  font-size: 10px; color: var(--ink-faint); font-family: var(--sans);
}
table.hourly tr.dayrow td {
  background: var(--panel-2); color: var(--ink-dim);
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  border-bottom-color: var(--line); position: sticky; top: 22px;
}
table.hourly tr.warned td { background: rgba(251,191,36,.05); }
table.hourly tr.warnrow td { border-bottom: none; padding-top: 0; }

/* ----------------------------------------------------------------- maps */
.map {
  position: relative; height: 460px; border-radius: 8px; overflow: hidden;
  background: #06090d; border: 1px solid var(--line); touch-action: none;
  cursor: grab; user-select: none;
}
.map.dragging { cursor: grabbing; }
.map .layer { position: absolute; inset: 0; pointer-events: none; }
.map .layer img { position: absolute; image-rendering: auto; }
/* PDOK's `grijs` style is already a neutral grey map, so the dark variant is
   a straight inversion — no hue correction needed, unlike a full-colour
   basemap where the greens would invert to teal. */
.map .layer.basemap.dark img.dutch {
  /* Invert flips light to dark; rotating the hue back by 180° undoes the
     colour flip that comes with it, so water stays blue-grey instead of
     turning brown. */
  filter: invert(1) hue-rotate(180deg) saturate(0.45) brightness(0.8)
          contrast(1.08);
}
.map .layer.basemap.light img.dutch { filter: none; }
/* The GIBS coastline sits under the Dutch map at every zoom, filling in the
   Europe that PDOK returns as transparent tiles. It is scoped to img.coast,
   and the two rules above to img.dutch, because they share a container and
   need opposite treatment: the coastline is drawn in white, so putting it
   through the inversion above would erase it against the dark map. Desaturated
   and dimmed so it reads as a backdrop and the radar stays the brightest thing
   on the map. */
.map .layer.basemap.dark img.coast,
.map .layer.basemap.light img.coast {
  filter: saturate(0) brightness(0.75); opacity: 0.7;
}
/* The world backdrop below zoom 7 is NASA's Blue Marble, which is already a
   dark image: inverting it the way the Dutch grey map is inverted would turn
   the sea white. Dimmed instead, so the radar mosaic stays the brightest
   thing on the map. */
.map .layer.basemap.world img { filter: brightness(0.62) saturate(0.7); }
:root[data-theme="light"] .map .layer.basemap.world img,
.map .layer.basemap.world img.light { filter: brightness(1.05) saturate(0.85); }
.map .marker {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
}
.map .home {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--accent); background: rgba(56,189,248,.28);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6);
}
.map .strike { width: 7px; height: 7px; border-radius: 50%; background: #fde047;
  box-shadow: 0 0 6px 2px rgba(253,224,71,.55); }
.map .attribution {
  position: absolute; right: 6px; bottom: 5px; font-size: 10px;
  background: var(--panel); color: var(--ink-dim); padding: 2px 6px;
  border-radius: 4px; pointer-events: none; font-family: var(--mono);
  border: 1px solid var(--line);
}
.map .zoombtns { position: absolute; left: 8px; top: 8px; display: grid; gap: 4px; }
.map .zoombtns button {
  width: 28px; height: 28px; font-size: 17px; line-height: 1;
  font-family: var(--mono); font-weight: 600;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.map .zoombtns button:hover { background: var(--panel-2); }

.maptools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.maptools button, .timebar button {
  font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer;
  background: var(--panel-2); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px;
}
.maptools button[aria-pressed="true"] { background: var(--accent); color: #06121c;
  border-color: var(--accent); font-weight: 600; }
.timebar { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; }
.timebar input[type=range] { flex: 1; accent-color: var(--accent); }
.timebar .stamp { font-family: var(--mono); color: var(--ink-dim); min-width: 128px; }

/* --------------------------------------------------------------- charts */
svg.chart { display: block; width: 100%; overflow: visible; }
svg.chart text { font-family: var(--mono); font-size: 10px; fill: var(--ink-faint); }
svg.chart .grid-line { stroke: var(--line-soft); stroke-width: 1; }
svg.chart .axis { stroke: var(--line); stroke-width: 1; }
svg.chart .band { fill: color-mix(in srgb, var(--accent) 18%, transparent); }
svg.chart .band-2 { fill: color-mix(in srgb, var(--accent) 30%, transparent); }
svg.chart .line { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
svg.chart .line-2 { fill: none; stroke: var(--accent-warm); stroke-width: 1.5;
  stroke-dasharray: 3 3; }
svg.chart .rainbar { fill: var(--rain); }
svg.chart .nowline { stroke: var(--accent-warm); stroke-width: 1; stroke-dasharray: 2 3; }
svg.chart .night { fill: rgba(120,140,170,.07); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px;
  color: var(--ink-faint); margin-top: 8px; }
.legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px;
  margin-right: 5px; vertical-align: middle; }

/* ---------------------------------------------------------- sounding */
.sounding {
  display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-start;
  margin-top: 12px;
}
.sounding .skewt-wrap { flex: 1 1 420px; min-width: 300px; }
svg.chart.skewt { width: 100%; height: auto; }
svg.chart.hodo { flex: 0 0 auto; }
svg.chart.skewt text, svg.chart.hodo text { font-size: 9px; }

/* -------------------------------------------------------------- nowcast */
.nowcast-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; }
.nowcast-head b { font-size: 17px; font-weight: 600; }

/* ----------------------------------------------------------- misc blocks */
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px;
      font-size: 13px; align-items: baseline; }
.kv dt { color: var(--ink-faint); white-space: nowrap; }
/* Values can be a sentence, not just a number, so they must wrap rather than
   run off the edge of the panel. */
.kv dd {
  margin: 0; font-family: var(--mono); text-align: right;
  min-width: 0; overflow-wrap: anywhere; hyphens: auto;
}
.kv dd.chip { justify-self: end; text-align: left; white-space: normal;
  max-width: 100%; }

.stack { display: flex; flex-direction: column; gap: 10px; }
.muted { color: var(--ink-faint); font-size: 12px; }

/* The written discussion: prose, so it gets prose measure and prose leading
   rather than the console typography the rest of the page uses. */
.discussion { display: grid; gap: 14px; }
.discussion-period .k {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 3px;
}
.discussion-period p {
  margin: 0; font-size: 15px; line-height: 1.6; max-width: 78ch;
}
@media (min-width: 1181px) {
  .discussion { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.note { color: var(--ink-faint); font-size: 11px; margin-top: 10px; line-height: 1.45; }
.big { font-family: var(--mono); font-size: 26px; }
.mono { font-family: var(--mono); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

.rank-1 td { background: color-mix(in srgb, var(--good) 9%, transparent); }
.is-outlet td:first-child { color: var(--ink-faint); font-style: italic; }

.spark { display: block; width: 100%; height: 34px; }

footer.foot {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: 12px;
}
footer.foot a { color: var(--ink-dim); }

.loading { padding: 40px; text-align: center; color: var(--ink-faint); }
.err { color: var(--bad); font-family: var(--mono); font-size: 12px; }


/* ------------------------------------------------------- source pages */
.field { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.field:last-child { border-bottom: 0; }
.field-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 4px; font-size: 13px;
}
.field-head b { font-family: var(--mono); font-weight: 600; }
.field-group { padding: 12px 0; border-bottom: 1px solid var(--line); }

.smallmultiples {
  display: grid; gap: 10px 18px; margin: 8px 0 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.smallmultiples .field { border-bottom: 0; padding: 4px 0; }

details.group > summary,
details > summary {
  cursor: pointer; font-family: var(--mono); font-size: 13px;
  padding: 6px 0; color: var(--ink-dim); list-style: revert;
}
details.group > summary { color: var(--ink); font-weight: 600; }
details > summary:hover { color: var(--ink); }
details.group {
  border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 8px 12px; background: var(--panel-2);
}

pre.raw {
  margin: 6px 0 0; padding: 10px 12px; font-family: var(--mono);
  font-size: 12px; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere; background: var(--panel-2);
  border: 1px solid var(--line-soft); border-radius: 6px;
  max-height: 320px; overflow-y: auto; color: var(--ink-dim);
}

header.top h1 a { text-decoration: none; }
header.top h1 a:hover { text-decoration: underline; }

/* A row the wind is currently coming from. Faint on purpose: it marks which
   rows to read first, it is not a warning. */
tbody tr.hi { background: color-mix(in srgb, var(--accent) 12%, transparent); }
tbody tr.hi td:first-child { box-shadow: inset 2px 0 0 var(--accent); }