/* =============================================================
   FRAMEFLOW — STUDIO DESIGN SYSTEM (redesign, local test, 29 Oct 2026)
   -------------------------------------------------------------
   From Edward's references (PandaDoc home, Mixpanel home): a quiet
   warm-grey sidebar with icon + label navigation, white working
   surfaces on a near-white canvas, hairline borders instead of
   embossing, one green accent, status shown as a dot + word, generous
   spacing and a clear type ramp. Loaded after styles.css and calm.css,
   so it re-points their tokens and flattens the old "aurora/emboss"
   layer rather than editing it: delete this file and the app is back
   to how it was.
   Layout concept: rail + canvas. A fixed 248px rail, a canvas of white
   panels at a 1200px reading width, the summary before the detail.
   ============================================================= */

:root {
  /* ---- palette ---- */
  --s-canvas:    #FAF9F7;   /* page ground */
  --s-rail:      #F3F2EE;   /* sidebar */
  --s-surface:   #FFFFFF;   /* panels, cards, fields */
  --s-sunk:      #F5F4F1;   /* table heads, group rows, hover */
  --s-line:      #E6E3DD;
  --s-line-2:    #D5D1C9;
  --s-ink:       #1C1E1D;
  --s-ink-2:     #4F5452;
  --s-ink-3:     #676C6A;   /* meta text, still 5:1 on white */
  --s-accent:    #1058FF;   /* the one accent: bright blue (his call 30 Oct, was workshop green) */
  --s-accent-2:  #0B47D6;   /* pressed / accent as text */
  --s-tint:      #E4F0FE;
  --s-focus:     rgba(16,88,255,0.28);
  /* muted pastel washes for shortcut tiles (no purple, per the brief) */
  --s-wash-sage: #EAF3EC; --s-wash-sand: #FBF0E4; --s-wash-sky: #E8F0F7; --s-wash-stone: #F0EEEA;

  /* ---- type ---- */
  --s-font:      'Figtree', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* ---- re-pointed app tokens (styles.css reads these everywhere) ---- */
  --teal: var(--s-accent);
  --teal-dim: var(--s-accent-2);
  --teal-muted: #9CC6F7;
  --teal-glow: var(--s-focus);
  --teal-subtle: var(--s-tint);
  --bg: var(--s-canvas);
  --surface: var(--s-surface);
  --surface-raised: var(--s-sunk);
  --surface-high: #EDEBE6;
  --border: var(--s-line);
  --border-bright: var(--s-line-2);
  --text: var(--s-ink);
  --text-secondary: var(--s-ink-2);
  --text-muted: var(--s-ink-3);
  --sidebar-bg: var(--s-rail);
  --sidebar-w: 248px;
  --green: #1D7A57; --green-bg: #E6F2EC;
  --amber: #9A6A0C; --amber-bg: #FBF1DC;
  --red: #B3261E;   --red-bg: #FBE9E7;
  --blue: #2A62A8;  --blue-bg: #E8F0F9;
  --purple: #6B5CA5; --purple-bg: #EFEDF7;
  --orange: #B4541F; --orange-bg: #FBEDE4;

  --fs-2xs: 12px; --fs-xs: 13px; --fs-sm: 14px; --fs-md: 15px; --fs-lg: 16px;
  --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 26px; --fs-4xl: 32px; --fs-5xl: 40px;
  --icon-lg: 20px; --icon-xl: 22px;

  --header-h: 64px;
  --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-xl: 16px;
  --btn-radius: 8px;
  --shadow:    0 1px 2px rgba(28,30,29,0.05);
  --shadow-md: 0 8px 24px -8px rgba(28,30,29,0.14), 0 2px 6px rgba(28,30,29,0.05);
  --shadow-lg: 0 24px 56px -16px rgba(28,30,29,0.24), 0 6px 16px -8px rgba(28,30,29,0.10);
  --font: var(--s-font);

  /* The emboss treatment, switched off: flat faces, hairline edges. */
  --raise-hi: transparent; --raise-lo: rgba(28,30,29,0.06); --inset-lo: transparent;
  --accent-rim: var(--s-accent-2);
  --accent-grad: linear-gradient(var(--s-accent), var(--s-accent));
  --btn-face: var(--s-surface);
  --card-face: var(--s-surface);
  --field-face: var(--s-surface);
  --emboss-raise: 0 1px 2px rgba(28,30,29,0.05);
  --emboss-lift: 0 1px 2px rgba(28,30,29,0.05);
  --emboss-press: none;
  --emboss-accent: none;
  --glass-edge: none; --glass-inset: none;

  /* The Calm Workshop board (calm.css) follows the same palette. */
  --wk-bg: var(--s-canvas); --wk-surface: var(--s-surface); --wk-sunk: var(--s-sunk);
  --wk-ink: var(--s-ink); --wk-ink2: var(--s-ink-2); --wk-line: var(--s-line); --wk-line2: var(--s-line);
  --wk-green: var(--s-accent); --wk-green-tint: var(--s-tint);
  --wk-sans: var(--s-font); --wk-serif: var(--s-font);
}

html[data-theme="dark"] {
  --s-canvas: #141615; --s-rail: #191B1A; --s-surface: #1F2221; --s-sunk: #252827;
  --s-line: #2F3331; --s-line-2: #3D423F;
  --s-ink: #ECEEED; --s-ink-2: #BCC1BF; --s-ink-3: #959B98;
  --s-accent: #1058FF; --s-accent-2: #7DBBFF; --s-tint: #16263A; --s-focus: rgba(125,187,255,0.30);
  --s-wash-sage: #1E2A23; --s-wash-sand: #2B251D; --s-wash-sky: #1C2530; --s-wash-stone: #242422;
  --surface-high: #2C302E;
  --teal-muted: #2A4A6E;
  --green: #5CC79A; --green-bg: #1D3329;
  --amber: #E2B04A; --amber-bg: #33291A;
  --red: #F08A80;   --red-bg: #3A1F1C;
  --blue: #7FAEE6;  --blue-bg: #1C2836;
  --purple: #B3A6E6; --purple-bg: #29263A;
  --orange: #EE9A66; --orange-bg: #36241A;
  --shadow: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 10px 28px -8px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 26px 60px -16px rgba(0,0,0,0.7);
  --raise-lo: rgba(0,0,0,0.3);
  --emboss-raise: 0 1px 2px rgba(0,0,0,0.3);
  --emboss-lift: 0 1px 2px rgba(0,0,0,0.3);
  --btn-face: var(--s-surface); --card-face: var(--s-surface); --field-face: #1A1D1C;
}

/* -----------------------------------------------------------
   1. BASE
   ----------------------------------------------------------- */
html, body { font-family: var(--s-font); font-size: var(--fs-lg); background: var(--s-canvas); color: var(--s-ink); }
body::before { background: var(--s-canvas) !important; }
h1, h2, h3, h4, .logo-name { letter-spacing: -0.01em; }
::selection { background: var(--s-focus); }
:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }
::-webkit-scrollbar-thumb { background: #D9D6CF; background-clip: content-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A3F3C; background-clip: content-box; }

/* -----------------------------------------------------------
   2. SHELL — rail
   ----------------------------------------------------------- */
#sidebar { background: var(--s-rail); border-right: 1px solid var(--s-line); box-shadow: none; }
.sidebar-header { padding: 18px 16px 14px; border-bottom: none; }
.logo { gap: 10px; }
.logo-icon-wrap { width: 32px; height: 32px; filter: none; border-radius: 8px; background: var(--s-surface); border: 1px solid var(--s-line); padding: 4px; }
.ff-mark .ff-frame, .ff-mark .ff-bar { stroke: var(--s-accent); }
.ff-mark .ff-bar { fill: var(--s-accent); }
.logo-name { font-size: 17px; font-weight: 700; color: var(--s-ink); }
.logo-name-accent { background: none; -webkit-text-fill-color: currentColor; color: var(--s-ink); }

.nav-list { padding: 6px 12px 12px; gap: 2px; }
.nav-item {
  margin: 0; min-height: 44px; padding: 10px 12px; gap: 12px; border-radius: 8px;
  color: var(--s-ink-2); font-size: 16px; font-weight: 500; border: 1px solid transparent;
}
.nav-item .nav-icon { font-size: 20px; color: var(--s-ink-2); }
.nav-item:hover { background: rgba(28,30,29,0.05); color: var(--s-ink); transform: none; }
html[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.05); }
.nav-item:hover .nav-icon { transform: none; color: var(--s-ink); }
.nav-item.active { background: var(--s-surface); color: var(--s-ink); font-weight: 600; border-color: var(--s-line); box-shadow: var(--shadow); }
.nav-item.active .nav-icon { color: var(--s-accent); }
.nav-item.active::before { display: none; }

/* New Job: the one filled button in the rail, like "Create new". */
.nav-item.nav-item-cta {
  background: var(--s-accent); color: #fff; border-color: var(--s-accent); justify-content: flex-start;
  margin: 0 0 14px; font-weight: 600; box-shadow: none;
}
.nav-item.nav-item-cta .nav-icon { color: #fff; }
.nav-item.nav-item-cta:hover, .nav-item.nav-item-cta.active { background: var(--s-accent-2); border-color: var(--s-accent-2); color: #fff; }
html[data-theme="dark"] .nav-item.nav-item-cta:hover, html[data-theme="dark"] .nav-item.nav-item-cta.active { background: #258560; border-color: #258560; }

.nav-section-label { padding: 18px 12px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--s-ink-3); }

.sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--s-line); font-size: 14px; color: var(--s-ink-2); gap: 8px; }
.sidebar-footer i { color: var(--s-accent) !important; }
.sidebar-user { padding: 10px 16px 12px; font-size: 14px; color: var(--s-ink-2); }
.sidebar-install { margin: 0 16px 16px; border-radius: 8px; background: var(--s-surface); color: var(--s-ink); border: 1px solid var(--s-line); box-shadow: none; font-weight: 600; }

/* -----------------------------------------------------------
   3. SHELL — header + canvas
   ----------------------------------------------------------- */
#main-content { background: var(--s-canvas); }
#page-header {
  min-height: var(--header-h); padding: 0 32px; background: var(--s-canvas);
  backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--s-line);
}
#page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--s-ink); }
#page-body { padding: 28px 32px 96px; }

/* Floating buttons: flat, accent, one soft shadow. */
#fab-new-job { background: var(--s-accent); box-shadow: 0 8px 20px -6px rgba(16,88,255,0.45); border-radius: 999px; font-weight: 600; }
#fab-new-job:hover { background: var(--s-accent-2); transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(16,88,255,0.5); }
#fab-take-payment { background: var(--s-surface); border-color: var(--s-line); box-shadow: var(--shadow-md); }

/* -----------------------------------------------------------
   4. COMPONENTS
   ----------------------------------------------------------- */
.btn {
  min-height: 44px; padding: 10px 16px; border-radius: 8px; font-size: 15px; font-weight: 600;
  box-shadow: none; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { transform: none; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--s-accent); border: 1px solid var(--s-accent); color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--s-accent-2); border-color: var(--s-accent-2); box-shadow: none; }
html[data-theme="dark"] .btn-primary:hover { background: #258560; border-color: #258560; }
.btn-secondary { background: var(--s-surface); border: 1px solid var(--s-line-2); color: var(--s-ink); box-shadow: none; }
.btn-secondary:hover { background: var(--s-sunk); border-color: var(--s-line-2); }
.btn-ghost { background: transparent; color: var(--s-ink-2); }
.btn-ghost:hover { background: var(--s-sunk); color: var(--s-ink); }
.btn-lg { border-radius: 8px; min-height: 48px; font-size: 16px; }

input, select, textarea {
  background: var(--s-surface); border: 1px solid var(--s-line-2); border-radius: 8px;
  box-shadow: none; font-size: 16px; color: var(--s-ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--s-accent); box-shadow: 0 0 0 3px var(--s-focus); outline: none; }

.card { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 12px; box-shadow: none; }

.data-table { background: var(--s-surface); border-collapse: separate; border-spacing: 0; font-size: 15px; }
.data-table thead tr { background: var(--s-surface); }
.data-table th {
  font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--s-ink-3);
  padding: 14px 16px; border-bottom: 1px solid var(--s-line); background: var(--s-surface);
}
.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--s-line); color: var(--s-ink); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td, .job-row:hover { background: var(--s-sunk); }

/* Status: a dot and a word, like "● Draft" — the colour is a hint, the word says it. */
.badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; white-space: nowrap;
  background: var(--s-sunk) !important; color: var(--s-ink-2) !important; border: 1px solid var(--s-line);
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #8B908E); flex: none; }
.badge-grey, .badge-open { --dot: #8B908E; }
.badge-teal, .badge-dark-green, .badge-bright-green, .badge-complete { --dot: #2E9A6E; }
.badge-blue, .badge-light-blue, .badge-ordered { --dot: #3C7BC4; }
.badge-amber, .badge-in_production { --dot: #C9921C; }
.badge-orange { --dot: #D0692E; }
.badge-purple { --dot: #8172C4; }
.badge-red { --dot: #C8443A; }

.tab-btn { font-size: 16px; font-weight: 500; color: var(--s-ink-2); padding: 12px 4px; margin-right: 20px; }
.tab-btn:hover { color: var(--s-ink); }
.tab-btn.active { color: var(--s-ink); font-weight: 600; box-shadow: inset 0 -2px 0 0 var(--s-accent); }

#modal-overlay { background: rgba(20,22,21,0.45); }
#modal-box { border-radius: 16px; border: 1px solid var(--s-line); box-shadow: var(--shadow-lg); }
#modal-header { border-bottom: 1px solid var(--s-line); }
#modal-title { font-size: 19px; font-weight: 700; }
.toast { border-radius: 10px; box-shadow: var(--shadow-md); font-size: 15px; }

.quick-action-btn { box-shadow: none; }
.quick-action-btn:hover { transform: none; box-shadow: none; }

/* Splash: flat canvas instead of the aurora. */
#ff-splash { background: var(--s-canvas); }
#ff-splash .splash-aurora { display: none; }
.splash-wordmark .logo-name-accent { background: none; -webkit-text-fill-color: currentColor; color: var(--s-accent); }
.splash-greeting { color: var(--s-ink); }
.splash-sub { color: var(--s-ink-2); }

/* -----------------------------------------------------------
   5. HOME (dashboard)
   ----------------------------------------------------------- */
.home { max-width: 1240px; margin: 0 auto; display: grid; gap: 28px; }
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.home-hello { display: grid; gap: 4px; min-width: 0; }
.home-hello h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.home-hello p { margin: 0; font-size: 16px; color: var(--s-ink-2); }
.home-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.home-section-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--s-ink); }

/* Shortcut tiles: the pastel cards along the top of the PandaDoc home. */
.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-tile {
  display: flex; align-items: flex-start; gap: 14px; min-height: 96px; padding: 18px; text-align: left;
  border: 1px solid var(--s-line); border-radius: 12px; background: var(--wash, var(--s-surface)); color: var(--s-ink);
  font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.home-tile:hover { border-color: var(--s-line-2); box-shadow: var(--shadow-md); }
.home-tile:active { transform: scale(0.99); }
.home-tile i { font-size: 26px; color: var(--s-ink); flex: none; margin-top: 1px; }
.home-tile b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.home-tile span { display: block; font-size: 14px; line-height: 1.4; color: var(--s-ink-2); }
.home-tile.t-sage { --wash: var(--s-wash-sage); } .home-tile.t-sand { --wash: var(--s-wash-sand); }
.home-tile.t-sky { --wash: var(--s-wash-sky); } .home-tile.t-stone { --wash: var(--s-wash-stone); }

/* The numbers: one white panel, four columns, like "Your Product". */
.home-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 14px; overflow: hidden;
}
.home-stat {
  display: grid; gap: 4px; align-content: start; padding: 20px 22px; text-align: left; min-width: 0;
  background: none; border: 0; border-left: 1px solid var(--s-line); color: var(--s-ink); font: inherit; cursor: pointer;
}
.home-stat:first-child { border-left: 0; }
.home-stat:hover { background: var(--s-sunk); }
.home-stat-value { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.home-stat-label { font-size: 15px; font-weight: 500; color: var(--s-ink-2); }
.home-stat-hint { font-size: 13px; color: var(--s-ink-3); }
.home-stat.is-warn .home-stat-value { color: var(--red); }
.home-stat svg { display: block; width: 100%; height: 34px; margin-top: 8px; overflow: visible; }

.home-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }

/* Jobs panel: segmented filters on top, rows grouped by when they're due. */
.home-panel { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 14px; overflow: hidden; min-width: 0; }
.home-filters { display: flex; border-bottom: 1px solid var(--s-line); overflow-x: auto; scrollbar-width: none; }
.home-filters::-webkit-scrollbar { display: none; }
.home-filter {
  flex: 1 0 auto; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 20px;
  background: var(--s-sunk); border: 0; border-left: 1px solid var(--s-line); color: var(--s-ink); font: inherit; text-align: left; cursor: pointer;
}
.home-filter:first-child { border-left: 0; }
.home-filter i { font-size: 24px; color: var(--s-ink-3); }
.home-filter b { display: block; font-size: 15px; font-weight: 600; }
.home-filter span { display: block; font-size: 14px; color: var(--s-ink-3); }
.home-filter[aria-pressed="true"] { background: var(--s-surface); box-shadow: inset 0 -2px 0 var(--s-accent); }
.home-filter[aria-pressed="true"] i, .home-filter[aria-pressed="true"] b { color: var(--s-accent-2); }
html[data-theme="dark"] .home-filter[aria-pressed="true"] i, html[data-theme="dark"] .home-filter[aria-pressed="true"] b { color: var(--s-accent-2); }
.home-filter.is-warn span { color: var(--red); }

.home-job { display: flex; align-items: center; gap: 12px; min-width: 0; }
.home-job-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--s-sunk); border: 1px solid var(--s-line); color: var(--s-ink-2); font-size: 18px; }
.home-job b { display: block; font-weight: 600; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
.home-job small { display: block; font-size: 14px; color: var(--s-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; }
.home-due { white-space: nowrap; color: var(--s-ink-2); }
.home-due.is-late { color: var(--red); font-weight: 600; }
.home-flag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: var(--red-bg); color: var(--red); vertical-align: 2px; }
.home-empty { padding: 40px 20px; text-align: center; color: var(--s-ink-2); }
.home-more { display: block; width: 100%; padding: 14px; border: 0; border-top: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-accent-2); font: 600 15px var(--s-font); cursor: pointer; }
.home-more:hover { background: var(--s-sunk); }

/* Right rail: "To do" checklist + recent activity, like "Get started" + "Timeline". */
.home-side { display: grid; gap: 20px; min-width: 0; }
.home-card { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 14px; overflow: hidden; }
.home-card-head { padding: 18px 20px 12px; }
.home-card-head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.home-card-head p { margin: 2px 0 0; font-size: 14px; color: var(--s-ink-3); }
.home-todo { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 20px; border: 0; border-top: 1px solid var(--s-line); background: none; color: var(--s-ink); font: inherit; text-align: left; cursor: pointer; }
.home-todo:hover { background: var(--s-sunk); }
.home-todo-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--s-tint); color: var(--s-accent-2); font-size: 16px; }
.home-todo-ico.is-pay { background: var(--amber-bg); color: var(--amber); }
.home-todo-ico.is-late { background: var(--red-bg); color: var(--red); }
.home-todo-text { flex: 1; min-width: 0; }
.home-todo-text b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-todo-text span { display: block; font-size: 14px; color: var(--s-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-todo > .ph-caret-right { color: var(--s-ink-3); font-size: 16px; }
.home-todo-done { padding: 18px 20px 20px; border-top: 1px solid var(--s-line); font-size: 15px; color: var(--s-ink-2); display: flex; gap: 10px; align-items: center; }
.home-todo-done i { color: var(--s-accent); font-size: 20px; }

.home-feed { list-style: none; margin: 0; padding: 0 20px 8px; }
.home-feed li { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--s-line); }
.home-feed li:first-child { border-top: 0; }
.home-feed .dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--s-accent); }
.home-feed b { display: block; font-size: 15px; font-weight: 600; }
.home-feed span { display: block; font-size: 14px; color: var(--s-ink-3); }
.home-feed .num { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) {
  .home-main { grid-template-columns: 1fr; }
  .home-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-stat:nth-child(3) { border-left: 0; }
  .home-stat:nth-child(n+3) { border-top: 1px solid var(--s-line); }
}
@media (max-width: 760px) {
  .home-side { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  #page-body { padding: 18px 16px 96px; }
  .home { gap: 22px; }
  .home-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-tile { flex-direction: column; gap: 8px; min-height: 0; padding: 14px; }
  .home-tile span { display: none; }
  .home-stat { padding: 16px; }
  .home-stat-value { font-size: 28px; }
  .home-stat svg { display: none; }
  .home-filter { min-height: 64px; padding: 12px 16px; }
  .home-job b { max-width: 18ch; }
  .home-job small { max-width: 22ch; }
  .home-head-actions { display: none; }
  /* top bar on phones */
  #sidebar { background: var(--s-rail); }
  .nav-list { background: var(--s-rail); }
}
@media (prefers-reduced-motion: reduce) {
  .home-tile, .home-filter, .btn { transition: none; }
}

/* -----------------------------------------------------------
   6. FIXES FROM THE FIRST LOOK
   ----------------------------------------------------------- */
.home-job > span { min-width: 0; overflow: hidden; }
.home-job b, .home-job small { max-width: none; }
.home-filter { flex: 1 1 0; min-width: 150px; }

/* On a big screen New Job already sits at the top of the rail, so the
   floating copy (which covered the To do list) only shows on phones.
   Production's Scan button (icon only) still floats everywhere. */
@media (min-width: 601px) {
  #fab-new-job:not(.fab-icon-only) { display: none; }
  #fab-take-payment { bottom: 28px; }
  /* Help lives at the foot of the rail instead of over the page. */
  #sidebar { padding-bottom: 68px; }
  #help-btn {
    left: 16px; bottom: 16px; width: calc(var(--sidebar-w) - 32px); justify-content: flex-start;
    min-height: 44px; padding: 10px 14px; border-radius: 8px; box-shadow: none;
    background: var(--s-surface); border: 1px solid var(--s-line); color: var(--s-ink); font: 600 15px var(--s-font);
  }
  #help-btn:hover { background: var(--s-sunk); }
  #help-btn i { color: var(--s-accent); }
}

/* Grid children may shrink below their content (the filter strip and the
   table scroll inside their own boxes instead of widening the page). */
.home { grid-template-columns: minmax(0, 1fr); }
.home > *, .home-main > *, #home-jobs { min-width: 0; }

@media (max-width: 600px) {
  /* The phone menu is folded away until the logo is tapped: no padding
     while closed, or the New Job button peeks out under the bar. */
  .nav-list { padding: 0 12px; }
  #sidebar.menu-open .nav-list { padding: 10px 12px 14px; }
  .home-filter { min-width: 132px; }
}

.home-filter b, .home-filter span { white-space: nowrap; }
@media (max-width: 600px) {
  .home-tile span { display: block; }
  .home-tile span span { display: none; }
  .sidebar-install { display: none !important; }
}
/* iPad portrait: the stage matters more than the price at a glance. */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
}

/* Job rows: a grid, so each screen size just changes the columns. */
.home-list { --cols: minmax(0, 1fr) 150px 124px 104px; }
.home-row {
  display: grid; grid-template-columns: var(--cols); gap: 16px; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--s-line); cursor: pointer;
}
.home-row:last-child { border-bottom: 0; }
.home-row:hover { background: var(--s-sunk); }
.home-row:focus-visible { outline: 2px solid var(--s-accent); outline-offset: -2px; }
.home-row-head { padding-top: 12px; padding-bottom: 12px; cursor: default; font-size: 14px; font-weight: 500; color: var(--s-ink-3); }
.home-row-head:hover { background: none; }
.home-row > .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-group {
  padding: 10px 20px; background: var(--s-sunk); border-bottom: 1px solid var(--s-line);
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-ink-3);
}
.home-group.is-late { color: var(--red); }
.home-job-text { min-width: 0; }
.home-job b, .home-job small { max-width: none; }
@media (max-width: 1024px) {
  .home-list { --cols: minmax(0, 1fr) 136px 108px; }
  .home-list .col-total { display: none; }
}
@media (max-width: 600px) {
  .home-list { --cols: minmax(0, 1fr) auto; }
  .home-list .col-stage { display: none; }
  .home-row { padding: 12px 14px; gap: 12px; }
  .home-group { padding: 9px 14px; }
}

/* Job Book: a row that still owes money keeps its amber edge, without
   tinting the whole row (most rows owe something, so the page went cream). */
.data-table tbody tr.job-owing:not(.job-ready-call) td { background: transparent; }
.data-table tbody tr.job-owing:not(.job-ready-call):hover td { background: var(--s-sunk); }

/* New Job: section headers are titles on white, not filled green bars. */
.customer-card-header { background: var(--s-surface) !important; color: var(--s-ink) !important; border-bottom: 1px solid var(--s-line); }
.customer-card-header * { color: inherit; }
.customer-card-header h3, .customer-card-header i, .customer-card-header span { color: var(--s-ink) !important; }

/* =============================================================
   7. LESS "GENERATED" (his feedback 29 Oct: "screams AI font,
   still boxes"). The device's own font, a white working area,
   and lists/rules instead of bordered cards.
   ============================================================= */
:root {
  --s-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --s-canvas: #FFFFFF;
  --radius-sm: 6px; --radius: 6px; --radius-lg: 8px; --radius-xl: 10px; --btn-radius: 6px;
}
html[data-theme="dark"] { --s-canvas: #161817; }
h1, h2, h3, h4, .logo-name { letter-spacing: 0; }
#page-title { font-size: 20px; font-weight: 600; letter-spacing: 0; }

/* Buttons, fields: smaller corners. */
.btn, .btn-lg, input, select, textarea { border-radius: 6px; }

/* Rail: the current page is a soft fill, not a floating white card. */
.nav-item { border: 0; border-radius: 6px; }
.nav-item.active { background: rgba(28,30,29,0.07); border: 0; box-shadow: none; }
html[data-theme="dark"] .nav-item.active { background: rgba(255,255,255,0.08); }
.nav-item.nav-item-cta { border-radius: 6px; }
.logo-icon-wrap { border: 0; background: none; padding: 0; }

/* Status: a dot and the word, no pill around it. */
.badge { background: none !important; border: 0; padding: 0; gap: 7px; font-size: 15px; color: var(--s-ink) !important; }

/* Home */
.home { gap: 36px; }
.home-hello h2 { font-size: clamp(26px, 3vw, 32px); font-weight: 600; letter-spacing: -0.01em; }
.home-tiles { display: none; }

.home-stats { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); }
.home-stat { padding: 18px 24px 18px 0; border-left: 0; }
.home-stat + .home-stat { padding-left: 24px; border-left: 1px solid var(--s-line); }
.home-stat:hover { background: none; }
.home-stat:hover .home-stat-label { color: var(--s-accent-2); }
.home-stat-value { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }

.home-panel { background: none; border: 0; border-radius: 0; overflow: visible; }
.home-filters { gap: 28px; border-bottom: 1px solid var(--s-line); }
.home-filter { flex: none; min-width: 0; min-height: 52px; padding: 0; gap: 8px; background: none; border: 0; box-shadow: none; }
.home-filter i { display: none; }
.home-filter > span { display: flex; align-items: baseline; gap: 8px; }
.home-filter b { font-size: 16px; font-weight: 500; color: var(--s-ink-2); }
.home-filter span span { font-size: 14px; color: var(--s-ink-3); }
.home-filter[aria-pressed="true"] { background: none; box-shadow: inset 0 -2px 0 var(--s-ink); }
.home-filter[aria-pressed="true"] b { color: var(--s-ink); font-weight: 600; }
html[data-theme="dark"] .home-filter[aria-pressed="true"] b { color: var(--s-ink); }

.home-row { padding: 14px 0; }
.home-row:hover { background: none; }
.home-row:hover .home-job b { color: var(--s-accent-2); }
.home-row-head { padding: 12px 0 10px; }
.home-group { padding: 22px 0 8px; background: none; border-bottom: 1px solid var(--s-line); font-size: 13px; letter-spacing: 0.06em; }
.home-job { gap: 0; }
.home-job-ico { display: none; }
.home-more { border-top: 1px solid var(--s-line); background: none; text-align: left; padding: 14px 0; }
.home-more:hover { background: none; text-decoration: underline; }

.home-main { gap: 48px; grid-template-columns: minmax(0, 1fr) 320px; }
.home-card { background: none; border: 0; border-radius: 0; overflow: visible; }
.home-card-head { padding: 14px 0 12px; border-bottom: 1px solid var(--s-line); }
.home-card-head h3 { font-size: 17px; font-weight: 600; }
.home-todo { padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--s-line); }
.home-todo:hover { background: none; }
.home-todo:hover b { color: var(--s-accent-2); }
.home-todo-ico { display: none; }
.home-todo-done { padding: 14px 0; border-top: 0; }
.home-feed { padding: 0; }
.home-feed li { border-top: 0; border-bottom: 1px solid var(--s-line); }
.home-feed .dot { display: none; }
.home-feed li { grid-template-columns: 1fr auto; }
.home-side { gap: 32px; }

@media (max-width: 1180px) { .home-main { grid-template-columns: 1fr; } }
@media (max-width: 1024px) {
  .home-stat:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .home-filters { gap: 22px; }
  .home-filter { min-width: 0; }
  .home-row, .home-group { padding-left: 0; padding-right: 0; }
  .home-stat { padding: 14px 16px 14px 0; }
  .home-stat + .home-stat { padding-left: 16px; }
  .home-stat:nth-child(3) { padding-left: 0; }
}

/* =============================================================
   8. DEPTH AND ICONS BACK (his pick 29 Oct, comparing with the live
   app: "depth and icons"). Raised cards lifted by a soft shadow
   rather than outlined boxes, coloured icon squares, on a light
   grey ground so the lift shows. System font stays.
   ============================================================= */
:root {
  --s-canvas: #F2F2EF;
  --s-lift: 0 1px 2px rgba(28,30,29,0.06), 0 6px 16px -6px rgba(28,30,29,0.12);
  --s-lift-hover: 0 2px 4px rgba(28,30,29,0.07), 0 12px 24px -8px rgba(28,30,29,0.18);
  --s-ico: linear-gradient(180deg, #3D78FF, #1058FF);
}
html[data-theme="dark"] {
  --s-canvas: #121413;
  --s-lift: 0 1px 2px rgba(0,0,0,0.5), 0 8px 20px -8px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
  --s-lift-hover: 0 2px 4px rgba(0,0,0,0.5), 0 14px 28px -8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
  --s-ico: linear-gradient(180deg, #3D78FF, #1058FF);
}
.nav-item.active { background: var(--s-surface); box-shadow: var(--s-lift); }

/* Shortcuts: raised buttons with an icon, in one row. */
.home-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.home-tile {
  flex: 0 1 auto; min-height: 52px; padding: 12px 18px; gap: 10px; align-items: center;
  background: var(--s-surface); border: 0; border-radius: 12px; box-shadow: var(--s-lift);
}
.home-tile:hover { box-shadow: var(--s-lift-hover); }
.home-tile i { font-size: 20px; color: var(--s-accent); margin: 0; }
.home-tile b { margin: 0; font-size: 16px; font-weight: 600; }
.home-tile span span { display: none; }

/* The numbers: four raised cards with an icon square. */
.home-stats { gap: 14px; border: 0; background: none; }
.home-stat, .home-stat + .home-stat {
  padding: 18px 20px; gap: 2px; border: 0; border-radius: 14px; background: var(--s-surface); box-shadow: var(--s-lift);
}
.home-stat:hover { box-shadow: var(--s-lift-hover); }
.home-stat-ico {
  width: 40px; height: 40px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 10px;
  background: var(--s-ico); color: #fff; font-size: 21px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 4px rgba(16,88,255,0.25);
}
.home-stat.is-warn .home-stat-ico { background: linear-gradient(180deg, #C2463C, #A2342B); }
.home-stat-value { font-size: 32px; font-weight: 700; }
.home-stat-label { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--s-ink-3); }

/* Jobs: one raised card, icons back on the filters and rows. */
.home-panel { background: var(--s-surface); border-radius: 14px; box-shadow: var(--s-lift); overflow: hidden; }
.home-filters { gap: 0; padding: 0 8px; }
.home-filter { flex: 1 1 0; min-width: 0; min-height: 60px; padding: 0 12px; gap: 10px; justify-content: flex-start; }
.home-filter i { display: block; font-size: 20px; color: var(--s-ink-3); }
.home-filter[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--s-accent); }
.home-filter[aria-pressed="true"] i, .home-filter[aria-pressed="true"] b { color: var(--s-accent-2); }
.home-row, .home-row-head, .home-group, .home-more { padding-left: 20px; padding-right: 20px; }
.home-row:hover { background: var(--s-sunk); }
.home-group { padding-top: 10px; padding-bottom: 10px; background: var(--s-sunk); }
.home-job { gap: 12px; }
.home-job-ico { display: grid; border: 0; border-radius: 10px; background: var(--s-tint); color: var(--s-accent-2); width: 38px; height: 38px; font-size: 19px; }

/* Right column: raised cards, icons back. */
.home-card { background: var(--s-surface); border-radius: 14px; box-shadow: var(--s-lift); overflow: hidden; }
.home-card-head { padding: 16px 20px 12px; }
.home-todo { padding: 12px 20px; }
.home-todo:hover { background: var(--s-sunk); }
.home-todo-ico { display: grid; }
.home-todo-done { padding: 16px 20px; }
.home-feed { padding: 0 20px; }
.home-feed li:last-child { border-bottom: 0; }
.home-feed .dot { display: block; }
.home-feed li { grid-template-columns: 12px 1fr auto; }

/* Badges: a soft pill again, so the stage reads as a status chip. */
.badge { background: var(--s-sunk) !important; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 14px; color: var(--s-ink-2) !important; }

@media (max-width: 1024px) {
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-stat:nth-child(3) { padding-left: 20px; }
  .home-stat:nth-child(n+3) { border-top: 0; }
}
@media (max-width: 600px) {
  .home-stats { gap: 10px; }
  .home-stat, .home-stat + .home-stat, .home-stat:nth-child(3) { padding: 14px 16px; }
  .home-stat-ico { width: 34px; height: 34px; font-size: 18px; margin-bottom: 8px; }
  .home-stat-value { font-size: 26px; }
  .home-tiles { gap: 8px; }
  .home-tile { padding: 10px 14px; min-height: 48px; }
  .home-filter { flex: none; padding: 0 12px; }
  .home-row, .home-row-head, .home-group, .home-more { padding-left: 14px; padding-right: 14px; }
}
/* Filters keep their natural width and scroll sideways if they run out of room. */
.home-filter { flex: none; padding: 0 14px; }
/* Phone shortcuts: icon and word side by side, two to a row. */
@media (max-width: 600px) {
  .home-tiles { display: grid; grid-template-columns: 1fr 1fr; }
  .home-tile { flex-direction: row; align-items: center; }
  .home-tile b { font-size: 15px; }
}

/* =============================================================
   9. LAYOUT TRIALS (his ask 29 Oct: "mess with the layouts, icons
   above the numbers, wording on another line etc"). The demo's
   Layout switch sets html[data-home-layout]; A is the default.
   ============================================================= */

/* ---- B: icon beside the number, label underneath; tall shortcut tiles ---- */
html[data-home-layout="b"] .home-stat {
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center;
}
html[data-home-layout="b"] .home-stat-ico { grid-row: 1 / span 2; margin: 0; width: 52px; height: 52px; font-size: 26px; border-radius: 14px; }
html[data-home-layout="b"] .home-stat-value { align-self: end; }
html[data-home-layout="b"] .home-stat-label { align-self: start; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; }
html[data-home-layout="b"] .home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-home-layout="b"] .home-tile { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; min-height: 104px; }
html[data-home-layout="b"] .home-tile i {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--s-tint); font-size: 21px;
}

/* ---- C: label first, big number, small icon in the corner ---- */
html[data-home-layout="c"] .home-stat { position: relative; padding-top: 18px; }
html[data-home-layout="c"] .home-stat-ico {
  position: absolute; top: 16px; right: 16px; margin: 0; width: 34px; height: 34px; font-size: 18px;
  background: var(--s-tint); color: var(--s-accent-2); box-shadow: none;
}
html[data-home-layout="c"] .home-stat.is-warn .home-stat-ico { background: var(--red-bg); color: var(--red); }
html[data-home-layout="c"] .home-stat-label { order: -1; padding-right: 44px; margin-bottom: 18px; }
html[data-home-layout="c"] .home-stat-value { font-size: 38px; }
html[data-home-layout="c"] .home-tile { border-radius: 999px; padding: 10px 18px; min-height: 46px; }

/* ---- D: one strip, tinted round icon on the left, label above the number ---- */
html[data-home-layout="d"] .home-stats {
  gap: 0; background: var(--s-surface); border-radius: 14px; box-shadow: var(--s-lift); overflow: hidden;
}
html[data-home-layout="d"] .home-stat, html[data-home-layout="d"] .home-stat + .home-stat {
  box-shadow: none; border-radius: 0; background: none;
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 0; align-items: center;
}
html[data-home-layout="d"] .home-stat + .home-stat { border-left: 1px solid var(--s-line); }
html[data-home-layout="d"] .home-stat:hover { background: var(--s-sunk); box-shadow: none; }
html[data-home-layout="d"] .home-stat-ico {
  grid-row: 1 / span 2; margin: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 22px;
  background: var(--s-tint); color: var(--s-accent-2); box-shadow: none;
}
html[data-home-layout="d"] .home-stat.is-warn .home-stat-ico { background: var(--red-bg); color: var(--red); }
html[data-home-layout="d"] .home-stat-label { order: -1; align-self: end; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
html[data-home-layout="d"] .home-stat-value { align-self: start; font-size: 28px; }
html[data-home-layout="d"] .home-tiles { gap: 0; background: var(--s-surface); border-radius: 12px; box-shadow: var(--s-lift); overflow: hidden; display: flex; }
html[data-home-layout="d"] .home-tile { flex: 1 1 0; justify-content: center; border-radius: 0; box-shadow: none; }
html[data-home-layout="d"] .home-tile + .home-tile { border-left: 1px solid var(--s-line); }
html[data-home-layout="d"] .home-tile:hover { background: var(--s-sunk); box-shadow: none; }

@media (max-width: 1024px) {
  html[data-home-layout="b"] .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-home-layout="d"] .home-stat:nth-child(3) { border-left: 0; }
  html[data-home-layout="d"] .home-stat:nth-child(n+3) { border-top: 1px solid var(--s-line); }
  html[data-home-layout="d"] .home-tiles { display: grid; grid-template-columns: 1fr 1fr; }
  html[data-home-layout="d"] .home-tile:nth-child(3) { border-left: 0; }
  html[data-home-layout="d"] .home-tile:nth-child(n+3) { border-top: 1px solid var(--s-line); }
}
@media (max-width: 600px) {
  html[data-home-layout="b"] .home-stat-ico { width: 42px; height: 42px; font-size: 21px; }
  html[data-home-layout="b"] .home-stat { column-gap: 12px; }
  html[data-home-layout="b"] .home-tile { min-height: 0; padding: 14px; }
  html[data-home-layout="c"] .home-stat-value { font-size: 30px; }
  html[data-home-layout="d"] .home-stat-ico { width: 38px; height: 38px; font-size: 19px; }
  html[data-home-layout="d"] .home-stat-value { font-size: 24px; }
}

/* =============================================================
   10. CARD TRIALS (his ask 30 Oct: "round the corners less and
   give them some different shades"). Demo's Cards switch sets
   html[data-home-cards]; 0 = as before.
   ============================================================= */
html[data-home-cards] .home-stat:nth-child(4n+1) { --hue: #2F7A57; }
html[data-home-cards] .home-stat:nth-child(4n+2) { --hue: #3A6A8F; }
html[data-home-cards] .home-stat:nth-child(4n+3) { --hue: #A0702A; }
html[data-home-cards] .home-stat:nth-child(4n+4) { --hue: #A4503F; }
html[data-home-cards] .home-stat.is-warn { --hue: #B23A30; }
html[data-home-cards="1"], html[data-home-cards="3"] { --home-r: 6px; }
html[data-home-cards="2"], html[data-home-cards="4"] { --home-r: 4px; }
html[data-home-cards] :is(.home-stat, .home-stat + .home-stat, .home-tile, .home-panel, .home-card, .home-stats) { border-radius: var(--home-r) !important; }
html[data-home-cards] .home-stat-ico { border-radius: calc(var(--home-r) - 1px) !important; }

/* 1 Tinted: each card a pale wash of its own colour, solid icon to match */
html[data-home-cards="1"] .home-stat { background: color-mix(in srgb, var(--hue) 11%, var(--s-surface)); }
html[data-home-cards="1"] .home-stat-ico { background: var(--hue); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
html[data-home-cards="1"] .home-stat-label { color: color-mix(in srgb, var(--hue) 70%, var(--s-ink)); }

/* 2 Edge: white card, a coloured bar down the left, tinted icon */
html[data-home-cards="2"] .home-stat, html[data-home-cards="2"] .home-stat + .home-stat { box-shadow: var(--s-lift), inset 4px 0 0 var(--hue); padding-left: 24px; }
html[data-home-cards="2"] .home-stat-ico { background: color-mix(in srgb, var(--hue) 14%, var(--s-surface)); color: var(--hue); box-shadow: none; }

/* 3 Deep: solid colour cards, white type */
html[data-home-cards="3"] .home-stat { background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 92%, #fff), var(--hue)); }
html[data-home-cards="3"] .home-stat :is(.home-stat-value, .home-stat-label) { color: #fff !important; }
html[data-home-cards="3"] .home-stat-label { opacity: .85; }
html[data-home-cards="3"] .home-stat-ico { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

/* 4 Greens: one family, light to dark */
html[data-home-cards="4"] .home-stat:nth-child(4n+1) { background: color-mix(in srgb, #1D7A57 7%, var(--s-surface)); }
html[data-home-cards="4"] .home-stat:nth-child(4n+2) { background: color-mix(in srgb, #1D7A57 16%, var(--s-surface)); }
html[data-home-cards="4"] .home-stat:nth-child(4n+3) { background: color-mix(in srgb, #1D7A57 28%, var(--s-surface)); }
html[data-home-cards="4"] .home-stat:nth-child(4n+4) { background: #1D6B4D; }
html[data-home-cards="4"] .home-stat:nth-child(4n+4) :is(.home-stat-value, .home-stat-label) { color: #fff !important; }
html[data-home-cards="4"] .home-stat:nth-child(4n+4) .home-stat-ico { background: rgba(255,255,255,.18); }
html[data-home-cards="4"] .home-stat.is-warn .home-stat-value { color: var(--red); }

/* 3 in blue (his pick 30 Oct: "option 3 … more blue, lightish, very vibrant").
   5 Sky, 6 Cyan-blue, 7 Light-to-bright range. Same build as 3. */
html:is([data-home-cards="5"],[data-home-cards="6"],[data-home-cards="7"]) { --home-r: 6px; }
html[data-home-cards="5"] .home-stat:nth-child(n) { --hue: #2D8CFF; }
html[data-home-cards="6"] .home-stat:nth-child(n) { --hue: #0FA0E8; }
html[data-home-cards="7"] .home-stat:nth-child(4n+1) { --hue: #4AAEFF; }
html[data-home-cards="7"] .home-stat:nth-child(4n+2) { --hue: #2D97FF; }
html[data-home-cards="7"] .home-stat:nth-child(4n+3) { --hue: #1A80F5; }
html[data-home-cards="7"] .home-stat:nth-child(4n+4) { --hue: #106BE0; }
html:is([data-home-cards="5"],[data-home-cards="6"],[data-home-cards="7"]) .home-stat.is-warn { --hue: #E5483C; }
html:is([data-home-cards="5"],[data-home-cards="6"],[data-home-cards="7"]) .home-stat { background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 85%, #fff), var(--hue)); }
html:is([data-home-cards="5"],[data-home-cards="6"],[data-home-cards="7"]) .home-stat :is(.home-stat-value, .home-stat-label) { color: #fff !important; }
html:is([data-home-cards="5"],[data-home-cards="6"],[data-home-cards="7"]) .home-stat-label { opacity: .9; }
html:is([data-home-cards="5"],[data-home-cards="6"],[data-home-cards="7"]) .home-stat-ico { background: rgba(255,255,255,.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
html:is([data-home-cards="5"],[data-home-cards="6"],[data-home-cards="7"]) .home-stat:hover { box-shadow: 0 2px 4px rgba(16,107,224,.25), 0 14px 28px -10px rgba(16,107,224,.45); }

/* =============================================================
   11. NUMBER FONT TRIALS (30 Oct, "not sure on the font for the
   numbers"). html[data-home-num] via the demo switch; [data-num]
   on a .home-stats copy for side-by-side shots. 1 = as now.
   ============================================================= */
:is(html[data-home-num="2"], [data-num="2"]) .home-stat-value { font-weight: 300; font-size: 38px; letter-spacing: -0.03em; }
:is(html[data-home-num="3"], [data-num="3"]) .home-stat-value { font-family: ui-rounded, "SF Pro Rounded", "Nunito", sans-serif; font-weight: 800; font-size: 34px; }
:is(html[data-home-num="4"], [data-num="4"]) .home-stat-value { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 42px; letter-spacing: 0; line-height: 1; }
:is(html[data-home-num="5"], [data-num="5"]) .home-stat-value { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 36px; letter-spacing: -0.01em; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }
:is(html[data-home-num="6"], [data-num="6"]) .home-stat-value { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 30px; letter-spacing: -0.02em; }
:is(html[data-home-num="7"], [data-num="7"]) .home-stat-value { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 36px; font-stretch: 112%; letter-spacing: -0.01em; }

/* His pick 30 Oct: condensed numbers (trial 4) are the default now. */
.home-stat-value { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 600; font-size: 42px; letter-spacing: 0; line-height: 1; }
@media (max-width: 600px) { .home-stat-value { font-size: 34px; } }
/* Phones: Find a job would take a whole row under the title; the Job Book is a tap away. */
@media (max-width: 600px) { #page-header:has(.home-find) { display: none; } }

/* =============================================================
   12. PHONE TAB BAR (30 Oct, his idea: "a bar along the bottom,
   like Instagram, the plus in the middle for add a job").
   ============================================================= */
#tabbar { display: none; }
@media (max-width: 600px) {
  #tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--s-surface) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    border-top: 1px solid var(--s-line);
  }
  .tabbar-item {
    display: grid; justify-items: center; gap: 2px; min-height: 50px; padding: 4px 0; border: 0; background: none;
    font: 500 11px/1.2 var(--s-font); color: var(--s-ink-3); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .tabbar-item i { font-size: 25px; }
  .tabbar-item.active { color: var(--s-accent); }
  .tabbar-item.active i { font-weight: bold; }
  .tabbar-item:active i { transform: scale(0.9); }
  .tabbar-new { align-self: center; justify-self: center; display: grid; place-items: center; min-height: 0; width: 56px; height: 44px; padding: 0;
    border-radius: 14px; background: var(--s-ico); color: #fff; box-shadow: 0 6px 14px -6px rgba(16,88,255,.6), inset 0 1px 0 rgba(255,255,255,.25); }
  .tabbar-new i { font-size: 26px; }
  .tabbar-new.active { color: #fff; }
  /* Room for the bar; floating buttons sit above it, and plain New Job goes (the + does that). */
  #page-body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  #fab-new-job.fab-is-new { display: none !important; }
  #fab-new-job, #fab-take-payment { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  #fab-take-payment { bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important; }
  #fab-new-job.fab-is-new ~ #fab-take-payment { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  .scan-result { z-index: 2600; }
}
@media (max-width: 600px) {
  /* Help: a round icon above the bar's left end, not over Home / Job Book. */
  #help-btn { left: 16px !important; bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
  #help-btn span { display: none; }
}

/* Tablet trial (30 Oct, "and for tablet too maybe? try it"): the rail goes,
   a floating bar sits bottom centre. html[data-tabbar-tablet] (demo switch). */
@media (min-width: 601px) and (max-width: 1366px) and (orientation: portrait) {
  html[data-tabbar-tablet] #sidebar { display: none; }
  html[data-tabbar-tablet] #tabbar {
    display: flex; gap: 4px; align-items: center; position: fixed; z-index: 70;
    left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 6px; border-radius: 18px; border: 1px solid var(--s-line);
    background: color-mix(in srgb, var(--s-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.06);
  }
  html[data-tabbar-tablet] .tabbar-item {
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: none;
    font: 600 15px var(--s-font); color: var(--s-ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html[data-tabbar-tablet] .tabbar-item i { font-size: 22px; }
  html[data-tabbar-tablet] .tabbar-item span { white-space: nowrap; }
  html[data-tabbar-tablet] .tabbar-item.active { background: var(--s-tint); color: var(--s-accent-2); }
  html[data-tabbar-tablet] .tabbar-new { width: 64px; height: 48px; padding: 0; justify-content: center; margin: 0 6px;
    background: var(--s-ico); color: #fff; box-shadow: 0 6px 14px -6px rgba(16,88,255,.6), inset 0 1px 0 rgba(255,255,255,.25); }
  html[data-tabbar-tablet] .tabbar-new i { font-size: 26px; }
  html[data-tabbar-tablet] .tabbar-new.active { background: var(--s-ico); color: #fff; }
  html[data-tabbar-tablet] #page-body { padding-bottom: 110px; }
  html[data-tabbar-tablet] #fab-new-job.fab-is-new { display: none !important; }
  html[data-tabbar-tablet] #fab-new-job, html[data-tabbar-tablet] #fab-take-payment { bottom: 24px !important; }
  html[data-tabbar-tablet] #help-btn { left: 20px !important; bottom: 20px !important; width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
  html[data-tabbar-tablet] #help-btn span { display: none; }
}

/* Phone bar floats clear of the iPhone's home swipe line (30 Oct: "needs
   moving up, easy to hit Siri's instead"). */
@media (max-width: 600px) {
  #tabbar {
    left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 6px; border: 1px solid var(--s-line); border-radius: 22px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.06);
  }
  #page-body { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
  #fab-new-job, #fab-take-payment, #fab-new-job.fab-is-new ~ #fab-take-payment { bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important; }
  #fab-take-payment { bottom: calc(166px + env(safe-area-inset-bottom, 0px)) !important; }
  #help-btn { bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Collapse button + icon-only rail (bigger screens with the side menu). */
.sidebar-collapse { display: none; }
@media (min-width: 601px) {
  .sidebar-collapse {
    display: flex; align-items: center; gap: 12px; margin: 4px 12px 8px; padding: 10px 12px; min-height: 44px;
    border: 0; border-radius: 8px; background: none; color: var(--s-ink-3); font: 500 15px var(--s-font); cursor: pointer;
  }
  .sidebar-collapse:hover { background: var(--s-sunk); color: var(--s-ink); }
  .sidebar-collapse i { font-size: 20px; }
  #sidebar { transition: width .22s ease, min-width .22s ease; }
  html.rail-mini { --sidebar-w: 76px; }
  html.rail-mini #sidebar :is(.logo-name, .nav-label, .sidebar-collapse span, .sidebar-footer span, .sidebar-user-email, #sidebar-page-label) { display: none; }
  html.rail-mini .sidebar-header { padding-left: 0; padding-right: 0; }
  html.rail-mini .logo { justify-content: center; }
  html.rail-mini .nav-list { padding-left: 10px; padding-right: 10px; }
  html.rail-mini .nav-item, html.rail-mini .nav-item.nav-item-cta { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  html.rail-mini .sidebar-collapse { justify-content: center; margin: 4px 10px 8px; }
  html.rail-mini .sidebar-collapse i { transform: scaleX(-1); }
  html.rail-mini .sidebar-footer, html.rail-mini .sidebar-user { justify-content: center; padding-left: 0; padding-right: 0; }
  html.rail-mini .sidebar-install { margin: 0 10px 12px; padding: 10px 0; justify-content: center; font-size: 0; }
  html.rail-mini .sidebar-install i { font-size: 20px; }
  html.rail-mini #help-btn { width: 44px; left: 16px; padding: 0; justify-content: center; }
  html.rail-mini #help-btn span { display: none; }
  html.rail-mini .demo-pill.in-rail { display: none; }
}

/* Bar stands out more (30 Oct, his iPad photo: it melted into dark mode).
   Solid, lighter than the page, a clear edge and a deeper shadow. */
@media (max-width: 600px), (min-width: 601px) and (max-width: 1366px) and (orientation: portrait) {
  #tabbar {
    background: var(--s-surface) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 14px 40px -12px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.10) !important;
  }
  html[data-theme="dark"] #tabbar {
    background: #292C39 !important; border-color: rgba(255,255,255,.24) !important;
    box-shadow: 0 16px 44px -10px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4) !important;
  }
  html[data-theme="dark"] .tabbar-item { color: #AEB3C1; }
  html[data-theme="dark"] .tabbar-item.active:not(.tabbar-new) { background: rgba(16,88,255,.22); color: #6E95FF; }
}
@media (max-width: 600px) { .tabbar-item.active:not(.tabbar-new) { border-radius: 14px; background: var(--s-tint); } }
@media (max-width: 600px), (min-width: 601px) and (max-width: 1366px) and (orientation: portrait) {
  html[data-theme="dark"] #help-btn { background: #292C39; border-color: rgba(255,255,255,.24); box-shadow: 0 10px 30px -10px rgba(0,0,0,.85); }
}

/* =============================================================
   13. PRODUCTION CARD TRIALS (30 Oct, his ask: "work on these job cards")
   html[data-prod-cards] 1-4, switched from the demo pill. 0 = as before.
   ============================================================= */
html[data-prod-cards] .board-card.wk-card { border-radius: 6px; padding: 8px; border-width: 1px; }
html[data-prod-cards] .wk-pic-wrap { box-shadow: none; border-radius: 4px; }
html[data-prod-cards] .wk-card .board-card-waiting,
html[data-prod-cards] .wk-card .board-card-onorder,
html[data-prod-cards] .wk-card .board-card-ordered,
html[data-prod-cards] .wk-flag { font-size: 13px; min-height: 0; padding: 3px 8px; border-radius: 4px; margin-top: 4px; align-self: flex-start; }
html[data-prod-cards] .wk-name { font-size: 16px; }
html[data-prod-cards] .wk-spec { font-size: 13px; }
html[data-prod-cards] .wk-desc { font-size: 14px; }
html[data-prod-cards] .wk-board .board-col-body { gap: 8px; }

/* 1 · Row: small picture on the left, words on the right */
html[data-prod-cards="1"] .board-card.wk-card { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; }
html[data-prod-cards="1"] canvas.wk-pic { height: 92px !important; }
html[data-prod-cards="1"] .wk-card-body { padding: 0; gap: 1px; min-width: 0; }

/* 2 · Slim picture on top, name first */
html[data-prod-cards="2"] canvas.wk-pic { height: 96px !important; }
html[data-prod-cards="2"] .wk-card-body { padding: 8px 2px 2px; gap: 1px; }
html[data-prod-cards="2"] .wk-name { order: -1; font-size: 17px; }
html[data-prod-cards="2"] .wk-card-top { order: 0; }
html[data-prod-cards="2"] .wk-no { font-size: 13px; font-weight: 600; color: var(--s-ink-2); }
html[data-prod-cards="2"] .wk-count { font-size: 12px; padding: 0 6px; }

/* 3 · No picture, coloured edge for where the wood is */
html[data-prod-cards="3"] .wk-pic-wrap { display: none; }
html[data-prod-cards="3"] .board-card.wk-card { border-left: 4px solid var(--s-line); padding: 10px 12px; }
html[data-prod-cards="3"] .board-card.wk-card:has(.board-card-waiting) { border-left-color: #D99A1E; }
html[data-prod-cards="3"] .board-card.wk-card:has(.board-card-onorder) { border-left-color: var(--s-accent); }
html[data-prod-cards="3"] .board-card.wk-card:has(.board-card-ordered) { border-left-color: #2E9E5B; }
html[data-prod-cards="3"] .board-card.wk-card:has(.wk-flag-red) { border-left-color: #D2382B; }
html[data-prod-cards="3"] .wk-card-body { padding: 0; gap: 1px; }

/* 4 · Big job number, picture as a thumbnail on the right */
html[data-prod-cards="4"] .board-card.wk-card { display: grid; grid-template-columns: 1fr 76px; gap: 10px; align-items: start; padding: 10px; }
html[data-prod-cards="4"] .wk-pic-wrap { grid-column: 2; grid-row: 1; }
html[data-prod-cards="4"] canvas.wk-pic { height: 86px !important; }
html[data-prod-cards="4"] .wk-card-body { grid-column: 1; grid-row: 1; padding: 0; gap: 1px; min-width: 0; }
html[data-prod-cards="4"] .wk-no { font: 600 30px/1 "Barlow Condensed", "Arial Narrow", sans-serif; color: var(--s-accent); letter-spacing: 0; }
html[data-prod-cards="4"] .wk-card-top { margin-bottom: 2px; }
/* 2, his pick (30 Oct): job number small and grey, top right beside the name */
html[data-prod-cards="2"] .wk-card-body { position: relative; }
html[data-prod-cards="2"] .wk-card-top { position: absolute; top: 9px; right: 2px; gap: 5px; }
html[data-prod-cards="2"] .wk-no { font-size: 12px; font-weight: 500; color: var(--s-ink-3, var(--s-ink-2)); opacity: .8; }
html[data-prod-cards="2"] .wk-name { padding-right: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Extras on the card, off unless a variation shows them */
.wk-mname, .wk-duedate { display: none; }
html[data-prod-cards="2"] .wk-duedate i { margin-right: 4px; }

/* 2 variations (30 Oct, "build on 2"): html[data-prod-v] a / b / c */
/* a · picture runs edge to edge, the wood status sits on the picture */
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) .board-card.wk-card { padding: 0; overflow: hidden; }
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) .wk-pic-wrap { border-radius: 0; }
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) canvas.wk-pic { height: 112px !important; }
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) .wk-card-body { padding: 9px 12px 11px; }
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) .wk-card-top { top: 11px; right: 12px; }
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) .wk-card :is(.board-card-waiting, .board-card-onorder, .board-card-ordered, .wk-flag) { position: absolute; top: 8px; left: 8px; margin: 0; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) .wk-card .wk-flag + :is(.board-card-waiting, .board-card-onorder, .board-card-ordered) { top: 40px; }
/* b · as a, and the picture's background takes the status colour */
html[data-prod-v="b"] .wk-card:has(.board-card-waiting) .wk-pic-wrap { background: #FBEFD6; }
html[data-prod-v="b"] .wk-card:has(.board-card-onorder) .wk-pic-wrap { background: #E1EEFD; }
html[data-prod-v="b"] .wk-card:has(.board-card-ordered) .wk-pic-wrap { background: #E0F2E7; }
html[data-prod-v="b"] .wk-card:has(.wk-flag-red) .wk-pic-wrap { background: #FBE3E0; }
html[data-theme="dark"][data-prod-v="b"] .wk-card:has(.board-card-waiting) .wk-pic-wrap { background: #3A3020; }
html[data-theme="dark"][data-prod-v="b"] .wk-card:has(.board-card-onorder) .wk-pic-wrap { background: #1C2B3F; }
html[data-theme="dark"][data-prod-v="b"] .wk-card:has(.board-card-ordered) .wk-pic-wrap { background: #1E3328; }
html[data-theme="dark"][data-prod-v="b"] .wk-card:has(.wk-flag-red) .wk-pic-wrap { background: #3F2220; }
/* c · as a, plus the moulding by name and the due date */
html[data-prod-v="c"] .wk-mname { display: block; font-size: 13px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-prod-v="c"] .wk-duedate { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--s-ink); margin-top: 4px; }
/* a/b/c: status top left and job number top right, both on the picture */
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) .wk-card-body { position: static; }
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) .wk-card-top { top: 8px; right: 8px; background: var(--s-surface); border-radius: 4px; padding: 2px 6px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) .wk-card-top .wk-count { padding: 0 4px; }
html[data-prod-cards="2"]:is([data-prod-v="a"], [data-prod-v="b"], [data-prod-v="c"]) .wk-name { padding-right: 0; }

/* Round 2 of variations on 2 (30 Oct, "keep trying"): d / e / f, none of a/b/c's overlays */
html[data-prod-v="d"] .wk-card-body, html[data-prod-v="e"] .wk-card-body, html[data-prod-v="f"] .wk-card-body { position: static; }
html[data-prod-v="d"] .wk-card-top, html[data-prod-v="e"] .wk-card-top, html[data-prod-v="f"] .wk-card-top { position: static; }
html[data-prod-v="d"] .wk-name, html[data-prod-v="e"] .wk-name, html[data-prod-v="f"] .wk-name { padding-right: 0; }

/* d · gallery label: the frame on the card itself, words centred under it like a label on a wall */
html[data-prod-v="d"] .board-card.wk-card { padding: 10px 12px 14px; }
html[data-prod-v="d"] .wk-pic-wrap { background: transparent; }
html[data-prod-v="d"] canvas.wk-pic { height: 150px !important; }
html[data-prod-v="d"] .wk-card-body { align-items: center; text-align: center; padding: 6px 0 0; }
html[data-prod-v="d"] .wk-name { order: -1; font-size: 17px; }
html[data-prod-v="d"] .wk-card-top { order: 3; margin-top: 2px; }
html[data-prod-v="d"] .wk-card :is(.board-card-waiting, .board-card-onorder, .board-card-ordered, .wk-flag) { align-self: center; order: 2; }

/* e · two side by side: picture and name only, more on screen */
html[data-prod-v="e"] .wk-board .board-col-body { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
html[data-prod-v="e"] .board-card.wk-card { padding: 6px; }
html[data-prod-v="e"] canvas.wk-pic { height: 96px !important; }
html[data-prod-v="e"] .wk-card-body { padding: 6px 2px 2px; }
html[data-prod-v="e"] .wk-name { order: -1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-prod-v="e"] .wk-spec { font-size: 12px; }
html[data-prod-v="e"] .wk-card-top { display: none; }
html[data-prod-v="e"] .wk-card :is(.board-card-waiting, .board-card-onorder, .board-card-ordered, .wk-flag) { font-size: 11px; padding: 2px 6px; }

/* f · half and half: a big picture on the right, words on the left */
html[data-prod-v="f"] .board-card.wk-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; overflow: hidden; }
html[data-prod-v="f"] .wk-pic-wrap { grid-column: 2; grid-row: 1; border-radius: 0; }
html[data-prod-v="f"] canvas.wk-pic { height: 100% !important; min-height: 130px; }
html[data-prod-v="f"] .wk-card-body { grid-column: 1; grid-row: 1; padding: 12px 0 12px 12px; min-width: 0; }
html[data-prod-v="f"] .wk-name { order: -1; font-size: 17px; }
html[data-prod-v="f"] .wk-card-top { order: 5; margin-top: 6px; }

/* g · frame first (30 Oct, "100% need the frame, not sure waiting on wood is essential"):
   big picture, name and size under it; wood only shows when it's a problem, as a small round mark on the picture */
html[data-prod-v="g"] .wk-card-body { position: static; padding: 8px 4px 2px; gap: 1px; }
html[data-prod-v="g"] .board-card.wk-card { position: relative; padding: 8px; }
html[data-prod-v="g"] canvas.wk-pic { height: 140px !important; }
html[data-prod-v="g"] .wk-card-top { position: static; display: none; }
html[data-prod-v="g"] .wk-name { order: -1; padding-right: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-prod-v="g"] .wk-desc { display: none; }
html[data-prod-v="g"] .wk-card .board-card-ordered { display: none; }
html[data-prod-v="g"] .wk-card :is(.board-card-waiting, .board-card-onorder, .wk-flag) { position: absolute; top: 14px; right: 14px; margin: 0; width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
html[data-prod-v="g"] .wk-card :is(.board-card-waiting, .board-card-onorder, .wk-flag) i { font-size: 15px; margin: 0; }
html[data-prod-v="g"] .wk-card .wk-flag + :is(.board-card-waiting, .board-card-onorder) { right: 48px; }

/* Phones: no menu dropdown in the top bar (30 Oct, "not needed, the bar along the bottom
   does the same"). The page name stays; the caret and the fold-down list go. */
@media (max-width: 600px) {
  .nav-caret, #sidebar .nav-list { display: none !important; }
  .sidebar-header { cursor: default; pointer-events: none; }
}
/* g, 30 Oct: "in production the name isn't needed really, job number for identifying".
   Job number leads, the name drops to small grey. */
html[data-prod-v="g"] .wk-card-top { display: flex; order: -2; align-items: baseline; gap: 6px; }
html[data-prod-v="g"] .wk-no { font: 600 22px/1.1 "Barlow Condensed", "Arial Narrow", sans-serif; color: var(--s-ink); opacity: 1; letter-spacing: 0; }
html[data-prod-v="g"] .wk-count { font-size: 12px; padding: 0 6px; }
html[data-prod-v="g"] .wk-name { order: 1; font-size: 13px; font-weight: 500; color: var(--s-ink-3, var(--s-ink-2)); }
html[data-prod-v="g"] .wk-spec { order: 0; font-size: 14px; color: var(--s-ink-2); }

/* g, 30 Oct: "mount size code etc… in the right hand side where there's blank space".
   The picture box splits: frame on the left, what it's made of on the right. */
.wk-facts { display: none; }
html[data-prod-v="g"] .board-card.wk-card:has(.wk-facts) { display: grid; grid-template-columns: 58% 1fr; column-gap: 12px; align-items: center; }
html[data-prod-v="g"] .wk-card:has(.wk-facts) .wk-card-body { grid-column: 1 / -1; }
html[data-prod-v="g"] .wk-facts { display: grid; gap: 8px; margin: 0; padding: 4px 4px 4px 0; align-content: center; min-width: 0; }
html[data-prod-v="g"] .wk-facts dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--s-ink-3, var(--s-ink-2)); }
html[data-prod-v="g"] .wk-facts dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--s-ink); overflow-wrap: anywhere; }
/* the wood mark moves to the picture's top left, clear of the list */
html[data-prod-v="g"] .wk-card:has(.wk-facts) :is(.board-card-waiting, .board-card-onorder, .wk-flag) { right: auto; left: 14px; }
html[data-prod-v="g"] .wk-card:has(.wk-facts) .wk-flag + :is(.board-card-waiting, .board-card-onorder) { right: auto; left: 48px; }

/* Phone portrait bar follows the iPhone's rounded screen corners (30 Oct, his photo).
   Landscape and iPad keep their bar as it is. */
@media (max-width: 600px) and (orientation: portrait) {
  #tabbar { border-radius: 40px; padding: 6px 8px; }
  .tabbar-item.active:not(.tabbar-new) { border-radius: 30px; }
  .tabbar-new { border-radius: 22px; }
}

/* Phone top bar: FrameFlow centred, no page name (30 Oct; the bottom bar already shows where you are). */
@media (max-width: 600px) {
  #sidebar-page-label { display: none !important; }
  .sidebar-header { padding: 4px 14px 6px; }
  .sidebar-header .logo-icon-wrap { width: 26px; height: 26px; }
  .sidebar-header .logo-name { font-size: 17px; }
  #sidebar { border-bottom-color: transparent; }
  .sidebar-header .logo { justify-content: center; width: 100%; }
}

/* =============================================================
   14. HOME NUMBERS TRIAL (30 Oct, his ask: "more stats… rather than showing
   jobs that are just shown on the job list"; "takings, orders").
   Default on; html[data-home="list"] brings the old job list back (demo pill).
   ============================================================= */
.home-main-list { display: none; }
html[data-home="list"] .home-main-list { display: grid; }
html[data-home="list"] .home-main-nums { display: none; }
.home-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-content: start; min-width: 0; }
.home-num-card { min-width: 0; }
.home-num-big { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-top: 16px; font-variant-numeric: tabular-nums; }
.home-num-big small { font-size: 16px; font-weight: 500; color: var(--s-ink-2); letter-spacing: 0; }
.home-num-vs { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--s-ink-3); }
.home-num-vs.is-up { color: #2E9E5B; }
.home-num-vs.is-down { color: #C2410C; }
.home-num-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--s-line); }
.home-num-row span { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--s-ink-3); }
.home-num-row b { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.home-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 110px; margin-top: 20px; }
.home-bar { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; }
.home-bar i { align-self: end; display: block; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--s-accent) 28%, transparent); }
.home-bar.is-now i { background: var(--s-accent); }
.home-bar span { font-size: 11px; color: var(--s-ink-3); }
@media (max-width: 900px) { .home-nums { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .home-num-big { font-size: 34px; } .home-nums { gap: 24px; } }
.home-num-card > :not(.home-card-head) { margin-left: 20px; margin-right: 20px; }
.home-num-card { padding-bottom: 18px; }
.home-num-row { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); row-gap: 14px; }
@media (max-width: 600px) { .home-num-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-bars { height: 90px; } }

/* Figures hidden until tapped (30 Oct, "I open it in front of customers"). */
html:not([data-show-money]) .home-money { color: transparent !important; background: rgba(0,0,0,.08); border-radius: 6px; cursor: pointer; user-select: none; display: inline-block; min-width: 2.2em; }
html:not([data-show-money]) .home-stat .home-money { background: rgba(255,255,255,.28); }
html[data-theme="dark"]:not([data-show-money]) .home-money { background: rgba(255,255,255,.12); }
html:not([data-show-money]) .home-bar[title] { pointer-events: none; }
.home-eye[aria-pressed="true"] { color: var(--s-ink-2); }

/* =============================================================
   15. ADD FRAME: COMPACT ROWS TRIAL (2 Nov, his pick: "how we input a frame…
   feels cluttered"). One line per part; tap one to open just that part.
   html[data-frame-form="long"] (demo pill) brings the old long form back.
   ============================================================= */
.fr-rows, .fr-back { display: none; }
html[data-frame-form="rows"] #frame-form-active[data-open=""] .fr-rows { display: block; margin: -4px -4px 8px; }
html[data-frame-form="rows"] #frame-form-active[data-open=""] .fr-sec { display: none; }
html[data-frame-form="rows"] #frame-form-active:not([data-open=""]) .fr-back { display: inline-flex; }
.fr-row { display: grid; grid-template-columns: 24px auto minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 6px;
  border: 0; border-bottom: 1px solid var(--s-line); background: none; text-align: left; font: inherit; color: var(--s-ink); cursor: pointer; }
.fr-row:last-child { border-bottom: 0; }
.fr-row:hover { background: var(--s-sunk); }
.fr-row > i:first-child { font-size: 20px; color: var(--s-accent); }
.fr-row-label { font-size: 16px; font-weight: 600; white-space: nowrap; }
.fr-row-val { justify-self: end; max-width: 100%; font-size: 15px; color: var(--s-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-row-val.is-empty { color: var(--s-ink-3); font-weight: 400; }
.fr-row-go { font-size: 14px; color: var(--s-ink-3); }
.fr-back { align-items: center; gap: 6px; min-height: 40px; margin: -6px 0 6px -6px; padding: 0 10px; border: 0; border-radius: 8px; background: none;
  font: 600 15px var(--s-font); color: var(--s-accent); cursor: pointer; }
.fr-back:hover { background: var(--s-sunk); }
html[data-frame-form="rows"] #frame-form-active[data-open="size"] .fr-sec:not([data-sec="size"]) { display: none; }
html[data-frame-form="rows"] #frame-form-active[data-open="moulding"] .fr-sec:not([data-sec="moulding"]) { display: none; }
html[data-frame-form="rows"] #frame-form-active[data-open="mount"] .fr-sec:not([data-sec="mount"]) { display: none; }
html[data-frame-form="rows"] #frame-form-active[data-open="glass"] .fr-sec:not([data-sec="glass"]) { display: none; }
html[data-frame-form="rows"] #frame-form-active[data-open="back"] .fr-sec:not([data-sec="back"]) { display: none; }
html[data-frame-form="rows"] #frame-form-active[data-open="extras"] .fr-sec:not([data-sec="extras"]) { display: none; }
html[data-frame-form="rows"] #frame-form-active[data-open="details"] .fr-sec:not([data-sec="details"]) { display: none; }
html[data-frame-form="rows"] #frame-form-active[data-open="price"] .fr-sec:not([data-sec="price"]) { display: none; }
.fr-next { display: none; }
html[data-frame-form="rows"] #frame-form-active:not([data-open=""]) .fr-next { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 18px;
  border: 1px solid var(--s-line); border-radius: 10px; background: var(--s-surface); font: 600 16px var(--s-font); color: var(--s-accent); cursor: pointer; }
html[data-frame-form="rows"] #frame-form-active:not([data-open=""]) .fr-next:hover { background: var(--s-sunk); }


/* =============================================================
   16. ADD FRAME, LINED UP (2 Nov: condensed was "kind of okay but messy,
   words, boxes all over the place"). One grid for the whole form: a label
   column on the left, every box the same height and style, a hairline
   between parts. html[data-frame-form="tight"], the demo default.
   ============================================================= */
html[data-frame-form="tight"] #frame-form-active { --lab: 92px; }
html[data-frame-form="tight"] .fr-rows, html[data-frame-form="tight"] .fr-back, html[data-frame-form="tight"] .fr-next { display: none !important; }
html[data-frame-form="tight"] #frame-form-active .card-body { padding-top: 4px; }

/* each part: label on the left, boxes on the right, a line underneath */
html[data-frame-form="tight"] #frame-form-active .fr-sec { position: relative; padding: 12px 0 12px var(--lab); border-bottom: 1px solid var(--s-line); }
html[data-frame-form="tight"] #frame-form-active .fr-sec:last-of-type { border-bottom: 0; }
html[data-frame-form="tight"] #frame-form-active .fi-section-label,
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="size"]::before {
  position: absolute; left: 0; top: 12px; height: 44px; width: calc(var(--lab) - 10px); margin: 0; padding: 0; border: 0;
  display: flex; align-items: center; font: 600 15px/1.2 var(--s-font); letter-spacing: 0; text-transform: none; color: var(--s-ink-2); }
html[data-frame-form="tight"] #frame-form-active .fi-section-label::before { display: none; }
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="size"]::before { content: "Size"; }
/* shorter names for two labels */
html[data-frame-form="tight"] .fr-sec[data-sec="back"] .fi-section-label { font-size: 0; }
html[data-frame-form="tight"] .fr-sec[data-sec="back"] .fi-section-label::after { content: "Back"; font-size: 15px; }
html[data-frame-form="tight"] .fr-sec[data-sec="extras"] > .fi-section-label:first-of-type { font-size: 0; }
html[data-frame-form="tight"] .fr-sec[data-sec="extras"] > .fi-section-label:first-of-type::after { content: "Extras"; font-size: 15px; }
html[data-frame-form="tight"] .fr-sec[data-sec="extras"] > .fi-section-label ~ .fi-section-label { display: none; }

/* every box the same */
html[data-frame-form="tight"] #frame-form-active :is(input[type="text"], input[type="number"], select, textarea):not(.qty-input) {
  height: 44px; min-height: 44px; padding: 0 12px !important; border: 1px solid var(--s-line-2, #D6D3CC) !important; border-radius: 8px !important;
  background: var(--s-surface); font: 400 16px var(--s-font) !important; color: var(--s-ink); box-shadow: none !important; }
html[data-frame-form="tight"] #frame-form-active :is(input, select, textarea):focus { border-color: var(--s-accent) !important; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-accent) 18%, transparent) !important; }
html[data-frame-form="tight"] #frame-form-active textarea { padding-top: 11px !important; resize: vertical; }

/* the first part is several rows, each with its own label */
html[data-frame-form="tight"] .fr-sec[data-sec="details"] { padding-left: 0; display: grid; gap: 8px; }
html[data-frame-form="tight"] .fr-sec[data-sec="details"] > label,
html[data-frame-form="tight"] .fi-qty-block, html[data-frame-form="tight"] .fi-photo-block {
  position: relative; display: block; margin: 0 !important; padding-left: var(--lab); font-size: 0; min-height: 44px; }
html[data-frame-form="tight"] .fr-sec[data-sec="details"] > label::before,
html[data-frame-form="tight"] .fi-qty-block > .fi-qty-label, html[data-frame-form="tight"] .fi-photo-block > .fi-qty-label {
  position: absolute; left: 0; top: 0; height: 44px; display: flex; align-items: center; font: 600 15px var(--s-font); letter-spacing: 0; text-transform: none; color: var(--s-ink-2); }
html[data-frame-form="tight"] .fr-sec[data-sec="details"] > label:has(#fi-desc)::before { content: "Name"; }
html[data-frame-form="tight"] .fr-sec[data-sec="details"] > label:has(#fi-type)::before { content: "Type"; }
html[data-frame-form="tight"] .fr-sec[data-sec="details"] > label:has(#fi-notes)::before { content: "Notes"; }
html[data-frame-form="tight"] .fr-sec[data-sec="details"] > label > :is(input, select, textarea) { width: 100%; }
html[data-frame-form="tight"] .fi-qty-block { display: flex; align-items: center; gap: 10px; }
html[data-frame-form="tight"] .fi-qty-block .qty-stepper { width: 132px; height: 44px; }
html[data-frame-form="tight"] .fi-qty-total { font-size: 14px; color: var(--s-ink-3); }
html[data-frame-form="tight"] .fi-photo-block .photo-upload-row { margin: 0; justify-content: flex-start; }
html[data-frame-form="tight"] .fi-photo-block .photo-upload-btn { width: auto; min-height: 44px; padding: 0 14px; flex-direction: row; gap: 8px; font-size: 15px; }
html[data-frame-form="tight"] .fi-photo-block .photo-grid { margin-top: 8px; }
/* the second "details" part is just Notes, near the end */
html[data-frame-form="tight"] .fr-sec[data-sec="details"]:has(#fi-notes) { display: block; }

/* size: two boxes and the outside size, no grey panel */
html[data-frame-form="tight"] .fi-size-widget { margin: 0; padding: 0; gap: 8px; background: none; border: 0; }
html[data-frame-form="tight"] .fi-size-unit, html[data-frame-form="tight"] .fi-size-suffix { display: none; }
html[data-frame-form="tight"] .fi-size-num { font-size: 18px !important; font-weight: 600 !important; text-align: left; }
html[data-frame-form="tight"] .fi-size-sep { padding: 0; font-size: 16px; }
html[data-frame-form="tight"] #fi-external-row { margin: 6px 0 0; padding: 0; background: none; border: 0; font-size: 13px; color: var(--s-ink-3); }
html[data-frame-form="tight"] #fi-external-row strong { font-size: 13px; color: var(--s-ink-2); }

/* moulding, mount, glass, back: the box, its info underneath, quiet add links */
html[data-frame-form="tight"] #frame-form-active .moulding-item { margin: 0 0 6px; }
html[data-frame-form="tight"] #frame-form-active .moulding-info-box { margin-top: 6px; font-size: 13px; }
html[data-frame-form="tight"] #frame-form-active .moulding-add-btn { display: inline-block; border: 0; background: none; padding: 0; min-height: 28px; font-size: 14px; color: var(--s-accent); }
html[data-frame-form="tight"] .order-method-slot:not(:empty) { padding: 0; }
html[data-frame-form="tight"] .order-method-panel { margin: 6px 0 0; padding: 0; border: 0; }
html[data-frame-form="tight"] .order-method-title { display: none; }
html[data-frame-form="tight"] .order-method-btn { flex-direction: row; justify-content: center; min-height: 36px; padding: 0 6px; }
html[data-frame-form="tight"] .order-method-btn-desc { display: none; }
html[data-frame-form="tight"] .order-method-btn-label { font-size: 14px; }
html[data-frame-form="tight"] .mount-border-inline > span:first-child { font-size: 0; }
html[data-frame-form="tight"] .mount-border-inline .mount-border-input { width: 64px; }
html[data-frame-form="tight"] .mount-border-toggle { margin-top: 4px; font-size: 13px; }

/* extras: time, then the add link, on one line */
html[data-frame-form="tight"] .fr-sec[data-sec="extras"] .extra-labour-row { display: inline-flex; margin: 0 16px 0 0; vertical-align: middle; }
html[data-frame-form="tight"] .fr-sec[data-sec="extras"] .mount-border-unit { font-size: 14px; color: var(--s-ink-3); }
html[data-frame-form="tight"] #extras-list .extra-row { margin-top: 6px; }

/* price: special price on the line, the breakdown folded under it */
html[data-frame-form="tight"] .fr-sec[data-sec="price"] { padding-left: 0; display: flex; flex-direction: column-reverse; }
html[data-frame-form="tight"] .fr-sec[data-sec="price"] .fi-section-label { position: static; height: auto; width: auto; margin: 0 0 0 var(--lab); font-size: 14px; color: var(--s-accent); cursor: pointer; }
html[data-frame-form="tight"] #frame-form-active .fi-bd-toggle::after { content: " \25B8"; white-space: pre; }
html[data-frame-form="tight"] #frame-form-active.show-bd .fi-bd-toggle::after { content: " \25BE"; }
html[data-frame-form="tight"] #frame-form-active:not(.show-bd) #drawer-breakdown { display: none; }
html[data-frame-form="tight"] #drawer-breakdown { margin: 8px 0 0; }
html[data-frame-form="tight"] .price-override-field { position: relative; display: flex; align-items: center; margin: 0 0 10px; padding-left: var(--lab); }
html[data-frame-form="tight"] .price-override-field > label { position: absolute; left: 0; top: 0; height: 44px; display: flex; align-items: center; margin: 0; font: 600 15px var(--s-font); color: var(--s-ink-2); text-transform: none; letter-spacing: 0; }
/* lined up: fixes (these need the form's id to win over the general rules above) */
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="details"] { padding-left: 0; }
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="price"] { padding-left: 0; }
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="back"] .fi-section-label,
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="extras"] > .fi-section-label:first-of-type { font-size: 0; }
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="back"] .fi-section-label::after { content: "Back"; font-size: 15px; display: block; }
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="extras"] > .fi-section-label:first-of-type::after { content: "Extras"; font-size: 15px; display: block; }
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="extras"] > .fi-section-label ~ .fi-section-label { display: none; }
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="price"] .fi-section-label { position: static; height: auto; width: auto; margin: 0 0 0 var(--lab); font-size: 14px; color: var(--s-accent); cursor: pointer; }
html[data-frame-form="tight"] #frame-form-active .price-override-field .price-override-input-wrap { flex: 1; display: flex; align-items: center; gap: 6px; }
html[data-frame-form="tight"] #frame-form-active .fi-section-label { gap: 0; }
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="extras"] .mount-border-inline > span:first-child { display: none; }
html[data-frame-form="tight"] #frame-form-active .fr-sec[data-sec="extras"] .mount-border-inline { gap: 8px; margin: 0; padding: 0; }


/* =============================================================
   17. STUDIO FRAME FORM (2 Nov: his brief, then his reference picture,
   "I like this kind of style"): a clean white card, sentence-case section
   titles, big filled size boxes with a unit pill, the construction parts as
   tidy rows with a tinted icon tile and a +, a light footer with the price
   and a strong Add frame. Blue is his brand blue (#1058FF). Everything is
   scoped to .ff-studio, so the print drawer and the old layout are untouched.
   ============================================================= */
.ff-studio {
  --st-page: #F2F3F5; --st-card: #FFFFFF; --st-field: #F3F4F6; --st-field-2: #ECEEF1;
  --st-line: #E6E8EC; --st-line-2: #D6DAE0;
  --st-ink: #21232E; --st-ink-2: #4A4F5C; --st-ink-3: #7B8190;
  --st-blue: #1058FF; --st-blue-2: #0B47D6; --st-tint: #EDF2FF;
  --st-pad: 20px;
  color: var(--st-ink); background: var(--st-page) !important;
  font-family: var(--s-font, Inter, system-ui, sans-serif);
}
html[data-theme="dark"] .ff-studio {
  --st-page: #15161C; --st-card: #1E2029; --st-field: #272A35; --st-field-2: #2E3240;
  --st-line: #2C2F3B; --st-line-2: #3A3E4C;
  --st-ink: #ECEDF2; --st-ink-2: #B9BCC8; --st-ink-3: #8A8E9C;
  --st-blue: #4C82FF; --st-blue-2: #6A96FF; --st-tint: #222B45;
}

/* The drawer: full screen on a phone, a wide sheet on bigger screens */
#frame-drawer:has(.ff-studio) { background: var(--st-page, #F2F3F5); border: 0; }
@media (max-width: 760px) {
  #frame-drawer-overlay:has(.ff-studio) { padding: 0; align-items: stretch; }
  #frame-drawer:has(.ff-studio) { width: 100%; max-height: none; height: 100%; border-radius: 0; }
}
@media (min-width: 761px) {
  #frame-drawer:has(.ff-studio) { width: min(1000px, 100%); max-height: 92vh; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); }
}

/* Header */
.ff-studio .st-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px var(--st-pad) 14px; padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.ff-studio .st-eyebrow { display: block; font: 600 13px var(--s-font); letter-spacing: .06em; text-transform: uppercase; color: var(--st-ink-3); }
.ff-studio .st-title-h { margin: 2px 0 0; font: 700 26px/1.15 var(--s-font); letter-spacing: -.02em; color: var(--st-ink); }
.ff-studio .st-close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--st-field-2); color: var(--st-ink-2); font-size: 18px; cursor: pointer; }
.ff-studio .st-close:hover { color: var(--st-ink); }

/* The card holding everything */
.ff-studio .st-body { padding: 0 12px 16px !important; background: none; }
.ff-studio .st-cols { background: var(--st-card); border-radius: 18px; overflow: hidden; }
@media (min-width: 900px) {
  .ff-studio .st-body { padding: 0 20px 20px !important; }
  .ff-studio .st-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ff-studio .st-col + .st-col { border-left: 1px solid var(--st-line); }
}
@media (max-width: 899px) {
  .ff-studio .st-cols { display: flex; flex-direction: column; }
  .ff-studio .st-col { display: contents; }
  .ff-studio .st-piece { order: 1; } .ff-studio .st-dims { order: 2; } .ff-studio .st-build { order: 3; }
  .ff-studio .st-more { order: 4; } .ff-studio .st-pricing { order: 5; }
}

/* Sections */
.ff-studio .st-sec { display: block; margin: 0 var(--st-pad); padding: 20px 0; border-bottom: 1px solid var(--st-line); }
.ff-studio .st-sec:last-child, .ff-studio .st-pricing { border-bottom: 0; }
@media (min-width: 900px) { .ff-studio .st-col > .st-sec:last-child { border-bottom: 0; } }
.ff-studio .st-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.ff-studio .st-h { margin: 0; font: 700 20px var(--s-font); letter-spacing: -.01em; color: var(--st-ink); text-transform: none; }
.ff-studio .st-pill { padding: 4px 12px; border-radius: 999px; background: var(--st-tint); color: var(--st-blue); font: 600 14px var(--s-font); text-transform: uppercase; }
.ff-studio .st-cap { display: block; margin: 0 0 8px; font: 500 14px var(--s-font); letter-spacing: .04em; text-transform: uppercase; color: var(--st-ink-3); }
.ff-studio .st-field { display: block; margin: 0; min-width: 0; }

/* Fields: white with a light edge; size boxes filled */
.ff-studio :is(input[type="text"], input[type="number"], select, textarea):not(.qty-input) {
  width: 100%; height: 52px; min-height: 52px; margin: 0; padding: 0 16px !important;
  background: var(--st-card) !important; color: var(--st-ink) !important;
  border: 1px solid var(--st-line-2) !important; border-radius: 12px !important; box-shadow: none !important;
  font: 400 17px var(--s-font) !important; transition: border-color .15s, box-shadow .15s;
}
.ff-studio textarea { height: auto !important; min-height: 84px !important; padding: 14px 16px !important; resize: vertical; line-height: 1.45 !important; }
.ff-studio :is(input, select, textarea):focus { outline: none; border-color: var(--st-blue) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-blue) 18%, transparent) !important; }
.ff-studio ::placeholder { color: var(--st-ink-3); opacity: 1; }
.ff-studio select { -webkit-appearance: none; appearance: none; background-image: none !important; }

/* 1 · The piece */
.ff-studio .st-piece { display: grid; gap: 16px; padding-top: 18px; }
.ff-studio .st-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ff-studio .qty-stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; height: 52px; border: 1px solid var(--st-line-2); border-radius: 12px; overflow: hidden; background: var(--st-card); box-shadow: none; }
.ff-studio .qty-btn { width: auto; height: 50px; border: 0 !important; background: none !important; color: var(--st-ink); font-size: 22px; border-radius: 0 !important; cursor: pointer; }
.ff-studio .qty-btn:hover { background: var(--st-field) !important; }
.ff-studio .qty-input { width: 100% !important; height: 50px !important; border: 0 !important; background: none !important; text-align: center; font: 500 18px var(--s-font) !important; color: var(--st-ink) !important; box-shadow: none !important; padding: 0 !important; }
.ff-studio .st-qty-total { margin-top: -8px; font-size: 14px; color: var(--st-ink-2); }
.ff-studio .st-qty-total:empty { display: none; }
.ff-studio .st-photos .photo-upload-row { margin: 0; justify-content: flex-start; }
.ff-studio .st-photos .photo-upload-btn { width: auto; max-width: none; min-height: 40px; padding: 0; display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  border: 0; background: none; color: var(--st-blue); font: 600 15px var(--s-font); box-shadow: none; }
.ff-studio .st-photos .photo-upload-btn i { font-size: 20px; }
.ff-studio .st-photos .photo-grid { margin-top: 10px; }

/* 2 · Dimensions */
.ff-studio .st-dim-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ff-studio .st-dim { display: block; margin: 0; min-width: 0; }
.ff-studio .st-box { position: relative; display: flex; align-items: center; }
#frame-form-active.ff-studio .st-box input.st-num { height: 64px !important; min-height: 64px !important; border-color: transparent !important; background: var(--st-field) !important;
  font: 600 28px var(--s-font) !important; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
#frame-form-active.ff-studio .st-box input.st-num:focus { background: var(--st-card) !important; border-color: var(--st-blue) !important; }
.ff-studio .st-num::-webkit-outer-spin-button, .ff-studio .st-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ff-studio .st-readout { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; background: none; font-size: 16px; color: var(--st-ink-2); }
.ff-studio .st-readout i { font-size: 20px; color: var(--st-blue); }
.ff-studio .st-readout-val strong { font-weight: 500; color: var(--st-ink-2); font-size: 16px; }
.ff-studio .length-warning { margin-top: 10px; font-size: 13px; }

/* 3 · Construction: one row per part, opens on tap */
.ff-studio .st-build { padding-bottom: 8px; }
.ff-studio .st-layer { padding: 0 0 4px; }
.ff-studio .st-layer + .st-layer { margin-top: 4px; }
.ff-studio .st-layer-head { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 6px 0; margin: 0; cursor: pointer; border-radius: 12px; }
.ff-studio .st-tile { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--st-tint); color: var(--st-blue); font-size: 24px; }
.ff-studio .st-layer-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ff-studio .st-layer-text b { font: 600 18px var(--s-font); color: var(--st-ink); }
.ff-studio .st-layer-text small { font-size: 16px; color: var(--st-ink-3); }
.ff-studio .st-layer.is-open .st-layer-text small { display: none; }
.ff-studio .st-plus { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--st-blue); font-size: 22px; cursor: pointer; }
.ff-studio .st-plus:hover { background: var(--st-tint); }
/* glass and backing only ever have one, so no + once they're open */
.ff-studio .st-layer.is-open:is([data-layer="glass"], [data-layer="back"]) .st-plus { visibility: hidden; }
.ff-studio .st-layer-body { display: none; padding: 4px 0 14px 66px; }
.ff-studio .st-layer.is-open .st-layer-body { display: block; }
@media (max-width: 420px) { .ff-studio .st-layer-body { padding-left: 0; } }

.ff-studio .moulding-item { position: relative; margin: 0 0 10px; padding: 0; border: 0; background: none; }
.ff-studio .moulding-item:last-child { margin-bottom: 0; }
.ff-studio .moulding-code-row { display: flex; align-items: center; gap: 8px; }
.ff-studio .code-ac-wrap { flex: 1; min-width: 0; }
.ff-studio .frame-code-input { font-family: var(--s-font) !important; }
.ff-studio .moulding-remove { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--st-ink-3); font-size: 15px; cursor: pointer; }
.ff-studio .moulding-remove:hover { background: var(--st-field); color: var(--st-ink); }
.ff-studio .moulding-info-box { margin: 8px 0 0; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--st-field); color: var(--st-ink-2); font-size: 14px; box-shadow: none; }
.ff-studio .moulding-info-box .mi-name { color: var(--st-ink); font-weight: 600; font-size: 15px; }
.ff-studio .moulding-info-box .mi-price-item { color: var(--st-ink-2); }
.ff-studio .moulding-info-box .mi-price-item b { color: var(--st-ink); font-family: var(--s-font); }
.ff-studio .moulding-info-box .mi-photo { width: 96px; height: 60px; border-radius: 8px; border-color: var(--st-line); }
/* more than one moulding or mount: numbered so they read apart */
.ff-studio #frame-code-rows, .ff-studio #mount-section { counter-reset: st-n; }
.ff-studio #frame-code-rows > .moulding-item, .ff-studio #mount-section > .moulding-item { counter-increment: st-n; }
.ff-studio #frame-code-rows:has(> .moulding-item + .moulding-item) > .moulding-item::before { content: "Moulding " counter(st-n); }
.ff-studio #mount-section:has(> .moulding-item + .moulding-item) > .moulding-item::before { content: "Mount " counter(st-n); }
.ff-studio :is(#frame-code-rows, #mount-section) > .moulding-item::before { display: block; margin: 0 0 6px; font: 600 13px var(--s-font); letter-spacing: .04em; text-transform: uppercase; color: var(--st-ink-3); }
.ff-studio :is(#frame-code-rows, #mount-section):has(> .moulding-item + .moulding-item) > .moulding-item + .moulding-item { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--st-line); }

/* wood order: a segmented control */
.ff-studio .order-method-slot:not(:empty) { padding: 0; margin-top: 12px; }
.ff-studio .order-method-panel { margin: 0; padding: 0; border: 0; }
.ff-studio .order-method-title { display: none; }
.ff-studio .order-method-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 4px; border-radius: 12px; background: var(--st-field); }
.ff-studio .order-method-btn { min-height: 40px; padding: 0 6px; flex-direction: row; justify-content: center; border: 0; border-radius: 9px; background: none; box-shadow: none; }
.ff-studio .order-method-btn:hover { background: var(--st-field-2); border: 0; }
.ff-studio .order-method-btn.active { background: var(--st-card); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ff-studio .order-method-btn-label { font: 600 15px var(--s-font); color: var(--st-ink-2); }
.ff-studio .order-method-btn.active .order-method-btn-label { color: var(--st-blue); }
.ff-studio .order-method-btn-desc { display: none; }

/* mount: code, border width, remove; uneven borders as a small option */
.ff-studio .mount-border-inline { flex: none; display: flex; align-items: center; gap: 6px; margin: 0; }
.ff-studio .mount-border-inline > span:first-child { font: 500 13px var(--s-font); letter-spacing: .04em; text-transform: uppercase; color: var(--st-ink-3); }
.ff-studio .mount-border-input { width: 76px !important; text-align: center; padding: 0 8px !important; }
.ff-studio .mount-border-unit { font-size: 14px; color: var(--st-ink-3); }
.ff-studio .mount-border-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--st-ink-2); }
.ff-studio .mount-border-toggle input { accent-color: var(--st-blue); width: 18px; height: 18px; }
.ff-studio .mount-border-sides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ff-studio .mount-border-side { display: block; margin: 0; }
.ff-studio .mount-border-side > span:first-child { display: block; margin-bottom: 4px; font: 500 12px var(--s-font); letter-spacing: .04em; text-transform: uppercase; color: var(--st-ink-3); }
.ff-studio .mount-border-side .mount-border-input { width: 100% !important; }
.ff-studio .mount-border-side .mount-border-unit { display: none; }
@media (max-width: 480px) {
  .ff-studio #mount-section .moulding-code-row { flex-wrap: wrap; }
  .ff-studio #mount-section .code-ac-wrap { flex: 1 1 100%; }
}

/* 4 · Folded parts */
.ff-studio .st-more { padding: 0; }
.ff-studio .st-more > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; list-style: none; cursor: pointer; }
.ff-studio .st-more > summary::-webkit-details-marker { display: none; }
.ff-studio .st-more-title { font: 600 17px var(--s-font); color: var(--st-ink); }
.ff-studio .st-more-sum { margin-left: auto; font-size: 15px; color: var(--st-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-studio .st-more > summary .ph-caret-down { color: var(--st-ink-3); transition: transform .2s; }
.ff-studio .st-more[open] > summary .ph-caret-down { transform: rotate(180deg); }
.ff-studio .st-more-body { display: grid; gap: 18px; padding: 0 0 20px; }
.ff-studio .st-box-sm { max-width: 180px; }
.ff-studio .st-add { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--st-blue); font: 600 15px var(--s-font); cursor: pointer; }
.ff-studio .extra-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 40px; gap: 8px; align-items: center; margin: 0 0 8px; }
.ff-studio .extra-row .btn-danger { width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--st-ink-3); box-shadow: none; }
.ff-studio .extra-row .btn-danger:hover { background: var(--st-field); color: var(--st-ink); }
.ff-studio .price-override-field { display: block; margin: 0; }
.ff-studio .price-override-input-wrap { display: flex; align-items: center; }
.ff-studio .price-override-input-wrap .currency-prefix { position: absolute; left: 16px; color: var(--st-ink-3); z-index: 1; }
.ff-studio .price-override-input-wrap input { padding-left: 32px !important; }
.ff-studio .fi-bd-toggle { display: none; }
.ff-studio #drawer-breakdown { display: block; padding: 14px; border-radius: 12px; background: var(--st-field); font-size: 13px; color: var(--st-ink-2); }
.ff-studio .price-locked-box { border-radius: 12px; background: var(--st-field); border: 0; }

/* Footer: the price and the one thing you came to do */
.ff-studio .st-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px var(--st-pad); padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  background: var(--st-page); border-top: 1px solid var(--st-line); }
.ff-studio .st-total { margin-right: auto; min-width: 0; }
.ff-studio .st-total .st-cap { margin: 0; }
.ff-studio .st-total strong { display: block; font: 700 32px/1.1 var(--s-font); letter-spacing: -.02em; color: var(--st-ink); font-variant-numeric: tabular-nums; }
.ff-studio .st-round { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--st-ink); color: var(--st-card); font-size: 20px; cursor: pointer; }
.ff-studio .st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 18px; border-radius: 14px; border: 0; cursor: pointer;
  font: 600 18px var(--s-font); white-space: nowrap; }
.ff-studio .st-btn-quiet { background: none; color: var(--st-ink-2); }
.ff-studio .st-btn-quiet:hover { background: var(--st-field-2); }
.ff-studio .st-btn-main { padding: 0 24px; background: var(--st-blue); color: #fff; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--st-blue) 70%, transparent); }
.ff-studio .st-btn-main:hover { background: var(--st-blue-2); }
@media (max-width: 520px) { .ff-studio .st-cancel { display: none; } }

.ff-studio .code-ac-dropdown { border: 1px solid var(--st-line-2); border-radius: 12px; background: var(--st-card); box-shadow: 0 12px 30px -10px rgba(0,0,0,.25); overflow: hidden; }
.ff-studio .st-more-title { white-space: nowrap; }
.ff-studio .st-type select { padding: 0 12px !important; font-size: 16px !important; }

/* Studio, simplified (2 Nov: "feels off… stuff in random levels, just needs to be
   simple"). One rule everywhere: a label above, a box under it, one left edge,
   one look for every part. No card-in-a-page, no icon tiles, no indents. */
.ff-studio { --st-page: var(--st-card); }
.ff-studio .st-head { align-items: center; padding: 14px var(--st-pad); padding-top: max(14px, env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--st-line); }
.ff-studio .st-title-h { margin: 0; font-size: 22px; }
.ff-studio .st-close { background: none; width: 40px; height: 40px; margin-right: -8px; }
.ff-studio .st-close:hover { background: var(--st-field); }
.ff-studio .st-body, .ff-studio .st-body.card-body { padding: 0 !important; }
@media (min-width: 900px) { .ff-studio .st-body, .ff-studio .st-body.card-body { padding: 0 !important; } }
.ff-studio .st-cols { background: none; border-radius: 0; }
.ff-studio .st-sec { padding: 22px 0; }
.ff-studio .st-sec-head { margin: 0 0 16px; }
.ff-studio .st-h { font-size: 18px; }
.ff-studio .st-pill { display: none; }

/* every label the same: plain, sentence case, above its box */
.ff-studio .st-cap, .ff-studio .st-lab { display: block; margin: 0 0 8px; font: 500 15px var(--s-font); letter-spacing: 0; text-transform: none; color: var(--st-ink-2); }
.ff-studio .st-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.ff-studio .st-label-row .st-lab { margin: 0; }
.ff-studio .st-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--st-blue); font: 600 14px var(--s-font); cursor: pointer; }

/* every box the same, the size boxes just carry bigger numbers */
#frame-form-active.ff-studio .st-box input.st-num { height: 52px !important; min-height: 52px !important; background: var(--st-card) !important; border-color: var(--st-line-2) !important; font: 600 20px var(--s-font) !important; }
.ff-studio .st-readout { margin-top: 10px; font-size: 14px; color: var(--st-ink-3); }
.ff-studio .st-readout i { display: none; }
.ff-studio .st-readout-val strong { font-size: 14px; color: var(--st-ink-2); }

/* construction: just four labelled boxes, always showing */
.ff-studio .st-layer { padding: 0; }
.ff-studio .st-layer + .st-layer { margin-top: 20px; }
.ff-studio .st-layer-head { display: none; }
.ff-studio .st-layer-body, .ff-studio .st-layer.is-open .st-layer-body { display: block; padding: 0; }
.ff-studio .moulding-info-box { margin: 6px 0 0; padding: 0; background: none; border-radius: 0; font-size: 13px; color: var(--st-ink-3); }
.ff-studio .moulding-info-box .mi-name { font-size: 14px; font-weight: 500; color: var(--st-ink-2); }
.ff-studio .moulding-info-box .mi-photo { width: 64px; height: 40px; }
.ff-studio .st-ghost { display: none; width: 100%; height: 52px; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--st-line-2); border-radius: 12px; background: none;
  color: var(--st-blue); font: 600 16px var(--s-font); cursor: pointer; }
.ff-studio #mount-section:empty ~ .st-ghost { display: flex; }
.ff-studio [data-layer="mount"]:has(#mount-section:empty) .st-link { display: none; }
.ff-studio .mount-border-inline > span:first-child { font: 500 14px var(--s-font); text-transform: none; letter-spacing: 0; color: var(--st-ink-3); }
.ff-studio .mount-border-input { width: 64px !important; }
.ff-studio .mount-border-toggle { margin-top: 8px; font-size: 14px; }
@media (max-width: 480px) {
  .ff-studio #mount-section .moulding-code-row { flex-wrap: nowrap; }
  .ff-studio #mount-section .code-ac-wrap { flex: 1 1 auto; }
  .ff-studio .mount-border-inline > span:first-child { display: none; }
}
.ff-studio .order-method-slot:not(:empty) { margin-top: 10px; }

/* folded rows at the end, same weight as everything else */
.ff-studio .st-more > summary { min-height: 60px; }
.ff-studio .st-more-title { font: 600 16px var(--s-font); }

/* footer: white, a line above */
.ff-studio .st-foot { background: var(--st-card); }
.ff-studio .st-total strong { font-size: 26px; }
.ff-studio .st-round { width: 48px; height: 48px; background: none; border: 1px solid var(--st-line-2); color: var(--st-ink); }
.ff-studio .st-btn { min-height: 50px; font-size: 17px; border-radius: 12px; }

/* Studio, fewer words (2 Nov: "still looks like loads of words thrown into a page").
   Labels sit inside their boxes, no section headings, each code shows just its name. */
.ff-studio .st-sec-head, .ff-studio .st-label-row { display: none; }
.ff-studio .st-sec { padding: 18px 0; }
.ff-studio .st-piece { gap: 12px; }
/* label inside the box, small, top left */
.ff-studio .st-field, .ff-studio .st-dim, .ff-studio .code-ac-wrap, .ff-studio .mount-border-inline { position: relative; }
.ff-studio :is(.st-piece, .st-dims) .st-cap { position: absolute; z-index: 1; left: 16px; top: 8px; margin: 0; font: 500 12px var(--s-font); color: var(--st-ink-3); pointer-events: none; }
.ff-studio .st-qty .st-cap { left: 50%; transform: translateX(-50%); }
.ff-studio :is(.st-piece, .st-dims) :is(input[type="text"], select), #frame-form-active.ff-studio .st-box input.st-num { height: 60px !important; min-height: 60px !important; padding-top: 18px !important; }
.ff-studio .st-piece .qty-stepper { height: 60px; }
.ff-studio .st-piece .qty-btn, .ff-studio .st-piece .qty-input { height: 58px !important; padding-top: 10px !important; }
/* construction boxes carry their own names */
.ff-studio .st-layer .code-ac-wrap::before { position: absolute; z-index: 1; left: 16px; top: 8px; font: 500 12px var(--s-font); color: var(--st-ink-3); pointer-events: none; }
.ff-studio [data-layer="moulding"] .code-ac-wrap::before { content: "Moulding"; }
.ff-studio [data-layer="mount"] .code-ac-wrap::before { content: "Mount"; }
.ff-studio [data-layer="glass"] .code-ac-wrap::before { content: "Glass"; }
.ff-studio [data-layer="back"] .code-ac-wrap::before { content: "Backing"; }
.ff-studio #frame-code-rows:has(> .moulding-item + .moulding-item) .code-ac-wrap::before { content: "Moulding " counter(st-n); }
.ff-studio #mount-section:has(> .moulding-item + .moulding-item) .code-ac-wrap::before { content: "Mount " counter(st-n); }
.ff-studio :is(#frame-code-rows, #mount-section) > .moulding-item::before { display: none !important; }
.ff-studio :is(#frame-code-rows, #mount-section):has(> .moulding-item + .moulding-item) > .moulding-item + .moulding-item { margin-top: 10px; padding-top: 0; border-top: 0; }
.ff-studio .st-layer .frame-code-input { height: 60px !important; min-height: 60px !important; padding-top: 18px !important; }
.ff-studio .st-layer + .st-layer { margin-top: 10px; }
/* mount border: its own small box with the label inside */
.ff-studio .mount-border-inline { display: block; }
.ff-studio .mount-border-inline > span:first-child { display: block !important; position: absolute; z-index: 1; left: 0; right: 0; top: 8px; text-align: center; font: 500 12px var(--s-font) !important; color: var(--st-ink-3); }
.ff-studio .mount-border-inline .mount-border-input { width: 76px !important; height: 60px !important; min-height: 60px !important; padding: 18px 4px 0 !important; }
.ff-studio .mount-border-inline .mount-border-unit { display: none; }
.ff-studio .mount-border-toggle { margin: 6px 0 0 2px; font-size: 13px; color: var(--st-ink-3); }
/* what each code is: one short grey line, the name only (prices are in the breakdown) */
.ff-studio .moulding-info-box { margin: 4px 0 0 16px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-studio .moulding-info-box .mi-prices, .ff-studio .moulding-info-box .mi-photo { display: none; }
.ff-studio .moulding-info-box .mi-name { display: inline; font-size: 13px; color: var(--st-ink-3); font-weight: 400; margin: 0; }
.ff-studio .moulding-info-box .mi-with-photo, .ff-studio .moulding-info-box .mi-text { display: inline; padding: 0; }
.ff-studio .order-method-slot:not(:empty) { margin-top: 8px; }
.ff-studio .st-ghost { height: 60px; }
/* the add links, once, under the parts */
.ff-studio .st-adds { display: flex; gap: 20px; margin-top: 12px; }
.ff-studio .st-build:has(#mount-section:empty) .st-add-mount { display: none; }
/* outside size: short and quiet */
.ff-studio .st-readout { margin: 8px 0 0 16px; font-size: 13px; }
.ff-studio .st-readout-val strong { font-size: 13px; font-weight: 500; }
.ff-studio .st-more-sum:empty { display: none; }
.ff-studio .st-more.st-sec { padding: 0; }
.ff-studio .st-more > summary { min-height: 56px; }
/* box labels bold (2 Nov, his ask) */
.ff-studio :is(.st-piece, .st-dims) .st-cap, .ff-studio .st-layer .code-ac-wrap::before, .ff-studio .mount-border-inline > span:first-child { font-weight: 700 !important; color: var(--st-ink-2) !important; }
/* 2 Nov ("boxes more bold, wording more central"): firmer edges, and the label + value
   sit as one centred pair in every box, the code boxes included. */
.ff-studio { --st-box-edge: #B9BEC8; }
html[data-theme="dark"] .ff-studio { --st-box-edge: #4A4F5E; }
.ff-studio :is(input[type="text"], input[type="number"], select, textarea):not(.qty-input),
.ff-studio .qty-stepper, .ff-studio .st-ghost { border: 1.5px solid var(--st-box-edge) !important; }
#frame-form-active.ff-studio .st-box input.st-num { border: 1.5px solid var(--st-box-edge) !important; }
.ff-studio :is(.st-piece, .st-dims) :is(input[type="text"], select),
#frame-form-active.ff-studio .st-box input.st-num,
.ff-studio .st-layer .frame-code-input,
.ff-studio .mount-border-inline .mount-border-input {
  height: 62px !important; min-height: 62px !important; padding-top: 24px !important; padding-bottom: 8px !important; line-height: 1.2 !important; }
.ff-studio :is(.st-piece, .st-dims) .st-cap, .ff-studio .st-layer .code-ac-wrap::before { top: 11px !important; }
.ff-studio .mount-border-inline > span:first-child { top: 11px !important; }
.ff-studio .st-piece .qty-stepper { height: 62px; }
.ff-studio .st-piece .qty-btn, .ff-studio .st-piece .qty-input { height: 59px !important; padding-top: 14px !important; }
.ff-studio .st-ghost { height: 62px; }
/* the help button stays out of the way while a frame is open */
body.drawer-open #help-btn { display: none !important; }
#frame-form-active.ff-studio .st-layer .frame-code-input,
#frame-form-active.ff-studio .mount-border-inline .mount-border-input,
#frame-form-active.ff-studio :is(.st-piece, .st-dims) :is(input[type="text"], select) {
  height: 62px !important; min-height: 62px !important; padding: 24px 16px 8px !important; line-height: 1.2 !important; }
#frame-form-active.ff-studio .mount-border-inline .mount-border-input { padding: 24px 4px 8px !important; }

/* =============================================================
   18. BRAND COLOURS (2 Nov, his design rules for FrameFlow):
                      light      dark
   main background    #F5F6F8    #21232E
   working surfaces   #FFFFFF    #292C39
   inputs             #FFFFFF    #21232E
   primary text       #21232E    #FFFFFF
   secondary text     #737887    #AEB3C1
   primary buttons    #1058FF    #1058FF
   highlights         #FE8500    #FE8500
   Lines, hover and tints are worked out from those. Set last so every
   earlier layer (and the older styles.css names) follows them.
   ============================================================= */
:root {
  --s-canvas: #F5F6F8; --s-rail: #FFFFFF; --s-surface: #FFFFFF; --s-sunk: #EEF0F3; --s-input: #FFFFFF;
  --s-line: #E3E5EA; --s-line-2: #CFD3DB;
  --s-ink: #21232E; --s-ink-2: #737887; --s-ink-3: #737887;
  --s-accent: #1058FF; --s-accent-2: #0B47D6; --s-tint: #E8EEFF; --s-focus: rgba(16,88,255,0.25);
  --s-hi: #FE8500; --s-hi-tint: #FFF1E2;
  --s-ico: #1058FF;
  /* the older names still used by forms, modals and tables */
  --teal: #1058FF; --teal-dim: #0B47D6; --teal-muted: #8FAEFF; --teal-glow: rgba(16,88,255,0.20); --teal-subtle: rgba(16,88,255,0.08);
  --bg: #F5F6F8; --surface: #FFFFFF; --surface-raised: #F5F6F8; --surface-high: #ECEEF2; --sidebar-bg: #FFFFFF;
  --border: #E3E5EA; --border-bright: #CFD3DB;
  --text: #21232E; --text-secondary: #737887; --text-muted: #737887;
  --field-face: #FFFFFF; --accent-grad: #1058FF; --accent-rim: #0B47D6; --on-accent: #FFFFFF;
}
html[data-theme="dark"] {
  --s-canvas: #21232E; --s-rail: #292C39; --s-surface: #292C39; --s-sunk: #2F3241; --s-input: #21232E;
  --s-line: #363A4A; --s-line-2: #464B5D;
  --s-ink: #FFFFFF; --s-ink-2: #AEB3C1; --s-ink-3: #AEB3C1;
  --s-accent: #1058FF; --s-accent-2: #6E95FF; --s-tint: #26304F; --s-focus: rgba(110,149,255,0.30);
  --s-hi: #FE8500; --s-hi-tint: #3A2A1A;
  --s-ico: #1058FF;
  --teal: #1058FF; --teal-dim: #0B47D6; --teal-muted: #6E95FF; --teal-glow: rgba(16,88,255,0.28); --teal-subtle: rgba(16,88,255,0.14);
  --bg: #21232E; --surface: #292C39; --surface-raised: #2F3241; --surface-high: #363A4A; --sidebar-bg: #292C39;
  --border: #363A4A; --border-bright: #464B5D;
  --text: #FFFFFF; --text-secondary: #AEB3C1; --text-muted: #AEB3C1;
  --field-face: #21232E; --accent-grad: #1058FF; --accent-rim: #0B47D6; --on-accent: #FFFFFF;
}
html[data-theme="dark"] body, body { background: var(--s-canvas); }
/* inputs follow the input colour, not the surface */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { background-color: var(--s-input); color: var(--s-ink); }

/* the frame form takes the same colours */
.ff-studio, html[data-theme="dark"] .ff-studio {
  --st-page: var(--s-surface); --st-card: var(--s-surface); --st-input: var(--s-input);
  --st-field: var(--s-canvas); --st-field-2: var(--s-sunk);
  --st-line: var(--s-line); --st-line-2: var(--s-line-2);
  --st-ink: var(--s-ink); --st-ink-2: var(--s-ink-2); --st-ink-3: var(--s-ink-2);
  --st-blue: #1058FF; --st-blue-2: #0B47D6; --st-tint: var(--s-tint);
}
.ff-studio { --st-box-edge: #B9BECA; }
html[data-theme="dark"] .ff-studio { --st-box-edge: #4E5468; }
.ff-studio :is(input[type="text"], input[type="number"], select, textarea):not(.qty-input),
#frame-form-active.ff-studio .st-box input.st-num, .ff-studio .qty-stepper { background: var(--st-input) !important; }
html[data-theme="dark"] .ff-studio .st-link, html[data-theme="dark"] .ff-studio .st-ghost,
html[data-theme="dark"] .ff-studio .st-photos .photo-upload-btn, html[data-theme="dark"] .ff-studio .order-method-btn.active .order-method-btn-label { color: #6E95FF; }

/* highlights (#FE8500), kept small: this week's bar on Home, the job count chip on cards */
.home-bar.is-now i { background: var(--s-hi) !important; }
.wk-count { background: var(--s-hi-tint) !important; color: #B35C00 !important; }
html[data-theme="dark"] .wk-count { color: #FFB062 !important; }

/* =============================================================
   19. MORE BLUE (2 Nov, "add some more blue identity"): the Home tiles in
   the brand blues, a blue phone top bar, a blue selected menu item, blue
   section marks. Status colours (late, ASAP, ready) stay as they are.
   ============================================================= */
/* Home tiles: one blue family, the navy as the anchor */
html .home-stat:nth-child(4n+1) { --hue: #1058FF !important; }
html .home-stat:nth-child(4n+2) { --hue: #3D78FF !important; }
html .home-stat:nth-child(4n+3) { --hue: #0B47D6 !important; }
html .home-stat:nth-child(4n+4) { --hue: #21232E !important; }
html .home-stat.is-warn { --hue: #E5483C !important; }
html[data-theme="dark"] .home-stat:nth-child(4n+4) { --hue: #363A4A !important; }
html .home-stat { background: var(--hue) !important; }
html .home-stat :is(.home-stat-value, .home-stat-label) { color: #fff !important; }
html .home-stat-label { opacity: .88; }
html .home-stat-ico { background: rgba(255,255,255,.18) !important; color: #fff !important; box-shadow: none !important; }
html .home-stat:hover { filter: brightness(1.06); }

/* Phone top bar in brand blue, white logo */
@media (max-width: 600px) {
  #sidebar { background: #1058FF !important; border-bottom-color: transparent !important; }
  #sidebar .logo-name, #sidebar .logo-name-accent { color: #fff !important; }
  #sidebar .ff-mark .ff-frame { stroke: #fff !important; }
  #sidebar .ff-mark .ff-bar { fill: #fff !important; }
  html { background: #1058FF; }   /* the strip behind the phone's clock matches */
}

/* Bigger screens: the selected menu item in blue */
@media (min-width: 601px) {
  .nav-item.active { background: var(--s-tint) !important; color: var(--s-accent-2) !important; box-shadow: none !important; border-color: transparent !important; }
  .nav-item.active .nav-icon { color: var(--s-accent) !important; }
  .nav-item:not(.active):not(.nav-item-cta):hover { background: color-mix(in srgb, var(--s-accent) 6%, transparent); }
}

/* Blue section marks: panel titles and list icons */
.home-card-head h3, .home-filter[aria-pressed="true"] b { color: var(--s-ink); }
.home-filter[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--s-accent) !important; }
.home-filter[aria-pressed="true"] i, .home-job-ico i { color: var(--s-accent) !important; }
.home-job-ico { background: var(--s-tint) !important; }
.home-num-big { color: var(--s-accent-2); }
html[data-theme="dark"] .home-num-big { color: #fff; }
.home-bar i { background: color-mix(in srgb, var(--s-accent) 35%, transparent) !important; }
.home-bar.is-now i { background: var(--s-hi) !important; }
/* Production: the column headers get a blue count */
.board-col-count, .wk-board .board-col-head .count { color: var(--s-accent) !important; }

/* Job input (2 Nov): the blue edge + blue labels looked "very AI", so they went.
   Blue only shows on the box you're typing in: a solid blue edge. */
#frame-form-active.ff-studio :is(input, select, textarea):focus,
#customer-card :is(input, select, textarea):focus { border-color: #1058FF !important; border-width: 2px !important; box-shadow: none !important; }
/* frame form background a shade darker than the boxes (2 Nov, his ask): main background, white boxes */
.ff-studio { --st-page: var(--s-canvas); --st-card: var(--s-canvas); }
#frame-drawer:has(.ff-studio) { background: var(--s-canvas); }
.ff-studio .order-method-row { background: #E8EAEE; }
html[data-theme="dark"] .ff-studio .order-method-row { background: #1B1D26; }
.ff-studio .order-method-btn.active { background: #FFFFFF; }
html[data-theme="dark"] .ff-studio .order-method-btn.active { background: #363A4A; }
/* blue lines between the groups of boxes (2 Nov, his ask) */
.ff-studio .st-sec { border-bottom: 2px solid #1058FF; }
.ff-studio .st-sec:last-child, .ff-studio .st-pricing { border-bottom: 0; }
@media (max-width: 899px) { .ff-studio .st-build, .ff-studio .st-more { border-bottom: 2px solid #1058FF !important; } .ff-studio .st-pricing { border-bottom: 0 !important; } }
.ff-studio .st-head { border-bottom: 2px solid #1058FF; }
@media (max-width: 899px) { .ff-studio .st-dims, .ff-studio .st-piece { border-bottom: 2px solid #1058FF !important; } }
@media (min-width: 900px) { .ff-studio .st-col:first-child .st-sec:not(:last-child) { border-bottom: 2px solid #1058FF; } }
/* "+ Add moulding" / "+ Add mount" sit right under their box, and only once one is filled in (2 Nov, his ask) */
.ff-studio .st-add-under { display: none; margin-top: 8px; }
.ff-studio [data-layer="moulding"]:has(.moulding-code-input:not(:placeholder-shown)) .st-add-under,
.ff-studio [data-layer="mount"]:has(.mount-code-input:not(:placeholder-shown)) .st-add-under { display: inline-flex; }
.ff-studio [data-layer="moulding"] .order-method-slot:not(:empty) { margin-top: 10px; }

/* =============================================================
   20. ONE FIELD STYLE EVERYWHERE (2 Nov: "apply the same logic to the rest
   of FrameFlow"). Same as the frame form: the label sits inside the top of
   its box in bold, white boxes with a firm edge, blue edge only on the box
   being typed in, blue lines between groups instead of shouty headings.
   label.ff-fl / span.ff-lab come from js/fields.js.
   ============================================================= */
:root { --ff-box-edge: #B9BECA; }
html[data-theme="dark"] { --ff-box-edge: #4E5468; }

label.ff-fl { position: relative; display: block; margin: 0 0 12px; padding: 0; text-transform: none; letter-spacing: 0; }
label.ff-fl > .ff-lab { position: absolute; z-index: 1; left: 16px; right: 16px; top: 11px; font: 700 12px/1.2 var(--s-font); color: var(--s-ink-2); text-transform: none; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
label.ff-fl > .ff-lab .muted, label.ff-fl > .ff-lab small { font-weight: 500; color: var(--s-ink-3); }
label.ff-fl > :is(input, select, textarea) {
  display: block; width: 100%; height: 62px; min-height: 62px; margin: 0 !important; padding: 24px 16px 8px !important;
  background: var(--s-input) !important; color: var(--s-ink) !important;
  border: 1.5px solid var(--ff-box-edge) !important; border-radius: 12px !important; box-shadow: none !important;
  font: 400 17px/1.2 var(--s-font) !important; }
label.ff-fl > select { -webkit-appearance: none; appearance: none; padding-right: 40px !important;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position: calc(100% - 22px) 31px, calc(100% - 16px) 31px !important; background-size: 6px 6px, 6px 6px !important; background-repeat: no-repeat !important; }
label.ff-fl > input[type="date"] { padding-right: 12px !important; }
label.ff-fl.ff-fl-ta > textarea { height: auto; min-height: 96px; padding-top: 30px !important; line-height: 1.45 !important; resize: vertical; }
label.ff-fl > :is(input, select, textarea):focus { outline: none; border: 2px solid #1058FF !important; }
label.ff-fl > :is(input, select, textarea)::placeholder { color: var(--s-ink-3); opacity: 1; }
/* pairs and threes side by side keep an even gap */
:is(.form-grid-2, .form-grid-3, .form-grid-4):has(> label.ff-fl) { gap: 12px !important; margin-bottom: 0; }
:is(.form-grid-2, .form-grid-3, .form-grid-4) > label.ff-fl { margin-bottom: 12px; }

/* group headings become a blue line with a plain bold title */
.form-section-label { margin: 22px 0 14px !important; padding: 18px 0 0 !important; border: 0 !important; border-top: 2px solid #1058FF !important;
  font: 700 16px var(--s-font) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--s-ink) !important; }
.form-section-label::before, .form-section-label::after { display: none !important; }
.card-body > .form-section-label:first-child, #customer-body > .form-section-label:first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }

/* New Job: the boxes sit on the page grey, no card around them (like the frame form) */
#customer-card { background: none !important; border: 0 !important; box-shadow: none !important; }
#customer-card > .card-header { padding: 0 0 12px !important; border: 0 !important; background: none !important; }
#customer-card > .card-header h3 { font: 700 22px var(--s-font); letter-spacing: -.01em; }
#customer-card > .card-body { padding: 0 !important; }
#customer-card label:not(.ff-fl) { font-weight: 600; }

/* the print / extras forms in the shared drawer get the same grey ground */
#frame-drawer:not(:has(.ff-studio)) .card-body { background: var(--s-canvas); }

/* popups: the same grey ground behind white boxes */
#modal-body:has(label.ff-fl) { background: var(--s-canvas); }
:is(.form-grid-2, .form-grid-3, .form-grid-4):has(> label.ff-fl) { gap: 12px !important; margin: 0 0 12px !important; }
:is(.form-grid-2, .form-grid-3, .form-grid-4) > label.ff-fl { margin: 0 !important; }
/* any card that holds these fields gets the grey ground, so the white boxes stand out (settings and the rest) */
.card:has(label.ff-fl):not(#customer-card):not(.ff-studio) { background: var(--s-canvas) !important; }
.card:has(label.ff-fl):not(#customer-card):not(.ff-studio) :is(.card-header) { background: transparent !important; }
/* the print form (same drawer) matched to the frame form: header, group lines, quantity, footer */
#frame-drawer .frame-form:not(.ff-studio) { background: var(--s-canvas); }
#frame-drawer .frame-form:not(.ff-studio) .drawer-header { background: var(--s-canvas); border-bottom: 2px solid #1058FF; }
#frame-drawer .frame-form:not(.ff-studio) .drawer-header h3 { font: 700 22px var(--s-font); letter-spacing: -.01em; }
#frame-drawer .frame-form:not(.ff-studio) .drawer-close { border: 0; background: none; width: 40px; height: 40px; font-size: 20px; }
#frame-drawer .frame-form:not(.ff-studio) .fi-section-label { margin: 22px 0 14px; padding: 18px 0 0; border: 0; border-top: 2px solid #1058FF;
  font: 700 16px var(--s-font); letter-spacing: 0; text-transform: none; color: var(--s-ink); }
#frame-drawer .frame-form:not(.ff-studio) .fi-section-label::before { display: none; }
#frame-drawer .frame-form:not(.ff-studio) :is(.fi-qty-block, .fi-photo-block) { margin: 0 0 12px; }
#frame-drawer .frame-form:not(.ff-studio) .fi-qty-label { display: block; width: 100%; margin: 0 0 6px; font: 700 12px var(--s-font); letter-spacing: 0; text-transform: none; color: var(--s-ink-2); }
#frame-drawer .frame-form:not(.ff-studio) .qty-stepper { display: grid; grid-template-columns: 48px 1fr 48px; width: 100%; height: 62px; border: 1.5px solid var(--ff-box-edge); border-radius: 12px; overflow: hidden; background: var(--s-input); }
#frame-drawer .frame-form:not(.ff-studio) .qty-btn { height: 59px; border: 0 !important; background: none !important; border-radius: 0 !important; font-size: 22px; color: var(--s-ink); }
#frame-drawer .frame-form:not(.ff-studio) .qty-input { height: 59px !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: center; font: 500 18px var(--s-font) !important; }
#frame-drawer .frame-form:not(.ff-studio) .drawer-footer { background: var(--s-canvas); border-top: 1px solid var(--s-line); }
#frame-drawer .frame-form:not(.ff-studio) .drawer-footer-label { font: 500 14px var(--s-font); letter-spacing: 0; text-transform: none; color: var(--s-ink-2); }
#frame-drawer .frame-form:not(.ff-studio) .drawer-footer-total strong { font: 700 26px var(--s-font); color: var(--s-ink); }
#frame-drawer .frame-form:not(.ff-studio) .drawer-footer .btn-primary { border-radius: 12px; min-height: 50px; font-size: 17px; }
@media (max-width: 760px) {
  #frame-drawer-overlay:has(.frame-form) { padding: 0; align-items: stretch; }
  #frame-drawer:has(.frame-form) { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
}
#frame-drawer .frame-form:not(.ff-studio) .fi-qty-block { position: relative; display: block; }
#frame-drawer .frame-form:not(.ff-studio) .fi-qty-block > .fi-qty-label { position: absolute; z-index: 1; top: 11px; left: 0; right: 0; width: auto; margin: 0; text-align: center; pointer-events: none; }
#frame-drawer .frame-form:not(.ff-studio) .fi-qty-block .qty-btn, #frame-drawer .frame-form:not(.ff-studio) .fi-qty-block .qty-input { padding-top: 14px !important; }
/* too big for the material: red, under the box it's about (2 Nov, his ask) */
.ff-too-big { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; padding: 0 2px; font: 600 14px/1.35 var(--s-font); color: #D92D20; }
.ff-too-big i { font-size: 18px; flex: none; margin-top: -1px; }
html[data-theme="dark"] .ff-too-big { color: #FF6B5E; }
input.is-too-big { border-color: #D92D20 !important; border-width: 2px !important; }
.ff-studio #fi-length-warning { display: none !important; }   /* the moulding warning now sits under the moulding box */
/* the new red line replaces the older small "won't fit" note inside the info line (studio form) */
.ff-studio .moulding-info-box :is(.mi-oversize, .mi-suggest) { display: none !important; }
#frame-form-active.ff-studio .st-layer input.is-too-big { border: 2px solid #D92D20 !important; }

/* =============================================================
   21. JOB BOOK (2 Nov, "do them all"): a big search, quick chips with
   counts, sort as a small button, a phone list grouped by date, and a
   tidier table on iPad and desktop (name + phone together, items under the
   description, headings that stay put, no gold stripe).
   ============================================================= */
/* toolbar: no card, the search is the main thing */
.joblist-toolbar { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 14px; }
.joblist-search-row { display: flex; align-items: center; gap: 8px; }
.joblist-search-row #job-search { flex: 1; min-width: 0; height: 52px; padding: 0 16px 0 44px !important; border: 1.5px solid var(--ff-box-edge) !important; border-radius: 12px !important;
  background: var(--s-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256' fill='%23737887'%3E%3Cpath d='M229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32ZM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72Z'/%3E%3C/svg%3E") no-repeat 14px 50% !important;
  font: 400 17px var(--s-font) !important; color: var(--s-ink); box-shadow: none !important; }
.joblist-search-row #job-search:focus { outline: none; border: 2px solid #1058FF !important; }
.joblist-search-row #job-date-slot .btn, .joblist-search-row #job-date-slot button { height: 52px; border-radius: 12px; border: 1.5px solid var(--ff-box-edge); background: var(--s-input); }
.jb-sort { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 52px; padding: 0 14px; border: 1.5px solid var(--ff-box-edge); border-radius: 12px; background: var(--s-input);
  font: 600 15px var(--s-font); color: var(--s-ink); cursor: pointer; }
.jb-sort i { font-size: 20px; }
.jb-sort select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
@media (max-width: 600px) { .jb-sort-text { display: none; } .jb-sort { padding: 0 14px; } }

/* quick chips */
.jb-chips { display: flex; gap: 8px; margin: 12px 0 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.jb-chips::-webkit-scrollbar { display: none; }
.jb-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1.5px solid var(--ff-box-edge); border-radius: 999px; background: var(--s-input);
  font: 600 15px var(--s-font); color: var(--s-ink); cursor: pointer; white-space: nowrap; }
.jb-chip span { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--s-sunk); font-size: 13px; text-align: center; color: var(--s-ink-2); }
.jb-chip[aria-pressed="true"] { background: #1058FF; border-color: #1058FF; color: #fff; }
.jb-chip[aria-pressed="true"] span { background: rgba(255,255,255,.22); color: #fff; }
.jb-chip.is-warn:not([aria-pressed="true"]) span { background: #FDE8E6; color: #C2261B; }
html[data-theme="dark"] .jb-chip.is-warn:not([aria-pressed="true"]) span { background: #4A2522; color: #FF8A80; }
/* saved filters + "Filter +" sit quietly after the chips */
#job-filter-bar { margin-top: 10px; }
#job-filter-bar .filter-add { background: none; border: 0; padding: 0; color: #1058FF; font-weight: 600; }
#job-filter-bar .filter-add-plus { display: none; }

/* phone list (iPad and up use the table) */
.jb-list { display: none; }
@media (max-width: 760px) {
  #jobs-table { display: none; }
  .jb-list { display: block; background: var(--s-surface); border-radius: 14px; overflow: hidden; }
}
.jb-group { padding: 18px 16px 8px; font: 700 13px var(--s-font); letter-spacing: .04em; text-transform: uppercase; color: var(--s-ink-2); background: var(--s-canvas); }
.jb-list > .jb-group:first-child { padding-top: 4px; }
.jb-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--s-line); background: var(--s-surface);
  text-align: left; font: inherit; color: var(--s-ink); cursor: pointer; }
.jb-row:active { background: var(--s-sunk); }
.jb-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.jb-main b { font: 600 17px var(--s-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-main small { font-size: 14px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-asap { margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: #FDE8E6; color: #C2261B; font: 700 11px var(--s-font); font-style: normal; vertical-align: 2px; }
.jb-side { flex: none; display: grid; justify-items: end; gap: 4px; }
.jb-side .badge { font-size: 12px; }
.jb-side small { font-size: 13px; color: var(--s-ink-2); }
.jb-side .jb-owe { color: #B35C00; font-weight: 600; }
html[data-theme="dark"] .jb-side .jb-owe { color: #FFB062; }
.jb-row.is-done .jb-main b { color: var(--s-ink-2); font-weight: 500; }

/* table: tidier, no stripe, headings stay at the top */
#jobs-table tbody tr td:first-child, #jobs-table tbody tr.job-owing td:first-child, #jobs-table tbody tr.job-ready-call td:first-child { box-shadow: none !important; }
#jobs-table tbody tr.job-owing td, #jobs-table tbody tr.job-ready-call td { background: var(--s-surface) !important; }
#jobs-table tbody tr.job-row:hover td { background: var(--s-sunk) !important; }
#jobs-table tbody tr td { border-left: 0 !important; }
#jobs-table tbody tr { border-left: 0 !important; box-shadow: none !important; }
#jobs-table thead th { position: sticky; top: 0; z-index: 2; background: var(--s-canvas); }
#jobs-table td { vertical-align: middle; }
#jobs-table .jb-cust b { display: block; font-weight: 600; }
#jobs-table .jb-cust small, #jobs-table .jb-desc small { display: block; margin-top: 2px; font-size: 13px; color: var(--s-ink-2); }
#jobs-table .jb-date { white-space: nowrap; color: var(--s-ink-2); }
#jobs-table .owing { color: #B35C00; font-weight: 600; }
html[data-theme="dark"] #jobs-table .owing { color: #FFB062; }
#jobs-table tr.jb-group td { padding: 18px 12px 8px !important; background: var(--s-canvas) !important; border: 0 !important; font: 700 13px var(--s-font); letter-spacing: .04em; text-transform: uppercase; color: var(--s-ink-2); cursor: default; }
#jobs-table tr.jb-group:hover td { background: var(--s-canvas) !important; }
.joblist-search-row .jb-sort { flex: 0 0 auto; width: auto; margin: 0; }
/* the list runs up to iPad portrait; the table from iPad landscape up */
@media (max-width: 900px) {
  #jobs-table { display: none; }
  .jb-list { display: block; background: var(--s-surface); border-radius: 14px; overflow: hidden; }
}
#jobs-table .jb-cust b, #jobs-table .jb-cust small, #jobs-table td:first-child { white-space: nowrap; }
#jobs-table th, #jobs-table td { padding-left: 10px; padding-right: 10px; }
#jobs-table .status-cell { white-space: nowrap; }
@media (max-width: 1280px) { #jobs-table th:nth-child(4), #jobs-table td.jb-date { display: none; } }
.jb-sort { display: inline-flex !important; flex-direction: row !important; }
#job-table-container { overflow-x: auto; }
/* 3 Nov (his ask): Job Book scrolls up and down only, never side to side.
   The tables fit the width; long descriptions cut off with an ellipsis. */
#job-table-container, #cust-table-container, #quotes-table-container { overflow-x: hidden !important; touch-action: pan-y; }
.jb-list, #jobs-table, #quotes-table, #cust-table-container .data-table { overflow-x: hidden !important; max-width: 100%; touch-action: pan-y; }
#jobs-table { width: 100%; }
#jobs-table .jb-desc small, #jobs-table .jb-cust small { overflow: hidden; text-overflow: ellipsis; }
/* the chips wrap onto a second line instead of swiping sideways */
.jb-chips { flex-wrap: wrap; overflow-x: visible !important; }
@media (max-width: 600px) {
  .joblist-search-row #job-date-slot button span, .joblist-search-row #job-date-slot .btn span { display: none; }
  .joblist-search-row #job-date-slot button, .joblist-search-row #job-date-slot .btn { width: 52px; padding: 0; justify-content: center; }
}
#jobs-table { width: 100%; min-width: 0 !important; table-layout: auto; }
#jobs-table td.jb-desc { max-width: 190px; white-space: normal; overflow-wrap: anywhere; }
#jobs-table th { white-space: nowrap; }
#jobs-table th .th-total { display: block; margin: 2px 0 0; }
/* Customers + Quotes in the same style as Jobs */
.joblist-search-row .jb-search { flex: 1; min-width: 0; height: 52px; padding: 0 16px 0 44px !important; border: 1.5px solid var(--ff-box-edge) !important; border-radius: 12px !important;
  background: var(--s-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256' fill='%23737887'%3E%3Cpath d='M229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32ZM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72Z'/%3E%3C/svg%3E") no-repeat 14px 50% !important;
  font: 400 17px var(--s-font) !important; box-shadow: none !important; }
.joblist-search-row .jb-search:focus { outline: none; border: 2px solid #1058FF !important; }
.jb-chip-check { position: relative; margin: 0 !important; }
.jb-chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.jb-chip-check:has(input:checked) { background: #1058FF; border-color: #1058FF; color: #fff; }
.jb-tag { margin-left: 8px; padding: 1px 7px; border-radius: 4px; background: #EFE7FF; color: #6A3BC9; font: 700 11px var(--s-font); font-style: normal; vertical-align: 2px; }
html[data-theme="dark"] .jb-tag { background: #362A55; color: #C9B2FF; }
@media (max-width: 900px) {
  #customers-table, #quotes-table { display: none; }
}
#customers-table .jb-cust b { display: block; font-weight: 600; white-space: nowrap; }
#customers-table .jb-cust small { display: block; margin-top: 2px; font-size: 13px; color: var(--s-ink-2); }
#customers-table .owing { color: #B35C00; font-weight: 600; }
.jb-help { margin: 0 0 14px !important; font-size: 14px !important; line-height: 1.5; color: var(--s-ink-2) !important; }
.jb-row-quote .jb-side strong { font: 700 16px var(--s-font); }
.jb-row-quote { cursor: pointer; }
.jb-del { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--s-ink-3); font-size: 18px; cursor: pointer; }
.jb-del:hover { background: #FDE8E6; color: #C2261B; }
.jb-row-quote .jb-side { grid-auto-flow: column; align-items: center; gap: 8px; }
label.jb-chip.jb-chip-check { display: inline-flex !important; align-items: center; height: 40px; padding: 0 16px !important; line-height: 1 !important; font: 600 15px var(--s-font) !important; text-transform: none; letter-spacing: 0; }

/* =============================================================
   22. SETTINGS LAYOUT (2 Nov, his ask): phone = a grouped home list like
   iPhone Settings, tap a row for a full-screen page with "‹ Settings"
   back; iPad/desktop keep the menu on the left. Dark mode moved out of
   Shop details to "This device". One Save button sticks to the bottom.
   ============================================================= */
.st-home, .st-back { display: none; }
.st-old-dark { display: none !important; }
.settings-nav-dark { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 4px; padding: 10px 12px; border-top: 1px solid var(--s-line);
  font: 500 15px var(--s-font); color: var(--s-ink-2); cursor: pointer; }
.settings-nav-dark > span:first-child { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 760px) {
  .settings-layout { display: block !important; }
  .settings-layout[data-view="home"] .st-home { display: block; }
  .settings-layout[data-view="home"] :is(.settings-nav, .settings-main) { display: none !important; }
  .settings-layout[data-view="page"] .settings-nav { display: none !important; }
  .settings-layout[data-view="page"] .st-back { display: inline-flex; }
  .settings-main, .settings-content { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .settings-content > h2 { font: 700 24px var(--s-font) !important; letter-spacing: -.01em; margin: 6px 0 14px !important; }
}
.st-home { padding: 4px 0 24px; }
.st-home-group + .st-home-group { margin-top: 22px; }
.st-home-group h3 { margin: 0 0 8px 4px; font: 700 13px var(--s-font); letter-spacing: .05em; text-transform: uppercase; color: var(--s-ink-2); }
.st-home-list { background: var(--s-surface); border-radius: 14px; overflow: hidden; }
.st-home-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--s-line); background: none;
  text-align: left; font: inherit; color: var(--s-ink); cursor: pointer; margin: 0; }
.st-home-row:last-child { border-bottom: 0; }
.st-home-row:active { background: var(--s-sunk); }
.st-home-ico { flex: none; width: 28px; display: grid; place-items: center; color: #1058FF; font-size: 26px; }
html[data-theme="dark"] .st-home-ico { color: #5C8DFF; }
.st-home-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.st-home-text b { font: 600 17px var(--s-font); }
.st-home-text small { font-size: 14px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-home-go { color: var(--s-ink-3); font-size: 16px; }
.st-home-version { margin: 22px 4px 0; font-size: 13px; color: var(--s-ink-3); }
.st-back { align-items: center; gap: 6px; min-height: 44px; margin: 0 0 4px -8px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: #1058FF; font: 600 17px var(--s-font); cursor: pointer; }
html[data-theme="dark"] .st-back { color: #6E95FF; }
/* Save in reach at the bottom (phones sit it above the tab bar) */
#settings-content button.st-save { position: sticky; bottom: 16px; z-index: 5; width: 100%; min-height: 52px; margin-top: 18px; border-radius: 12px; font-size: 17px;
  box-shadow: 0 10px 24px -10px rgba(16,88,255,.6); }
@media (max-width: 600px) { #settings-content button.st-save { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); } }
#settings-content button.st-save { justify-content: center; text-align: center; }
.settings-nav .settings-nav-dark { flex-direction: row !important; justify-content: space-between !important; text-align: left; }

/* =============================================================
   23. DEPTH (3 Nov, "the solids just seem too flat"): same colours, but
   the white sits on the grey with a soft shadow, the grey has a faint
   light-to-dark fall, and the blue solids get a gentle top light.
   Demo switch: html[data-look="depth"].
   ============================================================= */
html[data-look="depth"] {
  --dp-shadow: 0 1px 3px rgba(33,35,46,.08), 0 8px 24px rgba(33,35,46,.09);
  --dp-shadow-lift: 0 2px 4px rgba(33,35,46,.08), 0 10px 24px rgba(33,35,46,.10);
  --dp-blue: linear-gradient(180deg, #2A6BFF 0%, #1058FF 55%, #0D4EE8 100%);
}
html[data-look="depth"][data-theme="dark"] {
  --dp-shadow: 0 1px 2px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.28);
  --dp-shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.35);
}
/* the grey ground: a faint fall from light at the top */
html[data-look="depth"] body, html[data-look="depth"] #main-content { background: linear-gradient(180deg, #FAFBFC 0, #F5F6F8 320px, #EFF1F4 100%) fixed !important; }
html[data-look="depth"][data-theme="dark"] body, html[data-look="depth"][data-theme="dark"] #main-content { background: linear-gradient(180deg, #262937 0, #21232E 320px, #1C1E28 100%) fixed !important; }
/* white panels lift off it: shadow instead of a grey outline */
html[data-look="depth"] :is(.card, .st-home-list, .jb-list, .home-card, .data-table, .table-wrap, .settings-card, .vat-toggle-card, .board-col, .wk-card, .job-card) {
  box-shadow: var(--dp-shadow) !important; border-color: transparent !important; }
html[data-look="depth"][data-theme="dark"] :is(.card, .st-home-list, .jb-list, .home-card, .data-table, .table-wrap, .settings-card, .vat-toggle-card, .board-col, .wk-card, .job-card) {
  box-shadow: var(--dp-shadow), inset 0 1px 0 rgba(255,255,255,.04) !important; }
/* input boxes: a hint of an inner edge so they read as boxes, not cut-outs */
html[data-look="depth"] #frame-form-active.ff-studio :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
html[data-look="depth"] label.ff-fl :is(input, select, textarea) { box-shadow: 0 1px 2px rgba(33,35,46,.05) !important; }
/* blue solids: top light, soft blue shadow */
html[data-look="depth"] .home-stat { background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 86%, #fff) 0%, var(--hue) 60%, color-mix(in srgb, var(--hue) 90%, #000) 100%) !important;
  box-shadow: 0 1px 2px rgba(33,35,46,.10), 0 8px 20px color-mix(in srgb, var(--hue) 28%, transparent) !important; }
html[data-look="depth"] :is(.btn-primary, .jb-chip[aria-pressed="true"], .nav-item-cta, .tabbar-add, .st-save) { background: var(--dp-blue) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px rgba(16,88,255,.28) !important; }
html[data-look="depth"] .btn-primary:hover { filter: brightness(1.05); }
@media (max-width: 600px) {
  /* top bar is white now (3 Nov) */
}
/* the bottom bar floats */
html[data-look="depth"] :is(.tabbar, #tabbar, .mobile-tabbar) { box-shadow: 0 -1px 0 rgba(33,35,46,.04), 0 8px 28px rgba(33,35,46,.14) !important; }
/* 3 Nov, round 2: the iPhone still let the whole page slide sideways (its
   bounce), even with nothing too wide. Stop the sideways bounce everywhere,
   and on the Job Book only let a finger move the page up and down. */
html, body { overflow-x: clip; overscroll-behavior-x: none; }
body:has(.joblist-toolbar) :is(#main-content, #page-body, .jb-list, .jb-row, #jobs-table, .joblist-toolbar) { touch-action: pan-y pinch-zoom; }

/* =============================================================
   24. NEW JOB (3 Nov, his ask): customer + job details on the left, the
   running total and the items (frames, prints, extras) on the right, so
   adding a frame doesn't mean scrolling to the bottom. Phones stay one
   column: customer, items, then the total.
   ============================================================= */
.newjob-right { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1025px) {
  .newjob-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  /* stays in view while the left side scrolls (3 Nov, his ask); a long item list scrolls inside it */
  .newjob-right { position: sticky !important; top: 0; max-height: calc(100dvh - var(--header-h, 64px) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 1024px) {
  .newjob-right .summary-card { order: 2; }
}

/* New Job left side, calmer (3 Nov, his ask) */
/* notes + description: one line, grows as you type */
#customer-card label.ff-fl.ff-fl-ta > textarea.nj-grow { min-height: 62px; height: 62px; padding-top: 26px !important; padding-bottom: 8px !important; line-height: 1.35 !important; resize: none; overflow: hidden; }
/* dates sit in their boxes like the other values (iOS centred them on its own) */
label.ff-fl > input[type="date"] { line-height: 1.2 !important; padding-right: 14px !important; }
label.ff-fl > input[type="date"]::-webkit-date-and-time-value { margin: 0; padding: 0; text-align: left; line-height: 1.2; }
label.ff-fl > input[type="date"]::-webkit-datetime-edit { padding: 0; line-height: 1.2; }
/* Date, Due date and ASAP on one line */
#customer-card .nj-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important; }
.nj-asap, .nj-check { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; width: auto !important; align-items: center; gap: 10px; margin: 0; font: 600 16px var(--s-font) !important; color: var(--s-ink); cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; }
.nj-asap { height: 62px; padding: 0 16px; border: 1.5px solid var(--ff-box-edge); border-radius: 12px; background: var(--s-input); }
.nj-asap:has(input:checked) { border-color: #C2261B; color: #C2261B; background: #FDE8E6; }
html[data-theme="dark"] .nj-asap:has(input:checked) { background: #4A2522; color: #FF8A80; border-color: #FF8A80; }
:is(.nj-asap, .nj-check) input { width: 20px !important; height: 20px; margin: 0; accent-color: #1058FF; }
.nj-asap input { accent-color: #C2261B; }
.nj-check { margin: 0 0 12px 2px; }
#customer-card #trade-name-row { margin-bottom: 4px; }
/* payment: deposit on its own */
#customer-card .nj-pay { grid-template-columns: minmax(0, 1fr) !important; max-width: 50%; }
@media (max-width: 600px) {
  #customer-card .nj-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  #customer-card .nj-dates .nj-asap { grid-column: 1 / -1; height: 52px; }
  #customer-card .nj-pay { max-width: none; }
}
.nj-close i { font-size: 18px; vertical-align: -3px; margin-right: 2px; }
@media (max-width: 600px) { .nj-close { font-size: 0 !important; width: 48px; padding: 0 !important; } .nj-close i { font-size: 22px; margin: 0; } }
/* 3 Nov, round 3: the page scrolls inside #page-body, and a box that scrolls
   up and down also scrolls sideways unless told not to. Lock it. */
#page-body, #main-content { overflow-x: hidden !important; overscroll-behavior-x: none; }
.nj-close { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; }
/* Header buttons slimmer (3 Nov, his ask: "lots of space above and below the wording") */
#page-actions .btn, #page-actions .btn-lg { min-height: 40px !important; height: 40px; padding: 0 16px !important; font-size: 15px !important; line-height: 1 !important; border-radius: 10px !important; }
#page-actions { gap: 8px; }
#page-header { min-height: 56px !important; height: auto; padding-top: 8px !important; padding-bottom: 8px !important; }
@media (max-width: 600px) { #page-actions .btn.nj-close { width: 44px; padding: 0 !important; font-size: 0 !important; } #page-actions .btn.nj-close i { font-size: 20px; margin: 0; } }
/* Phone: the action buttons as one clean row under the blue bar (3 Nov,
   "a little funky at the top"): no grey strip or line, lined up with the
   page edges, Save as Quote and Confirm Job sharing the width. */
@media (max-width: 600px) {
  #page-header:has(#page-actions .btn) { min-height: 0 !important; padding: 12px 16px 0 !important; background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; }
  #page-header:has(#page-actions .btn) #page-title { display: none; }
  #page-actions:has(.btn) { display: flex !important; width: 100%; gap: 8px; margin: 0 !important; justify-content: stretch; }
  #page-actions .btn { flex: 1 1 0; min-width: 0; height: 44px !important; min-height: 44px !important; white-space: nowrap; justify-content: center; }
  #page-actions .btn.nj-close { flex: 0 0 44px; }
}
/* Phone top bar: WHITE (3 Nov, his pick over blue and navy): white bar, the normal
   two-tone logo, a soft shadow. */
@media (max-width: 600px) {
  html { background: #FFFFFF; }
  html #sidebar { background: #FFFFFF !important; box-shadow: 0 1px 0 var(--s-line), 0 2px 10px rgba(33,35,46,.06) !important; }
  html #sidebar .logo-name { color: #21232E !important; }
  html #sidebar .logo-name-accent { color: #1058FF !important; }
  html #sidebar .ff-mark .ff-frame { stroke: url(#ffg-side) !important; }
  html #sidebar .ff-mark .ff-bar { fill: url(#ffg-side) !important; }
  html[data-theme="dark"] { background: #292C39; }
  html[data-theme="dark"] #sidebar { background: #292C39 !important; box-shadow: 0 1px 0 var(--s-line) !important; }
  html[data-theme="dark"] #sidebar .logo-name { color: #FFFFFF !important; }
}

/* =============================================================
   25. PRODUCTION BOARD JOB (3 Nov, his ask): on iPad and desktop the job
   opens as a big card in the middle, not a side panel. Each frame shows
   the drawing on the left and its specs on the right. Phones keep the
   sheet from the bottom.
   ============================================================= */
.wk-frame-specs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 900px) {
  #wk-panel .wk-scrim { background: rgba(20,22,30,.45); }
  .wk-sheet { top: 24px; bottom: 24px; left: 24px; right: 24px; width: auto; max-width: 1180px; margin: 0 auto;
    border: 1px solid var(--s-line); border-radius: 18px; box-shadow: 0 24px 60px rgba(20,22,30,.28);
    transform: scale(.97); opacity: 0; transition: transform .2s ease, opacity .2s ease; overflow: hidden; }
  #wk-panel.is-open .wk-sheet { transform: none; opacity: 1; }
  .wk-sheet-body { padding: 24px 28px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-content: start; }
  .wk-sheet-body > * { grid-column: 1 / -1; }
  .wk-sheet-body > .wk-btn-big { grid-column: 1; margin: 0; }
  .wk-sheet-body > .wk-row { grid-column: 2; }
  .wk-sheet-body > .wk-btn-big, .wk-sheet-body > .wk-row .wk-btn { min-height: 56px; }
  .wk-sheet-body > .wk-loading { grid-column: 1 / -1; }
  .wk-frame { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px 20px; padding: 18px; align-items: start; }
  .wk-frame > .wk-frame-head { grid-column: 1 / -1; }
  .wk-frame > .wk-other { grid-column: 1 / -1; }
  .wk-frame-pic { grid-column: 1; }
  .wk-frame-specs { grid-column: 2; }
  canvas.wk-pic-big { height: min(52vh, 460px); }
  .wk-tiles { grid-template-columns: 1fr 1fr; }
}
/* 3 Nov: no scrolling to see a frame. Name on the left, the buttons beside it,
   money as a small chip, and the drawing sized to what's left of the screen. */
.wk-actions { display: flex; flex-direction: column; gap: 14px; }
.wk-money-chip, .wk-close-wide { display: none !important; }
@media (min-width: 900px) {
  .wk-sheet-body { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; padding: 20px 24px 24px; }
  .wk-sheet-body > .wk-head { grid-column: 1; grid-row: 1; }
  .wk-sheet-body > .wk-chips { grid-column: 1; grid-row: 2; }
  .wk-sheet-body > .wk-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; flex-direction: row; gap: 8px; }
  .wk-actions .wk-row { gap: 8px; }
  .wk-actions .wk-btn, .wk-sheet-body > .wk-actions .wk-btn-big, .wk-sheet-body .wk-actions .wk-row .wk-btn { width: auto; min-height: 48px; font-size: 16px; padding: 0 14px; flex: none; }
  .wk-close-wide { display: inline-flex !important; }
  .wk-head .wk-close { display: none; }
  .wk-title { font-size: 26px; }
  .wk-head .wk-phone { min-height: 0; }
  .wk-money-chip { display: inline-flex !important; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; background: var(--s-sunk); font-weight: 700; font-variant-numeric: tabular-nums; }
  .wk-money > span { display: none; }
  .wk-money:not(:has(.wk-notes)) { display: none; }
  .wk-frame { padding: 14px 16px; gap: 10px 20px; }
  canvas.wk-pic-big { height: clamp(240px, calc(100dvh - 330px), 560px); }
}
/* 3 Nov: on a phone the job sheet opens almost full screen */
@media (max-width: 899px) {
  .wk-sheet, .wk-sheet.is-tall { height: calc(100vh - 40px); height: calc(100dvh - 40px - env(safe-area-inset-top, 0px)); }
}
/* 3 Nov: the moulding popup opens above the production job card, not behind it */
#moulding-card-overlay { z-index: 10100; }
/* 3 Nov: while a job card (or the moulding popup) is open, only the card scrolls */
html:has(#wk-panel), html:has(#wk-panel) body,
body:has(#wk-panel) :is(#main-content, #page-body, .wk-board, .board-col-body, .board-columns, .board) { overflow: hidden !important; }
html:has(#moulding-card-overlay), html:has(#moulding-card-overlay) body { overflow: hidden !important; }
#wk-panel .wk-scrim, #moulding-card-overlay { touch-action: none; overscroll-behavior: contain; }
.wk-sheet-body, .mc-box { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.wk-grab { touch-action: none; }
.wk-tile b [data-outside] { font-size: inherit; color: inherit; }

/* =============================================================
   26. TIDY-UP FROM THE 3 NOV CHECK
   ============================================================= */
/* New Job: section titles are plain bold text with a thin grey rule, no blue line */
.form-section-label { border-top: 1px solid var(--s-line) !important; }
.form-section-label.nj-sub { margin: 18px 0 10px !important; padding-top: 14px !important; }
.job-photo-block > .form-section-label { width: 100%; }
/* running total: plain words, the amount is the one strong thing */
.running-total { background: var(--s-surface) !important; border-top: 0 !important; }
.running-total-label { font: 600 16px var(--s-font) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--s-ink-2) !important; }
.running-total-amount { color: var(--s-ink) !important; }

/* Home with figures hidden: dots, so it reads as hidden rather than still loading */
html:not([data-show-money]) .home-money { position: relative; background: none !important; min-width: 0; }
html:not([data-show-money]) .home-money::after { content: '••••'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--s-ink-2); letter-spacing: .08em; }
html:not([data-show-money]) .home-stat .home-money::after { color: rgba(255,255,255,.85); }

/* Job Book table: no dot in front of the header totals */
.th-total::before { content: none !important; }

/* Production cards on iPad: "SW01 · 40mm" stays on one line */
html[data-prod-v="g"] .wk-facts dd { white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; }
html[data-prod-v="g"] .board-card.wk-card:has(.wk-facts) { grid-template-columns: 54% 1fr; column-gap: 10px; }

/* Production on a phone: less above the first card */
@media (max-width: 600px) {
  #production-tabs { margin-bottom: 8px !important; }
  .board-typetabs { display: flex; gap: 6px; border: 0 !important; margin: 0 0 10px !important; padding: 0 !important; }
  .board-typetabs .tab-btn { flex: 1; height: 38px; min-height: 0; padding: 0 8px !important; border: 1.5px solid var(--ff-box-edge) !important; border-radius: 10px !important;
    background: var(--s-input); font: 600 15px var(--s-font) !important; color: var(--s-ink-2); box-shadow: none !important; }
  .board-typetabs .tab-btn::after { display: none !important; }
  .board-typetabs .tab-btn.active { background: var(--s-ink); border-color: var(--s-ink) !important; color: var(--s-surface); }
  .board-toolbar { display: flex !important; flex-wrap: nowrap !important; gap: 8px; align-items: center; margin-bottom: 12px !important; }
  .board-toolbar .board-hint { display: none !important; }
  .board-toolbar #board-search { flex: 1; min-width: 0; height: 44px; margin: 0 !important; }
  .board-toolbar .btn { flex: none; height: 44px; min-height: 0; padding: 0 12px !important; white-space: nowrap; }
  .board-toolbar .board-select-toggle { font-size: 0 !important; width: 44px; padding: 0 !important; justify-content: center; }
  .board-toolbar .board-select-toggle i { font-size: 20px; margin: 0; }
}

/* Quotes on a phone: the help text is a short line, not a paragraph */
@media (max-width: 600px) {
  .jb-help { font-size: 0 !important; margin: 0 0 12px !important; }
  .jb-help::before { content: 'Open a quote to edit it or confirm it as a job.'; font-size: 15px; color: var(--s-ink-2); }
}
/* New Job: photo button full width like the boxes; one rule between sections, not two */
#customer-card .job-photo-block .photo-upload-row { justify-content: stretch; margin-top: 0; }
#customer-card .job-photo-block .photo-upload-btn { max-width: none; height: 62px; border-radius: 12px; }
#customer-card .order-method-panel { border: 0 !important; padding: 0 !important; margin-top: 0 !important; background: none !important; }
#customer-card .job-photo-block { border: 0 !important; padding-bottom: 0 !important; }
html:not([data-show-money]) .home-money { min-width: 3.4em; margin-right: .3em; }
html:not([data-show-money]) .home-money::after { white-space: nowrap; }

/* 27. Production card from his sketch (3 Nov): number + name top left, drawing
   under it, frame / glass / mount / back down the right, size along the bottom. */
.wk-size { display: none; }
html[data-prod-v="g"] .board-card.wk-card { display: grid; grid-template-columns: 54% 1fr; grid-template-rows: auto 1fr auto; column-gap: 12px; row-gap: 6px; align-items: start; padding: 10px 10px 12px; }
html[data-prod-v="g"] .wk-card .wk-card-body { grid-column: 1; grid-row: 1; padding: 0 2px; }
html[data-prod-v="g"] .wk-card .wk-pic-wrap { grid-column: 1; grid-row: 2; align-self: center; }
html[data-prod-v="g"] .wk-card .wk-facts { grid-column: 2; grid-row: 1 / 3; align-self: start; padding: 2px 0 0; gap: 9px; }
html[data-prod-v="g"] .wk-card:not(:has(.wk-facts)) :is(.wk-card-body, .wk-pic-wrap) { grid-column: 1 / -1; }
html[data-prod-v="g"] .wk-card .wk-spec { display: none; }
html[data-prod-v="g"] .wk-size { display: block; grid-column: 1 / -1; grid-row: 3; text-align: center; font-size: 17px; font-weight: 600; color: var(--s-ink); padding-top: 4px; font-variant-numeric: tabular-nums; }
html[data-prod-v="g"] .wk-card-top { align-items: center; }
html[data-prod-v="g"] .wk-name { font-size: 14px; color: var(--s-ink-2); }
html[data-prod-v="g"] .wk-top-flags { display: inline-flex; gap: 4px; margin-left: auto; }
html[data-prod-v="g"] .wk-card .wk-top-flags :is(.board-card-waiting, .board-card-onorder, .wk-flag) { position: static; width: 24px; height: 24px; box-shadow: none; }
html[data-prod-v="g"] .wk-card .wk-top-flags :is(.board-card-waiting, .board-card-onorder, .wk-flag) i { font-size: 13px; }
html[data-prod-v="g"] canvas.wk-pic { height: 120px !important; }
/* Size fills the base (3 Nov): condensed like the job number, scales with the card. */
html[data-prod-v="g"] .board-card.wk-card { container-type: inline-size; }
html[data-prod-v="g"] .wk-size { font: 600 clamp(24px, 12.5cqi, 40px)/1.05 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .01em; padding-top: 6px; white-space: nowrap; }
html[data-prod-v="g"] .wk-size small { font-size: .6em; color: var(--s-ink-2); margin-left: .15em; }

/* 28. Phone step bar + one-column swipe (3 Nov, his idea). */
.board-steps { display: none; }
@media (max-width: 699px) {
  .board-steps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; padding: 2px 0; }
  .board-steps::-webkit-scrollbar { display: none; }
  .board-step { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-ink-2); font: 500 14px/1 inherit; font-family: inherit; white-space: nowrap; }
  .board-step b { font-weight: 600; color: var(--s-ink); font-variant-numeric: tabular-nums; }
  .board-step.is-on { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-surface); }
  .board-step.is-on b { color: var(--s-surface); }
  .board-columns, .board-columns.wk-board { scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 12px; overscroll-behavior-x: contain; }
  .board-columns .board-col, .wk-board .board-col { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .board-columns .board-col-head { display: none; }
}

/* 29. Dark mode: production cards lift off the page (3 Nov, his ask). */
html[data-theme="dark"] .board-card.wk-card { background: color-mix(in srgb, var(--s-surface) 86%, #fff); border: 1px solid var(--s-line-2); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
html[data-theme="dark"] .board-card.wk-card .wk-pic-wrap { background: var(--s-canvas); }
html[data-theme="dark"] .wk-board .board-col-body { background: transparent; }
/* 29b. Softer lift (3 Nov, "looks flat and plonked on"): a gentle top-lit
   gradient, a hairline highlight on the top edge, a layered soft shadow, and
   the drawing area only slightly recessed. */
html[data-theme="dark"] .board-card.wk-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--s-surface) 93%, #fff), color-mix(in srgb, var(--s-surface) 97%, #fff));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -10px rgba(0,0,0,.6);
}
html[data-theme="dark"] .board-card.wk-card .wk-pic-wrap { background: rgba(0,0,0,.16); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); }
/* 27b. Wide cards (phone, 3 Nov "very small words with lots of space"):
   bigger text, tighter gaps, drawing column a bit narrower. */
@container (min-width: 300px) {
  html[data-prod-v="g"] .wk-card .wk-no { font-size: 32px; }
  html[data-prod-v="g"] .wk-card .wk-count { font-size: 15px; }
  html[data-prod-v="g"] .wk-card .wk-name { font-size: 17px; }
  html[data-prod-v="g"] .wk-card .wk-facts { gap: 6px; padding-top: 4px; }
  html[data-prod-v="g"] .wk-card .wk-facts dt { font-size: 12px; }
  html[data-prod-v="g"] .wk-card .wk-facts dd { font-size: 20px; line-height: 1.2; }
}
@media (max-width: 699px) {
  html[data-prod-v="g"] .board-card.wk-card { grid-template-columns: 48% 1fr; column-gap: 16px; padding: 14px 14px 12px; }
  html[data-prod-v="g"] canvas.wk-pic { height: 150px !important; }
}
/* 27c. Wide cards, his pick (3 Nov): number + name across the top, then the
   drawing beside label/value rows with thin dividers, size along the bottom. */
@container (min-width: 300px) {
  html[data-prod-v="g"] .wk-card .wk-card-body { grid-column: 1 / -1; grid-row: 1; }
  html[data-prod-v="g"] .wk-card .wk-pic-wrap { grid-row: 2; }
  html[data-prod-v="g"] .wk-card .wk-facts { grid-row: 2; align-self: center; gap: 0; padding: 0; }
  html[data-prod-v="g"] .wk-card .wk-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--s-line); }
  html[data-prod-v="g"] .wk-card .wk-facts > div:last-child { border-bottom: 0; }
  html[data-prod-v="g"] .wk-card .wk-facts dt { font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--s-ink-2); }
  html[data-prod-v="g"] .wk-card .wk-facts dd { font-size: 18px; font-weight: 600; text-align: right; }
  html[data-prod-v="g"] .wk-card .wk-name { font-size: 16px; }
  html[data-prod-v="g"] .wk-card .wk-card-top + .wk-name { margin-top: -2px; }
}
html[data-theme="dark"][data-prod-v="g"] .wk-card .wk-facts > div { border-bottom-color: rgba(255,255,255,.08); }
@media (max-width: 699px) {
  html[data-prod-v="g"] .board-card.wk-card { grid-template-columns: 42% 1fr; row-gap: 10px; }
  html[data-prod-v="g"] canvas.wk-pic { height: 160px !important; }
}
@media (max-width: 699px) {
  html[data-prod-v="g"] .board-card.wk-card:has(.wk-facts) { grid-template-columns: 40% 1fr; column-gap: 14px; }
}
@container (min-width: 300px) {
  html[data-prod-v="g"] .wk-card .wk-facts { min-width: 0; }
  html[data-prod-v="g"] .wk-card .wk-facts > div { min-width: 0; }
  html[data-prod-v="g"] .wk-card .wk-facts dt { font-size: 13px; flex: 0 0 auto; }
  html[data-prod-v="g"] .wk-card .wk-facts dd { font-size: 17px; min-width: 0; }
}
/* 27d. Wide cards: the wood badge says what it means (3 Nov, his ask). */
@container (min-width: 300px) {
  html[data-prod-v="g"] .wk-card .wk-top-flags :is(.board-card-waiting, .board-card-onorder, .wk-flag) { width: auto; height: 30px; padding: 0 11px; border-radius: 8px; font-size: 14px; font-weight: 600; gap: 6px; }
  html[data-prod-v="g"] .wk-card .wk-top-flags :is(.board-card-waiting, .board-card-onorder, .wk-flag) i { font-size: 15px; }
}

/* 30. Phone tools row (3 Nov, his pick): Frames/Prints/Items as a dropdown,
   search behind a button; the stage bar stays as it is. */
.board-type-pick, .board-search-btn, .board-search-close { display: none !important; }
@media (max-width: 699px) {
  .board-typetabs { display: none !important; }
  .board-type-pick { display: inline-flex !important; position: relative; align-items: center; flex: 1; min-width: 0; }
  .board-type-pick select { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; padding: 0 38px 0 14px; border-radius: 10px; border: 1.5px solid var(--ff-box-edge, var(--s-line-2)); background: var(--s-surface); color: var(--s-ink); font: 600 16px/1 inherit; font-family: inherit; }
  .board-type-pick i { position: absolute; right: 13px; pointer-events: none; color: var(--s-ink-2); }
  .board-search-btn { display: inline-flex !important; width: 44px; padding: 0 !important; justify-content: center; font-size: 0 !important; }
  .board-search-btn i, .board-search-close i { font-size: 20px; margin: 0; }
  .board-toolbar:not(.is-searching) #board-search { display: none !important; }
  .board-toolbar.is-searching > :not(#board-search, .board-search-close) { display: none !important; }
  .board-toolbar.is-searching .board-search-close { display: inline-flex !important; width: 44px; padding: 0 !important; justify-content: center; font-size: 0 !important; }
}
@media (max-width: 699px) {
  .board-type-pick select { height: 44px !important; min-height: 0 !important; padding: 0 38px 0 14px !important; background-image: none !important; margin: 0 !important; }
  .board-type-pick::before, .board-type-pick::after { content: none !important; }
}
@media (max-width: 699px) { .board-type-pick i { top: 50%; transform: translateY(-50%); line-height: 1; } }

/* 31. Job Book job, redesign (3 Nov): opens like the Production card (big
   centred card on iPad, near full-height sheet on phone), number + name
   header, tabs kept but as the stage-bar buttons, Info as label/value rows. */
#modal-overlay.is-jd { align-items: stretch; justify-content: center; padding: 24px; }
#modal-overlay.is-jd #modal-box { width: min(1180px, 100%); max-width: none; max-height: none; height: auto; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
#modal-overlay.is-jd #modal-header { padding: 16px 20px 12px; border-bottom: 0; align-items: center; }
#modal-overlay.is-jd #modal-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; font-size: inherit; }
#modal-overlay.is-jd .jd-no { font: 600 34px/1 "Barlow Condensed", "Arial Narrow", sans-serif; color: var(--s-ink); }
#modal-overlay.is-jd .jd-name { font-size: 19px; font-weight: 600; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-overlay.is-jd #modal-close { width: 44px; height: 44px; border-radius: 10px; }
#modal-overlay.is-jd #modal-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; }
#modal-overlay.is-jd #modal-footer:empty { display: none; }

/* tabs as buttons */
#modal-overlay.is-jd .job-detail-tabs > .tab-bar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border: 0 !important; margin: 0 0 16px; padding: 2px 0; position: sticky; top: 0; z-index: 2; background: var(--s-surface); }
#modal-overlay.is-jd .job-detail-tabs > .tab-bar::-webkit-scrollbar { display: none; }
#modal-overlay.is-jd .job-detail-tabs > .tab-bar .tab-btn { flex: 0 0 auto; height: 38px; min-height: 0; padding: 0 14px !important; border: 1px solid var(--s-line-2) !important; border-radius: 10px !important; background: var(--s-surface); color: var(--s-ink-2); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
#modal-overlay.is-jd .job-detail-tabs > .tab-bar .tab-btn::after { display: none !important; }
#modal-overlay.is-jd .job-detail-tabs > .tab-bar .tab-btn.active { background: var(--s-ink); border-color: var(--s-ink) !important; color: var(--s-surface); }
#modal-overlay.is-jd .jd-tab-n { font-weight: 600; }

/* money + actions */
#modal-overlay.is-jd .jd-hero { margin: 0 0 12px; padding: 0; background: none; border: 0; }
#modal-overlay.is-jd .jd-hero-money { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label pay" "fig pay" "sub pay" "phone phone"; align-items: center; column-gap: 16px; row-gap: 2px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--s-line); background: var(--s-surface); }
#modal-overlay.is-jd .jd-hero-label { grid-area: label; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--s-ink-2); }
#modal-overlay.is-jd .jd-hero-figure { grid-area: fig; font: 600 40px/1.05 "Barlow Condensed", "Arial Narrow", sans-serif; }
#modal-overlay.is-jd .jd-hero-figure.is-owing { color: var(--s-ink); }
#modal-overlay.is-jd .jd-hero-money > .jd-hero-sub:not(.jd-hero-phone) { grid-area: sub; font-size: 14px; color: var(--s-ink-2); }
#modal-overlay.is-jd .jd-hero-phone { grid-area: phone; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--s-line); font-size: 16px; }
#modal-overlay.is-jd .jd-hero-pay { grid-area: pay; height: 48px; padding: 0 18px; border-radius: 12px; margin: 0; }
#modal-overlay.is-jd .jd-status-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; }
#modal-overlay.is-jd .jd-status-row .status-btn { flex-direction: row; justify-content: center; gap: 8px; height: 48px; min-height: 0; padding: 0 8px; border-radius: 12px; font-size: 15px; }
#modal-overlay.is-jd .jd-status-row .status-btn i { font-size: 18px; margin: 0; }

/* customer + job rows, like the Production card */
#modal-overlay.is-jd .jd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
#modal-overlay.is-jd .jd-cols > div { min-width: 0; }
#modal-overlay.is-jd .jd-group-label { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--s-ink-2); margin: 0 0 6px; }
#modal-overlay.is-jd .jd-rows { border: 1px solid var(--s-line); border-radius: 14px; background: var(--s-surface); padding: 0 16px; }
#modal-overlay.is-jd .jd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--s-line); min-width: 0; }
#modal-overlay.is-jd .jd-row:last-child { border-bottom: 0; }
#modal-overlay.is-jd .jd-row.is-stacked { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
#modal-overlay.is-jd .jd-row-label { flex: 0 0 auto; font-size: 14px; color: var(--s-ink-2); }
#modal-overlay.is-jd .jd-row-value { min-width: 0; text-align: right; font-size: 16px; font-weight: 600; color: var(--s-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-overlay.is-jd .jd-row-value a { font-weight: 600; }
#modal-overlay.is-jd .jd-row-note { font-size: 16px; font-weight: 600; color: var(--s-ink); }
#modal-overlay.is-jd .jd-row-value:has(.detail-due-edit) { overflow: visible; white-space: normal; }

/* bottom actions: Edit Job leads, the rest quieter */
#modal-overlay.is-jd .job-detail-actions { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--s-line); }
#modal-overlay.is-jd .job-detail-actions .btn { height: 48px; border-radius: 12px; }
#modal-overlay.is-jd .job-detail-actions .btn-primary { flex: 1; }
#modal-overlay.is-jd .job-detail-actions .btn-danger { background: transparent; border: 1px solid var(--s-line-2); color: #C0392B; box-shadow: none; }
#modal-overlay.is-jd .job-detail-quiet { text-align: center; margin-top: 10px; }

@media (max-width: 699px) {
  #modal-overlay.is-jd { padding: 0; align-items: flex-end; }
  #modal-overlay.is-jd #modal-box { width: 100%; height: calc(100dvh - 40px - env(safe-area-inset-top)); border-radius: 18px 18px 0 0; border-bottom: 0; }
  #modal-overlay.is-jd #modal-header { padding: 14px 16px 10px; }
  #modal-overlay.is-jd #modal-body { padding: 0 16px calc(20px + env(safe-area-inset-bottom)); }
  #modal-overlay.is-jd .jd-hero-money { grid-template-columns: 1fr; grid-template-areas: "label" "fig" "sub" "pay" "phone"; }
  #modal-overlay.is-jd .jd-hero-pay { width: 100%; margin-top: 12px; }
  #modal-overlay.is-jd .jd-cols { grid-template-columns: 1fr; }
  #modal-overlay.is-jd .jd-status-row .status-btn { font-size: 14px; gap: 6px; padding: 0 4px; }
  #modal-overlay.is-jd .job-detail-actions { flex-wrap: wrap; }
  #modal-overlay.is-jd .job-detail-actions .btn-primary { flex: 1 0 100%; }
  #modal-overlay.is-jd .job-detail-actions .btn:not(.btn-primary) { flex: 1; }
}
html[data-theme="dark"] #modal-overlay.is-jd :is(.jd-hero-money, .jd-rows) { background: color-mix(in srgb, var(--s-surface) 94%, #fff); border-color: rgba(255,255,255,.07); }
#modal-overlay.is-jd .jd-hero { display: block !important; }
#modal-overlay.is-jd .job-detail-tabs > .tab-bar .tab-btn { box-shadow: none !important; border-bottom-width: 1px !important; }
#modal-overlay.is-jd .job-detail-tabs > .tab-bar .tab-btn.active { border-bottom-color: var(--s-ink) !important; }

/* 32. Production card flags (3 Nov, his ask): ASAP = red outline round the
   card, brought over from last batch = orange outline; the round flag goes.
   Round icons centred properly. */
html[data-prod-v="g"] .wk-card .wk-top-flags .wk-flag { display: none !important; }
html[data-prod-v="g"] .board-card.wk-card:has(.wk-flag-red) { border: 2px solid #D2382B !important; }
html[data-prod-v="g"] .board-card.wk-card:has(.wk-flag-amber) { border: 2px solid #E08A1E !important; }
html[data-prod-v="g"] .wk-card .wk-top-flags :is(.board-card-waiting, .board-card-onorder) { gap: 0; line-height: 1; }
html[data-prod-v="g"] .wk-card .wk-top-flags :is(.board-card-waiting, .board-card-onorder) i { display: block; line-height: 1; width: 1em; height: 1em; }
@container (min-width: 300px) {
  html[data-prod-v="g"] .wk-card .wk-top-flags :is(.board-card-waiting, .board-card-onorder) { gap: 6px; }
}

/* 33. Wood status on the Production job card (3 Nov, his ask). */
.wk-wood { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--s-line); border-radius: 12px; }
.wk-wood-label { font-size: 14px; color: var(--s-ink-2); flex: 0 0 auto; }
.wk-wood-stock { font-weight: 600; color: var(--s-ink); display: inline-flex; align-items: center; gap: 6px; }
.wk-wood-opts { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wk-wood-opt { height: 44px; border-radius: 10px; border: 1px solid var(--s-line-2); background: var(--s-surface); color: var(--s-ink-2); font: 600 14px/1 inherit; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; white-space: nowrap; cursor: pointer; }
.wk-wood-opt i { font-size: 17px; }
.wk-wood-opt.is-on { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-surface); }
@media (max-width: 420px) { .wk-wood { flex-direction: column; align-items: stretch; gap: 8px; } .wk-wood-opt { font-size: 13px; } }

/* 34. Job Book job, Info on one page (3 Nov, his ask): customer + job on the
   left, payments on the right with Receipt to send / re-send. */
#modal-overlay.is-jd .jd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#modal-overlay.is-jd .jd-pays { border: 1px solid var(--s-line); border-radius: 14px; background: var(--s-surface); padding: 0 14px; }
#modal-overlay.is-jd .jd-pay { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--s-line); }
#modal-overlay.is-jd .jd-pay:last-child { border-bottom: 0; }
#modal-overlay.is-jd .jd-pay-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--s-sunk); color: var(--s-ink); font-size: 18px; }
#modal-overlay.is-jd .jd-pay-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#modal-overlay.is-jd .jd-pay-text b { font-size: 15px; font-weight: 600; color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-overlay.is-jd .jd-pay-text b small { font-weight: 500; color: var(--s-ink-2); font-size: 13px; margin-left: 4px; }
#modal-overlay.is-jd .jd-pay-text > small { font-size: 13px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-overlay.is-jd .jd-pay-amt { font: 600 22px/1 "Barlow Condensed", "Arial Narrow", sans-serif; color: var(--s-ink); }
#modal-overlay.is-jd .jd-pay-btn { height: 38px; min-height: 0; padding: 0 12px; border-radius: 10px; font-size: 14px; gap: 6px; display: inline-flex; align-items: center; }
#modal-overlay.is-jd .jd-pay.is-cancelled { opacity: .55; }
#modal-overlay.is-jd .jd-pay.is-cancelled .jd-pay-amt { text-decoration: line-through; }
#modal-overlay.is-jd .jd-pay-empty { padding: 16px 0; color: var(--s-ink-2); font-size: 14px; }
html[data-theme="dark"] #modal-overlay.is-jd .jd-pays { background: color-mix(in srgb, var(--s-surface) 94%, #fff); border-color: rgba(255,255,255,.07); }
/* tighter so Info fits without scrolling on iPad */
@media (min-width: 700px) {
  #modal-overlay.is-jd .jd-hero-money { padding: 12px 16px; grid-template-areas: "label pay" "fig pay" "sub phone"; }
  #modal-overlay.is-jd .jd-hero-phone { margin: 0; padding: 0; border: 0; justify-self: end; }
  #modal-overlay.is-jd .jd-hero-figure { font-size: 34px; }
  #modal-overlay.is-jd .jd-status-row { margin-bottom: 14px; }
  #modal-overlay.is-jd .jd-row { min-height: 44px; padding: 6px 0; }
  #modal-overlay.is-jd .job-detail-actions { margin-top: 14px; padding-top: 12px; }
}
@media (max-width: 699px) {
  #modal-overlay.is-jd .jd-pay { grid-template-columns: 32px 1fr auto; row-gap: 8px; }
  #modal-overlay.is-jd .jd-pay-btn { grid-column: 2 / -1; justify-self: start; }
}

/* 35. Job Book job header (3 Nov, his ask): number bold, then name, then the
   phone in blue, along one line; on phone the number large with name + phone
   smaller underneath. The phone leaves the payment box. */
#modal-overlay.is-jd #modal-title { align-items: baseline; gap: 14px; }
#modal-overlay.is-jd .jd-who { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
#modal-overlay.is-jd .jd-name { color: var(--s-ink); font-size: 20px; }
#modal-overlay.is-jd .jd-tel { font-size: 18px; font-weight: 600; color: var(--s-accent, #1058FF); text-decoration: none; white-space: nowrap; }
#modal-overlay.is-jd .jd-hero-phone { display: none !important; }
#modal-overlay.is-jd .jd-hero-money { grid-template-areas: "label pay" "fig pay" "sub pay" !important; }
@media (max-width: 699px) {
  #modal-overlay.is-jd #modal-title { flex-direction: column; align-items: flex-start; gap: 4px; }
  #modal-overlay.is-jd .jd-no { font-size: 40px; }
  #modal-overlay.is-jd .jd-who { flex-direction: column; gap: 2px; }
  #modal-overlay.is-jd .jd-name { font-size: 17px; }
  #modal-overlay.is-jd .jd-tel { font-size: 16px; }
  #modal-overlay.is-jd .jd-hero-money { grid-template-areas: "label" "fig" "sub" "pay" !important; }
  #modal-overlay.is-jd #modal-header { align-items: flex-start; }
}

/* 36. Job Book job, his pick (3 Nov): iPad "two halves", phone "summary strip".
   Builds on 31/34; the modal's own header is replaced by the side panel. */
#modal-overlay.is-jd #modal-header { display: none; }
#modal-overlay.is-jd #modal-body { padding: 0; display: flex; flex-direction: column; }
#modal-overlay.is-jd .jd2 { flex: 1; display: grid; grid-template-columns: 320px 1fr; min-height: 100%; }
#modal-overlay.is-jd .jd2-side { background: var(--s-sunk); border-right: 1px solid var(--s-line); padding: 22px 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#modal-overlay.is-jd .jd2-id { display: flex; align-items: flex-start; gap: 10px; }
#modal-overlay.is-jd .jd2-id > div { flex: 1; min-width: 0; }
#modal-overlay.is-jd .jd2-no { font: 600 54px/.9 "Barlow Condensed", "Arial Narrow", sans-serif; color: var(--s-ink); }
#modal-overlay.is-jd .jd2-name { font-size: 21px; font-weight: 700; color: var(--s-ink); margin-top: 6px; overflow-wrap: anywhere; }
#modal-overlay.is-jd .jd2-contact { display: flex; flex-direction: column; }
#modal-overlay.is-jd .jd2-contact a { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-weight: 600; font-size: 15px; text-decoration: none; min-width: 0; }
#modal-overlay.is-jd .jd2-contact a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-overlay.is-jd .jd2-contact i { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--s-surface); border: 1px solid var(--s-line); display: inline-flex; align-items: center; justify-content: center; color: var(--s-ink); font-size: 16px; }
#modal-overlay.is-jd .jd2-track { display: flex; flex-direction: column; gap: 8px; }
#modal-overlay.is-jd .jd2-track .status-btn { flex-direction: row; justify-content: flex-start; gap: 10px; height: 48px; min-height: 0; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 600; width: 100%; min-width: 0; }
#modal-overlay.is-jd .jd2-track .status-btn i { font-size: 18px; margin: 0; }
#modal-overlay.is-jd .jd2-spacer { flex: 1; }
#modal-overlay.is-jd .jd2-quiet { border: 0; background: none; padding: 6px 0; color: var(--s-ink-2); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; cursor: pointer; }
#modal-overlay.is-jd .jd2-main { padding: 18px 20px 18px; display: flex; flex-direction: column; min-width: 0; }
#modal-overlay.is-jd .jd2-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; position: sticky; top: 0; z-index: 2; background: var(--s-surface); }
#modal-overlay.is-jd .jd2-top .tab-bar { flex: 1; margin: 0 !important; position: static !important; }
#modal-overlay.is-jd .jd2-x { flex: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; }
#modal-overlay.is-jd .jd2-x-phone { display: none; }
#modal-overlay.is-jd #job-detail-body { min-width: 0; }
#modal-overlay.is-jd .jd2-strip, #modal-overlay.is-jd .jd2-ticks { display: none; }
#modal-overlay.is-jd .jd-hero-money { grid-template-areas: "label pay" "fig pay" "sub pay" !important; padding: 16px 18px; }
#modal-overlay.is-jd .jd-hero-figure { font-size: 42px; }
#modal-overlay.is-jd .jd-hero { margin-bottom: 14px; }
#modal-overlay.is-jd .jd-cols { grid-template-columns: 1fr 1fr; gap: 14px; }
#modal-overlay.is-jd .job-detail-actions { margin-top: auto; padding-top: 14px; border-top: 0; }
#modal-overlay.is-jd .job-detail-actions .btn-danger { border-color: transparent; }
html[data-theme="dark"] #modal-overlay.is-jd .jd2-side { background: color-mix(in srgb, var(--s-surface) 80%, #000); }

@media (max-width: 699px) {
  #modal-overlay.is-jd .jd2 { display: flex; flex-direction: column; }
  #modal-overlay.is-jd .jd2-side { display: contents; }
  #modal-overlay.is-jd .jd2-id { padding: 16px 16px 0; }
  #modal-overlay.is-jd .jd2-no { font-size: 44px; }
  #modal-overlay.is-jd .jd2-name { font-size: 19px; margin-top: 2px; }
  #modal-overlay.is-jd .jd2-contact { padding: 4px 16px 0; }
  #modal-overlay.is-jd .jd2-contact a { padding: 3px 0; font-size: 15px; }
  #modal-overlay.is-jd .jd2-contact i { width: auto; height: auto; border: 0; background: none; color: var(--s-accent, #1058FF); }
  #modal-overlay.is-jd .jd2-track, #modal-overlay.is-jd .jd2-spacer { display: none; }
  #modal-overlay.is-jd .jd2-quiet { order: 9; align-self: center; margin: 0 0 calc(16px + env(safe-area-inset-bottom)); }
  #modal-overlay.is-jd .jd2-x-phone { display: inline-flex; }
  #modal-overlay.is-jd .jd2-x-wide { display: none; }
  #modal-overlay.is-jd .jd2-main { padding: 14px 16px 12px; order: 1; }
  #modal-overlay.is-jd .jd-hero:not(:has(.jd-hero-pay)) { display: none; }
  #modal-overlay.is-jd .jd-hero-money { display: block; padding: 0; border: 0; background: none !important; }
  #modal-overlay.is-jd .jd-hero-money > :not(.jd-hero-pay) { display: none !important; }
  #modal-overlay.is-jd .jd-hero-pay { width: 100%; margin: 0; }
  #modal-overlay.is-jd .jd2-strip { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--s-line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
  #modal-overlay.is-jd .jd2-strip > div { padding: 12px 14px; border-right: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); min-width: 0; }
  #modal-overlay.is-jd .jd2-strip > div:nth-child(2n) { border-right: 0; }
  #modal-overlay.is-jd .jd2-strip > div:nth-last-child(-n+2):nth-child(odd), #modal-overlay.is-jd .jd2-strip > div:last-child { border-bottom: 0; }
  #modal-overlay.is-jd .jd2-strip small { display: block; font-size: 13px; color: var(--s-ink-2); }
  #modal-overlay.is-jd .jd2-strip b { font-size: 17px; font-weight: 600; color: var(--s-ink); }
  #modal-overlay.is-jd .jd2-strip .jd2-big { font: 600 30px/1.05 "Barlow Condensed", "Arial Narrow", sans-serif; }
  #modal-overlay.is-jd .jd2-ticks { display: grid; }
  #modal-overlay.is-jd .jd-cols { grid-template-columns: 1fr; }
  #modal-overlay.is-jd .job-detail-actions { margin-top: 16px; }
}
html[data-theme="dark"] #modal-overlay.is-jd .jd2-strip { background: color-mix(in srgb, var(--s-surface) 94%, #fff); border-color: rgba(255,255,255,.07); }
html[data-theme="dark"] #modal-overlay.is-jd .jd2-strip > div { border-color: rgba(255,255,255,.07); }
#modal-overlay.is-jd .jd2-top .tab-bar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border: 0 !important; padding: 2px 0; }
#modal-overlay.is-jd .jd2-top .tab-bar::-webkit-scrollbar { display: none; }
#modal-overlay.is-jd .jd2-top .tab-bar .tab-btn { flex: 0 0 auto; height: 38px; min-height: 0; padding: 0 14px !important; border: 1px solid var(--s-line-2) !important; border-radius: 10px !important; background: var(--s-surface); color: var(--s-ink-2); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; box-shadow: none !important; margin: 0 !important; }
#modal-overlay.is-jd .jd2-top .tab-bar .tab-btn::after { display: none !important; }
#modal-overlay.is-jd .jd2-top .tab-bar .tab-btn.active { background: var(--s-ink); border-color: var(--s-ink) !important; color: var(--s-surface); }
#modal-overlay.is-jd .jd2-track .status-btn { height: 48px !important; min-height: 48px !important; padding: 0 14px !important; }

/* 37. (3 Nov, his ask) Contacted / Paid / Collected: big buttons shaped like
   every other button (rounded rectangle, 52px); the due date as plain text,
   no grey box (iOS draws one round date inputs unless told not to). */
.status-btn { border-radius: 12px !important; }
#modal-overlay.is-jd :is(.jd2-track, .jd2-ticks) .status-btn { height: 56px !important; min-height: 56px !important; font-size: 16px !important; font-weight: 600; border-width: 1.5px; }
#modal-overlay.is-jd :is(.jd2-track, .jd2-ticks) .status-btn i { font-size: 20px !important; }
#modal-overlay.is-jd .jd2-track { gap: 10px; }
.detail-due-edit .due-date-input { -webkit-appearance: none; appearance: none; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0; padding: 0 !important; height: auto; min-height: 0; color: var(--s-ink) !important; font-size: 16px; font-weight: 600; }
.detail-due-edit .due-date-input::-webkit-date-and-time-value { text-align: right; margin: 0; }
.detail-due-edit .asap-toggle { border-radius: 8px; }

/* 38. Quotes (4 Nov, his ask): the phone's row list on every screen, the
   table is gone. */
.jb-list.jb-list-all { display: block; background: var(--s-surface); border-radius: 14px; overflow: hidden; }

/* 39. Materials (4 Nov, his ask): no tinted boxes. Each list is a plain
   heading on the page, each supplier a white card of rows like the Job
   Book: tick, code + what it is + which jobs, then what to order. The
   same chop several times is one row with ×4. */
.toorder .mat-section { border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0; overflow: visible; margin: 0 0 30px; }
.toorder .mat-section-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 6px 2px 12px; border: 0; background: none !important; }
.toorder .mat-section-titles { display: contents; }
.toorder .mat-section-title { grid-column: 1; grid-row: 1; margin: 0; font: 700 22px var(--s-font); letter-spacing: -.01em; color: var(--s-ink); }
.toorder .mat-section-head > .btn { grid-column: 2; grid-row: 1; height: 46px; padding: 0 18px; font-size: 16px; }
.toorder .mat-section-sub { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.45; color: var(--s-ink-2); }
.toorder .mat-section-body { padding: 0; }
.toorder .mat-empty { margin: 0; padding: 18px 16px; border-radius: 14px; background: var(--s-surface); font-size: 15px; }
.toorder .order-supplier { margin: 0 0 14px; border: 0 !important; border-radius: 14px; overflow: hidden; background: var(--s-surface) !important; box-shadow: var(--dp-shadow, 0 1px 3px rgba(0,0,0,.08)) !important; }
.toorder .order-supplier-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 16px; background: none; border-bottom: 1px solid var(--s-line); }
.toorder label.order-sup-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; margin: 0; padding: 0; font: 700 18px var(--s-font); color: var(--s-ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.toorder .order-sup-name { font: 700 18px var(--s-font); color: var(--s-ink); }
.toorder .mat-n { font-size: 14px; color: var(--s-ink-2); white-space: nowrap; }
.toorder :is(.order-sup-check input, .mat-tick input) { flex: none; width: 24px; height: 24px; margin: 0; accent-color: #1058FF; cursor: pointer; }
.toorder .mat-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border-bottom: 1px solid var(--s-line); }
.toorder .mat-row:last-child { border-bottom: 0; }
.toorder label.mat-tick { flex: none; display: flex !important; align-items: center; margin: 0; padding: 0; cursor: pointer; }
.toorder .mat-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.toorder .mat-main b { font: 700 17px var(--s-font); color: var(--s-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toorder .mat-main small { font-size: 14px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toorder .mat-side { flex: none; display: flex; align-items: center; gap: 8px; }
.toorder .mat-side b { font: 600 17px var(--s-font); font-variant-numeric: tabular-nums; color: var(--s-ink); white-space: nowrap; }
.toorder .mat-count { min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; background: var(--s-ink); color: var(--s-surface); display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--s-font); }
.toorder .mat-reorder { justify-self: start; margin: 4px 0 0; padding: 0; border: 0; background: none; color: #1058FF; font: 600 14px var(--s-font); cursor: pointer; }
html[data-theme="dark"] .toorder .mat-reorder { color: #6E95FF; }
html[data-theme="dark"] .toorder .order-supplier { box-shadow: var(--dp-shadow), inset 0 1px 0 rgba(255,255,255,.04) !important; }
html[data-theme="dark"] .toorder :is(.order-supplier-head, .mat-row) { border-color: rgba(255,255,255,.07); }
@media (max-width: 600px) {
  .toorder .mat-section-title { font-size: 20px; }
  .toorder .mat-section-head > .btn { height: 44px; padding: 0 14px; font-size: 15px; }
  .toorder .mat-row { gap: 12px; padding: 10px 14px; }
  .toorder .mat-side b { font-size: 16px; }
}

/* 40. Production → Lists (4 Nov, his picks): a tidy table on iPad like the
   Job Book's (nothing wraps, the job's name under its number, the wood's
   order status under the moulding), rows on the phone. */
.ls-toolbar .jb-search { flex: 1; min-width: 0; }
.ls-pick { flex: none; width: auto; max-width: 44%; height: 52px; margin: 0 !important; padding: 0 38px 0 14px !important; border: 1.5px solid var(--ff-box-edge) !important; border-radius: 12px !important;
  -webkit-appearance: none; appearance: none; box-shadow: none !important; font: 600 15px var(--s-font) !important; color: var(--s-ink) !important; cursor: pointer;
  background: var(--s-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256' fill='%23737887'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") no-repeat right 14px center !important; }
.ls-pick:focus { outline: none; border: 2px solid #1058FF !important; }
.ls-table { width: 100%; }
.ls-table thead th { position: sticky; top: 0; z-index: 2; background: var(--s-canvas); white-space: nowrap; }
.ls-table th, .ls-table td { padding-left: 10px; padding-right: 10px; vertical-align: middle; white-space: nowrap; }
.ls-table :is(.ls-job, .ls-code, .ls-item) b { display: block; font-weight: 600; }
.ls-table :is(.ls-job, .ls-code, .ls-item) small { display: block; margin-top: 2px; font-size: 13px; color: var(--s-ink-2); overflow: hidden; text-overflow: ellipsis; }
.ls-table .ls-job small { max-width: 190px; }
.ls-table .ls-item small, .ls-table .ls-item b { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ls-table .ls-size { font-variant-numeric: tabular-nums; font-weight: 600; }
.ls-table .ls-wrap { white-space: normal; max-width: 220px; overflow-wrap: anywhere; }
.ls-table .ls-money { text-align: right; font-variant-numeric: tabular-nums; }
.ls-list .jb-side { max-width: 46%; }
.ls-list .jb-side small { white-space: nowrap; }
@media (max-width: 900px) {
  .ls-table { display: none; }
  .jb-list.ls-list { display: block; background: var(--s-surface); border-radius: 14px; overflow: hidden; }
}
@media (max-width: 600px) {
  .ls-pick { max-width: 40%; padding-right: 32px !important; background-position: right 11px center !important; font-size: 14px !important; }
}

/* 41. Job Price tab (4 Nov): a plain breakdown, one row per item, then the
   totals. Payments are only on Info now, where a cash/other payment
   written down by mistake gets a small Cancel under its Receipt button. */
#modal-overlay.is-jd .jd-price { border: 1px solid var(--s-line); border-radius: 14px; overflow: hidden; background: var(--s-surface); }
#modal-overlay.is-jd .jd-price-row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; border-bottom: 1px solid var(--s-line); }
#modal-overlay.is-jd .jd-price-what { flex: 1; min-width: 0; display: grid; gap: 2px; }
#modal-overlay.is-jd .jd-price-what b { font: 600 16px var(--s-font); color: var(--s-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-overlay.is-jd .jd-price-what small { font-size: 14px; color: var(--s-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-overlay.is-jd .jd-price-amt { flex: none; font: 600 16px var(--s-font); font-variant-numeric: tabular-nums; color: var(--s-ink); }
#modal-overlay.is-jd .jd-price-sum { display: flex; justify-content: space-between; gap: 14px; padding: 8px 16px; font-size: 15px; color: var(--s-ink-2); font-variant-numeric: tabular-nums; }
#modal-overlay.is-jd .jd-price-sum.is-total { padding-top: 14px; font: 700 17px var(--s-font); color: var(--s-ink); }
#modal-overlay.is-jd .jd-price-sum.is-left { padding-bottom: 14px; font-weight: 600; color: var(--s-ink); }
#modal-overlay.is-jd .jd-price-sum.is-owing span:last-child { color: #B35C00; }
html[data-theme="dark"] #modal-overlay.is-jd .jd-price-sum.is-owing span:last-child { color: #FFB062; }
html[data-theme="dark"] #modal-overlay.is-jd :is(.jd-price, .jd-price-row) { border-color: rgba(255,255,255,.07); }
#modal-overlay.is-jd .jd-price-note { margin: 12px 2px 0; font-size: 14px; color: var(--s-ink-2); }
#modal-overlay.is-jd .jd-price-note .link-btn { padding: 0; font-size: 14px; font-weight: 600; }
#modal-overlay.is-jd .jd-pay-acts { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#modal-overlay.is-jd .jd-pay-cancel { padding: 2px 6px; border: 0; background: none; color: var(--s-ink-2); font: 500 13px var(--s-font); cursor: pointer; }
#modal-overlay.is-jd .jd-pay-cancel:hover { color: #C2261B; }

/* 42. Batch (4 Nov): no coloured lines along the top of the columns; the
   columns are quiet grey trays and the jobs white cards like Production's,
   ASAP = red outline, carried over from last batch = orange outline. */
.batch-col, .batch-col.is-this, .batch-col.is-next { border: 0 !important; border-radius: 16px; background: var(--s-sunk) !important; box-shadow: none !important; overflow: hidden; }
.batch-col-head { padding: 14px 16px 8px; border-bottom: 0 !important; background: none !important; }
.batch-col-name { font: 700 18px var(--s-font); color: var(--s-ink); }
.batch-col-sub, .batch-col-left { margin-top: 4px; font-size: 14px; color: var(--s-ink-2); }
.batch-col-facts { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--s-ink); }
.batch-col-body { padding: 6px 10px 12px; gap: 10px; }
.batch-col .board-empty { padding: 18px 8px; border: 0; background: none; color: var(--s-ink-2); }
.bjob, .bjob.is-leftover, .bjob.is-urgent { background: var(--s-surface) !important; border: 1px solid transparent; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(33,35,46,.06), 0 4px 12px rgba(33,35,46,.06) !important; }
.bjob.is-urgent { border: 2px solid #D2382B !important; }
.bjob.is-leftover:not(.is-urgent) { border: 2px solid #E08A1E !important; }
.bjob-top { align-items: center; gap: 10px; }
.bjob-top strong { font: 700 18px var(--s-font); color: var(--s-ink); }
.bjob-cust { font-size: 16px; font-weight: 600; color: var(--s-ink); }
.bjob-top :is(.board-card-asap, .board-card-due) { margin-left: auto; }
.bjob-desc { margin-top: 4px; font-size: 15px; color: var(--s-ink-2); }
.bjob-prog { font-size: 14px; font-weight: 600; color: var(--s-ink); }
.bjob-due { font-size: 14px; color: var(--s-ink-2); }
.bjob-foot .btn { height: 40px; min-height: 0; padding: 0 14px; border-radius: 10px; font-size: 14px; }
html[data-theme="dark"] .batch-col { background: color-mix(in srgb, var(--s-surface) 55%, #000) !important; }
html[data-theme="dark"] :is(.bjob, .bjob.is-leftover, .bjob.is-urgent) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--s-surface) 93%, #fff), color-mix(in srgb, var(--s-surface) 97%, #fff)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -10px rgba(0,0,0,.6) !important; }

/* 43. Home (4 Nov): labels in sentence case like everywhere else; a hidden
   figure is just its four dots, so the gap after it is always the same
   (the real amount used to sit there invisibly, as wide as the number). */
.home-stat-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 600 !important; }
.home-num-row span { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--s-ink-2); }
html:not([data-show-money]) .home-money { position: static; min-width: 0 !important; margin-right: 0 !important; }
html:not([data-show-money]) .home-money > .home-money-v { display: none; }
html:not([data-show-money]) .home-money::after { position: static; transform: none; display: inline; }

/* 44. Settings (4 Nov): the selected menu item is a plain highlight like
   the sidebar's, no blue bar down its left (the "AI look"); the empty logo
   box follows dark mode (a real logo keeps its white, it prints on white);
   on iPad the floating Save button gets a band of the card behind it, so
   the field scrolling under it is hidden instead of cut through. */
.settings-nav-btn.active::before { display: none !important; }
.settings-nav-btn.active { background: var(--s-tint) !important; color: var(--s-accent-2) !important; font-weight: 600; box-shadow: none !important; }
html[data-theme="dark"] .settings-nav-btn.active { background: rgba(255,255,255,.08) !important; color: var(--s-ink) !important; }
html[data-theme="dark"] .settings-logo-preview:not(:has(img)) { background: var(--s-input); border-color: var(--s-line-2); }
html[data-theme="dark"] .settings-logo-preview:not(:has(img)) span { color: var(--s-ink-3); }
@media (min-width: 761px) {
  #settings-content button.st-save { outline: 14px solid var(--s-surface); }
}

/* 45. Prints board (4 Nov, his ask): the frame card's layout. The sheet is
   drawn to its shape (white, a soft shadow) where a frame card draws the
   frame. */
.wk-paper-wrap { display: flex; align-items: center; justify-content: center; height: 120px; }
.wk-paper { width: 100%; height: 100%; padding: 14px; box-sizing: border-box; overflow: visible; filter: drop-shadow(0 1px 1px rgba(40,30,20,.25)) drop-shadow(0 3px 6px rgba(40,30,20,.12)); }
.wk-paper rect { fill: #fff; }
.wk-paper :is(circle, polygon) { fill: #DCE0E6; }
@media (max-width: 699px) { .wk-paper-wrap { height: 160px; } }
html[data-theme="dark"] .wk-paper rect { fill: #F1F2F4; }
html[data-theme="dark"] .wk-paper :is(circle, polygon) { fill: #C9CED7; }
.wk-print .wk-size small { margin-left: 2px; }

/* 46. Job Book job → Frames tab (4 Nov): each frame as on the Production job
   card (drawing, moulding, sizes, wood), its stage underneath, nothing to
   fold away. A frame without a name is "Frame 1", not "Untitled". */
#modal-overlay.is-jd .jd-frame { margin: 0 0 14px; border: 1px solid var(--s-line); border-radius: 14px; background: var(--s-surface); }
#modal-overlay.is-jd .jd-frame .wk-frame-head { font: 700 18px var(--s-font); color: var(--s-ink); }
#modal-overlay.is-jd .jd-frame-price { margin-left: auto; font: 600 17px var(--s-font); font-variant-numeric: tabular-nums; color: var(--s-ink); }
#modal-overlay.is-jd .jd-frame canvas.wk-pic-big { height: 230px; }
#modal-overlay.is-jd .jd-frame-foot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#modal-overlay.is-jd .jd-frame-foot .item-photos:empty { display: none; }
#modal-overlay.is-jd .jd-frame-foot .fr-stage { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--s-line); background: none; }
html[data-theme="dark"] #modal-overlay.is-jd :is(.jd-frame, .jd-frame-foot .fr-stage) { border-color: rgba(255,255,255,.07); }
@media (min-width: 900px) {
  #modal-overlay.is-jd .jd-frame { padding: 16px 18px; }
  #modal-overlay.is-jd .jd-frame > .jd-frame-foot { grid-column: 1 / -1; }
  #modal-overlay.is-jd .jd-frame canvas.wk-pic-big { height: 280px; }
}

#modal-overlay.is-jd .jd-frame .wk-wood { flex-direction: column; align-items: stretch; gap: 8px; }
#modal-overlay.is-jd .jd-frame .wk-wood-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 47. Home boxes (4 Nov, his ask: "just the numbers in the box", more like
   his Slack dashboard examples): white cards; the label with a small blue
   icon, the number, a line saying something about it, and a little chart
   where there's history to draw. Overrides every trial card style. */
html body .home-stats { gap: 12px !important; }
html body .home-stats .home-stat {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label ico" "value value" "sub sub" "viz viz";
  align-content: start; align-items: center; gap: 2px 10px; min-height: 0 !important; height: auto !important;
  padding: 16px 16px 14px !important; border: 0 !important; border-radius: 14px !important; text-align: left;
  background: var(--s-surface) !important; color: var(--s-ink) !important;
  box-shadow: 0 1px 2px rgba(33,35,46,.06), 0 6px 18px rgba(33,35,46,.07) !important; overflow: hidden;
}
html body .home-stats .home-stat::before, html body .home-stats .home-stat::after { display: none !important; }
html body .home-stats .home-stat .home-stat-label { grid-area: label; order: 0 !important; margin: 0 !important; padding: 0 !important; align-self: center;
  font: 600 15px var(--s-font) !important; color: var(--s-ink-2) !important; opacity: 1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .home-stats .home-stat .home-stat-ico { grid-area: ico; position: static !important; width: auto !important; height: auto !important; margin: 0 !important;
  background: none !important; box-shadow: none !important; border: 0 !important; color: #1058FF !important; font-size: 20px; display: flex; }
html body .home-stats .home-stat .home-stat-ico i { font-size: 20px !important; color: inherit !important; }
html body .home-stats .home-stat .home-stat-value { grid-area: value; margin: 6px 0 0 !important; font: 600 40px/1 "Barlow Condensed", "Arial Narrow", sans-serif !important;
  color: var(--s-ink) !important; letter-spacing: 0; text-shadow: none !important; }
html body .home-stats .home-stat .home-stat-sub { grid-area: sub; margin-top: 4px; font-size: 14px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .home-stats .home-stat .home-stat-sub.is-up { color: #1E8A4C; }
html body .home-stats .home-stat .home-stat-sub.is-down, html body .home-stats .home-stat .home-stat-sub.is-warn { color: #B35C00; }
html body .home-stats .home-stat .home-stat-viz { grid-area: viz; display: block; height: 30px; margin-top: 10px; }
html body .home-stats .home-stat.is-warn .home-stat-ico { color: #C2410C !important; }
html:not([data-show-money]) body .home-stats .home-stat .home-money::after { color: var(--s-ink-2) !important; }
.hs-none { display: block; height: 100%; border-bottom: 2px dashed var(--s-line); opacity: .7; }
.hs-spark { display: block; width: 100%; height: 100%; overflow: visible; }
.hs-spark .hs-line { fill: none; stroke: #1058FF; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.hs-spark .hs-area { fill: rgba(16,88,255,.10); stroke: none; }
.hs-stages, .hs-split { display: flex; gap: 3px; height: 10px; margin-top: 12px; border-radius: 6px; overflow: hidden; }
.hs-stages i, .hs-split i { display: block; min-width: 4px; }
.hs-split i:first-child { background: #1058FF; }
.hs-split i:last-child { background: color-mix(in srgb, #1058FF 22%, var(--s-surface)); }
.hs-days { display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.hs-days i { flex: 1; display: block; border-radius: 3px 3px 0 0; background: #1058FF; }
.hs-days i.is-zero { background: var(--s-line); }
html[data-theme="dark"] body .home-stats .home-stat {
  background: linear-gradient(180deg, color-mix(in srgb, var(--s-surface) 93%, #fff), color-mix(in srgb, var(--s-surface) 97%, #fff)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -10px rgba(0,0,0,.6) !important; }
html[data-theme="dark"] body .home-stats .home-stat .home-stat-ico { color: #6E95FF !important; }
html[data-theme="dark"] .hs-spark .hs-line { stroke: #6E95FF; }
html[data-theme="dark"] .hs-spark .hs-area { fill: rgba(110,149,255,.14); }
html[data-theme="dark"] .hs-split i:first-child, html[data-theme="dark"] .hs-days i { background: #6E95FF; }
html[data-theme="dark"] .hs-split i:last-child { background: rgba(110,149,255,.25); }
html[data-theme="dark"] .hs-days i.is-zero { background: rgba(255,255,255,.1); }
@media (max-width: 600px) {
  html body .home-stats .home-stat { padding: 14px 14px 12px !important; }
  html body .home-stats .home-stat .home-stat-value { font-size: 36px !important; }
  html body .home-stats .home-stat .home-stat-label { font-size: 14px !important; }
  html body .home-stats .home-stat .home-stat-sub { font-size: 13px; }
}

/* 48. (4 Nov, his asks from the phone)
   Date filter: Today / Yesterday / This week / This month on one line. */
.fb-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--ff-box-edge); border-radius: 12px; overflow: hidden; background: var(--s-input); }
.fb-presets button { height: 46px; padding: 0 4px; border: 0; border-left: 1px solid var(--s-line); background: none; color: var(--s-ink); font: 600 15px var(--s-font); white-space: nowrap; cursor: pointer; }
.fb-presets button:first-child { border-left: 0; }
.fb-presets button:active { background: var(--s-sunk); }
@media (max-width: 420px) { .fb-presets button { font-size: 14px; } }
@media (max-width: 360px) { .fb-presets button { font-size: 13px; } }
/* Help boxes and the "Editing a quote/job" banner: no blue bar down the left
   (the AI look); a lighter grey box with a blue border all round instead. */
.help-text, .convert-banner { background: #F1F3F6 !important; border: 2px solid #1058FF !important; border-radius: 12px !important; box-shadow: none !important; color: var(--s-ink) !important; }
html[data-theme="dark"] :is(.help-text, .convert-banner) { background: color-mix(in srgb, var(--s-surface) 88%, #fff) !important; border-color: #5C8DFF !important; }
.help-text::before, .convert-banner::before { display: none !important; }
.convert-banner { align-items: flex-start !important; padding: 12px 14px !important; font-size: 15px !important; line-height: 1.45 !important; }
.convert-banner > span { flex: 1; min-width: 0; }
.convert-banner i { color: #1058FF !important; margin-top: 1px; }
html[data-theme="dark"] .convert-banner i { color: #5C8DFF !important; }
/* New Job: Trade customer in a box like ASAP's (blue when ticked). */
label.nj-check.nj-trade { height: 62px; margin: 0 0 12px; padding: 0 16px; border: 1.5px solid var(--ff-box-edge); border-radius: 12px; background: var(--s-input); }
label.nj-check.nj-trade:has(input:checked) { border-color: #1058FF; color: #1058FF; background: #E8EFFF; }
html[data-theme="dark"] label.nj-check.nj-trade:has(input:checked) { background: #1E2A4A; color: #8FB0FF; border-color: #5C8DFF; }

/* 49. Settings on the phone (4 Nov, his asks).
   Save: docked just above the bottom bar with a band of the page behind it,
   not floating half way up over the fields. iPad portrait with the bottom
   bar: above that bar instead of behind it. */
@media (max-width: 600px) {
  /* the page scrolls inside #page-body, whose 120px bottom padding already
     clears the bar; -24px puts the button 10px above the bar */
  #settings-content button.st-save { bottom: -24px !important; }
}
@media (min-width: 601px) and (max-width: 1366px) and (orientation: portrait) {
  html[data-tabbar-tablet] #settings-content button.st-save { bottom: -24px !important; }
}
/* Each setting and its explanation read as one group: the explanation sits
   tight under its box in smaller text, then a thin blue line before the
   next setting. */
#settings-content label.ff-fl, #settings-content label:has(> .rounding-fields) {
  margin: 0 0 16px !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(16,88,255,.22); }
html[data-theme="dark"] #settings-content :is(label.ff-fl, label:has(> .rounding-fields)) { border-bottom-color: rgba(110,149,255,.28); }
#settings-content label:is(.ff-fl, :has(> .rounding-fields)):last-child,
#settings-content label:is(.ff-fl, :has(> .rounding-fields)):has(+ button.st-save) { border-bottom: 0; padding-bottom: 0 !important; }
#settings-content label.ff-fl > .settings-help, #settings-content label:has(> .rounding-fields) > .settings-help {
  display: block; margin: 8px 4px 0 !important; font-size: 14px !important; line-height: 1.45; color: var(--s-ink-2) !important; text-transform: none; letter-spacing: 0; font-weight: 400; }
#settings-content label:has(> .rounding-fields) { display: block !important; font: 600 14px var(--s-font); color: var(--s-ink-2); }
#settings-content label:has(> .rounding-fields) .help-tip { display: inline-flex; vertical-align: middle; margin-left: 6px; }
#settings-content label:has(> .rounding-fields) .rounding-fields { margin-top: 8px; }

/* 50. Production job card (4 Nov, his asks): ASAP and Late side by side on a
   line of their own; the moulding row is words, not a button. */
.wk-warns { display: inline-flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.wk-warns:empty { display: none; }
@media (max-width: 899px) { .wk-chips .wk-warns { flex: 1 1 100%; } }
.wk-mould { cursor: default; }
/* Switches (Dark mode, VAT and the rest) on = the same blue as the Save button. */
.vat-switch input:checked + .vat-switch-track { background: #1058FF !important; border-color: #1058FF !important; }

/* 51. (4 Nov, his asks) Tick boxes drawn by FrameFlow, so they're the Save
   button's blue on the iPhone too (iOS lightens its own in dark mode):
   Materials, and New Job's Trade customer. */
.toorder :is(.order-sup-check, .mat-tick) input, label.nj-check.nj-trade input {
  -webkit-appearance: none; appearance: none; flex: none; width: 24px !important; height: 24px !important; margin: 0; border-radius: 7px;
  border: 2px solid var(--s-line-2, #C9CDD6); background: var(--s-surface) center / 16px no-repeat; cursor: pointer; }
.toorder :is(.order-sup-check, .mat-tick) input:checked, label.nj-check.nj-trade input:checked {
  border-color: #1058FF; background-color: #1058FF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.toorder :is(.order-sup-check, .mat-tick) input:focus-visible, label.nj-check.nj-trade input:focus-visible { outline: 3px solid rgba(16,88,255,.35); outline-offset: 2px; }
html[data-theme="dark"] :is(.toorder .order-sup-check, .toorder .mat-tick, label.nj-check.nj-trade) input:not(:checked) { border-color: rgba(255,255,255,.28); background-color: transparent; }
/* Settings: "Calculate hourly rate" belongs with the hourly rate above it,
   so the line goes under the link, not between them. */
#settings-content label.ff-fl:has(+ .rate-calc-toggle) { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 8px !important; }
#settings-content .rate-calc-toggle { margin: 0 0 16px; padding: 0 4px 16px; border-bottom: 1px solid rgba(16,88,255,.22); }
html[data-theme="dark"] #settings-content .rate-calc-toggle { border-bottom-color: rgba(110,149,255,.28); }
/* The round Help button moves up out of the docked Save button's way. */
@media (max-width: 600px) {
  body:has(#settings-content .st-save) #help-btn { bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* 52. New Job (4 Nov, his asks from the phone).
   ASAP's tick box drawn the same way as Trade customer's (red when ticked),
   so the two boxes match. */
label.nj-asap input {
  -webkit-appearance: none; appearance: none; flex: none; width: 24px !important; height: 24px !important; margin: 0; border-radius: 7px;
  border: 2px solid var(--s-line-2, #C9CDD6); background: var(--s-surface) center / 16px no-repeat; cursor: pointer; }
label.nj-asap input:checked { border-color: #C2261B; background-color: #C2261B;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
html[data-theme="dark"] label.nj-asap input:not(:checked) { border-color: rgba(255,255,255,.28); background-color: transparent; }
label.nj-asap input:focus-visible { outline: 3px solid rgba(194,38,27,.35); outline-offset: 2px; }
/* the lines between sections: thin blue, like Settings */
.form-section-label { border-top-color: rgba(16,88,255,.22) !important; }
html[data-theme="dark"] .form-section-label { border-top-color: rgba(110,149,255,.28) !important; }
/* New frame: Add photo is a box like "Add a mount" */
.ff-studio .st-photos .photo-upload-btn { width: 100% !important; height: 60px; min-height: 0; padding: 0 16px !important; justify-content: flex-start;
  border: 1.5px solid var(--st-box-edge) !important; border-radius: 12px !important; font-size: 16px !important; }

/* 53. New frame → Labour, extras & notes (4 Nov, his asks): Add item is a
   box like "Add a mount"; the notes text sits properly inside its box; the
   £ on Special price sits clear of the number. */
.ff-studio .st-more-body .st-add { width: 100%; height: 60px; min-height: 0; padding: 0 16px; justify-content: flex-start; gap: 8px;
  border: 1.5px solid var(--st-box-edge); border-radius: 12px; font-size: 16px; }
#frame-form-active.ff-studio .st-more-body textarea#fi-notes { padding: 14px 16px !important; line-height: 1.45 !important; min-height: 96px !important; }
#frame-form-active.ff-studio .price-override-input-wrap input { padding-left: 38px !important; }
#frame-form-active.ff-studio .price-override-input-wrap .currency-prefix { left: 16px; font-size: 17px; pointer-events: none; }

/* 54. The moulding row on the job card (4 Nov, his asks): an outline like the
   tiles under it, not blue; a little picture of the moulding instead of the
   cube (a hub photo when one's been added, else a corner drawn from the
   length photo). */
.wk-mould { border: 1px solid var(--s-line) !important; border-radius: 12px; }
html[data-theme="dark"] .wk-mould { border-color: rgba(255,255,255,.1) !important; }
.wk-mould-pic { flex: none; display: block; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.wk-mould > i:first-child { color: var(--s-ink-2) !important; }
/* New Job: the trade customer search is a box like the others */
label.ff-fl.nj-trade-name .trade-ac-wrap > #trade-name {
  display: block; width: 100%; height: 62px; min-height: 62px; margin: 0 !important; padding: 24px 16px 8px !important;
  background: var(--s-input) !important; color: var(--s-ink) !important;
  border: 1.5px solid var(--ff-box-edge) !important; border-radius: 12px !important; box-shadow: none !important; font: 400 17px/1.2 var(--s-font) !important; }
label.ff-fl.nj-trade-name .trade-ac-wrap > #trade-name:focus { outline: none; border: 2px solid #1058FF !important; }

/* 55. Help on phones (4 Nov, his ask): a "?" at the right of the top bar, not
   a round button floating over the page. */
.help-top-btn { display: none; }
@media (max-width: 600px) {
  #help-btn { display: none !important; }
  .sidebar-header { position: relative; }
  .help-top-btn { display: flex; position: absolute; top: 0; bottom: 0; right: 4px; margin: auto 0; width: 44px; height: 40px; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 10px; background: none; color: var(--s-ink-2); font-size: 24px; pointer-events: auto; cursor: pointer; }
  .help-top-btn:active { background: var(--s-sunk); }
}

/* 56. Job Book (4 Nov, his ask, as on the live system): a job that hasn't been
   paid has its whole row tinted orange, on the iPad table and the phone list.
   A soft tint only, no stripe down the side. */
#jobs-table tbody tr.job-owing td { background: #FFF1E2 !important; }
#jobs-table tbody tr.job-owing.job-row:hover td { background: #FCE6CF !important; }
.jb-row.is-owing { background: #FFF1E2; }
.jb-row.is-owing:active { background: #FCE6CF; }
html[data-theme="dark"] #jobs-table tbody tr.job-owing td, html[data-theme="dark"] .jb-row.is-owing { background: rgba(255,153,51,.10) !important; }
html[data-theme="dark"] #jobs-table tbody tr.job-owing.job-row:hover td { background: rgba(255,153,51,.16) !important; }
#jobs-table tbody tr.job-owing td, .jb-row.is-owing { border-bottom-color: rgba(179,92,0,.14); }

/* 57. New Job (4 Nov, his ask): the Frames / Prints / Extras panel without a
   box round it, like the customer side beside it. */
html[data-theme] body .newjob-right .card.nj-items-card, html body .newjob-right .card.nj-items-card { background: none !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* 58. Sign in, and the other front-door screens (4 Nov, his ask "fix the sign
   in page"): the redesign's look. Still always dark (customers see these
   screens too), but in the app's own dark colours: a lifted card, boxed
   fields with the label inside like New Job, one solid blue button. */
#auth-screen, #staff-screen {
  --bg: #1C1E28; --surface: #292C39; --surface-raised: #2F3241; --surface-high: #353948;
  --border: rgba(255,255,255,.10); --border-bright: rgba(255,255,255,.16);
  --text: #F2F3F6; --text-secondary: #AEB3C1; --text-muted: #8A90A0;
  --teal: #1058FF; --teal-dim: #6E95FF; --teal-subtle: rgba(16,88,255,.18);
  background: linear-gradient(180deg, #262937 0, #21232E 320px, #1C1E28 100%) !important;
}
:is(#auth-screen, #staff-screen) .auth-card {
  max-width: 400px; padding: 32px 28px 28px; border: 1px solid rgba(255,255,255,.06); border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, #292C39 93%, #fff), #292C39);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.35), 0 24px 60px -20px rgba(0,0,0,.7);
}
:is(#auth-screen, #staff-screen) .auth-card.wiz-card { max-width: 460px; }
:is(#auth-screen, #staff-screen) .auth-logo { margin-bottom: 18px; }
:is(#auth-screen, #staff-screen) .auth-logo stop { stop-color: #1058FF; }
:is(#auth-screen, #staff-screen) .auth-wordmark { font-size: 26px; color: #fff; }
:is(#auth-screen, #staff-screen) .auth-wordmark .accent { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #3D7BFF; }
:is(#auth-screen, #staff-screen) .auth-title { font: 700 26px var(--s-font, inherit); letter-spacing: -.01em; color: #fff; margin: 0 0 6px; }
:is(#auth-screen, #staff-screen) .auth-sub { font-size: 16px; color: var(--text-secondary); margin: 0 0 24px; }
/* fields: label inside the box */
:is(#auth-screen, #staff-screen) .auth-field { position: relative; margin: 0 0 12px; }
:is(#auth-screen, #staff-screen) .auth-field > label { position: absolute; z-index: 1; left: 16px; right: 16px; top: 11px; margin: 0; pointer-events: none;
  font: 700 12px/1.2 var(--s-font, inherit); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#auth-screen, #staff-screen) .auth-field > label .auth-opt { font-weight: 500; color: var(--text-muted); }
:is(#auth-screen, #staff-screen) .auth-input, :is(#auth-screen, #staff-screen) .auth-field > :is(input, select) {
  display: block; width: 100%; height: 62px; padding: 24px 16px 8px; margin: 0;
  border: 1.5px solid rgba(255,255,255,.16); border-radius: 12px; background: #21232E; color: #F2F3F6;
  font: 400 17px/1.2 var(--s-font, inherit); box-shadow: none; }
:is(#auth-screen, #staff-screen) .auth-input::placeholder { color: #6F7586; }
:is(#auth-screen, #staff-screen) .auth-input:focus, :is(#auth-screen, #staff-screen) .auth-field > :is(input, select):focus { outline: none; border: 2px solid #1058FF; box-shadow: none; }
/* buttons */
:is(#auth-screen, #staff-screen) .auth-btn { height: 54px; padding: 0 16px; border-radius: 12px; font: 600 17px var(--s-font, inherit);
  border: 1.5px solid rgba(255,255,255,.16); background: #2F3241; color: #F2F3F6; }
:is(#auth-screen, #staff-screen) .auth-btn-primary { margin-top: 6px; border: 0; background: #1058FF; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(16,88,255,.35); }
:is(#auth-screen, #staff-screen) .auth-btn-primary:hover { background: #2367FF; filter: none; }
:is(#auth-screen, #staff-screen) .auth-link { color: #6E95FF; font-size: 16px; }
:is(#auth-screen, #staff-screen) .auth-switch { font-size: 16px; color: var(--text-secondary); margin-top: 18px; }
:is(#auth-screen, #staff-screen) .auth-back { color: var(--text-muted); }
:is(#auth-screen, #staff-screen) .auth-install { height: 52px; padding: 0 16px; margin-top: 18px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.16); background: none; font-size: 16px; color: #F2F3F6; }
:is(#auth-screen, #staff-screen) .auth-install i { color: #6E95FF; }
:is(#auth-screen, #staff-screen) .auth-error { border-radius: 10px; font-size: 15px; }
/* the Framer / Customer choice */
:is(#auth-screen, #staff-screen) .auth-choice { border-radius: 14px; border: 1.5px solid rgba(255,255,255,.14); background: #2F3241; }
:is(#auth-screen, #staff-screen) .auth-choice:hover { border-color: #1058FF; background: rgba(16,88,255,.12); }
:is(#auth-screen, #staff-screen) .auth-choice i { color: #6E95FF; }
@media (max-width: 480px) { :is(#auth-screen, #staff-screen) .auth-card { padding: 28px 20px 24px; } }
/* the staff PIN pad, in the same look */
#staff-screen .auth-choice-t { color: #F2F3F6; }
#staff-screen .pin-dot { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.32); background: none; }
#staff-screen .pin-dot.is-filled { background: #1058FF; border-color: #1058FF; }
#staff-screen .pin-keypad { gap: 10px; margin-bottom: 14px; }
#staff-screen .pin-key { height: 62px; min-height: 0; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.12); background: #2F3241; color: #F2F3F6; font: 600 24px var(--s-font, inherit); box-shadow: none; }
#staff-screen .pin-key:hover { border-color: #1058FF; background: rgba(16,88,255,.14); }
#staff-screen .pin-key-ghost { visibility: hidden; }
#staff-screen .pin-key-back { color: #AEB3C1; font-size: 22px; }
:is(#auth-screen, #staff-screen) .auth-field:not(:has(> label)) > .auth-input { padding: 0 16px; }
:is(#auth-screen, #staff-screen) .auth-btn + .auth-link, :is(#auth-screen, #staff-screen) form + .auth-link { display: inline-block; margin-top: 16px; }

/* 59. Home bars: the date under each bar stays on one line (4 Nov). */
.home-bar span { white-space: nowrap; }

/* 60. Job card tiles: each mount on its own line (5 Nov). */
.wk-tile b .wk-line { display: block; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; margin: 0; }

/* 61. Job's stage row (5 Nov): "Change" is the same box as the next-stage
   button beside it (white, grey edge), and the stages it opens are boxes
   too, not pills. */
.fr-stage .btn.fr-change { justify-content: center; font-weight: 600; }
.fr-jump .jd-stage-chip { border-radius: 10px; }

/* 62. Job card footer (5 Nov, his ask): Delete is a box like Edit job, in
   red. And the wood buttons: in a narrow column the icon sits above the word
   so "Not ordered" fits its box. */
#modal-overlay.is-jd .job-detail-actions .btn-danger,
#modal-overlay.is-jd .job-detail-actions .btn-danger:is(:hover, :focus-visible) {
  background: #DC2626; border: 0; color: #fff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 12px -4px rgba(220,38,38,.45);
}
#modal-overlay.is-jd .job-detail-actions .btn-danger:hover { background: #C81E1E; }
.wk-wood-opt { font-size: 14px; font-weight: 600; line-height: 1.1; }
.wk-wood-opts { container-type: inline-size; }
@container (max-width: 400px) {
  .wk-wood-opt { flex-direction: column; height: 58px; gap: 4px; padding: 0 4px; font-size: 13px; }
  .wk-wood-opt i { font-size: 19px; }
}

/* 63. The stage badge beside Change and the next-stage button: the same
   corners as them, not a pill (5 Nov, his ask). */
.fr-stage .fr-stage-pills .badge { border-radius: var(--btn-radius, 8px); padding: 6px 12px 6px 10px; }

/* 64. Home: the jobs behind a box's number (5 Nov). */
#modal-body .hs-count { margin: 0 0 12px; font-size: 15px; color: var(--s-ink-2); }
#modal-body .hs-list { display: flex; flex-direction: column; border: 1px solid var(--s-line); border-radius: 12px; overflow: hidden; }
#modal-body .hs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px;
  border: 0; border-top: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-ink); text-align: left; font: inherit; cursor: pointer; }
#modal-body .hs-row:first-child { border-top: 0; }
#modal-body .hs-row:hover { background: var(--s-sunk); }
#modal-body .hs-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#modal-body .hs-row-text b { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
#modal-body .hs-row-text small { font-size: 14px; color: var(--s-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modal-body .hs-row-val { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#modal-body .hs-row-val.is-late { color: #C0392B; }
#modal-body .hs-row > .ph-caret-right { color: var(--s-ink-3, #9AA0A6); }
#modal-body .hs-all { width: 100%; margin-top: 12px; height: 48px; }
#modal-body .hs-none-here { padding: 28px 8px; text-align: center; color: var(--s-ink-2); }
#modal-footer .hs-change { width: 100%; height: 48px; justify-content: center; }
html[data-theme="dark"] #modal-body .hs-row-val.is-late { color: #FF8A7A; }

/* 65. Status badges and filter chips, all through the app: the same corners
   as the buttons, not pills (5 Nov, his ask). Switches, round icon buttons
   and progress bars keep their round shape. */
:is(.badge, .item-badge-warning, .board-card-asap, .board-card-due, .board-stage-chip, .qty-badge,
    .track-status, .jd-stage-chip, .jb-chip, .quick-filter, .qf-saved, .filter-add, .nav-phase-badge) { border-radius: var(--btn-radius, 8px) !important; }
:is(.jb-chip, .qf-saved) > span, .qf-saved .qf-count { border-radius: 6px !important; }

/* 66. Takings: the bars split into categories, with a key underneath
   (11 Nov, his ask: dot, category, amount, for the dates picked). */
.takings-key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 12px 0 18px; }
.takings-key-item { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--s-ink); }
.takings-key-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.takings-key-sum { font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-bar { cursor: default; }
.chart-bar:hover { opacity: 0.85; }
.chart-tip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }