/* Complaints and the dispute queue only (pages/complaints.html and pages/admin/disputes.html; 23 Sep 2026,
   CP-3 reference). Kept out of components.css like board.css, plans.css and admin-payouts.css. Everything
   scopes to main.complaints or main.adm-disputes. Tokens, .card, .pill, .table, .table-wrap, .field,
   .check, .chip-radio, .notice, .dialog and .btn come from styles.css and components.css; the admin table
   rules are admin/payouts.html's, so the admin lists read as one console.

   States (reference only, app.js block 38 writes them on <main>):
     complaints.html   data-type = complaint | dispute, data-state = form | sent
     disputes.html     data-kind = all | complaint | dispute (the filter chips); the open detail panel is
                       the one whose id is in the URL hash (:target), so a row opens with no script. */

/* ---------- Public page: states ---------- */
.complaints [data-type-view], .complaints [data-state-view] { display: none; }
.complaints[data-type="complaint"] [data-type-view="complaint"],
.complaints[data-type="dispute"]   [data-type-view="dispute"] { display: inline; }
.complaints[data-state="form"] [data-state-view="form"],
.complaints[data-state="sent"] [data-state-view="sent"] { display: block; }
.complaints[data-state="signedout"] [data-state-view="signedout"] { display: block; }  /* 6 Oct, OPEN-DECISIONS #69: the form behind sign-in */

.complaints__wrap { padding-top: 3rem; padding-bottom: 6rem; }
.complaints__grid { align-items: start; }

/* "I am": four short options, two by two where there is room, one column on a phone. */
.complaints__who { border: 0; padding: 0; margin: 0; min-width: 0; }
.complaints__who legend { padding: 0; }
.complaints__radios { display: grid; gap: 0.625rem 1.25rem; margin-top: 0.625rem; }
@media (min-width: 480px) { .complaints__radios { grid-template-columns: 1fr 1fr; } }
.complaints__radios .check { font-size: var(--text-body); align-items: center; }

.complaints__ref { max-width: 16rem; }
.complaints__ack { margin-top: 1.25rem; font-size: var(--text-body-sm); color: var(--grey-700); }
.complaints__ack + .field__error { margin-left: 1.625rem; }

/* Sent: one card, the thank-you page's width. */
.complaints__sent { max-width: 42rem; margin-inline: auto; }
.complaints__facts dd { color: var(--foreground); }
.complaints__facts .mono { letter-spacing: 0.02em; }

/* ---------- Admin queue ---------- */
.adm-disputes .disp-wrap { padding-top: 3rem; padding-bottom: 6rem; }
.adm-disputes .disp-summary { gap: 0.5rem; }
.adm-disputes .disp-filters { border: 0; padding: 0; margin: 2rem 0 0; min-width: 0; }
.adm-disputes .disp-filters .chip-radios { margin-top: 0; }
.adm-disputes .disp-filters .chip { font-variant-numeric: tabular-nums; }

.adm-disputes .table td { vertical-align: middle; }
.adm-disputes .table td .caption { display: block; margin-top: 0.125rem; color: var(--muted-foreground); }
.adm-disputes .table td:first-child, .adm-disputes .table th:first-child { min-width: 9.5rem; }
.adm-disputes .table td:nth-child(3), .adm-disputes .table td:nth-child(4) { min-width: 10rem; }
/* Eight columns: a slightly tighter cell than the shared table so the queue fits the 6xl container at 1440. */
.adm-disputes .table th, .adm-disputes .table td { padding-inline: 0.875rem; }
/* The clock: the verb, then the date on its own line, so the column stays narrow and the date stays whole. */
.adm-disputes .table td.disp-clock { min-width: 9.5rem; }
.adm-disputes .table td .disp-date { display: block; white-space: nowrap; color: var(--foreground); }
.adm-disputes .table td.disp-clock .caption { white-space: nowrap; }
.adm-disputes .table-wrap table { min-width: 62rem; }
.adm-disputes .table tbody tr { cursor: pointer; }
@media (hover: hover) { .adm-disputes .table tbody tr:hover { background: var(--accent); } }
.adm-disputes .table tbody tr[aria-current="true"] { background: var(--navy-50); }
.adm-disputes .table td .disp-ref { font-family: var(--font-mono); font-weight: 600; color: var(--primary); text-decoration: none; }
.adm-disputes .table td .disp-ref:hover { text-decoration: underline; text-underline-offset: 3px; }
.adm-disputes .table td .disp-roster { color: var(--coral-700); font-weight: 500; }

/* Filter: rows of the other type step aside (block 38 also closes an open panel of that type). */
.adm-disputes[data-kind="complaint"] tr[data-kind="dispute"],
.adm-disputes[data-kind="dispute"]   tr[data-kind="complaint"] { display: none; }

/* ---------- Detail panel ----------
   One per row, hidden until its id is the URL hash. A plain block under the queue, not a drawer: the
   admin reads two texts and a timeline and writes a note, which wants the page's full measure. */
.adm-disputes .disp-panel { display: none; margin-top: 2.5rem; scroll-margin-top: 5.5rem; }
.adm-disputes .disp-panel:target { display: block; animation: disp-in 220ms var(--ease-out); }
@keyframes disp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .adm-disputes .disp-panel:target { animation: none; } }

.adm-disputes .disp-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.adm-disputes .disp-panel__head h2 { font-family: var(--font-mono); font-size: var(--text-heading); font-weight: 600; letter-spacing: 0; margin-right: 0.25rem; }
.adm-disputes .disp-panel__close { margin-left: auto; font-size: var(--text-body-sm); }
.adm-disputes .disp-panel__grid { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 960px) { .adm-disputes .disp-panel__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem; } }
.adm-disputes .disp-panel .kv { font-size: var(--text-body-sm); }
.adm-disputes .disp-panel .kv dd { color: var(--foreground); }

.adm-disputes .disp-text { margin-top: 1.5rem; }
.adm-disputes .disp-text p { margin-top: 0.375rem; color: var(--foreground); line-height: 1.65; max-width: 68ch; }

/* Timeline: dates in a column, the event beside it. No coloured rules, no dots. */
.adm-disputes .disp-timeline { list-style: none; padding: 0; margin: 0.625rem 0 0; display: grid; gap: 0.5rem; font-size: var(--text-body-sm); }
.adm-disputes .disp-timeline li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; }
.adm-disputes .disp-timeline time { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.adm-disputes .disp-ruling { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--grey-100); }
.adm-disputes .disp-ruling fieldset { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.adm-disputes .disp-ruling legend { padding: 0; }
.adm-disputes .disp-outcomes { display: flex; flex-wrap: wrap; gap: 0.625rem 1.5rem; margin-top: 0.625rem; }
.adm-disputes .disp-outcomes .check { font-size: var(--text-body); align-items: center; }
.adm-disputes .disp-panel .notice { margin-top: 1rem; }
/* A ruled case: its ruling and consequence read only, then the note. */
.adm-disputes .disp-ruled { font-size: var(--text-body-sm); }
.adm-disputes .disp-ruled dd { color: var(--foreground); }
.adm-disputes .disp-text--note { margin-top: 1rem; }

/* The dialog's row line: the case the admin is ruling on, in the body register. */
.adm-disputes .dialog [data-ruling-row] { color: var(--foreground); font-weight: 600; }

/* Selection colour and the caret follow the palette on both pages (the parts nobody draws). */
.complaints ::selection, .adm-disputes ::selection { background: var(--navy-100); color: var(--navy-900); }
.complaints input, .complaints textarea, .adm-disputes textarea { caret-color: var(--primary); }