/*
 * Base styles shared by the public site and the admin. Values come from
 * tokens.css, which must load first; nothing here hardcodes a color or size.
 * The one exception is media query breakpoints, which cannot read custom
 * properties; they are listed in docs/DESIGN_SYSTEM.md.
 */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--header-offset); /* anchors land below the sticky header */
}

/* Column layout keeps the footer at the bottom of short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
    background: var(--color-page);
}

img,
svg {
    max-width: 100%;
    height: auto;
}

/* Typography. Serif for page and section headlines only; h3 and below stay in
   Inter so the interface reads modern rather than newspaper. */
h1,
h2,
h3,
h4 {
    margin: 0 0 var(--space-4);
    color: var(--color-heading);
    line-height: var(--leading-heading);
}

h1 {
    font-family: var(--font-serif);
    font-size: var(--text-page);
    font-weight: var(--weight-semibold);
}

h2 {
    font-family: var(--font-serif);
    font-size: var(--text-section);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-7);
}

h3 {
    font-size: var(--text-card);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin-top: var(--space-6);
}

h4 {
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
}

p,
ul,
ol,
dl,
table,
blockquote {
    margin: 0 0 var(--space-4);
}

ul,
ol {
    padding-left: var(--space-5);
}

li + li {
    margin-top: var(--space-1);
}

a {
    color: var(--color-link);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--color-link-hover);
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

small,
.text-small {
    font-size: var(--text-small);
}

.meta {
    font-size: var(--text-meta);
    color: var(--color-text-secondary);
}

.lede {
    font-size: var(--text-card);
}

hr {
    border: 0;
    border-top: var(--border);
    margin: var(--space-6) 0;
}

/* Layout */
.container {
    max-width: var(--width-page);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.reading {
    max-width: var(--width-reading);
}

.skip-link {
    position: absolute;
    z-index: var(--z-skip-link);
    left: var(--space-2);
    top: calc(-1 * var(--space-8));
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius);
}

.skip-link:focus {
    top: var(--space-2);
}

/* Sticky so navigation (and later, search) stays in reach on long records. */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-surface);
    border-bottom: var(--border);
}

.draft-banner {
    padding: var(--space-2) var(--gutter);
    background: var(--color-navy);
    color: var(--color-surface);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    text-align: center;
}

.site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.site-logo {
    display: block;
    line-height: 0;
}

.site-logo img {
    height: var(--logo-height);
    width: auto;
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav li + li {
    margin-top: 0;
}

.site-nav a {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-heading);
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--color-link);
    text-decoration: underline;
}

.site-main {
    flex: 1;
    padding-top: var(--space-7);
    padding-bottom: var(--space-8);
}

.site-footer {
    border-top: var(--border);
    background: var(--color-surface);
    padding: var(--space-6) 0;
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    text-align: center;
}

.site-footer p {
    margin-bottom: var(--space-1);
}

.site-footer p:last-child {
    margin-bottom: 0;
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) 0;
    margin: 0 0 var(--space-1);
    padding: 0;
    list-style: none;
}

.footer-nav li + li {
    margin-top: 0;
}

/* A bar between links, as on the sister sites. Decorative: the second
   declaration gives it empty alt text, so screen readers skip it; browsers
   without that syntax keep the first. */
.footer-nav li + li::before {
    content: "|";
    content: "|" / "";
    margin: 0 var(--space-3);
    color: var(--color-separator);
}

/* A highlighted panel. Links inside need the darker blue to stay AA. */
.panel {
    background: var(--color-tint);
    border-radius: var(--radius);
    padding: var(--space-5);
}

.panel a {
    color: var(--color-link-on-tint);
}

/* Buttons */
.button {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--color-surface);
    background: var(--color-blue);
    border: var(--border-width) solid var(--color-blue);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    color: var(--color-surface);
    background: var(--color-blue-hover);
    border-color: var(--color-blue-hover);
}

.button-secondary {
    color: var(--color-navy);
    background: var(--color-surface);
    border-color: var(--color-pale-blue);
}

.button-secondary:hover {
    color: var(--color-navy);
    background: var(--color-page);
    border-color: var(--color-steel);
}

/* Icons (#96): inline SVG, aria-hidden, in the surrounding text color. Line icons by
   default; .icon-filled for the solid variant. */
.icon {
    flex: none;
    width: var(--icon-size);
    height: var(--icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-filled {
    fill: currentColor;
}

/* Forms */
label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
}

input,
select,
textarea {
    width: 100%;
    max-width: var(--width-reading);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-input-border);
    border-radius: var(--radius-small);
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
}

/* Form messages. Red is reserved for the status system, so errors are marked
   in words ("Error:") and weight, with a navy rule, not color. */
.field-error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
}

.form-notice {
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-left: var(--space-1) solid var(--color-heading);
    background: var(--color-surface);
}

.form-notice p:last-child {
    margin-bottom: 0;
}

/* The contact form's honeypot: present for bots, invisible to people and to
   assistive technology (the wrapper is also aria-hidden). */
.form-trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Placeholder text still has to be readable, so not the muted token */
::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
}

