/* ==========================================================================
   שולחן קנדל · The Kandel Table
   Shabbat meal coordination — hand-rolled CSS, RTL-first, light + dark.
   ========================================================================== */

:root {
  --bg:            #fbf9f6;
  --bg-elev:       #ffffff;
  --bg-sunk:       #f2efe9;
  --border:        #e7e1d6;
  --border-strong: #d2c8b6;
  --text:          #241f1a;
  --text-dim:      #6a6053;
  --text-faint:    #968b78;

  --accent:        #ef6c1a;   /* warm and loud on purpose */
  --accent-soft:   #ffeadb;
  --accent-text:   #c1500c;

  --wine:          #7b2d43;   /* kiddush */
  --wine-soft:     #f5e3e8;

  --olive:         #5d7248;
  --olive-soft:    #e6ecdf;

  --danger:        #a83232;
  --danger-soft:   #f8e2e2;

  --shadow-sm: 0 1px 2px rgba(44, 38, 33, .07), 0 1px 3px rgba(44, 38, 33, .05);
  --shadow-md: 0 2px 6px rgba(44, 38, 33, .08), 0 8px 20px rgba(44, 38, 33, .07);

  --radius:    12px;
  --radius-sm: 8px;

  --font: "Heebo", "Segoe UI", "Arial Hebrew", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #1a1714;
    --bg-elev:       #241f1b;
    --bg-sunk:       #14110f;
    --border:        #3a332c;
    --border-strong: #4d443a;
    --text:          #f0eae1;
    --text-dim:      #b3a897;
    --text-faint:    #857a6a;

    --accent:        #ff8f45;
    --accent-soft:   #40291a;
    --accent-text:   #ffab72;

    --wine:          #c96b83;
    --wine-soft:     #38222a;

    --olive:         #9ab37f;
    --olive-soft:    #26301d;

    --danger:        #e07070;
    --danger-soft:   #3a2020;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  --bg:            #1a1714;
  --bg-elev:       #241f1b;
  --bg-sunk:       #14110f;
  --border:        #3a332c;
  --border-strong: #4d443a;
  --text:          #f0eae1;
  --text-dim:      #b3a897;
  --text-faint:    #857a6a;
  --accent:        #ff8f45;
  --accent-soft:   #40291a;
  --accent-text:   #ffab72;
  --wine:          #c96b83;
  --wine-soft:     #38222a;
  --olive:         #9ab37f;
  --olive-soft:    #26301d;
  --danger:        #e07070;
  --danger-soft:   #3a2020;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
}

/* --- base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  direction: rtl;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 .8em; }
a  { color: var(--accent-text); }

/* The English half of every bilingual label. */
.en {
  font-size: .78em;
  color: var(--text-faint);
  font-weight: 400;
  direction: ltr;
  unicode-bidi: isolate;
}
h1 .en, h2 .en, h3 .en { display: block; margin-top: .1em; }

.muted  { color: var(--text-dim); }
.faint  { color: var(--text-faint); font-size: .87rem; }
.nowrap { white-space: nowrap; }
.ltr    { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.center { text-align: center; }

/* --- layout -------------------------------------------------------------- */

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.topbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
}
.brand .flame { font-size: 1.25rem; line-height: 1; }
.brand small {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: .02em;
}

nav.tabs {
  display: flex;
  gap: .2rem;
  flex-wrap: wrap;
  margin-inline-start: auto;
}
nav.tabs a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
nav.tabs a:hover { background: var(--bg-sunk); color: var(--text); }
nav.tabs a.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--border-strong);
}

/* --- cards & panels ------------------------------------------------------ */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.card-head h2, .card-head h3 { margin: 0; }

.hero {
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-elev) 65%);
  border-color: var(--border-strong);
}

/* The two facts that matter most: whose place, and what time. */
.headline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: start;
  margin: .8rem 0 .2rem;
}
.headline::before {
  content: "";
  grid-column: 2;
  width: 1px;
  align-self: stretch;
  background: var(--border-strong);
}
.headline-where { grid-column: 1; }
.headline-when  { grid-column: 3; }

