/* ============================================================================ cambriaos — stylesheet ---------------------------------------------------------------------------- PORTED FROM taa-platform/landing/cambria-shared.css (Shared Design System v3) on 2026-09-08, per spec §6 "styling ported from the TAA site". Decision log D-052 / D-053. Sections marked [TAA] are copied verbatim or near-verbatim so the two products stay one visual system; sections marked [ops] restate the cambriaos components in the TAA tokens. Do not re-introduce local hex values: every colour here is a token, and the light/dark pair is what makes a token. THEME MODEL (same as TAA since 2 Sep 26): LIGHT is the unstamped state and carries the Cambria brand palette; dark is opt-in via , set by /static/theme.js from localStorage 'taa_theme' before first paint. :root below holds the DARK values; html:not([data-theme="dark"]) overrides with the light ones and out-specifies :root, so light wins by default. FONTS: TAA Serif (OFL), DM Sans (OFL), DM Mono (OFL) self-hosted under /static/fonts/ with their licences. Financier is NOT included — Klim's licence is TAA's, for TAA's domains. TAA's own font chains fall back to TAA Serif; here it is the primary serif. ============================================================================ */ /* ── [TAA] Webfonts ────────────────────────────────────────────────────────── */ @font-face{ font-family:'TAA Serif'; src:url('/static/fonts/taa-serif-roman.woff2') format('woff2-variations'); font-weight:400 700; font-style:normal; font-display:swap; } @font-face{ font-family:'TAA Serif'; src:url('/static/fonts/taa-serif-italic.woff2') format('woff2-variations'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'DM Sans'; src:url('/static/fonts/dm-sans-vf.woff2') format('woff2-variations'); font-weight:300 700; font-style:normal; font-display:swap; } @font-face{ font-family:'DM Sans'; src:url('/static/fonts/dm-sans-vf-italic.woff2') format('woff2-variations'); font-weight:300 700; font-style:italic; font-display:swap; } @font-face{ font-family:'DM Mono'; src:url('/static/fonts/dm-mono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'DM Mono'; src:url('/static/fonts/dm-mono-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } /* Metric-matched fallbacks: font-display:swap reflows a heading visibly without them. */ @font-face{ font-family:'TAA Serif Fallback'; src:local('Georgia'), local('Times New Roman'), local('Liberation Serif'), local('DejaVu Serif'), local('Nimbus Roman'); size-adjust:98.1%; ascent-override:103.6%; descent-override:33.5%; line-gap-override:0%; } @font-face{ font-family:'DM Sans Fallback'; src:local('Arial'), local('Helvetica'), local('Liberation Sans'), local('DejaVu Sans'), local('Nimbus Sans'); size-adjust:101.4%; ascent-override:99.2%; descent-override:31%; line-gap-override:0%; } /* ── [TAA] Tokens — dark values on :root ───────────────────────────────────── */ :root { --bg: #0b0d10; --surface: #12161c; --surface2: #1a2030; --border: #232b3a; --accent: #ffb84f; /* amber on navy reads editorial; light theme uses Cambria blue */ --accent2: #4f8fff; --purple: #a393c8; --warn: #ff6b4f; --amber: #ffb84f; --teal: #06d6a0; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; --text: #e8eaf0; --muted: #8b93a5; /* 5.27:1 on --surface2, the worst case */ --muted2: #a1a9ba; --delta-pos: #5cb371; --delta-neg: #d9803f; --fineprint: #8b93a7; --fineprint-size: .72rem; --fineprint-lh: 1.55; --btn-text: #0b0d10; --data-pos: #008300; --data-neg: #e66767; --data-mid: #7b8594; /* DM Mono has no U+2192; DM Sans next in the chain supplies the arrow. */ --mono: 'DM Mono', 'DM Sans', ui-monospace, Menlo, Consolas, monospace; /* Financier omitted (licence) — TAA Serif is primary; see file header. */ --display: 'TAA Serif', 'TAA Serif Fallback', Georgia, serif; --serif: 'TAA Serif', 'TAA Serif Fallback', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', 'DM Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --header-padding-x: 24px; } /* ── [TAA] Light theme — Cambria brand palette (the default) ─────────────── White / blue / grey from the Cambria style guide: navy 022a53, blue 2e57a0, sky 33b1e7, teal 00a99d, purple 584389, greys 636363 / 949598 / adafb2 / e0e1e2. Accents darkened where the brand values fail 4.5:1 as text; measured against --surface2, the darkest surface they land on. */ html:not([data-theme="dark"]) { --bg: #f4f5f7; --surface: #ffffff; --surface2: #eceef1; --border: #e0e1e2; --accent: #2e57a0; /* Cambria blue */ --accent2: #12719a; /* sky, darkened from #33b1e7 */ --teal: #00766e; --purple: #584389; /* Cambria purple */ --warn: #c0392b; /* functional red (not brand) */ --amber: #995c00; --text: #022a53; /* Cambria navy as body text */ --muted: #696a6f; --muted2: #636363; --delta-pos: #337a43; --delta-neg: #a84c14; --fineprint: #626b76; --btn-text: #ffffff; --data-pos: #008300; --data-neg: #e34948; --data-mid: #6f7785; } /* ── [TAA] Reset + ground ──────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } html { font-optical-sizing: auto; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; } /* Figures: TAA Serif's digits are lining and tabular by default; make it explicit in columns and opt prose back out. */ table, td, th, [data-num] { font-variant-numeric: tabular-nums lining-nums; } p, .lede, .note { font-variant-numeric: proportional-nums; } /* Theme switching must not animate (see cambria-shared.css for the stuck-colour bug). */ html.taa-theme-switching, html.taa-theme-switching *, html.taa-theme-switching *::before, html.taa-theme-switching *::after { transition: none !important; } /* ── [TAA→ops] Header block — three rows, sticky. Structure from TAA; layout per Anvith's 2026-09-08 mockup (D-054): Cambria logo top-left, "cambriaos" app pill + theme toggle top-right on a white bar; title + muted mono tagline and sans nav pills on the page ground beneath it. */ .cambria-header { width: 100%; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 100; } .cambria-header .row-brand { display: flex; align-items: center; justify-content: space-between; padding: 10px var(--header-padding-x); background: var(--surface); border-bottom: 1px solid var(--border); } .cambria-header .brand { display: inline-flex; align-items: center; transition: opacity .15s; } .cambria-header .brand:hover { opacity: .85; } .cambria-header .brand-logo { height: 36px; width: auto; } /* Two supplied logo files: navy for the light theme, white for dark. Light is the unstamped state. */ .cambria-header .logo-dark { display: none; } html[data-theme="dark"] .cambria-header .logo-light { display: none; } html[data-theme="dark"] .cambria-header .logo-dark { display: block; } .cambria-header .brand-right { display: inline-flex; align-items: center; gap: 12px; } .app-pill { display: inline-flex; align-items: center; padding: 6px 12px; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-md); white-space: nowrap; } .cambria-header .row-tool { display: flex; flex-direction: column; gap: 6px; padding: 18px var(--header-padding-x) 6px; } .cambria-header .tool-title { font-family: var(--sans); font-size: 1.6rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; line-height: 1.15; } .cambria-header .tool-tagline { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: normal; } .cambria-header .row-tools { display: flex; gap: 6px; padding: 14px var(--header-padding-x) 16px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; align-items: center; } .cambria-header .row-tools::-webkit-scrollbar { height: 3px; } .cambria-header .row-tools::-webkit-scrollbar-thumb { background: var(--border); } .cambria-header .row-tools a, .cambria-header .row-tools button.pill { display: inline-flex; align-items: center; padding: 8px 15px; font-family: var(--sans); font-size: .92rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--r-md); white-space: nowrap; transition: all .15s; flex-shrink: 0; cursor: pointer; line-height: 1.2; } .cambria-header .row-tools a:hover { background: var(--surface2); } .cambria-header .row-tools a.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .cambria-header .row-tools .tool-group { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin-right: 18px; } .cambria-header .row-tools .tool-group-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-right: 6px; flex-shrink: 0; } .cambria-header .row-tools .tool-group.account { margin-left: auto; margin-right: 0; gap: 12px; } .cambria-header .row-tools form { display: inline-flex; margin: 0; } .cambria-header .row-tools a.who { background: var(--surface2); border-color: var(--border); font-weight: 400; font-size: .85rem; color: var(--muted2); } .cambria-header .row-tools a.who.active { color: var(--accent); } .cambria-header .row-tools a.who .role { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-left: 10px; } .cambria-header .row-tools button.pill { background: var(--surface); border-color: var(--border); font-size: .85rem; } .cambria-header .row-tools button.pill:hover { border-color: var(--muted); filter: none; transform: none; } /* Theme toggle pill */ .theme-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-family: var(--sans); font-size: .82rem; font-weight: 500; cursor: pointer; transition: all .15s; white-space: nowrap; } .theme-toggle:hover { border-color: var(--muted); filter: none; transform: none; } .theme-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text); } @media (max-width: 720px) { .cambria-header { --header-padding-x: 14px; } .cambria-header .tool-title { font-size: 1.3rem; } .cambria-header .brand-logo { height: 30px; } .cambria-header .row-tools a, .cambria-header .row-tools button.pill { padding: 6px 11px; font-size: .82rem; } .cambria-header .row-tools .tool-group { margin-right: 10px; } } @media (max-width: 620px) { .cambria-header { --header-padding-x: 12px; } .cambria-header .brand-logo { height: 26px; } .cambria-header .tool-title { font-size: 1.15rem; } .cambria-header .tool-tagline { font-size: .66rem; letter-spacing: .06em; } .cambria-header .row-brand { flex-wrap: wrap; row-gap: 6px; } .app-pill { display: none; } } /* ── [TAA] Footer ──────────────────────────────────────────────────────────── */ .cambria-footer-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; font-family: var(--sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: 26px 20px 32px; border-top: 1px solid var(--border); color: var(--muted2); } .cambria-footer-legal a { color: var(--muted2); transition: color .15s; } .cambria-footer-legal a:hover { color: var(--accent); } .cambria-footer-legal .sep { color: var(--muted); } /* ── [TAA] Affordance + focus ──────────────────────────────────────────────── */ button, [role="button"], summary, label[for], select { cursor: pointer; } a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; border-radius: var(--r-sm); } main a { color: var(--accent); } main a:hover { text-decoration: underline; text-underline-offset: 2px; } /* ── [TAA] Fine print ──────────────────────────────────────────────────────── */ .muted, .taa-fineprint, .footnote { font-size: var(--fineprint-size); line-height: var(--fineprint-lh); color: var(--fineprint); font-weight: 400; } .muted { font-size: .85rem; } /* ── [ops] Page frame ──────────────────────────────────────────────────────── */ main { max-width: 1240px; margin: 0 auto; padding: 26px 28px 60px; } main.narrow { max-width: 30rem; } main.narrow-wide { max-width: 46rem; } h1 { font-family: var(--sans); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 14px; } h2 { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); font-weight: 400; margin: 22px 0 10px; } h2:first-child { margin-top: 0; } p { margin: 0 0 .9rem; } code, .mono { font-family: var(--mono); font-size: .92em; } .wrap { word-break: break-all; } .crumbs { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .crumbs a { color: var(--muted); } .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 14px; } .page-head h1 { margin: 0; } /* Status bars — the TAA .warn-bar / .error-bar shapes */ .error, .notice { padding: 8px 14px; border-radius: var(--r-md); font-family: var(--mono); font-size: .78rem; margin: 8px 0 12px; } .error { background: rgba(255, 107, 79, 0.10); border: 1px solid rgba(255, 107, 79, 0.35); color: var(--warn); } .notice { background: rgba(92, 179, 113, 0.12); border: 1px solid rgba(92, 179, 113, 0.35); color: var(--delta-pos); } html:not([data-theme="dark"]) .error { background: #fce8e6; border-color: #f0b8b3; } html:not([data-theme="dark"]) .notice { background: #e6f4ea; border-color: #b7dfc2; } .error-text { color: var(--warn); } /* ── [ops] Forms — TAA .field treatment ───────────────────────────────────── */ .stack { display: grid; gap: 12px; margin: 12px 0; } label { display: grid; gap: 4px; font-family: var(--mono); font-size: .78rem; color: var(--muted2); } input[type="text"], input[type="email"], input[type="password"], input[type="date"], select, textarea { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: var(--r-md); font-family: var(--sans); font-size: .9rem; outline: none; transition: border-color .15s; } select { cursor: pointer; } input:focus, select:focus, textarea:focus { border-color: var(--accent); } input.code { font-size: 1.4rem; letter-spacing: .25em; text-align: center; } textarea { resize: vertical; font-family: var(--sans); } .req { color: var(--warn); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; } /* Buttons — TAA .run-btn / .reset-btn */ button { padding: 10px 22px; background: var(--accent); color: var(--btn-text); border: none; border-radius: var(--r-md); font-family: var(--sans); font-weight: 500; font-size: .9rem; cursor: pointer; transition: all .15s; } button:hover { filter: brightness(1.12); transform: translateY(-1px); } button.secondary, button.danger { background: var(--surface2); border: 1px solid var(--border); color: var(--muted2); font-size: .85rem; padding: 9px 14px; } button.secondary:hover { border-color: var(--accent); color: var(--accent); filter: none; } button.danger:hover { border-color: var(--warn); color: var(--warn); filter: none; } button.small { padding: 5px 10px; font-size: .78rem; } button.link { background: none; color: var(--accent); padding: 0; font-weight: 500; } button.link:hover { filter: none; transform: none; text-decoration: underline; } button[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: none; } /* ── [ops] Filters row ─────────────────────────────────────────────────────── */ .filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; } .filters label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); gap: 3px; } .filters { gap: 10px 14px; } .filters label { flex: 1 1 9rem; } .filters select, .filters input[type="date"] { width: 100%; padding: 8px 10px; font-size: .9rem; } .drill { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin: 0 0 12px; font-size: .88rem; } .more { margin: 10px 0; font-family: var(--mono); font-size: .82rem; } /* ── [ops] Summary cards — TAA .chart-card + stat treatment ───────────────── */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 12px; margin: 16px 0; } .card, .panel, .detail-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 20px; } .card .label { font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .card .value { font-family: var(--sans); font-size: 2rem; font-weight: 700; line-height: 1.15; margin-top: 8px; } .card .value .of { font-family: var(--mono); font-size: .9rem; font-weight: 400; color: var(--muted); } .card .sub { font-size: .8rem; color: var(--muted2); margin-top: 4px; } /* §1D: escalated count in red — TAA --warn */ .card.escalated { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); } .card.escalated .value, .card.escalated .label { color: var(--warn); } .panel { margin-bottom: 16px; } /* ── [ops] Tables — TAA .data-table ───────────────────────────────────────── */ table.breaks, table.sides, table.history, table.users, table.audit { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; font-family: var(--mono); font-size: .82rem; } table.breaks th, table.sides th, table.history th, table.users th, table.audit th { text-align: left; padding: 8px 10px; color: var(--muted); font-weight: 400; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--border); background: var(--surface2); } table.breaks td, table.sides td, table.history td, table.users td, table.audit td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } table tr:last-child td { border-bottom: none; } table.breaks tbody tr:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); } th.num, td.num { text-align: right; white-space: nowrap; } td .src { font-size: .62rem; color: var(--amber); margin-right: 5px; letter-spacing: .08em; text-transform: uppercase; } table.breaks td.mono { font-weight: 500; } table.breaks tbody tr[hx-get] { cursor: pointer; } /* §1D: escalated breaks are visually loud */ table.breaks tr.escalated td { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); } table.breaks tr.escalated td:first-child { border-left: 3px solid var(--warn); } table.breaks tr.escalated td.num:nth-child(8) { color: var(--warn); font-weight: 500; } table.breaks tr.broken td { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); } table.users tr.inactive td { color: var(--muted); } tr.empty td { color: var(--muted); text-align: center; padding: 22px; font-family: var(--sans); } table.sides td.label { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; } table.sides tr.total td { font-weight: 500; border-top: 2px solid var(--border); } table.audit td.change ul { list-style: none; margin: 0; padding: 0; font-size: .8rem; } table.audit td.change .key { color: var(--muted); } table.audit td.change s { color: var(--muted); } table.audit td.change b { font-weight: 500; } table.breaks td:not(.num), table.audit td { font-family: var(--sans); font-size: .88rem; } table.breaks td.mono, table.audit td.mono, table.users td.mono { font-family: var(--mono); font-size: .82rem; } /* ── [ops] Badges — TAA .state / .chip tints ──────────────────────────────── */ .badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 9px; border-radius: var(--r-lg); white-space: nowrap; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; } .badge.esc { background: var(--warn); color: #fff; border-radius: var(--r-sm); } table.breaks td:first-child a { font-weight: 700; color: var(--text); font-family: var(--sans); } table.breaks td:first-child a:hover { color: var(--accent); text-decoration: none; } .badge.status-open { background: rgba(214, 158, 46, .16); color: #e2b45c; } .badge.status-acknowledged { background: rgba(79, 143, 255, .16); color: #8fb4ff; } .badge.status-resolved { background: rgba(45, 155, 85, .20); color: #74dfa2; } .badge.status-written_off { background: rgba(255, 255, 255, .07); color: #97a3b0; } .badge.act-login, .badge.act-lockout, .badge.act-totp { background: rgba(79, 143, 255, .16); color: #8fb4ff; } .badge.act-break { background: rgba(214, 158, 46, .16); color: #e2b45c; } .badge.act-user, .badge.act-password, .badge.act-files { background: rgba(255, 255, 255, .07); color: #97a3b0; } html:not([data-theme="dark"]) .badge.status-open { background: #fdf3e1; color: #8a5c00; } html:not([data-theme="dark"]) .badge.status-acknowledged { background: #e4edf8; color: #2e57a0; } html:not([data-theme="dark"]) .badge.status-resolved { background: #e6f4ea; color: #137333; } html:not([data-theme="dark"]) .badge.status-written_off { background: #eee; color: #666; } html:not([data-theme="dark"]) .badge.act-login, html:not([data-theme="dark"]) .badge.act-lockout, html:not([data-theme="dark"]) .badge.act-totp { background: #e4edf8; color: #2e57a0; } html:not([data-theme="dark"]) .badge.act-break { background: #fdf3e1; color: #8a5c00; } html:not([data-theme="dark"]) .badge.act-user, html:not([data-theme="dark"]) .badge.act-password, html:not([data-theme="dark"]) .badge.act-files { background: #eee; color: #666; } /* ── [ops] Break detail ────────────────────────────────────────────────────── */ .detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 1fr); gap: 18px; align-items: start; } .facts { display: grid; grid-template-columns: 6.5rem 1fr; gap: 6px 12px; margin: 0 0 14px; font-size: .88rem; } .facts dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .25em; } .facts dd { margin: 0; } .facts.inline { display: flex; flex-wrap: wrap; gap: 4px 22px; } .facts.inline dt { display: inline; margin-right: 6px; } .facts.inline dd { display: inline; } .actions { display: grid; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .actions form.inline { display: flex; align-items: flex-end; gap: 8px; } .actions form.inline label { flex: 1; } .comments, .trail { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .86rem; } .comments li { background: var(--surface2); border-radius: var(--r-md); padding: 8px 11px; } .comments .meta { font-family: var(--mono); font-size: .68rem; color: var(--muted); margin-bottom: 3px; } .comments .body { white-space: pre-wrap; } .trail li { color: var(--muted2); line-height: 1.45; } .trail li b { color: var(--text); font-weight: 500; } .run { margin-bottom: 26px; } .run h2 { font-family: var(--display); font-size: 1.1rem; text-transform: none; letter-spacing: -.01em; color: var(--text); font-weight: 700; margin: 0 0 8px; } /* ── [ops] Admin ───────────────────────────────────────────────────────────── */ .create-user { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1.5fr auto; gap: 10px; align-items: end; } .row-form { display: flex; gap: 6px; align-items: center; } .row-form select { width: auto; padding: 4px 6px; font-size: .78rem; } .row-actions { display: flex; flex-wrap: wrap; gap: 5px; } .row-actions form { margin: 0; } /* ── [ops] 2FA enrollment ──────────────────────────────────────────────────── */ .qr { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; display: inline-block; margin: 6px 0 14px; } .qr svg { display: block; width: 200px; height: 200px; } .secret { letter-spacing: .08em; } details { margin-bottom: 14px; } summary { color: var(--accent); font-size: .9rem; } @media (max-width: 900px) { .detail { grid-template-columns: 1fr; } .create-user { grid-template-columns: 1fr 1fr; } main { padding: 16px 14px 48px; } } /* ── [TAA] Print: ink on white whatever the screen theme ─────────────────── */ @media print { @page { margin: 13mm 12mm; } html, body { background: #fff !important; } :root, html[data-theme="dark"] { --bg: #ffffff; --surface: #ffffff; --surface2: #f7f8fa; --border: #ccd2da; --text: #022a53; --muted: #5c6470; --muted2: #3b4757; --accent: #2e57a0; --accent2: #12719a; --warn: #c0392b; --amber: #995c00; --fineprint: #6a737f; } .cambria-header, .cambria-footer-legal, .filters, .actions, button, .theme-toggle { display: none !important; } .card, .panel, .detail-side { border: .5pt solid #ccd2da !important; box-shadow: none !important; background: #fff !important; break-inside: avoid; } thead { display: table-header-group; } tr { break-inside: avoid; } a { color: #022a53 !important; text-decoration: none !important; } } /* ---- Phase 2/3 screens: settlement + compliance (D-065) ---- */ .card.warn { border-color: #c98a1a; background: color-mix(in srgb, #c98a1a 8%, var(--surface)); } .card.warn .value, .card.warn .label { color: #c98a1a; } a.card.link { text-decoration: none; color: inherit; display: block; } a.card.link:hover { border-color: var(--accent); } .badge.trade-pending { background: rgba(214, 158, 46, .16); color: #e2b45c; } .badge.trade-settled { background: rgba(45, 155, 85, .20); color: #74dfa2; } .badge.trade-failed { background: rgba(214, 78, 60, .18); color: #ef8f82; } .badge.trade-cancelled { background: rgba(255, 255, 255, .07); color: #97a3b0; } .badge.cmp-pass { background: rgba(45, 155, 85, .20); color: #74dfa2; } .badge.cmp-warn { background: rgba(214, 158, 46, .16); color: #e2b45c; } .badge.cmp-fail { background: rgba(214, 78, 60, .18); color: #ef8f82; } .badge.cmp-na { background: rgba(255, 255, 255, .07); color: #97a3b0; } html:not([data-theme="dark"]) .badge.trade-pending, html:not([data-theme="dark"]) .badge.cmp-warn { background: #fdf3e1; color: #8a5c00; } html:not([data-theme="dark"]) .badge.trade-settled, html:not([data-theme="dark"]) .badge.cmp-pass { background: #e6f4ea; color: #137333; } html:not([data-theme="dark"]) .badge.trade-failed, html:not([data-theme="dark"]) .badge.cmp-fail { background: #fbe4e1; color: #9c2b20; } html:not([data-theme="dark"]) .badge.trade-cancelled, html:not([data-theme="dark"]) .badge.cmp-na { background: #eee; color: #666; } .matrix-wrap { overflow-x: auto; } table.matrix th span.mono { font-size: .7rem; letter-spacing: 0; text-transform: none; } table.matrix td.cell { text-align: right; font-family: var(--mono); font-size: .82rem; } table.matrix td.cell a { color: inherit; text-decoration: none; display: block; } table.matrix td.cmp-pass { background: color-mix(in srgb, #2d9b55 10%, var(--surface)); } table.matrix td.cmp-warn { background: color-mix(in srgb, #c98a1a 18%, var(--surface)); font-weight: 600; } table.matrix td.cmp-fail { background: color-mix(in srgb, #d64e3c 22%, var(--surface)); font-weight: 700; } table.matrix td.cmp-na { color: var(--muted); } table.breaks tr.inactive td { color: var(--muted); } form.narrow { max-width: 34rem; } form .check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: .9rem; } /* Cash page (D-074): status badges for fund / currency / type lines */ .badge.cash-tied { background: rgba(45, 155, 85, .20); color: #74dfa2; } .badge.cash-break { background: rgba(214, 78, 60, .18); color: #ef8f82; } .badge.cash-fx { background: rgba(214, 158, 46, .16); color: #e2b45c; } .badge.cash-one { background: rgba(255, 255, 255, .07); color: #97a3b0; }