:disabled {
    color: var(--color-text-muted);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-small);
}

th,
td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    border-bottom: var(--border);
}

th {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
}

/* Definition lists carry record metadata (dates, status, authority) */
.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-5);
}

.facts dt {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

.facts dd {
    margin: 0;
}

@media (max-width: 30rem) {
    .facts {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .facts dd {
        margin-bottom: var(--space-3);
    }
}

/* Records */
.record-header {
    margin-bottom: var(--space-6);
}

.record .facts {
    padding: var(--space-5) 0;
    border-top: var(--border);
    border-bottom: var(--border);
}

/* Claims carry a text label for their kind (fact, analysis, suggestion); the
   styling only reinforces it, so meaning never rests on color. */
.claims {
    list-style: none;
    padding: 0;
}

.claim {
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-pale-blue);
}

.claim + .claim {
    margin-top: var(--space-4);
}

.claim-inference {
    border-left-color: var(--color-steel);
}

.claim-recommendation {
    border-left-color: var(--color-navy);
}

.claim p {
    margin-bottom: var(--space-2);
}

.claim-kind {
    display: inline-block;
    margin-bottom: var(--space-1);
    font-size: var(--text-meta);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.evidence summary {
    font-size: var(--text-small);
    color: var(--color-link);
    cursor: pointer;
}

.evidence blockquote {
    margin: var(--space-2) 0;
    padding-left: var(--space-3);
    border-left: var(--border);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

.timeline,
.sources,
.change-list {
    list-style: none;
    padding: 0;
}

.timeline li {
    padding-left: var(--space-4);
    border-left: var(--border-width) solid var(--color-pale-blue);
}

.timeline li + li,
.change-list li + li {
    margin-top: var(--space-4);
}

.timeline p {
    margin-bottom: var(--space-1);
}

/* Open questions (#110): a plain list, the question then its context. */
.open-questions li + li {
    margin-top: var(--space-3);
}

.open-questions p {
    margin-bottom: var(--space-1);
}

.change-list li {
    padding-bottom: var(--space-4);
    border-bottom: var(--border);
}

.change-list h3 {
    margin-top: 0;
    margin-bottom: var(--space-2);
}

/* Clickable record titles (#112, Tom's pick): Signal Blue says "link" without an
   underline, darker on hover. No arrow: that marks links that leave the site. */
.change-list h3 a,
.saved-title a {
    color: var(--color-link);
    text-decoration: none;
}

.change-list h3 a:hover,
.saved-title a:hover {
    color: var(--color-link-hover);
}

.record-footer {
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: var(--border);
}

/* Account area, right of the header logo (#41). The menu is <details>, so it opens
   without JavaScript; the list drops below the summary, aligned to the right. */
.account {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
}

/* #105: on a static page the area keeps its space but stays blank until account.js
   knows who is signed in. If it never finds out (the script blocked, say), the links
   appear after --account-wait. */
.account-pending {
    visibility: hidden;
    animation: account-wait 0s var(--account-wait) forwards;
}

@keyframes account-wait {
    to {
        visibility: visible;
    }
}

.account a {
    color: var(--color-heading);
    text-decoration: none;
}

.account a:hover {
    color: var(--color-link);
    text-decoration: underline;
}

.account-sep {
    color: var(--color-separator);
}

.account-menu {
    position: relative;
}

.account-menu summary {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    color: var(--color-link);
    list-style: none;
}

.account-menu summary:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.account-menu summary::-webkit-details-marker {
    display: none;
}

.account-menu summary::after {
    content: "\25BC";
    content: "\25BC" / "";
    font-size: 0.8em;
    line-height: 1;
}

.account-menu[open] summary::after {
    content: "\25B2";
    content: "\25B2" / "";
}

.account-menu ul {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: var(--z-header);
    min-width: 10rem;
    margin: 0;
    padding: var(--space-1) 0;
    list-style: none;
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius);
    text-align: left;
}

.account-menu li + li {
    margin-top: 0;
}

.account-menu li a {
    display: block;
    padding: var(--space-2) var(--space-4);
}

.account-menu-rule {
    margin: var(--space-1) 0;
    border-top: var(--border);
}

/* Short single-purpose pages (sign in, register, contact): the content block is
   centered, its headings and intro too; form labels stay left-aligned for reading. */
.page-centered {
    max-width: var(--width-reading);
    margin: 0 auto;
}

.page-centered > h1,
.page-centered > .lede,
.page-centered > .intro {
    text-align: center;
}

.page-centered form {
    max-width: var(--width-form);
    margin: 0 auto;
}

.page-centered .button {
    width: 100%;
}

/* The contact and concern forms need room for a message, so they use the block's
   full width. */
.page-centered .contact-form,
.page-centered .concern-form {
    max-width: none;
}

/* "Report a concern" (#55): which record it is about, then the concern type as a
   list of radios. */
.page-centered > .about {
    margin-bottom: var(--space-5);
    text-align: center;
}

.about-label {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
}

.choices {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

.choices legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
}

.choice {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
}

input[readonly] {
    color: var(--color-text-secondary);
    background: var(--color-page);
}

.field-note {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

/* Sign in with Google (#41): white, bordered, Google's G, as on the sister sites.
   The G's colors live in its inline SVG (partials/google_g.php), not here. */
.google-sign-in {
    max-width: var(--width-form);
    margin: 0 auto var(--space-4);
}

.button-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--color-text);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-input-border);
    border-radius: var(--radius);
    text-decoration: none;
}

