/* Camp Registration — warm editorial palette, serif display, pill controls. */

:root {
  --ivory: #f3f1ec;
  --tan: #f2eee6;
  --cream: #f9f6f0;
  --paper: #fdfcfa;
  --ink: #212c33;
  --ink-soft: #6f6a61;
  --navy: #2d3a50;
  --navy-dark: #212c33;
  --gold: #e5cfa0;
  --gold-soft: #f6ecd5;
  --line: rgba(126, 101, 61, .22);
  --line-strong: rgba(126, 101, 61, .4);
  --green: #3f6f4a;
  --green-soft: #e4ecdf;
  --amber: #9a7b28;
  --amber-soft: #f7eeda;
  --red: #b23a3a;
  --red-soft: #f6e3e0;
  --r-card: 24px;
  --r-panel: 16px;
  --r-input: 11px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(60, 45, 25, .04), 0 10px 30px rgba(60, 45, 25, .05);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.6 var(--sans);
  letter-spacing: -.006em;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.topstrip {
  background: var(--tan);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-soft);
  padding: 9px 0;
}
.topstrip .wrap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.topstrip code {
  background: rgba(255, 255, 255, .6); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; font-size: 11.5px;
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(243, 241, 236, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 76px; }
.brand {
  text-decoration: none; color: var(--ink); white-space: nowrap;
  font-family: var(--serif); font-size: 27px; font-weight: 400;
  letter-spacing: -.8px; line-height: 1;
}
.bank {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; margin: 0;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-input); padding: 12px 14px;
}
.cost-readout {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--gold-soft); border: 1px solid rgba(154,123,40,.3);
  border-radius: var(--r-panel); padding: 14px 18px; margin: 0 0 20px;
}
.cost-readout .label { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); font-weight: 600; }
.cost-readout .amount { font-family: var(--serif); font-size: 30px; letter-spacing: -.6px; }
.nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Buttons in the nav keep their own colours - a bare `.nav a` rule is more
   specific than `.btn-primary` and would wash the label out. */
.nav a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.nav a:not(.btn):hover { color: var(--navy); }
.nav .btn-primary { color: #f9f7f1; }
.nav .btn-ghost { color: var(--ink); }
.who { color: var(--ink-soft); font-size: 13px; }

.site-footer {
  margin-top: 72px; padding: 28px 0 48px; border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: 13px; background: var(--tan);
}

/* ---------- type ---------- */
h1 {
  font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.06;
  letter-spacing: -1.2px; margin: 34px 0 8px;
}
h2 {
  font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.12;
  letter-spacing: -.7px; margin: 42px 0 14px;
}
h3 { font-size: 15px; font-weight: 640; margin: 0 0 8px; letter-spacing: -.01em; }
h4 { font-size: 14.5px; font-weight: 640; margin: 0 0 4px; }
.lede { color: var(--ink-soft); margin: 0 0 24px; max-width: 66ch; font-size: 16px; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
a { color: var(--navy); text-decoration-color: var(--line-strong); text-underline-offset: 2px; }

/* ---------- layout ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 22px 24px; box-shadow: var(--shadow);
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.card h3 a { text-decoration: none; }

.stat {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 15px 18px;
}
.stat .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); font-weight: 600;
}
.stat .value {
  font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1;
  letter-spacing: -.6px; margin-top: 5px;
}
.stat .value.owing { color: var(--red); }
.stat .value.clear { color: var(--green); }
.stat.accent { background: var(--gold-soft); border-color: rgba(154, 123, 40, .3); }

/* ---------- chips ---------- */
.chip {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--green-soft); color: var(--green); white-space: nowrap;
}
.chip-paid { background: var(--green-soft); color: var(--green); }
.chip-partial { background: var(--amber-soft); color: var(--amber); }
.chip-unpaid { background: var(--red-soft); color: var(--red); }
.chip-admin { background: #e3e7ef; color: var(--navy); }
.chip-diet { background: var(--tan); color: #6b5a3a; font-weight: 500; }
.chip-closed { background: #e8e6e1; color: var(--ink-soft); }
.chip-role { background: #e3e7ef; color: var(--navy); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 20px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -.15px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: rgba(126, 101, 61, .08); }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #f9f7f1; }
.btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
.btn-ghost { border-color: transparent; }
.btn-sm { height: 32px; padding: 0 13px; font-size: 13px; }
.btn-danger { color: var(--red); border-color: rgba(178, 58, 58, .35); }
.btn-danger:hover { background: var(--red-soft); }
.btn-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- forms ---------- */
label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], select, textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line-strong);
  border-radius: var(--r-input); font: inherit; background: var(--paper); color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy);
}
textarea { min-height: 76px; resize: vertical; }
.field { margin-bottom: 16px; }
.field .hint, .hint { font-weight: 400; color: var(--ink-soft); font-size: 12.5px; margin-top: 5px; }
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
fieldset {
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px;
  margin: 0 0 20px; background: var(--cream);
}
legend {
  font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); padding: 0 8px;
}
.checks { display: flex; flex-wrap: wrap; gap: 9px 18px; }
.checks label, .inline-check {
  display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; cursor: pointer;
}
.checks input, .inline-check input { width: auto; }
.radio-cards { display: grid; gap: 11px; }
.radio-card {
  border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  padding: 14px 16px; background: var(--paper); cursor: pointer;
}
.radio-card:has(input:checked) { border-color: var(--navy); background: var(--gold-soft); }
/* Grid, not flex: the radio sits in its own column and the description drops
   onto the next row instead of squeezing the title into a narrow column. */
