:root{
  --paper:#faf7f2;--card:#fffdf9;--ink:#111;--muted:#5b5750;--faint:#6b665d;--quiet:#757168;--line:#e4ded3;--line-soft:#ece6db;--line-strong:#cfc7b8;--tint:#efe9df;--accent:#2b4c3f;--accent-deep:#1d352b;--accent-soft:#e6ede9;--danger:#9b2c1f;--success:#2f7d4f;--warning:#c08a1e;
  --sans:"Instrument Sans",system-ui,sans-serif;--serif:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --radius:8px;--radius-lg:10px;--tap:44px;--col:760px;--shadow-pop:0 8px 24px rgba(17,17,17,.12);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --row-time:190px;--row-price:52px;--row-cal:28px;--row-away:94px;
  /* Item card titles: small enough that a typical name fits one line on a phone. */
  --t-card:17px;
  /* The small step under card text: day headings and source lines (#201). */
  --t-small:13px;
  /* List cards (.row/.item; docs/layout-qa.md, Card height): the padding above and below a card's text, the gap between
     its lines, and the source line's height, which the card's icon row shares. pnpm layout:check holds cards to these. */
  --card-pad:var(--space-4);--card-gap:var(--space-1);--line-src:calc(var(--t-small) * 1.5);
  /* Weekends view chips (#620): the type size, its line, the lines a title can take, and the gap between chips. */
  --t-chip:11px;--lh-chip:14px;--chip-lines:2;--chip-gap:var(--space-1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans);-webkit-text-size-adjust:100%}
