/* ================================================================================
   THE g2 CLIENT LOOK (James, 31 Oct 2026). Locked round 12 "g2", built as a prototype in
   /proto/ and approved round by round ("I'm really liking this design. I think we keep it.").

   SCOPE: everything here hangs off #app.g2, which app.js puts on every CLIENT screen (a
   view-as look included) and never on the admin's own console. Loaded after styles.css, so it
   wins ties. It works mostly by REDEFINING the tokens every screen already paints from (the
   same trick Workshop light used), then dressing the few components that carry the look:
   riveted steel plates, the dark-red lead panel, gold, the official wordmark.

   DARK is the default (the locked design); LIGHT is Settings > Look ("traders can switch
   between dark and light modes"), set on <html data-ts-theme> by app.js before first paint.
   Plates go brushed aluminium, gold deepens to bronze so it still reads; the red panels stay
   dark red in both, because that is the brand.

   CSP: no inline styles anywhere. The rivet and the grain are self-hosted / data: images
   (img-src 'self' data:). The one confined green is for paid/active only.
   ================================================================================ */

#app.g2 {
  --g2-font: 'Archivo', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --wl-display: var(--g2-font);
  --wl-sans: var(--g2-font);
  --wl-mono: var(--g2-font);
  --ui: var(--g2-font);
  --g2-gold: #d9ae73;
  --g2-gold-2: #e8c48f;
  --g2-gold-dim: #a9824f;
  --g2-red: #8b0000;
  --g2-red-ui: #b22222;
  --g2-steel-1: #2c2a2c;
  --g2-steel-2: #1c1b1d;
  --g2-oxide-1: #42191c;
  --g2-oxide-2: #2a1214;
  --g2-edge: rgba(139, 0, 0, 0.6);
  --g2-on-red: #e8c48f;
  --g2-text: #f2f2f2;
  --g2-strong: #ffffff;
  --g2-muted: #a6a6a6;
  --g2-well: #0d0d0d;
  --g2-field: #121212;
  --g2-field-line: #2c2c2c;
  --g2-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
  --g2-rivet: url('/brand/rivet.svg');
  --g2-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
  /* the tokens every existing screen paints from */
  --bg: #000;
  --surface: #000;
  --surface-2: #141414;
  --card: #1f1e20;
  --plane: #1f1e20;
  --brand: #000;
  --brand-2: #121212;
  --ink: #f2f2f2;
  --ink-2: #cfcfcf;
  --ink-3: #a6a6a6;
  --line: #2c2c2c;
  --line-2: rgba(255, 255, 255, 0.07);
  --hair: #2c2c2c;
  --accent: #b22222;
  --accent-tint: #2a1214;
  --accent-on-dark: #b22222;
  --needs: #e06666;
  --needs-tint: #2a1214;
  --urgent: #e06666;
  --waiting: #e8c48f;
  --waiting-tint: #241c12;
  --handled: #d9ae73;
  --handled-tint: #1f1a12;
  --quiet: #8f8f8f;
  --quiet-tint: #1a1a1a;
  --new: #f2f2f2;
  --won: #d9ae73;
  --settled: #d9ae73;
  --radius: 14px;
  --radius-sm: 10px;
  font-family: var(--g2-font);
  color: var(--ink);
  color-scheme: dark;
}
html:has(> body > #app.g2), body:has(> #app.g2) { background-color: #000; background-image: none; }

/* ---------- LIGHT (Settings > Look) ---------- */
html[data-ts-theme="light"] #app.g2 {
  --g2-gold: #8a5a22;
  --g2-gold-2: #7a4f1d;
  --g2-gold-dim: #9b8063;
  --g2-steel-1: #fdfcfa;
  --g2-steel-2: #e4e0d9;
  --g2-edge: rgba(139, 0, 0, 0.32);
  --g2-text: #1d1b1a;
  --g2-strong: #141414;
  --g2-muted: #5e5a55;
  --g2-well: #e2ded7;
  --g2-field: #ffffff;
  --g2-field-line: #d2cdc4;
  --g2-shadow: 0 6px 16px rgba(60, 40, 20, 0.12);
  --bg: #efece7;
  --surface: #efece7;
  --surface-2: #e2ded7;
  --card: #f6f4f0;
  --plane: #f6f4f0;
  --brand: #efece7;
  --ink: #1d1b1a;
  --ink-2: #34312e;
  --ink-3: #5e5a55;
  --line: #d2cdc4;
  --line-2: rgba(0, 0, 0, 0.07);
  --hair: #d2cdc4;
  --accent: #8b0000;
  --accent-tint: #fbf3f0;
  --needs: #8b0000;
  --urgent: #8b0000;
  --waiting: #8a5a00;
  --handled: #7a4f1d;
  --quiet: #7a756e;
  --new: #1d1b1a;
  --won: #7a4f1d;
  --settled: #7a4f1d;
  color-scheme: light;
}
html[data-ts-theme="light"]:has(> body > #app.g2),
html[data-ts-theme="light"] body:has(> #app.g2) { background-color: #efece7; }

/* ---------- the header: the wordmark, centred, on every client screen ---------- */
#app.g2 > .topbar,
#app.g2.ts-bare > .topbar {
  display: flex; justify-content: center; align-items: center;
  background: transparent; color: var(--ink);
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 18px 4px;
}
#app.g2 .topbar .cobrand { display: none; }
#app.g2 .g2-word { display: block; width: 46%; max-width: 190px; height: auto; }
html[data-ts-theme="light"] #app.g2 .g2-word {
  filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
@media (min-width: 900px) {
  #app.g2 > .topbar, #app.g2.ts-bare > .topbar { position: fixed; top: 0; left: 0; right: 0; height: 64px; padding: 0 20px; z-index: 60; background: var(--bg); }
  #app.g2.has-nav, #app.g2.has-nav.ts-bare { padding-top: 64px; }
  #app.g2 .g2-word { width: 170px; }
}

/* ---------- page furniture: tighter sides, Archivo titles ---------- */
#app.g2 main { padding: 4px 16px calc(84px + env(safe-area-inset-bottom, 0px)); max-width: 460px; }
@media (min-width: 900px) { #app.g2 main { max-width: 720px; } }
#app.g2 .ts-section { padding: 0 2px; margin-top: 22px; }
#app.g2 .ts-pills { padding: 2px 2px 0; }
#app.g2 .ts-topbar { padding-left: 2px; padding-right: 2px; }
#app.g2 .ts-topbar h1 { font: 400 30px/1.1 var(--g2-font); letter-spacing: -0.01em; color: var(--ink-2); margin-top: 8px; }
#app.g2 .ts-topbar .ts-date { font: 500 14.5px/1.3 var(--g2-font); letter-spacing: 0; text-transform: none; color: var(--g2-gold); order: 2; }
#app.g2 .ts-topbar > div:first-child { display: flex; flex-direction: column; }
#app.g2 .ts-topbar > .ts-who { display: none; }
#app.g2 .ts-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
#app.g2 .ts-section-head h2 { font: 600 12.5px/1.3 var(--g2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--g2-gold); }
#app.g2 .ts-section-head .mt, #app.g2 .ts-section-head.mt { margin-top: 22px; }
#app.g2 .g2-hint, #app.g2 .g2-count { font-size: 12px; color: var(--g2-muted); text-transform: none; letter-spacing: 0; }
#app.g2 .ts-backbar button { color: var(--g2-gold-2); font-weight: 600; }
#app.g2 .ts-note, #app.g2 .ts-prose { color: var(--ink-3); }

/* ---------- THE RIVETED PLATE: planes, cards, the hero ---------- */
#app.g2 .ts-plane,
#app.g2 .g2-plate {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--g2-edge);
  background:
    var(--g2-grain),
    linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, var(--g2-steel-1), var(--g2-steel-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.6), var(--g2-shadow);
  overflow: hidden;
}
html[data-ts-theme="light"] #app.g2 .ts-plane,
html[data-ts-theme="light"] #app.g2 .g2-plate {
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.06), var(--g2-shadow);
}
#app.g2 .ts-plane::after,
#app.g2 .g2-plate::after,
#app.g2 .g2-hero-half::after,
#app.g2 .g2-stat::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    var(--g2-rivet) left 9px top 9px / 10px no-repeat,
    var(--g2-rivet) right 9px top 9px / 10px no-repeat,
    var(--g2-rivet) left 9px bottom 9px / 10px no-repeat,
    var(--g2-rivet) right 9px bottom 9px / 10px no-repeat;
}
#app.g2 .ts-plane { padding: 6px 0; }
#app.g2 .ts-plane > * + * { border-top: 1px solid var(--line-2); }
#app.g2 .ts-plane .ts-nav, #app.g2 .ts-plane .ts-kv, #app.g2 .ts-plane .ts-field, #app.g2 .ts-plane .ts-todo { padding-left: 22px; padding-right: 22px; }
/* the leads list is a stack of cards, not one plate */
#app.g2 .ts-plane.g2-list { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; display: grid; gap: 12px; }
#app.g2 .ts-plane.g2-list::after { display: none; }
#app.g2 .ts-plane.g2-list > * + * { border-top: 0; }

/* rows inside a plate */
#app.g2 .ts-nav .ts-nt { font-size: 16.5px; font-weight: 650; color: var(--g2-strong); }
#app.g2 .ts-nav .ts-ns { font-size: 14px; color: var(--g2-muted); }
#app.g2 .ts-nav .ts-ns.is-gold { color: var(--g2-gold); }
#app.g2 .ts-nav > .ts-chev { color: var(--g2-gold-2); }
#app.g2 .g2-row { grid-template-columns: 30px 1fr auto; min-height: 62px; }
#app.g2 .g2-row.is-static { cursor: default; }
#app.g2 .g2-row-ic { width: 24px; height: 24px; color: var(--g2-gold); justify-self: center; }
#app.g2 .g2-row-ic svg, #app.g2 .g2-jt-ic svg, #app.g2 .g2-call-ic svg { width: 100%; height: 100%; display: block; }
#app.g2 .g2-chev-down svg { transform: rotate(90deg); transition: transform .2s ease; }
#app.g2 [aria-expanded="true"] > .g2-chev-down svg { transform: rotate(-90deg); }
#app.g2 .ts-kv .ts-k { color: var(--ink-2); }
#app.g2 .ts-kv .ts-v { color: var(--g2-text); }
#app.g2 .ts-field .ts-flabel, #app.g2 .ts-flabel { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--g2-gold); font-weight: 600; }
#app.g2 .ts-fval { color: var(--g2-text); }
#app.g2 .ts-fval.muted, #app.g2 .muted { color: var(--g2-muted); }

/* ---------- pills (filters, Leads | All calls, Look): one dark well, red when chosen ---------- */
#app.g2 .ts-pills.ts-wrap,
#app.g2 .ts-pills {
  margin-top: 16px; padding: 4px; gap: 4px; border-radius: 12px; flex-wrap: nowrap;
  background: var(--g2-well); border: 1px solid var(--g2-field-line);
}
#app.g2 .ts-pill {
  flex: 1 1 auto; justify-content: center; height: 40px; padding: 0 8px; border: 0; border-radius: 9px;
  background: none; color: var(--g2-muted); font-weight: 600; font-size: 14px;
}
#app.g2 .ts-pill .ts-sq { display: none; }
#app.g2 .ts-pill .ts-n { font-size: 12px; font-weight: 500; color: var(--g2-muted); }
#app.g2 .ts-pill[aria-selected="true"],
#app.g2 .ts-pill[aria-checked="true"] {
  color: #fff; background: linear-gradient(180deg, #9e0c0d, #760000); box-shadow: inset 0 0 0 1px rgba(217, 174, 115, 0.7);
}
#app.g2 .ts-pill[aria-selected="true"] .ts-n { color: #f1d79f; }
#app.g2 .ts-pill svg { width: 18px; height: 18px; }
#app.g2 .g2-sides .ts-pill { height: 44px; font-size: 16px; }
#app.g2 .g2-sides + .ts-pills { margin-top: 10px; }

/* ---------- buttons and fields ---------- */
#app.g2 .ts-btn, #app.g2 .btn {
  border-radius: 12px; font-family: var(--g2-font); font-weight: 700; min-height: 46px;
}
#app.g2 .ts-btn.primary, #app.g2 .btn:not(.secondary):not(.small) {
  color: #fff; border: 1.5px solid rgba(217, 174, 115, 0.75);
  background: linear-gradient(180deg, #9e0c0d, #760000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
#app.g2 .ts-btn.quiet, #app.g2 .btn.secondary, #app.g2 .btn.small {
  color: var(--g2-gold-2); border: 1.5px solid rgba(217, 174, 115, 0.6); background: var(--g2-field);
}
html[data-ts-theme="light"] #app.g2 .ts-btn.quiet, html[data-ts-theme="light"] #app.g2 .btn.secondary,
html[data-ts-theme="light"] #app.g2 .btn.small { border-color: rgba(138, 90, 34, 0.5); }
#app.g2 .ts-btn.danger { color: #e06666; background: none; border: 0; }
html[data-ts-theme="light"] #app.g2 .ts-btn.danger { color: #b22222; }
#app.g2 .ts-input, #app.g2 .search, #app.g2 .ts-search, #app.g2 input[type="search"],
#app.g2 select.ts-input, #app.g2 textarea.ts-input,
#app.g2 .wiz-card input, #app.g2 .wiz-card textarea, #app.g2 .wiz-card select {
  background: var(--g2-field); border: 1px solid var(--g2-field-line); color: var(--g2-text);
  border-radius: 12px; font-family: var(--g2-font);
}
#app.g2 .ts-search { margin-top: 14px; height: 46px; padding: 0 14px; font-size: 16px; width: 100%; }
#app.g2 .ts-input:focus, #app.g2 .ts-search:focus { outline: 0; border-color: rgba(217, 174, 115, 0.7); }

/* ---------- the tab bar ---------- */
#app.g2 .bottomnav {
  background: rgba(8, 8, 8, 0.94); border-top: 1px solid #262626;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#app.g2 .bottomnav button, #app.g2 .nav-more { color: var(--g2-gold-dim); font-size: 12px; }
#app.g2 .bottomnav button.active, #app.g2 .nav-more.active { color: var(--g2-gold-2); font-weight: 600; }
#app.g2 .bottomnav button[data-tab].active::after { display: none; }
#app.g2 .bottomnav .ic svg { width: 26px; height: 26px; }
html[data-ts-theme="light"] #app.g2 .bottomnav { background: rgba(250, 248, 245, 0.95); border-top-color: #d8d3cb; }
@media (min-width: 900px) {
  #app.g2 .bottomnav { background: var(--g2-well); border-right: 1px solid var(--g2-field-line); top: 64px; }
  #app.g2 .bottomnav button.active { background: var(--card); }
}
#app.g2 .nav-sheet-card { background: var(--card); border: 1px solid var(--g2-edge); }
#app.g2 .nav-sheet-card button { color: var(--g2-gold-2); }

/* ---------- HOME: "Hey Sam", the hero, the lead cards ---------- */
#app.g2 .g2-hello h1 { margin: 12px 0 0; font: 400 32px/1.1 var(--g2-font); letter-spacing: -0.01em; color: var(--ink-2); }
#app.g2 .g2-biz { margin: 4px 0 0; font-size: 16px; color: var(--g2-gold); }
#app.g2 .g2-caps { text-transform: uppercase; letter-spacing: 0.06em; color: var(--g2-gold); font-size: 12.5px; font-weight: 600; }
#app.g2 .g2-note { margin: 12px 0 0; color: var(--g2-muted); font-size: 14px; }
#app.g2 .g2-hero {
  margin-top: 18px; display: grid; grid-template-columns: 1fr 3px 1fr; min-height: 156px; background: #111; padding: 0;
}
#app.g2 .g2-hero::after { display: none; }
#app.g2 .g2-hero-half { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px; }
#app.g2 .g2-hero-leads, #app.g2 .g2-stat-l {
  background: var(--g2-grain), linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, var(--g2-steel-1), var(--g2-steel-2));
}
#app.g2 .g2-hero-mins, #app.g2 .g2-stat-r {
  --g2-gold: #d9ae73; --g2-gold-2: #e8c48f;
  background: var(--g2-grain), linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, var(--g2-oxide-1), var(--g2-oxide-2));
}
#app.g2 .g2-hero-seam { background: linear-gradient(90deg, #070707 0 50%, rgba(255, 255, 255, 0.1) 50% 100%); }
html[data-ts-theme="light"] #app.g2 .g2-hero, html[data-ts-theme="light"] #app.g2 .g2-stats { background: #cfc9c0; }
html[data-ts-theme="light"] #app.g2 .g2-hero-seam { background: linear-gradient(90deg, #b9b2a8 0 50%, rgba(255, 255, 255, 0.7) 50% 100%); }
#app.g2 .g2-big { font-size: 80px; font-weight: 800; line-height: 0.95; margin: 6px 0 4px; color: var(--g2-strong); font-variant-numeric: tabular-nums; }
#app.g2 .g2-hot { font-size: 18px; font-weight: 500; color: var(--g2-red-ui); }
#app.g2 .g2-dial { position: relative; width: 126px; height: 126px; }
#app.g2 .g2-dial svg { width: 100%; height: 100%; display: block; }
#app.g2 .g2-dial-face { fill: #c9a26a; stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
#app.g2 .g2-dial-track { fill: none; stroke: rgba(0, 0, 0, 0.5); stroke-width: 4; }
#app.g2 .g2-dial-prog {
  fill: none; stroke: #f1d79f; stroke-width: 4; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1);
}
#app.g2 .g2-dial-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #22170c; text-align: center; }
#app.g2 .g2-dial-cap { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15; font-weight: 600; color: #3a2a17; }
#app.g2 .g2-dial-num { font-size: 30px; font-weight: 800; line-height: 1; margin: 2px 0 1px; font-variant-numeric: tabular-nums; }
#app.g2 .g2-dial-of { font-size: 12px; font-weight: 500; color: #3a2a17; }
#app.g2 .g2-leads { margin-top: 22px; }
#app.g2 .g2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#app.g2 .g2-see-all {
  margin-top: 22px; width: 100%; height: 58px; border-radius: 14px; border: 1.5px solid rgba(217, 174, 115, 0.75);
  background: linear-gradient(180deg, #9e0c0d, #760000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--g2-shadow);
  color: #fff; font: 800 20px var(--g2-font); cursor: pointer;
}
/* See all leads sits in its own section so it lines up with the plates above it (31 Oct 2026: it was a
   bare child of the screen, so on a wide browser it hugged the screen edge, not the content). */
#app.g2 .g2-see-all-row { display: flex; justify-content: center; }
#app.g2 .g2-see-all-row .g2-see-all { margin-top: 0; display: block; }
#app.g2 .g2-empty { padding: 26px 22px; text-align: center; }
#app.g2 .g2-empty h2 { margin: 0; font-size: 20px; color: var(--g2-strong); }
#app.g2 .g2-empty p { margin: 6px 0 0; font-size: 15px; color: var(--g2-muted); line-height: 1.45; }

/* ---------- THE LEAD CARD ---------- */
#app.g2 .g2-lead { transition: opacity .25s ease; padding: 0; }
#app.g2 .g2-lead::after { z-index: 3; }
#app.g2 .g2-lead-head {
  --red-w: 138px; --red-pad: 22px;
  position: relative; width: 100%; height: 86px;
  display: grid; grid-template-columns: 44px 1fr 98px; align-items: center; gap: 8px;
  padding: 0 12px 0 16px; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
#app.g2 .g2-lead-head:focus-visible { outline: 2px solid var(--g2-gold); outline-offset: -4px; border-radius: 12px; }
/* the diagonal split: a red-oxide panel on the right, its edge slanted like "/" */
#app.g2 .g2-red {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--red-w);
  clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%);
  background: var(--g2-grain), linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--g2-oxide-1), var(--g2-oxide-2));
  z-index: 0;
}
#app.g2 .g2-seam {
  position: absolute; top: -4px; right: 124px; width: 2px; height: 94px; transform: rotate(17deg);
  background: linear-gradient(90deg, #060606 0 50%, rgba(255, 255, 255, 0.14) 50% 100%); z-index: 1;
}
#app.g2 .g2-rv { position: absolute; width: 10px; height: 10px; background: var(--g2-rivet) center / 10px no-repeat; z-index: 2; }
#app.g2 .g2-rv.a { top: 9px; right: 124px; }
#app.g2 .g2-rv.b { top: 9px; right: 98px; }
#app.g2 .g2-rv.c { bottom: 9px; right: 140px; }
#app.g2 .g2-rv.d { bottom: 9px; right: 114px; }
#app.g2 .g2-ic, #app.g2 .g2-text { position: relative; z-index: 2; }
#app.g2 .g2-ic { width: 38px; height: 38px; color: var(--g2-gold); }
#app.g2 .g2-ic svg { width: 100%; height: 100%; display: block; }
#app.g2 .g2-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#app.g2 .g2-name { font-size: 18px; font-weight: 800; color: var(--g2-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app.g2 .g2-job { font-size: 15px; color: var(--g2-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app.g2 .g2-sub { font-size: 14.5px; color: var(--g2-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app.g2 .g2-lead.is-done .g2-name, #app.g2 .g2-lead.is-done .g2-job { color: #9a9a9a; }
/* tag + time CENTRED on the red panel, clear of the slant; the chevron rides the right edge */
#app.g2 .g2-side {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: var(--red-w);
  padding: 0 8px 0 var(--red-pad);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px;
  --g2-gold: #d9ae73; --g2-gold-2: #e8c48f;
}
#app.g2 .g2-meta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; min-width: 0; }
#app.g2 .g2-time { font-size: 12px; color: var(--g2-on-red); white-space: nowrap; }
#app.g2 .g2-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  color: var(--g2-on-red); border: 1px solid rgba(217, 174, 115, 0.6); border-radius: 4px; padding: 2px 4px;
}
#app.g2 .g2-tag.is-hot { color: #fff; background: var(--g2-red-ui); border-color: var(--g2-red-ui); }
#app.g2 .g2-chev { width: 20px; height: 20px; color: var(--g2-on-red); flex: none; }
#app.g2 .g2-chev svg { width: 100%; height: 100%; display: block; transform: rotate(90deg); transition: transform .25s ease; }
#app.g2 .g2-lead.is-open .g2-chev svg { transform: rotate(-90deg); }
#app.g2 .g2-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
#app.g2 .g2-lead.is-open .g2-body { grid-template-rows: 1fr; }
#app.g2 .g2-body-in { overflow: hidden; }
#app.g2 .g2-body-pad { border-top: 1px solid rgba(217, 174, 115, 0.55); background: rgba(0, 0, 0, 0.22); padding: 16px 18px 28px; position: relative; z-index: 4; }
html[data-ts-theme="light"] #app.g2 .g2-body-pad { background: rgba(0, 0, 0, 0.035); border-top-color: rgba(138, 90, 34, 0.4); }
#app.g2 .g2-said-l, #app.g2 .g2-addr span { font-weight: 700; color: var(--g2-gold); }
#app.g2 .g2-said { margin: 4px 0 12px; font-size: 15.5px; line-height: 1.4; color: var(--g2-text); }
#app.g2 .g2-addr { margin: 0 0 16px; font-size: 15.5px; color: var(--g2-text); }
#app.g2 .g2-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
#app.g2 .g2-act {
  height: 42px; border-radius: 10px; border: 1.5px solid var(--g2-gold);
  background: linear-gradient(180deg, #a3100f, #7a0000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #f7dcc2; font: 650 15px var(--g2-font); display: flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; padding: 0 6px; white-space: nowrap;
}
#app.g2 .g2-act:disabled { opacity: .5; }
#app.g2 .g2-more {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; background: none; border: 0;
  color: var(--g2-gold-2); font: 650 15px var(--g2-font); cursor: pointer;
}
#app.g2 .g2-more svg { width: 16px; height: 16px; }
/* inside the swipe wrapper the card keeps its plate */
#app.g2 .swipe-row { border-radius: 14px; }
/* The swipe colour under a lead card follows the plate's rounded corners and sits just inside it, so no square
   red corner shows past the card at rest (James, 1 Nov 2026: "the red outline on the leads part is sharp and
   squared off... it should be round, following the actual section itself"). */
#app.g2 .swipe-row > .swipe-bg { border-radius: 14px; inset: 2px; }
#app.g2 .swipe-bg.swipe-c-red { background: #8b0000; color: #fff; }
#app.g2 .swipe-bg.swipe-c-gold { background: #a9824f; color: #1a1209; }
#app.g2 .swipe-bg.swipe-c-steel { background: #4a4a50; color: #fff; }
#app.g2 .swipe-bg.swipe-c-black { background: #151515; color: #e8c48f; }
@media (max-width: 380px) {
  #app.g2 main { padding-left: 14px; padding-right: 14px; }
  #app.g2 .g2-lead-head { --red-w: 124px; --red-pad: 18px; grid-template-columns: 34px 1fr 94px; padding: 0 10px 0 12px; }
  #app.g2 .g2-ic { width: 32px; height: 32px; }
  #app.g2 .g2-name { font-size: 17px; }
  #app.g2 .g2-job { font-size: 14px; }
  #app.g2 .g2-sub { font-size: 13.5px; }
  #app.g2 .g2-red { clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%); }
  #app.g2 .g2-seam { right: 112px; transform: rotate(14deg); }
  #app.g2 .g2-rv.a { right: 112px; }
  #app.g2 .g2-rv.b { right: 90px; }
  #app.g2 .g2-rv.c { right: 126px; }
  #app.g2 .g2-rv.d { right: 104px; }
  #app.g2 .g2-side { padding-right: 6px; }
  #app.g2 .g2-tag { font-size: 8.5px; }
  #app.g2 .g2-time { font-size: 11px; }
  #app.g2 .g2-chev { width: 18px; height: 18px; }
  #app.g2 .ts-pill { font-size: 13px; padding: 0 6px; }
  #app.g2 .g2-hello h1 { font-size: 28px; }
  #app.g2 .g2-big { font-size: 70px; }
  #app.g2 .g2-dial { width: 112px; height: 112px; }
  #app.g2 .g2-dial-num { font-size: 26px; }
  #app.g2 .g2-acts { gap: 8px; }
  #app.g2 .g2-act { font-size: 14px; }
}

/* ---------- ALL CALLS ---------- */
#app.g2 .g2-stats { margin-top: 4px; margin-bottom: 18px; display: grid; grid-template-columns: 1fr 3px 1fr; background: #111; padding: 0; }
#app.g2 .g2-stats::after { display: none; }
#app.g2 .g2-stat { position: relative; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 4px; }
#app.g2 .g2-stat .g2-caps { font-size: 11.5px; padding-left: 10px; }
#app.g2 .g2-num { white-space: nowrap; font-size: 40px; font-weight: 800; color: var(--g2-strong); line-height: 1; padding-left: 10px; font-variant-numeric: tabular-nums; }
#app.g2 .g2-stat-r .g2-num { color: #fff; }
#app.g2 .g2-num small { font-size: 16px; font-weight: 500; color: var(--g2-muted); }
#app.g2 .g2-stat-r .g2-num small { color: #cfcfcf; }
#app.g2 .g2-stat .g2-note { margin: 0; font-size: 13px; padding-left: 10px; }
#app.g2 .g2-meter { margin: 6px 10px 0; height: 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); overflow: hidden; display: block; }
#app.g2 .g2-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b48a4f, #f1d79f); }
@media (max-width: 380px) { #app.g2 .g2-num { font-size: 32px; } #app.g2 .g2-stat .g2-caps { font-size: 10.5px; } #app.g2 .g2-stat { padding: 14px 12px 16px; } }
#app.g2 .g2-call { grid-template-columns: 30px 1fr auto; min-height: 62px; }
#app.g2 .g2-call-ic { width: 24px; height: 24px; color: var(--g2-gold); justify-self: center; }
#app.g2 .g2-call.is-hot .g2-call-ic { color: #e06666; }
#app.g2 .g2-call.is-dim .g2-call-ic { color: #6a6a6a; }
html[data-ts-theme="light"] #app.g2 .g2-call.is-hot .g2-call-ic { color: #b22222; }
#app.g2 .g2-call-end { display: flex; align-items: center; gap: 6px; color: var(--g2-gold-2); font-size: 14px; white-space: nowrap; }
#app.g2 .g2-call-end svg { width: 16px; height: 16px; }
#app.g2 .g2-badge { color: #fff; background: var(--g2-red-ui); border-radius: 4px; padding: 0 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 6px; }

/* ---------- Settings pieces ---------- */
#app.g2 .g2-look { margin-top: 0; }
#app.g2 .g2-swipe-side { display: grid; gap: 8px; margin-top: 10px; }
#app.g2 .g2-swipe-demo { position: relative; height: 52px; border-radius: 12px; overflow: hidden; background: #a9824f; }
#app.g2 .g2-swipe-demo.g2-sw-red { background: #8b0000; }
#app.g2 .g2-swipe-demo.g2-sw-gold { background: #a9824f; }
#app.g2 .g2-swipe-demo.g2-sw-steel { background: #4a4a50; }
#app.g2 .g2-swipe-demo.g2-sw-black { background: #151515; }
#app.g2 .g2-swipe-lab { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; color: #fff; font-size: 14px; font-weight: 700; }
#app.g2 .g2-swipe-demo.is-right .g2-swipe-lab { left: 14px; }
#app.g2 .g2-swipe-demo.is-left .g2-swipe-lab { right: 14px; }
#app.g2 .g2-swipe-card {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 12px; display: flex; align-items: center; padding: 0 14px;
  background: linear-gradient(180deg, var(--g2-steel-1), var(--g2-steel-2)); border: 1px solid var(--g2-edge);
  animation: g2-nudge-r 2.6s ease-in-out infinite;
}
#app.g2 .g2-swipe-demo.is-left .g2-swipe-card { animation-name: g2-nudge-l; }
#app.g2 .g2-swipe-card span { width: 46%; height: 8px; border-radius: 8px; background: rgba(128, 128, 128, 0.35); }
@keyframes g2-nudge-r { 0%, 15% { transform: translateX(0); } 45%, 75% { transform: translateX(52%); } 100% { transform: translateX(0); } }
@keyframes g2-nudge-l { 0%, 15% { transform: translateX(0); } 45%, 75% { transform: translateX(-52%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  #app.g2 .g2-swipe-demo.is-right .g2-swipe-card { animation: none; transform: translateX(52%); }
  #app.g2 .g2-swipe-demo.is-left .g2-swipe-card { animation: none; transform: translateX(-52%); }
  #app.g2 .g2-body, #app.g2 .g2-chev svg, #app.g2 .g2-dial-prog { transition: none; }
}
#app.g2 .g2-swatches { display: flex; gap: 10px; }
#app.g2 .g2-swatch { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.15); padding: 0; }
#app.g2 .g2-swatch.g2-sw-red { background: #8b0000; }
#app.g2 .g2-swatch.g2-sw-gold { background: #a9824f; }
#app.g2 .g2-swatch.g2-sw-steel { background: #4a4a50; }
#app.g2 .g2-swatch.g2-sw-black { background: #151515; }
#app.g2 .g2-swatch.is-on { border-color: var(--g2-gold-2); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--g2-gold-2); }
html[data-ts-theme="light"] #app.g2 .g2-swatch { border-color: rgba(0, 0, 0, 0.12); }

/* My receptionist: a pencil top right of every item */
#app.g2 .g2-kv { position: relative; padding-right: 64px !important; }
#app.g2 .ts-kv.g2-kv { grid-template-columns: 1fr; gap: 3px; }
#app.g2 .ts-kv.g2-kv .ts-k { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--g2-gold); font-weight: 600; }
#app.g2 .ts-kv.g2-kv .ts-v { text-align: left; font-weight: 400; font-size: 16px; line-height: 1.4; }
#app.g2 .g2-pencil {
  position: absolute; top: 10px; right: 16px; width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; z-index: 4;
  color: var(--g2-gold-2); background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(217, 174, 115, 0.45);
}
html[data-ts-theme="light"] #app.g2 .g2-pencil { background: #fff; border-color: rgba(138, 90, 34, 0.45); }
#app.g2 .g2-pencil svg { width: 18px; height: 18px; }

/* Rewards, Job icons, Let TradeSmart edit */
#app.g2 .g2-pad { padding: 18px 22px; }
#app.g2 .g2-pad > * { position: relative; z-index: 4; }
#app.g2 .g2-intro { margin: 0; font-size: 15px; line-height: 1.45; color: var(--g2-text); }
#app.g2 .g2-h { margin: 0 0 6px; font-size: 18px; color: var(--g2-strong); }
#app.g2 .g2-fine { margin: 10px 0 0; font-size: 13.5px; color: var(--g2-muted); line-height: 1.4; }
#app.g2 .g2-bullets { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.4; color: var(--g2-text); }
#app.g2 .g2-soon { padding: 26px 22px; text-align: center; }
#app.g2 .g2-soon > * { position: relative; z-index: 4; }
#app.g2 .g2-soon h2 { margin: 12px 0 0; font-size: 20px; color: var(--g2-strong); }
#app.g2 .g2-soon p { margin: 8px 0 18px; color: var(--g2-muted); font-size: 15px; line-height: 1.45; }
#app.g2 .g2-pill-soon { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g2-gold-2); border: 1px solid rgba(217, 174, 115, 0.6); }
#app.g2 .g2-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font-size: 16px; color: var(--g2-text); cursor: pointer; }
#app.g2 .g2-switch { position: relative; width: 50px; height: 30px; flex: none; }
#app.g2 .g2-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
#app.g2 .g2-switch span { position: absolute; inset: 0; border-radius: 30px; background: #2a2a2a; border: 1px solid #3a3a3a; transition: background .2s ease; }
#app.g2 .g2-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f1dcb2, #a9875a 55%, #5a4330); transition: transform .2s ease; }
#app.g2 .g2-switch input:checked + span { background: linear-gradient(180deg, #9e0c0d, #760000); border-color: rgba(217, 174, 115, 0.7); }
#app.g2 .g2-switch input:checked + span::after { transform: translateX(20px); }
#app.g2 .g2-switch input:focus-visible + span { outline: 2px solid var(--g2-gold); outline-offset: 2px; }
html[data-ts-theme="light"] #app.g2 .g2-switch span { background: #d9d4cc; border-color: #c9c3b9; }
#app.g2 .g2-jt { grid-template-columns: 34px 1fr auto; }
#app.g2 .g2-jt-ic { width: 30px; height: 30px; color: var(--g2-gold); justify-self: center; }
#app.g2 .g2-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; margin-top: 12px; }
#app.g2 .g2-icon-pick { aspect-ratio: 1; border-radius: 10px; cursor: pointer; display: grid; place-items: center; padding: 8px; background: var(--g2-field); border: 1px solid var(--g2-field-line); color: var(--g2-gold); }
#app.g2 .g2-icon-pick svg { width: 100%; height: 100%; }
#app.g2 .g2-icon-pick.is-on { border-color: rgba(217, 174, 115, 0.9); background: linear-gradient(180deg, #9e0c0d, #760000); color: #f1d79f; }
#app.g2 .g2-reset { margin-top: 14px; width: 100%; }
#app.g2 .g2-choices { display: grid; gap: 8px; }
#app.g2 .g2-choice { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; cursor: pointer; padding: 12px 14px; border-radius: 12px; background: var(--g2-field); border: 1px solid var(--g2-field-line); }
#app.g2 .g2-choice input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: #9e0c0d; }
#app.g2 .g2-choice.is-on { border-color: rgba(217, 174, 115, 0.75); }
#app.g2 .g2-choice b { display: block; font-size: 15.5px; color: var(--g2-text); }
#app.g2 .g2-choice small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--g2-muted); line-height: 1.35; }
#app.g2 .g2-changes { margin-top: 14px; display: grid; gap: 4px; }
#app.g2 .g2-change { font-size: 14px; color: var(--g2-muted); }

/* ---------- the lead page and other rebuilt screens wear the plate through the tokens;
   a few details keep the gold and the red ---------- */
#app.g2 .ts-detail-head h1, #app.g2 .ts-detail-head .ts-name { color: var(--g2-strong); }
#app.g2 .ts-chip { color: var(--g2-gold-2); }
#app.g2 .ts-tier { background: var(--g2-red-ui); color: #fff; }
#app.g2 .err, #app.g2 .ts-fstate.err { color: #e06666; }
html[data-ts-theme="light"] #app.g2 .err, html[data-ts-theme="light"] #app.g2 .ts-fstate.err { color: #b22222; }
#app.g2 .wiz-card, #app.g2 .card, #app.g2 .pr-tile, #app.g2 .qz-nav { background: var(--card); color: var(--ink); border-color: var(--g2-edge); }

/* the lead page's big call button: the red plate it is on the prototype ("Tap to call Kerry") */
#app.g2 .ts-dial {
  border-radius: 14px; border: 1.5px solid rgba(217, 174, 115, 0.75); color: #fff;
  background: linear-gradient(180deg, #9e0c0d, #760000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--g2-shadow);
}
#app.g2 .ts-dial * { color: #fff; }
#app.g2 .ts-dial .ts-dial-hint { color: #f3d2bb; }
#app.g2 .avatar { background: #2a1214; color: #e8c48f; border: 1px solid rgba(217, 174, 115, 0.6); }

/* ---------- Business details (house software v1 slice 2, 31 Oct 2026): the top of a quote or invoice,
   drawn as the paper the customer gets, white in both looks ---------- */
#app.g2 .g2-doc-pick { margin-bottom: 10px; }
#app.g2 .g2-doc {
  background: #ffffff; color: #1a1a1a; border-radius: 6px; padding: 16px 16px 14px;
  border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: var(--g2-shadow);
}
#app.g2 .g2-doc-top { display: flex; gap: 12px; align-items: flex-start; }
#app.g2 .g2-doc-logo { max-width: 96px; max-height: 64px; object-fit: contain; flex: 0 0 auto; }
#app.g2 .g2-doc-who { min-width: 0; overflow-wrap: anywhere; }
#app.g2 .g2-doc-name { font-size: 17px; font-weight: 700; color: #111111; line-height: 1.25; }
#app.g2 .g2-doc-line { font-size: 13px; color: #4a4a4a; margin-top: 3px; line-height: 1.35; }
#app.g2 .g2-doc-title { margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8b0000; }
#app.g2 .g2-doc-rule { height: 1px; background: rgba(0, 0, 0, 0.14); margin: 8px 0 10px; }
#app.g2 .g2-doc-ghost { display: grid; gap: 7px; }
#app.g2 .g2-doc-ghost span { display: block; height: 8px; border-radius: 4px; background: #ececec; }
#app.g2 .g2-doc-ghost span:nth-child(2) { width: 78%; }
#app.g2 .g2-doc-ghost span:nth-child(3) { width: 52%; }

/* ---------- Quotes (house software v1 slice 3, 31 Oct 2026): the line editor ---------- */
#app.g2 .g2-qline { padding: 10px 0; border-bottom: 1px solid rgba(217, 174, 115, 0.18); }
#app.g2 .g2-qline:first-child { padding-top: 0; }
#app.g2 .g2-q-nums { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 8px; margin-top: 8px; align-items: end; }
#app.g2 .g2-q-nums label { display: grid; gap: 4px; min-width: 0; }
#app.g2 .g2-q-nums label span { font-size: 12px; color: var(--g2-muted); }
#app.g2 .g2-q-nums .ts-input { min-width: 0; }
#app.g2 .g2-q-rm { padding: 10px; min-height: 44px; }
#app.g2 .g2-q-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#app.g2 .g2-q-chips .ts-pill { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; }
#app.g2 .g2-q-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px;
  font-size: 18px; color: var(--g2-strong); }
#app.g2 .g2-q-gst { font-size: 13.5px; color: var(--g2-muted); text-align: right; margin-top: 2px; }
/* B2 (31 Oct 2026): options, markup, kits, templates, photos. Every row min-width 0 so 360 px never overflows. */
#app.g2 .g2-qopt { min-width: 0; }
#app.g2 .g2-qopt.is-opt { border: 1px solid rgba(217, 174, 115, 0.28); border-radius: 10px; padding: 10px; margin-bottom: 12px; }
#app.g2 .g2-qopt-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 10px; }
#app.g2 .g2-qopt-head .ts-input { min-width: 0; font-weight: 700; }
#app.g2 .g2-q-mk { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--g2-muted); }
#app.g2 .g2-q-mk input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
#app.g2 .g2-q-mkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-top: 4px; }
#app.g2 .g2-q-mkrow .ts-input { min-width: 0; }
#app.g2 .g2-q-target { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; min-width: 0; }
#app.g2 .g2-q-target .ts-pill { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; }
#app.g2 .g2-q-target .ts-pill[aria-pressed="true"] { background: var(--g2-red); color: var(--g2-on-red); border-color: var(--g2-edge); }
#app.g2 .g2-q-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
#app.g2 .g2-q-ph { position: relative; min-width: 0; }
#app.g2 .g2-q-phimg { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: var(--g2-well); }
#app.g2 .g2-q-phrm { position: absolute; top: 4px; right: 4px; padding: 6px; min-height: 36px; min-width: 36px; }
#app.g2 .g2-q-lib summary { cursor: pointer; font-weight: 700; color: var(--g2-strong); min-height: 44px; display: flex; align-items: center; }
#app.g2 .g2-q-librow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid rgba(217, 174, 115, 0.18); }
#app.g2 .g2-q-librow span { min-width: 0; overflow-wrap: anywhere; }
/* ---------- Booked jobs (house software v1 slice 4, 31 Oct 2026) ---------- */
#app.g2 .g2-job-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#app.g2 .g2-job-when label { display: grid; gap: 4px; min-width: 0; }
#app.g2 .g2-job-when .ts-input { min-width: 0; }
#app.g2 .g2-jobday { margin: 12px 2px 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--g2-gold); }
#app.g2 .g2-row-ic.g2-job-time { width: auto; min-width: 52px; font-size: 13px; font-weight: 700; color: var(--g2-gold-2); }
/* ---------- Needs chasing and Money on Home (house software v1 B1, 31 Oct 2026) ---------- */
#app.g2 .g2-money { margin-bottom: 0; }
#app.g2 .g2-money .g2-num { font-size: 30px; }
#app.g2 .g2-chase { padding: 12px 4px; border-bottom: 1px solid rgba(217, 174, 115, 0.18); min-width: 0; }
#app.g2 .g2-chase:last-child { border-bottom: 0; }
#app.g2 .g2-chase-name { font-size: 16.5px; font-weight: 650; color: var(--g2-strong); overflow-wrap: anywhere; }
#app.g2 .g2-chase-what { font-weight: 500; color: var(--g2-text); }
#app.g2 .g2-chase-sub { font-size: 14px; color: var(--g2-muted); margin-top: 2px; }
#app.g2 .g2-chase-acts { margin-top: 8px; }
@media (max-width: 380px) { #app.g2 .g2-money .g2-num { font-size: 26px; } }

/* ================================================================================
   F2: THE SIGN-UP FLOW IN g2 (James, 31 Oct 2026: "after you click Get Started on a CTA, every
   screen from that needs to ... look like the TradeSmart portal"). app.js puts #app.g2 on the
   standalone screens too (log in, get started, the setup questions, the card step, the guest's
   go-live); these rules dress the pieces only those screens have. Look only: no word, id or
   behaviour changes.
   ================================================================================ */

/* the header on a screen with no tab bar: in the flow at every width, never the fixed desktop bar */
@media (min-width: 900px) {
  #app.g2:not(.has-nav) > .topbar {
    position: static; height: auto; background: transparent;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 4px;
  }
}

/* ---------- log in, get started, sign up, verify, forgot, set password: .login-wrap ---------- */
#app.g2 .login-wrap {
  background: none; justify-content: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 40px;
}
/* the old text wordmark becomes the official one; the words stay in the page for screen readers */
#app.g2 .login-logo {
  width: 46%; max-width: 190px; aspect-ratio: 1250 / 278; flex: none;
  font-size: 0; line-height: 0; color: transparent; letter-spacing: 0;
  background: url('/brand/ts-word.webp') center / contain no-repeat;
}
#app.g2 .login-logo span { color: transparent; }
html[data-ts-theme="light"] #app.g2 .login-logo {
  filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
