/* StoreHub Labs, the page's look (app/public/shell/shell.css, lane labs-v1): the vercel skin's
   (prototype/labs-skin-vercel/shell/shell.css) less the mock's BackOffice pages, tester sheet and landing strip, with
   the readers' four remaining asks (docs/2026-11/labs-skins/receipts/PICK-SKIN.md): a firmer off switch, stronger
   supporting text, tighter coming-soon cards (and the WhatsApp preview's black bubbles, which no v1 screen shows).
   Part 1 is the frame, BackOffice v2's, copied with its values (backoffice-v2-webapp/src/components/SharedLayout:
   variables.less, Header.module.less, Sidebar.less, by way of prototype/styles.css): the #212121 header on its #3d3d3d
   wrap, the page's own 225 px #3d3d3d left menu with the #297acc current row, the drawer up to 991 px, the account
   block and its menu, the Intercom bubble and the one-line status.
   Part 2 is the Labs area, drawn to the Vercel and Geist sheet (docs/2026-11/labs-skins/receipts/SKIN-vercel.md):
   black on white, Geist in four sizes, 1 px lines in two greys, 8 px cards and image blocks, 6 px controls, no shadow
   but under the one thing that floats (the account menu), hard-edged food photos as the only colour, no accent. One
   thing moves: the switch (160 ms). Its parts: the tools' rows under Labs, the Labs header with the balance and
   Feedback, the catalogue's photo cards, the Deals Club card and the coming-soon cards, the tool panel (the lt-* look
   itself is tools-base.css's), the feedback and top-up sheets (in the flow under the header: they push the screen
   down), the Feedback and ideas list and the signed-out screen, all inside v2's 24 px page gutter. */

/* ================================ Part 1: the frame, BackOffice v2's ================================ */
:root {
  /* the BackOffice frame: v2's values (SharedLayout/variables.less, Sidebar.less, Badge.module.less) */
  --bo-head: #212121;       /* @header-bg */
  --bo-wrap: #3d3d3d;       /* @header-wrap-bg: the header's second row, the sidebar, the drawer */
  --bo-head-hover: #383838; /* @header-hover-bg, rgb(56, 56, 56) */
  --bo-row-hover: #303030;  /* a sidebar row under the pointer */
  --bo-rule: #5c5c5c;       /* the line over each sidebar row */
  --bo-icon: #969696;       /* a sidebar row's icon */
  --bo-quiet: #999999;      /* @bo-black-4: the header's words and icons */
  --bo-select: #297acc;     /* the current row */
  --bo-orange: #fa8c16;     /* colorPrimary: the NEW badge, a page's primary button */
  /* src/images/menu-toggler.png (18 x 13), as prototype/styles.css carries it */
  --toggler: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAANCAYAAACkTj4ZAAAAKElEQVR42mL8DwQMVAAsQMxIDYOYGKgEqGYQyGujYTQaRoMmjAACDABECAciu00L4gAAAABJRU5ErkJggg==");
  --f-text: #262626;
  --f-font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bar-h: 42px;            /* @header-height; two rows (84 px) up to 680 px */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bo-wrap); color: var(--f-text); font: 400 15px/1.45 var(--f-font); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ic { display: inline-block; flex: none; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }

/* ---------------- the frame: v2's header (Header.module.less) ---------------- */
.bar { position: sticky; top: 0; z-index: 40; background: var(--bo-wrap); color: #fff; font-family: var(--f-font); }
.bar-in { min-height: 42px; display: flex; align-items: flex-end; justify-content: space-between; background: var(--bo-head); }
.bar-left { flex: none; display: flex; align-items: center; }
.bar-right { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.bar-logo { flex: none; display: flex; align-items: center; width: 225px; height: 42px; padding: 0 7px; }
.bar-logo svg { display: block; width: 100%; height: auto; }
.hd-btn {
  flex: none; display: flex; align-items: center; gap: 8px; height: 42px; padding: 4px 15px; border: 0; border-radius: 0;
  background: transparent; color: var(--bo-quiet); font: 400 13px/1 var(--f-font); white-space: nowrap; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.hd-btn:hover { background: var(--bo-head-hover); color: #fff; }
.hd-lg { font-size: 18px; }
.hd-arrow { font-size: 14px; margin-left: 4px; }
.bar :focus-visible, .side :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* the toggler: in the header up to 991 px (sboHeaderToggler), at the sidebar's top above it (sbo-sidebar-toggler) */
.menu-btn {
  position: relative; flex: none; display: none; align-self: center; width: 30px; height: 30px; margin: 0 3px 0 10px; padding: 0;
  border: 0; border-radius: 0; background: #000 var(--toggler) no-repeat center; cursor: pointer; transition: opacity 120ms ease, transform 120ms ease;
}
.menu-btn:active { transform: scale(0.94); }
.side .menu-btn { display: block; width: 29px; height: 29px; margin: 15px 0 15px 175px; background-color: #1a1a1a; opacity: 0.5; }
.side .menu-btn:hover, .side .menu-btn:focus-visible { opacity: 1; }

/* ---------------- the frame: v2's sidebar (Sidebar.less) ---------------- */
.frame { display: flex; align-items: flex-start; min-height: calc(100vh - var(--bar-h)); }
.side {
  flex: none; position: sticky; z-index: 20; top: var(--bar-h); width: 225px; height: calc(100vh - var(--bar-h));
  overflow-x: hidden; overflow-y: auto; padding-bottom: 20px; background: var(--bo-wrap); color: #fff; font: 400 14px/20px var(--f-font);
}
.side-close { display: none; }
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu > li { border-top: 1px solid var(--bo-rule); }
.menu > li:first-child { border-top-color: transparent; }
.mi-row {
  display: flex; align-items: center; width: 100%; min-height: 42px; padding: 11px 7px; border: 0; border-radius: 0;
  background: var(--bo-wrap); color: #fff; font: 400 14px/20px var(--f-font); text-align: left; cursor: pointer;
  transition: background-color 120ms ease;
}
.mi-row:hover { background: var(--bo-row-hover); }
.mi-ic { flex: none; display: inline-flex; justify-content: center; width: 20px; margin-right: 8px; color: var(--bo-icon); }
.mi-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-row[aria-current="page"] { background: var(--bo-select); }
.mi-row[aria-current="page"] .mi-ic { color: #fff; }
/* Badge.module.less (NEW); 11 px here, 10 px in source, to keep the 11 px floor */
.badge {
  flex: none; display: flex; align-items: center; justify-content: center; min-width: 37.45px; margin: 0 2px 0 0; padding: 3px 5px;
  border-radius: 3px; background: var(--bo-orange); color: #fff1e8; font-size: 11px; font-weight: 600; line-height: 11px; text-transform: uppercase;
}
.scrim { position: fixed; z-index: 1000; inset: 0; background: rgba(0, 0, 0, 0.45); }
/* collapsed (v2's toggler above 991 px): a 35 px rail of icons; a row under the pointer opens out over the content */
@media (min-width: 992px) {
  .side.is-collapsed { width: 35px; overflow: visible; }
  .side.is-collapsed .menu-btn { margin: 15px 3px; }
  .side.is-collapsed .menu > li { width: 35px; overflow: hidden; }
  .side.is-collapsed .menu > li:hover, .side.is-collapsed .menu > li:focus-within { overflow: visible; }
  .side.is-collapsed .mi-row { width: 236px; }
  /* a tool's row under Labs folds to its icon, centred in the rail; its name stays for a screen reader */
  .side.is-collapsed .tool-items > li { width: 35px; }
  .side.is-collapsed .sub-row { justify-content: center; width: 35px; padding: 0; }
  .side.is-collapsed .sub-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------------- up to 991 px: the menu hides behind its toggler, in v2's drawer (225 px, #3d3d3d, over a mask) ---------------- */
@media (max-width: 991px) {
  .bar .menu-btn { display: block; }
  .side {
    position: fixed; z-index: 1001; top: 0; left: 0; bottom: 0; width: 225px; height: auto; padding-bottom: 20px;
    transform: translateX(-100%); visibility: hidden;
    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 300ms;
  }
  body.menu-open .side {
    transform: none; visibility: visible; box-shadow: 6px 0 16px 0 rgba(0, 0, 0, 0.08);
    transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
  }
  /* the drawer's own head: a 42 px row with its close toggler at the right (sbo-sidebar-mobile-header) */
  .side-top { display: flex; align-items: center; justify-content: flex-end; height: 42px; padding: 0 10px; border-bottom: 1px solid var(--bo-rule); }
  .side-close { display: block; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0; background: #1a1a1a var(--toggler) no-repeat center; cursor: pointer; }
  .menu > li:first-child { border-top-color: transparent; }
  .content { padding: 28px 24px 56px; }
}
/* a narrow header's right half takes a second row on the wrap's grey (Header.module.less does it at 550 px, where its
   user block drops the name; the account block keeps the name, so it wraps from 680 px) */
@media (max-width: 680px) {
  :root { --bar-h: 84px; }
  .bar-in { flex-wrap: wrap; align-items: flex-start; }
  .bar-right { width: 100%; justify-content: flex-end; background: var(--bo-wrap); }
}

/* ---------------- the frame: the account block is v2's user block (tester-badge), the business's name in it ---------------- */
.tester-badge { flex: 0 1 auto; min-width: 0; gap: 6px; margin-right: 7px; }
.tester-badge b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #fff; }
.tester-badge[aria-expanded="true"] { background: var(--bo-head-hover); color: #fff; }
@media (max-width: 600px) {
  .tester-badge { padding: 4px 10px 4px 12px; }
}
/* its menu: a white card under the block, the business and the email, one line, Disconnect; the one thing that floats */
.account {
  position: fixed; z-index: 50; width: min(320px, calc(100vw - 16px)); padding: 16px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); box-shadow: var(--sheet-shadow); color: var(--text);
  font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
.account:focus { outline: none; }
.account-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.account-biz { overflow: hidden; color: var(--ink); font: 600 16px/1.5 var(--sans); letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.account-mail { overflow: hidden; color: var(--muted); font: 400 12px/1.5 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.account-line { margin: 12px 0; color: var(--muted); font: 400 14px/1.5 var(--sans); text-wrap: pretty; }
.account-off { width: 100%; }

/* ---------------- the frame while the page asks who she is, and when it stands alone (signed out) ---------------- */
.is-loading .side, .is-loading .intercom, .is-loading .menu-btn { visibility: hidden; }
.is-out .side, .is-out .scrim, .is-out .menu-btn, .is-out .bar-right, .is-out .intercom, .is-out .say, .is-out .account { display: none !important; }
.is-out { --bar-h: 42px; }   /* the header keeps one row: nothing sits at its right */

/* ---------------- the Intercom bubble: BackOffice's own, drawn plain; above everything ---------------- */
.intercom {
  position: fixed; z-index: 9999; right: 16px; bottom: 16px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform 120ms ease;
}
.intercom::after { content: ''; position: absolute; inset: 0; } /* the hit box is the bubble's whole square, so its corners land on it too */
.intercom svg { width: 30px; height: 30px; pointer-events: none; }
.intercom .bubble { fill: currentColor; }
.intercom .lines { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.intercom:active { transform: scale(0.94); }
/* the one-line status ("Chat is off in this mock", "No payment in this mock", "Not in this mock"): over the drawer and its
   mask, under the Intercom bubble */
.say {
  position: fixed; z-index: 1002; top: calc(var(--bar-h) + 12px); right: 16px; max-width: calc(100vw - 32px); padding: 8px 16px; border-radius: 6px;
  background: var(--ink); color: #fff; font: 500 13px/1.3 var(--sans); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease;
}
.say.is-on { opacity: 1; transform: none; }
.say--chat { top: auto; right: 84px; bottom: 28px; max-width: calc(100vw - 100px); transform: translateX(6px); }

/* ================================ Part 2: the Labs area, the Vercel and Geist sheet ================================ */
:root {
  /* the greys: black on white, nothing tinted. Supporting text is a step firmer than the skin's (#666 and #8f8f8f): the
     readers' ask; #4d4d4d is 8.5:1 on white and #737373 4.7:1 */
  --ink: #000;          /* titles, primary fills */
  --text: #171717;      /* body */
  --muted: #4d4d4d;     /* secondary: card lines, status words, leads */
  --faint: #737373;     /* tertiary, placeholders */
  --line: #ebebeb;      /* every border */
  --line-2: #d4d4d4;    /* hover and focus borders */
  --fill: #f5f5f5;      /* hover fills */
  --subtle: #fafafa;    /* quiet grounds: a table's head, a thumbnail's backing, a sheet's foot */
  --bg: #ffffff;        /* the ground */
  /* no accent: semantic only */
  --good: #1a7f37;
  --good-bg: #eef8f0;
  --good-line: #b8dfc3;
  --warn: #9a6700;
  --warn-bg: #fff8e6;
  --warn-line: #f0d28a;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sheet-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);   /* the one shadow: under the account menu, the one thing that floats */
}

/* ---------------- the tools' rows under Labs: v2's own sub-row, a v2 icon in the frame's row icon slot ---------------- */
.sub-row {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 12px 0 36px; border: 0; border-radius: 0;
  background: var(--bo-wrap); color: rgba(255, 255, 255, 0.8); font: 400 14px/20px var(--f-font); text-align: left; cursor: pointer;
}
.sub-row:hover { background: var(--bo-row-hover); }
.tool-items > li.is-current > .sub-row { background: var(--bo-select); color: #fff; }
.sub-row > .mi-ic { margin-right: 0; }
.tool-items > li.is-current > .sub-row > .mi-ic { color: #fff; }
.sub-thumb { flex: none; display: block; width: 20px; height: 20px; border-radius: 4px; background: var(--bo-row-hover); object-fit: cover; }   /* a tool without a v2 icon of its own */
.sub-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- the content area: flat white, Geist, every number tabular ---------------- */
/* v2's 24 px page gutter (its pages' PageContainer, the Products page's x 249 at 1440) at every width, so the Labs
   header row, the catalogue, the tool panel and the entries page start and end on BackOffice's own edges; 16 px at 600
   and under. Inside it they take the whole width, as v2's pages do */
.content {
  flex: 1; min-width: 0; align-self: stretch; padding: 24px 24px 96px; overflow-x: clip; background: var(--bg); color: var(--text);
  font: 400 14px/1.5 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
/* 96 px at the foot on every screen, so the last control clears the Intercom bubble */
main.content { padding-bottom: 96px; }
@media (max-width: 600px) { .content { padding: 16px 16px 96px; } }
/* the sheet's three icons (app.js glyph): 16 px, a 1.5 px stroke, round caps and joins, the colour of their words */
.icon { flex: none; display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- the controls: primary, secondary (40 px, 32 in a header row and a card's control row), quiet ---------------- */
.btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: 500 14px/1 var(--sans);
  white-space: nowrap; cursor: pointer;
}
.btn:hover { border-color: var(--line-2); background: var(--subtle); }
.btn--primary { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn--primary:hover { border-color: #333; background: #333; }
.btn--32 { height: 32px; padding: 0 12px; }
.btn--28 { height: 28px; padding: 0 10px; }
.btn-quiet {
  flex: none; padding: 0; border: 0; background: none; color: var(--muted); font: 500 14px/1.5 var(--sans); cursor: pointer;
  text-underline-offset: 4px;
}
.btn-quiet:hover { color: var(--text); text-decoration: underline; }

/* ---------------- the Labs header: where you are at the left; the balance and Feedback at the right ---------------- */
/* its 24 px title is the screen's one title (a tool's step title is a 16 px subhead in its head row); under 600 px the
   crumb takes a row of its own and the balance and Feedback the row under it (the widths at the end of Part 2) */
.lh {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px;
  margin: 0 0 24px; border-bottom: 1px solid var(--line);
}
.lh-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lh-crumb > .icon { color: var(--faint); }
.lh-title { margin: 0; color: var(--ink); font: 600 24px/1.25 var(--sans); letter-spacing: -0.02em; }
.lh-here { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-right { flex: none; display: flex; align-items: center; gap: 8px; }
/* the balance: a secondary-shaped chip, the number at 14 and its word at 12 on one baseline */
.credits {
  flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); white-space: nowrap;
}
.credits-v { line-height: 1; }
.credits-n { color: var(--text); font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.credits-unit { color: var(--muted); font: 500 12px/1 var(--sans); }
/* below zero (a refunded pack takes its credits back): the warning pair */
.credits.is-short { border-color: var(--warn-line); background: var(--warn-bg); }
.credits.is-short .credits-n, .credits.is-short .credits-unit { color: var(--warn); }
.lh-feedback[aria-expanded="true"], .lh-feedback[aria-expanded="true"]:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------------- the catalogue: photo cards on a strong grid, then coming soon ---------------- */
.catalogue { container: cat / inline-size; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.section-head { margin: 48px 0 16px; color: var(--text); font: 600 16px/1.5 var(--sans); letter-spacing: -0.01em; }
.card {
  display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  overflow: hidden;
}
.card.is-on { border-color: var(--line-2); }
/* the photo fills the card's top, hard-edged: no inset, no frame, no rounding of its own (the card clips it). It sits out
   of flow, so the block's ratio holds whatever the photo's own (a 3:4 poster crops to the square like the rest) */
.card-media { position: relative; aspect-ratio: 1 / 1; background: var(--subtle); }
.card-media > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.card-body { flex: 1; display: flex; flex-direction: column; padding: 16px; }
.card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.card-name { margin: 0; color: var(--ink); font: 600 16px/1.5 var(--sans); letter-spacing: -0.01em; }
.card-line { margin: 0 0 12px; color: var(--muted); font: 400 14px/1.5 var(--sans); text-wrap: pretty; }
/* the control row, 32 px: the switch centred in it, its status word, and Open at the right while the switch is on (a
   32 px secondary, the next thing to do), so the card keeps its height when Open joins */
.card-row { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-top: auto; }
.status { min-width: 0; color: var(--muted); font: 400 14px/1.5 var(--sans); }
.is-on .status { color: var(--text); }
.open { margin-left: auto; }
/* a tool the server keeps closed (Clips open soon): its photo quieter, its switch disabled (below) */
.card.is-shut .card-media > img { filter: grayscale(1); opacity: 0.7; }
/* the Deals Club: the one card that leaves the page. Its block is the card's mark set in ink, the site's name under it;
   its way out a 32 px secondary with the arrow out */
.card-media--deals { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--ink); color: #fff; }
.deals-mark { font: 600 24px/1.25 var(--sans); letter-spacing: -0.02em; text-align: center; }
.deals-site { color: rgba(255, 255, 255, 0.72); font: 400 14px/1.5 var(--sans); }
.deals-open { gap: 6px; color: var(--text); text-decoration: none; }
.deals-open .icon { color: var(--muted); }
/* coming soon, tighter: no picture; a row each, the name over its line at the left and Notify me at the right, two
   to a row, 12 px apart (one to a row under 600 px of catalogue) */
.grid--soon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card--soon { flex-direction: row; align-items: center; gap: 16px; padding: 12px 16px; }
.soon-text { flex: 1; min-width: 0; }
.card--soon .card-name { color: var(--text); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.card--soon .card-line { margin: 0; }
.notify { flex: none; }
.notify .icon { display: none; }
.notify[aria-pressed="true"], .notify[aria-pressed="true"]:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.notify[aria-pressed="true"] .icon { display: block; }
/* the catalogue lays out by its own width: two columns at 1000 px and under, one under 600 px (the photo then 16:9) */
@container cat (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container cat (max-width: 599px) {
  .grid, .grid--soon { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .grid--soon { gap: 8px; }
  .card-media { aspect-ratio: 16 / 9; }
  .card--soon { gap: 12px; padding: 12px; }
}

/* ---------------- the switch: the one thing that moves (the knob 160 ms, the track's fill and line 160 ms) ---------------- */
/* 40 x 22, a 6 px track, a 4 px knob. Off is firm, not faint (the readers' ask): a white track in a mid-grey line
   (#737373, 4.7:1) and the ink knob at the left, so it reads as a control that is off and never as one that is
   disabled. On: the track and its line in ink, the white knob 18 px to the right. Disabled (a closed tool): the pale
   track, line and knob, and no pointer */
.switch {
  position: relative; flex: none; width: 40px; height: 22px; padding: 0; border: 1px solid var(--faint); border-radius: 6px;
  background: var(--bg); cursor: pointer; transition: background-color 160ms, border-color 160ms;
}
.switch:hover { border-color: var(--ink); }
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border: 1px solid var(--ink); border-radius: 4px;
  background: var(--ink); transition: transform 160ms, border-color 160ms, background-color 160ms;
}
.switch .word { display: none; }   /* the engine's word for the state; the status beside the switch is what shows */
.switch[aria-checked="true"], .switch[aria-checked="true"]:hover { border-color: var(--ink); background: var(--ink); }
.switch[aria-checked="true"] .knob { transform: translateX(18px); border-color: var(--bg); background: var(--bg); }
.switch[disabled], .switch[disabled]:hover { border-color: var(--line); background: var(--fill); cursor: not-allowed; }
.switch[disabled] .knob { border-color: var(--line-2); background: var(--line-2); }

/* ---------------- the tool, inside BackOffice: a white panel; the tool's lt-* look is tools-base.css's ---------------- */
/* the panel clips its tool at its 8 px corners: clip, not hidden, so the tool's sticky bars still stick to the window */
.tool-area { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: clip; }
.tool-area:focus { outline: none; }
/* nothing a tool stacks can rise over the Intercom bubble or the header's sheets */
.tool-area { isolation: isolate; }
.tool-area .lt {
  --lt-surface: var(--bg);
  --lt-ink: var(--ink);
  --lt-text: var(--text);
  --lt-muted: var(--muted);
  --lt-faint: var(--faint);
  --lt-line: var(--line);
  --lt-line-2: var(--line-2);
  --lt-fill: var(--fill);
  --lt-subtle: var(--subtle);
  --lt-on-ink: #fff;
  --lt-ink-hover: #333;
  --lt-good: var(--good);
  --lt-good-bg: var(--good-bg);
  --lt-good-line: var(--good-line);
  --lt-warn: var(--warn);
  --lt-warn-bg: var(--warn-bg);
  --lt-warn-line: var(--warn-line);
  --lt-font: var(--sans);
  --lt-size-xs: 12px;
  --lt-size-s: 14px;
  --lt-size-m: 14px;
  --lt-size-l: 16px;
  --lt-size-xl: 24px;
  --lt-radius: 8px;
  --lt-radius-pill: 6px;
  --lt-radius-small: 4px;
  --lt-shadow: none;
}
/* the tool's status line stops under the frame's header */
.tool-area .lt .lt-toast { top: calc(var(--bar-h) + 12px); }
/* the run: its cost rides in the black primary as quiet words, no pill */
.tool-area .lt .lt-cost { flex: none; color: rgba(255, 255, 255, 0.7); font: 500 12px/1 var(--sans); white-space: nowrap; }
.tool-area .lt .lt-primary[disabled] .lt-cost { color: inherit; }
.tool-fail { margin: 0; padding: 48px 24px; color: var(--muted); font: 400 14px/1.5 var(--sans); text-align: center; }
/* a pinned full-width action bar on a window wider than a phone keeps a lane clear for the bubble at its right */
@media (min-width: 601px) {
  @container lt (max-width: 720px) {
    .tool-area .lt .lt-actions { padding-left: 72px; padding-right: 72px; }
  }
}

/* ---------------- the sheets that drop from the header (feedback, top-up): in the flow, they push the screen down ---------------- */
/* the slot under the header: a sheet spans the content width, on the catalogue's
   and the tool panel's edges, 24 px under the header's line, and the catalogue or the tool moves down beneath it, 24 px
   under it; nothing floats, so no shadow, the 1 px line and 8 px corners only. Its title, its body (two columns, one under
   720 px of content width), its foot with its one way out. app.js fit() caps its height so its foot stays 132 px above
   the window's (it scrolls inside past that) */
.drops { container: sheet / inline-size; }
.drops:empty { display: none; }
.drop {
  display: block; width: 100%; margin: 0 0 24px; padding: 24px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--sans);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-y: auto; overscroll-behavior: contain;
}
.drop:focus { outline: none; }
.drop-title { margin: 0; color: var(--ink); font: 600 16px/1.5 var(--sans); letter-spacing: -0.01em; }
.drop-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 16px; }
.drop-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin: 24px -24px -24px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--subtle);
}
.drop-acts { display: flex; gap: 8px; margin-left: auto; }
/* while a sheet is open the screen below it waits: inert (app.js openDrop), and dimmed to say so */
.catalogue[inert], .tool-area[inert] { opacity: 0.4; }
/* feedback: at the left the kind as a segmented control and the note; at the right an optional vote; Cancel and Send in
   the foot; then the thank-you */
.seg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; height: 32px; margin: 0 0 12px; padding: 2px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
}
.seg-cell {
  min-width: 0; padding: 0 8px; border: 0; border-radius: 4px; background: none; color: var(--muted); font: 500 14px/1 var(--sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.seg-cell:hover { color: var(--text); }
.seg-cell[aria-pressed="true"] { background: var(--ink); color: #fff; }
.field {
  display: block; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--sans);
}
.field::placeholder { color: var(--faint); opacity: 1; }
.field:focus { border-color: var(--line-2); }
.field.is-refused { border-color: var(--warn-line); }   /* a refused submit: 1.2 s of the warning line, and nothing moves */
textarea.field { resize: vertical; }
.fb-label { margin: 0 0 8px; color: var(--muted); font: 500 12px/1.5 var(--sans); }
.fb-votes { display: flex; flex-wrap: wrap; gap: 8px; }
.vote {
  height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text);
  font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer;
}
.vote:hover { border-color: var(--line-2); background: var(--subtle); }
.vote[aria-pressed="true"], .vote[aria-pressed="true"]:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.fb-thanks { text-wrap: pretty; }
/* top-up: the line at the left, the three packs in a row at the right, the test-mode note and Cancel in the foot. A pack
   is a thing to buy: the credits at its top, at its foot a full-width 32 px secondary row with the price; on hover the
   pack's line lifts and the row goes ink */
.drop--topup .drop-body { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 16px 12px; }
.tu-line { margin: 0; color: var(--text); font: 400 14px/1.5 var(--sans); text-wrap: pretty; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pack {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--text); text-align: left; cursor: pointer;
}
.pack-top { display: flex; align-items: baseline; gap: 6px; }
.pack-n { color: var(--ink); font: 600 24px/1.25 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pack-unit { color: var(--muted); font: 400 12px/1.5 var(--sans); }
.pack-add {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pack:hover { border-color: var(--line-2); }
.pack:hover .pack-add { border-color: var(--ink); background: var(--ink); color: #fff; }
.tu-note { flex: 1 1 200px; min-width: 0; margin: 0; color: var(--muted); font: 400 12px/1.5 var(--sans); }
/* a pack's answer when checkout cannot open (Payments open soon): the note in ink, 14/500 */
.tu-note.is-said { color: var(--text); font: 500 14px/1.5 var(--sans); }
/* under 720 px of content width, one column: the line over the packs, the packs one under another, tighter, so the sheet
   holds its foot on a phone without scrolling inside */
@container sheet (max-width: 719px) {
  .drop-body, .drop--topup .drop-body, .packs { grid-template-columns: minmax(0, 1fr); }
  .packs { gap: 8px; }
  .pack { gap: 8px; padding: 12px; }
}

/* ---------------- the entries page: a table of every note sent from this browser, newest first ---------------- */
.entries-top { margin-bottom: 16px; }
.entries-box { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; }
.entries-table { width: 100%; border-collapse: collapse; }
.entries-table th {
  height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--subtle); color: var(--muted);
  font: 500 12px/1.5 var(--sans); text-align: left; white-space: nowrap;
}
.entries-table td { height: 48px; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.entries-table tbody tr:last-child td { border-bottom: 0; }
/* every column but the note's holds its width, so the note takes what is left */
.e-type { width: 120px; }
.e-note { color: var(--text); font: 400 14px/1.5 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.e-vote { width: 240px; color: var(--muted); font: 400 14px/1.5 var(--sans); }
.e-meta { width: 160px; color: var(--muted); font: 400 12px/1.5 var(--sans); white-space: nowrap; }
.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 500 12px/1 var(--sans); white-space: nowrap;
}
.entries-empty { margin: 0; padding: 24px 16px; color: var(--muted); font: 400 14px/1.5 var(--sans); }

/* ---------------- the screen that stands alone: signed out (or Labs could not open), one title and one line ---------------- */
.out { max-width: 560px; margin: 0 auto; padding: 96px 0 48px; text-align: center; }
.out-title { margin: 0; color: var(--ink); font: 600 24px/1.25 var(--sans); letter-spacing: -0.02em; text-wrap: balance; }
.out-line { margin: 12px 0 0; color: var(--muted); font: 400 16px/1.5 var(--sans); text-wrap: pretty; }
.is-out .content { background: var(--bg); }

/* ---------------- widths: at 600 px and under ---------------- */
@media (max-width: 600px) {
  /* the Labs header in two rows, its line under both: the crumb on a row of its own, so a tool's name shows in full (two
     lines at most, Labs and the chevron on the first), then the balance and Feedback at the right of the row under it */
  .lh { flex-wrap: wrap; gap: 8px 12px; padding: 4px 0 12px; }
  .lh-crumb { flex: 1 1 100%; align-items: flex-start; }
  .lh-title { font-size: 20px; }
  .lh-crumb > .lh-back { line-height: 25px; }
  .lh-crumb > .icon { margin-top: 4.5px; }
  .lh-here { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; text-overflow: clip; }
  .lh-right { margin-left: auto; }
  .drop { padding: 16px; }
  .drop-foot { margin: 16px -16px -16px; padding: 12px 16px; }
  .entries-table thead { display: none; }
  .entries-table, .entries-table tbody, .entries-table tr, .entries-table td { display: block; }
  .entries-table tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .entries-table tbody tr:last-child { border-bottom: 0; }
  .entries-table td { width: auto; height: auto; padding: 0; border: 0; }
  .entries-table td:empty { display: none; }
  .entries-table td + td { margin-top: 4px; }
  .entries-table td.e-meta { display: inline-block; margin-right: 8px; }
  .out { padding: 56px 0 32px; text-align: left; }
  .out-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}