a{color:var(--accent)}a:hover{color:var(--accent-deep)}
/* One focus ring for every control; component rules below may adjust the offset. */
:is(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Keep a lone word off the last line of running text. */
p,.lede,.hint,.foot span,.region .sub{text-wrap:pretty}
h1,h2,h3,p{margin:0}
code,pre{font-family:var(--mono)}
.wrap{width:100%;max-width:var(--col);margin:0 auto;padding:0 16px}
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;min-height:60px;padding:8px 16px}
.brand{display:inline-flex;align-items:center;min-height:var(--tap);font-family:var(--serif);font-weight:800;letter-spacing:-.01em;font-size:26px;color:var(--ink);text-decoration:none}
.menu{position:relative}
.menu summary{list-style:none;width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:52px;z-index:10;width:260px;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;overflow:hidden}
.menu nav a,.menu nav button{display:flex;flex-direction:column;gap:2px;padding:12px 16px;min-height:var(--tap);text-decoration:none;color:var(--ink);border:0;border-top:1px solid var(--line-soft);background:none;font:inherit;text-align:left;cursor:pointer}
.menu nav a:first-child{border-top:0}
.menu .label{font-size:16px;font-weight:500}.menu .sub{font-size:13px;color:var(--muted)}
/* City search (#295, docs/search.md): the header icon's panel and the /search page share the form and the hit rows. */
.topacts{flex-shrink:0;display:flex;align-items:center;gap:8px}
.search .pop{position:absolute;right:-52px;top:52px;z-index:10;width:min(360px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:12px;display:flex;flex-direction:column;gap:8px}
.cityform{display:flex;gap:8px}
.cityform input{flex:1;min-width:0;height:var(--tap);padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--card);font:16px var(--sans);color:var(--ink)}
.cityform .btn{flex-shrink:0}
.hits{display:flex;flex-direction:column}
.hits a{display:flex;flex-direction:column;gap:2px;padding:10px 4px;min-height:var(--tap);text-decoration:none;color:var(--ink);border-top:1px solid var(--line-soft)}
.hits a:first-child{border-top:0}
.hits a:hover,.hits a.on{background:var(--tint)}
.hits .label{font-size:16px;font-weight:500}.hits .sub{font-size:13px;color:var(--muted)}
.hits a.mine{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px var(--space-2);padding:10px var(--space-3);margin-bottom:var(--space-1);border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-deep)}
.hits a.mine .sub{grid-column:1;color:inherit}
.hits a.mine::after{content:"";grid-column:2;grid-row:1/span 2;width:8px;height:8px;margin-right:var(--space-1);border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
.hits a.mine.on{outline:2px solid var(--accent);outline-offset:-2px}
.hits a.mine + a{border-top:0}
.hits a.more{justify-content:center;color:var(--accent)}.hits a.more .label{font-size:14px;font-weight:400}
.searchpage .hits{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0 12px}
.menu .me-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 8px 4px 16px;border-top:1px solid var(--line);background:var(--tint)}
.menu nav .me-row .name{display:block;flex:0 1 auto;min-height:var(--tap);line-height:var(--tap);padding:0;border:0;font-size:14px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu nav .me-row .name:hover{color:var(--accent-deep);text-decoration:underline}
.menu nav .me-row button{flex-direction:row;align-items:center;border:0;padding:0 8px;color:var(--accent);font-weight:500;flex-shrink:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--tap);padding:0 16px;border-radius:var(--radius);font:500 15px var(--sans);cursor:pointer;text-decoration:none;background:var(--accent);color:var(--paper);border:1px solid var(--accent)}
.btn:hover{background:var(--accent-deep);color:var(--paper)}
.btn.quiet{background:var(--card);color:var(--ink);border-color:var(--line-strong)}
.btn.quiet:hover{background:var(--tint);color:var(--ink)}
.btn.tall{height:48px}.btn.full{width:100%}
.btn:disabled{opacity:.6;cursor:default}
/* A button waiting on the server (aria-busy): full color and a spinner, so it reads as working, not dead. */
.btn[aria-busy=true]{opacity:1;cursor:progress}
.btn[aria-busy=true]::before{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@media (prefers-reduced-motion:reduce){.btn[aria-busy=true]::before{animation-duration:2s}}
.vote{display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--ink);border:1px solid var(--line-strong);font:600 15px var(--sans);cursor:pointer;text-decoration:none;line-height:1.1}
.vote:hover{background:var(--tint);color:var(--ink)}
.vote[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent)}
.vote-col{flex-direction:column;gap:2px;width:48px;min-height:48px;border-radius:var(--radius-lg);padding:6px 0 4px}
.vote-row{gap:6px;height:48px;min-width:64px;padding:0 14px;border-radius:999px;font-size:14px}
.vote-row .cnt{color:var(--muted);font-weight:500}
.vote-card{flex-shrink:0;width:var(--tap);height:var(--tap);border-radius:50%;border-color:transparent;background:none;color:var(--faint)}
.vote-card svg{width:18px;height:18px}
.vote-card:hover{background:var(--tint);color:var(--ink)}
.vote-card[aria-pressed=true]{background:none;color:var(--accent);border-color:transparent}
.vote-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.vote[aria-pressed=true] svg{fill:currentColor}
.save{display:contents}
/* Like on places (#242): the heart and its public count, after Save on a card. */
.vote-card.like{width:auto;min-width:var(--tap);gap:3px;padding:0 var(--space-2);border-radius:999px}
.vote-card.like .cnt{font:500 13px var(--sans);font-variant-numeric:tabular-nums}
/* Add to calendar (#173): a quiet icon at the end of a card's date line, beside Save on the item page; a native <details> menu. */
.addcal{position:relative}
.addcal>summary{list-style:none}
.addcal>summary::-webkit-details-marker{display:none}
.addcal-row>summary{width:48px;min-width:48px;padding:0}
.addcal-row svg{width:18px;height:18px}
.addcal[open]>summary{background:var(--tint);color:var(--accent-deep)}
.addcal-menu{position:absolute;right:0;top:calc(100% + var(--space-1));z-index:10;min-width:200px;display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.addcal-menu a{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--space-4);border-top:1px solid var(--line-soft);font:500 15px var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
.addcal-menu a:first-child{border-top:0}
.addcal-menu a:hover{background:var(--tint)}
.addcal-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* The date step (#325): pick one of a long event's dates, which opens to its three targets. The list scrolls inside the menu. */
.addcal-pick{width:min(288px,calc(100vw - 2 * var(--space-4)))}
.addcal-head{margin:0;padding:var(--space-3) var(--space-4) var(--space-2);border-bottom:1px solid var(--line-soft);font:600 var(--t-small)/1.3 var(--sans);color:var(--muted)}
.addcal-dates{max-height:min(330px,52vh);overflow-y:auto;overscroll-behavior:contain}
.addcal-date>summary{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap);padding:var(--space-2) var(--space-4);border-top:1px solid var(--line-soft);font:500 15px var(--sans);color:var(--ink);cursor:pointer;list-style:none}
.addcal-date:first-child>summary{border-top:0}
.addcal-date>summary::-webkit-details-marker{display:none}
/* The date never wraps. A long time (a day with several start times, #721) wraps under itself, right-aligned. */
.addcal-date>summary .d{flex:none;white-space:nowrap}
.addcal-date>summary .h{margin-left:auto;font-weight:400;font-size:14px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;text-wrap:balance}
.addcal-date>summary::after{content:"";flex:none;width:7px;height:7px;margin:-3px 2px 0 0;border:solid var(--quiet);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.addcal-date>summary:hover{background:var(--tint)}
.addcal-date>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.addcal-date[open]>summary{background:var(--tint);color:var(--accent-deep)}
.addcal-date[open]>summary::after{margin-top:3px;transform:rotate(-135deg)}
.addcal-to a{padding-left:var(--space-6)}
.addcal-to a:first-child{border-top:1px solid var(--line-soft)}
.addcal-dates>.addcal-more,.addcal-menu>.addcal-more{color:var(--accent-deep)}
.modal{width:calc(100% - 2 * var(--space-4));max-width:440px;max-height:calc(100% - 2 * var(--space-4));padding:0 var(--space-5);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card);color:var(--ink);box-shadow:var(--shadow-pop)}
.modal::backdrop{background:rgba(17,17,17,.4)}
.modal .stack{padding:var(--space-5) 0}
.modal h2{font:600 24px/1.15 var(--serif);padding-right:var(--tap)}
.modal-x{position:absolute;top:var(--space-2);right:var(--space-2);margin:0}
.modal .x{display:flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--radius);background:none;color:var(--muted);cursor:pointer}
.modal .x:hover{background:var(--tint);color:var(--ink)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) 0 var(--space-3)}
.head h1{font:600 26px/1.1 var(--serif)}
.head p{font-size:13px;color:var(--muted);margin-top:2px}
/* The maintainer's inline edit (#101): open, the form stands in for the title and description. */
.head:has(.feededit)>div{flex:1;min-width:0}
.feededit>summary{list-style:none;display:inline-flex;align-items:center;min-height:32px;font-size:13px;color:var(--accent);text-decoration:underline;cursor:pointer}
.feededit>summary::-webkit-details-marker{display:none}
.feededit[open]>summary,.head:has(.feededit[open]) :is(h1,.desc){display:none}
.feededit-form{display:flex;flex-direction:column;gap:12px;max-width:560px}
.feededit-form .error{font-size:14px;color:var(--danger);margin:0}
.feededit-actions{display:flex;gap:8px}
.tabs{display:flex;gap:4px;background:var(--tint);border-radius:999px;padding:3px;flex-shrink:0}
.tabs a{display:flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;font:500 14px var(--sans);color:var(--muted);text-decoration:none}
.tabs a[aria-current=page]{background:var(--card);color:var(--ink);font-weight:600}
.row{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--card-pad) 0;border-bottom:1px solid var(--line-soft)}
.list{border-top:1px solid var(--line)}
.side{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;width:56px}
.side form{margin:0}
.ago{font-size:11px;line-height:1.2;color:var(--faint);text-align:center}
.item{display:flex;flex-direction:column;gap:var(--card-gap);flex-grow:1;min-width:0;text-decoration:none;color:var(--ink)}
.item:hover{color:var(--ink)}.item:hover .t{text-decoration:underline}
.item .t{font:500 18px/1.3 var(--serif)}
.item .s{font-size:14px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.more{display:flex;justify-content:center;padding:16px 0 32px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) 0 var(--space-5)}
.pager .range{font-size:var(--t-small);color:var(--muted);text-align:center}
.pager .off{opacity:.4;cursor:default}.pager .off:hover{background:var(--card)}
.empty{padding:32px 0;color:var(--muted)}
.detail{display:flex;flex-direction:column;gap:16px;padding:18px 0 32px}
.back{font-size:14px;text-decoration:none}
.detail h1{font:600 26px/1.15 var(--serif)}
.meta{font-size:13px;color:var(--faint)}
.body{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;font:18px/1.55 var(--serif);white-space:pre-wrap;overflow-wrap:anywhere}
.actions{display:flex;gap:10px;align-items:center}
.actions .grow{flex-grow:1}
.actions form{margin:0}
/* Feed sources (#311): one row per host, name and state light, then past, next, and checked. */
.srcs-tabs{width:fit-content;max-width:100%;overflow-x:auto;margin:0 0 var(--space-3);scrollbar-width:none}
.srcs-tabs a{white-space:nowrap}
.srcs{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card)}
.srcs li{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px 128px;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);border-top:1px solid var(--line-soft)}
.srcs li:first-child{border-top:0}
.srcs-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.srcs-name a{font-weight:500;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srcs-name a:hover{text-decoration:underline}
.srcs-name .light{font-size:var(--t-small)}
.srcs-num{text-align:right;font-size:var(--t-small);color:var(--muted);font-variant-numeric:tabular-nums}
.srcs-num b{font-size:16px;font-weight:600;color:var(--ink)}
.srcs-checked{font-size:var(--t-small);color:var(--faint);text-align:right}
.srcs-sug{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);font-size:var(--t-small);color:var(--muted)}
.srcs-sug .tag{padding:1px var(--space-2);border:1px solid var(--accent);border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:500}
.srcs-sug a{font-weight:400;color:var(--accent);white-space:normal}
.srcs-act{display:inline;margin:0}
.srcs-error{margin:0 0 var(--space-3)}
.srcs-act button{padding:var(--space-1) 0;border:0;background:none;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.srcs-why{color:var(--muted);overflow-wrap:anywhere}
.srcs-help{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);margin:0 0 var(--space-4);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card)}
.srcs-help h2{font:600 18px/1.2 var(--serif)}
.srcs-prompt{align-self:stretch;margin:var(--space-1) 0;padding:var(--space-3);border-radius:var(--radius);background:var(--tint);font:12.5px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}
@media (max-width:560px){.srcs li{grid-template-columns:minmax(0,1fr) auto auto;row-gap:2px}.srcs-checked{grid-column:1/-1;text-align:left}}
.foot{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.foot code{font-size:12.5px}
/* The site footer every page ends with: the entity and the legal links, one row that wraps. */
.site-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1) var(--space-4);padding-top:var(--space-4);padding-bottom:var(--space-5);font-size:var(--t-small);color:var(--muted)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:0 var(--space-4)}
.site-foot a{color:var(--muted);display:inline-block;padding:var(--space-2) 0}
/* The comment box at the bottom of list pages (#244); the textarea is a .field one, shorter. */
.comments{display:flex;flex-direction:column;gap:var(--space-4);border-top:1px solid var(--line);padding:var(--space-4) 0 var(--space-5)}
.comments-head{display:flex;flex-direction:column;gap:var(--space-1)}
.comments h2{font:600 18px/1.2 var(--serif)}
.comment-form{display:flex;flex-direction:column;gap:var(--space-2);margin:0}
.comment-form .field textarea{min-height:88px}
.comment-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3)}
.comment-actions .error{margin:0 auto 0 0}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) 0;border-top:1px solid var(--line-soft)}
.comment-meta{display:flex;align-items:center;gap:var(--space-2);font-size:var(--t-small);color:var(--muted)}
.comment-meta a{font-weight:500}
.comment-del{margin:calc(var(--space-3) * -1) 0 calc(var(--space-3) * -1) auto}
/* A 44px target that doesn't make its row taller than one without it. */
.comment-del .linkish{min-height:var(--tap);font-size:var(--t-small);color:var(--muted)}
.comment-body{font-size:15px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.h2{font-size:18px;font-weight:600;margin:20px 0 8px}
body:has(.tr-page) .wrap{max-width:1120px}
.tr-flash[hidden]{display:none}
.tr-page.js .tr-flash{position:sticky;top:0;z-index:5;box-shadow:var(--shadow-pop)}
.tr-flash{margin:0 0 var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-deep);font-size:14px;overflow-wrap:anywhere}
.tr-sum{font-size:15px;color:var(--ink);margin-top:2px}
.tr-find{display:block;width:100%;box-sizing:border-box;height:var(--tap);margin:0 0 var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--card);color:var(--ink);font:16px var(--sans);padding:0 12px}
.tr-rows,.vt,.tr-wait{list-style:none;margin:0;padding:0}
.tr-group{margin:0 0 var(--space-5)}
.tr-group[hidden],.tr-row[hidden]{display:none}
.tr-ghead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-2) var(--space-4);padding:var(--space-2) 0;border-bottom:1px solid var(--line-strong);background:var(--paper)}
.tr-ghead h2{font:600 17px var(--sans);margin:0}
.tr-ghead p{font-size:13px;color:var(--muted);margin:2px 0 0;max-width:60ch}
.tr-search{margin:0}
.tr-q{margin:calc(-1 * var(--space-2)) 0 var(--space-4);font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.tr-gacts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.tr-gacc{margin:0}
.tr-gacc[hidden]{display:none}
.tr-gacc .btn{height:36px;padding:0 14px;font-size:14px}
.tr-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);padding:var(--space-3) 0 0}
.tr-range{margin:0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.tr-pages{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)}
.tr-pg{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;box-sizing:border-box;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--card);color:var(--ink);font:500 14px var(--sans);font-variant-numeric:tabular-nums;text-decoration:none}
a.tr-pg:hover{border-color:var(--accent);color:var(--accent-deep)}
.tr-pg[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.tr-pg[aria-disabled]{color:var(--faint);border-color:var(--line)}
.tr-gap{min-width:16px;text-align:center;color:var(--muted)}
.tr-all{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:14px;color:var(--ink);cursor:pointer}
.tr-all[hidden]{display:none}
/* The message above the section sticks to the top of the window: the anchor leaves room for it. */
.dd{margin:0 0 var(--space-5);scroll-margin-top:calc(var(--tap) + var(--space-5))}
.dd-top{padding:0 0 var(--space-3)}
.dd-top h2{font:600 20px/1.2 var(--sans);margin:0}
.dd-legend{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-2) 0 0;font-size:13px;color:var(--muted)}
.dd-swatch{flex:none;width:18px;height:14px;border-left:3px solid var(--warning);background:color-mix(in srgb,var(--warning) 14%,var(--card))}
.dd .tr-ghead h3{font:600 17px var(--sans);margin:0}
.dd-id{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--space-3)}
.dd-id .tr-prop{flex:1 1 280px;min-width:0;margin-top:0}
.dd-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);margin-top:var(--space-2)}
.dd-card{display:grid;align-content:start;row-gap:0;min-width:0;padding:var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card)}
.dd-card.kept{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.dd-badge{justify-self:start;padding:2px 10px;border-radius:999px;background:var(--tint);color:var(--muted);font-size:12px;font-weight:600}
.dd-card.kept .dd-badge{background:var(--accent);color:var(--paper)}
.dd-title,.dd-f{margin:0 -6px;padding:4px 6px;border-left:3px solid transparent;overflow-wrap:anywhere}
.dd-title{margin-top:var(--space-2);font:600 16px/1.3 var(--sans);color:var(--ink);text-decoration:none}
a.dd-title:hover{text-decoration:underline}
.dd-f{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:var(--space-2);font-size:13px;line-height:1.4}
.dd-f a{color:inherit}
.dd-k{color:var(--muted)}
.dd-diff{border-left-color:var(--warning);background:color-mix(in srgb,var(--warning) 14%,var(--card))}
.dd-row .tr-eg{margin-top:var(--space-2);color:var(--muted)}
.dd-note{margin-top:var(--space-2);font-size:14px;font-weight:500}
.dd-row .tr-acts{margin-bottom:0}
.dd-row .tr-acts .btn{height:var(--tap)}
@media(min-width:680px){
  .dd-pair{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(7,auto)}
  .dd-card{grid-row:span 7;grid-template-rows:subgrid}
  .dd-row .tr-acts .btn{height:36px}
}
.tr-row input[type=checkbox],.tr-all input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--accent)}
.tr-row{padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.tr-row p{margin:0}
.tr-f{margin:0}
.tr-id{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--space-3)}
.tr-name{display:flex;align-items:center;gap:var(--space-2);flex:1 1 160px;min-width:0}
.tr-tag{flex:1;min-width:0;width:100%;box-sizing:border-box;height:32px;margin-left:-6px;padding:0 6px;border:1px solid transparent;border-radius:var(--radius);background:none;color:var(--ink);font:600 16px var(--mono);text-overflow:ellipsis;cursor:text}
.tr-tag:hover{border-color:var(--line)}
.tr-tag:focus{border-color:var(--line-strong);background:var(--paper);outline:2px solid var(--accent);outline-offset:-1px}
.tr-n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-prop{font-size:15px;font-weight:500;color:var(--accent-deep);margin-top:2px}
.tr-prop.ask{color:var(--warning)}
.tr-eg{font-size:13px;color:var(--ink);margin-top:2px;overflow-wrap:anywhere}
.tr-eg span{color:var(--muted)}
span.tr-tag{height:auto;min-height:32px;line-height:1.3;padding-top:4px;padding-bottom:4px}
.tr-warn{margin:var(--space-1) 0 0;padding:0 0 0 18px;list-style:disc;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.tr-warn li::marker{color:var(--warning)}
.tr-warn .blocks{color:var(--danger);font-weight:600}
.tr-warn .blocks::marker{color:var(--danger)}
.tr-acts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-2)}
.tr-acts .btn,.tr-bar .btn{height:36px;padding:0 14px;font-size:14px}
.tr-acc{order:1}.tr-mrg{order:2}.tr-add{order:3}.tr-ign{order:4}
.tr-mrg[hidden]{display:none}
.tr-link{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;font:500 14px var(--sans);color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tr-link[hidden]{display:none}
.tr-panel[hidden]{display:none}
.tr-row>.tr-panel{margin-top:var(--space-2)}
.tr-panel{margin:0;padding:var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card)}
.tr-field{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500}
.tr-field input{height:40px;box-sizing:border-box;width:100%;max-width:320px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:16px var(--sans);padding:0 10px}
.tr-err{flex-basis:100%;order:9;font-size:13px;color:var(--danger);margin:4px 0 0}
.tr-err:empty{display:none}
.tr-btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-3)}
.tr-btns .btn:disabled,.tr-acts .btn:disabled,.tr-bar .btn:disabled{opacity:.5;cursor:default}
.tr-bar{position:sticky;bottom:0;z-index:4;margin:0 calc(-1 * var(--space-2));padding:var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-pop)}
.tr-page.js .tr-bar:not(.on){display:none}
.tr-count{margin:0 0 var(--space-2);font-size:14px;font-weight:500}
.tr-bar-btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.tr-merge{order:5;display:flex;gap:var(--space-2);flex:1 1 240px;min-width:0}
.tr-merge input{flex:1;min-width:0;height:36px;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:16px var(--sans);padding:0 10px}
.tr-more{margin:var(--space-5) 0 0;border-top:1px solid var(--line)}
.tr-more>details{border-bottom:1px solid var(--line)}
.tr-more>details>summary{display:flex;align-items:center;min-height:var(--tap);font:600 15px var(--sans);cursor:pointer}
.tr-more>details[open]{padding-bottom:var(--space-4)}
.tr-more pre{margin:var(--space-3) 0 0;padding:var(--space-3);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);font-size:12.5px;line-height:1.5;overflow-x:auto}
.tr-wait li{font-size:14px;padding:6px 0;border-bottom:1px solid var(--line-soft);overflow-wrap:anywhere}
@media (max-width:719px){
  .tr-ghead{position:sticky;top:0;z-index:3}
  .tr-gacts{margin-left:auto}
}
@media (min-width:720px){
  .tr-f{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3fr);column-gap:var(--space-5)}
  .tr-id{grid-row:span 3;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px}
  .tr-id .tr-name{flex:none}
  .tr-id .tr-n{padding-left:28px}
  .tr-f>:not(.tr-id){grid-column:2}
  .tr-prop{margin-top:0}
}
.vt-groups{columns:3 250px;column-gap:var(--space-6);margin-top:var(--space-3)}
.vt-group{break-inside:avoid;margin-bottom:var(--space-4)}
.vt-group h3{font:600 15px var(--sans);margin:0 0 var(--space-1);padding-bottom:var(--space-1);border-bottom:1px solid var(--line-strong)}
.vt li{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:2px var(--space-3);align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line-soft)}
.vt code{font-size:14px;font-weight:500}
.vt-n{position:relative;font-size:13px;font-variant-numeric:tabular-nums;text-align:right;padding-bottom:4px}
.vt-bar{position:absolute;right:0;bottom:0;height:3px;width:var(--w);min-width:2px;border-radius:2px;background:var(--accent)}
.vt-al{grid-column:1/3;display:flex;flex-wrap:wrap;gap:4px}
.vt-al span{font-size:12px;line-height:18px;padding:0 6px;border-radius:4px;background:var(--tint);color:var(--muted)}
.vt li.zero code,.vt li.zero .vt-n{color:var(--faint)}
.vt li.zero .vt-bar{display:none}
.vt li.child{margin-left:7px;padding-left:var(--space-3);border-left:2px solid var(--line-strong)}
.vt li.child code{font-weight:400}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{text-align:left;vertical-align:top;padding:6px 8px 6px 0;border-bottom:1px solid var(--line)}
.table th{font-size:12px;font-weight:600;color:var(--muted)}
.table td:nth-child(2),.table td:nth-child(3){white-space:nowrap}
.status{font-size:13px;font-weight:500;color:var(--accent-deep);background:var(--accent-soft);border-radius:999px;padding:2px 10px;align-self:flex-start}
.narrow{max-width:440px}
.stack{display:flex;flex-direction:column;gap:18px;padding:32px 0}
.stack h1{font:600 28px/1.15 var(--serif)}
.lede{font-size:15px;color:var(--muted);line-height:1.5}
.hint{font-size:13px;color:var(--muted);line-height:1.5}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.field input{height:48px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--card);padding:0 14px;font:16px var(--sans);color:var(--ink);width:100%}
.field input.code{height:56px;font:500 24px var(--mono);letter-spacing:.4em;text-align:center}
.field textarea{min-height:160px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--card);padding:12px 14px;font:16px/1.5 var(--sans);color:var(--ink);width:100%;resize:vertical}
.field [aria-invalid=true]{border-color:var(--danger)}
.field .error{font-weight:400}
.feedback-form{display:flex;flex-direction:column;gap:18px}
.feedback-form h1{font:600 28px/1.15 var(--serif)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.split{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.split a,.split .linkish{display:inline-flex;align-items:center;min-height:var(--tap)}
.error{font-size:14px;color:var(--danger)}
.error:empty{display:none}
.settings{display:flex;flex-direction:column;gap:22px;padding:22px 0 40px}
.settings h1{font:600 28px/1.15 var(--serif)}
.settings h2{font-size:18px;font-weight:600}
.section{display:flex;flex-direction:column;gap:12px}
.ready{display:flex;flex-direction:column;gap:10px;background:var(--accent-soft);border-radius:var(--radius-lg);padding:16px}
.ready h3{font-size:16px;font-weight:600}
.snippet{width:100%;font:13px/1.45 var(--mono);border:1px solid var(--line-strong);border-radius:var(--radius);padding:10px;background:var(--card);resize:vertical}
.ready p{font-size:14px;color:var(--accent-deep)}
.keyline{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.keyline code{flex-grow:1;min-width:0;font-size:13px;background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px;overflow-wrap:anywhere}
.ready details{font-size:14px}.ready summary{cursor:pointer;font-weight:500;min-height:32px}
.ready pre{margin:8px 0 0;font-size:12.5px;line-height:1.5;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.agent{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft)}
.agent .n{font-weight:500}.agent .u{font-size:13px;color:var(--muted)}
.submit{gap:var(--space-4)}
.submit .steps{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:var(--space-2);font-size:17px}
.submit .key{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.submit .agent{padding:0;border-top:0}
.keyrow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);flex-wrap:wrap}
.submit .keyhint{margin-top:calc(-1 * var(--space-3))}
/* An area's volunteer page (/volunteer/:region, #573, docs/mockups/volunteer-region.html). */
.vr{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-5) 0 var(--space-6)}
.vr h1{font:600 30px/1.15 var(--serif);letter-spacing:-.01em}
.vr h2{font:600 20px/1.2 var(--serif)}
.vr .kick{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.vr .box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.vr .box>form{display:flex;flex-direction:column}
.vr ol.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.vr pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--t-small);line-height:1.5;background:var(--tint);border-radius:var(--radius);padding:var(--space-3);max-height:260px;overflow:auto}
.vr .key{display:flex;gap:var(--space-2);align-items:center}
.vr .key code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;padding:10px var(--space-3);background:var(--tint);border-radius:var(--radius)}
.vr .acts{display:flex;flex-wrap:wrap;gap:var(--space-2);border-top:0}
.vr .rows{display:flex;flex-direction:column}
.vr .rows>div{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) 0;border-top:1px solid var(--line-soft)}
.vr .rows>div:first-child{border-top:0}
.vr .rows b{font-weight:500}
.vr .rows .sub{font-size:var(--t-small);color:var(--muted)}
.vr .week{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);font-size:14px;margin-top:var(--space-2)}
.vr .week span:nth-child(odd){color:var(--muted);white-space:nowrap}
.vr .week .now{font-weight:600;color:var(--accent-deep)}
.vr .linkbtn{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.vr .linkbtn:hover{color:var(--accent-deep)}
/* A neighborhood's volunteer page (#791, docs/mockups/volunteer-neighborhood.html): the lines under the heading, the open owner row, and the weekend link. */
.vr>div>.lede{color:var(--muted);margin-top:var(--space-2)}
.vr .rows a{font-weight:500}
.vr .rows>div.open b{color:var(--accent-deep)}
.vr .vr-more{font-size:14px;margin-top:var(--space-3)}
/* A neighborhood's "This weekend" beside "<name>'s lists" (#791, docs/mockups/volunteer-neighborhood.html); stacked on a phone. */
.vr .pair{display:flex;flex-direction:column;gap:var(--space-5)}
@media(min-width:760px){.vr .pair{display:grid;grid-template-columns:1fr 1fr;align-items:start}}
.va h2 small{font:13px var(--sans);color:var(--faint);margin-left:var(--space-1)}
.va .lede{margin-top:var(--space-2)}
.va h2+.hint{margin-top:var(--space-1)}
.va .arows{list-style:none;margin:var(--space-2) 0 0;padding:0}
.va .arows>li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line-soft)}
.va .arows>li:first-child{border-top:0}
.va .what{display:flex;flex-direction:column;gap:2px;min-width:0}
.va .what b{font-weight:600;overflow-wrap:anywhere}
.va .what .sub{font-size:var(--t-small);color:var(--muted)}
.va .what .own{color:var(--accent-deep)}
.va .arows .btn{flex:none}
.va .arows .status{align-self:center;flex:none}
.va .share{position:absolute;left:0;bottom:-1px;height:2px;background:var(--accent);border-radius:1px}
/* The ChatGPT guide at the end of the open areas page (#chatgpt, docs/chatgpt.md#connect-chatgpt). */
.va ol.steps li{overflow-wrap:anywhere}
.va .box h3{font:600 var(--t-card)/1.3 var(--sans);margin-top:var(--space-2)}
.va .box{scroll-margin-top:var(--space-5)}
/* Area pages (#617, docs/areas.md, docs/mockups/area-pages.html): /m/:slug and /m, on the .vr vocabulary. */
.areapage .sub{color:var(--muted);margin-top:var(--space-1)}
.areapage .box p:not(.hint){color:var(--ink)}
.areapage .hits{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0 var(--space-3);margin-top:var(--space-2)}
.golinks{display:flex;flex-direction:column}
.golinks a{display:flex;flex-direction:column;gap:2px;justify-content:center;min-height:var(--tap);padding:var(--space-2) 0;border-top:1px solid var(--line-soft);text-decoration:none;color:var(--accent);font-weight:500}
.golinks a:first-child{border-top:0}
.golinks a:hover{text-decoration:underline;color:var(--accent-deep)}
.golinks small{font-weight:400;color:var(--muted);font-size:var(--t-small)}
/* Supported agents (/agents, #629, docs/mockups/supported-agents.html). */
.light.no .dot{background:var(--danger)}
/* The phone top padding is one step under the mockup: the live header is taller, and the first screen at 375 x 667 must show as many results as it can. */
.sa{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-3) 0 var(--space-6)}
.sa h1{font:600 28px/1.15 var(--serif)}
.sa h2{font:600 20px/1.2 var(--serif)}
.sa h3{font-size:18px;font-weight:600;line-height:1.25}
.sa .lead{font-size:16px;color:var(--muted);max-width:60ch;margin-top:var(--space-2)}
.sa section{display:flex;flex-direction:column;gap:var(--space-3)}
.sa .sub{font-size:14px;color:var(--muted)}
.sa .light{font-size:var(--t-small)}
.sa-results{margin-top:calc(-1 * var(--space-3))}
.sa-sum{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sa-sum a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--tap);padding:var(--space-1) 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink)}
.sa-sum a:hover{background:var(--tint)}
.sa-sum .n{font-weight:500;min-width:0;overflow-wrap:anywhere}
.sa-sum .light{flex-shrink:0;text-align:right}
.sa-jump{font-size:14px}
.sa .lead+.sa-jump{margin-top:var(--space-2)}
.sa-abil{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-2);counter-reset:ab}
.sa-abil li{counter-increment:ab;display:grid;grid-template-columns:28px 1fr;gap:0 var(--space-2);align-content:start;padding:var(--space-3);background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.sa-abil li::before{content:counter(ab);grid-row:span 2;font:600 20px/1.2 var(--serif);color:var(--accent)}
.sa-abil b{font-weight:600}
.sa-abil span{font-size:14px;color:var(--muted);grid-column:2}
.sa-agent{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.sa-agent header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-1) var(--space-3)}
.sa-agent .maker{font-size:var(--t-small);color:var(--muted);font-weight:400}
.sa-has{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:var(--space-3) 0}
.sa-has div{display:flex;flex-direction:column}
.sa-has dt{font-size:var(--t-small);color:var(--muted)}
.sa-has dd{margin:0;font-size:14px;font-weight:600}
.sa-has dd.n{color:var(--danger)}.sa-has dd.q{color:var(--muted);font-weight:500}
.sa-agent p{font-size:15px}
.sa-agent .how{font-size:var(--t-small);color:var(--muted)}
.sa-agent ol{margin:0;padding-left:20px;font-size:15px;display:flex;flex-direction:column;gap:var(--space-1)}
.sa-agent h4{margin:0;font-size:14px;font-weight:600}
.sa-note{font-size:15px;color:var(--muted);padding:0 var(--space-1)}
.sa-prompt{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);padding:var(--space-3);font:var(--t-small)/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;margin:0}
.sa-read{margin:0;padding-left:20px;font-size:15px;display:flex;flex-direction:column;gap:var(--space-1)}
.sa-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}
.sa [id]{scroll-margin-top:var(--space-3)}
@media (min-width:720px){
  .sa{padding-top:var(--space-6)}
  .sa h1{font-size:34px}
  .sa-abil{grid-template-columns:1fr 1fr}
  .sa-has{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.terms p{font-size:16px;max-width:60ch}
.terms h2{font:600 18px/1.2 var(--serif);margin-top:var(--space-3)}
.agent .k{font-size:13px;color:var(--muted)}.agent-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.connect{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;border-top:1px solid var(--line-soft);padding-top:14px}
.connect .field{flex:1 1 180px}.connect .error{flex-basis:100%}
.pills{display:flex;flex-wrap:wrap;gap:8px}
/* The promo slot (#297, docs/web.md#promo-slot): one quiet row between rules, the whole line a link.
   Its height is fixed (one line on desktop, room for two on a phone), so swapping in the region
   name or another item never moves what follows. */
.promo{margin:0 0 var(--space-4);border-block:1px solid var(--line)}
.promo a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:var(--tap);color:var(--ink);font:500 14px/1.4 var(--sans);text-decoration:none}
.detail .promo{margin:0}
/* A ruled list right below: the slot's bottom rule is the list's top one. */
.promo:has(+.list){margin-bottom:0}
.promo+.list{border-top:0}
/* A load that shows no slot (#357): the list keeps its own top rule. */
html.no-promo .promo+.list{border-top:1px solid var(--line)}
.promo-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.promo svg{flex-shrink:0;color:var(--accent)}
.promo a:hover{color:var(--accent-deep)}
.promo a:hover .promo-text{text-decoration:underline;text-underline-offset:3px}
@media (max-width:719px){
  .promo a{height:calc(var(--tap) + var(--space-3))}
  .promo-text{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
.pill{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink);font-size:14px;font-weight:500;text-decoration:none}
.pill:hover{border-color:var(--accent);color:var(--accent-deep)}
.account{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:16px;font-size:14px}
.account span{color:var(--muted)}
#prompt-md{width:100%;min-height:160px;font:14px/1.5 var(--mono);border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px;background:var(--card)}
.vote:disabled{cursor:default}.vote:disabled:hover{background:var(--card)}
.head .byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;font-size:13px;color:var(--muted)}
.head .byline .status{align-self:auto;font-size:12px}
.credit{white-space:nowrap}
/* "by wknd" (#468): the site mark and name in a soft pill, for a list wknd seeded. Not a link. */
.wknd-credit{padding:1px 6px 1px 3px;border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);font-weight:500;white-space:nowrap}.wknd-credit img{vertical-align:-2px;margin-right:4px;border-radius:4px}
.pf{font-weight:500}
.light{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}.light b{font-weight:600;color:var(--ink)}
.light .dot{flex-shrink:0;width:var(--space-2);height:var(--space-2);border-radius:50%;background:var(--faint)}
.light.live .dot{background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 22%,transparent)}.light.stale .dot{background:var(--warning)}
.agentbar{display:flex;align-items:center;gap:12px;padding:10px 0 12px}
.agentbar p{font-size:13px;line-height:1.4;color:var(--muted);flex-grow:1;min-width:0}
.agentbar .btn{flex-shrink:0}
/* Day heading: a tracked sans label on a strong rule, so it reads as a divider, not another event (#201). */
.day{font:600 var(--t-small)/1.2 var(--sans);letter-spacing:.02em;color:var(--muted);padding:var(--space-5) 0 var(--space-2);border-bottom:1px solid var(--line-strong);display:flex;align-items:baseline;gap:var(--space-2)}
.day small{font:400 var(--t-small)/1.2 var(--sans);letter-spacing:0;color:var(--faint)}
.day[id]{scroll-margin-top:var(--space-3)}
.list .day:first-child{padding-top:var(--space-3)}
.facts{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:14px;line-height:1.45;color:var(--muted)}
.facts .when{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.facts .free{color:var(--accent-deep);font-weight:500}
.facts .warn{color:var(--danger)}
.facts .status{font-size:12px;padding:0 8px;align-self:center}
.item a.t{color:inherit;text-decoration:none}
.item a.t:is(:hover,:focus-visible){color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.15em}
/* A div .item holds a title link beside other text: only that link underlines, and only under the pointer. The item-wide hover is for rows that are one link. */
div.item:hover .t:not(:hover,:focus-visible){text-decoration:none}
/* Tertiary: visibly lighter than the address/description (--muted), still AA on both --paper and --card (--quiet, #231). Shared by event and place cards (cards.tsx Card). */
.item .src{font-size:var(--t-small);line-height:var(--line-src);color:var(--quiet);overflow-wrap:anywhere;margin-top:2px}
/* A card's icons (Save, and Like on a place) at the right of the title row (operator, 2026-10-05,
   docs/mockups/list-declutter.html). Each stays a bare 44px target, but negative block margins let it overhang the card's
   padding, so the row is no taller than the title's first line and the text alone sets the card's height. */
.fcard-head{display:flex;align-items:flex-start;gap:var(--space-2)}
.fcard-head .t{flex:1;min-width:0}
.fcard-acts{display:flex;flex:none;align-items:center;margin-block:calc((var(--t-card) * 1.3 - var(--tap)) / 2);margin-right:calc(-1 * var(--space-3))}
/* Links near an overhanging target (the town, a place's other locations) stay on top and keep their taps. */
.fcard .item a.t,.fcard .facts a,.fcard .locs>summary,.fcard .tags a{position:relative;z-index:1}
/* Add to calendar follows the cost on an event card's date line, before the town (operator, 2026-10-05). A bare 44px icon: negative block margins keep the line at its text height (1.45em is
   the facts' line height), and the title and links above or below it keep their taps where the target overhangs them.
   Its menu hangs from the left of the facts block, not from the icon, so it never runs off a phone screen. */
.fcard .facts{position:relative}
.addcal-inline{position:static;align-self:center;margin-block:calc((1.45em - var(--tap)) / 2);margin-inline:calc(-1 * var(--space-2))}
.addcal-inline .addcal-menu{left:0;right:auto}
/* Topic chips (#477): up to three Season and holiday, Setting, and Good for topics, quieter than the facts. A chip with a collection links to it.
   The event page (#542) shows all of them, a step larger, in the title block's column, which spaces them like the facts. */
.item .tags,.detail .tags{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);margin-top:2px}
.item .tag,.detail .tag{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--space-2);border:1px solid var(--line);border-radius:999px;font:500 12px/1.2 var(--sans);color:var(--muted);white-space:nowrap}
.detail .tag{min-height:32px;padding:0 var(--space-3);font-size:var(--t-small)}
.item a.tag,.detail a.tag{color:var(--accent-deep);border-color:var(--accent-soft);background:var(--accent-soft);text-decoration:none}
.item a.tag:hover,.detail a.tag:hover{border-color:var(--accent);color:var(--accent-deep)}
/* List tags (#654): one per list that holds the event, at most CARD_LISTS_MAX. Square and outlined, so they read apart from the round topic chips. */
.item .ltags{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);margin-top:2px}
.fcard .ltags a{position:relative;z-index:1}
.item .ltag{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px var(--space-2);border:1px solid var(--line-strong);border-radius:calc(var(--radius) / 2);font:500 12px/1.2 var(--sans);color:var(--muted);text-decoration:none;white-space:nowrap}
.item .ltag svg{flex-shrink:0}
.item .ltag span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.item .ltag:hover{color:var(--ink);border-color:var(--ink)}
.item .src a{color:inherit;text-decoration:none}
.item .src a:hover{color:var(--ink);text-decoration:underline}
.item .host{white-space:nowrap}
.item .from.solo::before{display:none}
.item .from::before{content:"";display:inline-block;width:1px;height:.9em;margin:0 var(--space-2);vertical-align:-.1em;background:var(--line-strong)}
.item .from a{text-decoration:underline;text-decoration-color:var(--line-strong)}
.addr{color:inherit;text-decoration:none}
.addr:hover{color:var(--ink)}
.addr .nw{white-space:nowrap}
.addr:hover .pin{color:var(--accent)}
.pin{display:inline-block;margin-left:2px;vertical-align:-2px;color:var(--faint)}
.detail .facts{font-size:16px;gap:6px 16px}
.detail .facts .when{font-size:18px;flex-basis:100%}
.detail .body{white-space:normal;display:flow-root}
.detail .body p{margin:0}
.detail .body .prompt-text{overflow-wrap:anywhere;padding-right:56px}
.detail .body .iconbtn{display:flex;margin:12px 0 0 auto}
.detail .body .iconbtn[hidden]{display:none}
.detail .body .iconbtn.top{position:sticky;top:12px;float:right;margin:-4px -4px 0 0;z-index:1}
.detail .actions{flex-wrap:wrap}
.dates{display:flex;flex-direction:column;gap:6px;font-size:15px}
.dates h2{font-size:16px;font-weight:600}
.dates ul{margin:0;padding-left:20px;color:var(--muted)}
.dates summary{cursor:pointer;min-height:32px;color:var(--muted)}
.choice{display:flex;gap:8px}
.choice label{flex:1;display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--card);font-weight:500;cursor:pointer}
.choice label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.field .choice input{width:18px;height:18px;margin:0;padding:0;accent-color:var(--accent)}
.filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);padding:0 0 var(--space-3)}
.filters .tabs a{padding:0 12px}
.filters .meta{white-space:nowrap}
/* Audience chips (#578, #579; src/web/audience.tsx, docs/audiences.md): a 36px toggle row; the selected chip takes the primary button fill. */
.aud{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:0 0 var(--space-3)}
.aud .lead{font-size:14px;font-weight:400;color:var(--muted)}
.aud .pill{min-height:36px;padding:0 12px;font-size:14px;font-weight:500;gap:0}
.aud .pill[aria-current=true]{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.aud .pill[aria-current=true]:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--paper)}
.filters .aud{flex-basis:100%;padding:0}
.where{font-size:14px;color:var(--muted)}
.where details{display:inline}
.where summary{display:inline;list-style:none;color:var(--accent);text-decoration:underline;cursor:pointer}
.where summary::-webkit-details-marker{display:none}
.where .pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.where .pick .btn{height:36px;font-size:14px}
.ages{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 0 var(--space-3);font-size:13px}
.ages a{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--muted);text-decoration:none;font-weight:500}
.ages a[aria-current=page]{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent)}
/* Settings: a rule above every section after the first. */
.profile,.subs,.admin,.ctx{border-top:1px solid var(--line);padding-top:16px}
/* What wknd knows about you (docs/context.md): one entry per row, then a one-line add. */
.ctx-list li{align-items:center}
.ctx-entry{display:flex;flex-direction:column;min-width:0;padding:var(--space-2) 0;font-size:14px}
.ctx-value{font-size:16px;font-weight:500;overflow-wrap:anywhere}
.ctx-add{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-2) var(--space-3)}
.ctx-add .field{flex:1 1 200px}.ctx-add .field:nth-of-type(2){flex-grow:3}
.ctx .snippet{font-family:var(--sans);font-size:14px}
/* /questions/review: a row per answer, with a bar for its share. An answer with 0 votes keeps a small stub (min-width). */
.tally table{width:100%;border-collapse:collapse;font-size:14px}
.tally th,.tally td{padding:var(--space-2) var(--space-2) var(--space-2) 0;border-bottom:1px solid var(--line-soft);text-align:right;font-variant-numeric:tabular-nums}
.tally thead th{font-weight:500;color:var(--muted)}
.tally tr > :first-child{text-align:left;width:50%}
.tally tbody th{font-weight:500}
.tally .bar{display:block;min-width:var(--space-3);height:6px;margin-top:4px;border-radius:3px;background:var(--accent)}
.me{display:flex;align-items:center;gap:12px}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--tint);flex-shrink:0}
.me .who{display:flex;flex-direction:column;min-width:0}.me .handle{font-weight:600;overflow-wrap:anywhere}
.profile-form,.avatar-form{display:flex;flex-direction:column;gap:12px}
.avatar-form{border-top:1px solid var(--line-soft);padding-top:14px}
/* The photo picker: the file input stays focusable but hidden; its label is the button and wears the focus ring. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.filepick{position:relative;display:flex;align-items:center;gap:var(--space-3);min-width:0}
.filepick .hint{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filepick .vh:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.field .hint{font-weight:400}
.avatar-actions{display:flex;align-items:center;gap:16px}
.ok{font-size:14px;color:var(--accent-deep)}
.handle-box{position:relative}
.handle-box .at{position:absolute;left:14px;top:0;bottom:0;display:flex;align-items:center;font:500 18px var(--serif);color:var(--muted);pointer-events:none}
.field .handle-box input{padding-left:34px;padding-right:48px}
.handle-box .mark{position:absolute;right:0;top:0;bottom:0;width:48px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.mark svg{display:none}
.handle-field[data-state=available] .i-ok{display:block;color:var(--accent)}
.handle-field[data-state=taken] .i-no,.handle-field[data-state=invalid] .i-no{display:block;color:var(--danger)}
.handle-field[data-state=checking] .i-wait{display:block;color:var(--faint);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.handle-field[data-state=checking] .i-wait{animation:none}}
.handle-field[data-state=available] input{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.handle-field[data-state=taken] input,.handle-field[data-state=invalid] input{border-color:var(--danger)}
.handle-box input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.handle-field[data-state=taken] input:focus-visible,.handle-field[data-state=invalid] input:focus-visible{outline-color:var(--danger)}
.handle-field .check{min-height:2.9em;font-size:13px;font-weight:400;line-height:1.45;color:var(--muted)}
.handle-field[data-state=available] .check{color:var(--accent-deep);font-weight:500}
.handle-field[data-state=taken] .check,.handle-field[data-state=invalid] .check{color:var(--danger)}
.handle-field.big .handle-box input{height:56px;font-size:20px;padding-left:38px}
.handle-field.big .at{font-size:22px}
.step-actions{display:flex;flex-direction:column;align-items:center;gap:6px}
.skip{display:flex;align-items:center;min-height:var(--tap);padding:0 12px;font-size:15px;color:var(--muted)}
.skip:hover{color:var(--ink)}
[hidden]{display:none!important}
.viewbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:0 0 var(--space-3)}
.viewbar .tabs a{height:38px;padding:0 14px}
.calnav{display:flex;align-items:center;gap:2px}
.calnav h2{font:600 17px/1 var(--serif);min-width:76px;text-align:center}
.cal{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}
.dayp .day{padding-top:4px}
.dayp .day:focus{outline:none}
.dayp .list{margin-top:6px}
@media (min-width:720px){
  .cal{width:min(1200px,calc(100vw - 48px));margin-left:calc(50% - min(600px,50vw - 24px))}
  .calnav h2{font-size:20px;min-width:170px}
}
@media (min-width:1100px){
  /* The page widens with the calendar, so the header, controls, and grid share one left edge. */
  body:has(#cal) .wrap{max-width:1232px}
  body:has(#cal) .cal{width:auto;margin-left:0}
  .cal{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
  .cal.none{display:block}
  .dayp{--dayp-max:calc(100vh - 2 * var(--space-3));position:sticky;top:var(--space-3);max-height:var(--dayp-max);overflow:auto}
  /* An open Add to calendar menu hangs below its card, and this scroll box cuts off what leaves it. On a day with few
     events the box is shorter than the menu, so while a menu is open the box takes its full height (#598). */
  .dayp:has(.addcal[open]){height:var(--dayp-max)}
}
/* The weekends view of /near and of an event list (#620, calendar.tsx Weekends). Phone: the weekends as pills, the chosen one as
   three day lists, the regulars behind one toggle. From 720px: weekend rows by Fri from 5pm, Sat, Sun. */
.wkd .whead,.wkd .wlabel,.wkd .wrow:not(.sel),.wkd .more.desktop,.wreg .desktop{display:none}
.wpills{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-3);scrollbar-width:none}
.wpills::-webkit-scrollbar{display:none}
.wpills .pill{flex:none;min-height:36px;padding:0 12px;font-size:14px;font-weight:500;gap:0}
.wpills .pill[aria-current]{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.wcell{display:flex;flex-direction:column;gap:var(--chip-gap);padding:var(--space-2) 0 var(--space-3);border-top:1px solid var(--line)}
.wcell .pick{align-self:flex-start;padding:var(--space-1) 0;font:600 15px/1.3 var(--serif);color:var(--ink);text-decoration:none}
.wcell.on .pick{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.wchip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--chip-lines);overflow:hidden;position:relative;padding:2px 0 2px 12px;font-size:var(--t-chip);line-height:var(--lh-chip);color:var(--muted);text-decoration:none}
.wchip::before{content:"";position:absolute;left:1px;top:calc(2px + (var(--lh-chip) - 6px) / 2);width:6px;height:6px;border-radius:50%;background:var(--accent)}
.wchip b{font-weight:600;color:var(--ink);margin-right:4px}
.wchip i{font-style:normal;color:var(--faint);margin-right:4px}
.wchip:hover{color:var(--ink)}
.wcell .wchip.wide{display:none}
.wkd .more{align-self:flex-start;padding:2px 0 2px 12px;font-size:var(--t-chip);font-weight:500;line-height:var(--lh-chip);color:var(--accent);text-decoration:none}
.wkd .more:hover{text-decoration:underline}
.wreg{border-top:2px solid var(--ink)}
.wreg-open{position:absolute;opacity:0;pointer-events:none}
.wreg label{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);font-size:var(--t-small);color:var(--muted);cursor:pointer}
.wreg label b{font:600 15px/1.3 var(--serif);color:var(--ink)}
.wreg label::after{content:"";width:7px;height:7px;margin-left:auto;margin-right:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.wreg-open:checked+label::after{transform:rotate(-135deg)}
.wreg-open:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.wreg-open:not(:checked)~.wreg-body{display:none}
.wreg-body{padding-bottom:var(--space-3)}
.wreg-cols{display:flex;flex-direction:column;gap:var(--space-3)}
.wreg-cols>span{display:none}
.wreg-col,.wreg-col details[open]{display:flex;flex-direction:column;gap:var(--chip-gap);min-width:0}
.wreg-col h4{margin:0;font:500 12px/1.3 var(--sans);color:var(--faint)}
.wreg-col .wchip::before{background:none;box-shadow:inset 0 0 0 1.5px var(--accent)}
.wreg summary{padding:2px 0 2px 12px;font-size:var(--t-chip);font-weight:500;line-height:var(--lh-chip);color:var(--accent);cursor:pointer;list-style:none}
.wreg summary::-webkit-details-marker{display:none}
.wreg details[open]>summary{display:none}
.wseason{padding-top:var(--space-3);font-size:var(--t-chip);line-height:calc(var(--lh-chip) + 2px);color:var(--muted)}
.wseason b{font-weight:600;color:var(--ink);margin-right:4px}
.wseason details,.wseason summary{display:inline;padding:0}
.wseason summary{margin-left:4px}
@media (max-width:719px){
  /* A phone drops the days already over and the days with nothing to list (heading included), and keeps the audience chips to one row that scrolls. */
  .wcell.past,.wcell.bare,.wreg-col.bare{display:none}
  body:has(.wkd) .filters .aud{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  body:has(.wkd) .filters .aud::-webkit-scrollbar{display:none}
  body:has(.wkd) .filters .aud>*{flex:none}
}
@media (min-width:720px){
  .wkd .wpills,.wkd .more.phone,.wreg-open,.wreg label::after,.wcell .pick span{display:none}
  .wkd .whead,.wkd .wrow,.wkd .wrow:not(.sel),.wreg-cols{display:grid;grid-template-columns:104px repeat(3,minmax(0,1fr))}
  .wkd .whead{padding-bottom:6px;font-size:13px;color:var(--faint)}
  .wkd .whead span,.wreg-col{padding:0 var(--space-2)}
  .wkd .wrow{min-height:88px;border-top:1px solid var(--line)}
  .wkd .wrow:last-child{border-bottom:1px solid var(--line)}
  .wkd .wlabel{display:flex;flex-direction:column;padding:var(--space-2) var(--space-2) var(--space-2) 0;font:600 var(--t-small)/1.35 var(--sans)}
  .wkd .wlabel span{white-space:nowrap}
  .wcell{position:relative;min-width:0;padding:var(--space-2) var(--space-2) 10px;border-top:0;border-left:1px solid var(--line);background:var(--card)}
  .wcell:last-child{border-right:1px solid var(--line)}
  .wcell.past{background:var(--paper)}
  .wcell:has(.pick:hover){background:var(--tint)}
  .wcell.on,.wcell.on:has(.pick:hover){background:color-mix(in srgb,var(--tint) 60%,var(--card));box-shadow:inset 0 2px 0 var(--accent)}
  .wcell .pick{position:absolute;inset:0;padding:0}
  .wcell .wchip,.wcell .more{z-index:1;padding-top:0;padding-bottom:0}
  .wcell .more{position:relative}
  .wcell .wchip.wide{display:-webkit-box}
  .wkd .more.desktop{display:block}
  .wreg{margin-top:var(--space-4)}
  .wreg label{min-height:0;padding:var(--space-2) 0;pointer-events:none}
  .wreg .desktop{display:inline}
  .wreg-open:not(:checked)~.wreg-body{display:block}
  .wreg-cols>span{display:block}
  .wreg-col .wchip{padding-top:0;padding-bottom:0}
  .wseason{margin-left:104px;padding-left:var(--space-2)}
}
@media (min-width:720px){
  .head h1{font-size:34px}.head p{font-size:14px;margin-top:4px}
  .item .t{font-size:20px}.item .s{-webkit-line-clamp:1}
  .actions .grow{flex-grow:0;padding:0 28px}
  .detail{padding-top:36px}.detail h1{font-size:36px}.body{font-size:21px;padding:22px}
  .settings{padding-top:36px}.settings h1{font-size:34px}
  .profile-form{display:grid;grid-template-columns:1fr 1fr;align-items:start}.profile-form .btn{justify-self:start}
  .detail .facts .when{font-size:20px}
}
/* Feed pages: the view switch and the agent button on one row (operator, 2026-09-26) */
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);padding:0 0 var(--space-3)}
.controls .viewbar{display:contents}
.controls .subicons{margin-left:auto}
.placesort{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;color:var(--muted)}
.placesort .btn{height:36px;font-size:14px}
/* On a phone the button alone says which order is on, so it shares a row with the subscribe icons. */
@media (max-width:479px){.placesort>span{display:none}}
/* The map view (#221). Its own stacking context keeps Leaflet's panes under the site menu. */
.mapbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);padding:0 0 var(--space-3);font-size:14px;color:var(--muted)}
.mapbar .btn{height:36px;font-size:14px}
.map{position:relative;z-index:0;isolation:isolate;height:clamp(320px,62vh,600px);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--tint);font:14px/1.4 var(--sans)}
.map noscript{display:block;padding:var(--space-4)}
.map-pop{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-2);max-height:220px;overflow:auto}
.map-pop li{display:flex;flex-direction:column;gap:2px}
.map-pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-2)}
.map-pop-head>a:first-child{font:600 14px/1.3 var(--sans);color:var(--accent)}
.map-pop-meta{font-size:var(--t-small);line-height:1.35;color:var(--muted)}
/* Instagram (#769, docs/mockups/instagram-icon.html; InstagramLink in layout.tsx). The icon alone, on map popups and event cards. */
.ig-icon{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin:-7px 4px -7px 0;border-radius:var(--radius);color:var(--muted)}
.ig-icon:hover{color:var(--accent);background:var(--tint)}
/* Leaflet colors every popup link (.leaflet-container a); the popup's icon keeps the card's muted color. */
.map-pop .ig-icon{color:var(--muted)}.map-pop .ig-icon:hover{color:var(--accent)}
/* An event card's venue and icon wrap as one, so the icon never sits on a line alone. */
.venue-ig{display:inline-flex;align-items:center;min-width:0}
.venue-ig .ig-icon{margin:-7px 0 -7px var(--space-1)}
/* The item pages' link: the icon, then the handle. */
.ig-link{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.ig-link svg{flex:none}
.ig-link:hover{color:var(--accent)}
/* The event page's organizer line holds the handle link after the name. */
.facts .org{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px var(--space-3)}
/* Subscribe (#161; labels, operator 2026-10-02): "Subscribe", then Agent and Email, each a word under its icon inside the
   same 44px-tall target, so the row is no taller than before. Quiet until used; the envelope fills when the feed is followed. */
.subicons{display:flex;align-items:center;gap:var(--space-1);position:relative}
.subicons-label{margin-right:var(--space-1);font-size:var(--t-small);line-height:1;color:var(--muted)}
.iconbtn.labelled{flex-direction:column;gap:2px;width:auto;min-width:var(--tap);padding:0 var(--space-1)}
.iconbtn-word{font:500 var(--t-small)/1 var(--sans)}
.subicons form[data-follow]{display:contents}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:var(--radius);background:none;color:var(--muted);cursor:pointer;list-style:none}
.iconbtn::-webkit-details-marker{display:none}
.iconbtn:hover{color:var(--ink);background:var(--tint)}
.iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.iconbtn[aria-pressed=true]{color:var(--accent)}
.iconbtn[aria-pressed=true] .env-body{fill:var(--accent)}
.iconbtn[aria-pressed=true] .env-flap{stroke:var(--card)}
.iconbtn[data-done]{color:var(--accent)}
.iconbtn.pill{width:48px;height:48px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink)}
.iconbtn.pill:hover{background:var(--tint)}
.iconbtn.pill[data-done]{color:var(--accent-deep);border-color:var(--accent);background:var(--accent-soft)}
.subemail[open]>.iconbtn{color:var(--accent-deep);background:var(--tint)}
.subemail-pop{position:absolute;right:0;top:calc(var(--tap) + 6px);z-index:10;width:min(340px,calc(100vw - 32px));display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.subemail-row{display:flex;gap:var(--space-2)}
.subemail-row[hidden]{display:none}
.subemail-foot{display:flex;align-items:flex-start;gap:var(--space-2)}
.subemail-foot p{flex:1;min-width:0}
.subemail-foot .iconbtn[hidden]{display:none}
.subemail-foot .iconbtn{flex-shrink:0;margin:calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0}
/* Phones: the box spans the page gutter to gutter, so nothing behind it shows at its edges. */
@media (max-width:719px){.subemail-pop{width:calc(100vw - 32px)}}
.subemail-row input{flex:1;min-width:0;height:var(--tap);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);padding:0 12px;font:16px var(--sans);color:var(--ink)}
.subemail-row input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* The email-then-code box (email-code.tsx): two forms, one shown; the code reads as digits, the hint as words. */
.subbox form{display:flex;flex-direction:column;gap:var(--space-2)}
.subbox form[hidden]{display:none}
.subbox strong{font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.subemail-row input.subcode{font:500 20px var(--mono);letter-spacing:.3em}
.subemail-row input.subcode::placeholder{font:16px var(--sans);letter-spacing:0}
.subbox-acts{display:flex;flex-wrap:wrap;gap:0 var(--space-4);font-size:13px}
.subbox-acts .linkish{display:inline-flex;align-items:center;min-height:32px}
.toast{position:fixed;left:50%;width:max-content;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:var(--space-3);max-width:calc(100vw - 32px);padding:0 4px 0 16px;min-height:var(--tap);background:var(--ink);color:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-pop);font-size:14px}
.toast[hidden]{display:none}
/* Save your progress (#321): a bar above the bottom edge, inside the content column; the page gets the
   same room at its foot (--keep-h, set by the page script) so the bar never covers the last card, and the toast sits above it. */
