/* ============================================================ JUWEL OS · council selector — juwel-os-council.css (v1, 2026-07-17) Additive stylesheet for the ONE-chat council: the facet picker chip (user picks a specialist), the routed-to indicator (JUWEL auto-routed a message), and the council drawer (specialist list with honesty status). Pure CSS, no JS. Wire-in of these classes to os.html / the chat surface is a separate worker's job — this file defines the visual contract only. WAVE7-COUNCIL (2026-07-20, docs/plans/program/ JUWEL_WAVE7_CALM_POP_DIRECTION_2026-07-20.md §2): the founder-flagged defect was a PERMANENT strip of one .council-facet chip per pack sitting above the composer on every turn. juwel-council-selector.js now renders exactly ONE .council-facet (a quiet launcher, opens the drawer) into .council-facets instead of one-per-pack — a pure JS change. No rule below moved or lost meaning: .council-facets is still "the strip above the composer," .council-facet is still "a seat chip" (there is simply, by design, only ever one visible at a time now), and every per-pack option still renders exactly as before inside the drawer (.council-row). .council-facets-label is no longer emitted by the JS (the one remaining chip states its own name) — the rule stays defined and harmless in case a future caller wants the label back; it is not banned, just currently unused. Token truth: juwel-ds.css (Humanist Meadow) + luxliq.css. This file REDEFINES nothing; it only consumes the ink/paper/surface/ line tokens, the gem accents (topaz, jade, sapphire, garnet, rose), the radius, duration, ease, shadow and glass token families, and flips with for free. Brand law kept: · ink = YOU act (user-picked facet = ink chip; focus = ink ring) · topaz = JUWEL acts / the record (auto-route gem, pulse, routed chip ring). On facet dots topaz-deep is a DOMAIN IDENTITY mark (finance), never an action signal. · NO purple (stays dead), NO emoji (gems are CSS dots/SVG slots), · NO bounce; motion = slow pours, long settles, var(--ease-out). · prefers-reduced-motion: pulse collapses to a static soft ring, drawer slide is removed, entrances become instant. · Honesty: specialist availability is only ever rendered through .council-status .is-built / .is-registry / .is-not-built. No style here implies LIVE/SOTA anything. Class contract (for UI/JS workers): rail .council-facets [.is-compact] · .council-facets-label chip .council-facet [.is-active|[aria-pressed]] [.is-routed] [disabled] · .council-facet-gem domains .is-general .is-science .is-engineering .is-legal .is-medical .is-finance .is-video (set --facet; unknown domains: set style="--facet:var(--jade)" inline) routed .council-route [.is-auto|.is-manual] [.is-pulsing] [.is-inline] · .council-route-gem · .council-route-label · .council-route-x drawer .council-scrim.is-open · .council-drawer.is-open · .council-drawer-hd / -title / -sub / -close · .council-drawer-bd / -ft · .council-note rows .council-list · .council-row [.is-active| [aria-selected]] [disabled] · .council-row-gem · .council-row-main · .council-row-name · .council-row-meta · .council-row-guard status .council-status .is-built | .is-registry | .is-not-built empty .council-empty ============================================================ */ /* ────────────────────────────────────────────────────────── 1 · FACET RAIL — the picker strip (above composer / chat head) ────────────────────────────────────────────────────────── */ .council-compose-control{display:flex;align-items:center;gap:6px;flex:0 0 auto;min-width:0;} .council-compose-control .council-route{max-width:180px;} .council-facets{ display:flex;align-items:center;gap:8px; overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none;-webkit-overflow-scrolling:touch; padding:2px;scroll-snap-type:x proximity; } .council-facets::-webkit-scrollbar{display:none;} .council-facets.is-compact{gap:6px;} .council-facets-label{ flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:500; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3); padding:0 2px;user-select:none;-webkit-user-select:none; } /* ── facet chip — default: quiet glass pill; 34px desktop target ── */ .council-facet{ --facet:var(--ink-3); position:relative;flex:0 0 auto;scroll-snap-align:start; display:inline-flex;align-items:center;gap:8px; min-height:34px;padding:6px 13px 6px 11px;margin:0; font-family:var(--ff);font-size:12.5px;font-weight:600;letter-spacing:-.01em; color:var(--ink-2);background:var(--surface); /* FACET geometry: --r-full is PILLS AND DOTS ONLY, and this is a control. */ border:1px solid var(--line);border-radius:var(--r-md); box-shadow:inset 0 1px 0 var(--edge); cursor:pointer;user-select:none;-webkit-user-select:none; transition:color .18s ease,background-color .18s ease,border-color .18s ease, box-shadow var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out); } .council-facets.is-compact .council-facet{min-height:30px;padding:4px 11px 4px 9px;font-size:11.5px;gap:6px;} @media (hover:hover) and (pointer:fine){ .council-facet:hover{background:var(--surface-2);color:var(--ink);} } .council-facet:active{transform:scale(.97);} /* gel compress, no bounce */ .council-facet[disabled]{opacity:.5;cursor:not-allowed;} /* NOT-BUILT: visible, not pickable */ /* domain gem dot — identity only, never an action signal */ .council-facet-gem{ flex:0 0 auto;width:8px;height:8px;border-radius:50%; background:var(--facet); transition:box-shadow var(--dur-2) var(--ease-out); } /* user-picked = YOU act → ink chip (paper text), gem keeps its hue */ .council-facet.is-active, .council-facet[aria-pressed="true"]{ background:var(--ink);color:var(--paper);border-color:transparent; } .council-facet.is-active .council-facet-gem, .council-facet[aria-pressed="true"] .council-facet-gem{ box-shadow:0 0 0 3px color-mix(in srgb,var(--facet) 30%,transparent); } /* JUWEL auto-routed this facet (not user-picked) → topaz record ring */ .council-facet.is-routed{ border-color:color-mix(in srgb,var(--topaz) 55%,transparent); box-shadow:inset 0 1px 0 var(--edge), 0 0 0 3px color-mix(in srgb,var(--topaz) 16%,transparent); } /* ── domain accents — gem tones only; purple stays dead ── */ :is(.council-facet,.council-row).is-general{--facet:var(--ink-3);} :is(.council-facet,.council-row).is-science{--facet:var(--sapphire);} :is(.council-facet,.council-row).is-engineering{--facet:var(--jade-deep);} :is(.council-facet,.council-row).is-legal{--facet:var(--garnet);} :is(.council-facet,.council-row).is-medical{--facet:var(--rose);} :is(.council-facet,.council-row).is-finance{--facet:var(--topaz-deep);} :is(.council-facet,.council-row).is-video{--facet:var(--sapphire-deep);} @media(max-width:900px){ .council-compose-control .council-facet{padding-inline:9px;} /* FACET rubric 9: display:none would strip the chip's only accessible name and leave an unnamed button on every phone. Visually hidden instead, so the name survives in the a11y tree for screen readers and for JUWEL. */ .council-compose-control .council-facet span:not(.council-facet-gem){ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;} .council-compose-control .council-route{max-width:120px;} } /* ────────────────────────────────────────────────────────── 2 · ROUTED-TO INDICATOR — “Routed to Legal” pill + pulse topaz gem = JUWEL routed it (.is-auto); ink gem = you picked it (.is-manual). .is-pulsing fires the routing pulse when a message is auto-routed; JS adds the class, CSS does the rest. ────────────────────────────────────────────────────────── */ .council-route{ display:inline-flex;align-items:center;gap:8px;max-width:100%; font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.03em; color:var(--ink-2);background:var(--surface); /* a chip, not a pill — and it carries a clear button, so it is not a dot. */ border:1px solid var(--line);border-radius:var(--r-xs); padding:5px 12px 5px 10px;box-shadow:inset 0 1px 0 var(--edge); } .council-route.is-inline{ /* inside a message bubble */ background:transparent;border-color:transparent;box-shadow:none; padding:2px 6px 2px 2px;color:var(--ink-3); } .council-route-gem{ position:relative;flex:0 0 auto;width:8px;height:8px;border-radius:50%; background:var(--topaz); /* JUWEL acted */ } .council-route.is-manual .council-route-gem{background:var(--ink);} /* you acted */ .council-route-gem::after{ /* pulse ring, at rest invisible */ content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none; border:2px solid color-mix(in srgb,var(--topaz) 55%,transparent);opacity:0; } .council-route.is-manual .council-route-gem::after{ border-color:color-mix(in srgb,var(--ink) 40%,transparent); } .council-route-label{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } .council-route-x{ /* clear routing → back to auto */ position:relative;display:inline-grid;place-items:center;flex:0 0 auto; width:20px;height:20px;margin-right:-6px;padding:0; border:0;border-radius:50%;background:transparent;color:var(--ink-3); cursor:pointer;font:inherit;line-height:0; transition:color .18s ease,background-color .18s ease; } .council-route-x::before{content:"";position:absolute;inset:-12px;} /* ≥44px hit area */ @media (hover:hover) and (pointer:fine){ .council-route-x:hover{color:var(--ink);background:var(--surface-2);} } /* the routing pulse — one soft ring expanding from the gem, twice, then it rests. Event-driven (only while .is-pulsing), never idle decoration. Entrance = a short settle, never a bounce. */ @media (prefers-reduced-motion:no-preference){ .council-route.is-pulsing{animation:council-route-settle .38s var(--ease-out) both;} .council-route.is-pulsing .council-route-gem::after{ animation:council-route-pulse 1.15s var(--ease-out) 2; } } @keyframes council-route-pulse{ 0%{transform:scale(.55);opacity:.85;} 70%{opacity:.28;} 100%{transform:scale(2.4);opacity:0;} } @keyframes council-route-settle{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} } /* ────────────────────────────────────────────────────────── 3 · COUNCIL DRAWER — right glass sheet over the OS. z: scrim 97 / drawer 98 → above windows(40), menubar(90), dock(95), chatbar(96); below boot(120), control-center(200), cmd(210), toast(230). ────────────────────────────────────────────────────────── */ .council-scrim{ position:fixed;inset:0;z-index:97; /* FACET tokens-only: no --scrim token exists in juwel-ds.css. --receipt-bg is the nearest one that is DARK in both themes (a scrim must darken, and --ink-1 flips to near-white in dark), so the veil reads correctly on both without a raw rgba. A real --scrim / --scrim-strong pair belongs in juwel-ds.css, which PE-W1-BRAND-TOKENS owns — reported, not invented here. */ background:color-mix(in srgb,var(--receipt-bg) 32%,transparent); opacity:0;visibility:hidden; transition:opacity var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2); } .council-scrim.is-open{opacity:1;visibility:visible;transition:opacity var(--dur-2) var(--ease-out);} .council-drawer{ position:fixed;top:0;right:0;z-index:98; height:100dvh;width:min(400px,100vw); display:flex;flex-direction:column; padding-top:env(safe-area-inset-top); padding-right:env(safe-area-inset-right); /* FACET material: a drawer is a PANE, not chrome glass. Chrome glass is menubar / dock / palette / control-centre only, and this sheet floats over an already-translucent menubar and dock — two stacked translucent layers. Near-opaque surface + hairline + the machined top light. */ background:var(--surface); border-left:1px solid var(--line); box-shadow:inset 0 1px 0 var(--edge),var(--shadow-3); transform:translateX(103%);visibility:hidden; transition:transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2); } .council-drawer.is-open{ transform:none;visibility:visible; transition:transform var(--dur-2) var(--ease-out); } .council-drawer-hd{ display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:18px 18px 14px;border-bottom:1px solid var(--line); } .council-drawer-title{ margin:0;font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--ink); } .council-drawer-sub{ margin:4px 0 0;font-family:var(--mono);font-size:10.5px;font-weight:500; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3); } .council-drawer-close{ display:inline-grid;place-items:center;flex:0 0 auto; width:44px;height:44px;margin:-8px -10px 0 0;padding:0; border:0;border-radius:var(--r-md);background:transparent;color:var(--ink-2); cursor:pointer; transition:color .18s ease,background-color .18s ease; } @media (hover:hover) and (pointer:fine){ .council-drawer-close:hover{color:var(--ink);background:var(--surface-2);} } .council-drawer-bd{ flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:12px 14px 18px; } .council-drawer-ft{ padding:12px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); } .council-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-3);} /* ── specialist rows ── */ .council-list{display:flex;flex-direction:column;gap:8px;} .council-row{ --facet:var(--ink-3); display:flex;align-items:center;gap:12px;width:100%;min-height:56px; padding:10px 12px;margin:0;text-align:left; font-family:var(--ff);color:var(--ink); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); box-shadow:inset 0 1px 0 var(--edge); cursor:pointer; transition:border-color .18s ease,background-color .18s ease, box-shadow var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out); } @media (hover:hover) and (pointer:fine){ .council-row:hover{background:var(--surface-2);} } .council-row:active{transform:scale(.985);} .council-row[disabled]{opacity:.55;cursor:not-allowed;} /* NOT-BUILT stays visible */ .council-row.is-active, .council-row[aria-selected="true"]{ border-color:color-mix(in srgb,var(--ink) 35%,transparent); box-shadow:inset 0 1px 0 var(--edge), 0 0 0 3px color-mix(in srgb,var(--ink) 8%,transparent); } .council-row-gem{ flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-sm); /* --accent-ink is the ON-AMBER-FILL near-black in BOTH themes; on a faint facet wash over a dark surface it goes invisible. --ink flips correctly. */ display:grid;place-items:center;color:var(--ink); background:color-mix(in srgb,var(--facet) 18%,var(--surface)); border:1px solid color-mix(in srgb,var(--facet) 38%,transparent); box-shadow:inset 0 1px 0 var(--edge); } .council-row-gem svg{width:16px;height:16px;} .council-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;} .council-row-name{ display:flex;align-items:center;gap:8px;min-width:0; font-size:13.5px;font-weight:650;letter-spacing:-.01em; } .council-row-meta{ font-size:12px;color:var(--ink-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .council-row-guard{font-size:11.5px;line-height:1.45;color:var(--ink-3);} /* ── honesty status chip — the ONLY availability vocabulary ── */ .council-status{ flex:0 0 auto;display:inline-flex;align-items:center;gap:5px; font-family:var(--mono);font-size:9.5px;font-weight:500; letter-spacing:.06em;text-transform:uppercase;white-space:nowrap; padding:3px 8px;border-radius:var(--r-full);border:1px solid transparent; } .council-status::before{ content:"";width:5px;height:5px;border-radius:50%;background:currentColor; } .council-status.is-built{color:var(--ok-ink);background:var(--jade-soft);} .council-status.is-registry{color:var(--topaz-ink);background:var(--topaz-soft);} .council-status.is-not-built{ color:var(--ink-3);background:var(--surface-2);border-color:var(--line); } /* empty / loading state */ .council-empty{ padding:28px 12px;text-align:center; font-size:12.5px;color:var(--ink-3); } /* ────────────────────────────────────────────────────────── 4 · DARK PARITY — tokens flip themselves; only the scrim depth and the routed ring need a whisper of help. Both now derive from tokens instead of raw rgba literals. ────────────────────────────────────────────────────────── */ :root[data-theme="dark"] .council-scrim{background:color-mix(in srgb,var(--receipt-bg) 58%,transparent);} :root[data-theme="dark"] .council-facet.is-routed{ box-shadow:inset 0 1px 0 var(--edge), 0 0 0 3px color-mix(in srgb,var(--topaz) 22%,transparent); } /* ────────────────────────────────────────────────────────── 5 · MOBILE-SAFE — 44px minimum touch targets on coarse pointers; drawer goes full-width on narrow phones. ────────────────────────────────────────────────────────── */ @media (hover:none),(pointer:coarse){ .council-facet{min-height:44px;padding:8px 16px 8px 13px;} .council-facets.is-compact .council-facet{min-height:44px;padding:6px 14px 6px 11px;} .council-row{min-height:64px;} .council-drawer-close{width:44px;height:44px;} /* .council-route-x hit area already ≥44px via ::before */ } @media (max-width:480px){ .council-drawer{width:100vw;border-left:0;} } /* ────────────────────────────────────────────────────────── 6 · REDUCED MOTION — the pulse becomes a static soft ring, the drawer appears instead of sliding, presses stay (opacity- free) but travel is removed. Honor the user's setting, always. ────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .council-facet,.council-row,.council-route,.council-route-x, .council-drawer-close,.council-scrim,.council-drawer{ transition:none; } .council-route.is-pulsing{animation:none;} .council-route.is-pulsing .council-route-gem::after{ animation:none;opacity:.4;transform:scale(1.6); /* static ring, same meaning */ } .council-facet:active,.council-row:active{transform:none;} .council-scrim,.council-drawer{transition:opacity .01s linear,visibility 0s linear .01s;} .council-scrim.is-open,.council-drawer.is-open{transition:opacity .01s linear;} .council-drawer{transform:none;} /* no travel, just appear */ }