.button-google:hover {
    color: var(--color-text);
    background: var(--color-page);
}

/* "or" between the Google button and the email form: a rule with the word on it */
.or-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: var(--width-form);
    margin: 0 auto var(--space-4);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    border-top: var(--border);
}

/* Links that leave our sites (#41, Tom): an arrow after the text; the words
   "(opens in a new tab)" are in a visually hidden span for screen readers.
   Added to the HTML by App\Services\Site\ExternalLinks. */
a.external::after {
    content: "\2009\2197";
    content: "\2009\2197" / "";
    font-size: 0.85em;
}

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

/* Record page (#52): the reading column on the left, "Does this apply to you?", key
   facts and sharing on the right. One column on narrow screens, with the right column
   after "In short" so applicability comes before the detail. Breakpoint: 60rem. */
.record {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "header" "in-short" "aside" "body";
    gap: 0 var(--space-7);
}

@media (min-width: 60rem) {
    .record {
        grid-template-columns: minmax(0, var(--width-reading)) minmax(16rem, 1fr);
        grid-template-areas: "header aside" "in-short aside" "body aside";
        align-items: start;
    }
}

.record-header { grid-area: header; }
.in-short { grid-area: in-short; }
.record-aside { grid-area: aside; }
.record-body { grid-area: body; }

.box-heading {
    margin: 0 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.in-short {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: var(--color-surface);
    border: var(--border);
    border-left: 3px solid var(--color-navy);
    border-radius: var(--radius);
}

.in-short dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-3) var(--space-5);
    margin: 0;
}

.in-short dt {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
}

.in-short dd {
    margin: 0;
}

.record-aside > section,
.record-aside > .share {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius);
}

.applies dl {
    margin: 0;
}

.applies dt {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
}

.applies dt + dd {
    margin: 0 0 var(--space-4);
}

.applies dd:last-child {
    margin-bottom: 0;
}

.not-assessed {
    color: var(--color-text-secondary);
    font-style: italic;
}

.record-aside .facts {
    grid-template-columns: max-content 1fr;
    font-size: var(--text-small);
    margin: 0;
    padding: 0;
    border: 0;
}

/* The kind of a statement and its source on one line; the summary opens the passage. */
.kind-line {
    margin: 0 0 var(--space-1);
    font-size: var(--text-meta);
}

.kind-line summary {
    cursor: pointer;
    color: var(--color-text-secondary);
}

.kind-line summary:hover .claim-source {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.kind-line .claim-kind {
    margin: 0;
}

.claim-source {
    color: var(--color-link);
}

.applies .kind-line {
    margin-top: var(--space-1);
}

.share {
    font-size: var(--text-small);
}

/* Copy link, Save and Email (#96): centered with even gaps, wrapping as whole buttons
   when the column is narrow. Copy link stays hidden without JavaScript, and the other
   two still center. */
.share-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
}

/* A little narrower than .button, so all three fit one row at common phone widths */
.share-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    white-space: nowrap;
}

/* inline-flex above would otherwise override the hidden attribute */
.share-button[hidden] {
    display: none;
}

/* #105: Copy link takes its place from the first paint where the browser can copy
   (the class is set in the layout's <head>), rather than appearing when share.js
   runs and pushing Save and Email aside. */
.can-copy .share-copy[hidden] {
    display: inline-flex;
}

.share-concern {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: var(--border);
    color: var(--color-text-secondary);
    text-align: center;
}

/* Save (#60): a link to the app's save page, or, signed in on the static site, a
   toggle button (assets/js/account.js) whose aria-pressed swaps the outline star for
   the filled one. */
.share-save[aria-pressed="true"] {
    border-color: var(--color-steel);
}

.share-save-on,
.share-save[aria-pressed="true"] .share-save-off {
    display: none;
}

.share-save[aria-pressed="true"] .share-save-on {
    display: block;
}

/* My saved items (#60): centered heading like contact, the list itself left-aligned. */
.saved-list {
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.saved-item {
    padding: var(--space-4) 0;
    border-top: var(--border);
}

.saved-item:last-child {
    border-bottom: var(--border);
}

.saved-title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-card);
}

.saved-item .meta {
    margin: 0;
}

.saved-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-2);
}

.saved-foot form {
    margin: 0;
}

.page-centered .saved-foot .button {
    width: auto;
}

/* "Report a concern" (#55): the smallest box in the column, under Share. */
@media (max-width: 30rem) {
    .in-short dl {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .in-short dd {
        margin-bottom: var(--space-3);
    }
}

/* The newest History entry (#52) */
.latest {
    font-weight: var(--weight-semibold);
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}