/* ==========================================================================
   Dason & Dason: shared components. Linked by both shells after
   variables.css. Class names are the contract in docs/platform.md; a module
   uses these and adds little CSS of its own.

   Spacing: a few page-level blocks (page-head, card, alert, tiles, tabs)
   carry a bottom margin, so a page reads well with nothing else. Put
   `stack` on a page's wrapper (or any block) for an even rhythm; margins
   collapse, so the larger of the two wins. Flow rules use :where() and so
   weigh nothing: any class that sets its own margin overrides them.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--ground);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--ground);
    color: var(--body);
    font-family: var(--sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { color: var(--head); line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 300; letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); font-weight: 400; }
h3 { font-size: var(--fs-base); font-weight: 500; }
b, strong, th { font-weight: 500; }
strong { color: var(--head); }
p, li, dd { text-wrap: pretty; }

a {
    color: var(--head);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--dim);
    text-underline-offset: .28em;
    transition: color .2s, text-decoration-color .2s;
}
a:hover { text-decoration-color: var(--red); }

button { font: inherit; color: inherit; }
hr { margin: var(--space-6) 0; border: 0; border-top: 1px solid var(--line); }

/* Focus is one of the three places red appears. */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--fill); color: var(--on-fill); }

/* ---------- Flow ---------- */
:where(.card, form) > * + * { margin-top: 20px; }
:where(.stack) > * + * { margin-top: var(--space-6); }
:where(.page-head) > * + * { margin-top: var(--space-3); }
:where(.alert) > * + * { margin-top: var(--space-2); }
/* A form's hidden inputs come first and take no room; the first visible
   child should not be pushed down as if they did. */
:where(.card, form, .stack) > :where(input[type="hidden"]) + * { margin-top: 0; }

/* ---------- Page header: eyebrow, h1, lede ---------- */
.page-head { margin-bottom: var(--space-7); }

/* Small tracked capitals after a 24px red hairline, as on the website. */
.eyebrow {
    position: relative;
    padding-left: 40px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(.8em - .5px);
    width: 24px;
    height: 1px;
    background: var(--red);
}

.lede {
    max-width: var(--measure);
    color: var(--muted);
    font-size: var(--fs-lead);
    line-height: 1.65;
}

/* ---------- Containers ---------- */
.card {
    margin-bottom: var(--space-5);
    padding: 20px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    --autofill-ground: var(--raised);
}
.card > :last-child { margin-bottom: 0; }

/* Nothing yet: the frame without the fill, the words quiet. */
.card.empty { background: transparent; --autofill-ground: var(--ground); }
.card.empty > p { max-width: var(--measure); color: var(--muted); }

@media (min-width: 768px) {
    .card { padding: 28px 32px; }
    .card.empty { padding: 40px; }
}

/* ---------- Alerts: a rule in the status colour, the words in plain text ---------- */
.alert {
    margin-bottom: var(--space-5);
    padding: 14px 18px;
    background: var(--raised);
    border: 1px solid var(--line);
    border-left: 2px solid var(--muted);
    border-radius: var(--radius);
    color: var(--body);
}
.alert ul { padding-left: 1.2em; }
.alert-success { border-left-color: var(--ok); }
.alert-error { border-left-color: var(--bad); }
.alert-note { border-left-color: var(--warn); }

/* ---------- Buttons ---------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: 0 20px;
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    background: transparent;
    color: var(--head);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .04em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, text-decoration-color .2s;
}
.button:hover { border-color: var(--muted); }

/* The one filled button on a page. */
.button-primary {
    background: var(--fill);
    border-color: var(--fill);
    color: var(--on-fill);
}
.button-primary:hover { background: var(--fill-hover); border-color: var(--fill-hover); }

/* A secondary action that reads as a link. */
.button-quiet {
    padding-inline: 0;
    border-color: transparent;
    color: var(--body);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--dim);
    text-underline-offset: .32em;
}
.button-quiet:hover { border-color: transparent; color: var(--head); text-decoration-color: var(--red); }

.button:disabled,
.button[aria-disabled="true"] { opacity: .5; cursor: default; }

