/* ============================================================ THE TRAIN CLOCK · ARRIVALS — modern UI / live data terminal typography: Bricolage Grotesque (display, variable width), Mona Sans (UI), Geist Mono (data + numerals). ============================================================ */ :root { /* — INK ——————————————— */ --bg-0: #02060f; --bg-1: #050b1a; --bg-2: #0a1224; /* — SURFACES (cool-tinted glass) ————— */ --surf-1: rgba(255, 255, 255, 0.025); --surf-2: rgba(255, 255, 255, 0.045); --surf-3: rgba(255, 255, 255, 0.07); /* — BORDERS & RULES ————— */ --hairline: rgba(255, 255, 255, 0.06); --hairline-strong: rgba(255, 255, 255, 0.12); --edge-sheen: rgba(255, 255, 255, 0.18); /* — TEXT ————————————— */ --text: #f0f4fc; --text-dim: #d2dae8; --text-faint: #a4b0c8; /* — ACCENTS ———————————— */ --accent: #60a5fa; /* electric blue */ --accent-hot: #38bdf8; /* cyan kick */ --accent-soft: rgba(96, 165, 250, 0.12); --accent-glow: rgba(96, 165, 250, 0.36); --accent-line: rgba(96, 165, 250, 0.55); /* — STATUS ————————————— */ --green: #34d399; --amber: #fbbf24; --rose: #fb7185; --rose-glow: rgba(251, 113, 133, 0.45); /* — TYPE ————————————— */ --display: 'Bricolage Grotesque', system-ui, sans-serif; --sans: 'Mona Sans', system-ui, -apple-system, sans-serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* — MOTION ————————————— */ --ease: cubic-bezier(0.2, 0.85, 0.25, 1); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); color-scheme: dark; } /* ============================================================ LIGHT THEME — opt-in via [data-theme="light"] on Same accent + structure; everything else inverts. ============================================================ */ :root[data-theme="light"] { --bg-0: #f4f6fb; --bg-1: #ffffff; --bg-2: #eef1f7; --surf-1: rgba(15, 23, 42, 0.025); --surf-2: rgba(15, 23, 42, 0.045); --surf-3: rgba(255, 255, 255, 0.78); /* frosted-white card */ --hairline: rgba(15, 23, 42, 0.08); --hairline-strong: rgba(15, 23, 42, 0.16); --edge-sheen: rgba(255, 255, 255, 0.7); --text: #0a0e1a; --text-dim: #4a536b; --text-faint: #8d97ad; --accent: #2563eb; --accent-hot: #0ea5e9; --accent-soft: rgba(37, 99, 235, 0.10); --accent-glow: rgba(37, 99, 235, 0.30); --accent-line: rgba(37, 99, 235, 0.55); --rose-glow: rgba(220, 38, 38, 0.28); color-scheme: light; } /* Light-mode element overrides (for places that hardcode dark assumptions) */ [data-theme="light"] body { background: var(--bg-0); } [data-theme="light"] .ambient-glow { background: radial-gradient(ellipse 60% 45% at 12% 0%, rgba(96, 165, 250, 0.10), transparent 70%), radial-gradient(ellipse 50% 40% at 92% 100%, rgba(56, 189, 248, 0.06), transparent 70%), linear-gradient(180deg, var(--bg-0), var(--bg-1)); } [data-theme="light"] .ambient-grid { background-image: linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px); } [data-theme="light"] .ambient-scan { background-image: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(15, 23, 42, 0.018) 2px, rgba(15, 23, 42, 0.018) 3px ); mix-blend-mode: multiply; } [data-theme="light"] .ambient-vignette { background: radial-gradient(ellipse at center, transparent 70%, rgba(15, 23, 42, 0.06) 100%); } [data-theme="light"] .masthead { background: rgba(244, 246, 251, 0.78); } [data-theme="light"] .wordmark { background: linear-gradient(180deg, #0a0e1a 0%, #2563eb 100%); -webkit-background-clip: text; background-clip: text; } [data-theme="light"] .station { /* solid-ish frosted card on light background */ background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px -10px rgba(15, 23, 42, 0.18); } [data-theme="light"] .sheet { background: rgba(15, 23, 42, 0.45); } [data-theme="light"] .sheet-panel { background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 30px 80px -20px rgba(15, 23, 42, 0.30); } [data-theme="light"] .sheet-search, [data-theme="light"] .field input { background: rgba(15, 23, 42, 0.04); } [data-theme="light"] .field input:focus, [data-theme="light"] .sheet-search:focus-within { background: rgba(15, 23, 42, 0.02); } [data-theme="light"] .btn-primary { color: #ffffff; } [data-theme="light"] .arrival-circle { /* train-circle highlight reads better with stronger inner top-light on white */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.10); } [data-theme="light"] .live[data-state="dead"] { color: #b91c1c; } [data-theme="light"] .colophon-clock .colophon-val { color: var(--accent); } /* — RESET ——————————————— */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: var(--bg-0); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; overflow-x: hidden; min-height: 100dvh; display: flex; flex-direction: column; } button { font-family: inherit; font-size: inherit; background: none; border: none; color: inherit; cursor: pointer; } input { font-family: inherit; font-size: inherit; } ::selection { background: var(--accent); color: var(--bg-0); } /* — AMBIENT BG —————————— */ .ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .ambient-glow { position: absolute; inset: -10%; background: radial-gradient(ellipse 60% 45% at 12% 0%, rgba(96, 165, 250, 0.16), transparent 70%), radial-gradient(ellipse 50% 40% at 92% 100%, rgba(56, 189, 248, 0.10), transparent 70%), linear-gradient(180deg, var(--bg-0), var(--bg-1)); } .ambient-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(96, 165, 250, 0.030) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 165, 250, 0.030) 1px, transparent 1px); background-size: 80px 80px; background-position: 50% 0; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%); } /* Very faint scanline, signals "live data terminal" without being cheesy */ .ambient-scan { position: absolute; inset: 0; background-image: repeating-linear-gradient( 180deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.014) 2px, rgba(255, 255, 255, 0.014) 3px ); mix-blend-mode: overlay; } .ambient-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); } /* — MASTHEAD ————————————— */ .masthead { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); background: rgba(2, 6, 15, 0.72); } .masthead-inner { max-width: 1180px; margin: 0 auto; padding: clamp(14px, 3vw, 22px) clamp(16px, 4vw, 32px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; } .masthead-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--hairline-strong) 12%, var(--accent-line) 50%, var(--hairline-strong) 88%, transparent ); opacity: 0.7; } .brand { display: flex; align-items: baseline; gap: 14px; min-width: 0; } .kicker { font-family: var(--mono); font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-faint); } .kicker-sep { color: var(--accent); font-weight: 700; margin: 0 2px; } .wordmark { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 5vw, 38px); font-variation-settings: 'opsz' 96; letter-spacing: -0.02em; line-height: 1; background: linear-gradient(180deg, #ffffff 0%, #b9c7e0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; } .wordmark-cursor { display: inline-block; width: 0.55ch; height: 0.85em; background: var(--accent); margin-left: 4px; vertical-align: -0.04em; border-radius: 1px; animation: cursor-blink 1.6s steps(2, end) infinite; box-shadow: 0 0 12px var(--accent-glow); } @keyframes cursor-blink { to { opacity: 0; } } .edition { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-faint); } @media (max-width: 540px) { .edition { display: none; } } .masthead-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--hairline-strong); border-radius: 999px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); position: relative; } .live::after { /* faint outer ring on fresh state */ content: ''; position: absolute; inset: -1px; border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 0 var(--accent-glow); transition: box-shadow 0.4s; } .live[data-state="fresh"]::after { box-shadow: 0 0 0 4px var(--accent-soft); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); transition: background 0.4s; } .live[data-state="fresh"] { color: var(--text); border-color: var(--accent-soft); background: var(--accent-soft); } .live[data-state="fresh"] .live-dot { background: var(--accent); animation: dot-breathe 2.4s ease-in-out infinite; } @keyframes dot-breathe { 0%, 100% { box-shadow: 0 0 4px var(--accent-glow); } 50% { box-shadow: 0 0 12px var(--accent-glow); } } .live[data-state="stale"] .live-dot { background: var(--amber); box-shadow: 0 0 6px rgba(251, 191, 36, 0.5); } .live[data-state="dead"] { color: var(--rose); border-color: rgba(251, 113, 133, 0.30); } .live[data-state="dead"] .live-dot { background: var(--rose); box-shadow: 0 0 8px var(--rose-glow); } .iconbtn { width: 34px; height: 34px; border: 1px solid var(--hairline-strong); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; } .iconbtn:hover { background: var(--surf-3); border-color: var(--accent-soft); color: var(--text); } .iconbtn:active { transform: scale(0.96); } .iconbtn-sm { width: 28px; height: 28px; border-radius: 6px; } /* Theme-toggle icon swap. Default (no data-theme set) = dark, so show moon. */ .icon-sun, .icon-moon { display: block; } [data-theme="light"] .icon-moon, :root:not([data-theme]) .icon-sun, [data-theme="dark"] .icon-sun { display: none; } /* — PAGE ————————————————— */ .page { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(20px, 4vw, 36px) clamp(16px, 4vw, 32px) 32px; } .board { position: relative; } /* — EMPTY STATE ———————————— */ .board-empty { text-align: center; padding: clamp(72px, 12vw, 120px) 16px; position: relative; } .board-empty-title { font-family: var(--display); font-weight: 600; font-variation-settings: 'opsz' 64, 'wght' 600; font-size: clamp(28px, 5vw, 44px); letter-spacing: -0.02em; line-height: 1.1; color: var(--text); margin: 0; } .board-empty-sub { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-faint); margin-top: 14px; } /* — STATIONS GRID ———————— */ .stations { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 880px) { .stations { grid-template-columns: 1fr 1fr; gap: 16px; } } /* — STATION CARD ————————— */ .station { position: relative; background: linear-gradient(180deg, var(--surf-3) 0%, var(--surf-1) 100%); border: 1px solid var(--hairline); border-radius: 10px; padding: 16px 16px 14px; overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.3s, background 0.3s; animation: station-rise 0.55s var(--ease-out) backwards; /* subtle inner shadow so glass feels concave at the top */ box-shadow: inset 0 1px 0 var(--edge-sheen), 0 8px 24px -12px rgba(0, 0, 0, 0.6); } @keyframes station-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* primary-line accent stripe at top */ .station::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent, var(--accent)) 0%, var(--accent-hot, var(--accent)) 50%, var(--accent, var(--accent)) 100% ); opacity: 0.85; filter: blur(0.3px); } /* corner accent crosshair — subtle UI/HUD detail */ .station::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); opacity: 0.4; pointer-events: none; } .station:hover { border-color: var(--hairline-strong); transform: translateY(-1px); } .station-head { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 12px; } .station-name-wrap { min-width: 0; } .station-name { font-family: var(--display); font-weight: 600; font-variation-settings: 'opsz' 36; font-size: clamp(17px, 2.6vw, 21px); letter-spacing: -0.018em; line-height: 1.1; color: var(--text); word-break: break-word; } .station-id { display: block; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.20em; color: var(--text-faint); margin-top: 4px; } .station-lines { display: flex; gap: 4px; flex-shrink: 0; } .line-pill { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 700; flex-shrink: 0; /* subtle inner highlight to make it feel rendered, not pasted */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.15); } .station-remove { width: 24px; height: 24px; border: 1px solid transparent; border-radius: 6px; color: var(--text-faint); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s, border-color 0.2s; } .station-remove:hover { color: var(--rose); border-color: rgba(251, 113, 133, 0.32); background: rgba(251, 113, 133, 0.06); } /* — DIRECTIONS ————————— */ .directions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .direction { min-width: 0; position: relative; } .direction + .direction { border-left: 1px solid var(--hairline); padding-left: 12px; } .direction-label { font-family: var(--mono); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.20em; color: var(--text-faint); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; white-space: nowrap; } .direction-label::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0.55; flex-shrink: 0; } .direction-label::after { content: ''; flex: 1; height: 1px; background: var(--hairline); } .arrivals { display: flex; flex-direction: column; gap: 6px; min-height: 78px; } .arrival { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: center; font-family: var(--mono); } .arrival-circle { width: 22px; height: 22px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; position: relative; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.15); } /* subtle outer glow ring on the circle */ .arrival-circle::after { content: ''; position: absolute; inset: -2px; border-radius: 999px; border: 1px solid currentColor; opacity: 0.18; pointer-events: none; } .arrival-time { font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; } .arrival-time .unit { font-size: 9.5px; color: var(--text-faint); margin-left: 3px; text-transform: uppercase; letter-spacing: 0.10em; font-weight: 500; } .arrival.urgent .arrival-time { color: var(--rose); font-weight: 700; text-shadow: 0 0 12px var(--rose-glow); animation: urgent-pulse 2.4s ease-in-out infinite; } .arrival.soon .arrival-time { color: var(--amber); } @keyframes urgent-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } } .arrival-empty, .arrival-loading, .arrival-error { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-faint); padding: 4px 0; } .arrival-error { color: var(--rose); } .arrival-loading { color: var(--accent); } /* — ADD STATION CTA ———————— */ .add-station { margin-top: 16px; width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px dashed var(--hairline-strong); border-radius: 10px; background: transparent; color: var(--text); text-align: left; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s; position: relative; overflow: hidden; } .add-station::before { /* moving accent shimmer along the dashed border on hover */ content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, var(--accent-soft) 50%, transparent 100% ); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .add-station:hover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); } .add-station:hover::before { opacity: 1; } .add-station-plus { width: 28px; height: 28px; border: 1px solid var(--accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 300; font-size: 18px; line-height: 0.6; color: var(--accent); transition: transform 0.35s var(--ease), background 0.25s, color 0.25s; } .add-station:hover .add-station-plus { transform: rotate(90deg); background: var(--accent); color: var(--bg-0); } .add-station-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .add-station-label { font-family: var(--display); font-weight: 600; font-variation-settings: 'opsz' 24; font-size: 16px; letter-spacing: -0.012em; } .add-station-hint { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-faint); } /* — COLOPHON ————————————— */ .colophon { width: 100%; max-width: 1180px; margin: 32px auto 0; padding: 16px clamp(16px, 4vw, 32px) clamp(20px, 4vw, 32px); border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; } @media (max-width: 600px) { .colophon { grid-template-columns: 1fr 1fr; gap: 8px; } .colophon-credit { display: none; } } .colophon-cell { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-faint); white-space: nowrap; } .colophon-key { color: var(--text-faint); } .colophon-val { color: var(--text-dim); font-variant-numeric: tabular-nums; } .colophon-clock { justify-self: center; } .colophon-clock .colophon-val { color: var(--accent); } .colophon-credit { justify-self: end; color: var(--text-faint); } /* — SHEET (MODAL) ————————— */ .sheet { position: fixed; inset: 0; background: rgba(2, 6, 15, 0.80); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); z-index: 100; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease); } @media (min-width: 720px) { .sheet { align-items: center; padding: 40px 16px; } } .sheet.open { opacity: 1; pointer-events: auto; } .sheet-panel { position: relative; width: 100%; max-width: 540px; max-height: 88dvh; background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%); border: 1px solid var(--hairline-strong); border-bottom: none; border-radius: 12px 12px 0 0; padding: 18px 20px 20px; display: flex; flex-direction: column; transform: translateY(40px); transition: transform 0.32s var(--ease); overflow: hidden; box-shadow: inset 0 1px 0 var(--edge-sheen), 0 -20px 60px -10px rgba(96, 165, 250, 0.10), 0 -2px 0 0 var(--accent-soft); } .sheet.open .sheet-panel { transform: translateY(0); } @media (min-width: 720px) { .sheet-panel { border-radius: 10px; border-bottom: 1px solid var(--hairline-strong); transform: translateY(20px) scale(0.97); box-shadow: inset 0 1px 0 var(--edge-sheen), 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 80px -20px var(--accent-soft); } .sheet.open .sheet-panel { transform: translateY(0) scale(1); } } .sheet-rule { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent-hot) 50%, var(--accent) 70%, transparent 100% ); filter: blur(0.4px); } .sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .sheet-kicker { font-family: var(--mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.20em; color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; } .sheet-kicker::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; box-shadow: 0 0 8px var(--accent-glow); } /* — SEARCH ——————————————— */ .sheet-search { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; border: 1px solid var(--hairline-strong); border-radius: 8px; padding: 0 12px; margin-bottom: 12px; background: rgba(0, 0, 0, 0.30); transition: border-color 0.2s, box-shadow 0.2s; } .sheet-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .sheet-search-glyph { font-family: var(--sans); font-size: 16px; color: var(--text-faint); line-height: 1; } .sheet-search input { background: transparent; border: none; color: var(--text); padding: 12px 0; font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: -0.005em; width: 100%; } .sheet-search input::placeholder { color: var(--text-faint); } .sheet-search input:focus { outline: none; } .sheet-search input::-webkit-search-cancel-button { display: none; } /* — PICKER LIST ————————— */ .sheet-list { flex: 1; overflow-y: auto; margin: 0 -8px -8px; padding: 4px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; } .sheet-list::-webkit-scrollbar { width: 6px; } .sheet-list::-webkit-scrollbar-track { background: transparent; } .sheet-list::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 3px; } .sheet-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 10px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: background 0.12s, border-color 0.12s, padding 0.12s; } .sheet-item:hover { background: var(--accent-soft); border-color: var(--accent-soft); padding-left: 14px; } .sheet-item-name { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--text); letter-spacing: -0.005em; line-height: 1.3; word-break: break-word; } .sheet-item-id { display: block; font-family: var(--mono); font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.16em; margin-top: 2px; } .sheet-item-lines { display: flex; gap: 3px; flex-shrink: 0; } .sheet-item-lines .line-pill { width: 18px; height: 18px; font-size: 10px; } .sheet-empty { text-align: center; padding: 36px 16px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-faint); } /* — SETTINGS ————————————— */ .settings-body { display: flex; flex-direction: column; gap: 16px; } .settings-explainer { font-family: var(--sans); font-size: 13px; color: var(--text-dim); line-height: 1.6; } .settings-explainer code { font-family: var(--mono); font-size: 11.5px; background: var(--accent-soft); color: var(--accent); padding: 2px 6px; border-radius: 3px; letter-spacing: 0; } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-family: var(--mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.20em; color: var(--text-faint); } .field input { background: rgba(0, 0, 0, 0.30); border: 1px solid var(--hairline-strong); border-radius: 6px; padding: 11px 12px; color: var(--text); font-family: var(--mono); font-size: 12.5px; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .field input:focus { outline: none; border-color: var(--accent); background: rgba(0, 0, 0, 0.40); box-shadow: 0 0 0 3px var(--accent-soft); } .field small { font-family: var(--mono); font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.10em; } .settings-actions { display: flex; gap: 10px; margin-top: 4px; } .btn-primary, .btn-ghost { flex: 1; padding: 11px 18px; border-radius: 6px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s; } .btn-primary { background: var(--accent); color: var(--bg-0); position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: translateX(-100%); transition: transform 0.5s var(--ease); } .btn-primary:hover::after { transform: translateX(100%); } .btn-primary:hover { background: var(--accent-hot); } .btn-primary:active { transform: scale(0.98); } .btn-ghost { border: 1px solid var(--hairline-strong); color: var(--text); background: transparent; } .btn-ghost:hover { border-color: var(--text); background: var(--surf-2); } /* — REDUCED MOTION ———————— */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }