/* ============================================================================ * CS COMMAND-CENTER — SPACIOUS SHELL (redesign-0718-101 · 2026-07-19 s1) * * Token-driven, swappable shell for the /cs backend. Ports the approved * mockup-dashboard.html (260px sidebar · big stat cards · Untitled-UI table). * * SAFETY / NON-BREAKAGE CONTRACT * - Everything here is namespaced (--csx-* tokens, .csx-* / .cs-sidebar classes). * It never redefines a GLOBAL token (--bg/--ink/--line/…) so unconverted * views keep rendering exactly as before. * - Loads AFTER main.css, so its scoped overrides win on ties. * - Two themes via data-theme on : LIGHT (ground #f6f6f4) + DARK * (ground var(--dim-base), cream ink — the soft-graphite dim ladder lives * on :root in tokens.css). A future palette editor overrides ONE block. * - Unconverted /cs views still emit `.cs-main` (dark-only). While one is on * screen we PIN the shell tokens to dark (body:has(.cs-main)) so the sidebar * stays coherent with that view. The converted dashboard has NO `.cs-main`, * so it follows the light/dark toggle. * ==========================================================================*/ /* ───────────────────────── TOKENS · LIGHT (default) ─────────────────────── */ :root{ /* CS-PLAT-08 A2 (C2C 233 A2): no pill/"bean" buttons. --csx-r-pill is now * an ALIAS onto the chip rung so every badge/chip/button that referenced it * rounds with the card ladder; --csx-r-round is the only true circle. */ --csx-r-xs:4px; --csx-r-chip:8px; --csx-r-sm:10px; --csx-r-md:14px; --csx-r-lg:16px; --csx-r-btn:10px; --csx-r-round:999px; --csx-r-pill:var(--csx-r-chip); /* CS-PLAT-08 A3 (C2C 233 A3): dimmed paper, not white. Ground #ECEDEA, * card #F4F4F1, ink #1A1C1F — measured 15.50:1 ink-on-card, 14.53:1 * ink-on-ground (both clear the ≥7:1 Dom asked for). */ /* A3: the cockpit's own light surfaces ride the SAME two levers as the * global tokens (tokens.css --light-dim / --tint), so the dimmer and the * warm↔cool slider move the whole cockpit, not half of it. */ --csx-ground:var(--bg); --csx-surface:var(--bg-elevated); --csx-surface-2:color-mix(in srgb, var(--bg-elevated) 55%, #ffffff); --csx-surface-hover:var(--bg-hover); --csx-sidebar:var(--bg-elevated); /* Overlay rung — popovers, menus, drawers, modals. On LIGHT it is the * same white the card already uses (no change); on DARK it lifts one rung * above the card so a floating surface still reads over a filled page. */ --csx-overlay:color-mix(in srgb, var(--bg-elevated) 55%, #ffffff); --csx-ink:#1a1c1f; /* body text — never pure black · 15.50:1 on card */ --csx-ink-2:#5f6673; /* 5.24:1 on card (was #6b7280 = 4.39:1 on dimmed paper) */ --csx-ink-3:#676d78; /* 4.72:1 on card (was #9ca3af = 2.4:1) */ --csx-line:#dcddd8; --csx-line-2:#d2d3cd; --csx-field-border:#cdcec8; /* visible input/select border (light) — polish 07-20: firmer hit area */ --csx-lane:#e4e5e1; /* kanban column lane fill (light) */ --csx-nav-active:#e5e9e5; /* PRIMARY = RED #FF0016 (Dom 2026-08-22 — the orange this block was first * written for lasted a morning). Emerald/teal live on only as category chips * (--cat-*). -text is the paper-readable twin (#B0000F, 5.44:1 on the card); * the raw red as TEXT on paper does not clear AA and must not be used for it. */ --csx-accent:#FF0016; --csx-accent-ink:var(--brand-ink); /* white on red in light, dark ink in dark — follows tokens.css */ --csx-accent-hover:#D60012; --csx-accent-soft:color-mix(in srgb, #FF0016 8%, transparent); --csx-accent-text:#B0000F; /* Canonical status palette (Gemini fix 2026-07-20). Chip bg = colour @10% * alpha in LIGHT; text = a DARKENED shade of the status colour so every chip * clears 4.5:1 on its own tint (verified). Base = the pure status colour, * used only for dots/bars (non-text). */ /* CS-PLAT-08 A1: the status five now READ FROM the 16-chip palette * (tokens.css --cat-*), so category and status stay one system. */ --csx-st-green:var(--cat-green); --csx-st-green-bg:var(--cat-green-soft); --csx-st-green-tx:var(--cat-green); --csx-st-violet:var(--cat-lavender); --csx-st-violet-bg:var(--cat-lavender-soft); --csx-st-violet-tx:var(--cat-lavender); --csx-st-amber:var(--cat-red); --csx-st-amber-bg:var(--cat-red-soft); --csx-st-amber-tx:var(--cat-red); /* Dom 2026-08-23: one red for every alert/negative chip */ --csx-st-red:var(--cat-red); --csx-st-red-bg:var(--cat-red-soft); --csx-st-red-tx:var(--cat-red); --csx-st-slate:var(--cat-brown); --csx-st-slate-bg:var(--cat-brown-soft); --csx-st-slate-tx:var(--cat-brown); /* SOLID green fill for the never-miss surfaces (new-booking section + the * rail's NEW badge). --cat-green FLIPS to #00C853 in dark, where white ink * would sit at 1.9:1, so this pins the light twin #007E34 across BOTH themes * exactly the way --csx-accent pins #FF0016. White on it measures 4.99:1, and * white is the ink on every solid fill in this system (standing law). * Not a new colour: it is --cat-green's own light value, held still. */ --csx-st-green-fill:#007E34; /* Neutral service-chip / step surface — an ALPHA tint so it stays a visible * step over BOTH a resting row and a hovered row (no border needed). */ --csx-chip-step:rgba(26,26,26,.055); /* Tint 'a' used to be a blue. The hashed avatar palette is now neutrals + * the kept green and purple + red only (Dom 2026-08-22), so 'a' moved to * the neutral ladder — one step darker than 'd' so the two stay tellable. */ --csx-av-a-bg:#E5E5E5; --csx-av-a-tx:#404040; --csx-av-b-bg:#ece8fb; --csx-av-b-tx:#5a4bb8; --csx-av-c-bg:#e4f4ec; --csx-av-c-tx:#1f8b5b; --csx-av-d-bg:#F5F5F5; --csx-av-d-tx:#404040; --csx-av-e-bg:#FFB3BA; --csx-av-e-tx:#4D0006; --csx-shadow-card:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05); --csx-shadow-pop:0 16px 40px -12px rgba(16,24,40,.16); --csx-shadow-knob:0 1px 2px rgba(0,0,0,.3); /* toggle/switch knob — was a rogue inline shadow */ --csx-ring-mark:inset 0 0 0 1.5px rgba(10,31,20,.12); /* inner ring on the emerald brand-mark dot */ --csx-ease:cubic-bezier(.22,.61,.36,1); /* ── CS-PLAT-02 · the three button tiers (C2C 214 §03) ────────────────── * Butter = the ONE committing action on a screen (Create order, Release * invoice, Deliver). Bone = the main affirmative (Mark shot, Mark delivered, * Save). Dark = everything else. Emerald is NEVER a button colour; it stays * the site-design swatch + focus ring (--csx-accent, untouched above). * Butter and Bone are absolute values in both themes. The Dark tier is * theme-relative: on the dark cockpit it is the literal #181A18 from 214, on * the light theme it resolves to the neutral surface so the "quiet" tier * still reads as quiet. Dark values are set in the dark block below. */ --cso-butter:#f6e8a4; --cso-butter-hover:#fbf0bc; --cso-butter-ink:#33290a; --cso-bone:#e8e6dd; --cso-bone-hover:#f3f2ec; --cso-bone-ink:var(--cat-ink); --cso-dark:var(--csx-surface); --cso-dark-hover:var(--csx-surface-hover); --cso-dark-ink:var(--csx-ink); --cso-dark-line:var(--csx-line-2); /* Free-slot chip in the availability picker. */ --cso-slot-bg:var(--csx-surface); --cso-slot-line:var(--csx-field-border); } /* ───────────────────────── TOKENS · DARK ──────────────────────────────── * Applied when the toggle picks dark, AND pinned whenever an unconverted * (dark-only) /cs view is on screen so the shell never mixes light+dark. */ html[data-theme="dark"], body:has(.cs-main){ /* SOFT-GRAPHITE DIM (Dom 2026-08-19 — "total black is heavy on my eyes"). * The five surfaces now resolve to the shared dim ladder in tokens.css * instead of the old #030303/#0a0a0b near-blacks. Semantics are unchanged: * ground < sidebar < surface < surface-2 < surface-hover, same order, same * roles — only the scale moved up. The cream ink is UNTOUCHED: it is an * alpha over the surface, so it re-resolves on the new ground and still * clears 13.3:1 / 6.6:1 / 3.5:1 (was 15.7 / 7.2 / 3.5 on black). */ /* A3: the warm↔cool lever rides on top of the dim ladder — same rungs, * hue only (tokens.css --tint). */ --csx-ground:color-mix(in srgb, #131720 calc(var(--tint-cool) * 100%), color-mix(in srgb, #1b1a17 calc(var(--tint-warm) * 100%), var(--dim-base))); --csx-surface:color-mix(in srgb, #1a1f29 calc(var(--tint-cool) * 100%), color-mix(in srgb, #222220 calc(var(--tint-warm) * 100%), var(--dim-card))); --csx-surface-2:color-mix(in srgb, #1e232e calc(var(--tint-cool) * 100%), color-mix(in srgb, #262625 calc(var(--tint-warm) * 100%), var(--dim-card-2))); --csx-surface-hover:color-mix(in srgb, #212732 calc(var(--tint-cool) * 100%), color-mix(in srgb, #292a29 calc(var(--tint-warm) * 100%), var(--dim-hover))); --csx-sidebar:color-mix(in srgb, #171c26 calc(var(--tint-cool) * 100%), color-mix(in srgb, #1f1f1d calc(var(--tint-warm) * 100%), var(--dim-low))); --csx-overlay:color-mix(in srgb, #202631 calc(var(--tint-cool) * 100%), color-mix(in srgb, #282928 calc(var(--tint-warm) * 100%), var(--dim-over))); --csx-ink:rgba(255,253,244,.90); /* cream — never pure white */ --csx-ink-2:rgba(255,253,244,.60); --csx-ink-3:rgba(255,253,244,.38); /* Hairlines +1 notch: a cream alpha loses relative punch as the ground * lifts, and on dim the surfaces already separate by value — the line is a * hint, not the structure. Stays inside the .07–.10 band. */ --csx-line:rgba(255,253,244,.075); --csx-line-2:rgba(255,253,244,.12); --csx-field-border:rgba(255,253,244,.20); /* visible input/select border (dark) — polish 07-20: firmer hit area */ --csx-lane:rgba(255,253,244,.04); /* kanban column lane fill (dark) */ --csx-nav-active:rgba(255,253,244,.06); --csx-accent-hover:#D60012; --csx-accent-soft:color-mix(in srgb, #FF0016 8%, transparent); --csx-accent-text:#D60012; /* 5.77:1 on --dim-card */ /* Same canonical hues; chip bg = colour @15% alpha, text = a brightened shade * that clears 4.5:1 on the near-black tint (verified). Dots/bars use the base. */ /* Dark twins come from --cat-* (tokens.css html[data-theme="dark"]); the * aliases above resolve per theme, so nothing needs re-declaring here. */ --csx-chip-step:rgba(255,253,244,.07); --csx-av-a-bg:rgba(255,255,255,.10); --csx-av-a-tx:#D4D4D4; /* neutral, was blue */ --csx-av-b-bg:rgba(123,104,217,.20);--csx-av-b-tx:#c0b4f2; --csx-av-c-bg:rgba(23,178,106,.18); --csx-av-c-tx:#7fdcb0; --csx-av-d-bg:rgba(255,255,255,.10); --csx-av-d-tx:#D4D4D4; --csx-av-e-bg:rgba(255,77,94,.22); --csx-av-e-tx:#FFB3BA; /* Dim needs less shadow than black — the card already stands off the ground * by value, so the drop only places it. Roughly −30%. */ --csx-shadow-card:0 1px 2px rgba(0,0,0,.28); --csx-shadow-pop:0 24px 60px -24px rgba(0,0,0,.5); --csx-shadow-knob:0 1px 2px rgba(0,0,0,.3); /* CS-PLAT-02 · Dark tier. 214 §03 set it to #181A18 against a #0a0a0b card * — a +14 RGB lift, the quiet button reading as a raised graphite. Held at * the SAME lift over the new card (#1C1F24 +14 → #2A2E34) so the tier keeps * its relationship; on the old scale it would now sit BELOW the card and * read as a hole. Butter + Bone are absolute and inherited unchanged. */ --cso-dark:#2a2e34; --cso-dark-hover:#33383f; --cso-dark-ink:rgba(255,253,244,.90); --cso-dark-line:rgba(240,240,230,.16); } /* ───────────────────────── SHELL LAYOUT ───────────────────────────────── * The sidebar is prepended to as #app-nav.cs-sidebar (so the router's * existing `#app-nav` cleanup removes it on route change). It is fixed; content * (.app-shell wrapping #view) is cleared with a left inset. Any /cs page * therefore inherits the sidebar with zero per-view layout code. */ body:has(.cs-sidebar){ background:var(--csx-ground); } body:has(#app-nav.cs-sidebar) .app-shell{ padding-left:260px; } body:has(.demo-banner) .cs-sidebar{ top:38px; height:calc(100vh - 38px); } .cs-sidebar{ position:fixed; left:0; top:0; z-index:60; width:260px; height:100vh; overflow-y:auto; overflow-x:hidden; background:var(--csx-sidebar); border-right:1px solid var(--csx-line); display:flex; flex-direction:column; padding:22px 16px 22px; font-family:var(--font-sans); /* A scroll container that ends on a hard line slices whatever is crossing it. * Real bottom padding + a short fade at both scroll edges, so a row leaving * the viewport dissolves instead of being cut in half (Dom 2026-08-22). */ scrollbar-width:thin; mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); transition:background-color .15s var(--csx-ease), border-color .15s var(--csx-ease); } /* A mask makes the whole rail its own stacking/painting context, which is fine * here — nothing inside it is meant to escape (the display popover is * portalled to body precisely because of that). */ .csx-ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;flex:none} .csx-ico-sm{width:16px;height:16px;stroke-width:1.9} .csx-ico-18{width:18px;height:18px} .csx-num{font-variant-numeric:tabular-nums} /* brand */ /* LOGO LAW (Dom 2026-08-29): the cockpit rail wears the REAL logo, not the words "Capital Shots" set in type. Stacked like the agent rail — mark on top, the product line under it — because a 260px rail cannot hold a 5:1 lockup and a label side by side. .csx-mark/.csx-dot rules are left in place (nothing renders them now) rather than deleted in a brand-only sweep. */ .csx-brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:6px 8px 4px;margin-bottom:20px;text-decoration:none} .csx-brand .csx-mark{width:30px;height:30px;border-radius:9px;background:var(--csx-ground);display:grid;place-items:center;flex:none;border:1px solid var(--csx-line)} .csx-brand .csx-dot{width:13px;height:13px;border-radius:50%;background:var(--csx-accent);box-shadow:var(--csx-ring-mark)} .csx-brand .csx-wm{display:flex;flex-direction:column;line-height:1.05} .csx-brand .csx-wm b{font-size:calc(15px * var(--text-scale, 1));font-weight:700;letter-spacing:-.03em;color:var(--csx-ink)} .csx-brand .csx-wm span{font-size:calc(13px * var(--text-scale, 1));font-weight:500;color:var(--csx-ink-3);letter-spacing:0} /* search */ .csx-search{position:relative;margin-bottom:22px} .csx-search .csx-si{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--csx-ink-3)} .csx-search input{ width:100%;height:40px;padding:0 40px 0 38px;border-radius:var(--csx-r-btn); background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink); font-family:inherit;font-size:calc(13.5px * var(--text-scale, 1));letter-spacing:-.01em; } .csx-search input::placeholder{color:var(--csx-ink-3)} .csx-search input:focus{outline:none;border-color:var(--csx-line-2);background:var(--csx-surface)} .csx-search kbd{ position:absolute;right:11px;top:50%;transform:translateY(-50%); font-family:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3); width:20px;height:20px;display:grid;place-items:center; border:1px solid var(--csx-line);border-radius:6px;background:var(--csx-surface); } /* nav */ .csx-nav{display:flex;flex-direction:column;gap:2px;flex:1} .csx-nav-item{ position:relative;display:flex;align-items:center;gap:12px; padding:11px 12px;border-radius:var(--csx-r-btn); color:var(--csx-ink-2);font-size:calc(14px * var(--text-scale, 1));font-weight:500;letter-spacing:-.01em; text-decoration:none; transition:background-color .12s var(--csx-ease), color .12s var(--csx-ease); } .csx-nav-item .csx-ico{color:var(--csx-ink-3);transform:translateY(-.5px)} .csx-nav-item:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csx-nav-item:hover .csx-ico{color:var(--csx-ink-2)} .csx-nav-item.is-active{background:var(--csx-nav-active);color:var(--csx-ink);font-weight:600} .csx-nav-item.is-active .csx-ico{color:var(--csx-ink)} .csx-nav-item.is-active::before{ content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%); width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--csx-accent); } /* Count badges are BUTTER (Dom 2026-08-23): the washed yellow of the booking * cards' "Photos"/Bestseller pill on capitalshots.ca/book (#FFF083 on #0F1111), * now one token. Before this they were a grey chip except Comms, which the * 08-23 one-red repoint had turned pink — two looks for one component. This is * the ONLY yellow in the product, and it lives on this component alone. * Geometry is untouched. */ .csx-count{ font-size:calc(13px * var(--text-scale, 1));font-weight:700; background:var(--accent-butter);color:var(--accent-butter-ink);border:0; min-width:22px;height:20px;padding:0 6px;border-radius:var(--csx-r-pill); display:grid;place-items:center; } /* On a rail row the badge is pushed to the far edge; that is layout, not look. */ .csx-nav-item .csx-count{margin-left:auto} /* Emerald "new item" dot — pulses gently so a brand-new order/lead catches the * eye on the Bookings / Inbox nav. Sits before the count (or on its own). */ .csx-nav-item .csx-newdot{ margin-left:auto;width:8px;height:8px;border-radius:50%;flex:none; background:var(--csx-accent);box-shadow:0 0 0 3px var(--csx-accent-soft); animation:csx-pulse 2s var(--csx-ease) infinite; } .csx-nav-item .csx-newdot + .csx-count{margin-left:8px} @keyframes csx-pulse{0%,100%{opacity:1}50%{opacity:.32}} @media (prefers-reduced-motion:reduce){ .csx-nav-item .csx-newdot{animation:none} } /* Dom 2026-08-29: "Not a dot - please create a small green banner NEW". The rail * signal is now a WORD, on the SAME count the dot read (navCounts newBookings / * newLeads) — presentation swap only, no predicate change. Solid green + white * ink, one line, nowrap (ruling 20b), --csx-r-chip so it is never a bean * (ruling 21). The .csx-newdot rules above are left in place for any surface * still emitting one; nothing was deleted. */ .csx-nav-item .csx-newbadge{ margin-left:auto;flex:none; background:var(--csx-st-green-fill);color:#FFFFFF; font-size:calc(11px * var(--text-scale, 1));font-weight:700;letter-spacing:.03em; height:20px;padding:0 7px;border-radius:var(--csx-r-chip); display:grid;place-items:center;white-space:nowrap; } .csx-nav-item .csx-newbadge + .csx-count{margin-left:8px} /* sidebar footer — theme toggle + account chip */ .csx-side-foot{display:flex;flex-direction:column;gap:10px;margin-top:12px} .csx-acct{ display:flex;align-items:center;gap:11px;padding:10px; border-radius:var(--csx-r-btn);border:1px solid var(--csx-line);background:var(--csx-surface-2); text-decoration:none; } .csx-acct:hover{background:var(--csx-surface-hover)} .csx-acct .csx-av{width:34px;height:34px;border-radius:50%;background:var(--csx-av-c-bg);color:var(--csx-av-c-tx); display:grid;place-items:center;font-size:calc(13px * var(--text-scale, 1));font-weight:700;flex:none;letter-spacing:0} .csx-acct .csx-who{display:flex;flex-direction:column;line-height:1.2;min-width:0} .csx-acct .csx-who b{font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;letter-spacing:-.01em;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csx-acct .csx-who span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csx-acct .csx-chev{margin-left:auto;color:var(--csx-ink-3)} /* segmented light/dark toggle (shared by sidebar + dashboard header) */ .csx-seg{display:flex;gap:3px;padding:3px;background:var(--csx-surface-2);border:1px solid var(--csx-line);border-radius:var(--csx-r-btn)} .csx-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px 8px;border-radius:8px; font-family:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);letter-spacing:-.01em;cursor:pointer;border:0;background:none;flex:1} .csx-seg button .csx-ico-sm{color:var(--csx-ink-3)} .csx-seg button.on{background:var(--csx-surface);color:var(--csx-ink);box-shadow:var(--csx-shadow-card)} .csx-seg button.on .csx-ico-sm{color:var(--csx-ink)} html[data-theme="dark"] .csx-seg button.on, body:has(.cs-main) .csx-seg button.on{background:var(--csx-surface-hover)} .csx-side-foot .csx-seg button{padding:6px 8px;font-size:calc(13px * var(--text-scale, 1))} /* ───────────────────────── MAIN CONTENT (dashboard) ───────────────────── * Rendered into #view. Max-width 1200, generous 40px padding — the mockup's * .main .wrap. Only the converted dashboard uses these classes. */ /* CS-PLAT-08 A10 (Dom 2026-08-22: "too large margins"): gutters come down a * rung (32→24) and the column is allowed to use a wide screen (1200→1400), * which is what was pushing the invoices table into a scroll at 1280. */ .csx-wrap{max-width:1400px;margin:0 auto;padding:24px 24px 40px;color:var(--csx-ink);font-family:var(--font-sans)} .csx-wrap *{box-sizing:border-box} /* header row */ .csx-head{display:flex;align-items:flex-start;gap:24px;margin-bottom:20px} .csx-crumb{display:flex;align-items:center;gap:7px;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);font-weight:500;margin-bottom:8px} .csx-crumb .csx-sep{opacity:.6} .csx-title{margin:0;font-size:calc(24px * var(--text-scale, 1));font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--csx-ink)} .csx-hi{margin:8px 0 0;font-size:calc(14px * var(--text-scale, 1));color:var(--csx-ink-2);line-height:1.5} .csx-hi .csx-wx{color:var(--csx-ink-3)} .csx-actions{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0;padding-top:2px} .csx-icobtn{width:40px;height:40px;border-radius:var(--csx-r-btn);border:1px solid var(--csx-line);background:var(--csx-surface); color:var(--csx-ink-2);display:grid;place-items:center;position:relative;cursor:pointer;text-decoration:none} .csx-icobtn:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csx-icobtn .csx-badge{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--csx-st-red);border:2px solid var(--csx-surface)} /* SITE STYLE RULING 20b (Dom 2026-08-29): no two-line button labels anywhere. The guard sits on the family so a new cockpit call site cannot reintroduce a wrapping label; when a label stops fitting, shorten it or widen the control. See STYLEBOARD.md. */ .csx-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 11px;border-radius:var(--csx-r-btn); font-family:inherit;font-size:calc(14px * var(--text-scale, 1));font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap; border:1px solid var(--csx-line-2);background:var(--csx-surface);color:var(--csx-ink);text-decoration:none} .csx-btn:hover{background:var(--csx-surface-hover)} /* CS-PLAT-09/listings-ux 08-23 — text AND icons on a solid red button are WHITE in both themes. --csx-accent-ink follows --brand-ink, which flips dark in dark mode; that is correct for tinted chips, not for this fill. */ .csx-btn-primary{background:var(--csx-accent);color:#FFFFFF;border-color:var(--csx-accent)} .csx-btn-primary:hover{background:var(--csx-accent-hover);border-color:var(--csx-accent-hover);color:#FFFFFF} .csx-btn-primary .csx-ico-sm,.csx-btn-primary svg{color:#FFFFFF} /* stat row */ .csx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:40px} /* A10: min-width:0 so a long number can never push a grid cell wider than its * track (that is what clipped "Outstanding $1,42…"); tabular figures so the * column of amounts lines up and its width stops depending on the digits. */ .csx-stat{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);padding:20px;box-shadow:var(--csx-shadow-card);min-width:0} .csx-stat .csx-lbl{font-size:calc(13px * var(--text-scale, 1));font-weight:500;color:var(--csx-ink-2);margin-bottom:10px} .csx-stat .csx-val{font-size:calc(34px * var(--text-scale, 1));font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--csx-ink); font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere} .csx-stat .csx-foot{display:flex;align-items:center;gap:9px;margin-top:14px;min-height:22px} .csx-stat .csx-cap{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2)} /* CS-PLAT-09/fiscal-toggle — a stat card whose label line carries a control (the Collected tile's scope switch). The switch is the shell's own .csx-seg, one size down: no new shape, no new colour, and it reads as quiet chrome beside the label rather than as a second heading. */ .csx-stat .csx-lbl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .csc-scopeseg{padding:2px;gap:2px;border-radius:8px} .csc-scopeseg button{flex:none;padding:3px 8px 4px;font-size:calc(12px * var(--text-scale, 1));letter-spacing:0;font-weight:600} .csx-stat .csx-cap .csx-link{font-size:inherit} .csx-trend{display:inline-flex;align-items:center;gap:4px;font-size:calc(13px * var(--text-scale, 1));font-weight:600;padding:3px 9px 4px;border-radius:var(--csx-r-pill);letter-spacing:-.01em} .csx-trend.up{background:var(--csx-accent-soft);color:var(--csx-accent-text)} .csx-trend .csx-ico-sm{width:13px;height:13px;stroke-width:2.4} .csx-mini-dot{width:8px;height:8px;border-radius:50%;flex:none} /* section header */ .csx-sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px} .csx-sec-head h2{margin:0;font-size:calc(16px * var(--text-scale, 1));font-weight:500;letter-spacing:-.015em;color:var(--csx-ink)} .csx-sec-head .csx-sub{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csx-sec-head .csx-link{margin-left:auto;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2);display:inline-flex;align-items:center;gap:5px;text-decoration:none} .csx-sec-head .csx-link:hover{color:var(--csx-ink)} /* table */ .csx-tbl-wrap{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);overflow:hidden;margin-bottom:28px} /* CS-PLAT-08 A10 (Dom's /cs/invoices screenshot): the table was 1196px inside a * 943px card at 1280, so Status and the Mark-paid button lived off the right * edge behind a scrollbar he had to find. The middle of the table still scrolls * — that is the honest answer for nine columns — but the LAST column is pinned * to the right edge so the action is never the thing that disappears. * `.is-scrollable` is set by components/table-scroll.js only when the table * actually overflows, so a table that fits shows no seam at all. */ .csx-tbl-scroll{overflow-x:auto} .csx-tbl-scroll.is-scrollable .csx-table th:last-child, .csx-tbl-scroll.is-scrollable .csx-table td:last-child{ position:sticky;right:0;z-index:1;background:var(--csx-surface); } .csx-tbl-scroll.is-scrollable .csx-table thead th:last-child{background:var(--csx-surface-2);z-index:2} .csx-tbl-scroll.is-scrollable tbody tr:hover td:last-child{background:var(--csx-surface-hover)} /* The seam only appears while there is something hidden under it. */ .csx-tbl-scroll.is-scrollable:not(.is-scrolled-end) .csx-table th:last-child, .csx-tbl-scroll.is-scrollable:not(.is-scrolled-end) .csx-table td:last-child{ box-shadow:-10px 0 10px -10px rgba(0,0,0,.45); } /* min-width kept modest so the recent-bookings + clients tables FIT desktop * (no forced scroll at 1280/1440); the scroll wrapper is only a narrow-screen * safety net. The wider 9-column invoices table is bumped up separately. */ .csx-table{width:100%;border-collapse:collapse;min-width:640px} /* CS-PLAT-09/table-sort (Dom 2026-08-23 screenshot: header read "Stat" and the * status chip was sliced to ~40px on every row). * * Cause: min-width 820 let the browser squeeze the auto-layout columns until * the table still overflowed its 1202px card at 1512 — and once it overflows, * `.is-scrollable` pins the Actions column with `position:sticky`, which then * PAINTS OVER its left neighbour. The neighbour is Status. So Status was not * narrow, it was covered. * * Fix, measured not guessed — the natural per-column content widths of the * live 84-row list are 102/373/254/100/100/95/97/100/120 = 1340px. Declare a * 1020px minimum (every column's real floor, with a deliberately generous * Status track) and hand the columns fixed tracks, so the two free-text * columns (Agent, Property) truncate with an ellipsis instead of pushing the * table wider. * 1512 → card 1202, table 1202: no overflow, so no sticky column at all. * 1280 → card 970, table 1020: the middle scrolls by 50px (nine columns * genuinely do not fit, and money is not allowed to be what shrinks), but * the Status track is wide enough that the pinned Actions column overlays * only its EMPTY tail — the chip itself stays visible at rest. */ #csi-table .csx-table{min-width:1020px;table-layout:fixed} #csi-table .csx-table th:nth-child(1),#csi-table .csx-table td:nth-child(1){width:10%} /* Invoice */ #csi-table .csx-table th:nth-child(2),#csi-table .csx-table td:nth-child(2){width:11.3%} /* Agent */ #csi-table .csx-table th:nth-child(3),#csi-table .csx-table td:nth-child(3){width:13%} /* Property */ #csi-table .csx-table th:nth-child(4),#csi-table .csx-table td:nth-child(4){width:9.8%} /* Issued */ #csi-table .csx-table th:nth-child(5),#csi-table .csx-table td:nth-child(5){width:9.8%} /* Due */ #csi-table .csx-table th:nth-child(6),#csi-table .csx-table td:nth-child(6){width:9.4%} /* Total */ #csi-table .csx-table th:nth-child(7),#csi-table .csx-table td:nth-child(7){width:9.6%} /* Email */ #csi-table .csx-table th:nth-child(8),#csi-table .csx-table td:nth-child(8){width:14.9%} /* Status */ #csi-table .csx-table th:nth-child(9),#csi-table .csx-table td:nth-child(9){width:12.2%} /* Actions */ /* Only the free-text cells truncate. The chip columns are sized to hold their * longest label, so nothing in them is ever cut. */ #csi-table .csx-table td:nth-child(1), #csi-table .csx-table td:nth-child(2), #csi-table .csx-table td:nth-child(3), #csi-table .csx-table td:nth-child(4), #csi-table .csx-table td:nth-child(5){overflow:hidden;text-overflow:ellipsis} #csi-table .csi-idcell b,#csi-table .csi-idcell span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #csi-table .csb-an b,#csi-table .csb-an span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* The header buttons sit flush with the column edge, exactly where the plain * header text used to start (the button's own 6px padding is pulled back). */ #csi-table .csx-table th .cso-sort{max-width:100%;margin-left:-6px} #csi-table .csx-table th.right .cso-sort{margin-left:auto;margin-right:-6px} .csx-table thead th{ text-align:left;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3); padding:12px 14px;border-bottom:1px solid var(--csx-line);background:var(--csx-surface-2); white-space:nowrap;letter-spacing:.01em; } .csx-table th.right,.csx-table td.right{text-align:right} .csx-table tbody td{padding:11px 14px;border-bottom:1px solid var(--csx-line);vertical-align:middle; font-size:calc(14px * var(--text-scale, 1));line-height:1.5} /* A3 floor (Dom: "my eyes are 50 years old") */ .csx-table tbody tr:last-child td{border-bottom:0} .csx-table tbody tr{cursor:pointer;transition:background-color .12s var(--csx-ease)} .csx-table tbody tr:hover{background:var(--csx-surface-hover)} .csx-table td:first-child,.csx-table th:first-child{padding-left:18px} .csx-table td:last-child,.csx-table th:last-child{padding-right:18px} .csx-prop-wrap{display:flex;align-items:center;gap:14px;min-width:0} .csx-prop-thumb{width:80px;height:60px;border-radius:8px;overflow:hidden;flex:none;background:var(--csx-chip-step);display:grid;place-items:center} .csx-prop-thumb img{width:100%;height:100%;object-fit:cover;display:block} .csx-prop{min-width:0} .csx-prop b{display:block;font-size:calc(14px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csx-prop span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csx-agent{display:flex;align-items:center;gap:11px} .csx-agent .csx-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:calc(13px * var(--text-scale, 1));font-weight:700;flex:none;letter-spacing:0} .csx-agent .csx-nm b{display:block;font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);white-space:nowrap} .csx-agent .csx-nm span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:1px;white-space:nowrap} .csx-av-a{background:var(--csx-av-a-bg);color:var(--csx-av-a-tx)} .csx-av-b{background:var(--csx-av-b-bg);color:var(--csx-av-b-tx)} .csx-av-c{background:var(--csx-av-c-bg);color:var(--csx-av-c-tx)} .csx-av-d{background:var(--csx-av-d-bg);color:var(--csx-av-d-tx)} .csx-av-e{background:var(--csx-av-e-bg);color:var(--csx-av-e-tx)} .csx-pkg{display:inline-block;max-width:100%;font-size:calc(13.5px * var(--text-scale, 1));color:var(--csx-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle} /* agent cell truncates cleanly inside a constrained column */ .csx-agent .csx-nm{min-width:0} .csx-agent .csx-nm b,.csx-agent .csx-nm span{overflow:hidden;text-overflow:ellipsis} /* Recent-bookings table (dashboard) uses a FIXED layout so it always fits its * card at desktop — long addresses/names/brokerages ellipsis instead of forcing * a horizontal scrollbar. The wider clients/invoices tables keep auto layout in * their own scroll container. */ .csx-recent{table-layout:fixed;min-width:0} .csx-recent th:nth-child(1),.csx-recent td:nth-child(1){width:32%} .csx-recent th:nth-child(2),.csx-recent td:nth-child(2){width:22%} .csx-recent th:nth-child(3),.csx-recent td:nth-child(3){width:16%} .csx-recent th:nth-child(4),.csx-recent td:nth-child(4){width:13%} .csx-recent th:nth-child(5),.csx-recent td:nth-child(5){width:9%} .csx-recent th:nth-child(6),.csx-recent td:nth-child(6){width:8%} .csx-recent td{overflow:hidden} .csx-amt{font-size:calc(14px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink)} .csx-amt.muted{color:var(--csx-ink-3);font-weight:500} .csx-date{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);white-space:nowrap} .csx-date .csx-accent{color:var(--csx-ink);font-weight:600} /* status chip (Gemini fix 2026-07-20) — 24px tall · 0 8 pad · r12 · 12px medium, * tabular for numeric labels. Tinted fill + darkened/brightened text per theme * (verified ≥4.5:1 both). Neutral/draft = transparent + hairline + muted. */ .csx-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--csx-r-chip); font-size:calc(13px * var(--text-scale, 1));font-weight:500;letter-spacing:-.01em;white-space:nowrap;border:1px solid transparent; font-variant-numeric:tabular-nums} .csx-pill .d{width:6px;height:6px;border-radius:50%;flex:none} .csx-pill.green {background:var(--csx-st-green-bg); color:var(--csx-st-green-tx)} .csx-pill.green .d {background:var(--csx-st-green)} .csx-pill.violet{background:var(--csx-st-violet-bg);color:var(--csx-st-violet-tx)} .csx-pill.violet .d{background:var(--csx-st-violet)} .csx-pill.amber {background:var(--csx-st-amber-bg); color:var(--csx-st-amber-tx)} .csx-pill.amber .d {background:var(--csx-st-amber)} .csx-pill.red {background:var(--csx-st-red-bg); color:var(--csx-st-red-tx)} .csx-pill.red .d {background:var(--csx-st-red)} .csx-pill.slate, .csx-pill.new {background:var(--csx-st-slate-bg); color:var(--csx-st-slate-tx)} .csx-pill.slate .d,.csx-pill.new .d{background:var(--csx-st-slate)} .csx-pill.draft {background:transparent;color:var(--csx-ink-2);border-color:var(--csx-line-2)} .csx-pill.draft .d{background:var(--csx-ink-3)} /* needs attention */ .csx-lower{max-width:760px} .csx-panel{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);overflow:hidden} .csx-att{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--csx-line);text-decoration:none} .csx-att:last-child{border-bottom:0} .csx-att:hover{background:var(--csx-surface-hover)} /* New items (pending order / new lead) carry the new-order emphasis via a 3px * emerald left accent — never a tinted whole panel. Inset shadow = no reflow. */ .csx-att.is-new{box-shadow:inset 3px 0 0 var(--csx-accent)} .csx-att .csx-ring{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none} .csx-ring.green{background:var(--csx-st-green-bg);color:var(--csx-st-green-tx)} .csx-ring.violet{background:var(--csx-st-violet-bg);color:var(--csx-st-violet-tx)} .csx-ring.amber{background:var(--csx-st-amber-bg);color:var(--csx-st-amber-tx)} .csx-ring.red{background:var(--csx-st-red-bg);color:var(--csx-st-red-tx)} .csx-ring.slate{background:var(--csx-st-slate-bg);color:var(--csx-st-slate-tx)} .csx-ring.accent{background:var(--csx-accent-soft);color:var(--csx-accent-text)} .csx-att .csx-txt{min-width:0;flex:1} .csx-att .csx-txt b{display:block;font-size:calc(14px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);letter-spacing:-.01em} .csx-att .csx-txt span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .csx-att .csx-go{margin-left:auto;flex:none;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2); padding:8px 14px;border-radius:var(--csx-r-btn);border:0;background:var(--csx-chip-step);white-space:nowrap} .csx-att:hover .csx-go{color:var(--csx-ink)} .csx-empty{padding:32px 24px;text-align:center;color:var(--csx-ink-3);font-size:calc(13.5px * var(--text-scale, 1))} /* new-order summary row — pinned at the TOP of the Needs-attention panel so Dom * instantly sees a fresh order/lead landed. Emerald-tinted, reads from real * pending-booking + new-lead counts (never fabricated). */ /* Clean emerald accent (polish 07-20): emerald dot + 3px emerald left accent + * a lightly-tinted row — unmissable, but reads as an accent, never a heavy * green panel. Inset shadow = no reflow, matches the .is-new attention rows. */ .csx-neworder{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--csx-line); text-decoration:none;background:var(--csx-accent-soft);box-shadow:inset 3px 0 0 var(--csx-accent)} .csx-neworder:hover{background:var(--csx-accent-soft);filter:brightness(1.02)} .csx-neworder .csx-nodot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--csx-accent); box-shadow:0 0 0 4px var(--csx-accent-soft);animation:csx-pulse 2s var(--csx-ease) infinite} .csx-neworder .csx-notxt{min-width:0;flex:1} .csx-neworder .csx-notxt b{display:block;font-size:calc(14px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);letter-spacing:-.01em} .csx-neworder .csx-notxt span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .csx-neworder .csx-nogo{margin-left:auto;flex:none;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-accent-ink); padding:7px 14px;border-radius:var(--csx-r-btn);background:var(--csx-accent);white-space:nowrap} .csx-neworder:hover .csx-nogo{background:var(--csx-accent-hover)} /* dismissible header pill (optional, dashboard) — a small emerald nudge when a * brand-new order arrives, with a gently pulsing dark dot. Tasteful, not a banner. */ .csx-newpill{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 6px 0 14px;border-radius:16px; background:var(--csx-accent);color:var(--csx-accent-ink);font-size:calc(13px * var(--text-scale, 1));font-weight:600;letter-spacing:-.01em; margin:0 0 22px;text-decoration:none;box-shadow:var(--csx-shadow-card)} .csx-newpill .csx-npdot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--csx-accent-ink); animation:csx-pulse 2s var(--csx-ease) infinite} .csx-newpill .csx-nplabel{white-space:nowrap} .csx-newpill .csx-npx{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none; background:rgba(28,23,8,.12);color:var(--csx-accent-ink);border:0;cursor:pointer} .csx-newpill .csx-npx:hover{background:rgba(28,23,8,.22)} .csx-newpill .csx-npx svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round} /* sync bar */ .csx-sync{display:flex;align-items:center;gap:12px;margin-top:40px;padding:14px 18px; background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);box-shadow:var(--csx-shadow-card)} .csx-sync-dot{width:8px;height:8px;border-radius:50%;background:var(--csx-accent);flex:none;box-shadow:0 0 0 3px var(--csx-accent-soft)} .csx-sync-text{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);flex:1;min-width:0} .csx-sync-text strong{color:var(--csx-ink);font-weight:600} .csx-sync .csx-btn{margin-left:auto;flex:none;padding:8px 14px} .csx-foot-note{margin:28px auto 0;max-width:1200px;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);text-align:center} /* ───────────────────────── RESPONSIVE ───────────────────────────────────*/ @media (max-width:1140px){ .csx-stats{grid-template-columns:repeat(2,1fr);gap:20px} .csx-wrap{padding:20px 18px 40px} } /* CS-PLAT-03c (audit v305 P1-2): phone menu button + scrim. Hidden on desktop; * shown only while a /cs sidebar exists (so a stale copy is inert). */ #cs-nav-mobile{display:none} @media (max-width:900px){ .cs-sidebar{transform:translateX(-100%);transition:transform .2s var(--csx-ease)} .cs-sidebar.is-open{transform:none;box-shadow:var(--csx-shadow-pop)} body:has(#app-nav.cs-sidebar) .app-shell{padding-left:0;padding-top:56px} body:has(#app-nav.cs-sidebar) #cs-nav-mobile{display:block} .csx-burger{position:fixed;top:12px;left:12px;z-index:70;box-shadow:var(--csx-shadow-card);transition:left .2s var(--csx-ease)} body:has(.demo-banner) .csx-burger{top:50px} body:has(#app-nav.cs-sidebar.is-open) .csx-burger{left:272px} .csx-scrim{position:fixed;inset:0;z-index:55;background:rgba(3,3,3,.42)} .csx-scrim[hidden]{display:none} .csx-head{flex-direction:column;gap:18px} .csx-actions{margin-left:0} .csx-lower{max-width:none} } /* CS-PLAT-03c (audit v305 P1-9): at phone width the page must not scroll * sideways. Header actions wrap, the theme segment hides (it lives in the * sidebar footer too), and the calendar week grid scrolls INSIDE its wrapper. */ @media (max-width:640px){ .csx-actions{flex-wrap:wrap;gap:10px;max-width:100%} .csx-actions > .csx-seg{display:none} .cscal-weeknav{flex-wrap:wrap} .cscal-wrap{max-width:100%;min-width:0} .cscal .cs-cal-week-grid{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* CS-PLAT-03c (audit v305 P1-5): muted key suffix on a service row whose label * collides with a base service ("Photos · 45 photos"). */ .cso-svc b .cso-svc-suffix{font-weight:500;color:var(--csx-ink-3)} /* ========================================================================== * PROPERTIES LIST (redesign-0718-101 · slice 2 · /cs/properties) * * Port of mockup-properties.html scoped to unique .csp-* classes so it can * never collide with main.css, other /cs views, or the agent-facing portal. * All colour comes from the --csx-* tokens above (light + dark both covered); * service-swatch hues are the canonical CS service palette, defined once here. * ==========================================================================*/ /* toolbar */ .csp-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:30px;flex-wrap:wrap} .csp-tsearch{position:relative;flex:1 1 260px;min-width:230px;max-width:400px} .csp-tsearch .csp-si{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--csx-ink-3)} .csp-tsearch input{width:100%;height:40px;padding:0 14px 0 40px;border-radius:var(--csx-r-btn); background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink);font-family:inherit;font-size:calc(13.5px * var(--text-scale, 1));letter-spacing:-.01em} .csp-tsearch input::placeholder{color:var(--csx-ink-3)} .csp-tsearch input:focus{outline:none;border-color:var(--csx-line-2);background:var(--csx-surface)} .csp-tfilters{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .csp-fld{display:inline-flex;align-items:center;gap:8px} .csp-fld .csp-fl{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3)} .csp-sel{position:relative;display:inline-flex} .csp-sel select{appearance:none;-webkit-appearance:none;height:40px;padding:0 34px 0 13px;border-radius:var(--csx-r-btn); background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink);font-family:inherit;font-size:calc(13.5px * var(--text-scale, 1));font-weight:500;letter-spacing:-.01em;cursor:pointer} .csp-sel select:hover{background:var(--csx-surface-hover)} .csp-sel select:focus{outline:none;border-color:var(--csx-line-2);background:var(--csx-surface)} .csp-sel .csp-chev{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--csx-ink-3);pointer-events:none} .csp-count{margin-left:auto;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums} /* groups + rows — fluid grid (no forced min-width) so nothing scrolls * horizontally inside the section at desktop; overflow-x is only a very-narrow * safety net. */ .csp-listwrap{padding-bottom:2px} .csp-groups{min-width:0} .csp-group{margin-bottom:28px} .csp-group:last-child{margin-bottom:8px} .csp-group.is-collapsed{margin-bottom:10px} /* Header = collapse toggle (click) AND reorder handle (drag). */ .csp-ghead{display:flex;align-items:center;gap:9px;padding:7px 8px;margin-bottom:5px;border-radius:var(--csx-r-btn);cursor:pointer;user-select:none;transition:background var(--t-fast) var(--csx-ease)} .csp-ghead:hover{background:var(--csx-surface-hover)} .csp-ghead:focus-visible{outline:none;box-shadow:var(--focus-ring-shadow)} .csp-ghead[draggable="true"]:active{cursor:grabbing} .csp-gcaret{color:var(--csx-ink-3);flex:none;transform:rotate(90deg);transition:transform var(--t-fast) var(--csx-ease)} .csp-group.is-collapsed .csp-gcaret{transform:rotate(0deg)} /* Clear status marker: a filled, status-coloured square (reads as a tag, not a stray dot). */ .csp-ghead .csp-gsq{width:12px;height:12px;border-radius:var(--csx-r-xs);flex:none} .csp-ghead h2{margin:0;font-size:calc(15px * var(--text-scale, 1));font-weight:650;letter-spacing:-.015em;color:var(--csx-ink)} .csp-ghead .csp-gcount{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2);background:var(--csx-surface-2);border:1px solid var(--csx-line); min-width:22px;height:20px;padding:0 7px;border-radius:var(--csx-r-pill);display:grid;place-items:center} .csp-group.is-collapsed .csp-panel{display:none} .csp-panel{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);overflow:hidden} .csp-row{position:relative;display:grid; grid-template-columns:80px minmax(130px,1.3fr) minmax(90px,0.9fr) 116px 78px minmax(176px,1.8fr) auto 30px; gap:14px;align-items:center;padding:16px 18px 16px 24px;border-bottom:1px solid var(--csx-line); transition:background-color .12s var(--csx-ease)} .csp-row:last-child{border-bottom:0} .csp-row:hover{background:var(--csx-surface-hover)} .csp-row[draggable="true"]{cursor:pointer} .csp-row[draggable="true"]:active{cursor:grabbing} .csp-row.csp-dragging{opacity:.42} .csp-row .csp-bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--csp-bar)} .csp-thumb{width:80px;height:60px;border-radius:8px;overflow:hidden;background:var(--csx-chip-step);flex:none} .csp-thumb img{width:100%;height:100%;object-fit:cover;display:block} /* Polish 07-20: a subtle inset hairline gives the empty thumb structural * definition against the near-tone fill (inset shadow = exact 80x60, no reflow). * --csx-line-2 = cream @10% (dark) / #dedcd5 (light). */ .csp-thumb.csp-nophoto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--csx-ink-3);box-shadow:inset 0 0 0 1px var(--csx-line-2)} .csp-thumb.csp-nophoto span{font-size:calc(13px * var(--text-scale, 1));font-weight:500;color:var(--csx-ink-3)} .csp-info{min-width:0} .csp-ord{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);font-variant-numeric:tabular-nums;margin-bottom:3px} .csp-addr{font-size:calc(15px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csp-hood{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:2px} .csp-client{display:flex;align-items:center;gap:11px;min-width:0} .csp-client .csp-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:calc(13px * var(--text-scale, 1));font-weight:700;flex:none;letter-spacing:0} .csp-cn{min-width:0} .csp-cn b{display:block;font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csp-cn span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* per-row status dropdown */ .csp-pstatus{min-width:0} .csp-statusbtn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 9px 0 12px;width:100%;max-width:150px; border-radius:var(--csx-r-btn);border:0;background:var(--csx-chip-step);color:var(--csx-ink); font-family:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:500;letter-spacing:-.01em;cursor:pointer} .csp-statusbtn:hover{background:var(--csx-surface-hover)} .csp-statusbtn.csp-static{cursor:default;max-width:none} .csp-statusbtn .csp-d{width:8px;height:8px;border-radius:50%;flex:none} .csp-statusbtn .csp-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csp-statusbtn .csp-chev{margin-left:auto;color:var(--csx-ink-3)} /* payment — separate axis */ .csp-ppay{min-width:0} .csp-pay{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:12px; font-size:calc(13px * var(--text-scale, 1));font-weight:500;letter-spacing:-.01em;white-space:nowrap;border:1px solid transparent; font-variant-numeric:tabular-nums} .csp-pay .csp-pd{width:6px;height:6px;border-radius:50%;flex:none} .csp-pay.paid{background:var(--csx-st-green-bg);color:var(--csx-st-green-tx)} .csp-pay.paid .csp-pd{background:var(--csx-st-green)} .csp-pay.overdue{background:var(--csx-st-red-bg);color:var(--csx-st-red-tx)} .csp-pay.overdue .csp-pd{background:var(--csx-st-red)} .csp-pay.deposit{background:var(--csx-st-amber-bg);color:var(--csx-st-amber-tx)} .csp-pay.deposit .csp-pd{background:var(--csx-st-amber)} .csp-pay.refunded{background:transparent;color:var(--csx-ink-3);border-color:var(--csx-line-2)} .csp-pay.unpaid{background:transparent;color:var(--csx-ink-2);border-color:var(--csx-line-2)} /* services — ALWAYS horizontal (flex row, wrap). Each chip: 24px tall · 0 8 pad * · r12 · 6px colour dot + label. Background = a neutral ALPHA step (no border, * so no frame-within-frame; stays visible on a hovered row). */ .csp-psvc{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center;min-width:0} .csp-svc{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:12px; border:0;background:var(--csx-chip-step);font-size:calc(13px * var(--text-scale, 1));font-weight:500;color:var(--csx-ink);white-space:nowrap} .csp-sd{width:6px;height:6px;border-radius:50%;flex:none} .csp-svc-photo{background:var(--cat-lime)} .csp-svc-fp{background:#FFB3BA} .csp-svc-drone{background:var(--accent-people)} .csp-svc-video{background:#D60012} .csp-svc-twilight{background:var(--cat-purple)} .csp-svc-matterport{background:#FF8090} .csp-svc-reshoot{background:#737373} /* flags — SPW icon + travel badge */ .csp-flags{display:flex;align-items:center;gap:8px;justify-content:flex-start} .csp-spw{display:grid;place-items:center;width:26px;height:26px;border-radius:8px} .csp-spw.is-active{color:var(--csx-st-green-tx);background:var(--csx-st-green-bg)} .csp-spw.is-none{color:var(--csx-st-amber-tx);background:var(--csx-st-amber-bg)} .csp-dist{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--csx-st-violet-tx);background:var(--csx-st-violet-bg)} /* row actions */ .csp-act{display:flex;justify-content:flex-end} .csp-rowmenu{width:32px;height:32px;border-radius:9px;color:var(--csx-ink-3);display:grid;place-items:center;cursor:pointer;background:none;border:0} .csp-rowmenu:hover{background:var(--csx-surface-2);color:var(--csx-ink)} /* popover menus (top layer — never clipped) */ .csp-pop{position:fixed;margin:0;inset:auto;padding:0;border:0;background:transparent;overflow:visible} .csp-pop::backdrop{background:transparent} .csp-menu{background:var(--csx-overlay);border:1px solid var(--csx-line-2);border-radius:var(--csx-r-md);box-shadow:var(--csx-shadow-pop);padding:6px;width:210px} .csp-menu.right{width:190px} .csp-mlabel{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);padding:6px 10px 5px} .csp-mopt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px; font-family:inherit;font-size:calc(13.5px * var(--text-scale, 1));font-weight:500;color:var(--csx-ink);text-align:left;cursor:pointer;background:none;border:0} .csp-mopt:hover{background:var(--csx-surface-hover)} .csp-mopt .csp-d{width:8px;height:8px;border-radius:50%;flex:none} .csp-mopt .csp-tick{margin-left:auto;color:var(--csx-accent-text);display:inline-flex} .csp-msep{height:1px;background:var(--csx-line);margin:5px 4px} /* drag drop targets */ .csp-group.csp-drop-row > .csp-panel{box-shadow:0 0 0 2px var(--csx-accent), var(--csx-shadow-card)} .csp-group.csp-drop-row > .csp-ghead h2{color:var(--csx-accent-text)} .csp-group.csp-dragging{opacity:.5} .csp-group.csp-drop-group{outline:2px dashed var(--csx-accent);outline-offset:7px;border-radius:14px} /* empty state */ .csp-empty{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);padding:60px 24px;text-align:center} .csp-empty .csp-ei{color:var(--csx-ink-3);opacity:.5;margin-bottom:14px;display:inline-flex} .csp-empty h2{margin:0 0 6px;font-size:calc(16px * var(--text-scale, 1));font-weight:600;letter-spacing:-.01em;color:var(--csx-ink)} .csp-empty p{margin:0 0 18px;font-size:calc(13.5px * var(--text-scale, 1));color:var(--csx-ink-2)} /* ── detail side panel (right drawer) ── */ #csp-drawer-host{position:fixed;inset:0;z-index:120} .csp-drawer-backdrop{position:absolute;inset:0;background:rgba(3,3,3,.42);backdrop-filter:blur(2px);animation:csp-fade .18s var(--csx-ease)} @keyframes csp-fade{from{opacity:0}to{opacity:1}} .csp-drawer{position:absolute;top:0;right:0;height:100%;width:min(460px,92vw); background:var(--csx-overlay);border-left:1px solid var(--csx-line);box-shadow:var(--csx-shadow-pop); display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s var(--csx-ease);color:var(--csx-ink)} .csp-drawer.is-open{transform:none} .csp-drawer-head{position:relative;display:flex;align-items:flex-start;gap:14px;padding:24px 22px 20px 26px;border-bottom:1px solid var(--csx-line)} .csp-drawer-head .csp-bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--csp-bar)} .csp-dh-txt{min-width:0;flex:1} .csp-dh-txt h2{margin:2px 0 0;font-size:calc(20px * var(--text-scale, 1));font-weight:700;letter-spacing:-.02em;color:var(--csx-ink);line-height:1.15} .csp-drawer-x{width:34px;height:34px;border-radius:9px;border:1px solid var(--csx-line);background:var(--csx-surface);color:var(--csx-ink-2);display:grid;place-items:center;cursor:pointer;flex:none} .csp-drawer-x:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csp-drawer-body{padding:20px 24px 28px;overflow-y:auto} .csp-dchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .csp-spw-tag{display:inline-flex;align-items:center;padding:5px 11px 6px;border-radius:var(--csx-r-pill);font-size:calc(13px * var(--text-scale, 1));font-weight:600} .csp-spw-tag.is-active{background:var(--csx-st-green-bg);color:var(--csx-st-green-tx)} .csp-spw-tag.is-none{background:var(--csx-st-amber-bg);color:var(--csx-st-amber-tx)} .csp-dhero{width:100%;height:180px;border-radius:var(--csx-r-md);overflow:hidden;border:1px solid var(--csx-line);margin-bottom:20px;background:var(--csx-surface-2)} .csp-dhero img{width:100%;height:100%;object-fit:cover;display:block} .csp-dsec{padding:16px 0;border-top:1px solid var(--csx-line)} .csp-dsec:first-of-type{border-top:0;padding-top:0} .csp-dsec-t{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px} .csp-drow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:5px 0} .csp-drow span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);flex:none} .csp-drow b{font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);text-align:right;min-width:0} .csp-dsvc{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .csp-dnote{margin:8px 0 0;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);line-height:1.5} .csp-dfoot{margin-top:20px} .csp-dfoot .csx-btn{width:100%;justify-content:center} /* CS MEDIA SYNC (CS-SPW-15 / C2C 206) — reuses the dashboard sync bar; the dot is the job state, the text is the queue's truth. */ .csp-sync{margin:-6px 0 28px} .csp-sync .csx-btn:disabled,.csp-dsync .csx-btn:disabled{opacity:.5;cursor:default} .csp-sync .csx-btn:disabled:hover,.csp-dsync .csx-btn:disabled:hover{background:var(--csx-surface)} .csx-sync-dot.is-busy{background:var(--csx-st-amber);box-shadow:0 0 0 3px var(--csx-st-amber-bg)} .csx-sync-dot.is-ok{background:var(--csx-st-green);box-shadow:0 0 0 3px var(--csx-st-green-bg)} .csx-sync-dot.is-err{background:var(--csx-st-red);box-shadow:0 0 0 3px var(--csx-st-red-bg)} .csp-dsync-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .csp-dsync-btns .csx-btn{padding:8px 14px;font-size:calc(13px * var(--text-scale, 1))} @media (max-width:1200px){ /* tighten the text columns but keep the services column wide enough that two * chips (e.g. Photo + Floor plan) stay on ONE line, never stacked. */ .csp-row{grid-template-columns:72px minmax(120px,1.2fr) minmax(84px,0.8fr) 112px 74px minmax(168px,1.7fr) auto 30px;gap:12px} .csp-thumb{width:72px;height:54px} } @media (max-width:1140px){ .csp-toolbar{gap:12px} } @media (max-width:900px){ /* stack the row into a readable two-column card — nothing overflows on mobile */ .csp-row{grid-template-columns:72px 1fr;grid-auto-rows:auto;row-gap:10px;padding:16px} .csp-thumb{grid-row:span 2} .csp-pstatus,.csp-ppay,.csp-psvc,.csp-flags,.csp-act{grid-column:2} .csp-client{grid-column:1 / -1} } /* ========================================================================== * SLICE 3 (redesign-0718-101 · 2026-07-19) — three data views ported to the * spacious --csx- shell so /cs reads as one system: * .csb-* /cs/bookings (day-grouped shoot ledger) * .csc-* /cs/clients (roster: stat cards + tier tables, expandable rows) * .csi-* /cs/invoices (AR totals + aging buckets + invoice table) * All colour is --csx-* tokens (light + dark). Service swatches reuse the * canonical .csp-svc-* hues; payment chips reuse .csp-pay. No raw hexes here. * ==========================================================================*/ /* ── shared header search (bookings) ───────────────────────────────────── */ .csb-hsearch{position:relative} .csb-hsearch .csb-si{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--csx-ink-3)} .csb-hsearch input{width:230px;max-width:52vw;height:40px;padding:0 14px 0 38px;border-radius:var(--csx-r-btn); background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink);font-family:inherit;font-size:calc(13.5px * var(--text-scale, 1));letter-spacing:-.01em} .csb-hsearch input::placeholder{color:var(--csx-ink-3)} .csb-hsearch input:focus{outline:none;border-color:var(--csx-line-2);background:var(--csx-surface)} /* ── filter chips ──────────────────────────────────────────────────────── */ .csb-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px} .csb-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px 9px;border-radius:var(--csx-r-pill); background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink-2); font-size:calc(13px * var(--text-scale, 1));font-weight:600;letter-spacing:-.01em;text-decoration:none;cursor:pointer; transition:background-color .12s var(--csx-ease),color .12s var(--csx-ease),border-color .12s var(--csx-ease)} .csb-chip:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csb-chip.is-active{background:var(--csx-accent-soft);color:var(--csx-accent-text);border-color:transparent} .csb-chip .csb-cn{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);font-variant-numeric:tabular-nums} .csb-chip.is-active .csb-cn{color:var(--csx-accent-text)} .csb-totals{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);margin:0 0 22px} .csb-totals strong{color:var(--csx-ink);font-weight:600} /* ── day groups + rows ─────────────────────────────────────────────────── */ .csb-listwrap{padding-bottom:2px} .csb-groups{min-width:0} .csb-group{margin-bottom:28px} .csb-group:last-child{margin-bottom:6px} .csb-ghead{display:flex;align-items:baseline;gap:12px;padding:0 6px 12px} .csb-ghead .csb-gdot{width:9px;height:9px;border-radius:50%;flex:none;align-self:center} .csb-ghead h2{margin:0;font-size:calc(15px * var(--text-scale, 1));font-weight:600;letter-spacing:-.015em;color:var(--csx-ink)} .csb-ghead h2 .csb-gtoday{color:var(--csx-accent-text);font-weight:700} .csb-ghead .csb-gsub{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csb-ghead .csb-gmeta{margin-left:auto;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap} .csb-ghead .csb-gmeta strong{color:var(--csx-ink);font-weight:600} .csb-group.is-today .csb-panel{box-shadow:0 0 0 1.5px var(--csx-accent-soft),var(--csx-shadow-card)} .csb-panel{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);overflow:hidden} .csb-row{display:grid; grid-template-columns:60px minmax(160px,1.5fr) minmax(120px,1fr) minmax(120px,1.3fr) 108px minmax(84px,96px) 104px 34px; gap:16px;align-items:center;padding:16px 18px 16px 22px;border-bottom:1px solid var(--csx-line); text-decoration:none;color:inherit;transition:background-color .12s var(--csx-ease)} .csb-row:last-child{border-bottom:0} .csb-row:hover{background:var(--csx-surface-hover)} .csb-time{font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);font-variant-numeric:tabular-nums;white-space:nowrap} .csb-time.muted{color:var(--csx-ink-3);font-weight:500} .csb-prop{min-width:0} .csb-prop b{display:block;font-size:calc(14.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csb-prop span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csb-agent{display:flex;align-items:center;gap:10px;min-width:0} .csb-agent .csx-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:calc(13px * var(--text-scale, 1));font-weight:700;flex:none} .csb-agent .csb-an{min-width:0} .csb-agent .csb-an b{display:block;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csb-agent .csb-an span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csb-svc{display:flex;flex-wrap:wrap;gap:6px;min-width:0} .csb-amt{text-align:right;font-size:calc(14px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);font-variant-numeric:tabular-nums;white-space:nowrap} .csb-amt.muted{color:var(--csx-ink-3);font-weight:500} .csb-amt .csb-travel{display:block;font-size:calc(13px * var(--text-scale, 1));font-weight:500;color:var(--csx-st-violet-tx);margin-top:2px} .csb-editcell{display:flex;justify-content:flex-end} .csb-edit{width:32px;height:32px;border-radius:9px;color:var(--csx-ink-3);display:grid;place-items:center;cursor:pointer;background:none;border:0;font-size:calc(15px * var(--text-scale, 1));line-height:1} .csb-edit:hover{background:var(--csx-surface-2);color:var(--csx-ink)} /* payment method dropdown ("Paid via ▾") on invoiced rows — native popover * (top layer) so it is never clipped by the panel's overflow:hidden */ .csb-pay-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px 7px;border-radius:var(--csx-r-pill); border:1px solid var(--csx-st-green);background:var(--csx-st-green-bg);color:var(--csx-st-green-tx); font-family:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:600;cursor:pointer;white-space:nowrap} .csb-pay-btn:hover{background:var(--csx-accent-soft)} .csb-pay-pop{position:fixed;margin:0;inset:auto;padding:6px;min-width:150px; background:var(--csx-overlay);border:1px solid var(--csx-line-2);border-radius:var(--csx-r-md);box-shadow:var(--csx-shadow-pop)} .csb-pay-pop::backdrop{background:transparent} .csb-pay-pop button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:0;background:none; font-family:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:500;color:var(--csx-ink);cursor:pointer} .csb-pay-pop button:hover{background:var(--csx-surface-hover)} /* per-leg drive divider — reuses the shared .cs-drive-pill component */ .csb-driverow{padding:8px 20px 8px 22px;border-bottom:1px solid var(--csx-line);display:flex} .csb-empty{padding:56px 24px;text-align:center;color:var(--csx-ink-3);font-size:calc(13.5px * var(--text-scale, 1)); background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card)} @media (max-width:1200px){ .csb-row{grid-template-columns:56px minmax(140px,1.5fr) minmax(104px,1fr) minmax(104px,1.2fr) 100px 84px 96px 32px;gap:12px} } @media (max-width:900px){ /* stack into a compact card — agent + amount drop under the address */ .csb-row{grid-template-columns:52px 1fr auto;grid-auto-rows:auto;row-gap:10px;padding:16px} .csb-agent,.csb-svc{grid-column:2 / -1} .csb-amt{grid-column:3;grid-row:1} } /* ========================================================================== * CLIENTS (.csc-*) * ==========================================================================*/ /* 233 B15 — the year in one line, above the roster. One strip, three figures, no cards: this is a summary of the table below it, not four more tiles. The numbers are tabular so Ordered / Collected / Outstanding stay on one rhythm, and each cell is a detail-card trigger (A12) because the tax basis differs between them and belongs on hover, not in parentheses on screen. */ .csc-yearstrip{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px; margin:0 0 18px;padding:13px 18px;border-radius:var(--csx-r-md); border:1px solid var(--csx-line);background:var(--csx-surface-2)} .csc-ys-cell{display:inline-flex;align-items:baseline;gap:9px;border-radius:7px; padding:2px 6px;margin:-2px -6px;cursor:default;transition:background .14s ease} .csc-ys-cell:hover,.csc-ys-cell:focus-visible{background:var(--csx-surface-hover)} .csc-ys-cell:focus-visible{outline:2px solid var(--csx-accent);outline-offset:1px} .csc-ys-lbl{font-size:calc(13px * var(--text-scale, 1));font-weight:650;letter-spacing:.09em;text-transform:uppercase; color:var(--csx-ink-3);white-space:nowrap} .csc-ys-cell b{font-size:calc(19px * var(--text-scale, 1));font-weight:650;color:var(--csx-ink);letter-spacing:-.01em; font-variant-numeric:tabular-nums} .csc-group{margin-bottom:38px} .csc-group:last-child{margin-bottom:8px} /* Strict vertical axis (polish 07-20): every tier table is a SEPARATE , * so auto-layout let each one size its columns independently → the money columns * (Bookings / LTV / Outstanding / Last shoot) drifted between groups. Pin one * fixed column template so the right-aligned tabular figures line up straight * down the whole roster. Text cells truncate rather than force width. * 233 B15 added the "Ordered " column, so the template is 8 wide. */ .csc-group .csx-table{table-layout:fixed} .csc-group .csx-table th:nth-child(1),.csc-group .csx-table td:nth-child(1){width:20%} .csc-group .csx-table th:nth-child(2),.csc-group .csx-table td:nth-child(2){width:13%} .csc-group .csx-table th:nth-child(3),.csc-group .csx-table td:nth-child(3){width:9%} .csc-group .csx-table th:nth-child(4),.csc-group .csx-table td:nth-child(4){width:13%} .csc-group .csx-table th:nth-child(5),.csc-group .csx-table td:nth-child(5){width:12%} .csc-group .csx-table th:nth-child(6),.csc-group .csx-table td:nth-child(6){width:12%} .csc-group .csx-table th:nth-child(7),.csc-group .csx-table td:nth-child(7){width:11%} .csc-group .csx-table th:nth-child(8),.csc-group .csx-table td:nth-child(8){width:10%} /* Every roster header is a sort button (233 B15/B3), reusing the /cs/orders control unchanged. Pull the button's own padding back out at the cell edge so the label still sits on the same optical axis as the figures beneath it. */ .csc-group .csx-table th .cso-sort{max-width:100%} .csc-group .csx-table th.right .cso-sort{margin-right:-6px} .csc-group .csx-table th:not(.right) .cso-sort{margin-left:-6px} .csc-summary>td{overflow:hidden} .csc-nm b{overflow:hidden;text-overflow:ellipsis} /* Polish 07-20: the filled pill read as a disabled button. Restyled to a plain * muted status label with a small leading dot (the shared chip-dot language) so * it clearly signals mode, not an action. */ .csc-mode{display:inline-flex;align-items:center;gap:6px;padding:0; border:0;background:none;font-size:calc(13px * var(--text-scale, 1));font-weight:500;color:var(--csx-ink-2);white-space:nowrap} .csc-mode::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--csx-ink-3)} .csc-chev{color:var(--csx-ink-3);transition:transform .16s var(--csx-ease);flex:none} .csc-open>td .csc-chev{transform:rotate(180deg)} .csc-namec{display:flex;align-items:center;gap:12px;min-width:0} .csc-namec .csx-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:calc(13px * var(--text-scale, 1));font-weight:700;flex:none} .csc-nm{min-width:0} .csc-nm b{display:block;font-size:calc(14px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap} .csc-nm span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:168px} /* cap the brokerage cell so a long name can't force the roster table wider than * its card (keeps every column — incl. Last shoot / Delivery — on screen). */ .csc-summary .csx-pkg{max-width:140px} /* Outstanding balance = the shared tinted danger chip (never raw red text). */ .csc-warn{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:12px; background:var(--csx-st-red-bg);color:var(--csx-st-red-tx);border:1px solid transparent; font-size:calc(13px * var(--text-scale, 1));font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums} .csc-detail{display:none;background:var(--csx-surface-2)} .csc-detail.is-open{display:table-row} .csc-detail>td{padding:0;border-bottom:1px solid var(--csx-line)} .csc-dwrap{padding:22px 24px 26px} .csc-profile{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:22px} .csc-pk{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);letter-spacing:.03em;text-transform:uppercase;margin-bottom:9px} .csc-pl{font-size:calc(13.5px * var(--text-scale, 1));color:var(--csx-ink);margin-bottom:4px} .csc-pl.muted{color:var(--csx-ink-2);font-size:calc(13px * var(--text-scale, 1))} .csc-pl strong{font-weight:700;font-variant-numeric:tabular-nums} .csc-imp{margin-top:8px;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--csx-r-btn); border:1px solid var(--csx-line-2);background:var(--csx-surface);color:var(--csx-ink);font-family:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:600;cursor:pointer} .csc-imp:hover{background:var(--csx-surface-hover)} .csc-imp:disabled{opacity:.6;cursor:default} /* One-click payment nudge (Dom 08-23): inline confirm popover in the expanded * client row. Existing tokens only — Send is the row's one red primary * (.csx-btn-primary), everything else stays on the neutral ladder. */ .csc-nudge{margin-left:8px} .csc-nudgehost:empty{display:none} .csc-nudgepop{margin:0 0 22px;padding:16px;border:1px solid var(--csx-line-2);border-radius:var(--csx-r-md); background:var(--csx-surface);max-width:560px} .csc-nudge-t{font-size:calc(12.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);letter-spacing:.03em;text-transform:uppercase;margin-bottom:9px} .csc-nudge-txt{display:block;width:100%;min-height:104px;resize:vertical;padding:10px 12px;box-sizing:border-box; border:1px solid var(--csx-line-2);border-radius:var(--csx-r-btn);background:var(--csx-surface-2);color:var(--csx-ink); font-family:inherit;font-size:calc(13.5px * var(--text-scale, 1));line-height:1.55} .csc-nudge-txt:focus-visible{outline:2px solid var(--csx-accent);outline-offset:1px} .csc-nudge-note{margin-top:9px;font-size:calc(12.5px * var(--text-scale, 1));color:var(--csx-ink-2)} .csc-nudge-note.warn{color:var(--csx-st-amber)} .csc-nudge-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .csc-nudge-row .csx-btn{min-height:44px} .csc-nudge-row .csx-btn[disabled]{opacity:.45;cursor:not-allowed} .csc-nudge-row .csc-imp{margin-top:0;min-height:44px} .csc-recent-t{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px} /* mini recent-bookings list sits INSIDE the expanded detail (already a stepped * surface) — no outer border, just a background step so we never nest frames. */ .csc-mini{border:0;border-radius:var(--csx-r-md);overflow:hidden;background:var(--csx-surface)} .csc-mini a{display:grid;grid-template-columns:96px minmax(160px,1.6fr) 120px 110px 118px;gap:14px;align-items:center; padding:12px 16px;border-bottom:1px solid var(--csx-line);text-decoration:none;color:inherit;transition:background-color .12s var(--csx-ease)} .csc-mini a:last-child{border-bottom:0} .csc-mini a:hover{background:var(--csx-surface-hover)} .csc-mini .csc-ord{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2);font-variant-numeric:tabular-nums} .csc-mini .csc-maddr{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csc-mini .csc-mdate{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);white-space:nowrap} .csc-mini .csc-mamt{text-align:right;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);font-variant-numeric:tabular-nums} .csc-mini .csc-mstat{text-align:right} .csc-mini-empty{padding:18px;color:var(--csx-ink-3);font-size:calc(13px * var(--text-scale, 1))} @media (max-width:900px){ .csc-profile{grid-template-columns:1fr} } /* ========================================================================== * INVOICES (.csi-*) * ==========================================================================*/ .csi-badge{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:12px; font-size:calc(13px * var(--text-scale, 1));font-weight:500;letter-spacing:-.01em;border:1px solid transparent;white-space:nowrap; font-variant-numeric:tabular-nums} .csi-badge.ok{background:var(--csx-st-green-bg);color:var(--csx-st-green-tx)} .csi-badge.warn{background:var(--csx-st-amber-bg);color:var(--csx-st-amber-tx)} .csi-badge.err{background:var(--csx-st-red-bg);color:var(--csx-st-red-tx)} .csi-badge.neutral{background:var(--csx-chip-step);color:var(--csx-ink-2);border-color:transparent} .csi-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px} .csi-aging{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px} /* Polish 07-20: the four aging buckets sat cramped — give them ~8px more * internal padding so the figure + meta breathe (totals cards stay 20/22). */ .csi-aging .csi-card{padding:18px 20px} .csi-card{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);padding:16px 18px;min-width:0; box-shadow:var(--csx-shadow-card);text-decoration:none;display:block;position:relative;overflow:hidden; transition:background-color .12s var(--csx-ease),box-shadow .12s var(--csx-ease)} .csi-card:hover{background:var(--csx-surface-hover)} .csi-card.is-active{box-shadow:0 0 0 1.5px var(--csx-accent),var(--csx-shadow-card)} /* Aging cards match every other card — no invented colour border. The bucket * tone rides a tinted status dot inside the label, reusing the shared chip-dot * language. */ .csi-clabel{display:flex;align-items:center;gap:8px;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2);margin-bottom:8px;min-width:0} .csi-clabel::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--csx-ink-3)} .csi-card[data-tone="ok"] .csi-clabel::before{background:var(--csx-st-green)} .csi-card[data-tone="warn"] .csi-clabel::before{background:var(--csx-st-amber)} .csi-card[data-tone="danger"] .csi-clabel::before{background:var(--csx-st-red)} .csi-cval{font-size:calc(24px * var(--text-scale, 1));font-weight:700;letter-spacing:-.03em;color:var(--csx-ink);font-variant-numeric:tabular-nums;line-height:1;min-width:0;overflow-wrap:anywhere} .csi-cmeta{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:7px} .csi-actcell{display:flex;gap:8px;justify-content:flex-end;align-items:center} .csi-abtn{padding:7px 12px;border-radius:var(--csx-r-btn);border:1px solid var(--csx-line-2);background:var(--csx-surface); color:var(--csx-ink);font-family:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:600;cursor:pointer;white-space:nowrap} .csi-abtn:hover{background:var(--csx-surface-hover)} .csi-abtn.primary{background:var(--csx-accent);color:var(--csx-accent-ink);border-color:var(--csx-accent)} .csi-abtn.primary:hover{background:var(--csx-accent-hover);border-color:var(--csx-accent-hover)} .csi-abtn:disabled{opacity:.45;cursor:default} .csi-abtn:disabled:hover{background:var(--csx-surface)} .csi-paidnote{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);font-variant-numeric:tabular-nums} .csi-idcell b{font-size:calc(13.5px * var(--text-scale, 1));font-weight:700;color:var(--csx-ink);font-variant-numeric:tabular-nums;display:block} .csi-idcell span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);display:block;margin-top:1px} /* Grapevine ledger panel (244 section 9, lane 13) — three layout rules only. * Everything inside it is an existing component: .csx-stat, .csx-table, * .csx-pill, .cso-panel, .cso-btn / -bone / -butter, .cso-field / .cso-sel. * No new colour, no new radius, no new shadow. */ .csi-gv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px} .csi-gv-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px} .csi-gv-add{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:12px;align-items:end} @media (max-width:1140px){ .csi-totals{grid-template-columns:1fr;gap:16px} .csi-aging{grid-template-columns:repeat(2,1fr)} .csi-gv-grid{grid-template-columns:1fr} .csi-gv-add{grid-template-columns:1fr} } /* ========================================================================== * SLICE 4 (redesign-0718-101 · 2026-07-19) — the last four /cs views ported to * the spacious --csx- shell so the whole backend reads as one system: * .cspipe-* /cs/pipeline (kanban board) * .csin-* /cs/inbox (mini-stats + leads + e-transfer reconciliation) * .csset-* /cs/settings (section sidebar + cards + hairline setting rows) * .cscal ... /cs/calendar (scoped recolor of the existing week-grid classes — * the grid + drag logic keep their .cs-cal-*/.cs-tl-* class names; * these overrides only re-point colour/spacing to --csx- tokens so * the timeline works in BOTH light + dark) * All colour is --csx-* tokens. No raw hexes except the shared red danger text. * ==========================================================================*/ /* ── PIPELINE (.cspipe-*) ─────────────────────────────────────────────────── */ .cspipe-wrap{max-width:1360px} .cspipe-board{display:flex;gap:20px;overflow-x:auto;padding-bottom:12px;align-items:flex-start} .cspipe-col{flex:0 0 300px;width:300px;background:var(--csx-lane);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);display:flex;flex-direction:column} .cspipe-colhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--csx-line)} .cspipe-coltitle{display:flex;align-items:center;gap:10px;min-width:0} .cspipe-cdot{width:9px;height:9px;border-radius:50%;flex:none} .cspipe-coltitle>div{min-width:0} .cspipe-coltitle h2{margin:0;font-size:calc(14px * var(--text-scale, 1));font-weight:600;letter-spacing:-.01em;color:var(--csx-ink);white-space:nowrap} .cspipe-colblurb{margin:2px 0 0;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);white-space:nowrap} .cspipe-count{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2);background:var(--csx-surface);border:1px solid var(--csx-line);min-width:22px;height:20px;padding:0 6px;border-radius:var(--csx-r-pill);display:grid;place-items:center;flex:none} .cspipe-colmeta{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums} .cspipe-body{display:flex;flex-direction:column;gap:12px;padding:14px;min-height:120px;transition:background-color .12s var(--csx-ease),box-shadow .12s var(--csx-ease);border-radius:0 0 var(--csx-r-lg) var(--csx-r-lg)} .cspipe-body.is-drop-target{background:var(--csx-accent-soft);box-shadow:inset 0 0 0 1.5px var(--csx-accent)} .cspipe-empty{padding:26px 12px;text-align:center;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);border:1.5px dashed var(--csx-line-2);border-radius:var(--csx-r-md)} .cspipe-card{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);box-shadow:var(--csx-shadow-card);padding:14px 15px;cursor:grab;transition:box-shadow .12s var(--csx-ease);color:var(--csx-ink)} .cspipe-card:hover{box-shadow:var(--csx-shadow-pop)} .cspipe-card:active{cursor:grabbing} .cspipe-card.is-dragging{opacity:.5} .cspipe-cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px} .cspipe-order{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3)} .cspipe-value{font-size:calc(13.5px * var(--text-scale, 1));font-weight:700;color:var(--csx-ink)} .cspipe-addr{margin:0 0 12px;font-size:calc(14.5px * var(--text-scale, 1));font-weight:600;letter-spacing:-.015em;color:var(--csx-ink);line-height:1.3} .cspipe-meta{display:flex;align-items:center;gap:9px;margin-bottom:13px;min-width:0} .cspipe-meta .csx-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:calc(13px * var(--text-scale, 1));font-weight:700;flex:none;letter-spacing:0} .cspipe-mtxt{min-width:0} .cspipe-mtxt b{display:block;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cspipe-mtxt span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cspipe-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:11px;border-top:1px solid var(--csx-line)} .cspipe-time{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);white-space:nowrap} /* Polish 07-20: ghost / tertiary treatment — the bordered surface button read as * cluttered with two per card. Now transparent with 90% cream text (--csx-ink) * so it's clearly clickable without boxing in; a soft chip-step fill on hover * (then emerald on the deliberate hover-hold) keeps the affordance. Drag intact. */ .cspipe-advance{display:inline-flex;align-items:center;gap:5px;padding:6px 10px 7px;border-radius:var(--csx-r-btn);border:1px solid transparent;background:transparent;color:var(--csx-ink);font-family:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:background-color .12s var(--csx-ease),color .12s var(--csx-ease)} .cspipe-advance .csx-ico{color:var(--csx-ink-3)} .cspipe-advance:hover{background:var(--csx-accent-soft);color:var(--csx-accent-text)} .cspipe-advance:hover .csx-ico{color:var(--csx-accent-text)} .cspipe-done{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-st-green-tx)} @media (max-width:900px){ .cspipe-col{flex-basis:82vw;width:82vw} } /* ── INBOX (.csin-*) ──────────────────────────────────────────────────────── */ .csin-wrap{max-width:1200px} .csin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px} .csin-stat{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);padding:22px 24px;box-shadow:var(--csx-shadow-card)} .csin-slabel{display:flex;align-items:center;gap:9px;font-size:calc(13px * var(--text-scale, 1));font-weight:500;color:var(--csx-ink-2);margin-bottom:12px} .csin-sdot{width:8px;height:8px;border-radius:50%;flex:none} .csin-sval{font-size:calc(32px * var(--text-scale, 1));font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--csx-ink)} .csin-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:8px} .csin-panel{padding:0} .csin-phead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--csx-line)} .csin-phead h2{margin:0;font-size:calc(16px * var(--text-scale, 1));font-weight:600;letter-spacing:-.02em;color:var(--csx-ink)} .csin-attn{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--csx-line);text-decoration:none} .csin-attn:last-child{border-bottom:0} .csin-attn:hover{background:var(--csx-surface-hover)} .csin-ring{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none} .csin-ring.violet{background:var(--csx-st-violet-bg);color:var(--csx-st-violet-tx)} .csin-ring.amber{background:var(--csx-st-amber-bg);color:var(--csx-st-amber-tx)} .csin-ring.green{background:var(--csx-st-green-bg);color:var(--csx-st-green-tx)} .csin-atxt{min-width:0;flex:1} .csin-atxt b{display:block;font-size:calc(14px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csin-atxt span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .csin-abtn{flex:none;padding:8px 14px 9px;font-size:calc(13px * var(--text-scale, 1))} .csin-ago{flex:none;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2);white-space:nowrap} .csin-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; min-height:180px;padding:40px 24px;text-align:center;color:var(--csx-ink-3);font-size:calc(13.5px * var(--text-scale, 1))} /* Icon inherits the muted ink-3 stroke (~38%); polish 07-20 drops the extra .4 * multiplier that was pushing the effective opacity to ~15% (too dim). */ .csin-empty .csin-empty-ic{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;opacity:1} .csin-empty p{margin:0} .csin-etrow{display:grid;grid-template-columns:minmax(120px,1.3fr) 118px minmax(90px,1fr) minmax(150px,1.3fr);gap:14px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--csx-line)} .csin-etrow:last-child{border-bottom:0} .csin-etwho b{display:block;font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csin-etwho span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csin-etamt b{display:block;font-size:calc(14px * var(--text-scale, 1));font-weight:700;color:var(--csx-ink)} .csin-etamt span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:1px} .csin-etref{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap} .csin-reftag{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);background:var(--csx-surface-2);border:1px solid var(--csx-line);padding:2px 7px;border-radius:var(--csx-r-pill)} .csin-noref{color:var(--csx-ink-3)} .csin-sel{appearance:none;-webkit-appearance:none;width:100%;height:38px;padding:0 12px;border-radius:var(--csx-r-btn);background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink);font-family:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:500;cursor:pointer} .csin-sel:hover{background:var(--csx-surface-hover)} .csin-sel:focus{outline:none;border-color:var(--csx-line-2);background:var(--csx-surface)} @media (max-width:1140px){ .csin-stats{grid-template-columns:1fr;gap:16px} .csin-grid{grid-template-columns:1fr} } /* ── SETTINGS (.csset-*) ──────────────────────────────────────────────────── */ .csset-wrap{max-width:1120px} .csset-layout{display:grid;grid-template-columns:230px 1fr;gap:32px;align-items:start} .csset-side{position:sticky;top:32px} .csset-nav{display:flex;flex-direction:column;gap:2px} .csset-navitem{display:block;padding:10px 14px;border-radius:var(--csx-r-btn);font-size:calc(13.5px * var(--text-scale, 1));font-weight:500;letter-spacing:-.01em;color:var(--csx-ink-2);text-decoration:none;transition:background-color .12s var(--csx-ease),color .12s var(--csx-ease)} .csset-navitem:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csset-navitem.is-active{background:var(--csx-nav-active);color:var(--csx-ink);font-weight:600} .csset-body{min-width:0} .csset-card{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);padding:28px 30px} .csset-chead{margin-bottom:20px} .csset-chead h2{margin:0;font-size:calc(18px * var(--text-scale, 1));font-weight:600;letter-spacing:-.02em;color:var(--csx-ink)} .csset-chead p{margin:6px 0 0;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);line-height:1.5} .csset-card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--csx-surface-2);border:1px solid var(--csx-line);border-radius:6px;padding:1px 6px;color:var(--csx-ink)} .csset-grid{display:flex;flex-direction:column} .csset-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--csx-line)} .csset-row:last-child{border-bottom:0} .csset-rlabel{font-size:calc(13.5px * var(--text-scale, 1));color:var(--csx-ink);font-weight:500} /* 233 C7b — the live state of a server-backed setting, beside its label. */ .csset-rhint{display:block;margin-top:2px;font-size:calc(12px * var(--text-scale, 1));font-weight:400;color:var(--csx-ink-3)} .csset-inwrap{position:relative;display:inline-flex;align-items:center;gap:8px} .csset-input{width:150px;height:38px;padding:0 12px;border-radius:var(--csx-r-btn);background:var(--csx-surface-2);border:1px solid var(--csx-line);color:var(--csx-ink);font-family:inherit;font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;text-align:right;font-variant-numeric:tabular-nums} .csset-input.has-pre{padding-left:26px} .csset-input:focus{outline:none;border-color:var(--csx-accent);background:var(--csx-surface)} .csset-pre{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);pointer-events:none} .csset-suf{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);min-width:14px} /* Brand palette (CS-FIX3): the four rounded-square colour inputs are replaced by the app's circular swatch row, so it is the same element here, on the calendar colours panel and on /cs/sun. Layout only — every chip style is .cs-color-sw. */ .csset-row--stack{align-items:flex-start;flex-direction:column;gap:12px} .csset-palwrap{width:100%} .csset-sws{padding-left:0} .csset-palwrap .csset-note{margin-top:12px;font-variant-numeric:tabular-nums} /* Weather rules: a number, then a plain sentence saying what it really does. */ .csset-rules{display:flex;flex-direction:column} .csset-rule{border-bottom:1px solid var(--csx-line);padding-bottom:14px} .csset-rule:last-child{border-bottom:0;padding-bottom:0} .csset-rule .csset-row{border-bottom:0;padding-bottom:4px} .csset-rulewhat{display:flex;align-items:flex-start;gap:10px;margin:0; font-size:calc(13px * var(--text-scale, 1));line-height:1.55;color:var(--csx-ink-2);max-width:74ch} .csset-rulewhat .csi-badge{flex:none} /* Typed confirmation in the danger zone — the cockpit's own modal field. */ /* CS-PLAT-08 A6: the typed-confirm field moved to the shared dialog class. */ .csset-confirm-in,.csx-confirm-in{text-transform:uppercase;letter-spacing:.06em;font-weight:600} /* .csx-btn had no disabled state at all, so a blocked confirm button looked exactly like a live one. .cso-btn has carried this since it was written. */ .csx-btn[disabled]{opacity:.45;cursor:not-allowed} /* A near-black swatch on a near-black panel is an invisible control. The same hairline .cs-color-dot has always carried, so the chip and the dot match. */ .cs-color-sw{box-shadow:inset 0 0 0 1px rgba(128,128,128,.28)} .cs-color-sw--off,.cs-color-sw--custom{box-shadow:none} /* re-stated after the hairline so the focus ring still wins on keyboard focus */ .cs-color-sw:focus-visible{box-shadow:var(--focus-ring-shadow)} .csset-switchwrap{display:inline-flex} .csset-switch{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:999px;background:var(--csx-line-2);border:1px solid var(--csx-line);position:relative;cursor:pointer;transition:background-color .15s var(--csx-ease);flex:none} .csset-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--csx-surface);box-shadow:var(--csx-shadow-knob);transition:transform .15s var(--csx-ease)} .csset-switch:checked{background:var(--csx-accent);border-color:var(--csx-accent)} .csset-switch:checked::after{transform:translateX(18px)} .csset-note{margin:20px 0 0;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);line-height:1.55} .csset-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .csset-list li{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);line-height:1.55;padding-left:16px;position:relative} .csset-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--csx-ink-3)} .csset-intgrid{display:flex;flex-direction:column;gap:12px} .csset-int{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--csx-line);border-radius:var(--csx-r-md);background:var(--csx-surface-2)} .csset-int-main{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap} .csset-int-hint{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csset-int-state{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-st-red-tx);white-space:nowrap} .csset-int-state.is-ok{color:var(--csx-st-green-tx)} .csset-raw{margin-top:20px} .csset-raw summary{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);cursor:pointer} .csset-raw-pre{margin:12px 0 0;padding:14px 16px;background:var(--csx-surface-2);border:1px solid var(--csx-line);border-radius:var(--csx-r-md);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);overflow-x:auto;max-height:340px} .csset-danger-grid{display:flex;flex-direction:column;gap:12px;align-items:flex-start} .csset-danger{padding:11px 16px;border-radius:var(--csx-r-btn);border:1px solid var(--csx-st-red);background:var(--csx-st-red-bg);color:var(--csx-st-red-tx);font-family:inherit;font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;cursor:pointer} .csset-danger:hover{background:var(--csx-st-red);border-color:var(--csx-st-red);color:rgba(255,253,244,.95)} .csset-empty{padding:40px 24px;text-align:center;color:var(--csx-ink-3);font-size:calc(13.5px * var(--text-scale, 1))} @media (max-width:900px){ .csset-layout{grid-template-columns:1fr;gap:20px} .csset-side{position:static} .csset-nav{flex-direction:row;flex-wrap:wrap} } /* ── UNIFORMITY SWEEP (2026-07-20 · uni) ────────────────────────────────────── * Every text input / select shares one visible field border so hit areas are * obvious in BOTH themes (the dark .06 hairline was near-invisible). Settings * inputs also standardise to the 40px / 11px-radius control height. */ .csx-search input, .csp-tsearch input, .csp-sel select, .csb-hsearch input, .csin-sel, .csset-input{border-color:var(--csx-field-border)} .csset-input{height:40px;border-radius:var(--csx-r-btn)} /* ── CALENDAR (.cscal ...) — recolor the existing week-grid to --csx- tokens ── */ .cscal-wrap{max-width:1460px} .cscal-weeknav{display:inline-flex;align-items:center;gap:8px} .cscal-today{height:40px;padding:0 16px} .cscal-colorbtn .csx-ico{color:var(--csx-ink-2)} .cscal-note{text-align:left;max-width:64ch;margin-left:0} /* Apple's week: the days are one sheet, not seven cards. No gap, no per-card box, ONE 1px separator between columns. The old 10px gap plus a full border on every card drew two lines with a trench between them, and broke every hour line into seven disconnected stubs. */ .cscal .cs-cal-week-grid{gap:0;padding-bottom:14px} .cscal .cs-cal-card{background:var(--csx-surface);border:0;border-left:1px solid var(--csx-line);border-radius:0;box-shadow:none} .cscal .cs-cal-card:last-child{border-right:1px solid var(--csx-line)} .cscal .cs-cal-card.is-today{background:var(--csx-surface)} .cscal .cs-cal-card.is-today .cs-cal-date{box-shadow:inset 0 -2px 0 0 var(--csx-accent-soft)} .cscal .cs-cal-week-grid .cs-cal-date{border-bottom:1px solid var(--csx-line)} .cscal .cs-cal-dow{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2)} .cscal .cs-cal-dnum{color:var(--csx-ink)} .cscal .cs-cal-month{color:var(--csx-ink-3)} .cscal .cs-cal-drive-total{color:var(--csx-ink-3)} .cscal .cs-tl-gutter-row{color:var(--csx-ink-3)} .cscal .cs-tl-hour{border-top:1px solid var(--csx-line)} .cscal .cs-tl-half{border-top:1px dashed var(--csx-line)} .cscal .cs-tl-empty{color:var(--csx-ink-3)} .cscal .cs-tl-block{background:var(--client-bg,var(--csx-surface-2));border:1px solid var(--csx-line-2);border-left:3px solid var(--client-accent,var(--csx-accent))} .cscal .cs-tl-block:hover{box-shadow:0 0 0 1px var(--client-accent,var(--csx-accent)),var(--csx-shadow-card)} .cscal .cs-tl-grip::after{background:var(--csx-ink-3)} .cscal .cs-cal-chip.cs-tl-chip{color:var(--csx-ink)} /* Polish 07-20: give the event block a clear text hierarchy — the property * ADDRESS reads semi-bold + full ink, while the time and agent step back to a * regular, muted weight. Keeps the per-client colour tint intact. */ .cscal .cs-cal-chip-time{color:var(--csx-ink-2);font-weight:500} .cscal .cs-cal-chip-title{color:var(--csx-ink);font-weight:600} .cscal .cs-cal-chip-meta{color:var(--csx-ink-2);font-weight:400} .cscal .cs-wx-text{color:var(--csx-ink-2)} /* CS-PLAT-04: the hatch lived HERE, at a higher specificity than the band's own rule in main.css, which is why "no diagonal strips" kept coming back. The band is now the event's own colour, a touch darker. */ .cscal .cs-tl-travel{background:color-mix(in srgb, var(--client-bg, hsla(47,100%,97.78%,.10)), #000 calc(var(--cal-travel-fill, .18) * 90%));color:hsla(47,100%,97.78%,.88)} .cscal .cs-tl-block.is-expanded .cs-tl-drawer{background:var(--csx-overlay);border:1px solid var(--csx-line-2);box-shadow:var(--csx-shadow-pop)} .cscal .cs-tl-drawer-title{color:var(--csx-ink)} .cscal .cs-tl-drawer-sub{color:var(--csx-ink-2)} .cscal .cs-tl-drawer-close{background:var(--csx-surface);border:1px solid var(--csx-line);color:var(--csx-ink-2)} .cscal .cs-tl-drawer-close:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .cscal .cs-tl-drawer-link{color:var(--csx-accent-text)} /* ========================================================================== * SLICE 5 (redesign-0718-101 · 2026-07-19 · s5) — DASHBOARD EDIT MODE + WIDGETS * * Additive + fully namespaced (.csw-*). OUTSIDE edit mode the widget wrappers * add ZERO box (no border/background/margin) so the four default widgets render * byte-for-byte as the previous build; only the unchanged inner .csx-* markup * paints and its own margins reproduce the original spacing. The drag bar, * dashed outline and remove buttons appear ONLY when .csx-wrap gains * .is-editing. Library widgets (today / this-week / weather / quick-access) use * the shared .csw-card surface so they match the existing panels in light+dark. * ==========================================================================*/ .csw-grid{display:block} .csw{position:relative} .csw-body{min-width:0} /* edit affordances — hidden until edit mode */ .csw-bar{display:none} .csw-edithint{display:none} .csw-addbtn{display:none} .csx-wrap.is-editing .csw-edithint{ display:flex;align-items:center;gap:9px;margin:0 0 22px;padding:11px 16px; border:1px dashed var(--csx-line-2);border-radius:var(--csx-r-md); background:var(--csx-surface-2);color:var(--csx-ink-2);font-size:calc(13px * var(--text-scale, 1));line-height:1.4} .csx-wrap.is-editing .csw-edithint .csx-ico{color:var(--csx-ink-3);flex:none} .csx-wrap.is-editing .csw{ outline:1.5px dashed var(--csx-line-2);outline-offset:8px;border-radius:14px;margin-bottom:28px} .csx-wrap.is-editing .csw:last-child{margin-bottom:0} .csx-wrap.is-editing .csw-body{pointer-events:none} .csx-wrap.is-editing .csw[draggable="true"]{cursor:grab} .csw.csw-dragging{opacity:.42} .csx-wrap.is-editing .csw-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px} .csw-handle{display:inline-flex;align-items:center;gap:9px;cursor:grab;padding:6px 12px 7px; border-radius:var(--csx-r-pill);border:1px solid var(--csx-line-2);background:var(--csx-surface); color:var(--csx-ink-2);font-size:calc(13px * var(--text-scale, 1));font-weight:600;letter-spacing:-.01em} .csw-handle:active{cursor:grabbing} .csw-handle .csx-ico{color:var(--csx-ink-3);fill:currentColor;stroke:none} .csw-x{margin-left:auto;flex:none;width:30px;height:30px;display:grid;place-items:center; border-radius:9px;border:1px solid var(--csx-line-2);background:var(--csx-surface);color:var(--csx-ink-2);cursor:pointer} .csw-x:hover{background:var(--csx-st-red-bg);border-color:var(--csx-st-red);color:var(--csx-st-red-tx)} .csw-x .csx-ico{width:15px;height:15px;stroke-width:2} /* header controls — edit toggle + add-widget menu */ .csw-editbtn .csx-ico{color:var(--csx-ink-2)} .csx-wrap.is-editing .csw-editbtn{background:var(--csx-accent);color:var(--csx-accent-ink);border-color:var(--csx-accent)} .csx-wrap.is-editing .csw-editbtn .csx-ico{color:var(--csx-accent-ink)} .csx-wrap.is-editing .csw-addbtn{display:inline-flex} .csw-addwrap{position:relative;display:inline-flex} .csw-addmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:290px; background:var(--csx-overlay);border:1px solid var(--csx-line-2);border-radius:var(--csx-r-md); box-shadow:var(--csx-shadow-pop);padding:6px;display:flex;flex-direction:column;gap:2px} .csw-addmenu[hidden]{display:none} .csw-additem{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left; padding:10px 12px;border:0;border-radius:9px;background:none;cursor:pointer} .csw-additem:hover{background:var(--csx-surface-hover)} .csw-additem-t{font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);letter-spacing:-.01em} .csw-additem-d{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);line-height:1.35} .csw-addempty{padding:14px 12px;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);text-align:center} /* shared library-widget card */ .csw-card{background:var(--csx-surface);border:1px solid var(--csx-line);border-radius:var(--csx-r-lg); box-shadow:var(--csx-shadow-card);padding:22px 24px 24px;margin-bottom:44px} .csw-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:18px} .csw-hd h2{margin:0;font-size:calc(17px * var(--text-scale, 1));font-weight:600;letter-spacing:-.02em;color:var(--csx-ink)} .csw-sub{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csw-hlink{margin-left:auto;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2); display:inline-flex;align-items:center;gap:5px;text-decoration:none} .csw-hlink:hover{color:var(--csx-ink)} /* today's work list */ .csw-tlist{display:flex;flex-direction:column;margin:-6px -8px} .csw-trow{display:flex;align-items:center;gap:16px;padding:12px 8px;border-radius:var(--csx-r-md);text-decoration:none;color:inherit} .csw-trow:hover{background:var(--csx-surface-hover)} .csw-trow + .csw-trow{border-top:1px solid var(--csx-line)} .csw-ttime{font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);white-space:nowrap;min-width:62px} .csw-tmain{min-width:0;flex:1} .csw-tmain b{display:block;font-size:calc(14px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csw-tmain span{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csw-tpkg{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);white-space:nowrap;flex:none} /* this-week mini calendar */ .csw-week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px} .csw-day{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 6px 13px; border:0;border-radius:var(--csx-r-md);background:var(--csx-surface-2); text-decoration:none;color:inherit;transition:background-color .12s var(--csx-ease),box-shadow .12s var(--csx-ease)} .csw-day:hover{background:var(--csx-surface-hover)} .csw-day.is-today{box-shadow:inset 0 0 0 1.5px var(--csx-accent)} .csw-dow{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);text-transform:uppercase;letter-spacing:.03em} .csw-dnum{font-size:calc(19px * var(--text-scale, 1));font-weight:700;color:var(--csx-ink);letter-spacing:-.02em;line-height:1} .csw-day.is-today .csw-dnum{color:var(--csx-accent-text)} .csw-dmeta{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);white-space:nowrap} .csw-ddots{display:flex;gap:3px;min-height:5px} .csw-dot{width:5px;height:5px;border-radius:50%;background:var(--csx-st-violet)} /* weather strip */ .csw-wx{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} .csw-wxcell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px; border:0;border-radius:var(--csx-r-md);background:var(--csx-surface-2)} .csw-wxcell.is-today{box-shadow:inset 0 0 0 1.5px var(--csx-accent)} .csw-wxdow{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3);text-transform:uppercase;letter-spacing:.02em} .csw-wxic{font-size:calc(19px * var(--text-scale, 1));line-height:1} .csw-wxt{font-size:calc(14px * var(--text-scale, 1));font-weight:700;color:var(--csx-ink)} .csw-wxr{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-st-violet-tx);min-height:14px} /* quick-access tiles */ .csw-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:12px} .csw-tile{position:relative;display:flex;align-items:center;gap:12px;padding:14px 15px; border:0;border-radius:var(--csx-r-md);background:var(--csx-surface-2); text-decoration:none;color:inherit;transition:background-color .12s var(--csx-ease)} .csw-tile:hover{background:var(--csx-surface-hover)} .csw-tile-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:calc(13px * var(--text-scale, 1));font-weight:700;letter-spacing:0} .csw-tile-lb{font-size:calc(13.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csw-tile-ext{position:absolute;top:10px;right:10px;width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;color:var(--csx-ink-3);opacity:0;transition:opacity .12s var(--csx-ease)} .csw-tile:hover .csw-tile-ext{opacity:1} .csw-tile-add{cursor:pointer;font-family:inherit;background:none;border:1.5px dashed var(--csx-line-2)} .csw-tile-add:hover{background:var(--csx-surface-2);border-color:var(--csx-accent)} .csw-tile-plus{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none; font-size:calc(22px * var(--text-scale, 1));font-weight:400;line-height:1;color:var(--csx-ink-3);background:var(--csx-surface);border:1px solid var(--csx-line)} @media (max-width:1140px){ .csw-week,.csw-wx{grid-template-columns:repeat(4,1fr)} } @media (max-width:640px){ .csw-week,.csw-wx{grid-template-columns:repeat(3,1fr)} .csw-addmenu{width:min(290px,calc(100vw - 48px))} } /* ═══════════════════════════════════════════════════════════════════════════ * CS-PLAT-02 STEP 1 — Orders / Order / Day / New order / Clients * Additive only. Nothing above this line is redefined. Every colour comes * from a --csx-* / --cso-* token, so both themes are covered automatically. * ═══════════════════════════════════════════════════════════════════════ */ /* ── The three button tiers (C2C 214 §03). Same geometry as .csx-btn. ── */ .cso-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 16px 11px;border-radius:var(--csx-r-btn);font-family:inherit;font-size:calc(14px * var(--text-scale, 1)); font-weight:600;letter-spacing:-.01em;cursor:pointer;text-decoration:none;white-space:nowrap; /* ruling 20b */ border:1px solid var(--cso-dark-line);background:var(--cso-dark);color:var(--cso-dark-ink); transition:background .16s var(--csx-ease),border-color .16s var(--csx-ease)} .cso-btn:hover{background:var(--cso-dark-hover)} .cso-btn:focus-visible{outline:2px solid var(--csx-accent);outline-offset:2px} .cso-btn[disabled]{opacity:.45;cursor:not-allowed} .cso-btn.sm{padding:6px 11px 7px;font-size:calc(13px * var(--text-scale, 1))} .cso-btn.wide{width:100%} .cso-btn-bone{background:var(--cso-bone);border-color:var(--cso-bone);color:var(--cso-bone-ink)} .cso-btn-bone:hover{background:var(--cso-bone-hover);border-color:var(--cso-bone-hover)} .cso-btn-butter{background:var(--cso-butter);border-color:var(--cso-butter);color:var(--cso-butter-ink)} .cso-btn-butter:hover{background:var(--cso-butter-hover);border-color:var(--cso-butter-hover)} /* ── Page head + panels ── */ .cso-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px} .cso-head .cso-sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .cso-sub{color:var(--csx-ink-3);margin:4px 0 0;font-size:calc(13.5px * var(--text-scale, 1));max-width:74ch} .cso-panel{background:var(--csx-surface);border:1px solid var(--csx-line); border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);margin-bottom:20px} .cso-panel > h3{margin:0;padding:13px 16px;border-bottom:1px solid var(--csx-line); font-size:calc(13.5px * var(--text-scale, 1));font-weight:640;display:flex;align-items:center;gap:10px} .cso-panel > h3 .cso-sp{margin-left:auto;display:flex;gap:8px} .cso-panel .cso-in{padding:16px} .cso-two{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start} @media (max-width:1060px){.cso-two{grid-template-columns:1fr}} .cso-f2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media (max-width:640px){.cso-f2{grid-template-columns:1fr}} .cso-field{margin-bottom:14px} .cso-lbl{display:block;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2);margin:0 0 5px} .cso-in-txt,.cso-sel,.cso-ta{width:100%;padding:8px 11px;border:1px solid var(--csx-field-border); border-radius:var(--csx-r-sm);background:var(--csx-surface);color:var(--csx-ink);font:inherit;font-size:calc(13.5px * var(--text-scale, 1))} .cso-in-txt:focus,.cso-sel:focus,.cso-ta:focus{outline:none;border-color:var(--csx-accent); box-shadow:0 0 0 3px var(--csx-accent-soft)} .cso-hint{color:var(--csx-ink-3);font-size:calc(13px * var(--text-scale, 1));margin:6px 0 0} .cso-note{border-left:2px solid var(--cso-butter);background:var(--csx-surface-2); padding:11px 14px;border-radius:0 var(--csx-r-sm) var(--csx-r-sm) 0;font-size:calc(13px * var(--text-scale, 1));margin:12px 0} .cso-note.warn{border-left-color:var(--csx-st-amber)} .cso-note.bad{border-left-color:var(--csx-st-red)} .cso-empty{padding:26px;text-align:center;color:var(--csx-ink-3); border:1px dashed var(--csx-line-2);border-radius:var(--csx-r-sm)} /* ── Chips: one vocabulary for fulfilment + payment ── */ .cso-chip{display:inline-flex;align-items:center;gap:6px;font-size:calc(13px * var(--text-scale, 1));font-weight:600; padding:3px 9px;border-radius:var(--csx-r-chip);white-space:nowrap; color:var(--csx-ink-3);background:var(--csx-chip-step)} .cso-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .cso-chip.ok{color:var(--csx-st-green-tx);background:var(--csx-st-green-bg)} .cso-chip.warn{color:var(--csx-st-amber-tx);background:var(--csx-st-amber-bg)} .cso-chip.bad{color:var(--csx-st-red-tx);background:var(--csx-st-red-bg)} .cso-chip.info{color:var(--csx-st-violet-tx);background:var(--csx-st-violet-bg)} .cso-chip.plain::before{display:none} /* ── Tables ── */ .cso-tbl-wrap{overflow-x:auto;border:1px solid var(--csx-line);border-radius:var(--csx-r-lg); background:var(--csx-surface);box-shadow:var(--csx-shadow-card);margin-bottom:22px} .cso-tbl{border-collapse:collapse;width:100%;min-width:720px;font-size:calc(13.2px * var(--text-scale, 1))} .cso-tbl th,.cso-tbl td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--csx-line);vertical-align:middle} .cso-tbl thead th{font-size:calc(13px * var(--text-scale, 1));letter-spacing:.09em;text-transform:uppercase; color:var(--csx-ink-3);font-weight:600;background:var(--csx-surface-2)} .cso-tbl tbody tr:last-child td{border-bottom:none} .cso-tbl tbody tr.click{cursor:pointer} .cso-tbl tbody tr.click:hover{background:var(--csx-surface-hover)} .cso-tbl td.k{font-weight:620} .cso-tbl td .sub{display:block;color:var(--csx-ink-3);font-size:calc(13px * var(--text-scale, 1))} .cso-tbl td.num,.cso-tbl th.num{text-align:right;font-variant-numeric:tabular-nums} /* ── Totals block ── */ .cso-totals .r{display:flex;justify-content:space-between;gap:12px;padding:7px 0; font-size:calc(13.5px * var(--text-scale, 1));border-bottom:1px solid var(--csx-line)} .cso-totals .r:last-child{border-bottom:none;font-weight:660;font-size:calc(15px * var(--text-scale, 1));padding-top:11px} .cso-totals .r span:last-child{font-variant-numeric:tabular-nums} .cso-totals .r.line-edit input{width:104px;text-align:right;padding:5px 8px; border:1px solid var(--csx-field-border);border-radius:var(--csx-r-xs); background:var(--csx-surface);color:var(--csx-ink);font:inherit;font-size:calc(13px * var(--text-scale, 1)); font-variant-numeric:tabular-nums} /* ── Order timeline (created → confirmed → shot → delivered → invoiced → paid) ── */ .cso-tl{display:flex;list-style:none;margin:0;padding:4px 0 0;overflow-x:auto} .cso-tl li{flex:1;min-width:88px;position:relative;text-align:center; font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);padding-top:24px} .cso-tl li::before{content:"";position:absolute;left:50%;top:4px;width:12px;height:12px; border-radius:50%;background:var(--csx-surface-2);border:2px solid var(--csx-line-2); transform:translateX(-50%);z-index:1;box-sizing:border-box} .cso-tl li::after{content:"";position:absolute;top:9px;left:50%;right:-50%;height:2px;background:var(--csx-line-2)} .cso-tl li:last-child::after{display:none} .cso-tl li[data-state="done"]{color:var(--csx-ink-2)} .cso-tl li[data-state="done"]::before{background:var(--csx-st-green);border-color:var(--csx-st-green)} .cso-tl li[data-state="done"]::after{background:var(--csx-st-green)} .cso-tl li[data-state="now"]{color:var(--csx-ink);font-weight:600} .cso-tl li[data-state="now"]::before{background:var(--cso-butter);border-color:var(--cso-butter)} .cso-tl li small{display:block;font-weight:400;color:var(--csx-ink-3);font-size:calc(13px * var(--text-scale, 1))} /* ── Day view: busy blocks + free slots ── */ .cso-daybar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .cso-busy{display:flex;gap:12px;padding:10px 13px;border:1px solid var(--csx-line); border-radius:var(--csx-r-sm);background:var(--csx-surface);margin-bottom:8px;align-items:flex-start; border-left:2.5px solid var(--csx-ink-3)} .cso-busy.is-booking{border-left-color:var(--csx-st-violet)} .cso-busy .tm{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);width:104px;flex:none;font-variant-numeric:tabular-nums} .cso-busy b{display:block;font-size:calc(13.5px * var(--text-scale, 1));font-weight:620} .cso-busy .m{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:2px} .cso-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px} .cso-slot{padding:9px 6px;border:1px solid var(--cso-slot-line);border-radius:var(--csx-r-sm); background:var(--cso-slot-bg);color:var(--csx-ink);cursor:pointer;font:inherit;font-size:calc(13px * var(--text-scale, 1)); text-align:center;font-variant-numeric:tabular-nums} .cso-slot:hover{background:var(--csx-surface-hover)} .cso-slot[aria-pressed="true"]{background:var(--cso-bone);border-color:var(--cso-bone); color:var(--cso-bone-ink);font-weight:600} .cso-slot small{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);font-weight:400} .cso-slot[aria-pressed="true"] small{color:var(--cso-bone-ink);opacity:.7} /* ── Client / service pickers ── */ .cso-pick{max-height:260px;overflow-y:auto;border:1px solid var(--csx-line-2); border-radius:var(--csx-r-sm);background:var(--csx-surface)} .cso-pick button{display:flex;width:100%;gap:10px;align-items:baseline;padding:9px 13px; border:0;border-bottom:1px solid var(--csx-line);background:transparent;color:var(--csx-ink); font:inherit;font-size:calc(13.2px * var(--text-scale, 1));text-align:left;cursor:pointer} .cso-pick button:last-child{border-bottom:none} .cso-pick button:hover{background:var(--csx-surface-hover)} .cso-pick button[aria-pressed="true"]{background:var(--csx-nav-active);font-weight:600} .cso-pick .sub{margin-left:auto;color:var(--csx-ink-3);font-size:calc(13px * var(--text-scale, 1))} .cso-svc{display:flex;gap:12px;padding:11px 13px;border:1px solid var(--csx-line); border-radius:var(--csx-r-sm);margin-bottom:8px;background:var(--csx-surface);align-items:center;cursor:pointer} .cso-svc:hover{background:var(--csx-surface-hover)} .cso-svc input[type=checkbox]{width:16px;height:16px;accent-color:var(--csx-accent);flex:none;cursor:pointer} .cso-svc b{display:block;font-size:calc(13.5px * var(--text-scale, 1));font-weight:630} .cso-svc .d{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:1px} .cso-svc .pr{margin-left:auto;display:flex;align-items:center;gap:6px; font-weight:640;font-variant-numeric:tabular-nums;white-space:nowrap} .cso-svc .pr input{width:88px;text-align:right;padding:5px 8px;border:1px solid var(--csx-field-border); border-radius:var(--csx-r-xs);background:var(--csx-surface);color:var(--csx-ink);font:inherit;font-size:calc(13px * var(--text-scale, 1))} .cso-svc:has(input[type=checkbox]:checked){border-color:var(--csx-line-2);background:var(--csx-surface-2)} /* ══ Production board (/cs/production, CS-PLAT-02 STEP 2) ══════════════════ * Same register as the /cs order screens: every colour, radius and shadow * comes from a --csx-* / --cso-* token, so light and dark are both covered * and csx-guard stays clean. Twilight gets the violet status token (C2C 200 * item 20 wants twilight visible at a glance). */ .csp-boardwrap{overflow-x:auto;padding-bottom:6px} .csp-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:14px;min-width:min-content} .csp-col{background:var(--csx-surface-2);border:1px solid var(--csx-line); border-radius:var(--csx-r-lg);padding:12px;min-width:232px} .csp-col h6{margin:0 0 10px;display:flex;align-items:center;gap:7px; font-size:calc(13px * var(--text-scale, 1));letter-spacing:.09em;text-transform:uppercase; font-weight:700;color:var(--csx-ink-2)} .csp-col h6 .n{display:inline-flex;align-items:center;justify-content:center; min-width:19px;height:18px;padding:0 5px;border-radius:var(--csx-r-pill); background:var(--csx-surface);border:1px solid var(--csx-line-2); font-size:calc(13px * var(--text-scale, 1));letter-spacing:0;color:var(--csx-ink-2)} .csp-stack{display:flex;flex-direction:column;gap:8px} .csp-none{margin:0;padding:10px 2px;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csp-card{display:block;width:100%;text-align:left;cursor:pointer;font:inherit; padding:11px 12px;border:1px solid var(--csx-line);border-radius:var(--csx-r-sm); background:var(--csx-surface);color:var(--csx-ink);box-shadow:var(--csx-shadow-card)} .csp-card:hover{background:var(--csx-surface-hover)} .csp-card:focus-visible{outline:2px solid var(--csx-accent);outline-offset:2px} .csp-card.is-open{border-color:var(--cso-bone);background:var(--csx-surface-hover)} .csp-card b{display:block;font-size:calc(13.4px * var(--text-scale, 1));font-weight:640;letter-spacing:-.01em} .csp-card .m{display:block;margin-top:2px;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csp-card .f{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px} .csp-twi{color:var(--csx-st-violet-tx);background:var(--csx-st-violet-bg)} /* ── Job costs on the order screen ── */ .cso-cost{display:flex;gap:12px;align-items:baseline;padding:8px 0; border-bottom:1px solid var(--csx-line);font-size:calc(13px * var(--text-scale, 1))} .cso-cost:last-child{border-bottom:none} .cso-cost .kd{width:74px;flex:none;font-weight:620;text-transform:capitalize} .cso-cost .nt{color:var(--csx-ink-3);font-size:calc(13px * var(--text-scale, 1))} .cso-cost .amt{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:620;white-space:nowrap} /* ══ Smart booking desk (/cs/smart, CS-PLAT-02 STEP 3) ═════════════════════ * Same register as the rest of the cockpit: every colour, radius and shadow * comes from a --csx-* / --cso-* token, so light and dark are both covered and * csx-guard stays clean. Butter is used exactly once per proposal, on Confirm. */ .csb-paste{min-height:180px;line-height:1.5;font-family:inherit;resize:vertical} .csb-draft{min-height:300px;line-height:1.55;font-family:inherit;resize:vertical} .csb-chips{display:flex;flex-wrap:wrap;gap:7px} .csb-chip{padding:6px 12px;border:1px solid var(--csx-line-2);border-radius:var(--csx-r-pill); background:var(--csx-surface);color:var(--csx-ink-2);font:inherit;font-size:calc(13px * var(--text-scale, 1)); font-weight:560;cursor:pointer;white-space:nowrap} .csb-chip:hover{background:var(--csx-surface-hover)} .csb-chip.on{background:var(--cso-bone);border-color:var(--cso-bone);color:var(--cso-bone-ink)} .csb-slots{display:flex;flex-direction:column;gap:10px} .csb-slot{border:1px solid var(--csx-line);border-radius:var(--csx-r-sm); background:var(--csx-surface);padding:13px 14px} .csb-slot:first-child{border-color:var(--csx-line-2);background:var(--csx-surface-2)} .csb-when b{display:block;font-size:calc(14px * var(--text-scale, 1));font-weight:640;letter-spacing:-.01em} .csb-when span{display:block;margin-top:2px;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csb-why{margin:9px 0 11px;padding-left:17px;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);line-height:1.55} .csb-why li{margin:0 0 2px} /* ── Tool doors on the order screen (links only, disabled with a reason) ── */ .cso-doors{display:grid;grid-template-columns:1fr;gap:8px} .cso-door{display:flex;flex-direction:column;gap:2px;padding:10px 12px; border:1px solid var(--csx-line);border-radius:var(--csx-r-sm); background:var(--csx-surface);color:var(--csx-ink);text-decoration:none} a.cso-door:hover{background:var(--csx-surface-hover);border-color:var(--csx-line-2)} .cso-door b{font-size:calc(13.4px * var(--text-scale, 1));font-weight:620;letter-spacing:-.01em} .cso-door span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .cso-door.is-off{opacity:.62;cursor:not-allowed} /* ── CS-PLAT-02 STEP 4 — tasks, regions, day route ───────────────────────── Tokens only. Butter / Bone / Dark buttons come from the .cso-btn tiers above; nothing here introduces a colour, a radius or a shadow of its own. */ .cst-list{display:flex;flex-direction:column} .cst-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0; border-bottom:1px solid var(--csx-line)} .cst-row:last-child{border-bottom:none} .cst-row .bd{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .cst-row .bd b{font-size:calc(13.6px * var(--text-scale, 1));font-weight:630;letter-spacing:-.01em} .cst-row .bd span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .cst-row.is-done .bd b{text-decoration:line-through;color:var(--csx-ink-3);font-weight:520} .cst-detail{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);line-height:1.45} .cst-cb{flex:none;width:20px;height:20px;margin-top:1px;display:inline-flex; align-items:center;justify-content:center;cursor:pointer;font-size:calc(13px * var(--text-scale, 1));line-height:1; border:1px solid var(--csx-field-border);border-radius:var(--csx-r-sm); background:var(--csx-surface);color:transparent;transition:background .12s,color .12s} .cst-cb:hover{background:var(--csx-surface-hover)} .cst-cb:focus-visible{outline:2px solid var(--csx-accent);outline-offset:2px} .cst-cb[aria-pressed="true"]{background:var(--cso-bone);border-color:var(--cso-bone);color:var(--cso-bone-ink)} .cst-cb[disabled]{opacity:.45;cursor:not-allowed} .csr-list{display:flex;flex-direction:column} .csr-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0; border-bottom:1px solid var(--csx-line)} .csr-row:last-child{border-bottom:none} .csr-zone{flex:none;width:26px;height:26px;display:inline-flex;align-items:center; justify-content:center;font-size:calc(13px * var(--text-scale, 1));font-weight:660; border:1px solid var(--csx-line-2);border-radius:var(--csx-r-sm); background:var(--csx-surface-2);color:var(--csx-ink-2)} .csr-row .bd{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .csr-row .bd b{font-size:calc(13.6px * var(--text-scale, 1));font-weight:630;letter-spacing:-.01em} .csr-row .bd span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csr-fsa{font-variant-numeric:tabular-nums;letter-spacing:.02em} .csr-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px; font-size:calc(13px * var(--text-scale, 1));white-space:nowrap} .csd-rail{display:flex;flex-direction:column} .csd-stop{display:flex;gap:12px;align-items:flex-start;padding:12px; border:1px solid var(--csx-line);border-radius:var(--csx-r-sm); background:var(--csx-surface-2)} .csd-stop.is-twilight{border-color:var(--csx-st-violet-tx)} .csd-stop .pin{flex:none;width:24px;height:24px;display:inline-flex;align-items:center; justify-content:center;font-size:calc(13px * var(--text-scale, 1));font-weight:660;border-radius:var(--csx-r-pill); background:var(--cso-bone);color:var(--cso-bone-ink)} .csd-stop .bd{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1} .csd-stop .bd b{font-size:calc(13.8px * var(--text-scale, 1));font-weight:640;letter-spacing:-.01em} .csd-stop .meta{display:flex;gap:7px;flex-wrap:wrap;align-items:center; font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csd-stop .meta .tm{font-variant-numeric:tabular-nums;font-weight:620;color:var(--csx-ink-2)} .csd-access{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2)} .csd-leg{display:flex;gap:10px;align-items:center;padding:7px 0 7px 36px; font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .csd-leg .sp{margin-left:auto;display:flex;gap:12px} .csd-leg a{color:var(--csx-ink-2);text-decoration:underline;text-underline-offset:2px} .csd-leg a:hover{color:var(--csx-ink)} /* CS-PLAT-03 — categorised, foldable sidebar (Operations / Clients & money / System settings) */ .csx-nav-group{display:flex;flex-direction:column;gap:2px;margin-top:6px} .csx-nav-group:first-child{margin-top:0} .csx-nav-grouphead{ display:flex;align-items:center;justify-content:space-between;width:100%; padding:8px 12px 4px;border:0;background:transparent;cursor:pointer; color:var(--csx-ink-3);font:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:600;letter-spacing:.02em;text-transform:uppercase; border-radius:var(--csx-r-btn); } .csx-nav-grouphead:hover{color:var(--csx-ink-2)} .csx-nav-grouphead .csx-chev{transition:transform .15s var(--csx-ease);transform:rotate(-90deg)} .csx-nav-group.is-open .csx-nav-grouphead .csx-chev{transform:rotate(0)} .csx-nav-groupbody{display:flex;flex-direction:column;gap:2px} /* CS-PLAT-04 (Dom 2026-08-19): the calendar is dark whatever the toggle says. A control that cannot do anything is worse than no control, so it is hidden on that screen rather than left there doing nothing. The preference itself is untouched and applies again the moment you leave. */ [data-theme-locked] .csx-seg-theme { display: none; } /* ── /cs/sun (CS-PLAT-04) — the map is the page ────────────────────────────── No boxed column: chrome floats on the progressive blur stack so the map comes into focus as it slides out from under it. Butter appears on the sun, the active slider and the one number that decides the day. Nothing else. */ /* CS-FIX3 (Dom 2026-08-19: "the layout is messed up — please use our elements"). The old screen was position:fixed with bespoke blur panes, a bespoke control card, bespoke pill buttons and a bespoke slider — five inventions on a surface that already owns all five. It is now an ordinary .csx-wrap page: the cockpit header, .cso-panel cards, .cso-btn buttons, .cso-in-txt fields, the calendar panel's .cs-color-range sliders, .cs-color-sw circular swatches and .csx-stat tiles. Nothing here is fixed, so nothing can slide under the 260 px sidebar and the page needs no demo-banner offset of its own. */ /* The map is the page: full bleed, but INSIDE the 260 px sidebar so nothing can hide under it, and clear of the demo banner when one is up. */ .cssun { position: fixed; overflow: hidden; top: 0; right: 0; bottom: 0; left: 260px; } body:has(.demo-banner) .cssun { top: 38px; } @media (max-width: 900px) { .cssun { left: 0; top: 56px; } } /* Two class names deep on purpose. The map library stamps its own class on this element and its stylesheet is appended to at runtime, so it lands AFTER this file and its `position: relative` beats a single-class rule of the same weight — the element then has no positioned box and the map collapses. */ .cssun > .cssun-map { position: absolute; inset: 0; height: auto; } /* THE panel. Positioning only — every other value comes from .cs-color-panel, which is the calendar colours panel this is a second use of. Fixed rather than absolute so the shared makeDraggable()'s viewport clamp is exact. */ /* The help desk's floating button lives in the bottom-right corner of every screen, so the panel keeps a lane clear at the end rather than parking the last reading underneath it. */ .cssun-panel { position: fixed; top: 16px; right: 16px; z-index: 40; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding-bottom: 56px; } body:has(.demo-banner) .cssun-panel { top: 54px; } /* On a phone the panel is bottom-anchored — the controls land in thumb reach and the map stays visible above them, instead of one full-screen sheet with the map hidden behind it. The burger lives top-left, so nothing collides. */ @media (max-width: 900px) { .cssun-panel, body:has(.demo-banner) .cssun-panel { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; max-height: 62vh; padding-bottom: 18px; } } .cssun-panel.is-dragging { cursor: grabbing; } .cssun-panel .cs-color-head { cursor: grab; margin-bottom: 14px; } .cssun-sws { padding-left: 0; margin: 12px 0 4px; } .cssun-date { width: auto; } /* the time row */ .cssun-clockrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .cssun-clock { display: flex; align-items: baseline; gap: 5px; margin-right: auto; } .cssun-clock b { font-size: calc(34px * var(--text-scale, 1)); font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--csx-ink); } .cssun-clock span { font-size: calc(15px * var(--text-scale, 1)); color: var(--csx-ink-2); } .cssun-scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 5px; font-size:calc(13px * var(--text-scale, 1)); color: var(--csx-ink-3); font-variant-numeric: tabular-nums; } /* five readings — the dashboard's stat tile, laid out for a panel rather than a 1200 px page. Nothing about the tile itself changes. */ .cssun-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 0; } .cssun-stats .csx-stat { padding: 14px 14px 15px; } .cssun-stats .csx-lbl { margin-bottom: 8px; } .cssun-stats .csx-val { font-size: calc(23px * var(--text-scale, 1)); letter-spacing: -.03em; } .cssun-stats .csx-foot { margin-top: 8px; min-height: 0; } @media (max-width: 620px) { .cssun-stats { grid-template-columns: repeat(2, 1fr); } } /* the day as light */ .cssun-strip { position: relative; height: 4px; background: var(--csx-line-2); } .cssun-strip i { position: absolute; top: 0; bottom: 0; } .cssun-strip .lit { background: hsla(52,100%,60%,.34); } .cssun-strip .gold { background: #e8b800; } .cssun-strip .blue { background: hsla(220,70%,60%,.45); } .cssun-strip .now { width: 2px; top: -4px; bottom: -4px; background: var(--csx-ink); } .cssun-ticks { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size:calc(13px * var(--text-scale, 1)); color: var(--csx-ink-2); flex-wrap: wrap; } .cssun-ticks b { color: var(--csx-ink); font-weight: 600; font-variant-numeric: tabular-nums; } .cssun-verdict { margin: 18px 0 0; font-size: calc(14px * var(--text-scale, 1)); color: var(--csx-ink-2); } .cssun-verdict b { color: var(--csx-ink); font-weight: 600; } /* Mini shadow map inside the drag peek: appears only when the booking has coordinates, so the panel never shows an empty grey box. */ .cs-tl-peek { width: 236px; } .cs-tl-peek.has-map { width: 260px; } .cs-tl-peek-map { display: none; height: 0; margin: -12px -14px 10px; border-bottom: 1px solid var(--csx-line); } .cs-tl-peek.has-map .cs-tl-peek-map { display: block; height: 150px; } /* Customisable calendar ground (CS-PLAT-04). Absent variable = the theme's own. */ .cscal { background: var(--cal-bg, transparent); } .cscal .cs-cal-card, .cscal .cs-cal-timeline { background-color: var(--cal-bg, inherit); } .cs-color-pick { width: 100%; margin-bottom: 10px; } .cs-color-current { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size:calc(13px * var(--text-scale, 1)); color: var(--csx-ink-2); } .cs-color-slab { display: block; margin-top: 12px; font-size:calc(13px * var(--text-scale, 1)); color: var(--csx-ink-2); } .cs-color-slab input[type="range"] { margin-top: 6px; } .cs-color-slab input[type="color"] { display: block; margin-top: 6px; width: 40px; height: 26px; padding: 0; border: 1px solid var(--csx-line-2); background: none; } /* Map thumb pad: a plus-shaped joystick, bottom-left so it never fights MapLibre's own zoom cluster on the right. Press and hold to keep turning. */ .cs-map-pad { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); gap: 2px; opacity: .9; } .cs-map-pad button { border: 1px solid var(--csx-line-2); background: var(--csx-surface); color: var(--csx-ink); font-size:calc(13px * var(--text-scale, 1)); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .cs-map-pad button:hover { background: var(--csx-surface-hover); } .cs-map-pad [data-nudge="tilt-up"] { grid-area: 1 / 2; } .cs-map-pad [data-nudge="rot-left"] { grid-area: 2 / 1; } .cs-map-pad [data-nudge="reset"] { grid-area: 2 / 2; } .cs-map-pad [data-nudge="rot-right"] { grid-area: 2 / 3; } .cs-map-pad [data-nudge="tilt-down"] { grid-area: 3 / 2; } .cssun-map, .cs-tl-peek-map { position: relative; } /* The peek's map is small: pad would swallow it, so it hides there. */ .cs-tl-peek-map .cs-map-pad { display: none; } /* Address suggestions, the website's mechanics in the cockpit (CS-PLAT-04). */ .csaddr { position: relative; } .csaddr-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; display: none; background: var(--csx-overlay); border: 1px solid var(--csx-line-2); box-shadow: var(--csx-shadow-pop); max-height: 280px; overflow-y: auto; } .csaddr-list.is-open { display: block; } .csaddr-list button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; cursor: pointer; color: var(--csx-ink); font: inherit; border-bottom: 1px solid var(--csx-line); } .csaddr-list button:last-child { border-bottom: 0; } .csaddr-list button:hover, .csaddr-list button.is-on { background: var(--csx-surface-hover); } .csaddr-main { display: block; font-weight: 600; } .csaddr-sec { display: block; font-size:calc(13px * var(--text-scale, 1)); color: var(--csx-ink-2); margin-top: 2px; } .cso-addr-edit { background: none; border: 0; color: var(--csx-accent-text, #D60012); font: 600 calc(12px * var(--text-scale, 1))/1 inherit; cursor: pointer; padding: 0 2px; margin-left: 6px; } .cso-addr-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; } .cso-addr-form .csaddr { flex: 1; min-width: 240px; } .cso-addr-form [data-addr-note] { flex-basis: 100%; margin: 0; } /* ── Map dock: one cluster, bottom right (CS-PLAT-04) ───────────────────────── */ /* Map controls (Dom 2026-08-19: "ugly icons" — and "blur covers the elements"). One grouped card in the cockpit's own register: --csx- surface, --csx-line border, the standard button radius, no backdrop-filter anywhere, and the buttons are .csx-icobtn carrying .csx-ico monoline SVGs like every other icon button in /cs. Two columns so nine controls stay in thumb reach. Bottom LEFT, not right: the panel now owns the right edge of /cs/sun, and a control cluster you cannot see is not a control cluster. */ .cs-map-dock { position: absolute; left: 12px; bottom: 12px; z-index: 6; display: grid; grid-template-columns: repeat(2, 34px); gap: 4px; padding: 6px; border: 1px solid var(--csx-line); border-radius: var(--csx-r-btn); background: var(--csx-surface); box-shadow: var(--csx-shadow-card); } .cs-map-dock .csx-icobtn { width: 34px; height: 32px; border-color: transparent; background: none; } .cs-map-dock .csx-icobtn:hover { background: var(--csx-surface-hover); border-color: var(--csx-line); } .cs-map-compass { grid-column: 1 / -1; width: 100% !important; } .cs-map-needle { transition: transform .12s linear; } /* Phone: the panel is bottom-anchored, so the controls move to the top-right, clear of the burger on the left. */ @media (max-width: 900px) { .cs-map-dock { top: 12px; right: 12px; left: auto; bottom: auto; } body:has(.demo-banner) .cs-map-dock { top: 50px; } } /* Light of the hour, over the canvas and under the chrome. */ .cs-map-wash { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: background .5s ease, opacity .5s ease; } .is-orbiting { cursor: grabbing; } .cs-tl-peek-map .cs-map-dock { display: none; } /* Grazing sun: the scene dims instead of drawing a black jigsaw of shadows. */ .cs-map-graze { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #0d1016; opacity: 0; transition: opacity .4s ease; } /* Order actions (CS-PLAT-04): the next step leads, cancelling is pushed away. Destructive outline per the action doctrine, never a filled button outside a final confirmation. */ .cso-spacer { flex: 1 1 auto; min-width: 12px; } .cso-btn-danger { border-color: color-mix(in srgb, var(--brand) 42%, transparent) !important; color: var(--brand-deep) !important; background: transparent !important; } .cso-btn-danger:hover { background: color-mix(in srgb, var(--brand) 12%, transparent) !important; border-color: color-mix(in srgb, var(--brand) 70%, transparent) !important; } /* CS-PLAT-05: an order booked from the calendar carries a second pill until its services exist, and one link straight to the screen that fixes that. */ .cso-chip-setup{white-space:nowrap} .cso-setup-link{font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-accent-text);text-decoration:none;white-space:nowrap;margin-left:2px} .cso-setup-link:hover{text-decoration:underline} /* ── NEW-BOOKING ALERT · the green never-miss section (Dom 2026-08-29) ────── * "if a new booking comes it shows green on top as a banner or green section so * its never missed... in our Dash and in the orders." Pinned ABOVE the filters * on /cs/dashboard, /cs/orders and /cs/bookings, painted from the same * needsSetup() that paints the red "Scheduled · not set up" chip further down * the list (components/new-bookings.js). It is state-driven: a booking leaves * the section the moment it is set up, and when the count is zero the section * is not rendered at all — no empty state, no dismiss, no localStorage. * * Solid green + white ink is the ONE place a status colour is a fill: this is * the alert surface Dom asked for by name. --csx-st-green-fill is pinned across * both themes so the white ink clears AA either way (4.99:1). Rows separate by * whitespace + a 2px gap, never a rule (ruling 19a); every row is one 44px hit * area; every label is one line (ruling 20b); radii come off the ladder. */ .csnb{margin:0 0 22px;border-radius:var(--csx-r-lg);overflow:hidden; background:var(--csx-st-green-bg);box-shadow:var(--csx-shadow-card)} .csnb-head{display:flex;align-items:center;gap:9px;padding:9px 14px; background:var(--csx-st-green-fill);color:#FFFFFF; font-size:calc(13px * var(--text-scale, 1));letter-spacing:-.01em;white-space:nowrap} .csnb-head b{font-weight:700} .csnb-head .csnb-n{font-weight:500;opacity:.92} .csnb-dot{width:7px;height:7px;border-radius:50%;flex:none;background:#FFFFFF} .csnb-rows{display:flex;flex-direction:column;gap:2px;padding:2px} .csnb-row{display:flex;align-items:center;gap:12px;min-height:44px;padding:7px 12px; border-radius:var(--csx-r-sm);background:var(--csx-surface);color:var(--csx-ink); text-decoration:none;font-size:calc(13px * var(--text-scale, 1))} .csnb-row:hover{background:var(--csx-surface-hover)} .csnb-row:focus-visible{outline:2px solid var(--csx-st-green-fill);outline-offset:-2px} .csnb-who{font-weight:600;flex:none;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csnb-addr{flex:1;min-width:0;color:var(--csx-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csnb-when{flex:none;color:var(--csx-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums} .csnb-no{flex:none;color:var(--csx-ink-3);white-space:nowrap} .csnb-go{margin-left:auto;flex:none;font-weight:600;color:#FFFFFF; background:var(--csx-st-green-fill);padding:8px 12px;border-radius:var(--csx-r-btn);white-space:nowrap} .csnb-row:hover .csnb-go{filter:brightness(1.12)} /* Narrow: the row folds to a fixed THREE lines rather than squeezing the action off the edge — client + time, address, order no + action. Fixed on purpose: a row that folds differently depending on how long the address is leaves a ragged block of dead space (law 22). Labels stay one line throughout. */ @media (max-width:820px){ .csnb-row{flex-wrap:wrap;gap:4px 10px;padding:9px 12px} .csnb-who{order:1;flex:1 1 100%;min-width:0;max-width:none} .csnb-addr{order:2;flex:1 1 100%;min-width:0} .csnb-when{order:3;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .csnb-no{order:4;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .csnb-go{order:5;margin-left:auto} } /* ═══ SYSTEM-FIX 2026-08-19 · orders board, session state ═══════════════ Append-only. Audit 224 A1, A66, and Dom's 08-19 04:00 ruling on the orders list (Client · Address · Date on top, the number demoted). */ /* Signed-out state — never the sandbox seed (audit A1) */ .cs-signedout{min-height:70vh;display:grid;place-items:center;padding:40px 20px} .cs-signedout-card{max-width:460px;text-align:center;border:1px solid var(--csx-line); border-radius:var(--csx-r-lg);background:var(--csx-surface);padding:36px 32px} .cs-signedout-actions{margin-top:22px;display:flex;justify-content:center;gap:10px} /* Board toolbar: search + result count */ .cso-toolbar{display:flex;align-items:center;gap:14px;margin:14px 0 16px;flex-wrap:wrap} .cso-search{max-width:340px;width:100%} .cso-toolbar .cso-hint{margin:0;white-space:nowrap} /* Sortable headers. The identity column carries four sort keys because the four facts it stacks are all things Dom sorts by. */ .cso-th-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .cso-sort{appearance:none;background:none;border:0;padding:3px 6px;margin:0;cursor:pointer; font:inherit;font-size:calc(13px * var(--text-scale, 1));letter-spacing:.09em;text-transform:uppercase;font-weight:650; color:var(--csx-ink-3);border-radius:6px;display:inline-flex;align-items:center;gap:4px; transition:color .14s ease,background .14s ease} .cso-sort:hover{color:var(--csx-ink);background:var(--csx-surface-hover)} .cso-sort:focus-visible{outline:2px solid var(--csx-accent);outline-offset:1px} .cso-sort.is-on{color:var(--csx-ink);background:var(--csx-surface-hover)} .cso-sort-ar{font-size:calc(13px * var(--text-scale, 1));line-height:1;width:8px;display:inline-block;text-align:center} /* CS-PLAT-09/table-sort: the "plain" variant keeps the host table's existing * header typography and only adds the click affordance + arrow — for tables * (like /cs/invoices) whose look is already approved and must not change. */ .cso-sort.is-plain{text-transform:none;letter-spacing:.01em;font-weight:600} .cso-tbl-orders thead th{padding-top:9px;padding-bottom:9px} .cso-tbl-orders th.num .cso-sort{margin-left:auto} .cso-tbl-orders th.num{text-align:right} .cso-tbl-orders th.num .cso-sort{display:inline-flex} /* Stacked identity cell: Client / Address / Shoot, number demoted underneath */ .cso-idcell{min-width:280px;line-height:1.45;padding-top:13px;padding-bottom:13px} .cso-idcell b{display:block;font-weight:650;font-size:calc(13.6px * var(--text-scale, 1));color:var(--csx-ink)} .cso-idcell-addr{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2)} .cso-idcell-when{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2)} .cso-idcell-no{display:block;margin-top:3px;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .cso-tax,.csx-tax{color:var(--csx-ink-3);font-size:calc(13px * var(--text-scale, 1));font-weight:500} .cso-totals .r.is-total{font-weight:650} /* Designed empty state (audit A66) — a next action, never a bare sentence */ .cso-empty-designed{display:flex;flex-direction:column;align-items:center;gap:10px} .cso-empty-designed b{color:var(--csx-ink);font-size:calc(14px * var(--text-scale, 1))} .cso-empty-designed .cso-sp{display:flex;gap:8px;margin-top:4px} /* Stale-data banner (audit A9) + the payment-method dialog (audit A67/A68) */ .cs-stale-wrap{position:sticky;top:0;z-index:70;padding:10px 26px 0 286px} @media (max-width:900px){.cs-stale-wrap{padding:10px 16px 0}} .cs-stale{margin:0} .csx-modal-back{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55); display:grid;place-items:center;padding:24px} .csx-modal{width:100%;max-width:420px;background:var(--csx-overlay); border:1px solid var(--csx-line);border-radius:var(--csx-r-lg);padding:24px} .csx-modal h3{margin:0 0 8px;font-size:calc(17px * var(--text-scale, 1));font-weight:650;color:var(--csx-ink)} .csx-modal p{margin:0 0 18px;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2)} .csx-modal-lbl{display:block;font-size:calc(13px * var(--text-scale, 1));letter-spacing:.09em;text-transform:uppercase; color:var(--csx-ink-3);margin-bottom:6px} .csx-modal-sel{width:100%;padding:9px 11px;border:1px solid var(--csx-field-border); border-radius:var(--csx-r-sm);background:var(--csx-field);color:var(--csx-ink);font:inherit;font-size:calc(13.5px * var(--text-scale, 1))} .csx-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px} /* ─── /cs/comms — the comms panel (2026-08-19, incident C2C annexes/227) ──── Append-only. Tokens only: no raw hex, no raw-colour shadow, radii from the --csx-r-* scale. Everything else on the screen reuses the existing register (.cso-panel, .cso-tbl, .cso-chip, .csset-switch, .csp-drawer). */ .cscom-master{display:flex;align-items:center;gap:16px;padding:18px 20px; border:1px solid var(--csx-line);border-radius:var(--csx-r-md);background:var(--csx-surface-2)} .cscom-master.is-off{border-color:var(--csx-st-red);background:var(--csx-st-red-bg)} .cscom-master.is-on{border-color:var(--csx-st-green);background:var(--csx-st-green-bg)} .cscom-master .t{display:flex;flex-direction:column;gap:4px;min-width:0} .cscom-master .t b{font-size:calc(16.5px * var(--text-scale, 1));font-weight:650;letter-spacing:-.012em;color:var(--csx-ink)} .cscom-master.is-off .t b{color:var(--csx-st-red-tx)} .cscom-master.is-on .t b{color:var(--csx-st-green-tx)} .cscom-master .t span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);line-height:1.5} .cscom-rows{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px} .cscom-row{display:flex;align-items:center;gap:13px;flex:1 1 340px;min-width:0; padding:13px 15px;border:1px solid var(--csx-line);border-radius:var(--csx-r-md); background:var(--csx-surface)} .cscom-row .csx-ring{width:38px;height:38px;border-radius:var(--csx-r-btn);display:grid;place-items:center;flex:none} .cscom-row .t{display:flex;flex-direction:column;gap:2px;min-width:0} .cscom-row .t b{font-size:calc(13px * var(--text-scale, 1));font-weight:640;color:var(--csx-ink)} .cscom-row .t span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);line-height:1.45} .cscom-tmpl{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--csx-line)} .cscom-tmpl:first-child{border-top:0;padding-top:0} .cscom-tmpl .t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .cscom-tmpl .t b{font-size:calc(13px * var(--text-scale, 1));font-weight:620;color:var(--csx-ink)} .cscom-tmpl .t span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cscom-to{font-variant-numeric:tabular-nums;white-space:nowrap} .cscom-sub{display:block;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);margin-top:2px; max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cscom-reveal{background:none;border:0;padding:0;font:inherit;color:var(--csx-ink); cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px} .cscom-reveal:hover{color:var(--csx-accent-text)} .cscom-reveal:focus-visible{outline:2px solid var(--csx-accent);outline-offset:2px} .cscom-body{white-space:pre-wrap;word-break:break-word} .csx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ─── /cs/comms — notifications tab ─────────────────────────────────────── */ .cscom-tabs{margin:0 0 20px} .cscom-tabs .csx-count{margin-left:7px} .cscom-notif{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--csx-line)} .cscom-notif:first-child{border-top:0;padding-top:0} .cscom-notif .t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .cscom-notif .t b{font-size:calc(13.5px * var(--text-scale, 1));font-weight:640;color:var(--csx-ink)} .cscom-notif .t > span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);line-height:1.45} .cscom-notif .cscom-meta{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .cscom-notif.is-read .t b{font-weight:560;color:var(--csx-ink-2)} .cscom-unread{width:7px;height:7px;border-radius:50%;background:var(--csx-accent);flex:none} .cscom-notif.is-read .cscom-unread{background:transparent} .cscom-rulehead{display:grid;grid-template-columns:1fr 64px 64px 64px;gap:12px;align-items:end; padding:10px 0 8px;font-size:calc(13px * var(--text-scale, 1));font-weight:600;letter-spacing:.03em;text-transform:uppercase; color:var(--csx-ink-3)} .cscom-rulehead span:not(:first-child){text-align:center} .cscom-rule{display:grid;grid-template-columns:1fr 64px 64px 64px;gap:12px;align-items:center; padding:11px 0;border-top:1px solid var(--csx-line)} .cscom-rule .t{display:flex;flex-direction:column;gap:2px;min-width:0} .cscom-rule .t b{font-size:calc(13px * var(--text-scale, 1));font-weight:620;color:var(--csx-ink)} .cscom-rule .t span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);line-height:1.45} .cscom-rule .csset-switchwrap{justify-self:center} .cscom-rule.is-dead .t b,.cscom-rule.is-dead .t span{color:var(--csx-ink-3)} .cscom-quiet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px; padding:14px 15px;border:1px solid var(--csx-line);border-radius:var(--csx-r-md);background:var(--csx-surface-2)} .cscom-quiet .t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px} .cscom-quiet .t b{font-size:calc(13px * var(--text-scale, 1));font-weight:640;color:var(--csx-ink)} .cscom-quiet .t span{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3);line-height:1.45} @media (max-width:640px){ .cscom-rulehead,.cscom-rule{grid-template-columns:1fr 48px 48px 48px;gap:6px} } .cscom-na{justify-self:center;color:var(--csx-ink-3);font-size:calc(13px * var(--text-scale, 1))} /* ── CS-FRESH (2026-08-19): freshness stamp + Refresh icon-button ────────── Reuses the existing header icon-button (.csx-icobtn) and the existing muted caption size/colour (.csx-stat .csx-cap) — no new visual language. */ .csx-actions .csx-cap{font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);white-space:nowrap} .csx-icobtn[aria-busy="true"]{opacity:.6;pointer-events:none} .csx-icobtn.is-busy .csx-ico{animation:csx-spin .9s linear infinite;transform-origin:50% 50%} @keyframes csx-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){.csx-icobtn.is-busy .csx-ico{animation:none}} @media (max-width: 900px){.csx-actions .csx-cap{display:none}} /* ── /cs/day — TODAY on one vertical timeline (2026-08-19) ───────────────── Dom on the old screen: "Free windows… it's not ADHD brain friendly. Way better to see our calendar but just today." Everything visible here is the CALENDAR'S OWN CSS — .cs-cal-week-grid, .cs-cal-card, .cs-cal-timeline, .cs-tl-block, .cs-tl-travel, .cs-tl-sun, .cs-tl-now, .csx-stat. This block only re-frames it for one day and adds the one thing the week view has no need for: free time drawn as the empty track instead of listed as tiles. Append-only; nothing above is edited. */ /* One day column instead of seven. The gutter keeps its width so the hour rows land on exactly the same baseline as /cs/calendar. */ .csday .cs-cal-week-grid.csday-grid{grid-template-columns:54px minmax(0,1fr);overflow-x:visible} .csday .csday-grid .cs-cal-card{border-right:1px solid var(--csx-line)} .csday .cs-cal-timeline{cursor:cell} /* No pointer-drag on the day view (the week view owns reschedule-by-drag), so the chip must not advertise a grab handle it does not have. */ .csday .cs-tl-block{cursor:pointer} /* Header: the date picker sits with the nav, quiet. */ .csday .csday-datepick{width:auto;padding-top:7px;padding-bottom:7px} .csday .csx-actions{flex-wrap:wrap;gap:10px} /* The one-line answer to "when am I free today". Never wraps to two. */ .csday-freeline{margin:-6px 0 20px;font-size:calc(13.5px * var(--text-scale, 1));color:var(--csx-ink-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .csday-freeline b{color:var(--csx-ink);font-weight:640} .csday-src{color:var(--csx-ink-3)} /* Body = timeline + the slim stat rail. The rail is desktop-only real estate; under 1200px it collapses to a row directly under the header, above the timeline, so the phone still opens on the numbers and then the day. */ .csday-body{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start} @media (min-width:1200px){ .csday-body{grid-template-columns:minmax(0,1fr) 232px;gap:32px} .csday-rail{position:sticky;top:18px} } .csday-rail{display:grid;gap:14px} @media (max-width:1199px){ .csday-rail{order:-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} } @media (max-width:720px){ .csday-rail{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Same tile, one notch quieter than the dashboard's — a rail, not a headline. */ .csday-rail .csx-stat{padding:15px 15px 14px} .csday-rail .csx-stat .csx-lbl{margin-bottom:9px;font-size:calc(13px * var(--text-scale, 1))} .csday-rail .csx-stat .csx-val{font-size:calc(27px * var(--text-scale, 1));font-variant-numeric:tabular-nums} .csday-rail .csx-stat .csx-foot{margin-top:10px;min-height:0} .csday-rail .csx-stat .csx-cap{font-size:calc(13px * var(--text-scale, 1));line-height:1.35} /* FREE TIME = the working track. It used to be an accent tint with accent borders — emerald when the accent was emerald. Dom, 2026-08-22, on the column in light mode: "this looks bad", and the ceiling he set for this band is a LOW INK TINT you read as a tint and never as an event. The accent is spoken for elsewhere on the screen. */ .csday-free{position:absolute;left:0;right:0;z-index:1; background:color-mix(in srgb, var(--csx-ink) 6%, transparent); border-top:1px solid var(--csx-line); border-bottom:1px solid var(--csx-line)} .csday-free-tag{position:absolute;left:8px;top:4px;font-size:calc(13px * var(--text-scale, 1));letter-spacing:.02em; color:var(--csx-ink-3);font-variant-numeric:tabular-nums;pointer-events:none; opacity:0;transition:opacity var(--t-base,.18s) ease} .csday-free:hover .csday-free-tag,.csday-free.is-touched .csday-free-tag{opacity:1} /* The "+" only exists once you are looking at the gap. Square, our stroke, nothing new invented. */ .csday-add{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center;justify-content:center;width:26px;height:26px; padding:0;border:1px solid var(--csx-line-2);border-radius:0; /* THEME lane 2026-08-19: was rgba(10,20,15,.86), a green-black tuned when * the ground was #030303 — it composited to rgb(11,20,15) and read as a * small LIFT off the free track. On the dim ground the same value lands at * rgb(12,22,18) under a rgb(23,34,34) track, i.e. a hole punched in the * band. Swapped to the shell's own overlay rung so the plate lifts again; * the emerald border and glyph still carry the identity (9.4:1). */ background:var(--csx-surface);color:var(--csx-ink-2);cursor:pointer; opacity:0;transition:opacity var(--t-base,.18s) ease,background var(--t-base,.18s) ease} .csday-add svg{width:15px;height:15px} .csday-free:hover .csday-add,.csday-free.is-touched .csday-add,.csday-add:focus-visible{opacity:1} .csday-add:hover{background:var(--csx-surface);border-color:var(--brand, var(--csx-accent));color:var(--brand, var(--csx-accent))} /* A very short gap cannot hold a 26px button without covering itself. The `.is-tight` class is set in JS from the band's real pixel height. */ .csday-free.is-tight .csday-add{width:18px;height:18px} .csday-free.is-tight .csday-add svg{width:12px;height:12px} .csday-free.is-tight .csday-free-tag{display:none} @media (prefers-reduced-motion:reduce){ .csday-free-tag,.csday-add{transition:none} } /* Route + Block, kept from the old screen, moved below the day. */ .csday-below{margin-top:30px} .csday .cscal-note{margin-top:26px} /* ── /cs/day review pass (2026-08-19) ───────────────────────────────────── A blocker the engine counts as busy but that no chip explains: a manual block, or a calendar entry that is not a shoot ("AGA PICKUP MTL"). It used to be invisible — the grid said "Nothing on the calendar" while the free line said the day was gone. Same band element as free time, one modifier: neutral instead of emerald, its label always readable, and no "+" because there is nothing to book there. */ .csday-free.is-busy{ background:color-mix(in srgb, var(--csx-ink) 3%, transparent); border-top:1px solid var(--csx-line-2); border-bottom:1px solid var(--csx-line-2)} .csday-free.is-busy .csday-free-tag{color:var(--csx-ink-2);opacity:1} .csday-free.is-busy.is-tight .csday-free-tag{display:none} /* ── CLIENTPICKER (Dom 2026-08-19: "do a dropdown please, it takes too much space") — /cs/new-order step 1 ------------------------------------------- No new chrome. The field is a .cso-in-txt like every other input, and the popup is the SAME .csaddr / .csaddr-list suggestion list the address fields already use on /cs/order, /cs/calendar, /cs/zones and /cs/sun. Only two things are added: a caret so a closed field reads as a picker, and a muted group label so "Recent" sits apart from "All clients". */ .cso-cpick .cso-in-txt{padding-right:30px} /* 27 profiles and two-line rows: a little more height than the address list so five clients are readable at once without the popup owning the screen. */ .cso-cpick .csaddr-list{max-height:340px} .cso-cpick::after{ content:'';position:absolute;right:12px;top:50%;width:7px;height:7px;margin-top:-6px; border-right:1.5px solid var(--csx-ink-3);border-bottom:1.5px solid var(--csx-ink-3); transform:rotate(45deg);pointer-events:none } .cso-cpick-grp{ padding:9px 12px 6px;font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-3); background:var(--csx-surface);border-bottom:1px solid var(--csx-line) } /* The note under the field explains what the picker did; it needs air before the manual fields, or the two read as one block. */ .cso-panel [data-contact-note]{margin:2px 0 16px} /* ══════════════════════════════════════════════════════════════════════════ * CS-PLAT-08 · SHARED POLISH (C2C 233 §A · Dom 2026-08-22) * A1 palette application · A2 corners · A3 one theme toggle · A4 stack blur * Token-level only. Nothing here invents a new element: it re-points existing * chrome (sidebar arrows, nav badges, the theme control) at the 16-chip * palette in tokens.css and at the marketing site's stack-blur recipe. * ═══════════════════════════════════════════════════════════════════════════*/ /* ── A1 · sidebar section arrows, coloured per section ───────────────────── * The fold caret is the only glyph on the group head, so it is where the * section colour belongs — a landmark, not decoration. One hue per group; * the label stays muted ink so the row is still quiet. */ .csx-nav-group[data-nav-group="ops"] .csx-nav-grouphead .csx-chev{color:var(--cat-shoot)} .csx-nav-group[data-nav-group="money"] .csx-nav-grouphead .csx-chev{color:var(--cat-invoice)} .csx-nav-group[data-nav-group="settings"] .csx-nav-grouphead .csx-chev{color:var(--cat-vendor)} .csx-nav-grouphead .csx-chev{transition:transform .15s var(--csx-ease), color .12s var(--csx-ease)} /* Dom 2026-08-22 (second pass): the nav TABS stay GRAPHITE. No palette tint * on a nav item, its active background or a tab strip — the active row keeps * --csx-nav-active (graphite) and the ink-coloured icon it already had, and * the only accent on it is the 3px primary marker in .csx-nav-item.is-active * ::before. Palette colour on the sidebar lives on the SECTION ARROWS above, * and on status dots / pills / badges. The per-item icon tints that used to * sit here (comms/invoices/tasks) are removed for that reason. */ /* ── A4 · Comms badge = yellow bg, black text ────────────────────────────── * Dom 2026-08-22: the comms tally is the one badge that must be read at a * glance. Dom's yellow chip + --cat-ink, everywhere the badge renders. * 2026-08-23: --cat-comms-solid became a pale PINK when the category palette * was repointed onto the one-red strip, so this badge went pink. It now reads * the same --accent-butter every count badge reads — Comms is no longer a * special case, it is just the first place Dom noticed the colour. */ .csx-nav-item[data-key="cs-comms"] .csx-count, .csx-count.is-comms{ background:var(--accent-butter); color:var(--accent-butter-ink); font-weight:700; } /* ── A3 · ONE theme toggle (replaces the two-button segmented control) ───── * Same storage key (`cs.theme`), same [data-theme-set] delegation, same * hide-on-locked rule — the control is a button instead of a pair. * The two-button .csx-seg-theme rules stay in place for any surface that has * not been remounted yet; nothing was deleted. */ .csx-themebtn{ display:inline-flex;align-items:center;gap:8px; padding:8px 12px;border-radius:var(--csx-r-btn);white-space:nowrap; border:1px solid var(--csx-line);background:var(--csx-surface-2); color:var(--csx-ink-2);font:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:600; cursor:pointer;transition:background-color .12s var(--csx-ease), color .12s var(--csx-ease), border-color .12s var(--csx-ease); } .csx-themebtn:hover{background:var(--csx-surface-hover);color:var(--csx-ink);border-color:var(--csx-line-2)} .csx-themebtn:focus-visible{outline:2px solid var(--csx-accent);outline-offset:2px} .csx-themebtn .csx-ico{color:var(--csx-ink-3)} .csx-themebtn:hover .csx-ico{color:var(--csx-ink-2)} /* In the sidebar foot the toggle is a full-width row like the account chip; * in a page header it is an inline button sitting with the other actions. */ .csx-side-foot .csx-themebtn{width:100%} [data-theme-locked] .csx-themebtn{display:none} /* ── A4 · STACK BLUR on every topbar ─────────────────────────────────────── * The marketing site's recipe (memory reference_capitalshots_stackblur): a * layered set of progressively-weaker backdrop-filter panels with overlapping * masks, NOT one backdrop-filter on the bar. Ported here as a token-level * class so any bar can opt in by getting `.cs-blurbar` + the injected panels * (components/stack-blur.js). The panels are absolute children INSIDE the bar, * so the panels are absolute children INSIDE the bar. * * Dom 2026-08-22 (bug, Listings): the first cut made the BAR itself * transparent and hung the ten panels across its whole height. That is what * produced a floating strip — the page scrolled visibly through the bar, the * title/search row sat inside the blurred zone, and the band read as if it * were hanging mid-page. The bar now keeps its own SOLID ground and the stack * is a SKIRT below its bottom edge: blur is the bar's edge treatment, never * its background. * * NOTE: no `position` is declared here on purpose. This class lands on bars * that are already `fixed` (.ag-topbar) or `sticky` (.topbar); declaring * `position:relative` here won the cascade and un-fixed them, which is how * the whole shell ended up scrolling down the page. */ .cs-blurbar > *:not(.cs-pblur-wrap):not(.cs-nav-tint){position:relative;z-index:2} .cs-pblur-wrap{ position:absolute;left:0;right:0;top:100%;height:var(--cs-blur-skirt,26px); z-index:0;overflow:clip;pointer-events:none; } .cs-pblur-wrap > .cs-pblur-panel{position:absolute;inset:0;width:100%;height:100%} /* Ten rungs, each blurring less and masked to a lower slice, so the stack * fades out instead of ending on a hard line. */ .cs-pblur-1 {backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); mask-image:linear-gradient(#000 0%,#000 10%,#0000 20%)} .cs-pblur-2 {backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); mask-image:linear-gradient(#000 5%,#000 20%,#0000 32%)} .cs-pblur-3 {backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); mask-image:linear-gradient(#0000 8%,#000 22%,#000 38%,#0000 50%)} .cs-pblur-4 {backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); mask-image:linear-gradient(#0000 18%,#000 34%,#000 50%,#0000 62%)} .cs-pblur-5 {backdrop-filter:blur(2.4px); -webkit-backdrop-filter:blur(2.4px); mask-image:linear-gradient(#0000 28%,#000 44%,#000 60%,#0000 72%)} .cs-pblur-6 {backdrop-filter:blur(1.4px); -webkit-backdrop-filter:blur(1.4px); mask-image:linear-gradient(#0000 38%,#000 54%,#000 70%,#0000 82%)} .cs-pblur-7 {backdrop-filter:blur(.8px); -webkit-backdrop-filter:blur(.8px); mask-image:linear-gradient(#0000 48%,#000 64%,#000 80%,#0000 90%)} .cs-pblur-8 {backdrop-filter:blur(.45px); -webkit-backdrop-filter:blur(.45px); mask-image:linear-gradient(#0000 58%,#000 74%,#000 88%,#0000 96%)} .cs-pblur-9 {backdrop-filter:blur(.22px); -webkit-backdrop-filter:blur(.22px); mask-image:linear-gradient(#0000 68%,#000 84%,#000 96%,#0000 100%)} .cs-pblur-10{backdrop-filter:blur(.1px); -webkit-backdrop-filter:blur(.1px); mask-image:linear-gradient(#0000 78%,#000 92%,#000 100%)} /* The tint rides the SKIRT, not the bar: it carries the bar's graphite ground * a few pixels past its hairline and fades to nothing, so the blur has * something to sit on. The bar's own background is untouched. */ .cs-nav-tint{ position:absolute;left:0;right:0;top:100%;height:var(--cs-blur-skirt,26px); z-index:1;pointer-events:none; background:linear-gradient(rgba(21,23,27,.55) 0%, rgba(21,23,27,.22) 55%, rgba(21,23,27,0) 100%); } html[data-theme="light"] .cs-nav-tint{ background:linear-gradient(rgba(236,237,234,.62) 0%, rgba(236,237,234,.24) 55%, rgba(236,237,234,0) 100%); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ /* No backdrop-filter (old Firefox): drop the skirt. The bar was solid all along, so there is nothing else to restore. */ .cs-pblur-wrap,.cs-nav-tint{display:none} } @media (prefers-reduced-transparency:reduce){ .cs-pblur-wrap,.cs-nav-tint{display:none} } /* ── A6 · typed-confirm dialog (shared) ──────────────────────────────────── * Uses the cockpit's existing .csx-modal chrome; only the input + the danger * verb are added, exactly as /cs/settings' CLEAR/RESET danger zone did. */ .csx-modal .csx-confirm-in{width:100%} /* The confirm button of a destructive dialog. Ink flips with the theme: the * light twin of --cat-red is a deep red that needs cream on it (5.12:1); the * dark twin is Dom's coral #EB5757, which needs the near-black ink (5.11:1). */ .csx-btn-danger{background:var(--cat-red);border-color:var(--cat-red);color:#fffdf4;font-weight:700} html[data-theme="dark"] .csx-btn-danger, body:has(.cs-main) .csx-btn-danger{color:var(--cat-ink)} .csx-btn-danger:hover:not(:disabled){background:var(--cat-red);filter:brightness(1.07)} .csx-btn-danger:disabled{opacity:.45;cursor:not-allowed} /* ── A9 · SAMPLE DATA pill (C2C 233 lane CS-PLAT-08, Dom 2026-08-22) ─────── * Reuses .csx-pill.amber — the same element the read-only state uses — and * adds only the inline Exit. Sits under the brand mark on every /cs screen. */ /* The rail already carries a 16px gutter; a second 16px margin pushed the * pill under the search field. Sits on the rail's own gutter now, wraps * rather than overflowing, and keeps clear air above the search. */ .csx-sandbox-pill{margin:0 0 14px;align-self:stretch;justify-content:flex-start; height:auto;min-height:24px;padding:4px 8px;max-width:100%;white-space:normal} .csx-sandbox-exit{ margin-left:8px;padding:1px 7px 2px;border-radius:var(--csx-r-xs); border:1px solid currentColor;background:transparent;color:inherit; font:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:700;cursor:pointer;opacity:.85; } .csx-sandbox-exit:hover{opacity:1;background:rgba(0,0,0,.10)} .csx-sandbox-exit:focus-visible{outline:2px solid var(--csx-accent);outline-offset:1px} /* ── A3 · DISPLAY CONTROLS — dimmer · warm↔cool · text size ──────────────── * One compact control: the theme toggle and a gear that opens a popover with * the three sliders. The slider itself is the cockpit's EXISTING .cs-color-range * (feedback_cs_reuse_existing_elements) — no new input chrome. */ .csx-themewrap{position:relative;display:inline-flex;align-items:stretch;gap:0} .csx-themewrap .csx-themebtn{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0} .csx-dispbtn{ display:inline-flex;align-items:center;justify-content:center;padding:0 9px; border:1px solid var(--csx-line);border-left:1px solid var(--csx-line); border-radius:0 var(--csx-r-btn) var(--csx-r-btn) 0; background:var(--csx-surface-2);color:var(--csx-ink-3);cursor:pointer; transition:background-color .12s var(--csx-ease), color .12s var(--csx-ease); } .csx-dispbtn:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .csx-dispbtn:focus-visible{outline:2px solid var(--csx-accent);outline-offset:2px} .csx-side-foot .csx-themewrap{width:100%} .csx-side-foot .csx-themewrap .csx-themebtn{flex:1} /* PORTALLED to and position:FIXED. Dom 2026-08-22: opened from the rail * the panel was sliced by the sidebar's own overflow-y:auto — no z-index can * escape an overflow container, so the panel simply must not live inside one. * display-controls.js anchors it to the trigger's rect and re-places it on * scroll/resize. z-index clears the sidebar (60) and the topbar blur (55). */ .csx-disp-pop{ position:fixed;z-index:1200;width:250px; background:var(--csx-overlay);border:1px solid var(--csx-line-2); border-radius:var(--csx-r-md);box-shadow:var(--csx-shadow-pop);padding:14px; } .csx-disp-title{font-size:calc(13px * var(--text-scale, 1));font-weight:700;color:var(--csx-ink);margin-bottom:12px} .csx-disp-row{display:block;margin-bottom:14px} .csx-disp-lbl{display:flex;justify-content:space-between;align-items:baseline; font-size:calc(13px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2);margin-bottom:7px} .csx-disp-lbl span{font-size:calc(13px * var(--text-scale, 1));font-weight:500;color:var(--csx-ink-3);font-variant-numeric:tabular-nums} .csx-disp-range{width:100%;display:block} .csx-disp-reset{width:100%;margin-top:2px} /* ── Brightness works in DARK too (Dom 2026-08-24: the row was gated inert — * the old `opacity:.4;pointer-events:none` rule on the first row is GONE). * The dim ladder itself never moves; a fixed, pointer-events:none veil above * the whole app does the work. display-controls.js precomputes the two alphas * from the same slider (--dark-veil-white / --dark-veil-black) so this stays a * plain var() read: * slider at its default (.75) → both alphas 0 → today's look, byte-identical; * above .75 → white lift, linear to 8% at the top (visibly brightens); * below .75 → black veil, linear to 35% at the floor (screen-dimmer). * Contrast at the extremes: body ink #f0f0ee on --dim-base stays ≈6.8:1 fully * lifted and ≈11:1 fully dimmed — both clear of the 4.5:1 AA bar. * Light theme never sees this overlay; --light-dim still drives the paper. */ html[data-theme="dark"] body::after{ content:'';position:fixed;inset:0;pointer-events:none;z-index:2147483000; background: linear-gradient(rgb(255 255 255 / var(--dark-veil-white, 0)), rgb(255 255 255 / var(--dark-veil-white, 0))), linear-gradient(rgb(0 0 0 / var(--dark-veil-black, 0)), rgb(0 0 0 / var(--dark-veil-black, 0))); } /* System-dark (no data-theme attr) — same guard pattern as the rail logos. */ @media (prefers-color-scheme: dark){ html:not([data-theme]) body::after{ content:'';position:fixed;inset:0;pointer-events:none;z-index:2147483000; background: linear-gradient(rgb(255 255 255 / var(--dark-veil-white, 0)), rgb(255 255 255 / var(--dark-veil-white, 0))), linear-gradient(rgb(0 0 0 / var(--dark-veil-black, 0)), rgb(0 0 0 / var(--dark-veil-black, 0))); } } /* ── A3 · the sliders themselves (Dom's second pass: "more modern") ──────── * Thin track · filled progress segment · soft thumb with a real shadow · live * value label. This is the one place in the cockpit allowed to sit slightly off * the house style, because it IS a control rather than content — but it is * still tokens only: the fill is a hard-stop progress fill driven by --p (set * by display-controls.js), not a decorative gradient, and nothing is a bean * except the thumb, which is a circle. */ .csx-disp-range{ -webkit-appearance:none;appearance:none;width:100%;height:20px; background:transparent;outline:0;cursor:pointer;display:block;margin:0; } .csx-disp-range::-webkit-slider-runnable-track{ height:5px;border-radius:var(--csx-r-round); background:linear-gradient(to right, var(--csx-accent) 0, var(--csx-accent) calc(var(--p, .5) * 100%), var(--csx-track) calc(var(--p, .5) * 100%), var(--csx-track) 100%); } .csx-disp-range::-moz-range-track{height:5px;border-radius:var(--csx-r-round);background:var(--csx-track)} .csx-disp-range::-moz-range-progress{height:5px;border-radius:var(--csx-r-round);background:var(--csx-accent)} .csx-disp-range::-webkit-slider-thumb{ -webkit-appearance:none;width:16px;height:16px;border-radius:var(--csx-r-round); background:var(--csx-surface);border:1.5px solid var(--csx-accent); box-shadow:0 1px 3px rgba(0,0,0,.28), 0 0 0 0 var(--csx-accent-soft); margin-top:-5.5px;transition:box-shadow .14s var(--csx-ease); } .csx-disp-range::-moz-range-thumb{ width:16px;height:16px;border-radius:var(--csx-r-round); background:var(--csx-surface);border:1.5px solid var(--csx-accent); box-shadow:0 1px 3px rgba(0,0,0,.28); } .csx-disp-range:hover::-webkit-slider-thumb, .csx-disp-range:focus-visible::-webkit-slider-thumb{box-shadow:0 1px 3px rgba(0,0,0,.28), 0 0 0 4px var(--csx-accent-soft)} .csx-disp-range:focus-visible{outline:0} :root{--csx-track:rgba(26,28,31,.16)} html[data-theme="dark"] .csx-disp-panel, body:has(.cs-main) .csx-disp-panel{--csx-track:rgba(255,253,244,.18)} /* ── A12 · DETAIL CARD (C2C 233 lane CS-PLAT-08, Dom 2026-08-22) ─────────── * "Point your finger and ask." One card, portalled to and fixed, so it * escapes .cs-sidebar / .csx-tbl-scroll overflow the same way the display * popover does. Not a menu: nothing inside it is clickable. */ .cs-detail{ position:fixed;z-index:1300;max-width:280px;pointer-events:none; padding:9px 11px;border-radius:var(--csx-r-sm); background:var(--csx-overlay);border:1px solid var(--csx-line-2); box-shadow:var(--csx-shadow-pop); color:var(--csx-ink-2);font-family:var(--font-sans);font-size:calc(13px * var(--text-scale, 1));line-height:1.5; opacity:0;transform:translateY(2px); transition:opacity .12s var(--csx-ease), transform .12s var(--csx-ease); } .cs-detail.is-open{opacity:1;transform:none} .cs-detail[hidden]{display:none} .cs-detail .cs-detail-t{display:block;color:var(--csx-ink);font-weight:700;margin-bottom:3px} .cs-detail .cs-detail-b{display:block} /* A trigger that only exists to be asked reads as one. */ [data-detail],[data-detail-attached]{cursor:help} [data-detail]:focus-visible,[data-detail-attached]:focus-visible{ outline:2px solid var(--csx-accent);outline-offset:2px;border-radius:var(--csx-r-xs); } @media (prefers-reduced-motion:reduce){ .cs-detail{transition:none;transform:none} } /* ── The SPW designer keeps its OWN look (Dom 2026-08-22) ────────────────── * `.spwd2` is the only surface in this app whose controls are painted from * the global --brand family, so the orange primary would have walked into it. * It is out of scope for this lane, so it pins the emerald it was approved * with. The ONE designer (/listings/:slug/design, .dz-*) and the Marketing * Centre (/editor/, its own document) never referenced --brand at all. */ .spwd2{ --brand:#3ee092; --brand-ink:#0a1f14; --brand-hover:#5cf0a8; --brand-soft:rgba(62,224,146,.12); --brand-deep:#1e6b46; } html[data-theme="dark"] .spwd2{ --brand-deep:#5cf0a8; } /* ── SANDBOX BANNER · top of the rail (Dom 2026-08-22) ───────────────────── * Full rail width, primary ground, dark ink, above the first nav item. This * replaces the amber "Sample data" chip that used to sit beside the brand: * seed dates, seed money and seed agents have to announce themselves. */ .cs-sbbanner{ display:flex;align-items:center;gap:8px; margin:0 0 10px;padding:9px 16px; background:var(--csx-accent,var(--brand)); color:var(--csx-accent-ink,var(--brand-ink)); font-size:calc(12.5px * var(--text-scale, 1));font-weight:700;letter-spacing:-.01em; border-radius:0; } .ag-rail .cs-sbbanner{margin-bottom:0} .cs-sbbanner-d{ width:7px;height:7px;border-radius:50%;flex:none; background:currentColor;opacity:.75; } .cs-sbbanner-t{flex:1;min-width:0} .cs-sbbanner-x{ flex:none;font:inherit;font-size:calc(11.5px * var(--text-scale, 1));font-weight:700; color:inherit;background:rgba(0,0,0,.14);border:0;cursor:pointer; padding:3px 9px;border-radius:var(--csx-r-pill,999px); } .cs-sbbanner-x:hover{background:rgba(0,0,0,.24)} .cs-sbbanner-x:focus-visible{outline:2px solid currentColor;outline-offset:1px} /* ── ACCENT TESTER · TEMPORARY (Dom 2026-08-22) ──────────────────────────── * Sits low in the rail, above the theme toggle, labelled "test". Dom will * have this removed once he has picked the primary. Nothing else in the * portal styles itself from these classes. */ /* The box takes the THEME's sunken surface and the THEME's ink, not the dim * ladder: pinned to --dim-card-2 it stayed a dark box under the light rail and * its own label went dark-on-dark. */ .cs-actest{ margin:0 0 12px;padding:11px 12px; background:var(--bg-sunken); color:var(--ink); border:1px solid var(--line); border-radius:var(--csx-r-btn,10px); } .cs-actest-h{display:flex;align-items:center;gap:7px;margin-bottom:7px} .cs-actest-t{font-size:calc(12.5px * var(--text-scale, 1));font-weight:700;color:var(--ink)} .cs-actest-tag{ font-size:calc(9.5px * var(--text-scale, 1));font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:2px 5px;border-radius:3px; background:var(--cat-yellow-chip,#D4E157);color:var(--cat-ink,#16181B); } .cs-actest-reset{ margin-left:auto;font:inherit;font-size:calc(11px * var(--text-scale, 1));font-weight:600;cursor:pointer; background:none;border:0;color:var(--ink-3);text-decoration:underline; text-underline-offset:2px;padding:0; } .cs-actest-reset:hover{color:var(--ink)} .cs-actest-now{ font-size:calc(10.5px * var(--text-scale, 1));color:var(--ink-3);margin-bottom:9px; font-variant-numeric:tabular-nums; } .cs-actest-lbl{ font-size:calc(9.5px * var(--text-scale, 1));font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);margin:8px 0 5px; } .cs-acrow{display:flex;flex-wrap:wrap;gap:6px} /* The circle swatch, the same device the designer's palette uses. */ .cs-acsw{ width:18px;height:18px;border-radius:50%;flex:none;cursor:pointer;padding:0; background:var(--sw);border:1px solid rgba(0,0,0,.28); box-shadow:0 0 0 0 var(--sw);transition:box-shadow .12s var(--csx-ease,ease); } .cs-acsw:hover{box-shadow:0 0 0 3px color-mix(in srgb, var(--sw) 40%, transparent)} .cs-acsw.is-on{box-shadow:0 0 0 2px var(--bg-sunken), 0 0 0 4px var(--sw)} .cs-acsw:focus-visible{outline:2px solid var(--sw);outline-offset:2px} /* Surface-tint swatch: the SAME colour at the 8% ceiling over graphite, so * what Dom is looking at is exactly what a tinted surface would be. */ .cs-acsw.is-tint{ border-radius:4px;width:22px; background:color-mix(in srgb, var(--sw) 8%, var(--dim-card,#1C1F24)); border:1px solid var(--line); } html[data-theme="light"] .cs-acsw.is-tint{ background:color-mix(in srgb, var(--sw) 8%, var(--bg-elevated,#F4F4F1)); } .cs-actest-add{display:flex;align-items:center;gap:5px;margin-top:8px} .cs-actest-pick{ width:26px;height:24px;padding:0;flex:none;cursor:pointer; background:none;border:1px solid var(--line-strong);border-radius:5px; } .cs-actest-name{ flex:1;min-width:0;font:inherit;font-size:calc(11px * var(--text-scale, 1)); padding:4px 7px;border-radius:5px; background:var(--bg-elevated);color:var(--ink); border:1px solid var(--line-strong); } .cs-actest-save{ flex:none;font:inherit;font-size:calc(11px * var(--text-scale, 1));font-weight:700;cursor:pointer; padding:4px 9px;border-radius:5px; background:var(--csx-accent,var(--brand));color:var(--csx-accent-ink,var(--brand-ink));border:0; } .cs-actest-hint{font-size:calc(9.5px * var(--text-scale, 1));color:var(--ink-4);margin-top:7px;line-height:1.35} /* ═══════════════════════════════════════════════════════════════════════════ * CS-PLAT-08 · C2C 233 B4/B5/B7/B8 — /cs/order rebuilt (views/cs-order-v2.js) * * APPEND-ONLY. Nothing above this line is redefined; the old order screen * (.cso-*) still renders exactly as it did at /cs/order/classic. Every colour, * radius and shadow is an existing --csx-* / --cso- * / --cat-* token, so both * themes and the category palette are covered without a new vocabulary. * 12 columns, one gap value, compact but not crowded. * * ZERO colour literals. Anything that is the PRIMARY accent reads * var(--primary, var(--csx-accent)) — the chain the Today lane settled on — so * Dom's move to orange lands here from whichever of the two tokens the merge * lane repoints, with no edit in this file. * ═══════════════════════════════════════════════════════════════════════ */ .co2{--co2-gap:14px} /* ── Head: who / what it costs / what happens next / where ── */ .co2-head{ display:grid;grid-template-columns:minmax(0,1fr) auto auto; gap:6px 24px;align-items:start;margin-bottom:16px} .co2-who{min-width:0} .co2-name{margin:0;font-size:calc(26px * var(--text-scale, 1));font-weight:600;letter-spacing:-.025em;line-height:1.1;color:var(--csx-ink)} .co2-contact{margin:5px 0 0;font-size:calc(13.5px * var(--text-scale, 1));color:var(--csx-ink-2)} .co2-contact a{color:inherit;text-decoration:none;border-bottom:1px solid var(--csx-line-2)} .co2-contact a:hover{color:var(--csx-ink);border-bottom-color:var(--csx-ink-3)} .co2-brok{margin:3px 0 0;font-size:calc(12.5px * var(--text-scale, 1));color:var(--csx-ink-3)} .co2-dot{opacity:.5;margin:0 6px} .co2-money{text-align:right;min-width:0} .co2-svc{list-style:none;margin:0;padding:0;font-size:calc(12.5px * var(--text-scale, 1));color:var(--csx-ink-2)} .co2-svc li{display:flex;justify-content:flex-end;gap:14px;line-height:1.55} .co2-svc li .n{font-variant-numeric:tabular-nums;color:var(--csx-ink-3);min-width:0} .co2-total{margin:6px 0 0;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-3)} .co2-total b{font-size:calc(22px * var(--text-scale, 1));font-weight:700;letter-spacing:-.03em;color:var(--csx-ink); font-variant-numeric:tabular-nums;margin-right:5px} .co2-warnline{margin:4px 0 0;font-size:calc(12px * var(--text-scale, 1));color:var(--cat-amber);cursor:help} .co2-next{display:flex;flex-direction:column;align-items:flex-end;gap:7px;position:relative} .co2-tag{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:calc(13px * var(--text-scale, 1));font-weight:640; padding:7px 11px 8px;border-radius:var(--csx-r-btn);cursor:pointer; border:1px solid transparent;color:var(--csx-ink-3);background:var(--csx-chip-step)} .co2-tag.ok {color:var(--csx-st-green-tx); background:var(--csx-st-green-bg)} .co2-tag.warn{color:var(--csx-st-amber-tx); background:var(--csx-st-amber-bg)} .co2-tag.bad {color:var(--csx-st-red-tx); background:var(--csx-st-red-bg)} .co2-tag.info{color:var(--csx-st-violet-tx);background:var(--csx-st-violet-bg)} .co2-tag:hover{filter:brightness(1.06)} .co2-tag:focus-visible{outline:2px solid var(--primary, var(--csx-accent));outline-offset:2px} .co2-tag .csx-ico-sm{stroke:currentColor;fill:none;stroke-width:2.2} .co2-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:232px; background:var(--csx-surface);border:1px solid var(--csx-line-2);border-radius:var(--csx-r-md); box-shadow:var(--csx-shadow-pop,var(--csx-shadow-card));padding:6px;display:flex;flex-direction:column;gap:2px} .co2-menu-h{margin:4px 8px 6px;font-size:calc(10.5px * var(--text-scale, 1));letter-spacing:.09em;text-transform:uppercase; color:var(--csx-ink-3);font-weight:700} .co2-menu-none{margin:4px 8px 8px;font-size:calc(12.5px * var(--text-scale, 1));color:var(--csx-ink-3);max-width:24ch} .co2-menu button{display:block;width:100%;text-align:left;font:inherit;font-size:calc(13.2px * var(--text-scale, 1));font-weight:560; padding:8px 10px;border:0;border-radius:var(--csx-r-sm);background:transparent;color:var(--csx-ink);cursor:pointer} .co2-menu button:hover{background:var(--csx-surface-hover)} .co2-menu button.is-danger{color:var(--cat-red);margin-top:4px;border-top:1px solid var(--csx-line); border-radius:0 0 var(--csx-r-sm) var(--csx-r-sm);padding-top:10px} .co2-menu button.is-danger:hover{background:var(--cat-red-soft)} .co2-where{grid-column:1/-1;margin:8px 0 0;font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2)} .co2-linkbtn{font:inherit;font-size:calc(12px * var(--text-scale, 1));font-weight:600;background:none;border:0;padding:0 0 0 8px; color:var(--csx-ink-3);cursor:pointer;text-decoration:underline} .co2-linkbtn:hover{color:var(--csx-ink)} .co2-addrform{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:8px} .co2-addrform .csaddr{flex:1 1 320px;position:relative} .co2-addrform .cso-hint{flex-basis:100%;margin-top:0} /* ORDERED BY (CS-PLAT-11 lane 18) — the address form's twin, one input wide. Same grid span, same gap, same hint behaviour: it is the second inline editor on this header and must not read as a different kind of control. */ .co2-obform{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:8px} .co2-obform .cso-in-txt{flex:1 1 260px;max-width:360px} .co2-obform .cso-hint{flex-basis:100%;margin-top:0} @media (max-width:900px){ .co2-head{grid-template-columns:1fr;gap:10px} .co2-money{text-align:left} .co2-svc li{justify-content:flex-start} .co2-next{align-items:flex-start} .co2-menu{right:auto;left:0} .co2-name{font-size:calc(22px * var(--text-scale, 1))} } /* ── The one rail. Created → Paid, both axes, clickable. ── */ .co2-railwrap{background:var(--csx-surface);border:1px solid var(--csx-line); border-radius:var(--csx-r-lg);box-shadow:var(--csx-shadow-card);padding:14px 12px 12px;margin-bottom:var(--co2-gap)} .co2-rail{display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;gap:0} .co2-rail li{flex:1 1 0;min-width:84px;position:relative} .co2-rail li::after{content:"";position:absolute;top:13px;left:50%;right:-50%;height:2px; background:var(--csx-line-2);z-index:0} .co2-rail li:last-child::after{display:none} .co2-rail li[data-state="done"]::after{background:var(--cat-green)} .co2-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px; width:100%;padding:4px 2px 2px;background:none;border:0;font:inherit;cursor:pointer;color:var(--csx-ink-3)} .co2-stage[disabled]{cursor:default} .co2-stage:focus-visible{outline:2px solid var(--primary, var(--csx-accent));outline-offset:3px;border-radius:var(--csx-r-sm)} .co2-dotm{width:14px;height:14px;border-radius:50%;box-sizing:border-box; background:var(--csx-surface-2);border:2px solid var(--csx-line-2); transition:transform .14s var(--csx-ease),background-color .14s var(--csx-ease)} .co2-stage-l{font-size:calc(11.5px * var(--text-scale, 1));font-weight:560;letter-spacing:-.005em;white-space:nowrap} .co2-rail li[data-state="done"] .co2-dotm{background:var(--cat-green);border-color:var(--cat-green)} .co2-rail li[data-state="done"] .co2-stage{color:var(--csx-ink-2)} .co2-rail li[data-state="now"] .co2-dotm{background:var(--cso-butter);border-color:var(--cso-butter);transform:scale(1.28)} .co2-rail li[data-state="now"] .co2-stage{color:var(--csx-ink);font-weight:700} .co2-stage:not([disabled]):hover .co2-dotm{transform:scale(1.22);background:var(--csx-surface-hover)} .co2-rail li[data-state="done"] .co2-stage:not([disabled]):hover .co2-dotm{background:var(--cat-green)} .co2-railnote{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:calc(12.5px * var(--text-scale, 1));color:var(--csx-ink-2)} /* QC, inline under its own stage. */ .co2-qc{display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin:12px 0 0;padding-top:11px;border-top:1px solid var(--csx-line)} .co2-qc-boxes{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0} .co2-check{display:inline-flex;align-items:center;gap:8px;font-size:calc(12.5px * var(--text-scale, 1));color:var(--csx-ink-2); padding:6px 11px;border:1px solid var(--csx-line);border-radius:var(--csx-r-sm); background:var(--csx-surface);cursor:pointer} .co2-check:hover{background:var(--csx-surface-hover)} .co2-check.is-extra{color:var(--csx-ink-3)} .co2-check input{width:15px;height:15px;accent-color:var(--primary, var(--csx-accent));flex:none;cursor:pointer} .co2-check:has(input:checked){border-color:var(--cat-green);color:var(--csx-ink)} .co2-qc-state{margin:0;font-size:calc(12px * var(--text-scale, 1));font-weight:660;cursor:help;white-space:nowrap} .co2-qc-state.is-ok{color:var(--cat-green)} .co2-qc-state.is-open{color:var(--cat-amber)} /* ── 12-col grid. Cards butt against one gap, no dead space. ── * SUPERSEDED 2026-08-29 (Dom, law 22 + "it needs to match our layout"): the * order screen now lays out on the SHARED backend two-column system, * `.cso-two` + `.cso-rail` above — the same one /cs/order/classic, * /cs/new-order, /cs/smart, /cs/regions and /cs/zones use. Four implicit * 12-col rows were the disease: an implicit row is as tall as its tallest * card, so Booking (short) beside the weather/route/region stack (tall) left * ~450px of dead paper before Job stats, and Job stats (tall) beside * Tools/Invoice/Billing left the band under Billing. `.cso-two` is one row of * two tracks that each pack tight, which is the fix and the house style at the * same time. These rules are left in place for the .bak revisions of this view * that still cite them; nothing live uses them. */ .co2-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--co2-gap);align-items:start} .co2-grid > .cso-panel{margin-bottom:0;min-width:0} .co2-c3{grid-column:span 3} .co2-c4{grid-column:span 4} .co2-c6{grid-column:span 6} .co2-c8{grid-column:span 8} .co2-stack{display:flex;flex-direction:column;gap:var(--co2-gap);min-width:0} .co2-stack > .cso-panel{margin-bottom:0} @media (max-width:1060px){ .co2-c3{grid-column:span 6}.co2-c4{grid-column:span 6} .co2-c8{grid-column:span 12}.co2-stack{grid-column:span 12} } @media (max-width:760px){.co2-c3,.co2-c4,.co2-c6,.co2-c8,.co2-stack{grid-column:span 12}} .co2-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px} .co2-row .cso-sel,.co2-row .cso-in-txt{width:auto;flex:1 1 130px;min-width:0} .co2-f3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .co2-f4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px} @media (max-width:640px){.co2-f3,.co2-f4{grid-template-columns:1fr 1fr}} .co2-f3 .cso-field,.co2-f4 .cso-field{margin-bottom:0} /* ── Appointment + weather ── */ .co2-appt{margin:0;font-size:calc(14px * var(--text-scale, 1));color:var(--csx-ink-2)} .co2-appt b{font-size:calc(15px * var(--text-scale, 1));color:var(--csx-ink)} .co2-pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px} .co2-wx{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .co2-wxcell{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:76px; padding:9px 11px;border:1px solid var(--csx-line);border-radius:var(--csx-r-sm); background:var(--csx-surface-2);cursor:help} .co2-wxcell:focus-visible{outline:2px solid var(--primary, var(--csx-accent));outline-offset:2px} .co2-wxcell .l{font-size:calc(10.5px * var(--text-scale, 1));letter-spacing:.05em;text-transform:uppercase;color:var(--csx-ink-3);font-weight:700} .co2-wxcell .t{font-size:calc(19px * var(--text-scale, 1));font-weight:700;letter-spacing:-.03em;color:var(--csx-ink);font-variant-numeric:tabular-nums} .co2-wxcell .w{font-size:calc(11px * var(--text-scale, 1));font-weight:640;font-variant-numeric:tabular-nums} .co2-wxcell .w.is-ok{color:var(--cat-green)} .co2-wxcell .w.is-warn{color:var(--cat-amber)} .co2-wxcell .w.is-bad{color:var(--cat-red)} .co2-wxcell .w.is-plain{color:var(--csx-ink-3)} /* ── Job stats ── */ .co2-costs{margin-top:12px;border-top:1px solid var(--csx-line)} .co2-cost{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:baseline; padding:7px 0;border-bottom:1px solid var(--csx-line);font-size:calc(13px * var(--text-scale, 1))} .co2-cost .k{font-weight:600;color:var(--csx-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .co2-cost .q{font-size:calc(11.5px * var(--text-scale, 1));color:var(--csx-ink-3);font-variant-numeric:tabular-nums} .co2-cost .a{font-variant-numeric:tabular-nums;font-weight:640} .co2-pl{margin-top:12px} .co2-stub{margin-top:14px;padding:11px 12px;border:1px dashed var(--csx-line-2);border-radius:var(--csx-r-sm)} .co2-stub .cso-in-txt{max-width:120px} .co2-stub .cso-hint{margin-top:6px} /* ── Comms ── */ .co2-preview{margin:10px 0 0;padding:10px 12px;border-radius:var(--csx-r-sm); background:var(--csx-surface-2);border:1px solid var(--csx-line); font-size:calc(12.5px * var(--text-scale, 1));line-height:1.55;color:var(--csx-ink-2)} /* ── Tools ── */ .co2-doors{display:flex;flex-wrap:wrap;gap:7px} .co2-door{display:inline-flex;align-items:center;padding:7px 11px;border-radius:var(--csx-r-sm); border:1px solid var(--csx-line);background:var(--csx-surface-2);color:var(--csx-ink); font-size:calc(12.5px * var(--text-scale, 1));font-weight:600;text-decoration:none} .co2-door:hover{background:var(--csx-surface-hover)} .co2-door.is-off{color:var(--csx-ink-3);border-style:dashed;cursor:help} /* ── Delivery stats row + audit ── */ .co2-stats{display:flex;flex-wrap:wrap;gap:7px} .co2-stats span{padding:6px 10px;border-radius:var(--csx-r-sm);background:var(--csx-chip-step); font-size:calc(12.5px * var(--text-scale, 1));font-weight:600;color:var(--csx-ink-2);cursor:help;font-variant-numeric:tabular-nums} .co2-audit .r{display:flex;justify-content:space-between;gap:12px;padding:6px 0; border-bottom:1px solid var(--csx-line);font-size:calc(12.5px * var(--text-scale, 1));color:var(--csx-ink-2)} .co2-audit .r:last-child{border-bottom:0} .co2-foot{margin:18px 0 0;font-size:calc(12.5px * var(--text-scale, 1));color:var(--csx-ink-3)} .co2-foot a{color:inherit} /* ══════════════════════════════════════════════════════════════════════════ * CS-PLAT-08 · A15 — TYPE PASS for /cs/order (.co2) and /cs/clients * (C2C 233 A15, Dom 2026-08-22: "layout weak, type has no punch") * * APPEND-ONLY, and every selector is SCOPED — `.co2` never reaches the classic * order screen at /cs/order/classic, and the clients rules sit on the ids that * page owns. The scale itself is declared once in tokens.css (--ts-*); this * block only maps existing class names onto it. * ══════════════════════════════════════════════════════════════════════════ */ /* ── /cs/order · identity block: eyebrow · name (display) · strong secondary ─ */ .co2-eyebrow{ margin:0 0 5px;font-size:var(--ts-meta);line-height:var(--ts-meta-lh); letter-spacing:var(--ts-meta-tr);font-weight:var(--ts-meta-w); text-transform:uppercase;color:var(--csx-ink-2);font-variant-numeric:tabular-nums; } .co2 .co2-name{ font-size:var(--ts-display);line-height:var(--ts-display-lh); letter-spacing:var(--ts-display-tr);font-weight:var(--ts-display-w); text-wrap:balance; } .co2 .co2-contact{margin:6px 0 0;font-size:var(--ts-body);line-height:1.4;font-weight:400} /* The brokerage is the strong secondary line, not a whisper. */ .co2 .co2-brok{margin:4px 0 0;font-size:var(--ts-body);font-weight:600;letter-spacing:-.01em;color:var(--csx-ink-2)} /* Address + order + placed date: the meta line. Sentence case, because an * address in capitals stops being an address — the +.06em and the 600 do the * eyebrow work here without shouting a street name. */ .co2 .co2-where{ font-size:var(--ts-meta);line-height:var(--ts-meta-lh); letter-spacing:.02em;font-weight:600;color:var(--csx-ink-2); } /* ── /cs/order · panel headings become eyebrows, counts keep their chips ──── */ .co2 .cso-panel > h3{ font-size:var(--ts-meta);line-height:var(--ts-meta-lh); letter-spacing:var(--ts-meta-tr);font-weight:var(--ts-meta-w); text-transform:uppercase;color:var(--csx-ink-2); } /* ── /cs/order · lines: label 600, price 400-with-tabular; the total is the one number on the screen that gets display weight ───────────────────── */ .co2 .co2-svc{font-size:var(--ts-body)} .co2 .co2-svc li > span:first-child{font-weight:600;letter-spacing:-.01em;color:var(--csx-ink)} .co2 .co2-svc li .n{font-weight:400;font-variant-numeric:tabular-nums;color:var(--csx-ink-2)} .co2 .co2-total{font-size:var(--ts-meta);font-weight:600;color:var(--csx-ink-2)} .co2 .co2-total b{font-size:var(--ts-h2);line-height:1;letter-spacing:-.03em;font-weight:700} .co2 .co2-stats span{font-size:var(--ts-meta);font-weight:var(--ts-num-w)} /* ── /cs/clients · header block + section headers ────────────────────────── */ .csx-wrap .csc-eyebrow{ margin:0 0 5px;font-size:var(--ts-meta);line-height:var(--ts-meta-lh); letter-spacing:var(--ts-meta-tr);font-weight:var(--ts-meta-w); text-transform:uppercase;color:var(--csx-ink-2); } #csc-groups h2, .csc-h2{ font-size:var(--ts-meta);line-height:var(--ts-meta-lh); letter-spacing:var(--ts-meta-tr);font-weight:var(--ts-meta-w); text-transform:uppercase;color:var(--csx-ink-2); } /* The count beside a group heading — a number, so it reads like one. */ #csc-groups .csx-sub{ font-size:var(--ts-meta);font-weight:var(--ts-num-w);letter-spacing:0; color:var(--csx-ink-2);font-variant-numeric:tabular-nums;text-transform:none; } .csx-wrap .csc-title{ font-size:var(--ts-display);line-height:var(--ts-display-lh); letter-spacing:var(--ts-display-tr);font-weight:var(--ts-display-w); } .csx-wrap .csc-hi{ margin:6px 0 0;font-size:var(--ts-body);line-height:1.4; font-weight:400;color:var(--csx-ink-2); } .csx-wrap .csc-hi b{font-weight:700;color:var(--csx-ink);font-variant-numeric:tabular-nums} /* Year strip + stat tiles: labels are eyebrows, numbers are tabular 600. */ .csc-ys-lbl{ font-size:var(--ts-meta);line-height:var(--ts-meta-lh); letter-spacing:var(--ts-meta-tr);font-weight:var(--ts-meta-w); text-transform:uppercase;color:var(--csx-ink-2); } .csx-wrap .csx-stat .csx-lbl{ font-size:var(--ts-meta);line-height:var(--ts-meta-lh); letter-spacing:var(--ts-meta-tr);font-weight:var(--ts-meta-w); text-transform:uppercase;color:var(--csx-ink-2); } /* ══════════════════════════════════════════════════════════════════════════ * CS-PLAT-09 · /cs/order — cost line, compact rail, spacing rhythm, minical * (Dom 2026-08-22: "the dropdown of cost kinds is not useful", "the stepper * looks cool but do we need it, waste of space", "control the spacing * between the lines and objects / buttons", "the date picker looks like * from another website") * * APPEND-ONLY and SCOPED. Every order-page rule sits under `.co2`, so the * classic screen at /cs/order/classic and every other view are untouched. * .csmc-* is the shared mini-calendar and is deliberately global: the * dashboard lane mounts the same component. * * ZERO colour literals. Red is var(--primary, var(--csx-accent)) — the chain * this file already uses — green/amber/red states stay on --cat-*. * ══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · SPACING RHYTHM. One scale on this page: 4 / 8 / 12 / 16 / 24 / 32. Nothing below invents a value; each line pulls an off-scale number (13, 14, 9, 7, 10, 6, 18) onto the nearest step so rows inside a card, card padding and button baselines all land on the same grid. ───────── */ /* ONE GUTTER WIDTH EVERYWHERE (Dom 2026-08-29). The shared backend layout is `.cso-two` at gap:20px with `.cso-panel` carrying margin-bottom:20px, so the page's own seam token comes onto the same 20 instead of running 16 beside it. Card headers drop the local 12px for the house 13px at the same time — this screen should read as the same app as /cs/new-order. */ .co2{--co2-gap:20px} .co2 .co2-head{gap:8px 24px;margin-bottom:16px} /* A column's LAST panel drops its trailing margin, or it stacks on top of the .cso-two row gap and the seam between the two columns doubles to 40px when they collapse under 1060px. Scoped to this screen so no other .cso-two page changes. */ .co2 .cso-two > * > .cso-panel:last-child{margin-bottom:0} .co2 .cso-panel .cso-in{padding:16px} .co2 .cso-field{margin-bottom:12px} .co2 .cso-hint{margin:8px 0 0} .co2 .cso-note{margin:12px 0} .co2 .cso-empty{padding:24px} .co2 .co2-row{gap:8px;margin-top:12px} .co2 .co2-f3,.co2 .co2-f4{gap:12px} .co2 .co2-pills{gap:8px;margin-top:8px} .co2 .co2-wx{gap:8px;margin-top:12px} .co2 .co2-doors{gap:8px} .co2 .co2-stats{gap:8px} .co2 .co2-qc-boxes{gap:8px} .co2 .co2-preview{margin:12px 0 0} .co2 .co2-stub{margin-top:16px;padding:12px} .co2 .co2-foot{margin:24px 0 0} /* Buttons that end a card sit one full step under the last field, and every button in a row shares one baseline instead of drifting with its label. */ .co2 .cso-in > .cso-btn:not(:first-child){margin-top:12px} .co2 .co2-ac > .cso-btn{margin-top:12px} .co2 .co2-row > .cso-btn{align-self:center;margin-top:0} /* ── 2 · THE RAIL, COMPRESSED. One thin line: where it is, what is next, what is open. The ten dots are the same markup as before, folded behind an expand toggle — nothing was deleted, and every stage stays clickable. ─ */ .co2 .co2-railwrap{padding:12px 16px;margin-bottom:var(--co2-gap)} .co2-railbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-size:calc(13px * var(--text-scale, 1));color:var(--csx-ink-2);min-height:24px} .co2-nowdot{width:9px;height:9px;border-radius:50%;flex:none; background:var(--primary, var(--csx-accent))} .co2-railbar b{color:var(--csx-ink);font-weight:700;letter-spacing:-.01em} .co2-railbar .co2-next-l{color:var(--csx-ink-2)} .co2-railbar .co2-open-l{color:var(--cat-amber);font-weight:600} .co2-railbar .co2-open-l.is-ok{color:var(--cat-green)} .co2-railmore{margin-left:auto;font:inherit;font-size:calc(12px * var(--text-scale, 1));font-weight:600;cursor:pointer; padding:4px 8px;border-radius:var(--csx-r-sm);color:var(--csx-ink-3); background:transparent;border:1px solid var(--csx-line)} .co2-railmore:hover{background:var(--csx-surface-hover);color:var(--csx-ink)} .co2-railmore:focus-visible{outline:2px solid var(--primary, var(--csx-accent));outline-offset:2px} .co2 .co2-rail{margin-top:12px;padding-top:12px;border-top:1px solid var(--csx-line)} .co2 .co2-railnote{margin:12px 0 0} .co2 .co2-qc{margin:12px 0 0;padding-top:12px} /* ── 3 · THE COST LINE. Free text with our own suggestion list, quantity × cost each, and the three billing switches as one segmented control. No native