/* ══════════════════════════════════════════════════════════════ GTM Console — server-hosted operator UI Ported from build/pre-launch/gtm-console-prototype.html. WHY the theme handling looks like this: a viewer has three states, not two. An explicit choice stamps data-theme on ; the default "system" setting stamps nothing and only prefers-color-scheme separates light from dark. So the complete light palette lives on bare :root, the dark palette is redefined twice — once under the media query guarded against an explicit light choice, once under [data-theme="dark"] so the toggle wins in both directions. Brand per the Brain's brand-spec: Carlito, primary red #9A0D15. Semantic colour (ok/warn/crit) is kept separate from the brand accent so "red" never has to mean both "Iksula" and "broken". ══════════════════════════════════════════════════════════════ */ :root { --ground: #F7F4F3; --surface: #FFFFFF; --surface-2: #F1ECEB; --rail: #1A1614; --rail-ink: #C9BDBA; --rail-hi: #FFFFFF; --rail-line: #2A2422; --rail-hover:#241E1D; --rail-dim: #6B5E5B; --ink: #1A1614; --ink-2: #4A3F3C; --muted: #7A6C69; --line: #E2D9D7; --line-2: #CEC1BE; --brand: #9A0D15; --brand-soft: #FBEDEC; --brand-ink: #FFFFFF; --ok: #1B6B4C; --ok-soft: #E7F3EE; --warn: #8A6210; --warn-soft: #FBF1DE; --crit: #B3261E; --crit-soft: #FCEDEC; --idle: #7A6C69; --idle-soft: #EFEAE9; --info: #1F5B8F; --info-soft: #E8F0F7; --console-bg: #14100F; --console-ink:#C9BDBA; --font: "Carlito", Calibri, "Segoe UI", system-ui, -apple-system, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; --rail-w: 15rem; /* Aliases for the vocabulary the newer pages (home, flow, today) were written in. They are var() references, not copies, so they re-resolve automatically when the dark blocks below redefine the underlying token - define them ONCE, here, and nowhere else. Before these existed, background:var(--card) computed to nothing and the machine strip rendered with transparent surfaces, an invisible running dot, and no keyboard focus ring. */ --card: var(--surface); --fg: var(--ink); --bad: var(--crit); --accent: var(--info); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #131010; --surface: #1B1717; --surface-2: #241E1E; --rail: #0E0C0C; --rail-ink: #A29491; --rail-hi: #FFFFFF; --rail-line: #221C1C; --rail-hover: #241E1E; --rail-dim: #7E706D; --ink: #F2ECEA; --ink-2: #C8BCB9; --muted: #948683; --line: #322A29; --line-2: #453B39; --brand: #E9646B; --brand-soft: #331A1B; --brand-ink: #1A1614; --ok: #55BE90; --ok-soft: #13251E; --warn: #DCA945; --warn-soft: #292014; --crit: #F0736B; --crit-soft: #2E1817; --idle: #948683; --idle-soft: #241F1E; --info: #6FA9DC; --info-soft: #16222E; --console-bg: #0B0909; --console-ink: #C9BDBA; } } :root[data-theme="dark"] { --ground: #131010; --surface: #1B1717; --surface-2: #241E1E; --rail: #0E0C0C; --rail-ink: #A29491; --rail-hi: #FFFFFF; --rail-line: #221C1C; --rail-hover: #241E1E; --rail-dim: #7E706D; --ink: #F2ECEA; --ink-2: #C8BCB9; --muted: #948683; --line: #322A29; --line-2: #453B39; --brand: #E9646B; --brand-soft: #331A1B; --brand-ink: #1A1614; --ok: #55BE90; --ok-soft: #13251E; --warn: #DCA945; --warn-soft: #292014; --crit: #F0736B; --crit-soft: #2E1817; --idle: #948683; --idle-soft: #241F1E; --info: #6FA9DC; --info-soft: #16222E; --console-bg: #0B0909; --console-ink: #C9BDBA; } * { box-sizing: border-box; } html { color-scheme: light dark; } /* app.js hides filtered-out table rows with the `hidden` property. A carries a UA display value that can win against [hidden], so state it. */ [hidden] { display: none !important; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* the page never scrolls sideways; wide things scroll inside */ } button { font: inherit; cursor: pointer; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } 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(--brand); outline-offset: 2px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--brand); color: #fff; padding: 0.5rem 0.9rem; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── shell ─────────────────────────────────────────────── */ .shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; } .rail { background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 0.7rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.5rem 1rem; border-bottom: 1px solid var(--rail-line); margin-bottom: 0.8rem; } .brand .mark { width: 1.9rem; height: 1.9rem; border-radius: 3px; background: var(--brand); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.95rem; flex: none; } .brand b { color: var(--rail-hi); font-size: 0.98rem; letter-spacing: -0.01em; display: block; } .brand span { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rail-dim); } .brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 0.6rem; } .navgroup { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rail-dim); padding: 0.9rem 0.6rem 0.35rem; } .navitem { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: 0; color: var(--rail-ink); padding: 0.44rem 0.6rem; border-radius: 4px; text-align: left; font-size: 0.88rem; text-decoration: none; } .navitem:hover { background: var(--rail-hover); color: var(--rail-hi); text-decoration: none; } .navitem[aria-current="page"] { background: var(--brand); color: #fff; font-weight: 600; } .navitem .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--idle); } .navitem .dot.ok { background: var(--ok); } .navitem .dot.warn { background: var(--warn); } .navitem .dot.crit { background: var(--crit); } .navitem .dot.idle { background: var(--idle); } .navitem .dot.info { background: var(--info); } .navitem .count { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: #8B7D7A; font-variant-numeric: tabular-nums; } .navitem[aria-current="page"] .count { color: #F2C9CB; } .railfoot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--rail-line); display: flex; flex-direction: column; gap: 0.45rem; } .whoami { padding: 0 0.6rem; font-size: 0.8rem; color: var(--rail-ink); } .whoami b { color: var(--rail-hi); display: block; } .whoami span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rail-dim); } .railbtn { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: none; border: 1px solid var(--rail-line); color: var(--rail-ink); padding: 0.38rem 0.6rem; border-radius: 4px; font-size: 0.82rem; text-align: left; } .railbtn:hover { background: var(--rail-hover); color: var(--rail-hi); } .railfoot form { margin: 0; } /* ── main ──────────────────────────────────────────────── */ main { padding: 1.6rem 2rem 4rem; max-width: 82rem; min-width: 0; } .screen { display: flex; flex-direction: column; gap: 1.5rem; } .pagehead { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; align-items: flex-end; justify-content: space-between; } .pagehead h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; } .pagehead p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9rem; max-width: 60ch; } .headactions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .crumb { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.3rem; display: block; } .btn { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); padding: 0.44rem 0.85rem; border-radius: 4px; font-size: 0.86rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .btn.primary:hover { filter: brightness(1.08); } .btn.danger { border-color: color-mix(in srgb, var(--crit) 45%, var(--line-2)); color: var(--crit); } .btn.danger:hover { background: var(--crit-soft); } .btn.small { padding: 0.24rem 0.55rem; font-size: 0.78rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── flash messages ────────────────────────────────────── */ .flashes { display: flex; flex-direction: column; gap: 0.5rem; } .flash { display: flex; gap: 0.6rem; align-items: flex-start; border: 1px solid var(--line-2); border-left-width: 3px; border-radius: 4px; padding: 0.6rem 0.9rem; font-size: 0.87rem; background: var(--surface); color: var(--ink-2); } .flash.ok { border-left-color: var(--ok); background: var(--ok-soft); } .flash.warn { border-left-color: var(--warn); background: var(--warn-soft); } .flash.crit { border-left-color: var(--crit); background: var(--crit-soft); } .flash.info { border-left-color: var(--info); background: var(--info-soft); } .flash pre { margin: 0.35rem 0 0; white-space: pre-wrap; font-family: var(--mono); font-size: 0.76rem; } /* ── cards + stats ─────────────────────────────────────── */ .grid { display: grid; gap: 0.7rem; } .g4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .g2 { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 0.95rem 1.05rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .card h3 { margin: 0; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .stat .v { font-family: var(--mono); font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .stat .sub { font-size: 0.78rem; color: var(--muted); } .stat.crit { border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); background: var(--crit-soft); } .stat.crit .v { color: var(--crit); } .stat.ok .v { color: var(--ok); } .stat.warn .v { color: var(--warn); } .stat.idle .v { color: var(--muted); } .sectionhead { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; font-weight: 600; } /* ── pills ─────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.16rem 0.45rem; border-radius: 3px; border: 1px solid transparent; font-weight: 600; } .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .pill.ok { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .pill.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); } .pill.crit { color: var(--crit); background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 32%, transparent); } .pill.idle { color: var(--idle); background: var(--idle-soft); border-color: var(--line-2); } .pill.info { color: var(--info); background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); } .pill.solid { color: #fff; background: var(--brand); border-color: var(--brand); } .pill.plain::before { display: none; } /* ── tables ────────────────────────────────────────────── */ .tablewrap { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: var(--surface); } .tscroll { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: 0.86rem; } th, td { text-align: left; padding: 0.52rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; z-index: 1; } td { color: var(--ink-2); } td b { color: var(--ink); font-weight: 600; } tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-bottom: 0; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .sub2 { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); display: block; } .toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); background: var(--surface-2); } .toolbar .right { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } input[type="search"], input[type="text"], input[type="password"], input[type="number"], input[type="file"], select, textarea { font: inherit; font-size: 0.85rem; padding: 0.32rem 0.55rem; border-radius: 4px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); max-width: 100%; } input[type="search"], input[type="text"], select { min-width: 12rem; } textarea { width: 100%; min-height: 4.5rem; font-family: inherit; } label { font-size: 0.85rem; color: var(--ink-2); } .field { display: flex; flex-direction: column; gap: 0.25rem; } .field .hint { font-size: 0.75rem; color: var(--muted); } .checkrow { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; } .checkrow input { accent-color: var(--brand); } .why { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); background: var(--surface-2); border-left: 2px solid var(--line-2); padding: 0.4rem 0.6rem; margin-top: 0.35rem; border-radius: 0 3px 3px 0; white-space: normal; word-break: break-word; } .why.kept { border-left-color: var(--ok); } .why.dropped { border-left-color: var(--crit); } .empty { padding: 2rem 1rem; text-align: center; color: var(--muted); font-size: 0.88rem; } .empty b { display: block; color: var(--ink-2); margin-bottom: 0.2rem; } .empty .mono { font-family: var(--mono); font-size: 0.75rem; } .pagination { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; padding: 0.55rem 0.8rem; border-top: 1px solid var(--line); background: var(--surface-2); font-family: var(--mono); font-size: 0.75rem; color: var(--muted); } .pagination .pages { display: flex; gap: 0.4rem; } /* ── chain ─────────────────────────────────────────────── */ .chain { display: flex; flex-wrap: wrap; gap: 0.4rem; } .linkbox { flex: 1 1 8rem; min-width: 8rem; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--idle); border-radius: 4px; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.15rem; } .linkbox .l { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); } .linkbox .v { font-family: var(--mono); font-size: 1rem; font-variant-numeric: tabular-nums; } .linkbox.pass { border-top-color: var(--ok); } .linkbox.pass .v { color: var(--ok); } .linkbox.warn { border-top-color: var(--warn); } .linkbox.warn .v { color: var(--warn); } .linkbox.fail { border-top-color: var(--crit); background: var(--crit-soft); } .linkbox.fail .v { color: var(--crit); } /* ── run console ───────────────────────────────────────── */ .console { background: var(--console-bg); color: var(--console-ink); border-radius: 5px; padding: 0.85rem 1rem; font-family: var(--mono); font-size: 0.78rem; line-height: 1.65; max-height: 15rem; overflow-y: auto; overflow-x: auto; border: 1px solid #2A2422; white-space: pre-wrap; word-break: break-word; } .console.tall { max-height: 30rem; } .console .t { color: #6B5E5B; } .console .g { color: #55BE90; } .console .y { color: #DCA945; } .console .r { color: #F0736B; } .console .empty { color: #6B5E5B; padding: 0.5rem 0; text-align: left; } .progress { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; } .progress i { display: block; height: 100%; width: 0%; background: var(--brand); transition: width .4s ease; } .progress.indeterminate i { width: 35%; animation: slide 1.4s ease-in-out infinite; } @keyframes slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } } /* ── file rows ─────────────────────────────────────────── */ .filerow { display: grid; grid-template-columns: 2rem 1fr auto auto; gap: 0.8rem; align-items: center; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); } .filerow:last-child { border-bottom: 0; } .filerow .ico { width: 2rem; height: 2rem; border-radius: 4px; display: grid; place-items: center; font-family: var(--mono); font-size: 0.58rem; font-weight: 700; color: #fff; background: var(--idle); } .filerow .ico.xlsx { background: #1B6B4C; } .filerow .ico.txt { background: #8A6210; } .filerow .ico.html { background: #1F5B8F; } .filerow .ico.json { background: #7A6C69; } .filerow .ico.db { background: #9A0D15; } .filerow .ico.dir { background: #4A3F3C; } .filerow .ico.file { background: #7A6C69; } .filerow .meta { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } .filerow.missing { opacity: 0.55; } /* ── blockers ──────────────────────────────────────────── */ .blocker { display: grid; grid-template-columns: 1.8rem 1fr auto; gap: 0.85rem; align-items: start; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--crit); border-radius: 4px; padding: 0.75rem 0.9rem; } .blocker.b2 { border-left-color: var(--warn); } .blocker.b3 { border-left-color: var(--idle); } .blocker.b4 { border-left-color: var(--ok); } .blocker .n { font-family: var(--mono); font-size: 1.05rem; color: var(--crit); } .blocker.b2 .n { color: var(--warn); } .blocker.b3 .n { color: var(--idle); } .blocker.b4 .n { color: var(--ok); } .blocker p { margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--ink-2); } .blockerlist { display: flex; flex-direction: column; gap: 0.55rem; } /* ── arch diagram ──────────────────────────────────────── */ .arch { display: grid; gap: 0.6rem; } .tier { border: 1px solid var(--line); border-radius: 5px; background: var(--surface); padding: 0.8rem 0.95rem; display: flex; flex-direction: column; gap: 0.55rem; } .tier > .lbl { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--brand); font-weight: 700; } .boxes { display: flex; flex-wrap: wrap; gap: 0.45rem; } .box { border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface-2); padding: 0.45rem 0.65rem; font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 11rem; } .box b { font-size: 0.85rem; } .box span { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); } .box.hi { border-color: var(--brand); background: var(--brand-soft); } .flowdown { text-align: center; color: var(--line-2); font-size: 1rem; line-height: 1; } .note { border: 1px solid var(--line-2); border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 4px; padding: 0.75rem 0.95rem; } .note b { color: var(--brand); } .note p { margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--ink-2); } .banner { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 5px; padding: 0.6rem 0.9rem; font-size: 0.85rem; color: var(--ink-2); } .banner.crit { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 35%, transparent); } .banner.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 35%, transparent); } .banner.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } kbd { font-family: var(--mono); font-size: 0.72rem; background: var(--surface-2); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 3px; padding: 0.05em 0.35em; } code { font-family: var(--mono); font-size: 0.86em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; padding: 0.05em 0.3em; word-break: break-word; } /* ── key/value list ────────────────────────────────────── */ .kv { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; } .kv > div { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; } .kv .k { color: var(--muted); } .kv .v { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; word-break: break-word; } .dropzone { border: 1px dashed var(--line-2); border-radius: 5px; padding: 1.4rem; text-align: center; color: var(--muted); font-size: 0.86rem; } .dropzone.over { border-color: var(--brand); background: var(--brand-soft); } .dropzone .mono { font-family: var(--mono); font-size: 0.72rem; display: block; margin-top: 0.2rem; } /* ── inline operator forms in a table cell ─────────────── */ .rowform { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; } .rowform input[type="text"] { min-width: 9rem; font-size: 0.8rem; padding: 0.22rem 0.45rem; } details.reveal > summary { cursor: pointer; font-size: 0.8rem; color: var(--brand); list-style: none; font-weight: 600; } details.reveal > summary::-webkit-details-marker { display: none; } details.reveal > summary::before { content: "▸ "; } details.reveal[open] > summary::before { content: "▾ "; } details.reveal > div { margin-top: 0.4rem; } /* ── login ─────────────────────────────────────────────── */ .authwrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: var(--ground); } .authcard { width: 100%; max-width: 22rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; } .authcard .brandline { display: flex; align-items: center; gap: 0.6rem; } .authcard h1 { margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; } .authcard .mark { width: 2.1rem; height: 2.1rem; border-radius: 3px; background: var(--brand); display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; } .authcard input { width: 100%; padding: 0.45rem 0.6rem; font-size: 0.9rem; } .authfoot { font-size: 0.75rem; color: var(--muted); font-family: var(--mono); text-align: center; } /* ── error page ────────────────────────────────────────── */ .errwrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; } .errcard { max-width: 34rem; text-align: center; display: flex; flex-direction: column; gap: 0.7rem; } .errcard .code { font-family: var(--mono); font-size: 3rem; color: var(--brand); line-height: 1; } @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; } .navgroup { display: none; } .navitem { width: auto; } .railfoot { margin-top: 0; border-top: 0; padding-top: 0; flex-direction: row; align-items: center; width: 100%; } .brand { width: 100%; } main { padding: 1.2rem 1rem 3rem; } .filerow { grid-template-columns: 2rem 1fr; row-gap: 0.4rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @media print { .rail, .toolbar, .btn, .railfoot { display: none !important; } .shell { grid-template-columns: 1fr; } }