.headline .k {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: .1rem;
}
.headline strong {
  display: block;
  font-size: clamp(1.5rem, 5.5vw, 2.3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}
.headline .clock {
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.headline .addr {
  display: block;
  font-size: .9rem;
  color: var(--text-dim);
  margin-top: .2rem;
}

@media (max-width: 560px) {
  .headline { grid-template-columns: 1fr; gap: .9rem; }
  .headline::before { display: none; }
  .headline-where, .headline-when { grid-column: 1; }
  .headline-when {
    border-top: 1px solid var(--border-strong);
    padding-top: .8rem;
  }
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.stat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
}
.stat .n {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.stat .l { font-size: .85rem; color: var(--text-dim); }
.stat .l .en { display: block; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .45rem .9rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--bg-sunk); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-text); border-color: var(--accent-text); }

.btn-danger { color: var(--danger); border-color: var(--border-strong); }
.btn-danger:hover { background: var(--danger-soft); }

.btn-sm { padding: .25rem .55rem; font-size: .82rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }

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

.field { margin-bottom: .85rem; }
.field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: .25rem;
}
input[type="text"], input[type="number"], input[type="password"],
input[type="datetime-local"], input[type="date"], input[type="tel"],
select, textarea {
  width: 100%;
  padding: .48rem .6rem;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="datetime-local"], input[type="date"] { direction: ltr; text-align: start; }
textarea { min-height: 70px; resize: vertical; }

.form-grid {
  display: grid;
  gap: 0 .85rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

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

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}
table.data th, table.data td {
  padding: .55rem .7rem;
  text-align: start;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data th {
  background: var(--bg-sunk);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--bg-sunk); }
table.data td.actions { white-space: nowrap; text-align: end; }

/* --- pills / badges ------------------------------------------------------ */

.pill {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-yes   { background: var(--olive-soft);  color: var(--olive); }
.pill-no    { background: var(--danger-soft); color: var(--danger); }
.pill-maybe { background: var(--accent-soft); color: var(--accent-text); }
.pill-wine  { background: var(--wine-soft);   color: var(--wine); }
.pill-plain { background: var(--bg-sunk);     color: var(--text-dim); }

/* --- misc ---------------------------------------------------------------- */

.empty {
  text-align: center;
  padding: 2.2rem 1rem;
  color: var(--text-faint);
}
.empty .big { font-size: 2rem; display: block; margin-bottom: .3rem; }

#map {
  height: 460px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  z-index: 1;
}
.leaflet-container { font: inherit; direction: ltr; }
.leaflet-popup-content { direction: rtl; text-align: right; margin: .6rem .8rem; }

.toast {
  position: fixed;
  inset-block-end: 1.2rem;
  inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--text);
  color: var(--bg);
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  z-index: 2000;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; }

.divider { height: 1px; background: var(--border); margin: 1.1rem 0; border: 0; }

.menu-cat { margin-bottom: 1rem; }
.menu-cat h4 {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: .25rem;
  margin-bottom: .4rem;
}
.menu-cat ul { list-style: none; margin: 0; padding: 0; }
.menu-cat li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  border-bottom: 1px dashed var(--border);
}
.menu-cat li:last-child { border-bottom: 0; }
.menu-cat li .dish { font-weight: 600; }
.menu-cat li .who { color: var(--text-dim); font-size: .87rem; margin-inline-start: auto; }

/* --- login page ---------------------------------------------------------- */

.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(900px 500px at 50% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 2rem 1.6rem 1.6rem;
  text-align: center;
}
.login-card .flame { font-size: 2.6rem; line-height: 1; display: block; margin-bottom: .3rem; }
.login-card h1 { font-size: 1.45rem; margin-bottom: .1rem; }
.login-card .sub { color: var(--text-faint); font-size: .85rem; margin-bottom: 1.4rem; }
.login-card input { text-align: center; font-size: 1.05rem; letter-spacing: .1em; }
.login-err {
  color: var(--danger);
  font-size: .87rem;
  font-weight: 600;
  min-height: 1.3em;
  margin-top: .6rem;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 15px; }
  .topbar-inner { padding: .5rem .75rem; }
  nav.tabs { margin-inline-start: 0; width: 100%; overflow-x: auto; }
  nav.tabs a { padding: .32rem .6rem; font-size: .86rem; }
  .wrap { padding: 0 .75rem 3rem; }
  .card { padding: .9rem; }
  #map { height: 340px; }
  .stat .n { font-size: 1.6rem; }
}

