/* ─────────────────────────────────────────────────────────────
   The door list — built for a phone held in one hand in a doorway.

   Bigger touch targets and higher contrast than the public site: this gets used
   in low light, quickly, by someone who is also greeting people. Same palette
   so it still feels like the same night.
   ───────────────────────────────────────────────────────────── */

:root{
  --blue:#1f3a4d;
  --blue-deep:#162c3b;
  --terra:#b8573a;
  --cream:#f6efe0;
  --cream-warm:#fbf6ec;
  --follow:#9dc3d8;
  --ink:#16252e;
  --muted:#5c6b74;
  --line:rgba(31,58,77,.14);
  --good:#2f6b45;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Karla",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-size:16px;
  line-height:1.5;
}
.t{ color:var(--terra); }

/* ── Locked ─────────────────────────────────────────────── */

.gate{
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:2rem 1.25rem;
  background:var(--blue);
  /* Pale text on a saturated ground needs grayscale smoothing or the strokes
     bloat and read as blur. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.gate__inner{ width:100%; max-width:22rem; text-align:center; }
.gate__title{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.6rem;
  color:var(--cream);
  margin:0;
  letter-spacing:.01em;
}
.gate__sub{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--follow);
  margin:.4rem 0 2rem;
}
.lbl{
  display:block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--follow);
  margin-bottom:.5rem;
  text-align:left;
}
#code{
  width:100%;
  font:500 1.05rem/1 var(--sans);
  padding:.95rem 1rem;
  color:var(--cream);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  margin-bottom:.9rem;
}
#code::placeholder{ color:rgba(246,239,224,.45); }
#code:focus{ outline:2px solid var(--follow); outline-offset:2px; }
.gate__msg{
  font-size:.9rem;
  color:var(--follow);
  min-height:1.4em;
  margin:.9rem 0 0;
}
.gate__msg.is-bad{ color:#f0b39f; }

/* ── Buttons ────────────────────────────────────────────── */

.btn{
  font:700 .95rem/1 var(--sans);
  letter-spacing:.02em;
  padding:.9rem 1.2rem;
  border:0;
  border-radius:12px;
  background:var(--terra);
  color:#fff;
  cursor:pointer;
  width:100%;
  transition:background .18s ease;
}
.btn:hover{ background:#a44b31; }
.btn:disabled{ opacity:.55; cursor:default; }
.btn--ghost{
  width:auto;
  background:transparent;
  color:var(--blue);
  border:1px solid var(--line);
  font-weight:600;
  padding:.6rem .85rem;
  font-size:.85rem;
}
.btn--ghost:hover{ background:#fff; border-color:var(--blue); }

/* ── Top bar ────────────────────────────────────────────── */

.door{ padding-bottom:3rem; }
.bar{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.1rem;
  background:var(--blue);
  color:var(--cream);
  position:sticky;
  top:0;
  z-index:5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.bar__who{ font-family:var(--serif); font-size:1.05rem; }
.bar__at{
  display:block;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--follow);
  margin-top:.15rem;
}
.bar__act{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.lbl--inline{ margin:0; font-size:.65rem; }
#ev{
  font:600 .85rem/1 var(--sans);
  padding:.6rem .7rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);
  color:var(--cream);
  max-width:14rem;
}
.bar .btn--ghost{ color:var(--cream); border-color:rgba(255,255,255,.3); }
.bar .btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:var(--cream); }

.live{
  margin:0;
  padding:.5rem 1.1rem;
  font-size:.76rem;
  letter-spacing:.04em;
  color:var(--muted);
  background:var(--cream-warm);
  border-bottom:1px solid var(--line);
}

/* ── Where the night stands ─────────────────────────────── */

.tally{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));
  gap:.6rem;
  padding:1.1rem;
}
.tile{
  background:var(--cream-warm);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.85rem .7rem;
  text-align:center;
}
.tile__n{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.5rem;
  line-height:1.1;
  color:var(--blue);
}
.tile__l{
  display:block;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.3rem;
}
.tile--good .tile__n{ color:var(--good); }
.tile--warn{ background:#fdf0ea; border-color:#eccdc1; }
.tile--warn .tile__n{ color:var(--terra); }

/* ── Panels ─────────────────────────────────────────────── */

.panel{
  margin:0 1.1rem 1.1rem;
  padding:1rem 1.1rem;
  border-radius:14px;
  background:var(--cream-warm);
  border:1px solid var(--line);
}
.panel--warn{ background:#fdf0ea; border-color:#eccdc1; }
.panel__h{
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
  margin:0 0 .6rem;
  color:var(--blue);
}
.panel__note{ font-size:.8rem; color:var(--muted); margin:.7rem 0 0; }
.rel{ margin:0; padding:0; list-style:none; font-size:.92rem; }
.rel li{ padding:.3rem 0; }
.rel__c{ color:var(--muted); font-size:.85rem; }

/* ── Search ─────────────────────────────────────────────── */

.tools{
  display:flex;
  gap:.6rem;
  align-items:center;
  padding:0 1.1rem 1rem;
}
#q{
  flex:1;
  font:500 1rem/1 var(--sans);
  padding:.85rem 1rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  min-width:0;
}
#q:focus{ outline:2px solid var(--blue); outline-offset:1px; }
.tools__n{ font-size:.78rem; color:var(--muted); white-space:nowrap; }

/* ── The rows ───────────────────────────────────────────── */

.grp{ margin:0 0 1.4rem; }
.grp__h{
  font-family:var(--serif);
  font-size:.95rem;
  font-weight:600;
  color:var(--blue);
  margin:0;
  padding:.55rem 1.1rem;
  background:var(--cream-warm);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:2;
}
.grp__n{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--muted);
  margin-left:.3rem;
}
.rows{ margin:0; padding:0; list-style:none; }

.row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"tick who pay" "tick rm rm";
  gap:.2rem .85rem;
  align-items:center;
  padding:.8rem 1.1rem;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.row.is-here{ background:#f2f8f3; }

/* A big, obvious tick — this is the one thing pressed all night. */
.tick{
  grid-area:tick;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  cursor:pointer;
  flex:none;
}
.tick input{
  position:absolute;
  opacity:0;
  width:44px;
  height:44px;
  margin:0;
  cursor:pointer;
}
.tick__box{
  width:26px;
  height:26px;
  border-radius:8px;
  border:2px solid var(--line);
  background:#fff;
  display:grid;
  place-items:center;
  transition:background .15s ease, border-color .15s ease;
}
.tick__box::after{
  content:"";
  width:12px;
  height:7px;
  border-left:2.5px solid #fff;
  border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
  opacity:0;
  transition:opacity .12s ease;
}
.tick input:checked + .tick__box{ background:var(--good); border-color:var(--good); }
.tick input:checked + .tick__box::after{ opacity:1; }
.tick input:focus-visible + .tick__box{ outline:2px solid var(--blue); outline-offset:2px; }

.row__who{ grid-area:who; min-width:0; }
.row__name{
  display:block;
  font-weight:600;
  font-size:1.02rem;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.row.is-here .row__name{ color:var(--good); }
.row__ct{
  display:block;
  font-size:.8rem;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.row__ph{ margin-left:.35rem; }
.row__pay{ grid-area:pay; }

.b{
  display:inline-block;
  font:700 .68rem/1 var(--sans);
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.b--paid{ background:#e8f1e9; color:var(--good); }
.b--free{ background:#eef4f7; color:#3d6d89; }
.b--due{ background:#fdf0ea; color:var(--terra); }
.b--says{ background:#eaf3f8; color:#1f3a4d; border:1px dashed #9dc3d8; }
/* Quieter than the money badges: the lesson is useful, not urgent. */
.b--lesson{ background:#f2efe7; color:#6b6355; }
/* The lesson tiles sit inside a panel, so they want less air than the top row. */
.tally--sub{ margin:0 0 .5rem; }

/* Edit and Remove share the "rm" slot the single button used to hold. */
.row__acts{
  grid-area:rm;
  display:flex;
  align-items:center;
  gap:.15rem;
  margin-left:-7px;
}
.row__rm{
  justify-self:start;
  font:600 .74rem/1 var(--sans);
  letter-spacing:.04em;
  color:#96a3ab;
  background:none;
  border:1px solid transparent;
  border-radius:8px;
  padding:5px 7px;
  margin-left:-7px;
  cursor:pointer;
}
.row__rm:hover,.row__rm:focus-visible{
  color:var(--terra);
  border-color:#e3c9c0;
  background:#fdf6f3;
  outline:none;
}
.row__rm:disabled{ opacity:.4; cursor:default; }

/* Edit sits beside Remove but reads as the safe one of the pair. */
.row__ed{
  font:600 .74rem/1 var(--sans);
  letter-spacing:.04em;
  color:#96a3ab;
  background:none;
  border:1px solid transparent;
  border-radius:8px;
  padding:5px 7px;
  cursor:pointer;
}
.row__ed:hover,.row__ed:focus-visible{
  color:var(--blue);
  border-color:#c9d6de;
  background:#f4f8fa;
  outline:none;
}

.empty{
  padding:1rem 1.1rem;
  font-size:.9rem;
  color:var(--muted);
  font-style:italic;
  margin:0;
}
.empty--big{ padding:3rem 1.1rem; text-align:center; font-size:1rem; }

.foot{
  margin:0;
  padding:1.5rem 1.1rem 0;
  font-size:.82rem;
  line-height:1.6;
  color:var(--muted);
  border-top:1px solid var(--line);
}
.foot strong{ color:var(--blue); }

/* ── Wider screens ──────────────────────────────────────── */

@media (min-width:640px){
  .row{
    grid-template-columns:auto 1fr auto auto;
    grid-template-areas:"tick who pay rm";
    gap:1rem;
    padding:.85rem 1.4rem;
  }
  .row__acts{ justify-self:end; margin-left:0; }
  .tally,.tools,.live,.grp__h,.foot{ padding-left:1.4rem; padding-right:1.4rem; }
  .panel{ margin-left:1.4rem; margin-right:1.4rem; }
}
@media (min-width:900px){
  .door{ max-width:64rem; margin:0 auto; }
}

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

/* ── On paper ───────────────────────────────────────────── */

@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
  .bar,.live,.tools{ display:none !important; }
  .tally{ padding:0 0 .5rem; }
  .tile{ border:1px solid #999; }
  .grp__h{ position:static; background:none; border-color:#999; padding-left:0; }
  .row{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"tick who pay";
    padding:.35rem 0;
    border-color:#ccc;
    background:none !important;
  }
  .tick__box{ border-color:#333; }
  .tick input:checked + .tick__box{ background:none; }
  .tick input:checked + .tick__box::after{ border-color:#333; opacity:1; }
  .foot{ padding-left:0; padding-right:0; }
}

/* ── The three views ────────────────────────────────────────
   Tonight's door is one job; the database is another. Tabs rather than one
   endless page, so the door stays uncluttered when there's a queue. */

.views{
  display:flex;
  gap:.35rem;
  padding:.7rem 1.1rem 0;
  background:var(--cream-warm);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.view{
  font:700 .82rem/1 var(--sans);
  letter-spacing:.02em;
  white-space:nowrap;
  padding:.7rem .9rem;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:8px 8px 0 0;
  background:none;
  color:var(--muted);
  cursor:pointer;
}
.view:hover{ color:var(--blue); background:rgba(31,58,77,.05); }
.view.is-on{ color:var(--blue); border-bottom-color:var(--terra); background:#fff; }
.view:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }

/* A night in the "every night" list. */
.row--night{
  grid-template-columns:1fr auto;
  grid-template-areas:"who pay" "open open";
  gap:.5rem .85rem;
}
.row--night .row__name{ font-family:var(--serif); font-size:1.08rem; }
.row__open{
  grid-area:open;
  justify-self:start;
  font:700 .78rem/1 var(--sans);
  color:var(--blue);
  background:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  padding:.55rem .8rem;
  cursor:pointer;
}
.row__open:hover{ border-color:var(--blue); background:var(--cream-warm); }

/* A person in the "everyone" list: several small badges, so they wrap. */
.row--person{
  grid-template-columns:1fr;
  grid-template-areas:"who" "pay";
  gap:.45rem;
}
.row--person .row__pay{ display:flex; flex-wrap:wrap; gap:.3rem; }

@media (min-width:640px){
  .views{ padding-left:1.4rem; padding-right:1.4rem; }
  .row--night{
    grid-template-columns:1fr auto auto;
    grid-template-areas:"who pay open";
    align-items:center;
  }
  .row__open{ justify-self:end; }
  .row--person{
    grid-template-columns:1fr minmax(0,22rem);
    grid-template-areas:"who pay";
    align-items:center;
  }
  .row--person .row__pay{ justify-content:flex-end; }
}

/* ── Adding somebody by hand ─────────────────────────────── */

/* Two columns on a phone, so the whole form is visible without scrolling
   past the button. The name and email want the full width. */
.addf{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  padding:0 0 .9rem;
}
.addf__f--wide{ grid-column:1 / -1; }

/* .lbl is styled for the dark door gate; inside a light panel it needs ink. */
.addf .lbl{ color:var(--muted); margin-bottom:.3rem; }

.addf input,
.addf select{
  width:100%;
  font:500 1rem/1.2 var(--sans);
  padding:.7rem .75rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  /* 16px minimum, or iOS Safari zooms the page on focus. */
  font-size:1rem;
}
.addf input::placeholder{ color:#9aa7ae; }
.addf input:focus,
.addf select:focus{ outline:2px solid var(--follow); outline-offset:1px; }

.addf__go{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.addf__go .btn{ width:auto; }
.addf__msg{ font-size:.85rem; color:var(--good); }
.addf__msg.is-err{ color:var(--terra); }

@media (min-width:620px){
  .addf{ grid-template-columns:repeat(3, 1fr); }
  .addf__f--wide{ grid-column:auto; }
}

/* ── Correcting a row in place ───────────────────────────── */

/* Spans the row's full width, below the name and badges. */
.ed{
  grid-column:1 / -1;
  margin:.75rem 0 .1rem;
  padding:.9rem;
  background:var(--cream-warm);
  border:1px solid var(--line);
  border-radius:12px;
}
.ed__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
  margin-bottom:.8rem;
}
.ed__f--wide{ grid-column:1 / -1; }
.ed .lbl{ color:var(--muted); margin-bottom:.3rem; }
.ed input,
.ed select{
  width:100%;
  /* 16px minimum, or iOS Safari zooms the page on focus. */
  font:500 1rem/1.2 var(--sans);
  padding:.6rem .65rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
}
.ed input:focus,
.ed select:focus{ outline:2px solid var(--follow); outline-offset:1px; }
.ed__go{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.ed__go .btn{ width:auto; padding:.7rem 1rem; font-size:.88rem; }
.ed__msg{ font-size:.85rem; color:var(--good); }
.ed__msg.is-err{ color:var(--terra); }
.ed__note{ font-size:.8rem; color:var(--muted); margin:.7rem 0 0; }

@media (min-width:640px){
  .ed__grid{ grid-template-columns:repeat(3, 1fr); }
  .ed__f--wide{ grid-column:auto; }
}

/* Room for the native chevron, or a long option label runs under it.
   Must come after the shorthand padding above, or it is overridden. */
.addf select,
.ed select{ padding-right:1.9rem; }

/* Parts picker in the edit form: one tickable row per part of the night. */
.ed__parts{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin-top:4px; }
.ed__part{ display:flex; align-items:center; gap:8px; font-size:.95rem; min-height:36px; }
.ed__part input{ width:18px; height:18px; accent-color:#b8573a; }

/* Which guest emails have gone out, under the contact line. */
.row__mail{ display:block; margin-top:3px; font-size:.78rem; color:#8a8274; }
.row__mail--todo{ color:var(--terra); font-weight:600; }
@media print{ .row__mail{ display:none; } }


/* ═══ The rope bridge (moved here from the public page) ═══ */
.abridge{
  margin:1.1rem 1.1rem 0;
  padding:1rem 1.1rem 1.1rem;
  background:var(--blue);
  color:var(--cream);
  border-radius:16px;
  max-width:560px;
}
.balance__scope{
  margin:0 0 .7rem;
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(246,239,224,.45);
}
.balance__row{
  display:grid;
  grid-template-columns:minmax(58px,auto) 1fr minmax(58px,auto);
  align-items:center;
  gap:.35rem;
}
.balance__side{ text-align:center; }
.balance__n{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.7rem,7vw,2.2rem);
  font-weight:600;
  line-height:1;
  color:#e08a6c;
  font-variant-numeric:tabular-nums;
}
.balance__side:last-child .balance__n{ color:#9dc3d8; }
.balance__lab{
  display:block;
  margin-top:.28rem;
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(246,239,224,.6);
}
.balance__cap{
  display:block;
  font-family:var(--sans);
  font-size:.68rem;
  color:rgba(246,239,224,.4);
}

.bridge{ min-width:0; }
.bridge__svg{ display:block; width:100%; height:auto; overflow:visible; }
.bridge__posts path{
  stroke:rgba(246,239,224,.3);
  stroke-width:2.4;
  stroke-linecap:round;
}
.bridge__rope{
  stroke:rgba(246,239,224,.34);
  stroke-linecap:round;
}
.bridge__rope--rail{ stroke-width:1.5; stroke-dasharray:2 3; }
.bridge__rope--deck{ stroke-width:2.2; }
.bridge__hangers line{ stroke:rgba(246,239,224,.18); stroke-width:1; }

.bridge__plank{ transition:fill .4s ease, opacity .4s ease; }
.bridge__plank.is-ghost{ fill:rgba(246,239,224,.13); }
.bridge__plank.is-lead,
.bridge__plank.is-follow{
  animation:plank-lay .5s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
.bridge__plank.is-lead{ fill:var(--terra); }
.bridge__plank.is-follow{ fill:#9dc3d8; }

@keyframes plank-lay{
  from{ opacity:0; }
  to  { opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .bridge__plank{ animation:none; }
}

/* when both sides meet, the ropes firm up */
.balance.is-complete .bridge__rope{ stroke:rgba(246,239,224,.55); }

.prog-note{ margin:0 1.1rem 1rem; }
/* Four tabs fit a 360px phone without scrolling. */
@media (max-width:480px){
  .views{ gap:0; padding:.7rem .5rem 0; }
  .view{ padding:.7rem .55rem; font-size:.78rem; }
}

/* Texting */
#tx textarea{
  width:100%; box-sizing:border-box; margin:.3rem 0 .6rem;
  padding:.7rem .8rem; font:400 1rem/1.4 var(--sans);
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
.row__sms{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }