/* InReACL — base styles. No inline styles anywhere, so the CSP can stay strict. */

:root {
    --bg:        #f4f5f7;
    --surface:   #ffffff;
    --ink:       #1c2024;
    --ink-soft:  #5b6570;
    --line:      #d8dde3;
    --accent:    #1f4e79;
    --accent-in: #ffffff;
    --error-bg:  #fdecec;
    --error-ink: #8a1c1c;
    --note-bg:   #eef4fb;
    --note-ink:  #1f4e79;
    --ok-bg:     #ecf7ee;
    --ok-ink:    #1e6b2c;
    --radius:    6px;

    /* ---------------------------------------------------------------
     * Typography — one scale for the whole site.
     *
     * Before this existed the site ran two body fonts (Georgia on the
     * timeline and violations pages, system-ui everywhere else), Arial for
     * some tables, and four different h1 sizes including the browser
     * default on pages that never set one. Everything below is referenced
     * by token so a change lands everywhere at once.
     * ------------------------------------------------------------ */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-h1:    1.5rem;      /* 24px — one per page */
    --fs-h2:    1.125rem;    /* 18px — section headings */
    --fs-h3:    1rem;        /* 16px — sub-headings */
    --fs-body:  1rem;        /* 16px — prose */
    --fs-sm:    .875rem;     /* 14px — tables, form controls */
    --fs-xs:    .8125rem;    /* 13px — captions, hints, meta */
    --fs-2xs:   .6875rem;    /* 11px — badges, tags */

    --lh-heading: 1.25;
    --lh-body:    1.5;

    --fw-normal: 400;
    --fw-semi:   600;
    --fw-bold:   700;
}

* { box-sizing: border-box; }

/* Headings. Pages that set nothing previously fell back to the browser's
   2em h1, which is why Strategy and Exhibits looked unlike the boards. */
h1, h2, h3, h4 {
    font-family: var(--font-sans);
    line-height: var(--lh-heading);
    font-weight: var(--fw-bold);
}
h1 { font-size: var(--fs-h1); margin: .25rem 0 .5rem; }
h2 { font-size: var(--fs-h2); margin: 1.35rem 0 .45rem; }
h3 { font-size: var(--fs-h3); margin: 1rem 0 .35rem; font-weight: var(--fw-semi); }

/* Tabular content is one size everywhere; individual tables no longer pick
   their own. */
table { font-size: var(--fs-sm); }

/* Form controls inherit the page font rather than the UA's default. */
input, select, textarea, button { font-family: inherit; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* ---------- Auth pages ---------- */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.auth-title {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: .01em;
}

.auth-sub {
    margin: .25rem 0 1.5rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

.auth-foot {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: var(--fs-xs);
}

/* ---------- Forms ---------- */

label {
    display: block;
    margin: 1rem 0 .375rem;
    font-size: var(--fs-sm);
    font-weight: 600;
}

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: 1rem;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.hint {
    margin: .5rem 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-xs);
}

.btn-primary {
    display: inline-block;
    width: 100%;
    margin-top: 1.5rem;
    padding: .6875rem 1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-in);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:hover { filter: brightness(1.08); }

.btn-link {
    width: auto;
    text-align: center;
    text-decoration: none;
}

.btn-quiet {
    padding: .25rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-soft);
    font: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
}

.btn-quiet:hover {
    border-color: var(--line);
    color: var(--ink);
}

.inline-form { display: inline; }

/* ---------- Alerts ---------- */

.alert {
    margin: 0 0 1rem;
    padding: .75rem .875rem;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
}

.alert-error   { background: var(--error-bg); color: var(--error-ink); }
.alert-notice  { background: var(--note-bg);  color: var(--note-ink);  }
.alert-success { background: var(--ok-bg);    color: var(--ok-ink);    }

/* ---------- App chrome ---------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .75rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand { font-weight: 700; letter-spacing: .02em; }

.nav { display: flex; gap: 1rem; }

.nav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: var(--fs-sm);
}

.nav a:hover { color: var(--ink); }

.nav a[aria-current="page"] {
    color: var(--accent);
    font-weight: 600;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}

.who { color: var(--ink-soft); font-size: var(--fs-xs); }

.quiet-link {
    color: var(--ink-soft);
    font-size: var(--fs-xs);
    text-decoration: none;
}

.quiet-link:hover { color: var(--ink); }

/* ---------------------------------------------------------------------
 * Page width
 *
 * .page      prose and forms — capped, because a 3000px line of text is
 *            unreadable however much screen is available.
 * .page-wide tables, charts and documents — fills the content column, which
 *            the sidebar already narrows. These pages are data, not prose;
 *            capping them just manufactures dead space on a wide monitor.
 *
 * .page-wide previously lived in posttrial-timeline.css, so it only did
 * anything on the one page that loaded that sheet. ffcl.php, strategy.php and
 * travel-log.php all carried the class and silently got the narrow .page cap
 * instead. It belongs here, where every page can see it.
 * ------------------------------------------------------------------ */

