/* Case board — the screen a coordinator lives in, usually on a phone,
   usually standing up. Cards, not a grid: every case is a thing you act
   on, and the most-used action (adding a dated line) is on the face of
   the card, never behind a tap. */

.board{max-width:760px}
.mast-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.board .mast{border-bottom:1px solid var(--line);margin-bottom:18px}
.whoami{font-size:13.5px;color:var(--muted);max-width:44vw;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Nothing in the masthead wraps mid-word: "Sign out" on two lines reads as a
   broken page, not as a tight fit. */
.btn.tiny{width:auto;min-height:36px;padding:5px 13px;font-size:14px;white-space:nowrap}

/* On a phone the controls will not fit beside the wordmark, and letting them
   dribble over two ragged rows looks like a mistake. Give them a row of their
   own, left-aligned, and it reads as a deliberate toolbar. */
@media (max-width:600px){
  header.mast{padding-block:20px 12px}
  .mast-right{flex-basis:100%;margin-left:0;justify-content:flex-start;margin-top:10px}
}

/* These WRAP, they do not scroll. The first chip in this row is the triage
   queue — the one thing a coordinator must see every time she opens the board
   — and a horizontal scroller with no visible edge puts it off-screen with
   nothing to say so. DESIGN.md §12: nothing important behind a swipe. */
.filters{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0 12px}
.chip{font:inherit;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;
  border:1.5px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:99px;padding:8px 16px;min-height:42px}
.chip.on{background:var(--marsh);border-color:var(--marsh);color:var(--on-marsh)}
.chip .n{opacity:.7;margin-left:5px;font-variant-numeric:tabular-nums}
.tally{font-size:14.5px;color:var(--muted);margin:2px 0 16px}
.tally b{color:var(--ink);font-weight:700}

.case{background:var(--surface);border:1px solid var(--line);border-radius:15px;
  box-shadow:var(--shadow);margin-bottom:13px;overflow:hidden}
.case.high{border-left:4px solid var(--urgent)}
.case.stale{border-left:4px solid var(--gold)}
.case.high.stale{border-left:4px solid var(--urgent);box-shadow:inset 3px 0 0 var(--gold),var(--shadow)}

.case-head{padding:15px 17px;cursor:pointer;display:block}
.row1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.cid{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:14.5px;color:var(--marsh-deep)}
.where{font-family:Petrona,Georgia,serif;font-size:20px;font-weight:600;line-height:1.25;margin:0 0 3px}
.sub{font-size:15px;color:var(--muted)}
.row2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;font-size:14px;color:var(--muted)}
.dot{width:3px;height:3px;border-radius:50%;background:var(--line);flex:none}

.status{display:inline-block;font-size:13px;font-weight:700;border-radius:6px;padding:3px 9px;
  background:var(--tint);color:var(--marsh-deep);white-space:nowrap}
.status.wait{background:var(--line);color:var(--muted)}
.stale-flag{color:var(--gold);font-weight:700}

.lastline{background:var(--ground);border-top:1px solid var(--line);padding:11px 17px;
  font-size:15px;display:flex;gap:9px;align-items:baseline}
.lastline .d{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:var(--muted);font-size:13.5px;flex:none}

.acts{display:flex;gap:8px;padding:12px 17px;border-top:1px solid var(--line);flex-wrap:wrap}
.acts .btn{width:auto;flex:1 1 auto;min-height:48px;font-size:16px}
.acts .btn.ghost{flex:0 0 auto;padding:0 16px}

.detail{border-top:1px solid var(--line);padding:17px;background:var(--ground)}
.detail h4{font-size:13px;font-weight:700;margin:0 0 10px;letter-spacing:.075em;
  text-transform:uppercase;color:var(--muted)}
.detail h4:not(:first-child){margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.detail h4 .hint{text-transform:none;letter-spacing:0;font-size:13px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15.5px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}
.reveal{font:inherit;font-size:15px;font-weight:600;cursor:pointer;background:var(--tint);
  border:1.5px solid var(--marsh);color:var(--marsh-deep);border-radius:9px;padding:8px 13px;min-height:42px}
.reveal:hover{background:var(--surface)}
.reveal.quiet{background:transparent;border-color:var(--line);color:var(--muted);font-weight:600}
.reveal.quiet:hover{color:var(--ink);border-color:var(--muted);background:transparent}
.contact{display:flex;gap:8px;margin-top:11px}
.contact a{flex:1;text-align:center;text-decoration:none;font-weight:700;font-size:16px;
  padding:12px;border-radius:10px;background:var(--marsh);color:var(--on-marsh);min-height:48px;
  display:flex;align-items:center;justify-content:center}
.contact a.alt{background:var(--surface);color:var(--marsh-deep);border:1.5px solid var(--marsh)}

.thread{margin:0;padding:0;list-style:none}
.thread li{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.thread li:last-child{border-bottom:none}
.thread .d{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;color:var(--muted);flex:none;padding-top:2px;min-width:44px}
.thread .who{color:var(--muted);font-size:13.5px}
.thread li.sys{color:var(--muted);font-style:italic}

.addline{display:flex;gap:8px;margin-top:11px}
.addline input{flex:1;font:inherit;font-size:16.5px;padding:12px 14px;min-height:50px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.addline button{font:inherit;font-weight:700;font-size:16px;padding:0 18px;min-height:50px;
  border-radius:10px;border:none;background:var(--marsh);color:var(--on-marsh);cursor:pointer}
.addline button:disabled{opacity:.5;cursor:default}

.pickers{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.pickers select{flex:1 1 150px;font:inherit;font-size:16px;padding:11px 12px;min-height:48px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty .big{font-size:34px;margin-bottom:10px}

/* The tab bar does scroll — seven tabs will not wrap into anything that still
   reads as a tab bar — but it never scrolls SILENTLY: when there is more to
   the right, the last one fades off, and the tab you are on is scrolled into
   view for you. The class is set in render(), since CSS cannot ask whether an
   element overflows. */
.tabs{display:flex;gap:8px;margin:0 0 16px;border-bottom:1.5px solid var(--line);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs.scrollable{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
.tab{font:inherit;font-size:16.5px;font-weight:700;cursor:pointer;background:none;border:none;
  color:var(--muted);padding:11px 4px;margin-right:18px;border-bottom:3px solid transparent;
  margin-bottom:-1.5px;white-space:nowrap;flex:none}
.tab.on{color:var(--marsh-deep);border-bottom-color:var(--marsh)}
.tab .n{display:inline-block;background:var(--urgent);color:var(--on-urgent);border-radius:99px;
  font-size:12.5px;padding:1px 8px;margin-left:5px;vertical-align:1px}
.tab .n:empty{display:none}
.vol{background:var(--surface);border:1px solid var(--line);border-radius:15px;
  box-shadow:var(--shadow);margin-bottom:12px;padding:16px 17px}
.vol.pending{border-left:4px solid var(--gold)}
.vol h3{font-family:Petrona,Georgia,serif;font-size:19px;font-weight:600;margin:0 0 3px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0}
.tag{font-size:13px;font-weight:600;background:var(--tint);color:var(--marsh-deep);
  border-radius:6px;padding:3px 9px}
.tag.area{background:var(--gold-tint);color:#7A5A16}

/* ---- colonies ---- */
.colony{background:var(--surface);border:1px solid var(--line);border-radius:15px;
  box-shadow:var(--shadow);margin-bottom:13px;overflow:hidden}
.colony-head{padding:16px 17px;cursor:pointer}
.colony h3{font-family:Petrona,Georgia,serif;font-size:21px;font-weight:600;margin:0 0 3px;line-height:1.2}

/* The sterilisation bar is the hero. 70-80% is the threshold the science
   says is the whole point of the exercise, so the threshold is drawn ON the
   bar — a number without its target is just a number. */
.rate{margin:13px 0 0}
.rate-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.rate-n{font-family:Petrona,Georgia,serif;font-size:27px;font-weight:700;line-height:1;
  color:var(--good-deep);font-variant-numeric:tabular-nums}
.rate-n.under{color:var(--gold)}
.rate-n.none{color:var(--line)}
.rate-lab{font-size:13.5px;color:var(--muted)}
.bar{position:relative;height:11px;background:var(--line);border-radius:99px;overflow:visible}
.bar i{display:block;height:100%;border-radius:99px;background:var(--good);transition:width .5s ease}
.bar i.under{background:var(--gold)}
.bar .thresh{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.45;left:70%}
/* Under the bar, not over it: above, it shared a line with "3 of about 12
   fixed" and the two collided on any narrow screen. */
.bar .thresh::after{content:'70%';position:absolute;top:13px;left:-11px;font-size:11px;
  font-weight:700;color:var(--muted);letter-spacing:.02em}
.rate-sub{margin-top:19px}
.rate-sub{font-size:14px;color:var(--muted);margin:13px 0 0}

.sec316{display:flex;gap:5px;margin:11px 0 0;flex-wrap:wrap}
.sec316 b{font-size:12.5px;font-weight:700;border-radius:6px;padding:3px 9px;
  background:var(--tint);color:var(--marsh-deep)}
.sec316 b.no{background:var(--line);color:var(--muted)}

/* Top-aligned: the avatar belongs beside the NAME, not floating halfway down
   a row that has a description, four ticks and two buttons under it. */
.cat{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.cat:last-child{border-bottom:none}
.cat .av{width:38px;height:38px;border-radius:9px;background:var(--tint);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:19px}
.cat .nm{font-weight:700;font-size:16.5px;line-height:1.25}
.cat .meta{font-size:14px;color:var(--muted);margin-top:1px}
.cat .ok{margin-left:auto;font-size:12px;font-weight:700;color:var(--marsh-deep);white-space:nowrap;
  background:var(--tint);border-radius:99px;padding:3px 9px;margin-top:2px}
.cat .ok:empty{display:none}
.cat .ok.no{color:var(--muted);font-weight:400}
.census-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.census-row label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 4px}
.census-row input{width:100%;font:inherit;font-size:19px;font-weight:600;padding:11px;
  min-height:52px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}
.census-row button{grid-column:1 / -1;font:inherit;font-weight:700;font-size:16px;min-height:52px;
  border-radius:10px;border:none;background:var(--marsh);color:var(--on-marsh);cursor:pointer}
@media (min-width:560px){.census-row{grid-template-columns:repeat(4,1fr)}}
/* Bars are capped so that three counts do not become three slabs the width of
   the card — a sparkline has to look like a sparkline at any length. */
.spark{display:flex;align-items:flex-end;gap:3px;height:38px;margin-top:9px}
.spark i{flex:1 1 auto;max-width:22px;background:var(--good);border-radius:2px 2px 0 0;
  min-height:3px;opacity:.75}

/* ---- map ----
   Never public. DESIGN.md §14 rules out a public colony map for the same
   reason exact addresses are restricted. Coordinators see every pin because
   they already hold the addresses; a caretaker sees only her own; a volunteer
   sees COUNTS PER AREA and no pin at all, which is the feed's redaction
   carried onto the map rather than quietly undone by it. */
#mapCanvas,.mapbox{height:62vh;min-height:380px;border-radius:15px;border:1px solid var(--line);
  overflow:hidden;box-shadow:var(--shadow);position:relative}
.maplegend{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);margin:12px 0 6px}
.maplegend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.dot-col.ok{background:var(--good)} .dot-col.under{background:var(--gold)}
.dot-col.none{background:var(--line);border:1.5px solid var(--muted)}
.dot-case{background:var(--urgent)}

/* A colony's pin is its sterilisation rate, drawn as a ring that fills.
   The conic gradient is the data; the white disc is just the hole. */
.cpin{--fill:var(--line);width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:var(--fill);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(20,30,25,.35);transition:transform .12s}
.cpin:hover{transform:scale(1.09)}
.cpin .cpin-in{width:27px;height:27px;border-radius:50%;background:var(--surface);
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cpin.nocount{background:var(--line)}
.cpin.nocount .cpin-in{color:var(--muted)}
.cpin.sel{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--marsh),0 2px 10px rgba(20,30,25,.4)}

.kpin{width:14px;height:14px;border-radius:50%;border:2.5px solid var(--surface);cursor:pointer;
  background:var(--muted);box-shadow:0 1px 5px rgba(20,30,25,.4)}
.kpin.p-High{background:var(--urgent);width:17px;height:17px}
.kpin.p-Medium{background:var(--gold)}
.kpin.p-Low{background:var(--marsh)}

/* Area bubbles: a count, never a location. */
.abub{position:relative;width:var(--d);height:var(--d);border-radius:50%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--marsh);color:var(--on-marsh);box-shadow:0 2px 10px rgba(20,30,25,.3);
  border:2.5px solid var(--surface);transition:transform .12s}
.abub:hover{transform:scale(1.06)}
.abub b{font-size:18px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
/* The area name goes UNDER the circle, not inside it. Inside, "North
   Charleston" clipped to "North…" on every bubble, which looked broken. */
.abub span{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:.01em;
  color:var(--ink);background:var(--surface);border-radius:6px;padding:2px 7px;
  box-shadow:0 1px 4px rgba(20,30,25,.25)}
.abub.zero{background:var(--line);color:var(--muted);opacity:.75}
.abub.on{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--gold),0 2px 10px rgba(20,30,25,.35)}

/* Map / Satellite, as words. MapLibre's own .maplibregl-ctrl-group sizes its
   buttons to a 29px square for icons, so every rule here has to out-specify it
   or the second word gets guillotined. */
.mapswitch{display:flex;overflow:hidden;width:auto}
.mapswitch button,
.maplibregl-ctrl-group.mapswitch button{font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  border:none;background:var(--surface);color:var(--muted);padding:0 13px;
  width:auto;min-width:0;height:34px;white-space:nowrap;display:block}
.mapswitch button+button{border-left:1px solid var(--line)}
/* MapLibre's own hover/focus rule is (0,3,1) and its stylesheet is injected
   AFTER this one, so an equal-specificity selector loses the tie and the
   chosen button goes grey the moment the cursor rests on it. :not(:disabled)
   buys the extra point. */
.maplibregl-ctrl-group.mapswitch button.on:not(:disabled),
.maplibregl-ctrl-group.mapswitch button.on:not(:disabled):hover,
.maplibregl-ctrl-group.mapswitch button.on:not(:disabled):focus{
  background-color:var(--marsh);color:var(--on-marsh)}
.maplibregl-ctrl-group.mapswitch button:not(.on):not(:disabled):hover{
  background-color:var(--tint);color:var(--marsh-deep)}

/* Attribution is a licence condition, so it stays — but it does not get to be
   the biggest thing on a phone screen. */
.maplibregl-ctrl-attrib{font-size:11px;max-width:74%}
.maplibregl-ctrl-attrib a{color:var(--muted)}

.maplibregl-popup-content{font-family:"Source Sans 3",sans-serif;font-size:14.5px;
  border-radius:12px;padding:0;overflow:hidden;background:var(--surface);color:var(--ink);
  box-shadow:0 4px 22px rgba(20,30,25,.28);min-width:210px}
.maplibregl-popup-tip{border-top-color:var(--surface)!important;border-bottom-color:var(--surface)!important}
.maplibregl-popup-close-button{font-size:20px;color:var(--muted);padding:2px 8px}
.mpop{padding:12px 14px}
.mpop h5{font-family:Petrona,Georgia,serif;font-size:17px;font-weight:600;margin:0 0 2px;line-height:1.2}
.mpop .w{font-size:13.5px;color:var(--muted);margin:0 0 8px}
.mpop .bar{margin-bottom:7px}
.mpop .n{font-size:13.5px;color:var(--muted)}
.mpop .go{display:block;width:100%;text-align:center;font:inherit;font-size:14px;font-weight:700;
  cursor:pointer;background:var(--tint);color:var(--marsh-deep);border:1.5px solid var(--marsh);
  border-radius:9px;padding:8px;margin-top:9px}
.mapctl{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 11px}
.setloc{margin-top:9px}
/* Placing a pin takes over the map, so it says so in a band nobody can miss. */
.mapnote{position:absolute;left:12px;right:12px;top:12px;z-index:3;background:var(--marsh-deep);
  color:#fff;font-size:14.5px;font-weight:600;border-radius:11px;padding:11px 14px;
  box-shadow:0 4px 18px rgba(0,0,0,.3);display:flex;gap:10px;align-items:center}
.mapnote button{margin-left:auto;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;border:none;border-radius:8px;padding:6px 11px}

/* ---- cats & photos ---- */
.cat .av{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:none}
.ticks{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.tick{font:inherit;font-size:12px;font-weight:700;cursor:pointer;border-radius:6px;
  padding:4px 9px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);
  min-height:30px}
.tick.on{background:var(--tint);border-color:var(--marsh);color:var(--marsh-deep)}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px;margin-top:4px}
.shots img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.uploading{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;
  background:var(--marsh-deep);color:#fff;font-weight:600;font-size:15px;
  padding:11px 18px;border-radius:99px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.cat.gone{opacity:.5}
.cat.gone .nm{text-decoration:line-through}
.tick.danger{color:var(--urgent);border-color:var(--urgent)}
.catstate{font:inherit;font-size:12px;font-weight:700;border-radius:6px;padding:3px 7px;
  min-height:30px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted)}
.shots img{cursor:pointer}

/* ---- the caretaker's own colony card ----
   Her card leads with a photograph, because she is the one who took it and
   because a place you look after is recognised by sight long before it is
   recognised by name. The chevron is there so a card that holds photos, a
   census, a cat list and four buttons can be folded away again. */
.col-top{display:flex;align-items:center;gap:12px}
.col-thumb{width:56px;height:56px;border-radius:11px;object-fit:cover;flex:none;
  border:1px solid var(--line);background:var(--tint)}
.col-cover{display:block;width:100%;height:132px;object-fit:cover;background:var(--tint);
  border-bottom:1px solid var(--line)}
.colony.closed .col-cover{filter:grayscale(1)}
/* The empty state of a photograph is an invitation to take one, not a picture
   of a derelict house. */
.col-thumb.none{display:flex;align-items:center;justify-content:center;border-style:dashed;
  padding:0;cursor:pointer;color:var(--muted);background:var(--tint)}
.col-thumb.none svg{width:24px;height:24px}
.col-thumb.none:hover{color:var(--marsh-deep);border-color:var(--marsh)}
.cat .av.none{display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  color:var(--muted);background:var(--tint);border:1.5px dashed var(--line);border-radius:9px}
.cat .av.none svg{width:20px;height:20px}
.cat .av.none:hover{color:var(--marsh-deep);border-color:var(--marsh)}
.chev{flex:none;align-self:flex-start;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
  color:var(--muted);background:var(--ground);border:1px solid var(--line)}
.colony-head:hover .chev{color:var(--ink);border-color:var(--muted)}
.colony.closed{opacity:.72}
.colony.closed .col-thumb{filter:grayscale(1)}
.colony h3 .tag{font-size:11.5px;vertical-align:3px;background:var(--line);color:var(--muted)}


/* ---- the offer, not the lecture ----
   A fed colony that is not being fixed is the mechanism that makes the whole
   problem worse — and the person feeding it is the best trapping partner in
   the county, because she is there every day and the cats already trust her.
   So this is gold, not red: it is an offer of help sitting next to the number,
   never a warning, and never a telling-off. */
.nudge{background:var(--gold-tint);border:1.5px solid var(--gold);border-radius:12px;
  padding:14px 15px;margin:0 0 20px}
.nudge b{display:block;font-family:Petrona,Georgia,serif;font-size:17.5px;font-weight:700;
  margin-bottom:5px;color:var(--ink)}
.nudge p{font-size:15px;color:var(--ink);opacity:.82;margin:0 0 11px}
.nudge .reveal{width:100%;background:var(--surface);border-color:var(--gold);color:var(--ink)}

/* A case id in a colony's history, as a way back to the case itself. */
.caselink{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:13.5px;
  color:var(--marsh-deep);text-decoration:none;border-bottom:1.5px solid var(--line)}
.caselink:hover{border-bottom-color:var(--marsh)}

/* "not sent out" — a held case, so a coordinator can see at a glance which
   ones are still sitting in front of her and nobody else. */
.status.held{background:var(--gold-tint);color:#7A5A16}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .status.held{background:#332B18;color:#E0BE78}}

/* Who else helps at a colony, and HFFH's how-to links. */
ul.people{list-style:none;margin:0;padding:0}
ul.people li{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:15.5px}
ul.people li:last-child{border-bottom:none}
ul.links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
ul.links a{display:flex;flex-direction:column;padding:11px 14px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface);text-decoration:none;color:var(--marsh-deep)}
ul.links a:hover{border-color:var(--marsh)}
ul.links a span{font-size:14px;color:var(--muted)}
.btn.ghost.strong{color:var(--marsh-deep);border-color:var(--marsh);border-width:1.5px}
/* On a narrow phone three buttons don't fit; the card itself and its chevron
   already open it, so the third button goes rather than wrapping alone. */
@media (max-width:440px){.colony .acts .open-btn{display:none}}

/* ---- a trapping weekend ---- */
.tnr{background:var(--tint);border:1.5px solid var(--marsh);border-radius:13px;padding:14px 15px;margin:4px 0 16px}
.tnr b{font-family:Petrona,Georgia,serif;font-size:19px;color:var(--marsh-deep)}
.tnr p{margin:4px 0 10px;font-size:15.5px}
.tnr .reveal{width:100%;margin-top:8px}
.trap h2{margin:8px 0 2px}
.backlink{font:inherit;font-size:15px;background:none;border:none;padding:6px 0;color:var(--marsh-deep);cursor:pointer}
.trapgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0 96px}
@media (min-width:560px){.trapgrid{grid-template-columns:repeat(3,1fr)}}
.ttile{position:relative;display:flex;flex-direction:column;padding:0;border:2px solid var(--line);border-radius:14px;
  background:var(--surface);overflow:hidden;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.ttile img,.ttile .nopic{width:100%;aspect-ratio:1;object-fit:cover;display:flex;align-items:center;
  justify-content:center;background:var(--tint);color:var(--muted)}
.ttile .nopic svg{width:34px;height:34px}
.ttile .cap{padding:8px 10px 10px;font-size:13.5px;color:var(--muted);line-height:1.3}
.ttile .cap b{display:block;font-size:16px;color:var(--ink)}
.ttile.on{border-color:var(--marsh);box-shadow:0 0 0 3px var(--marsh)}
.ttile .badge{position:absolute;top:8px;right:8px;background:var(--marsh);color:var(--on-marsh);
  font-weight:700;font-size:13px;border-radius:99px;padding:4px 10px}
.ttile.add{border-style:dashed;align-items:center;justify-content:center;text-align:center;min-height:170px;
  gap:8px;color:var(--marsh-deep);font-weight:600;padding:12px}
.ttile.add svg{width:34px;height:34px}
.trapbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px -12px rgba(0,0,0,.25)}
.trapbar .btn{flex:1}
.trapbar .btn:disabled{opacity:.45}
@media (min-width:600px){.trapbar{left:50%;transform:translateX(-50%);width:560px;border-radius:14px 14px 0 0}}