/* CROC Volunteering — one hand-written stylesheet, no framework (§2.2).
   Colors sampled from croc.org and the CROC logo (decision 6). Light theme
   only. Mobile-first: tap targets are at least 44px, and tables collapse to
   cards under 640px, because the attendance page is used on a phone in a
   field. */

:root {
  --croc-sky:   #C6D8E3; /* pale blue from the logo — page accents, table stripes */
  --croc-blue:  #5469A0; /* logo blue — links, primary buttons */
  --croc-green: #6FA24E; /* logo green — success, "filled" states */
  --croc-gold:  #D89C4C; /* logo gold — warnings, "needs a volunteer" */
  --croc-ink:   #21201F; /* body text */
  --croc-paper: #FFFFFF;
  --croc-grey:  #737373;

  --blue-dark:  #3F5080;
  --sky-light:  #EEF4F7;
  --red:        #B3402E;
  --radius:     6px;
  --tap:        44px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Author styles such as .button { display: inline-flex } beat the browser's own
   [hidden] rule, so a hidden button would still show. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--croc-ink);
  background: var(--croc-paper);
}

.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1rem; }
main.wrap { flex: 1; padding-top: 1.5rem; padding-bottom: 3rem; }
.narrow { max-width: 34rem; }

h1 { font-size: 1.9rem; line-height: 1.2; font-weight: 900; margin: 0 0 1rem; text-wrap: balance; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 2rem 0 .5rem; }
p  { margin: 0 0 1rem; }
hr { border: 0; border-top: 1px solid var(--croc-sky); margin: 1.75rem 0; }

a { color: var(--croc-blue); text-underline-offset: 2px; }
a:hover { color: var(--blue-dark); }

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

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--sky-light); padding: .1em .3em; border-radius: 3px; }

.lede  { font-size: 1.15rem; max-width: 46rem; }
.muted { color: var(--croc-grey); }
.small { font-size: .875rem; }
.hint  { color: var(--croc-grey); font-size: .9rem; margin: -.35rem 0 1rem; }

/* ------------------------------------------------------------------ header */

.site-header { border-bottom: 4px solid var(--croc-sky); background: var(--croc-paper); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; padding-top: .6rem; padding-bottom: .6rem; }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; }
.brand-mark { font-weight: 900; letter-spacing: .06em; color: var(--croc-paper); background: var(--croc-blue); padding: .3rem .55rem; border-radius: var(--radius); }
.brand-title { font-weight: 900; font-size: 1.3rem; color: var(--croc-ink); text-decoration: none; margin-right: auto; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; }
.site-nav > a, .site-nav summary, .site-nav .linklike {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .6rem;
  color: var(--croc-ink); text-decoration: none; font-weight: 700; border-radius: var(--radius);
}
.site-nav > a:hover, .site-nav summary:hover { background: var(--sky-light); }
.site-nav > a[aria-current="page"] { color: var(--croc-blue); box-shadow: inset 0 -3px 0 var(--croc-blue); border-radius: 0; }
.nav-sep { color: var(--croc-grey); }

.account { position: relative; }
.account summary { cursor: pointer; list-style: none; }
.account summary::-webkit-details-marker { display: none; }
.account summary::after { content: "▾"; margin-left: .35rem; color: var(--croc-grey); }
.account-menu {
  position: absolute; right: 0; top: 100%; z-index: 10; min-width: 11rem; padding: .35rem;
  background: var(--croc-paper); border: 1px solid var(--croc-sky); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(33, 32, 31, .12);
}
.account-menu a, .account-menu .linklike {
  display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: 0 .7rem;
  color: var(--croc-ink); text-decoration: none; font-weight: 400; border-radius: 4px;
}
.account-menu a:hover, .account-menu .linklike:hover { background: var(--sky-light); }

.linklike { background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }

/* §31.3: the phone menu, shown instead of the bar below 640px. */
.site-menu { display: none; position: relative; }
.site-menu summary {
  display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); padding: 0 .7rem;
  cursor: pointer; list-style: none; font-weight: 700; border: 1px solid var(--croc-sky); border-radius: var(--radius);
}
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu-list {
  position: absolute; right: 0; top: 100%; z-index: 10; min-width: 13rem; padding: .35rem; margin-top: .25rem;
  background: var(--croc-paper); border: 1px solid var(--croc-sky); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(33, 32, 31, .12);
}
.site-menu-list a, .site-menu-list .linklike {
  display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: 0 .7rem;
  color: var(--croc-ink); text-decoration: none; font-weight: 700; border-radius: 4px;
}
.site-menu-list a[aria-current="page"] { color: var(--croc-blue); background: var(--sky-light); }
.site-menu-list form { border-top: 1px solid var(--croc-sky); margin-top: .25rem; padding-top: .25rem; }
@media (max-width: 639px) {
  .site-nav { display: none; }
  .site-menu { display: block; }
}

/* §31.2: a section's tabs, under the site bar. They wrap rather than scroll. */
.tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--croc-sky); }
.tabs a {
  display: inline-flex; align-items: center; gap: .35rem; min-height: var(--tap); padding: 0 .8rem;
  color: var(--croc-ink); text-decoration: none; font-weight: 700; border: 1px solid var(--croc-sky); border-radius: 999px;
}
.tabs a:hover { background: var(--sky-light); }
.tabs a[aria-current="page"] { background: var(--croc-blue); border-color: var(--croc-blue); color: var(--croc-paper); }
.tab-count { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--croc-gold); color: var(--croc-ink); font-size: .8rem; text-align: center; }
.section-title { margin: 0 0 .5rem; font-weight: 700; color: var(--croc-grey); }
.back-line { margin: 0 0 .75rem; }

/* ------------------------------------------------------------------- flash */

.flash { padding: .75rem 0; font-weight: 700; border-bottom: 1px solid transparent; }
.flash-success { background: #EAF3E4; border-color: var(--croc-green); }
.flash-warning { background: #FBF1E2; border-color: var(--croc-gold); }
.flash-error   { background: #F8E7E4; border-color: var(--red); }

.notice { padding: .9rem 1rem; border-left: 5px solid var(--croc-blue); background: var(--sky-light); border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 1.25rem; }
.notice p:last-child { margin: 0; }
.notice-warn { border-color: var(--croc-gold); background: #FBF1E2; }
.notice-error { border-color: var(--red); background: #F8E7E4; }
.notice ul { margin: .35rem 0 0; padding-left: 1.2rem; }

/* ------------------------------------------------------------------- forms */

label { display: block; font-weight: 700; margin-bottom: .3rem; }
label.check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; min-height: var(--tap); padding-top: .55rem; }
label.check input { width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; accent-color: var(--croc-blue); flex: none; }

input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"],
input[type="date"], input[type="time"], input[type="number"], select, textarea {
  display: block; width: 100%; min-height: var(--tap); padding: .5rem .7rem;
  font: inherit; color: inherit; background: var(--croc-paper);
  border: 1.5px solid #9AA9B4; border-radius: var(--radius);
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--croc-blue); }
input[aria-invalid="true"] { border-color: var(--red); }

.stack > * + label { margin-top: 1.1rem; }
.stack > .button { margin-top: 1.4rem; }
.field-error { color: var(--red); font-weight: 700; margin: .4rem 0 0; }

.code-input { font-size: 1.7rem; letter-spacing: .4em; font-variant-numeric: tabular-nums; max-width: 13rem; text-align: center; padding-left: .4em; }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: .5rem 1.25rem;
  font: inherit; font-weight: 700; color: var(--croc-paper); background: var(--croc-blue);
  border: 1.5px solid var(--croc-blue); border-radius: var(--radius); text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--croc-paper); }
.button-quiet { color: var(--croc-blue); background: var(--croc-paper); }
.button-quiet:hover { background: var(--sky-light); color: var(--blue-dark); }
.button-grey { color: var(--croc-grey); border-color: var(--croc-grey); background: var(--croc-paper); }
.button-grey:hover { color: var(--croc-ink); border-color: currentColor; background: var(--croc-paper); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button-danger { color: var(--red); border-color: var(--red); background: var(--croc-paper); }
.button-danger:hover { color: var(--croc-paper); background: var(--red); }
.button-small { min-height: var(--tap); padding: .35rem .9rem; font-size: .95rem; }
.linkbutton { min-height: var(--tap); padding: 0 .5rem; background: none; border: 0; font: inherit; font-size: .92rem; color: var(--croc-blue); text-decoration: underline; cursor: pointer; }
.linkbutton:hover { color: var(--blue-dark); }
.linkbutton-danger { color: var(--red); }
.sr-only { position: absolute; left: -9999px; }

.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }

/* ------------------------------------------------------------------- cards */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.card { display: block; padding: 1.1rem 1.2rem; border: 1px solid var(--croc-sky); border-top: 4px solid var(--croc-blue); border-radius: var(--radius); color: inherit; text-decoration: none; background: var(--croc-paper); }
a.card:hover { background: var(--sky-light); color: inherit; }
.card h2 { margin: 0 0 .35rem; color: var(--croc-blue); }
.card p { margin: 0 0 .35rem; }
.count { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.count span { font-size: .9rem; font-weight: 400; color: var(--croc-grey); }
.count-bad { color: var(--red); }

.panel { background: var(--sky-light); border-radius: var(--radius); padding: 1rem 1.2rem 1.1rem; margin: 1.5rem 0; }
.panel h2 { margin-top: 0; }
.address-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.address-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .35rem 0; border-bottom: 1px solid var(--croc-sky); overflow-wrap: anywhere; }
.address-list li details { flex: 1 1 100%; }
.address-list li details:not([open]) { flex: 0 0 auto; }
.address-list .inline-form { margin: 0; }
.grant-form { display: grid; gap: .9rem; align-items: end; }
@media (min-width: 640px) { .grant-form { grid-template-columns: 2fr 1.2fr 1.6fr auto; } }


/* ------------------------------------------------------------------ tables */

.filter { max-width: 22rem; margin-bottom: .9rem; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--croc-grey); border-bottom: 2px solid var(--croc-sky); padding: .5rem .6rem; }
td { padding: .55rem .6rem; border-bottom: 1px solid var(--croc-sky); vertical-align: middle; }
tbody tr:nth-child(even) { background: var(--sky-light); }
tr.revoked td { color: var(--croc-grey); }

.chip { display: inline-flex; align-items: center; margin: .15rem .3rem .15rem 0; background: var(--croc-paper); border: 1.5px solid var(--croc-blue); border-radius: 999px; overflow: hidden; }
.chip span { padding: 0 .3rem 0 .8rem; font-weight: 700; color: var(--blue-dark); font-size: .95rem; }
.chip button { min-width: var(--tap); min-height: 36px; border: 0; background: none; font: inherit; font-size: 1.2rem; color: var(--croc-grey); cursor: pointer; }
.chip button:hover { color: var(--croc-paper); background: var(--red); }

@media (max-width: 639px) {
  h1 { font-size: 1.6rem; }
  .cards-under-640 thead { position: absolute; left: -9999px; }
  .cards-under-640, .cards-under-640 tbody, .cards-under-640 tr, .cards-under-640 td { display: block; width: 100%; }
  .cards-under-640 tr { border: 1px solid var(--croc-sky); border-radius: var(--radius); margin-bottom: .75rem; padding: .4rem .2rem; background: var(--croc-paper) !important; }
  .cards-under-640 td { border: 0; padding: .3rem .7rem; overflow-wrap: anywhere; }
  .cards-under-640 td::before { content: attr(data-label); display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--croc-grey); }
  .chip button { min-height: var(--tap); }
}

/* ------------------------------------------------------------------ footer */

.site-footer { border-top: 1px solid var(--croc-sky); background: var(--sky-light); padding: 1.1rem 0; font-size: .92rem; color: var(--croc-grey); }

