/* ==========================================================================
   Art Jakarta — exhibitor portal, gallery-facing styles

   The shell every signed-in and signed-out gallery page shares: the fixed
   wordmark rail, white modules on a warm grey ground, forms, buttons and the
   footer. Lifted from the approved mockups in docs/mockups, whose skeleton and
   type follow the live site.

   Deliberately plain CSS, on both sides. This note used to say Tailwind was
   for the admin side; it was never installed, and the admin section below is
   plain CSS too — one styling vocabulary, small enough to read in one sitting,
   and no build step for one developer to maintain.
   ========================================================================== */

:root {
  color-scheme: light;

  --ground: #f2f3ee;
  --paper: #ffffff;
  --ink: #000000;
  --muted: #6f6f6a;
  --faint: #a19f9f;
  --line: #e2e2db;
  --accent: #ff6700;
  --field: #f3f1ee;
  --danger: #b3261e;

  --sans: "Quicksand", "Avenir Next", Avenir, "Century Gothic", Futura,
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --rail: 160px;
  --offset: 203px;
  --column: 960px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 1px;
  -webkit-font-smoothing: antialiased;
}

/* Gallery shell only: fill the viewport and keep the footer at its foot, so a
   short page does not leave the footer floating with ground below it. The
   wordmark rail and skip link are out of flow (fixed / absolute), so only the
   content and footer take part. The admin shell is excluded — it has its own
   centred page (whose auto margins a flex column would collapse) and no
   footer. */
body:not(.admin) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

/* Visible only once tabbed to, so a keyboard user can jump the wordmark rail. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1001;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; text-decoration: none;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
}

.skip-link:focus { left: 0; }

/* ---------- the wordmark rail ---------- */
.nav-bar {
  position: fixed; left: 0; top: 50px; bottom: 50px;
  width: var(--rail); background: var(--paper);
  z-index: 99; display: flex; align-items: flex-end; justify-content: center;
}

.nav-bar .wordmark-link { display: block; margin-bottom: 30px; }
.nav-bar .wordmark { display: block; width: 50px; height: auto; }

/* ---------- page frame ---------- */
.wrapper { padding: 56px 0 0 var(--offset); max-width: 1366px; flex: 1 0 auto; }
.column { width: var(--column); max-width: 100%; }

.module { background: var(--paper); padding: 28px 40px 44px; position: relative; }

.module.breadcrumb {
  margin-bottom: 3px; padding: 21px 40px 20px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}

.module.breadcrumb a { text-decoration: none; }
.module.breadcrumb a:hover { color: var(--accent); }
.module.breadcrumb .sep { color: var(--faint); }
.module.breadcrumb .active { font-weight: 700; }

.module.breadcrumb .trail-end { margin-left: auto; display: flex; align-items: center; gap: 18px; }

/* The sign-out control is a real form button — Devise expects DELETE — dressed
   to sit beside the plain links next to it. */
.linklike {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: inherit; cursor: pointer;
}

.linklike:hover { color: var(--accent); }

/* ---------- typography ---------- */
h2 { margin: 0 0 35px; font-weight: 700; font-size: 21px; letter-spacing: 2px; text-wrap: balance; }
.intro { font-size: 14px; letter-spacing: 1px; margin: 0 0 40px; max-width: 60ch; }

/* ---------- flash ---------- */
.flash {
  background: var(--paper);
  border-left: 3px solid var(--muted);
  padding: 16px 40px;
  margin-bottom: 3px;
  font-size: 12.5px; letter-spacing: .6px;
}

.flash-notice { border-left-color: var(--accent); }
.flash-alert { border-left-color: var(--danger); color: var(--danger); }

/* ---------- forms ---------- */
.field { margin-bottom: 20px; }

.form-label { margin-bottom: 8px; }

.form-label label {
  font-weight: 700; text-transform: uppercase;
  font-size: 10px; letter-spacing: 2px;
}

.req { color: var(--accent); }

.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=password],
.form-field input[type=tel],
.form-field input[type=number],
.form-field input[type=url],
.form-field textarea,
.form-field select {
  background-color: var(--field);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 12px;
  width: 100%;
  font: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink);
  border-radius: 0;
}

.form-field select { height: 40px; cursor: pointer; }

.form-field textarea { resize: vertical; box-sizing: border-box; }
.form-field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.form-field input[type=file] { font: inherit; font-size: 12px; }
.hint { margin: 6px 0 0; font-size: 11.5px; letter-spacing: .4px; color: var(--muted); }
.form-cancel { margin-left: 22px; }

.form-field input:focus,
.form-field select:focus { outline: none; border-bottom-color: var(--accent); }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pair-narrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }

.field.checkbox label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.field.checkbox input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--ink); margin: 0; }
.field.checkbox span { font-size: 12.5px; letter-spacing: .6px; }

.hint { font-size: 11.5px; letter-spacing: .5px; color: var(--muted); margin: 7px 0 0; }

.error { font-size: 11.5px; letter-spacing: .5px; color: var(--danger); margin: 7px 0 0; }
.field.has-error input,
.field.has-error select { border-bottom-color: var(--danger); }

