/* Mel: the one stylesheet every page uses (Dave, Oct 30: "one professional product"). Users are self-employed
   tradespeople, many over 50, often on a phone in a truck with reading glasses: bold and vivid, but clean.
   Rules baked in here: nothing under 15 px; phone numbers and prices never small; every button and tappable row
   56 px tall; cards are surface + 1 px line, no shadows, no gradients; status is always a word plus a dot, never
   color alone; one brand (blue) button per screen; orange is only ever a fill behind dark text, "Mel did this".
   Dark mode follows the phone (prefers-color-scheme) unless <html data-theme="light|dark"> says otherwise (the
   Settings toggle, remembered in localStorage "theme" and applied early by /line.js). */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@700;800&family=Atkinson+Hyperlegible:wght@400;700&display=swap");

:root {
  --canvas: #f6f4ef; --surface: #ffffff; --line: #dcd7cc; --ink: #15181c; --ink-muted: #545a63;
  --brand: #1f4fe0; --on-brand: #ffffff; --brand-soft: #e3eaff;
  --accent: #ff6b1a; --on-accent: #15181c;
  --success: #0f7536; --success-soft: #ddf3e5; --warning: #a85a00; --warning-soft: #fff0d6; --danger: #c8231b; --danger-soft: #fde3e1;
  --scrim: rgba(21, 24, 28, 0.55);
  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --fs-display: 40px; --fs-title: 28px; --fs-heading: 21px; --fs-body-lg: 20px; --fs-body: 18px; --fs-label: 17px; --fs-small: 15px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px;
  --r-input: 8px; --r-card: 14px; --r-pill: 999px;
  --tap: 56px; --tabbar: 72px;
  /* Motion (Nov 5): short and quiet, never flashy. Fast for a press or a chip, base for things appearing, slow for a
     sheet or a new lead sliding in. Every one of them is zero when the phone asks for less motion (see Motion below). */
  --dur-fast: 150ms; --dur: 200ms; --dur-slow: 250ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --skel: color-mix(in srgb, var(--line) 85%, var(--surface)); /* loading placeholders: a flat block, no shimmer gradient */
  color-scheme: light;
  --logo: url(/brand/handycall-logo-light.svg); /* the HandyCall wordmark (brand/); the dark version below */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0f1114; --surface: #1a1d22; --line: #30353d; --ink: #f3f1ec; --ink-muted: #a9afb8;
    --brand: #7c9cff; --on-brand: #0b0d10; --brand-soft: #1e2b57;
    --accent: #ff8a3d; --on-accent: #15181c;
    --success: #45cf7a; --success-soft: #123222; --warning: #f5b23a; --warning-soft: #3a2a0e; --danger: #ff7066; --danger-soft: #3d1714;
    --scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
    --logo: url(/brand/handycall-logo-dark.svg);
  }
}
:root[data-theme="dark"] {
  --canvas: #0f1114; --surface: #1a1d22; --line: #30353d; --ink: #f3f1ec; --ink-muted: #a9afb8;
  --brand: #7c9cff; --on-brand: #0b0d10; --brand-soft: #1e2b57;
  --accent: #ff8a3d; --on-accent: #15181c;
  --success: #45cf7a; --success-soft: #123222; --warning: #f5b23a; --warning-soft: #3a2a0e; --danger: #ff7066; --danger-soft: #3d1714;
  --scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
  --logo: url(/brand/handycall-logo-dark.svg);
}

/* ---------- Motion: the keyframes and the few things that move ----------
   150-250 ms, ease-out, opacity and a few pixels of travel. Cards rise in after a loading placeholder (.rise), a
   new lead slides in at the top (.arrived), a status chip that changed eases to its new color and pops (.changed),
   sheets slide up, a live call breathes. Phones set to reduce motion get none of it: no movement, instant changes. */
@keyframes mel-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mel-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mel-arrive { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes mel-pop { 0% { transform: scale(0.88); } 60% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes mel-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes mel-ring { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes mel-wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.rise { animation: mel-rise var(--dur) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); } /* window.melAppear() in /line.js sets --i */
.arrived { animation: mel-arrive var(--dur-slow) var(--ease-out) both; }
.card.arrived:not([data-status="emergency"]) { border-color: var(--brand); transition: border-color var(--dur-slow) var(--ease-out) 1.2s; } /* a brand outline that holds a moment, then fades */
.card.arrived.settled:not([data-status="emergency"]) { border-color: var(--line); }
.chip { transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.chip.changed { animation: mel-pop var(--dur-slow) var(--ease-out); }
.sheet-back { animation: mel-fade var(--dur) var(--ease-out); }
.sheet-back > .sheet, dialog[open] { animation: mel-sheet var(--dur-slow) var(--ease-out); }
dialog[open]::backdrop { animation: mel-fade var(--dur) var(--ease-out); }
.btn, .link, .menu a, .rows a, .choice, .tile, .carrier, .chips button, .sidebar a, .tabbar a, .tabbar button { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:not(:disabled):active, .choice:active, .tile:active, .carrier:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after, ::backdrop { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .btn:not(:disabled):active, .choice:active, .tile:active, .carrier:active { transform: none; }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-title); }
h2 { font-size: var(--fs-title); }
h3 { font-size: var(--fs-heading); font-weight: 700; }
h4 { font-size: var(--fs-label); font-weight: 700; }
.display { font-size: var(--fs-display); font-family: var(--font-head); font-weight: 800; line-height: 1.05; }
p { margin: 0 0 var(--s2); }
a { color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; }
small, .small { font-size: var(--fs-small); }
.muted { color: var(--ink-muted); }
.label { font-size: var(--fs-label); font-weight: 700; }
.lg { font-size: var(--fs-body-lg); }
strong, b { font-weight: 700; }
button, a, select, label { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (pointer: coarse) { input, select, textarea { font-size: var(--fs-body) !important; } }
img { max-width: 100%; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--s1) var(--s1); text-align: left; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
th { font-size: var(--fs-small); color: var(--ink-muted); font-weight: 700; }
th, td { overflow-wrap: break-word; } /* a table never splits a word across lines ("Jo/bs"); a wide table scrolls in its own box */
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s3) 0; }
code { font: inherit; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---------- App shell: sticky title, one column, bottom tab bar; sidebar on a desktop ---------- */
.shell { min-height: 100dvh; padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px)); }
.topbar { position: sticky; top: 0; z-index: 5; background: var(--canvas); border-bottom: 1px solid var(--line); padding: calc(var(--s1) + env(safe-area-inset-top, 0px)) var(--s2) var(--s1); }
.topbar .row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s2); flex-wrap: wrap; min-height: 48px; }
.topbar h1 small { display: block; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--ink-muted); margin-top: 2px; letter-spacing: 0; }
.content { padding: var(--s2); max-width: 720px; margin: 0 auto; }
.content > * + h3, .content .group + .group { margin-top: var(--s3); }
.group h3 { display: flex; align-items: center; gap: var(--s1); margin: 0 0 var(--s2); }
.group h3 .count { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700; color: var(--ink-muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 10px; min-width: 32px; text-align: center; }
.group h3 .count.hot { color: var(--ink); border-color: var(--ink); }
.group h4 { color: var(--ink-muted); margin: var(--s2) 0 var(--s1); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabbar a, .tabbar button { font: inherit; font-size: var(--fs-small); font-weight: 700; min-height: var(--tabbar); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-muted); text-decoration: none; background: none; border: 0; cursor: pointer; border-top: 3px solid transparent; }
.tabbar a[aria-current="page"], .tabbar button[aria-expanded="true"] { color: var(--brand); border-top-color: var(--brand); }
.tabbar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.sidebar { display: none; }
.sheet-back { position: fixed; inset: 0; z-index: 20; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--surface); color: var(--ink); width: 100%; max-width: 560px; border-radius: var(--r-card) var(--r-card) 0 0; border: 1px solid var(--line); border-bottom: 0; padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--s1); max-height: 88dvh; overflow-y: auto; }
.sheet h3 { margin: var(--s1) 0; }
.sheet h4 { color: var(--ink-muted); margin: var(--s2) 0 0; }
.menu { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.menu a, .menu button { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s2); font: inherit; font-size: var(--fs-body); font-weight: 700; color: var(--ink); text-decoration: none; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-card); cursor: pointer; text-align: left; width: 100%; }
.menu a[aria-current="page"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.menu a::after { content: "›"; color: var(--ink-muted); font-size: var(--fs-heading); }
.menu a span, .menu button span { flex: 1; }
.menu svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-muted); }
.menu a[aria-current="page"] svg { color: var(--brand); }
@media (min-width: 960px) {
  :root { --tabbar: 0px; } /* no bottom bar on a desktop: floating buttons sit at the bottom edge */
  .shell { display: grid; grid-template-columns: 240px 1fr; padding-bottom: 0; }
  .tabbar { display: none; }
  .sidebar { display: block; background: var(--surface); border-right: 1px solid var(--line); }
  .sidebar .stick { display: flex; flex-direction: column; gap: var(--s1); position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: var(--s3) var(--s2); }
  .sidebar .grow { flex: 1; }
  .sidebar button.feedback { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; color: var(--ink-muted); font: inherit; font-weight: 700; font-size: var(--fs-label); background: none; border: 1px solid var(--line); cursor: pointer; width: 100%; text-align: left; }
  .sidebar .brandmark { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 800; font-size: var(--fs-heading); margin: 0 0 var(--s2); color: var(--ink); text-decoration: none; }
  .sidebar .brandmark .brandlogo { height: 40px; }
  .sidebar h4 { color: var(--ink-muted); margin: var(--s2) 0 0; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; }
  .sidebar a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--fs-label); }
  .sidebar a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
  .sidebar svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } /* flex: none keeps a two-line item's icon full size */
  .topbar { padding-left: var(--s4); padding-right: var(--s4); }
  .content { max-width: 1100px; padding: var(--s3) var(--s4) var(--s4); }
  /* Two columns of cards; each card is as tall as what's in it (no empty white box under a short card) */
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s2); align-items: start; }
  .cards > .card, .cards > .section { margin-bottom: 0; }
  .cards:last-child { margin-bottom: 0; }
  /* More room inside a card on a big screen; the same rhythm as the phone otherwise */
  .card, .section { padding: 20px var(--s3); }
  .livecall .lc-band { padding-left: var(--s3); padding-right: var(--s3); }
  .livecall .lc-body { padding: 20px var(--s3); }
  /* A detail page: its sections in two columns, the heading card across the top */
  .twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); align-items: start; }
  .twocol > .section { margin-bottom: 0; }
  .twocol > .back, .twocol > .head, .twocol > .btnrow, .twocol > .foot { grid-column: 1 / -1; }
  .twocol .cards { grid-template-columns: minmax(0, 1fr); } /* cards inside one column of a detail page: one wide card, not two thin ones */
}

/* ---------- Buttons: one brand button per screen, the rest outlined ---------- */
.btn, button.btn, a.btn {
  font: inherit; font-size: var(--fs-body); font-weight: 700; min-height: var(--tap); padding: 12px 20px;
  border-radius: var(--r-card); border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn.brand { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.btn.quiet { border-color: transparent; background: none; color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; padding-left: 4px; padding-right: 4px; }
.btn.quiet.danger { color: var(--danger); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btnrow { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.btnrow.end { justify-content: flex-end; }
.btnrow.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.btnrow.three .btn, .btnrow.two .btn { width: 100%; padding-left: 8px; padding-right: 8px; white-space: normal; text-align: center; line-height: 1.2; } /* equal columns: a long label wraps inside its button, never past its edges */
@media (max-width: 520px) { .btnrow.two.stack-phone { grid-template-columns: 1fr; } } /* two big public buttons stack on a phone */
.btnrow.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); }
.btn.big { min-height: 64px; font-size: var(--fs-body-lg); width: 100%; }
/* A quiet text link that looks like a link, not a button (Lost, Edit name, Show transcript) */
.link { font: inherit; font-size: var(--fs-label); font-weight: 700; background: none; border: 0; padding: 12px 4px; min-height: 44px; color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.link.danger { color: var(--danger); }
.link.muted { color: var(--ink-muted); }

/* ---------- Status chips: a word and a dot, the same everywhere ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.02em; border-radius: var(--r-pill); padding: 4px 12px 4px 10px; border: 1px solid transparent; white-space: nowrap; line-height: 1.2; }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.chip.new { color: var(--brand); background: var(--brand-soft); }
.chip.needs { color: var(--warning); background: var(--warning-soft); }
.chip.booked { color: var(--success); background: var(--success-soft); }
.chip.booked.tentative { color: var(--warning); background: var(--warning-soft); }
.chip.done { color: var(--ink-muted); background: transparent; border-color: var(--line); }
.chip.emergency { color: var(--danger); background: var(--danger-soft); }
.chip.plain { color: var(--ink); background: var(--canvas); border-color: var(--line); }
.chip.plain::before { display: none; }
/* A demo job or customer shown to an owner (is_sample): neutral, a muted dot and a dashed outline, never a stage color */
.chip.sample { color: var(--ink-muted); background: transparent; border: 1px dashed var(--ink-muted); }
.chipset { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
/* "Mel did this": the orange badge, always a fill with dark text, never orange words */
.mel { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 800; font-size: var(--fs-small); letter-spacing: 0.02em; background: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); padding: 3px 10px; line-height: 1.2; flex: none; }
.melline { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; font-size: var(--fs-body); }
.melline .mel { margin-top: 2px; }
.melnote { background: var(--canvas); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--r-input); padding: 12px 14px; margin: 0 0 var(--s2); }
.melnote .mel { margin-bottom: 6px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
/* Flag tags (HOA, weather): an icon and the actual thing ("HOA: approval needed", "Thu: 60% rain"), outlined */
.tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 10px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-input); padding: 6px 10px; min-height: 36px; line-height: 1.2; }
.tag svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-muted); }
.tag.warn { color: var(--warning); border-color: var(--warning); } .tag.warn svg { color: var(--warning); }
.tag.plain { color: var(--ink-muted); font-size: var(--fs-small); min-height: 32px; padding: 4px 10px; }