@media (prefers-reduced-motion: no-preference) {
  .button, .card, .site-nav > a { transition: background-color .12s ease; }
}

/* ------------------------------------------------------------------- events */

progress.fill { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: .5rem; border: 0; border-radius: 999px; background: var(--sky-light); overflow: hidden; }
progress.fill::-webkit-progress-bar { background: var(--sky-light); border-radius: 999px; }
progress.fill::-webkit-progress-value { background: var(--croc-blue); border-radius: 999px; }
progress.fill::-moz-progress-bar { background: var(--croc-blue); border-radius: 999px; }
progress.fill-low::-webkit-progress-value { background: var(--croc-gold); }  /* under half filled */
progress.fill-low::-moz-progress-bar { background: var(--croc-gold); }
progress.fill-full::-webkit-progress-value { background: var(--croc-green); } /* every slot filled */
progress.fill-full::-moz-progress-bar { background: var(--croc-green); }

.tag { display: inline-block; margin-left: .35rem; padding: 0 .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .02em; border: 1.5px solid var(--croc-sky); border-radius: 999px; color: var(--croc-grey); vertical-align: middle; }
.tag-you { border-color: var(--croc-blue); color: var(--blue-dark); }
.tag-draft { border-color: var(--croc-gold); color: #8A5A1B; background: #FBF1E2; }

.event-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.event-row { display: grid; gap: .5rem .9rem; align-items: center; padding: .8rem .2rem; border-bottom: 1px solid var(--croc-sky); grid-template-columns: 1fr; }
.event-when { font-weight: 700; font-variant-numeric: tabular-nums; }
.event-name { font-weight: 900; font-size: 1.1rem; }
.event-fill { display: grid; gap: .25rem; }
.event-fill-strong .small { color: var(--croc-ink); }
.event-go .button { width: 100%; }
@media (min-width: 760px) {
  .event-row { grid-template-columns: 11rem 1fr 13rem 8rem; }
  .event-go .button { width: auto; }
}
.earlier > summary { cursor: pointer; list-style: none; }
.earlier > summary::-webkit-details-marker { display: none; }
.earlier > summary h2 { display: inline; }
.earlier > summary::before { content: "▸ "; color: var(--croc-grey); }
.earlier[open] > summary::before { content: "▾ "; }

.needs-you { border-left: 5px solid var(--croc-gold); background: #FBF1E2; border-radius: 0 var(--radius) var(--radius) 0; padding: .3rem 1rem .6rem; margin: 1rem 0; }
.needs-you h2 { margin-top: .6rem; }
.needs-you ul, .my-shifts { margin: 0; padding-left: 1.2rem; }
.my-shifts li { margin-bottom: .3rem; }

/* ---------------------------------------------------------- the event page */

.event-head { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.event-head h1 { margin-bottom: .25rem; }
.event-meta { font-size: 1.1rem; margin: 0 0 .25rem; }
.venue-notes { white-space: pre-line; max-width: 46rem; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: .5rem 1rem; margin: 0 0 1.25rem; background: var(--sky-light); border-left: 5px solid var(--croc-blue); border-radius: 0 var(--radius) var(--radius) 0; }
.toolbar a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.toolbar form { margin: 0; }

.board-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .board-layout { grid-template-columns: minmax(0, 1fr) 17rem; } }

/* One column per job, shifts down each column (§2.4.3); stacked under 760px. */
.columns { display: grid; gap: 1.25rem 1rem; grid-template-columns: minmax(0, 1fr); align-content: start; }
@media (min-width: 760px) { .columns { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.column h2 { margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: var(--blue-dark); }
.column-note { margin: 0 0 .5rem; color: var(--croc-grey); font-size: .9rem; }
.column-flex h2 { color: var(--croc-grey); }
.column-part { margin: .75rem 0 0; font-size: 1rem; color: var(--blue-dark); }

.slots { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.slot { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; min-height: var(--tap); padding: .3rem .7rem; background: var(--croc-paper); border: 1px solid var(--croc-sky); border-left: 4px solid var(--croc-sky); border-radius: var(--radius); }
.slot-open { border-left-color: var(--croc-gold); }
.slot-mine { border-left-color: var(--croc-green); background: #EAF3E4; }
.slot-confirm { border: 2px solid var(--croc-blue); background: var(--sky-light); }
.slot-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--croc-grey); }
.slot-name { font-weight: 700; }
.slot-empty { color: var(--croc-grey); font-style: italic; }
.slot form { margin: 0; }
.slot-ask { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; width: 100%; }
.slot-ask p { flex-basis: 100%; margin: .2rem 0 0; }
.slot-release { margin-left: auto; }
.you { font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #3F6B27; }
.marker { font-weight: 900; }
.slot-note { flex-basis: 100%; margin: .1rem 0 .25rem; font-size: .92rem; font-weight: 700; }
.slot-note-warning { color: #8A5A1B; }
.slot-note-success { color: #3F6B27; }

.side { display: grid; gap: 1rem; align-content: start; }
.side-panel { padding: .8rem 1rem; border: 1px solid var(--croc-sky); border-top: 4px solid var(--croc-sky); border-radius: var(--radius); background: var(--croc-paper); }
.side-panel h2 { margin: 0 0 .4rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--blue-dark); }
.side-panel p { margin-bottom: .5rem; }
.summary-line { margin-bottom: .35rem; }
.staff-line { line-height: 1.35; }
.staff-title { font-size: .85rem; color: var(--croc-grey); }
.copy-text { width: 100%; font: inherit; font-size: .88rem; padding: .5rem; margin-bottom: .5rem; }

/* -------------------------------------------------------------------- forms */

.event-form { max-width: 46rem; }
.event-form fieldset { margin: 0 0 1.5rem; padding: 1rem 1.2rem 1.2rem; border: 1px solid var(--croc-sky); border-radius: var(--radius); }
.event-form legend { padding: 0 .4rem; font-weight: 900; font-size: 1.15rem; }
.field { margin: 0 0 1rem; min-width: 0; }
.field .hint { margin: .35rem 0 0; }
.field-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
/* /events/new's "Start from" (§30.2): the choice, its button, a hint under both. */
.template-pick { align-items: end; margin-bottom: 1.25rem; }
.template-pick .button { margin-bottom: 1rem; justify-self: start; }
.template-pick .hint { grid-column: 1 / -1; margin-top: -.5rem; }
#templates form { display: inline; }
.job-group { margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px dashed var(--croc-sky); }
.job-group:last-child { border-bottom: 0; }
.shift-row, .staff-row, .flex-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .5rem 2.2rem; }
.shift-row input[type="number"] { width: 7rem; }
.shift-row input[type="time"] { width: 9rem; }
.staff-row { margin-left: 0; }
.staff-row input { flex: 1 1 14rem; width: auto; }
.flex-row { justify-content: space-between; max-width: 24rem; }
.flex-row label { margin: 0; font-weight: 400; }
.flex-row input { width: 6rem; }
.form-actions { margin-top: 1.5rem; }
.narrow-wide { max-width: 34rem; }
fieldset { min-width: 0; }

.add-shifts { display: grid; gap: 0 1rem; align-items: end; grid-template-columns: 1fr 1fr; }
.add-shifts .field:first-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .add-shifts { grid-template-columns: 2fr 1fr 1fr 1fr auto; } .add-shifts .field:first-child { grid-column: auto; } }
.add-shifts .button { margin-bottom: 1rem; }

.slot-table td { vertical-align: top; }
.slot-table .inline-form { margin-bottom: .25rem; flex-wrap: nowrap; }
.slot-table .inline-form input { min-width: 12rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0 .5rem; }
.row-actions form { margin: 0; }
@media (max-width: 639px) { .slot-table .inline-form { flex-wrap: wrap; } .slot-table .inline-form input { min-width: 0; } }

/* ---------------------------------------------------- attendance (§2.4.9)
   Phone-first, one-handed next to a vest bin: one card per slot, big tap
   targets, and the count and Finalize stuck to the bottom of the screen. */
.att-start { margin: 0 0 1.25rem; }
.att-list { display: grid; gap: .75rem; margin: 0 0 1rem; }
@media (min-width: 900px) { .att-list { grid-template-columns: 1fr 1fr; } }
.att-card { margin: 0; padding: .8rem 1rem .6rem; border: 1px solid var(--croc-sky); border-left: 5px solid var(--croc-sky); border-radius: var(--radius); background: var(--croc-paper); }
.att-card.att-attended { border-left-color: var(--croc-green); }
.att-card.att-no_show  { border-left-color: var(--red); }
.att-title { padding: 0; font-size: .82rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--croc-grey); }
.att-who { margin: .15rem 0 .5rem; font-size: 1.1rem; }
.att-phone { margin-left: .5rem; white-space: nowrap; font-size: 1rem; }
.att-choices { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }
.att-choice { display: inline-flex; align-items: center; gap: .4rem; margin: 0; min-height: var(--tap); padding: 0 .9rem; border: 1.5px solid var(--croc-blue); border-radius: 999px; font-weight: 700; cursor: pointer; }
.att-choice input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--croc-blue); }
.att-choice:has(input:checked) { background: var(--croc-blue); color: var(--croc-paper); }
/* The cover fields matter only once "Someone else" is chosen; without :has
   support they simply stay visible. */
.att-card:not(:has(.att-choices input[value="covered"]:checked)) .att-cover { display: none; }
.att-cover { margin: 0 0 .4rem; }
.att-cover input, .att-card > input { margin-bottom: .45rem; }
.att-card label.small { font-weight: 700; margin: .2rem 0 .2rem; }
.att-state { margin: 0 0 .3rem; font-weight: 700; }
.save-state { min-height: 1.3em; margin: .2rem 0 0; font-size: .88rem; font-weight: 700; color: var(--croc-grey); }
.save-success { color: var(--croc-green); }
.save-error   { color: var(--red); }
.att-footer {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin: 1rem -1rem 0; padding: .7rem 1rem; background: var(--croc-paper); border-top: 3px solid var(--croc-sky);
}
.att-count { margin-right: auto; font-variant-numeric: tabular-nums; }
.att-footer [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.finalize-list { columns: 2 12rem; margin: 0 0 1rem; }

/* -------------------------------------------------------------- /me (§2.4.5) */
.balance-block { background: var(--sky-light); border-radius: var(--radius); padding: 1rem 1.2rem .4rem; margin: 0 0 1rem; }
.ledger td.delta, .ledger td.running, .ledger th.num { text-align: right; white-space: nowrap; }
.ledger td.running { font-weight: 700; }
.ledger td:first-child { white-space: nowrap; }

/* ---------------------------------------------------------- coupons (§2.4.6) */
.coupon-show { text-align: center; margin: 1rem 0 1.25rem; padding: 1.25rem 1rem; border: 2px dashed var(--croc-blue); border-radius: var(--radius); background: var(--sky-light); }
.coupon-show p { margin: 0 0 .5rem; }
.coupon-input {
  font: inherit; font-size: 2rem; font-weight: 900; letter-spacing: .08em; text-align: center; max-width: 100%;
  color: var(--blue-dark); background: var(--croc-paper); border: 0; border-radius: var(--radius); padding: .3rem .6rem;
}
.coupon-inline { font-size: 1.05em; font-weight: 700; }
.redeem-panel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1.25rem; padding: .8rem 1rem; border-left: 5px solid var(--croc-green); background: #EAF3E4; border-radius: 0 var(--radius) var(--radius) 0; }
.redeem-panel p { margin: 0; }

/* ------------------------------------------------- reconciliation (§9.4) */
.recon tr.recon-flag td:last-child { border-left: 4px solid var(--croc-gold); }
.recon tr.recon-noop td { color: var(--croc-grey); }
.recon td code { white-space: nowrap; }

/* ------------------------------------------------------- reports (§2.4.10) */
.report-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin: 0 0 .75rem; }
.report-filter .field { margin: 0; }
.report { margin: 1.75rem 0; }
.report-table td.num, .report-table th.num { text-align: right; white-space: nowrap; }
.report-table tr.total td { font-weight: 700; border-top: 2px solid var(--croc-sky); }
.report-table tr.flagged td:last-child { border-left: 4px solid var(--croc-gold); }
.csv { margin: .4rem 0 0; font-size: .95rem; }
.csv a::before { content: "↓ "; }

/* ---------------------------------------------------- master list (§6.6) */
.master-list td { height: 2.2rem; }
.master-list .here { width: 3.5rem; text-align: center; }
.master-list .notes { width: 34%; }
.tickbox { display: inline-block; width: 1rem; height: 1rem; border: 1.5px solid currentColor; border-radius: 2px; }

@media print {
  .site-header, .site-footer, .flash, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main.wrap { max-width: none; padding: 0; }
  .master-list { display: table !important; }
  .master-list thead { display: table-header-group !important; position: static !important; }
  .master-list tr { display: table-row !important; break-inside: avoid; background: none !important; border: 0 !important; }
  .master-list td, .master-list th { display: table-cell !important; border: 1px solid #000 !important; padding: .25rem .4rem; color: #000; }
  .master-list td::before { content: none !important; }
  .master-list a { color: inherit; text-decoration: none; }
  @page { size: letter landscape; margin: 12mm; }
}

/* Adjust credits (§25.4): the sentence the member will read. */
.adjust-preview { margin: .25rem 0 1rem; }
.adjust-preview em { font-style: normal; font-weight: 700; }

/* §29: emails written out, with their editable blocks. */
.email-card { border: 1px solid var(--croc-sky); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1rem 0 1.5rem; background: var(--croc-paper); }
.email-card header h3 { margin: 0; }
.email-subject { font-weight: 600; margin: .75rem 0 .5rem; }
.email-body { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
/* §29.11: a part the app filled in, with a box saying where it comes from. The
   box sits directly above the part, touching it so the pointer can move into
   it, and is as wide as its words. croc.js moves it back if it would run off
   the side of the screen. */
.email-part { position: relative; outline: 1px solid #b5bcc4; border-radius: 3px; cursor: help; }
.email-part-people { outline: 1px dashed #c9a400; }
.email-part:focus { outline: 2px solid var(--croc-blue); }
.email-hint { display: none; position: absolute; left: 0; bottom: 100%; width: max-content; max-width: min(26rem, calc(100vw - 2rem)); z-index: 10; padding: .5rem .7rem; background: var(--croc-paper); border: 1px solid var(--croc-blue); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); white-space: normal; font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: .85rem; line-height: 1.4; cursor: auto; }
.email-part:hover > .email-hint, .email-part:focus > .email-hint, .email-part:focus-within > .email-hint, .email-part.open > .email-hint { display: block; }
.email-part.shut > .email-hint { display: none; }
@media print { .email-hint { display: none !important; } }
.job-add { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--croc-sky); }
.job-add input[type="text"] { max-width: 24rem; }
.how-toc { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 1.5rem; }
.email-texts { list-style: none; padding: 0; margin: .5rem 0 1.5rem; }
.email-texts li { padding: .35rem 0; }
.job-picker { margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.email-editor { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.email-editor textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.blanks td { vertical-align: top; padding: .25rem .4rem; }
@media (max-width: 760px) { .email-editor { grid-template-columns: 1fr; } }

/* The way back to EventReg, for a registrant who came from its box (§34.7):
   a full-width light green bar at the bottom of the meet page (Bjorn,
   2026-10-15), its button dark green with white text. */
.eventreg-back { background: #ACEF80; border-radius: var(--radius); padding: .75rem 1rem; margin: 1.25rem 0 0; text-align: center; }
.button-eventreg { background: #1F4A06; border-color: #1F4A06; color: var(--croc-paper); font-weight: 700; white-space: normal; }
.button-eventreg:hover, .button-eventreg:focus { background: #163504; border-color: #163504; color: var(--croc-paper); }