/* ==========================================================================
   public/css/auth.css
   The sign-in page (views/auth/login.php).

   Self-contained like the product page: no app.css, which is the ERP's
   look. Fonts load from Google Fonts in the page head. Colours follow
   views/home.php - black, white, the soft grey ground and one accent,
   royal blue. Green, amber and red appear only where they mean a status.

   The shell (black brand panel, light form side, card, fields, buttons,
   messages) is written so forgot password, set password, sign-up and
   verify can move onto it later without copying it again.

   Nothing is forced with an important-flag. Pure ASCII.
   ========================================================================== */

:root {
  --ink: #17171b;
  --text: #27272a;
  --muted: #6b7280;          /* on white */
  --muted-g: #55555d;        /* on the grey ground */
  --line: #e4e4e7;
  --bg: #f5f5f7;
  --card: #ffffff;
  --acc: #2563eb;
  --acc-d: #1d4ed8;
  --acc-on-black: #3b82f6;   /* the product page's blue on dark */
  --acc-soft: #82a6f4;
  --acc-tint: rgba(37, 99, 235, .10);
  --acc-ring: rgba(37, 99, 235, .18);
  --acc-ring-2: rgba(37, 99, 235, .45);
  --ok: #15803d;
  --ok-bg: #f0fdf4;
  --ok-line: #bbf7d0;
  --ok-chip: #dcfce7;
  --ok-chip-t: #166534;
  --ok-dot: #16a34a;
  --warn-chip: #fef3c7;
  --warn-chip-t: #92400e;
  --warn-dot: #f59e0b;
  --bad: #b91c1c;
  --bad-bg: #fef2f2;
  --bad-line: #fecaca;
  --wa: #1f6f4a;
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', Consolas, ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
svg { display: block; }

/* ==========================================================================
   Page layout: black brand panel on the left, sign-in on the right.
   At 1440 wide the panel is 800px, the size the design was drawn at.
   ========================================================================== */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(480px, 1fr);
  min-height: 100vh;
}

.brandside {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
}
.brandside-in {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3.4vh, 40px) clamp(40px, 4.5vw, 64px) clamp(20px, 3.2vh, 36px);
}

/* The product page's mark and wordmark, drawn for a dark ground. */
.mark {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
}
.mark b {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.3px;
}
.mark:focus-visible { outline: 2px solid var(--acc-soft); outline-offset: 4px; }

/* The one headline. It pulls into focus as the page opens. */
.hero-h {
  margin: clamp(16px, 3.6vh, 64px) 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 6.6vh, 66px);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: #ffffff;
}
.hero-h span { display: block; }
.pull { animation: elPull 1.3s cubic-bezier(.2, .7, .2, 1) .15s both; }
.pull.l2 { animation-delay: .42s; }

.hero-sub {
  margin: clamp(10px, 1.6vh, 18px) 0 0;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.6;
  color: #a1a1aa;
  text-wrap: pretty;
}

/* Small swaying ring - phone and tablet only, where the tour is hidden. */
.ring-sm {
  display: none;
  position: absolute;
  right: -180px;
  top: -130px;
  width: 340px;
  height: 340px;
  pointer-events: none;
}
.ring-sm .sway {
  transform-origin: 170px 170px;
  animation: elSway 9s ease-in-out infinite alternate;
}

/* ==========================================================================
   The tour. Drawn at 672 x 416 and scaled by auth.js to the room the
   panel has (--k). Hidden unless JavaScript is running, because without
   it nothing would move or fit.
   ========================================================================== */

.story { display: none; }
.js .story {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: clamp(12px, 2vh, 24px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: elFocusIn 1.1s cubic-bezier(.2, .7, .2, 1) .55s both;
}
.story-fit {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
}
.stage-box {
  position: relative;
  flex-shrink: 0;
  width: calc(672px * var(--k, 1));
  height: calc(416px * var(--k, 1));
}
.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 672px;
  height: 416px;
  transform-origin: 0 0;
  transform: scale(var(--k, 1));
  color: var(--ink);
  /* A picture, not controls. The hidden phone waits just below the
     drawing, over the scene buttons - it must never catch a click. */
  pointer-events: none;
}
/* Too little room to read it: keep the space, hide the drawing. */
.story.is-cramped .stage-box,
.story.is-cramped .story-bar { visibility: hidden; }

/* ---- lens ring behind the window: it turns a notch on every scene ---- */
.ring {
  position: absolute;
  left: 196px;
  top: -98px;
  width: 760px;
  height: 760px;
  pointer-events: none;
  overflow: visible;
}
.ring-rot {
  transform-origin: 380px 380px;
  transform: rotate(var(--turn, 0deg));
  transition: transform 1.4s cubic-bezier(.65, 0, .35, 1);
}

/* ---- scene switching ---- */
.scene { display: none; }
.scene.is-on { display: flex; }
.win-body, .phone-body, .fx { transition: filter .38s ease, opacity .38s ease; }
.stage.is-swap [data-body] { filter: blur(7px); opacity: .3; }
.mono { font-family: var(--mono); font-weight: 500; }

/* ---- the desktop window ---- */
.win {
  position: absolute;
  left: 0;
  top: 26px;
  width: 672px;
  height: 356px;
  display: flex;
  overflow: hidden;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 34px 80px -24px rgba(0, 0, 0, .9), 0 12px 28px -12px rgba(0, 0, 0, .6);
  transform-origin: 35% 50%;
  filter: blur(0) saturate(1) brightness(1);
  transition: transform 1s cubic-bezier(.2, .8, .2, 1), filter 1s cubic-bezier(.2, .8, .2, 1);
}
.stage.is-phone .win {
  transform: translateX(-12px) scale(.965);
  filter: blur(3.5px) saturate(.85) brightness(.78);
}

.rail {
  width: 48px;
  flex-shrink: 0;
  padding-top: 12px;
  background: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rail-gap { height: 8px; flex-shrink: 0; }
.rail-i {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .45);
  transition: background-color .5s ease, color .5s ease;
}
.rail-i.is-on { background: rgba(255, 255, 255, .14); color: #ffffff; }

.win-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 40px;
  flex-shrink: 0;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid #ececef;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 10.5px; white-space: nowrap; }
.cr-a { color: #71717a; }
.cr-sep { color: #d4d4d8; }
.cr-b { color: var(--ink); font-weight: 600; }
.tb-r { display: flex; align-items: center; gap: 8px; }
.tb-search, .tb-co {
  height: 24px;
  padding: 0 8px;
  border: 1px solid #e4e4e7;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  white-space: nowrap;
}
.tb-search { width: 120px; background: #fafafa; color: #71717a; }
.tb-co { font-weight: 500; color: var(--ink); }
.tb-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #000000;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.win-body { position: relative; flex: 1 1 auto; }

/* ---- scene 1: enquiries board ---- */
.sc-enq, .sc-fn {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
}
.pg-head {
  height: 48px;
  flex-shrink: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pg-title { display: flex; align-items: baseline; gap: 8px; }
.pg-title b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.pg-title .mono { font-size: 10px; color: #71717a; }
.pg-actions { display: flex; align-items: center; gap: 8px; }
.seg { display: flex; height: 24px; border: 1px solid #e4e4e7; font-size: 9.5px; font-weight: 500; }
.seg span { padding: 0 9px; display: flex; align-items: center; color: #52525b; }
.seg .on { background: #000000; color: #ffffff; }
.mbtn {
  height: 24px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: #000000;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mbtn-line {
  height: 24px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e4e4e7;
  color: var(--text);
  font-size: 9.5px;
  font-weight: 500;
  white-space: nowrap;
}

.board { position: relative; flex: 1 1 auto; display: flex; gap: 8px; padding: 0 16px; }
.col {
  width: 112px;
  height: 250px;
  flex-shrink: 0;
  padding: 6px;
  background: #f4f4f5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.col-h {
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 600;
  color: #3f3f46;
}
.cnt {
  position: relative;
  min-width: 12px;
  display: flex;
  justify-content: flex-end;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink);
}
.cnt .to { position: absolute; right: 0; top: 0; opacity: 0; }

.card-m {
  height: 52px;
  flex-shrink: 0;
  padding: 5px 8px;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.card-m .n {
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-m .m {
  font-size: 9px;
  line-height: 11px;
  color: #71717a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-m .x { height: 13px; display: flex; align-items: center; }
.card-m .amt { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--ink); }
.chip {
  height: 13px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #e4e4e7;
  font-size: 7.5px;
  font-weight: 500;
  color: #52525b;
  white-space: nowrap;
}
.chip.amber { padding: 0 5px; border: 0; background: var(--warn-chip); color: var(--warn-chip-t); font-weight: 600; }

/* the card that moves from Finalising to Booked */
.card-m.mv { position: absolute; left: 382px; top: 30px; width: 100px; z-index: 2; }

/* ---- scene 2: the event's functions ---- */
.ev-head {
  height: 50px;
  flex-shrink: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ev-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-t b { font-size: 14px; line-height: 17px; font-weight: 600; letter-spacing: -.01em; }
.ev-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  line-height: 12px;
  color: #71717a;
  white-space: nowrap;
}
.ev-meta .mono { color: #3f3f46; }
.st {
  height: 22px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
}
.st.ok { background: var(--ok-chip); color: var(--ok-chip-t); }
.st.ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok-dot); }
.ev-tabs {
  height: 30px;
  flex-shrink: 0;
  padding: 0 16px;
  display: flex;
  gap: 18px;
  border-bottom: 1px solid #ececef;
  font-size: 10px;
  color: #71717a;
}
.ev-tabs span { display: flex; align-items: center; }
.ev-tabs .on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 #000000; }

.tbl { margin: 10px 16px 0; flex-shrink: 0; display: flex; flex-direction: column; }
.tr {
  height: 28px;
  display: grid;
  grid-template-columns: 110px 118px 120px 134px 110px;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f2;
  font-size: 10px;
}
.tr > span { min-width: 0; padding: 0 10px; white-space: nowrap; }
.tr.th { background: #000000; border-bottom: 0; color: #f4f4f5; font-size: 9px; font-weight: 600; }
.tr.z { background: #fafafa; }
.tr .fn { font-weight: 600; }
.tr .when { display: flex; gap: 6px; font-family: var(--mono); font-weight: 500; font-size: 9.5px; color: var(--text); }
.tr .when i { font-style: normal; color: #71717a; }
.tr .ven { overflow: hidden; text-overflow: ellipsis; color: #52525b; }
.prog { display: flex; align-items: center; gap: 8px; }
.prog .mono { font-size: 9px; color: #52525b; }
.bar { position: relative; width: 64px; height: 4px; flex-shrink: 0; background: #e4e4e7; overflow: hidden; }
.bar.wide { width: 96px; }
.bar .bf {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w, 100%);
  background: #000000;
  transform-origin: left center;
}
.chip2 {
  height: 18px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  font-size: 8.5px;
  font-weight: 600;
  white-space: nowrap;
}
.chip2.ok { background: var(--ok-chip); color: var(--ok-chip-t); }
.chip2.amber { background: var(--warn-chip); color: var(--warn-chip-t); }
.swap { position: relative; display: inline-flex; }
.swap .to { position: absolute; left: 0; top: 0; opacity: 0; }
.sumline {
  margin: 12px 16px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 9.5px;
  color: #71717a;
  white-space: nowrap;
}
.sumline > span { display: flex; align-items: center; gap: 6px; }
.sumline b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.sumline .of { font-family: var(--mono); font-weight: 500; color: #3f3f46; }

/* ---- the phone, which rises while the desktop drops out of focus ---- */
.phone {
  position: absolute;
  left: 470px;
  top: 10px;
  width: 184px;
  height: 396px;
  padding: 7px;
  border-radius: 34px;
  background: #1f1f23;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 44px 90px -24px rgba(0, 0, 0, .9), 0 14px 34px -14px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateY(48px) rotate(3deg);
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1);
}
.stage.is-phone .phone { opacity: 1; transform: translateY(0) rotate(0deg); }
.phone-screen {
  position: relative;
  width: 170px;
  height: 382px;
  overflow: hidden;
  border-radius: 27px;
  background: #f2f2f4;
  transition: background-color .5s ease;
}
.stage.at-2 .phone-screen { background: #f7f3ec; }
.phone-body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

/* ---- scene 3: the couple's client portal ---- */
.sc-portal, .sc-chat {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
}
.sc-portal { padding: 18px 12px 0; color: #231f1a; }
.pt-co { height: 12px; line-height: 12px; flex-shrink: 0; font-size: 8.5px; font-weight: 600; color: #8a7f70; }
.pt-names {
  margin-top: 5px;
  height: 26px;
  line-height: 26px;
  flex-shrink: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.pt-when {
  margin-top: 3px;
  height: 12px;
  line-height: 12px;
  flex-shrink: 0;
  display: flex;
  gap: 5px;
  font-size: 8.5px;
  color: #6b6358;
  white-space: nowrap;
}
.pt-prog {
  margin-top: 12px;
  height: 46px;
  flex-shrink: 0;
  padding: 9px 10px;
  background: #fffdf8;
  border: 1px solid #eadfcd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.pt-prog-t { display: flex; align-items: center; justify-content: space-between; font-size: 9px; font-weight: 600; }
.pt-bar { position: relative; height: 4px; border-radius: 2px; background: #efe6d6; overflow: hidden; }
.pt-bar .bf {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 68%;
  border-radius: 2px;
  background: #231f1a;
  transform-origin: left center;
}
.pt-h { margin-top: 14px; height: 12px; line-height: 12px; flex-shrink: 0; font-size: 9px; font-weight: 600; }
.pt-h.next { margin-top: 12px; }
.pt-pay { margin-top: 4px; flex-shrink: 0; display: flex; flex-direction: column; }
.pay {
  position: relative;
  height: 34px;
  border-bottom: 1px solid #eadfcd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.pay-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-l b { font-size: 9.5px; line-height: 12px; font-weight: 500; white-space: nowrap; }
.pay-l .mono { font-size: 8.5px; line-height: 11px; color: #6b6358; }
.pill {
  height: 16px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}
.pill.ok { background: var(--ok-chip); color: var(--ok-chip-t); }
.pill.amber { background: var(--warn-chip); color: var(--warn-chip-t); }
.pill.plain { background: #efe6d6; color: #5c5349; }
.pay .swap .to { left: auto; right: 0; }
.pt-fns { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.pt-fns span {
  height: 18px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  border: 1px solid #eadfcd;
  border-radius: 9px;
  background: #fffdf8;
  font-size: 8.5px;
  color: #3d362e;
  white-space: nowrap;
}

/* ---- scene 4: a guest's WhatsApp ---- */
.ch-head {
  height: 48px;
  flex-shrink: 0;
  padding: 0 12px;
  background: #ffffff;
  border-bottom: 1px solid #e7e7ea;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-av {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #000000;
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ch-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-who b { font-size: 10.5px; line-height: 13px; font-weight: 600; white-space: nowrap; }
.ch-wa {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  line-height: 10px;
  font-weight: 500;
  color: var(--wa);
  white-space: nowrap;
}
.ch-wa::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #22c55e; }
.ch-list {
  flex: 1 1 auto;
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ch-day {
  align-self: center;
  height: 15px;
  padding: 0 8px;
  border-radius: 8px;
  background: #e4e4e7;
  display: flex;
  align-items: center;
  font-size: 8px;
  font-weight: 500;
  color: #52525b;
}
.ch-day.later { margin-top: 26px; }
.bub {
  position: relative;
  margin-top: 8px;
  width: 148px;
  background: #ffffff;
  border-radius: 10px 10px 10px 3px;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .08);
}
.bub p { margin: 0; padding: 8px 9px 0; font-size: 9.5px; line-height: 13px; color: var(--ink); }
.bub-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  padding: 3px 8px 6px;
  font-size: 7.5px;
  color: #8b8b94;
}
.bub-act {
  height: 26px;
  border-top: 1px solid #f0f0f2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--wa);
}

/* ---- camera-style focus brackets that lock onto each scene's moment ---- */
.af {
  position: absolute;
  left: -7px;
  top: -7px;
  right: -7px;
  bottom: -7px;
  pointer-events: none;
  opacity: 0;
}
.af i { position: absolute; width: 10px; height: 10px; border: 0 solid var(--acc); }
.af i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.af i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.af i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.af i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.af.sm { left: -6px; top: -6px; right: -6px; bottom: -6px; }
.af.sm i { width: 8px; height: 8px; }
.af.row { left: -5px; top: -3px; right: -5px; bottom: -3px; }
.af.row i { width: 9px; height: 9px; }
.af.bub-f { left: -5px; top: -5px; right: -5px; bottom: -5px; }
.af-tag {
  position: absolute;
  left: 0;
  bottom: -19px;
  height: 15px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  border-radius: 3px;
  background: var(--acc);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
}

/* ---- notices that pop over the scene ---- */
.fx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
.toast {
  position: absolute;
  width: max-content;      /* sized to the text, so no title is ever cut */
  max-width: 330px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 20px 44px -14px rgba(0, 0, 0, .65), 0 6px 14px -6px rgba(0, 0, 0, .3);
}
.toast.t0 { right: -26px; top: 0; }
.toast.t1 { right: -26px; top: 0; }
.toast.t2 { left: 176px; top: 196px; }
.t-ic {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acc-tint);
  color: var(--acc);
}
.t-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-tx b {
  font-size: 11.5px;
  line-height: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-tx span {
  font-size: 10.5px;
  line-height: 13px;
  color: #71717a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rsvp {
  position: absolute;
  left: 150px;
  top: 58px;
  width: max-content;
  min-width: 284px;
  max-width: 314px;        /* 150 + 314 still ends before the phone at 470 */
  padding: 14px 16px 12px;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 50px -16px rgba(0, 0, 0, .65), 0 6px 16px -6px rgba(0, 0, 0, .3);
}
.rs-head { display: flex; align-items: center; gap: 10px; }
.rs-ic {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ok-chip);
  color: var(--wa);
}
.rs-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-t b { font-size: 12px; line-height: 15px; font-weight: 600; white-space: nowrap; }
.rs-t span { font-size: 10px; line-height: 13px; color: #71717a; white-space: nowrap; }
.rs-mix { display: flex; flex-direction: column; gap: 7px; }
.rs-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #f4f4f5; }
.rs-bar .seg-a, .rs-bar .seg-w, .rs-bar .seg-d { transform-origin: left center; }
.rs-bar .seg-a { width: 77.5%; background: var(--ok-dot); }
.rs-bar .seg-w { width: 17.5%; background: var(--warn-dot); }
.rs-bar .seg-d { width: 5%; background: #a1a1aa; }
.rs-key { display: flex; gap: 12px; font-size: 9.5px; color: #52525b; white-space: nowrap; }
.rs-key > span { display: flex; align-items: center; gap: 4px; }
.rs-key b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.a { background: var(--ok-dot); }
.dot.w { background: var(--warn-dot); }
.dot.d { background: #a1a1aa; }
.rs-rows {
  padding-top: 9px;
  border-top: 1px solid #f0f0f2;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  white-space: nowrap;
}
.rs-what { display: flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink); }
.rs-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; color: #71717a; }
.rs-when .mono { color: #3f3f46; }
.tick {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ok-chip);
  color: var(--ok);
}
.tick.wait { background: #f4f4f5; color: #52525b; }

/* ---- everything that moves inside a scene: runs each time it comes in ---- */
.is-on .a-move { animation: elMove 1.3s cubic-bezier(.45, 0, .2, 1) .9s both; }
.is-on .a-drop { animation: elDrop .6s cubic-bezier(.2, .8, .2, 1) 3.3s both, elRing 1.4s ease-out 3.9s 1; }
.is-on .a-out { animation: elOut .28s ease var(--at, 0s) forwards; }
.is-on .a-pop { animation: elPop .45s cubic-bezier(.2, .8, .2, 1) var(--at, 0s) both; }
.is-on .a-in { animation: elIn .4s ease var(--at, 0s) both; }
.is-on .a-bub { animation: elBubble .5s cubic-bezier(.2, .8, .2, 1) var(--at, 0s) both; }
.is-on .bf { animation: elGrow .9s cubic-bezier(.2, .8, .2, 1) var(--at, 0s) both; }
.is-on .af { animation: elAF 1s cubic-bezier(.2, .8, .2, 1) var(--at, 0s) both; }
.is-on .af-tag { animation: elTag .35s ease var(--tag-at, 0s) both; }
.toast.is-on { animation: elToast .55s cubic-bezier(.2, .8, .2, 1) var(--at, 0s) both; }
.rsvp.is-on { animation: elToast .6s cubic-bezier(.2, .8, .2, 1) .5s both; }

/* ---- scene buttons under the drawing, and the pause button ---- */
.story-bar {
  width: calc(672px * var(--k, 1));
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  container-type: inline-size;
}
.tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr);
  gap: 14px;
}
.tab {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  margin: 0;
  padding: 6px 0 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tab-t { min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tab-n {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #7c7c86;
  transition: color .3s ease;
}
.tab-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
  color: #8b8b94;
  transition: color .3s ease;
}
.tab:hover .tab-l { color: #e4e4e7; }
.tab.is-on .tab-n { color: var(--acc-soft); }
.tab.is-on .tab-l { color: #ffffff; }
.l-short { display: none; }
.tab-bar {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  border-radius: 1px;
  background: rgba(255, 255, 255, .14);
}
.tab-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--acc-on-black); }
.tab.is-done .tab-bar i { width: 100%; background: rgba(255, 255, 255, .5); }
.tab.is-on .tab-bar i { animation: elFill var(--dur, 7000ms) linear forwards; }
.story.is-held .tab.is-on .tab-bar i { animation-play-state: paused; }
.story.is-still .tab.is-on .tab-bar i { animation: none; width: 100%; }

/* Four scene buttons of equal weight: no label on the client tour is
   longer than the rest, unlike "Guests on WhatsApp" on the staff one.
   It sits with the narrowing steps below rather than apart from them,
   so it cannot out-rank them and strand four columns in a space that
   only fits two - which is exactly what it did when it lived alone. */
.tabs.even { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@container (max-width: 700px) {
  .l-long { display: none; }
  .l-short { display: inline; }
}
@container (max-width: 560px) {
  .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .tab-n { display: none; }
}
@container (max-width: 420px) {
  .tabs { gap: 8px; }
  .tab-l { font-size: 11.5px; }
}
@container (max-width: 400px) {
  /* Too narrow for four across: two rows of two, so every name reads. */
  .tabs, .tabs.even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  .tab-l { font-size: 11px; }
}

.story-pause {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: transparent;
  color: #d4d4d8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.story-pause:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); color: #ffffff; }
.story-pause:focus-visible { outline: 2px solid var(--acc-soft); outline-offset: 2px; }
.story-pause .i-play { display: none; }
.story-pause[aria-pressed="true"] .i-pause { display: none; }
.story-pause[aria-pressed="true"] .i-play { display: block; }
.story.is-still .story-pause { display: none; }

/* ==========================================================================
   The sign-in side.
   ========================================================================== */

.formside {
  min-width: 0;
  min-height: 100vh;
  padding: 34px clamp(28px, 3.4vw, 48px) 40px;
  display: flex;
  flex-direction: column;
}
.formside-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  color: #52525b;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}
.back svg { transition: transform .2s ease; }
.back:hover { color: var(--ink); }
.back:hover svg { transform: translateX(-3px); }
.back:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.new {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13.5px;
  color: var(--muted-g);
}
.new-m { display: none; }
.link {
  border-radius: 4px;
  color: var(--acc);
  font-weight: 600;
  text-decoration: none;
}
.link:hover { color: var(--acc-d); text-decoration: underline; text-underline-offset: 3px; }
.link:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.formside-mid {
  flex: 1 1 auto;
  padding: 32px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  width: 100%;
  max-width: 440px;
  padding: 40px 40px 30px;
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(15, 15, 20, .04), 0 2px 4px rgba(15, 15, 20, .03), 0 20px 44px -16px rgba(15, 15, 20, .14), 0 60px 100px -40px rgba(15, 15, 20, .18);
}
.card-h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
}
.card-sub { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Messages. Red and green here mean what they always mean: a problem,
   or something that worked. */
.note {
  margin-top: 20px;
  padding: 11px 14px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}
.note svg { flex-shrink: 0; margin-top: 1px; }
.note.bad { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad); }
.note.ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); }

.form { margin-top: 28px; display: flex; flex-direction: column; }
.note + .form { margin-top: 20px; }
.fields { display: flex; flex-direction: column; gap: 20px; }

/* Label on the left, an optional link on the right, the box underneath.
   The link comes AFTER the box in the page, so Tab goes from the email
   box straight to the password box. */
.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
}
.field > label { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 500; color: var(--text); }
.field > .control { grid-column: 1 / -1; grid-row: 2; }
.field > .aside { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 500; }

.control { position: relative; display: flex; align-items: center; }
.control > .ic { position: absolute; left: 15px; color: #a1a1aa; pointer-events: none; }
.input {
  width: 100%;
  height: 50px;
  padding: 0 14px 0 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: #fafafa;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.input::placeholder { color: #a1a1aa; opacity: 1; }
.input:hover { border-color: #d4d4d8; background: #ffffff; }
.input:focus { border-color: var(--acc); background: #ffffff; box-shadow: 0 0 0 4px var(--acc-ring); }
.input.pw { padding-right: 52px; }
/* Browser autofill paints its own yellow or blue; keep the card's white. */
.input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 60px #ffffff inset;
}
.input:-webkit-autofill:focus { box-shadow: 0 0 0 60px #ffffff inset, 0 0 0 4px var(--acc-ring); }

.pw-toggle {
  position: absolute;
  right: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8b8b94;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.js .pw-toggle { display: flex; }
.pw-toggle:hover { background: #f4f4f5; color: var(--text); }
.pw-toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.pw-toggle .i-hide { display: none; }
.pw-toggle[aria-pressed="true"] .i-show { display: none; }
.pw-toggle[aria-pressed="true"] .i-hide { display: block; }

.btn-primary {
  margin-top: 28px;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: #000000;
  color: #ffffff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 22px -10px rgba(0, 0, 0, .5);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, background-color .22s ease;
}
.btn-primary:hover {
  background: #1d1d1f;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 18px 32px -12px rgba(0, 0, 0, .55);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--acc-ring), 0 10px 22px -10px rgba(0, 0, 0, .5); }
.btn-primary .spin {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: elSpin .8s linear infinite;
}
.btn-primary .t-busy { display: none; }
.btn-primary.is-busy { cursor: progress; background: #1d1d1f; transform: none; }
.btn-primary.is-busy .spin { display: block; }
.btn-primary.is-busy .t-idle { display: none; }
.btn-primary.is-busy .t-busy { display: inline; }

.secure {
  margin: 22px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ==========================================================================
   Tablet and phone: one column. The black panel becomes a header, the
   tour is left out and the card overlaps the header's lower edge.
   ========================================================================== */

/* Two panels, left and right, stay side by side while there is room for
   both. The drawing scales itself (auth.js sets --k); the type and the
   card step down with it, so nothing is dropped on a small laptop or in
   a narrow window. */
@media (max-width: 1099px) {
  .auth { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .js .story { padding-right: 4px; }
  .toast.t0, .toast.t1 { right: 0; }
  .formside-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .brandside-in { padding: 34px 30px 30px; }
  .hero-h { font-size: clamp(34px, 5.2vw, 48px); }
  .hero-sub { margin-top: 14px; font-size: 14.5px; }
  .formside { padding: 28px 24px 32px; }
  .card { max-width: 400px; padding: 32px 30px 26px; }
  .card-h { font-size: 33px; }
}

@media (max-width: 839px) {
  .auth { grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); }
  .brandside-in { padding: 26px 20px 22px; }
  .hero-h { font-size: clamp(26px, 4.4vw, 38px); }
  .hero-sub { margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
  .js .story { margin-top: 18px; gap: 14px; }
  .formside { padding: 22px 16px 28px; }
  .back, .new { font-size: 12.5px; }
  .input { font-size: 16px; }   /* 16px stops tablets zooming in on focus */
  .formside-mid { padding: 24px 0; }
  .card { max-width: 360px; padding: 26px 22px 22px; border-radius: 20px; }
  .card-h { font-size: 29px; }
  .card-sub { margin-top: 6px; font-size: 13.5px; }
  .form { margin-top: 22px; }
  .fields { gap: 16px; }
}

/* Only a phone-sized screen stacks them: side by side below this, both
   halves would be too narrow to read or to type in. */
@media (max-width: 559px) {
  .auth { display: block; }
  .brandside { position: relative; height: auto; }
  .brandside-in { height: auto; max-width: 680px; margin: 0 auto; padding: 26px 24px 64px; }
  .ring-sm { display: block; }
  .js .story { display: none; }
  .hero-h { margin-top: 56px; font-size: clamp(38px, 11.8vw, 52px); }
  .hero-sub { margin-top: 14px; font-size: 15px; }
  .formside { min-height: 0; padding: 0 16px 32px; }
  .formside-top { display: none; }
  .formside-mid { position: relative; z-index: 1; display: block; margin-top: -36px; padding: 0; }
  .card { margin: 0 auto; padding: 28px 22px 22px; }
  .card-h { font-size: 32px; }
  .card-sub { margin-top: 6px; font-size: 14.5px; }
  .form { margin-top: 24px; }
  .fields { gap: 18px; }
  .input { font-size: 16px; }   /* 16px stops phones zooming in on focus */
  .pw-toggle { right: 3px; width: 44px; height: 44px; }
  .btn-primary { margin-top: 24px; font-size: 16px; }
  .secure { margin-top: 18px; }
  .new-m { display: flex; justify-content: center; margin-top: 22px; font-size: 14px; }
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes elPull {
  0% { opacity: 0; filter: blur(18px); letter-spacing: .06em; }
  50% { opacity: 1; }
  100% { opacity: 1; filter: blur(0); letter-spacing: -.015em; }
}
@keyframes elFocusIn {
  0% { opacity: 0; filter: blur(14px); transform: scale(.985); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes elSway { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
@keyframes elFill { from { width: 0; } to { width: 100%; } }
@keyframes elGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes elMove {
  0% { transform: translate(0, 0) scale(1); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  16% { transform: translate(0, -5px) scale(1.06); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .35); }
  80% { transform: translate(120px, 111px) scale(1.06); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .35); }
  100% { transform: translate(120px, 116px) scale(1); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}
@keyframes elAF {
  0% { opacity: 0; transform: scale(1.45); }
  35% { opacity: 1; transform: scale(.92); }
  52% { transform: scale(1.04); }
  66% { opacity: 1; transform: scale(1); }
  76% { opacity: .2; }
  84% { opacity: 1; }
  92% { opacity: .2; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes elTag { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes elToast {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes elOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes elIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes elPop {
  0% { opacity: 0; transform: scale(.6); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes elDrop {
  0% { opacity: 0; transform: translateY(-16px); }
  65% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes elRing {
  0% { box-shadow: 0 0 0 0 var(--acc-ring-2); }
  100% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
}
@keyframes elBubble {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes elSpin { to { transform: rotate(360deg); } }

/* Reduced motion, asked for in the device settings. Nothing slides or
   blurs; every scene shows its finished state at once, and auth.js does
   not advance the tour on its own. Placed last and written one class
   more specific than the rules it replaces, so nothing has to be forced. */
@media (prefers-reduced-motion: reduce) {
  .pull, .js .story, .ring-sm .sway { animation: none; }
  .ring-rot, .win, .phone, .phone-screen, .win-body, .phone-body, .fx, .rail-i { transition: none; }
  .stage .is-on, .stage .is-on [class] {
    animation-duration: 1ms;
    animation-delay: 0s;
    animation-iteration-count: 1;
  }
  .input, .btn-primary, .back, .back svg, .pw-toggle, .story-pause, .tab-n, .tab-l { transition: none; }
  .btn-primary:hover, .back:hover svg { transform: none; }
}

/* ==========================================================================
   The small auth pages - reset, set password, verify, register
   (views/auth/_frame.php). Same shell as sign-in with the product tour
   left out: a person here is mid-task, not being sold to.
   ========================================================================== */

.is-quiet .brandside-in { justify-content: center; }
.is-quiet .hero-h { margin-top: 28px; }
/* The lens ring sits in the bottom-right corner, mostly off the edge,
   so it never crosses the headline or the line under it. */
.ring-q {
  position: absolute;
  left: auto;
  right: -300px;
  top: auto;
  bottom: -320px;
  width: 760px;
  height: 760px;
  opacity: .85;
}
.is-quiet .hero-h,
.is-quiet .hero-sub { max-width: 520px; }
.as {
  margin: 0 0 18px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafafa;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted-g);
}
.as b { font-weight: 600; color: var(--ink); }
.as-block { margin-bottom: 20px; }
/* A field is a two-column grid: label, then the box across both. A hint
   takes the whole width on its own row under the box. */
.field > .hint {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
a.btn-primary { text-decoration: none; }
.card .form + .btn-primary,
.card .as + .btn-primary { margin-top: 0; }

@media (max-width: 559px) {
  .is-quiet .brandside-in { justify-content: flex-start; }
  .is-quiet .hero-h { margin-top: 44px; }
  .ring-q { display: none; }
}

/* The client portal sign-in adds a code box and a quiet button. */

.field > .control { grid-column: 1 / -1; }
.input.code {
  padding-left: 16px;
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .34em;
  text-align: center;
}
.btn-quiet {
  width: 100%;
  height: 46px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.btn-quiet:hover { background: #fafafa; border-color: #d4d4d8; transform: translateY(-1px); }
.btn-quiet:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.hint-foot { margin-top: 16px; text-align: center; }

@media (min-width: 1100px) {
  .formside-top > .new:only-child { margin-left: auto; }
}

/* ==========================================================================
   The client portal tour (views/portal/login.php)

   The staff sign-in's window, rail, ring and notices, showing the
   couple's side: their event, payments, documents and approvals. Only
   what the four screens hold is new here; the frame is shared.
   ========================================================================== */

.cp {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
}
.cp .tr { position: relative; }
.cp .tr .num { font-family: var(--mono); font-weight: 500; font-size: 9.5px; color: var(--text); }
.cp .tr .ty { color: #52525b; }
/* Each screen's table spans the window's 592px of room. */
.cp-fn .tr { grid-template-columns: 124px 132px 176px 160px; }
.cp-pay .tr { grid-template-columns: 160px 132px 140px 160px; }
.cp-doc .tr { grid-template-columns: 262px 110px 150px 70px; }
.cp-ok .tr { grid-template-columns: 300px 150px 142px; }
.chip2.plain { background: #f4f4f5; color: #52525b; }
.chip2.acc { background: var(--acc-tint); color: var(--acc); }

/* Their event: the countdown beside the name. */
.cp-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 9.5px;
  color: #71717a;
  white-space: nowrap;
}
.cp-count b { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

/* Payments: the agreed total, and how much of it is paid. */
.cp-agreed {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 9.5px;
  color: #71717a;
  white-space: nowrap;
}
.cp-agreed b { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); }
.cp-paid {
  margin: 14px 16px 0;
  padding: 12px 14px;
  border: 1px solid #ececef;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-paid-t {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 10px;
  color: #52525b;
  white-space: nowrap;
}
.cp-paid-v { display: flex; align-items: baseline; gap: 6px; }
.cp-paid-v b { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.cp-sw .to { left: auto; right: 0; }
.cp-meter { display: flex; height: 6px; background: #e4e4e7; overflow: hidden; }
.cp-meter .bf { width: var(--w); height: 100%; background: #000000; transform-origin: left center; }

/* Documents: name, a "new" tag when there is one, and the one action
   that repeats down the list, as an icon. */
.cp-doc .fn { display: flex; align-items: center; gap: 6px; }
.cp-doc .fn-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cp-doc .acts { display: flex; justify-content: flex-end; }
.cp-ic {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  color: #52525b;
}

/* Approvals: the one thing waiting on them, then what is already done. */
.cp-ask {
  position: relative;
  margin: 2px 16px 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #e4e4e7;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 18px -12px rgba(0, 0, 0, .18);
}
.cp-ask-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-ask-l b { font-size: 11.5px; line-height: 14px; font-weight: 600; white-space: nowrap; }
.cp-ask-l span { font-size: 9.5px; line-height: 12px; color: #71717a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-btns { display: flex; gap: 6px; }
.cp-ask-r .to { left: auto; right: 0; top: 1px; }
.af.blk { left: -6px; top: -6px; right: -6px; bottom: -6px; }
.cp-sub { margin: 16px 16px 0; font-size: 10px; font-weight: 600; color: #3f3f46; }
.cp-sub + .tbl { margin-top: 8px; }