/* Royal Trees Hub: the website's look (tokens and components from the redesign mockup, hub-mockup.html .hub).
   Two looks, chosen per device under "Look" in each person's menu (js/look.js): Light (the default: the website's
   paper, forest and moss, warmed on Oct 11, 2026) and Dark (near-black with a green tint, white-ish words, one green
   accent; Brandon, Oct 11, 2026). Switching looks changes colours only: the same fonts, sizes and shapes. The shapes
   and the way round (Hub look, PR B, Oct 11, 2026): a floating bar at the bottom of a phone, a sidebar on a computer
   (900 px and wider), pill buttons, rounder cards, chips and fields (the --r-* sizes below). Printing is
   always black on white. Type sizes are in rem so a bigger text size on the office PC scales them: 16 px = 1rem,
   18 px = 1.125rem. Colours come only from the tokens below, and rules use the "what it's for" tokens (and the status
   colours), never the palette directly, so the dark look only has to say what each one is in the dark
   (test/web/look.test.mjs checks this, and every text colour's contrast in both looks). In Light, forest is the accent:
   the dash before a label, the line under the current tab, the focus ring, and the one send or save button on a
   screen; in Dark that accent is blue.
   Redesign round 5 (Brandon, Oct 13, 2026): no orange anywhere, and no yellow or green in Dark. Alerts are quiet in
   both looks: the words stay the normal text colour with a small muted-red dot in front (--alert), count badges are
   muted-red circles with white numbers, and nothing that needs you has a coloured background.
   Hub polish, phase 1 (Oct 11, 2026; Brandon: "get everything looking like it was made in 2026"): one type scale
   (section and card titles in sentence case at about 18 px bold, body 16 px, quiet notes 14 px in the softer colour,
   big numbers in Barlow Condensed), no capital-letter titles, soft solid lines instead of dashed ones, no coloured
   stripes down the side of cards and banners, and the shared pieces every screen builds with: the icon chip, the
   initials avatar, the list row with its chevron, the card head and the friendly empty state ("shared pieces" below).
   Round 5 (Oct 13, 2026, the "Design match" blocks at the end) draws the screens as Brandon's mockup, with its Barlow
   capitals on the crew's buttons, the screen names and the big labels. */

/* ---------- fonts: the website's own files, first party, with system fallbacks ---------- */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("https://royaltreesllc.com/wp-content/themes/royal-trees/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("https://royaltreesllc.com/wp-content/themes/royal-trees/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("https://royaltreesllc.com/wp-content/themes/royal-trees/assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("https://royaltreesllc.com/wp-content/themes/royal-trees/assets/fonts/work-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("https://royaltreesllc.com/wp-content/themes/royal-trees/assets/fonts/work-sans-latin-600-normal.woff2") format("woff2"); }

/* ---------- tokens: Light (the default) ---------- */
:root {
  color-scheme: light;
  /* The palette. Paper, card and paper-2 are warmer from Oct 11, 2026 ("between 3000K and 4000K"; they were #f7f3e8,
     #fbf8f0 and #efe8d6), and the tints that sit on them are warmed to match. */
  --rt-forest: #15301b; --rt-forest-deep: #0f2414; --rt-moss: #244d2e; --rt-sage: #668c66; --rt-mist: #b0cea9;
  --rt-paper: #fdefcc; --rt-paper-2: #f5e4b9; --rt-burlap: #d8c6a0; --rt-bark: #5b4330; --rt-flag: #e0582c;
  --rt-ink: #1a2a1d; --rt-soft: #3f4d41; --rt-muted: #4f5c50; --rt-line: rgba(21, 48, 27, .16); --rt-cream-soft: #e2d6b8;
  --rt-card: #fff8e8; --rt-white: #ffffff; --rt-edge: #668c66; --rt-flag-deep: #c8481f; --rt-flag-ink: #a93a14;
  /* Status colours: one meaning each, so each has its own dark value below. */
  --rt-live: #7bc47f; --rt-stale: #b94a4a; --rt-down: #b94a4a;
  --rt-ok: #1f4a2b; --rt-ok-bg: #e1ecd7; --rt-warn: #1a2a1d; --rt-warn-bg: rgba(21, 48, 27, .05); --rt-attn: #1a2a1d; --rt-attn-bg: rgba(21, 48, 27, .05);
  --rt-bad: #9f1d12; --rt-bad-bg: #fae3df; --rt-neutral: #3f4d41; --rt-neutral-bg: #efe3c5;
  --rt-blank: #ffe27a; --rt-blank-line: #7a5c00; --rt-dot: #3d8a47; --rt-scrim: rgba(15, 36, 20, .55);
  --rt-stripe: rgba(216, 190, 136, .16); --rt-shine: rgba(255, 255, 255, .55); --rt-hover: rgba(21, 48, 27, .06);
  --rt-tag: #f4a6c4; --rt-tag-ink: #0b1622; --rt-tag-zone: rgba(255, 255, 255, .3); /* the pink 10 x 1 in tree tag (Oct 15, 2026) in Tree tags' preview: the same in both looks */
  /* Replies (Oct 11, 2026): the drafted reply's green bubble. */
  --draft: rgba(36, 77, 46, .07); --draft-line: rgba(36, 77, 46, .34);
  /* What each colour is for. */
  --bg: var(--rt-paper); --surface: var(--rt-card); --surface-2: var(--rt-paper-2); --text: var(--rt-ink); --text-2: var(--rt-soft);
  --text-3: var(--rt-muted); --heading: var(--rt-forest); --label: var(--rt-moss); --border: var(--rt-line); --border-strong: var(--rt-edge);
  --focus: var(--rt-forest);
  --accent: var(--rt-forest);         /* the dash before a label, the line under the current tab or menu item */
  --alert: #b94a4a; --on-alert: #ffffff; /* the small muted-red dot before words that need you, and count badges (white numbers) */
  --attn-line: var(--alert);          /* the edge of a card, banner or chip that needs you; a problem toast */
  --link: var(--rt-moss);             /* green words and marks: links, Change, quantities, chevrons, a kind's outline */
  --link-line: var(--rt-burlap);      /* the line under a link-style button; a tab's hover line */
  --calm-line: var(--rt-burlap);      /* the edge of a calm card; under the practice strip */
  --muted-line: var(--rt-cream-soft); /* the lines of a greyed-out triangle view */
  --field: var(--rt-white);           /* fields, segmented choices, white blocks on a card */
  --chip: var(--surface);             /* a filter chip that isn't chosen */
  --ink-strong: var(--rt-forest);     /* an outline button's words; a field's border while typing */
  --btn-line: var(--rt-edge);         /* an outline button's border (sage: softer than the words, Hub polish) */
  --solid: var(--rt-forest); --on-solid: var(--rt-paper); --solid-hover: var(--rt-moss); /* a main button, a count badge, the Transplant pill */
  --pick: var(--rt-forest); --on-pick: var(--rt-paper); --on-pick-2: var(--rt-mist);     /* the chosen chip, segment or toggle */
  --go: var(--rt-forest);             /* a switch that is on; a ticked box */
  --track: var(--rt-cream-soft); --knob: var(--rt-white); /* a switch that is off */
  --bar: var(--rt-forest); --on-bar: var(--rt-paper); --on-bar-2: var(--rt-mist); --bar-line: rgba(253, 239, 204, .55); --bar-hover: var(--rt-moss); /* header bands */
  --toast: var(--rt-forest-deep); --on-toast: var(--rt-paper); --toast-line: var(--rt-mist);
  --cta: var(--rt-forest); --on-cta: var(--rt-paper); --cta-hover: var(--rt-moss); /* the one send or save button */
  --yard-tag: var(--rt-burlap); --on-yard-tag: var(--rt-forest); /* the date tag beside a title */
  --bark-ink: var(--rt-bark);         /* Delivery and Text outlines; the money-to-collect box */
  --on-blank: var(--rt-bark);         /* the words in a highlighted blank of a draft (yellow in Light, blue in Dark) */
  --card-rule: var(--rt-soft);        /* the lines inside an audience card */
  --spin: rgba(36, 77, 46, .25); --x-hover: rgba(0, 0, 0, .07);
  --float: var(--surface);            /* the phone's floating bar */
  --side: var(--surface);             /* the computer's sidebar */
  --glow: rgba(36, 77, 46, .14);      /* the soft light at the top of Brandon's today card */
  --nav-tint: rgba(36, 77, 46, .12);  /* behind the current tab's drawing in the bar; its words and drawing are --link */
  --sh-float: 0 12px 30px -14px rgba(21, 48, 27, .4);
  /* The hero (the calm redesign, Oct 16, 2026): the one big card at the top of a screen, and the button on it. */
  --hero: var(--rt-forest); --on-hero: var(--rt-paper); --on-hero-2: var(--rt-mist); --hero-line: rgba(253, 239, 204, .4);
  --hero-btn: var(--rt-paper); --on-hero-btn: var(--rt-forest); --hero-btn-hover: var(--rt-white);
  /* Motion (the calm redesign): a press, a screen, a sheet; the curves of a settle and of a sheet. */
  --t-press: .12s; --t-screen: .22s; --t-sheet: .28s; --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --rt-cond: "Barlow Condensed", "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --rt-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rt-serif: Georgia, "Times New Roman", serif;
  --sh-lift: 0 18px 40px -22px rgba(21, 48, 27, .45); --sh-sheet: 0 -12px 40px -16px rgba(15, 36, 20, .55);
  --sh-toast: 0 10px 28px -12px rgba(0, 0, 0, .55);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* The phone's floating bar: 68 px tall, 18 px above the bottom plus the phone's own safe area. --bar-room is the
     whole space it takes from the bottom of the screen: the page, the Send rows and the toasts all keep clear of it. */
  --nav-h: 68px;
  --bar-gap: calc(18px + env(safe-area-inset-bottom, 0px));
  --bar-room: calc(var(--nav-h) + var(--bar-gap));
  --side-w: 248px;
  /* Shapes: cards, boxes inside them (fields, notes, banners), and pills (buttons, chips, segments, counts). */
  --r-card: 22px; --r-box: 14px; --r-pill: 999px; --r-chip: 12px;
  --safe-b: max(12px, env(safe-area-inset-bottom, 0px));
  --gutter: 16px;
  --ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%2315301b' d='M0 90V62l70-18 55 10 80-30 60 18 45-8 90 26 70-22 60 6 85-36 70 24 50-6 95 30 60-14 70 10 90-34 65 18 55-4 85 24 70-16 55 8 60-20V90Z'/%3E%3Cpath fill='%23244d2e' opacity='.55' d='M0 90V74l110-16 90 14 120-20 100 18 130-24 110 20 120-10 140 22 120-18 120 14 110-12 170 16V90Z'/%3E%3C/svg%3E");
}

/* ---------- tokens: Dark (js/look-early.js puts data-theme="dark" on <html> before the page first draws) ---------- */
/* Screen only, so paper always prints black on white (the print rules near the end). Charcoal (round 5, Oct 13, 2026):
   cards a step lighter, white-ish words, faint white dividers (the edges of fields and outline buttons at 3:1, Oct 15,
   2026: --border-strong and --btn-line), one blue accent for main buttons, links and the chosen tab;
   delete and out of stock in a soft rose. The design's blue (#3d7bd4) is a shade deeper on buttons (#3570c8) and a
   shade lighter for blue words (#6a9be0), so both pass the 4.5:1 check below. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --rt-ok: #a9c8f2; --rt-ok-bg: rgba(61, 123, 212, .18); --rt-warn: #f2f2f2; --rt-warn-bg: rgba(255, 255, 255, .06);
    --rt-attn: #f2f2f2; --rt-attn-bg: rgba(255, 255, 255, .06); --rt-bad: #e09a9a; --rt-bad-bg: rgba(224, 154, 154, .12);
    --rt-neutral: #c4c4c4; --rt-neutral-bg: rgba(255, 255, 255, .08); --rt-live: #3d7bd4;
    /* The draft's blanks: yellow in Light, a soft blue in Dark (Brandon, Oct 13, 2026); the words call them "highlighted". */
    --rt-blank: rgba(61, 123, 212, .2); --rt-blank-line: #3d7bd4; --rt-dot: #3d7bd4; --rt-scrim: rgba(0, 0, 0, .62);
    --rt-stripe: rgba(255, 255, 255, .03); --rt-shine: rgba(255, 255, 255, .06); --rt-hover: rgba(255, 255, 255, .05);
    --bg: #121212; --surface: #1c1c1c; --surface-2: #262626; --text: #f2f2f2; --text-2: #c4c4c4;
    --text-3: #9a9a9a; --heading: #f2f2f2; --label: #c4c4c4; --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .34);
    --focus: #6a9be0;
    --accent: #3d7bd4; --alert: #b94a4a; --on-alert: #ffffff; --attn-line: #b94a4a;
    --link: #6a9be0; --link-line: rgba(61, 123, 212, .45); --calm-line: rgba(255, 255, 255, .14);
    --muted-line: #333333; --field: #262626; --chip: #262626; --ink-strong: #f2f2f2; --btn-line: rgba(255, 255, 255, .34);
    --solid: #3570c8; --on-solid: #ffffff; --solid-hover: #2f6bc4;
    --pick: #1c2b42; --on-pick: #a9c8f2; --on-pick-2: #8fb0dc;
    --go: #3570c8; --track: #333333; --knob: #ffffff;
    --bar: #1c1c1c; --on-bar: #f2f2f2; --on-bar-2: #9a9a9a; --bar-line: rgba(255, 255, 255, .14); --bar-hover: #262626;
    --toast: #f2f2f2; --on-toast: #121212; --toast-line: #1f5fbf;
    --cta: #3570c8; --on-cta: #ffffff; --cta-hover: #2f6bc4;
    --yard-tag: #262626; --on-yard-tag: #f2f2f2;
    --bark-ink: #c4c4c4; --on-blank: #a9c8f2; --card-rule: #454545;
    --spin: rgba(61, 123, 212, .25); --x-hover: rgba(255, 255, 255, .08);
    --draft: rgba(61, 123, 212, .1); --draft-line: rgba(61, 123, 212, .36);
    --hero: #1c2b42; --on-hero: #f2f2f2; --on-hero-2: #a9c8f2; --hero-line: rgba(255, 255, 255, .3);
    --hero-btn: #3570c8; --on-hero-btn: #ffffff; --hero-btn-hover: #2f6bc4;
    --float: #1c1c1c; --side: #161616; --nav-tint: rgba(61, 123, 212, .14); --glow: rgba(61, 123, 212, .12); --sh-float: 0 12px 30px -14px rgba(0, 0, 0, .9);
    --sh-lift: 0 18px 40px -22px rgba(0, 0, 0, .8); --sh-sheet: 0 -12px 40px -16px rgba(0, 0, 0, .8);
    --ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%231c1c1c' d='M0 90V62l70-18 55 10 80-30 60 18 45-8 90 26 70-22 60 6 85-36 70 24 50-6 95 30 60-14 70 10 90-34 65 18 55-4 85 24 70-16 55 8 60-20V90Z'/%3E%3Cpath fill='%23262626' opacity='.55' d='M0 90V74l110-16 90 14 120-20 100 18 130-24 110 20 120-10 140 22 120-18 120 14 110-12 170 16V90Z'/%3E%3C/svg%3E");
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Fit the screen (js/fit-early.js): on a computer the whole page scales to fill the window the way the round-5 mockup
   fills its 1280 × 800 frame; --fit is 1 up to that size and on phones. Zoom also scales vh, so window-tall parts use
   --vh / --dvh (one vh divided back by the zoom). Printing is never scaled. */
:root { --z: 1; --vh: calc(1vh / var(--z)); --dvh: calc(1dvh / var(--z)); }
@media screen and (min-width: 900px) { :root { --z: var(--fit, 1); } html { zoom: var(--z); } }
body { margin: 0; min-height: calc(100 * var(--vh)); background: var(--bg); color: var(--text); font: 400 1rem/1.5 var(--rt-body);
  -webkit-font-smoothing: antialiased; }
/* Nothing may make the page scroll sideways (an icon's name at the right edge, a long word): clipped, not scrollable. */
html, body { overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } body { font-size: 1.0625rem; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* ---------- practice strip (dev mode) ---------- */
.practice { background: var(--rt-warn-bg); color: var(--rt-warn); border-bottom: 1px solid var(--calm-line); font-size: 1rem; line-height: 1.35; }
.practice .wrap { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
.practice strong { font: 700 .9375rem/1.2 var(--rt-body); }

/* ---------- View as (Brandon viewing the Hub as Greg or the crew, read only; js/view-as.js) ---------- */
/* The header band's colours (forest with cream words; near-black with white words in Dark), at the top of every screen
   and kept there while scrolling, so it is never mistaken for Brandon's own Hub. Exit sits at its right. */
.viewas { background: var(--bar); color: var(--on-bar); border-bottom: 2px solid var(--accent); }
.viewas .wrap { display: flex; align-items: center; gap: 12px; padding-block: 8px; }
.viewas .va-words { flex: 1 1 auto; min-width: 0; font-size: .9375rem; line-height: 1.35; }
.viewas strong { font-weight: 700; }
.viewas .btn.va-exit { flex: none; min-height: 44px; border-color: var(--bar-line); background: transparent; color: var(--on-bar); }
.viewas .btn.va-exit:hover { background: var(--bar-hover); }
.has-side .top.viewing { position: sticky; top: 0; z-index: 20; background: var(--bg); }

/* ---------- app header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.ah { border-bottom: 1px solid var(--border); background: var(--bg); }
.ah .wrap { display: flex; align-items: center; gap: 10px; height: 56px; padding-right: 12px; }
.ah-logo { flex: none; width: 33px; height: 40px; }
.ah-brand { display: flex; flex-direction: column; font: 700 1.375rem/.9 var(--rt-cond); letter-spacing: .04em; text-transform: uppercase; color: var(--heading); white-space: nowrap; }
.ah-sub { display: none; margin-top: 3px; font: italic 400 1rem/1 var(--rt-serif); letter-spacing: 0; text-transform: none; color: var(--link); }
.ah-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ah-who { display: none; font-size: 1rem; color: var(--text-2); }
.upd { display: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.is-updating .upd { display: block; }
.is-updating .ah-refresh .ic { display: none; }
@keyframes pulse { 50% { opacity: .25; } }
@media (min-width: 600px) { .ah-sub { display: block; } }
/* A narrow phone: the header's pills sit a little closer, so the logo's words, Refresh and the menu fit 360 px. */
@media (max-width: 399px) { .ah-right { gap: 8px; } .ah .btn.small.ah-refresh { padding: 0 12px; } .ah .btn.small.ah-me { padding: 0 12px; } }
.ah .btn.small { border-width: 1px; border-color: var(--border-strong); background: var(--surface); }
.ah .btn.small:hover { background: var(--surface-2); }
/* Greg's and Brandon's header (round 5): ☰ at the left, then the screen's name (Brandon's Home: the logo instead),
   Refresh and Brandon's alert bell as icon buttons at the right. The screen's own title is for screen readers only,
   so the name is never shown twice. */
.ah-ham { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; border: 0; border-radius: 50%; background: none;
  color: var(--text); cursor: pointer; }
.ah-ham:hover { background: var(--rt-hover); }
.ah-ham .ic { width: 24px; height: 24px; }
.ah-title { display: none; min-width: 0; font: 700 1.5rem/1 var(--rt-cond); letter-spacing: .02em; text-transform: uppercase; color: var(--heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah.has-menu .ah-logo, .ah.has-menu .ah-brand { display: none; }
.ah.has-menu .ah-title { display: block; }
.at-home .ah.has-menu .ah-logo, .at-home .ah.has-menu .ah-brand { display: flex; }
.at-home .ah.has-menu .ah-title { display: none; }
.ah.has-menu .btn.small.ah-refresh { width: 44px; padding: 0; }
.ah.has-menu .btn.small.ah-refresh .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.btn.small.ah-bell { position: relative; width: 44px; padding: 0; }
.bell-n { position: absolute; top: -4px; right: -4px; min-width: 1.6em; height: 1.6em; padding: 0 5px; border-radius: var(--r-pill); background: var(--alert);
  color: var(--on-alert); font: 700 .75rem/1.6 var(--rt-body); text-align: center; }
/* The screen's own big title shows again (the calm redesign's shrinking header: "Calm redesign: the frame" at the end). */
.inbox-tabs { margin-top: 16px; }
.nav-sheet .mnav { margin: 0 0 12px; }
@media (min-width: 720px) {
  .ah .wrap { height: 64px; }
  .ah-logo { width: 38px; height: 46px; }
  .ah-who { display: block; }
}

/* ---------- the way round: a floating bar on a phone, a sidebar on a computer (Hub look, PR B, Oct 11, 2026) ---------- */
/* Both are in the page for Greg and Brandon (js/app.js buildShell); under 900 px the bar shows, from 900 px the sidebar.
   The crew and Meta's reviewer have one screen each: the header alone, at every width. */
.tc { display: inline-block; min-width: 22px; padding: 3px 6px; border-radius: var(--r-pill); background: var(--text); color: var(--bg);
  font: 700 .8125rem/1 var(--rt-body); text-align: center; font-variant-numeric: tabular-nums; }
.tc.attn { background: var(--alert); color: var(--on-alert); }
.menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 250px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--sh-lift); }
.menu button { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--text);
  font: 600 1rem/1.2 var(--rt-body); text-align: left; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--surface-2); }
.menu button[aria-current="page"] { color: var(--heading); background: var(--surface-2); }
.menu button:focus-visible { outline-offset: -3px; }
/* Brandon's gear (Settings): at the right of the header on a phone (it opens the Settings sheet), at the foot of the
   sidebar on a computer (its menu opens beside it, up from the foot, and scrolls when the window is short). */
.gear { position: relative; display: flex; }
.btn.small.ah-gear { width: 48px; padding: 0; }
.btn.small.ah-gear .ic { width: 24px; height: 24px; }
.btn.ah-gear[aria-current="page"] { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.menu.up { position: fixed; top: auto; left: calc(var(--side-w) + 8px); bottom: 16px; max-height: calc(100 * var(--vh) - 32px); overflow-y: auto; }
/* A menu item: its drawing in a chip, the name over its hint, a chevron (Hub polish). Greg's menu lists his two the same way. */
.menu button.mi, .menu-sheet .sheet-body button.mi { flex-direction: row; align-items: center; gap: 12px; padding-block: 8px; }
.mi-list { display: flex; flex-direction: column; gap: 4px; margin: 0 -8px; }
.mi-list button.mi, .mi-list a.mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px; border: 0; border-radius: 14px; background: none;
  color: var(--text); font: 600 1.0625rem/1.2 var(--rt-body); text-align: left; cursor: pointer; }
.mi-list button.mi:hover, .mi-list a.mi:hover { background: var(--rt-hover); }
.mi-list a.mi { text-decoration: none; }
.mi-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu .mi .ichip { width: 36px; height: 36px; }
.menu .mi .ichip .ic { width: 20px; height: 20px; }

/* The phone's floating bar: a rounded bar inset from the sides and lifted off the bottom; each screen's drawing over its
   name; the current one in the accent colour with a soft tint behind its drawing; a count on the drawing; the + for Add
   a job in the middle, a round main button (round 5). */
.bnav { position: fixed; left: 14px; right: 14px; bottom: var(--bar-gap); z-index: 25; display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); align-items: stretch; max-width: 560px; height: var(--nav-h); margin: 0 auto; padding: 0 6px;
  background: var(--float); border: 1px solid var(--border); border-radius: calc(var(--nav-h) / 2); box-shadow: var(--sh-float); }
.bnav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
  min-height: 44px; padding: 0 1px; border: 0; border-radius: calc(var(--nav-h) / 2); background: none; color: var(--text-3);
  font: 600 .75rem/1.1 var(--rt-body); text-align: center; cursor: pointer; }
.bnav button[aria-current="page"] { color: var(--link); font-weight: 700; }
.bnav button:focus-visible { outline-offset: -4px; }
.bn-i { position: relative; display: grid; place-items: center; width: 48px; height: 30px; border-radius: var(--r-pill); }
.bnav button[aria-current="page"] .bn-i { background: var(--nav-tint); }
.bn-i .ic { width: 22px; height: 22px; }
.bn-l { max-width: 100%; overflow-wrap: break-word; }
.bn-n { position: absolute; top: -5px; right: -2px; min-width: 1.65em; height: 1.65em; padding: 0 5px; border-radius: var(--r-pill); background: var(--text);
  color: var(--bg); font: 700 .75rem/1.65 var(--rt-body); text-align: center; }
.bn-n.attn { background: var(--alert); color: var(--on-alert); }
.bnav button.bn-add { justify-content: center; }
.bn-plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cta); color: var(--on-cta); box-shadow: var(--sh-float); }
.bn-plus .ic { width: 26px; height: 26px; }
.bnav button.bn-add:hover .bn-plus { background: var(--cta-hover); }
/* Nothing hides behind the bar: the page ends above it, with room to spare. */
.has-bnav main { padding-bottom: calc(var(--bar-room) + 24px); }
/* While a field has the keyboard, the bar steps aside so it never sits on the keyboard or on Send. */
.typing .bnav { display: none; }
.typing.has-bnav main { padding-bottom: 32px; }

/* The computer's sidebar: the logo, Add a job, the menu (screens and fold-out groups, each with its drawing and count),
   then the person's name with the menu or the gear at the foot. It stays put while the page scrolls. The phone's ☰
   menu holds the same list (round 5, Oct 13, 2026). */
.side { display: none; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.side-brand .ah-sub { display: block; }
.btn.side-add { width: 100%; margin-bottom: 14px; }
.mnav { display: flex; flex-direction: column; gap: 2px; }
.mg-items { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }
.si.sub { padding-left: 44px; min-height: 44px; font-weight: 500; }
.mg-chev { width: 18px; height: 18px; color: var(--text-3); transition: transform .15s var(--ease); }
.mg-h[aria-expanded="true"] .mg-chev { transform: rotate(180deg); }
.si.mg-h.here { color: var(--text); font-weight: 700; }
.si.mg-h.here .ic:not(.mg-chev) { color: var(--link); }
.si { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: none;
  color: var(--text-2); font: 600 1rem/1.2 var(--rt-body); text-align: left; cursor: pointer; }
.si:hover { background: var(--rt-hover); color: var(--text); }
.si[aria-current="page"] { background: var(--pick); color: var(--on-pick); font-weight: 700; }
.si[aria-current="page"] .ic { color: var(--on-pick); }
.si:focus-visible { outline-offset: -3px; }
.si-name { flex: 1; min-width: 0; overflow-wrap: break-word; }
.side-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 18px 4px 0; }
.side-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--solid); color: var(--on-solid);
  font: 700 1rem/1 var(--rt-body); }
.side-who { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.side-me { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 12px 4px 4px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.side-me:hover { background: var(--rt-hover); }
.side-me .ic { color: var(--text-3); }
@media screen and (min-width: 900px) {
  .has-side #app { display: flex; align-items: flex-start; }
  .has-side .side { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; flex: none; width: var(--side-w); height: calc(100 * var(--vh));
    overflow-y: auto; padding: 22px 14px 16px; background: var(--side); border-right: 1px solid var(--border); }
  .has-side .page { flex: 1; min-width: 0; }
  .has-side .bnav { display: none; }
  .has-bnav main { padding-bottom: 48px; }
  /* The top bar: the screen's name, Refresh and Brandon's bell; the logo, the menu and the gear are in the sidebar. */
  .has-side .ah .wrap { height: 56px; }
  .has-side .ah .ah-logo, .has-side .ah .ah-brand, .has-side .ah .ah-ham, .has-side.at-home .ah .ah-logo, .has-side.at-home .ah .ah-brand { display: none; }
  .has-side .ah .ah-title, .has-side.at-home .ah .ah-title { display: block; }
  .has-side .ah .btn.small.ah-refresh .lbl { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .has-side .ah .btn.small.ah-refresh { width: auto; padding: 0 16px; }
  .has-side .screen { padding-top: 4px; }
  .inbox-tabs { display: none !important; }
}

/* ---------- screens and type ---------- */
main { display: block; }
.screen { display: flex; flex-direction: column; gap: 24px; padding-block: 24px 40px; }
@media (min-width: 720px) { .screen { padding-block: 32px 48px; } }
.st { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.st h1 { font: 700 2.25rem/1 var(--rt-cond); letter-spacing: .005em; color: var(--heading); overflow-wrap: anywhere; }
@media (min-width: 720px) { .st h1 { font-size: 2.625rem; } }
.st > .push { margin-left: auto; }
.st-who { font-size: .875rem; color: var(--text-3); }
.under { display: flex; flex-direction: column; gap: 8px; margin-top: -12px; }
.fresh { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-3); }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--rt-dot); }
.dot.old { width: 7px; height: 7px; background: var(--rt-stale); }
.dot.down { width: 7px; height: 7px; background: var(--rt-down); }
.meta { font-size: .875rem; line-height: 1.45; color: var(--text-3); }
.lede { font-size: 1rem; line-height: 1.5; color: var(--text-2); margin-top: -12px; max-width: 70ch; }
/* Two lines under a title (Brandon's Replies: what it is for, then the count): kept together. */
.lede + .lede { margin-top: -20px; font-weight: 600; color: var(--heading); }
.sec { display: flex; flex-direction: column; gap: 12px; }
/* A section's title in sentence case, its count in a small round chip beside it (the " · " stays for screen readers). */
.eb { display: flex; align-items: center; gap: 10px; font: 700 1.25rem/1.25 var(--rt-body); letter-spacing: 0; color: var(--heading); }
.eb .n { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2); font: 700 .8125rem/1 var(--rt-body); font-variant-numeric: tabular-nums; }
.sec-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sec-list { display: flex; flex-direction: column; gap: 12px; }
.pc-only { display: none !important; }
@media screen and (min-width: 720px) { .pc-only { display: inline-flex !important; } }
.sub-h { font: 700 1.125rem/1.25 var(--rt-body); letter-spacing: 0; color: var(--heading); margin-top: 6px; }

.lab { display: block; font: 600 .875rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text-2); }
[data-jump-target] { scroll-margin-top: 140px; }
/* Something that needs a look, in words (round 5): the normal text colour with the small muted-red dot in front, never red words. */
.warnline { color: var(--text); font-weight: 600; }
.warnline::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--alert); vertical-align: .12em; }
.warnline.dismissible::before { margin-top: .5em; flex: none; }

/* The yard tag (a date label), from the website: forest on burlap. */
.tag { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: var(--r-pill); background: var(--yard-tag);
  color: var(--on-yard-tag); font: 600 .9375rem/1.2 var(--rt-body); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 22px; border: 2px solid var(--btn-line);
  border-radius: var(--r-pill); background: transparent; color: var(--ink-strong); font: 700 1.0625rem/1.2 var(--rt-body); letter-spacing: 0; text-transform: none;
  text-decoration: none; text-align: center; cursor: pointer; touch-action: manipulation; transition: transform .08s; }
.btn:hover { background: var(--rt-hover); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.btn.primary:hover { background: var(--solid-hover); border-color: var(--solid-hover); }
.btn.cta { background: var(--cta); border-color: var(--cta); color: var(--on-cta); }
.btn.cta:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn.small { min-height: 48px; padding: 0 16px; font-size: 1rem; }
.btn.full { width: 100%; }
.btn.link { min-height: 48px; min-width: 48px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: none; font-size: 1rem; font-weight: 600; letter-spacing: 0;
  color: var(--link); text-decoration: none; }
.btn.link:hover { background: var(--rt-hover); }
.btn.link.flush { margin-left: -8px; }
.btn .ic { width: 20px; height: 20px; }
.btn.small .ic { width: 18px; height: 18px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
/* A save that didn't get through: the button says so in words and keeps what was typed. */
.btn.bad { border-color: var(--rt-bad); background: var(--rt-bad-bg); color: var(--rt-bad); }
.btn.danger { border-color: var(--rt-bad); color: var(--rt-bad); }
@media (hover: hover) { .btn:not(.link):not([disabled]):hover { transform: translateY(-1px); } }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
/* A sheet's buttons (Save and Cancel, "Yes, send it" and "Not yet") sit side by side, the main one first, and wrap
   to a line each only when the sheet is too narrow for both. */
.sheet-body .stack:has(> .btn.full) { flex-direction: row; flex-wrap: wrap; }
.sheet-body .stack > .btn.full { width: auto; flex: 1 1 140px; }

/* ---------- pills: outline = kind of job or channel, tint = state ---------- */
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: var(--r-pill); font: 700 .8125rem/1.2 var(--rt-body); letter-spacing: 0;
  white-space: nowrap; }
.pill.ok { background: var(--rt-ok-bg); color: var(--rt-ok); }
.pill.warn { background: var(--rt-warn-bg); color: var(--rt-warn); }
.pill.attn { background: var(--rt-attn-bg); color: var(--rt-attn); }
/* Something that needs you: normal words with a 7 px muted-red dot in front (round 5). */
.pill.attn::before, .pill.warn::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--alert); }
.pill.bad { background: var(--rt-bad-bg); color: var(--rt-bad); }
.pill.neutral { background: var(--rt-neutral-bg); color: var(--rt-neutral); }
.pill.wrapok { white-space: normal; }
/* "1 late" jumps to the late job: looks 28 px tall, taps like 48 px (56 px on a phone). */
.pill.jump { position: relative; gap: 4px; border: 0; cursor: pointer; }
.pill.jump::after { content: ""; position: absolute; inset: -10px -6px; }
.pill.jump .ic { width: 16px; height: 16px; }

/* ---------- cards ---------- */
.card { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); min-width: 0; }
/* A card that needs you or has a problem: its whole edge takes a soft tint of the colour (no stripe down the side); a
   calm one stays plain. Its icon chip and pill say what it is. */
.card.attn { border-color: color-mix(in srgb, var(--attn-line) 55%, var(--border)); }
.card.bad { border-color: color-mix(in srgb, var(--attn-line) 55%, var(--border)); }
.job-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.job-top .btn.link, .job-top .push { margin-left: auto; }
.name { font: 700 1.125rem/1.3 var(--rt-body); color: var(--text); overflow-wrap: anywhere; }
.crew .name { font-size: 1.25rem; }
.addr { color: var(--text-2); overflow-wrap: anywhere; }
.addr .meta { display: block; }
.addr .meta, .row-sub, .p-facts, .lrow .l2, .spec .for, .srow .sz { font-size: .875rem; color: var(--text-3); }
.trees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.trees li { position: relative; padding: 0 0 0 20px; overflow-wrap: anywhere; }
.trees li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--link); }
.qty { font-weight: 700; color: var(--link); font-variant-numeric: tabular-nums; }
.note { padding: 12px 14px; border-radius: var(--r-box); background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note .lab { white-space: normal; }
/* Money to collect: a box in bark on the burlap tint, so orange stays for what's late or needs you. */
.collect { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 16px; border-radius: var(--r-box);
  background: var(--rt-warn-bg); color: var(--rt-warn); }
.collect .lbl { font: 600 .9375rem/1.2 var(--rt-body); }
.collect strong { font: 700 1.625rem/1.1 var(--rt-cond); font-variant-numeric: tabular-nums; }
.crew .collect { flex-direction: column; align-items: stretch; gap: 8px; }
.collect .c-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.collect .c-row p { flex: 1; min-width: 0; line-height: 1.35; }
.collect .btn { flex: none; border-color: var(--bark-ink); color: var(--bark-ink); }
.collect-chip { margin-left: auto; padding: 6px 12px; border-radius: var(--r-pill); background: var(--rt-warn-bg); color: var(--rt-warn); font: 700 .9375rem/1.1 var(--rt-body);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.changed { color: var(--rt-bad); font-weight: 600; }

/* ---------- shared pieces (Hub polish, phase 1, Oct 11, 2026; parts.js and h.js draw them) ---------- */
/* The icon chip: a 40 px rounded square beside a card's or a row's title, tinted in its status colour (green by default:
   the accent on its soft tint). */
.ichip { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-chip); background: var(--nav-tint); color: var(--link); }
.ichip .ic { width: 22px; height: 22px; }
.ichip.ok { background: var(--rt-ok-bg); color: var(--rt-ok); }
.ichip.warn { background: var(--rt-warn-bg); color: var(--rt-warn); }
.ichip.attn { background: var(--rt-attn-bg); color: var(--rt-attn); }
.ichip.bad { background: var(--rt-bad-bg); color: var(--rt-bad); }
.ichip.neutral { background: var(--rt-neutral-bg); color: var(--rt-neutral); }
/* A card's head: the chip, the title (about 18 px, bold, sentence case) with a one-line summary under it in the quiet
   colour, then whatever sits at the right (a status pill, a count). */
.card-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.card-hw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card-t { margin: 0; font: 700 1.125rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text); overflow-wrap: anywhere; }
.card-s { font-size: .875rem; line-height: 1.4; color: var(--text-3); overflow-wrap: anywhere; }
.card-h > .pill, .card-h > .card-r { flex: none; }
.card-r { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
/* The initials avatar for a person (Greg, Abel, Issac, a customer): the same person always gets the same tint. */
.av { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nav-tint); color: var(--link);
  font: 700 .875rem/1 var(--rt-body); letter-spacing: 0; }
.av.t1 { background: var(--rt-warn-bg); color: var(--rt-warn); }
.av.t2 { background: var(--rt-attn-bg); color: var(--rt-attn); }
.av.t3 { background: var(--rt-neutral-bg); color: var(--rt-neutral); }
.av.sm { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
/* Who and when, under what they wrote: a small avatar, then the quiet words. */
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .8125rem; line-height: 1.4; color: var(--text-3); }
/* The list: one card of rows with soft lines between; a row that opens something ends in a chevron, and its whole
   width takes the tap (the name's own button stretches over it). */
.list { list-style: none; margin: 0; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--border); min-width: 0; }
.li:last-child { border-bottom: 0; }
.li-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.li-t { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.li-s { font-size: .875rem; line-height: 1.4; color: var(--text-3); overflow-wrap: anywhere; }
.li-r { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: 45%; }
.go { flex: none; width: 20px; height: 20px; color: var(--text-3); transform: rotate(-90deg); }
.li.tap:hover { background: var(--rt-hover); }
.li.tap .namelink { position: static; text-decoration: none; }
.li.tap .namelink::after { content: ""; position: absolute; inset: 0; }
.li.tap .namelink:focus-visible { outline: 0; }
.li.tap:has(.namelink:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
/* One helper line under a section's title (said once, not on every card). */
.sec-help { display: flex; flex-direction: column; gap: 2px; margin-top: -4px; font-size: .875rem; line-height: 1.45; color: var(--text-3); max-width: 70ch; }
/* A list inside a fold or a card: no frame of its own, its rows run to the edges. */
.list.flat { border: 0; border-radius: 0; background: none; }
.fold-body > .list.flat { margin: 0 -20px -20px; }
.fold-body > .list.flat:first-child { margin-top: -16px; }
.li .warnline { font-size: .875rem; }
.li .acts { margin-top: 8px; }
.li-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.li-r .pill { white-space: normal; text-align: right; }
/* A list inside a card runs to the card's edges. */
.card > .list.flat { margin-inline: -20px; border-top: 1px solid var(--border); }
.card > .list.flat:last-child { margin-bottom: -20px; }
.card > .list.flat .li { padding-inline: 20px; }
.btn.link.danger { color: var(--rt-bad); }
/* A reported problem on Brandon's Today: its pill and the machine on one line. */
.req-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* Setup's switches sit on a card like everything else. */
[data-part="switches"] > .switch { padding: 14px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.cu-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; }
.cu-fold > summary .pill:last-child { margin-left: auto; }
.cu-fold .convo { padding: 4px 0 0; border: 0; }
/* Greg's weather: a sun in its chip, then the two lines. */
/* The Reply guide's rows, one under another with a soft line between. */
[data-part] > [data-row] + [data-row] { padding-top: 16px; border-top: 1px solid var(--border); }
.card > .rows.ts-rows { margin-inline: -20px; border-width: 1px 0; border-radius: 0; }
/* Money and counts never break across lines (Hub design standard, check 10). */
.collect strong, .p-price, .lrow .num, .srow .num, .collect-chip { white-space: nowrap; }
.weather { display: flex; align-items: center; gap: 12px; }
.weather > div { flex: 1; min-width: 0; }
.stage-set { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.stage-set .field { flex: 1 1 200px; }
/* A section that folds (Customers' Hidden, a customer's records): a card with its name and a chevron. */
details.sec { padding: 0 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
details.sec[open] { padding-bottom: 20px; }
details.sec > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; font-weight: 700; color: var(--heading); }
details.sec > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s; }
details.sec[open] > summary::after { transform: rotate(225deg); }

/* ---------- plain lists (replies waiting, stock) ---------- */
.plain { list-style: none; margin: 0; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.plain > li { border-bottom: 1px solid var(--border); }
.plain > li:last-child { border-bottom: 0; }
.lrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; width: 100%; padding: 14px 16px; border: 0; background: none; text-align: left; cursor: pointer; }
.lrow:hover { background: var(--rt-hover); }
.lrow:focus-visible { outline-offset: -3px; }
.lrow .l1 { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.lrow .l2 { grid-column: 1 / -1; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .num { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-screen="stock"] .need-list li .btn { margin-left: auto; }
.srow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 14px 16px; }
.srow .sz { display: block; font-size: .875rem; color: var(--text-3); }
.srow .r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.srow .num { font-weight: 600; font-variant-numeric: tabular-nums; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- the website's spec box (load list) ---------- */
.spec { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.spec > h3, .spec > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); color: var(--heading); font: 700 1.0625rem/1.25 var(--rt-body); }
.spec > summary { min-height: 56px; }
.spec:not([open]) > summary { border-bottom: 0; }
.spec > summary .chev { color: var(--text-3); }
.spec .n { color: var(--text-3); font-weight: 600; font-size: .875rem; }
.spec ul { list-style: none; margin: 0; padding: 0 16px; }
.spec li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.spec li:last-child { border-bottom: 0; }
.spec li::before { content: ""; position: absolute; left: 4px; top: 1.25em; width: 7px; height: 7px; border-radius: 50%; background: var(--link); }
.spec .for { display: block; font-size: .875rem; color: var(--text-3); }
.spec li.y { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.spec > summary .n { margin-left: auto; }
.spec.tight li { padding-block: 7px; }
.spec.tight li::before { top: .95em; }
/* The crew's one screen sits a little closer together, so Map and Call on the first job stay high up. */
.screen.tight { gap: 16px; }
/* Stock's invoice-check lines, under the lede (Hub clarity, Oct 10, 2026). */
.stock-checks { display: flex; flex-direction: column; gap: 4px; margin-top: -14px; }
.stock-checks .meta { font-size: .875rem; }
.stock-checks .nw { white-space: nowrap; }
/* Stock's "Lines to check" (Brandon, Oct 11, 2026; Docs/Hub design standard.md): the shared section title with its
   count (eyebrow), one card per line with the shared head (icon chip, 18 px title, one-line summary), the story at
   16 px, the buttons side by side, solid then outline, and a quieter 14 px line on what the second one does; two across
   from 1440 px (where both buttons still fit side by side); "Nothing to do" folded under. Space, not lines, between. */
.drift-sec { display: flex; flex-direction: column; gap: 12px; }
.drift-sec > .meta { margin-top: -4px; font-size: .875rem; }
.drift-list, .drift-quiet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drift-list { gap: 16px; }
@media (min-width: 1440px) { .drift-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); align-items: start; } }
.drift-story, .drift-ask { font-size: 1rem; line-height: 1.5; font-weight: 400; color: var(--text); overflow-wrap: anywhere; }
.drift-story + .drift-ask { margin-top: -8px; }
.card.drift .acts { gap: 8px 12px; }
.drift-note { margin-top: -4px; }
.drift-quiet .s-main .meta, .drift-quiet .fold-body > .meta { font-size: .875rem; }
.drift-quiet-list { gap: 12px; }
.drift-quiet-list li { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.screen.tight .under { margin-top: -6px; }
.spec li.y .r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* ---------- folds ---------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.chev { width: 22px; height: 22px; color: var(--link); transition: transform .25s; flex: none; }
details[open] > summary .chev { transform: rotate(180deg); }
.fold { padding: 0; gap: 0; }
.fold > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 20px; }
.fold > summary:focus-visible { outline-offset: -3px; }
.s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fold .s-main strong { font: 700 1.125rem/1.25 var(--rt-body); letter-spacing: 0; color: var(--heading); }
.fold-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; border-top: 1px solid var(--border); }
.txtrow { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.txtrow + .txtrow { border-top: 1px solid var(--border); }
.utils { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.preview { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-box); background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Board: chips, search, rows ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--chip); color: var(--text); font: 600 .9375rem/1.1 var(--rt-body); letter-spacing: 0; text-transform: none; cursor: pointer;
  text-decoration: none; }
.chip .c { font: 700 .875rem/1 var(--rt-body); letter-spacing: 0; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--pick); border-color: var(--pick); color: var(--on-pick); }
.chip[aria-pressed="true"] .c { color: var(--on-pick-2); }
.chip.attn { border-color: var(--attn-line); }
.chip.attn:not([aria-pressed="true"]) .c { color: var(--rt-attn); }
.search { position: relative; }
.search .ic { position: absolute; left: 16px; top: 18px; color: var(--text-3); pointer-events: none; }
.search input { padding-left: 46px !important; }
.search input, .field input[type="search"] { border-radius: var(--r-pill); }
.searchbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.rows { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.grp-h { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font: 600 .875rem/1.2 var(--rt-body); letter-spacing: 0; color: var(--text-2); }
.rows > .grp-h:not(:first-child) { border-top: 1px solid var(--border); }
.grp-h.late { color: var(--rt-bad); }
.row { border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: 0; }
.row > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; }
.row > summary .chev { color: var(--text-3); }
.row[open] > summary { background: var(--rt-hover); }
.row > summary:hover { background: var(--rt-hover); }
.row > summary:focus-visible { outline-offset: -3px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-name { font: 700 1.0625rem/1.3 var(--rt-body); overflow-wrap: anywhere; }
.row-sub { font-size: .875rem; color: var(--text-3); overflow-wrap: anywhere; }
.row-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 20px; }
.row.is-saving > summary .row-name::after { content: " · Saving…"; color: var(--text-3); font-weight: 400; }
.row.is-failed > summary .row-name::after { content: " · Didn't save"; color: var(--rt-bad); }
.name > .meta, .name > .warnline { font-size: .9375rem; }
.name > .meta { font-weight: 400; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.kv dt { padding-top: 1px; font: 500 .875rem/1.4 var(--rt-body); letter-spacing: 0; color: var(--text-3); }
.kv dd { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.empty-line { padding: 20px 16px; color: var(--text-2); text-align: center; }
/* The Board (round 5, Oct 13, 2026): the list dropdown and the search side by side; one list of rows, each a date square,
   the name over "town · money · trees" and the five-step track, and Set a date / Change date (or ⋯) at the right. A tap
   opens the job: a sheet on a phone, a panel beside the list on a computer. */
.board-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.board-bar .field.search { flex: 1 1 260px; max-width: 420px; }
.list-pick { position: relative; flex: 1 1 260px; max-width: 320px; }
.list-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px 0 18px; border: 0; border-radius: var(--r-box);
  background: var(--pick); color: var(--on-pick); font: 700 1rem/1.2 var(--rt-body); text-align: left; cursor: pointer; }
.lb-w { flex: 1; min-width: 0; }
.list-btn .tc { background: var(--on-pick); color: var(--pick); }
.lb-chev { transition: transform .15s var(--ease); }
.list-btn[aria-expanded="true"] .lb-chev { transform: rotate(180deg); }
.list-menu { right: 0; min-width: 0; }
.list-menu button { gap: 10px; }
.lo-w { flex: 1; min-width: 0; }
.lo-late { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 700; color: var(--text-2); }
.lo-late::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }
.lo-n { min-width: 24px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lo-tick { width: 18px; height: 18px; flex: none; color: var(--link); }
.list-menu button[aria-selected="true"] { background: var(--surface-2); }
.board-list .rows { border: 0; background: none; overflow: visible; display: flex; flex-direction: column; gap: 4px; }
.brow { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 6px 8px; border-radius: var(--r-box); }
.brow:hover, .brow.is-open { background: var(--rt-hover); }
.brow[hidden] { display: none; }
.dsq { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; height: 56px; padding: 0 6px; border: 0; border-radius: 10px;
  background: var(--pick); color: var(--on-pick); cursor: pointer; text-transform: uppercase; }
.dsq-t { font: 700 .8125rem/1 var(--rt-cond); letter-spacing: .04em; white-space: nowrap; }
.dsq-b { font: 700 1.25rem/1.1 var(--rt-cond); white-space: nowrap; }
.dsq.none { background: var(--surface-2); color: var(--text-2); }
.dsq.late { background: var(--rt-attn-bg); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--attn-line); }
.dsq.today { background: var(--cta); color: var(--on-cta); }
.brow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; }
.brow-main .row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow.is-saving .row-name::after { content: " · Saving…"; color: var(--text-3); font-weight: 400; }
.brow.is-failed .row-name::after { content: " · Didn't save"; color: var(--text-2); font-weight: 400; }
.brow > .pill { flex: none; }
.btn.small.row-date { flex: none; min-height: 44px; padding: 0 16px; }
.row-more { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }
.row-more:hover { background: var(--rt-hover); }
.track { display: flex; gap: 3px; margin-top: 3px; }
.track .tk { width: 22px; height: 3px; border-radius: 2px; background: var(--muted-line); }
.track .tk.on { background: var(--accent); }
.track.labelled { gap: 6px; margin: 0; }
.track.labelled .tk { flex: 1; width: auto; height: auto; padding-top: 6px; border-top: 4px solid var(--muted-line); border-radius: 0; background: none; }
.track.labelled .tk.on { border-top-color: var(--accent); }
.tk-l { display: block; font-size: .8125rem; color: var(--text-3); }
.track.labelled .tk.on .tk-l { color: var(--text); font-weight: 600; }
.board-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 24px; align-items: start; }
.job-panel { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100 * var(--vh) - 96px); overflow-y: auto; }
.jp-name { flex: 1; min-width: 0; font: 700 1.375rem/1.2 var(--rt-body); overflow-wrap: anywhere; }
.job-sheet .sheet-body { gap: 16px; }
.job-links { margin: 0; }
@media (max-width: 599px) {
  .list-pick, .board-bar .field.search { flex-basis: 100%; max-width: none; }
  .brow { gap: 10px; padding-inline: 0; }
  .dsq { min-width: 52px; height: 52px; padding: 0 4px; }
  .big-text .dsq-b { font-size: 1.0625rem; }
  .btn.small.row-date { padding: 0 12px; }
}

/* ---------- fields and toggles ---------- */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label, .field .flabel { font: 600 .9375rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text-2); }
.field label .why { font: 400 .875rem/1.3 var(--rt-body); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 56px; padding: 12px 16px; border: 1.5px solid var(--border-strong); border-radius: var(--r-box);
  background: var(--field); color: var(--text); font: 400 1.0625rem/1.4 var(--rt-body); }
.field input[type="file"] { min-height: 0; padding: 8px; }
.field input[type="file"]::file-selector-button { margin-right: 12px; padding: 10px 16px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: 600 .9375rem/1.2 var(--rt-body); cursor: pointer; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink-strong); outline: 3px solid var(--focus); outline-offset: 2px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); opacity: 1; }
.field.err input, .field.err textarea { border-color: var(--rt-bad); }
.hint { font-size: .875rem; color: var(--text-3); }
.msg-err { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-weight: 600; font-size: 1rem; }
.msg-err .ic { margin-top: 2px; color: var(--alert); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 720px) { .three { grid-template-columns: 2fr 1fr 1fr; } }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); }
.seg button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 6px 8px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--text); font: 600 1rem/1.15 var(--rt-body); letter-spacing: 0; text-transform: none; text-align: center; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); font-weight: 700; }
.seg button:focus-visible { outline-offset: -5px; }
.seg button .ic { display: none; width: 18px; height: 18px; }
.seg button[aria-pressed="true"] .ic { display: block; }
.seg.days button { flex-direction: column; gap: 3px; min-height: 64px; }
.seg.days .d2 { font: 400 .875rem/1 var(--rt-body); letter-spacing: 0; text-transform: none; }
.seg.days button[aria-pressed="true"] .ic { display: none; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggles button { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--field); color: var(--text); font: 600 .9375rem/1.1 var(--rt-body); letter-spacing: 0; text-transform: none; cursor: pointer; }
.toggles button[aria-pressed="true"] { background: var(--pick); border-color: var(--pick); color: var(--on-pick); }
.toggles .ic { display: none; width: 16px; height: 16px; }
.toggles button[aria-pressed="true"] .ic { display: block; }

/* ---------- Wrap-up ---------- */
.wu-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.wu-row .wu-name { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wu-row .meta { flex-basis: 100%; }
.wu-job { gap: 16px; }
/* Today's summary: the crew's own notes under the box, read only (day-summary.ts). */
#wu-notes { min-height: 9em; }
.wu-crew { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-card); overflow-wrap: anywhere; }
.wu-crew p { margin: 0; white-space: pre-wrap; }
/* "Today's work" on the crew's Schedule (board/crew.js). */
.crew-day { display: flex; flex-direction: column; gap: 10px; }
.crew-day textarea { min-height: 6em; }
.opt > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-top: 1px solid var(--border); }
.opt > summary:focus-visible { outline-offset: 2px; }
.opt .s-main { gap: 3px; }
.opt-body { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
/* Send wrap-up sits at the end of the form and follows Greg down the screen once he has answered a job. */
.sendbar { position: static; z-index: 4; display: flex; flex-direction: column; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter); background: var(--bg); }
.sendbar.is-stuck { position: sticky; bottom: calc(var(--bar-room) + 8px); }
.typing .sendbar.is-stuck, .no-bnav .sendbar.is-stuck { bottom: 0; }
@media (min-width: 900px) { .sendbar.is-stuck { bottom: 0; } }
.stockrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.stockrow .full { grid-column: 1 / -1; }
@media (min-width: 720px) { .stockrow { grid-template-columns: 2fr 1fr 1fr 1.4fr; } .stockrow .full { grid-column: 1 / -1; } }
.banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--rt-warn-bg); color: var(--rt-warn); }
.banner .ic { margin-top: 2px; }
.banner.ok { background: var(--rt-ok-bg); color: var(--rt-ok); }
/* A banner that needs you: normal words on a faint tint, its drawing in the muted red (round 5: no red words, no pink). */
.banner.bad { background: var(--rt-attn-bg); color: var(--rt-attn); }
.banner:not(.ok) > .ic { color: var(--alert); }
.banner .btn { align-self: flex-start; border-color: currentColor; color: inherit; }
.b-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
/* The × that dismisses an alert or an error line on this device (js/dismiss.js). */
.b-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -10px -10px 0;
  padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: inherit; cursor: pointer; }
.b-x:hover { background: var(--x-hover); }
.b-x .ic { margin: 0; }
.warnline.dismissible { display: flex; align-items: flex-start; gap: 4px; }
.warnline.dismissible > span { flex: 1; min-width: 0; }
.warnline .b-x { width: 36px; height: 36px; margin: -7px -8px -7px 0; }

/* ---------- Replies: a messaging app (Brandon, Oct 11, 2026; js/replies/replies.js) ---------- */
/* A phone: the open conversation at the top, the others as rows under it, the paste box last. A computer (900 px and
   up): the list (and the paste box) on the left, the open conversation filling the right. Every conversation is drawn;
   only the open one shows. Docs/Hub design standard.md: sentence-case labels, status as small pills, no stripes or
   dashed lines, initials for people, buttons side by side. */
.rp-info { display: flex; align-items: flex-start; gap: 8px; font-size: .9375rem; line-height: 1.4; color: var(--text-3); }
.rp-info .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--link); }
.rp-segs { margin-top: -8px; }
.rp-segs .chip { min-height: 44px; }
.rp { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.rp-list { display: flex; flex-direction: column; min-width: 0; }
.rp-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rp-panes { order: -1; display: flex; flex-direction: column; min-width: 0; }
.rp-pane:not(.is-open) { display: none; }
.rp[data-seg="done"] .rp-panes { display: none; }
.rp-also { font: 600 .9375rem/1.2 var(--rt-body); color: var(--text-3); }

/* A row: the round initials (or Facebook picture), the name and the time, then the channel and one line of what they
   wrote. Rows that open a conversation are buttons with a chevron. */
.rp-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rp-rows > li.is-open { display: none; }
.rp-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px; border: 0; border-radius: 16px;
  background: none; color: var(--text); font: inherit; text-align: left; }
button.rp-row { cursor: pointer; }
button.rp-row:hover { background: var(--rt-hover); }
.rp-row:focus-visible { outline-offset: -3px; }
.rp-row > .chev { flex: none; width: 20px; height: 20px; color: var(--text-3); transform: rotate(-90deg); }
.av.rp-av, img.rp-av { width: 44px; height: 44px; font-size: 1rem; }
img.rp-av { flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.rp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rp-l1 { display: flex; align-items: baseline; gap: 10px; width: 100%; min-width: 0; }
.rp-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rp-when { flex: none; font-size: .875rem; color: var(--text-3); white-space: nowrap; }
.rp-l2 { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; color: var(--text-2); }
.rp-ch { font-weight: 600; color: var(--text-3); }
.rp-l2.ok { display: flex; align-items: center; gap: 6px; color: var(--rt-ok); font-weight: 600; }
.rp-l2.ok > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rp-l2.ok .ic { flex: none; width: 16px; height: 16px; }
.rp-l2.bad { color: var(--rt-bad); font-weight: 600; }
.rp-l3 { font-size: .875rem; color: var(--text-3); }
.rp-row.is-done .rp-who { color: var(--text-2); }
.rp-skip { align-items: flex-start; }
.rp-skipbtn { margin-top: 6px; }
.rp-why { padding: 0 12px; }

/* The open conversation: a card, its person at the top, the chat, the draft and the buttons. */
.rp .card.rp-pane { --pad: 20px; gap: 16px; padding: var(--pad); border-radius: var(--r-card); scroll-margin-top: 84px; }
.rp-pane:focus { outline: none; }
.rp-pane:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rep-top { flex: 1 1 220px; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px; }
.rep-top > :first-child { grid-row: 1 / span 2; }
.rep-top .fb-pic { width: 44px; height: 44px; }
.rep-name { justify-self: start; font: 700 1.125rem/1.25 var(--rt-body); color: var(--heading); overflow-wrap: anywhere; text-align: left; }
.rep-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: .875rem; color: var(--text-3); overflow-wrap: anywhere; }
.convo { display: flex; flex-direction: column; gap: 8px; }
.convo-older { display: flex; flex-direction: column; gap: 8px; }
.convo-older[hidden] { display: none; }
.convo > .rp-show { align-self: center; min-height: 44px; font-size: 1rem; }
.rp-earlier { text-align: center; }
.msg { align-self: flex-start; max-width: 88%; padding: 10px 14px; border-radius: 4px 18px 18px 18px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.us { align-self: flex-end; border-radius: 18px 4px 18px 18px; background: var(--rt-ok-bg); }
.msg .who { margin-bottom: 2px; font-size: .875rem; color: var(--text-3); white-space: normal; }
.rep-note { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--r-box); background: var(--rt-warn-bg); color: var(--rt-warn);
  font-size: 1rem; line-height: 1.4; }
.rep-note .lbl { font-weight: 700; }

/* The drafted reply: a bubble on the right. With no highlighted parts the bubble is the text box itself. */
.rp-draft { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rp-lab { font-size: .875rem; font-weight: 600; color: var(--label); }
.rp-ed { align-self: stretch; }
.rp-ed > .rp-bubble { align-self: flex-end; }
.rp-ed > .blank-hint { text-align: right; }
.reply-box { padding: 12px 14px; border: 2px solid var(--border-strong); border-radius: var(--r-box); background: var(--field); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
textarea.reply-edit { width: 100%; min-height: 140px; padding: 12px 14px; border: 2px solid var(--border-strong); border-radius: var(--r-box); background: var(--field);
  font: 400 1.1875rem/1.5 var(--rt-body); color: var(--text); resize: vertical; }
textarea.reply-edit:focus { border-color: var(--ink-strong); outline: 3px solid var(--focus); outline-offset: 2px; }
.reply-box.rp-bubble, textarea.reply-edit.rp-bubble { width: auto; max-width: 92%; min-height: 0; padding: 12px 16px; border: 1.5px solid var(--draft-line);
  border-radius: 18px 4px 18px 18px; background: var(--draft); }
textarea.reply-edit.rp-bubble { width: 92%; font-size: inherit; resize: none; }
textarea.reply-edit.rp-bubble:focus { border-color: var(--link); }
/* Each highlighted part of the draft points at its own 56 px field below, which fills the draft as Greg types. */
.blank-chip { position: relative; padding: 1px 6px; border: 0; border-bottom: 2px solid var(--rt-blank-line); border-radius: 2px; background: var(--rt-blank);
  color: var(--on-blank); font: inherit; cursor: pointer; }
/* The highlighted word stays the height of the text, but a tap anywhere 48 px tall around it lands on it (and jumps to its field). */
.blank-chip::after { content: ""; position: absolute; inset: -9px -2px; }
.blank-chip.is-filled { background: var(--rt-ok-bg); border-bottom-color: var(--link); color: var(--text); font-weight: 600; }
.blank-field label { display: flex; align-items: center; gap: 8px; }
.blank-field input { background: var(--rt-blank); border-color: var(--rt-blank-line); color: var(--on-blank); }
.blank-field input::placeholder { color: var(--on-blank); }
.blank-field input.is-filled { background: var(--rt-ok-bg); border-color: var(--link); color: var(--text); }
.sw { flex: none; width: 18px; height: 14px; border-radius: 2px; background: var(--rt-blank); border-bottom: 2px solid var(--rt-blank-line); }
.blank-hint { font-size: 1rem; color: var(--text-2); }

/* Send (the big pill) with Edit beside it and where it goes under them; it stays in reach above the phone's bar. */
.send-row { position: sticky; bottom: calc(var(--bar-room) + 8px); z-index: 2; margin-inline: -16px; padding: 8px 16px; background: var(--surface); }
.typing .send-row, .no-bnav .send-row { bottom: 0; }
@media (min-width: 900px) { .send-row { bottom: 0; } }
.rp-pane .send-row { margin-inline: 0; padding: 8px 0; box-shadow: calc(-1 * var(--pad)) 0 var(--surface), var(--pad) 0 var(--surface); }
.rp-actions { display: flex; flex-direction: column; gap: 6px; }
.rp-btns { display: flex; gap: 10px; }
.rp-btns .rp-send { flex: 1; min-width: 0; }
.rp-btns .rp-edit { flex: none; padding: 0 24px; border-width: 1.5px; border-color: var(--border-strong); }
.rp-cap { font-size: .875rem; line-height: 1.35; color: var(--text-3); text-align: center; }
.rp-copy { justify-content: center; }

/* Other choices: one tap under Send, a small pill that opens a tidy row of choices. */
.other > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font: 700 1.125rem/1 var(--rt-cond); letter-spacing: 0;
  color: var(--link); border-top: 1px solid var(--border); }
.other .stack { padding-top: 4px; }
.rp-pane .other > summary { justify-content: center; gap: 6px; width: max-content; max-width: 100%; min-height: 44px; margin: 0 auto; padding: 0 18px;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-pill); font: 600 1rem/1 var(--rt-body); letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; }
.rp-pane .other > summary::-webkit-details-marker { display: none; }
.rp-pane .other > summary:hover { background: var(--rt-hover); }
.rp-pane .other > summary .chev { width: 18px; height: 18px; }
.rp-pane .other[open] > summary { background: var(--surface-2); }
.rp-more { gap: 16px; padding-top: 16px; }
.rp-rw { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.rp-rw > .field { flex: 1 1 260px; }
.rp-rw > .btn { flex: none; }
.rp-marks { gap: 8px; }
.working { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-box); background: var(--rt-ok-bg); color: var(--rt-ok); font-weight: 600; }
.spinner { flex: none; width: 22px; height: 22px; border: 3px solid var(--spin); border-top-color: var(--link); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.done-line { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--rt-ok); }
.done-line .ok-ic { width: 32px; height: 32px; }
.rp-paste { gap: 16px; }
.shot { display: block; max-width: 100%; max-height: 320px; border: 1px solid var(--border); border-radius: var(--r-box); }

/* A computer: two panes, like an email app. */
@media screen and (min-width: 900px) {
  .rp { display: grid; grid-template-columns: clamp(280px, 36%, 380px) minmax(0, 1fr); align-items: start; gap: 24px; }
  /* The open conversation's head: the channel, the time and Needs attention are on the selected row beside it (round 5). */
  .rp-pane .rp-dup { display: none; }
  .rp.is-empty { grid-template-columns: minmax(0, 1fr); }
  .rp-list { grid-column: 1; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
  .rp.is-empty .rp-list { padding: 0; background: none; border: 0; }
  .rp-panes { order: 0; grid-column: 2; }
  .rp[data-seg="done"] .rp-panes, .rp[data-seg="skipped"] .rp-panes { display: flex; }
  .rp-also { display: none; }
  .rp-rows > li.is-open { display: block; }
  .rp-row[aria-current="true"] { background: var(--surface-2); }
  .rp .card.rp-pane { --pad: 24px; }
  .rp-why { padding: 8px 12px 0; }
}

/* ---------- Find a plant ---------- */
.p-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.p-row:last-child { border-bottom: 0; }
.p-name { font-weight: 700; overflow-wrap: anywhere; }
.p-bot { font-style: italic; font-size: .875rem; color: var(--text-3); overflow-wrap: anywhere; }
.p-facts { grid-column: 1 / -1; font-size: .875rem; color: var(--text-3); }
.p-price { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
/* Browse everything: one box of groups, each a full-width button with its count; our yard first, in forest green. */
.bgroups { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.bgroup + .bgroup { border-top: 1px solid var(--border); }
.bg-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; border: 0; background: none;
  color: var(--heading); font: 700 1rem/1.25 var(--rt-body); letter-spacing: 0; text-align: left; cursor: pointer; }
.bg-head:hover { background: var(--rt-hover); }
.bg-head:focus-visible { outline-offset: -3px; }
.bg-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bg-head .n { color: var(--text-3); font-weight: 600; font-size: .875rem; font-variant-numeric: tabular-nums; }
.bg-head .chev { color: var(--text-3); }
.bg-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.bg-head.yard { color: var(--link); }
.bg-head.yard::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--link); }
.bg-body { border-top: 1px solid var(--border); }
.rows.flat, .spec.bare { border: 0; border-radius: 0; }
.p-sale { display: block; font-size: .875rem; color: var(--link); }
/* Browse everything as one list (Oct 11, 2026): the name box, Filters and Sort; the count and the filters in use as chips;
   then every supplier row. A phone shows each row in three short lines (name and price; size; form · supplier · how many ·
   list date); a computer 1100 px and wider shows a table with column heads. A row opens to show the supplier's own words. */
.pl { display: flex; flex-direction: column; gap: 12px; }
/* On a phone the bar wraps: the name box, then Filters and Sort side by side, or Sort on its own line when its longest
   choice would not fit beside Filters (Larger text). */
.pl-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pl-bar .field.search { flex: 1 1 100%; }
.pl-filters-btn { flex: none; min-height: 48px; padding: 0 18px; white-space: nowrap; }
.pl-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--solid); color: var(--on-solid); font: 700 .8125rem/1 var(--rt-body); font-variant-numeric: tabular-nums; }
.pl-sort { display: flex; flex: 1 0 auto; align-items: center; gap: 8px; max-width: 100%; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.pl-sort select { flex: 1 1 auto; text-overflow: ellipsis; }
.pl-sort-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-sort select { min-height: 48px; max-width: 100%; min-width: 0; padding: 0 40px 0 14px; border: 1.5px solid var(--border-strong); border-radius: var(--r-pill);
  background-color: var(--field); color: var(--text); }
.pl-top { display: flex; flex-direction: column; gap: 8px; }
.pl-count { margin: 0; color: var(--text-2); }
.pl-count strong { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-chips { align-items: center; }
.pl-chip { min-height: 44px; padding: 0 12px 0 16px; }
.pl-chip .ic { width: 16px; height: 16px; color: var(--text-3); }
.pl-rows { margin: 0; padding: 0; list-style: none; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.pl-row + .pl-row { border-top: 1px solid var(--border); }
.pl-head { display: none; }
.pl-main { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "plant price chev" "size size chev" "facts facts chev";
  gap: 2px 12px; align-items: start; width: 100%; padding: 12px 12px 12px 16px; border: 0; background: none; color: var(--text);
  font: 400 1rem/1.35 var(--rt-body); letter-spacing: 0; text-align: left; cursor: pointer; }
.pl-main:hover { background: var(--surface-2); }
.pl-main:focus-visible { outline-offset: -3px; }
.pl-plant { grid-area: plant; display: flex; flex-direction: column; min-width: 0; }
.pl-plant .p-bot { overflow-wrap: anywhere; }
.pl-size { grid-area: size; min-width: 0; font-weight: 600; color: var(--heading); }
.pl-size.unknown { font-weight: 500; color: var(--text-2); }
.pl-orig { font-weight: 400; color: var(--text-3); overflow-wrap: anywhere; }
.pl-facts { grid-area: facts; min-width: 0; font-size: .875rem; color: var(--text-3); }
.pl-facts > span:empty { display: none; }
.pl-facts > span:not(:empty) ~ span:not(:empty)::before { content: " · "; }
.pl-price { grid-area: price; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-main .chev { grid-area: chev; align-self: center; width: 20px; height: 20px; color: var(--text-3); }
.pl-main[aria-expanded="true"] .chev { transform: rotate(180deg); }
.pl-more-info { padding: 4px 16px 16px; }
.pl-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.pl-kv dt { font: 500 .875rem/1.4 var(--rt-body); letter-spacing: 0; color: var(--text-3); }
.pl-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pl-more { align-self: center; margin-top: 4px; }
.pl-left { font-weight: 500; }
/* The filters sheet: each group under a plain heading; Show N plants stays at the bottom of the sheet. */
.pl-sheet { display: flex; flex-direction: column; gap: 24px; }
.pl-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.pl-fs legend { margin-bottom: 8px; padding: 0; font: 700 1.0625rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--heading); }
.pl-fs .seg { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-box); }
.pl-fs .seg button { min-height: 48px; }
.pl-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pl-sheet-foot { position: sticky; bottom: -6px; padding: 12px 0 4px; background: var(--surface); }
.pl-sheet-foot .pair { display: flex; flex-wrap: wrap; gap: 12px; }
.pl-sheet-foot .btn { flex: 1 1 160px; }
@media (min-width: 720px) {
  .pl-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
  .pl-bar .field.search { flex: none; }
  .pl-sort { justify-self: end; }
  .pl-sort-w { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .pl-fs .seg { grid-auto-flow: column; grid-template-columns: none; border-radius: var(--r-pill); }
}
@media (min-width: 1100px) {
  .pl-head, .pl-main { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .6fr) minmax(0, .8fr) 20px;
    grid-template-areas: "plant size form sup qty date price chev"; gap: 0 12px; }
  .pl-head { display: grid; padding: 0 12px 6px 16px; font: 600 .8125rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text-3); }
  .pl-head span:nth-child(7) { text-align: right; }
  .pl-main { align-items: baseline; padding-block: 12px; }
  .pl-facts { display: contents; font-size: .9375rem; color: var(--text-2); }
  .pl-facts > span:not(:empty) ~ span:not(:empty)::before { content: none; }
  .pl-facts > span:empty { display: block; }
  .pl-form { grid-area: form; } .pl-sup { grid-area: sup; } .pl-qty { grid-area: qty; } .pl-date { grid-area: date; }
  .pl-form, .pl-sup { min-width: 0; overflow-wrap: anywhere; }
  .pl-qty, .pl-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pl-w { display: none; }
}

/* ---------- Brandon's Today ---------- */
.dgrid { display: flex; flex-direction: column; gap: 24px; }
.dcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dcol .eb:not(:first-child) { margin-top: 12px; }
@media (min-width: 1000px) { .dgrid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.need { gap: 12px; padding: 20px; }
.need-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.need-h h3 { flex: 1; min-width: 0; font: 700 1.125rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text); overflow-wrap: anywhere; }
.need-h > .pill { flex: none; }
.need-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.need-list li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.need-list li:last-child { border-bottom: 0; }
.need-list .who { font-weight: 600; overflow-wrap: anywhere; }
.need-list .m { color: var(--text-2); }
/* Requests for a feature or a change (requests/request.js): the button at the foot of Greg's and the crew's screens,
   and Brandon's list. */
.req-foot { display: flex; justify-content: center; margin: 24px 0 8px; padding-top: 24px; border-top: 1px solid var(--border); }
.req { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--border); }
.req-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.req-handled summary { cursor: pointer; color: var(--text-2); padding: 8px 0; }
.req-handled .plain { list-style: none; margin: 0; padding: 0; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 116px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; min-width: 0; }
div.tile { cursor: default; }
@media (hover: hover) { button.tile:hover { border-color: var(--link); box-shadow: var(--sh-lift); } }
.tn { font: 700 2.75rem/.95 var(--rt-cond); color: var(--heading); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tn.word { font-size: 1.75rem; line-height: 1.1; }
.tl { font: 600 .875rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text-3); }
.tm { font-size: 1rem; color: var(--text-3); overflow-wrap: anywhere; }
.status { padding: 0; gap: 0; }
.status > summary { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 16px; }
.status > summary:focus-visible { outline-offset: -3px; }
.ok-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--rt-ok-bg); color: var(--rt-ok); }
.ok-ic.warn { background: var(--rt-attn-bg); color: var(--rt-attn); }
.status .s-main strong { font: 600 1.25rem/1.25 var(--rt-body); }
.status-list { list-style: none; margin: 0; padding: 0 20px 6px; border-top: 1px solid var(--border); }
.status-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.status-list li:last-child { border-bottom: 0; }
.status-list li > span:first-child { font-weight: 600; }
.status-list .meta { grid-column: 1; }
.status-list .pill { grid-row: 1 / span 2; grid-column: 2; }
.tbl-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th { padding: 12px 16px; background: var(--surface-2); color: var(--text-2); text-align: left; font: 600 .875rem/1.2 var(--rt-body); letter-spacing: 0; }
.tbl td { padding: 16px; border-top: 1px solid var(--border); vertical-align: top; }
.tbl tbody tr:nth-child(even) td { background: var(--rt-stripe); }
.tbl .who { font-weight: 600; }
.tbl .msgp { margin-top: 6px; max-width: 46ch; color: var(--text-2); white-space: pre-wrap; }
.tbl td:last-child { width: 1%; }
.tbl .acts { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.tbl .acts .btn { white-space: nowrap; }

.qr { display: block; margin: 4px auto 0; background: #fff; image-rendering: pixelated; }
.linkbox { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-box); background: var(--surface-2); font-size: .9375rem; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }

/* ---------- empty state with the website's ridgeline ---------- */
.empty { align-items: center; gap: 8px; padding: 28px 24px; text-align: center; }
.empty .ichip { width: 48px; height: 48px; margin-bottom: 4px; border-radius: 16px; }
.empty .ichip .ic { width: 24px; height: 24px; }
.empty h2 { font: 700 1.125rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--heading); }
.empty p { max-width: 46ch; font-size: .9375rem; color: var(--text-3); }
.empty .voice { font: 600 .9375rem/1.3 var(--rt-body); color: var(--link); }
.empty > .btn { margin-top: 8px; }

/* ---------- whole-screen states: a link that isn't right, owner sign-in, no signal on the first open ---------- */
.gate { min-height: calc(100 * var(--vh)); display: flex; flex-direction: column; background: var(--bg); }
.gate-in { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 24px 24px; text-align: center; }
.gate .lockup { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; text-align: left; }
.gate .lockup .ah-logo { width: 48px; height: 58px; }
.gate .lockup .ah-sub { display: block; }
.gate h1 { font: 700 2.25rem/1.05 var(--rt-cond); letter-spacing: .005em; color: var(--heading); text-wrap: balance; }
.gate p { max-width: 34ch; color: var(--text-2); }
/* Brandon's sign-in under the staff words on the no-link screen: smaller, folded, so it never looks like Greg's page. */
.owner-fold { width: 100%; max-width: 360px; margin-top: 24px; border-top: 1px solid var(--border); text-align: left; }
.owner-fold > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; color: var(--link);
  font: 600 1rem/1.2 var(--rt-body); }
.owner-fold > summary .ic { width: 16px; height: 16px; transition: transform .25s; }
.owner-fold-body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; }
.owner-fold-body > .meta { text-align: center; }
.gate form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; text-align: left; }
.gate .ridge { flex: none; height: 70px; background: var(--ridge) bottom / 100% 70px no-repeat; }

/* ---------- toast and sheet ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--bar-room) + 12px); z-index: 110; width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--toast);
  color: var(--on-toast); font: 500 1rem/1.4 var(--rt-body); box-shadow: var(--sh-toast); opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
  transition: opacity .2s, transform .2s, visibility .2s; }
/* A small dot says how it went: green for done, amber for a problem. */
.toast::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rt-live); }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast.err::before { background: var(--attn-line); }
.toast .btn { min-height: 48px; border-color: var(--toast-line); color: var(--on-toast); }
.no-bnav .toast, .typing .toast { bottom: calc(var(--safe-b) + 16px); }
@media (min-width: 900px) { .toast { bottom: 28px; } }
.sheet-back { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; background: var(--rt-scrim); opacity: 0; transition: opacity .28s; }
.sheet-back.open { opacity: 1; }
.sheet { width: 100%; max-height: calc(92 * var(--vh)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(16px + var(--safe-b)); background: var(--surface);
  border-radius: 28px 28px 0 0; box-shadow: var(--sh-sheet); transform: translateY(28px); transition: transform .28s var(--ease); }
.sheet-back.open .sheet { transform: none; }
.sheet:focus { outline: none; }
/* The sheet's head: the title on the sheet's own colour, Close a soft round button; a small handle on a phone. */
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 18px 12px 12px 20px; background: var(--surface);
  color: var(--heading); border-bottom: 1px solid var(--border); }
.sheet-head::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: var(--r-pill); background: var(--border-strong); }
.sheet-title { flex: 1; font: 700 1.25rem/1.25 var(--rt-body); letter-spacing: 0; overflow-wrap: anywhere; }
.sheet-title:focus { outline: none; }
.sheet-x { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--surface-2);
  color: var(--text); font: 600 .9375rem/1 var(--rt-body); letter-spacing: 0; text-transform: none; cursor: pointer; }
.sheet-x:hover { background: var(--rt-hover); }
.sheet-x .ic { width: 18px; height: 18px; }
.sheet-body { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
@media (min-width: 720px) {
  .sheet-back { align-items: center; justify-content: center; padding: 24px; }
  .sheet { width: 600px; max-height: calc(88 * var(--vh)); padding-bottom: 6px; border-radius: 24px; }
  .sheet-head { padding-top: 14px; }
  .sheet-head::before { display: none; }
}
.menu-sheet .sheet-body { gap: 4px; padding-inline: 12px; }
.menu-sheet .sheet-body button { display: flex; align-items: center; width: 100%; min-height: 60px; padding: 0 8px; border: 0; border-radius: 14px; background: none;
  color: var(--text); font: 600 1.0625rem/1.2 var(--rt-body); letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer; }
.menu-sheet .sheet-body button:hover { background: var(--rt-hover); }
.menu-sheet .sheet-body button[aria-current="page"] { color: var(--heading); background: var(--surface-2); }
/* The ☰ menu's list (round 5): the sidebar's look, a group's screens set in under it, the current one in the pick colour. */
.nav-sheet .sheet-body .mnav button.si { min-height: 52px; padding: 0 12px; gap: 12px; font-weight: 600; color: var(--text-2); }
.nav-sheet .sheet-body .mnav button.si.sub { min-height: 48px; padding-left: 44px; font-weight: 500; }
.nav-sheet .sheet-body .mnav button.si.mg-h.here { color: var(--text); font-weight: 700; }
.nav-sheet .sheet-body .mnav button.si[aria-current="page"] { background: var(--pick); color: var(--on-pick); font-weight: 700; }

/* ---------- skeleton (first load): the header and tabs stay live ---------- */
.skel { display: flex; flex-direction: column; gap: 16px; padding-block: 20px 36px; }
.sk { display: block; position: relative; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); height: 14px; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--rt-shine), transparent);
  animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.sk.h34 { height: 34px; } .sk.h24 { height: 24px; } .sk.h22 { height: 22px; } .sk.h56 { height: 56px; }
.sk.w46 { width: 46%; } .sk.w58 { width: 58%; } .sk.w60 { width: 60%; } .sk.w70 { width: 70%; } .sk.w80 { width: 80%; } .sk.w90 { width: 90%; }
.sk.w100 { width: 100%; } .sk.wpill { width: 70px; }

/* ---------- Ads: the Audience Lab editor (js/ads/ads-editor.js and its sections) ---------- */
.sec-h > .push { margin-left: auto; }
/* Headers wrap ("Cost per / lead") and the padding is small, so the PC shows every Tests column without scrolling sideways
   and a phone shows Audience, Cost per lead and Verdict (the Library: Option and Status, the rest a swipe away). */
.tbl.tight { font-size: 1rem; }
.tbl.tight th { padding: 10px 6px; letter-spacing: .06em; line-height: 1.15; vertical-align: bottom; }
.tbl.tight td { padding: 10px 6px; }
.tbl.tight th:first-child, .tbl.tight td:first-child { padding-left: 12px; }
.tbl.tight th:last-child, .tbl.tight td:last-child { padding-right: 12px; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl.tight th.num { white-space: normal; }
.tbl td.aud { min-width: 190px; max-width: 360px; }
@media (max-width: 719px) { .tbl td.aud { min-width: 150px; } }
.tbl td.aud .meta { margin-top: 2px; overflow-wrap: anywhere; }
.tbl tr.go { cursor: pointer; }
.tbl tr.go:hover td { background: var(--rt-hover); }
.tbl tr.is-off td { color: var(--text-3); }
.tbl tr.is-off .rowbtn { text-decoration: line-through; color: var(--text-3); }
.rowbtn { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; text-align: left;
  cursor: pointer; text-decoration: underline 2px var(--link-line); text-underline-offset: 4px; overflow-wrap: anywhere; }
.rowbtn:hover { text-decoration-color: var(--accent); }
.tbl th .sort { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; margin: -8px 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.tbl th .sort .ic { width: 16px; height: 16px; }
.tbl th[aria-sort="ascending"] .sort .ic { transform: rotate(180deg); }
.row.is-off .row-name { text-decoration: line-through; color: var(--text-3); }
/* The Library's Use? (the sheet's tick box): Yes / No that saves at once. */
.use-t { min-width: 64px; min-height: 48px; margin: -8px 0; padding: 0 14px; border: 2px solid var(--border-strong); border-radius: var(--r-pill); background: var(--field);
  color: var(--text); font: 700 1rem/1 var(--rt-body); letter-spacing: 0; text-transform: none; cursor: pointer; }
.use-t[aria-pressed="true"] { background: var(--pick); border-color: var(--pick); color: var(--on-pick); }
.use-t.bad { border-color: var(--rt-bad); background: var(--rt-bad-bg); color: var(--rt-bad); }
.use-t[disabled] { opacity: .6; cursor: default; }
.row > summary .pill { flex: none; }
.row-main > .pill { align-self: flex-start; margin-top: 4px; }
.form-status:empty { display: none; }
.sug .srow { padding-bottom: 6px; }
.sug > .banner { margin: 0 14px 12px; }
/* The idea form's option pickers: the names chosen (each with a ×), the search box, and the Library's matches. */
.opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 48px; max-width: 100%; padding: 0 0 0 14px; border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill); background: var(--field); font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.opt-chip.warn { border-color: var(--bark-ink); background: var(--rt-warn-bg); }
.opt-note { color: var(--text-3); }
.opt-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 46px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--text-2); cursor: pointer; }
.opt-x:hover { background: var(--rt-hover); }
.opt-x .ic { width: 18px; height: 18px; }
.opt-sugg { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-box); background: var(--surface); }
.opt-sugg:empty { display: none; }
.opt-s { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.opt-s:last-child { border-bottom: 0; }
.opt-s:hover, .opt-s:focus-visible { background: var(--rt-hover); }
.opt-s:focus-visible { outline-offset: -3px; }
.opt-s-name { font-weight: 600; overflow-wrap: anywhere; }
.opt-s-sub { font-size: 1rem; color: var(--text-3); }
.picker .searchbar input { min-width: 0; }
ol.steps { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; font-size: 1rem; color: var(--text-2); }
/* Cards: the chooser (ticks) and the cards themselves, laid out like the sheet's Audience Cards tab. */
.checks { display: flex; flex-direction: column; }
.checks .grp-h { margin: 8px 0 0; }
.checks label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 2px; border-bottom: 1px solid var(--border); cursor: pointer; }
.checks input[type="checkbox"], .disc-row input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--go); }
.ck-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; overflow-wrap: anywhere; }
.ad-cards { display: flex; flex-direction: column; gap: 12px; }
.ad-cards-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--r-box); background: var(--bar); color: var(--on-bar); }
.ad-cards-head h2 { font: 700 1.375rem/1.1 var(--rt-cond); letter-spacing: .04em; text-transform: uppercase; }
.ad-logo { flex: none; width: 30px; height: auto; }
.ad-cards-intro { font-size: 1rem; color: var(--text-2); }
.ad-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { .ad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-card { display: flex; flex-direction: column; border: 2px solid var(--card-rule); border-radius: 4px; background: var(--field); text-align: center;
  font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; break-inside: avoid; }
.ad-card > * { padding: 6px 10px; }
.ad-card.old { border-color: var(--attn-line); }
.ad-t { font: italic 600 1.0625rem/1.3 var(--rt-body); text-decoration: underline; border-bottom: 1px solid var(--card-rule); }
.ad-2 { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--card-rule); padding: 0; }
.ad-2 p { padding: 4px 8px; }
.ad-2 p:nth-child(odd) { border-right: 1px solid var(--card-rule); }
.ad-h { font-weight: 600; text-decoration: underline; }
.ad-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; align-items: center; }
.ad-gl { font-style: italic; color: var(--text-2); white-space: pre-line; }
.ad-g ul { margin: 0; padding: 0; list-style: none; font-weight: 600; }
.ad-r { font-weight: 600; border-top: 1px solid var(--card-rule); border-bottom: 1px solid var(--card-rule); }
.ad-w { font-style: italic; font-size: .9375rem; }
.ad-k { font-size: .9375rem; }
.ad-f { font-size: .875rem; color: var(--text-3); white-space: pre-wrap; }
/* Generate and Discovery. */
.gen { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.gen:last-child { border-bottom: 0; }
.gen-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.disc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.disc-row:last-child { border-bottom: 0; }
.disc-row.is-off .p-name { color: var(--text-3); }
.disc-main { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.disc-main > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.disc-main .sz { font-size: 1rem; color: var(--text-3); }
/* A pair of fields whose values run long (themes, sources): one under the other on a phone, so neither is cut off. */
@media (max-width: 539px) { .two.loose { grid-template-columns: minmax(0, 1fr); } }
.disc-sel { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; } /* themes run longer than layers */
.disc-sel .field { gap: 4px; }
.disc-sel .flabel { font-size: .875rem; }
@media (min-width: 900px) { .disc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; } }
.goal-tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Recently deleted (under Tests, Ideas and the Library) and Goals → Dropdown lists: folds with a row per value. */
.fold.deleted { margin-top: 4px; }
.fold.deleted .fold-body > .plain { margin: 0 -16px; }
.lists > .fold + .fold { margin-top: 0; }
.choice-list { margin: 0 -16px; }
.choice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.choice-row:last-child { border-bottom: 0; }
.choice-row .p-name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.choice-row.is-off .p-name { color: var(--text-3); text-decoration: line-through; }
.choice-sw { display: inline-flex; align-items: center; gap: 8px; }
.choice-sw .sz { font-size: .9375rem; color: var(--text-3); }
.choice-sw .use-t { margin: 0; }
.choice-row > .banner { flex: 1 1 100%; }
/* Results from Meta (ads-meta.js): Refresh with the last run beside it, the Meta mark of a linked test and its locked
   numbers, New from Meta's ad sets (Link to idea… and Not an audience test under each), Goals → Meta results. */
.meta-bar { display: flex; flex-direction: column; gap: 8px; }
.meta-run { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; }
.meta-run > .btn { flex: none; }
.meta-run-t { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.meta-run-t .meta { font-size: 1rem; }
.field input.locked { border-style: solid; background: var(--surface-2); color: var(--text-2); }
.meta-accts .choice-list { border-left: 0; border-right: 0; border-radius: 0; }
.meta-key .srow { padding: 0; }
.meta-accts > .flabel, .meta-key > .flabel { font: 600 1rem/1.2 var(--rt-cond); letter-spacing: 0; color: var(--label); }
/* The Ads overview (ads-overview.js): the week's numbers, Running now in Meta, What to do next; then the tabs and their
   short lines (ads-editor.js), and the "How … works" folds that keep the rules one tap away. */
.ads-ov { gap: 16px; padding-bottom: 20px; border-bottom: 2px solid var(--border-strong); }
/* Tool settings (tool-settings.js): the settings in folding groups and each message a folding row; a dot and "Changed"
   by the name of one that holds an unsaved edit. */
.ts-rows .row-name { font-weight: 700; }
.ts-rows .row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-changed { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 700 .875rem/1 var(--rt-body); color: var(--rt-attn); }
.ts-changed .dot { width: 7px; height: 7px; background: var(--alert); }
.ov-tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ov-tiles .tile { min-height: 0; }
.ov-tiles .tn { font-size: 2.25rem; }
.ov-tiles .tn.word { font-size: 1.75rem; }
.ov-tiles .tm .pill { margin-right: 6px; }
/* Google Ads in the Hub (docs/google-ads-in-hub.md): the channel switch, All's four tiles (two by two on a phone), an ad
   group under its campaign, the searches' copy box and the Goals tick. */
.ch-switch button { min-height: 48px; }
.all-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.g-row.ad_group { margin-left: 16px; border-left: 3px solid var(--border); }
.copy-text[data-part="negatives"] { white-space: pre-wrap; overflow-wrap: anywhere; }
.term-list { margin: 0; }
.g-goals .check { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.g-goals .check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--go); }
/* A phone: the three numbers side by side, smaller, so Running now shows without a long scroll. */
@media (max-width: 599px) {
  .ov-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ov-tiles .tile { padding: 10px 10px 12px; }
  .ov-tiles .tn, .ov-tiles .tn.word { font-size: 1.375rem; }
  .ov-tiles .tl { font-size: .75rem; letter-spacing: .06em; }
  .ov-tiles .tm { font-size: .875rem; }
  .ov-tiles .tm .pill { display: inline-block; max-width: 100%; min-height: 0; padding: 2px 6px; font-size: .75rem; margin: 2px 0; }
  .ov-tiles.all-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-row.ad_group { margin-left: 8px; }
}
.ov-run, .ov-next { gap: 10px; }
.live-list { margin: 0; }
.live-foot { justify-content: space-between; }
.live-foot .meta { flex: 1 1 240px; }
.todo .p-name { overflow-wrap: anywhere; }
.b-why { white-space: pre-wrap; overflow-wrap: anywhere; }
.tab-intro { font-size: 1.0625rem; color: var(--text-2); }
.how > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-2); font-weight: 600; }
.how > summary .chev { width: 18px; height: 18px; }
.how > .meta { padding: 0 0 4px; }

/* ---------- the Ads redesign (docs/ads-redesign.md): drop-downs, Running now rows, test cards, questions ---------- */
.ads-folds { gap: 12px; }
.ads-fold { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.ads-fold > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; }
.ads-fold > summary:focus-visible { outline-offset: -3px; }
.ads-fold > .fold-body { padding: 12px 16px 16px; }
.ads-fold .s-main > .meta { font-size: 1rem; }
.ads-fold.stage { background: var(--surface-2); }
.ads-fold.stage > summary { min-height: 56px; }
.ads-fold.stage > summary .s-main > strong { font: 700 1.125rem/1.15 var(--rt-cond); letter-spacing: 0; color: var(--heading); }
.ads-part { gap: 12px; }
.t-groups { gap: 8px; }
.vp-l { font: 600 .875rem/1 var(--rt-cond); letter-spacing: 0; color: var(--label); }
.live-row { display: block; padding: 0; }
.live-row + .live-row { border-top: 1px solid var(--border); }
.live-fold { border: 0; border-radius: 0; background: none; }
.live-row.attention { border-left: 4px solid var(--attn-line); }
.big-cpl { font: 700 2.25rem/1 var(--rt-cond); color: var(--heading); font-variant-numeric: tabular-nums; }
.big-cpl.word { font-size: 1.5rem; }
.ads-fold.barely { margin-top: 8px; background: var(--surface-2); }
.copy-block { gap: 6px; }
.copy-text { white-space: pre-line; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-box); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.q-list > li + li { border-top: 1px solid var(--border); }
.questions .searchbar select { min-width: 0; }
.need .questions { margin: 0 -2px; }

/* ---------- phones: 56 px buttons (SPEC 7) ---------- */
/* Every button Greg's guide names is 56 px tall on a phone: the small ones (Set date, Done, Put back, Copy text, Print
   today's jobs, Copy schedule for Abel, + Add a job, Open the Board, Undo), the link-style ones (Change) and Other
   choices. The "1 late" jump gets the same reach. Staying 48 px: secondary text links (.flush: Show earlier, Change the
   wording, + Another plant), the header's Refresh (it has to fit the 56 px header) and the jump chips, which aren't on
   the guide and would push Greg's first job further down. */
@media (max-width: 719px) {
  .btn.small, .btn.link, .toast .btn, .toggles button, .other > summary { min-height: 56px; }
  .btn.link.flush, .ah .btn.small { min-height: 48px; }
  .pill.jump::after { inset: -14px -6px; }
}

/* ---------- Greg-friendly (Hub feature plan, Batch 1) ---------- */
/* The menu (Greg and the crew): a person icon on a phone, with the name beside it on the PC. */
.btn.small.ah-me { gap: 8px; padding: 0 14px; }
.btn.small.ah-me .ic { width: 22px; height: 22px; }
.ah-me .ah-who { color: inherit; }
/* The Larger text switch, in that menu (and under Brandon's gear). */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 64px; padding: 8px 4px; border: 0;
  border-top: 1px solid var(--border); background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.sw-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-name { font: 700 1rem/1.25 var(--rt-body); letter-spacing: 0; }
.sw-what { font-size: .875rem; line-height: 1.35; color: var(--text-3); text-transform: none; letter-spacing: 0; font-family: var(--rt-body); font-weight: 400; }
.sw-track { position: relative; flex: none; width: 56px; height: 32px; border-radius: 16px; background: var(--track); border: 2px solid var(--border-strong); }
.sw-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06);
  transition: transform .2s var(--ease); }
.switch[aria-checked="true"] .sw-track { background: var(--go); border-color: var(--go); }
.switch[aria-checked="true"] .sw-knob { transform: translateX(24px); }
.menu .switch { padding: 8px 12px; min-height: 64px; border-radius: 0; }
.menu-sheet .sheet-body button.switch { min-height: 64px; margin-top: 8px; padding-inline: 4px; border-top: 1px solid var(--border); border-radius: 0; text-transform: none; font: inherit; }
/* The Look (js/look.js), under Larger text in the same menus: its name and line, then Light · Dark · Match my phone as
   a segmented choice. The menu's and the Settings sheet's own button styles are undone for its three buttons. */
.look { display: flex; flex-direction: column; gap: 10px; padding: 12px 4px 10px; border-top: 1px solid var(--border); color: var(--text); }
.menu .look { padding: 12px 12px 14px; }
.look .seg button, .menu .look .seg button, .menu-sheet .sheet-body .look .seg button { display: flex; justify-content: center; width: auto; min-height: 48px;
  padding: 6px 4px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text); font: 600 .9375rem/1.15 var(--rt-body);
  letter-spacing: 0; text-transform: none; text-align: center; }
.look .seg button[aria-pressed="true"], .menu .look .seg button[aria-pressed="true"], .menu-sheet .sheet-body .look .seg button[aria-pressed="true"] {
  background: var(--pick); color: var(--on-pick); }
.look .seg button .ic { flex: none; width: 16px; height: 16px; }
/* The "?" on each of Greg's screens: a round button at the end of the title row. */
.st > .help-q { margin-left: auto; }
.st > .push + .help-q { margin-left: 0; }
.help-lines p { font-size: 1.125rem; line-height: 1.45; }
/* The Money view on Brandon's Today. A big number never breaks inside itself ("$13,508.0" over "2", Oct 11, 2026):
   no wrapping in it, and its size follows the tile's width (cqi) so the whole number fits. As many tiles across as fit,
   at least 150 px each: two on a phone, four on a computer. */
.money-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.money-tiles .tile { min-height: 0; container-type: inline-size; }
.money-tiles .tn { font-size: 1.75rem; font-size: min(2.25rem, 20cqi); white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.money-tiles .tm.ly { color: var(--text-2); }
@media (max-width: 479px) { .money-tiles .tile { padding: 14px; } }
.money-list { gap: 8px; }
/* Each money list's title in sentence case, about 18 px bold (Hub design standard: no all-caps titles). */
.money-list .sub-h { font: 700 1.125rem/1.25 var(--rt-body); letter-spacing: 0; text-transform: none; }
/* Each money list folded under its heading and count (Brandon, Oct 10, 2026), on a phone and the PC alike. */
.money-fold > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.money-fold > summary .sub-h { margin: 0; }
.money-fold > summary .chev { margin-left: auto; }
/* Balances owed with a Clear on each row (Brandon, Oct 11, 2026; js/today/money-clear.js): who and what on the left,
   the pill button on the right (48 px tall, .btn.small); "N cleared · Show" under the list; the reason sheet. */
.owed-list .owed-row { flex-wrap: nowrap; align-items: center; gap: 12px; }
.owed-row .owed-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.owed-row > .btn { flex: none; }
.owed-row .num, .owed-row .amt, .clear-sheet .amt { white-space: nowrap; }
.owed-list { border-top-style: solid; }
.owed-list li { border-bottom-style: solid; }
.owed-row .owed-by { font-size: .875rem; color: var(--text-3); }
.owed-cleared { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.owed-cleared-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.owed-cleared-list { margin-top: 2px; }
.clear-sheet .sheet-title { font: 700 1.25rem/1.2 var(--rt-body); letter-spacing: 0; text-transform: none; }
.clear-sheet .clear-reasons { gap: 10px; }
.clear-sheet .clear-what { font-weight: 700; font-size: 1.125rem; color: var(--heading); overflow-wrap: anywhere; }
.clear-sheet .clear-why { margin-top: 6px; font-weight: 600; color: var(--text); }
/* Brandon's Today, the new look (Hub look, PR C, Oct 11, 2026): the greeting with its status line, the today card,
   today's stops, Needs you and the money; on a computer with room, the card and the money across, the stops and Needs
   you side by side (Needs you wider). Only under .owner-today, so no other screen changes. */
.owner-today .greet { display: flex; flex-direction: column; gap: 6px; }
.owner-today .greet h1 { font: 700 2.125rem/1.02 var(--rt-cond); letter-spacing: .005em; color: var(--heading); overflow-wrap: anywhere; }
@media (min-width: 720px) { .owner-today .greet h1 { font-size: 2.75rem; } }
.greet-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 1rem; color: var(--text-3); }
.greet-sub .sep { color: var(--text-3); }
.greet-sub .fresh { display: inline-flex; }
/* The list's own dot only when it is old or failed (amber or red); the status line carries the green one. */
.greet-sub .fresh .dot:not(.old):not(.down) { display: none; }
.ot-stop-list { list-style: none; margin: 0; padding: 2px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.ot-stop { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ot-stop:last-child { border-bottom: 0; }
.ot-stop .ot-sw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ot-stop .ot-town { font-weight: 700; font-size: 1.125rem; color: var(--heading); }
.ot-stop .ot-what { color: var(--text-2); overflow-wrap: anywhere; }
.ot-stop .pill { flex: none; }
.checks-sheet .status-list { padding: 0 16px; border-top: 0; }
/* Home (round 5): Needs your attention, Money, then today's stops, one column on a phone. From 1000 px Needs your
   attention and Money sit side by side and the stops sit under Needs your attention, in the room beside Money (Brandon,
   Oct 13, 2026); the second row is 1fr so a tall Money column never pushes the stops down. */
.ot-grid { display: flex; flex-direction: column; gap: 28px; }
@media screen and (min-width: 1000px) {
  .ot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 28px 32px; align-items: start; }
  .ot-grid > .ot-needs { grid-column: 1; grid-row: 1; }
  .ot-grid > .money { grid-column: 2; grid-row: 1 / span 2; }
  .ot-grid > .ot-stops { grid-column: 1; grid-row: 2; }
  .ot-grid > .ot-needs:only-child { grid-column: 1 / -1; }
  /* Nothing needing attention: no Attention section, so the stops move up beside Money (Brandon, Oct 14, 2026). */
  .ot-grid > .money:first-child + .ot-stops { grid-row: 1 / span 2; }
  .ot-grid > .ot-stops:only-child { grid-column: 1 / -1; grid-row: 1; }
}
/* Needs your attention: one line each, a tile per line (a drawing, the name, the count with its dot, ›). */
.need-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.need-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 14px; border: 0; border-radius: var(--r-box);
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
button.need-row:hover { background: var(--surface-2); }
.need-row .ichip { width: 36px; height: 36px; background: var(--surface-2); color: var(--text); }
.need-row .ichip .ic { width: 20px; height: 20px; }
.nr-t { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.nr-n { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 700 1.25rem/1 var(--rt-cond); white-space: nowrap; }
.dot-before::before { content: ""; flex: none; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--alert); vertical-align: middle; }
.nr-n.dot-before::before { margin-right: 0; }
.need-row .go { flex: none; color: var(--text-3); transform: rotate(-90deg); }
.ot-needs { display: flex; flex-direction: column; gap: 12px; }
/* A card opened from its line: in the sheet without its own frame or head. */
.card.need.in-sheet { padding: 0; border: 0; background: none; box-shadow: none; }
.ot-stops .sec-h .push { margin-left: auto; }
.ot-wrapup .ot-wl { color: var(--text-2); }
.ot-wrapup .ot-ws { font: 700 1.375rem/1.1 var(--rt-cond); color: var(--heading); }

.money-list .more-rows > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; color: var(--link); font-weight: 600; }
.dcol .money .eb { margin-top: 14px; }

/* ---------- Larger text (on by default for Greg; anyone can turn it on in their menu: js/big-text.js) ---------- */
/* <html> makes 1rem 19 px instead of 16 (every type size is in rem); <body> sets what is sized in px through these
   variables: the tap heights, the bottom bar, the header and the gaps. Long words wrap rather than push the page wider,
   so nothing scrolls sideways at 320 px. */
html.big-text { font-size: 118.75%; }
body.big-text { --nav-h: 72px; --tap: 64px; --tap-s: 56px; --ah-h: 64px; --gap: 32px; }
body.big-text .ah .wrap { height: var(--ah-h); }
body.big-text .ah .btn.small { min-height: 52px; }
body.big-text .btn { min-height: var(--tap); }
body.big-text .btn.small, body.big-text .btn.link, body.big-text .chip, body.big-text .toggles button, body.big-text .toast .btn { min-height: var(--tap-s); }
body.big-text .btn.link.flush { min-height: 52px; }
body.big-text .screen { gap: var(--gap); }
body.big-text .card { padding: 18px; }
body.big-text .btn .ic { width: 22px; height: 22px; }
body.big-text .field input, body.big-text .field select { min-height: var(--tap); }
body.big-text .seg button { min-height: var(--tap); }
body.big-text .ah-brand { font-size: 1.25rem; }
body.big-text main, body.big-text .card, body.big-text .sheet-body { overflow-wrap: anywhere; }
/* At Larger text the header's words need 400 px beside Refresh and the menu (at 390 they pushed it 2 px wider): below
   that the badge logo stays and the words go, as on Brandon's narrow phone. */
@media (max-width: 399px) { body.big-text .ah-brand { display: none; } }
@media (max-width: 379px) { body.big-text .st h1 { font-size: 1.875rem; } }
@media (min-width: 720px) { body.big-text .ah .wrap { height: 72px; } }

/* ---------- print: Greg's "Print today's jobs" (only Today prints, black on white) ---------- */
.print-head { display: none; }
@page { size: letter; margin: .5in; }
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #fff; --text: #000; --text-2: #222; --text-3: #333; --border: #777; --heading: #000; --label: #000; }
  body { background: #fff; color: #000; font: 400 12pt/1.35 var(--rt-body); -webkit-print-color-adjust: economy; print-color-adjust: economy; }
  .top, .practice, .bnav, .side, .dtabs, .toast, .sheet-back, .noprint, button, .btn, .pair, .chips, .under, .tag, .collect-chip { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  main { padding: 0 !important; }
  .screen { padding: 0; gap: 8pt; }
  .st { display: none; }
  .print-head { display: flex !important; align-items: center; gap: 10px; margin: 0 0 10pt; padding-bottom: 6pt; border-bottom: 2pt solid #000; }
  .print-head img { height: 36px; width: auto; }
  .print-head h1 { margin: 0; font: 700 20pt/1 var(--rt-cond); text-transform: uppercase; letter-spacing: .04em; }
  .print-head .when { margin-left: auto; font: 600 12pt var(--rt-cond); text-transform: uppercase; letter-spacing: .1em; }
  .card, .card.attn, .card.calm, .card.bad { break-inside: avoid; border: 1pt solid #777; border-left: 3pt solid #000; border-radius: 0; box-shadow: none; padding: 6pt 8pt; margin: 0 0 6pt; gap: 3pt; }
  .name { font-size: 13pt; }
  .spec { break-inside: avoid; border: 0; }
  .spec > h3, .spec > summary { background: none; color: #000; border-bottom: 1pt solid #000; padding: 2pt 0; min-height: 0; }
  .spec ul { padding: 0; }
  .spec li { border-bottom: .5pt dashed #777; padding: 3pt 0 3pt 14pt; }
  .pill { background: none !important; border: 1pt solid #000 !important; color: #000 !important; min-height: 0; }
  .collect { border: 0; border-left: 3pt solid #000; border-radius: 0; background: none; font-weight: 700; color: #000; }
  .note { background: none; border-left: 1pt solid #000; border-radius: 0; padding: 2pt 6pt; }
  .eb { color: #000; font: 700 14pt/1 var(--rt-cond); margin: 10pt 0 4pt; }
  .eb .n { background: none; color: #000; padding: 0; min-width: 0; height: auto; font: inherit; }
  .ichip, .av, .go { display: none !important; }
  .list, .rows, .plain, .sheet, .banner, .tag { border-radius: 0; box-shadow: none; }
  .trees li::before, .spec li::before { background: #000; }
  .spec li::before { top: calc(3pt + .5em); left: 2pt; }
  .preview { display: none; }
  /* The Ads screen prints only its cards (Cards section, "Print cards"): two to a row, black on white. */
  /* The Ads screen prints only Tools → Cards (both drop-downs open): no summaries, no frames, nothing else. */
  [data-screen="ads"] .lede, [data-screen="ads"] .ad-cards-sec > :not(.ad-cards), [data-screen="ads"] summary { display: none !important; }
  [data-screen="ads"] .ads-fold { border: 0 !important; background: none !important; }
  [data-screen="ads"] .ads-fold > .fold-body { padding: 0; border: 0; }
  .ad-cards { gap: 6pt; }
  .ad-cards-head { background: none; color: #000; border-bottom: 2pt solid #000; border-radius: 0; padding: 0 0 4pt; }
  .ad-cards-head h2 { font-size: 16pt; }
  .ad-logo { width: 22pt; }
  .ad-cards-intro { font-size: 9pt; color: #000; }
  .ad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8pt; }
  .ad-card { border: 1.25pt solid #000; font-size: 9.5pt; line-height: 1.25; }
  .ad-card > * { padding: 3pt 6pt; }
  .ad-card .ad-2, .ad-card .ad-2 p, .ad-t, .ad-r { border-color: #000 !important; }
  .ad-t { font-size: 10.5pt; }
  .ad-gl, .ad-f { color: #000; }
  .ad-w, .ad-k { font-size: 8.5pt; }
  .ad-f { font-size: 8pt; }
}

/* ---------- Batch 1, operations: Virginia 811 and the equipment log (docs/batch1-ops.md) ---------- */
.dig-box { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.copy-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.copy-row dt { grid-column: 1 / -1; font: 500 .875rem/1.3 var(--rt-body); color: var(--text-3); }
.copy-row dd { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.copy-row .why { font-size: .875rem; color: var(--text-3); }
.copy-val { font-weight: 600; white-space: pre-wrap; }
.photo-link { display: inline-block; max-width: 100%; }
.problem-photo { display: block; width: 100%; max-width: 320px; height: 180px; object-fit: cover; border-radius: 14px; border: 1px solid var(--border); }

/* ---------- Customers (Batch 2; docs/customers.md) ---------- */
.namelink { display: inline; min-height: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }
.namelink:hover, .namelink:focus-visible { text-decoration-color: var(--accent); }
.namelink.name { font: 700 1.125rem/1.3 var(--rt-body); }
/* A tick box with its words (Stock's "lost" undo, the Google ads settings). */
label.check { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; }
label.check input[type="checkbox"] { width: 24px; height: 24px; margin: 0; accent-color: var(--go); }

/* ---------- The Meta naming tidy-up: levels, paths, Rename in Meta (docs/meta-names.md) ---------- */
.level-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pill.level-tag { min-height: 22px; padding: 1px 6px; font-size: .875rem; }
.path-line { overflow-wrap: anywhere; }
.ads-of { display: flex; flex-direction: column; gap: 0; margin: 0; }
.ad-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.rename-filter { margin: 4px 0 8px; }
.rename-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.rename-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--border); min-width: 0; }
.rename-row.state-renamed { opacity: .8; }
.rename-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rename-old { margin: 0; overflow-wrap: anywhere; }
.rename-old .old-name { text-decoration: line-through; text-decoration-color: var(--text-3); }
.rename-arrow { display: flex; align-items: center; gap: 4px; }
.rename-arrow .chev { transform: rotate(-90deg); }
.rename-new { width: 100%; min-width: 0; font-weight: 600; }
.rename-ticks { flex-wrap: wrap; gap: 8px 16px; }
.rename-ticks .check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.rename-foot { gap: 6px; margin-top: 12px; }

/* ---------- Pause, resume and budgets in Meta (js/ads/ads-edit.js; docs/meta-edit-contract.md) ---------- */
/* WP2 owns this block: every class of the feature starts with .me- and lives here, nowhere else. */
.me-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.me-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.me-budget > p { margin: 0; overflow-wrap: anywhere; }
.me-sheet .me-what { overflow-wrap: anywhere; }
.me-sheet .me-now { margin: 0; font-weight: 700; }
.me-sheet .me-said { overflow-wrap: anywhere; }
.me-quick { gap: 8px; }
.me-quick .btn { flex: 1 1 0; min-width: 72px; }
.me-change { margin: 0; font-weight: 600; }
.me-change:empty { display: none; }
.me-problem { margin: 0; color: var(--rt-bad); font-weight: 600; }
.me-problem[hidden] { display: none; }
/* ---------- end of Pause, resume and budgets in Meta ---------- */

/* ---------- Simplified Ads: audiences, the Testing label, jobs to credit (js/ads/ads-audiences.js, ads-credits.js) ---------- */
.meta-word { font: 400 .875rem/1.3 var(--rt-body); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.pill.test-tag { background: var(--rt-neutral-bg); color: var(--heading); box-shadow: inset 0 0 0 1px var(--border-strong); }
.live-row > .nudge, .past-row > .nudge, .live-row > .me-acts { padding: 0 16px 12px; }
.nudge { gap: 6px; }
.nudge-t { margin: 0; font-weight: 700; color: var(--rt-attn); }
.test-note { color: var(--text-2); overflow-wrap: anywhere; }
.test-block { gap: 8px; padding: 10px 14px; background: var(--surface-2); border-radius: var(--r-box); }
.test-block > .sub-h { margin: 0; }
.test-result { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.note-box { gap: 8px; }
.past-list { margin: 0; }
.past-row + .past-row { border-top: 1px solid var(--border); }
.ov-past { gap: 10px; }
.ov-past .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.credits-fold.attn { border-left: 4px solid var(--attn-line); }
.credits-done > li + li { border-top: 1px solid var(--border); }
.old-tests .p-name { font-weight: 600; }
/* Hub clarity (Oct 10, 2026): Running now and Past audiences read as sections of their own under the glance tiles, and
   the verdict key sits right under the lede. */
.ads-ov > .ov-run, .ads-ov > .ov-make, .ads-ov > .ov-past { margin-top: 8px; padding-top: 20px; border-top: 2px solid var(--border); }
/* Past audiences, closed at first: its heading is the drop-down's line. Make new ads: one plain line per build. */
.past-all > summary .sub-h { margin: 0; }
.past-all > .fold-body { padding: 12px 16px 16px; }
.ov-make { gap: 10px; }
.ab-entry .btn.link.ab-line { font: 600 1.0625rem/1.35 var(--rt-body); letter-spacing: 0; text-transform: none; }
.ads-key { margin-top: -14px; }
.ads-key .s-main strong { font-size: 1.125rem; }
.verdict-key dt { white-space: nowrap; }
/* ---------- end of Simplified Ads ---------- */

/* ---------- Batch 3: job photos and Google reviews (docs/job-photos.md, docs/reviews.md) ---------- */
.photos-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 0; border-top: 1px solid var(--border); margin-top: 4px; }
.photos-row .acts, .photo-remind { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photo-tile { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.job-photo { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); }
.photo-queue li.bad .m { color: var(--rt-bad); }
.review { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border); }
.review:first-of-type { border-top: 0; }
.review-top { margin: 0; overflow-wrap: anywhere; }
.stars { letter-spacing: .05em; color: var(--rt-attn); }

/* ---------- Facebook messages straight from Facebook (docs/messenger-contract.md): Setup's card, Replies' Facebook card ---------- */
/* The page side of Messenger owns this block: every class of the feature starts with .fb- and lives here, nowhere else. */
.fb-conn .fb-checks .srow { align-items: flex-start; }
.fb-words { min-width: 0; overflow-wrap: anywhere; }
.fb-callback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.fb-callback code { min-width: 0; overflow-wrap: anywhere; font-size: 1rem; }
.fb-pic { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.fb-avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-3); }
.fb-avatar .ic { width: 18px; height: 18px; }
.fb-ad { margin: 0; font-size: 1rem; color: var(--text-2); overflow-wrap: anywhere; }
.fb-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; white-space: normal; }
.fb-photo { display: block; flex: none; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.fb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fb-nophoto { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 4px;
  font-size: 1rem; color: var(--text-3); }
.fb-more { font-size: 1rem; color: var(--text-3); }
.fb-seen { margin-top: 4px; font-size: .875rem; color: var(--text-3); text-align: right; white-space: normal; }
/* ---------- end of Facebook messages straight from Facebook ---------- */

/* ---------- less motion when asked ---------- */
/* (The calm redesign moved this to "Calm redesign: reduce motion" at the end: plain fades instead of none at all.) */

/* ---------- The triangle view and the ad builder (js/ads/ads-triangle.js, ads-builder.js; docs/ads-builder-contract.md) ---------- */
/* WEB owns this block: every class of the feature starts with .tri- or .ab- and lives here, nowhere else. The lines between
   blocks are borders (no images); a wide row scrolls sideways inside its card, never the page. */
.tri-list { gap: 14px; }
.tri-card { gap: 6px; padding: 12px 0 14px; }
.tri-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: 2px 8px 6px; }
/* A PC: no snapping (the tree sits centred and only scrolls when it truly doesn't fit). */
@media (min-width: 720px) { .tri-scroll { scroll-snap-type: none; } }
.tri-tree { display: flex; flex-direction: column; align-items: center; width: max-content; min-width: 100%; }
.tri-block { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; background: var(--field);
  border: 2px solid var(--border-strong); border-radius: var(--r-box); overflow-wrap: anywhere; scroll-snap-align: center; }
.tri-camp { width: min(320px, calc(100vw - 72px)); align-items: center; text-align: center; background: var(--surface-2); border-color: var(--ink-strong); }
/* A row wider than the phone: the campaign block, and each audience over its own ads, stay in sight while the row
   scrolls sideways under them (sticky on both sides, within the tree or the audience's column). */
.tri-camp, .tri-aud { position: sticky; left: 8px; right: 8px; }
/* Fixed widths, so the tree is as wide as its blocks: 260 an audience the builder draws, 320 one with its own row (the
   live and past rows carry pills and Pause · Budget · +20%), 200 an ad (five ads side by side fit a PC's card). */
.tri-aud { width: min(260px, calc(100vw - 72px)); }
.tri-aud.tri-own { width: min(320px, calc(100vw - 72px)); padding: 8px 4px 4px; }
.tri-aud.tri-own > .tri-tag { padding-inline: 10px; }
.tri-ad { width: 200px; border-width: 1px; background: var(--surface); }
.tri-off { opacity: .8; }
/* The line down from a block is drawn by the block itself (.tri-down), so it stays under it when the block is held in
   sight on a phone; .tri-stem only keeps the room for it. */
.tri-stem { flex: none; width: 0; height: 16px; }
.tri-row, .tri-ads { display: flex; align-items: flex-start; justify-content: center; }
.tri-col, .tri-adcol { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 4px; }
.tri-many > .tri-col, .tri-many > .tri-adcol { padding-top: 16px; }
.tri-many > .tri-col::before, .tri-many > .tri-adcol::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 2px solid var(--border-strong); }
.tri-many > :first-child::before { left: 50%; }
.tri-many > :last-child::before { right: 50%; }
.tri-many > .tri-col::after, .tri-many > .tri-adcol::after { content: ""; position: absolute; top: 0; left: calc(50% - 1px); height: 16px; border-left: 2px solid var(--border-strong); }
.tri-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 .9375rem/1.2 var(--rt-cond); letter-spacing: 0; color: var(--label); }
.tri-hint { font: 400 .9375rem/1.2 var(--rt-body); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.tri-name { font-weight: 700; }
/* A block's lines (ads-triangle.js ln): each on its own line whatever holds it; a small muted label, then the value. */
.tri-block .tri-name, .tri-block .tri-ln { display: block; max-width: 100%; min-width: 0; }
.tri-block .tri-name { line-height: 1.25; }
.tri-ln { font-size: .9375rem; line-height: 1.35; }
.tri-lbl { font-size: .875rem; color: var(--text-3); }
.tri-block .tri-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tri-block .tri-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tri-budget .tri-val { font: 700 1.25rem/1.1 var(--rt-cond); letter-spacing: .02em; color: var(--heading); }
.tri-block .ab-made, .tri-block .ab-needs, .tri-block .ab-refused { margin-top: 2px; line-height: 1.3; }
.tri-camp .tri-name { font: 700 1.375rem/1.1 var(--rt-cond); letter-spacing: .03em; color: var(--heading); }
.tri-camp .tri-tag { justify-content: center; }
.tri-big { font: 700 1.5rem/1.1 var(--rt-cond); color: var(--heading); }
.tri-big.word { font-size: 1.25rem; }
.tri-block .sz { font-size: 1rem; color: var(--text-3); }
.tri-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; }
.tri-camp .tri-acts { align-items: center; }
.tri-body { margin: 0; }
.tri-aud .live-row { display: block; padding: 0; }
.tri-grey { color: var(--text-2); }
.tri-grey .tri-block { background: var(--surface-2); border-color: var(--muted-line); }
.tri-grey .tri-many > .tri-col::before, .tri-grey .tri-many > .tri-col::after,
.tri-grey .tri-many > .tri-adcol::before, .tri-grey .tri-many > .tri-adcol::after { border-color: var(--muted-line); }
/* The ad text check (js/ads/ads-text.js): each running ad's headline and text, two lines then Show all; a flagged ad
   has a red edge and its warning in red; "none" where the words are missing. */
.ad-body.tri-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-none { color: var(--rt-bad); font-weight: 600; }
.ad-warn, .tri-block .tri-ln.ad-warn { display: flex; align-items: flex-start; gap: 6px; color: var(--rt-bad); font-weight: 600; line-height: 1.35; }
.ad-warn .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.tri-ad.ad-flag { border: 2px solid var(--rt-bad); }
.btn.link.ad-more { min-height: 44px; align-self: flex-start; }
/* Its cards (Today's Needs you card, the top of Running now), to the Hub design standard: an icon chip tinted by status,
   a sentence-case title and one-line summary, a small pill, clean rows with quiet metadata; no edge stripe, no dashed
   lines, no capitals. */
.card.at-card { gap: 12px; padding: 20px; border-radius: 22px; box-shadow: none; }
.at-head { display: flex; align-items: flex-start; gap: 12px; }
.at-chip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--rt-bad-bg); color: var(--rt-bad); }
.at-chip .ic { margin: 0; }
.at-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.at-title { margin: 0; font: 700 1.125rem/1.3 var(--rt-body); letter-spacing: 0; text-transform: none; color: var(--heading); }
.at-sum { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--text-2); }
.pill.at-pill { min-height: 24px; padding: 2px 10px; font: 700 .875rem/1.2 var(--rt-body); letter-spacing: 0; text-transform: none; }
.at-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.at-list li { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.at-name { font-weight: 700; }
.at-meta, .at-foot { font-size: .875rem; line-height: 1.4; color: var(--text-2); }
.at-why { color: var(--rt-bad); font-weight: 600; }
.at-foot { margin: 0; }
.at-card .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tri-grey .tri-name, .tri-grey .tri-big, .tri-grey .tri-camp .tri-name { color: var(--text-2); }
.tri-swipe { margin: 0 12px; font-size: 1rem; color: var(--text-3); text-align: right; }
@media (min-width: 720px) { .tri-swipe { display: none; } .tri-swipe.tri-swipe-wide { display: block; } }
/* The builder: its blocks are buttons (tap to change), the "+" blocks add one. */
.tri-tap { display: flex; flex-direction: column; align-items: inherit; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: inherit; cursor: pointer; }
.tri-static { cursor: default; }
.tri-tap:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.tri-add { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; width: min(260px, calc(100vw - 72px)); padding: 10px 12px;
  border: 2px solid var(--border-strong); border-radius: var(--r-box); background: none; color: var(--link); font: 700 1.0625rem/1.1 var(--rt-cond); letter-spacing: 0;
  cursor: pointer; }
.tri-add-col .tri-add { width: 200px; }
.tri-add:hover { background: var(--rt-hover); }
.ab-needs { margin: 0; font-size: 1rem; font-weight: 600; color: var(--rt-attn); }
.ab-made { margin: 0; font-size: 1rem; font-weight: 600; color: var(--rt-ok); }
.ab-refused { margin: 0; font-size: 1rem; font-weight: 600; color: var(--rt-bad); }
.ab-entry { display: flex; flex-direction: column; gap: 8px; }
.ab-entry .ab-builds { display: flex; flex-direction: column; gap: 4px; }
.ab-entry .btn.link { justify-content: flex-start; min-height: 44px; letter-spacing: .04em; text-align: left; }
body.ab-open { overflow: hidden; }
.ab-page { position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
/* The head and the page keep the Hub's own column (.wrap: 1180px, centred). */
.ab-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px max(var(--gutter), calc((100% - 1180px) / 2 + var(--gutter))); background: var(--bar); color: var(--on-bar); }
.ab-head h1 { flex: 1; font: 700 1.375rem/1.05 var(--rt-cond); letter-spacing: 0; }
.ab-back { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border: 2px solid var(--bar-line); border-radius: var(--r-pill); background: none;
  color: var(--on-bar); font: 700 1rem/1 var(--rt-body); letter-spacing: 0; text-transform: none; cursor: pointer; }
.ab-back .ic { transform: rotate(90deg); }
.ab-main { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 16px var(--gutter) calc(40px + var(--safe-b)); }
.ab-acct { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ab-acct p { flex: 1 1 240px; margin: 0; }
.ab-steps { margin: 6px 0 0; padding-left: 22px; }
.ab-steps li { margin: 4px 0; overflow-wrap: anywhere; }
.ab-plan { gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; }
.ab-plan ul { margin: 0; padding-left: 20px; }
.ab-plan li { margin: 2px 0; overflow-wrap: anywhere; }
.ab-foot { display: flex; flex-direction: column; gap: 10px; }
.ab-progress { width: 100%; height: 14px; accent-color: var(--link); }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 56px; padding: 8px 18px; border: 2px solid var(--border-strong); border-radius: var(--r-box);
  background: var(--field); text-align: left; cursor: pointer; }
.ab-chip strong { font: 700 1.125rem/1.1 var(--rt-cond); letter-spacing: .04em; }
.ab-chip .sz { font-size: .9375rem; color: var(--text-3); }
.ab-chip[aria-pressed="true"] { border-color: var(--pick); background: var(--pick); color: var(--on-pick); }
.ab-chip[aria-pressed="true"] .sz { color: var(--on-pick-2); }
.ab-chip[disabled] { opacity: .55; cursor: default; }
/* Each choice as tall as its words (flex: none: a list that scrolls never squeezes them); a greyed one keeps its reason readable. */
.ab-pick { display: flex; flex-direction: column; gap: 8px; max-height: min(440px, calc(55 * var(--vh))); overflow-y: auto; padding: 2px; }
.ab-pick > * { flex: none; }
.ab-opt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; width: 100%; height: auto; min-height: 56px; padding: 10px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--r-box); background: var(--field); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.ab-opt strong, .ab-opt .sz { display: block; max-width: 100%; white-space: normal; text-transform: none; letter-spacing: 0; text-align: left; }
.ab-opt strong { font: 700 1.0625rem/1.25 var(--rt-body); }
.ab-opt .sz { font: 400 .9375rem/1.35 var(--rt-body); color: var(--text-3); }
.ab-opt[aria-pressed="true"] { border: 2px solid var(--ink-strong); background: var(--rt-ok-bg); }
.ab-opt[disabled] { border-style: solid; background: var(--surface-2); color: var(--text-2); cursor: default; }
.ab-opt[disabled] .sz { color: var(--text-2); font-style: italic; }
.ab-search { display: flex; gap: 8px; }
.ab-search input { flex: 1; min-width: 0; }
.ab-ichips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-ichip { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 8px 4px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--field); cursor: pointer; }
.ab-ichip .ic { width: 16px; height: 16px; }
.ab-group { display: flex; flex-direction: column; gap: 6px; }
.ab-count { margin: 0; font-size: .9375rem; color: var(--text-3); text-align: right; }
.ab-count.over { color: var(--rt-bad); font-weight: 600; }
.ab-thumb { display: block; max-width: 160px; max-height: 160px; border-radius: 12px; border: 1px solid var(--border); }
.ab-problem { margin: 0; color: var(--rt-bad); font-weight: 600; }
.ab-warn { margin: 0; color: var(--rt-warn); font-weight: 600; }
.ab-problem:empty, .ab-warn:empty, .ab-problem[hidden] { display: none; }
.ab-line { margin: 0; overflow-wrap: anywhere; }
/* ---------- end of The triangle view and the ad builder ---------- */

/* ---------- Tree tags (tags/tags.js; docs/tag-printing.md) ---------- */
.tag-box { padding: 8px 0 2px; }
.tag-preview { display: block; width: 100%; height: auto; }
.tag-preview .tg-tag { fill: var(--rt-tag); }
.tag-preview .tg-keyzone { fill: var(--rt-tag-zone); stroke: var(--rt-white); stroke-width: .25; stroke-dasharray: 1 1; }
.tag-preview .tg-hole, .tag-preview .tg-notch { fill: var(--rt-white); }
.tag-preview .tg-perf { stroke: var(--rt-tag-ink); stroke-width: .35; stroke-dasharray: 1.5 1; }
/* The printer's own font is a condensed one; textLength keeps each line the printed length. */
.tag-preview .tg-words { fill: var(--rt-tag-ink); font-family: var(--rt-cond); }
.tag-sheet [data-problems]:empty { display: none; }
.key-once { display: block; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-box); overflow-wrap: anywhere; font-size: 1rem; }
/* ---------- end of Tree tags ---------- */
/* ---------- Ads, to the Hub design standard (Oct 11, 2026) ----------
   Brandon's design standard (Docs/Hub design standard.md) on every Ads view: the Ads tab ([data-screen="ads"]) and the
   builder ([data-screen="ads-builder"]), on top of the shared look (Hub polish, phase 1, PR #59: type scale, pills,
   cards, sheets, solid lines); only what is the Ads screens' own is here, scoped to those two. No ALL-CAPS, no emoji, no coloured left stripes, no dashed lines, nothing that scrolls sideways, and every
   number one unbroken piece. Tokens only (test/web/look.test.mjs). Screen only: the printed audience cards keep their
   own look. */
@media screen {
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.eb, .sub-h, .lab, .tl, .kv dt, .tbl th, .grp-h, .vp-l, .tri-tag, .pill, .chip,
  .ads-fold summary strong, .seg button, .spec > summary) { text-transform: none; letter-spacing: 0; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .pill.wrapok { white-space: normal; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .sub-h { margin: 0; font: 700 1.125rem/1.3 var(--rt-body); color: var(--heading); }
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.tl, .vp-l) { font: 600 .875rem/1.3 var(--rt-body); color: var(--text-3); }
[data-screen="ads"], [data-screen="ads-builder"] { font-size: 1rem; }
[data-screen="ads"] .lede { font-size: 1rem; }
[data-screen="ads"] div.tile { border-style: solid; background: var(--surface); border-radius: 22px; }
[data-screen="ads"] .kv dd { font-size: .9375rem; }
/* A choice that can never apply (already in the Library) is hidden, not greyed out (check 12). */
[data-screen="ads"] .disc-row input[type="checkbox"][disabled][aria-label^="Add "] { visibility: hidden; }
[data-screen="ads"] .meta, [data-screen="ads"] .ads-fold .s-main > .meta { font-size: .875rem; line-height: 1.45; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .btn { font-size: 1rem; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .btn.small { min-height: 44px; padding: 0 16px; font-size: .9375rem; border-width: 1px; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .btn.small.primary { border-color: var(--solid); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .chip { border-width: 1px; }
/* The jobs-to-credit line keeps the shared look's tinted border instead of its old left stripe (check 7). */
[data-screen="ads"] .credits-fold.attn { border: 1px solid var(--attn-line); }
/* Every heading and label in sentence case, in the body font (the printable cards keep their own look). */
/* (The screen's big title is set in capitals like every screen's: the calm redesign, Oct 16, 2026.) */
:is([data-screen="ads"], [data-screen="ads-builder"]) :not(.ad-cards *, .st h1[data-lt]) { text-transform: none !important; }
[data-screen="ads"] .ads-fold .ads-fold > summary .s-main > strong { font: 700 1rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text); }
@media (max-width: 600px) {
  [data-screen="ads"] .ads-fold > summary { padding: 10px 14px; }
  [data-screen="ads"] .ads-fold > .fold-body { padding: 12px 12px 14px; }
}
:is([data-screen="ads"], [data-screen="ads-builder"]) .fold .s-main strong { font: 700 1.0625rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text); }
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.copy-row dt, .meta-accts > .flabel, .meta-key > .flabel, .collect .lbl, .ts-changed) {
  font: 600 .875rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text-2); }
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.empty h2, .need-h h3) { font: 700 1.25rem/1.25 var(--rt-body); letter-spacing: 0; }
[data-screen="ads"] .ads-ov { padding-bottom: 0; border-bottom: 0; gap: 24px; }
[data-screen="ads"] .ads-ov > :is(.ov-run, .ov-make, .ov-past) { margin-top: 8px; padding-top: 0; border-top: 0; }
[data-screen="ads"] .ov-run, [data-screen="ads"] .ov-past, [data-screen="ads"] .ov-make { gap: 16px; }
/* The Library's rows open a form (class go); the shared chevron rule .go (20 px, turned) is for an icon, not a row. */
[data-screen="ads"] .tbl tr.go { flex: initial; width: auto; height: auto; color: inherit; transform: none; }
/* Tables: no striped rows. */
[data-screen="ads"] .tbl tbody tr:nth-child(even) td { background: none; }
[data-screen="ads"] .grp-h { font: 600 .875rem/1.3 var(--rt-body); color: var(--text-2); }
/* Drop-downs: a card with a 22 px corner, a clear title and a quiet line. */
[data-screen="ads"] .ads-fold { border-radius: 22px; }
[data-screen="ads"] .ads-fold > summary { min-height: 60px; padding: 12px 20px; }
[data-screen="ads"] .ads-fold > summary .s-main > strong { font: 700 1.0625rem/1.3 var(--rt-body); color: var(--text); }
[data-screen="ads"] .ads-fold.stage { background: var(--surface); }
[data-screen="ads"] .ads-fold.stage > summary .s-main > strong { font: 700 1.0625rem/1.3 var(--rt-body); color: var(--text); }
[data-screen="ads"] .ads-fold .ads-fold { background: var(--field); }

/* The headline tiles: a quiet label over a big number that never breaks. */
[data-screen="ads"] .ov-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
[data-screen="ads"] .ov-tiles .tile { gap: 6px; padding: 18px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
[data-screen="ads"] .ov-tiles .tile .tl { order: -1; }
[data-screen="ads"] .ov-tiles .tn { font-size: 2.375rem; white-space: nowrap; overflow-wrap: normal; }
[data-screen="ads"] .ov-tiles .tm { font-size: .875rem; }
[data-screen="ads"] .ov-tiles .tm .pill { margin-right: 6px; }

/* A section's heading: its title, its count in a small pill, one quiet line. */
.ad-sec-h { display: flex; flex-direction: column; gap: 4px; }
.ad-sec-h .sub-h { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
[data-screen="ads"] .sub-h .n { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text); font: 700 .8125rem/1 var(--rt-body); }
.ad-sec-h .meta { margin: 0; }
.past-all > summary .ad-sec-h, .past-all > summary .sub-h { margin: 0; }
.ad-empty { display: flex; align-items: flex-start; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; }
.ad-empty > .ic { flex: none; width: 24px; height: 24px; color: var(--link); }

/* ---- a campaign: its header row, then its audiences 2 to 3 across ---- */
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-list { gap: 20px; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-card { gap: 16px; padding: 20px; border-radius: 22px; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-camp { position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; width: auto;
  padding: 0; border: 0; background: none; text-align: left; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-camp .tri-tag { justify-content: flex-start; }
.tri-camp-main { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-camp .tri-name { font: 700 1.25rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--heading); overflow-wrap: anywhere; }
.tri-camp-sub { display: flex; flex-wrap: wrap; gap: 2px 0; font-size: .875rem; line-height: 1.45; color: var(--text-3); }
.tri-camp-sub > span:not(:last-child)::after { content: "·"; margin: 0 8px; }
.tri-camp-tot { display: flex; flex-direction: column; gap: 2px; }
.ad-tot { display: flex; flex-wrap: wrap; gap: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ad-tot > span { white-space: nowrap; }
.ad-tot > span:not(:last-child)::after { content: "·"; margin: 0 8px; font-weight: 400; color: var(--text-3); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-camp .tri-acts { flex: 0 1 auto; align-items: stretch; margin: 0; }
.tri-camp .me-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 10px 10px 16px; background: var(--surface-2); border-radius: 18px; }
.tri-camp .me-budget > .sz { margin: 0; font-size: .875rem; color: var(--text-2); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px;
  align-items: start; justify-content: stretch; }
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.tri-scroll, .tri-tree) { overflow: visible; width: auto; min-width: 0; padding: 0; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-col { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; padding: 16px;
  background: var(--field); border: 1px solid var(--border); border-radius: 20px; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-many > .tri-col { padding-top: 16px; }
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.tri-many > .tri-col, .tri-many > .tri-adcol)::before,
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.tri-many > .tri-col, .tri-many > .tri-adcol)::after { display: none; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-stem, :is([data-screen="ads"], [data-screen="ads-builder"]) .tri-swipe { display: none; }
.tri-col:has(.live-row.attention) { border-color: var(--attn-line); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-aud { position: static; width: auto; padding: 0; border: 0; background: none; gap: 8px; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-aud.tri-own { width: auto; padding: 0; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-tag { font: 600 .8125rem/1.3 var(--rt-body); color: var(--text-3); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-block .sz { font-size: .875rem; }
.tri-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 8px; }
.tri-head-row .tri-name { font-size: 1.0625rem; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-big { font: 700 2rem/1.05 var(--rt-cond); white-space: nowrap; }
.pill.rec { min-height: 28px; }
.tri-grey .tri-col { background: var(--surface); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-grey .tri-block { background: none; }
/* The ads of an audience: preview cards, one or two across inside it. */
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-adcol { display: block; padding: 0; min-width: 0; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-ad { width: auto; gap: 6px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-ad.tri-off { border-style: solid; opacity: .8; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-ad.ad-flag { border: 2px solid var(--rt-bad); }
.ad-prev-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ad-thumb { flex: none; display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 12px; background: var(--nav-tint);
  color: var(--link); font: 700 .75rem/1 var(--rt-body); }
.ad-prev-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-prev-t .tri-name { overflow-wrap: anywhere; }
.ad-prev-t .tri-tag { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.tri-ad .tri-nums .tri-val { white-space: nowrap; }
.tri-ad .me-acts { margin-top: 2px; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-add { width: 100%; min-height: 56px; border: 1px solid var(--border-strong); border-style: solid; border-radius: 16px;
  font: 600 .9375rem/1.2 var(--rt-body); letter-spacing: 0; text-transform: none; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-add-col .tri-add, :is([data-screen="ads"], [data-screen="ads-builder"]) .tri-col-add { width: 100%; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-col-add { padding: 0; border: 0; background: none; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .tri-camp .tri-tap { align-items: flex-start; }
/* A fold inside a card ("3 ads", "More"): a quiet line with a chevron, no box. */
[data-screen="ads"] .tri-col .ads-fold { background: none; border: 0; border-radius: 0; }
[data-screen="ads"] .tri-col .ads-fold > summary { min-height: 44px; padding: 0; gap: 8px; }
[data-screen="ads"] .tri-col .ads-fold > summary .s-main { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
[data-screen="ads"] .tri-col .ads-fold > summary .s-main > strong { font: 600 .9375rem/1.3 var(--rt-body); color: var(--link); }
[data-screen="ads"] .tri-col .ads-fold > .fold-body { padding: 4px 0 0; border-top: 0; }
[data-screen="ads"] .tri-col .ads-fold > .fold-body > .stack, [data-screen="ads"] .card-more > .fold-body { display: flex; flex-direction: column; gap: 12px; }

/* ---- an audience card (Running now and Past) ---- */
[data-screen="ads"] .tri-body { margin: 0; overflow: visible; background: none; border: 0; border-radius: 0; }
[data-screen="ads"] .tri-aud .live-row, [data-screen="ads"] .tri-aud .past-row, .ad-aud { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border: 0; text-align: left; }
[data-screen="ads"] .live-row.attention { border-left: 0; }
[data-screen="ads"] .live-row > .nudge, [data-screen="ads"] .past-row > .nudge, [data-screen="ads"] .live-row > .me-acts { padding: 0; }
.ad-card-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 10px; }
.ad-card-h .p-name { flex: 1 1 140px; min-width: 0; font: 700 1.125rem/1.3 var(--rt-body); color: var(--text); overflow-wrap: anywhere; }
.ad-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ad-aud > .sz, .ad-aud > p.sz { margin: 0; font-size: .875rem; color: var(--text-3); }
.ad-aud .test-note { margin: -6px 0 0; font-size: .9375rem; }
.ad-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ad-big .big-cpl { font: 700 2.5rem/1 var(--rt-cond); color: var(--heading); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ad-big .big-cpl.word { font-size: 1.75rem; }
.ad-big .sz { font-size: .875rem; color: var(--text-3); }
.ad-rec { display: flex; }
.rec-none { font-size: .875rem; color: var(--text-3); }
/* Today / Last 7 days / Since it started: three columns whose lines line up across (subgrid). */
.ad-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; padding: 12px; background: var(--surface-2); border-radius: 14px; }
.ad-stat { display: grid; grid-template-rows: subgrid; row-gap: 2px; min-width: 0; }
.ad-stats.r2 { grid-template-rows: repeat(2, auto); } .ad-stats.r2 > .ad-stat { grid-row: span 2; }
.ad-stats.r3 { grid-template-rows: repeat(3, auto); } .ad-stats.r3 > .ad-stat { grid-row: span 3; }
.ad-stats.r4 { grid-template-rows: repeat(4, auto); } .ad-stats.r4 > .ad-stat { grid-row: span 4; }
.ad-stats.r5 { grid-template-rows: repeat(5, auto); } .ad-stats.r5 > .ad-stat { grid-row: span 5; }
.ad-stats.r6 { grid-template-rows: repeat(6, auto); } .ad-stats.r6 > .ad-stat { grid-row: span 6; }
.ad-stat > .wrap { white-space: normal; }
.ad-stats { overflow-wrap: normal; }
.ad-stat > span { margin: 0; padding: 0; text-indent: 0; }
.ad-stat-h { font: 600 .8125rem/1.3 var(--rt-body); color: var(--text-3); }
.ad-stat-v { font: 700 1rem/1.3 var(--rt-body); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ad-stat-s { font-size: .875rem; line-height: 1.35; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ad-stat-s .num, .ad-stat-h { white-space: nowrap; }
@media (max-width: 420px) { .ad-stat-h { white-space: normal; } }
.ad-facts { display: flex; flex-wrap: wrap; gap: 4px 0; }
.ad-facts > span:not(:last-child)::after { content: "·"; margin: 0 8px; }
.ad-aud .nudge { gap: 8px; padding: 12px; background: var(--rt-attn-bg); border-radius: 14px; }
.ad-aud .nudge-t { color: var(--text); }
.ad-aud .me-acts { gap: 8px; }
.ad-more-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .875rem; color: var(--text-3); }
.ad-info { margin: 0; font-size: .8125rem; color: var(--text-3); overflow-wrap: anywhere; }
[data-screen="ads"] .test-block { padding: 12px; border-radius: 14px; }
[data-screen="ads"] .test-block > .sub-h { font-size: 1rem; }
[data-screen="ads"] .live-foot { padding-top: 4px; }

/* A computer: campaigns with one audience sit two across; the others take the whole row. */
@media (min-width: 1000px) {
  [data-screen="ads"] .tri-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
  [data-screen="ads"] .tri-list > .tri-card:not(.tri-solo) { grid-column: 1 / -1; }
}
/* A phone: the cards inside a campaign take the whole width. */
@media (max-width: 600px) {
  :is([data-screen="ads"], [data-screen="ads-builder"]) .tri-card { padding: 16px 12px; }
  :is([data-screen="ads"], [data-screen="ads-builder"]) .tri-col { padding: 14px 12px; }
  .ad-stats { column-gap: 8px; padding: 10px; }
}

/* Google: a campaign's header row (its cost and verdict beside the name, More under it), and the LSA card. */
.g-camp-now { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.g-camp-more { flex: 1 1 100%; }
[data-screen="ads"] .tri-camp .card-more > summary { min-height: 44px; padding: 0; gap: 8px; }
[data-screen="ads"] .tri-camp .ads-fold.card-more { background: none; border: 0; border-radius: 0; }
[data-screen="ads"] .tri-camp .card-more > summary .s-main > strong { font: 600 .9375rem/1.3 var(--rt-body); color: var(--link); }
[data-screen="ads"] .tri-camp .card-more > .fold-body { padding: 4px 0 0; border-top: 0; }

.g-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.g-facts li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.g-facts .lbl, .ad-more-line .lbl { font: 600 .875rem/1.3 var(--rt-body); color: var(--text-3); }
.g-lsa { gap: 16px; }
/* Jobs to credit: each question its own card; the answers a clean list. */
[data-screen="ads"] .q-list { display: flex; flex-direction: column; gap: 12px; overflow: visible; border: 0; background: none; }
[data-screen="ads"] .q-list > li { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
[data-screen="ads"] .q-list > li + li { border-top: 1px solid var(--border); }
[data-screen="ads"] .q-list .srow { padding: 0; }
[data-screen="ads"] .q-list .p-name { font-size: 1.0625rem; }
[data-screen="ads"] .q-list .sz { font-size: .875rem; color: var(--text-3); }
[data-screen="ads"] .credits-done .p-name { font-weight: 600; font-size: .9375rem; }
[data-screen="ads"] .g-row.ad_group { margin-left: 0; border-left: 0; }
[data-screen="ads"] .g-facts { font-size: .9375rem; }
[data-screen="ads"] .g-lsa .ad-card-h { align-items: center; }

/* Tables (the read-only view, the Notebook's old tests and Library): on a phone each row is a card, each number with its
   label; the Library keeps its sort buttons as a row of chips. */
@media (max-width: 720px) {
  [data-screen="ads"] .tbl-wrap.stacks { overflow: visible; border: 0; background: none; }
  [data-screen="ads"] .tbl.stacks thead { display: none; }
  [data-screen="ads"] .tbl.stacks, [data-screen="ads"] .tbl.stacks tbody { display: block; }
  [data-screen="ads"] .tbl.stacks tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 12px; padding: 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
  [data-screen="ads"] .tbl.stacks td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; background: none; width: auto; }
  [data-screen="ads"] .tbl.stacks td:first-child { grid-column: 1 / -1; }
  [data-screen="ads"] .tbl.stacks td:first-child::before { content: none; }
  [data-screen="ads"] .tbl-wrap.sorts .tbl.stacks thead { display: block; margin-bottom: 12px; }
  [data-screen="ads"] .tbl-wrap.sorts .tbl.stacks thead tr { display: flex; flex-wrap: wrap; gap: 6px; }
  [data-screen="ads"] .tbl-wrap.sorts .tbl.stacks th { padding: 0 10px; border-radius: var(--r-pill); }
  [data-screen="ads"] .tbl.stacks td[data-label]::before { content: attr(data-label); font: 600 .8125rem/1.3 var(--rt-body); color: var(--text-3); }
  [data-screen="ads"] .tbl.stacks td:empty { display: none; }
}
/* The Notebook's old tests (14 numbers each) are cards at every width, 2 to 3 across: read-only history. */
[data-screen="ads"] .tbl-wrap.old-tests { overflow: visible; border: 0; background: none; }
[data-screen="ads"] .old-tests .tbl.stacks thead { display: none; }
[data-screen="ads"] .old-tests .tbl.stacks { display: block; }
[data-screen="ads"] .old-tests .tbl.stacks tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; }
[data-screen="ads"] .old-tests .tbl.stacks tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
[data-screen="ads"] .old-tests .tbl.stacks td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; background: none; width: auto; }
[data-screen="ads"] .old-tests .tbl.stacks td:first-child { grid-column: 1 / -1; }
[data-screen="ads"] .old-tests .tbl.stacks td:first-child::before { content: none; }
[data-screen="ads"] .old-tests .tbl.stacks td[data-label]::before { content: attr(data-label); font: 600 .8125rem/1.3 var(--rt-body); color: var(--text-3); }
[data-screen="ads"] .old-tests .tbl.stacks td:empty { display: none; }

/* The Ads sheets (forms, budgets, pause, the builder's blocks: class ads-sheet): sentence case for the Ads screens' own
   labels; the sheet itself is the shared one. */
.sheet.ads-sheet :not(.ad-cards *) { text-transform: none !important; }

/* Ad text check: the warning card and the lines inside an ad. */
[data-screen="ads"] .at-card { border-radius: 22px; }

/* The builder: the same campaign card, its header row and audience cards. */
[data-screen="ads-builder"] .ab-head h1 { text-transform: none; letter-spacing: 0; }
[data-screen="ads-builder"] .tri-camp { padding: 0; }
[data-screen="ads-builder"] .tri-block .tri-name { font-size: 1.0625rem; }
[data-screen="ads-builder"] .tri-aud.tri-own > .tri-tag { padding-inline: 0; }
/* Its buttons side by side, the main one solid (wrapping only on a narrow screen). */
[data-screen="ads-builder"] .ab-foot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
[data-screen="ads-builder"] .ab-foot > :not(.btn) { flex: 1 1 100%; }
[data-screen="ads-builder"] .ab-foot > .btn.full { width: auto; flex: 0 1 auto; }
@media (max-width: 600px) { [data-screen="ads-builder"] .ab-foot > .btn.full { flex: 1 1 100%; } }
}
/* ---------- end of Ads, to the Hub design standard ---------- */

/* ---------- Signing in by phone (screens/gates.js, settings/people.js; docs/staff-signin.md) ---------- */
/* The sign-in screen: one centred card on the page colour, the brand above it, Brandon's email under it. The icon chip,
   pill buttons, sentence case and the type scale are the Hub polish's own; a big code box the phone can fill in from
   the text. Tokens only, so Dark follows. */
.gate.signin .gate-in { gap: 24px; padding: 40px 16px 24px; }
.gate.signin .lockup { margin-bottom: 0; }
.si-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; padding: 24px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-lift); }
.gate .si-title { font: 700 2.25rem/1 var(--rt-cond); letter-spacing: .005em; text-transform: none; color: var(--heading); }
.gate .si-sub, .gate .si-card p { max-width: none; }
.si-sub { margin-top: -8px; font-size: 1rem; color: var(--text-2); }
.si-step { display: flex; flex-direction: column; gap: 12px; }
.si-step[hidden] { display: none; }
.si-label { font: 600 .9375rem/1.3 var(--rt-body); color: var(--text-2); }
.si-phone { display: flex; align-items: stretch; border: 2px solid var(--border-strong); border-radius: var(--r-box); background: var(--field); overflow: hidden; }
.si-phone:focus-within { border-color: var(--ink-strong); outline: 3px solid var(--focus); outline-offset: 2px; }
.si-cc { display: flex; align-items: center; padding: 0 4px 0 16px; font: 600 1.25rem/1 var(--rt-body); color: var(--text-3); }
.si-input { width: 100%; min-width: 0; min-height: 60px; padding: 12px 16px; border: 0; background: transparent; color: var(--text);
  font: 600 1.375rem/1.1 var(--rt-body); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.si-phone .si-input { padding-left: 8px; }
.si-phone .si-input:focus { outline: none; }
.si-input::placeholder { color: var(--text-3); opacity: 1; font-weight: 400; }
.si-code { min-height: 72px; border: 2px solid var(--border-strong); border-radius: var(--r-box); background: var(--field); text-align: center;
  font-size: 2rem; letter-spacing: .5em; text-indent: .5em; }
.si-code:focus { border-color: var(--ink-strong); outline: 3px solid var(--focus); outline-offset: 2px; }
.si-help { font-size: .875rem; color: var(--text-3); }
.si-sent { font-size: 1rem; color: var(--text-2); }
.si-sent strong { color: var(--text); }
.si-go { margin-top: 4px; }
.si-row { display: flex; flex-direction: column; align-items: center; gap: 0; }
.si-row .btn.link { min-height: 44px; padding: 0 4px; font-size: 1rem; }
.si-wait { display: flex; align-items: center; min-height: 44px; margin: 0; font-size: 1rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.si-wait[hidden], .si-resend[hidden] { display: none; }
.si-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px; border-radius: var(--r-box);
  background: var(--rt-bad-bg); color: var(--rt-bad); font-weight: 600; font-size: 1rem; }
.si-msg.info { background: var(--rt-neutral-bg); color: var(--text); font-weight: 400; }
.si-msg[hidden] { display: none; }
.si-msg .btn.link { min-height: 32px; padding: 0; color: inherit; font-size: 1rem; }
.si-owner { width: 100%; max-width: 420px; text-align: left; }
.si-owner > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; color: var(--link); font-weight: 600;
  cursor: pointer; list-style: none; }
.si-owner > summary::-webkit-details-marker { display: none; }
.si-owner > summary .ic { width: 16px; height: 16px; transition: transform .25s; }
.si-owner[open] > summary .ic { transform: rotate(180deg); }
.si-owner-body { padding: 16px 20px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.si-owner-body form { max-width: none; }
.nowrap { white-space: nowrap; }
@media (min-width: 900px) {
  .gate.signin .gate-in { padding-top: 64px; }
  .si-card { padding: 32px; }
}

/* ---------- end of Signing in by phone ---------- */

/* ---------- Final design pass (Oct 11, 2026; Docs/Hub design standard.md, every screen) ---------- */
/* The crew's photo sheet: the phone's two pickers as pill buttons side by side, the camera solid (photos/photos.js
   fileButton). The input sits inside its label, hidden from sight but still there for a tap and the keyboard. */
.file-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.file-btn { position: relative; white-space: nowrap; }
.field > .file-btn { align-self: flex-start; }
.file-btn > input.vh { width: 1px; min-height: 0; padding: 0; }
/* Inside a field the button keeps a button's words, not the field label's smaller grey ones. */
.field label.btn { font: 700 1.0625rem/1.2 var(--rt-body); color: var(--ink-strong); }
.field label.btn.primary { color: var(--on-solid); }
.file-btns > .file-btn { flex: 1 1 auto; }
.file-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.field .flabel .why { font: 400 .875rem/1.3 var(--rt-body); color: var(--text-3); }
/* Drop-down lists in the Hub's own look: the field's box, and a small chevron drawn in the words' colour (two
   gradients, so it follows the look). Screen only; a list with several rows open (multiple) keeps the browser's. */
@media screen {
  :is(.field, .sheet, #main) select:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: 44px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
    background-position: calc(100% - 23px) 52%, calc(100% - 17px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
  /* A date keeps its whole "mm/dd/yyyy" beside the calendar in a half-width box on a phone. */
  .field input[type="date"], .field input[type="time"] { padding-inline: 12px; min-width: 0; }
}
/* Every tick box and round choice in the Hub's green when picked (the ones with a rule of their own keep it). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--go); }
/* Ads: the kind of an ad (Photo, Carousel) in its small square at a readable size. */
.ad-thumb { font-size: .8125rem; }
/* Stock's item rows open the item: the chevron at the right of both lines. */
.lrow:has(> .go) { grid-template-columns: 1fr auto auto; }
.lrow > .go { grid-column: 3; grid-row: 1 / span 2; }
.lrow:has(> .go) .l2 { grid-column: 1 / 3; }
/* A size or an amount kept in one piece on a line (h.js whole). */
.whole { white-space: nowrap; }
/* ---------- end of Final design pass ---------- */

/* ---------- Crew on a job (Board, Greg's Today, Brandon's stops) and the crew's Further out / To schedule ---------- */
/* A few initials side by side, a little overlapped; the names are always written beside them (Crew button, badge). */
.avs { display: inline-flex; align-items: center; flex: none; }
.avs > .av + .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.row-crew { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; font-size: .875rem; color: var(--text-2); }
.crew-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.crew-btn { gap: 8px; }
.crew-btn .ic { width: 18px; height: 18px; }
.crew-badge { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: .875rem; color: var(--text-2); }
.crew-names { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The picker: one row per choice, the whole row is the button; a tick on the chosen ones. */
.crew-pick .crew-opt { padding: 0; }
.crew-opt-b { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.crew-opt-b:hover { background: var(--x-hover); }
.crew-opt-b:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.crew-opt-b .av .ic { width: 18px; height: 18px; }
.crew-opt-b .tick { flex: none; width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: var(--pick); color: var(--on-pick); }
.crew-opt-b .tick-off { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--btn-line); }
.crew-opt.on .li-t { color: var(--heading); }
/* The crew's read-only rows: a day's heading, then its jobs. */
.later > .sec + .sec { margin-top: 24px; }
.short-day + .short-day { margin-top: 16px; }
.short-day .sub-h { margin: 0 0 8px; }
.short-job .li-r .btn .ic { width: 18px; height: 18px; }
@media print { .crew-line, .row-crew { display: none; } }
.card > .crew-badge { margin-top: -4px; }
/* ---------- end of Crew on a job ---------- */

/* ---------- Add a job (redesign round 5, step 7) ----------
   A sheet on a phone, a centred box on a computer (wider than other sheets, for the pairs of fields). At the top, the
   row the job will make on the Board; Job, the install day and the town as pills; Add and Cancel held at the foot. */
.sheet.add-sheet { padding-bottom: 0; }
.add-sheet .sheet-body { gap: 18px; padding-bottom: 0; }
.add-pv { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-box); background: var(--bg); }
.add-pv-h { margin: 0; font: 600 .8125rem/1.2 var(--rt-body); color: var(--link); }
.add-pv-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.add-pv .dsq { cursor: default; }
.add-pv .brow-main { cursor: default; padding: 0; }
.add-pv .row-name, .add-pv .row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-pv .add-pv-blank { color: var(--text-3); }
.add-pv .pill { flex: none; }
.add-pills { gap: 6px; }
.add-pills .chip { min-height: 44px; padding-inline: 16px; font-weight: 700; }
.add-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.add-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px 0 14px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-2); font: 600 .875rem/1.2 var(--rt-body); color: var(--text-2); }
.add-pick input[type="date"] { width: auto; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-pill); }
.add-pick.on { border-color: var(--pick); } /* a day picked that isn't Today or Tomorrow */
.add-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.add-foot { position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 -20px;
  padding: 12px 20px calc(16px + var(--safe-b)); border-top: 1px solid var(--border); background: var(--surface); }
.add-foot .btn { min-height: 52px; }
@media (min-width: 720px) {
  .sheet.add-sheet { width: 680px; }
  .add-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .add-pair.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .add-foot { grid-template-columns: minmax(0, 1fr) 160px; padding-bottom: 16px; }
}

/* ======================================================================================================================
   Design match (Brandon, Oct 13, 2026: "it needs to look like the design"): the frame every screen shares, then Home.
   Sizes, weights and spacing are the round-5 mockup's (Main.dc.html, SF-Home.dc.html). ================================ */

/* ---------- the frame: sidebar (computer), top bar, phone header ---------- */
:root { --side-w: 240px; }
.side-brand { gap: 8px; padding: 0 8px 16px; }
.side-brand .ah-logo { width: 26px; height: 32px; }
.side-brand .ah-brand { font: 800 1.375rem/1 var(--rt-cond); letter-spacing: .03em; color: var(--text); }
.side-brand .ah-sub { display: none; }
.btn.side-add { min-height: 44px; height: 44px; margin-bottom: 10px; gap: 8px; border-radius: var(--r-pill); font: 800 1.125rem/1 var(--rt-cond); letter-spacing: .01em; text-transform: uppercase; }
.btn.side-add .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.si { gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 10px; font: 600 .875rem/1.2 var(--rt-body); color: var(--text-2); }
.si .ic { width: 19px; height: 19px; }
.si[aria-current="page"] { font-weight: 600; }
.si.sub { min-height: 38px; padding-left: 43px; font-weight: 400; }
.si.mg-h.here { font-weight: 600; color: var(--text-2); }
.mg-chev { width: 16px; height: 16px; }
.mg-items { padding: 0 0 4px; }
.side .tc, .nav-sheet .tc { min-width: 0; padding: 1px 7px; border-radius: 9px; font: 700 .75rem/1.35 var(--rt-body); }
.side-foot { gap: 10px; min-height: 48px; padding: 0 8px; }
.side-av { width: 32px; height: 32px; font: 800 1rem/1 var(--rt-cond); background: var(--cta); color: var(--on-cta); }
.side-who { font: 600 .875rem/1.2 var(--rt-body); }
.side-foot .btn.small.ah-gear { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text-3); }
.side-foot .btn.small.ah-gear:hover, .side-foot .btn.small.ah-gear[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.side-foot .btn.small.ah-gear .ic { width: 18px; height: 18px; }
/* The top bar: the screen's name big and condensed; Refresh and the alert bell as small square icon buttons. */
.ah-title { font: 800 1.5rem/1 var(--rt-cond); letter-spacing: .02em; color: var(--text); }
.ah .btn.small.ah-refresh, .ah .btn.small.ah-bell { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); }
.ah .btn.small.ah-refresh .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.ah .btn.small.ah-refresh .ic, .ah .btn.small.ah-bell .ic { width: 21px; height: 21px; }
.ah .ah-right { gap: 4px; }
.bell-n { top: 6px; right: 6px; min-width: 1.5em; height: 1.5em; padding: 0 4px; font: 700 .75rem/1.5 var(--rt-body); }
@media (min-width: 900px) {
  .has-side .side { padding: 16px 12px; border-right: 1px solid var(--border); }
  .has-side .ah .wrap { max-width: none; height: 56px; padding: 0 28px; gap: 10px; }
  .has-side .ah-title { font-size: 1.625rem; }
  .has-side .ah .btn.small.ah-refresh, .has-side .ah .btn.small.ah-bell { width: 38px; min-width: 38px; height: 38px; min-height: 38px; border-radius: 10px; background: var(--surface); }
  .has-side .ah .btn.small.ah-refresh { padding: 0; }
  .has-side .ah .btn.small.ah-refresh .lbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .has-side .ah .btn.small.ah-refresh .ic, .has-side .ah .btn.small.ah-bell .ic { width: 17px; height: 17px; }
  .has-side .ah .ah-right { gap: 10px; }
  .has-side .bell-n { top: -3px; right: -3px; min-width: 1.4em; height: 1.4em; font-size: .75rem; line-height: 1.4; }
  /* The page uses the whole width beside the sidebar, as the design does. */
  .has-side #main.wrap { max-width: none; padding-inline: 28px; }
  .has-side .screen { padding-top: 22px; }
  .has-side .practice .wrap { max-width: none; padding-inline: 28px; }
}
@media (max-width: 899px) {
  .ah .wrap { height: 56px; padding: 0 8px 0 6px; gap: 6px; }
  .ah-ham { margin-left: 0; }
  .ah-ham .ic { width: 22px; height: 22px; }
}

/* ---------- Home ---------- */
.owner-today { gap: 22px; }
.owner-today .greet { gap: 2px; }
.owner-today .greet h1, .has-side .owner-today .greet h1 { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
  font: 700 1.25rem/1.25 var(--rt-body); letter-spacing: 0; color: var(--text); }
@media (min-width: 720px) { .owner-today .greet h1 { font-size: 1.375rem; } }
.owner-today .greet-sub { font-size: .8125rem; gap: 2px 6px; }
.owner-today .eb { font: 700 1rem/1.25 var(--rt-body); color: var(--text); }
.owner-today .eb .eb-n { color: var(--text-3); font-weight: 600; }
.ot-grid { gap: 22px; }
@media (min-width: 1000px) { .ot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; } }
.ot-needs { gap: 6px; }
.ot-needs > .eb { margin-bottom: 4px; }
.need-rows { gap: 6px; }
.need-row { gap: 12px; min-height: 58px; padding: 8px 12px; border-radius: 12px; background: var(--surface); }
button.need-row:hover { background: var(--surface-2); }
.need-row .ichip { width: 36px; height: 36px; border-radius: 10px; }
.need-row .ichip .ic { width: 18px; height: 18px; }
.nr-t { font: 700 .9375rem/1.25 var(--rt-body); }
.nr-n { font: 800 1.25rem/1 var(--rt-cond); }
.need-row .go { width: 15px; height: 15px; }
/* Money: the period switch, four tiles two by two, Balances owed open under them. */
.money { gap: 10px; }
.money-h { display: flex; align-items: center; gap: 6px; }
.money-h .eb { flex: 1; }
.mp { display: flex; gap: 2px; }
.mp-b { height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); font: 600 .75rem/1 var(--rt-body); cursor: pointer; }
.mp-b[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); font-weight: 700; }
.money-tiles, .money .tiles.money-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
.money-tiles .tile { gap: 0; min-height: 0; padding: 12px; border: 0; border-radius: 12px; background: var(--surface); }
.money-tiles .tl { font: 400 .75rem/1.4 var(--rt-body); letter-spacing: 0; text-transform: none; color: var(--text-3); }
.money-tiles .tn { font: 800 1.75rem/1.1 var(--rt-cond); color: var(--text); }
.money-tiles .tn.paid { color: var(--cta); }
.money-tiles .tn.dot-before::before { width: 7px; height: 7px; margin-right: 6px; vertical-align: .2em; }
.money-tiles .tm { font-size: .75rem; color: var(--text-3); }
.money-ly { font-size: .75rem; }
/* The Today | Weekly | Monthly switch centred at the top in a quiet track ("Money" is for screen readers only), 25%
   bigger than the other switches, its three buttons one width so the middle one sits on the centre line; one pair of
   boxes under it for the one picked (Brandon, Oct 14, 2026). */
.money-h { flex-direction: column; }
.money-h .mp { display: grid; grid-template-columns: repeat(3, minmax(0, 7rem)); gap: 3px; padding: 4px; border-radius: var(--r-pill); background: var(--surface); }
.money-h .mp-b { height: 40px; padding: 0 8px; font-size: .9375rem; }
/* Side by side, the Invoiced and Paid boxes start level with the first Attention line: both heads are one height
   (--ot-head), the switch rises out of Money's into the space under the greeting, and the 10 px under each head
   (Attention's 4 px margin and 6 px gap, Money's 10 px gap) match (Brandon, Oct 14, 2026). */
@media screen and (min-width: 1000px) {
  .ot-grid { --ot-head: 24px; }
  .ot-grid > .money > .money-h { height: var(--ot-head); justify-content: flex-end; }
}
.owed-card .owed-t { color: var(--text); }
.money .card.money-list { gap: 0; padding: 0; border: 0; border-radius: 12px; background: var(--surface); overflow: hidden; }
.money .money-list .sub-h { padding: 10px 12px 4px; font: 700 .75rem/1.3 var(--rt-body); color: var(--text-2); }
.money .money-fold > summary { min-height: 44px; padding: 4px 12px; }
.money .money-fold > summary .sub-h { padding: 0; }
.money .money-list > .meta, .money .money-list .need-list { padding: 4px 12px 10px; }
.owed-card .owed-n { font-weight: 600; color: var(--text-3); }
.owed-card .owed-list, .owed-card .more-rows .owed-list { list-style: none; margin: 0; padding: 0; border: 0; }
.owed-card .owed-list .owed-row { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 4px 4px 4px 12px; border: 0; border-top: 1px solid var(--border); }
.owed-card .owed-w { gap: 0; }
.owed-card .owed-w .who { font: 600 .875rem/1.3 var(--rt-body); }
.owed-card .owed-w .m { font-size: .75rem; color: var(--text-3); }
.owed-card .owed-row > .amt { flex: none; font: 800 1.125rem/1 var(--rt-cond); }
.owed-card .owed-row > .btn.link.owed-clear { min-height: 44px; padding: 0 10px; border: 0; color: var(--link); font: 600 .8125rem/1 var(--rt-body); text-decoration: none; }
.owed-card .more-rows > summary { padding: 10px 12px; border-top: 1px solid var(--border); font-size: .8125rem; }
.owed-card > .meta, .owed-card .owed-cleared { padding: 6px 12px 10px; }
/* Today's stops: a card per stop, side by side, then the wrap-up. */
.ot-stops { gap: 10px; }
.ot-stops .sec-h { align-items: baseline; }
.ot-stops .btn.link.push { min-height: 36px; font: 600 .8125rem/1 var(--rt-body); }
.ot-stop-list { display: flex; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; overflow-x: auto; scrollbar-width: none; }
.ot-stop-list::-webkit-scrollbar { display: none; }
.ot-stop-list .ot-stop { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 156px; min-height: 0; padding: 0; border: 0;
  border-radius: 14px; background: var(--surface); overflow: hidden; }
.ot-top { display: flex; flex-direction: column; justify-content: space-between; height: 108px; padding: 10px 12px; background: var(--pick); color: var(--on-pick); }
.ot-type { font: 800 .8125rem/1 var(--rt-cond); letter-spacing: .06em; text-transform: uppercase; }
.ot-n { font: 800 3.5rem/.8 var(--rt-cond); }
.ot-nw { font-size: 1.125rem; }
.ot-stop-list .ot-stop .ot-sw { gap: 2px; padding: 8px 12px 12px; }
.ot-stop-list .ot-stop .ot-town { font: 700 .875rem/1.25 var(--rt-body); color: var(--text); }
.ot-stop-list .ot-stop .ot-what { font-size: .75rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-stop-list .ot-wrapup { justify-content: center; gap: 4px; padding: 14px; background: none; border: 1.5px dashed var(--border-strong); }
.ot-wl { font-size: .75rem; color: var(--text-3); }
.ot-ws { font: 800 1.625rem/1 var(--rt-cond); text-transform: uppercase; }
.ot-wrapup .meta { font-size: .75rem; }
@media (min-width: 900px) {
  .ot-stop-list .ot-stop { width: 230px; }
  .ot-top { height: 120px; }
  .ot-stop-list .ot-wrapup { width: 200px; }
}
/* On a computer the stops fill the left column under Needs your attention: bigger cards that wrap onto new rows
   instead of scrolling sideways (Brandon, Oct 13, 2026). */
@media screen and (min-width: 1000px) {
  .ot-grid > .ot-stops { gap: 12px; }
  .ot-grid .ot-stop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; overflow: visible; }
  .ot-grid .ot-stop-list .ot-stop, .ot-grid .ot-stop-list .ot-wrapup { width: auto; }
  .ot-grid .ot-top { height: 150px; padding: 14px 16px; }
  .ot-grid .ot-type { font-size: .9375rem; }
  .ot-grid .ot-n { font-size: 4.5rem; }
  .ot-grid .ot-nw { font-size: 1.375rem; }
  .ot-grid .ot-stop-list .ot-stop .ot-sw { padding: 10px 16px 14px; }
  .ot-grid .ot-stop-list .ot-stop .ot-town { font-size: 1rem; }
  .ot-grid .ot-stop-list .ot-stop .ot-what { font-size: .875rem; }
  .ot-grid .ot-stop-list .ot-wrapup { min-height: 200px; gap: 8px; padding: 20px; }
  .ot-grid .ot-wl { font-size: .875rem; }
  .ot-grid .ot-ws { font-size: 2.5rem; }
  .ot-grid .ot-wrapup .meta { font-size: .8125rem; }
  .ot-grid > .ot-stops > .meta { font-size: .9375rem; }
}
.money > .meta { font-size: .75rem; }

/* The phone's ☰ menu: a drawer from the left (the design), the person's name at the top; Close is a small × at its top
   right; a tap outside or Escape closes it too. */
.sheet-back.nav-back { align-items: stretch; justify-content: flex-start; padding: 0; }
.nav-back .sheet.nav-sheet { position: relative; width: 300px; max-width: 86vw; height: 100%; max-height: none; padding-bottom: 24px; border-radius: 0;
  border-right: 1px solid var(--border); background: var(--bg); box-shadow: none; transform: translateX(-28px); }
.nav-back.open .sheet.nav-sheet { transform: none; }
.nav-sheet .sheet-head { position: absolute; top: 8px; right: 8px; padding: 0; border: 0; background: none; }
.nav-sheet .sheet-head::before { display: none; }
.nav-sheet .sheet-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav-sheet .sheet-x { width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 0; background: none; }
.nav-sheet .sheet-x .ic { width: 20px; height: 20px; }
.menu-sheet.nav-sheet .sheet-body { gap: 2px; padding: 48px 12px 24px; }
.nav-me { display: flex; align-items: center; gap: 10px; padding: 8px 8px 14px; }
.nav-me .side-av { width: 40px; height: 40px; font-size: 1.25rem; }
.nav-me-w { display: flex; flex-direction: column; min-width: 0; }
.nav-me-w strong { font: 700 1rem/1.25 var(--rt-body); }
.nav-me-w span { font-size: .75rem; color: var(--text-3); }
.menu-sheet.nav-sheet .sheet-body button.si { min-height: 48px; padding: 0 12px; border-radius: 10px; font: 600 .9375rem/1.2 var(--rt-body); color: var(--text-2); }
.menu-sheet.nav-sheet .sheet-body button.si[aria-current="page"] { background: var(--pick); color: var(--on-pick); }
.menu-sheet.nav-sheet .sheet-body button.si.sub { min-height: 42px; padding-left: 43px; font-weight: 400; }
.menu-sheet.nav-sheet .mi-list { margin: 8px 0 0; }
.menu-sheet.nav-sheet .sheet-body button.mi { gap: 10px; min-height: 48px; padding: 0 8px; font: 600 .9375rem/1.2 var(--rt-body); }
.menu-sheet.nav-sheet .mi .ic { width: 18px; height: 18px; }
.menu-sheet.nav-sheet .sheet-body button.switch { min-height: 48px; margin-top: 6px; padding: 0 8px; border-top: 1px solid var(--border); }
.nav-sheet .sw-what { display: none; }
.nav-sheet .sw-name { font: 400 .875rem/1.2 var(--rt-body); }
.nav-sheet .sw-track { width: 44px; height: 26px; border-radius: 13px; }
.nav-sheet .sw-knob { width: 18px; height: 18px; }
.nav-sheet .switch[aria-checked="true"] .sw-knob { transform: translateX(18px); }
.nav-sheet .look { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 8px; }
.nav-sheet .look .sw-words { flex: 1; }
.nav-sheet .look .seg { display: flex; gap: 2px; width: auto; padding: 2px; border-radius: var(--r-pill); background: var(--surface); }
.nav-sheet .look .seg button { min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-pill); font: 600 .75rem/1 var(--rt-body); }
.nav-sheet .look .seg button .ic { display: none; }
.menu-sheet.nav-sheet .sheet-body .look { flex-direction: row; align-items: center; gap: 8px; min-height: 48px; padding: 0 8px; border: 0; }
.menu-sheet.nav-sheet .sheet-body .look .seg button { display: inline-flex; width: auto; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); font: 600 .75rem/1 var(--rt-body); color: var(--text-2); }
.menu-sheet.nav-sheet .sheet-body .look .seg button[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); }

/* ===== Design match: inbox ===== */
/* Brandon's phone Inbox tabs, Replies (Brandon's and Greg's), Follow-ups and Customers, as the round-5 mockup draws them
   (Main.dc.html, SF-Replies, SF-Followups, SF-Customers). Text sizes in rem so Larger text still scales them. */

/* ---------- the phone's Inbox tabs: 44 px, a soft box, two tabs ---------- */
.seg.inbox-tabs { height: 44px; margin-top: 8px; padding: 4px; gap: 4px; border: 0; border-radius: 12px; background: var(--surface); }
.seg.inbox-tabs button { min-height: 36px; padding: 0 8px; border-radius: 9px; font: 700 .875rem/1 var(--rt-body); color: var(--text-2); }
.seg.inbox-tabs button[aria-pressed="true"] { color: var(--on-pick); }
#main > .inbox-tabs + .screen { padding-top: 10px; }

/* ---------- Replies ---------- */
.screen[data-screen="replies"] { gap: 0; }
.rp { gap: 0; }
.rp-list { gap: 10px; }
.rp-under:empty { display: none; }
.rp-under .fresh { font-size: .75rem; }
/* The filters in one row (Inbox review, Oct 15, 2026): Inbox and Unanswered, More, From and the "?". Nothing runs off the
   edge: if a very narrow screen can't fit them, the row wraps instead. */
.rp-segrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.rp-segrow .rp-segs { flex: none; flex-wrap: nowrap; min-width: 0; margin-top: 0; gap: 4px; padding-block: 4px; }
.rp-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rp-top .rp-under { flex: 1; min-width: 0; }
.rp-top .help-q { flex: none; margin-left: auto; }
.rp-segs .chip { position: relative; gap: 0; min-height: 36px; height: 36px; padding: 0 11px; border: 0; background: none; color: var(--text-2); font: 600 .8125rem/1 var(--rt-body); white-space: nowrap; }
.rp-segs .chip::after { content: ""; position: absolute; inset: -4px 0; }
.rp-segs .chip[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); font-weight: 700; }
/* More (Didn't need a reply, Archived) and From (From anywhere · Text · Email · Facebook · Website form): a chip that opens its
   choices under it, in the Board's list picker's menu (.menu). The chip is filled while one of its own is shown. */
.rp-dd { position: relative; display: flex; padding: 0; }
.rp-dd .chip.rp-dd-b { position: relative; gap: 2px; min-height: 36px; height: 36px; padding: 0 8px 0 11px; border: 0; background: var(--surface-2); color: var(--text-2);
  font: 600 .8125rem/1 var(--rt-body); white-space: nowrap; }
.rp-dd .chip.rp-dd-b::after { content: ""; position: absolute; inset: -4px 0; }
.rp-dd .chip.rp-dd-b.is-on { background: var(--pick); color: var(--on-pick); font-weight: 700; }
/* Larger text: More and From as tall as the other chips (--tap-s). Where the row is narrow (a phone under 380 px; at
   Larger text a phone under 430 px and the 380 px list on a computer) a little tighter, and the dot before each count
   hidden ("Inbox 8"), so the row still fits in one line. */
body.big-text .rp-dd .chip.rp-dd-b { height: auto; min-height: var(--tap-s); }
@media (max-width: 380px) {
  .rp-segs .chip, .rp-dd .chip.rp-dd-b { padding-inline: 8px; }
  .rp-segrow .seg-dot { display: none; }
}
@media (max-width: 430px), (min-width: 900px) {
  body.big-text .rp-segs .chip, body.big-text .rp-dd .chip.rp-dd-b { padding-inline: 7px; }
  body.big-text .rp-segrow .seg-dot { display: none; }
}
.rp-dd-chev { flex: none; width: 14px; height: 14px; margin-left: 1px; transition: transform .15s var(--ease); }
.rp-dd-b[aria-expanded="true"] .rp-dd-chev { transform: rotate(180deg); }
.menu.rp-dd-menu { left: auto; right: 0; min-width: 210px; display: flex; flex-direction: column; gap: 2px; }
.menu.rp-dd-menu.is-left { left: 0; right: auto; }
.menu.rp-dd-menu[hidden] { display: none; }
.rp-dd-menu .chip, .rp-segs .rp-dd-menu .chip { width: 100%; justify-content: flex-start; min-height: 48px; height: auto; padding: 0 12px; border: 0; border-radius: 12px;
  background: none; color: var(--text); font: 600 .9375rem/1.2 var(--rt-body); text-align: left; }
.rp-dd-menu .chip:hover { background: var(--surface-2); }
.rp-dd-menu .chip[aria-pressed="true"], .rp-segs .rp-dd-menu .chip[aria-pressed="true"] { background: var(--surface-2); color: var(--heading); font-weight: 700; }
.rp-sec { gap: 2px; }
.rp-rows { gap: 2px; }
.rp-rows > li.is-open { display: block; }
.rp-row { min-height: 0; padding: 8px; gap: 12px; border-radius: 12px; }
.rp-avw { position: relative; flex: none; display: grid; }
.av.rp-av, .rp-row img.rp-av { width: 52px; height: 52px; }
.av.rp-av { background: var(--pick); color: var(--on-pick); font: 800 1.25rem/1 var(--rt-cond); letter-spacing: 0; }
/* Urgent (Claude marked it: an upset customer, a sick tree, something for today): Equipment's pill by the name. */
.rp-l2 .pill.rp-urgent { min-height: 20px; margin-right: 6px; padding: 1px 8px; font-size: .75rem; vertical-align: 1px; }
.rp-namerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rp-namerow .pill.rp-urgent { flex: none; min-height: 22px; padding: 2px 8px; font-size: .75rem; }
.rp-row .rp-who { font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); }
.rp-row .rp-when { font-size: .75rem; color: var(--text-3); }
.rp-row .rp-l2 { font-size: .75rem; line-height: 1.35; color: var(--text-2); white-space: normal; overflow: visible; }
.rp-row .rp-l3 { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; line-height: 1.35; color: var(--text-3); }
.rp-row .rp-l3.ok { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.rp-row .rp-l3.ok .ic { flex: none; width: 14px; height: 14px; color: var(--link); }
.rp-row.is-done .rp-av { opacity: .6; }
/* Done today: a check in a soft circle, the name, then channel · what happened. */
.rp-row.rp-done { padding: 10px 8px; background: var(--surface); }
.rp-ok { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--link); }
.rp-ok .ic { width: 18px; height: 18px; }
.rp-done .rp-who { font: 700 .875rem/1.3 var(--rt-body); }
.rp-done .rp-l2 { font-size: .75rem; color: var(--text-3); white-space: normal; }
.rp-static { gap: 6px; }
.rp-none { padding: 8px; font-size: .8125rem; }
/* Archived: one line on what the tab is. The Inbox: Clear all under the list, with how many it archives. */
.rp-kept-top { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.rp-kept-top .rp-why { flex: 1; min-width: 0; padding-bottom: 0; }
.rp-clearrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 4px; }
.rp-clearrow .meta { font-size: .75rem; color: var(--text-3); }
.rp-clearrow .btn.small.rp-clear { flex: none; min-height: 40px; height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--surface-2);
  color: var(--text); font: 600 .8125rem/1 var(--rt-body); }
/* Didn't need a reply: a soft card each. */
.rp-why { padding: 0 2px 4px; font-size: .75rem; color: var(--text-3); }
.rp-skip { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface); }
.rp-skip .rp-l1 { display: block; }
.rp-skip .rp-who { font: 700 .875rem/1.3 var(--rt-body); white-space: normal; overflow-wrap: anywhere; }
.rp-skip .rp-when { font: 400 .75rem/1.3 var(--rt-body); color: var(--text-3); }
.rp-skip .rp-l2 { font-size: .8125rem; line-height: 1.4; color: var(--text-2); }
.rp-skip .rp-l3 { font-size: .75rem; color: var(--text-3); }
.rp-skipbtn { margin-top: 0; }
/* Each one opens its conversation (Oct 14, 2026): the top of the card is a button; the open one has a line round it. */
.rp-skiprow { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rp-skiprow .rp-l3 { display: block; }
.rp-skiprow:hover .rp-who { text-decoration: underline; }
@media screen and (min-width: 900px) { .rp-skip.is-open { box-shadow: inset 0 0 0 2px var(--link); } }
.rp-skip .btn.small, .rp-paste-b .btn.small, .rp-fail .btn.small, .rp-tools .btn.small { min-height: 40px; height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--surface-2);
  color: var(--text); font: 600 .8125rem/1 var(--rt-body); }
.rp-paste-b .btn.small.cta { background: var(--cta); color: var(--on-cta); }
/* Search (inbox review, Oct 15, 2026): the Customers screen's soft search field, over the filters. */
.field.search.rp-search { position: relative; margin-bottom: 4px; }
.rp-search .ic { top: 14px; left: 12px; width: 18px; height: 18px; }
.rp-search input { height: 46px; min-height: 46px; padding-left: 38px !important; border: 0; border-radius: 12px; background: var(--surface); font: 400 1rem/1.2 var(--rt-body); }
/* Paste a message: a button at the top of the list that opens it in a panel (Inbox review, Oct 15, 2026; round 5 drew a
   dashed box under the rows, out of sight below a few conversations). */
.rp-tools { display: flex; }
.rp-tools .btn.small { gap: 8px; }
.rp-tools .btn.small .ic { width: 16px; height: 16px; }
.rp-paste-ready { font-weight: 700; color: var(--link); }
.rp-paste { display: flex; flex-direction: column; gap: 8px; }
.rp-paste textarea { width: 100%; min-height: 96px; padding: 10px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: 400 1rem/1.45 var(--rt-body); resize: vertical; }
.rp-paste .acts.rp-paste-b { gap: 8px; }
.rp-paste-out { gap: 8px; }
.rp-paste-out .reply-box, .rp-paste-out textarea.reply-edit { border: 1.5px dashed var(--draft-line); border-radius: 18px 18px 6px 18px; background: var(--draft); font-size: .9375rem; line-height: 1.45; }

/* One conversation: no card; a head with a line under it, the chat, and the Send bar along the bottom. */
.rp-panes { order: 0; }
.rp .rp-pane { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.rp .rp-pane:not(.is-open) { display: none; }
.rp-head { flex-wrap: nowrap; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.rp-back { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -2px -4px -2px -8px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; }
.rp-back .ic { width: 20px; height: 20px; transform: rotate(90deg); }
.rp-close { display: none; }
.rp-head .rep-top { flex: 1 1 auto; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; row-gap: 0; }
.rep-top .av.rp-av, .rep-top img.rp-av, .rep-top .fb-pic { width: 40px; height: 40px; font-size: 1.0625rem; }
.rep-top .rep-name, .rep-top .namelink.rep-name { font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); text-decoration: none; }
.rep-top .rep-sub { gap: 2px 8px; font-size: .75rem; line-height: 1.35; color: var(--text-3); }
.rep-top .rep-sub:empty { display: none; }
.rp-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; min-width: 0; }
.rp-body .fb-ad, .rp-body .rp-info { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
.rp-body .rp-info .ic { width: 14px; height: 14px; margin-top: 1px; }
/* A follow-up lined up for this customer (Inbox review, Oct 15, 2026): a soft box, so it is read before the reply. */
.rp-body .rp-info.rp-fu-link { align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--rt-attn-bg); color: var(--text); font-size: .8125rem; }
.rp-fu-link .btn.link.rp-fu-open { min-height: 40px; margin: -10px 0; padding: 0 8px; font-size: .8125rem; }
/* A website form: its answers as a card (Service, Zip, Project, Preferred contact), not the raw block of lines. */
.rp-pane .msg.is-form, .cu-msgs .msg.is-form { max-width: 92%; }
.rp-form { padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); color: var(--text); }
.rp-form-t { margin: 0 0 8px; font: 700 .75rem/1.2 var(--rt-body); color: var(--text-3); }
.rp-form-l { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .9375rem; line-height: 1.4; }
.rp-form-l dt { padding-top: 1px; font-size: .8125rem; color: var(--text-3); }
.rp-form-l dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-pane .convo { gap: 10px; }
.rp-pane .convo-older { gap: 10px; }
.rp-pane .convo > .rp-show { min-height: 44px; font-size: .75rem; color: var(--text-3); text-decoration: none; }
.rp-pane .rp-earlier { font-size: .75rem; }
.rp-pane .msg, .cu-msgs .msg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 82%; padding: 0; border-radius: 0; background: none; white-space: normal; }
.rp-pane .msg-b, .cu-msgs .msg-b { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); color: var(--text); font-size: .9375rem; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-pane .msg .who, .cu-msgs .msg .who { margin: 0; padding: 0 6px; font-size: .75rem; line-height: 1.3; color: var(--text-3); }
.rp-pane .msg.us, .cu-msgs .msg.us { align-self: flex-end; align-items: flex-end; background: none; }
.rp-pane .msg.us .msg-b, .cu-msgs .msg.us .msg-b { border-radius: 18px 18px 6px 18px; background: var(--pick); color: var(--on-pick); }
.rp-pane .msg .fb-seen { padding: 0 6px; font-size: .75rem; color: var(--text-3); }
.rp-pane .rep-note { gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--rt-attn-bg); color: var(--text); font-size: .875rem; }
/* The draft: "DRAFT READY" small over a dashed bubble on the right. */
.rp-pane .rp-draft { margin-top: 6px; gap: 6px; }
.rp-pane .rp-draft .rp-lab, .rp-paste-out .rp-lab { font: 700 .75rem/1.2 var(--rt-body); letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.rp-pane .reply-box.rp-bubble, .rp-pane textarea.reply-edit.rp-bubble { max-width: 88%; padding: 12px 14px; border: 1.5px dashed var(--draft-line); border-radius: 18px 18px 6px 18px;
  background: var(--draft); color: var(--text); font-size: .9375rem; line-height: 1.45; }
.rp-pane textarea.reply-edit.rp-bubble { width: 88%; font-family: var(--rt-body); }
.rp-pane .blank-field { align-self: stretch; gap: 4px; }
.rp-pane .blank-field label { font: 600 .75rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text); }
.rp-pane .blank-field input { min-height: 44px; height: 44px; padding: 0 12px; border-width: 1.5px; border-radius: 10px; font-size: .9375rem; }
.rp-pane .blank-hint { font-size: .75rem; color: var(--text-3); }
.rp-pane .working { align-self: center; margin-top: 10px; padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--text-2); font: 400 .875rem/1.4 var(--rt-body); text-align: center; }
.rp-pane .banner.rp-fail { align-self: center; margin-top: 10px; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--surface); color: var(--text-2); font-size: .875rem; text-align: center; }
.rp-fail .b-main { align-items: center; gap: 8px; }
/* The bar: SEND (big, condensed capitals), Edit and "…" beside it, where it goes under them. */
.rp .rp-pane .send-row.rp-actions { bottom: var(--bar-room); z-index: 3; gap: 8px; margin: 0; padding: 12px 14px 14px; border-top: 1px solid var(--border); background: var(--bg); box-shadow: none; }
.typing .rp .rp-pane .send-row.rp-actions, .no-bnav .rp .rp-pane .send-row.rp-actions { bottom: 0; }
.rp-pane .rp-btns { gap: 8px; }
.rp-pane .btn.cta.rp-send { height: 52px; min-height: 52px; border-radius: var(--r-pill); font: 800 1.25rem/1 var(--rt-cond); letter-spacing: .02em; text-transform: uppercase; }
.rp-pane .btn.rp-edit { height: 52px; min-height: 52px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: 700 .9375rem/1 var(--rt-body); }
.rp-pane .btn.rp-more-b { flex: none; width: 52px; min-width: 52px; height: 52px; min-height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); }
.rp-pane .btn.rp-more-b .ic { width: 20px; height: 20px; }
.rp-pane .btn.rp-more-b.has-words { width: auto; padding: 0 18px; gap: 8px; border-radius: var(--r-pill); font: 600 .9375rem/1 var(--rt-body); }
.rp-btns-only { justify-content: center; }
.rp-pane .rp-cap { font-size: .75rem; color: var(--text-3); }
.rp-pane .done-line { padding: 4px 0; font-size: .9375rem; color: var(--text); }
.rp-pane .done-line .ok-ic { color: var(--link); }
/* Other choices: a sheet of plain rows, each with a small grey drawing. */
.sheet.rp-other .sheet-body { padding-top: 0; }
.rp-opts { display: flex; flex-direction: column; }
.rp-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--text);
  font: 400 .9375rem/1.3 var(--rt-body); text-align: left; text-decoration: none; cursor: pointer; }
.rp-opt:hover { background: var(--rt-hover); }
.rp-opt .ic { flex: none; width: 19px; height: 19px; color: var(--text-3); }
.rp-opts .rp-rw { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 0 8px 10px 39px; }
.rp-opts .rp-rw[hidden] { display: none; }
.rp-opts .rp-rw > .field { flex: 1 1 100%; }
.rp-opts .rp-rw .btn.small { min-height: 44px; border-radius: 10px; }

/* A phone: the list first; a tapped conversation fills the screen, its bar just above the floating menu. */
@media screen and (max-width: 899px) {
  .rp:not(.is-reading) .rp-panes { display: none; }
  .rp.is-reading .rp-list { display: none; }
  .rp .rp-pane { margin-inline: calc(var(--gutter) * -1); }
  .rp-head { padding: 6px 14px 10px; }
  /* An open conversation has the whole screen, as in Messenger and WhatsApp (inbox review, Oct 15, 2026: the header, the
     Inbox tabs, the Send bar and the floating bar took half the screen, and the Send bar sat on a third of the draft).
     The floating bar and the tabs step aside; the back arrow brings them back. The Send bar sits on the bottom edge. */
  body.rp-reading .bnav, body.rp-reading #main > .inbox-tabs { display: none; }
  body.rp-reading.has-bnav main { padding-bottom: 0; }
  body.rp-reading #main > .inbox-tabs + .screen { padding-top: 0; }
  body.rp-reading .rp .rp-pane .send-row.rp-actions { bottom: 0; padding-bottom: calc(2px + var(--safe-b)); }
  body.rp-reading .toast { bottom: calc(var(--safe-b) + 112px); }
}
/* A computer: two full-height panes, the list 380 px with a line beside it; the conversation's bar stays at the bottom. */
@media screen and (min-width: 900px) {
  .has-side .screen[data-screen="replies"] { margin: 0 -28px; padding: 0; }
  .rp, .rp.is-empty { grid-template-columns: 380px minmax(0, 1fr); align-items: stretch; gap: 0; min-height: calc(100 * var(--dvh) - 57px); }
  .rp-list, .rp.is-empty .rp-list { padding: 16px 16px 30px; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: none; }
  .rp-row[aria-current="true"] { background: var(--surface); }
  .rp-panes { display: flex; flex-direction: column; }
  .rp .rp-pane.is-open { flex: 1; }
  .rp-back { display: none; }
  /* The X closes the conversation; the list then fills the screen until a row is tapped. */
  .rp-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -2px -6px -2px auto; padding: 0; border: 0; border-radius: 10px;
    background: none; color: var(--text-2); cursor: pointer; }
  .rp-close:hover { background: var(--rt-hover); color: var(--text); }
  .rp-close .ic { width: 20px; height: 20px; }
  .rp.is-closed { grid-template-columns: minmax(0, 1fr); }
  .rp.is-closed .rp-panes { display: none; }
  .rp.is-closed .rp-list { border-right: 0; }
  .rp-head { min-height: 61px; }
  .rp-pane .rp-head .rep-top .rep-sub .rp-dup { display: none; }
  .rp .rp-pane .send-row.rp-actions { bottom: 0; padding: 12px 14px 18px; }
  .sheet-back:has(.sheet.rp-other) { align-items: center; justify-content: center; }
  .sheet.rp-other { width: 420px; border-radius: 18px; }
}

/* ---------- Follow-ups ---------- */
.screen[data-screen="followups"] { gap: 14px; }
.fu-under { margin-top: 0; }
.fu-under .fresh { font-size: .75rem; }
.banner.fu-banner { padding: 12px 14px; border-radius: 14px; background: var(--rt-attn-bg); color: var(--text); font-size: .875rem; }
.fu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.fu-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.fu-wait { gap: 10px; }
.fu-cust { gap: 8px; }
.fu-recent { gap: 6px; }
.fu-hrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.fu-h { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 700 1rem/1.25 var(--rt-body); letter-spacing: 0; color: var(--text); }
.fu-n { font: 800 1.25rem/1 var(--rt-cond); color: var(--text); }
.fu-n.dot-before::before { vertical-align: .2em; }
.fu-count { font-size: .75rem; color: var(--text-3); }
.fu-cust .fu-usual { margin: 0; font-size: .75rem; }
.fu-cust .fu-usual .lab { font: 600 .75rem/1.4 var(--rt-body); color: var(--text-2); }
.fu-none-t { font-size: .9375rem; color: var(--text-2); }
/* A message waiting: no border, the name over the step and where it goes, then the message and the two buttons. */
.fu-cards { display: flex; flex-direction: column; gap: 10px; }
.card.fu-q { gap: 10px; padding: 14px; border: 0; border-radius: 16px; background: var(--surface); }
.fu-q .card-h { gap: 10px; }
.fu-q .card-h > .av { width: 40px; height: 40px; background: var(--surface-2); color: var(--text); font: 800 1.0625rem/1 var(--rt-cond); }
.fu-q .card-t { font: 700 .9375rem/1.3 var(--rt-body); }
.fu-q .card-t .namelink, .fu-c-t .namelink { text-decoration: none; }
.fu-q .card-s { font-size: .75rem; line-height: 1.35; }
.fu-q .li-pills .pill, .fu-c-h .pill { min-height: 0; padding: 2px 8px; font-size: .75rem; }
.fu-warn { font-size: .75rem; line-height: 1.4; color: var(--text); }
/* The customer has an unanswered message on Replies (Inbox review, Oct 15, 2026): a soft box, read before Approve. */
.fu-warn[data-reply-link] { padding: 8px 12px; border-radius: 12px; background: var(--rt-attn-bg); font-size: .8125rem; }
.fu-warn .btn.link.fu-reply-open { min-height: 40px; margin: -10px 0; padding: 0 8px; font-size: .8125rem; }
.fu-msgs { display: flex; flex-direction: column; gap: 8px; }
.fu-bubble { align-self: flex-end; max-width: 92%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--pick); color: var(--on-pick); font-size: .875rem; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.fu-email { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.fu-email-l { font-size: .75rem; color: var(--text-3); }
.fu-email-s { font: 700 .875rem/1.35 var(--rt-body); color: var(--text); }
.fu-email-b > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font: 600 .75rem/1 var(--rt-body); color: var(--link); cursor: pointer; list-style: none; }
.fu-email-b > summary::-webkit-details-marker { display: none; }
.fu-email-b > summary .chev { width: 14px; height: 14px; transition: transform .2s; }
.fu-email-b[open] > summary .chev { transform: rotate(180deg); }
.fu-email-b .msgp { padding-bottom: 2px; font-size: .8125rem; line-height: 1.45; color: var(--text-2); white-space: pre-wrap; }
.acts.fu-acts { flex-wrap: nowrap; gap: 8px; }
.fu-acts .btn.fu-ok { flex: 1; min-width: 0; height: 48px; min-height: 48px; border: 0; border-radius: var(--r-pill); background: var(--cta); color: var(--on-cta);
  font: 800 1.125rem/1 var(--rt-cond); letter-spacing: .01em; text-transform: uppercase; }
.fu-q > .pill.wrapok { align-self: flex-start; }
/* Approve and send along the top, Edit and Don't send under it, half each (inbox review, Oct 15, 2026: three across
   left Approve too narrow on a phone). */
.acts.fu-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fu-acts .btn.fu-ok { grid-column: 1 / -1; }
/* Paid and planting confirmed, on the card with its Approve (they were said once, in the right-hand column). */
.fu-checks { font-size: .75rem; line-height: 1.4; color: var(--text-2); }
.fu-checks.dot-before { color: var(--text); }
/* Edit: the text and the email in boxes like a Replies draft (dashed), the subject in a field over the email. */
.fu-edit { display: flex; flex-direction: column; gap: 10px; }
.fu-edit-f { gap: 4px; }
.fu-edit-f label { font: 600 .75rem/1.3 var(--rt-body); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.fu-edit textarea.reply-edit.fu-edit-box { width: 100%; padding: 12px 14px; border: 1.5px dashed var(--draft-line); border-radius: 14px; background: var(--draft); color: var(--text);
  font: 400 .9375rem/1.45 var(--rt-body); resize: vertical; }
.fu-edit-s, .fu-edited { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .75rem; line-height: 1.4; color: var(--text-3); }
.fu-edit-s .btn.link, .fu-edited .btn.link { font-size: .75rem; }
/* A customer in follow-ups: compact, the three steps as bars. */
.fu-custs { display: flex; flex-direction: column; gap: 8px; }
.fu-c { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); min-width: 0; }
.fu-c-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 32px; }
.fu-c-t { flex: 1; min-width: 0; margin: 0; font: 700 .875rem/1.3 var(--rt-body); color: var(--text); overflow-wrap: anywhere; }
.fu-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); background: var(--rt-attn-bg); color: var(--text); font: 700 .75rem/1.4 var(--rt-body); }
.fu-pill.dot-before::before { width: 6px; height: 6px; margin-right: 5px; }
.fu-c-b { display: inline-flex; align-items: center; gap: 4px; }
.fu-c-s { font-size: .75rem; line-height: 1.4; color: var(--text-3); overflow-wrap: anywhere; }
.fu-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.fu-step { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fu-bar { height: 4px; border-radius: 2px; background: var(--muted-line); }
.fu-step.is-sent .fu-bar { background: var(--cta); }
.fu-step.is-wait .fu-bar { background: var(--alert); }
.fu-step-l { font-size: .75rem; line-height: 1.2; color: var(--text-3); }
.fu-step-v { min-height: 1.3em; font-size: .75rem; line-height: 1.3; color: var(--text-3); }
.fu-step.is-sent .fu-step-v, .fu-step.is-other .fu-step-v { color: var(--text-2); }
.fu-step-v.dot-before::before { margin-right: 0; vertical-align: .1em; }
.fu-c-note { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: .75rem; line-height: 1.4; color: var(--text-2); }
/* Sent lately: a soft row each, the result at the right. */
.fu-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fu-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.fu-row-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fu-row-w strong { font: 700 .875rem/1.3 var(--rt-body); }
.fu-row-s { font-size: .75rem; line-height: 1.35; color: var(--text-3); overflow-wrap: anywhere; }
.fu-st { flex: none; font: 700 .75rem/1 var(--rt-body); color: var(--text-3); }
.fu-st.ok { color: var(--link); }
.fu-st.bad { color: var(--text); }
@media screen and (min-width: 900px) {
  .fu-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ---------- Customers ---------- */
.screen[data-screen="customers"] { gap: 0; }
.cu-split { display: flex; flex-direction: column; min-width: 0; }
.cu-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field.search.cu-search { position: relative; }
.cu-search .ic { top: 14px; left: 12px; width: 18px; height: 18px; }
.cu-search input { height: 46px; min-height: 46px; padding-left: 38px !important; border: 0; border-radius: 12px; background: var(--surface); font: 400 1rem/1.2 var(--rt-body); }
.cu-chips { gap: 6px; padding-block: 4px; }
.cu-chips .chip { position: relative; gap: 0; min-height: 34px; height: 34px; padding: 0 12px; border: 0; background: var(--surface); color: var(--text-2); font: 600 .8125rem/1 var(--rt-body); white-space: nowrap; }
.cu-chips .chip::after { content: ""; position: absolute; inset: -5px 0; }
.cu-chips .chip[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); }
.cu-chips .chip .dot-before::before { margin-right: 5px; }
.cu-small, .cu-list .cu-small { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
/* Hidden: small blue words that open. */
.cu-list details.sec[data-hidden-list] { padding: 0; border: 0; background: none; font-size: .8125rem; }
.cu-list details.sec[data-hidden-list] > summary { min-height: 40px; font: 600 .75rem/1.2 var(--rt-body); color: var(--link); justify-content: flex-start; }
/* A row: initials (one colour for everyone), the name, one small line, the stage at the right in grey. */
.cu-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cu-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; }
.cu-row:hover { background: var(--rt-hover); }
.cu-row.is-open { background: var(--surface); }
.av.cu-av { width: 48px; height: 48px; background: var(--pick); color: var(--on-pick); font: 800 1.1875rem/1 var(--rt-cond); letter-spacing: 0; }
.cu-row-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cu-row-t { font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); }
.cu-row .namelink { text-decoration: none; }
.cu-row .namelink::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.cu-row .namelink:focus-visible { outline: 0; }
.cu-row:has(.namelink:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.cu-row-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; line-height: 1.35; color: var(--text-3); }
.cu-row-r { flex: none; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; max-width: 45%; }
.cu-stage { padding: 3px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: 700 .75rem/1.2 var(--rt-body); white-space: nowrap; }
.cu-stage.dot-before::before { width: 6px; height: 6px; margin-right: 4px; }
.cu-sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--alert); }

/* One customer: one column. The name card first, on the chosen colour. */
.cu-back { align-self: flex-start; min-height: 40px; padding: 0; color: var(--link); font: 600 .9375rem/1 var(--rt-body); }
.cu-back:hover { background: none; text-decoration: underline; }
.screen[data-screen="customer"] { gap: 14px; padding-top: 8px; }
.cu-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cu-head { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; background: var(--pick); color: var(--on-pick); }
.cu-name { margin: 0; font: 800 2.5rem/.9 var(--rt-cond); letter-spacing: 0; text-transform: uppercase; color: var(--on-pick); overflow-wrap: anywhere; }
.cu-head a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cu-more { display: flex; align-items: center; gap: 6px; font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; }
.cu-more .ic { flex: none; width: 13px; height: 13px; }
/* The suggestion and a possible match: a soft box, the dot before what it is. */
.cu-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--rt-attn-bg); font-size: .875rem; line-height: 1.45; }
.cu-box strong { font-weight: 700; color: var(--text); }
.cu-box-b { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-pair { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.btn.small.cu-yes, .btn.small.cu-act { min-height: 40px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; font: 600 .8125rem/1 var(--rt-body); }
.btn.small.cu-yes { background: var(--cta); color: var(--on-cta); font-weight: 700; }
.btn.small.cu-act { background: var(--surface-2); color: var(--text); }
.btn.small.cu-act.cu-rose { padding: 0 8px; background: none; color: var(--rt-bad); }
/* Suggested stages (Oct 14, 2026): the review list in a sheet, each row ticked, the stage now → the suggested stage, and why. */
.cu-review { display: flex; flex-direction: column; margin: 4px 0 8px; }
.cu-review li + li { border-top: 1px solid var(--border); }
.cu-review-r { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.cu-review-r input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--go); }
.cu-review-w { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .875rem; line-height: 1.4; }
.cu-review-s { color: var(--text-2); }
.cu-review-why { font-size: .8125rem; color: var(--text-3); overflow-wrap: anywhere; }
/* Sections: a 15 px name, then soft rows. */
.cu-sec { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cu-h { display: flex; align-items: baseline; gap: 6px; margin: 0; font: 700 .9375rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text); }
.cu-h-n { font-weight: 600; color: var(--text-3); }
.cu-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); color: var(--link); }
.cu-ic .ic { width: 15px; height: 15px; }
.cu-fold { border-radius: 12px; background: var(--surface); }
.cu-fold > summary { flex-wrap: nowrap; gap: 10px; min-height: 48px; padding: 8px 10px; cursor: pointer; list-style: none; }
.cu-fold > summary::-webkit-details-marker { display: none; }
.cu-fold > summary .chev { flex: none; width: 16px; height: 16px; color: var(--text-3); transition: transform .2s; }
.cu-fold[open] > summary .chev { transform: rotate(180deg); }
.cu-fold-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cu-fold-t { font-size: .875rem; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.cu-fold-s { font-size: .75rem; line-height: 1.35; color: var(--text-3); }
.cu-st { flex: none; font: 700 .75rem/1 var(--rt-body); color: var(--text-2); }
.cu-st.ok { color: var(--link); }
.cu-fold > .convo, .cu-fold > .cu-lines, .cu-fold > .meta { padding: 0 12px 12px; }
.cu-fold > .convo { gap: 8px; }
.cu-lines .srow { font-size: .8125rem; }
.cu-tl { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-bottom: 8px; }
.cu-tl-w { display: flex; flex-direction: column; min-width: 0; }
.cu-tl-t { font-size: .875rem; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.cu-tl-s { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
/* Notes: a soft box, Save beside who changed them last. */
.cu-notes-t { width: 100%; min-height: 70px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface); color: var(--text); font: 400 .875rem/1.45 var(--rt-body); resize: vertical; }
.cu-notes-t:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.cu-notes-b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* Brandon's row of small buttons; what Not a customer does, small, under it. */
.cu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cu-hide { display: contents; }
.cu-hide-s { flex: 1 1 100%; font-size: .75rem; line-height: 1.4; color: var(--text-3); }
.cu-key-in > summary { min-height: 40px; display: flex; align-items: center; font: 600 .8125rem/1 var(--rt-body); color: var(--link); cursor: pointer; }

/* A computer: the list 400 px with a line beside it, the open customer filling the rest. */
@media screen and (min-width: 900px) {
  .has-side .screen[data-screen="customers"] { margin: 0 -28px; padding: 0; }
  .cu-split.is-wide { flex-direction: row; align-items: stretch; min-height: calc(100 * var(--dvh) - 57px); }
  .cu-split.is-wide .cu-list { flex: 0 0 400px; padding: 18px 24px 40px; border-right: 1px solid var(--border); }
  .cu-split.is-wide .cu-list .chips.scroll { margin-inline: 0; padding-inline: 0; }
  .cu-pane { flex: 1; min-width: 0; padding: 18px 24px 40px; }
  /* The X at the name card's corner closes the customer; the list then fills the screen until a name is tapped. */
  .cu-split.is-wide .cu-head { position: relative; padding-right: 60px; }
  .cu-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
    background: none; color: var(--on-pick); cursor: pointer; }
  .cu-close:hover { background: color-mix(in srgb, var(--on-pick) 14%, transparent); }
  .cu-close .ic { width: 20px; height: 20px; }
  .cu-split.is-closed .cu-list { flex: 1 1 auto; border-right: 0; }
  .screen[data-screen="customer"] { max-width: 760px; }
}

/* Brandon's decisions (Oct 13, 2026): Spent and Jobs tiles, one Timeline of messages and jobs, notes that save on their own. */
.cu-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cu-tile { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.cu-tile-l { display: block; font-size: .75rem; line-height: 1.3; color: var(--text-3); }
.cu-tile-v { display: block; font: 800 1.5rem/1.1 var(--rt-cond); color: var(--text); overflow-wrap: anywhere; }
.cu-tl-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cu-tl-msg .cu-tl-t { white-space: pre-line; }
.cu-tl-more { align-self: flex-start; min-height: 44px; padding: 0; color: var(--link); font: 600 .8125rem/1 var(--rt-body); }
.cu-tl-more:hover { background: none; text-decoration: underline; }
.cu-notes-b { min-height: 20px; }
.cu-saved { font: 600 .75rem/1.4 var(--rt-body); color: var(--text-2); }
.cu-notes-err { flex: 1 1 220px; margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--text); }
.cu-notes-theirs:empty { display: none; }
.cu-notes-theirs q { color: var(--text); white-space: pre-line; }

/* ===== Design match: team ===== */
/* Greg's Today and Wrap-up, Abel's Schedule, drawn as the round-5 mockup (SF-Greg, SF-Wrapup, SF-Crew .dc.html). Type
   sizes in rem so Larger text (on by default for Greg) still scales them; fixed heights and corners in px as drawn.
   Screen only: the printed list keeps its own black-on-white rules above. */
@media screen {
/* ---------- Greg's Today ---------- */
.screen.gt { gap: 20px; }
.gt .under { margin-top: 0; }
.st.gt-head { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
.gt-hw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gt-hello { font: 700 1.375rem/1.25 var(--rt-body); color: var(--text); }
.gt-date { font-size: .9375rem; line-height: 1.4; color: var(--text-2); }
.gt-date .tag { display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; }
.gt-head .fresh { font-size: .8125rem; color: var(--text-3); }
.gt-hr { flex: none; display: flex; align-items: center; gap: 8px; }
/* Do this next: the design's --pick card, capitals, a small button (light mode: the words in --on-pick, not --hi). */
/* In Light --go and --pick are the same forest: an edge in the card's words' colour keeps the button visible there. */
/* Banners and notes about the list: plain cards with the dot, no tint. */
.gt .banner, .gt .banner.bad { align-items: center; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--surface); color: var(--text); font-size: .9375rem; }
.gt .banner > .ic { display: none; }
.gt .banner::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }
.gt-chips .chip { min-height: 44px; padding: 0 14px; border: 0; background: var(--surface-2); color: var(--text); font: 600 .875rem/1 var(--rt-body); }
.gt-due .btn.small.primary, .gt [data-dig-due] .btn.small.primary { min-height: 48px; border: 0; border-radius: var(--r-pill); background: var(--cta); color: var(--on-cta); font-weight: 700; }
.gt [data-dig-due] .card.attn { padding: 14px 16px; border: 0; border-radius: 16px; }
/* Two columns on a computer: jobs at the left (one card a row); load, yard, tomorrow and print at the right. */
.gt-grid { display: flex; flex-direction: column; gap: 20px; }
.gt-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
@media (min-width: 1100px) {
  .gt-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
  .gt .gt-lowchip, .gt .gt-chips:not(:has(.chip:not(.gt-lowchip))) { display: none; }
}
.gt .sec { gap: 10px; }
.gt .eb { align-items: baseline; gap: 8px; font: 700 1.125rem/1.25 var(--rt-body); color: var(--text); }
.gt .eb .n { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--link); font: 800 1.375rem/1 var(--rt-cond); }
.gt .sec-help { margin-top: -4px; font-size: .8125rem; }
.gt-jobs { gap: 10px; }
/* A job card: the --pick band (type · town, the name in capitals, the tree total), then the body. */
.gt .card.gt-job, .gt .card.gt-job.attn { gap: 0; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--surface); }
.gt-late { padding: 3px 8px; border-radius: 6px; background: var(--alert); color: var(--on-alert); font: 800 .8125rem/1 var(--rt-cond); letter-spacing: .04em; }
.gt-tn { flex: none; font: 800 2.75rem/.8 var(--rt-cond); }
.gt-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.gt-body .addr { font-size: .9375rem; }
.gt-body .addr .meta { margin-top: 2px; font-size: .8125rem; }
.gt-trees { font-size: .9375rem; line-height: 1.4; overflow-wrap: anywhere; }
.gt .note { gap: 2px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--surface-2); font-size: .9375rem; line-height: 1.4; }
.gt .note .lab { font: 400 .75rem/1.3 var(--rt-body); color: var(--text-3); }
.collect.gt-collect { flex-wrap: nowrap; align-items: baseline; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); }
.gt-collect::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }
.gt-collect .lbl { font: 600 .9375rem/1.2 var(--rt-body); }
.gt-collect strong { font: 800 1.75rem/1 var(--rt-cond); }
.gt-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* The right column: Load for today as one card, the yard as rows, tomorrow's texts as bubbles. */
.sec.gt-card { gap: 0; padding: 4px 14px; border-radius: 16px; background: var(--surface); }
.gt-card-h { display: flex; align-items: baseline; gap: 8px; padding: 12px 0 4px; }
.gt-card-h h2 { flex: 1; font: 700 1rem/1.3 var(--rt-body); color: var(--text); }
.gt-card-h .n { font-size: .8125rem; color: var(--text-3); }
.gt-rows { list-style: none; margin: 0; padding: 0; }
.gt-rows li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--border); }
.gt-rows .qty { flex: none; min-width: 32px; font: 800 1.625rem/1 var(--rt-cond); color: var(--link); }
.gt-rn { font-size: .9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.plain.gt-yard { display: flex; flex-direction: column; gap: 8px; overflow: visible; border: 0; border-radius: 0; background: none; }
.gt-yard > li.srow { padding: 12px 14px; border: 0; border-radius: 14px; background: var(--surface); }
.gt-yard .p-name { font: 700 .9375rem/1.3 var(--rt-body); }
.gt-yard .sz { font-size: .8125rem; }
.gt-yard .num { display: inline-flex; align-items: center; font: 800 1.375rem/1 var(--rt-cond); color: var(--text); }
.gt-yard .num.out { color: var(--rt-bad); }
.gt-low .btn.link, .gt-ask .btn.link { padding: 0; color: var(--link); font-weight: 600; text-decoration: none; }
.gt-tom-list { display: flex; flex-direction: column; gap: 8px; }
.gt .card.gt-tcard { gap: 8px; padding: 14px; border: 0; border-radius: 14px; }
.gt-tcard .name { font: 700 1rem/1.3 var(--rt-body); }
.gt-town { font: 400 .8125rem/1.3 var(--rt-body); color: var(--text-3); }
.gt-tmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .8125rem; }
.preview.gt-bubble { align-self: flex-end; max-width: 92%; padding: 10px 14px; border: 0; border-radius: 18px 18px 6px 18px; background: var(--pick); color: var(--on-pick); font-size: .875rem; line-height: 1.4; }
.gt-tcard .gt-acts .btn.small { min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: 700 1rem/1 var(--rt-body); }
.utils.gt-utils { flex-direction: column; flex-wrap: nowrap; gap: 8px; padding: 0; border: 0; }
.gt-utils .btn.small { width: 100%; min-height: 56px; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--text); font: 800 1.25rem/1 var(--rt-cond); letter-spacing: .02em; text-transform: uppercase; }
.gt-ask { display: flex; justify-content: center; }
.gt-ask .btn.link { min-height: 48px; }
/* The foot's "Request a feature or change" is Today's "Ask for a change to the Hub" in the right column. */
.gt ~ .req-foot { display: none; }

/* ---------- Greg's Wrap-up: a 760 px column, the jobs as an accordion ---------- */
.screen.wu { gap: 16px; }
@media (min-width: 900px) { .screen.wu, .screen.wu ~ .req-foot { max-width: 760px; } }
.st.wu-head { flex-wrap: nowrap; align-items: center; gap: 12px; }
.wu .banner, .wu .banner.ok { align-items: center; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--surface); color: var(--text); font-size: .9375rem; }
.wu .banner:not(.ok) > .ic { display: none; }
.wu .banner:not(.ok)::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }
.wu .banner.ok > .ic { color: var(--link); }
.wu-jobs.sec { gap: 16px; }
.wu .card.wu-job { gap: 0; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: var(--surface); }
.wu .wu-row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; }
.wu-hb { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.wu-tile { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--pick); color: var(--on-pick); font: 800 1.5rem/1 var(--rt-cond); }
.wu-hw { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wu-hb .wu-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 700 1rem/1.3 var(--rt-body); overflow-wrap: anywhere; }
.wu-sub { font-size: .8125rem; line-height: 1.35; color: var(--text-3); }
.wu-late { padding: 3px 8px; border-radius: 6px; background: var(--alert); color: var(--on-alert); font: 800 .8125rem/1 var(--rt-cond); letter-spacing: .04em; text-transform: uppercase; }
.wu-res-pill { flex: none; padding: 4px 10px; border-radius: var(--r-pill); font: 700 .8125rem/1.2 var(--rt-body); }
.wu-res-pill.done { background: var(--cta); color: var(--on-cta); }
.wu-res-pill.partly { background: var(--alert); color: var(--on-alert); }
.wu-res-pill.not { background: var(--rt-bad); color: var(--bg); }
.wu-meta { padding: 0 12px 12px 72px; font-size: .8125rem; }
.wu-body { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 14px; }
.wu-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: .8125rem; color: var(--text-3); }
/* Done / Partly / Didn't get to it: three --s2 buttons; the chosen one in its colour (Partly in the alert colour). */
.seg.wu-res { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.seg.wu-res button { min-height: 56px; padding: 4px 6px; border-radius: 12px; background: var(--surface-2); color: var(--text); font: 800 1.0625rem/1.05 var(--rt-cond); letter-spacing: .02em; text-transform: uppercase; }
.seg.wu-res button .ic, .seg.wu-yn button .ic, .seg.wu-what button .ic { display: none; }
.seg.wu-res button[data-v="done"][aria-pressed="true"] { background: var(--cta); color: var(--on-cta); }
.seg.wu-res button[data-v="partly"][aria-pressed="true"] { background: var(--alert); color: var(--on-alert); }
.seg.wu-res button[data-v="not"][aria-pressed="true"] { background: var(--rt-bad); color: var(--bg); }
/* Fields in the open job: --s2, no border, 12 px labels; hours and crew as − value +. */
.wu .field { gap: 4px; }
.wu .field > label, .wu .field > .lab { font: 400 .75rem/1.3 var(--rt-body); color: var(--text-3); }
.wu .field input, .wu .field select { min-height: 48px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface-2); }
.wu-two.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.wu-step { display: flex; align-items: center; gap: 4px; }
.wu-sb { flex: none; width: 48px; height: 48px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: 400 1.375rem/1 var(--rt-body); cursor: pointer; }
.wu .wu-step input { flex: 1; min-width: 0; min-height: 48px; padding: 0 4px; background: none; text-align: center; font: 800 1.625rem/1 var(--rt-cond); color: var(--text); }
.wu .wu-step input::placeholder { color: var(--text-3); }
.wu .opt > summary { min-height: 40px; padding: 0; border: 0; gap: 8px; }
/* It may shrink (flex: none let "Optional: problems and a note for Brandon" run off a phone, hiding the chevron). */
.wu .opt > summary .s-main { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.wu .opt > summary .lab { font: 600 .875rem/1.3 var(--rt-body); color: var(--text-2); }
.wu .opt > summary .meta { font-size: .75rem; }
.wu .opt > summary .chev { width: 16px; height: 16px; color: var(--text-2); }
.wu .opt-body { gap: 8px; padding-top: 4px; }
.wu .toggles { gap: 6px; }
.wu .toggles button { min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: 600 .875rem/1.2 var(--rt-body); }
.wu .toggles button[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); }
.wu .opt-body .field textarea, .wu-sum .field textarea { border: 0; border-radius: 12px; background: var(--surface-2); }
/* The stock question: one card, No / Yes, the plants under it. */
.wu-stock.sec { gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface); }
.wu-stock > .lab { font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); }
.seg.wu-yn { display: flex; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.seg.wu-yn button { flex: 1; min-height: 48px; border-radius: 12px; background: var(--surface-2); color: var(--text); font: 700 1rem/1 var(--rt-body); }
.seg.wu-yn button[aria-pressed="true"], .seg.wu-what button[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); }
.seg.wu-what { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.seg.wu-what button { min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font: 400 .875rem/1.2 var(--rt-body); }
body.big-text .seg.wu-what button { min-height: var(--tap-s); }
.wu-stock .stockrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding-top: 10px; }
.wu-stock .btn.link { min-height: 44px; color: var(--link); }
/* Today's summary: the design's "rest of the day" box; the crew's notes under it on --s2. */
.wu-sum.sec { gap: 6px; }
.wu-sum .eb { font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); }
.wu-sum .sec-help { margin-top: 0; font-size: .75rem; }
.wu-sum .field textarea, .wu #wu-notes { min-height: 90px; padding: 12px; border: 0; border-radius: 14px; background: var(--surface); font-size: 1rem; resize: vertical; }
.wu .wu-crew { gap: 4px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface-2); font-size: .9375rem; }
.wu .wu-crew > .lab { font: 400 .75rem/1.3 var(--rt-body); color: var(--text-3); }
/* Send: the design's 60 px pill; after it's sent, a corrected one on --s2. */
.wu .sendbar .btn.cta.full { min-height: 60px; border: 0; border-radius: var(--r-pill); font: 800 1.5rem/1 var(--rt-cond); letter-spacing: .02em; text-transform: uppercase; }
.wu .sendbar .btn.cta.full.again { background: var(--surface-2); color: var(--text); }
.wu .msg-err { font-size: .9375rem; }

/* ---------- Abel's Schedule, inside the crew's own header ---------- */
/* The header's menu button: the design's round initial (the name beside it from 720 px). */
.ah .btn.small.ah-me { min-height: 44px; padding: 0 6px; gap: 8px; border: 0; background: none; }
.ah-me > .ic { display: none; }
.ah-me .side-av.ah-av { width: 30px; height: 30px; font: 800 1rem/1 var(--rt-cond); background: var(--cta); color: var(--on-cta); }
.screen.cs { gap: 16px; }
.cs .st h1 { font: 800 1.5rem/1 var(--rt-cond); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
@media (min-width: 720px) { .cs .st h1 { font-size: 1.625rem; } }
.cs-grid { display: flex; flex-direction: column; gap: 16px; }
.cs-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1000px) {
  .cs-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
}
.cs .under { margin-top: 0; }
.cs .banner, .cs .banner.bad { align-items: center; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--surface); color: var(--text); font-size: .9375rem; }
.cs .banner > .ic { display: none; }
.cs .banner::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }
/* The day tabs: three loose pills, the chosen one --pick; "Updated 7:30 AM" at the right. */
.cs-tabs { display: flex; align-items: center; gap: 6px; }
.seg.days.cs-days { display: flex; gap: 6px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; }
.seg.days.cs-days button { flex-direction: row; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: none; color: var(--text-2); font: 600 .9375rem/1 var(--rt-body); }
.seg.days.cs-days button[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); font-weight: 700; }
.cs-days .d2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-tabs .fresh { flex: 1; justify-content: flex-end; min-width: 0; gap: 6px; font-size: .75rem; line-height: 1.3; text-align: right; color: var(--text-3); }
.cs-dayh { font: 700 1rem/1.3 var(--rt-body); color: var(--text); }
.cs-dayh span { font: 500 .8125rem/1.3 var(--rt-body); color: var(--text-3); }
.cs-stops.sec { gap: 14px; }
/* A stop: the --pick band (type · town, the name big in capitals, the address), Map and Call, then the body. */
.cs .card.cs-stop { gap: 0; padding: 0; overflow: hidden; border: 0; border-radius: 20px; background: var(--surface); }
.cs-more { font-size: .8125rem; line-height: 1.35; color: var(--on-pick-2); }
.cs-body { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.cs-trees { display: flex; flex-direction: column; gap: 2px; }
.cs-tn { font: 800 1.75rem/1 var(--rt-cond); text-transform: uppercase; color: var(--link); }
.cs-trees p { font: 600 1.0625rem/1.35 var(--rt-body); overflow-wrap: anywhere; }
.cs .note { padding: 12px 14px; border: 0; border-radius: 12px; background: var(--surface-2); font-size: .9375rem; line-height: 1.4; }
.collect.cs-collect { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); }
.cs-amt { display: flex; align-items: baseline; gap: 8px; }
.cs-amt::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }
.cs-amt .lbl { font: 600 .9375rem/1.2 var(--rt-body); }
.cs-amt strong { font: 800 1.875rem/1 var(--rt-cond); }
.cs-collect .btn.small { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: 600 .875rem/1 var(--rt-body); }
/* Photos: Add before / Add after as the design's two --s2 buttons, the counts under them. */
.cs .photos-row { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; }
.cs .photos-row .acts { order: -1; flex-wrap: nowrap; gap: 8px; }
.cs .photos-row .acts .btn.small { flex: 1; min-height: 52px; padding: 0 8px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: 700 .875rem/1.2 var(--rt-body); }
.cs .photos-row .meta { font-size: .75rem; }
@media (max-width: 439px) { .cs .photos-row .acts .btn.small .ic { display: none; } }
/* Load the truck: one card with a tick box on each row. */
.cs-load.sec { gap: 0; padding: 4px 14px; border-radius: 14px; background: var(--surface); }
.cs-card-h { display: flex; align-items: baseline; gap: 8px; padding: 12px 0 4px; }
.cs-card-h h2 { flex: 1; font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); }
.cs-card-h .n { font-size: .8125rem; color: var(--text-3); }
.cs-rows { list-style: none; margin: 0; padding: 0; }
.cs-rows li { border-top: 1px solid var(--border); }
.cs-tick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cs-box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--border-strong); border-radius: 7px; }
.cs-box .ic { display: none; width: 14px; height: 14px; stroke-width: 3; }
.cs-tick[aria-pressed="true"] .cs-box { border-color: var(--cta); background: var(--cta); color: var(--on-cta); }
.cs-tick[aria-pressed="true"] .cs-box .ic { display: block; }
.cs-tick .qty { flex: none; min-width: 28px; font: 800 1.5rem/1 var(--rt-cond); color: var(--link); }
.cs-rn { font-size: .9375rem; line-height: 1.3; overflow-wrap: anywhere; }
/* Today's work (the crew lead): the design's "rest of the day" box and a Save pill. */
.cs .crew-day { gap: 6px; }
.cs .crew-day .eb { font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); }
.cs .crew-day textarea { width: 100%; min-height: 90px; padding: 12px; border: 0; border-radius: 14px; background: var(--surface); color: var(--text); font: 400 1rem/1.45 var(--rt-body); resize: vertical; }
.cs .crew-day textarea::placeholder { color: var(--text-3); opacity: 1; }
.cs .crew-day textarea:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.cs .crew-day .btn.primary { min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-pill); background: var(--cta); color: var(--on-cta); font: 800 1.125rem/1 var(--rt-cond); letter-spacing: .02em; }
.cs .crew-day .meta { font-size: .8125rem; }
/* Report a problem and Ask for a change, side by side. */
.cs-asks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cs-asks .sec { gap: 0; }
.cs-asks .btn.full { width: 100%; min-height: 52px; padding: 0 10px; border: 0; border-radius: 12px; background: var(--surface); color: var(--text); font: 600 .875rem/1.2 var(--rt-body); }
.cs-asks .btn .ic { display: none; }
.cs ~ .req-foot { display: none; }
/* Later: each day's name and count, a row a job with Map; Further out and To schedule the same, read only. */
.cs .later { display: flex; flex-direction: column; gap: 18px; }
.cs-later.sec { gap: 14px; }
.cs-lday { display: flex; flex-direction: column; gap: 8px; }
.cs .later .eb { align-items: baseline; gap: 6px; font: 700 1rem/1.3 var(--rt-body); color: var(--text); }
.cs .later .eb .n { min-width: 0; height: auto; padding: 0; background: none; color: var(--text-3); font: 500 .8125rem/1.3 var(--rt-body); }
.cs .later .short-day { display: flex; flex-direction: column; gap: 8px; }
.cs .later .short-day .sub-h { margin: 0; font: 700 .9375rem/1.3 var(--rt-body); }
.cs .later .list { display: flex; flex-direction: column; gap: 8px; overflow: visible; border: 0; border-radius: 0; background: none; }
.cs .later .li { min-height: 0; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--surface); }
.cs .later .li .av { display: none; }
.cs .later .li-t { font: 700 .9375rem/1.3 var(--rt-body); }
.cs .later .li-s { font-size: .8125rem; }
.cs .later .li-r .btn.small { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: 700 .9375rem/1 var(--rt-body); }
.cs .later .li-r .btn .ic { display: none; }
.cs .card.empty { border: 0; border-radius: 14px; }
}
/* ===== Design match: board ===== */
/* The Board, its job panel (computer) and sheet (phone), the date sheet and Add a job, as the round-5 design draws them
   (SF-Board.dc.html, SF-AddJob.dc.html; Brandon, Oct 13, 2026: "it needs to look like the design"). The Hub's own extras
   (Updated…, the red lines, the crew, photos, 811, the details, two-tap Delete) keep their place in the design's pieces:
   13 px words, 36 px small buttons, the notes box. */

/* ---------- the page: the dropdown row first, 10 px between rows ---------- */
.screen[data-screen="board"] { gap: 10px; padding-top: 8px; }
body.big-text .screen[data-screen="board"] { gap: 16px; }
@media (min-width: 900px) { .has-side .screen[data-screen="board"] { padding-top: 18px; } }
[data-screen="board"] .board-bar { gap: 8px; }
[data-screen="board"] .board-bar .list-pick { flex: 1 1 100%; max-width: none; }
[data-screen="board"] .board-bar .field.board-search { position: relative; flex: 1 1 calc(100% - 52px); max-width: none; display: flex; flex-direction: row; align-items: center;
  gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--surface); color: var(--text-3); cursor: text; }
[data-screen="board"] .board-search .ic { position: static; width: 18px; height: 18px; }
[data-screen="board"] .board-search input { flex: 1; min-width: 0; width: auto; height: 44px; min-height: 0; padding: 0 !important; border: 0; border-radius: 0; background: none;
  color: var(--text); font: 400 1rem/1.2 var(--rt-body); -webkit-appearance: none; appearance: none; }
[data-screen="board"] .board-search input:placeholder-shown::-webkit-search-cancel-button { display: none; }
[data-screen="board"] .board-search input:focus { outline: none; }
[data-screen="board"] .board-search:focus-within { outline: 2px solid var(--cta); outline-offset: 1px; }
[data-screen="board"] .board-bar .fresh { flex: 1 1 100%; font-size: .75rem; }
@media (min-width: 600px) {
  [data-screen="board"] .board-bar .list-pick { flex: 0 0 300px; }
  [data-screen="board"] .board-bar .field.board-search { flex: 0 0 280px; min-width: 200px; }
  [data-screen="board"] .board-bar .fresh { flex: 0 1 auto; margin-left: auto; }
}
/* The red lines (couldn't update, an old day's list, a save that didn't go through) in the design's notes-box style. */
[data-screen="board"] .board-under { gap: 8px; margin: 0; }
[data-screen="board"] .board-under .banner { gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); color: var(--text); font-size: .875rem; }
[data-screen="board"] .board-under .banner .ic { width: 18px; height: 18px; }
[data-screen="board"] .board-under .b-main { gap: 4px; }
[data-screen="board"] .board-under .banner .acts { gap: 6px; }
[data-screen="board"] .board-under .banner .btn.small { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: 600 .8125rem/1 var(--rt-body); }
[data-screen="board"] .board-under > .meta { font-size: .8125rem; }

/* ---------- the dropdown ---------- */
[data-screen="board"] .list-btn { height: 44px; min-height: 44px; gap: 10px; padding: 0 12px 0 16px; border-radius: 12px; font: 700 .9375rem/1.2 var(--rt-body); }
[data-screen="board"] .list-btn .lb-w { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-screen="board"] .list-btn .tc { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px; font: 700 .75rem/1 var(--rt-body); }
[data-screen="board"] .list-btn .lb-chev { width: 18px; height: 18px; }
[data-screen="board"] .menu.list-menu { top: 50px; left: 0; right: 0; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--border-strong);
  border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
[data-screen="board"] .list-menu button { gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 10px; font: 600 .9375rem/1.2 var(--rt-body); color: var(--text); }
[data-screen="board"] .list-menu .lo-late { font: 700 .75rem/1 var(--rt-body); color: var(--text); }
[data-screen="board"] .list-menu .lo-n { min-width: 26px; font: 700 .875rem/1 var(--rt-body); color: var(--text-3); }
[data-screen="board"] .list-menu .lo-tick { width: 18px; height: 16px; color: var(--cta); stroke-width: 2.6; }

/* ---------- the rows ---------- */
[data-screen="board"] .board-list { gap: 0; }
[data-screen="board"] .board-list .rows { gap: 10px; }
[data-screen="board"] .brow { gap: 12px; min-height: 0; padding: 6px; border-radius: 12px; }
[data-screen="board"] .brow:hover { background: none; }
[data-screen="board"] .brow.is-open { background: var(--surface); }
.dsq { width: 56px; min-width: 56px; gap: 3px; }
.dsq-t { font: 800 .8125rem/1 var(--rt-cond); letter-spacing: .08em; }
.dsq-b { font: 800 1.375rem/1 var(--rt-cond); }
.dsq.today { background: var(--pick); color: var(--on-pick); }
/* Late: the faint tint, the words in the normal colour and the 7 px dot above LATE (no red outline). */
.dsq.late { position: relative; background: var(--rt-attn-bg); color: var(--text); box-shadow: none; }
.dsq.late::before { content: ""; position: absolute; top: 5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--alert); }
.dsq.late .dsq-t { margin-top: 10px; }
/* The square is a fixed 56 px, so its words keep the design's size with Larger text too (no shrinking under 600 px). */
body.big-text .dsq-b { font-size: 1.375rem; }
[data-screen="board"] .brow-main { gap: 3px; padding: 0; }
[data-screen="board"] .brow-main .row-name { font: 700 .9375rem/1.3 var(--rt-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-screen="board"] .brow-main .row-sub { font-size: .8125rem; line-height: 1.35; color: var(--text-2); }
[data-screen="board"] .brow .track { gap: 2px; width: 120px; margin-top: 2px; }
[data-screen="board"] .brow .track .tk { flex: 1; width: auto; height: 3px; }
[data-screen="board"] .brow .row-crew { gap: 4px; margin-top: 0; font-size: .75rem; color: var(--text-3); }
[data-screen="board"] .brow .row-crew .av.sm { width: 1.375rem; height: 1.375rem; font-size: .75rem; }
[data-screen="board"] .brow > .pill { min-height: 0; padding: 4px 9px; background: var(--surface-2); color: var(--text-2); font: 600 .75rem/1.2 var(--rt-body); }
[data-screen="board"] .btn.small.row-date { min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--text);
  font: 700 .875rem/1 var(--rt-body); white-space: nowrap; }
[data-screen="board"] .btn.small.row-date:hover { background: var(--muted-line); }
[data-screen="board"] .btn.small.cta.row-date { background: var(--cta); color: var(--on-cta); }
[data-screen="board"] .btn.small.cta.row-date:hover { background: var(--cta-hover); }
[data-screen="board"] .row-more { width: 44px; height: 44px; border-radius: 10px; }
[data-screen="board"] .row-more:hover { background: var(--surface); }
[data-screen="board"] .board-empty { margin: 0; padding: 24px; text-align: center; color: var(--text-3); }
[data-screen="board"] .board-list .empty-line { padding: 16px; font-size: .875rem; color: var(--text-2); }
[data-screen="board"] .board-list .empty-line .btn.link { min-height: 44px; color: var(--link); font: 600 .8125rem/1 var(--rt-body); }
@media (max-width: 599px) {
  [data-screen="board"] .brow { gap: 12px; padding: 6px; }
  [data-screen="board"] .dsq { width: 56px; min-width: 56px; height: 56px; padding: 0 4px; }
  [data-screen="board"] .btn.small.row-date { padding: 0 14px; }
}

/* ---------- the job: the steps with their names, the details, notes, buttons ---------- */
.track.labelled { gap: 6px; }
.track.labelled .tk { padding-top: 4px; border-top-width: 4px; border-radius: 2px 2px 0 0; }
.track.labelled .tk-l, .track.labelled .tk.on .tk-l { font: 400 .75rem/1.2 var(--rt-body); color: var(--text-3); }
.kv.jb-facts { gap: 4px 12px; font-size: .8125rem; line-height: 1.4; }
.kv.jb-facts dt { padding-top: 0; font: 400 .75rem/1.4 var(--rt-body); color: var(--text-3); }
.kv.jb-facts dd { color: var(--text-2); }
.jb-notes { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface); font-size: .8125rem; line-height: 1.45;
  overflow-wrap: anywhere; white-space: pre-wrap; }
.jb-nl { display: block; font-size: .75rem; font-weight: 600; color: var(--text-3); white-space: normal; }
/* Anything to check (a change to ask Brandon about, Paid in full?, a date that passed) in the notes-box style. */
:is(.job-panel, .job-sheet) .changed, :is(.job-panel, .job-sheet) .jb-warn { padding: 10px 12px; border-radius: 10px; background: var(--surface);
  color: var(--text); font: 600 .8125rem/1.4 var(--rt-body); }
:is(.job-panel, .job-sheet) .changed::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--alert); vertical-align: .12em; }
:is(.job-panel, .job-sheet) .banner { gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface); color: var(--text); font-size: .8125rem; }
:is(.job-panel, .job-sheet) .banner .acts { gap: 6px; }
:is(.job-panel, .job-sheet) .banner .btn.small { min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: 600 .8125rem/1 var(--rt-body); }
:is(.job-panel, .job-sheet) .banner .btn.small.primary { background: var(--cta); color: var(--on-cta); }
.job-panel > .meta, .job-sheet .sheet-body > .meta { font-size: .8125rem; }
/* The job's own buttons: the design's big DONE / CHANGE, the main one in the main colour. */
.jb-acts { gap: 8px; }
.jb-acts .btn.small { flex: 1 1 0; min-width: max-content; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text);
  font: 800 1.125rem/1 var(--rt-cond); letter-spacing: .01em; text-transform: uppercase; }
.jb-acts .btn.small:hover { background: var(--muted-line); }
.jb-acts .btn.small:is(.cta, .primary) { background: var(--cta); color: var(--on-cta); }
.jb-acts .btn.small:is(.cta, .primary):hover { background: var(--cta-hover); }
/* Photos and 811: their line in 13 px, their buttons the design's small ones. */
:is(.job-panel, .job-sheet) .photos-row { gap: 6px; margin: 0; padding: 0; border: 0; }
:is(.job-panel, .job-sheet) .photos-row > .meta, :is(.job-panel, .job-sheet) .dig-box > .meta { font-size: .8125rem; color: var(--text-2); }
:is(.job-panel, .job-sheet) .dig-box { gap: 6px; padding: 0; }
.job-panel .photos-row .acts, .job-panel .dig-box .acts { gap: 6px; }
.job-panel :is(.photos-row, .dig-box) .btn.small {
  position: relative; min-height: 36px; height: 36px; gap: 6px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface); color: var(--text);
  font: 600 .8125rem/1 var(--rt-body); text-decoration: none; cursor: pointer; }
.job-panel :is(.photos-row, .dig-box) .btn.small:hover { background: var(--surface-2); }
/* 36 px to see, 44 px to tap. */
.job-panel :is(.photos-row, .dig-box) .btn.small::after { content: ""; position: absolute; inset: -4px 0; }
.job-panel :is(.photos-row, .dig-box) .btn.small .ic { width: 15px; height: 15px; }
.job-panel .dig-box .btn.small.primary { background: var(--cta); color: var(--on-cta); }

/* ---------- the computer's panel, on the left of the list (Brandon, Oct 13, 2026: "Panel left") ----------
   The design's 360 px side column (320 px of job, 20 px either side) and the list's 28 px edge: 320 px, then 48 px to the
   dropdown row and the list, which take the rest. */
[data-screen="board"] .board-split { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; }
[data-screen="board"] .board-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
body.big-text [data-screen="board"] .board-main { gap: 16px; }
/* Beside the panel the search gives way first, so Greg's "?" stays on the dropdown's row; on a narrow computer the
   dropdown gives way too rather than run under the edge. */
[data-screen="board"] .board-main .board-bar .list-pick { flex-shrink: 1; min-width: 0; }
[data-screen="board"] .board-main .board-bar .field.board-search { flex: 1 1 200px; max-width: 280px; min-width: 0; }
.job-panel { top: 74px; gap: 12px; padding: 0 0 18px; border: 0; border-radius: 0; background: none;
  max-height: calc(100 * var(--vh) - 92px); scrollbar-width: none; }
.job-panel:focus { outline: none; }
.job-panel:focus-visible { outline: 2px solid var(--cta); outline-offset: 4px; }
.jp-hero { flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 120px; padding: 14px; border-radius: 14px;
  background: var(--pick); color: var(--on-pick); }
.jp-top { display: flex; align-items: flex-start; gap: 8px; }
.jp-what { flex: 1; min-width: 0; padding-top: 2px; font: 800 .8125rem/1.2 var(--rt-cond); letter-spacing: .06em; text-transform: uppercase; }
.jp-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer; }
.jp-x:hover { background: var(--x-hover); }
.jp-x .ic { width: 18px; height: 18px; }
.job-panel .jp-name { font: 800 2.125rem/.9 var(--rt-cond); text-transform: uppercase; color: var(--on-pick); overflow-wrap: anywhere; }

/* ---------- the phone's sheet: no title bar, the date square, name and balance at the top ---------- */
.sheet.job-sheet { border-radius: 22px 22px 0 0; background: var(--surface); }
.sheet.job-sheet { position: relative; }
.job-sheet .sheet-head { position: absolute; top: 0; left: 0; right: 0; justify-content: flex-end; padding: 8px 8px 0; border-bottom: 0; background: none; pointer-events: none; }
.job-sheet .sheet-head .sheet-x { pointer-events: auto; }
.job-sheet .sheet-head::before { top: 10px; width: 36px; margin-left: -18px; background: var(--border-strong); }
.job-sheet .sheet-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.job-sheet .sheet-x { width: 44px; padding: 0; justify-content: center; font-size: 0; gap: 0; background: none; color: var(--text-2); }
.job-sheet .sheet-head .sheet-x .ic { width: 20px; height: 20px; }
.job-sheet .sheet-body { gap: 8px; padding: 30px 16px 12px; }
.jb-head { display: flex; align-items: center; gap: 12px; padding: 0 44px 6px 0; }
.jb-head .dsq { width: 52px; min-width: 52px; height: 52px; cursor: default; }
.jb-head .dsq-t { font-size: .75rem; }
.jb-head .dsq-b, body.big-text .jb-head .dsq-b { font-size: 1.25rem; }
.jb-hw { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jb-name { font: 700 1rem/1.3 var(--rt-body); overflow-wrap: anywhere; }
.jb-meta { font-size: .75rem; line-height: 1.35; color: var(--text-3); }
.jb-owed { flex: none; font: 800 1.375rem/1 var(--rt-cond); }
.jb-trees { font-size: .8125rem; color: var(--text-2); }
.job-sheet .track.labelled { padding-bottom: 4px; }
.job-sheet .jb-acts .btn.small { min-height: 52px; font-size: 1.25rem; }
.job-sheet .photos-row .acts .btn.small, .job-sheet .dig-box .acts .btn.small {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 48px; padding: 0 8px; border: 0; border-radius: 10px; background: none;
  color: var(--text); font: 400 .9375rem/1.3 var(--rt-body); text-align: left; text-decoration: none; cursor: pointer; }
.job-sheet .photos-row .acts .btn.small:hover, .job-sheet .dig-box .acts .btn.small:hover { background: var(--surface-2); }
.job-sheet .photos-row .acts .ic { width: 19px; height: 19px; }
.job-sheet .photos-row .acts, .job-sheet .dig-box .acts { flex-direction: column; align-items: stretch; gap: 0; margin: 0 -4px; }
.job-sheet .photos-row > .meta, .job-sheet .dig-box > .meta { padding: 4px 4px 0; }
.job-sheet .dig-box .acts .btn.small.primary { color: var(--link); font-weight: 600; }
.job-sheet .kv.jb-facts { padding: 6px 4px; }
/* On the phone's sheet (already the card colour) the notes and anything to check sit a step darker. */
.job-sheet :is(.jb-notes, .jb-warn, .changed, .banner) { background: var(--surface-2); }

/* ---------- the date sheet (Set a date / Change the date) ---------- */
.sheet.date-sheet { border-radius: 22px 22px 0 0; }
@media (min-width: 720px) { .sheet.date-sheet { width: 560px; border-radius: 18px; } }
:is(.date-sheet, .add-sheet) .sheet-head { gap: 8px; padding: 14px 12px 12px 20px; border-bottom-color: var(--border); }
.date-sheet .sheet-title { font: 700 1.0625rem/1.25 var(--rt-body); color: var(--text); }
:is(.date-sheet, .add-sheet) .sheet-x { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 0; border-radius: 12px; background: var(--surface-2);
  font-size: 0; color: var(--text); }
:is(.date-sheet, .add-sheet) .sheet-x .ic { width: 18px; height: 18px; }
.date-sheet .sheet-body { gap: 16px; padding: 16px 20px 20px; }
.date-who { display: flex; flex-direction: column; gap: 2px; }
.date-who .name { font: 700 .9375rem/1.3 var(--rt-body); }
.date-who .meta { font-size: .8125rem; color: var(--text-2); }
.seg.date-days { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.seg.date-days button { min-height: 64px; gap: 2px; padding: 6px 4px; border-radius: 12px; background: var(--surface-2); color: var(--text);
  font: 800 1.25rem/1 var(--rt-cond); text-transform: uppercase; }
.seg.date-days button[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); }
.seg.date-days .d2 { font: 400 .75rem/1.2 var(--rt-body); color: var(--text-3); }
.seg.date-days button[aria-pressed="true"] .d2 { color: var(--on-pick-2); }
.date-sheet .date-foot .btn.full { min-height: 48px; }
.date-sheet .date-foot .btn.full:not(.cta) { border: 0; background: none; color: var(--text-2); font: 600 1rem/1.2 var(--rt-body); }
.date-sheet .date-foot .btn.full:not(.cta):hover { background: var(--surface-2); }
.date-sheet .date-remove .btn.link { min-height: 44px; padding: 0; font: 600 .8125rem/1.2 var(--rt-body); color: var(--text-2); }
.date-sheet .date-remove .btn.link.danger { color: var(--rt-bad); }

/* ---------- the fields of the date sheet and Add a job: the design's cream (Light) or grey (Dark) boxes ---------- */
:is(.date-sheet, .add-sheet) .field { gap: 6px; }
:is(.date-sheet, .add-sheet) .field label, :is(.date-sheet, .add-sheet) .field .flabel { font: 600 .8125rem/1.3 var(--rt-body); color: var(--text-2); }
:is(.date-sheet, .add-sheet) .field label .why { font: 400 .75rem/1.3 var(--rt-body); color: var(--text-3); }
:is(.date-sheet, .add-sheet) .field :is(input, textarea) { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-2);
  color: var(--text); font: 400 1rem/1.3 var(--rt-body); }
:is(.date-sheet, .add-sheet) .field textarea { min-height: 84px; padding: 12px 14px; font-size: 1rem; line-height: 1.4; resize: none; }
:is(.date-sheet, .add-sheet) .field :is(input, textarea):focus { border-color: var(--border); outline: 2px solid var(--cta); outline-offset: 1px; }
.add-sheet .field input[aria-invalid="true"] { border-color: var(--rt-bad); }

/* ---------- Add a job ---------- */
.sheet.add-sheet { max-height: calc(94 * var(--vh)); border-radius: 22px 22px 0 0; }
@media (min-width: 720px) { .sheet.add-sheet { width: 680px; max-height: calc(88 * var(--vh)); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .9); } }
.add-sheet .sheet-head { flex-wrap: wrap; row-gap: 2px; padding: 16px 12px 12px 20px; }
.add-sheet .sheet-head::before { width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; }
.add-sheet .sheet-title { font: 800 1.75rem/1 var(--rt-cond); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.add-sheet .sheet-body { gap: 18px; padding: 16px 20px 0; }
.add-pv { padding: 12px; border: 1px dashed var(--draft-line); border-radius: 14px; background: var(--bg); }
.add-pv-h { font: 800 .75rem/1.2 var(--rt-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--cta); }
.add-pv .brow-main { gap: 5px; }
.add-pv .row-name { font: 700 .9375rem/1.3 var(--rt-body); }
.add-pv .row-sub { font-size: .8125rem; color: var(--text-2); }
.add-pv .track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; max-width: 150px; margin: 0; }
.add-pv .track .tk { width: auto; height: 4px; }
.add-pv .pill.neutral { min-height: 0; padding: 4px 9px; background: var(--surface-2); color: var(--text-2); font: 600 .75rem/1.2 var(--rt-body); }
.add-sheet .add-pills { gap: 6px; }
.add-sheet .add-pills .chip { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--border-strong); background: transparent; color: var(--text-2); font: 700 .875rem/1 var(--rt-body); }
.add-sheet .add-pills .chip[aria-pressed="true"] { border-color: var(--pick); background: var(--pick); color: var(--on-pick); }
.add-sheet .add-pick { min-height: 44px; padding: 0 6px 0 14px; border: 1.5px solid transparent; border-radius: 999px; background: var(--surface-2); font: 600 .875rem/1.2 var(--rt-body);
  color: var(--text-2); }
.add-sheet .add-pick.on { border-color: var(--pick); }
.add-sheet .add-pick input[type="date"] { width: auto; height: 34px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--surface); color: var(--text);
  font: 500 .875rem/1 var(--rt-body); }
.add-sheet .field input[placeholder="Or type another town"] { min-height: 46px; }
.add-sheet .field input[placeholder="Name on the job"] { min-height: 50px; }
.add-sheet .field input[inputmode="decimal"] { font: 800 1.375rem/1 var(--rt-cond); color: var(--text); }
.add-sheet .msg-err { align-items: center; margin-top: -10px; padding: 10px 12px; border-radius: 10px; background: var(--rt-bad-bg); color: var(--rt-bad); font: 600 .875rem/1.3 var(--rt-body); }
.add-sheet .msg-err .ic { width: 17px; height: 17px; margin: 0; color: var(--rt-bad); }
.add-sheet .add-foot { gap: 8px; margin: 0 -20px; padding: 12px 20px calc(14px + var(--safe-b)); border-top: 1px solid var(--border); background: var(--surface); }
.add-sheet .add-foot .btn { min-height: 54px; border: 0; }
.add-sheet .add-foot .btn.cta { gap: 8px; font: 800 1.375rem/1 var(--rt-cond); letter-spacing: .02em; text-transform: uppercase; }
.add-sheet .add-foot .btn.cta .ic { width: 20px; height: 20px; stroke-width: 2.6; }
.add-sheet .add-foot .btn:not(.cta) { background: var(--surface-2); color: var(--text); font: 700 .9375rem/1 var(--rt-body); }
@media (min-width: 720px) { .add-sheet .add-foot { padding-bottom: 16px; } }
/* Abel's one stop at a time (Brandon, Oct 13, 2026): Next stop under the stop, All stops at the right (under it on a phone). */
.cs-next { width: 100%; min-height: 56px; margin-top: 12px; border: 0; border-radius: 14px; background: var(--pick); color: var(--on-pick);
  font: 800 1.375rem/1 var(--rt-cond); letter-spacing: .02em; }
.cs-all { display: flex; flex-direction: column; gap: 8px; }
.cs-all h2 { font: 700 1rem/1.25 var(--rt-body); }
.cs-all-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cs-all-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 6px; border: 0; border-radius: 12px; background: none;
  color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.cs-all-row:hover, .cs-all-row[aria-current] { background: var(--surface); }
.cs-all-n { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--pick); color: var(--on-pick);
  font: 800 1.625rem/1 var(--rt-cond); }
.cs-all-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-all-w strong { font: 700 .9375rem/1.25 var(--rt-body); }
.cs-all-w span { font-size: .8125rem; color: var(--text-3); }
.cs-all-now { flex: none; font: 700 .75rem/1 var(--rt-body); color: var(--cta); }

/* ===== Design match: ads ===== */
/* Brandon's Ads tab and its pages as the round-5 design (SF-Ads.dc.html; Brandon, Oct 13, 2026: "it needs to look like
   the design"): tiles, two columns on a computer, campaign summary cards, the campaign page (a --pick header, audiences as
   nodes on a line, ads on a second line), Jobs to credit as rows, Tools as tiles, and the Hub's own parts in the design's
   pieces: cards on the card colour with no border, 36-38 px buttons with a 10 px corner (44 px on a phone), the small dot
   for anything that needs you, words in the normal colour. Screen only: the printed audience cards keep their own look. */
@media screen {
[data-screen="ads"].ads-screen { gap: 22px; }
/* The screen's name is in the top bar: its hidden heading takes no room here. */
.has-side [data-screen="ads"].ads-screen > .st { display: contents; }
/* The freshness and goals lines: one quiet line each above the tiles. */
[data-screen="ads"] > .under { margin-top: 0; gap: 4px; }
[data-screen="ads"] > .under .fresh { font-size: .75rem; }

/* The design's buttons: primary on --cta, the rest filled on the second card colour, a 10 px corner. */
[data-screen="ads"] .btn.small, [data-screen="ads-builder"] .btn.small, .sheet.ads-sheet .btn.small { min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--text); font: 600 .8125rem/1.2 var(--rt-body); letter-spacing: 0; }
[data-screen="ads"] .btn.small:hover, [data-screen="ads-builder"] .btn.small:hover { background: var(--border); }
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.btn.small.primary, .btn.small.cta, .btn.primary, .btn.cta) { border: 0; background: var(--cta); color: var(--on-cta); font-weight: 700; }
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.btn.small.primary, .btn.small.cta, .btn.primary, .btn.cta):hover { background: var(--cta-hover); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .btn:not(.small):not(.link):not(.primary):not(.cta) { min-height: 44px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: 600 .875rem/1.2 var(--rt-body); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .btn.small.danger { color: var(--text); }
[data-screen="ads"] .btn.link, [data-screen="ads-builder"] .btn.link { min-height: 38px; border-radius: 10px; color: var(--cta); font: 600 .8125rem/1.2 var(--rt-body); text-decoration: none; }
[data-screen="ads"] .btn.small.link { background: none; color: var(--text-2); }
[data-screen="ads"] .btn.small.link:hover { background: var(--surface-2); }
@media (max-width: 899px) {
  [data-screen="ads"] :is(.btn.small, .btn.link), [data-screen="ads-builder"] :is(.btn.small, .btn.link),
  [data-screen="ads"] .ad-main .btn.link.ad-more { min-height: 44px; }
}
[data-screen="ads"] a.btn.small { text-decoration: none; }

/* The pills: 11 px, bold, round; anything that needs you is the small dot and normal words (no red), a good result blue. */
[data-screen="ads"] .pill { min-height: 0; padding: 3px 8px; border: 0; font: 700 .75rem/1.2 var(--rt-body); }
[data-screen="ads"] .pill.rec { min-height: 0; }
[data-screen="ads"] :is(.pill.bad, .pill.warn, .pill.attn) { background: var(--rt-attn-bg); color: var(--text); }
[data-screen="ads"] .pill.bad::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--alert); }
[data-screen="ads"] :is(.pill.neutral, .pill.test-tag) { background: var(--surface-2); color: var(--text-2); }
[data-screen="ads"] .pill.ok { background: var(--rt-ok-bg); color: var(--rt-ok); }
[data-screen="ads"] .warnline { color: var(--text); }
[data-screen="ads"] .warnline::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--alert); vertical-align: middle; }

/* The channel switch: compact, as wide as its words. */
[data-screen="ads"] .seg.ch-switch { display: inline-flex; align-self: flex-start; gap: 2px; width: auto; padding: 3px; border: 0; border-radius: 12px; background: var(--surface); }
[data-screen="ads"] .seg.ch-switch button { min-height: 36px; padding: 0 14px; border-radius: 10px; font: 600 .8125rem/1 var(--rt-body); color: var(--text-2); }
[data-screen="ads"] .seg.ch-switch button[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); }
@media (max-width: 899px) { [data-screen="ads"] .seg.ch-switch button { min-height: 44px; } }

/* The overview: the tiles across, then two columns on a computer. */
[data-screen="ads"] .ads-ov { gap: 22px; padding: 0; border: 0; }
[data-screen="ads"] .ads-ov > .tiles.ov-tiles, [data-screen="ads"] .tiles.ov-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
[data-screen="ads"] .ov-tiles.all-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
[data-screen="ads"] .ov-tiles .tile, [data-screen="ads"] div.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 10px 12px;
  border: 0; border-radius: 12px; background: var(--surface); }
[data-screen="ads"] .ov-tiles .tile .tl { order: -1; font: 400 .75rem/1.35 var(--rt-body); letter-spacing: 0; color: var(--text-3); }
[data-screen="ads"] .ov-tiles .tn { font: 800 1.75rem/1.1 var(--rt-cond); color: var(--text); white-space: nowrap; }
[data-screen="ads"] .ov-tiles .tn.word { font-size: 1.375rem; line-height: 1.3; }
[data-screen="ads"] .ov-tiles .tn.ok { color: var(--cta); }
[data-screen="ads"] .ov-tiles .tn.dot-before::before { width: 7px; height: 7px; margin-right: 6px; vertical-align: .2em; }
[data-screen="ads"] .ov-tiles .tm { font-size: .75rem; line-height: 1.35; color: var(--text-3); }
[data-screen="ads"] .ov-tiles .tm .pill { margin: 0 4px 2px 0; }
.ads-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.ads-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
@media (min-width: 1000px) { .ads-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
[data-screen="ads"] .ads-col > :is(.ov-run, .ov-make, .ov-past, .ads-credits, .ads-tools) { margin: 0; padding: 0; border: 0; gap: 8px; }
[data-screen="ads"] .ads-col .sub-h, [data-screen="ads"] .ad-sec-h .sub-h { margin: 0; font: 700 1rem/1.3 var(--rt-body); color: var(--text); }
[data-screen="ads"] .ov-run[data-part="running"] > .ad-sec-h { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; }
[data-screen="ads"] .ov-run .btn.ab-new { min-height: 36px; padding: 0 12px; border-radius: 10px; font: 700 .8125rem/1 var(--rt-body); }
@media (max-width: 899px) { [data-screen="ads"] .ov-run .btn.ab-new { min-height: 44px; } }
[data-screen="ads"] .ad-empty { padding: 12px 14px; border: 0; border-radius: 12px; background: var(--surface); }
[data-screen="ads"] .ad-empty .empty-line { margin: 0; font: 700 .875rem/1.35 var(--rt-body); }
[data-screen="ads"] .ad-empty .meta { font-size: .75rem; color: var(--text-3); }

/* Campaigns running: one card per campaign. */
.camp-list { display: flex; flex-direction: column; gap: 8px; }
.camp-card { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px; border: 0; border-radius: 16px; background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; }
.camp-card:hover { background: var(--surface-2); }
.cc-r1 { display: flex; align-items: center; gap: 8px; width: 100%; }
.cc-name { flex: 1; min-width: 0; font: 700 1rem/1.3 var(--rt-body); overflow-wrap: anywhere; }
.cc-pill { flex: none; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-pill); background: var(--rt-attn-bg); color: var(--text);
  font: 700 .75rem/1.2 var(--rt-body); }
.cc-pill.dot-before::before { margin-right: 5px; }
.ic.cc-go { flex: none; width: 16px; height: 16px; color: var(--text-3); transform: rotate(-90deg); }
.cc-meta { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
.cc-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.cc-n { display: flex; flex-direction: column; min-width: 0; }
.cc-l { font-size: .75rem; line-height: 1.35; color: var(--text-3); }
.cc-v { font: 800 1.375rem/1.15 var(--rt-cond); color: var(--text); white-space: nowrap; }
.cc-v.ok { color: var(--cta); }
.cc-v.dot-before::before { margin-right: 5px; vertical-align: .2em; }
.cc-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
@media (max-width: 520px) { .cc-r1 { flex-wrap: wrap; } .cc-r1 .cc-go { order: 2; } .cc-pills { order: 3; flex-basis: 100%; justify-content: flex-start; } }
[data-screen="ads"] .live-foot { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 2px 0 0; }
[data-screen="ads"] .live-foot > .meta { flex: 1 1 200px; font-size: .75rem; color: var(--text-3); }
/* A state of the live read (loading aside): one quiet row with the dot. */
.ads-state { display: flex; padding: 12px 14px; border-radius: 12px; background: var(--surface); }
.ads-state .b-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ads-state strong { font: 700 .875rem/1.35 var(--rt-body); color: var(--text); }
.ads-state .b-why { font-size: .8125rem; color: var(--text-2); }
.ads-state .acts { gap: 6px; margin-top: 4px; }

/* The drafts and builds: a row each. */
[data-screen="ads"] .ov-make .ab-entry { display: flex; flex-direction: column; gap: 6px; }
[data-screen="ads"] .ov-make .ab-builds { display: flex; flex-direction: column; gap: 6px; }
[data-screen="ads"] .ov-make .btn.link.ab-line { justify-content: flex-start; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--surface); color: var(--text); font: 600 .8125rem/1.35 var(--rt-body); text-align: left; white-space: normal; }
[data-screen="ads"] .ov-make .btn.link.ab-line:hover { background: var(--surface-2); }

/* Text toggles: "What the verdicts mean", "Past audiences · 5", "Answered lately · 2" (no box, the words and a chevron). */
[data-screen="ads"] :is(.ads-key, .past-all, .credits-fold) { border: 0; border-radius: 0; background: none; }
[data-screen="ads"] :is(.ads-key, .past-all, .credits-fold) > summary { justify-content: flex-start; gap: 8px; min-height: 44px; padding: 0 4px; background: none; }
[data-screen="ads"] :is(.ads-key, .past-all, .credits-fold) > summary .s-main { flex: 0 1 auto; }
[data-screen="ads"] :is(.ads-key, .past-all, .credits-fold) > summary .s-main > strong, [data-screen="ads"] .past-t { font: 600 .875rem/1.3 var(--rt-body); color: var(--text-2); }
[data-screen="ads"] .ads-key > summary .s-main > .meta { display: none; }
[data-screen="ads"] :is(.ads-key, .past-all, .credits-fold) > summary .chev { width: 16px; height: 16px; color: var(--text-2); }
[data-screen="ads"] :is(.ads-key, .past-all, .credits-fold) > .fold-body { padding: 4px 0 0; border: 0; }
[data-screen="ads"] p.past-t { margin: 0; padding: 0 4px; }
.verdict-key { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.verdict-key .vk-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.verdict-key dt { flex: none; margin: 0; }
.verdict-key dd { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--text-2); }
@media (max-width: 520px) { .verdict-key .vk-row { flex-direction: column; gap: 6px; } }

/* Past audiences: the chip, a row each, the daily copy's footer. */
[data-screen="ads"] .past-body { gap: 6px; }
[data-screen="ads"] .past-body .chip { min-height: 32px; padding: 0 12px; border: 0; background: var(--surface-2); font: 600 .75rem/1 var(--rt-body); }
[data-screen="ads"] .past-body .chip[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); }
@media (max-width: 899px) { [data-screen="ads"] .past-body .chip { min-height: 44px; } }
.past-lines { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.past-line { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.past-line:hover { background: var(--surface-2); }
.pl-name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pl-a { font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; }
.pl-camp { font-size: .75rem; color: var(--text-3); }
.pl-n { flex: none; font-size: .75rem; color: var(--text-3); white-space: nowrap; }
[data-screen="ads"] .meta-bar { gap: 6px; padding: 4px 0 0; border: 0; background: none; }
[data-screen="ads"] .meta-bar .meta { font-size: .75rem; color: var(--text-3); }
[data-screen="ads"] .meta-run { align-items: center; gap: 8px 12px; }

/* Jobs to credit: the heading and its count, one quiet line, a row per job. */
.cr-h { display: flex; align-items: baseline; gap: 8px; }
.cr-n { font: 800 1.25rem/1 var(--rt-cond); color: var(--text); }
.cr-n.dot-before::before { margin-right: 5px; vertical-align: .2em; }
[data-screen="ads"] .ads-credits .cr-none { margin: 0; font-size: .75rem; color: var(--text-3); }
[data-screen="ads"] .ads-credits .cr-none { font-size: .8125rem; }
[data-screen="ads"] .ads-credits .q-list { gap: 8px; }
[data-screen="ads"] .ads-credits .q-list > li { gap: 8px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface); }
[data-screen="ads"] .ads-credits .q-list > li + li { border-top: 0; }
.cr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cr-main { flex: 1 1 180px; display: flex; flex-direction: column; min-width: 0; }
[data-screen="ads"] .cr-main .cr-who { font: 700 .875rem/1.3 var(--rt-body); color: var(--text); }
.cr-sub { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
[data-screen="ads"] .cr-main .cr-why { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
.cr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
[data-screen="ads"] .cr-acts .btn.small.primary { min-height: 38px; }
[data-screen="ads"] .btn.small.cr-text, [data-screen="ads"] .btn.small.link.cr-text { padding: 0 8px; background: none; color: var(--text-3); font: 600 .75rem/1.2 var(--rt-body); }
[data-screen="ads"] .btn.small.cr-text:hover { background: var(--surface-2); color: var(--text); }
@media (max-width: 899px) { [data-screen="ads"] .cr-acts .btn.small { min-height: 44px; } }
[data-screen="ads"] .cr-pick .searchbar { gap: 8px; }
[data-screen="ads"] .credits-done { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; background: none; }
[data-screen="ads"] .credits-done > li { padding: 4px 4px 4px 12px; border: 0; border-radius: 12px; background: var(--surface); }
[data-screen="ads"] .credits-done .p-name { font: 400 .8125rem/1.4 var(--rt-body); }

/* Tools: the search, then a tile per tool, two across. */
[data-screen="ads"] .ads-tools .field.search { margin: 0; }
[data-screen="ads"] .ads-tools .field.search input { min-height: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--surface); font-size: 1rem; }
@media (max-width: 899px) { [data-screen="ads"] .ads-tools .field.search input { min-height: 44px; height: 44px; } }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tool-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 12px; border: 0; border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tool-tile:hover { background: var(--surface-2); }
.tool-tile[hidden] { display: none; }
.ic.tt-ic { width: 19px; height: 19px; color: var(--cta); }
.tt-name { font: 700 .8125rem/1.3 var(--rt-body); }
.tt-sub { font-size: .75rem; line-height: 1.4; color: var(--text-3); overflow-wrap: anywhere; }
.tool-grid > .empty-line { grid-column: 1 / -1; margin: 0; font-size: .8125rem; }

/* A page over the overview (a campaign, a tool): "← All campaigns", the header, then the page. */
.ads-page { display: flex; flex-direction: column; max-width: 900px; }
.ads-back { align-self: flex-start; min-height: 40px; margin: 0 0 8px; padding: 0; border: 0; background: none; color: var(--cta); font: 600 .9375rem/1 var(--rt-body); cursor: pointer; }
@media (max-width: 899px) { .ads-back { min-height: 44px; } }
.camp-head { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--pick); color: var(--on-pick); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .camp-head .camp-eb { font: 800 .75rem/1.2 var(--rt-cond); letter-spacing: .1em; text-transform: uppercase !important; color: var(--on-pick); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .camp-head .camp-name { margin: 0; font: 800 1.875rem/.95 var(--rt-cond); letter-spacing: 0; text-transform: uppercase !important; color: var(--on-pick); overflow-wrap: anywhere; }
.camp-line { font-size: .875rem; line-height: 1.4; color: var(--on-pick); }
.camp-top { display: flex; align-items: flex-start; gap: 12px; }
.camp-words { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.camp-acts { flex: none; display: flex; gap: 6px; }
/* The header's Edit (ads-change.js): an outline on the --pick colour; on a past campaign's quiet header, as any button. */
[data-screen="ads"] .camp-head:not(.quiet) .camp-acts .btn.small { background: none; box-shadow: inset 0 0 0 1px var(--on-pick); color: var(--on-pick); }
[data-screen="ads"] .camp-head:not(.quiet) .camp-acts .btn.small:hover { background: none; box-shadow: inset 0 0 0 2px var(--on-pick); }
.camp-after { margin-top: 10px; }
.camp-head.quiet { background: var(--surface); color: var(--text); }
[data-screen="ads"] .camp-head.quiet :is(.camp-eb, .camp-line) { color: var(--text-3); }
[data-screen="ads"] .camp-head.quiet .camp-name { color: var(--text); }
.camp-budget { margin-top: 8px; }
.camp-budget .me-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
[data-screen="ads"] .camp-budget .me-budget > .sz { flex: 1 1 100%; margin: 0; font-size: .75rem; color: var(--text-3); }
.camp-budget .me-budget .acts { gap: 6px; }

/* The audiences (Brandon, Oct 15, 2026: slim cards + More): a card each, open at first; its top (name, pills, how many
   ads, the last 7 days), quiet lines under it, its buttons with More, then its ads inside the card. */
.camp-auds { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.aud-card { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; background: var(--surface); }
[data-screen="ads"] .camp-auds > .aud-card { border: 0; }
.aud-card > .node { display: flex; flex-direction: column; border: 0; background: none; }
.node > summary { list-style: none; }
.node > summary::-webkit-details-marker { display: none; }
.node-head { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; color: var(--text); cursor: pointer; }
.node-r1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; }
[data-screen="ads"] .node-head .node-name { font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); overflow-wrap: anywhere; }
.node-r1 .ad-pills { justify-content: flex-start; gap: 6px; }
.node-n { margin-left: auto; font-size: .75rem; color: var(--text-3); }
.node-r1 .chev { flex: none; width: 15px; height: 15px; color: var(--text-3); transition: transform .15s var(--ease); }
.node:not([open]) > .node-head .chev { transform: rotate(-90deg); }
.node-line { font-size: .8125rem; line-height: 1.4; color: var(--text-2); }
.node-line .num, .aud-num .num { white-space: nowrap; }
.node-cpl { font-weight: 700; white-space: nowrap; }
.node-cpl.ok { color: var(--cta); }
.node-cpl.dot-before::before { margin-right: 5px; }
.node-detail { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 4px; }
[data-screen="ads"] .node-detail > p { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--text-3); }
[data-screen="ads"] .node-detail .aud-num .lbl { color: var(--text-3); }
[data-screen="ads"] .node-detail .test-note { font-size: .8125rem; color: var(--text-2); }
[data-screen="ads"] .node-detail .nudge { gap: 8px; margin-top: 6px; padding: 0; background: none; border-radius: 0; }
[data-screen="ads"] .node-detail .nudge .nudge-t { margin: 0; font-size: .8125rem; color: var(--text-2); }
[data-screen="ads"] .node-detail .nudge .acts, [data-screen="ads"] .node-acts .acts { gap: 6px; }
.node-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px 12px; }
.node-acts > .me-acts { display: contents; }
[data-screen="ads"] .node-acts .me-acts .pill { align-self: center; }
/* More: a small button; open, it takes its own row under the main buttons. */
.aud-more > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
.aud-more > summary::-webkit-details-marker { display: none; }
.aud-more > summary .chev { width: 14px; height: 14px; color: var(--text-3); transition: transform .15s var(--ease); }
.aud-more:not([open]) > summary .chev { transform: rotate(-90deg); }
.aud-more[open] { flex-basis: 100%; }
.aud-more-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
[data-screen="ads"] .aud-more-body > .aud-since { flex-basis: 100%; margin: 0 0 2px; font-size: .75rem; color: var(--text-3); }
[data-screen="ads"] .aud-more-body .aud-since .lbl { font: 400 .75rem/1.4 var(--rt-body); color: var(--text-3); }
[data-screen="ads"] .aud-more-body :is(.btn.small, a.btn.small) { background: var(--surface); }
[data-screen="ads"] .aud-more-body :is(.btn.small, a.btn.small):hover { background: var(--border); }
.node-test { margin: 0 14px 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
[data-screen="ads"] .node-test .test-block { padding: 0; background: none; }
[data-screen="ads"] .node-test .test-block > .sub-h { font: 700 .875rem/1.3 var(--rt-body); }
[data-screen="ads"] .node-test :is(.btn.small:not(.primary), a.btn.small) { background: var(--surface); }
[data-screen="ads"] .node-test :is(.btn.small:not(.primary), a.btn.small):hover { background: var(--border); }

/* An ad inside its audience's card: its kind in a striped square, its name, its numbers, its headline (its words under
   Show words), its status and Pause. The builder draws its ads with the same row. */
.node-ads { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 14px 14px; list-style: none; }
.ad-node { padding: 0; border: 0; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .ad-node .tri-ad.ad-row { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0;
  border-radius: 12px; background: var(--rt-stripe); color: var(--text); font: inherit; text-align: left; opacity: 1; }
[data-screen="ads"] .ad-node .tri-ad.ad-row.tri-off .ad-main { opacity: .8; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .ad-row .ad-thumb { flex: none; align-self: flex-start; display: grid; place-items: center; width: 40px; min-width: 40px; height: 40px;
  padding: 0; border-radius: 8px; background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); color: var(--text-3);
  font: 600 .75rem/1 ui-monospace, monospace; }
.ad-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ad-name { min-width: 0; font: 700 .875rem/1.3 var(--rt-body); overflow-wrap: anywhere; }
.ad-nums { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .ad-main .tri-ln { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
:is([data-screen="ads"], [data-screen="ads-builder"]) .ad-main .tri-ln .tri-lbl { color: var(--text-3); font-weight: 400; }
:is([data-screen="ads"], [data-screen="ads-builder"]) .ad-main .tri-ln .tri-val { color: var(--text-2); }
[data-screen="ads"] .ad-main .ad-head { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-screen="ads"] .ad-main .ad-body { display: block; }
[data-screen="ads"] .ad-main .ad-body[hidden] { display: none; }
[data-screen="ads"] .ad-main .btn.link.ad-more { align-self: flex-start; min-height: 32px; margin-left: -4px; padding: 0 4px; font: 600 .75rem/1 var(--rt-body); color: var(--cta); }
[data-screen="ads"] .ad-main .ad-warn { display: flex; align-items: flex-start; gap: 0; color: var(--text); }
[data-screen="ads"] .ad-main .ad-warn .ic { display: none; }
[data-screen="ads"] .ad-main .ad-warn::before { content: ""; flex: none; width: 7px; height: 7px; margin: .4em 6px 0 0; border-radius: 50%; background: var(--alert); }
.ad-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ad-st { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2); font: 700 .75rem/1.2 var(--rt-body); }
.ad-st.on { background: var(--rt-ok-bg); color: var(--rt-ok); }
.ad-st.at-pill { background: var(--rt-attn-bg); color: var(--text); }
.ad-st.dot-before::before { margin-right: 5px; }
[data-screen="ads"] .ad-side .me-acts { margin: 0; }
.ad-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
@media (max-width: 520px) {
  .node-head, .node-detail, .node-acts { padding-left: 12px; padding-right: 12px; }
  .node-ads { padding: 0 12px 12px; }
  .node-test { margin: 0 12px 12px; }
  :is([data-screen="ads"], [data-screen="ads-builder"]) .ad-node .tri-ad.ad-row { flex-wrap: wrap; }
  [data-screen="ads"] .ad-side { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; padding-left: 52px; }
}

/* A tool's page: its inner drop-downs as rows on the card colour, no borders. */
.tool-page { gap: 0; }
.tool-head { margin-bottom: 12px; }
.tool-q { margin: 0 0 8px; font-size: .75rem; color: var(--text-3); }
.tool-body { gap: 12px; }
[data-screen="ads"] .tool-page .ads-fold { border: 0; border-radius: 14px; background: var(--surface); }
[data-screen="ads"] .tool-page .ads-fold > summary { min-height: 52px; padding: 10px 14px; }
[data-screen="ads"] .tool-page .ads-fold > summary .s-main > strong { font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); }
[data-screen="ads"] .tool-page .ads-fold > summary .s-main > .meta { font-size: .75rem; color: var(--text-3); }
[data-screen="ads"] .tool-page .ads-fold > .fold-body { padding: 4px 14px 14px; border-top: 0; }
[data-screen="ads"] .tool-page .ads-fold .ads-fold { background: var(--surface-2); }
[data-screen="ads"] .tool-page :is(.card, .tbl-wrap) { border: 0; border-radius: 14px; }
[data-screen="ads"] .tool-page .tab-intro { margin: 0; font-size: .75rem; color: var(--text-3); }
[data-screen="ads"] .tool-page .sec { padding: 0; border: 0; }

/* The Google, LSA and All views: the same tiles, cards on the card colour, ad groups as quiet blocks inside. */
[data-screen="ads"] .ads-col :is(.tri-card, .g-lsa, .card.calm) { padding: 14px; border: 0; border-radius: 16px; background: var(--surface); }
[data-screen="ads"] .ads-col .tri-list { display: flex; flex-direction: column; gap: 8px; }
[data-screen="ads"] .ads-col .tri-col { padding: 12px 14px; border: 0; border-radius: 14px; background: var(--surface-2); }
[data-screen="ads"] .ads-col .tri-col:has(.live-row.attention) { border: 0; }
[data-screen="ads"] .ads-col .tri-camp .tri-name, [data-screen="ads"] .ads-col .ad-card-h .p-name { font: 700 1rem/1.3 var(--rt-body); }
[data-screen="ads"] .ads-col .ad-big .big-cpl { font: 800 1.75rem/1.1 var(--rt-cond); }
[data-screen="ads"] .ads-col .ad-stats { padding: 10px; border-radius: 12px; background: var(--rt-stripe); }
[data-screen="ads"] .ads-col .g-row.attention { border: 0; }
[data-screen="ads"] .ads-col :is(.terms-fold, .how) { border: 0; border-radius: 14px; background: var(--surface); }
[data-screen="ads"] .ads-col .term-list > li { border: 0; border-radius: 12px; background: var(--surface); }

/* The lists inside: no box around them (the shared .plain list draws one). */
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.camp-auds, .node-ads, .past-lines, .credits-done, .q-list) { overflow: visible; background: none; border: 0; border-radius: 0; }
:is([data-screen="ads"], [data-screen="ads-builder"]) :is(.camp-auds, .node-ads, .past-lines, .credits-done, .q-list) > li { border-bottom: 0; }
[data-screen="ads"] .ads-tools .field.search .ic { left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); }
[data-screen="ads"] .ads-tools .field.search input { padding-left: 38px !important; }
[data-screen="ads"] .ad-main .tri-ln .tri-lbl, [data-screen="ads"] .aud-card .aud-num .lbl { font: 400 .75rem/1.4 var(--rt-body); color: var(--text-3); }
[data-screen="ads"] .ads-key + .ov-past { margin-top: -18px; }
[data-screen="ads"] li.aud-card, [data-screen="ads"] li.ad-node { border-bottom: 0; }
[data-screen="ads"] .aud-more-body .rec-none { font-size: .75rem; }

/* Larger text: the fixed 11-16 px sizes above scale too. */
html.big-text [data-screen="ads"] :is(.cc-l, .tt-sub, .pl-camp, .cr-why, .aud-num, .ad-nums) { font-size: .8125rem; }
}
/* ---------- the builder: "← Ads", one line about the draft, then the campaign as a campaign's page draws it (ads-builder.js;
   Brandon, Oct 15, 2026: "one shared layout"): the header, the audiences as cards, each audience's ads inside its card.
   A draft's blocks are buttons that say Edit. ---------- */
@media screen {
[data-screen="ads-builder"] .ab-head { gap: 6px; background: var(--bg); color: var(--text); border-bottom: 1px solid var(--border); }
[data-screen="ads-builder"] .ab-head .ab-back { min-height: 44px; padding: 0; border: 0; background: none; color: var(--cta); font: 600 .9375rem/1 var(--rt-body); }
[data-screen="ads-builder"] .ab-head .ab-back .ic { transform: rotate(90deg); width: 16px; height: 16px; }
[data-screen="ads-builder"] .ab-head h1 { font: 800 1.5rem/1 var(--rt-cond); letter-spacing: .02em; text-transform: uppercase !important; color: var(--text); }
[data-screen="ads-builder"] .ab-top { gap: 6px; }
[data-screen="ads-builder"] .ab-acct { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
[data-screen="ads-builder"] .ab-acct > .meta { flex: 1 1 260px; margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--text-3); }
[data-screen="ads-builder"] .ab-view { display: flex; flex-direction: column; }
[data-screen="ads-builder"] .camp-head.ab-camp { padding: 0; }
[data-screen="ads-builder"] .ab-view .tri-tap:not(.ad-row) { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 16px; border: 0;
  border-radius: 16px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
[data-screen="ads-builder"] .ab-view .tri-tap.tri-static:not(.ad-row) { flex-direction: column; gap: 2px; cursor: default; }
[data-screen="ads-builder"] .ab-words { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
[data-screen="ads-builder"] .ab-view .ab-camp :is(.tri-ln, .tri-ln .tri-lbl, .ab-made, .ab-needs, .ab-refused) { color: var(--on-pick); }
[data-screen="ads-builder"] .ab-view .tri-ln { display: block; font-size: .8125rem; line-height: 1.4; color: var(--text-2); }
[data-screen="ads-builder"] .ab-view .tri-ln .tri-lbl { font-size: .8125rem; color: var(--text-3); }
[data-screen="ads-builder"] .ab-view .tri-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
[data-screen="ads-builder"] .ab-view .tri-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-screen="ads-builder"] .ab-aud .tri-name { font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); }
[data-screen="ads-builder"] .ab-view .ad-main .tri-name { font: 700 .875rem/1.3 var(--rt-body); }
[data-screen="ads-builder"] .ab-view .ab-needs { font-weight: 700; }
[data-screen="ads-builder"] .ab-edit { flex: none; padding: 6px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text); font: 600 .8125rem/1.2 var(--rt-body); }
[data-screen="ads-builder"] .ab-view .tri-tap:hover .ab-edit { background: var(--border); }
[data-screen="ads-builder"] .ab-view .ad-row .ab-edit { background: var(--surface); }
[data-screen="ads-builder"] .ab-camp .ab-edit, [data-screen="ads-builder"] .ab-camp .tri-tap:hover .ab-edit { background: none; box-shadow: inset 0 0 0 1px var(--on-pick); color: var(--on-pick); }
[data-screen="ads-builder"] .ab-view .ad-side { align-self: flex-start; }
[data-screen="ads-builder"] .ab-view .tri-add { min-height: 38px; width: auto; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--cta);
  font: 600 .8125rem/1.2 var(--rt-body); }
[data-screen="ads-builder"] .ab-view .ab-add-aud .tri-add { width: 100%; min-height: 44px; }
[data-screen="ads-builder"] :is(.ab-refused, .ab-problem) { color: var(--text); }
[data-screen="ads-builder"] :is(.ab-refused, .ab-problem)::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--alert); vertical-align: middle; }
[data-screen="ads-builder"] .ab-foot .btn { border-radius: 10px; }
[data-screen="ads-builder"] .ab-foot .btn.full { min-height: 44px; }
[data-screen="ads-builder"] .ab-foot .btn.danger, [data-screen="ads-builder"] .ab-foot .btn.bad { background: none; color: var(--text-2); }
[data-screen="ads-builder"] .ab-foot > .meta { margin: 0; font-size: .8125rem; color: var(--text-3); }
@media (max-width: 520px) {
  [data-screen="ads-builder"] .ab-view .tri-tap:not(.ad-row) { padding: 12px; }
}
/* The audience sheet in short parts (Who, Where, Interests, Budget), each with its heading. */
.sheet.ab-sheet .ab-part { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.sheet.ab-sheet .ab-part > .field { margin: 0; }
.sheet.ab-sheet .ab-part-h { margin: 0; font: 800 1.0625rem/1.3 var(--rt-body); color: var(--text); }
}

/* ---------- Tree tags (redesign round 5, step 8) ----------
   Each tree's row: − / + with how many tags between; "Print N tags" held above the bar under the list. Check the tags: a
   card per tree chosen, Print / Save the words only / Not now at the foot. */
.stp { display: inline-flex; align-items: center; gap: 4px; }
.stp-b { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: 600 1.25rem/1 var(--rt-body); cursor: pointer; }
.stp-b:hover { background: var(--rt-hover); }
.stp-n { min-width: 32px; text-align: center; font: 700 1.375rem/1 var(--rt-cond); font-variant-numeric: tabular-nums; }
.stp input[type="number"] { width: 72px; text-align: center; -moz-appearance: textfield; }
.stp input[type="number"]::-webkit-inner-spin-button, .stp input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tg-print { min-height: 52px; }
.tg-cards { display: flex; flex-direction: column; gap: 14px; }
.tg-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-box); background: var(--bg); }
.tg-foot { position: sticky; bottom: 0; z-index: 1; margin: 0 -20px; padding: 12px 20px 4px; border-top: 1px solid var(--border); background: var(--surface); }


/* ===== Design match: inventory ===== */
/* Find a plant, Stock, Tree tags, Equipment and Settings as the round-5 design draws them (Brandon, Oct 13, 2026: "it
   needs to look like the design"; SF-Plants, SF-Stock and SF-More.dc.html). Sizes, weights and spacing are the
   mockup's; the touch targets stay 44 px where the mockup draws 36 to 42. */

/* ---------- Tree tags ---------- */
.tg-screen { gap: 16px; max-width: 820px; }
.tg-pc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.tg-pc.on::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cta); }
.tg-trees { display: flex; flex-direction: column; gap: 16px; }
.tg-rows { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tg-row { display: flex; align-items: center; gap: 12px; }
.tg-row[hidden] { display: none; }
.tg-tile { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: auto; min-width: 3.25rem; max-width: 5.5rem; height: 4rem; padding: 0 5px;
  border-radius: 8px 8px 8px 22px; background: var(--rt-tag); color: var(--rt-tag-ink); overflow: hidden; }
.tg-tile-w { max-width: 100%; font: 800 .8125rem/1 var(--rt-cond); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-tile.mid .tg-tile-w { font-size: .75rem; }
.tg-tile.long .tg-tile-w { font-size: .75rem; }
.tg-tile-p { font: 800 .75rem/1 var(--rt-cond); }
.tg-row-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tg-row-t { font: 700 .875rem/1.3 var(--rt-body); color: var(--text); }
.tg-row-s { font-size: .75rem; line-height: 1.35; color: var(--text-3); }
.stp { flex: none; gap: 4px; }
.stp-b { width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2); font: 400 1.25rem/1 var(--rt-body); }
.stp-n { min-width: 28px; font: 800 1.375rem/1 var(--rt-cond); }
.btn.tg-print { min-height: 56px; border: 0; font: 800 1.375rem/1 var(--rt-cond); letter-spacing: .01em; text-transform: uppercase; }
.tg-jobs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tg-h { margin: 0; font: 700 .9375rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text); }
.tg-job-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tg-job { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.tg-job-w { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.tg-job-t { font: 400 .875rem/1.35 var(--rt-body); color: var(--text); }
.tg-job-s { font-size: .75rem; line-height: 1.35; color: var(--text-3); }
.tg-job-st { flex: none; font: 700 .75rem/1.3 var(--rt-body); color: var(--text-2); }
.tg-job-acts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.tg-job .btn.small, .tg-jobs .btn.small.tg-check { min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text);
  font: 600 .8125rem/1 var(--rt-body); }
.tg-job .btn.small:hover, .tg-jobs .btn.small.tg-check:hover { background: var(--rt-hover); }

/* Check the tags: the head says what it is for, a card per tree, Print / Save the words only / Not now held at the foot. */
.sheet.tag-sheet { padding-bottom: 0; max-height: calc(94 * var(--vh)); border-radius: 22px 22px 0 0; }
.tag-sheet .sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 14px 12px 12px 18px; }
.tag-sheet .sheet-title { grid-column: 1; font: 800 1.625rem/1 var(--rt-cond); letter-spacing: .01em; text-transform: uppercase; color: var(--text); }
.tag-sheet .tg-sub { grid-column: 1; grid-row: 2; margin: 0; font-size: .8125rem; line-height: 1.35; color: var(--text-3); }
.tag-sheet .sheet-x { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 12px;
  background: var(--surface-2); font-size: 0; }
.tag-sheet .sheet-body { gap: 14px; padding: 14px 18px 0; }
.tg-cards { gap: 14px; }
.tg-card { gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); }
.tg-card .tag-box { padding: 0; border-radius: 6px; overflow: hidden; }
.tag-sheet .field { gap: 5px; }
.tag-sheet .field label { font: 600 .8125rem/1.3 var(--rt-body); color: var(--text-2); }
.tag-sheet .field label .why { margin-left: 6px; font: 400 .75rem/1.3 var(--rt-body); color: var(--text-3); }
.tag-sheet .field input:not(.stp-in) { min-height: 46px; height: 46px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-2);
  font: 400 1rem/1.2 var(--rt-body); }
.tag-sheet .two.tg-pair { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tg-price { display: flex; flex-direction: column; gap: 5px; }
.tag-sheet .hint.tg-price-line { margin: 0; font-size: .75rem; color: var(--text-3); }
.tg-how { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.tg-how-w { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.tg-rows-line { font-size: .75rem; line-height: 1.35; color: var(--text-3); }
.stp.big .stp-b { width: 44px; height: 44px; }
.tag-sheet .tg-how .stp input.stp-in { width: 48px; min-height: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--text); text-align: center;
  font: 800 1.5rem/1 var(--rt-cond); }
.tag-sheet .tg-how .stp input.stp-in:focus { outline: 3px solid var(--focus); outline-offset: 0; border-radius: 8px; }
.check.tg-fill { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font-size: .875rem; }
.check.tg-fill[hidden] { display: none; }
.check.tg-fill input { flex: none; position: relative; width: 24px; height: 24px; margin: 0; border: 2px solid var(--border-strong); border-radius: 7px; background: none;
  appearance: none; -webkit-appearance: none; cursor: pointer; }
.check.tg-fill input:checked { border-color: var(--cta); background: var(--cta); }
.check.tg-fill input:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--on-cta); border-width: 0 3px 3px 0;
  transform: rotate(45deg); }
.check.tg-fill input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tg-foot { position: sticky; bottom: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 -18px;
  padding: 12px 18px calc(24px + var(--safe-b)); border-top: 1px solid var(--border); background: var(--surface); }
.tg-foot .btn { min-height: 48px; border: 0; font: 700 .875rem/1.2 var(--rt-body); }
.tg-foot .btn.tg-go { min-height: 54px; font: 800 1.375rem/1 var(--rt-cond); letter-spacing: .01em; text-transform: uppercase; }
.tg-foot .btn.tg-keep { background: var(--surface-2); color: var(--text); }
.tg-foot .btn.tg-not { background: none; color: var(--text-2); font-weight: 600; }
@media (min-width: 720px) {
  .sheet.tag-sheet { width: 600px; max-height: calc(88 * var(--vh)); border-radius: 20px; }
  .tag-sheet .two.tg-pair { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .tg-foot { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; padding-bottom: 16px; }
}

/* ---------- the design's fields, in this area's sheets: 13 px labels, 46 px boxes on the softer colour ---------- */
:is(.tag-sheet, .st-sheet, .eq-sheet) .field { gap: 5px; }
:is(.st-sheet, .eq-sheet) .field label, :is(.st-sheet, .eq-sheet) .field .flabel { font: 600 .8125rem/1.3 var(--rt-body); color: var(--text-2); }
:is(.st-sheet, .eq-sheet) .field label .why, :is(.st-sheet, .eq-sheet) .field .flabel .why { font: 400 .75rem/1.3 var(--rt-body); color: var(--text-3); }
:is(.st-sheet, .eq-sheet) .field :is(input, select, textarea) { min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface-2); font: 400 1rem/1.3 var(--rt-body); }
:is(.st-sheet, .eq-sheet) .field textarea { min-height: 72px; }
:is(.st-sheet, .eq-sheet) .hint { font-size: .75rem; }

/* ---------- Stock ---------- */
.st-screen { gap: 16px; }
.st-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 900px) { .st-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.st-main, .st-side { display: flex; flex-direction: column; min-width: 0; }
.st-main { gap: 12px; }
.st-side { gap: 18px; }
.st-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.st-tools .field.search { flex: 1 1 180px; }
.st-tools .search .ic { top: 14px; left: 12px; width: 18px; height: 18px; }
.st-tools .field input[type="search"] { min-height: 46px; height: 46px; padding: 0 12px 0 38px !important; border: 0; border-radius: 12px; background: var(--surface);
  font: 400 .9375rem/1 var(--rt-body); }
.st-tools .btn { min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; font: 700 .9375rem/1 var(--rt-body); }
.st-tools .btn.st-add { background: var(--cta); color: var(--on-cta); }
.st-tools .btn.st-add:hover { background: var(--cta-hover); }
.st-tools .btn.st-mail { background: var(--surface-2); color: var(--text); font-weight: 600; font-size: .875rem; }
.st-items { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.st-item { display: flex; align-items: center; gap: 4px; }
.st-item[hidden] { display: none; }
.st-item .lrow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border-radius: 10px; }
.st-item .lrow:hover { background: none; }
.st-item .lrow:hover .l1 { text-decoration: underline; text-underline-offset: 3px; }
.st-tile { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 3.5rem; height: 3.5rem; border-radius: 10px;
  background: var(--pick); color: var(--on-pick); }
.st-tile.low { background: var(--rt-attn-bg); color: var(--text); }
.st-tile.out { background: var(--rt-bad-bg); color: var(--rt-bad); }
.st-tile-n { display: inline-flex; align-items: center; font: 800 1.625rem/.9 var(--rt-cond); font-variant-numeric: tabular-nums; }
.st-tile-n.dot-before { flex-direction: column; gap: 3px; }
.st-tile-n.dot-before::before { margin: 0; }
.st-tile.low:not(.big) { gap: 1px; }
.st-tile-w { font: 800 .75rem/1 var(--rt-cond); letter-spacing: .06em; text-transform: uppercase; }
.st-tile.big { width: 3.25rem; height: 3.25rem; }
.st-item-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-item .lrow .l1 { display: block; font: 700 .9375rem/1.3 var(--rt-body); color: var(--text); }
.st-item .lrow .l2 { font-size: .75rem; line-height: 1.35; color: var(--text-3); white-space: normal; }
.st-more { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--text-2); cursor: pointer; }
.st-more:hover { background: var(--rt-hover); }
.st-more .ic { width: 20px; height: 20px; }
/* The small lines (when it updated, what the screen is for, the invoice check) at the foot of the side column. */
.st-about { display: flex; flex-direction: column; gap: 4px; }
.st-about .under, .st-about .lede, .st-about .stock-checks { margin: 0; }
.st-about .under { gap: 4px; }
.st-about .under .fresh { font-size: .75rem; }
.st-about .lede { font-size: .8125rem; line-height: 1.45; color: var(--text-3); }
.st-about .stock-checks { gap: 2px; }
.st-about .stock-checks .meta { font-size: .75rem; line-height: 1.45; }
.st-h { margin: 0; font: 700 .9375rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text); }
.st-sec { display: flex; flex-direction: column; gap: 6px; }
.st-rows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.st-row-w { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.st-row-t { font: 400 .875rem/1.35 var(--rt-body); color: var(--text); }
strong.st-row-t { font-weight: 700; }
.st-row-s { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
.st-row .btn.small { flex: none; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text); font: 600 .75rem/1 var(--rt-body); }
.st-row .btn.small:hover { background: var(--rt-hover); }
.btn.link.st-exclude { min-height: 44px; padding: 0; color: var(--link); font: 600 .8125rem/1 var(--rt-body); }
.btn.link.st-exclude:hover { background: none; text-decoration: underline; }
/* "Exclude an invoice…" at the left, Clear at the right (Oct 15, 2026). */
.st-left-acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn.link.st-clear { min-height: 44px; padding: 0; color: var(--text-2); font: 600 .8125rem/1 var(--rt-body); }
.btn.link.st-clear:hover { background: none; color: var(--text); text-decoration: underline; }
.st-more-fold > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; font: 600 .8125rem/1 var(--rt-body); color: var(--text-2); }
.st-more-fold > summary .chev { width: 16px; height: 16px; }
/* Folds kept (Not in use, Nothing to do): a History row that opens. */
.card.fold.st-fold, .card.fold.drift-quiet { border: 0; border-radius: 12px; background: var(--surface); }
.card.fold.st-fold > summary, .card.fold.drift-quiet > summary { min-height: 52px; padding: 8px 12px; }
.card.fold.st-fold .s-main strong, .card.fold.drift-quiet .s-main strong { font: 700 .875rem/1.3 var(--rt-body); color: var(--text); }
.card.fold.st-fold .s-main .meta, .card.fold.drift-quiet .s-main .meta { font-size: .75rem; }
.card.fold.st-fold .fold-body, .card.fold.drift-quiet .fold-body { padding: 12px; }
/* Lines to check: "2 lines to check" with the dot, then a quiet tinted card per line. */
.drift-sec { gap: 8px; }
.drift-sec > .meta { margin: 0; font-size: .75rem; }
.drift-list { gap: 8px; }
@media (min-width: 1440px) { .drift-list { display: flex; } }
.card.drift { gap: 8px; padding: 14px; border: 0; border-radius: 14px; background: var(--rt-attn-bg); }
.card.drift .card-t { font: 700 .9375rem/1.3 var(--rt-body); }
.card.drift .card-s { font-size: .8125rem; color: var(--text-2); }
.card.drift .drift-story, .card.drift .drift-ask { font-size: .875rem; line-height: 1.45; }
.card.drift .drift-story + .drift-ask { margin-top: -4px; }
.card.drift .acts { gap: 6px; }
.card.drift .acts .btn.small, .drift-quiet .acts .btn.small { min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text);
  font: 700 .8125rem/1.2 var(--rt-body); }
.card.drift .acts .btn.small:hover, .drift-quiet .acts .btn.small:hover { background: var(--rt-hover); }
.card.drift .drift-note { margin: 0; font-size: .75rem; }

/* An item's sheet: its tile, name and counts at the top; Receive · Count · Edit item; − / + around the number; one Save. */
.sheet.st-sheet { border-radius: 22px 22px 0 0; }
.st-sheet .sheet-head { gap: 12px; padding: 16px 10px 10px 14px; border-bottom: 0; }
.st-sheet-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-sheet .sheet-title { font: 700 1rem/1.3 var(--rt-body); color: var(--text); }
.st-sheet .st-sheet-s { font-size: .75rem; line-height: 1.35; color: var(--text-3); }
.st-sheet .sheet-x { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 12px; font-size: 0; }
.st-sheet .sheet-body { gap: 10px; padding: 4px 14px 26px; }
.st-moves { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.st-moves li, .st-moves-none { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
.st-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); }
.st-tabs button { min-height: 44px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font: 700 .8125rem/1.2 var(--rt-body); cursor: pointer; }
.st-tabs button[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); }
.st-pane { display: flex; flex-direction: column; gap: 10px; }
.st-pane[hidden] { display: none; }
.st-sheet .field.st-step label { font: 400 .875rem/1.35 var(--rt-body); color: var(--text); }
.st-stepper { display: flex; align-items: center; gap: 8px; }
.st-stp { flex: none; width: 56px; height: 56px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: 400 1.625rem/1 var(--rt-body); cursor: pointer; }
.st-stp:hover { background: var(--rt-hover); }
.st-sheet .st-stepper input { flex: 1; min-width: 0; min-height: 56px; padding: 0; border: 0; background: none; text-align: center; font: 800 2.75rem/1 var(--rt-cond);
  -moz-appearance: textfield; }
.st-sheet .st-stepper input::-webkit-inner-spin-button, .st-sheet .st-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.st-change { margin: 0; font-size: .8125rem; color: var(--text-2); }
.st-sheet .seg.st-seg { display: flex; width: max-content; max-width: 100%; gap: 2px; padding: 3px; border: 0; background: var(--surface-2); }
.st-sheet .seg.st-seg button { min-height: 44px; padding: 0 14px; font: 600 .8125rem/1 var(--rt-body); color: var(--text-2); }
.st-sheet .seg.st-seg button[aria-pressed="true"] { color: var(--on-pick); }
.st-sheet .field .btn.full { min-height: 46px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: 700 .875rem/1.2 var(--rt-body); }
.st-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.st-foot .btn { min-height: 48px; border: 0; font: 700 .875rem/1.2 var(--rt-body); }
.st-foot .btn.st-save { min-height: 52px; font: 800 1.25rem/1 var(--rt-cond); letter-spacing: .01em; text-transform: uppercase; }
.st-foot .btn.st-print { background: var(--surface-2); color: var(--text); }
.st-foot .btn.st-not { background: none; color: var(--text-2); font-weight: 600; }
.st-sheet .stack .btn.full { min-height: 48px; border: 0; background: var(--surface-2); color: var(--text); font: 700 .875rem/1.2 var(--rt-body); }
.st-sheet .stack .btn.full.cta { background: var(--cta); color: var(--on-cta); }
@media (min-width: 720px) {
  .sheet.st-sheet { width: 420px; border-radius: 18px; }
  .sheet.st-sheet.st-add-sheet { width: 520px; }
}

/* ---------- Find a plant ---------- */
[data-screen="plants"] { gap: 12px; }
/* Search · Browse everything: two pills at the left, the chosen one filled. */
[data-screen="plants"] .seg[data-way] { display: flex; width: auto; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
[data-screen="plants"] .seg[data-way] button { flex: none; min-height: 44px; padding: 0 14px; font: 700 .8125rem/1 var(--rt-body); color: var(--text-2); }
[data-screen="plants"] .seg[data-way] button .ic { display: none; }
[data-screen="plants"] .seg[data-way] button[aria-pressed="true"] { color: var(--on-pick); }
/* The search box: no border, on the card colour; the Search button beside it, the same height. */
[data-screen="plants"] .searchbar { gap: 8px; }
[data-screen="plants"] .search .ic { top: 15px; left: 14px; width: 18px; height: 18px; }
[data-screen="plants"] .field.search input[type="search"] { min-height: 48px; height: 48px; padding: 0 14px 0 40px !important; border: 0; border-radius: 12px; background: var(--surface);
  font: 400 1rem/1 var(--rt-body); }
[data-screen="plants"] .searchbar .btn { min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; font: 700 .9375rem/1 var(--rt-body); }
/* A list that didn't update: one box with one dot; the lists' date in small words under it. */
.pl-fresh { display: flex; flex-direction: column; gap: 6px; }
.pl-warn { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--rt-attn-bg); color: var(--text); font-size: .8125rem; line-height: 1.4; }
.pl-fresh .fresh { margin: 0; font-size: .75rem; }
/* The lists as chips in one scrolling row, no borders. */
[data-screen="plants"] .chips.scroll { gap: 6px; }
[data-screen="plants"] > .chips .chip { min-height: 44px; padding: 0 12px; border: 0; background: var(--surface); color: var(--text-2); font: 600 .8125rem/1 var(--rt-body); }
[data-screen="plants"] > .chips .chip[aria-pressed="true"] { background: var(--pick); color: var(--on-pick); }
/* The answer: our yard at the left and the suppliers at the right on a computer; one column on a phone. */
.pl-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 900px) { .pl-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.pl-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pl-h { margin: 0; font: 700 .9375rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text); }
.pl-sec .meta, [data-screen="plants"] > .sec > .meta { font-size: .8125rem; }
.pl-yards, .spec.bare ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pl-yard, .spec li.pl-yard { display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 12px; background: var(--surface); }
.spec .pl-yard::before { display: none; }
.pl-tile.st-tile { width: 3.25rem; height: 3.25rem; }
.pl-tile .st-tile-n { font-size: 1.5rem; }
.pl-y-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-yard .p-name { font: 700 .875rem/1.3 var(--rt-body); }
.pl-yard .for { font-size: .75rem; color: var(--text-3); }
.pl-yard .p-price, .p-row .p-price { flex: none; font: 800 1.25rem/1 var(--rt-cond); font-weight: 800; color: var(--text); }
.rows.pl-sups { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; overflow: visible; list-style: none; border: 0; border-radius: 0; background: none; }
.pl-sups .p-row { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface); color: var(--text);
  text-align: left; font: inherit; cursor: pointer; }
.pl-sups .p-row:hover { background: var(--surface-2); }
.p-l1 { display: flex; align-items: baseline; gap: 8px; width: 100%; }
.p-l1 .p-name { flex: 1; min-width: 0; font: 700 .875rem/1.3 var(--rt-body); }
.p-size { font-weight: 500; color: var(--text-2); }
.p-was { flex: none; font-size: .75rem; color: var(--text-3); }
.p-row .p-price.on-sale { color: var(--link); }
.pl-sups .p-facts { font-size: .75rem; color: var(--text-3); }
.p-more { padding-top: 4px; border-top: 1px solid var(--border); font-size: .75rem; color: var(--text-2); }
.p-more[hidden] { display: none; }
.p-more .p-bot { font-style: italic; }
/* Browse everything: the bar's buttons as the design's fields; a card per row on a phone, the table on a computer. */
.pl-bar .field.search input[type="search"] { min-height: 48px; }
.btn.pl-filters-btn { min-height: 48px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: 700 .875rem/1 var(--rt-body); }
.pl-sort select { min-height: 48px; border: 0; border-radius: 12px; background-color: var(--surface-2); }
.bgroups { border: 0; border-radius: 12px; }
.bg-head { min-height: 52px; padding: 8px 12px; }
.bg-head .bg-name { font: 700 .875rem/1.3 var(--rt-body); }
.spec.bare { padding: 0 8px 8px; }
.spec.bare li.pl-yard { background: var(--surface-2); }
@media (max-width: 899px) {
  .pl-rows { display: flex; flex-direction: column; gap: 8px; overflow: visible; border: 0; border-radius: 0; background: none; }
  .pl-row + .pl-row { border-top: 0; }
  .pl-row { border-radius: 12px; background: var(--surface); overflow: hidden; }
}
@media (min-width: 900px) {
  .pl-rows { border: 0; border-radius: 12px; }
}

/* ---------- Equipment ---------- */
.eq-screen { gap: 16px; max-width: 820px; }
.btn.eq-report { min-height: 52px; border: 0; border-radius: 14px; font: 800 1.25rem/1 var(--rt-cond); letter-spacing: .01em; text-transform: uppercase; }
.eq-sec { display: flex; flex-direction: column; gap: 8px; }
.eq-sec-h { display: flex; align-items: center; gap: 8px; }
.eq-sec-h .eq-h { flex: 1; }
.eq-h { margin: 0; font: 700 .9375rem/1.3 var(--rt-body); letter-spacing: 0; color: var(--text); }
.eq-n { font-weight: 600; color: var(--text-3); }
.eq-rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.eq-prob, .eq-row, .eq-svc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 14px; background: var(--surface);
  color: var(--text); text-align: left; font: inherit; }
button.eq-row { cursor: pointer; }
button.eq-row:hover { background: var(--surface-2); }
.eq-row .go { flex: none; width: 15px; height: 15px; color: var(--text-3); }
.eq-tile { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2); color: var(--text-2);
  overflow: hidden; }
.eq-tile.urgent { background: var(--rt-attn-bg); color: var(--text); }
.eq-tile .ic { width: 20px; height: 20px; }
.eq-tile .problem-photo { width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; }
.eq-row-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.eq-row-t { font: 700 .875rem/1.35 var(--rt-body); color: var(--text); }
.eq-row-s { font-size: .75rem; line-height: 1.4; color: var(--text-3); }
.eq-due { flex: none; max-width: 45%; font: 700 .75rem/1.3 var(--rt-body); color: var(--text-2); text-align: right; }
.eq-due.dot-before { color: var(--text); }
.eq-prob .btn.small.eq-fix, .eq-svc .btn.small { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text);
  font: 600 .8125rem/1 var(--rt-body); }
.eq-prob .btn.small.eq-fix:hover, .eq-svc .btn.small:hover { background: var(--rt-hover); }
/* A machine's sheet and the other equipment sheets: the design's sheet, rows and buttons. */
.sheet.eq-sheet { border-radius: 22px 22px 0 0; }
.eq-sheet .sheet-head { border-bottom: 0; }
.eq-sheet .sheet-title { font: 700 1.125rem/1.3 var(--rt-body); color: var(--text); }
.eq-sheet .sheet-x { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 12px; font-size: 0; }
.eq-sheet .sheet-body { gap: 12px; padding: 4px 16px 24px; }
.eq-sheet .eq-svc { flex-wrap: wrap; gap: 6px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
.eq-svc-acts { flex-basis: 100%; display: flex; gap: 6px; }
.eq-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-acts .btn.small { min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: 600 .8125rem/1 var(--rt-body); }
.eq-acts .btn.link { min-height: 44px; padding: 0 8px; color: var(--text-2); font: 600 .8125rem/1 var(--rt-body); }
.eq-sheet .seg { display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; gap: 2px; padding: 3px; border: 0; background: var(--surface-2); }
.eq-sheet .seg button { min-height: 44px; padding: 0 14px; font: 600 .8125rem/1 var(--rt-body); color: var(--text-2); }
.eq-sheet .seg button[aria-pressed="true"] { color: var(--on-pick); }
.eq-sheet .stack .btn.full { min-height: 48px; border: 0; background: var(--surface-2); color: var(--text); font: 700 .875rem/1.2 var(--rt-body); }
.eq-sheet .stack .btn.full.cta { min-height: 52px; background: var(--cta); color: var(--on-cta); font: 800 1.25rem/1 var(--rt-cond); letter-spacing: .01em; text-transform: uppercase; }
.eq-sheet .field label.btn { min-height: 46px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--text); font: 600 .875rem/1.2 var(--rt-body); }
@media (min-width: 720px) { .sheet.eq-sheet { width: 520px; border-radius: 18px; } }

/* ---------- Brandon's decisions (Oct 13, 2026): one-tap Fixed, then "Add what was done"; Find a plant as you type, Our yard ---------- */
/* A problem just fixed stays on its line a while, quieter, with "Add what was done" where Fixed was. */
.eq-just .eq-tile { color: var(--text-2); }
.eq-just .eq-row-t { color: var(--text-2); }
.eq-just .btn.small.eq-fix { white-space: nowrap; }
.btn.link.eq-note { min-height: 44px; padding: 0 4px; color: var(--link); font: 600 .8125rem/1.2 var(--rt-body); }
.btn.link.eq-note:hover { background: none; text-decoration: underline; }
.eq-done { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.eq-done .meta { margin: 0; }
/* No Search button: the box takes the row. */
[data-screen="plants"] .searchbar.pl-typed { grid-template-columns: minmax(0, 1fr); }
/* Our yard on: the yard alone, one column. */
.pl-cols.yard-only { grid-template-columns: minmax(0, 1fr); max-width: 560px; }

/* ---------- Fill a computer screen (Brandon, Oct 13, 2026: "too much empty space", "no defining each job") ----------
   The Board's jobs are split by a thin line, and on a wide computer each row spreads into columns (the name and its line,
   the crew, the steps) instead of leaving the middle empty. Equipment is two columns (problems and service | the
   equipment); Tree tags is the trees on the left and a panel on the right with the printer, Print and Latest prints,
   which stays in view as the list scrolls (it no longer floats over the list). Phones are unchanged but for the lines. */
[data-screen="board"] .board-list .rows { gap: 0; }
[data-screen="board"] .board-list .brow { padding-block: 10px; border-radius: 0; }
[data-screen="board"] .board-list .brow + .brow { border-top: 1px solid var(--border); }
[data-screen="board"] .board-list .brow.is-open { border-radius: 12px; }
[data-screen="board"] .board-list .brow.is-open + .brow { border-top-color: transparent; }
@media (min-width: 1200px) {
  [data-screen="board"] .board-list .brow { gap: 16px; padding-inline: 8px; }
  [data-screen="board"] .board-list .brow:hover { background: var(--rt-hover); }
  [data-screen="board"] .brow-main { display: grid; align-items: center; column-gap: 24px; row-gap: 3px;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 140px; grid-template-areas: "name crew track" "sub crew track"; }
  [data-screen="board"] .brow-main .row-name { grid-area: name; }
  [data-screen="board"] .brow-main .row-sub { grid-area: sub; }
  [data-screen="board"] .brow-main .row-crew { grid-area: crew; font-size: .8125rem; }
  [data-screen="board"] .brow-main .track { grid-area: track; width: 100%; margin-top: 0; }
  [data-screen="board"] .board-split .brow-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 100px; column-gap: 16px; }

  .eq-screen { max-width: none; }
  .eq-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .eq-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

  .tg-screen { max-width: none; }
  .tg-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 40px; align-items: start; }
  .tg-side { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100 * var(--vh) - 92px); overflow-y: auto; scrollbar-width: none; }
  .tg-side .tg-jobs { margin-top: 0; }
  .tg-cols .tg-rows { gap: 0; }
  .tg-cols .tg-row { padding-block: 10px; }
  .tg-cols .tg-row + .tg-row { border-top: 1px solid var(--border); }
}
@media (max-width: 1199px) { .eq-cols, .eq-col { display: contents; } }

/* ===== Replies: reply by email, text or call (Brandon, Oct 13, 2026; reply-reach.ts) ===== */
.rp-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.rp-reach-lab { font: 600 .875rem/1.2 var(--rt-body); color: var(--text-3); }
.rp-reach-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-reach .chip { min-height: 44px; padding: 0 14px; gap: 6px; font: 600 .9375rem/1 var(--rt-body); }
.rp-reach .chip .ic { width: 16px; height: 16px; }
.rp-asked { padding: 3px 8px; border-radius: var(--r-pill); background: var(--yard-tag); color: var(--on-yard-tag); font: 600 .75rem/1 var(--rt-body); }
.rp-reach .chip[aria-pressed="true"] .rp-asked { background: var(--on-pick); color: var(--pick); }
.rp-call { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-box); background: var(--field); }
.rp-call-num { display: flex; align-items: center; gap: 10px; font: 700 1.5rem/1.1 var(--rt-body); color: var(--heading); font-variant-numeric: tabular-nums; }
.rp-call-num .ic { width: 22px; height: 22px; color: var(--link); }
a.btn.rp-send { text-decoration: none; }
.rp-call-note { width: 100%; min-height: 96px; resize: vertical; }
.msg.call .msg-b p { white-space: pre-line; }
.rp-pane .msg.us.call .msg-b, .cu-msgs .msg.us.call .msg-b { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.rp-call-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }

/* ===== Replies: one inbox and follow-ups (Brandon, Oct 14, 2026) ===== */
/* Waiting for an answer: the name and their line in full weight with a dot; answered ones quieter. */
.rp-row.is-answered .rp-who { font-weight: 500; color: var(--text-2); }
.rp-row.is-unread .rp-l3 { color: var(--text); font-weight: 600; }
.rp-row.is-unread .rp-when { color: var(--link); font-weight: 600; }
.rp-new { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--link); }
/* The box under an answered or archived conversation. */
.rp-follow-box { width: 100%; min-height: 48px; max-height: calc(40 * var(--vh)); resize: vertical; font: inherit; line-height: 1.4; }
.rp-follow .rp-btns { flex-wrap: wrap; }
.rp-follow .rp-btns .rp-edit { padding: 0 16px; }
.rp-follow .rp-info { margin: 0; }
/* ===== The Hub helper (Brandon, Oct 15, 2026; js/helper/helper.js) ===== */
/* The chat button in the header, the same square icon button as Refresh and the bell; the chat box over the page: most
   of the screen above the floating bar on a phone, a box at the bottom right on a computer. Colours from the tokens. */
.ah .btn.small.ah-help { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); }
.ah .btn.small.ah-help .ic { width: 21px; height: 21px; }
.ah .btn.small.ah-help[aria-expanded="true"] { color: var(--link); }
.hp-panel { position: fixed; left: 8px; right: 8px; top: 72px; bottom: calc(var(--bar-room) + 8px); z-index: 90; display: flex; flex-direction: column;
  border: 1px solid var(--border-strong); border-radius: var(--r-card); background: var(--surface); color: var(--text); box-shadow: var(--sh-lift); overflow: hidden; }
.no-bnav .hp-panel { bottom: var(--safe-b); }
.hp-head { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--border); }
.hp-mark { display: inline-flex; color: var(--link); }
.hp-mark .ic { width: 20px; height: 20px; }
.hp-title { flex: 1; margin: 0; font: 700 1.125rem/1.2 var(--rt-body); color: var(--heading); }
.hp-new { min-height: 44px; }
.hp-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-2); cursor: pointer; }
.hp-x:hover { background: var(--x-hover); }
.hp-x .ic { width: 20px; height: 20px; }
.hp-list { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.hp-intro p { margin: 0 0 12px; color: var(--text-2); }
.hp-starts { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hp-start { min-height: 44px; text-align: left; white-space: normal; }
.hp-msg { max-width: 88%; }
.hp-msg p { margin: 0; padding: 10px 14px; border-radius: var(--r-box); white-space: pre-line; overflow-wrap: anywhere; }
.hp-msg.me { align-self: flex-end; }
.hp-msg.me p { background: var(--solid); color: var(--on-solid); }
.hp-msg.bot { align-self: flex-start; }
.hp-msg.bot p { background: var(--surface-2); border: 1px solid var(--border); }
.hp-wait p { color: var(--text-3); }
.hp-err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hp-err p { margin: 0; color: var(--rt-bad); }
.hp-ask { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.hp-box { flex: 1; min-height: 48px; max-height: calc(30 * var(--vh)); resize: none; font: inherit; line-height: 1.4; }
.hp-send { min-height: 48px; }
@media (min-width: 900px) {
  .hp-panel { left: auto; top: auto; right: 24px; bottom: 24px; width: 400px; height: min(620px, calc(80 * var(--vh))); }
  .has-side .ah .btn.small.ah-help { width: 38px; min-width: 38px; height: 38px; min-height: 38px; border-radius: 10px; background: var(--surface); }
  .has-side .ah .btn.small.ah-help .ic { width: 17px; height: 17px; }
}
@media print { .hp-dock { display: none; } }

/* ======================================================================================================================
   The calm redesign (Brandon, Oct 16, 2026: "calm and fluid, like a professionally made 2026 app"; "much less text, and
   it should be obvious what matters most"). The shared pieces: motion, presses, sheets, icon buttons, the shrinking
   header, the hero, folds and placeholders. Each area's own rules are in web/css/<area>.css, loaded after this file.
   Rules: Docs/Hub design standard.md (Motion; Calm and focus). Only transform and opacity ever animate. ============== */

/* ---------- Calm redesign: thin line drawings (Lucide) ---------- */
.ic { stroke-width: 1.75; }

/* ---------- Calm redesign: screens flow in (motion.js enter) ---------- */
@keyframes cr-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes cr-push { from { opacity: 0; transform: translateX(28px); } }
@keyframes cr-pop { from { opacity: 0; transform: translateX(-28px); } }
@keyframes cr-fade { from { opacity: 0; } }
@keyframes cr-reveal { from { opacity: 0; transform: translateY(-4px); } }
.enter-rise { animation: cr-rise var(--t-screen) var(--ease-out) backwards; }
.enter-push { animation: cr-push .26s var(--ease-out) backwards; }
.enter-pop { animation: cr-pop .26s var(--ease-out) backwards; }
.enter-soft { animation: cr-fade .2s ease-out backwards; }
/* The same screen drawn again (the once-a-minute refresh, a save's answer): nothing moves or blinks (motion.js hush).
   The big title keeps its scroll animation, so it never flashes back while scrolled. */
.hush *:not([data-lt]), .hush *::before, .hush *::after { animation: none !important; transition: none !important; }

/* ---------- Calm redesign: a tap shows at once (a slight shrink for buttons, a dim for rows) ---------- */
.btn, .ib, .help-q, .bn-add, .seg button, .chip, .sheet-x { transition: transform var(--t-press) var(--ease-out), opacity var(--t-press) ease-out; }
.btn:active, .ib:active, .help-q:active, .bn-add:active, .seg button:active, .chip:active, .sheet-x:active { transform: scale(.96); }
.li.tap, .si, .mi, .bnav button, summary, [data-press] { transition: opacity var(--t-press) ease-out; }
.li.tap:active, .si:active, .mi:active, .bnav button:active, summary:active, [data-press]:active { opacity: .62; }

/* ---------- Calm redesign: sheets slide up from the bottom on a phone, settle in on a computer ---------- */
.sheet-back { transition: opacity .24s ease-out; }
.sheet-back.leaving { pointer-events: none; }
@media (max-width: 719px) {
  .sheet { transform: translateY(100%); transition: transform var(--t-sheet) var(--ease-sheet); }
  .sheet-back.open .sheet { transform: none; }
  /* The ☰ menu too: from the bottom, as every other sheet (it was a drawer from the left). */
  .sheet-back.nav-back { align-items: flex-end; justify-content: stretch; }
  .nav-back .sheet.nav-sheet { width: 100%; max-width: none; height: auto; max-height: calc(90 * var(--vh)); border-right: 0; border-radius: 28px 28px 0 0;
    background: var(--surface); box-shadow: var(--sh-sheet); transform: translateY(100%); padding-bottom: calc(16px + var(--safe-b)); }
  .nav-back.open .sheet.nav-sheet { transform: none; }
}
@media (min-width: 720px) {
  .sheet { opacity: 0; transform: translateY(10px) scale(.98); transition: transform .22s var(--ease-out), opacity .18s ease-out; }
  .sheet-back.open .sheet { opacity: 1; transform: none; }
}

/* ---------- Calm redesign: icon buttons (h.js iconButton) and their names when held or hovered ---------- */
.ib { position: relative; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--btn-line);
  border-radius: var(--r-pill); background: transparent; color: var(--ink-strong); cursor: pointer; text-decoration: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ib .ic { width: 20px; height: 20px; }
.ib:hover { background: var(--rt-hover); }
.ib.quiet { border-color: transparent; color: var(--text-2); }
.ib.quiet:hover { color: var(--text); }
.ib.solid { border-color: transparent; background: var(--cta); color: var(--on-cta); }
.ib.solid:hover { background: var(--cta-hover); }
.ib.bad { color: var(--rt-bad); }
.ib.sm { width: 36px; height: 36px; }
.ib.sm .ic { width: 18px; height: 18px; }
@media (pointer: coarse) { .ib.sm { width: 44px; height: 44px; } }
body.big-text .ib { width: 52px; height: 52px; }
body.big-text .ib .ic { width: 23px; height: 23px; }
.ib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* The name sits centred on its button (--tip-x); motion.js marks a button near the screen's right or left edge (data-tip-side), and its name
   then lines up with that edge instead, so it is never cut off. The page itself never scrolls sideways (html, body above). */
[data-tip] { --tip-x: -50%; }
[data-tip][data-tip-side="end"] { --tip-x: 0px; }
[data-tip][data-tip-side="start"] { --tip-x: 0px; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 40; padding: 6px 10px; border-radius: 10px;
  background: var(--toast); color: var(--on-toast); font: 600 .8125rem/1.2 var(--rt-body); letter-spacing: 0; text-transform: none; white-space: nowrap;
  pointer-events: none; opacity: 0; transform: translate(var(--tip-x), 4px); transition: opacity .14s ease-out, transform .14s ease-out; }
[data-tip][data-tip-side="end"]::after { left: auto; right: 0; }
[data-tip][data-tip-side="start"]::after { left: 0; }
@media (hover: hover) and (pointer: fine) { [data-tip]:hover::after { opacity: 1; transform: translate(var(--tip-x), 0); transition-delay: .4s; } }
[data-tip].tip-on::after { opacity: 1; transform: translate(var(--tip-x), 0); }
/* Near the top of the screen the name shows below the button. */
.top [data-tip]::after, .st [data-tip]::after { bottom: auto; top: calc(100% + 8px); transform: translate(var(--tip-x), -4px); }
.top [data-tip].tip-on::after, .st [data-tip].tip-on::after { transform: translate(var(--tip-x), 0); }
@media (hover: hover) and (pointer: fine) { .top [data-tip]:hover::after, .st [data-tip]:hover::after { transform: translate(var(--tip-x), 0); } }

/* ---------- Calm redesign: the frame. The big title scrolls away; the header's slim title fades in (motion.js) ---------- */
.st h1[data-lt] { flex: 1; min-width: 0; font: 800 2.25rem/1.02 var(--rt-cond); letter-spacing: .01em; text-transform: uppercase; color: var(--heading);
  transform-origin: 0 100%; }
@media (min-width: 720px) { .st h1[data-lt] { font-size: 2.5rem; } }
@media (max-width: 379px) { .st h1[data-lt] { font-size: 1.9rem; } }
body.has-lt .ah-title { opacity: 0; transform: translateY(6px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
body.has-lt.lt-past .ah-title { opacity: 1; transform: none; }
body.has-lt:not(.lt-past) .ah { border-bottom-color: transparent; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .st h1[data-lt] { animation: cr-shrink linear both; animation-timeline: scroll(root block); animation-range: 0 96px; }
    @keyframes cr-shrink { to { opacity: 0; transform: translateY(10px) scale(.84); } }
  }
}
.help-q { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0;
  border-radius: 50%; background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.help-q .ic { width: 22px; height: 22px; }
.help-q:hover { color: var(--text); }
body.big-text .help-q { width: 48px; height: 48px; }
.help-icons { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 0; margin: 0; list-style: none; }
.help-icons li { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.help-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--btn-line); border-radius: 50%; color: var(--ink-strong); }
.help-ic .ic { width: 18px; height: 18px; }
/* The practice strip: one short line, and who you are practising as. */
.practice { font-size: .875rem; }
.practice .wrap { gap: 8px; padding-block: 6px; }
.practice .ic { width: 16px; height: 16px; color: var(--text-3); }
.practice .pr-w { flex: 1; min-width: 0; color: var(--text-2); }
.practice strong { font-size: .875rem; color: var(--text); }
.pr-as { display: flex; gap: 4px; }
.pr-who { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); color: var(--text-2); font-weight: 600;
  text-decoration: none; }
.pr-who[aria-current="true"] { background: var(--pick); color: var(--on-pick); }
@media (max-width: 599px) { .practice .pr-more { display: none; } }

/* ---------- Calm redesign: the hero (parts.js hero, heroCalm) ---------- */
.hero { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border-radius: var(--r-card); }
.hero-solid { background: var(--hero); color: var(--on-hero); }
.hero-plain { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.hero-k { display: flex; align-items: center; gap: 8px; font: 600 .9375rem/1.3 var(--rt-body); color: var(--text-2); }
.hero-solid .hero-k { color: var(--on-hero-2); }
.hero-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--alert); }
.hero-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 0; font: 800 3rem/1.02 var(--rt-cond); letter-spacing: .005em;
  overflow-wrap: anywhere; color: inherit; }
.hero-u { font: 700 1.375rem/1.1 var(--rt-cond); letter-spacing: .01em; text-transform: none; color: var(--text-2); }
.hero-solid .hero-u { color: var(--on-hero-2); }
.hero-l { font: 400 1rem/1.4 var(--rt-body); color: var(--text-2); }
.hero-solid .hero-l { color: var(--on-hero-2); }
.hero-a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.hero-solid .btn { border-color: var(--hero-line); background: transparent; color: var(--on-hero); }
.hero-solid .btn:hover { background: var(--rt-shine); }
.hero-solid .btn.primary, .hero-solid .btn.cta { border-color: transparent; background: var(--hero-btn); color: var(--on-hero-btn); }
.hero-solid .btn.primary:hover, .hero-solid .btn.cta:hover { background: var(--hero-btn-hover); }
.hero-solid .ib { border-color: var(--hero-line); color: var(--on-hero); }
.hero-solid .ib:hover { background: var(--rt-shine); }
.hero-calm { flex-direction: row; align-items: center; gap: 12px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); }
.hero-cw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hero-ct { margin: 0; font: 600 1.0625rem/1.3 var(--rt-body); color: var(--text); }
@media (min-width: 900px) { .hero { padding: 26px 28px 24px; } .hero-v { font-size: 3.5rem; } }
body.big-text .hero-v { font-size: 3.25rem; }

/* ---------- Calm redesign: details on a tap (parts.js more, and every fold: a short fade as it opens) ---------- */
details[open] > :not(summary) { animation: cr-reveal .22s var(--ease-out) backwards; }
.more > .more-s { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px; color: var(--text-2); font: 600 .9375rem/1.25 var(--rt-body); }
.more-t { flex: 1; min-width: 0; }
.more-n { color: var(--text-3); font-weight: 500; white-space: nowrap; }
.more-b { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 12px; }

/* ---------- Calm redesign: soft placeholder shapes (h.js skeleton) ---------- */
.sk::after { animation-duration: 1.8s; }
.sk.h48 { height: 48px; } .sk.h44 { height: 44px; } .sk.h10 { height: 10px; } .sk.w30 { width: 30%; } .sk.w40 { width: 40%; }
.sk-hero { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
.sk-btn { border-radius: var(--r-pill); }
.sk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.sk-tile { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
.sk-rows { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border); }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.sk-row + .sk-row { border-top: 1px solid var(--border); }
.sk.sk-av { width: 40px; height: 40px; flex: none; border-radius: 50%; }
.sk-row-w { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Calm redesign: a list that couldn't update or is from another day: one slim line, not a red box ---------- */
.banner.bad { align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border: 0; border-radius: 14px; background: var(--surface); color: var(--text);
  font-size: .9375rem; }
.banner.bad > .ic { display: none; }
.banner.bad::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }
.banner.bad .b-main { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.banner.bad .b-main > span { color: var(--text-2); font-size: .875rem; }
.banner.bad .b-main .btn.small { margin-left: auto; min-height: 36px; border-color: var(--btn-line); }

/* ---------- Calm redesign: a heading or panel the page moves the focus to (for screen readers) draws no ring ---------- */
:is(h1, h2, h3, main, [role="dialog"], section)[tabindex="-1"]:focus { outline: none; }

/* ---------- Calm redesign: reduce motion (the phone's setting): plain fades, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .enter-rise, .enter-push, .enter-pop, .enter-soft { animation: cr-fade .16s ease-out backwards !important; }
  .sheet-back { transition: opacity .16s ease-out !important; }
  .sheet, .sheet-back.open .sheet, .nav-back .sheet.nav-sheet { transform: none !important; }
  .btn:active, .ib:active, .help-q:active, .bn-add:active, .seg button:active, .chip:active, .sheet-x:active { transform: none; }
  details[open] > :not(summary) { animation: cr-fade .16s ease-out backwards !important; }
  .sk::after { display: none; }
  .st h1[data-lt] { animation: none !important; }
}