/* Event Setup (/overseer/settings) — Organic layout (SURF-4f, slice 2).
 *
 * Setup, reports, and the guarded Event Close flow. Same fixed shell as
 * every other Organic Role Workspace.
 *
 * Loads after organic-system.css and gate.css for overseer-settings.html.
 *
 * --space-5 and --space-7 do not exist.
 */

[hidden] {
  display: none !important;
}

:root {
  --orange-text: #c2410c;
  --v2-focus-ring: 3px solid var(--orange-text);
  --v2-focus-offset: 3px;
}

.settings-page
  :is(input, select, textarea, button, a[href], summary):focus-visible {
  outline: var(--v2-focus-ring);
  outline-offset: var(--v2-focus-offset);
}

body.settings-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow: hidden;
}

.settings-page .atmosphere {
  position: fixed;
  z-index: 0;
  top: -170px;
  right: -130px;
  width: 440px;
  height: 440px;
  border-radius: 52% 48% 42% 58%;
  background: radial-gradient(
    circle at 40% 35%,
    var(--color-accent-2-300),
    var(--color-accent-2-200) 55%,
    transparent 75%
  );
  filter: blur(16px);
  opacity: 0.5;
  pointer-events: none;
}

body.settings-page > header,
body.settings-page > main {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */

body.settings-page > header {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-3);
}

.settings-page .brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  color: var(--color-text);
  text-decoration: none;
}

.settings-page .role-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.settings-page .role-nav .role {
  font-size: 12px;
  margin-right: var(--space-2);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* .role-nav-link itself now lives in organic-system.css, composed
 * unqualified (SURF-4f standards remediation) — identical here to the
 * other three surfaces, so one shared definition replaces four copies. */

/* `Log out` composes `.logout-link` from organic-system.css — the artboard's
 * own treatment, Lucide mark included — so the surface-local `.text-button`
 * delta that used to re-derive its metrics here is gone with it. */

/* ------------------------------------------------------------------ *
 * Route state, connectivity, status, intro
 * ------------------------------------------------------------------ */

.settings-page main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.intro {
  flex: none;
  padding: 0 var(--space-6) var(--space-3);
}

.intro .eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-700);
}

.intro h1 {
  margin: var(--space-1) 0 var(--space-2);
  font-size: 28px;
}

.intro h1 em {
  font-style: normal;
  color: var(--color-accent);
}

.intro p:not(.eyebrow) {
  margin: 0;
  max-width: 70ch;
  font-size: 13.5px;
  color: color-mix(
    in srgb,
    var(--color-text) 55%,
    transparent
  ); /* .text-muted */
}

.outbound-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-700);
}

.settings-route-state {
  flex: none;
  margin: 0 var(--space-6) var(--space-3);
  padding: var(--space-4);
  border-radius: calc(var(--radius-lg) * 1.15); /* the .card/.dialog radius */
  background: var(--color-surface);
  font-size: 13.5px;
  line-height: 1.5;
}

.settings-route-state .eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-700);
}

.settings-route-state h2 {
  margin: var(--space-1) 0 var(--space-2);
  font-size: 27px;
}

.connectivity-status {
  flex: none;
  margin: 0 var(--space-6) var(--space-3) !important;
}

.settings-page .status {
  flex: none;
  margin: 0 var(--space-6);
  font-size: 13px;
  color: var(--color-accent-700);
}

.settings-page .status:empty {
  margin: 0;
  visibility: hidden;
}

.hint {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ------------------------------------------------------------------ *
 * Closed Event history disclosure - sits between the gate and the
 * live workspace, so it stays reachable while a Role Session gate is
 * up too.
 * ------------------------------------------------------------------ */

.closed-event-history {
  flex: none;
  margin: 0 var(--space-6) var(--space-3);
}

.closed-event-history > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-radius: 24px;
  background: var(--color-surface);
  cursor: pointer;
  list-style: none;
}

.closed-event-history > summary::-webkit-details-marker {
  display: none;
}

.closed-event-history > summary small {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 12px;
}

.closed-history-panel {
  margin-top: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-radius: 24px;
  background: var(--color-surface);
}

.closed-history-panel h2 {
  margin: 0 0 var(--space-2);
  font-size: 19px;
}

#closed-history-discovery-form,
#closed-history-authentication-form {
  margin-top: var(--space-3);
}

#closed-history-discovery-form label,
#closed-history-authentication-form label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

#closed-history-discovery-form input,
#closed-history-authentication-form input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 5px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-bg);
}

#closed-history-discovery-form button,
#closed-history-authentication-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#closed-history-authentication-form button.primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.closed-history-result:not(:empty) {
  margin-top: var(--space-2);
  font-size: 13px;
}

.closed-history-choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * The workspace: scrolls inside the fixed shell.
 * ------------------------------------------------------------------ */

.overseer-settings {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) var(--space-6) var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* `1fr` is `minmax(auto, 1fr)`: without this, the column's automatic
 * minimum is the WIDEST child's min-content, so one module with a long
 * run of text (found: #event-close-entry's review sentence — long, not
 * unbreakable; it wraps, but is still wide enough to widen the column
 * before it gets the chance) silently widened the whole shared column —
 * and every sibling module with it — past the 200%-zoom viewport, the
 * same defect min-width:0 fixes for a flex item, one level up in Grid. */
.overseer-settings > * {
  min-width: 0;
}

/* The guard above only reaches `.overseer-settings`'s DIRECT children, and the
 * same automatic minimum reappears at every nested grid and flex container
 * under them: an item's `min-width: auto` resolves to its min-content, which
 * holds its own track open however narrow the workspace gets. At 200% zoom the
 * workspace had ~284px of content box while `.reconciliation-details` was laid
 * out 421px wide, `.settings-state` sat 141px past the edge, and
 * `.overseer-settings`'s `overflow-x: hidden` clipped both instead of
 * scrolling them — so the Reconciliation module was simply unreachable.
 *
 * This is deliberately one blanket rule rather than a sixth enumerated
 * selector. Fixing it per-container is what this file has already done five
 * times (see the `min-width: 0` at the credential rows, the report links, and
 * the guard above, one of which names 200% zoom explicitly), and each pass
 * fixed the container that happened to be measured while leaving every
 * sibling to be found later. Chasing them individually took three iterations
 * here alone — `.reconciliation-grid`, then `.module-heading`, then
 * `summary` — which is the shape of a rule that wants to be general.
 *
 * Safe to state this broadly because it was checked rather than assumed:
 * neither this file nor `organic-system.css` nor `gate.css` — the three
 * stylesheets `overseer-settings.html` loads, and it is the ONLY document
 * that loads this one — declares a single non-zero `min-width`. Target sizes
 * here are expressed as `min-height: 44px`, which this does not touch. And it
 * only bites under constraint: at widths where content already fits, an
 * item's natural size is unchanged. */
.overseer-settings * {
  min-width: 0;
}

.settings-offline .credential-list,
.settings-offline .board-list,
.settings-offline .report-list,
.settings-offline .correction-list,
.settings-offline .reconciliation-grid,
.settings-offline .event-close-flow {
  visibility: hidden;
}

@media (min-width: 900px) {
  .overseer-settings {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .reconciliation-module,
  .event-close-flow {
    grid-column: 1 / -1;
  }
}

.panel.settings-module {
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-radius: calc(var(--radius-lg) * 1.15); /* the .card/.dialog radius */
  background: var(--color-surface);
}

.settings-module h2 {
  margin: 0;
  font-size: 21px;
}

.module-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.settings-state {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-neutral-200);
  font-size: 11px;
}

/* — credentials — */

.credential-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------------ *
 * Credential rotation — `Event Setup.dc.html:194-208`.
 *
 * The dialog that replaced the per-row disclosure. It takes the same shape as
 * `.board-picker` above, at the artboard's own 560px, because they are the
 * same device on the same surface.
 * ------------------------------------------------------------------ */

.credential-dialog {
  width: min(560px, 100%);
  margin: auto;
  padding: var(--space-6);
  border: none;
  border-radius: calc(var(--radius-lg) * 1.15); /* the .card/.dialog radius */
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.credential-dialog::backdrop {
  background: color-mix(in srgb, var(--color-text) 34%, transparent);
}

.credential-dialog h2 {
  margin: 0;
  font-size: 23px;
}

/* The half of rule 21 that says what the rotation ENDS. It is repeated from
   the row deliberately: the row is behind the backdrop by the time this is
   read, and this is the moment the operator is deciding. */
.credential-rotate-ends {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-accent-800);
}

/* And the half that says what it leaves alone. */
.credential-dialog .hint {
  margin: var(--space-2) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
}

/* Explicit, because `.field` carries no layout of its own on this surface: the
   label and the input would otherwise be inline neighbours, and the label sat
   hard against the paragraph above it. */
.credential-dialog .field {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: 13px;
  font-weight: 600;
}

.credential-dialog .input {
  min-height: 52px;
}

.credential-rotate-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.credential-rotate-actions .btn {
  min-height: 48px;
}

/* ---- The row the dialog opens from (12a) ---- */