.keep{position:fixed;left:0;right:0;bottom:max(var(--space-4),env(safe-area-inset-bottom));z-index:15;padding:0 var(--space-4);pointer-events:none}
.keep[hidden]{display:none}
.keep>div{position:relative;max-width:calc(var(--col) - 2 * var(--space-4));margin:0 auto;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);padding-right:var(--tap);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);pointer-events:auto;animation:keep-rise .22s ease}
@keyframes keep-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.keep>div{animation:none}}
.keep p{margin:0;font-size:14px;line-height:1.4;color:var(--ink)}
.keep p b{font-weight:600}
.keep .subbox form{display:flex;flex-direction:column;gap:var(--space-2)}
.keep .subbox [data-subscribe-note]:empty{display:none}
.keep:has(form[data-subscribe-code]:not([hidden])) #keep-line{display:none}
.keep .subemail-row{margin-right:calc(-1 * var(--tap) + var(--space-3))}
.keep .subemail-row .btn{height:var(--tap);font-size:14px;flex-shrink:0}
.keep .x{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--radius);background:none;color:var(--muted);cursor:pointer}
.keep .x:hover{color:var(--ink);background:var(--tint)}
body.has-keep main{padding-bottom:var(--keep-h,120px)}
body.has-keep .toast{bottom:calc(var(--keep-h,120px) + var(--space-2))}
@media (min-width:720px){
  .keep>div{flex-direction:row;align-items:center;gap:var(--space-4);padding-top:var(--space-2);padding-bottom:var(--space-2)}
  .keep #keep-line{flex:1;min-width:0}
  .keep .subbox{flex:0 0 340px}
  .keep:has(form[data-subscribe-code]:not([hidden])) .subbox{flex:1}
  .keep .subemail-row{margin-right:0}
  .keep .x{top:50%;transform:translateY(-50%)}
}
/* The Scout pill (#489, docs/scouts.md#the-pill): the headline links to /activity, the X closes it. It gives way to the
   menu, the toast, and any bottom bar (Save your progress, the topic review bulk bar), so it never covers them. */
.toast.pill{gap:var(--space-1);padding:0 0 0 var(--space-4)}
.toast.pill a{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);color:var(--paper);text-decoration:none;border-radius:var(--radius)}
.toast.pill a:focus-visible,.toast.pill .x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toast.pill a svg{flex-shrink:0;color:var(--accent-soft)}
.toast.pill form{display:contents}
.toast.pill .x{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tap);height:var(--tap);border:0;border-radius:var(--radius);background:none;color:var(--paper);opacity:.7;cursor:pointer}
.toast.pill .x:hover{opacity:1}
main[tabindex="-1"]:focus{outline:none}
body:has(.menu[open]) .toast.pill,body:has(#toast:not([hidden])) .toast.pill,body.has-keep .toast.pill,body:has([data-bulk].on,.tr-page:not(.js) [data-bulk]) .toast.pill{display:none}
/* Tooltips (docs/web.md, Tooltips): one floating label for every icon-only control ([data-tip]); the page script places it
   inside the viewport. It appears at once and never animates. A long press shows it, so no callout or text selection there. */
.tip{position:fixed;inset:auto;margin:0;z-index:40;width:max-content;max-width:min(240px,calc(100vw - 2 * var(--space-2)));padding:var(--space-1) var(--space-2);border:0;border-radius:var(--radius);background:var(--ink);color:var(--paper);font:500 var(--t-small)/1.3 var(--sans);pointer-events:none;overflow:visible}
.tip[hidden]{display:none}
[data-tip]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.toast-undo{height:var(--tap);padding:0 12px;border:0;background:none;color:var(--accent-soft);font:600 14px var(--sans);text-decoration:underline;cursor:pointer}
.toast-undo:focus-visible{outline:2px solid var(--paper);outline-offset:-4px;border-radius:var(--radius)}
/* An event list's actions (#497, docs/mockups/list-growth.html): one primary button, then Agent and Share as labelled
   icon buttons. Signed out without the script, the button is a <details> summary and its email box sits under the row, shown by :has. */
.list-acts{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) 0 0}
.list-acts form[data-follow]{display:contents}
.list-primary{flex:1;max-width:320px;gap:var(--space-2);font-weight:600;list-style:none}
.list-primary::-webkit-details-marker{display:none}
.list-email{display:flex;flex:1;max-width:320px}
.list-email>.list-primary{max-width:none}
.list-email[open]>.list-primary,.list-primary[aria-pressed=true]{background:var(--accent-deep);border-color:var(--accent-deep)}
.list-primary svg{width:18px;height:18px;flex:none}
.list-primary[aria-pressed=true] .env-body{fill:currentColor}
.list-primary[aria-pressed=true] .env-flap{stroke:var(--accent-deep)}
.btn[aria-pressed=true] .if-off,.btn[aria-pressed=false] .if-on{display:none}
.list-acts .iconbtn.labelled{color:var(--muted)}
.list-email-box{display:none;margin-top:var(--space-2);max-width:420px;padding:var(--space-3);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius-lg)}
.list-acts:has(.list-email[open])+.list-email-box{display:block}
.list-email-box .subemail-row .btn{height:var(--tap);font-size:14px;flex-shrink:0}
/* With the page script the button opens a dialog instead (operator, 2026-10-05): the box moves into it, unframed. */
.list-modal .list-modal-head{display:flex;flex-direction:column;gap:6px}
.list-modal .list-email-box{display:block;max-width:none;margin:0;padding:0;background:none;border:0}
.list-modal-acts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.list-modal-acts .btn{flex:1 1 auto}
/* A share control that pops its copy-the-link fallback over the page instead of pushing the row (#497). */
.share.share-pop[open]{flex-basis:auto}
.share-pop .share-fallback{position:absolute;right:0;top:calc(100% + var(--space-1));z-index:10;margin:0;box-shadow:var(--shadow-pop)}
.share-pop[data-copied]>summary{color:var(--accent)}
/* More lists near here (#497): the /browse rows for the list's region, after the pager. */
.near-lists{display:flex;flex-direction:column;gap:var(--space-1);border-top:1px solid var(--line);margin-top:var(--space-4);padding:var(--space-5) 0 var(--space-4)}
.near-lists h2{font:600 22px/1.2 var(--serif)}
.near-lists .lrow:last-child{border-bottom:0}
.near-lists .all{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--accent);font-weight:500}
@media (min-width:720px){
  .list-primary,.list-email{flex:none}
  .list-primary{padding:0 22px}
}
/* Touch screens never keep a hover tint on a card icon. A pressed Save keeps its color; an open calendar menu keeps its tint. */
@media (hover:none){
  .vote-card:not([aria-pressed=true]):hover{background:none;color:var(--faint)}
  .addcal[open]>summary.vote-card{background:var(--tint);color:var(--accent-deep)}
}
/* Show on a card hidden earlier fades it back in (docs/hides.md). */
.row.coming{animation:row-back .22s ease}
@keyframes row-back{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.row.coming{animation:none}}
/* Hidden events at the foot of the list: one quiet line, open for the titles and Show. */
.hiddenlist{border-bottom:1px solid var(--line-soft);font-size:14px}
.hiddenlist>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--tap);color:var(--muted);cursor:pointer;list-style:none}
.hiddenlist>summary::-webkit-details-marker{display:none}
.hiddenlist>summary b{font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.hiddenlist[open]>summary b{display:none}
.hiddenlist ul{list-style:none;margin:0 0 var(--space-2);padding:0}
.hiddenlist li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);border-top:1px solid var(--line-soft)}
.hiddenlist li span{min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hiddenlist li .linkish{display:inline-flex;align-items:center;min-height:var(--tap);flex-shrink:0;font-weight:500}
/* Settings: Subscriptions */
.follows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.follows li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-1) 0;border-bottom:1px solid var(--line-soft)}
.follows form{flex-shrink:0}
.follows li a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.digest{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);font-size:14px;font-weight:500}
.digest .hint{flex-basis:100%;font-weight:400}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.seg button{height:var(--tap);min-width:72px;padding:0 14px;border:0;background:var(--card);font:500 14px var(--sans);color:var(--muted);cursor:pointer}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--paper)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.agenturl{display:flex;flex-direction:column;gap:var(--space-2)}
.agenturl-row{display:flex;gap:var(--space-2)}
.agenturl-row form{display:contents}
.agenturl-row input{flex:1;min-width:0;height:var(--tap);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--tint);padding:0 12px;font:13px var(--mono);color:var(--ink)}
/* Bookmarks (/bookmarks): the privacy line, the collapsed past, and the agent link at the foot. */
.head p.private{display:flex;align-items:center;gap:6px}
.agentbar.bm-agent{flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
.agentbar.bm-agent p{flex-basis:16em}
.past summary{display:list-item;padding:12px 0;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer}
.past .list{border-top:0}
.foot.agenturl{gap:var(--space-2);margin:var(--space-5) 0 var(--space-6);padding-top:var(--space-4)}
.foot.agenturl .field{color:var(--ink)}
/* A phone: the calendar title has its own row, at the left edge with the pills below it. */
.controls .calnav{order:3;flex-basis:100%;padding:var(--space-1) 0 var(--space-3)}
.tabs.views{gap:0;padding:0}
.tabs.views a{justify-content:center;width:var(--tap);height:var(--tap);padding:0;color:var(--muted)}
.tabs.views a:hover{color:var(--ink)}
.tabs.views a[aria-current=page]{background:var(--card);color:var(--accent-deep);box-shadow:inset 0 0 0 3px var(--tint),inset 0 0 0 4px var(--line-strong)}
.tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fcard .item .t{font:600 var(--t-card)/1.3 var(--sans)}
/* Ranked place lists (#242): the number before the name, and a business's other locations behind a native <details>. */
.fcard .item .t .rank{color:var(--accent);font-variant-numeric:tabular-nums}
.locs{font-size:var(--t-small);color:var(--muted)}
.locs>summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;width:max-content;color:var(--accent);font-weight:500}
.locs ul{margin:0 0 var(--space-2);padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-1)}
.locs li{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.head.user{justify-content:flex-start;align-items:center}
.head.user .avatar{width:56px;height:56px}
@media (min-width:720px){
  :root{--t-card:18px}
  .controls .calnav{order:0;flex-basis:auto;padding:0}
  /* The calendar title sits beside the view switch, as on the feed page. */
  .viewbar{justify-content:flex-start;gap:var(--space-3)}
}
/* Home: the lists directory (#141; docs/mockups/home-lists.html) */
.region{position:relative;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) 0}
.region .line{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.region h1{font:600 26px/1.1 var(--serif);min-width:0}
.region .sub{font-size:14px;color:var(--muted)}
.change summary{list-style:none;display:inline-flex;align-items:center;gap:var(--space-1);height:var(--tap);padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--card);font:500 14px var(--sans);color:var(--ink);cursor:pointer;flex-shrink:0}
.change summary::-webkit-details-marker{display:none}
.change summary:hover{background:var(--tint)}
.change[open] summary{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.change .panel{position:absolute;left:0;right:0;top:calc(100% - var(--space-2));z-index:5;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.change .panel-head{display:flex;align-items:center;gap:var(--space-2)}
.change .panel-head>:first-child{flex:1;min-width:0}
.change .panel-label{font:600 var(--t-small)/1.3 var(--sans);color:var(--muted)}
.change .panel-x{flex-shrink:0}
.change .regions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.change .regions a{display:inline-flex;align-items:center;height:var(--tap);padding:0 var(--space-3);border-radius:999px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.change .rsearch{width:100%;height:var(--tap);padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:16px var(--sans)}
.change .rsearch:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.change [hidden]{display:none}
.change a.btn[aria-current=true]{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent)}
.change .regions a[aria-current=true]{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent)}
.lists{display:flex;flex-direction:column}
/* Every home row is a plain row on the content column: no card, no bleed into the gutter (#258). The first row keeps a larger title and one more preview line. */
.lrow{gap:var(--space-2);padding:var(--space-4) 0;border-bottom:1px solid var(--line-soft)}
.lrow.first .t{font-size:20px}
.item .go{font-weight:500;color:var(--accent)}
.item:hover .go{color:var(--accent-deep);text-decoration:underline}
.item .s.one{-webkit-line-clamp:1}
/* A board row's facts (#357, volunteer-cta.html): the kind leads, then the cadence, then why it is open ("Paused, last checked Sep 25"). */
.lrow .kind{font-weight:500;color:var(--ink)}
.lrow .why{color:var(--quiet)}
.why .paused{font-weight:600;color:var(--ink)}
/* A home row's standing (#255): "by @silv, checked 2 days ago, 12 followers"; Paused leads when it applies. */
.standing{font-size:var(--t-small);line-height:1.4;color:var(--muted)}.standing>*+*::before{content:", "}.standing .paused{font-weight:600;color:var(--ink)}
.next{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.45}
.next li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--space-2)}
.next .tm{font-weight:500;white-space:nowrap}
.next .ti{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.next .ti span{color:var(--faint)}
.lgroup{font:500 15px/1.2 var(--serif);display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-5) 0 var(--space-2);border-bottom:1px solid var(--line)}
.lgroup small{font:13px var(--sans);color:var(--faint)}
@media (min-width:720px){
  .region{padding-top:var(--space-6)}
  .region h1{font-size:34px}
  .lgroup{font-size:17px}
  .nearby{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-5)}
}
/* Town pages (#317; docs/mockups/town.html): the home picker's header with a two-line title, the Live light, the weekly email box, distances, and the folded far events. */
.town{padding:var(--space-4) 0 var(--space-3);gap:var(--space-2)}
.town .line{align-items:flex-end}
.town h1{display:flex;flex-direction:column;gap:2px}
.town h1 .near{font:500 18px/1.2 var(--serif);color:var(--muted)}
.town h1 .name{font:600 40px/1.02 var(--serif);letter-spacing:-.01em}
.town .change summary{height:36px;padding:0 var(--space-2);border-color:transparent;background:none;color:var(--muted);font-size:13px}
.town .change summary:hover{background:var(--tint);color:var(--ink)}
.town .change .panel{top:calc(100% + var(--space-1));max-height:min(420px,60vh);overflow-y:auto}
.town .sub{max-width:46ch}
.town .fresh{display:flex;align-items:center;font-size:var(--t-small);color:var(--muted)}
.getmail{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);margin:0 0 var(--space-2);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.getmail .subemail-row .btn{height:var(--tap);font-size:14px}
.getmail .hint .linkish{white-space:nowrap}
.getmail-follow .btn[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-deep)}
.getmail-follow .btn[aria-pressed=true] .if-off,.getmail-follow .btn[aria-pressed=false] .if-on{display:none}
.facts .drive{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.drive .car{flex-shrink:0;color:var(--faint)}
.drive>span{margin-right:6px}
.drive b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
/* The set row of a town page's event card (#642, operator 2026-10-11; docs/mockups/town-montclair.html, card B): set columns
   (--row-*), so the calendar icon, the car icon, the distance and the place line up on every card. Phone: time and price,
   calendar, distance on line one and the place on line two. From 720px: one line. A long value wraps inside its column. */
.facts-set{display:grid;grid-template-columns:minmax(0,1fr) var(--row-cal) var(--row-away);align-items:start}
/* Time and price run on as one text, so a long time wraps and the price follows its last word. The wide space sets them apart; at a line start it takes no room. */
.facts-set .tp{min-width:0}
.facts-set .price::before{content:" ";letter-spacing:var(--space-2)}
.facts-set .price:empty{display:none}
.facts-set .addcal-inline{align-self:start;justify-self:center}
.facts-set .away{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.facts-set .away .car{flex-shrink:0;color:var(--faint)}
.facts-set .away b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.facts-set .place{grid-column:1/-1;min-width:0;overflow-wrap:anywhere}
.farther>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:calc(var(--tap) + var(--space-3));padding:var(--space-2) 0;border-bottom:1px solid var(--line-soft);color:var(--ink);font:500 14px/1.4 var(--sans);cursor:pointer}
.farther>summary::-webkit-details-marker{display:none}
.farther>summary small{display:block;font:400 var(--t-small)/1.4 var(--sans);color:var(--faint)}
.farther>summary svg{flex-shrink:0;color:var(--accent);transition:transform .15s}
.farther[open]>summary svg{transform:rotate(90deg)}
.farther>summary:hover>span{text-decoration:underline;text-underline-offset:3px}
.nextwk{font:600 18px/1.2 var(--serif);padding:var(--space-6) 0 0}
.list .nextwk+.day{padding-top:var(--space-3)}
/* An empty /near outside coverage (#450): the plain statement, the agent prompt button, then the closest events. */
.uncovered{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5) 0 var(--space-2)}
.uncovered-say h2{font:600 var(--t-card)/1.35 var(--sans);color:var(--ink)}
.uncovered-say p{margin-top:var(--space-1);color:var(--muted)}
.uncovered .list{border-top:0}
/* Under the calendar's day heading, whose own rule is enough. */
.dayp .list:has(>.uncovered){border-top:0;margin-top:0}
@media (prefers-reduced-motion:reduce){.farther>summary svg{transition:none}}
@media (min-width:720px){
  .facts-set{grid-template-columns:var(--row-time) var(--row-price) var(--row-cal) var(--row-away) minmax(0,1fr)}
  .facts-set .tp{display:contents}
  .facts-set .price:empty{display:block}
  .facts-set .place{grid-column:auto}
  .town{padding-top:var(--space-6)}
  .town h1 .near{font-size:20px}
  .town h1 .name{font-size:52px}
  .getmail form[data-subscribe],.getmail:has(.getmail-follow){flex-direction:row;align-items:center;gap:var(--space-4)}
  .getmail .subemail-row{flex:0 0 360px}
}
/* The agent volunteer board and task pages (#296; docs/mockups/volunteer-*.html, moved here from their mockup-only block). */
.vhead{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) 0}
.vhead h1{font:600 26px/1.15 var(--serif)}
.vhead .sub{font-size:15px;color:var(--muted);max-width:60ch}
.vhead .meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);font-size:14px;color:var(--muted)}
.vempty{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4) 0 var(--space-5);border-top:1px solid var(--line)}
.vempty h2{font:500 18px/1.3 var(--serif)}
.vempty p{font-size:15px;color:var(--muted);max-width:56ch}
.vsec{display:flex;flex-direction:column;gap:var(--space-3);padding:0 0 var(--space-5)}
.vsec h2{font:500 17px/1.2 var(--serif)}
.assign{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);font:16px/1.55 var(--serif);display:flex;flex-direction:column;gap:var(--space-3)}
.assign p{white-space:pre-line;overflow-wrap:anywhere}
.assign ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:var(--space-1)}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}
.act .hint{flex:1 1 200px}
.act form{display:contents}
.act .btn[hidden]{display:none}
.act.link{align-items:flex-end}
.field select{height:48px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--card);padding:0 var(--space-3);font:16px var(--sans);color:var(--ink);width:100%}
.result{display:flex;flex-direction:column;gap:var(--space-4)}
.result .scroll{overflow-x:auto}
.result table{width:100%;border-collapse:collapse;font-size:14px}
.result th,.result td{text-align:left;vertical-align:top;padding:var(--space-2) var(--space-3) var(--space-2) 0;border-bottom:1px solid var(--line-soft)}
.result th{font-size:var(--t-small);font-weight:600;color:var(--muted)}
.result p{font-size:15px;max-width:64ch}
.cite{font-weight:500;text-decoration:none;white-space:nowrap}
.cite:hover{text-decoration:underline}
.sources{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:var(--space-2);font-size:14px}
.sources li:target{background:var(--accent-soft)}
.sources small{display:block;color:var(--muted);font-size:var(--t-small);overflow-wrap:anywhere}
/* What the result parser allows (src/features/tasks/result-markdown.ts), on a done task and in review. */
.result h3{font:500 15px/1.3 var(--serif)}
.result ul,.result ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:var(--space-1);font-size:15px;max-width:64ch}
.result p,.result li,.result td{overflow-wrap:anywhere}
.result code{font-size:13px;background:var(--accent-soft);border-radius:4px;padding:0 4px}
.result pre{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3);font-size:13px}
.result pre code{background:none;padding:0}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4)}
.checks{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:var(--space-1);font-size:14px;color:var(--danger)}
@media (min-width:720px){
  .vhead{padding-top:var(--space-6)}
  .vhead h1{font-size:34px}
}
/* The /volunteer pitch for a friend new to wknd (#496; docs/mockups/volunteer-friends.html): the area line, the pitch
   card with its Copy prompt, how it works, the cost, wknd so far, and the open tasks folded by area. */
.vhead h1{max-width:20ch}
.varea-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin:0 0 var(--space-2);font-size:14px;color:var(--muted)}
.varea-line b{color:var(--ink);font-weight:600}
.vpitch{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius-lg);background:var(--card)}
.vpitch h2{font:600 19px/1.25 var(--serif)}
.vpitch .facts{gap:var(--space-1) var(--space-3)}
.vpitch .facts .kind{font-weight:500;color:var(--ink)}
.vpitch .btn{margin-top:var(--space-1);font-size:16px}
.vpitch .hint[hidden]{display:none}
.vpitch details summary{display:flex;align-items:center;min-height:var(--tap);width:max-content;cursor:pointer;font-size:14px;color:var(--accent)}
.vcopied{color:var(--success);font-weight:500}
.vsec2{padding:var(--space-5) 0 0}
.vsec2>h2{display:flex;align-items:baseline;gap:var(--space-2);font:500 19px/1.3 var(--serif);margin-bottom:var(--space-3)}
.vsec2>h2 small{font:13px var(--sans);color:var(--faint)}
.vsteps{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3);counter-reset:vstep}
.vsteps li{counter-increment:vstep;display:grid;grid-template-columns:28px 1fr;gap:0 var(--space-3);align-content:start;font-size:15px;color:var(--muted)}
.vsteps li::before{content:counter(vstep);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);font:600 14px/28px var(--sans);text-align:center}
.vsteps b{display:block;color:var(--ink);font-weight:600}
.vtools{font-size:15px;color:var(--muted);margin-top:var(--space-3)}
.vcost{display:grid;gap:var(--space-3);margin:0}
.vcost>div{display:grid;grid-template-columns:76px 1fr;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--line-soft)}
.vcost dt{font-size:14px;font-weight:600}
.vcost dd{margin:0;font-size:15px}
.vcost .how,.vproof .how{display:block;margin-top:2px;font-size:13px;color:var(--faint)}
.vproof{font-size:15px;color:var(--muted)}
.vproof b{color:var(--ink);font-weight:600}
.varea{border-bottom:1px solid var(--line-soft)}
.varea>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--tap);cursor:pointer;font-size:15px}
.varea>summary small{font-size:13px;color:var(--faint)}
.varea[open]>summary{font-weight:600}
.varea .lrow:last-child{border-bottom:0}
.vsec2+.lists,.lists+.vempty{margin-top:var(--space-5)}
@media (min-width:720px){
  .vpitch .btn{align-self:flex-start;padding:0 28px}
  .vsteps{grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
  .vcost{grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
  .vcost>div{grid-template-columns:1fr;align-content:start;gap:var(--space-1);padding:var(--space-3) 0 0;border-bottom:0;border-top:1px solid var(--line)}
}
/* Scout leaderboard (#349, docs/scouts.md) */
.scout{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);margin:var(--space-2) 0 var(--space-5);background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius-lg)}
.scout .who{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.scout .who a{font:600 20px/1.2 var(--serif);color:var(--accent-deep);text-decoration:none;overflow-wrap:anywhere}
.scout .who a:hover{text-decoration:underline}
.scout .who span{font-size:14px;color:var(--accent-deep)}
.scout .pts{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;font:600 34px/1 var(--serif);color:var(--accent-deep);font-variant-numeric:tabular-nums}
.scout .pts small{font:400 13px/1.4 var(--sans);color:var(--accent-deep)}
.check{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap);font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.scout .who span a,.board .nm small a,.regs .rs a{font:inherit;color:inherit;text-decoration:underline;white-space:normal}
.av{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--paper);font:600 24px var(--serif);flex-shrink:0}
.av.sm{width:32px;height:32px;font-size:15px;background:var(--tint);color:var(--ink);border:1px solid var(--line-strong)}
.board{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.board li{display:grid;grid-template-columns:28px 32px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--line-soft)}
.board .rk{font:500 15px var(--sans);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.board .nm{display:flex;flex-direction:column;min-width:0}
.board .nm a{font-weight:500;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .nm a:hover{text-decoration:underline}
.board .nm small{font-size:var(--t-small);line-height:1.4;color:var(--quiet)}
.board .pt{font:600 17px var(--sans);font-variant-numeric:tabular-nums}
.board li.top1 .rk{color:var(--accent);font-weight:600}
.note{margin:var(--space-3) 0 0;font-size:14px;color:var(--muted);max-width:60ch}
.sec-h{font:600 20px/1.2 var(--serif);margin:var(--space-6) 0 var(--space-2)}
.regs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.regs li{display:flex;align-items:baseline;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line-soft)}
.regs .rn{flex:1;min-width:0;font-weight:500}
.regs .rn a{color:var(--ink);text-decoration:none}.regs .rn a:hover{text-decoration:underline}
.regs .rs{font-size:14px;color:var(--muted);text-align:right}
@media (max-width:719px){.regs li{flex-direction:column;gap:2px}.regs .rs{text-align:left}}
.regs .rs b{font-weight:500;color:var(--ink)}
.regs .none{color:var(--quiet)}
.regs li[aria-current=true] .rn{color:var(--accent-deep)}
/* Scout activity (#349): your titles and points, dotted when new */
.acts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.acts li{position:relative;border-bottom:1px solid var(--line-soft)}
.acts .row{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-5);color:var(--ink);text-decoration:none}
.acts a.row:hover .what{text-decoration:underline}
.acts .what{font-size:16px;line-height:1.4}
.acts .why{font-size:var(--t-small);line-height:1.4;color:var(--quiet)}
.acts time{font-size:var(--t-small);color:var(--faint)}
.acts li.new::before{content:"";position:absolute;left:4px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.acts li.new .what{font-weight:600}
@media (min-width:720px){.scout{padding:var(--space-5)}.scout .who a{font-size:24px}.scout .pts{font-size:44px}.av{width:72px;height:72px;font-size:30px}.board li{grid-template-columns:32px 32px minmax(0,1fr) auto}.board .nm{flex-direction:row;align-items:baseline;gap:var(--space-3)}}
/* Agents researching events, on /volunteer since #496 (#398, docs/pulse.md#the-page; mockup docs/mockups/pulse.html). Without the script only the head, summary, and foot show. */
.pulse-head{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) 0}
.pulse-sub{font-size:14px;color:var(--muted)}
.pulse:not(.pulse-on) :is(.pulse-bar,.pulse-stage,.pulse-hours,.pulse-hlabels,.pulse-ticker,.pulse-when){display:none}
.pulse-bar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)}
.pulse-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.pulse-seg button{height:40px;padding:0 var(--space-3);border:0;background:none;font:500 14px var(--sans);color:var(--ink);cursor:pointer}
.pulse-seg button+button{border-left:1px solid var(--line-strong)}
.pulse-seg button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-deep)}
.pulse-summary{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-1) var(--space-3);margin-bottom:var(--space-2)}
.pulse-big{font:600 20px/1.2 var(--serif)}
.pulse-new{color:var(--success)}
.pulse-by{font:14px var(--sans);color:var(--muted)}
.pulse-when{font:12px var(--mono);color:var(--quiet);display:inline-flex;align-items:center;gap:6px}
.pulse-when:empty{display:none}
.pulse-when::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.pulse-when.live{color:var(--success)}
.pulse-when.live::before{background:var(--success);animation:pulse-blink 1.6s infinite}
@keyframes pulse-blink{50%{opacity:.25}}
.pulse-stage{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);padding:var(--space-3)}
.pulse-map{display:grid;gap:4px}
.pulse-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pulse-tile{position:relative;min-width:0;height:50px;border-radius:6px;background:var(--paper);border:1px solid var(--line-soft);padding:4px 5px;transition:background .6s,border-color .6s}
.pulse-tile b{font:500 11px/1.15 var(--sans);color:var(--quiet);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;hyphens:manual}
.pulse-tile.on{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 15%,var(--accent-soft))}
.pulse-tile.on b{color:var(--ink)}
/* "+N" new, floating up from the tile when wknd finishes a stop that added events (#418); above the canvas. */
.pulse-pop{position:absolute;left:50%;top:40%;z-index:1;transform:translateX(-50%);font:700 13px/1 var(--sans);color:var(--success);background:var(--card);border-radius:999px;padding:2px 6px;pointer-events:none;animation:pulse-pop 1.2s ease-out forwards}
@keyframes pulse-pop{0%{opacity:0;transform:translate(-50%,4px)}15%{opacity:1;transform:translate(-50%,0)}65%{opacity:1;transform:translate(-50%,-16px)}100%{opacity:0;transform:translate(-50%,-26px)}}
.pulse-tile.hit{animation:pulse-hit .9s ease-out}
@keyframes pulse-hit{0%{box-shadow:0 0 0 0 rgba(43,76,63,.45)}100%{box-shadow:0 0 0 10px rgba(43,76,63,0)}}
.pulse-tile.hit.add{animation-name:pulse-hitnew}
@keyframes pulse-hitnew{0%{box-shadow:0 0 0 0 rgba(47,125,79,.6)}100%{box-shadow:0 0 0 12px rgba(47,125,79,0)}}
.pulse-tile.busy{border-color:var(--accent);border-style:dashed}
@media (max-width:599px){.pulse-tile{height:46px;padding:3px 4px}.pulse-tile b{font-size:10px;letter-spacing:-.01em}}
.pulse-hours{display:grid;gap:3px;align-items:end;height:48px;margin-top:var(--space-4)}
.pulse-hours button{height:100%;border:0;padding:0;background:none;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end}
.pulse-hours i{display:block;border-radius:3px 3px 1px 1px;background:var(--line-strong)}
.pulse-hours button[aria-current=true] i{background:var(--accent)}
.pulse-hours button:disabled{cursor:default}
.pulse-hours button:disabled i{background:var(--line-soft)}
.pulse-hlabels{display:grid;gap:3px;font:11px var(--mono);color:var(--quiet);text-align:center;margin-top:2px;white-space:nowrap}
/* A label is wider than its column on a long day at 375px: it spills, centered, over its hidden neighbours. */
.pulse-hlabels span{display:flex;justify-content:center;min-width:0}
.pulse-hlabels span:nth-child(even){visibility:hidden}
.pulse-ticker{list-style:none;margin:var(--space-4) 0;padding:0;border-top:1px solid var(--line)}
.pulse-ticker li{display:flex;gap:var(--space-3);align-items:baseline;padding:var(--space-2) 0;border-bottom:1px solid var(--line-soft);font-size:14px;animation:pulse-in .4s ease-out}
.pulse-ticker time{font:12px var(--mono);color:var(--quiet);flex-shrink:0;min-width:10ch;white-space:nowrap}
.pulse-ticker li>span{min-width:0;overflow-wrap:anywhere}
.pulse-who{font-weight:600}
.pulse-host{font:13px var(--mono);color:var(--faint)}
.pulse-ticker .pulse-new{font-weight:600}
@keyframes pulse-in{from{opacity:0;transform:translateY(-4px)}}
.pulse-foot{font-size:13px;color:var(--quiet);margin-top:var(--space-4)}
/* Before the first run: a compact note where the map goes, so the page still reads heading, map, explainer. */
.pulse-empty{padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);color:var(--muted);font-size:14px}
.pulse+.mission{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.pulse-when.live::before,.pulse-tile.hit,.pulse-ticker li,.pulse-pop{animation:none}.pulse-pop{display:none}.pulse-tile{transition:none}}

/* Mobile-first discovery and orientation (#438). */
.brand{min-width:0;max-width:100%;flex-shrink:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--space-1);line-height:1.1}
.brand-tld{color:var(--muted)}
.brand-note{max-width:24ch;overflow-wrap:anywhere;text-wrap:balance;font:400 var(--t-small)/1.2 var(--sans);letter-spacing:normal;color:var(--muted)}
.discovery{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6) 0}
.discovery h1{font:700 clamp(36px,7vw,56px)/1.06 var(--serif);width:100%;overflow-wrap:anywhere;text-wrap:balance;letter-spacing:-.035em}
.discovery-intro{font-size:18px;max-width:44ch;color:var(--muted)}
.discovery-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.discovery-actions .btn{flex:1 1 auto}
.discovery-lists{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6) 0;border-top:1px solid var(--line);scroll-margin-top:var(--space-4)}
/* Phone: the heading takes the full width, then the hint with the area control beside it. Wider: the control sits right of both. */
.discovery-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);align-items:center;margin-bottom:var(--space-1)}
.discovery-head h2{grid-column:1/-1}
.discovery-head h2,.discovery-pick h2,.event-next h2{font:500 24px/1.2 var(--serif)}
.discovery-head h2{font-weight:700;letter-spacing:-.02em}
.discovery-more{display:inline-flex;align-items:center;align-self:flex-start;min-height:var(--tap);font-size:var(--t-small);font-weight:500}
.discovery-empty{color:var(--muted)}
.discovery-pick>.btn{align-self:flex-start}
.area-links{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.area-links a{display:flex;align-items:center;min-height:var(--tap);font-size:var(--t-small);padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius)}
/* The area control: locate beside Change (src/web/area.tsx). */
.area{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}
.locate[hidden]{display:none}
.area .locate{border:1px solid var(--line-strong);background:var(--card);color:var(--ink)}
.area .locate:hover{background:var(--tint)}
.where .locate{width:32px;height:32px;vertical-align:middle;color:var(--accent)}
/* Home list rows (#498, docs/mockups/home-growth.html): the whole row is one link, so the title reads as one (accent,
   underlined) and a chevron ends it; "More" is gone. A tint shows on hover and press, reaching past the column edge. */
