/* ============================================================================
   FISHBOOK — app.css  (every value comes from tokens.css)
   0.43.0 — one face (build 4 of the audit, drawn first and agreed by Zeka on 29 Oct 2026). The stylesheet was rewritten in
   one order: the base, the shell, then the shared shapes — the page head, the section, the row and the box of rows, the
   pill and the chip, the buttons and the quiet word, the fold, the boxes — and after them each page's own pieces. Every
   class is defined once (scripts/audit-check.js stops a release that defines one twice). One scale on every page: the
   title 22 px, a section heading 19 px, the blocks 12 px apart and 24 px before a section.
   ============================================================================ */

/* ---- 1 · Base ------------------------------------------------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-ground); color: var(--c-text);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column;
  overflow-x: clip;   /* nothing may push the page sideways; wide boxes scroll inside themselves */
}
a { color: var(--c-lake); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0; font-weight: var(--fw-bold); text-wrap: balance; }
h1 { font-size: var(--fs-h2); }
h2 { font-size: var(--fs-h3); }
h3 { font-size: var(--fs-body); }
p { margin: 0; }
code { font-family: var(--font-mono); font-size: 0.92em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.muted { color: var(--c-text-2); }
.nowrap { white-space: nowrap; }
.sep { color: var(--c-text-2); }

/* the icons (src/icons.js): one line weight for the whole set, set here — the wordmark's ratio */
.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.i .fill { fill: currentColor; stroke: none; }

/* ---- 2 · The shell: the top bar, the menu, the tab bar, the flash ---------------------------------------------------- */
.topbar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--sp-4); border-bottom: 1px solid var(--c-border); background: var(--c-bg); position: sticky; top: 0; z-index: 5; }
.wordmark { display: inline-flex; align-items: center; color: var(--c-lake); text-decoration: none; min-height: var(--touch-min); }
.wordmark .brand { display: block; height: 32px; width: auto; }
/* the drawn name: letters on the bar's link colour, the dots orange; at night the stroke eases to 9.6 (reversed-out type reads bolder) */
.brand .brand-dots { fill: var(--c-brand-dot); }
.topright { display: flex; align-items: center; gap: 0; min-width: 0; }   /* 0.55.3 (Zeka, 2 Nov: "even more closer"): the tap areas touch, one even step from the name to the language */
.topright > .me, .topright > .pill.login { margin-right: 6px; }
.lang { font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--c-text-2); border: 0; border-radius: var(--r-md); padding: 0 8px; min-height: 44px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; flex: none; }   /* the language: a quiet word, 44 px tall, as wide as its letters — never cut */
select.lang { appearance: none; -webkit-appearance: none; }
.langform { margin: 0; }
.pill.login { min-height: 44px; padding: 0 16px; background: var(--c-lake-fill); color: var(--c-text-on-fill); text-decoration: none; flex: none; }
/* who you are: the ring around your initial carries the news (gold — nothing waits; the like's blue — news; amber — a draft) */
.me { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: var(--c-text); min-width: 0; }
.me .ring { position: relative; width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; display: grid; place-items: center; flex: none; }
.me .ring svg { position: absolute; inset: 5px; width: 34px; height: 34px; transform: rotate(-90deg); pointer-events: none; }
.me .ring circle { fill: none; stroke: var(--c-gold); stroke-width: 2.4; }
.me .ring .solid { stroke-dasharray: 100 0; }
.me .ring .dash { stroke-dasharray: 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 6 3 0 101; stroke-dashoffset: 100; opacity: 0; }
.me .ring.likes circle { stroke: var(--c-likes); }
.me .ring.draft circle { stroke: var(--c-ring-draft); }
.me .ring .av { width: 26px; height: 26px; border-radius: 50%; background: var(--c-lake-soft); color: var(--c-lake); font-weight: var(--fw-bold); font-size: 12px; display: grid; place-items: center; overflow: hidden; }
.me .ring .av img { width: 26px; height: 26px; object-fit: cover; display: block; border-radius: 50%; }
.me .ring .live { position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-live); box-shadow: 0 0 0 2px var(--c-bg); pointer-events: none; }
.me .ring:focus-visible { outline: 2px solid var(--c-lake); outline-offset: 2px; box-shadow: none; }
.me .ring.sweep .solid { animation: ringsweep .7s cubic-bezier(.4,0,.2,1) forwards, ringbold .24s ease-out .72s; }
.me .ring.draft.sweep .solid { animation: ringappear .001s linear .7s forwards, ringbold .26s ease-out .72s; opacity: 0; }
.me .ring.draft.sweep .dash { animation: ringdashin .7s cubic-bezier(.4,0,.2,1) forwards, ringmelt .22s ease-out .7s forwards; }
@keyframes ringsweep { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 0; } }
@keyframes ringdashin { from { stroke-dashoffset: 100; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ringmelt { from { opacity: 1; stroke-width: 2.4; } to { opacity: 0; stroke-width: 4.2; } }
@keyframes ringappear { to { opacity: 1; } }
@keyframes ringbold { 0% { stroke-width: 2.4; } 45% { stroke-width: 4.2; } 100% { stroke-width: 2.4; } }
@media (prefers-reduced-motion: reduce) { .me .ring.sweep .solid, .me .ring.draft.sweep .solid, .me .ring.draft.sweep .dash { animation: none !important; } .me .ring.draft.sweep .solid { opacity: 1; } }
.me .nm { color: var(--c-text); text-decoration: none; min-height: 44px; line-height: 44px; display: block; flex: 0 1 auto; min-width: 0; font-weight: var(--fw-bold); font-size: var(--fs-small); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 0.50.0 (F39): a block, so a long name ends in "…" */
@media (max-width: 359px) { .me .nm { display: none; } }
.me .menu { position: absolute; top: 50px; right: 0; max-width: calc(100vw - 24px); min-width: 210px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-raised); overflow: hidden; z-index: 6; }
.me .menu a, .me .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 14px; min-height: var(--touch-min); text-decoration: none; color: var(--c-text-2); font: inherit; font-weight: var(--fw-regular); font-size: var(--fs-small); background: none; border: 0; border-top: 1px solid var(--c-border); text-align: left; cursor: pointer; }
.me .menu a:has(.dot) { color: var(--c-text); font-weight: var(--fw-bold); }
.me .menu > :first-child, .me .menu form:first-child button { border-top: 0; }
.me .menu form { margin: 0; }
.me .menu .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.me .menu .dot.likes { background: var(--c-likes); } .me .menu .dot.draft { background: var(--c-ring-draft); } .me .menu .dot.live { background: var(--c-live); }
.me .menu .tm { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-2); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }   /* 0.55.0: the menu lines up with the right end of the name and never runs past the screen (Zeka: narrower, never cut) */
.me .menu .tm .i { width: 16px; height: 16px; }
@media (max-width: 439px) { .me .menu { position: fixed; top: 56px; right: var(--sp-2); max-width: calc(100vw - 2 * var(--sp-2)); } }   /* 0.55.0: a phone — the menu at the screen's right edge, inside it whatever stands beside the ring (Aa, Admin for the owners) */
.tb { position: relative; width: 40px; height: 40px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-2); text-decoration: none; border: 1.5px solid transparent; flex: none; } .tb::after { content: ""; position: absolute; inset: -3.5px -1.5px; }   /* 0.55.3: 40 px wide, the place to tap 44 tall; a ring (Admin open) stays round */
.tb[aria-current="true"] { color: var(--c-lake); border-color: var(--c-border-strong); }
.tb.theme .sun { display: none; }
.screen { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: var(--sp-4) var(--sp-4) calc(var(--touch-tab) + env(safe-area-inset-bottom, 0px) + 72px);   /* the last line clears the Add disc and the phone's own inset */ display: flex; flex-direction: column; gap: var(--sp-3); }
.screen > .sect, .screen > .btnrow, .screen > .feed, .screen > .loadmore { margin-top: var(--sp-5); }   /* 32 px before a section and before the page's button (0.43.0, Zeka: more air) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: calc(var(--touch-tab) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--c-border); background: var(--c-bg); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--touch-min); color: var(--c-text-2); text-decoration: none; font-size: var(--fs-label); font-weight: var(--fw-bold); position: relative; }
.tab .i { width: 26px; height: 26px; }
.tab.active { color: var(--c-lake); }
.tab.active::before { content: ""; position: absolute; top: 0; width: 36px; height: 4px; border-radius: 0 0 4px 4px; background: var(--c-mark); }
.tab.add { justify-content: flex-start; }
.tab.add .disc { width: var(--touch-add); height: var(--touch-add); border-radius: 50%; background: var(--c-float-fill); color: var(--c-text-on-fill); display: grid; place-items: center; margin-top: -26px; box-shadow: var(--shadow-raised); border: 3px solid var(--c-bg); }
.tab.add .disc .i { width: 32px; height: 32px; stroke-width: 3; }
.tab.add span:last-child { color: var(--c-float); }
.tab.add.active::before { display: none; }
.flash { max-width: 640px; margin: var(--sp-3) auto 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-weight: var(--fw-bold); width: calc(100% - 32px); position: sticky; top: 64px; z-index: 4; box-shadow: var(--shadow-raised); }   /* sticky: a page that comes back to its row still shows the word */
.flash.ok { background: var(--c-ok-soft); color: var(--c-ok); }
.flash.error { background: var(--c-danger-soft); color: var(--c-danger); }
.flash.warn { background: var(--c-warn-bg); color: var(--c-warn-text); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.flash .btn { margin-top: var(--sp-2); }
.flash .qlink { color: inherit; font-weight: var(--fw-bold); text-decoration: underline; }
.flash-link { display: block; margin-top: var(--sp-2); font-weight: var(--fw-regular); color: inherit; word-break: break-all; text-decoration: underline; }
[data-problem] { scroll-margin-top: 80px; }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-text); color: var(--c-bg); font-weight: var(--fw-bold); font-size: var(--fs-small); z-index: 20; box-shadow: var(--shadow-raised); }

/* ---- 3 · The page head: one back link, the title, the line under it ---------------------------------------------------- */
.pagehead { display: grid; gap: var(--sp-1); }
.pagehead h1 { overflow-wrap: anywhere; }
.pagehead h1 a { color: inherit; text-decoration: none; }
.pagehead .sub { color: var(--c-text-2); font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; }
.pagehead .sub a { text-decoration: none; position: relative; }
.pagehead .sub a::before { content: ""; position: absolute; inset: -12px -4px; }   /* 0.50.0 (F5): a link in the line under the title reaches 44 px */
.pagehead .sub .i { width: 18px; height: 18px; }
.pagehead .titlerow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.back { display: inline-flex; align-items: center; gap: 2px; align-self: start; justify-self: start; min-height: 32px; margin: -6px 0 -2px -6px; padding: 0 6px; color: var(--c-lake); font-size: var(--fs-small); font-weight: var(--fw-bold); text-decoration: none; position: relative; }
.back::before { content: ""; position: absolute; inset: -6px 0; }   /* the tap reaches 44 px; the word stays small */
.back .i { width: 18px; height: 18px; }

/* ---- 4 · A section: its heading (with the count and one quiet door), a list label ------------------------------------- */
.sect { display: grid; gap: var(--sp-2); }
.sect > .btn, .sect > .qlink, .step > .qlink, .ask > .qlink { justify-self: start; }
.shead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 32px; }
.shead h2 { margin: 0; }
.shead h2 a { color: inherit; text-decoration: none; }
.count { display: inline; font-weight: var(--fw-regular); color: var(--c-text-2); font-variant-numeric: tabular-nums; }   /* the "· n" after a heading; the fish count box is .countbox */
.gh { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2); padding: var(--sp-2) 0 0; }
.gh:first-child { padding-top: 0; }

/* ---- 5 · The row and the box of rows: every list on the site --------------------------------------------------------- */
/* .rows is the box; its rows are divided by one hairline. A row: a lead (icon tile · avatar · picture), the words (one bold
   line, one grey line), the end (a count, a state word, a picture, a button) and the chevron when the row opens a page. */
.rows { display: grid; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.rows > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid var(--c-border); }
.rows > :focus-visible { box-shadow: inset var(--focus-ring); border-radius: 0; }
.swrow { padding: var(--sp-2) var(--sp-4); display: grid; gap: var(--sp-2); }   /* a row that holds one switch */
.swrow > noscript > .btn { justify-self: start; }
.wrow { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: var(--sp-2) var(--sp-3); color: var(--c-text); text-decoration: none; position: relative; min-width: 0; }
.wrow:target { box-shadow: inset 0 0 0 2px var(--c-lake); scroll-margin-top: 72px; }   /* back to where you were: the row you came from stands out */
.wrow > .ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--c-ground); display: grid; place-items: center; flex: none; color: var(--c-text-2); }
.wrow > .ic .i { width: 24px; height: 24px; }
.wrow > .av { width: 40px; height: 40px; border-radius: 50%; background: var(--c-lake-soft); color: var(--c-lake); display: grid; place-items: center; font-weight: var(--fw-bold); flex: none; overflow: hidden; text-decoration: none; }
.wrow > .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrow > a.av { position: relative; overflow: visible; } .wrow > a.av::before { content: ""; position: absolute; inset: -2px; }   /* an avatar that is its own link: 44 px to the finger */
.wrow > a.av img { border-radius: 50%; }
.wrow > .av.gold { background: var(--c-surface); box-shadow: inset 0 0 0 2px var(--c-gold); color: var(--c-gold-text); }
.wrow > .av.green { background: var(--c-ok-soft); color: var(--c-ok); }
.wrow > .th, .wrow > a.th { width: 64px; height: 48px; border-radius: var(--r-sm); flex: none; background: var(--c-ground); overflow: hidden; display: block; }
.wrow > .th img, .wrow > a.th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrow > .pl { width: 26px; flex: none; text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--c-text-2); font-size: var(--fs-small); }
.wrow > .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wrow > .tx > b { font-size: var(--fs-body); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.wrow.door > .tx > b { font-weight: var(--fw-regular); }   /* 0.43.0 (Zeka): a row that only opens another page has nothing to stress */
.wrow > .tx > b a { color: inherit; text-decoration: none; }
.wrow > .tx > b small { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--c-text-2); }
.wrow > .tx > b small a { color: inherit; }
.wrow > .tx > span { font-size: var(--fs-small); color: var(--c-text-2); overflow-wrap: anywhere; }
.wrow > .tx > .ln { color: var(--c-text); }   /* a sentence for a first line (What's new): the regular weight, one name in bold */
.wrow > .tx > .ln b { font-weight: var(--fw-bold); }
.wrow > .tx > span a { color: inherit; text-decoration: none; }
.wrow > .tx em { font-style: normal; color: var(--c-lake); }
.wrow > .tx .best { color: var(--c-text); }
.wrow > .n { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.wrow > .st { flex: none; font-size: var(--fs-small); color: var(--c-text-2); white-space: nowrap; }
.wrow > .st.in { color: var(--c-ok); }
.wrow > .chev { color: var(--c-text-2); flex: none; display: grid; }
.wrow > .chev .i { width: 20px; height: 20px; }
.wrow > form { flex: none; margin: 0; }
.wrow.own, .wrow.unread { box-shadow: inset 3px 0 0 var(--c-line-on); }   /* yours, or not yet seen: a bar at the left — the lake by day, grey at night */
.wrow.live > .ic { color: var(--c-live); background: var(--c-ok-soft); }
.wrow.gone > .tx > b { text-decoration: line-through; color: var(--c-text-2); }
.wrow.faded { opacity: .55; }
.wrow.selected { background: var(--c-lake-soft); }
a.wrow { -webkit-tap-highlight-color: transparent; transition: background-color .12s ease-out; }
a.wrow:active, .fold > summary:active { background: var(--c-lake-soft); background: color-mix(in srgb, var(--c-lake) 18%, var(--c-surface)); }   /* 0.43.0 (Zeka): the row you tap takes the lake's tint for a moment */
@media (hover: hover) { a.wrow:hover, .fold > summary:hover { background: color-mix(in srgb, var(--c-lake) 8%, var(--c-surface)); } }

/* ---- 6 · The pill (a label) and the chip (a choice) ------------------------------------------------------------------ */
/* a pill says what something is and is never a button; it is one size everywhere: 24 px, the label type */
.pill { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-label); font-weight: var(--fw-bold); line-height: 1.2; background: var(--c-lake-soft); color: var(--c-lake); white-space: nowrap; vertical-align: middle; text-decoration: none; }
.pill .i { width: 16px; height: 16px; margin: -2px 0; }   /* the smallest an icon is drawn: 16 px */
.pill.ok, .pill.live { background: var(--c-ok-soft); color: var(--c-ok); }
.pill.warn { background: var(--c-warn-bg); color: var(--c-warn-text); }
.pill.grey { background: var(--c-tag-bg); color: var(--c-text-2); }
.pill.danger { background: var(--c-danger-soft); color: var(--c-danger); }
.pill.gone { background: var(--c-tag-bg); color: var(--c-text-2); text-decoration: line-through; }
a.pill { position: relative; } a.pill::before { content: ""; position: absolute; inset: -10px -2px; }   /* a pill that is a link: the tap reaches 44 px */
/* words that are a link or a button inside a line — the question's words, the plan's words on Home, a card's fish and trip,
   a name in "Who is coming" — keep their size; the tap reaches 44 px */
.ask .q, .startline > .words, .lead a, .ctrip a { position: relative; }
.ask .q::before, .startline > .words::before, .lead a::before, .ctrip a::before { content: ""; position: absolute; inset: -13px -2px; }
.pillrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* a chip is a choice you tap: a filter, a sort, a method, a day, a name; 44 px tall; on = the selected tone */
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); background: var(--c-tag-bg); color: var(--c-text); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; position: relative; white-space: nowrap; }
.chip.on { background: var(--c-lake-soft); color: var(--c-lake); border-color: var(--c-line-on); }
.chip .i { width: 20px; height: 20px; }
.chip .x { background: none; border: 0; padding: 0; margin: -2px -14px -2px -6px; color: inherit; opacity: .75; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; } .chip .x .i { width: 16px; height: 16px; }
.chipradio { position: relative; }
.chipradio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chipradio input:checked + .chip { background: var(--c-lake-soft); color: var(--c-lake); border-color: var(--c-line-on); }
[data-methods] .chip { font-weight: var(--fw-regular); }   /* 0.43.0 (Zeka): the icon already speaks in bold — the method's words in the regular weight */
[data-methods] .chip .i { width: 22px; height: 22px; }
.chipradio input:focus-visible + .chip { box-shadow: var(--focus-ring); }

/* ---- 7 · Buttons, the quiet word (a door, Show n more, Share, the first tap of two), the segment ----------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--touch-input); padding: 0 var(--sp-5); border-radius: var(--r-md); font: inherit; font-weight: var(--fw-bold); border: 2px solid transparent; cursor: pointer; text-decoration: none; color: var(--c-text); background: var(--c-surface); }
.btn .i { width: 20px; height: 20px; }
.btn.primary { background: var(--c-lake-fill); color: var(--c-text-on-fill); }
.btn.accent { background: var(--c-float-fill); color: var(--c-text-on-fill); }   /* the one main action of a page: Post now, Start, Plan */
.btn.secondary { background: var(--c-surface); color: var(--c-lake); border-width: 1.5px; border-color: var(--c-line-on); }
.btn.danger { background: var(--c-danger-fill); color: var(--c-text-on-fill); }   /* filled danger only as the second tap */
.btn.danger-outline { background: transparent; color: var(--c-danger); border-color: var(--c-danger); }
.btn.block { width: 100%; }
.btn.small { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-small); }
.btn.armed { filter: brightness(1.15); }
.btn[disabled] { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: no-preference) { .btn { transition: filter .12s; } .btn:hover { filter: brightness(0.94); } }
.btnrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.btnrow .btn { flex: 1 1 auto; }
.btnrow > form, .btnrow > .cell { flex: 1 1 auto; display: grid; margin: 0; }   /* 0.47.0: .cell, a link in a form's place */
.btnrow.start .btn, .btnrow.start > form { flex: 0 0 auto; }
/* the quiet word: a door to another page ("All past trips ›"), more of a list in place ("Show 4 more ›"), Share, Edit, the
   first tap of a two-step. The lake colour, the regular weight, the small type, a 44 px tap. */
.qlink { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--c-lake); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-align: left; position: relative; }
.qlink .i { width: 18px; height: 18px; }
.qlink.danger { color: var(--c-danger); }
.qlink.strong { font-weight: var(--fw-bold); }
.qlink[disabled] { opacity: .55; cursor: default; }
.qlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-5); }
.qlinks form { display: inline-flex; align-items: center; gap: var(--sp-3); margin: 0; }
.morerows { justify-self: start; }
/* the segment: two or three choices side by side, one on */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); overflow: hidden; background: var(--c-field); }
.seg > a, .seg > label, .seg > button { min-height: var(--touch-min); display: grid; place-items: center; padding: 4px 8px; text-align: center; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.25; color: var(--c-text-2); text-decoration: none; background: none; border: 0; border-left: 1.5px solid var(--c-border-strong); cursor: pointer; position: relative; }
.seg > :is(a, label, button):first-of-type { border-left: 0; }   /* a form's hidden fields come first */
.seg > .on, .seg > label:has(input:checked), .seg > [aria-pressed="true"] { background: var(--c-lake-fill); color: var(--c-text-on-fill); }
.seg > label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg > label:has(input:focus-visible) { box-shadow: inset var(--focus-ring); }
.seg.tall > a { min-height: 56px; }   /* Top's period bar: the words may wrap, nothing ends on a cut line */
.seg.five { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); }   /* the water types: three, then two */
.seg.five > label { grid-column: span 2; border-top: 1.5px solid var(--c-border-strong); }
.seg.five > label:nth-child(-n+3) { border-top: 0; } .seg.five > label:nth-child(4) { border-left: 0; } .seg.five > label:nth-child(n+4) { grid-column: span 3; }

/* ---- 8 · The fold: a box that opens on a tap, the chevron turns ------------------------------------------------------ */
.fold { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.fold > summary { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-4); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::marker { content: ""; }
.fold > summary .ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--c-ground); display: grid; place-items: center; flex: none; color: var(--c-text-2); }
.fold > summary .tx { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: var(--fs-small); }
.fold > summary .tx b { font-size: var(--fs-small); }
.fold > summary .tx span { color: var(--c-text-2); }
.fold > summary > .chev { color: var(--c-text-2); flex: none; display: grid; transition: transform .15s; }
.fold > summary > .chev .i { width: 20px; height: 20px; }
.fold[open] > summary > .chev { transform: rotate(90deg); }
.fold > .in { padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); }
.fold > .in > .facts { border: 0; border-top: 1px dashed var(--c-border); border-radius: 0; padding: var(--sp-3) 0 0; background: none; }
.fold.plain { background: none; border: 0; }   /* a fold inside a form (Admin): no box, the same summary */
.fold.plain > summary { min-height: 44px; padding: 0; color: var(--c-lake); font-size: var(--fs-small); }
.fold.plain > .in { padding: var(--sp-2) 0 0; }

/* ---- 9 · The boxes: a question, a warning, a note; the empty line; the help line ------------------------------------- */
/* a question waiting for your answer: the words, then the two buttons */
.ask { display: grid; gap: 8px; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-ground); font-size: var(--fs-small); }
.ask b { font-size: var(--fs-body); }
.ask > span { color: var(--c-text-2); }
.ask .q { display: flex; align-items: baseline; gap: 8px; color: var(--c-text); text-decoration: none; }
.ask .q .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c-live); transform: translateY(-1px); }
.asks { display: grid; gap: var(--sp-2); }
/* a warning: the amber box (a closed season, a number over the limit, a near duplicate, a staff note) */
.caution { background: var(--c-warn-bg); color: var(--c-warn-text); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3); font-size: var(--fs-small); }
.caution a { color: inherit; font-weight: var(--fw-bold); }
.caution .lead { display: flex; gap: var(--sp-3); align-items: flex-start; font-weight: var(--fw-bold); font-size: var(--fs-body); }
.caution .lead .i { width: 30px; height: 30px; margin-top: -2px; }
.caution .lead span { flex: 1; min-width: 0; }
.caution.line { display: flex; align-items: center; gap: var(--sp-3); font-weight: var(--fw-bold); }
.caution.line > span { flex: 1; min-width: 0; }
a.caution { text-decoration: none; }
/* a note: a plain fact about the page in a quiet box (a cancelled trip, a water not yet checked, a link that is closed) */
.note { padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-ground); font-size: var(--fs-small); display: grid; gap: 4px; }
.note b, .note strong { font-size: var(--fs-body); }
/* nothing here yet: one quiet line, no box; a door at its end when there is one */
.empty { margin: 0; font-size: var(--fs-small); color: var(--c-text-2); }
.rows > .emptyrow { margin: 0; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); color: var(--c-text-2); }   /* 0.45.0: an empty queue in Admin says so inside its box */
.empty .qlink { min-height: 0; }
/* the help line: at most one per screen */
.help { margin: 0; color: var(--c-text-2); font-size: var(--fs-small); }
.help a { font-weight: var(--fw-bold); text-decoration: none; }
.quiet { margin: 0; font-size: var(--fs-small); color: var(--c-text-2); }
.quiet a { text-decoration: none; }

/* ---- 10 · Facts, the numbers line, the card ------------------------------------------------------------------------ */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); margin: 0; min-width: 0; }
.facts > b, .facts > dt { color: var(--c-text-2); font-weight: var(--fw-regular); }
.facts > span, .facts > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.facts a { text-decoration: none; }
.facts .factdoor { display: flex; width: fit-content; margin-top: 2px; }
.facts strong { font-weight: var(--fw-bold); color: var(--c-text); }
.facts .i { width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; color: var(--c-warn-text); }
.facts.priv { border-style: dashed; border-color: var(--c-border-strong); }
@media (max-width: 359px) { .facts { grid-template-columns: 1fr; gap: var(--sp-1); } .facts > b { margin-top: var(--sp-2); } }
.numline { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-small); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.numline b { color: var(--c-text); font-weight: var(--fw-regular); }
.card { background: var(--c-surface); border-radius: var(--r-lg); border: 1px solid var(--c-border); overflow: hidden; }
.card.pad { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.onlyyou { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2); }
.onlyyou .i { width: 16px; height: 16px; }

/* ---- 11 · Forms --------------------------------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: 6px; min-width: 0; }
.form > *, .screen > *, .sect > * { min-width: 0; }   /* a long choice in a select never widens the page */
.field > label, .label { font-weight: var(--fw-bold); font-size: var(--fs-small); }
.err { font-size: var(--fs-small); color: var(--c-danger); font-weight: var(--fw-bold); }
.err:empty { display: none; }
.input { height: var(--touch-input); border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-field); padding: 0 var(--sp-4); font: inherit; color: var(--c-text); width: 100%; }
.input:focus, .input:focus-visible { outline: none; box-shadow: none; border-color: var(--c-lake); }   /* a field being written in shows one stroke: its own border */
.input.invalid { border-color: var(--c-danger); border-width: 2px; }
textarea.input { height: auto; min-height: 120px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: var(--lh-body); }
textarea.input.words { min-height: 96px; }
select.input { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; text-overflow: ellipsis; }
.input.narrow { max-width: 200px; }
.input.grow { flex: 1; min-width: 0; }
.input.grow2 { flex: 2; min-width: 0; }
.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-small); min-height: var(--touch-min); }
.check input { width: 26px; height: 26px; margin: 1px 0 0; accent-color: var(--c-lake-fill); flex: 0 0 26px; }
.check small { display: block; color: var(--c-text-2); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.rowform { display: flex; gap: var(--sp-2); align-items: center; margin: 0; }
.rowform.grow { flex: 1; }
form.inline { display: inline; margin: 0; }
.qline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); margin: 0; }   /* a quiet word and its grey line */
/* a long form: steps 24 px apart, each with its label line (the label, and one grey word or the optional mark) */
.cform { display: grid; gap: var(--sp-6); }
.cform .step { display: grid; gap: var(--sp-3); min-width: 0; }
.cform .step > * { min-width: 0; }
.sh { display: flex; align-items: baseline; gap: 2px var(--sp-3); flex-wrap: wrap; }
.sh b, .sh label b { font-size: var(--fs-h3); }
.sh > span { font-size: var(--fs-small); color: var(--c-text-2); }
.sh > .ln { flex-basis: 100%; }
.shead h2 .opt { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--c-text-2); margin-left: var(--sp-2); }   /* "optional" beside a section heading, as beside a field's label */   /* 0.50.0 (the after-check, F17): a hint is one grey line under the label; "optional" stays beside it */
/* the number box with its unit inside; the two side by side */
.unit { display: flex; align-items: center; min-width: 0; height: 56px; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-field); padding: 0 var(--sp-4); gap: var(--sp-2); }
.unit input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text); height: 100%; padding: 0; }
.unit input:focus, .unit input:focus-visible { outline: none; box-shadow: none; }
.unit input::placeholder { font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--c-text-2); }
.unit .u { color: var(--c-text-2); font-weight: var(--fw-bold); font-size: var(--fs-small); white-space: nowrap; }
.unit:focus-within { border-color: var(--c-lake); }
.unit.invalid { border-color: var(--c-danger); }
.unit.short { max-width: 280px; }
.unit input[type="time"] { min-width: 6em; flex: 0 1 auto; font-size: var(--fs-body); }   /* a time keeps room for its digits beside the word */
.unit input:disabled { color: var(--c-text-2); } .unit:has(input:disabled) { background: var(--c-ground); border-style: dashed; }
.times, .sizes, .daterow { display: grid; gap: var(--sp-3); }
.sizes, .daterow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* minmax(0, …): a number field's own width must not widen the page */
.times .unit input, .daterow .unit input { font-size: var(--fs-body); }
.times { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }   /* a time keeps its word beside it: below 330 px the two fields stand one above the other */
.sizes.length-first [data-unit="length"] { order: -1; }
.sizes:not(.length-first) [data-unit]:first-child, .sizes.length-first [data-unit="length"] { border-color: var(--c-line-on); }   /* 0.50.0 (F18): the marking line, grey at night */
/* the switch */
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--touch-min); cursor: pointer; }
.switch .k { font-weight: var(--fw-bold); display: grid; }
.switch .k small { font-weight: var(--fw-regular); font-size: var(--fs-small); color: var(--c-text-2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .sw { flex: none; width: 52px; height: 32px; border-radius: 999px; background: var(--c-sw-off); box-shadow: inset 0 0 0 1.5px var(--c-sw-off-ring); position: relative; transition: background .15s; }
.switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-knob); box-shadow: var(--shadow-knob); transition: left .15s; }
.switch input:checked ~ .sw { background: var(--c-sw-on); box-shadow: none; }
.switch input:checked ~ .sw::after { left: 23px; background: var(--c-knob-on); }
.switch input:indeterminate ~ .sw { background: var(--c-sw-on); opacity: .55; } .switch input:indeterminate ~ .sw::after { left: 13px; }
.switch input:focus-visible ~ .sw { box-shadow: inset 0 0 0 1.5px var(--c-sw-off-ring), var(--focus-ring); }
.switch.line { min-height: 44px; } .switch.line .k { font-weight: var(--fw-regular); font-size: var(--fs-small); }
.switch.line .sw { width: 42px; height: 26px; } .switch.line .sw::after { width: 20px; height: 20px; } .switch.line input:checked ~ .sw::after { left: 19px; }
.topic .lines { display: grid; margin: 0 0 var(--sp-1) var(--sp-3); padding-left: var(--sp-3); border-left: 2px solid var(--c-border); }   /* a notice kind with several lines */
.pstate .k { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }   /* this phone's notification state */
.pstate .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-border-strong); flex: none; } .pstate .dot.on { background: var(--c-live); }
/* the three-way choice (where the place is shown; Admin's money forms) */
.seg3 { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); overflow: hidden; background: var(--c-field); }
.seg3.two { grid-template-columns: 1fr 1fr; }
.seg3 .s3 { min-height: 52px; display: grid; place-items: center; text-align: center; font-size: var(--fs-small); font-weight: var(--fw-bold); border-left: 1.5px solid var(--c-border-strong); padding: 6px 4px; cursor: pointer; color: var(--c-text); position: relative; }
.seg3 .s3:first-child { border-left: 0; } .seg3 .s3.on { background: var(--c-lake-fill); color: var(--c-text-on-fill); }
.seg3 .s3 input { position: absolute; opacity: 0; width: 1px; height: 1px; } .seg3 .s3:focus-within { outline: 2px solid var(--c-lake); outline-offset: -2px; }
/* the picker: a field that offers names as you type */
.picker { position: relative; }
.picker .menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 4; background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-raised); }
.picker .menu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--c-border); padding: var(--sp-2) var(--sp-4); min-height: var(--touch-min); font: inherit; color: var(--c-text); cursor: pointer; }
.picker .menu button:first-child { border-top: 0; }
.picker .menu button span { display: block; font-size: var(--fs-small); color: var(--c-text-2); }
.picker .menu button.active, .picker .menu button:hover { background: var(--c-lake-soft); }
/* the search field */
.search { display: flex; align-items: center; gap: var(--sp-3); height: var(--touch-input); border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-field); padding: 0 var(--sp-4); color: var(--c-text); }
.search > .i { color: var(--c-text-2); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: inherit; height: 100%; padding: 0; }
.search input:focus { outline: none; box-shadow: none; }
.search:focus-within { border-color: var(--c-lake); }
.search input::placeholder { color: var(--c-text-2); opacity: 1; }
.search .clear { flex: none; width: 44px; height: 44px; margin-right: calc(-1 * var(--sp-3)); border: 0; background: transparent; color: var(--c-text-2); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.search .clear:active { background: var(--c-ground); }
/* the line you type into, with its button: a new list, a line on a list, a name */
.addrow { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: 0; }
.addrow .input, .addrow .picker { flex: 1 1 160px; min-width: 0; }
.addrow .chkmini { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); min-height: 44px; cursor: pointer; }
.addrow .chkmini input { width: 22px; height: 22px; accent-color: var(--c-float); }
.counter { font-size: var(--fs-label); color: var(--c-text-2); text-align: right; font-variant-numeric: tabular-nums; }
.danger-zone { margin-top: var(--sp-6); }
/* the date chips and the time chip (the Add screen, Log a trip, a challenge's days) */
.datechips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.datechips .chip { background: var(--c-ground); }
.datechips .chip.on { background: var(--c-lake-fill); color: var(--c-text-on-fill); border-color: transparent; }
.datechips .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.datechips .timepick input { position: static; opacity: 1; width: auto; height: auto; border: 0; background: transparent; font: inherit; font-weight: var(--fw-bold); color: inherit; padding: 0; }
.datechips .datepick, .datechips .timepick { position: relative; }
/* 0.43.0 (Zeka, 29 Oct): the short Add screen — your usual fish and water as chips, when as one line, Save at the foot */
.chips.quick .chip { font-weight: var(--fw-regular); }
.whenline { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.whenline > summary { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-3); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.whenline > summary::-webkit-details-marker { display: none; }
.whenline > summary::marker { content: ""; }
.whenline > summary .ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--c-ground); display: grid; place-items: center; flex: none; color: var(--c-text-2); }
.whenline > summary .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.whenline > summary .tx .k { font-size: var(--fs-small); color: var(--c-text-2); }
.whenline > summary .tx b { font-size: var(--fs-body); }
.whenline[open] > summary .qlink { visibility: hidden; }
.whenline > .in { padding: 0 var(--sp-3) var(--sp-3); display: grid; gap: var(--sp-3); }
.moredetails > .in { gap: var(--sp-5); }
.savebar { position: sticky; bottom: calc(var(--touch-tab) + env(safe-area-inset-bottom, 0px)); z-index: 3; padding: var(--sp-3) 0 34px; margin-bottom: -34px; background: linear-gradient(to bottom, transparent, var(--c-ground) var(--sp-3)); }   /* the foot clears the Add disc */
/* the photo of a contact message */
.filebtn { cursor: pointer; }
.filebtn.selected { background: var(--c-lake-soft); color: var(--c-lake); border-color: var(--c-lake); }
.photo-preview { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.photo-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-ground); }
.linkfield { display: grid; gap: var(--sp-2); }
.uploading { font-size: var(--fs-small); color: var(--c-text-2); }
.savebar .uploading { margin-top: var(--sp-2); text-align: center; }
.scroll { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border); vertical-align: top; }
.table th { font-size: var(--fs-small); color: var(--c-text-2); }

/* ============================================================================
   The pages' own pieces
   ============================================================================ */

/* ---- 12 · A catch: the card on a list, the post on its page, the marks on the photo ---------------------------------- */
.feed { display: grid; gap: var(--sp-4); }
.ccard { background: var(--c-surface); border-radius: var(--r-lg); border: 1px solid var(--c-border); overflow: hidden; scroll-margin-top: 64px; }
.ccard:target { outline: 2px solid var(--c-line-on); outline-offset: 2px; }   /* back to where you were */
.ph { display: block; position: relative; }
.ccard .ph { aspect-ratio: 16 / 9; background: linear-gradient(160deg, var(--c-lake-soft), var(--c-ground)); }   /* every card one size */
.ccard .ph .pic, .ccard .ph picture { display: block; width: 100%; height: 100%; }
.ccard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 0.50.0 (F25): a catch without a photo — a slim card; its tags, the weather and the likes as one quiet line under the meta */
.ccard.nophoto .cplain { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: var(--sp-1); color: var(--c-text-2); font-size: var(--fs-small); }
.ccard.nophoto .cplain .tags { display: contents; }
.ccard.nophoto .cplain .pill, .ccard.nophoto .cplain .wxline { background: none; padding: 0; min-height: 0; color: var(--c-text-2); }
.ph.post { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-border); background: var(--c-ground); }
.ph.post img { width: 100%; height: auto; display: block; }
.ph .over { position: absolute; left: 10px; top: 10px; display: grid; gap: 6px; justify-items: start; pointer-events: none; max-width: calc(100% - 20px); }   /* the weather line owns the top row */
.ph .tags { position: absolute; left: 10px; bottom: 10px; display: grid; gap: 6px; justify-items: start; pointer-events: none; max-width: calc(100% - 92px); }   /* the tags bottom-left, the fish bottom-right */
.ph .tags .pill.grey { background: var(--c-scrim); color: var(--c-on-photo); }
.ph .tags .pill.warn { background: var(--c-warn-bg); color: var(--c-warn-text); }
.ph .tags .pill.merged, .nophoto .tags .pill.merged { white-space: normal; }
.nophoto .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cb { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: 4px; }
.cpost { display: grid; gap: var(--sp-3); }
.cpost .cb { padding: var(--sp-1) 0 0; }
.lead { display: flex; align-items: baseline; gap: var(--sp-3); }
.lead .metric { font-size: 26px; font-weight: var(--fw-bold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lead .metric small { font-size: var(--fs-small); color: var(--c-text-2); }
.lead .species { font-weight: var(--fw-bold); color: var(--c-text); text-decoration: none; font-size: var(--fs-h3); }
.lead .total { color: var(--c-text-2); font-size: var(--fs-small); }
.lead .right { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; color: var(--c-text-2); }
.lead .right .i { width: 22px; height: 22px; }
.lead .right .rel { color: var(--c-ok); display: inline-flex; }
.lead .second { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.meta { font-size: var(--fs-small); color: var(--c-text-2); }
.meta a { color: var(--c-lake); text-decoration: none; }   /* 0.43.0: the doors in the regular weight — the lead above is the card's one bold */
.cwords { margin: 6px 0 0; font-size: var(--fs-small); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cwords a { color: inherit; text-decoration: none; }
.ctrip { margin: 4px 0 0; font-size: var(--fs-small); color: var(--c-text-2); }
.ctrip a { color: inherit; text-decoration: none; }
.cpost .gallery img, .cpost .gallery picture img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); background: var(--c-ground); border: 1px solid var(--c-border); }
.cpost .gallery { display: grid; gap: var(--sp-2); }
.cpost .words { margin: 0; white-space: pre-line; }
.cpost .best { font-size: var(--fs-small); color: var(--c-lake); font-weight: var(--fw-bold); }
.removed { border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); padding: var(--sp-4); background: var(--c-ground); font-weight: var(--fw-bold); margin: 0; }
/* the weather line on the photo: temperature · sky · wind · pressure; one row, always */
.wxline { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 0 5px; min-height: 30px; padding: 0 10px; border-radius: 15px; background: var(--c-scrim); color: var(--c-on-photo); font-weight: var(--fw-bold); font-size: var(--fs-label); font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; line-height: 1.3; }
.wxline .t { font-size: var(--fs-small); }
.wxline .it { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .wxline .sep { opacity: .7; color: inherit; }
.wxline .i { width: 18px; height: 18px; }
.wxline .tr { width: 12px; height: 12px; vertical-align: -1px; margin-left: 1px; }
/* the like, the superlike and the comment bubble: a mark and a number — on the photo with a shadow, on a row in the page's grey */
.rxs { display: inline-flex; align-items: center; gap: 0; }
.rxs.oncard { position: absolute; right: 8px; bottom: 8px; color: var(--c-on-photo); filter: drop-shadow(0 1px 2px var(--c-shade)) drop-shadow(0 0 6px var(--c-shade-soft)); }
.rxf { display: contents; }
.rx { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 7px; border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; font: inherit; font-weight: var(--fw-bold); font-size: var(--fs-small); font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button.rx::before, a.rx::before { content: ""; position: absolute; inset: -6px 0; }   /* the tap reaches 44 px; the mark stays small */
.rx .i { width: 22px; height: 22px; }
.rx .n:empty { display: none; }
.rxs.oncard .rx.like.on { color: var(--c-photo-like); } .rxs.oncard .rx.super.on { color: var(--c-photo-super); }
.rxs.oncard .rx.cm.empty { opacity: .72; }   /* 0.55.2: "oncard" — the class "card" was the card box's, and its background and border leaked onto the marks (Zeka: the calmer version, D18) */
.rx:focus-visible { box-shadow: var(--focus-ring); }
.rx.busy { opacity: .6; }
.wrow .rx { min-height: 0; padding: 0 2px; cursor: default; color: var(--c-text-2); }
.wrow .rx .i { width: 20px; height: 20px; }
.wrow .rx.on.like, .wrow .rx.on.cm, .wrow .rx.on.fl { color: var(--c-likes); } .wrow .rx.on.super { color: var(--c-float); } .wrow .rx.on.chal { color: var(--c-likes); }
/* the catch page: Edit, Add another, Share at the foot */
.cpost .btnrow .btn { flex: 0 0 auto; }

/* ---- 13 · The Add screen: the photo tiles, the card crop, the spot, the count ---------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.tile { position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--c-ground); border: 1.5px solid var(--c-border); display: flex; align-items: center; justify-content: center; }
.tile.pic { border-color: transparent; }
.tile.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .first { position: absolute; left: 6px; top: 6px; font-size: 11px; line-height: 1; background: var(--c-scrim); color: var(--c-on-photo); padding: 5px 7px; border-radius: 999px; border: 0; font-weight: var(--fw-bold); font-family: inherit; }
.tile .first.make { cursor: pointer; opacity: .85; min-height: 28px; }
.tile .x { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border-radius: 50%; background: none; color: var(--c-on-photo); border: 0; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tile .x .i { width: 18px; height: 18px; }
.tile .x::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--c-scrim); z-index: -1; }
.tile.add { border: 2px dashed var(--c-border-strong); background: var(--c-field); color: var(--c-text-2); flex-direction: column; gap: 4px; cursor: pointer; font-size: var(--fs-small); font-weight: var(--fw-bold); text-align: center; padding: 6px; }
.tile.add .i { width: 28px; height: 28px; }
.tile.add input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile.add:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.tile.add.full { display: none; }
.tile.busy { opacity: .6; }
.tile .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c-lake); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
.cardcrop, .avatarcrop { display: grid; gap: var(--sp-2); }
.cardcrop .frame { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: var(--r-md); border: 1.5px solid var(--c-border-strong); background: var(--c-ground); touch-action: none; cursor: grab; }
.cardcrop .frame img, .avatarcrop .ring img { position: absolute; left: 0; top: 0; max-width: none; display: block; user-select: none; -webkit-user-drag: none; }
.cardcrop .frame.saving, .avatarcrop .ring.saving { opacity: .7; }
.loc { border: 1.5px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); background: var(--c-surface); display: grid; gap: var(--sp-3); }
.loc .t { font-weight: var(--fw-bold); }
.loc .s { font-size: var(--fs-small); color: var(--c-text-2); }
.loc.ok { border-color: var(--c-line-on); background: var(--c-lake-soft); }
.loc.ok .t { color: var(--c-lake); }
.loc.warn { border-color: var(--c-warn-text); background: var(--c-surface); color: var(--c-text); padding: var(--sp-4); }
.loc.idle { border: 0; padding: 0; background: transparent; }
.loc .spotline { display: flex; align-items: center; gap: var(--sp-3); }
.loc .spotline .pin { width: 36px; height: 36px; border-radius: 50%; background: var(--c-lake-fill); color: var(--c-text-on-fill); display: grid; place-items: center; flex: none; }
.loc .spotline .pin .i { width: 18px; height: 18px; }
.loc .qlink { min-height: 0; }
.locline { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; text-align: left; display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-2); font-size: var(--fs-small); cursor: pointer; min-height: 44px; }
.locline .i { color: var(--c-lake); width: 20px; height: 20px; }
.locline b { color: var(--c-lake); }
.locvis { display: grid; gap: var(--sp-2); }
.countbox { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; height: 56px; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-field); overflow: hidden; }
.countbox .cbtn { border: 0; background: transparent; color: var(--c-lake); font: inherit; font-size: 26px; font-weight: var(--fw-bold); cursor: pointer; min-height: 100%; }
.countbox .cbtn:first-child { border-right: 1.5px solid var(--c-border-strong); } .countbox .cbtn:last-child { border-left: 1.5px solid var(--c-border-strong); }
.countbox input { border: 0; background: transparent; text-align: center; font: inherit; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text); min-width: 0; -moz-appearance: textfield; }
.countbox input::-webkit-outer-spin-button, .countbox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.countbox input:focus, .countbox input:focus-visible { outline: none; box-shadow: none; } .countbox:focus-within { border-color: var(--c-lake); }

/* Home's head row: the switch and Top */
.homehead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }   /* Home: the switch, and Top at the right */
.homehead .seg { flex: 1; max-width: 300px; }

/* ---- 14 · The Ledger: the month, the closed fold; a day ---------------------------------------------------------------- */
.mnav { display: flex; align-items: center; gap: var(--sp-2); }
.mnav .arrow { min-width: 48px; min-height: 48px; padding: 0; flex: none; text-decoration: none; }
.mnav .arrow.off { opacity: .35; }
.mnav .mt { flex: 1; text-align: center; display: grid; gap: 2px; min-width: 0; }
.mnav .mt h2 { margin: 0; }
.mnav .mt span { font-size: var(--fs-small); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }   /* on a 320 px phone a day is 38 px wide and 44 px tall */
.month .dow { font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--c-text-2); text-align: center; padding: 4px 0 2px; }
.month .d { aspect-ratio: 1; min-height: 44px; min-width: 0; border-radius: var(--r-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--c-text); font-variant-numeric: tabular-nums; background: var(--c-surface); border: 1px solid var(--c-border); position: relative; }
.month .d .n { font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1; }
.month .d.blank { background: transparent; border: 0; }
.month .d.future { color: var(--c-text-2); background: transparent; border-style: dashed; }
.month .d.future .n { font-weight: var(--fw-regular); }
.month .d.fish { background: var(--c-ok-soft); color: var(--c-ok); border-color: transparent; }
.month .d .c { font-size: 12px; font-weight: var(--fw-bold); min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px; background: var(--c-ok); color: var(--c-bg); display: grid; place-items: center; line-height: 1; }
.month .d.today { outline: 1px solid var(--c-mark); outline-offset: -1px; }   /* 0.50.0 (F18); 0.52.1: gold at night */
.month a.d:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.month .d.trip { border-color: var(--c-ok); }
.month .d .t { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c-ok); background: transparent; }
.month .d.plan { color: var(--c-text); } .month .d.plan .n { font-weight: var(--fw-bold); }
.month .d.plan::before { content: ""; position: absolute; inset: 4px; border: 2px dashed var(--c-ok); border-radius: 50%; }
.todayrow { display: flex; justify-content: center; }
.daynav { display: flex; gap: var(--sp-2); justify-content: space-between; }
.daynav .next { margin-left: auto; }

/* ---- 15 · The season and the years (the Ledger, another angler's page, the seasons sheet) ------------------------------ */
.yr { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.yr a, .yr .off { text-decoration: none; font-size: 22px; line-height: 1; min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.yr a { color: var(--c-lake); } .yr .off { color: var(--c-border-strong); }
.seasoncard { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.seasoncard > div { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); display: grid; gap: 2px; min-width: 0; }
.seasoncard b { font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.seasoncard b a { text-decoration: none; }
.seasoncard span { font-size: var(--fs-small); color: var(--c-text-2); }
.yrow { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 10px 12px; text-decoration: none; color: var(--c-text); }
.yrow .y { font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--c-lake); display: flex; align-items: center; gap: 6px; }
.yrow .m { display: grid; gap: 2px; font-size: var(--fs-small); color: var(--c-text-2); } .yrow .m b { color: var(--c-text); font-size: var(--fs-body); font-weight: var(--fw-regular); }
.yrow .m .nums { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.yrow .best { font-size: var(--fs-small); color: var(--c-text-2); text-align: right; } .yrow .best b { display: block; color: var(--c-text); font-weight: var(--fw-regular); }
.yrow.now { background: var(--c-lake-soft); }
.bestdot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); display: inline-block; flex: none; }
.legend { font-size: var(--fs-small); color: var(--c-text-2); display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin: 0; }
.legend .li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend .nowmark { width: 14px; height: 10px; background: var(--c-lake-soft); border: 1px solid var(--c-border); border-radius: 3px; display: inline-block; }
.tablewrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); -webkit-overflow-scrolling: touch; }
table.yrs { border-collapse: collapse; font-size: var(--fs-small); min-width: 760px; width: auto; margin: 0; }
table.yrs th, table.yrs td { padding: 8px 10px; border-bottom: 1px solid var(--c-border); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.yrs tr:last-child td { border-bottom: 0; }
table.yrs thead th { background: var(--c-ground); color: var(--c-text-2); font-weight: var(--fw-bold); font-size: var(--fs-label); letter-spacing: .04em; text-transform: uppercase; }
table.yrs th:first-child { text-align: left; position: sticky; left: 0; background: var(--c-surface); font-weight: var(--fw-bold); z-index: 1; }
table.yrs thead th:first-child { background: var(--c-ground); } table.yrs tbody th a { text-decoration: none; } table.yrs tbody th .bestdot { margin-left: 6px; }
table.yrs td.txt { text-align: left; } table.yrs td.txt a { text-decoration: none; }
table.yrs tr.now td, table.yrs tr.now th { background: var(--c-lake-soft); } table.yrs td.off { color: var(--c-text-2); }
@media (max-width: 759px) {   /* 0.43.0 (Zeka): on a phone each year a box — nothing goes off the side */
  .tablewrap:has(> table.yrs) { overflow: visible; border: 0; background: none; border-radius: 0; }
  table.yrs { min-width: 0; width: 100%; display: block; }
  table.yrs thead { display: none; }
  table.yrs tbody { display: grid; gap: var(--sp-3); }
  table.yrs tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; padding: var(--sp-3) var(--sp-4) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
  table.yrs tbody th { position: static; grid-column: 1 / -1; padding: 0; border: 0; font-size: var(--fs-h3); display: flex; align-items: center; background: none; }
  table.yrs td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; font-size: var(--fs-body); font-weight: var(--fw-bold); }
  table.yrs td::before { content: attr(data-k); display: block; margin-bottom: 2px; font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--c-text-2); }
  table.yrs td.off { font-weight: var(--fw-regular); }
  table.yrs td.txt { grid-column: 1 / -1; order: 2; }
  table.yrs tr.now { background: var(--c-lake-soft); }   /* the running year, as the legend's mark */
  table.yrs tr.now td, table.yrs tr.now th { background: none; }
}

