/* The staff admin's styles: plain, legible forms and tables, and an
   environment badge that can't be missed. The colors, type, corners and
   shadows are the public site's (fvc.css), so the two look like one site and
   contrast is already checked; the form fields and sections follow its
   reservation form. */
:root {
  --blue-deep: #0c3b5d;
  --blue: #075985;
  --blue-mid: #0a6fa8;
  --sky-light: #e0f2fe;
  --sun: #facc15;
  --pine: #166534;
  --meadow: #dcfce7;
  --charcoal: #1f2937;
  --gray-muted: #64748b;
  --canvas: #fffbeb;
  --canvas-2: #f5eeda;
  --white: #ffffff;
  --red: #c52d2d;
  --focus: #facc15;
  --field-border: #c8cdd6;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 3px 12px rgba(0, 0, 0, .13);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--charcoal);
  background: var(--canvas);
}

a { color: var(--blue); }

h1, h2, h3 { font-family: var(--serif); font-style: italic; color: var(--blue-deep); line-height: 1.2; }
h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: .25rem 0 1rem; }
h2 { font-size: 1.4rem; margin: 2rem 0 .75rem; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: .5rem 1rem;
  background: var(--white);
  z-index: 10;
}

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding: .75rem 1rem;
  background: var(--blue-deep);
  color: var(--white);
}
.admin-bar__brand {
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.admin-bar__nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.admin-bar__nav a { color: var(--white); }
.admin-bar__staff { margin-left: auto; }
.admin-bar__signout { margin: 0; }

.env {
  padding: .125rem .5rem;
  border-radius: .25rem;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.env--local { background: var(--gray-muted); color: var(--white); }
.env--preview { background: var(--sun); color: var(--charcoal); }
.env--production { background: var(--red); color: var(--white); }

/* Wide enough for the request table on a desktop screen. */
main {
  max-width: 90rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem;
}

button, .button {
  display: inline-block;
  font: inherit;
  font-weight: 800;
  padding: .7rem 1.25rem;
  border: 2px solid var(--blue);
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
}
button:hover, .button:hover { background: var(--blue-mid); border-color: var(--blue-mid); }

/* Why a sign-in didn't finish. */
.notice {
  padding: .75rem 1rem;
  border-left: 4px solid var(--red);
  background: var(--white);
}
.admin-bar button {
  border-color: var(--white);
  background: transparent;
  font-weight: 700;
  padding: .4rem .9rem;
  border-radius: var(--radius-sm);
}

.reference code { font-size: 1rem; }

/* Reservation requests: the list, its search and pager, and the detail. */
.hint { color: var(--gray-muted); }
/* The request search: name or reference, sort and the buttons on one row,
   lined up on their boxes; the dates on the row below. One column on a
   phone. */
.search {
  display: grid;
  grid-template-columns: minmax(14rem, 28rem) auto auto 1fr;
  grid-template-areas:
    "q sort actions ."
    "dates dates dates dates";
  column-gap: 1.25rem;
  row-gap: .75rem;
  align-items: start;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.search .field--q { grid-area: q; }
.search .field--sort { grid-area: sort; }
.search .actions {
  grid-area: actions;
  display: flex;
  gap: 1rem;
  align-items: center;
  /* Level with the boxes, below their labels. */
  margin-top: calc(1.5em + .25rem);
}
.search .dates { grid-area: dates; }
/* The changes page's one choice and its button, on a row. */
.search.filter { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1.25rem; }
.search.filter .actions { margin-top: 0; }
.search label, .search legend { display: block; font-weight: 700; margin-bottom: .25rem; padding: 0; }
.search input[type="text"], .search input[type="date"], .search select {
  font: inherit;
  padding: .55rem .75rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  max-width: 100%;
}
.search input[type="text"] { width: 100%; }
.search input[aria-invalid="true"] { border: 2px solid var(--red); }
.search .hint { margin: .25rem 0 0; font-size: .9rem; }

.search .dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin: 0;
  padding: .75rem 0 0;
  border: 0;
  border-top: 1px solid var(--canvas-2);
}
.search .dates legend { float: left; margin: 0 .25rem 0 0; }
.search .dates label { margin: 0; }
.search .dates .radio { font-weight: 400; display: inline-flex; gap: .35rem; align-items: center; }
.search .dates .date { display: inline-flex; gap: .5rem; align-items: center; }
.search .dates .date label { font-weight: 400; }
.search .dates .field-error { flex-basis: 100%; }

@media (max-width: 40rem) {
  .search {
    grid-template-columns: 1fr;
    grid-template-areas: "q" "sort" "dates" "actions";
  }
  .search .actions { margin-top: 0; }
  .search .dates .date label { min-width: 2.75rem; }
}

.error-summary {
  border: 3px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.error-summary h2 { color: var(--red); font-style: normal; }
.error-summary h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary a { color: var(--red); font-weight: 700; }
.field-error { color: var(--red); font-weight: 700; margin: .25rem 0 0; }

/* As the public site's rate tables: a blue header row on a white card. */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
table.requests, table.list { border-collapse: collapse; width: 100%; background: var(--white); }
.requests th, .requests td, .list th, .list td {
  text-align: left;
  vertical-align: top;
  padding: .65rem .9rem;
  border-top: 1px solid #e7ddc2;
}
.requests thead th, .list thead th {
  background: var(--blue);
  color: var(--white);
  border-top: 0;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* On a phone, each request is a short labeled card instead of a table row
   too narrow to read. */
@media (max-width: 40rem) {
  table.requests, .requests tbody, .requests tr, .requests td,
  table.list, .list tbody, .list tr, .list td, .list tbody th { display: block; }
  .requests thead, .list thead { position: absolute; left: -9999px; }
  .requests tr, .list tr { padding: .5rem 0; border-top: 1px solid #e7ddc2; }
  .requests tr:first-child, .list tr:first-child { border-top: 0; }
  .requests td, .list td, .list tbody th {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    border: 0;
    padding: .125rem .75rem;
  }
  .requests td::before, .list td::before { content: attr(data-label); font-weight: 700; }
  /* A list's values can hold a tag beside their text, so the label is set
     beside the value rather than in a grid column of its own. */
  .list td { display: block; position: relative; padding-left: 9.25rem; }
  .list td::before { position: absolute; left: .75rem; width: 8rem; }
}

.pager { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; }

dl.request {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: .5rem 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.request dt { font-weight: 700; }
.request dd { margin: 0; overflow-wrap: anywhere; }
.request .empty { color: var(--gray-muted); font-style: italic; }
@media (max-width: 30rem) {
  dl.request { grid-template-columns: 1fr; gap: .125rem; }
  .request dd { margin-bottom: .5rem; }
}

/* The editors, as the public reservation form: one white card, its
   sections divided by a rule under a serif heading, and soft-edged fields. */
.tag {
  display: inline-block;
  padding: 0 .45rem;
  border-radius: 20px;
  background: var(--sun);
  color: #111;
  font-size: .75rem;
  font-weight: 800;
  vertical-align: 1px;
}
.list tr.changed { background: #fdf6dc; }
.saved {
  padding: 1rem 1.25rem;
  border-left: 5px solid var(--pine);
  border-radius: var(--radius-sm);
  background: var(--meadow);
}
.status { max-width: 50rem; }
.editor {
  max-width: 52rem;
  padding: 1.75rem 2rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.editor fieldset {
  min-width: 0;
  margin: 1.4rem 0 0;
  padding: 1.4rem 0 0;
  border: 0;
  border-top: 1px solid var(--canvas-2);
}
/* The first section needs no rule above it, unless the year comes first. */
.editor > input[type="hidden"] + fieldset { margin-top: 0; padding-top: 0; border-top: 0; }
/* A legend normally sits across its fieldset's border; floated, it's a
   heading inside the section instead. */
.editor legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 .9rem;
  color: var(--blue-deep);
  font: 700 1.25rem var(--serif);
}
.editor legend + * { clear: left; }
.editor .field { margin: 0 0 1.25rem; }
.editor fieldset > .field:last-child { margin-bottom: 0; }
/* Keep related event controls together, while leaving room for their hints. */
.event-dates, .event-options {
  display: grid;
  gap: 1rem 1.5rem;
}
.event-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.25rem; }
.event-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editor .event-dates > .field, .editor .event-options > .field { margin: 0; min-width: 0; }
.event-dates input { max-width: 100%; }
@media (max-width: 40rem) {
  .event-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-options > .field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .event-dates, .event-options { grid-template-columns: minmax(0, 1fr); }
}
.editor label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.editor input[type="text"], .editor input[type="datetime-local"], .editor textarea, .editor select {
  font: inherit;
  padding: .6rem .75rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--charcoal);
  max-width: 100%;
}
.editor input:focus, .editor textarea:focus, .editor select:focus, .search input:focus, .search select:focus {
  outline: 3px solid var(--sun);
  outline-offset: 1px;
  border-color: var(--blue);
}
.editor textarea { width: 100%; resize: vertical; }
.editor input.full-width { width: 100%; }
.editor input.short { width: 6rem; }
.editor [aria-invalid="true"] { border: 2px solid var(--red); }
.editor .hint { margin: .3rem 0 0; font-size: .85rem; }
.editor fieldset > .hint { margin: 0 0 1rem; }
/* The choice between the two 1:30 AMs of a fall-back night. */
.editor fieldset.offsets {
  margin: .6rem 0 0;
  padding: .75rem 1rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--canvas);
}
.editor fieldset.offsets legend { font: 700 .9rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--charcoal); margin-bottom: .4rem; }
.editor .radio { font-weight: 400; font-size: 1rem; display: flex; gap: .5rem; align-items: center; margin: .2rem 0; }
.editor .actions, form .actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1.5rem 0 0; }
.editor .actions { padding-top: 1.4rem; border-top: 1px solid var(--canvas-2); }
.editor > .hint { margin: .75rem 0 0; }
button.secondary, .button.secondary { background: var(--white); color: var(--blue); }
button.danger, .button.danger { background: var(--red); border-color: var(--red); color: var(--white); }
button.danger:hover, .button.danger:hover { background: #a32424; border-color: #a32424; }
/* Delete sits apart from Save and Cancel, at the row's far end. */
.actions .delete { margin-left: auto; }
button:disabled, button:disabled:hover {
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: var(--gray-muted);
  cursor: not-allowed;
}
p.notice { border-left-color: var(--sun); border-radius: var(--radius-sm); max-width: 52rem; }
button.secondary:hover, .button.secondary:hover { background: var(--blue); color: var(--white); }
.saved-now {
  margin: .5rem 0 0; padding: .6rem .85rem;
  border: 2px solid var(--red); border-radius: var(--radius-sm);
  background: var(--white);
}
.saved-now p { margin: 0; }
.saved-now .saved-now-label { color: var(--red); font-weight: 700; }
.saved-now .pre { white-space: pre-wrap; }

@media (max-width: 40rem) {
  .editor { padding: 1.25rem 1.1rem; }
}

/* Site alerts, as the public site shows them (fvc.css's .alert-box): the
   list, the editor's preview and its style swatches. */
.alert-box { border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin: 0 0 .75rem; max-width: 52rem; }
.alert-box p { margin: 0 0 1em; }
.alert-box p:last-child, .alert-box > :last-child { margin-bottom: 0; }
.alert-box a { text-decoration: underline; }
/* As on the public site: a heading takes the alert's own text color. */
.alert-box :is(h1, h2, h3, h4, h5, h6) { color: inherit; font-size: 1.15em; margin: 0 0 .4em; }
.alert-box--warning { background: var(--sun); color: #111; }
.alert-box--warning a { color: var(--blue-deep); }
.alert-box--danger { background: var(--red); color: var(--white); }
.alert-box--success { background: var(--meadow); color: var(--charcoal); border-left: 6px solid var(--pine); }
.alert-box--success a { color: var(--blue); }
.alert-box--primary { background: var(--blue); color: var(--white); }
.alert-box--info { background: var(--sky-light); color: var(--charcoal); border-left: 6px solid var(--blue); }
.alert-box--info a { color: var(--blue); }
.alert-box--danger a, .alert-box--primary a { color: var(--white); }
.alert-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.alert-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 25rem) auto;
  grid-template-areas: "preview meta actions";
  gap: .75rem 1.25rem;
  align-items: center;
  padding: .75rem 0;
  border-top: 1px solid #e7ddc2;
}
.alert-item:first-child { border-top: 0; padding-top: 0; }
.alert-item > .alert-box { grid-area: preview; max-width: none; margin: 0; padding: .65rem .85rem; overflow-wrap: anywhere; }
.alert-meta { grid-area: meta; margin: 0; font-size: .875rem; }
.alert-actions { grid-area: actions; }
.alert-actions, .alert-actions form { display: flex; gap: .35rem; align-items: center; margin: 0; }
.alert-actions .icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: .55rem;
  border-radius: var(--radius-sm);
}
.icon-button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 65rem) {
  .alert-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "preview actions" "meta actions"; gap: .4rem 1rem; }
}
@media (max-width: 40rem) {
  .alert-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "meta" "actions"; }
}
.tag--off { background: #e5e7eb; color: var(--charcoal); }
.swatch { display: inline-block; width: 1.4rem; height: 1rem; border-radius: 4px; border: 1px solid var(--field-border); }
.editor fieldset.choices { margin: 1rem 0 1.1rem; border: 0; padding: 0; }
.editor fieldset.choices legend { font: 700 1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--charcoal); margin-bottom: .25rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A text field's preview (content-maintenance REQ-16): the markdown rendered
   as the public site renders it, set apart from the form by a dashed edge so
   it isn't mistaken for saved content. */
.markdown-preview {
  margin: .6rem 0 0;
  padding: .75rem 1rem;
  border: 2px dashed var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--canvas);
}
.markdown-preview-label { margin: 0 0 .4rem; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-muted); }
.markdown-preview p { margin: 0 0 .75em; }
.markdown-preview > :last-child, .markdown-preview p:last-child { margin-bottom: 0; }
.markdown-preview ul, .markdown-preview ol { margin: 0 0 .75em; padding-left: 1.4rem; }

/* Markdown and Preview tabs on the markdown fields (static/js/admin-markdown.js).
   The hidden attribute has to win over display rules such as the buttons'. */
[hidden] { display: none !important; }
.md-tabs { display: flex; gap: .25rem; margin: 0 0 -1px; }
.md-tab {
  padding: .35rem .9rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--canvas);
  color: var(--blue);
  font-size: .9rem;
}
.md-tab:hover { background: var(--white); border-color: var(--field-border); color: var(--blue-deep); }
.md-tab[aria-selected="true"] { background: var(--white); color: var(--charcoal); border-bottom-color: var(--white); position: relative; }
.md-editor:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: var(--radius-sm); }
.md-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.editor .md-panel textarea:focus, .md-editor .md-preview:focus-visible { outline: none; }
.editor .md-panel textarea:focus:not([aria-invalid="true"]) { border-color: var(--field-border); }
.md-panel textarea { display: block; border-top-left-radius: 0; }
.md-preview {
  padding: .75rem 1rem;
  border: 1px solid var(--field-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  background: var(--white);
}
.md-error { margin: 0 0 .75rem; color: var(--red); font-weight: 700; }

/* Season text as the public site sets it (fvc.css's .prose): paragraph
   spacing, list indents, link color and heading sizes. */
.md-rendered, .markdown-preview { line-height: 1.6; }
.md-rendered p { margin: 0 0 1em; }
.md-rendered ul, .md-rendered ol { margin: 0 0 1em; padding-left: 1.5rem; }
.md-rendered > :last-child { margin-bottom: 0; }
.md-rendered a { color: var(--blue-mid); text-decoration: underline; }
.md-rendered :is(h1, h2, h3, h4) { font-family: var(--serif); font-style: normal; color: var(--blue); margin: 0 0 .5em; }
.md-rendered h1 { font-size: 1.6rem; }
.md-rendered h2 { font-size: 1.35rem; }
.md-rendered :is(h3, h4) { font-size: 1.15rem; }

/* Unsaved changes put back after signing in again (admin-drafts.js). */
.draft-note {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center;
  max-width: 52rem; margin: 0 0 1rem; padding: .75rem 1rem;
  border-left: 5px solid var(--sun); border-radius: var(--radius-sm); background: var(--white);
}
.draft-note p { margin: 0; flex: 1 1 20rem; }

/* The page text list: each page's blocks under its name, each as the public
   site shows it. */
.page-text-group { max-width: 52rem; }
.page-text-item { padding: .75rem 0; border-top: 1px solid #e7ddc2; }
.page-text-item:first-of-type { border-top: 0; }
.page-text-item h3 { margin: 0 0 .4rem; font-size: 1.05rem; font-style: normal; }
.page-text-preview { padding: .75rem 1rem; background: var(--white); border-radius: var(--radius-sm); }

/* Keep the page index compact while using the available width. */
.pages-list { table-layout: fixed; }
.pages-list th:first-child { width: 12rem; }
.pages-list th:last-child { width: 5rem; }
.page-intro-excerpt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 40rem) {
  .pages-list th:first-child, .pages-list th:last-child { width: auto; }
  .page-intro-excerpt { white-space: normal; }
}

/* The public page is the editor's canvas, with admin controls around it. */
.editor.page-editor { max-width: none; padding: 0; background: transparent; box-shadow: none; }
.draft-note:has(+ .page-editor) { max-width: none; }
.page-canvas { font: 1rem/1.6 system-ui, sans-serif; background: var(--canvas); color: var(--charcoal); border-radius: var(--radius-sm); overflow: clip; }
.page-canvas .field { margin: 0; }
.page-canvas .page-head h1 { color: var(--white); }
.page-canvas .page-head .field > label { color: var(--white); }
.page-canvas .page-head .field > .hint { color: #e0f2fe; max-width: none; }
.page-canvas .field > label { font: 700 .9rem/1.5 system-ui, sans-serif; }
.page-canvas .field .hint { font: .85rem/1.5 system-ui, sans-serif; }
.page-canvas .field textarea, .page-canvas .field input[type="text"] { font: 1rem/1.5 system-ui, sans-serif; color: var(--charcoal); background: var(--white); }
.page-canvas .page-context a { color: inherit; cursor: default; }
.page-canvas .page-context .tabs { display: none; }
.page-canvas .page-context .tab-pane { display: block; }
.page-canvas .context-form { margin: 0; padding: 0; border: 0; }
.page-editor > .actions { position: sticky; bottom: 0; z-index: 2; margin: 0; padding: 1rem; background: var(--canvas); border-top: 1px solid var(--canvas-2); }

/* Event images (specs/event-images.md): the two slots side by side where
   two 22rem columns fit, one above the other below that. Each slot is a
   card holding its image, its text and its actions. */
.image-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; max-width: 74rem; align-items: start; }
.image-slot { padding: 1.25rem 1.5rem 1.5rem; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.image-slot h3 { margin-top: 0; }
.slot-image { margin: 0 0 1rem; }
.slot-image img { display: block; max-width: min(100%, 20rem); height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); background: var(--white); }
.slot-image figcaption { margin-top: .4rem; }
/* The editor's fields, inside the slot's own card. */
.editor.slot-form { max-width: none; padding: 0; background: transparent; box-shadow: none; }
.editor.slot-form .actions { margin-top: .75rem; padding-top: 0; border-top: 0; }
.slot-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.25rem 0 .5rem; padding-top: 1.25rem; border-top: 1px solid var(--canvas-2); }
.slot-actions form { margin: 0; }
.image-slot progress { display: block; width: 100%; height: .75rem; margin: .75rem 0 0; accent-color: var(--blue); }
.slot-status:empty { display: none; }
.slot-status { margin: .75rem 0 0; }
.slot-status button { margin-left: .25rem; }
.upload-review { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--canvas-2); }
.upload-review h4 { margin: 0 0 .5rem; }

