/* ===========================================================================
   Yom Kippur honors board
   ---------------------------------------------------------------------------
   Palette is taken from the day itself: the white of a kittel for the ground,
   the deep indigo of Kol Nidrei night for the ink, and an antique gold that
   appears in exactly one place — an honor that has been sealed.
   =========================================================================== */

:root {
  --ground:  #f8f8f6;   /* kittel white, neutral and cool */
  --panel:   #ffffff;
  --ink:     #171a2e;   /* the night of Kol Nidrei */
  --ink-soft:#585c78;
  --ink-faint:#8b8fa6;
  --rule:    #dcdde4;
  --rule-firm:#c3c5d2;
  --indigo:  #333a6b;
  --indigo-lift:#eceef7;
  --seal:    #8a6d2b;   /* chasimah */
  --seal-wash:#f7f1e2;
  --outbid:  #7c3547;
  --focus:   #333a6b;

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hebrew:'Frank Ruhl Libre', 'SBL Hebrew', 'Times New Roman', serif;

  --measure: 62ch;
  --page: 58rem;     /* the board: name and amount within one glance */
  --page-wide: 76rem; /* the admin panel, which is tables */
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums lining-nums;
}

:where(a) { color: var(--indigo); text-underline-offset: 2px; }

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

.shell { max-width: var(--page); margin: 0 auto; padding: 0 1.25rem 2.5rem; }
.shell.wide { max-width: var(--page-wide); }

/* --------------------------------------------------------------- masthead */

.masthead { padding: 2rem 0 1rem; }

.masthead .shul {
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 0.2rem;
}

.masthead h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.875rem, 4.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
}

.masthead .dateline {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0.35rem 0 0;
}

.masthead .lede {
  max-width: var(--measure);
  margin: 0.9rem 0 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #2b2f47;
}

.masthead .lede p { margin: 0 0 0.35rem; }
.masthead .lede p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ tally */

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 1.1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
}

.tally div { display: flex; flex-direction: column; gap: 0.1rem; }

.tally .figure {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1;
  font-weight: 500;
}

.tally .caption { font-size: 0.8125rem; color: var(--ink-soft); }

/* --------------------------------------------------------- the tote board */

/* A split-flap board, the kind auction rooms and railway stations ran on.
   The running total is the one number on the page that moves, so it is the
   one thing that gets to be mechanical. Everything around it stays quiet. */

.tote-stat { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }

.tote { display: inline-flex; gap: 2px; perspective: 260px; }

.flap {
  position: relative;
  min-width: 0.78em;
  padding: 0.1em 0.09em 0.13em;
  background: var(--ink);
  color: #f4f3ee;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 1px 2px rgba(23, 26, 46, 0.22);
}

/* the hinge the flap turns on */
.flap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
}

.flap.thin { min-width: 0.44em; }

.flap.turning { animation: flap-turn 400ms ease-in-out both; transform-origin: 50% 50%; }

@keyframes flap-turn {
  0%   { transform: rotateX(0deg); }
  45%  { transform: rotateX(-82deg); }
  100% { transform: rotateX(0deg); }
}

/* ------------------------------------------------------------- the nudge */

.nudge {
  margin: 0.9rem 0 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 54ch;
}

.nudge[hidden] { display: none; }

/* ------------------------------------------------------------------ notice */

.notice {
  margin: 1rem 0 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--rule-firm);
  border-left: 3px solid var(--indigo);
  background: var(--panel);
  font-size: 0.9375rem;
  max-width: var(--measure);
}

.notice.demo { border-left-color: var(--seal); }
.notice.shut { border-left-color: var(--outbid); }
.notice strong { font-weight: 600; }

/* ------------------------------------------------------------------- jumps */

.jumps {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  margin: 1.1rem 0 0;
  padding: 0.45rem 0;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  scrollbar-width: thin;
}

.jumps a {
  flex: 0 0 auto;
  padding: 0.3rem 0.7rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
}

.jumps a:hover { color: var(--ink); background: var(--indigo-lift); }

/* -------------------------------------------------------- sections + spine */

/* The hairline down the left edge walks the order of the day. It is a real
   sequence — Kol Nidrei through Neilah — so the thread carries information. */
.band {
  position: relative;
  scroll-margin-top: 3.5rem;
  padding: 1.5rem 0 0.25rem 1.5rem;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.band:last-of-type { border-left-color: transparent; }

.band::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 2.05rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--indigo);
}

.band > h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0;
  letter-spacing: -0.005em;
}

.band > .when {
  margin: 0 0 0 0.6rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.band > .ledger { flex-basis: 100%; margin-top: 0.55rem; }

/* ------------------------------------------------------------------ ledger */

.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: 'name state act';
  align-items: center;
  column-gap: 1.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  transition: background-color 900ms ease-out;
}

