/* coachd shared skin: the design system, skinned to provolley.com.au. Ported from
   demo/demo.css. Each app's HTML sets its own body class: coach, admin or landing.
   1 tokens  2 reset and type  3 apps and chrome  4 forms  5 buttons
   6 cards and rows  7 tables  8 status and blocks  9 sheet  10 focus and motion */

/* ================================================================== */
/* 1. Tokens: one light theme. The values are the site's own            */
/*    (app/globals.css and the build guide), not eyeballed.             */
/* ================================================================== */

:root {
  color-scheme: light;

  --navy: #0b1f4d;   /* band, rail, tab bar, cost card; text on tiles; headings on light */
  --gold: #f5c200;   /* the CTA, the eyebrow, the last word of a band title, the selected bar, the active tab */
  --ink: #0d1b2a;    /* body text on light */
  --slate: #5a6b8c;  /* secondary text, section and field labels */
  --mist: #eef2f7;   /* page ground; the rule between rows inside a card */
  --white: #ffffff;
  --success: #22c55e;
  --danger: #ef4444;

  --border: rgba(90, 107, 140, 0.15);         /* card edge: the site's border-slate/15 */
  --input-border: rgba(90, 107, 140, 0.35);   /* a standalone input on a white card */
  --divider: var(--mist);                     /* rows inside a card */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);    /* shadow-sm */
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.12); /* the site's header */
  --navy-tint: rgba(11, 31, 77, 0.08);        /* the Approved pill */
  --ok-bg: #dcfce7;
  --ok-ink: #166534;
  --warn-bg: #fef3c7;
  --warn-ink: #92400e;

  --radius: 12px;    /* cards */
  --radius-s: 4px;   /* buttons, pills, inputs */

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 28px;
  --s7: 40px;

  --font: "Geist", -apple-system, system-ui, sans-serif;
  --control: 48px;
  --motion: 140ms;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M2 4l4 4 4-4%27 fill=%27none%27 stroke=%27%235a6b8c%27 stroke-width=%271.5%27/%3E%3C/svg%3E");
}

/* ================================================================== */
/* 2. Reset and type                                                    */
/* ================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--mist);
  color: var(--ink);
  font: 16px/1.4 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body.admin,
body.landing {
  font-size: 14px;
  line-height: 1.45;
}

h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--navy);
}

h2, h3 { margin: 0; font-size: inherit; font-weight: 600; }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; }

.section-label {
  margin: var(--s5) 0 var(--s2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.section-label:first-child { margin-top: 0; }

.title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s1);
}

.context { margin: var(--s1) 0 var(--s5); color: var(--slate); }
.screen > h1 { margin-bottom: var(--s5); }
.screen > h1 + .context, .screen > .title-row + .context { margin-top: calc(var(--s5) * -1 + var(--s1)); }
.screen > .title-row { margin-bottom: var(--s5); }

.sub { color: var(--slate); font-size: 13px; }
.num, table td, table th { font-variant-numeric: tabular-nums; }
.num { white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.r { text-align: right; }
.muted { color: var(--slate); }
.small { font-size: 12px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

pre.csv {
  margin: var(--s3) 0 0;
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--mist);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
}

/* ================================================================== */
/* 3. Apps and chrome                                                   */
/* ================================================================== */

/* Landing: mist ground, one white card, the dark logo */

body.landing { background: var(--mist); }

