/*
 * The seat map, on the public picker and the office screen both.
 *
 * An SVG floor plan: the Aron at the front, the bimah among the men's tables,
 * the women's block to the front-left, seats as the cells. States are colour
 * and not only shape, and every seat carries its number, so what is taken is
 * legible without the key.
 */

.seat-intro {
  max-width: 44rem;
  line-height: 1.6;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

.seat-you {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  max-width: 44rem;
  margin-bottom: 1.5rem;
}
.seat-field { flex: 1 1 13rem; text-align: left; }
.seat-field__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.seat-field input,
.seat-field select {
  width: 100%;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--keyline-strong);
  border-radius: 2px;
  background: var(--parchment);
  color: var(--navy);
}

.seat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  color: var(--slate);
}
.seat-legend__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.seat-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 3px;
  border: 1px solid var(--keyline-strong);
  display: inline-block;
}
.seat-swatch--free { background: var(--parchment); }
.seat-swatch--picked { background: var(--navy); border-color: var(--navy); }
.seat-swatch--taken { background: var(--keyline); border-color: var(--keyline-strong); }
.seat-swatch--blocked {
  background: repeating-linear-gradient(45deg, var(--keyline) 0 4px, var(--parchment-deep) 4px 8px);
}

/* --------------------------------------------------------------- the gate */

.seat-gate { max-width: 34rem; margin: 0.5rem 0 2rem; }
.seat-gate__lead { line-height: 1.6; color: var(--navy); margin-bottom: 1.25rem; }
.seat-signin {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}
.seat-signin .seat-field { flex: 1 1 16rem; }
/* `display: flex` above outranks the hidden attribute, which would leave the
 * recovery form on screen when it should be put away; take it back. */
.seat-signin[hidden] { display: none; }
.seat-field[hidden] { display: none; } /* the password, until the member check passes */
.seat-signin + .seat-signin { margin-top: 1rem; } /* the recovery form, when shown */
/* Create-an-account and forgot-password, quiet under the form. */
.seat-gate__alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem;
  margin-top: 0.9rem; font-size: 0.95rem; color: var(--slate);
}
.seat-gate__said {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  color: var(--navy);
  min-height: 1.2em;
}
.seat-gate__said.is-wrong { color: var(--flag-high); }

.seat-who { color: var(--slate); font-size: 0.95rem; margin-bottom: 1.25rem; }
.seat-who strong { color: var(--navy); }

/* The plain-link buttons on this page (sign out). */
.seat-who .link,
.seat-gate .link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------------------ the floor map */

.seat-map {
  display: flex;
  justify-content: center;
}

/* Shown to a signed-in member whose membership for the season is not paid: the
   door opened, the chart did not. */
.seat-locked {
  max-width: 40rem;
  margin: 1rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--parchment-deep, #f4efe4);
  border: 1px solid var(--keyline-strong);
  border-radius: 6px;
  line-height: 1.6;
  color: var(--navy);
}
.seat-locked a { color: var(--navy); }
.seat-plan {
  width: 100%;
  max-width: 680px;
  height: auto;
  background: var(--parchment);
  border: 1px solid var(--keyline);
  border-radius: 8px;
  touch-action: manipulation;
}

