/* Pace design system — design tokens, base styles, and primitive component classes used by the ViewComponents under app/components/. Themes are toggled via [data-theme] on : telemetry (dark terminal), notebook (warm editorial — default), daylight (bold playful). */ :root { /* Telemetry (terminal dark) */ --bg: #07090d; --bg-2: #10161f; --bg-3: #1a2230; --line: #2a3344; --line-2: #3d4858; --fg: #ffffff; --fg-2: #d6dde6; --fg-3: #9aa3af; --fg-4: #5c6573; --accent: #c8ff2e; --accent-2: #4ade80; --accent-warm: #ff9e3d; --danger: #ff5f57; --grid: rgba(255, 255, 255, 0.04); --font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: var(--font-sans); --radius: 6px; --radius-lg: 10px; } [data-theme="notebook"] { --bg: #f7efde; --bg-2: #ebe0c5; --bg-3: #ddcfa9; --line: #b8a47e; --line-2: #8a7857; --fg: #1a1408; --fg-2: #2e2718; --fg-3: #4a4030; --fg-4: #6e6450; --accent: #b03a1c; --accent-2: #1f5536; --accent-warm: #b8651e; --danger: #8b1d0a; --grid: rgba(60, 40, 20, 0.05); --font-display: "Fraunces", "Georgia", serif; } [data-theme="daylight"] { --bg: #ffffff; --bg-2: #f5efe3; --bg-3: #ebe2cc; --line: #0a0a0a; --line-2: #0a0a0a; --fg: #000000; --fg-2: #1a1a1a; --fg-3: #3a3a3a; --fg-4: #6a6a6a; --accent: #e63900; --accent-2: #1d4ed8; --accent-warm: #d99000; --danger: #b91c1c; --grid: rgba(0, 0, 0, 0.06); --font-display: "Space Grotesk", "Inter Tight", sans-serif; } /* ─── Reset on top of Tailwind preflight ─── */ .ds-app, .ds-app * { box-sizing: border-box; } .ds-app { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; min-height: 100vh; } .ds-app a { color: inherit; text-decoration: none; } .ds-app button { font: inherit; color: inherit; } .mono { font-family: var(--font-mono); font-feature-settings: "ss02"; } .display { font-family: var(--font-display); } .tabular { font-variant-numeric: tabular-nums; } /* ─── App shell ─── */ .app-nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); } .app-nav-inner { display: flex; align-items: center; gap: 4px; padding: 0 28px; height: 60px; max-width: 1640px; margin: 0 auto; } .app-nav-menu { display: contents; /* on desktop, children participate in .app-nav-inner's flex */ } .app-nav-links { display: contents; } .app-nav-spacer { flex: 1; } .app-nav-user { display: contents; } .app-nav-toggle { display: none; margin-left: auto; background: none; border: none; width: 40px; height: 40px; border-radius: 6px; cursor: pointer; align-items: center; justify-content: center; } .app-nav-toggle:hover { background: var(--bg-2); } .app-nav-toggle-bars, .app-nav-toggle-bars::before, .app-nav-toggle-bars::after { content: ""; display: block; width: 18px; height: 2px; background: var(--fg); border-radius: 1px; position: relative; } .app-nav-toggle-bars::before { position: absolute; top: -6px; left: 0; } .app-nav-toggle-bars::after { position: absolute; top: 6px; left: 0; } @media (max-width: 860px) { .app-nav-inner { padding: 0 16px; } .app-nav-toggle { display: inline-flex; } .app-nav-menu { display: none; position: absolute; top: 60px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px 12px; flex-direction: column; align-items: stretch; gap: 2px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .app-nav.nav-open .app-nav-menu { display: flex; } .app-nav-links { display: flex; flex-direction: column; gap: 2px; } .app-nav-spacer { display: none; } .app-nav-user { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .app-nav-link { padding: 12px 14px; font-size: 15px; } .app-nav-link.active::after { display: none; } /* underline indicator looks off in a vertical list */ .app-nav-user form { display: block !important; } .app-nav-user .app-nav-link { width: 100%; text-align: left; } } .app-nav-link { background: none; border: none; padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--fg-3); cursor: pointer; border-radius: 4px; transition: color .15s, background .15s; font-family: inherit; letter-spacing: -0.005em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .app-nav-link:hover { color: var(--fg); background: var(--bg-2); } .app-nav-link.active { color: var(--fg); background: var(--bg-2); position: relative; } .app-nav-link.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -10px; height: 2px; background: var(--accent); } .app-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; margin-right: 24px; color: var(--fg); } [data-theme="notebook"] .app-logo { font-style: italic; font-weight: 500; } [data-theme="daylight"] .app-logo { font-weight: 700; } .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .app-main { max-width: 1480px; margin: 0 auto; padding: 36px 28px 40px; } .app-footer { max-width: 1480px; margin: 0 auto; padding: 24px 28px 48px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; } .app-footer .strava-attribution { height: 24px; width: auto; display: block; } /* ─── Page header ─── */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .page-h1 { font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: -0.025em; margin: 0; line-height: 1.05; color: var(--fg); } [data-theme="notebook"] .page-h1 { font-style: italic; font-weight: 500; } [data-theme="daylight"] .page-h1 { font-weight: 700; } .page-sub { margin: 8px 0 0; color: var(--fg-3); font-size: 14px; } .muted { color: var(--fg-3); } /* ─── Panel ─── */ .panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } [data-theme="daylight"] .panel { border-width: 2px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); } .panel-title { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; } .panel-body { padding: 20px; } .panel-body-flush { padding: 0; } /* ─── Tile (KPI) ─── */ .tile { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } [data-theme="daylight"] .tile { border-width: 2px; } .tile-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 8px; font-weight: 500; } .tile-value { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--fg); } [data-theme="notebook"] .tile-value { font-style: italic; font-weight: 500; } [data-theme="daylight"] .tile-value { font-weight: 700; } .tile-unit { font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); margin-left: 6px; font-weight: 400; } .tile-foot { margin: 12px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); } .tile-foot.up { color: var(--accent-2); } .tile-foot.down { color: var(--accent-warm); } /* ─── Tables ─── */ .tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .tbl thead th { text-align: left; padding: 10px 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; border-bottom: 1px solid var(--line); background: var(--bg-2); } .tbl tbody td { padding: 11px 18px; border-bottom: 1px solid var(--line); color: var(--fg-2); vertical-align: middle; } .tbl tbody tr { transition: background .1s; } .tbl tbody tr:hover { background: var(--bg-3); } .tbl tbody tr.clickable { cursor: pointer; } .tbl tbody tr:last-child td { border-bottom: none; } .tbl .num { text-align: right; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; } .tbl th.num { text-align: right; } .tbl a { color: var(--fg); } .tbl a:hover { color: var(--accent); } .activity-name { color: var(--fg); font-weight: 500; } .sport-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); } .sport-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; font-weight: 500; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: all .15s; text-decoration: none; white-space: nowrap; font-family: inherit; } .btn-primary { background: var(--accent); color: #0a0a0a; font-weight: 600; } .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); } .btn-ghost:hover { background: var(--bg-2); border-color: var(--fg-3); } .btn-sm { padding: 6px 12px; font-size: 13px; } [data-theme="daylight"] .btn-primary { color: #fff; } [data-theme="daylight"] .btn-ghost { border-width: 2px; } /* ─── Filter bar ─── */ .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 16px; padding: 14px 18px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); } @media (max-width: 720px) { .filter-bar { gap: 12px; padding: 12px 14px; } .filter-bar .field { flex: 1 1 calc(50% - 6px); min-width: 0; } .filter-bar .field-select, .filter-bar .field-input { min-width: 0; width: 100%; } /* The inline `
` spacer between filters and buttons would steal a whole row at narrow widths — pin it to 0 so buttons wrap naturally next to the checkboxes. */ .filter-bar > div[style*="flex: 1"] { flex: 0 0 0; display: none; } } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; } .field-select, .field-input { background: var(--bg); color: var(--fg); border: 1px solid var(--line-2); border-radius: 4px; padding: 6px 10px; font-family: inherit; font-size: 13px; outline: none; min-width: 130px; } .field-select:focus, .field-input:focus { border-color: var(--accent); } /* ─── Chip / banner ─── */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-2); } .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); } .banner { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; background: var(--bg-2); color: var(--fg); } /* ─── Eyebrow / label ─── */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* ─── Grid helpers ─── */ .ds-grid { display: grid; gap: 16px; } .ds-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ds-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ds-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ds-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 900px) { .ds-grid.cols-2, .ds-grid.cols-3, .ds-grid.cols-4, .ds-grid.cols-5, .ds-grid.cols-6 { grid-template-columns: 1fr; } } /* ─── Section title (between panels on a page) ─── */ .section-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--fg); } [data-theme="notebook"] .section-title { font-style: italic; font-weight: 500; } [data-theme="daylight"] .section-title { font-weight: 700; } /* ─── Inline KV strip (used inside top-line stat panels) ─── */ .kv-strip { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); } .kv-strip > .kv { padding: 16px 20px; border-right: 1px solid var(--line); } .kv-strip > .kv:last-child { border-right: none; } [data-theme="daylight"] .kv-strip > .kv { border-right-width: 2px; } .kv-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 6px; font-weight: 500; } .kv-value { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--fg); } .kv-value.lg { font-size: 22px; } .kv-value .kv-sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); font-weight: 400; margin-left: 6px; } [data-theme="notebook"] .kv-value { font-weight: 500; } [data-theme="daylight"] .kv-value { font-weight: 700; } /* ─── Backlink ─── */ .backlink { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); margin-bottom: 14px; letter-spacing: 0.02em; text-decoration: none; } .backlink:hover { color: var(--fg); } /* ─── Banner variants ─── */ .banner.warn { background: color-mix(in oklch, var(--accent-warm) 12%, var(--bg-2)); border-color: color-mix(in oklch, var(--accent-warm) 40%, var(--line)); } .banner.warn svg { color: var(--accent-warm); flex-shrink: 0; } .banner.info { background: color-mix(in oklch, var(--accent-2) 10%, var(--bg-2)); border-color: color-mix(in oklch, var(--accent-2) 40%, var(--line)); } .banner.danger { background: color-mix(in oklch, var(--danger) 10%, var(--bg-2)); border-color: color-mix(in oklch, var(--danger) 50%, var(--line)); align-items: flex-start; padding: 16px 20px; } .banner.success { background: color-mix(in oklch, var(--accent-2) 12%, var(--bg-2)); border-color: color-mix(in oklch, var(--accent-2) 50%, var(--line)); } .banner.bot { background: var(--bg-2); } /* ─── Tag pills (cache hits, sync log statuses) ─── */ .tag-pill { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 3px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg-3); text-transform: none; } .tag-pill.cached, .tag-pill.success { color: var(--accent-2); border-color: color-mix(in oklch, var(--accent-2) 50%, var(--line)); } .tag-pill.failed { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 50%, var(--line)); } .tag-pill.running { color: var(--accent-warm); border-color: color-mix(in oklch, var(--accent-warm) 50%, var(--line)); } /* ─── Keyboard hint ─── */ .kbd-sm { display: inline-block; padding: 1px 5px; font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--bg-2); color: var(--fg-2); } /* ─── Chat bubbles ─── */ /* Leave room for the 60px sticky .app-nav when scrolled-to via anchor. */ .bubble-user, .bubble-bot, .bubble-tool { scroll-margin-top: 76px; } .bubble-user { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-left: 60px; font-size: 14px; line-height: 1.55; } .bubble-bot { background: var(--bg); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius); padding: 16px 20px; margin-right: 60px; } [data-theme="daylight"] .bubble-user, [data-theme="daylight"] .bubble-bot { border-width: 2px; } [data-theme="daylight"] .bubble-bot { border-left-width: 4px; } .bubble-tag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .bubble-tag .who { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .bubble-tag .who.user { color: var(--fg-3); } /* Tool call (collapsible SQL) */ .bubble-tool { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-right: 60px; font-size: 12px; } .bubble-tool > summary { cursor: pointer; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; list-style: none; } .bubble-tool > summary::-webkit-details-marker { display: none; } .bubble-tool > summary::before { content: "▸ "; display: inline-block; margin-right: 4px; transition: transform .1s; } .bubble-tool[open] > summary::before { content: "▾ "; } .sql-block { font-family: var(--font-mono); font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; margin: 10px 0 0; overflow-x: auto; line-height: 1.55; white-space: pre; color: var(--fg-2); } .sql-kw { color: var(--accent); font-weight: 500; } .sql-fn { color: var(--accent-warm); } .sql-str { color: var(--accent-2); } .sql-num { color: var(--fg); } /* Markdown rendering inside assistant messages */ .chat-md { font-size: 14px; line-height: 1.55; color: var(--fg-2); } .chat-md p { margin: 0 0 12px; } .chat-md p:last-child { margin-bottom: 0; } .chat-md ul { list-style: disc; padding-left: 1.5em; margin: 0.6em 0; } .chat-md ol { list-style: decimal; padding-left: 1.5em; margin: 0.6em 0; } .chat-md li { margin: 0.2em 0; } .chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 { font-family: var(--font-display); font-weight: 600; margin: 1em 0 0.5em; letter-spacing: -0.015em; color: var(--fg); } .chat-md h2 { font-size: 1.2em; } .chat-md h3 { font-size: 1.05em; } .chat-md strong { color: var(--fg); font-weight: 600; } .chat-md em { font-style: italic; } .chat-md code { background: var(--bg-3); padding: 0.1em 0.35em; border-radius: 0.25em; font-size: 0.9em; font-family: var(--font-mono); } .chat-md pre { background: var(--bg); border: 1px solid var(--line); padding: 0.75em; border-radius: 0.5em; overflow-x: auto; margin: 0.6em 0; font-size: 0.85em; font-family: var(--font-mono); } .chat-md pre code { background: transparent; padding: 0; } .chat-md table { border-collapse: collapse; margin: 0.75em 0; font-size: 0.9em; font-variant-numeric: tabular-nums; } .chat-md th, .chat-md td { border: 1px solid var(--line); padding: 0.4em 0.7em; text-align: left; } .chat-md th { background: var(--bg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; } .chat-md a { color: var(--accent); text-decoration: underline; } .chat-md a:hover { text-decoration: none; } .chat-md blockquote { border-left: 3px solid var(--line-2); padding-left: 1em; margin: 0.6em 0; color: var(--fg-3); } .chat-md hr { border: 0; border-top: 1px dashed var(--line-2); margin: 1em 0; } /* Chat composer */ .chat-composer { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-top: 24px; } [data-theme="daylight"] .chat-composer { border-width: 2px; } .chat-composer textarea { width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; color: var(--fg); font: inherit; font-size: 14px; padding: 10px 12px; resize: none; outline: none; box-sizing: border-box; } .chat-composer textarea:focus { border-color: var(--accent); } .chat-composer-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); gap: 12px; flex-wrap: wrap; } /* Example prompt chips */ .prompt-chip { display: inline-flex; align-items: center; padding: 8px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--fg-2); cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s, background .15s; } .prompt-chip:hover { color: var(--fg); border-color: var(--line-2); background: var(--bg-3); } /* ─── Map / route container ─── */ .map-frame { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); height: 400px; overflow: hidden; position: relative; z-index: 0; } [data-theme="daylight"] .map-frame { border-width: 2px; } /* Headwind legend bar */ .legend-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 10px 18px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); } [data-theme="daylight"] .legend-bar { border-width: 2px; } .legend-bar .legend-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); } .legend-swatch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); } .legend-swatch .sw { width: 18px; height: 4px; border-radius: 2px; } /* ─── Best-effort cells ─── */ .effort-cell { padding: 10px 12px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px; display: block; } .effort-cell .name { margin: 0; font-weight: 500; font-size: 13px; color: var(--fg); } .effort-cell .time { font-family: var(--font-mono); margin: 2px 0 0; font-size: 12px; color: var(--fg-2); } .effort-cell .pr { font-family: var(--font-mono); margin: 4px 0 0; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-warm); } /* ─── Sign-in card ─── */ .signin-shell { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; } .signin-card { width: 100%; max-width: 460px; margin: 0 auto; padding: 40px 36px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: left; } [data-theme="daylight"] .signin-card { border-width: 2px; box-shadow: 10px 10px 0 var(--line); } [data-theme="notebook"] .signin-card { box-shadow: 0 8px 0 var(--line-2); } .signin-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; } .signin-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .signin-title { font-family: var(--font-display); font-size: 38px; letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.05; font-weight: 600; color: var(--fg); } [data-theme="notebook"] .signin-title { font-style: italic; font-weight: 500; } [data-theme="daylight"] .signin-title { font-weight: 700; } .signin-lede { margin: 0 0 28px; color: var(--fg-2); font-size: 15px; line-height: 1.5; } .signin-foot { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 20px; text-align: center; letter-spacing: 0.02em; } /* ─── Definition list (used in profile / settings) ─── */ .dl-grid { display: grid; grid-template-columns: 200px 1fr; gap: 12px 24px; font-size: 14px; align-items: center; margin: 0; } .dl-grid dt { color: var(--fg-3); margin: 0; } .dl-grid dd { margin: 0; color: var(--fg); font-weight: 500; } .dl-grid dd.mono { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--fg-2); } /* ─── Pagination ─── */ .pagination { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; flex-wrap: wrap; } .pagination .page-count { color: var(--fg-3); font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .pagination .page-controls { display: inline-flex; align-items: center; gap: 8px; } .pagination a, .pagination .disabled { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--fg-2); font-family: var(--font-mono); font-size: 12px; text-decoration: none; transition: border-color .12s, color .12s; } .pagination a:hover { border-color: var(--accent); color: var(--fg); } .pagination .disabled { color: var(--fg-4); border-color: var(--line); cursor: not-allowed; } .pagination .page-of { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); padding: 0 4px; } /* ─── Spinner (used by pending banners) ─── */ .spinner { width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Page footnote ─── */ .footnote { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); margin-top: 12px; } .footnote a { color: var(--fg-3); text-decoration: underline; } .footnote a:hover { color: var(--fg-2); } /* ─── Danger button ─── */ .btn-danger { background: var(--danger); color: #fff; font-weight: 600; } .btn-danger:hover { transform: translateY(-1px); filter: brightness(1.05); } /* ─── Visually hidden but accessible ─── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ─── Pinned chat answers ─── */ .tag-pill.pinned { color: var(--accent-warm); border-color: color-mix(in oklch, var(--accent-warm) 50%, var(--line)); cursor: pointer; } form.inline { display: inline; margin: 0; } .chat-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 1000px) { .chat-layout { grid-template-columns: minmax(0, 1fr) 280px; } } .chat-main { min-width: 0; max-width: 880px; } .chat-pinned-sidebar { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; font-size: 13px; align-self: start; } @media (min-width: 1000px) { /* Offset by the 60px sticky .app-nav + a little breathing room. */ .chat-pinned-sidebar { position: sticky; top: 84px; max-height: calc(100vh - 108px); overflow: auto; } } .chat-pinned-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .chat-pinned-viewall { font-family: var(--font-mono); font-size: 10px; color: var(--accent); text-decoration: none; text-transform: none; letter-spacing: 0; } .chat-pinned-viewall:hover { text-decoration: underline; } .chat-pinned-empty { font-size: 12px; margin: 0; } .chat-pinned-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .chat-pinned-item { line-height: 1.4; } .chat-pinned-link { display: block; color: var(--fg-2); text-decoration: none; padding: 6px 8px; border-radius: 4px; border-left: 2px solid transparent; transition: background .12s, border-color .12s, color .12s; } .chat-pinned-link:hover { background: var(--bg-3); border-left-color: var(--accent-warm); color: var(--fg); } .chat-pinned-pair { display: flex; flex-direction: column; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .chat-pinned-pair:last-child { border-bottom: 0; } .chat-pinned-pair-foot { display: flex; justify-content: flex-end; }