/* Console token contract. ONE look, two themes (dark default, light via html[data-theme="light"]). Neutral grays with no blue tint, one saturated blue accent, hairline borders, no shadows. Legacy property names are aliases so the rest of this file keeps working. See DESIGN.md. */ /* Self-hosted typefaces (offline-first: NO Google Fonts link / @import anywhere). Public Sans for the UI, JetBrains Mono for data. One variable woff2 per family (latin subset covers en/es/fr/de). See app/static/fonts/README.md. */ @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/public-sans-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); } :root { --bg: var(--color-canvas); --bg-2: var(--color-sidebar); --panel: var(--color-surface); --panel-2: var(--color-subtle); --elev: var(--color-raised); --border: var(--color-border); --input-border: var(--color-control-border); --border-soft: var(--color-border-soft); --text: var(--color-text); --text-dim: var(--color-text-secondary); --muted: var(--color-text-muted); --primary: var(--color-accent); --primary-2: var(--color-accent-text); --primary-soft: var(--color-selected); --primary-ink: var(--color-on-accent); --nav-on: var(--color-nav-on); --ring: var(--color-focus); --ring-glow: color-mix(in srgb, var(--ring) 18%, transparent); /* progress flash only; focus is an outline, no glow */ --primary-border: var(--color-accent-border); --radius: var(--radius-card); --radius-sm: var(--radius-control); --radius-xs: var(--radius-small); --shadow: var(--elevation-overlay); --shadow-sm: var(--elevation-flat); --scrollbar-hover: var(--input-border); --term-tag: var(--success); --row-dirty: var(--primary-soft); --row-dirty-hover: var(--primary-soft); --row-failed: var(--danger-soft); --row-failed-hover: var(--danger-soft); --font-body: "Public Sans", "JetBrains Mono", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: var(--font-body); --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --data-font: var(--mono); --display-tracking: -.01em; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --readable: 68ch; --content-max: 1240px; --radius-card: 8px; --radius-control: 6px; --radius-small: 4px; --radius-pill: 999px; --font-size-caption: 0.75rem; --font-size-body: 0.875rem; --font-size-section: 1rem; --font-size-title: 1.5rem; --line-height-body: 1.5; --line-height-title: 1.25; --line-height-editor: 1.6; --font-weight-heading: 600; --border-width: 1px; --control-height: 34px; --control-height-mobile: 40px; --row-height: 48px; --focus-width: 2px; --focus-offset: 2px; --motion-fast: 120ms; --motion-normal: 180ms; --motion-easing: ease; --elevation-flat: none; --elevation-overlay: none; --elevation-popover: none; --color-disabled-text: var(--muted); --color-disabled-surface: var(--panel-2); /* Dark theme (default). */ --color-canvas: #1b1b1d; --color-sidebar: #1b1b1d; --color-surface: #1b1b1d; --color-subtle: #242427; --color-raised: #202023; --color-border: #2e2e32; --color-border-soft: #262629; --color-control-border: #77777f; --color-text: #ececee; --color-text-secondary: #a5a5ad; --color-text-muted: #9a9aa3; --color-accent: #3b6adb; --color-accent-text: #86a5f7; --color-on-accent: #ffffff; --color-accent-border: rgba(134, 165, 247, .35); --color-selected: #1f2638; --color-nav-on: #2a2a2e; --color-focus: #86a5f7; --success: #3fb27f; --success-soft: #1d3329; --success-border: rgba(63, 178, 127, .35); --warn: #e0a33a; --warn-soft: #3a301b; --warn-border: rgba(224, 163, 58, .35); --danger: #f2837c; --danger-soft: #3b2325; --danger-border: rgba(242, 131, 124, .4); --danger-border-solid: #7a4a4d; --hover-border: #4a4a52; color-scheme: dark; } /* Light theme: the same token names as :root (verify_ui_theme pins the parity); only the colors differ. */ html[data-theme="light"] { --bg: var(--color-canvas); --bg-2: var(--color-sidebar); --panel: var(--color-surface); --panel-2: var(--color-subtle); --elev: var(--color-raised); --border: var(--color-border); --input-border: var(--color-control-border); --border-soft: var(--color-border-soft); --text: var(--color-text); --text-dim: var(--color-text-secondary); --muted: var(--color-text-muted); --primary: var(--color-accent); --primary-2: var(--color-accent-text); --primary-soft: var(--color-selected); --primary-ink: var(--color-on-accent); --nav-on: var(--color-nav-on); --ring: var(--color-focus); --ring-glow: color-mix(in srgb, var(--ring) 18%, transparent); --primary-border: var(--color-accent-border); --radius: var(--radius-card); --radius-sm: var(--radius-control); --radius-xs: var(--radius-small); --shadow: var(--elevation-overlay); --shadow-sm: var(--elevation-flat); --scrollbar-hover: var(--input-border); --term-tag: var(--success); --row-dirty: var(--primary-soft); --row-dirty-hover: var(--primary-soft); --row-failed: var(--danger-soft); --row-failed-hover: var(--danger-soft); --font-body: "Public Sans", "JetBrains Mono", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: var(--font-body); --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --data-font: var(--mono); --display-tracking: -.01em; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --readable: 68ch; --content-max: 1240px; --radius-card: 8px; --radius-control: 6px; --radius-small: 4px; --radius-pill: 999px; --font-size-caption: 0.75rem; --font-size-body: 0.875rem; --font-size-section: 1rem; --font-size-title: 1.5rem; --line-height-body: 1.5; --line-height-title: 1.25; --line-height-editor: 1.6; --font-weight-heading: 600; --border-width: 1px; --control-height: 34px; --control-height-mobile: 40px; --row-height: 48px; --focus-width: 2px; --focus-offset: 2px; --motion-fast: 120ms; --motion-normal: 180ms; --motion-easing: ease; --elevation-flat: none; --elevation-overlay: none; --elevation-popover: none; --color-disabled-text: var(--muted); --color-disabled-surface: var(--panel-2); /* Light theme. */ --color-canvas: #ffffff; --color-sidebar: #ffffff; --color-surface: #ffffff; --color-subtle: #f1f1f3; --color-raised: #ffffff; --color-border: #e4e4e7; --color-border-soft: #efeff1; --color-control-border: #7b7b84; --color-text: #18181b; --color-text-secondary: #55555c; --color-text-muted: #5f5f67; --color-accent: #2f5fd0; --color-accent-text: #2f5fd0; --color-on-accent: #ffffff; --color-accent-border: rgba(47, 95, 208, .35); --color-selected: #eaf0fc; --color-nav-on: #f1f1f3; --color-focus: #2f5fd0; --success: #17734a; --success-soft: #e6f3ec; --success-border: rgba(23, 115, 74, .35); --warn: #8f5600; --warn-soft: #fff3d8; --warn-border: rgba(143, 86, 0, .35); --danger: #b42318; --danger-soft: #fdecea; --danger-border: rgba(180, 35, 24, .4); --danger-border-solid: #e3b3ae; --hover-border: #c2c2c9; color-scheme: light; } * { box-sizing: border-box; } html { scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } body { margin: 0; font-family: var(--font-body); /* Body role (DESIGN.md §3): 14px / 0.875rem Public Sans. The app previously left body at the 16px UA default and hand-sized every element; this establishes the spec baseline so unstyled reading text and table cells land at 14px. rem-sized elements are unaffected (rem is root-relative), so the tuned per-element sizes keep their values. */ font-size: var(--font-size-body); /* Backgrounds are flat — the old radial-gradient wash is retired. */ background: var(--bg); color: var(--text); line-height: var(--line-height-body); -webkit-font-smoothing: antialiased; } a { color: var(--primary-2); } /* Long prose reads with fewer orphans/ragged lines (typeset guidance). Headings below opt into `balance` instead; short UI strings are unaffected either way. */ p, .help { text-wrap: pretty; } /* Display wiring: page titles (h1 / Display), section & card headings (h2 / Headline), the topbar page title, and the wordmark. It is deliberately NOT applied to labels, buttons, table cells, or data — those stay Public Sans / JetBrains Mono (DESIGN.md §3). */ h1, h2, .crumbs, .brand, .brand-big, .errcode { font-family: var(--font-display); } /* ---------------- app shell ---------------- */ .app { display: flex; min-height: 100vh; } .sidebar { width: 252px; flex-shrink: 0; background: var(--bg-2); border-right: 1px solid var(--border-soft); padding: 14px 12px; /* `position: sticky` pins the sidebar on long pages AND establishes the absolute-positioning containing block for the .sb-resize handle (feat/ sidebar-ux) — so the handle needs no separate `position: relative`, which would silently un-pin the sidebar (same specificity, later in source). */ display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sidebar .brand { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; font-weight: 700; color: var(--text); text-decoration: none; padding: 6px 8px 16px; letter-spacing: var(--display-tracking); } .sidebar .brand .mark { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-size: 1rem; } .newbtn { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--primary); color: var(--primary-ink); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); padding: 10px; margin-bottom: 12px; font-size: .9rem; box-shadow: none; transition: filter var(--motion-fast), transform var(--motion-fast); } .newbtn:hover { filter: brightness(.92); } .newbtn:active { transform: translateY(1px); } .side-nav { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; } /* Label role (DESIGN.md §3): 12px / 0.75rem, +0.05em tracking, uppercase — the ONE sanctioned uppercase role. Nav-group headings live here (was 10.5px/.1em). */ .nav-group { color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 16px 10px 5px; } .side-nav a { position: relative; color: var(--text-dim); text-decoration: none; padding: 8px 11px; border-radius: var(--radius-sm); font-size: .9rem; display: flex; align-items: center; gap: 9px; transition: background var(--motion-fast), color var(--motion-fast); } .side-nav a:hover { background: var(--panel); color: var(--text); } /* Active nav: subtle gray fill, 600 weight — no side-stripe / left border (the old ::before accent stripe is retired, per DESIGN.md Components + the side-stripe absolute ban). */ .side-nav a.on { background: var(--primary-soft); color: var(--primary-2); font-weight: 600; } .side-foot { border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 8px; display: flex; align-items: center; gap: 8px; } .prov-dots { display: flex; gap: 5px; } .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 700; } .dot.live { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); } .dot.mock { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); } /* a local engine known only by its server URL (nothing probes it): not claimed live (#561) */ .dot.configured { background: var(--panel-2); color: var(--success); border: 1px dashed var(--success-border); } /* ---------------- Customizable sidebar (feat/sidebar-ux) ---------------- Collapse/resize/reorder. Desktop-facing: the width var, collapsed rail AND the .sb-controls toggles apply only >900px (mobile keeps the off-canvas overlay from mobilenav.js untouched — the controls are dead/harmful on touch, see sidebar_ux.js viewport gate). The glyph/label split lets a collapsed rail show icons only. RTL note (SB-11, not built): the resize handle lives on the right edge and the collapse chevrons assume LTR; an RTL layout would need mirroring. */ .nav-glyph { flex-shrink: 0; width: 18px; text-align: center; display: inline-block; } .nav-section { display: flex; flex-direction: column; gap: 1px; } /* Top controls: collapse + edit-layout toggles. Desktop-only: hidden by default and revealed in the min-width:901px block below (SB-04) so a touch viewport never shows the dead collapse toggle or the (undraggable) edit mode. */ .sb-controls { display: none; gap: 6px; justify-content: flex-end; padding: 0 2px 8px; } .sb-controls button { background: transparent; border: 1px solid var(--input-border); color: var(--text-dim); border-radius: var(--radius-sm); width: 28px; height: 28px; line-height: 1; /* padding: 0 is load-bearing: the global `button` rule (later in this sheet) sets padding 10px 17px, which crushes the 28px border-box grid area and shoves the glyph into the bottom-right corner. Keep the glyph grid-centered. */ padding: 0; align-self: auto; cursor: pointer; font-size: .95rem; display: grid; place-items: center; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); } .sb-controls button:hover { border-color: var(--primary); color: var(--text); } .sb-edit[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-2); border-color: var(--primary); } /* Edit-mode toolbar (Done / Reset layout). */ .sb-edit-bar { display: none; gap: 6px; padding: 8px 2px 0; margin-top: 6px; border-top: 1px solid var(--border-soft); } .sidebar.editing .sb-edit-bar { display: flex; } .sb-edit-bar button { flex: 1; background: transparent; border: 1px solid var(--input-border); color: var(--text-dim); border-radius: var(--radius-sm); padding: 7px 6px; font-size: .8rem; cursor: pointer; transition: filter var(--motion-fast), border-color var(--motion-fast); } .sb-edit-bar .sb-done { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 600; } .sb-edit-bar button:hover { filter: brightness(.92); border-color: var(--primary); } /* Edit-mode affordances. */ .sidebar.editing .nav-section { outline: 1px dashed var(--border); outline-offset: -2px; border-radius: var(--radius-sm); padding: 2px 0; } .sidebar.editing .nav-group { cursor: grab; } .sidebar.editing .side-nav a { cursor: grab; } .sidebar.editing .nav-group::before, .sidebar.editing .side-nav a::before { content: "⋮⋮"; content: "⋮⋮" / ""; margin-right: 6px; opacity: .45; letter-spacing: -2px; } .sidebar.editing .side-nav a::before { font-size: .8rem; margin-right: 4px; } .sb-dragging { opacity: .45; } /* Resize handle. Sits fully INSIDE the sidebar's right edge (right:0, not the old right:-2px which spilled 1px over the content and showed a col-resize cursor there — SB-09). The 1px right border keeps it visually flush with the seam. */ .sb-resize { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; z-index: 2; display: none; } .sb-resize:hover { background: var(--primary-soft); } body.sb-resizing { cursor: col-resize; user-select: none; } body.sb-resizing .sidebar { transition: none; } /* a11y T8 (2.5.7 / 2.1.1): no drag-only control. In edit mode every group and item gets 24 px up/down buttons in a second grid column (the span follows its link or heading, so auto-placement keeps each pair on one row); the edit bar gets a width stepper line; the handle is a focusable separator while editing and takes touch. */ .sb-resize { touch-action: none; } .sb-resize:focus-visible { background: var(--primary); outline: 2px solid var(--primary); outline-offset: 0; } .sidebar.editing .nav-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4px; align-items: center; } .sidebar.editing .nav-section > .nav-group, .sidebar.editing .nav-section > a { grid-column: 1; } .sidebar.editing .nav-section > .sb-move { grid-column: 2; } .sb-move { display: inline-flex; gap: 2px; padding-right: 2px; } .sb-move button { width: 24px; height: 24px; min-width: 24px; min-height: 24px; padding: 0; display: grid; place-items: center; background: transparent; border: 1px solid var(--input-border); color: var(--text-dim); border-radius: var(--radius-xs); font-size: .8rem; line-height: 1; cursor: pointer; } .sb-move button:hover:not(:disabled) { border-color: var(--primary); color: var(--text); } .sb-move button:disabled { opacity: .35; cursor: default; } .side-nav:has(.sb-dragging) .sb-move { visibility: hidden; } .sb-edit-bar { flex-wrap: wrap; } .sb-width-row { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .sb-width-label { font-size: .8rem; color: var(--text-dim); } .sb-width-now { flex: 1; font-size: .8rem; color: var(--text); font-variant-numeric: tabular-nums; } .sb-width-row button { min-height: 24px; } /* a11y T8 (1.1.1): the workflow diagram as text (_macros.html wf_graph_text). It inherits the shared details / summary box; the list carries its own step numbers. */ .wfg-text-list { list-style: none; margin: 8px 0 0; font-size: .88rem; } .wfg-text-list li { margin: 3px 0; } /* Desktop-only: custom width, the .sb-controls toggles + the collapsed rail. The collapsed presentation is gated on `html.sb-js` — the class sidebar_ux.js adds once it has actually built the expand control + label spans (SB-05). The no-flash bootstrap pre-sets sb-js on every JS-capable load, and an end-of- guard strips sb-js if sidebar_ux.js never initialised, so a failed/absent script can NEVER trap the user in a control-less 56px rail. */ @media (min-width: 901px) { .sidebar { width: var(--sidebar-w, 232px); transition: width var(--motion-fast) ease; } .sb-controls { display: flex; } .sb-resize { display: block; } html.sb-js.sb-collapsed .sidebar { width: 56px; padding-left: 6px; padding-right: 6px; } html.sb-js.sb-collapsed .sb-resize { display: none; } html.sb-js.sb-collapsed .sb-controls { justify-content: center; } html.sb-js.sb-collapsed .sb-edit { display: none; } html.sb-js.sb-collapsed .sb-edit-bar { display: none !important; } html.sb-js.sb-collapsed .nav-label { display: none; } html.sb-js.sb-collapsed .side-nav a, html.sb-js.sb-collapsed .newbtn, html.sb-js.sb-collapsed .sidebar .brand { justify-content: center; gap: 0; } html.sb-js.sb-collapsed .side-nav a { padding-left: 0; padding-right: 0; } html.sb-js.sb-collapsed .side-nav a .badge { display: none; } html.sb-js.sb-collapsed .nav-group { font-size: 0; padding: 10px 4px 6px; } html.sb-js.sb-collapsed .nav-group::after { content: ""; display: block; border-top: 1px solid var(--border-soft); } html.sb-js.sb-collapsed .side-foot { justify-content: center; } html.sb-js.sb-collapsed .side-foot .muted { display: none; } html.sb-js.sb-collapsed .prov-dots { flex-wrap: wrap; justify-content: center; } } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Flat opaque top surface, 1px Soft Seam bottom rule — NO backdrop blur (glassmorphism is banned; the bar is solid). DESIGN.md §5 Navigation. */ .topbar2 { display: flex; align-items: center; gap: 16px; padding: 13px 28px; background: var(--bg-2); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 5; } .crumbs { font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; } .topsearch-form { margin-left: 8px; flex: 1; max-width: 360px; } .topsearch { width: 100%; background: var(--panel); border: 1px solid var(--input-border); border-radius: 999px; color: var(--text); padding: 8px 14px; font-size: .85rem; } .topsearch::placeholder { color: var(--muted); } .topsearch:focus { outline: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring-glow); } .topactions { display: flex; gap: 10px; align-items: center; margin-left: auto; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--elev); color: var(--primary-2); display: grid; place-items: center; font-size: .8rem; font-weight: 700; border: 1px solid var(--border); } .btn-primary { background: var(--primary); color: var(--primary-ink); text-decoration: none; font-weight: 600; border-radius: var(--radius-sm); padding: 8px 15px; font-size: .88rem; box-shadow: none; transition: filter var(--motion-fast), transform var(--motion-fast); } .btn-primary:hover { filter: brightness(.92); } .btn-primary:active { transform: translateY(1px); } /* Full-width, viewport-responsive: content fills .main (viewport minus the fixed sidebar) at any width, so an ultrawide screen is used edge-to-edge instead of capping at a fixed column. (Per-page reading widths like .docs-body / .narrow keep their own intentional caps.) */ .content { padding: 26px 28px 48px; width: 100%; } /* Type scale (DESIGN.md §3, ratio ~1.2). Display=h1 (25px), Headline=h2 (18px), h3 a sub-heading (16px) in the same Public Sans face. text-wrap: balance evens heading line lengths. */ h1 { font-size: var(--font-size-title); font-weight: var(--font-weight-heading); line-height: var(--line-height-title); letter-spacing: var(--display-tracking); text-wrap: balance; } h2 { font-size: var(--font-size-section); font-weight: var(--font-weight-heading); line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; } h3 { font-size: 1rem; line-height: 1.35; font-weight: 600; letter-spacing: -.005em; text-wrap: balance; } .muted { color: var(--muted); } .small { font-size: .82rem; } .mt { margin-top: var(--space-5); } /* Standard helper-paragraph style (copy/density audit, wave 1): replaces the old `.muted.small` convention for standalone helper text under a heading/control. One step higher-contrast than .muted (--text-dim vs --muted) since tiny+low- contrast text was the readability complaint; capped at --readable so it never runs the full width of the ultrawide .content column. */ .help { color: var(--text-dim); font-size: .85rem; max-width: var(--readable); margin: var(--space-1) 0 0; text-wrap: pretty; } /* A few former `.muted.small.mt` sites wanted the LARGER .mt gap (separation from a preceding block), not .help's default tight 4px caption spacing. Two-class selector beats source order so this wins regardless of declaration position. */ .help.mt { margin-top: var(--space-5); } /* Visually-hidden but screen-reader-accessible label (a11y). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip-to-content link (a11y, SB-08): the first focusable element on the page, off-screen until focused, so a keyboard user can jump the sidebar (incl. the injected collapse/edit controls) instead of tabbing through every nav item. */ .skip-link { position: absolute; left: 64px; top: -48px; z-index: 100; background: var(--primary); color: var(--primary-ink); text-decoration: none; padding: 8px 14px; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 600; transition: top var(--motion-fast) ease; } .skip-link:focus { top: 8px; outline: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); box-shadow: 0 0 0 3px var(--ring-glow); } /* ---------------- KPI cards ---------------- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform var(--motion-fast), border-color var(--motion-fast); } .kpi:hover { transform: translateY(-2px); border-color: var(--hover-border); } .kpi-num { display: block; font-size: 1.95rem; font-weight: 750; color: var(--text); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi-lbl { color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } /* progress + activity */ .prog { background: var(--panel-2); border-radius: 999px; height: 7px; overflow: hidden; width: 130px; } .prog-bar { background: var(--primary); height: 100%; border-radius: 999px; } .activity { list-style: none; padding: 0; margin: 0; } .activity li { padding: 9px 0; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; } .activity li:last-child { border-bottom: none; } .activity a { color: var(--primary-2); text-decoration: none; font-weight: 500; } .quick { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------------- tiles ---------------- */ .tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 14px; } .tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px; display: flex; flex-direction: column; gap: 5px; transition: transform var(--motion-fast), border-color var(--motion-fast); } .tile:hover { transform: translateY(-2px); border-color: var(--hover-border); } .tile-top { display: flex; align-items: center; justify-content: space-between; } .tile-icon { font-size: 1.5rem; } .tile-link { text-decoration: none; color: inherit; } .tile-link:hover { border-color: var(--primary); } .tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; } .danger-btn, button.danger, .btn-danger { color: var(--danger) !important; border-color: var(--danger-border-solid) !important; } .danger-btn:hover, button.danger:hover, .btn-danger:hover { background: rgba(240, 121, 107, .10) !important; } .sync-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .expand { cursor: pointer; } .muted-badge { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); } .testout { min-height: 1em; } .preset-card { margin: 10px 0; } /* ---------------- reports bars ---------------- */ .barrow { display: flex; align-items: center; gap: 10px; margin: 7px 0; } /* Label role (DESIGN.md §3: "table headers, control-module names, ... stat labels" — same treatment as .kpi-lbl / .table thead th): uppercase, tracked, Ash on the surface. Wave-3 polish; .barlbl only appears in the reports.html bars macro, so this is not a new selector, just filling in the existing one. */ .barlbl { width: 150px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: right; } .bar { flex: 1; background: var(--panel-2); border-radius: 6px; height: 18px; overflow: hidden; } .bar-fill { background: var(--primary); height: 100%; border-radius: 6px; } .barval { width: 40px; font-size: .85rem; } /* ---------------- layout helpers ---------------- */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 18px; } /* ---------------- mobile nav (hamburger) ---------------- */ /* Bug #14: below 900px the sidebar used to just vanish (display:none) with no way back in. The hamburger toggle (topbar2, JS-driven via mobilenav.js) slides the sidebar in as an overlay instead of hiding it outright; a backdrop click or Escape closes it. Without JS the button is inert but the page still renders - the sidebar just stays off-canvas until the viewport widens past 900px. */ .hamburger { display: none; background: transparent; border: 1px solid var(--input-border); border-radius: var(--radius-sm); color: var(--text); width: 36px; height: 36px; align-items: center; justify-content: center; font-size: 1.1rem; padding: 0; box-shadow: none; cursor: pointer; } .hamburger:hover { border-color: var(--primary); filter: none; } .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(5, 8, 14, .6); z-index: 20; } @media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } .hamburger { display: flex; } .sidebar { position: fixed; left: 0; top: 0; z-index: 30; transform: translateX(-100%); transition: transform var(--motion-fast) ease; box-shadow: var(--shadow); } .app.nav-open .sidebar { transform: translateX(0); } .app.nav-open .nav-backdrop { display: block; } } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-5); box-shadow: var(--shadow-sm); } .card h2 { margin-top: 0; } /* Reading cap (copy/density audit, wave 1): prose and labels inside a card stay legible on the ultrawide .content column. Deliberately narrow to elements, not the card itself — tables, .prog, pre/code, the SVG graph, fact-strips, and chip rows all need their natural width and are untouched by this selector. Short single-line inputs nested in a capped label inherit the cap (fine — they're short-answer controls). */ .card p, .card .help, .card label { max-width: var(--readable); } /* ...but a label wrapping a MULTI-LINE control (prompt editors, project/workflow/ step "describe" briefs, the Jira JSON box, engine custom-instructions) must keep the card's full width — the reading cap is for prose you read, not text you author. :has() is Baseline-2023 (all evergreen browsers); this tool ships to modern browsers only. Replaces the earlier .wide opt-out, which was never applied to any template so every authoring textarea shipped wrongly capped at 68ch. */ .card label:has(textarea) { max-width: none; } /* ---------------- forms ---------------- */ .form { display: flex; flex-direction: column; gap: var(--space-4); } .form label { display: flex; flex-direction: column; gap: 5px; font-size: var(--font-size-body); color: var(--muted); font-weight: 500; } /* Text-control theming is GLOBAL (not scoped to .form): any input/select/textarea anywhere renders dark-themed instead of browser-default white. Control types that must keep native rendering (checkbox/radio/file/range/color) are excluded via :not so padding/background don't distort them. Declarations are unchanged from the old `.form input, .form select, textarea` rule — only the scope widened, so existing .form controls look identical. See the "specificity guard" block at end of file for the two pre-existing controls (.topsearch, .report-fields) that carried their own look and need to win against this now-wider selector. */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]), select, textarea { background: var(--bg-2); border: 1px solid var(--input-border); border-radius: var(--radius-sm); color: var(--text); min-height: var(--control-height); padding: 7px 12px; font-size: var(--font-size-body); font-family: inherit; transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus, select:focus, textarea:focus { outline: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring-glow); } textarea { resize: vertical; } button { align-self: flex-start; background: var(--primary); color: var(--primary-ink); border: none; border-radius: var(--radius-sm); min-height: var(--control-height); padding: 7px 12px; font-weight: 600; font-size: .9rem; cursor: pointer; box-shadow: none; transition: filter var(--motion-fast), transform var(--motion-fast); } button:hover { filter: brightness(.92); } button:active { transform: translateY(1px); } button.small, .btn-small { padding: 6px 12px; font-size: .82rem; box-shadow: none; } button.ghost, button.btn-secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--input-border); box-shadow: none; } button.ghost:hover, button.btn-secondary:hover { border-color: var(--primary); filter: none; } /* Token disabled state wins over primary/danger variants, including their legacy important hover declarations. Busy aria-disabled behavior is separate. */ button:disabled, button.primary:disabled, button.btn-primary:disabled, button.danger-btn:disabled, button.danger:disabled, button.btn-danger:disabled { opacity: 1; color: var(--color-disabled-text) !important; background: var(--color-disabled-surface) !important; border-color: var(--border) !important; cursor: default; filter: none; transform: none; } .list { padding-left: 18px; } .list li { margin: 4px 0; } /* ---------------- tables (Tabular Ledger, DESIGN.md §3 + §5) ---------------- Ruled + dense + calm: uppercase Label headers on a Seam header rule, 1px Soft Seam row rules, neutral-step row hover, no zebra. tabular-nums on the whole table so every numeric column aligns in fixed-width figures (proportional figures in a data column are a defect). `.grid` (tm/glossary/templates/segment lists) now shares the SAME Tabular-Ledger chrome as `.table` — header rule, Soft-Seam row rules, neutral-step hover, 550-weight links — via the shared selectors below (wave 2). `.grid`'s per-column width semantics (`.grid td.tm/ .terms/.num/.src/.tgt`, `.editor td.*`) and the editor's `--row-*` state tints are declared later in source at >= specificity, so they still win intact; the `table grid` combos (document/editor/lqa) already inherited this from `.table` in wave 1, so only standalone `.grid` lists change. */ .table, .grid { font-variant-numeric: tabular-nums; } .table, .grid { width: 100%; border-collapse: collapse; } .table th, .table td, .grid th, .grid td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border-soft); } /* Label role (12px/0.75rem) + a stronger Seam header rule above the softer row rules. */ .table thead th, .grid thead th { color: var(--muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); } .table tbody tr, .grid tbody tr { height: var(--row-height); transition: background var(--motion-fast); } .table tbody tr:hover, .grid tbody tr:hover { background: var(--bg-2); } .table a, .grid a { color: var(--primary-2); text-decoration: none; font-weight: 550; } .table a:hover, .grid a:hover { text-decoration: underline; } /* Data role: mono + tabular figures for data-shaped cells (locale codes like en-US → de-DE, counts, costs, hashes, IDs, timestamps). Applied surgically in templates. Deliberately unsized so it inherits the cell's size and stays vertically aligned with its neighbours (JetBrains Mono runs a touch large). */ .data-mono { font-family: var(--data-font); font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; font-size: .8rem; color: var(--text-dim); } .chip-x { margin-left: 6px; color: var(--muted); text-decoration: none; font-weight: 700; } .chip-x:hover { color: var(--danger, #c0392b); } .back { color: var(--primary-2); text-decoration: none; font-size: .88rem; } .next .roadmap { color: var(--muted); } .next .roadmap li { margin: 4px 0; } /* .88em scales with context but must never dip under the 12px floor (inside .small/.help it would land ~11.5px) — max() pins it at .75rem. */ code { background: var(--panel-2); padding: 1px 6px; border-radius: var(--radius-xs); font-size: max(.88em, .75rem); font-family: var(--mono, monospace); } .error, .err { color: var(--danger); background: rgba(240,121,107,.08); border: 1px solid var(--danger-border-solid); border-radius: var(--radius-sm); padding: 9px 12px; } span.err { display: inline-block; padding: 2px 8px; } /* a11y T6: the page error summary (_form_errors.html), first child of
. */ .error-summary { margin: 0 0 16px; border-width: 2px; } .error-summary:focus { outline: 3px solid var(--danger); outline-offset: 2px; } .error-summary-title { margin: 0 0 4px; font-size: 1rem; color: var(--danger); } .error-summary p { margin: 4px 0 0; } .error-summary-link a { color: inherit; text-decoration: underline; } .error-inline { color: var(--danger); } .ok { color: var(--success); } /* upload modes */ .modes { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; } .modes legend { color: var(--muted); padding: 0 6px; font-size: .82rem; } .radio { flex-direction: row !important; align-items: flex-start; gap: 8px; color: var(--text) !important; } .radio input { width: auto; margin-top: 3px; } .radio span { font-size: .9rem; } /* tabs */ .tabs { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .tab { padding: 6px 13px; border: 1px solid var(--input-border); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .84rem; transition: all var(--motion-fast); } .tab:hover { color: var(--text); border-color: var(--primary); } .tab.active { background: var(--primary-soft); color: var(--primary-2); border-color: var(--primary); font-weight: 600; } /* UX pass 1 p7: filter chips are links; the active one is filled and bold (not colour alone). */ a.chip { text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; } a.chip:hover { border-color: var(--primary); color: var(--text); } a.chip.active { background: var(--primary-soft); color: var(--primary-2); border-color: var(--primary); font-weight: 600; } /* UX pass 1 p4: rename and delete sit on their own row, apart from the locale tabs. */ .doc-admin-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); } .doc-admin-actions > * { margin: 0; } /* Status badges — "Signal dots" (Option A, the chosen design). The dot + uppercase-micro-label treatment is STATUS-ONLY (the plate's vocabulary is explicitly status): it applies to a `.badge` that carries a state modifier (.run/.ok/.warn/.danger/.exact/.fuzzy/.semantic/ .reauth/.paused/.beta) OR the explicit neutral-status marker `.status`. A BARE `.badge` with none of those stays the quiet neutral quiet neutral pill below — because `.badge` is also used for config / data / name / type TAGS (assignee email, customer name, "adaptive feedback (n=3)", cache tokens, run/batch type) that must NOT be case-folded into a status dot. Each state maps to an EXISTING token via two component-scoped custom props, --sig (dot) and --sig-ink (label); the shared dot/pulse/hollow/squared geometry, the narrow collapse, and the reduced-motion degrade live in the "Signal-dot machinery" section further down. Live states (.run = machine working, .reauth = reconnect) pulse; Beta+Semantic use a HOLLOW dot; Paused a SQUARED dot — non-colour redundancy. Every state selector sits at (0,2,0), above this (0,1,0) base, so it wins regardless of source order (the base pill only paints when no state/`.status` is present). */ .badge { font-size: .75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; display: inline-block; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); } .badge.status { --sig: var(--muted); --sig-ink: var(--muted); } .badge.warn { --sig: var(--warn); --sig-ink: var(--warn); } .badge.reauth { --sig: var(--danger); --sig-ink: var(--danger); } .badge.exact { --sig: var(--success); --sig-ink: var(--success); } .badge.fuzzy { --sig: var(--warn); --sig-ink: var(--warn); } .badge.semantic { --sig: var(--primary-2); --sig-ink: var(--primary-2); } .badge.beta { --sig: var(--primary-2); --sig-ink: var(--primary-2); } .badge.paused { --sig: var(--warn); --sig-ink: var(--warn); } .inline-form { flex-direction: row !important; flex-wrap: wrap; align-items: flex-end; gap: 13px; } .inline-form label { flex-direction: column; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .row-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .justfilled { animation: flashfill 1s ease-out; } @keyframes flashfill { from { background: var(--primary-soft); } to { background: transparent; } } .suggest { color: var(--success); font-style: italic; opacity: .85; } .btnlink { display: inline-block; background: var(--panel-2); border: 1px solid var(--input-border); color: var(--text); text-decoration: none; border-radius: var(--radius-sm); padding: 7px 13px; font-size: .85rem; transition: border-color var(--motion-fast); } .btnlink:hover { border-color: var(--primary); } /* segment / term grid */ .grid td.tm { width: 60px; } .grid td.terms { width: 22%; } .grid td.num { color: var(--muted); width: 38px; text-align: right; font-family: var(--data-font); font-variant-numeric: tabular-nums; } .grid td.src { width: 44%; } .grid td.tgt { width: 36%; } .grid td { vertical-align: top; } .grid .tag { background: var(--primary-soft); color: var(--primary-2); margin-right: 3px; white-space: nowrap; } .grid td.tags { white-space: nowrap; width: 1%; } .grid code.tag { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } .term { display: inline-block; background: var(--success-soft); border: 1px solid var(--success-border); color: var(--term-tag); border-radius: var(--radius-xs); padding: 1px 7px; margin: 1px 2px; font-size: .8rem; } .term.dnt { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); } .term em { color: var(--muted); font-style: normal; } /* inline-fidelity tag chips (read-only surfaces) — de-noised stand-in for the ⟦r1⟧/⟦g1⟧/⟦x1⟧ reconstruction tokens stored in segment text. */ .tag-chip { display: inline-block; min-width: 1.1em; white-space: nowrap; text-align: center; padding: 0 5px; margin: 0 1px; border-radius: var(--radius-xs); font-size: .72rem; font-weight: 600; line-height: 1.5; vertical-align: baseline; user-select: none; cursor: default; background: var(--primary-soft); color: var(--primary-2); border: 1px solid var(--primary-border); } .tag-chip.point { background: var(--panel-2); color: var(--text-dim); border-color: var(--border); } .tag-hint { display: inline-block; margin: 0 0 4px; padding: 1px 7px; border-radius: var(--radius-xs); background: var(--warn-soft); border: 1px solid var(--warn-border); color: var(--warn); } .tag-hint code { background: transparent; color: inherit; padding: 0; } /* workflow builder + runs */ .steplist { padding-left: 18px; } .step, .runstep { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; margin: 8px 0; } .step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .inline-del { margin-left: auto; } .step-output { max-height: 24rem; overflow: auto; } .prompt { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 9px 11px; white-space: pre-wrap; font-size: .82rem; color: var(--text-dim); overflow-x: auto; margin: 8px 0 0; } .preset { color: var(--primary-2); text-decoration: none; } /* CAT editor */ .editor td { vertical-align: top; } .tgt-edit { width: 100%; min-width: 220px; } .mini { padding: 3px 9px; font-size: .75rem; border-radius: var(--radius-xs); background: var(--panel-2); color: var(--text); border: 1px solid var(--input-border); cursor: pointer; margin: 1px; box-shadow: none; } .mini:hover { border-color: var(--primary); filter: none; } .mini.ok-btn { color: var(--success); } .acts { white-space: nowrap; position: relative; } /* T4: the alternates popover is position:fixed (editor.html places it from its trigger's rect), so the Editor table's horizontal scroller (.tablewrap) never clips it; its choices are real buttons in a list. */ .altmenu { position: fixed; z-index: 10; background: var(--elev); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); min-width: 240px; max-width: min(440px, calc(100vw - 16px)); max-height: min(60vh, calc(100vh - 16px)); overflow-y: auto; white-space: normal; } .altlist { list-style: none; margin: 0; padding: 0; } button.altitem { display: block; width: 100%; text-align: start; white-space: normal; background: none; color: var(--text); border: 0; border-bottom: 1px solid var(--border-soft); border-radius: 0; padding: 9px 11px; font-weight: 400; font-size: .85rem; cursor: pointer; } button.altitem:hover { background: var(--panel-2); filter: none; } button.altitem:focus-visible { outline-offset: -2px; background: var(--panel-2); } .concrow { padding: 5px 0; border-bottom: 1px solid var(--border-soft); font-size: .85rem; } kbd { background: var(--panel-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-xs); padding: 0 5px; font-size: .8rem; font-family: var(--mono, monospace); } /* LQA */ .bigscore { font-size: 1.7rem; font-weight: 750; } .bigscore.good { color: var(--success); } .bigscore.bad { color: var(--danger); } .lqaerr { margin: 3px 0; font-size: .85rem; } /* --- Help / docs --- */ .docs { display: grid; grid-template-columns: 190px 1fr; gap: 32px; align-items: start; } @media (max-width: 900px) { .docs { grid-template-columns: 1fr; } .docs-toc { position: static; } } .docs-toc { position: sticky; top: 80px; } .toc-title { color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } /* Punch-list: the old 2px transparent border-left that filled to a colored stripe on hover was a side-stripe affordance (the ban). Replaced with a neutral-step background tint + rounded corners — the nav hover pattern. */ .docs-toc a { display: block; color: var(--muted); text-decoration: none; padding: 4px 8px; border-radius: var(--radius-xs); font-size: .85rem; transition: background var(--motion-fast), color var(--motion-fast); } .docs-toc a:hover { color: var(--text); background: var(--panel-2); } /* Scroll-spy active state (tocspy.js): the current section's link takes the side-nav active look — subtle gray fill, 600 weight, NO side-stripe. Purely a JS-driven `.on` toggle; with JS off the TOC is hover-only exactly as before. */ .docs-toc a.on { background: var(--primary-soft); color: var(--primary-2); font-weight: 600; } .docs-body { max-width: 760px; } .doc-section { margin-bottom: 34px; scroll-margin-top: 80px; } .doc-section h1 { margin-top: 0; } .doc-section h2 { border-bottom: 1px solid var(--border-soft); padding-bottom: 8px; margin-bottom: 12px; } .doc-list { padding-left: 20px; } .doc-list li { margin: 7px 0; } pre.code { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; overflow-x: auto; font-size: .84rem; line-height: 1.5; color: var(--text-dim); white-space: pre; font-family: var(--mono, monospace); } .table.api td { vertical-align: middle; } /* Literal-caps chips (GET/POST) join the Label/badge scale: 12px floor, +0.05em caps tracking (was 10.9px — literal capitals dodge a text-transform grep). */ .method { display: inline-block; white-space: nowrap; font-size: .75rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-xs); letter-spacing: .05em; } .method.get { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); } .method.post { background: var(--primary-soft); color: var(--primary-2); border: 1px solid var(--primary-border); } /* The keys/Delta group is the first to use verbs beyond GET/POST. PUT and PATCH read as writes (the POST treatment); DELETE gets the danger palette, because a reader scanning a table of forty rows should be able to spot the destructive one without reading it. */ .method.put, .method.patch { background: var(--primary-soft); color: var(--primary-2); border: 1px solid var(--primary-border); } .method.delete { background: var(--bg-2); color: var(--danger); border: 1px solid var(--danger-border); } /* --- key grid: two-column shell (rail + keys) --- Follows the .docs / .docs-toc rail+content pattern: a narrow left rail (Filter/Translate/Add-a-key/Export/Import/Key-settings/Ask) sticky beside a scrolling right column of key cards. Collapses to one column, rail on top, at the same 900px breakpoint as .grid2/.docs. The rail itself can run taller than the viewport (many cards, most gated open) — overflow-y:auto + a max-height keep it from being clipped or pushing the sticky position off past the viewport bottom. */ .keys-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-5); align-items: start; } .keys-rail { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; padding-right: 2px; } .keys-main { min-width: 0; } @media (max-width: 900px) { .keys-layout { grid-template-columns: 1fr; } .keys-rail { position: static; max-height: none; overflow: visible; top: auto; } } /* Per-key cards replacing the old matrix table (issue #48). Each key is one compact unit: name/badges, the source line, one block per target locale, then actions — dense stacking for the 100+-key pages these pages usually are. `.plural-line` is the #48 fix: every plural category (base AND each target locale) gets its own block-level line instead of flowing as inline `.rowform` siblings in one cell — `.rowform` itself stays display:inline (style.css above), unchanged for the 7 other templates that rely on it. */ .keycards { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 22px; } .keycard { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); padding: var(--space-3) var(--space-4); } .keycard-head { margin-bottom: 6px; } .keycard-head .muted.small { margin-top: 2px; } .keycard-locale { padding: 7px 0; border-top: 1px solid var(--border-soft); } .keycard-source { border-top: none; padding-top: 2px; } .loc-label { font-weight: 600; letter-spacing: .04em; font-size: .72rem; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .plural-values { display: flex; flex-direction: column; gap: 6px; } .plural-line { display: block; overflow-wrap: anywhere; } .plural-line .rowform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .plural-line .rowform input[type="text"] { flex: 1 1 auto; min-width: 120px; width: auto; } .keycard-actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); } .keycard-actions .form label { max-width: none; } /* Live progress for the runs a Translate just launched (issue #47), at the top of the keys column. One row per run; a FAILED run's step error is rendered below its row (issue #44's silent-failure surface) and stays put -- the widget deliberately does NOT auto-reload past a failure. */ .runstrip { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); } .runstrip-title { margin: 0 0 8px; font-size: .9rem; } .runstrip-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; border-top: 1px solid var(--border-soft); } .runstrip-row:first-of-type { border-top: none; } .runstrip-locale { font-weight: 600; min-width: 68px; } .runstrip-state { font-size: .78rem; letter-spacing: .03em; } .runstrip-row[data-run-status="failed"] .runstrip-state { color: var(--danger); font-weight: 600; } .runstrip-error { flex: 1 1 100%; font-size: .8rem; overflow-wrap: anywhere; } .runstrip-error[hidden] { display: none; } .runstrip-foot { margin: 8px 0 0; } /* F9: Export / Import / Key settings collapse behind a default-closed
in the rail (project_keys.html) -- without it the rail can run ~2500-3000px tall with everything open, burying Export/Import/Key settings/ Ask past a max-height scroll container. Filter/Translate/Add a Key stay always-open. These already sit inside a `.card` box, so the chrome is just the summary + a disclosure arrow, not another nested box; the summary wraps the untouched `

` so it keeps the exact card-heading look. */ .rail-collapse { margin: 0; } .rail-collapse > summary { list-style: none; cursor: pointer; } .rail-collapse > summary::-webkit-details-marker { display: none; } .rail-collapse > summary::before { content: "▸"; content: "▸" / ""; display: inline-block; width: 1em; color: var(--muted); font-size: .8em; transition: transform var(--motion-fast); } .rail-collapse[open] > summary::before { transform: rotate(90deg); } .rail-collapse > summary h2 { display: inline; } .rail-collapse > *:not(summary) { margin-top: var(--space-3); } /* --- auth pages --- */ .authbody { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--bg); } .auth-title { font-size: 1.125rem; margin: 8px 0 4px; } .rowform .btn-small { min-height: 24px; min-width: 24px; } .authcard { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); } /* Auth-screen wordmark = Display role (DESIGN.md §3: "page titles and the auth-screen wordmark"): 24px/600 Public Sans. */ .brand-big { display: flex; align-items: center; gap: 10px; font-size: var(--font-size-title); font-weight: 600; letter-spacing: var(--display-tracking); line-height: 1.2; margin-bottom: 6px; } .brand-big .mark { width: 32px; height: 32px; border-radius: 9px; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; } /* toggles */ .toggle { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); color: var(--text) !important; } .toggle:last-child { border-bottom: none; } .toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; } .toggle span { font-size: .9rem; font-weight: 400; } .rowform { display: inline; } .rowform select { background: var(--panel-2); border: 1px solid var(--input-border); border-radius: var(--radius-xs); color: var(--text); padding: 3px 6px; font-size: .82rem; } .linkbox { width: 100%; min-width: 280px; background: var(--bg-2); border: 1px solid var(--input-border); border-radius: var(--radius-xs); color: var(--primary-2); padding: 5px 8px; font-size: .78rem; font-family: var(--mono, monospace); } .sep { border: none; border-top: 1px solid var(--border-soft); margin: 16px 0; } /* per-project mini stats */ .stats { display: flex; flex-wrap: wrap; gap: 14px; } .stat { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 18px; min-width: 92px; text-align: center; } .statnum { display: block; font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .statlbl { color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } /* ---- profile dropdown (topbar) ---- */ .usermenu { position: relative; } .usermenu > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 4px 8px 4px 4px; border: 1px solid var(--input-border); border-radius: 999px; background: var(--panel-2); transition: border-color var(--motion-fast), background var(--motion-fast); user-select: none; } .usermenu > summary::-webkit-details-marker { display: none; } .usermenu > summary:hover { border-color: var(--primary); } .usermenu[open] > summary { border-color: var(--primary); background: var(--panel); } .um-id { display: flex; flex-direction: column; line-height: 1.15; max-width: 160px; } .um-name { font-size: .82rem; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Role is a VALUE, not a label — a tracked-uppercase micro-caption on a value is the eyebrow tell, and DESIGN.md §3 sanctions uppercase only for the Label role (headers / group headings / stat labels). Demoted to normal-case Ash. */ .um-role { font-size: .72rem; color: var(--muted); } .um-caret { color: var(--muted); font-size: .7rem; transition: transform var(--motion-fast); } .usermenu[open] .um-caret { transform: rotate(180deg); } .um-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 230px; background: var(--elev); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; animation: um-pop .12s ease; } @keyframes um-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .um-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; } .um-head .um-name { white-space: normal; } .um-panel a { display: block; padding: 8px 10px; border-radius: var(--radius-xs); color: var(--text-dim); text-decoration: none; font-size: .86rem; transition: background var(--motion-fast), color var(--motion-fast); } .um-panel a:hover { background: var(--panel-2); color: var(--text); } /* #251: Sign out is a POST form; its menu item is a button styled like the links. */ .um-form { margin: 0; } .um-panel button.um-item { display: block; width: 100%; text-align: left; padding: 8px 10px; margin: 0; border: 0; border-radius: var(--radius-xs); background: none; box-shadow: none; font: inherit; font-size: .86rem; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); } .um-panel button.um-item:hover { background: var(--panel-2); } .um-sep { border-top: 1px solid var(--border-soft); margin: 6px 0; } .um-danger { color: var(--danger) !important; } .um-danger:hover { background: rgba(240, 121, 107, .10) !important; } /* ---- dashboard ---- */ /* Dashboard summary is the landing screen's glanceable status line (Principle 1: control made visible) — body size (not an off-scale .92rem) and readable dim ink, not muted-tiny; the .accent/.warn-text spans inside still carry the in-progress / awaiting-review emphasis. */ .dash-summary { font-size: var(--font-size-body); color: var(--text-dim); } .accent { color: var(--primary-2); } .warn-text { color: var(--warn); } .projects-table .proj-name { font-weight: 600; color: var(--text); text-decoration: none; } .projects-table .proj-name:hover { color: var(--primary-2); } .projects-table td { vertical-align: middle; } .prog-cell { min-width: 150px; } /* ---- app-wide warning banner (e.g. mock MT fallback) ---- */ .warnbar { margin: 12px 24px 0; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(230, 180, 85, .10); border: 1px solid rgba(230, 180, 85, .45); color: var(--warn, #e6b455); font-size: .9rem; } .warnbar a { color: inherit; font-weight: 600; } /* spend-cap kill switch tripped: vermilion, not amber (harder stop than the mock warning) — the warning hue stays apart from the accent. */ .warnbar.spendbar { background: rgba(240, 121, 107, .12); border-color: rgba(240, 121, 107, .55); color: var(--danger, #f0796b); } /* ---- error page ---- */ .errcode { font-size: 2.4rem; margin: 10px 0 6px; color: var(--text); } /* ---- pagination ---- */ .pager { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: .9rem; } .pager a { color: var(--primary-2); text-decoration: none; } .pager a:hover { text-decoration: underline; } .pager .muted { margin: 0 4px; } /* ---- background-job progress ---- */ .job-watch { margin: 10px 0 4px; max-width: 480px; } .job-watch .prog { margin-bottom: 4px; } .job-watch.job-failed .job-label { color: var(--danger); } /* green status badge (Security page: OIDC ready) */ .badge.ok { --sig: var(--success); --sig-ink: var(--success); } /* --- language picker (P2, item 1) --- */ .lp-fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 10px 0; } .lp-fieldset legend { padding: 0 6px; font-weight: 600; font-size: .9rem; } .langpicker { margin-top: 6px; } .lp-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .lp-search { flex: 1 1 200px; min-width: 160px; } .lp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .lp-chip { display: inline-flex; align-items: center; gap: 2px; } .lp-chip-x { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; box-shadow: none; } .lp-chip-x:hover { color: var(--danger); } .lp-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; background: var(--panel-2); /* Compact multi-column checklist (Phrase/Lokalise convention): each option is one short row, flowing into as many columns as fit. */ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 10px; align-content: start; } .lp-list.lp-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 2px 12px; max-height: 420px; } /* `.form label` (column layout for regular form fields) outspecifies `.lp-opt` and was stacking each checkbox ABOVE its centered name — the exact anti- pattern. Re-assert the row layout at equal-or-higher specificity. */ .lp-opt, .form label.lp-opt, .inline-form label.lp-opt { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 3px 6px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; text-align: left; min-width: 0; } .lp-opt:hover { background: var(--panel); } .lp-opt input { margin: 0; flex: 0 0 auto; } .lp-name { flex: 1; color: var(--text); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-code { color: var(--text-dim); font-size: .78rem; font-family: var(--data-font, monospace); } /* --- New-project popout (R2 item 2) --------------------------------------- */ .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .card-head h2 { margin: 0; } dialog.modal { border: none; border-radius: var(--radius, 10px); padding: 0; background: transparent; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); } dialog.modal::backdrop { background: rgba(0, 0, 0, .55); } dialog.modal .modal-card { margin: 0; max-height: calc(100vh - 48px); overflow-y: auto; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .modal-head h2 { margin: 0; } /* --- Report builder (R2-1) --- */ .report-form { margin-top: 12px; } .report-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .report-fields label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--text-dim); } .report-fields select, .report-fields input { padding: 6px 8px; } .report-actions { margin-top: 14px; } .report-results { margin-top: 18px; } .report-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .tablewrap { overflow-x: auto; } .report-table { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; } .report-table th, .report-table td { border: 1px solid var(--border); padding: 6px 9px; text-align: right; white-space: nowrap; } .report-table th:first-child, .report-table td:first-child { text-align: left; } .report-table thead th { background: var(--bg-2); } .report-table tfoot td { background: var(--bg-2); font-weight: 600; } /* --- per-pair provider matrix (Phase 2) --- */ label.inline { display: block; margin: 4px 0; font-weight: normal; } .pp-matrix { border-collapse: collapse; margin: 8px 0; } .pp-matrix td { padding: 3px 10px 3px 0; vertical-align: middle; } .pp-matrix td:first-child { font-family: var(--data-font, monospace); white-space: nowrap; } /* ============================================================ Design-system foundation additions (visual-refresh wave 1) All rules below use existing tokens only; append-only. ============================================================ */ /* --- specificity guard ----------------------------------------------------- The now-global `input:not(...)` text-control rule computes to a high specificity (five :not([attr]) components). These two pre-existing controls carried their own look BEFORE the rule went global and must keep winning, so they are re-asserted with !important (idiomatic in this file). Without this, the top-bar search would lose its pill shape and the report builder its compact field padding. */ .topsearch { background: var(--panel) !important; border-radius: 999px !important; padding: 8px 14px !important; font-size: .85rem !important; } .report-fields select, .report-fields input { padding: 6px 8px !important; } /* Token/key/URL readouts (API keys, invite links): keep the compact monospace blue look. Outside a .form the global rule would otherwise flip them to proportional near-white (review finding); this also makes in-form linkboxes match the design intent everywhere. */ input.linkbox { font-family: var(--mono, monospace) !important; color: var(--primary-2) !important; padding: 5px 8px !important; font-size: .78rem !important; border-radius: var(--radius-xs) !important; } /* --- keyboard focus ring --------------------------------------------------- Unstyled controls previously lost any focus affordance. A single :focus-visible ring covers links, buttons, summaries and every form control (including the native ones excluded from the text-control rule). */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); } /* --- checkbox row ---------------------------------------------------------- Real `.checkbox` class: box first, label text after, on one row. Mirrors the `.toggle` row-override mechanics (re-asserting row layout with !important so it beats `.form label`'s flex-column), but without the settings-row border. Muted small hints may follow the text. */ .checkbox { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; color: var(--text) !important; font-weight: 400; cursor: pointer; } .checkbox input { width: auto; height: auto; flex: 0 0 auto; margin: 0; accent-color: var(--primary); } .checkbox small, .checkbox .hint { color: var(--muted); font-weight: 400; } /* --- disclosure (details / summary) ---------------------------------------- Quiet default styling for advanced/secondary disclosures (pages that want a button-like summary keep using `.btnlink` on the ). */ /* Scoped past the two
with bespoke chrome: `.usermenu` (profile dropdown, base.html) and `.inline-edit` (languages.html table-cell popover whose summary is already a `.btnlink`). Everything else gets the quiet box. */ details:not(.usermenu):not(.inline-edit):not(.rail-collapse) { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); padding: 0; margin: 8px 0; } details:not(.usermenu):not(.inline-edit):not(.rail-collapse) > summary { list-style: none; cursor: pointer; padding: 9px 13px; font-size: .88rem; color: var(--text); display: flex; align-items: center; gap: 8px; transition: background var(--motion-fast); } details:not(.usermenu):not(.inline-edit):not(.rail-collapse) > summary::-webkit-details-marker { display: none; } details:not(.usermenu):not(.inline-edit):not(.rail-collapse) > summary::before { content: "▸"; content: "▸" / ""; color: var(--muted); font-size: .8em; transition: transform var(--motion-fast); } details:not(.usermenu):not(.inline-edit):not(.rail-collapse)[open] > summary::before { transform: rotate(90deg); } details:not(.usermenu):not(.inline-edit):not(.rail-collapse) > summary:hover { background: var(--panel); } details:not(.usermenu):not(.inline-edit):not(.rail-collapse)[open] > summary { border-bottom: 1px solid var(--border-soft); } details:not(.usermenu):not(.inline-edit):not(.rail-collapse) > *:not(summary) { padding: 0 13px 12px; } /* Progressive-disclosure fieldsets (workflow-builder Add-a-step, Wave 3): the
box is the frame, so a wrapped .lp-fieldset drops its own border/margin/padding to avoid a double box (the details rule above pads it). */ details.adv > .lp-fieldset { border: none; margin: 0; padding: 0; } /* --- file input ------------------------------------------------------------ */ input[type="file"] { background: var(--bg-2); border: 1px solid var(--input-border); border-radius: var(--radius-sm); color: var(--text-dim); padding: 7px 10px; font-size: .88rem; } input[type="file"]::file-selector-button { background: var(--panel-2); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 5px 12px; margin-right: 10px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: border-color var(--motion-fast); } input[type="file"]::file-selector-button:hover { border-color: var(--primary); } /* --- select[multiple] (fallback styling; wave 2 replaces the main offender) --- */ select[multiple] { padding: 4px; background: var(--bg-2); border: 1px solid var(--input-border); border-radius: var(--radius-sm); } select[multiple] option { padding: 4px 8px; border-radius: 4px; } /* --- truncation / long-name containment ------------------------------------ */ select { max-width: 100%; } .trunc { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .inline-form select { max-width: 34ch; text-overflow: ellipsis; } /* --- anchors that render as buttons ---------------------------------------- `.btnlink` already covers many; these aliases let a plain match the ghost-button look (the compound rules above are `button.`-prefixed and don't reach anchors). */ a.btn, a.ghost, a.btn-secondary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--panel-2); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 10px 17px; font-weight: 600; font-size: .9rem; cursor: pointer; box-shadow: none; transition: border-color var(--motion-fast), filter var(--motion-fast); } a.btn:hover, a.ghost:hover, a.btn-secondary:hover { border-color: var(--primary); filter: none; } a.btn.small, a.ghost.small, a.btn-secondary.small { padding: 6px 12px; font-size: .82rem; } /* --- key/value description list (customer overview) ------------------------- */ .kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: .88rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--text); } /* ============================================================================ Wave 2B — long-name overflow guard, empty states, narrow utility (append-only; existing tokens only; do not edit rules above this point) ============================================================================ */ /* --- destructive buttons: a STANDALONE