/* ═══════════════════════════════════════════════════════════════════
   book.css — /book, /book/manage/:token
   Written 2026-09-22 in the blog-index.css / compare.css manner.

   NO :root, NO RESET, NO body{} IN THIS FILE.

   It builds on main.css and home.css (--dark, --amber, --border-dark,
   --muted-dark, --gutter, .wrap, .eyebrow, .btn-primary, .btn-ghost,
   Sora/DM Sans) and adds nothing global. Every selector sits under a
   #bk-* id or a .bk-* class.

   Two design decisions worth recording.

   1. THE SLOTS ARE A WRAPPING GRID, NOT A SCROLLING COLUMN. A phone gets
      three across, so a working day is one screen rather than eighteen
      rows of scrolling. Nothing here scrolls sideways: a slot hidden off
      the right edge is a time nobody books.

   2. EVERY CONTROL IS 44px OR MORE WITHOUT touch-targets.css HELPING.
      The slots are the page's whole purpose and they are the smallest
      thing on it; leaving them to a global rule keyed on pointer:coarse
      means a tablet at 1024px gets 30px targets. They are sized here.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────── */
#bk-hero {
    background: var(--dark);
    padding: 9rem var(--gutter) 2.75rem;
    border-bottom: 1px solid var(--border-dark);
}
.bk-crumbs {
    display: flex;
    /* touch-targets.css gives every `nav a` a 44px min-height and makes
       it a flex box, which centres its own text; the plain <span>s beside
       it stretch to the same 44px and sit at the TOP of it. The crumb
       read as two lines on a phone. Aligning the row fixes both. */
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--muted-dark);
    margin-bottom: 1.5rem;
}
.bk-crumbs a { color: var(--muted-dark); text-decoration: none; }
.bk-crumbs a:hover { color: #fff; }
#bk-hero .eyebrow { display: block; color: var(--amber); margin-bottom: 0.9rem; }
#bk-hero h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    max-width: 16em;
    margin: 0 0 1.1rem;
}
.bk-lede {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
    max-width: 40em;
    margin: 0;
}
.bk-lede a, .bk-flash a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bk-lede a:hover, .bk-flash a:hover { color: var(--amber); }
.bk-flash {
    margin: 1.25rem 0 0;
    padding: 0.85rem 1.1rem;
    border-left: 3px solid var(--amber);
    background: rgba(217,119,6,0.09);
    color: rgba(255,255,255,0.92);
    font-size: 0.98rem;
    line-height: 1.55;
}

/* ── The picker ────────────────────────────────────────────────── */
#bk-pick { background: var(--dark); padding: 3rem var(--gutter) 4.5rem; }

.bk-steps {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.bk-step {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border-dark);
    border-radius: 999px;
    color: var(--muted-dark);
}
.bk-step.on { color: var(--dark); background: var(--amber); border-color: var(--amber); font-weight: 600; }
.bk-step.done { color: #fff; border-color: rgba(255,255,255,0.35); }

.bk-zone { font-size: 0.88rem; color: var(--muted-dark); margin: 2.5rem 0 0; }
.bk-zone-name { color: #fff; }

/* ── The soonest line ───────────────────────────────────────────── */
.bk-soonest {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.78);
    margin: 0 0 2rem;
    max-width: 40em;
}
.bk-soonest-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--amber);
    text-decoration-thickness: 2px;
}
.bk-soonest-link:hover { color: var(--amber); }

/* Containers whose only job is to be hidden. The [hidden] attribute
   needs help here because .bk-two and .bk-times set display, and a
   display rule in the author stylesheet beats the UA's display:none for
   [hidden]. The portal's collapsed filters recorded this first. */
.bk-step1[hidden],
.bk-step2[hidden],
.bk-why-wrap[hidden],
.bk-times[hidden] { display: none !important; }
.bk-times-all { min-width: 0; }

/* ── The two columns ────────────────────────────────────────────── */
/* The calendar is a fixed, comfortable width and the times take the
   rest. They stack on a phone, calendar first, because the day is the
   choice you make before the time. */
.bk-two {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 3rem;
    align-items: start;
}

/* ── Calendar ───────────────────────────────────────────────────── */
.bk-cal-month {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
}
.bk-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.bk-dow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-dark);
}
/* A day cell is square and at least 44px, so it is a real touch target
   without touch-targets.css having to reach in. A calendar whose days
   are 30px is the commonest way a booking page fails on a phone. */