@media print {
  .topbar, .btn, .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* --- who-am-I picker ------------------------------------------------------ */

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem;
  margin-top: 1.4rem;
}

.pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.2rem .6rem;
  font: inherit;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.pick:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pick-initial {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 1.5rem;
  font-weight: 800;
}
.pick-name { font-size: 1.05rem; font-weight: 700; color: var(--text); }

#meChip { font-weight: 700; }

/* --- pantry chips --------------------------------------------------------- */

.chip-wrap { display: flex; flex-wrap: wrap; gap: .4rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  font: inherit;
  font-size: .88rem;
  background: var(--bg-sunk);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
}
.chip-pick { cursor: pointer; }
.chip-pick:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }

.chip-x {
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 .1rem;
  cursor: pointer;
}
.chip-x:hover { color: var(--danger); }

/* --- segmented control (dinner panes) ------------------------------------- */

.segmented {
  display: flex;
  gap: .25rem;
  padding: .25rem;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 1rem;
  overflow-x: auto;
}
.seg {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem .8rem;
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-dim);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.seg:hover { color: var(--text); }
.seg-on {
  background: var(--bg-elev);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}
.seg-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  padding: 0 .3em;
  font-size: .78em;
  font-weight: 700;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.seg-on .seg-badge { background: var(--accent); color: #fff; }

/* --- pantry management ---------------------------------------------------- */

.chip-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}
.chip input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }
.chip-name {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: start;
}
.chip-name:hover { text-decoration: underline; }

.pantry-add {
  display: flex;
  gap: .4rem;
  margin-top: .8rem;
}
.pantry-add input { flex: 1; }

details.card > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .4rem;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
  content: "▸";
  color: var(--text-faint);
  transition: transform .15s ease;
}
details.card[open] > summary::before { transform: rotate(90deg); }

/* --- category colour ------------------------------------------------------
   Everything below reads one inline custom property, --cat-h (an HSL angle),
   so a category is recoloured by changing a single number in the data. The
   lightness/saturation pairs are chosen to stay readable in both themes. */

/* A derived custom property resolves var(--cat-h) where it is DEFINED, so
   building the colour on :root would freeze every category at the default hue.
   Only the saturation/lightness pairs live here; the hsl() is composed inside
   each rule, where --cat-h is the element's own. */
:root {
  --cat-s-bg: 82%;  --cat-l-bg: 95%;
  --cat-s-bd: 55%;  --cat-l-bd: 78%;
  --cat-s-tx: 62%;  --cat-l-tx: 32%;
  --cat-s-sd: 62%;  --cat-l-sd: 45%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-s-bg: 40%;  --cat-l-bg: 18%;
    --cat-s-bd: 35%;  --cat-l-bd: 34%;
    --cat-s-tx: 70%;  --cat-l-tx: 74%;
    --cat-s-sd: 55%;  --cat-l-sd: 58%;
  }
}
:root[data-theme="dark"] {
  --cat-s-bg: 40%;  --cat-l-bg: 18%;
  --cat-s-bd: 35%;  --cat-l-bd: 34%;
  --cat-s-tx: 70%;  --cat-l-tx: 74%;
  --cat-s-sd: 55%;  --cat-l-sd: 58%;
}

.chip-cat {
  background: hsl(var(--cat-h, 225) var(--cat-s-bg) var(--cat-l-bg));
  border-color: hsl(var(--cat-h, 225) var(--cat-s-bd) var(--cat-l-bd));
  color: hsl(var(--cat-h, 225) var(--cat-s-tx) var(--cat-l-tx));
}
.chip-cat:hover {
  border-color: hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
  filter: brightness(.97);
}
.chip-cat.chip-on {
  border-color: hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
  box-shadow: inset 0 0 0 1px hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
}

/* The little name badge that labels a colour group. */
.cat-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  align-self: center;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  background: hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
  color: #fff;
  white-space: nowrap;
}

.coverage {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
}
.cat-on  { opacity: 1; }
.cat-off {
  background: transparent;
  color: var(--text-faint);
  border: 1px dashed var(--border-strong);
  font-weight: 500;
}

/* Category headings and cards carry a stripe of their own colour. */
.menu-cat h4 {
  color: hsl(var(--cat-h, 225) var(--cat-s-tx) var(--cat-l-tx));
  border-bottom-color: hsl(var(--cat-h, 225) var(--cat-s-bd) var(--cat-l-bd));
}
.cat-card {
  border-inline-start: 4px solid hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
}
.cat-card > .card-head h3 { color: hsl(var(--cat-h, 225) var(--cat-s-tx) var(--cat-l-tx)); }

.swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
  cursor: pointer;
}
.swatch-on {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg),
              0 0 0 4px hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
}

/* --- a brighter shell ----------------------------------------------------- */

.hero {
  background:
    radial-gradient(680px 220px at 100% 0%, hsl(150 70% 94%), transparent 70%),
    linear-gradient(135deg, var(--accent-soft), var(--bg-elev) 62%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    background:
      radial-gradient(680px 220px at 100% 0%, hsl(150 40% 16%), transparent 70%),
      linear-gradient(135deg, var(--accent-soft), var(--bg-elev) 62%);
  }
}

.stat { border-block-start: 3px solid var(--accent); }
.stat:nth-child(2) { border-block-start-color: hsl(150 60% 45%); }
.stat:nth-child(3) { border-block-start-color: hsl(200 70% 50%); }
.stat:nth-child(4) { border-block-start-color: hsl(315 60% 55%); }
.stat:nth-child(2) .n { color: hsl(150 60% 34%); }
.stat:nth-child(3) .n { color: hsl(200 70% 38%); }
.stat:nth-child(4) .n { color: hsl(315 55% 44%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat:nth-child(2) .n { color: hsl(150 55% 62%); }
  :root:not([data-theme="light"]) .stat:nth-child(3) .n { color: hsl(200 70% 66%); }
  :root:not([data-theme="light"]) .stat:nth-child(4) .n { color: hsl(315 60% 70%); }
}

.pick-initial {
  background: linear-gradient(135deg, hsl(20 90% 88%), hsl(150 60% 88%));
  color: hsl(20 70% 30%);
}
.pick:nth-child(2) .pick-initial { background: linear-gradient(135deg, hsl(200 80% 88%), hsl(265 60% 90%)); color: hsl(205 70% 32%); }
.pick:nth-child(3) .pick-initial { background: linear-gradient(135deg, hsl(315 70% 90%), hsl(20 80% 90%));  color: hsl(315 55% 36%); }
.pick:nth-child(4) .pick-initial { background: linear-gradient(135deg, hsl(150 60% 88%), hsl(200 70% 90%)); color: hsl(155 55% 28%); }

nav.tabs a.active { border-color: var(--accent); }
.seg-on { color: var(--accent-text); box-shadow: var(--shadow-sm); }

/* --- month calendar ------------------------------------------------------- */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .3rem;
}
.cal-head {
  margin-top: 1rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-faint);
  text-align: center;
}
.cal-head > div { padding: .2rem 0; }

.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .15rem;
  min-height: 74px;
  padding: .3rem .35rem;
  font: inherit;
  text-align: start;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.cal-cell:hover { border-color: var(--accent); }
.cal-blank { background: transparent; border-color: transparent; cursor: default; }
.cal-past { opacity: .5; }
.cal-fri { background: var(--bg-sunk); }
.cal-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.cal-num { font-size: .85rem; font-weight: 700; color: var(--text-dim); }
.cal-today .cal-num { color: var(--accent-text); }

.cal-has-event {
  background: var(--accent-soft);
  border-color: var(--border-strong);
}
.cal-ev {
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-suggest { border-style: dashed; border-color: var(--accent); }
.cal-tip {
  font-size: .66rem;
  font-weight: 700;
  color: var(--accent-text);
  opacity: .85;
}

.cal-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: auto;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
  flex: none;
}
.dot-no {
  background: transparent;
  border: 2px solid hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
  opacity: .65;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: .6rem 0 .2rem;
  font-size: .85rem;
  color: var(--text-dim);
}
.cal-key { display: inline-flex; align-items: center; gap: .3rem; }

@media (max-width: 560px) {
  .cal-cell { min-height: 58px; padding: .25rem; }
  .cal-ev, .cal-tip { display: none; }
  .cal-has-event { box-shadow: inset 0 -3px 0 var(--accent); }
}

/* --- address checking ----------------------------------------------------- */

.addr-check { margin-top: .6rem; }
.mini-map {
  height: 190px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  overflow: hidden;
}
.addr-result { margin-top: .3rem; }

/* ==========================================================================
   Design pass — the look drafted on the canvas, ported in.
   ========================================================================== */

:root { --radius-lg: 20px; }

.card      { border-radius: var(--radius-lg); }
.stat      { border-radius: 14px; }
.btn       { border-radius: 12px; }

/* --- the hero: whose place and what time, as a solid colour block ---------- */

.hero-card {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 1rem;
}

.hero-solid {
  background: hsl(20 78% 52%);
  color: #fff;
  padding: 1.15rem 1.3rem 1.3rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-solid { background: hsl(20 62% 44%); }
}
:root[data-theme="dark"] .hero-solid { background: hsl(20 62% 44%); }

.hero-solid .hero-kicker {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 700;
  color: #ffe3cd;
  letter-spacing: .04em;
  margin-bottom: .85rem;
}
.hero-solid .hero-kicker .dot-sep {
  width: 4px; height: 4px; border-radius: 50%; background: #ffb887; flex: none;
}

.hero-solid .headline { margin: 0; }
.hero-solid .headline::before { background: rgba(255, 255, 255, .3); }
.hero-solid .headline .k { color: #ffcaa4; }
.hero-solid .headline strong { color: #fff; font-size: clamp(1.7rem, 6.5vw, 2.5rem); }
.hero-solid .headline .clock { color: #fff; }
.hero-solid .headline .addr { color: #ffe9d8; }

.hero-solid .hero-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .28);
  font-size: .87rem;
  color: #fff6ef;
}
.hero-solid .hero-meta .faint-on-solid { color: #ffcaa4; }
.hero-solid .hero-note { margin: .7rem 0 0; font-size: .87rem; color: #ffe0c8; }

.hero-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .75rem;
  background: var(--bg-elev);
}
.hero-actions .btn {
  flex: 1 1 auto;
  min-height: 44px;
  background: var(--bg);
  border-color: var(--border);
}
.hero-actions .btn:hover { background: var(--bg-sunk); }

/* the primary action must not be flattened by the rule above */
.hero-actions .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.hero-actions .btn-primary:hover { background: var(--accent-text); border-color: var(--accent-text); }

/* --- people carry an initial in their own colour --------------------------- */

.avatar {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
  color: #fff;
  font-size: .78em;
  font-weight: 800;
  flex: none;
  line-height: 1;
}
.avatar-lg { width: 2.6em; height: 2.6em; font-size: 1em; }

.who-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .7rem .25rem .3rem;
  border-radius: 999px;
  background: hsl(var(--cat-h, 225) var(--cat-s-bg) var(--cat-l-bg));
  border: 1px solid hsl(var(--cat-h, 225) var(--cat-s-bd) var(--cat-l-bd));
  color: hsl(var(--cat-h, 225) var(--cat-s-tx) var(--cat-l-tx));
  font-size: .85rem;
  font-weight: 700;
}

/* --- chrome icons ---------------------------------------------------------- */

.ico { width: 1em; height: 1em; flex: none; }
.btn .ico { width: 1.05em; height: 1.05em; }

nav.tabs a { gap: .4rem; }
nav.tabs a .ico { width: 1.15em; height: 1.15em; }

/* --- anything tappable clears the 44px floor ------------------------------- */

.chip, .chip-pick { min-height: 44px; padding-block: 0; }
.menu-cat li { min-height: 40px; }

/* --- phones: one navigation row, at the top, that scrolls sideways ---------
   A fixed bar at the bottom of the viewport sits under the browser's own URL
   bar on a phone, which hid it. The top row is where it works. */

@media (max-width: 720px) {
  .topbar-inner { padding: .5rem .6rem; gap: .5rem; }
  .topbar-inner nav.tabs {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .15rem;
  }
  .topbar-inner nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs a {
    flex: none;
    min-height: 44px;
    padding: .4rem .7rem;
    font-size: .84rem;
  }
}

/* --- category photos ------------------------------------------------------- */

.cat-card.has-photo { padding-top: 0; overflow: hidden; }

.cat-photo {
  margin: 0 -15px .9rem;
  /* a banner, not a hero: on a wide card the ratio alone would make it 450px */
  height: clamp(120px, 22vw, 190px);
  overflow: hidden;
  position: relative;
}
.cat-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* a wash of the category's own colour ties the photo to the group */
.cat-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd) / .18),
    hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd) / .02) 55%,
    var(--bg-elev));
}

