/* GENERATED by design/ship.py from design/reader/band.css -- DO NOT EDIT. That file is the master; run `python3 design/export.py --shell` and this one is rewritten. */
/* design/reader/band.css -- THE BAND's picture (the hand is band.js).
   design/reader/band.css is the master; the module copies carry the same
   bytes once Osca has said yes (export.py --shell). Drawn 26 Sep 2026,
   wave 10 BAND, from design/POLISH.md and design/MAP.md ("the three doors").

   ONE COMPONENT, EVERY PAGE WEARS IT. On the Mac in-app the band sits
   inside the page under the host's tab strip; on the web it is the only
   place the product can stand; on the phone it is the bar at the FOOT that
   pbar.css drew (Osca, 10 Sep: "real estate is scarce on the phone. Three
   elements.") -- the same element, answering `html[data-phone]`; on a book
   it gains the way back and the running head. There is no second drawing.

   EVERY NUMBER IS A TOKEN OR A SUM OF TOKENS (POLISH rule 2) and EVERY
   COLOUR IS A var(--chrome-*) FROM tokens.css (rule 12): no px literal
   outside the four dials below, no #hex anywhere in this sheet.

   THE DIALS, one property each, dialled in design/reader/band.html:
     --band-h      the row's height        default --tap (44)
     --band-mark   the mark's tile         default --tap - 2*--gap (28)
     --band-gap    the space between doors default --gap (8)
     --band-glyph  0 = words; 1 = words and glyphs (read by band.js)
   And one the PAGE sets, never the band: --band-measure, the page's own
   content column (the web Library's is 1280, wave 9), so the doors align
   with the column's gutters. Unset = the band runs the window's width. */

.band{
  --band-h: var(--tap);
  --band-mark: calc(var(--tap) - 2 * var(--gap));
  --band-gap: var(--gap);
  --band-ink: var(--chrome-fg);
  --band-dim: var(--chrome-fg-dim);
  --band-ground: var(--chrome-bg);
  --band-rule: var(--chrome-border);
  --band-hover: var(--chrome-control-bg);
  --band-accent: var(--chrome-accent);
  --band-ui: var(--chrome-ui-font);
  --band-serif: var(--serif);
  /* the product face: Bodoni 72 is Apple's and ships with macOS and iOS;
     the fallbacks are the same cut under other names, then any serif */
  --band-face: "Bodoni 72", "Bodoni 72 Book", "Bodoni MT", Didot, "Libre Bodoni", serif;

  box-sizing: border-box;
  height: var(--band-h);
  padding: 0 var(--pad);
  background: var(--band-ground);
  color: var(--band-ink);
  border-bottom: var(--hair) solid var(--band-rule);
  font: 500 var(--ui-act) / 1 var(--band-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
}
.band *, .band *::before, .band *::after{ box-sizing: border-box; }
/* the row inside the band: the page's column, centred, or the whole width */
.band-in{
  height: 100%;
  max-width: var(--band-measure, none);
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--band-gap);
  min-width: 0;
}
/* the two clusters: the head between them is the grid's middle column, so
   it is centred on the row whatever the clusters weigh */
.band-left, .band-right{ display: flex; align-items: center; gap: var(--band-gap); min-width: 0; }
.band-right{ justify-content: flex-end; }

/* ---- THE MARK: live text in the product face, never an image --------------
   Frank/ICONOGRAPHY.md §3: at 64 px and under the mark is W and B alone
   (frank-mark-dock.svg) -- W over B, each turned 90 degrees clockwise, on
   the rounded tile (radius 20 %), and the tile CUTS the letters: the clipping
   is the design. The dock master centres W at (49 %, 41 %) and B at
   (49 %, 77 %) of the tile at 51 % of its side; those are the numbers here,
   as percentages of --band-mark so the dial scales the whole mark at once.
   Ink and field are the chrome's own two colours, so the mark inverts with
   the theme the way the doors do. */
.band-mark{
  flex: none; position: relative;
  width: var(--band-mark); height: var(--band-mark);
  border-radius: 20%;
  background: var(--chrome-control-bg);
  overflow: hidden;
  color: var(--band-ink);
  text-decoration: none;
  margin-right: calc(var(--band-gap) + var(--gap-hair));
}
.band-mark b{
  position: absolute; left: 49%; top: 41%;
  font: 700 calc(var(--band-mark) * .51) / 1 var(--band-face);
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
  font-variant-ligatures: none;
}
.band-mark b + b{ top: 77%; }
/* the mark is a door (to the shelf; on a book, the way back): it answers the pointer like one */
.band-mark{ transition: background-color .14s; }
.band-mark:hover{ background: var(--band-rule); }
.band-mark:active{ background: var(--band-hover); }
/* the name beside the mark, in the reading face (the serif the page uses) */
.band-name{
  font: 600 var(--ui-field) / 1 var(--band-serif);
  color: var(--band-ink); text-decoration: none;
  letter-spacing: .01em;
  margin-right: var(--band-gap);
}

/* ---- THE DOORS: Library · Surface ⌘K · Settings ---------------------------
   Set in the chrome's UI type at a button's size (--ui-act). A door is a
   verb, never a label; the door you are behind is marked by STATE
   (aria-current="page": ink, and a rule under it), not by a word. A door to
   a page is an <a href>; the Surface is a <button> because it opens over
   the page, never a navigation (wave 9). */
