/* Map builder — app styles (from design/mockup-figma-v2.html) */
:root{
--ink:#1e2328; --dim:#6b7480; --faint:#9aa3ad;
--panel:#ffffff; --canvas:#eef0f2;
--line:#e5e8eb; --line-2:#d7dbe0;
--hover:#f4f6f8;
--accent:#2d7ff9; --accent-soft:rgba(45,127,249,.10); --accent-line:rgba(45,127,249,.5);
--r:7px;
--font:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--topH:48px; --railW:60px; --leftW:200px; --rightW:240px;
}
*{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{touch-action:manipulation;font-family:var(--font);color:var(--ink);height:100vh;overflow:hidden;background:var(--canvas);font-size:13px}
button{font:inherit}
.ico{display:block;width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:13px;height:13px}
.ico.md{width:18px;height:18px}
/* js/icons.js ICON_FILL — the two Phosphor fill-style icons (line/freeform)
are solid shapes, not outlines, unlike every other entry in this set. */
.ico.ico-fill{fill:currentColor;stroke:none}
/* ---------- top nav ---------- */
.top{position:fixed;top:0;left:0;right:0;height:var(--topH);background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:4px;padding:0 12px 0 0;z-index:40}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;letter-spacing:-.01em;width:calc(var(--railW) + var(--leftW));height:100%;padding:0 12px;flex:none;color:inherit;text-decoration:none}
.logo img{width:20px;height:20px;border-radius:50%}
.betatag{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--dim);background:var(--hover);border:1px solid var(--line-2);border-radius:999px;padding:1px 6px}
/* .loadedchip/.lm-* kept for the design/ mockups that still reference them —
the live top bar replaced the chip with .doctitle below (2026-07-19,
planning/feature-map-modes.md) */
.loadedchip{display:flex;align-items:center;gap:2px;max-width:220px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:3px 4px 3px 10px;flex:none}
.loadedchip[hidden]{display:none}
.lm-name{font-size:12px;font-weight:600;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lm-x{display:grid;place-items:center;width:18px;height:18px;border:none;background:none;border-radius:50%;color:var(--accent);cursor:pointer;padding:0}
.lm-x:hover{background:var(--accent-soft)}
.lm-x .ico{width:12px;height:12px}
/* Mode 2 — a saved map is open (js/mymaps.js setCurrent): branding shrinks
to the bare icon, centered over the rail column below it (width:--railW +
centering matches .railbtn's own, verified in the reference mockup
design/mapname-option-b2-icon-title.html); wordmark + Beta tag drop with
it and the map's name takes their place as an editable doc title. */
.logo.icononly{width:var(--railW);justify-content:center;padding:0}
.logo.icononly .logotext,.logo.icononly .betatag{display:none}
.logo.icononly img{width:22px;height:22px}
.doctitle{display:flex;align-items:center;height:32px;padding:0 10px 0 8px;border-radius:6px;cursor:text;max-width:320px;flex:none}
.doctitle[hidden]{display:none} /* display:flex would beat the hidden attr */
.doctitle:hover{background:var(--hover)}
.doctitle .dt-name{font-size:11px;font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* mid-edit: the name swaps out for a real input (js/mymaps.js) */
.doctitle.editing:hover{background:none}
.doctitle.editing .dt-name{display:none}
.dt-input{font-size:14px;font-weight:650;color:var(--ink);border:none;outline:none;background:#fff;box-shadow:0 0 0 2px var(--accent);border-radius:5px;padding:2px 6px;width:220px;font-family:inherit}
/* the title's actions menu (Rename / Duplicate / Delete) off a small chevron */
.dt-chev{width:24px;height:24px;border:none;background:none;border-radius:6px;color:var(--dim);cursor:pointer;display:grid;place-items:center;padding:0}
.dt-chev:hover{background:var(--hover);color:var(--ink)}
#doctitle-menu{top:32px}
.vsep{width:1px;height:22px;background:var(--line);margin:0 6px}
.navicon{width:32px;height:32px;border:none;background:none;border-radius:6px;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.navicon:hover{background:var(--hover)}
.navicon.on{background:var(--accent-soft);color:var(--accent)}
.navicon.locked{opacity:.45}
.navicon:disabled{color:var(--line-2);cursor:default}
.navicon:disabled:hover{background:none}
.spacer{flex:1}
/* .savebtn: unused live (Save is a plain .navicon now, next to Help) — kept
only because several design/ mockups still link the real app.css and
reference it (same convention as .loadedchip). */
.savebtn{height:32px;width:96px;border-radius:6px;background:var(--hover);border:1px solid var(--line-2);color:var(--ink);font-size:13px;font-weight:600;cursor:pointer}
.savebtn:hover{background:var(--line-2)}
/* Publish + Download share one width so they read as a paired action, not
two differently-sized buttons — Publish is the lower-emphasis (outlined,
no fill) of the pair, Download stays the one solid/primary action. */
.navbtn.publish{height:32px;width:80px;padding:0;border-radius:6px;background:none;border:1px solid var(--accent-line);color:var(--accent);font-size:13px;font-weight:600;cursor:pointer}
.navbtn.publish:hover{background:var(--accent-soft)}
/* Terrain has no publish option — grayed but still clickable (unlike a real
disabled button) so the click still opens #pubtip explaining why. */
.navbtn.publish.disabled{opacity:.45}
.navbtn.publish.disabled:hover{background:none}
/* Anchored under the top bar itself (js/codeview.js positions it against
.btn-publish/.top) rather than .locktip's usual .maptools-relative
top:42px — same box styling, different anchor. */
#pubtip{top:100%;margin-top:6px}
.navbtn.export{height:32px;width:80px;padding:0;border-radius:6px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.navbtn.export:hover{filter:brightness(1.06)}
.acct{width:32px;height:32px;border-radius:50%;border:none;padding:0;cursor:pointer;background:linear-gradient(135deg,#2d7ff9,#7db4ff);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:640}
.acct.loggedout{width:auto;height:32px;padding:0 14px;border-radius:6px;background:none;border:1px solid var(--accent-line);color:var(--accent);font-size:12.5px;font-weight:600}
.acct.loggedout:hover{background:var(--accent-soft)}
.navdrop{position:relative}
.dropmenu{position:absolute;top:36px;left:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(28,44,60,.16);padding:4px;min-width:150px;z-index:60}
/* flex, not block: an icon+text item (data-icon span + label, e.g.
#doctitle-menu/#mymaps-rowmenu/#overlay-add-menu) needs them on one row,
not stacked — a plain text-only item (e.g. #menu-account/#menu-language)
renders the same either way, so one rule covers every .dropmenu instance
rather than each icon-bearing menu needing its own ID-scoped override. */
.dropmenu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 10px;border:none;background:none;border-radius:5px;cursor:pointer;font-size:12.5px}
/* This author rule's (0,1,1) otherwise beats the UA [hidden]{display:none}
(0,1,0) and silently shows an admin-only item to everyone — same bug
class as .dup-badge's incident (decisions.md, 2026-08-21). */
.dropmenu button[hidden]{display:none}
.dropmenu button:hover{background:var(--hover)}
/* .dropmenu button's reset (0,1,1) otherwise beats .mini-btn (0,1,0) and
silently strips its accent background/color — restore it here. */
.dropmenu button.mini-btn{background:var(--accent);color:#fff;text-align:center}
.dropmenu button.mini-btn:hover{background:var(--accent)}
.dropmenu button.on{color:var(--accent);font-weight:600}
/* Named "align-right" not "right" — a plain .right class collides with the
#inspector panel's .right rule below (same specificity, later in source,
so it silently won: position:fixed + bottom:0 + width:288px stretched any
.dropmenu.right dropdown to the full viewport height). */
.dropmenu.align-right{left:auto;right:0}
.dm-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);padding:8px 6px 4px}
/* account menu */
.acctmenu{width:230px;max-height:75vh;overflow-y:auto;padding:10px}
.acct-form{display:flex;flex-direction:column;gap:8px}
.acct-form input{height:32px;border:1px solid var(--line-2);border-radius:6px;padding:0 10px;font:inherit;font-size:12.5px;outline:none;width:100%}
.acct-form input:focus{border-color:var(--accent-line)}
.acct-row{display:flex;gap:6px}
.acct-row .mini-btn{flex:1}
.mini-btn.ghost{background:none;color:var(--accent);border:1px solid var(--accent-line)}
.acct-google{display:flex;align-items:center;justify-content:center;gap:7px;height:32px;border:1px solid var(--line-2);border-radius:6px;background:none;font-size:12.5px;font-weight:600;cursor:pointer;width:100%}
.acct-google:hover{background:var(--hover)}
.acct-sheet-head{display:none}
.acct-info{padding:2px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-email{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-tier{font-size:11.5px;color:var(--dim);margin-top:2px}
/* One class, not a list of ids. "My orders" was added to this menu without
being added to the id list this rule used to carry, so that one row alone
fell through to .dropmenu button's 10px padding and sat 4px right of every
item above it (Aaron's report). A class cannot be forgotten the same way.
Still out-specifies .dropmenu button (0,2,0 vs 0,1,1), which is what makes
display:block and the 6px padding stick. */
.acctmenu .acct-item{display:block;width:100%;text-align:left;padding:7px 6px;border:none;background:none;border-radius:5px;cursor:pointer;font-size:12.5px}
.acctmenu .acct-item:hover{background:var(--hover)}
.acct-cta{width:100%;margin-bottom:4px}
.acct-hint{padding:0 2px 8px}
.acctmenu .acct-row{margin-bottom:6px}
.acct-legal{border-top:1px solid var(--line);margin-top:6px;padding:8px 4px 2px;font-size:11px;color:var(--faint)}
.acct-legal a{color:var(--dim);text-decoration:none}
.acct-legal a:hover{text-decoration:underline}
/* help/use-cases menu — same dropmenu base as the account menu. A 2-column
card grid of the 8 SEO use-case pages (emoji instead of the Lucide icon
set — cheaper to keep in sync as pages are added/renamed, and reads
warmer for a "solutions" menu than the app's usual line-icon style),
plus "How to use" pinned at the bottom in the same muted, border-top
style .acct-legal already uses for Help/Terms/Privacy in the account
menu (2026-07-23 design review — design/helpmenu-footer-index.html). */
.helpmenu{width:420px;max-height:80vh;overflow-y:auto;padding:10px}
.helpmenu .dm-section-label:first-child{padding-top:4px}
.helpmenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.helpmenu-grid a{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:12px;line-height:1.3;color:inherit;text-decoration:none}
.helpmenu-grid a:hover{background:var(--hover);border-color:var(--line-2)}
.helpmenu-grid a .emoji{font-size:18px;line-height:1}
/* A separate full-bleed line, not a border on the row itself — negative
margin cancels .helpmenu's own 10px padding so the line runs truly edge
to edge, independent of .helpmenu-howto's padding below it (mixing the
two, via a border-top + negative margin on the row itself, was what
broke left-alignment with the grid last time). */
.helpmenu-divider{height:1px;background:var(--line);margin:10px -10px 0}
/* Sibling of .helpmenu-grid, not nested inside it, so it's already full
width and naturally left/right-aligned with the grid above. Equal
padding on every side, color --ink (matches the rest of the app's body
text) instead of --faint, per Aaron's call. */
.helpmenu-howto{padding:12px 12px 12px 17px;border-radius:8px;font-size:11.5px;color:var(--ink);display:flex;align-items:center;gap:6px;text-decoration:none}
.helpmenu-howto:hover{background:var(--hover)}
.helpmenu-howto .ico{width:15px;height:15px}
.helpmenu-howto .emoji{font-size:13px;line-height:1}
/* ---------- notifications (js/notifications.js) ---------- */
/* Positioned against #drop-notif-wrap (.navdrop already position:relative),
not #btn-notif itself — one fewer thing to keep in sync if the icon's own
box model ever changes. */
.notif-dot{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:#e0433b;border:1.5px solid var(--panel);pointer-events:none}
.notifmenu{width:340px;max-height:70vh;overflow-y:auto;padding:6px}
.notif-compose-btn{display:block;width:100%;text-align:left;padding:8px 10px;margin-bottom:2px;border:none;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer}
.notif-compose-btn:hover{background:var(--accent-line)}
.notif-compose-btn[hidden]{display:none}
.notif-list{display:flex;flex-direction:column;gap:1px}
.notif-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:9px 10px;border:none;background:none;border-radius:6px;cursor:pointer;position:relative}
.notif-row:hover{background:var(--hover)}
.notif-row-title{font-size:12.5px;color:var(--ink);padding-left:0;line-height:1.4}
.notif-row.unread .notif-row-title{font-weight:700;padding-left:13px}
.notif-row.unread .notif-row-title::before{content:'';position:absolute;left:10px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.notif-row-time{font-size:10.5px;color:var(--faint)}
.notif-empty{padding:16px 10px;text-align:center;font-size:12px;color:var(--faint)}
.notif-empty[hidden]{display:none}
/* Free-export admin viewer (js/freeexports.js) — same dropmenu/list shell as
the notification bell above, with a thumbnail added per row. */
.freeexpmenu{width:360px;max-height:70vh;overflow-y:auto;padding:6px}
.freeexp-tabs{display:flex;gap:2px;margin:2px 0 6px;padding:0 2px}
.freeexp-tab{flex:1;padding:4px 0;border:none;background:none;border-radius:6px;font-size:11.5px;color:var(--dim);cursor:pointer}
.freeexp-tab:hover{background:var(--hover)}
.freeexp-tab.on{background:var(--hover);color:var(--ink);font-weight:600}
.freeexp-list{display:flex;flex-direction:column;gap:2px}
.freeexp-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:6px;border:none;background:none;border-radius:6px;cursor:pointer}
.freeexp-row:hover{background:var(--hover)}
.freeexp-row.busy{opacity:.55;cursor:progress}
.freeexp-thumb{width:64px;height:32px;object-fit:cover;border-radius:4px;border:1px solid var(--line-2);flex:none;background:var(--canvas)}
/* rows with no preview image show their kind in the thumbnail slot instead */
.freeexp-kind{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--dim)}
.freeexp-kind.k-paid{color:#1a7f37;background:#e9f6ec}
.freeexp-kind.k-published{color:#0b5cad;background:#e8f1fb}
.freeexp-kind.k-poster,.freeexp-kind.k-order{color:#8a4b08;background:#fbf0e2}
.freeexp-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.freeexp-whorow{display:flex;align-items:center;gap:6px;min-width:0}
.freeexp-who{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.freeexp-tier{flex:none;font-size:9.5px;line-height:1;padding:2px 5px;border-radius:8px;color:var(--faint);border:1px solid var(--line-2)}
.freeexp-tier.paid{color:#1a7f37;border-color:#1a7f37;font-weight:600}
.freeexp-sub{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.freeexp-sub.bad{color:#c62828}
/* Detail modal (2026-08-21): "from Aaron" personal-note treatment, not a
generic system-confirm shell — every notification really is Aaron writing
in, so the header says that instead of a plain title bar. */
.notifdlg{width:440px}
.notif-from{display:flex;align-items:center;gap:8px;padding:20px 22px 0}
.notif-avatar{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;display:block}
.notif-from-text{flex:1;min-width:0}
.notif-from-name{font-size:12.5px;font-weight:700;color:var(--ink)}
.notif-from-sub{font-size:11.5px;color:var(--faint)}
.notifdlg .dlg-close{margin-top:-2px}
.notif-detail-title{padding:16px 22px 0;font-size:17px;font-weight:750;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.notifdlg .dlg-body{padding:10px 22px 22px}
.notifdlg .confirmtext{font-size:14px;line-height:1.65;color:var(--dim);white-space:pre-line}
.notifdlg .dlg-foot{border-top:none;padding:0 22px 22px}
.notif-detail-actions .mini-btn.ghost{background:var(--accent-soft);border-color:var(--accent-line)}
.dlg-foot.end{justify-content:flex-end}
.dlg-label{display:block;font-size:11.5px;font-weight:650;color:var(--dim);margin:12px 0 5px}
.dlg-label:first-child{margin-top:0}
.dlg-label-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--faint)}
.dlg-textarea{height:72px;padding:8px 10px;resize:vertical;line-height:1.4}
.notif-compose-btnrow{display:flex;gap:8px;margin-bottom:6px}
.notif-compose-btnrow .dlg-input:first-child{flex:0 0 40%}
/* ---------- Print mode (planning/feature-print-mode.md) ---------- */
/* The whole mode re-themes by overriding the SAME custom properties app.css
already defines on :root, scoped to body.print-mode — every component
keyed off var(--accent) (rail, rows, focus rings, sliders, seg pills)
repaints for free, with no per-component print variants to keep in sync.
#14b898 is Aaron's exact pick (§9.6). */
body.print-mode,body.print-boot{--accent:#14b898;--accent-soft:rgba(20,184,152,.10);--accent-line:rgba(20,184,152,.5)}
/* .acct's signed-in avatar is the one component whose colour is a hardcoded
gradient rather than var(--accent) (.acct.loggedout's border/text already
re-themes for free, same as everything else) — Aaron: "change profile's
background color to green in print mode". :not(.loggedout) so the
signed-out "Log in" pill (background:none, line 86) is untouched. */
body.print-mode .acct:not(.loggedout){background:linear-gradient(135deg,#14b898,#6fe0c8)}
/* Centered Map/Print switch. Deliberately not .seg (a filter pill) — this is
a mode switch, so it gets the segmented-control look instead. */
/* Absolutely centred on .top, not flexed between spacers: the nav's right
side is a different width in each mode (Publish+Download vs Purchase), so
a flexed toggle slid sideways on every switch (Aaron, 2026-08-23). */
.modetoggle{position:absolute;left:50%;transform:translateX(-50%);display:flex;background:var(--hover);border-radius:999px;padding:3px;gap:2px;flex:none;z-index:1}
/* REQUIRED for the pre-launch hide in map.html: [hidden] is display:none at
author level, which loses to the display:flex above. The rail hit exactly
this and shipped all nine tabs at once for a moment. */
.modetoggle[hidden]{display:none}
.modetoggle button{border:none;background:none;padding:6px 18px;border-radius:999px;font:650 12.5px/1 inherit;font-family:inherit;color:var(--dim);cursor:pointer}
.modetoggle button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(20,30,45,.18)}
/* Purchase: same flat-pill geometry as .navbtn.export (Download) so the two
read as the same class of action, in the mode's own accent (§9.7).
Download's exact 80px too (Aaron, 2026-09-07) — it was 164px back when the
label carried the price ("Purchase · $9.99"), which it hasn't since the
price moved into the buy dialog. The .price span that width existed for is
gone with it. #btn-mapedit-done ("Done") wears this class as well. */
.navbtn.purchase{min-width:80px;height:32px;padding:0 14px;white-space:nowrap;flex:none;border-radius:6px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.navbtn.purchase:hover{filter:brightness(1.06)}
.navbtn.purchase[hidden]{display:none}
/* the unframed poster price inside Purchase (js/printbuy.js paintPurchasePrice) */
.navbtn.purchase .pp-price{font-weight:600;opacity:.85}
/* Poster purchase dialog. The two ways to pay are cards rather than a radio
list: this is the moment someone decides to spend money, and one glance
should answer "what do I get and what does it cost". The credits card is
only in the DOM when they have credits (js/printpay.js) — see there for
why a first-time buyer is never shown one. */
.poster-buy{max-width:420px}
.poster-buy-spec{font-size:13px;color:var(--dim);margin-bottom:14px}
.poster-buy-opts{display:flex;flex-direction:column;gap:8px}
.poster-opt{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;
gap:0 10px;align-items:center;text-align:left;width:100%;padding:12px 14px;
border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer}
.poster-opt:hover{border-color:var(--accent-line);background:var(--accent-soft)}
/* Selected, not submitted: Confirm is what spends. The ring has to read as
"this is the one" strongly enough that nobody presses Confirm expecting the
other one. */
.poster-opt.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.poster-opt:disabled{opacity:.55;cursor:default}
.poster-opt-ic{grid-row:1/3;grid-column:1;display:flex;align-items:center;color:var(--accent)}
.poster-opt-ic .ico{width:22px;height:22px}
.poster-opt-price{grid-row:1;grid-column:2;font-size:16px;font-weight:700;color:var(--accent)}
.poster-opt-label{grid-row:1;grid-column:3;font-size:14px;font-weight:600;color:var(--ink)}
.poster-opt-sub{grid-row:2;grid-column:2/4;font-size:12px;color:var(--dim);margin-top:2px}
/* Shown while the Firestore profile is still loading — we can't pick the
right options (Business = included, else cash/credits) until it lands. */
.poster-buy-wait{font-size:13px;color:var(--dim);padding:12px 2px}
.poster-buy-fairuse{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
font-size:11.5px;line-height:1.5;color:var(--dim)}
.poster-buy-fairuse p{margin:0 0 6px}
.poster-buy-fairuse p:last-child{margin-bottom:0}
.poster-buy-fairuse strong{color:var(--ink);font-weight:600}
.poster-buy-fairuse a{color:var(--accent)}
/* ---- the purchase dialog (js/printbuy.js, design/checkout-index.html) ----
ONE modal: preview left, format and its options right, running total in the
footer. It replaced a fork modal plus a four-step wizard on 2026-09-02.
Two columns collapse to one under 700px, where the preview goes first so the
poster is still the first thing you see. */
/* `.dialog{width:430px}` is defined LATER in this file, so a plain .buydlg
rule loses to it on source order at equal specificity — the same trap
#pimport-dialog documents below. ID specificity is the fix. */
#buy-scrim .dialog{width:720px;max-width:94vw}
.buy-body{display:grid;grid-template-columns:250px 1fr}
.buy-preview{background:var(--canvas);border-right:1px solid var(--line-2);
padding:20px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.buy-sheet{border-radius:2px;box-shadow:0 6px 20px rgba(15,25,40,.18);transition:padding .15s,background .15s}
.buy-sheet.framed{box-shadow:0 8px 24px rgba(15,25,40,.28)}
/* a canvas has depth and no frame: a solid offset edge reads as the stretcher bars */
.buy-sheet.buy-canvas{box-shadow:5px 6px 0 -1px #d6cfbd,8px 12px 22px rgba(15,25,40,.26)}
.buy-poster{position:relative;background:var(--panel);overflow:hidden}
.buy-poster img{display:block;width:100%;height:100%;object-fit:cover}
.buy-posterwait{position:absolute;inset:0;background:
linear-gradient(100deg,var(--line-2) 30%,var(--line) 50%,var(--line-2) 70%);
background-size:220% 100%;animation:buyshim 1.1s linear infinite}
@keyframes buyshim{to{background-position:-220% 0}}
/* Where the cut can land. There is no bleed in the print file, so this is a
real warning rather than decoration. */
.buy-trim{position:absolute;border:1px dashed rgba(255,255,255,.8);
outline:1px dashed rgba(0,0,0,.28);pointer-events:none}
.buy-pvmeta{margin-top:12px;font-size:11.5px;color:var(--dim);text-align:center;line-height:1.5}
.buy-pvmeta b{color:var(--ink)}
.buy-opts{padding:16px 18px;min-width:0}
/* format switch: one row instead of two cards, so size and frame never scroll */
.buy-seg{display:flex;background:var(--hover,#f1f3f5);border-radius:9px;padding:3px;margin-bottom:14px}
.buy-seg button{flex:1;border:0;background:none;border-radius:7px;padding:8px 6px;font:inherit;
font-size:12.5px;font-weight:600;color:var(--dim);cursor:pointer;min-width:0}
.buy-seg button.sel{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(15,25,40,.14)}
.buy-seg button:disabled{opacity:.5;cursor:default}
.buy-seg button small{display:block;font-size:10.5px;font-weight:500;color:var(--faint);margin-top:1px}
.buy-seg button.sel small{color:var(--accent)}
.buy-lab{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--faint);margin:14px 0 7px}
.buy-lab:first-child{margin-top:0}
.buy-note{font-size:11px;color:var(--dim);line-height:1.5;margin-top:7px}
/* pay routes. The amount sits on its own line above the label: a sub-line like
"Unlimited poster downloads, plus 20 export credits a month" leaves no room
to put a price opposite it. */
.buy-pays{display:flex;flex-direction:column;gap:7px}
.buy-pay{width:100%;text-align:left;border:1px solid var(--line);border-radius:9px;
padding:9px 11px;background:var(--panel);cursor:pointer;display:block}
.buy-pay:hover{border-color:var(--accent-line)}
.buy-pay.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.buy-pay .amt{display:block;font-size:15px;font-weight:700;color:var(--accent);line-height:1.15}
.buy-pay .l{display:block;font-size:12.5px;font-weight:600;margin-top:2px;color:var(--ink)}
.buy-pay .s{display:block;font-size:10.5px;color:var(--dim);margin-top:1px;line-height:1.4}
/* frame chips, photographed corners (img/frame-*.png). "No frame" is the first
chip rather than a separate framed-or-not toggle. */
.buy-frames{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.buy-fr{border:1px solid var(--line);border-radius:8px;padding:6px 3px 5px;background:var(--panel);
cursor:pointer;text-align:center}
.buy-fr:hover{border-color:var(--accent-line)}
.buy-fr.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.buy-fr img{width:32px;height:32px;border-radius:5px;display:block;margin:0 auto 4px;object-fit:cover}
.buy-fr .none{width:32px;height:32px;border-radius:5px;margin:0 auto 4px;border:1px dashed var(--line-2);
display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:9px}
.buy-fr span{font-size:10px;color:var(--dim);display:block;line-height:1.2}
.buy-fr.sel span{color:var(--ink);font-weight:600}
.buy-facts{list-style:none;font-size:11px;color:var(--dim);line-height:1.75;
margin-top:12px}
.buy-facts li::before{content:"\2713";color:var(--accent);font-weight:700;margin-right:6px}
.buy-facts li.link::before{content:none}
.buy-facts li.link{margin-top:5px}
.buy-facts a{color:var(--accent)}
.buy-fairuse{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);
font-size:11px;line-height:1.5;color:var(--dim)}
.buy-fairuse p{margin:0 0 5px}
.buy-fairuse p:last-child{margin-bottom:0}
.buy-fairuse strong{color:var(--ink);font-weight:600}
.buy-fairuse a{color:var(--accent)}
.buy-total{font-size:12px;color:var(--dim);align-self:center}
.buy-total b{font-size:19px;color:var(--accent);margin-right:6px}
.buy-ship{font-size:11.5px}
#buy-scrim .dlg-foot{justify-content:space-between}
.buy-foot-left{position:relative;display:flex;align-items:center;gap:6px}
/* Map-data credit button now lives in the dialog head, just left of the close
button; the popover hangs down from it, right-aligned so it stays on-dialog. */
.buy-attrib-wrap{position:relative;display:inline-flex}
.buy-attrib-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:none;color:var(--faint);cursor:pointer}
.buy-attrib-btn:hover{background:var(--hover);color:var(--dim)}
.buy-attrib-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:5;width:250px;padding:9px 11px;font-size:11px;line-height:1.5;color:var(--dim);background:var(--panel);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.16)}
@media (max-width:700px){
.buy-body{grid-template-columns:1fr}
.buy-preview{border-right:0;border-bottom:1px solid var(--line-2);padding:16px}
.buy-frames{grid-template-columns:repeat(5,1fr)}
}
/* the order confirmation's summary table (js/printbuy.js showOrder) */
.printbuy-summary{border:1px solid var(--line-2);border-radius:8px;overflow:hidden;margin:10px 0}
.printbuy-row{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;font-size:12.5px;
color:var(--dim);border-bottom:1px solid var(--line-2)}
.printbuy-row:last-child{border-bottom:0}
.printbuy-row span:last-child{color:var(--ink);text-align:right}
.printbuy-plain{font-size:12.5px;line-height:1.55;color:var(--dim);margin:0 0 8px}
.printbuy-plain strong{color:var(--ink)}
.printbuy-plain.ok{color:var(--dim)}
/* ---- My orders (js/orders.js) ---- */
#orders-scrim .dialog{width:520px;max-width:94vw}
.orderslist{max-height:52vh;overflow:auto;margin-top:4px}
#printorder-scrim .dlg-foot{justify-content:space-between}
/* order cards, shared by the dialog above */
.ordercard{border:1px solid var(--line-2);border-radius:8px;padding:11px 12px;margin-bottom:8px;
background:var(--panel)}
.ordercard .orow{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ordercard .onum{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--ink)}
.ordercard .ostatus{font-size:11px;color:var(--dim);text-align:right}
.ordercard .ostatus.good{color:var(--accent)}
.ordercard .ostatus.bad,.ordercard .ometa.bad{color:#c0392b}
.ordercard .ostatus.off{color:var(--faint)}
.ordercard .odesc{font-size:13px;color:var(--ink);margin-top:4px}
.ordercard .ometa{font-size:11.5px;color:var(--faint);margin-top:2px}
.ordercard .oacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.ordercard .oacts .mini-btn{font-size:11.5px;padding:4px 9px}
@media (max-width:640px){
.printbuy-kinds, }
/* Map-mode chrome that has no business on a poster: the place-search /
measure / detail toolbar, the dev setup note, and MapLibre's own scale
control (which would otherwise be composited INTO the printed artwork,
since the live map is mounted inside the poster). Hidden by CSS rather
than by JS so there's no show/hide bookkeeping to get wrong on mode
switches. The support banner deliberately stays — it's monetization
chrome, not map chrome, and it sits outside the poster. */
body.print-mode .cornerbar,
body.print-mode #setup-note,
body.print-mode .maplibregl-ctrl-bottom-left{display:none}
/* Print keeps the place SEARCH (Aaron, 2026-08-24 — "quickly search a place
and move the map there" while framing a poster) but none of the rest of the
map toolbar: measure, level-of-detail and basemap are map-editing tools, and
the poster's own panel owns detail. */
body.print-mode .maptools > *:not(#searchbox){display:none}
/* Expanded by default (Aaron, 2026-09-27: it used to open only on hover and
collapse the instant the pointer left, easy to miss it was even there) —
js/search.js only adds .collapsed once the user is done: picked a result,
or explicitly closed it (clear button / Escape / click elsewhere). While
.collapsed IS on, hover/focus/.has-text still reopen it, same as before. */
/* gap:8px from .maptools-panel would push the icon off-centre while the
(zero-width) input and the clear button are still flex siblings, so the
collapsed state zeroes it. */
body.print-mode #searchbox{width:260px;padding:0 4px 0 8px;gap:8px;justify-content:flex-start;overflow:visible;
transition:width .16s ease;cursor:text}
body.print-mode #searchbox.collapsed{width:34px;padding:0;gap:0;justify-content:center;overflow:hidden}
body.print-mode #searchbox .search-ic{display:flex;flex:none}
/* the clear button is a flex sibling too — it must not take space while
collapsed, or the icon sits left of centre */
body.print-mode #searchbox.collapsed:not(:hover):not(:focus-within):not(.has-text) .search-clear{display:none}
/* The close button only ever shows empty (js/search.js already hides it via
[hidden] the moment there's a query), and only once the bar is actually
expanded enough to hold a second control — same exclusion the clear
button's own rule just above uses for the idle-collapsed icon. */
body.print-mode #searchbox:not(.collapsed) .search-collapse:not([hidden]),
body.print-mode #searchbox.collapsed:hover .search-collapse:not([hidden]),
body.print-mode #searchbox.collapsed:focus-within .search-collapse:not([hidden]){display:grid}
/* flex:none is the load-bearing part. The base rule is `flex:1`, i.e.
flex-basis:0 + flex-grow:1, and for a flex item the resolved basis beats
`width` — so the input kept absorbing all the free space (measured 21px of
a 34px box) and shoved the icon to 6.5px instead of the 17px centre. */
body.print-mode #searchbox.collapsed #search-input{flex:none;min-width:0;width:0;padding:0;opacity:0;transition:opacity .12s ease}
body.print-mode #searchbox.collapsed:hover,
body.print-mode #searchbox.collapsed:focus-within,
body.print-mode #searchbox.collapsed.has-text{width:260px;padding:0 4px 0 8px;gap:8px;justify-content:flex-start}
body.print-mode #searchbox.collapsed:hover #search-input,
body.print-mode #searchbox.collapsed:focus-within #search-input,
body.print-mode #searchbox.collapsed.has-text #search-input{width:auto;flex:1 1 auto;opacity:1}
/* the results list must not be clipped by the collapsed box's overflow */
body.print-mode #searchbox.collapsed:hover,
body.print-mode #searchbox.collapsed:focus-within,
body.print-mode #searchbox.collapsed.has-text{overflow:visible}
/* The close button's "actually collapse it" override (js/search.js). A tap
on the button — a DESCENDANT of #searchbox — can leave the browser
insisting #searchbox itself still matches :hover with no pointer to move
away and clear it, and that pseudo-class doesn't just widen the box, it
also reopens #search-input and re-shows a button — so overriding width
alone left the inside still laid out for the wide state, squeezed into a
34px box. !important on every property those stuck states touch is what
actually wins regardless of which one the browser insists still matches. */
body.print-mode #searchbox.force-collapsed{width:34px!important;padding:0!important;gap:0!important;justify-content:center!important;overflow:hidden!important;flex:none!important}
body.print-mode #searchbox.force-collapsed #search-input{width:0!important;flex:none!important;opacity:0!important}
body.print-mode #searchbox.force-collapsed .search-collapse,
body.print-mode #searchbox.force-collapsed .search-clear{display:none!important}
/* Focus mode (Adjust Map View / Edit Map Crop) — deliberately the same
collapse as body.export-mode: rail, panels and every nav item except the
logo and the active step's bar. Kept as its own class rather than reusing
export-mode so the two can't interfere if the export flow is ever opened
from Print. */
body.print-focus .rail,
body.print-focus .left,
body.print-focus .right{display:none}
body.print-focus .canvas{left:0;right:0}
body.print-focus .top > *:not(.logo):not(.exportnav){display:none}
/* Dims the stage — the paper, the panels' former space, everything but the
map being edited, which sits above this. Same read as the export flow's
own #export-box shadow, and the nav is outside .canvas so it stays lit. */
/* A CHILD of #poster (map.html), not a stage-level sibling of it, so it
compares against .postergroup (z-index 16) within #poster's own local
stacking order — that holds even once the canvas zoom/pan puts a
`transform` on #poster (js/printdesign.js applyZoom), which otherwise
turns #poster into its own stacking context and strands a sibling's
z-index inside it, unable to out-rank .postergroup at all (Aaron: "we
should not dim the map itself"). The huge negative inset reaches back out
past #poster's own box to cover the stage around it too — #poster is
overflow:visible, so it isn't clipped there. */
.posterdim{position:absolute;inset:-100vmax;background:rgba(20,30,45,.45);z-index:14;display:none;pointer-events:none}
body.print-focus .posterdim{display:block}
/* !important: applyStacking() (js/printdesign.js) sets an INLINE z-index on
this same element for paint order among poster elements (map included,
often 10 — below the dim's 14), and an inline style otherwise always
beats a stylesheet rule regardless of this rule's own specificity. Without
it the map silently went back to being dimmed (Aaron: "we should not dim
the map itself" — round two, 2026-08-26). */
body.print-focus .postergroup{z-index:16!important}
body.print-focus .supportbanner,
body.print-focus .cornerbar{display:none}
/* Add-element toolbar — same component as .overlaybar (the Overlay tab's
own docked toolbar); only the contents differ. */
.designbar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:1px;
background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;
box-shadow:0 8px 24px rgba(28,44,60,.18);z-index:26}
.designbar[hidden]{display:none} /* display:flex above would beat the hidden attr */
.designbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:54px;height:50px;
border:none;background:none;border-radius:8px;color:var(--dim);cursor:pointer;font-size:9.5px;font-family:inherit;line-height:1}
.designbar button:hover{background:var(--hover);color:var(--ink)}
body.print-focus .designbar{display:none} /* focus modes own the canvas */
/* ---- screen-anchored poster elements (js/printdesign.js) ---- */
.pel{position:absolute;z-index:12;cursor:move}
.pel.sel{outline:1.5px dashed var(--accent);outline-offset:0}
/* A polyline's box is derived from its points, so outlining it draws a
rectangle the user never made. Its own nodes are the selection cue. */
.pel-t-line.sel{outline:none}
.pel .resizehandle,.pel .sidehandle,.pel .rothandle{display:none}
/* Selected items' handles are drawn by an .hproxy above every element
(js/printdesign.js syncHandleProxies); the real ones stay in place, hidden,
and receive the replayed presses. */
.hproxy{position:absolute;z-index:1000;pointer-events:none}
.hproxy > *{pointer-events:auto}
.pel.sel .resizehandle,.pel.sel .sidehandle,.pel.sel .rothandle{display:block}
/* Long rounded bars centred on each edge — drag one and only that axis
changes. Same idea as the corner discs: they read as a different kind of
grip, so it's obvious which one scales proportionally and which doesn't. */
.sidehandle{position:absolute;background:var(--panel);border:2px solid var(--accent);border-radius:999px;z-index:6}
.sidehandle[data-side=n],.sidehandle[data-side=s]{left:50%;width:22px;height:8px;margin-left:-11px;cursor:ns-resize}
.sidehandle[data-side=e],.sidehandle[data-side=w]{top:50%;width:8px;height:22px;margin-top:-11px;cursor:ew-resize}
/* -8px = the outline's own 4px offset, plus half the bar's 8px thickness,
so the bar is centred on the dashed line rather than tangent to it. */
/* -4.75px = -(0.75 + 8/2): same line, for an 8px-thick bar. */
.sidehandle[data-side=n]{top:-4.75px}
.sidehandle[data-side=s]{bottom:-4.75px}
.sidehandle[data-side=e]{right:-4.75px}
.sidehandle[data-side=w]{left:-4.75px}
/* Rotate sits above the top edge, same place js/overlay.js puts an overlay
element's own rotate grip. */
.rothandle{position:absolute;left:50%;top:-26px;margin-left:-9px;width:18px;height:18px;
color:var(--accent);cursor:grab;display:grid;place-items:center;z-index:5} /* under the edge/corner handles (6/7) so its grab area never steals theirs */
.rothandle:active{cursor:grabbing}
.rothandle .ico{width:16px;height:16px;stroke-width:2.2}
/* A photo crops like the map element: the image always fills its box, so a
side drag re-frames rather than squashing. Shapes mirror the map's own. */
/* The crop clips this inner layer, NOT .pel-t-photo itself: clipping the
wrapper also clipped its handles, so a photo appeared to have none and its
side bars were sliced in half. */
.pel-cropwrap{position:absolute;inset:0;overflow:hidden}
.pel-cropwrap.crop-circle{border-radius:50%}
.pel-cropwrap.crop-rounded{border-radius:14px}
/* Sibling of .pel-cropwrap, not inside it — the crop's own overflow/border-
radius would cut a shape-tracing stroke in half at the edge. */
.pel-photo-stroke{position:absolute;inset:0;pointer-events:none}
/* non-circle/rounded shapes get their clip-path inline (js/maskshapes.js
clipPathFor(), set in js/printdesign.js), not a CSS rule per shape here */
.pel-text{display:flex;align-items:center;line-height:1.25;white-space:pre-wrap;word-break:break-word;overflow:hidden}
/* wrapper type classes are .pel-t-* so they can't collide with the content
classes above — a wrapper called .pel-text used to inherit the text div's
own flex/typography rules */
.pel-t-icon,.pel-t-photo,.pel-t-shape{line-height:0}
.pel-shape{width:100%;height:100%}
.pel-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px}
.pel-photo-empty{width:100%;height:100%;display:grid;place-items:center;border:1.5px dashed var(--line-2);
border-radius:6px;color:var(--faint);background:var(--hover);text-align:center;padding:6px}
/* icon, not the old "Add a photo in the panel" text - too small to read at
most Photo element sizes and no room at all at small ones (Aaron, 2026-09-28) */
.pel-photo-empty .ico{width:28%;height:28%;min-width:16px;min-height:16px;max-width:48px;max-height:48px}
/* a line's own box is its bounding box; the rule is centred inside it so the
corner handles land where the element visually is */
.pel-t-line{pointer-events:none} /* the SVG stroke itself is the hit target */
.pel-line{width:100%;height:100%;overflow:visible;display:block}
.pel-line polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke}
.pel-line polyline.hit{stroke:transparent;stroke-width:18;pointer-events:stroke}
.pel-node{position:absolute;width:9px;height:9px;margin:-5px 0 0 -5px;border-radius:50%;
background:var(--panel);border:2px solid var(--accent);z-index:7;pointer-events:auto;cursor:move}
/* while a polyline is being drawn the whole poster is the drawing surface */
body.print-drawing .poster{cursor:crosshair}
/* Everything on the paper is inert while a polyline is being drawn — the
map group included. Without it, clicking a point over the map started a
map drag and stole the selection mid-draw. */
body.print-drawing .pel,
body.print-drawing .postergroup{pointer-events:none}
.pel-icon svg{width:100%;height:100%;display:block}
/* icon picker inside the inspector — same grid the overlay marker picker uses */
.pelicons{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;max-height:180px;overflow-y:auto;
border:1px solid var(--line-2);border-radius:7px;padding:6px;margin-bottom:9px}
.pelicons button{aspect-ratio:1;border:1px solid transparent;border-radius:6px;background:none;cursor:pointer;
color:var(--dim);display:grid;place-items:center;padding:3px}
.pelicons button:hover{border-color:var(--accent-line);color:var(--accent)}
.pelicons button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.pelicons svg{width:100%;height:100%;fill:currentColor}
/* Drag-select marquee (js/printdesign.js) — same dashed accent box the
export flow draws for its area selection. */
.pelmarquee{position:absolute;border:1px dashed var(--accent);background:var(--accent-soft);z-index:19;pointer-events:none}
/* a marquee may start outside the paper, so the poster mustn't clip it */
.poster{overflow:visible}
.pelmarquee[hidden]{display:none}
/* "Clip content" toggle (js/printdesign.js): when on, the poster's CONTENT
(#postercontent: the Map element and every element) clips to the paper
edge so it previews exactly as it prints. The selection handles, guides
and marquee sit outside that layer in #poster, so they're never cut off
at the edge (Aaron, 2026-09-30: "the handles are cut off when the clip
content is on"); clipping #poster itself used to take them with it.
Suspended in focus modes (the dim needs to reach past the paper) and
while drawing a polyline (which may run off the edge). */
.postercontent{position:absolute;inset:0;border-radius:inherit}
body.print-clip .postercontent{overflow:hidden}
body.print-focus.print-clip .postercontent,
body.print-drawing.print-clip .postercontent{overflow:visible}
.posterclip{position:absolute;top:14px;right:14px;z-index:13;display:flex;align-items:center;gap:6px;
padding:7px 11px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel);
color:var(--dim);font-size:12px;font-weight:600;cursor:pointer}
.posterclip:hover{background:var(--hover);color:var(--ink)}
.posterclip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.posterclip .ico{width:15px;height:15px}
.posterclip[hidden]{display:none}
body.print-focus .posterclip{display:none}
/* Text is edited in place on the poster rather than through a field in the
panel, so the element itself is the input. */
.pel-text[contenteditable=true]{outline:none;cursor:text}
/* An element dragged entirely off the paper stays editable but won't be in
the download, so it reads as set aside rather than deleted. */
.pel.offpaper{opacity:.45}
.pel.offpaper::after{content:'';position:absolute;inset:0;border:1px dashed var(--faint);pointer-events:none}
.offpaper-tag{font-style:normal;font-size:10px;color:var(--faint);margin-left:4px}
/* A design card with no usable thumbnail still needs a picture-shaped block,
so the list doesn't jump between rows that have one and rows that don't. */
.sd-blank{display:block;width:100%;aspect-ratio:4/5;background:var(--hover)}
/* Print check: what the map will look like as ink at this size. Three
states, coloured like the app's other status surfaces. */
.printcheck{margin-top:12px;padding:9px 10px;border-radius:7px;border:1px solid var(--line-2);background:var(--hover)}
.printcheck.warn{border-color:#e5a50a;background:rgba(229,165,10,.08)}
.printcheck.error{border-color:#e5a50a;background:rgba(229,165,10,.12)}
.pc-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-bottom:3px}
.printcheck.warn .pc-head{color:#a06a00}
.printcheck.error .pc-head{color:#a06a00}
.pc-stat{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.pc-issue{font-size:11.5px;line-height:1.45;margin-top:6px;color:var(--ink)}
/* Font picker: a search field over a scrolling list, each row previewing in
its own face. Same shape as the icon picker above. */
.fontpickwrap{position:relative;flex:1;min-width:0}
.fontpick{position:absolute;left:0;right:0;top:34px;max-height:220px;overflow-y:auto;z-index:30;
background:var(--panel);border:1px solid var(--line-2);border-radius:7px;padding:4px;
box-shadow:0 8px 24px rgba(28,44,60,.18)}
.fontpick[hidden]{display:none}
.fontrow{display:block;width:100%;text-align:left;border:none;background:none;border-radius:5px;
padding:6px 8px;font-size:14px;cursor:pointer;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fontrow:hover{background:var(--hover)}
.fontrow.on{background:var(--accent-soft);color:var(--accent)}
/* Rubber-band preview while drawing a polyline. overflow:visible so a
segment heading off the paper still draws. */
.drawrubber{position:absolute;inset:0;overflow:visible;z-index:21;pointer-events:none}
.drawrubber[hidden]{display:none}
.drawrubber line{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 4}
.drawrubber circle{fill:var(--panel);stroke:var(--accent);stroke-width:2}
/* Centre guides. Magenta rather than the theme accent on purpose: the
accent is already the selection colour here, and an alignment cue has to
read as a different kind of thing from the box it's aligning. */
.posterguide{position:absolute;background:#e5399b;z-index:20;pointer-events:none}
.posterguide[hidden]{display:none}
.posterguide.vert{top:0;bottom:0;width:1px}
.posterguide.horz{left:0;right:0;height:1px}
/* Reorder feedback in the Customize list, reusing the Overlay list's own
.dragging/.drop-before/.drop-after rules above. */
#design-list .ovrow{cursor:grab}
#design-list .ovrow.dragging{cursor:grabbing}
/* Pan mode: the surface itself is the drag target, so it takes the cursor
and nothing underneath may claim the press. */
body.print-pan .posterstage,
body.print-pan .poster,
body.print-pan .pel{cursor:grab !important}
body.print-pan .posterstage:active,
body.print-pan .poster:active{cursor:grabbing !important}
body.print-pan .pel,
body.print-pan .postergroup{pointer-events:none}
.designbar button.on{background:var(--accent-soft);color:var(--accent)}
/* .obsep is defined for .overlaybar only, so the divider needs its own rule
here to actually separate Move/Pan from the add tools. */
.designbar .obsep{width:1px;height:30px;background:var(--line);margin:0 3px;flex:none}
/* ---- the poster stage (js/printdesign.js) ---- */
/* overflow:hidden, not auto: panning/zooming is done entirely by the
transform on #poster (js/printdesign.js applyZoom), never by scrolling —
overflow:auto let the browser grow real scrollbars once the zoomed poster
exceeded the stage, and scrolling that container shifted where the
absolutely-positioned .designbar (bottom:16px of THIS box) painted, so the
toolbar visibly jumped while panning (Aaron). Content past the stage edge
is meant to be clipped, not scrolled to. */
.posterstage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--poster-pad,40px);z-index:12}
.posterstage[hidden]{display:none} /* display:flex above would beat the hidden attr */
/* Opening straight into Print: a loading cover over everything below the top
bar (and the Map-mode buttons in it) until js/printmode.js bootFromUrl()
actually enters Print, instead of showing the Map editor first */
.print-boot-cover{display:none}
body.print-boot .print-boot-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:fixed;
top:var(--topH);left:0;right:0;bottom:0;z-index:146;background:var(--canvas);color:var(--dim);font-size:13px}
body.print-boot .print-boot-cover .spin{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:tpl-spin .8s linear infinite}
body.print-boot .top > *:not(.logo){visibility:hidden}
/* A new poster waiting on its first template (js/printtemplates.js
setWaiting): a loading state instead of the blank default sheet */
body.print-mode.tpl-loading #poster{visibility:hidden}
body.print-mode.tpl-loading .posterstage::before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-34px 0 0 -14px;
border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:tpl-spin .8s linear infinite}
body.print-mode.tpl-loading .posterstage::after{content:"Loading template…";position:absolute;left:0;right:0;top:50%;margin-top:8px;
text-align:center;font-size:13px;color:var(--dim)}
@keyframes tpl-spin{to{transform:rotate(360deg)}}
/* Templates gallery placeholders until the first snapshot arrives */
.presetcard.tpl-skel{cursor:default;pointer-events:none}
.tpl-skel-img{display:block;aspect-ratio:4/5;background:var(--hover);animation:tpl-pulse 1.2s ease-in-out infinite}
.tpl-skel-line{display:block;width:60%;height:10px;border-radius:5px;background:var(--hover);animation:tpl-pulse 1.2s ease-in-out infinite}
/* a real card whose thumbnail is still on its way (js/printtemplates.js thumbEl) */
.presetcard .tpl-thumb-wait{aspect-ratio:4/5;background:var(--hover);animation:tpl-pulse 1.2s ease-in-out infinite}
.tpl-retry{grid-column:1/-1;width:100%;height:40px}
@keyframes tpl-pulse{50%{opacity:.5}}
.poster{position:relative;background:#fff;border-radius:4px;box-shadow:0 14px 44px rgba(20,30,45,.24);flex:none;user-select:none}
/* The Map element. Its box is set in px by JS so drag math stays plain
arithmetic in the poster's own coordinate space. */
.postergroup{position:absolute}
/* 0 offset, matching .pel.sel — the handle offsets below are computed against one
outline distance, and the map having its own 6px is what left its handles
sitting ~2.75px inside the dashed line (Aaron, 2026-08-25). */
.postergroup.sel .maskwin,
.postergroup.mode-mask .maskwin{outline:1.5px dashed var(--accent);outline-offset:0}
.postergroup.mode-group{cursor:move}
/* The mask window itself. Defaults to a plain box (§9.3); #map is relocated
in here and fills it via its own inset:0. */
.maskwin{position:absolute;overflow:hidden;border-radius:2px}
/* Traces the crop shape (js/printdesign.js renderMapStroke). Positioned onto
the map box by the same code that positions .maskwin; overflow visible so a
stroke straddling the edge shows both halves. */
.maskstroke{position:absolute;overflow:visible;pointer-events:none}
.maskwin.mask-circle{border-radius:50%}
.maskwin.mask-rounded{border-radius:14px}
/* non-circle/rounded shapes get their clip-path inline (js/printdesign.js
render(), via js/maskshapes.js clipPathFor()), not a CSS rule per shape */
.postergroup.mode-mask .maskwin{cursor:move;outline:2px solid var(--accent)}
.postergroup.mode-pan .maskwin{cursor:grab}
.postergroup.mode-pan .maskwin:active{cursor:grabbing}
.draglayer{position:absolute;inset:0;z-index:5}
.postergroup.mode-pan .draglayer{pointer-events:none} /* pan hands the map back its own drag */
/* Selection handles, deliberately matching what js/overlay.js draws on the
map for every other element rather than inventing a second visual
language for the poster: a white disc with a 2px accent ring (its
circle-radius 5.5 / circle-stroke-width 2 spec, in CSS px), four of them,
one per corner, sitting just outside the dashed box. */
.resizehandle{position:absolute;width:11px;height:11px;background:var(--panel);border:2px solid var(--accent);
border-radius:50%;z-index:7;display:none} /* 7: corners win over the side bars (6) where they meet on a small element */
/* -6.25px = -(0.75 + 11/2): centres an 11px disc on the dashed line. */
.resizehandle[data-corner=nw]{left:-6.25px;top:-6.25px;cursor:nwse-resize}
.resizehandle[data-corner=ne]{right:-6.25px;top:-6.25px;cursor:nesw-resize}
.resizehandle[data-corner=se]{right:-6.25px;bottom:-6.25px;cursor:nwse-resize}
.resizehandle[data-corner=sw]{left:-6.25px;bottom:-6.25px;cursor:nesw-resize}
/* Shown whenever the element is selected OR being cropped — same handles,
different job (js/printdesign.js branches on the mode). Hidden in Adjust
Map View, where the drag belongs to the map camera, not the box. */
.postergroup .sidehandle{display:none}
.postergroup.sel.mode-group .resizehandle,
.postergroup.sel.mode-group .sidehandle,
.postergroup.mode-mask .resizehandle{display:block}
/* circle/heart/star force a 1:1 crop (forcedAspect) — a side handle only
scales one axis, which either no-ops or fights the lock, so it's dropped
for these shapes rather than shown and ignored (Aaron). Wins over the
.sel.mode-group rule above via source order + equal specificity. */
.postergroup.no-sidehandles .sidehandle{display:none}
/* 5: label and control share one line, exactly like the Overlay inspector
(Aaron, 2026-08-24 — reversing the stacked layout from 08-23). Inherits the
base .prop flex row; only the label COLUMN is widened, because Print's
labels ("Alignment", "Content", "Detail level") don't fit the 44px gutter
Overlay's short ones do. */
.printinsp .prop .plabel{width:74px;flex:none}
.printinsp .prop .colorfield,
.printinsp .prop .proptext,
.printinsp .prop .fontpickwrap{flex:1;width:auto;min-width:0}
/* .proptext is flex:1, but .fontpickwrap is position:relative and NOT a flex
container, so the input fell back to an 's intrinsic size and spilled
past the panel once the label moved beside it. */
.printinsp .prop .fontpickwrap .proptext{width:100%}
.printinsp .prop .rangefield{flex:1;min-width:0}
.printinsp .ovtogglegroup{display:flex;gap:6px;flex:1;min-width:0}
/* .prop-stack (js/printdesign.js photoFitRow's "Photo fill"): label on its
own line, input full width below — same label-above/input-below shape
.settingsbody's own .prop rows already use elsewhere, just scoped to one
row instead of a whole panel, for a value too long to share the label's
line comfortably even after the overflow fix (min-width:0 + ellipsis on
.prop select.dlg-input) left it readable but cramped. */
.printinsp .prop.prop-stack{display:block}
.printinsp .prop.prop-stack .plabel{display:block;width:auto;margin-bottom:5px}
.printinsp .prop.prop-stack select.dlg-input{width:100%;flex:none}
/* 6: the map's Render sliders keep a label/value row — three sliders read
better aligned than stacked — with fixed columns so the numbers line up. */
#pd-render .prop{display:flex;align-items:center;margin-bottom:9px}
#pd-render .prop .plabel{display:block;width:60px;flex:none;margin-bottom:0}
#pd-render .prop .rangefield{flex:1;min-width:0}
#pd-render .prop .rv{width:30px;flex:none;text-align:right}
/* Map element inspector (right panel). Padding and inter-field rhythm copied
from the Overlay inspector (.prop's 9px) so the two panels feel like one
component rather than two that nearly match. */
.printinsp{padding:12px 12px 16px}
/* Section labels double as dividers, so the panel reads as grouped
properties rather than one long column (Aaron, 2026-08-23). The first one
gets no rule or top gap — that space above the title was dead. */
.printinsp .fieldlabel{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between}
.printinsp > .fieldlabel:first-child{margin-top:0;padding-top:0;border-top:none}
.fieldlabel .cnt{font-weight:600;letter-spacing:0;text-transform:none;color:var(--faint)}
.printinsp .hint{margin-top:12px}
/* the inspector head carries the title alone here (no crumb), so its top
padding is the crumb's old space — take it back */
body.print-mode .insp-head{padding-top:10px}
body.print-mode #insp-crumb{display:none}
/* Holds .msp-open (thumb/name/chevron) — opens the saved-map picker
(js/printstyle.js #mapstyle-scrim). The picker itself now carries a
pinned "Default map" card for reverting (2026-08-27), so this row no
longer has a second "x" remove control beside it. */
.mapstylepreview{display:flex;align-items:center;gap:6px;width:100%;padding:8px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel)}
.msp-open{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:none;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.msp-open:hover{color:var(--accent)}
.mapstylepreview:has(.msp-open:hover){border-color:var(--accent-line);background:var(--hover)}
.msp-thumb{width:40px;height:40px;border-radius:6px;flex:none;background:var(--hover);object-fit:cover;display:block;overflow:hidden}
/* The picture handed over is markup built for the MODAL CARD (.msthumb,
width:100%), so dropped into this 40px slot it painted at full panel width
and covered everything under it (Aaron, 2026-08-25). Constrain whatever
lands here rather than making the caller pre-size it for one consumer. */
.msp-thumb > *{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:auto}
.msp-text{flex:1;min-width:0}
.msp-name{display:block;font-size:12.5px;font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msp-sub{display:block;font-size:10.5px;color:var(--faint)}
.msp-chev{color:var(--faint);flex:none;display:flex}
/* The map object's two actions, one row (2026-08-27 — replaces two stacked
.inspbtn full-width buttons). Sits right under .mapstylepreview so the
source row + these two read as one grouped "Map" object, no container. */
.actrow{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
/* A lone action (js/printdesign.js movePhotoRow's "Move photo") — same row
spacing as the two-button .actrow, one column instead of two. */
.actrow.single{grid-template-columns:1fr}
.actbtn{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;border:1px solid var(--line-2);border-radius:7px;background:var(--panel);color:var(--ink);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.actbtn:hover{background:var(--hover);border-color:var(--dim)}
.actbtn span[data-icon]{color:var(--dim)}
.actbtn.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.actbtn.on span[data-icon]{color:var(--accent)}
.actbtn:disabled{opacity:.5;cursor:default}
/* Style: an inline, browsable swatch grid (2026-08-27 — replaces a row that
opened a separate modal, js/printpreset.js). Capped so Render/Crop/Stroke
below stay reachable without scrolling the whole panel; internal scroll
for the rest. 3 columns × the mock's own cap (design/
printmapstyle-option-a-compact.html, built against this same real
css/app.css panel width, so the value carries over unchanged). */
.stygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.stygrid.capped{max-height:174px;overflow-y:auto;padding:2px;margin:2px -2px 0}
.stysw{position:relative;aspect-ratio:1;border:1.5px solid var(--line-2);border-radius:7px;overflow:hidden;cursor:pointer;padding:0;background:var(--hover)}
.stysw .pp-map{width:100%;height:100%;object-fit:cover;display:block}
.stysw .nm{position:absolute;left:0;right:0;bottom:0;z-index:1;background:rgba(255,255,255,.92);font:650 9px/1.1 var(--font);color:#1e2328;padding:3px 4px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stysw .ck{position:absolute;top:3px;right:3px;z-index:2;width:15px;height:15px;border-radius:50%;background:var(--accent);color:#fff;display:none;place-items:center}
.stysw .ck svg,.stysw .ck span{width:10px;height:10px;display:block}
.stysw.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.stysw.on .ck{display:grid}
.maskpicker{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.maskbtn{width:40px;height:40px;border-radius:8px;border:1.5px solid var(--line-2);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--dim)}
.maskbtn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.maskbtn .swatch{width:18px;height:18px;background:currentColor}
.maskbtn .swatch.mask-circle{border-radius:50%}
.maskbtn .swatch.mask-rounded{border-radius:5px}
/* non-circle/rounded shapes get their clip-path inline (js/printdesign.js
maskBtn(), via js/maskshapes.js clipPathFor()), not a CSS rule per shape */
/* Map style modal (js/printstyle.js). Reuses .dialog.wide + .codetabs, the
same two-tab shell the Publish dialog already uses. */
.mapstyledlg{max-height:82vh;display:flex;flex-direction:column}
.dlg-head-actions{display:flex;align-items:center;gap:8px}
.msdlg-body{overflow-y:auto;padding:16px;flex:1;min-height:0}
.msgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.msgrid[hidden]{display:none} /* display:grid above would beat the hidden attr */
.mscard{position:relative;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel)}
.mscard.sel{border-color:var(--accent)}
.mscard .msthumb{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--hover)}
.mscard .msthumb svg{width:100%;height:100%;display:block}
.mscard .msname{display:block;padding:7px 9px;font-size:12px;font-weight:600;border-top:1px solid var(--line);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The per-card action only appears on hover/focus, so the grid reads as a
gallery at rest instead of a wall of buttons (§9.4). */
.msactions{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(20,30,45,.42);opacity:0;transition:opacity .12s}
.mscard:hover .msactions,.mscard:focus-within .msactions{opacity:1}
/* Delete, same reveal-on-hover as .msactions but its own small corner button
(Aaron: this was missing from the picker entirely — "hidden" in the sense
of never shown, not clipped) so it reads as a distinct destructive action
rather than competing with "Use this map" for one click target. Painted
after .msactions in the DOM, so it sits above that overlay with no
z-index needed. */
.msdelete{position:absolute;top:6px;right:6px;width:26px;height:26px;border:none;border-radius:6px;
background:rgba(20,30,45,.6);color:#fff;display:flex;align-items:center;justify-content:center;
cursor:pointer;opacity:0;transition:opacity .12s}
.mscard:hover .msdelete,.mscard:focus-within .msdelete{opacity:1}
.msdelete:hover:not(:disabled){background:#d33}
.msdelete:disabled{cursor:default;opacity:.3}
.msdelete .ico{width:14px;height:14px}
/* Print Settings tab: a direct form, same shape as the Import tab — no list,
nothing to select, just fields. */
/* Two row layouts, and which one a panel uses depends on whether it FITS
(Aaron, 2026-08-24): the right-hand property panels are one line
(label | control, see .printinsp), but the Layout tab stacks, because its
labels and its inputs are both long enough that one line squeezes the
control to nothing. */
.settingsbody{padding:12px 12px 16px}
.settingsbody .prop{display:block;margin-bottom:9px}
.settingsbody .prop .plabel{display:block;width:auto;margin-bottom:5px}
.settingsbody .prop .proptext,
.settingsbody .prop select.dlg-input{width:100%;flex:none}
.settingsbody .colorfield{width:100%}
.settingsbody .ovtogglegroup{display:flex;gap:6px}
.segrow{display:flex;gap:6px}
.swatchrow{display:flex;gap:6px}
.colorswatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line-2);cursor:pointer}
.colorswatch.on{box-shadow:0 0 0 2px var(--accent)}
/* ---------- icon rail ---------- */
.rail{position:fixed;top:var(--topH);left:0;bottom:0;width:var(--railW);background:var(--panel);border-right:1px solid var(--line);z-index:36;display:flex;flex-direction:column;padding:8px 0}
.railbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:60px;border:none;background:none;color:var(--dim);cursor:pointer}
/* The rail carries both modes' tabs and js/printmode.js toggles the `hidden`
attribute on them — which display:flex above would otherwise beat, showing
all nine at once. Same trap as .overlaybar/.ovpz-urlrow elsewhere here. */
.railbtn[hidden]{display:none}
.railbtn:hover{background:var(--hover)}
.railbtn .lbl{font-size:10.5px;letter-spacing:.01em}
.railbtn.active{background:var(--accent-soft);color:var(--accent)}
.railbtn.active .lbl{font-weight:640}
/* ---------- left secondary panel ---------- */
.left{position:fixed;top:var(--topH);left:var(--railW);bottom:0;width:var(--leftW);background:var(--panel);border-right:1px solid var(--line);z-index:35;overflow:hidden}
/* Preset panel "expand" — widens over the canvas (already higher z-index)
and switches the list to a grid so more cards are visible at once; the
right inspector is already hidden while on the Preset tab, so nothing
else needs to move out of the way. */
body.preset-expanded .left{width:calc(100vw - var(--railW))}
body.preset-expanded .presetlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-auto-rows:min-content;gap:14px;align-content:start;align-items:start}
body.preset-expanded .presetcard{width:auto}
/* My maps / My designs "expand" (js/mymaps.js, js/printsaved.js) — same
widen-over-the-canvas-and-grid treatment as the Preset panel's own expand
above, just keyed off a separate body class per panel since either can be
open without the other. */
body.mymaps-expanded .left,body.design-expanded .left{width:calc(100vw - var(--railW))}
body.mymaps-expanded #mymap-list,body.design-expanded #saveddesign-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-auto-rows:min-content;gap:14px;align-content:start;align-items:start}
body.mymaps-expanded #mymap-list .presetcard,body.design-expanded #saveddesign-list .presetcard,
body.mymaps-expanded #mymap-list .foldercard,body.design-expanded #saveddesign-list .foldercard{width:auto}
/* Print mode's My designs/Templates tabs (unlike the Preset tab above) run
with the right inspector still visible, and .right shares .left's own
z-index:35 — with equal z-index the later element in the DOM (.right)
paints on top, so the expanded panel would run UNDER the inspector rather
than over it. Bump only these two expanded states above .right's 35. */
body.design-expanded .left{z-index:40}
/* Print mode's Templates tab "expand" (js/printtemplates.js) — same treatment
again; #template-list already shares the Preset panel's .presetlist/
.presetcard classes, so this is just the Preset block's selectors keyed off
its own body class. */
body.template-expanded .left{width:calc(100vw - var(--railW));z-index:40}
body.template-expanded .presetlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-auto-rows:min-content;gap:14px;align-content:start;align-items:start}
body.template-expanded .presetcard{width:auto}
.panelbody{height:100%;display:flex;flex-direction:column}
.panelbody[hidden]{display:none}
.lhead{display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 12px;border-bottom:1px solid var(--line);flex:none}
.lhead .ttl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
/* Row up a panel header's action buttons horizontally. Without this, a
.headbtn's own display:flex (for centering its icon) blockifies the
button — so with more than one visible here, .lhead-actions being a plain
block div stacked them as separate lines instead of side by side. Every
panel had at most one visible headbtn until My maps/My designs picked up
Select + Expand alongside "+" (2026-09-13), which is what surfaced it; the
@media (max-width:760px) block below already set this for mobile, so this
just extends the same layout to desktop. */
.lhead-actions{display:flex;align-items:center;gap:4px}
/* layers tree */
.tree{flex:1;overflow-y:auto;padding:6px}
.tree.disabled{opacity:.45;pointer-events:none}
.row{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:6px;cursor:pointer;position:relative}
.row:hover{background:var(--hover)}
.row:hover .eye{color:var(--ink)}
.row.sel{background:var(--accent-soft)}
.row.sel .nm{font-weight:600}
.row .chev{width:14px;height:14px;display:grid;place-items:center;color:var(--faint);flex:none}
.row .chev.leaf{visibility:hidden}
.row .sw{width:14px;height:14px;border-radius:4px;flex:none;box-shadow:inset 0 0 0 1px rgba(20,30,45,.18)}
.row .sw.cat{background:none;box-shadow:none;display:grid;place-items:center;color:var(--dim)}
.row .nm{flex:1;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .eye{color:var(--dim);display:grid;place-items:center;width:20px;height:20px;border:none;background:none;cursor:pointer}
.row.off .nm{color:var(--faint)}
.row.off .eye{color:var(--faint)}
.indent{width:16px;flex:none}
/* basemap type (Map / Satellite / Terrain) */
.basemaptypes{display:flex;gap:6px;padding:8px;flex:none}
.basemapcard{flex:1;padding:8px 4px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:none;text-align:center;font-size:12px;font-weight:600;color:var(--dim)}
.basemapcard:hover{background:var(--hover)}
.basemapcard.sel{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
/* presets — preview tiles; tap applies */
.presetimport{display:flex;flex-direction:column;gap:6px}
.presetimport textarea{border:1px solid var(--line-2);border-radius:6px;padding:7px 9px;font:inherit;font-size:11.5px;outline:none;resize:vertical;min-height:44px;font-family:ui-monospace,Consolas,monospace}
.presetimport textarea:focus{border-color:var(--accent-line)}
.presetlist{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
.presetlist.disabled{opacity:.45;pointer-events:none}
/* Shared "this tab is disabled on Satellite/Terrain" banner (Preset + Style
tabs) — sits at the top of the panel, above the (dimmed) list/tree, so it
reads as an explanation rather than a caption underneath. */
.disablednote{margin:10px 12px;padding:10px 12px;background:var(--hover);border:1px solid var(--line-2);border-radius:8px;font-size:11.5px;color:var(--dim);line-height:1.45}
/* flex-shrink:0 is the fix here — .presetlist already scrolls
(overflow-y:auto), but a flex column's items still shrink to fit by
default even so, so without this the cards themselves got squeezed
(image + name row clipped) instead of the list just scrolling past them */
.presetcard{position:relative;display:flex;flex-direction:column;flex-shrink:0;width:100%;padding:0;border-radius:9px;cursor:pointer;border:1.5px solid var(--line);background:var(--panel);text-align:left;overflow:hidden}
.presetcard:hover{border-color:var(--accent-line)}
.presetcard.sel{border-color:var(--accent)}
/* Template drag-to-reorder (admin, js/printtemplates.js wireCardDrag). Inset
shadows, not ::before/::after bars like .ovrow's: .presetcard clips its
overflow, so a bar on the edge would be cut off. drop-x = the expanded grid,
where cards sit side by side and the gap is left/right. */
.presetcard.dragging{opacity:.4}
.presetcard.drop-before{box-shadow:inset 0 3px 0 var(--accent)}
.presetcard.drop-after{box-shadow:inset 0 -3px 0 var(--accent)}
.presetcard.drop-x.drop-before{box-shadow:inset 3px 0 0 var(--accent)}
.presetcard.drop-x.drop-after{box-shadow:inset -3px 0 0 var(--accent)}
.presetcard .pp-map{width:100%;display:block;flex:none}
.presetcard .prow{display:flex;align-items:center;gap:6px;padding:6px 9px;border-top:1px solid var(--line);flex:none}
.presetcard .pname{font-size:12px;font-weight:600;line-height:1.3;flex:1;word-break:break-word}
.presetcard .check{color:var(--accent);opacity:0;display:grid;place-items:center}
.presetcard.sel .check{opacity:1}
/* 3-dot row menu — one shared #mymaps-rowmenu (below), not a per-card dropdown */
.presetcard .pmore{color:var(--faint);flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:5px}
.presetcard .pmore:hover{color:var(--ink);background:var(--hover)}
/* .dropmenu is normally position:absolute inside a .navdrop{position:relative}
(see #doctitle-drop) — this one is shared across every scrolling row in
.mymaplist, so it's positioned in fixed viewport coordinates instead
(js/mymaps.js openRowMenu()), same reasoning as the CSV importer's .mp-menu. */
#mymaps-rowmenu{position:fixed}
#design-rowmenu{position:fixed}
/* Every folder dropdown is fixed for the same reason the row menus are: the
list under them scrolls and would clip an absolutely-positioned menu. */
#mymaps-addmenu,#design-addmenu,#folder-rowmenu,#folder-movemenu{position:fixed}
#folder-movemenu{max-height:280px;overflow-y:auto;max-width:240px}
#folder-movemenu button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Folder row (js/folders.js cardHtml). Deliberately NOT a .presetcard — those
are big thumbnail tiles, and a stack of identical folder tiles would bury
the maps underneath them. A slim labelled row reads as a different kind of
thing at a glance, and folders sort above the cards. */
.foldercard{display:flex;align-items:center;gap:8px;width:100%;flex-shrink:0;padding:9px 10px;
border:1.5px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer;text-align:left}
.foldercard:hover{border-color:var(--accent-line);background:var(--hover)}
.foldercard .fc-ic{color:var(--accent);display:grid;place-items:center;flex:none}
.foldercard .fc-name{font-size:12.5px;font-weight:600;flex:1;word-break:break-word}
.foldercard .fc-count{font-size:11px;color:var(--dim);flex:none;font-variant-numeric:tabular-nums}
.foldercard .fc-more{color:var(--faint);flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:5px}
.foldercard .fc-more:hover{color:var(--ink);background:var(--hover)}
/* Panel title + its back chevron, grouped so .lhead's space-between still
pushes .lhead-actions hard right. */
.lhead-main{display:flex;align-items:center;gap:2px;min-width:0}
.lhead-main .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lhead .crumb-back{flex:none;margin-left:-6px}
.lhead .crumb-back[hidden]{display:none}
#tpl-rowmenu{position:fixed}
/* Saved designs use the same card as saved maps, and the same LANDSCAPE
thumbnail box (Aaron, 2026-08-24) — a poster is usually portrait, and
letting the picture set the card's height made each one enormous and put
two designs on a screen. The poster is centred in the box at its own aspect
with grey either side, which also reads as "this one is portrait". */
#saveddesign-list .presetcard .pp-map{aspect-ratio:16/10;height:auto;object-fit:contain;background:var(--canvas)}
#saveddesign-list .presetcard .pp-map.sd-blank{display:block}
/* admin preset publishing block */
.admin-preset{flex:none;border-top:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:6px}
.admin-preset[hidden]{display:none} /* display:flex would beat the hidden attr */
/* import */
.importbody{padding:14px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1}
.fieldlabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin-bottom:6px}
.pasterow{display:flex;gap:6px}
.pasterow input{flex:1;height:32px;border:1px solid var(--line-2);border-radius:6px;padding:0 10px;font:inherit;font-size:12.5px;outline:none;min-width:0}
.mini-btn{height:32px;padding:0 12px;border-radius:6px;border:none;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer}
.mini-btn:disabled{background:var(--line-2);cursor:default}
/* An (e.g. #maplimit-upgrade) gets none of a