.lrow.tap{position:relative;padding-right:calc(var(--space-5) + var(--space-2));border-radius:var(--radius)}
.lrow.tap .t{color:var(--accent);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;text-decoration-thickness:1px}
.lrow.tap:hover .t{text-decoration-color:var(--accent)}
.lrow.tap:is(:hover,:active){background:linear-gradient(var(--tint),var(--tint)) padding-box;box-shadow:calc(var(--space-2) * -1) 0 0 var(--tint),var(--space-2) 0 0 var(--tint)}
.lrow.tap:focus-visible{outline-offset:4px}
.lrow.tap .chev{position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--accent);display:flex}
/* The home page's weekly email (#498): one box after the lists, around the shared email box (.subbox). */
.getweek{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);margin-top:var(--space-3);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.getweek h2{font:700 22px/1.25 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.getweek .hint .linkish{white-space:nowrap}
/* "How the lists are made" (#498): the short trust block where "Behind the lists" was. */
.trust{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6) 0;border-top:1px solid var(--line)}
.trust h2{font:700 22px/1.25 var(--serif);letter-spacing:-.02em}
.trust p{color:var(--muted);max-width:60ch}
.trust-links{display:flex;flex-wrap:wrap;gap:0 var(--space-5)}
.trust-links a{min-height:var(--tap);display:inline-flex;align-items:center;font-weight:500}
.pulse-head h2{font:500 26px/1.2 var(--serif)}
.list-invitation{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);padding-bottom:var(--space-4)}
.list-invitation p{flex:1;min-width:150px}
/* Collections (#477): the town page's chips, one scrolling row, and the operator's preview line on a proposed collection. */
.town-colls{display:flex;gap:var(--space-2);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--space-4) * -1);padding:0 var(--space-4) var(--space-4)}
.town-colls::-webkit-scrollbar{display:none}
.town-colls .pill{flex:none;white-space:nowrap}
.pill .n{margin-left:var(--space-2);color:var(--muted);font-variant-numeric:tabular-nums}
.preview-note{margin:var(--space-4) 0 0;padding:var(--space-2) var(--space-3);border-radius:var(--radius);background:color-mix(in srgb,var(--warning) 14%,var(--card));color:var(--ink);font-size:14px}
.event-intro{font-size:var(--t-small);color:var(--muted);padding-bottom:var(--space-3);border-bottom:1px solid var(--line)}
.event-next{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-2)}
.event-next>a{display:flex;align-items:center;min-height:var(--tap)}
/* An ended event's page (#554): one quiet line under the date. */
.detail .passed{margin:0;font-size:var(--t-small);line-height:1.5;color:var(--muted);text-wrap:pretty}
.share{position:relative}
.share summary{list-style:none;white-space:nowrap}
.share summary::-webkit-details-marker{display:none}
.share-fallback{padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);width:min(280px,calc(100vw - var(--space-6)));margin-top:var(--space-2)}
.share-fallback label{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--t-small)}
.share-fallback input{width:100%;min-width:0;height:var(--tap);font:16px var(--sans);border:1px solid var(--line-strong);border-radius:var(--radius);padding:var(--space-2);background:var(--paper);color:var(--ink)}
.share[open]{flex-basis:100%}
@media(min-width:600px){.discovery-head h2{grid-column:1}.discovery-head .area{grid-column:2;grid-row:1/3}.brand{flex-direction:row;align-items:center;gap:var(--space-4)}.discovery-actions .btn{flex:0 1 auto}.discovery{padding:var(--space-6) 0}.getweek{padding:var(--space-5) var(--space-6)}}
/* Event list page (operator, 2026-10-05, docs/mockups/list-declutter.html): title, one line with the count, the view
   switch with Share at its end, big day headings, the weekly email box under the list, and a short foot. */
.listhead{padding-bottom:0}
.listhead h1{font-size:30px;line-height:1.08}
.listhead .desc{font-size:15px;margin-top:var(--space-2)}
.listhead .desc-count{font-weight:600;color:var(--ink)}
.listhead~.controls{padding-top:var(--space-4);padding-bottom:0}
.controls>.share-icon{margin-left:auto}
.controls>.share-icon .iconbtn{color:var(--muted)}
.listhead~#results>.list{border-top:0}
.dayhead{font:inherit;letter-spacing:0;color:var(--ink);gap:10px;padding:28px 0 10px;border-bottom:2px solid var(--ink)}
.dayhead .day-big{font:600 22px/1.1 var(--serif)}
.dayhead .day-date{font-size:14px;color:var(--muted)}
.list .dayhead:first-child{padding-top:var(--space-5)}
.weekly{display:flex;flex-direction:column;gap:6px;margin:var(--space-6) 0 var(--space-2);padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg)}
.weekly h2{font:600 20px/1.2 var(--serif)}
.weekly p{font-size:14px;color:var(--muted)}
.weekly .list-acts{padding-top:var(--space-2)}
.weekly .list-email,.weekly .list-primary{max-width:none}
.weekly .list-primary{height:48px}
.suggest>summary{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer;list-style:none}
.suggest>summary::-webkit-details-marker{display:none}
.suggest[open]>summary{margin-bottom:var(--space-2)}
.listfoot{gap:var(--space-1);font-size:14px;margin:var(--space-2) 0 var(--space-6)}
.foot-links{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 18px}
.foot-links>a,.foragents>summary{display:inline-flex;align-items:center;min-height:var(--tap)}
.foragents>summary{color:var(--accent);text-decoration:underline;cursor:pointer;list-style:none}
.foragents>summary::-webkit-details-marker{display:none}
.foragents[open]{flex-basis:100%}
.foragents-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding-bottom:var(--space-2)}
.foragents-body svg{width:18px;height:18px}
.listfoot .osm{font-size:12px}
@media (min-width:720px){
  .listhead h1{font-size:34px}
  .weekly .list-email,.weekly .list-primary{flex:none;max-width:320px}
}
/* Sign in with Google (#775, docs/mockups/login-google.html; SignInForms in layout.tsx). Google's rules fix the button's fill:
   white on a light page. The Google form and the email form sit in one .signin-start; the inner .stack adds no padding. */
.signin-start>.stack{padding:0}
.btn.google{position:relative;background:#fff;color:var(--ink);border-color:var(--line-strong);gap:var(--space-3)}
.btn.google:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.google svg{width:18px;height:18px;flex:none}
/* "or" between Google and the email form: a rule on each side of the word. */
.or{display:flex;align-items:center;gap:var(--space-3);font-size:14px;color:var(--muted)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
/* "Last used": one pill, on the Google button or by the Email label, from the last-method cookie. */
.last-used{display:inline-flex;align-items:center;padding:1px var(--space-2);border:1px solid var(--accent);border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);font:600 12px/1.4 var(--sans);white-space:nowrap}
.btn.google .last-used{position:absolute;top:-11px;right:var(--space-3)}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}