/* A (?) beside a label opens a short explanation in a native popover. The
   button is 24px, the smallest target WCAG 2.5.8 allows. */
.label-with-help { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.editor .label-with-help label { margin-bottom: 0; }
.help-button {
  width: 24px; height: 24px; padding: 0;
  border-radius: 50%; font-size: .8rem; line-height: 1;
  background: var(--white); color: var(--blue);
}
.help-button:hover { color: var(--white); }
.help-note {
  max-width: min(42ch, calc(100vw - 32px)); margin: auto;
  border: 2px solid var(--blue); border-radius: var(--radius-sm);
  background: var(--white); color: var(--charcoal);
  padding: 1rem 1.25rem; line-height: 1.5;
  box-shadow: var(--shadow);
}
.help-note p { margin: 0 0 .75em; }
.help-note::backdrop { background: rgba(5, 18, 30, .4); }

/* Suggesting again in a review panel (image-uploads REQ-29): the model and
   its button on one row, the put-back button under the status. */
.suggest-again__row { display: flex; align-items: center; gap: .5rem; }
.icon-button { padding: .45rem .75rem; font-size: 1.15rem; line-height: 1; }
.suggest-again [data-suggest-status]:empty { display: none; }
.suggest-again [data-suggest-status] { margin: .5rem 0 0; }
.suggest-again [data-suggest-status] + button { margin-top: .5rem; }