/* SPDX-License-Identifier: AGPL-3.0-only */ :root{ --ink:#101E16; --paper:#EFE6D4; --paper-deep:#E2D5BC; --spruce:#1C3A2A; --spruce-lift:#2C5440; --trail:#FF5A1F; --clay:#B5532E; --glacier:#8FB6A8; --ochre:#C8923A; --serif:"Bricolage Grotesque",system-ui,sans-serif; --sans:"Spline Sans",system-ui,sans-serif; --mono:"Spline Sans Mono",monospace; /* Category glyphs are emoji (tent, droplet, train, camera…), and the three served families are LATIN SUBSETS with no emoji coverage at all — so any element that inherits --sans draws them as tofu boxes. Every surface that renders a layer.icon must use this stack. Kept in sync with the canvas equivalent in assets/map/icons.js (mintMini), which mints the same glyphs for the tile layers; emoji-font-stack.test.cjs asserts the two agree. */ --emoji:"Apple Color Emoji","Noto Color Emoji","Segoe UI Emoji","Noto Sans Symbols2",system-ui,sans-serif; /* ---------- CHROME THEME TOKENS (map-and-search.md §4.6) ---------- The rail, drawer, legend and panels around the map canvas read these, never the brand literals above, so html[data-map-theme="light"] can flip the whole chrome in one place. Channel triplets (--chrome-fg, --chrome-glass, --chrome-glass-deep, --paper-glass) exist for the alpha variants: rgb(var(--chrome-fg) / .5) replaces rgb(var(--chrome-fg) / .5). Dark is the default and matches the pre-theme look exactly. */ --chrome-bg:#101E16; /* solid chrome ground (= --ink) */ --chrome-fg:239 230 212; /* chrome text channels (= --paper) */ --chrome-fg-solid:#EFE6D4; /* full-strength chrome text */ --chrome-glass:20 22 14; /* translucent panel ground */ --chrome-glass-deep:20 33 24; /* search-results well */ --paper-glass:239 230 212; /* .map-top: cream in BOTH themes */ --mark-ink:20 22 14; /* pin outline on the canvas (icons.js): ink in BOTH themes */ --chrome-head:#8FB6A8; /* mono section headings (= --glacier) */ --chrome-lift:#2C5440; /* raised/active surface (= --spruce-lift) */ --chrome-well:#1C3A2A; /* inset card ground (= --spruce) */ --chrome-field:#1B1E15; /* opaque native form controls */ --chrome-mut:#9a9d8c; /* struck-through / muted diff text */ --chrome-red:#F97066; /* readable reject-red on the chrome */ --chrome-amber:#E8A33D; /* caution text (assumptions, warnings) */ --chrome-warm:#F0B45E; --chrome-warm-hi:#F7C87E; /* "shut today" outline pair */ --chrome-rose:#E88A7D; --chrome-rose-hi:#F2A79B; /* "not there anymore" pair */ --chrome-green:#7fcf9a; --chrome-green-hi:#A6E3BC; /* done/fresh confirmations */ --chrome-orange-soft:#FF8A52; /* curated tag on the drawer */ --chrome-link:#7FC9E0; /* city link on the drawer */ } /* The light twin. Same brand, inverted ground: paper carries the chrome, ink carries the text, trail orange stays the accent. Every pale-on-dark accent gains a deep-on-cream partner; nothing else in the file knows the theme. */ html[data-map-theme="light"]{ --chrome-bg:#EFE6D4; --chrome-fg:16 30 22; --chrome-fg-solid:#101E16; --chrome-glass:239 230 212; --chrome-glass-deep:233 222 199; --chrome-head:#33584A; --chrome-lift:#CBDCCE; --chrome-well:#E2D5BC; --chrome-field:#FBF4E4; --chrome-mut:#67695B; --chrome-red:#B4231A; --chrome-amber:#7F4F0F; --chrome-warm:#8F5A12; --chrome-warm-hi:#6E4409; --chrome-rose:#A63A28; --chrome-rose-hi:#8C2F1F; --chrome-green:#1E7A46; --chrome-green-hi:#166B3B; --chrome-orange-soft:#C2410C; --chrome-link:#176A88; } *{margin:0;padding:0;box-sizing:border-box} html{height:100%;overflow:hidden} /* never let the page itself scroll (drawer/dock translate off-screen → would otherwise create scroll, shoving the overlay off the top) */ body{font-family:var(--sans);color:var(--ink);height:100svh;overflow:hidden;display:flex;flex-direction:column} /* Rail, drawer and map sit side by side and the drawer animates its own width, so this is a flex row rather than the old fixed 340px grid. */ .app{display:flex;flex:1;min-height:0} .mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em} a{color:inherit;text-decoration:none} /* The nav wordmark hardcodes the cream letterforms (brand/logo-nav.svg), so on the light chrome it vanished into the paper. logo-nav-light.svg is the same art with ink letters; content:url() swaps the replaced image without touching the markup, and asset-mapper rewrites the relative URL the same way it does for the font files in fonts.css. */ html[data-map-theme="light"] .brand img{content:url("../brand/logo-nav-light-zwEq4PB.svg")} /* ---------- ICON RAIL + DRAWER (map-and-search.md §4) ---------- 48px of icons, one per rider section, and a 320px drawer that shows one section at a time. Every colour reads a --chrome-* token, so both themes work by construction (§4.6). */ .irail{width:48px;flex:none;background:var(--chrome-bg);border-right:1px solid var(--chrome-lift); display:flex;flex-direction:column;align-items:center;padding:.45rem 0;z-index:1200;gap:.15rem} .irail .mark{width:30px;height:30px;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;flex:none} .ib{position:relative;width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center; background:none;border:none;border-radius:8px;color:rgb(var(--chrome-fg) / .68);cursor:pointer;transition:color .15s,background .15s} .ib:hover{color:var(--chrome-fg-solid);background:rgb(var(--chrome-fg) / .08)} .ib:focus-visible{outline:2px solid var(--trail);outline-offset:-2px} .ib.on{color:var(--trail)} /* The notch on the rail edge: the active section, readable at a glance even for a rider who cannot separate the orange glyph from its neighbours. */ .ib.on::before{content:"";position:absolute;left:-4px;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--trail)} .ib svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .irail .spring{flex:1} .irail hr{width:26px;flex:none;border:none;border-top:1px solid rgb(var(--chrome-fg) / .16);margin:.35rem 0} /* Tooltip: mono uppercase, right of the button, instant. Constant colours on purpose - it floats over the map, not over the chrome. */ .ib[data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%); background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase; padding:.3rem .55rem;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:1400} .ib[data-tip]:hover::after,.ib[data-tip]:focus-visible::after{opacity:1} /* Filter dot: the rail's half of "why is data missing?" (the on-map pill is the other half). shell.js adds .filtered when a chip filter narrows. */ .ib .fdot{display:none;position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%; background:var(--trail);border:1.5px solid var(--chrome-bg)} .ib.filtered .fdot{display:block} /* Site nav + language + account: one flyout, opening RIGHT of the rail and anchored to its bottom, because the button sits at the bottom of a 48px column. `.nav-open` is the same class initRailChrome() already toggles. */ .irail-menu{position:relative;flex:none} .irail-menu .rail-nav{position:absolute;left:calc(100% + .5rem);bottom:0;z-index:1502;margin:0; flex-direction:column;align-items:stretch;gap:0;min-width:13.5rem;max-width:86vw;padding:.4rem .2rem; background:var(--chrome-bg);border:1px solid var(--chrome-lift);border-radius:10px; box-shadow:0 14px 34px -16px rgba(0,0,0,.7);opacity:0;transform:translateX(-6px);pointer-events:none; transition:opacity .18s ease,transform .18s ease} .irail-menu.nav-open .rail-nav{opacity:1;transform:none;pointer-events:auto} .irail-menu .rail-nav a{font-size:.78rem;letter-spacing:.04em;text-transform:none;padding:.6rem .8rem;border-radius:6px;color:rgb(var(--chrome-fg) / .9)} .irail-menu .rail-nav a.on,.irail-menu .rail-nav a:hover{background:var(--chrome-lift);color:var(--chrome-fg-solid)} .irail-menu .lang-menu{margin:.25rem .5rem} /* The language panel hangs off a chip inside a bottom-anchored flyout, so it opens upward rather than down. */ .irail-menu .acct-dropdown{left:0;right:auto;bottom:calc(100% + .35rem);top:auto;max-height:70svh;overflow-y:auto} /* The account avatar: its own rail slot, name and caret hidden, so the chip collapses to the circle the bulb is anchored to. Its menu opens right of the rail and bottom-anchored, like the ≡ flyout above it. */ .irail-acct{position:relative;flex:none;display:flex;align-items:center;justify-content:center; width:40px;height:40px;margin-top:.1rem} .irail-acct .acct-menu{position:static} .irail-acct .acct-chip{padding:0;border:none;gap:0} .irail-acct .acct-chip:hover .av,.irail-acct .acct-chip[aria-expanded=true] .av{box-shadow:0 0 0 2px var(--chrome-bg),0 0 0 4px var(--trail)} .irail-acct .acct-chip .av{width:28px;height:28px;font-size:.76rem} .irail-acct .acct-name,.irail-acct .acct-caret{display:none} .irail-acct .acct-bulb{top:-2px;left:16px} .irail-acct .acct-dropdown{left:calc(100% + .6rem);right:auto;top:auto;bottom:0;min-width:230px; max-height:min(70svh,32rem);overflow-y:auto;z-index:1502} /* The scope kicker moved into the search panel with the heading it belongs to. */ .dwr-body .co{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:rgb(var(--chrome-fg) / .68);margin-top:.6rem;text-transform:uppercase} .dwr{width:0;flex:none;background:var(--chrome-bg);color:var(--chrome-fg-solid);overflow:hidden; transition:width .18s ease;z-index:1100;display:flex;flex-direction:column;border-right:1px solid var(--chrome-lift)} .dwr.open{width:320px} /* The inner column keeps its full width while the outer box animates to 0, so the content slides out of view instead of reflowing on every frame. */ .dwr-in{width:320px;flex:1;display:flex;flex-direction:column;min-height:0} .dwr-head{flex:none;display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem .8rem;border-bottom:1px solid rgb(var(--chrome-fg) / .14)} .dwr-head h2{font-family:var(--serif);font-weight:600;font-size:1.15rem;flex:1} .dwr-x{background:none;border:none;color:rgb(var(--chrome-fg) / .7);font-size:1.05rem;line-height:1;cursor:pointer;padding:.25rem .35rem;border-radius:5px} .dwr-x:hover{color:var(--trail)} .dwr-x:focus-visible{outline:2px solid var(--trail)} .dwr-body{flex:1;overflow-y:auto;padding:.2rem 1.1rem 1.6rem;scrollbar-width:thin;scrollbar-color:rgb(var(--chrome-fg) / .55) transparent} .dwr-body::-webkit-scrollbar{width:9px} .dwr-body::-webkit-scrollbar-track{background:rgb(var(--chrome-fg) / .06)} .dwr-body::-webkit-scrollbar-thumb{background:rgb(var(--chrome-fg) / .55);border-radius:5px;border:2px solid transparent;background-clip:padding-box} .panel{display:none} .panel.on{display:block} .dwr-foot{flex:none;padding:.7rem 1.1rem;border-top:1px solid rgb(var(--chrome-fg) / .14); display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem} /* The places count reads as a headline number wherever it sits. */ .panel .res{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:rgb(var(--chrome-fg) / .7)} .panel .res b{color:var(--trail);font-size:1.15rem} /* Zebra bands (owner 2026-08-20): each group is a full-bleed band, every second one on a whisper of fg tint, with a hairline between consecutive groups - so a long panel reads as stacked blocks, not one grey column. The negative margin bleeds the band to the drawer edges; the padding puts the text gutter back. */ .panel .grp{margin:0 -1.1rem;padding:1rem 1.1rem 1.15rem} .panel .grp:nth-of-type(even){background:rgb(var(--chrome-fg) / .05)} .panel .grp + .grp{border-top:1px solid rgb(var(--chrome-fg) / .14)} /* Sub-header inside a group. Quieter than the group's own mono heading, because it names one facet of the thing the heading already named. */ .fh{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:rgb(var(--chrome-fg) / .72); text-transform:uppercase;font-weight:400;margin:.95rem 0 .45rem} .fh:first-of-type{margin-top:.8rem} .fsub[hidden]{display:none} .fsub:first-of-type .fh{margin-top:.8rem} .fh-note{color:var(--chrome-amber);letter-spacing:.08em} /* Overlay rows read as layer rows, because that is what they are. The dim state is the absence of .on (panels.js toggles only that), the mirror of .layer.off above. */ .ov-row{width:100%;background:none;border:none;color:inherit;font:inherit;text-align:left} .ov-row:not(.on) .sw,.ov-row:not(.on) .nm{opacity:.45} /* On, but nothing on screen yet: the state column says why, in the accent so it reads as a prompt rather than as a count. */ .ov-row .ct.ct-wait{color:var(--trail)} .ov-row:focus-visible{outline:2px solid var(--trail);outline-offset:2px;border-radius:5px} /* ---------- ACCOUNT + LANGUAGE CHIPS ---------- The 340px filter rail that used to hold these retired with the icon-rail shell (map-and-search.md §4); the chips themselves moved to the rail's bottom cluster and are styled here. Every rule that was only ever about the old rail - its wrapper, head, scroll body, foot, burger, brand row, phone re-skin and the top-right corner panel - is gone rather than left dark in the file, and a test pins that it stays gone. */ /* logged-in account chip + dropdown (partials/_account_chip.html.twig) — copied from atlas.css since this page is standalone and doesn't load it (Task 7: map page gains the account chip). Keep in sync with the atlas.css ".acct-*" block if that changes. The rail is already dark like atlas.css's --ink topnav, so the chip's default (dark-nav) styling applies as-is — no page-specific overrides needed. */ .acct-menu{position:relative;flex:none} .acct-chip{display:inline-flex;align-items:center;gap:.5rem;background:none;border:1.5px solid rgb(var(--chrome-fg) / .4);border-radius:999px;padding:.26rem .7rem .26rem .28rem;color:var(--chrome-fg-solid);cursor:pointer;font-family:var(--sans);font-size:.9rem;line-height:1;transition:border-color .2s} .acct-chip:hover,.acct-chip[aria-expanded=true]{border-color:var(--trail)} .acct-chip .av{width:30px;height:30px;border-radius:50%;background:var(--trail);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:.82rem;flex:none} .acct-bulb{position:absolute;top:-4px;left:22px;z-index:2;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--trail);color:var(--ink);border:2px solid var(--chrome-bg);font-family:var(--mono);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:none} .acct-chip .acct-name{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acct-chip .acct-caret{opacity:.65;transition:transform .18s} .acct-chip[aria-expanded=true] .acct-caret{transform:rotate(180deg)} .acct-dropdown{position:absolute;top:calc(100% + .55rem);right:0;min-width:200px;background:var(--paper);border:1px solid rgba(16,30,22,.12);border-radius:8px;box-shadow:0 14px 36px -12px rgba(0,0,0,.5);padding:.4rem;z-index:600} .acct-dropdown[hidden]{display:none} .acct-dropdown a,.acct-dropdown button{display:block;width:100%;box-sizing:border-box;text-align:left;background:none;border:0;font-family:var(--sans);font-size:.9rem;color:var(--ink)!important;opacity:1!important;padding:.55rem .7rem;border-radius:5px;cursor:pointer;text-decoration:none;white-space:nowrap} .acct-dropdown a:hover,.acct-dropdown button:hover{background:rgba(16,30,22,.06)} .acct-sec{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#8a8674;padding:.5rem .7rem .25rem;pointer-events:none} .acct-sec:first-child{padding-top:.25rem} /* The unread pill beside "Messages". map.css carries its own copy of the shared account chip's rules, and this one was missing, so on /map alone the count rendered as bare text welded to the label: "Messages5" (owner-reported 2026-08-14). Kept identical to atlas.css. */ .acct-dropdown .acct-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.2rem;height:1.2rem; margin-left:.45rem;padding:0 .35rem;border-radius:999px;background:var(--trail);color:var(--ink); font-family:var(--mono);font-size:.72rem;font-weight:700;line-height:1;vertical-align:middle} .acct-dropdown a.acct-sep{margin-top:.25rem;border-top:1px solid rgba(16,30,22,.1);padding-top:.6rem} .acct-dropdown form{margin:.25rem 0 0;padding-top:.25rem;border-top:1px solid rgba(16,30,22,.1)} .acct-dropdown form button{color:var(--clay)!important} /* Language switcher (shared partials/_lang_menu.html.twig) — same pill/dropdown pattern as the account chip; dropdown reuses .acct-dropdown above. Sits at the foot of the icon rail. */ .lang-menu{position:relative;flex:none} .lang-chip{display:inline-flex;align-items:center;gap:.32rem;background:none;border:1.5px solid rgb(var(--chrome-fg) / .4);border-radius:999px;padding:.3rem .55rem;color:var(--chrome-fg-solid);cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;line-height:1;transition:border-color .2s} .lang-chip:hover,.lang-chip[aria-expanded=true]{border-color:var(--trail)} .lang-chip svg{opacity:.7;flex:none} .lang-chip[aria-expanded=true] .lang-caret{transform:rotate(180deg)} /* The nav links' mono/uppercase styling must not leak into the dropdown (a menu of plain links, not rail chrome). */ .irail-menu .acct-dropdown a,.irail-acct .acct-dropdown a,.irail-acct .acct-dropdown button{font-family:var(--sans);font-size:.85rem;text-transform:none;letter-spacing:normal} .rail-nav{display:flex} .rail-nav a{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--chrome-fg) / .72);transition:color .2s} .grp{margin-bottom:1.7rem} .grp h3{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;color:var(--chrome-head);margin-bottom:.8rem;text-transform:uppercase} /* Empty-scope invite (moderation-and-contribution.md §10.1): same quiet single-line rail typography as .hint below, but a real link — underlined, brightens to --trail on hover like the other rail links. */ .rail-invite{margin-bottom:1.7rem;font-size:.78rem;line-height:1.5} .rail-invite a{color:rgb(var(--chrome-fg) / .75);text-decoration:underline;text-underline-offset:2px;transition:color .2s} .rail-invite a:hover{color:var(--trail)} .grp h3.dl-head{display:flex;align-items:center;gap:.6rem} .search-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.8rem} .search-head h3{margin-bottom:0;flex:1;min-width:0} .search-reach{flex:0 1 auto;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .6rem;font-size:.66rem;background:transparent;color:rgb(var(--chrome-fg) / .85);border:1px solid rgb(var(--chrome-fg) / .4)} .search-reach:hover{border-color:var(--trail);color:var(--trail)} .search-reach[aria-pressed="true"]{background:var(--trail);border-color:var(--trail);color:var(--ink)} .dl-all{margin-left:auto;background:transparent;border:1px solid rgb(var(--chrome-fg) / .25);color:var(--chrome-head);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .45rem;border-radius:4px;cursor:pointer;transition:all .15s} .dl-all:hover{border-color:var(--trail);color:var(--trail)} /* road-surface key — how the A·Road surface layer is drawn (colour + line pattern); shown in the on-map legend */ .skey{display:flex;flex-direction:column;gap:.55rem;margin-top:.1rem} /* Rows are buttons now: the key doubles as a filter (tick gravel alone and the map shows gravel alone, in both the tile skin and our own items). */ .skey-row{display:flex;align-items:center;gap:.7rem;font-size:.8rem;color:var(--chrome-fg-solid); background:none;border:none;padding:.15rem .2rem;margin:-.15rem -.2rem;width:calc(100% + .4rem); text-align:left;cursor:pointer;border-radius:4px;font-family:inherit;min-height:1.9rem} .skey-row:hover{background:rgb(var(--chrome-fg) / .08)} .skey-row:focus-visible{outline:2px solid var(--trail);outline-offset:1px} .skey-row[aria-pressed="false"]{opacity:.4} .skey-row[aria-pressed="false"] .skey-ln{filter:grayscale(1)} /* A tick before each class, because "these seven lines are buttons" was something a rider had to discover by clicking (owner-reported 2026-08-12). Filled when the class is shown, an empty box when it is filtered out — the same shape either way, so the row does not jump as it toggles. */ .skey-row::before{content:'\2713';font-size:.78rem;line-height:1;flex:none;width:.9rem; color:var(--chrome-fg-solid);opacity:.85;transition:opacity .12s} .skey-row[aria-pressed="false"]::before{content:'';opacity:0} .skey-row[aria-pressed="false"]{opacity:.45} .skey-row:hover::before{opacity:1} /* The quality-tick note: an explanation, not a filter row — dimmer, no checkmark, and a miniature of the ticks themselves (green → amber → red stitches) so the legend teaches what the map shows. */ .skey-note{display:flex;align-items:center;gap:.7rem;font-size:.68rem;color:var(--chrome-fg-solid); opacity:.75;margin-top:.55rem;padding:0 .3rem;line-height:1.35} .skey-ticks{width:34px;height:4px;border-radius:2px;flex:none; background:linear-gradient(90deg,#1E8E4F 0 3px,transparent 3px 12px, #D9A62E 12px 15px,transparent 15px 23px,#C2402F 23px 26px,transparent 26px 34px)} .skey-study{margin-top:.7rem;width:100%;background:none;border:1px solid rgb(var(--chrome-fg) / .28); border-radius:5px;color:var(--chrome-fg-solid);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;padding:.45rem .5rem;cursor:pointer;min-height:2rem} .skey-study:hover:not(:disabled){border-color:var(--trail)} /* Off with the layer it studies: visibly unavailable rather than silently inert, so nobody presses it twice wondering why nothing happened. */ .skey-study:disabled{opacity:.35;cursor:not-allowed} .skey-study[aria-pressed="true"]{background:var(--trail);border-color:var(--trail);color:var(--ink)} .skey-ln{width:34px;height:4px;border-radius:2px;flex:none;background:var(--sc)} /* Cycle-route key. Same swatch and rhythm as the surface rows so one legend reads as one legend, and deliberately NOT a button: these three explain what the map draws, they do not filter it. No checkmark, no hover, no press state - the affordance has to match what happens. */ .rkey{margin-top:.95rem;padding-top:.85rem;border-top:1px solid rgb(var(--chrome-fg) / .14)} .rkey-row{display:flex;align-items:center;gap:.7rem;font-size:.8rem;color:var(--chrome-fg-solid); padding:.15rem .2rem;line-height:1.35} /* The knooppunt badge, in miniature: white disc, route-purple ring and numeral, which is exactly how routes-tiles.js draws it on the map. A rider should be able to point at the key and then at the map. */ .rkey-node{flex:none;display:flex;align-items:center;justify-content:center; width:17px;height:17px;margin-left:8px;margin-right:9px; background:#FFFFFF;color:#5B3A9E;border:1.5px solid #7A4FCF;border-radius:50%; font-family:var(--mono);font-size:.68rem;line-height:1} /* Gaps are TRANSPARENT, not white. They used to be painted #FBF4E4 to match the white casing the curated A layer draws under its lines — true of that layer, and false of everything else. The surface tile skin has no casing (a white casing under every road in a country is a smear, not a map), so its dashes show terrain through the gaps, and a reader comparing legend to map saw white segments that do not exist (owner-reported 2026-08-11). The colour and the pattern are the information; the casing is a rendering nicety of one layer. */ .skey-ln.dash{background:repeating-linear-gradient(90deg,var(--sc) 0 8px,transparent 8px 13px)} .skey-ln.dot{background:repeating-linear-gradient(90deg,var(--sc) 0 3px,transparent 3px 7px)} .search{width:100%;background:transparent;border:none;border-bottom:1.5px solid rgb(var(--chrome-fg) / .3);color:var(--chrome-fg-solid);font-family:var(--sans);font-size:.95rem;padding:.5rem 0;outline:none} .search::placeholder{color:rgb(var(--chrome-fg) / .65)} .search:focus{border-color:var(--trail)} /* live search results (towns + named Commons features) — in-flow under the input so the scroll container never clips them */ .search-res{list-style:none;margin:.5rem 0 0;max-height:300px;overflow-y:auto;border:1px solid rgb(var(--chrome-fg) / .16);border-radius:8px;background:rgb(var(--chrome-glass-deep) / .55)} .search-res li{margin:0} .search-res button{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid rgb(var(--chrome-fg) / .07);color:var(--chrome-fg-solid);font-family:var(--sans);font-size:.86rem;padding:.5rem .55rem;cursor:pointer;transition:background .12s} .search-res li:last-child button{border-bottom:none} .search-res button:hover,.search-res button.hl{background:rgba(255,90,31,.14)} .search-res .sw{flex:0 0 auto;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:.74rem;font-weight:700;font-family:var(--emoji)} .search-res .snm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .search-res .sub{flex:0 0 auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--chrome-fg) / .65)} .search-res .scomm{margin-left:.45rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--chrome-fg) / .65);border:1px solid rgb(var(--chrome-fg) / .22);border-radius:8px;padding:.08rem .35rem;vertical-align:middle} .search-empty{padding:.6rem .55rem;font-size:.8rem;color:rgb(var(--chrome-fg) / .68)} /* Widen chip (map-and-search.md §4.5): the one-tap "search wider" ladder, visually set apart from result rows (top border, glacier accent, mono). */ .search-widen{border-top:1px solid rgb(var(--chrome-fg) / .16)} .search-widen button{width:100%;display:flex;align-items:center;gap:.4rem;background:none;border:none;color:var(--chrome-head);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.55rem;cursor:pointer;transition:background .12s} .search-widen button::before{content:'⊕';font-size:.8rem} .search-widen button:hover{background:rgba(255,90,31,.14)} /* grouped results (spec 2026-07-14 §3.3): sticky per-layer headers between rows */ .search-res .sgrp{position:sticky;top:0;background:rgb(var(--chrome-glass-deep) / .94);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--chrome-fg) / .68);padding:.35rem .55rem .25rem;border-bottom:1px solid rgb(var(--chrome-fg) / .1)} .chips{display:flex;flex-wrap:wrap;gap:.4rem} /* The atlas.css chip's size, in the map's own theme colours: ink on a dark chrome would disappear, so selected stays the trail orange here. */ .chip{display:inline-flex;align-items:center;gap:.3rem;min-height:30px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;padding:.3rem .7rem;border:1px solid rgb(var(--chrome-fg) / .25);border-radius:30px;cursor:pointer;transition:all .18s;user-select:none} .chip:hover{border-color:var(--chrome-fg-solid)} .chip.on{background:var(--trail);border-color:var(--trail);color:var(--ink)} /* Layer-group heading inside #layers (utilities / rider picks / moderation). Quieter than .grp h3 above it — this is a divider within one panel, not a new panel; the first one sits flush because the panel heading precedes it. */ .lgrp{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:rgb(var(--chrome-fg) / .65);margin:.9rem 0 .35rem} .lgrp:first-child{margin-top:0} .layer{display:flex;align-items:center;gap:.7rem;padding:.45rem 0;cursor:pointer;user-select:none} .layer .sw{width:21px;height:21px;border-radius:5px;flex-shrink:0;border:1.5px solid var(--c);background:var(--c);display:flex;align-items:center;justify-content:center;font-size:.78rem;line-height:1;color:var(--ic,#fff);transition:all .18s} .layer .sw .sw-g{display:inline-block;font-style:normal;line-height:1;filter:var(--ig,none);font-family:var(--emoji)} /* force colour-emoji to a flat white/black silhouette */ .layer.off .sw{opacity:.45} .layer .nm{flex:1;font-size:.92rem} .layer.off .nm{opacity:.45} .layer .ct{font-family:var(--mono);font-size:.74rem;color:rgb(var(--chrome-fg) / .68)} /* Map key panel (map-and-search.md §4.7): live marks only, drawn with the REAL pin classes above so the key cannot drift from the map. */ .mkp-row{display:grid;grid-template-columns:46px 1fr;gap:.65rem;align-items:center;padding:.42rem 0} /* On the map MapLibre positions the marker element, which is what anchors the ::before/::after badges; in this panel nothing does, so the badges (community "?", verified dot) silently anchor elsewhere without this. */ .mkp-sw .cc-pin{position:relative} .mkp-sw{display:flex;align-items:center;justify-content:center;gap:.3rem;min-height:42px;border-radius:7px;background:rgb(var(--chrome-fg) / .08)} /* A border row shows its pin twice, with and without the badge. */ .mkp-row.mkp-pair{grid-template-columns:84px 1fr} /* A tool heading led by its brand mark (Scout in the Tools panel). */ .tool-h-logo{display:flex;align-items:center;gap:.5rem} .tool-h-logo .scout-logo{border-radius:5px;flex:none} /* A surface line as the map draws it: colour on a cream casing. */ .mkp-line{width:34px;height:6px;border-radius:3px;background:var(--sc);box-shadow:0 0 0 2px #FBF4E4} .mkp-line.dash{background:repeating-linear-gradient(90deg,var(--sc) 0 5px,#FBF4E4 5px 10px);border-radius:0} .mk-surface{padding:.3rem 0} .mk-surface .mkp-sw{min-height:30px} .mkp-row.mkp-pair .mkp-sw{gap:.55rem} .mkp-t b{display:block;font-size:.84rem;font-weight:600} .mkp-t span{display:block;font-size:.74rem;line-height:1.45;color:rgb(var(--chrome-fg) / .72)} .mk-disc{width:22px;height:22px;border-radius:50%;background:var(--c,#3E7D8C);flex:none; border:1.5px solid rgb(var(--mark-ink) / .85);display:flex;align-items:center;justify-content:center;font-size:.66rem} .mk-disc .ic{font-family:var(--emoji);filter:brightness(0) invert(1);line-height:1} .toggle{display:flex;border:1px solid rgb(var(--chrome-fg) / .25);border-radius:6px;overflow:hidden} .toggle button{flex:1;background:transparent;color:var(--chrome-fg-solid);font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:.55rem;border:none;cursor:pointer;transition:all .18s} .toggle button.on{background:var(--chrome-lift)} /* Region scope selector (map-and-search.md §4.5): 5 options, so it wraps into a chip grid instead of the 2-up segmented pill .toggle assumes. */ .scope-toggle{display:flex;flex-wrap:wrap;gap:.35rem} /* #scopeChips (map-and-search.md §4.5) is a plain wrapper map.js fills with JS-rendered region/country chips — it is NOT itself a chip, so display:contents un-boxes it: its button children become direct flex items of .scope-toggle above, so flex:1 1 auto and the .35rem gap apply between the chips exactly as they do for the two static buttons either side of it. */ #scopeChips{display:contents} .scope-toggle button{flex:1 1 auto;min-width:calc(33.3% - .35rem);background:transparent;color:var(--chrome-fg-solid);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.5rem .3rem;border:1px solid rgb(var(--chrome-fg) / .25);border-radius:6px;cursor:pointer;transition:all .18s} .scope-toggle button:hover{border-color:rgb(var(--chrome-fg) / .5)} .scope-toggle button.on{background:var(--chrome-lift);border-color:var(--chrome-head);color:var(--chrome-fg-solid)} /* Compass grid (owner request, map-and-search.md §4.5 "Compass grid layout"): only rendered when the active scope is a single region (map.js renderScopeChips) — the selected region sits centre, each neighbour in the 3x3 cell matching the direction it actually lies. This overrides #scopeChips' base `display:contents` (a compound selector beats the bare-ID rule regardless of source order) so the grid + the linear More/All-country row below it get their OWN box instead of unboxing into the parent flex row — a 3x3 grid can't be a flex-wrap item. */ #scopeChips.cc-grid{display:flex;flex-direction:column;gap:.5rem;flex:1 1 100%} .cc-compass{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem} .cc-compass-cell{display:flex;min-height:2.5rem} .cc-compass-cell.empty{visibility:hidden} /* Same button skin as the linear chips (.scope-toggle button, above) — this is a compound selector so it wins over the base rule without !important — but smaller/wrapping type: a full region name ("Rhineland-Palatinate", "Baden-Württemberg") has 3 columns of ~90px to fit inside the persistent 340px rail (grid-template-columns, top of this file — NOT viewport-width responsive, so this is the standing constraint at every window size, not just "mobile"). Wrapping to 2 lines reads fine in a compass cell (the position already carries most of the meaning); truncating the name or shrinking it to illegibility would not. */ .cc-compass-cell button{flex:1 1 auto;width:100%;min-width:0;font-size:.68rem;line-height:1.25;letter-spacing:.02em;white-space:normal;overflow-wrap:break-word;padding:.4rem .2rem} .cc-compass-center button{font-weight:700} /* same "active = bold" idiom as #mode button.on, above */ .cc-compass-more{display:flex;flex-wrap:wrap;gap:.35rem} .cc-compass-more button{flex:1 1 auto;min-width:calc(50% - .35rem)} /* view mode is a primary control → its active state must read unmistakably "on": orange fill like .chip.on (not the subtle spruce the other toggles use) */ #mode{border-color:var(--trail)} #mode button.on{background:var(--trail);color:var(--ink);font-weight:700} .hint{font-size:.78rem;color:rgb(var(--chrome-fg) / .68);margin-top:.6rem;line-height:1.5} /* The data-version readout under the places count: deliberately faint — it is a diagnostic, not content — but selectable for a bug report. */ .data-versions{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em; color:rgb(var(--chrome-fg) / .65);word-break:break-word;user-select:text;flex:1;min-width:0} .data-versions .dv-bad{color:var(--trail)} /* CURATOR MODE. The pending queue deliberately ignores the map's region scope (render.js featureVisible), so a curator scoped to one region legitimately sees pins in another - which reads as a scope leak until you know. The hint hint on the map explains it; this border says it at a glance. inset, not a real border: a border would resize the canvas and force MapLibre to re-measure on every toggle. */ #map.cc-curator-mode::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:400; box-shadow:inset 0 0 0 3px var(--trail);border-radius:inherit} /* ---------- MAP ---------- */ .map-wrap{position:relative;flex:1;min-height:0} /* flex:1 is load-bearing: the rail and the drawer are flex:none, so the map column is the only thing that may take the remaining width. Under the old 340px grid it inherited the 1fr track and needed nothing. */ .mapcol{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0} #map{position:absolute;inset:0;background:var(--paper-deep)} /* A hop onto ground the map has never drawn is cut, not panned: it would otherwise slide for a second over the style's background colour, with no tiles to show (docs/specs/map-and-search.md §8, map-init.js moveCamera). The canvas container carries the fade so the pins drawn as markers go with it; the controls beside it stay put, and #map's own paper shows through. prefers-reduced-motion drops the fade, not the cut: the cut IS the reduced-motion answer. */ .maplibregl-canvas-container{transition:opacity .18s ease} .maplibregl-canvas-container.cc-cut{opacity:0} @media (prefers-reduced-motion: reduce){ .maplibregl-canvas-container{transition:none} } /* Replaces the canvas when MapLibre cannot get a WebGL2 context (catalog-load.js). Centred in the map area because there is no map left to sit beside. */ .map-gpu-error{position:absolute;inset:0;margin:0;display:flex;align-items:center; justify-content:center;text-align:center;padding:2rem;max-width:34rem; margin-inline:auto;color:var(--ink);font-size:.95rem;line-height:1.5} .maplibregl-canvas{filter:none} .maplibregl-map{font-family:var(--sans)} .maplibregl-ctrl-attrib{font-family:var(--mono);font-size:.7rem} /* The attribution is long (OSM, the DEM notice, the imagery provider) and wraps at the width of its box. The box stops 4.5rem short of the left edge: the zoom column (10px margin + 29px buttons, the z-level badge above it) keeps its own strip, so the last line and its "credits" link are never underneath the buttons. The wrap is real text wrapping, the rider reads every line. */ .maplibregl-ctrl-bottom-right{max-width:calc(100% - 4.5rem)} /* On a narrow map the open attribution still meets the zoom and Locate me buttons. The buttons stay on top so they can always be tapped; the attribution folds away on its own "i". */ .maplibregl-ctrl-bottom-left{z-index:3} /* The pin itself (.cc-pin, its borders, badges and state marks) lives in styles/pins.css, linked beside this file: the key page and the curator marker page draw the same pin from the same rules. */ /* Every remaining surface that prints a category glyph. Without --emoji these draw tofu boxes on any machine whose browser has no colour-emoji font — which is silent: the pin still renders, it just says nothing. */ .cc-g{font-family:var(--emoji);font-style:normal} .cc-g svg,.cc-near-k svg,.search-res .sw svg,.cc-d-rec .v svg{vertical-align:-2px} /* one-off reveal pin (decision C): the "?" pin plus the selection pulse */ /* The town pointer (map-and-search.md §6.5): the site's own mark, ink pin with the wheel, standing on the town point; the reveal pin's pulse under it. */ .cc-town-pin{position:relative;width:26px;height:43px;color:var(--ink);--wheel:var(--paper);--spoke:var(--clay);pointer-events:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))} .cc-town-pin svg{display:block} .cc-town-pin::before{content:"";position:absolute;left:50%;bottom:-2px;width:26px;height:26px;margin-left:-13px;border-radius:50%;border:2px solid rgba(255,90,31,.6);animation:cc-pulse 1.25s infinite;z-index:-1} .cc-pin.reveal::before{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid rgba(255,90,31,.6);animation:cc-pulse 1.25s infinite} .cc-mod{margin-top:1rem;border:1px solid rgba(217,45,32,.4);border-left:3px solid #D92D20;border-radius:0 8px 8px 0;padding:.9rem 1rem;background:rgba(217,45,32,.05)} .cc-mod-badge{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--chrome-red);margin-bottom:.5rem} /* readable red on the dark drawer (was #D92D20) */ .cc-mod-body{font-size:.85rem;line-height:1.5;margin-bottom:.6rem} /* The target item's own record inside a pending card — quieter than the proposed change above it: this is the context, not the question. */ .cc-mod-ctx{margin:.7rem 0 0;border-top:1px solid rgb(var(--chrome-fg) / .14);padding-top:.6rem} .cc-mod-ctx-h{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--chrome-fg) / .68);margin-bottom:.35rem} .cc-mod-ctx .cc-d-rec{margin:0} .cc-mod-diff{background:rgb(var(--chrome-fg) / .05);border-radius:5px;padding:.5rem .7rem;font-size:.82rem;margin-bottom:.6rem} /* Before/after for a proposed climb shape. The switch redraws the line on the MAP — coordinates in the text diff above are not reviewable. */ /* Grouped, per field. One run-on sentence of every changed value was technically complete and practically unreadable. */ /* minmax, not auto: an unbreakable label (a uuid key, once) grew the first column to its width and wrapped every value one letter per line (owner 2026-09-08). */ .cc-mod-chg{display:grid;grid-template-columns:minmax(4rem,max-content) minmax(0,1fr);gap:.2rem .7rem;margin:.35rem 0 0} .cc-mod-chg dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere;max-width:11rem; color:var(--chrome-mut);align-self:baseline;padding-top:.15rem;white-space:nowrap} .cc-mod-chg dd{margin:0;min-width:0;overflow-wrap:anywhere;font-size:.82rem;line-height:1.45} .cc-mod-chg .was{color:var(--chrome-mut);text-decoration:line-through} .cc-mod-chg .arw{color:var(--chrome-mut);margin:0 .3rem} .cc-mod-chg .now{color:var(--trail)} /* A row showing a PROPOSED value rather than the item's own. Orange, so it reads as a proposal at a glance and never as recorded fact. */ .cc-d-rec li.chg .v{color:var(--trail);font-weight:600} .cc-d-rec li.chg .k::after{content:"●";color:var(--trail);font-size:.68rem;margin-left:.3rem;vertical-align:middle} .cc-mod-shape{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .6rem} .cc-mod-shape-h{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-mut)} .cc-mod-shape-btns{display:inline-flex;border:1px solid rgb(var(--chrome-fg) / .28);border-radius:30px;overflow:hidden} .cc-shape-btn{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase; padding:.3rem .7rem;background:transparent;color:rgb(var(--chrome-fg) / .75);border:0;cursor:pointer;min-height:30px} .cc-shape-btn+.cc-shape-btn{border-left:1px solid rgb(var(--chrome-fg) / .28)} .cc-shape-btn:hover:not(:disabled){background:rgb(var(--chrome-fg) / .10);color:var(--chrome-fg-solid)} .cc-shape-btn.on{background:#B25BE8;color:#14160E;font-weight:700} .cc-shape-btn:disabled{opacity:.35;cursor:default} .cc-shape-btn:focus-visible{outline:2px solid var(--trail);outline-offset:-2px} /* The proposed steepest marker, so it reads as a proposal and not as the climb's own marker sitting beside it. */ .cc-steep-pending{border-style:dashed;opacity:.95} /* pending rider photos with per-photo keep/drop (docs/specs/photo-uploads.md §5) */ /* Waiting on the rider: the same card, but never mistakable for one that has not been looked at yet — it only appears via the desk's own link. */ .cc-mod-badge.waiting{background:var(--ochre);color:var(--ink)} .cc-mod-asked,.cc-mod-replied,.cc-mod-prior{font-size:.82rem;line-height:1.5;padding:.5rem .7rem;border-radius:0 5px 5px 0;margin:.45rem 0} .cc-mod-asked{background:rgb(var(--chrome-fg) / .05);border-left:2px solid var(--ochre)} .cc-mod-replied{background:rgb(var(--chrome-fg) / .05);border-left:2px solid var(--spruce)} /* A decision already on record for this place — clay, and directly under the badge, because it changes what this decision IS rather than adding context to it (SubmissionQueue::priorRejections). */ .cc-mod-prior{background:rgba(184,89,58,.07);border-left:2px solid var(--clay)} /* The Safe Browsing warning on a submission's proposed links (catalog-data-model.md §7). Two weights: `unsafe` is "do not click", `unknown` is "we could not ask". Neither is a rejection. */ .cc-mod-linkflag{font-size:.82rem;line-height:1.5;padding:.5rem .7rem;border-radius:0 5px 5px 0;margin:.45rem 0} .cc-mod-linkflag-unsafe{background:rgba(217,45,32,.12);border-left:2px solid #D92D20} .cc-mod-linkflag-unknown{background:rgb(var(--chrome-fg) / .07);border-left:2px solid rgb(var(--chrome-fg) / .35)} /* A pending pin move that hides rider photos on a scenic view (scenic-views.md §8). */ .cc-mod-pinphotos{font-size:.82rem;line-height:1.5;padding:.5rem .7rem;border-radius:0 5px 5px 0;margin:.45rem 0;background:rgba(217,119,6,.12);border-left:2px solid #D97706} .cc-mod-asked-h{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-mut);display:block} .cc-mod-photos{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0} .cc-mod-photo{display:flex;flex-direction:column;gap:.2rem;width:120px;font-size:.68rem} .cc-mod-photo img{width:120px;height:90px;object-fit:cover;border-radius:5px;display:block} /* The thumbnail is a zoom control: a curator has to be able to open the photo to judge it. Bare button, so it looks exactly like the old img. */ .cc-mod-photo-zoom{display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:5px;position:relative} .cc-mod-photo-zoom:focus-visible{outline:2px solid var(--ochre);outline-offset:2px} .cc-mod-photo-zoom::after{content:"⤢";position:absolute;right:.25rem;bottom:.25rem;font-size:.7rem;line-height:1;padding:.15rem .3rem;border-radius:4px;background:rgb(var(--chrome-glass) / .6);color:var(--chrome-fg-solid);opacity:0;transition:opacity .12s} .cc-mod-photo-zoom:hover::after,.cc-mod-photo-zoom:focus-visible::after{opacity:1} .cc-mod-photo-meta{color:var(--chrome-mut);line-height:1.3} .cc-mod-photo-keep{display:flex;align-items:center;gap:.25rem} /* The OSM question on a new place (catalog-data-model.md §5b), asked here because this is where the place is approved. Options are buttons in the drawer's secondary style; the answered chip is one small mono tag. */ .cc-mod-osm{margin:.65rem 0 .6rem} .cc-mod-osm-scope{font-size:.76rem;color:var(--chrome-mut);margin:0 0 .4rem;line-height:1.4} .cc-mod-osm-opts{display:flex;flex-direction:column;gap:.35rem} .cc-mod-osm-opt{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;text-align:left;width:100%; font-family:var(--sans);font-size:.8rem;line-height:1.3;padding:.45rem .65rem;border-radius:5px;cursor:pointer; background:transparent;color:rgb(var(--chrome-fg) / .9);border:1.5px solid rgb(var(--chrome-fg) / .45);transition:background .15s,border-color .15s} .cc-mod-osm-opt b{font-weight:700} .cc-mod-osm-opt span{font-family:var(--mono);font-size:.68rem;color:var(--chrome-mut)} .cc-mod-osm-opt:hover,.cc-mod-osm-opt:focus-visible{border-color:var(--trail);background:rgb(var(--chrome-fg) / .06)} .cc-mod-osm-opt:focus-visible{outline:2px solid var(--trail);outline-offset:2px} .cc-mod-osm-opt:disabled{opacity:.55;cursor:default} .cc-mod-osm-opt.none{border-style:dashed} .cc-mod-osm-chip{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;padding:.2rem .5rem; border-radius:999px;border:1px solid rgb(var(--chrome-fg) / .35);color:rgb(var(--chrome-fg) / .85);text-decoration:none} a.cc-mod-osm-chip:hover{border-color:var(--trail);color:var(--trail)} /* Approve clicked before the question was answered: the refusal points here. */ .cc-mod-osm.cc-mod-invalid{border-left:3px solid var(--clay);padding-left:.6rem;border-radius:0 6px 6px 0;background:rgba(181,83,46,.12)} .cc-mod-diff-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--chrome-mut);margin-bottom:.3rem} .cc-mod-was{color:var(--chrome-mut);text-decoration:line-through} .cc-mod-now{color:var(--trail)} .cc-mod-initial{font-size:.82rem;color:rgb(var(--chrome-fg) / .7);font-style:italic;margin:0} .cc-mod-note{width:100%;min-height:52px;border:1px solid rgba(16,30,22,.2);border-radius:6px;padding:.5rem;font-family:var(--sans);font-size:.85rem;margin-bottom:.6rem;resize:vertical} /* "Needs info" sent with an empty note: the question is the whole point of that decision, so the box says so rather than the POST failing silently. */ .cc-mod-note.cc-mod-invalid{border-color:var(--clay);box-shadow:0 0 0 2px rgba(181,83,46,.35)} .cc-mod-acts{display:flex;gap:.5rem;flex-wrap:wrap} /* the site's ONE button system (orange primary / outlined secondary), on the dark drawer: approve = filled --trail; needs-info = paper outline; reject = readable-red outline. The old green/#555/clay set was written for a light background and disappeared on this panel. */ .cc-mod-btn{font-family:var(--sans);font-weight:700;font-size:.8rem;padding:.5rem .8rem;border-radius:5px;border:none;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s} .cc-mod-btn.approve{background:var(--trail);color:var(--ink)} .cc-mod-btn.approve:hover{background:#ff703d} .cc-mod-btn.info{background:transparent;color:rgb(var(--chrome-fg) / .85);border:1.5px solid rgb(var(--chrome-fg) / .45)} .cc-mod-btn.info:hover{border-color:var(--chrome-fg-solid);color:var(--chrome-fg-solid)} .cc-mod-btn.reject{background:transparent;color:var(--chrome-red);border:1.5px solid var(--chrome-red)} .cc-mod-btn.reject:hover{background:rgba(249,112,102,.14)} .cc-mod-btn.armed{box-shadow:0 0 0 3px rgba(255,90,31,.45)} /* keyboard-armed decision — Enter in the note sends it */ .cc-mod-btn:disabled{opacity:.5;cursor:not-allowed} .cc-mod-preview{font-family:var(--mono);font-size:.7rem;color:rgb(var(--chrome-fg) / .68);margin-top:.5rem} .cc-toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(1rem);background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:8px;font-size:.85rem;width:max-content;max-width:min(90vw,34rem);text-align:center;box-shadow:0 10px 28px -10px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:3000} .cc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* A confirmation recorded is worth a beat in the middle of the screen, not a footnote at the bottom of a full-screen map. */ .cc-toast.center{top:50%;bottom:auto;font-size:1rem;padding:1rem 1.6rem;transform:translate(-50%,calc(-50% + 1rem))} .cc-toast.center.show{transform:translate(-50%,-50%)} /* "Set my area" cold-start prompt (map-and-search.md §4.5 Phase 4): a dismissible chip in the Region rail group; the ✕ matches the rail's muted control language. */ .cc-area-prompt{margin-top:.55rem;align-items:center} .cc-area-x{background:transparent;border:none;color:var(--chrome-fg-solid);opacity:.55;cursor:pointer;font-size:.8rem;line-height:1;padding:.2rem .3rem;transition:opacity .15s} .cc-area-x:hover{opacity:1} /* Pan-away widen nudge (map-and-search.md §4.5 "Deep links & far panning"): a floating one-tap widen prompt over the map, styled like the toast + a chip-orange action. */ .cc-area-nudge{position:absolute;top:1.2rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.55rem;background:var(--ink);color:var(--paper);padding:.4rem .5rem .4rem .85rem;border-radius:30px;box-shadow:0 10px 28px -10px rgba(0,0,0,.55);z-index:1100;max-width:92vw} .cc-area-nudge[hidden]{display:none} /* The out-of-scope arm interpolates a region name ("Only showing Baden-Wurttemberg"), which is far longer than the fixed My-area line the pill was built for, so it has to be allowed to wrap rather than push its own button off the edge. */ .cc-nudge-msg{font-size:.78rem;min-width:0} @media(max-width:520px){ .cc-area-nudge{flex-wrap:wrap;justify-content:center;border-radius:16px;padding:.5rem .7rem} } .cc-nudge-go{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;background:var(--trail);color:var(--ink);border:none;border-radius:20px;padding:.35rem .65rem;cursor:pointer} .cc-nudge-x{background:transparent;border:none;color:var(--paper);opacity:.55;cursor:pointer;font-size:.8rem;line-height:1;padding:.1rem .25rem;transition:opacity .15s} .cc-nudge-x:hover{opacity:1} /* "Not covered yet" banner (map-and-search.md §4.5b): same pill, its go-action is a real link (the join / join_country route) rather than a JS action, so it needs the anchor defaults a button never had. */ a.cc-nudge-go{display:inline-block;text-decoration:none} .cc-cluster{display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 7px;border-radius:15px;background:var(--c);color:#fff;font:600 13px/1 'Spline Sans Mono',ui-monospace,monospace;border:2px solid rgba(255,255,255,.85);box-shadow:0 2px 6px rgba(16,30,22,.45);cursor:pointer} .maplibregl-popup-content{background:var(--chrome-bg);color:var(--chrome-fg-solid);border-radius:8px;box-shadow:0 12px 30px -10px rgba(16,30,22,.6);padding:.9rem 1.1rem} .maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--chrome-bg)} .maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--chrome-bg)} .maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--chrome-bg)} .maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--chrome-bg)} .pop .pop-co{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--chrome-head);text-transform:uppercase} .pop h4{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin:.2rem 0 .5rem} .pop .pop-tags{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.6rem} .pop .pop-tags span{font-family:var(--mono);font-size:.68rem;padding:.15rem .35rem;border:1px solid rgb(var(--chrome-fg) / .3);border-radius:3px;color:rgb(var(--chrome-fg) / .8)} .pop .pop-vote{font-family:var(--mono);font-size:.72rem;color:var(--trail);letter-spacing:.08em;cursor:pointer} /* Live zoom readout — a maplibregl bottom-left control (map.js), so it inherits the control margin/stacking; only appearance is styled here. */ .zoom-badge{background:rgb(var(--chrome-glass) / .9);color:var(--chrome-fg-solid);font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;line-height:1;padding:.28rem .5rem;border-radius:6px;pointer-events:none;box-shadow:0 2px 6px -2px rgba(0,0,0,.5)} /* The chrome-theme toggle used to be a maplibregl control down here. It is now a rail button (assets/map/theme.js), styled by .ib with the rest. */ /* Narrower on purpose (owner 2026-08-16): the quality-ticks note is one long sentence and it was setting the panel's width, so a key of six short rows took a third of a laptop's map. Capped, and the note wraps to two lines - the sentence is a footnote, not a column guide. */ /* bottom clears the attribution strip and the bug circle that shares this corner on the map (_bug_fab.html.twig, is-mini: 3.4rem up, 2.65rem tall) plus a .6rem gap. */ .legend{position:absolute;bottom:6.65rem;right:1.2rem;background:rgb(var(--chrome-glass) / .95);color:var(--chrome-fg-solid);border-radius:8px;padding:.9rem 1.1rem;z-index:1000; max-width:min(17.5rem,44vw)} /* The collapse control, on every screen rather than only on phones. Its own row, right-aligned, so it reads as this panel's control and needs no absolute positioning to stay clear of the headings. */ .legend .lg-toggle{margin-left:auto;margin-bottom:.2rem} .legend.collapsed{padding:.3rem;max-width:none} .legend.collapsed .lg-toggle{margin-bottom:0} .legend.collapsed .lg-body{display:none} .legend h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--chrome-head);margin-bottom:.6rem;text-transform:uppercase} .legend .row{display:flex;align-items:center;gap:.5rem;font-size:.78rem;margin:.25rem 0} .legend .d{width:10px;height:10px;border-radius:50%;background:var(--c)} .legend .lg-toggle{display:flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;padding:0;background:transparent;border:none;border-radius:6px;color:var(--chrome-fg-solid);cursor:pointer} .legend .lg-toggle:hover{background:rgb(var(--chrome-fg) / .1)} .legend .lg-toggle:focus-visible{outline:2px solid var(--trail);outline-offset:1px} /* Top-right: two glass icon buttons. The base picker opens a small flyout to its left; street-level is a plain toggle. Everything else that used to live in this corner is now a layer, in the Layers panel. */ .tr{position:absolute;top:1.2rem;right:1.2rem;z-index:1000;display:flex;flex-direction:column;gap:.35rem; transition:transform .22s ease} /* The drawer is z-1200 and covers the right 380px, so with an item open this toolbar was underneath it: clicking the base picker hit the drawer header instead, and switching to satellite meant closing the drawer first (reported 2026-08-25). Step aside instead of being buried. Folded, the 30px handle is all that is left, so a small nudge is enough. */ .map-wrap.drawer-open .tr{transform:translateX(calc(-1 * min(380px, 90vw) + 1.2rem))} .map-wrap.drawer-folded .tr{transform:translateX(calc(-1 * var(--fold-nudge, 30px)))} .trw{position:relative} .trb{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;border-radius:7px;cursor:pointer; background:rgb(var(--chrome-glass) / .92);color:var(--chrome-fg-solid);box-shadow:0 2px 6px -2px rgba(0,0,0,.5)} .trb:hover{color:var(--trail)} .trb:focus-visible{outline:2px solid var(--trail);outline-offset:1px} .trb.on{color:var(--trail)} .trb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* No Mapillary token: the control says unavailable rather than dying quietly. */ .trb.mc-off,.trb.mc-off:hover{opacity:.38;cursor:not-allowed;color:var(--chrome-fg-solid)} .fly{position:absolute;top:0;right:calc(100% + .45rem);background:rgb(var(--chrome-glass) / .96);border-radius:8px; padding:.35rem;min-width:8.5rem;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);display:none} .fly.open{display:block} .fly button{display:flex;align-items:center;width:100%;background:none;border:none;color:var(--chrome-fg-solid); font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.45rem .55rem; border-radius:5px;cursor:pointer;text-align:left} .fly button:hover{background:rgb(var(--chrome-fg) / .1)} .fly button.on{color:var(--trail)} .fly button.on::after{content:"●";margin-left:auto;font-size:.68rem} @media(max-width:760px){ .tr{top:.8rem;right:.8rem} /* Phones start the legend collapsed (panels.js decides), and the collapsed panel parks beside the corner buttons rather than over the map. Expanded, it takes the corner. One class drives both, so nothing can be half-open. */ .legend{bottom:auto;top:.8rem;right:3.3rem;padding:.7rem .9rem;min-width:0;max-width:min(17.5rem,72vw)} .legend.collapsed{top:.8rem;right:3.3rem;padding:.25rem} } /* The filter pill: bottom-centre, over the map, with its own reset. Constant colours on purpose - it sits on the basemap, not on the chrome, the same rule the toast and the tooltip follow. bottom clears the attribution strip (10px gutter plus up to three wrapped lines of .7rem mono), the same clearance as .zoom-hint, so the pill reads above the credits. */ .fpill{position:absolute;left:50%;bottom:4.2rem;transform:translateX(-50%);z-index:1200; display:flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--paper); padding:.4rem .5rem .4rem .9rem;border-radius:30px;box-shadow:0 10px 28px -10px rgba(0,0,0,.55); font-size:.78rem;max-width:min(92vw,26rem)} .fpill[hidden]{display:none} .fpill button{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase; background:var(--trail);color:var(--ink);border:none;border-radius:20px;padding:.35rem .7rem;cursor:pointer;white-space:nowrap} .fpill button:hover{background:#ff703d} .fpill button:focus-visible{outline:2px solid var(--paper);outline-offset:2px} /* The zoom hint, BESIDE the zoom controls rather than above them: stacked, it landed on top of the z-level badge that shares MapLibre's bottom-left corner (owner-reported 2026-08-20). left clears the ~29px control column plus its 10px gutter. bottom clears the attribution strip along the bottom edge (10px gutter plus up to three wrapped lines of .7rem mono), so the hint reads above the credits instead of across them. */ .zoom-hint{position:absolute;left:3.5rem;bottom:4.2rem;z-index:1000;max-width:min(22rem,52vw); background:rgb(var(--chrome-glass) / .92);color:var(--chrome-fg-solid);font-family:var(--mono); font-size:.72rem;line-height:1.4;letter-spacing:.04em;padding:.4rem .6rem;border-radius:6px; pointer-events:none;box-shadow:0 2px 6px -2px rgba(0,0,0,.5)} .zoom-hint[hidden]{display:none} .map-top{position:absolute;top:1.2rem;left:1.2rem;z-index:1000;background:rgb(var(--paper-glass) / .95);border-radius:8px;padding:.7rem 1rem} .map-top .rg{font-family:var(--serif);font-weight:600;font-size:1.05rem} .map-top .sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:#5a5d4d;text-transform:uppercase;margin-top:.15rem} /* Scope-change busy line (map-and-search.md §4.5). It covers the subtitle row rather than joining it, so showing it changes no box on the page: same position, same height, no extra map hidden. The spinner is the drawer's (.cc-d-spin), sized down to the mono line it shares. */ .map-top-status{position:relative} .cc-scope-busy{position:absolute;inset:0;display:flex;align-items:center;gap:.4rem; background:rgb(var(--paper-glass) / .95); font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:#5a5d4d;text-transform:uppercase;margin-top:.15rem} .cc-scope-busy[hidden]{display:none} .cc-scope-busy .cc-d-spin{width:11px;height:11px;border-width:1.5px;flex:none; border-color:rgba(90,93,77,.25);border-top-color:#5a5d4d} .map-top .add-climb{display:inline-block;margin-top:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--trail);padding:.4rem .7rem;border-radius:5px;font-weight:500} .map-top .add-climb:hover{background:#ff703d} .contrib-fab{display:none} /* placed AFTER the desktop .map-top block so these win the cascade on mobile */ @media(max-width:760px){ .map-top{top:.8rem;left:.8rem;padding:.4rem .6rem;max-width:52vw} .map-top .rg{font-size:.85rem} .map-top .sub,.map-top .add-climb{display:none} /* contribute moves to the FAB */ /* No subtitle row to sit on here, so the busy line takes a line of its own for as long as the scope is being drawn. The page does not reflow: the card is absolutely positioned over the map. */ .cc-scope-busy{position:static;margin-top:.25rem;font-size:.62rem;letter-spacing:.08em} /* a top-level FAB anchored to the map, sitting in the top-right control row just left of the legend/layers icons. z-index below those panels (1000) so an opened panel covers it rather than the FAB poking through. */ .contrib-fab{display:flex;align-items:center;justify-content:center;position:absolute;top:.8rem;right:5.8rem;z-index:999;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--trail);color:var(--ink);box-shadow:0 6px 16px -6px rgba(0,0,0,.55)} .contrib-fab:active{background:#ff703d} .app.dock-open .contrib-fab{display:none} } /* ---------- MAPILLARY VIEWER DOCK ---------- */ /* Scout ride review: a panel over the real map, not a page of its own — a rider fixing a tag has to see what is already mapped around it. */ /* `--forest` does not exist in this palette, so the background resolved to nothing and the whole panel rendered transparent over the map — the tag list was unreadable (owner-reported 2026-08-12). It is `--ink`, the same dark the drawer uses, and the panel is opaque by construction rather than by luck: a translucent list over a moving map cannot be read at all. z-index sits above the map controls and below the drawer (1200), because opening a place from the panel must still put the drawer on top. */ .scout-panel{position:absolute;top:1rem;left:1rem;z-index:1100;width:min(23rem,calc(100% - 2rem)); max-height:calc(100% - 2rem);overflow-y:auto;background:var(--chrome-bg);color:var(--chrome-fg-solid); border:1px solid rgb(var(--chrome-fg) / .12); border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.45);padding:1rem; /* stable: the scrollbar's slot is reserved whether or not it shows. Without it, deleting a card could tip the content under the panel height, the thin scrollbar vanished (or appeared), and every card jumped 10px in width while the transparent track exposed the ink background as a dark band (owner-reported 2026-08-18, "black vertical bar behind each item"). */ scrollbar-gutter:stable; scrollbar-width:thin;scrollbar-color:var(--chrome-lift) transparent} /* Centred against the whole three-line block, not pinned to the first line: the mark labels the card, and top-aligned it read as a bullet on the heading (owner 2026-08-12). */ /* The close control sits in the panel's own corner and does not scroll with the list — the list is long, and a way out you have to scroll back up for is not one. */ .scout-close{position:sticky;top:0;float:right;margin:-.35rem -.35rem 0 .5rem;z-index:2; width:28px;height:28px;line-height:1;display:flex;align-items:center;justify-content:center; background:rgb(var(--chrome-fg) / .08);color:var(--chrome-fg-solid);border:1px solid rgb(var(--chrome-fg) / .18); border-radius:6px;font-size:1.15rem;cursor:pointer} .scout-close:hover{background:rgb(var(--chrome-fg) / .16)} /* The mark is as tall as the block it labels — title AND the lines under it (owner 2026-08-12) — so it reads as the card's identity rather than as a bullet beside the heading. Stretching rather than a fixed height keeps that true when the copy wraps to a different number of lines, and the square aspect ratio means the width follows instead of distorting it. */ .scout-head{display:flex;align-items:stretch;gap:.75rem;margin-bottom:.8rem} .scout-headtext{min-width:0} .scout-head h2{margin:0 0 .25rem;font-size:1.05rem} .scout-drop{border:1px dashed rgb(var(--chrome-fg) / .35);border-radius:8px;padding:.9rem;text-align:center} .scout-drop.over{border-color:var(--trail);background:rgba(255,90,31,.08)} .scout-pick{background:var(--trail);color:var(--ink);border:none;border-radius:6px;padding:.5rem .9rem; font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer} .scout-hint{margin:.6rem 0 0;font-size:.7rem;color:rgb(var(--chrome-fg) / .72);line-height:1.4} /* A fixed small square beside the title (owner 2026-08-18: half the old mark, lead paragraph gone) - no measuring, no observer. The image stays out of flow so its 400px intrinsic width cannot drive the layout. */ .scout-markbox{flex:0 0 auto;position:relative;width:2.2rem;height:2.2rem; border-radius:6px;overflow:hidden} .scout-mark{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0} /* Before/after for a MOVED PIN. A ring, not a pin: the item's own marker stays readable underneath, which is the comparison being asked for. */ .cc-pending-point{width:26px;height:26px;border-radius:50%;box-sizing:border-box; box-shadow:0 0 0 2px rgba(16,30,22,.35)} .cc-pending-point--after{border:4px solid #B25BE8;background:rgba(178,91,232,.18)} .cc-pending-point--before{border:4px dashed #8a8d7d;background:rgba(138,141,125,.16)} /* What the ride carries besides its tags. Stated, never sent. */ .scout-facts{margin:.7rem 0 0;display:flex;flex-direction:column;gap:.3rem} .scout-fact{margin:0;font-size:.82rem;line-height:1.45;color:var(--chrome-amber); background:rgba(232,163,61,.08);border-left:2px solid rgba(232,163,61,.5); padding:.35rem .55rem;border-radius:0 3px 3px 0} .scout-msg{margin:.7rem 0 0;font-size:.76rem;color:rgb(var(--chrome-fg) / .8)} .scout-msg.err{color:var(--chrome-amber)} .scout-count{margin:.9rem 0 .5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em; text-transform:uppercase;color:rgb(var(--chrome-fg) / .65)} .scout-list ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem} .scout-tag{position:relative;border:1px solid rgb(var(--chrome-fg) / .16);border-radius:7px;overflow:hidden; background:var(--chrome-well)} .scout-tag.done{border-color:rgba(127,207,154,.5)} .scout-tag-head{width:100%;text-align:left;background:none;border:none;color:var(--chrome-fg-solid); font-family:inherit;font-size:.8rem;padding:.5rem .6rem;cursor:pointer} .scout-tag.done .scout-tag-head{color:var(--chrome-green)} .scout-tag-body{display:none;flex-direction:column;gap:.4rem;padding:0 .6rem .6rem} .scout-tag.open .scout-tag-body{display:flex} /* A translucent background is fine for the closed control and wrong for the open list: the native popup inherits the colour, mixes it with the system white behind, and the options come out pale cream on pale grey (owner 2026-08-12). Both are opaque now, and the options say what they are on rather than inheriting. */ .scout-letter,.scout-name{background:var(--chrome-field);border:1px solid rgb(var(--chrome-fg) / .22); border-radius:5px;color:var(--chrome-fg-solid);font-family:inherit;font-size:.78rem;padding:.35rem .45rem} .scout-letter option{background:var(--chrome-field);color:var(--chrome-fg-solid)} /* The dropdown itself is site-wide: assets/styles/select-box.css + assets/js/select-box.js. */ /* A surface choice shows the line it draws on the map, on the map's cream casing. */ .scout-swatch{flex:none;width:2.2rem;height:8px;border-radius:4px; box-shadow:0 0 0 1.5px #FBF4E4,0 0 0 2.5px rgba(16,30,22,.3)} .cc-sel-btn.scout-letter{width:100%} .scout-letter option:checked{background:var(--chrome-lift);color:var(--chrome-fg-solid)} /* One control row per card (owner 2026-08-18): the name field with the camera and send ICON buttons at its right. The words live in title/aria-label. */ .scout-row{display:flex;gap:.35rem;align-items:center;min-width:0} .scout-row .scout-name{flex:1;min-width:0} .scout-approve,.scout-photo{flex:0 0 auto;width:1.9rem;height:1.9rem;padding:0; display:inline-flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer} .scout-approve{background:var(--trail);color:#fff;border:none} .scout-approve:disabled{background:rgba(127,207,154,.35);cursor:default} .scout-approve.sending{opacity:.6} .scout-photo{background:none;border:1px solid rgb(var(--chrome-fg) / .28);color:var(--chrome-fg-solid)} .scout-photo:hover{border-color:var(--trail)} .scout-photo.has{border-color:var(--trail);color:var(--trail)} /* Photos that came in a phone bundle: shown on their card, sent with it. */ .scout-bphotos{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem} .scout-bphotos-l{flex:1 0 100%;font-size:.74rem;color:rgb(var(--chrome-fg) / .75)} .scout-bphoto{position:relative;width:52px;height:52px;border-radius:5px;overflow:hidden;background:rgba(0,0,0,.25)} .scout-bphoto img{width:100%;height:100%;object-fit:cover;display:block} .scout-bphoto button{position:absolute;top:2px;right:2px;width:20px;height:20px;border:0;border-radius:50%; background:rgb(var(--chrome-glass) / .85);color:var(--chrome-fg-solid);font-size:.8rem;line-height:1;cursor:pointer} .scout-sendall{margin-top:.8rem;margin-bottom:.2rem;width:100%;background:var(--trail);color:#fff;border:none; border-radius:6px;padding:.55rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;cursor:pointer} .scout-sendall:disabled{opacity:.5;cursor:default} /* The uploader's own markup, revealed only when a row asks for a photo. */ .scout-media{margin-top:.9rem;border-top:1px solid rgb(var(--chrome-fg) / .14);padding-top:.8rem} .scout-media .drop{border:1px dashed rgb(var(--chrome-fg) / .35);border-radius:8px;padding:.7rem; text-align:center;font-size:.74rem;color:rgb(var(--chrome-fg) / .75);cursor:pointer} .scout-media .drop:hover{border-color:var(--trail)} /* media-upload.js's chips are styled INSIDE the improve template's own