.page { max-width: 78rem; margin: 0 auto; padding: 1.5rem 1.25rem; }

.page-wide {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-inline: clamp(1rem, 1.4vw, 2.25rem);
}

.placeholder {
    padding: 1.25rem;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:       #15181c;
        --surface:  #1e2227;
        --ink:      #e6e9ed;
        --ink-soft: #9aa4b0;
        --line:     #2f3641;
        --accent:   #5b9bd5;
        --accent-in:#0f1216;
        --error-bg: #3a1f1f; --error-ink: #f3b5b5;
        --note-bg:  #1c2c3d; --note-ink:  #a8cdf0;
        --ok-bg:    #1d3323; --ok-ink:    #a5dcb0;
    }
    input[type="email"],
    input[type="password"],
    input[type="text"] { background: #12151a; }
}

/* ---------- Search ---------- */

.search-form {
    display: flex;
    gap: .5rem;
    margin: 0 0 1.25rem;
    flex-wrap: wrap;
}

.search-form input[type="search"] {
    flex: 1 1 22rem;
    padding: .625rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-size: 1rem;
}

.search-form select {
    padding: .625rem .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}

.btn-inline {
    padding: .625rem 1.25rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-in);
    font-weight: 600;
    cursor: pointer;
}

.result-count { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0 0 1rem; }
.hint-inline  { font-style: italic; }

.hit {
    padding: .875rem 1rem;
    margin-bottom: .75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}

/* Transcript hits are visually distinct from filed documents: different
   accent, tinted background, badge and standing caveat. */
.hit-transcript {
    border-left-color: var(--warn-line);
    background: var(--warn-bg);
}

.hit-head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}

.hit-ex   { font-weight: 700; font-variant-numeric: tabular-nums; }
.hit-desc { color: var(--ink-soft); font-size: var(--fs-sm); flex: 1 1 12rem; }

.badge {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .125rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-doc        { background: var(--note-bg);  color: var(--note-ink); }
.badge-transcript { background: var(--warn-ink); color: var(--warn-bg);  }

.hit-loc { display: flex; gap: .75rem; font-size: var(--fs-xs); margin-bottom: .375rem; }

.loc-time    { font-family: var(--font-mono); font-weight: 600; color: var(--warn-ink); }
.loc-page    { color: var(--ink-soft); }
.loc-speaker { color: var(--ink-soft); font-weight: 600; }

.hit-snip { margin: 0; font-size: var(--fs-sm); line-height: 1.55; }
.hit-snip mark { background: #ffe9a8; color: inherit; padding: 0 .125rem; border-radius: 2px; }
.brk { color: var(--ink-soft); }

.hit-warn {
    margin: .5rem 0 0;
    font-size: var(--fs-2xs);
    color: var(--warn-ink);
    border-top: 1px dotted var(--warn-line);
    padding-top: .375rem;
}

.empty { color: var(--ink-soft); }

.pager { display: flex; gap: 1rem; align-items: center; margin-top: 1.25rem; font-size: var(--fs-sm); }
.pager a { color: var(--accent); text-decoration: none; }

:root {
    --warn-bg:   #fdf6e7;
    --warn-line: #d9a441;
    --warn-ink:  #8a5a00;
}

@media (prefers-color-scheme: dark) {
    :root {
        --warn-bg:   #2a2415;
        --warn-line: #a67c1f;
        --warn-ink:  #e8c470;
    }
    .hit-snip mark { background: #6b5410; color: #ffeec2; }
}

/* ---------- Data grid (exhibits) ---------- */

.table-wrap { overflow-x: auto; }

.grid {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: var(--fs-sm);
}

.grid th, .grid td {
    padding: .5rem .625rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.grid thead th {
    background: var(--note-bg);
    color: var(--note-ink);
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    position: sticky;
    top: 0;
}

.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: rgba(127, 127, 127, .06); }

.cell-ex      { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-desc    { min-width: 18rem; }
.cell-nodesc  { color: var(--ink-soft); font-style: italic; }
.cell-num     { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-file    { white-space: nowrap; }
.cell-muted   { color: var(--ink-soft); }
.cell-actions a { color: var(--accent); text-decoration: none; margin-right: .5rem; }
.cell-actions a:hover { text-decoration: underline; }

.ext {
    display: inline-block;
    padding: 0 .375rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    color: var(--ink-soft);
}

.badge-ok      { background: var(--ok-bg);   color: var(--ok-ink); }
.badge-pending { background: var(--note-bg); color: var(--ink-soft); }

.tag-missing {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--warn-ink);
    background: var(--warn-bg);
    border: 1px solid var(--warn-line);
    border-radius: 3px;
    padding: 0 .25rem;
    white-space: nowrap;
}

.tag-ts {
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--warn-ink);
}

/* ===========================================================================
   Exhibits table — dense, banded, bordered, with a sticky control region.
   Only the table body scrolls; filters and column headers stay put.
   ======================================================================== */

.app-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-shell .topbar { flex: 0 0 auto; }

.app-shell .page {
    max-width: none;             /* dense grid — fill the shell */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;              /* lets the child scroll instead of the page */
    padding-bottom: .75rem;
}

.app-shell .page > h1,
.app-shell .page > .result-count,
.app-shell .page > .search-form,
.app-shell .page > .hint,
.app-shell .page > .empty { flex: 0 0 auto; }

.app-shell .page > h1 { margin: .25rem 0 .5rem; font-size: var(--fs-h1); }

.app-shell .table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;             /* the only scrolling region */
    border: 1px solid var(--grid-line);
    border-radius: var(--radius);
    background: var(--surface);
}

/* --- the grid itself --- */

.grid {
    width: 100%;
    border-collapse: separate;  /* keeps sticky header borders from vanishing */
    border-spacing: 0;
    border: 0;
    border-radius: 0;
    font-size: var(--fs-xs);        /* denser than the 14px default */
    line-height: 1.35;
}

.grid th,
.grid td {
    padding: .3125rem .5rem;
    border-right: 1px solid var(--grid-line);
    border-bottom: 1px solid var(--grid-line);
    vertical-align: top;
}

.grid th:last-child,
.grid td:last-child { border-right: 0; }

.grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--grid-head-bg);
    color: var(--grid-head-ink);
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: 2px solid var(--grid-head-line);
    vertical-align: middle;
}