/* Rails wraps an invalid field in this. Without the reset it becomes a block
   element mid-row and breaks the two-column grids above. */
.field_with_errors { display: contents; }

/* ---------- form sections ---------- */
/* Groups a long form into a few scannable blocks. The gap between sections is
   only a little wider than the gap between fields — the ruled heading does the
   separating, so the page stays as open as the rest of the site. */
.form-section { margin-bottom: 14px; }
.form-section:last-of-type { margin-bottom: 0; }

.form-section-title {
  margin: 0 0 18px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
}

/* A note belongs to the heading above it, so it sits closer to it than a field
   would. :has is already assumed elsewhere — the app declares modern browsers. */
.form-section-title:has(+ .form-section-note) { margin-bottom: 9px; }

.form-section-note {
  margin: 0 0 18px;
  font-size: 12.5px; letter-spacing: .5px; color: var(--muted);
}

/* The button carries its own 20px top margin for standalone use; inside a form
   the last field already supplies the gap. */
.form-actions { margin-top: 12px; }
.form-actions .big-button { margin-top: 0; }

/* Each action gets a line saying what it is for, so "resend confirmation" reads
   as something to do rather than a footnote. */
.form-footer {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 22px 56px;
}

.form-footer-item p {
  margin: 0 0 8px;
  font-size: 12.5px; letter-spacing: .5px; color: var(--muted);
}

.form-footer-item a {
  display: inline-block;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px;
}

.form-footer-item a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ==========================================================================
   admin

   A second design system, not a variation on the one above. The admin mockups
   in docs/mockups (admin-events.html and the rest) set staff screens in serif
   and mono on a warmer ground, with radii, shadows and a dark mode — none of
   which the gallery side has, because that side has to match an existing
   public identity and this one does not.

   The tokens are therefore redefined on `.admin` (set on <body> by the admin
   layout) rather than on :root, because both systems spell them the same:
   --ground, --ink, --line, --muted and --faint all exist above with different
   values. Custom properties inherit, so everything inside the body picks these
   up, and nothing here can reach a gallery page.

   Plain CSS, like the rest of the file. The note at the top of this file used
   to say Tailwind was for the admin side; it was never installed, and one
   styling vocabulary is enough for one developer to maintain.
   ========================================================================== */
.admin {
  color-scheme: light dark;

  --ground: #f7f6f5;
  --card: #ffffff;
  --ink: #1a1614;
  --ink-soft: #4c4541;
  --muted: #78706b;
  --faint: #a89f99;
  --line: #e7e2dd;
  --line-strong: #d6cfc8;
  --live: #ff6700;
  --live-wash: #fff1e6;
  --ok: #2f7a4c;
  --ok-wash: #eef6f0;
  --warn: #9a6b00;
  --warn-wash: #fdf5e3;
  --danger: #b3261e;
  --danger-wash: #fdecea;
  --ink-invert: #ffffff;
  --shadow: 0 1px 2px rgba(26, 22, 20, .06), 0 1px 3px rgba(26, 22, 20, .04);
  --ring: rgba(255, 103, 0, .38);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r: 8px;
  --r-sm: 6px;

  background: var(--ground);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: normal;
}

/* The mockups also carry a [data-theme] switcher, which is their state-preview
   chrome rather than a product feature. Following the viewer's own setting is
   the whole of it until someone asks for a toggle. */
@media (prefers-color-scheme: dark) {
  .admin {
    --ground: #151311;
    --card: #1c1917;
    --ink: #f5f1ed;
    --ink-soft: #ddd6d0;
    --muted: #a19890;
    --faint: #7c736c;
    --line: #2e2926;
    --line-strong: #3d3733;
    --live: #ff7d26;
    --live-wash: #33200f;
    --ok: #6bbb8a;
    --ok-wash: #16241b;
    --warn: #d8a13c;
    --warn-wash: #2a2213;
    --danger: #e5847c;
    --danger-wash: #2e1615;
    --ink-invert: #1a1614;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --ring: rgba(255, 125, 38, .45);
  }
}

/* ---------- top bar ---------- */
/* Sticky, so the navigation and the way out stay reachable down a long
   applicant list. */
.admin .topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin .topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 56px;
  flex-wrap: wrap;
}

.admin .wordmark-admin {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: -.01em;
  color: inherit;
  text-decoration: none;
}

.admin .wordmark-admin b { font-weight: 600; }

.admin .wordmark-admin span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* margin-right: auto is what pins the user menu to the right-hand end. */
.admin .nav { display: flex; gap: 4px; margin-right: auto; }

.admin .nav a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

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

.admin .nav a[aria-current="page"] {
  background: var(--ground);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- who is signed in ---------- */
/* A <details> rather than a scripted menu: the markup is the state, so there is
   nothing to initialise and nothing to lose when Turbo swaps the page. The one
   controller it does carry only closes it before Turbo caches a snapshot —
   without that, going back lands on a page with the menu hanging open. */
.admin .user-menu { position: relative; }

.admin .user-menu > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink-soft);
  list-style: none;
}

.admin .user-menu > summary::-webkit-details-marker { display: none; }
.admin .user-menu > summary:hover { background: var(--ground); color: var(--ink); }
.admin .user-menu[open] > summary { background: var(--ground); color: var(--ink); }

.admin .user-menu .who {
  font-size: 13px;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin .user-menu .chevron { flex: none; color: var(--faint); }
.admin .user-menu[open] .chevron { transform: rotate(180deg); }

.admin .user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 30;
}

.admin .user-menu-panel .signed-in-as {
  display: block;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin .user-menu-panel .email { display: block; padding: 0 10px 8px; font-size: 13px; }

/* The sign-out control is a button in a form, so it reads as a menu row rather
   than inheriting the gallery link styling. */
.admin .user-menu-panel form { margin: 0; }

.admin .user-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.admin .user-menu-panel button:hover { background: var(--ground); }

/* ---------- page shell ---------- */
.admin .page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin .crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
}

.admin .crumbs a { color: var(--muted); text-decoration: none; }
.admin .crumbs a:hover { color: var(--live); }

.admin .page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.admin .page-head h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 4px;
  text-wrap: balance;
}

.admin .page-head p { margin: 0; color: var(--muted); max-width: 62ch; }

.admin .lede { margin: 0; color: var(--muted); max-width: 62ch; }

/* Readiness, on the Events list. The wording comes from
   Admin::EventsHelper; these are the two shapes it takes. */
.admin .pill {
  display: inline-block;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.admin .pill-ok { background: var(--ok-wash); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.admin .pill-warn { background: var(--warn-wash); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }

.admin .hint { font-size: 12.5px; color: var(--muted); }

.admin a.event-name:hover { color: var(--live); }

/* The edition's registration, reported. The switch itself is stage 19. */
.admin .reg-state {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 14px 20px;
}

.admin .reg-state .status { font-size: 13.5px; font-weight: 600; }
.admin .reg-state .status-live { color: var(--live); }
.admin .reg-state .status-live .dot { background: var(--live); }
.admin .reg-note { margin: 0; flex: 1 1 260px; font-size: 12.5px; color: var(--muted); }

/* Galleries / Scene. Links rather than a control: the tabs are a filter on
   this page and the server already knows how to render it. */
.admin .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }

.admin .tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted); text-decoration: none; font-weight: 500;
}

.admin .tab:hover { color: var(--ink); }
.admin .tab.is-current { color: var(--ink); border-bottom-color: var(--live); }

/* One application, as the organiser reads it: the list on the left, whichever
   item it shows on the right. The list holds one entry until the eight
   operational forms exist at stage 22; the two progress metrics above it stay
   away until then, because a count of forms that do not exist is not zero. */
.admin .split { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 16px; align-items: start; }

.admin .sidebar {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  overflow: hidden; position: sticky; top: 76px;
}

.admin .sidebar-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); padding: 12px 14px 8px;
}

.admin .side-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border-top: 1px solid var(--line); padding: 11px 14px; color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.admin a.side-item:hover { background: var(--ground); }
.admin .side-item-off { cursor: default; }

