/* ============================================================
   OokySpooky Consent — app styles
   Builds on /brand/tokens.css (colours, fonts, spacing). Component styles mirror the
   website (buttons, cards, rules) but forms favour legibility: these are filled in by
   clients on phones and a studio tablet, not skimmed.
   ============================================================ */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* velvet stage, as on the website */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 500px at 12% -10%, #2d0f3f 0%, transparent 60%),
    radial-gradient(1100px 600px at 110% 10%, #1c0926 0%, transparent 55%),
    radial-gradient(800px 800px at 50% 130%, #1d0a2a 0%, transparent 60%);
}
header.site, main, footer.site { position: relative; z-index: 1; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.02em;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(40px, 7vw, 72px); }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: clamp(22px, 3vw, 28px); }
p { margin: 0 0 1em; color: var(--ink-2); }
a { color: var(--aub-soft); text-decoration: none; }
a:hover { color: var(--aub-glow); }
::selection { background: var(--aub-2); color: #fff; }
:focus-visible { outline: 2px solid var(--aub-glow); outline-offset: 3px; }

.eyebrow {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--aub-soft);
}
.lead {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: var(--ink);
}
.muted { color: var(--ink-3); }
.center { text-align: center; }

/* ---------- ornamental rule ---------- */
.rule {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  color: var(--aub-soft);
  margin: 18px auto;
}
.rule .line {
  flex: 0 1 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.rule .dot {
  width: 6px; height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}

/* ---------- layout ---------- */
header.site {
  padding: 24px 16px 8px;
  text-align: center;
}
header.site .brand img {
  height: clamp(56px, 9vw, 84px);
  width: auto;
}
main {
  flex: 1;
  width: 100%;
  max-width: var(--max-r);
  margin: 0 auto;
  padding: 24px 16px 64px;
}
footer.site {
  padding: 24px 16px 32px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- card (matches the website's contact card) ---------- */
.card {
  position: relative;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.card::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.card > * { position: relative; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 14px 26px;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .25em;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: filter .2s, transform .2s, color .2s, border-color .2s;
}
.btn:hover { color: var(--aub-glow); transform: translateY(-1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--aub-2), var(--aub));
  border-color: var(--aub-2);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 16px 40px -16px rgba(122,58,160,.6);
}
.btn.primary:hover { color: #fff; filter: brightness(1.08); }
.btn.ghost { color: var(--ink-2); border-color: var(--line-2); }
.btn.ghost:hover { color: var(--ink); border-color: var(--aub-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- forms ---------- */
.form { display: grid; gap: 20px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.field .hint { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px; /* 16px stops iOS zooming into fields */
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--aub-soft);
  background: rgba(122,58,160,.08);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #e0707a; }
.field .error { display: block; margin-top: 6px; font-size: 14px; color: #f0a0a8; }

/* ---------- notices ---------- */
.notice {
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--aub-soft);
  background: rgba(122,58,160,.08);
  margin-bottom: 20px;
}
.notice.error { border-left-color: #e0707a; background: rgba(224,112,122,.08); }
.notice.ok { border-left-color: #7fc7a0; background: rgba(127,199,160,.08); }

/* ---------- dev-only error detail ---------- */
pre.trace {
  overflow-x: auto;
  padding: 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
  background: rgba(0,0,0,.4);
  border: 1px solid var(--line);
}

/* ---------- admin ---------- */
.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.small { font-size: 14px; }
.card + .card { margin-top: 24px; }
.card h3 { margin-top: 1.4em; }
.card > h3:first-child { margin-top: 0; }
.card form.form > h3:first-of-type { margin-top: .6em; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.admin-nav {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 22px;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.admin-nav a { color: var(--ink-2); }
.admin-nav a:hover { color: var(--aub-glow); }

form.inline { display: inline; margin: 0; }
button.link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--aub-soft); text-transform: inherit; letter-spacing: inherit;
}
button.link:hover { color: var(--aub-glow); }
.admin-nav button.link { color: var(--ink-2); }

.code-input {
  font-family: var(--f-mono) !important;
  font-size: 24px !important;
  letter-spacing: .3em;
  text-align: center;
}

.qr {
  display: flex; justify-content: center;
  margin: 8px auto 4px;
}
/* QR codes need a light background to scan reliably. */
.qr img { background: #fff; padding: 10px; width: 220px; height: 220px; }
.manual-key summary { cursor: pointer; color: var(--aub-soft); }
code.secret {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: .1em;
  padding: 8px 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--line-2);
  word-break: break-all;
}

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 8px; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; }

.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 15px; }
table.list th {
  text-align: left; padding: 8px 10px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
table.list td { padding: 12px 10px; border-bottom: 1px dashed var(--line); vertical-align: top; }
table.list td.actions { white-space: nowrap; text-align: right; }
table.list td.actions form + form { margin-left: 14px; }

.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 13px; border: 1px solid var(--line-2); white-space: nowrap;
}
.pill.ok   { border-color: rgba(127,199,160,.5); color: #a9dcc0; }
.pill.wait { border-color: var(--line-aub); color: var(--aub-soft); }
.pill.off  { color: var(--ink-3); }

.link-box p { margin-bottom: 10px; color: var(--ink); }
.copy-row { display: flex; gap: 10px; }
.copy-row input {
  flex: 1; min-width: 0; min-height: 48px; padding: 10px 12px;
  font-family: var(--f-mono); font-size: 14px;
  background: rgba(0,0,0,.35); border: 1px solid var(--line-2); color: var(--ink);
}

/* Phones: each table row becomes a stacked block so nothing hides off to the side. */
@media (max-width: 640px) {
  table.list thead { display: none; }
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list tr { padding: 14px 0; border-bottom: 1px dashed var(--line-2); }
  table.list td { padding: 3px 0; border: 0; }
  table.list td.actions { text-align: left; padding-top: 10px; }
  table.list td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--ink-3);
  }
}

/* ---------- studio ---------- */
.crumbs { font-size: 14px; color: var(--ink-3); margin: 0 0 14px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.tile {
  display: block; padding: 20px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
  transition: border-color .2s, transform .2s;
}
.tile:hover { border-color: var(--line-aub); color: var(--ink); transform: translateY(-2px); }
.tile h3 { margin: 0 0 6px; }
.tile p { margin: 0 0 8px; font-size: 15px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.field.check { align-self: end; }
.field.check label { display: flex; gap: 10px; align-items: center; font-weight: 400; cursor: pointer; }
.field.check input[type=checkbox] { width: 22px; height: 22px; min-height: 0; accent-color: var(--aub-2); }
.field input.short { max-width: 140px; }
.field textarea { line-height: 1.5; resize: vertical; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 6px 0; }
ul.plain form.inline { margin-left: 10px; }
ul.conditions { columns: 2 220px; padding-left: 20px; }
p.wording { color: var(--ink); white-space: normal; }
.notice form { margin-top: 10px; }
.notice p:last-child { margin-bottom: 0; }

/* ---------- client consent form ---------- */
[hidden] { display: none !important; }
.card.intro h1 { font-size: clamp(40px, 8vw, 64px); }
.card.step { margin-top: 20px; }
.card.step h2 { font-size: clamp(26px, 4vw, 34px); display: flex; align-items: center; gap: 12px; }
.step-no {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  font-family: var(--f-mono); font-size: 15px;
  border: 1px solid var(--line-aub); color: var(--aub-soft);
}
/* Even spacing between everything in a step; grid rows align their columns from the top. */
.card.step > * + * { margin-top: 18px; }
.card.step > h2 + * { margin-top: 0; }
.consent-form .grid-2 { align-items: start; }
.consent-form .grid-2 > .field { margin: 0; }
.hint.suggestion { margin: 6px 0 0; }
.short-date { max-width: 220px; }
#error-summary ul { margin: 0; padding-left: 20px; }
#error-summary a { color: #f0a0a8; text-decoration: underline; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 500; margin-bottom: 10px; padding: 0; }
.service-group h3 { font-size: 22px; margin: 18px 0 8px; }
.service, .condition, .field.tick label {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
}
.service, .condition {
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--line-2); background: rgba(0,0,0,.25);
}
.service:has(input:checked), .condition:has(input:checked) {
  border-color: var(--aub-soft); background: rgba(122,58,160,.12);
}
.conditions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 10px; margin: 6px 0 14px; }
.consent-form input[type=checkbox] {
  flex: none; width: 24px; height: 24px; min-height: 0; margin: 1px 0 0;
  accent-color: var(--aub-2);
}
.field.tick label { font-weight: 400; color: var(--ink); line-height: 1.5; }
.field.tick { padding: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.18); }
.field.tick.has-error { border-color: #e0707a; }

.field.signature label { margin-bottom: 8px; }
.sig-box {
  position: relative; height: 200px;
  background: #f6f1ea; border: 1px solid var(--line-2);
  touch-action: none;
}
.field.signature.has-error .sig-box { border-color: #e0707a; box-shadow: 0 0 0 1px #e0707a; }
.sig-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.sig-line {
  position: absolute; left: 6%; right: 6%; bottom: 44px;
  border-bottom: 1px dashed #b9aec4; pointer-events: none;
}
.sig-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.btn.wide { width: 100%; margin-top: 22px; }

.reference {
  font-family: var(--f-mono); font-size: clamp(28px, 7vw, 40px);
  letter-spacing: .15em; color: var(--ink); margin: 0 0 16px;
}
.ref { font-family: var(--f-mono); letter-spacing: .08em; white-space: nowrap; }
.inline-form { grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 640px) { .inline-form { grid-template-columns: 1fr; } }
.qr-details { margin-top: 12px; }
.qr-details summary { cursor: pointer; color: var(--aub-soft); }

.hint { font-size: 14px; color: var(--ink-3); }

/* ---------- records ---------- */
.search-row { display: grid; grid-template-columns: 1fr 200px auto; gap: 14px; align-items: end; margin-bottom: 20px; }
@media (max-width: 640px) { .search-row { grid-template-columns: 1fr; } }
.pager { margin-top: 16px; }
.form-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.form-head h2 { margin-bottom: 4px; }
.pill.big { font-size: 15px; padding: 6px 14px; }
.card.attention { border-color: rgba(224,112,122,.6); }
.flag { color: #f6c1c6; background: rgba(224,112,122,.15); padding: 1px 6px; }
p.statement { display: flex; gap: 10px; color: var(--ink); }
.yes { color: #7fc7a0; font-weight: 700; flex: none; }
.no { color: #f0a0a8; font-weight: 700; flex: none; }
img.sig-img { display: block; max-width: 420px; width: 100%; height: auto; background: #f6f1ea; border: 1px solid var(--line-2); padding: 6px; }
.danger-zone { border-color: rgba(224,112,122,.3); }
.btn.danger { color: #f0a0a8; border-color: rgba(224,112,122,.6); }
.card dl.facts { margin-top: 16px; }

/* ---------- kiosk ---------- */
.kiosk-start { padding-top: 48px; padding-bottom: 48px; }
.kiosk-start h1 { font-size: clamp(48px, 9vw, 88px); }
.btn.big-btn { font-size: 15px; padding: 22px 40px; margin-top: 12px; }
.kiosk-lock { text-align: center; margin-top: 28px; }
.keypad-form { max-width: 320px; margin: 18px auto 10px; }
.pin-display {
  width: 100%; min-height: 56px; text-align: center;
  font-family: var(--f-mono); font-size: 28px; letter-spacing: .5em;
  background: rgba(0,0,0,.35); border: 1px solid var(--line-2); color: var(--ink);
}
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 6px; }
.keypad button {
  min-height: 64px; font-family: var(--f-mono); font-size: 26px;
  background: var(--bg-3); color: var(--ink); border: 1px solid var(--line-2); cursor: pointer;
  touch-action: manipulation;
}
.keypad button:active { background: var(--aub); }
.keypad button.muted-key { font-size: 15px; color: var(--ink-3); }
.operator-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 10px; }
.operator-choice input[type=radio] { width: 22px; height: 22px; accent-color: var(--aub-2); flex: none; }
.idle-overlay {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: rgba(5, 3, 8, .85);
}
.idle-overlay .card { max-width: 420px; }

/* Checkboxes and radios in any form (client form, counter-sign, kiosk) keep their own
   size: the text-input rules above (full width, 48px tall) must never apply to them. */
.field input[type=checkbox],
.field input[type=radio] {
  flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; margin: 1px 0 0;
  accent-color: var(--aub-2);
}
.field.tick label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--ink); line-height: 1.5; cursor: pointer; }
.field.tick { padding: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.18); }
.operator-choice .service { align-items: center; }
/* Option cards (services, conditions, operators) inside a .field must beat ".field label". */
.field label.service, .field label.condition {
  display: flex; gap: 12px; align-items: center; margin-bottom: 8px; font-weight: 400;
}

/* ---------- privacy + checklist ---------- */
.privacy h2 { font-size: clamp(24px, 3.4vw, 30px); margin-top: 1.4em; }
.privacy ul { padding-left: 20px; color: var(--ink-2); }
.privacy li { margin-bottom: 8px; }
footer.site a { color: var(--ink-3); text-decoration: underline; }
ul.checklist { list-style: none; padding: 0; margin: 0; }
ul.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--line); }
ul.checklist .mark {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: #7fc7a0; font-weight: 700;
}
ul.checklist li.done .mark { border-color: rgba(127,199,160,.6); }
ul.checklist li.done .what { color: var(--ink-3); }
ul.checklist .what { flex: 1; }
ul.checklist .what .small { display: block; }

.text-failed { color: #f0a0a8; }
.inline-form { grid-template-columns: 1fr; }

/* Address block: stacked fields with the same rhythm as the rest of the step. */
fieldset.address legend { margin-bottom: 8px; font-weight: 500; }
fieldset.address > * + * { margin-top: 14px; }
fieldset.address .grid-2 > .field { margin: 0; }
.short-postcode { max-width: 180px; text-transform: uppercase; }

/* ---------- address finder ---------- */
.address-finder .combo { position: relative; }
.address-finder ul[role=listbox] {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 300px;
  overflow-y: auto;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: var(--bg-2);
  border: 1px solid var(--aub-soft);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.address-finder li {
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.address-finder li:last-child { border-bottom: 0; }
.address-finder li[aria-selected=true],
.address-finder li:hover { background: rgba(122,58,160,.25); }
.address-finder li.none { color: var(--ink-3); cursor: default; background: none; }

/* ---------- send form (dashboard) ---------- */
.send-form .grid-2 { align-items: start; }
.send-form .grid-2 > .field { margin: 0; }
.check-inline { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 15px; font-weight: 400; cursor: pointer; }
.field .check-inline { display: flex; margin-bottom: 0; font-weight: 400; }
.check-inline input[type=checkbox] { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; accent-color: var(--aub-2); }
.service-picker { border: 1px solid var(--line-2); padding: 12px 16px; }
.service-picker summary { cursor: pointer; font-weight: 500; }
.service-picker[open] summary { margin-bottom: 8px; }
.service-picker fieldset { border: 0; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 16px; }
.service-picker legend { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.service-picker .check-inline { margin-top: 8px; }

/* ---------- piercings chosen by the studio ---------- */
.booked { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.booked li { padding: 12px 14px; border: 1px solid var(--line-aub); background: rgba(122,58,160,.12); font-weight: 500; }

/* "Same as…" picker in the Services list, linking a new Square item to an existing service. */
table.list td.actions select {
  max-width: 11em;
  padding: 4px 8px;
  margin-left: 14px;
  background: rgba(0,0,0,.35);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 0;
  font: inherit;
  font-size: 14px;
}
table.list td.actions select:focus { outline: none; border-color: var(--aub-soft); }

/* Diary */
table.diary-day td.time { width: 4.5em; font-variant-numeric: tabular-nums; color: var(--ink-2); }
table.diary-day tr.past td { opacity: .55; }
table.slot-grid th, table.slot-grid td { text-align: center; padding: 6px 4px; }
table.slot-grid th[scope=row] { text-align: left; white-space: nowrap; padding-right: 12px; }
table.slot-grid input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--aub-soft); }

/* Dropdown lists: some browsers (Chrome on Windows) draw the open list with system colours,
   which with our light text made the options unreadable. */
select option, select optgroup { background-color: var(--bg-2); color: var(--ink); }
table.diary-day td.time .who { display: block; font-size: 12px; color: var(--ink-3); font-variant-numeric: normal; }
.error-text { color: #f0a0a8; font-weight: 500; }

/* ---- public booking (B5) ---------------------------------------------------------- */
.button-row.centred { justify-content: center; }
.choice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.choice {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px;
  border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); text-decoration: none;
}
.choice:hover, .choice:focus-visible { border-color: var(--aub-soft); color: var(--ink); }
.choice strong { font-size: 18px; }
.service-list { border: 0; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.service-list legend { font-weight: 600; margin-bottom: 6px; }
.day + .day { margin-top: 18px; }
.day h3 { margin: 0 0 10px; font-size: 18px; }
.times { display: flex; flex-wrap: wrap; gap: 10px; }
.times .btn { min-width: 84px; justify-content: center; }
.terms { max-height: 280px; overflow-y: auto; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 15px; }
.terms p { margin: 0 0 10px; }
.check-inline input[type=radio] { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; accent-color: var(--aub-2); }

/* ---- dashboard: upcoming appointments -------------------------------------------- */
.upcoming-day { margin: 18px 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.upcoming { display: flex; gap: 16px; align-items: baseline; padding: 10px 12px; border-top: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.upcoming:hover, .upcoming:focus-visible { background: rgba(255, 255, 255, .03); color: var(--ink); }
.upcoming-time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.2em; }
.upcoming .pill { margin-left: 4px; }