/* ---------- Cards ---------- */
.card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s2); margin-bottom: var(--s2); color: var(--ink); text-decoration: none; position: relative; }
.card.selected { background: var(--brand-soft); border-color: var(--brand); }
.card .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--s1); margin-bottom: 10px; }
.card .top time, .card .top .when { font-size: var(--fs-label); font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.card .what { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-heading); line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.card .what a { color: inherit; text-decoration: none; }
.card .what a::after { content: ""; position: absolute; inset: 0; } /* the whole card opens the job */
.card .who { font-size: var(--fs-body); margin: 2px 0 0; }
.card .where { color: var(--ink-muted); font-size: var(--fs-body); margin: 4px 0 0; }
.card .where .phone { color: var(--ink); font-weight: 700; }
.card .act { margin-top: var(--s2); position: relative; z-index: 1; }
.card .act .btn { width: 100%; }
/* On a card in a list Mel's note stops after four lines; the job page has all of it */
.card .melline > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.card .thumbs { display: flex; gap: 6px; margin-top: 10px; }
.card .thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-input); border: 1px solid var(--line); }
.card[data-status="emergency"] { border-color: var(--danger); border-width: 2px; }

/* Sections on a detail page */
.section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s2); margin-bottom: var(--s2); overflow-wrap: anywhere; min-width: 0; }
.section > h3 { margin: 0 0 12px; display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.section > h3 .count { font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink-muted); font-weight: 700; }
.section .btnrow { margin-top: 12px; }
.facts { display: grid; grid-template-columns: minmax(96px, max-content) 1fr; gap: 6px var(--s2); margin: 0; font-size: var(--fs-body); }
.facts dt { color: var(--ink-muted); } .facts dd { margin: 0; overflow-wrap: anywhere; }
.fact { display: inline-block; font-size: var(--fs-body-lg); font-weight: 700; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-input); padding: 8px 12px; margin: 0 var(--s1) var(--s1) 0; }
.fact.booked { color: var(--success); border-color: var(--success); }
.fact.tentative { color: var(--warning); border-color: var(--warning); }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--brand); font-weight: 700; text-decoration: none; font-size: var(--fs-label); }
.empty { color: var(--ink-muted); text-align: center; padding: var(--s3) var(--s2); margin: 0; }
.empty.card { text-align: left; border-style: dashed; }
.notice { font-weight: 700; color: var(--success); background: var(--success-soft); border-radius: var(--r-input); padding: 12px 14px; margin: 0 0 var(--s2); }
.notice.warn { color: var(--warning); background: var(--warning-soft); }
.notice.danger { color: var(--danger); background: var(--danger-soft); }
.notice.info { color: var(--ink); background: var(--brand-soft); }
/* The last thing in a card or section sits on the card's own padding (no paragraph margin under it) */
.card > :last-child, .section > :last-child, .melnote > :last-child, .tip > :last-child, .notice > :last-child { margin-bottom: 0; }

/* ---------- Loading placeholders: the page's real layout in flat blocks while the data comes ----------
   Built by <mel-skel kind="today|cards|rows|job|profile|sections|plain|lines|form|flow|report|thread|table|block" n="3"> (defined in /line.js; it
   replaces itself with these blocks, so the page's own grid and twocol rules lay them out like the real thing). The
   blocks breathe slowly; with reduce motion they hold still. */
mel-skel { display: block; min-height: 40vh; }
.skel { display: block; background: var(--skel); border-radius: var(--r-input); height: 18px; margin: 0 0 10px; animation: mel-pulse 1.6s var(--ease-in-out) infinite; }
.skel.sk-h { height: 26px; width: 45%; margin-bottom: var(--s2); }
.skel.sk-h2 { height: 28px; width: 55%; }
.skel.sk-lg { height: 22px; }
.skel.sk-pill { display: inline-block; height: 28px; width: 104px; border-radius: var(--r-pill); margin: 0; }
.skel.sk-btn { height: var(--tap); border-radius: var(--r-card); margin: var(--s2) 0 0; }
.btnrow > .skel.sk-btn { margin: 0; }
.skel.sk-field { height: var(--tap); margin-bottom: var(--s2); }
.skel.sk-tile { height: 88px; border-radius: var(--r-card); margin-bottom: 12px; }
.skel.sk-num { height: 32px; width: 60%; }
.skel.sk-block { height: 52vh; border-radius: var(--r-card); }
.skel.sk-90 { width: 90%; } .skel.sk-75 { width: 75%; } .skel.sk-60 { width: 60%; } .skel.sk-45 { width: 45%; } .skel.sk-30 { width: 30%; } .skel.sk-20 { width: 20%; }
.skel-gap { height: var(--s2); }
.back > .skel { width: 88px; margin: 0; }
.skel-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); margin-bottom: 14px; }
.skel-top .skel.sk-20 { margin: 0; height: 18px; }
.skel-mel { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.skel-mel .skel.sk-pill { width: 48px; height: 24px; flex: none; }
.skel-mel .skel:last-child { flex: 1; margin: 0; }
.rows .skel-row { display: grid; grid-template-columns: 1fr 72px; gap: 8px 12px; align-items: center; min-height: var(--tap); padding: 14px var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.rows .skel-row .skel { margin: 0; }
.rows .skel-row .skel.sk-sub { grid-column: 1 / -1; width: 70%; height: 16px; }
.skel-bubble { height: 52px; width: 70%; border-radius: var(--r-card); margin: 0 0 8px; }
.skel-bubble.out { margin-left: auto; width: 60%; }
.kpis .skel-kpi { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-input); padding: 12px 14px; }
.kpis .skel-kpi .skel:last-child { width: 80%; height: 15px; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- A call happening right now: the highlight at the top of Today (dashboard #livebox) ----------
   Brand outline (a live call is not an emergency, so no red), a band that says it is live with a breathing dot and a
   running clock, who is calling and on which line, the words as they come in (Mel's on the right with her orange edge),
   and Listen in / Take over. On other dashboard views the same card is compact (no transcript). When the call ends the
   card says so, stops moving, and folds away. */
.livecall { background: var(--surface); border: 2px solid var(--brand); border-radius: var(--r-card); margin: 0 0 var(--s3); overflow: hidden; animation: mel-arrive var(--dur-slow) var(--ease-out) both; }
.livecall + .livecall { margin-top: calc(-1 * var(--s1)); }
.lc-band { display: flex; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2); flex-wrap: wrap; background: var(--brand-soft); color: var(--brand); padding: 10px var(--s2); font-weight: 700; font-size: var(--fs-label); }
.lc-onair { display: inline-flex; align-items: center; gap: 12px; }
.lc-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.lc-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: mel-ring 1.8s var(--ease-out) infinite; }
.lc-clock { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-heading); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lc-body { padding: var(--s2); display: grid; gap: var(--s2); }
.lc-who { font-size: var(--fs-title); overflow-wrap: anywhere; }
.lc-sub { color: var(--ink-muted); margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.lc-sub .phone { color: var(--ink); font-weight: 700; }
.lc-sub span + span::before { content: "·"; margin-right: 10px; color: var(--ink-muted); }
.lc-state { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; color: var(--ink-muted); font-weight: 700; font-size: var(--fs-label); }
.lc-wave { display: inline-flex; align-items: center; gap: 3px; height: 20px; color: var(--brand); flex: none; }
.lc-wave i { display: block; width: 4px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: center; animation: mel-wave 1.1s var(--ease-in-out) infinite; }
.lc-wave i:nth-child(2) { animation-delay: -0.3s; } .lc-wave i:nth-child(3) { animation-delay: -0.6s; } .lc-wave i:nth-child(4) { animation-delay: -0.15s; } .lc-wave i:nth-child(5) { animation-delay: -0.45s; }
/* The words so far sit in their own inset box (like a text thread), so a line half scrolled out of view reads as scrolling */
.lc-lines { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; align-content: start; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-input); }
.lc-lines li { max-width: 88%; padding: 10px 14px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.4; overflow-wrap: anywhere; justify-self: start; }
.lc-lines li.mel-said { justify-self: end; background: var(--surface); border-left: 6px solid var(--accent); }
.lc-lines li b { display: block; font-size: var(--fs-small); color: var(--ink-muted); margin-bottom: 2px; }
.lc-lines li.new { animation: mel-rise var(--dur) var(--ease-out) both; }
.lc-lines .lc-wait { max-width: none; justify-self: stretch; background: none; border: 0; color: var(--ink-muted); text-align: center; }
.livecall .btnrow { margin: 0; }
.livecall.ended { border-color: var(--line); }
.livecall.ended .lc-band { background: var(--canvas); color: var(--ink-muted); }
.livecall.ended .lc-dot::after, .livecall.ended .lc-wave { display: none; }
.livecall.ended .lc-clock { color: var(--ink-muted); }
.livecall.gone { animation: mel-fade var(--dur-slow) var(--ease-out) reverse both; }
.compact .lc-lines, .compact .lc-state { display: none; }
@media (min-width: 960px) {
  .lc-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; column-gap: var(--s3); }
  .lc-body > .lc-lines { grid-column: 2; grid-row: 1 / span 2; max-height: 280px; }
  .lc-body > .btnrow { grid-column: 1; align-self: end; } /* the buttons line up with the bottom of the words */
  .compact .lc-body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .compact .lc-body > .btnrow { grid-column: 2; grid-row: 1; min-width: 320px; }
}

/* ---------- Forms ---------- */
input, select, textarea { font: inherit; font-size: var(--fs-body); color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-input); padding: 12px 14px; min-height: var(--tap); width: 100%; }
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; min-height: 0; padding: 0; accent-color: var(--brand); }
textarea { min-height: 112px; line-height: 1.45; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23545a63' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 44px; }
label.field { display: grid; gap: 6px; font-size: var(--fs-label); font-weight: 700; margin: 0 0 var(--s2); }
label.field span { color: var(--ink-muted); font-weight: 400; font-size: var(--fs-small); }
.inline { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
.inline > * { flex: 1 1 160px; }
.inline > .btn { flex: 0 0 auto; }
.check { display: flex; align-items: center; gap: 12px; min-height: var(--tap); font-size: var(--fs-body); }
.check input { flex: none; }

label.toggle, .toggle { display: flex; align-items: center; gap: 12px; min-height: var(--tap); font-size: var(--fs-body); font-weight: 700; cursor: pointer; margin: 0; }
.toggle input { flex: none; width: 26px; height: 26px; }
.btn + .toggle, .btnrow + .toggle { margin-top: var(--s1); } /* a toggle under a button gets a little air */
.toggle span, .toggle small { font-weight: 400; color: var(--ink-muted); font-size: var(--fs-small); display: block; }
.help { color: var(--ink-muted); margin: 0 0 var(--s2); max-width: 62ch; }
.status { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; color: var(--success); }
.status.err { color: var(--danger); }
.status.muted { color: var(--ink-muted); }
/* An empty status line takes no room, so a card doesn't end in a blank strip; the message appears in place */
.status:empty, .section .status:empty, .card .status:empty, .section p.status:empty { min-height: 0; margin-top: 0; margin-bottom: 0; }
.days { display: flex; flex-wrap: wrap; gap: var(--s1); }
.days label { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; font-weight: 700; font-size: var(--fs-label); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-input); cursor: pointer; margin: 0; }
.days label:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
/* Hours that differ by day (Settings' hours, the setup wizard; /hours-editor.js): each open day's name over its from and to */
.dayhours { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); margin: var(--s1) 0 var(--s2); } /* minmax: the rows never grow past the card */
.dayhour > .label { display: block; margin: 0 0 6px; }
.fromto { display: flex; gap: var(--s1); align-items: center; }
.fromto input[type="time"] { flex: 1 1 0; min-width: 0; width: auto; padding-right: 8px; }
.card > h2, .section > h2 { font-size: var(--fs-heading); margin: 0 0 6px; }
.card > h2 + .help, .section > h2 + .help { margin-top: 2px; }
.card .card { margin-bottom: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s1); }
.kpi { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-input); padding: 12px 14px; }
.kpi .num { display: block; font-family: var(--font-head); font-weight: 800; font-size: var(--fs-title); line-height: 1.1; }
.kpi .lbl { display: block; color: var(--ink-muted); font-size: var(--fs-small); font-weight: 700; margin-top: 2px; }
/* Progress bars (texting caps, minutes this month): a track and a fill, labeled in words beside it */
.bar { height: 10px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--success); }
.bar i.hot { background: var(--warning); } .bar i.full { background: var(--danger); }