/* ---- 16 · The angler's page ------------------------------------------------------------------------------------------- */
.phead { display: flex; gap: var(--sp-3); align-items: center; }
.phead .av.big { width: 64px; height: 64px; border-radius: 50%; background: var(--c-lake-soft); color: var(--c-lake); font-weight: var(--fw-bold); font-size: 26px; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--c-gold); flex: none; overflow: hidden; }
.phead .av.big.pic { background: var(--c-ground); }
.phead .av.big img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phead .tx { display: grid; gap: 2px; min-width: 0; }
.phead .tx h1 { margin: 0; line-height: 1.1; overflow-wrap: anywhere; }
.phead .tx .since, .phead .tx .fl { font-size: var(--fs-small); color: var(--c-text-2); }
.phead .tx .since a, .phead .tx .fl a { text-decoration: none; position: relative; }
.phead .tx .since a::before, .phead .tx .fl a::before { content: ""; position: absolute; inset: -12px -4px; }   /* 0.50.0 (F16): Edit and Following reach 44 px */
.pwords { margin: 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.mehead { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }   /* your own page: the pills (a draft, the news) and Settings */
.mehead .gear { margin-left: auto; }
.avedit { display: flex; align-items: center; gap: var(--sp-4); }
.avedit .av.big { width: 88px; height: 88px; border-radius: 50%; background: var(--c-lake-soft); color: var(--c-lake); font-weight: var(--fw-bold); font-size: 36px; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--c-gold); flex: none; }
.avatarcrop { justify-items: center; }
.avatarcrop .ring { position: relative; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--c-gold); background: var(--c-ground); touch-action: none; cursor: grab; }
.avatarcrop .help { text-align: center; }
.btn.follow { display: inline-flex; align-items: center; gap: 6px; }
.btn.follow .i { width: 16px; height: 16px; display: none; }
.btn.follow.on { background: var(--c-lake-soft); color: var(--c-lake); border: 1.5px solid transparent; } .btn.follow.on .i { display: inline; }

/* ---- 17 · Trips: the next-step row, the running trip, the end sheet, the people, the tally ------------------------------- */
/* the next step as one slim row: the trip's clock, the words (a door), the bold word at the right (the other door) */
.startline { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 0 2px; text-decoration: none; color: var(--c-text-2); font-size: var(--fs-small); }
.startline > .i { color: var(--c-text-2); }
.startline > span, .startline > .words { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.startline > span b { font-variant-numeric: tabular-nums; color: var(--c-text); }
.startline b.go, .startline > b, .startline .door b { color: var(--c-lake); white-space: nowrap; }
.startline .door { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.startline.live, .startline.plan { color: var(--c-text); }
.startline.live > .i { color: var(--c-live); }
button.startline { width: 100%; text-align: left; font: inherit; background: none; border: 0; cursor: pointer; }
@keyframes noted { 0% { background: var(--c-lake-soft); box-shadow: 0 0 0 4px var(--c-lake-soft); } 60% { background: var(--c-lake-soft); box-shadow: 0 0 0 0 transparent; } 100% { background: transparent; box-shadow: none; } }
.noted { animation: noted 2.6s ease-out 1; border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) { .noted { animation: none; background: var(--c-lake-soft); } }
.onwater { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: var(--fs-small); color: var(--c-text-2); }
.onwater.on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-live); flex: none; }
.onwater b { color: var(--c-text); font-weight: var(--fw-regular); }
.near { display: grid; gap: var(--sp-2); }
.near .nt { font-size: var(--fs-small); color: var(--c-text-2); }
.near .chip small { font-weight: var(--fw-regular); color: var(--c-text-2); margin-left: 6px; }
.endsheet { background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-raised); }
.endsheet .cform { gap: var(--sp-3); } .endsheet .q { font-size: var(--fs-h3); } .endsheet .line { font-size: var(--fs-small); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.notme { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: var(--fs-small); color: var(--c-text-2); margin: 0; }
/* the weather the trip started in: the hours as rows, the pressure line, the rain line */
.wxbox { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.wxnow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.wxnow .i { width: 28px; height: 28px; }
.wxnow b { font-size: var(--fs-h3); white-space: nowrap; } .wxnow span { font-size: var(--fs-small); color: var(--c-text-2); }
.wxhours { display: grid; padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--c-border); }
.wxhours .h { display: grid; grid-template-columns: 40px 20px 30px 36px 112px 36px; justify-content: space-between; align-items: center; gap: 4px; min-height: 28px; font-size: 13px; color: var(--c-text-2); }   /* 0.54.0: the rain chance between the temperature and the wind; 0.54.1: each column a fixed width, the spare space shared (Zeka, 2 Nov) */
.wxhours .h .r { text-align: right; font-variant-numeric: tabular-nums; } .wxhours .h .r.wet { color: var(--c-rain); font-weight: var(--fw-bold); }
.wxhours .h.hd { min-height: 22px; font-size: 12px; color: var(--c-text-2); border-bottom: 1px solid var(--c-border); margin-bottom: 2px; }
.wxhours .h .hh { font-variant-numeric: tabular-nums; color: var(--c-text); }
.wxhours .h .ic { height: 20px; display: grid; place-items: center; color: var(--c-text); }
.wxhours .h .i { width: 18px; height: 18px; }
.wxhours .h b { color: var(--c-text); font-size: 13px; font-weight: var(--fw-regular); } .wxhours .h .w { white-space: nowrap; display: flex; align-items: center; gap: 6px; min-width: 0; }
.wxhours .h .warr { width: 15px; height: 15px; }
.wxhours .h .warr, .wxgrid .warr { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* 0.54.1 (Zeka, 2 Nov; hours-desk.png): on a wide screen the hours side by side — a column an hour, the rows named at the left */
.wxgridw { display: none; padding: var(--sp-1) var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--c-border); }
.wxgrid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.wxgrid th, .wxgrid td { padding: 6px 2px; text-align: center; font-weight: var(--fw-regular); white-space: nowrap; }
.wxgrid thead th { color: var(--c-text); font-weight: var(--fw-bold); border-bottom: 1px solid var(--c-border); }
.wxgrid thead th:first-child { width: 64px; } .wxgrid tbody th { text-align: left; font-size: 12px; }
.wxgrid td.hi { color: var(--c-text); } .wxgrid td.wet { color: var(--c-rain); font-weight: var(--fw-bold); }
.wxgrid .i { width: 20px; height: 20px; color: var(--c-text); vertical-align: middle; } .wxgrid .warr { width: 17px; height: 17px; color: var(--c-text); vertical-align: middle; }
@media (min-width: 600px) { .wxbox .wxhours { display: none; } .wxbox .wxgridw { display: block; } }
@media (max-width: 359px) { .wxhours { padding: var(--sp-1) var(--sp-2); } .wxhours .h { gap: 1px; grid-template-columns: 36px 18px 26px 38px 112px 34px; } }   /* 0.54.1: a 320 px screen (an iPhone mini with Display Zoom) keeps the hPa column whole */   /* 0.53.0: where the wind goes */ .wxhours .h .p { text-align: right; font-variant-numeric: tabular-nums; }
.wxpress { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); color: var(--c-text-2); border-bottom: 1px solid var(--c-border); }
.wxpress .spark { width: 120px; height: 28px; flex: none; } .wxpress .spark polyline { fill: none; stroke: var(--c-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wxrain { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); color: var(--c-text-2); }
.wxcredit { font-size: 13px; color: var(--c-text-2); padding: 0 var(--sp-3) var(--sp-2); }
/* 0.55.0 — the weather page (Zeka, 2 Nov): the search on top, the places as the site's folds, an open place's seven days, a day's hours */
.wxpg { display: grid; gap: var(--sp-4); } .wxpg > .help { margin: 0; }
.wxsearch { position: relative; margin: 0; } .wxsearch > .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--c-text-2); pointer-events: none; } .wxsearch .input { padding-left: 44px; width: 100%; }
.wxlbl { margin: 0 0 calc(var(--sp-2) * -1); font-size: var(--fs-small); color: var(--c-text-2); }
.wxchips form, .wxaddf, .wxedc .mv form { margin: 0; }
.wxres { display: grid; gap: var(--sp-3); } .wxres[hidden] { display: none; }
.wxaddf { margin-left: auto; flex: none; }
.wxadd { min-height: 44px; padding: 0 var(--sp-2); background: none; border: 0; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-lake); cursor: pointer; white-space: nowrap; }
.wxhave { margin-left: auto; font-size: var(--fs-small); color: var(--c-text-2); white-space: nowrap; }
.wxcred, .wxfoot { margin: 0; font-size: 12px; color: var(--c-text-2); } .wxcred { margin-top: var(--sp-1); }
.wxplaces { display: grid; gap: var(--sp-2); }
.wxplaces .fold > .in { padding: 0 var(--sp-3) var(--sp-3); }
.wxweek { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
.wxweek .wh, .wxweek .dd > summary { display: grid; grid-template-columns: 42px 18px 34px 64px 1fr 12px; align-items: center; gap: 6px; padding: 0 var(--sp-3); }   /* the temperatures room for "-12° · -10°" */
.wxweek .wh { min-height: 30px; font-size: 12px; color: var(--c-text-2); border-bottom: 1px solid var(--c-border); } .wxweek .wh span { white-space: nowrap; } .wxweek .wh .r { text-align: right; } .wxweek .wh .wc { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .wxweek .wh .first { grid-column: span 2; color: var(--c-text); font-weight: var(--fw-bold); }
.wxweek .dd > summary { min-height: 46px; list-style: none; cursor: pointer; font-size: 13px; color: var(--c-text-2); border-bottom: 1px solid var(--c-border); -webkit-tap-highlight-color: transparent; }
.wxweek .dd:last-child > summary { border-bottom: 0; } .wxweek .dd[open]:last-child > summary { border-bottom: 1px solid var(--c-border); }
.wxweek .dd > summary::-webkit-details-marker { display: none; } .wxweek .dd > summary::marker { content: ""; }
.wxweek .dd .d { color: var(--c-text); white-space: nowrap; } .wxweek .dd .ic { display: grid; place-items: center; color: var(--c-text); } .wxweek .dd .ic .i { width: 18px; height: 18px; }
.wxweek .dd .r { text-align: right; font-variant-numeric: tabular-nums; } .wxweek .dd .r.wet { color: var(--c-rain); font-weight: var(--fw-bold); }
.wxweek .dd .tt { white-space: nowrap; color: var(--c-text); font-variant-numeric: tabular-nums; } .wxweek .dd .tt b { font-weight: var(--fw-regular); color: var(--c-text-2); }
.wxweek .dd .w { display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; color: var(--c-text); } .wxweek .dd .w > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 389px) { .wxweek .dd .dw { display: none; } }   /* a narrow phone: the arrow says the direction; the word is in the day's hours */
@media (max-width: 359px) { .wxweek .wh, .wxweek .dd > summary { grid-template-columns: 42px 18px 34px 60px 1fr; gap: 4px; padding: 0 var(--sp-2); } .wxweek .wh > :last-child, .wxweek .dd .chev { display: none; } }
.wxweek .dd .warr { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wxweek .dd .chev { display: grid; place-items: center; } .wxweek .dd .chev .i { width: 14px; height: 14px; transform: rotate(90deg); } .wxweek .dd[open] .chev .i { transform: rotate(-90deg); }
.wxweek .dd .dbody { border-bottom: 1px solid var(--c-border); } .wxweek .dd .dbody > .qlink { display: block; padding: var(--sp-2) var(--sp-3); }
.wxweek .dd:last-child .dbody { border-bottom: 0; }
.wxdayb { border: 0; border-radius: 0; background: var(--c-ground); }
.sunmoon { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); color: var(--c-text-2); }
.wxnone { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); color: var(--c-text-2); border-bottom: 1px solid var(--c-border); }
.wxedc { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.wxedc .ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--c-ground); display: grid; place-items: center; flex: none; color: var(--c-text-2); }
.wxedc .tx { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: var(--fs-small); } .wxedc .tx span { color: var(--c-text-2); }
.wxedc .mv { display: flex; align-items: center; gap: 6px; flex: none; }
.wxedc .mvb { width: 40px; height: 40px; border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); background: none; color: var(--c-text); display: grid; place-items: center; padding: 0; cursor: pointer; }
.wxedc .mvb .i { width: 18px; height: 18px; } .wxedc .mvb.up .i { transform: rotate(-90deg); } .wxedc .mvb.down .i { transform: rotate(90deg); } .wxedc .mvb[disabled] { opacity: .35; cursor: default; }
.wxedc .mvb.rmb { color: var(--c-lake); } .wxedc .mvb.rmb .i { width: 20px; height: 20px; }   /* 0.55.3 (Zeka, 2 Nov): the arrows' thin grey ring, the bin in the site's own colour — no red ring (0.55.1's was louder than Add) */
.wxday { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.wxday .tx { display: grid; gap: 2px; font-size: var(--fs-small); min-width: 0; } .wxday .tx b { font-size: var(--fs-body); } .wxday .tx span { color: var(--c-text-2); }
.fold.wx > .in { padding: 0 0 var(--sp-3); gap: var(--sp-2); }
.fold.wx > .in .wxbox { border: 0; border-top: 1px dashed var(--c-border); border-radius: 0; }
.fold.wx > .in > .quiet { padding: 0 var(--sp-4); }
/* the tally: a row per fish with two counters */
.trow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); min-height: 56px; padding: 6px var(--sp-2) 6px var(--sp-3); font-size: var(--fs-small); }
.trow .nm { font-size: var(--fs-body); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .cnt { display: grid; justify-items: center; gap: 0; } .trow .cnt .c3 { display: inline-flex; align-items: center; gap: 0; } .trow .cnt small { font-size: 11px; color: var(--c-text-2); line-height: 1.2; }
.trow .cnt input { width: 34px; height: 32px; border: 0; background: transparent; text-align: center; font: inherit; font-weight: var(--fw-bold); color: var(--c-text); font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield; }
.trow .cnt input::-webkit-outer-spin-button, .trow .cnt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.trow .cbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--c-text); font: inherit; font-weight: var(--fw-bold); display: grid; place-items: center; padding: 0; cursor: pointer; position: relative; }
.trow .cbtn::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid var(--c-border-strong); }
.rows.tallyrows:not(:has(> *)) { display: none; }
/* the trip page's notes form, the hint row on What's new */
.hint { display: flex; align-items: center; gap: 10px; padding: 0 0 0 12px; border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg); font-size: var(--fs-small); }
.hint a { font-weight: var(--fw-bold); text-decoration: none; flex: 1; padding: 10px 0; }
.hint form { margin: 0; }
.hint .x { background: none; border: 0; color: var(--c-text-2); font-size: 16px; min-width: 44px; min-height: 44px; cursor: pointer; }
.hint > span { flex: 1; padding: 10px 0; }
.pushback { margin-bottom: var(--sp-4); }   /* 0.43.0: this phone's notifications went off — the line and its button */

/* ---- 18 · Planned trips: the people as rows (0.52.1), the organiser's fold under a name, the link row, the talk ------------- */
.ppllabel { margin: var(--sp-3) 0 6px; font-size: var(--fs-small); color: var(--c-text-2); }
.pplrow { min-height: 36px; padding-top: var(--sp-1); padding-bottom: var(--sp-1); width: 100%; } .pplrow > .tx > b { font-weight: var(--fw-regular); font-size: var(--fs-small); }   /* one line: the name in the regular weight, the state grey at the right */
.rows.ppl.tap .pplrow, a.pplrow { min-height: 44px; }   /* 0.53.0 (Zeka, 2 Nov): smaller — a row you tap keeps Apple's 44 */
button.pplrow { background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.pplrow[aria-expanded="true"] > .chev { transform: rotate(90deg); }
.rows > .pfold { border: 0; border-radius: 0; background: var(--c-ground); }   /* the switches open right under the name */
.pfold { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); font-size: var(--fs-small); } .pfold b { font-size: var(--fs-body); }
.pfold form { margin: 0; }
/* a link others can open: Copy the link · Share · Close it — one row, one set of words (the planned trip's and the trip's) */
.linkrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-small); }
.linkrow form { display: inline; margin: 0 0 0 auto; }
.linkrow .quiet { flex: 1 1 100%; }
.talkcard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.shead.withic h2 { display: flex; align-items: center; }   /* 0.43.0 (Zeka): a section with its own icon — the talk, who brings what */
.shead.withic h2 > .i { width: 26px; height: 26px; color: var(--c-text-2); flex: none; margin-right: 10px; }
.shead.withic h2 > .count { margin-left: .3em; }
.screen > .sectwrap:has(> .sect) { margin-top: var(--sp-5); }   /* a section the page draws inside a wrapper (the shared list, redrawn in place) keeps the same air */
.bringbox .rows { border-radius: var(--r-md); }
.bubbles { display: grid; gap: 4px; }   /* 0.43.0: a run of one angler's lines sits close; a new voice stands apart (.bub:not(.cont)) */
/* 0.44.0 (Zeka, 29 Oct: "the standard chat look — no point to invent"): two tones only — the others' lines darker on the left (the ground), your own a little lighter on the right */
.bubbles > .bub:not(.cont) ~ .bub:not(.cont) { margin-top: 12px; }
.bub { display: flex; align-items: flex-end; gap: 10px; max-width: 86%; justify-self: start; } .bub .bw { min-width: 0; } .bub .nm { display: block; font-size: 12px; font-weight: var(--fw-bold); color: var(--c-text-2); margin: 0 0 3px 6px; }
.bub p { margin: 0; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--c-ground); font-size: var(--fs-body); line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; }
.bub .tm { display: block; font-size: 11px; color: var(--c-text-2); margin-top: 3px; text-align: right; white-space: nowrap; }
.bub.mine { justify-self: end; flex-direction: row-reverse; } .bub.mine p { background: var(--c-talk-mine); border-radius: 16px 16px 4px 16px; }
.bub.cont p { border-radius: 16px; } .bub.mine.cont p { border-radius: 16px; }
.bub .pick { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; } .bub .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bub .pick .cb { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--c-border-strong); border-radius: 5px; color: transparent; background: transparent; } .bub .pick input:checked + .cb { background: var(--c-tick); border-color: var(--c-tick); color: var(--c-tick-ink); }   /* 0.55.1: the lines you pick, as the lists' ticks; 0.55.3: in the site's own colour (tokens.css --c-tick) */
.talkedit { display: flex; gap: var(--sp-2); }
.talkedit .binp { display: inline-flex; align-items: center; gap: 6px; } .talkedit .binp .i { width: 18px; height: 18px; } .talkedit .binp.armed { background: var(--c-danger-fill); border-color: var(--c-danger-fill); color: var(--c-text-on-fill); } .talkedit .binp.armed .i { display: none; }   /* 0.55.1: the bin with the count; at the second tap the words, "Yes, delete". 0.55.3: an outlined button as Done beside it, red only at the second tap */
.fold.talk > .in .shead { justify-content: flex-end; min-height: 0; }
/* a box under a text field: the comment box, the talk's box */
.cbox { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin: 0; }
.cbox textarea.input { min-height: 46px; height: 46px; padding: 11px 12px; font-size: var(--fs-body); resize: none; line-height: 1.4; overflow-y: auto; }   /* 16 px and up: iPhone Safari zooms into any smaller field */
.cbox .btn { min-height: 46px; } .cbox .err { grid-column: 1 / -1; } .cbox .cnt { grid-column: 1 / -1; font-size: 12px; color: var(--c-text-2); text-align: right; }
/* the landing pages of a link (a planned trip, a trip, a challenge): the facts, the three steps, the doors */
.joinsteps { display: grid; gap: 6px; }
.joinsteps ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; color: var(--c-text-2); }
.haveacc { margin: 0; color: var(--c-text-2); text-align: center; } .haveacc a { color: var(--c-lake); text-decoration: none; }

/* ---- 19 · Packing lists: a tick line, the buy mark, the shape of an empty list ------------------------------------------ */
.gi { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 4px 4px 4px 12px; min-height: 52px; font-size: var(--fs-small); margin: 0; }
.gi .nm { font-size: var(--fs-body); min-width: 0; overflow-wrap: anywhere; } .gi .nm small { font-size: 12px; color: var(--c-text-2); }
.gi.done .nm { color: var(--c-text-2); text-decoration: line-through; }
.gi .cbl { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; position: relative; min-width: 0; } .gi .cbl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gi .cb { flex: none; width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--c-border-strong); border-radius: 5px; display: grid; place-items: center; color: transparent; background: transparent; }   /* 0.55.1 (Zeka, 2 Nov: "2 & 18"): smaller, the tick drawn and in the middle — the card body's .cb padding had pushed it into the corner and made the box bigger */
.gi .cb .i, .bub .pick .cb .i { width: 12px; height: 12px; stroke-width: 3.4; }
.gi .cbl:has(input:checked) .cb, .gi.done .cb { background: var(--c-tick); border-color: var(--c-tick); color: var(--c-tick-ink); }   /* 0.55.1: a ticked box; 0.55.3: blue by day, the night buttons' grey at night, the tick white (tokens.css) */ .gi .cbl:has(input:focus-visible) .cb, .bub .pick:has(input:focus-visible) .cb { outline: 1.5px solid var(--c-border-strong); outline-offset: 2px; }   /* 0.55.2 (Zeka, 2 Nov): the ring only for the keyboard, thin and grey — a tap or a click leaves none */
.gi .cbl input:disabled ~ .cb { opacity: .55; }
.gi .rt { display: inline-flex; align-items: center; gap: 4px; }
.gi .buyc { font-size: 12px; font-weight: var(--fw-bold); color: var(--c-float); white-space: nowrap; }
.gi.done .buyc { display: none; }
.rows[data-sink] > .gi { position: relative; background: var(--c-surface); }   /* 0.55.4: a packing list's lines slide to their place (core.js) — each with its own ground, so a line passing another hides it */
.rows[data-sink] > .gi.sinking { transition: transform .34s cubic-bezier(.2, .7, .3, 1); z-index: 1; }
.gi .who { font-size: 12px; font-weight: var(--fw-bold); color: var(--c-ok); white-space: nowrap; }
.xbtn { width: 44px; height: 44px; border: 0; background: transparent; color: var(--c-text-2); display: grid; place-items: center; border-radius: 50%; cursor: pointer; font-family: inherit; } .xbtn .i { width: 20px; height: 20px; } .xbtn:hover, .xbtn:focus-visible { background: var(--c-ground); color: var(--c-danger); outline: none; }
.gi form { display: contents; }
.rows.shape { opacity: .5; pointer-events: none; }
.rows.shape .cbl { cursor: default; }
.btn.wayon { margin-top: var(--sp-3); }
.btn.nextstep { border-color: var(--c-mark); border-width: 1px; }   /* 0.52.1: the trip page's next step — "I'm in", "Pack for this trip" — a gold edge at night */
.pagehead .saved { color: var(--c-ok); font-weight: var(--fw-bold); }
.pagehead [data-progress]:has([data-progress-text]:empty) { display: none; }   /* a list with no lines says nothing about ticks */

/* ---- 20 · The places: Waters, a water, a spot, the map picture, a fish -------------------------------------------------- */
.country { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.map { position: relative; aspect-ratio: 39 / 20; border-radius: var(--r-lg); border: 1px solid var(--c-border); overflow: hidden; background: var(--map-land); }
.map + .map { margin-top: var(--sp-3); }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map .open { position: absolute; right: var(--sp-2); bottom: var(--sp-2); background: var(--c-surface); color: var(--c-lake); border: 1.5px solid var(--c-line-on); border-radius: var(--r-md); padding: 0 var(--sp-3); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-bold); text-decoration: none; }
.map .open .i { position: static; width: 16px; height: 16px; }
.map .credit { position: absolute; left: var(--sp-2); bottom: var(--sp-2); font-size: 11px; font-weight: var(--fw-bold); color: var(--map-text); background: color-mix(in srgb, var(--c-surface) 78%, transparent); border-radius: 4px; padding: 2px 6px; max-width: 55%; }
.maprow { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; font-size: var(--fs-small); color: var(--c-text); text-decoration: none; }
.maprow .i { width: 18px; height: 18px; }   /* 0.50.0 (F5): one sign — the way out of the site, no chevron */
.staffedit { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-lake); text-decoration: none; border: 1.5px solid var(--c-border-strong); border-radius: var(--r-pill); padding: 2px 10px; vertical-align: middle; margin-left: var(--sp-2); white-space: nowrap; }   /* a staff member edits from where they stand */
.wishform { margin: 0; }
.wish .i { width: 18px; height: 18px; } .wish.on .i .fill, .wish.on .i { fill: currentColor; }
.regl .more { color: var(--c-lake); cursor: pointer; white-space: nowrap; }   /* the arrow stays with its word */
.regl .full { display: block; margin-top: 4px; color: var(--c-text-2); }
.regl .regl-cb:not(:checked) ~ .rest, .regl .regl-cb:not(:checked) ~ .full .f { display: none; }
.regl .regl-cb:checked ~ .m { display: none; }
.podium { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pod { padding: 12px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); display: grid; gap: 2px; font-size: var(--fs-small); text-decoration: none; color: inherit; min-width: 0; }
.pod .k { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2); } .pod b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.2; } .pod span { color: var(--c-text-2); line-height: 1.35; overflow-wrap: anywhere; }
/* the records grid: three columns with a header, two lines in every cell */
.rg { display: grid; grid-template-columns: 1fr 1.08fr 1.08fr; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }
.rg > div { padding: 9px 10px; border-bottom: 1px solid var(--c-border); min-width: 0; }
.rg > div:nth-last-child(-n+3) { border-bottom: 0; }
.rg .hd { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2); background: var(--c-ground); padding: 7px 10px; }
.rg .w a { text-decoration: none; color: var(--c-lake); font-size: var(--fs-small); line-height: 1.25; display: block; overflow-wrap: anywhere; font-weight: var(--fw-bold); }
.rg .w small { display: block; font-size: 12px; color: var(--c-text-2); margin-top: 2px; }
.rg .v b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.2; } .rg .v b a { color: var(--c-text); text-decoration: none; }
.rg .v small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.3; color: var(--c-text-2); overflow: hidden; margin-top: 2px; }
.rg .v small a { color: inherit; text-decoration: none; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.rg .v small a.onsite { color: var(--c-lake); }
.rg .v .none { color: var(--c-text-2); font-size: 15px; }
.rg:not(.open) > .x { display: none; }
.rg.top3 { grid-template-columns: 44px auto 1fr; }
.rg.top3 .pl { font-size: var(--fs-small); color: var(--c-text-2); } .rg.top3 .pl b { font-weight: var(--fw-regular); }
.rg.top3 .pl.own { box-shadow: inset 3px 0 0 var(--c-line-on); }
.rg.top3 .w small { display: block; font-size: 12px; line-height: 1.3; color: var(--c-text-2); margin-top: 3px; } .rg.top3 .w small a { display: inline; color: var(--c-text); font-size: inherit; line-height: inherit; font-weight: var(--fw-regular); overflow-wrap: normal; }
/* the marks in a line (released, a year ago, location hidden): words, not pills */
.mk { color: var(--c-text-2); white-space: nowrap; }
.mk.year { color: var(--c-warn-text); }
.mk.ok { color: var(--c-ok); }
/* the closed seasons' reference page */
.ref { display: grid; gap: var(--sp-3); }
.ref .rule { display: grid; gap: 4px; padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); font-size: var(--fs-small); }
.ref .rule:last-child { border-bottom: 1px solid var(--c-border); }
.ref .rule .l1 { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.ref .rule .l1 b { font-size: var(--fs-body); }
.ref .rule .l1 .w { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--c-warn-text); }
.ref .rule .l1 .pill { margin-left: auto; }
.ref .rule .l3 { color: var(--c-text-2); }
.ref .sph { display: grid; gap: 2px; margin-top: var(--sp-3); }
.ref .sph a { font-weight: var(--fw-bold); text-decoration: none; font-size: var(--fs-h3); position: relative; justify-self: start; }
.ref .sph a::before { content: ""; position: absolute; inset: -8px -4px; }   /* 0.50.0 (F10): the fish's name reaches 44 px */
.ref .sph small { color: var(--c-text-2); font-size: var(--fs-small); }
.introtext p + p { margin-top: 10px; }

/* ---- 21 · Challenges -------------------------------------------------------------------------------------------------- */
.winline { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); font-size: var(--fs-small); }
.winline .g { width: 34px; height: 34px; border-radius: 50%; border: 2.4px solid var(--c-gold); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: 13px; flex: none; color: var(--c-text); }
.winline b { font-size: var(--fs-body); }
.rows > .foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-4); font-size: var(--fs-small); color: var(--c-text-2); min-height: 52px; }

/* ---- 22 · Comments under a catch -------------------------------------------------------------------------------------- */
.cmts { display: grid; gap: var(--sp-2); }
.cmt { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 6px 0; }   /* 0.54.0: the words in a bubble (Facebook's way), no lines between */
.cmt .av { width: 34px; height: 34px; border-radius: 50%; background: var(--c-lake-soft); color: var(--c-lake); font-weight: var(--fw-bold); display: grid; place-items: center; font-size: 14px; overflow: hidden; }
.cmt .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmt .tx { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.cmt .cbub { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: var(--sp-2) var(--sp-3); max-width: 100%; min-width: 0; }
.cmt .cbub .nm { display: block; font-size: 14px; font-weight: var(--fw-bold); color: var(--c-text); text-decoration: none; margin-bottom: 1px; }
.cmt .cbub p { margin: 0; font-size: 16px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.cmt .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) 14px; padding: 2px var(--sp-3) 0; font-size: 13px; color: var(--c-text-2); min-height: 24px; }
/* 0.55.3 (Zeka, 2 Nov — "the bin follows every row while there isn't even a need"): a rare action on a row goes behind one grey
   "⋯" (YouTube, GitHub, LinkedIn); an action used often stays in the row. The menu in the ring menu's look, as wide as its words,
   16 px each side; red only inside it, at Remove; "Yes, remove" on the same line, from the left. Nothing on the page louder than Add. */
.cmt .meta .cmore { position: relative; display: inline-flex; }
.cmt .meta .dotb { position: relative; display: inline-grid; place-items: center; width: 30px; height: 22px; border-radius: var(--r-pill); color: var(--c-text-2); cursor: pointer; list-style: none; } .cmt .meta .dotb::-webkit-details-marker { display: none; } .cmt .meta .dotb .i { width: 18px; height: 18px; transform: rotate(90deg); } .cmt .meta .dotb::after { content: ""; position: absolute; inset: -11px -7px; }
.cmt .meta .cmore[open] > .dotb { background: var(--c-ground); }
.cmenu { position: absolute; top: 28px; left: -6px; width: max-content; max-width: calc(100vw - 24px); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-raised); overflow: hidden; z-index: 6; } .cmenu.flip { left: auto; right: -6px; }   /* flip: the menu would pass the screen's right edge */
.cmenu form { margin: 0; }
.cmenu a, .cmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 16px; min-height: var(--touch-min); text-decoration: none; color: var(--c-text-2); font: inherit; font-size: var(--fs-small); background: none; border: 0; border-top: 1px solid var(--c-border); text-align: left; cursor: pointer; white-space: nowrap; }
.cmenu > :first-child, .cmenu > form:first-child button { border-top: 0; }
.cmenu .i { width: 18px; height: 18px; }
.cmenu .rm { color: var(--c-danger); font-weight: var(--fw-bold); }
.cmenu .yes { background: var(--c-danger-fill); color: var(--c-text-on-fill); font-weight: var(--fw-bold); }
.wrow .tx .warr { width: 17px; height: 17px; vertical-align: -4px; margin-right: 3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }   /* 0.55.1: the wind's arrow in the Ledger's weather row; bigger, still grey (Zeka, 2 Nov: "white is too much") */
/* 0.55.1: the bin instead of the word Remove; 0.55.3 (Zeka, 2 Nov): no red ring — the bin in the site's own colour (blue by day, the
   links' light grey at night), as the arrows and Done; red only at the second tap. Here: your phones in Settings */
.binr { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--c-lake); cursor: pointer; flex: none; } .binr .i { width: 20px; height: 20px; } .binr::after { content: ""; position: absolute; inset: -7px; }
.cmt.gone .cbub p { color: var(--c-text-2); font-style: italic; }
.tellink { margin: 0; text-align: center; }

