/* Design tokens */
:root {
    --color-accent: #007AFF;
    --color-background: #FFFFFF;
    /* Secondary-surface fill — callouts, chips, table headers, and the
       hover-state lift for checkbox cards and × icons. Sits above input
       fill so wells and hovered surfaces read as distinct from form
       fields. */
    --color-background-secondary: #F0F0F0;
    --color-border: rgba(0, 0, 0, 0.2);
    --color-text-primary: #000000;
    --color-link: var(--color-accent);
    /* Form-input fill — subtle interactive resting state. */
    --color-input-bg: #F9F9F9;
    /* Active-surface fill — secondary buttons (file picker, "+ Add URL")
       and the dropzone's dragover state. Translucent accent tint, paired
       with accent-color bold text on buttons, so the moments when a
       surface is "click-ready" or "drop-ready" read clearly without
       competing with the gray hierarchy. */
    --color-button-secondary-bg: rgba(0, 122, 255, 0.1);
    /* Corner radii — two-tier scale. The smaller radius reads as subtle
       rounding on input fields and small icon buttons; the larger reads as
       deliberate rounding on buttons and button-like containers. */
    --radius-sm: 8px;
    --radius-md: 12px;
    /* Error tones — used by transient-error UI (rejected file chips) */
    --color-error: #b91c1c;
    --color-error-bg: rgba(185, 28, 28, 0.12);
    --color-success: #166534;
    --color-success-bg: rgba(22, 101, 52, 0.12);
    --font-family-heading: system-ui;
    --font-family-body: system-ui;
    color-scheme: light dark;
    accent-color: var(--color-accent);
}
@media (prefers-color-scheme: dark) {
    :root {
        --color-accent: #0A84FF;
        --color-background: #000000;
        --color-background-secondary: #2E2E2E;
        --color-border: rgba(255, 255, 255, 0.12);
        --color-text-primary: #FFFFFF;
        --color-input-bg: #1F1F1F;
        --color-button-secondary-bg: rgba(10, 132, 255, 0.18);
        --color-error: #f87171;
        --color-error-bg: rgba(248, 113, 113, 0.18);
        --color-success: #86efac;
        --color-success-bg: rgba(134, 239, 172, 0.18);
    }
}

/* Base elements */
body {
    font-family: var(--font-family-body);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.5; /* 24px */
    text-rendering: optimizeLegibility;
}
@media (prefers-color-scheme: dark) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}
h1, h2, h3,
h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 600;
}
h1 {
    font-size: 2.75rem; /* 44px */
    line-height: 1.1818; /* 52px */
}
/* h2s act as section dividers (no <section> elements in plain markdown) */
h2 {
    font-size: 2.125rem; /* 34px */
    line-height: 1.1765; /* 40px */
    margin-top: 4rem;
}
h3 {
    font-size: 1.375rem; /* 22px */
    line-height: 1.2727; /* 28px */
}
h4, h5, h6 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.5; /* 24px */
    margin-top: 1rem;
}
a {
    color: var(--color-link);
    text-decoration: underline;
}
a:focus,
a:hover {
    opacity: 0.8;
}
li {
    margin: 1rem 0;
}
/* Postal/contact blocks — semantic <address> element keeps default italic
   (long-standing legal-doc convention) but needs explicit vertical
   rhythm since the browser default is margin:0. */
address {
    margin: 1em 0;
}
hr {
    margin: 4rem 0;
    border: 0;
    height: 1px;
    background: var(--color-border);
}
table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: collapse;
}
th,
td {
    border: 1px solid var(--color-border);
    padding: 0.75rem;
    vertical-align: top;
    text-align: left;
}
th {
    background-color: var(--color-background-secondary);
}
caption {
    caption-side: top;
    text-align: left;
    font-style: italic;
    padding-bottom: 0.75rem;
}

/* Layout */
.container {
    margin: 0 auto;
    max-width: 37.5rem; /* 600px */
    padding: 1.5rem 8px; /* 24px 16px */
}
.container > h1:first-child {
    margin-bottom: 0.25rem;
}

/* Policy components */

/* Table of contents */
.policy-toc ul {
    list-style-type: none;
    margin: 2rem 0;
    padding: 0;
}

/* Dense data tables (archive policy, U.S. State table) */
.policy-table {
    font-size: smaller;
}
.policy-table ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.policy-table li:first-child {
    margin-top: 0;
}
.policy-table a {
    overflow-wrap: break-word;
}

/* Version history footer */
.policy-version-list {
    list-style-type: none;
    padding: 0;
}

/* ============================================================================
 * FORM STYLES
 * ----------------------------------------------------------------------------
 * Used by the Report Content page. Token-driven for automatic dark-mode
 * support; checkboxes and radios stay at OS-default (tinted via the global
 * accent-color set on :root).
 * ============================================================================ */

/* --- Resets ---------------------------------------------------------- */