body.landing #app {
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--s7) var(--s4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.landing-card {
  padding: var(--s6) var(--s5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.landing .logo { display: block; height: 40px; width: auto; margin-bottom: var(--s5); }
.landing p { margin-bottom: var(--s5); color: var(--slate); }
.landing .actions { margin-bottom: var(--s4); }
.landing .note { margin-top: var(--s4); margin-bottom: 0; color: var(--slate); font-size: 13px; min-height: 20px; }

/* Sign-in: one labelled email input above the gold button; 16px so iOS does not zoom */
.landing .signin-label {
  display: block;
  margin-bottom: var(--s2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.landing #code-form { margin-top: var(--s5); }
.landing input[type="email"], .landing input#code { display: block; width: 100%; min-height: var(--control); margin-bottom: var(--s3); font-size: 16px; }
.landing form .actions { margin-bottom: 0; }

/* Coach: the phone column on mist */

body.coach { background: var(--mist); }

body.coach #app {
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--mist);
}

@media (min-width: 431px) {
  body.coach #app { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}

/* The band: navy, full width of the column. Row 1 is the logo (or a back link) and
   the eyebrow; row 2 is the title with its last word in gold. app.js builds it from
   the data-* the screen carries. */

.band {
  position: relative;
  z-index: 1;
  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.band-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 28px;
}

.band-logo { display: block; height: 28px; width: auto; }

.band .eyebrow {
  margin-left: auto;
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.band-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 28px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  text-decoration: none;
}

.band-back:hover { color: var(--white); text-decoration: underline; }

.band h1, .band-title {
  margin: var(--s4) 0 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--white);
  overflow-wrap: anywhere;
}

.band h1 .gold { color: var(--gold); }

/* Content under the band; bottom padding clears the tab bar. */

.coach-body {
  padding-top: var(--s4);
  padding-right: max(var(--s4), env(safe-area-inset-right));
  padding-bottom: calc(64px + var(--s6) + env(safe-area-inset-bottom));
  padding-left: max(var(--s4), env(safe-area-inset-left));
}

/* Inline SVG line glyphs (tab bar, back link): stroke 1.5, currentColor, no fill */

.icon { display: inline-flex; flex: none; line-height: 0; }
.icon svg { display: block; }

/* Tab bar: navy, fixed to the bottom of the phone column. Log, History, Profile. */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--navy);
}

.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 8px 0 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.tabbar a:hover { color: var(--white); }
.tabbar a[aria-current="page"] { color: var(--gold); }

/* Admin: navy rail + content on mist */

body.admin { background: var(--mist); }

body.admin #app {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100dvh;
}

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh; /* full-height navy column on every admin page */
  max-height: 100dvh;
  overflow-y: auto;
  padding: var(--s5) 0 var(--s6);
  background: var(--navy);
  color: var(--white);
}

.rail .logo { display: block; padding: var(--s1) var(--s5); margin-bottom: var(--s6); }
.rail .logo img { display: block; height: 32px; width: auto; }

.rail-nav { display: flex; flex-direction: column; }

.rail-nav a {
  display: block;
  padding: 10px var(--s5);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

.rail-nav a:hover { color: var(--white); }
.rail-nav a[aria-current="page"] { color: var(--white); box-shadow: inset 3px 0 0 var(--gold); }

.content {
  max-width: 1080px;
  padding: var(--s7);
  padding-bottom: 80px;
  min-width: 0;
}

@media (max-width: 800px) {
  body.admin #app { display: block; }
  .rail {
    position: static;
    height: auto;
    max-height: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--s2);
    padding: var(--s3) var(--s4);
  }
  .rail .logo { margin: 0 var(--s3) 0 0; padding: var(--s1) 0; }
  .rail .logo img { height: 28px; }
  .rail-nav { flex-direction: row; flex-wrap: wrap; }
  .rail-nav a { padding: var(--s2) 10px; }
  .rail-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold); }
  .content { padding: var(--s5) var(--s4) 80px; }
}

/* Sheet: a document on a mist desk, under a navy bar */

.sheet-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.sheet-bar .logo { display: block; height: 28px; width: auto; }
.sheet-bar .btn.text, .sheet-bar .back { width: auto; min-height: 32px; padding: 0; gap: var(--s1); color: var(--white); }
.sheet-bar .btn.text:hover { text-decoration: underline; }
.sheet-bar .sub { color: rgba(255, 255, 255, 0.7); }
.sheet-canvas { padding: var(--s6) var(--s4) 80px; overflow-x: auto; }

/* A screen that failed to render shows why instead of a blank page. */
.render-error {
  padding: var(--s3) var(--s4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 4px 0 0 var(--danger), var(--shadow);
}
.render-error pre { margin: var(--s2) 0 0; white-space: pre-wrap; }

/* ================================================================== */
/* 4. Forms                                                             */
/* ================================================================== */

input, select, textarea, button { font: inherit; color: inherit; border-radius: 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
input[type="time"], input[type="search"], select, textarea {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  appearance: none;
  -webkit-appearance: none;
}

select {
  padding-right: 28px;
  background-image: var(--chevron);
  background-position: right 8px center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

/* iOS draws date and time values in their own box; keep them left and full height. */
input::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }

textarea { padding: var(--s2) 10px; line-height: 1.4; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--slate); opacity: 1; }
input:disabled, select:disabled { color: var(--slate); background: var(--mist); }

/* Field rows inside a card: label 88px left, control right, a mist rule between rows */

.field {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s4);
  border-bottom: 1px solid var(--divider);
}

