/* ============================================================================ CVLY CONTROL PANEL SKIN — the single source of truth for how the Control Panel looks, on EVERY page and EVERY old snapshot (Lucas: "every single control panel is the same… a MUST, should never ever happen" that an old revision — or an old prototype — shows old panel UI). Split out of review.js on 2026-07-23 (Lucas) after Audibel shipped days of sessions on the OLD panel: the current look used to ride the comments plugin, so pages that never stamped review.js never got it. Now the skin is its own always-on stylesheet: Every prototype with a Control Panel bakes that line in — review-enabled or not (scripts/review-selftest.mjs enforces it at commit time). review.js ALSO injects this same file on any page that hasn't baked the link (old snapshots bake an old stamp but load the current plugin), so no vintage of #cvly-tool ever renders a stale panel. Panel look changes happen HERE first; the per-page baked panel CSS is only the no-css fallback. LAW (2026-07-21): the skin may RESTYLE, never RE-BEHAVE. Rules that assume plugin behavior (click-tips) are scoped under html.cvlyr-live, which only review.js's install() adds — on a page where the review layer is absent or stood down, the baked hover tooltips keep working untouched (killing hover without the click handler left Edie's tooltip dead on prod, 2026-07-21). ========================================================================== */ /* FONT LAW (Lucas, 2026-08-04): the panel is ALWAYS Geist, never the host page's font. The panel is injected into client prototypes that set their own brand font on `body`/`*`, and that was cascading in (GIWL's `body{font-family:var(--font)}` bled into the Control Panel). So the skin now self-hosts Geist (same files review.js uses for comments — /assets/ is ungated, always reachable) and forces it on #cvly-tool with !important, immune to any page rule. Comments (.cvlyr) already self-host their own "CVLYR Geist" the same way — the two never depend on each other. */ @font-face{font-family:'CVLYR Geist';src:url('/assets/fonts/Geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap} @font-face{font-family:'CVLYR Geist';src:url('/assets/fonts/Geist-latin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap} #cvly-tool,#cvly-tool *{font-family:'CVLYR Geist',system-ui,-apple-system,sans-serif !important} /* WEIGHT LAW (Nam, 2026-08-23): hub chrome carries no bold — nothing heavier than medium. Panels baked into prototypes declare their own 700 on these classes, so the shared skin caps them here; editing 35 prototype files to restyle a panel is exactly what the FONT LAW above forbids. Listed, not a blanket `*`, because a wildcard would push the panel's 400 body text UP. */ #cvly-tool .cvly-panel-title, #cvly-tool .cvly-label, #cvly-tool .cvly-pill, #cvly-tool .cvly-info, #cvly-tool [class^="cvly-lp-"], #cvly-tool [class*=" cvly-lp-"]{font-weight:500 !important} /* WIDTH LAW (Lucas, 2026-07-23): 292px is the MINIMUM, not the size. The panel grows to fit its widest pill row (capped at 360px / viewport) so a long label like "Lead capture" NEVER clips or bleeds past a pill or the panel edge. Pills get flex-basis:auto (baked vintages use flex:1 → basis 0 → the row "fits" by definition and wrap never triggers, so overflow was invisible to the layout); with basis:auto, fit-content sizes the panel to the real row, and past the cap the row genuinely wraps. */ #cvly-tool .cvly-panel{width:-moz-fit-content;width:fit-content;min-width:292px;max-width:min(360px,calc(100vw - 44px));background:#fdfbf7;border:none;border-radius:16px;box-shadow:0 18px 48px rgba(16,16,20,.28);overflow:visible} /* Open/close GROWS from the fab (admin direction, 2026-07-31): the panel expands diagonally up-right out of the button instead of popping — deeper start scale than the baked .7, origin pinned to the fab corner. Look-only: the runtime's .closing timing is untouched. */ #cvly-tool .cvly-panel{transform-origin:0 100%;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .16s cubic-bezier(.4,0,.2,1)} #cvly-tool .cvly-panel.closing{transform:scale(.12);opacity:0} #cvly-tool .cvly-panel-head{background:#292826;border-radius:16px 16px 0 0;cursor:grab} #cvly-tool .cvly-panel-title{font-size:0} /* TEAM mark (Lucas, 2026-08-12): review.js drops this beside the logo when the session's password is TEAM — so team members KNOW they're browsing as team. Plain small-caps text, no pill (the no-pill rule). */ #cvly-tool .cvly-team-mark{font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#f5c242;opacity:.9;line-height:1;pointer-events:none;user-select:none;-webkit-user-select:none} #cvly-tool .cvly-collapse:hover{color:#f5c242} /* Borderless, genex.design-style (admin, 2026-07-31 — the ring read old): flat warm-black circle at rest, full inversion to the gold button on hover (the C flips to ink). Same family as the review fabs, mirrored. */ #cvly-tool .cvly-fab{background:#292826;border:none;cursor:pointer;box-shadow:0 6px 18px rgba(16,16,20,.35);transition:background .2s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)} #cvly-tool .cvly-fab svg path{transition:fill .2s cubic-bezier(.4,0,.2,1)} #cvly-tool .cvly-fab:hover{background:#f5c242;transform:translateY(-2px) scale(1.06);box-shadow:0 10px 26px rgba(16,16,20,.45)} #cvly-tool .cvly-fab:hover svg path{fill:#292826} #cvly-tool .cvly-fab:active{cursor:grabbing;transform:scale(.97)} #cvly-tool .cvly-pills{flex-wrap:wrap} #cvly-tool .cvly-pill{flex:1 1 auto;white-space:nowrap;padding:8px 12px;transition:border-color .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1),background .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)} #cvly-tool .cvly-pill:hover{border-color:#292826;transform:translateY(-1px)} #cvly-tool .cvly-pill.active{background:#f5c242;border-color:#f5c242;color:#292826;font-weight:500} /* State link (admin, 2026-08-11) — the "Copy state link" button a panel runtime may append after its groups (?cvlyst= permutation URLs; first on fetch-pet/mypet-quote-c825). Additive: pages without the markup are unaffected, old snapshots included. */ #cvly-tool .cvly-statelink{padding:2px 14px 12px} #cvly-tool .cvly-statelink-btn{width:100%;padding:8px 12px;background:none;border:1px solid #e8e3d7;border-radius:8px;color:#57544f;font:inherit;font-size:12px;letter-spacing:.03em;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1)} #cvly-tool .cvly-statelink-btn:hover{border-color:#292826;color:#231903;transform:translateY(-1px)} #cvly-tool .cvly-info:hover{border-color:#f5c242;color:#292826} #cvly-tool .cvly-check input{accent-color:#292826} #cvly-tool .cvly-tip{bottom:calc(100% + 8px);top:auto;width:252px;background:#292826;color:#fdfbf7;font-size:11px;line-height:1.6;padding:10px 12px;border-radius:10px;box-shadow:0 12px 32px rgba(16,16,20,.4)} /* collapse = utility, not a peer of the comment icons: dimmed behind a hairline; the whole header is click-to-collapse (plugin binds it) */ #cvly-tool .cvly-collapse{opacity:.4;margin-left:2px;padding-left:10px;border-left:1px solid rgba(250,249,246,.18);transition:opacity .15s cubic-bezier(.4,0,.2,1)} #cvly-tool .cvly-collapse:hover{opacity:1} /* tips open on CLICK, not hover (Lucas: "so its not annoying all the time"). Scoped to html.cvlyr-live (added by install()) because the click handler is part of the gated layer: when the layer stands down (prod soft-off) the baked hover tooltip must keep working — killing hover without the click handler leaves the tip dead (happened on prod, 2026-07-21). */ html.cvlyr-live #cvly-tool .cvly-info{cursor:pointer} html.cvlyr-live #cvly-tool .cvly-info:hover + .cvly-tip,html.cvlyr-live #cvly-tool .cvly-info:focus + .cvly-tip{opacity:0;visibility:hidden} html.cvlyr-live #cvly-tool .cvly-tip.cvlyr-tip-open{opacity:1 !important;visibility:visible !important} /* STACKING (Lucas, 2026-08-12): the Control Panel always sits ABOVE the review layer's passive floats — pins, team-note cards, leaders, hover peeks (overlay layer 2147483200) — but BELOW active work surfaces: the comments sidebar (…300), compose/thread boxes and modals (…400), and the placement capture layer. A wall card must never cover the panel. */ #cvly-tool{z-index:2147483250 !important;}