/* Wraps, and the text column carries the basis that makes it wrap. The action
   is `Rotate Registration Desk passphrase` — long, and `flex: none` — so on a
   390px phone it squeezed the consequence beside it into a column a few
   characters wide and the module ran to three times its budget. */
.credential-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 24px;
  background: var(--color-bg);
}

.credential-summary-text {
  flex: 1 1 220px;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.credential-role {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
}

.credential-rotated {
  font-size: 12px;
}

.credential-ends {
  font-size: 12px;
  color: var(--color-accent-700);
}

.credential-row .credential-action {
  flex: none;
  min-height: 44px;
}

.credential-passphrase {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-surface);
}

.rotate-credential {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* — Ready Board assignment — */

.board-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Named board groups follow artboard 12a. The name also opens its display. */
.board-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: 24px;
  background: var(--color-bg);
  min-inline-size: 0;
}

.board-legend {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  grid-column: 1;
  padding: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
}

.stall-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  cursor: pointer;
}

/*
 * `Event Setup.dc.html` draws a board's stalls as solid tags and gives the row
 * exactly one control: a dashed `Add a stall` pill, shown while the board has
 * room. The chips are output, not controls — the candidates live in the picker
 * the pill opens (`#board-stall-picker`).
 */
.board-stalls {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

/* The chip itself is the system's `.tag.tag-accent-2`, untouched — the
 * artboard draws it with no per-surface override. */

/*
 * The artboard draws this pill 32px tall. It is 44px here, and that is the one
 * measurement on the row taken from the repo rather than from the drawing:
 * `undersizedControls` in the browser suite fails any visible, enabled control
 * whose box is under 44px, and it runs against this surface. The artboard's
 * other measurements — the dash, the accent-300 border, the 999px radius, the
 * 12px inline padding, 12.5px type in `--color-accent-700` — are kept, and the
 * height lines the pill up with `.board-link` beneath it, which was already 44.
 */
.board-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px dashed var(--color-accent-300);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-700);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.board-add:hover:not(:disabled) {
  background: var(--color-accent-100);
}

.board-add:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Names the board the pill belongs to, for a screen reader and for voice
 * control, without repeating it beside three identical visible labels. */
.board-add-context,
.board-help {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The count sits beside the heading, flush right as 12a draws it, quiet, and
 * says why a fourth stall is refused before anybody tries to add one. */
.board-count {
  grid-column: 2;
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* — the Add a stall picker — */

.board-picker {
  width: min(440px, 100%);
  margin: auto;
  padding: var(--space-6);
  border: none;
  border-radius: calc(var(--radius-lg) * 1.15); /* the .card/.dialog radius */
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

.board-picker::backdrop {
  background: color-mix(in srgb, var(--color-text) 34%, transparent);
}

.board-picker-title {
  margin: 0;
  font-size: 21px;
}

.board-picker .hint {
  margin-top: var(--space-2);
}

.board-picker-choices {
  display: grid;
  gap: 2px;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.board-picker-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: 18px;
  background: var(--color-bg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.board-picker-choice:hover:not(:disabled) {
  background: var(--color-accent-100);
}

.board-picker-choice:disabled {
  opacity: 0.45;
  cursor: default;
}

.board-picker-stall {
  font-size: 13.5px;
}

.board-picker-where {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.board-picker-empty {
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.board-picker-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

.board-picker-actions button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-700);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.board-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
  padding: 0;
  margin-block: -12px;
  line-height: 20px;
  color: inherit;
  text-decoration: none;
}

.board-link:hover {
  text-decoration: underline;
}

.boards-module .form-actions button {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border: 1px solid transparent;
}

.form-actions {
  margin-top: var(--space-4);
}

.form-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-6);
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-bg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* — reports — */

.report-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.report-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--color-accent-200);
  border-radius: 999px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 13px;
}

/* Tinted against the pill's own ink, as the artboard draws it. */
.report-icon {
  flex: none;
  color: var(--color-accent-700);
}

/* — correction history — */

.correction-list {
  display: grid;
  gap: 2px;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.correction-row {
  padding: var(--space-2) var(--space-3);
  border-radius: 18px;
  background: var(--color-bg);
}

.correction-row.empty {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 13px;
}

.correction-summary {
  margin: 0;
  font-size: 13.5px;
}

.correction-reason {
  margin: 0;
}

/* — reconciliation — */

.reconciliation-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 700px) {
  .reconciliation-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.reconciliation-details {
  padding: var(--space-3) var(--space-4);
  border-radius: 24px;
  background: var(--color-bg);
}

.reconciliation-details > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.reconciliation-details > summary::-webkit-details-marker {
  display: none;
}

.reconciliation-details h3 {
  margin: 0;
  font-size: 15.5px;
}

.settings-reconciliation {
  display: grid;
  gap: 4px;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-size: 13px;
}

.settings-reconciliation dt {
  font-weight: 600;
}

.settings-reconciliation dd {
  margin: 0 0 6px;
}

.tender-review-fields {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.reconciliation-details label:not(.reconciliation-reviewed) {
  display: block;
  margin-top: var(--space-2);
  font-size: 12px;
}

.reconciliation-details input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-surface);
}

.reconciliation-reviewed {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-3);
  font-size: 13px;
  cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Event Close - visually guarded (#32).
 * ------------------------------------------------------------------ */

.event-close-flow > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  border-radius: calc(var(--radius-lg) * 1.15); /* the .card/.dialog radius */
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  cursor: pointer;
  list-style: none;
}

/* The text block (name, both review sentences) is this row's flex item
 * with real content, and had no min-width:0 — at 200% zoom's narrow
 * effective viewport its long review sentence (it wraps; it is long, not
 * unbreakable) forced this whole summary, and with it every sibling
 * settings module sharing the same grid column, wider than the
 * viewport. */
.event-close-flow > summary > span:first-child {
  min-width: 0;
}

.event-close-flow > summary::-webkit-details-marker {
  display: none;
}

.event-close-flow > summary small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.event-close-flow > summary strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
}

.event-close-flow > summary > span > span:last-of-type {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
}

#event-close-review-state {
  font-size: 12px;
}

