/* ========================================================================= RANK CONSOLE — design system Pure CSS. No preprocessor, no @import, no external assets. Identity: monospace is the characterful face. Every heading, label, eyebrow, number and data cell is mono. Sans is reserved for prose. Theme model (three states — all three are required): 1. bare :root ................................ complete LIGHT palette 2. @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) ......... system-dark 3. :root[data-theme="dark"] .................. explicit dark The default "system" setting stamps no attribute on , so any color defined ONLY inside [data-theme] would never apply. Tokens are therefore fully declared in (1) and only *redefined* in (2) and (3). ========================================================================= */ /* ------------------------------------------------------------------------- 1. TOKENS — LIGHT (complete palette) ------------------------------------------------------------------------- */ :root { /* surfaces */ --ground: #FBFAF7; --panel: #FFFFFF; --panel-2: #F3F1EC; --line: #E2DFD7; --line-soft: #EDEAE3; /* text */ --ink: #1C1B18; --ink-2: #45433D; --muted: #6E6B63; /* brand accent — decoration + interaction only, never data meaning */ --signal: #A9701A; --signal-soft: rgba(169, 112, 26, .10); /* semantic — data meaning only, never decoration */ --up: #1baf7a; --down: #e34948; --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; /* chrome */ --grid: #E7E4DC; --term-bg: #1B1B20; --term-ink: #D8D5CC; /* select chevron, theme-aware (token so the dark blocks stay token-only) */ --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%236E6B63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E"); /* typography */ --f-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; --f-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* spacing — 4px scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; /* radii */ --r-sm: 4px; --r-md: 7px; --r-lg: 11px; /* semantic tints — the wash behind an --up/--down statement */ --up-soft: rgba(27, 175, 122, .10); --down-soft: rgba(227, 73, 72, .10); /* overlay scrim (command palette / future overlays) */ --scrim: rgba(20, 19, 17, .52); /* scrollbar thumb — thin bars on panel surfaces */ --scroll-thumb: #D9D5CB; /* derived, non-palette */ --shadow-1: 0 1px 2px rgba(28, 27, 24, .05); --shadow-2: 0 8px 28px rgba(28, 27, 24, .10); --shadow-3: 0 20px 56px rgba(28, 27, 24, .20); --sidebar-w: 220px; --main-max: 1240px; } /* ------------------------------------------------------------------------- 2. TOKENS — DARK, system preference (no attribute stamped) ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #131317; --panel: #1B1B20; --panel-2: #222228; --line: #32323A; --line-soft: #26262D; --ink: #EDEAE3; --ink-2: #C4C1B9; --muted: #8C8A82; --signal: #D89B3C; --signal-soft: rgba(216, 155, 60, .12); --up: #199e70; --down: #e66767; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --grid: #2B2B33; --term-bg: #0E0E12; --term-ink: #C9C6BD; --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%238C8A82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E"); --up-soft: rgba(25, 158, 112, .16); --down-soft: rgba(230, 103, 103, .16); --scrim: rgba(6, 6, 9, .62); --scroll-thumb: #3A3A44; --shadow-1: 0 1px 2px rgba(0, 0, 0, .40); --shadow-2: 0 10px 32px rgba(0, 0, 0, .50); --shadow-3: 0 24px 64px rgba(0, 0, 0, .64); } } /* ------------------------------------------------------------------------- 3. TOKENS — DARK, explicit user choice (wins over system light) ------------------------------------------------------------------------- */ :root[data-theme="dark"] { --ground: #131317; --panel: #1B1B20; --panel-2: #222228; --line: #32323A; --line-soft: #26262D; --ink: #EDEAE3; --ink-2: #C4C1B9; --muted: #8C8A82; --signal: #D89B3C; --signal-soft: rgba(216, 155, 60, .12); --up: #199e70; --down: #e66767; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --grid: #2B2B33; --term-bg: #0E0E12; --term-ink: #C9C6BD; --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%238C8A82' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E"); --up-soft: rgba(25, 158, 112, .16); --down-soft: rgba(230, 103, 103, .16); --scrim: rgba(6, 6, 9, .62); --scroll-thumb: #3A3A44; --shadow-1: 0 1px 2px rgba(0, 0, 0, .40); --shadow-2: 0 10px 32px rgba(0, 0, 0, .50); --shadow-3: 0 24px 64px rgba(0, 0, 0, .64); } /* ------------------------------------------------------------------------- RESET / BASE ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; color-scheme: light dark; } body { margin: 0; min-height: 100vh; background: var(--ground); color: var(--ink); font-family: var(--f-sans); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Mono is the characterful face: all headings, labels, eyebrows, data. */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--f-mono); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); } h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 13.5px; } h4, h5, h6 { font-size: 12px; } p { margin: 0; } a { color: var(--signal); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease, color .15s ease; } a:hover { border-bottom-color: var(--signal); } code, kbd, samp, pre { font-family: var(--f-mono); font-size: .92em; } code { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 1px 5px; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; } ::selection { background: var(--signal-soft); color: var(--ink); } /* Universal focus treatment. */ :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--r-sm); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* ------------------------------------------------------------------------- APP SHELL ------------------------------------------------------------------------- */ .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } /* --- sidebar --- */ .sidebar { grid-column: 1; position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .sidebar-brand::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--signal); } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sidebar-nav a { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid transparent; border-radius: var(--r-md); font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .01em; color: var(--muted); white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .sidebar-nav a:hover { background: var(--panel-2); color: var(--ink); } .sidebar-nav a.active { background: var(--signal-soft); border-color: var(--signal); color: var(--signal); font-weight: 600; } .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); font-family: var(--f-mono); font-size: 11px; color: var(--muted); } /* --- main --- */ .main { grid-column: 2; min-width: 0; width: 100%; max-width: var(--main-max); margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5); } .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); } .page-title { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; font-family: var(--f-mono); font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); } /* eyebrow / subtitle inside the title block */ .page-title .eyebrow { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .page-title .sub { font-family: var(--f-sans); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); } .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } /* Standalone eyebrow utility. */ .eyebrow { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ------------------------------------------------------------------------- RESPONSIVE SHELL — sidebar becomes a horizontal scrolling top bar ------------------------------------------------------------------------- */ @media (max-width: 900px) { .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .sidebar { grid-column: 1; grid-row: 1; position: sticky; top: 0; z-index: 40; height: auto; flex-direction: row; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .sidebar-brand { flex: none; } .sidebar-nav { flex-direction: row; align-items: center; gap: var(--sp-1); flex: 1 1 auto; } .sidebar-nav a { flex: none; } .sidebar-foot { margin-top: 0; flex: none; flex-direction: row; align-items: center; gap: var(--sp-3); } .main { grid-column: 1; grid-row: 2; padding: var(--sp-5) var(--sp-4) var(--sp-7); } } /* ------------------------------------------------------------------------- CARD ------------------------------------------------------------------------- */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; } .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--panel-2); border-bottom: 1px solid var(--line); } .card-title { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); line-height: 1.3; } /* Density: sp-4 all round read as empty with little data. Tightened to a 12/14 rhythm — still comfortable, no longer cavernous. */ .card-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); } /* Prose inside a card body — sans, no margins (the flex gap does spacing). */ .card-body > p { font-family: var(--f-sans); font-size: 13.5px; line-height: 1.65; color: var(--ink-2); } .card-body > p.muted { color: var(--muted); } /* A card body that hosts only a table should not double up on padding. */ .card-body.flush { padding: 0; gap: 0; } /* ------------------------------------------------------------------------- TILES (stat / KPI) ------------------------------------------------------------------------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); } .tile { display: flex; flex-direction: column; gap: 5px; padding: 10px var(--sp-3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; } .tile .k { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); line-height: 1.3; } .tile .n { font-family: var(--f-mono); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; } .tile .n .unit { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 2px; } .tile .foot { font-family: var(--f-mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* --- delta --- */ .delta { display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .delta.up { color: var(--up); } .delta.down { color: var(--down); } .delta.up::before { content: "\25B2"; font-size: 8px; } .delta.down::before { content: "\25BC"; font-size: 8px; } /* ------------------------------------------------------------------------- BUTTONS ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--ink); font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.3; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease; } .btn:hover:not(:disabled) { background: var(--panel-2); border-color: var(--muted); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn-primary { background: var(--signal); border-color: var(--signal); color: var(--panel); } .btn-primary:hover:not(:disabled) { background: var(--signal); border-color: var(--signal); filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover:not(:disabled) { background: var(--panel-2); border-color: var(--line); color: var(--ink); } .btn-danger { background: transparent; border-color: var(--down); color: var(--down); } .btn-danger:hover:not(:disabled) { background: var(--down); border-color: var(--down); color: var(--panel); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; } .btn-sm { padding: 4px 9px; font-size: 11px; border-radius: var(--r-sm); } .btn-block { width: 100%; } /* ------------------------------------------------------------------------- FORMS ------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; flex: 1 1 auto; } .field label { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.3; } .field .hint { font-family: var(--f-mono); font-size: 10.5px; line-height: 1.5; color: var(--muted); } .field .hint.bad { color: var(--down); } input, select, textarea { width: 100%; min-width: 0; padding: 8px 11px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); font-family: var(--f-mono); font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } textarea { min-height: 96px; resize: vertical; line-height: 1.65; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; } input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--muted); } input:focus, select:focus, textarea:focus { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); background: var(--panel); outline: none; } /* Keyboard users still get the outline ring on top. */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; background: var(--panel-2); } input[type="checkbox"], input[type="radio"] { width: auto; min-width: 0; accent-color: var(--signal); cursor: pointer; } select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px; background-image: var(--arrow); background-repeat: no-repeat; background-position: right 11px center; } /* Native option lists need explicit colors on some platforms. */ option { background: var(--panel); color: var(--ink); } fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); margin: 0; } legend { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 var(--sp-2); } /* ------------------------------------------------------------------------- LAYOUT HELPERS ------------------------------------------------------------------------- */ .row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); min-width: 0; } .row.tight { gap: var(--sp-2); } .row.center { align-items: center; } .row.between { justify-content: space-between; } .two, .three { display: grid; gap: var(--sp-3); min-width: 0; } .two { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .three { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .stack { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } .spacer { flex: 1 1 auto; } /* ------------------------------------------------------------------------- TABLE ------------------------------------------------------------------------- */ .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); } /* A table-wrap sitting directly in a flush card body owns no extra radius. */ .card-body.flush > .table-wrap { border-radius: 0; } table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5; } th { position: sticky; top: 0; z-index: 1; padding: var(--sp-2) var(--sp-3); background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; } /* --- sortable headers --------------------------------------------------- .sortable marks a header as clickable; aria-sort carries the state and draws the arrow, so the affordance can never drift from the a11y value. */ th.sortable { cursor: pointer; user-select: none; transition: background-color .12s ease, color .12s ease; } th.sortable:hover { background: var(--signal-soft); color: var(--ink-2); } th.sortable:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; } th[aria-sort] { color: var(--ink); background: var(--panel-2); } th[aria-sort]::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: 1px; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; } th[aria-sort="ascending"]::after { border-bottom: 4.5px solid var(--signal); } th[aria-sort="descending"]::after { border-top: 4.5px solid var(--signal); } th[aria-sort="none"]::after { border-bottom: 4.5px solid var(--muted); opacity: .35; } /* Right-aligned numeric headers keep the arrow snug to the label. */ th.num[aria-sort]::after { margin-left: 5px; } td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); color: var(--ink-2); font-variant-numeric: tabular-nums; vertical-align: middle; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.strong { color: var(--ink); font-weight: 600; } td.nowrap { white-space: nowrap; } tbody tr { transition: background-color .12s ease; } tbody tr:hover { background: var(--signal-soft); } tbody tr:last-child td { border-bottom: 0; } caption { caption-side: bottom; padding: var(--sp-2) var(--sp-3); font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); text-align: left; } /* ------------------------------------------------------------------------- PILLS (state chips) + CHIP (tag) ------------------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6; color: var(--muted); white-space: nowrap; } .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .pill.ok { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); } .pill.bad { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); } .pill.hold { color: var(--s2); border-color: color-mix(in srgb, var(--s2) 45%, transparent); } .pill.idle { color: var(--muted); border-color: var(--line); } .chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px 7px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); font-family: var(--f-mono); font-size: 11px; line-height: 1.6; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .chip b { color: var(--ink); font-weight: 600; } /* ------------------------------------------------------------------------- PROGRESS ------------------------------------------------------------------------- */ .progress { width: 100%; height: 6px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 999px; overflow: hidden; } .progress > span { display: block; height: 100%; width: 0; background: var(--signal); border-radius: 999px; transition: width .35s ease; } /* ------------------------------------------------------------------------- FUNNEL ------------------------------------------------------------------------- */ .funnel { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; } .fr { display: grid; grid-template-columns: 150px 1fr 90px; align-items: center; gap: var(--sp-3); min-width: 0; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); } .fr > .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; font-weight: 600; } .fr .track { position: relative; height: 16px; min-width: 0; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; } .fr .fill { display: block; height: 100%; width: 0; background: var(--s1); border-radius: calc(var(--r-sm) - 1px); transition: width .4s ease; } .fr .fill.drop { background: var(--down); } .fr .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; } @media (max-width: 620px) { .fr { grid-template-columns: 1fr 70px; grid-template-areas: "label val" "track track"; row-gap: var(--sp-1); } .fr > .label { grid-area: label; } .fr .track { grid-area: track; } .fr .val { grid-area: val; } } /* ------------------------------------------------------------------------- TERMINAL LOG ------------------------------------------------------------------------- */ .term { background: var(--term-bg); color: var(--term-ink); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); font-family: var(--f-mono); font-size: 11.5px; line-height: 1.75; font-variant-numeric: tabular-nums; overflow: auto; max-height: 340px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; white-space: pre-wrap; word-break: break-word; scrollbar-width: thin; } .term > div { min-height: 1em; } .term .t { color: var(--muted); } .term .g { color: var(--up); } .term .a { color: var(--signal); } .term .r { color: var(--down); } /* ------------------------------------------------------------------------- EMPTY STATE ------------------------------------------------------------------------- */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-7) var(--sp-4); text-align: center; border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--panel-2); font-family: var(--f-mono); font-size: 12px; line-height: 1.6; color: var(--muted); } .empty strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); } /* ------------------------------------------------------------------------- TOASTS + BANNERS ------------------------------------------------------------------------- */ .toast { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 90; max-width: min(380px, calc(100vw - var(--sp-6))); display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: var(--r-md); box-shadow: var(--shadow-2); font-family: var(--f-mono); font-size: 12px; line-height: 1.55; color: var(--ink-2); animation: toast-in .22s ease-out; } .toast.err { border-left-color: var(--down); color: var(--down); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .banner { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--r-md); font-family: var(--f-mono); font-size: 12px; line-height: 1.6; color: var(--ink-2); } .banner b { color: var(--ink); font-weight: 600; } .banner.warn { border-left-color: var(--signal); background: var(--signal-soft); color: var(--ink-2); } .banner.err { border-left-color: var(--down); background: color-mix(in srgb, var(--down) 8%, transparent); color: var(--down); } .banner.err b { color: var(--down); } /* ------------------------------------------------------------------------- SPARKLINE ------------------------------------------------------------------------- */ .spark { display: block; width: 100%; height: 34px; max-width: 100%; overflow: visible; } .spark path, .spark polyline { fill: none; stroke: var(--s1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .spark .area { fill: var(--signal-soft); stroke: none; } .spark .axis { stroke: var(--grid); stroke-width: 1; } .spark .dot { fill: var(--s1); stroke: none; } .spark.up path, .spark.up polyline { stroke: var(--up); } .spark.up .dot { fill: var(--up); } .spark.down path, .spark.down polyline { stroke: var(--down); } .spark.down .dot { fill: var(--down); } /* inline variant that sits next to a number */ .spark.inline { display: inline-block; width: 72px; height: 18px; vertical-align: middle; } /* ------------------------------------------------------------------------- MODAL ------------------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--sp-4); background: rgba(20, 19, 17, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade-in .16s ease-out; } .modal { width: 100%; max-width: 540px; max-height: calc(100vh - var(--sp-7)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; animation: modal-in .18s ease-out; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--panel-2); border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } .modal-body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); overflow-y: auto; font-family: var(--f-sans); font-size: 13.5px; line-height: 1.65; color: var(--ink-2); } .modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--panel-2); border-top: 1px solid var(--line); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ------------------------------------------------------------------------- SKELETON ------------------------------------------------------------------------- */ .skeleton { display: block; width: 100%; min-height: 1em; border-radius: var(--r-sm); background-color: var(--panel-2); background-image: linear-gradient( 90deg, transparent 0%, var(--line-soft) 40%, var(--line) 50%, var(--line-soft) 60%, transparent 100% ); background-size: 220% 100%; background-repeat: no-repeat; animation: shimmer 1.4s linear infinite; color: transparent; user-select: none; pointer-events: none; } .skeleton.line { height: 12px; } .skeleton.title { height: 20px; width: 45%; } .skeleton.block { height: 90px; } @keyframes shimmer { from { background-position: 140% 0; } to { background-position: -140% 0; } } /* ------------------------------------------------------------------------- THEME TOGGLE ------------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 5px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .theme-toggle:hover { background: var(--signal-soft); border-color: var(--signal); color: var(--signal); } /* ------------------------------------------------------------------------- SMALL UTILITIES ------------------------------------------------------------------------- */ .mono { font-family: var(--f-mono); } .num { font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .prose { font-family: var(--f-sans); line-height: 1.65; color: var(--ink-2); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- REDUCED MOTION — the only place !important is allowed ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } } /* ── Collapsible advanced sections ───────────────────────────────────────── Used to keep uncommon tuning fields out of the default form view. */ details.field > summary { cursor: pointer; list-style: none; padding: 8px 0; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; user-select: none; } details.field > summary::-webkit-details-marker { display: none; } details.field > summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--signal); transition: transform .15s ease; } details.field[open] > summary::before { transform: rotate(90deg); } details.field > summary:hover { color: var(--ink); } /* ========================================================================= PART 2 — EXTENDED SYSTEM Everything below is additive. No name above is renamed or removed. ========================================================================= */ /* ------------------------------------------------------------------------- MOTION — opt-in entrance .animate-in is the ONLY way a .card or .tile animates. Views opt in; nothing moves by default, so a data refresh never re-animates the page. ------------------------------------------------------------------------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .animate-in, .card.animate-in, .tile.animate-in { animation: fadeUp .18s ease-out both; } /* Stagger helper: an .animate-in parent's children cascade in. */ .animate-in > .card, .animate-in > .tile { animation: fadeUp .18s ease-out both; } .animate-in > *:nth-child(2) { animation-delay: 30ms; } .animate-in > *:nth-child(3) { animation-delay: 60ms; } .animate-in > *:nth-child(4) { animation-delay: 90ms; } .animate-in > *:nth-child(5) { animation-delay: 120ms; } .animate-in > *:nth-child(n + 6) { animation-delay: 150ms; } /* ------------------------------------------------------------------------- THIN SCROLLBARS Firefox gets scrollbar-width; WebKit gets the explicit track/thumb. ------------------------------------------------------------------------- */ .cmdk-list, .term, .table-wrap { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--panel); } .cmdk-list::-webkit-scrollbar, .term::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 9px; height: 9px; } .cmdk-list::-webkit-scrollbar-track, .term::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track { background: var(--panel); } .cmdk-list::-webkit-scrollbar-thumb, .term::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--panel); border-radius: 999px; } .cmdk-list::-webkit-scrollbar-thumb:hover, .term::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--muted); } .cmdk-list::-webkit-scrollbar-corner, .term::-webkit-scrollbar-corner, .table-wrap::-webkit-scrollbar-corner { background: var(--panel); } /* The terminal is its own dark surface — its bar rides on --term-bg. */ .term { scrollbar-color: var(--line) var(--term-bg); } .term::-webkit-scrollbar-track, .term::-webkit-scrollbar-corner { background: var(--term-bg); } .term::-webkit-scrollbar-thumb { background: var(--line); border-color: var(--term-bg); } /* ------------------------------------------------------------------------- KEYBOARD HINT ------------------------------------------------------------------------- */ .kbd { display: inline-block; min-width: 18px; padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; line-height: 1; text-align: center; color: var(--muted); white-space: nowrap; vertical-align: middle; } /* ------------------------------------------------------------------------- COMMAND PALETTE ------------------------------------------------------------------------- */ .cmdk-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; align-items: start; padding: var(--sp-4); background: var(--scrim); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fade-in .14s ease-out; } .cmdk { width: 100%; max-width: 560px; margin-top: 14vh; display: flex; flex-direction: column; max-height: min(70vh, 560px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; animation: modal-in .16s ease-out; } .cmdk-input { width: 100%; flex: none; padding: var(--sp-4) var(--sp-5); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font-family: var(--f-mono); font-size: 16px; line-height: 1.4; } .cmdk-input:hover:not(:disabled) { border-color: var(--line); } .cmdk-input:focus { border-color: var(--line); box-shadow: none; background: transparent; outline: none; } /* The palette clips its children (overflow:hidden), so an outward-offset ring would be sheared off at the edges — the ring goes inward instead. */ .cmdk-input:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; } .cmdk-input::placeholder { color: var(--muted); opacity: .75; } .cmdk-list { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; display: flex; flex-direction: column; gap: 1px; } .cmdk-group { position: sticky; top: -6px; z-index: 1; padding: 8px 10px 5px; background: var(--panel); font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .cmdk-item { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: 9px 12px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink-2); font-family: var(--f-mono); font-size: 12.5px; line-height: 1.4; text-align: left; cursor: pointer; transition: background-color .1s ease, color .1s ease; } .cmdk-item:hover { background: var(--panel-2); color: var(--ink); } .cmdk-item:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; } .cmdk-item .icon { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; line-height: 1; } .cmdk-item .label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmdk-item .meta { flex: none; font-family: var(--f-mono); font-size: 11px; color: var(--muted); white-space: nowrap; } .cmdk-item.active { background: var(--signal-soft); box-shadow: inset 2px 0 0 var(--signal); color: var(--ink); } .cmdk-item.active .icon { color: var(--signal); } .cmdk-empty { padding: var(--sp-6) var(--sp-4); text-align: center; font-family: var(--f-mono); font-size: 12px; line-height: 1.6; color: var(--muted); } /* ------------------------------------------------------------------------- GLOBAL RUN BAR — sticky status strip at the top of .main ------------------------------------------------------------------------- */ .runbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; margin: 0 calc(var(--sp-5) * -1); padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--ink-2); } .runbar.hidden { display: none; } .runbar-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: pulse 1.6s ease-in-out infinite; } .runbar-dot.warn { background: var(--signal); } .runbar-dot.bad { background: var(--down); animation: none; } .runbar-dot.idle { background: var(--muted); animation: none; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } } .runbar-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .runbar-progress { flex: none; width: 140px; height: 4px; background: var(--panel-2); border-radius: 999px; overflow: hidden; } .runbar-progress > span { display: block; height: 100%; width: 0; background: var(--signal); border-radius: 999px; transition: width .35s ease; } .runbar-actions { flex: none; display: flex; align-items: center; gap: var(--sp-2); } /* ------------------------------------------------------------------------- ONBOARDING ------------------------------------------------------------------------- */ .onboard { max-width: 680px; margin-inline: auto; padding-block: var(--sp-7); text-align: center; } .onboard h2 { font-size: 19px; letter-spacing: -.02em; margin-bottom: var(--sp-3); } .onboard .lede { max-width: 52ch; margin-inline: auto; font-family: var(--f-sans); font-size: 13.5px; line-height: 1.65; color: var(--muted); } .onboard-steps { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); text-align: left; } .onboard-step { display: flex; align-items: flex-start; gap: var(--sp-4); min-width: 0; padding: var(--sp-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .15s ease, box-shadow .15s ease; } .onboard-step .num { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--signal-soft); color: var(--signal); font-family: var(--f-mono); font-size: 12px; font-weight: 600; line-height: 1; } .onboard-step .body { min-width: 0; } .onboard-step .body h3 { font-size: 13px; letter-spacing: .01em; margin-bottom: var(--sp-1); } .onboard-step .body p { font-family: var(--f-sans); font-size: 13px; line-height: 1.6; color: var(--muted); } .onboard-step.done { border-color: color-mix(in srgb, var(--up) 40%, transparent); } .onboard-step.done .num { background: var(--up-soft); color: var(--up); } .onboard-step.active { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } /* ------------------------------------------------------------------------- SEGMENTED CONTROL ------------------------------------------------------------------------- */ .seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; } .seg button { padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .seg button:hover:not(:disabled) { color: var(--ink); } .seg button.active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-1); } .seg button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } .seg button:disabled { opacity: .45; cursor: not-allowed; } /* ------------------------------------------------------------------------- FILTER BAR ------------------------------------------------------------------------- */ .filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-width: 0; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--sp-4); } .filterbar input[type="search"] { flex: 1 1 auto; min-width: 180px; width: auto; } .filterbar .count { margin-left: auto; flex: none; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ------------------------------------------------------------------------- HERO METRIC ------------------------------------------------------------------------- */ .hero { display: grid; gap: var(--sp-4); min-width: 0; padding: var(--sp-5); background: linear-gradient(160deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: var(--r-lg); } .hero .k { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.3; } .hero .n { font-family: var(--f-mono); font-size: clamp(38px, 6vw, 56px); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .hero .n .unit { font-size: .38em; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 4px; } .hero .sub { font-family: var(--f-sans); font-size: 13px; line-height: 1.6; color: var(--muted); } .hero-spark { display: block; width: 100%; min-height: 60px; max-width: 100%; } /* ------------------------------------------------------------------------- TIMELINE ------------------------------------------------------------------------- */ .timeline { position: relative; display: grid; gap: 0; min-width: 0; padding-left: var(--sp-5); } .timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 1px; background: var(--line); } .timeline-item { position: relative; min-width: 0; padding: 8px 0; } .timeline-item .dot { position: absolute; left: -22px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 2px var(--panel); } .timeline-item .dot.good { background: var(--up); } .timeline-item .dot.warn { background: var(--signal); } .timeline-item .dot.bad { background: var(--down); } .timeline-item .when { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; } .timeline-item .what { font-size: 14px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; } /* ------------------------------------------------------------------------- ATTENTION LIST — "these need you" rows ------------------------------------------------------------------------- */ .attention { display: grid; gap: var(--sp-2); min-width: 0; } .attention-item { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; padding: var(--sp-3); background: var(--signal-soft); border-left: 2px solid var(--signal); border-radius: 0 var(--r-md) var(--r-md) 0; font-family: var(--f-mono); font-size: 12px; line-height: 1.55; color: var(--ink-2); } .attention-item.bad { background: var(--down-soft); border-left-color: var(--down); } .attention-item .txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .attention-item .txt b { color: var(--ink); font-weight: 600; } .attention-item .act { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); } /* ------------------------------------------------------------------------- MISC PRIMITIVES ------------------------------------------------------------------------- */ .tooltip { position: fixed; z-index: 100; pointer-events: none; max-width: 240px; padding: 6px 9px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-2); font-family: var(--f-mono); font-size: 11px; line-height: 1.5; color: var(--ink-2); } .split { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .split > *:first-child { flex: 1 1 auto; min-width: 0; } .stat-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; } .stat-row:last-child { border-bottom: 0; } .stat-row > :first-child { color: var(--muted); min-width: 0; } .stat-row > :last-child { color: var(--ink); white-space: nowrap; } .badge-dot { display: inline-block; flex: none; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--muted); vertical-align: baseline; } .badge-dot.ok { background: var(--up); } .badge-dot.bad { background: var(--down); } .badge-dot.hold { background: var(--signal); } .badge-dot.idle { background: var(--muted); } .trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------------------- RESPONSIVE — extended components Below 900px the sidebar is a top bar; everything here goes single column and nothing is allowed to push the page wider than the viewport. ------------------------------------------------------------------------- */ @media (max-width: 900px) { /* .main padding drops to --sp-4, so the bleed must follow it. */ .runbar { position: static; flex-wrap: wrap; margin: 0 calc(var(--sp-4) * -1); row-gap: var(--sp-2); } .runbar-text { flex: 1 1 100%; order: 3; } .runbar-progress { flex: 1 1 auto; width: auto; min-width: 100px; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filterbar .count { margin-left: 0; } .filterbar input[type="search"] { flex: 1 1 100%; min-width: 0; } .hero { padding: var(--sp-4); } .onboard { padding-block: var(--sp-5); } .onboard-steps { grid-template-columns: minmax(0, 1fr); } .cmdk { margin-top: 8vh; } } @media (max-width: 560px) { .tiles { grid-template-columns: minmax(0, 1fr); } .onboard-step { padding: var(--sp-3); gap: var(--sp-3); } .seg { flex-wrap: wrap; } .attention-item { flex-wrap: wrap; } .attention-item .act { width: 100%; justify-content: flex-end; } .runbar-actions { margin-left: auto; } } /* ------------------------------------------------------------------------- REDUCED MOTION — extended coverage The universal block above already flattens durations; these kill the new looping/entrance animations outright so nothing creeps or fades. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .animate-in, .card.animate-in, .tile.animate-in, .animate-in > .card, .animate-in > .tile, .animate-in > * { animation: none !important; opacity: 1 !important; transform: none !important; } .runbar-dot { animation: none !important; opacity: 1 !important; transform: none !important; } .cmdk, .cmdk-backdrop, .toast, .modal, .modal-backdrop, .skeleton { animation: none !important; } .skeleton { background-image: none; } } /* ------------------------------------------------------------------------- PRINT — a run report has to survive a printer ------------------------------------------------------------------------- */ @media print { .sidebar, .runbar, .page-actions, .toast, .tooltip, .cmdk-backdrop, .theme-toggle, .filterbar, .seg { display: none !important; } /* Must out-specify BOTH dark blocks (a dark-preference machine still prints on white paper), hence the :not() and the attribute selector. */ :root, :root:not([data-theme="light"]), :root[data-theme="dark"] { --ground: #fff; --panel: #fff; --panel-2: #f4f4f4; --line: #bbb; --line-soft: #ddd; --ink: #000; --ink-2: #222; --muted: #555; --grid: #ddd; --term-bg: #f4f4f4; --term-ink: #111; --scrim: transparent; --shadow-1: none; --shadow-2: none; --shadow-3: none; } html { color-scheme: light; } body { background: #fff; color: #000; font-size: 11pt; } .app { display: block; } .main { max-width: none; padding: 0; gap: var(--sp-4); } .card, .tile, .hero, .onboard-step, .banner, .term { background: #fff !important; box-shadow: none !important; border-color: #bbb !important; break-inside: avoid; } .hero { background-image: none !important; } .term { color: #111 !important; max-height: none; overflow: visible; } .card, .tiles, .timeline-item, tr { break-inside: avoid; } thead { display: table-header-group; } th { position: static; } a { color: #000; border-bottom: 0; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } } /* ── Collapsed top bar: stop the project switcher, nav and search button from overlapping. The bar scrolls horizontally, so nothing inside it may shrink below its own content width. ───────────────────────────────────────────── */ @media (max-width: 900px) { .sidebar > * { flex: 0 0 auto; } .sidebar-nav { flex: 0 0 auto; flex-wrap: nowrap; } .sidebar-nav a { flex: 0 0 auto; white-space: nowrap; } .sidebar-foot { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: var(--sp-2); margin-top: 0; padding-top: 0; border-top: 0; margin-left: auto; } .sidebar-foot .theme-toggle { white-space: nowrap; } }