/* ---- 23 · The intro (/intro): the chapters beside their screens ---------------------------------------------------------- */
.introline { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 0 var(--sp-4); border: 1.5px dashed var(--c-border-strong); border-radius: var(--r-md); text-decoration: none; color: var(--c-text-2); font-size: var(--fs-small); }
.introline span { flex: 1; } .introline b { color: var(--c-lake); }
.screen:has(> .intro) { max-width: 1040px; }   /* the one landing page: wider than an app screen */
.intro { display: grid; gap: var(--sp-8); }
.intro .ihero { display: grid; gap: var(--sp-3); max-width: 62ch; padding-top: var(--sp-2); }
.intro .ihero h1 { font-size: clamp(34px, 7vw, 52px); line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.intro .ihero .lead { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-regular); display: block; }
.intro .cta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.intro .ich { display: grid; grid-template-columns: minmax(0, 300px) 1fr; grid-template-areas: "ph n" "ph tx"; gap: 0 var(--sp-6); align-items: center; }
.intro .ich.flip { grid-template-columns: 1fr minmax(0, 300px); grid-template-areas: "n ph" "tx ph"; }
.intro .ich .ph { grid-area: ph; } .intro .ich .n { grid-area: n; align-self: end; } .intro .ich .tx { grid-area: tx; align-self: start; }
.intro .ph { border-radius: 24px; overflow: hidden; border: 1px solid var(--c-border); background: var(--c-surface); box-shadow: var(--shadow-raised); }
.intro .ph img { display: block; width: 100%; height: auto; }
.intro .ich .n { display: inline-block; color: var(--c-gold-text); font-weight: var(--fw-bold); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.intro .tx h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-h2); line-height: 1.2; max-width: 30ch; }
.intro .tx p { margin: 0 0 var(--sp-3); max-width: 52ch; } .intro .tx p:last-child { margin: 0; }
.intro .ioutro { background: var(--c-ground); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4); display: grid; gap: var(--sp-2); }
.intro .ioutro h2 { margin: 0; font-size: var(--fs-h1); line-height: 1.15; } .intro .ioutro p { margin: 0; max-width: 58ch; }
.intro .ifoot { color: var(--c-text-2); font-size: var(--fs-small); } .intro .ifoot a { text-decoration: none; font-weight: var(--fw-bold); }
.intro .hsw { margin-top: var(--sp-4); max-width: 62ch; }
.intro .ich.noph, .intro .ich.noph.flip { grid-template-columns: 1fr; grid-template-areas: "n" "tx"; }   /* 0.44.0: a chapter whose screen is not taken yet */
.intro .tx .idoor a { font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; }   /* 0.44.0: the door to /organisers in the planned trips' chapter */
/* 0.44.0 (build 5): the organisers' page — the promise, what their people get, one trip in seven steps, the questions */
.screen:has(> .orgpage) { max-width: 900px; }
.orgpage .eyebrow { color: var(--c-gold-text); font-weight: var(--fw-bold); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; }
.orgpage .o2h { margin: 0 0 var(--sp-4); font-size: var(--fs-h1); line-height: 1.15; }
.orgpage .o2pair { display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: var(--sp-6); align-items: start; }
.orgpage .o2msg p { margin: 0 0 var(--sp-3); max-width: 52ch; }
.orgpage .o2msg .via, .orgpage .o2phone .tap { display: block; font-size: var(--fs-small); color: var(--c-text-2); margin-bottom: var(--sp-2); }
.orgpage .bubble { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px 18px 18px 6px; padding: var(--sp-3); max-width: 340px; margin: 0 0 var(--sp-5); }
.orgpage .bubble p { margin: 0 0 var(--sp-2); } .orgpage .bubble .url { color: var(--c-lake); overflow-wrap: anywhere; }
.orgpage .lp { border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; background: var(--c-bg); }
.orgpage .lp img { display: block; width: 100%; height: auto; }
.orgpage .lp .lpt { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); line-height: 1.35; }
.orgpage .lp .lpt span { color: var(--c-text-2); }
.orgpage .o2steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); position: relative; }
.orgpage .o2steps::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--c-border); }
.orgpage .o2step { position: relative; padding-left: 32px; display: grid; grid-template-columns: 1fr minmax(0, 340px); gap: var(--sp-6); align-items: start; }
.orgpage .o2step.noshot { grid-template-columns: 1fr; }
.orgpage .o2step::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-gold-text); box-sizing: border-box; }
.orgpage .o2step .k { display: block; color: var(--c-gold-text); font-weight: var(--fw-bold); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--sp-1); }
.orgpage .o2step h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-h2); line-height: 1.2; }
.orgpage .o2step p { margin: 0; max-width: 52ch; }
.orgpage .o2step .cut img { display: block; width: 100%; height: auto; border: 1px solid var(--c-border); border-radius: 16px; }
.orgpage .qa { display: grid; gap: var(--sp-4); max-width: 62ch; }
.orgpage .qa p { margin: 2px 0 0; }
@media (max-width: 720px) { .orgpage .o2pair, .orgpage .o2step { grid-template-columns: 1fr; gap: var(--sp-3); } .orgpage .o2phone .ph { max-width: 300px; } }
@media (max-width: 720px) { .intro .ich, .intro .ich.flip { grid-template-columns: 1fr; grid-template-areas: "n" "ph" "tx"; gap: var(--sp-3) 0; } .intro .ich .n { align-self: start; margin-bottom: 0; } .intro .ph { max-width: 300px; } }
.joinline { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-lake-soft); color: var(--c-text); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.numbers { font-size: var(--fs-small); color: var(--c-text-2); text-align: center; padding: var(--sp-3) 0; } .numbers b { color: var(--c-text); font-weight: var(--fw-regular); }

/* ---- 24 · On the phone, like an app (the intro, a greeting, /help/app) --------------------------------------------------- */
.hsw { display: grid; gap: var(--sp-2); }
.hsw > .n { color: var(--c-gold-text); font-weight: var(--fw-bold); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; }
.hs { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.hs h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.2; }
.hs p { margin: 0; font-size: var(--fs-small); max-width: 60ch; } .hs .lead { font-size: var(--fs-body); display: block; }
.hs .todo, .hs .steps { display: grid; gap: var(--sp-3); }
.hs .st { display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-3); align-items: start; font-size: var(--fs-small); max-width: 60ch; }
.hs .st .i { width: 26px; height: 26px; color: var(--c-lake); }
.hs .ssheet { border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-ground); overflow: hidden; max-width: 300px; width: 100%; }
.hs .ssheet .hd { padding: 10px 14px; font-size: 12px; font-weight: var(--fw-bold); color: var(--c-text-2); letter-spacing: .04em; text-transform: uppercase; }
.hs .ssheet .row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--c-border); font-size: 14px; background: var(--c-surface); flex-wrap: nowrap; }
.hs .ssheet .row.on { background: var(--c-lake-soft); font-weight: var(--fw-bold); }
.hs .ssheet .row i { width: 26px; height: 26px; border-radius: 7px; background: var(--c-tag-bg); display: inline-grid; place-items: center; flex: none; }
.hs .ssheet .row i .i { width: 16px; height: 16px; }
.hs .ssheet .row.on i { background: var(--c-lake-fill); color: var(--c-text-on-fill); }
.hs .shot { max-width: 300px; border-radius: 14px; overflow: hidden; border: 1px solid var(--c-border); } .hs .shot img { display: block; width: 100%; height: auto; }
.hs .after { color: var(--c-text-2); }
.hs .done { display: none; color: var(--c-text-2); }
@media (display-mode: standalone) { .hs .todo { display: none; } .hs .done { display: block; } }   /* already on the home screen: the steps give way to one line */

/* ---- 25 · A greeting (/g/…): always the charcoal night, the screens light ------------------------------------------------- */
.gbody { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: 17px; font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
.gpreview { background: var(--c-warn-bg); color: var(--c-warn-text); font-weight: var(--fw-bold); font-size: var(--fs-small); text-align: center; padding: 8px 16px; }
.gpage { max-width: 920px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 18px; }
.gpage .gtop { display: flex; align-items: center; justify-content: space-between; } .gpage .gbrand { display: inline-flex; color: var(--c-lake); } .gpage .gbrand .brand { height: 26px; width: auto; display: block; }
.gpage .ghero { display: grid; gap: 12px; margin: 16px 0 4px; }
.gpage .gkind { display: inline-flex; align-items: center; gap: 10px; color: var(--c-gold); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.gpage .gkind .i { width: 22px; height: 22px; }
.gpage h1 { font-size: clamp(30px, 6vw, 52px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; } .gpage h1 .gname { color: var(--c-gold); }
.gpage .gring { display: inline-grid; place-items: center; width: 0.95em; height: 0.95em; border-radius: 50%; background: var(--c-surface); color: var(--c-text); font-weight: 800; font-size: 0.7em; box-shadow: 0 0 0 3px var(--c-gold); vertical-align: -0.12em; margin-right: 0.3em; }
.gpage .gcard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; padding: 20px 22px; font-size: 18px; } .gpage .gcard p { margin: 0 0 12px; max-width: 62ch; } .gpage .gcard p:last-child { margin: 0; }
.gpage .gopen { margin: 4px 0 20px; }
.gpage .gch { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 24px; align-items: center; margin: 0 0 24px; }
.gpage .gch:nth-of-type(even) { grid-template-columns: 1fr minmax(0, 300px); } .gpage .gch:nth-of-type(even) .ph { order: 2; }
.gpage .gch .n { grid-column: 1 / -1; color: var(--c-gold); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.gpage .gch .ph { border-radius: 24px; overflow: hidden; border: 1px solid var(--c-border); background: var(--c-g-sheet); box-shadow: 0 20px 60px var(--c-shade-soft); } .gpage .gch .ph img { display: block; width: 100%; height: auto; }
.gpage .gch .tx p { margin: 0 0 12px; font-size: 18px; max-width: 46ch; } .gpage .gch .tx p:last-child { margin: 0; } .gpage .gch .tx .lead { font-weight: var(--fw-bold); font-size: 20px; display: block; }
.gpage .gwish { background: linear-gradient(160deg, var(--c-g-wish-1), var(--c-g-wish-2)); margin: 8px 0 24px; } .gpage .gwish h2 { margin: 0 0 10px; font-size: clamp(24px, 4vw, 34px); line-height: 1.15; color: var(--c-gold); }
.gpage .goutro { background: linear-gradient(160deg, var(--c-g-outro-1), var(--c-g-outro-2)); border: 1px solid var(--c-border); border-radius: 22px; padding: 26px 24px; display: grid; gap: 12px; position: relative; overflow: hidden; }
.gpage .goutro h2 { margin: 0; font-size: clamp(24px, 4vw, 34px); line-height: 1.15; max-width: 16ch; } .gpage .goutro p { margin: 0; font-size: 19px; max-width: 58ch; }
.gpage .gbtn { justify-self: start; display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 12px; background: var(--c-float-fill); color: var(--c-text-on-fill); font-weight: 800; text-decoration: none; font-size: 17px; margin-top: 8px; }
.gpage .goutro .sign { font-weight: var(--fw-bold); margin-top: 4px; }
.gpage .gfoot { color: var(--c-text-2); font-size: 14px; margin: 4px 0 0; } .gpage .gfoot a { color: inherit; }
.gpage .hsw { margin-top: 8px; } .gpage .hsw > .n { color: var(--c-gold); font-weight: 800; font-size: 13px; }
.gpage .hs .ssheet { --c-surface: var(--c-g-sheet); --c-ground: var(--c-g-sheet-head); --c-border: var(--c-g-sheet-line); --c-text: var(--c-g-sheet-text); --c-text-2: var(--c-g-sheet-text-2); --c-tag-bg: var(--c-g-sheet-line); --c-lake-soft: var(--c-g-sheet-on); --c-lake-fill: var(--c-g-sheet-on-fill); color: var(--c-text); border-color: var(--c-g-sheet-edge); }   /* on the charcoal page the share sheet stays light, like the screens */
@media (max-width: 720px) {
  .gpage .gch, .gpage .gch:nth-of-type(even) { grid-template-columns: 1fr; } .gpage .gch:nth-of-type(even) .ph { order: 0; } .gpage .gch .ph { max-width: 300px; }
}

/* ---- 26 · The privacy notice and the terms ------------------------------------------------------------------------------ */
.legal { max-width: 68ch; display: grid; gap: var(--sp-3); }
.ltext h2 { font-size: var(--fs-h3); margin: var(--sp-4) 0 var(--sp-2); } .ltext h2:first-child { margin-top: 0; }
.ltext p { margin: 0 0 var(--sp-2); line-height: 1.5; } .ltext ul { margin: 0 0 var(--sp-2); padding-left: 1.2em; line-height: 1.5; } .ltext > :last-child { margin-bottom: 0; }
.ltext a { font-weight: var(--fw-bold); text-decoration: none; overflow-wrap: anywhere; }

/* ---- 27 · Staff: the box on a catch, Admin's pages (English only) --------------------------------------------------------- */
.staffbox { border: 1.5px dashed var(--c-border-strong); border-radius: var(--r-lg); padding: 12px 14px; display: grid; gap: 10px; background: var(--c-surface); }
.staffbox .h { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 4px; }
.staffbox .h .i { width: 16px; height: 16px; }
.staffbox .sfold { display: grid; gap: 10px; } .staffbox .sfold:not([open]) { gap: 0; }
.staffbox .sfold > summary { list-style: none; cursor: pointer; min-height: 44px; -webkit-tap-highlight-color: transparent; }
.staffbox .sfold > summary::-webkit-details-marker { display: none; }
.staffbox .sfold > summary .sum { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: var(--fw-regular); font-size: 13px; }
.staffbox .sfold > summary .sum .si { display: inline-flex; align-items: center; gap: 3px; } .staffbox .sfold > summary .sum b { color: var(--c-text); font-weight: var(--fw-bold); }
.staffbox .sfold > summary .chev { margin-left: auto; display: grid; transition: transform .15s; } .staffbox .sfold[open] > summary .chev { transform: rotate(90deg); }
.sig { display: flex; flex-wrap: wrap; gap: 6px; } .sig .pill { white-space: normal; padding-block: 3px; line-height: 1.3; }   /* a signal is a short sentence: it may wrap */
.kvs { display: grid; grid-template-columns: max-content 1fr; gap: 7px 12px; font-size: var(--fs-small); align-items: start; }
.kvs b { color: var(--c-text-2); font-weight: var(--fw-bold); }
.kvs a { font-weight: var(--fw-bold); text-decoration: none; }
@media (max-width: 480px) { .kvs { grid-template-columns: 1fr; gap: 2px 0; } .kvs b { margin-top: 6px; } }
.snote { font-size: 13px; color: var(--c-text-2); border-left: 3px solid var(--c-border-strong); padding-left: 10px; }   /* a staff note, a telling */
.snote b { color: var(--c-text); }
.snote.withphoto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .snote .tlph { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; } .snote .tlwhich { color: var(--c-lake); font-weight: var(--fw-bold); }
.notes { display: grid; gap: 6px; }
.noteline { display: flex; gap: var(--sp-2); align-items: center; }
.noteline .input { flex: 1; min-width: 0; min-height: 44px; height: 44px; font-size: var(--fs-small); }
.qrow { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.qrow.off { opacity: .6; }
.qrow:target { outline: 2px solid var(--c-line-on); outline-offset: 2px; scroll-margin-top: 72px; }
.qrow .qh { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.qrow .qh b { font-size: var(--fs-body); }
.qrow .qm { font-size: var(--fs-small); color: var(--c-text-2); }
.qrow .qm a { font-weight: var(--fw-bold); text-decoration: none; }
.qrow .pos { font-size: var(--fs-small); color: var(--c-lake); font-weight: var(--fw-bold); }
.qrow .pwords { margin: 0; }
.qrow .who { display: flex; align-items: center; gap: var(--sp-3); }
.qrow .who .tx { display: grid; gap: 2px; min-width: 0; } .qrow .who .tx b { font-size: var(--fs-body); } .qrow .who .tx span { font-size: var(--fs-small); color: var(--c-text-2); }
.qthumb img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-md); display: block; }
.avrow { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px var(--c-gold); flex: none; }
.addr { display: grid; gap: 4px; } .addr code { font-size: 15px; }
.health { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }   /* 0.45.0 (Zeka, 30 Oct): the checks in a box like the other rows */
.health > div + div { border-top: 1px solid var(--c-border); }
.health > div { display: flex; gap: 10px; align-items: flex-start; padding: 9px 14px; font-size: var(--fs-small); }
.health .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-ok); margin-top: 6px; flex: none; box-shadow: 0 0 0 2px var(--c-ok-soft); }
.health .dot[data-state=warn] { background: var(--c-warn-text); box-shadow: 0 0 0 2px var(--c-warn-bg); }
.health .dot[data-state=bad] { background: var(--c-danger); box-shadow: 0 0 0 2px var(--c-danger-soft); }
.health .dot[data-state=none] { background: var(--c-border-strong); box-shadow: none; }
.health .tx { display: grid; gap: 1px; min-width: 0; } .health b { color: var(--c-text); } .health span { color: var(--c-text-2); }
.logrow { display: grid; gap: 3px; padding: 10px 12px; font-size: var(--fs-small); }
.logrow .w { color: var(--c-text-2); font-variant-numeric: tabular-nums; display: flex; gap: 8px; flex-wrap: wrap; } .logrow .w b { color: var(--c-text); }
.logrow.sys .w b { color: var(--c-text-2); font-weight: var(--fw-regular); }
.logrow .a a { font-weight: var(--fw-bold); text-decoration: none; }
.logrow .n { color: var(--c-text-2); font-style: italic; }
.msg .from { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-small); color: var(--c-text-2); flex-wrap: wrap; } .msg .from b { color: var(--c-text); }
.msg .body { margin: 0; white-space: pre-wrap; }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mtable { display: grid; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; font-size: var(--fs-small); min-width: 100%; width: max-content; }
.mtable[data-cols="1"] { grid-template-columns: minmax(110px, auto) minmax(150px, 1fr); }
.mtable[data-cols="2"] { grid-template-columns: minmax(110px, auto) repeat(2, minmax(140px, 1fr)); }
.mtable[data-cols="3"] { grid-template-columns: minmax(110px, auto) repeat(3, minmax(140px, 1fr)); }
.mtable[data-cols="4"] { grid-template-columns: minmax(110px, auto) repeat(4, minmax(140px, 1fr)); }
.mtable[data-cols="5"] { grid-template-columns: minmax(110px, auto) repeat(5, minmax(140px, 1fr)); }
.mtable > div { padding: 8px 10px; border-top: 1px solid var(--c-border); min-width: 0; display: flex; align-items: center; }
.mtable > div.hd { border-top: 0; background: var(--c-ground); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-2); }
.mtable > div.k { font-family: var(--font-mono); font-size: 13px; color: var(--c-text-2); word-break: break-all; }
.mtable .input { min-height: 44px; height: 44px; width: 100%; font-size: var(--fs-small); }
.mtable .input.miss { border-color: var(--c-warn-text); background: var(--c-warn-bg); }
.gap-top { margin-top: var(--sp-3); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.stat { display: grid; gap: 2px; padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); text-decoration: none; color: var(--c-text); min-width: 0; }
.stat b { font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat span { font-weight: var(--fw-bold); }
.stat small { font-size: var(--fs-label); color: var(--c-text-2); }
.accounts { display: grid; }
.account { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); }
.account-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.account-meta, .account-email { color: var(--c-text-2); font-size: var(--fs-small); }
.account-email { word-break: break-all; }
.account-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.info { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; cursor: pointer; font-weight: var(--fw-bold); color: var(--c-text-2); font-family: Georgia, serif; font-style: italic; font-size: 17px; padding: 0; flex: 0 0 44px; position: relative; }
.info::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid var(--c-border-strong); background: var(--c-surface); z-index: -1; }
.info.open { color: var(--c-lake); } .info.open::before { background: var(--c-lake-soft); border-color: var(--c-line-on); }
.info-text { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--c-ground); border-radius: var(--r-md); font-size: var(--fs-small); color: var(--c-text-2); }
.info-text code { display: block; margin-top: 6px; font-size: 12px; }
.ck { border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
.ck .gh { font-size: 11px; background: var(--c-ground); padding: 7px 12px; border-bottom: 1px solid var(--c-border); }
.ck .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--c-border); min-height: 52px; margin: 0; }
.ck .row:last-child { border-bottom: 0; }
.ck .row.saved { box-shadow: inset 3px 0 0 var(--c-ok); } .ck .row.saved .info { color: var(--c-ok); font-style: normal; font-family: inherit; }
.ck .row .l { flex: 1; min-width: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 6px; }
.ck .row .c { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 150px; }
.ck .row.js .c .sv { display: none; }
.ck .row:not(.js) .c { width: auto; }
.ck .sel { height: 40px; width: 150px; padding: 0 28px 0 10px; font-size: var(--fs-small); font-weight: var(--fw-bold); }
.ck .num { height: 40px; width: 72px; padding: 0 10px; font-size: 14px; font-weight: var(--fw-bold); text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.ck .txt { height: 40px; width: 150px; padding: 0 10px; font-size: 12px; font-family: var(--font-mono); }
.ck .un { font-size: 12px; color: var(--c-text-2); }
.ck .link { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-lake); text-decoration: none; white-space: nowrap; padding-right: 4px; }
.ck .info-text, .ck .err { flex-basis: 100%; }
.ck .err { margin: 0 0 4px; }
.counts { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-small); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.counts b { text-align: right; font-variant-numeric: tabular-nums; } .counts .h { grid-column: 1 / -1; font-weight: var(--fw-bold); color: var(--c-text-2); font-size: var(--fs-label); letter-spacing: .04em; text-transform: uppercase; }
.gform .sh b { width: 28px; height: 28px; border-radius: 50%; background: var(--c-lake-soft); color: var(--c-lake); display: inline-grid; place-items: center; font-size: var(--fs-small); flex: none; }
.gform .sh span { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-text); }
.chk { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-3); cursor: pointer; position: relative; }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk .box { flex: 0 0 26px; width: 26px; height: 26px; border: 2px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-field); position: relative; }
.chk.on .box, .chk:has(input:checked) .box { background: var(--c-lake-fill); border-color: var(--c-lake-fill); }
.chk.on .box::after, .chk:has(input:checked) .box::after { content: ""; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border: solid var(--c-text-on-fill); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.chk:focus-within { outline: 2px solid var(--c-lake); outline-offset: -2px; }
.chk .thumb { flex: none; width: 26px; height: 46px; border-radius: 5px; border: 1px solid var(--c-border); background: var(--c-ground); overflow: hidden; display: grid; place-items: center; color: var(--c-lake); } .chk .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.chk .thumb .i { width: 16px; height: 16px; }
.chk .tx { flex: 1; min-width: 0; display: grid; gap: 1px; } .chk .tx b { font-size: var(--fs-small); } .chk .tx span { font-size: 13px; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urlfield { display: flex; align-items: center; gap: 0; } .urlfield .pre { flex: none; height: var(--touch-input); display: inline-flex; align-items: center; padding: 0 10px; border: 1.5px solid var(--c-border-strong); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--c-ground); color: var(--c-text-2); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.urlfield .input { border-radius: 0 var(--r-md) var(--r-md) 0; }
.later { border: 1.5px dashed var(--c-border-strong); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); color: var(--c-text-2); display: grid; gap: var(--sp-2); opacity: .75; font-size: var(--fs-small); }
.later .toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 40px; } .later .toggle .k { font-weight: var(--fw-bold); color: var(--c-text); font-size: var(--fs-body); }
.later .toggle .sw { flex: none; width: 52px; height: 32px; border-radius: 999px; background: var(--c-border-strong); position: relative; opacity: .5; } .later .toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-knob); }
.linkcard { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.linkcard .url { font-family: var(--font-mono); font-size: 15px; word-break: break-all; padding: var(--sp-3); background: var(--c-field); border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); }
.confirm { border-color: var(--c-danger); }
.alsohead { color: var(--c-text-2); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; margin-top: var(--sp-2); }
.ledit textarea.input { min-height: 420px; font-family: inherit; line-height: 1.45; }
.ledit .lstate { color: var(--c-text-2); font-size: var(--fs-small); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.ledit .lstate.on { color: var(--c-ok); }
.xtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .xt { padding: 12px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); display: grid; gap: 2px; }
.xt b { font-size: 22px; font-variant-numeric: tabular-nums; } .xt span { font-size: var(--fs-small); color: var(--c-text-2); }
.xrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; font-size: var(--fs-small); }
.xrow b { font-size: var(--fs-body); } .xrow .amt { font-variant-numeric: tabular-nums; text-align: right; font-weight: var(--fw-bold); font-size: var(--fs-body); } .xrow .m { color: var(--c-text-2); min-width: 0; overflow-wrap: anywhere; } .xrow .m.r { text-align: right; white-space: nowrap; }
.xrow .soon { color: var(--c-float); font-weight: var(--fw-bold); } .xrow:target { box-shadow: inset 0 0 0 2px var(--c-line-on); }
.xrow .acts { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-4); margin-top: 4px; } .xrow .acts form { display: inline; }
/* 0.57.0 — the running costs re-thought (Zeka, 3 Nov 2026; fishyfishy-running-costs-drawing-2.html): a dashed box is not paid yet;
   a month is a fold with its payments by section; what repeats shows what was paid to it in all */
.xt { align-content: start; } .xt span { line-height: 1.35; }
.xt.due { border-style: dashed; border-color: var(--c-border-strong); }
.xtiles > .xt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fold.coming { border-style: dashed; border-color: var(--c-border-strong); }
.fold > summary .sum { flex: none; font-variant-numeric: tabular-nums; font-size: var(--fs-small); color: var(--c-text); text-align: right; }
.fold > .in.mlist { padding: 0 0 6px; gap: 0; border-top: 1px dashed var(--c-border); }
.xsec { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px 2px; font-size: var(--fs-small); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.xsec b { color: var(--c-text-2); font-weight: var(--fw-bold); }
.mrow { display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; padding: 6px 16px; font-size: var(--fs-small); color: var(--c-text); text-decoration: none; }
.mrow .nm { font-size: var(--fs-body); min-width: 0; overflow-wrap: anywhere; }
.mrow .amt { text-align: right; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; font-size: var(--fs-body); white-space: nowrap; }
.mrow .m { color: var(--c-text-2); min-width: 0; } .mrow .r { text-align: right; } .mrow .soon { color: var(--c-float); font-weight: var(--fw-bold); }
.mrow.coming .amt { font-weight: var(--fw-regular); }
a.mrow:active { background: color-mix(in srgb, var(--c-lake) 18%, var(--c-surface)); }
@media (hover: hover) { a.mrow:hover { background: color-mix(in srgb, var(--c-lake) 8%, var(--c-surface)); } }
.xgroup { display: grid; gap: 6px; } .xgroup > .lbl { font-size: var(--fs-small); color: var(--c-text-2); font-weight: var(--fw-bold); padding: 6px 2px 0; }
.xrow .sofar { grid-column: 1 / -1; } .xrow .sofar b { font-size: var(--fs-small); color: var(--c-text); }
.facts.split strong { font-size: var(--fs-body); }
.seg3.duo { grid-template-columns: 1fr 1fr; }
.form .two input[type=date] { min-width: 0; width: 100%; }   /* a date's picker icon stays inside its half */
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .form .two .field { min-width: 0; }
.tellphotos { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tellphotos .tp { position: relative; width: 72px; height: 72px; border: 2px solid var(--c-border-strong); border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; cursor: pointer; background: var(--c-field); }
.tellphotos .tp img { width: 100%; height: 100%; object-fit: cover; display: block; } .tellphotos .tp small { position: absolute; left: 4px; bottom: 2px; font-size: 11px; font-weight: var(--fw-bold); color: var(--c-on-photo); text-shadow: 0 0 3px var(--c-shade); }
.tellphotos .tp .all { font-size: var(--fs-label); font-weight: var(--fw-bold); text-align: center; padding: 4px; color: var(--c-text); }
.tellphotos .tp input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tellphotos .tp.on, .tellphotos .tp:has(input:checked) { border-color: var(--c-line-on); box-shadow: 0 0 0 2px var(--c-lake-soft); }
.pointstate { border: 1.5px solid var(--c-ok); background: var(--c-ok-soft); color: var(--c-ok); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); }
.pointstate strong { display: block; }
.pointstate a { color: inherit; }
.pmods { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ---- 28 · Night: what a token cannot say ------------------------------------------------------------------------------- */
/* the wordmark's stroke eases to 9.6 (reversed-out type reads bolder); the theme button shows the sun at night, the moon by day */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .brand-letters path[stroke] { stroke-width: 9.6; } :root:not([data-theme="light"]) .tb.theme .sun { display: block; } :root:not([data-theme="light"]) .tb.theme .moon { display: none; } }
:root[data-theme="dark"] .brand .brand-letters path[stroke] { stroke-width: 9.6; }
:root[data-theme="dark"] .tb.theme .sun { display: block; } :root[data-theme="dark"] .tb.theme .moon { display: none; }
:root[data-theme="light"] .tb.theme .sun { display: none; } :root[data-theme="light"] .tb.theme .moon { display: block; }
/* 0.45.0 — the organiser's back office (views/ledger/organiser.ejs) and the payments on a trip's page */
.bomonth { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-small); color: var(--c-text-2); } .bomonth b { color: var(--c-text); } .bomonth .open { color: var(--c-gold-text); font-weight: var(--fw-bold); }
.pill.boopen { background: var(--c-warn-bg); color: var(--c-gold-text); }
.bofocus { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); margin: 0 0 var(--sp-2); border-radius: var(--r-md); background: var(--c-surface); box-shadow: inset 4px 0 0 var(--c-gold), inset 0 0 0 1px var(--c-border); color: var(--c-text); text-decoration: none; }   /* 0.45.0: the trip to fill next */
.bofocus .tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .bofocus .k { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-gold-text); } .bofocus .tx > span:last-child { font-size: var(--fs-small); color: var(--c-text-2); }
.botitle .gold { color: var(--c-gold-text); }   /* 0.49.0: "Organiser's" in gold — the page says at once where the work is run */
.bofocus .chev { color: var(--c-text-2); display: grid; } .bofocus .chev .i { width: 20px; height: 20px; }
div.bofocus { box-shadow: inset 4px 0 0 var(--c-line-on), inset 0 0 0 1px var(--c-border); } div.bofocus .k { color: var(--c-text-2); }   /* 0.50.0 (F42): the owners' look cannot act — no gold */
.bolook { margin-bottom: var(--sp-3); } .bolookcal .month a { pointer-events: none; }   /* 0.45.0: an owner's look goes nowhere inside the trips */
.bocount { display: grid; gap: 6px; justify-items: start; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); font-size: var(--fs-small); } .bocount small { color: var(--c-text-2); }
.moneyrow { align-items: center; flex-wrap: wrap; row-gap: var(--sp-2); } .moneyrow > .tx { min-width: 7em; } .moneyrow > .tx > span { overflow-wrap: normal; } .moneyrow .marks { display: flex; gap: 6px; flex: none; margin-left: auto; }   /* the marks go under the name when the words are long */ .moneyrow .marks form { margin: 0; }   /* 0.50.0 (F36): the payment chips keep the chip's 44 px */
.moneyrow .chip { background: transparent; border-color: var(--c-border-strong); font-weight: var(--fw-regular); } .moneyrow .chip .i { width: 16px; height: 16px; margin-left: -4px; }
.moneyrow .chip.on { background: var(--c-lake-soft); color: var(--c-lake); border-color: transparent; font-weight: var(--fw-bold); } .moneyrow .chip.paid.on { background: var(--c-ok-soft); color: var(--c-ok); }
/* 0.46.0 — the note before the yes, with its own line breaks; a participant's own payment; Edit beside the title; Admin → Accounts */
/* 0.47.0 — the trip note in our style: grey; a fact line white after its gold icon; folded after five lines */
.fnote { margin: var(--sp-3) 0 0; color: var(--c-text-2); line-height: 1.5; }
.fnote .nl { display: flex; gap: var(--sp-2); align-items: flex-start; overflow-wrap: anywhere; }
.fnote .nl.gap { height: .6em; }
.fnote .nl > .i { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--c-gold); }
.fnote .nl.fact { color: var(--c-text); font-weight: var(--note-fact-weight); }
.ii { width: 1.15em; height: 1.15em; vertical-align: -.2em; color: var(--c-gold); }   /* our icon inside a line — the note's, and 0.51.0 a story's, a comment's, a list's */
.fnote.folded .body { max-height: 7.5em; overflow: hidden; -webkit-mask-image: linear-gradient(currentColor 62%, transparent); mask-image: linear-gradient(currentColor 62%, transparent);   /* only the fade's alpha counts */ }
.fnote .more { display: inline-flex; align-items: center; min-height: var(--touch-min); margin-top: var(--sp-1); background: none; border: 0; padding: 0; font: inherit; font-weight: var(--fw-bold); color: var(--c-lake); cursor: pointer; }
.fnote .by { margin: var(--sp-1) 0 0; font-size: var(--fs-small); }
.fnote .by a { color: var(--c-text); font-weight: var(--fw-bold); text-decoration: none; }   /* 0.53.0: the name opens the organiser's page */
.noteicons-open { margin-top: var(--sp-2); }
.noteicons { display: grid; grid-template-columns: repeat(7, minmax(0, 44px)); gap: 6px; margin-top: var(--sp-2); }
.noteicons button { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border-radius: var(--r-md); border: 1.5px solid var(--c-border); background: var(--c-surface); color: var(--c-gold); cursor: pointer; }
.noteicons button .i { width: 22px; height: 22px; }
.notepv { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1.5px dashed var(--c-border); border-radius: var(--r-md); }
.notepv > b { display: block; font-size: var(--fs-small); color: var(--c-text-2); }
.notepv .fnote { margin-top: var(--sp-1); }
.mymoney { margin-top: var(--sp-2); }
.pagehead .titlerow > .qlink { flex: none; }
[data-accounts-search] { margin-top: var(--sp-3); min-width: 0; }   /* in the card's grid: the clear button never widens the card */ [data-accounts-search] noscript .btn { margin-left: var(--sp-2); }
[data-accounts-chips] { margin: var(--sp-3) 0; }
/* 0.48.0 — the words tool: a language's state, a line to translate, its history; the translator's Aa in the top bar */
.tb.aa { font-weight: var(--fw-bold); font-size: var(--fs-small); color: var(--c-gold-text); border-color: var(--c-gold); }
.wstate { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-small); color: var(--c-text-2); }
.wstate .ok b { color: var(--c-ok); } .wstate .draft b { color: var(--c-gold-text); } .wstate .new b { color: var(--c-warn-text); }
.wsub { font-size: var(--fs-small); color: var(--c-text-2); margin: var(--sp-4) 0 var(--sp-2); }
.wchips { margin: var(--sp-3) 0; } .wsearch { margin-bottom: var(--sp-3); }
.wline { border-top: 1px solid var(--c-border); padding: var(--sp-3) 0; display: grid; gap: var(--sp-2); }
.wl-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-small); color: var(--c-text-2); }
.wl-head code { overflow-wrap: anywhere; }
.wl-head .qlink { margin-left: auto; }
.wl-en { margin: 0; color: var(--c-text-2); white-space: pre-line; overflow-wrap: anywhere; }
.wl-was { margin: 0; font-size: var(--fs-small); color: var(--c-text-2); white-space: pre-line; }
.wl-form { display: grid; gap: var(--sp-2); }
.wl-form textarea { resize: vertical; min-height: 0; }
.wl-f { display: grid; gap: 2px; } .wl-f > span { font-size: var(--fs-small); color: var(--c-text-2); }
.wl-said { font-size: var(--fs-small); color: var(--c-ok); }
.wl-hist summary { cursor: pointer; font-size: var(--fs-small); color: var(--c-text-2); min-height: var(--touch-min); display: flex; align-items: center; }
.wl-old { display: grid; gap: 2px; padding: var(--sp-1) 0; font-size: var(--fs-small); color: var(--c-text-2); } .wl-old q { color: var(--c-text); white-space: pre-line; }

/* 0.52.0 — the owners' numbers page (fishyfishy-numbers-page-drawing.html): wider on a computer, stacked on a phone; one blue
   for the marks (--c-chart), the period before in grey, the weeks' grid in blues; a filter row above everything it scopes */