/* ---------- Big-type flows (call forwarding, turn on texting, phone calendar, Does Mel know your business) ----------
   One question per screen, plain words, nothing small; the same tokens, only bigger. */
.flow { max-width: 600px; margin: 0 auto; }
.flow h1 { font-size: var(--fs-title); margin: 4px 0 12px; }
.flow .lead { font-size: var(--fs-body-lg); color: var(--ink-muted); }
.flow .lead b { white-space: nowrap; color: var(--ink); }
.flow .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: var(--s2); }
.stepof { font-size: var(--fs-label); color: var(--ink-muted); font-weight: 700; }
.flow .top button.back { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.flow .notice { display: flex; gap: 12px; align-items: center; }
.flow .btn.big { margin: 10px 0; }
.code.url { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; }
.choice { display: block; width: 100%; text-align: left; font: inherit; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; margin: 0 0 12px; cursor: pointer; text-decoration: none; }
.choice b { display: block; font-size: var(--fs-heading); font-family: var(--font-head); font-weight: 800; line-height: 1.2; margin-bottom: 4px; }
.choice span { color: var(--ink-muted); font-size: var(--fs-body); }
.choice.rec { border-color: var(--brand); }
.choice .badge { display: inline-block; font-size: var(--fs-small); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--brand-soft); color: var(--brand); border-radius: var(--r-pill); padding: 3px 10px; margin-bottom: 8px; }
.tile { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; margin: 0 0 10px; cursor: pointer; min-height: 64px; text-decoration: none; }
.tile b { font-size: var(--fs-heading); } .tile span { color: var(--ink-muted); font-size: var(--fs-label); white-space: nowrap; }
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: clamp(30px, 9vw, 44px); font-weight: 800; letter-spacing: 0.04em; text-align: center; background: var(--surface); border: 3px dashed var(--brand); border-radius: var(--r-card); padding: 22px 10px; margin: 6px 0 12px; overflow-wrap: anywhere; user-select: all; color: var(--ink); }
.code.small { font-size: clamp(24px, 7vw, 32px); padding: 14px 8px; border-width: 2px; }
.progress { display: flex; align-items: center; gap: 10px; margin: 6px 0 var(--s2); font-weight: 700; font-size: var(--fs-label); }
.progress .pdot { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); flex: none; }
.progress .pdot.on { background: var(--success); border-color: var(--success); }
.progress .pdot.now { border-color: var(--brand); background: var(--brand); }
.progress .pbar { flex: 1; height: 4px; background: var(--line); border-radius: 4px; }
.progress .pbar.on { background: var(--success); }
.numbered { counter-reset: s; list-style: none; padding: 0; margin: 0 0 var(--s2); }
.numbered li { counter-increment: s; position: relative; padding: 6px 0 14px 58px; min-height: 46px; }
.numbered[start="2"] { counter-reset: s 1; }
.numbered li li { counter-increment: none; padding: 2px 0; min-height: 0; } .numbered li li::before { content: none; }
.numbered li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-family: var(--font-head); font-weight: 800; display: grid; place-items: center; font-size: var(--fs-heading); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: var(--s2); }
.carrier { font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 112px; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: var(--r-card); cursor: pointer; padding: 10px; text-align: center; font-size: var(--fs-label); font-weight: 700; }
.carrier .mono { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: var(--fs-heading); letter-spacing: -0.02em; }
.tip { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--warning); border-radius: var(--r-input); padding: 12px 14px; margin: 12px 0; }
details.more { margin: 14px 0; } details.more summary { font-size: var(--fs-body); font-weight: 700; cursor: pointer; padding: 12px 0; min-height: 44px; color: var(--brand); }
details.src { margin-top: 8px; font-size: var(--fs-small); } details.src summary { cursor: pointer; color: var(--ink-muted); font-weight: 700; padding: 8px 0; }
details.src a { overflow-wrap: anywhere; }
.extra { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.yesno { display: flex; gap: 10px; margin-top: 10px; } .yesno .btn { flex: 1; }
.yesno .btn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
@media (max-width: 360px) { .grid2 { grid-template-columns: 1fr; } }
@media print { body { background: #fff; color: #000; } .back, .btn, .tabbar, .sidebar, .topbar, .noprint, #mel-fb { display: none !important; } .code { border-color: #000; } }

/* ---------- Lists of tappable rows ---------- */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.rows a, .rows .row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; min-height: var(--tap); padding: 12px var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); text-decoration: none; }
.rows b { font-size: var(--fs-body); } .rows time, .rows .meta { color: var(--ink-muted); font-size: var(--fs-small); }
.rows .sub { grid-column: 1 / -1; color: var(--ink-muted); font-size: var(--fs-body); }
.rows .sub .phone { color: var(--ink); font-weight: 700; }
.rows .tags { grid-column: 1 / -1; margin-top: 6px; }
.rows a.hot { border-color: var(--brand); }

/* ---------- Dialogs (native <dialog>): a bottom sheet on a phone, same as .sheet; centered on a desktop ----------
   The dialog's <form> carries the padding (admin and Businesses used to repeat this in their own pages). */
dialog { border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--surface); color: var(--ink); padding: 0; width: 100%; max-width: 560px; margin: auto auto 0; font: inherit; max-height: 88dvh; }
dialog > form { padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom, 0px)); }
dialog > form > h2, dialog > form > h3 { margin: var(--s1) 0 var(--s2); }
dialog .btnrow.two { margin-top: var(--s2); }
dialog::backdrop { background: var(--scrim); }
@media (min-width: 960px) { dialog { margin: auto; border-bottom: 1px solid var(--line); border-radius: var(--r-card); } dialog > form { padding: var(--s3); } }

/* ---------- Full-screen photo viewer ---------- */
.viewer { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.94); z-index: 30; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer button { position: absolute; font: inherit; font-size: var(--fs-heading); font-weight: 700; min-width: var(--tap); min-height: var(--tap); border-radius: var(--r-pill); border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.5); color: #fff; cursor: pointer; padding: 0 14px; }
.viewer .close { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
.viewer .prev { left: 8px; } .viewer .next { right: 8px; }
.viewer .count { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); color: #fff; font-size: var(--fs-small); }

/* ---------- Page-wide helpers ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s1); }
.gallery figure { margin: 0; display: grid; gap: 4px; }
.gallery button { padding: 0; border: 1px solid var(--line); border-radius: var(--r-input); background: none; cursor: pointer; overflow: hidden; aspect-ratio: 1; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery figcaption { font-size: var(--fs-small); color: var(--ink-muted); line-height: 1.3; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { border-top: 1px solid var(--line); padding: 12px 0; }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline .etop { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; color: var(--ink-muted); font-size: var(--fs-small); }
.timeline .ekind { color: var(--ink); font-weight: 700; font-size: var(--fs-body); }
.timeline p { margin: 4px 0 0; }
.bubbles { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.bubbles li { max-width: 86%; padding: 10px 14px; border-radius: var(--r-card); background: var(--canvas); border: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.4; overflow-wrap: anywhere; }
.bubbles li.out { margin-left: auto; background: var(--brand-soft); border-color: var(--brand-soft); }
.bubbles li.from-mel { background: var(--surface); border-left: 6px solid var(--accent); }
.bubbles time { display: block; color: var(--ink-muted); font-size: var(--fs-small); margin-top: 4px; }
audio { width: 100%; max-width: 440px; margin-top: 6px; }

/* The HandyCall logo (brand/handycall-logo-light.svg, dark version in dark mode): the mark and the wordmark in one picture */
.brandlogo { display: inline-block; height: 40px; aspect-ratio: 1895 / 525; background: var(--logo) no-repeat center / contain; vertical-align: middle; }
.brandlogo.lg { height: 52px; }

/* ===== Calendar: day / week / list (Nov 6) ===== */
/* The words wrap as plain text; Change (a full-size tap target) sits after them, or on its own line on a phone */
.cv-hours-line { margin: var(--s1) 0 0; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s1); }
/* public/calendar.js draws the dashboard's Calendar: Day and Week time grids, the List, and their sheets (edit a visit,
   Add appointment, Add job, Block off time, Let the customer know). Layout only, on the tokens above; the one blue
   button is "Add appointment" (or the sheet's own action). The drag lift is short and turns off for reduced motion. */
.cv-top { display: grid; gap: var(--s1); margin-bottom: var(--s1); }
.cv-title { font-size: var(--fs-heading); }
.cv-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.cv-nav .btn { width: 100%; padding-left: 8px; padding-right: 8px; }
.cv-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.cv-modes button { font: inherit; font-size: var(--fs-body); font-weight: 700; min-height: calc(var(--tap) - 4px); border: 0; background: none; color: var(--ink); cursor: pointer; }
.cv-modes button + button { border-left: 2px solid var(--line); }
.cv-modes button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); }
.cv-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); margin: var(--s2) 0 var(--s1); }
.cv-actions .btn { width: 100%; padding-left: 8px; padding-right: 8px; }
.cv-actions .btn.brand, .cv-actions .btn:only-child { grid-column: 1 / -1; }
.cv-tip { color: var(--ink-muted); font-size: var(--fs-small); margin: 0 0 var(--s1); }
.cv-tip .link { font-size: var(--fs-small); padding-top: 0; padding-bottom: 0; vertical-align: middle; }
.cv-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s1); }
.cv-notice .link { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
@media (min-width: 760px) {
  .cv-top { grid-template-columns: 1fr auto; align-items: center; }
  .cv-nav { grid-template-columns: repeat(3, auto); }
  .cv-modes { max-width: 420px; }
  .cv-actions { display: flex; flex-wrap: wrap; }
  .cv-actions .btn { width: auto; padding-left: 20px; padding-right: 20px; }
}
/* A wide screen: the title, Day / Week / List, and Earlier / Today / Later on one line, so the grid starts higher */
@media (min-width: 1240px) {
  .cv-top { grid-template-columns: 1fr auto auto; gap: var(--s2); }
  .cv-modes { width: 330px; }
  .cv-nav { order: 2; }
}
/* The time grid: an hours column, then one column per day; a week scrolls sideways on a phone */
.cv-wrap { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cv-grid { display: grid; grid-template-columns: 64px repeat(var(--days, 1), minmax(0, 1fr)); position: relative; }
.cv-wrap.week .cv-grid { grid-template-columns: 64px repeat(7, minmax(110px, 1fr)); min-width: calc(64px + 7 * 110px); }
.cv-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 6px 4px; font-size: var(--fs-small); font-weight: 700; text-align: center; display: grid; gap: 4px; align-content: start; }
.cv-head.today { color: var(--brand); }
.cv-head small { display: block; font-weight: 400; color: var(--ink-muted); font-size: var(--fs-small); }
.cv-corner, .cv-hours { position: sticky; left: 0; z-index: 3; background: var(--surface); border-right: 1px solid var(--line); }
.cv-allday { font: inherit; font-size: var(--fs-small); font-weight: 700; color: var(--ink); background: var(--canvas); border: 1px dashed var(--ink-muted); border-radius: var(--r-input); padding: 6px 8px; min-height: 44px; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.cv-hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: var(--fs-small); color: var(--ink-muted); white-space: nowrap; }
.cv-hours span:first-child { transform: translateY(2px); }
.cv-col { position: relative; border-right: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hour)); cursor: cell; }
.cv-col:last-child { border-right: 0; }
.cv-off { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--ink-muted) 14%, transparent); pointer-events: none; } /* outside the business's hours: plainly grey (Dave, Nov 5) */
.cv-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--brand); z-index: 2; pointer-events: none; }
.cv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A visit, a block, Mel's booking, or Busy: a word and a color stripe, never color alone */
.cv-ev { position: absolute; z-index: 1; display: flex; flex-direction: column; overflow: hidden; padding: 3px 8px 5px; border: 1px solid var(--line); border-left-width: 6px; border-radius: var(--r-input); background: var(--canvas); color: var(--ink); font-size: var(--fs-small); line-height: 1.25; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: opacity var(--dur, 150ms) var(--ease-out, ease-out); }
.cv-ev .cv-time { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-ev .cv-tent { color: var(--warning); font-weight: 700; }
.cv-ev .cv-who { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-ev .cv-what { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-ev[data-kind="visit"] { border-left-color: var(--warning); background: var(--warning-soft); }
.cv-ev[data-kind="visit"][data-confirmed="true"] { border-left-color: var(--success); background: var(--success-soft); }
.cv-ev[data-kind="booking"] { border-style: dashed; border-left-style: solid; border-left-color: var(--accent); }
.cv-ev[data-kind="block"] { border-left-color: var(--ink-muted); background: repeating-linear-gradient(135deg, var(--canvas) 0 6px, color-mix(in srgb, var(--ink-muted) 16%, var(--canvas)) 6px 12px); }
.cv-ev[data-kind="busy"] { border-left-color: var(--ink-muted); cursor: default; }
.cv-ev[data-movable="true"] { cursor: grab; }
/* The bottom edge: drag it to change how long a visit is */
.cv-grip { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; cursor: ns-resize; }
@media (pointer: coarse) { .cv-grip { height: 22px; } }
.cv-grip::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 32px; height: 3px; margin-left: -16px; border-radius: var(--r-pill); background: var(--ink-muted); opacity: 0.6; }
/* Mid-drag: the visit stays faint where it was; a lifted copy follows the finger and snaps to 15 minutes */
.cv-ev.cv-origin { opacity: 0.35; }
.cv-ev.cv-ghost { z-index: 6; pointer-events: none; opacity: 0.96; outline: 3px solid var(--brand); outline-offset: -1px; cursor: grabbing; transition: top 90ms var(--ease-out, ease-out), height 90ms var(--ease-out, ease-out), transform 140ms var(--ease-out, ease-out); }
.cv-ev.cv-ghost.cv-up { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .cv-ev, .cv-ev.cv-ghost { transition: none; }
  .cv-ev.cv-ghost.cv-up { transform: none; }
}
/* The List: upcoming days, one tappable row each */
.cv-listday { margin-top: var(--s2); }
.cv-listday h3 { margin: 0 0 var(--s1); }
.rows .cv-row, .cv-match .row { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.rows .cv-row:disabled { cursor: default; opacity: 1; }
/* The sheets */
/* One column that never grows past the sheet (a date or time field's own width would push it sideways on a phone) */
.cv-sheet { grid-template-columns: minmax(0, 1fr); }
.cv-sheet .cv-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-sheet input, .cv-sheet select, .cv-sheet textarea { min-width: 0; max-width: 100%; }
.cv-sheet .btn { width: 100%; }
.cv-sheet label.field { margin: 0; }
.cv-sheet .help { margin: 0; }
.cv-sheet .notice { margin: 0; }
.cv-sheet .cv-pair { margin: 0; gap: var(--s1); }
.cv-sheet .cv-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--ink-muted); }
.cv-sheet .cv-phone { font-weight: 700; font-size: var(--fs-body-lg); }
.cv-msg { color: var(--danger); font-weight: 700; min-height: 1.3em; margin: 0; }
.cv-msg.ok { color: var(--ink-muted); }
.cv-quiet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s1); }
.cv-known { margin: 0 0 6px; color: var(--ink-muted); font-size: var(--fs-small); font-weight: 700; }
.cv-match .rows { margin-bottom: var(--s1); }
.cv-photos { display: grid; gap: var(--s1); }
.cv-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-input); border: 1px solid var(--line); }

