/* Dobson Analytics site. Values from brand/tokens.json; change them there first. */
@font-face { font-family: 'Cabin'; src: url('/fonts/Cabin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cabin'; src: url('/fonts/Cabin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cabin'; src: url('/fonts/Cabin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('/fonts/DMMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('/fonts/DMMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --ground: #EEF1F2; --surface: #FFFFFF; --surface-sunken: #E3E8EB;
  --ink: #33434F; --ink-2: #4A5A66; --muted: #5C6B77;
  --level: #2F6F8F; --level-hover: #265B75; --on-level: #FFFFFF;
  --hairline: #C8D0D6; --focus: #2F6F8F; --ok: #3C7A5A; --warn: #9A6A1F;
  --font-sans: 'Cabin', 'Gill Sans', 'Trebuchet MS', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 4px; --radius-md: 6px; --radius-round: 999px;
  --measure: 68ch;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1E2830; --surface: #2A3640; --surface-sunken: #243039;
    --ink: #EEF1F2; --ink-2: #C8D0D6; --muted: #9AA8B3;
    --level: #7FB3CF; --level-hover: #9CC5DB; --on-level: #1E2830;
    --hairline: #3C4A55; --focus: #7FB3CF; --ok: #7FC29B; --warn: #E0B35F;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 25px; }
a { color: var(--level); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--level-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 600; color: var(--ink); }
h1 { font-size: 34px; line-height: 40px; letter-spacing: -0.3px; }
h2 { font-size: 24px; line-height: 30px; }
h3 { font-size: 19px; line-height: 26px; }
p { margin: 0; max-width: var(--measure); }
p + p, p + ul, ul + p { margin-top: var(--space-4); }
ul, ol { margin: 0; padding-left: 22px; max-width: var(--measure); }
li + li { margin-top: var(--space-2); }
.lead { font-size: 20px; line-height: 28px; color: var(--ink-2); }
.small { font-size: 14px; line-height: 20px; }
.muted { color: var(--muted); }
.label { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.figure { font-family: var(--font-mono); font-size: 15px; line-height: 22px; }
.figure-large { font-family: var(--font-mono); font-size: 28px; line-height: 34px; font-weight: 500; }
.display { font-size: 48px; line-height: 52px; letter-spacing: -0.5px; }
@media (max-width: 600px) { .display { font-size: 34px; line-height: 40px; letter-spacing: -0.3px; } h1 { font-size: 28px; line-height: 34px; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-16); }
@media (max-width: 800px) { .wrap { padding: 0 var(--space-4); } }

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); min-height: 72px; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand svg { height: 40px; width: auto; display: block; }
.brand .brand-text { fill: var(--ink); }
.brand .brand-disc { fill: var(--ink); }
.brand .brand-line { stroke: var(--ground); }
.brand .brand-da { fill: var(--ground); }
nav.primary { display: flex; flex-wrap: wrap; gap: var(--space-6); }
nav.primary a { color: var(--ink); text-decoration: none; font-weight: 500; padding: var(--space-2) 0; }
@media (max-width: 600px) { nav.primary { gap: var(--space-4); font-size: 15px; } .site-header .wrap { gap: var(--space-2); } }
nav.primary a[aria-current="page"] { border-bottom: 2px solid var(--level); }
nav.primary a:hover { color: var(--level); }

/* Sections */
main { padding: var(--space-12) 0 var(--space-16); }
section + section { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--hairline); }
.section-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 800px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 801px) { .card { padding: var(--space-8); } }
.card h2, .card h3 { margin: 0; }
.status { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--muted); }
.status.ok::before { background: var(--ok); }
.status.warn::before { background: var(--warn); }

.button { display: inline-block; font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; background: var(--level); color: var(--on-level); border: 1px solid var(--level); border-radius: var(--radius-sm); padding: var(--space-3) 20px; text-decoration: none; cursor: pointer; min-height: 44px; }
.button:hover { background: var(--level-hover); border-color: var(--level-hover); color: var(--on-level); }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--hairline); }
.button.secondary:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* Product cards: each logo sits on its own product's header colour (Residents Almanac: paper #F3ECDD with its gold rule;
   Scout: OD green #4B5320 with its red keyline), taken from each product's stylesheet. */
.card.product { gap: var(--space-4); overflow: hidden; }
.product-logo { display: flex; align-items: center; min-height: 112px; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; padding: var(--space-6); }
@media (min-width: 801px) { .product-logo { margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0; padding: var(--space-6) var(--space-8); } }
.product-logo img { display: block; max-width: 100%; height: auto; max-height: 64px; width: auto; }
.product-logo.ra { background: #F3ECDD; border-bottom: 3px solid #9C7A3C; }
.product-logo.scout { background: #4B5320; border-bottom: 3px solid #C8102E; }
.site-footer strong { color: var(--ink); font-weight: 600; }

/* Figures row */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 800px) { .figures { grid-template-columns: 1fr; } }
.figures div { border-top: 1px solid var(--hairline); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }

/* Tables */
table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 22px; }
th, td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
th { font-weight: 600; }
td.num, th.num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.source { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: var(--space-2); }
.well { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
.placeholder { font-family: var(--font-mono); color: var(--warn); }

/* Footer */
.site-footer { border-top: 1px solid var(--hairline); padding: var(--space-8) 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
.site-footer a { color: var(--muted); }