.screen:has(> .numpage) { max-width: 1120px; }
.numpage .n-sub { color: var(--c-text-2); font-size: var(--fs-small); margin: var(--sp-1) 0 var(--sp-3); }
.numpage .n-filters { padding: var(--sp-2) 0 var(--sp-3); border-bottom: 1.5px solid var(--c-border); }
.numpage .n-frow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.numpage .n-seg { display: inline-flex; background: var(--c-ground); border: 1.5px solid var(--c-border); border-radius: var(--r-pill); padding: 2px; }
.numpage .n-seg a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: var(--r-pill); color: var(--c-text-2); text-decoration: none; font-size: var(--fs-small); white-space: nowrap; }
.numpage .n-seg a[aria-current="true"] { background: var(--c-lake-soft); color: var(--c-text); box-shadow: inset 0 0 0 1.5px var(--c-line-on); }
.numpage .n-dims { display: contents; }
.numpage .n-dd { position: relative; }
.numpage .n-dd select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 6px 32px 6px 13px; border-radius: var(--r-pill); border: 1.5px solid var(--c-border); background: var(--c-ground); color: var(--c-text-2); font: inherit; font-size: var(--fs-small); max-width: 200px; cursor: pointer; }
.numpage .n-dd::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--c-text-2); border-bottom: 2px solid var(--c-text-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.numpage .n-dd.on select { color: var(--c-text); background: var(--c-lake-soft); border-color: var(--c-line-on); }
.numpage .n-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.numpage .n-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--sp-2); }
.numpage .n-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 13px; border-radius: var(--r-pill); border: 1.5px solid var(--c-line-on); background: var(--c-lake-soft); color: var(--c-text); text-decoration: none; font-size: var(--fs-small); }
.numpage .n-chip .i { width: 16px; height: 16px; }
.numpage .n-mut { color: var(--c-text-2); }
.numpage .n-arr { margin-top: var(--sp-2); font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.numpage.busy .n-sect { opacity: .55; }
.numpage .n-sect { margin-top: var(--sp-5); }
.numpage .n-shead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.numpage .n-shead h2 { margin: 0; }
.numpage .n-move { display: inline-flex; gap: 6px; } .numpage .n-move form { display: inline; }
.numpage .n-mv { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--c-border-strong); background: var(--c-ground); color: var(--c-text); cursor: pointer; }
.numpage .n-mv:disabled { opacity: .35; cursor: default; }
.numpage .n-help { color: var(--c-text-2); font-size: var(--fs-small); margin: 0 0 var(--sp-3); }
.numpage .n-help .n-inl { width: 17px; height: 17px; color: var(--c-warn-text); margin: -3px 6px 0 0; }
.numpage .n-card { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); overflow: visible; }
.numpage .n-card.flush { padding: 0; overflow: hidden; } .numpage .n-card.flush .n-ch { padding: var(--sp-3) var(--sp-4) 0; }
.numpage .n-ch { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.numpage .n-card h3 { font-size: var(--fs-small); font-weight: var(--fw-bold); margin: 0; }
.numpage .n-card h3 .count { font-weight: var(--fw-regular); }
.numpage .n-hide { flex: none; } .numpage .n-empty { color: var(--c-text-2); font-size: var(--fs-small); margin: 0; padding: 0 0 var(--sp-1); }
.numpage .n-card.flush .n-empty { padding: 0 var(--sp-4) var(--sp-3); }
.numpage .n-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: start; }
.numpage .n-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: start; }
.numpage .n-g2 > .card, .numpage .n-g3 > .card, .numpage .n-col > .card { margin: 0; } .numpage .n-col { display: grid; gap: var(--sp-3); }
.numpage .n-g2, .numpage .n-g3 { margin-bottom: var(--sp-3); }
.numpage .n-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--sp-3); }
.numpage .n-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.numpage .n-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); color: var(--c-text); text-decoration: none; min-width: 0; }
.numpage a.n-tile.on { border-color: var(--c-chart); box-shadow: inset 0 0 0 1px var(--c-chart); }
.numpage .n-tl { font-size: var(--fs-small); color: var(--c-text-2); }
.numpage .n-tv { font-size: 30px; font-weight: var(--fw-bold); line-height: 1.15; }
.numpage .n-delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-small); }
.numpage .n-delta .i { width: 15px; height: 15px; }
.numpage .n-delta.up { color: var(--c-ok); } .numpage .n-delta.down { color: var(--c-danger); } .numpage .n-delta.none { color: var(--c-text-2); }
.numpage .n-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; color: var(--c-text-2); margin-bottom: 4px; }
.numpage .n-legend .qlink { margin-left: auto; }
.numpage .n-key { display: inline-block; width: 16px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
.numpage .n-key.cur { border-color: var(--c-chart); } .numpage .n-key.prev { border-color: var(--c-border-strong); }
.numpage .n-chart { position: relative; width: 100%; min-height: 40px; } .numpage .n-chart svg { display: block; overflow: visible; }
.numpage .n-chart .grid { stroke: var(--c-tag-bg); stroke-width: 1; } .numpage .n-chart .base { stroke: var(--c-border); stroke-width: 1; }
.numpage .n-chart .ax { fill: var(--c-text-2); font-size: 12px; font-variant-numeric: tabular-nums; } .numpage .n-chart .cap { fill: var(--c-text); font-size: 12px; font-weight: 600; }
.numpage .n-chart .lcur { fill: none; stroke: var(--c-chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.numpage .n-chart .larea { fill: var(--c-chart-wash); }
.numpage .n-chart .lprev { fill: none; stroke: var(--c-border-strong); stroke-width: 2; stroke-linejoin: round; }
.numpage .n-chart .ldot, .numpage .n-chart .hdot { fill: var(--c-chart); stroke: var(--c-surface); stroke-width: 2; }
.numpage .n-chart .hdot2 { fill: var(--c-border-strong); stroke: var(--c-surface); stroke-width: 2; }
.numpage .n-chart .xhair { stroke: var(--c-border-strong); stroke-width: 1; }
.numpage .n-chart .hit { cursor: crosshair; outline: none; } .numpage .n-chart .hit:focus-visible { stroke: var(--c-border-strong); }
.numpage .n-chart .colv { fill: var(--c-chart); } .numpage .n-chart .colnot { fill: var(--c-border-strong); }
.numpage .n-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--c-field); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 7px 10px; font-size: 13px; box-shadow: var(--shadow-raised); white-space: nowrap; }
.numpage .n-tip .th { color: var(--c-text-2); margin-bottom: 2px; } .numpage .n-tip .tr { display: flex; align-items: center; gap: 6px; }
.numpage .n-tip .tr b { font-size: 15px; min-width: 34px; } .numpage .n-tip .n-key { width: 12px; margin: 0; }
.numpage .n-rank { display: flex; flex-direction: column; }
.numpage .n-rr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l v" "b b"; gap: 3px 10px; align-items: baseline; padding: 7px 6px; margin: 0 -6px; border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; }
.numpage a.n-rr:hover { background: var(--c-ground); }
.numpage .n-rl { grid-area: l; min-width: 0; display: flex; flex-direction: column; } .numpage .n-rn { overflow-wrap: anywhere; font-size: 15px; } .numpage .n-rs { color: var(--c-text-2); font-size: 13px; }
.numpage .n-rv { grid-area: v; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; } .numpage .n-rv b { font-size: 15px; }
.numpage .n-rv small, .numpage .n-tbl td small { color: var(--c-text-2); font-size: 12.5px; }
.numpage .n-rb { grid-area: b; height: 8px; } .numpage .n-rb i { display: block; height: 8px; background: var(--c-chart); border-radius: 0 4px 4px 0; }
.numpage .n-rr.sel { background: var(--c-lake-soft); box-shadow: inset 3px 0 0 var(--c-line-on); } .numpage .n-rr.dim { opacity: .45; } .numpage .n-rr.dim .n-rb i { background: var(--c-border-strong); }
.numpage .n-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.numpage .n-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.numpage .n-tbl th { text-align: left; font-weight: var(--fw-regular); color: var(--c-text-2); font-size: 13px; padding: 10px 12px 8px; border-bottom: 1.5px solid var(--c-border); white-space: nowrap; }
.numpage .n-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--c-tag-bg); vertical-align: top; } .numpage .n-tbl tr:last-child td { border-bottom: 0; }
.numpage .n-tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .numpage .n-tbl td.n small { display: block; }
.numpage .n-tbl td .n-rn, .numpage .n-tbl td .n-rs { display: block; }
.numpage .n-rowlink { display: flex; flex-direction: column; min-height: 32px; justify-content: center; color: var(--c-text); text-decoration: none; }
.numpage .n-rowlink .n-rn { text-decoration: underline; text-decoration-color: var(--c-border-strong); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.numpage .n-tbl tr.sel td { background: var(--c-lake-soft); } .numpage .n-tbl tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--c-line-on); } .numpage .n-tbl tr.dim td { opacity: .5; }
.numpage .n-tbl tr.open td { background: var(--c-lake-soft); } .numpage .n-tbl tr.n-drill td { background: var(--c-ground); padding: 10px 12px; } .numpage .n-tbl tr.n-drill .n-g2 { margin: 0; }
.numpage .n-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--c-warn-text); font-weight: var(--fw-bold); } .numpage .n-flag .i { width: 15px; height: 15px; }
.numpage .n-foot { color: var(--c-text-2); font-size: 13px; margin: 0; padding: 8px 12px 10px; border-top: 1px solid var(--c-tag-bg); }
.numpage .n-more { display: block; border-top: 1px solid var(--c-tag-bg); padding: 12px; min-height: 46px; color: var(--c-text); text-decoration: none; }
.numpage .n-cohort th { white-space: normal; line-height: 1.25; } .numpage .n-cohort td.wk { white-space: nowrap; }
.numpage .n-cohort .c { text-align: center; width: 84px; font-variant-numeric: tabular-nums; border-left: 2px solid var(--c-surface); font-size: 13.5px; }
.numpage .n-cohort .c.h1, .numpage .n-ramp .h1 { background: var(--c-heat-1); color: var(--c-heat-ink-1); } .numpage .n-cohort .c.h2, .numpage .n-ramp .h2 { background: var(--c-heat-2); color: var(--c-heat-ink-2); }
.numpage .n-cohort .c.h3, .numpage .n-ramp .h3 { background: var(--c-heat-3); color: var(--c-heat-ink-3); } .numpage .n-cohort .c.h4, .numpage .n-ramp .h4 { background: var(--c-heat-4); color: var(--c-heat-ink-4); }
.numpage .n-cohort .c.h5, .numpage .n-ramp .h5 { background: var(--c-heat-5); color: var(--c-heat-ink-5); }
.numpage .n-ramp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; color: var(--c-text-2); padding: 10px 12px; border-top: 1px solid var(--c-tag-bg); }
.numpage .n-ramp span { margin-right: 6px; } .numpage .n-ramp i { display: inline-block; width: 18px; height: 10px; border-radius: 2px; margin-left: 6px; }
.numpage .n-facts { display: grid; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-tag-bg); }
.numpage .n-facts > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .numpage .n-facts .n-tl { width: 100%; font-size: 13px; }
.numpage .n-hidden .wrow form { margin-left: auto; } .numpage .n-reset { margin-top: var(--sp-3); }
.numpage .n-rule { color: var(--c-text-2); font-size: var(--fs-small); text-align: center; margin: var(--sp-6) 0 0; }
@media (max-width: 760px) { .numpage .n-g3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .numpage .n-g2 { grid-template-columns: 1fr; } .numpage .n-tiles { grid-template-columns: 1fr 1fr; } .numpage .n-tiles.three { grid-template-columns: 1fr; } .numpage .n-tv { font-size: 24px; }
  .numpage .n-seg a { padding: 0 10px; } .numpage .n-dd select { max-width: 100%; }
  /* a table on a phone: each row a small block, the heads as labels */
  .numpage .n-rt thead { display: none; } .numpage .n-rt tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 12px; border-bottom: 1px solid var(--c-tag-bg); }
  .numpage .n-rt tr:last-child { border-bottom: 0; } .numpage .n-tbl.n-rt td, .numpage .n-tbl.n-rt td.n { padding: 0; border: 0; text-align: left; white-space: normal; } .numpage .n-rt td:first-child { grid-column: 1 / -1; }
  .numpage .n-rt td[data-l]::before { content: attr(data-l); display: block; color: var(--c-text-2); font-size: 12px; line-height: 1.3; } .numpage .n-tbl.n-rt td.n small { display: inline; margin-left: 4px; }
  .numpage .n-rt tr.n-drill { display: block; } .numpage .n-rt tr.n-drill td { display: block; } .numpage .n-rt tr.sel { box-shadow: inset 3px 0 0 var(--c-line-on); background: var(--c-lake-soft); } .numpage .n-rt tr.sel td { background: transparent; box-shadow: none; }
  .numpage .n-cohort .c { width: auto; }
}
/* 0.53.0 — where we meet (fishyfishy-meeting-place-drawing.html): the box under the trip's head; the plan form's part */
.meetrows .wrow { min-height: 60px; }
.mfold > summary { list-style: none; cursor: pointer; } .mfold > summary::-webkit-details-marker { display: none; } .mfold[open] > summary > .chev { transform: rotate(90deg); }   /* 0.54.0: a choice under the row */
.mfold .choice { display: flex; align-items: center; min-height: 48px; padding: 0 var(--sp-3) 0 64px; border-top: 1px solid var(--c-border); color: var(--c-lake); font-size: var(--fs-small); font-weight: var(--fw-bold); text-decoration: none; }
/* 0.56.0 — after the trip (fishyfishy-after-trip-drawing.html): "Trip not happening?" under Call, its two answers as buttons in the
   maps' choice look; the organiser's question in the site's question box, its three panels; the stars; what they said */
.mfold > form { margin: 0; display: grid; }
.mfold button.choice { width: 100%; margin: 0; background: none; border: 0; border-top: 1px solid var(--c-border); font-family: inherit; text-align: left; cursor: pointer; }
.ask .panel { display: grid; gap: 8px; margin: 0; } .ask .panel[hidden] { display: none; }
.ask .panel > span { color: var(--c-text-2); }
.ask .panel .rows, .ask.review .stars { margin: 4px 0; }
.ask.review { margin: 0; } .ask.review textarea { width: 100%; }
.stars { display: flex; gap: 4px; border: 0; padding: 0; margin: 0; min-width: 0; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--c-text-2); cursor: pointer; }
.stars label .i { width: 28px; height: 28px; }
.stars:has(#star1:checked) label:nth-of-type(-n+1), .stars:has(#star2:checked) label:nth-of-type(-n+2), .stars:has(#star3:checked) label:nth-of-type(-n+3),
.stars:has(#star4:checked) label:nth-of-type(-n+4), .stars:has(#star5:checked) label:nth-of-type(-n+5) { color: var(--c-lake); }   /* the site's own colour, not gold — gold keeps its three marks */
.stars:has(#star1:checked) label:nth-of-type(-n+1) .i, .stars:has(#star2:checked) label:nth-of-type(-n+2) .i, .stars:has(#star3:checked) label:nth-of-type(-n+3) .i,
.stars:has(#star4:checked) label:nth-of-type(-n+4) .i, .stars:has(#star5:checked) label:nth-of-type(-n+5) .i { fill: currentColor; }
.stars input:focus-visible + label { outline: 1.5px solid var(--c-border-strong); outline-offset: 1px; }
.said { display: grid; gap: 4px; padding: var(--sp-3) var(--sp-4); }
.said .who { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-bold); }
.said .mini { display: inline-flex; gap: 1px; color: var(--c-lake); } .said .mini .i { width: 14px; height: 14px; color: var(--c-text-2); } .said .mini .i.on { color: var(--c-lake); fill: currentColor; }
.said p { margin: 0; color: var(--c-text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
/* the plan form: "Same as last time ›" and the past trips to pick; "Last time:" under Who — one tap each, a tick when chosen */
.pastline { display: grid; gap: var(--sp-2); }
.pastpick > summary { list-style: none; cursor: pointer; display: inline-block; } .pastpick > summary::-webkit-details-marker { display: none; }
.pastpick[open] > summary { margin-bottom: var(--sp-2); }
.lasttime { margin-top: var(--sp-2); }
.lasttime .chip { position: relative; cursor: pointer; }
.lasttime .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lasttime .chip .i { width: 16px; height: 16px; display: none; }
.lasttime .chip:has(input:checked) { background: var(--c-lake-soft); color: var(--c-lake); border-color: var(--c-line-on); }
.lasttime .chip:has(input:checked) .i { display: block; } .lasttime .chip:has(input:checked) .pl { display: none; }
.lasttime .chip:has(input:focus-visible) { outline: 1.5px solid var(--c-border-strong); outline-offset: 2px; }
.meetbox, .meetpick { display: grid; gap: var(--sp-3); }
.meetbox .ln2 { margin: 2px 0 -4px; font-size: var(--fs-small); color: var(--c-text-2); }
.meetbox .mtx { display: grid; gap: 2px; min-width: 0; }
.meetbox .loc .qlink { justify-self: start; min-height: 32px; }
.meetbox .rmpt { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-small); color: var(--c-text-2); cursor: pointer; justify-self: start; }
.meetbox .rmpt input { width: 20px; height: 20px; margin: 0; accent-color: var(--c-lake); }
.meetpick .help { margin: -4px 0 0; }