/* console/style.css — Norn Console shell. * One file, one token pair (daylight / dark) via CSS custom properties, overridden by a `data-theme` * attribute the toggle stamps on . `@media (prefers-color-scheme: dark)` supplies the default * when the visitor hasn't chosen, `[data-theme="dark"]` / `[data-theme="light"]` always win over it. */ /* --------------------------------------------------------------------------------------------- Reset --------------------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body, div, span, h1, h2, h3, h4, p, ul, ol, li, form, fieldset, table, th, td, a, button, input, select, label, pre, code { margin: 0; padding: 0; font: inherit; color: inherit; border: 0; vertical-align: baseline; } html { -webkit-text-size-adjust: 100%; } button, input, select { background: none; } button { cursor: pointer; } a { text-decoration: none; } table { border-collapse: collapse; width: 100%; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } /* --------------------------------------------------------------------------------------------- Tokens --------------------------------------------------------------------------------------------- */ :root { --paper: #ffffff; --card: #f2f3f7; --ink: #20242c; --muted: #646b76; --rule: #e6e8ee; --accent: #5a51e8; --accent-bg: #edebfc; --accent-ink: #ffffff; --canvas-image: none; --canvas-size: 18px 18px; --shadow-card: 0 1px 3px rgba(32, 36, 44, 0.08); --shadow-raised: 0 4px 16px rgba(32, 36, 44, 0.12); --focus-ring: 0 0 0 3px rgba(90, 81, 232, 0.35); --decision-allow: #0ca30c; --decision-allow-bg: #e6f7e6; --decision-review: #fab219; --decision-review-bg: #fff4de; --decision-block: #d03b3b; --decision-block-bg: #fbe7e7; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } @media (prefers-color-scheme: dark) { :root { --paper: #0c1118; --card: #1a2434; --ink: #e6ebf2; --muted: #8a93a3; --rule: #232d3a; --accent: #4c8dff; --accent-bg: rgba(76, 141, 255, 0.16); --accent-ink: #ffffff; --canvas-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-raised: 0 6px 20px rgba(0, 0, 0, 0.45); --focus-ring: 0 0 0 3px rgba(76, 141, 255, 0.45); --decision-allow: #35c93b; --decision-allow-bg: rgba(53, 201, 59, 0.14); --decision-review: #fabb3d; --decision-review-bg: rgba(250, 187, 61, 0.14); --decision-block: #ef5a5a; --decision-block-bg: rgba(239, 90, 90, 0.14); } } :root[data-theme="dark"] { --paper: #0c1118; --card: #1a2434; --ink: #e6ebf2; --muted: #8a93a3; --rule: #232d3a; --accent: #4c8dff; --accent-bg: rgba(76, 141, 255, 0.16); --accent-ink: #ffffff; --canvas-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-raised: 0 6px 20px rgba(0, 0, 0, 0.45); --focus-ring: 0 0 0 3px rgba(76, 141, 255, 0.45); --decision-allow: #35c93b; --decision-allow-bg: rgba(53, 201, 59, 0.14); --decision-review: #fabb3d; --decision-review-bg: rgba(250, 187, 61, 0.14); --decision-block: #ef5a5a; --decision-block-bg: rgba(239, 90, 90, 0.14); } :root[data-theme="light"] { --paper: #ffffff; --card: #f2f3f7; --ink: #20242c; --muted: #646b76; --rule: #e6e8ee; --accent: #5a51e8; --accent-bg: #edebfc; --accent-ink: #ffffff; --canvas-image: none; --shadow-card: 0 1px 3px rgba(32, 36, 44, 0.08); --shadow-raised: 0 4px 16px rgba(32, 36, 44, 0.12); --focus-ring: 0 0 0 3px rgba(90, 81, 232, 0.35); --decision-allow: #0ca30c; --decision-allow-bg: #e6f7e6; --decision-review: #fab219; --decision-review-bg: #fff4de; --decision-block: #d03b3b; --decision-block-bg: #fbe7e7; } /* --------------------------------------------------------------------------------------------- Base --------------------------------------------------------------------------------------------- */ html, body { height: 100%; } body { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; color: var(--ink); background-color: var(--paper); background-image: var(--canvas-image); background-size: var(--canvas-size); min-height: 100%; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { box-shadow: var(--focus-ring); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------------------------- App shell --------------------------------------------------------------------------------------------- */ :root { --rail-w-expanded: 248px; --rail-w-collapsed: 64px; --rail-w: var(--rail-w-expanded); --panel-w: 0px; --topbar-h: 56px; } :root[data-rail="collapsed"] { --rail-w: var(--rail-w-collapsed); } /* The setup/tutorial panel is a FLOATING overlay (see .app-panel below), deliberately NOT a grid column: a column that appears/disappears resizes the whole shell, so the topbar and main content visibly jump ("the header jitters") every time the panel toggles or the tutorial page hides it. An overlay changes nothing about the layout underneath — the tutorial reads as floating above the app. --panel-w survives only as a legacy no-op for anything still referencing it. */ #app { min-height: 100%; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: var(--topbar-h) 1fr auto; grid-template-areas: "rail topbar" "rail main" "rail footer"; } /* pre-login (login / invite): no rail, no panel */ #app[data-shell="auth"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main" "footer"; } #app[data-shell="auth"] .app-rail, #app[data-shell="auth"] .app-panel, #app[data-shell="auth"] .rail-scrim { display: none; } .app-rail { grid-area: rail; border-right: 1px solid var(--rule); background-color: var(--card); } .app-topbar { grid-area: topbar; height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid var(--rule); background-color: var(--paper); } .app-main { grid-area: main; } .app-footer { grid-area: footer; } .app-panel { position: fixed; top: calc(var(--topbar-h) + 16px); right: 16px; width: 300px; max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); background-color: var(--card); box-shadow: var(--shadow-raised); z-index: 60; } /* On narrower viewports the top-right card sits exactly over page-head actions (the blind walkthrough found it covering the very "Mint new key" button it points at). Below 1600px, dock it bottom-right instead — page heads and their primary buttons live at the top; the bottom edge is the least action-dense area. Wide monitors keep the top-right placement, where nothing overlaps. */ @media (max-width: 1600px) { .app-panel { top: auto; bottom: 20px; max-height: calc(100vh - var(--topbar-h) - 40px); } } /* full-height columns whose contents pin while main scrolls */ .rail-inner { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px 20px; } .panel-inner { padding: 18px 16px; } .app-main { max-width: 1080px; margin: 0 auto; padding: 22px 28px 60px; width: 100%; } /* Data-dense views (compliance library, decisions list — see render()'s isWideView) opt out of the comfortable prose measure: a wall of table columns reads better using the screen it's given, where a settings form or a decision's detail page would only get harder to read wider. Still capped, not edge-to-edge — 1600px matches the breakpoint the app already treats as "wide monitor" elsewhere (see .app-panel above) — and every table inside keeps scrolling in its own .table-wrap, never the page body. */ .app-main.view-wide { max-width: 1600px; } .skip-link { position: absolute; top: 8px; left: 8px; z-index: 200; padding: 8px 12px; background-color: var(--card); border: 1px solid var(--accent); border-radius: var(--radius-sm); } .rail-scrim { display: none; } .brand { display: flex; align-items: center; gap: 10px; margin-right: 6px; } .brand-tile { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; } .brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; } .tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; } .tab { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: background-color 0.12s ease, color 0.12s ease; } .tab:hover { color: var(--ink); background-color: var(--accent-bg); } .tab.active { color: var(--accent); font-weight: 700; } @media (prefers-color-scheme: dark) { .tab.active { color: var(--ink); font-weight: 600; background-color: var(--card); box-shadow: var(--shadow-raised); } } :root[data-theme="dark"] .tab.active { color: var(--ink); font-weight: 600; background-color: var(--card); box-shadow: var(--shadow-raised); } :root[data-theme="light"] .tab.active { color: var(--accent); font-weight: 700; background-color: transparent; box-shadow: none; } .header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 5px; border-radius: 999px; border: 1px solid var(--rule); font-size: 13px; background-color: var(--card); } .chip-tile { width: 22px; height: 22px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .help-btn { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--rule); font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; } .help-btn:hover { color: var(--ink); border-color: var(--accent); } /* header segmented-toggle chip (theme: Light/Dark) — same chip shell as the org/user chips, two segmented options inside */ .chip.seg-chip { padding: 3px; gap: 2px; } .seg-opt { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); } .seg-opt:hover { color: var(--ink); } .seg-opt.active { background-color: var(--accent); color: var(--accent-ink); } /* header language selector — a native here (standard/category/modality/status) lists EVERY value the whole library has, not just what the current filter shows — idx.families/idx.facets are fetched once (state.complianceIndex) and never change across a filter switch. A