/* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: #4a1d3f; /* forest-black */ font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: #f0e6e0; } /* Links inherit the surrounding text color by default instead of the browser's blue/purple visited-link default, which was the main thing making the sidebar footer (Privacy · Terms · Local Storage) look broken against the dark theme. */ a { color: inherit; text-decoration: none; } a:hover { color: var(--sand); } /* ============================================ DESIGN TOKENS ============================================ */ :root { --sidebar-width: 260px; --header-height: 64px; --radius: 12px; --radius-lg: 18px; /* New palette */ --wine-black: #4a1d3f; --wine-deep: #3b1730; --wine-dark: #2a1120; --forest-black: #263920; --forest-deep: #5c6b3a; --forest-dark: #416b3a; --forest-mid: #8b2e3b; --forest-muted: #5c6b3a; --wine-muted: #4e2c45; --forest-border: rgba(201, 106, 74, 0.2); --wine-border: rgba(201, 106, 74, 0.2); --forest-glow: rgba(201, 106, 74, 0.06); --text: #f0e6e0; --text-dim: #d0c0b0; --text-muted: #a09080; --sand: #c9a86a; --sand-dim: #b89458; --sand-faint: rgba(201, 168, 106, 0.1); --ember: #c06b4f; --ember-hot: #c06b4f; --ember-faint: rgba(192, 107, 79, 0.1); --sky: #38bdf8; --ease: cubic-bezier(0.22, 0.68, 0, 1.2); /* Type system — these families are loaded in but were never wired to a variable, so every element below was silently falling back to the browser default and losing its intended voice. */ --font-head: 'Bebas Neue', system-ui, sans-serif; /* condensed display: wordmark, headlines, big stats */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* structural chrome: labels, tags, tables */ --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* reading copy, nav, forms */ /* wine-mid sits between wine-deep and wine-muted for a legible idle -> hover progression on wine-toned chrome (e.g. #hamburger) */ --wine-mid: #452038; --shadow-sm: 0 4px 14px rgba(7, 4, 6, 0.28); --shadow-md: 0 14px 34px rgba(7, 4, 6, 0.38); /* Compatibility aliases: some standalone panels (e.g. panel-location-risk.html) ship with their own fallback token names for when they're viewed outside the shell. Defining the same names here means the real site palette wins once this stylesheet loads, instead of leaving their placeholder greens. */ --bg: var(--forest-black); --pine: var(--sand); --pine-glow: color-mix(in srgb, var(--sand) 82%, white); --border: var(--forest-border); } /* ============================================ SCROLLBARS ============================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--forest-muted); border-radius: 8px; } /* ============================================ LAYOUT ============================================ */ #shell { display: flex; height: 100dvh; width: 100%; position: relative; overflow: hidden; padding-top: var(--native-safe-area-top, env(safe-area-inset-top)); } /* ----- SIDEBAR ----- */ #sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--wine-deep); border-right: 1px solid var(--wine-border); display: flex; flex-direction: column; position: relative; z-index: 200; transition: transform 0.3s var(--ease), width 0.3s var(--ease); overflow-y: auto; overflow-x: hidden; padding-top: var(--native-safe-area-top, env(safe-area-inset-top)); } /* Brand area */ .brand { height: var(--header-height); display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--forest-border); flex-shrink: 0; } .brand-icon { width: 32px; height: 32px; background: var(--sand); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-icon svg { width: 18px; height: 18px; } .brand-name { font-family: var(--font-head); font-size: 1.7rem; font-weight: 400; letter-spacing: 0.04em; color: #f0e6e0; line-height: 1; white-space: nowrap; } .brand-tag { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } /* Navigation */ .nav-section { padding: 20px 16px 8px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; } .nav-list { list-style: none; padding: 0 12px; } .nav-item { margin-bottom: 4px; } .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; cursor: pointer; color: var(--text-dim); font-size: 0.95rem; font-weight: 500; white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s; border: 1px solid transparent; } .nav-link:hover { background: var(--sand-faint); color: var(--text); } .nav-link:focus-visible { outline: 2px solid var(--sand); outline-offset: -1px; } .nav-link.active { background: rgba(201, 168, 106, 0.15); color: var(--sand); border-color: rgba(201, 168, 106, 0.3); } .nav-link .nav-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* This build ships without sidebar icons (see markup), so the reserved 20px icon slot is dropped rather than left as blank space — this replaces an earlier !important override that force-centered the label text instead, which is what was throwing the row out of line with the badge on "Upload & Jobs" / "Property Maps". */ #sidebar .nav-list .nav-icon { display: none; } .nav-badge { margin-left: auto; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--ember-faint); color: var(--ember); border: 1px solid rgba(192, 107, 79, 0.3); border-radius: 20px; padding: 2px 8px; flex-shrink: 0; } .nav-badge.live { background: rgba(192, 107, 79, 0.15); color: var(--ember-hot); border-color: rgba(192, 107, 79, 0.3); } /* Sidebar footer */ .sidebar-footer { margin-top: auto; padding: 20px 18px; border-top: 1px solid var(--wine-border); background: var(--wine-black); font-size: 0.8rem; color: var(--text-dim); line-height: 1.6; word-break: break-word; } /* ----- MAIN CONTENT AREA ----- */ #main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--forest-black); } /* Top bar */ #topbar { height: var(--header-height); background: var(--forest-deep); border-bottom: 1px solid var(--forest-border); display: flex; align-items: center; gap: 16px; padding: 0 20px; flex-shrink: 0; } #hamburger { width: 40px; height: 40px; border: 1px solid var(--wine-border); background: var(--wine-mid); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s; } #hamburger:hover { background: var(--wine-muted); } #hamburger svg { display: block; } #topbar-title { font-size: 0.85rem; font-weight: 500; color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-status { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text-muted); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.9); } } /* Content panels */ #content { flex: 1; overflow: hidden; position: relative; } .panel { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; transform: translateY(8px); } .panel.active { opacity: 1; pointer-events: auto; transform: translateY(0); } /* ============================================ SIDEBAR COLLAPSE (DESKTOP) ============================================ */ body.sidebar-closed #sidebar { width: 0; } /* ============================================ MOBILE OVERLAY & SIDEBAR BEHAVIOR ============================================ */ @media (max-width: 768px) { #sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 300; transform: translateX(0); width: var(--sidebar-width); transition: transform 0.3s var(--ease); } body.sidebar-closed #sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); width: var(--sidebar-width); } #overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(3px); z-index: 250; } body:not(.sidebar-closed) #overlay { display: block; } } /* ============================================ TYPOGRAPHY & GLOBAL READABILITY ============================================ */ h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; color: #f0e6e0; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1rem; } p, li, .text-body { font-size: 1rem; line-height: 1.5; } /* ============================================ PANEL HEADER & CONTENT ============================================ */ .panel-header { padding: 32px 32px 20px; border-bottom: 1px solid var(--forest-border); background: linear-gradient(to bottom, var(--forest-dark), transparent); } .panel-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .panel-title { font-family: var(--font-head); font-size: 2.7rem; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: #f0e6e0; line-height: 1.1; } .panel-subtitle { margin-top: 8px; font-size: 1rem; color: var(--text-dim); max-width: 640px; line-height: 1.5; } .panel-body { padding: 28px 32px 48px; } @media (max-width: 768px) { .panel-header { padding: 24px 20px 16px; } .panel-body { padding: 20px 20px 40px; } .panel-title { font-size: 1.8rem; } } /* ============================================ CARD COMPONENTS ============================================ */ .card { background: var(--forest-dark); border: 1px solid var(--forest-border); border-radius: var(--radius-lg); padding: 24px; position: relative; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .card:hover { border-color: var(--sand-dim); box-shadow: var(--shadow-sm); } .card-title { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sand); margin-bottom: 10px; } .card-value { font-family: var(--font-head); font-size: 2.6rem; font-weight: 400; letter-spacing: 0.01em; color: var(--sand); line-height: 1; margin-bottom: 6px; } .card-sub { font-size: 0.85rem; color: var(--text-dim); } .card.fire .card-value { color: var(--ember-hot); } .card.warn .card-value { color: var(--ember); } .card.sky .card-value { color: var(--sky); } .card-accent { position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sand); } .card.fire .card-accent { background: var(--ember-hot); } .card.warn .card-accent { background: var(--ember); } .card.sky .card-accent { background: var(--sky); } /* ============================================ GRID & UTILITY ============================================ */ .grid-2, .grid-3 { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* ============================================ FORM ELEMENTS ============================================ */ .field { margin-bottom: 20px; } .field-label { display: block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .field input, .field select, .field textarea { width: 100%; background: #1f0e18; border: 1px solid var(--forest-muted); border-radius: 10px; color: var(--text); font-size: 0.95rem; padding: 12px 14px; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sand-dim); box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.2); } .field textarea { min-height: 100px; resize: vertical; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 26px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; cursor: pointer; border: none; transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, border-color 0.15s ease; background: var(--forest-mid); color: var(--text); } .btn:hover { transform: translateY(-1px); filter: brightness(1.08); } .btn:active { transform: translateY(0); filter: brightness(0.96); } .btn:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; } .btn-primary { background: var(--sand); color: var(--wine-dark); } .btn-secondary { background: var(--forest-dark); border: 1px solid var(--forest-muted); } .btn-secondary:hover { border-color: var(--sand-dim); } .btn-danger { background: rgba(192, 107, 79, 0.2); color: var(--ember-hot); border: 1px solid rgba(192, 107, 79, 0.3); } .btn-amber { background: rgba(192, 107, 79, 0.2); color: var(--ember); border: 1px solid rgba(192, 107, 79, 0.3); } .btn-sm { padding: 8px 18px; font-size: 0.8rem; } .btn-full { width: 100%; } /* ============================================ ALERTS & BADGES ============================================ */ .alert-banner { border-radius: var(--radius); padding: 14px 18px; display: flex; gap: 12px; margin-bottom: 18px; font-size: 0.9rem; } .alert-banner.danger { background: rgba(192, 107, 79, 0.12); border: 1px solid rgba(192, 107, 79, 0.25); } .alert-banner.warning { background: var(--ember-faint); border: 1px solid rgba(192, 107, 79, 0.25); } .alert-banner.info { background: var(--sand-faint); border: 1px solid var(--forest-border); } .alert-content strong { display: block; margin-bottom: 4px; font-size: 0.95rem; } .alert-content span { font-size: 0.85rem; color: var(--text-dim); } .tag { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; padding: 4px 10px; border-radius: 20px; font-weight: 500; } .tag-sand { background: var(--sand-faint); color: var(--sand); border: 1px solid rgba(201, 168, 106, 0.3); } .tag-fire { background: rgba(192, 107, 79, 0.12); color: var(--ember-hot); border: 1px solid rgba(192, 107, 79, 0.3); } .tag-ember { background: var(--ember-faint); color: var(--ember); border: 1px solid rgba(192, 107, 79, 0.3); } .tag-sky { background: rgba(56, 189, 248, 0.1); color: var(--sky); border: 1px solid rgba(56, 189, 248, 0.3); } /* ============================================ DROPZONE & MAP OVERRIDES ============================================ */ .drop-zone { border: 2px dashed var(--forest-muted); border-radius: var(--radius-lg); padding: 36px 24px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--sand-faint); color: var(--text-dim); } .drop-zone:hover, .drop-zone.dragover { border-color: var(--sand); background: rgba(201, 168, 106, 0.15); color: var(--text); } .drop-zone.has-file { border-color: var(--sand); background: rgba(201, 168, 106, 0.12); } /* Map panels */ #panel-wildfire-map, #panel-forestry-map { display: flex; flex-direction: column; padding: 0; } .map-panel-header { padding: 16px 24px; background: var(--forest-deep); border-bottom: 1px solid var(--forest-border); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .map-panel-title { font-size: 1.4rem; font-weight: 700; color: #f0e6e0; } .map-panel-sub { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); } .map-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; background: var(--forest-black); } .map-placeholder-text { color: var(--text-dim); font-size: 0.9rem; max-width: 500px; margin-top: 16px; } .map-iframe-wrap { flex: 1; height: 100%; } .map-iframe-wrap iframe { width: 100%; height: 100%; border: none; } /* ============================================ PREDICTION & RESULTS ============================================ */ .prediction-result { display: none; margin-top: 24px; background: var(--forest-dark); border: 1px solid var(--forest-border); border-radius: var(--radius-lg); overflow: hidden; } .prediction-result.visible { display: block; } .result-header { padding: 16px 20px; background: var(--forest-mid); border-bottom: 1px solid var(--forest-border); display: flex; justify-content: space-between; align-items: center; } .result-header-title { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .result-score { font-family: var(--font-head); font-size: 2.1rem; font-weight: 400; } .result-body { padding: 20px; } /* ============================================ TABLES ============================================ */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .data-table th { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 12px 12px; text-align: left; border-bottom: 1px solid var(--forest-border); } .data-table td { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); color: var(--text-dim); } .data-table tr:hover td { background: var(--sand-faint); color: var(--text); } /* ============================================ HOME & FEATURE CARDS ============================================ */ .home-hero { background: linear-gradient(135deg, var(--forest-dark), #1a0d14); border: 1px solid var(--forest-border); border-radius: var(--radius-lg); padding: 36px; margin-bottom: 28px; position: relative; overflow: hidden; } .home-hero-tag { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); margin-bottom: 12px; } .home-hero-title { font-family: var(--font-head); font-size: 3rem; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: #f0e6e0; line-height: 1.1; margin-bottom: 16px; } .home-hero-body { font-size: 1rem; color: var(--text-dim); max-width: 600px; line-height: 1.6; margin-bottom: 24px; } .quick-actions { display: flex; flex-wrap: wrap; gap: 12px; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 16px; } .feature-item { position: relative; background-size: cover; background-position: center; border-radius: 1rem; padding: 1rem; display: flex; align-items: center; gap: 1rem; min-height: 180px; border: 1px solid var(--forest-border); background-color: var(--forest-dark); transition: all 0.2s ease; cursor: pointer; } .feature-item:hover { background-size: 150%; border-color: var(--sand); background-color: rgba(201, 168, 106, 0.05); } .feature-item-icon { width: 48px; height: 48px; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; flex-shrink: 0; } .feature-item-text-wrapper { background-color: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); padding: 0.75rem 1rem; border-radius: 0.75rem; flex: 1; } .feature-item-title { font-weight: bold; color: white; margin-bottom: 0.25rem; } .feature-item-desc { font-size: 0.875rem; color: #f0f0f0; line-height: 1.4; } /* ============================================ UTILITIES & FIXES ============================================ */ .coord-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; } @media (max-width: 560px) { .coord-row { grid-template-columns: 1fr 1fr; } } .photo-tabs { display: flex; gap: 8px; margin-bottom: 16px; } .photo-tab { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--forest-muted); background: transparent; color: var(--text-dim); font-size: 0.9rem; font-weight: 500; cursor: pointer; text-align: center; } .photo-tab.active { background: var(--sand-faint); border-color: var(--sand); color: var(--sand); } .subscribe-card { background: linear-gradient(135deg, var(--forest-dark), var(--forest-mid)); border-radius: var(--radius-lg); padding: 32px; text-align: center; border: 1px solid var(--forest-border); } .subscribe-title { font-family: var(--font-head); font-size: 2.2rem; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 12px; } .subscribe-input-row { display: flex; gap: 12px; max-width: 480px; margin: 20px auto 0; } .subscribe-input-row input { flex: 1; } .run-item { padding: 16px 14px; border-radius: 10px; border: 1px solid var(--forest-border); background: var(--forest-dark); font-size: 0.9rem; line-height: 1.5; color: var(--text-dim); cursor: pointer; transition: all 0.2s; word-break: break-word; } .run-item:hover { background: var(--sand-faint); border-color: var(--sand); color: var(--text); } .run-item.selected { background: rgba(201, 168, 106, 0.15); border-color: var(--sand); color: var(--sand); } .wf-optional-field { overflow: hidden; transition: max-height 0.2s ease, opacity 0.2s; } .wf-optional-field.hidden { max-height: 0; opacity: 0; pointer-events: none; } .wf-optional-field:not(.hidden) { max-height: 100px; opacity: 1; } .wf-optional-field input { width: 100%; margin-top: 8px; padding: 10px 12px; background: #1f0e18; border: 1px solid var(--forest-muted); border-radius: 8px; color: var(--text); font-size: 0.9rem; } .wf-optional-field label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); display: block; margin-top: 4px; } /* Ensure modals are visible */ #geo-modal[style*="block"], #threed-modal[style*="block"] { display: flex !important; } /* ============================================ RISK BARS ============================================ */ .risk-bar-wrap { margin-bottom: 14px; } .risk-bar-wrap:last-child { margin-bottom: 0; } .risk-bar-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 0.82rem; color: var(--text-dim); } .risk-bar-track { width: 100%; height: 6px; background: var(--forest-muted); border-radius: 99px; overflow: hidden; } .risk-bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; } .risk-high { background: var(--ember-hot); } .risk-medium { background: var(--ember); } .risk-low { background: var(--sand); } /* main container that replaces left/right split */ .tabbed-app-container { max-width: 780px; margin: 0 auto; background: transparent; } /* ----- TAB BAR (toggle) ----- */ .tab-bar { display: flex; gap: 8px; background: var(--forest-dark); border-radius: 60px; padding: 6px; margin-bottom: 16px; border: 1px solid var(--forest-border); backdrop-filter: blur(2px); } .tab-btn { flex: 1; background: transparent; border: none; font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; padding: 12px 10px; border-radius: 40px; color: var(--text-dim); cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; text-align: center; } .tab-btn.active { background: var(--sand); color: var(--wine-dark); box-shadow: 0 2px 6px rgba(201, 168, 106, 0.2); } .tab-btn:not(.active):hover { background: var(--forest-mid); color: var(--text); } /* Tab panes */ .tab-pane { display: none; animation: fadeIn 0.2s ease; } .tab-pane.active-pane { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px);} to { opacity: 1; transform: translateY(0);} } /* ----- original component styles (preserved) ----- */ .section-head { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; color: var(--sand); border-left: 3px solid var(--sand); padding-left: 12px; margin-bottom: 16px; } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; } .hidden { display: none; } /* run list scroll */ #run-list { scrollbar-width: thin; scrollbar-color: var(--sand-dim) var(--forest-muted); } #run-list::-webkit-scrollbar { width: 5px; } #run-list::-webkit-scrollbar-track { background: var(--forest-muted); border-radius: 5px; } #run-list::-webkit-scrollbar-thumb { background: var(--sand-dim); border-radius: 5px; } input, select, textarea { font-family: var(--font-body); } input:focus, select:focus, textarea:focus { outline: none; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sand-dim); outline-offset: 1px; } @media (max-width: 550px) { body { padding: 0px 0px 24px; } .tab-btn { font-size: 0.75rem; padding: 0px 2px; } .tab-btn:active { font-size: 0.75rem; padding: 0px 6px; } }