/* =====================================================================================================================
   LOOK 2 (Dave, Nov 9: "as alive and polished as Apple's own apps; still dead easy to read in a truck").
   CHECKPOINT: only where the page puts .look2 on <body> (the dashboard's Today and job page) until Dave's OK.
   Unchanged: 18 px body, nothing under 15 px, 56 px targets, one brand button, a word plus a color for every status.
   New: depth (stacked soft shadows; cards lift on press), two frosted bars (the header and the tab bar, nothing else),
   a large title that settles into the header as you scroll, spring motion, Mel's light (.orb: the only glow and the
   only gradient), weather in Today's header, iOS-style sheets, and the Booked! moment. Only transform and opacity
   animate. Reduce Motion: fades only (the block at the top zeroes durations; the extras below switch off).
   ===================================================================================================================== */
:root {
  /* Springs as CSS linear() curves (a damped spring's step response): snappy for taps, soft for sheets and pages,
     bouncy only for celebrations. Pair each with its duration. */
  --spring-snappy: linear(0, 0.047, 0.157, 0.293, 0.433, 0.562, 0.674, 0.767, 0.841, 0.897, 0.938, 0.967, 0.987, 0.999, 1.006, 1.01, 1.011, 1.011, 1.01, 1.008, 1.007, 1.005, 1.004, 1.003, 1);
  --spring-soft: linear(0, 0.058, 0.181, 0.323, 0.457, 0.575, 0.673, 0.752, 0.814, 0.862, 0.898, 0.925, 0.945, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.995, 0.996, 0.997, 1);
  --spring-bouncy: linear(0, 0.057, 0.199, 0.384, 0.579, 0.761, 0.914, 1.029, 1.107, 1.149, 1.163, 1.155, 1.133, 1.103, 1.071, 1.041, 1.016, 0.996, 0.983, 0.976, 0.973, 0.975, 0.978, 0.983, 0.988, 0.993, 0.997, 1, 1.003, 1.004, 1.004, 1.004, 1.004, 1.003, 1);
  --t-tap: 280ms; --t-sheet: 460ms; --t-party: 700ms;
  --orb-hi: #ffe1c2; --orb-mid: #ff8a3d; --orb-lo: #e2470a; --orb-warm: #ffb347; --orb-glow: rgba(255, 107, 26, 0.42);
}
.look2 {
  --shadow-1: 0 0.5px 1px rgba(40, 30, 15, 0.05), 0 2px 5px rgba(40, 30, 15, 0.05), 0 6px 14px rgba(40, 30, 15, 0.035);
  --shadow-2: 0 1px 2px rgba(40, 30, 15, 0.05), 0 6px 14px rgba(40, 30, 15, 0.07), 0 18px 36px rgba(40, 30, 15, 0.07);
  --shadow-3: 0 2px 6px rgba(40, 30, 15, 0.08), 0 14px 30px rgba(40, 30, 15, 0.14), 0 36px 72px rgba(40, 30, 15, 0.16);
  --edge: color-mix(in srgb, var(--line) 55%, var(--surface)); /* outlines soften: the shadow carries the edge */
  --bar: color-mix(in srgb, var(--canvas) 88%, transparent);    /* the frosted bars' tint over what scrolls under */
  --r-card: 18px; --r-input: 12px;
}
/* Dark: deep warm grays (never pure black), surfaces that get lighter as they rise, a hairline of light on top edges */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .look2 {
    --canvas: #131211; --surface: #1d1b19; --line: #37332e; --ink: #f5f2ec; --ink-muted: #b3ada3;
    --brand: #8aa6ff; --brand-soft: #232c4d; --success-soft: #16301f; --warning-soft: #3a2b10; --danger-soft: #3f1a16;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 244, 230, 0.05);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 244, 230, 0.07);
    --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 30px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 244, 230, 0.08);
    --edge: #2b2824; --orb-glow: rgba(255, 138, 61, 0.55); --scrim: rgba(8, 7, 6, 0.62);
  }
}
:root[data-theme="dark"] .look2 {
  --canvas: #131211; --surface: #1d1b19; --line: #37332e; --ink: #f5f2ec; --ink-muted: #b3ada3;
  --brand: #8aa6ff; --brand-soft: #232c4d; --success-soft: #16301f; --warning-soft: #3a2b10; --danger-soft: #3f1a16;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 244, 230, 0.05);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 244, 230, 0.07);
  --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 30px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 244, 230, 0.08);
  --edge: #2b2824; --orb-glow: rgba(255, 138, 61, 0.55); --scrim: rgba(8, 7, 6, 0.62);
}
.look2 { background: var(--canvas); }
.look2 h1, .look2 h2, .look2 h3 { letter-spacing: -0.02em; }
.look2 time, .look2 .phone, .look2 .fact, .look2 .lc-clock, .look2 .when { font-variant-numeric: tabular-nums; }

/* ---------- The two frosted bars: the header and the tab bar; content scrolls under them ---------- */
.look2 .topbar, .look2 .tabbar { background: var(--bar); -webkit-backdrop-filter: saturate(140%) blur(22px); backdrop-filter: saturate(140%) blur(22px); }
.look2 .topbar { border-bottom: 0; padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
.look2 .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.look2 .topbar.scrolled::after { opacity: 1; }
.look2 .topbar .row { position: relative; min-height: 48px; align-items: center; flex-wrap: nowrap; }
/* The small title in the bar: on Today it fades in as the big greeting scrolls away (dashboard sets its opacity) */
.look2 .topbar h1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: var(--fs-heading); white-space: nowrap; pointer-events: none; }
.look2 .topbar h1 small { display: none; }
.look2 .navback { display: inline-flex; align-items: center; gap: 2px; min-height: 48px; min-width: 56px; margin-left: -8px; padding: 0 10px 0 4px; color: var(--brand); font-weight: 700; font-size: var(--fs-label); text-decoration: none; border-radius: 12px; transition: transform var(--t-tap) var(--spring-snappy); }
.look2 .navback svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.look2 .navback:active { transform: scale(0.95); }
.navback { display: none; }
.look2 #main > .back { display: none; } /* the same link now sits in the bar */
.look2 .linepick { margin-left: auto; }
.look2 .tabbar { border-top: 0; box-shadow: 0 -0.5px 0 var(--line); }
.look2 .tabbar a, .look2 .tabbar button { border-top: 0; position: relative; }
.look2 .tabbar svg { position: relative; }
.look2 .tabbar a::before { content: ""; position: absolute; top: 9px; left: 50%; width: 60px; height: 34px; margin-left: -30px; border-radius: 17px; background: var(--brand-soft); opacity: 0; transform: scale(0.6); transition: opacity var(--dur) var(--ease-out), transform var(--t-tap) var(--spring-snappy); }
.look2 .tabbar a[aria-current="page"]::before { opacity: 1; transform: none; }
@keyframes tab-bounce { 0% { transform: scale(0.8) translateY(2px); } 100% { transform: none; } }
.look2 .tabbar a[aria-current="page"] svg { animation: tab-bounce 520ms var(--spring-bouncy); }
@media (prefers-reduced-transparency: reduce) { .look2 .topbar, .look2 .tabbar { background: var(--canvas); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .look2 .topbar, .look2 .tabbar { background: var(--canvas); } }

/* ---------- Depth ---------- */
.look2 .card, .look2 .section { border-color: var(--edge); box-shadow: var(--shadow-1); }
.look2 .section.head { box-shadow: var(--shadow-2); }
.look2 .card[data-status="emergency"] { border-color: var(--danger); }
.look2 .empty.card { box-shadow: none; border-color: var(--line); }
/* A card lifts when pressed: the bigger shadow is its own layer that fades in (opacity), the card rises (transform) */
.look2 .card[data-job] { transition: transform var(--t-tap) var(--spring-snappy); }
.look2 .card[data-job]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-2); opacity: 0; transition: opacity var(--dur) var(--ease-out); pointer-events: none; }
.look2 .card[data-job]:active { transform: translateY(-2px) scale(1.008); }
.look2 .card[data-job]:active::after { opacity: 1; }
@media (hover: hover) { .look2 .card[data-job]:hover { transform: translateY(-1px); } .look2 .card[data-job]:hover::after { opacity: 1; } }
.look2 .btn { border-width: 1px; border-color: var(--edge); box-shadow: var(--shadow-1); transition: transform var(--t-tap) var(--spring-snappy), background-color var(--dur-fast) var(--ease-out); }
.look2 .btn.brand { border-color: transparent; box-shadow: 0 1px 2px rgba(20, 30, 80, 0.2), 0 8px 18px color-mix(in srgb, var(--brand) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.look2 .btn.quiet { box-shadow: none; }
.look2 .btn:not(:disabled):active { transform: scale(0.97); }
.look2 .melnote { border-color: var(--edge); border-left-color: var(--accent); }
.look2 select, .look2 input, .look2 textarea { border-radius: var(--r-input); }
/* The three actions on a job (Call, Text, Directions): the word under its icon, a 72 px target */
.look2 .btn.stack { flex-direction: column; gap: 4px; min-height: 72px; padding-top: 10px; padding-bottom: 10px; font-size: var(--fs-label); }
.look2 .btn.stack svg { width: 26px; height: 26px; fill: none; stroke: var(--brand); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.look2 .group h3 { font-size: 23px; }
.look2 .section.head h2 { font-size: 32px; letter-spacing: -0.025em; }

/* ---------- Mel's light ----------
   A light, not a ball: an edgeless core (it fades by alpha, never to a darker rim) whose inner glow shifts as two soft
   blobs drift, with the logo's two crescents riding around it: opposed, open, never closing into a ring.
   <span class="orb" role="img" aria-label="…"><span class="orb-bloom"></span><span class="orb-core"><span><span><b></b><b></b><i></i></span></span></span><span class="orb-arcs"><span class="orb-pair"><span class="orb-c c1"><i></i><i></i></span><span class="orb-c c2"><i></i><i></i></span></span></span></span>
   Size: --orb. Drawings: .sm (about 30 px: thicker, shorter crescents, no blur, a solid core), default (about 52 px),
   .lg (120 px and up: wider bloom). States: idle (it breathes and the crescents sway against each other), .oncall
   (never faster: the core speaks through three nested swells whose pattern takes a minute to repeat, the crescents
   open a little), .listening (crescents open, core calm), .speaking (crescents close in, core lively), .swell (the
   Booked! entrance). Everything moves by transform and opacity. Reduce Motion: the logo's pose, still. */
:root {
  --orb-hot: #fff6e8; --orb-a: #ffb347; --orb-b: #ff7a1a; --orb-c1: #f25a0a; --orb-c1b: #e04e00; --orb-c2: #ff7a1a;
  --orb-bloom: rgba(255, 122, 26, 0.34); --orb-blend: normal;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --orb-c1: #ffb04a; --orb-c1b: #ff9a2e; --orb-c2: #ffc27a; --orb-bloom: rgba(255, 138, 61, 0.42); --orb-blend: plus-lighter; } }
:root[data-theme="dark"] { --orb-c1: #ffb04a; --orb-c1b: #ff9a2e; --orb-c2: #ffc27a; --orb-bloom: rgba(255, 138, 61, 0.42); --orb-blend: plus-lighter; }

@keyframes orb-breath { 0%, 100% { transform: scale(0.95); } 40% { transform: scale(1.07); } }
@keyframes orb-hot { 0%, 100% { opacity: 0.72; } 40% { opacity: 1; } }
@keyframes orb-bloom { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 40% { opacity: 1; transform: scale(1.1); } }
@keyframes orb-drift-a { 0%, 100% { transform: translate(-9%, -6%); } 50% { transform: translate(8%, 7%); } }
@keyframes orb-drift-b { 0%, 100% { transform: translate(8%, -7%); } 50% { transform: translate(-8%, 6%); } }
@keyframes orb-turn { to { transform: rotate(360deg); } }
@keyframes orb-sway-1 { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(13deg); } }
@keyframes orb-sway-2 { 0%, 100% { transform: rotate(194deg); } 50% { transform: rotate(166deg); } }
@keyframes orb-say-1 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes orb-say-2 { 0%, 100% { transform: scale(0.97); } 45% { transform: scale(1.05); } }
@keyframes orb-say-3 { 0%, 100% { transform: scale(1); } 55% { transform: scale(1.045); } }
@keyframes orb-swell { 0% { transform: scale(0.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.5); opacity: 1; } }

.orb { --orb: 52px; position: relative; display: inline-block; width: var(--orb); height: var(--orb); flex: none; isolation: isolate; }
.orb > span, .orb-core span, .orb-core b, .orb-core i, .orb-pair, .orb-c, .orb-c i { position: absolute; border-radius: 50%; }
/* The bloom: light spilling onto the page */
.orb-bloom { inset: -36%; background: radial-gradient(closest-side, var(--orb-bloom) 0%, color-mix(in srgb, var(--orb-bloom) 40%, transparent) 52%, transparent 100%); animation: orb-bloom 6.6s ease-in-out infinite; z-index: -1; }
/* The core: three nested wrappers (speech swells), two drifting blobs, a small hot center. No edge anywhere. */
.orb-core { inset: 16%; animation: orb-breath 6.6s ease-in-out infinite; }
.orb-core > span, .orb-core > span > span { inset: 0; }
.orb-core b { inset: 4%; }
.orb-core b:nth-of-type(1) { background: radial-gradient(closest-side, var(--orb-a) 0%, color-mix(in srgb, var(--orb-a) 62%, transparent) 46%, transparent 100%); animation: orb-drift-a 9s ease-in-out infinite; }
.orb-core b:nth-of-type(2) { background: radial-gradient(closest-side, var(--orb-b) 0%, color-mix(in srgb, var(--orb-b) 66%, transparent) 50%, transparent 100%); animation: orb-drift-b 13s ease-in-out infinite; }
.orb-core i { inset: 26%; background: radial-gradient(closest-side, var(--orb-hot) 0%, color-mix(in srgb, var(--orb-hot) 70%, transparent) 34%, transparent 100%); animation: orb-hot 6.6s ease-in-out infinite; }
/* The crescents: one shared radius, opposed, each about 160 degrees and tapering to nothing; the gaps never close.
   A crescent is a disc with an off-center disc cut from it (a mask), a crisp one over a soft copy of itself. */
.orb-arcs { inset: -4%; mix-blend-mode: var(--orb-blend); }
.orb-pair { inset: 0; animation: orb-turn 54s linear infinite; }
.orb-c { inset: 0; }
.orb-c i { inset: 0; -webkit-mask: radial-gradient(54.2% 54.2% at 64.6% 50%, transparent 98.5%, #000 100%); mask: radial-gradient(54.2% 54.2% at 64.6% 50%, transparent 98.5%, #000 100%); }
.orb-c i:nth-of-type(1) { filter: blur(calc(var(--orb) * 0.045)); opacity: 0.55; }
.orb-c i:nth-of-type(2) { opacity: 0.92; }
.orb-c.c1 { animation: orb-sway-1 7.4s ease-in-out infinite; } .orb-c.c1 i { background: linear-gradient(160deg, var(--orb-c1), var(--orb-c1b)); }
.orb-c.c2 { animation: orb-sway-2 9.2s ease-in-out infinite; } .orb-c.c2 i { background: var(--orb-c2); }
.orb-pair { transform: rotate(0deg); } .orb-arcs { transform: rotate(118deg); transition: transform 500ms ease; } /* the rest pose: the stronger crescent upper right, as in the logo */

/* About 30 px (the live call card): thicker, shorter crescents with no blur, a solid core, a tight bright bloom */
.orb.sm { --orb: 30px; }
.orb.sm .orb-bloom { inset: -30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--orb-bloom) 100%, var(--orb-b) 30%) 0%, transparent 100%); }
.orb.sm .orb-core { inset: 22%; animation: none; }
.orb.sm .orb-core b:nth-of-type(1) { animation: none; background: radial-gradient(closest-side, var(--orb-b) 0%, var(--orb-b) 58%, transparent 100%); inset: 0; }
.orb.sm .orb-core b:nth-of-type(2) { display: none; }
.orb.sm .orb-core i { inset: 22%; }
.orb.sm .orb-c i { -webkit-mask: radial-gradient(52% 52% at 68.5% 50%, transparent 97%, #000 100%); mask: radial-gradient(52% 52% at 68.5% 50%, transparent 97%, #000 100%); }
.orb.sm .orb-c i:nth-of-type(1) { display: none; } .orb.sm .orb-c i:nth-of-type(2) { opacity: 1; }
/* 120 px and up (the public site, the wizard): the bloom reaches further */
.orb.lg .orb-bloom { inset: -62%; }

/* On a call: never faster. The core speaks; the crescents open a little and keep swaying. */
.orb.oncall .orb-core { animation: orb-say-1 0.9s ease-in-out infinite; }
.orb.oncall .orb-core > span { animation: orb-say-2 1.3s ease-in-out infinite; }
.orb.oncall .orb-core > span > span { animation: orb-say-3 2.1s ease-in-out infinite; }
.orb.oncall .orb-core i { animation: none; opacity: 1; }
.orb.oncall .orb-arcs { transform: rotate(118deg) scale(1.08); }
/* Who is talking: the caller (she listens: the crescents open, the core is calm) or Mel (they close in, the core is lively) */
.orb.oncall.listening .orb-arcs { transform: rotate(118deg) scale(1.16); }
.orb.oncall.listening .orb-core, .orb.oncall.listening .orb-core > span, .orb.oncall.listening .orb-core > span > span { animation-duration: 3.4s, 3.4s, 3.4s; }
.orb.oncall.speaking .orb-arcs { transform: rotate(118deg) scale(1.02); }
.orb.speak .orb-core > span > span { animation: orb-say-1 620ms ease-in-out; }
.orb.still *, .orb.still { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .orb *, .orb { animation: none !important; } }

/* ---------- Today's header: Mel's light, the date and weather, the greeting as the page's large title, what Mel did ---------- */
.hero { display: grid; gap: 14px; margin: 0 0 var(--s4); }
.look2 .content:has(> #hero:not([hidden])) { padding-top: 4px; }
.hero .stats { display: none; }
.hero-top { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.hero .orb { --orb: 52px; margin: 10px 8px 10px 10px; }
.hero .meta { display: grid; gap: 2px; min-width: 0; }
.hero .date { margin: 0; color: var(--ink-muted); font-size: var(--fs-label); font-weight: 700; }
.hero .wx span { min-width: 0; text-wrap: balance; }
.hero .wx { margin: 0; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 700; color: var(--ink); min-height: 28px; }
.hero .wx b { font-family: var(--font-head); font-weight: 800; font-variant-numeric: tabular-nums; }
.hero .bigtitle { font-size: clamp(38px, 10.5vw, 56px); line-height: 1.02; letter-spacing: -0.035em; margin: 0; transform-origin: 0 100%; text-wrap: balance; overflow-wrap: anywhere; will-change: transform, opacity; }
.hero .did { margin: 0; font-size: var(--fs-body-lg); line-height: 1.35; color: var(--ink); text-wrap: balance; }
.hero .did b { font-family: var(--font-head); font-weight: 800; font-variant-numeric: tabular-nums; }
.hero .did .nw { white-space: nowrap; }
.hero .did .skel { display: inline-block; width: 70%; height: 1em; vertical-align: middle; }
@media (min-width: 960px) {
  .look2 .content:has(> #hero:not([hidden])) { padding-top: var(--s2); }
  .hero { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 64px; margin-bottom: 48px; }
  .hero-top { grid-column: 1 / -1; } .hero .bigtitle { font-size: 64px; } .hero .orb { margin-right: 14px; }
  /* On a wide screen what Mel did today is two big numbers on the greeting's baseline (the sentence stays for screen readers) */
  .hero .did { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hero .stats { display: flex; gap: 48px; }
  .hero .stats div { display: grid; gap: 4px; }
  .hero .stats b { font-family: var(--font-head); font-weight: 800; font-size: 56px; line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .hero .stats span { color: var(--ink-muted); font-weight: 700; font-size: var(--fs-label); }
  /* Today on a wide screen: what needs you on the left, what's coming on the right, each under its own heading;
     with only one of the two, its cards sit two across */
  .look2 #main.today2 .tcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
  .look2 #main.today2 .tcols > div { display: block; }
  .look2 #main.today2 .tcols .cards { grid-template-columns: minmax(0, 1fr); }
  .look2 #main.today2 .tcols > div + div > .group:first-child { margin-top: 0; }
  .hero .stats { padding-bottom: 13px; }
}
/* Weather: small line icons that move a little (the sun's rays turn, a cloud drifts, rain falls) */
@keyframes wx-turn { to { transform: rotate(360deg); } }
@keyframes wx-drift { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1.5px); } }
@keyframes wx-fall { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(3px); opacity: 0; } }
@keyframes wx-flash { 0%, 86%, 100% { opacity: 1; } 90% { opacity: 0.2; } 94% { opacity: 1; } }
.wxi { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.wxi .sun { stroke: var(--accent); } .wxi .rays { transform-origin: 12px 12px; animation: wx-turn 18s linear infinite; }
.wxi.partly .rays { transform-origin: 8px 8px; }
.wxi .cloud { animation: wx-drift 6s var(--ease-in-out) infinite; fill: var(--canvas); }
.wxi .drop { stroke: var(--brand); animation: wx-fall 1.3s linear infinite; } .wxi .drop:nth-of-type(2) { animation-delay: 0.45s; } .wxi .drop:nth-of-type(3) { animation-delay: 0.9s; }
.wxi .bolt { stroke: var(--accent); animation: wx-flash 4s linear infinite; }

/* ---------- The live call card with Mel's light ---------- */
.livecall .orb { display: none; } .look2 .livecall .orb { display: inline-block; } .look2 .livecall .lc-dot { display: none; }
.look2 .livecall { border: 1px solid var(--edge); box-shadow: var(--shadow-2); border-radius: 22px; animation: mel-arrive var(--t-sheet) var(--spring-soft) both; }
.look2 .lc-band { background: none; color: var(--ink); padding: 16px var(--s2) 2px 20px; font-size: var(--fs-body-lg); font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; }
.look2 .lc-onair { gap: 16px; }
.look2 .lc-onair .orb { --orb: 30px; margin: 10px 8px 10px 10px; }
.look2 .lc-who { letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.look2 .lc-wave { color: var(--accent); }
.look2 .lc-lines { border-color: var(--edge); border-radius: 14px; }
.look2 .lc-lines li { border-color: var(--edge); border-radius: 16px; }
.look2 .lc-lines li.new { animation: mel-rise 380ms var(--spring-soft) both; }
.look2 .livecall.ended .lc-band { background: none; }
.look2 .livecall.ended .orb, .look2 .livecall.ended .orb * { animation: none !important; }
.look2 .livecall.ended .orb { filter: grayscale(1); opacity: 0.6; }

/* ---------- Sheets like iOS: the page behind recedes and dims, a grabber on top, a soft spring up ---------- */
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.look2 main.content { transition: transform var(--t-sheet) var(--spring-soft), opacity var(--t-sheet) var(--spring-soft); }
.look2:has(.sheet-back:not([hidden])) main.content { transform: scale(0.955); opacity: 0.85; }
.look2 .sheet-back > .sheet { animation: sheet-up var(--t-sheet) var(--spring-soft) both; border: 0; border-radius: 24px 24px 0 0; box-shadow: var(--shadow-3); padding-top: 26px; position: relative; touch-action: pan-y; }
.look2 .sheet-back > .sheet::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--line); }
.look2 .sheet-back > .sheet.dragging { animation: none; transition: none; }
.look2 .sheet-back > .sheet.settling { animation: none; transition: transform var(--t-sheet) var(--spring-soft); }
@media (min-width: 960px) { .look2 .sheet-back { align-items: center; } .look2 .sheet-back > .sheet { border-radius: 24px; animation-name: bkd-in; } .look2 .sheet-back > .sheet::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .look2:has(.sheet-back:not([hidden])) main.content { transform: none; } .look2 .sheet-back > .sheet { animation-name: mel-fade; } }

/* ---------- Booked!: Mel's light swells, turns into the check that draws itself, a small burst; once per booking ---------- */
@keyframes bkd-in { from { opacity: 0; transform: translateY(24px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes bkd-out { to { opacity: 0; transform: scale(0.96); } }
@keyframes bkd-swell { 0% { transform: scale(0.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.5); opacity: 1; } }
@keyframes bkd-orb-away { to { opacity: 0; transform: scale(1.75); } }
@keyframes bkd-disc { from { transform: scale(0.2); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes bkd-halo { 0% { transform: scale(0.8); opacity: 0; } 15% { opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes bkd-draw { to { stroke-dashoffset: 0; } }
@keyframes bkd-burst { 0% { transform: rotate(var(--a)) translateY(-40px) scale(0.3); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(-78px - var(--d, 0px))) scale(1); opacity: 0; } }
@keyframes bkd-text { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bkd-back { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--s2); background: var(--scrim); animation: mel-fade 220ms var(--ease-out); }
.bkd { width: 100%; max-width: 380px; background: var(--surface); color: var(--ink); border-radius: 28px; border: 1px solid var(--edge, var(--line)); box-shadow: var(--shadow-3, none); padding: 40px var(--s3) 24px; text-align: center; animation: bkd-in 520ms var(--spring-soft) both; }
.bkd-back.out { animation: mel-fade 200ms var(--ease-out) reverse both; } .bkd-back.out .bkd { animation: bkd-out 200ms var(--ease-out) both; }
.bkd-mark { position: relative; width: 112px; height: 112px; margin: 0 auto 28px; }
.bkd-mark .orb { --orb: 64px; position: absolute; left: 24px; top: 24px; animation: bkd-swell 520ms var(--spring-bouncy) 120ms both, bkd-orb-away 260ms var(--ease-out) 620ms forwards; }
.bkd-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.bkd-mark .halo { fill: none; stroke: var(--success); stroke-width: 3; transform-origin: 56px 56px; opacity: 0; animation: bkd-halo 700ms var(--ease-out) 640ms both; }
.bkd-mark .disc { transform-origin: 56px 56px; animation: bkd-disc 560ms var(--spring-bouncy) 500ms both; }
.bkd-mark .tick { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: bkd-draw 360ms cubic-bezier(0.6, 0, 0.2, 1) 860ms forwards; }
.bkd-mark > i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--c); opacity: 0; animation: bkd-burst 760ms cubic-bezier(0.1, 0.7, 0.2, 1) 700ms both; }
.bkd-mark > i:nth-of-type(odd) { width: 6px; height: 14px; border-radius: 3px; margin: -7px 0 0 -3px; --d: 14px; }
.bkd-mark > i:nth-of-type(3n) { --d: 26px; animation-duration: 880ms; }
.bkd h2 { font-size: 40px; letter-spacing: -0.03em; animation: bkd-text 420ms var(--spring-soft) 780ms both; }
.bkd p { font-size: var(--fs-body-lg); font-weight: 700; margin: 10px 0 0; text-wrap: balance; font-variant-numeric: tabular-nums; animation: bkd-text 420ms var(--spring-soft) 860ms both; }
.bkd p.sub { color: var(--ink-muted); font-size: var(--fs-body); font-weight: 400; margin-top: 4px; animation-delay: 920ms; }
.bkd .btn { margin-top: 28px; animation: bkd-text 420ms var(--spring-soft) 1000ms both; }
@media (prefers-reduced-motion: reduce) { .bkd-mark > i, .bkd-mark .orb, .bkd-mark .halo { display: none; } .bkd-mark .tick { stroke-dashoffset: 0; } }

/* ===== LOOK 2, pass 2 (the critic's list) ===== */
/* Digits: Atkinson's zero is slashed, which read as a terminal font and, small, like an 8. Digits (only U+30-39) now
   come from Archivo, the heading face: one plain zero everywhere, the same numerals in text and in headings. */
@font-face { font-family: "Mel Digits"; src: url(/fonts/archivo-digits.woff2) format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+30-39; }
.look2 { --font-body: "Mel Digits", "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.look2 .phone { letter-spacing: 0.01em; }

/* The blue button keeps the brand's own blue in the dark (white words on it); links and outlines use the lighter blue */
.look2 { --brand-fill: var(--brand); --on-fill: var(--on-brand); --bkd-hi: #35b869; --bkd-lo: #0b6b30; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .look2 { --brand-fill: #3560ee; --on-fill: #ffffff; --bkd-hi: #6fe59d; --bkd-lo: #1f9e52; --scrim: rgba(8, 7, 6, 0.56); } }
:root[data-theme="dark"] .look2 { --brand-fill: #3560ee; --on-fill: #ffffff; --bkd-hi: #6fe59d; --bkd-lo: #1f9e52; --scrim: rgba(8, 7, 6, 0.56); }
.look2 .btn.brand { background: var(--brand-fill); color: var(--on-fill); border-color: transparent; box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
/* One blue button on the screen: while a call is live, Take over is it, and the list's button waits as an outline */
.look2 #livebox:has(.livecall:not(.ended) .btn.brand) ~ #main .btn.brand { background: var(--surface); color: var(--brand); border-color: var(--edge); box-shadow: var(--shadow-1); }

/* One count badge everywhere */
.look2 .group h3 .count, .look2 .section > h3 .count { font-family: var(--font-head); font-size: var(--fs-small); font-weight: 800; color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); border: 0; border-radius: var(--r-pill); padding: 3px 10px; min-width: 30px; text-align: center; letter-spacing: 0; }
.look2 .section > h3 .hint { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--ink-muted); letter-spacing: 0; }
.look2 .card .what .tname { display: block; }

/* A pressed card lifts (the class comes from a pointer listener, so iPhone gets it too) */
.look2 .card.pressed { transform: translateY(-6px) scale(1.03); }
.look2 .card[data-job]::after { box-shadow: var(--shadow-3); }
.look2 .card.pressed::after { opacity: 1; }
.look2 .lrow.pressed { background: color-mix(in srgb, var(--ink) 5%, transparent); }

/* Past three leads: compact rows in one card */
.look2 .lrows { list-style: none; margin: 0 0 var(--s2); padding: 0 var(--s2); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.look2 .lrow { display: flex; align-items: center; gap: var(--s2); padding: 10px 0; border-top: 1px solid var(--edge); transition: background-color var(--dur-fast) var(--ease-out); }
.look2 .lrow:first-child { border-top: 0; }
.look2 .lrow .lmain { flex: 1; min-width: 0; display: grid; gap: 2px; color: var(--ink); text-decoration: none; min-height: var(--tap); align-content: center; }
.look2 .lrow .lmain b { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-body-lg); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look2 .lrow .lmain span { color: var(--ink-muted); font-size: var(--fs-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look2 .lrow .btn { flex: none; padding: 0 16px; }
.look2 .lrow .btn svg { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* Empty, error, offline: a small drawing, a headline, one line, and (for errors) Try again */
.state { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 40px var(--s2) var(--s3); }
.state .illo { width: 150px; height: 109px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.state .illo .soft { stroke: var(--line); } .state .illo .body { fill: var(--surface); }
.state .illo .orbdot { fill: var(--accent); stroke: none; } .state .illo .okdot { fill: var(--success); stroke: var(--canvas); stroke-width: 3; } .state .illo .okmark { stroke: var(--canvas); }
.state .illo .spark { stroke: var(--accent); }
.state h3 { font-size: var(--fs-title); letter-spacing: -0.02em; }
.state p { margin: 0; color: var(--ink-muted); max-width: 32ch; text-wrap: balance; }
.state .btn { margin-top: var(--s2); min-width: 220px; }

/* The live call card: Listen in and Take over above the words; the words fade out at the top; Mel's lines are tinted */
.look2 .lc-lines { max-height: 216px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px); mask-image: linear-gradient(to bottom, transparent 0, #000 30px); background: none; border: 0; padding: 14px 0 0; }
.look2 .lc-lines li.mel-said { border: 0; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.look2 .lc-lines li { background: var(--canvas); border: 0; }
@media (min-width: 960px) { .look2 .lc-body > .lc-lines { max-height: 250px; } }

/* The job page: who, the actions and the visit ride along in a rail on a wide screen; the rest is one reading column */
.rail, .flow { display: contents; }
.look2 .section.visit .visit-when { margin: 0 0 10px; display: grid; gap: 2px; }
.look2 .section.visit .visit-when b { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-heading); letter-spacing: -0.01em; }
.look2 .section.visit .visit-when span { font-family: var(--font-head); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.look2 .section.quiet { background: none; border-color: transparent; box-shadow: none; padding-left: 4px; padding-right: 4px; }
.look2 .topbar h1 { max-width: 62%; overflow: hidden; text-overflow: ellipsis; }
.look2 .section.head[data-job] { view-transition-name: jobhero; }
@media (min-width: 960px) {
  .look2 #main.twocol:has(> .rail) { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: var(--s3); }
  .look2 .rail { display: grid; gap: var(--s2); position: sticky; top: 72px; align-self: start; }
  .look2 .flow { display: grid; gap: var(--s2); min-width: 0; }
  .look2 .rail > .section, .look2 .flow > .section { margin-bottom: 0; }
  .look2 .flow > .foot { margin-top: var(--s1); }
}
/* Opening a job: the card grows into the heading card with a soft spring; the rest cross-fades */
::view-transition-group(jobhero) { animation-duration: 560ms; animation-timing-function: var(--spring-snappy); overflow: clip; border-radius: 18px; }
::view-transition-old(jobhero), ::view-transition-new(jobhero) { width: 100%; height: 100%; object-fit: none; object-position: top left; }
::view-transition-image-pair(jobhero) { background: var(--vt-surface, var(--surface)); isolation: auto; }
::view-transition-old(jobhero) { animation: mel-fade 150ms linear reverse both; mix-blend-mode: normal; }
::view-transition-new(jobhero) { animation: mel-fade 170ms var(--ease-out) 110ms both; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }

/* The More sheet and other menus in a sheet: one grouped list with hairlines, a drawn chevron */
.look2 .sheet { max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; }
.look2 .sheet .menu { gap: 0; background: var(--canvas); border-radius: 16px; overflow: hidden; }
.look2 .sheet .menu a, .look2 .sheet .menu button { border: 0; border-radius: 0; background: none; box-shadow: none; }
.look2 .sheet .menu li + li { border-top: 1px solid var(--edge); }
.look2 .sheet .menu a[aria-current="page"] { background: var(--brand-soft); }
.look2 .menu a::after { content: ""; width: 9px; height: 9px; border-right: 2.25px solid var(--ink-muted); border-top: 2.25px solid var(--ink-muted); border-radius: 1px; transform: rotate(45deg); flex: none; margin-right: 4px; }

/* Booked!: when is the big line, who under it; the check has the orb's lighting; a fuller burst */
.bkd { padding-top: 30px; }
.bkd-mark { margin-bottom: 22px; }
.bkd-mark .shine { display: none; fill: rgba(255, 255, 255, 0.3); transform-origin: 56px 56px; animation: bkd-disc 560ms var(--spring-bouncy) 600ms both; }
.bkd-mark > i { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; animation-duration: 1000ms; }
.bkd-mark > i:nth-of-type(odd) { width: 8px; height: 18px; border-radius: 4px; margin: -9px 0 0 -4px; }
.bkd-mark > i:nth-of-type(3n) { animation-duration: 1150ms; }
.bkd p.when { font-family: var(--font-head); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; margin-top: 12px; }
.bkd p.who { font-size: var(--fs-body-lg); font-weight: 700; margin-top: 8px; animation-delay: 900ms; }
.bkd-back { background: color-mix(in srgb, var(--scrim) 100%, #000 18%); }

.look2 .rail .head .acts > .btnrow:first-child { margin-top: var(--s2); }

/* ===== LOOK 2, pass 3 ===== */
.tcols, .tcols > div { display: contents; }
.look2 .tcols > div + div > .group:first-child, .look2 #main > .group + .tcols > div:first-child > .group:first-child { margin-top: var(--s3); }
.look2 .tcols .group + .group { margin-top: var(--s3); }
/* Compact lead rows: the name may take two lines; the time leads the second line so it is never cut */
.look2 .lrow .lmain b { white-space: normal; overflow: visible; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* Rows of actions inside a section are an even grid, never ragged leftovers */
.look2 .section > .btnrow:not(.two):not(.three) { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.look2 .section > .btnrow:not(.two):not(.three) > .btn { width: 100%; padding-left: 10px; padding-right: 10px; }
.look2 .section > .btnrow > .muted { align-self: center; }
/* Quiet text links are full-size targets too */
.look2 .link { min-height: var(--tap); display: inline-flex; align-items: center; }
/* Outlined buttons hold their edge in the dark */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .look2 .btn:not(.brand):not(.quiet) { border-color: #45403a; background: #24211e; } }
:root[data-theme="dark"] .look2 .btn:not(.brand):not(.quiet) { border-color: #45403a; background: #24211e; }
/* The text thread inside its card: no box in a box */
.look2 .section .thread { background: none; border: 0; padding: 0; }
/* A folded section (Activity): the heading is the control */
.look2 details.fold > summary { list-style: none; cursor: pointer; min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; margin: -8px 0; }
.look2 details.fold > summary::-webkit-details-marker { display: none; }
.look2 details.fold > summary h3 { display: flex; align-items: center; gap: var(--s1); }
.look2 details.fold > summary::after { content: ""; width: 10px; height: 10px; border-right: 2.25px solid var(--ink-muted); border-bottom: 2.25px solid var(--ink-muted); transform: rotate(45deg); transition: transform var(--t-tap) var(--spring-snappy); margin-right: 6px; }
.look2 details.fold[open] > summary::after { transform: rotate(225deg); }
.look2 details.fold[open] > summary { margin-bottom: 8px; }
/* The live call's words: a short window that fades out at the top (no hard sliver) */
.look2 .lc-lines { max-height: 190px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px); mask-image: linear-gradient(to bottom, transparent 0, #000 64px); }
/* The More sheet: the main group, a label, the Advanced group; Close stays in reach */
.look2 .sheet .menu { background: none; border-radius: 0; overflow: visible; }
.look2 .sheet .menu li { background: var(--canvas); }
.look2 .sheet .menu li:has(> h4) { background: none; border: 0; padding: 18px 6px 8px; }
.look2 .sheet .menu li:has(> h4) h4 { margin: 0; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; }
.look2 .sheet .menu li:has(> h4) + li { border-top: 0; }
.look2 .sheet .menu li:first-child, .look2 .sheet .menu li:has(> h4) + li { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.look2 .sheet .menu li:last-child, .look2 .sheet .menu li:has(+ li > h4) { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.look2 .sheet .menu li > a, .look2 .sheet .menu li > button { width: 100%; border-radius: inherit; }
.look2 .menu button::after { content: ""; width: 9px; height: 9px; border-right: 2.25px solid var(--ink-muted); border-top: 2.25px solid var(--ink-muted); border-radius: 1px; transform: rotate(45deg); flex: none; margin-right: 4px; }
.look2 .sheet > .btn.wide:last-child { margin-top: var(--s2); }
.look2 .sheet { padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px)); }
/* Booked!: the day, then the time as the largest line after the headline; See the job, and a quiet Done */
.bkd p.when { display: grid; gap: 2px; }
.bkd p.when .day { font-size: var(--fs-body-lg); }
.bkd p.when .time { font-size: 44px; line-height: 1.05; letter-spacing: -0.03em; }
.bkd .link { margin: 6px auto 0; justify-content: center; width: 100%; color: var(--ink-muted); animation: bkd-text 420ms var(--spring-soft) 1060ms both; }
/* Opening a job: the two bars stay put; only the card grows, and the rest hands over without both showing at once */
.look2 .tabbar { view-transition-name: tabbar; } .look2 .topbar { view-transition-name: topbar; }
::view-transition-old(tabbar), ::view-transition-old(topbar) { display: none; }
::view-transition-new(tabbar), ::view-transition-new(topbar) { animation: none; }
::view-transition-old(root) { animation: mel-fade 110ms linear reverse both; mix-blend-mode: normal; }
::view-transition-new(root) { animation: mel-fade 240ms var(--ease-out) 240ms both; mix-blend-mode: normal; }

.look2 .section > .btnrow:not(.two):not(.three) > .btn:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }

/* ===== LOOK 2, pass 4 ===== */
/* Today on a wide screen with little on one side: one column of wide cards, the button at the right of its card */
@media (min-width: 960px) {
  .look2 #main.today2 .cards > .card:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: var(--s4); align-items: start; }
  .look2 #main.today2 .cards > .card:only-child > * { grid-column: 1; }
  .look2 #main.today2 .cards > .card:only-child > .act { grid-column: 2; grid-row: 1 / span 8; align-self: center; margin-top: 0; }
  .look2 #main.today2 .tcols .cards > .card:only-child { display: block; }
  .look2 #main.today2 .tcols .cards > .card:only-child > .act { margin-top: var(--s2); }
  .look2 .lc-body > .btnrow { align-self: start; }
  .look2 .lc-onair .orb { --orb: 38px; }
}
/* The job page: what Mel learned is the one tinted block; the lesser sections fold into one grouped card */
.look2 .section.learned { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 22%, var(--edge)); }
.look2 .section.learned > h3 { gap: 10px; }
.look2 .section.learned .lead { font-size: var(--fs-body-lg); line-height: 1.4; margin: 0 0 14px; text-wrap: pretty; }
.look2 .section.learned .facts { border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--edge)); padding-top: 12px; }
.look2 .section.learned .unknown { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--edge)); margin-top: 12px; }
.look2 .section.foldgroup { padding-top: 6px; padding-bottom: 6px; }
.look2 .foldgroup > details.fold { border-top: 1px solid var(--edge); padding: 8px 0; }
.look2 .foldgroup > details.fold:first-child { border-top: 0; }
.look2 .foldgroup > details.fold > summary { margin: 0; }
.look2 .foldgroup > details.fold > summary h3 { font-size: var(--fs-body-lg); letter-spacing: -0.01em; }
.look2 .foldgroup > details.fold[open] { padding-bottom: 16px; }
.look2 .foldgroup .btnrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.look2 .foldgroup .btnrow .btn { width: 100%; }
/* One disclosure pattern and one link style inside cards */
.look2 details.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); font-weight: 700; color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.look2 details.more > summary::-webkit-details-marker { display: none; }
.look2 details.more > summary::after { content: ""; width: 9px; height: 9px; border-right: 2.25px solid var(--ink-muted); border-bottom: 2.25px solid var(--ink-muted); transform: rotate(45deg); margin-right: 8px; transition: transform var(--t-tap) var(--spring-snappy); }
.look2 details.more[open] > summary::after { transform: rotate(225deg); }
.look2 .section p a:not(.btn), .look2 .foldgroup a:not(.btn) { font-weight: 700; color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.look2 .section .link { padding-left: 0; }
.look2 .timeline li:last-child { padding-bottom: 0; }
/* Compact lead rows: the second line wraps instead of cutting a word; card titles hold to two lines of name */
.look2 .lrow .lmain span { white-space: normal; overflow: visible; text-overflow: clip; }
.look2 .card .what .tname { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* The live call's words: only the top edge fades (lines that are leaving); two full lines always fit */
.look2 .lc-lines { max-height: 236px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.look2 .lc-lines li.new { animation: lc-in 460ms var(--spring-snappy) both; }
@keyframes lc-in { from { opacity: 0; transform: translateY(22px) scale(0.96); } to { opacity: 1; transform: none; } }
/* The More sheet: Advanced is one row that opens */
.look2 #moremenu:not(.adv-open) li:has(> h4) ~ li:not(:has([data-feedback])) { display: none; }
.look2 .sheet .menu li:has(> h4) { background: var(--canvas); border-radius: 16px; margin-top: 12px; padding: 0 var(--s2); min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.look2 .sheet .menu li:has(> h4) h4 { text-transform: none; letter-spacing: 0; font-size: var(--fs-body); color: var(--ink); font-family: var(--font-body); font-weight: 700; }
.look2 .sheet .menu li:has(> h4)::after { content: ""; width: 9px; height: 9px; border-right: 2.25px solid var(--ink-muted); border-bottom: 2.25px solid var(--ink-muted); transform: rotate(45deg); margin-right: 8px; transition: transform var(--t-tap) var(--spring-snappy); }
.look2 #moremenu.adv-open li:has(> h4)::after { transform: rotate(225deg); }
.look2 #moremenu.adv-open li:has(> h4) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.look2 #moremenu.adv-open li:has(> h4) + li { border-top: 1px solid var(--edge); border-top-left-radius: 0; border-top-right-radius: 0; }
.look2 .sheet .menu li:has([data-feedback]) { margin-top: 12px; border-radius: 16px; border-top: 0; }
.look2 #moremenu:not(.adv-open) li:has(+ li > h4) { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
/* Booked!: a flat check (the orb is the only gradient), a date tile with the time beside it, Mel's light in the last line */
.bkd-mark .disc { fill: var(--success); }
.bkd p.when { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; text-align: left; background: var(--canvas); border-radius: 18px; padding: 12px 16px 12px 12px; margin-top: 18px; }
.bkd p.when .dtile { display: grid; width: 64px; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--edge, var(--line)); text-align: center; }
.bkd p.when .dtile b { background: var(--accent); color: var(--on-accent); font-size: var(--fs-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 0; }
.bkd p.when .dtile span { font-size: 30px; line-height: 1.25; letter-spacing: -0.02em; }
.bkd p.when .lk { display: grid; gap: 0; min-width: 0; }
.bkd p.when .day { font-size: var(--fs-label); color: var(--ink-muted); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.bkd p.when .time { font-size: 36px; line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; }
.bkd p.who { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-heading); letter-spacing: -0.01em; margin-top: 16px; }
.bkd p.sub { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.orb.mini { --orb: 16px; margin: 4px; }
.orb.mini > i { display: none; }
.bkd .btn.quiet2 { margin-top: 8px; border-color: transparent; box-shadow: none; background: none; color: var(--ink-muted); }
/* Loading placeholders: warm, the real card's height, a soft sheen that slides across (transform only) */
.look2 { --skel: color-mix(in srgb, var(--line) 70%, var(--surface)); }
.look2 .skel { position: relative; overflow: hidden; animation: none; }
.look2 .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent), transparent); transform: translateX(-100%); animation: skel-sheen 1.5s var(--ease-in-out) infinite; }
@keyframes skel-sheen { to { transform: translateX(100%); } }
.look2 .skel-card { min-height: 316px; display: flex; flex-direction: column; box-shadow: var(--shadow-1); border-color: var(--edge); }
.look2 .skel-card .sk-btn { margin-top: auto; flex: none; }
.look2 .skel-card .skel { flex: none; }
.state .illo .warndot { fill: var(--warning); stroke: var(--canvas); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .look2 .skel::after { display: none; } }
.bkd p.when .dtile { align-self: center; grid-template-rows: auto auto; padding: 0; color: var(--ink); }
.bkd p.when .dtile b { display: block; width: 100%; }
.bkd p.when .dtile span { color: var(--ink); display: block; }
.look2 .section.learned .lead { color: var(--ink); }

/* ===== LOOK 2, pass 5 ===== */
.bkd p.when .dtile { display: grid; grid-template-rows: auto auto; width: 68px; align-self: center; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--edge, var(--line)); text-align: center; padding: 0; }
.bkd p.when .dtile b { display: block; background: var(--accent); color: var(--on-accent); font-size: var(--fs-small); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 0 2px; }
.bkd p.when .dtile span { display: block; color: var(--ink); font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; padding-bottom: 2px; }
.look2 { --bkd-disc: #0f7536; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .look2 { --bkd-disc: #1a7f41; } }
:root[data-theme="dark"] .look2 { --bkd-disc: #1a7f41; }
.bkd-mark .disc { fill: var(--bkd-disc, var(--success)); } .bkd-mark .halo { stroke: var(--bkd-disc, var(--success)); }
/* One count and one hint style, in folded rows too */
.look2 details.fold summary .count { font-family: var(--font-head); font-size: var(--fs-small); font-weight: 800; color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); border-radius: var(--r-pill); padding: 3px 10px; min-width: 30px; text-align: center; letter-spacing: 0; }
.look2 details.fold summary .hint { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--ink-muted); letter-spacing: 0; margin-left: 4px; }
.look2 .card .what .sep { margin: 0 0.32em; font-weight: 700; color: var(--ink-muted); }
.look2 .lrow .lmain span { text-wrap: balance; }
.look2 .section > .btnrow .btn { white-space: normal; line-height: 1.15; text-align: center; }
/* Texts on the job page: yours and Mel's on the right, the customer's on the left */
.look2 .bubbles li.from-mel { margin-left: auto; border: 0; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.look2 .bubbles li { border-color: var(--edge); border-radius: 16px; }
/* The job page: Stage is a quiet row at the top of the grouped card; the visit shows the time and one plain word */
.look2 .foldrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: var(--tap); padding: 8px 0; }
.look2 .foldrow label { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-body-lg); letter-spacing: -0.01em; }
.look2 .foldrow select { width: auto; max-width: 62%; min-height: var(--tap); border-color: var(--edge); text-align: right; }
.look2 .section.visit .visit-when em { font-style: normal; font-size: var(--fs-label); font-weight: 700; color: var(--ink-muted); margin-top: 6px; }
/* The live call's words: the last three lines in full, nothing clipped; "Show earlier lines" opens the scrolling window */
.look2 .lc-words { display: grid; gap: 4px; min-width: 0; }
.look2 .lc-lines:not(.all) { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-top: 0; }
.look2 .lc-lines:not(.all) li:nth-last-child(n+4) { display: none; }
.look2 .lc-earlier { justify-self: start; color: var(--ink-muted); }
@media (min-width: 960px) { .look2 .lc-body > .lc-words { grid-column: 2; grid-row: 1 / span 2; } .look2 .lc-body { align-content: start; } }
/* The More sheet: the list scrolls inside the sheet, the title and Close stay put; Advanced has its icon and keeps its corners */
.look2 .sheet:has(> .menu) { display: flex; flex-direction: column; overflow: hidden; }
.look2 .sheet > .menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: block; }
.look2 .sheet > .menu > li + li { margin-top: 0; }
.look2 .sheet .menu li:has(> h4)::before { content: ""; width: 24px; height: 24px; flex: none; margin-right: var(--s2); background: var(--ink-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.look2 .sheet .menu li:has(> h4) h4 { flex: 1; }
.look2 #moremenu.adv-open li:has(+ li [data-feedback]), .look2 #moremenu.adv-open li:has(+ li > [data-feedback]) { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
/* Today on a wide screen, a wide card: when, who and where, Mel's note, the photo, the action; one row */
@media (min-width: 960px) {
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1fr) 64px 190px; column-gap: 20px; align-items: center; row-gap: 2px; padding: 20px var(--s3); }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .top { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; margin: 0; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .top time { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-heading); color: var(--ink); letter-spacing: -0.01em; order: -1; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .what { grid-column: 2; align-self: end; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .where, .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .tags, .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .stageline { grid-column: 2; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .melline { grid-column: 3; grid-row: 1 / span 4; margin: 0; align-self: center; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .thumbs { grid-column: 4; grid-row: 1 / span 4; margin: 0; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .act { grid-column: 5; grid-row: 1 / span 4; }
}
/* Loading placeholders: Mel's three lines */
.skel-lines { flex: 1; display: grid; gap: 10px; } .skel-lines .skel { margin: 0; }
.skel-mel { align-items: flex-start; }
@media (min-width: 960px) {
  /* The wide card: the time alone in the first column; the status chip sits above the title */
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .top { display: contents; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .top time { grid-column: 1; grid-row: 1 / span 4; align-self: center; white-space: normal; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .top .chipset { grid-column: 2; grid-row: 1; margin-bottom: 6px; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .what { grid-row: 2; align-self: auto; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .where { grid-row: 3; }
}

/* ===== LOOK 2, pass 6 ===== */
/* The job page's rail: Stage and Notes under the visit; the Stage row stacks when the screen is narrow so its value is never cut */
.look2 .foldrow { flex-wrap: wrap; }
.look2 .foldrow select { flex: 1 1 220px; max-width: 100%; text-align: left; }
.look2 .foldgroup.mine > .foldrow + details.fold { border-top: 1px solid var(--edge); }
/* Paired actions are the same height; a two-line label is centered in it */
.look2 .section > .btnrow:not(.two):not(.three) { align-items: stretch; }
.look2 .section > .btnrow:not(.two):not(.three) > .btn { height: auto; }
/* Text bubbles: every bubble hugs its words (up to three quarters of the width); the customer's left, yours and Mel's right */
.look2 .bubbles li { width: fit-content; max-width: 78%; border: 0; background: var(--canvas); }
.look2 .bubbles li.out { background: var(--brand-soft); }
/* The More sheet: the same gap between its groups, and a soft edge where the list scrolls on */
.look2 .sheet .menu li:has(> h4), .look2 .sheet .menu li:has([data-feedback]) { margin-top: 12px !important; }
.look2 .sheet > .menu { padding-bottom: 20px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
/* Mel's light in Today's header: a slow, visible breath of the sphere itself */
/* Booked!: the two buttons sit as close as any other pair */
.bkd .btn + .btn { margin-top: 12px; }
@media (min-width: 960px) {
  .look2 .lc-body { grid-template-rows: auto 1fr; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .melline > span:last-child { -webkit-line-clamp: 5; line-clamp: 5; }
}

/* ===== LOOK 2, pass 7 (Dave's notes on the checkpoint, Nov 9 night) ===== */
:root { --spring-gentle: linear(0, 0.025, 0.09, 0.18, 0.285, 0.394, 0.503, 0.605, 0.698, 0.78, 0.85, 0.907, 0.954, 0.989, 1.016, 1.034, 1.046, 1.052, 1.054, 1.053, 1.05, 1.045, 1.039, 1.033, 1.028, 1.022, 1.017, 1.012, 1.009, 1.005, 1); }
/* Dark: deep warm grays, clearly not black (Dave: "near pure black") */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .look2 { --canvas: #1b1917; --surface: #272421; --line: #423d36; --edge: #332f2a; --ink: #f6f3ed; --ink-muted: #bab3a8; --brand-soft: #2a3355; } :root:not([data-theme="light"]) .look2 .btn:not(.brand):not(.quiet) { border-color: #4d473f; background: #2f2b27; } }
:root[data-theme="dark"] .look2 { --canvas: #1b1917; --surface: #272421; --line: #423d36; --edge: #332f2a; --ink: #f6f3ed; --ink-muted: #bab3a8; --brand-soft: #2a3355; }
:root[data-theme="dark"] .look2 .btn:not(.brand):not(.quiet) { border-color: #4d473f; background: #2f2b27; }
/* Slower, softer springs with a visible overshoot: opening a job and going back, sheets up and down */
::view-transition-group(jobhero) { animation-duration: 640ms; animation-timing-function: var(--spring-gentle); }
::view-transition-old(jobhero) { animation: mel-fade 180ms linear reverse both; }
::view-transition-new(jobhero) { animation: mel-fade 220ms var(--ease-out) 150ms both; }
::view-transition-new(root) { animation: mel-fade 260ms var(--ease-out) 200ms both; }
.look2 .sheet-back > .sheet { animation: sheet-up 620ms var(--spring-gentle) both; }
.look2 main.content { transition: transform 620ms var(--spring-gentle), opacity 300ms var(--ease-out); }
.look2 .sheet-back > .sheet.settling { transition: transform 420ms var(--spring-gentle); }
/* The frosted header: the tint and blur run to the hairline, so nothing under it is readable */
.look2 { --bar: color-mix(in srgb, var(--canvas) 93%, transparent); }
.look2 .topbar, .look2 .tabbar { -webkit-backdrop-filter: saturate(140%) blur(30px); backdrop-filter: saturate(140%) blur(30px); }
/* One link color */
.look2 .lc-earlier { color: var(--brand); }
/* The More sheet sizes to what is in it */
.look2 .sheet > .menu { flex: 0 1 auto; }
/* Booked!: the words arrive with the light, not after it */
.bkd h2 { animation-delay: 380ms; } .bkd p.when { animation-delay: 460ms; } .bkd p.who { animation-delay: 540ms; } .bkd p.sub { animation-delay: 600ms; } .bkd .btn { animation-delay: 680ms; } .bkd .btn + .btn { animation-delay: 740ms; }
.bkd-back { background: color-mix(in srgb, var(--scrim) 100%, #000 45%); }
/* Every card has an anchor: the customer's photo, or an icon for the kind of job */
.look2 .card[data-job] { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; }
.look2 .card[data-job] > * { grid-column: 1 / -1; }
.look2 .card[data-job] > .anchor { grid-column: 1; grid-row: 1 / span 2; }
.look2 .card[data-job] > .top { grid-column: 2; margin-bottom: 4px; }
.look2 .card[data-job] > .what { grid-column: 2; }
.anchor { display: none; }
.look2 .anchor { display: grid; place-items: center; position: relative; width: 56px; height: 56px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); overflow: hidden; align-self: start; }
.look2 .anchor svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.look2 .anchor.photo svg { display: none; }
.look2 .anchor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.look2 .anchor b { position: absolute; right: 3px; bottom: 3px; font-size: 13px; line-height: 1; font-weight: 800; background: var(--surface); color: var(--ink); border-radius: 8px; padding: 3px 5px; }
.look2 .card[data-status="emergency"] .anchor { background: var(--danger-soft); color: var(--danger); }
.look2 .card[data-status="booked"] .anchor:not(.photo) { background: var(--success-soft); color: var(--success); }
.look2 .card[data-job] > .where { margin-top: 10px; }
/* Today's numbers: three you can read at a glance; they roll up; "0 missed" is the win */
.hero .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hero .stats > div { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--edge, var(--line)); border-radius: 16px; box-shadow: var(--shadow-1, none); padding: 14px 14px 12px; min-width: 0; }
.hero .stats b { font-family: var(--font-head); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero .stats span { color: var(--ink-muted); font-weight: 700; font-size: var(--fs-small); line-height: 1.2; }
.hero .stats .win b { color: var(--success); } .hero .stats .miss b { color: var(--danger); }
.hero .stats .skel { height: 84px; border-radius: 16px; margin: 0; }
.hero .did.sr-only { position: absolute; }
@media (min-width: 960px) {
  .hero .stats { display: flex; gap: 14px; padding-bottom: 6px; }
  .hero .stats > div { min-width: 132px; padding: 16px 18px 14px; }
  .hero .stats b { font-size: 48px; }
  /* wide cards: the anchor leads the row, the note column takes the room it has */
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child { grid-template-columns: 56px 104px minmax(0, 1fr) minmax(260px, 1.25fr) 190px; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .anchor { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .top time { grid-column: 2; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .top .chipset { grid-column: 3; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .what, .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .where, .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .tags, .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .stageline { grid-column: 3; margin-top: 0; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .melline { grid-column: 4; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .melline > span:last-child { -webkit-line-clamp: 3; line-clamp: 3; text-wrap: pretty; }
  .look2 #main.today2 :not(.tcols *) > .cards > .card:only-child > .act { grid-column: 5; }
}
/* The Stage picker: in the top card on a phone, in the rail's group on a wide screen */
.wide-only { display: none !important; }
@media (min-width: 960px) { .phone-only { display: none !important; } .wide-only { display: flex !important; } }
.look2 .foldgroup.mine > details.fold:first-of-type { border-top: 0; }
@media (min-width: 960px) { .look2 .foldgroup.mine > .foldrow + details.fold { border-top: 1px solid var(--edge); } }

/* Mel's light, the pieces that changed with the new drawing */
.orb.mini { --orb: 18px; margin: 4px; } .orb.mini .orb-arcs { display: none; } .orb.mini .orb-core { inset: 6%; }
.look2 .lc-onair .orb, .look2 .livecall .lc-onair .orb { --orb: 30px; margin: 8px 6px 8px 8px; }
.bkd-mark .orb { --orb: 64px; }