.radio-card > label {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  align-items: start; font-weight: 640; margin: 0;
}
.radio-card input { width: auto; margin: 3px 0 0; }
.radio-card .sub { grid-column: 2; font-weight: 400; color: var(--ink-soft); font-size: 13px; }
.radio-card .body { margin: 12px 0 0 27px; }

/* ---------- tables ---------- */
.table-wrap {
  overflow-x: auto; background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-soft); font-weight: 700; background: var(--tan); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 255, 255, .55); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; background: var(--tan); border-top: 1px solid var(--line); border-bottom: 0; }
.card table th { background: transparent; }
.card .table-wrap { border: 0; box-shadow: none; background: transparent; }

/* ---------- flashes ---------- */
.flashes { margin: 20px 0 0; display: grid; gap: 9px; }
.flash { padding: 12px 16px; border-radius: var(--r-panel); font-size: 14px; border: 1px solid; }
.flash-ok { background: var(--green-soft); border-color: rgba(63, 111, 74, .3); color: var(--green); }
.flash-warn { background: var(--amber-soft); border-color: rgba(154, 123, 40, .3); color: var(--amber); }
.flash-error { background: var(--red-soft); border-color: rgba(178, 58, 58, .3); color: var(--red); }

/* ---------- misc ---------- */
.crumb { font-size: 13px; color: var(--ink-soft); margin-top: 22px; }
.crumb a { color: var(--ink-soft); }
.meta { color: var(--ink-soft); font-size: 13.5px; display: flex; gap: 16px; flex-wrap: wrap; }
.divider { height: 1px; background: var(--line); margin: 22px 0; border: 0; }
.empty {
  text-align: center; padding: 38px 24px; color: var(--ink-soft);
  background: var(--cream); border: 1px dashed var(--line-strong); border-radius: var(--r-card);
}
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  /* Row gap matters: once the buttons wrap onto their own line they need
     clearing from the heading above and from whatever follows below. */
  gap: 14px 16px; flex-wrap: wrap; margin-bottom: 30px;
}

/* A heading carries its own top margin; a button row beside it does not, so
   left alone the buttons sit flush against the sticky header while the title
   below them looks correctly spaced. The spacing belongs to the row, not to
   the heading inside it. */
main.wrap { padding-top: 34px; }
main.wrap > :first-child, main.wrap > :first-child > :first-child { margin-top: 0; }
.section-head > :first-child > :first-child { margin-top: 0; }
/* The lede already carries the gap when it is the last thing in the head. */
.section-head .lede:last-child { margin-bottom: 0; }
.inline-form { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.inline-form .field { margin: 0; }
.inline-form input, .inline-form select { padding: 6px 10px; font-size: 13px; border-radius: 9px; }
form.inline { display: inline; }

/* ---------- roster sheet ---------- */
.sheet-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 0; }
.sheet-toolbar .sep { width: 1px; height: 22px; background: var(--line-strong); }
.sheet-toolbar select {
  padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font: inherit; font-size: 13px; background: transparent; height: 32px;
}

