/*
 * Design system “anomaly”: tokens and primitives shared by the public site and the admin.
 * Nine records sit square in a grid; one has been turned. A strict grid, one anomaly per view, one colour per
 * practice. No rounded corners, no shadows, no gradients: depth comes from flat colour fields.
 * Brand values are overridden by theme.css (Appearance); everything else reads these tokens.
 */
:root {
  /* brand */
  --dt-primary: #2341B0;          /* cobalt: brand ground, links, primary buttons */
  --dt-primary-hover: #1C3796;
  --dt-on-primary: #FFFFFF;
  --dt-on-primary-2: #C9CFF0;     /* quiet text on cobalt */
  --dt-ink: #0B1440;              /* text, rules, the grid */
  --dt-paper: #F4F5FA;            /* reading surfaces */
  --dt-tint: #E3E6F3;
  --dt-slate: #4B5285;
  --dt-text2: #3A4170;
  --dt-line: #C9CFF0;
  --dt-flag: #E2EC5A;             /* the anomaly on cobalt (display only) */
  /* category keys: flat fields that categorise content, never decoration; always ink on top */
  --dt-k1: #F2715B;  /* coral */
  --dt-k2: #C9B6EC;  /* lilac */
  --dt-k3: #79E2C4;  /* mint */
  --dt-k4: #E2EC5A;  /* lime */
  --dt-bad: #C23A2B;
  --dt-bad-line: #DB4B37;
  --dt-ok: #1F7A4D;
  /* a reported (attributed) relationship in the atlas: amber, readable as a thin line on paper */
  --dt-reported: #A85F00;

  /* surfaces (light) */
  --dt-bg: #FFFFFF;
  --dt-surface: var(--dt-paper);
  --dt-surface-2: var(--dt-tint);
  --dt-fg: var(--dt-ink);
  --dt-fg-2: var(--dt-text2);
  --dt-fg-3: var(--dt-slate);
  --dt-rule: var(--dt-ink);
  --dt-rule-soft: var(--dt-tint);
  --dt-link: var(--dt-primary);
  --dt-strong: var(--dt-ink);

  /* type */
  --dt-sans: "Schibsted Grotesk", "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dt-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --dt-mono-w: 88%;
  --dt-d1: clamp(46px, 7.4vw, 96px);
  --dt-d2: clamp(34px, 4.4vw, 56px);
  --dt-h3: clamp(24px, 2.4vw, 30px);
  --dt-h4: 21px;
  --dt-body: 18px;
  --dt-small: 15px;

  /* grid */
  --dt-gap: 12px;
  --dt-col-gap: clamp(20px, 3.2vw, 40px);
  --dt-pad: clamp(16px, 3.2vw, 40px);
  --dt-max: 1280px;
  --dt-focus: 3px solid var(--dt-primary);
}

/* reset and base */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--dt-bg); color: var(--dt-fg); font: 400 var(--dt-body)/1.55 var(--dt-sans); -webkit-font-smoothing: antialiased; font-synthesis: none; }
img, svg { display: block; max-width: 100%; }
svg.dt-i { display: inline-block; vertical-align: -0.2em; flex: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--dt-link); }
:focus-visible { outline: var(--dt-focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--dt-flag); color: var(--dt-ink); }
table { border-collapse: collapse; }

