/* 2020six — design tokens.
   Direction: an institutional record. Cool slate neutrals with a hue bias toward
   the steel-blue accent, IBM Plex for an archival rather than startup feel, and a
   four-colour categorical set that stays distinguishable in both themes. */

:root {
  color-scheme: light;

  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-anthropic-sans: var(--font-sans);
  --font-anthropic-serif: var(--font-serif);

  --color-bg: #f7f8fa;
  --color-panel: #ffffff;
  --color-fg: #16191f;
  --color-fg-muted: #5b6472;
  --color-border-line: #dfe3ea;
  --color-ok: #2f6b4f;
  --color-warn: #8a5a12;
  --color-bad: #a32f3f;

  --cat-policy: #2f6f9f;
  --cat-rhetoric: #a8562c;
  --cat-media: #5c6f3a;
  --cat-incidents: #8c3b52;
  --series-5: #4a5b7a;
  --series-6: #7a6440;
  --series-7: #3f6f6a;
  --series-8: #6b4a78;

  --cds-chart-muted: #aeb6c2;
  --cds-chart-grid: #e8ebf0;
  --cds-chart-axis: #c3cad4;
  --cds-chart-reference: #9aa3b0;
  --cds-chart-status-critical: var(--color-bad);

  --cds-surface-popover: #ffffff;
  --cds-border: #d3d9e2;
  --cds-shadow-popover: 0 6px 20px rgba(16, 22, 32, .14), 0 1px 2px rgba(16, 22, 32, .08);

  --cds-font-size-caption: .8125rem;
  --cds-font-size-body: .9375rem;
  --cds-font-size-heading: 1.0625rem;
  --cds-font-size-title: 1.875rem;
  --cds-font-weight-medium: 550;

  --cds-gap-xs: .25rem;
  --cds-gap-sm: .5rem;
  --cds-gap-md: 1rem;
  --cds-gap-lg: 1.5rem;
  --cds-gap-xl: 2.5rem;
  --cds-pad-xs: .25rem;
  --cds-pad-sm: .5rem;
  --cds-pad-md: .875rem;
  --cds-pad-lg: 1.25rem;
  --cds-pad-xl: 2rem;
  --cds-radius: 6px;

  --cds-dur-slow: .32s;
  --cds-ease-out: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #101318;
    --color-panel: #171b22;
    --color-fg: #e7eaef;
    --color-fg-muted: #99a3b2;
    --color-border-line: #272d37;
    --color-ok: #6fbf92;
    --color-warn: #d8a657;
    --color-bad: #e2808f;
    --cat-policy: #6ea8d6;
    --cat-rhetoric: #d98a5c;
    --cat-media: #9fb86f;
    --cat-incidents: #cf7b90;
    --series-5: #8f9fc0;
    --series-6: #c0a877;
    --series-7: #71aaa4;
    --series-8: #a98cb8;
    --cds-chart-muted: #4b545f;
    --cds-chart-grid: #222831;
    --cds-chart-axis: #39414c;
    --cds-chart-reference: #5b6573;
    --cds-surface-popover: #1d222a;
    --cds-border: #323a45;
    --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #101318;
  --color-panel: #171b22;
  --color-fg: #e7eaef;
  --color-fg-muted: #99a3b2;
  --color-border-line: #272d37;
  --color-ok: #6fbf92;
  --color-warn: #d8a657;
  --color-bad: #e2808f;
  --cat-policy: #6ea8d6;
  --cat-rhetoric: #d98a5c;
  --cat-media: #9fb86f;
  --cat-incidents: #cf7b90;
  --series-5: #8f9fc0;
  --series-6: #c0a877;
  --series-7: #71aaa4;
  --series-8: #a98cb8;
  --cds-chart-muted: #4b545f;
  --cds-chart-grid: #222831;
  --cds-chart-axis: #39414c;
  --cds-chart-reference: #5b6573;
  --cds-surface-popover: #1d222a;
  --cds-border: #323a45;
  --cds-shadow-popover: 0 6px 20px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--cds-font-size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
[hidden] { display: none !important; }

/* The page body keeps the gutter the dashboard host used to supply. */
.site {
  padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
  padding-block: clamp(1rem, 3vw, 2.5rem) 0;
}

.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--color-panel); color: var(--color-fg);
  padding: .6rem .9rem; border: 1px solid var(--cds-border); border-radius: var(--cds-radius);
}
.skiplink:focus { left: max(20px, env(safe-area-inset-left, 0px)); top: .5rem; }

