/* ---- Halofy design tokens (honoring NEW Halofy Design System/tokens) ---- */ /* docs/design/console-design-language.md and /console/design-language are supplemental implementation references. NEW Halofy Design System remains the canonical source for mineral surfaces, evergreen ink, typography and brand assets. */ @font-face{ font-family:"Inter"; src:url("assets/fonts/InterVariable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } :root{ --evergreen:#123a2e; --evergreen-hover:#0e2f25; --olive:#7f9366; --sage:#c7d7b2; --neutral-soft:#eef0f2; --sage-soft:var(--neutral-soft); --rust:#e83c00; --gold:#f4d35e; --slate:#5b6b82; --ink:#0b0d0b; --canvas:#fff; --panel:#fff; --surface-soft:#fff; --mineral:#f3f6ee; --muted:#596455; --muted-2:#53604f; --line:#d9dfcf; --stone:#e6e6e1; --evergreen-rgb:18 58 46; --metal:radial-gradient(circle at 18% 12%,rgb(243 246 238/22%),transparent 22%), radial-gradient(circle at 82% 88%,rgb(199 215 178/18%),transparent 30%), linear-gradient(150deg,#0b0d0b 0%,#0e2f25 34%,#123a2e 56%,#1d4f3f 78%,#0e2f25 100%); --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-display:var(--font-sans); --font-body:var(--font-sans); --font-cta:var(--font-sans); --font-mono:var(--font-sans); --font-brand:var(--font-sans); --text-h1:34px; --text-h2:24px; --text-body-size:16px; --text-small:13px; --text-label:12px; --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --space-text:var(--s2); --space-group:var(--s4); --space-section:var(--s5); --panel-padding:var(--s5); --panel-radius:var(--r-lg); --subpanel-padding:var(--s4); --subpanel-radius:var(--r-md); --section-title-size:16px; --section-subtitle-size:13px; --sh-1:0 1px 0 rgba(15,24,16,.04); --sh-2:0 8px 22px -16px rgba(15,24,16,.18); --sh-3:0 18px 48px -24px rgba(15,24,16,.16); --sh-4:0 30px 70px -36px rgba(15,24,16,.22); --metal-shadow:0 18px 44px rgb(var(--evergreen-rgb)/24%), inset 0 1px 0 rgb(243 246 238/24%); --focus:0 0 0 3px rgb(var(--evergreen-rgb)/16%); --ease:cubic-bezier(.2,.7,.2,1); --ease-enter:cubic-bezier(.16,1,.3,1); /* One chevron for every dropdown on the platform. Dark surfaces swap the light variant onto --select-chevron instead of redefining the geometry. */ --chevron-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23123a2e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.6 4.6 3.4 3.4 3.4-3.4'/%3E%3C/svg%3E"); --chevron-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23f3f6ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.6 4.6 3.4 3.4 3.4-3.4'/%3E%3C/svg%3E"); --select-chevron:var(--chevron-ink); } /* ---- Halofy Design Language (docs/design/console-design-language.md) ----- The canonical palette, elevation and type scale for every NEW or REFACTORED surface. Deliberately a SEPARATE block from the legacy tokens above and deliberately ADDITIVE: nothing here overrides an existing token, so no shipped screen re-renders because this block exists. Where a legacy token already carries the right value the alias points straight at it. The rail nav is frozen, and S3 Scoped memory / S4 Policies / S5 Memory are already built to this language — do not restyle them. See the "Do not disturb" section of docs/design/console-design-language.md. Known divergences the legacy tokens have NOT been migrated to (changing them would repaint every screen and breaks console-design-system.test.ts — do not "fix" them casually): --ink #0b0d0b vs --dl-text #111827, --canvas #fff vs --dl-page #fafafa, --muted #596455 vs --dl-ink-2 #6b7280. */ :root{ /* Evergreen ramp — the only hue family. One family per chart, never a rainbow palette. The shell uses a neutral metallic black; evergreen remains the in-page action colour. */ --dl-rail:#050607; /* solid fallback + dark edge */ --dl-rail-metal: radial-gradient(circle,rgb(255 255 255/9%) 0 .65px,transparent .85px) 0 0/8px 8px, radial-gradient(circle at 18% -20%,rgb(255 255 255/13%),transparent 32%), linear-gradient(118deg,#030405 0%,#15181b 28%,#070809 52%,#1b1e21 74%,#050607 100%); --dl-primary:#0f3d2e; /* primary button, active ink */ --dl-primary-hover:#14503c; --dl-mid:#1a5a42; /* gradient partner for send FAB */ --dl-brand:#2e6b52; /* source chips, live dots, series */ --dl-soft:#5d9b7c; --dl-pale:#a9c18c; --dl-wash:#eaf1ec; /* selected pill / user bubble bg */ --dl-wash-line:#d5e3da; --dl-wash-hover:#dfeae3; --dl-row-selected:#f7faf8; /* Neutrals — a single 8-step gray, top to bottom. */ --dl-text:#111827; /* primary ink, tooltip/toast bg */ --dl-ink-1:#374151; /* secondary body, table cells */ --dl-ink-2:#6b7280; /* helper text, inactive tab */ --dl-ink-3:#9ca3af; /* meta, eyebrow, placeholder icon */ --dl-disabled:#d1d5db; --dl-border:var(--line); /* #d9dfcf — every card + control */ --dl-border-soft:#eef0f3; /* tier-2 elevated card border */ --dl-hairline:var(--mineral); /* #f3f6ee — row + section rules */ --dl-page:#fafafa; /* page bg, tier-3 inset fill */ /* Status — a fg/bg pair per state. Never a colored icon chip; icon chips stay neutral (--dl-hairline on --dl-ink-1). */ --dl-ok-fg:#067647; --dl-ok-bg:#ecfdf3; --dl-warn-fg:#b54708; --dl-warn-bg:#fffaeb; --dl-warn-line:#fedf89; --dl-bad-fg:#b42318; --dl-bad-bg:#fef3f2; --dl-bad-line:#fda29b; --dl-bad-hover-bg:#fee4e2; --dl-bad-solid-hover:#912018; --dl-neutral-fg:var(--dl-ink-1); --dl-neutral-bg:var(--dl-hairline); --dl-live:#12b76a; /* pulse dot only */ --dl-alert-icon:#f97066; /* error glyph ON the dark toast */ /* Radii — the geometry ladder. Controls 10, cards 14, modal 16, composer 18, everything round 999. */ --dl-r-xs:5px; --dl-r-sm:7px; --dl-r-md:8px; --dl-r-lg:10px; --dl-r-xl:12px; --dl-r-card:14px; --dl-r-modal:16px; --dl-r-composer:18px; --dl-r-pill:999px; /* Elevation — five tiers, and they do not mix. A card is tier 1 unless it lifts on hover, in which case it is tier 2 for its whole life. */ --dl-e1:0 1px 2px rgb(16 24 40/4%); --dl-e2:0 1px 2px rgb(16 24 40/5%),0 4px 12px rgb(16 24 40/5%); --dl-e2-hover:0 2px 4px rgb(16 24 40/6%),0 10px 24px rgb(16 24 40/10%); --dl-e-inset:0 1px 2px rgb(16 24 40/4%),0 3px 8px rgb(16 24 40/4%); --dl-e-popover:0 8px 24px rgb(16 24 40/12%); --dl-e-tooltip:0 4px 12px rgb(16 24 40/20%); --dl-e-toast:0 8px 24px rgb(16 24 40/25%); --dl-e-modal:0 24px 64px rgb(16 24 40/20%); --dl-e-send:0 4px 12px rgb(15 61 46/35%); --dl-e-composer:0 2px 4px rgb(16 24 40/5%),0 14px 40px rgb(18 58 46/10%); --dl-focus:0 0 0 3px rgb(15 61 46/12%); --dl-focus-bad:0 0 0 3px rgb(180 35 24/8%); /* Supplemental component type scale. Production inherits --font-sans from the canonical Halofy token block above. */ --dl-t-hero:26px; --dl-t-title:22px; --dl-t-card:15px; --dl-t-body:13px; --dl-t-control:12.5px; --dl-t-meta:11px; --dl-t-eyebrow:10px; --dl-w-display:650; --dl-w-strong:600; --dl-w-body:500; --dl-track-tight:-.02em; /* 22px and up */ --dl-track-snug:-.01em; /* 15px card titles */ --dl-track-eyebrow:.16em; /* mono eyebrow, uppercase */ /* Black shell palette: warm white primary ink, silver-muted secondary ink, and translucent white interaction states. */ --dl-rail-ink:#f5f7f5; --dl-rail-ink-70:rgb(245 247 245/76%); --dl-rail-ink-55:rgb(245 247 245/62%); --dl-rail-ink-45:rgb(245 247 245/48%); --dl-rail-fill:rgb(255 255 255/4%); --dl-rail-fill-active:rgb(255 255 255/12%); --dl-rail-line:rgb(255 255 255/14%); --dl-rail-icon-active:#dce9d4; --dl-shell-control:#d4d7d8; --dl-shell-control-hover:#c8ccce; --dl-shell-control-line:#b9bec0; } *{box-sizing:border-box} html{scrollbar-gutter:stable} body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-body); font-size:var(--text-body-size);line-height:1.55;-webkit-font-smoothing:antialiased} a{color:inherit} h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.02em;font-weight:500} .eyebrow{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.16em;text-transform:uppercase; color:var(--muted-2);font-weight:500} .num{font-variant-numeric:tabular-nums} /* ---- app shell: metallic black chrome + light-neutral stage ---- */ .app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh} .mobile-topbar,.mobile-nav-backdrop,.mobile-nav-close.halo-icon-control{display:none} .rail{background:var(--dl-rail-metal);background-color:var(--dl-rail);color:var(--dl-rail-ink);display:flex;flex-direction:column; position:sticky;top:0;height:100vh;padding:var(--s3) 10px;gap:var(--s1);z-index:30;overflow:hidden; border-right:1px solid var(--dl-rail-line); box-shadow:8px 0 28px -24px rgb(0 0 0/58%)} .brand{display:flex;align-items:center;gap:10px;padding:0 var(--s2) var(--s2);border-bottom:1px solid var(--dl-rail-line);margin-bottom:var(--s1)} /* The orb is the complete brand mark in the navigation shell. */ .brand .mark{width:24px;height:24px;flex:none;object-fit:contain} .brand b{font-family:var(--font-brand);font-weight:600;font-size:16px;line-height:16px;letter-spacing:-.01em} .brand small{display:block;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.16em; text-transform:uppercase;color:var(--dl-rail-ink-55);opacity:.85;margin-top:1px} /* The mark and the wordmark are one target back to Home. Reset to the brand's own type, not a control's: it must stay visually identical to the static lockup it replaced. Disabled while Home is out of reach (setup gate). */ .brand-home{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px; cursor:pointer;border-radius:var(--r-sm);transition:opacity .12s} .brand-home:hover{opacity:.82} .brand-home:focus-visible{box-shadow:var(--focus)} .brand-home:disabled{cursor:default;opacity:1} #rail-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:2px; scrollbar-width:thin;scrollbar-color:var(--olive) transparent} .navsection{display:grid;gap:4px;margin:0 0 6px} .navgroup{all:unset;box-sizing:border-box;width:100%;min-height:34px;padding:7px 10px; display:flex;align-items:center;justify-content:space-between;gap:var(--s2); border:1px solid var(--dl-rail-line);border-radius:var(--r-sm); background:var(--dl-rail-fill);color:var(--dl-rail-ink-55);cursor:pointer; font:600 var(--text-label)/16px var(--font-mono);letter-spacing:.14em;text-transform:uppercase; box-shadow:inset 0 1px 0 rgb(255 255 255/8%),0 1px 2px rgb(0 0 0/26%); transition:background .12s,border-color .12s,color .12s,box-shadow .12s} .navgroup:hover{border-color:rgb(255 255 255/24%);background:rgb(255 255 255/8%);color:var(--dl-rail-ink)} .navgroup:focus-visible{outline:none;box-shadow:0 0 0 3px rgb(220 233 212/28%)} .navgroup[aria-expanded="true"]{border-color:var(--dl-shell-control-line);background:var(--dl-shell-control);color:var(--ink); box-shadow:0 2px 6px rgb(0 0 0/32%)} .navgroup-heading{display:flex;align-items:center;gap:7px;min-width:0} .navgroup-symbol{display:grid;place-items:center;flex:none;color:var(--dl-rail-icon-active)} .navgroup-symbol svg{width:14px;height:14px} .navgroup-icon{width:16px;height:16px;flex:none;color:var(--dl-rail-ink-55)} .navgroup[aria-expanded="true"] .navgroup-symbol{color:var(--evergreen)} .navgroup[aria-expanded="true"] .navgroup-icon{color:var(--muted)} .navgroup-icon__vertical{opacity:1;transform-origin:center;transition:opacity .12s ease,transform .12s ease} .navgroup[aria-expanded="true"] .navgroup-icon__vertical{opacity:0;transform:scaleY(.2)} .nav{display:flex;flex-direction:column;gap:1px;padding:2px 0} .nav[hidden]{display:none} .nav button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:11px;padding:9px var(--s2);border-radius:var(--r-sm); cursor:pointer;color:var(--dl-rail-ink-70);font-size:14px;font-weight:500;line-height:20px; transition:background .12s,color .12s,box-shadow .12s} .nav button svg{width:17px;height:17px;flex:none;opacity:.85} .nav button:hover{background:rgb(255 255 255/8%);color:var(--dl-rail-ink)} .nav button[aria-busy="true"]{cursor:wait;opacity:.72} .nav button.on{background:var(--dl-shell-control);color:var(--ink);font-weight:500; box-shadow:0 2px 6px rgb(0 0 0/32%)} .nav button.on svg{opacity:1;color:var(--evergreen)} .nav button:focus-visible{box-shadow:var(--focus)} /* Setup status on the rail: match the adjacent nav label's type and line height instead of rendering a second, oversized pill in the row. The collapsed rail keeps its dedicated notification-dot treatment below. */ #rail-nav .setup-badge{flex:none;min-width:0;max-width:48px;margin-left:auto;padding:0;gap:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--gold);border:0;background:transparent; font:inherit;letter-spacing:inherit;text-transform:none;line-height:inherit} #rail-nav .setup-badge .dot{display:none} .rail-help{position:relative;min-height:136px;padding:12px;overflow:hidden;flex:none; border:1px solid rgb(243 246 238/16%);border-radius:var(--r-md);color:var(--mineral); background:linear-gradient(180deg,rgb(5 11 10/8%) 0%,rgb(5 11 10/72%) 49%,rgb(5 11 10/96%) 100%), url("assets/footer-planet.webp") center 34%/cover no-repeat; box-shadow:inset 0 1px 0 rgb(243 246 238/10%),0 16px 30px -24px rgb(0 0 0/86%)} .rail-help__copy,.rail-help__links{position:relative;z-index:1} .rail-help__copy h2{font-family:var(--font-cta);font-size:14px;font-weight:600;line-height:18px;letter-spacing:-.01em} .rail-help__copy p{margin:1px 0 8px;color:rgb(243 246 238/72%);font-size:11px;line-height:16px} .rail-help__links{display:grid;gap:5px} .rail-help__action{min-height:30px;padding:6px 8px;display:grid;grid-template-columns:14px minmax(0,1fr) 12px; align-items:center;gap:7px;border:1px solid rgb(243 246 238/14%);border-radius:var(--r-xs); background:rgb(5 11 10/72%);color:rgb(243 246 238/90%);font-size:11px;font-weight:600;line-height:16px; text-decoration:none;transition:background .12s,border-color .12s,color .12s} .rail-help__action>svg{width:14px;height:14px;color:var(--sage)} .rail-help__action>.rail-help__chevron{width:12px;height:12px;color:rgb(243 246 238/54%)} .rail-help__action:hover{border-color:rgb(199 215 178/38%);background:rgb(18 58 46/88%);color:var(--mineral)} .rail-help__action:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sage)} .railfoot{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--dl-rail-line); display:flex;align-items:center;gap:10px;min-width:0;flex:none} .railfoot .av{position:relative;width:30px;height:30px;overflow:hidden;border-radius:var(--r-pill);background:var(--sage);color:var(--evergreen); display:grid;place-items:center;font-weight:600;font-size:13px;flex:none} .railfoot .who{font-size:var(--text-small);line-height:1.4;min-width:0;flex:1} .railfoot .who span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .railfoot .who small{display:block;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.12em; text-transform:uppercase;color:var(--dl-rail-ink-55);opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .railfoot #logout{flex:none;display:inline-flex;align-items:center;gap:6px;color:var(--dl-rail-ink); background:var(--dl-rail-fill);border:1px solid var(--dl-rail-line)} .railfoot #logout svg{width:14px;height:14px;flex:none} .railfoot #logout:hover{background:rgb(255 255 255/9%);color:var(--dl-rail-ink)} .railfoot #logout:focus-visible{box-shadow:var(--focus)} /* ---- rail collapse: desktop-only icon rail with hover tooltips ---- */ .rail-collapse{all:unset;margin-left:auto;width:26px;height:26px;border-radius:var(--r-xs); display:grid;place-items:center;cursor:pointer;color:var(--dl-rail-ink-70); border:1px solid var(--dl-rail-line);background:var(--dl-rail-fill); transition:background .12s,color .12s} .rail-collapse:hover{background:rgb(255 255 255/10%);color:var(--dl-rail-ink)} .rail-collapse:focus-visible{box-shadow:var(--focus)} .rail-collapse svg{width:14px;height:14px;transition:transform .18s ease} @media(min-width:861px){ .app{transition:grid-template-columns .18s ease} #rail-nav{overflow-y:hidden;padding-right:0} .navsection{gap:2px;margin-bottom:5px} .navgroup{min-height:30px;padding:5px var(--s2);font-size:11px;line-height:15px} .nav{gap:0} .nav button{min-height:29px;gap:9px;padding:5px var(--s2);font-size:13px;line-height:18px} .nav button svg{width:15px;height:15px} .railfoot{display:none} body.rail-collapsed .app{grid-template-columns:68px minmax(0,1fr)} body.rail-collapsed .rail{padding-inline:10px} body.rail-collapsed .brand{flex-direction:column;gap:10px;padding-inline:0} body.rail-collapsed .brand b{display:none} body.rail-collapsed .rail-collapse{margin-left:0} body.rail-collapsed .rail-collapse svg{transform:rotate(180deg)} body.rail-collapsed .navsection{gap:3px;margin-bottom:7px} body.rail-collapsed .navgroup{width:38px;min-height:34px;padding:0;margin:0 auto;justify-content:center} body.rail-collapsed .navgroup-label{display:none} body.rail-collapsed .navgroup-icon{display:none} body.rail-collapsed .nav{padding:2px 0} body.rail-collapsed .nav button{position:relative;justify-content:center;padding:10px 0} body.rail-collapsed .nav button .lbl{display:none} body.rail-collapsed .rail-help{width:44px;min-height:auto;align-self:center;padding:4px;background:rgb(5 11 10/42%)} body.rail-collapsed .rail-help__copy{display:none} body.rail-collapsed .rail-help__links{gap:4px} body.rail-collapsed .rail-help__action{width:34px;min-height:34px;padding:0;display:flex;justify-content:center} body.rail-collapsed .rail-help__action>span:not(.sr-only), body.rail-collapsed .rail-help__action>.rail-help__chevron{display:none} /* Id-qualified so this dot form outranks the expanded-rail badge rule. */ body.rail-collapsed #rail-nav .setup-badge{position:absolute;top:4px;right:4px;width:9px;height:9px; min-width:9px;max-width:9px;margin:0;padding:0;gap:0;overflow:hidden;box-sizing:border-box; border:2px solid var(--dl-rail);background:var(--gold);color:transparent;font-size:0; pointer-events:none} body.rail-collapsed #rail-nav .setup-badge .dot{display:none} body.rail-collapsed .railfoot{flex-direction:column;gap:8px} body.rail-collapsed .railfoot .who{display:none} body.rail-collapsed .railfoot #logout{width:30px;height:30px;padding:0;justify-content:center; border-radius:var(--r-xs)} body.rail-collapsed .railfoot #logout span{display:none} } /* Fixed so collapsed-rail labels clear both the sticky rail and its independently scrollable navigation viewport. JS anchors and clamps the tooltip to the active icon without allowing it to cover interactions. */ .rail-tooltip{position:fixed;z-index:90;max-width:calc(100vw - 16px);padding:7px 10px; border-radius:var(--r-xs);background:var(--ink);box-shadow:var(--sh-3);color:var(--mineral); font:500 12px/1 var(--font-display);letter-spacing:0;text-transform:none;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;visibility:hidden; transform:translateX(-4px);transition:opacity .12s ease,transform .12s ease,visibility .12s ease} .rail-tooltip[data-open="true"]{opacity:1;visibility:visible;transform:translateX(0)} @media(max-height:820px) and (min-width:861px){ #rail-nav{overflow-y:auto;padding-right:2px} .navsection{gap:2px;margin-bottom:4px} .navgroup{min-height:27px;padding:3px var(--s2);font-size:10px;line-height:13px} .nav button{min-height:25px;gap:9px;padding:4px var(--s2);font-size:13px;line-height:17px} .nav button svg{width:15px;height:15px} } @media(max-width:860px){.rail-collapse.halo-icon-control{display:none}} .stage{min-width:0;width:100%;padding:0 var(--s7) var(--s6);max-width:none;margin:0;background:var(--dl-page)} #screen-content{width:100%;max-width:1184px;margin-inline:auto} /* One step above the in-content popover tier (z-index:20 - space picker, home query filter, skill filter, metric tooltips). They are absolutely positioned inside #screen-content, which comes AFTER this bar in the DOM, so at an equal z-index the popover won the tie and painted over the sticky header as soon as the page scrolled. Stays below the rail (30), the S5 preview banner (30), and the mobile drawer (40). */ .workspace-bar{position:sticky;top:0;z-index:21;min-height:56px;margin:0 calc(0px - var(--s7)) var(--s5); padding:0 var(--s7);display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,360px) minmax(0,1fr); align-items:center;gap:var(--s4);background:var(--dl-rail-metal);background-color:var(--dl-rail); border-bottom:1px solid rgb(255 255 255/16%);box-shadow:0 6px 18px -18px rgb(0 0 0/78%)} .workspace-context{grid-column:1;display:flex;align-items:center;gap:var(--s2);min-width:0;color:var(--dl-rail-ink);font-size:var(--text-small);font-weight:500} .workspace-context>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The mark matches the organization name's line box: one line, one height. */ .workspace-org-mark{position:relative;flex:none;display:grid;place-items:center;width:20px;height:20px;overflow:hidden; border:1px solid rgb(255 255 255/18%);border-radius:var(--r-xs);background:rgb(255 255 255/9%); font:600 9px/1 var(--font-display);letter-spacing:.02em;color:var(--dl-rail-ink)} .workspace-org-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:inherit} .workspace-org-mark img[hidden]{display:none} .workspace-search{all:unset;grid-column:2;box-sizing:border-box;width:50%;min-width:180px;min-height:34px;padding:6px 10px;justify-self:center; display:flex;align-items:center;gap:var(--s2);color:var(--ink);background:#fff;border:1px solid var(--dl-shell-control-line); border-radius:var(--r-sm);font-size:var(--text-small);cursor:pointer;transition:border-color .12s,background .12s} .workspace-search[hidden]{display:none} .workspace-search:hover{background:var(--mineral);border-color:var(--dl-shell-control-line);color:var(--ink)} .workspace-search:focus-visible{box-shadow:var(--focus);border-color:var(--evergreen)} .workspace-search svg{width:15px;height:15px;flex:none} .workspace-search span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .workspace-search kbd{margin-left:auto;padding:1px 6px;border:1px solid var(--line);border-radius:var(--r-xs); background:var(--neutral-soft);font:500 11px var(--font-mono);color:var(--muted);box-shadow:none} .workspace-account{grid-column:3;position:relative;margin-left:auto;justify-self:end;min-width:0;display:flex;align-items:center;gap:var(--s3)} .workspace-notification-trigger{all:unset;box-sizing:border-box;position:relative;width:32px;height:32px;border-radius:var(--r-xs); display:grid;place-items:center;color:var(--dl-rail-ink);cursor:pointer} .workspace-notification-trigger[hidden]{display:none} .workspace-notification-trigger:hover{background:rgb(255 255 255/9%);color:var(--dl-rail-ink)} .workspace-notification-trigger:focus-visible{box-shadow:var(--focus)} .workspace-notification-trigger svg{width:18px;height:18px} .workspace-notification-count{position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;padding:0 4px;border:2px solid var(--dl-rail); border-radius:var(--r-pill);display:grid;place-items:center;background:var(--rust);color:white;font:700 9px/1 var(--font-mono)} .workspace-notification-count[hidden]{display:none} .workspace-account-trigger{all:unset;box-sizing:border-box;width:180px;min-width:0;max-width:180px;height:36px;padding:3px 10px 3px 4px; border:1px solid var(--dl-shell-control-line);border-radius:var(--r-sm);display:flex;align-items:center;gap:8px;background:var(--dl-shell-control); box-shadow:0 2px 6px rgb(0 0 0/32%);cursor:pointer} .workspace-account-trigger:hover{border-color:var(--dl-shell-control-line);background:var(--dl-shell-control-hover)} .workspace-account-trigger:focus-visible{box-shadow:var(--focus)} .workspace-account-trigger .av{position:relative;width:30px;height:30px;overflow:hidden;border-radius:var(--r-pill);display:grid;place-items:center; background:var(--evergreen);color:var(--mineral);font-size:12px;font-weight:600;flex:none} .workspace-account-copy{display:grid;min-width:0;flex:1;text-align:left;line-height:1.15} .workspace-account-copy>span,.workspace-account-copy>small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .workspace-account-copy>span{color:var(--ink);font-size:11.5px;font-weight:600} .workspace-account-copy>small{margin-top:2px;color:var(--muted);font-size:9px;font-weight:500;text-transform:capitalize} .identity-av-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit} .identity-av-image[hidden]{display:none} .workspace-account-menu{position:absolute;right:0;top:calc(100% + var(--s2));z-index:40;width:220px;padding:var(--s2); border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--sh-3)} .workspace-account-menu[hidden]{display:none} .workspace-account-summary{min-width:0;padding:var(--s2) var(--s2) var(--s3);border-bottom:1px solid var(--line); margin-bottom:var(--s2);font-size:var(--text-small);line-height:1.3} .workspace-account-summary span,.workspace-account-summary small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .workspace-account-summary small{margin-top:2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted-2)} .workspace-account-action{all:unset;box-sizing:border-box;width:100%;min-height:38px;padding:8px var(--s2); display:flex;align-items:center;gap:var(--s2);border-radius:var(--r-sm);color:var(--ink); font-size:var(--text-small);cursor:pointer} .workspace-account-action:hover{background:var(--sage-soft);color:var(--evergreen)} .workspace-account-action:focus-visible{box-shadow:inset var(--focus)} .workspace-account-action svg{width:16px;height:16px;flex:none;color:var(--muted-2)} /* The drawer is Home's Overview card at drawer scale. Everything visual comes from Home's own primitives (.home-overview scope, .home-panel, .home-overview-list/-row/-row-icon); the rules below add only what Home has no equivalent of — a button reset, because these rows navigate, and tighter padding for a 380px panel. No new colours, no new type scale. */ .source-wizard-dialog.notification-center__dialog{width:min(380px,100vw)} .notification-center__dialog .console-right-panel__body{padding:var(--s3);background:var(--canvas)} /* White surface, light-grey rows, set by remapping Home's two surface variables rather than overriding element by element — --dl-page is the design language's tier-3 inset fill, i.e. a box inside a white card. Both classes are required: .home-overview sets these same variables on this element and is declared later, so one class loses on source order. */ .home-overview.notification-center__scope{--home-panel:var(--canvas);--home-canvas:var(--dl-page)} .notification-center__scope{display:grid;gap:var(--s3)} .notification-center__scope .home-panel{padding:14px} .notification-center__scope .home-panel>.home-panel-head:first-child{padding:0 4px 10px} .notification-center__scope .home-overview-row{width:100%;font-family:inherit;text-align:left; cursor:pointer;box-shadow:none} .notification-center__scope .home-overview-row:hover{background:color-mix(in srgb,var(--ink) 4%,var(--dl-page))} .notification-center__scope .home-overview-row:focus-visible{outline:none;box-shadow:var(--focus)} /* The chip sits on a grey row, so it inverts to white and keeps the hairline edge rather than carrying Home's sage wash into a neutral surface. */ .notification-center__scope .home-overview-row-icon{background:var(--canvas);border:1px solid var(--line);color:var(--muted)} .alert-provider-logo{width:18px;height:18px;object-fit:contain} .notification-center__scope .home-card-empty{min-height:88px;margin:0;font-size:var(--text-small)} /* Quiet by default: clearing is a convenience next to a count, not an action that should compete with the rows it would remove. */ .notification-center__clear{all:unset;box-sizing:border-box;cursor:pointer;padding:2px 6px;border-radius:var(--r-xs); color:var(--home-faint);font-family:inherit;font-size:12px;font-weight:500;line-height:1.4;white-space:nowrap} .notification-center__clear:hover{background:var(--sage-soft);color:var(--evergreen)} .notification-center__clear:focus-visible{box-shadow:var(--focus)} .notification-center__copy{display:grid;gap:1px;min-width:0} .notification-center__copy>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .notification-center__copy strong{font-size:13px;font-weight:600;line-height:1.35} .notification-center__loading,.notification-center__empty,.notification-center__unavailable{padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);color:var(--muted);font-size:var(--text-small)} .notification-center__empty{text-align:center} .notification-center__empty p{margin:var(--s2) 0 0} .notification-center__unavailable{margin-bottom:var(--s3);border-color:color-mix(in srgb,var(--gold) 34%,var(--line));background:color-mix(in srgb,var(--gold) 8%,var(--panel));color:var(--ink)} .breadcrumbs{width:100%;max-width:1184px;min-height:28px;display:flex;align-items:center; margin:0 auto var(--s2);padding:0;background:transparent;border:0} .breadcrumbs:empty{display:none} .breadcrumbs ol{list-style:none;display:flex;align-items:center;gap:var(--s2);min-width:0;margin:0;padding:0; overflow-x:auto;white-space:nowrap;scrollbar-width:none} .breadcrumbs ol::-webkit-scrollbar{display:none} .breadcrumbs li{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;color:var(--muted-2);font-size:12px} .breadcrumbs button{all:unset;cursor:pointer;border-radius:var(--r-xs);padding:3px 2px;color:var(--muted-2)} .breadcrumbs button:hover{color:var(--evergreen);background:var(--sage-soft)} .breadcrumbs button:focus-visible{box-shadow:var(--focus);color:var(--evergreen)} .breadcrumb-separator{color:var(--muted-2);font-family:var(--font-mono)} .breadcrumb-current{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:34ch} .breadcrumb-home{display:inline-flex;align-items:center;gap:6px} .breadcrumb-home svg{width:14px;height:14px;flex:none} @media(max-width:860px){ .app{display:block} .mobile-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3); min-height:calc(var(--s7) + var(--s3)); position:sticky;top:0;z-index:20;padding:var(--s3) var(--s5);background:rgb(255 255 255/94%); border-bottom:1px solid var(--line);backdrop-filter:blur(12px)} .mobile-brand{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-brand);font-weight:600} .mobile-brand img{width:24px;height:24px;object-fit:contain} .mobile-brand .brand-home{gap:var(--s2)} .mobile-nav-toggle{font:inherit;font-size:var(--text-small);font-weight:600;color:var(--mineral);background:var(--evergreen);min-height:44px; border:0;border-radius:var(--r-pill);padding:8px 12px;display:inline-flex;align-items:center;gap:7px;cursor:pointer} .mobile-nav-toggle svg{width:17px;height:17px} .mobile-nav-toggle:focus-visible,.mobile-nav-close:focus-visible{box-shadow:0 0 0 3px var(--sage)} .rail{position:fixed;inset:0 auto 0 0;z-index:40;width:min(84vw,320px);height:100dvh; transform:translateX(-120%);visibility:hidden;pointer-events:none;transition:transform .2s ease,visibility .2s; box-shadow:none} body.nav-open{overflow:hidden} body.nav-open .rail{transform:translateX(0);visibility:visible;pointer-events:auto;box-shadow:var(--sh-3)} .mobile-nav-close{margin-left:auto;width:44px;height:44px;border:1px solid var(--line); border-radius:var(--r-xs);color:var(--evergreen);background:var(--panel);cursor:pointer; place-items:center;flex:none} body.nav-open .mobile-nav-close{display:grid} .mobile-nav-close svg{width:16px;height:16px} .mobile-nav-backdrop{position:fixed;inset:0;z-index:30;border:0;background:rgb(11 13 11/56%); opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s;cursor:pointer} body.nav-open .mobile-nav-backdrop{display:block;opacity:1;visibility:visible;pointer-events:auto} .stage{padding:var(--s5)} .workspace-bar{display:none} .breadcrumbs{margin:0 auto var(--s2);padding:0} .breadcrumb-current{max-width:22ch} } .screen{display:none;animation:fade .2s ease} .screen.on{display:block} .screen-flow{display:grid;gap:var(--space-section)} .screen-flow>*{min-width:0;margin-block:0!important} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.screen{animation:none}.rail,.mobile-nav-backdrop,.app,.rail-collapse svg{transition:none}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* Route pending state: skeleton screen in the shape of a typical console page. */ .page-loader{display:block} .page-skeleton{display:grid;gap:var(--s5);align-content:start} .page-skeleton__head{display:grid;gap:var(--s2);justify-items:start; padding-bottom:var(--s3);border-bottom:1px solid var(--line)} .page-skeleton__stats{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .page-skeleton__stat{display:grid;gap:var(--s2);align-content:start;min-height:86px; background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4) var(--s5)} .page-skeleton__card{display:grid;gap:var(--s3);align-content:start; background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)} .skel{display:block;position:relative;overflow:hidden;background:var(--stone);border-radius:var(--r-xs)} .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgb(255 255 255/65%),transparent); animation:skel-shimmer 1.6s ease-in-out infinite} .skel--eyebrow{width:96px;height:11px} .skel--title{width:min(340px,60%);height:30px;border-radius:var(--r-sm)} .skel--sub{width:min(480px,80%);height:13px} .skel--stat-k{width:72px;height:10px} .skel--stat-v{width:96px;height:26px;border-radius:var(--r-sm)} .skel--card-title{width:40%;height:14px} .skel--line{width:100%;height:12px} .skel--line--80{width:80%} .skel--line--60{width:60%} @keyframes skel-shimmer{to{transform:translateX(100%)}} @media(prefers-reduced-motion:reduce){ .skel::after{animation:none!important} } /* ---- Context Fabric: the sign-in / boot animation (console/fabric.js) ---- A woven thread field pinched through one node - the same specimen the marketing site draws for Context Fabric. Threads breathe on a staggered delay so the sheet ripples instead of sliding; light packets travel the same paths but are only visible near the waist (the spark gradient is transparent at both edges), so the motion reads as sources converging on one identity. Geometry lives in fabric.js; every animation lives here. */ .fabric{display:grid;justify-items:center;gap:var(--s4)} .fabric--page{align-content:center;min-height:min(58vh,460px);padding:var(--s6) 0} .fabric-art{width:100%;max-width:340px} .fabric-art svg{display:block;width:100%;height:auto} .fabric-weave{filter:drop-shadow(0 0 8px rgb(255 255 255/56%)) drop-shadow(0 14px 28px rgb(var(--evergreen-rgb)/12%))} .fabric-thread{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke; animation:fabric-breathe 7s var(--ease) infinite; animation-delay:calc(var(--i) * -180ms)} .fabric-spark{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke; stroke-dasharray:.09 .91;animation:fabric-travel 3.6s linear infinite; animation-delay:calc(var(--i) * -103ms)} .fabric-spark--rev{animation-direction:reverse} .fabric-halo{animation:fabric-glow 4.6s var(--ease) infinite} .fabric-ring{fill:none;stroke:rgb(var(--evergreen-rgb)/30%);stroke-width:1; vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center; animation:fabric-ring 3s var(--ease) infinite} .fabric-core{transform-box:fill-box;transform-origin:center; filter:drop-shadow(0 0 12px rgb(255 255 255/80%)) drop-shadow(0 0 26px rgb(199 215 178/60%)); animation:fabric-pulse 3s var(--ease) infinite} .fabric-status{margin:0;font-family:var(--font-mono);font-size:var(--text-label); letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} @keyframes fabric-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}} @keyframes fabric-travel{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes fabric-glow{0%,100%{opacity:.55}50%{opacity:1}} @keyframes fabric-ring{0%{transform:scale(.72);opacity:.6}72%,100%{transform:scale(1.7);opacity:0}} @keyframes fabric-pulse{0%,100%{transform:scale(.94);opacity:.92}50%{transform:scale(1.07);opacity:1}} /* The app-wide reduced-motion rule collapses animations to their end frame, which for a travelling dash is a half-drawn thread. Drop the moving layers outright and keep the static weave. */ @media(prefers-reduced-motion:reduce){ .fabric-flow,.fabric-ring{display:none} } .head{display:flex;min-height:72px;justify-content:space-between;align-items:flex-start;gap:var(--s3); padding:0 0 var(--s4);margin:0!important} .head .eyebrow{display:none} .head h1{font-size:var(--text-h1);line-height:1.08;font-weight:500;letter-spacing:-.025em} .head p{margin:var(--space-text) 0 0;color:var(--muted);font-size:var(--text-body-size);max-width:60ch} .head .acts{display:flex;align-items:center;gap:var(--s2);flex:none;flex-wrap:wrap;justify-content:flex-end} /* ---- primitives ---- */ .btn{all:unset;box-sizing:border-box;font-family:var(--font-cta);font-weight:500;font-size:14px;cursor:pointer; min-height:40px;padding:8px 15px;border:1px solid transparent;border-radius:var(--r-pill);display:inline-flex; align-items:center;justify-content:center;gap:7px;transition:transform .06s,background .12s,border-color .12s, box-shadow .12s;white-space:nowrap;letter-spacing:.005em;word-spacing:.04em} .btn:active{transform:translateY(1px)} .btn:focus-visible{box-shadow:var(--focus)} .btn:disabled{opacity:.72;cursor:not-allowed;border-color:var(--line);background:var(--stone);color:var(--muted)} .btn svg{width:15px;height:15px} .btn--solid{background:var(--evergreen);color:var(--mineral)} .btn--solid:hover{background:var(--evergreen-hover)} .btn--primary{background:var(--evergreen);color:var(--mineral);box-shadow:var(--sh-1),var(--sh-2)} .btn--primary:hover{background:var(--evergreen-hover)} .btn--outline{border-color:rgb(var(--evergreen-rgb)/28%);color:var(--evergreen);background:transparent} .btn--outline:hover{background:var(--sage-soft)} .btn--ghost{color:var(--evergreen)} .btn--ghost:hover{background:var(--sage-soft)} .btn--sage{background:var(--sage);color:var(--evergreen)} .btn--sm{min-height:36px;padding:6px 11px;font-size:var(--text-small)} .btn--danger{color:var(--rust);border:1px solid rgb(232 60 0/28%);background:var(--panel)} .btn--danger:hover{background:rgb(232 60 0/6%)} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--panel-radius); padding:var(--panel-padding);box-shadow:var(--sh-1),var(--sh-2)} .card > h3{font-size:var(--section-title-size);line-height:1.25;margin-bottom:var(--space-text)} .card .sub{color:var(--muted);font-size:var(--section-subtitle-size);line-height:1.5;margin-bottom:var(--space-group)} .grid{display:grid;gap:var(--s4)} .g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} @media(max-width:1180px){.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:960px){.g3,.g2{grid-template-columns:1fr}} .stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4) var(--s5)} .stat-label{display:flex;align-items:center;gap:6px;min-width:0} .stat .k{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)} .stat .v{font-size:34px;font-weight:600;letter-spacing:-.03em;margin-top:6px;display:flex;align-items:baseline;gap:9px} .stat--secondary .v{font-size:28px} .stat .v .d{font-size:var(--text-label);font-weight:500;font-family:var(--font-mono)} .up{color:var(--olive)} .down{color:var(--rust)} .good{color:#3f7d54} /* Shared summary metric used by Home and Usage. Keep this contract beside the base stat primitive so the renderer's metric-card DOM cannot fall back to unbounded inline-SVG sizing. */ .metric-card{--metric-tone:var(--evergreen);min-width:0;display:flex;flex-direction:column;gap:var(--s3)} .metric-card-head{min-height:38px;display:flex;align-items:center;justify-content:flex-start;gap:var(--s3)} .metric-card-label{min-width:0;display:block;flex:1} .metric-card-icon{width:38px;height:38px;display:grid;place-items:center;flex:none; border:1px solid color-mix(in srgb,var(--metric-tone) 18%,var(--line));border-radius:var(--r-sm); background:color-mix(in srgb,var(--metric-tone) 10%,var(--panel));color:var(--metric-tone)} .metric-card-icon svg{width:18px;height:18px} .metric-card-shell{min-height:72px;padding:var(--s3) var(--s4);display:flex;flex:1;flex-direction:column; justify-content:space-between;gap:var(--s2);border:1px solid var(--line);border-radius:var(--r-md); background:var(--surface-soft);box-shadow:var(--sh-1)} .metric-card-shell .v{margin:0} .metric-card-cap{--cap-tone:var(--muted);min-width:0;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden; overflow-wrap:anywhere;color:var(--cap-tone);font-size:var(--text-small);line-height:1.4} .metric-card-cap--warn{--cap-tone:#8a6d1f} .metric-card--spend{--metric-tone:var(--olive)} .metric-card--people,.metric-card--query{--metric-tone:var(--evergreen)} .metric-card--memory{--metric-tone:var(--slate)} .metric-card--source{--metric-tone:#5d7750} .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--text-label); letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill); border:1px solid var(--line);color:var(--muted);background:var(--panel);font-weight:500} .setup-badge{min-width:0;max-width:116px;margin-left:auto;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;flex:none} .pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor} .pill--ok{color:#3f7d54;border-color:rgb(63 125 84/28%);background:rgb(199 215 178/22%)} .pill--live{color:#2f7d54;border-color:rgb(63 125 84/30%)} .pill--live .dot{background:#3f7d54;animation:blink 2s infinite} .pill--warn{color:#8a6d1f;border-color:rgb(244 211 94/45%);background:rgb(244 211 94/14%)} .pill--crit{color:var(--rust);border-color:rgb(232 60 0/32%);background:rgb(232 60 0/7%)} @keyframes blink{50%{opacity:.35}} @media(prefers-reduced-motion:reduce){.pill--live .dot{animation:none}} .tag{font-family:var(--font-mono);font-size:var(--text-label);color:var(--muted);background:var(--mineral); border:1px solid var(--line);border-radius:var(--r-xs);padding:2px 7px} .badge{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.08em;text-transform:uppercase; padding:2px 8px;border-radius:var(--r-xs);font-weight:600} .badge--role{background:var(--evergreen);color:var(--mineral)} table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.13em;text-transform:uppercase; color:var(--muted-2);font-weight:500;padding:0 var(--s3) var(--s2);border-bottom:1px solid var(--line)} td{padding:12px var(--s3);border-bottom:1px solid var(--line);vertical-align:middle} tr:last-child td{border-bottom:none} .tblwrap{overflow-x:auto;border-radius:var(--r-lg)} .person-avatar{position:relative;display:inline-grid;place-items:center;width:30px;height:30px; overflow:hidden;vertical-align:middle;border:1px solid rgb(var(--evergreen-rgb)/18%); border-radius:50%;background:var(--sage-soft);color:var(--evergreen); box-shadow:0 0 0 2px var(--panel);font:600 10px/1 var(--font-mono);letter-spacing:.03em} .person-avatar__fallback{position:absolute;inset:0;display:grid;place-items:center} .person-avatar__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--sage-soft)} .person-avatar__image[hidden]{display:none} .person-avatar-cell{width:1%;min-width:52px;white-space:nowrap;vertical-align:middle} .person-avatar-date{display:inline-block;margin-left:9px;vertical-align:middle} .conflict-scan-section{display:grid;gap:var(--space-group);align-content:start} /* Conflict evidence is read by non-technical reviewers: prose, not a terminal. */ .conflict-diff th[scope=row]{text-align:left;color:var(--muted-2);font-weight:500;white-space:nowrap} .conflict-diff td{overflow-wrap:anywhere;font-variant-numeric:tabular-nums} .conflict-quote{min-width:0;padding:var(--s4);border:1px solid var(--line); border-left:3px solid var(--olive);border-radius:var(--r-sm);background:var(--mineral)} .conflict-quote__src{font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted-2);margin-bottom:var(--s2)} .conflict-quote__text{margin:0 0 var(--s2);line-height:1.55;overflow-wrap:anywhere} /* The decision is the point of the card, so it is separated and led by the question. */ .conflict-decide{display:grid;gap:var(--s2);margin-top:var(--s4);padding-top:var(--s4); border-top:1px solid var(--line)} .conflict-decide__ask{font-weight:600} .conflict-finding-card{display:grid;gap:var(--space-group);padding:var(--s5)} .conflict-finding-card>.sub{margin:0} .conflict-finding-card__comparison{min-width:0} .conflict-finding-card>.compact-disclosure,.conflict-finding-card>.conflict-decide{margin:0} @media(max-width:620px){.conflict-finding-card{padding:var(--s4)}} tbody tr{transition:background .12s var(--ease)} tbody tr:hover{background:rgb(var(--evergreen-rgb)/4%)} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} .subtle{color:var(--muted-2)} .audit-when,.audit-id{white-space:nowrap}.audit-result{min-width:180px;max-width:36rem;white-space:normal;overflow-wrap:anywhere} .audit-copy{all:unset;cursor:pointer;margin-left:5px;padding:3px 6px;border:1px solid var(--line); border-radius:var(--r-pill);color:var(--evergreen);font:600 10px var(--font-mono)} .audit-copy:focus-visible{box-shadow:var(--focus)} /* S8 numbered pager: Previous / page numbers with an ellipsis / Next. */ .audit-pager{display:flex;align-items:center;justify-content:center;gap:var(--s3); margin-top:var(--s3);flex-wrap:wrap} .audit-pager__pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .audit-pager__page{all:unset;box-sizing:border-box;min-width:32px;min-height:32px;padding:0 8px; display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent; border-radius:var(--r-xs);color:var(--evergreen);font:600 13px var(--font-mono);cursor:pointer} button.audit-pager__page:hover{background:var(--sage-soft)} button.audit-pager__page:focus-visible{outline:none;box-shadow:var(--focus)} .audit-pager__page.is-current{background:var(--evergreen);color:var(--mineral);cursor:default} .audit-pager__gap{color:var(--muted-2);padding:0 2px;font:600 13px var(--font-mono)} @media (max-width:640px){.audit-pager__page{min-width:40px;min-height:40px}} .field{margin-bottom:var(--s4)} .field label{display:block;font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.13em; text-transform:uppercase;color:var(--muted-2);margin-bottom:6px} .model-field-label{display:flex;align-items:center;gap:5px;margin-bottom:6px} .model-field-label label{margin:0} .model-field-label .heading-info{width:16px;height:16px;margin-left:0} .model-field-label .heading-info svg{width:14px;height:14px} /* line-height is pinned so a mono input, a body input and a native select that sit on one row all resolve to the same box height. */ .input,.select{width:100%;font-family:var(--font-body);font-size:14px;line-height:1.45;padding:10px 12px; border:1px solid rgb(var(--evergreen-rgb)/18%);border-radius:var(--r-sm);background:var(--panel);color:var(--ink)} .input:focus,.select:focus{outline:none;border-color:var(--evergreen);box-shadow:var(--focus)} .hint{font-size:var(--text-small);color:var(--muted-2);margin-top:5px} /* Inline field validation: message sits under its input so drawer forms never surface errors on the blurred page behind them. */ .field-error{font-size:var(--text-small);color:var(--rust);margin:5px 0 0} .field-error:empty{display:none} .input.input--invalid{border-color:var(--rust)} .input.input--invalid:focus{border-color:var(--rust);box-shadow:0 0 0 3px rgb(232 60 0/12%)} /* ---- One dropdown for the whole console --------------------------------- Every