/* The one piece of unprompted motion on the page: a row that just changed
   gets a brief gold wash, so a bid landing while you are reading is visible. */
.row.just-changed { background: var(--seal-wash); transition: none; }

.row-name {
  grid-area: name;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.85rem;
  row-gap: 0.1rem;
}

.row-title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  order: 1;
}

.row-title .he {
  font-family: var(--hebrew);
  font-size: 0.875rem;
  color: var(--ink-faint);
  direction: rtl;
}

.row-note {
  order: 3;
  flex-basis: 100%;   /* no max-width here: it would clamp the flex base size
                         and let a short note share the line with the prices */
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.row-prices {
  order: 2;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  display: flex;
  gap: 0.15rem 0.8rem;
  flex-wrap: wrap;
}

.row-prices b { font-weight: 600; color: var(--ink); }

.row-state { grid-area: state; text-align: right; min-width: 8.5rem; }

.state-amount {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  display: block;
}

.state-who {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--ink-soft);
  display: block;
  line-height: 1.25;
}

.state-label { font-size: 0.75rem; color: var(--ink-faint); display: block; }

/* A column of "No bids yet" in faint grey reads as a dead room. The same
   column saying "Yours to open", in the ink of the page, reads as an offer. */
.state-label.open { color: var(--indigo); font-style: italic; font-size: 0.8125rem; }

.row.is-sealed .state-amount,
.row.is-sealed .state-who { color: var(--seal); }

.row.is-sealed .state-label { color: var(--seal); font-weight: 600; }

.row.is-sealed .row-title { color: var(--seal); }

.row.is-quiet .row-title { color: var(--ink-soft); }

.state-mine {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--indigo);
}

.state-mine.out { color: var(--outbid); }

.row-act { grid-area: act; }

/* The More info trigger sits at the end of the benefit line rather than in
   its own column, so an honor that carries an explanation is no taller than
   one that does not. */
.row-note .more {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: var(--indigo);
  padding: 0;
  margin-left: 0.55rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule-firm);
  text-underline-offset: 2px;
  white-space: nowrap;
}

.row-note .more:hover { text-decoration-color: var(--indigo); }

/* ----------------------------------------------------------- info panel */

.sheet .prose { margin: 0.9rem 0 0; }

.sheet .prose p {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0 0 0.7rem;
  color: #2b2f47;
}

.sheet .prose p:last-child { margin-bottom: 0; }