@media (min-width: 900px) { #app.g2 .login-logo { width: 170px; } }
#app.g2 .login-sub {
  width: 100%; max-width: 428px; margin: 26px 0 14px; padding: 0 2px; text-align: left;
  font: 400 28px/1.15 var(--g2-font); letter-spacing: -0.01em; color: var(--ink-2);
}
#app.g2 .login-card,
#app.g2 .login-wrap > form.login-card {
  position: relative; max-width: 428px; padding: 22px 22px 24px; border-radius: 14px;
  border: 1px solid var(--g2-edge); color: var(--g2-text);
  background:
    var(--g2-grain),
    linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, var(--g2-steel-1), var(--g2-steel-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.6), var(--g2-shadow);
}
html[data-ts-theme="light"] #app.g2 .login-card {
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.06), var(--g2-shadow);
}
#app.g2 .login-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background:
    var(--g2-rivet) left 9px top 9px / 10px no-repeat,
    var(--g2-rivet) right 9px top 9px / 10px no-repeat,
    var(--g2-rivet) left 9px bottom 9px / 10px no-repeat,
    var(--g2-rivet) right 9px bottom 9px / 10px no-repeat;
}
#app.g2 .login-card .ts-prose { color: var(--g2-text); font-size: 15.5px; line-height: 1.45; margin: 0; }
#app.g2 .login-card .ts-note { color: var(--g2-muted); }
#app.g2 .login-card a:not(.ts-btn), #app.g2 .login-card .ts-note a { color: var(--g2-gold-2); font-weight: 600; text-underline-offset: 2px; }
#app.g2 .login-card label:not(.ts-flabel) { color: var(--g2-muted); }
#app.g2 .login-card input:not(.ts-input):not([type="checkbox"]) {
  background: var(--g2-field); border: 1px solid var(--g2-field-line); color: var(--g2-text); border-radius: 12px;
}
#app.g2 .login-card .ts-input { min-height: 48px; padding: 0 14px; font-size: 16px; width: 100%; }
#app.g2 .login-link-row button { color: var(--g2-gold-2); font-family: var(--g2-font); min-height: 44px; }
#app.g2 .login-card .plan-strip { background: var(--g2-well); color: var(--g2-muted); border: 1px solid var(--g2-field-line); }
#app.g2 .plan-strip strong { color: var(--g2-text); }
#app.g2 .plan-strip a { color: var(--g2-gold-2); }
#app.g2 .stepline .step { background: var(--g2-well); color: var(--g2-muted); border: 1px solid var(--g2-field-line); }
#app.g2 .stepline .step.on, #app.g2 .login-card .stepline .step.on { background: linear-gradient(180deg, #9e0c0d, #760000); color: #fff; border-color: rgba(217, 174, 115, 0.7); }
#app.g2 .stepline .step.done { background: var(--g2-gold-dim); color: #1a1209; }
#app.g2 .stepline .steptrack { background: var(--g2-field-line); }
#app.g2 .stepline .steptrack.done { background: var(--g2-gold-dim); }
#app.g2 .steplabel { color: var(--g2-muted); }
#app.g2 .plan-pick { background: var(--g2-field); border: 1.5px solid var(--g2-field-line); color: var(--g2-text); }
#app.g2 .plan-pick.sel { border-color: rgba(217, 174, 115, 0.85); background: var(--g2-oxide-2); }
html[data-ts-theme="light"] #app.g2 .plan-pick.sel { background: #fbf3f0; border-color: rgba(138, 90, 34, 0.7); }
#app.g2 .guarantee { background: var(--g2-well); color: var(--g2-text); border-left-color: var(--g2-gold); }
#app.g2 .manual-toggle { color: var(--g2-gold-2); }
#app.g2 .manual-secret { background: var(--g2-well); border-color: var(--g2-field-line); color: var(--g2-text); }
#app.g2 .remember-row { color: var(--g2-text); min-height: 44px; }
#app.g2 .remember-row input { accent-color: #9e0c0d; width: 20px; height: 20px; }
/* the QR stays on white in both looks: an authenticator app needs the contrast */
#app.g2 .qr-frame { border-color: var(--g2-field-line); }

/* ---------- the guest's strip: slim, under the wordmark, not a grey slab ---------- */
#app.g2 .ts-guest-bar {
  width: calc(100% - 32px); max-width: 428px; margin: 8px auto 0; padding: 8px 8px 8px 12px; gap: 6px 10px;
  border: 1px solid var(--g2-field-line); border-radius: 12px; background: var(--g2-well);
}
@media (min-width: 900px) { #app.g2 .ts-guest-bar { max-width: 688px; } }
#app.g2 .ts-guest-bar .ts-note { flex: 1 1 170px; font-size: 13px; line-height: 1.35; color: var(--g2-muted); }
#app.g2 .ts-guest-bar .ts-btn { height: auto; min-height: 40px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; }
#app.g2 .ts-guest-bar #guest-link .ts-note { flex: 1 1 100%; font-size: 12.5px; }
#app.g2 .ts-guest-bar #guest-link-url { height: 40px; padding: 0 10px; font-size: 14px; }

/* ---------- the setup questions, full screen under the wordmark ---------- */
#app.g2 :is(#ob-main, .settings-embed) .wiz-wrap { min-height: 0; padding: 0; justify-content: flex-start; align-items: stretch; max-width: none; }
#app.g2 :is(#ob-main, .settings-embed) .ob-help { max-width: none; }
#app.g2 :is(#ob-main, .settings-embed) .qz-same, #app.g2 :is(#ob-main, .settings-embed) .ob-or { color: var(--g2-muted); }
#app.g2 :is(#ob-main, .settings-embed) .qz-card {
  position: relative; max-width: none; border-radius: 14px; border: 1px solid var(--g2-edge);
  background:
    var(--g2-grain),
    linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, var(--g2-steel-1), var(--g2-steel-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.6), var(--g2-shadow);
}
html[data-ts-theme="light"] #app.g2 :is(#ob-main, .settings-embed) .qz-card { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.06), var(--g2-shadow); }
#app.g2 :is(#ob-main, .settings-embed) .qz-kicker { color: var(--g2-gold); }
#app.g2 :is(#ob-main, .settings-embed) .qz-title { color: var(--g2-strong); }
#app.g2 :is(#ob-main, .settings-embed) .qz-nav { background: var(--g2-steel-2); border-top-color: var(--line-2); }
#app.g2 :is(#ob-main, .settings-embed) .wiz-kind { background: var(--g2-well); color: var(--g2-gold-2); border: 1px solid var(--g2-field-line); }
#app.g2 :is(#ob-main, .settings-embed) .qz-prog-l b { color: var(--g2-gold); }

/* ---------- Got a website already? (1 Nov 2026): the first card of setup, and the mark on a pre-filled answer ---------- */
#app.g2 .sp-card { margin: 12px 0; }
#app.g2 .sp-card .ts-field { padding-top: 16px; padding-bottom: 16px; }
#app.g2 .sp-title { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--g2-strong); }
#app.g2 .sp-card .ts-input { width: 100%; min-height: 46px; font-size: 16px; }
#app.g2 .sp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#app.g2 .sp-btns .ts-btn { flex: 1 1 140px; min-height: 46px; }
#app.g2 .sp-group { margin: 18px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--g2-gold); font-weight: 600; }
#app.g2 .sp-row { padding: 12px 0; border-top: 1px solid var(--line-2); display: grid; gap: 6px; }
#app.g2 .sp-tick { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--g2-text); font-weight: 650; font-size: 15.5px; }
#app.g2 .sp-tick input { accent-color: #9e0c0d; width: 20px; height: 20px; flex: 0 0 auto; }
#app.g2 .sp-tag { display: inline-block; margin: 0; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--g2-gold-2); background: var(--g2-well); border: 1px solid rgba(217, 174, 115, 0.45); justify-self: start; }
#app.g2 .sp-tag-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0; }
#app.g2 .sp-says { margin: 0; font-size: 13px; line-height: 1.35; color: var(--g2-muted); font-style: italic; overflow-wrap: anywhere; }
#app.g2 .sp-from, #app.g2 .sp-hint { margin: 0; font-size: 12.5px; color: var(--g2-muted); overflow-wrap: anywhere; }
#app.g2 .sp-fixed { margin: 0; color: var(--g2-text); }
#app.g2 .sp-pair { display: grid; gap: 6px; grid-template-columns: 1fr; }
@media (min-width: 640px) { #app.g2 .sp-pair { grid-template-columns: 1fr 1fr; } }
html[data-ts-theme="light"] #app.g2 .sp-tag { border-color: rgba(138, 90, 34, 0.5); }

/* ---------- the go-live screen: Before you pay (James's run-through, 31 Oct 2026 10:04 PM) ---------- */
/* the plan choice: one tile a line, the height its words need, the chosen one red */
#app.g2 .pl-pay .ts-btn-row[role="group"] { grid-template-columns: 1fr; gap: 8px; }
#app.g2 .pl-plan {
  height: auto; min-height: 50px; padding: 11px 14px 11px 44px; position: relative;
  justify-content: flex-start; text-align: left; white-space: normal; overflow-wrap: anywhere;
  font-size: 15.5px; line-height: 1.3; font-weight: 650; color: var(--g2-text); outline: 0;
}
#app.g2 .pl-plan::before {
  content: ''; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; border: 1.5px solid rgba(217, 174, 115, 0.7); background: var(--g2-well);
}
#app.g2 .pl-plan.is-on {
  color: #fff; border-color: rgba(217, 174, 115, 0.85); outline: 0;
  background: linear-gradient(180deg, #9e0c0d, #760000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
#app.g2 .pl-plan.is-on::before { border-color: #f1d79f; background: radial-gradient(circle, #f1d79f 0 4px, #5a0000 5px); }
#app.g2 .pl-plan:focus-visible { outline: 2px solid var(--g2-gold); outline-offset: 2px; }
/* the one page: each term a gold label, its text full width under it, a hairline between */
#app.g2 .pl-agree { margin: 14px 0 0; padding: 0; }
#app.g2 .pl-agree dt {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2);
  font: 600 12px/1.3 var(--g2-font); letter-spacing: .07em; text-transform: uppercase; color: var(--g2-gold);
}
#app.g2 .pl-agree dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#app.g2 .pl-agree dd { margin: 5px 0 0; font-size: 15px; line-height: 1.45; color: var(--g2-text); }
#app.g2 .pl-pay .ts-link, #app.g2 .pl-agree + .ts-note .ts-link {
  font-size: inherit; color: var(--g2-gold-2); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; overflow-wrap: anywhere;
}
/* I agree: a g2 box with the whole row as its tap target */
#app.g2 .pl-tick {
  display: flex; align-items: center; gap: 12px; min-height: 54px; margin-top: 16px; padding: 12px 14px;
  border-radius: 12px; background: var(--g2-field); border: 1px solid var(--g2-field-line);
  font-size: 15.5px; font-weight: 600; color: var(--g2-text); cursor: pointer;
}
#app.g2 .pl-tick:has(input:checked) { border-color: rgba(217, 174, 115, 0.75); }
#app.g2 .pl-tick input {
  appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0; cursor: pointer;
  border-radius: 7px; border: 1.5px solid rgba(217, 174, 115, 0.75); background: var(--g2-well);
}
#app.g2 .pl-tick input:checked {
  border-color: rgba(217, 174, 115, 0.9);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 18px no-repeat,
    linear-gradient(180deg, #9e0c0d, #760000);
}
#app.g2 .pl-tick input:focus-visible { outline: 2px solid var(--g2-gold); outline-offset: 2px; }
#app.g2 #pl-pay:disabled { opacity: .5; }
/* the account step on the same screen: full-width fields and button, like the log in */
#app.g2 .pl-claim .ts-flabel { display: block; margin: 14px 0 5px; }
#app.g2 .pl-claim .ts-input { width: 100%; min-height: 48px; padding: 0 14px; font-size: 16px; }
#app.g2 .pl-claim .ts-btn { width: 100%; margin-top: 14px; }
#app.g2 .pl-claim .ts-prose { color: var(--g2-text); }
#app.g2 .pl-claim > .ts-prose:first-child { margin-top: 18px; }
#app.g2 .pl-codes { color: var(--g2-text); }
/* Get the TradeSmart app (shown once the account exists) */
#app.g2 .g2-stores { grid-template-columns: 1fr; }
#app.g2 #pl-getapp .ts-prose { margin: 0; color: var(--g2-text); }
/* ---------- Job checklists, notes and the customer timeline (house software B3, 31 Oct 2026) ----------
   Every row min-width 0 and wrapping, so 360 px never overflows; colours from the g2 tokens, so dark and light
   both follow. The Add a checklist sheet sits on <body>, outside #app.g2, so it uses the base tokens. */
#app.g2 .g2-chk { margin-bottom: 10px; min-width: 0; }
#app.g2 .g2-chk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
#app.g2 .g2-chk-name { font-size: 16.5px; font-weight: 650; color: var(--g2-strong); overflow-wrap: anywhere; }
#app.g2 .g2-chk-items { display: grid; gap: 4px; margin-top: 10px; }
#app.g2 .g2-chk-tick { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 44px; padding: 4px 0; cursor: pointer; }
#app.g2 .g2-chk-tick input { width: 22px; height: 22px; margin: 0; accent-color: var(--g2-red-ui); }
#app.g2 .g2-chk-text { display: grid; gap: 4px; padding: 6px 0; min-width: 0; }
#app.g2 .g2-chk-text .ts-input { min-width: 0; }
#app.g2 .g2-chk-label { font-size: 15px; color: var(--g2-text); overflow-wrap: anywhere; min-width: 0; }
#app.g2 .g2-chk-tick input:checked + .g2-chk-label { color: var(--g2-muted); text-decoration: line-through; }
#app.g2 .g2-chk.is-done .g2-chk-name { color: var(--g2-gold); }
#app.g2 .g2-chk-acts { display: flex; justify-content: flex-end; margin-top: 8px; }
.sheet.g2-chk-sheet { max-height: 85vh; overflow-y: auto; }
.g2-chk-group { margin: 8px 2px 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); }
.g2-chk-pick { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; min-width: 0; }
.g2-chk-pick > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.g2-chk-pick-n { flex: 0 0 auto; font-size: 13px; color: var(--ink-2); }
#app.g2 .g2-ctpl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 0;
  border-bottom: 1px solid rgba(217, 174, 115, 0.18); }
#app.g2 .g2-ctpl-row [data-f="label"] { grid-column: 1 / -1; min-width: 0; }
#app.g2 .g2-ctpl-row select { min-width: 0; }
#app.g2 .g2-q-librow .ts-nt, #app.g2 .g2-q-librow .ts-ns { display: block; }
#app.g2 .g2-q-librow .ts-ns { font-size: 14px; color: var(--g2-muted); }
#app.g2 .g2-tl-add { margin-bottom: 4px; }
#app.g2 .g2-tl-list { padding: 4px 0; }
#app.g2 .g2-tl { position: relative; z-index: 4; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px;
  align-items: start; padding: 12px 22px; color: inherit; text-decoration: none; }
#app.g2 .g2-tl + .g2-tl { border-top: 1px solid rgba(217, 174, 115, 0.18); }
#app.g2 .g2-tl-time { font-size: 13px; font-weight: 700; color: var(--g2-gold-2); padding-top: 1px; }
#app.g2 .g2-tl-main { display: grid; gap: 2px; min-width: 0; }
#app.g2 .g2-tl-title { font-size: 15.5px; font-weight: 650; color: var(--g2-strong); overflow-wrap: anywhere; }
#app.g2 .g2-tl-detail { font-size: 14px; color: var(--g2-muted); overflow-wrap: anywhere; }
#app.g2 .g2-tl.is-note .g2-tl-detail { white-space: pre-wrap; color: var(--g2-text); }
#app.g2 .g2-tl-go { display: flex; color: var(--g2-gold-2); padding-top: 1px; }
#app.g2 .g2-tl-go svg { width: 18px; height: 18px; }
#app.g2 .g2-tl-del { padding: 6px 10px; min-height: 36px; }
@media (max-width: 380px) {
  #app.g2 .g2-tl { grid-template-columns: 50px minmax(0, 1fr) auto; padding: 12px 16px; gap: 8px; }
}
/* ---------- WEBSITE PHOTOS AND VIDEOS (31 Oct 2026): the folder plate, the tiles, the viewer ----------
   Base rules unscoped (James's admin console shows the same tiles); the plate look comes from
   #app.g2 .g2-plate. The viewer hangs off <body>, outside #app.g2, and is dark in both looks (a photo
   reads best on black). No inline styles: every state is a class or the hidden attribute. */
.wm-folder { margin-top: 10px; border: 1px solid var(--line, #2c2c2c); border-radius: 14px; }
.wm-fold { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 26px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; z-index: 4; }
.wm-fold:focus-visible { outline: 2px solid var(--accent, #b22222); outline-offset: -3px; border-radius: 12px; }
.wm-fold-ic { flex: 0 0 26px; width: 26px; height: 26px; color: var(--g2-gold, #a9824f); }
.wm-fold-ic svg, .wm-fold-c svg { width: 100%; height: 100%; display: block; }
.wm-fold-t { flex: 1 1 auto; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.wm-fold-c { flex: 0 0 18px; width: 18px; height: 18px; color: var(--g2-gold-2, #7a4f1d); }
.wm-fold-c svg { transition: transform 0.2s ease; }
.wm-fold[aria-expanded="true"] .wm-fold-c svg { transform: rotate(90deg); }
.wm-body { padding: 0 18px 18px; position: relative; z-index: 4; }
.wm-body[hidden] { display: none; }
.wm-count { margin: 0 0 8px; }
.wm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wm-grid:empty { display: none; }
.wm-cell { position: relative; min-width: 0; }
.wm-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--line, #2c2c2c); border-radius: 10px; overflow: hidden; background: var(--g2-well, #0d0d0d); color: var(--ink-3, #a6a6a6); font: inherit; font-size: 12px; cursor: zoom-in; }
.wm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-thumb:focus-visible { outline: 2px solid var(--accent, #b22222); outline-offset: 2px; }
.wm-thumb.is-video { cursor: pointer; flex-direction: column; gap: 4px; background: linear-gradient(160deg, #2a1214, #0d0d0d); color: #e8c48f; }
.wm-play { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #e8c48f; display: flex; align-items: center; justify-content: center; }
.wm-play svg { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
.wm-vlabel { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.wm-badge { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #e8c48f; font-size: 11px; font-weight: 700; }
/* a 44px hit area (the phone baseline makes every button 44px tall) drawn as a 32px disc */
.wm-del { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 0, 0.7) 15px, rgba(0, 0, 0, 0) 16px); color: #fff; cursor: pointer; z-index: 2; }
.wm-del svg { width: 16px; height: 16px; }
.wm-del:focus-visible { outline: 2px solid #e8c48f; }
.wm-save { width: 100%; margin-top: 4px; min-height: 36px; }
.wm-more { grid-column: 1 / -1; }
html[data-ts-theme="light"] .wm-thumb.is-video { background: linear-gradient(160deg, #42191c, #1d1b1a); }

/* the questionnaire's ticks and choices */
.wo-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin-top: 8px; }
.wo-tick, .wo-radio { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 2px; cursor: pointer; }
.wo-tick input, .wo-radio input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent, #b22222); }
.wo-radio > span { display: flex; flex-direction: column; gap: 2px; }
.wo-sub { font-size: 13.5px; color: var(--ink-3, #5e5a55); }
.wo-call a { font-weight: 700; white-space: nowrap; }
#app.g2 .wo-call a { color: var(--g2-gold-2); }
#app.g2 .wo-tick, #app.g2 .wo-radio { color: var(--g2-text); }
.wo-other-name[hidden] { display: none; }
@media (max-width: 380px) { .wo-ticks { grid-template-columns: 1fr; } .wm-fold { padding: 10px 22px; } }

/* the viewer */
.mv-viewer { position: fixed; inset: 0; z-index: 1000; background: #000; color: #f2f2f2; display: flex; flex-direction: column; }
body.mv-open { overflow: hidden; }
.mv-top { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px; }
.mv-count { flex: 1 1 auto; font-weight: 600; font-size: 15px; }
.mv-acts { display: flex; gap: 8px; }
.mv-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(232, 196, 143, 0.5); border-radius: 10px; background: #1c1b1d; color: #e8c48f; font: inherit; font-weight: 600; cursor: pointer; }
.mv-btn svg { width: 16px; height: 16px; }
.mv-btn[hidden] { display: none; }
.mv-btn:focus-visible, .mv-nav:focus-visible { outline: 2px solid #e8c48f; outline-offset: 2px; }
.mv-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; }
.mv-stage.is-zoomed { display: block; overflow: auto; touch-action: auto; cursor: zoom-out; }
.mv-media { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.mv-stage img.mv-media { cursor: zoom-in; }
.mv-stage.is-zoomed img.mv-media { max-width: none; max-height: none; width: 200%; cursor: zoom-out; }
.mv-stage video.mv-media { width: 100%; background: #000; }
.mv-wait { color: #a6a6a6; }
.mv-nav { position: absolute; top: 50%; width: 44px; height: 64px; margin-top: -32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; background: rgba(28, 27, 29, 0.78); color: #e8c48f; cursor: pointer; }
.mv-nav svg { width: 22px; height: 22px; }
.mv-prev { left: 6px; }
.mv-prev svg { transform: rotate(180deg); }
.mv-next { right: 6px; }
.mv-nav:disabled { opacity: 0.25; cursor: default; }

/* CONNECTIONS HUB + GOOGLE BUSINESS PROFILE CARD (C1, 31 Oct 2026). One row per connection: name,
   what it does, a plain state and the one button that fixes it. Green only for Connected (active). */
#app.g2 { --g2-ok: #7cc48a; }
html[data-ts-theme="light"] #app.g2 { --g2-ok: #2e6b35; }
#app.g2 .conn-hub { padding-top: 4px; padding-bottom: 4px; }
#app.g2 .conn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
#app.g2 .conn-row + .conn-row { border-top: 1px solid var(--g2-field-line); }
#app.g2 .conn-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#app.g2 .conn-name { color: var(--g2-strong); font-size: 15.5px; font-weight: 700; }
#app.g2 .conn-what { color: var(--g2-muted); font-size: 13px; line-height: 1.35; }
#app.g2 .conn-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
#app.g2 .conn-pill { font: 700 10.5px/1 var(--g2-font); letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 7px;
  border-radius: 3px; border: 1px solid var(--g2-field-line); color: var(--g2-muted); white-space: nowrap; }
#app.g2 .conn-pill.is-connected { color: var(--g2-ok); border-color: var(--g2-ok); }
#app.g2 .conn-pill.is-waiting { color: var(--g2-gold); border-color: var(--g2-gold-dim); }
#app.g2 .conn-pill.is-none { color: var(--g2-text); }
#app.g2 .conn-go { min-height: 38px; padding: 6px 12px; font-size: 13.5px; width: auto; white-space: nowrap; }
#app.g2 .gbp-wins, #app.g2 .gbp-steps { margin: 8px 0 0; padding-left: 20px; color: var(--g2-text); font-size: 14.5px; line-height: 1.45; }
#app.g2 .gbp-wins li + li, #app.g2 .gbp-steps li + li { margin-top: 6px; }
#app.g2 .gbp-steps a { color: var(--g2-gold); }
#app.g2 .gbp-email { color: var(--g2-gold-2); overflow-wrap: anywhere; }
#app.g2 .gbp-state { font-size: 16px; color: var(--g2-strong); margin-bottom: 4px; }
#app.g2 .gbp-state.is-connected b { color: var(--g2-ok); }
#app.g2 .gbp-state.is-waiting b { color: var(--g2-gold); }
#app.g2 .gbp-more { margin-top: 10px; }
#app.g2 .gbp-more summary { cursor: pointer; color: var(--g2-gold); font-weight: 600; min-height: 32px; }
#app.g2 .gbp-card .ts-btn-row { margin-top: 10px; }
#app.g2 .gbp-card .ts-prose { margin-top: 16px; }
#app.g2 .gbp-card .wiz-row-label { display: block; margin-top: 14px; }
/* Connect your domain (W3, 1 Nov 2026): the same card language as the GBP card, phone first. */
#app.g2 .dom-card .ts-btn-row { margin-top: 10px; }
#app.g2 .dom-card .ts-prose { margin-top: 16px; }
#app.g2 .dom-card .ts-prose b { color: var(--g2-strong); }
#app.g2 .dom-card .wiz-row-label { display: block; margin-top: 14px; }
#app.g2 .dom-found { margin: 8px 0 0; padding-left: 20px; color: var(--g2-text); font-size: 14.5px; line-height: 1.45; }
#app.g2 .dom-found li + li { margin-top: 4px; }
#app.g2 .dom-found b, #app.g2 .dom-nsb { color: var(--g2-strong); overflow-wrap: anywhere; }
#app.g2 .dom-ns { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
#app.g2 .dom-ns code { display: block; padding: 10px 12px; border: 1px solid var(--g2-field-line); border-radius: 10px;
  background: var(--g2-well); color: var(--g2-gold-2); font-size: 15px; overflow-wrap: anywhere; user-select: all; }
#app.g2 .dom-warn { color: var(--g2-gold); margin-top: 10px; }
#app.g2 .dom-card a { color: var(--g2-gold); }
#app.g2 .wo-gbp { border: 1px solid var(--g2-field-line); border-radius: 12px; padding: 12px; margin-top: 8px; background: var(--g2-well); }

/* ================================================================================
   THE PORTAL SWEEP (James, 1 Nov 2026: "on the billing page, under Your Plan ... that's all
   formatted weirdly ... check the entire TradeSmart portal again, every page, every section").
   Every rule here fixes a MECHANISM that broke more than one screen, not one screen's symptom.
   ================================================================================ */

/* 1. ONE COLUMN EDGE. g2 pulled sections, titles and pills in to a 2px inset inside main's 16px, but
   the back link, the lead's head, the screen-level buttons, the tab row and the older top-level
   pieces kept their 20px gutter, so on every detail screen the content edge stepped in and out. */
#app.g2 .ts-detail-head { padding-left: 2px; padding-right: 2px; }
#app.g2 .ts-actions { padding-left: 2px; padding-right: 2px; }
#app.g2 .ts-tabs { padding-left: 2px; padding-right: 2px; }
#app.g2 .ts-backbar { padding: 10px 0 0; }
#app.g2 .ts-backbar button { padding: 0 8px 0 0; }
#app.g2 .ts-backbar + .ts-topbar { padding-top: 4px; }
@media (max-width: 899px) {
  #app.g2 .ts-screen > :is(.card, .row, .muted, .ts-note, .pill-row, .ts-btn, .sect, .adm-list) { margin-left: 2px; margin-right: 2px; }
  #app.g2 .ts-screen > .ts-btn { width: calc(100% - 4px); }
  #app.g2 .ts-screen > .ts-empty { margin-left: 2px; margin-right: 2px; }
}
#app.g2 .ts-screen > .ts-note { padding: 0 2px; }

/* 2. A LONE BUTTON IN A TWO-COLUMN ROW sat at half width with its label wrapping ("Offer options
   (good, better, best)", Save, Add note, Change password, Add your logo, New quote). */
#app.g2 .ts-btn-row > .ts-btn:only-child { grid-column: 1 / -1; }

/* 3. A PILL ROW THAT DOES NOT FIT WRAPS instead of running off the plate (the lead's five stages
   drew "didn't go ahead" past the screen edge at 390). It only wraps when it has to. */
#app.g2 .ts-pills, #app.g2 .ts-pills.ts-wrap { flex-wrap: wrap; }
#app.g2 .ts-pill { white-space: nowrap; }

/* 4. NO EMPTY PLATES: a call with a transcript but no recording drew a bare plate where the player goes. */
#app.g2 .ts-plane:has(> .ts-field > #rcall-player:empty) { display: none; }

/* 5. THE OLDER CARDS WEAR THE PLATE. A .card (and a Products tile) was a flat grey box with a hairline:
   a second, cheaper look beside the riveted plates on the same screen. Padding clears the rivets. */
#app.g2 :is(.card, .pr-tile):not(.card .card) {
  position: relative; border-radius: 14px; border: 1px solid var(--g2-edge); color: var(--g2-text);
  background:
    var(--g2-grain),
    linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, var(--g2-steel-1), var(--g2-steel-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.6), var(--g2-shadow);
  padding: 20px 22px;
}
html[data-ts-theme="light"] #app.g2 :is(.card, .pr-tile):not(.card .card) {
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.06), var(--g2-shadow);
}
#app.g2 :is(.card, .pr-tile):not(.card .card)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background:
    var(--g2-rivet) left 9px top 9px / 10px no-repeat,
    var(--g2-rivet) right 9px top 9px / 10px no-repeat,
    var(--g2-rivet) left 9px bottom 9px / 10px no-repeat,
    var(--g2-rivet) right 9px bottom 9px / 10px no-repeat;
}
#app.g2 .card.warn { border-color: var(--g2-red-ui); }
#app.g2 .card .muted { color: var(--g2-muted); }
#app.g2 .pr-tile + .ts-prose, #app.g2 .pr-tile + p { margin-top: 14px; }
#app.g2 .pr-grid { gap: 16px; }
/* the old small label over a card reads as the section heading every g2 screen uses */
#app.g2 .ts-screen > .field-label, #app.g2 .card > .field-label:first-child {
  font: 600 12.5px/1.3 var(--g2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--g2-gold);
  margin: 22px 2px 10px;
}

/* 6. STATUS PILLS AND TAGS: the old white capsules ("Active", "PAID") were the only white shapes on a
   black screen. They become the lead card's square-cornered tag; green is for paid/active only. */
#app.g2 span.pill, #app.g2 .ctag {
  background: none; border: 1px solid rgba(217, 174, 115, 0.6); border-radius: 4px; color: var(--g2-gold-2);
  font: 700 11px/1.2 var(--g2-font); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; white-space: nowrap;
}
#app.g2 span.pill.s-won.sel, #app.g2 .ctag.t-lead { color: var(--g2-ok); border-color: var(--g2-ok); background: none; }
#app.g2 span.pill.s-lost.sel { color: #fff; background: var(--g2-red-ui); border-color: var(--g2-red-ui); }
#app.g2 span.pill.s-contacted.sel { color: var(--g2-gold-2); border-color: var(--g2-gold); }
#app.g2 .ctag.t-missed { color: var(--g2-text); border-color: var(--g2-field-line); }

/* 7. BUTTONS: a .ts-btn with no variant (or the old .btn.small) was a bare link in browser blue on a
   plate; a pressed toggle (Monthly | Yearly) looked the same as the one beside it. */
#app.g2 :where(.ts-btn:not(.primary):not(.quiet):not(.danger)) {
  color: var(--g2-gold-2); border: 1.5px solid rgba(217, 174, 115, 0.6); background: var(--g2-field); text-decoration: none;
}
#app.g2 .ts-btn.quiet:is([aria-pressed="true"], .is-on) {
  color: #fff; border-color: rgba(217, 174, 115, 0.85);
  background: linear-gradient(180deg, #9e0c0d, #760000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
#app.g2 .btn.small { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; }
#app.g2 .ts-link { color: var(--g2-gold-2); font-weight: 600; }

/* 8. CHECKBOXES: the browser's own grey box sat on the plates (quote "Materials", the testimonial
   consent). Same box as I agree on the sign-up flow. :where keeps it weaker than any sized rule. */
#app.g2 :where(input[type="checkbox"]:not(.g2-switch > input):not(.os-chk > input)) {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; cursor: pointer;
  border-radius: 6px; border: 1.5px solid rgba(217, 174, 115, 0.75); background: var(--g2-well); vertical-align: middle;
}
#app.g2 :where(input[type="checkbox"]:not(.g2-switch > input):not(.os-chk > input):checked) {
  border-color: rgba(217, 174, 115, 0.9);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat,
    linear-gradient(180deg, #9e0c0d, #760000);
}
#app.g2 :where(input[type="checkbox"]:not(.g2-switch > input):not(.os-chk > input)):focus-visible { outline: 2px solid var(--g2-gold); outline-offset: 2px; }
#app.g2 :where(input[type="checkbox"]:not(.g2-switch > input):not(.os-chk > input)):disabled { opacity: .5; cursor: default; }

/* 9. BILLING: the plan plate reads top-down like a receipt; the invoices sit in one plate. */
#app.g2 .bill-none .g2-intro + .g2-intro { margin-top: 8px; }
#app.g2 .bill-acts { margin-top: 16px; }
#app.g2 .bill-warn { border-color: var(--g2-red-ui); }
#app.g2 .bill-warn .g2-h { color: var(--g2-strong); }
#app.g2 .bill-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#app.g2 .bill-plan-name { font-size: 17px; font-weight: 700; color: var(--g2-strong); min-width: 0; overflow-wrap: anywhere; }
#app.g2 .bill-amount { font-size: 36px; font-weight: 800; color: var(--g2-strong); margin: 10px 0 12px; font-variant-numeric: tabular-nums; }
#app.g2 .bill-per { color: var(--g2-muted); font-size: 15px; font-weight: 500; }
#app.g2 .bill-facts { border-top: 1px solid var(--line-2); padding-top: 12px; gap: 8px; }
#app.g2 .bill-fact { font-size: 15px; line-height: 1.4; }
#app.g2 .bill-fact .k { color: var(--g2-gold); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; flex: 0 0 104px; padding-top: 2px; }
#app.g2 .bill-fact .v { color: var(--g2-text); min-width: 0; }
#app.g2 .usage-card .row.between { flex-wrap: nowrap; }
#app.g2 .usage-card strong { color: var(--g2-strong); font-size: 16px; }
#app.g2 .usage-card .usage-count { color: var(--g2-gold-2); }
#app.g2 .usage-bar { background: rgba(0, 0, 0, 0.45); height: 6px; margin: 12px 0 10px; }
html[data-ts-theme="light"] #app.g2 .usage-bar { background: rgba(0, 0, 0, 0.12); }
#app.g2 .usage-fill { background: linear-gradient(90deg, #b48a4f, #f1d79f); }
#app.g2 .usage-bar.over .usage-fill { background: var(--g2-red-ui); }
#app.g2 .usage-note { color: var(--g2-muted); font-size: 14px; line-height: 1.45; }
#app.g2 .bill-invoices { padding: 6px 22px; }
#app.g2 .bill-invoices > .bill-inv-row { position: relative; z-index: 4; }
#app.g2 .bill-inv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 14px 0; border-bottom-color: var(--line-2); }
#app.g2 .bill-inv-main { display: grid; gap: 5px; min-width: 0; }
#app.g2 .bill-inv-no { color: var(--g2-strong); font-size: 15.5px; overflow-wrap: anywhere; }
#app.g2 .bill-inv-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#app.g2 .bill-inv-sub .ctag { margin: 0; }
#app.g2 .bill-inv-date { margin: 0; font-size: 13.5px; color: var(--g2-muted); }
#app.g2 .bill-inv-amt { color: var(--g2-strong); font-size: 15.5px; }

/* 10. PRODUCTS: the chosen website build was outlined in --brand, which g2 sets to black, so nothing
   showed which one was picked; the How it works explainer's toggle was the old white capsule. */
#app.g2 .pr-tile-head h2 { color: var(--g2-strong); }
#app.g2 .pr-price, #app.g2 .pr-ask { color: var(--g2-strong); }
#app.g2 .pr-live { color: var(--g2-gold-2); border-color: rgba(217, 174, 115, 0.6); }
#app.g2 .pr-build { border: 1.5px solid var(--g2-field-line); background: var(--g2-field); color: var(--g2-text); border-radius: 12px; padding: 12px; }
#app.g2 .pr-build.is-on { border-color: rgba(217, 174, 115, 0.9); outline: 0; background: var(--g2-oxide-2); }
html[data-ts-theme="light"] #app.g2 .pr-build.is-on { background: #fbf3f0; border-color: rgba(138, 90, 34, 0.8); }
#app.g2 .pr-build-name { color: var(--g2-strong); }
#app.g2 .pr-build-what, #app.g2 .pr-build-days { opacity: 1; color: var(--g2-muted); }
#app.g2 .pr-builds .ts-note b { color: var(--g2-gold); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
#app.g2 .pr-how-mode { background: var(--g2-well); border: 1px solid var(--g2-field-line); border-radius: 10px; padding: 3px; gap: 3px; }
#app.g2 .pr-how-btn { background: none; color: var(--g2-muted); border: 0; border-radius: 8px; min-height: 40px; padding: 0 16px; font: 600 14px var(--g2-font); }
#app.g2 .pr-how-btn.sel { color: #fff; background: linear-gradient(180deg, #9e0c0d, #760000); box-shadow: inset 0 0 0 1px rgba(217, 174, 115, 0.7); }
#app.g2 .pr-how li, #app.g2 .pr-how-sec h4 { color: var(--g2-text); }

/* 11. Connections: the hub's rows sat on bare black between plates; the hub is one plate. */
#app.g2 .ts-plane.g2-list.conn-hub {
  display: block; padding: 6px 22px; overflow: hidden; border: 1px solid var(--g2-edge);
  background:
    var(--g2-grain),
    linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, var(--g2-steel-1), var(--g2-steel-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.6), var(--g2-shadow);
}
html[data-ts-theme="light"] #app.g2 .ts-plane.g2-list.conn-hub { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.06), var(--g2-shadow); }
#app.g2 .ts-plane.g2-list.conn-hub::after { display: block; }
#app.g2 .conn-hub > .conn-row { position: relative; z-index: 4; padding: 16px 0; }
#app.g2 .conn-hub > .conn-row + .conn-row { border-top: 1px solid var(--line-2); }
#app.g2 .gbp-card .ts-prose b { color: var(--g2-strong); }

/* 12. Quotes: Templates and kits is a fold with no sign it opens; an empty photo strip squeezed its
   sentence into one narrow tile, a word a line. */
#app.g2 .g2-q-lib summary { list-style: none; justify-content: space-between; gap: 12px; }
#app.g2 .g2-q-lib summary::-webkit-details-marker { display: none; }
#app.g2 .g2-q-lib summary::after {
  content: ''; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--g2-gold-2); border-bottom: 2px solid var(--g2-gold-2); transform: rotate(45deg) translateY(-3px);
  transition: transform .2s ease;
}
#app.g2 .g2-q-lib[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
#app.g2 .g2-q-photos > .ts-empty { grid-column: 1 / -1; padding: 14px; text-align: left; background: var(--g2-well); border: 1px dashed var(--g2-field-line); border-radius: 10px; }

/* 13. My receptionist's How it works sits on a plate like the rest of the screen. */
#app.g2 .pr-how ul { color: var(--g2-text); }
/* two buttons side by side are one height (a primary is 50px, a quiet one 44px: Update card | Cancel plan) */
#app.g2 .ts-btn-row > .ts-btn { height: auto; min-height: 48px; }

/* 14. STATUS COLOURS THAT g2 NEVER RE-TOKENED: --danger is the brand's #8B0000, readable on white and
   unreadable as text on g2's black ("Needs you now" on a lead measured under 2:1). Dark gets the lifted
   red every other g2 warning already uses; light keeps the originals. */
#app.g2 { --danger: #e06666; --destructive: #e06666; --quoted: #e8c48f; --contacted: #a6a6a6; }
html[data-ts-theme="light"] #app.g2 { --danger: #8b0000; --destructive: #b22222; --quoted: #8a5a00; --contacted: #5b6670; }

/* 15. The lead's five stages: three a line on a phone, every cell the same width, instead of four and
   a lone stretched "didn't go ahead". */
@media (max-width: 520px) {
  #app.g2 #statusrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app.g2 #statusrow .ts-pill { padding: 0 4px; }
}
/* the consent tick on Products draws its own 18px box inside a 44px tap target on a phone: same colours */
#app.g2 .os-chk { color: var(--g2-text); font-size: 15px; line-height: 1.4; }
#app.g2 .os-chk input[type="checkbox"] { accent-color: #9e0c0d; }
#app.g2 .os-chk input[type="checkbox"]::before { border-color: rgba(217, 174, 115, 0.75); border-radius: 5px; background: var(--g2-well); }
#app.g2 .os-chk input[type="checkbox"]:checked::before { background: linear-gradient(180deg, #9e0c0d, #760000); border-color: rgba(217, 174, 115, 0.9); }

/* 16. The setup questions' choice pills (sign-up AND Settings > Business hours, which reuses them): the
   chosen ones were a white outline, the same weight as the rest; chosen is the g2 red, like every pill. */
#app.g2 .qz-pills .pill.qz-big, #app.g2 .pill-row .pill.wiz-x {
  background: var(--g2-field); border: 1.5px solid var(--g2-field-line); color: var(--g2-text); border-radius: 12px; outline: 0;
}
#app.g2 .ts-screen .qz-pills .pill.qz-big.sel, #app.g2 .qz-pills .pill.qz-big.sel {
  color: #fff; border-color: rgba(217, 174, 115, 0.85); outline: 0;
  background: linear-gradient(180deg, #9e0c0d, #760000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* 17. The lead's call button: in light its phone disc took the light tint, so the white icon vanished;
   on a desktop hover the whole red button turned to that pale tint under white text. */
#app.g2 .ts-dial-ic { background: rgba(0, 0, 0, 0.35); }
#app.g2 a.ts-dial:hover { border-color: rgba(217, 174, 115, 0.9); background: linear-gradient(180deg, #a8110f, #7e0000); }
#app.g2 #pr-feature-host:not(:empty) + .ts-prose { margin-top: 16px; }

/* 18. THE TWO-PANE LEADS ON A DESKTOP: g2's main column cap (720px) out-ranked the split view's own
   "no cap", so at 1440 the list and the open lead were squeezed into 720px and the lead read a word a
   line. The split host takes the window again; its detail pane keeps a readable measure. */
@media (min-width: 900px) {
  #app.g2 main.split-host { max-width: none; padding: 0; }
  #app.g2 .split { height: calc(100vh - 64px); }
  #app.g2 .split > .pane { padding: 8px 18px 32px; }
  #app.g2 .split > .detail { background: var(--bg); padding: 8px 32px 48px; }
  #app.g2 .split > .detail > * { max-width: 720px; margin-left: auto; margin-right: auto; }
}
#app.g2 #pl-getapp .ts-prose + .ts-prose { margin-top: 10px; }
/* the Needs chasing rows sat 4px from the plate's edge, under its rivets */
#app.g2 .ts-plane > .g2-chase { padding: 14px 22px; position: relative; z-index: 4; }
/* a single action alone on a plate (Send it again) is full width like every other one */
#app.g2 .g2-pad > .ts-btn { width: 100%; }

/* 19. The toast and the undo bar hang off <body>, outside #app.g2, so a long message was a 999px-round
   blob in the old font. On a client screen they wear g2: Archivo, a squarer edge, a gold hairline, and
   room for a sentence on one or two lines. */
body:has(> #app.g2) #toast, body:has(> #app.g2) #snackbar {
  font-family: 'Archivo', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  background: #141414; color: #f2f2f2; border: 1px solid rgba(217, 174, 115, 0.5); border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55); line-height: 1.4;
}
body:has(> #app.g2) #toast { width: max-content; max-width: min(92vw, 440px); padding: 12px 16px; font-size: 14.5px; }
/* an empty list's sentence outside a plate: a quiet dashed well, not a flat grey slab */
#app.g2 .ts-empty:not(.ts-plane:not(.g2-list) .ts-empty):not(.g2-plate .ts-empty) {
  background: var(--g2-well); border: 1px dashed var(--g2-field-line); border-radius: 12px; color: var(--g2-muted);
}
#app.g2 .ts-empty b { color: var(--g2-strong); }
/* "All quiet" / "None urgent" under the count is good news, not an alarm: only a real urgent count is red */
#app.g2 .g2-hot.is-calm { color: var(--g2-muted); }

/* 20. Smaller faults the sweep found more than once */
/* a bare link in running text was browser blue ("Open the private page" on the website card) */
#app.g2 :where(.ts-prose, .ts-note, .g2-intro, .g2-fine, .pr-tile, .card, .ts-fval, .ts-field) a:not([class]) {
  color: var(--g2-gold-2); font-weight: 600; text-underline-offset: 2px;
}
/* a bold lead-in inside muted prose ("Your answers", "Your pages") read as dim grey, not as a heading */
#app.g2 :is(.pr-tile, .card) .ts-prose b { color: var(--g2-strong); }
/* the older form label is the same gold label as every g2 field */
#app.g2 .wiz-row-label { font: 600 12px/1.3 var(--g2-font); letter-spacing: .07em; text-transform: uppercase; color: var(--g2-gold); }
/* "Ring 02 ..." sat at the top of its button (a block, not a centred flex) */
#app.g2 .pr-tel { display: flex; align-items: center; justify-content: center; }
/* the getting-started NEXT tag was the dark accent red on a steel plate */
#app.g2 .gs-step.is-next .gs-state { color: var(--g2-gold-2); }
/* Products on a desktop: the old two-column grid (2fr | 1fr) inside g2's 720px column put the
   Receptionist + Website tile in a ~230px column, its build tiles a word a line. One column, like the phone. */
@media (min-width: 1024px) {
  #app.g2 .pr-grid { grid-template-columns: 1fr; }
  #app.g2 .pr-grid > #pr-rx { grid-row: auto; }
}