/* Loading and empty states the page's own CSS expects from the host. */
.dash-skeleton {
  background-image: linear-gradient(90deg, var(--cds-chart-grid), var(--cds-chart-grid));
  background-repeat: no-repeat;
  background-size: 60% .75em;
  background-position: 0 .35em;
  border-radius: 3px;
  color: transparent !important;
  min-height: 1em;
}
.im-chart.dash-skeleton { background-size: 100% 100%; background-position: 0 0; min-height: 9rem; }

select.dash-select {
  font: inherit;
  font-size: var(--cds-font-size-caption);
  color: var(--color-fg);
  background-color: var(--color-panel);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-fg-muted) 50%), linear-gradient(135deg, var(--color-fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--cds-border);
  border-radius: var(--cds-radius);
  padding: .4rem 1.9rem .4rem .55rem;
  appearance: none;
  max-width: 100%;
}

.site-foot {
  border-top: 1px solid var(--color-border-line);
  margin-top: var(--cds-gap-xl);
  padding-block: var(--cds-pad-xl);
  font-size: var(--cds-font-size-caption);
  color: var(--color-fg-muted);
  display: flex; flex-direction: column; gap: var(--cds-gap-sm);
  max-width: 76rem; margin-inline: auto;
}
.site-foot a { color: inherit; }
.site-foot ul { margin: 0; padding-left: 1.1rem; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; padding-left: 0; }
.theme-toggle {
  position: absolute; top: clamp(1rem, 3vw, 2.5rem); right: max(20px, env(safe-area-inset-right, 0px));
  font: inherit; font-size: var(--cds-font-size-caption);
  background-color: var(--color-panel); color: var(--color-fg-muted);
  border: 1px solid var(--cds-border); border-radius: var(--cds-radius);
  padding: .35rem .6rem; cursor: pointer;
}
.theme-toggle:hover { color: var(--color-fg); }
@media (max-width: 560px) { .theme-toggle { position: static; align-self: flex-start; margin-bottom: var(--cds-gap-sm); } }

/* The h1 carries both the name and the subject, so it needs two registers. */
.im-title .im-brand {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--cds-font-size-title);
  letter-spacing: -.012em;
  line-height: 1.1;
}
.im-title .im-h1sub {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--cds-font-size-body);
  color: var(--color-fg-muted);
  margin-top: .3rem;
  max-width: 54ch;
  text-wrap: balance;
}
.noscript-note {
  max-width: 76rem;
  margin: 0 auto var(--cds-gap-md);
  padding: var(--cds-pad-md) var(--cds-pad-lg);
  background: var(--color-panel);
  border: 1px solid var(--color-border-line);
  border-left: 3px solid var(--cat-policy);
  border-radius: var(--cds-radius);
  font-size: var(--cds-font-size-caption);
  color: var(--color-fg-muted);
}
.foot-h {
  font-size: var(--cds-font-size-caption);
  font-weight: var(--cds-font-weight-medium);
  color: var(--color-fg);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: var(--cds-gap-sm) 0 0;
}

/* ---- page ---- */
/* Layout: a reading column of cards; the record is a category-coloured timeline over a sortable log. */
  .im { max-width: 76rem; margin-inline: auto; font-family: var(--font-anthropic-sans); }
  .im p, .im li { margin: 0; }
  .im-head { display: flex; flex-direction: column; gap: var(--cds-gap-xs); padding-block: var(--cds-pad-sm) var(--cds-pad-lg); }
  .im-title { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); margin: 0; text-wrap: balance; }
  .im-tagline { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); letter-spacing: .02em; }
  .im-lede { color: var(--color-fg-muted); font-size: var(--cds-font-size-body); max-width: 58ch; }
  .im b { font-weight: var(--cds-font-weight-medium); color: var(--color-fg); font-variant-numeric: tabular-nums; }

  .im-section { display: flex; flex-direction: column; gap: var(--cds-gap-md); padding-block: var(--cds-pad-lg); }
  .im-h2 { font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); margin: 0; }
  .im-sub { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); max-width: 70ch; }

  .im-grid { display: grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .im-tiles { display: grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .im-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-sm); min-width: 0; }
  .im-card-h { font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); margin: 0; }
  .im-note { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }

  .im-tile { border-left: 3px solid var(--cds-chart-muted); }
  .im-tile-cat { font-size: var(--cds-font-size-caption); letter-spacing: .04em; text-transform: uppercase; color: var(--color-fg-muted); }
  .im-tile-val { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); line-height: 1.1; font-variant-numeric: tabular-nums; }
  .im-tile-val.im-tile-text { font-size: var(--cds-font-size-heading); }
  .im-tile-lab { font-size: var(--cds-font-size-caption); }
  .im-tile-sub { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); margin-top: auto; }
  .im-flag { font-size: var(--cds-font-size-caption); color: var(--color-warn); }

  .im-chart { position: relative; min-width: 0; }
  .im-svg { display: block; overflow: hidden; }
  .im-tip { position: absolute; pointer-events: none; z-index: 3; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); max-width: 17rem; }
  .im-tip-k { color: var(--cds-text-secondary); }
  .im-tip-h { font-weight: var(--cds-font-weight-medium); }

  .im-mult { display: grid; gap: var(--cds-gap-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .im-mult-title { font-size: var(--cds-font-size-caption); font-weight: var(--cds-font-weight-medium); }
  .im-mult-sub { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); margin-bottom: var(--cds-gap-xs); }

  .im-legend { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm) var(--cds-gap-md); align-items: center; }
  .im-leg { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--cds-font-size-caption); }
  .im-dot { width: .625rem; height: .625rem; border-radius: 50%; background: var(--cds-chart-muted); flex: none; }

  .im-controls { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); align-items: center; }
  .im-controls label { display: inline-flex; flex-direction: column; gap: .2rem; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
  .im-search { font: inherit; font-size: var(--cds-font-size-caption); padding: .4rem .55rem; border: 1px solid var(--cds-border); border-radius: var(--cds-radius); background-color: var(--color-bg); color: var(--color-fg); min-width: 11rem; }
  .im-btn { font: inherit; font-size: var(--cds-font-size-caption); padding: .4rem .7rem; border: 1px solid var(--cds-border); border-radius: var(--cds-radius); background-color: var(--color-panel); color: var(--color-fg); cursor: pointer; }
  .im-btn:hover { background-color: var(--color-bg); }

  .im-detail { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-xs); min-height: 10rem; }
  .im-detail-meta { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .im-linkflag { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
  .im-detail-h { font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); margin: 0; text-wrap: balance; }
  .im-detail-b { font-size: var(--cds-font-size-body); max-width: 68ch; }
  .im-chip { display: inline-flex; align-items: center; gap: .35rem; }

  .im-tablewrap { overflow-x: auto; max-height: 30rem; overflow-y: auto; border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); }
  .im-table { border-collapse: collapse; width: 100%; font-size: var(--cds-font-size-caption); }
  .im-table th, .im-table td { text-align: left; padding: .5rem .65rem; border-bottom: 1px solid var(--color-border-line); vertical-align: top; }
  .im-table thead th { position: sticky; top: 0; background: var(--color-panel); z-index: 2; white-space: nowrap; font-weight: var(--cds-font-weight-medium); }
  .im-table tbody tr { cursor: pointer; }
  .im-table tbody tr:hover { background: var(--color-panel); }
  .im-table tbody tr[aria-selected="true"] { background: var(--color-panel); box-shadow: inset 3px 0 0 var(--color-fg); }
  .im-table td.im-wide { min-width: 18rem; }
  .im-sortbtn { font: inherit; font-weight: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: .25rem; align-items: center; }
  .im-sortbtn:hover { text-decoration: underline; }
  .im-num { font-variant-numeric: tabular-nums; }
  .im a { color: inherit; text-underline-offset: .15em; }
  .im-empty { color: var(--color-fg-muted); padding: var(--cds-pad-lg); }

  .im-method { border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-md) var(--cds-pad-lg); }
  .im-method summary { cursor: pointer; font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); }
  .im-method dl { margin: var(--cds-gap-md) 0 0; display: grid; gap: var(--cds-gap-sm); font-size: var(--cds-font-size-caption); }
  .im-method dt { font-weight: var(--cds-font-weight-medium); }
  .im-method dd { margin: .1rem 0 0; color: var(--color-fg-muted); max-width: 72ch; }
  .im-fail { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); min-height: 8rem; }
  .im-fail-dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-bad); flex: none; }
  [data-dash-source-state="refreshing"] { opacity: .5; transition: opacity var(--cds-dur-slow); }
  [data-dash-source-state="empty"] { color: transparent; }
  .im :focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }