/* The Aivorlabs workspace (/app/): the typed call and the demo business's
   pages. Phase F3 (FRONTEND-SPEC.md 3 and 4.3) moved it to sample C2's look:
   the C2 tokens, Archivo, no dark mode, and the site's own top bar above the
   workspace so the way home is always on screen. Layout and behaviour are the
   phase 2 workspace's, unchanged. The phase 2 file (Inter, light blue, a dark
   mode) is in attic/frontend-phase2-2026-09-25/public/assets/css/app.css.
   Motion is driven from JavaScript (aivor.js) so film capture stays exact. */

/* Archivo, self-hosted, the same file and face as site.css. Nothing is
   fetched from another server. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(/assets/fonts/Archivo-latin-var.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* C2's colours and nothing else (FRONTEND-SPEC.md 3): page white, ink,
     canary (the signal), pale canary (only where a tint is needed), small
     text, rules. Astra pages review, findings 29 and 38: the edge of a
     control (a box, a switch, a quiet button, an open slot) is small text's
     grey, #5B6574, 5.9:1 on white; the old #C9D0DA (1.55:1) is gone. */
  --bg: #FFFFFF;
  --ink: #1F2A5C;
  --text: #1F2A5C;
  --text-2: #5B6574;
  --text-3: #5B6574;
  --line: #E2E7EE;
  --line-2: #E2E7EE;
  --line-3: #5B6574;
  /* issue 6: hover and picked states, and the chip and callout tints, are the
     rules' grey (ink on it 10.8:1), never pale canary behind small text */
  --hover: #E2E7EE;
  --side: #FFFFFF;
  --chip: #E2E7EE;
  --backdrop: #E2E7EE;
  --soft: #FFFFFF;
  --on-ink: #FFFFFF;

  /* the signal, canary: the live dot, the now marker, the flash on the phone,
     an emergency tag, a selected tab's underline. Never text, never behind
     text without ink on it. --accent-ink is what text uses: ink. */
  --accent: #FFE680;
  --accent-soft: #FFF6CC;
  --accent-ink: #1F2A5C;
  --on-accent: #1F2A5C;

  --shadow-1: 0 1px 2px rgba(31, 42, 92, .08);
  --pad: clamp(20px, 4vw, 80px);   /* finding 38: the site's own --pad */
  --bar: 74px;           /* the site's top bar */
  --track: -0.01em;
  --r1: 4px; --r2: 6px; --r3: 8px;
  --font: "Archivo", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* spec 3.4: nothing moves for a visitor who has asked for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.ic { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; flex: none; color: var(--text-2); }
.ic svg { display: block; }

/* ---------- viewport and window ---------- */
/* The workspace fills the window under the site's top bar. Bug hunt round 2,
   "Maybe" 8: the video maker's camera stage, framed window and title bar are
   gone (attic/video-maker-2026-09-26/); nothing on a page used them. */
#viewport { position: fixed; inset: var(--bar) 0 0 0; overflow: hidden; background: var(--bg); }
#window { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }

#app { flex: 1; display: flex; min-height: 0; }

/* ---------- sidebar ---------- */
#sidebar { width: 240px; flex: none; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 8px 6px; gap: 2px; font-size: 15px; color: var(--text-2); }
.ws { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r1); color: var(--text); font-weight: 600; }
.ws .mark { width: 22px; height: 22px; border-radius: 5px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.nav { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: var(--r1); white-space: nowrap; }
.nav:hover, .nav.hover { background: var(--hover); }
.nav.active { background: var(--hover); color: var(--text); font-weight: 700; box-shadow: inset 3px 0 0 var(--ink); }
.nav .count { margin-left: auto; font-size: 13px; color: var(--text-3); }
.side-label { font-size: 13px; color: var(--text-3); padding: 14px 8px 4px; font-weight: 500; }
.side-foot { margin-top: auto; padding: 8px; }
.switch-row { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg); color: var(--text); font-size: 13px; }
.switch-row small { display: block; color: var(--text-3); font-size: 13px; }
.toggle { margin-left: auto; width: 32px; height: 20px; border-radius: 10px; background: var(--line-3); position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle.on { background: var(--ink); }
.toggle.on::after { left: 14px; }
/* bug hunt round 1, bug 10: on a phone the switch was a 32 x 20 tap target.
   It is now a 44 x 44 box with the same 32 x 20 track drawn inside it. */
@media (max-width: 900px), (pointer: coarse) {
  .menu[data-menu] .mi { height: 44px; }
  /* bug hunt round 4, bug 10: the Ask panel's Send is 44 x 44 on a phone */
  .composer .send { width: 44px; height: 44px; }
  .toggle, .toggle.on { width: 44px; height: 44px; border-radius: 0; background: none; cursor: pointer; }
  .toggle::before { content: ""; position: absolute; left: 6px; top: 12px; width: 32px; height: 20px; border-radius: 10px; background: var(--line-3); }
  .toggle.on::before { background: var(--ink); }
  .toggle::after { left: 8px; top: 14px; }
  .toggle.on::after { left: 20px; }
}
.switch-row { font-size: 14px; }

/* ---------- main page (Notion page layout) ---------- */
#main { flex: 1; min-width: 0; overflow: auto; position: relative; scrollbar-width: none; }
#main::-webkit-scrollbar { display: none; }
.topbar { position: sticky; top: 0; z-index: 3; height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 16px; background: var(--bg); font-size: 15px; color: var(--text-2); }
.topbar .crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.topbar .crumbs > span { white-space: nowrap; }
.topbar .right { flex: none; }
.topbar .crumbs span { padding: 2px 6px; border-radius: 4px; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.tb-btn { height: 32px; padding: 0 8px; border-radius: var(--r1); display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.tb-btn:hover, .tb-btn.hover { background: var(--hover); }
.tb-btn:disabled { opacity: .45; cursor: default; background: none; }
/* the menu button and its backdrop: a phone only (see the 900px block) */
.nav-btn { display: none; margin-left: -4px; }
.nav-backdrop { display: none; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .34); }
/* no empty sides: the page fills the space the sidebar leaves it */
/* finding 38: no page cap; every page reaches the width the sidebar leaves */
.page { max-width: none; margin: 0; padding: 48px var(--pad) 96px; }
.page.wide { max-width: none; padding: 40px var(--pad) 96px; }
/* Bug hunt round 1: at 1920 wide the 1080 px column covered about 81% of the
   window (FRONTEND-SPEC.md 3 asks 85%). The check only passed while the dead
   "Share" and "..." buttons (bug 9) sat at the right edge. From 1760 px on the
   column grows; below that nothing changes. */
@media (min-width: 1760px) { .live-wrap > div:last-child { flex: 1 1 auto; max-width: 1040px; } }
.page a[href]:not(.btn):not(.link-row):not(.nav):not(.tb-btn):not(.row-link) { color: var(--accent-ink); font-weight: 600; text-decoration: underline 2px var(--ink); text-underline-offset: 4px; }
.page a[href]:not(.btn):not(.link-row):not(.nav):not(.tb-btn):not(.row-link):hover { text-decoration-color: var(--accent); }
.page-icon { width: 64px; height: 64px; margin-bottom: 10px; }
.page h1 { font-size: 34px; line-height: 1.1; font-weight: 800; font-stretch: 112.5%; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); }
.page .lede { color: var(--text-2); font-size: 15px; margin: 0 0 24px; }
h2.block { font-size: 21px; font-weight: 800; font-stretch: 112.5%; margin: 32px 0 8px; letter-spacing: -0.015em; }
h3.block { font-size: 15px; font-weight: 700; margin: 24px 0 8px; }
.muted { color: var(--text-3); }
.divider { height: 1px; background: var(--line); margin: 20px 0; }

.todo { display: flex; align-items: flex-start; gap: 12px; padding: 4px 2px; font-size: 15px; }
/* bug hunt round 3, "Maybe" 5: no square that looks like a checkbox; a job is
   a button that opens its side peek, and a finished one keeps a plain tick */
.todo { cursor: pointer; border-radius: var(--r1); }
.todo:not(.done):hover .t { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.todo:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.todo .tick { width: 16px; height: 16px; margin-top: 4px; flex: none; display: grid; place-items: center; color: var(--text-3); }
.todo.done .t { color: var(--text-3); text-decoration: line-through; }
.todo small { display: block; color: var(--text-3); font-size: 14px; }

/* finding 36 (28 Sep 2026): the week's figures are plain rows (a word, then
   its number, a rule between), not three identical cards */
.stats { margin: 0; max-width: 560px; border-top: 1px solid var(--line); }
.stats .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.stats dt { font-size: 15px; color: var(--text-2); }
.stats dd { margin: 0; font-size: 24px; font-weight: 800; font-stretch: 112.5%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.link-row { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 4px; font-size: 15px; }
.link-row:hover, .link-row.hover { background: var(--hover); }
.link-row u { text-decoration: none; border-bottom: 2px solid var(--ink); font-weight: 600; }

/* properties (page header like a Notion database page) */
.props { display: grid; grid-template-columns: 160px minmax(0, 1fr); row-gap: 2px; font-size: 15px; margin: 8px 0 24px; }
.props dt { color: var(--text-3); display: flex; align-items: center; gap: 8px; height: 32px; }
.props dd { margin: 0; display: flex; align-items: center; min-height: 32px; padding: 0 6px; border-radius: 4px; min-width: 0; overflow-wrap: anywhere; }

/* chips — greyscale, shape carries the meaning */
/* finding 37: a label is ink on white with an ink edge; yellow is never behind small text */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 2px; border: 1px solid var(--ink); background: var(--bg); color: var(--text); font-size: 13px; white-space: nowrap; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); display: block; }
.chip.solid { background: var(--ink); color: var(--on-ink); }
.chip.solid i { background: var(--on-ink); }
.chip.ring i { background: transparent; border: 1.5px solid var(--ink); }
/* finding 36: no gradient; a callback is a solid square (a booking is a solid dot, a free one a ring) */
.chip.half i { background: var(--ink); border-radius: 1px; }
.chip.dash { background: transparent; border: 1px dashed var(--line-2); color: var(--text-2); }
.chip.warn { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--line-3); background: var(--bg); font-size: 13px; color: var(--text-2); }

/* ---------- database table ---------- */
/* finding 39: the filters stay pinned under the page's own bar (48 px) while the list scrolls */
.views { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 0; position: sticky; top: 48px; z-index: 2; background: var(--bg); }
.views button { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
/* Bug hunt round 2, bug 12: it was full canary behind 15 px text, and yellow
   is never behind small text (FRONTEND-SPEC.md 3). The picked view is now
   marked with an ink underline and ink words. */
.views button.on { color: var(--ink); background: none; border-bottom-color: var(--ink); font-weight: 700; }
.db { width: 100%; border-collapse: collapse; font-size: 15px; }
.db th { text-align: left; font-weight: 400; color: var(--text-3); height: 40px; padding: 0 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.db th .ic { margin-right: 6px; vertical-align: -3px; color: var(--text-3); }
.db td { height: 40px; padding: 0 8px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.db tr.row:hover td, .db tr.row.hover td { background: var(--hover); }
.db td.title { font-weight: 600; }
/* bug hunt round 2, bug 5: the caller's name is the row's link, for a keyboard */
.db a.row-link { color: inherit; }
.db a.row-link:focus-visible { outline-offset: -3px; }
.db tr.row:focus-within td { background: var(--hover); }
.db td .sub { color: var(--text-3); }
.db-new { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 8px; color: var(--text-3); font-size: 15px; }

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; row-gap: 10px; }
.cal-head > *, .cal-head .legend span, .cal-head .btn { white-space: nowrap; }
@container (max-width: 900px) { .legend { display: none; } }
#main { container-type: inline-size; }
.cal-head h1 { margin: 0; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; background: var(--bg); }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.status-pill.free i { background: transparent; border: 1.5px solid var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r1); overflow: hidden; }
.seg button { height: 32px; padding: 0 12px; font-size: 14px; color: var(--text-2); }
/* bug hunt round 2, bug 12: ink fill and white words, not canary behind 14 px text */
.seg button.on { background: var(--ink); color: var(--on-ink); font-weight: 700; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--text-2); align-items: center; }
.legend b { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.legend .l-robot { background: var(--ink); }
.legend .l-own { border: 1.5px solid var(--text-2); }

.week { display: grid; grid-template-columns: 56px repeat(var(--days, 7), minmax(0, 1fr)); border-top: 1px solid var(--line); position: relative; }
.week .dh { height: 56px; border-bottom: 1px solid var(--line); padding: 8px; font-size: 13px; color: var(--text-3); min-width: 0; }
.week .dh b { display: block; font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; }
.week .dh.today b { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border-radius: 16px; background: var(--ink); color: var(--on-ink); padding: 0 6px; }
.week .hours { position: relative; }
.week .hour { height: var(--hh, 48px); font-size: 11px; color: var(--text-3); text-align: right; padding-right: 8px; transform: translateY(-7px); }
.week .col { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.week .col .slot { height: var(--hh, 48px); border-bottom: 1px solid var(--line); }
.job { position: absolute; left: 4px; right: 4px; border-radius: 6px; padding: 5px 8px; font-size: 12px; line-height: 1.3; overflow: hidden; cursor: pointer; background: var(--bg); border: 1.5px solid var(--line-3); color: var(--text); }
/* bug hunt round 2, bug 13: a job's words wrap and are never cut with "…";
   views.js fitJob() hides the parts a block has no room for */
.job b { display: block; font-weight: 600; font-size: 12.5px; overflow-wrap: break-word; }
.job b .cust { font-size: inherit; font-weight: inherit; }
.job .meta { display: block; color: var(--text-2); overflow-wrap: break-word; }
.job.robot { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.job.robot .meta { color: var(--on-ink); opacity: .7; }
.job.robot .by { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11px; color: var(--on-ink); opacity: .8; }
.job.robot .by img { width: 13px; height: 13px; border-radius: 50%; background: #fff; padding: 1px; }
.job.cancel { opacity: .35; text-decoration: line-through; }
.job.hover, .job:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
/* the "now" line is a live marker, so it carries the accent (spec 3.1) */
/* the "now" line is a live marker: an ink line with the canary dot */
.now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px solid var(--ink); z-index: 2; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px var(--ink); }

.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.month .dow { font-size: 13px; color: var(--text-3); padding: 6px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.month .cell { min-height: 120px; min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.month .cell .n { font-size: 13px; color: var(--text-2); margin-bottom: 2px; }
/* bug hunt round 3, bug 13 and "Maybe" 6: a day with jobs opens that day */
.month .cell.has-jobs { cursor: pointer; }
.month .cell.has-jobs:hover .n { text-decoration: underline; text-underline-offset: 3px; }
.month .cell.has-jobs:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.month .cell.out .n { color: var(--text-3); opacity: .5; }
.month .cell.today .n { font-weight: 700; color: var(--text); }
.mjob { font-size: 11px; line-height: 16px; min-height: 18px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line-3); overflow-wrap: break-word; }
/* bug hunt round 2, bug 13: a month too narrow for titles shows a dot a job */
.month.counts .cell { min-height: 64px; }
.mdots { display: flex; flex-wrap: wrap; gap: 3px; }
.mdots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); display: block; }
.mdots i.robot { background: var(--ink); }
/* the week as a list of days, on a window too narrow for the grid */
.agenda { border-top: 1px solid var(--line); }
.aday { padding: 12px 0; border-bottom: 1px solid var(--line); }
.aday h2 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.aday.today h2::after { content: " · today"; font-weight: 400; color: var(--text-3); }
.aday .muted { margin: 0; font-size: 14px; }
.ajob { display: block; border: 1.5px solid var(--line-3); border-radius: 6px; padding: 8px 10px; margin-top: 6px; font-size: 14px; cursor: pointer; overflow-wrap: break-word; }
.ajob b { display: block; font-weight: 600; }
.ajob span, .ajob small { display: block; color: var(--text-2); font-size: 13px; }
.ajob.robot { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ajob.robot span, .ajob.robot small { color: var(--on-ink); opacity: .8; }
.ajob.cancel { opacity: .35; text-decoration: line-through; }
.mjob.robot { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* side peek (the call behind a booking) */
.peek { position: absolute; top: 0; right: 0; bottom: 0; width: 520px; background: var(--bg); border-left: 1px solid var(--line); box-shadow: none; z-index: 6; overflow: auto; }
.peek .page { padding: 24px 40px 80px; max-width: none; }
.peek h1 { font-size: 24px; }

/* ---------- call page pieces ---------- */
.story { list-style: none; margin: 0; padding: 0; }
.story li { position: relative; padding: 3px 0 3px 18px; font-size: 15px; }
.story li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.story li.now { color: var(--text-3); }
.story li.now::before { background: var(--text-3); }
.transcript { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 16px; font-size: 15px; }
.transcript .who { color: var(--text-3); font-size: 13px; padding-top: 2px; }
.transcript .who.robot { color: var(--text); font-weight: 600; }
.recording { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: var(--r2); padding: 8px 12px; }
.wave { flex: 1; height: 28px; display: flex; align-items: center; gap: 2px; }
.wave i { flex: 1; background: var(--line-3); border-radius: 1px; display: block; }
.wave i.on { background: var(--ink); }
.rev { font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rev s { color: var(--text-3); }
.callout { display: flex; gap: 12px; padding: 16px; background: var(--soft); border: 1px solid var(--line-3); border-radius: var(--r2); font-size: 15px; }

/* ---------- robot mark ---------- */
/* the mark holds a dark-ink logo, so its disc stays white in both themes */
.mark-robot { position: relative; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-1); }
.mark-robot img { width: 72%; height: 72%; object-fit: contain; display: block; }
.mark-robot.lg { box-shadow: var(--shadow-1); }
.bubble { display: inline-block; padding: 8px 16px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: 15px; font-weight: 500; white-space: normal; overflow-wrap: anywhere; min-width: 0; flex: 0 1 auto; }

/* ---------- robot panel (ask the robot) ---------- */
#panel { width: 420px; flex: none; border-left: 1px solid var(--line); display: flex; flex-direction: column; background: var(--bg); position: relative; }
.panel-top { height: 48px; display: flex; align-items: center; gap: 4px; padding: 0 8px; color: var(--text-2); font-size: 15px; }
.panel-top .title { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; }
.panel-top .right { margin-left: auto; display: flex; gap: 2px; }
.panel-body { flex: 1; overflow: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; }
.panel-body::-webkit-scrollbar { display: none; }
.hello { margin-top: auto; padding-bottom: 6px; }
.hello h2 { font-size: 20px; font-weight: 600; margin: 12px 0 8px; letter-spacing: var(--track); }
.sugg { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 6px; margin: 0 -6px; border-radius: var(--r1); font-size: 15px; color: var(--text); }
.sugg:hover, .sugg.hover { background: var(--hover); }
/* finding 36: plain call lines, each with its speaker's word, not bubbles */
.msg-me, .msg-robot { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 12px; align-items: start; font-size: 15px; }
.msg-me::before, .msg-robot::before { font-size: 13px; color: var(--text-3); padding-top: 2px; }
.msg-me::before { content: "You"; }
.msg-robot::before { content: "Robot"; color: var(--text); font-weight: 600; }
.msg-robot .txt { flex: 1; min-width: 0; }
.msg-robot p { margin: 0 0 6px; }
.steps { font-size: 14px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.steps .st { display: flex; align-items: center; gap: 8px; }
.steps .st .ic { width: 14px; height: 14px; }
.shimmer { font-weight: 500; color: var(--text); }
.card { border: 1px solid var(--line); border-radius: var(--r2); padding: 12px 16px; background: var(--bg); font-size: 15px; }
.card h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card .row { display: flex; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.card .row:first-of-type { border-top: 0; }
.card .row .t { width: 64px; color: var(--text-3); flex: none; }

.composer { margin: 0 16px 16px; border: 1px solid var(--line-3); border-radius: var(--r3); background: var(--bg); box-shadow: var(--shadow-1); padding: 8px 12px; }
.composer.focused { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink); }
.composer .ctx { display: flex; gap: 6px; margin-bottom: 4px; }
.composer .ctx .tag { gap: 5px; background: transparent; border: 1px solid var(--line); height: 22px; }
.composer .bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--text-2); font-size: 14px; }
.send { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--line-2); display: grid; place-items: center; }
.send .ic { color: var(--bg); }
.send.ready { background: var(--ink); }
.send.ready .ic { color: var(--on-ink); }
/* bug hunt round 4, "Maybe" 8: only a colour moves on hover (FRONTEND-SPEC 6),
   never a size: a canary ring inside the ink, as "Take the call" does */
.send.hover, .send.ready:hover { box-shadow: inset 0 0 0 2px var(--accent); }

/* the text boxes (bug hunt round 3, bug 12): the real box, shown, filling its
   frame; the frame carries the border and the focus ring */
.boxed input, .boxed textarea { display: block; width: 100%; border: 0; outline: 0; margin: 0; padding: 0; background: transparent; color: var(--text); caret-color: var(--ink); font: inherit; line-height: 1.5; resize: none; }
.boxed input::placeholder, .boxed textarea::placeholder { color: var(--text-3); opacity: 1; }
.composer .boxed { font-size: 15px; line-height: 1.5; min-height: 48px; padding: 2px; }
.composer .boxed textarea { min-height: 44px; }
.composer:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink); }

/* fields (setup page) */
.field-label { font-size: 13px; color: var(--text-3); margin: 0 0 4px; }
.field { border: 1px solid var(--line-3); border-radius: var(--r1); padding: 6px 12px; font-size: 15px; min-height: 36px; background: var(--bg); }
/* bug hunt round 1, "Maybe" 4: the focus ring is ink, not canary (canary on white is about 1.2:1) */
.field.focused, .field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink); }
/* [data-menu]: the profile pop-up. The site's top bar has a .menu button */
.menu[data-menu] { position: absolute; z-index: 20; min-width: 240px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r2); box-shadow: var(--shadow-1); padding: 8px; font-size: 15px; }
.menu[data-menu] .mi { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: var(--r1); width: 100%; text-align: left; }
.menu[data-menu] .mi:hover, .menu[data-menu] .mi.hover { background: var(--hover); }
.menu[data-menu] .mi .ck { margin-left: auto; }
.menu[data-menu] .sep { height: 1px; background: var(--line); margin: 6px -6px; }
.menu[data-menu] .lab { font-size: 13px; color: var(--text-3); padding: 4px 8px; }
/* Astra pages review, findings 11 and 12: what the demo does not use is shown, dimmed, with one line */
.menu[data-menu] .mi[aria-disabled="true"] { color: var(--text-3); cursor: default; }
.menu[data-menu] .mi[aria-disabled="true"]:hover { background: transparent; }
.menu[data-menu] .demo-note { margin: 4px 8px 2px; }
.demo-note { font-size: 13px; color: var(--text-3); margin: -4px 0 10px; }
.toggle:disabled, .seg button:disabled { cursor: default; }
.rule:not(.soon) .toggle:disabled { opacity: .6; }
.seg button:disabled:not(.on) { color: var(--text-3); }
.feed-note { display: block; margin-top: 6px; font-size: 13px; color: var(--text-3); }
/* finding 32: said to a screen reader, not drawn */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* finding 27: "Called" and "Booked for" before a call's two dates, on a phone only */
.cell-lab { display: none; }
.rules { border: 1px solid var(--line); border-radius: var(--r2); }
.rule { display: flex; align-items: center; gap: 16px; padding: 16px; border-top: 1px solid var(--line); font-size: 15px; }
.rule:first-child { border-top: 0; }
.rule small { display: block; color: var(--text-3); font-size: 14px; }
/* spec 7: a switch for something the product does not do yet */
.rule.soon { color: var(--text-3); }
.rule .soon-tag { height: 20px; margin-left: 8px; font-size: 12px; text-transform: none; }
.rule.soon .toggle { opacity: .45; cursor: default; }

/* ---------- live call screen (the owner's phone) ---------- */
.phone { width: 390px; height: 800px; border-radius: 48px; border: 1px solid var(--line-2); background: var(--bg); box-shadow: var(--shadow-1); padding: 16px 24px 24px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color 150ms linear; }
/* finding 35: the phone no longer flashes its border when a line lands (not
   on the allowed motion list); the line arriving is the movement */
.phone .sb { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; padding: 4px 16px 16px; }
.phone .island { position: absolute; left: 50%; top: 14px; width: 110px; height: 32px; border-radius: 16px; background: var(--ink); transform: translateX(-50%); }
.lc-top { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin-top: 8px; }
/* spec 3.1: the live dot is the accent */
.lc-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px var(--ink); }
.lc-top .tm { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 500; }
.lc-who { margin-top: 24px; }
.lc-who .nm { font-size: 30px; font-weight: 800; font-stretch: 112.5%; letter-spacing: -0.02em; line-height: 1.1; }
.lc-who .meta { color: var(--text-2); font-size: 15px; margin-top: 4px; }
.lc-who .tag { margin-top: 10px; }
.lc-why { margin-top: 24px; font-size: 13px; color: var(--text-3); }
.lc-why b { display: block; font-size: 24px; line-height: 1.2; color: var(--text); font-weight: 700; letter-spacing: var(--track); margin-top: 4px; }
.lc-story { margin-top: 24px; }
.lc-story .story li { font-size: 15px; }
.lc-btns { margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.take { height: 56px; border-radius: 4px; background: var(--ink); color: var(--on-ink); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: inset 0 0 0 0 var(--accent); transition: box-shadow .18s ease; }
.take:hover { box-shadow: inset 0 -5px 0 0 var(--accent); }
.take .ic { color: var(--on-ink); }
.take.hover { box-shadow: inset 0 -5px 0 0 var(--accent); }
.letfinish { height: 44px; color: var(--text-2); font-size: 15px; }
/* spec 5.4: the quiet button is on the card for the whole call, and is only
   clickable once the owner has taken it (spec 5.5). */
.letfinish[disabled] { color: var(--text-3); cursor: default; }
.live-wrap { display: flex; gap: 56px; align-items: flex-start; justify-content: center; padding: 40px 40px 80px; }
.live-wrap > div { min-width: 0; }
.live-h1 { font-size: 24px; margin: 0 0 20px; }

/* ---------- the owner's phone card, spec 5.4 ---------- */
/* Only the Try a call page's card has these; the front page and #/live draw
   the running story list they always drew. */
.phone-card .lc-why { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.phone-card .lc-why b { flex-basis: 100%; }
.why-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; border-radius: 2px; padding: 2px 8px; background: var(--bg); border: 1px solid var(--ink); color: var(--ink); }
/* bug hunt round 3, bug 11: yellow is never behind small text (FRONTEND-SPEC
   3); an emergency is marked the way a picked Day/Week/Month is, ink with
   white words */
.why-tag[data-urgency="emergency"] { background: var(--ink); color: var(--on-ink); }
.story li.slot { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; padding: 3px 0; }
.story li.slot::before { display: none; }   /* a slot is a row, not a bullet */
.story li.slot .k { color: var(--text-3); font-size: 13px; flex: none; }
.story li.slot b { font-weight: 400; color: var(--text-3); text-align: right; min-width: 0; }
.story li.slot.filled b { font-weight: 600; color: var(--text); }
.lc-booked { margin-top: 16px; display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.lc-booked .t { color: var(--text-3); font-size: 13px; }
.lc-booked b { font-weight: 600; }
.lc-whisper { margin-top: 12px; font-size: 13px; color: var(--text-3); }
.lc-owner { margin-top: 12px; }
.lc-owner .lab { font-size: 13px; color: var(--text-3); margin-bottom: 4px; }
.lc-owner .row { display: flex; gap: 8px; }
.lc-owner .field { flex: 1; min-width: 0; }
.lc-owner .field input { width: 100%; border: 0; outline: 0; background: transparent; }

/* ---------- try-a-call page ---------- */
.try { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 48px; align-items: start; }
.try-main { min-width: 0; }
.try-phone { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.phone-label { font-size: 14px; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; }
.phone-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px var(--ink); }
.trade-pick { border: 1px solid var(--line-3); border-radius: var(--r1); background: var(--bg); font-size: 14px; font-weight: 500; padding: 2px 6px; max-width: 100%; }
.trade-pick:hover { background: var(--hover); }
.call-now-line { font-size: 15px; margin: 0 0 12px; }
.call-now-line a { color: var(--accent-ink); font-weight: 700; text-decoration: underline 2px var(--ink); text-underline-offset: 4px; }
.resting { font-size: 13px; color: var(--text-3); margin: 0 0 16px; }
.above-box { font-size: 15px; margin: 24px 0 8px; }
.under-box { font-size: 13px; margin: 8px 0 0; }
/* No reserved height: spec 5.1 puts the short curved arrow directly under the
   last line of the call, so the log ends where the call has got to. */
.chatlog { display: flex; flex-direction: column; gap: 12px; }
/* finding 36 and 37: plain call lines, the speaker's word first, as the Live
   call page's transcript; no bubbles, nothing yellow behind the words */
.line-caller, .line-robot, .line-you { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 0 12px; align-items: start; font-size: 15px; }
.line-caller::before, .line-robot::before, .line-you .who { font-size: 13px; color: var(--text-3); padding-top: 2px; }
.line-caller::before { content: "Caller"; }
.line-robot::before { content: "Robot"; color: var(--text); font-weight: 600; }
.line-you .who { display: block; margin: 0; }
.try-arrow { color: var(--text-3); display: flex; justify-content: flex-end; padding-right: 24px; margin-top: 4px; }
.confirmation { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; max-width: 420px; }
.confirmation .heard { background: var(--bg); border: 1px solid var(--ink); border-radius: 4px; padding: 8px 12px; font-size: 15px; }
.try-input { display: flex; gap: 8px; margin-top: 0; }
.try-input .field { flex: 1; }
/* C2's buttons: 4 px corners, ink fill and white words for the main one, the
   canary underline on hover (FRONTEND-SPEC.md 3). The quiet one is white
   with an edge. */
.btn { height: 44px; padding: 0 16px; border-radius: 4px; border: 1px solid var(--line-3); background: var(--bg); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); white-space: nowrap; box-shadow: inset 0 0 0 0 var(--accent); transition: box-shadow .18s ease; }
.btn:hover, .btn.hover { box-shadow: inset 0 -4px 0 0 var(--accent); }
/* finding 38: the main button is the spec's 52 px, the quiet one 44 */
.btn.dark { height: 52px; padding: 0 22px; font-size: 16px; background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.dark .ic { color: var(--on-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chips button { border: 1px solid var(--line-3); border-radius: 4px; padding: 4px 12px; font-size: 14px; color: var(--ink); text-align: left; }
.chips button:hover { background: var(--hover); }
/* finding 32: while the robot answers, the examples and Send wait, and say so */
.chips button:disabled, .try-input .btn:disabled { opacity: .5; cursor: default; }
.chips button:disabled:hover { background: transparent; }
.try-wait { margin: 6px 0 0; font-size: 14px; }
/* spec 3.1: a selected chip carries the accent */
.chips button.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 700; }
.outcome { margin-top: 16px; }



/* spec 3.3: side padding 16px on phones, every section one column under
   720px, and nothing scrolls sideways at 400px */
@media (max-width: 900px) {
  /* --pad is the shared clamp (finding 38); no phone override */
  /* The sidebar slides out of the way, but it is still reachable: the top bar
     grows a menu button that brings it back over the page, with everything on
     it, including the "On a job" switch (spec 7). Nothing animates: spec 3.4
     allows three motions on this site and this is not one of them. */
  #sidebar { display: none; }
  .nav-btn { display: inline-flex; }
  html.nav-open #sidebar { display: flex; position: fixed; top: var(--bar); bottom: 0; left: 0; width: 264px; max-width: 84vw; z-index: 40; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); overflow-y: auto; }
  html.nav-open .nav-backdrop { display: block; }
  #panel { position: absolute; inset: 0; width: auto; z-index: 30; }
  .page { padding: 32px var(--pad) 96px; }
  .page.wide { padding: 24px var(--pad) 96px; }
  .page h1 { font-size: 28px; }
  /* spec 5.1: under 900px the phone sits above the typed call, stuck to the
     top at 40% of the window, so the card stays visible while they type. The
     phone's own chrome goes (there is no room for a pretend status bar) and
     the card scrolls inside it, with the two buttons pinned to the bottom, so
     nothing on it becomes unreachable. */
  /* stretch (phase F3): with the grid's align-items:start the column shrank
     to its content, and the empty phone before a call was half the width */
  .try { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  .try-phone { order: -1; position: sticky; top: 0; z-index: 5; background: var(--bg); padding-bottom: 8px; }
  .try-phone .phone { height: 40vh; min-height: 300px; overflow-y: auto; padding: 16px 20px 0; border-radius: 24px; }
  .try-phone .phone .island, .try-phone .phone .sb { display: none; }
  .try-phone .phone .lc-who { margin-top: 12px; }
  .try-phone .phone .lc-who .nm { font-size: 24px; }
  .try-phone .phone .lc-why { margin-top: 16px; }
  .try-phone .phone .lc-why b { font-size: 20px; }
  .try-phone .phone .lc-story { margin-top: 16px; }
  /* not pinned: a pinned button covers the slots, which are the point of the
     card. The card simply reads top to bottom and the phone scrolls. */
  .try-phone .phone .lc-btns { margin-top: 16px; padding-bottom: 16px; }
  .try-phone .phone .take { height: 44px; font-size: 16px; border-radius: 4px; }
  .try-arrow { display: none; }
  .phone { width: 100%; max-width: 390px; height: 720px; }
  .peek { width: 100%; }
  .live-wrap { flex-direction: column; align-items: center; padding: 24px 16px; gap: 24px; }
  .live-wrap > div { max-width: 100%; }
  /* phase F3: the phone column fills the width (the empty phone was half of it) */
  .live-wrap > div:first-child { width: 100%; max-width: 390px; }
  /* Bug hunt round 5, bug 6: with no call on, the plain line and its button
     come before the empty phone, so a phone shows them first. */
  .live-wrap[data-live-idle] > div:last-child { order: -1; padding-top: 0 !important; width: 100% !important; max-width: 390px; }
  .props { grid-template-columns: 120px minmax(0, 1fr); }
}

/* Bug hunt round 2, bug 1: a phone held sideways (under 500 px tall) had the
   sticky phone above over the title, "Start the call" and the typing box, so a
   tap on Start landed on the phone and the call could not be started. On a
   window that short the call comes first and the phone follows it, not stuck
   and only as tall as its card. */
@media (max-width: 900px) and (max-height: 500px) {
  .try-phone { order: 1; position: static; }
  .try-phone .phone { height: auto; min-height: 0; overflow: visible; }
}

@media (max-width: 720px) {
  :root { --pad: 16px; }
  .page h1 { font-size: 26px; }
  /* the trade drop-down keeps the top left; the rest of the trail does not fit,
     and a crumb that is only words goes altogether (phase 7): squeezed into
     what a phone leaves it, "Alder Ridge Tree Care" came out as the letter "S". */
  .topbar .crumbs > span:not(:first-child), .topbar .crumbs > .crumb-text { display: none; }
  .props { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-bottom: 16px; }
  .props dt { height: 24px; font-size: 13px; }
  .props dd { padding: 0; }
  /* phase F4: each label starts a little below the answer above it */
  .props dd + dt { margin-top: 10px; }
  /* phase F4: the "ring me for" row's two buttons go under its words, which
     were squeezed into a column one or two words wide */
  .rule:has(.seg) { flex-wrap: wrap; }
  .rule:has(.seg) > div:first-of-type { flex: 1 1 calc(100% - 32px); min-width: 0; }
  .rule:has(.seg) > div:last-child { margin-left: 32px !important; }
  .peek .page { padding: 16px var(--pad) 80px; }

  /* the table becomes a list of calls: a phone has no room for six columns */
  .db, .db tbody, .db tr, .db td { display: block; width: 100%; }
  /* finding 27: the headings stay for a screen reader (the table carries its roles), hidden from sight */
  .db thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cell-lab { display: inline; color: var(--text-3); }
  .db tr.row { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .db td { height: auto; padding: 0; border: 0; white-space: normal; max-width: none; overflow: visible; }
  .db td.title { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
  .db tr.row:hover td, .db tr.row.hover td { background: transparent; }

  /* the calendar's controls sit under its title instead of beside it */
  .cal-head > div { flex-wrap: wrap; min-width: 0; margin-left: 0 !important; }
  .legend { display: none; }
  .views { flex-wrap: wrap; }
  .week { grid-template-columns: 36px repeat(var(--days, 7), minmax(0, 1fr)); }
  .week .dh { height: 48px; padding: 6px 2px 0; font-size: 11px; text-align: center; overflow: hidden; }
  .week .dh b { font-size: 15px; }
  .week .dh.today b { min-width: 24px; height: 24px; border-radius: 12px; padding: 0 4px; }
  .week .hour { font-size: 10px; padding-right: 4px; }
  .week .col { overflow: hidden; }
  .job { left: 1px; right: 1px; padding: 3px 4px; font-size: 11px; }
  .month .cell { min-height: 72px; padding: 4px 2px; }
  .cal-head { gap: 8px; }
  .transcript { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .transcript .who { padding-top: 8px; }
}

/* ---------- the site's top bar (FRONTEND-SPEC.md 4.1 item 1 and 4.3) ----------
   The same bar, words and sizes as site.css's, so /app/ has the same obvious
   way home as every other page. site.css cannot be loaded here (its .btn,
   .chip, .field, .job and .menu are different parts from the workspace's), so
   the bar's rules are repeated under header.top, where nothing of the
   workspace's can reach them. Keep the two in step. */
header.top { position: fixed; top: 0; left: 0; right: 0; z-index: 45; box-sizing: border-box; background: #FFFFFF; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: clamp(14px, 3vw, 56px); height: var(--bar); padding: 0 clamp(20px, 4vw, 80px); color: var(--ink); font-size: 17px; line-height: 1.5; }
header.top a { color: inherit; text-decoration: none; }
header.top .mark { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 22px; font-weight: 800; font-stretch: 112.5%; letter-spacing: -.02em; white-space: nowrap; }
header.top .mark img { height: 26px; width: 26px; display: block; }
header.top nav { display: flex; gap: clamp(14px, 2.4vw, 44px); margin-left: auto; font-size: 16px; font-weight: 600; white-space: nowrap; }
header.top nav a { text-decoration: underline 3px transparent; text-underline-offset: 8px; transition: text-decoration-color .18s ease; }
header.top nav a:hover { text-decoration-color: var(--accent); }
header.top .btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border: 0; border-radius: 4px; background: var(--ink); color: #FFFFFF; font-size: 16px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 0 var(--accent); transition: box-shadow .18s ease; }
header.top .btn:hover { box-shadow: inset 0 -5px 0 0 var(--accent); }
header.top .menu { display: none; height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; margin-left: auto; }
@media (max-width: 980px) { header.top nav { font-size: 15px; } }
@media (max-width: 720px) {
  :root { --bar: 64px; }
  header.top { gap: 14px; }
  header.top nav { display: none; }
  header.top.open nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border-bottom: 1px solid var(--line); padding: 0 clamp(20px, 4vw, 80px) 8px; font-size: 16px; }
  header.top.open nav a { display: flex; align-items: center; min-height: 52px; border-top: 1px solid var(--line); }
  header.top.open nav a:first-child { border-top: 0; }
  header.top .menu { display: inline-flex; align-items: center; }
  header.top .btn { padding: 0 16px; font-size: 15px; }
  header.top .mark { font-size: 20px; }
}
@media (max-width: 380px) {
  header.top .mark { font-size: 18px; gap: 7px; }
  header.top .btn { padding: 0 14px; }
}

/* ---------- tap targets on a phone (FRONTEND-SPEC.md 6: at least 44 px) ---------- */
@media (max-width: 720px) {
  .btn, .tb-btn, .nav, .link-row, .sugg, .views button, .seg button, .trade-pick, .letfinish, .take { min-height: 44px; }
  .tb-btn { min-width: 44px; justify-content: center; }
  .btn { height: auto; }
  .chips button { min-height: 44px; }
  /* 46 with the 1 px edge, so the box a thumb lands in is 44 inside it */
  .field { display: flex; align-items: center; min-height: 46px; }
  .field input, .field select { min-height: 44px; width: 100%; border: 0; outline: 0; background: transparent; }
  .page a[href]:not(.btn):not(.link-row):not(.nav):not(.tb-btn) { display: inline-flex; align-items: center; min-height: 44px; }
  .phone .take { min-width: 44px; }
  /* Astra pages review, finding 24: a rule here hid the bar's last two
     buttons (Share and More, long gone), and with them the calendar's
     subscription. It is gone. Finding 26: the Profile choices are 44 px. */
  .menu[data-menu] .mi { height: auto; min-height: 44px; }
}

/* bug hunt round 4, "Maybe" 4: the feed's https address in Settings, to copy */
.feed-copy { display: block; margin-top: 6px; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }

/* finding 40 (28 Sep 2026): the workspace's own small footer, at the end of
   each page's scroll, with Contact and Privacy (app.js keeps it last) */
.app-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 12px var(--pad) 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.app-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline 2px var(--ink); text-underline-offset: 4px; }
.app-foot a:hover { text-decoration-color: var(--accent); }

/* ======================================================================
   Redesign, 30 Sep 2026: the workspace takes the marketing pages' new look
   (site.css): night-blue ink, one electric-blue accent, pale blue for hover
   and picked states (never yellow behind text), Bricolage for headings. The
   rules above keep their names; only the values and a few parts change here.
   ====================================================================== */
@font-face{
  font-family:"Bricolage";
  font-style:normal;
  font-weight:200 800;
  font-stretch:75% 100%;
  font-display:swap;
  src:url(/assets/fonts/Bricolage-latin-var.woff2) format("woff2");
}
:root {
  --bg: #FFFFFF;
  --ink: #0A1633;
  --text: #0A1633;
  --text-2: #55617A;
  --text-3: #55617A;
  --line: #DCE2EE;
  --line-2: #DCE2EE;
  --line-3: #55617A;
  --hover: #E8EDFF;
  --chip: #E8EDFF;
  --soft: #F4F6FB;
  --backdrop: #DCE2EE;
  --accent: #2B59FF;
  --accent-soft: #E8EDFF;
  --accent-ink: #0A1633;
  --on-accent: #FFFFFF;
  --shadow-1: 0 1px 2px rgba(10, 22, 51, .08);
}
.page h1, h2.block, .lc-who .nm, .stats dd { font-family: "Bricolage", var(--font); font-stretch: 92%; font-weight: 700; letter-spacing: -0.03em; }
.nav.active { background: var(--hover); color: #1638C9; box-shadow: inset 3px 0 0 var(--accent); }
.callout { border: 1px solid var(--line); }
.chips button.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.now-line::before, .lc-top i, .phone-label::before { box-shadow: none; }
header.top { background: rgba(244, 246, 251, .96); }
header.top .mark { font-family: "Bricolage", var(--font); font-weight: 700; font-stretch: 100%; letter-spacing: -0.03em; }
header.top nav a:hover { text-decoration-color: var(--accent); }
header.top .btn { background: var(--accent); border-radius: 8px; transition: background-color .25s ease; }
header.top .btn:hover { box-shadow: none; background: #1638C9; }
.take { background: var(--accent); border-radius: 8px; transition: background-color .25s ease; }
.take:hover, .take.hover { box-shadow: none; background: #1638C9; }
.btn:hover, .btn.hover { box-shadow: inset 0 -3px 0 0 var(--accent); }

/* the customer "Sign in" (issue 7, option C): beside the button on a desktop,
   the last row of the Menu on a phone */
header.top .signin { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; white-space: nowrap; color: var(--text-2); }
header.top .signin:hover { color: var(--ink); }
header.top nav .in-menu { display: none; }
@media (max-width: 720px) {
  header.top .signin { display: none; }
  header.top.open nav .in-menu { display: flex; color: var(--text-2); }
}
/* Issue 6 (Adithya's small looks), carried onto the redesign by G4: a phone
   zooms the page in when a form box's text is under 16 px (the receptionist
   settings boxes were 15 px, the trade picker 14 px). On a phone or any touch
   screen every box is 16 px; the desktop look is unchanged. */
@media (max-width: 760px), (pointer: coarse) {
  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) { font-size: 16px; }
}