/* Opsmate app design system. System fonts, tokens on :root, dark mode via prefers-color-scheme.
 *
 * Layout     .main (column, 20px gap) .page-head .page-title .page-sub .page-actions .back-link
 *            .grid-2 .stack .stack-sm .cluster .row .spread .toolbar .section .section-head .section-title .section-sub
 *            .detail > .detail-main + .detail-side (two columns on desktop; on a phone .card-actions and .card-lead come first)
 * Surfaces   .card > .card-head (.card-title .card-meta .card-link) + .card-body | .list | .agenda; .card-sub-head
 *            .callout(.callout-red|-amber) .empty(.empty-page) > .empty-icon .empty-title .empty-text
 * Controls   .btn + .btn-primary|.btn-secondary|.btn-ghost|.btn-danger|.btn-danger-text, .btn-sm|.btn-lg, .btn-block
 *            .icon-btn .field > .label (.optional) + .input|.textarea|select.input + .field-hint; .search > .search-input
 *            .chips > .chip(.is-active) .chip-count    .link
 *            .chat-scroll (card body that scrolls on wide screens and opens at the newest message)
 * Data       .pill .pill-{blue|green|amber|red|red-solid|violet|brand|grey}  .badge (count)  .avatar(.avatar-sm|-lg) .av-0..7
 *            .table-wrap > .table (th, td, .num, .row-link, .cell-person, .cell-sub, .clamp)  .kv > .kv-row > dt + dd
 *            .list > li > .list-row (.list-icon .list-main .list-sub .list-end .list-chev)  .stats > .stat.stat-{tone}
 *            .agenda > li > .agenda-row   .req-card   .job-card   .chat > .bubble.bubble-in|out   .timeline > .tl-item.tl-{tone}
 * Feedback   .flash.flash-ok|.flash-error (toast)  dialog.sheet > .sheet-body .sheet-head .sheet-title .sheet-intro .sheet-actions
 * Utilities  .muted .money (tabular) .nowrap .only-mobile .only-desktop .visually-hidden
 */

:root {
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #F6F7F6; --surface: #FFFFFF; --surface-2: #F4F6F5; --surface-3: #ECEFEE;
  --border: #E3E7E5; --border-strong: #D0D6D3;
  --text: #101A17; --text-2: #4A5753; --text-3: #75827D;

  --brand: #0E7C66; --brand-hover: #0B6B58; --brand-press: #09594A; --brand-soft: #E7F4F0; --brand-ink: #0A6654; --on-brand: #FFFFFF;
  --blue-soft: #EBF2FE; --blue-ink: #1D4ED8; --blue: #3B82F6;
  --amber-soft: #FEF4E2; --amber-ink: #9A5B05; --amber: #E59A1A;
  --red-soft: #FDEDEC; --red-ink: #B42318; --red: #D92D20;
  --violet-soft: #F2EEFE; --violet-ink: #6941C6; --violet: #7F56D9;
  --green-soft: #E9F7EE; --green-ink: #157A3C; --green: #22A55A;
  --grey-soft: #F0F2F1; --grey-ink: #5A6662; --grey: #A3ADA9;

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 26, 23, .05);
  --shadow: 0 1px 2px rgba(16, 26, 23, .04), 0 6px 16px rgba(16, 26, 23, .06);
  --shadow-lg: 0 18px 48px rgba(16, 26, 23, .16), 0 2px 8px rgba(16, 26, 23, .06);
  --sidebar-w: 248px; --topbar-h: 60px; --tabbar-h: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0F0E; --surface: #121816; --surface-2: #19201E; --surface-3: #212A27;
    --border: #232D2A; --border-strong: #34403C;
    --text: #E9EFEC; --text-2: #A9B6B1; --text-3: #7C8A85;
    --brand: #17A286; --brand-hover: #1DB394; --brand-press: #12866F; --brand-soft: rgba(23, 162, 134, .15); --brand-ink: #55D6B7;
    --blue-soft: rgba(59, 130, 246, .16); --blue-ink: #93BBFF;
    --amber-soft: rgba(229, 154, 26, .15); --amber-ink: #F4BE5C;
    --red-soft: rgba(217, 45, 32, .18); --red-ink: #FF9A90; --red: #E5483C;
    --violet-soft: rgba(127, 86, 217, .2); --violet-ink: #C7B5FF;
    --green-soft: rgba(34, 165, 90, .16); --green-ink: #7BE0A3;
    --grey-soft: rgba(163, 173, 169, .12); --grey-ink: #A9B4B0; --grey: #5D6965;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .25);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
strong { font-weight: 650; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.icon { width: 18px; height: 18px; flex-shrink: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-2); }
.money, .num, .stat-value, .badge, .chip-count { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-ink); font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link .icon { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ shell */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); display: flex; flex-direction: column; gap: 4px; padding: 18px 14px 14px; background: var(--surface); border-right: 1px solid var(--border); z-index: 30; }
.sidebar-logo { display: flex; padding: 4px 10px 18px; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav-item { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 550; font-size: 14.5px; transition: background-color .12s, color .12s; }
.sidenav-item:hover { background: var(--surface-2); color: var(--text); }
.sidenav-item.is-active { background: var(--brand-soft); color: var(--brand-ink); }
.sidenav-item .icon { width: 19px; height: 19px; }
.sidenav-item .badge { margin-left: auto; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.sidebar-biz { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.sidebar-biz:hover { border-color: var(--border-strong); }
.sidebar-biz-name { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-biz-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 12.5px; }
.sidebar-biz-link .icon { width: 13px; height: 13px; }

.shell { margin-left: var(--sidebar-w); min-height: 100vh; min-height: 100dvh; }
/* The sidebar column, painted on the canvas so it runs the full height of long pages (and full-page captures). */
@media (min-width: 960px) {
  body.app { background: linear-gradient(to right, var(--surface) calc(var(--sidebar-w) - 1px), var(--border) 0, var(--border) var(--sidebar-w), var(--bg) 0); }
}
.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 32px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--border); }
.topbar-logo { display: none; }
.topbar-biz { min-width: 0; flex: 1; }
.topbar-biz-name { display: block; font-weight: 600; font-size: 14.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main { max-width: 1160px; margin: 0 auto; padding: 28px 32px 72px; display: flex; flex-direction: column; gap: 20px; }
.main:focus { outline: none; }

.tabbar { display: none; }

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 30px; height: 30px; }
.logo-word { font-weight: 750; font-size: 19px; letter-spacing: -.025em; color: var(--text); }

/* account menu */
.menu { position: relative; }
.menu-trigger { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px 4px 4px; border-radius: var(--radius-pill); cursor: pointer; list-style: none; color: var(--text-2); font-weight: 550; font-size: 14px; }
.menu-trigger::-webkit-details-marker { display: none; }
.menu-trigger:hover, .menu[open] .menu-trigger { background: var(--surface-3); color: var(--text); }
.menu-caret { width: 16px; height: 16px; color: var(--text-3); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 264px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50; animation: pop .14s ease-out; }
.menu-head { display: flex; flex-direction: column; padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.menu-head span { color: var(--text-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font-size: 14.5px; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--surface-2); }
.menu-item .icon { color: var(--text-3); }

@media (max-width: 959px) {
  .sidebar { display: none; }
  .shell { margin-left: 0; }
  .topbar { padding: 0 12px 0 16px; padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); background: color-mix(in srgb, var(--surface) 88%, transparent); }
  .topbar-logo { display: flex; }
  .topbar-biz-name { color: var(--text); font-weight: 650; font-size: 15.5px; }
  .menu-name, .menu-caret { display: none; }
  .menu-trigger { padding: 4px; }
  .main { padding: 20px 16px calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom)); gap: 16px; }
  .tabbar { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--border); }
  .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-3); font-size: 11px; font-weight: 600; letter-spacing: .01em; }
  .tab .icon { width: 23px; height: 23px; stroke-width: 1.9; }
  .tab.is-active { color: var(--brand-ink); }
  .tab.is-active .icon { stroke-width: 2.2; }
  .tab .badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 11px; box-shadow: 0 0 0 2px var(--surface); }
}

/* ------------------------------------------------------------------ page structure */
.page-head { display: flex; flex-direction: column; gap: 10px; }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head-text { min-width: 0; }
.page-title { font-size: 26px; line-height: 1.2; font-weight: 720; letter-spacing: -.025em; }
.page-sub { margin-top: 4px; color: var(--text-2); font-size: 15px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; color: var(--text-2); font-size: 14px; font-weight: 550; }
.back-link:hover { color: var(--text); }
.back-link .icon { width: 16px; height: 16px; }
.section { display: flex; flex-direction: column; gap: 12px; }
.section + .section { margin-top: 8px; }
.section-head { display: flex; flex-direction: column; gap: 2px; }
.section-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 680; letter-spacing: -.01em; }
.section-sub { color: var(--text-3); font-size: 14px; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-2); font-size: 12.5px; font-weight: 650; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.only-desktop { display: none; }
@media (min-width: 960px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 20px; }
  .only-desktop { display: block; }
  .only-mobile { display: none !important; }
}
@media (max-width: 959px) {
  .page-title { font-size: 23px; }
  .page-sub { font-size: 14.5px; }
}

/* ------------------------------------------------------------------ cards and lists */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.card-title { font-size: 15px; font-weight: 680; letter-spacing: -.01em; }
.card-meta { color: var(--text-3); font-size: 13.5px; }
.card-link { display: inline-flex; align-items: center; gap: 2px; color: var(--brand-ink); font-size: 14px; font-weight: 600; }
.card-link .icon { width: 16px; height: 16px; }
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-body { padding: 18px 20px 20px; }
.card-sub-head { padding: 8px 20px; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text-3); font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 959px) { .card-head { padding: 12px 16px; } .card-body { padding: 16px; } .card-sub-head { padding: 8px 16px; } }

.list > li + li { border-top: 1px solid var(--border); }
.list-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 20px; transition: background-color .12s; }
a.list-row:hover { background: var(--surface-2); }
.list-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); flex-shrink: 0; }
.list-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.list-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-sub { color: var(--text-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-end { margin-left: auto; font-weight: 650; white-space: nowrap; }
.list-chev { color: var(--text-3); width: 18px; height: 18px; }
@media (max-width: 959px) { .list-row { padding: 10px 16px; } }

.callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); border: 1px solid transparent; font-size: 14.5px; }
.callout .icon { margin-top: 1px; }
.callout-red { background: var(--red-soft); color: var(--red-ink); border-color: color-mix(in srgb, var(--red) 22%, transparent); }
.callout-amber { background: var(--amber-soft); color: var(--amber-ink); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.empty-page { padding: 64px 24px; }
.empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 16px; background: var(--brand-soft); color: var(--brand-ink); }
.empty-icon .icon { width: 26px; height: 26px; }
.empty-title { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.empty-text { max-width: 440px; color: var(--text-2); }
.empty .btn { margin-top: 8px; }

/* ------------------------------------------------------------------ buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; background: var(--surface); font-size: 14.5px; font-weight: 620; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color .12s, border-color .12s, box-shadow .12s, transform .06s; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(10, 60, 50, .2); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-primary:active { background: var(--brand-press); }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 88%, #000); }
.btn-danger-text { color: var(--red-ink); }
.btn-danger-text:hover { background: var(--red-soft); color: var(--red-ink); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13.5px; border-radius: 9px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-lg { min-height: 48px; padding: 0 20px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .65; cursor: progress; }
.btn.is-busy::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@media (pointer: coarse) { .btn-sm { min-height: 40px; } }
form { margin: 0; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--text-2); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 14px; font-weight: 620; }
.optional { color: var(--text-3); font-weight: 450; }
.input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; transition: border-color .12s, box-shadow .12s; }
.input::placeholder { color: var(--text-3); opacity: 1; }
.input:hover { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--text-3)); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.input[aria-invalid="true"] { border-color: var(--red); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); }
.textarea { min-height: 104px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.input { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2375827D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.field-hint { color: var(--text-3); font-size: 13px; }

.search { position: relative; flex: 1; max-width: 440px; min-width: 0; }
.search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.search-input { padding-left: 40px; background: var(--surface); }
@media (max-width: 959px) { .search { max-width: none; } }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-2); font-size: 14px; font-weight: 560; transition: background-color .12s, border-color .12s; }
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }
.chip-count { color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.chip.is-active .chip-count { color: inherit; opacity: .7; }
@media (min-width: 960px) { .chips { margin: 0; padding: 0; flex-wrap: wrap; } }

/* ------------------------------------------------------------------ pills, badges, avatars */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 620; line-height: 1; white-space: nowrap; background: var(--grey-soft); color: var(--grey-ink); }
.pill:not(:has(.icon))::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.pill-blue { background: var(--blue-soft); color: var(--blue-ink); }
.pill-green { background: var(--green-soft); color: var(--green-ink); }
.pill-amber { background: var(--amber-soft); color: var(--amber-ink); }
.pill-red { background: var(--red-soft); color: var(--red-ink); }
.pill-red-solid { background: var(--red); color: #fff; }
.pill-violet { background: var(--violet-soft); color: var(--violet-ink); }
.pill-brand { background: var(--brand-soft); color: var(--brand-ink); }
.pill-grey { background: var(--grey-soft); color: var(--grey-ink); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 700; line-height: 1; }

.avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 14px; font-weight: 680; letter-spacing: .02em; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-lg { width: 56px; height: 56px; font-size: 19px; }
.av-0 { background: #DDF1EB; color: #0B6152; } .av-1 { background: #E1EBFD; color: #1E4FB8; }
.av-2 { background: #ECE6FC; color: #5B3BB0; } .av-3 { background: #FCE4EA; color: #A3284A; }
.av-4 { background: #FCEED8; color: #8F5208; } .av-5 { background: #E2F4E6; color: #1B6B37; }
.av-6 { background: #DDF0F7; color: #13627E; } .av-7 { background: #E9ECEB; color: #44504C; }
@media (prefers-color-scheme: dark) {
  .av-0 { background: #143A33; color: #7FE0C6; } .av-1 { background: #172B4F; color: #9EC1FF; }
  .av-2 { background: #2A2150; color: #C9B8FF; } .av-3 { background: #44202B; color: #FFA9BD; }
  .av-4 { background: #45321A; color: #F6C77A; } .av-5 { background: #173A23; color: #8CE3A9; }
  .av-6 { background: #133846; color: #8AD5F0; } .av-7 { background: #262E2B; color: #B9C4C0; }
}

/* ------------------------------------------------------------------ tables and key-value */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.table th { position: sticky; top: 0; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text-3); font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.table th:first-child { border-top-left-radius: var(--radius); }
.table th:last-child { border-top-right-radius: var(--radius); }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; }
.row-link { position: relative; transition: background-color .1s; }
.row-link:hover td { background: var(--surface-2); }
.row-link a::after { content: ""; position: absolute; inset: 0; }
.cell-person { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.cell-person > span { display: flex; flex-direction: column; min-width: 0; }
.cell-sub { color: var(--text-3); font-size: 13px; font-weight: 450; }
.cell-job { max-width: 340px; }
.cell-job .pill { margin-top: 6px; }
.cell-when { color: var(--text-2); font-size: 14px; min-width: 150px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-2); }

.kv { display: flex; flex-direction: column; }
.kv-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-top: 1px solid var(--border); }
.kv-row:last-child { padding-bottom: 0; }
.kv dt { color: var(--text-3); font-size: 14px; }
.kv dd { font-weight: 520; overflow-wrap: anywhere; }
.kv dd .pill { margin-left: 4px; vertical-align: 1px; }
@media (max-width: 959px) { .kv-row { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; } }

/* ------------------------------------------------------------------ stats and agenda (home) */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 960px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.stat { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label icon" "value value" "sub sub"; align-items: center; row-gap: 2px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s, transform .12s; }
.stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.stat-label { grid-area: label; color: var(--text-2); font-size: 13.5px; font-weight: 560; }
.stat-icon { grid-area: icon; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; }
.stat-icon .icon { width: 17px; height: 17px; }
.stat-value { grid-area: value; margin-top: 6px; font-size: 28px; line-height: 1.15; font-weight: 720; letter-spacing: -.03em; }
.stat-sub { grid-area: sub; color: var(--text-3); font-size: 13px; }
.stat-blue .stat-icon { background: var(--blue-soft); color: var(--blue-ink); }
.stat-green .stat-icon { background: var(--green-soft); color: var(--green-ink); }
.stat-amber .stat-icon { background: var(--amber-soft); color: var(--amber-ink); }
.stat-violet .stat-icon { background: var(--violet-soft); color: var(--violet-ink); }
@media (max-width: 959px) { .stat { padding: 14px; } .stat-value { font-size: 24px; } }

.agenda > li + li { border-top: 1px solid var(--border); }
.agenda-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; transition: background-color .12s; }
.agenda-row:hover { background: var(--surface-2); }
.agenda-time { display: flex; flex-direction: column; width: 92px; white-space: nowrap; flex-shrink: 0; padding-left: 12px; border-left: 3px solid var(--brand); }
.agenda-time strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.agenda-time span { color: var(--text-3); font-size: 12.5px; }
.agenda-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.agenda-name { font-weight: 650; }
.agenda-job { color: var(--text-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-meta { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--text-3); font-size: 13px; }
.agenda-meta .icon { width: 14px; height: 14px; }
.agenda-chev { color: var(--text-3); }
@media (max-width: 959px) { .agenda-row { padding: 12px 16px; gap: 12px; } }

/* ------------------------------------------------------------------ request and job cards */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1100px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.req-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s, transform .12s; }
.req-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.req-card.is-urgent { border-left: 3px solid var(--red); padding-left: 16px; }
.req-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.req-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.req-name { font-weight: 680; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-meta { color: var(--text-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-age { align-self: flex-start; color: var(--text-3); font-size: 13px; white-space: nowrap; }
.req-job { color: var(--text-2); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.req-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.req-ref { margin-left: auto; color: var(--text-3); font: 600 12.5px var(--mono); }
.meta-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 13px; }
.meta-item .icon { width: 15px; height: 15px; }

.job-cards { display: flex; flex-direction: column; gap: 10px; }
.job-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.job-card:active { background: var(--surface-2); }
.job-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.job-card-name { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-card-text { color: var(--text-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--text-3); font-size: 13px; }

/* ------------------------------------------------------------------ job detail */
.job-head { gap: 14px; }
.job-head-row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.job-head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.job-head .page-title { overflow-wrap: anywhere; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 20px; align-items: start; }
.detail-main, .detail-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 1099px) {
  .detail { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .detail-main, .detail-side { display: contents; }
  .card-actions, .card-lead { order: -1; }
  .detail-side > .card:not(.card-actions, .card-lead) { order: 10; }
}
@media (max-width: 959px) { .job-head-row { gap: 12px; } .job-head .avatar-lg { width: 48px; height: 48px; font-size: 17px; } }
.job-text { margin-bottom: 14px; font-size: 16px; line-height: 1.55; }
.card-actions .card-body { display: flex; flex-direction: column; gap: 14px; }
.actions-lead { color: var(--text-2); font-size: 14.5px; }
.actions-lead strong { color: var(--text); }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.contact-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.contact-actions { display: flex; gap: 8px; }
@media (max-width: 559px) { .contact-actions { flex-basis: 100%; } .contact-actions .btn { flex: 1; } }
.hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 13.5px; }
.hint .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--text-3); }

/* conversation */
.chat { display: flex; flex-direction: column; gap: 4px; }
.chat-day { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px; color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.chat-day:first-child { margin-top: 0; }
.chat-day::before, .chat-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.bubble { position: relative; max-width: min(78%, 560px); padding: 8px 12px 6px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; }
.bubble-in { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.bubble-out { align-self: flex-end; background: var(--brand-soft); border-bottom-right-radius: 6px; }
.bubble-in + .bubble-out, .bubble-out + .bubble-in { margin-top: 8px; }
.bubble-who { display: block; margin-bottom: 1px; color: var(--text-3); font-size: 12px; font-weight: 650; }
.bubble-out .bubble-who { color: var(--brand-ink); }
.bubble-in + .bubble-in .bubble-who, .bubble-out + .bubble-out .bubble-who { display: none; }
.bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble-media { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--text-2); font-size: 13px; }
.bubble-media .icon { width: 14px; height: 14px; }
.bubble-time { display: block; margin-top: 2px; color: var(--text-3); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 959px) { .bubble { max-width: 88%; } }
@media (min-width: 1100px) { .chat-scroll { max-height: 640px; overflow-y: auto; overscroll-behavior: contain; } }

/* timeline */
.timeline { display: flex; flex-direction: column; }
.tl-item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--border); }
.tl-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--grey); box-shadow: 0 0 0 3px var(--surface); }
.tl-blue .tl-dot { background: var(--blue); } .tl-green .tl-dot { background: var(--green); } .tl-red .tl-dot { background: var(--red); }
.tl-amber .tl-dot { background: var(--amber); } .tl-brand .tl-dot { background: var(--brand); }
.tl-future .tl-dot { background: var(--surface); border: 2px dashed var(--border-strong); }
.tl-body { display: flex; flex-direction: column; min-width: 0; }
.tl-label { font-size: 14px; font-weight: 600; }
.tl-future .tl-label { color: var(--text-2); font-weight: 520; }
.tl-note { color: var(--text-2); font-size: 13.5px; overflow-wrap: anywhere; }
.tl-time { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ flash toasts */
.flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; border: 1px solid transparent; border-radius: var(--radius); font-size: 14.5px; font-weight: 520; }
.flash p { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.flash > .icon { margin-top: 2px; }
.flash-ok { background: var(--green-soft); color: var(--green-ink); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.flash-error { background: var(--red-soft); color: var(--red-ink); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.flash-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -3px -2px -3px 0; border: 0; border-radius: 8px; background: none; color: inherit; opacity: .7; cursor: pointer; }
.flash-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.flash-close .icon { width: 16px; height: 16px; }
.app .main > .flash { position: fixed; z-index: 90; top: calc(var(--topbar-h) + 12px); right: 24px; width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-lg); animation: toast-in .22s cubic-bezier(.2, .9, .3, 1.2); }
.app .main > .flash-ok > .icon { color: var(--green); }
.app .main > .flash-error { border-left: 3px solid var(--red); }
.app .main > .flash-error > .icon { color: var(--red); }
.flash.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
@media (max-width: 959px) { .app .main > .flash { top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px); right: 16px; left: 16px; width: auto; } }

/* ------------------------------------------------------------------ dialogs (bottom sheet on phones) */
.sheet { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: auto; }
.sheet::backdrop { background: rgba(8, 14, 12, .5); backdrop-filter: blur(2px); }
.sheet[open] { animation: pop .18s ease-out; }
.sheet[open]:not(:modal) { position: fixed; inset: 0; z-index: 100; margin: auto; height: fit-content; box-shadow: 0 0 0 100vmax rgba(8, 14, 12, .5), var(--shadow-lg); }
.sheet-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px -8px -6px 0; }
.sheet-title { font-size: 18px; font-weight: 720; letter-spacing: -.015em; }
.sheet-intro { color: var(--text-2); font-size: 14.5px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
@media (max-width: 959px) {
  .sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; }
  .sheet[open] { animation: slide-up .24s cubic-bezier(.2, .9, .3, 1); }
  .sheet[open]:not(:modal) { inset: auto 0 0 0; margin: 0; }
  .sheet-body { padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); }
  .sheet-body::before { content: ""; align-self: center; width: 40px; height: 4px; margin-bottom: 4px; border-radius: 4px; background: var(--border-strong); }
  .sheet-actions .btn { flex: 1; }
}

/* ------------------------------------------------------------------ sign-in pages */
.auth { min-height: 100vh; min-height: 100dvh; background:
  radial-gradient(900px 480px at 15% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
  radial-gradient(700px 420px at 100% 110%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%), var(--bg); }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 32px 16px; }
.auth-card { width: min(420px, 100%); padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); }
.auth-card-center { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.auth-card-center .btn { margin-top: 10px; }
.auth-brand { margin-bottom: 28px; }
.auth-title { font-size: 24px; font-weight: 740; letter-spacing: -.025em; }
.auth-sub { margin: 6px 0 24px; color: var(--text-2); }
.auth-card .flash { margin-bottom: 18px; }
.auth-foot { margin-top: 18px; color: var(--text-3); font-size: 13.5px; text-align: center; }
.auth-legal { margin-top: 24px; color: var(--text-3); font-size: 12.5px; }
.demo-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent); border-radius: var(--radius); background: var(--brand-soft); }
.demo-box-text { display: flex; flex-direction: column; flex: 1 1 180px; font-size: 13.5px; color: var(--text-2); }
.demo-box-text strong { color: var(--brand-ink); font-size: 14px; }
.demo-box .btn { flex: 0 0 auto; }
@media (max-width: 480px) { .auth-card { padding: 24px 20px; border-radius: 16px; } .demo-box .btn { flex: 1 1 100%; } }

.more-signout { margin-top: 4px; }

/* ------------------------------------------------------------------ motion */
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes slide-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------------ schedule (src/app/pages/schedule.js)
 * Week grid: each .wk-day is a grid of 52 rows (15 minutes each, 07:00 to 20:00) and 6 columns (so blocks can
 * share the day in 2 or 3 lanes, .ln-{lane}-{lanes}). Blocks are placed with .rs-N / .re-N row-line classes,
 * because the CSP forbids style attributes. Agenda: .ag (phone) with a day strip and sticky day headers.
 */
.wk { --row: 14px; --hour: calc(var(--row) * 4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.wk-head, .wk-body { display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr)); }
.wk-head { border-bottom: 1px solid var(--border); }
.wk-dayhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 10px 9px; border-left: 1px solid var(--border); min-width: 0; }
.wk-dow { color: var(--text-3); font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.wk-date { display: inline-flex; align-items: center; height: 30px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wk-count, .wk-off { flex-basis: 100%; color: var(--text-3); font-size: 12px; }
.wk-dayhead.is-today .wk-dow { color: var(--brand-ink); }
.wk-dayhead.is-today .wk-date { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font-size: 16px; }
.wk-dayhead.is-off .wk-date { color: var(--text-3); }
.wk-times, .wk-day { display: grid; grid-template-rows: repeat(52, var(--row)); }
.wk-times { padding-right: 8px; }
.wk-hour { grid-column: 1; justify-self: end; transform: translateY(-50%); color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; line-height: 1; }
.wk-hour.rs-1 { transform: translateY(3px); }
.wk-day { grid-template-columns: repeat(6, minmax(0, 1fr)); border-left: 1px solid var(--border); background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--hour)); }
.wk-day.is-today { background-color: color-mix(in srgb, var(--brand) 4%, transparent); }
.wk-day.is-off { background-color: var(--surface-2); background-image: repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--border) 70%, transparent) 7px 8px); }
.wk-day > * { grid-column: 1 / -1; min-width: 0; }
.wk-day > .ln-1-2 { grid-column: 1 / 4; } .wk-day > .ln-2-2 { grid-column: 4 / 7; }
.wk-day > .ln-1-3 { grid-column: 1 / 3; } .wk-day > .ln-2-3 { grid-column: 3 / 5; } .wk-day > .ln-3-3 { grid-column: 5 / 7; }
.wk-band { background: color-mix(in srgb, var(--brand) 6%, transparent); border-top: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.wk-job { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; margin: 1px 3px; padding: 4px 7px; overflow: hidden; border-radius: 7px; border: 1px solid transparent; border-left-width: 3px; font-size: 12.5px; line-height: 1.3; transition: box-shadow .12s, transform .12s; }
.wk-job:hover { z-index: 3; box-shadow: var(--shadow); transform: translateY(-1px); }
.wk-job:focus-visible { z-index: 3; }
.wk-job-time { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .85; }
.wk-job-name { font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-job-area { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.wk-job.is-short { flex-direction: row; align-items: baseline; gap: 6px; padding-top: 2px; padding-bottom: 2px; }
.wk-job.is-short .wk-job-area, .wk-job.is-mid .wk-job-area { display: none; }
.wk-job.is-booked { background: linear-gradient(var(--brand-soft), var(--brand-soft)) var(--surface); border-color: color-mix(in srgb, var(--brand) 22%, transparent); border-left-color: var(--brand); color: var(--brand-ink); }
.wk-job.is-booked .wk-job-name { color: var(--text); }
.wk-job.is-tentative { background: linear-gradient(var(--amber-soft), var(--amber-soft)) var(--surface); border: 1.5px dashed color-mix(in srgb, var(--amber) 70%, transparent); color: var(--amber-ink); }
.wk-job.is-done { background: linear-gradient(var(--grey-soft), var(--grey-soft)) var(--surface); border-color: var(--border); border-left-color: var(--grey); color: var(--text-3); }
.wk-job.is-done .wk-job-name { color: var(--text-2); font-weight: 600; }
.wk-now { position: relative; z-index: 2; align-self: start; height: 2px; margin-top: -1px; background: var(--red); pointer-events: none; }
.wk-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.wk-now.now-o1 { transform: translateY(calc(var(--row) / 3)); }
.wk-now.now-o2 { transform: translateY(calc(var(--row) * 2 / 3)); }
.rs-1{grid-row-start:1}.rs-2{grid-row-start:2}.rs-3{grid-row-start:3}.rs-4{grid-row-start:4}.rs-5{grid-row-start:5}.rs-6{grid-row-start:6}.rs-7{grid-row-start:7}.rs-8{grid-row-start:8}.rs-9{grid-row-start:9}.rs-10{grid-row-start:10}.rs-11{grid-row-start:11}.rs-12{grid-row-start:12}.rs-13{grid-row-start:13}.rs-14{grid-row-start:14}.rs-15{grid-row-start:15}.rs-16{grid-row-start:16}.rs-17{grid-row-start:17}.rs-18{grid-row-start:18}.rs-19{grid-row-start:19}.rs-20{grid-row-start:20}.rs-21{grid-row-start:21}.rs-22{grid-row-start:22}.rs-23{grid-row-start:23}.rs-24{grid-row-start:24}.rs-25{grid-row-start:25}.rs-26{grid-row-start:26}.rs-27{grid-row-start:27}.rs-28{grid-row-start:28}.rs-29{grid-row-start:29}.rs-30{grid-row-start:30}.rs-31{grid-row-start:31}.rs-32{grid-row-start:32}.rs-33{grid-row-start:33}.rs-34{grid-row-start:34}.rs-35{grid-row-start:35}.rs-36{grid-row-start:36}.rs-37{grid-row-start:37}.rs-38{grid-row-start:38}.rs-39{grid-row-start:39}.rs-40{grid-row-start:40}.rs-41{grid-row-start:41}.rs-42{grid-row-start:42}.rs-43{grid-row-start:43}.rs-44{grid-row-start:44}.rs-45{grid-row-start:45}.rs-46{grid-row-start:46}.rs-47{grid-row-start:47}.rs-48{grid-row-start:48}.rs-49{grid-row-start:49}.rs-50{grid-row-start:50}.rs-51{grid-row-start:51}.rs-52{grid-row-start:52}.rs-53{grid-row-start:53}
.re-1{grid-row-end:1}.re-2{grid-row-end:2}.re-3{grid-row-end:3}.re-4{grid-row-end:4}.re-5{grid-row-end:5}.re-6{grid-row-end:6}.re-7{grid-row-end:7}.re-8{grid-row-end:8}.re-9{grid-row-end:9}.re-10{grid-row-end:10}.re-11{grid-row-end:11}.re-12{grid-row-end:12}.re-13{grid-row-end:13}.re-14{grid-row-end:14}.re-15{grid-row-end:15}.re-16{grid-row-end:16}.re-17{grid-row-end:17}.re-18{grid-row-end:18}.re-19{grid-row-end:19}.re-20{grid-row-end:20}.re-21{grid-row-end:21}.re-22{grid-row-end:22}.re-23{grid-row-end:23}.re-24{grid-row-end:24}.re-25{grid-row-end:25}.re-26{grid-row-end:26}.re-27{grid-row-end:27}.re-28{grid-row-end:28}.re-29{grid-row-end:29}.re-30{grid-row-end:30}.re-31{grid-row-end:31}.re-32{grid-row-end:32}.re-33{grid-row-end:33}.re-34{grid-row-end:34}.re-35{grid-row-end:35}.re-36{grid-row-end:36}.re-37{grid-row-end:37}.re-38{grid-row-end:38}.re-39{grid-row-end:39}.re-40{grid-row-end:40}.re-41{grid-row-end:41}.re-42{grid-row-end:42}.re-43{grid-row-end:43}.re-44{grid-row-end:44}.re-45{grid-row-end:45}.re-46{grid-row-end:46}.re-47{grid-row-end:47}.re-48{grid-row-end:48}.re-49{grid-row-end:49}.re-50{grid-row-end:50}.re-51{grid-row-end:51}.re-52{grid-row-end:52}.re-53{grid-row-end:53}

.sch-summary { color: var(--text-3); }
.sch-nav { display: flex; gap: 6px; }
.btn.icon-only { width: 36px; padding: 0; }
@media (pointer: coarse) { .btn.icon-only { width: 40px; } }
.sch-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-3); font-size: 13px; }
.sch-legend li { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 959px) { .sch-legend .legend-hours { display: none; } }
.sch-key { width: 14px; height: 12px; border-radius: 4px; }
.key-booked { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); border-left: 3px solid var(--brand); }
.key-tentative { background: var(--amber-soft); border: 1.5px dashed var(--amber); }
.key-done { background: var(--grey-soft); border: 1px solid var(--border); border-left: 3px solid var(--grey); }
.key-hours { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); }

/* agenda (phone) */
.ag { --strip-h: 64px; --stick: calc(var(--topbar-h) + env(safe-area-inset-top)); display: flex; flex-direction: column; }
.ag-strip { position: sticky; top: var(--stick); z-index: 6; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; height: var(--strip-h); margin: -6px -16px 0; padding: 6px 12px; background: var(--bg); border-bottom: 1px solid var(--border); }
.ag-pick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 12px; color: var(--text); }
.ag-pick:active { background: var(--surface-3); }
.ag-pick-dow { color: var(--text-3); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.ag-pick-date { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-pick-dot { width: 5px; height: 5px; border-radius: 50%; }
.ag-pick-dot.has-jobs { background: var(--brand); }
.ag-pick.is-off .ag-pick-date { color: var(--text-3); font-weight: 600; }
.ag-pick.is-today { background: var(--brand); color: var(--on-brand); }
.ag-pick.is-today .ag-pick-dow { color: inherit; opacity: .85; }
.ag-pick.is-today .ag-pick-dot.has-jobs { background: var(--on-brand); }
.ag-day { scroll-margin-top: calc(var(--stick) + var(--strip-h) + 4px); }
.ag-head { position: sticky; top: calc(var(--stick) + var(--strip-h)); z-index: 4; display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: 14px 16px 8px; background: var(--bg); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ag-date { color: var(--text-3); font-weight: 550; }
.ag-hours { margin-left: auto; color: var(--text-3); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ag-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.ag-list > li + li { border-top: 1px solid var(--border); }
.ag-item { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; }
.ag-item:active { background: var(--surface-2); }
.ag-time { display: flex; flex-direction: column; width: 58px; flex-shrink: 0; padding-left: 10px; border-left: 3px solid var(--brand); font-variant-numeric: tabular-nums; }
.ag-time strong { font-size: 15px; }
.ag-time span { color: var(--text-3); font-size: 12.5px; }
.ag-item.is-tentative .ag-time { border-left: 3px dashed var(--amber); }
.ag-item.is-done .ag-time { border-left-color: var(--grey); }
.ag-item.is-done .ag-name, .ag-item.is-done .ag-time strong { color: var(--text-2); }
.ag-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ag-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-job { color: var(--text-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; }
.ag-meta .pill { height: 22px; font-size: 12px; }
.ag-chev { color: var(--text-3); }
.ag-day.is-empty { display: flex; align-items: center; gap: 8px; min-height: 52px; border-bottom: 1px solid var(--border); }
.ag-day.is-empty .ag-head { position: static; margin: 0; padding: 0; flex-shrink: 0; }
.ag-free { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1; min-width: 0; color: var(--text-3); font-size: 13.5px; text-align: right; }
.ag-free strong { color: var(--green-ink); font-weight: 650; }
.ag-day.is-past .ag-head, .ag-day.is-past .ag-free { opacity: .6; }
.ag-add { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--brand-ink); font-size: 13px; font-weight: 600; }
.ag-add .icon { width: 15px; height: 15px; }
.ag-day + .ag-day:not(.is-empty) { margin-top: 6px; }

/* new job and reschedule forms */
.form-card { max-width: 720px; }
.form-section { color: var(--text-3); font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.form-section:not(:first-child) { margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 559px) { .form-foot .btn { flex: 1; } .form-card .card-body { padding: 16px; } }
.input-upper { text-transform: uppercase; }
.input-upper::placeholder { text-transform: none; }
.field-error { display: flex; align-items: center; gap: 6px; color: var(--red-ink); font-size: 13px; font-weight: 550; }
.field-error .icon { width: 15px; height: 15px; }
.seg-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg-field legend { padding: 0; margin-bottom: 6px; }
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 479px) { .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text-2); font-size: 14.5px; font-weight: 580; transition: background-color .12s, border-color .12s; }
.seg-opt input:hover + span { border-color: var(--text-3); }
.seg-opt input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand); }
.seg-opt input:focus-visible + span { box-shadow: var(--focus-ring); }
.clash { display: flex; flex-direction: column; gap: 6px; }
.clash-list { display: flex; flex-direction: column; gap: 2px; color: var(--text); font-size: 14px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--text); font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.resched-now { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.resched-now > .icon { margin-top: 3px; color: var(--brand-ink); }
.resched-now > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; }
.resched-now strong { font-size: 15.5px; }
.form-card .hint { margin-top: 0; }

/* ------------------------------------------------------------------ customers and settings (pages/customers.js, pages/settings.js)
 * .cust-cards > li > .cust-card (.cust-card-main .cust-card-top .cust-card-name .cust-card-sub)  .cust-last  .cust-job .cust-job-end
 * .cust-contact .cust-danger
 * .set-section > .set-intro + .set-cards   .set-foot .set-note .set-kv .set-tags > .set-tag  .set-hours  .set-nav  .set-signout
 * .switch-row > .switch-text + input.switch[role=switch]   .input-suffix > .input + span   .field-error
 */
.cust-cards { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.cust-cards > li + li { border-top: 1px solid var(--border); }
.cust-card { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px 12px 16px; }
.cust-card:active { background: var(--surface-2); }
.cust-card-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cust-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cust-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-card-sub { color: var(--text-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-person strong .pill { margin-left: 6px; vertical-align: 1px; }
.cust-last { display: block; color: var(--text); font-weight: 520; }
.cell-when .clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 320px; }
.cust-job { align-items: center; }
.cust-job .list-main strong { font-weight: 600; }
.cust-job-end { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.cust-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 6px; }
.cust-danger { border-color: color-mix(in srgb, var(--red) 22%, var(--border)); }
.cust-danger .muted { font-size: 14px; }
.cust-danger .btn { margin-top: 6px; border: 1px solid color-mix(in srgb, var(--red) 30%, var(--border)); }
@media (max-width: 1099px) { /* one column: contact first, then jobs, the note, messages, and deletion last */
  .detail > .detail-side > .card.cust-contact-card { order: -1; }
  .detail > .detail-side > .card.cust-notes { order: 1; }
  .detail > .detail-main > .card.cust-msgs { order: 2; }
}
@media (max-width: 559px) { .cust-job { flex-wrap: wrap; row-gap: 6px; } .cust-job .list-main strong { white-space: normal; } }

.set-nav { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 5; padding-top: 4px; padding-bottom: 4px; background: var(--bg); }
.set-section { display: grid; grid-template-columns: 1fr; gap: 12px; scroll-margin-top: calc(var(--topbar-h) + 64px); }
.set-section + .set-section { margin-top: 12px; }
.set-cards { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-cards .card-body.stack { gap: 18px; }
.set-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 16px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.set-note { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--text-3); font-size: 13.5px; }
.set-note .icon { width: 16px; height: 16px; }
.set-kv .kv-row:first-child { border-top: 0; padding-top: 0; }
.set-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.set-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; font-weight: 560; }
.set-tag .muted { color: var(--text-3); font-weight: 450; }
.set-hours { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; }
.set-hours li { display: contents; }
.set-hours span { font-variant-numeric: tabular-nums; }
.set-hours span:first-child { color: var(--text-2); font-weight: 450; }
.set-signout .card-body { flex-wrap: wrap; }
.set-signout .card-title { margin-bottom: 2px; }
@media (min-width: 960px) {
  .set-nav { display: none; }
  .set-section { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
  .set-section:first-of-type { padding-top: 4px; border-top: 0; }
  .set-section + .set-section { margin-top: 4px; }
  .set-intro { position: sticky; top: calc(var(--topbar-h) + 16px); padding-top: 14px; }
}
@media (max-width: 959px) { .set-foot { padding: 12px 16px; } .set-foot .btn { flex: 1 1 auto; } .set-signout .btn { width: 100%; } }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.switch-text { display: flex; flex-direction: column; min-width: 0; }
.switch-text .list-sub { white-space: normal; }
.switch { appearance: none; position: relative; flex-shrink: 0; width: 46px; height: 28px; margin: 0; border-radius: var(--radius-pill); background: var(--border-strong); cursor: pointer; transition: background-color .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.input-suffix { display: flex; align-items: center; gap: 10px; }
.input-suffix .input { width: 96px; font-variant-numeric: tabular-nums; }
.input-suffix span { color: var(--text-2); }
.field-error { display: flex; align-items: center; gap: 6px; color: var(--red-ink); font-size: 13.5px; font-weight: 560; }
.field-error .icon { width: 15px; height: 15px; }
/* ================================================================== Quotes (pages/quotes.js, quote-public.js)
 * .qdoc       the quote as a document (app view and public page)   .qe-*  the editor   .pb-*  price book
 * .qt-*       quote page extras                                     .qp-*  public /q/<token> page (client palette via theme.css)
 */
.qt-amt { font-weight: 700; white-space: nowrap; }
.qt-note { font-size: 14px; }
.qt-doc { overflow: hidden; }
.qt-copy { display: flex; gap: 8px; }
.qt-link { font: 13px/1.4 var(--mono); color: var(--text-2); background: var(--surface-2); }
.qt-share-btns .btn { flex: 1; }
.qt-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.qt-facts dt { color: var(--text-3); font-size: 13px; }
.qt-facts dd { font-weight: 650; }

.qdoc { display: flex; flex-direction: column; padding: 28px; }
.qdoc-head { display: flex; flex-direction: column; gap: 18px; padding-bottom: 22px; }
.qdoc-head-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qdoc-eyebrow { color: var(--brand-ink); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.qdoc-title { font-size: 24px; line-height: 1.25; font-weight: 720; letter-spacing: -.02em; overflow-wrap: anywhere; }
.qdoc-for { color: var(--text-2); }
.qdoc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.qdoc-meta dt { color: var(--text-3); font-size: 12.5px; }
.qdoc-meta dd { font-size: 14px; font-weight: 620; overflow-wrap: anywhere; }
.qdoc-items { border-top: 1px solid var(--border); }
.qdoc-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.qdoc-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qdoc-desc { font-weight: 560; overflow-wrap: anywhere; }
.qdoc-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-3); font-size: 13px; }
.qdoc-kind { font-weight: 600; }
.qdoc-amt { font-weight: 650; white-space: nowrap; }
.qdoc-none { padding: 18px 0; border-top: 1px solid var(--border); }
.qdoc-totals { display: flex; flex-direction: column; gap: 6px; width: min(100%, 320px); margin: 18px 0 0 auto; }
.qdoc-totals > div { display: flex; justify-content: space-between; gap: 16px; color: var(--text-2); }
.qdoc-totals dd { font-weight: 600; color: var(--text); }
.qdoc-total { margin-top: 4px; padding-top: 12px; border-top: 2px solid var(--text); align-items: baseline; }
.qdoc-total dt { color: var(--text); font-weight: 650; }
.qdoc-total dd { font-size: 24px; font-weight: 760; letter-spacing: -.02em; }
.qdoc-notes { margin-top: 24px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); white-space: pre-line; }
.qdoc-h { margin-bottom: 6px; color: var(--text-3); font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.qdoc-fine { margin-top: 14px; color: var(--text-3); font-size: 13px; }
@media (min-width: 700px) { .qdoc-head { flex-direction: row; justify-content: space-between; align-items: flex-start; } .qdoc-meta { grid-template-columns: auto; flex-shrink: 0; min-width: 190px; gap: 8px; } .qdoc-meta > div { display: flex; justify-content: space-between; gap: 16px; } }
@media (max-width: 559px) { .qdoc { padding: 20px 16px; } .qdoc-totals { width: 100%; } .qdoc-title { font-size: 21px; } .qdoc-total dd { font-size: 22px; } }

.qe-layout { display: flex; flex-direction: column; gap: 20px; }
.qe-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 20px; align-items: start; }
.qe-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.qe-summary { position: sticky; top: 20px; }
@media (max-width: 1099px) { .qe-layout, .qe-col { gap: 16px; } .qe-bottom { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } .qe-kind select { padding: 0 26px 0 10px; font-size: 14px; background-position: right 8px center; } .qe-summary { position: static; } }
.qe-errbox { padding-bottom: 0; }
.qe-head { display: none; }
.qe-line { display: grid; grid-template-columns: minmax(0, 1.4fr) 64px minmax(0, 1fr) 40px; grid-template-areas: "desc desc desc rm" "kind qty price price" "amt amt amt amt"; gap: 10px; padding: 16px; border-bottom: 1px solid var(--border); }
.qe-line.has-error { background: color-mix(in srgb, var(--red-soft) 55%, transparent); }
.qe-cell { display: flex; flex-direction: column; min-width: 0; }
.qe-lab { margin-bottom: 4px; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.qe-desc { grid-area: desc; } .qe-kind { grid-area: kind; } .qe-qty { grid-area: qty; } .qe-price { grid-area: price; }
.qe-amt { grid-area: amt; flex-direction: row; justify-content: space-between; align-items: baseline; }
.qe-amt .qe-lab { margin: 0; }
.qe-amt output { font-weight: 680; }
.qe-remove { grid-area: rm; align-self: end; }
.qe-qty .input { text-align: right; }
.qe-money { position: relative; display: block; }
.qe-pound { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.qe-money .input { padding-left: 26px; text-align: right; }
.qe-err { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: var(--red-ink); font-size: 13.5px; font-weight: 560; }
.qe-err .icon { width: 15px; height: 15px; }
.qe-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; }
.qe-pb { display: flex; gap: 8px; flex: 1 1 220px; max-width: 360px; }
.qe-pb-select { min-height: 36px; font-size: 14px; }
.qe-pb-link { font-size: 14px; }
.qe-nojs { padding: 0 16px 14px; }
.qe [hidden], .qt-copy [hidden] { display: none !important; }
.qe-totals { display: flex; flex-direction: column; gap: 8px; }
.qe-totals > div { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); }
.qe-totals > div[hidden] { display: none; }
.qe-totals dd { color: var(--text); font-weight: 600; }
.qe-grand { padding-top: 10px; border-top: 1px solid var(--border); align-items: baseline; }
.qe-grand dt { color: var(--text); font-weight: 650; }
.qe-grand dd { font-size: 26px; font-weight: 760; letter-spacing: -.025em; }
.qe-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 560; cursor: pointer; }
.qe-check input { width: 18px; height: 18px; accent-color: var(--brand); }
@media (min-width: 1100px) {
  .qe-head, .qe-line { grid-template-columns: minmax(0, 1fr) 132px 76px 128px 104px 40px; grid-template-areas: "desc kind qty price amt rm"; gap: 10px; align-items: center; }
  .qe-head { display: grid; padding: 10px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text-3); font-size: 12.5px; font-weight: 600; }
  .qe-head > span:nth-child(3), .qe-head > span:nth-child(4), .qe-head > .num { text-align: right; }
  .qe-line { padding: 10px 20px; }
  .qe-line .qe-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .qe-amt { justify-content: flex-end; }
  .qe-remove { align-self: center; }
  .qe-tools { padding: 14px 20px; }
  .qe-nojs { padding: 0 20px 14px; }
}

.pb-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pb-row { gap: 6px; }
.pb-row .list-end { margin-right: 4px; }
.pb-edit { padding: 16px 20px; background: var(--surface-2); }
@media (max-width: 959px) { .pb-edit { padding: 16px; } }

/* "add to home screen" tip on Home (phones only) */
.install-hint[hidden], .install-hint [hidden] { display: none; }
.install-body { display: flex; align-items: flex-start; gap: 12px; padding: 14px 8px 14px 16px; }
.install-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; }
.install-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; font-size: 14px; }
.install-title { font-size: 15px; font-weight: 680; }
.install-text .icon { display: inline; width: 16px; height: 16px; vertical-align: -3px; }
.install-close { flex-shrink: 0; margin-top: -6px; }

/* public quote page */
.qp-body { min-height: 100vh; }
.qp-top { background: var(--surface); border-bottom: 1px solid var(--border); }
.qp-top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1000px; margin: 0 auto; padding: 12px 16px; }
.qp-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qp-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: var(--brand); color: var(--on-brand); font-size: 18px; font-weight: 760; }
.qp-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.qp-brand-text strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-brand-text span { color: var(--text-3); font-size: 13px; }
.qp { display: flex; flex-direction: column; gap: 16px; max-width: 1000px; margin: 0 auto; padding: 20px 16px 40px; }
.qp-narrow { max-width: 520px; padding-top: 48px; }
.qp-grid { display: flex; flex-direction: column; gap: 16px; }
.qp-side { display: flex; flex-direction: column; gap: 16px; }
.qp-doc { overflow: hidden; }
.qp-act .card-body { display: flex; flex-direction: column; gap: 12px; }
.qp-act-title { font-size: 18px; font-weight: 720; letter-spacing: -.015em; }
.qp-decline > summary { list-style: none; }
.qp-decline > summary::-webkit-details-marker { display: none; }
.qp-decline[open] > summary { display: none; }
.qp-decline form { padding-top: 4px; }
.qp-valid { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-3); font-size: 13px; }
.qp-valid .icon { width: 15px; height: 15px; }
.qp-terms { padding: 4px 4px 0; color: var(--text-2); font-size: 14px; }
.qp-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--border); text-align: center; font-size: 14px; }
.qp-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.qp-foot-note { color: var(--text-3); font-size: 12.5px; }
.qp-banner { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.qp-banner-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; }
.qp-banner-icon .icon { width: 22px; height: 22px; }
.qp-banner-title { margin-bottom: 2px; font-size: 18px; font-weight: 720; letter-spacing: -.015em; }
.qp-banner p { color: var(--text-2); }
.qp-banner-ok { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); background: var(--brand-soft); }
.qp-banner-ok .qp-banner-icon { background: var(--brand); color: var(--on-brand); }
.qp-banner-warn .qp-banner-icon { background: var(--amber-soft); color: var(--amber-ink); }
.qp-banner-muted .qp-banner-icon { background: var(--surface-3); color: var(--text-2); }
.qp-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--text-2); font-size: 14px; }
.qp-preview > span { flex: 1 1 240px; }
.qp-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 24px; text-align: center; }
.qp-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); color: var(--text-2); }
.qp-state-title { font-size: 20px; font-weight: 720; }
@media (max-width: 479px) { .qp-call span { display: none; } .qp-call { width: 40px; padding: 0; } }
/* phones: the answer first. The quote keeps Accept in reach; the invoice shows how to pay before the lines. */
.qp-bar { position: fixed; inset: auto 0 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.qp-bar > div { display: flex; flex-direction: column; line-height: 1.2; }
.qp-bar-label { color: var(--text-3); font-size: 12.5px; }
.qp-bar strong { font-size: 19px; }
.qp-body:has(.qp-bar) .qp { padding-bottom: 96px; }
.qp-body:has(.qp-decline[open]) .qp-bar { display: none; }
@media (max-width: 899px) { .inv-grid .qp-side { order: -1; } }
@media (min-width: 900px) { .qp-bar { display: none; } .qp-body:has(.qp-bar) .qp { padding-bottom: 56px; } }
@media (min-width: 900px) {
  .qp { padding: 32px 24px 56px; gap: 20px; }
  .qp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
  .qp-side { position: sticky; top: 24px; }
}

/* ------------------------------------------------------------------ admin console (/admin) */
.admin .sidebar-logo { align-items: center; gap: 10px; }
.admin .sidebar-foot form { display: contents; }
.admin .sidebar-foot button.sidenav-item { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.admin-signout { display: none; }
.tabbar.tabbar-3 { grid-template-columns: repeat(3, 1fr); }
.admin-client { display: flex; flex-direction: column; }
.admin-client .card-body { flex: 1; }
.admin-client .card-title { min-width: 0; overflow-wrap: anywhere; }
.admin .card .kv-row:first-child { border-top: 0; padding-top: 0; }
.admin-client .kv-row, .admin .card .kv-row { grid-template-columns: 130px minmax(0, 1fr); }
.admin-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.admin-links .link { font-weight: 560; overflow-wrap: anywhere; }
.admin-links .icon { width: 14px; height: 14px; flex-shrink: 0; }
.admin-user { display: block; }
.admin-user .muted { font-weight: 450; font-size: 13.5px; }
.admin-card-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
.admin-card-foot-flush { padding: 0; border-top: 0; }
.admin-user-row { flex-wrap: wrap; }
.admin-user-row .list-main strong { white-space: normal; }
.admin-row-actions { display: flex; gap: 6px; margin-left: auto; }
.admin-reveal { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.admin-reveal .card-title { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.admin-reveal .card-title .icon { color: var(--brand-ink); flex-shrink: 0; }
.admin-password code { display: inline-block; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px dashed var(--border-strong); font-family: var(--mono); font-size: 22px; font-weight: 650; letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; }
.admin code { font-family: var(--mono); font-size: .92em; }
.admin-mask { font-family: var(--mono); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.admin-conv .btn { flex-shrink: 0; }
.admin-conv .list-main strong, .admin-conv .list-sub { white-space: normal; overflow-wrap: anywhere; }
.admin-flag { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px; }
.admin-flag-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; }
.admin-flag-time { margin-left: auto; }
.admin-flag-detail { color: var(--text-2); font-size: 14px; overflow-wrap: anywhere; }
.admin-big { font-size: 17px; }
.admin-big strong { font-size: 22px; font-weight: 720; }
@media (max-width: 959px) {
  .admin-signout { display: block; }
  .admin-flag { padding: 12px 16px; }
  .admin-card-foot { padding: 12px 16px; }
  .admin-card-foot-flush { padding: 0; }
  .admin-client .kv-row, .admin .card .kv-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .admin-row-actions { width: 100%; margin-left: 50px; }
  .admin-flag-time { margin-left: 0; }
}
.tabbar.tabbar-4 { grid-template-columns: repeat(4, 1fr); }
.admin-thumb { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.admin-photo .list-main code { overflow-wrap: anywhere; white-space: normal; }
.admin-json { min-height: 420px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.admin-errors { margin: 6px 0 0; padding-left: 18px; }
.admin .card-foot form, .admin-card-foot form { display: inline-flex; }
.admin input.input[type="file"] { padding: 8px 12px; height: auto; }
/* ================================================================== Google reviews (src/reviews/ui.js) */
.rv-card .actions-lead { margin-bottom: 12px; }
.rv-status { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 9px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13.5px; }
.rv-status .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.rv-stat { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.rv-stat-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--amber-soft); color: var(--amber-ink); }
.rv-stat-icon .icon { width: 18px; height: 18px; }
.rv-stat-main { flex: 1; min-width: 0; }
.rv-stat-title { font-size: 15px; font-weight: 680; letter-spacing: -.01em; }
.rv-stat-sub { color: var(--text-3); font-size: 13px; }
.rv-stat-nums { display: flex; gap: 22px; margin: 0; }
.rv-stat-nums div { display: flex; flex-direction: column; align-items: flex-end; }
.rv-stat-nums dt { color: var(--text-2); font-size: 12.5px; font-weight: 560; }
.rv-stat-nums dd { margin: 0; font-size: 22px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rv-stat-rate { margin-left: 6px; color: var(--text-3); font-size: 13px; font-weight: 560; letter-spacing: 0; }

/* ---------- Admin: site health (src/health/admin-page.js) ---------- */
.tabbar.tabbar-4 { grid-template-columns: repeat(4, 1fr); }
.tabbar.tabbar-5 { grid-template-columns: repeat(5, 1fr); }
.tabbar.tabbar-6 { grid-template-columns: repeat(6, 1fr); }
.tabbar.tabbar-6 .tab-label { font-size: 10.5px; }
.hl-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm, 10px); background: var(--red); color: #fff; font-size: 14.5px; }
.hl-banner .icon { flex-shrink: 0; }
.hl-banner:hover { filter: brightness(1.06); }
.hl-banner-cta { margin-left: auto; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.stat-red .stat-icon { background: var(--red-soft); color: var(--red-ink); }
.hl-pill { white-space: nowrap; }
.hl-pill .icon { width: 13px; height: 13px; }
.hl-row { align-items: flex-start; }
.hl-row .list-main { gap: 2px; }
.hl-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hl-name strong { min-width: 0; }
.hl-name .pill { flex-shrink: 0; }
.hl-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.hl-row .list-chev { align-self: center; }
.hl-top { font-size: 13.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hl-top-fail { color: var(--red-ink); }
.hl-history { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hl-spark { max-width: 100%; height: 28px; }
.hl-bar-ok { fill: var(--green); }
.hl-bar-warn { fill: var(--amber); }
.hl-bar-fail { fill: var(--red); }
.hl-run { border-top: 1px solid var(--border); }
.hl-opt { display: flex; align-items: flex-start; gap: 10px; font-weight: 560; cursor: pointer; }
.hl-opt input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand); }
.hl-opt .field-hint { display: block; font-weight: 400; margin-top: 2px; }
.hl-check { display: flex; flex-direction: column; gap: 6px; padding: 14px 20px; }
.hl-check-top { display: flex; align-items: center; gap: 10px; }
.hl-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.hl-dot .icon { width: 14px; height: 14px; }
.hl-dot-ok { background: var(--green-soft); color: var(--green-ink); }
.hl-dot-warn { background: var(--amber-soft); color: var(--amber-ink); }
.hl-dot-fail { background: var(--red-soft); color: var(--red-ink); }
.hl-detail { margin-left: 34px; color: var(--text-2); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.hl-fix { margin-left: 34px; font-size: 14px; }
.hl-note { font-size: 14px; }
@media (max-width: 959px) {
  .hl-check { padding: 12px 16px; }
  .hl-detail, .hl-fix { margin-left: 0; }
}

/* ------------------------------------------------------------------ onboarding wizard and owner questionnaire */
.wz { max-width: 860px; }
.wz-progress { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.wz-count { font-size: 13px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; display: flex; flex-wrap: wrap; gap: 8px; }
.wz-count-title { color: var(--text); text-transform: none; letter-spacing: 0; }
.wz-steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.wz-step { flex: 1; min-width: 0; }
.wz-step > a, .wz-step > span { display: flex; flex-direction: column; gap: 6px; color: var(--text-3); font-size: 12px; font-weight: 600; text-decoration: none; }
.wz-step > a::before, .wz-step > span::before { content: ""; height: 6px; border-radius: 99px; background: var(--surface-3); }
.wz-step.is-done > a::before, .wz-step.is-done > span::before { background: color-mix(in srgb, var(--brand) 55%, var(--surface-3)); }
.wz-step.is-current > a::before, .wz-step.is-current > span::before { background: var(--brand); }
.wz-step.is-current > a, .wz-step.is-current > span { color: var(--text); }
.wz-step > a:hover .wz-step-t { text-decoration: underline; }
.wz-step-n { display: none; }
.wz-step-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 959px) { .wz-step-t { display: none; } }
.wz-head { display: flex; flex-direction: column; gap: 4px; }
.wz-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.wz-errors { margin: 6px 0 0; padding-left: 18px; }
.wz-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.wz-group > legend { padding: 0; margin-bottom: 2px; }
.wz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wz-cards-2 { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.wz-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-width: 0; transition: border-color .12s, box-shadow .12s, background-color .12s; }
.wz-card:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--border-strong)); }
.wz-card:has(.wz-radio:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }
.wz-card:has(.wz-radio:focus-visible) { box-shadow: var(--focus-ring); }
.wz-card-row { flex-direction: row; align-items: center; }
.wz-radio { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--brand); }
.wz-trades .wz-radio, .wz-themes .wz-radio { position: absolute; top: 12px; right: 12px; }
.wz-trade-icon { width: 30px; height: 30px; color: var(--brand-ink); }
.wz-card-label { font-weight: 650; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.wz-card-sub { font-size: 12.5px; color: var(--text-3); }
.wz-swatches { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); width: calc(100% - 26px); }
.wz-swatch { flex: 1; height: 30px; }
.wz-hours { display: flex; flex-direction: column; gap: 14px; }
.wz-hours:has(input[value="custom"]:not(:checked)) .wz-days { display: none; }
.wz-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wz-days > .field-hint { grid-column: 1 / -1; }
.wz-day { display: flex; flex-direction: column; gap: 4px; }
.wz-rows { display: flex; flex-direction: column; gap: 12px; }
.wz-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.wz-row:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 640px) { .wz-row-2 { grid-template-columns: 1fr 1fr; } .wz-row-acc { grid-template-columns: 1fr 1fr auto; align-items: end; } }
.wz-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14.5px; min-width: 0; }
.wz-check input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--brand); }
.wz-check > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wz-check .list-sub { white-space: normal; }
.wz-verify { align-self: center; }
.wz-acc-state { justify-self: start; align-self: center; }
.wz-svcs, .wz-faqs, .wz-photos, .wz-checklist, .wz-sum-list { list-style: none; margin: 0; padding: 0; }
.wz-svcs { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); }
.wz-svc { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.wz-svc:last-child { border-bottom: 0; }
.wz-more { margin-left: 30px; font-size: 14px; }
.wz-more summary { color: var(--brand-ink); font-weight: 600; cursor: pointer; width: max-content; max-width: 100%; }
.wz-more[open] summary { margin-bottom: 8px; }
.wz-faqs { display: flex; flex-direction: column; gap: 14px; }
.wz-faq { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.wz-short { min-height: 76px; }
.wz-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.wz-photo { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.wz-photo img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.wz-photo .wz-check { font-size: 13.5px; }
.wz-upload .label { display: flex; align-items: center; gap: 6px; }
.wz-upload .input { padding: 9px 12px; }
.wz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.wz-back { order: 1; }
.wz-save { order: 2; margin-left: auto; }
.wz-next, .wz-final { order: 3; }
@media (max-width: 559px) { .wz-foot { padding: 12px 16px; } .wz-next, .wz-final { flex: 1 1 100%; order: 0; } }
.wz-preview-wrap { display: flex; flex-direction: column; gap: 8px; }
.wz-preview { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
@media (max-width: 559px) { .wz-preview { height: 420px; } }
.wz-checklist { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); }
.wz-ck { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.wz-ck:last-child { border-bottom: 0; }
.wz-ck-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.wz-ck-dot .icon { width: 14px; height: 14px; }
.wz-ck.is-ok .wz-ck-dot { background: var(--green-soft); color: var(--green-ink); }
.wz-ck.is-warn .wz-ck-dot { background: var(--amber-soft); color: var(--amber-ink); }
.wz-ck.is-fail .wz-ck-dot { background: var(--red-soft); color: var(--red-ink); }
.wz-ck-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wz-ck-main .list-sub { white-space: normal; }
.wz-summary { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .wz-summary { grid-template-columns: 1fr 1fr; } }
.wz-sum { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.wz-sum-title { font-size: 14px; font-weight: 680; }
.wz-sum > .muted { margin-top: 6px; font-size: 13.5px; }
.wz-sum-list { margin-top: 6px; font-size: 13.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.wz-section-title { font-size: 16px; font-weight: 680; }
.wz-copy { font-size: 14.5px; min-height: 150px; }
#welcome-text { min-height: 440px; }
.wz-link { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; word-break: break-all; }
.wz-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wz-banner { margin-bottom: 16px; }
.wz-banner ul { margin: 4px 0 0; padding-left: 18px; }
/* the owner questionnaire: a simple page with no app navigation */
.ob { min-height: 100vh; min-height: 100dvh; background: var(--bg); }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; max-width: 860px; margin: 0 auto; }
.ob-main { max-width: 860px; margin: 0 auto; padding: 0 16px 48px; }
.ob-hello { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 18px; }
.ob-hello h1 { font-size: 24px; font-weight: 720; letter-spacing: -.02em; }
.ob-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
/* theme swatches: generated from THEMES (src/onboarding/ui.js swatchCss); a test keeps them in step */
.sw-harbour-ground { background: #F3F6F9; }
.sw-harbour-card { background: #FFFFFF; }
.sw-harbour-ink { background: #0D1B2A; }
.sw-harbour-accent { background: #C2410C; }
.sw-harbour-accent2 { background: #0B6E99; }
.sw-workshop-ground { background: #F4EFE6; }
.sw-workshop-card { background: #FBF8F2; }
.sw-workshop-ink { background: #1D2A2E; }
.sw-workshop-accent { background: #0F5C63; }
.sw-workshop-accent2 { background: #6B2D5C; }
.sw-forest-ground { background: #F1F4EE; }
.sw-forest-card { background: #FFFFFF; }
.sw-forest-ink { background: #16251B; }
.sw-forest-accent { background: #2F6B3A; }
.sw-forest-accent2 { background: #8A4B0F; }
.sw-brick-ground { background: #FAF5F0; }
.sw-brick-card { background: #FFFFFF; }
.sw-brick-ink { background: #2A1A14; }
.sw-brick-accent { background: #A63A1F; }
.sw-brick-accent2 { background: #2D5B6B; }
.sw-navy-ground { background: #F5F3EC; }
.sw-navy-card { background: #FFFDF7; }
.sw-navy-ink { background: #10213A; }
.sw-navy-accent { background: #1D3F72; }
.sw-navy-accent2 { background: #7D5A0E; }
.sw-indigo-ground { background: #F4F5FA; }
.sw-indigo-card { background: #FFFFFF; }
.sw-indigo-ink { background: #111427; }
.sw-indigo-accent { background: #4338CA; }
.sw-indigo-accent2 { background: #B4235A; }
.sw-plum-ground { background: #F7F2F5; }
.sw-plum-card { background: #FFFFFF; }
.sw-plum-ink { background: #241626; }
.sw-plum-accent { background: #7A2E6E; }
.sw-plum-accent2 { background: #2E6B5E; }
.sw-steel-ground { background: #EEF1F3; }
.sw-steel-card { background: #FBFCFD; }
.sw-steel-ink { background: #1B242C; }
.sw-steel-accent { background: #335C81; }
.sw-steel-accent2 { background: #A23B2C; }
.set-link-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Prospect (pitch) sites: builder, pitch kit, pipeline and the owner's claim pages */
.pv-pill { margin-left: 6px; vertical-align: middle; font-size: 11.5px; }
.pv-grid { gap: 14px; }
.pv-stats { color: var(--violet-ink); }
.pv-pipe .card-body { padding-top: 6px; }
.pv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pv-step a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none; position: relative; }
.pv-step a:hover { border-color: var(--border-strong); }
.pv-n { font-size: 22px; font-weight: 720; letter-spacing: -.02em; }
.pv-l { font-size: 13px; color: var(--text-2); }
.cl-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); }
.cl-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.cl-row + .cl-row { border-top: 1px solid var(--border); }
.cl-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-value { font-size: 15px; overflow-wrap: anywhere; }
.cl-pill { align-self: flex-start; font-size: 11.5px; }
.cl-change { flex-shrink: 0; padding: 4px 0; }
@media (max-width: 520px) { .pv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ------------------------------------------------------------------ invoices (/app/invoices and the public /i/<token> page; the document and editor reuse .qdoc and .qe) */
.inv-due { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 4px; }
.inv-due-amt { font-size: 28px; font-weight: 760; letter-spacing: -.02em; }
.inv-h { font-size: 14px; font-weight: 680; color: var(--text-2); }
.inv-pay-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.inv-pay-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.inv-pay-row + .inv-pay-row { border-top: 1px solid var(--border); }
.inv-pay-row dt { color: var(--text-3); font-size: 12.5px; }
.inv-pay-row dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; font-size: 17px; font-weight: 650; }
.inv-pay-row dd > span { min-width: 0; overflow-wrap: anywhere; }
.inv-copy { flex-shrink: 0; min-width: 72px; }
.inv-copy[hidden] { display: none; }
.inv-pay-text { white-space: pre-line; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-weight: 560; }