.sheet .sources {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.sheet .sources h3 {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 0.45rem;
}

.sheet .sources ul { list-style: none; margin: 0; padding: 0; }

.sheet .sources li {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.sheet .sources a { color: var(--indigo); }

/* ----------------------------------------------------------------- buttons */

.btn {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.5rem 0.95rem;
  border-radius: 4px;
  border: 1px solid var(--indigo);
  background: var(--indigo);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover { background: #2a3059; border-color: #2a3059; }

.btn.ghost { background: transparent; color: var(--indigo); }
.btn.ghost:hover { background: var(--indigo-lift); }

.btn.quiet {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--rule-firm);
  font-weight: 500;
}
.btn.quiet:hover { background: #f0f0f3; color: var(--ink); }

.btn.danger { background: transparent; color: var(--outbid); border-color: var(--outbid); }
.btn.danger:hover { background: #fbf2f4; }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn.small { padding: 0.4rem 0.7rem; font-size: 0.8125rem; }

/* A rubber stamp, because that is what an auction room actually did to a
   lot that had gone. The only capitals on the page, and it has earned them. */
.taken-mark {
  display: inline-block;
  transform: rotate(-4deg);
  padding: 0.16rem 0.5rem;
  border: 2px solid var(--seal);
  border-radius: 3px;
  color: var(--seal);
  background: var(--seal-wash);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* -------------------------------------------------------------- your bids */

.mine {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 30;
  width: min(21rem, calc(100vw - 2.5rem));
  background: var(--panel);
  border: 1px solid var(--rule-firm);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(23, 26, 46, 0.14);
  overflow: hidden;
}

.mine[hidden] { display: none; }

.mine > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.mine > summary::-webkit-details-marker { display: none; }
.mine > summary .count { color: var(--ink-soft); font-weight: 500; }

.mine ul { list-style: none; margin: 0; padding: 0 1rem 0.85rem; max-height: 17rem; overflow-y: auto; }

.mine li { padding: 0.55rem 0; border-top: 1px solid var(--rule); font-size: 0.875rem; }

.mine .mine-honor { font-family: var(--serif); font-size: 1.0625rem; }
.mine .mine-line { color: var(--ink-soft); font-size: 0.8125rem; }
.mine .mine-line.out { color: var(--outbid); font-weight: 600; }
.mine .mine-line.won { color: var(--seal); font-weight: 600; }

/* ------------------------------------------------------------------ dialog */

dialog {
  padding: 0;
  border: 1px solid var(--rule-firm);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(86vh, 48rem);
  overflow: auto;
}

dialog::backdrop { background: rgba(23, 26, 46, 0.42); }

.sheet { padding: 1.5rem 1.6rem 1.6rem; }

.sheet h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.75rem;
  margin: 0 0 0.15rem;
  line-height: 1.15;
}

.sheet .he {
  font-family: var(--hebrew);
  color: var(--ink-faint);
  direction: rtl;
  display: block;
  margin-bottom: 0.5rem;
}

.sheet .standing {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

.field { margin-bottom: 1.1rem; }

.field > label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.field .hint { font-size: 0.8125rem; color: var(--ink-soft); margin: 0.3rem 0 0; }

input[type='text'], input[type='number'], input[type='tel'],
input[type='email'], input[type='password'], select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule-firm);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}

textarea { resize: vertical; min-height: 4.5rem; }

input:disabled { background: #f3f3f5; color: var(--ink-faint); }

.amount-wrap { position: relative; }
.amount-wrap span {
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); pointer-events: none;
}
.amount-wrap input { padding-left: 1.55rem; font-size: 1.125rem; font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

.chip {
  font-family: var(--sans);
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
}

.chip:hover { border-color: var(--indigo); color: var(--indigo); }
.chip.seal { border-color: var(--seal); color: var(--seal); }
.chip.seal:hover { background: var(--seal-wash); }

.person {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.85rem;
  margin-bottom: 0.6rem;
  background: #fcfcfd;
}

.person .person-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.person .person-head span { font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); }

.person .drop {
  border: 0; background: none; cursor: pointer;
  color: var(--outbid); font-size: 0.8125rem; font-family: var(--sans); padding: 0;
}

.person .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; }

.sheet-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.problem {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  background: #fbf2f4;
  border: 1px solid #e6c9d1;
  color: var(--outbid);
  font-size: 0.875rem;
}

.problem[hidden] { display: none; }

.done { text-align: center; padding: 0.5rem 0 0; }
.done .mark { font-family: var(--serif); font-size: 2.5rem; color: var(--seal); line-height: 1; }
.done h2 { margin-top: 0.6rem; }
.done p { color: var(--ink-soft); max-width: 40ch; margin-inline: auto; }

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

.foot {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.foot a { color: var(--indigo); }

/* ------------------------------------------------------------------- admin */

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}

.tabs { display: flex; gap: 0.25rem; margin: 1.5rem 0; border-bottom: 1px solid var(--rule); }

.tabs button {
  font-family: var(--sans);
  font-size: 0.9375rem;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  margin-bottom: -1px;
}

.tabs button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--indigo); font-weight: 600; }

table.grid { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

table.grid th {
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--rule-firm);
  position: sticky;
  top: 0;
  background: var(--ground);
}

table.grid td { padding: 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid tr.void td { color: var(--ink-faint); text-decoration: line-through; }
table.grid td.num { text-align: right; white-space: nowrap; }
table.grid .contact { color: var(--ink-soft); font-size: 0.8125rem; }

.gate { max-width: 24rem; margin: 6rem auto; }

.wrapline { display: block; }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 720px) {
  .shell { padding: 0 1rem 5rem; }
  .masthead { padding: 1.5rem 0 0.85rem; }

  .band { padding-left: 1.15rem; }
  .band::before { top: 1.95rem; }

  .row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'name  state'
      'act   act';
    row-gap: 0.4rem;
    column-gap: 0.9rem;
    align-items: start;
    padding: 0.55rem 0;
  }

  .row-prices { font-size: 0.78rem; gap: 0.1rem 0.85rem; }
  .row-note { font-size: 0.78rem; }
  .row-state { min-width: 5.75rem; }
  .row-act { justify-self: stretch; }
  .row-act .btn { width: 100%; }
  .flap { font-size: 1.25rem; }
  .nudge { font-size: 1rem; }
  .state-amount { font-size: 1.0625rem; }
  .row-title { font-size: 1rem; }

  .person .two { grid-template-columns: 1fr; }

  .mine { right: 0.75rem; left: 0.75rem; bottom: 0.75rem; width: auto; }

  .sheet { padding: 1.15rem 1.15rem 1.25rem; }
  .sheet-actions { flex-direction: column-reverse; }
  .sheet-actions .btn { width: 100%; }

  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid thead { display: none; }
  table.grid tr { border-bottom: 1px solid var(--rule-firm); padding: 0.6rem 0; }
  table.grid td { border: 0; padding: 0.15rem 0; }
  table.grid td.num { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .jumps, .row-act, .mine, .btn, .notice.demo { display: none !important; }
  body { background: #fff; }
  .band { break-inside: avoid; }
  .row { break-inside: avoid; }
}