/* css/map.css — magalia map chrome (Leaflet skin overrides + kit controls/legend/popup).
*
* Phase 0 / Deliverable 0.5. Link AFTER /js/lib/leaflet/leaflet.css and AFTER /css/tokens.css:
*
*
*
*
* EVERY colour here resolves through the PKU tokens (var(--pku-*)/--ink/--paper/--hairline/
* --muted/--sub). The only raw hex on the whole map estate lives in the JS data-scale constants
* (TIERC/EVALC/… in magalia-map-kit.js). Local fallbacks below let map.css render correctly even
* if a page forgot to link tokens.css. Works light AND dark (tokens.css flips the values).
*/
/* token fallbacks (no-op when tokens.css is linked; safety net when it isn't) */
.mmk-control,.mmk-legend,.leaflet-container{
--mmk-paper:var(--paper,#fffdf9);
--mmk-ink:var(--ink,#232323);
--mmk-muted:var(--muted,#9A9A9A);
--mmk-hairline:var(--hairline,#E2E2E2);
--mmk-sub:var(--sub,#f4f1ea);
--mmk-navy:var(--pku-navy,#1F3A66);
--mmk-crimson:var(--pku-crimson,#BE1E2D);
--mmk-gold:var(--pku-gold,#B8985A);
}
/* ---------------------------------------------------------------------------
* 1. Leaflet container + tile canvas
* ------------------------------------------------------------------------- */
.leaflet-container{
background:var(--sub,#f4f1ea); /* sea/void behind borderless ancient tiles */
font-family:var(--font-sans,system-ui,sans-serif);
color:var(--mmk-ink);
}
.leaflet-container a{color:var(--mmk-navy);}
/* ---------------------------------------------------------------------------
* 2. Zoom + attribution controls — paper chrome, navy ink, gold focus
* ------------------------------------------------------------------------- */
.leaflet-bar a,.leaflet-bar a:hover{
background:var(--mmk-paper);color:var(--mmk-navy);
border-bottom-color:var(--mmk-hairline);
}
.leaflet-bar a:hover{background:var(--mmk-sub);}
.leaflet-bar a:focus-visible,
.mmk-control input:focus-visible{outline:2px solid var(--mmk-crimson);outline-offset:1px;}
.leaflet-bar{border:1px solid var(--mmk-hairline);box-shadow:0 1px 4px rgba(31,58,102,.18);}
.leaflet-control-attribution{
background:var(--mmk-paper);color:var(--mmk-muted);
font-size:10px;border-top-left-radius:6px;
}
.leaflet-control-attribution a{color:var(--mmk-navy);}
/* ---------------------------------------------------------------------------
* 3. Popups + tooltips — lifted skin target from harborscapes (line 75), re-tokenised
* ------------------------------------------------------------------------- */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
background:var(--mmk-paper);
color:var(--mmk-ink);
border:1px solid var(--mmk-hairline);
box-shadow:0 2px 10px rgba(31,58,102,.20);
}
.leaflet-popup-content-wrapper{border-radius:8px;}
.leaflet-popup-content{font-size:12.5px;line-height:1.45;}
.leaflet-popup-content b{color:var(--mmk-navy);}
.leaflet-popup-content i{color:var(--mmk-muted);}
.leaflet-popup-close-button{color:var(--mmk-muted);}
.leaflet-popup-close-button:hover{color:var(--mmk-crimson);}
.leaflet-tooltip{
background:var(--mmk-paper);color:var(--mmk-ink);
border:1px solid var(--mmk-hairline);box-shadow:0 1px 5px rgba(31,58,102,.18);
font-size:11.5px;border-radius:5px;
}
.leaflet-tooltip-top:before{border-top-color:var(--mmk-hairline);}
.leaflet-tooltip-bottom:before{border-bottom-color:var(--mmk-hairline);}
.leaflet-tooltip-left:before{border-left-color:var(--mmk-hairline);}
.leaflet-tooltip-right:before{border-right-color:var(--mmk-hairline);}
/* lexHighlight chrome (the inline hex tint comes from LEXC in JS; chrome only here) */
.leaflet-popup-content mark,
.mmk-place mark{background:transparent;color:inherit;padding:0 1px;border-radius:2px;}
/* ---------------------------------------------------------------------------
* 4. The kit's base-switcher + overlay-toggle control (.mmk-control)
* ------------------------------------------------------------------------- */
.mmk-control{
background:var(--mmk-paper);
color:var(--mmk-ink);
border:1px solid var(--mmk-hairline);
border-radius:8px;
padding:8px 10px;
font-size:12px;
line-height:1.5;
box-shadow:0 2px 8px rgba(31,58,102,.18);
max-width:200px;
}
.mmk-control .mmk-grp{margin-bottom:6px;}
.mmk-control .mmk-grp:last-child{margin-bottom:0;}
.mmk-control b{
display:block;
font-size:10px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--mmk-muted);
margin-bottom:3px;
font-weight:700;
}
.mmk-control .mmk-row{
display:flex;align-items:center;gap:6px;
padding:2px 0;cursor:pointer;color:var(--mmk-ink);
}
.mmk-control .mmk-row:hover{color:var(--mmk-navy);}
.mmk-control .mmk-row input{accent-color:var(--mmk-crimson);margin:0;}
.mmk-control .mmk-row span{flex:1;}
/* ---------------------------------------------------------------------------
* 5. The generated legend (.mmk-legend) — mirrors harborscapes' #legend panel
* ------------------------------------------------------------------------- */
.mmk-legend{
background:var(--mmk-paper);
color:var(--mmk-ink);
border:1px solid var(--mmk-hairline);
border-radius:8px;
padding:8px 11px;
font-size:11.5px;
line-height:1.5;
box-shadow:0 2px 8px rgba(31,58,102,.18);
max-width:230px;
}
.mmk-legend b{
display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
color:var(--mmk-navy);margin-bottom:5px;font-weight:700;
}
.mmk-legend .row{display:flex;align-items:center;gap:7px;padding:1px 0;}
.mmk-legend .dot{
width:11px;height:11px;border-radius:50%;flex:none;
border:1px solid rgba(0,0,0,.25);
/* background colour is set inline from the JS data-scale constants */
}
.mmk-legend .foot{
margin-top:6px;padding-top:5px;border-top:1px solid var(--mmk-hairline);
font-size:10px;color:var(--mmk-muted);
}
/* ---------------------------------------------------------------------------
* 6. The no-JS place-list fallback (.mmk-placelist from MagaliaMap.placeList)
* ------------------------------------------------------------------------- */
.mmk-placelist{list-style:none;margin:0;padding:0;}
.mmk-placelist .mmk-place{
padding:7px 0;border-bottom:1px solid var(--mmk-hairline);
font-size:13px;color:var(--mmk-ink);
}
.mmk-placelist .mmk-place:last-child{border-bottom:0;}
.mmk-placelist .mmk-name{font-weight:600;color:var(--mmk-navy);}
.mmk-placelist .mmk-locus{font-size:11px;color:var(--mmk-muted);margin-left:6px;}
.mmk-placelist .mmk-gloss{font-size:12px;color:var(--mmk-ink);margin-top:2px;}
.mmk-placelist .mmk-coord{
display:inline-block;margin-top:2px;font-family:var(--font-mono,ui-monospace,monospace);
font-size:10.5px;color:var(--mmk-muted);
}
/* ---------------------------------------------------------------------------
* 7. The tablist / tabpanel contract that show(tabId) wires (role=tab/tabpanel).
* The kit toggles .on + aria-selected + hidden; these rules give the visual state.
* ------------------------------------------------------------------------- */
[role=tab]{cursor:pointer;}
[role=tab][aria-selected=true],
[role=tab].on{color:var(--mmk-crimson);border-bottom-color:var(--mmk-crimson);}
[role=tab]:focus-visible{outline:2px solid var(--mmk-crimson);outline-offset:2px;}
[role=tabpanel][hidden]{display:none;}
/* ---------------------------------------------------------------------------
* 8. Dark-mode nudges. tokens.css already flips --paper/--ink/--pku-* in dark; these
* only soften the borderless-tile seam + shadow so the chrome reads on dark paper.
* ------------------------------------------------------------------------- */
@media (prefers-color-scheme:dark){
:root:not([data-theme=light]) .leaflet-container{background:var(--sub,#1b1f27);}
:root:not([data-theme=light]) .mmk-control,
:root:not([data-theme=light]) .mmk-legend,
:root:not([data-theme=light]) .leaflet-popup-content-wrapper,
:root:not([data-theme=light]) .leaflet-popup-tip,
:root:not([data-theme=light]) .leaflet-tooltip{box-shadow:0 2px 10px rgba(0,0,0,.45);}
:root:not([data-theme=light]) .mmk-legend .dot{border-color:rgba(255,255,255,.25);}
}
/* explicit light override (when a page forces data-theme=light) */
:root[data-theme=light] .leaflet-container{background:var(--sub,#f4f1ea);}