.band-door{
  flex: none; display: inline-flex; align-items: center; gap: calc(var(--gap) - var(--gap-hair));
  height: calc(var(--tap) - var(--pad));       /* 32: a pointer's row inside a 44 band */
  padding: 0 var(--gap);
  margin: 0;
  border: 0; border-radius: var(--r-ui);
  background: transparent;
  color: var(--band-dim);
  font: inherit; line-height: 1;
  text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: color .14s, background-color .14s;
}
.band-door:hover{ color: var(--band-ink); background: var(--band-rule); }   /* one hover for every door and the mark (band Stranger 2: --band-hover is 1.06:1, i.e. nothing) */
.band-door:active{ background: var(--band-rule); }
.band-door[aria-current="page"]{ color: var(--band-ink); }
/* the state: a rule the width of the word, --gap-hair thick, in ink */
.band-door[aria-current="page"]::after{
  content: ""; position: absolute; left: var(--gap); right: var(--gap); bottom: 0;
  height: var(--gap-hair); background: var(--band-ink);
  border-radius: var(--gap-hair);
}
.band-door:focus-visible{ outline: var(--gap-hair) solid var(--band-accent); outline-offset: var(--gap-hair); }
.band-door svg{
  width: var(--ui-field); height: var(--ui-field); display: block;
  fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
/* GLYPHS ONLY (Osca, 28 Sep, DESIGN session): a door with no word is a 32
   square (--tap - --pad) with the glyph at 20 (--ui-field + --gap/2) in its
   middle, and the door you are behind is drawn in the accent, no tile, no
   rule (the band Stranger: a tile at 1.06:1 read as nothing, and hover wore it too). The phone keeps its own
   ⚙ (pbar's 44 square, 16 glyph, beside the 16 mic). */
html:not([data-phone]) .band-door[data-label="glyph"]{ padding: 0; width: calc(var(--tap) - var(--pad)); justify-content: center; }
html:not([data-phone]) .band-door[data-label="glyph"] svg:not(.band-back){ width: calc(var(--ui-field) + var(--gap) / 2); height: calc(var(--ui-field) + var(--gap) / 2); }
html:not([data-phone]) .band-door[data-label="glyph"][aria-current="page"]{ color: var(--band-accent); }   /* the one loud thing: the page you are on, in Frank's red (Osca, 28 Sep) */
html:not([data-phone]) .band-door[data-label="glyph"][aria-current="page"]::after{ display: none; }
/* words: the glyphs are not drawn at all (band.js does not write them) */
.band-door kbd{
  font: 500 var(--ui-fine) / 1 var(--band-ui);
  color: var(--band-dim);
  border: var(--hair) solid var(--band-rule); border-radius: calc(var(--r-ui) / 2);
  padding: var(--gap-hair) calc(var(--gap) / 2);
  margin-left: var(--gap-hair);
}
.band-door[aria-current="page"] kbd, .band-door:hover kbd{ color: var(--band-ink); }

/* ON A BOOK the Library door is the way back: it gains a chevron and keeps
   its place -- the same door, in the state "this goes up" */
.band[data-book] .band-door[data-door="library"] svg.band-back{ display: block; }
.band-door svg.band-back{ display: none; margin-right: calc(0px - var(--gap-hair)); }

/* ---- THE RUNNING HEAD: the book, and the chapter after it ---------------
   In the reading face, ink then dim, centred in what the doors leave. It
   truncates only when there is no room (rule 8). Empty when not on a book:
   band.js writes nothing, and an empty head takes the space so the theme
   control stays at the far right. */
.band-head{
  min-width: 0; max-width: 100%;
  display: flex; align-items: baseline; justify-content: center; gap: var(--gap);
  font: 400 var(--ui-act) / 1 var(--band-serif);
  color: var(--band-ink);
  padding: 0 var(--pad);
  white-space: nowrap; overflow: hidden;
}
.band-head b{ font-weight: 600; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.band-head i{ font-style: italic; color: var(--band-dim); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.band-head i:empty{ display: none; }
/* who speaks in the chapter on screen (READER-FIX-2): after the chapter, quieter, upright; it gives way first */
.band-head .band-cast{ color: var(--band-dim); overflow: hidden; text-overflow: ellipsis; flex: 0 2 auto; min-width: 0; }
.band-head .band-cast:empty{ display: none; }

/* ---- THE THEME: a drawn control at the far right ---------------------------
   A disc, half filled. The filled half says what is ON (rule 3: the control
   shows its state): the left half filled is light, the right half filled is
   dark. It is a <button> with an aria-label that says the same in words.
   (tokens.css, 6 Sep, records "no button for light/dark -- Settings drives
   it"; this is Osca's 26 Sep line, which is newer, and the control writes
   the same html[data-theme] prefs/ writes, so Settings and the band agree.) */
.band-theme{
  flex: none; display: grid; place-items: center;
  width: calc(var(--tap) - var(--pad)); height: calc(var(--tap) - var(--pad));   /* 32 */
  margin: 0; padding: 0; border: 0; border-radius: var(--r-ui);
  background: transparent; color: var(--band-dim); cursor: pointer;
  font: inherit;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .14s, background-color .14s;
}
.band-theme:hover{ color: var(--band-ink); background: var(--band-hover); }
.band-theme:focus-visible{ outline: var(--gap-hair) solid var(--band-accent); outline-offset: var(--gap-hair); }
.band-theme svg{
  width: var(--ui-field); height: var(--ui-field); display: block;
  fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
.band-theme svg .half{ fill: currentColor; stroke: none; }
/* light: the LEFT half is ink. dark: the right half. The two paths are both
   in the SVG; the one that is not the state is not painted. */
.band-theme svg .half-dark{ display: none; }
html[data-theme="dark"] .band-theme svg .half-light{ display: none; }
html[data-theme="dark"] .band-theme svg .half-dark{ display: block; }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .band-theme svg .half-light{ display: none; }
  html:not([data-theme="light"]) .band-theme svg .half-dark{ display: block; }
}

/* ============================ THE PHONE ====================================
   The same element at the FOOT of the screen, and the three elements
   pbar.css drew on 10-11 Sep (⚙ · the pill · the mic): keyed on
   html[data-phone] alone, so a bench can show it without a 600-px window.
   What answers the three doors on the phone: the pill's tap is the Surface,
   its drag up is the Library (a gesture, per Osca 10 Sep: "No library
   button"), the ⚙ is Settings; a long press on the ⚙ is the theme (pbar.js),
   so no fourth control spends the row. The pill carries the running head
   (the book, the chapter beneath) or the one word "Library" on the shelf.
   pbar's numbers, brought onto the scale: the row 40 -> --tap (44), the
   side margin 6 -> --gap (8), the gap 4 -> --gap, the type 13 = --ui-fine,
   the pill's corner 11 -> --r-ui (10), the glyph 19 -> --ui-field (16).
   The 44-square targets no longer overhang: the row IS 44. */
/* LOWER AND SHORTER (Osca, 28 Sep: "real estate is SO damn scarce … I think it's too high"): the row is 40
   (--tap - --gap/2) and it sits into the home-indicator inset, keeping only half of it (the indicator is a
   line, not a wall) */
/* --band-foot: the bar's whole height, for everything that sits ABOVE it (the
   sheet, the layers' margin sheet) -- one formula, not a copied 78 (PHONE-PASS) */
html[data-phone]{ --band-foot: calc(var(--tap) - var(--gap) / 2 + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) / 2); }
html[data-phone] .band{
  --band-h: calc(var(--tap) - var(--gap) / 2);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: calc(var(--band-h) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) / 2);
  padding: 0 var(--gap) calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) / 2);
  border-bottom: 0; border-top: var(--hair) solid var(--band-rule);
  background: color-mix(in srgb, var(--band-ground) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  font-size: var(--ui-fine);
  touch-action: none;
  transform: translateY(calc(0px - var(--band-lift, 0px)));
  transition: transform .22s ease; will-change: transform;
}
html[data-phone] .band[data-shown="off"]{ transform: translateY(101%); }
/* the book band on the Mac and the web goes with the page (band.js autoHide):
   sticky, and carried up by exactly what the text scrolls -- it never jumps */
html:not([data-phone]) .band[data-book]{ position: sticky; top: 0; z-index: 60; transform: translateY(calc(0px - var(--band-off, 0px))); }
html[data-phone] .band-in{ max-width: none; display: flex; gap: var(--gap); }
html[data-phone] .band-left, html[data-phone] .band-right{ flex: none; gap: 0; }
/* the Mac's furniture does not paint on the phone: the mark and its name,
   the two word-doors, the head (the pill carries it), the theme control */
html[data-phone] .band-mark, html[data-phone] .band-name,
html[data-phone] .band-door[data-door="library"], html[data-phone] .band-door[data-door="surface"],
html[data-phone] .band-head, html[data-phone] .band-theme{ display: none; }
/* the ⚙: a 44 square, a DOOR (an <a href>), left */
html[data-phone] .band-door[data-door="settings"]{
  width: var(--tap); height: var(--tap); padding: 0; justify-content: center;
  color: var(--band-ink); opacity: .72; position: relative;
  -webkit-touch-callout: none;
}
html[data-phone] .band-door[data-door="settings"]:active{ opacity: 1; background: var(--band-rule); }
html[data-phone] .band-door[data-door="settings"] span{ display: none; }
html[data-phone] .band-door[data-door="settings"] svg{ display: block; }
html[data-phone] .band-door[aria-current="page"]::after{ display: none; }
html[data-phone] .band-door[aria-current="page"]{ color: var(--band-accent); }   /* "you are here" is the accent on every host */
/* the sync dot on the ⚙'s top-right, while a sync runs (data-sync="on") */
html[data-phone] .band-dot{
  position: absolute; top: calc(var(--gap) + var(--hair)); right: calc(var(--gap) + var(--hair));
  width: calc(var(--gap) - var(--gap-hair)); height: calc(var(--gap) - var(--gap-hair));
  border-radius: 50%; pointer-events: none;
  background: var(--pbar-mic); box-shadow: 0 0 0 var(--hair) var(--band-ground);
  opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .2s ease;
}
html[data-phone] .band[data-sync="on"] .band-dot{ opacity: 1; transform: none; }
/* THE PHONE'S CENTRE (Osca, 28 Sep: "the bottom bar in the phone looks awful
   ... not aligned, font bad"). Two drawings, one place, the Mac band's rule:
   on a BOOK the book -- the title in the reading serif, the chapter dim and
   italic under it, no box, centred between the two 44 squares; ELSEWHERE a
   search field -- a 32 box (--tap - --pad) with a hairline, the glyph and the
   word "Search" in the dim ink, left-aligned like any field. A tap is Search;
   on a book a drag UP is the shelf. */
html[data-phone] .band-pill{
  flex: 1 1 auto; min-width: 0;
  height: calc(var(--tap) - 2 * var(--gap)); margin: 0; padding: 0 var(--pad);
  border: var(--hair) solid var(--band-rule); border-radius: var(--r-ui);
  background: var(--band-ground);
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: calc(var(--gap) - var(--gap-hair));   /* Search centred in the pill (Osca, 28 Sep) */
  font: 400 var(--ui-act) / 1 var(--band-ui); color: var(--band-dim); text-align: center;
  -webkit-appearance: none; appearance: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
  transform: translateX(var(--band-slide, 0px));
  transition: transform .22s ease, background-color .18s ease;
}
html[data-phone] .band-pill svg{ width: var(--ui-field); height: var(--ui-field); flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
html[data-phone] .band-pill[data-book]{
  height: var(--tap); border-color: transparent; background: transparent;
  flex-direction: column; justify-content: center; align-items: center; gap: var(--gap-hair);
  text-align: center; color: var(--band-ink);
}
html[data-phone] .band-pill:active, html[data-phone] .band[data-armed] .band-pill{ background: var(--band-rule); }
html[data-phone] .band-pill b{
  display: block; max-width: 100%;
  font: 500 var(--ui-act) / 1.1 var(--band-serif); color: var(--band-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-phone] .band-pill i{
  display: block; max-width: 100%;
  font: italic 400 var(--ui-fine) / 1.1 var(--band-serif); color: var(--band-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-phone] .band-pill i:empty{ display: none; }
/* THE MIC's slot: voiceui's own element is moved in here by the mount (one
   mic on the page); the bench draws a stand-in glyph in it */
html[data-phone] .band-mic{
  flex: none; display: grid; place-items: center;
  width: var(--tap); height: var(--tap); color: var(--band-dim);   /* the mic is a door like the ⚙, in the same ink; it turns --pbar-mic only while it listens (voiceui's own state) */
}
html[data-phone] .band-mic{ margin: 0; padding: 0; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
html[data-phone] .band-mic:focus-visible{ outline: 0; box-shadow: 0 0 0 2px var(--band-accent); }
/* LISTENING IS THE ACCENT (ASKS #181): the same red and the same treatment as the ⚙ while Settings is open
   (`.band-door[data-door="settings"][aria-current="page"]{ color: var(--band-accent) }`) -- the glyph turns, nothing else */
html[data-phone] .band-mic[aria-pressed="true"]{ color: var(--band-accent); }
html[data-phone] .band-mic svg{
  width: var(--ui-field); height: var(--ui-field); display: block;
  fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
/* ONE DOM, TWO ORDERS: the Settings door is first in the DOM (the phone's
   left), and on the Mac it takes its place after the Surface */
html:not([data-phone]) .band-door[data-door="settings"]{ order: 1; }
/* the Mac never has these two nodes: band.js writes them on the phone only */
.band-pill, .band-mic, .band-dot{ display: none; }
html[data-phone] .band-pill, html[data-phone] .band-dot{ display: flex; }
html[data-phone] .band-dot{ display: block; }

/* the phone's two squares match: glyph 20 (--ui-field + --gap/2), the dim ink, centred on the row */
html[data-phone] .band-door[data-door="settings"] svg, html[data-phone] .band-mic svg{ width: calc(var(--ui-field) + var(--gap) / 2); height: calc(var(--ui-field) + var(--gap) / 2); }
html[data-phone] .band-door[data-door="settings"]{ color: var(--band-dim); opacity: 1; }
html[data-phone] .band-in{ align-items: center; }

/* THE SEARCH FIELD in the shelf's band (Mac, web): centre stage, a 32 box with a
   hairline, the glyph, "Search", and ⌘K at its right; as wide as a third of the
   row, never under 240 nor over 480 */
.band-search{
  display: none;
  width: clamp(240px, 33vw, 480px); height: calc(var(--tap) - var(--pad));
  padding: 0 var(--gap) 0 var(--pad); margin: 0;
  border: var(--hair) solid var(--band-rule); border-radius: var(--r-ui);
  background: var(--band-ground); color: var(--band-dim);
  align-items: center; gap: var(--gap);
  font: 400 var(--ui-act) / 1 var(--band-ui); text-align: left; cursor: text;
  -webkit-appearance: none; appearance: none;
  transition: border-color .14s, color .14s;
}
html:not([data-phone]) .band-search{ display: flex; }
.band-search:hover{ border-color: var(--band-dim); color: var(--band-ink); }
.band-search:focus-within{ outline: var(--gap-hair) solid var(--band-accent); outline-offset: var(--gap-hair); }
.band-search svg{ width: var(--ui-field); height: var(--ui-field); flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.band-search input{ flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--band-ink); -webkit-appearance: none; appearance: none; }
.band-search input::placeholder{ color: var(--band-dim); opacity: 1; }
.band-search input::-webkit-search-cancel-button{ -webkit-appearance: none; }
.band-search:focus-within{ border-color: var(--band-dim); }
.band-search kbd{ font: 500 var(--ui-fine) / 1 var(--band-ui); color: var(--band-dim); border: var(--hair) solid var(--band-rule); border-radius: calc(var(--r-ui) / 2); padding: var(--gap-hair) calc(var(--gap) / 2); }
/* on the shelf the Surface IS the field, so its glyph door steps out; and the
   door of the page you are on is not drawn (Osca asked what the red thing on the
   shelf was -- it was the Library glyph saying "you are here"; the mark already
   says it) */
html:not([data-phone]) .band[data-page="library"] .band-door[data-door="surface"]{ display: none; }
html:not([data-phone]) .band-door[aria-current="page"]{ display: none; }
/* ⚙ IS A TOGGLE (ASKS #159, Osca 30 Sep: "Settings doesn't need a back button ... you just press the same settings key
   again to close it"): on Settings the ⚙ stays drawn, in the accent, and a press closes Settings */
html:not([data-phone]) .band-door[data-door="settings"][aria-current="page"]{ display: inline-flex; color: var(--band-accent); }
html[data-phone] .band-door[data-door="settings"][aria-current="page"]{ color: var(--band-accent); }   /* you are here, on the phone too (band Stranger 4 found it lost) */

/* the glyph and the word on ONE line (Osca: "the words search and the glyph are not on the same horizontal
   plane"): the word's box is the glyph's height and its text sits on that box's middle */
html[data-phone] .band-pill:not([data-book]) span{ display: block; height: var(--ui-field); line-height: var(--ui-field); }
html[data-phone] .band-pill[data-book]{ height: var(--band-h); }
html[data-phone] .band-door[data-door="settings"], html[data-phone] .band-mic{ height: var(--band-h); }

/* ONE SEARCH BAR ON THE PHONE (Osca, 28 Sep: "never a second search bar -- on the
   phone the pill IS the search field when pressed"; PHONE-PASS): while the sheet
   is up the pill is the field -- ink, a hairline in the dim ink, what was typed
   in place of the word, the caret in the accent -- and the sheet draws none */
html[data-phone] .band[data-searching] .band-pill{ border-color: var(--band-dim); color: var(--band-ink); justify-content: flex-start; }
html[data-phone] .band[data-searching] .band-pill span::after{ content: ""; display: inline-block; vertical-align: middle; width: var(--hair); height: var(--ui-act); margin-left: var(--gap-hair); background: var(--band-accent); }

/* OPTICAL, not geometric (Osca, 28 Sep: "search and glyph still aren't aligned"): the magnifier's circle sits in the
   top-left of its 16 box, so centring the BOX leaves the lens riding above the word's x-height. Measured in the pane
   in SF at 15 px: lens centre 2.5 px above the lower-case middle -- the glyph comes down 2 px wherever it sits beside
   the word Search (the phone pill, the shelf's field). */
html[data-phone] .band-pill:not([data-book]) svg, .band-search svg{ transform: translateY(2px); }

/* THE MAC HAS NO MARK AND NO BAND OFF A BOOK (Osca, 28 Sep night, looking at the canvas: "the WB bit has to be
   removed in the desktop app, because already, library tab is right there"). The Mac is neither html[data-phone]
   nor html[data-web]: its window's tab strip carries Library first, 🔍 and ⚙ (28 Sep 18:00), so the band on the
   shelf, Settings and the Surface is empty furniture, and in a book the mark is a second Library door. On the
   Mac the band exists only in a book, and holds the title, the chapter and the layers. The web and the phone
   keep the mark: there it is the only way home. */
html:not([data-phone]):not([data-web]) .band:not([data-book]){ display: none; }
html:not([data-phone]):not([data-web]) .band-mark{ display: none; }

/* THE PHONE'S BAR FLOATS (Osca, 29 Sep, after Apple Photos: "this is pretty much how I want the library in frank
   to look and interact"). Photos has no bar across the foot: its controls are glass capsules floating over the
   grid, which runs to the bottom of the glass under them. So the band's box is no longer painted -- no ground, no
   rule, no blur across the width -- and each of its three is its own glass: the ⚙ a circle, the centre a capsule,
   the mic a circle, 48 tall (Photos'), a gap of --gap between, --pad from the edges, sitting --gap above the
   home-indicator's half. Presses land on the three, never on the empty band between them. --band-foot (what
   sits above the bar: the sheet, the play row) follows the new height. */
/* CLEAR OF THE HOME INDICATOR (ASKS #188): the row's foot sits ON the home strip's top edge, never inside it --
   the strip is the whole safe inset (34 upright, 21 on its side), not half of it; with no inset (a desktop bench)
   it keeps a --gap. Measured 827 > 818 and 375 > 372 before; now 818 and 372. */
/* SAFARI'S PLACE (ASKS #240, Osca 10 Oct 04:08: "the search bar and stuff aren't in the perfect place on the phone,
   like a little high, a little wide ... look at safari ... should carry over to the phone reader and the phone
   settings, because the pill exists everywhere"). iOS 26's own floating bars (Safari's, the tab bar) stand 21 pt in
   from each side and sit low, over the home indicator's top half -- not on top of the whole strip. So the row is
   --foot-side (21) in from the edges, not --pad (12), and its foot is --gap plus HALF the safe inset (25 upright,
   18.5 on its side) -- the line the Surface's field and Settings' find already stood on, so the pill, the field it
   rises into and Settings' find are now one row in one place. Replaces #188's "never inside the strip" (a lane's
   leftover, 30 Sep), by Osca's newer word. Measured 402x874 safe 34: row 794-842 x 12-390 -> 801-849 x 21-381. */
html[data-phone]{ --foot-side: 21px; --band-float: calc(var(--tap) + var(--gap) / 2); --band-sink: calc(var(--gap) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) / 2); --band-foot: calc(var(--band-float) + var(--band-sink)); }
html[data-phone] .band{
  height: auto; background: transparent; border-top: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0 var(--foot-side) var(--band-sink);
  pointer-events: none;
}
html[data-phone] .band-in{ pointer-events: none; gap: var(--gap); }
html[data-phone] .band-door[data-door="settings"], html[data-phone] .band-mic, html[data-phone] .band-pill{
  pointer-events: auto;
  height: var(--band-float);
  border: var(--hair) solid color-mix(in srgb, var(--band-ink) 12%, transparent);
  background: color-mix(in srgb, var(--band-ground) 58%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
}
html[data-phone] .band-door[data-door="settings"], html[data-phone] .band-mic{ width: var(--band-float); border-radius: 50%; }
html[data-phone] .band-pill, html[data-phone] .band-pill[data-book]{ height: var(--band-float); border-radius: calc(var(--band-float) / 2); }
html[data-phone] .band-pill[data-book]{ border-color: color-mix(in srgb, var(--band-ink) 12%, transparent); background: color-mix(in srgb, var(--band-ground) 58%, transparent); }
html[data-phone] .band-pill:active, html[data-phone] .band[data-armed] .band-pill{ background: color-mix(in srgb, var(--band-rule) 70%, transparent); }

/* THE BAND ON THE WEB AND THE MAC'S BOOK BAND, IN THE LIBRARY'S GLASS (DESIGN, 29 Sep). Osca: "make sure they all look
   like the same app, as good as each other ... ALL doors, everywhere, on all platforms". The phone's band floats as
   glass since the Photos pass, and the Library's head is glass circles and capsules (library.css: 32 on Mac/web, a
   hairline of ink at 12 %, the ground at ~60 % under an 18 px blur); the desktop band was still a painted bar with
   flat word-buttons and a square field. Now: the bar is the same glass (the page runs under it and blurs), each glyph
   door is a 32 glass circle, the search field a 32 glass capsule. Same sizes as the Library head's controls, so the
   band's ⚙ and the shelf's order circle are one object. The mark and the running head do not change. */
:where(html:not([data-phone])) .band{
  background: color-mix(in srgb, var(--band-ground) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
  border-bottom-color: color-mix(in srgb, var(--band-ink) 9%, transparent);
}
:where(html:not([data-phone])) .band-door[data-label="glyph"], :where(html:not([data-phone])) .band-theme{
  width: 32px; height: 32px; border-radius: 50%;
  border: var(--hair) solid color-mix(in srgb, var(--band-ink) 12%, transparent);
  background: color-mix(in srgb, var(--band-ground) 62%, transparent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  color: var(--band-ink);
}
:where(html:not([data-phone])) .band-door[data-label="glyph"]:hover, :where(html:not([data-phone])) .band-theme:hover{
  background: color-mix(in srgb, var(--band-ink) 8%, var(--band-ground));
}
:where(html:not([data-phone])) .band-door[data-label="glyph"] svg:not(.band-back){ width: 18px; height: 18px; }
:where(html:not([data-phone])) .band-search{
  height: 32px; border-radius: 16px;
  border: var(--hair) solid color-mix(in srgb, var(--band-ink) 12%, transparent);
  background: color-mix(in srgb, var(--band-ground) 62%, transparent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
:where(html:not([data-phone])) .band-search kbd{ border-radius: 999px; border-color: color-mix(in srgb, var(--band-ink) 12%, transparent); }

/* AWAY AS YOU READ, the phone (band.js awayAsYouRead, 29 Sep): the three glass pieces sink below the screen's edge */
html[data-phone] .band{ transition: transform .24s ease, opacity .24s ease; }
html[data-phone][data-away] .band{ transform: translateY(calc(100% + 8px)); opacity: 0; pointer-events: none; }
html[data-phone][data-away] .band *{ pointer-events: none !important; }
/* ON A BOOK THE PILL HOLDS THE ▶ at its left (shell.css): the title keeps the pill's centre with room each side */
html[data-phone] .band-pill[data-book]{ padding-left: 48px; padding-right: 48px; }
html[data-phone] .band-in{ position: relative; }
.band-play{ display: none; }
/* ▶ IS ALWAYS THERE ON A BOOK (PHONE-READ, ASKS #250): with a voice it is the filled disc; with none it is the same
   disc drawn as a ring, and its press says in one line that the book has no voice yet (band.js) -- the S0 Stranger
   pressed Play on every book and met a player that played nothing; hiding ▶ said nothing at all. */
html[data-phone] .band-play{
  display: grid; place-items: center; position: absolute; z-index: 2; pointer-events: auto;
  left: calc(var(--band-float) + var(--gap) + 6px); top: calc((var(--band-float) - 36px) / 2);
  width: 36px; height: 36px; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--band-ink); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--band-ink) 40%, transparent);
  opacity: .6; cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
html[data-phone][data-voice] .band-play{ background: var(--band-ink); color: var(--band-ground); box-shadow: none; opacity: 1; }
html[data-phone] .band-play svg{ width: 16px; height: 16px; display: block; margin-left: 2px; }
html[data-phone] .band-play:active{ transform: scale(.94); }
html[data-phone][data-playing] .band-play, html[data-phone][data-played] .band-play{ display: none; }   /* the capsule is up, with its own ▶ (ASKS #195) */
/* THE FOOT FADES UNDER THE GLASS (Photos does it too): on a book the lines ran on behind and between the three pieces
   and read as "things going over each other" (Osca, 29 Sep). A fade from nothing to the paper, the band's own height
   and a little more, so the last line visible ends cleanly above the glass. It goes away with the band as you read. */
html[data-phone] .band[data-book], html[data-phone] .band:has(.band-pill[data-book]){
  background: linear-gradient(to bottom, color-mix(in srgb, var(--band-ground) 0%, transparent) 0%,
    color-mix(in srgb, var(--band-ground) 82%, transparent) 38%, var(--band-ground) 100%);
  padding-top: 22px;
}
/* while the voice plays the player capsule stands over the row: the fade reaches up under it too (Stranger, 29 Sep:
   50 px of words showed between the capsule and the row) */
html[data-phone][data-playing] .band[data-book], html[data-phone][data-playing] .band:has(.band-pill[data-book]),
html[data-phone][data-played] .band[data-book], html[data-phone][data-played] .band:has(.band-pill[data-book]){ padding-top: 84px; }
/* ...AND NO FADE NOW (Osca, 11 Oct 23:27: "the entire bottom of the screen is blocked ... Change that so the text is ALL
   there, and the pill/buttons are glassy"): the book's band is the Library's -- three glass pieces over the words,
   nothing behind them. */
html[data-phone] .band[data-book], html[data-phone] .band:has(.band-pill[data-book]){ background: none; }

/* THE PHONE ON ITS SIDE (Osca, 29 Sep: landscape "for everything"): the three glass pieces keep a phone's width,
   centred, clear of the island's side -- not a capsule stretched across 852 px */
@media (orientation: landscape){ html[data-phone] .band-in{ max-width: 560px; margin: 0 auto; } }
html[data-phone][data-land] .band-in{ max-width: 560px; margin: 0 auto; }

/* ONE SEARCH BAR ON SCREEN, EVER (ASKS #29; Osca 28 Sep: "two search bars that look unrelated is a fault"; the Mac's
   decision of 18:00 -- the sheet's field is THE field). On the web the band's Search capsule stood live above the
   sheet's own field. While the sheet is up (html[data-sheet], surface.js) the band's capsule steps aside. */
html[data-sheet]:not([data-phone]) .band-search{ visibility: hidden; }
html[data-tf] .band{ visibility: hidden; }   /* Tell Frank is up: nothing over its Send (ASKS #134) */
/* THE CHAPTER IS SAID ONCE IN ONE WORD (ASKS #110, the one-word Stranger: "two chapter names on one screen"): the
   one-word view names the chapter above the word, so while the reader is at that level (html[data-axis], book-nav.js)
   the band carries the title alone. */
html[data-axis] .band-head i, html[data-axis] .band-head .band-cast{ display: none; }   /* the pill keeps its chapter in One word (Osca 14 Oct 14:01) */
/* ...and in the book, while the chapter's own heading is on screen (html[data-headseen], reader.html; ASKS #23) */
html[data-headseen] .band-head i, html[data-headseen] .band-pill i{ display: none; }
/* ...and on the Mac and the web the whole head while the book's title page is on screen (html[data-titleseen]; ASKS #80) */
html[data-titleseen]:not([data-phone]) .band-head{ visibility: hidden; }
/* THE BAR IS TINY (ASKS #139, Osca 29 Sep: "both are too big, the web edition's top bar and the Mac bar inside a
   book. Make both tiny"). Off the phone, the band is a 28 px row: the mark, the doors and the layer glyphs 22 with a
   14 glyph, the head's title and chapter 13, the search field 22. The phone's foot row is a thumb's and is untouched. */
html:not([data-phone]) .band{ --band-h: 28px; --band-mark: 22px; }
html:not([data-phone]) .band-mark{ width: 22px; height: 22px; }
html:not([data-phone]) .band-mark svg{ width: 16px; height: 16px; }
html:not([data-phone]) .band-door[data-label="glyph"], html:not([data-phone]) .band-theme{ width: 22px; height: 22px; box-shadow: none; }
html:not([data-phone]) .band-door[data-label="glyph"] svg:not(.band-back){ width: 13px; height: 13px; }
html:not([data-phone]) .band-head{ font-size: 13px; height: auto; }
html:not([data-phone]) .band-head b, html:not([data-phone]) .band-head i, html:not([data-phone]) .band-head .band-cast{ font-size: 13px; }
html:not([data-phone]) .band-search{ height: 22px; border-radius: 11px; font-size: 12.5px; }
html:not([data-phone]) .band-search svg{ width: 13px; height: 13px; }
/* B, NO CAPSULE (Osca, 11 Oct 12:08: "It is B on all"): the four solid glyphs stand free in the band, 16 px, 10 apart;
   the layer you are in is the accent, the others near-ink. No glass, no chip. */
html:not([data-phone]) .band .layers{ height: 28px; padding: 0; gap: 10px; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
html:not([data-phone]) .band .layers button{ width: 26px; height: 26px; border-radius: 7px; background: transparent; box-shadow: none;
  color: color-mix(in srgb, var(--chrome-fg) 70%, transparent); }
html:not([data-phone]) .band .layers button:hover{ color: var(--chrome-fg); }
html:not([data-phone]) .band .layers button[aria-checked="true"]{ color: var(--chrome-accent); background: transparent; box-shadow: none; }
html:not([data-phone]) .band .layers button svg{ width: 16px; height: 16px; }
/* (ASKS #138: the design-session glass rules above test the host inside :where(), so each costs what the editor's
   base edits cost -- apply.js's contract, "base beats the module's class rules by ORDER". The band's glass fill was
   0,2,1 and a Fill set in the editor lost to it. The tiny bar keeps its full selectors: it is the module's sizing.) */

/* ⚙ INSIDE A BOOK ON THE WEB (a Stranger, 30 Sep: "on the web there is no ⚙ inside a book"; Osca 28 Sep: Settings is
   always the furthest-right thing; #159: the ⚙ is the way in and out of Settings). The web's book band carries it at
   its far right, after the layers; the layers step left to make room. The Mac's ⚙ is the tab strip's; the phone's
   is the foot's. (The door lives in the left cluster for every host -- band.design.json -- so it is placed, not moved.) */
/* ...AND IT STANDS WHERE THE SHELF'S AND SETTINGS' ⚙ STANDS (ASKS #167, the Photos Stranger: "the ⚙ moves 60 px between
   reader and Settings, so the second press misses"). It was placed at the BAND's right (right: 12, x 1398 in a 1440
   window) while on the shelf and on Settings it ends the page's column (--band-measure, x 1338). It is placed against
   the column (.band-in) now, so it is the same x on every web page and a second press in the same place closes
   Settings. */
/* (not on the phone: the web edition on a phone is html[data-web] too, and its ⚙ is the foot's left circle -- ASKS #195) */
html[data-web]:not([data-phone]) .band[data-book] .band-in{ position: relative; }
html[data-web]:not([data-phone]) .band[data-book] [data-door="settings"]{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
html[data-web]:not([data-phone]) .band[data-book] .band-right{ margin-right: calc(22px + var(--band-gap, 12px)); }
/* THE ⚙'S HIT IS THE ROUND BUTTON'S 32 (ASKS #106: every free-standing round button is 32 on the Mac and the web),
   while the tiny bar (#139) keeps it DRAWN at 22 with its 13 glyph: the 5 px ring round it takes the press and
   draws nothing */
html[data-web]:not([data-phone]) .band-door[data-door="settings"]::before{ content: ""; position: absolute; inset: -5px; }
/* ONE FIELD ON THE PHONE (ASKS #158): a press on the pill raises the Surface's own field in the pill's place, its ×
   in the mic's (surface.css); while the sheet is up (html[data-sheet], surface.js) the band's three step aside, so
   the pill is never drawn as a second field under it */
html[data-phone][data-sheet] .band{ visibility: hidden; }

/* (the one-word "‹ Page" key that stood here is gone -- Osca, 14 Oct 14:01: the pill does not change in One word) */
/* REST (band.js, Osca 11 Oct 19:58): six seconds untouched and the floating things fade -- reader and Library,
   phone and Mac. They come back the moment you touch the screen. */
html[data-rest] :is(.band, .pplay, #mplay, .scrub2, .phlayers, .layernote, #phhead, #azidx){
  opacity: 0 !important; transition: opacity .9s ease !important; }   /* never on a wrapper (#bandHost): faded, a wrapper becomes its own layer and the bar falls under the covers */

/* J3 · the phone's three buttons: your picture (a menu upward), the pill, search. In Settings the picture is the
   gear, red. The search round wears the mic's place and glass, never its red. */
html[data-phone] .band .band-find[aria-pressed] { color: inherit; }
html[data-phone] .band-page-settings, html[data-phone] .band[data-page="settings"] [data-door="settings"] { color: var(--chrome-accent, #c02c46); }
.band-me { position: absolute; left: 12px; bottom: calc(100% + 10px); min-width: 210px; padding: 6px; border-radius: 16px; z-index: 5;
  background: color-mix(in srgb, var(--bg, #fff) 94%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--fg, #111) 12%, transparent); box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; color: var(--fg, #111); font: 400 15px / 1.3 var(--ui-font, -apple-system, system-ui, sans-serif); }
.band-me button { all: unset; cursor: pointer; padding: 11px 14px; border-radius: 10px; }
.band-me button:hover, .band-me button:focus-visible { background: color-mix(in srgb, var(--fg, #111) 7%, transparent); }
.band-me hr { border: 0; border-top: 1px solid color-mix(in srgb, var(--fg, #111) 10%, transparent); margin: 4px 8px; }
.band-me-who { padding: 8px 14px 6px; font-size: 12px; opacity: .6; }
.band-me-say { padding: 12px 14px; font-size: 13px; }
/* J4 / J9 · the Mac's and the browser's banner: the Surface door is its search glyph alone; no gear (Settings is in your
   picture's menu); communities, messages, the bell and your picture at the right; their panels drop down */
html:not([data-phone]) .band [data-door="surface"] > span{ display: none; }
html:not([data-phone]) .band [data-door="surface"] svg{ width: 16px; height: 16px; }
html:not([data-phone]) .band [data-door="settings"]{ display: none; }
.band-ic{ -webkit-appearance: none; appearance: none; border: 0; background: none; color: inherit; padding: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; }
.band-ic:hover{ background: color-mix(in srgb, currentColor 8%, transparent); }
.band-ic svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }   /* D112: drawn as lines, as the master's glyphs are (they were filled) */
.band-ic[aria-expanded="true"]{ color: var(--chrome-accent, #c02c46); }
html:not([data-phone]) .band-me{ left: auto; right: 12px; top: calc(100% + 8px); bottom: auto; }
.band-pop{ padding: 14px 16px !important; max-width: 300px; }
.band-pop b{ display: block; font-weight: 600; margin-bottom: 4px; }
.band-pop p{ margin: 0; opacity: .65; font-size: 14px; line-height: 1.45; }
/* J3 v2 (PORT-GAPS P2): the phone's picture is a black circle, your initial in it */
html[data-phone] .band:not([data-page="settings"]) [data-door="settings"]{ background: var(--chrome-fg, #17150f) !important; color: var(--chrome-bg, #fcfcfb) !important; border-color: transparent !important; }
.band-initial{ font: 600 17px/1 var(--chrome-ui-font, -apple-system, system-ui, sans-serif); }
/* L12: in the Mac app the people doors and your picture live in the title bar; the band's own stay for the web.
   (They are hidden, not removed: the title bar's press reaches them.) */
html[data-tauri]:not([data-phone]) .band-ic[data-bpop], html[data-tauri]:not([data-phone]) .band-me-b { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; }

/* J9 · THE WEB'S BANNER, AS THE MASTER DRAWS IT (D110, #m/WEB/library and #m/WEB/surface; Osca 17 Oct: frankwb.com is
   "the WHOLE browser from the master"). The master (16 Oct) is newer than the tiny bar (#139, 29 Sep), so on the WEB the
   band is the master's banner: the mark and "Frank" in the book serif at the left; one wide grey field, "Search Frank:
   books, people, voices, lines", in the middle; communities, messages and the bell as round grey buttons, and your
   picture as a dark circle with your initial, at the right. The Mac app's band (no data-web) keeps #139. */
html[data-web]:not([data-phone]) .band{ --band-h: 56px; height: 56px; background: var(--chrome-bg, #fcfcfb);
  border-bottom: 1px solid color-mix(in srgb, var(--chrome-fg, #17150f) 9%, transparent); }
html[data-web]:not([data-phone]) .band-in{ max-width: none; padding: 0 28px; grid-template-columns: minmax(150px, .85fr) minmax(0, 500px) minmax(150px, 1.15fr); }   /* the master sits the field a little left of centre */
html[data-web]:not([data-phone]) .band-left{ grid-column: 1 !important; width: auto !important; justify-content: flex-start !important; gap: 10px !important; }
html[data-web]:not([data-phone]) .band-head{ grid-column: 2 !important; }
html[data-web]:not([data-phone]) .band-right{ grid-column: 3 !important; }
/* the mark is Frank's own icon (the first run's), not the band's drawn WB */
html[data-web]:not([data-phone]) .band-mark{ width: 30px !important; height: 30px !important; margin: 0 !important; border-radius: 8px; background: url(icon-192.png) center / cover no-repeat !important; }
html[data-web]:not([data-phone]) .band-mark b{ display: none !important; }
html[data-web]:not([data-phone]) .band-name{ display: inline-block !important; font: 400 22px/1 var(--band-serif, 'Iowan Old Style', Palatino, Georgia, serif);
  letter-spacing: 0; margin: 0 !important; position: static !important; }
html[data-web]:not([data-phone]) .band-ic{ width: 30px !important; height: 30px !important; }
html[data-web]:not([data-phone]) .band-left [data-door]{ display: none !important; }   /* the master: no doors beside the name; in Settings your picture is the way back */
html[data-web]:not([data-phone]) .band-search{ grid-column: 2; width: 100%; height: 36px !important; border-radius: 18px !important; border: 0 !important;
  background: color-mix(in srgb, var(--chrome-fg, #17150f) 6%, transparent); padding: 0 16px; gap: 10px; font-size: 14px !important; cursor: text; }
html[data-web]:not([data-phone]) .band-search:hover{ background: color-mix(in srgb, var(--chrome-fg, #17150f) 9%, transparent); }
html[data-web]:not([data-phone]) .band-search:focus-within{ outline: none; background: color-mix(in srgb, var(--chrome-fg, #17150f) 9%, transparent); }
html[data-web]:not([data-phone]) .band-search svg{ width: 15px !important; height: 15px !important; transform: none; }
html[data-web]:not([data-phone]) .band-search kbd{ display: none; }
html[data-web]:not([data-phone]) .band-right{ gap: 10px; }
html[data-web]:not([data-phone]) .band-ic{ width: 30px; height: 30px; background: color-mix(in srgb, var(--chrome-fg, #17150f) 6%, transparent); color: var(--chrome-fg, #17150f); }
html[data-web]:not([data-phone]) .band-ic:hover{ background: color-mix(in srgb, var(--chrome-fg, #17150f) 11%, transparent); }
html[data-web]:not([data-phone]) .band-ic svg{ width: 16px; height: 16px; }
html[data-web]:not([data-phone]) .band-ic.band-me-b{ background: var(--chrome-fg, #17150f); color: var(--chrome-bg, #fcfcfb); margin-left: 6px; }
html[data-web]:not([data-phone]) .band-ic.band-me-b .band-initial{ font-size: 15px; }
/* in Settings your picture is the gear, red, on the light circle (J8): a press takes you back */
html[data-web]:not([data-phone]) .band[data-page="settings"] .band-ic.band-me-b{ background: color-mix(in srgb, var(--chrome-fg, #17150f) 6%, transparent); color: var(--chrome-accent, #c02c46); }
/* D111: with the Surface as the page (signed out), the banner and its drop-downs stand above it */
html[data-browser][data-web]:not([data-phone]) .band{ position: relative !important; z-index: 8100 !important; }
html[data-browser][data-web]:not([data-phone]) .band-search{ visibility: visible !important; }

/* D112 · THE BAR AGAINST THE MASTER, measured (#m/WEB/library at 1130 wide): the mark 23 px from the edge and your picture
   22 px from the other; the round buttons 30 with a 16 glyph drawn in lines, 10 apart; the bell's red dot when something
   is unread; your picture is your initial in the dark circle -- signed out, the outline figure in a grey one */
html[data-web]:not([data-phone]) .band{ padding: 0 !important; }
html[data-web]:not([data-phone]) .band-in{ padding: 0 22px 0 23px !important; }
html[data-web]:not([data-phone]) .band-right{ gap: 10px !important; }
html[data-web]:not([data-phone]) .band-search{ height: 32px !important; border-radius: 16px !important; }
.band-ic[data-bpop="bell"]{ position: relative; }
.band-ic[data-bpop="bell"][data-unread]::after{ content: ""; position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--chrome-accent, #c8102e); box-shadow: 0 0 0 1.5px var(--chrome-bg, #fcfcfb); }
html[data-web]:not([data-phone]) .band-ic.band-me-b:not(:has(.band-initial)){ background: color-mix(in srgb, var(--chrome-fg, #17150f) 6%, transparent); color: var(--chrome-fg, #17150f); }
html[data-web]:not([data-phone]) .band-ic.band-me-b .band-initial{ font: 600 14px/1 var(--chrome-ui-font, -apple-system, system-ui, sans-serif); }