input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Vertical rhythm above top-level form sections. We put margin-top on the
   fieldset rather than on its <legend> because Chrome and Safari don't
   reliably honor margin-top on <legend> (it's treated as part of the
   fieldset's border chrome rather than a flow element). Firefox does
   honor legend margins, which is why this used to look right there but
   cramped elsewhere. */
form > fieldset {
    margin-top: 4rem;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    font-family: var(--font-family-heading);
    font-size: 2.125rem;     /* matches h2 */
    line-height: 1.1765;
    font-weight: 600;
}


/* Inset well for callout content (e.g., the conditional US-DMCA notice +
   agent address block, the no-JS banner). Visually distinct from form
   prose so users register it as supplementary information rather than
   instructions for the next field. Generous corner radius and the shared
   `--color-background-secondary` tone group it with chips/hover-states
   on the form's secondary-surface tier; shape (large block vs. inline
   row) distinguishes its role from chips. */
.callout {
    margin: 2rem 0;
    padding: 1.5rem 1.25rem;
    background-color: var(--color-background-secondary);
    border-radius: 1rem;
}

.callout > :first-child {
    margin-top: 0;
}

.callout > :last-child {
    margin-bottom: 0;
}

/* Submission status blocks — hidden until JS selects the relevant state.
   The success block is placed before the form so the page can scroll to it
   after submission, while error blocks reuse the same alert structure. */
.form-status-region {
    margin: 2rem 0;
}

.form-alert {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

.form-alert[hidden] {
    display: none;
}

.form-alert > :first-child {
    margin-top: 0;
}

.form-alert > :last-child {
    margin-bottom: 0;
}

.form-alert-success {
    color: var(--color-success);
    background-color: var(--color-success-bg);
    border-color: color-mix(in srgb, var(--color-success), transparent 65%);
}

.form-alert-error {
    color: var(--color-error);
    background-color: var(--color-error-bg);
    border-color: color-mix(in srgb, var(--color-error), transparent 65%);
}

.form-alert-note,
.form-help {
    font-size: 0.875rem;
}

.form-help {
    opacity: 0.6;
}

.form-report-id {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Visually-hidden utility (also applied to the file input inside the
   dropzone, where the input must stay focusable + submittable but invisible
   so the custom label-as-button replaces it visually). */
.visually-hidden,
.dropzone > input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Sectioning and rhythm ------------------------------------------- */

/* Section-break wrappers — nested fieldsets and the form-actions cluster
   share the same vertical rhythm. flow-root makes them BFCs so their
   margins reliably collapse with adjacent siblings (consistent 2rem gaps
   regardless of what surrounds them). Nested fieldsets are detected
   structurally (fieldset inside fieldset) — no marker class needed. */
fieldset fieldset,
.form-actions {
    display: flow-root;
    margin: 2rem 0;
}

/* Reset the last child's margin so the visible gap matches the wrapper's
   own margin (avoids stacking with phantom padding — especially the <p>
   marked sometimes wraps trailing buttons in). */
fieldset fieldset > :last-child,
.form-actions > :last-child {
    margin-bottom: 0;
}

/* Nested fieldset legend renders like an h3, sitting below the parent's
   h2-sized legend. The wrapper's own margin already provides the break. */
fieldset fieldset > legend {
    font-size: 1.375rem;     /* matches h3 */
    line-height: 1.2727;
}

/* form-actions internal rhythm — zero out children's intrinsic margins
   (default <p>, button inline-block boundaries that don't margin-collapse
   with siblings) and let the lobotomized owl own spacing exclusively. */
.form-actions > * {
    margin: 0;
}

.form-actions > * + * {
    margin-top: 1.25rem;
}

/* Field row: vertical rhythm between adjacent fields and label-on-top-of-
   input layout. A field directly after a sub-section gets the section-
   break margin so trailing ungrouped fields read as transitioning out. */
.field {
    margin: 1.25rem 0;
}

fieldset + .field {
    margin-top: 2rem;
}

.field > label {
    display: block;
    margin-bottom: 0.5rem;
}

/* Secondary metadata text — used for optional-field markers, helper text
   (file/url limits), and the dropzone status line. Smaller, semibold, and
   dimmed so it reads as a status hint without competing with primary
   label text. Inherits color rather than using accent (which would read
   as a link). */
.field-meta,
.file-picker-status {
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.6;
}

/* --- Input fields (text, select, textarea) --------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem;
    margin-top: 0.25rem;
    background-color: var(--color-input-bg);
    color: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

textarea {
    resize: vertical;
    min-height: 5rem;
    field-sizing: content;
}

/* Selects — strip native chrome so padding/height match text inputs and
   replace the dropdown affordance with a custom SVG chevron. */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem auto;
    padding-right: 2.25rem;
}

@media (prefers-color-scheme: dark) {
    select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    }
}

/* --- Checkbox cards -------------------------------------------------- */

/* Wrapping label is styled like a bordered input field so the whole row
   reads as tappable. Flex keeps the checkbox aligned with the first line
   of wrapping text. Applied to .field elements containing a single
   checkbox input wrapped by its label. */
.field-checkbox > label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem;
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.field-checkbox > label:hover {
    background-color: var(--color-background-secondary);
}

.field-checkbox input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .field-checkbox > label {
        transition: none;
    }
}

/* --- Buttons --------------------------------------------------------- */

/* Primary submit — accent fill, larger label so it reads as the form's
   final action. White text is hard-coded for fixed contrast in either
   theme. */
button[type="submit"] {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    background-color: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

button[type="submit"]:hover {
    opacity: 0.85;
}

.is-submitting button[type="submit"] {
    display: none;
}

.form-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.form-loading[hidden] {
    display: none;
}

.form-spinner {
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: form-spin 0.8s linear infinite;
}

@keyframes form-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-spinner {
        animation: none;
        border-right-color: currentColor;
    }
}

/* Secondary buttons — file picker and "+ Add URL". Translucent accent fill
   + accent-color text so they read as "interactive" against the gray
   surfaces in both modes. Bold text qualifies as WCAG "large text" —
   relaxes the contrast requirement from 4.5:1 to 3:1, which the
   translucent-accent + accent-text pairing meets in both modes. (Also
   matches iOS's bold-on-tint convention.) */
.file-picker-button,
.field-add {
    padding: 0.5rem 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-accent);
    background-color: var(--color-button-secondary-bg);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.file-picker-button:hover,
.field-add:hover {
    opacity: 0.85;
}

.field-add {
    margin-top: 0.5rem;
}

.field-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon × — single size (32×32) used in both URL items and file chips.
   Comfortably above WCAG 2.2 AA (24×24) without dominating its row. */
.field-remove {
    align-self: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.6;
}

.field-remove:hover,
.field-remove:focus-visible {
    opacity: 1;
}

.field-remove:hover {
    background-color: var(--color-background-secondary);
}

/* --- Focus rings ----------------------------------------------------- */

/* Inputs and the textarea/select get a flush ring (offset 0) — the outline
   sits over the existing border. */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-accent);
}

/* Buttons get an offset ring so it reads as a halo around the filled body.
   Includes the dropzone label, which receives focus passed through from
   the visually-hidden file input via adjacent-sibling selector. */
button[type="submit"]:focus-visible,
.file-picker-button:focus-visible,
.field-add:focus-visible,
.field-remove:focus-visible,
.dropzone > input[type="file"]:focus-visible + .file-picker-button {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* --- File-picker dropzone (JS-only enhancement) ---------------------- */

/* Always-on dashed border so the area reads as a drop target at rest;
   border + background brighten on dragover. Flex with wrap keeps the hint
   phrase intact when wrapping rather than letting individual words flow. */
.dropzone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 1rem;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, background-color 0.15s;
}

.dropzone.is-dragover {
    border-color: var(--color-accent);
    background-color: var(--color-button-secondary-bg);
}

@media (prefers-reduced-motion: reduce) {
    .dropzone {
        transition: none;
    }
}


/* --- File chips (JS-only enhancement) -------------------------------- */

/* Rendered below the dropzone after files are selected. The [hidden]
   override is needed because the author `display: flex` would otherwise
   outrank the browser's [hidden] default. `container-type: inline-size`
   anchors the container query below — at very narrow chip widths the
   file size hides so the filename gets layout priority. */
.file-chips {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    container-type: inline-size;
}

.file-chips[hidden] {
    display: none;
}

/* On very narrow chip rows, the size column starts to crowd the filename
   to nothing useful. Hide size so the name keeps every available pixel.
   240px threshold is below typical mobile (320px+) but covers iframe-
   embed and split-view edge cases. */
@container (max-width: 240px) {
    .file-chip-size {
        display: none;
    }
}

.file-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;     /* overrides the global `li { margin: 1rem 0 }` */
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    background-color: var(--color-background-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
}

.file-chip-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-chip-size {
    font-size: 0.8125rem;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Transient error message for rejected files — matches chip height + shape
   so adjacent error and chips line up. Red-tinted, auto-dismissed on the
   next user action (add or remove). One summary message regardless of how
   many files were rejected. */
.file-error {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    min-height: 2.5rem;     /* matches chip height (× button drives 32px + 8px padding) */
    padding: 0 0.75rem;
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
}

.file-error[hidden] {
    display: none;
}

/* --- URL list (JS-only enhancement) ---------------------------------- */

/* Items with a remove button: grid pairs the input and × side by side so
   the button vertically centers on the input row. Label spans both
   columns. */
[data-url-item]:has(.field-remove) {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

[data-url-item]:has(.field-remove) > label {
    grid-column: 1 / -1;
}

[data-url-item]:has(.field-remove) > input {
    margin-top: 0;
}