/* ============================================================================= RE Tools — Shared Stylesheet Supports dark (default) and light themes via [data-theme] on ============================================================================= */ /* ── Logo: DEED STAMP (sign-on page) ─────────────────────────────── */ .logo-stamp { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; border: 1.5px solid var(--accent); padding: 10px 18px; position: relative; font-family: 'Courier New', monospace; color: var(--text-primary); } .logo-stamp::before, .logo-stamp::after, .logo-stamp .tick-bl, .logo-stamp .tick-br { content: ""; position: absolute; width: 8px; height: 8px; } .logo-stamp::before { top: -4px; left: -4px; border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); } .logo-stamp::after { top: -4px; right: -4px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); } .logo-stamp .tick-bl { bottom: -4px; left: -4px; border-bottom: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); } .logo-stamp .tick-br { bottom: -4px; right: -4px; border-bottom: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); } .logo-stamp .ls-recorded { font-size: 0.643rem; letter-spacing: 3px; color: var(--text-muted); } .logo-stamp .ls-main { display: flex; align-items: baseline; gap: 6px; } .logo-stamp .ls-re { font-size: 1.857rem; font-weight: 700; letter-spacing: 2px; color: var(--text-primary); } .logo-stamp .ls-slash { font-size: 1.714rem; color: var(--accent); } .logo-stamp .ls-tools { font-size: 1.714rem; letter-spacing: 1px; color: var(--text-primary); } .logo-stamp .ls-sub { font-size: 0.571rem; letter-spacing: 2px; color: var(--text-muted); } /* ── Theme variables ────────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { --bg-base: #0a0d13; --bg-card: #0d1220; --bg-card-alt: #0f1520; --bg-input: #0a0d13; --bg-row-alt: #0c1018; --bg-row-hover: #111827; --bg-disabled: #1a2035; --border: #1e2d47; --border-subtle: #141c2e; --border-input: #2a3550; --text-primary: #f8fafc; --text-body: #c8d0e0; --text-muted: #6b7280; --text-faint: #4b5563; --text-faintest: #2a3550; --text-disabled: #374151; --accent: #f59e0b; --accent-text: #0a0d13; --positive: #10b981; --negative: #ef4444; --info: #818cf8; --bg-error: #130a0a; --border-error: #7f1d1d; --text-error: #ef4444; --bg-success: #0a1a0f; --border-success: #166534; --text-success: #4ade80; --bg-warn: #0a1008; --border-warn: #1a3020; --text-warn: #6b8c6b; /* Map-specific */ --map-fill: #141c30; --map-stroke: #2a3a5c; --map-fill-active: #1a2d4a; --map-label: #4b5563; /* Theme toggle icon */ --theme-icon: "☀"; } [data-theme="light"] { --bg-base: #f1f5f9; --bg-card: #ffffff; --bg-card-alt: #f8fafc; --bg-input: #f8fafc; --bg-row-alt: #f8fafc; --bg-row-hover: #f1f5f9; --bg-disabled: #e2e8f0; --border: #cbd5e1; --border-subtle: #e2e8f0; --border-input: #94a3b8; --text-primary: #0f172a; --text-body: #334155; --text-muted: #64748b; --text-faint: #94a3b8; --text-faintest: #cbd5e1; --text-disabled: #94a3b8; --accent: #d97706; --accent-text: #ffffff; --positive: #059669; --negative: #dc2626; --info: #6366f1; --bg-error: #fef2f2; --border-error: #fca5a5; --text-error: #dc2626; --bg-success: #f0fdf4; --border-success: #86efac; --text-success: #16a34a; --bg-warn: #fffbeb; --border-warn: #fcd34d; --text-warn: #92400e; /* Map-specific */ --map-fill: #dde7f5; --map-stroke: #93a8c8; --map-fill-active: #bfcfe8; --map-label: #64748b; } /* ── Reset ──────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } /* ── Base ───────────────────────────────────────────────────────────────────── */ html { transition: background-color 0.2s, color 0.2s; } body { background: var(--bg-base); color: var(--text-body); font-family: 'Courier New', Courier, monospace; min-height: 100vh; display: flex; flex-direction: column; } /* ── Scrollbar ──────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--border-input); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ── Header ─────────────────────────────────────────────────────────────────── */ header { background: var(--bg-card); border-bottom: 2px solid var(--accent); padding: 14px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex-shrink: 0; } header h1 { font-size: 1.143rem; font-weight: bold; color: var(--text-primary); letter-spacing: 1px; } header p { font-size: 0.786rem; color: var(--text-muted); margin-top: 2px; } header nav { margin-left: auto; display: flex; gap: 14px; font-size: 0.786rem; align-items: center; } header nav a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; } header nav a:hover { color: var(--accent); } /* ── Site logo (PHP index pages — mirrors AnalyzerHeader SVG logo) ─────────── */ .site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; margin-right: 6px; } .site-logo-re { font-size: 1.214rem; font-weight: bold; letter-spacing: 1px; color: var(--text-primary); } .site-logo-slash { font-size: 1.214rem; font-weight: bold; letter-spacing: 1px; color: var(--accent); } /* ── Badge ──────────────────────────────────────────────────────────────────── */ .badge { font-weight: bold; font-size: 0.714rem; padding: 3px 8px; letter-spacing: 2px; white-space: nowrap; flex-shrink: 0; } .badge-accent { background: var(--accent); color: var(--accent-text); } .badge-info { background: var(--info); color: #ffffff; } /* ── Breadcrumb ─────────────────────────────────────────────────────────────── */ .breadcrumb { font-size: 0.786rem; color: var(--text-faint); margin-bottom: 4px; } .breadcrumb a { color: var(--accent); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* ── Theme toggle button ────────────────────────────────────────────────────── */ .theme-toggle { background: transparent; border: 1px solid var(--border-input); color: var(--text-muted); font-size: 1.071rem; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; line-height: 1; padding: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* ── Font resize buttons ────────────────────────────────────────────────────── */ .nav-controls { display: flex; align-items: center; gap: 3px; } .font-decrease, .font-reset, .font-increase { background: transparent; border: 1px solid var(--border-input); color: var(--text-muted); height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; flex-shrink: 0; line-height: 1; padding: 0 6px; } .font-decrease { font-size: 0.714rem; min-width: 24px; } .font-reset { font-size: 1rem; min-width: 28px; } .font-increase { font-size: 1rem; min-width: 28px; font-weight: bold; } .font-decrease:hover, .font-reset:hover, .font-increase:hover { border-color: var(--accent); color: var(--accent); } .font-decrease:disabled, .font-reset:disabled, .font-increase:disabled { opacity: 0.3; cursor: default; border-color: var(--border-input); color: var(--text-faint); } /* ── Main ───────────────────────────────────────────────────────────────────── */ main { flex: 1; padding: 20px 24px; max-width: 1400px; margin: 0 auto; width: 100%; } /* ── Section label ──────────────────────────────────────────────────────────── */ .section-label { font-size: 0.714rem; color: var(--accent); letter-spacing: 2px; margin-bottom: 14px; } /* ── Footer ─────────────────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--border-subtle); padding: 14px 28px; font-size: 0.714rem; color: var(--text-faintest); line-height: 1.8; flex-shrink: 0; } /* ── Cards / Panels ─────────────────────────────────────────────────────────── */ .panel { background: var(--bg-card); border: 1px solid var(--border); padding: 14px 18px; } .panel-alt { background: var(--bg-card-alt); border: 1px solid var(--border); padding: 14px 18px; } .info-bar { background: var(--bg-card); border: 1px solid var(--border); padding: 14px 18px; margin-bottom: 20px; font-size: 0.857rem; color: var(--text-muted); line-height: 1.9; } .info-bar a { color: var(--accent); } .info-bar strong { color: var(--text-primary); } .warn-bar { background: var(--bg-warn); border: 1px solid var(--border-warn); padding: 12px 18px; margin-bottom: 14px; font-size: 0.786rem; color: var(--text-warn); line-height: 1.9; } .warn-bar a { color: var(--accent); } /* ── Stat blocks ────────────────────────────────────────────────────────────── */ .stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .stat { background: var(--bg-card); border: 1px solid var(--border); padding: 12px 20px; } .stat .sv { font-size: 1.714rem; font-weight: bold; color: var(--text-primary); } .stat .sl { font-size: 0.714rem; color: var(--text-faint); letter-spacing: 1px; margin-top: 3px; } /* ── Forms ──────────────────────────────────────────────────────────────────── */ label { display: block; font-size: 0.714rem; color: var(--accent); letter-spacing: 2px; margin-bottom: 7px; margin-top: 18px; } input[type=email], input[type=password], input[type=text], textarea, select { width: 100%; background: var(--bg-input); border: 1px solid var(--border-input); color: var(--text-body); font-family: 'Courier New', Courier, monospace; font-size: 0.929rem; padding: 9px 12px; outline: none; transition: border-color 0.15s, background 0.15s; } input:focus, select:focus, textarea:focus { border-color: var(--accent); } select option { background: var(--bg-card); color: var(--text-body); } textarea { resize: vertical; } .hint { font-size: 0.714rem; color: var(--text-faint); margin-top: 5px; } .row { display: flex; gap: 12px; } .row > div { flex: 1; } /* ── Buttons ────────────────────────────────────────────────────────────────── */ .btn { padding: 9px 16px; font-family: 'Courier New', Courier, monospace; font-size: 0.786rem; letter-spacing: 1px; cursor: pointer; border: none; text-decoration: none; display: inline-block; transition: opacity 0.15s; } .btn-primary { background: var(--accent); color: var(--accent-text); font-weight: bold; } .btn-primary:hover { opacity: 0.9; } .btn-submit { background: var(--accent); color: var(--accent-text); border: none; padding: 12px 24px; font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 0.929rem; letter-spacing: 1px; cursor: pointer; margin-top: 24px; transition: opacity 0.15s; } .btn-submit:hover { opacity: 0.9; } .btn-full { width: 100%; } /* ── Tables ─────────────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); } table { width: 100%; border-collapse: collapse; font-size: 0.786rem; } thead tr { background: var(--bg-card); border-bottom: 2px solid var(--accent); } th { padding: 9px 12px; color: var(--accent); font-size: 0.643rem; letter-spacing: 1px; text-align: left; white-space: nowrap; position: sticky; top: 0; background: var(--bg-card); font-weight: normal; } tbody tr { border-bottom: 1px solid var(--border-subtle); } tbody tr:nth-child(even) { background: var(--bg-row-alt); } tbody tr:hover { background: var(--bg-row-hover); } td { padding: 8px 12px; color: var(--text-body); white-space: nowrap; vertical-align: middle; } /* ── Pills ──────────────────────────────────────────────────────────────────── */ .pill { font-size: 0.643rem; letter-spacing: 1px; padding: 2px 8px; border: 1px solid; display: inline-block; } /* ── Admin action buttons ───────────────────────────────────────────────────── */ .toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; } .locked { color: var(--negative); font-size: 0.643rem; } .actions form { display: inline; } .actions button { background: transparent; border: 1px solid var(--border-input); color: var(--text-muted); font-family: 'Courier New', Courier, monospace; font-size: 0.643rem; letter-spacing: 1px; padding: 3px 8px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .actions button:hover { border-color: var(--accent); color: var(--accent); } .actions button.danger:hover { border-color: var(--negative); color: var(--negative); } .actions a { color: var(--info); font-size: 0.643rem; letter-spacing: 1px; text-decoration: none; border: 1px solid var(--border-input); padding: 3px 8px; transition: border-color 0.15s; } .actions a:hover { border-color: var(--info); } /* ── Alerts ─────────────────────────────────────────────────────────────────── */ .alert-error { background: var(--bg-error); border: 1px solid var(--border-error); color: var(--text-error); padding: 10px 12px; font-size: 0.786rem; line-height: 1.8; } .alert-success { background: var(--bg-success); border: 1px solid var(--border-success); color: var(--text-success); padding: 9px 14px; font-size: 0.786rem; } /* ── Meta box ───────────────────────────────────────────────────────────────── */ .meta { background: var(--bg-card); border: 1px solid var(--border); padding: 14px 16px; margin-top: 24px; font-size: 0.786rem; color: var(--text-muted); line-height: 2; } .meta strong { color: var(--text-body); } /* ── Login page ─────────────────────────────────────────────────────────────── */ .login-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; } .login-card { background: var(--bg-card); border: 1px solid var(--border); padding: 40px 44px; width: 100%; max-width: 420px; position: relative; } .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; } .logo-text h1 { font-size: 1.071rem; color: var(--text-primary); letter-spacing: 1px; } .logo-text p { font-size: 0.714rem; color: var(--text-faint); margin-top: 2px; } .login-theme-toggle { position: absolute; top: 14px; right: 14px; } .login-footer { font-size: 0.714rem; color: var(--text-faintest); margin-top: 24px; text-align: center; } .btn-login { width: 100%; background: var(--accent); color: var(--accent-text); border: none; padding: 13px; font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 0.929rem; letter-spacing: 1px; cursor: pointer; margin-top: 28px; transition: opacity 0.15s; } .btn-login:hover { opacity: 0.9; } /* ── US Map (main index) ────────────────────────────────────────────────────── */ #map-wrap { background: var(--bg-card); border: 1px solid var(--border); padding: 20px; margin-bottom: 24px; position: relative; } #map-wrap svg { display: block; width: 100%; height: auto; } #map-loading { text-align: center; padding: 60px 20px; font-size: 0.857rem; color: var(--text-faint); letter-spacing: 1px; } .state-path { fill: var(--map-fill); stroke: var(--map-stroke); stroke-width: 0.8; cursor: default; transition: fill 0.15s; } .state-path.active { fill: var(--map-fill-active); stroke: var(--accent); stroke-width: 1.2; cursor: pointer; } .state-path.active:hover { fill: var(--accent); } .state-label { font-family: 'Courier New', monospace; font-size: 0.5rem; fill: var(--map-label); pointer-events: none; text-anchor: middle; dominant-baseline: middle; } .state-label.active { fill: var(--accent); font-weight: bold; } #tooltip { position: fixed; background: var(--bg-card); border: 1px solid var(--accent); color: var(--text-primary); font-family: 'Courier New', monospace; font-size: 0.786rem; padding: 8px 12px; pointer-events: none; opacity: 0; transition: opacity 0.1s; z-index: 100; white-space: nowrap; } #tooltip .tip-state { color: var(--accent); font-weight: bold; letter-spacing: 1px; } #tooltip .tip-status { color: var(--text-muted); font-size: 0.714rem; margin-top: 3px; } #tooltip .tip-count { color: var(--positive); font-size: 0.714rem; } #active-list { display: flex; flex-wrap: wrap; gap: 10px; } .state-card { background: var(--bg-card); border: 1px solid var(--border); padding: 14px 18px; text-decoration: none; color: inherit; transition: border-color 0.15s, background 0.15s; min-width: 160px; display: block; } .state-card:hover { border-color: var(--accent); background: var(--bg-row-hover); } .state-card .sc-name { font-size: 0.929rem; color: var(--text-primary); letter-spacing: 1px; } .state-card .sc-count { font-size: 0.714rem; color: var(--positive); margin-top: 4px; } .state-card .sc-arrow { font-size: 0.714rem; color: var(--accent); margin-top: 8px; } /* ── WA state index ─────────────────────────────────────────────────────────── */ .county-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 32px; } .county-card { background: var(--bg-card); border: 1px solid var(--border); padding: 18px 20px; text-decoration: none; color: inherit; display: block; transition: border-color 0.15s, background 0.15s; position: relative; } .county-card:hover { border-color: var(--accent); background: var(--bg-row-hover); } .county-card.coming-soon { opacity: 0.45; cursor: default; pointer-events: none; } .cc-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; } .cc-name { font-size: 1rem; font-weight: bold; color: var(--text-primary); letter-spacing: 0.5px; } .cc-badge { font-size: 0.643rem; letter-spacing: 1px; padding: 2px 7px; border: 1px solid; white-space: nowrap; } .cc-badge.live { color: var(--positive); border-color: var(--positive); } .cc-badge.soon { color: var(--text-faint); border-color: var(--text-faint); } .cc-tools { display: flex; flex-direction: column; gap: 6px; } .cc-tool-link { display: flex; align-items: center; gap: 8px; font-size: 0.786rem; color: var(--text-muted); text-decoration: none; padding: 5px 0; border-top: 1px solid var(--border-subtle); transition: color 0.15s; } .cc-tool-link:hover { color: var(--accent); } .cc-tool-link .tl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .cc-tool-link .tl-dot.deed { background: var(--info); } .cc-tool-link .tl-dot.lien { background: var(--positive); } .cc-tool-link .tl-arrow { margin-left: auto; color: var(--accent); } .cc-meta { font-size: 0.714rem; color: var(--text-faint); margin-top: 10px; } .cc-meta a { color: var(--accent); } .ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .ref-card { background: var(--bg-card); border: 1px solid var(--border); padding: 14px 16px; font-size: 0.786rem; } .ref-card .rc-title { color: var(--accent); font-size: 0.714rem; letter-spacing: 1px; margin-bottom: 8px; } .ref-card a { color: var(--text-muted); display: block; padding: 3px 0; text-decoration: none; transition: color 0.15s; } .ref-card a:hover { color: var(--accent); } /* ── Code lookup tooltip ────────────────────────────────────────────────────── */ #code-tooltip { position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.1s; max-width: 280px; min-width: 160px; background: var(--bg-card); border: 1px solid var(--accent); font-family: 'Courier New', Courier, monospace; font-size: 0.786rem; padding: 10px 14px; line-height: 1.8; color: var(--text-body); box-shadow: 0 4px 16px rgba(0,0,0,0.4); } #code-tooltip .ct-code { color: var(--accent); font-weight: bold; letter-spacing: 1px; font-size: 0.857rem; } #code-tooltip .ct-label { color: var(--text-primary); margin-top: 2px; } #code-tooltip .ct-cat { margin-top: 6px; } #code-tooltip .ct-notes { color: var(--text-faint); font-size: 0.714rem; margin-top: 4px; } /* Dashed underline on hoverable use code cells */ .code-hoverable { border-bottom: 1px dashed var(--accent); cursor: help; } /* ── Notification preferences ────────────────────────────────────────────── */ .notif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 8px; } .notif-card { background: var(--bg-card-alt); border: 1px solid var(--border); padding: 16px 18px; transition: border-color 0.15s; } .notif-card.subscribed { border-color: var(--positive); } .nc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .nc-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; } .nc-toggle input[type="checkbox"] { accent-color: var(--positive); width: 15px; height: 15px; } .nc-name { font-size: 0.857rem; font-weight: bold; color: var(--text-primary); letter-spacing: 1px; } .nc-type { font-size: 0.643rem; letter-spacing: 2px; } .nc-meta { font-size: 0.786rem; color: var(--text-muted); margin-bottom: 6px; } .nc-notes { font-size: 0.714rem; color: var(--text-faint); margin-bottom: 12px; line-height: 1.6; } .nc-options { border-top: 1px solid var(--border-subtle); padding-top: 12px; margin-bottom: 10px; } .nc-check { display: flex; align-items: center; gap: 8px; font-size: 0.786rem; color: var(--text-muted); margin-bottom: 8px; cursor: pointer; } .nc-check input[type="checkbox"] { accent-color: var(--accent); } .nc-days { font-size: 0.786rem; color: var(--text-muted); margin-top: 4px; } .nc-days input[type="number"] { background: var(--bg-base); border: 1px solid var(--border-input); color: var(--text-body); padding: 3px 6px; font-family: 'Courier New', monospace; font-size: 0.786rem; text-align: center; } .nc-platform { font-size: 0.714rem; color: var(--accent); text-decoration: none; letter-spacing: 1px; } .nc-platform:hover { text-decoration: underline; } .btn-save { background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 12px 28px; font-family: 'Courier New', monospace; font-size: 0.786rem; letter-spacing: 2px; cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-save:hover { background: var(--accent); color: var(--bg-base); } .btn-admin { background: transparent; border: 1px solid var(--border-input); color: var(--text-muted); padding: 9px 18px; font-family: 'Courier New', monospace; font-size: 0.714rem; letter-spacing: 1px; cursor: pointer; } .btn-admin:hover { border-color: var(--accent); color: var(--accent); } .alert-success { background: var(--bg-positive); border: 1px solid var(--positive); color: var(--positive); padding: 10px 16px; font-size: 0.857rem; margin-bottom: 16px; letter-spacing: 1px; } /* ── Collapsible state sections (notifications) ───────────────────────────── */ .state-section { margin-bottom: 6px; } .state-toggle { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 12px 16px; cursor: pointer; text-align: left; font-family: 'Courier New', monospace; color: var(--text-primary); transition: border-color 0.15s, background 0.15s; } .state-toggle:hover, .state-toggle.open { background: var(--bg-card-alt); border-color: var(--accent); } .st-arrow { font-size: 0.714rem; color: var(--accent); transition: transform 0.2s; display: inline-block; } .st-label { font-size: 0.857rem; font-weight: bold; letter-spacing: 2px; color: var(--text-primary); } .st-count { font-size: 0.643rem; color: var(--text-faint); letter-spacing: 1px; } .st-sub-badge { font-size: 0.643rem; color: var(--positive); letter-spacing: 1px; margin-left: auto; border: 1px solid var(--positive); padding: 2px 7px; } .state-panel { border: 1px solid var(--border); border-top: none; padding: 14px; background: var(--bg-base); }