/* Zebra banding, with hover taking precedence over the band. */
.grid tbody tr:nth-child(even) { background: var(--grid-band); }
.grid tbody tr:hover           { background: var(--grid-hover); }
.grid tbody tr:last-child td   { border-bottom: 0; }

/* --- alignment: header classes mirror the cell classes exactly --- */

.ta-l { text-align: left; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }

/* --- column sizing --- */

.col-ex    { width: 5.5rem; }
.col-party { width: 6.5rem; }
.col-ver   { width: 6rem; }
.col-idx   { width: 5rem; }
.col-file  { width: 7.5rem; }
.col-act   { width: 6.5rem; }

.cell-ex    { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-party { white-space: nowrap; color: var(--ink-soft); }
.cell-desc  { min-width: 20rem; }
.cell-num   { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-file  { white-space: nowrap; }
.cell-actions { white-space: nowrap; }
.cell-actions a { margin-left: .5rem; margin-right: 0; }

.grid .badge { display: inline-block; }

:root {
    --grid-line:      #c9d1da;
    --grid-band:      #f7f9fb;
    --grid-hover:     #e8eef5;
    --grid-head-bg:   #e7edf4;
    --grid-head-ink:  #24405c;
    --grid-head-line: #9fb3c8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grid-line:      #39424f;
        --grid-band:      #21262d;
        --grid-hover:     #2c343e;
        --grid-head-bg:   #263140;
        --grid-head-ink:  #cddcec;
        --grid-head-line: #4a5a6e;
    }
}

/* Search hits link straight to the page (or the moment) they were found. */
a.hit-ex { color: var(--accent); text-decoration: none; }
a.hit-ex:hover { text-decoration: underline; }

.loc-jump {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.loc-jump:hover { text-decoration: underline; }
.hit-loc { align-items: center; }

/* ===========================================================================
   Sticky chrome
   The nav bar pins to the top of every page. Table headers then pin directly
   beneath it — never underneath it — by offsetting with --topbar-h.
   ======================================================================== */

:root { --topbar-h: 53px; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;                     /* above any sticky table header */
    min-height: var(--topbar-h);
    box-sizing: border-box;
}

/* The 53px above is only a pre-paint fallback. assets/js/sticky-offsets.js
   measures the real bar and overwrites --topbar-h (and --filterbar-h) on load
   and on resize, so wrapping at any width stays correct without guessing. */

/* exhibits.php uses a full-height flex shell whose own container scrolls;
   there the topbar is already fixed in place and must not also be sticky. */
.app-shell .topbar { position: static; }

/* ---------- Presented at trial vs merely available ----------------------
   Trial concluded with a small subset of the exhibit list actually reaching
   a witness. Marked exhibits were presented; unmarked ones were available.
   The trailing "?" means the standing is reported but not yet checked
   against the reporter's record. */

.badge-trial {
    background: #2b2233;
    color: #ffffff;
}

.badge-trial-pending {
    background: #efe7f7;
    color: #4a3a6b;
    box-shadow: inset 0 0 0 1px #c9bade;
}

.badge-q {
    font-weight: 700;
    padding-left: .2em;
    opacity: .8;
}

.col-trial, .cell-trial { text-align: center; white-space: nowrap; }

.trial-banner {
    background: #faf9ff;
    border: 1px solid #d6cfe8;
    border-left: 4px solid #4a3a6b;
    border-radius: var(--radius);
    padding: 12px 16px;
    margin: 0 0 1rem;
}

.trial-banner-title {
    margin: 0 0 .5rem;
    font-size: 1rem;
    color: #4a3a6b;
}

.trial-banner p { margin: 0 0 .5rem; font-size: var(--fs-sm); }
.trial-banner p:last-child { margin-bottom: 0; }

.trial-banner-warn {
    color: #8a1c1c;
    background: #fdecec;
    border-radius: 4px;
    padding: .5rem .625rem;
}

/* ---------- Secrets shown once: passwords, API keys, temporary links ---------- */

/* Used by users.php and pass.php. These boxes carry a value that exists on
   screen and nowhere else, so they are loud on purpose. */

.pw-box {
    background: var(--ok-bg);
    border: 1px solid #bcd9c3;
    border-left: 4px solid var(--ok-ink);
    border-radius: var(--radius);
    padding: 1rem 1.125rem;
    margin: 0 0 1.5rem;
}

.pw-title {
    margin: 0 0 .375rem;
    font-size: 1rem;
    color: var(--ok-ink);
}

.pw-for {
    margin: 0 0 .625rem;
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}

/* The value itself. Monospace and breakable so a long URL can be selected
   whole and read back over the phone without ambiguity. */
.pw-value {
    margin: 0 0 .75rem;
    padding: .625rem .75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.45;
    word-break: break-all;
    user-select: all;
}

.pw-note {
    margin: .75rem 0 0;
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--ink-soft);
}

.pw-note strong { color: var(--ink); }

.pw-await { color: var(--error-ink); font-size: var(--fs-xs); }
.pw-set   { color: var(--ink-soft); font-size: var(--fs-xs); }

/* ---------- Temporary access (pass.php) ---------- */

/* Wider than the sign-in card: this one has to show full URLs. */
.auth-card-wide { max-width: 46rem; }

.label-optional { font-weight: 400; color: var(--ink-soft); }

.check-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 1rem 0 1.25rem;
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.check-row input { margin-top: .2rem; flex: none; }

.pass-links {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.pass-links li {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .5rem .75rem;
    border-top: 1px solid var(--line);
}

.pass-links li:first-child { border-top: 0; }

.pass-link-name {
    flex: none;
    width: 6rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-soft);
}

.pass-link-url {
    font-size: var(--fs-xs);
    word-break: break-all;
    user-select: all;
}

/* ---------- Admin tables ---------- */

.users-grid { width: 100%; }

/* Sortable headings. Scoped to this table rather than added to the global
   .sortable rules in timeline.css, which this page does not load. */
.users-grid th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.users-grid th.sortable:hover { background: var(--note-bg); }
.users-grid th.sortable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;      /* inset: an outset ring on a th is clipped */
}
.users-grid .sort-ind {
    font-size: .8em;
    opacity: .9;
    margin-left: .15rem;
}

.users-sort-hint {
    margin: 0 0 .5rem;
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}
.users-sort-hint button { margin-left: .5rem; }

.badge-admin {
    background: var(--note-bg);
    color: var(--note-ink);
    box-shadow: inset 0 0 0 1px #bcd0e6;
}

.revoke-all-form { margin: 0 0 1rem; }

/* Destructive and deliberately not the same colour as anything routine. */
.btn-danger {
    background: var(--error-ink);
    border-color: var(--error-ink);
    color: #fff;
}

.btn-danger:hover { background: #6d1616; border-color: #6d1616; }

/* ---------- Cross-reference lines (FOAnalysis v05) ----------
   Shared by grounds.php, final-order-analysis.php, and ffcl.php so the
   three pages' traceability notes look identical wherever they appear. */
.cross-reference {
    margin: .5rem 0 0;
    padding: .5rem .75rem;
    background: var(--note-bg, #f4f7fb);
    border-left: 3px solid var(--accent);
    font-size: var(--fs-xs);
    line-height: 1.5;
    overflow-wrap: break-word;
}

.cross-reference strong {
    color: var(--accent);
    margin-right: .35em;
}

.cross-reference a {
    word-break: break-word;
}