/* primitives */
.dt-wrap { width: 100%; max-width: var(--dt-max); margin: 0 auto; padding-left: var(--dt-pad); padding-right: var(--dt-pad); }
.dt-mono { font-family: var(--dt-mono); font-stretch: var(--dt-mono-w); }
.dt-label { font: 500 12px/1.4 var(--dt-mono); font-stretch: var(--dt-mono-w); color: var(--dt-fg-3); letter-spacing: 0; }
.dt-label-b { font: 600 11px/1.4 var(--dt-mono); font-stretch: var(--dt-mono-w); }
.dt-dim { color: var(--dt-fg-3); }
.dt-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dt-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--dt-ink); color: #fff; padding: 10px 14px; font: 600 12px var(--dt-mono); }
.dt-skip:focus { left: 8px; top: 8px; color: #fff; }
.dt-d1 { font-weight: 900; font-size: var(--dt-d1); letter-spacing: -0.05em; line-height: .9; text-wrap: balance; }
.dt-d2 { font-weight: 900; font-size: var(--dt-d2); letter-spacing: -0.045em; line-height: .95; text-wrap: balance; }
.dt-h3 { font-weight: 700; font-size: var(--dt-h3); letter-spacing: -0.02em; line-height: 1.05; }
.dt-h4 { font-weight: 700; font-size: var(--dt-h4); line-height: 1.2; }
.dt-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; text-wrap: pretty; }
.dt-count { font: 500 13px var(--dt-mono); font-stretch: var(--dt-mono-w); color: var(--dt-fg-3); vertical-align: middle; margin-left: 6px; }

