/* PlantMap viewer. * * Phone first. This is read in the field, one-handed, in daylight — so: large * tap targets, high contrast, and nothing that depends on hover. */ /* Palette pulled toward the basemap rather than sitting on top of it. * * The map is OpenFreeMap **positron** — near-greyscale, background rgb(242,243,240), * water rgb(194,200,202). The chrome is keyed to those greys so the page reads as * one surface. Colour is spent, deliberately, on exactly one thing: whether a * plant has been visited more than once. On a grey map a single accent carries * further than five competing ones. */ :root { color-scheme: light dark; --bg: #f2f3f0; /* positron's own background */ --surface: #ffffff; --fg: #1f2124; --muted: #74777c; --line: #dfe1de; --ink: #2b2e31; /* markers and "+" marks: near-black, not a hue */ --accent: #55585c; /* restrained: greys the UI, never shouts */ --accent-fg: #ffffff; --warm: #a8600f; /* the ONE colour on the map — a revisited plant */ --danger: #93332c; --shadow: 0 2px 10px rgba(31, 33, 36, .13); --radius: 12px; --new-data-stroke: #000000; /* The band the three navigation buttons occupy at the bottom of every page: * their offset from the bottom, plus their height (the 37px `min-height` set * on `#bottom-left button, .btn-link` further down). Anything else floating * over the bottom of the screen sits ABOVE this band, or it lands on top of * them — which on a phone means three buttons that cannot be tapped at all. * Both halves are tokens so the buttons and whatever dodges them cannot * drift apart. */ --nav-gap: max(.8rem, env(safe-area-inset-bottom)); --nav-band: calc(var(--nav-gap) + 37px); } @media (prefers-color-scheme: dark) { :root { --bg: #15171a; --surface: #1b1e22; --fg: #e6e7e4; --muted: #93969b; --line: #2b2f34; --ink: #e6e7e4; --accent: #9aa0a6; --accent-fg: #15171a; --warm: #d9a05a; --danger: #e58c85; --shadow: 0 2px 12px rgba(0, 0, 0, .55); --new-data-stroke: #ffffff; } } * { box-sizing: border-box; } /* The `hidden` attribute is only a UA default of `display: none`, so ANY * `display` declaration on the element beats it. `.sheet { display: grid }` did * exactly that and the sign-in dialog rendered over the map on first load. This * rule makes `hidden` mean hidden for the four elements that toggle. */ [hidden] { display: none !important; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); /* The CJK families are appended rather than substituted: `system-ui` already resolves to a Han-capable face on most devices, and the named fallbacks are for the ones where it does not — an Android build with a partial Noto, a Windows machine whose UI font has no Han coverage. Without them the browser picks per-glyph from whatever it can find, which is how a line of Chinese ends up in three different weights. Hant before Hans in each pair is not a preference: `` decides which one the browser reaches for, and it is set before the first paint by lib/i18n.js. The order here only matters when lang is missing. */ font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang TC", "PingFang SC", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans CJK TC", "Noto Sans CJK SC", "Source Han Sans", sans-serif; -webkit-text-size-adjust: 100%; } /* TRACKING IS AN ALPHABET SETTING. * * Seven rules in this file add `letter-spacing` — six to small uppercase * labels, one negative on the brand wordmark — which * is right for Latin caps and wrong for Han: CJK glyphs are already full-width * squares set on a fixed grid, so extra tracking inserts a visible gap between * every single character and the label reads as if it has been stretched. * `text-transform: uppercase` needs no such guard — it is simply a no-op on Han. * * Every tracked rule below multiplies its own value by `--track`, so the six * different amounts are kept and switched off together rather than restated. * `` is set by lib/i18n.js before the first paint, so this matches * from the first frame. */ :root { --track: 1; } :root:lang(zh-Hans), :root:lang(zh-Hant) { --track: 0; } /* The map is constructed at the hardcoded HOME and only moves to the visitor's own city when /api/geo answers, so it stays transparent until that opening view is settled — otherwise every visitor is shown Singapore for a moment and then a pan. app.js adds .map-ready on the geo answer or after its REVEAL_MS timeout, whichever comes first, so a hanging request cannot leave the page blank. */ #map { position: absolute; inset: 0; /* Track the DYNAMIC viewport height (mobile address bar shown/hidden) where supported; on engines without dvh the declaration is dropped and inset:0 fills the layout viewport instead. app.js re-measures on viewport changes so a wrong first-frame size (the phone's half-map) never sticks. */ height: 100dvh; opacity: 0; transition: opacity .25s ease; } #map.map-ready { opacity: 1; } @media (prefers-reduced-motion: reduce) { #map { transition: none; } } /* ------------------------------------------------------------------ chrome */ #chrome { position: absolute; top: 0; left: 0; right: 0; z-index: 15; display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: max(.6rem, env(safe-area-inset-top)) .8rem .6rem; pointer-events: none; } #chrome > * { pointer-events: auto; } /* Left side of the chrome: brand on top, filter buttons below it. */ .chrome-left { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; } /* Right side: just the username + cohort, top-aligned with the brand. */ .chrome-right { display: flex; flex-direction: column; align-items: flex-end; } /* Filter buttons below the brand, and the empty-map pill beside them. It wraps * rather than overflowing: on a narrow phone Filters + People + the pill is * wider than the space left by the account block opposite. */ .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; } .actions button { font-size: .8rem; padding: .35rem .65rem; min-height: 36px; } .brand { padding: .55rem .95rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .brand strong { font-size: 1.35rem; letter-spacing: calc(-.02em * var(--track)); line-height: 1.1; } /* English wordmark only ("brand" in lib/i18n.en.js is the one locale that splits "Pheno"/"Map" into markup — the Chinese strings are a different word, not a transliteration, and stay one uniform weight). */ .brand-thin { font-weight: 300; } /* The brand and the message button sit in one row so the envelope aligns with the name rather than hanging off it. `.brand` keeps its own surface. */ .brand-row { display: flex; align-items: center; gap: .5rem; } /* The round envelope button, to the right of the Phenomap name. Same surface family as the brand so the row reads as one block. */ .msg-btn { position: relative; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; /* 80% of the old 1.25rem */ border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--fg); box-shadow: var(--shadow); cursor: pointer; overflow: visible; /* don't clip the glyph */ } .msg-btn:hover, .msg-btn:focus-visible { border-color: var(--accent); } /* The red unread count, pinned to the button's top-right corner. */ .msg-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--danger); color: #ffffff; font-size: .68rem; font-weight: 700; line-height: 1; box-shadow: var(--shadow); } /* ------------------------------------------------------- corner readout */ /* Bottom-left block: stats readout and, when signed in, the "My species" * button. Wrapped so the stats sit at the very bottom when the button is * hidden rather than floating above an invisible control. */ #bottom-left { position: absolute; z-index: 4; left: 1rem; bottom: var(--nav-gap); display: flex; align-items: center; gap: .38rem; pointer-events: none; white-space: nowrap; } #bottom-left > * { pointer-events: auto; } /* Copyright — signed-out map only. Bottom-RIGHT, under the zoom / locate controls: those are lifted to 4rem (see `.maplibregl-ctrl-bottom-right` below), so the strip beneath them is empty and this can sit at the true bottom of the corner without colliding with anything. The colour is hardcoded, NOT var(--muted). The basemap is always Positron whatever the app's theme is, so a token that lightens in dark mode would wash this out over a pale map. The white halo is the same reasoning as the pills above: unbacked grey text disappears over a park or a waterway. A backing pill was the alternative and was rejected — it would read as a button, in the one corner of this page where buttons live. */ #copyright { position: absolute; z-index: 4; right: 1rem; bottom: var(--nav-gap); margin: 0; text-align: right; max-width: min(28rem, calc(100% - 6rem)); font-size: .78rem; line-height: 1.6; color: #6b6e72; text-shadow: 0 1px 2px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9); /* The PARAGRAPH stays click-through so the map can be dragged from under it — it sits over the corner of a map and is not a control. The links inside it take their events back below. */ pointer-events: none; } /* THE PRIVACY AND TERMS LINKS, WHICH DID NOT WORK UNTIL 2026-08-10. `pointer-events: none` above is inherited, so the two anchors were painted, underlined on hover by the browser's defaults, and absorbed nothing: every click went through to the map and panned it. Reported as "the links are not clickable", and the size was the red herring — a 0px hit area is not small, it is absent. Both halves of the fix are needed. `auto` gives them the click back; the inline-block padding gives them something to be clicked ON. At .69rem an inline anchor was about 10px tall, and this app's own rule everywhere else is that a control has to survive a thumb on a phone in a field (M9.11). The text is up to .78rem to match, and the underline is permanent rather than hover-only — hover does not exist on the device this is read on. */ #copyright a { pointer-events: auto; display: inline-block; padding: .3rem .1rem; color: inherit; text-decoration: underline; text-underline-offset: .18em; } #copyright a:hover, #copyright a:focus-visible { color: #15171a; } /* Signed in only. A pill button styled like the account name button so it reads * as part of the same family. */ /* All bottom-left navigation buttons — bold, for quick scanning. */ #bottom-left button { font-weight: 600; } .pill { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: calc(.02em * var(--track)); white-space: nowrap; } /* Cohort and status share one treatment, per Yilun: outlined, not filled. They * sit on the map rather than inside a card, so they carry their own light * backing — a 1px border alone disappears over a park or a waterway. The cohort * name is deliberately lighter than the user name so the two do not read as one * label. */ .pill-cohort, .pill-live { background: rgba(255, 255, 255, .82); border: 1px solid rgba(31, 33, 36, .18); padding: .06rem .45rem; } .pill-cohort, .pill-live { color: #9a9da2; } /* Degraded state stays distinguishable WITHOUT going back to a filled block: * the outline and the type go warm instead. Losing that signal entirely would * make "the map stopped updating" undiagnosable from the page itself, which is * the M9.11 lesson. */ .pill-live[data-state="poll"] { color: var(--warm); border-color: color-mix(in srgb, var(--warm) 45%, transparent); } button { font: inherit; padding: .55rem .9rem; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow); cursor: pointer; } /* ------------------------------------------------------------ account block */ /* Sits next to the brand on the left: a compact identity row that reads as * part of the chrome rather than a separate control. */ #acct { display: flex; align-items: flex-start; gap: .4rem; } #acct-tags { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding-top: .15rem; order: -1; /* cohort to the left of the username */ } #acct-wrap { position: relative; } /* The name is the control. 120% of the default button scale so it is easy to tap and reads clearly against the brand. */ #userbtn { max-width: min(14rem, 35vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .96rem; padding: .45rem .75rem; min-height: 40px; } #userbtn::after { content: " ▾"; color: var(--muted); font-weight: 400; } #acct-menu { position: absolute; top: 100%; right: 0; min-width: 12rem; padding: .3rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .15rem; } /* Right-aligned labels (Yilun, 2026-08-07): the panel hangs off the RIGHT edge of the username button, so ragged-left text lines the items up with the control that opened them and with the chrome's right edge. */ #acct-menu button { width: 100%; text-align: right; border: 0; border-radius: 8px; box-shadow: none; background: transparent; padding: .55rem .7rem; font-size: .92rem; } #acct-menu button:hover, #acct-menu button:focus-visible { background: var(--bg); } #signout { color: var(--danger); } button.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; } button:disabled { opacity: .55; cursor: default; } /* ----------------------------------------------------------------- filters */ /* Anchored below the chrome on the left, opening downward from the filter buttons next to the brand. */ #filters { position: absolute; z-index: 16; top: 5.8rem; left: .8rem; width: min(20rem, calc(100vw - 1.6rem)); max-height: min(32rem, calc(100vh - 6rem)); display: flex; flex-direction: column; overflow-y: auto; padding: .9rem 1rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); } /* On a narrow screen the panel spans the width rather than a 3-inch column. */ @media (max-width: 42rem) { #filters { top: auto; bottom: 0; left: .6rem; right: .6rem; width: auto; max-height: 65vh; border-radius: var(--radius) var(--radius) 0 0; } } /* ------------------------------------------------------------- intro card */ /* Signed-out only: what the "+" marks are, and why signing in shows more. See the block comment in index.html for why it exists at all. Same recipe as #filters and #people-filters — surface, radius, shadow, 1px line — and the same top-left anchor, because it occupies the slot the Filters panel will occupy once this visitor has an account. One box appears in one place on this page; which box depends only on whether you are signed in. z-index 14 puts it UNDER #chrome (15) and well under #signin-panel (30). That ordering is deliberate rather than incidental: on a phone the sign-in panel is `calc(100vw - 1.6rem)` wide and lands squarely on top of this, and it should — somebody who has pressed "Sign in" has finished reading the card. It is opaque, so nothing shows through. */ #intro { position: absolute; z-index: 14; /* NOT #filters' hardcoded 5.8rem, for two reasons. That figure clears the brand AND the 36px row of Filters/People buttons below it — but this card is only ever on screen when the ⓘ is hidden, so .actions is empty and has no height, and 5.8rem would leave a band of bare map between the brand and the card. The safe-area term is the second reason and the one #filters gets away with: it repeats the top padding on #chrome, so on a notched phone the card moves down with the brand instead of sliding under it. 3.2rem is the brand's own height (.55rem padding twice, plus 1.35rem at line-height 1.1) plus .chrome-left's .35rem gap. */ top: calc(max(.6rem, env(safe-area-inset-top)) + 3.2rem); left: .8rem; width: min(21rem, calc(100vw - 1.6rem)); padding: .85rem 1rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); } #intro h2 { margin: 0 1.75rem .35rem 0; /* right margin clears the ✕ */ font-size: 1rem; font-weight: 600; line-height: 1.35; } #intro p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--fg); } /* The count sits apart from the prose: it is evidence, not another sentence, and at full weight beside two lines of body copy it read as a third one. */ #intro .intro-count { margin-top: .5rem; font-size: .78rem; color: var(--muted); } /* A 44px target, per this file's opening rule and the one #copyright a had to learn the hard way: a glyph is not a hit area. It is pulled into the card's own padding with negative offsets so the box does not grow a corner of empty space around it. */ #intro-close { position: absolute; top: .3rem; right: .3rem; min-height: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 999px; background: none; box-shadow: none; color: var(--muted); font-size: .95rem; line-height: 1; } #intro-close:hover, #intro-close:focus-visible { color: var(--fg); } /* The ⓘ that the card collapses into. Sized like its neighbours in .actions (see that rule above) so it reads as one of the chrome's controls rather than a badge on the map, but square: it has a glyph where the others have a word, and the horizontal padding that fits "Filters" makes a lozenge of a single character. */ .info-mini { padding: .35rem; min-width: 36px; font-size: 1.05rem; line-height: 1; } /* Spans the width on a phone, like the two panels above — a 21rem column on a 390px screen leaves a useless margin down one side. STILL TOP-ANCHORED, unlike those two. #filters and #people-filters become bottom sheets because they are opened deliberately and closed straight after; this one is on screen when the page loads. At the bottom it would land on the copyright strip and the Privacy and Terms links beside it — which are in that corner precisely because the people who need them are the signed-out ones looking at this card. */ @media (max-width: 42rem) { #intro { left: .6rem; right: .6rem; width: auto; } /* OUT OF THE WAY WHILE THE SIGN-IN PANEL IS OPEN, on a phone only. At this width the panel is `calc(100vw - 1.6rem)` and lands on top of the card — but a rem to the left of it, so a 10px ribbon of clipped Chinese stuck out down the side of the form and read as a layout fault. On a wide screen the two never meet: the panel hangs off the right of the chrome and the card is on the left, so this stays inside the media query rather than hiding the card on a desktop for no visible reason. Done in CSS rather than by toggling it from openSigninPanel(): it needs no state, so it cannot get stuck hidden, and the ONE way it can fail is a browser with no `:has()` — which lands back on the ribbon rather than on anything broken. #intro follows #chrome in the document, which is what makes the sibling combinator reach it. */ #chrome:has(#signin-panel:not([hidden])) ~ #intro { display: none; } } #filters-open[aria-expanded="true"], #taxa-open[aria-expanded="true"], #people-open[aria-expanded="true"] { background: var(--accent); color: var(--accent-fg); border-color: transparent; } /* People filter panel — admin only, same positioning as the other panels. */ #people-filters { position: absolute; z-index: 16; top: 5.8rem; left: .8rem; width: min(18rem, calc(100vw - 1.6rem)); max-height: min(28rem, calc(100vh - 6rem)); display: flex; flex-direction: column; padding: .9rem 1rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); } #people-filters .f-group { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } #people-chips { display: flex; flex-wrap: wrap; gap: .3rem; } #people-chips:not(:empty) { margin-bottom: .4rem; } #people-q { width: 100%; min-height: 40px; padding: .45rem .6rem; font: inherit; font-size: .9rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; flex: 0 0 auto; } #people-list { margin-top: .35rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; } #people-list:empty { display: none; } #people-filters .f-actions { position: sticky; bottom: 0; display: flex; gap: .5rem; margin: .3rem -1rem -1rem; padding: .6rem 1rem 1rem; background: var(--surface); flex: 0 0 auto; } #people-filters .f-actions button { flex: 1; box-shadow: none; min-height: 40px; font-size: .9rem; } @media (max-width: 42rem) { #people-filters { top: auto; bottom: 0; left: .6rem; right: .6rem; width: auto; max-height: 65vh; border-radius: var(--radius) var(--radius) 0 0; } } /* Taxa filter panel — opens below the Taxa button on the left. */ #taxa-filters { position: absolute; z-index: 16; top: 5.8rem; left: .8rem; width: min(18rem, calc(100vw - 1.6rem)); max-height: min(32rem, calc(100vh - 6rem)); display: flex; flex-direction: column; padding: .9rem 1rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); } #taxa-filters .f-group { flex: 0 0 auto; display: flex; flex-direction: column; } #taxa-filters .f-group:last-of-type { flex: 1 1 auto; min-height: 4rem; } /* Genus chips — same pattern as the people picker chips. */ #taxa-chips { display: flex; flex-wrap: wrap; gap: .3rem; } #taxa-chips:not(:empty) { margin-bottom: .4rem; } .taxa-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .3rem .18rem .55rem; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: .78rem; font-weight: 600; } .taxa-chip button { min-height: 0; padding: 0 .25rem; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: inherit; font-size: .9rem; line-height: 1; opacity: .8; cursor: pointer; } /* Search inputs — match the people-picker input. */ #taxa-genus-q, #taxa-species-q { width: 100%; min-height: 40px; padding: .45rem .6rem; font: inherit; font-size: .9rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; flex: 0 0 auto; } /* Scrollable list areas. The genus list has a fixed cap; the species list fills the remaining panel height. */ #taxa-genus-list, #rec-taxa-genus-list { margin-top: .35rem; max-height: 8rem; overflow-y: auto; } #taxa-species-list, #rec-taxa-species-list { margin-top: .35rem; max-height: 14rem; overflow-y: auto; } #taxa-genus-list:empty, #rec-taxa-genus-list:empty, #taxa-species-list:empty, #rec-taxa-species-list:empty { display: none; } /* Genus row — same pattern as .f-person. */ .taxa-genus-row { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .4rem .5rem; min-height: 38px; border: 0; border-radius: 8px; box-shadow: none; background: transparent; text-align: left; font: inherit; font-size: .88rem; font-weight: 600; font-style: italic; cursor: pointer; } .taxa-genus-row:hover, .taxa-genus-row:focus-visible { background: var(--bg); } .taxa-genus-row[aria-selected="true"] { color: var(--accent); } .taxa-genus-row .tick { width: 1rem; color: var(--accent); font-size: .8rem; } /* Species row — same pattern, indented. */ .taxa-species-row { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .35rem .5rem; min-height: 36px; border: 0; border-radius: 8px; box-shadow: none; background: transparent; text-align: left; font: inherit; font-size: .84rem; font-style: italic; cursor: pointer; } .taxa-species-row:hover, .taxa-species-row:focus-visible { background: var(--bg); } .taxa-species-row[aria-selected="true"] { font-weight: 600; } .taxa-species-row .tick { width: 1rem; color: var(--accent); font-size: .8rem; } #taxa-filters .f-actions { position: sticky; bottom: 0; display: flex; gap: .5rem; margin: .3rem -1rem -1rem; padding: .6rem 1rem 1rem; background: var(--surface); flex: 0 0 auto; } #taxa-filters .f-actions button { flex: 1; box-shadow: none; min-height: 40px; font-size: .9rem; } /* Mobile: taxa panel as a bottom sheet. */ @media (max-width: 42rem) { #taxa-filters { top: auto; bottom: 0; left: .6rem; right: .6rem; width: auto; max-height: 65vh; border-radius: var(--radius) var(--radius) 0 0; } } /* The date and scope groups keep their natural height; only the people group * gives, because only it contains a list that can be any length. */ .f-group { margin-bottom: .95rem; flex: 0 0 auto; } .f-group:last-of-type { margin-bottom: .6rem; } #f-people-group { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 6rem; } .f-legend { display: block; margin-bottom: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: calc(.06em * var(--track)); text-transform: uppercase; color: var(--muted); } .f-dates { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .4rem .5rem; } .f-dates label { font-size: .82rem; color: var(--muted); } .f-dates input { width: 100%; min-height: 40px; padding: .4rem .55rem; font: inherit; font-size: .9rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; } /* Segmented control. One of the two is always `aria-pressed`, so the state is * readable without relying on the colour alone. */ #f-who { display: flex; gap: 0; } #f-who button { flex: 1; min-height: 40px; padding: .4rem .6rem; font-size: .88rem; border-radius: 0; box-shadow: none; background: var(--bg); color: var(--muted); } #f-who button:first-child { border-radius: 999px 0 0 999px; } #f-who button:last-child { border-radius: 0 999px 999px 0; border-left: 0; } #f-who button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 600; } /* The people picker. A selection here OVERRIDES the Mine/Everyone control * above, so the chips have to be visible whenever any are set — a hidden * selection silently narrowing the map is exactly the kind of invisible filter * this project has been bitten by before. */ #f-chips { display: flex; flex-wrap: wrap; gap: .3rem; } #f-chips:not(:empty) { margin-bottom: .4rem; } .f-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .3rem .18rem .55rem; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: .78rem; font-weight: 600; } .f-chip button { min-height: 0; padding: 0 .25rem; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: inherit; font-size: .9rem; line-height: 1; opacity: .8; } .f-chip button:hover { opacity: 1; } #f-person-q { width: 100%; min-height: 40px; padding: .45rem .6rem; font: inherit; font-size: .9rem; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; } #f-person-list { margin-top: .35rem; flex: 1 1 auto; min-height: 0; /* or a flex child refuses to shrink below its content */ overflow-y: auto; } #f-person-q { flex: 0 0 auto; } #f-person-list:empty { display: none; } .f-person { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .5rem; min-height: 40px; border: 0; border-radius: 8px; box-shadow: none; background: transparent; text-align: left; font-size: .88rem; } .f-person:hover, .f-person:focus-visible { background: var(--bg); } .f-person[aria-selected="true"] { font-weight: 600; } .f-person .tick { width: 1rem; color: var(--accent); } .f-person .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .f-person .lead { font-size: .68rem; font-weight: 600; letter-spacing: calc(.04em * var(--track)); text-transform: uppercase; color: var(--muted); } .f-empty { padding: .45rem .5rem; font-size: .84rem; color: var(--muted); } /* Pinned to the bottom of the scrolling panel, not sitting at the end of it. * * Found by a click that reported success and did nothing: as a LEAD the panel * grows a whole extra section — the people picker — and on a laptop viewport * Clear and Done end up below the panel's own scroll line. The controls that * undo a filter must never be the ones you have to scroll to find, and this is * the role most likely to have set a filter worth undoing. * * The negative margins let the background span the panel's full width, so the * list scrolls *under* the bar rather than appearing beside it. */ .f-actions { position: sticky; bottom: 0; display: flex; gap: .5rem; margin: .3rem -1rem -1rem; padding: .6rem 1rem 1rem; background: var(--surface); } .f-actions button { flex: 1; box-shadow: none; min-height: 40px; font-size: .9rem; } /* ------------------------------------------------------------------ notice */ /* Failures only now — the empty map states itself in the chrome, beside the Filters button. Lifted clear of --nav-band: at this width it spans the whole of a phone screen, and it used to land squarely on the three navigation buttons and eat their taps. */ #notice { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-band) + .5rem); width: min(30rem, calc(100vw - 1.6rem)); padding: .8rem 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); font-size: .88rem; line-height: 1.45; } #notice strong { display: block; margin-bottom: .15rem; } #notice.err { border-left: 4px solid var(--danger); } /* ----------------------------------------------------------- message toast * The on-screen notice when a message arrives (lib/messages.js). Same corner, * same lift above the nav band as #notice, but it is a LINK to /messages and * it auto-dismisses, so it gets the accent treatment a call-to-action should * have rather than the neutral surface of a status line. One at a time, fading * in on entry and out on dismissal. */ .toast { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%) translateY(12px); bottom: calc(var(--nav-band) + .5rem); width: min(30rem, calc(100vw - 1.6rem)); padding: .8rem 1rem; border-radius: var(--radius); background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow); font-size: .88rem; line-height: 1.45; opacity: 0; transition: opacity .25s ease, transform .25s ease; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } } .toast a, .toast a:visited { color: var(--accent-fg); font-weight: 600; } .toast-close { position: absolute; top: .25rem; right: .35rem; border: 0; background: none; box-shadow: none; color: inherit; font-size: 1.1rem; padding: .15rem .4rem; min-height: 0; cursor: pointer; } /* -------------------------------------------------------------- sign-in sheet */ .sheet { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: rgba(10, 12, 10, .45); backdrop-filter: blur(2px); } .sheet form, .sheet-form { width: min(32rem, 100%); max-height: 100%; overflow-y: auto; padding: 1.3rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .sheet h2 { margin: 0 0 .4rem; font-size: 1.2rem; } .sheet label { display: block; margin: .9rem 0 .25rem; font-size: .82rem; font-weight: 600; color: var(--muted); } .sheet input { width: 100%; padding: .7rem .8rem; min-height: 44px; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; } .sheet .row { display: flex; gap: .5rem; margin-top: 1.1rem; } .sheet .row button { flex: 1; box-shadow: none; } /* .error is still live — it carries the sign-in failure message, which is the * only text left in this dialog besides the labels. */ .error { color: var(--danger); font-size: .86rem; margin: .8rem 0 0; } /* The "you're offline" banner (OFFLINE_PLAN §5a). A notice, not an error: * recording still works, and the record will be kept on this phone and sent * later. Used on the wizard, My Species and the outbox page. */ .offline-banner { color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--warm); border-radius: 8px; padding: .7rem .9rem; margin: 1rem 0; font-size: .9rem; } /* One queued record on /outbox — a stacked block (the .rec-row pattern is a * flex row for clickable list rows; these carry their own buttons). */ .outbox-item { padding: .7rem .8rem; margin-bottom: .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .outbox-item strong { display: block; font-size: .95rem; margin-bottom: .1rem; } .outbox-item .p-meta { margin-top: .15rem; } .outbox-item-actions { display: flex; gap: .75rem; margin-top: .6rem; } .outbox-item-actions button { min-height: 34px; } /* ------------------------------------------------ recipient picker listbox */ /* /send-message's recipient picker. A native