:root {
  color-scheme: light;
  --green: #00ac46;
  --green-dark: #00702d;
  --green-soft: #ddfae5;
  --ink: #23282a;
  --muted: #6c7176;
  --faint: #8e9296;
  --line: #efefef;
  --field-line: #dcdfdc;
  --canvas: #f7f7f7;
  --danger: #b4002e;
  --danger-soft: #fde7ea;
  --warning: #c98a16;
  --warning-soft: #fef1dd;
  --shadow: 0 1px 2px rgba(35, 40, 42, .05);

  /* One spacing scale for the whole file. Every padding, margin and gap below is a step of it;
     the only literals left are the 1 to 2 px offsets that align a glyph to a line of text. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* One size per role. Nothing is smaller than --t-caption except an eyebrow, which is also what
     a table heading and a data-label caption use. */
  --t-eyebrow: 11px;
  --t-caption: 12px;
  --t-subtitle: 13px;
  --t-body: 14px;
  --t-title: 16px;
  --t-amount: 18px;
  --t-heading: 20px;
  --t-metric: 22px;
  --t-page: clamp(23px, 3vw, 29px);

  --radius-control: 8px;
  --radius-card: 12px;
  --radius-panel: 18px;
  --radius-pill: 999px;

  /* One height for every control, and the phone minimum scripts/mobile-audit.mjs measures. */
  --control-height: 40px;
  --control-height-compact: 32px;
  --tap-height: 44px;

  font-family: Inter, Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-size: var(--t-body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { border: 0; }
a { color: var(--green); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ui-icon { width: 16px; height: 16px; display: block; flex: none; }
.placeholder-icon { width: 28px; height: 28px; display: block; }

/* One shared look for every control. A select and a date input carry the same height, border and
   radius as a text input, and a checkbox and a radio are a 20 px accent-coloured box. The select
   draws its own chevron: style-src carries no 'unsafe-inline' but img-src allows a data URI. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  border: 1px solid var(--field-line);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--ink);
  font-size: var(--t-body);
  outline: none;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select { height: var(--control-height); padding: 0 var(--s3); }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s6);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236c7176' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right var(--s3) center / 12px 8px;
}
textarea { min-height: 72px; padding: var(--s2) var(--s3); resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 172, 70, .12); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }

input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid #c3c8c4;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: .15s ease;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked {
  border-color: var(--green);
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 7.3 5.9 10 11 4.4'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
input[type="radio"]:checked {
  border-color: var(--green);
  background: #fff radial-gradient(circle at center, var(--green) 0 5px, transparent 5px);
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 172, 70, .22);
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .55; cursor: not-allowed; }

.loading-screen { min-height: 100vh; display: grid; place-items: center; color: var(--green-dark); }
.spinner { width: 28px; height: 28px; border: 3px solid var(--green-soft); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-screen { min-height: 100vh; padding: max(var(--s6), env(safe-area-inset-top)) var(--s4) max(var(--s6), env(safe-area-inset-bottom)); display: grid; place-items: center; background: linear-gradient(180deg, #e9ffec 0%, #c9efc4 58%, #a9d9d6 100%); }
.login-wrap { width: min(100%, 392px); }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }
.vorwerk-logo { display: block; width: 120px; height: auto; }
.brand-product { display: flex; flex-direction: column; line-height: 1.2; }
.brand-product strong { color: var(--green); font-size: var(--t-caption); }
.brand-product span { color: var(--faint); font-size: var(--t-eyebrow); margin-top: 2px; }
.login-brand { justify-content: center; margin-bottom: var(--s5); }
.login-brand .brand { align-items: center; }
.login-brand .vorwerk-logo { width: 180px; }
.login-card { background: #fff; border-radius: var(--radius-panel); padding: var(--s5); box-shadow: 0 8px 28px rgba(20, 20, 30, .1); }
.login-card h1 { margin: 0 0 var(--s1); }
.login-card > p { color: var(--muted); margin: 0 0 var(--s5); font-size: var(--t-subtitle); }
.login-foot { text-align: center; color: var(--muted); margin-top: var(--s4); font-size: var(--t-caption); }

.field { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.field label { color: var(--muted); font-size: var(--t-eyebrow); letter-spacing: .08em; text-transform: uppercase; font-weight: 650; }
.field input, .field select, .field textarea { width: 100%; }
.field input[type="checkbox"], .field input[type="radio"] { width: 20px; }
.recipe-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s3) var(--s4); padding: var(--s3); }
.recipe-list .checkbox { color: var(--ink); align-items: center; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field-row.address { grid-template-columns: 1fr 110px; }
.field-row.address-3 { grid-template-columns: 1fr 110px 1fr; }
.field .button-row select { width: auto; flex: 1; min-width: 160px; }
.error-text { color: var(--danger); font-size: var(--t-caption); line-height: 1.45; margin: var(--s3) 0; }
/* The slot stays in the markup so a keystroke can empty it; empty, it takes no room. */
.error-text:empty { display: none; margin: 0; }

/* Four buttons and one compact modifier. They share a height, a radius and a padding, so a row of
   them lines up wherever the markup puts them. */
.primary, .secondary, .ghost, .danger-link, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* An anchor that borrows these classes is a button, not a line of prose: the worklist's Call
     link and the share panel's WhatsApp link were underlined where a button never is. */
  text-decoration: none;
  gap: var(--s2);
  min-height: var(--control-height);
  padding: 0 var(--s4);
  border-radius: var(--radius-control);
  font-size: var(--t-body);
  font-weight: 650;
  cursor: pointer;
  transition: .15s ease;
}
.primary { background: var(--green); color: #fff; }
.primary:hover { background: #009a3e; }
.primary:disabled { background: #b9c1bc; cursor: wait; }
.secondary { background: #fff; color: var(--ink); border: 1px solid var(--field-line); }
.secondary:hover { border-color: #b9c1bc; }
.ghost { background: transparent; color: var(--muted); }
.ghost:hover { color: var(--ink); }
.danger-link { padding: 0 var(--s2); background: none; color: var(--danger); }
.danger-link:hover { background: var(--danger-soft); }
.icon-button { width: var(--control-height); min-width: var(--control-height); padding: 0; background: var(--canvas); font-size: var(--t-title); }
.compact-button { min-height: var(--control-height-compact); padding: 0 var(--s3); font-size: var(--t-caption); }
.full { width: 100%; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: #fff; border-right: 1px solid var(--line); padding: var(--s5) var(--s3) var(--s4); display: flex; flex-direction: column; overflow-y: auto; }
.sidebar .brand { padding: 0 var(--s2) var(--s5); }
.nav-label { padding: var(--s4) var(--s2) var(--s2); color: var(--faint); font-size: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; }
.nav-button { width: 100%; min-height: var(--control-height); display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s3); border-radius: var(--radius-control); background: transparent; color: var(--muted); cursor: pointer; text-align: left; }
.nav-button.active { background: var(--green-soft); color: var(--green-dark); font-weight: 650; }
.nav-icon { width: 20px; display: grid; place-items: center; }
.user-card { margin-top: auto; padding: var(--s4) var(--s2) 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--s3); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); display: grid; place-items: center; font-size: var(--t-eyebrow); font-weight: 700; flex: none; }
.user-name { font-size: var(--t-caption); font-weight: 650; }
.user-role { font-size: var(--t-eyebrow); color: var(--faint); margin-top: 2px; }
.logout { width: var(--control-height-compact); height: var(--control-height-compact); margin-left: auto; color: var(--faint); background: none; cursor: pointer; display: grid; place-items: center; }

.main { min-width: 0; }
.topbar { min-height: 57px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s5); position: sticky; top: 0; z-index: 8; }
.crumb { color: var(--muted); font-size: var(--t-caption); }
.topbar-spacer { flex: 1; }
.persona-chip { min-height: 28px; padding: 0 var(--s3); border-radius: var(--radius-pill); background: var(--green-soft); color: var(--green-dark); display: flex; align-items: center; gap: var(--s2); font-size: var(--t-eyebrow); font-weight: 650; white-space: nowrap; }
.notification-button { position: relative; width: var(--control-height-compact); height: var(--control-height-compact); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--canvas); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.notification-button > span { position: absolute; right: -4px; top: -6px; min-width: 16px; height: 16px; padding: 0 var(--s1); border-radius: var(--radius-pill); background: #d80037; color: #fff; display: grid; place-items: center; font-size: var(--t-eyebrow); font-weight: 800; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.count { min-width: 18px; height: 18px; padding: 0 var(--s1); margin-left: var(--s1); border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: #d80037; color: #fff; font-size: var(--t-eyebrow); }
.mobile-brand { display: none; }
.mobile-more-button { display: none; }
.nav-scrim { display: none; }

.page { padding: clamp(var(--s4), 3vw, var(--s6)); max-width: 1280px; margin: 0 auto; }
.page-head { display: flex; gap: var(--s4); align-items: end; justify-content: space-between; margin-bottom: var(--s5); }
.page-head p { max-width: 74ch; }
.back-to-catalogue { color: var(--green); padding-left: 0; display: flex; align-items: center; gap: var(--s2); }
.price-context, .checkout-page-head small { color: var(--faint); font-size: var(--t-caption); }
.checkout-page-head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s3); }
.eyebrow { color: var(--green-dark); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: var(--s2); }
h1 { margin: 0; font-size: var(--t-page); letter-spacing: -.025em; }
.subtitle { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--t-subtitle); line-height: 1.5; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.notice { margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius-card); font-size: var(--t-caption); line-height: 1.45; background: var(--warning-soft); color: #81570b; }
.notice.success { background: var(--green-soft); color: var(--green-dark); }
.notice.danger { background: var(--danger-soft); color: var(--danger); }

.order-context { min-height: 60px; margin-bottom: var(--s4); padding: var(--s4); display: flex; align-items: center; gap: var(--s3); }
.order-context strong, .order-context small { display: block; }
.order-context strong { font-size: var(--t-subtitle); }
.order-context small { color: var(--faint); font-size: var(--t-eyebrow); margin-top: var(--s1); }
.context-spacer { flex: 1; }
.source-chip { min-height: 26px; padding: 0 var(--s3); border-radius: var(--radius-pill); background: var(--green-soft); color: var(--green-dark); display: flex; align-items: center; gap: var(--s2); font-size: var(--t-eyebrow); white-space: nowrap; }
.source-chip.offline { background: var(--warning-soft); color: var(--warning); }
.source-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.catalogue-layout { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.catalogue-side { overflow: hidden; }
.catalogue-side > div { padding: var(--s4); border-bottom: 1px solid var(--line); }
.catalogue-side > div strong, .catalogue-side > div small { display: block; }
.catalogue-side > div strong { font-size: var(--t-caption); }
.catalogue-side > div small { color: var(--faint); font-size: var(--t-eyebrow); line-height: 1.4; margin-top: var(--s1); }
.catalogue-side nav { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); display: grid; gap: var(--s1); }
.catalogue-side nav button { min-height: var(--control-height-compact); padding: 0; background: none; text-align: left; color: var(--muted); font-size: var(--t-caption); cursor: pointer; }
.catalogue-side nav button.active { color: var(--ink); font-weight: 700; }
.catalogue-side nav button span { color: var(--faint); float: right; }
.catalogue-side > p { margin: 0; padding: var(--s3) var(--s4); color: var(--muted); font-size: var(--t-caption); }
.catalogue-toolbar { display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: var(--s3); margin-bottom: var(--s4); }
.search { position: relative; }
.search input, .catalogue-toolbar select { width: 100%; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.product { overflow: hidden; display: flex; flex-direction: column; }
.product-image { width: 100%; aspect-ratio: 1; background: repeating-linear-gradient(135deg,#dcdfdc 0 9px,#f7f7f7 9px 18px); position: relative; display: grid; place-items: center; overflow: hidden; }
.product-image.has-image { background: #fff; }
.product-image img { width: 100%; height: 100%; object-fit: contain; }
.product-glyph { opacity: .36; }
.product-glyph .ui-icon { width: 48px; height: 48px; }
.badge { position: absolute; top: var(--s3); left: var(--s3); padding: var(--s1) var(--s2); border-radius: 5px; background: var(--green); color: #fff; font-size: var(--t-eyebrow); text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.product-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.product-title { font-size: var(--t-body); font-weight: 700; line-height: 1.35; }
.sku { color: var(--faint); font-size: var(--t-caption); margin-top: var(--s1); }
.product-description { color: var(--muted); font-size: var(--t-caption); line-height: 1.4; min-height: 16px; margin: var(--s3) 0; }
.price { font-size: var(--t-amount); font-weight: 750; }
.was { color: var(--faint); text-decoration: line-through; font-size: var(--t-caption); margin-left: var(--s2); }
/* 84 px of stepper left 109 px for the button inside a 233 px card, and "Add to basket" wrapped
   onto a second line. The stepper gives up 8 px and the button its wide side padding. */
.product-actions { margin-top: var(--s3); display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s2); }
.product-actions .primary { padding: 0 var(--s2); white-space: nowrap; }
.quantity { height: var(--control-height); border: 1px solid var(--field-line); border-radius: var(--radius-control); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; text-align: center; }
.quantity button { height: 100%; background: none; cursor: pointer; color: var(--muted); }

.two-column { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; }
.basket-list { overflow: hidden; }
.basket-row { display: grid; grid-template-columns: 60px minmax(150px, 1fr) 100px 100px var(--s6); gap: var(--s3); padding: var(--s4); align-items: center; border-top: 1px solid var(--line); }
.basket-row:first-child { border-top: 0; }
.basket-thumb { width: 54px; height: 45px; border-radius: var(--radius-control); background: linear-gradient(145deg, #f4f5f4, #dce8df); display: grid; place-items: center; overflow: hidden; }
.basket-thumb img { width: 100%; height: 100%; object-fit: cover; }
.line-title { font-size: var(--t-subtitle); font-weight: 650; }
.line-total { text-align: right; font-weight: 650; }
.basket-footer { border-top: 1px solid var(--line); background: #fbfbfb; padding: var(--s3) var(--s4); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.total-card { padding: var(--s4); position: sticky; top: 78px; }
.total-card h2, .form-card h2 { margin: 0 0 var(--s4); font-size: var(--t-title); }
.total-line { display: flex; justify-content: space-between; gap: var(--s3); margin: var(--s2) 0; font-size: var(--t-subtitle); }
.total-line span:first-child { color: var(--muted); }
.grand-total { border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s4); font-size: var(--t-amount); font-weight: 750; }
.total-note { color: var(--faint); font-size: var(--t-caption); line-height: 1.45; margin-top: var(--s3); }

.steps { display: flex; gap: var(--s1); padding: var(--s1); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill); margin-bottom: var(--s5); overflow-x: auto; }
.step { flex: 1; min-width: 105px; min-height: var(--control-height-compact); border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; gap: var(--s2); color: var(--faint); font-size: var(--t-caption); white-space: nowrap; }
.step.done { color: var(--green-dark); }
.step.active { background: var(--green-soft); color: var(--green-dark); font-weight: 700; }
.step-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: var(--t-eyebrow); }
.step-icon { width: 11px; height: 11px; }
.form-card { padding: var(--s4); margin-bottom: var(--s4); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.radio-group { display: grid; gap: var(--s2); }
.radio-group + .field { margin-top: var(--s4); }
.radio { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s3); display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; }
.radio.selected { border-color: var(--green); background: #f5fff7; }
.radio strong { display: block; font-size: var(--t-subtitle); }
.radio small { display: block; color: var(--muted); font-size: var(--t-caption); line-height: 1.45; margin-top: var(--s1); }
.checkbox { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--t-subtitle); line-height: 1.5; color: var(--muted); }
.checkout-actions { display: flex; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); }

.summary-item { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--t-caption); }
.summary-item:first-of-type { border-top: 0; }
.order-summary-card { overflow: hidden; }
.order-summary-card > header { min-height: 48px; padding: 0 var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); border-bottom: 1px solid var(--line); }
.order-summary-card > header small { color: var(--faint); font-size: var(--t-caption); }
.summary-facts { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--line); }
.summary-facts > div { min-height: 82px; padding: var(--s4); border-right: 1px solid var(--line); }
.summary-facts > div:last-child { border-right: 0; }
.summary-facts small, .originating-lead > small { display: block; margin-bottom: var(--s2); color: var(--muted); font-size: var(--t-eyebrow); letter-spacing: .09em; text-transform: uppercase; }
.summary-facts span { font-size: var(--t-caption); line-height: 1.55; }
.summary-facts strong { font-size: var(--t-amount); }
.originating-lead { min-height: 48px; padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s3); border-bottom: 1px solid var(--line); }
.originating-lead > small { margin: 0; }
.originating-lead b { padding: var(--s1) var(--s3); border-radius: var(--radius-pill); background: var(--green-soft); color: var(--green-dark); font-size: var(--t-eyebrow); }
.originating-lead span { color: var(--faint); font-size: var(--t-caption); }
.summary-products { padding: var(--s3) var(--s4); }
.confirmation { min-height: calc(100vh - 58px); display: grid; place-items: center; padding: var(--s5); }
.confirmation-card { width: min(100%, 580px); padding: var(--s6); text-align: center; }
.success-icon { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--s4); background: var(--green-soft); color: var(--green-dark); }
.success-check { width: 31px; height: 31px; }
.order-number { margin: var(--s4) 0; padding: var(--s3); border-radius: var(--radius-card); background: var(--canvas); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-title); font-weight: 700; }
.mode-chip { display: inline-block; margin-bottom: var(--s4); padding: var(--s1) var(--s3); border-radius: var(--radius-pill); background: var(--warning-soft); color: #81570b; font-size: var(--t-eyebrow); font-weight: 650; }
.toast { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 30; max-width: min(360px, calc(100vw - var(--s6))); padding: var(--s3) var(--s4); border-radius: var(--radius-card); background: var(--ink); color: #fff; box-shadow: 0 8px 24px rgba(20,20,30,.2); font-size: var(--t-caption); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Static views recreated from the supplied portal prototype. */
.static-page h2 { margin: 0; font-size: var(--t-title); letter-spacing: -.015em; }
.static-page p { color: var(--muted); line-height: 1.55; }
.static-stack { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.static-card { padding: var(--s4); overflow: hidden; }
.card-title { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.card-title > :first-child { flex: 1; }
/* Two headings in one card: the second opens a section of its own rather than running on from
   the text above it. */
.static-card > .card-title ~ .card-title { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.card-title button, .card-title > span { background: none; color: var(--green); cursor: pointer; font-size: var(--t-caption); font-weight: 650; }
.grow { flex: 1; min-width: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.secondary.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.back-link { margin: 0 0 var(--s3) calc(var(--s4) * -1); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.hero-card { border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 210px; background: linear-gradient(180deg,#e9ffec 0%,#c9efc4 62%,#a9d9d6 100%); }
.hero-copy { padding: var(--s6); }
.hero-copy > span { color: var(--muted); font-size: var(--t-subtitle); }
.hero-copy h1 { max-width: 22ch; margin: var(--s2) 0; line-height: 1.22; }
.hero-copy h1 em { color: var(--green); font-style: normal; }
.hero-copy p { margin: 0 0 var(--s4); font-size: var(--t-subtitle); }
.target-card { align-self: center; margin: var(--s5) var(--s5) var(--s5) 0; padding: var(--s4); border-radius: var(--radius-card); background: rgba(255,255,255,.72); display: flex; flex-direction: column; }
.target-card > strong { font-size: var(--t-page); }
.target-card strong small { color: var(--faint); font-size: var(--t-body); font-weight: 500; }
.target-card > span { color: var(--muted); font-size: var(--t-eyebrow); margin: var(--s1) 0 var(--s2); }
.target-card .small-metric { font-size: var(--t-metric); margin-top: var(--s3); }
.progress { height: 7px; border-radius: var(--radius-pill); background: #dcdfdc; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--green); }
.progress .progress-75 { width: 75%; }
.progress .progress-33 { width: 33%; }
.progress.purple i { background: #8b6bb8; }
.metric-strip { grid-column: 1/-1; display: grid; grid-template-columns: repeat(4,1fr); background: rgba(255,255,255,.86); border-top: 1px solid rgba(255,255,255,.9); }
.metric-strip div { padding: var(--s3) var(--s5); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s1); }
.metric-strip div:last-child { border: 0; }
.metric-strip strong { font-size: var(--t-metric); }
.metric-strip span { color: var(--muted); font-size: var(--t-eyebrow); }
.static-list-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.static-list-row strong, .static-list-row small { display: block; }
.static-list-row strong { font-size: var(--t-subtitle); }
.static-list-row small { color: var(--faint); font-size: var(--t-caption); margin-top: var(--s1); }
.static-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.status { display: inline-flex; align-items: center; min-height: 21px; padding: 2px var(--s2); border-radius: var(--radius-pill); font-size: var(--t-eyebrow); line-height: 1.2; font-weight: 700; white-space: nowrap; }
.status-green { background: var(--green-soft); color: var(--green-dark); }
.status-red { background: var(--danger-soft); color: var(--danger); }
.status-orange { background: var(--warning-soft); color: var(--warning); }
.status-blue { background: #e1ecf8; color: #2175c2; }
.status-purple { background: #f2ecf9; color: #6b4e9b; }
.status-gray { background: var(--canvas); color: var(--muted); }
.assistant-tip { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-card); background: var(--green-soft); color: var(--green-dark); font-size: var(--t-caption); line-height: 1.5; }
.shortcut-grid { display: grid; gap: var(--s2); }
.shortcut-grid button { min-height: 82px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-card); padding: var(--s3) var(--s4); display: flex; gap: var(--s3); align-items: center; text-align: left; color: var(--green-dark); cursor: pointer; }
.shortcut-grid button > .ui-icon { width: 22px; height: 22px; }
.shortcut-grid button span { display: flex; flex-direction: column; color: var(--ink); }
.shortcut-grid button strong { font-size: var(--t-caption); }
.shortcut-grid button small { color: var(--faint); font-size: var(--t-eyebrow); margin-top: var(--s1); }
.appointment-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.appointment-row time { width: 46px; min-height: 46px; border-radius: var(--radius-control); background: var(--canvas); display: grid; place-items: center; align-content: center; }
.appointment-row time strong, .appointment-row time small, .appointment-row .grow > strong, .appointment-row .grow > small { display: block; }
.appointment-row time strong { font-size: var(--t-body); }
.appointment-row time small { color: var(--faint); font-size: var(--t-eyebrow); letter-spacing: .08em; }
.appointment-row .grow > strong { font-size: var(--t-caption); }
.appointment-row .grow > strong span { margin-left: var(--s2); font-weight: 400; }
.appointment-row .grow > small { color: var(--faint); font-size: var(--t-eyebrow); margin-top: var(--s1); }
.inbox-preview { display: grid; gap: var(--s1); }
.inbox-preview strong { font-size: var(--t-caption); }
.inbox-preview small { color: var(--faint); font-size: var(--t-eyebrow); }
.scope-note { border: 1px solid #ccf0c0; background: #e6ffe9; border-radius: var(--radius-card); padding: var(--s4); color: var(--green-dark); font-size: var(--t-caption); line-height: 1.55; }
.static-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.static-toolbar > input { flex: 1; min-width: 220px; }
.audience-chip { min-height: var(--control-height-compact); padding: 0 var(--s3); border: 1px solid #bcebc4; border-radius: var(--radius-control); background: #effff2; color: var(--green-dark); display: flex; align-items: center; gap: var(--s2); font-size: var(--t-eyebrow); white-space: nowrap; }
.audience-chip span { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.audience-chip i { color: #99bba1; }
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filter-chips span { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff; color: var(--muted); font-size: var(--t-caption); }
.filter-chips .active { background: var(--green); color: #fff; border-color: var(--green); font-weight: 700; }
.hub-feature-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: var(--s5); margin-bottom: var(--s5); }
.feature-content { display: block; overflow: hidden; cursor: pointer; }
.feature-media .media-placeholder, .feature-media { height: 212px; min-height: 212px; }
.feature-content > div:last-child { padding: var(--s5); }
.feature-content h2 { font-size: var(--t-heading); margin-bottom: var(--s2); }
.feature-content p { font-size: var(--t-subtitle); }
.feature-content small { color: var(--faint); font-size: var(--t-caption); }
.hub-documents { display: grid; gap: var(--s4); }
.hub-documents .mini-document { min-height: 98px; }
.media-placeholder { min-height: 105px; background: repeating-linear-gradient(135deg,#dcdfdc 0 9px,#f7f7f7 9px 18px); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: var(--s1); }
.media-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-image.media-contain { object-fit: contain; background: #fff; }
.knowledge-card .media-image { height: 118px; }
.media-placeholder > span { opacity: .6; }
.media-placeholder small { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .07em; }
.mini-document { padding: var(--s4); display: flex; gap: var(--s3); align-items: center; }
.mini-document > b { width: 51px; height: 51px; display: grid; place-items: center; border-radius: var(--radius-control); background: var(--canvas); color: var(--green-dark); font-size: var(--t-eyebrow); }
.mini-document div { min-width: 0; }
.mini-document strong, .mini-document small { display: block; }
.mini-document strong { font-size: var(--t-caption); }
.mini-document small { color: var(--faint); font-size: var(--t-eyebrow); margin-top: var(--s1); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.section-title span { color: var(--green); font-size: var(--t-caption); font-weight: 650; }
.knowledge-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s4); }
.knowledge-card { overflow: hidden; }
.knowledge-card > div:last-child { padding: var(--s3); }
.knowledge-card small, .knowledge-card strong { display: block; }
.knowledge-card small { color: var(--faint); font-size: var(--t-eyebrow); margin-bottom: var(--s2); }
.knowledge-card strong { font-size: var(--t-caption); line-height: 1.4; }
.detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--s5); align-items: start; }
.detail-grid article > h1 { margin-bottom: var(--s4); }
.video-frame { height: 350px; border-radius: var(--radius-panel); background: repeating-linear-gradient(135deg,#3c4245 0 12px,#2b3032 12px 24px); color: #fff; display: grid; place-items: center; align-content: center; gap: var(--s6); margin-bottom: var(--s4); }
.video-frame > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.93); color: var(--ink); padding-left: var(--s1); }
.video-frame small { color: rgba(255,255,255,.7); font-size: var(--t-caption); }
.article-copy { font-size: var(--t-body); max-width: 68ch; }
.document-preview { margin: var(--s5) 0; overflow: hidden; }
.preview-tabs { padding: var(--s3); background: var(--canvas); border-bottom: 1px solid var(--line); display: flex; gap: var(--s4); font-size: var(--t-caption); }
.paper { margin: var(--s5) auto; max-width: 590px; padding: var(--s5) var(--s6); border: 1px solid var(--line); }
.paper h3 { font-size: var(--t-title); }
.paper h4 { margin-bottom: var(--s3); }
.paper i { height: 8px; border-radius: 2px; background: var(--line); display: block; margin-top: var(--s2); }
.paper i.short { width: 67%; }
.document-preview footer { padding: var(--s2) var(--s3); background: var(--canvas); border-top: 1px solid var(--line); font-size: var(--t-eyebrow); color: var(--muted); }
.document-preview footer strong { color: var(--green); float: right; }
.labeled { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: var(--t-caption); }
.labeled > span:first-child { color: var(--muted); }
.labeled strong { text-align: right; }
.inbox-layout { display: grid; grid-template-columns: 275px minmax(0,1fr) 260px; gap: var(--s4); align-items: start; }
.inbox-list { overflow: hidden; }
.inbox-filters { padding: var(--s3); }
.inbox-message { width: 100%; border-top: 1px solid var(--line); background: #fff; padding: var(--s3) var(--s4); text-align: left; display: grid; gap: var(--s2); cursor: pointer; }
.inbox-message.selected { background: #f3fff5; box-shadow: inset 3px 0 var(--green); }
.inbox-message strong { font-size: var(--t-caption); }
.inbox-message small { color: var(--faint); font-size: var(--t-eyebrow); }
.message-view { padding: var(--s5); }
.message-view h2 { font-size: var(--t-heading); margin: var(--s4) 0 var(--s2); }
.message-view p { font-size: var(--t-subtitle); }
.message-date { color: var(--faint); float: right; font-size: var(--t-eyebrow); }
.linked-content { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-card); display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.linked-content > div { flex: 1; }
.linked-content small, .linked-content strong { display: block; }
.linked-content small { color: var(--muted); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .07em; }
.linked-content strong { font-size: var(--t-caption); margin-top: var(--s1); }
.template-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s4); }
.template-card { display: grid; grid-template-columns: 160px 1fr; overflow: hidden; }
.template-card .template-art { min-height: 220px; }
.template-card > div:last-child { padding: var(--s4); }
.template-card h2 { font-size: var(--t-body); }
.template-card small { color: var(--faint); font-size: var(--t-caption); }
.template-card p { font-size: var(--t-caption); }
.editor-grid, .campaign-grid { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: var(--s4); align-items: start; }
.editor-canvas { padding: var(--s4); }
.content-block { display: flex; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); margin-bottom: var(--s3); }
.content-block > span { color: var(--faint); }
.content-block small { display: block; color: var(--muted); text-transform: uppercase; font-size: var(--t-eyebrow); letter-spacing: .08em; }
.content-block h3 { margin: var(--s2) 0 var(--s1); }
.content-block p { font-size: var(--t-caption); margin: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s4); margin-bottom: var(--s4); }
.stat-box { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.stat-box strong { font-size: var(--t-metric); }
.stat-box span { color: var(--muted); font-size: var(--t-eyebrow); }
.data-table { overflow: hidden; min-width: 780px; }
.wide-table { width: 100%; overflow-x: auto; }
.data-row { width: 100%; display: grid; grid-template-columns: 130px minmax(220px,1.6fr) 100px 110px 140px 80px; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: #fff; text-align: left; color: var(--ink); font-size: var(--t-caption); }
.data-row:not(.data-head) { cursor: pointer; }
.data-row:not(.data-head):hover { background: #fbfffc; }
.data-row > span { min-width: 0; overflow-wrap: break-word; }
.data-row strong, .data-row small { display: block; }
.data-row small { color: var(--faint); margin-top: var(--s1); }
.data-head { border-top: 0; background: var(--canvas); color: var(--faint); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .08em; cursor: default; }
.activity-table .data-table { min-width: 690px; }
.activity-table .data-row { grid-template-columns: 106px minmax(230px,1fr) 145px 110px 75px; min-height: 58px; }
.activity-table .data-row > span:nth-child(2) strong, .activity-table .data-row > span:nth-child(2) small { display: block; }
.activity-filters { margin-bottom: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: #fff; }
.activity-filters + .activity-table .data-table { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.leads-table .data-table { min-width: 680px; }
.three-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s4); margin-top: var(--s4); }
.three-cards p { font-size: var(--t-caption); }
.message-compose { min-height: 260px; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); margin: var(--s2) 0 var(--s4); }
.compose-tools { margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s5); padding: var(--s3); background: var(--canvas); border-bottom: 1px solid var(--line); display: flex; gap: var(--s4); font-size: var(--t-caption); }
.two-column-static { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--s4); align-items: start; }
.big-target { font-size: var(--t-page); font-weight: 750; margin: var(--s2) 0; }
.big-target small { color: var(--faint); font-size: var(--t-caption); font-weight: 500; }
.danger-number { color: var(--danger); }
.progress-steps { display: flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s1); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill); margin-bottom: var(--s5); }
.progress-steps span { flex: 1; min-width: 110px; padding: var(--s2) var(--s3); border-radius: var(--radius-pill); color: var(--faint); font-size: var(--t-caption); text-align: center; }
.progress-steps span.done { background: #e6ffe9; color: var(--green-dark); }
.progress-steps span.active { background: var(--green-dark); color: #fff; font-weight: 700; }
.label-grid { display: grid; grid-template-columns: 1fr 1fr; }
.label-grid .labeled { display: block; min-height: 70px; padding: var(--s3) var(--s4); }
.label-grid .labeled:nth-child(odd) { border-right: 1px solid var(--line); }
/* The caption of a cell, never every span inside it: this rule used to reach into the status pill
   the cell carries and print its CRM code as a second uppercase line of its own. */
.label-grid .labeled > span, .label-grid .labeled > strong { display: block; text-align: left; }
.label-grid .labeled > span { margin-bottom: var(--s1); text-transform: uppercase; font-size: var(--t-eyebrow); letter-spacing: .08em; }
.history-row { display: grid; grid-template-columns: 120px 1fr 120px; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: var(--t-caption); }
.history-row time, .history-row small { color: var(--faint); }
.person-chip { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.person-chip > span { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green-dark); font-weight: 700; font-size: var(--t-eyebrow); }
.person-chip strong, .person-chip small { display: block; }
.person-chip small { color: var(--faint); font-size: var(--t-caption); }
.purple-person > span { background: #f2ecf9; color: #6b4e9b; }
.check-row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.check-row strong, .check-row small { display: block; }
.check-row strong { font-size: var(--t-caption); }
.check-row small { color: var(--muted); font-size: var(--t-caption); margin-top: var(--s1); }
.check-icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-eyebrow); font-weight: 800; }
.inline-notice { margin: var(--s3) 0 0; }
.calendar-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: var(--s4); align-items: start; }
.calendar { overflow: hidden; }
/* W12-1: minmax(0, 1fr) rather than 1fr. A bare 1fr never shrinks below the widest thing in the
   column, so "1 activity" in one cell pushed the whole month grid wider than a 375 px phone and
   clipped "Sun" in the heading above it. */
.calendar-week, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-week span { padding: var(--s3); border-right: 1px solid var(--line); color: var(--faint); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .08em; }
.calendar-cell { min-height: 105px; padding: var(--s2); border-top: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s1); }
.calendar-cell.outside { background: #fbfbfb; color: #c6c9c6; }
.calendar-cell.today { background: #f4fff6; box-shadow: inset 0 3px var(--green); }
.calendar-cell > strong { font-size: var(--t-caption); }
.calendar-cell:not(.outside) { cursor: pointer; }
.calendar-cell.selected { box-shadow: inset 0 0 0 2px var(--green); }

/* What a day holds, at the size the column allows: dots always, and the sentence beside them
   wherever there is room for it. Green is something scheduled, amber something falling due. */
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.cal-dot-due { background: var(--warning); }
.cal-counts { color: var(--muted); font-size: var(--t-eyebrow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event { padding: var(--s1); border-radius: var(--s1); background: var(--warning-soft); color: #81570b; font-size: var(--t-eyebrow); }
.green-event { background: var(--green-soft); color: var(--green-dark); }
.purple-event { background: #f2ecf9; color: #6b4e9b; }
.access-demo { display: grid; grid-template-columns: minmax(300px,450px) 320px; gap: var(--s5); justify-content: center; align-items: start; }
.static-login { width: 100%; }
.modal-layer { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--s4); }
.modal-scrim { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(20,20,30,.45); }
.modal-card { position: relative; width: min(100%,560px); max-height: 88vh; overflow-y: auto; background: #fff; border-radius: var(--radius-panel); box-shadow: 0 25px 60px rgba(20,20,30,.3); }
.modal-card header, .modal-card footer { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); }
.modal-card header { border-bottom: 1px solid var(--line); }
.modal-card header > div { flex: 1; }
.modal-card header h2 { margin: 0; }
.modal-card footer { border-top: 1px solid var(--line); justify-content: flex-end; }
.modal-body { padding: var(--s5); }
.modal-card footer .danger-link { margin-right: auto; }
/* A sentence and a button standing between two fields carry no margin of their own, which is how
   they came to touch the label underneath them. */
.modal-body > .subtitle { margin: 0 0 var(--s3); }
.modal-body > .button-row { margin-bottom: var(--s4); }
.detail-status { margin-bottom: var(--s4); }
.participant-list { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 0 var(--s3); margin-bottom: var(--s2); }
.participant-list > :first-child { border-top: 0; }
.participant-list .subtitle { margin: var(--s3) 0; }
.guest-form { margin-top: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--canvas); }
.guest-form h3 { margin: 0; font-size: var(--t-subtitle); }
.guest-form .subtitle { font-size: var(--t-caption); margin-top: var(--s3); }
.row-link { background: none; color: var(--ink); font-size: var(--t-subtitle); font-weight: 650; text-align: left; padding: 0; cursor: pointer; }
.row-link:hover { color: var(--green-dark); text-decoration: underline; }

.bottom-nav { display: none; }

@media (max-width: 930px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .sidebar.open { display: flex; position: fixed; z-index: 42; left: 0; top: 0; width: min(310px,86vw); box-shadow: 12px 0 32px rgba(20,20,30,.2); }
  .nav-scrim { display: block; position: fixed; z-index: 41; inset: 0; width: 100%; height: 100%; background: rgba(20,20,30,.4); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { padding-left: var(--s4); padding-right: var(--s4); }
  .crumb { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-spacer { display: none; }
  .persona-chip { display: none; }
  .page, .confirmation { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; min-height: 64px; padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); }
  .bottom-nav button { background: none; color: var(--faint); display: grid; place-items: center; align-content: center; gap: var(--s1); font-size: var(--t-eyebrow); cursor: pointer; }
  .bottom-nav button.active { color: var(--green-dark); font-weight: 700; }
  .bottom-nav .nav-icon .ui-icon { width: 19px; height: 19px; }
  .mobile-more-button { position: fixed; right: var(--s5); bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 12; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 5px 14px rgba(20,20,30,.25); cursor: pointer; display: grid; place-items: center; }
  .mobile-more-button .ui-icon { width: 21px; height: 21px; }
  .dashboard-grid, .detail-grid, .inbox-layout, .editor-grid, .campaign-grid, .two-column-static, .calendar-layout { grid-template-columns: 1fr; }
  .hub-feature-grid { grid-template-columns: 1fr; }
  .audience-chip { max-width: 100%; overflow-x: auto; }
  .inbox-list { max-height: 330px; overflow-y: auto; }
  .knowledge-grid { grid-template-columns: repeat(2,1fr); }
  .three-cards { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .page { padding-left: var(--s5); padding-right: var(--s5); }
  .page-head { align-items: flex-start; }
  .catalogue-toolbar, .catalogue-layout { grid-template-columns: 1fr; }
  .catalogue-side { display: block; }
  .order-context { flex-wrap: wrap; align-items: flex-start; gap: var(--s2) var(--s3); }
  .order-context .context-spacer { display: none; }
  .order-context > div:nth-child(2) { width: 100%; }
  .product-grid { grid-template-columns: 1fr; }
  .product { display: grid; grid-template-columns: 118px 1fr; }
  .product-image { height: 100%; min-height: 185px; aspect-ratio: auto; }
  .product-description { min-height: 0; }
  .two-column { grid-template-columns: 1fr; }
  .total-card { position: static; }
  .field-row, .field-row.address, .field-row.address-3, .form-grid { grid-template-columns: 1fr; gap: 0; }
  .steps { flex-wrap: wrap; justify-content: flex-start; padding: var(--s2); border-radius: var(--radius-panel); overflow: visible; }
  .step { flex: 0 0 auto; min-width: 0; padding: 0 var(--s3); }
  .summary-page-head { flex-direction: column; align-items: flex-start; }
  .checkout-page-head { grid-template-columns: auto 1fr; align-items: center; }
  .checkout-page-head > small { text-align: right; }
  .checkout-page-head > button { grid-column: 1; }
  .summary-facts { grid-template-columns: 1fr 1fr; }
  .summary-facts > div:nth-child(2) { border-right: 0; }
  .summary-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .originating-lead { align-items: flex-start; flex-wrap: wrap; }
  .originating-lead span { flex-basis: 100%; }
  .hero-card { grid-template-columns: 1fr; }
  .hero-copy { padding: var(--s5); }
  .target-card { margin: 0 var(--s5) var(--s5); }
  .metric-strip { grid-template-columns: repeat(2,1fr); }
  .feature-content { grid-template-columns: 1fr; }
  .feature-media .media-placeholder, .feature-media { min-height: 175px; }
  .template-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .access-demo { grid-template-columns: 1fr; }
  .history-row { grid-template-columns: 95px 1fr; }
  .history-row small { grid-column: 2; }
  .video-frame { height: 245px; }
}

@media (max-width: 430px) {
  .topbar { padding-left: var(--s5); padding-right: var(--s5); }
  .product { grid-template-columns: 102px 1fr; }
  .product-body { padding: var(--s3); }
  .product-actions { grid-template-columns: 1fr; }
  .product-actions .quantity { display: none; }
}

/* 360 degree customer view */
.p360-link { background: none; color: var(--green-dark); font-size: var(--t-caption); font-weight: 650; padding: 0; cursor: pointer; }
.p360-link:hover { text-decoration: underline; }
.p360-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.p360-notes { margin: 0; font-size: var(--t-subtitle); line-height: 1.5; white-space: pre-line; }
.p360-chips { margin-bottom: var(--s2); }
.p360-chips span[data-p360] { cursor: pointer; }
.p360-hint { display: block; color: var(--faint); font-size: var(--t-caption); margin: var(--s1) 0 var(--s2); }
.p360-appliance { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.p360-timeline-row { display: grid; grid-template-columns: 150px auto 1fr; gap: var(--s3); align-items: start; padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: var(--t-caption); }
.p360-timeline-row time { color: var(--faint); font-size: var(--t-caption); padding-top: 2px; }
.p360-timeline-row strong, .p360-timeline-row small { display: block; }
.p360-timeline-row small { color: var(--faint); font-size: var(--t-caption); margin-top: var(--s1); }
@media (max-width: 900px) {
  .p360-grid { grid-template-columns: 1fr; }
  .p360-appliance { grid-template-columns: 1fr 1fr; }
  .p360-timeline-row { grid-template-columns: 1fr; gap: var(--s1); }
}

/* The distribution trace on the lead detail: one row per advisor the French rule considered. */
.trace-table { margin-bottom: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-card); overflow-x: auto; }
.trace-row { display: grid; grid-template-columns: minmax(140px, 1fr) 120px minmax(220px, 2fr) 70px; min-width: 560px; gap: var(--s3); padding: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-caption); background: #fff; align-items: center; }
.trace-row:first-child { border-top: 0; }
.trace-head { font-weight: 650; color: var(--muted); background: var(--canvas); }
.trace-row small { display: block; color: var(--faint); margin-top: 2px; }
.trace-row span:last-child { text-align: right; }

/* Contract signature step */
.sig-consent { margin-bottom: var(--s4); }
.sig-pad { position: relative; margin-bottom: var(--s2); }
.sig-canvas { display: block; width: 100%; height: auto; border: 1px dashed #b9c1bc; border-radius: var(--radius-card); background: #fff; touch-action: none; cursor: crosshair; }
.sig-pad-hint { position: absolute; left: var(--s3); bottom: var(--s3); color: var(--faint); font-size: var(--t-caption); pointer-events: none; }
.sig-clear { position: absolute; right: var(--s2); top: var(--s2); min-height: var(--control-height-compact); padding: 0 var(--s3); background: #fff; border: 1px solid var(--field-line); border-radius: var(--radius-control); font-size: var(--t-caption); cursor: pointer; }
.sig-or { text-align: center; color: var(--faint); font-size: var(--t-caption); margin: var(--s2) 0 var(--s3); }
.sig-totals { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.sig-reference { margin: 0 0 var(--s4); padding: var(--s3); border-radius: var(--radius-card); background: var(--green-soft); color: var(--green-dark); font-size: var(--t-caption); line-height: 1.55; text-align: left; overflow-wrap: anywhere; }
.sig-reference b { display: block; margin-bottom: var(--s1); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Speech-to-text on activity capture (B10): the mic sits under its field so it never crowds a
   narrow input, and the language chip only appears once dictation actually works. That chip is the
   FR/EN toggle, so it carries the same border, radius and height as the mic beside it. */
.dict-controls { display: flex; justify-content: flex-end; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.dict-button, .dict-lang { min-width: var(--control-height-compact); min-height: var(--control-height-compact); padding: 0 var(--s3); border: 1px solid var(--field-line); border-radius: var(--radius-control); background: #fff; color: var(--ink); font-size: var(--t-caption); font-weight: 650; cursor: pointer; }
.dict-lang { background: var(--canvas); color: var(--muted); letter-spacing: .04em; }
.dict-button:disabled { cursor: not-allowed; color: var(--faint); background: var(--canvas); }
.dict-button.dict-listening { background: var(--green); border-color: var(--green); color: #fff; }

/* The prompt messages keep the line breaks they will be sent with. */
.prompt-message { white-space: pre-line; }

/* B5: the two-tab lead list, its filter panel, its search box and the Contact column that swaps
   between the postcode and the phone. The row carries a sixth track for that column and a seventh
   for the accept and reject buttons the card itself offers. */
.leads-table .data-row { grid-template-columns: 130px minmax(170px,1fr) 130px minmax(170px,1.1fr) 150px 180px; min-height: 58px; }
.ll-toolbar { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: #fff; }
.ll-toolbar + .data-table { border-radius: 0 0 var(--radius-card) var(--radius-card); }
.ll-search { width: 100%; }
.ll-filter-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.ll-created { color: var(--faint); font-size: var(--t-eyebrow); display: block; margin-top: var(--s1); }
.ll-phone { color: var(--ink); font-weight: 650; }

/* One card per orphan on its own page, so they need the gap public/partner-360.js gets for free
   from .static-stack; the trace and outcome shown after Distribute sit inside the same card. */
.orph-row { margin-bottom: var(--s5); }
.orph-row:last-child { margin-bottom: 0; }
.orph-row select[data-orph="select"] { flex: 1; min-width: 160px; }

/* Escalation and the routing switch (B4, D8). The clock panel has to read as simulated from the
   back of a room, so it carries a warning tint the rest of the app never uses. */
.esc-line { margin: var(--s1) 0; }
.esc-panel .label-grid { margin-bottom: var(--s2); }
.esc-routing-row { align-items: center; gap: var(--s3); }
.esc-routing-row button { white-space: nowrap; }

/* B8: the Team Lead cockpit. KPI tiles and the response clock share one tile look; the funnel
   draws its own bars because a bar's fill width is the one thing a labeled tile cannot show. The
   drop-off label sits in a gutter of its own on every row, including the first row that carries no
   label, so the bars line up instead of one label pushing its bar out of the column. */
.ck-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.ck-funnel-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s3); align-items: center; margin-bottom: var(--s2); }
.ck-funnel-row:last-child { margin-bottom: 0; }
.ck-funnel-drop { grid-column: 1; grid-row: 1; font-size: var(--t-caption); color: var(--danger); text-align: right; }
.ck-funnel-hold { color: var(--faint); }
.ck-funnel-track { grid-column: 2; grid-row: 1; position: relative; height: var(--control-height-compact); border-radius: var(--radius-control); background: var(--canvas); overflow: hidden; }
.ck-funnel-track > span { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); font-size: var(--t-caption); color: var(--muted); z-index: 1; }
.ck-coach-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.ck-coach-row:first-child { border-top: 0; }
.ck-coach-row .grow > strong, .ck-coach-row .grow > small { display: block; }
.ck-coach-row .grow > small { color: var(--muted); font-size: var(--t-subtitle); margin-top: var(--s1); }
.ck-coach-details { flex-basis: 100%; padding: var(--s3); border-radius: var(--radius-control); background: var(--canvas); }
.ck-clock-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); }

/* B11: photo lead capture. The shoot button is a label wrapping a hidden file input, because a
   file input cannot be styled and the phone camera opens from the label just as well. */
.cap-card { max-width: 560px; }
.cap-shoot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 132px; padding: var(--s5); border: 2px dashed var(--line); border-radius: var(--radius-card); background: var(--canvas); color: var(--muted); font-size: var(--t-subtitle); font-weight: 650; text-align: center; cursor: pointer; }
.cap-shoot:active { border-color: var(--green); color: var(--green-dark); }
.cap-shoot-icon { font-size: var(--t-metric); line-height: 1; }
.cap-shoot input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cap-preview { display: block; width: 100%; max-height: 320px; margin-top: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-card); object-fit: contain; background: var(--canvas); }
.cap-consent { margin-top: var(--s3); }
.cap-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 var(--s3); }

/* P17: looks disabled while the lead draft is invalid, but stays clickable so a click that
   lands on a field which only just became valid still submits instead of being swallowed. */
.primary.is-disabled { background: #b9c1bc; cursor: not-allowed; }

/* B12: the recruitment pipeline and the per advisor scorecards. The board is a row of columns on
   a desktop and one stack per status on a phone; the scorecard table becomes a card per advisor
   at the same 700px the rest of the app switches at, and each cell prints its own column heading
   there, so one set of markup serves both instead of two sets to keep true. */
/* minmax(170px) needed 1080 px and the board had 984 next to the drawer, so the page scrolled
   sideways at 1280. The columns shrink instead and the cards wrap their names. */
.rc-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.rc-column { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s3); }
.rc-column header { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.rc-column h2 { font-size: var(--t-caption); margin: 0; }
.rc-column header span { font-size: var(--t-caption); color: var(--muted); }
.rc-card { display: block; width: 100%; text-align: left; padding: var(--s3); margin-bottom: var(--s2); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--canvas); cursor: pointer; }
.rc-card:last-child { margin-bottom: 0; }
.rc-card strong { display: block; font-size: var(--t-caption); }
.rc-card small { display: block; color: var(--muted); font-size: var(--t-caption); margin-top: var(--s1); }
.rc-card-pass { color: var(--green-dark); font-weight: 650; }
.rc-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0; }
.rc-empty { font-size: var(--t-caption); margin: 0; }
.rc-declined-row { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.rc-declined-row small { color: var(--muted); font-size: var(--t-caption); }
.rc-form .field-row { display: flex; gap: var(--s3); }
.rc-form .field-row .field { flex: 1; }
.rc-move { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.card-title + .rc-move { border-top: 0; }
.rc-move .field { flex: 1; min-width: 150px; margin: 0; }
.rc-history-row { display: flex; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--t-caption); }
.rc-history-row span { color: var(--muted); min-width: 78px; }
.rc-pass-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s3) 0; }
.rc-pass-numbers strong { display: block; font-size: var(--t-metric); line-height: 1.1; }
.rc-pass-numbers span { display: block; font-size: var(--t-caption); color: var(--muted); }
.rc-milestones { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.rc-milestone { padding: var(--s1) var(--s3); border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: var(--t-caption); color: var(--muted); }
.rc-milestone.done { background: var(--green-soft); color: var(--green-dark); border-color: var(--green-soft); }
.rc-faked { font-size: var(--t-caption); color: var(--faint); }

/* The seven columns of a scorecard need 898 px, which is what a 1280 px window leaves inside the
   card. Below that the table scrolls rather than clipping the reason column at its edge. */
.ck-score-table { border: 1px solid var(--line); border-radius: var(--radius-card); overflow-x: auto; overflow-y: hidden; }
/* Every cell starts at the top of its row, on the line the column heading starts on, and the two
   values a cell stacks stand a step apart. Centred cells were what the client read as "strange
   looking with the label": the heading sat at the top of the column and its value in the middle. */
.ck-score-row { display: grid; grid-template-columns: 118px 88px 106px minmax(170px, 1fr) 100px minmax(150px, 1.1fr) 96px; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); align-items: start; font-size: var(--t-caption); }
.ck-score-row:first-child { border-top: 0; }
.ck-score-row > span { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); overflow-wrap: anywhere; }
.ck-score-head { background: var(--canvas); font-size: var(--t-eyebrow); color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.ck-score-row.needs-help { box-shadow: inset 3px 0 0 var(--danger); }
.ck-score-row small { display: block; color: var(--muted); font-size: var(--t-caption); }
.ck-faint { color: var(--faint); }
.ck-mini-funnel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.ck-mini-stage { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-eyebrow); color: var(--muted); }
.ck-mini-stage strong { font-size: var(--t-subtitle); color: var(--ink); }
.ck-mini-stage small { font-size: var(--t-eyebrow); line-height: 1.3; }
.ck-mini-stage em { font-size: var(--t-eyebrow); font-style: normal; color: var(--green-dark); }

@media (max-width: 700px) {
  .rc-board { grid-template-columns: 1fr; }
  .rc-form .field-row { flex-direction: column; gap: 0; }
  .rc-pass-numbers { grid-template-columns: 1fr; }
  .ck-score-head { display: none; }
  .ck-score-row { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4); }
  .ck-score-row > span[data-label]::before { content: attr(data-label); display: block; font-size: var(--t-eyebrow); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
}

/* style-src in the Content-Security-Policy carries no 'unsafe-inline', so a style attribute never
   applies and a bar cannot carry its own length as CSS. Both bars are <progress> elements, which
   hold their value as an attribute; the hand-written .progress-75 classes above solve the same
   constraint for the static screens. */
progress.ck-funnel-fill, progress.rc-bar { appearance: none; -webkit-appearance: none; border: 0; display: block; width: 100%; }
progress.ck-funnel-fill { height: 100%; background: var(--canvas); }
progress.ck-funnel-fill::-webkit-progress-bar { background: var(--canvas); }
progress.ck-funnel-fill::-webkit-progress-value { background: var(--green-soft); }
progress.ck-funnel-fill::-moz-progress-bar { background: var(--green-soft); }
.ck-funnel-count { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%); z-index: 1; font-size: var(--t-caption); font-weight: 700; color: var(--green-dark); }
progress.rc-bar { height: 6px; margin-top: var(--s2); border-radius: var(--radius-pill); background: var(--canvas); overflow: hidden; }
progress.rc-bar::-webkit-progress-bar { background: var(--canvas); border-radius: var(--radius-pill); }
progress.rc-bar::-webkit-progress-value { background: var(--green); border-radius: var(--radius-pill); }
progress.rc-bar::-moz-progress-bar { background: var(--green); }
progress.rc-bar-devices::-webkit-progress-value { background: #6b4e9b; }
progress.rc-bar-devices::-moz-progress-bar { background: #6b4e9b; }

/* A status pill sitting directly in a card heading was losing its tone to the plain green link
   style that heading gives every span, which is what turned "Behind the curve" green. */
.card-title > span.status-green { background: var(--green-soft); color: var(--green-dark); }
.card-title > span.status-red { background: var(--danger-soft); color: var(--danger); }

/* B13, the phone pass. More than 80 percent of French advisors work on a phone and tomorrow's demo
   is judged on that screen, so scripts/mobile-audit.mjs walks every screen of the walkthrough at
   375 px and fails on a screen wider than the viewport or on a control under 44 px high. What
   follows is what that measurement asked for. The two panels a phone folds away need a wrapper and
   a button at every width, which is the only part of this that is not inside a media query. */
.ll-filters { display: flex; flex-direction: column; gap: var(--s3); }

@media (min-width: 768px) {
  /* Both panels stand open on a desktop, so the button that folds them is a phone control. */
  .ll-filter-toggle { display: none; }
}

@media (max-width: 767px) {
  /* Every tappable control is at least 44 px high with 8 px between its neighbours. Compact stays
     compact on a desktop only, which is where a mouse points at it. */
  button, select, textarea, input:not([type="checkbox"]):not([type="radio"]) { min-height: var(--tap-height); }
  .primary, .secondary, .ghost, .danger-link, .nav-button, .catalogue-side nav button { min-height: var(--tap-height); }
  .compact-button, .quantity, .dict-button, .dict-lang, .sig-clear { min-height: var(--tap-height); height: var(--tap-height); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select { height: var(--tap-height); }
  .filter-chips span, .card-title > span[data-p360], .p360-link, .row-link, .ll-phone, a[href^="tel:"] {
    display: inline-flex; align-items: center; min-height: var(--tap-height);
  }
  .checkbox { align-items: center; min-height: var(--tap-height); }
  .notification-button, .icon-button, .logout { width: var(--tap-height); height: var(--tap-height); }
  .button-row, .filter-chips, .tabs, .checkout-actions, .ll-filter-row { gap: var(--s2); }
  /* The file input behind the shoot label is a hidden 1 px box, never a target of its own. */
  .cap-shoot input { min-height: 0; }

  /* The title keeps the first line to itself and its controls stack underneath. */
  .page-head { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .page-head .button-row { flex-wrap: wrap; }

  /* One card per lead and per activity instead of a table wider than the phone. The cells carry
     their column heading, so the same markup serves both widths, and the gap between two cells is
     a step wider than the gap between a heading and the value under it. */
  .data-table.leads-table, .data-table.activity-table { min-width: 0; }
  .leads-table .data-head, .activity-table .data-head { display: none; }
  .leads-table .data-row, .activity-table .data-row { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4); }
  .leads-table .data-row > span[data-label]::before, .activity-table .data-row > span[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: var(--s1); font-size: var(--t-eyebrow); color: var(--faint);
    text-transform: uppercase; letter-spacing: .04em;
  }
  .leads-table .data-row > span:empty { display: none; }
  .leads-table .row-link { font-size: var(--t-title); }
  .row-link + .p360-link { margin-left: var(--s3); }

  /* The distribution trace is a stacked list here, because its four columns need 560 px. */
  .trace-head { display: none; }
  .trace-row { grid-template-columns: 1fr; min-width: 0; gap: var(--s1); padding: var(--s3); }
  .trace-row span:last-child { text-align: left; }

  /* "Switch routing off for Paris" is longer than the card is wide, so it takes its own line. */
  .esc-routing-row { flex-direction: column; align-items: stretch; }
  .esc-routing-row button { white-space: normal; text-align: left; }

  /* The panel a phone folds away: the lead filters, which pushed the leads below the fold. */
  .ll-toolbar:not(.ll-open) .ll-filters { display: none; }
}

/* Global search, batch G9. A box below the topbar rather than inside it, so it stays on screen
   and usable at phone width instead of being one of the elements the topbar hides there. */
.gs-bar { position: relative; padding: var(--s2) var(--s5); background: #fff; border-bottom: 1px solid var(--line); }
.gs-box { display: flex; align-items: center; gap: var(--s2); height: var(--tap-height); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 0 var(--s3); background: var(--canvas); }
.gs-box .ui-icon { width: 16px; height: 16px; flex: none; color: var(--faint); }
.gs-box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; font-size: var(--t-body); color: inherit; }
.gs-box input:focus { outline: none; box-shadow: none; }
.gs-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 172, 70, .12); }
.gs-panel { position: absolute; left: var(--s5); right: var(--s5); top: calc(100% + var(--s1)); z-index: 9; max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(0, 0, 0, .14); }
.gs-group-label { padding: var(--s3) var(--s4) var(--s1); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.gs-hit { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); width: 100%; min-height: var(--tap-height); padding: var(--s2) var(--s4); border: 0; background: none; text-align: left; cursor: pointer; }
.gs-hit:hover, .gs-hit.active { background: var(--canvas); }
.gs-hit-label { font-size: var(--t-body); font-weight: 650; }
.gs-hit-sub { font-size: var(--t-caption); color: var(--faint); }
.gs-empty { margin: 0; padding: var(--s4); font-size: var(--t-subtitle); color: var(--faint); }

@media (max-width: 430px) {
  .gs-bar { padding: var(--s2) var(--s4); }
  .gs-panel { left: var(--s4); right: var(--s4); }
}

/* The segmented worklist, batch G3. Cards on a phone, a table from tablet width up, one markup
   restyled by the grid rather than rendered twice. */
.wl-counts { margin: 0 0 var(--s3); font-size: var(--t-subtitle); color: var(--faint); }
.wl-list { display: flex; flex-direction: column; gap: var(--s3); }
.wl-row { display: grid; grid-template-columns: 1fr; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.wl-person strong { display: block; font-size: var(--t-title); }
.wl-person small { display: block; margin-top: var(--s1); font-size: var(--t-caption); color: var(--faint); }
.wl-contact { font-size: var(--t-subtitle); color: var(--faint); }
.wl-tap { min-height: var(--tap-height); display: inline-flex; align-items: center; }
.wl-no-phone { font-size: var(--t-caption); color: var(--faint); align-self: center; }
.wl-status select { min-height: var(--tap-height); width: 100%; }

@media (min-width: 900px) {
  .wl-row { grid-template-columns: 2fr 1.3fr 2fr 1fr; align-items: center; }
  .wl-status select { width: auto; }
}

/* --- the advisor home (hm-), its next best actions (nb-) and the bell (nt-) ----------------- */

.hm-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }

.nb-section { border-left: 3px solid var(--green); }
.nb-card { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.nb-card:first-of-type { border-top: 0; padding-top: var(--s1); }
.nb-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.nb-head strong { font-size: var(--t-body); }
.nb-id { font-size: var(--t-eyebrow); font-weight: 700; color: var(--faint); }
.nb-body { margin: var(--s2) 0 0; font-size: var(--t-subtitle); line-height: 1.45; }
.nb-body-en { margin: var(--s1) 0 var(--s3); font-size: var(--t-caption); color: var(--muted); }

.hm-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s3); }
.hm-kpi { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.hm-kpi strong { display: block; font-size: var(--t-metric); line-height: 1.2; }
.hm-kpi span { display: block; margin-top: var(--s1); font-size: var(--t-caption); color: var(--muted); }
.hm-kpi small { display: block; margin-top: var(--s1); font-size: var(--t-eyebrow); color: var(--faint); }

.hm-goal { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.hm-goal:first-of-type { border-top: 0; }
.hm-goal-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font-size: var(--t-caption); }
/* style-src carries no 'unsafe-inline', so a bar cannot hold its length in a style attribute:
   every one of them was rendering empty. A <progress> holds its value as an attribute, the same
   answer progress.ck-funnel-fill and progress.rc-bar already give. */
progress.hm-bar { appearance: none; -webkit-appearance: none; border: 0; display: block; width: 100%; height: 8px; margin: var(--s2) 0 var(--s1); border-radius: var(--radius-pill); background: var(--canvas); overflow: hidden; }
progress.hm-bar::-webkit-progress-bar { background: var(--canvas); border-radius: var(--radius-pill); }
progress.hm-bar::-webkit-progress-value { background: var(--green); border-radius: var(--radius-pill); }
progress.hm-bar::-moz-progress-bar { background: var(--green); border-radius: var(--radius-pill); }
.hm-goal small { font-size: var(--t-caption); color: var(--muted); }
.hm-goal-form { margin: var(--s3) 0; }
.hm-goal-form .field input { width: 84px; }

.hm-funnel-row { display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--t-caption); }
.hm-funnel-row:first-child { border-top: 0; }
.hm-funnel-row em { font-style: normal; color: var(--muted); text-align: right; }

.hm-today-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.hm-today-row:first-of-type { border-top: 0; }
.hm-today-row .grow strong { display: block; font-size: var(--t-subtitle); }
.hm-today-row .grow small { display: block; margin-top: var(--s1); font-size: var(--t-caption); color: var(--muted); }
.hm-quick-add { display: flex; gap: var(--s2); margin-top: var(--s3); }
.hm-quick-add input { flex: 1; min-width: 0; }

.hm-switch { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0; font-size: var(--t-caption); }
.hm-switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: var(--s1) var(--s3); margin: var(--s2) 0; }

.nt-layer { position: fixed; inset: 0; z-index: 40; }
.nt-scrim { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(35, 40, 42, .25); cursor: pointer; }
.nt-panel { position: absolute; right: var(--s4); top: 60px; width: min(360px, calc(100vw - var(--s6))); max-height: min(70vh, 560px); overflow: auto; padding: var(--s2) var(--s4) var(--s4); border-radius: var(--radius-card); background: #fff; box-shadow: 0 12px 32px rgba(35, 40, 42, .18); }
.nt-panel header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; }
.nt-panel h2 { margin: 0; font-size: var(--t-body); }
.nt-row { display: block; width: 100%; padding: var(--s3) 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.nt-row strong { display: block; font-size: var(--t-subtitle); font-weight: 650; }
.nt-row small { display: block; margin-top: var(--s1); font-size: var(--t-caption); color: var(--muted); }
.nt-unread strong { font-weight: 800; }
.nt-unread::before { content: ""; float: right; width: 8px; height: 8px; margin: var(--s1) 0 0 var(--s2); border-radius: 50%; background: var(--green); }

/* Phone first: the actions come before what is due today, and both before the month's numbers. */
@media (max-width: 900px) {
  .hm-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .hm-switch { min-height: var(--tap-height); }
  .nt-panel { right: var(--s2); top: 56px; }
}

/* --- W8, the component library (public/ui.js) ----------------------------------------------
   Only what the stylesheet had no rule for. A button, a select, a text input and a status pill
   already shared their look above; the library renders those same classes. */

/* A row of controls stands one height. The compact row is a desktop affordance: below 768 px the
   phone block above has already raised every control to --tap-height and must keep winning. */
@media (min-width: 768px) {
  .button-row-compact > select,
  .button-row-compact > input,
  .button-row-compact > .compact-button {
    height: var(--control-height-compact);
    min-height: var(--control-height-compact);
  }
}
/* Text that introduces a row of actions needs air, or it reads as part of the first button. */
.button-row-spaced { margin-top: var(--s4); }

.field-hint { color: var(--faint); font-size: var(--t-caption); line-height: 1.45; }

/* The status pill carries its CRM code inside itself. The label holds its line, the caption
   truncates and keeps the whole string in its title attribute. */
.chip { flex-wrap: wrap; gap: 0 var(--s2); max-width: 100%; padding: var(--s1) var(--s2); }
.chip-label { white-space: nowrap; }
.chip-caption { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; opacity: .75; }

.kpi-tile { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.kpi-tile strong { display: block; font-size: var(--t-metric); line-height: 1.2; }
.kpi-tile span { display: block; margin-top: var(--s1); font-size: var(--t-caption); color: var(--muted); }
.kpi-tile small { display: block; margin-top: var(--s1); font-size: var(--t-eyebrow); color: var(--faint); }

.empty-state { padding: var(--s5) var(--s4); border: 1px dashed var(--field-line); border-radius: var(--radius-card); background: #fff; text-align: center; }
.empty-state p { margin: 0; color: var(--muted); font-size: var(--t-subtitle); line-height: 1.5; }
.empty-state .button-row { justify-content: center; margin-top: var(--s4); }

.list-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.list-row-main { flex: 1; min-width: 0; }
.list-row-title { display: block; font-size: var(--t-subtitle); font-weight: 650; }
.list-row-main small { display: block; margin-top: var(--s1); color: var(--faint); font-size: var(--t-caption); }
.list-row-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

.section-title h2 { margin: 0; font-size: var(--t-title); }

/* One segmented control. The lead list, the customer 360 and the worklist each had their own,
   with three shapes and two active colours; the phone block above raises .tab to --tap-height
   along with every other button. */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.tab { min-height: var(--control-height); padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff; color: var(--muted); font-size: var(--t-subtitle); font-weight: 650; cursor: pointer; }
.tab:hover { border-color: #b9c1bc; color: var(--ink); }
.tab-active, .tab-active:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Group heading and body of the global search panel, which named a class that had no rule. */
.gs-group + .gs-group { border-top: 1px solid var(--line); }

/* --- W10, one rhythm down the page ---------------------------------------------------------
   "Missing margins between the different elements": the scorecard card stood on the funnel card
   with nothing between them. Every block of a screen now stands --s5 from the block above it, and
   the shorter margin a block carries of its own collapses into that step. The lead list toolbar
   keeps its zero, because the table under it draws the bottom half of the toolbar's own card. */
.static-page > * + * { margin-top: var(--s5); }
.static-page > .ll-toolbar + .data-table { margin-top: 0; }

/* A column of cards is read down, so it carries the page's own --s5; a grid of tiles is a denser
   thing on purpose and carries --s4. Below 768 px these grids fold to one or two columns, where
   the same two numbers apply rather than a third. */
.p360-grid, .template-grid, .inbox-layout, .hub-documents { gap: var(--s5); }

/* A field can stand in a row of controls, where the margin under it would push the row apart, and
   the row then lines its controls up on their bottom edge: the button beside a labelled field
   belongs on the input's line, not halfway up the caption above it. */
.button-row .field { margin-bottom: 0; }
.button-row:has(.field) { align-items: flex-end; }

/* W7 */
.fab-wrap { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 12; display: grid; justify-items: end; gap: var(--s3); }
.fab { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; border: none; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(20,20,30,.28); }
.fab .ui-icon { width: 22px; height: 22px; }
.fab-menu { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--s2); }
.fab-item { min-height: 44px; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4); border: 1px solid var(--line); border-radius: 22px; background: #fff; color: var(--ink); font-size: var(--t-subtitle); font-weight: 650; text-decoration: none; cursor: pointer; box-shadow: 0 4px 14px rgba(20,20,30,.18); white-space: nowrap; }
.fab-item:hover { border-color: var(--ink); }
.fab-item-icon { width: 18px; height: 18px; flex: none; }
.fab-scrim { position: fixed; inset: 0; z-index: 11; width: 100%; height: 100%; border: none; background: rgba(20,20,30,.4); cursor: pointer; }
.topbar-menu { display: none; }
/* The button floats over the page, so the last row of a list needs room to clear it, and the
   toast stands above it rather than on top of it. */
.page, .confirmation { padding-bottom: calc(56px + var(--s6)); }
.toast { bottom: calc(56px + var(--s5) + var(--s3)); }

@media (max-width: 930px) {
  .topbar-menu { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: calc(var(--s3) * -1); border: none; background: none; color: var(--ink); cursor: pointer; }
  .fab-wrap { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(138px + env(safe-area-inset-bottom)); }
  .page, .confirmation { padding-bottom: calc(142px + env(safe-area-inset-bottom)); }
  .fab-menu { max-width: calc(100vw - var(--s6)); }
  .fab-item { overflow: hidden; text-overflow: ellipsis; display: flex; }
}

/* The demo control desk, public/demo.html. It borrows the tokens and the component classes and
   nothing else: it is deliberately plain, so nobody mistakes it for a screen of the product. */
.demo-page { max-width: 760px; margin: 0 auto; padding: var(--s6) var(--s4); display: grid; gap: var(--s4); }
.demo-head h1 { margin: var(--s1) 0 var(--s2); }
.demo-now { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.demo-log { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s2); font-size: var(--t-subtitle); line-height: 1.5; }

/* The compact shoot label is the camera as a button: the review card and the done card offer
   another photograph without a step in between. */
.cap-shoot-compact { flex-direction: row; min-height: var(--tap-height); padding: 0 var(--s4); border: 1px solid var(--ink); border-radius: var(--radius-control); background: var(--ink); color: #fff; }
.cap-shoot-compact:active { border-color: var(--ink); color: #fff; }

/* .tab carries a class, so it outranks the `button` element rule in the phone block whatever
   the media query, and the five customer-360 tabs measured 40 px on a phone. */
@media (max-width: 767px) {
  .tab { min-height: var(--tap-height); }
}

/* --- W8-5, two cards side by side on a phone -----------------------------------------------
   One card per screenful wastes the half of a 375 px viewport that a short card does not need,
   and it hides the second item below the fold. Every overview of tiles or short cards is two
   columns here. The KPI rows, the knowledge grid and the admin stats already were, through
   auto-fit; these three were not.

   What stays one column, and why: a lead row, an activity row and a worklist row are rows of a
   table rather than cards; the orphan row, the marketing template card and the coaching row each
   carry a row of action controls, and 163 px is too narrow for a select and two buttons to keep
   the 44 px tap height; a form is one column because a half-width field is not fillable. */
@media (max-width: 767px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  /* Stacked rather than image-beside-text: 163 px has no room for a 118 px thumbnail column.
     minmax(0, 1fr) rather than 1fr for the same reason as the month grid: a bare 1fr never
     shrinks below the widest thing in the column, so one product title pushed the card 5 px
     wider than the cell holding it. */
  .product { grid-template-columns: minmax(0, 1fr); }
  .product-actions { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .product h3, .product-actions .primary { font-size: var(--t-caption); }
  .rc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-documents, .three-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .mini-document { flex-direction: column; align-items: flex-start; }
}

/* --- W11-1, the record a row opens ----------------------------------------------------------
   The four actions are written once (public/activity-detail.js) and shown in one of two places:
   the round button on a phone, where a thumb reaches it without scrolling back to the title, and
   a row of buttons under the title on a desktop, where a floating button over a wide page reads
   as a stray control. Neither width shows both. */
@media (max-width: 767px) {
  .detail-actions { display: none; }
}
@media (min-width: 768px) {
  .fab-phone { display: none; }
}

/* W11-2. A row that opens the record it names says so under the pointer, the same way a table row
   already does. */
.list-row-open, .static-list-row[data-open], .hm-today-row[data-open], .wl-row[data-open] { cursor: pointer; }
.list-row-open:hover, .static-list-row[data-open]:hover, .hm-today-row[data-open]:hover, .wl-row[data-open]:hover { background: #fbfffc; }

/* A table whose rows record what each role may do is read, not opened, so its rows do not offer
   themselves under the pointer the way a row of records does. */
.data-row[data-rows="log"] { cursor: default; }
.data-row[data-rows="log"]:hover { background: #fff; }

/* --- W11-3, the gap between two form fields -------------------------------------------------
   "This also does not look very nice. Not enough margin": the new-activity dialog's "Log
   retroactively as completed" row stood on the "Host" label under it. A checkbox row is a form
   field, and a field carries --s4 under itself, so a checkbox carries the same to whatever
   follows it. The rule sits on the pair rather than on the checkbox, because a checkbox that is
   one option of a field is spaced by its own grid and a checkbox that ends a card needs no margin
   the card's padding already gives. scripts/row-audit.mjs check (h) measures every such pair. */
.checkbox + .field,
.checkbox + .field-row,
.checkbox + .form-grid,
.checkbox + .radio-group,
.checkbox + .button-row,
.checkbox + .guest-form { margin-top: var(--s4); }

/* --- W12-1, the month grid on a phone --------------------------------------------------------
   "Mobile calendar view broken": seven columns wider than the screen, "Sun" cut to "SU" and
   "1 activity" wrapping inside a cell one seventh of 375 px wide. The columns now fit (the
   minmax above), the heading gives its three letters the whole column, the cell is short enough
   that a month fits on one screenful, and what a day holds is read from its dots. The day's own
   list is the card under the grid, which is where .calendar-layout already folds it. */
@media (max-width: 767px) {
  .calendar-week span { padding: var(--s2) var(--s1); text-align: center; letter-spacing: 0; }
  .calendar-cell { min-height: 52px; padding: var(--s1); gap: 3px; }
  .cal-counts { display: none; }
  /* The subject of the day's activity gets the width of the card, and its status and actions the
     line under it, rather than a column of two words beside a pill. */
  .cal-day-list .static-list-row { flex-wrap: wrap; }
  .cal-day-list .static-list-row .grow { flex-basis: 100%; }
  /* Five segments of one control fit a 375 px line at this padding; a tap target is made by the
     44 px height above, never by 32 px of air either side of the word. */
  .tab { padding: 0 var(--s3); }
}

/* --- W12-2, the basket on a phone ------------------------------------------------------------
   The row was 620 px wide and scrolled sideways inside its own card, which is the shape this
   batch's check (j) exists to catch: the page fits and the content does not. The line reads as
   one block instead, the picture and the name on the first row, what you have and what it costs
   on the second, and the remove button where a thumb finds it. */
@media (max-width: 767px) {
  .basket-row { grid-template-columns: 60px minmax(0, 1fr) auto; row-gap: var(--s3); }
  .basket-row > .basket-thumb { grid-area: 1 / 1; }
  .basket-row > div:nth-child(2) { grid-area: 1 / 2; }
  .basket-row > .quantity { grid-area: 2 / 2; }
  .basket-row > .line-total { grid-area: 2 / 3; }
  .basket-row > .danger-link { grid-area: 1 / 3; }
}