.field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.field select { padding-right: 20px; background-position: right 0 center; }
.field textarea { padding: var(--s3) 0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; }
.field:focus-within { outline: 2px solid var(--navy); outline-offset: -2px; }
.field .value { min-height: 46px; display: flex; align-items: center; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.field .hint { grid-column: 1 / -1; padding-bottom: var(--s2); margin-top: calc(var(--s2) * -1); }

body.coach .field input,
body.coach .field select,
body.coach .field .value { font-size: 16px; }

/* Checkbox row (Active toggle) */

.check {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: 0 var(--s4);
  cursor: pointer;
}

.check input {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--navy);
  border-radius: var(--radius-s);
  background: var(--white);
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
}

.check input::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--navy); transform: scale(0); }
.check input:checked::before { transform: scale(1); }

/* Chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--divider);
}

.chip {
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--navy);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.chip[aria-pressed="true"] { background: var(--navy); color: var(--white); }
body.admin .chip { min-height: 36px; font-size: 14px; }

/* Segment: the Club | School pair */

.segment { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--divider); }
.segment:not(.box > *) { padding: 0; border-bottom: 0; }

.segment button {
  flex: 1;
  min-height: var(--control);
  padding: 0 var(--s3);
  border: 1px solid var(--navy);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
}

.segment button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
body.admin .segment button { min-height: 36px; flex: 0 1 auto; }

/* Readout and stepper */

.readout {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--control);
  padding: var(--s2) 0;
  font-variant-numeric: tabular-nums;
}

.readout .stepper { margin-left: auto; }
.readout .sub { white-space: nowrap; }

.stepper { display: flex; gap: var(--s1); }

.stepper button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.stepper button:disabled { color: var(--slate); border-color: var(--border); cursor: default; }

/* Filters (admin): a white card holding a row of labelled controls */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.filters label, .form-row label {
  display: grid;
  gap: var(--s1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.filters select, .filters input, .form-row select, .form-row input {
  min-height: 36px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

.filters select, .filters input { min-width: 120px; }
.filters .btn { min-height: 36px; }
.filters .grow { flex: 1; }

/* Inline form row (admin invite) */

.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s2) var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--divider);
}

/* ================================================================== */
/* 5. Buttons: 4px radius, 600, 15px. Primary gold, secondary navy      */
/*    outline, text navy. Full width on phone, inline on admin.         */
/* ================================================================== */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--control);
  padding: 0 var(--s4);
  border: 1px solid var(--navy);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--mist); }
.btn.primary { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.btn.primary:hover { background: var(--gold); }
.btn.text { border-color: transparent; background: transparent; color: var(--navy); }
.btn.text:hover { background: transparent; text-decoration: underline; }
.btn:disabled, .btn[aria-disabled="true"] { border-color: var(--border); background: var(--white); color: var(--slate); cursor: default; pointer-events: none; }
.btn.primary:disabled, .btn.primary[aria-disabled="true"] { border-color: var(--mist); background: var(--mist); color: var(--slate); }
.btn.text:disabled, .btn.text[aria-disabled="true"] { border-color: transparent; background: transparent; }

.pair { display: flex; gap: var(--s3); }
.pair .btn { flex: 1; }
.actions { display: grid; gap: var(--s2); }
.screen > .btn, .screen > .pair, .screen > .actions { margin-top: var(--s3); }

body.admin .btn,
body.landing .btn {
  display: inline-flex;
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
}

body.landing .actions .btn { min-height: var(--control); font-size: 15px; }
body.admin .actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
body.admin .pair { display: inline-flex; }
body.admin .pair .btn { flex: 0 1 auto; }

/* Text-button-only rows (Rename, Up, Down, Archive) sit in a .row-tools group */

.row-tools { display: flex; gap: var(--s1); align-items: center; margin-left: auto; }
.row-tools .btn.text { width: auto; min-height: 28px; padding: 0 var(--s2); font-size: 13px; }
.row-tools .reveal { visibility: hidden; }
.row:hover .row-tools .reveal, .row:focus-within .row-tools .reveal { visibility: visible; }

/* ================================================================== */
/* 6. Cards and rows: white, 12px radius, slate/15 edge, shadow-sm;     */
/*    rows inside are divided by 1px mist                               */
/* ================================================================== */

.box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.box + .box { margin-top: var(--s3); }
.box + .btn, .box + .pair, .box + .actions, .box + .readout { margin-top: var(--s3); }
.box > *:last-child { border-bottom: 0; }

.row {
  display: block;
  width: 100%;
  padding: 10px var(--s4);
  border: 0;
  border-bottom: 1px solid var(--divider);
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}

.row .sub, .row .kv, .row .footnote, .row p { font-weight: 400; }
button.row, a.row { cursor: pointer; }
button.row:hover, a.row:hover { background: var(--mist); }
.row .sub { display: block; }

.line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 24px;
}