.sheet-wrap {
  overflow: auto; max-height: 68vh; background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow);
}
table.sheet { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.sheet th {
  position: sticky; top: 0; z-index: 2; background: var(--tan);
  border-bottom: 1px solid var(--line-strong); white-space: nowrap;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); padding: 9px 9px; text-align: left;
}
table.sheet td { border-bottom: 1px solid var(--line); padding: 0; vertical-align: middle; }
table.sheet td.cell-n {
  padding: 0 9px; color: var(--ink-soft); font-size: 12px; text-align: right;
  font-variant-numeric: tabular-nums; background: var(--tan); width: 36px;
}
table.sheet input {
  width: 100%; border: 0; border-radius: 0; padding: 8px 9px; font: inherit;
  background: transparent; color: var(--ink);
}
table.sheet input:focus {
  outline: 2px solid var(--navy); outline-offset: -2px; background: var(--paper);
  position: relative; z-index: 1; border-radius: 4px;
}
table.sheet input[type=number] { text-align: right; }
table.sheet td.cell-fee {
  padding: 0 12px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); white-space: nowrap; background: var(--tan); min-width: 80px;
}
table.sheet td.cell-act { padding: 0 6px; width: 46px; }
table.sheet tfoot td { background: var(--tan); padding: 10px 12px; border-top: 1px solid var(--line-strong); }
table.sheet tbody tr:hover td.cell-n { background: var(--gold); }
table.sheet tr.row-deleted { background: var(--red-soft); }
table.sheet tr.row-deleted input { text-decoration: line-through; color: var(--ink-soft); }
table.sheet input.cell-check { width: auto; margin: 0 auto; display: block; }
table.sheet td.col-rank_dorm_leader, table.sheet td.col-rank_team_leader,
table.sheet td.col-waiver_signed { text-align: center; }

.night-picker { display: flex; align-items: center; gap: 8px; padding: 4px 9px; white-space: nowrap; }
.night-picker label {
  display: inline-flex; align-items: center; gap: 3px; margin: 0; font-weight: 500;
  font-size: 11.5px; color: var(--ink-soft); cursor: pointer;
}
.night-picker input { width: auto; margin: 0; }
.night-picker .nights-caption { font-size: 10.5px; color: var(--ink-soft); font-style: italic; }

/* ---------- payment tracker ---------- */
.track-bar { height: 6px; border-radius: var(--r-pill); background: rgba(126, 101, 61, .16); overflow: hidden; min-width: 72px; }
.track-bar > span { display: block; height: 100%; background: var(--green); }
.track-bar.is-partial > span { background: var(--amber); }
.track-bar.is-unpaid > span { background: var(--red); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft); }

