/* layers */ #panel-layers{padding:0} .lg{border-bottom:1px solid var(--navy)} .lg-hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .1s} .lg-hdr:hover{background:rgba(255,255,255,.03)} .lg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .lg-name{font-size:var(--t-base);font-weight:500;flex:1} .lg-chev{color:var(--text-dim);font-size:var(--t-base);flex-shrink:0} .lg-items{display:none} .lg-items.expanded{display:block} .li{display:flex;align-items:center;gap:10px;padding:6px 14px;cursor:pointer;font-size:var(--t-sm);color:var(--text-muted)} .li:hover{background:rgba(255,255,255,.03)} .li input[type=checkbox]{accent-color:var(--teal);flex-shrink:0} /* Ticked, but a group above it is off, so it draws nothing. Keep the tick (unchecking would lose the user's state and stop the parent restoring it) and mute the row instead, so the panel reads honestly against the map. See ecoRowDraws() in layers-panel.js. */ .li-stranded{opacity:.5} .li-stranded::after{content:'not drawing';flex-shrink:0;font-size:var(--t-3xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap} .li-type{font-size:var(--t-2xs);padding:1px 5px;border-radius:var(--r-xs);flex-shrink:0} /* Shown only during a search, on rows that matched what the layer IS rather than what it is called — "Natural flowlines" under a search for "watercourse". Without it the row looks like a search bug. Position comes from DOM order (it is inserted before .li-type); no flex `order` here, because every sibling is order:0 and any negative value sends it to the front of the whole row. */ .li-typehit{font-size:var(--t-2xs);padding:1px 5px;border-radius:var(--r-xs);flex-shrink:0; background:var(--teal-dim,rgba(45,164,160,.16));color:var(--teal); border:1px solid var(--teal-faint,rgba(45,164,160,.32));white-space:nowrap} .type-fs{background:rgba(29,158,117,.15);color:var(--teal)} .type-ms{background:var(--teal-dim);color:var(--teal)} .type-tile{background:rgba(122,155,181,.15);color:var(--text-faint)} .li-wrap{padding-right:14px} /* Nested sub-group / map-image-layer folder headers — a clearly visible left rail plus a distinct header tint per level makes the nesting legible at a glance instead of reading as one flat list. */ .sg-hdr{display:flex;align-items:center;gap:7px;padding:6px 14px 6px 14px;cursor:pointer;font-size:var(--t-sm);color:var(--text-muted);background:rgba(255,255,255,.05);border-left:2px solid rgba(29,158,117,.35)} .sg-hdr:hover{background:rgba(255,255,255,.09)} .sg-chev{font-size:var(--t-md);color:var(--text-muted);width:14px;flex-shrink:0;text-align:center;transition:color .15s} .sg-hdr:hover .sg-chev{color:var(--teal)} .sg-title{flex:1;font-weight:600;color:var(--text)} .sg-children{background:rgba(0,0,0,.22);border-left:2px solid rgba(29,158,117,.35)} .sg-children .sg-children{background:rgba(0,0,0,.32);border-left-color:rgba(29,158,117,.22)} /* The black-tint nesting overlays above darken correctly against the dark-theme navy background, but on light theme's white background they wash out text-muted's contrast — and because real layer catalogs nest folders several levels deep, semi-transparent tints here would keep compounding darker at every extra level (converging toward near-black, however slowly) no matter how light each individual step looks in isolation. Use flat, OPAQUE colors instead so nesting stays visible but every level beyond the second reuses the same solid shade — depth can never make it any darker. */ [data-theme="light"] .sg-hdr{background:rgba(16,35,47,.03)} [data-theme="light"] .sg-hdr:hover{background:rgba(16,35,47,.06)} [data-theme="light"] .sg-children{background:var(--navy-dark)} [data-theme="light"] .sg-children .sg-children{background:var(--divider)} .sg-children .li-wrap{border-left:2px solid rgba(29,158,117,.16)} .li-expand-btn{ flex-shrink:0;width:18px;height:18px;border-radius:var(--r-sm); display:flex;align-items:center;justify-content:center; font-size:var(--t-md);color:var(--text-faint);cursor:pointer; transition:all .15s;line-height:1 } .li-expand-btn:hover{background:rgba(255,255,255,.08);color:var(--teal)} /* Teal at rest, unlike its neighbours: on a My-data row this is the useful action — the boundary you just uploaded is usually the thing you want to screen — while zoom and remove are housekeeping. Matches the ◎ on the Set-an-area button so the two read as one idea. */ .li-aoi-btn{color:var(--teal)} .li-aoi-btn:hover{background:var(--teal-dim);color:var(--teal)} .li-expand-btn.active{background:var(--teal-dim);color:var(--teal)} /* Per-category opacity slider (see ecoOpacityCtl in layers-panel.js). Compact enough to sit inline in the category header without pushing the toggle off the row. */ .li-op{display:flex;align-items:center;gap:5px;flex-shrink:0;margin-left:auto} .li-op-range{width:52px;height:3px;-webkit-appearance:none;appearance:none;background:var(--divider);border-radius:2px;outline:none;cursor:pointer} .li-op-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;background:var(--teal);cursor:pointer;border:none} .li-op-range::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--teal);cursor:pointer;border:none} .li-op-val{font-size:var(--t-2xs);color:var(--text-faint);width:26px;text-align:right;font-variant-numeric:tabular-nums} /* "About this layer" — the ⓘ affordance and its popover (ecoShowLayerInfo). Appended to rather than the row so the layer list's own overflow can't clip it. */ /* Label toggle. Sits with the other per-layer actions rather than on the left with the symbology caret — that caret is a disclosure, this changes what the map draws. Matches .li-info's 16px round footprint so the action cluster stays one rhythm. */ .li-lbl-btn{width:16px;height:16px;flex-shrink:0;border-radius:var(--r-xs); border:1px solid var(--divider);background:transparent;color:var(--text-faint); font-size:var(--t-2xs);font-weight:700;line-height:1;cursor:pointer;padding:0; font-family:var(--font);transition:color .15s,border-color .15s,background .15s} .li-lbl-btn:hover{color:var(--teal);border-color:var(--teal)} .li-lbl-btn.active{background:var(--teal-dim);border-color:var(--teal);color:var(--teal)} .li-lbl-btn:focus-visible{outline:2px solid var(--teal);outline-offset:1px} .li-info{width:16px;height:16px;flex-shrink:0;border-radius:50%;border:1px solid var(--divider);background:transparent; color:var(--text-faint);font-size:var(--t-2xs);font-weight:700;font-family:Georgia,serif;font-style:italic; line-height:1;cursor:pointer;padding:0;transition:color .15s,border-color .15s} .li-info:hover{color:var(--teal);border-color:var(--teal)} .layer-info-pop{position:fixed;z-index:9000;width:262px;padding:var(--s4) var(--s5) var(--s5); background:var(--navy-mid);border:1px solid var(--teal-border);border-radius:var(--r-xl);box-shadow:var(--e4); animation:fIn .15s cubic-bezier(.2,.8,.2,1) both} .lip-hdr{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--t-base);font-weight:700;color:var(--text); margin-bottom:var(--s3);line-height:1.3} .lip-x{margin-left:auto;color:var(--text-faint);cursor:pointer;flex-shrink:0;font-weight:400} .lip-x:hover{color:var(--text)} .lip-row{display:flex;justify-content:space-between;gap:var(--s4);font-size:var(--t-xs);color:var(--text-dim);margin-bottom:var(--s2)} .lip-row b{color:var(--text);font-weight:600;text-align:right} .lip-note{font-size:var(--t-xs);color:var(--text-faint);line-height:1.45;margin-top:var(--s2)} .lip-note.warn{color:var(--amber)} .li-reorder{display:inline-flex;gap:1px;flex-shrink:0;margin-left:2px} .lr-btn{font-size:var(--t-2xs);line-height:1;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-faint);cursor:pointer;border-radius:var(--r-xs);padding:0;font-family:inherit} .lr-btn:hover{background:var(--teal-dim);color:var(--teal)} .li-options{ display:none;padding:0 14px 10px 28px; margin-top:-2px;animation:liOptFade .15s ease } .li-options.expanded{display:block} @keyframes liOptFade{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}} .li-opt-row{display:flex;align-items:center;gap:8px;margin-bottom:6px} .li-opt-label{font-size:var(--t-xs);color:var(--text-dim);flex-shrink:0;width:72px} .li-opacity-slider{flex:1;height:3px;accent-color:var(--teal);cursor:pointer} .li-opacity-val{font-size:var(--t-2xs);color:var(--text-faint);width:30px;text-align:right;flex-shrink:0} /* ── Per-layer symbology ────────────────────────────────────────────────────── The caret and the class list it opens (ecoSymCaret / toggleLayerSymbology in layers-panel.js). Replaces the old .li-opt-legend block, which mounted an Esri Legend widget inside the ⋯ drawer and reported "No legend" for any layer outside its scale band. */ .li-sym-tw{flex-shrink:0;width:14px;height:14px;padding:0;border:none;background:none; color:var(--text-faint);font-size:var(--t-xs);line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;border-radius:var(--r-xs); transition:transform .15s ease,color .15s,background .15s} .li-sym-tw:hover{color:var(--teal);background:var(--teal-dim)} .li-sym-tw[aria-expanded="true"]{transform:rotate(90deg);color:var(--teal)} .li-sym-tw:focus-visible{outline:2px solid var(--teal);outline-offset:1px} /* At-rest strip on the collapsed row. Sits after the (flex:1) name so it right-aligns before the badges and never pushes the title around as class counts differ between layers. */ /* Must keep a layout box while still empty. An earlier :empty{display:none} deadlocked the whole feature: no box means IntersectionObserver never reports the strip as visible, so it is never filled, so it stays empty and stays hidden. Collapsed only once we KNOW there is nothing to show (.is-empty, set after the symbology resolves). */ .li-sym-strip{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;cursor:pointer; padding:1px 2px;border-radius:var(--r-xs);transition:background .15s; min-width:10px;min-height:10px} .li-sym-strip.is-empty{display:none} .li-sym-strip:hover{background:var(--teal-dim)} .li-sym-strip .sym-sw{width:9px;height:9px;border-radius:1.5px} .li-sym-strip .sym-sw.sym-pt{width:9px;height:9px} .li-sym-strip .sym-sw.sym-line{height:9px} .li-sym-strip .sym-more{font-size:var(--t-3xs);color:var(--text-faint); font-variant-numeric:tabular-nums;margin-left:1px} .li-sym{display:none;padding:2px 14px 6px 46px} .li-sym.open{display:block} .sym-row{display:flex;align-items:center;gap:var(--s3);padding:2px 0; font-size:var(--t-xs);color:var(--text-dim);line-height:1.35} .sym-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sym-note{font-size:var(--t-2xs);color:var(--text-faint);font-style:italic;padding:2px 0} /* Swatches carry the real fill, outline colour and outline weight, so a hairline-outlined polygon and a heavy-bordered one stay distinguishable. Sized to the row, not to the source image, so a 20px service PNG and a CSS chip line up in the same column. */ .sym-sw{width:18px;height:12px;flex-shrink:0;border-radius:2px;display:block} .sym-sw.sym-pt{width:12px;height:12px;border-radius:50%;margin:0 3px} .sym-sw.sym-img{width:18px;height:12px;object-fit:contain;image-rendering:auto} .sym-sw.sym-hollow{background:none} .sym-sw.sym-none{box-shadow:inset 0 0 0 1px var(--divider)} /* Line layers get a line, not a filled block — a watercourse is not a blue square. */ .sym-sw.sym-line{display:flex;align-items:center;background:none;box-shadow:none} .sym-sw.sym-line i{display:block;width:100%;border-radius:1px} .li-opt-fresh{ margin-bottom:8px;background:var(--navy-dark);border:1px solid var(--divider); border-radius:var(--r-md);padding:7px 9px } .li-fresh-label{font-size:var(--t-2xs);color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;display:flex;align-items:center;gap:5px} .li-fresh-date{color:var(--teal);font-size:var(--t-sm);font-weight:600;margin-bottom:3px;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .li-fresh-cadence{color:var(--text-muted);font-size:var(--t-xs);line-height:1.45} .li-opt-scale{ margin-bottom:8px;background:var(--navy-dark);border:1px solid var(--divider); border-radius:var(--r-md);padding:7px 9px } .li-opt-scale:empty{display:none;margin-bottom:0;border:none;padding:0} .li-scale-label{font-size:var(--t-2xs);color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;display:flex;align-items:center;gap:5px} .li-scale-range{color:var(--text-muted);font-size:var(--t-xs);line-height:1.45;margin-bottom:5px} .li-scale-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:600;padding:2px 7px;border-radius:var(--r-xl)} .li-scale-badge.in-range{background:rgba(29,158,117,.18);color:var(--teal)} .li-scale-badge.out-range{background:var(--amber-dim);color:var(--amber)} .lflag{color:var(--red);font-size:var(--t-xs);flex-shrink:0} .li-zoom-flag{font-size:var(--t-2xs);flex-shrink:0;opacity:.75} #tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:12px 14px;border-bottom:1px solid var(--divider)} .tc{border-radius:var(--r-md);padding:8px 4px;text-align:center;cursor:pointer;border:1px solid transparent;transition:border-color .15s} .tc:hover{border-color:var(--text-dim)} .tc-icon{font-size:16px;display:block;margin-bottom:3px} .tc-lbl{font-size:var(--t-2xs);font-weight:500;display:block;margin-bottom:2px} .tc-cnt{font-size:var(--t-xl);font-weight:700;display:block} .tc-sub{font-size:var(--t-2xs);font-weight:400;display:block;margin-top:1px;opacity:0.7} .tc-none .tc-sub{color:var(--text-faint)} .tc-green .tc-sub{color:var(--green)} .tc-amber .tc-sub{color:var(--amber)} .tc-red .tc-sub{color:var(--red)} .tc-none{background:var(--navy-mid)} .tc-none .tc-icon,.tc-none .tc-lbl,.tc-none .tc-cnt{color:var(--text-faint)} .tc-green{background:var(--green-bg);border-color:rgba(59,109,17,.3)} .tc-green .tc-icon,.tc-green .tc-lbl,.tc-green .tc-cnt{color:var(--green)} .tc-amber{background:var(--amber-dim);border-color:var(--amber-border)} .tc-amber .tc-icon,.tc-amber .tc-lbl,.tc-amber .tc-cnt{color:var(--amber)} .tc-red{background:var(--red-bg);border-color:var(--red-border)} .tc-red .tc-icon,.tc-red .tc-lbl,.tc-red .tc-cnt{color:var(--red)} /* Scanning-reveal: tiles pulse while their category's layers are still being queried, then pop once real counts land — real progressive counts, not a choreographed fake stagger. */ .tc-scanning{background:var(--navy-mid);position:relative;overflow:hidden} .tc-scanning .tc-icon,.tc-scanning .tc-lbl,.tc-scanning .tc-cnt,.tc-scanning .tc-sub{color:var(--text-faint)} .tc-scanning::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);animation:tcScan 1.4s ease-in-out infinite} @keyframes tcScan{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}} .tc-pop{animation:tcPop .45s cubic-bezier(.34,1.56,.64,1)} @keyframes tcPop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}} /* Category tile doubles as a map-layer toggle — dimmed when that category is hidden on the map. */ .tc-map-off{opacity:.5} /* GBIF species records panel */ #gbif-panel{display:none;position:absolute;top:58px;left:12px;z-index:6;width:330px;max-height:calc(100% - 110px);overflow-y:auto;background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--divider);border-radius:var(--r-lg);box-shadow:var(--e4)} #gbif-panel.visible{display:block;animation:fIn .2s cubic-bezier(.2,.8,.2,1) both} .gbif-caveat{font-size:var(--t-xs);color:var(--amber,#EF9F27);background:var(--amber-bg,rgba(239,159,39,.1));border:1px solid var(--amber-border,rgba(239,159,39,.3));border-radius:var(--r-md);padding:6px 8px;line-height:1.5;margin-bottom:10px} .gbif-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap} .gbif-actions .qimg-cir-row{font-size:var(--t-xs);margin-top:0} #gbif-list{max-height:360px;overflow-y:auto;border:1px solid var(--divider);border-radius:var(--radius)} .gbif-empty{font-size:var(--t-sm);color:var(--text-faint);padding:14px 10px;text-align:center} .gbif-summary{font-size:var(--t-sm);color:var(--text-muted);padding:8px 9px;border-bottom:1px solid var(--divider);background:rgba(255,255,255,.02);line-height:1.5} .gbif-summary b{color:var(--text);font-weight:700} .gbif-row{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.04)} .gbif-row:last-child{border-bottom:none} .gbif-row:hover{background:rgba(255,255,255,.03)} .gbif-row.selected{background:rgba(255,255,255,.045)} .gbif-check{display:flex;align-items:center;gap:7px;flex-shrink:0;padding-top:2px;cursor:pointer} .gbif-check input{margin:0;cursor:pointer;accent-color:var(--teal)} .gbif-swatch{width:10px;height:10px;border-radius:var(--r-xs);flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.3);transition:opacity .15s ease} .gbif-row:not(.selected) .gbif-swatch{opacity:.35} .gbif-row-body{flex:1;min-width:0;cursor:pointer} .gbif-row-top{display:flex;align-items:baseline;gap:6px} .gbif-row-name{font-size:var(--t-base);font-weight:600;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gbif-row-count{font-size:var(--t-xs);color:var(--text-faint);flex-shrink:0} .gbif-row-common{font-size:var(--t-xs);color:var(--text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gbif-row-meta{font-size:var(--t-xs);color:var(--text-dim);margin-top:4px;display:flex;gap:11px;flex-wrap:wrap;row-gap:3px} .gbif-meta-item{display:inline-flex;align-items:baseline;gap:4px} .gbif-meta-label{color:var(--text-faint);text-transform:uppercase;font-size:var(--t-2xs);letter-spacing:.05em;font-weight:600} .gbif-badge{padding:1px 5px;border-radius:var(--r-xs);background:rgba(255,255,255,.06)} .gbif-badge.low-conf{color:var(--amber,#EF9F27)} /* ── Screen step: category switches ────────────────────────────────────────── Five rows replace the 248-node tree as the default way to choose what gets checked (see buildScreenCategories in layers-panel.js). Sized off the shared type/space tokens so these match Define's tiles rather than introducing a third row height. */ #screen-cats{padding:var(--s3) var(--s4) var(--s2);display:flex;flex-direction:column;gap:var(--s2)} .scat-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4); background:var(--surface-tint);border:1px solid var(--divider);border-radius:var(--r-lg); transition:border-color .15s,background .15s} .scat-row.on{border-color:var(--teal-border);background:var(--teal-dim)} .scat-ic{width:24px;height:24px;flex:0 0 auto;border-radius:7px;color:#fff} .scat-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .scat-name{font-size:var(--t-md);font-weight:700;color:var(--text)} /* One line only — dataset names are long, and a wrapping subtitle would make the rows uneven and undo the point of the compact list. */ /* Descriptor may truncate; the count never does. */ .scat-sub{display:flex;gap:4px;font-size:var(--t-2xs);color:var(--text-dim);min-width:0} .scat-eg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .scat-eg::after{content:" —"} .scat-n{flex:0 0 auto;font-variant-numeric:tabular-nums} /* Switch. A button, not a checkbox, so role="switch" + aria-checked carry the state to screen readers; the visual is the ::after knob sliding across the track. */ .scat-sw{flex:0 0 auto;width:34px;height:19px;padding:0;border:none;border-radius:var(--r-pill); background:var(--navy-light);cursor:pointer;position:relative;transition:background .16s ease} .scat-sw::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%; background:#fff;box-shadow:var(--e1);transition:transform .16s ease} .scat-sw[aria-checked="true"]{background:var(--teal)} .scat-sw[aria-checked="true"]::after{transform:translateX(15px)} .scat-sw:focus-visible{outline:2px solid var(--teal);outline-offset:2px} /* Explore shares this panel but is a different job: browse the layer library, no study area, no run. Everything the Screen step added is Assess-only — hide it there and give the library back the full panel, exactly as it was before the Screen rebuild. (switchMode in topbar.js opens the disclosure to match.) */ body[data-mode="explore"] #screen-cats, body[data-mode="explore"] #screen-cta{display:none} /* Category glyphs. The icon tile was an empty coloured box; the concept shows an actual pictogram per category. Stroke inherits currentColor, set per row from the taxonomy colour, so icon and swatch stay one decision. */ .scat-ic{display:flex;align-items:center;justify-content:center} .scat-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round} .scat-lead{font-size:var(--t-xs);color:var(--text-dim);padding:0 var(--s1) var(--s1)} /* Define's CTA is inset because #panel-tools has padding:12px. #panel-layers deliberately has none — the layer tree is full-bleed, its rows carry their own insets — so this button has to supply its own margin or it runs hard into both panel edges and reads as panel chrome rather than a control sitting inside the panel. Matches Define's 12px so the two steps end identically. width:auto (not the inherited 100%) so the column flex stretch sizes it minus the margins instead of overflowing by their width. */ #screen-cta{width:auto;margin:var(--s5) var(--s5) var(--s6)} /* ── Screen: expandable categories ─────────────────────────────────────────── Replaces the separate "Fine-tune individual layers" tree. Each category owns its own layers: foldTreeIntoCategories() moves the already-rendered group node in here, so the opacity slider, reorder arrows and per-layer controls are the same elements as before, not a second implementation that could drift. */ .scat-item{border:1px solid var(--divider);border-radius:var(--r-lg);background:var(--surface-tint); overflow:hidden;transition:border-color .15s} .scat-item .scat-row{background:none;border:none;border-radius:0} .scat-item:has(.scat-row.on){border-color:var(--teal-border);background:var(--teal-dim)} .scat-body{display:none;border-top:1px solid var(--divider);background:var(--navy-dark)} .scat-item.open .scat-body{display:block} /* The relocated group already carries its own heading, so drop the outer chrome it had while it lived in the flat tree. */ .scat-body > .lg{margin:0;border:none} .scat-exp{flex:0 0 auto;width:20px;height:20px;padding:0;border:none;background:none; color:var(--text-faint);font-size:var(--t-lg);line-height:1;cursor:pointer; transition:transform .16s ease,color .15s} .scat-exp:hover{color:var(--text)} .scat-item.open .scat-exp{transform:rotate(90deg)} .scat-exp:focus-visible{outline:2px solid var(--teal);outline-offset:2px} /* Reference row: map context, not a constraint category. Muted so it doesn't read as a sixth thing being screened. */ .scat-item.ctx{background:none} .scat-item.ctx .scat-name{color:var(--text-muted);font-weight:600} .scat-tag{margin-left:6px;padding:1px 5px;border-radius:var(--r-xs);background:var(--surface-tint); border:1px solid var(--divider);font-size:var(--t-3xs);font-weight:600;color:var(--text-faint); text-transform:uppercase;letter-spacing:.06em;vertical-align:1px} /* ── Screen: search, reset, and what Assess hides ──────────────────────────── Bulk buttons and My data are Explore's library furniture. In Assess the category switches/chevrons already do all-on/off and expand, and My data's own copy says uploads are not included in the assessment — so an uploader inside "choose what to check" would invite the wrong assumption. #layer-list-container is emptied by the fold, so hiding it here removes only My data and the now-orphaned "Reference layers" heading. !important is load-bearing here, not laziness: #layer-bulk-row carries an inline style="display:flex" in index.html, and an inline declaration outranks any stylesheet selector without it. */ body[data-mode="assess"] #layer-bulk-row, body[data-mode="assess"] #layer-listmodes, body[data-mode="assess"] #layer-list-container{display:none!important} /* ── Explore: GIS panel chrome ──────────────────────────────────────────────── Two rows above the tree, one question each, the split ArcGIS Pro's Contents pane makes: the tab strip changes how the list is SORTED, the tool row ACTS on layers. Keeping them apart is what stops the top of the panel reading as one undifferentiated button soup. */ #layer-listmodes{display:flex;align-items:center;gap:1px;padding:7px var(--s4) 0; background:var(--navy-dark);border-bottom:1px solid var(--divider);flex-shrink:0} .llm-tab{width:32px;height:29px;display:grid;place-items:center;border:0;background:none; color:var(--text-faint);cursor:pointer;border-radius:var(--r-sm) var(--r-sm) 0 0; border-bottom:2px solid transparent;transition:color .14s,background .14s} .llm-tab svg{width:15px;height:15px} .llm-tab:hover{color:var(--text);background:var(--surface-tint)} .llm-tab[aria-selected="true"]{color:var(--teal);border-bottom-color:var(--teal)} .llm-tab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px} /* Names the active mode, because five near-identical glyphs cannot say "drawing order". */ .llm-label{margin-left:auto;padding-bottom:6px;font-size:var(--t-2xs);font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)} #layer-bulk-row{display:flex;align-items:center;gap:2px;padding:6px var(--s4); background:var(--navy-dark);border-bottom:1px solid var(--divider);flex-shrink:0} .lt-btn{width:27px;height:27px;display:grid;place-items:center;border:0;background:none; color:var(--text-dim);cursor:pointer;border-radius:var(--r-sm);transition:.14s} .lt-btn svg{width:15px;height:15px} .lt-btn:hover{background:var(--navy-mid);color:var(--text)} /* Set by styleAllOnOffBtn when the map genuinely is all-on or all-off. A mixed state highlights neither, which is the honest reading. */ .lt-btn.active{background:var(--teal-dim);color:var(--teal)} .lt-btn:focus-visible{outline:2px solid var(--teal);outline-offset:-2px} .lt-sep{width:1px;height:16px;background:var(--divider);margin:0 4px;flex:none} .lt-count{margin-left:auto;font-size:var(--t-2xs);color:var(--text-faint); font-variant-numeric:tabular-nums;white-space:nowrap} /* Visibility mode. :has() is already relied on in this file (.scat-item:has(.scat-row.on)), so this needs no JS to keep the filter in step with the checkboxes — unticking a layer removes its row immediately, because the selector reads the live checked state. */ #layer-list-container[data-listmode="vis"] .li-wrap:has(input[type="checkbox"]:not(:checked)){display:none} #layer-list-container[data-listmode="vis"] .lg:has(.lg-count.none){display:none} /* Data-source mode: how many layers the service publishes into this map, beside the live "N ON". Two different facts — how much is here, and how much of it is switched on. */ .lg-src-n{flex-shrink:0;font-size:var(--t-2xs);color:var(--text-faint); font-variant-numeric:tabular-nums;margin-left:var(--s2)} /* Service paths are long and the meaningful part is the tail, so let them wrap rather than truncating "…/MattersOfStateEnvironmentalSignificance" down to "Environment/Matters…". */ #layer-list-container[data-listmode="src"] .lg-name{white-space:normal;line-height:1.3} /* Search feedback on the rows. A category with no match dims rather than disappearing — vanishing reads as "that data isn't in this app". */ .scat-hits{margin-left:6px;padding:1px 5px;border-radius:var(--r-xs);background:var(--teal-dim); border:1px solid var(--teal-border);font-size:var(--t-3xs);font-weight:600;color:var(--teal); text-transform:none;letter-spacing:0} .scat-item.nomatch{opacity:.45} .scat-item.nomatch .scat-hits{background:var(--surface-tint);border-color:var(--divider);color:var(--text-faint)} .scat-item.searching .scat-exp{visibility:hidden} /* search owns expansion while active */ /* Secondary by design — the primary actions are the switches and the CTA. */ .scat-reset{display:block;margin:var(--s2) auto 0;padding:3px var(--s5);background:none;border:none; color:var(--text-dim);font-family:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer; text-decoration:underline;text-underline-offset:2px} .scat-reset:hover{color:var(--text)} /* "Start with a theme" (#explore-themes / .eth-*) lived here. Removed along with js/explore-themes.js — the library it was a front door to now has its own list-mode strip, search, per-category counts and per-layer symbology, so the tiles had become a fifth way to pick layers stacked above four others. */ /* ── Area of interest ───────────────────────────────────────────────────────── Explore only, above the layer library. The CTA deliberately does NOT use .define-cta: that class is Screen's "Run the screen" and Define's continue button, and in this app a full-width gradient bar means "you're finished here, move to the next step". This button does the opposite — it acts on the map you're already looking at — so it borrows the language of #map-focus-btn and the basemap chips instead: outlined, quiet, a tool rather than a door. */ body[data-mode="assess"] #aoi-block{display:none} /* Measured against its siblings rather than eyeballed. Every other block in this panel closes with a 1px divider — .panel-hdr, #layer-listmodes, #layer-bulk-row all do — and this one had neither a bottom padding nor a border, so the buttons ran straight into the tab strip below. The bottom gap used to come from the CTA's own `margin: … 14px`, a leftover from when it sat at the foot of the panel; removing that margin removed the only thing holding the two apart. Horizontal inset is --s6 (14px) to match .panel-hdr's, so the buttons align with the heading above them instead of sitting 2px inside it. */ #aoi-block{padding:var(--s5) var(--s6);border-bottom:1px solid var(--divider)} /* align-items:stretch is the default, but it is stated because it is load-bearing here: the two buttons must be the SAME height, and leaving it implicit is how the Draw button ended up 69px tall beside a 43px CTA. */ .aoi-cta-row{display:flex;align-items:stretch;gap:var(--s2)} /* Drawing is the second way in, not a peer — clicking a spot is quicker and is what most sessions want — so it stays auto-width while the CTA takes the rest. Everything else about the box is deliberately IDENTICAL to .aoi-cta: same padding, same type size, same centring. It was 9px text in a block box next to 12px text in a flex box, which is why it read as belonging to no rule at all. */ .aoi-draw{flex:0 0 auto;display:flex;align-items:center;justify-content:center; padding:var(--s4) var(--s5);background:var(--surface-tint); border:1px solid var(--divider);border-radius:var(--r-lg);color:var(--text-dim); font-family:inherit;font-size:var(--t-md);font-weight:600;cursor:pointer;white-space:nowrap; transition:border-color .15s,color .15s,background .15s} .aoi-draw:hover{border-color:var(--teal-border);color:var(--text);background:var(--teal-dim)} .aoi-draw:focus-visible{outline:2px solid var(--teal);outline-offset:2px} /* Mid-sketch the map is swallowing clicks — the same amber "you are in a mode" signal the place-a-point button uses, so the two read as one system. */ .aoi-draw.arming{background:var(--amber-dim);border-color:var(--amber);color:var(--amber)} .aoi-cta{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:var(--s3); padding:var(--s4) var(--s5);background:var(--surface-tint);border:1px solid var(--divider); border-radius:var(--r-lg);color:var(--text-muted);font-family:inherit;font-size:var(--t-md); font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s} .aoi-cta:hover{border-color:var(--teal-border);color:var(--text);background:var(--teal-dim)} .aoi-cta:focus-visible{outline:2px solid var(--teal);outline-offset:2px} .aoi-cta-ic{font-size:var(--t-lg);line-height:1;color:var(--teal)} /* Armed: the map is swallowing clicks, which is a mode the user must be able to see they are in. */ .aoi-cta.arming{background:var(--amber-dim);border-color:var(--amber);color:var(--amber)} .aoi-cta.arming .aoi-cta-ic{color:var(--amber)} /* The card. Its absence is what used to force the jump to Assess — an area with nowhere to live. Everything the area can do is here, so the area reads as a thing you are working with rather than a mark left on the map. */ #aoi-card{margin-top:var(--s4);padding:var(--s4) var(--s5) var(--s5);background:var(--navy-mid); border:1px solid var(--teal-border);border-radius:var(--r-lg)} .aoi-hdr{display:flex;align-items:center;gap:var(--s3)} .aoi-name{flex:1;font-size:var(--t-sm);font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--teal)} .aoi-x{width:18px;height:18px;flex-shrink:0;padding:0;border:none;background:none; color:var(--text-faint);font-size:var(--t-sm);line-height:1;cursor:pointer;border-radius:var(--r-xs)} .aoi-x:hover{color:var(--text);background:var(--surface-tint)} .aoi-sub{font-size:var(--t-2xs);color:var(--text-dim);margin-top:2px; font-variant-numeric:tabular-nums} .aoi-buf{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4)} .aoi-buf .buf-range{flex:1;min-width:0} .aoi-buf-out{flex-shrink:0;width:62px;text-align:right;font-size:var(--t-2xs); color:var(--text-dim);font-variant-numeric:tabular-nums} .aoi-acts{display:flex;gap:var(--s2);margin-top:var(--s4)} .aoi-act{flex:1;padding:var(--s2) var(--s3);background:none;border:1px solid var(--divider); border-radius:var(--r-sm);color:var(--text-dim);font-family:inherit;font-size:var(--t-2xs); font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s} .aoi-act:hover{border-color:var(--teal);color:var(--teal)} .aoi-act:focus-visible{outline:2px solid var(--teal);outline-offset:1px} /* Focus is a sustained state, not a one-shot — it has to look switched on while it is. */ .aoi-act.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal)} /* The commitment. The only element here that gets the accent fill, because it is the one action that leaves Explore. Hidden once committed — there is nothing left to commit to. */ .aoi-assess{flex:none;width:100%;margin-top:var(--s3);padding:var(--s3); background:var(--brand-grad);border:none;color:#fff;font-size:var(--t-sm)} .aoi-assess:hover{filter:brightness(1.07);color:#fff} #aoi-inside{margin-top:var(--s3)} #aoi-inside:empty{display:none} .aoi-row{display:flex;align-items:baseline;gap:var(--s3);padding:2px 0;font-size:var(--t-2xs); color:var(--text-dim)} .aoi-rt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .aoi-row b{flex-shrink:0;color:var(--text);font-variant-numeric:tabular-nums} .aoi-note{font-size:var(--t-3xs);color:var(--text-faint);line-height:1.4;padding-top:var(--s2)} /* ── Explore → Assess bridge ────────────────────────────────────────────────── The #explore-assess-cta rules that lived here are GONE. They were written when this button was a .define-cta pinned to the BOTTOM of the panel, and they outlived that layout: margin: 12px 12px 14px — sized the button's own slot at the end of the panel Left in place after the button moved into #aoi-block, that margin made the CTA's outer box 43 + 12 + 14 = 69px tall. The flex row stretched to 69, the Draw button stretched with it, and the left inset became 12 (block padding) + 12 (margin) = 24 against 12 on the right. That is why the pair looked like it followed no rule — it was following one, for a layout that no longer exists. The mode gating and the armed state are handled by #aoi-block and .aoi-cta.arming above; .dc-arr went with the arrow the button no longer has. */ /* Crosshair over the whole map while armed — the cursor is what actually tells you the next click is being captured, since the button is off-screen once you look at the map. */ body.assess-here-arming #viewDiv, body.assess-here-arming #viewDiv canvas{cursor:crosshair !important} /* ── Layer provenance line ──────────────────────────────────────────────────── Custodian + currency under each layer name. Deliberately quiet: it must be readable on demand without competing with the layer title, which is what you actually scan for. */ .li-prov{display:flex;align-items:baseline;gap:5px;font-size:var(--t-3xs);color:var(--text-faint); line-height:1.3;padding:0 14px 5px 30px;margin-top:-3px} .lp-agency{color:var(--text-dim);font-weight:600;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:58%} .lp-sep{opacity:.5;flex-shrink:0} /* Explore only. Assess drives layer choice through the category switches, where 300 provenance lines would rebuild exactly the density that step was rewritten to remove. */ body[data-mode="assess"] .li-prov{display:none} /* ── Layer library: cards, not bands ────────────────────────────────────────── The library rendered as full-bleed rows divided only by 1px borders, so every block in the panel butted against its neighbour at 0px while the sections above had real padding — the inconsistent rhythm. The concept treats each category as its own inset card with a gutter between, which also gives the "N ON" count somewhere to sit. Scoped to the library container so the same .lg/.li classes used elsewhere are untouched. */ #layer-list-container{padding:0 var(--s5) var(--s5)} #layer-list-container .lg{background:var(--navy-mid);border:1px solid var(--divider); border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s4)} #layer-list-container .lg:last-child{margin-bottom:0} /* Rows breathe a little more than the old 6px, and the last one clears the card edge. */ #layer-list-container .li{padding:var(--s3) var(--s5)} #layer-list-container .lg-items{padding-bottom:var(--s2)} /* The nesting rails were drawn against a flush band; inside a card they need the same inset. */ #layer-list-container .li-wrap{padding-right:var(--s5)} /* Header strip. The card had a border but its header was the same fill as the rows, so the card read as one undifferentiated block — the concept separates them, which is what makes the category name scan as a label rather than as the first row. --surface-tint is the existing token for exactly this "same surface, one step off" job and is re-themed for light mode; a literal rgba here would read as dirt on a light ground (rule 6b). No :hover fill: the base .lg-hdr:hover tint is overridden by this rule's specificity, and the controls fading in below are a stronger hover affordance than a 3% background shift. */ #layer-list-container .lg-hdr{padding:var(--s3) var(--s5);background:var(--surface-tint); border-bottom:1px solid var(--divider)} #layer-list-container .lg-name{font-size:var(--t-sm);font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--text-muted)} #layer-list-container .lg-count{flex-shrink:0;font-size:var(--t-xs);font-weight:700; letter-spacing:.06em;color:var(--teal)} /* Reference/Foundation-data card only: a second line under the header stating what the group is and that it isn't screened — the same copy and "Reference" tag the Assess/Screen panel's Supporting-context row already carries (SCAT_NAME/DESC.ctx), so the two panels describe this group identically rather than drifting into two different explanations of one thing. */ #layer-list-container .lg-desc{padding:0 var(--s5) var(--s3);font-size:var(--t-2xs); color:var(--text-faint);line-height:1.4} /* Category opacity and draw-order live in the header, but the concept's header holds only the name and the count — four controls at rest turned a label into a toolbar. Same resolution as the running legend's .mlg-ord: calm at rest, controls on hover/focus, nothing relocated and no affordance lost. Keyboard users get them via :focus-within, so they are not mouse-only. */ #layer-list-container .lg-hdr .li-op, #layer-list-container .lg-hdr .li-reorder{opacity:0;transition:opacity .12s} #layer-list-container .lg-hdr:hover .li-op, #layer-list-container .lg-hdr:hover .li-reorder, #layer-list-container .lg-hdr:focus-within .li-op, #layer-list-container .lg-hdr:focus-within .li-reorder{opacity:1} /* ── ABS community context in the AOI card (local prototype) ────────────────── */ .abs-block{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--divider)} .abs-block:first-child{margin-top:0;padding-top:0;border-top:none} .abs-h{font-size:var(--t-3xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)} .abs-name{font-size:var(--t-base);font-weight:600;color:var(--text);margin-top:2px} .abs-figs{display:flex;gap:var(--s4);margin-top:var(--s2)} .abs-figs span{display:flex;flex-direction:column;font-size:var(--t-3xs);color:var(--text-faint);line-height:1.3} .abs-figs b{font-size:var(--t-lg);font-weight:700;color:var(--teal);line-height:1.1} .abs-ages{margin-top:var(--s3);display:flex;flex-direction:column;gap:3px} .abs-age{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-2xs);color:var(--text-muted)} .abs-age-l{flex:0 0 74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .abs-age-bar{flex:1;height:5px;background:var(--navy-mid);border-radius:3px;overflow:hidden} .abs-age-bar i{display:block;height:100%;background:var(--teal);border-radius:3px} .abs-age-v{flex:0 0 46px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-faint)} /* ── ABS category menu ──────────────────────────────────────────────────────── Reuses the glass/blur idiom of the map-tools menu so it reads as the same kind of control, rather than a raw