/* frontdesk.css - the front desk kit.
   Booking, chat and form, one artifact.

   PALETTE: this file writes no colour of its own. It reads the tokens the site
   already declares in fullstyle.css and keeps one fallback each, on the .fd
   scope below, so the kit still paints correctly on a page that does not link
   that sheet. Change a colour by changing the site token, never here.

   MOTION: every transition in this file is answered by the reduced-motion block
   at the foot. Nothing here moves the scroll position.

   HIT AREAS: 44px is the floor for the box a finger lands on. It is never used
   as a visual size - a checkbox is still a checkbox; its target is what grows. */

/* ── the serif is dead ─────────────────────────────────────────────────────
   HIS RULING 2026-08-30, filed at canon\law\05-HIS-RULING - the serif dies
   site-wide, text readable - 2026-08-30.md, enforced as BAN-TYPE-040 (blocker):
   the serif display face is off every surface, forever.

   The site's shared sheet still points --serif at the banned display stack on
   its line 24, and 38 rules read that token — among them .page-display,
   .prose h2, .s1-brand and .in-foot-seal, every one of which the three pages
   in this packet use. Writing var(--serif, Arial…) would not help: a fallback
   never fires when the token is SET. The token itself has to be repointed,
   from a sheet that loads after the shared one.

   The banned stack is deliberately NOT spelled out anywhere in this file. It
   was, in the first draft of this comment, and canon-check fired BAN-TYPE-040
   on the explanation — a file quoting the sin reads to a grep exactly like a
   file committing it. Name the rule, never the string.

   SCOPED TO THIS PACKET'S OWN PAGES, ON PURPOSE. The site-wide kill is not
   this order's work and must not ride in a widget stylesheet — it is already
   built, swept and staged at 02 Fleet\_TRANSFER\fontcut-0830\candidate\, which
   covers fullstyle.css, the homepage's seventeen inline blocks, school\app.css,
   store.css and teamdoor.css, and rides his push. Checked before writing this:
   that recut forked from the CURRENT homepage, not a .pre- twin — it carries
   all 151 of the store links the live page gained on 08-29, which the
   pre-storelink backup does not. It is current, and it owns the sweep.

   So this kit changes the typeface on the three pages it authors and on no
   page it merely visits. The value is character-for-character the one that
   recut sets at its fullstyle.css line 24, so the two agree the moment it
   mounts, and this block can be cut in one line at that point.

   body[data-page] beats :root on specificity, so this wins wherever it lands
   without !important, and inherits to everything inside the page. */
body[data-page="book"],
body[data-page="quote"],
body[data-page="plan"] {
  --serif: Arial, Helvetica, sans-serif;
}

.fd {
  --fd-ground: var(--black, #000);
  --fd-card: var(--panel, #141414);
  --fd-raise: #1c1c1c;
  --fd-ink: var(--paper, #f1f0eb);
  --fd-soft: var(--gray-1, #d7d6d1);
  --fd-quiet: var(--gray-3, #7a7a76);
  --fd-line: var(--soft-line, rgba(255, 255, 255, 0.16));
  --fd-edge: var(--paper, #f1f0eb);
  --fd-radius: var(--radius, 2px);
  --fd-sans: var(--sans, Arial, Helvetica, sans-serif);
  /* One stack. The display face was a serif until his 2026-08-30 ruling took it off
     every surface; weight and tracking carry the headings now, and the money figures
     ride the plain sans he asked for. */
  font-family: var(--fd-sans);
}

/* ── the launcher ──────────────────────────────────────────────────────────
   Bottom right, and deliberately UNDER the phone bar in the stack (z 57 against
   the bar's 58): on a phone the call action must never be the thing a floating
   button covers. It is also lifted clear of the bar's measured 49px height, the
   same 61px the back-to-top button already uses. It says a word, never a glyph. */
.fd-launch {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 57;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  color: var(--fd-ground);
  background: var(--fd-ink);
  border: 1px solid var(--fd-ink);
  border-radius: var(--fd-radius);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  transition: background 0.16s ease;
}
.fd-launch:hover { background: var(--fd-soft); }
.fd-launch:focus-visible { outline: 2px solid var(--fd-ink); outline-offset: 3px; }
.fd-launch[hidden] { display: none; }

/* ── the panel ─────────────────────────────────────────────────────────────
   Anchored to the same corner it opens from. It is a panel, not a page: it
   never takes the whole screen on desktop and it never covers the phone bar. */
.fd-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 57;
  display: none;
  flex-direction: column;
  width: min(384px, calc(100vw - 36px));
  max-height: min(620px, calc(100vh - 120px));
  max-height: min(620px, calc(100svh - 120px));
  color: var(--fd-ink);
  background: var(--fd-ground);
  border: 1px solid var(--fd-edge);
  border-radius: var(--fd-radius);
}
.fd-panel.is-open { display: flex; }

.fd-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--fd-line);
}
.fd-panel__title {
  margin: 0;
  font-family: var(--fd-sans);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fd-panel__body {
  flex: 1 1 auto;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fd-panel__foot {
  display: flex;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--fd-line);
}

/* ── words and rhythm ──────────────────────────────────────────────────── */
.fd h3.fd-h {
  margin: 0 0 8px;
  font-family: var(--fd-sans);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.fd p.fd-p { margin: 0 0 14px; color: var(--fd-soft); font-size: 1rem; line-height: 1.55; }
.fd p.fd-fine { margin: 12px 0 0; color: var(--fd-quiet); font-size: 0.86rem; line-height: 1.5; }
.fd .fd-step {
  margin: 0 0 10px;
  color: var(--fd-quiet);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── buttons ───────────────────────────────────────────────────────────────
   Two weights only, so one next move is always the loud one. Every control
   carries its own words; nothing on this surface is a shape you have to guess. */
.fd-btn,
.fd-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--fd-ink);
  background: transparent;
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.fd-btn:hover, .fd-opt:hover { border-color: var(--fd-edge); background: var(--fd-raise); }
.fd-btn:focus-visible, .fd-opt:focus-visible { outline: 2px solid var(--fd-ink); outline-offset: 2px; }
.fd-btn--go {
  color: var(--fd-ground);
  background: var(--fd-ink);
  border-color: var(--fd-ink);
}
.fd-btn--go:hover { background: var(--fd-soft); border-color: var(--fd-soft); }
.fd-btn--quiet { min-height: 44px; padding: 8px 12px; border-color: transparent; font-weight: 400; font-size: 0.88rem; color: var(--fd-quiet); }
.fd-btn--quiet:hover { border-color: var(--fd-line); background: transparent; color: var(--fd-ink); }
.fd-panel__foot .fd-btn { flex: 1 1 0; padding: 10px 8px; font-size: 0.86rem; }

/* one column, left-aligned: an answer is a sentence, not a tile */
.fd-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 14px; }
.fd-opts .fd-opt { justify-content: flex-start; text-align: left; }

.fd-nav { display: flex; gap: 8px; align-items: center; }

/* ── the answer card ───────────────────────────────────────────────────────
   The plan name leads. The two figures sit beside each other because a build
   charge and a monthly charge are two different responsibilities and reading
   one without the other is how people get a wrong idea of the cost. */
.fd-card {
  padding: 16px;
  background: var(--fd-card);
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius);
}
.fd-card + .fd-card { margin-top: 10px; }
.fd-card__name { margin: 0 0 6px; font-family: var(--fd-sans); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; }
.fd-card__line { margin: 0 0 14px; color: var(--fd-soft); font-size: 1rem; line-height: 1.5; }
.fd-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fd-fig__k { display: block; margin: 0 0 3px; color: var(--fd-quiet); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.fd-fig__v { display: block; font-family: var(--fd-sans); font-weight: 700; font-size: 1.7rem; line-height: 1.1; letter-spacing: -0.01em; }
.fd-fig__v small { font-family: var(--fd-sans); font-weight: 400; font-size: 0.84rem; letter-spacing: 0.02em; }
.fd-card__term { margin: 12px 0 0; color: var(--fd-quiet); font-size: 0.88rem; }
.fd-card__extra { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--fd-line); color: var(--fd-soft); font-size: 0.95rem; line-height: 1.5; }

/* ── the message form ──────────────────────────────────────────────────── */
.fd-form { display: grid; gap: 12px; }
.fd-f { display: grid; gap: 6px; }
.fd-f label { color: var(--fd-quiet); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.fd-f input,
.fd-f textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  color: var(--fd-ink);
  background: var(--fd-ground);
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius);
  font-family: inherit;
  font-size: 1rem;
}
.fd-f textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.fd-f input:focus, .fd-f textarea:focus { outline: none; border-color: var(--fd-edge); }
.fd-f input:focus-visible, .fd-f textarea:focus-visible { outline: 2px solid var(--fd-ink); outline-offset: 1px; }
.fd-note { margin: 0; padding: 12px 14px; border-left: 2px solid var(--fd-edge); color: var(--fd-soft); font-size: 1rem; line-height: 1.55; }
.fd-note--bad { border-left-color: var(--fd-ink); }
.fd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── the slot picker ───────────────────────────────────────────────────── */
/* On a phone the days scroll sideways, which is the right shape for a thumb.
   Once there is room they wrap instead: a row that scrolls with no visible edge
   hides the back half of the fortnight from anyone not looking for it. */
.fd-days { display: flex; gap: 8px; margin: 0 0 16px; padding-bottom: 8px; overflow-x: auto; overscroll-behavior-x: contain; }
@media (min-width: 560px) {
  .fd-days { flex-wrap: wrap; overflow-x: visible; }
}
.fd-day {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  min-width: 66px;
  min-height: 56px;
  padding: 8px 10px;
  color: var(--fd-ink);
  background: transparent;
  border: 1px solid var(--fd-line);
  border-radius: var(--fd-radius);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.fd-day__dow { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fd-quiet); }
.fd-day__num { font-family: var(--fd-sans); font-weight: 700; font-size: 1.2rem; line-height: 1.1; }
.fd-day[aria-pressed="true"] { color: var(--fd-ground); background: var(--fd-ink); border-color: var(--fd-ink); }
.fd-day[aria-pressed="true"] .fd-day__dow { color: var(--fd-ground); }
.fd-day:hover { border-color: var(--fd-edge); }
.fd-day:focus-visible { outline: 2px solid var(--fd-ink); outline-offset: 2px; }
.fd-day:disabled { opacity: 0.4; cursor: default; }

.fd-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.fd-slot { min-height: 44px; }
.fd-slot[aria-pressed="true"] { color: var(--fd-ground); background: var(--fd-ink); border-color: var(--fd-ink); }

/* ── the in-page mount (the quote and plan pages) ─────────────────────────
   The same engine, rendered into the page instead of the panel. It is given a
   little more room to breathe and its own edge so it reads as a tool on the
   page, not as another paragraph. */
.fd-inline {
  max-width: 640px;
  margin-top: 28px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--fd-edge);
  border-radius: var(--fd-radius);
}
.fd-inline .fd-h { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.fd-inline .fd-opt { min-height: 52px; font-size: 0.95rem; }
.fd-inline .fd-card__name { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.fd-inline .fd-fig__v { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.fd-inline .fd-exits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.fd-exits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fd-exits .fd-btn { flex: 1 1 auto; }

/* Screen-reader announcements for the step changes. Visually gone, never
   display:none - a hidden live region announces nothing. */
.fd-say {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── phones ────────────────────────────────────────────────────────────────
   The phone bar is fixed at the bottom on <=900px and measures 49px including
   its rule. Both the launcher and the panel clear it by the same 61px the
   back-to-top button was already tuned to, so nothing here lands on Call Us. */
@media (max-width: 900px) {
  .fd-launch { right: 12px; bottom: 61px; }
  .fd-panel {
    right: 12px;
    left: 12px;
    bottom: 61px;
    width: auto;
    max-height: calc(100vh - 140px);
    max-height: calc(100svh - 140px);
  }
  .fd-panel__foot { flex-wrap: wrap; }
  .fd-panel__foot .fd-btn { flex: 1 1 30%; }
}

@media (max-width: 400px) {
  .fd-figs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fd-slots { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* ── motion off ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fd-launch,
  .fd-btn,
  .fd-opt,
  .fd-day {
    transition: none;
  }
}