/* ---------- cabins + teams ---------- */
.cabin-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); }
.cabin {
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--cream);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.cabin.is-full { border-color: var(--green); }
.cabin.is-over { border-color: var(--red); background: var(--red-soft); }
.cabin.is-empty { opacity: .68; }
.cabin h4 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cabin .beds { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 500; }
.cabin ol { margin: 9px 0 0; padding-left: 18px; font-size: 13px; }
.cabin li { margin-bottom: 3px; }
.cabin .empty-note { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin-top: 9px; }
.gender-m { color: #34508c; }
.gender-f { color: #8c3468; }

.team-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); }
.team {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--cream);
  box-shadow: var(--shadow); overflow: hidden;
}
.team-head { padding: 12px 16px; color: #fff; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.team-head .name { font-family: var(--serif); font-size: 22px; letter-spacing: -.5px; }
.team-head .size { font-size: 12.5px; opacity: .85; font-variant-numeric: tabular-nums; }
.team-body { padding: 12px 16px 16px; }
.team-stats {
  display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.team-stats b { color: var(--ink); font-weight: 640; }
.roster-line {
  display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 13.5px;
  border-bottom: 1px solid rgba(126, 101, 61, .1);
}
.roster-line:last-child { border-bottom: 0; }
.roster-line .who { flex: 1; color: var(--ink); }
.roster-line.is-leader .who { font-weight: 700; }
.roster-line.is-leader { background: var(--gold-soft); margin: 0 -8px; padding: 4px 8px; border-radius: 6px; }
.roster-line .badge {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--gold); color: var(--navy); border-radius: 4px; padding: 1px 5px;
}
.roster-line .age { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Hover card for a camper's assessment. */
.tip { position: relative; cursor: help; }
.tip .tip-body {
  display: none; position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 40;
  background: var(--navy-dark); color: #f4f2ec; padding: 10px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.55; width: 205px; box-shadow: 0 8px 26px rgba(30, 25, 15, .3);
  white-space: normal; font-weight: 400; letter-spacing: 0;
}
.tip:hover .tip-body, .tip:focus-within .tip-body { display: block; }
.tip .tip-body b { color: var(--gold); font-weight: 600; }
.tip .tip-row { display: flex; justify-content: space-between; gap: 10px; }

@media (max-width: 640px) {
  h1 { font-size: 34px; }
  h2 { font-size: 25px; }

  /* Keep the wrap's gutter - a bare `padding: 12px 0` here would override it
     and push the masthead flush against the screen edge. */
  .header-inner {
    height: auto; padding: 12px 24px; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 10px;
  }

  /* The menu folds away behind a button. `has-nav-toggle` is set by the script,
     so if the script never runs the menu stays visible instead of vanishing
     behind a button that cannot open it. */
  .has-nav-toggle .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; cursor: pointer;
    background: transparent; border: 1px solid var(--line-strong);
    border-radius: var(--r-input);
  }
  .nav-toggle span {
    display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
  }
  .has-nav-toggle .nav { display: none; }
  .has-nav-toggle .nav.is-open { display: flex; }
  .nav {
    flex-direction: column; align-items: stretch; width: 100%;
    gap: 0; padding: 6px 0 10px;
  }
  .nav a:not(.btn) {
    font-size: 16px; padding: 11px 2px; border-top: 1px solid var(--line);
  }
  .nav .who { padding: 12px 2px 6px; border-top: 1px solid var(--line); }
  .nav .btn { align-self: flex-start; margin-top: 6px; }

  /* Safari zooms the page whenever a focused field is under 16px, which on a
     form this long means it zooms on every single tap. */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=date], input[type=tel], select, textarea { font-size: 16px; }

  /* Fingers, not mice. */
  .checks input[type=checkbox], .checks input[type=radio],
  .radio-card input[type=radio], .inline-check input { width: 20px; height: 20px; }
  .checks { gap: 14px 20px; }
  .checks label, .inline-check { min-height: 32px; }

  /* Tables and the sheet scroll inside themselves; say so rather than leaving
     people to discover it. */
  .table-wrap, .sheet-wrap { -webkit-overflow-scrolling: touch; }
  .table-wrap::after, .sheet-wrap::after { content: ""; }
}

/* ---------- record-a-payment disclosure ----------
   A quiet inline strip on a laptop; a tap-to-open panel on a phone. The
   <details> is forced open above the breakpoint by base.html, so the summary
   only ever does work on small screens. */
.pay-drop > summary {
  display: none;
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--navy);
  padding: 8px 0;
}
.pay-drop > summary::-webkit-details-marker { display: none; }
.pay-drop > summary::before { content: "+ "; font-weight: 700; }
.pay-drop[open] > summary::before { content: "− "; }
.inline-form .pay-amount { width: 82px; }
.inline-form .pay-note { width: 150px; }
.inline-form .pay-kind { width: 100px; }
.inline-form .pay-method { width: 120px; }

/* ---------- stacked cards on small screens ----------
   Used on the leader's payments page, where a leader is realistically standing
   at a church door with a phone. Every other table keeps scrolling sideways. */