/* ---------- Forms: field holds field-label, the input, and hint ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    border: 0;
}
.field-label {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: .02em;
}
legend.field-label { padding: 0; margin-bottom: 6px; }
.hint { color: var(--dim); font-size: var(--fs-sm); line-height: 1.55; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-6);
}

/* Inputs are a hairline to write on, as on the website's sign-in page. */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"], [type="image"]), select, textarea) {
    min-height: var(--control-h);
    max-width: 100%;
    padding: 8px 0 9px;
    border: 0;
    border-bottom: 1px solid var(--dim);
    border-radius: 0;
    background: transparent;
    color: var(--head);
    font: inherit;
    font-size: var(--fs-base);
    caret-color: var(--red);
    transition: border-color .2s, box-shadow .2s;
}
:where(input, select, textarea):hover { border-bottom-color: var(--muted); }
:where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):focus {
    outline: none;
    border-bottom-color: var(--red);
    box-shadow: 0 1px 0 0 var(--red);
}
input:-webkit-autofill {
    -webkit-text-fill-color: var(--head);
    box-shadow: 0 0 0 1000px var(--autofill-ground, var(--ground)) inset;
    transition: background-color 9999s;
}
input:-webkit-autofill:focus {
    box-shadow: 0 0 0 1000px var(--autofill-ground, var(--ground)) inset, 0 1px 0 0 var(--red);
}

select {
    appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c0bcb2' stroke-width='1.2'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 11px 7px;
    cursor: pointer;
}
select option { background: var(--raised); color: var(--head); }

input[type="checkbox"],
input[type="radio"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--fill);
    cursor: pointer;
}

/* One radio or checkbox with its words. */
.choice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    color: var(--body);
    cursor: pointer;
}

input[type="file"] {
    max-width: 100%;
    color: var(--muted);
    font: inherit;
    font-size: var(--fs-sm);
}
input[type="file"]::file-selector-button {
    min-height: var(--control-h);
    margin-right: var(--space-4);
    padding: 0 18px;
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    background: transparent;
    color: var(--head);
    font: inherit;
    font-weight: 500;
    letter-spacing: .04em;
    cursor: pointer;
    transition: border-color .2s;
}
input[type="file"]:hover::file-selector-button { border-color: var(--muted); }

/* ---------- Tables: table-scroll wraps table.rows; number marks figures ---------- */
table { width: 100%; border-collapse: collapse; }

.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    scrollbar-color: var(--rule) transparent;
}

.rows { font-size: var(--fs-sm); line-height: 1.5; }
.rows th,
.rows td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.rows thead th {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom-color: var(--rule);
}
.rows tbody tr:last-child > * { border-bottom: 0; }
.rows tbody tr:hover > * { background: var(--lift); }
/* Outside a frame, the first and last columns line up with the text around. */
:not(.table-scroll) > .rows :is(th, td):first-child { padding-left: 0; }
:not(.table-scroll) > .rows :is(th, td):last-child { padding-right: 0; }

/* Figures: right-aligned, every digit the same width, so columns add up by eye. */
.number,
.rows .number {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

/* ---------- Badges: words in small capitals, a dot for the state ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 1px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--body);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.badge-ok::before,
.badge-warn::before,
.badge-bad::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.badge-ok::before { background: var(--ok); }
.badge-warn::before { background: var(--warn); }
.badge-bad::before { background: var(--bad); }
.badge-muted { color: var(--dim); }

/* ---------- Figures: tiles holds tile, which holds dt and dd ---------- */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
}
.tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
}
.tile dt { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
/* Standalone figures keep the font's own spacing; the bottom edge lines up across a row. */
.tile dd {
    margin-top: auto;
    padding-top: var(--space-2);
    color: var(--head);
    font-size: var(--fs-fig);
    font-weight: 300;
    line-height: 1.15;
    font-variant-numeric: lining-nums;
}

/* ---------- Checks: a list of results, each with a badge ---------- */
.checks { padding: 0; list-style: none; }
.check {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 2px var(--space-4);
    padding: 14px 0;
    border-top: 1px solid var(--line);
}
.check:first-child { padding-top: 0; border-top: 0; }
.check:last-child { padding-bottom: 0; }
.check .badge { grid-row: span 2; align-self: start; justify-self: start; }
.check-name { color: var(--head); }
.check-detail { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Tabs: links, the current one with aria-current="page" ---------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--line);
}
.tabs a {
    margin-bottom: -1px;
    padding: 10px 0 12px;
    border-bottom: 1px solid transparent;
    color: var(--muted);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.tabs a:hover { color: var(--head); }
.tabs a[aria-current="page"] { color: var(--head); border-bottom-color: var(--red); }

/* ---------- Layout ---------- */
.grid-2,
.grid-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5) var(--space-6);
}
.grid-2 > *,
.grid-3 > * { margin: 0; }
@media (min-width: 720px) {
    .grid-2,
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.muted { color: var(--muted); }

/* ---------- Utilities ---------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 100;
    padding: 8px 14px;
    background: var(--head);
    color: var(--ground);
    text-decoration: none;
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; }
}