/* ==========================================================================
   Back to the Root - the builder, the tracker and the kitchen board.
   Loaded after base.css. Everything here is written mobile first.

   Two rules run through the whole file, because they are what keeps a page
   from breaking sideways on a phone:

     1. every grid child gets min-width:0, so a long word or a wide table
        cannot push its column past the screen;
     2. anything genuinely wide - a week calendar, a production table - is
        put inside its own scroller, so it moves and the page does not.

   The body already carries overflow-x:hidden. That is the net, not the plan.
   ========================================================================== */

/* --------------------------------------------------- the hidden attribute
   Two things this file depends on, and both are worth stating.

   1. `hidden` has to actually hide. The attribute carries display:none from
      the browser's own stylesheet, which any class with a display loses to -
      .btn sets display:inline-flex, so a hidden button was still on screen.
      Marking it important is the one place that is the right answer, because
      an element the code has hidden must never be visible or clickable.

   2. A step panel is shown and hidden by that attribute rather than by a
      class. base.css hides .stepbox by default and shows it with .on; this
      file drives the same panels with `hidden`, so screen readers and the
      browser agree with the code about what is on screen. */
[hidden] { display: none !important; }
.stepbox { display: block; }

/* ---------------------------------------------------------------- guards */
.wrap, .stepbox, .card, .grid, .split { min-width: 0; }
.grid > *, .split > * { min-width: 0; }
.scroller {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-width: 100%;
}
.scroller > * { min-width: max-content; }
img, svg, video, canvas { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }

/* ============================================================ dish photos
   One photograph per dish, filling its frame, cropped rather than letterboxed.
   The frame owns the shape, so a card can never be burst open by an image
   arriving at its natural size - which is exactly what used to happen on any
   page that did not carry its own scatter rules. */

.mealshot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--forest);
  flex: none;
}
/* The photograph itself.

   The absolute positioning belongs to being inside a .mealshot frame, and it
   is now scoped to that. It used to apply to the image wherever it appeared,
   which meant that anywhere mealPhoto() was used outside a frame the image
   positioned itself against whatever happened to be the nearest positioned
   ancestor - in the worst case the page - and one plate covered the whole
   screen. The plain rules below are what an unframed one gets: it fills its
   own box and no more. */
.mealshot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.mealshot > .mealshot-img {
  position: absolute;
  inset: 0;
}
a:hover > .mealshot .mealshot-img,
button:hover > .mealshot .mealshot-img,
.dishcard:hover .mealshot-img,
.mealcard:hover .mealshot-img { transform: scale(1.04); }

/* A dish nobody has photographed yet is flagged, but only where that is
   useful. Staff need to know what is still to be shot; a customer does not
   need thirty three cards each announcing an absence, and the drawn stand in
   already reads as a drawing rather than a photograph. So the badge is opt in
   and the console turns it on. */
.shows-pending .mealshot.pending::after {
  content: "Photograph coming";
  position: absolute; left: 10px; bottom: 10px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wheat); background: rgba(4, 36, 20, .55);
  padding: 4px 8px; pointer-events: none;
}

/* The card a dish sits in on the menu page. It had no border, no background
   and no fixed image height, which is why a page of them read as a column of
   floating words with enormous gaps between. */
.mealcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
  min-width: 0;
  overflow: hidden;
}
.mealcard .txt { padding: 18px 18px 14px; flex: 1; min-width: 0; }
.mealcard .txt h3 { font-size: 19px; margin-bottom: 7px; }
.mealcard .txt > p { font-size: 14.5px; color: var(--muted); margin: 0 0 12px; }
.mealcard .macro {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.mealcard .macro div {
  padding: 11px 4px; text-align: center; border-right: 1px solid var(--line);
  min-width: 0;
}
.mealcard .macro div:last-child { border-right: 0; }
.mealcard .macro b {
  display: block; font-size: 16px; font-weight: 600; color: var(--root);
  line-height: 1.15;
}
.mealcard .macro span {
  font-size: 10.5px; letter-spacing: .04em; color: var(--muted);
}

/* what is in it: small, and secondary to the photograph */
.mealparts { min-width: 0; }
.mealparts-thumbs { display: flex; gap: 5px; margin-bottom: 7px; }
.mealpart {
  width: 26px; height: 26px; flex: none;
  background: var(--sand); display: grid; place-items: center; overflow: hidden;
}
.mealpart img { width: 100%; height: 100%; object-fit: contain; }
.mealparts-words {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted);
  overflow-wrap: anywhere;
}

/* ====================================================== a day at a time
   The home page carousel. Each slide is a whole day - three plates on a deck
   with the day's numbers underneath - and the slides sit in a stack, the ones
   either side set back and dimmed, so it reads as a deck being turned rather
   than a strip being scrolled.

   The stack is built from transforms only, so it runs on the compositor and
   stays smooth on a phone, and it collapses to one plain card at a time when
   motion is turned down. */

.daysshow {
  position: relative;
  padding: 8px 0 0;
  touch-action: pan-y;
  min-width: 0;
}
.daysshow-stage {
  position: relative;
  display: grid;
  min-height: 430px;
  perspective: 1400px;

  /* The slides behind the live one are pushed sideways by translateX to give
     depth. Nothing was clipping them, so they extended the document 41px past
     the viewport and the whole landing page could be scrolled sideways - the
     one thing a landing page must never do on a phone.

     clip rather than hidden: hidden on one axis forces the other to scroll,
     which would have cut the plates' shadows off at the top and bottom.
     clip stops the growth and leaves the other axis alone. */
  overflow-x: clip;
}
.dayslide {
  grid-area: 1 / 1;
  display: grid;
  gap: 22px;
  align-content: start;
  transform: translateX(calc(var(--d, 0) * 8%)) scale(calc(1 - (max(var(--d, 0), var(--d, 0) * -1) * 0.07)));
  opacity: 0;
  pointer-events: none;
  transition: transform .6s var(--ease), opacity .5s var(--ease);
  will-change: transform, opacity;
  min-width: 0;
}
.dayslide.on { opacity: 1; pointer-events: auto; z-index: 3; }

/* The slides sit on top of one another in one grid cell, so the ones behind
   are a depth cue and nothing more: their photographs show faintly at the
   edges, and every word they carry is taken out of the way. Left in, four
   sets of dish names and four sets of totals print themselves over the live
   one and the whole panel becomes unreadable. */
.dayslide:not(.on) { opacity: .16; filter: saturate(.35); z-index: 1; }
.dayslide:not(.on) .dayslide-sum,
.dayslide:not(.on) .cap { visibility: hidden; }

/* the three plates */
.dayslide-deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}
.dayslide-plate {
  display: block;
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  min-width: 0;
  color: inherit;
  transform: translateY(calc(var(--n, 0) * -6px));
  transition: transform .45s var(--ease), border-color .25s var(--ease);
}
.dayslide-plate:hover { border-color: var(--root); transform: translateY(-10px); }
.dayslide-plate .cap { display: block; padding: 12px 13px 14px; min-width: 0; }
.dayslide-plate .cap small {
  display: block; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wheat-deep); margin-bottom: 4px;
}
.dayslide-plate .cap b {
  display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3;
  color: var(--ink);
}

/* the day's numbers */
.dayslide-sum {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  min-width: 0;
}
.dayslide-sum .h { min-width: 0; }
.dayslide-sum .h h3 {
  font-size: clamp(17px, 1.9vw, 22px); line-height: 1.3; margin: 0;
}
.dayslide-sum .figs { display: flex; gap: 22px; flex: none; }
.dayslide-sum .figs div { text-align: right; }
.dayslide-sum .figs b {
  display: block; font-size: 22px; font-weight: 600; color: var(--root);
  line-height: 1.1; letter-spacing: -.02em;
}
.dayslide-sum .figs span { font-size: 11px; color: var(--muted); }

/* the arms */
.daysshow-arm {
  position: absolute; top: 150px; z-index: 6;
  width: 44px; height: 44px;
  border: 1px solid var(--line); background: rgba(255,255,255,.92);
  cursor: pointer; display: grid; place-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.daysshow-arm:hover { background: var(--root); border-color: var(--root); }
.daysshow-arm i {
  width: 9px; height: 9px; border: solid var(--forest); border-width: 0 2px 2px 0;
}
.daysshow-arm:hover i { border-color: #fff; }
.daysshow-arm.prev { left: -22px; }
.daysshow-arm.prev i { transform: rotate(135deg); margin-left: 3px; }
.daysshow-arm.next { right: -22px; }
.daysshow-arm.next i { transform: rotate(-45deg); margin-right: 3px; }
@media (max-width: 1320px) {
  .daysshow-arm.prev { left: 4px; }
  .daysshow-arm.next { right: 4px; }
}

.daysshow-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 20px; flex-wrap: wrap;
}
.daysshow-dots { display: flex; gap: 7px; }
.daysshow-dots .dot {
  width: 30px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: var(--line); transition: background .25s var(--ease), width .25s var(--ease);
}
.daysshow-dots .dot.on { background: var(--root); width: 46px; }
.daysshow-play {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: none; cursor: pointer;
  padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.daysshow-play:hover { border-color: var(--root); color: var(--root); }
.daysshow-play .ico {
  width: 9px; height: 11px; flex: none;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.daysshow-play.paused .ico {
  border: 0; width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

/* read out to a screen reader, never drawn */
.sr-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0;
}

@media (max-width: 820px) {
  .daysshow-stage { min-height: 500px; perspective: none; }
  .dayslide { transform: none; }
  .dayslide:not(.on) { display: none; }
  .dayslide-deck { grid-template-columns: 1fr; gap: 10px; }
  .dayslide-plate { transform: none; display: grid; grid-template-columns: 116px minmax(0, 1fr);
    align-items: center; }
  .dayslide-plate:hover { transform: none; }
  .dayslide-plate .mealshot { aspect-ratio: 1 / 1; }
  .dayslide-sum { grid-template-columns: minmax(0, 1fr); }
  .dayslide-sum .figs { flex-wrap: wrap; gap: 16px; }
  .dayslide-sum .figs div { text-align: left; }
  .daysshow-arm { top: auto; bottom: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .dayslide { transition: none; transform: none; }
  .dayslide:not(.on) { display: none; }
}

/* Loading states - busy buttons, the work bar and skeletons - moved to
   base.css, because board.html and driver.html load base.css and nothing
   else, and those are the two screens that need them most. */

/* ================================================ notices from the switch */

.opsbanner {
  background: var(--forest); color: #fff; font-size: 14px;
  padding: 10px 0; position: relative; z-index: 80;
}
.opsbanner.warn { background: var(--warn); }
.opsbanner.good { background: var(--root); }
.opsbanner .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; text-align: center;
}

/* Everything stops: maintenance, or a build too old to be trusted with
   somebody's money. */
.opstakeover {
  position: fixed; inset: 0; z-index: 300;
  background: var(--forest);
  display: grid; place-items: center; padding: 24px;
}
.opstakeover .card {
  background: none; border: 0; text-align: center; max-width: 440px;
  color: #E6E9E4;
}
.opstakeover img { margin: 0 auto 22px; }
.opstakeover h2 { color: #fff; margin-bottom: 12px; }
.opstakeover p { color: #B3BDB2; }
.opstakeover .btn { margin-top: 10px; }
.opstakeover .small { color: #7E9187; margin-top: 18px; }

/* the danger zone on the account page */
.dangerzone {
  border: 1px solid var(--warn);
  border-left-width: 3px;
  padding: 22px;
  margin-top: 40px;
}
.dangerzone h3 { color: var(--warn); font-size: 18px; margin-bottom: 8px; }
.dangerzone p { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }
.dangerzone .field { max-width: 260px; }
.dangerzone .btn.danger {
  background: var(--warn); border-color: var(--warn); color: #fff;
}
.dangerzone .btn.danger:hover { background: #8d3623; border-color: #8d3623; }

/* ====================================================== the builder shell */

.flow-head {
  padding: 26px 0 0;
}
.flow-head h1 {
  font-size: clamp(28px, 4.4vw, 46px);
  margin-bottom: 10px;
}

/* the progress rail. On a phone it is a bar with a count; on a desktop it
   names every step. */
.rail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 20px 0 8px;
  padding: 0;
  list-style: none;
}
.rail li {
  flex: 1 1 0;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
}
.rail li i {
  display: block;
  height: 3px;
  background: var(--line);
  margin-bottom: 8px;
  transition: background .4s var(--ease);
}
.rail li.done i { background: var(--leaf); }
.rail li.now i { background: var(--root); }
.rail li.now { color: var(--root); }
.rail li span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .rail li span { display: none; }
  .rail li.now span { display: block; }
}

.stepbox { padding: 26px 0 120px; }
.stepbox[hidden] { display: none; }
.stepbox > h2 { margin-bottom: 8px; }
.stepbox > .lede { margin-bottom: 26px; }

/* ------------------------------------------------- step 1, how many meals */

/* Big, obvious cards. Tapping one turns it on. The whole card is the target,
   not a small checkbox in the corner. */
.pickgrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.pickcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .2s var(--ease);
}
.pickcard:hover { border-color: var(--leaf); transform: translateY(-2px); }
.pickcard[aria-pressed="true"] {
  border-color: var(--root);
  background: var(--sand);
  box-shadow: inset 0 0 0 1px var(--root);
}
.pickcard .ico {
  width: 34px; height: 34px;
  margin-bottom: 8px;
  color: var(--leaf);
  flex: none;
}
.pickcard[aria-pressed="true"] .ico { color: var(--root); }
.pickcard b { font-size: 17px; font-weight: 600; }
.pickcard small { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.pickcard .tick {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 13px; color: transparent;
  transition: all .2s var(--ease);
}
.pickcard[aria-pressed="true"] .tick {
  border-color: var(--root); background: var(--root); color: #fff;
}
.pickcard .price {
  margin-top: 6px;
  font-size: 13px; font-weight: 600; color: var(--wheat-deep);
}

/* the days-a-week dial: seven buttons that fill up as you go right */
.daydial {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 4px 0 18px;
}
.daydial button {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  font-weight: 600;
  font-size: clamp(13px, 3.4vw, 16px);
  min-width: 0;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.daydial button.on {
  background: var(--root); border-color: var(--root); color: #fff;
}
.daydial button:hover { border-color: var(--root); }
.dayreadout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-size: 15px; margin-bottom: 4px;
}
.dayreadout b { font-size: clamp(24px, 5vw, 34px); color: var(--root); line-height: 1; }

/* which days of the week */
.daynames { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.daynames button {
  border: 1px solid var(--line); background: none; cursor: pointer;
  padding: 8px 14px; font-size: 14px; font-weight: 600;
}
.daynames button.on { background: var(--sand); border-color: var(--root); color: var(--root); }

/* ------------------------------------------- step 2, building the meals */

/* one tab per slot: breakfast, lunch, dinner, snack */
.slottabs {
  display: flex; gap: 4px; margin-bottom: 18px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.slottabs::-webkit-scrollbar { display: none; }
.slottabs button {
  flex: none;
  border: 0; background: none; cursor: pointer;
  padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.slottabs button.on { color: var(--root); border-bottom-color: var(--root); }
.slottabs button .badge {
  display: inline-block; margin-left: 7px; min-width: 19px; padding: 1px 5px;
  font-size: 11px; background: var(--line); color: var(--ink);
}
.slottabs button.on .badge { background: var(--root); color: #fff; }
.slottabs button.ready .badge { background: var(--leaf); color: #fff; }

/* the three varieties across the week */
.varhead {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 10px; margin-bottom: 14px;
}
.varhead .small { margin: 0; }
.varlist { display: grid; gap: 12px; margin-bottom: 18px; }
.varcard {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  border: 1px solid var(--line); padding: 14px; background: var(--paper);
  min-width: 0;
}
.varcard.empty { border-style: dashed; background: var(--sand); }
.varcard .letter {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--root); color: #fff; font-weight: 700; font-size: 17px;
  flex: none;
}
.varcard.empty .letter { background: var(--line); color: var(--muted); }
.varcard .who { min-width: 0; }
.varcard .who b {
  display: block; font-size: 15.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.varcard .who small {
  display: block; color: var(--muted); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.varcard .acts { display: flex; gap: 6px; flex: none; }
.varcard .acts button {
  border: 1px solid var(--line); background: none; cursor: pointer;
  padding: 8px 12px; font-size: 13px; font-weight: 600;
}
.varcard .acts button:hover { border-color: var(--root); color: var(--root); }
.varcard .acts .kill:hover { border-color: var(--warn); color: var(--warn); }
@media (max-width: 560px) {
  .varcard { grid-template-columns: 38px minmax(0, 1fr); }
  .varcard .letter { width: 38px; height: 38px; font-size: 15px; }
  .varcard .acts { grid-column: 1 / -1; }
  .varcard .acts button { flex: 1; }
}

/* the week strip under the varieties, showing how a, b, c will fall */
.cyclestrip {
  display: flex; gap: 4px; margin-bottom: 22px;
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin;
}
.cyclestrip div {
  flex: 1 0 58px; min-width: 58px;
  border: 1px solid var(--line); padding: 8px 6px; text-align: center;
}
.cyclestrip div span {
  display: block; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.cyclestrip div b { display: block; font-size: 17px; color: var(--root); margin-top: 3px; }

/* the quick pick of kitchen favourites */
.dishrow {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.dishcard {
  border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; text-align: left; padding: 0; min-width: 0;
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.dishcard:hover { border-color: var(--root); transform: translateY(-2px); }
.dishcard .txt { padding: 12px 13px 14px; min-width: 0; }
.dishcard .txt b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.dishcard .txt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* ------------------------------------------ the ingredient reel picker */

/* The picker the brief asked for: one column per group, each scrolling
   through its ingredients, the one under the line being the one chosen.
   It is a native scroller with scroll snapping, so it works with a thumb, a
   trackpad, a mouse wheel and the arrow keys without any of that being
   written by hand. */
.reel-wrap { border: 1px solid var(--line); background: var(--paper); }
.reel-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.reel-col { border-right: 1px solid var(--line); min-width: 0; position: relative; }
.reel-col:last-child { border-right: 0; }
.reel-col > h4 {
  position: sticky; top: 0; z-index: 3;
  padding: 11px 10px; margin: 0;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: center;
  background: var(--sand); border-bottom: 1px solid var(--line);
}
.reel {
  height: 264px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* the padding is what lets the first and last item reach the centre line */
  padding: 88px 0;
  position: relative;
}
.reel::-webkit-scrollbar { display: none; }
.reel-item {
  scroll-snap-align: center;
  height: 88px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  border: 0; background: none; width: 100%; text-align: left;
  opacity: .34;
  transform: scale(.9);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.reel-item img { width: 46px; height: 46px; object-fit: contain; }
.reel-item .n {
  font-size: 13.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.reel-item .m { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.reel-item .cost { color: var(--wheat-deep); font-weight: 600; }
.reel-item.live { opacity: 1; transform: scale(1); }
.reel-item.gone { opacity: .16; cursor: not-allowed; }
/* the line the chosen item sits on */
.reel-col::after {
  content: "";
  position: absolute; left: 6px; right: 6px;
  top: calc(50% + 21px); height: 88px;
  transform: translateY(-50%);
  border-top: 1px solid var(--root);
  border-bottom: 1px solid var(--root);
  pointer-events: none;
  opacity: .5;
}
.reel-nudge {
  position: absolute; left: 0; right: 0; z-index: 2;
  display: grid; place-items: center;
  border: 0; background: linear-gradient(var(--paper), rgba(255,255,255,0));
  height: 34px; cursor: pointer; color: var(--muted);
}
.reel-nudge.down { bottom: 0; background: linear-gradient(rgba(255,255,255,0), var(--paper)); }
.reel-nudge:hover { color: var(--root); }

@media (max-width: 620px) {
  .reel-cols { grid-template-columns: 1fr; }
  .reel-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .reel { height: 200px; padding: 56px 0; }
  .reel-item { height: 88px; }
  .reel-col::after { top: calc(50% + 21px); }
}

/* the extras below the reel: everything that carries a charge */
.extrarow {
  display: grid; gap: 8px; margin-top: 4px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr));
}
.extrachip {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); background: var(--paper);
  padding: 9px 11px; cursor: pointer; text-align: left; min-width: 0;
  font-size: 13.5px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.extrachip img { width: 26px; height: 26px; object-fit: contain; flex: none; }
/* the name wraps onto a second line rather than being cut off: an extra
   called "Sliced v..." is not something anyone can decide to buy */
.extrachip .en {
  min-width: 0; flex: 1; line-height: 1.25;
  overflow-wrap: anywhere;
}
.extrachip .ep { color: var(--wheat-deep); font-weight: 600; flex: none; font-size: 12.5px; }
.extrachip[aria-pressed="true"] { border-color: var(--root); background: var(--sand); }
.extrachip[aria-pressed="true"] .ep { color: var(--root); }

/* the running label for the box being built */
.buildlabel {
  border: 1px solid var(--line); background: var(--sand);
  padding: 16px; margin-top: 16px;
}
.buildlabel .bl-top {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-bottom: 10px;
}
.buildlabel .bl-name { font-size: 15.5px; font-weight: 600; margin-bottom: 10px; }
/* Five figures across, each label sitting directly above its number.
   A definition list lays its terms and its definitions out as siblings, so
   putting them straight into a grid interleaves them - label, value, label,
   value - and the reading falls apart. Pinning every dt to the first row and
   every dd to the second keeps each pair in one column. */
.buildlabel dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 4px 10px;
  margin: 0;
}
.buildlabel dt {
  grid-row: 1;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.buildlabel dd {
  grid-row: 2;
  margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap;
}

/* ------------------------------------------------ step 3, the bundles */

.bundlecard {
  border: 1px solid var(--line); padding: 20px; background: var(--paper);
  min-width: 0;
}
.bundlecard.on { border-color: var(--root); background: var(--sand); }
.bundlecard > header {
  display: flex; justify-content: space-between; gap: 14px;
  align-items: flex-start; margin-bottom: 6px;
}
.bundlecard h3 { font-size: 19px; }
.bundlecard .opt-badge {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; flex: none;
}
.bundlecard > p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.attachrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.attachrow button {
  border: 1px solid var(--line); background: none; cursor: pointer;
  padding: 9px 14px; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.attachrow button.on { background: var(--root); border-color: var(--root); color: #fff; }
.attachrow button .pp { font-size: 12px; opacity: .8; }
.flavourrow { display: flex; flex-wrap: wrap; gap: 7px; }
.flavourrow button {
  border: 1px solid var(--line); background: none; cursor: pointer;
  padding: 7px 12px; font-size: 13.5px;
}
.flavourrow button.on { border-color: var(--root); background: var(--root); color: #fff; }
.bundleprice {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 14.5px; font-weight: 600;
}
.bundleprice .free { color: var(--leaf); }

/* -------------------------------------- step 4, the week and the macros */

.weekgrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
}
.daycard {
  border: 1px solid var(--line); background: var(--paper);
  padding: 13px; min-width: 0;
}
.daycard > h4 {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 9px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 8px;
}
.daycard > h4 span { color: var(--root); }
.daymeal {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px; align-items: center; padding: 7px 0;
}
.daymeal + .daymeal { border-top: 1px dotted var(--line); }
.daymeal .th {
  width: 34px; height: 34px; background: var(--sand);
  display: grid; place-items: center; overflow: hidden; flex: none;
}
.daymeal .th img { width: 100%; height: 100%; object-fit: cover; }
.daymeal .dm { min-width: 0; }
.daymeal .dm b {
  display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.daymeal .dm small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.daymeal .dm .bun { color: var(--wheat-deep); }
.daycard .dtot {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); display: flex; justify-content: space-between;
}
.daycard .dtot b { color: var(--ink); }

/* ------------------------------------------------------- the platter */

.platter { display: grid; gap: 18px; justify-items: center; }
.platter-stage {
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 1 / 1;
  perspective: 760px;
  touch-action: pan-y;
  cursor: grab;
  display: grid;
  place-items: center;
}
.platter.still .platter-stage { cursor: default; }
.platter-stage.held { cursor: grabbing; }
.platter-spin {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(58deg);
  will-change: transform;
}
.platter.css-spin .platter-spin { animation: platterTurn 26s linear infinite; }
@keyframes platterTurn {
  from { transform: rotateX(58deg) rotateZ(0deg); }
  to   { transform: rotateX(58deg) rotateZ(360deg); }
}
.platter-ring {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transform: translateZ(var(--z, 0px));
  transform-style: preserve-3d;
}
.platter-ring svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgba(4,36,20,.14)); }
.platter-core {
  position: relative; z-index: 4; text-align: center; pointer-events: none;
}
.platter-core b {
  display: block; font-size: clamp(30px, 8vw, 44px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1; color: var(--root);
}
.platter-core span {
  display: block; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px;
}
.dark .platter-core b { color: #fff; }
.dark .platter-core span { color: var(--wheat); }
.platter-key {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; width: 100%; max-width: 380px;
}
.platter-key li {
  display: grid; gap: 2px; text-align: center; min-width: 0;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.platter-key i { width: 22px; height: 3px; margin: 0 auto 4px; display: block; }
.platter-key .k {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.platter-key b { font-size: 20px; font-weight: 600; line-height: 1.1; }
.platter-key small { font-size: 11px; color: var(--muted); }
.dark .platter-key li { border-color: var(--line-dark); }
.dark .platter-key b { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .platter-spin { animation: none !important; }
}

/* ------------------------------------------------------ the price panel */

.pricepanel { border: 1px solid var(--line); background: var(--paper); }
.pricepanel > header {
  background: var(--forest); color: #fff; padding: 20px;
}
.pricepanel .was {
  font-size: 15px; color: #9FB2A4; text-decoration: line-through;
}
.pricepanel .now {
  font-size: clamp(30px, 7vw, 42px); font-weight: 600; letter-spacing: -.03em;
  line-height: 1.05; display: block; margin: 4px 0 2px;
}
.pricepanel .per { font-size: 13px; color: #B3BDB2; }
.pricepanel .savechip {
  display: inline-block; margin-top: 12px; background: var(--wheat);
  color: var(--forest); font-size: 12.5px; font-weight: 700;
  padding: 5px 11px; letter-spacing: .02em;
}
.pricelines { list-style: none; margin: 0; padding: 0; }
.pricelines li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--line);
  font-size: 14.5px; align-items: baseline;
}
.pricelines li .lb { min-width: 0; }
.pricelines li .lb b { font-weight: 600; }
.pricelines li .lb small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.pricelines li .amt { font-weight: 600; white-space: nowrap; }
.pricelines li.cut .amt { color: var(--leaf); }
.pricelines li.total {
  border-bottom: 0; background: var(--sand); font-size: 17px; font-weight: 600;
}

/* the bar that follows you up the page on a phone */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--forest); color: #fff;
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 11px max(var(--pad), env(safe-area-inset-left))
           calc(11px + env(safe-area-inset-bottom))
           max(var(--pad), env(safe-area-inset-right));
}
.stickybar .in {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.stickybar .money { min-width: 0; flex: 1; }
.stickybar .money b {
  display: block; font-size: 19px; font-weight: 600; line-height: 1.15;
}
.stickybar .money small {
  display: block; font-size: 12px; color: #9FB2A4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stickybar .money s { color: #7E9187; margin-right: 7px; font-size: 13px; }
.stickybar .btn { flex: none; }
@media (max-width: 480px) {
  .stickybar .btn { padding: 12px 18px; font-size: 14px; }
}
body.has-bar { padding-bottom: 82px; }

/* ------------------------------------------------------- the tracker */

.trackhead {
  display: grid; gap: 6px; padding: 20px; background: var(--forest); color: #fff;
}
.trackhead .code {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--wheat);
}
.trackhead h2 { color: #fff; }
.trackhead .eta { font-size: 15px; color: #B3BDB2; }

/* the end to end line, kitchen to door */
.chain { list-style: none; margin: 0; padding: 0; }
.chain li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 14px; padding: 15px 0; position: relative; align-items: start;
}
.chain li + li::before {
  content: ""; position: absolute; left: 14px; top: -14px; bottom: 50%;
  width: 1px; background: var(--line);
}
.chain li.done + li::before, .chain li.now::before { background: var(--leaf); }
.chain .pip {
  width: 30px; height: 30px; border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center; z-index: 2; font-size: 13px; color: var(--muted);
}
.chain li.done .pip { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.chain li.now .pip { border-color: var(--root); color: var(--root); border-width: 2px; }
.chain li.now .pip::after {
  content: ""; position: absolute; width: 30px; height: 30px;
  border: 1px solid var(--root); animation: pulse 1.9s var(--ease) infinite;
}
@keyframes pulse { to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chain li.now .pip::after { animation: none; } }
.chain .wh { min-width: 0; }
.chain .wh b { display: block; font-size: 15.5px; font-weight: 600; }
.chain .wh small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.chain .when { font-size: 12.5px; color: var(--muted); white-space: nowrap; flex: none; }
.chain li.done .when { color: var(--leaf); }

/* today's boxes */
.boxlist { display: grid; gap: 10px; }
.boxrow {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  border: 1px solid var(--line); padding: 12px; background: var(--paper);
  min-width: 0;
}
.boxrow .th { width: 40px; height: 40px; background: var(--sand); overflow: hidden; flex: none; }
.boxrow .th img { width: 100%; height: 100%; object-fit: cover; }
.boxrow .bi { min-width: 0; }
.boxrow .bi b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boxrow .bi small { display: block; font-size: 12px; color: var(--muted); }
.boxrow .tm { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------- the kitchen console */

.bohbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.bohbar input[type="date"], .bohbar select {
  border: 1px solid var(--line); padding: 9px 12px; background: var(--paper);
}
.bohbar .spacer { flex: 1; }

.packgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.packcard { border: 1px solid var(--line); background: var(--paper); min-width: 0; }
.packcard > header {
  padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--sand);
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.packcard > header b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.packcard > header .code { font-size: 11.5px; letter-spacing: .1em; color: var(--muted); flex: none; }
.packcard .who { padding: 10px 15px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.packcard ol { list-style: none; margin: 0; padding: 0; }
.packcard ol li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--line);
  font-size: 13.5px; align-items: start;
}
.packcard ol li .tickbox {
  width: 20px; height: 20px; border: 1px solid var(--line); cursor: pointer;
  display: grid; place-items: center; background: none; padding: 0; font-size: 12px; color: transparent;
}
.packcard ol li.packed .tickbox { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.packcard ol li.packed .pk { color: var(--muted); text-decoration: line-through; }
.packcard .pk { min-width: 0; }
.packcard .pk b { display: block; font-weight: 600; }
.packcard .pk small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.packcard .pk .flag { color: var(--warn); font-weight: 600; }
.packcard > footer {
  padding: 12px 15px; display: flex; gap: 8px; flex-wrap: wrap;
}
.packcard > footer .btn { flex: 1; min-width: 120px; }

/* the production table, wide by nature, so it gets its own scroller */
.prodtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.prodtable th, .prodtable td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.prodtable th {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: var(--sand); position: sticky; top: 0;
}
.prodtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.prodtable tr.group td { background: var(--sand); font-weight: 600; }

/* the state a driver or a chef moves an order through */
.statechips { display: flex; gap: 6px; flex-wrap: wrap; }
.statechips button {
  border: 1px solid var(--line); background: none; cursor: pointer;
  padding: 6px 11px; font-size: 12.5px; font-weight: 600;
}
.statechips button.on { background: var(--root); border-color: var(--root); color: #fff; }

/* --------------------------------------------------------- the sheet */

.sheet {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 36, 20, .5);
  display: none; align-items: flex-end; justify-content: center;
  padding: 0;
}
.sheet.open { display: flex; }
@media (min-width: 760px) { .sheet { align-items: center; padding: 32px; } }
.sheet-card {
  background: var(--paper); width: 100%; max-width: 760px;
  max-height: min(92vh, 880px);
  display: flex; flex-direction: column; min-height: 0;
}
.sheet-card > header {
  display: flex; justify-content: space-between; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-bottom: 1px solid var(--line); flex: none;
}
.sheet-card > header .h { min-width: 0; }
.sheet-card > header h3 { font-size: 19px; }
.sheet-card > header p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.sheet-card .body { overflow-y: auto; padding: 18px 20px; min-height: 0; flex: 1; }
.sheet-card > footer {
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); display: flex; gap: 10px; flex: none;
}
.sheet-card > footer .btn { flex: 1; }
.sheet-close {
  border: 1px solid var(--line); background: none; cursor: pointer;
  width: 36px; height: 36px; font-size: 19px; line-height: 1; flex: none;
}

/* ------------------------------------------------------ the AI planner */

.aipanel { border: 1px solid var(--line); background: var(--paper); padding: 22px; }
.ailines { list-style: none; margin: 18px 0 0; padding: 0; }
.ailines li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr);
  gap: 11px; padding: 7px 0; font-size: 14.5px; color: var(--muted);
  opacity: .3; transition: opacity .3s var(--ease), color .3s var(--ease);
}
.ailines li.on { opacity: 1; color: var(--ink); }
.ailines li i {
  width: 20px; height: 20px; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 11px; color: transparent;
  font-style: normal;
}
.ailines li.on i { border-color: var(--leaf); background: var(--leaf); color: #fff; }
.aibar { height: 3px; background: var(--line); overflow: hidden; }
.aibar i { display: block; height: 100%; width: 0; background: var(--root); transition: width .45s var(--ease); }

.aiverdict { display: grid; gap: 22px; }
@media (min-width: 860px) {
  .aiverdict { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
}
.aiverdict .note {
  border-left: 2px solid var(--wheat); padding-left: 16px;
  font-size: 15.5px; line-height: 1.55;
}
.aisrc {
  display: inline-block; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); padding: 3px 8px; margin-bottom: 12px;
}

/* -------------------------------------------------------------- misc */

.notice {
  border: 1px solid var(--line); border-left-width: 3px; padding: 13px 16px;
  font-size: 14.5px; margin-bottom: 18px; background: var(--sand);
}
.notice[hidden] { display: none; }
.notice.bad { border-left-color: var(--warn); color: var(--warn); }
.notice.good { border-left-color: var(--leaf); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; max-width: 100%; border: 1px solid var(--line);
  padding: 12px 13px; background: var(--paper); font-size: 16px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--root); outline-offset: 1px; border-color: var(--root);
}
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.fieldrow { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

/* Off screen until it is tabbed to. Clipped to nothing rather than pushed
   out to a negative offset: a 9999 pixel offset is still part of the layout,
   and on a narrow screen it is one more thing the page has to be told to hide
   sideways. Clipping takes it out of the flow entirely and still leaves it
   readable to a screen reader. */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  z-index: 999; background: var(--root); color: #fff; font-weight: 600;
}
.skip-link:focus {
  position: fixed; left: 8px; top: 8px;
  width: auto; height: auto; overflow: visible;
  clip: auto; clip-path: none; padding: 12px 18px; color: #fff;
}

.legal { max-width: 74ch; }
.legal h2 { margin: 44px 0 14px; }
.legal h3 { margin: 28px 0 10px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal .updated {
  font-size: 13px; color: var(--muted); border: 1px solid var(--line);
  padding: 10px 14px; display: inline-block; margin-bottom: 26px;
}
.legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 16px 0; }
.legal table th, .legal table td {
  border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top;
}
.legal table th { background: var(--sand); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }

.toc { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 4px; }
.toc a { font-size: 14.5px; }

/* the Google button, in Google's own shape so it is recognised instantly */
.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 13px 20px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: #3c4043;
  font-size: 15px; font-weight: 600;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.gbtn:hover { background: #f7f8f8; border-color: #c8ccd0; }
.gbtn svg { width: 18px; height: 18px; flex: none; }
.gbtn[disabled] { opacity: .5; cursor: not-allowed; }

.authbox { border: 1px solid var(--line); padding: 20px; background: var(--sand); }
.authbox h3 { font-size: 17px; margin-bottom: 6px; }
.authbox .or {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.authbox .or::before, .authbox .or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.whoami {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--line); background: var(--paper); min-width: 0;
}
.whoami .av {
  width: 34px; height: 34px; background: var(--root); color: #fff;
  display: grid; place-items: center; font-weight: 700; flex: none;
}
.whoami .wi { min-width: 0; flex: 1; }
.whoami .wi b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoami .wi small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------- small screens, last */

@media (max-width: 760px) {
  :root { --pad: 20px; --sp: 62px; }
  .stepbox { padding: 20px 0 110px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .daydial { gap: 4px; }
  .pricelines li { padding: 12px 14px; }
  .pricepanel > header { padding: 16px; }
}


/* ---------- the social marks in the footer ----------

   Rendered by app.js from whatever addresses the console holds. They sit at
   the bottom of a page, under everything, and their whole job is to be found
   by somebody already looking for them - so they are small and quiet. The
   first version put each one in a thirty-eight pixel bordered box, which gave
   three minor links more weight on the page than the phone number. No boxes,
   and the glyph itself is the target. */
.socials {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 14px 0 0;
}
.socials[hidden] { display: none; }
.socials .social {
  display: grid;
  place-items: center;
  /* the tap target stays a comfortable size even though the mark is small */
  width: 30px; height: 30px;
  margin: -6px;
  color: var(--muted);
  transition: color .18s var(--ease), opacity .18s var(--ease);
}
.socials .social:hover { color: var(--forest); }
.socials .social svg { width: 16px; height: 16px; }
.foot .socials .social { color: rgba(255,255,255,.55); }
.foot .socials .social:hover { color: var(--wheat); }

/* an account with no address behind it yet: present, and plainly not live */
.socials .social.unset { opacity: .4; cursor: default; }
.socials .social.unset:hover { color: var(--muted); }
.foot .socials .social.unset:hover { color: rgba(255,255,255,.55); }

/* The one line that explains which run a box is on. Quieter than the
   window itself - it is a reason, not a fact somebody needs to act on. */
.trackhead .why {
  display: block; font-size: 12.5px; line-height: 1.45;
  opacity: .72; margin-top: 6px; max-width: 46ch;
}