/* ═══════════════════════════════════════════════════════════════════════ MASS WEED — Mass Effect-inspired HUD skin for WEEKLY_WEED_FLOW ─────────────────────────────────────────────────────────────────────── Two theme ids plug into GF's skin system (core.js GF.THEMES / THEME_CORE): • mass-weed — dark "command deck" (default) • mass-weed-light — "Cool Mist Glass" daylight variant The token maps are authored in the app's REAL token names, so every token-driven component (app.css/views.css) recolours with no markup change. Section 3 layers the HUD chrome (chamfered panels, cyan edge-glow, starfield) onto the app's actual .card/.btn/.modal/.sidebar classes. Source: Purely Plant "Mass Weed" design (wwf-skin.css), 2026-07-13. ═══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700;900&family=Saira+Condensed:wght@400;500;600;700&family=Orbitron:wght@600;700;800;900&display=swap'); /* ═══════════════ 1 · DARK — command deck (mass-weed) ═══════════════ */ :root[data-theme="mass-weed"] { color-scheme: dark; /* Surfaces — gunmetal blue steel (lightened from the original near-black hull — a dark theme still needs to read as navy, not void). */ --bg:#14273f; --surface:#1c3350; --surface-2:#234064; --surface-3:#2c4e79; --line:rgba(94,200,240,.16); --line-2:rgba(94,200,240,.09); --border-strong:rgba(94,200,240,.34); --overlay:rgba(3,6,16,.74); /* Ink — pale HUD cyan-white */ --ink:#eaf6ff; --ink-2:#9dc0d8; --ink-3:#6a8aa4; --ink-4:#47657c; /* Primary accent = Mass Weed cyan (was plasma green) */ --accent-rgb:94,200,240; --primary:#5ec8f0; --primary-hover:#8fe3ff; --primary-soft:rgba(var(--accent-rgb),.14); --primary-fg:#a8e4fb; --text-on-primary:#041018; --text-on-brand:#041018; --focus-ring:rgba(var(--accent-rgb),.5); /* Secondary accents (console glows) */ --blue:#5ec8f0; --blue-700:#1c6ca3; --blue-soft:rgba(94,200,240,.16); --blue-soft-2:rgba(94,200,240,.08); --orange:#f0b95e; --orange-700:#c88a2a; --orange-soft:rgba(240,185,94,.16); --orange-soft-2:rgba(240,185,94,.08); --red:#ef4d4d; --red-700:#c62222; --red-soft:rgba(239,77,77,.18); --red-fg:#ff8f8f; --amber:#ecec4a; --amber-700:#c9c522; --amber-soft:rgba(236,236,74,.16); --amber-fg:#f2f290; --violet:#c89bf0; --violet-700:#9a5be0; --violet-soft:rgba(200,155,240,.18); --teal:#6cf05a; --teal-soft:rgba(108,240,90,.14); --green:#6cf05a; --green-500:#6cf05a; --green-fg:#9df58c; --green-soft:rgba(108,240,90,.15); /* Department identity colours */ --dept-cultivation:#2be8a0; --dept-production:#2fd9d9; --dept-qc:#9b7be8; --dept-quality_assurance:#e0743a; --dept-logistics:#22b8d8; --dept-security:#7c90ae; --dept-tooling:#8496b2; /* Glass / HUD fills */ --glass-bg:rgba(9,28,52,.72); --glass-border:rgba(var(--accent-rgb),.14); --glass-blur:blur(14px); /* Typography — Titillium Web (UI) + Saira Condensed (headers) + Orbitron (numeric). Cyrillic (МК) gracefully falls back to Saira, which is already loaded. */ --font:'Titillium Web','Saira',-apple-system,system-ui,sans-serif; --font-display:'Saira Condensed','Saira',system-ui,sans-serif; --font-brand:'Saira Condensed','Saira',sans-serif; --font-num:'Orbitron','Saira Condensed',sans-serif; --mono:'Geist Mono',ui-monospace,'SF Mono',monospace; --ls-label:.14em; --ls-wide:.28em; /* Angular radii — corners are cut, not rounded */ --r-sm:3px; --r-md:4px; --r-lg:5px; --r-xl:6px; --chamfer:14px; --chamfer-sm:8px; /* Elevation — plasma glow, not soft shadow */ --sh-1:0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(var(--accent-rgb),.05); --sh-2:0 8px 24px rgba(0,0,0,.55), inset 0 0 24px rgba(28,108,163,.16); --sh-3:0 24px 60px rgba(0,0,0,.66), 0 0 0 1px rgba(var(--accent-rgb),.08); --sh-brand:0 0 26px rgba(var(--accent-rgb),.5), 0 2px 8px rgba(0,0,0,.6); --glow-cyan:0 0 12px rgba(var(--accent-rgb),.55), 0 0 2px rgba(143,227,255,.9); /* HUD scanline texture (the app already applies --scanlines to card/modal/sidebar) */ --scanlines:repeating-linear-gradient(0deg, rgba(94,200,240,.05) 0 1px, transparent 1px 3px); --clip-panel:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer)); --clip-notch:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px)); /* ── THE --mw-* DESIGN-SYSTEM TOKEN LAYER (dark) ────────────────────── Verbatim from design/mass-weed-mockup/mass-weed.css's :root block — the authored Mass Weed design system. Until now this app defined NONE of these: it mapped Mass Effect colours onto the app's generic token names (--bg/--ink/--primary) instead. The consequence was that any screen authored against the design system (the mockups in design/mass-weed-mockup/, and the QC screens the owner produced on 2026-07-30) rendered UNSTYLED here, because every var(--mw-…) resolved to nothing. These are values, not aliases, so they stay identical to the design source and can be diffed against it. The generic tokens above remain for the ~970 var() references already in app.css/views.css; components migrate onto --mw-* incrementally rather than in one sweep. */ /* Base backdrop */ --mw-void:#030610; --mw-abyss:#050b18; --mw-deep:#071324; --mw-hull:#0a1c33; --mw-hull-2:#0d2545; /* Cyan / electric-blue system */ --mw-cyan:#5ec8f0; --mw-cyan-bright:#8fe3ff; --mw-cyan-dim:#3a9fd4; --mw-cyan-deep:#1c6ca3; --mw-edge:#4db8e8; --mw-header:#a8e4fb; /* Panel fills (translucent) */ --mw-panel:rgba(9,28,52,.72); --mw-panel-2:rgba(6,20,40,.85); --mw-panel-in:rgba(4,14,28,.66); --mw-glass:rgba(30,90,150,.10); /* Rarity / faction */ --mw-common:#cbab7e; --mw-common-bg1:#4b3f28; --mw-common-bg2:#2a2216; --mw-uncommon:#7fe0a0; --mw-rare:#5ec8f0; --mw-rare-bg1:#123a5c; --mw-rare-bg2:#0a2038; --mw-epic:#c89bf0; --mw-legendary:#f0b95e; --mw-selected:#e88a34; /* Stat bar spectrum */ --mw-stat-hi:#6cf05a; --mw-stat-hi-2:#34c62c; --mw-stat-mid:#ecec4a; --mw-stat-mid-2:#c9c522; --mw-stat-lo:#ef4d4d; --mw-stat-lo-2:#c62222; --mw-stat-track:rgba(3,12,24,.8); /* Resource digits */ --mw-digit:#6ef06e; --mw-digit-glow:rgba(110,240,110,.55); /* Text */ --mw-text:#cfe6f5; --mw-text-dim:#7fa3bd; --mw-text-faint:#4d6d87; --mw-ink:#eaf6ff; /* Typography — the design's own stacks. The @import at the top of this file already loads Titillium Web + Saira Condensed. */ --mw-font:'Titillium Web', system-ui, sans-serif; --mw-font-cond:'Saira Condensed', 'Titillium Web', sans-serif; --mw-mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; --mw-track:.14em; --mw-track-wide:.28em; /* Effects */ --mw-glow-cyan:0 0 12px rgba(94,200,240,.55), 0 0 2px rgba(143,227,255,.9); --mw-glow-soft:0 0 20px rgba(58,159,212,.35); --mw-inner-glow:inset 0 0 24px rgba(28,108,163,.25); --mw-scan:repeating-linear-gradient(to bottom, rgba(94,200,240,.035) 0px, rgba(94,200,240,.035) 1px, transparent 1px, transparent 3px); /* Chamfer sizes */ --mw-chamfer:14px; --mw-chamfer-sm:8px; } /* ═══════════════ 2 · LIGHT — "Cool Mist Glass" (mass-weed-light) ═══════════════ */ :root[data-theme="mass-weed-light"] { color-scheme: light; --bg:#e7eef6; --surface:rgba(255,255,255,.9); --surface-2:rgba(237,245,252,.95); --surface-3:rgba(203,222,240,.8); --line:rgba(26,127,180,.22); --line-2:rgba(26,127,180,.12); --border-strong:rgba(26,127,180,.4); --overlay:rgba(200,220,238,.6); --ink:#102c44; --ink-2:#3d5e78; --ink-3:#587892; --ink-4:#93aabf; --accent-rgb:26,127,180; --primary:#1a7fb4; --primary-hover:#0d5c8a; --primary-soft:rgba(26,127,180,.12); --primary-fg:#0b5480; --text-on-primary:#ffffff; --text-on-brand:#ffffff; --focus-ring:rgba(26,127,180,.45); --blue:#1a7fb4; --blue-700:#0d5c8a; --blue-soft:rgba(26,127,180,.14); --blue-soft-2:rgba(26,127,180,.07); --orange:#c88320; --orange-700:#9a6212; --orange-soft:rgba(200,131,32,.15); --orange-soft-2:rgba(200,131,32,.08); --red:#d33636; --red-700:#a82424; --red-soft:rgba(211,54,54,.14); --red-fg:#b02525; --amber:#b8a41a; --amber-700:#8f7f12; --amber-soft:rgba(184,164,26,.16); --amber-fg:#8f7f12; --violet:#7a4fc2; --violet-700:#5d3a99; --violet-soft:rgba(122,79,194,.14); --teal:#1c9a4d; --teal-soft:rgba(28,154,77,.13); --green:#1c9a4d; --green-500:#1c9a4d; --green-fg:#178043; --green-soft:rgba(28,154,77,.14); /* Same brief hexes as dark — the design's light pages keep the one accent per department rather than a darkened variant. */ --dept-cultivation:#2be8a0; --dept-production:#2fd9d9; --dept-qc:#9b7be8; --dept-quality_assurance:#e0743a; --dept-logistics:#22b8d8; --dept-security:#7c90ae; --dept-tooling:#8496b2; --glass-bg:rgba(255,255,255,.82); --glass-border:rgba(26,127,180,.2); --glass-blur:blur(14px); --font:'Titillium Web','Saira',-apple-system,system-ui,sans-serif; --font-display:'Saira Condensed','Saira',system-ui,sans-serif; --font-brand:'Saira Condensed','Saira',sans-serif; --font-num:'Orbitron','Saira Condensed',sans-serif; --mono:'Geist Mono',ui-monospace,'SF Mono',monospace; --ls-label:.14em; --ls-wide:.28em; --chamfer:14px; --chamfer-sm:8px; --sh-1:0 1px 2px rgba(40,90,140,.12), inset 0 0 0 1px rgba(123,184,222,.18); --sh-2:0 8px 26px -12px rgba(40,90,140,.35), inset 0 0 0 1px rgba(123,184,222,.22); --sh-3:0 20px 48px -14px rgba(40,90,140,.4), 0 0 0 1px rgba(26,127,180,.12); --sh-brand:0 0 18px rgba(26,127,180,.3), 0 2px 8px rgba(40,90,140,.15); --glow-cyan:0 0 8px rgba(26,127,180,.25), 0 0 2px rgba(13,92,138,.4); --scanlines:repeating-linear-gradient(0deg, rgba(60,120,165,.028) 0 1px, transparent 1px 3px); --clip-panel:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); --clip-notch:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px)); /* ── --mw-* DESIGN-SYSTEM TOKEN LAYER (light) ──────────────────────── Verbatim from design/mass-weed-mockup/mass-weed.css's [data-theme="light"] block. ONLY the tokens the design actually overrides for daylight are repeated here — everything else (rarity, stat spectrum, typography, chamfers) inherits from the dark block above, exactly as it does in the design source. Overriding more here than the design does would silently fork the two. */ /* backdrop — cool mist */ --mw-void:#e7eef6; --mw-abyss:#eff5fb; --mw-deep:#dce8f3; --mw-hull:#ccdcee; --mw-hull-2:#bad0e6; /* cyan — darkened so it reads as ink/edge on white */ --mw-cyan:#1a7fb4; --mw-cyan-bright:#0d5c8a; --mw-cyan-dim:#4d97c2; --mw-cyan-deep:#093f66; --mw-edge:#7bb8de; --mw-header:#0b5480; /* translucent light glass */ --mw-panel:rgba(255,255,255,.76); --mw-panel-2:rgba(237,245,252,.88); --mw-panel-in:rgba(255,255,255,.64); --mw-glass:rgba(120,170,215,.10); /* ink */ --mw-text:#274a64; --mw-text-dim:#587892; --mw-text-faint:#93aabf; --mw-ink:#102c44; /* digits — deeper green for contrast */ --mw-digit:#1c9a4d; --mw-digit-glow:rgba(28,154,77,.30); /* stat track */ --mw-stat-track:rgba(176,202,224,.6); /* softened effects */ --mw-glow-cyan:0 0 8px rgba(26,127,180,.25), 0 0 2px rgba(13,92,138,.4); --mw-glow-soft:0 0 16px rgba(123,184,222,.22); --mw-inner-glow:inset 0 0 24px rgba(150,192,228,.28); --mw-scan:repeating-linear-gradient(to bottom, rgba(60,120,165,.028) 0px, rgba(60,120,165,.028) 1px, transparent 1px, transparent 3px); } /* ═══════════════ 3 · HUD CHROME (both mass-weed variants) ═══════════════ */ /* Deep-space canvas + faint starfield behind the whole shell */ :root[data-theme="mass-weed"] body{ background:radial-gradient(120% 90% at 50% -10%, var(--mw-bg-g1,#234064) 0%, var(--mw-bg-g2,#1a3050) 45%, var(--bg) 100%), var(--bg); } :root[data-theme="mass-weed-light"] body{ background:radial-gradient(120% 90% at 50% -10%, #f4f9ff 0%, #e7eff7 45%, #dbe6f2 100%), var(--bg); } :root[data-theme="mass-weed"] body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55; background: radial-gradient(1px 1px at 20% 30%, rgba(143,227,255,.55), transparent), radial-gradient(1px 1px at 70% 60%, rgba(143,227,255,.4), transparent), radial-gradient(1px 1px at 45% 80%, rgba(143,227,255,.45), transparent), radial-gradient(1px 1px at 85% 22%, rgba(143,227,255,.35), transparent), radial-gradient(1px 1px at 32% 55%, rgba(143,227,255,.3), transparent); } :root[data-theme="mass-weed"] #app{position:relative;z-index:1} /* Brand lockup + section headers run wide, uppercase, condensed */ :root[data-theme^="mass-weed"] .gf-name, :root[data-theme^="mass-weed"] .brand .gf-name{ font-family:var(--font-brand);letter-spacing:.2em;text-transform:uppercase; color:var(--primary-hover);text-shadow:0 0 14px rgba(var(--accent-rgb),.5); } :root[data-theme^="mass-weed"] .modal-head h3, :root[data-theme^="mass-weed"] .card-title, :root[data-theme^="mass-weed"] .tele-stat .l, :root[data-theme^="mass-weed"] .tele-card .l{ font-family:var(--font-display);letter-spacing:var(--ls-label); } :root[data-theme^="mass-weed"] .field label, :root[data-theme^="mass-weed"] .side-label{letter-spacing:var(--ls-wide)} /* KPI / telemetry numerals — Orbitron with a plasma glow */ :root[data-theme^="mass-weed"] .tele-stat .v, :root[data-theme^="mass-weed"] .tele-card .v{ font-family:var(--font-num);text-shadow:0 0 16px rgba(var(--accent-rgb),.4); } /* Chamfered task cards + cyan edge glow */ :root[data-theme^="mass-weed"] .card{ clip-path:var(--clip-notch);border-radius:0; box-shadow:var(--sh-1), 0 0 0 1px rgba(var(--accent-rgb),.1); } @media (hover: hover) and (pointer: fine){ :root[data-theme^="mass-weed"] .card:hover{ box-shadow:var(--sh-2), 0 0 18px rgba(var(--accent-rgb),.28);transform:translateY(-1px) } } :root[data-theme="mass-weed"] .card::before{opacity:.5} /* Chamfered dialogs with a glowing cyan frame — a full octagon (all 4 corners cut), matching the mockup's .mw-dialog "HUD popup" silhouette rather than the 2-corner notch other panels use. */ :root[data-theme^="mass-weed"] .modal{ clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 16px), 0 16px); border-radius:0; box-shadow:var(--sh-3), 0 0 34px rgba(var(--accent-rgb),.35); } /* Buttons — condensed uppercase, swept corners, cyan glow */ :root[data-theme^="mass-weed"] .btn{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-label); border-radius:0;clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px); } :root[data-theme^="mass-weed"] .btn-primary{ box-shadow:0 0 18px rgba(var(--accent-rgb),.4), 0 2px 6px rgba(0,0,0,.4); text-shadow:0 0 8px rgba(var(--accent-rgb),.4); } :root[data-theme^="mass-weed"] .btn-sm{clip-path:polygon(4px 0,100% 0,100% 100%,0 100%,0 4px)} /* Chamfered inputs with inner cyan focus glow */ :root[data-theme^="mass-weed"] .field input, :root[data-theme^="mass-weed"] .field textarea, :root[data-theme^="mass-weed"] .field select{ border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); } :root[data-theme^="mass-weed"] .field input:focus, :root[data-theme^="mass-weed"] .field textarea:focus, :root[data-theme^="mass-weed"] .field select:focus{ box-shadow:inset 0 0 0 1px var(--primary), inset 0 0 16px rgba(var(--accent-rgb),.18) } /* Active nav item — brighter cyan wash + edge bar */ :root[data-theme^="mass-weed"] .nav-item.active{ text-shadow:0 0 10px rgba(var(--accent-rgb),.5) } :root[data-theme="mass-weed"] .sidebar::before{opacity:.6} /* Telemetry tiles + pills pick up cut corners */ :root[data-theme^="mass-weed"] .tele-card{ border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) } :root[data-theme^="mass-weed"] .pill{letter-spacing:.06em;text-transform:uppercase} @media (prefers-reduced-motion: reduce){ :root[data-theme^="mass-weed"] .card:hover{transform:none} :root[data-theme^="mass-weed"] .kcard:hover, :root[data-theme^="mass-weed"] .team-card:hover{transform:none!important} :root[data-theme^="mass-weed"] .mw-tcard:hover{transform:none!important} .mw-skins__dot:hover{transform:none!important} } /* Chooser + af-block under the Mass Weed HUD: chamfer + accent glow. */ :root[data-theme^="mass-weed"] .sel-btn{ clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);border-radius:0} :root[data-theme^="mass-weed"] .sel-modal{ box-shadow:var(--sh-3), 0 0 34px rgba(var(--accent-rgb),.35)} :root[data-theme^="mass-weed"] .af-block{ clip-path:polygon(11px 0,100% 0,100% 100%,0 100%,0 11px);border-radius:0; box-shadow:inset 0 0 24px color-mix(in srgb, var(--dept-acc, var(--primary)) 10%, transparent)} /* ═══════════════ 4 · COMPONENT FILL (ported from the mockup's mw-* library, component-by-component, onto the app's real classes — each block below is consumed by shipped markup; source: design/mass-weed-mockup/mass-weed.css) ═══ */ /* .mw-st — status pills: condensed uppercase, tinted fill + inset ring drawn from the status colour the app already sets via currentColor. */ :root[data-theme^="mass-weed"] .pill{ font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:.08em; border:none;background:color-mix(in srgb, currentColor 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 42%, transparent); } /* .mw-stat — completion bars: chamfered track, banded gradient fill with a moving sheen. Consumed by the subtask tree bars (.tp-*) and the card track. */ @keyframes mw-sheen{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}} :root[data-theme^="mass-weed"] .tp-track, :root[data-theme^="mass-weed"] .track{ border-radius:0;clip-path:polygon(0 0,100% 0,100% 100%,3px 100%,0 calc(100% - 3px)); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3); } :root[data-theme^="mass-weed"] .tp-fill{border-radius:0;position:relative;overflow:hidden} :root[data-theme^="mass-weed"] .tp-fill::after{ content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:mw-sheen 3.5s ease-in-out 2; } :root[data-theme^="mass-weed"] .tp-fill.hi{ background:linear-gradient(90deg,color-mix(in srgb,var(--green) 55%,transparent),var(--green)); box-shadow:0 0 8px color-mix(in srgb,var(--green) 60%,transparent)} :root[data-theme^="mass-weed"] .tp-fill.mid{ background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 55%,transparent),var(--amber)); box-shadow:0 0 8px color-mix(in srgb,var(--amber) 55%,transparent)} :root[data-theme^="mass-weed"] .tp-fill.lo{ background:linear-gradient(90deg,color-mix(in srgb,var(--red) 55%,transparent),var(--red)); box-shadow:0 0 8px color-mix(in srgb,var(--red) 55%,transparent)} /* .mw-ring — the parent sub-task ring gets the plasma glow. */ :root[data-theme^="mass-weed"] .ring-mini{filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.5))} /* .pl-* — worklog completion control: chamfered quick-set cells, glowing slider thumb (the mockup task-detail log-progress panel). */ :root[data-theme^="mass-weed"] .pl-q{ font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;border-radius:0; clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px)} :root[data-theme^="mass-weed"] .pl-q.on{text-shadow:none;box-shadow:0 0 12px -2px var(--primary)} :root[data-theme^="mass-weed"] .pl-range::-webkit-slider-thumb{box-shadow:0 0 10px rgba(var(--accent-rgb),.7)} :root[data-theme^="mass-weed"] .pl-range::-moz-range-thumb{box-shadow:0 0 10px rgba(var(--accent-rgb),.7)} /* .mw-badge2 — count badges (nav unread/coordination): condensed numerals, void-dark text on a glowing chip. */ :root[data-theme^="mass-weed"] .nav-badge{ font-family:var(--font-display);font-weight:700;color:var(--text-on-primary); background:var(--primary);box-shadow:0 0 8px rgba(var(--accent-rgb),.6)} /* .mw-toast — chamfered, edge-lit notices; the app's kind classes keep setting the border-left colour. */ :root[data-theme^="mass-weed"] .toast{ border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); font-family:var(--font-display);letter-spacing:.04em} /* .mw-alert — the blocker callout: notched corner + hazard edge. */ :root[data-theme^="mass-weed"] .blocker{ border-radius:0;border-left:3px solid var(--red); clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px))} /* .mw-avatar — chamfered squares in avatar stacks. The single header avatar keeps its circle: its "you" ring is a box-shadow, which clip-path would silently swallow. */ :root[data-theme^="mass-weed"] .avatars .avatar{ border-radius:0;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)} /* .mw-empty — centered console empty states (inbox, chooser search). */ :root[data-theme^="mass-weed"] .ntf-empty, :root[data-theme^="mass-weed"] .sel-empty{ font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} /* .mw-table — data tables (document/report views): uppercase micro-headers over cyan hairlines, row hover wash. */ :root[data-theme^="mass-weed"] table th{ font-family:var(--font);text-transform:uppercase;letter-spacing:.1em;font-size:10px; color:var(--ink-3);border-bottom:1px solid rgba(var(--accent-rgb),.3)} :root[data-theme^="mass-weed"] table td{border-bottom:1px solid rgba(var(--accent-rgb),.1)} :root[data-theme^="mass-weed"] table tbody tr:hover{background:rgba(var(--accent-rgb),.08)} /* .mw-btn — the swept-hexagon command button on primary CTAs. */ :root[data-theme^="mass-weed"] .modal .btn-primary{ clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%); padding-left:22px;padding-right:22px} @media (prefers-reduced-motion: reduce){ :root[data-theme^="mass-weed"] .tp-fill::after{animation:none} } /* ═══ Component fill, pass 2 — stepper, feed, stat-cards, checkboxes, accordion sections (each consumed by shipped markup) ═══ */ /* .mw-stepper — active step gets the plasma ring, done bars glow. */ :root[data-theme^="mass-weed"] .mw-step__n{font-family:var(--font-display)} :root[data-theme^="mass-weed"] .mw-step.active .mw-step__n{ box-shadow:0 0 12px rgba(var(--accent-rgb),.5)} :root[data-theme^="mass-weed"] .mw-step__bar.done{ box-shadow:0 0 6px color-mix(in srgb,var(--green) 50%,transparent)} :root[data-theme^="mass-weed"] .mw-step__l{letter-spacing:.09em} /* .mw-feed — glowing timeline dots. */ :root[data-theme^="mass-weed"] .ntf-fdot{box-shadow:0 0 8px var(--primary)} :root[data-theme^="mass-weed"] .ntf-fdot.ok{box-shadow:0 0 8px var(--green)} :root[data-theme^="mass-weed"] .ntf-fdot.warn{box-shadow:0 0 8px var(--amber)} /* .mw-stat-card — dashboard + exec KPI tiles: chamfered corner, condensed numerals, micro uppercase labels. */ :root[data-theme^="mass-weed"] .kpi, :root[data-theme^="mass-weed"] .ekpi{ border-radius:0;clip-path:polygon(11px 0,100% 0,100% 100%,0 100%,0 11px); background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.16)} :root[data-theme^="mass-weed"] .kpi-v, :root[data-theme^="mass-weed"] .ekpi-v{ font-family:var(--font-num);letter-spacing:0; text-shadow:0 0 16px rgba(var(--accent-rgb),.35)} :root[data-theme^="mass-weed"] .kpi-l, :root[data-theme^="mass-weed"] .ekpi-l{ text-transform:uppercase;letter-spacing:.11em;font-size:10px;color:var(--ink-3)} /* .mw-check — task checkboxes: chamfered box, cyan-gradient fill + glow when done (the icon inside stays the app's check SVG). */ :root[data-theme^="mass-weed"] .check{ border-radius:0;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); border:none;box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.4);background:rgba(4,14,28,.35)} :root[data-theme="mass-weed-light"] .check{background:rgba(255,255,255,.5)} :root[data-theme^="mass-weed"] .check.done{ background:linear-gradient(180deg,var(--primary-hover),var(--primary)); box-shadow:0 0 10px rgba(var(--accent-rgb),.6)} /* .mw-acc — executive-report department sections: notched corner, condensed uppercase headers, accent edge when open. */ :root[data-theme^="mass-weed"] .xr-sec{ border-radius:0;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px))} :root[data-theme^="mass-weed"] .xr-sec-head b{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:14px} :root[data-theme^="mass-weed"] .xr-sec.open{ box-shadow:inset 2px 0 0 var(--primary), inset 0 0 24px rgba(var(--accent-rgb),.06)} /* ═══ Component fill, pass 3 — rail groups, gauge, pager, crumbs, spinner, tab buttons (owner's ui-elements.html library + nav.js grouped rail) ═══ */ :root[data-theme^="mass-weed"] .nav-group{ font-family:var(--font-display);letter-spacing:var(--ls-wide);color:var(--ink-3)} :root[data-theme^="mass-weed"] .mw-gauge__needle{ background:var(--primary-hover);box-shadow:0 0 8px rgba(var(--accent-rgb),.9)} :root[data-theme^="mass-weed"] .mw-gauge__val{ font-family:var(--font-num);text-shadow:0 0 12px rgba(var(--accent-rgb),.4)} :root[data-theme^="mass-weed"] .mw-pager button{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;border-radius:0; clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)} :root[data-theme^="mass-weed"] .mw-crumbs .cur{text-shadow:0 0 8px rgba(var(--accent-rgb),.4)} :root[data-theme^="mass-weed"] .mw-spinner{box-shadow:0 0 12px rgba(var(--accent-rgb),.3)} :root[data-theme^="mass-weed"] .ntf-tab{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em} :root[data-theme^="mass-weed"] .ntf-tab.on{ box-shadow:0 0 14px rgba(var(--accent-rgb),.4), inset 0 -2px 0 var(--primary-hover)} /* Facility board under the HUD: chamfered room cells, glowing counts (the mockup facility.html floor-plan look). */ :root[data-theme^="mass-weed"] .fac-room{ border-radius:0;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)} :root[data-theme^="mass-weed"] .fac-room:hover{box-shadow:0 0 18px rgba(var(--accent-rgb),.2)} :root[data-theme^="mass-weed"] .fr-nm{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em} :root[data-theme^="mass-weed"] .fr-n{ font-family:var(--font-num);text-shadow:0 0 12px rgba(var(--accent-rgb),.3)} :root[data-theme^="mass-weed"] .fs-dot{box-shadow:0 0 8px currentColor;color:inherit} /* ═══════════════════════════════════════════════════════════════════════ 4 · CHART / DATA-VIZ PALETTE (was falling back to the retired violet+green) Categorical HUD hues drawn from the theme's own validated signal colors — cyan→amber is a CVD-safe blue/orange pair; c/d/e extend it for N-series. Consumed by analytics-view / auditprep-view / QC charts via var(--ch-*). ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="mass-weed"]{ --ch-a:#5ec8f0; --ch-b:#f0b95e; --ch-c:#c89bf0; --ch-d:#6cf05a; --ch-e:#ff7ea8; --ch-grid:rgba(94,200,240,.14); --ch-axis:rgba(157,192,216,.5); } :root[data-theme="mass-weed-light"]{ --ch-a:#1a7fb4; --ch-b:#bd7714; --ch-c:#7a4fc2; --ch-d:#1c9a4d; --ch-e:#c23f6b; --ch-grid:rgba(26,127,180,.16); --ch-axis:rgba(61,94,120,.55); } /* wire the grid/axis tokens into the analytics chart chrome (blind before) */ :root[data-theme^="mass-weed"] .ana-grid{stroke:var(--ch-grid)} :root[data-theme^="mass-weed"] .ana-tick{fill:var(--ch-axis)} :root[data-theme^="mass-weed"] .ana-cap{fill:var(--primary-hover)} /* ═══════════════════════════════════════════════════════════════════════ 5 · HUD PRIMITIVES — reusable Mass Effect building blocks (were missing). Drop any of these classes onto an element; all are token-driven. ═══════════════════════════════════════════════════════════════════════ */ /* .hud-frame — corner-bracket targeting reticle (the defining ME motif) */ :root[data-theme^="mass-weed"] .hud-frame{position:relative} :root[data-theme^="mass-weed"] .hud-frame::before, :root[data-theme^="mass-weed"] .hud-frame::after{ content:"";position:absolute;width:13px;height:13px;pointer-events:none; border:1.5px solid var(--primary);opacity:.7;filter:drop-shadow(0 0 3px rgba(var(--accent-rgb),.7))} :root[data-theme^="mass-weed"] .hud-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0} :root[data-theme^="mass-weed"] .hud-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0} /* .hud-scan — scanline texture overlay any surface can opt into */ :root[data-theme^="mass-weed"] .hud-scan{position:relative;isolation:isolate} :root[data-theme^="mass-weed"] .hud-scan::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:-1; background:var(--scanlines);opacity:.6;mix-blend-mode:screen} /* .hud-panel — the canonical chamfered HUD panel (chamfer + edge + inner glow) */ :root[data-theme^="mass-weed"] .hud-panel{ clip-path:var(--clip-panel);border-radius:0; background:var(--glass-bg);border:1px solid var(--glass-border); box-shadow:var(--sh-1), 0 0 0 1px rgba(var(--accent-rgb),.07), inset 0 0 30px rgba(28,108,163,.06)} /* .hud-divider — angular accent rule between sections */ :root[data-theme^="mass-weed"] .hud-divider{ height:1px;border:0;margin:14px 0; background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:.4} /* .hud-led — status light with a bloom (color via currentColor/inline) */ :root[data-theme^="mass-weed"] .hud-led{ width:8px;height:8px;border-radius:50%;background:currentColor; box-shadow:0 0 8px currentColor,0 0 2px currentColor;display:inline-block} /* .hud-label — condensed, uppercase, wide-tracked micro-label */ :root[data-theme^="mass-weed"] .hud-label{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-wide); color:var(--ink-3);font-size:11px} /* .hud-glow — wire the previously-dead --glow-cyan primitive */ :root[data-theme^="mass-weed"] .hud-glow{box-shadow:var(--glow-cyan)} /* ═══════════════════════════════════════════════════════════════════════ 6 · COMPONENT COVERAGE SWEEP — families that had no HUD treatment. Additive only (clip/glow/type); no layout-box changes. ═══════════════════════════════════════════════════════════════════════ */ /* — Chip / tag family: clipped corner + condensed micro-caps + faint edge — */ :root[data-theme^="mass-weed"] .type-chip, :root[data-theme^="mass-weed"] .tag-chip, :root[data-theme^="mass-weed"] .attr-chip, :root[data-theme^="mass-weed"] .dep-chip, :root[data-theme^="mass-weed"] .prtag, :root[data-theme^="mass-weed"] .daytag, :root[data-theme^="mass-weed"] .due-badge, :root[data-theme^="mass-weed"] .xr-chip, :root[data-theme^="mass-weed"] .coord-tag, :root[data-theme^="mass-weed"] .fac-chip, :root[data-theme^="mass-weed"] .chip-opt{ border-radius:0;clip-path:polygon(4px 0,100% 0,100% 100%,0 100%,0 4px); font-family:var(--font-display);letter-spacing:.06em} /* — Secondary buttons: same swept corner + hover bloom as .btn — */ :root[data-theme^="mass-weed"] .icon-btn, :root[data-theme^="mass-weed"] .mini-btn, :root[data-theme^="mass-weed"] .btn-ghost, :root[data-theme^="mass-weed"] .btn-orange, :root[data-theme^="mass-weed"] .btn-danger, :root[data-theme^="mass-weed"] .seg-b{ border-radius:0;clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px)} :root[data-theme^="mass-weed"] .icon-btn:hover, :root[data-theme^="mass-weed"] .mini-btn:hover{ box-shadow:0 0 12px rgba(var(--accent-rgb),.28);border-color:var(--border-strong)} :root[data-theme^="mass-weed"] .btn-orange{box-shadow:0 0 14px rgba(240,185,94,.3)} :root[data-theme^="mass-weed"] .btn-danger{box-shadow:0 0 14px rgba(239,77,77,.28)} /* — Panels / cards that were generic: chamfer + hairline edge + scanline — */ :root[data-theme^="mass-weed"] .panel, :root[data-theme^="mass-weed"] .fac-panel, :root[data-theme^="mass-weed"] .dash-card, :root[data-theme^="mass-weed"] .team-card, :root[data-theme^="mass-weed"] .coord-row, :root[data-theme^="mass-weed"] .ana-tile, :root[data-theme^="mass-weed"] .ana-panel, :root[data-theme^="mass-weed"] .xr-kpi, :root[data-theme^="mass-weed"] .kcol, :root[data-theme^="mass-weed"] .kcard, :root[data-theme^="mass-weed"] .tlcard, :root[data-theme^="mass-weed"] .wl-row{ border-radius:0;clip-path:var(--clip-notch); box-shadow:var(--sh-1), 0 0 0 1px rgba(var(--accent-rgb),.06)} @media (hover: hover) and (pointer: fine){ :root[data-theme^="mass-weed"] .kcard:hover, :root[data-theme^="mass-weed"] .team-card:hover{ box-shadow:var(--sh-2), 0 0 16px rgba(var(--accent-rgb),.22);transform:translateY(-1px)} } /* KPI numerals across the generic dashboards get the Orbitron plasma glow */ :root[data-theme^="mass-weed"] .xr-kpi .v, :root[data-theme^="mass-weed"] .xr-kpi b, :root[data-theme^="mass-weed"] .ana-tv, :root[data-theme^="mass-weed"] .dash-n, :root[data-theme^="mass-weed"] .exec-n{ font-family:var(--font-num);text-shadow:0 0 14px rgba(var(--accent-rgb),.35)} :root[data-theme^="mass-weed"] .ana-tl, :root[data-theme^="mass-weed"] .ana-pt, :root[data-theme^="mass-weed"] .xr-kpi .l{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-label)} /* progress fills in generic bars pick up the sweep + glow like .tp-fill */ :root[data-theme^="mass-weed"] .ana-hb-f, :root[data-theme^="mass-weed"] .wl-fill, :root[data-theme^="mass-weed"] .exec-dbar > span{ box-shadow:0 0 10px rgba(var(--accent-rgb),.35)} /* — Board / timeline columns: HUD header rail. (.kcol-head is what views.js actually renders — the old .kcol-h/.kcol-title selectors matched nothing.) — */ :root[data-theme^="mass-weed"] .kcol-head, :root[data-theme^="mass-weed"] .tlcol-head{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)} /* — Calendar cells: angular, today gets a targeting glow — */ :root[data-theme^="mass-weed"] .cal-cell{border-radius:0;clip-path:polygon(4px 0,100% 0,100% 100%,0 100%,0 4px)} :root[data-theme^="mass-weed"] .cal-today{ box-shadow:inset 0 0 0 1px var(--primary), 0 0 12px rgba(var(--accent-rgb),.3)} :root[data-theme^="mass-weed"] .cal-chip{border-radius:0} /* — Secondary inputs: same chamfer + focus glow as .field input — */ :root[data-theme^="mass-weed"] .search, :root[data-theme^="mass-weed"] .sel-search, :root[data-theme^="mass-weed"] .qms-search, :root[data-theme^="mass-weed"] .sp-field, :root[data-theme^="mass-weed"] .wl-input, :root[data-theme^="mass-weed"] .note-input input, :root[data-theme^="mass-weed"] .pl-range{ border-radius:0;clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px)} /* .note-input is the flex CONTAINER (app.css:475); chamfering it sliced the rounded corner of the bare inside and clipped its focus ring. The chamfer belongs on the input itself (rule above); the container stays a plain layout box. */ :root[data-theme^="mass-weed"] .note-input{border-radius:0;clip-path:none} :root[data-theme^="mass-weed"] .search:focus, :root[data-theme^="mass-weed"] .sel-search:focus, :root[data-theme^="mass-weed"] .qms-search:focus, :root[data-theme^="mass-weed"] .sp-field:focus{ box-shadow:inset 0 0 0 1px var(--primary), 0 0 12px rgba(var(--accent-rgb),.22);outline:0} /* — Switches / segmented toggles / settings tabs — */ :root[data-theme^="mass-weed"] .seg, :root[data-theme^="mass-weed"] .lang-toggle{ border-radius:0;clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px)} :root[data-theme^="mass-weed"] .set-tab.on, :root[data-theme^="mass-weed"] .seg-b.on{ box-shadow:inset 0 -2px 0 var(--primary-hover), 0 0 12px rgba(var(--accent-rgb),.3)} :root[data-theme^="mass-weed"] .set-tab{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em} /* — Skeleton: give the shimmer a cyan cast — */ :root[data-theme^="mass-weed"] .mw-skel{ background-image:linear-gradient(90deg,transparent,rgba(94,200,240,.10),transparent)} /* — Base spinner (non-mw) picks up the glow — */ :root[data-theme^="mass-weed"] .spinner{box-shadow:0 0 10px rgba(var(--accent-rgb),.25)} /* — Priority tag: hazard-lean colored edge — */ :root[data-theme^="mass-weed"] .prtag{box-shadow:inset 0 0 0 1px currentColor;opacity:.95} /* ═══════════════════════════════════════════════════════════════════════ 7 · SIGNATURE HUD CUES — the two defining Mass Effect motifs the mockups lead with on every screen (design/mass-weed-mockup/{dashboard,board}.html): the KPI top-accent glow bar (.mw-kpi / .mw-col::after) and the glowing left-accent bar on the active nav rail item (.mw-rail__item.is-active). Pure chrome — pseudo-elements + shadow only, no layout-box change. ═══════════════════════════════════════════════════════════════════════ */ /* KPI / telemetry tiles: a cyan top-edge accent that fades right, with bloom. The tiles are chamfered in §2/§6, so the bar follows the cut top-left. */ :root[data-theme^="mass-weed"] .kpi, :root[data-theme^="mass-weed"] .ekpi, :root[data-theme^="mass-weed"] .tele-card, :root[data-theme^="mass-weed"] .ana-tile, :root[data-theme^="mass-weed"] .xr-kpi{position:relative} :root[data-theme^="mass-weed"] .kpi::before, :root[data-theme^="mass-weed"] .ekpi::before, :root[data-theme^="mass-weed"] .tele-card::before, :root[data-theme^="mass-weed"] .ana-tile::before, :root[data-theme^="mass-weed"] .xr-kpi::before{ content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none; background:linear-gradient(90deg, var(--primary), transparent 78%); box-shadow:0 0 10px color-mix(in srgb, var(--primary) 60%, transparent); } /* Active nav rail item: make the base inset left-bar bloom, and add the soft cyan text glow the mockup rail uses on the current screen. */ :root[data-theme^="mass-weed"] .nav-item.active{ box-shadow:inset 3px 0 0 var(--primary), -1px 0 12px -2px color-mix(in srgb, var(--primary) 70%, transparent); } /* ═══════════════════════════════════════════════════════════════════════ 8 · CANONICAL-FIDELITY PASS — closes the real gaps vs design/mass-weed- mockup/ found in the coverage audit, all mapped onto REAL shipped classes (no new markup). Brings the traced edge-glow, panel scanlines, the corner- bracket reticle, section-header markers, moving sheen, dept-home HUD, and nav-group rules to live fidelity. ═══════════════════════════════════════════════════════════════════════ */ /* 8a — MASKED CYAN EDGE-GLOW (the mockup's defining trace-outline look). A 1px cyan stroke that follows each chamfer via mask-composite, instead of the box-shadow ring that clip-path was truncating at the cut corners. Uses ::after (every target's ::before is free-or-scanline; none own ::after). */ :root[data-theme^="mass-weed"] .card, :root[data-theme^="mass-weed"] .modal, :root[data-theme^="mass-weed"] .panel, :root[data-theme^="mass-weed"] .kcol, :root[data-theme^="mass-weed"] .kcard, :root[data-theme^="mass-weed"] .ana-tile, :root[data-theme^="mass-weed"] .ana-panel, :root[data-theme^="mass-weed"] .xr-sec, :root[data-theme^="mass-weed"] .xr-kpi, :root[data-theme^="mass-weed"] .kpi, :root[data-theme^="mass-weed"] .ekpi, :root[data-theme^="mass-weed"] .tele-card, :root[data-theme^="mass-weed"] .fac-panel, :root[data-theme^="mass-weed"] .dash-card, :root[data-theme^="mass-weed"] .team-card{position:relative} :root[data-theme^="mass-weed"] .card::after, :root[data-theme^="mass-weed"] .modal::after, :root[data-theme^="mass-weed"] .panel::after, :root[data-theme^="mass-weed"] .kcol::after, :root[data-theme^="mass-weed"] .kcard::after, :root[data-theme^="mass-weed"] .ana-tile::after, :root[data-theme^="mass-weed"] .ana-panel::after, :root[data-theme^="mass-weed"] .xr-sec::after, :root[data-theme^="mass-weed"] .xr-kpi::after, :root[data-theme^="mass-weed"] .kpi::after, :root[data-theme^="mass-weed"] .ekpi::after, :root[data-theme^="mass-weed"] .tele-card::after, :root[data-theme^="mass-weed"] .fac-panel::after, :root[data-theme^="mass-weed"] .dash-card::after, :root[data-theme^="mass-weed"] .team-card::after{ content:"";position:absolute;inset:0;clip-path:inherit;padding:1px;pointer-events:none; background:linear-gradient(150deg, var(--primary), var(--blue-700) 55%, var(--primary)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; } /* 8b — SCANLINE overlay on the §6 panel families that had none (.card/.modal already carry it in app.css; KPI tiles spend ::before on the top-accent). */ :root[data-theme^="mass-weed"] .panel::before, :root[data-theme^="mass-weed"] .kcol::before, :root[data-theme^="mass-weed"] .kcard::before, :root[data-theme^="mass-weed"] .xr-sec::before, :root[data-theme^="mass-weed"] .ana-panel::before, :root[data-theme^="mass-weed"] .fac-panel::before, :root[data-theme^="mass-weed"] .dash-card::before, :root[data-theme^="mass-weed"] .team-card::before{ content:"";position:absolute;inset:0;background:var(--scanlines);opacity:.35;pointer-events:none} /* 8c — CORNER-BRACKET RETICLE (the signature ME targeting frame) made live on the real exec-dashboard KPI strip, drawn in its margin so it frames the row. */ :root[data-theme^="mass-weed"] .exec-kpis{position:relative} :root[data-theme^="mass-weed"] .exec-kpis::before, :root[data-theme^="mass-weed"] .exec-kpis::after{ content:"";position:absolute;width:14px;height:14px;pointer-events:none; border:1.5px solid var(--primary);opacity:.7;filter:drop-shadow(0 0 3px rgba(var(--accent-rgb),.6))} :root[data-theme^="mass-weed"] .exec-kpis::before{top:-6px;left:-4px;border-right:0;border-bottom:0} :root[data-theme^="mass-weed"] .exec-kpis::after{bottom:-6px;right:-4px;border-left:0;border-top:0} /* 8d — SECTION-HEADER MARKER: replaces the dead .gf-hdr rule with a universal, layout-safe leading cyan accent bar + glow on the real .view-title (rendered on every screen). Non-breaking — .view-head keeps its flex row + actions. */ :root[data-theme^="mass-weed"] .view-title{ display:inline-flex;align-items:center;gap:11px;text-shadow:0 0 14px rgba(var(--accent-rgb),.3)} :root[data-theme^="mass-weed"] .view-title::before{ content:"";width:4px;height:.86em;flex:none; background:linear-gradient(180deg,var(--primary-hover),var(--primary)); box-shadow:0 0 9px rgba(var(--accent-rgb),.65)} /* 8e — MOVING SHEEN on the generic progress bars (was only on .tp-fill). */ :root[data-theme^="mass-weed"] .track>span, :root[data-theme^="mass-weed"] .ana-hb-f, :root[data-theme^="mass-weed"] .wl-fill{position:relative;overflow:hidden} :root[data-theme^="mass-weed"] .track>span::after, :root[data-theme^="mass-weed"] .ana-hb-f::after, :root[data-theme^="mass-weed"] .wl-fill::after{ content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:mw-sheen 3.5s ease-in-out 2} /* 8f — DEPT-HOME HUD (was entirely un-themed): grouped-key chips, icon glow, condensed labels, console empty-state — onto the real .dh-* classes. */ :root[data-theme^="mass-weed"] .dh-group-key{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em; color:var(--primary-fg);background:rgba(var(--accent-rgb),.1); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3)} :root[data-theme^="mass-weed"] .dh-icon{box-shadow:0 0 12px rgba(var(--accent-rgb),.25)} :root[data-theme^="mass-weed"] .dh-presets-lbl, :root[data-theme^="mass-weed"] .dh-empty-title{ font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase} /* 8g — NAV-GROUP flanking rule (mirrors the mockup rail .mw-rail__group::after). */ :root[data-theme^="mass-weed"] .nav-group{display:flex;align-items:center;gap:8px} :root[data-theme^="mass-weed"] .nav-group::after{ content:"";flex:1;height:1px;opacity:.35; background:linear-gradient(90deg,currentColor,transparent)} @media (prefers-reduced-motion: reduce){ :root[data-theme^="mass-weed"] .track>span::after, :root[data-theme^="mass-weed"] .ana-hb-f::after, :root[data-theme^="mass-weed"] .wl-fill::after{animation:none} } /* ═══════════════════════════════════════════════════════════════════════ 9 · REMAINING FIDELITY POLISH — dept-tinted task-card edge (the rarity- coded item band, adapted to the app's real dept-color concept) + the resource HUD strip (facility board site-wide totals). ═══════════════════════════════════════════════════════════════════════ */ /* 9a — dept-colored left edge on task cards, driven by --dept-acc (set inline by views.js/depthome-view.js from the same color the app already shows on .kcard-dept). Repeats the §6 base shadow + adds the inset accent, so it wins by source order at equal specificity without disturbing sibling selectors (.kcol/.tlcard/etc. keep the plain §6 treatment). */ :root[data-theme^="mass-weed"] .kcard{ box-shadow:var(--sh-1), 0 0 0 1px rgba(var(--accent-rgb),.06), inset 3px 0 0 var(--dept-acc, var(--primary))} @media (hover: hover) and (pointer: fine){ :root[data-theme^="mass-weed"] .kcard:hover{ box-shadow:var(--sh-2), 0 0 16px rgba(var(--accent-rgb),.22), inset 3px 0 0 var(--dept-acc, var(--primary));transform:translateY(-1px)} } :root[data-theme^="mass-weed"] .kcard:active{transform:translateY(-1px) scale(.97)} /* 9b — resource HUD strip (facility board totals): hexagonal icon badge with an inner glow ring + Orbitron numeral, mirroring the mockup's .mw-res. */ :root[data-theme^="mass-weed"] .fac-res-ic{ border-radius:0;background:rgba(var(--accent-rgb),.08); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); box-shadow:inset 0 0 0 1px currentColor, 0 0 8px currentColor} :root[data-theme^="mass-weed"] .fac-res-v{ font-family:var(--font-num);text-shadow:0 0 12px currentColor} :root[data-theme^="mass-weed"] .fac-res-l{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em} /* ═══════════════════════════════════════════════════════════════════════ 10 · ADHERENCE PASS (2026-07) — closes the remaining gaps from the UI audit: cyan HUD scrollbar, cyan text-selection, a fully-HUD login "front door" with the signature corner-bracket reticle, pulsing threat/overdue cues, a "systems online" boot-in on brand + section headers, a radial- gauge bloom, and a demo status LED. All additive + mass-weed-scoped (inert on every other skin) and CSS-only (no markup change). ═══════════════════════════════════════════════════════════════════════ */ /* 10a — cyan HUD scrollbar (the base app.css thumb-hover was off-palette plasma-green — a leftover from the retired theme). */ :root[data-theme^="mass-weed"] ::-webkit-scrollbar-track{background:rgba(6,18,34,.5)} :root[data-theme^="mass-weed"] ::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.32)} :root[data-theme^="mass-weed"] ::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb),.6)} :root[data-theme^="mass-weed"]{scrollbar-color:rgba(var(--accent-rgb),.4) transparent} /* 10b — cyan text selection (was the browser-default blue, breaking the HUD). */ :root[data-theme^="mass-weed"] ::selection{ background:rgba(var(--accent-rgb),.32);color:var(--ink); text-shadow:0 0 6px rgba(var(--accent-rgb),.6)} /* 10c — LOGIN FRONT DOOR: the splash/login card (entry.js .gf-*) gets the full HUD chrome — chamfer, glowing frame, condensed brand, swept CTA — plus the signature corner-bracket targeting reticle every interior screen otherwise has but the first screen lacked. */ :root[data-theme^="mass-weed"] .gf-card{ clip-path:var(--clip-panel);border-radius:0; box-shadow:var(--sh-3), 0 0 34px rgba(var(--accent-rgb),.28); position:relative;isolation:isolate} :root[data-theme^="mass-weed"] .gf-card::after{ content:"";position:absolute;inset:9px;pointer-events:none;opacity:.7; filter:drop-shadow(0 0 3px rgba(var(--accent-rgb),.7)); background: linear-gradient(var(--primary),var(--primary)) 0 0/16px 1.5px no-repeat, linear-gradient(var(--primary),var(--primary)) 0 0/1.5px 16px no-repeat, linear-gradient(var(--primary),var(--primary)) 100% 100%/16px 1.5px no-repeat, linear-gradient(var(--primary),var(--primary)) 100% 100%/1.5px 16px no-repeat} :root[data-theme^="mass-weed"] .gf-card-title{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em; color:var(--primary-hover);text-shadow:0 0 14px rgba(var(--accent-rgb),.4)} :root[data-theme^="mass-weed"] .gf-card-sub{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:11px} :root[data-theme^="mass-weed"] .gf-in{ border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)} :root[data-theme^="mass-weed"] .gf-in:focus{ box-shadow:inset 0 0 0 1px var(--primary), inset 0 0 16px rgba(var(--accent-rgb),.18)} :root[data-theme^="mass-weed"] .gf-btn{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-label);border-radius:0; clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px); box-shadow:0 0 18px rgba(var(--accent-rgb),.4)} :root[data-theme^="mass-weed"] .gf-demo-float{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;border-radius:0; clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px); box-shadow:0 0 16px rgba(var(--accent-rgb),.35)} /* 10d — THREAT / OVERDUE PULSE: the mockup's "active alert" bloom, mapped onto the real overdue / blocked / critical signal classes. */ @keyframes mw-alert{0%,100%{box-shadow:0 0 10px 1px rgba(239,77,77,.55),0 0 0 0 rgba(239,77,77,0)}50%{box-shadow:0 0 10px 1px rgba(239,77,77,.55),0 0 18px 4px rgba(239,77,77,.6)}} @keyframes mw-alert-amber{0%,100%{box-shadow:0 0 10px 1px rgba(240,185,94,.5),0 0 0 0 rgba(240,185,94,0)}50%{box-shadow:0 0 10px 1px rgba(240,185,94,.5),0 0 18px 4px rgba(240,185,94,.55)}} :root[data-theme^="mass-weed"] .due-badge.overdue, :root[data-theme^="mass-weed"] .attn-tag.overdue, :root[data-theme^="mass-weed"] .ops-tag.overdue{box-shadow:0 0 10px 1px rgba(240,185,94,.5);animation:mw-alert-amber 2.4s ease-in-out 3} :root[data-theme^="mass-weed"] .attn-tag.stuck, :root[data-theme^="mass-weed"] .prtag.critical{box-shadow:0 0 10px 1px rgba(239,77,77,.55);animation:mw-alert 2.4s ease-in-out 3} /* 10e — "SYSTEMS ONLINE" boot-in on the brand lockup + every section title (a classic ME power-on cue; stays readable — never fully blanks). */ @keyframes mw-boot{0%{opacity:.25}10%{opacity:.7}16%{opacity:.35}28%{opacity:.9}40%{opacity:.5}100%{opacity:1}} :root[data-theme^="mass-weed"] .gf-name{animation:mw-boot .9s steps(1,end) 1} :root[data-theme^="mass-weed"] .view-title{animation:mw-boot .55s steps(1,end) 1} /* 10f — RADIAL GAUGE bloom: the exec conic gauge (views.js .mw-gauge) reads as a real HUD dial — cyan rim + glowing arc. */ :root[data-theme^="mass-weed"] .mw-gauge{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.2), inset 0 0 18px rgba(var(--accent-rgb),.08)} :root[data-theme^="mass-weed"] .mw-gauge__arc{filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.35))} /* 10g — DEMO status LED: the banner dot blooms like a HUD indicator light. */ :root[data-theme^="mass-weed"] .gfdb-dot{box-shadow:0 0 8px currentColor, 0 0 2px currentColor} @media (prefers-reduced-motion: reduce){ :root[data-theme^="mass-weed"] .due-badge.overdue, :root[data-theme^="mass-weed"] .attn-tag.overdue, :root[data-theme^="mass-weed"] .ops-tag.overdue, :root[data-theme^="mass-weed"] .attn-tag.stuck, :root[data-theme^="mass-weed"] .prtag.critical, :root[data-theme^="mass-weed"] .gf-name, :root[data-theme^="mass-weed"] .view-title{animation:none} } /* ═══════════════ 5 · DESIGN-SYSTEM COMPONENT ATOMS (.mw-*) ═══════════════ Stage 2 of the Mass Weed port. Stage 1 (commit cb74eec) brought in the --mw-* TOKENS; this brings in the component ATOMS those tokens exist to drive, copied verbatim from design/mass-weed-mockup/mass-weed.css. WHY THESE NINE FAMILIES AND NOT ALL ~180. The design system defines far more atoms than the app currently has markup for, and importing all of them would ship dead CSS that nothing renders and nothing tests. These are the ones the NEWEST screens depend on — the design notes on depthome-qc name them explicitly as "added to mass-weed.css as shared atoms": .mw-tcard (+ its __box/__main/__title/__meta/__dept/__id/__right/--done), .mw-attr (filled mono attribute chip), .mw-htag (#hash outline chip), .mw-due(+--over), .mw-sub, and the .mw-st--* status pills (done/working/review/stuck/postponed). Added alongside them are the frame primitives every one of those sits inside — .mw-panel(+--alt/--hero/ --quiet), .mw-well, .mw-label, .mw-field, .mw-input — because a task card with no panel around it is not the design, it is a floating card. VERBATIM, NOT ADAPTED. Same reasoning as the token layer: these can be diffed against the design source forever. They reference only --mw-* tokens, all of which stage 1 defined, so they resolve in both themes. Nothing here overrides an existing app class — .card/.btn/.modal keep the HUD chrome in section 3 — so this is purely additive and no current view changes appearance until its markup opts in. ═══════════════════════════════════════════════════════════════════════ */ /* ── panel primitives (design lines 117-176) ── */ /* ============================================================ CHAMFERED PANEL — the core frame primitive ============================================================ */ .mw-panel { position: relative; background: linear-gradient(160deg, var(--mw-panel) 0%, var(--mw-panel-2) 100%); clip-path: polygon( var(--mw-chamfer) 0, 100% 0, 100% calc(100% - var(--mw-chamfer)), calc(100% - var(--mw-chamfer)) 100%, 0 100%, 0 var(--mw-chamfer)); padding: 16px 18px; box-shadow: var(--mw-inner-glow), var(--mw-glow-soft); z-index: 1; } /* glowing chamfered edge (drawn as a slightly larger clone behind) */ .mw-panel::before { content: ""; position: absolute; inset: 0; clip-path: inherit; padding: 1.5px; background: linear-gradient(150deg, var(--mw-edge), var(--mw-cyan-deep) 55%, var(--mw-edge)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; filter: drop-shadow(0 0 3px rgba(94,200,240,0.6)); } /* scanline texture overlay */ .mw-panel::after { content: ""; position: absolute; inset: 0; clip-path: inherit; background: var(--mw-scan); opacity: 0.7; pointer-events: none; mix-blend-mode: screen; } .mw-panel > * { position: relative; z-index: 2; } /* opposite-corner chamfer variant */ .mw-panel--alt { clip-path: polygon( 0 0, calc(100% - var(--mw-chamfer)) 0, 100% var(--mw-chamfer), 100% 100%, var(--mw-chamfer) 100%, 0 calc(100% - var(--mw-chamfer))); } /* inset sub-panel (list wells etc.) */ .mw-well { background: var(--mw-panel-in); box-shadow: inset 0 0 30px rgba(0,0,0,0.6), inset 0 0 1px var(--mw-cyan-deep); clip-path: polygon( var(--mw-chamfer-sm) 0, 100% 0, 100% calc(100% - var(--mw-chamfer-sm)), calc(100% - var(--mw-chamfer-sm)) 100%, 0 100%, 0 var(--mw-chamfer-sm)); position: relative; } /* ============================================================ /* ── elevation tiers (design lines 177-215) ── */ ELEVATION TIERS — focal hierarchy Tier 1 .mw-panel--hero : the one focal element per screen (raised, brighter) Tier 2 .mw-panel : default supporting content (unchanged) Tier 3 .mw-panel--quiet : background chrome / lists (recessed, calm) ============================================================ */ /* Tier 1 — hero: brighter fill, lifted shadow, stronger edge + top sheen */ .mw-panel--hero { background: linear-gradient(160deg, rgba(16,44,78,0.82) 0%, rgba(9,26,50,0.9) 100%); box-shadow: inset 0 0 30px rgba(28,108,163,0.32), 0 0 0 1px rgba(94,200,240,0.10), 0 14px 40px -12px rgba(0,0,0,0.7), 0 0 34px rgba(58,159,212,0.5); } .mw-panel--hero::before { padding: 2px; background: linear-gradient(150deg, var(--mw-cyan-bright), var(--mw-cyan-deep) 55%, var(--mw-edge)); filter: drop-shadow(0 0 6px rgba(94,200,240,0.85)); } /* faint diagonal sheen sweeping the hero panel */ .mw-panel--hero > .mw-hero-sheen, .mw-panel--hero::after { background: linear-gradient(120deg, rgba(143,227,255,0.10) 0%, transparent 34%), var(--mw-scan); } /* Tier 3 — quiet: recede, flatten, drop the edge glow */ .mw-panel--quiet { background: linear-gradient(160deg, rgba(6,18,34,0.6) 0%, rgba(4,13,26,0.72) 100%); box-shadow: inset 0 0 20px rgba(0,0,0,0.5); } .mw-panel--quiet::before { background: linear-gradient(150deg, rgba(77,184,232,0.28), rgba(28,108,163,0.18)); filter: none; } .mw-panel--quiet::after { opacity: 0.4; } /* ── label (design lines 249-256) ── */ .mw-label { font-family: var(--mw-font); text-transform: uppercase; letter-spacing: var(--mw-track); font-size: 11px; font-weight: 600; color: var(--mw-text-dim); } /* ── field + input (design lines 613-630) ── */ INPUTS ============================================================ */ .mw-field { margin-bottom: 14px; } .mw-field > label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:var(--mw-track); color: var(--mw-text-dim); margin-bottom:6px; } .mw-input { width:100%; box-sizing:border-box; font-family: var(--mw-font); font-size:15px; color: var(--mw-ink); background: rgba(4,14,28,0.7); border:none; padding: 11px 14px; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); box-shadow: inset 0 0 0 1px rgba(58,159,212,0.35); outline:none; transition: box-shadow .15s ease; } .mw-input::placeholder { color: var(--mw-text-faint); } .mw-input:focus { box-shadow: inset 0 0 0 1px var(--mw-cyan), inset 0 0 16px rgba(94,200,240,0.2); } /* ============================================================ TASK CARD ATOM (compact) + meta chips Shared across Dept Home, Exec Report, Board tree. Accent via --mw-acc (dept color) set inline on the card. ============================================================ */ .mw-tcard{ position:relative; display:flex; align-items:flex-start; gap:10px; padding:10px 12px; margin-bottom:8px; cursor:pointer; background:linear-gradient(160deg, rgba(12,40,72,0.5), rgba(6,20,40,0.5)); clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%); border-left:3px solid var(--mw-acc,#5ec8f0); transition:transform .12s ease, filter .12s ease; } .mw-tcard::after{ content:""; position:absolute; inset:0; clip-path:inherit; padding:1px; background:color-mix(in srgb, var(--mw-acc,#5ec8f0) 24%, transparent); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } @media (hover: hover) and (pointer: fine){ .mw-tcard:hover{ transform:translateX(2px); filter:brightness(1.12); } } [data-theme="light"] .mw-tcard{ background:linear-gradient(160deg, rgba(255,255,255,0.8), rgba(238,246,252,0.86)); } .mw-tcard__box{ width:17px; height:17px; flex:none; margin-top:2px; box-sizing:border-box; border:1.5px solid color-mix(in srgb, var(--mw-acc,#5ec8f0) 55%, transparent); background:var(--mw-panel-in); clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px); display:grid; place-items:center; color:transparent; font-size:11px; } .mw-tcard--done .mw-tcard__box{ background:var(--mw-stat-hi); color:var(--mw-void); } .mw-tcard--done .mw-tcard__box::after{ content:"✓"; } .mw-tcard--done .mw-tcard__title{ color:var(--mw-text-dim); text-decoration:line-through; text-decoration-color:rgba(120,160,190,.5); } .mw-tcard__main{ flex:1; min-width:0; } .mw-tcard__title{ font-family:var(--mw-font-cond); font-size:15px; font-weight:600; color:var(--mw-ink); letter-spacing:.02em; line-height:1.25; } .mw-tcard__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:7px; } .mw-tcard__dept{ font-family:var(--mw-font-cond); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mw-acc,#5ec8f0); } .mw-tcard__id{ font-family:'Saira Condensed',monospace; font-size:11px; color:var(--mw-text-faint); letter-spacing:.03em; } .mw-tcard__right{ display:flex; align-items:center; gap:8px; flex:none; align-self:center; } /* attribute chip — FILLED soft chip, mono value (dept metadata) */ .mw-attr{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--mw-text-dim); background:color-mix(in srgb, var(--mw-acc,#5ec8f0) 15%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mw-acc,#5ec8f0) 32%, transparent); padding:2px 7px; clip-path:polygon(4px 0,100% 0,100% 100%,0 100%,0 4px); } .mw-attr b{ font-family:'Saira Condensed',monospace; font-weight:700; color:var(--mw-cyan-bright); font-size:11px; letter-spacing:.02em; } /* hashtag chip — OUTLINE (free tag) */ .mw-htag{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--mw-text-dim); background:transparent; box-shadow:inset 0 0 0 1px rgba(94,200,240,0.3); padding:2px 7px; clip-path:polygon(4px 0,100% 0,100% 100%,0 100%,0 4px); } /* due badge */ .mw-due{ font-family:'Saira Condensed',monospace; font-size:11px; font-weight:700; letter-spacing:.02em; padding:1px 8px; color:var(--mw-cyan-bright); background:rgba(58,159,212,.16); } .mw-due--over{ color:#fff; background:var(--mw-stat-lo); box-shadow:0 0 8px rgba(239,77,77,.5); } /* subtask progress + hours */ .mw-sub{ font-family:'Saira Condensed',monospace; font-size:11px; font-weight:600; color:var(--mw-text-dim); display:inline-flex; align-items:center; gap:4px; } .mw-sub svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8; } /* status pill (task lifecycle) */ .mw-st{ display:inline-flex; align-items:center; height:20px; padding:0 9px; font-family:var(--mw-font-cond); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; border-radius:10px; white-space:nowrap; } .mw-st--done{ color:var(--mw-stat-hi); background:rgba(108,240,90,.14); box-shadow:inset 0 0 0 1px rgba(108,240,90,.4); } .mw-st--working{ color:#f0b95e; background:rgba(240,185,94,.14); box-shadow:inset 0 0 0 1px rgba(240,185,94,.42); } .mw-st--review{ color:var(--mw-cyan-bright); background:rgba(58,159,212,.16); box-shadow:inset 0 0 0 1px rgba(94,200,240,.4); } .mw-st--stuck{ color:var(--mw-stat-lo); background:rgba(239,77,77,.14); box-shadow:inset 0 0 0 1px rgba(239,77,77,.45); } .mw-st--postponed{ color:var(--mw-stat-mid); background:rgba(236,236,74,.12); box-shadow:inset 0 0 0 1px rgba(236,236,74,.4); } /* ═══ Component fill, pass 4 — the 2026-07-30 design revision's atoms: chip groups, reveal wells, subtask tree, dependency + acknowledgment pills (verbatim from design/mass-weed-mockup/mass-weed.css; consumed by task-detail / task-create / depthome surfaces) ═══ */ .mw-chips{ display:flex; flex-wrap:wrap; gap:8px; } .mw-chip{ --cc: var(--mw-cyan); display:inline-flex; align-items:center; gap:7px; padding:8px 13px; background:var(--mw-panel-in); box-shadow:inset 0 0 0 1px rgba(94,200,240,.18); clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); font-family:var(--mw-font); font-size:12.5px; font-weight:600; letter-spacing:.03em; color:var(--mw-text-dim); border:none; cursor:pointer; user-select:none; transition:color .13s ease, background .13s ease, box-shadow .13s ease, transform .13s ease; } .mw-chip:hover{ color:var(--mw-text); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cc) 45%, transparent); } .mw-chip:active{ transform:scale(.97); } .mw-chip.on{ color:var(--cc); background:color-mix(in srgb, var(--cc) 16%, var(--mw-panel-in)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cc) 55%, transparent), 0 0 14px -4px var(--cc); } .mw-chip .d{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; opacity:.5; flex:none; } .mw-chip.on .d{ opacity:1; } .mw-chip--sm{ padding:6px 10px; font-size:11.5px; } /* reveal panel (blocker / deviation detail — hidden until triggered) */ .mw-reveal{ display:none; margin-top:10px; padding:11px 13px; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); } .mw-reveal.show{ display:block; } .mw-reveal--warn{ background:color-mix(in srgb, var(--mw-stat-lo) 10%, var(--mw-panel-in)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mw-stat-lo) 40%, transparent); } .mw-reveal--info{ background:color-mix(in srgb, var(--mw-cyan) 8%, var(--mw-panel-in)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mw-cyan) 35%, transparent); } /* nested subtask tree (unlimited depth) */ .mw-subnode{ display:flex; align-items:center; gap:9px; padding:8px 11px; background:var(--mw-panel-in); box-shadow:inset 0 0 0 1px rgba(94,200,240,.12); margin-bottom:6px; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); } .mw-subnode .box{ width:15px;height:15px;flex:none;border:1.5px solid var(--mw-cyan-dim);border-radius:3px;cursor:pointer;position:relative; } .mw-subnode .box.done{ background:var(--mw-cyan);border-color:var(--mw-cyan); } .mw-subnode .box.done::after{ content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--mw-void);border-width:0 2px 2px 0;transform:rotate(45deg); } .mw-subnode .t{ flex:1; min-width:0; font-size:13px; color:var(--mw-text); } .mw-subnode.done .t{ text-decoration:line-through; color:var(--mw-text-faint); } .mw-subnode .who{ font-size:10.5px; color:var(--mw-text-faint); white-space:nowrap; } .mw-subnode .x{ color:var(--mw-text-faint); cursor:pointer; font-size:12px; } .mw-subnode .x:hover{ color:var(--mw-stat-lo); } .mw-subbranch{ margin-left:22px; padding-left:12px; border-left:2px solid color-mix(in srgb, var(--mw-acc,var(--mw-cyan)) 40%, transparent); } .mw-subghost{ display:flex; gap:16px; padding:6px 2px; font-size:12px; color:var(--mw-text-dim); } .mw-subghost span{ cursor:pointer; } .mw-subghost span:hover{ color:var(--mw-cyan-bright); } /* dependency pill (blocks / blocked-by, met/unmet) */ .mw-dep{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; font-size:11.5px; color:var(--mw-text); background:var(--mw-panel-in); box-shadow:inset 0 0 0 1px rgba(94,200,240,.18); clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); } .mw-dep .dot{ width:7px;height:7px;border-radius:50%; flex:none; } .mw-dep.met .dot{ background:var(--mw-stat-hi); box-shadow:0 0 6px var(--mw-stat-hi); } .mw-dep.unmet .dot{ background:var(--mw-stat-lo); box-shadow:0 0 6px var(--mw-stat-lo); } /* assignment acknowledgment pill */ .mw-ack{ display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding:2px 8px; clip-path:polygon(4px 0,100% 0,100% 100%,0 100%,0 4px); } .mw-ack--pending{ color:var(--mw-stat-mid); background:rgba(236,236,74,.13); } .mw-ack--accepted{ color:var(--mw-stat-hi); background:rgba(108,240,90,.13); } .mw-ack--declined{ color:var(--mw-stat-lo); background:rgba(239,77,77,.13); } /* The newer design's stepper labels — ADDITIVE only: the app's own numbered .mw-stepper base lives in app.css and must not be re-based here. */ .mw-step__t{ font-size:11px; font-weight:700; color:var(--mw-text-dim); letter-spacing:.01em; line-height:1.25; } .mw-step.done .mw-step__t{ color:var(--mw-stat-hi); } /* progress meter (design lines 345-365) — the .mw-stat__track / __fill pair the subtask-completion bar and dept-home KPI meters draw. Verbatim from design/mass-weed-mockup/mass-weed.css; --mid/--hi/--lo pick the fill hue. */ .mw-stat__track{ height:6px; background:var(--mw-stat-track); border-radius:3px; overflow:hidden; } .mw-stat__fill{ width:100%; height:100%; border-radius:3px; position:relative; transform-origin:left center; transition:transform .4s ease; } .mw-stat__fill--hi { background:linear-gradient(90deg, var(--mw-stat-hi-2), var(--mw-stat-hi)); box-shadow:0 0 8px rgba(108,240,90,0.6); } .mw-stat__fill--mid{ background:linear-gradient(90deg, var(--mw-stat-mid-2), var(--mw-stat-mid)); box-shadow:0 0 8px rgba(236,236,74,0.55); } .mw-stat__fill--lo { background:linear-gradient(90deg, var(--mw-stat-lo-2), var(--mw-stat-lo)); box-shadow:0 0 8px rgba(239,77,77,0.55); } /* ═══════════════ 6 · COLOR SCHEMES ([data-skin]) — ONE identity, MANY hues ═══ Ported from design/mass-weed-mockup/mass-weed.css (the 2026-07-30 revision) and design/mass-weed-mockup/mw-i18n.js. Every scheme keeps the Mass Weed HUD chrome and re-hues ONLY the accent family, backdrop and glow; semantic stat colors (green/amber/red) are deliberately NOT re-hued, same as the design. Default (no attribute / data-skin="alliance") is the original cyan. The design re-hues --mw-* tokens only, because the mockups consume nothing else. The APP additionally derives its generic tokens (--bg, --surface*, --primary…) from hard-coded hexes in section 1, so each scheme here ALSO re-derives that accent-facing subset — otherwise the atoms would re-hue and the chrome would stay cyan, which is exactly the halfway state the port exists to prevent. Accent-family app tokens reference the --mw-* vars; surfaces keep section 1's "lightened navy" decision by construction: each hex below is the skin's --mw-hull-2 with the SAME lightness/saturation factors that map the design default hull-2 to section 1's surfaces (HSL math, generated — do not hand-edit; the derivation script lives in the commit message of this section). */ /* ---- RENEGADE ---- */ :root[data-theme^="mass-weed"][data-skin="renegade"]{ --mw-cyan:#f0555e; --mw-cyan-bright:#ff8a90; --mw-cyan-dim:#d43a52; --mw-cyan-deep:#a31c3a; --mw-edge:#e84d6a; --mw-header:#fba8b8; --mw-rare:#f0555e; --mw-glow-cyan:0 0 12px rgba(240,85,94,0.55), 0 0 2px rgba(255,138,144,0.9); --mw-glow-soft:0 0 20px rgba(212,58,82,0.35); --mw-inner-glow:inset 0 0 24px rgba(163,28,58,0.25); --mw-scan:repeating-linear-gradient(to bottom,rgba(240,85,94,0.035) 0px,rgba(240,85,94,0.035) 1px,transparent 1px,transparent 3px); } :root[data-theme="mass-weed"][data-skin="renegade"]{ --mw-void:#100306; --mw-abyss:#180509; --mw-deep:#240711; --mw-hull:#330a1c; --mw-hull-2:#45102a; --mw-haze:#3a0f1e; --mw-panel:rgba(52,12,24,0.72); --mw-panel-2:rgba(40,8,18,0.85); --mw-panel-in:rgba(28,6,14,0.66); /* app-token derivation (see section header) */ --bg:#3f172b; --surface:#511f38; --surface-2:#652745; --surface-3:#7a3155; --mw-bg-g1:#652745; --mw-bg-g2:#501d36; --accent-rgb:240,85,94; --primary:var(--mw-cyan); --primary-hover:var(--mw-cyan-bright); --primary-soft:rgba(var(--accent-rgb),.14); --primary-fg:var(--mw-header); --focus-ring:rgba(var(--accent-rgb),.5); --blue:var(--mw-cyan); --blue-700:var(--mw-cyan-deep); --blue-soft:rgba(var(--accent-rgb),.16); --blue-soft-2:rgba(var(--accent-rgb),.08); --line:rgba(var(--accent-rgb),.16); --line-2:rgba(var(--accent-rgb),.09); --border-strong:rgba(var(--accent-rgb),.34); } :root[data-theme="mass-weed-light"][data-skin="renegade"]{ /* Cool Mist keeps its frosted canvas; only the accent re-hues (design rule). Light needs the DARK end of the accent family for contrast on white. */ --accent-rgb:163,28,58; --primary:var(--mw-cyan-deep); --primary-hover:var(--mw-cyan-dim); --primary-soft:rgba(var(--accent-rgb),.12); --primary-fg:var(--mw-cyan-deep); --focus-ring:rgba(var(--accent-rgb),.45); --blue:var(--mw-cyan-deep); --blue-700:var(--mw-cyan-dim); --blue-soft:rgba(var(--accent-rgb),.14); --blue-soft-2:rgba(var(--accent-rgb),.07); --line:rgba(var(--accent-rgb),.22); --line-2:rgba(var(--accent-rgb),.12); --border-strong:rgba(var(--accent-rgb),.4); } /* ---- PARAGON ---- */ :root[data-theme^="mass-weed"][data-skin="paragon"]{ --mw-cyan:#5e7cf0; --mw-cyan-bright:#8fa3ff; --mw-cyan-dim:#3a5ad4; --mw-cyan-deep:#1c3aa3; --mw-edge:#4d6ae8; --mw-header:#a8bafb; --mw-rare:#5e7cf0; --mw-glow-cyan:0 0 12px rgba(94,124,240,0.55), 0 0 2px rgba(143,163,255,0.9); --mw-glow-soft:0 0 20px rgba(58,90,212,0.35); --mw-inner-glow:inset 0 0 24px rgba(28,58,163,0.25); --mw-scan:repeating-linear-gradient(to bottom,rgba(94,124,240,0.035) 0px,rgba(94,124,240,0.035) 1px,transparent 1px,transparent 3px); } :root[data-theme="mass-weed"][data-skin="paragon"]{ --mw-void:#05061a; --mw-abyss:#080b28; --mw-deep:#0a1140; --mw-hull:#131c58; --mw-hull-2:#1a2470; --mw-haze:#16205a; --mw-panel:rgba(19,28,88,0.72); --mw-panel-2:rgba(10,17,64,0.85); --mw-panel-in:rgba(6,10,40,0.66); /* app-token derivation (see section header) */ --bg:#252d67; --surface:#333c83; --surface-2:#404ba4; --surface-3:#5965bc; --mw-bg-g1:#404ba4; --mw-bg-g2:#303983; --accent-rgb:94,124,240; --primary:var(--mw-cyan); --primary-hover:var(--mw-cyan-bright); --primary-soft:rgba(var(--accent-rgb),.14); --primary-fg:var(--mw-header); --focus-ring:rgba(var(--accent-rgb),.5); --blue:var(--mw-cyan); --blue-700:var(--mw-cyan-deep); --blue-soft:rgba(var(--accent-rgb),.16); --blue-soft-2:rgba(var(--accent-rgb),.08); --line:rgba(var(--accent-rgb),.16); --line-2:rgba(var(--accent-rgb),.09); --border-strong:rgba(var(--accent-rgb),.34); } :root[data-theme="mass-weed-light"][data-skin="paragon"]{ /* Cool Mist keeps its frosted canvas; only the accent re-hues (design rule). Light needs the DARK end of the accent family for contrast on white. */ --accent-rgb:28,58,163; --primary:var(--mw-cyan-deep); --primary-hover:var(--mw-cyan-dim); --primary-soft:rgba(var(--accent-rgb),.12); --primary-fg:var(--mw-cyan-deep); --focus-ring:rgba(var(--accent-rgb),.45); --blue:var(--mw-cyan-deep); --blue-700:var(--mw-cyan-dim); --blue-soft:rgba(var(--accent-rgb),.14); --blue-soft-2:rgba(var(--accent-rgb),.07); --line:rgba(var(--accent-rgb),.22); --line-2:rgba(var(--accent-rgb),.12); --border-strong:rgba(var(--accent-rgb),.4); } /* ---- OMEGA ---- */ :root[data-theme^="mass-weed"][data-skin="omega"]{ --mw-cyan:#c85ef0; --mw-cyan-bright:#e38fff; --mw-cyan-dim:#a63ad4; --mw-cyan-deep:#7a1ca3; --mw-edge:#c04de8; --mw-header:#d9a8fb; --mw-rare:#c85ef0; --mw-glow-cyan:0 0 12px rgba(200,94,240,0.55), 0 0 2px rgba(227,143,255,0.9); --mw-glow-soft:0 0 20px rgba(166,58,212,0.35); --mw-inner-glow:inset 0 0 24px rgba(122,28,163,0.25); --mw-scan:repeating-linear-gradient(to bottom,rgba(200,94,240,0.035) 0px,rgba(200,94,240,0.035) 1px,transparent 1px,transparent 3px); } :root[data-theme="mass-weed"][data-skin="omega"]{ --mw-void:#0d0416; --mw-abyss:#140620; --mw-deep:#1c0730; --mw-hull:#2a0a45; --mw-hull-2:#380e5c; --mw-haze:#300d4a; --mw-panel:rgba(42,10,69,0.72); --mw-panel-2:rgba(28,7,48,0.85); --mw-panel-in:rgba(20,6,32,0.66); /* app-token derivation (see section header) */ --bg:#381854; --surface:#49226a; --surface-2:#5b2a85; --surface-3:#6f35a0; --mw-bg-g1:#5b2a85; --mw-bg-g2:#471f6a; --accent-rgb:200,94,240; --primary:var(--mw-cyan); --primary-hover:var(--mw-cyan-bright); --primary-soft:rgba(var(--accent-rgb),.14); --primary-fg:var(--mw-header); --focus-ring:rgba(var(--accent-rgb),.5); --blue:var(--mw-cyan); --blue-700:var(--mw-cyan-deep); --blue-soft:rgba(var(--accent-rgb),.16); --blue-soft-2:rgba(var(--accent-rgb),.08); --line:rgba(var(--accent-rgb),.16); --line-2:rgba(var(--accent-rgb),.09); --border-strong:rgba(var(--accent-rgb),.34); } :root[data-theme="mass-weed-light"][data-skin="omega"]{ /* Cool Mist keeps its frosted canvas; only the accent re-hues (design rule). Light needs the DARK end of the accent family for contrast on white. */ --accent-rgb:122,28,163; --primary:var(--mw-cyan-deep); --primary-hover:var(--mw-cyan-dim); --primary-soft:rgba(var(--accent-rgb),.12); --primary-fg:var(--mw-cyan-deep); --focus-ring:rgba(var(--accent-rgb),.45); --blue:var(--mw-cyan-deep); --blue-700:var(--mw-cyan-dim); --blue-soft:rgba(var(--accent-rgb),.14); --blue-soft-2:rgba(var(--accent-rgb),.07); --line:rgba(var(--accent-rgb),.22); --line-2:rgba(var(--accent-rgb),.12); --border-strong:rgba(var(--accent-rgb),.4); } /* ---- CITADEL ---- */ :root[data-theme^="mass-weed"][data-skin="citadel"]{ --mw-cyan:#f0c05e; --mw-cyan-bright:#ffe08f; --mw-cyan-dim:#d4a03a; --mw-cyan-deep:#a37a1c; --mw-edge:#e8c04d; --mw-header:#fbe4a8; --mw-rare:#f0c05e; --mw-glow-cyan:0 0 12px rgba(240,192,94,0.55), 0 0 2px rgba(255,224,143,0.9); --mw-glow-soft:0 0 20px rgba(212,160,58,0.35); --mw-inner-glow:inset 0 0 24px rgba(163,122,28,0.25); --mw-scan:repeating-linear-gradient(to bottom,rgba(240,192,94,0.035) 0px,rgba(240,192,94,0.035) 1px,transparent 1px,transparent 3px); } :root[data-theme="mass-weed"][data-skin="citadel"]{ --mw-void:#100c03; --mw-abyss:#181305; --mw-deep:#241c07; --mw-hull:#33290a; --mw-hull-2:#45360e; --mw-haze:#3a2f0c; --mw-panel:rgba(51,41,10,0.72); --mw-panel-2:rgba(36,28,7,0.85); --mw-panel-in:rgba(24,19,5,0.66); /* app-token derivation (see section header) */ --bg:#3f3415; --surface:#50421d; --surface-2:#645324; --surface-3:#79652e; --mw-bg-g1:#645324; --mw-bg-g2:#50421b; --accent-rgb:240,192,94; --primary:var(--mw-cyan); --primary-hover:var(--mw-cyan-bright); --primary-soft:rgba(var(--accent-rgb),.14); --primary-fg:var(--mw-header); --focus-ring:rgba(var(--accent-rgb),.5); --blue:var(--mw-cyan); --blue-700:var(--mw-cyan-deep); --blue-soft:rgba(var(--accent-rgb),.16); --blue-soft-2:rgba(var(--accent-rgb),.08); --line:rgba(var(--accent-rgb),.16); --line-2:rgba(var(--accent-rgb),.09); --border-strong:rgba(var(--accent-rgb),.34); } :root[data-theme="mass-weed-light"][data-skin="citadel"]{ /* Cool Mist keeps its frosted canvas; only the accent re-hues (design rule). Light needs the DARK end of the accent family for contrast on white. */ --accent-rgb:163,122,28; --primary:var(--mw-cyan-deep); --primary-hover:var(--mw-cyan-dim); --primary-soft:rgba(var(--accent-rgb),.12); --primary-fg:var(--mw-cyan-deep); --focus-ring:rgba(var(--accent-rgb),.45); --blue:var(--mw-cyan-deep); --blue-700:var(--mw-cyan-dim); --blue-soft:rgba(var(--accent-rgb),.14); --blue-soft-2:rgba(var(--accent-rgb),.07); --line:rgba(var(--accent-rgb),.22); --line-2:rgba(var(--accent-rgb),.12); --border-strong:rgba(var(--accent-rgb),.4); } /* ---- SPECTRE ---- */ :root[data-theme^="mass-weed"][data-skin="spectre"]{ --mw-cyan:#3fe0a0; --mw-cyan-bright:#7ff0c0; --mw-cyan-dim:#2ab585; --mw-cyan-deep:#1c8a63; --mw-edge:#34d99a; --mw-header:#a8fbd9; --mw-rare:#3fe0a0; --mw-glow-cyan:0 0 12px rgba(63,224,160,0.55), 0 0 2px rgba(127,240,192,0.9); --mw-glow-soft:0 0 20px rgba(42,181,133,0.35); --mw-inner-glow:inset 0 0 24px rgba(28,138,99,0.25); --mw-scan:repeating-linear-gradient(to bottom,rgba(63,224,160,0.035) 0px,rgba(63,224,160,0.035) 1px,transparent 1px,transparent 3px); } :root[data-theme="mass-weed"][data-skin="spectre"]{ --mw-void:#03100b; --mw-abyss:#051810; --mw-deep:#072418; --mw-hull:#0a3325; --mw-hull-2:#0e4533; --mw-haze:#0c3a2a; --mw-panel:rgba(10,51,37,0.72); --mw-panel-2:rgba(7,36,24,0.85); --mw-panel-in:rgba(5,24,16,0.66); /* app-token derivation (see section header) */ --bg:#153f31; --surface:#1d503f; --surface-2:#24644f; --surface-3:#2e7961; --mw-bg-g1:#24644f; --mw-bg-g2:#1b503f; --accent-rgb:63,224,160; --primary:var(--mw-cyan); --primary-hover:var(--mw-cyan-bright); --primary-soft:rgba(var(--accent-rgb),.14); --primary-fg:var(--mw-header); --focus-ring:rgba(var(--accent-rgb),.5); --blue:var(--mw-cyan); --blue-700:var(--mw-cyan-deep); --blue-soft:rgba(var(--accent-rgb),.16); --blue-soft-2:rgba(var(--accent-rgb),.08); --line:rgba(var(--accent-rgb),.16); --line-2:rgba(var(--accent-rgb),.09); --border-strong:rgba(var(--accent-rgb),.34); } :root[data-theme="mass-weed-light"][data-skin="spectre"]{ /* Cool Mist keeps its frosted canvas; only the accent re-hues (design rule). Light needs the DARK end of the accent family for contrast on white. */ --accent-rgb:28,138,99; --primary:var(--mw-cyan-deep); --primary-hover:var(--mw-cyan-dim); --primary-soft:rgba(var(--accent-rgb),.12); --primary-fg:var(--mw-cyan-deep); --focus-ring:rgba(var(--accent-rgb),.45); --blue:var(--mw-cyan-deep); --blue-700:var(--mw-cyan-dim); --blue-soft:rgba(var(--accent-rgb),.14); --blue-soft-2:rgba(var(--accent-rgb),.07); --line:rgba(var(--accent-rgb),.22); --line-2:rgba(var(--accent-rgb),.12); --border-strong:rgba(var(--accent-rgb),.4); } /* ---- FLUX ---- */ :root[data-theme^="mass-weed"][data-skin="flux"]{ --mw-cyan:#2fd9d9; --mw-cyan-bright:#7ff0f0; --mw-cyan-dim:#1fb5b5; --mw-cyan-deep:#0e8a8a; --mw-edge:#34d9c0; --mw-header:#a8fbf0; --mw-rare:#2fd9d9; --mw-glow-cyan:0 0 12px rgba(47,217,217,0.55), 0 0 2px rgba(127,240,240,0.9); --mw-glow-soft:0 0 20px rgba(31,181,181,0.35); --mw-inner-glow:inset 0 0 24px rgba(14,138,138,0.25); --mw-scan:repeating-linear-gradient(to bottom,rgba(47,217,217,0.035) 0px,rgba(47,217,217,0.035) 1px,transparent 1px,transparent 3px); } :root[data-theme="mass-weed"][data-skin="flux"]{ --mw-void:#03100f; --mw-abyss:#05100f; --mw-deep:#07211f; --mw-hull:#0a302e; --mw-hull-2:#0e4340; --mw-haze:#0c3835; --mw-panel:rgba(10,48,46,0.72); --mw-panel-2:rgba(7,33,31,0.85); --mw-panel-in:rgba(5,22,20,0.66); /* app-token derivation (see section header) */ --bg:#153d3b; --surface:#1d4e4b; --surface-2:#24615e; --surface-3:#2d7672; --mw-bg-g1:#24615e; --mw-bg-g2:#1b4e4b; --accent-rgb:47,217,217; --primary:var(--mw-cyan); --primary-hover:var(--mw-cyan-bright); --primary-soft:rgba(var(--accent-rgb),.14); --primary-fg:var(--mw-header); --focus-ring:rgba(var(--accent-rgb),.5); --blue:var(--mw-cyan); --blue-700:var(--mw-cyan-deep); --blue-soft:rgba(var(--accent-rgb),.16); --blue-soft-2:rgba(var(--accent-rgb),.08); --line:rgba(var(--accent-rgb),.16); --line-2:rgba(var(--accent-rgb),.09); --border-strong:rgba(var(--accent-rgb),.34); } :root[data-theme="mass-weed-light"][data-skin="flux"]{ /* Cool Mist keeps its frosted canvas; only the accent re-hues (design rule). Light needs the DARK end of the accent family for contrast on white. */ --accent-rgb:14,138,138; --primary:var(--mw-cyan-deep); --primary-hover:var(--mw-cyan-dim); --primary-soft:rgba(var(--accent-rgb),.12); --primary-fg:var(--mw-cyan-deep); --focus-ring:rgba(var(--accent-rgb),.45); --blue:var(--mw-cyan-deep); --blue-700:var(--mw-cyan-dim); --blue-soft:rgba(var(--accent-rgb),.14); --blue-soft-2:rgba(var(--accent-rgb),.07); --line:rgba(var(--accent-rgb),.22); --line-2:rgba(var(--accent-rgb),.12); --border-strong:rgba(var(--accent-rgb),.4); } /* scheme picker dots (design .mw-skins, rescoped to app theme ids) */ .mw-skins{ display:inline-flex; align-items:center; gap:5px; padding:3px 7px; } .mw-skins__dot{ width:15px; height:15px; border-radius:50%; cursor:pointer; padding:0; border:none; position:relative; background:var(--sw); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.25); transition:transform .12s ease, box-shadow .12s ease; } @media (hover: hover) and (pointer: fine){ .mw-skins__dot:hover{ transform:scale(1.18); } } .mw-skins__dot.is-active{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.9), 0 0 9px 1px var(--sw); transform:scale(1.12); } :root[data-theme="mass-weed-light"] .mw-skins__dot{ box-shadow:inset 0 0 0 1.5px rgba(20,50,80,0.3); } :root[data-theme="mass-weed-light"] .mw-skins__dot.is-active{ box-shadow:inset 0 0 0 1.5px rgba(20,50,80,0.85), 0 0 9px 1px var(--sw); } /* ═══════════════ 7 · ATOM PORTABILITY (every NON-mass-weed skin) ═══════════ The .mw-* component atoms above consume --mw-* tokens bare, and only the two mass-weed themes define those tokens. The moment app views started emitting .mw-* markup (depthome's task cards first), every other skin would render them with var() resolving to NOTHING — invisible text, the same silent failure the whole port exists to prevent, this time in reverse. So outside mass-weed, each consumed token aliases to the app's generic token of the same ROLE: a Nord tcard renders in Nord's ink and Nord's accent through the very same atoms. One identity per skin — not Mass Weed leaking cyan into all of them. tests/frontend/depthome-view.test.js walks the atom sections and fails if an atom ever consumes a bare token this block does not alias. */ :root:not([data-theme^="mass-weed"]){ --mw-ink:var(--ink); --mw-text:var(--ink-2); --mw-text-dim:var(--ink-3); --mw-text-faint:var(--ink-4); --mw-cyan:var(--primary); --mw-cyan-bright:var(--primary-hover); --mw-cyan-dim:var(--primary); --mw-cyan-deep:var(--blue-700); --mw-edge:var(--primary); --mw-header:var(--primary-fg); --mw-void:var(--bg); --mw-panel:var(--surface); --mw-panel-2:var(--surface-2); --mw-panel-in:var(--surface-2); --mw-stat-hi:var(--teal); --mw-stat-mid:var(--amber); --mw-stat-lo:var(--red); /* progress-meter track + gradient second-stops (.mw-stat__track/__fill): the track takes the app's own progress-bar surface, each fill's darker stop collapses onto its role token so the meter is a flat generic hue. */ --mw-stat-track:var(--surface-3); --mw-stat-hi-2:var(--teal); --mw-stat-mid-2:var(--amber); --mw-stat-lo-2:var(--red); --mw-font:var(--font); --mw-font-cond:var(--font-display); --mw-mono:var(--mono); --mw-track:.09em; --mw-chamfer:10px; --mw-chamfer-sm:6px; /* HUD-specific effects have no generic counterpart: neutralise, never glow another theme in cyan. */ --mw-glow-cyan:none; --mw-glow-soft:none; --mw-inner-glow:none; --mw-scan:none; } /* ═══════════════ 8 · LOGIN / SECURE ACCESS atoms ═══════════════ The design's Secure Access screen (design/mass-weed-mockup/login.html) is built from these atoms, and the shipped skin carried only a COMMENT where .mw-btn should be — so the login's Authenticate button rendered unstyled. Ported verbatim from design/mass-weed-mockup/mass-weed.css: the hexagon command button, the flanked header bar, the HUD title, and the tab buttons. Consumed by web/gf/entry.js. */ .mw-title { font-family: var(--mw-font-cond); text-transform: uppercase; letter-spacing: var(--mw-track); color: var(--mw-header); font-weight: 600; text-shadow: 0 0 10px rgba(94,200,240,0.5); margin: 0; } .mw-title--xl { font-size: 26px; letter-spacing: var(--mw-track); } .mw-title--lg { font-size: 20px; } .mw-title--md { font-size: 15px; } .mw-header-bar { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 4px 0 12px; } .mw-header-bar .mw-rule { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--mw-cyan-dim)); } .mw-header-bar .mw-rule:last-child { background: linear-gradient(90deg, var(--mw-cyan-dim), transparent); } .mw-btn { position: relative; display: inline-flex; align-items:center; justify-content:center; gap:8px; font-family: var(--mw-font-cond); text-transform: uppercase; letter-spacing: var(--mw-track); font-size: 15px; font-weight: 600; color: var(--mw-cyan-bright); background: linear-gradient(180deg, rgba(28,108,163,0.35), rgba(10,32,55,0.6)); padding: 11px 30px; border: none; cursor: pointer; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); text-shadow: 0 0 8px rgba(94,200,240,0.5); transition: filter 0.15s ease, background 0.15s ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); } .mw-btn::before { content:""; position:absolute; inset:0; clip-path:inherit; padding:1.5px; background: linear-gradient(90deg, var(--mw-cyan-dim), var(--mw-cyan), var(--mw-cyan-dim)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; filter: drop-shadow(0 0 3px rgba(94,200,240,0.5)); } .mw-btn:hover { filter: brightness(1.3); background: linear-gradient(180deg, rgba(58,159,212,0.5), rgba(16,48,80,0.7)); } .mw-btn:active { filter: brightness(0.9); transform: scale(.97); } .mw-btn--wide { width: 100%; padding-left:0; padding-right:0; } .mw-btn--ghost { background: rgba(6,20,40,0.4); } .mw-tabbtn { font-family: var(--mw-font); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 600; color: var(--mw-text-dim); background: none; border:none; cursor:pointer; padding: 8px 20px; position: relative; transition: color 0.12s ease; } .mw-tabbtn:hover { color: var(--mw-cyan-bright); text-shadow: var(--mw-glow-cyan); } /* ═══════════════ 9 · COVERAGE-AUDIT CLOSURE (2026-07-31) ═══════════════ The exclusive-Mass-Weed rollout's adversarially-verified gap list: every surface below rendered with pre-HUD geometry (rounded literals), the retired plasma-green palette, or the base body font while everything around it was chamfered HUD chrome. Additive per-surface rules, same idioms as §6; hue-scheme safe (tokens only, no new hex literals). */ /* — Inbox rows: the design's row silhouette (.mw-tcard) is a chamfered card; .ntf kept app.css's soft 10px card look — */ :root[data-theme^="mass-weed"] .ntf{ border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)} /* — Assistant drawer: the mirror full-height glass panel; its chips, bubbles and composer input were the last rounded controls in the shell — */ :root[data-theme^="mass-weed"] .asst-status, :root[data-theme^="mass-weed"] .asst-act, :root[data-theme^="mass-weed"] .asst-bubble{ border-radius:0;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)} :root[data-theme^="mass-weed"] .asst-foot input{ border-radius:0;clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px)} :root[data-theme^="mass-weed"] .asst-title{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em} :root[data-theme^="mass-weed"] .assistant-drawer{position:relative} :root[data-theme^="mass-weed"] .assistant-drawer::before{ content:"";position:absolute;inset:0;background:var(--scanlines);pointer-events:none;opacity:.5} /* — Day-filter pills (default screen): interactive filter chips are chamfered in the design (.mw-chip); only STATUS pills stay rounded — */ :root[data-theme^="mass-weed"] .day-pill{ border-radius:0;clip-path:polygon(5px 0,100% 0,100% 100%,0 100%,0 5px); font-family:var(--font-display);letter-spacing:.06em} :root[data-theme^="mass-weed"] .day-pill .count{border-radius:0} /* — Week-strip headline: mirror §8d's .view-title treatment (display font, caps, leading accent bar); .badge-now sheds the 999px lozenge — */ :root[data-theme^="mass-weed"] .week-title{ font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em; display:inline-flex;align-items:center;gap:10px} :root[data-theme^="mass-weed"] .week-title::before{ content:"";width:4px;height:1em;background:var(--primary); box-shadow:0 0 10px rgba(var(--accent-rgb),.6);flex:none} :root[data-theme^="mass-weed"] .week-dates{font-family:var(--font-display);letter-spacing:.04em} :root[data-theme^="mass-weed"] .badge-now{ border-radius:0;clip-path:polygon(4px 0,100% 0,100% 100%,0 100%,0 4px); font-family:var(--font-display);letter-spacing:.06em} /* — Persistent rounded panels that escaped §6's sweep — */ :root[data-theme^="mass-weed"] .telemetry, :root[data-theme^="mass-weed"] .user-card, :root[data-theme^="mass-weed"] .exec-brief, :root[data-theme^="mass-weed"] .pipe-node{ border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)} :root[data-theme^="mass-weed"] .sess-row{ border-radius:0;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)} :root[data-theme^="mass-weed"] .add-row{ border-radius:0;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)} /* — The wordmark's second word: views.css/leaf-fx.css hardcode the retired plasma green→teal gradient with background-clip:text, which token re-derivation can never reach. Re-hue the gradient to the live accent; leaf-fx's background-size + gf-flow animation continue to apply. — */ :root[data-theme^="mass-weed"] .gf-name b{ background-image:linear-gradient(120deg,var(--primary),var(--primary-hover),var(--primary))} /* — .btn-orange: amber fill is token-driven but the label/icon were forced #fff (1.8:1 on HUD amber). Dark theme gets the same void-ink foreground .btn-primary uses; Cool Mist's darker amber keeps white. — */ :root[data-theme="mass-weed"] .btn-orange{color:var(--text-on-primary)} /* — Cool Mist: the sidebar wordmark image was force-inverted to white (invisible on the light rail) — */ :root[data-theme="mass-weed-light"] .pp-wordmark{filter:brightness(0) opacity(.72)}