.line .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.line .pill { margin-left: auto; align-self: center; }
.line .sub { display: inline; }

.total {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: 10px var(--s4);
  border-top: 1px solid var(--divider);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.total .label { flex: 1; color: var(--slate); font-weight: 400; }
.box > .row:last-of-type + .total { border-top: 0; }

.empty { padding: 14px var(--s4); color: var(--slate); }

.month-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin: var(--s5) 0 var(--s2);
  font-size: 15px;
  font-weight: 600;
}

.month-head:first-child { margin-top: 0; }
.month-head .num { font-weight: 400; color: var(--slate); }

/* Key/value list (profile snapshots, before/after) */

.kv {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s1) var(--s3);
  margin: 0;
  padding: 10px var(--s4);
  border-bottom: 1px solid var(--divider);
}

.kv:not(.box > *) { padding: 0; border-bottom: 0; }
.kv dt { color: var(--slate); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv.small { font-size: 12px; gap: 2px var(--s2); }

/* Two side-by-side columns (Categories) */

.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
@media (max-width: 800px) { .columns { grid-template-columns: minmax(0, 1fr); } }

/* Archived rows under a slate label */
.archived-label {
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--divider);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ================================================================== */
/* 7. Tables: a white card; slate uppercase header, mist rules,         */
/*    numbers right-aligned and tabular                                 */
/* ================================================================== */

.table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
}

.table-wrap + .btn, .table-wrap + .actions, .table-wrap + .sub { margin-top: var(--s3); }
.table-wrap + .sub { display: block; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }

th, td {
  padding: 10px var(--s4);
  border-bottom: 1px solid var(--divider);
  text-align: left;
  white-space: nowrap;
  vertical-align: baseline;
  font-weight: 400;
}

thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

th.r, td.r { text-align: right; }
td.wrap, th.wrap { white-space: normal; }
td .pill { vertical-align: middle; }
td.empty { color: var(--slate); white-space: normal; }

tbody tr:last-child td { border-bottom: 0; }
tfoot td { border-top: 1px solid var(--border); border-bottom: 0; font-weight: 600; }
tfoot .label, tfoot td:first-child { color: var(--slate); font-weight: 400; }

tr.pick { cursor: pointer; }
tr.pick:hover td { background: var(--mist); }
tr.pick:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

caption { text-align: left; padding: var(--s2) var(--s4); color: var(--slate); font-size: 12px; }

/* ================================================================== */
/* 8. Status, pills, blocks                                             */
/* ================================================================== */

/* Pills: 4px radius, 11px/700 uppercase. Tone by fill, never by border. */

.pill {
  display: inline-block;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--mist);
  color: var(--slate);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.pill.ok, .pill.ok-fill { background: var(--ok-bg); color: var(--ok-ink); }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill.navy { background: var(--navy-tint); color: var(--navy); }
.pill.bad { background: var(--danger); color: var(--white); }
.pill.muted { background: var(--mist); color: var(--slate); }

.status-line { min-height: 20px; margin: var(--s4) 0 0; color: var(--danger); font-size: 14px; }
.status-line:empty { margin: 0; min-height: 0; }

/* Alerts: a white card with a 4px gold bar down the left */

.alert {
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 4px 0 0 var(--gold), var(--shadow);
}

.alert .line { align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.alert .kv { margin-top: var(--s2); }
.alert .btn { width: auto; min-height: 36px; }
.alert + .alert { margin-top: calc(var(--s5) * -1 + var(--s2)); }

/* Timeline: a card, one row per step, a round navy marker */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.timeline li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 0 var(--s4);
  border-bottom: 1px solid var(--divider);
}

.timeline li:last-child { border-bottom: 0; }
.timeline .mark { width: 8px; height: 8px; flex: none; border: 1px solid var(--navy); border-radius: 50%; background: var(--navy); }
.timeline li.pending { color: var(--slate); }
.timeline li.pending .mark { border-color: var(--input-border); background: transparent; }
.timeline li.current .mark { background: transparent; }
.timeline .when { color: var(--slate); }

/* Progress: the thin 3-segment line at the top of the invite flow */

.progress { display: flex; gap: var(--s1); height: 3px; margin-bottom: var(--s6); }
.progress span { flex: 1; border-radius: 2px; background: var(--input-border); }
.progress span.done { background: var(--navy); }

