/* ═══════════════════════════════════════════════════════════ Jack-LM site-wide theme palettes ═══════════════════════════════════════════════════════════ Five themes selected via : • slate-light (default neutral light — warm bond paper) • midnight (true near-black + electric sky) • aurora (pure white SaaS + saturated category accents) • jobsite (warm sand + orange/yellow hardhat accents) • blueprint (white ink on graded blueprint-blue paper) Each block overrides the same variable set, covering three contexts whose CSS uses different names: 1. Head Office (index.html) — --bg0..bg5, --txt0..txt3, --acc, --line, ... 2. Marvin (marvin.html) — --bg, --card, --card-border, --text, --text-dim, --text-bright 3. Shared header (header.css) — --bl-sh-bg, --bl-sh-fg, --bl-sh-accent, ... ── Bg/header relationship (2026-05-07 swap) ────────────────── The shared header bar (--bl-sh-bg) wears the SLIGHTLY-TINTED surface, and the viewer pane (--bg0 / Marvin's --bg) wears the PURE/PRIMARY surface — i.e. white in light themes, the deepest near-black in midnight. Tiles get a clean ground to sit on, the header recedes as the framing band. Cards stay defined via borders (and an explicit shadow on aurora/jobsite). To pick a theme at runtime, set localStorage.jl-theme and call document.documentElement.setAttribute('data-theme', name). ═══════════════════════════════════════════════════════════ */ /* ── 1. Slate Light — warm "bond paper" neutral ───────────── Default. Pulls away from generic Tailwind slate by shifting the surface family into zinc/bone territory: warm off-white page, warmer borders, near-black-with-warmth text. The accent is a deep blueprint cobalt rather than the cliché SaaS blue. Quiet, considered, drafting-room feel. */ :root, html[data-theme="slate-light"] { /* Head Office */ --bg0: #FFFFFF; --bg1: #FFFFFF; --bg2: #F4F2EC; --bg3: #E8E5DD; --bg4: #C9C5BC; --bg5: #8E897F; --txt0: #18181B; --txt1: #3F3F46; --txt2: #71717A; --txt3: #A1A1AA; --line: #E5E2DA; --line2: #C9C5BC; --acc: #1E40AF; --acc-dim: #1E3A8A; --acc-bg: rgba(30,64,175,0.10); --acc-bg2: rgba(30,64,175,0.05); --green: #15803D; --green-bg: rgba(21,128,61,0.10); --red: #B91C1C; --red-bg: rgba(185,28,28,0.10); --yellow:#B45309; --yellow-bg:rgba(180,83,9,0.10); --blue: #1E40AF; --blue-bg: rgba(30,64,175,0.10); --orange:#C2410C; --orange-bg:rgba(194,65,12,0.10); --purple:#6D28D9; --purple-bg:rgba(109,40,217,0.10); --cyan: #0E7490; --cyan-bg: rgba(14,116,144,0.10); /* Marvin */ --bg: #FFFFFF; --card: #FFFFFF; --card-border: #E5E2DA; --text: #18181B; --text-dim: #3F3F46; --text-bright: #000000; /* Shared header — sits at the top, takes the warm off-white that used to be the viewer pane bg. Viewer pane is now pure white. */ --bl-sh-bg: #FAF9F6; --bl-sh-bg-hover: #F4F2EC; --bl-sh-border: #E5E2DA; --bl-sh-fg: #18181B; --bl-sh-fg-dim: #3F3F46; --bl-sh-fg-muted: #71717A; --bl-sh-accent: #1E40AF; --bl-sh-accent-bg: rgba(30,64,175,0.10); --bl-sh-danger: #B91C1C; color-scheme: light; } /* ── 2. Midnight — true near-black + electric sky ─────────── Drops the cliché muddy indigo (#5b7ff7) for a sharper sky-400 accent and warms the near-black so it doesn't read as cold void. Bone-tinted text gives a slight studio-after-hours feel instead of the typical zinc-on-graphite "code editor" look. */ html[data-theme="midnight"] { --bg0: #131313; --bg1: #1A1A1A; --bg2: #1A1A1A; --bg3: #232323; --bg4: #2E2E2E; --bg5: #3F3F3F; --txt0: #FAFAF9; --txt1: #D4D4D4; --txt2: #A1A1A1; --txt3: #6B6B6B; --line: #2A2A2A; --line2: #383838; --acc: #38BDF8; --acc-dim: #0EA5E9; --acc-bg: rgba(56,189,248,0.12); --acc-bg2: rgba(56,189,248,0.06); --green: #34D399; --green-bg: rgba(52,211,153,0.12); --red: #F87171; --red-bg: rgba(248,113,113,0.12); --yellow:#FBBF24; --yellow-bg:rgba(251,191,36,0.12); --blue: #38BDF8; --blue-bg: rgba(56,189,248,0.12); --orange:#FB923C; --orange-bg:rgba(251,146,60,0.12); --purple:#A78BFA; --purple-bg:rgba(167,139,250,0.12); --cyan: #22D3EE; --cyan-bg: rgba(34,211,238,0.12); --bg: #131313; --card: #1A1A1A; --card-border: #2A2A2A; --text: #FAFAF9; --text-dim: #D4D4D4; --text-bright: #FFFFFF; /* Shared header — deepest near-black, recedes behind the viewer pane (which is now one step lighter). Cards stay #1A1A1A so the three-tier depth ladder reads bg0 → bg1 → cards consistently. */ --bl-sh-bg: #0A0A0A; --bl-sh-bg-hover: #232323; --bl-sh-border: #2A2A2A; --bl-sh-fg: #FAFAF9; --bl-sh-fg-dim: #D4D4D4; --bl-sh-fg-muted: #A1A1A1; --bl-sh-accent: #38BDF8; --bl-sh-accent-bg: rgba(56,189,248,0.12); --bl-sh-danger: #F87171; color-scheme: dark; } /* ── 3. Aurora — pure white surface + saturated category accents ── Modern SaaS look. Page surface is pure white so the layer of subtle shadow under cards reads cleanly as elevation (see the .doc-card overrides further down). Borders go neutral so cards don't fight the shadow with a blue tint, but the primary action stays confident blue and the category palette stays vivid so tiles still POP. */ html[data-theme="aurora"] { --bg0: #FFFFFF; --bg1: #FFFFFF; --bg2: #F9FAFB; --bg3: #F3F4F6; --bg4: #E5E7EB; --bg5: #9CA3AF; --txt0: #0F172A; --txt1: #334155; --txt2: #64748B; --txt3: #94A3B8; --line: #E5E7EB; --line2: #D1D5DB; --acc: #2563EB; --acc-dim: #1D4ED8; --acc-bg: rgba(37,99,235,0.10); --acc-bg2: rgba(37,99,235,0.05); --green: #16A34A; --green-bg: rgba(22,163,74,0.12); --red: #DC2626; --red-bg: rgba(220,38,38,0.10); --yellow:#EAB308; --yellow-bg:rgba(234,179,8,0.12); --blue: #2563EB; --blue-bg: rgba(37,99,235,0.12); --orange:#EA580C; --orange-bg:rgba(234,88,12,0.12); --purple:#7C3AED; --purple-bg:rgba(124,58,237,0.12); --cyan: #0891B2; --cyan-bg: rgba(8,145,178,0.12); --bg: #FFFFFF; --card: #FFFFFF; --card-border: #E5E7EB; --text: #0F172A; --text-dim: #334155; --text-bright: #000000; --bl-sh-bg: #FFFFFF; --bl-sh-bg-hover: #F3F4F6; --bl-sh-border: #E5E7EB; --bl-sh-fg: #0F172A; --bl-sh-fg-dim: #334155; --bl-sh-fg-muted: #64748B; --bl-sh-accent: #2563EB; --bl-sh-accent-bg: rgba(37,99,235,0.10); --bl-sh-danger: #DC2626; color-scheme: light; } /* ── Aurora-only: 3D card pop + hover lift ──────────────────── Tile depth comes from a layered shadow (close + ambient) and a gentle scale on hover. The transform-origin keeps the lift centred so cards in a grid don't drift left/right. */ html[data-theme="aurora"] .doc-card { border-color: transparent; box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.06), 0 8px 24px -4px rgba(15, 23, 42, 0.05); transition: transform .22s cubic-bezier(.2, .9, .3, 1.1), box-shadow .22s ease, border-color .22s ease; } html[data-theme="aurora"] .doc-card:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 4px 8px -1px rgba(15, 23, 42, 0.06), 0 12px 24px -4px rgba(15, 23, 42, 0.10), 0 24px 48px -8px rgba(15, 23, 42, 0.10); border-color: rgba(37, 99, 235, 0.18); } /* ── Theme picker UI (used by both Head Office and shared header) ── */ .theme-picker { position: relative; } .theme-picker-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--bl-sh-bg, var(--bg1)); color: var(--bl-sh-fg, var(--txt0)); border: 1px solid var(--bl-sh-border, var(--line)); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 6px; z-index: 100; display: none; } .theme-picker-menu.is-open { display: block; } .theme-picker-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: none; font: inherit; font-size: 13px; color: var(--bl-sh-fg, var(--txt0)); text-align: left; cursor: pointer; border-radius: 6px; } .theme-picker-item:hover { background: var(--bl-sh-bg-hover, var(--bg2)); } .theme-picker-item.is-current { color: var(--bl-sh-accent, var(--acc)); font-weight: 600; } .theme-picker-swatch { width: 28px; height: 16px; border-radius: 4px; border: 1px solid var(--bl-sh-border, var(--line)); background: linear-gradient(90deg, var(--swatch-bg) 50%, var(--swatch-acc) 50%); flex: 0 0 auto; } .theme-picker-name { flex: 1; } .theme-picker-check { width: 14px; height: 14px; visibility: hidden; color: var(--bl-sh-accent, var(--acc)); } .theme-picker-item.is-current .theme-picker-check { visibility: visible; } /* ── 4. Jobsite — warm sand + orange/yellow tile accents ──── Built around the orange-and-yellow J hard-hat icon. The page surface is a warm cream so the orange primary doesn't fight a cold background, but cards stay pure white so the hairline orange→yellow gradient strip and warm hover glow read crisply. Borders carry a tan tint to match the family. */ html[data-theme="jobsite"] { /* Head Office */ --bg0: #FFFFFF; --bg1: #FFFFFF; --bg2: #F5EFE2; --bg3: #ECE3D0; --bg4: #DCC9A6; --bg5: #8E7A53; --txt0: #1F1810; --txt1: #3F2F1E; --txt2: #6B5C4A; --txt3: #9A8B73; --line: #E8DCC1; --line2: #D2C29C; /* Brand accent = burnt sienna / rust — deliberately deeper & browner than Procore's #FF5201 "International Orange" so the app doesn't read as Procore-adjacent. (--orange below stays a literal orange for categorical data-viz, separate from the brand accent.) */ --acc: #B5491F; --acc-dim: #8F3712; --acc-bg: rgba(181,73,31,0.10); --acc-bg2: rgba(181,73,31,0.05); --green: #6B8E23; --green-bg: rgba(107,142,35,0.12); --red: #B22222; --red-bg: rgba(178,34,34,0.10); --yellow:#D69E1F; --yellow-bg:rgba(214,158,31,0.15); --blue: #2E5C8A; --blue-bg: rgba(46,92,138,0.10); --orange:#E87722; --orange-bg:rgba(232,119,34,0.12); --purple:#8B5A8C; --purple-bg:rgba(139,90,140,0.10); --cyan: #4A8389; --cyan-bg: rgba(74,131,137,0.10); /* Marvin */ --bg: #FFFFFF; --card: #FFFFFF; --card-border: #E8DCC1; --text: #1F1810; --text-dim: #3F2F1E; --text-bright: #000000; /* Shared header — wears the warm cream that used to surround the tiles, so the orange/yellow accents read against a soft sand bar instead of plain white. Viewer pane is now pure white. */ --bl-sh-bg: #FBF7EE; --bl-sh-bg-hover: #F5EFE2; --bl-sh-border: #E8DCC1; --bl-sh-fg: #1F1810; --bl-sh-fg-dim: #3F2F1E; --bl-sh-fg-muted: #6B5C4A; --bl-sh-accent: #B5491F; --bl-sh-accent-bg: rgba(181,73,31,0.12); --bl-sh-danger: #B22222; color-scheme: light; } /* ── Jobsite-only: orange→yellow gradient strip + warm hover glow ── The "subtle color hit" — a 2px gradient ribbon along the top edge of every tile. On hover it intensifies (height + opacity) and a warm cast picks up under the card. */ html[data-theme="jobsite"] .doc-card { position: relative; background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 1px 2px 0 rgba(120, 80, 30, 0.05), 0 4px 12px -2px rgba(120, 80, 30, 0.06); transition: transform .22s cubic-bezier(.2, .9, .3, 1.1), box-shadow .22s ease, border-color .22s ease; overflow: hidden; } html[data-theme="jobsite"] .doc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #B5491F 0%, #D98B3A 50%, #B5491F 100%); opacity: 0.55; transition: opacity .22s ease, height .22s ease; pointer-events: none; } html[data-theme="jobsite"] .doc-card:hover { transform: translateY(-2px) scale(1.04); border-color: rgba(181, 73, 31, 0.28); box-shadow: 0 2px 4px -1px rgba(181, 73, 31, 0.10), 0 10px 22px -4px rgba(181, 73, 31, 0.15), 0 18px 32px -8px rgba(120, 80, 30, 0.10); } html[data-theme="jobsite"] .doc-card:hover::before { opacity: 1; height: 3px; } /* Dashboard project rows — subtle warm hover with an orange leading edge */ html[data-theme="jobsite"] .dash-item { border-left: 2px solid transparent; transition: border-color .15s ease, background .15s ease; } html[data-theme="jobsite"] .dash-item:hover { border-left-color: var(--acc); background: rgba(181, 73, 31, 0.05); } /* ── 5. Blue Print Blue — white ink on one continuous blueprint sheet ── The whole app is a single graded sheet of blueprint paper: ONE fixed blue→blue gradient behind everything, and the structural surfaces become translucent white "frost" films so that one gradient reads continuously through every panel — no opaque navy boxes anywhere. White line-work (--line) + white type carry the structure, like ink on a blueprint. Floating chrome that stacks over scrolling content (modals, menus, tooltips, toasts) and sticky headers that must occlude scrolled rows CANNOT be translucent or they'd be unreadable — those get a near-opaque frosted-navy fill + blur in the override block below. Accent stays a brighter cobalt: .btn-acc hardcodes color:white on a var(--acc) background, so --acc must stay dark enough for white. Declared on `…body` (not just html[data-theme]) so it OUTRANKS the legacy `body.dark { --bg*:#0d0d0d… }` block in index.html: that has equal specificity to html[data-theme] and would otherwise win on source order and repaint every surface near-black. */ html[data-theme="blueprint"] body { /* Head Office — surfaces are frost films over the fixed gradient */ --bg0: transparent; --bg1: rgba(255,255,255,0.045); --bg2: rgba(255,255,255,0.075); --bg3: rgba(255,255,255,0.12); --bg4: rgba(255,255,255,0.18); --bg5: rgba(255,255,255,0.28); --txt0: #FFFFFF; --txt1: #D6E6F6; --txt2: #A6C4E2; --txt3: #7397BC; --line: rgba(255,255,255,0.22); --line2: rgba(255,255,255,0.42); --acc: #3E80C8; --acc-dim: #2F66A4; --acc-bg: rgba(90,160,224,0.16); --acc-bg2: rgba(90,160,224,0.08); --green: #4ADE80; --green-bg: rgba(74,222,128,0.14); --red: #F87171; --red-bg: rgba(248,113,113,0.14); --yellow:#FBBF24; --yellow-bg:rgba(251,191,36,0.14); --blue: #5AA0E0; --blue-bg: rgba(90,160,224,0.14); --orange:#FB923C; --orange-bg:rgba(251,146,60,0.14); --purple:#A78BFA; --purple-bg:rgba(167,139,250,0.14); --cyan: #38D6E8; --cyan-bg: rgba(56,214,232,0.14); /* Marvin */ --bg: transparent; --card: rgba(255,255,255,0.06); --card-border: rgba(255,255,255,0.22); --text: #FFFFFF; --text-dim: #D6E6F6; --text-bright: #FFFFFF; /* Shared header — dissolves into the sheet too */ --bl-sh-bg: transparent; --bl-sh-bg-hover: rgba(255,255,255,0.09); --bl-sh-border: rgba(255,255,255,0.16); --bl-sh-fg: #FFFFFF; --bl-sh-fg-dim: #D6E6F6; --bl-sh-fg-muted: #A6C4E2; --bl-sh-accent: #5AA0E0; --bl-sh-accent-bg: rgba(90,160,224,0.16); --bl-sh-danger: #F87171; color-scheme: dark; } /* The single continuous sheet: one fixed, viewport-anchored gradient. Every transparent surface above reveals THIS exact gradient, so the blue is seamless across the entire app on every page. */ html[data-theme="blueprint"] body, html[data-theme="blueprint"] .content { background: linear-gradient(155deg, #123F6E 0%, #1A4E86 42%, #235C97 76%, #2C69A8 100%); background-attachment: fixed; } /* These float/stick over scrolling content, so they can't be plain transparent — but per the blueprint look they're translucent blue GLASS, not opaque navy: a strong backdrop blur+saturate turns whatever's behind into a soft blue wash, so the gradient still reads through and white text stays legible. Bounded, known set. */ html[data-theme="blueprint"] .item-modal-box, html[data-theme="blueprint"] .mf-modal, html[data-theme="blueprint"] .bl-sh-ho-menu, html[data-theme="blueprint"] .theme-picker-menu, html[data-theme="blueprint"] .bl-sh-conf-pop, html[data-theme="blueprint"] .av-tip, html[data-theme="blueprint"] #toast-stack > * { background: rgba(33,74,124,0.32); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); } /* Sticky headers occlude rows scrolling beneath — kept a touch more present (backdrop-filter on is unreliable) but blue glass, never black. */ html[data-theme="blueprint"] .tbl thead tr, html[data-theme="blueprint"] .msm-wrap > .msm-hd, html[data-theme="blueprint"] .msm-wrap > .msm-stats, html[data-theme="blueprint"] .ho-list > .ho-list-hd { background: rgba(28,66,112,0.50); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } /* Modal scrims: a soft blue veil (not a black dim) + slight blur. */ html[data-theme="blueprint"] .item-modal-overlay, html[data-theme="blueprint"] .mf-modal-backdrop { background: rgba(18,52,92,0.30); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ═══════════════════════════════════════════════════════════ 6. Crew — jobsite warmth, friendly rounded UI ═══════════════════════════════════════════════════════════ The first theme that changes SHAPE as well as color. Same burnt-sienna brand accent and warm sand family as Jobsite, but the chrome softens: pill buttons with depth and a hover lift, larger radii everywhere (cards, modals, inputs), filled primary actions, a visible focus ring, and the header tabs become pills instead of underlines. Purely additive — every rule is scoped to html[data-theme="crew"] and overrides the base square look without touching it. */ html[data-theme="crew"] { /* Head Office — Jobsite palette on a softer paper white */ --bg0: #FFFDF8; --bg1: #FFFFFF; --bg2: #F6F0E3; --bg3: #EDE4D1; --bg4: #DCC9A6; --bg5: #8E7A53; --txt0: #221A11; --txt1: #41311F; --txt2: #6B5C4A; --txt3: #9A8B73; --line: #EADFC6; --line2: #D5C5A0; /* Brand accent — the Jobsite burnt sienna, kept verbatim */ --acc: #B5491F; --acc-dim: #8F3712; --acc-bg: rgba(181,73,31,0.10); --acc-bg2: rgba(181,73,31,0.05); --green: #5F8B1F; --green-bg: rgba(95,139,31,0.12); --red: #B22222; --red-bg: rgba(178,34,34,0.10); --yellow:#D69E1F; --yellow-bg:rgba(214,158,31,0.15); --blue: #2E5C8A; --blue-bg: rgba(46,92,138,0.10); --orange:#E87722; --orange-bg:rgba(232,119,34,0.12); --purple:#8B5A8C; --purple-bg:rgba(139,90,140,0.10); --cyan: #4A8389; --cyan-bg: rgba(74,131,137,0.10); /* Shape + depth tokens — most cards/tiles/modals read radius from these vars, so the rounding cascades app-wide for free. Shadows warm-tinted so elevation reads as sunlight, not smog. */ --rad: 18px; --rad-sm: 14px; --shadow: 0 1px 3px rgba(120,80,30,0.07), 0 6px 20px rgba(120,80,30,0.06); --shadow-h:0 4px 12px rgba(120,80,30,0.11), 0 16px 36px rgba(120,80,30,0.09); /* Marvin */ --bg: #FFFDF8; --card: #FFFFFF; --card-border: #EADFC6; --text: #221A11; --text-dim: #41311F; --text-bright: #000000; /* Shared header */ --bl-sh-bg: #FBF7EE; --bl-sh-bg-hover: #F6F0E3; --bl-sh-border: #EADFC6; --bl-sh-fg: #221A11; --bl-sh-fg-dim: #41311F; --bl-sh-fg-muted: #6B5C4A; --bl-sh-accent: #B5491F; --bl-sh-accent-bg: rgba(181,73,31,0.12); --bl-sh-danger: #B22222; color-scheme: light; } /* ── Crew: buttons become pills with depth — every button visibly a button (the base app keeps them square and mostly unfilled) ── */ html[data-theme="crew"] .btn { border-radius: 999px; height: 31px; padding: 0 15px; font-size: 11.5px; font-weight: 600; background: var(--bg2); border-color: var(--line2); color: var(--txt1); box-shadow: 0 1px 2px rgba(120,80,30,0.10); transition: transform .16s cubic-bezier(.2,.9,.3,1.2), box-shadow .16s ease, background .12s, border-color .12s, color .12s; } html[data-theme="crew"] .btn:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(120,80,30,0.16); background: var(--bg3); color: var(--txt0); } html[data-theme="crew"] .btn:active { transform: translateY(0) scale(.97); box-shadow: 0 1px 2px rgba(120,80,30,0.10); } html[data-theme="crew"] .btn-acc { background: var(--acc); border-color: var(--acc); color: #FFFFFF; box-shadow: 0 2px 7px rgba(181,73,31,0.32); } html[data-theme="crew"] .btn-acc:hover { background: var(--acc-dim); border-color: var(--acc-dim); color: #FFFFFF; box-shadow: 0 5px 14px rgba(181,73,31,0.38); } html[data-theme="crew"] .btn-danger { background: var(--red-bg); border-color: rgba(178,34,34,0.28); } html[data-theme="crew"] .btn-sm { height: 26px; padding: 0 12px; font-size: 10.5px; } /* The "+ New …" module action: text link becomes an unmissable filled pill — the single most important button on each module. */ html[data-theme="crew"] .msm-add { background: var(--acc); color: #FFFFFF; border-radius: 999px; padding: 7px 16px; font-weight: 600; box-shadow: 0 2px 7px rgba(181,73,31,0.32); transition: transform .16s cubic-bezier(.2,.9,.3,1.2), box-shadow .16s ease, background .12s; } html[data-theme="crew"] .msm-add:hover { background: var(--acc-dim); color: #FFFFFF; text-decoration: none; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(181,73,31,0.38); } /* ── Crew: forms — rounder fields, generous focus ring ── */ html[data-theme="crew"] .ff input, html[data-theme="crew"] .ff select, html[data-theme="crew"] .ff textarea { border-radius: 12px; } html[data-theme="crew"] .ff input:focus, html[data-theme="crew"] .ff select:focus, html[data-theme="crew"] .ff textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-bg); } html[data-theme="crew"] button:focus-visible, html[data-theme="crew"] input:focus-visible, html[data-theme="crew"] select:focus-visible, html[data-theme="crew"] textarea:focus-visible { outline: 3px solid rgba(181,73,31,0.30); outline-offset: 1px; } /* ── Crew: status pills become true pills ── */ html[data-theme="crew"] .pill { border-radius: 999px; padding: 2px 9px; font-weight: 600; } /* ── Crew: cards round + lift. Stat cards pick the radius up from --rad via their own rules where present; the explicit rules here cover the square-by-default surfaces. ── */ html[data-theme="crew"] .sc, html[data-theme="crew"] .doc-card, html[data-theme="crew"] .draw-tile { border-radius: var(--rad); } html[data-theme="crew"] .sc-clk:hover { transform: translateY(-2px) scale(1.02); } html[data-theme="crew"] .item-modal-box { border-radius: 22px; } html[data-theme="crew"] .abar { border-radius: var(--rad-sm); } html[data-theme="crew"] ::-webkit-scrollbar-thumb { border-radius: 8px; } /* Warm ribbon along card tops — carried over from Jobsite so the family resemblance is obvious, slightly bolder here. */ html[data-theme="crew"] .doc-card { position: relative; background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 1px 2px 0 rgba(120, 80, 30, 0.05), 0 4px 12px -2px rgba(120, 80, 30, 0.06); transition: transform .22s cubic-bezier(.2, .9, .3, 1.1), box-shadow .22s ease, border-color .22s ease; overflow: hidden; } html[data-theme="crew"] .doc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #B5491F 0%, #D98B3A 50%, #B5491F 100%); opacity: 0.65; transition: opacity .22s ease, height .22s ease; pointer-events: none; } html[data-theme="crew"] .doc-card:hover { transform: translateY(-2px) scale(1.03); border-color: rgba(181, 73, 31, 0.28); box-shadow: 0 2px 4px -1px rgba(181, 73, 31, 0.10), 0 10px 22px -4px rgba(181, 73, 31, 0.15), 0 18px 32px -8px rgba(120, 80, 30, 0.10); } html[data-theme="crew"] .doc-card:hover::before { opacity: 1; height: 4px; } /* ── Crew: shared header — tabs become pills (underline hidden), icon buttons go round ── */ html[data-theme="crew"] .bl-sh-tab { border-radius: 999px; transition: background .14s ease, color .14s ease, transform .14s ease; } html[data-theme="crew"] .bl-sh-tab:hover { transform: translateY(-1px); } html[data-theme="crew"] .bl-sh-tab.is-active { background: var(--bl-sh-accent-bg); color: var(--bl-sh-accent); } html[data-theme="crew"] .bl-sh-tab.is-active::after { display: none; } html[data-theme="crew"] .bl-sh-iconbtn { border-radius: 999px; } html[data-theme="crew"] .bl-sh-tab-badge { border-radius: 999px; } /* ── Crew: calendar segmented nav rounds off ── */ html[data-theme="crew"] .cal-nav-group { border-radius: 999px; } html[data-theme="crew"] .cal-nav-group .cal-nav-btn { padding: 0 14px; }