@media (max-width: 700px) {
  .table-wrap.stack {
    overflow: visible; background: transparent; border: 0; box-shadow: none;
    border-radius: 0;
  }
  .stack table, .stack tbody, .stack tr, .stack td, .stack tfoot { display: block; width: 100%; }
  .stack thead { display: none; }
  .stack tr {
    background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow);
  }
  .stack tbody tr:hover { background: var(--cream); }
  .stack td {
    border: 0; padding: 6px 0;
    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
  }
  .stack td::before {
    content: attr(data-label);
    font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-soft); font-weight: 700;
  }
  .stack td:not([data-label])::before { content: none; }
  .stack td.num { text-align: right; }
  /* Chips are pills, not bars - keep them to their own width. */
  .stack td .chip { justify-self: end; }
  .stack td .pill-row { justify-self: end; justify-content: flex-end; }
  .stack td .track-bar { width: 100%; }
  .stack td.cell-head {
    display: block; padding: 0 0 10px; margin-bottom: 8px;
    border-bottom: 1px solid var(--line); font-size: 16px;
  }
  .stack td.cell-pay, .stack td.cell-actions {
    display: block; margin-top: 6px; text-align: left;
    border-top: 1px solid var(--line); padding-top: 8px;
  }
  .stack tfoot td {
    background: var(--tan); border: 1px solid var(--line); border-radius: var(--r-panel);
    padding: 12px 16px;
  }

  /* The pay panel opens under the card and fills the width. */
  .stack .pay-drop > summary { display: block; }
  .stack .pay-drop[open] > .pay-body { margin-top: 8px; }
  .stack .pay-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .stack .pay-body .pay-amount, .stack .pay-body .pay-note,
  .stack .pay-body .pay-kind, .stack .pay-body .pay-method { width: 100%; }
  .stack .pay-body .pay-note, .stack .pay-body .pay-method { grid-column: 1 / -1; }
  .stack .pay-body .pay-go { grid-column: 1 / -1; height: 44px; font-size: 15px; }
  .stack .pay-body input, .stack .pay-body select { font-size: 16px; padding: 10px 12px; }
  .stack .cell-actions .btn { height: 38px; }
  .stack .cell-actions form.inline { display: block; margin-top: 6px; }
}

/* ---------- kitchen ---------- */
.method { white-space: pre-wrap; line-height: 1.75; }
tr.got td { opacity: .4; }
tr.got td strong { text-decoration: line-through; }
#paste-box { min-height: 120px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

/* A shopping list is a thing you carry, and a recipe is a thing you prop up. */
@media print {
  .site-header, .topstrip, .site-footer, .crumb, .no-print,
  .btn-row, .flashes, .sheet-toolbar, .sheet-wrap { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .wrap { max-width: none; padding: 0; }
  .table-wrap, .card { box-shadow: none; border-color: #bbb; break-inside: auto; }
  table { font-size: 11pt; }
  th { background: #eee !important; }
  h1 { font-size: 24pt; margin: 0 0 4px; }
  h2 { font-size: 15pt; margin: 16pt 0 6pt; break-after: avoid; }
  tr { break-inside: avoid; }
  .grid-2 { display: block; }
  a { text-decoration: none; color: inherit; }
}

/* ---------- kitchen schedule ---------- */
tr.row-serve td { background: var(--green-soft); }
tr.row-serve td strong { color: var(--green); }
tr.row-task td { background: var(--cream); }

/* ---------- menu ---------- */
.nav-toggle { display: none; }
.tool-card { display: block; text-decoration: none; color: inherit; }
.tool-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift, var(--shadow)); }
.tool-card h3 { margin: 0 0 6px; }
.tool-card p { margin: 0; }

/* ---------- volunteer availability ---------- */
.avail-cell { font-weight: 700; font-size: 13px; text-align: center; }
.avail-yes   { background: var(--green-soft); color: var(--green); }
.avail-maybe { background: var(--amber-soft); color: var(--amber); }
.avail-no    { background: var(--red-soft); color: var(--red); }
.avail-none  { color: var(--ink-soft); }
select.avail-yes   { border-color: rgba(63, 111, 74, .45); }
select.avail-maybe { border-color: rgba(154, 123, 40, .45); }
select.avail-no    { border-color: rgba(178, 58, 58, .45); }

/* The availability grid is the one screen volunteers really use, and they use
   it on a phone. Below the breakpoint each day becomes a card rather than a
   row you have to scroll sideways to reach the end of. */
@media (max-width: 700px) {
  .stack td.day-cell {
    display: block; font-size: 17px; padding-bottom: 10px;
    border-bottom: 1px solid var(--line); margin-bottom: 6px;
  }
  .stack td.day-cell .small { margin-left: 8px; }
  .stack td.day-cell::before { content: none; }
  .stack td select { width: 100%; }
}