.panel.guarded {
  margin-top: var(--space-2);
  padding: var(--space-6);
  border-radius: calc(var(--radius-lg) * 1.15); /* the .card/.dialog radius */
  background: var(--color-accent-100);
  border: 1px solid var(--color-accent-300);
}

.guarded-eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-800);
}

.panel.guarded h2 {
  margin: var(--space-2) 0 0;
  font-size: 27px;
}

.panel.guarded > .hint {
  margin: var(--space-2) 0 0;
  max-width: 64ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-accent-800);
}

.close-reconciliation {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
}

@media (min-width: 700px) {
  .close-reconciliation {
    grid-template-columns: repeat(4, 1fr);
  }
}

.close-reconciliation > div {
  padding: var(--space-3) var(--space-4);
  border-radius: 24px;
  background: var(--color-bg);
}

.close-reconciliation dt,
.close-reconciliation p:first-child {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.close-reconciliation dd,
.close-reconciliation p:last-child {
  margin: 4px 0 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.close-blockers-panel,
.close-radius-panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: 24px;
  background: var(--color-bg);
}

.close-blockers-panel h3,
.close-radius-panel h3 {
  margin: 0;
  font-size: 16px;
}

.close-blockers,
.close-radius {
  margin: var(--space-2) 0 0;
  padding: 0 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
}

.close-blockers li {
  color: var(--color-accent-800);
}

#event-close-form {
  margin-top: var(--space-3);
}

#close-unclaimed-group {
  padding: 0;
  border: 0;
  margin: 0;
}

#close-unclaimed-group legend {
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}

.event-close-flow .stall-choices {
  display: grid;
  gap: 2px;
  margin-top: var(--space-2);
}

.event-close-flow .choice {
  border: none;
  border-radius: 18px;
  background: var(--color-bg);
  padding: var(--space-2) var(--space-3);
}

#event-close-form > .choice {
  align-items: flex-start;
  min-height: 0;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: 24px;
  background: var(--color-bg);
  font-size: 13px;
  line-height: 1.55;
}

#event-close-form input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--color-accent-600);
}

#event-close-form .field {
  display: block;
  margin-top: var(--space-3);
}

#event-close-form input:not([type="checkbox"]) {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 5px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: var(--color-bg);
}

#event-close {
  display: flex;
  flex-direction: column;
}

#event-close > div:has(#close-event) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

#close-event {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: none;
  border-radius: 999px;
  background: var(--color-accent-800);
  color: var(--color-bg);
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
}

#close-event:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

/* The surface name, muted beside the brand — the header pattern Operations
 * uses, so the two Event Admin surfaces read as one bar. It is the page's h1,
 * so it carries the outline as well as the label. */
.settings-page .settings-surface-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.settings-page .brand {
  font-size: 24px;
}

/* Brand and surface name are one group on the left, as Operations draws them —
 * the header is space-between, so leaving them as two children put the surface
 * name in the middle of the bar instead of beside its brand. */
.settings-page .settings-identity {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

/* `Event Setup.dc.html` puts a `Read only` tag under the Exceptional
 * corrections heading: the ledger is append-only, and the surface says so
 * before the reader looks for an edit control. */
.settings-page .correction-read-only {
  margin-top: var(--space-2);
}