/* the wordmark and the mark */
.dt-word { font-family: var(--dt-mono); font-stretch: var(--dt-mono-w); font-weight: 600; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
/* Long words (German compounds, Russian adjectives) must never push a heading out of its column: they break, and
   in the languages the browser can hyphenate, they hyphenate. English headings keep their unhyphenated rag. */
:is(.dt-d1, .dt-d2, .dt-d2b, .dt-dmax, .dt-dh1, .dt-h2b, .dt-h2c, .dt-h3, .dt-h4, .dt-tile-t, .dt-step-t, .dt-pkg-t, .dt-dcta-t, .dt-wiz-h) { overflow-wrap: break-word; }
:root:not(:lang(en)) :is(.dt-d1, .dt-d2, .dt-d2b, .dt-dmax, .dt-dh1, .dt-h2b, .dt-h2c, .dt-h3, .dt-h4, .dt-tile-t, .dt-step-t, .dt-pkg-t, .dt-dcta-t, .dt-wiz-h, .dt-practice-key h2, .dt-prose h2, .dt-lead) { hyphens: auto; }

/* Simplified Chinese: CJK glyphs need room above and below, take no tracking, and are never slanted (there is no
   Chinese italic; emphasis is weight). Weight synthesis stays on, as the system Chinese faces stop at semibold. */
:root:lang(zh) body { line-height: 1.75; font-synthesis: weight; }
:root:lang(zh) *:not(.dt-word) { letter-spacing: 0 !important; }
:root:lang(zh) :is(.dt-d1, .dt-d2, .dt-d2b, .dt-dmax, .dt-dh1) { line-height: 1.15; }
:root:lang(zh) :is(.dt-h3, .dt-h2b, .dt-h2c, .dt-tile-t, .dt-dcard-feat-t, .dt-dcard-t, .dt-prose h2, .dt-practice-key h2, .dt-section > h2, .dt-registers h2, .dt-dcta-t, .dt-kf-v, .dt-drow-t b) { line-height: 1.3; }
:root:lang(zh) .dt-lead { line-height: 1.7; }
:root:lang(zh) :is(em, i, cite, .dt-prose em) { font-style: normal; font-weight: 600; }
.dt-word-dot { color: var(--dt-primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .dt-word-dot { color: var(--dt-flag); } :root:not([data-theme=light]) { --dt-reported: #F2B24A; } }
:root[data-theme=dark] { --dt-reported: #F2B24A; }
:root[data-theme=dark] .dt-word-dot { color: var(--dt-flag); }
.dt-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--dt-fg); }
.dt-logo .dt-word { font-size: 18px; }
.dt-logo:hover { color: var(--dt-fg); }

/* the anomaly: a 45° square in a key colour, one per view */
.dt-anomaly { display: inline-block; width: 14px; height: 14px; background: var(--dt-k1); transform: rotate(45deg); flex: none; }
.dt-swatch { display: inline-block; width: 12px; height: 12px; flex: none; background: var(--dt-k1); }
.k1 { --dt-key: var(--dt-k1); } .k2 { --dt-key: var(--dt-k2); } .k3 { --dt-key: var(--dt-k3); } .k4 { --dt-key: var(--dt-k4); }
.dt-key-k1 { --dt-key: var(--dt-k1); } .dt-key-k2 { --dt-key: var(--dt-k2); } .dt-key-k3 { --dt-key: var(--dt-k3); } .dt-key-k4 { --dt-key: var(--dt-k4); }
.dt-swatch.k1, .dt-swatch.k2, .dt-swatch.k3, .dt-swatch.k4, .dt-anomaly.k1, .dt-anomaly.k2, .dt-anomaly.k3, .dt-anomaly.k4 { background: var(--dt-key); }
.dt-on-key { background: var(--dt-key, var(--dt-k1)); color: var(--dt-ink); }
.dt-on-key a:not(.dt-btn), .dt-on-key a:not(.dt-btn):hover { color: var(--dt-ink); }
/* a whole tile or card that is itself a link keeps ink on its key colour, also on hover and in dark mode */
a.dt-on-key, a.dt-on-key:hover, a.dt-on-key:focus-visible { color: var(--dt-ink); }
.dt-on-primary { background: var(--dt-primary); color: var(--dt-on-primary); }
.dt-on-primary a:not(.dt-btn) { color: var(--dt-on-primary); }
.dt-on-ink { background: var(--dt-ink); color: #E3E6F3; }

/* buttons: square, flat */
.dt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; padding: 11px 16px; font: 600 12px/1.2 var(--dt-mono); font-stretch: var(--dt-mono-w); background: var(--dt-primary); color: #fff; text-decoration: none; white-space: nowrap; }
.dt-btn:hover { background: var(--dt-primary-hover); color: #fff; }
.dt-btn-ink { background: var(--dt-ink); color: #fff; }
.dt-btn-ink:hover { background: var(--dt-primary); color: #fff; }
.dt-btn-outline { background: transparent; color: var(--dt-fg); box-shadow: inset 0 0 0 1.5px currentColor; padding: 11px 15px; }
.dt-btn-outline:hover { background: transparent; color: var(--dt-link); }
.dt-btn-light { background: #fff; color: var(--dt-ink); font: 700 16px/1.2 var(--dt-sans); padding: 15px 22px; }
.dt-btn-light:hover { background: var(--dt-flag); color: var(--dt-ink); }
.dt-btn-ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; font: 700 16px/1.2 var(--dt-sans); padding: 15px 22px; }
.dt-btn-ghost-light:hover { background: #fff; color: var(--dt-ink); }
.dt-btn[disabled], .dt-btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
.dt-link { font: 600 12px/1.4 var(--dt-mono); font-stretch: var(--dt-mono-w); color: var(--dt-link); }
.dt-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* chips */
.dt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8.5px 13px; font: 500 12px/1.2 var(--dt-mono); font-stretch: var(--dt-mono-w); box-shadow: inset 0 0 0 1.5px var(--dt-fg); color: var(--dt-fg); }
a.dt-chip:hover { color: var(--dt-fg); background: var(--dt-surface); }
.dt-chip.is-on, a.dt-chip[aria-current] { background: var(--dt-fg); color: var(--dt-bg); box-shadow: none; padding: 10px 14px; }

/* forms */
.dt-input { display: block; width: 100%; padding: 13px 15px; background: var(--dt-bg); color: var(--dt-fg); border: 2px solid var(--dt-fg); border-radius: 0; font: 400 15px/1.3 var(--dt-sans); }
.dt-input::placeholder { color: var(--dt-fg-3); font-family: var(--dt-mono); font-stretch: var(--dt-mono-w); font-size: 13px; }
.dt-input:focus { outline: 3px solid var(--dt-primary); outline-offset: 0; }
textarea.dt-input { min-height: 160px; resize: vertical; line-height: 1.5; }

/* motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }