/* * Backstock shared stylesheet. * * One copy of the design tokens, the page frame, the app header, form * controls, buttons, pills and banners - previously pasted into every page * under public/ with small drifts between them. Pages link this and keep * only the rules that are truly their own. * * Ground rules the UI audit (claude/ui-audit.md) set, all enforced here: * - text inputs are 16px so iOS Safari does not zoom on focus * - every tappable control is at least 44px tall * - :focus-visible draws a ring on everything focusable * - the page column is capped at 720px and centred on wide screens * - the document scrolls; the header sticks. No body { overflow:hidden }. */ /* ---------- tokens ---------- */ :root { --paper: #eeece4; --paper-raised: #f7f5ee; --ink: #24262b; --ink-soft: #5a5d63; --line: #d9d5c8; --brass: #a5711f; --brass-deep: #8a5c15; --brass-tint: #f1e2c4; --ok: #3f6b4a; --ok-tint: #e3ecdf; --warn: #8a3b2c; --warn-tint: #f2e0da; --neutral-tint: #dedbd0; --neutral-text: #4d5057; --focus: #2f6fd6; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --display: 'Archivo', ui-sans-serif, system-ui, sans-serif; --page-max: 720px; --gutter: 16px; --control-h: 44px; --radius: 10px; --radius-sm: 8px; --desktop-min: 900px; /* documentation only: media queries cannot read a custom property */ } /* * Desktop (>= 900px): the column widens to 1040px, or to 1600px when the * viewer has chosen "full width" with the header toggle (shared.js stores * the choice as data-width on ). Pages that want a desktop-specific * layout (two panes, grids) key off the same 900px breakpoint. */ @media (min-width: 900px) { :root { --page-max: 1040px; --gutter: 24px; } :root[data-width="wide"] { --page-max: 1600px; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #1c1d1f; --paper-raised: #262729; --ink: #ece8de; --ink-soft: #9b9a95; --line: #38393b; --brass: #d8a95a; --brass-deep: #eec37c; --brass-tint: #3a2f1c; --ok: #8bbf98; --ok-tint: #22321f; --warn: #d98f7a; --warn-tint: #3a2420; --neutral-tint: #35373a; --neutral-text: #c3c1ba; --focus: #7fb0ff; } } :root[data-theme="dark"] { --paper: #1c1d1f; --paper-raised: #262729; --ink: #ece8de; --ink-soft: #9b9a95; --line: #38393b; --brass: #d8a95a; --brass-deep: #eec37c; --brass-tint: #3a2f1c; --ok: #8bbf98; --ok-tint: #22321f; --warn: #d98f7a; --warn-tint: #3a2420; --neutral-tint: #35373a; --neutral-text: #c3c1ba; --focus: #7fb0ff; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--display); font-size: 15px; line-height: 1.45; display: flex; flex-direction: column; } h1, h2, h3, p { margin: 0; } a { color: var(--brass-deep); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: default; opacity: 0.55; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* ---------- page frame ---------- */ .page { width: 100%; max-width: var(--page-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } main { flex: 1 1 auto; width: 100%; padding-top: 8px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } .app-footer { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--paper); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); font-family: var(--mono); font-size: 12px; color: var(--ink-soft); text-align: center; } /* ---------- app header ---------- */ .app-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); } .app-bar { display: flex; align-items: center; gap: 10px; min-height: 56px; padding-top: 6px; padding-bottom: 6px; } .app-brand { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-deep); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 4px; margin-left: -4px; flex: 0 0 auto; } .app-title { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-title-meta { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .app-tools { padding-bottom: 10px; display: flex; flex-direction: column; gap: 8px; } .app-tools-row { display: flex; gap: 8px; align-items: center; } .app-tools-row > .input { flex: 1 1 auto; min-width: 0; } /* icon button: square 44px target */ .icon-btn { width: var(--control-h); height: var(--control-h); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--ink); margin-right: -6px; } .icon-btn:hover { background: var(--paper-raised); border-color: var(--line); } .icon-btn[aria-expanded="true"] { background: var(--brass-tint); border-color: var(--brass); color: var(--brass-deep); } .icon-btn svg { width: 22px; height: 22px; display: block; } /* width toggle: desktop only. shared.js wires any [data-width-toggle]. */ .width-toggle { display: none; margin-right: 0; } .width-toggle .ico-wide, .width-toggle .ico-narrow { display: none; } :root:not([data-width="wide"]) .width-toggle .ico-wide { display: block; } :root[data-width="wide"] .width-toggle .ico-narrow { display: block; } @media (min-width: 900px) { .width-toggle { display: inline-flex; } } /* the menu popover shared.js attaches to [data-app-menu] */ .app-menu { position: absolute; top: calc(100% - 4px); right: 0; z-index: 30; min-width: 232px; max-width: calc(100vw - 2 * var(--gutter)); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); padding: 6px; margin: 0; list-style: none; } .app-menu-anchor { position: relative; } .app-menu li { margin: 0; } .app-menu a, .app-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: var(--control-h); padding: 8px 12px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; text-align: left; } .app-menu a:hover, .app-menu button:hover { background: var(--brass-tint); color: var(--brass-deep); } .app-menu a[aria-current="page"] { color: var(--brass-deep); } .app-menu a[aria-current="page"]::after { content: '\2022'; font-size: 18px; line-height: 1; } .app-menu .menu-sep { height: 1px; margin: 6px 4px; background: var(--line); } .app-menu .menu-tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass-deep); background: var(--brass-tint); border-radius: 999px; padding: 2px 7px; } .app-menu .menu-who { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); padding: 6px 12px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- form controls ---------- */ .input, .select { width: 100%; min-height: var(--control-h); font-family: var(--display); font-size: 16px; /* never smaller: iOS zooms on focus below 16px */ padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); } .input.mono { font-family: var(--mono); } .input::placeholder { color: var(--ink-soft); opacity: 1; } .input:focus-visible, .select:focus-visible { border-color: var(--brass); } .select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; } .label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 6px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .btn:hover { border-color: var(--ink-soft); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brass-deep); border-color: var(--brass-deep); color: var(--paper); } :root[data-theme="dark"] .btn-primary { color: #1c1d1f; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #1c1d1f; } } .btn-primary:hover { border-color: var(--brass); background: var(--brass); } .btn-ghost { background: transparent; border-color: transparent; color: var(--brass-deep); } .btn-ghost:hover { background: var(--brass-tint); border-color: transparent; } .btn-danger { background: transparent; border-color: var(--warn); color: var(--warn); } .btn-danger:hover { background: var(--warn-tint); } .btn-block { width: 100%; } /* denser button for rows on desktop; stays a full 44px target on touch widths */ @media (min-width: 900px) { .btn-sm { min-height: 36px; padding: 4px 12px; font-size: 13px; } } .btn .badge { font-family: var(--mono); font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--brass-deep); color: var(--paper); } .btn[aria-pressed="true"] { background: var(--brass-tint); border-color: var(--brass); color: var(--brass-deep); } /* chip: a toggle/filter control. Same 44px target, pill shape. */ .chip { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .chip[aria-pressed="true"] { background: var(--brass-tint); border-color: var(--brass); color: var(--brass-deep); } .chip.tone-warn[aria-pressed="true"] { background: var(--warn-tint); border-color: var(--warn); color: var(--warn); } .chip.tone-ok[aria-pressed="true"] { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- status pills (display only, not tappable) ---------- */ .pill { display: inline-block; font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.4; } .pill.ok { background: var(--ok-tint); color: var(--ok); } .pill.warn { background: var(--warn-tint); color: var(--warn); } .pill.neutral { background: var(--neutral-tint); color: var(--neutral-text); } .pill.brass { background: var(--brass-tint); color: var(--brass-deep); } /* ---------- banners ---------- */ .banner { font-family: var(--mono); font-size: 12px; line-height: 1.5; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); } .banner:not(.show) { display: none; } .banner.warn { background: var(--warn-tint); color: var(--warn); } .banner.info { background: var(--brass-tint); color: var(--brass-deep); } .banner.ok { background: var(--ok-tint); color: var(--ok); } .banner a { color: inherit; font-weight: 700; } .banner-inner { max-width: var(--page-max); margin: 0 auto; } .banner-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .banner ul { list-style: none; margin: 6px 0 0; padding: 0; } .banner li { padding: 2px 0; } .banner .btn { min-height: 36px; padding: 4px 12px; font-size: 13px; } .banner.warn .btn { border-color: var(--warn); color: var(--warn); background: transparent; } /* ---------- sticky bottom action bar (save buttons) ---------- */ .action-bar { position: sticky; bottom: 0; z-index: 15; background: var(--paper); border-top: 1px solid var(--line); padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .action-bar-inner { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .action-bar .status { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); line-height: 1.4; } /* ---------- checkbox / toggle rows ---------- */ .check-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; cursor: pointer; } .check-row input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--brass-deep); cursor: pointer; } .check-row .check-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .check-row .check-name { font-size: 15px; font-weight: 600; line-height: 1.3; } .check-row .check-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); } .check-row:has(input:checked) { border-color: var(--brass); } /* ---------- cards, empty states, small text ---------- */ .card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .empty { color: var(--ink-soft); font-size: 14px; text-align: center; padding: 40px 16px; line-height: 1.5; display: flex; flex-direction: column; align-items: center; gap: 12px; } .empty strong { color: var(--ink); font-weight: 700; } .muted { color: var(--ink-soft); } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); } .data-age { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .data-age.stale { color: var(--warn); } /* ---------- data tables (detail panels) ---------- */ table.kv { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; } table.kv th, table.kv td { text-align: right; padding: 6px 6px; border-bottom: 1px solid var(--line); } table.kv th:first-child, table.kv td:first-child { text-align: left; } table.kv thead th, table.kv tbody th { color: var(--ink-soft); font-weight: 600; } table.kv thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }