/* The setter booking page.
 *
 * Layout only, plus the few pieces the map does not already own. Everything
 * that can come from app.css does: the tokens, .card, .btn, .field, .in,
 * .muted, .err, .nobody and .toast are the same primitives the reps already
 * use, so the two pages cannot drift apart.
 *
 * Phone first. A setter is usually on a laptop, but Steve's team books from a
 * phone in the truck often enough that the narrow layout is the real one and
 * the wide layout is the variant.
 *
 * Two panels: the form, and what to say on the phone. On a laptop they sit
 * side by side, because a setter on a call wants both at once. On a phone
 * there is no room for that, so a two tab strip swaps them. WHICH of the two
 * arrangements is in force is decided by CSS alone, never by JavaScript
 * reading a breakpoint, so the two can never disagree about it.
 */

/* app.css locks the map page to the viewport. This page is a document and
   scrolls, so that lock has to come off. */
html, body.fc-book { height: auto; min-height: 100%; overflow: visible; }
body.fc-book { background: var(--bg-soft); }
textarea { font: inherit; }

.bk {
  max-width: 1240px; margin: 0 auto;
  /* The shell measures itself into these, so the page clears the bar whether
     it is a top bar or a bottom bar, safe area included. */
  padding: calc(var(--fshell-top-h, 0px) + 14px) 16px calc(var(--fshell-bottom-h, 0px) + 28px);
}

/* ----------------------------------------------------------------- head */
.bk-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 12px; }
.bk-head img { height: 38px; width: auto; flex: none; }
/* A real basis, not a bare flex: 1. With basis 0 and min-width 0 the title can
   shrink for ever, so on a phone it never wraps, it collapses to a sliver and
   sets one word per line beside the name chip. 240px is roughly where the two
   stop fitting side by side, so below that the chip drops to its own row. */
.bk-head-t { min-width: 0; flex: 1 1 240px; }
.bk-head h1 { font-size: 21px; }
.bk-head .sub { color: var(--mute); font-size: 13.5px; margin-top: 2px; }
/* 52px so the button inside it can be a real 44px target. A 27px Sign out
   was the first thing the tap audit caught. */
.bk-who {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 4px 0 12px;
  margin-left: auto; max-width: 100%; min-width: 0;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2);
}
.bk-who b { font-family: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bk-who button {
  border: 0; background: transparent; color: #0b4f96; font-family: var(--head); font-weight: 700;
  font-size: 12.5px; cursor: pointer; padding: 0 12px; min-height: 44px; border-radius: 999px;
}
.bk-who button:hover { background: var(--blue-tint); }

/* ----------------------------------------------------------------- tabs
   Phone only. The strip is removed outright on a laptop, where both panels
   are on screen together and a tab would be a way of hiding half the page for
   no reason. */
.bk-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 12px;
  background: #eef2f7; border-radius: 14px; padding: 4px;
}
.bk-tab {
  min-height: 46px; border: 0; background: transparent; border-radius: 11px; cursor: pointer; color: var(--ink-2);
  font-family: var(--head); font-weight: 700; font-size: 14px; padding: 6px 8px;
}
.bk-tab[aria-selected="true"] { background: #fff; color: #0b4f96; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18); }
.bk-tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ----------------------------------------------------------------- grid */
.bk-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.bk-form { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.bk-form > .card { padding: 16px; min-width: 0; }
/* Below the two column breakpoint exactly one panel is on screen, and the
   grid's own class says which. */
.bk-grid.show-book > .bk-info { display: none; }
.bk-grid.show-info > .bk-form { display: none; }

.bk-step { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bk-step h2 { font-size: 16px; flex: 1; min-width: 0; }
.bk-num {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--blue-tint); color: #0b4f96; font-family: var(--head); font-weight: 800; font-size: 13px;
}
.bk-form .muted { margin-top: 8px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.two .field + .field { margin-top: 0; }
.note { min-height: 76px; resize: vertical; line-height: 1.45; }
.hint { font-family: var(--body); font-weight: 400; letter-spacing: 0; text-transform: none; color: #4a5567; font-size: 12px; }

/* A button that reads as a link but is a real 44px target. */
.lnkbtn {
  display: block; width: 100%; margin-top: 12px; min-height: 44px; padding: 10px 12px;
  border: 1.5px dashed var(--blue-line); border-radius: 11px; background: #fff; cursor: pointer;
  color: #0b4f96; font-family: var(--head); font-weight: 700; font-size: 13.5px; text-align: center;
}
.lnkbtn:hover { background: var(--blue-tint); border-style: solid; }
.lnkbtn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ------------------------------------------------------- the chosen one */
.chosen {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  background: var(--blue-tint); border: 1px solid var(--blue-line); border-radius: 12px; padding: 10px 12px;
}
.chosen:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.chosen .ci { width: 18px; height: 18px; flex: none; color: #0b4f96; }
.chosen-t { flex: 1 1 190px; min-width: 0; }
.chosen-t b { display: block; font-family: var(--head); font-size: 14.5px; color: #0b4f96; overflow-wrap: anywhere; }
.chosen-t small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.chosen-go {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--blue-line);
  background: #fff; color: #0b4f96; font-family: var(--head); font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.chosen-go:hover { border-color: #0b4f96; }
.chosen-go:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ------------------------------------------------------- a new contact */
.newc { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.newc-h { font-family: var(--head); font-weight: 700; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }

/* -------------------------------------------------------------- the zip */
.zipbox {
  margin-top: 12px; display: flex; align-items: center; gap: 12px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.zipbox .z { font-family: var(--head); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; line-height: 1.1; }
.zipbox .zt { min-width: 0; flex: 1; }
.zipbox .zt small { display: block; color: var(--mute); font-size: 12.5px; }
.zipbox.miss { background: var(--amber-bg); border-color: rgba(181, 71, 8, 0.28); color: var(--amber); }
.zipbox.miss .zt small { color: var(--amber); }

/* Who covers it. The dot is the same colour the rep paints with on the map,
   so a setter reading a zip card and a setter reading this see one identity. */
.cover { margin-top: 10px; }
.cover .lab { margin-bottom: 6px; }
.repchips { display: flex; flex-wrap: wrap; gap: 6px; }
.repchip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 11px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2);
  max-width: 100%;
}
.repchip b { font-family: var(--head); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot9 { width: 11px; height: 11px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.22); }

/* ---------------------------------------------------------- what it is */
.bk-a-type .bk-step { margin-bottom: 8px; }
.bk-icn {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--blue-tint); border: 1px solid var(--blue-line); color: #0b4f96;
}
.bk-icn svg { width: 15px; height: 15px; }
.mins {
  flex: none; font-family: var(--head); font-weight: 700; font-size: 11.5px; color: #4a5567;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px;
}

/* ------------------------------------------------------------- who takes */
.segs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bg-soft); border-radius: 14px; padding: 4px; }
.seg {
  min-height: 48px; border: 0; background: transparent; border-radius: 11px; cursor: pointer; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--head); font-weight: 700; font-size: 13.5px; padding: 6px 8px;
}
.seg svg { width: 18px; height: 18px; flex: none; }
.seg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg:hover { background: rgba(255, 255, 255, 0.7); }
.seg[aria-checked="true"] { background: #0b4f96; color: #fff; box-shadow: 0 2px 8px rgba(11, 79, 150, 0.28); }
.seg:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.modenote { min-height: 34px; }

.picklist { display: grid; gap: 6px; margin-top: 10px; }
.pickrep {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; width: 100%;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left;
  font-size: 14px; color: var(--ink);
}
.pickrep b { font-family: var(--head); font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickrep small { color: #4a5567; font-size: 12.5px; flex: none; }
.pickrep:hover { border-color: var(--blue-line); background: var(--blue-tint); }
.pickrep[aria-checked="true"] { border-color: #0b4f96; background: var(--blue-tint); box-shadow: inset 0 0 0 1px #0b4f96; }
.pickrep:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.pickrep .tick { width: 18px; height: 18px; flex: none; color: #0b4f96; opacity: 0; }
.pickrep[aria-checked="true"] .tick { opacity: 1; }

/* ----------------------------------------------------------------- when
   Two dropdowns, the day and then the time on that day. A native select is
   what a setter can drive fastest: one keystroke opens it and typing the
   first letters of a day jumps to it. */
.bk-refresh {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); background: #fff; border-radius: 10px; color: var(--ink-2);
  font-family: var(--head); font-weight: 700; font-size: 12.5px; cursor: pointer;
}
.bk-refresh svg { width: 15px; height: 15px; }
.bk-refresh:hover { background: var(--blue-tint); color: #0b4f96; border-color: var(--blue-line); }
.timesnote { margin-top: 0 !important; margin-bottom: 12px; }
.whenrow { margin-top: 0; }
.tznote { margin-top: 10px !important; }

.sel { position: relative; display: block; }
.sel select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  /* A select with no options is still a control, and a disabled one has to
     read as off rather than as broken. */
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 17px 17px;
  font-family: var(--head); font-weight: 700; color: var(--ink);
}
.sel select:disabled { background-color: var(--bg-soft); color: var(--mute); cursor: not-allowed; }
.sel select:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

.times-empty { padding: 14px 4px 4px; color: var(--mute); font-size: 13.5px; line-height: 1.5; }
.times-empty b { display: block; font-family: var(--head); color: var(--ink-2); font-size: 14.5px; margin-bottom: 4px; }

/* Skeleton, not a spinner: it shows the shape of what is coming, so the card
   does not jump when the real answer lands. */
.sk { display: grid; gap: 6px; }
.sk i { display: block; height: 44px; border-radius: 11px; background: linear-gradient(90deg, #eef2f6, #f7fafc, #eef2f6); background-size: 200% 100%; animation: skx 1.1s linear infinite; }
.sk i:nth-child(1) { width: 40%; height: 14px; }
.sk i:nth-child(2) { width: 100%; }
.sk i:nth-child(3) { width: 100%; }
@keyframes skx { to { background-position: -200% 0; } }

/* The race. Loud, red, and it never touches anything the setter typed. */
.race {
  margin-bottom: 12px; border-radius: 12px; padding: 11px 12px; background: var(--red-tint);
  border: 1px solid rgba(217, 45, 32, 0.32); color: #912018; font-size: 13.5px; line-height: 1.45;
}
.race b { display: block; font-family: var(--head); font-size: 14px; margin-bottom: 2px; }

/* ------------------------------------------------------------- book bar */
.summary { display: grid; gap: 6px; margin: 14px 0 12px; }
.sumrow { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.sumrow svg { width: 16px; height: 16px; flex: none; color: var(--mute); }
.sumrow b { font-family: var(--head); font-weight: 700; color: var(--ink); }
.sumrow.todo { color: var(--mute); }

/* ------------------------------------------------------------ the record
   The CRM lookup in step 1.

   app.css gives every .card `contain: layout paint`. That does two things to
   a dropdown: it clips anything drawn outside the card, and it makes the card
   the containing block for a fixed child, so even a fixed panel would be cut
   off at the card's edge. Containment comes off this one card only. The map
   and every other card keep it. */
body.fc-book .bk-a-find { contain: none; }
.findhint { margin-top: 8px !important; }
.findwrap { position: relative; }

/* Fixed, and placed by book.js from the field's own rectangle. Nothing
   between this and the root element makes a stacking context, so the z index
   is read against the shell bar's 35 and the panel sits over the bar rather
   than under it, at either breakpoint. */
.findpanel {
  position: fixed; z-index: 40; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.18);
}
.findrow {
  display: block; position: relative; width: 100%; min-height: 56px; padding: 10px 12px;
  border: 0; background: transparent; text-align: left; cursor: pointer;
}
.findrow + .findrow { border-top: 1px solid var(--line); }
.findrow:hover { background: var(--blue-tint); }
/* The keyboard's own row. A tint alone is not enough to tell it from a hover,
   so the active row also carries a ring. */
.findrow.on { background: var(--blue-tint); }
.findrow.on::after {
  content: ''; position: absolute; inset: 1px; border: 2px solid #0b4f96; border-radius: 9px; pointer-events: none;
}
.fr-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; }
.fr-name { font-family: var(--head); font-weight: 700; font-size: 14.5px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.fr-where {
  margin-left: auto; flex: none; max-width: 100%; font-size: 12px; color: #4a5567;
  background: var(--bg-soft); border-radius: 6px; padding: 2px 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* One line each, because a mobile and an email side by side truncate at 390px
   and those two are exactly what tells one Megan from another. */
.fr-l { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-l.dim { color: var(--mute); }

.findmsg { padding: 12px; }
.findmsg b { display: block; font-family: var(--head); font-size: 14px; color: var(--ink); margin-bottom: 3px; }
.findmsg span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; }
.findmsg.bad b { color: var(--red-ink); }
/* Nothing found and the CRM being down both end the same way: a button that
   opens the new contact form. Typing it in by hand is never taken away. */
.byhand {
  margin-top: 10px; min-height: 44px; padding: 0 14px; border-radius: 10px;
  border: 1.5px solid var(--blue-line); background: #fff; color: #0b4f96;
  font-family: var(--head); font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.byhand:hover { background: var(--blue-tint); }
.byhand:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.findfoot {
  padding: 9px 12px; border-top: 1px solid var(--line); background: var(--bg-soft);
  color: #4a5567; font-size: 12.5px; line-height: 1.4;
}

/* --------------------------------------------------------- confirmation */
.bk-done .card { padding: 20px 18px; }
.bk-done .tick {
  width: 52px; height: 52px; border-radius: 50%; background: #ecfdf3; color: #05603a; display: grid;
  place-items: center; margin-bottom: 12px;
}
.bk-done .tick svg { width: 28px; height: 28px; }
.bk-done h1 { font-size: 22px; }
.bk-done .when { font-family: var(--head); font-weight: 800; font-size: 18px; margin-top: 6px; color: var(--ink); }
.bk-done .zone { color: var(--mute); font-size: 13px; margin-top: 2px; }
.dlist { margin-top: 16px; border-top: 1px solid var(--line); }
.drow { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.drow .k { color: var(--mute); font-size: 12.5px; width: 84px; flex: none; padding-top: 2px; }
.drow .v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.drow .v b { font-family: var(--head); }
.badge {
  display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px;
  font-family: var(--head); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.badge.bychoice { background: var(--blue-tint); color: #0b4f96; }
.badge.rotated { background: #ecfdf3; color: #05603a; }
.badge.steve { background: var(--amber-bg); color: var(--amber); }
/* A second badge, not a replacement: an out of area booking still went to a
   named rep, and both facts matter on the confirmation. */
.badge.outarea { background: var(--amber-bg); color: var(--amber); margin-left: 5px; }
.bk-done .actions { display: grid; gap: 8px; margin-top: 18px; }
.bk-done .foot { text-align: center; margin-top: 12px; }

/* app.css sizes the passcode toggle at 34px, which is right beside a 48px
   field on the map but is not a 44px target. Raised here only, so the map is
   untouched. */
body.fc-book .pw-toggle { min-height: 44px; }
body.fc-book .pw .in { padding-right: 82px; }

/* ============================================================== the panel
   What to say on the phone. Every line in it is Steve's own answer from the
   onboarding form. */
.cinfo { padding: 16px; }
.cinfo-hd { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 12px; }
.cinfo-hd h2 { font-size: 17px; }
.cinfo-hd p { color: var(--ink-2); font-size: 13px; line-height: 1.45; margin-top: 4px; }
.cinfo-hd > div { flex: 1 1 200px; min-width: 0; }
.cinfo-tel, .telchip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border-radius: 11px; border: 1.5px solid var(--blue-line); background: #fff; color: #0b4f96;
  font-family: var(--head); font-weight: 700; font-size: 13.5px; text-decoration: none; white-space: nowrap;
}
.cinfo-tel:hover, .telchip:hover { background: var(--blue-tint); border-color: #0b4f96; }
.cinfo-tel:focus-visible, .telchip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.cinfo-tel svg, .telchip svg { width: 16px; height: 16px; flex: none; }
.telchip { margin-top: 8px; }

.rules { display: grid; gap: 8px; margin-top: 14px; }
.rule { border-radius: 12px; padding: 11px 12px; font-size: 13px; line-height: 1.5; }
.rule p + p { margin-top: 6px; }
.rule-t { display: block; font-family: var(--head); font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.rule-stop { background: var(--red-tint); border: 1px solid rgba(217, 45, 32, 0.3); color: #912018; }
.rule-hot { background: var(--amber-bg); border: 1px solid rgba(181, 71, 8, 0.28); color: #8a3708; }

.cinfo-grid { display: grid; gap: 16px; margin-top: 16px; }
.cis h3 {
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: #4a5567;
  padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 9px;
}
.cis h3.tight { margin-top: 14px; }
.cis-note { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: #4a5567; }

.kvl, .tl, .qa, .qt { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.5; }
.kvl li { display: flex; gap: 10px; padding: 5px 0; }
.kvl li + li { border-top: 1px solid #f1f4f8; }
.kvl b { flex: none; width: 116px; font-family: var(--head); font-weight: 700; font-size: 12px; color: #4a5567; padding-top: 1px; }
.kvl span { flex: 1; min-width: 0; color: var(--ink-2); }

.tl li { position: relative; padding: 5px 0 5px 24px; color: var(--ink-2); }
.tl li + li { border-top: 1px solid #f1f4f8; }
.tl li::before {
  content: ''; position: absolute; left: 2px; top: 11px; width: 12px; height: 12px; border-radius: 4px;
}
.tl li.yes::before { background: #ecfdf3; box-shadow: inset 0 0 0 1.5px #05603a; }
.tl li.no::before { background: var(--red-tint); box-shadow: inset 0 0 0 1.5px var(--red-ink); }
.tl b { font-family: var(--head); font-weight: 700; color: var(--ink); }

.qa li { padding: 7px 0; }
.qa li + li { border-top: 1px solid #f1f4f8; }
.qa b { display: block; font-family: var(--head); font-weight: 700; font-size: 13px; color: var(--ink); }
.qa span { display: block; margin-top: 2px; color: var(--ink-2); }
.qa em { font-style: normal; font-family: var(--head); font-weight: 700; color: var(--red-ink); }

.qt li { padding: 6px 0 6px 12px; border-left: 3px solid var(--blue-line); color: var(--ink-2); }
.qt li + li { margin-top: 7px; }
.qt b { font-family: var(--head); font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------------- toast */
body.fc-book #toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px);
  bottom: calc(var(--fshell-bottom-h, 0px) + 14px);
}

/* -------------------------------------------------------------- desktop */
@media (min-width: 760px) {
  .two { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Day and Time stay stacked at every width. Side by side each one is about
     240px of usable text and a full day with its count needs nearly 300, so
     the day the setter is about to read down the phone was being clipped in
     the middle of a word. Measured at 1440, not guessed. */
  .whenrow { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1080px) {
  .bk { padding-top: calc(var(--fshell-top-h, 0px) + 20px); }
  .bk-head h1 { font-size: 24px; }
  /* Both panels, always. The tab strip is not rendered at all, and the two
     show- classes on the grid mean nothing up here. */
  .bk-tabs { display: none; }
  .bk-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; }
  .bk-grid.show-book > .bk-info, .bk-grid.show-info > .bk-form { display: block; }
  .bk-grid.show-info > .bk-form { display: grid; }
  /* The answers stay in view while the setter types, which is the whole job:
     read a warranty answer back without losing the form. */
  .bk-info {
    position: sticky; top: calc(var(--fshell-top-h, 0px) + 14px);
    max-height: calc(100vh - var(--fshell-top-h, 0px) - 34px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .bk-done .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-done .card { max-width: 640px; }
}
/* Two columns of answers only once the panel is genuinely wide. At 1440 the
   panel is about 600px, and two columns of 285px put the address on three
   lines, which is worse than scrolling. */
@media (min-width: 1560px) {
  .cinfo-grid { grid-template-columns: 1fr 1fr; }
  .cis-wide { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .sk i { animation: none; }
}

/* --- phone header ---------------------------------------------------------
   Below 600px the logo, the title and the name chip cannot share a row without
   the title losing. Put the logo and the chip together on the top row and give
   the title its own full width row underneath, which also lines its left edge
   up with the cards below it instead of indenting it past the logo. */
@media (max-width: 600px) {
  .bk-head { align-items: center; }
  .bk-head img { order: 1; }
  .bk-who { order: 2; margin-left: auto; }
  .bk-head-t { order: 3; flex: 1 1 100%; }
  .kvl li { display: block; }
  .kvl b { width: auto; display: block; margin-bottom: 1px; }
}

/* City and zip share a row, with the zip only as wide as five digits need.
   The zip is the field that matters, so it is never the one that gets squeezed:
   a fixed basis on it and the city takes whatever is left. */
.bk-addr2 { display: flex; gap: 10px; align-items: flex-start; }
.bk-addr2 .field:first-child { flex: 1 1 auto; min-width: 0; }
.bk-addr2 .field:last-child { flex: 0 0 118px; }
.bk-addr2 #azip { font-variant-numeric: tabular-nums; letter-spacing: .04em; }