/* The table footprints, under the seats. */
.seat-table {
  fill: var(--parchment-deep, #f4efe4);
  stroke: var(--keyline);
  stroke-width: 0.5;
}

/* A seat. The group is the target; the rect is the seat and the text its
   number. Upright, though the table it sits on is turned, so the number reads. */
.seat { cursor: pointer; }
.seat rect {
  fill: var(--parchment);
  stroke: var(--keyline-strong);
  stroke-width: 0.6;
  transition: fill 0.1s;
}
.seat text {
  fill: var(--navy);
  font-size: 3.9px;
  letter-spacing: -0.2px;
  font-family: var(--sans, system-ui, sans-serif);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.seat:hover rect { stroke: var(--navy); stroke-width: 1; }
.seat:focus { outline: none; }
.seat:focus-visible { outline: none; }
.seat:focus-visible rect { stroke: var(--navy); stroke-width: 1.6; }

.seat[aria-pressed="true"] rect { fill: var(--navy); stroke: var(--navy); }
.seat[aria-pressed="true"] text { fill: var(--parchment); }

/* Taken seats are inert on the picker, but the office may click one to open it. */
.seat[data-state]:not([role="button"]) { cursor: not-allowed; }
.seat[data-state="taken"] rect { fill: var(--keyline); stroke: var(--keyline-strong); }
.seat[data-state="taken"] text { fill: var(--slate-soft); }
.seat[data-state="blocked"] rect { fill: url(#hatch); stroke: var(--slate); }
.seat[data-state="blocked"] text { fill: var(--slate); }

/* A member's own paid seat: theirs, confirmed, and no longer editable - gold,
   so it reads as settled rather than as somebody else's taken grey. */
.seat[data-state="mine"] rect { fill: var(--gold-ink); stroke: var(--gold-ink); }
.seat[data-state="mine"] text { fill: var(--parchment); }

/* The Aron on the diagonal at the front, with a gold gate inset. */
.plan-aron { fill: var(--navy); }
.plan-aron__gate { fill: none; stroke: #c9a24a; stroke-width: 0.9; }
.plan-aron__label {
  fill: var(--parchment);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--sans, system-ui, sans-serif);
}

/* The bimah, among the men's tables. */
.plan-bimah { fill: var(--parchment-deep, #eadfc6); stroke: var(--slate); stroke-width: 0.6; }
.plan-bimah__core { fill: var(--navy); }
.plan-bimah__label {
  fill: var(--navy);
  font-size: 4.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--sans, system-ui, sans-serif);
}

/* The 6-ft tables carry the same grey footprint as the 8-ft ones, so a corner
 * table does not read as an empty patch of floor next to the others. */
.seat-table--sixft { fill: var(--parchment-deep); }

/* The mechitza, dotted, between the men's tables and the women's block. It is
 * left unlabelled - the curve reads as itself. */
.plan-mechitza {
  stroke: var(--slate);
  stroke-width: 1.1;
  stroke-dasharray: 3 2.4;
  stroke-linecap: round;
}

.plan-section {
  fill: var(--slate);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-anchor: middle;
  font-family: var(--sans, system-ui, sans-serif);
}

/* ------------------------------------------------------------- the tally bar */

.seat-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--parchment);
  border-top: 1px solid var(--keyline-strong);
  box-shadow: 0 -6px 20px rgba(13, 31, 69, 0.08);
}
.seat-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  flex-wrap: wrap;
}
.seat-bar__count { font-size: 1rem; color: var(--navy); }
.seat-bar__count strong { font-weight: 700; }
.seat-bar__cost { color: var(--slate); }
.seat-bar__said {
  margin: 0;
  padding: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--navy);
  min-height: 1.2em;
}
.seat-bar__said.is-wrong { color: var(--flag-high); }

@media (max-width: 560px) {
  .seat-bar__inner { justify-content: center; }
  .seat-bar__go .btn { width: 100%; }
}

/* -------------------------------------------------------- office seating */

.seat-admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.seat-admin-bar input {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--keyline-strong);
  border-radius: 2px;
  font-size: 0.95rem;
  background: var(--parchment);
  color: var(--navy);
}
.seat-detail {
  margin: 0.75rem 0;
  padding: 0.6rem 0.9rem;
  background: var(--parchment-deep, #f4efe4);
  border: 1px solid var(--keyline);
  border-radius: 4px;
}
.seat-detail p { margin: 0; }

/* ------------------------------------------------ the confirm-purchase step */

.seat-confirm {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 31, 69, 0.4); padding: 1.5rem;
}
.seat-confirm[hidden] { display: none; }
.seat-confirm__box {
  width: 100%; max-width: 30rem;
  background: var(--parchment); border: 1px solid var(--keyline-strong);
  border-radius: var(--radius, 2px); padding: 1.6rem 1.8rem;
  box-shadow: 0 24px 60px rgba(8, 21, 47, 0.35);
}
.seat-confirm__title { margin: 0 0 0.5rem; font-size: 1.3rem; color: var(--navy); }
.seat-confirm__lead { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.5; color: var(--slate); }

/* A name per seat being taken. The seat label sits over its own field, and the
   list scrolls inside the box when a big family takes a whole row. */
.seat-confirm__names { display: grid; gap: 0.7rem; margin-bottom: 1.1rem; max-height: 15rem; overflow-y: auto; }
.seat-confirm__name { display: block; text-align: left; }
.seat-confirm__seat {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.seat-confirm__name input {
  width: 100%;
  font-size: 1rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--keyline-strong);
  border-radius: 2px;
  background: var(--parchment);
  color: var(--navy);
}
.seat-confirm__summary { border-top: 1px solid var(--keyline); }
.seat-confirm__summary[hidden] { display: none; }
.seat-confirm__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--keyline);
  font-size: 0.95rem; color: var(--slate);
}
.seat-confirm__row--total { color: var(--navy); font-weight: 700; }
.seat-confirm__row--total span:last-child { color: var(--gold-ink); }
.seat-confirm__note { font-size: 0.88rem; line-height: 1.55; color: var(--slate); margin: 0.9rem 0 1.4rem; }
.seat-confirm__note.is-wrong { color: var(--flag-high); }
.seat-confirm__buttons { display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; }