/* ========================================================================== Theme tokens Day mode (default): blues + white, matching the Waterway-Assist logo. Night mode: monochrome red on black/grey — the real maritime convention for preserving night vision at the helm. Every other hue collapses to a shade of red at night; day mode keeps its full green/amber/blue/teal semantic palette. Toggled via [data-theme] on , see js/frontend/theme.js. ========================================================================== */ :root{ /* surfaces */ --bg:#F5F9FC; --bg-2:#EAF1F8; --panel:#FFFFFF; --panel-edge:#D6E3F0; --lcd-bg:#0B2036; --lcd-bg-2:#0F2A44; --lcd-border:#061422; --ink:#0B2540; --muted:#52708F; --muted-2:#8098B2; --hairline:rgba(11,37,64,0.08); /* brand accent (LCD digits, primary actions, wordmark) */ --accent:#0B3B66; --accent-dim:#6E93B8; --accent-2:#1B5D97; --accent-2-dim:#7FAAD1; --accent-tint:rgba(11,59,102,.08); /* semantic status (day mode keeps full hue range) */ --status-ok:#1F9D6B; --status-ok-dim:#8FCBAE; --status-ok-tint:rgba(31,157,107,.12); --status-warn:#B5710A; --status-warn-dim:#DDB577; --status-warn-tint:rgba(181,113,10,.12); --status-info:#0E7C9E; --status-info-dim:#7FB9CC; --status-info-tint:rgba(14,124,158,.10); --status-info-muted:#7A8CA3; /* fab / primary button gradients */ --fab-grad-a:#4F8FE0; --fab-grad-b:#1B5D97; --fab-grad-c:#0B3B66; --fab-shadow-a:#0A2C4D; --fab-shadow-b:rgba(11,59,102,.45); --fab-ink:#06172B; --btn-primary-grad-a:#EAF3FB; --btn-primary-grad-b:#D3E6F5; --lcd-glow:rgba(11,59,102,.35); /* map */ --marker-border:#FFFFFF; --waterway-line:#8FAEC9; --node-marker:var(--accent-2); --user-marker:var(--status-info); --route-line:var(--accent); } /* Deliberately NOT keyed off prefers-color-scheme: this toggle is a safety feature (night-vision preservation at the helm), not a cosmetic preference — it must default to day and only switch on the sailor's explicit tap, never silently follow the OS/browser theme. */ :root[data-theme="night"]{ --bg:#000000; --bg-2:#0A0A0A; --panel:#141414; --panel-edge:#2E1414; --lcd-bg:#050505; --lcd-bg-2:#0A0505; --lcd-border:#000000; --ink:#FF6259; --muted:#B23A34; --muted-2:#7A2622; --hairline:rgba(255,66,56,0.14); --accent:#FF4438; --accent-dim:#7A2622; --accent-2:#E4423F; --accent-2-dim:#6B211F; --accent-tint:rgba(255,68,56,.10); --status-ok:#FF6259; --status-ok-dim:#B23A34; --status-ok-tint:rgba(255,98,89,.12); --status-warn:#C74C42; --status-warn-dim:#7A2622; --status-warn-tint:rgba(199,76,66,.12); --status-info:#E4423F; --status-info-dim:#A6362F; --status-info-tint:rgba(228,66,63,.10); --status-info-muted:#6B211F; --fab-grad-a:#FF6B5E; --fab-grad-b:#E4423F; --fab-grad-c:#7A2622; --fab-shadow-a:#4A1512; --fab-shadow-b:rgba(228,66,63,.5); --fab-ink:#180404; --btn-primary-grad-a:#1A0808; --btn-primary-grad-b:#100404; --lcd-glow:rgba(255,68,56,.4); --marker-border:#000000; --waterway-line:#5A1F1C; } *{box-sizing:border-box;} html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);} body{color:var(--ink); font-family:'Manrope',sans-serif; -webkit-tap-highlight-color:transparent;} button, select, input{font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600;} #app{position:fixed; inset:0;} #map{position:absolute; inset:0; z-index:1; background:var(--bg-2);} #listView{ position:absolute; inset:0; z-index:15; background:var(--bg); display:none; flex-direction:column; } #listView.active{display:flex;} .list-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:max(14px, env(safe-area-inset-top)) 16px 12px; border-bottom:1px solid var(--hairline); flex-shrink:0; } .list-title{font-weight:800; font-size:19px;} .list-subtitle{font-size:12px; color:var(--muted); margin-top:2px;} .list-body{flex:1; overflow-y:auto; padding:10px 16px max(80px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch;} .list-section{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:18px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--hairline);} .list-section:first-child{margin-top:4px;} .list-row{ display:flex; gap:12px; align-items:flex-start; background:var(--panel); border:1px solid var(--panel-edge); border-radius:12px; padding:12px 14px; margin-bottom:8px; cursor:pointer; } .list-row:active{border-color:var(--accent-dim);} .list-row-badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;} .speed-badge{font-family:'Space Mono',monospace; font-size:10.5px; padding:3px 8px; border-radius:6px; background:var(--status-info-tint); color:var(--status-info); border:1px solid var(--status-info-dim);} .leaflet-popup-content-wrapper{background:var(--panel); color:var(--ink); border-radius:10px;} .leaflet-popup-tip{background:var(--panel);} .popup-ch{font-family:'Space Mono',monospace; color:var(--status-ok); font-weight:700;} .popup-ch.unverified{color:var(--status-warn);} .popup-speed{color:var(--status-info);} .popup-btn{font-family:'Space Mono',monospace; font-size:11px; border:1px solid var(--accent-dim); color:var(--accent); background:var(--accent-tint); border-radius:6px; padding:5px 9px; cursor:pointer; margin-top:6px; margin-right:6px;} .popup-btn.amber{border-color:var(--status-warn-dim); color:var(--status-warn); background:var(--status-warn-tint);} /* ---------- Top bar ---------- */ .topbar{ position:absolute; top:0; left:0; right:0; z-index:20; padding:max(14px, env(safe-area-inset-top)) 14px 0; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; pointer-events:none; } .brand{ pointer-events:auto; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.88); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); border-radius:12px; padding:7px 12px 7px 7px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--accent); text-transform:uppercase; } :root[data-theme="night"] .brand{ background:rgba(10,10,10,.88); } .brand img{width:22px; height:22px; border-radius:6px; display:block; flex-shrink:0;} .top-right{display:flex; gap:8px; align-items:flex-start;} .pill-btn{ pointer-events:auto; cursor:pointer; text-align:left; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); border-radius:12px; padding:9px 13px; max-width:56vw; } :root[data-theme="night"] .pill-btn{ background:rgba(10,10,10,.92); } .pill-btn .pill-ch{font-family:'Space Mono',monospace; font-size:15px; font-weight:700; color:var(--status-ok); line-height:1.1;} .pill-btn.amber .pill-ch{color:var(--status-warn);} .pill-btn .pill-sub{font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .icon-btn{ pointer-events:auto; width:40px; height:40px; border-radius:12px; flex-shrink:0; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); color:var(--ink); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; } :root[data-theme="night"] .icon-btn{ background:rgba(10,10,10,.92); } .theme-toggle-label{display:none;} .list-toggle-label{display:none;} /* Desktop-width nav: on a browser-sized screen the menu's items fit directly in the top bar, so the hamburger/slide-up menu sheet is only needed on narrow (mobile-width) viewports. */ .desktop-nav{display:none; gap:8px; align-items:center;} .nav-btn{ pointer-events:auto; height:40px; border-radius:12px; padding:0 14px; flex-shrink:0; white-space:nowrap; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); color:var(--ink); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; } :root[data-theme="night"] .nav-btn{ background:rgba(10,10,10,.92); } @media (min-width:860px){ .desktop-nav{display:flex;} #menuBtn{display:none;} .theme-toggle{width:auto; padding:0 14px; gap:6px; border-radius:12px;} .theme-toggle-label{display:inline; font-size:13px; font-weight:700; color:var(--ink);} .list-toggle{width:auto; padding:0 14px; gap:6px; border-radius:12px;} .list-toggle-label{display:inline; font-size:13px; font-weight:700; color:var(--ink);} } /* ---------- Bottom controls ---------- */ .locate-fab{ position:absolute; z-index:20; right:16px; bottom:calc(108px + env(safe-area-inset-bottom)); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); color:var(--accent); font-size:19px; display:flex; align-items:center; justify-content:center; cursor:pointer; } :root[data-theme="night"] .locate-fab{ background:rgba(10,10,10,.92); } .nav-controls{ position:absolute; z-index:20; left:10px; bottom:112px; display:flex; flex-direction:column; gap:8px; } .nav-control-btn{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); color:var(--ink); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; } :root[data-theme="night"] .nav-control-btn{ background:rgba(10,10,10,.92); } .nav-control-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); } /* A simple boat-hull silhouette (pointed bow, flat stern) reused for the user's own position and AIS vessels — colored via `background` and rotated to heading/course-over-ground via inline transform. */ /* A zoomed-out group of nearby facilities, collapsed into one count bubble (see js/frontend/map-view.js's clusterFacilities) so a country-wide view doesn't drown in thousands of individual markers. */ .facility-cluster{ border-radius:50%; background:var(--accent); color:#fff; border:2px solid var(--marker-border); font-family:'Space Mono',monospace; font-weight:700; text-align:center; font-size:12px; box-shadow:0 1px 4px rgba(0,0,0,.35); } .boat-icon{ width:20px; height:26px; clip-path: polygon(50% 0%, 88% 32%, 100% 100%, 0% 100%, 12% 32%); transform-origin:50% 50%; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); } .fab-zone{ position:absolute; z-index:20; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; gap:12px; padding-bottom:max(22px, env(safe-area-inset-bottom)); pointer-events:none; } .quick-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; max-width:270px; opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .quick-actions.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;} .qa-btn{ display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; cursor:pointer; } .qa-circle{ width:52px; height:52px; border-radius:50%; background:var(--panel); border:1px solid var(--panel-edge); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--ink); box-shadow:0 10px 24px -10px rgba(0,0,0,.35); } .qa-label{font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase;} .fab-main{ pointer-events:auto; width:64px; height:64px; border-radius:50%; border:none; cursor:pointer; background:radial-gradient(circle at 35% 30%, var(--fab-grad-a), var(--fab-grad-b) 60%, var(--fab-grad-c)); box-shadow:0 4px 0 var(--fab-shadow-a), 0 14px 30px -8px var(--fab-shadow-b); color:var(--fab-ink); font-size:30px; font-weight:800; line-height:1; display:flex; align-items:center; justify-content:center; transition:transform .18s ease; } .fab-main.open{transform:rotate(45deg);} .fab-main:active{transform:scale(.94);} /* ---------- Sheets ---------- */ .sheet-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:30; opacity:0; pointer-events:none; transition:opacity .2s ease; } :root[data-theme="night"] .sheet-backdrop{ background:rgba(0,0,0,.7); } .sheet-backdrop.open{opacity:1; pointer-events:auto;} .sheet{ position:fixed; left:0; right:0; bottom:0; z-index:31; max-height:86vh; background:linear-gradient(180deg, var(--bg-2), var(--bg)); border:1px solid var(--panel-edge); border-bottom:none; border-radius:20px 20px 0 0; transform:translateY(105%); transition:transform .25s cubic-bezier(.2,.8,.3,1); display:flex; flex-direction:column; overflow:hidden; } .sheet.open{transform:translateY(0);} .sheet-handle{width:38px; height:4px; border-radius:2px; background:var(--panel-edge); margin:10px auto 2px; flex-shrink:0;} .sheet-header{display:flex; justify-content:space-between; align-items:center; padding:8px 18px 12px; flex-shrink:0; border-bottom:1px solid var(--hairline);} .sheet-title{font-weight:800; font-size:17px;} .sheet-close{background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; padding:4px 8px;} .sheet-body{overflow-y:auto; padding:14px 18px max(24px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch;} /* Desktop split view: on a browser-sized screen a panel docks permanently alongside the map (both visible and usable at once) instead of sliding up over it, with a drag handle to resize the split — see js/frontend/sheets.js for the resize logic. Narrower (mobile-width) viewports keep the bottom-sheet-over-map behaviour above unchanged. */ .sheet-resizer{display:none;} @media (min-width:860px){ #map, .topbar, .fab-zone{ right:0; transition:right .25s cubic-bezier(.2,.8,.3,1); } .locate-fab{ transition:right .25s cubic-bezier(.2,.8,.3,1); } body.sheet-open #map, body.sheet-open .topbar, body.sheet-open .fab-zone{ right:var(--split-width, 420px); } body.sheet-open .locate-fab{ right:calc(var(--split-width, 420px) + 16px); } .sheet-backdrop{display:none;} .sheet{ left:auto; right:0; top:0; bottom:0; height:100%; max-height:100%; width:var(--split-width, 420px); border-radius:0; border-top:none; border-bottom:none; border-left:1px solid var(--panel-edge); transform:translateX(105%); } .sheet.open{transform:translateX(0);} .sheet-handle{display:none;} .sheet-resizer{ display:none; position:fixed; top:0; bottom:0; width:10px; z-index:32; right:calc(var(--split-width, 420px) - 5px); cursor:ew-resize; pointer-events:none; } .sheet-resizer::after{content:''; position:absolute; top:0; bottom:0; left:4px; width:2px; background:var(--panel-edge);} .sheet-resizer:hover::after, .sheet-resizer.dragging::after{background:var(--accent-dim);} /* Only shown (and only draggable) while a panel is actually docked — otherwise it drew as a permanent stray vertical line down the map even with nothing open to resize. */ body.sheet-open .sheet-resizer{display:block; pointer-events:auto;} /* The "Nearby" list view previously took over the whole screen even on a desktop-sized viewport, unlike every other panel (route planner, regional plan, etc.) which docks beside the map. Docking it the same way keeps the map visible and usable while browsing the list. */ #listView.active{ left:auto; right:0; top:0; bottom:0; width:var(--split-width, 420px); z-index:31; border-left:1px solid var(--panel-edge); } } /* ---------- Route waypoint list ---------- */ .waypoint-row{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px; padding:10px 12px; margin-bottom:8px; } .waypoint-dot{width:10px; height:10px; border-radius:50%; background:var(--accent); flex-shrink:0;} .waypoint-dot.unset{background:var(--panel-edge);} .waypoint-label{flex:1; font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;} .waypoint-label.placeholder{color:var(--muted-2);} .waypoint-remove{background:none; border:none; color:var(--muted-2); font-size:16px; cursor:pointer; padding:2px 6px; flex-shrink:0;} /* ---------- Location picker overlay (free-form route waypoint picking) ---------- */ .location-picker{ position:absolute; inset:0; z-index:25; display:none; flex-direction:column; pointer-events:none; } .location-picker.open{display:flex;} .location-picker-top{ pointer-events:auto; display:flex; gap:8px; padding:max(14px, env(safe-area-inset-top)) 14px 0; } .location-picker-top input{ background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); color:var(--ink); border-radius:12px; padding:10px 14px; flex:1; min-width:0; } :root[data-theme="night"] .location-picker-top input{background:rgba(10,10,10,.92);} .location-picker-results{ pointer-events:auto; margin:8px 14px 0; background:var(--panel); border:1px solid var(--panel-edge); border-radius:12px; max-height:40vh; overflow-y:auto; } .location-picker-result{padding:10px 14px; border-bottom:1px solid var(--hairline); font-size:13px; cursor:pointer;} .location-picker-result:last-child{border-bottom:none;} .location-picker-result:active{background:var(--accent-tint);} .location-picker-hint{ pointer-events:none; margin:14px auto 0; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--panel-edge); border-radius:10px; padding:8px 14px; font-size:12px; color:var(--muted); } :root[data-theme="night"] .location-picker-hint{background:rgba(10,10,10,.92);} .location-picker-bottom{ pointer-events:auto; margin-top:auto; padding:14px; padding-bottom:max(14px, env(safe-area-inset-bottom)); display:flex; gap:10px; } /* ---------- Onboarding tutorial modal ---------- */ .modal-backdrop{ position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .2s ease; } :root[data-theme="night"] .modal-backdrop{ background:rgba(0,0,0,.75); } .modal-backdrop.open{opacity:1; pointer-events:auto;} .modal-card{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:16px; padding:22px; max-width:420px; width:100%; max-height:86vh; overflow-y:auto; } .modal-title{font-weight:800; font-size:19px; margin-bottom:10px; color:var(--ink);} /* ---------- Menu list ---------- */ .menu-row{ display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--hairline); cursor:pointer; } .menu-row:last-child{border-bottom:none;} .menu-row .mi{width:34px; height:34px; border-radius:10px; background:var(--panel); border:1px solid var(--panel-edge); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;} .menu-row .mt{font-weight:700; font-size:14.5px;} .menu-row .ms{font-size:12px; color:var(--muted); margin-top:1px;} /* ---------- Shared form/list bits ---------- */ .controls{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;} .btn{ background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink); padding:11px 18px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; } .btn.primary{background:linear-gradient(180deg,var(--btn-primary-grad-a),var(--btn-primary-grad-b)); border-color:var(--accent-dim); color:var(--accent);} select, input[type=text], input[type=number]{ background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink); padding:11px 14px; border-radius:10px; width:100%; } textarea{background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink); padding:11px 14px; border-radius:10px; width:100%; font-family:'Manrope',sans-serif; resize:vertical; min-height:60px;} .field-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;} .field-row > *{flex:1; min-width:120px;} .status-line{font-family:'Space Mono',monospace; font-size:12px; color:var(--muted); min-height:16px; margin:4px 0 10px;} .status-line.err{color:var(--status-warn);} .group-title{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin:20px 0 10px; padding-bottom:7px; border-bottom:1px solid var(--hairline);} .group-title:first-child{margin-top:0;} .card{background:var(--panel); border:1px solid var(--panel-edge); border-radius:12px; padding:13px 15px; margin-bottom:8px; display:flex; gap:13px; align-items:flex-start;} .ch-badge{font-family:'Space Mono',monospace; font-weight:700; font-size:17px; color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-dim); border-radius:8px; padding:5px 9px; min-width:48px; text-align:center; flex-shrink:0;} .card-body{flex:1; min-width:0;} .card-title{font-weight:700; font-size:14px; margin-bottom:2px;} .card-freq{font-family:'Space Mono',monospace; font-size:11px; color:var(--muted-2); margin-bottom:5px;} .card-note{font-size:12.5px; color:var(--muted); line-height:1.5;} .badge{font-family:'Space Mono',monospace; font-size:10px; padding:2px 6px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em;} .badge.ok{background:var(--status-ok-tint); color:var(--status-ok); border:1px solid var(--status-ok-dim);} .badge.check{background:var(--status-warn-tint); color:var(--status-warn); border:1px solid var(--status-warn-dim);} /* ---------- LCD (compact, inside Regional sheet) ---------- */ .radio{background:linear-gradient(160deg, var(--panel), var(--bg-2)); border:1px solid var(--panel-edge); border-radius:16px; padding:16px; margin-bottom:16px;} .lcd{background:linear-gradient(160deg, var(--lcd-bg-2), var(--lcd-bg)); border-radius:10px; padding:16px 16px 14px; border:1px solid var(--lcd-border);} .lcd-row{display:flex; justify-content:space-between; font-family:'Space Mono',monospace; color:var(--accent-dim); font-size:10.5px; letter-spacing:.06em; margin-bottom:4px;} .lcd-row .live{color:var(--accent);} .lcd-main{display:flex; align-items:flex-end; gap:14px; margin:6px 0 4px;} .lcd-ch{font-family:'Space Mono',monospace; font-size:46px; font-weight:700; color:var(--accent); line-height:.9; text-shadow:0 0 14px var(--lcd-glow);} .lcd-freq{font-family:'Space Mono',monospace; font-size:13px; color:var(--accent-dim); padding-bottom:10px;} .lcd-purpose{font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.1em; color:var(--status-warn); text-transform:uppercase;} .segmented{display:flex; background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px; padding:4px; margin-bottom:16px; gap:4px;} .segmented button{flex:1; background:transparent; border:none; color:var(--muted); padding:9px 10px; border-radius:7px; cursor:pointer; font-size:12.5px;} .segmented button.active{background:linear-gradient(180deg,var(--btn-primary-grad-a),var(--btn-primary-grad-b)); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-dim);} .report-item{border:1px solid var(--panel-edge); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:var(--bg-2);} .report-item-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap;} .report-item-name{font-weight:700; color:var(--ink); font-size:13px;} .report-item-ch{font-family:'Space Mono',monospace; color:var(--status-info);} .report-item-meta{font-size:11px; color:var(--muted-2); margin-top:3px;} .report-item-note{font-size:12px; color:var(--muted); margin-top:4px;} .legend{display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:16px;} .legend span.row{display:flex; align-items:center; gap:9px;} .dotmark{width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0;} .sqmark{width:10px; height:10px; border-radius:3px; display:inline-block; flex-shrink:0;} .about-p{font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 12px;} .about-p strong{color:var(--ink);} /* ---------- Theme toggle ---------- */ .theme-toggle{font-size:18px;}