/* ===================================================================== SED BALOCHISTAN — School Map web application Government-green template: dark green chrome, white cards, icon rail. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700&display=swap'); :root { --pri: #0A5230; /* deep government green */ --pri-2: #0D6A3E; --pri-3: #118A50; --accent: #16A34A; --mint: #E7F3EC; --ink: #10241A; --ink-70: #3D5548; --ink-45: #6E8478; --paper: #F4F7F4; --card: #FFFFFF; --line: #DCE5DE; --alert: #7B4FA8; --font-display: "Archivo", "Segoe UI", sans-serif; --font-body: "Public Sans", "Segoe UI", sans-serif; --radius: 12px; --shadow: 0 1px 3px rgba(10,82,48,.06), 0 8px 24px rgba(10,82,48,.08); --glass: rgba(255, 255, 255, .92); --glass-border: rgba(255, 255, 255, .7); } * { box-sizing: border-box; margin: 0; padding: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } html, body { height: 100%; } /* The canvas behind everything. Between one document unloading and the next painting, the browser shows 's own background - unset, that is white, and on navigation it reads as a full-page blink. Painting it in the theme's paper makes the gap invisible; hud.css already does the same for dark. */ html { background: var(--paper, #F4F7F4); } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.6; display: flex; flex-direction: column; overflow: hidden; } img { max-width: 100%; } a { color: var(--ink); } a:hover { color: var(--pri-3); } .muted { color: var(--ink-45); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ---------- app bar ---------- */ .app-bar { background: linear-gradient(115deg, #06371F 0%, var(--pri) 45%, var(--pri-2) 100%); color: #fff; display: flex; align-items: center; gap: 13px; padding: 10px 16px; flex: 0 0 auto; border-bottom: 3px solid var(--accent); box-shadow: 0 4px 18px rgba(5, 44, 25, .35); position: relative; z-index: 900; } .app-bar img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; flex: 0 0 auto; box-shadow: 0 3px 10px rgba(0,0,0,.3), 0 0 0 2px rgba(255,255,255,.25); } .app-title { line-height: 1.18; min-width: 0; } .app-title .gov { display: block; font-size: 10.5px; color: #A9CBB6; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-title strong { font-family: var(--font-display); font-weight: 800; font-size: 18.5px; letter-spacing: -.01em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-title small { color: #A9CBB6; font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-bar .spacer { flex: 1; } /* hamburger */ .menu-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: background .12s ease; } .menu-btn:hover { background: rgba(255,255,255,.22); } /* module tabs — centered white pill switcher */ .nav-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 4px; } .nav-tabs a { color: #CFE5D8; text-decoration: none; font: 700 13.5px var(--font-body); letter-spacing: .01em; padding: 7px 22px; border-radius: 999px; white-space: nowrap; transition: background .12s ease, color .12s ease; } .nav-tabs a:hover { color: #fff; background: rgba(255,255,255,.12); } .nav-tabs a.on { background: #fff; color: var(--pri); box-shadow: 0 2px 8px rgba(0,0,0,.25); } /* live totals as outlined chips */ .hdr-stats { display: flex; gap: 9px; } .hdr-stat { background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.28); border-radius: 13px; padding: 5px 16px; text-align: center; line-height: 1.2; white-space: nowrap; } .hdr-stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 16.5px; color: #fff; font-variant-numeric: tabular-nums; } .hdr-stat span { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #A9CBB6; } .app-bar .about-btn { background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.32); color: #fff; border-radius: 13px; padding: 10px 16px; font: 700 12.5px var(--font-body); letter-spacing: .02em; cursor: pointer; white-space: nowrap; transition: background .12s ease; } .app-bar .about-btn:hover { background: rgba(255,255,255,.16); } /* ---------- sub line ---------- */ .app-sub { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--ink-70); background: #fff; border-bottom: 1px solid var(--line); padding: 7px 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 10px; } .app-sub::before { content: "✓"; flex: 0 0 auto; width: 19px; height: 19px; border-radius: 6px; background: var(--pri-2); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } /* ---------- content row: icon rail + module ---------- */ .content-row { flex: 1 1 auto; min-height: 0; display: flex; } .rail { flex: 0 0 auto; width: 88px; background: #fff; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 8px 0; position: relative; overflow-y: auto; overflow-x: hidden; z-index: 850; } .rail-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 12px; cursor: pointer; text-decoration: none; color: var(--ink-70); font: 600 10.5px var(--font-body); border: 0; background: none; transition: background .12s ease, color .12s ease; position: relative; z-index: 1; } .rail-item svg { opacity: .85; } .rail-item:hover { background: var(--mint); color: var(--pri); } .rail-item.on { background: var(--pri-2); color: #fff; box-shadow: 0 4px 12px rgba(10,82,48,.35); } .rail-item.on svg { opacity: 1; } .rail-deco { margin-top: auto; opacity: .5; pointer-events: none; align-self: center; } /* (the phone rules for the rail now live at the end of this file, AFTER the header-rail block - equal specificity meant source order decided, and the header block appended later was overriding the bottom dock) */ /* the module fills the rest */ #schoolMap { flex: 1 1 auto; min-height: 0; position: relative; background: #E6EDE7; min-width: 0; } /* ---------- GIS layers dock (map page left sidebar) ---------- */ .gis-dock { flex: 0 0 auto; width: 302px; background: var(--paper); border-inline-end: 1px solid var(--line); overflow-y: auto; overflow-x: hidden; padding: 10px; display: flex; flex-direction: column; gap: 9px; z-index: 860; } .dock-sec { border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); flex: 0 0 auto; } .dock-sec > summary { list-style: none; cursor: pointer; user-select: none; padding: 10px 13px; font: 800 11.5px var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-70); display: flex; justify-content: space-between; align-items: center; gap: 8px; } .dock-sec > summary::-webkit-details-marker { display: none; } .dock-sec > summary:hover { color: var(--pri); } .dock-sec[open] > summary { border-bottom: 1px solid var(--line); color: var(--pri); background: linear-gradient(90deg, var(--mint), rgba(231,243,236,0) 70%); border-radius: 12px 12px 0 0; } .dock-sec .dcaret { color: var(--pri-3); font-size: 13px; transition: transform .15s ease; transform: rotate(-90deg); } .dock-sec[open] > summary .dcaret { transform: rotate(0deg); } .dock-body { padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; } .dock-body input:not([type="checkbox"]), .dock-body select { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font: inherit; background: #fff; transition: border-color .12s ease, box-shadow .12s ease; } .dock-body input:focus, .dock-body select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,163,74,.18); } .dock-body label.small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-45); margin-bottom: -6px; } .dock-body .clearbtn { border: 0; background: none; color: var(--pri-3); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: start; padding: 0; } .dock-body .clearbtn:hover { text-decoration: underline; } /* Layer list: one row, one line. Dataset names and record counts live in the row's tooltip — inline they wrapped every second label onto two or three lines and made the panel look broken. */ .chk { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.3; padding: 6px 8px; margin-inline: -4px; border-radius: 8px; transition: background .12s ease; } .chk:hover { background: var(--mint); } .chk input { accent-color: var(--pri-2); width: 15px; height: 15px; flex: 0 0 auto; margin: 0; } .chk .lyn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .small2 { font-size: 10.5px; font-weight: 400; } /* swatch matching the symbol the layer draws on the map */ .chk .sw { flex: 0 0 auto; width: 9px; height: 9px; background: var(--sw, var(--pri-2)); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px color-mix(in srgb, var(--sw, var(--pri-2)) 35%, transparent); } .chk .sw.dot { border-radius: 50%; } .chk .sw.sq { border-radius: 1.5px; } /* sub-filter groups (Schools: gender / level) */ .sub-grp { font: 800 9.5px var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-45); margin: 5px 0 1px; } .chip-row { display: flex; flex-wrap: wrap; gap: 0 8px; } .chip-row .chk { padding: 3px 6px; font-size: 12px; gap: 6px; } .chip-row .chk input { width: 13px; height: 13px; } .chip-row .chk .sw { width: 8px; height: 8px; } /* the mode switcher now lives inside the Schools layer, in a narrower column */ .sub-ctl .mode-row button { padding: 6px 4px; font-size: 11px; gap: 3px; } .sub-ctl .mode-row svg { width: 14px; height: 14px; } .sub-ctl select { width: 100%; font-size: 12px; padding: 5px 7px; } #heatNote { margin-top: 4px; line-height: 1.45; } /* "how is this calculated?" affordance next to a derived filter */ .why { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; cursor: pointer; border: 1.3px solid var(--ink-45); background: none; color: var(--ink-45); font: 800 10px var(--font-display); line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; align-self: center; transition: background .12s ease, color .12s ease, border-color .12s ease; } .why:hover { background: var(--pri-2); border-color: var(--pri-2); color: #fff; } .why[aria-expanded="true"] { background: var(--pri); border-color: var(--pri); color: #fff; } /* explanation modal — the sidebar was too narrow to show a table honestly */ .why-modal { position: fixed; inset: 0; z-index: 3100; background: rgba(6, 40, 24, .55); display: none; align-items: center; justify-content: center; padding: 24px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .why-modal.open { display: flex; } .why-panel { background: #fff; border-radius: 16px; width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); animation: whyIn .16s ease-out; } @keyframes whyIn { from { opacity: 0; transform: translateY(8px) scale(.985); } } .why-head { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 16px 20px 13px; border-bottom: 2px solid #CFE3D6; } .why-head b { font: 800 17px var(--font-display); letter-spacing: -.01em; flex: 1; } .why-body { padding: 18px 22px 22px; overflow: auto; font-size: 13.5px; line-height: 1.6; color: var(--ink-70); } .why-body > b { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.5; } .why-body p { margin-top: 11px; } .why-body .src { color: var(--ink-45); font-size: 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); } .why-t { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; } .why-t th { text-align: start; font: 800 10px var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-45); border-bottom: 1.5px solid #CFE3D6; padding: 6px 8px; white-space: nowrap; } .why-t td { padding: 7px 8px; border-bottom: 1px solid #EDF2EE; } .why-t .n { text-align: end; font-variant-numeric: tabular-nums; } .why-t tbody tr:hover { background: var(--mint); } .why-t .tot td { font-weight: 800; color: var(--ink); border-bottom: 0; border-top: 1.5px solid #CFE3D6; } .why-t .tot:hover { background: none; } /* the unit the area cascade has selected */ .poly-label.vil.sel span { background: #7B3FB0; color: #fff; border-color: #5B2E86; font-weight: 800; box-shadow: 0 2px 8px rgba(91,46,134,.45); } .sub-warn { font-size: 11px; font-weight: 700; color: #B91C1C; background: #FBEFEA; border-radius: 7px; padding: 5px 8px; margin-top: 4px; } #schHint { margin-top: 3px; line-height: 1.4; } /* nested layer options sit under a hairline rule so the grouping is obvious */ .sub-ctl { margin-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; border-inline-start: 2px solid var(--line); padding-inline-start: 8px; margin-block: 2px 6px; } .gis-dock.dock-hidden { display: none; } .gis-dock.fs-dock { position: absolute; z-index: 950; inset-inline-start: 12px; top: 60px; bottom: 64px; width: 302px; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 18px 54px rgba(0,0,0,.45); display: none; } .gis-dock.fs-dock.open { display: flex; } .dock-toggle { display: none; position: absolute; top: 12px; inset-inline-start: 12px; z-index: 870; background: var(--pri-2); color: #fff; border: 0; border-radius: 11px; padding: 9px 15px; font: 700 13px var(--font-body); cursor: pointer; box-shadow: 0 5px 16px rgba(10,60,35,.4); } @media (max-width: 760px) { /* The dock used to slide in OVER the map here, with a hamburger to dismiss it - and on real phones people got stuck with the panel covering the map and no obvious way out. It is now STATIC: part of the page, stacked above the map, its own scroll area. Nothing floats, nothing needs dismissing. */ .content-row { position: relative; flex-direction: column; } .gis-dock { position: static; width: 100%; max-height: 44vh; transform: none; transition: none; box-shadow: none; border-inline-end: 0; border-bottom: 2px solid var(--line); } [dir="rtl"] .gis-dock { transform: none; } .gis-dock.open { transform: none; } .dock-toggle { display: none; } #schoolMap { min-height: 52vh; } } /* ---------- page footer bar ---------- */ .app-foot { flex: 0 0 auto; background: linear-gradient(90deg, #06371F, var(--pri) 55%, var(--pri-2)); color: #CFE5D8; font-size: 12px; padding: 7px 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; z-index: 900; } .app-foot .spacer { flex: 1; } .app-foot b { color: #fff; font-weight: 700; } .app-foot .foot-pin { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .app-foot select { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 2px 8px; font: 600 12px var(--font-body); cursor: pointer; } .app-foot select option { color: var(--ink); background: #fff; } @media (max-width: 700px) { .app-foot { gap: 10px; font-size: 11px; } .app-foot .foot-right { display: none; } } /* ---------- slide-in menu drawer (auto-closes) ---------- */ .drawer-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(5, 34, 19, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .drawer-overlay.show { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 1500; width: 286px; max-width: 86vw; background: linear-gradient(160deg, #06371F 0%, var(--pri) 55%, var(--pri-2) 100%); color: #fff; display: flex; flex-direction: column; border-start-end-radius: 20px; border-end-end-radius: 20px; box-shadow: 14px 0 44px rgba(0,0,0,.45); transform: translateX(-105%); transition: transform .26s cubic-bezier(.2,.8,.25,1); visibility: hidden; } [dir="rtl"] .drawer { transform: translateX(105%); } .drawer.open { transform: translateX(0); visibility: visible; } .drawer-head { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.12); } .drawer-head img { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; } .drawer-head .dh-t { line-height: 1.25; min-width: 0; flex: 1; } .drawer-head strong { font-family: var(--font-display); font-size: 15px; display: block; } .drawer-head small { color: #A9CBB6; font-size: 11px; } .drawer-close { background: rgba(255,255,255,.12); border: 0; color: #D9EBDF; width: 28px; height: 28px; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; flex: 0 0 auto; } .drawer-close:hover { background: rgba(255,255,255,.25); color: #fff; } .drawer-nav { padding: 12px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; } .drawer-label { font: 700 10px var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: #8FD6AC; padding: 12px 10px 5px; } .d-link { display: flex; align-items: center; gap: 11px; color: #D9EBDF; text-decoration: none; font: 600 13.5px var(--font-body); padding: 9px 12px; border-radius: 11px; transition: background .12s ease, color .12s ease; } .d-link svg { flex: 0 0 auto; opacity: .8; } .d-link:hover { background: rgba(255,255,255,.12); color: #fff; } .d-link.on { background: #fff; color: var(--pri); box-shadow: 0 3px 10px rgba(0,0,0,.3); } .d-link.on svg { opacity: 1; } .d-link.sec-link { font-weight: 500; font-size: 13px; padding: 7px 12px; } .drawer-foot { padding: 13px 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; color: #A9CBB6; } /* ---------- Leaflet chrome ---------- */ .leaflet-bar { border: 0 !important; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 16px rgba(10,60,35,.28) !important; } .leaflet-bar a { border-bottom-color: #E7EFE9 !important; } .leaflet-popup-content-wrapper { border-radius: 14px !important; box-shadow: 0 16px 48px rgba(10,60,35,.35) !important; } .leaflet-popup-tip { box-shadow: 0 6px 18px rgba(10,60,35,.25) !important; } /* ---- popup close button ------------------------------------------------- */ /* Leaflet's default is a hairline glyph with almost no hit area; on a dark card header it all but disappears. */ .leaflet-container .leaflet-popup a.leaflet-popup-close-button { width: 30px; height: 30px; top: 8px; right: 8px; padding: 0; display: grid; place-items: center; border-radius: 50%; font: 400 0/1 var(--font-body); color: transparent; background: rgba(10,50,32,.10); border: 1px solid rgba(10,50,32,.16); transition: background .16s ease, transform .16s ease, border-color .16s ease; } /* draw the cross ourselves so it is crisp at any size */ .leaflet-container .leaflet-popup a.leaflet-popup-close-button::before, .leaflet-container .leaflet-popup a.leaflet-popup-close-button::after { content: ""; position: absolute; width: 13px; height: 1.8px; border-radius: 2px; background: #0A5230; } .leaflet-container .leaflet-popup a.leaflet-popup-close-button::before { transform: rotate(45deg); } .leaflet-container .leaflet-popup a.leaflet-popup-close-button::after { transform: rotate(-45deg); } .leaflet-container .leaflet-popup a.leaflet-popup-close-button:hover { background: rgba(185,28,28,.14); border-color: rgba(185,28,28,.4); transform: scale(1.06); } .leaflet-container .leaflet-popup a.leaflet-popup-close-button:hover::before, .leaflet-container .leaflet-popup a.leaflet-popup-close-button:hover::after { background: #B91C1C; } .leaflet-container .leaflet-popup a.leaflet-popup-close-button:focus-visible { outline: 2px solid var(--pri-2); outline-offset: 2px; } /* the village and area cards have a dark header, so the button inverts */ .leaflet-popup.vcard-pop a.leaflet-popup-close-button { background: rgba(255,255,255,.20) !important; border-color: rgba(255,255,255,.42) !important; } .leaflet-popup.vcard-pop a.leaflet-popup-close-button::before, .leaflet-popup.vcard-pop a.leaflet-popup-close-button::after { background: #fff; } .leaflet-popup.vcard-pop a.leaflet-popup-close-button:hover { background: rgba(255,255,255,.34) !important; border-color: #fff !important; } .leaflet-popup.vcard-pop a.leaflet-popup-close-button:hover::before, .leaflet-popup.vcard-pop a.leaflet-popup-close-button:hover::after { background: #fff; } @media (prefers-reduced-motion: reduce) { .leaflet-container .leaflet-popup a.leaflet-popup-close-button { transition: none; } .leaflet-container .leaflet-popup a.leaflet-popup-close-button:hover { transform: none; } } /* slim scrollbars inside floating panels & popups */ .map-panel-body::-webkit-scrollbar, .leaflet-popup-content div::-webkit-scrollbar { width: 7px; } .map-panel-body::-webkit-scrollbar-thumb, .leaflet-popup-content div::-webkit-scrollbar-thumb { background: #BCCDC1; border-radius: 99px; } .map-panel-body::-webkit-scrollbar-track, .leaflet-popup-content div::-webkit-scrollbar-track { background: transparent; } /* ---------- about panel ---------- */ .about-box { position: fixed; inset: auto 16px 52px auto; z-index: 1200; width: min(430px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 16px; box-shadow: 0 18px 60px rgba(10,60,35,.35); padding: 18px 20px; font-size: 13.5px; line-height: 1.55; } .about-box h2 { font-size: 15.5px; margin-bottom: 8px; font-family: var(--font-display); letter-spacing: -.01em; } .about-box p { margin: 6px 0; } .about-box .close-about { position: absolute; top: 10px; inset-inline-end: 12px; background: var(--mint); border: 0; width: 26px; height: 26px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; color: var(--ink-45); } .about-box .close-about:hover { color: var(--ink); background: #D7E8DD; } @media (max-width: 1240px) { .hdr-stats { display: none; } } @media (max-width: 960px) { .nav-tabs a { padding: 7px 14px; } } @media (max-width: 560px) { .app-title small, .app-title .gov { display: none; } .app-sub { font-size: 11.5px; } .app-bar { padding: 8px 12px; gap: 9px; } .app-bar .about-btn { padding: 8px 12px; } .nav-tabs a { padding: 6px 11px; font-size: 12px; } } /* ===================================================================== ANALYTICS MODULE (analytics.html) ===================================================================== */ main.dash { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; padding: 10px clamp(14px, 3vw, 40px) 46px; scroll-behavior: smooth; } .dash-inner { max-width: 1280px; margin: 0 auto; } .dash h2 { font-family: var(--font-display); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-70); margin: 0; display: flex; align-items: center; gap: 10px; } .dash h2::before { content: ""; width: 18px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--pri-2), var(--accent)); } .dash h2 .sub { font: 500 11.5px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-45); } /* collapsible dropdown sections */ details.sec { margin-top: 20px; } details.sec > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 13px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: background .12s ease; scroll-margin-top: 10px; } details.sec > summary::-webkit-details-marker { display: none; } details.sec > summary:hover { background: #FBFDFB; } details.sec > summary h2 { flex: 1; min-width: 0; } .sec-caret { color: var(--pri-3); font-size: 14px; flex: 0 0 auto; transition: transform .18s ease; transform: rotate(-90deg); } details.sec[open] > summary .sec-caret { transform: rotate(0deg); } .sec-body { padding-top: 12px; } /* fused hero banner — school list × census × need model in one strip */ .fused-hero { background: linear-gradient(120deg, #06371F, #0A5230 45%, #0E6B3C 80%, #118A50); border-radius: 18px; padding: 18px 22px 16px; color: #fff; box-shadow: 0 14px 40px rgba(10, 60, 35, .35); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; margin-top: 16px; position: relative; overflow: hidden; } .fused-hero::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,.09), transparent 70%); pointer-events: none; } .fused-hero .fh { min-width: 0; } .fused-hero .fh b { display: block; font: 800 23px var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .fused-hero .fh span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #A9CBB6; } .fused-hero .fh small { display: block; font-size: 11px; color: #CDE6D6; margin-top: 1px; } .fused-hero .fh a { color: #FDE68A; text-decoration: none; font-weight: 700; } .fused-hero .fh a:hover { text-decoration: underline; color: #FDE68A; } /* KPI cards */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px 11px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--kc, var(--accent)); border-radius: 4px 0 0 4px; } .kpi b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 23px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .kpi span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-45); } .kpi small { display: block; font-size: 11px; color: var(--ink-45); margin-top: 2px; } /* chart / table cards */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: stretch; } .dcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); min-width: 0; } .dcard h3 { font-family: var(--font-display); font-size: 14px; margin-bottom: 2px; letter-spacing: -.01em; } .dcard .note { font-size: 11.5px; color: var(--ink-45); margin-bottom: 10px; } .dcard.wide { grid-column: 1 / -1; } /* donut + legend */ .donut-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .dz-legend { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; flex: 1; min-width: 150px; } .dz-legend .li { display: flex; align-items: center; gap: 7px; } .dz-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; } .dz-legend .li b { margin-inline-start: auto; font-variant-numeric: tabular-nums; } .dz-legend .li .pct { color: var(--ink-45); font-size: 11px; width: 38px; text-align: end; } /* horizontal bars */ .hbar { display: grid; grid-template-columns: minmax(96px, auto) 1fr auto; gap: 5px 10px; align-items: center; font-size: 12.5px; } .hbar .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hbar .nm a { text-decoration: none; } .hbar .nm a:hover { color: var(--pri-3); text-decoration: underline; } .hbar .tr { background: #ECF2ED; border-radius: 99px; height: 13px; overflow: hidden; position: relative; } .hbar .br { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pri-2), var(--pri-3)); min-width: 3px; } .hbar .vl { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--ink-70); white-space: nowrap; } /* column (funnel) chart */ .colchart { width: 100%; overflow-x: auto; } .colchart svg { display: block; min-width: 560px; width: 100%; height: auto; } /* data tables */ .tbl-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .tbl-tools input { border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; background: #fff; width: min(260px, 100%); } .tbl-tools input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,163,74,.18); } .tbl-tools .cnt { font-size: 12px; color: var(--ink-45); } /* the area selects sit beside the search box and match it; the dark theme already restyles bare input/select, so these carry no colour of their own beyond the light-theme ground the inputs above use */ .tbl-tools select { border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; background: #fff; max-width: 210px; } .tbl-tools select:disabled { opacity: .5; cursor: not-allowed; } .tbl-tools select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,163,74,.18); } .tbl-tools .ts-clear { border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; background: #fff; cursor: pointer; color: var(--ink-45); } .tbl-tools .ts-clear:hover { border-color: var(--accent); color: var(--ink); } /* the explain button and the numbered reading of the chart under it */ /* NOT scoped to .tbl-tools. It was, and the grading button sits in .cf-gradebar instead - so it matched nothing and rendered as a raw browser button, 2px outset and 19px tall, next to siblings that looked designed. A control class that only works inside one container is a trap for the next person. */ .ts-why { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--accent); border-radius: 99px; padding: 7px 15px 7px 12px; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; background: linear-gradient(180deg, #fff, #F4FBF6); cursor: pointer; color: var(--accent); box-shadow: 0 1px 2px rgba(10,82,48,.07); } /* the question mark travels with the control, so no caller has to remember it */ .ts-why::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 99px; font-size: 11px; font-weight: 800; background: var(--accent); color: #fff; flex: 0 0 auto; } .ts-why:hover { background: linear-gradient(180deg,#F4FBF6,#E7F6ED); box-shadow: 0 2px 6px rgba(10,82,48,.13); } .ts-why:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(10,82,48,.10); } .ts-why:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(22,163,74,.28); } .ts-why.on { background: var(--accent); color: #fff; border-color: var(--accent); } /* the literal glyph, not a CSS hex escape - "¹5" was being parsed as ¹ + "5" and painted a stray superscript */ .ts-why.on::before { background: #fff; color: var(--accent); content: "✕"; font-size: 9px; } .why-box { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; } .why-list { margin: 0; padding-left: 22px; display: grid; gap: 12px; } .why-list li { font-size: 13.5px; line-height: 1.55; } .why-list li b { display: block; font-size: 13px; letter-spacing: .01em; margin-bottom: 2px; } .why-list li span { color: var(--ink-70, #46586B); } .tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; } table.dz { border-collapse: collapse; width: 100%; font-size: 13px; } table.dz th { text-align: start; background: #EFF5F0; padding: 9px 13px; white-space: nowrap; position: sticky; top: 0; font-family: var(--font-display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-70); border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; } table.dz th:hover { background: #E5EEE7; } table.dz th .dir { color: var(--pri-3); } table.dz td { padding: 8px 13px; border-bottom: 1px solid #EDF2EE; font-variant-numeric: tabular-nums; white-space: nowrap; } table.dz tbody tr:hover { background: #F7FAF7; } table.dz tbody tr:last-child td { border-bottom: 0; } table.dz td.num, table.dz th.num { text-align: end; } table.dz a { text-decoration: none; font-weight: 600; } table.dz a:hover { color: var(--pri-3); text-decoration: underline; } .share-cell { display: inline-flex; align-items: center; gap: 7px; } .share-cell .mini { width: 52px; height: 7px; background: #ECF2ED; border-radius: 99px; overflow: hidden; } .share-cell .mini i { display: block; height: 100%; background: #E0559B; border-radius: 99px; } .share-cell .mini.w { width: 84px; height: 8px; } .pill { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; } .pill.warn { background: #F3E4F7; color: #7B4FA8; } .pill.ok { background: #E2F0EA; color: #1F7A5C; } .dash-foot { margin-top: 30px; font-size: 12px; color: var(--ink-45); text-align: center; } /* ---------- chart maximizer: expand button + full-screen viewer ---------- */ .ch-max { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 5; width: 27px; height: 27px; border: 1px solid var(--line); background: #fff; border-radius: 7px; cursor: pointer; color: var(--ink-45); font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: .5; transition: opacity .12s ease, background .12s ease, color .12s ease; } .dcard:hover .ch-max { opacity: 1; } .ch-max:hover { background: var(--mint); color: var(--pri); border-color: #BFE0CC; } .ch-modal { position: fixed; inset: 0; z-index: 3000; background: rgba(6, 40, 24, .55); display: none; align-items: center; justify-content: center; padding: 26px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .ch-modal.open { display: flex; } .ch-panel { background: #FBFAF7; border-radius: 16px; width: min(1150px, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); } .ch-head { display: flex; align-items: baseline; gap: 12px; padding: 16px 22px 12px; border-bottom: 2px solid #CFE3D6; flex: 0 0 auto; } .ch-head b { font: 800 19px var(--font-display); letter-spacing: -.01em; } .ch-head .ch-note { font-size: 13px; color: var(--ink-45); flex: 1; min-width: 0; } .ch-close { border: 0; background: #ECF2ED; width: 34px; height: 34px; border-radius: 9px; font-size: 18px; cursor: pointer; color: var(--ink-70); flex: 0 0 auto; align-self: center; } .ch-close:hover { background: #DDE8DF; } .ch-body { padding: 22px 28px 28px; overflow: auto; font-size: 14.5px; } .ch-body h3, .ch-body .note, .ch-body .ch-max { display: none; } .ch-body svg { max-width: 100%; height: auto; } .ch-body .donut-row { gap: 36px; justify-content: center; } .ch-body .donut-row > svg { width: min(420px, 58vw); } .ch-body .dz-legend { font-size: 15px; gap: 9px; min-width: 220px; flex: 0 1 auto; } .ch-body .dz-legend .sw { width: 13px; height: 13px; } .ch-body .hbar { font-size: 14.5px; gap: 9px 14px; grid-template-columns: minmax(150px, auto) 1fr auto; } .ch-body .hbar .tr { height: 19px; } .ch-body .hbar .vl { font-size: 13.5px; } .ch-body .share-cell .mini, .ch-body .share-cell .mini.w { width: 160px; height: 11px; } .ch-body .tbl-scroll { max-height: none !important; overflow: visible !important; } .ch-body table.dz { font-size: 13.5px; } .ch-body .pie-block svg, .ch-body .colchart svg { width: 100%; } @media (max-width: 640px) { .ch-modal { padding: 8px; } .ch-body { padding: 14px; } .ch-body .donut-row > svg { width: 78vw; } } /* ===== village card — redesigned popup (map) ===== */ .vcard { font-family: var(--font); width: 302px; margin: -2px -4px; max-height: min(68vh, 560px); overflow-y: auto; overscroll-behavior: contain; } .vcard::-webkit-scrollbar { width: 7px; } .vcard::-webkit-scrollbar-thumb { background: #CBDACE; border-radius: 99px; } .vcard-hd { background: linear-gradient(135deg, #0A5230 0%, #14733F 100%); color: #fff; border-radius: 12px 12px 0 0; position: relative; /* the right gutter keeps the badge clear of Leaflet's close button */ padding: 12px 40px 11px 14px; display: flex; align-items: flex-start; gap: 10px; } .vcard-hd > .vcard-txt { flex: 1 1 auto; min-width: 0; } .vcard-hd h4 { font-family: var(--font-display); font-size: 16px; line-height: 1.2; margin: 0 0 3px; letter-spacing: -.01em; overflow-wrap: anywhere; } .vcard-hd .vsub { font-size: 11px; opacity: .82; display: block; line-height: 1.35; overflow-wrap: anywhere; } /* in the flex row, not floating over the title */ .vcard-score { flex: 0 0 auto; text-align: center; order: 2; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); border-radius: 11px; padding: 4px 9px 3px; min-width: 46px; } .vcard-score b { display: block; font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; } .vcard-score span { font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; } .vcard-body { background: #fff; padding: 11px 13px 4px; } .vsec { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #8AA394; margin: 11px 0 6px; display: flex; align-items: baseline; gap: 3px 7px; flex-wrap: wrap; } .vsec:first-child { margin-top: 2px; } .vsec::after { content: ""; flex: 1; height: 1px; background: #E5EDE7; } /* facility chip grid */ .vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .vchip { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; line-height: 1.15; } .vchip i { font-style: normal; font-size: 12px; width: 13px; text-align: center; flex: none; } .vchip.yes { background: #EAF6EE; color: #0A5230; border-color: #CBE6D6; } .vchip.no { background: #FDF1F1; color: #A02222; border-color: #F0D3D3; } .vchip.yes i::before { content: "✓"; font-weight: 900; } .vchip.no i::before { content: "✗"; font-weight: 900; } /* fact rows */ .vrow { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 3.5px 0; border-bottom: 1px dashed #EDF2EE; font-size: 12px; } .vrow:last-child { border-bottom: 0; } .vrow > span { color: #62786C; } .vrow > b { font-variant-numeric: tabular-nums; text-align: end; color: #17321F; font-weight: 800; } .vrow b.bad { color: #B91C1C; } .vrow b.good { color: #0D6A3E; } /* mini meter */ .vmeter { height: 4px; border-radius: 99px; background: #EDF2EE; overflow: hidden; margin-top: 3px; } .vmeter i { display: block; height: 100%; border-radius: 99px; } /* census block */ .vcensus { background: #F6F9F6; border: 1px solid #E3ECE5; border-radius: 10px; padding: 9px 11px 7px; margin-top: 3px; } .vcensus .vsec { margin-top: 0; color: #4A7A5E; } /* the village's own Census 2023 record — the headline, not the surrounding circle */ .vcensus.own { background: #F2F8F3; border-color: #C9E0CF; border-inline-start: 4px solid #0D6A3E; margin-top: 6px; } .vcensus.own .vsec { color: #0A5230; font-weight: 800; } .vcensus.ctx { background: #FAFAF8; border-color: #E7E7E1; margin-top: 6px; opacity: .92; } .vcensus.ctx .vsec { color: #6B7280; } .vsrc { font-weight:600; font-size:9px; letter-spacing:.02em; text-transform:none; color:var(--ink-45); margin-inline-start:0; line-height:1.35; } .vcensus .vsec2 { font: 800 9.5px var(--font-display); text-transform: uppercase; letter-spacing: .07em; color: #6B7280; margin: 8px 0 3px; padding-top: 6px; border-top: 1px solid #DFE8E1; } .vbig { display: flex; gap: 8px; margin-bottom: 7px; } .vbig div { flex: 1; background: #fff; border: 1px solid #E3ECE5; border-radius: 8px; padding: 6px 8px; } .vbig b { display: block; font-size: 14.5px; color: #0A5230; font-variant-numeric: tabular-nums; line-height: 1.1; } .vbig span { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: #7A9186; } .vcard-ft { padding: 8px 13px 11px; font-size: 10px; color: #94A99C; line-height: 1.45; } .vcard-ft a { color: #0A5230; font-weight: 700; text-decoration: none; } .vcard-acts { display: flex; gap: 6px; padding: 0 13px 10px; } .vcard-acts a { flex: 1; text-align: center; font-size: 11px; font-weight: 800; padding: 6px 4px; border-radius: 8px; background: #0A5230; color: #fff; text-decoration: none; } .vcard-acts a.alt { background: #fff; color: #0A5230; border: 1.5px solid #0A5230; } .leaflet-popup-content-wrapper:has(.vcard) { padding: 0; border-radius: 13px; overflow: hidden; } .leaflet-popup-content:has(.vcard) { margin: 0; width: 302px !important; } .vcard > .vcard-hd { position: sticky; top: 0; z-index: 3; } /* village card — school list, notes */ .vnote { font-size: 10px; color: #7A9186; line-height: 1.45; margin: -2px 0 7px; } .vschools { display: grid; gap: 4px; margin: 6px 0 2px; } .vsch { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 8px; background: #F6F9F6; border: 1px solid #E3ECE5; text-decoration: none; color: #17321F; } .vsch:hover { border-color: #0A5230; background: #EFF6F1; } .vsch i { width: 7px; height: 7px; border-radius: 99px; flex: none; } .vsch i.gb { background: #23557E; } .vsch i.gg { background: #E0559B; } .vsch i.gm { background: #6E8093; } .vsch .nm { flex: 1; font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vsch .mt { font-size: 10px; color: #6E8478; font-variant-numeric: tabular-nums; flex: none; } .vmore { font-size: 10.5px; color: #7A9186; padding: 2px 8px; } .vcard-acts a[data-vpdf] { cursor: pointer; } /* village cluster bubbles — brick, to read apart from the green school clusters */ .vil-cluster { background: radial-gradient(circle at 32% 28%, #A8461C 0%, #7C2D12 72%); border: 2.5px solid rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 2px 8px rgba(90,30,10,.42); display: flex; align-items: center; justify-content: center; } .vil-cluster span { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0,0,0,.3); } .poly-label.vil span { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- area report inside the Schools filter ------------------------------- */ .area-rep { margin: 8px 0 2px; padding: 9px 10px 8px; border: 1px solid #E3ECE5; border-radius: 10px; background: linear-gradient(#FBFDFB, #F4F8F5); } .area-rep .vsec { margin-top: 0; color: #0A5230; } .area-rep .vsec2 { margin-top: 9px; padding-top: 7px; border-top: 1px solid #E3ECE5; color: #6B7280; } .area-rep .vrow { padding: 3px 0; font-size: 11px; } .area-rep .vbig div { background: #fff; } .area-rep .vnote { margin: 7px 0 0; } .area-rep .vfoot { font-size: 9.5px; line-height: 1.45; color: #8A6D3B; background: #FFF8E7; border: 1px solid #F0E2C0; border-radius: 6px; padding: 4px 6px; margin: 4px 0 2px; } .area-rep .vfoot b { color: #6B5320; font-variant-numeric: tabular-nums; } .area-rep .arep-acts { margin-top: 8px; padding-top: 8px; border-top: 1px solid #E3ECE5; display: flex; flex-direction: column; gap: 5px; } .area-rep .arep-acts .clearbtn { margin: 0; text-align: start; line-height: 1.35; } .area-rep .arep-acts .clearbtn b { display: block; } /* --- dark operations basemap: re-tint the overlays that sit on the map ----- */ body.map-dark .legend-chip, body.map-dark .map-panel { background: rgba(11, 20, 17, .82); border-color: rgba(120, 220, 170, .22); color: #C8DCD1; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); } body.map-dark .legend-chip .lbl { color: #EAF6EF; } body.map-dark .legend-chip .lg .dot, body.map-dark .legend-chip .lg .rline { border-color: rgba(255, 255, 255, .35); } body.map-dark .leaflet-control-zoom a { background: rgba(11, 20, 17, .88); color: #D6EDE1; border-color: rgba(120, 220, 170, .2); } body.map-dark .leaflet-control-zoom a:hover { background: rgba(22, 40, 32, .95); color: #fff; } body.map-dark .leaflet-control-attribution { background: rgba(11, 20, 17, .72); color: #8FA79A; } body.map-dark .leaflet-control-attribution a { color: #7FD3A8; } body.map-dark .leaflet-control-scale-line { background: rgba(11, 20, 17, .7); color: #C8DCD1; border-color: rgba(120, 220, 170, .35); } /* ===================================================================== COMMAND CONSOLE - the in-map operations HUD. z-index 820: above .legend-chip / .leaflet-control (800), below .gis-dock (860), .dock-toggle (870) and .fs-dock (950), so the zoom control, the tools button and the attribution can never be covered. The palette is the project's own dark language, not an imported one. Physical `right`, not inset-inline-end, on purpose: Leaflet does not mirror its control corners in RTL and .legend-chip already uses a physical `left`, so a logical inset would land this on the zoom control. ===================================================================== */ .hud-console { --hud-bg: rgba(8,16,13,.90); --hud-bg2: rgba(6,12,10,.94); --hud-line: rgba(120,220,170,.22); --hud-edge: rgba(127,211,168,.55); --hud-neon: #7FD3A8; --hud-txt: #C8DCD1; --hud-hi: #EAF6EF; --hud-mute: #9DB6A8; --hud-bad: #FF9A9A; --hud-ring: rgba(255,255,255,.30); --hud-ease: cubic-bezier(.32,.72,.28,1); --hud-mono: ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,"SF Mono",Menlo,"DejaVu Sans Mono",monospace; position:absolute; top:112px; right:12px; z-index:820; width:272px; max-width:calc(100% - 24px); max-height:min(calc(100% - 124px), max(210px, calc(100% - 200px))); display:flex; flex-direction:column; overflow:hidden; isolation:isolate; background:linear-gradient(180deg,var(--hud-bg),var(--hud-bg2)); border:1px solid var(--hud-line); border-radius:14px; -webkit-backdrop-filter:blur(10px) saturate(1.15); backdrop-filter:blur(10px) saturate(1.15); /* a dark panel on a PALE street map separates by an OUTER highlight - an inner one is invisible against its own dark glass */ box-shadow:0 0 0 1px var(--hud-ring), 0 14px 40px rgba(0,0,0,.45); color:var(--hud-txt); font-family:var(--font-body); font-size:12px; line-height:1.35; transition:opacity .22s var(--hud-ease); animation:hudBoot .40s var(--hud-ease) both; } /* the operations basemap is already dark - lighten the glass, drop the ring */ body.map-dark .hud-console { --hud-bg:rgba(11,20,17,.78); --hud-bg2:rgba(8,15,13,.86); --hud-ring:rgba(120,220,170,.20); } @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) { .hud-console { --hud-bg:rgba(8,16,13,.97); --hud-bg2:rgba(6,12,10,.98); } } @keyframes hudBoot { from { opacity:0; transform:translateY(-8px) scale(.986); } } /* corner brackets - inside the panel's own box, never inset from the map, so they can never paint over the legend chip or a Leaflet control */ .hud-frame { position:absolute; inset:0; pointer-events:none; z-index:3; } .hud-frame i { position:absolute; width:16px; height:16px; border:0 solid var(--hud-edge); } .hud-frame .tl { top:5px; left:5px; border-width:1.5px 0 0 1.5px; border-radius:9px 0 0 0; } .hud-frame .tr { top:5px; right:5px; border-width:1.5px 1.5px 0 0; border-radius:0 9px 0 0; } .hud-frame .bl { bottom:5px; left:5px; border-width:0 0 1.5px 1.5px; border-radius:0 0 0 9px; } .hud-frame .br { bottom:5px; right:5px; border-width:0 1.5px 1.5px 0; border-radius:0 0 9px 0; } /* the header strip is also the collapse control */ .hud-bar { -webkit-appearance:none; appearance:none; display:flex; align-items:center; gap:9px; margin:0; padding:9px 13px 8px; border:0; border-bottom:1px solid var(--hud-line); background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(127,211,168,.11), rgba(127,211,168,0)); color:var(--hud-hi); cursor:pointer; text-align:start; width:100%; font:inherit; transition:background .2s var(--hud-ease); } .hud-bar:hover { background:linear-gradient(180deg, rgba(127,211,168,.18), rgba(127,211,168,.02)); } .hud-bar:focus-visible { outline:2px solid var(--hud-neon); outline-offset:-3px; } .hud-live { display:inline-flex; align-items:center; gap:6px; font:800 9.5px/1 var(--font-display); text-transform:uppercase; letter-spacing:.12em; color:var(--hud-neon); } /* named hudBeat, not sedPulse: that name is already declared twice in this app */ .hud-live i { width:7px; height:7px; border-radius:50%; background:#4ADE80; flex:0 0 auto; box-shadow:0 0 0 0 rgba(74,222,128,.55); animation:hudBeat 2.6s var(--hud-ease) infinite; } @keyframes hudBeat { 0% { box-shadow:0 0 0 0 rgba(74,222,128,.55); } 70% { box-shadow:0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow:0 0 0 0 rgba(74,222,128,0); } } .hud-lvl { margin-inline-start:auto; font:800 9.5px/1 var(--font-display); text-transform:uppercase; letter-spacing:.14em; color:var(--hud-mute); border:1px solid var(--hud-line); border-radius:5px; padding:3px 7px; transition:color .25s var(--hud-ease), border-color .25s var(--hud-ease); } .hud-console:not([data-scope="province"]) .hud-lvl { color:var(--hud-neon); border-color:var(--hud-edge); } .hud-caret { color:var(--hud-mute); font-size:11px; line-height:1; } .hud-body { padding:11px 13px 10px; overflow-y:auto; overscroll-behavior:contain; } .hud-console.hud-min .hud-body { display:none; } .hud-name { font:800 16px/1.15 var(--font-display); color:var(--hud-hi); letter-spacing:.005em; overflow-wrap:anywhere; } .hud-sub { margin-top:2px; font-size:10.5px; color:var(--hud-mute); } /* the one moving line. Its rest state is off-panel, so killing the animation hides it cleanly - nothing sits there inert. */ .hud-rule { position:relative; height:2px; margin:9px 0 10px; overflow:hidden; border-radius:2px; background:linear-gradient(90deg, transparent, var(--hud-line) 12%, var(--hud-line) 88%, transparent); } .hud-rule i { position:absolute; top:0; bottom:0; left:0; width:38%; background:linear-gradient(90deg, transparent, var(--hud-neon), transparent); transform:translateX(-130%); animation:hudScan 9s var(--hud-ease) infinite; } @keyframes hudScan { 0%,66% { transform:translateX(-130%); } 100% { transform:translateX(300%); } } /* the scope assertion - the most instrument-looking element on the panel and simultaneously the disclaimer. Never display:none it. */ .hud-scope { display:flex; align-items:center; gap:7px; margin-bottom:9px; } .hud-scope > span:last-child { font-size:9.5px; line-height:1.3; color:var(--hud-mute); } .hud-brk { flex:0 0 auto; display:inline-flex; align-items:center; padding:2px 4px; font:800 8.5px/1 var(--font-display); text-transform:uppercase; letter-spacing:.16em; color:var(--hud-neon); white-space:nowrap; } .hud-brk::before, .hud-brk::after { content:""; width:4px; height:11px; border:1px solid var(--hud-edge); } .hud-brk::before { border-inline-end:0; margin-inline-end:5px; } .hud-brk::after { border-inline-start:0; margin-inline-start:5px; } .hud-heroes { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .hud-hero { border:1px solid var(--hud-line); border-radius:9px; padding:7px 9px 6px; background:linear-gradient(180deg, rgba(127,211,168,.07), rgba(127,211,168,0)); } .hud-hero b { display:block; font:800 19px/1.05 var(--font-display); color:var(--hud-hi); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .hud-hero span { display:block; margin-top:3px; font:800 8.5px/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.08em; color:var(--hud-mute); } .hud-hero em { display:block; margin-top:2px; font-style:normal; font-size:9px; color:var(--hud-mute); } .hud-hero em i { font-style:normal; font-variant-numeric:tabular-nums; } /* solid hairlines, not dotted leaders: a dotted leader is an invoice idiom and is what made the first draft read as a settings panel painted black */ .hud-rows { margin:9px 0 0; } .hud-row { display:flex; align-items:baseline; gap:10px; padding:5px 0; border-bottom:1px solid rgba(127,211,168,.10); } .hud-row:last-child { border-bottom:0; } .hud-row .k { flex:1 1 auto; font-size:11px; color:var(--hud-txt); } .hud-row .k em { display:block; margin-top:1px; font-style:normal; font-size:9px; color:var(--hud-mute); } .hud-row .k em i { font-style:normal; font-variant-numeric:tabular-nums; } .hud-row > b { flex:0 0 auto; color:var(--hud-hi); font-family:var(--hud-mono); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"zero" 1; } .hud-row > b.bad { color:var(--hud-bad); } .hud-sec { margin:11px 0 5px; padding-top:8px; border-top:1px solid var(--hud-line); font:800 8.5px/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.11em; color:var(--hud-neon); } .hud-mix { display:flex; height:7px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px var(--hud-line); } .hud-mix i { display:block; width:0; transition:width .32s var(--hud-ease); } /* the categorical hexes are load-bearing - identical to the legend chip, the dock swatches and the PDF plates. Neon comes from a same-hue glow, never a hue shift and never a white overlay, which would desaturate them to chalk. */ .hud-mix .p { background:#1F7A5C; } .hud-mix .m { background:#C2802B; } .hud-mix .h { background:#23557E; } .hud-mix .s { background:#7B4FA8; } .hud-keys { display:flex; flex-wrap:wrap; gap:4px 11px; margin-top:7px; } .hud-keys .k { display:inline-flex; align-items:center; gap:5px; font:800 9px/1 var(--font-display); letter-spacing:.07em; color:var(--hud-mute); } .hud-keys .k i { width:7px; height:7px; border-radius:2px; } .hud-keys .p i { background:#1F7A5C; box-shadow:0 0 7px rgba(31,122,92,.95); } .hud-keys .m i { background:#C2802B; box-shadow:0 0 7px rgba(194,128,43,.95); } .hud-keys .h i { background:#23557E; box-shadow:0 0 7px rgba(35,85,126,.95); } .hud-keys .s i { background:#7B4FA8; box-shadow:0 0 7px rgba(123,79,168,.95); } .hud-keys .k b { font-family:var(--hud-mono); font-size:10.5px; color:var(--hud-hi); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"zero" 1; } /* the caveat strip, kept in the same mint temperature as the panel so it does not read as a warning label taped onto the glass */ .hud-note { margin:7px 0 0; padding:6px 8px; border-radius:7px; font-size:9.5px; line-height:1.42; color:#B9D6C6; background:rgba(127,211,168,.07); border:1px solid rgba(127,211,168,.20); } .hud-state { display:flex; align-items:baseline; gap:9px; margin:0 0 4px; font-size:10.5px; } .hud-state > span { flex:0 0 auto; font:800 8.5px/1.4 var(--font-display); text-transform:uppercase; letter-spacing:.09em; color:var(--hud-mute); } .hud-state > i { font-style:normal; flex:1 1 auto; text-align:end; color:var(--hud-txt); font-weight:600; overflow-wrap:anywhere; } .hud-foot { display:flex; flex-wrap:wrap; gap:3px 10px; margin-top:10px; padding-top:8px; border-top:1px solid var(--hud-line); font-family:var(--hud-mono); font-size:9.5px; color:var(--hud-mute); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"zero" 1; } .hud-foot span:nth-child(2) { color:var(--hud-neon); } .hud-sr { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* a school card can be dragged under the console - fade, never hide */ .hud-console.hud-quiet { opacity:.32; } .hud-console.hud-quiet:hover, .hud-console.hud-quiet:focus-within { opacity:1; } /* the Area Intelligence Report owns the screen at z 1200 - stand down */ body.imx-open .hud-console { opacity:0; pointer-events:none; } @media (prefers-reduced-motion: reduce) { .hud-console, .hud-rule i, .hud-live i, .hud-mix i, .hud-bar, .hud-lvl { animation:none !important; transition:none !important; } .hud-rule i { opacity:0; } .hud-live i { box-shadow:0 0 0 2.5px rgba(74,222,128,.30); } } /* 760px, not 700px: that is where the dock becomes an off-canvas overlay */ @media (max-width:760px) { .hud-console { top:126px; left:10px; right:10px; width:auto; max-width:none; max-height:min(calc(100% - 138px), max(190px, min(50vh, calc(100% - 220px)))); border-radius:12px; } .hud-name { font-size:15px; } .hud-heroes { grid-template-columns:1fr 1fr; } .hud-rows { display:grid; grid-template-columns:1fr 1fr; column-gap:16px; } .hud-row { border-bottom:1px solid rgba(127,211,168,.10); } .hud-row:nth-last-child(2) { border-bottom:0; } /* .hud-note, .hud-scope and .hud-foot are NEVER hidden - the caveat and the coverage / as-of line are the honesty structure, not decoration. */ .hud-note { font-size:9px; padding:5px 7px; } .hud-foot { font-size:9px; } .hud-console.hud-min { max-height:none; } } @media (max-width:480px) { .hud-console { max-height:min(calc(100% - 138px), max(180px, min(46vh, calc(100% - 210px)))); } .hud-rows { grid-template-columns:1fr; } .hud-row:nth-last-child(2) { border-bottom:1px solid rgba(127,211,168,.10); } .hud-row:last-child { border-bottom:0; } } /* ---- the sense of data moving through the console --------------------- hudTick fires only on a value that actually changed, so it marks a real recomputation. The other two are texture, attached to no figure. */ @keyframes hudTick { 0% { text-shadow:0 0 0 rgba(127,211,168,0); } 16% { text-shadow:0 0 12px rgba(127,211,168,.95); } 100% { text-shadow:0 0 0 rgba(127,211,168,0); } } .hud-tick-a, .hud-tick-b { animation:hudTick .62s var(--hud-ease); } .hud-body { position:relative; isolation:isolate; } .hud-body::before { content:""; position:absolute; inset:-40px 0; z-index:-1; pointer-events:none; background:repeating-linear-gradient(180deg, rgba(127,211,168,.055) 0 1px, transparent 1px 23px); -webkit-mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); animation:hudFlow 6s linear infinite; } @keyframes hudFlow { to { transform:translateY(23px); } } .hud-mix { position:relative; } .hud-mix::after { content:""; position:absolute; inset:0; border-radius:99px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,.40), transparent); transform:translateX(-100%); animation:hudSheen 4.6s var(--hud-ease) infinite; } @keyframes hudSheen { 0%,55% { transform:translateX(-100%); } 100% { transform:translateX(100%); } } @media (prefers-reduced-motion: reduce) { .hud-tick-a, .hud-tick-b, .hud-body::before, .hud-mix::after { animation:none !important; } .hud-body::before, .hud-mix::after { opacity:0; } } /* a map with nothing in its top-right corner does not need the 112px reserve */ .hud-console.hud-flush { top:12px; } .hud-console.hud-flush { max-height:min(calc(100% - 24px), max(210px, calc(100% - 100px))); } /* the Intelligence console shades by rank on a ramp, not by school level, so its bar carries the ramp's own colours rather than the categorical hexes */ .hud-mix.q .q1 { background:#D7EBDF; } .hud-mix.q .q2 { background:#7FC79E; } .hud-mix.q .q3 { background:#2E9160; } .hud-mix.q .q4 { background:#0A5230; } .hud-keys .q1 i { background:#D7EBDF; box-shadow:0 0 7px rgba(215,235,223,.55); } .hud-keys .q2 i { background:#7FC79E; box-shadow:0 0 7px rgba(127,199,158,.75); } .hud-keys .q3 i { background:#2E9160; box-shadow:0 0 7px rgba(46,145,96,.85); } .hud-keys .q4 i { background:#0A5230; box-shadow:0 0 8px rgba(22,163,74,.85); } /* ---- console donuts, class ladder and the recommendation block --------- */ .hud-pies { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:2px; } .hud-pie { position:relative; text-align:center; } .hud-pie svg { display:block; width:100%; height:auto; max-width:96px; margin:0 auto; } /* the flow: a share change sweeps the ring rather than jumping */ .hud-pie svg circle { transition:stroke-dasharray .55s var(--hud-ease), stroke-dashoffset .55s var(--hud-ease); } .hud-pie > b { position:absolute; inset-inline:0; top:50%; transform:translateY(-52%); font-family:var(--hud-mono); font-size:12px; font-weight:600; color:var(--hud-hi); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"zero" 1; pointer-events:none; } .hud-pie > span { display:block; margin-top:4px; font:800 8.5px/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.08em; color:var(--hud-mute); } .hud-keys .gb i { background:#23557E; box-shadow:0 0 7px rgba(35,85,126,.95); } .hud-keys .gg i { background:#E0559B; box-shadow:0 0 7px rgba(224,85,155,.95); } .hud-keys .gm i { background:#6E8093; box-shadow:0 0 7px rgba(110,128,147,.85); } .hud-keys .c0 i { background:#C2802B; box-shadow:0 0 7px rgba(194,128,43,.95); } .hud-keys .c1 i { background:#1F7A5C; box-shadow:0 0 7px rgba(31,122,92,.95); } .hud-keys .c2 i { background:#23557E; box-shadow:0 0 7px rgba(35,85,126,.95); } .hud-keys .c3 i { background:#7B4FA8; box-shadow:0 0 7px rgba(123,79,168,.95); } .hud-keys .c4 i { background:#E0559B; box-shadow:0 0 7px rgba(224,85,155,.95); } .hud-load { -webkit-appearance:none; appearance:none; width:100%; margin-top:7px; padding:6px 9px; border-radius:8px; cursor:pointer; text-align:start; border:1px dashed var(--hud-line); background:rgba(127,211,168,.05); color:var(--hud-txt); font:600 10.5px/1.3 var(--font-body); } .hud-load:hover { background:rgba(127,211,168,.12); border-style:solid; } .hud-load em { display:block; font-style:normal; font-size:9px; color:var(--hud-mute); margin-top:1px; } .hud-rec { margin-top:7px; padding:7px 9px; border-radius:8px; border:1px solid var(--hud-line); background:linear-gradient(180deg, rgba(127,211,168,.09), rgba(127,211,168,0)); } .hud-rec > span { display:block; font:800 8.5px/1.2 var(--font-display); text-transform:uppercase; letter-spacing:.09em; color:var(--hud-mute); } .hud-rec > b { display:block; margin-top:3px; font:800 12.5px/1.25 var(--font-display); color:var(--hud-hi); overflow-wrap:anywhere; } .hud-rec > em { display:block; margin-top:2px; font-style:normal; font-size:9.5px; color:var(--hud-neon); } @media (prefers-reduced-motion: reduce) { .hud-pie svg circle { transition:none !important; } } /* the console mounted in a side rail rather than floating over a map */ .lv-rail .hud-console { position:static; width:auto; max-width:none; max-height:none; animation:none; } /* ===================================================================== */ /* LIVE ANALYSIS STRIP - the panels below the map on index.html. */ /* Dark on purpose: it is the same instrument as the console floating */ /* over the map, not a light card that happens to sit underneath it. */ /* ===================================================================== */ .anl { --a-line:#1E2F2B; --a-neon:#34D399; --a-txt:#B7C7CE; --a-mute:#7E939C; --a-ease:cubic-bezier(.32,.72,.28,1); flex:0 0 auto; background:#070D11; border-top:1px solid #14201F; z-index:880; display:flex; flex-direction:column; /* a share of the screen, so a short display still shows a map */ max-height:min(342px, 38vh); transition:max-height .2s var(--a-ease); } .anl.anl-min { max-height:38px; } .anl-bar { -webkit-appearance:none; appearance:none; display:flex; align-items:center; gap:11px; width:100%; padding:9px 18px; border:0; cursor:pointer; text-align:start; background:linear-gradient(180deg,rgba(52,211,153,.09),transparent); color:#EAF4F2; font:inherit; } .anl-bar:hover { background:linear-gradient(180deg,rgba(52,211,153,.16),transparent); } .anl-bar:focus-visible { outline:2px solid var(--a-neon); outline-offset:-3px; } .anl-t { font:800 10px/1 var(--font-display); text-transform:uppercase; letter-spacing:.13em; color:var(--a-neon); } .anl-sc { font-size:11px; color:var(--a-mute); } .anl-car { margin-inline-start:auto; color:var(--a-mute); font-size:12px; } .anl-body { overflow:auto; padding:0 18px 14px; display:flex; flex-direction:column; gap:12px; } .anl.anl-min .anl-body { display:none; } .anl-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:11px; } .anl-kpi { position:relative; padding:12px 13px 11px; border-radius:14px; overflow:hidden; border:1px solid var(--a-line); background:linear-gradient(150deg,color-mix(in srgb,var(--c) 11%,transparent),rgba(255,255,255,.012) 62%); } .anl-kpi .ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; margin-bottom:9px; background:color-mix(in srgb,var(--c) 18%,transparent); } .anl-kpi .ic svg { width:18px; height:18px; color:var(--c); } .anl-kpi h3 { margin:0; font:700 9.5px/1.2 var(--font-body); text-transform:uppercase; letter-spacing:.1em; color:var(--c); } .anl-kpi b { display:block; margin-top:5px; font:800 25px/1.02 var(--font-display); color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.01em; } .anl-kpi .sub { display:block; margin-top:4px; font-size:10px; color:var(--a-mute); line-height:1.4; } .anl-kpi .dl { display:inline-block; margin-top:7px; font-size:10.5px; font-weight:600; } .anl-kpi .dl.up { color:#4ADE80; } .anl-kpi .dl.dn { color:#FB7185; } .anl-kpi .dl.flat { color:#94A3B8; } .anl-cards { display:grid; grid-template-columns:1.45fr 1fr 1fr 1.05fr; gap:11px; } .anl-card { border:1px solid var(--a-line); border-radius:14px; padding:12px 13px 11px; background:#0A121A; min-width:0; } .anl-card > h3 { margin:0 0 11px; font:700 10px/1.2 var(--font-body); text-transform:uppercase; letter-spacing:.09em; color:#fff; display:flex; align-items:baseline; gap:7px; } .anl-card > h3 em { font-style:normal; color:var(--a-mute); letter-spacing:.05em; font-size:9.5px; font-weight:500; } .anl-card > h3 a { margin-inline-start:auto; color:#38BDF8; text-decoration:none; font-size:10px; text-transform:none; letter-spacing:0; font-weight:600; } .anl-pie { display:flex; align-items:center; gap:12px; } .anl-pie svg.dn { width:104px; height:104px; flex:0 0 auto; } .anl-pie svg.dn circle { transition:stroke-dasharray .6s var(--a-ease), stroke-dashoffset .6s var(--a-ease); } .anl-leg { flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; } .anl-leg .li { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--a-txt); } .anl-leg .li i { width:10px; height:10px; border-radius:3px; flex:0 0 auto; } .anl-leg .li b { margin-inline-start:auto; font-size:11.5px; color:#fff; font-variant-numeric:tabular-nums; } .anl-bars { display:flex; flex-direction:column; gap:8px; } .anl-bar { display:flex; align-items:center; gap:9px; font-size:11.5px; } .anl-bar > span { flex:0 0 56px; color:var(--a-txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .anl-bar .tr { flex:1; height:9px; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden; } .anl-bar .tr i { display:block; height:100%; border-radius:99px; width:0; transition:width .6s var(--a-ease); } .anl-bar > b { flex:0 0 auto; font-size:11.5px; color:#fff; font-variant-numeric:tabular-nums; } .anl-note { margin:10px 0 0; font-size:9.5px; line-height:1.5; color:#9FC4B4; background:rgba(52,211,153,.06); border:1px solid rgba(52,211,153,.16); border-radius:8px; padding:7px 9px; } .anl-tip { position:absolute; pointer-events:none; z-index:5; padding:7px 10px; border-radius:9px; background:#0E1B24; border:1px solid #2A4640; font-size:11px; line-height:1.45; color:var(--a-txt); box-shadow:0 10px 26px rgba(0,0,0,.5); white-space:nowrap; opacity:0; transition:opacity .15s var(--a-ease); } .anl-tip b { display:block; color:#fff; font-size:12px; margin-bottom:2px; } @media (max-width:1200px) { .anl-cards { grid-template-columns:1fr 1fr; } .anl { max-height:min(400px, 42vh); } } @media (max-width:760px) { .anl-cards { grid-template-columns:1fr; } .anl { max-height:52vh; } } @media (prefers-reduced-motion: reduce) { .anl, .anl *, .anl *::before { transition:none !important; } } /* ---- basemap pills, on the map itself ---------------------------------- */ .bmp { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:820; display:flex; gap:3px; padding:4px; border-radius:13px; background:rgba(255,255,255,.94); border:1px solid var(--line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 6px 22px rgba(10,60,35,.20); } .bmp button { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:0; cursor:pointer; border-radius:10px; background:transparent; color:var(--ink-70); font:700 11.5px/1 var(--font-body); white-space:nowrap; transition:background .18s ease, color .18s ease; } .bmp button svg { width:15px; height:15px; flex:0 0 auto; opacity:.75; } .bmp button:hover { background:var(--mint); color:var(--ink); } .bmp button:focus-visible { outline:2px solid var(--pri-2); outline-offset:-2px; } .bmp button.on { background:linear-gradient(160deg,var(--pri-2),var(--pri)); color:#fff; } .bmp button.on svg { opacity:1; } /* on the dark operations basemap the group must not glare */ body.map-dark .bmp { background:rgba(11,20,17,.86); border-color:rgba(120,220,170,.22); box-shadow:0 8px 26px rgba(0,0,0,.5); } body.map-dark .bmp button { color:#C8DCD1; } body.map-dark .bmp button:hover { background:rgba(120,220,170,.14); color:#fff; } body.map-dark .bmp button.on { background:linear-gradient(160deg,#15883B,#0A5230); color:#fff; } /* narrow maps: drop the words, keep the icons */ @media (max-width:1080px) { .bmp button span { display:none; } .bmp button { padding:8px 10px; } } @media (max-width:520px) { .bmp { top:8px; } } @media (prefers-reduced-motion: reduce) { .bmp button { transition:none; } } /* ---- folding the layers dock ------------------------------------------- */ /* display:none, not width:0 - the dock is a flex item full of