/* Leash Lookout 1.6 — a readable notebook beside a useful map. */
:root { --rail-width: 352px; --top-height: 84px; --bg: #fbfaf7; --bg-2: #fff; --fg: #292633; --muted: #726c7c; --line: #e5e0e9; --accent: #6c4ccf; --accent-soft: #eee9fa; --shadow: 0 8px 28px #29213712, 0 1px 4px #2921370b; }
body { font-size: 16px; }
.ui-icon { width: 21px; height: 21px; flex: none; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -60px; left: 12px; z-index: 4000; padding: 10px 20px; background: var(--fg); color: var(--bg); border-radius: 8px; }
.skip-link:focus { top: 8px; }
#app { display: grid; grid-template-columns: var(--rail-width) minmax(0,1fr); grid-template-rows: var(--top-height) minmax(0,1fr); }
#topbar { grid-area: 1 / 1 / 2 / 3; padding: 16px 25px; gap: 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.brand { width: calc(var(--rail-width) - 41px); flex: none; gap: 11px; }
.brand .paw { width: 42px; height: 44px; border-radius: 14px 14px 14px 5px; background: var(--accent); }
.brand .paw svg { width: 25px; height: 25px; }
.brand h1 { font-size: 29px; letter-spacing: -.7px; }
.brand-tag { display: block; font-size: 11.5px; letter-spacing: .025em; color: var(--muted); margin-top: 5px; }
#topbar .search { max-width: 620px; flex-basis: 260px; margin-right: auto; }
.search input { min-height: 46px; border-radius: 12px; padding: 11px 40px 11px 41px; background: var(--bg); font-size: 15px; }
.search svg { left: 14px; width: 18px; height: 18px; }
.search kbd { position: absolute; right: 12px; top: 14px; font-family: inherit; color: var(--muted); font-size: 12px; border: 1px solid var(--line); width: 20px; height: 20px; line-height: 17px; text-align: center; border-radius: 4px; }
.search input:focus { background: var(--bg-2); }
.header-status { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.header-status svg { width: 14px; height: 14px; }
.ibtn { min-width: 44px; height: 44px; border-radius: 12px; background: var(--bg-2); border-color: transparent; }
.ibtn:hover { background: var(--accent-soft); }
.ibtn svg { width: 20px; height: 20px; stroke-width: 1.7; }
.header-neighbors { width: auto; gap: 8px; padding: 0 11px; }
.header-btn-label { font-size: 13px; font-weight: 500; }
.text-size-btn { font-size: 18px; font-weight: 500; }
.text-size-btn span { font-size: 13px; align-self: flex-start; padding-top: 8px; }
.text-size-btn[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); }
#workspaceRail { grid-area: 2 / 1 / 3 / 2; min-height: 0; background: var(--bg); border-right: 1px solid var(--line); z-index: 100; overflow: hidden; }
.rail-scroll { height: 100%; overflow-y: auto; padding: 27px 23px 20px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.eyebrow { display: block; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .105em; line-height: 1.5; }
.rail-heading h2 { font-family: var(--font-display); font-size: 32px; line-height: 1.13; font-weight: 500; letter-spacing: -.6px; margin: 12px 0 12px; }
.rail-heading h2 em { font-weight: 500; color: var(--accent); }
.rail-heading p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.rail-area { display: flex; align-items: center; gap: 10px; padding: 14px 0 18px; border-top: 1px solid var(--line); }
.rail-area > svg { color: var(--accent); width: 21px; height: 21px; }
.rail-area > div { min-width: 0; flex: 1; }
.rail-area strong { display: block; font-size: 14px; font-weight: 500; }
.rail-area span { color: var(--muted); font-size: 11.5px; display: block; margin-top: 2px; }
.quiet-icon { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--muted); }
.quiet-icon:hover { background: var(--accent-soft); color: var(--accent); }
.rail-tabs { display: flex; padding: 4px; gap: 2px; background: #efedf1; border-radius: 12px; margin: 0 0 22px; }
.rail-tabs button { flex: 1; min-height: 39px; font-size: 12px; color: var(--muted); font-weight: 500; border-radius: 8px; }
.rail-tabs button.selected { background: var(--bg-2); color: var(--fg); box-shadow: 0 1px 4px #2921370e; }
.notebook-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.notebook-stats button { position: relative; text-align: left; border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: var(--bg-2); min-height: 95px; }
.notebook-stats button:hover { border-color: var(--accent); }
.notebook-stats strong { display: block; font-size: 30px; line-height: 1.1; font-family: var(--font-display); font-weight: 500; }
.notebook-stats button > span:last-child { display: block; font-size: 12px; color: var(--muted); margin-top: 7px; }
.stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; position: absolute; top: 13px; right: 12px; border-radius: 8px; }
.stat-icon svg { width: 15px; height: 15px; }
.saved-icon { background: var(--accent-soft); color: var(--accent); }
.sighting-icon { background: #fcf1db; color: #9c6b16; }
.walk-card { background: #6b4bc7; color: white; border-radius: 17px; padding: 20px 18px 14px; position: relative; overflow: hidden; box-shadow: 0 6px 14px #6c4ccf13; }
.walk-card::before { content: ''; position: absolute; width: 130px; height: 130px; border: 1px solid #ffffff14; border-radius: 50%; top: 7px; right: -70px; pointer-events: none; box-shadow: 0 0 0 19px #ffffff05, 0 0 0 40px #ffffff04; }
.walk-card-top { display: flex; gap: 5px; align-items: center; justify-content: space-between; position: relative; }
.walk-card .eyebrow { font-size: 10.5px; color: #eee8ff; letter-spacing: .09em; }
.walk-card-top svg { width: 25px; height: 25px; color: #e2d7ff; }
.walk-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -.3px; margin: 9px 0 8px; }
.walk-card p { font-size: 13px; line-height: 1.55; color: #f1edff; margin: 0 0 17px; }
.walk-action { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 45px; width: 100%; border-radius: 10px; background: #fff; color: #5c3ab8; font-weight: 600; font-size: 14px; position: relative; }
.walk-action .ui-icon:last-child { margin-left: auto; width: 17px; }
.walk-action .ui-icon:first-child { width: 19px; margin-left: 14px; }
.walk-action .ui-icon:last-child { margin-right: 14px; }
.walk-action:hover { background: #f3efff; }
.walk-card-foot { display: flex; gap: 5px; align-items: center; justify-content: center; margin-top: 11px; font-size: 11.5px; color: #ede7ff; }
.walk-card-foot svg { width: 11px; height: 11px; }
#walkCardMetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 18px; }
#walkCardMetrics strong { font-size: 29px; font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 500; display: block; }
#walkCardMetrics span { display: block; font-size: 12px; color: #ede7ff; }
.rail-section-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 23px 0 12px; }
.rail-section-title h3 { margin: 0; font-size: 14px; font-weight: 500; }
.rail-section-title button { color: var(--accent); font-size: 12px; display: flex; align-items: center; gap: 2px; min-height: 32px; }
.rail-section-title svg { width: 13px; height: 13px; }
.notebook-empty { padding: 18px 15px; border: 1px dashed #d4cedf; border-radius: 12px; text-align: center; background: var(--bg-2); }
.notebook-empty .empty-icon { display: flex; align-items: center; justify-content: center; width: 41px; height: 41px; margin: 0 auto 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.notebook-empty .empty-icon svg { width: 21px; height: 21px; }
.notebook-empty strong { display: block; font-size: 14px; font-weight: 500; }
.notebook-empty p { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 6px 0 0; }
.notebook-empty button { margin-top: 12px; padding: 8px 13px; min-height: 40px; background: var(--accent-soft); color: var(--accent); border-radius: 9px; font-size: 13px; font-weight: 500; }
.add-note-btn { display: flex; align-items: center; justify-content: center; width: 100%; gap: 7px; border: 1px solid var(--line); background: var(--bg-2); border-radius: 10px; min-height: 46px; font-size: 13px; font-weight: 500; color: var(--accent); margin-top: 12px; }
.add-note-btn:hover { background: var(--accent-soft); border-color: #b9a8e8; }
.add-note-btn svg { width: 18px; height: 18px; }
.utility-title { margin-top: 25px; }
.utility-link { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 13px 1px; border-bottom: 1px solid var(--line); }
.utility-link > svg:first-child { color: var(--muted); width: 20px; height: 20px; }
.utility-link > svg:last-child { width: 14px; height: 14px; color: var(--muted); }
.utility-link span { flex: 1; min-width: 0; }
.utility-link b { font-size: 13px; font-weight: 500; display: block; }
.utility-link small { color: var(--muted); font-size: 11.5px; display: block; margin-top: 3px; }
.utility-link:hover b { color: var(--accent); }
.rail-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.rail-footer button { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; font-size: 11.5px; color: var(--muted); }
.rail-footer button:hover { color: var(--accent); }
.rail-footer svg { width: 14px; height: 14px; }
.rail-footer-note { width: 100%; font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--muted); margin-top: 5px; }
.panel-title { display: flex; align-items: center; gap: 9px; justify-content: space-between; }
.panel-title h3 { font-family: var(--font-display); font-size: 28px; font-weight: 500; margin: 0; }
.panel-description { color: var(--muted); font-size: 13px; margin: 7px 0 17px; line-height: 1.55; }
.small-add { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.rail-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.rail-search svg { width: 17px; height: 17px; color: var(--muted); }
.rail-search input { border: 0; background: transparent; min-width: 0; width: 100%; padding: 12px 0; font-size: 14px; outline-offset: 0; }
.saved-filters { display: flex; gap: 6px; margin: 12px 0 17px; }
.saved-filters button { min-height: 38px; padding: 6px 10px; font-size: 12px; border: 1px solid var(--line); border-radius: 8px; }
.saved-filters button.selected { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.list-summary { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin: 0 0 8px; gap: 6px; }
.list-summary select { border: 0; background: transparent; color: var(--muted); min-height: 36px; font-size: 12px; padding-right: 3px; max-width: 145px; }
.notebook-list { display: flex; flex-direction: column; gap: 9px; }
.place-card { display: flex; gap: 11px; width: 100%; padding: 13px; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; align-items: flex-start; }
.place-card:hover { border-color: #b5a4df; box-shadow: 0 3px 8px #29213708; }
.place-card .card-symbol { display: flex; align-items: center; justify-content: center; width: 35px; height: 37px; background: var(--accent-soft); border-radius: 9px; flex: none; font-size: 22px; }
.place-card .card-symbol.caution { background: var(--warn-soft); }
.place-card .card-content { flex: 1; min-width: 0; }
.place-card .card-title { display: block; font-weight: 500; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.place-card .card-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.place-card .card-meta { display: flex; flex-wrap: wrap; gap: 4px 7px; color: var(--muted); font-size: 11.5px; margin-top: 6px; align-items: center; }
.place-card .card-meta svg { width: 11px; height: 11px; }
.card-expiry { color: #966311; background: #fcf1db; padding: 2px 6px; border-radius: 5px; font-size: 11px; }
.card-expiry.soon { background: var(--bad-soft); color: var(--bad-text); }   /* 1.11.0 (review): its last hour at 4.5:1 or more (--bad was 3.86:1 on --bad-soft) */
.card-unplaced { color: var(--fg); font-weight: 600; }   /* 1.11.0: Needs a map pin: prominent, but not the caution style */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-right: 5px; }
.report-action { margin-bottom: 19px; }
.text-link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 12px; min-height: 44px; margin-top: 8px; }
.rail-details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
.rail-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--accent); list-style: none; }
.rail-details summary::-webkit-details-marker { display: none; }
.rail-details summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform .15s; }
.rail-details[open] summary::before { transform: rotate(45deg); }
.rail-details .count { font-size: 11px; color: var(--muted); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; }
.rail-details .panel-description { margin: 0 0 10px; }
.card-expiry.past { background: var(--line); color: var(--muted); }
.text-link svg { width: 14px; height: 14px; }
#mapWrap { grid-area: 2 / 2 / 3 / 3; min-width: 0; }
#mapToolbar { position: absolute; top: 22px; left: 22px; right: 22px; z-index: 1020; display: flex; gap: 9px; align-items: center; pointer-events: none; }
#mapToolbar > * { pointer-events: auto; }
.map-view-label { display: flex; gap: 9px; align-items: center; font-family: var(--font-display); font-size: 20px; color: #40394c; padding: 10px 13px; background: #ffffffec; border: 1px solid #e0dbe7; border-radius: 12px; box-shadow: 0 2px 10px #29213708; white-space: nowrap; }
.map-view-label svg { width: 20px; color: var(--accent); }
.map-layers { display: flex; padding: 4px; gap: 2px; border-radius: 12px; background: var(--bg-2); box-shadow: var(--shadow); margin-left: auto; border: 1px solid var(--line); }
.map-layers button { display: flex; gap: 6px; align-items: center; padding: 7px 9px; font-size: 12px; min-height: 36px; border-radius: 8px; color: var(--muted); }
.map-layers button[aria-pressed=true] { color: var(--accent); background: var(--accent-soft); }
.map-layers button[aria-pressed=false] { opacity: .78; }
.map-layers button[aria-pressed=false] span { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.map-layers button[aria-pressed=false] svg { opacity: .55; }
.map-layers button svg { width: 15px; height: 15px; }
.map-layers i { font-style: normal; background: #ffffffb0; border-radius: 4px; padding: 0 4px; font-size: 10px; }
.map-add-btn { display: flex; align-items: center; gap: 6px; padding: 12px 14px; min-height: 46px; background: var(--accent); color: var(--accent-ink); border-radius: 11px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow); white-space: nowrap; }
.map-add-btn svg { width: 18px; height: 18px; }
#hint { left: 24px; top: 83px; transform: none; padding: 8px 11px; font-size: 12px; border-radius: 8px; border-color: #e0dbe7; box-shadow: none; max-width: calc(100% - 96px); }
#fabs { right: 22px; top: 91px; gap: 8px; }
.fab { width: 46px; height: 46px; border-radius: 12px; box-shadow: 0 3px 10px #29213712; }
#locationStatus { position: absolute; bottom: 160px; left: 24px; z-index: 900; color: #5f586d; background: #fffffff2; border: 1px solid #e0dbe7; border-radius: 8px; padding: 7px 9px; display: flex; align-items: center; gap: 5px; font-size: 12px; box-shadow: 0 2px 8px #29213706; }
#locationStatus svg { width: 13px; height: 13px; }
#locationStatus.gps-ready { color: #2c754d; }
#mapLegend { position: absolute; bottom: 124px; left: 24px; display: flex; gap: 14px; padding: 9px 11px; border: 1px solid #e0dbe7; border-radius: 8px; background: #fffffff2; color: #5f586d; z-index: 900; font-size: 11.5px; }
#mapLegend > span { display: flex; gap: 5px; align-items: center; }
.legend-dot { width: 7px; height: 7px; display: block; border-radius: 50%; }
.legend-dot.friendly { background: #63a574; }.legend-dot.caution { background: #d49e3a; }.legend-dot.sighting { background: #c9614f; }
#dock { position: absolute; left: calc(var(--rail-width) + (100% - var(--rail-width))/2); bottom: 23px; transform: translateX(-50%); z-index: 1030; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; width: min(510px,calc(100% - var(--rail-width) - 100px)); padding: 12px 14px 13px; box-shadow: 0 8px 30px #2921371c; }
.dock-header { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 8px; }
.dock-header .eyebrow { font-size: 10.5px; letter-spacing: .09em; color: var(--muted); }
.dock-subtitle { display: block; font-size: 11px; margin-top: 2px; color: var(--muted); }
#closeReportDock { display: none; }
#dock .dock-row { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; width: 100%; }
.qb { min-height: 62px; border: 0; border-radius: 10px; padding: 5px 2px; gap: 4px; font-size: 11px; color: var(--fg); background: #f6f4f8; }
.qb .em { width: auto; height: 27px; font-size: 23px; background: none; }
.qb:hover { background: var(--accent-soft); }
.qb.on { background: var(--accent-soft); color: var(--accent); outline: 2px solid var(--accent); }
#placementBar { position: absolute; left: 22px; right: 22px; top: 80px; z-index: 1090; display: flex; gap: 10px; align-items: center; padding: 12px; background: var(--bg-2); border: 1px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow); }
.placement-icon { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
#placementBar > div { flex: 1; }
#placementBar b { display: block; font-size: 14px; font-weight: 500; }
#placementBar div span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
#cancelPlacement { min-height: 42px; padding: 8px 13px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 13px; }
#connectionBanner { position: absolute; left: 22px; right: 80px; top: 128px; z-index: 1040; background: var(--warn-soft); color: var(--fg); padding: 10px 13px; border-radius: 9px; font-size: 13px; border: 1px solid var(--warn); }
#updateBanner { position: fixed; left: 25px; top: calc(var(--top-height)/2 - 28px); width: calc(var(--rail-width) - 41px); min-height: 56px; z-index: 2500; background: var(--bg-2); border: 1px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow); padding: 6px 8px 6px 12px; display: flex; gap: 8px; align-items: center; font-size: 13px; }   /* 1.11.0: in the top bar, over the brand: the one spot without controls at every desktop size (at top 93px, right 22px it covered the map toolbar's Add note) */
#updateBanner span { flex: 1; text-wrap: balance; }
#applyUpdateBtn { background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 9px 12px; min-height: 42px; }
#updateBanner .xbtn { width: 38px; height: 38px; }
.leaflet-bottom.leaflet-right { bottom: 3px; right: 10px; }
.leaflet-control-zoom { margin-bottom: 125px!important; border: 1px solid var(--line)!important; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow)!important; }
.leaflet-touch .leaflet-bar a, .leaflet-bar a { width: 42px; height: 42px; line-height: 42px; }
.leaflet-container .leaflet-control-attribution { font-size: 10px; border-radius: 5px; }
.leaflet-container .lbl { font-size: 13px; }
.leaflet-container .hn { font-size: 12px; }   /* 1.11.0: full-opacity digits; one size up for street names and numbers */
.hide-places .stk-wrap { display: none!important; }.hide-sightings .sgt-wrap { display: none!important; }
#areaBar { bottom: 205px; left: 24px; right: 84px; font-size: 14px; }
#poiBar { bottom: 205px; left: 24px; right: 84px; font-size: 14px; }
#walkPill { top: 84px; left: 24px; transform: none; font-size: 14px; }
#walkView { top: 84px; left: 24px; transform: none; width: min(440px, calc(100% - 120px)); }
body.is-walking #walkView { top: 134px; }
#walkPill .stop { min-height: 36px; }
#alert { top: 146px; }
#toast { top: auto; bottom: 198px; z-index: 2300; font-size: 14px; max-width: min(560px, calc(100% - 168px)); border-radius: 12px; }   /* centred, clear of the map buttons on either side (84px, as #areaBar) */
.sheet { max-height: 80%; border-radius: 20px 20px 0 0; box-shadow: 0 -6px 35px #2921371a; z-index: 1500; }
.sheet-body { padding: 19px 22px 22px; }
.sh-title { font-size: 27px; }
.sh-sub { font-size: 14px; line-height: 1.45; margin-top: 6px; }
.xbtn { width: 44px; height: 44px; }
.done { min-height: 42px; padding: 8px 17px; border-radius: 10px; font-size: 14px; }
.sec { margin-top: 20px; }.sec-h { font-size: 12px; margin-bottom: 9px; }
.stb { width: 68px; min-height: 65px; font-size: 12px; gap: 6px; padding: 9px 3px; }.stb .em { font-size: 25px; }
.cm .del { width: 38px; height: 38px; }.cm .when { font-size: 12px; }
.seg { border-radius: 11px; display: flex; }.seg button { flex: 1; border-radius: 8px; min-height: 42px; padding: 8px 9px; font-size: 13px; justify-content: center; }
.vis-note, .hint-line, .set .l span { font-size: 13px; line-height: 1.5; }
.chip { min-height: 42px; font-size: 14px; padding: 8px 13px; }
textarea, input:not([type=checkbox]), select { font-size: 16px; }
.sgt-note { min-height: 88px; font-size: 16px; }
.coords { font-size: 13px; gap: 12px; flex-wrap: wrap; }
.coords a { min-height: 36px; display: inline-flex; align-items: center; gap: .25em; }   /* 1.11.0: the space before its hidden → (a flex item drops it) */
.primary, .sbtn, .ghost { min-height: 44px; }
.set .switch { height: 36px; width: 56px; border-radius: 18px; }.switch::after { width: 28px; height: 28px; top: 4px; left: 4px; }.switch[aria-checked=true]::after { left: 24px; }
.field label { font-size: 14px; }.field input { min-height: 46px; }
#menu { z-index: 1600; background: var(--bg); top: var(--top-height); }
#menu .menu-head { padding: 20px 24px 12px; }.menu-head h2 { font-size: 29px; }
#tabs { padding: 0 16px 13px; gap: 7px; }.tab { min-height: 42px; font-size: 13px; }
.menu-body { padding: 18px 24px 24px; }.card { padding: 17px; }.card p { font-size: 14px; line-height: 1.6; }
.card h3 { font-size: 17px; }.list .row { padding: 13px 8px; }
.wel-title { font-size: 30px; line-height: 1.1; }.wel-tag { font-size: 14px; margin-top: 6px; }
.wel-item { grid-template-columns: 34px 1fr; gap: 13px; margin-top: 23px; }.wel-item .ic { width: 32px; height: 32px; border-radius: 10px; color: var(--accent); background: var(--accent-soft); font-size: 13px; display: flex; align-items: center; justify-content: center; font-weight: 600; }.wel-item p { font-size: 14px; line-height: 1.6; margin-top: 6px; }.wel-item b { font-size: 16px; font-weight: 500; }
.help-details { margin-top: 21px; font-size: 13px; color: var(--muted); line-height: 1.6; }.help-details summary { color: var(--accent); cursor: pointer; min-height: 42px; padding-top: 7px; }.help-details p { margin: 9px 0; }
#welGo { width: 100%; margin-top: 10px; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 12px; }
#mobileActions, #mobileNav { display: none; }
body.has-sheet #dock, body.has-sheet #mapLegend, body.has-sheet #locationStatus, body.has-sheet #poiBar { visibility: hidden; }
body.spot-actions #poiBar, body.spot-actions #areaBar { visibility: hidden; }   /* 1.11.0: never over a search result's actions, which offer the same download or say that it runs (#popBusy) */
body:not(.area-busy) #poiBar:not([hidden]) ~ #areaBar { display: none; }body.area-busy #poiBar { visibility: hidden; }   /* 1.11.0: one bar at a time, in the same spot: the places the walker asked for, the area offer once their bar goes, or a running download. Stacked 95 or 104 px up, the taller area bar covered the Pet places bar's ✕ (801x600, 360x740, 320x568) or pushed it off a sideways phone */
#poiBar[data-alert]:not(:focus-within), #areaBar[data-alert]:not(:focus-within) { visibility: hidden; }   /* 1.11.0: where the alert (124 or 146 px down) meets them (measured: workspace-ui barsMeet), the Pet places bar and the area offer step aside until it goes: it came over their Show, Add this area and ✕ (a phone held sideways, 320x568, 375x667, 801x500). As media queries they hid them where it never met them (390x844, 360x640). One holding focus as the alert comes hands it to the alert's ✕ and has it back after (review C1: workspace-ui alertFocus; hidden, its focus fell to the page; kept, drawn over the alert, it hid its words and ✕) */
#poiBar[data-banner]:not(:focus-within), #areaBar[data-banner]:not(:focus-within), body.is-walking #areaBar[data-pill]:not(:focus-within) { visibility: hidden; }   /* 1.11.0 (review C1): where they meet (measured: workspace-ui barsMeet), the Pet places bar steps aside for the offline banner (2-3 lines, from 117 px down on a phone), and the area offer during a walk for the walk pill (320x568, a phone held sideways). As media queries they hid them for the whole walk or outage at sizes they never met (360x640, 360x600). The area offer too where it meets the banner on a desktop window 500-560 px tall (review C2: it covered all of it, as in 1.10.0; on a phone it steps aside offline anyway). One holding focus as the banner comes hands it to the banner itself and has it back once online (review C2/C3: workspace-ui bannerFocus; kept, it was drawn over the whole banner; on the map, Enter placed a pin mid-placement) */
body.is-walking #hint, body.alert-on #connectionBanner { visibility: hidden; }   /* 1.11.0 (review G2): the hint came back over the walk pill once a placement during a walk ended; an alert comes down over the offline banner, which steps aside until it goes */
body.spot-actions #hint, body.spot-actions #connectionBanner, body.spot-actions #locationStatus { visibility: hidden; }   /* 1.11.0: nor the hint, the offline banner (it covered their title, ✕ and first row) or a walk's location line (their last row): back when they close; on a phone the actions start just below the filters */
body.is-placing #hint { visibility: hidden; }
body.is-placing #fabs { top: 172px; }
html[data-large=true] body { font-size: 18px; }
html[data-large=true] .lbl, html[data-large=true] .leaflet-container[data-z] .lbl { font-size: 16px; }
html[data-large=true] .hn, html[data-large=true] .leaflet-container[data-z] .hn { font-size: 15px; }
html[data-large=true] .rail-heading p, html[data-large=true] .panel-description, html[data-large=true] .place-card .card-title { font-size: 16px; }
html[data-large=true] .card-note, html[data-large=true] .card-meta, html[data-large=true] .rail-tabs button, html[data-large=true] .vis-note, html[data-large=true] .hint-line, html[data-large=true] .sh-sub, html[data-large=true] .walk-card p { font-size: 15px; }
html[data-large=true] .card-expiry { font-size: 14px; }
html[data-large=true] .loc-warn p { font-size: 15px; }
html[data-large=true] #results li button small, html[data-large=true] #results .empty { font-size: 15px; }
html[data-large=true] .pop-title { font-size: 16px; } html[data-large=true] .act-pop.map-action-pop:not(.compact) button, html[data-large=true] .act-pop.map-action-pop:not(.compact) .pop-busy { font-size: 15px; }   /* a search result's name, and the actions where they have a column's width (the compact grid keeps 13px to fit a small or landscape phone) */
html[data-large=true] #connectionBanner { font-size: 15px; } html[data-large=true] .save-state { font-size: 13px; }   /* 1.11.0: they carry the sync state */
html[data-large=true] .move-btn, html[data-large=true] .share-btn, html[data-large=true] .coords a, html[data-large=true] .hazard-row .sbtn { font-size: 14px; }
html[data-large=true] #toast { font-size: 16px; } html[data-large=true] #hint { font-size: 15px; }   /* 1.11.0 (review): the toast (the long one-time notices too), the map hint, the placement bar and the in-app questions grow as well */
html[data-large=true] #placementBar b { font-size: 16px; } html[data-large=true] #placementBar div span, html[data-large=true] #placementCenter, html[data-large=true] #cancelPlacement { font-size: 15px; }
html[data-large=true] dialog.ask p, html[data-large=true] dialog.ask label.check { font-size: 16px; } html[data-large=true] dialog.ask label { font-size: 15px; }
html[data-large=true] .sec-h, html[data-large=true] .stb, html[data-large=true] .qb, html[data-large=true] .saved-filters button, html[data-large=true] .utility-link b, html[data-large=true] .utility-link small { font-size: 14px; }
@media (max-width: 1210px) and (min-width: 801px) and (min-height: 500px) { :root { --rail-width: 324px; } .rail-scroll { padding-left: 20px; padding-right: 20px; }.header-status { display: none; }.header-btn-label { display: none; }.brand h1 { font-size: 27px; }.map-view-label span { display: none; }.map-view-label { padding: 13px; }.rail-heading h2 { font-size: 29px; } }
@media (max-width: 1000px) and (min-width: 801px) and (min-height: 500px) { #topbar { padding-left: 20px; padding-right: 17px; gap: 8px; }.brand { width: calc(var(--rail-width) - 28px); }#updateBanner { left: 20px; width: calc(var(--rail-width) - 28px); } #dock { width: calc(100% - var(--rail-width) - 45px); } }
@media (max-height: 800px) and (min-width: 801px) and (min-height: 500px) { .rail-heading { padding-bottom: 0; }.rail-heading h2 { font-size: 29px; }.rail-heading p { margin-bottom: 13px; }.rail-scroll { padding-top: 20px; }.rail-area { padding-top: 10px; padding-bottom: 12px; }.rail-tabs { margin-bottom: 17px; } }
@media (max-width: 1340px) and (min-width: 801px) and (min-height: 500px) { #locationStatus { bottom: 203px; } #mapLegend { bottom: 166px; } }
@media (max-width: 800px), (max-height: 499px) {
  :root { --top-height: calc(121px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); --nav-height: calc(68px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); --rail-width: 0px; }
  #app { grid-template-columns: minmax(0,1fr); grid-template-rows: var(--top-height) minmax(0,1fr) var(--nav-height); }
  #topbar { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 42px 42px 42px; grid-template-rows: 44px 44px; padding: calc(8px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 14px 13px; gap: 7px; }
  .brand { width: auto; gap: 8px; min-width: 0; }.brand .paw { width: 33px; height: 35px; border-radius: 10px 10px 10px 4px; }.brand .paw svg { width: 21px; height: 21px; }.brand h1 { font-size: 24px; letter-spacing: -.7px; }.brand-tag { display: none; }
  #topbar .search { grid-row: 2; grid-column: 1 / -1; max-width: none; width: 100%; }.search input { min-height: 44px; height: 44px; border-radius: 10px; font-size: 16px; }.search kbd { display: none; }
  .header-status, .header-btn-label { display: none; }.ibtn { min-width: 42px; width: 42px; height: 42px; }.header-neighbors { padding: 0; }
  #mapWrap { grid-area: 2 / 1; }
  #mapToolbar { top: 13px; left: max(13px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); right: max(13px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); gap: 7px; }.map-view-label, .map-add-btn { display: none; }.map-layers { margin: 0; padding: 3px; border-radius: 10px; }.map-layers button { font-size: 12px; padding: 7px 9px; min-height: 36px; }.map-layers i { font-size: 10px; }.map-layers svg { width: 14px; height: 14px; }
  #fabs { right: max(13px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); top: 13px; gap: 7px; }.fab { width: 43px; height: 43px; border-radius: 11px; }.fab svg { width: 19px; height: 19px; }
  #hint { top: 67px; left: 13px; max-width: calc(100% - 80px); font-size: 12px; padding: 8px; border-radius: 8px; }
  #mapLegend { display: none; bottom: 89px; left: 13px; padding: 7px 9px; font-size: 10px; gap: 10px; }
  #locationStatus { bottom: 122px; left: 13px; padding: 6px 8px; font-size: 11px; }
  #mobileActions { display: grid; grid-template-columns: 1.25fr 1.1fr 1fr; gap: 7px; position: absolute; bottom: calc(var(--nav-height) + 13px); left: max(13px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); right: max(13px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); z-index: 1100; padding: 7px; border: 1px solid var(--line); background: var(--bg-2); border-radius: 15px; box-shadow: 0 7px 24px #29213726; }
  #mobileActions button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 46px; padding: 8px 5px; border-radius: 10px; font-size: 12px; font-weight: 500; color: var(--fg); }
  #mobileActions svg { width: 17px; height: 17px; }#mobileActions #mobileWalkBtn { background: var(--accent); color: var(--accent-ink); }#mobileActions button:hover { background: var(--accent-soft); }
  #mobileNav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-area: 3 / 1; z-index: 1800; background: var(--bg-2); border-top: 1px solid var(--line); padding: 4px max(10px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))) calc(4px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))) max(10px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); }
  #mobileNav button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: var(--muted); font-size: 11px; min-height: 56px; border-radius: 10px; position: relative; }
  #mobileNav svg { width: 21px; height: 21px; }#mobileNav button.selected { color: var(--accent); }#mobileNav button.selected::before { content: ''; position: absolute; top: 1px; width: 32px; height: 3px; border-radius: 3px; background: var(--accent); }
  #workspaceRail { display: none; position: absolute; grid-area: 2 / 1 / 3 / 2; top: 0; left: 0; right: 0; bottom: 0; border: 0; z-index: 1200; }
  body[data-mobile-view=places] #workspaceRail, body[data-mobile-view=sightings] #workspaceRail { display: block; }
  body[data-mobile-view=places] #mapWrap, body[data-mobile-view=sightings] #mapWrap { visibility: hidden; }
  body[data-mobile-view=places] #mobileActions, body[data-mobile-view=sightings] #mobileActions { display: none; }
  .rail-scroll { padding: 22px 20px; }.rail-heading, .rail-area, .rail-tabs { display: none; }.rail-footer { margin-top: 26px; }.panel-title h3 { font-size: 31px; }.panel-description { font-size: 14px; }.place-card { padding: 15px; }.place-card .card-title { font-size: 16px; }.place-card .card-note { font-size: 14px; }.place-card .card-meta { font-size: 12px; }.saved-filters button { min-height: 42px; font-size: 13px; }.rail-search input { font-size: 16px; }
  #dock { display: none; bottom: calc(var(--nav-height) + 90px); left: 13px; right: 13px; transform: none; width: auto; padding: 12px; z-index: 1300; }
  body.report-open #dock { display: block; }body.report-open #mapLegend, body.report-open #locationStatus { display: none; }body.report-open #hint { visibility: hidden; }
  #mobileNav button { position: relative; }.nav-badge { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 600; font-style: normal; line-height: 17px; text-align: center; }
  #closeReportDock { display: inline-flex; width: 36px; height: 36px; }.dock-header { margin-bottom: 9px; }.dock-header .eyebrow { font-size: 10px; }.dock-subtitle { font-size: 12px; }.qb { min-height: 64px; font-size: 11px; }
  .leaflet-bottom.leaflet-right { bottom: 3px; right: 3px; }.leaflet-control-zoom { margin-bottom: 90px!important; }.leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
  #placementBar { top: 65px; left: max(13px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); right: max(13px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); gap: 8px; padding: 10px; }#placementBar b { font-size: 13px; }#placementBar div span { font-size: 12px; }.placement-icon { display: none; }#cancelPlacement { font-size: 12px; padding: 7px 10px; }
  #connectionBanner { top: 117px; left: 13px; right: 66px; font-size: 12px; }
  #walkPill { top: 65px; left: 13px; font-size: 12px; padding-left: 10px; gap: 6px; }#walkPill b { font-size: 16px; }
  #walkView { top: 65px; left: 13px; width: calc(100% - 82px); }body.is-walking #walkView { top: 112px; }body.has-sheet #walkView { visibility: hidden; }
  #areaBar { left: 13px; right: 66px; bottom: 158px; font-size: 13px; }#poiBar { left: 13px; right: 66px; bottom: 158px; font-size: 13px; }#alert { top: 124px; }#toast { bottom: 150px; font-size: 13px; left: 13px; right: 66px; margin: 0 auto; transform: none; max-width: min(560px, calc(100% - 79px)); }
  .sheet { width: 100%; max-height: 87%; }.sheet-body { padding: 15px 18px 22px; }.sh-title { font-size: 25px; }.sh-sub { font-size: 13px; }.sec { margin-top: 17px; }.stb { width: 62px; min-height: 64px; }.seg button { font-size: 12px; }.wel-title { font-size: 26px; }.wel-hero { gap: 10px; }.wel-hero .paw { width: 38px; height: 40px; }.wel-tag { font-size: 13px; }.wel-item { margin-top: 18px; }.wel-item p { font-size: 14px; }#menu .menu-head { padding: 16px 18px 9px; }.menu-body { padding: 14px 18px 22px; }#tabs { padding-left: 13px; padding-right: 13px; }.tabs { flex-wrap: wrap; }
  #menu { bottom: var(--nav-height); }
  #updateBanner { top: calc(var(--top-height) + 8px); left: 13px; right: 13px; width: auto; min-height: 0; z-index: 1150; font-size: 12px; padding: 6px 8px; gap: 8px; }#updateBanner span { flex: initial; }   /* 1.11.0: over the map's own buttons (as in 1.10.0), under the lists, sheets, menu and search results (at 2500 it covered their headers, ✕ and Done); 6 px up and down (review G2), so it ends above the walk pill and the hint */
  body.has-sheet #mobileActions, body.has-sheet #mapToolbar, body.has-sheet #hint { visibility: hidden; }body.has-sheet #dock { display: none; }body.is-placing #mobileActions { visibility: hidden; }body.is-placing #mapLegend, body.is-placing #locationStatus { visibility: hidden; }
  body.is-placing #poiBar, body.is-placing #areaBar, body.report-open #poiBar, body.report-open #areaBar, body.notice-on #poiBar:not(:focus-within), body.notice-on #areaBar:not(:focus-within), #connectionBanner:not([hidden]) ~ #areaBar:not(:focus-within), body.area-bar #hint { visibility: hidden; }   /* 1.11.0 (review G2): the placement bar (taller with larger text) or the sighting choices take the bottom, a long notice (8-10 s) takes the Pet places or area bar's spot unless it holds focus (a short toast goes clear of them, below), the area offer steps aside while offline (it is a download; one holding focus hands it to the banner and has it back once online, review C2/C3: workspace-ui bannerFocus; hidden with it, its focus fell to the page; kept, it covered the banner; for an alert: where they meet, above), and the hint for the area offer. Each is back once that goes */
  html body.is-placing #toast { top: 69px; bottom: auto; }   /* just below the map filters: the placement bar takes the bottom, at any height (just above the action bar, a toast covered its title and help with larger text) */
  body.is-placing #connectionBanner, body.report-open #connectionBanner, body.is-placing #walkView { visibility: hidden; }   /* up there the offline banner and a shown walk's line step aside while placing (as the walk pill does; the banner covered the map centre of a sideways phone) or under the sighting choices */
  html[data-large=true] #mobileActions button, html[data-large=true] #mobileNav button { font-size: 13px; }
  html[data-large=true] #toast { font-size: 15px; } html[data-large=true] #placementBar b { font-size: 15px; }
}
@media (max-width: 800px) and (min-height: 500px) {   /* 1.11.0 (review): a phone held upright: with larger text, and (G2) the alert's place */
  html[data-large=true] #toast { bottom: 81px; }   /* just above the action bar: the long notice (8 lines on a 4-inch phone) stays below the map filters */
  body.toast-on #locationStatus { visibility: hidden; }   /* 1.11.0 (review G2): a walk's location line (122 px up, 29 px tall) is under the toast there, and meets it at 150 px */
  #alert { left: 13px; right: 66px; width: auto; transform: none; }   /* in the offline banner's place, clear of the map buttons (full width it covered Pet places) */
  body.is-placing #alert { top: 69px; }   /* and while placing just below the map filters, above the map centre (124 px down it covered it on a 4-inch phone) */
  body.is-placing #alert:not([hidden]) ~ #toast { top: calc(75px + var(--alert-h, 0px)); }   /* a toast then goes just below it (--alert-h: workspace-ui), not under it: neither is hidden for the other */
  body:not(.has-sheet):not(.is-placing) #poiBar:not([hidden]) ~ #toast:not(.notice), body:not(.has-sheet):not(.is-placing) #areaBar:not([hidden]) ~ #toast:not(.notice) { bottom: 81px; }   /* a Pet places or area bar up (158 px): a toast goes below it, just above the action bar (150 px up it covered the bar, which stepped aside: focus on its Show or ✕ was lost, a tap on ✕ reached the map) */
  html[data-large=true] body.is-placing .leaflet-control-zoom { margin-bottom: 172px!important; }   /* just above the taller placement bar (161 px, Move pin's help in 3 lines), and clear of the map buttons from about 620 px tall */
}
@media (max-width: 339px) and (min-height: 500px) {
  html[data-large=true] body.is-placing .leaflet-control-zoom { margin-bottom: 190px!important; }   /* the help takes a 4th line (182 px) */
}
@media (max-width: 800px) and (min-height: 500px) and (max-height: 600px) {
  #toast, html[data-large=true] #toast, body:not(.has-sheet):not(.is-placing) #poiBar:not([hidden]) ~ #toast:not(.notice), body:not(.has-sheet):not(.is-placing) #areaBar:not([hidden]) ~ #toast:not(.notice) { bottom: 77px; }   /* 1.11.0 (review G2): at either text size, so the long notice ends below the walk pill */
  html[data-large=true] #placementHelp { display: none!important; }   /* a 4-inch phone: as on a phone held sideways, or the bar would cover the map centre it places at */
  html[data-large=true] body.is-placing .leaflet-control-zoom { margin-bottom: 108px!important; }   /* the bar is 95 px without it: just above that, so Zoom in and Zoom out stay clear of the map buttons (from about 560 px tall) */
}
@media (max-width: 359px) {
  html[data-large=true] #hint { font-size: 14px; padding: 5px 8px; line-height: 1.25; white-space: normal; }   /* two lines, between the map filters and the offline banner */
}
@media (max-width: 800px) and (max-height: 640px), (max-height: 499px) {   /* 1.11.0 (review G2): a short phone map has no room for a toast (the long notices too) and the offline banner or the hint: the toast takes the place. Each is back once it goes. A long notice waits for an alert (app.js); a short toast stays, clear of it */
  body.toast-on #connectionBanner, body.toast-on #hint { visibility: hidden; }
}
@media (max-width: 370px) { .brand h1 { font-size: 21px; }#topbar { grid-template-columns: 1fr 37px 37px 37px; gap: 4px; padding-left: 10px; padding-right: 10px; }.brand .paw { width: 29px; }.ibtn { width: 37px; min-width: 37px; }.stb { width: 57px; font-size: 11px; }.map-layers button { padding-left: 8px; padding-right: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; animation: none!important; transition: none!important; } }
@media (prefers-color-scheme: dark) {
 :root:not([data-theme=light]) { --bg: #1c1923; --bg-2: #26222f; --fg: #f0eaf6; --muted: #b5aabf; --line: #40384b; --accent: #bca7ff; --accent-soft: #39304e; }
 :root:not([data-theme=light]) .rail-tabs { background: #292431; }
 :root:not([data-theme=light]) .map-view-label, :root:not([data-theme=light]) #locationStatus, :root:not([data-theme=light]) #mapLegend { background: #26222ff2; color: #e5dcec; border-color: #40384b; }
 :root:not([data-theme=light]) .qb { background: #302a3b; color: var(--fg); }
 :root:not([data-theme=light]) .qb.on { background: var(--accent-soft); }
 :root:not([data-theme=light]) .map-layers i { background: #26222f; }
 :root:not([data-theme=light]) .notebook-empty { border-color: #50445f; }
 :root:not([data-theme=light]) .card-expiry, :root:not([data-theme=light]) .sighting-icon { background: #463515; color: #f5d08a; }
}

/* Clearer lists, keyboard placement, and comfortable controls on every screen. */
:root { --muted: #665f71; --focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
button, a, input, textarea, select, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, #map:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#map:focus-visible, #connectionBanner:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } html:not([data-kbd]) #map:focus-visible, #connectionBanner:focus:not(:focus-visible), html:not([data-kbd]) #connectionBanner:focus { outline: none; }   /* 1.11.0 (review C2): inside the map, where it shows (3 px outside it went under the top bar, the tab bar or the notebook rail and off the window), and on the offline banner when a bar hands it focus (workspace-ui bannerFocus). Only after a key (data-kbd, review C3): Leaflet focuses the map on a mouse click or a tap, which drew the ring for pointer users */
.sh-title:focus, .wel-title:focus, .menu-head h2:focus, .sheet h2:focus, #notebookGateTitle:focus { outline: none; }
button:disabled { cursor: default; }
.rail-tabs button, .saved-filters button, .map-layers button, .rail-footer button, .rail-section-title button, .small-add { min-height: 44px; }
.small-add { min-width: 44px; }
.rail-search:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.rail-search input:focus-visible { outline: none; }
.rail-search { transition: border-color .15s, box-shadow .15s; }
.notebook-stats button { transition: border-color .15s, background .15s; }
.place-card { transition: border-color .15s, box-shadow .15s; }
.place-card:focus-visible { outline-offset: 1px; }
.notebook-list:focus-visible, #recentPlaces:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
.card-meta { font-variant-numeric: tabular-nums; }
.list-summary { flex-wrap: wrap; min-height: 44px; }
.list-summary > label { margin-left: auto; }
.list-summary select { min-height: 44px; }
.sort-hint { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-soft); color: var(--fg); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.sort-hint span { display: block; }
.sort-hint button { min-height: 44px; margin-top: 4px; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
html[data-large=true] .sort-hint { font-size: 16px; }
.reset-filters { min-height: 44px; color: var(--accent); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; margin-left: auto; padding: 6px 2px; }
.sighting-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 5px; }
.sighting-selects label { min-width: 0; }
.sighting-selects label > span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.sighting-selects select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; padding: 8px; background: var(--bg-2); color: var(--fg); font-size: 12px; }
.saved-filters { flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.saved-filters button.selected { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); font-weight: 600; }
.report-action { margin-bottom: 15px; }
#results li button { min-height: 46px; }
#results li button.active { background: var(--accent-soft); color: var(--fg); box-shadow: inset 3px 0 var(--accent); }
#placementBar { align-items: flex-start; }
#placementBar > div:first-of-type { min-width: 0; align-self: center; }
#placementBar .placement-actions { display: flex; flex: 0 0 auto; gap: 7px; align-self: center; }
#placementCenter { padding: 9px 12px; min-height: 44px; font-size: 13px; white-space: nowrap; }
#cancelPlacement { min-height: 44px; }
#placementReticle { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%,-50%); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent),0 2px 8px #0005; z-index: 800; pointer-events: none; background: color-mix(in srgb, var(--accent) 16%, transparent); }
#placementReticle::before, #placementReticle::after { content: ''; position: absolute; background: var(--accent); box-shadow: 0 0 0 1px #fff; border-radius: 2px; }
#placementReticle::before { width: 14px; height: 2px; left: 7px; top: 13px; }
#placementReticle::after { height: 14px; width: 2px; top: 7px; left: 13px; }
body.is-placing #walkPill { display: none; }
.sheet-body, .menu-body, .rail-scroll { overscroll-behavior: contain; scroll-padding-block: 18px; -webkit-overflow-scrolling: touch; }
.sheet-body { padding-bottom: max(22px,var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.sheet .sh-head { position: sticky; top: -19px; z-index: 2; background: var(--bg-2); padding-block: 10px; margin-top: -10px; border-bottom: 1px solid var(--line); }
.sheet .sh-head .hd-right { flex: 0 0 auto; }
.sheet.flat-head .sh-head { position: static; }   /* 1.11.0: a header taller than 40% of its sheet (workspace-ui) scrolls away instead of covering the controls under it */
.sheet-body { scroll-padding-top: max(18px, var(--sheet-head, 0px)); }   /* 1.11.0: a control scrolled or focused into view stops below a header on top, not under it */
.sheet .sh-title { overflow-wrap: anywhere; }
#menu .menu-body > section { width: min(820px,100%); margin-inline: auto; }
#menu #tabs { scrollbar-width: thin; }
#mapLegend { pointer-events: none; }
@media (min-width: 801px) and (min-height: 500px) {
  #topbar { padding-top: max(16px,var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  #placementBar { right: 80px; flex-wrap: wrap; }
  #placementBar .placement-actions { margin-left: auto; }
  #placementBar > div:first-of-type { flex: 1 1 260px; }   /* 1.11.0: below 973 px wide its text would shrink to a column (102 px at 801) and the bar grow past the map centre: Use map center and Cancel go on their own line instead */
  .rail-scroll { padding-bottom: max(24px,var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
}
@media (max-width: 800px), (max-height: 499px) {
  #topbar { padding-left: max(14px,var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); padding-right: max(14px,var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); }
  .ibtn { width: 44px; min-width: 44px; height: 44px; }
  #topbar { grid-template-columns: 1fr 44px 44px 44px; }
  .fab { width: 44px; height: 44px; }
  #closeReportDock { width: 44px; height: 44px; }
  #placementBar { flex-wrap: wrap; }
  #placementBar .placement-actions { width: 100%; flex: 1 1 100%; }
  #placementCenter { flex: 1; }
  body.is-placing #fabs { top: 211px; }
  .sighting-selects select { font-size: 16px; }
  .sheet .sh-head { top: -15px; }
  #mobileNav button.selected { background: var(--accent-soft); }
  #mobileNav button.selected::before { display: none; }
  #mobileActions #mobileWalkBtn:hover { background: var(--accent); }
}
@media (max-width: 370px) {
  #topbar { gap: 3px; padding-left: max(8px,var(--safe-area-inset-left, env(safe-area-inset-left, 0px))); padding-right: max(8px,var(--safe-area-inset-right, env(safe-area-inset-right, 0px))); }
  .brand h1 { font-size: 20px; }.brand .paw { display: none; }
  #mobileActions { left: 8px; right: 8px; gap: 3px; padding: 5px; }
  #mobileActions button { gap: 3px; font-size: 11px; }
}
@media (max-width: 1000px) and (min-width: 801px) and (min-height: 500px), (max-width: 370px) {
  .map-layers i { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }   /* 1.11.0: no room to show the counts here (as in 1.10.0), but they stay in the names: 'Places 3', not 'Places' (display: none dropped them) */
}
@media (max-height: 600px) and (max-width: 800px) and (orientation: landscape), (max-height: 499px) and (orientation: landscape) {
  :root { --top-height: calc(65px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); --nav-height: calc(56px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
  #topbar { grid-template-columns: minmax(110px,.8fr) minmax(150px,1fr) 44px 44px 44px; grid-template-rows: 44px; padding-bottom: 8px; }
  #topbar .search { grid-row: 1; grid-column: 2; }.brand .paw { display: none; }.brand h1 { font-size: 21px; }
  #mobileNav button { min-height: 44px; gap: 1px; font-size: 10px; }#mobileNav svg { width: 18px; height: 18px; }
  #hint, #mapLegend, #locationStatus { display: none; }
  #mobileActions { left: 13px; right: auto; width: min(360px,calc(100% - 82px)); bottom: calc(var(--nav-height) + 8px); padding: 4px; }
  #mobileActions button { min-height: 44px; }
  .sheet { max-height: 100%; }
  #dock { bottom: calc(var(--nav-height) + 72px); }
  #toast { bottom: 72px; }   /* just above the action bar: a long notice stays below the map filters on a short screen */
  #placementBar { left: 13px; right: 66px; top: 65px; gap: 6px; padding: 8px; }
  #placementBar > div:first-of-type { flex: 1 1 150px; }
  #placementBar .placement-actions { flex: 0 0 auto; width: auto; }
  #placementHelp { display: none!important; }
  body.is-placing #fabs { top: 13px; }
  #poiBar { bottom: 70px; }   /* 1.11.0: just above the action bar (8 px up, 54 px tall): 158 px up ran into the map filters or the top bar of a 200-310 px map. The placement bar, the sighting choices or a toast take that spot while they show */
  #areaBar { bottom: 66px; }   /* 1.11.0 (review G2): the area offer in the same spot (one bar at a time): 158 px up it covered the map filters or went under the top bar. 4 px up, its 106 px clear the filters from 360 px tall */
  #connectionBanner:not([hidden]) ~ #poiBar:not(:focus-within), body.walk-view #areaBar { visibility: hidden; }   /* the offline banner keeps the middle of the map (the Pet places bar covered it; it is back once online). One holding focus stays until focus leaves it where it does not meet the banner (review C1), and hands its focus to the map where it does (review C2: workspace-ui bannerFocus) */
  body.map-actions #poiBar:not(:focus-within), body.map-actions #areaBar:not(:focus-within), body.map-actions #connectionBanner { visibility: hidden; }   /* 1.11.0 (review C1): a map tap's actions open just below the map filters (70 px down), where the offline banner and the area offer or Pet places bar (66-70 px up) are: they step aside until the actions close, as for a search result's (a tap on Note this spot reached Add this area and started the download) */
  #connectionBanner { top: 69px; }   /* just below the map filters: 117 px down it ran into the action bar of a 200-240 px map */
  body.is-walking:not(.is-placing) #poiBar, body.is-walking:not(.is-placing) #toast, body.is-walking #connectionBanner { left: 234px; }body.is-walking:not(.is-placing) #toast { max-width: min(560px, calc(100% - 300px)); }   /* during a walk, beside the walk pill and right of the map filters (a 200-240 px map has no room below the pill) */
  body.walk-view #connectionBanner { top: 117px; left: 13px; }   /* below a shown walk's line (as before) */
  body:not(.has-sheet):not(.is-placing) #alert:not([hidden]) ~ #toast:not(.notice), body:not(.has-sheet):not(.is-placing) #poiBar:not([hidden]) ~ #toast:not(.notice), body:not(.has-sheet):not(.is-placing) #areaBar:not([hidden]) ~ #toast:not(.notice) { top: 13px; bottom: auto; left: 234px; max-width: min(560px, calc(100% - 300px)); }   /* an alert (124 px down) or a Pet places or area bar in a toast's place: it goes at the top, right of the map filters (neither is hidden for the other; while placing it is below the filters, clear of them). As specific as the upright rule, for 800x500-600 */
  body.toast-on #updateBanner:not(:focus-within) { visibility: hidden; }   /* the top row the toast is then over (and a narrower toast during a walk: the long notice in 5-6 lines reaches it), unless it holds focus (then the toast goes clear of it: placeToast) */
  html body #toast[data-beside] { left: 234px; max-width: min(560px, calc(100% - 300px)); }   /* 1.11.0 (review G2): placeToast found no room in its own columns: beside the map filters */
}
@media (max-height: 600px) and (max-width: 540px) and (orientation: landscape) {
  #topbar { grid-template-columns: minmax(0,1fr) 44px 44px 44px; }
  #topbar .brand { display: none; }#topbar .search { grid-column: 1; }
}
@media (max-height: 340px) and (orientation: landscape) {
  #toast { bottom: 67px; padding: 6px 12px; line-height: 1.25; }   /* 1.11.0: 4-inch phones (568x320): the long sightings notice (3 lines) fits between the map filters and the action bar */
  html[data-large=true] #toast { font-size: 13px; }   /* 1.11.0 (review): so larger text stops here: a fourth line has no room (as for the compact map actions) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) { --muted: #bcb2c7; }
}
:root[data-theme=dark] { --bg: #1c1923; --bg-2: #26222f; --fg: #f0eaf6; --muted: #bcb2c7; --line: #40384b; --accent: #bca7ff; --accent-ink: #1a1230; --accent-soft: #39304e; }
:root[data-theme=dark] .rail-tabs { background: #292431; }
:root[data-theme=dark] .map-view-label, :root[data-theme=dark] #locationStatus, :root[data-theme=dark] #mapLegend { background: #26222ff2; color: #e5dcec; border-color: #40384b; }
:root[data-theme=dark] .qb { background: #302a3b; color: var(--fg); }
:root[data-theme=dark] .qb.on { background: var(--accent-soft); }
:root[data-theme=dark] .map-layers i { background: #26222f; }
:root[data-theme=dark] .notebook-empty { border-color: #50445f; }
:root[data-theme=dark] .card-expiry, :root[data-theme=dark] .sighting-icon { background: #463515; color: #f5d08a; }
:root .card-expiry.past { color: var(--muted); background: var(--bg); border: 1px solid var(--line); }

@media (max-height: 600px) and (min-width: 801px) and (min-height: 500px) {
  :root { --top-height: 64px; }
  #topbar { padding-block: 9px; }
  .brand h1 { font-size: 25px; }.brand-tag { display: none; }.brand .paw { width: 36px; height: 38px; }
  .rail-heading, .rail-area { display: none; }.rail-scroll { padding-top: 14px; }.rail-tabs { margin-bottom: 13px; }
  .panel-title h3 { font-size: 26px; }
  #mapToolbar { top: 12px; left: 13px; right: 13px; }
  #fabs { top: 78px; right: 13px; }
  #hint, #mapLegend, #locationStatus { display: none; }
  #dock { bottom: 12px; padding: 7px; border-radius: 12px; }
  .dock-header { display: none; }#dock .qb { min-height: 48px; gap: 1px; font-size: 10px; }#dock .qb .em { height: 23px; font-size: 20px; }
  .leaflet-control-zoom { margin-bottom: 82px!important; }
  .sheet { max-height: 100%; }
  #placementBar { top: 70px; padding-block: 8px; row-gap: 6px; }   /* 1.11.0: 12 px less, so a wrapped bar (Move pin, 801 px wide) ends above the map centre down to 500 px tall */
  html[data-large=true] #placementHelp { display: none!important; }   /* 1.11.0 (review): with larger text that takes the help line, as on a short phone */
  html[data-large=true] #toast { bottom: 120px; }   /* and the long notice stays below the map filters */
}

body[data-notebook-panel=places] .rail-heading, body[data-notebook-panel=places] .rail-area, body[data-notebook-panel=sightings] .rail-heading, body[data-notebook-panel=sightings] .rail-area { display: none; }
@media (max-width: 800px), (max-height: 499px) {
  #placementBar { top: auto; bottom: 13px; }
  body.is-placing #fabs { top: 13px; }
}

/* 1.8: calmer map on phones, clearer sheets on desktop */
body.has-sheet #toast { top: 12px; bottom: auto; }
html body #toast[data-compact] { font-size: 13px; line-height: 1.25; padding: 6px 12px; }   /* 1.11.0 (review G2): and none in its own type either (larger text, 4-5 lines and an alert on a 4-inch phone): as on a 4-inch phone held sideways */
#poiBar[data-aside]:not(:focus-within), #areaBar[data-aside]:not(:focus-within) { visibility: hidden; }   /* 1.11.0 (review G2): a toast with no room on the map clear of them (placeToast, workspace-ui): they step aside while it shows, unless one holds focus */
body.toast-on #poiBar:focus-within, body.toast-on #areaBar:focus-within { z-index: 2350; }   /* and one that does is drawn over a toast (never hidden under it); never over an alert (review C1: it hid its words and ✕; one that meets the alert hands its focus to it, workspace-ui alertFocus) */
@media (max-width: 800px), (max-height: 499px) { body.toast-on #updateBanner:focus-within { z-index: 2350; } }   /* as the update banner on a phone (under the lists and sheets otherwise) */
#plMeta, #sgMeta { display: none; }
@media (max-width: 800px), (max-height: 499px) {
  body:not(.is-walking):not(.is-following) #locationStatus { display: none; }
  body.is-placing .leaflet-control-zoom { margin-bottom: 150px!important; }
}
@media (min-width: 801px) and (min-height: 500px) {
  .grab { display: none; }
  body.is-placing #dock { display: none; }
}