.bk-d {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* A quiet fill on every day, cleared again for the ones that are not
   days you can pick. The states are written this way, all at (0,2,0) or
   less and in cascade order, ON PURPOSE.
   
   The first version put the fill on `.bk-d:not(.off):not(.pad)`, which is
   (0,3,0), and the selected state on `.bk-d.on`, which is (0,2,0). The
   selected day silently kept the quiet fill and took only the dark text
   from `.on`: near-black on a 7% white ground, on the one element that
   says which day you are looking at. It rendered, it validated, and it
   could not be read. Same family as the command palette's selected row
   in CLAUDE.md, and nothing catches it but looking at the computed
   value. */
.bk-d { background: rgba(255,255,255,0.07); }
.bk-d.off,
.bk-d.pad { background: none; }
.bk-d:hover { background: rgba(217,119,6,0.22); border-color: var(--amber); }
.bk-d.on {
    background: var(--amber);
    border-color: var(--amber);
    color: #1a1205;
    font-weight: 700;
}
.bk-d.off { color: rgba(255,255,255,0.22); cursor: default; }

/* ── Times ──────────────────────────────────────────────────────── */
.bk-times-day {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.015em;
    margin: 0 0 1.5rem;
}
.bk-group { margin-bottom: 1.75rem; }
.bk-group[hidden] { display: none; }
.bk-group-label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-dark);
    margin: 0 0 0.6rem;
}
.bk-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bk-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 10px;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
    text-decoration: none;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bk-slot:hover { border-color: var(--amber); background: var(--amber); color: #1a1205; }
/* Set by book.js on a time outside 08:00-20:00 of the READER's day. It
   sits on the <li>, because hiding the <a> leaves its grid cell behind
   and pushes the first real time two columns in. Hidden, not removed:
   one press of .bk-more brings them all back. */
.bk-slots > li.bk-slot-odd { display: none; }
.bk-showing-all .bk-slots > li.bk-slot-odd { display: block; }

.bk-more {
    min-height: 44px;
    padding: 0 1.1rem;
    background: none;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px;
    color: rgba(255,255,255,0.72);
    /* A <button> does not inherit the page's font. */
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}
.bk-more:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.bk-more[hidden] { display: none; }

.bk-none {
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    max-width: 38em;
    margin: 0;
}
.bk-none a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }

/* ── The chosen slot ───────────────────────────────────────────── */
.bk-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--amber);
    border-radius: 12px;
    background: rgba(217,119,6,0.1);
    margin-bottom: 2rem;
}
.bk-chosen-time {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.015em;
}
.bk-chosen-sub { display: block; font-size: 0.85rem; color: var(--muted-dark); margin-top: 0.25rem; }
.bk-change {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
}
.bk-change:hover { border-color: var(--amber); color: var(--amber); }

/* ── The form ──────────────────────────────────────────────────── */
.bk-form { max-width: 34em; }
.bk-field { margin-bottom: 1.25rem; }
.bk-label {
    display: block;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}
.bk-opt { font-weight: 400; color: var(--muted-dark); font-size: 0.82rem; }
.bk-input,
.bk-textarea {
    display: block;
    width: 100%;
    /* A grid or flex item's automatic minimum is its CONTENT, and an
       <input> has an intrinsic width from its size attribute that
       width:100% does not override. This is what scrolled the footer
       sideways at 320px. */
    min-width: 0;
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    /* 16px, or iOS zooms the page on focus and leaves you zoomed. */
    font-size: 1rem;
    font-family: inherit;
    color: #fff;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 8px;
}
.bk-textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.bk-input:focus,
.bk-textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.bk-input::placeholder { color: rgba(255,255,255,0.35); }
.bk-hint { font-size: 0.85rem; color: var(--muted-dark); margin: 0.4rem 0 0; line-height: 1.5; }

/* The honeypot. Off-screen rather than display:none, because some bots
   skip hidden fields and a real screen reader is told to ignore it by
   the aria-hidden on the wrapper. */
.bk-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bk-errs {
    border-left: 3px solid #f87171;
    background: rgba(248,113,113,0.1);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
    border-radius: 0 8px 8px 0;
}
.bk-err { margin: 0; color: #fecaca; line-height: 1.55; }
.bk-err + .bk-err { margin-top: 0.5rem; }

.bk-submit { margin-top: 0.5rem; min-height: 48px; }
.bk-note {
    font-size: 0.88rem;
    color: var(--muted-dark);
    line-height: 1.65;
    max-width: 38em;
    margin: 1.1rem 0 0;
}
.bk-note a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; }
.bk-note a:hover { color: var(--amber); }

/* ── What happens on the call ──────────────────────────────────── */
#bk-why {
    background: #111;
    padding: 4rem var(--gutter);
    border-top: 1px solid var(--border-dark);
}
#bk-why h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 1.25rem;
}
.bk-prep-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 42em;
}
.bk-prep-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.9rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
}
.bk-prep-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.78em;
    width: 8px;
    height: 1px;
    background: var(--amber);
}

/* ── The manage page ───────────────────────────────────────────── */
#bk-manage { background: var(--dark); padding: 3rem var(--gutter) 5rem; }
.bk-panel {
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    max-width: 38em;
    overflow: hidden;
}
.bk-row {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border-dark);
}
.bk-row:last-child { border-bottom: 0; }
.bk-row-k { color: var(--muted-dark); font-size: 0.88rem; }
.bk-row-v { color: rgba(255,255,255,0.92); line-height: 1.5; overflow-wrap: anywhere; }
.bk-add { margin-top: 1.75rem; }
.bk-add-label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-dark);
    margin: 0 0 0.7rem;
}
.bk-add + .bk-actions { margin-top: 1.25rem; }
.bk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.75rem 0 0;
}
.bk-danger { margin: 2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.bk-cancel {
    min-height: 44px;
    padding: 0 1.1rem;
    background: none;
    border: 1px solid rgba(248,113,113,0.5);
    border-radius: 8px;
    color: #fca5a5;
    /* A <button> does not inherit the page's font. Every Academy submit
       was Arial until 2026-09-14 for exactly this. */
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.bk-cancel:hover { border-color: #f87171; color: #fecaca; background: rgba(248,113,113,0.1); }
.bk-danger .bk-hint { margin: 0; }

/* ── Buttons ───────────────────────────────────────────────────── */
/*
   main.css splits a button in two: `.btn` carries the padding, the type
   and the radius, `.btn-primary` carries only the fill. And `.btn-ghost`
   is in NEITHER main.css nor home.css, despite the note at the top of
   this file once claiming otherwise: it lives in hire-page.css, which
   this page does not load.

   So `class="btn-primary"` on its own rendered as coloured text with
   zero padding and square corners, and `class="btn-ghost"` rendered as
   nothing at all. Both shipped that way on /compare from 2026-09-16 and
   were found on 2026-09-22 by reading the COMPUTED style of a button in
   a phone preview, not by looking at the page.

   check-classes could not see it, and the reason is worth keeping: it
   tests whether the stylesheet CONTAINS the string ".btn-ghost", and
   both names appear in the comment at the top of this file. A comment
   was resolving a class. It strips comments before matching now.

   The markup takes `btn btn-primary`, as the system intends. This is
   the ghost half, which has to be defined per page until it earns a
   place in main.css.
*/
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    min-height: 44px;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.93rem;
    text-decoration: none;
    background: transparent;
    color: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.22);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.5); color: #fff; }

/* ── Phones ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #bk-hero { padding-top: 7rem; padding-bottom: 2rem; }

    /* home.css has a blanket `section { padding: 2.75rem !important }`
       and `h2 { font-size: ... !important }` in this same query, written
       for the home page and applied site-wide. A bare #id rule at
       (1,0,0) loses to it, so every per-section override on this site
       carries !important. Seven were dead this way at once. */
    #bk-pick, #bk-why, #bk-manage {
        padding-top: 2.5rem !important;
        padding-bottom: 3rem !important;
    }
    #bk-why h2 { font-size: 1.4rem !important; }

    .bk-two { grid-template-columns: 1fr; gap: 2.25rem; }
    .bk-slots { grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: 0.45rem; }
    .bk-soonest { font-size: 1rem; margin-bottom: 1.5rem; }
    .bk-row { grid-template-columns: 1fr; gap: 0.2rem; }
    .bk-chosen { flex-direction: column; align-items: stretch; }
    .bk-change { justify-content: center; }
    .bk-actions .btn-primary, .bk-actions .btn-ghost { flex: 1 1 100%; text-align: center; }
}