.admin .side-item[aria-current="true"] { background: var(--live-wash); box-shadow: inset 3px 0 0 var(--live); }
.admin .side-copy { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.admin .side-name { font-size: 13.5px; font-weight: 500; }
.admin .side-state { font-size: 11.5px; color: var(--muted); }

/* The sidebar's per-form submitted mark and badge (22c). Green is reserved for
   the fair team's own "done", which arrives with fulfilment; a submitted-only
   mark is neutral. */
.admin .mark { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; display: grid; place-items: center; font-size: 10px; color: #fff; }
.admin .mark.on { background: var(--ink-soft); border-color: var(--ink-soft); }
.admin .side-flag { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 3px; padding: 1px 4px; }

/* Forms-progress metrics on the applicant detail. */
.admin .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; }
.admin .metric { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 15px 18px; display: flex; flex-direction: column; gap: 8px; }
.admin .metric-label { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.admin .metric-value { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.admin .metric-value .of { color: var(--muted); font-size: 15px; font-weight: 500; }

/* Per-row forms progress on the applicant list — one tick per form. Green is
   the fair team's done (fulfilment, later); a submitted-only tick is neutral. */
.admin .progress { display: flex; align-items: center; gap: 9px; }
.admin .ticks { display: flex; gap: 3px; }
.admin .tick { width: 9px; height: 5px; border-radius: 1.5px; background: var(--line-strong); }
.admin .tick.submitted { background: var(--ink-soft); }
.admin .progress-label { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin .progress-na { font-size: 12.5px; color: var(--faint); }

@media (max-width: 860px) {
  .admin .split { grid-template-columns: minmax(0, 1fr); }
  .admin .sidebar { position: static; }
}

/* One application, as the organiser reads it. The mockup's pane; its sidebar
   and progress metrics arrive with the operational forms they index. */
.admin .pane {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}

.admin .pane-head {
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.admin .pane-title {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  letter-spacing: -.01em; margin: 0 0 3px;
}

.admin .pane-sub { font-size: 12.5px; color: var(--muted); }
.admin .pane-actions { display: flex; gap: 8px; }
.admin .pane-actions form { margin: 0; }

.admin .btn {
  font: inherit; font-weight: 500; border-radius: var(--r-sm);
  border: 1px solid transparent; padding: 8px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  text-decoration: none;
}

.admin .btn-primary { background: var(--ink); color: var(--ink-invert); }
.admin .btn-primary:hover { background: var(--ink-soft); }
.admin .btn-quiet { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
.admin .btn-quiet:hover { border-color: var(--ink); }
.admin .btn-sm { padding: 6px 11px; font-size: 13px; }
.admin .card-head .btn { margin-left: auto; }
.admin .pane-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 22px; }

.admin .group-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}

/* The mockup's own rule. It lands on three columns because the sidebar beside
   the pane leaves it about 890px — which is why that sidebar is built now
   rather than with the forms it will list. Full width it would run to five,
   and the gallery director's fields would share a line with the additional
   contact's. */
.admin .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 20px; }
.admin .field-wide { grid-column: 1 / -1; }
.admin .f-label { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.admin .f-value { font-size: 13.5px; }
.admin .f-value.empty { color: var(--faint); }
.admin .f-value p { margin: 0 0 6px; }
.admin .f-value p:last-child { margin-bottom: 0; }

.admin .files { display: flex; flex-direction: column; gap: 8px; }

.admin .file {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 13.5px;
}

.admin .file a { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none; }
.admin .file a:hover { color: var(--live); }

.admin .history { border-top: 1px solid var(--line); padding: 16px 22px 20px; }

.admin .history h3 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 500;
}

.admin .entries { display: flex; flex-direction: column; }
.admin .entry { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.admin .entry:last-child { border-bottom: 0; }
.admin .entry-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); margin-top: 7px; flex: none; }
.admin .entry-copy { display: flex; flex-direction: column; gap: 1px; }

.admin .back-link { margin: 0; font-size: 13px; }
.admin .back-link a { color: var(--muted); text-decoration: none; }
.admin .back-link a:hover { color: var(--live); }

/* The readiness panel on an edition's page: what it is missing, and beneath
   it the switches that reading informs. */
.admin .readiness {
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--card); box-shadow: var(--shadow); overflow: hidden;
}

.admin .readiness-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; flex-wrap: wrap; }
.admin .readiness.is-ready .readiness-head { background: var(--ok-wash); border-bottom: 1px solid var(--line); }
.admin .readiness.is-incomplete .readiness-head { background: var(--warn-wash); border-bottom: 1px solid var(--line); }
.admin .readiness-title { font-weight: 600; font-size: 14.5px; }
.admin .readiness.is-ready .readiness-title { color: var(--ok); }
.admin .readiness.is-incomplete .readiness-title { color: var(--warn); }
.admin .readiness-note { font-size: 12.5px; color: var(--muted); flex: 1 1 260px; margin: 0; }

.admin .checks {
  list-style: none; margin: 0; padding: 6px 8px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px;
}

.admin .check { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13.5px; }
.admin .check .mark { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.admin .check.is-met .mark { background: var(--ok-wash); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.admin .check.is-missing .mark { background: var(--warn-wash); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.admin .check.is-missing { background: var(--ground); }
.admin .check .met-detail { margin-left: auto; font-size: 12.5px; color: var(--muted); }

.admin .publish {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  padding: 16px 20px; border-top: 1px solid var(--line); background: var(--ground);
}

.admin .control { display: flex; align-items: center; gap: 12px; }
.admin .control-copy { display: flex; flex-direction: column; }
.admin .control-name { font-weight: 600; font-size: 13.5px; }
.admin .control-state { font-size: 12.5px; color: var(--muted); }
.admin .control.is-on .control-state { color: var(--live); }
.admin .control-aside { font-size: 12.5px; color: var(--muted); }
.admin .control-divider { width: 1px; align-self: stretch; background: var(--line); }
.admin .controls-note { font-size: 12.5px; color: var(--muted); flex: 1 1 240px; min-width: 220px; margin: 0; }

/* The content cards below it. */
/* One per row. grid-template-columns is stated rather than left to inherit:
   the gallery side has its own .cards, two abreast, for the address and
   contact pickers, and without this the admin cards take its columns — the
   key-date and booth-rate tables then render in half the width they need. */
.admin .cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; list-style: none; padding: 0; margin: 0; }

.admin .card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}

.admin .card-head { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.admin .card-title { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.admin .card-body { padding: 16px 20px; }
.admin .card-body.tight { padding: 0; }

.admin .kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 20px; margin: 0; font-size: 13.5px; }
.admin .kv dt { color: var(--muted); }
.admin .kv dd { margin: 0; }
.admin .unset { color: var(--faint); font-style: italic; }

.admin .prose-preview { color: var(--ink-soft); max-width: 70ch; }
.admin .prose-preview p { margin: 0 0 8px; }
.admin .prose-preview p:last-child { margin-bottom: 0; }
.admin .prose-preview ul, .admin .prose-preview ol { margin: 0 0 8px; padding-left: 20px; }

@media (max-width: 720px) { .admin .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } }

/* Summary tiles, above the tabs. */
.admin .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.admin .tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 5px;
}

.admin .tile-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}

.admin .tile-value {
  font-size: 27px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

.admin .tile-note { font-size: 12.5px; color: var(--muted); min-height: 1lh; }
.admin .tile-attention .tile-value { color: var(--live); }
.admin .tile-ok .tile-value { color: var(--ok); }

.admin .tab-count {
  font-family: var(--mono); font-size: 11px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--ground); box-shadow: inset 0 0 0 1px var(--line);
}

.admin .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.admin .flash {
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card);
  padding: 12px 16px;
}

.admin :focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }

/* ---------- tables ---------- */
/* Tables scroll inside their own box rather than pushing the page sideways. */
.table-scroll { overflow-x: auto; }

.admin .table-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin .admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.admin .admin-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  white-space: nowrap;
}

.admin .admin-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.admin .admin-table tbody tr:last-child td { border-bottom: 0; }
.admin .admin-table tbody tr:hover { background: var(--ground); }

/* The live-state marker: a bar down the side of an open fair's row. State in
   form as well as colour, so it survives being read by someone who cannot
   distinguish the orange. */
.admin td.cell-event { position: relative; padding-left: 20px; }

.admin tr[data-status="open"] td.cell-event::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: var(--live);
}

.admin tr[data-status="archived"] { color: var(--muted); }
.admin tr[data-status="archived"] .event-name { color: var(--muted); font-weight: 400; }

.admin .event-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  display: block;
}

.admin .event-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--muted);
}

.admin .chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
}

.admin .chip-ok { border-color: var(--ok); color: var(--ok); background: var(--ok-wash); }
.admin .chip-warn { border-color: var(--warn); color: var(--warn); background: var(--warn-wash); }
.admin .meta-line { font-size: 12.5px; color: var(--muted); }

.admin .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.admin .status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}

.admin tr[data-status="open"] .status { color: var(--live); }
.admin tr[data-status="open"] .status .dot { background: var(--live); }

.admin .count {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
}

.admin .count-split {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin .count-split b { color: var(--ink-soft); font-weight: 600; }

/* The state of each switch, ahead of the switch itself. Stage 17b replaces
   these with the real control; the column is here now so the table does not
   change shape when it arrives. */
.admin .switch-label {
  font-size: 12.5px;
  color: var(--muted);
  min-width: 52px;
}

.admin .dates-cell { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* ---------- forms (the spoke pages) ---------- */
/* Stage 18: editing what the read-only cards above only report. Lifted from
   docs/mockups/admin-event.html's own "forms" block, with one substitution —
   .editor wraps a real Trix toolbar here, not the mockup's row of fake
   buttons, since ActionText already ships one. */
.admin .form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.admin .section { padding: 20px 22px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.admin .section:last-of-type { border-bottom: 0; }
.admin .section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.admin .section-title { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.admin .section-hint { font-size: 12.5px; color: var(--muted); }

.admin .field { display: flex; flex-direction: column; gap: 6px; }
.admin .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.admin label.label { font-weight: 500; font-size: 13.5px; }

.admin input[type="text"], .admin input[type="date"], .admin input[type="number"],
.admin select, .admin textarea {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 12px; width: 100%;
}
.admin input:focus, .admin select:focus, .admin textarea:focus { border-color: var(--live); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.admin input::placeholder, .admin textarea::placeholder { color: var(--faint); }
.admin input[type="checkbox"] { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--live); cursor: pointer; }

/* Trix ships its own toolbar; this just gives it the mockup's frame. */
.admin .editor { border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.admin .editor trix-toolbar { border-bottom: 1px solid var(--line); background: var(--ground); }
.admin trix-editor { border: 0; padding: 12px 14px; min-height: 110px; font-size: 13.5px; color: var(--ink-soft); }

/* Restyle the stock ActionText buttons into the admin vocabulary: grouped,
   token-driven so they track light/dark, orange active state, hover feedback.
   The stock icons are black SVGs — invert them in dark mode so they stay visible. */
.admin .editor trix-toolbar .trix-button-row { gap: 8px; padding: 6px 8px 0; }
.admin .editor trix-toolbar .trix-button-group {
  margin: 0 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); overflow: hidden;
}
.admin .editor trix-toolbar .trix-button {
  border: 0; border-bottom: 0; padding: 0 0.6em;
  color: var(--ink-soft); background: transparent; transition: background .12s;
}
.admin .editor trix-toolbar .trix-button:not(:first-child) { border-left: 1px solid var(--line); }
.admin .editor trix-toolbar .trix-button:hover:not(:disabled) { background: var(--ground); }
.admin .editor trix-toolbar .trix-button.trix-active { background: var(--live-wash); color: var(--live); }
.admin .editor trix-toolbar .trix-button:disabled { opacity: .35; }

@media (prefers-color-scheme: dark) {
  .admin .editor trix-toolbar .trix-button--icon::before { filter: invert(1); }
}

/* nested list rows — key dates today, booth rates below, contacts later */
.admin .rows { display: flex; flex-direction: column; gap: 8px; }
.admin .row-item { display: grid; grid-template-columns: 24px 1fr 170px 36px; gap: 10px; align-items: center; }
/* Author styles below (.row-item's `display: grid`, .rates tr's table
   display) outrank the UA stylesheet's [hidden] rule at equal specificity,
   since author beats user-agent regardless — so a removed, still-submitted
   row needs this said explicitly. */
.admin [data-row][hidden] { display: none; }
.admin .grip { color: var(--faint); cursor: grab; display: grid; place-items: center; touch-action: none; }
.admin .row-item.sortable-ghost { opacity: .4; }
.admin .row-item.sortable-chosen .grip { cursor: grabbing; }
.admin .remove { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 17px; line-height: 1; padding: 6px; border-radius: var(--r-sm); }
.admin .remove:hover { color: var(--live); background: var(--ground); }

/* the booth-rate grid */
.admin table.rates { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin .rates th { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 8px 10px; text-align: left; white-space: nowrap; }
.admin .rates thead tr.cur th { border-bottom: 1px solid var(--line); }
.admin .rates th.group { text-align: center; border-bottom: 0; padding-bottom: 2px; }
.admin .rates td { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.admin .rates tr:last-child td { border-bottom: 0; }
.admin .rates input { padding: 7px 9px; font-variant-numeric: tabular-nums; }
.admin .rates .size input { font-weight: 600; }
.admin .rates .cur-sep { border-left: 1px solid var(--line); }
.admin .rate-scroll { overflow-x: auto; }

.admin .form-foot { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.admin .foot-note { font-size: 12.5px; color: var(--muted); margin-right: auto; }

/* Image previews on the Images form — a real thumbnail with the filename, and a
   remove tick per fair photo. */
.admin .thumbs { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.admin .thumb { display: inline-flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-soft); max-width: 200px; }
.admin .thumb img { display: block; border: 1px solid var(--line); border-radius: var(--r-sm); }
.admin .thumb-name { word-break: break-all; }
.admin .thumb-check { cursor: pointer; }
.admin .thumb-cap { display: inline-flex; align-items: center; gap: 7px; }
.admin .thumb-cap input { width: 15px; height: 15px; margin: 0; accent-color: var(--live); flex: none; }

.admin .callout { border-left: 3px solid var(--live); background: var(--live-wash); border-radius: var(--r-sm); padding: 12px 16px; font-size: 13px; color: var(--ink-soft); }
.admin .callout b { display: block; margin-bottom: 3px; }
.admin .callout-error { border-left-color: var(--danger); background: var(--danger-wash); color: var(--danger); margin-bottom: 22px; }
.admin .callout-error ul { margin: 0; padding-left: 18px; }

@media (max-width: 720px) {
  .admin .page { padding: 24px 16px 48px; }
  .admin .topbar-inner { padding: 0 16px; gap: 16px; }
  .admin .row-item { grid-template-columns: 24px 1fr 36px; }
}

/* ---------- compact form ---------- */
/* Opt-in tightening for short forms. Sign-in is two fields and a checkbox, and
   at the standard rhythm it reads as a page with three things stranded on it.
   Roughly a fifth off each vertical gap — enough to make one shape of it,
   without touching the longer forms, which keep the roomier spacing. */
.form-compact .intro { margin-bottom: 30px; }
.form-compact .field { margin-bottom: 16px; }
.form-compact .form-actions { margin-top: 14px; }
.form-compact .devise-links { margin-top: 28px; }

/* ---------- buttons and links ---------- */
.big-button {
  display: inline-block; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  font-size: 10px; padding: 20px 35px; margin-top: 20px;
  text-decoration: none; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.big-button:hover { background: var(--ink); color: var(--paper); }

.small-button {
  display: inline-block; border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  font-size: 9.5px; padding: 12px 18px; text-decoration: none; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.small-button:hover { background: var(--ink); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .big-button, .small-button { transition: none; }
}

/* Accepted exhibitor: the forms list, stacked as the mockup draws it. The
   buttons are inert placeholders until stage 22 wires their endpoints, so they
   are muted and do not respond to hover. */
.forms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.forms li { display: flex; align-items: center; gap: 14px; }
.form-state { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.declaration { margin: 0 0 22px; padding-left: 1.2em; font-size: 13px; line-height: 1.6; }
.declaration li { margin-bottom: 10px; }
.big-button.is-disabled { border-color: var(--line); color: var(--faint); cursor: default; }
.big-button.is-disabled:hover { background: var(--paper); color: var(--faint); }

/* Buttons side by side rather than stacked, for the front door. */
.devise-links-inline { margin: 0; display: flex; flex-wrap: wrap; gap: 14px; }

.devise-links { margin: 36px 0 0; display: flex; flex-direction: column; gap: 9px; }

.devise-links a {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; color: var(--muted); width: fit-content;
}

.devise-links a:hover { color: var(--accent); }

/* ---------- the fairs, on the front door ---------- */
/* Three across on the mockup, one per fair in the season. A grid rather than
   the legacy float columns so a fourth fair, or a season with two, lays out
   without a class change. */
.fairs {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px;
}

/* A column so the button can sit at the foot. The grid stretches every card in
   a row to the tallest, and the element after the dates — the status block, or
   the "More info" link when signed out — takes the slack, so the buttons line
   up whatever differs above (a venue line, a two-line status). */
.fair { display: flex; flex-direction: column; }
/* `.fair >` raises specificity above `.fair-status { margin: … }` below, which
   would otherwise reset this margin-top to 0 and undo the push. */
.fair > .fair-when + * { margin-top: auto; }

.fair-cover { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fair-cover-empty { background: var(--field); }

.fair-name { margin: 18px 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.fair-when { margin: 0 0 18px; color: var(--muted); }
.fairs-empty { margin: 40px 0 0; color: var(--muted); }

/* What a gallery has applied to: one row a year, not a wall of cover photos.
   Its own record of each fair, and the way to the forms once accepted. */
.applications { list-style: none; margin: 0; padding: 0; }
.application {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
  gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; letter-spacing: .4px;
}
.application-fair { font-weight: 700; }
.application-when, .application-detail { color: var(--muted); }
.application-status { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }

@media (max-width: 720px) {
  .application { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.fair-status { margin: 0 0 4px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.fair-detail { margin: 0 0 16px; font-size: 12px; letter-spacing: .4px; color: var(--muted); }
.apply .big-button { margin-top: 0; margin-bottom: 24px; }

/* ---------- a fair's page, and a category's ---------- */
/* Sections divided by a full rule, as on the mockup. The header carries the
   name, one line of when-and-where, the copy and the photographs; each
   section below is one thing a gallery needs before applying. */
.when { margin: -22px 0 34px; color: var(--muted); }
.body-copy { width: 85%; margin: 0 0 28px; }
.body-copy p:last-child { margin-bottom: 0; }

/* Scoped to the module: these are the rules between a fair page's sections,
   not a house style for every horizontal rule. */
.module hr { display: block; height: 1px; width: 100%; background: var(--ink); border: 0; margin: 48px 0; }
.module section h3 { margin: 0 0 28px; font-weight: 700; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; }

.figures {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; width: 92.5%; align-items: start; margin-bottom: 40px;
}
.figures figure { margin: 0; }
.figures .photo { display: block; width: 100%; height: auto; }

/* The two ways into Art Jakarta, side by side: enough to compare and no more. */
.categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 92.5%; }
.category { border: 1px solid var(--line); padding: 24px 26px 26px; display: flex; flex-direction: column; }
.category-name { font-weight: 700; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px; }
.category-who { margin: 0 0 14px; }
.category-price { margin: 0 0 6px; font-weight: 700; }
.category .go { margin-top: auto; padding-top: 22px; margin-bottom: 0; }
.category-mine { border-color: var(--ink); }
.category-closed { color: var(--muted); }
.category-price.muted { font-weight: 400; }
.category-name .card-badge { margin-left: 10px; vertical-align: middle; }

table.dates, table.rates { border-collapse: collapse; width: 92.5%; margin-bottom: 14px; }
.dates td { padding: 7px 20px 7px 0; vertical-align: top; }
.dates td.day { white-space: nowrap; width: 180px; }

.rates th, .rates td { text-align: left; padding: 9px 20px 9px 0; }
.rates th { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.rates td { border-bottom: 1px solid var(--line); }
.rates .num { font-variant-numeric: tabular-nums; }
.caption { font-size: 12px; letter-spacing: .6px; color: var(--muted); margin: 0 0 8px; }

.entitlements { width: 85%; }
.entitlements ul { margin: 0; padding-left: 18px; }
.entitlements li { margin-bottom: 7px; }

/* ---------- a page of prose: the terms ---------- */
/* The legacy terms carry their own h3/h4 hierarchy and rules between parts;
   sized to sit under the module's h2 rather than compete with it. */
.page-body { width: 85%; }
.page-body h3 { margin: 40px 0 18px; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; }
.page-body h3:first-child { margin-top: 0; }
.page-body h4 { margin: 24px 0 8px; font-size: 14px; letter-spacing: 1px; }
.page-body p { margin: 0 0 14px; }
.page-body hr { display: block; height: 1px; width: 100%; background: var(--line); border: 0; margin: 36px 0; }

/* ---------- footer ---------- */
/* Indented past the wordmark rail. The rail is fixed and sits above the footer,
   so on a short page — a sign-in form, say — a footer starting at x:0 loses its
   first links underneath it. */
.footer { background: var(--paper); width: 100%; margin-top: 60px; padding: 9px 20px; flex-shrink: 0; }

.footer p {
  margin: 0; display: flex; gap: 30px; flex-wrap: wrap; align-items: baseline;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}

.footer a { text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer .copyright { margin-left: auto; color: var(--faint); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-bar {
    position: static; width: 100%; min-height: 0;
    align-items: center; justify-content: flex-start;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
  }

  /* Laid on its side to read across the bar. A rotation does not change the
     element's layout box, so the link is given the final visual dimensions and
     the mark is rotated inside it — otherwise a 26px-wide, 130px-tall box would
     push the bar open to five times its height. */
  .nav-bar .wordmark-link {
    position: relative; width: 130px; height: 26px; margin: 0;
  }

  .nav-bar .wordmark {
    position: absolute; top: 50%; left: 50%;
    width: auto; height: 130px;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .wrapper { padding: 16px 16px 0; }
  .module { padding: 22px 20px 34px; }
  .module.breadcrumb { padding: 16px 20px; }
  .flash { padding: 14px 20px; }
  .intro { max-width: none; margin-bottom: 32px; }
  h2 { font-size: 18px; }

  .pair, .pair-narrow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pair .field, .pair-narrow .field { margin-bottom: 20px; }

  .fairs { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .body-copy, .entitlements, .figures, .categories, table.dates, table.rates, .page-body { width: 100%; }
  .figures, .categories { grid-template-columns: minmax(0, 1fr); }
  .dates td.day { width: auto; }
  .module hr { margin: 36px 0; }

  /* The rail is no longer fixed here, so the indent comes back off. */
  .footer { padding: 22px 16px; margin-top: 40px; }
  .footer .copyright { margin-left: 0; }
}

/* ---------- the exhibitor profile ---------- */
.profile-section h3 { margin-bottom: 14px; }
.profile-note { margin: 0 0 22px; max-width: 62ch; font-size: 12.5px; letter-spacing: .5px; color: var(--muted); line-height: 1.7; }
.profile-empty { margin: 0 0 18px; color: var(--muted); }

.summary { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 20px; margin: 0 0 22px; font-size: 13px; }
.summary dt { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.summary dd { margin: 0; }

.checklist-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist-item { font-size: 13px; letter-spacing: .5px; display: flex; gap: 10px; align-items: baseline; }
.checklist-item.done { color: var(--muted); }
.checklist-mark { width: 1em; }
.checklist-optional { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); }

.cards { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.card { border: 1px solid var(--line); padding: 18px 20px; }
.card-title { margin: 0 0 8px; font-weight: 700; letter-spacing: 1px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.card-badge { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; font-weight: 400; }
.card-body { margin: 0 0 14px; font-size: 12.5px; letter-spacing: .4px; line-height: 1.7; }
.card-actions { margin: 0; display: flex; gap: 18px; }

/* A card that is also a radio button's label — picking a different saved
   address/contact/organisation source, with the full record visible before
   you choose it, rather than a bare option in a dropdown. */
.card.selectable { cursor: pointer; display: block; }
.card.selectable input[type="radio"] { margin: 0 10px 0 0; }
.card.selectable:has(input:checked) { border-color: var(--accent); }

.radio-option { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 13px; letter-spacing: .4px; cursor: pointer; }
.radio-option input[type="radio"] { margin: 0; }

/* A file the gallery gave us: its name, its size, and a way to get it back. */
.file-row { margin: 0 0 20px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; font-size: 13px; letter-spacing: .4px; }
.file-size { color: var(--muted); font-size: 11.5px; letter-spacing: 1px; }

.small-button.danger { border-color: var(--danger); color: var(--danger); }
.small-button.danger:hover { background: var(--danger); color: var(--paper); }

.profile-prompt {
  border-left: 3px solid var(--accent); background: var(--field); padding: 14px 20px; margin: 0 0 32px;
  font-size: 12.5px; letter-spacing: .5px; line-height: 1.7; max-width: 70ch;
}
.profile-prompt a { display: block; margin-top: 4px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 10px; text-decoration: none; }

@media (max-width: 720px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .summary { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .summary dd { margin-bottom: 10px; }
}

/* ---------- the application form ---------- */
.apply-form section h3 { margin-bottom: 14px; }
.missing { color: var(--muted); font-style: italic; }
.terms-box {
  max-height: 320px; overflow-y: auto; border: 1px solid var(--line); padding: 18px 22px; margin: 0 0 18px;
  font-size: 12.5px; line-height: 1.7; letter-spacing: .3px; background: var(--paper);
}
.terms-box h1, .terms-box h2, .terms-box h3 { font-size: 13px; letter-spacing: 1px; margin: 18px 0 8px; }
.terms-accept label { display: flex; gap: 10px; align-items: baseline; font-size: 13px; letter-spacing: .5px; }
.terms-accept input { margin: 0; }
.radio-group { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.radio-group label { display: flex; align-items: center; gap: 8px; }
.pass-table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
.pass-table th { text-align: left; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.pass-table td { padding: 6px 10px; vertical-align: middle; }
.pass-table .pass-no { width: 36px; color: var(--muted); }
.pass-table td input[type="text"] { width: 100%; }
.questions { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 13px; }
.questions th { text-align: left; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.questions td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid var(--line); }
.questions .yn { width: 48px; text-align: center; vertical-align: middle; }
.artworks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.artworks img { width: 100%; height: auto; display: block; }