ul.credits { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .55rem; }
ul.credits li { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--text-dim); }
ul.credits img { width: 46px; height: 31px; object-fit: cover; border-radius: 6px; flex: none; }

/* --- named map pins -------------------------------------------------------- */

.name-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: grid;
  justify-items: center;
  gap: 2px;
  white-space: nowrap;
  pointer-events: auto;
}
.name-pin .np-dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.name-pin .np-label {
  display: grid;
  justify-items: center;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid hsl(var(--cat-h, 225) var(--cat-s-bd) var(--cat-l-bd));
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.name-pin .np-label em {
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  color: var(--text-dim);
}
/* away from home reads at a glance */
.name-pin.away .np-dot { border-style: dashed; border-color: var(--accent); }
.name-pin.away .np-label em { color: var(--accent-text); }

/* --- headcount stepper ----------------------------------------------------- */

.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elev);
}
.stepper .step {
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent-text);
  background: var(--bg);
  border: 0;
  cursor: pointer;
}
.stepper .step:hover { background: var(--accent-soft); }
.stepper input {
  width: 52px;
  min-height: 44px;
  border: 0;
  border-inline: 1px solid var(--border);
  border-radius: 0;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--bg-elev);
}
.stepper input:focus { box-shadow: none; }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number] { -moz-appearance: textfield; }

.who-chip input[type="checkbox"] { accent-color: hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd)); }

/* --- photographic backdrops ------------------------------------------------
   Built from the same eleven Commons photos, blurred hard and held well back:
   a backdrop has to stay behind the text, not compete with it. */

.hero-solid {
  position: relative;
  isolation: isolate;
}
.hero-solid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/bg/hero.jpg") center/cover no-repeat;
  opacity: .22;
  mix-blend-mode: luminosity;
}

.login-screen {
  position: relative;
  isolation: isolate;
}
.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/bg/welcome.jpg") center/cover no-repeat;
  opacity: .3;
}
.login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(251,249,246,.72), rgba(251,249,246,.94));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login-screen::after {
    background: linear-gradient(to bottom, rgba(26,23,20,.78), rgba(26,23,20,.95));
  }
}

/* The pick-your-name screen sits on the same backdrop. */
.table-stage {
  position: relative;
  isolation: isolate;
}
.table-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/bg/hero.jpg") center/cover no-repeat;
  opacity: .16;
}

/* --- the memory game ------------------------------------------------------- */

.game-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
  font-size: .92rem;
  color: var(--text-dim);
}
.game-stats strong { font-size: 1.15rem; color: var(--text); font-variant-numeric: tabular-nums; }

.memo-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: .5rem;
  /* A memory board wants cards you can take in at a glance: stretched to a
     desktop card width they came out 236px each, which is a poster, not a game. */
  max-width: 520px;
  margin-inline: auto;
}

.memo {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 800px;
  min-height: 76px;
}
.memo-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.3, .8, .4, 1);
}
.memo.up .memo-inner { transform: rotateY(180deg); }

.memo-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}

.memo-back {
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.07) 8px 16px),
    linear-gradient(150deg, var(--accent), hsl(20 62% 38%));
  border: 2px solid var(--accent-text);
}
.memo-mark { font-size: 1.6rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

.memo-front {
  transform: rotateY(180deg);
  background: hsl(var(--cat-h, 225) var(--cat-s-bg) var(--cat-l-bg));
  border: 2px solid hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
  align-content: stretch;
}
.memo-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.memo-name {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: .2rem .3rem;
  font-size: .66rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memo.done { cursor: default; }
.memo.done .memo-front {
  border-color: hsl(150 55% 45%);
  box-shadow: 0 0 0 2px hsl(150 55% 45%);
}
.memo.done .memo-inner { animation: matched .45s ease; }
@keyframes matched {
  40% { transform: rotateY(180deg) scale(1.07); }
}

.win-card { text-align: center; }
.win-card h2 { font-size: 1.7rem; }

@media (max-width: 560px) {
  .memo-grid { gap: .35rem; }
  .memo-name { font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .memo-inner { transition: none; }
  .memo.done .memo-inner { animation: none; }
}

/* --- catch & seat ---------------------------------------------------------- */

.catch-stage {
  position: relative;
  width: 100%;
  /* A rounded rectangle, not a circle: the round mask cut the corners off the
     play area and clipped anyone orbiting near the rim. */
  max-width: 640px;
  aspect-ratio: 1;
  min-height: 380px;
  margin-inline: auto;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 46%, var(--accent-soft), transparent 66%),
    var(--bg-sunk);
  border: 1px solid var(--border);
  overflow: hidden;
  touch-action: manipulation;
  transition: box-shadow .2s ease;
}
.catch-stage.cleared { box-shadow: inset 0 0 0 6px hsl(150 60% 50%); }

.catch-table {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #d8a15f, #a9702f 70%, #8a5822);
  box-shadow: 0 0 0 6px #7d4f1e, 0 10px 22px rgba(44, 38, 33, .3);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}

.catch-seat {
  position: absolute;
  /* Pin the origin to the physical top-left. Without this the static position
     of an absolute box follows the writing direction, so in RTL every one of
     these started at the RIGHT edge and the transforms pushed them off-stage. */
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px dashed var(--border-strong);
  background: var(--bg-elev);
}

.diner {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--diner-px, 84px);
  height: var(--diner-px, 84px);
  padding: 0;
  border-radius: 50%;
  border: 2px solid hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd));
  background: hsl(var(--cat-h, 225) var(--cat-s-bg) var(--cat-l-bg));
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(44, 38, 33, .3);
  will-change: transform;
}
.diner-face { font-size: calc(var(--diner-px, 84px) * .42); line-height: 1; pointer-events: none; }

/* the patience ring drains as they lose interest */
.diner-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(
    hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd)) calc(var(--left, 1) * 360deg),
    transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.diner.urgent { animation: dinerPulse .5s ease-in-out infinite; }
@keyframes dinerPulse { 50% { box-shadow: 0 0 0 5px rgba(168, 50, 50, .3), 0 3px 8px rgba(44,38,33,.3); } }

.diner.seated {
  width: 38px; height: 38px;
  border-style: solid;
  border-color: hsl(150 55% 45%);
  cursor: default;
}
.diner.seated .diner-face { font-size: 1rem; }
.diner.seated .diner-ring { display: none; }

.diner.leaving { opacity: 0; transition: opacity .4s ease, transform .4s ease; }

@media (prefers-reduced-motion: reduce) {
  .diner.urgent { animation: none; }
}

/* --- the way into the games ------------------------------------------------ */

.play-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(120deg, var(--accent-soft), var(--bg-elev) 70%);
  border-color: var(--border-strong);
}
.play-card:hover { border-color: var(--accent); }
.play-emoji { font-size: 2rem; line-height: 1; flex: none; }
.play-text { display: grid; gap: .1rem; flex-grow: 1; }
.play-text strong { font-size: 1.1rem; color: var(--accent-text); }
.play-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}
.play-go .ico { width: 20px; height: 20px; }

/* --- who is where, under the map ------------------------------------------- */

.map-people { display: grid; gap: .4rem; }

.map-person {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 52px;
  padding: .45rem .7rem;
  font: inherit;
  text-align: start;
  cursor: pointer;
  border-radius: 12px;
  background: hsl(var(--cat-h, 225) var(--cat-s-bg) var(--cat-l-bg));
  border: 1px solid hsl(var(--cat-h, 225) var(--cat-s-bd) var(--cat-l-bd));
  color: var(--text);
}
.map-person:hover { border-color: hsl(var(--cat-h, 225) var(--cat-s-sd) var(--cat-l-sd)); }
.mp-main { display: grid; gap: .05rem; flex-grow: 1; min-width: 0; }
.mp-main strong { font-size: .95rem; }
.mp-main .faint { font-size: .8rem; }
.mp-clock { display: grid; justify-items: end; gap: .05rem; flex: none; }
.mp-clock strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.mp-clock .faint { font-size: .72rem; }

/* Phones get the full width and a taller board, so the diners have room. */
@media (max-width: 560px) {
  .catch-stage { aspect-ratio: 3 / 3.2; min-height: 420px; border-radius: 20px; }
}

.game-prefs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .8rem;
}
.game-prefs .faint { font-size: .82rem; }