/* Confirm: an inline sheet, not a modal; a white card, primary gold */

.confirm {
  margin-top: var(--s3);
  padding: var(--s4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.confirm p { margin-bottom: var(--s4); }

/* Invite panels (the title sits in the band) */

.panel:focus { outline: none; }
.panel > p { margin-bottom: var(--s5); }
.panel .box + p { margin-top: var(--s3); }
.panel .steps { margin: 0 0 var(--s5); padding-left: 20px; }
.panel .steps li { margin-bottom: var(--s1); }

/* Totals box (Total, Super, Package) */

.totals .line { padding: 10px var(--s4); border-bottom: 1px solid var(--divider); min-height: 40px; align-items: center; }
.totals .line:last-child { border-bottom: 0; }
.totals .line .label { flex: 1; color: var(--slate); }
.totals .line.strong { font-weight: 600; }
.totals .line.strong .label { color: var(--ink); }

/* Screen stubs while screens are being built */
.screen-stub h1 { margin-bottom: var(--s3); }

/* ================================================================== */
/* 9. Sheet: the invoice xlsx rendered in HTML, always on white.        */
/*    Unchanged by the skin: it is a paper document, so its colours     */
/*    are literal and it keeps the system stack, not the brand font.    */
/* ================================================================== */

.sheet {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--s7);
  background: #ffffff;
  color: #111111;
  border: 1px solid #d5d5d5;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color-scheme: light;
}

.sheet h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: #111111; }
.sheet h2 { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #6b6b6b; margin: 0 0 var(--s2); }

.sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s4) var(--s7);
  align-items: start;
  margin-bottom: var(--s6);
}

.sheet-head .party { display: grid; gap: 2px; }
.sheet-head .party .who { font-weight: 600; }
.sheet-head .party .k { color: #6b6b6b; }
.sheet-head .right { text-align: right; }
.sheet-head .org { font-weight: 600; font-size: 16px; }

.sheet table { width: 100%; border-collapse: collapse; margin-bottom: var(--s5); }
.sheet th, .sheet td { padding: 6px 8px; border: 1px solid #d5d5d5; white-space: nowrap; vertical-align: baseline; font-variant-numeric: tabular-nums; }
.sheet thead th { background: #f4f4f2; color: #111111; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.sheet td.wrap, .sheet th.wrap { white-space: normal; }
.sheet .r { text-align: right; }
.sheet .type { color: #6b6b6b; }
.sheet .category { font-weight: 600; }
.sheet tfoot td { font-weight: 600; background: #f4f4f2; color: #111111; border-top: 1px solid #d5d5d5; }

.sheet-blocks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--s7); align-items: start; }
.sheet-totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; border: 1px solid #d5d5d5; }
.sheet-totals > * { padding: 6px 8px; border-bottom: 1px solid #d5d5d5; }
.sheet-totals > :nth-last-child(-n + 2) { border-bottom: 0; }
.sheet-totals .v { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-totals .strong { font-weight: 600; background: #f4f4f2; }
.sheet .note { margin-top: var(--s5); color: #6b6b6b; font-size: 12px; }

@media (max-width: 700px) {
  .sheet { padding: var(--s5); }
  .sheet-head, .sheet-blocks { grid-template-columns: minmax(0, 1fr); }
  .sheet-head .right { text-align: left; }
}

@media print {
  body { background: #ffffff; }
  .tabbar, .sheet-bar { display: none; }
  .sheet-canvas { padding: 0; }
  .sheet { border: 0; max-width: none; padding: 0; }
}

/* ================================================================== */
/* 10. Focus and motion: 2px navy on light, 2px gold on navy            */
/* ================================================================== */

:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
a:focus-visible { outline-offset: 1px; }
.check input:focus-visible { outline-offset: 2px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }

.band :focus-visible,
.tabbar a:focus-visible,
.rail :focus-visible,
.sheet-bar :focus-visible,
.cost :focus-visible,
.tiles button[aria-pressed="true"]:focus-visible,
.chip[aria-pressed="true"]:focus-visible,
.segment button[aria-pressed="true"]:focus-visible { outline-color: var(--gold); }

.tabbar a:focus-visible, .rail-nav a:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: no-preference) {
  .chip, .segment button, .btn, .pill, button.row, a.row, .rail-nav a, .tabbar a, .tiles button, tr.pick td {
    transition: background-color var(--motion) ease-out, border-color var(--motion) ease-out, color var(--motion) ease-out, box-shadow var(--motion) ease-out;
  }
  .check input::before { transition: transform var(--motion) ease-out; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}