:root {
  --paper: #f8f7f4;
  --ink: #12110f;
  --body: #3c3a37;
  --soft: #8b8880;
  --faint: #b9b6af;
  --line: #e8e5df;
  --mark: #f6e7c1;
  --tan-bg: #f0e5d0;
  --tan-ink: #8a5a2b;
  --tabs-h: 60px;   /* measured from the real strip after every draw */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 Poppins, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── left rail: + on top, then one circle per business ──── */
.rail {
  position: fixed; inset: 0 auto 0 0; width: 104px;
  background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.rail-top { width: 100%; height: 68px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; display: grid; place-content: center; gap: 5px; }
.rail-top span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--soft); transition: background .15s; }
.rail-top:hover span { background: var(--ink); }

.plus { flex: none; width: 48px; height: 48px; border-radius: 99px; border: 1px dashed var(--faint); background: none; color: var(--soft); font: 400 24px/1 Poppins, sans-serif; cursor: pointer; }
.plus:hover { border-color: var(--tan-ink); color: var(--tan-ink); background: var(--paper); }

/* The padding is load-bearing: `overflow: auto` clips the selected circle's halo flat
   against the scroll box, so leave it the 2px it needs on every side. */
.circs { display: flex; flex-direction: column; align-items: center; gap: 12px; overflow: auto; padding: 5px 8px 20px; }
/* The ring is how far that business has got; the disc carries its initials. */
.circ { flex: none; width: 48px; height: 48px; padding: 2px; border: 0; border-radius: 99px; cursor: pointer; background: conic-gradient(var(--tan-ink) var(--pct, 0%), var(--line) 0); }
/* Outlined, never filled — the rail shows straight through the disc. */
.circ i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 99px; background: #fff; border: 1px solid var(--ink); color: var(--ink); font: 500 14px/1 Poppins, sans-serif; font-style: normal; }
/* A paper gap first, so the selection halo never fuses with the tan progress arc under it. */
.circ.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tan-ink); }

/* The rail is kept by the day a business was started, and every day folds away behind its own
   label — a month of work is otherwise one column of circles taller than the screen. */
.day { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.daytop { display: flex; align-items: center; gap: 5px; width: 100%; padding: 0 2px; border: 0; background: none; cursor: pointer; color: var(--soft); font: 500 11px/1 Poppins, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.daytop:hover { color: var(--ink); }
/* The caret points down at an open day and swings to the right as it shuts. */
.daytop i { flex: none; font-style: normal; font-size: 9px; transition: transform .15s; }
.daytop b { flex: 1; min-width: 0; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daytop em { flex: none; font-style: normal; color: var(--faint); }
.dayrow { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.day.shut .daytop i { transform: rotate(-90deg); }
.day.shut .dayrow { display: none; }

/* The right-click menu on a rail circle. Above the drawer, since it opens over everything. */
.circmenu { position: fixed; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 5px; box-shadow: 0 12px 30px rgba(18, 17, 15, .12); }
.circmenu button { display: block; width: 100%; text-align: left; white-space: nowrap; background: none; border: 0; border-radius: 8px; padding: 9px 14px; font: inherit; font-size: 14px; color: var(--body); cursor: pointer; }
.circmenu button:hover { background: var(--paper); color: var(--ink); }
.circmenu button.danger { color: #a3352b; font-weight: 500; }

/* The badge sits at the left of the header; the stepper is centred on the header itself, not on
   the space left over beside the badge, so it stays put as the badge or the rail change width. */
/* Sticky, now that the two halves are one scrolling page: the pills are how you get from the page
   to the mail about it, and a jump link that scrolls away is not one. */
.top { position: sticky; top: 0; z-index: 6; background: var(--paper); margin-left: 104px; padding: 20px 30px 20px 62px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; }
.top .steps { position: absolute; left: 0; right: 0; justify-content: center; pointer-events: none; }
.top .steps button { pointer-events: auto; }

main { margin-left: 104px; padding: 10px 0 90px 62px; max-width: 62rem; position: relative; }

/* One page, two halves. The rule is the seam between what was built and what is being said about
   it; the scroll margin is the sticky header, so a jump lands the heading under it and not behind
   it. */
.sec { scroll-margin-top: calc(var(--tabs-h) + 46px); }
.sec + .sec { margin-top: 70px; padding-top: 56px; border-top: 1px solid var(--line); }
.secmark { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); margin-bottom: 20px; }

/* The way back, said out loud.
 *
 * Every screen in here is one business deep — a step of a build, a draft, a round in flight — and
 * the only way out was the browser's own back button. Linking the wordmark is the convention and
 * it is not enough: a wordmark reads as a logo, so nobody finds it. The control that goes top
 * left of every page is a button that says what it does, ahead of the wordmark it sits beside. */
.homebtn { display: inline-flex; align-items: center; gap: 9px; font: inherit; font-size: 15px; font-weight: 500;
  color: var(--soft); text-decoration: none; background: #fff; border: 1px solid var(--line);
  border-radius: 99px; padding: 11px 18px; margin-right: 14px; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s; }
.homebtn:hover { color: var(--tan-ink); border-color: var(--tan-ink); background: var(--paper); }

/* The wordmark goes home too — found or not, it should never be the one thing top left that does
   nothing when it is clicked. */
.badge { display: inline-block; background: var(--tan-bg); color: var(--tan-ink); font-weight: 600; font-size: 17px; letter-spacing: .02em; padding: 14px 22px; border-radius: 14px;
  text-decoration: none; transition: background .15s, color .15s; }
a.badge::before { content: '← '; margin-right: -.35em; opacity: 0; transition: opacity .15s, margin .15s; }
a.badge:hover { background: var(--tan-ink); color: var(--tan-bg); }
a.badge:hover::before { opacity: 1; margin-right: 0; }

/* Every page's header is one line: the wordmark at the left end, the account at the right — and on
   a window too narrow to hold both, two lines rather than a page that scrolls sideways. Nothing in
   this app is read across, so a horizontal scrollbar is never the answer to anything. */
.head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; }

/* Whose work this is. Once the businesses, the rounds and the drafts are per-operator, an empty
   screen and somebody else's screen look identical — so every header ends in the account it is
   drawing, with the rest of the app as text beside it: the pills those links used to be shouted
   as loudly as the one control on the line that matters. */
.who { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px 22px;
  margin-left: auto; padding-left: 22px; min-width: 0; }
.txtbtn { font: inherit; font-size: 15px; color: var(--soft); text-decoration: none; white-space: nowrap; transition: color .15s;
  /* A button among links reads as a button unless it is told not to: the UA's box is the only
     thing that ever drew an outline around Prompts. */
  border: 0; background: none; padding: 0; cursor: pointer; }
.txtbtn:hover { color: var(--tan-ink); }

/* Signed out, the only thing on the line is the way in. */
.signin { font: inherit; font-size: 15px; font-weight: 500; color: #f4efe6; background: var(--ink);
  border: 0; border-radius: 99px; padding: 11px 22px; cursor: pointer; transition: background .15s; }
.signin:hover { background: var(--tan-ink); }

/* Signed in, it is your face — the smallest thing that can say "this is your account" and still be
   a button. No name beside it: the address is in the menu it opens, where it is needed. */
.avatar { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: var(--tan-bg); color: var(--tan-ink); border: 1px solid var(--line); overflow: hidden;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .15s; }
.avatar:hover { border-color: var(--tan-ink); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.whomenu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; display: grid; gap: 4px;
  min-width: 15rem; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 12px 30px rgba(18, 17, 15, .12); }
/* `hidden` is a display:none the UA sheet loses to any class that sets one, and both of these do —
   without this the menu and the modal are open on every first paint. */
.whomenu[hidden], .authbox[hidden] { display: none; }
.whomenu b { font-size: 14px; font-weight: 500; }
.whomenu small { font-size: 13px; color: var(--soft); overflow-wrap: anywhere; }
.whomenu a { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--tan-ink); text-decoration: none; }
.whomenu .note { line-height: 1.6; }

/* Signing in is a thing that happens over the page you were already on, not a page of its own. */
.authbox { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(18, 17, 15, .34); padding: 24px; }
.authcard { width: min(24rem, 100%); background: #fff; border-radius: 20px; padding: 34px 32px 32px;
  box-shadow: 0 24px 60px rgba(18, 17, 15, .22); text-align: center; }
.authcard h3 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.authcard p { font-size: 15px; line-height: 1.7; color: var(--body); }
.authcard .note { font-size: 13px; color: var(--soft); margin-top: 18px; }
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
  margin-top: 26px; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 13px 20px;
  cursor: pointer; transition: border-color .15s, background .15s; }
.gbtn:hover { border-color: var(--tan-ink); background: var(--paper); }

/* ── the prompts editor ────────────────────────────────── */
/* A wider card and left-aligned: the sign-in card is one sentence and a button, this is two
   paragraphs of prose being read closely, and centred prose is unreadable at that length. */
.promptcard { width: min(46rem, 100%); text-align: left; max-height: 86vh; overflow-y: auto; }
.promptone { display: block; margin-top: 26px; }
.promptone b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.promptone b em { font-style: normal; font-weight: 400; color: var(--soft); }
.promptone textarea { width: 100%; font: inherit; font-size: 14px; line-height: 1.65;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; resize: vertical; }
.promptone textarea:focus { outline: none; border-color: var(--tan-ink); }
.promptone small { display: block; margin-top: 9px; font-size: 13px; color: var(--soft); }
.promptone code { font-size: 12.5px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 6px; }
.promptrow { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.promptrow .gbtn { width: auto; margin-top: 0; padding: 9px 22px; }
.promptrow .said { font-style: normal; font-size: 13px; color: var(--soft); }

/* ── stepper ───────────────────────────────────────────── */
/* Hairlines between the pills, so it reads as one run of steps rather than a row of tabs. They
   are their own elements: as a pill's ::before they would sit inside its background. */
.steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.steps i { flex: none; width: 26px; height: 1px; background: var(--line); }
.steps button {
  display: inline-flex; align-items: center;
  background: none; border: 1px solid transparent; border-radius: 99px;
  font: inherit; font-size: 15px; color: var(--soft); padding: 8px 16px; cursor: pointer;
  transition: background .12s, color .12s;
}
/* One pill only — the step you are on. A done step is just darker text, so the strip reads as a
   line of steps with a marker on it rather than a row of competing white buttons.
   Only where a pointer really hovers, and never on the active tab: a touch device keeps :hover
   after a tap, which used to repaint the dark pill and hide its own label. */
@media (hover: hover) {
  .steps button:hover:not(:disabled):not(.on) { color: var(--ink); }
}
.steps button.done { color: var(--body); }
.steps button:disabled { color: var(--faint); cursor: default; }
/* last, so the current step stays obvious even while a run has the others disabled */
.steps button.on { background: var(--ink); border-color: var(--ink); color: #f4efe6; font-weight: 600; }

/* ── entrances ─────────────────────────────────────────── */
/* Each step is its own page, so it arrives like one: the pieces rise in order rather than the
   whole screen appearing at once. `backwards` holds them hidden through their own delay, or the
   staggered ones flash at full opacity before their turn. */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.rail, .top { animation: fade .5s ease backwards; }
.rail .plus, .rail .circ { animation: rise .45s cubic-bezier(.2, .7, .3, 1) backwards; }
.rail .circ { animation-delay: .12s; }
.top .steps button { animation: rise .45s cubic-bezier(.2, .7, .3, 1) backwards; }
.top .steps button:nth-of-type(2) { animation-delay: .06s; }
.top .steps button:nth-of-type(3) { animation-delay: .12s; }
.top .steps button:nth-of-type(4) { animation-delay: .18s; }

#stage.anim > *,
#stage.anim .ab > *,
#stage.anim .contact > *,
#stage.anim .carousel { animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards; }
#stage.anim > *:nth-child(2), #stage.anim .ab > *:nth-child(2),
#stage.anim .contact > *:nth-child(2) { animation-delay: .07s; }
#stage.anim > *:nth-child(3) { animation-delay: .14s; }
#stage.anim > *:nth-child(4) { animation-delay: .21s; }
#stage.anim > *:nth-child(n+5) { animation-delay: .28s; }

/* Nobody asked the machine to move for them. */
@media (prefers-reduced-motion: reduce) {
  .rail, .top, .rail .plus, .rail .circ, .top .steps button,
  #stage.anim > *, #stage.anim .ab > *, #stage.anim .contact > * { animation: none; }
}

/* ── stage ─────────────────────────────────────────────── */
h1 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.02em; margin-bottom: 26px; }
.lede { font-size: clamp(18px, 1.6vw, 25px); line-height: 1.85; color: var(--body); max-width: 46rem; }
mark { background: var(--mark); color: var(--body); padding: 2px 7px; border-radius: 3px; }
.hint { color: var(--soft); font-size: 14px; margin-top: 10px; }

.go { margin-top: 46px; background: none; border: 0; font: inherit; font-size: 19px; font-weight: 500; color: var(--ink); cursor: pointer; display: inline-flex; gap: 10px; align-items: center; }
.go:disabled { color: var(--faint); cursor: default; }
.go.ghost { font-size: 15px; color: var(--soft); margin-left: 26px; }

input[type=text] { width: 100%; font: inherit; font-size: 18px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
input[type=text]:focus { outline: 2px solid var(--tan-bg); }

textarea { width: 100%; max-width: 46rem; font: inherit; font-size: 15px; line-height: 1.7; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; resize: vertical; }

/* ── the two ways in, side by side ─────────────────────── */
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 52rem; margin-top: 30px; }
.pick { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.pick h4 { font-size: 12px; font-weight: 400; color: var(--soft); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.pick input[type=text] { font-size: 16px; padding: 13px 15px; background: var(--paper); }

.row { display: flex; gap: 10px; }
.row input[type=text] { flex: 1; min-width: 0; }
.find { background: var(--ink); color: #f4efe6; border: 0; border-radius: 14px; padding: 0 20px; font: inherit; font-size: 15px; cursor: pointer; }

.hits { display: grid; gap: 10px; max-width: 52rem; margin-top: 18px; }
/* The way past a search that found nobody — beside the near misses, not instead of them. */
.skiprow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.skiprow .go { margin-top: 0; font-size: 17px; }
.skiprow small { margin: 0; }

.hits button { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; font: inherit; cursor: pointer; display: grid; gap: 3px; }
.hits button:hover { border-color: var(--tan-ink); }
.hits b { font-size: 16px; font-weight: 500; }
.hits span { font-size: 14px; color: var(--body); }
.hits small { font-size: 13px; color: var(--soft); }

.shots { display: flex; gap: 12px; overflow-x: auto; margin-top: 26px; padding-bottom: 8px; }
.shots img { width: 148px; height: 108px; object-fit: cover; border-radius: 12px; flex: none; }

.frame { width: 100%; max-width: 60rem; aspect-ratio: 16/10; border: 1px solid var(--line); border-radius: 18px; background: #fff; margin-top: 26px; }

/* Before/after beside the change desk. Both frames stay in the DOM, so flipping between
   their site and the new one never reloads either. */
/* Wider than the reading column main is capped at: the render wants the room, and the chat
   sits against the right edge of the screen. */
.ab-head, .ab { width: calc(100vw - 104px - 62px - 30px); max-width: none; }
.ab { display: grid; grid-template-columns: minmax(0, 1fr) 18.7rem; gap: 22px; align-items: stretch; margin-top: 18px; }
/* One card, not two. With the change desk off the Site step the row is just the facts, and left
   in the two-column grid it sat pinned to the far right with a screen of white beside it. */
.ab.one { grid-template-columns: 18.7rem; }
/* The strip is the wide half of that row now. Its own width is sized off the window — right for
   a block that owns the page, wrong for one in a column, where it overflowed the grid and pushed
   the card of facts off the screen. In the row it takes the column, and the panel's own cap does
   the rest. */
.ab > .carousel { width: 100%; margin-top: 0; }
.views { aspect-ratio: 16/10; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }

/* ── the strip: their site and every build, side by side ── */
/* As many as fit are on the screen; the rest are one arrow along. The panel is sized off the
   window — a comparison you have to scroll the page to see is not a comparison. */
/* One version per slide, in both modes: the box is exactly one panel wide, the strip snaps, and
   the arrows step through them. Anything more per screen and it stops being a carousel and starts
   being a contact sheet of small pages. */
/* …and never wider than what it sits in, whatever the sums above work out to: the strip scrolls
   inside its own box on purpose, and a box wider than the page turns that into the page scrolling
   sideways. */
.carousel { position: relative; margin-top: 18px; margin-inline: auto; max-width: 100%;
  width: min(calc(100vw - 104px - 62px - 30px), calc(var(--pane-h, 60vh) * var(--pane-k))); }
.strip { max-width: 100%; }
.pane { max-width: 100%; }
.carousel.desk { --pane-k: 1.6; --pane-ar: 1440 / 900; }
.carousel.phone { --pane-k: .4621; --pane-ar: 390 / 844; }
.strip { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.strip::-webkit-scrollbar { height: 0; display: none; }
.pane { flex: none; scroll-snap-align: start; width: min(100%, calc(var(--pane-h, 60vh) * var(--pane-k))); }
.pane figcaption { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; padding: 0 2px; }
.pane figcaption b { font-size: 14px; font-weight: 600; color: var(--ink); }
.pane figcaption span { flex: 1; min-width: 0; font-size: 12px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane figcaption .out { flex: none; font-size: 14px; color: var(--soft); text-decoration: none; border: 0; }
.pane figcaption .out:hover { color: var(--tan-ink); }
/* The page inside is rendered at the viewport it is judged at and scaled by hand into the panel —
   its own layout, never a desktop one squeezed — so the glass is that shape and clips the rest. */
.glass { position: relative; width: 100%; aspect-ratio: var(--pane-ar); overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.glass > * { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; }
/* The one thing in the glass that is not a page: what to make of a site that would not photograph.
   Laid out in the box rather than scaled with it, so it reads at any panel size. */
.shotfail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center; transform: none !important; }
.shotfail b { font-size: 15px; font-weight: 500; }
.shotfail span { font-size: 13px; color: var(--soft); max-width: 22rem; }
/* Each built site is served on its own port, so its scrollbar cannot be styled from here — it is
   pushed past the edge of the glass instead. */
.carousel.phone .glass > iframe { width: 407px; height: 844px; }
.carousel.desk .glass > iframe { width: 1457px; height: 900px; }
/* Their site is one long photograph of the whole page; the glass shows the top of it. */
.carousel.phone .glass > img { width: 390px; height: auto; }
.carousel.desk .glass > img { width: 1440px; height: auto; }

/* Only there when there is something past the edge. The mark itself and nothing else — a disc
   around it is a button drawn over a page, and the page is the thing being looked at. */
.cbtn { position: absolute; top: 50%; z-index: 2; display: none; width: 40px; height: 40px; transform: translateY(-50%);
  border: 0; background: none; color: var(--soft); font: 400 27px/1 Poppins, sans-serif; cursor: pointer; }
.cbtn:hover { color: var(--ink); }
.cbtn.prev { left: -48px; }
.cbtn.next { right: -48px; }
/* A desktop panel is nearly the whole width, so there is no margin beside it worth putting an
   arrow in — they go under the page instead, as a pair. */
.carousel.desk .cbtn { top: auto; bottom: -44px; transform: none; }
.carousel.desk .cbtn.prev { left: calc(50% - 44px); right: auto; }
.carousel.desk .cbtn.next { right: calc(50% - 44px); left: auto; }
.carousel.over .cbtn { display: block; }

/* Desktop's arrows sit under the panel rather than beside it, so the row leaves them the room. */
.ab > .carousel.desk { padding-bottom: 44px; }

.chat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 14px; min-height: 26rem; }
.chat h4 { font-size: 12px; font-weight: 400; color: var(--soft); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.chat .log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.chat .log p { font-size: 14px; line-height: 1.6; border-radius: 12px; padding: 9px 12px; }
.chat .log .you { background: var(--paper); color: var(--ink); align-self: flex-end; max-width: 92%; }
.chat .log .them { color: var(--body); background: #faf9f7; border: 1px solid var(--line); max-width: 96%; }
.chat .log .them.working { color: var(--soft); border-style: dashed; }
.chat .log .hint { margin: 0; padding: 0; }
.chat textarea { max-width: none; font-size: 14px; padding: 11px 13px; background: var(--paper); resize: none; }
.chat .go { margin-top: 12px; font-size: 16px; align-self: flex-start; }

.draft { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; max-width: 46rem; margin-top: 22px; }
.draft h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); font-weight: 400; margin-bottom: 12px; }
.draft pre { font: inherit; font-size: 15px; line-height: 1.7; color: var(--body); white-space: pre-wrap; }
.copy { margin-top: 14px; background: var(--ink); color: #f4efe6; border: 0; border-radius: 10px; padding: 9px 16px; font: inherit; font-size: 14px; cursor: pointer; }

/* The email draft is the real thing, rendered — mail HTML in a frame, at the width it goes out
   at, grown to its own height so it is edited on the page rather than through a porthole. */
/* The mail itself is a 600px table because that is what mail clients want, so the room a wide
   screen has spare goes to the WhatsApp draft beside it, not to margin around a 600px column. */
.contact { width: calc(100vw - 104px - 62px - 30px); max-width: none; display: grid; grid-template-columns: 42rem minmax(0, 1fr); gap: 22px; align-items: start; }
/* The mail has nothing worth putting beside it — it gets the whole width to itself. */
.contact.wide { grid-template-columns: minmax(0, 1fr); }
.contact .draft { max-width: none; margin-top: 22px; }

/* The template beside the mail: every line of it with this business lifted back out. */
.tpl { position: sticky; top: 22px; }
.tpl dl { display: grid; gap: 14px; margin: 18px 0 4px; }
.tpl dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.tpl dd { font-size: 14px; line-height: 1.6; color: var(--body); margin-top: 3px; }
.tpl dd i { color: var(--faint); }
.tpl .go { margin-top: 20px; font-size: 15px; }
.tpl textarea { max-width: none; font-size: 13px; line-height: 1.65; margin-top: 14px; background: var(--paper); }

/* The messages in the order they are sent, each its own send rather than one wall of text. */
.flow { list-style: none; display: grid; gap: 10px; counter-reset: msg; }
.flow li { position: relative; background: var(--paper); border-radius: 14px; padding: 13px 16px 13px 44px; counter-increment: msg; }
.flow li::before { content: counter(msg); position: absolute; left: 14px; top: 13px; font-size: 12px; color: var(--faint); }
.flow pre { font: inherit; font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.flow .copy { margin-top: 10px; margin-right: 8px; padding: 5px 12px; font-size: 13px; background: none; color: var(--soft); border: 1px solid var(--line); }
.flow .copy.send { display: inline-block; text-decoration: none; color: var(--tan-ink); border-color: var(--tan-bg); background: var(--tan-bg); }

/* The two mails, and which one is on screen — directly over the mail it switches, because it is
   the mail below that the edit, the test and the send all act on. */
.mailcol { min-width: 0; }
/* One line: the variants, the copy button, then the draft/template switch — all on the same
   centre line, and the pills the same height whatever is in them. */
.varbar { display: flex; align-items: center; gap: 10px; }
.varbar .hint { margin: 0; }
.varbar .seg { flex: none; }
/* Square, the height of the pills beside it, so the row reads as one control strip. */
/* In the A/B running: a dot under the pill, so a glance at the bar says which mails a round is
   splitting itself between without a word of explanation. */
.varbar .seg button.racing { position: relative; }
.varbar .seg button.racing::after { content: ''; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 99px; background: var(--tan-ink); }
.varbar .seg button.racing.on::after { background: #f0e5d0; }

.dup { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px;
  background: #fff; border: 1px solid var(--line); border-radius: 99px; color: var(--soft);
  cursor: pointer; transition: color .15s, border-color .15s; }
.dup:hover { color: var(--tan-ink); border-color: var(--tan-ink); }
.mailcol .draft { margin-top: 14px; }

/* The Contact step is laid out like the Update step: which of the three things you are looking at
   and the button that acts on it in the bar above, the thing itself at full width, one card beside
   it. Its cards fill the columns of that grid rather than the reading width a lone card wants. */
.ab > .draft, .ab > .mailcol .draft { max-width: none; }
.ab > .draft { margin-top: 0; }
/* Two cards in the one column when a flow carries its prompt as well as who it goes to. */
.ab > .side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ab > .side > .chat { min-height: 0; }

/* Sending sits at the foot of the card that says who it goes to, so the address on screen is the
   address the button acts on. */
.sendbox { margin-top: auto; padding-top: 18px; display: grid; gap: 10px; }
.sendbox input[type=text] { font-size: 14px; padding: 11px 13px; background: var(--paper); }
.sendbox .hint { margin: 0; }
.sendbox .acts { display: flex; align-items: stretch; gap: 10px; }
.sendbox .acts .copy { margin-top: 0; flex: 1; padding: 11px 14px; font-size: 14px; border-radius: 12px; }
.ab .chat .hint { margin: 0 0 4px; }
.ab .chat textarea { flex: 1; min-height: 12rem; resize: vertical; }
.sitehead input { width: 13rem; font: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sitehead .copy { margin: 0; padding: 7px 13px; font-size: 13px; }
.sitehead .sent { margin: 0; }

.draft.mail .mailframe { border: 1px solid var(--line); border-radius: 12px; }

/* Test and send under the message they act on, not at the top of a screen holding three of them. */
.flow .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.flow .acts .copy { margin-top: 0; }
.flow .acts .sent { margin-top: 0; }

/* Who they actually are, above the drafts — nothing here is guessed. Two by two on the same
   columns as the cards below, rather than three across and a widow on its own line. */
.reach {
  width: calc(100vw - 104px - 62px - 30px); max-width: none; margin-top: 24px;
  display: grid; grid-template-columns: 42rem minmax(0, 1fr); gap: 12px 22px;
}
.reach__item { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.reach__item b { font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.reach__item a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.reach__item i { color: var(--faint); }

/* A test send is a quiet, occasional act — not the send itself. */
.copy.ghost { background: none; color: var(--soft); border: 1px solid var(--line); }
.copy.ghost:hover { color: var(--ink); border-color: var(--faint); }

/* The receipt for the one action here that cannot be taken back. */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(18, 17, 15, .34); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal[hidden] { display: none; }
.modal__card { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 26rem; box-shadow: 0 30px 70px rgba(0, 0, 0, .28); animation: rise .3s cubic-bezier(.2, .7, .3, 1); }
.modal__card b { font-size: 22px; font-weight: 600; }
.modal__card p { margin-top: 12px; color: var(--body); font-size: 15px; line-height: 1.65; }
.modal__card .go { margin-top: 22px; font-size: 16px; }

.sent { display: inline-block; margin: 10px 8px 0 0; font-size: 13px; color: var(--tan-ink); }
.sent.none { color: var(--faint); }

.tpl__label { display: block; margin-top: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.subj { font-size: 14px; color: var(--soft); margin-bottom: 14px; }
/* The subject and, at the far end of the same line, whether what you typed is on disk yet. */
.draft.mail .subj { display: flex; align-items: baseline; gap: 8px; }
.draft.mail .subj b { flex: 1; min-width: 0; }
.draft.mail .subj .save { flex: none; margin: 0; font-size: 12px; color: var(--soft); }
.subj b { font-weight: 400; color: var(--ink); }
.subj b:focus { outline: 2px solid #d8c9a8; outline-offset: 3px; border-radius: 3px; }
.mailframe { display: block; width: 100%; height: 40rem; border: 0; background: #fff; }

.err { color: #9b2c1f; background: #fdeeea; border-radius: 12px; padding: 14px 18px; max-width: 46rem; margin-top: 26px; font-size: 15px; }
.spin { color: var(--soft); font-size: 15px; margin-top: 26px; }

/* ── their site today, right under the step ────────────── */
.sitehead { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.sitehead b { font-size: 15px; font-weight: 500; color: var(--body); margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No title on the bar — the b was what held the controls over to the right. */
.sitehead.end { justify-content: flex-end; }
.sitehead .out { flex: none; color: var(--body); font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--line); }
.sitehead .go { flex: none; margin-top: 0; font-size: 16px; }

/* Publishing and the address it publishes to are one control, at the head of the bar: the button,
   then the address it is about to put the page at. Everything else on the bar is pushed right. */
.pubbar { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.pubbar .pub { flex: none; width: 19rem; font: inherit; font-size: 13px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--body); }
.pubbar .pub:focus { outline: 2px solid #d8c9a8; outline-offset: 2px; }
/* Once it is live the address stops being a field and becomes the link to the page itself. */
.pubbar a.pub { width: auto; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--tan-ink); border-color: var(--tan-bg); background: var(--tan-bg); }
.pubbar a.pub:hover { color: var(--ink); }
.pubbar .pubedit { flex: none; background: none; border: 0; padding: 4px; font: inherit; font-size: 14px; color: var(--faint); cursor: pointer; }
.pubbar .pubedit:hover { color: var(--ink); }

.seg { flex: none; display: flex; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.seg button { background: none; border: 0; border-radius: 99px; font: inherit; font-size: 14px; color: var(--soft); padding: 6px 15px; cursor: pointer; }
.seg button.on { background: var(--ink); color: #f4efe6; }
.seg button[disabled] { opacity: .35; cursor: default; }

/* Same card as the change desk beside it, so the two sit on one layout. */
.facts__list { display: grid; gap: 12px; }
.facts__list dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.facts__list dd { font-size: 14px; line-height: 1.6; color: var(--body); margin-top: 3px; }

/* ── live progress checklist ───────────────────────────── */
.prog { list-style: none; margin-top: 38px; max-width: 44rem; display: grid; gap: 2px; }
.prog li {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 4px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 17px 20px;
}
.prog i { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: 12px; border: 1px solid var(--line); color: var(--faint); }
.prog b { font-weight: 500; font-size: 16px; color: var(--faint); }
.prog small { grid-column: 2; color: var(--soft); font-size: 13px; }
.prog em { font-style: normal; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--soft); }

.prog .done i { background: var(--ink); border-color: var(--ink); color: #f4efe6; }
.prog .done b { color: var(--body); }
.prog .run { border-color: var(--tan-ink); }
.prog .run b { color: var(--ink); }
.prog .run i { border-color: var(--tan-ink); background: var(--tan-bg); animation: pulse 1.5s ease-in-out infinite; }
.prog .bad i { background: #9b2c1f; border-color: #9b2c1f; color: #fff; }
.prog .bad b { color: #9b2c1f; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .prog .run i { animation: none; }
  .leads, .scrim { transition: none; }
}

/* ── ops and businesses drawer ─────────────────────────── */
/* Closed is the resting state of both: off to the left, out of the tab order, nothing to paint.
   Opening is a slide rather than an appearance, so the eye follows the drawer out of the rail. */
.scrim { position: fixed; inset: 0; background: rgba(18, 17, 15, .28); z-index: 4; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.scrim.open { opacity: 1; visibility: visible; }
.leads { position: fixed; inset: 0 auto 0 104px; width: 21rem; background: #fff; border-right: 1px solid var(--line); padding: 22px; overflow: auto; z-index: 5;
  transform: translateX(-100%); opacity: 0; visibility: hidden;
  transition: transform .34s cubic-bezier(.32, .72, 0, 1), width .34s cubic-bezier(.32, .72, 0, 1), opacity .22s ease, visibility .34s; }
.leads.open { transform: none; opacity: 1; visibility: visible; }
/* The report is columns of numbers, not a list of names — it gets the extra room. */
.menuseg { width: 100%; margin-bottom: 20px; }
.menuseg button { flex: 1; }
.leads header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.leads h3 { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .12em; color: var(--soft); }
.leads .x { background: none; border: 0; font: inherit; font-size: 15px; color: var(--soft); cursor: pointer; padding: 4px; }
/* The numbers left the drawer for a page of their own; this is the way out to them. */
.leads .menulink { display: block; margin-bottom: 16px; color: var(--tan-ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.leads .menulink:hover { text-decoration: underline; }
.leads .new { width: 100%; background: var(--tan-bg); color: var(--tan-ink); border: 0; border-radius: 14px; padding: 13px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; margin-bottom: 18px; }

.leads .lead { display: grid; gap: 5px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 14px; padding: 13px 14px; font: inherit; cursor: pointer; }
.leads .lead:hover { background: var(--paper); }
.leads .lead.on { border-color: var(--tan-ink); background: var(--paper); }
.leads .lead b { font-size: 15px; font-weight: 500; }
.leads .lead span { font-size: 13px; color: var(--body); }
.leads .lead i { display: block; height: 4px; border-radius: 4px; background: var(--line); margin-top: 4px; }
.leads .lead i::before { content: ''; display: block; height: 100%; width: var(--pct); border-radius: 4px; background: var(--tan-ink); }
.leads .lead small { font-size: 12px; color: var(--soft); }

/* ── the ops report ────────────────────────────────────── */
.leads h5 { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin: 24px 0 12px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--paper); border-radius: 14px; padding: 15px 16px; display: grid; gap: 1px; }
.stat b { font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.stat span { font-size: 13px; color: var(--body); }
.stat small { font-size: 12px; color: var(--soft); }

/* The map is a tile like the rest — same paper, same corners, and muted so the dots are the
   only saturated thing on it. */
.hotmap { height: 15rem; border-radius: 14px; background: var(--paper); overflow: hidden; z-index: 0; }
.hotmap .leaflet-tile-pane { filter: saturate(.35) contrast(.96); }
.hotmap.leaflet-container { font: inherit; background: var(--paper); }
.hotmap .leaflet-control-attribution { background: rgba(255, 255, 255, .8); font-size: 10px; color: var(--faint); }
.hotmap .leaflet-control-attribution a { color: var(--faint); }
.hotmap .leaflet-control-zoom a { color: var(--body); border-color: var(--line); }
.hotmap .leaflet-tooltip { border: 0; border-radius: 8px; box-shadow: 0 2px 10px rgba(18, 17, 15, .12); font-size: 12px; color: var(--ink); padding: 5px 9px; }

/* ── phones and small tablets ──────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 15px; }

  /* The rail turns into a top bar so the wizard gets the full width. */
  /* Above the sticky header: on a phone the two share the top of the screen rather than sitting
     side by side, and the header's z-index was burying the rail's circles. */
  .rail { inset: 0 0 auto 0; width: 100%; height: 58px; z-index: 7; flex-direction: row; align-items: center; gap: 10px; border-right: 0; border-bottom: 1px solid var(--line); padding-right: 12px; }
  .rail-top { width: 48px; height: 100%; flex: none; border-bottom: 0; border-right: 1px solid var(--line); }
  .plus { width: 36px; height: 36px; font-size: 20px; }
  .circs { flex-direction: row; gap: 8px; overflow-x: auto; padding: 0; }
  .circ { width: 36px; height: 36px; }
  .circ i { font-size: 12px; }

  /* The top bar has height for one row only, so a day sits beside its circles instead of above. */
  .day { width: auto; flex: none; flex-direction: row; gap: 8px; }
  .daytop { width: auto; flex: none; }
  .daytop b { max-width: 66px; }
  .dayrow { flex-direction: row; gap: 8px; }

  main { margin: 58px 0 0; padding: 20px 20px calc(var(--tabs-h) + 24px); max-width: none; }

  .badge { font-size: 15px; padding: 11px 16px; border-radius: 12px; }

  /* A phone gets a pinned tab bar; the labels wrap onto as many rows as they need. */
  .steps {
    position: fixed; inset: auto 0 0 0; z-index: 10;
    margin: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 6px; flex-wrap: wrap; justify-content: center;
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .steps button { flex: none; padding: 7px 13px; font-size: 13px; }

  h1 { margin-bottom: 18px; }
  .lede { font-size: 17px; line-height: 1.7; }
  .go { margin-top: 32px; font-size: 17px; }
  .go.ghost { display: block; margin: 16px 0 0; }

  .picks { grid-template-columns: 1fr; gap: 12px; }
  .row { flex-direction: column; }
  .find { padding: 14px 24px; }

  input[type=text] { font-size: 16px; padding: 14px 16px; }   /* 16px stops iOS zooming on focus */

  .shots { margin-left: -20px; margin-right: -20px; padding: 0 20px 8px; }
  .frame { aspect-ratio: 3/4; border-radius: 14px; }
  .ab-head, .ab, .contact, .reach { width: 100%; }
  /* One panel at a time on a phone, and the arrows go — the strip is already a swipe here. */
  .carousel { width: 100%; }
  .strip { margin: 0 -20px; padding: 0 20px 8px; }
  .pane { width: min(78vw, calc(var(--pane-h, 60vh) * var(--pane-k))); }
  .carousel.over .cbtn { display: none; }
  .glass { border-radius: 14px; }
  .ab, .contact, .reach { grid-template-columns: 1fr; }
  .chat { min-height: 0; }
  .draft { padding: 18px; }

  .leads { inset: 58px 0 0 0; width: 100%; }
  .scrim { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }

  /* The head bar wraps rather than squeezing the toggle off the edge. */
  .sitehead { flex-wrap: wrap; gap: 10px; }
  .sitehead b { width: 100%; margin-right: 0; }
  .sitehead > .go { margin-left: auto; font-size: 15px; }
  /* The publish pair takes its own row, the address filling whatever is left beside the button. */
  .pubbar { width: 100%; margin-right: 0; }
  .pubbar .go { font-size: 15px; }
  .pubbar .pub { flex: 1; width: auto; min-width: 0; }

  .prog { margin-top: 26px; }
  .prog li { padding: 14px 16px; border-radius: 14px; gap: 3px 12px; }
  .prog b { font-size: 15px; }
}

/* Narrow phones: tighten the pills so the six still land in two rows, not three. */
@media (max-width: 380px) {
  .steps button { padding: 6px 10px; font-size: 12px; }
  .steps { gap: 5px; padding-left: 8px; padding-right: 8px; }
}

/* ── hero re-render picker ────────────────────────────────────────────────
   The clip is the one thing on this page that costs money to make, so the button
   is inert until a frame is chosen — no accidental re-rolls. */
.heropick{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.heropick .go[disabled]{opacity:.35;pointer-events:none}
/* 64px is too small to judge a frame by, so hovering one shows it big. The thumb itself never
   moves: scaling it slid its own edge out from under the cursor, which dropped :hover, which
   shrank it back under the cursor again — a flicker loop. The big one is a separate layer that
   sits above the row and takes no pointer events, so the hover it is triggered by cannot end. */
.heropick__thumbs{display:flex;gap:8px;align-items:center;height:64px}
.heropick__thumbs .thumb{width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:10px;
  background:none;cursor:pointer;opacity:.6;transition:opacity .15s ease,border-color .15s ease;position:relative}
.heropick__thumbs .thumb > img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.heropick__thumbs .thumb:hover{opacity:1}
.heropick__thumbs .thumb.on{opacity:1;border-color:currentColor}

.thumb__prev{
  position:absolute; bottom:calc(100% + 16px); left:50%; transform:translateX(-50%);
  width:230px; height:230px; padding:5px; background:#fff; border-radius:14px;
  box-shadow:0 16px 44px rgba(0,0,0,.28);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease; z-index:4;
}
.thumb__prev img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}
.thumb:hover .thumb__prev{opacity:1;visibility:visible}
/* the frame already animated — still selectable, but marked so it is not picked by mistake */
.heropick__thumbs .thumb--used{outline:1px dashed rgba(0,0,0,.35);outline-offset:-2px}

/* ── has it been opened ────────────────────────────────── */
/* The one number on the Contact screen that costs money when it moves. */
.openbox { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.openbox h4 { font-size: 12px; font-weight: 400; color: var(--soft); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
/* One message per row, in the order they went. A row of pills read as a scoreboard nobody could
   date; this reads as a log, which is what the operator is actually asking it. */
.openbox ol.sends { list-style: none; display: grid; gap: 12px; }
.openbox ol.sends li { display: grid; gap: 2px; padding-left: 11px; border-left: 2px solid var(--line); }
.openbox ol.sends b { font-size: 13px; font-weight: 500; color: var(--ink); }
/* The draft that went — beside the name of the send, not below it, because it is part of what
   that send WAS. Quiet: it is the answer to a second question, asked only after the first. */
.openbox ol.sends b i { font: 400 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--soft); }
.openbox ol.sends span { font-size: 12px; color: var(--body); overflow-wrap: anywhere; }
.openbox ol.sends small { font-size: 12px; color: var(--soft); }
/* What became of that one letter, as badges under its date. Written out they read as prose the
   eye has to parse; as badges the row is scannable, and "not opened" is as much a badge as an
   open is — it is the answer, not a blank. */
.openbox ol.sends .verdicts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.openbox .pill { border: 1px solid var(--line); border-radius: 99px; padding: 3px 9px;
  font-size: 11px; color: var(--soft); white-space: nowrap; }
/* The one badge worth acting on gets the tan, and the row it belongs to gets the rule beside it:
   a business opening the pitch is the whole point of the screen. Our own test open is plain —
   it proves the beacon works and is not a lead. */
.openbox .pill.ok { color: var(--body); }
.openbox .pill.yes { border-color: var(--tan-ink); color: var(--tan-ink); font-weight: 500; }
.openbox ol.sends li:has(.pill.yes) { border-left-color: var(--tan-ink); }
.openbox .pill.mine { border-style: dashed; color: var(--body); }
/* A letter that never arrived is the one badge on this list worth interrupting somebody for. */
.openbox .pill.bad { border-color: #d9c3bd; color: #a3352b; font-weight: 500; }
.openbox ol.sends li:has(.pill.bad) { border-left-color: #a3352b; }
.openbox .hint { margin-top: 6px; }
.openbox .working { color: var(--tan-ink); animation: pulse 1.5s ease-in-out infinite; }
.openbox .err { margin-top: 8px; padding: 10px 12px; font-size: 13px; }
.openbox .facts__list { margin-top: 10px; }

/* ── the tokens the mail is written with ───────────────── */
.tokens { list-style: none; display: grid; gap: 10px; margin: 14px 0; }
.tokens li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 10px; }
/* The token is the thing you take, so it is the button — the rest of the row is what it becomes. */
.tokens .tok { grid-row: span 2; align-self: start; background: var(--tan-bg); color: var(--tan-ink); border: 0; border-radius: 8px; padding: 5px 9px; font: 500 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.tokens .tok:hover { background: var(--mark); }
.tokens b { font-size: 14px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.tokens b i { color: var(--faint); font-weight: 400; }
.tokens small { font-size: 12px; color: var(--soft); }



/* ── switches ──────────────────────────────────────────── */
.flagone { display: flex; align-items: flex-start; gap: 22px; margin-top: 26px; }
.flagone > span { flex: 1; min-width: 0; }
.flagone b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.flagone small { display: block; font-size: 13.5px; line-height: 1.6; color: var(--soft); }
/* The control is the state: a switch that only says "on" in a label is read wrong half the time. */
.switch { flex: none; width: 50px; height: 30px; margin-top: 2px; border: 1px solid var(--line);
  border-radius: 99px; background: var(--paper); cursor: pointer; padding: 0; position: relative;
  transition: background .18s, border-color .18s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line); transition: transform .18s; }
.switch.on { background: var(--tan-ink); border-color: var(--tan-ink); }
.switch.on i { transform: translateX(20px); border-color: var(--tan-ink); }