body{margin:0}img{max-width:100%}[hidden]{display:none!important}#h1-home{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- maker page (30 Sep 2026): a person opens full width, the map comes back for matches ---------- */
.app.page .split { grid-template-columns: 1fr; }
.app.page .mapcol { display: none; }
.app.page .col { --colpad: 26px; padding: 26px max(26px, calc((100% - 1140px) / 2)) 60px; }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.pmain { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.prail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 38px; }
.railcard { border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); padding: 14px 16px; display: grid; gap: 10px; }
.railcard .lbl { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.railcard b { font: 600 16px/1.25 var(--display); }
.railcard .sub { font-size: 13px; color: var(--muted); margin-top: -6px; }
.railcard .rfaces { display: flex; flex-wrap: wrap; gap: 6px; }
.railcard .rfaces button { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.railcard .rfaces .pic { width: 34px; height: 34px; font-size: 13px; transition: transform .15s var(--ease); }
.railcard .rfaces button:hover .pic { transform: scale(1.08); }
.railcard .btn { width: 100%; }
.railcard .rlink { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule); border-radius: 10px; padding: 0 6px 0 10px; height: 38px; font: 400 12.5px/1 var(--mono); color: var(--ink); background: var(--ground); }
.railcard .rlink span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.railcard .rlink button { border: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: 7px; height: 28px; padding: 0 10px; font: 500 12px/1 var(--body); cursor: pointer; }
.railcard .rmap { display: flex; align-items: center; gap: 8px; }
.railcard .rmap svg { width: 16px; height: 16px; flex: none; }
.pcta .hidemap svg { width: 14px; height: 14px; }
@container view (max-width: 820px) { .pgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .prail { position: static; padding-top: 0; } }
.mapcol.mapin { animation: mapin .38s var(--ease) both; }
@keyframes mapin { from { opacity: 0; transform: translateX(28px); } }
@media (prefers-reduced-motion: reduce) { .mapcol.mapin { animation: none; } }
@media (max-width: 900px) {
  .app.page .col { padding: 0; }
  .app.page .col > .view { margin-top: 0; border-radius: 0; box-shadow: none; }
  .app.page .col > .view::before { display: none; }
  /* Full pages start right under the status bar: the 20px top was room for the sheet's handle, which they don't have. */
  .app.page .col > .view { padding-top: 12px; }
  .app.page .you-out { padding-top: 0; }
  .app.page .mappill { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
  /* You and Contribute: the map stays laid out at its own size, only hidden. display:none sized it to 0 and back on
     every tab switch, which blanked it and dropped its tiles, so Explore flickered in. */
  .app.page .col { position: relative; }
  .app.page .col > .mapcol { display: block; position: absolute; top: 0; left: 0; right: 0; visibility: hidden; pointer-events: none; }
}

/* Phones: a full page shorter than the screen (an idea on the board, logged out) would end where its content does, over
   the grey ground. The page's own white goes all the way down instead (19 Oct 2026). */
@media (max-width: 900px) { body:has(#stage.page) { background: var(--panel); } }
/* ---------- You and Contribute (30 Sep 2026): full pages like a maker's, no map ---------- */
.app.page.acct .mappill { display: none !important; }
.you, .contrib, .you-sub { width: 100%; max-width: 720px; margin: 0 auto; }
.you { gap: 14px; }
.you-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.you-top > div { min-width: 0; }
.you-top .pic { width: 64px; height: 64px; font-size: 22px; flex: none; }
.you-top.sm .pic { width: 48px; height: 48px; font-size: 18px; }
.you-top h1 { font-size: 24px; margin: 0; overflow-wrap: anywhere; }
.you-top .handle { display: block; margin-top: 3px; font: 400 12.5px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.you-rank { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.you .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gc-sub { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.fym-inline .fym-list { overflow: visible; margin: 0; padding: 0; }
.fym-inline .fym-hide { margin-top: 4px; }
.you-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.you-tile { display: grid; gap: 4px; justify-items: start; align-content: start; text-align: left; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.you-tile:hover { border-color: var(--muted); }
.you-tile b { font: 700 18px/1.1 var(--display); }
.you-tile small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.you-set .gc-rp em { font-size: 20px; line-height: 1; color: var(--faint); }
.you-set .gc-rt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ys-head { padding-bottom: 6px; }
.ys-tree { position: relative; }
.ys-tree::before { content: ""; position: absolute; left: 25px; top: -8px; bottom: 34px; width: 2px; background: var(--rule); border-radius: 2px; }
.ys .gc-row { grid-template-columns: 52px minmax(0, 1fr) auto; }
.ys .gc-row > .gc-ic { justify-self: center; }
.ys .ys-row { border-top: 0; }
.ys .ys-row .gc-rt small { white-space: normal; }
.ys-ic { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--panel); }
.ys-ic .ys-arc { position: absolute; inset: 0; transform: rotate(-90deg); }
.ys-row.ok .gc-ic { background: color-mix(in srgb, var(--live) 14%, var(--panel)); color: var(--live); }
.ys-sub { display: block; margin: 8px 0 0; padding: 12px 0 4px; border-top: 1px solid var(--rule); font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ys-sub + .gc-row { border-top: 0; }
.gc-rp.ys-rp { grid-auto-flow: column; align-items: center; gap: 10px; }
.ys-ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--live); color: #fff; font: 700 11px/1 var(--body) !important; }
.ys-left { font: 600 12px/1 var(--body) !important; color: var(--intro) !important; background: color-mix(in srgb, var(--intro) 10%, var(--panel)); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.you-back { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 4px; }
.you-back h2 { font: 700 22px/1.2 var(--display); margin: 0; }
.you-out { align-items: center; text-align: center; max-width: 480px; margin: 0 auto; padding-top: 28px; gap: 12px; }
.you-out .lead { margin: 0 auto; }
.you-out .actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.you-out .btn.lg svg { width: 16px; height: 16px; }
.you-art { position: relative; display: block; width: 180px; height: 128px; margin: 0 auto 4px; }
.you-art .pic { position: absolute; width: 38px; height: 38px; font-size: 13px; box-shadow: 0 0 0 2px var(--gold), 0 3px 10px rgba(27,31,36,.18); }
.you-pin { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--intro); box-shadow: 0 0 0 7px color-mix(in srgb, var(--intro) 22%, transparent); }
.you-last { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border: 1px solid var(--rule); border-radius: 14px; text-align: left; }
.you-last .pic { width: 40px; height: 40px; }
.you-last b { display: block; font: 600 15px/1.2 var(--display); }
.you-last small { font: 400 12px var(--mono); color: var(--muted); }
/* Contribute */
.contrib .growcards { margin: 0; }
.gc-nextbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--ink); color: var(--panel); font: inherit; text-align: left; cursor: pointer; }
.gc-nextbar b { font: 600 14.5px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-nextbar em { font: 600 13px var(--mono); font-style: normal; color: color-mix(in srgb, var(--intro) 75%, #fff); white-space: nowrap; }
.gc-nextbar i { font-style: normal; opacity: .7; }
.gc-nextbar:hover { filter: brightness(1.15); }
.gc-rival { font-size: 13px; color: var(--muted); margin-top: -4px; }
.gc-today { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.4; }
.gc-today b { font-weight: 600; } .gc-today b.up { color: var(--live); }
.gc-today span { color: var(--muted); }
.gc-link .ic-link code { flex-basis: 180px; }
.gc-s2 { font-size: 13px; color: var(--muted); }
.gc-s2 .linkish { font-size: 13px; }
.gc-rt .gc-faces { display: inline-flex; vertical-align: -5px; margin-right: 6px; }
.gc-rt .gc-faces .pic { width: 20px; height: 20px; border: 2px solid var(--panel); margin-left: -6px; font-size: 9px; }
.gc-rt .gc-faces .pic:first-child { margin-left: 0; }
.gc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gc-tiles span { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); min-width: 0; }
.gc-tiles b { font: 700 20px/1 var(--display); }
.gc-tiles small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.gc-miles { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-mile { font: 500 12px/1 var(--body); padding: 7px 10px; border-radius: 999px; border: 1px dashed var(--rule); color: var(--muted); }
.gc-mile.on { border: 1px solid color-mix(in srgb, var(--live) 45%, var(--rule)); background: color-mix(in srgb, var(--live) 10%, var(--panel)); color: var(--ink); }
.signin .gd-talk { display: grid; gap: 0; }
.signin .gd-talk .ic-row { cursor: default; }
/* Save, on other makers' pages (where Find matches was) */
.savebtn svg { flex: none; }
/* "Following Ana": after a follow that finished on its own (after logging in, Follow everyone who came). */
.fo-note { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: #fff; font: 600 14px/1 var(--display); padding: 12px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.18); pointer-events: none; }
.savebtn.on svg path { fill: currentColor; }
/* Desktop: Contribute sits next to your face. Phones have it in the tab bar. */
#tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 600px) { .you-tiles, .gc-tiles { gap: 6px; } .you-tile, .gc-tiles span { padding: 10px; } .gc-nextbar { grid-template-columns: minmax(0, 1fr) auto auto; } .gc-nextbar .gc-eb { display: none; } }
/* Saved: the rows without "Find your match" (matching lives in You, for yourself) */

/* ---------- Explore (30 Sep 2026): chips on the map, "Today on the map", and the phone shell ---------- */
/* Desktop: the views are in the left nav, so the top bar keeps the logo (left), the search and the counter. */
.topbar .brand { grid-column: 1; justify-self: start; }
.topbar .top-right { grid-column: 3; }
/* No zoom buttons or whole-world button: pinch, scroll and double-tap zoom. The boat chip takes their corner. */
.zoombtns { display: none !important; }
#bt-chip { left: auto; right: 14px; }
.xtop { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 902; display: grid; gap: 10px; pointer-events: none; }
.xtop > * { pointer-events: auto; }
.xsearch { display: none; }
.xchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -4px -14px -6px; padding: 4px 14px 6px; justify-self: start; max-width: calc(100% + 28px); }
.mapcol:has(#bt-chip:not([hidden])) .xchips { max-width: calc(100% - 214px); }
/* fitChips: when the row needs the room (a search adds counts), the boat chip drops to a second line instead. */
.mapcol.chips-full:has(#bt-chip) .xchips { max-width: calc(100% + 28px); }
.mapcol.chips-full #bt-chip { top: 62px; }
.xchips::-webkit-scrollbar { display: none; }
.xchip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); font: 500 13.5px/1 var(--body); cursor: pointer; box-shadow: 0 1px 3px rgba(27,31,36,.12); white-space: nowrap; }
.xchip svg { width: 15px; height: 15px; }
.xchip[aria-pressed="true"] { background: #DCE8FB; border-color: #B7CCF2; color: #0B3D91; }
.xchip:hover { border-color: var(--muted); }
/* Today on the map */
.today { gap: 18px; }
.td-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.td-top h2 { font: 700 22px/1.2 var(--display); margin: 0; }
.td-live { display: inline-flex; align-items: center; gap: 7px; font: 400 12.5px/1 var(--mono); color: var(--muted); }
.td-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.td-pitch { display: grid; gap: 6px; justify-items: start; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--intro) 6%, var(--panel)); border: 1px solid color-mix(in srgb, var(--intro) 22%, var(--rule)); }
.td-pitch b, .today .td-pitch h2 { font: 700 20px/1.2 var(--display); margin: 0; letter-spacing: normal; } .td-pitch b em, .today .td-pitch h2 em { font-style: normal; color: var(--intro); }
/* An h2 since 15 Oct 2026 (one h1 a page, #h1-home here); it keeps the balanced lines it had as an h1. */
.today .td-pitch h2 { text-wrap: balance; }
.td-pitch > span:not(.eyebrow) { font-size: 13.5px; color: var(--muted); }
.td-pitch .btn { margin-top: 4px; }
.td-sec { display: grid; gap: 10px; }
.td-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.td-h h3 { font: 600 16px/1.2 var(--display); margin: 0; }
.td-h span { font-size: 12.5px; color: var(--muted); }
.td-more { justify-self: start; font-size: 13px; }
.td-wait { margin: 0; }
.td-cards { display: grid; gap: 10px; }
.td-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; text-align: left; padding: 12px; border: 1px solid var(--rule); border-radius: 16px; background: var(--panel); font: inherit; color: var(--ink); cursor: pointer; }
.td-card:hover { border-color: var(--muted); }
.td-card > .pic { width: 64px; height: 64px; font-size: 22px; border-radius: 14px; }
.td-ct { display: grid; gap: 3px; min-width: 0; }
.td-ct q { font-size: 13.5px; line-height: 1.4; quotes: "“" "”"; }
.td-ct q + small { font-size: 11.5px; color: var(--faint); margin-bottom: 4px; }
.td-ct b { font: 600 15px/1.25 var(--display); }
.td-m { font-size: 13px; color: var(--muted); } .td-m em { font-style: normal; color: var(--live); font-weight: 600; }
.td-s { font-size: 12.5px; color: var(--muted); }
.td-list { display: grid; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--panel); }
.td-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 0; border-top: 1px solid var(--rule); background: none; font: inherit; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.td-row:first-child { border-top: 0; }
.td-row:hover { background: var(--panel-2); }
.td-row > .pic { width: 40px; height: 40px; }
.td-rt { min-width: 0; } .td-rt b { display: block; font: 600 14px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-rt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-rp { display: grid; justify-items: end; gap: 2px; text-align: right; } .td-rp em { font-style: normal; font: 600 13px var(--mono); color: var(--live); } .td-rp small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.td-date { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; align-content: center; background: color-mix(in srgb, var(--intro) 10%, var(--panel)); color: var(--intro); line-height: 1; }
.td-date b { font: 700 16px/1 var(--display); } .td-date small { font: 500 10px/1.2 var(--mono); text-transform: uppercase; }
.td-date.poll { font: 700 16px/1 var(--display); background: var(--panel-2); color: var(--muted); } .td-date.poll small { color: var(--muted); }
.td-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.td-faces button { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.td-faces .pic { width: 52px; height: 52px; box-shadow: 0 0 0 2px var(--gold); }
.td-faces b { font: 600 12.5px/1.2 var(--display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-faces small { font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.td-list-card { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); color: var(--ink); text-decoration: none; }
.td-list-card:hover { border-color: var(--muted); }
.td-lf { display: flex; margin-bottom: 4px; } .td-lf .pic { width: 30px; height: 30px; margin-left: -8px; box-shadow: 0 0 0 2px var(--panel); } .td-lf .pic:first-child { margin-left: 0; }
.td-list-card b { font: 600 14px/1.25 var(--display); } .td-list-card small { font-size: 12px; color: var(--muted); }
.td-boat { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #E7F0F7; color: var(--ink); text-decoration: none; }
.td-boat > span:first-child { font-size: 22px; text-align: center; } .td-boat b { display: block; font: 600 14px/1.3 var(--display); } .td-boat small { font-size: 12.5px; color: var(--muted); } .td-boat i { font-style: normal; font-size: 20px; color: var(--faint); }
/* ---------- phones: the map is the home screen ---------- */
@media (max-width: 900px) {
  .topbar { display: none !important; }
  .xtop { left: 12px; right: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); gap: 8px; }
  .xsearch { display: grid; grid-template-columns: 22px minmax(0, 1fr) 36px; align-items: center; gap: 8px; height: 50px; padding: 0 7px 0 16px; border-radius: 999px; background: var(--panel); box-shadow: 0 2px 10px rgba(27,31,36,.18); }
  .xsearch svg { width: 18px; height: 18px; color: var(--muted); }
  .xsearch input { min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 16px/1 var(--body); color: var(--ink); }
  .xsearch input::placeholder { color: var(--muted); }
  .xme { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--ink); cursor: pointer; }
  .xme .pic { width: 36px; height: 36px; font-size: 14px; }
  .xchips { margin: -4px -12px -6px; padding: 4px 12px 6px; max-width: calc(100% + 24px) !important; }
  .xchip { height: 34px; padding: 0 13px; font-size: 13px; }
  #bt-chip, .talkmap { display: none !important; }
  #mt-mapchip { top: calc(116px + env(safe-area-inset-top, 0px)) !important; left: 12px !important; }
  #tabbar { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .col > .mapcol { height: 56vh; height: 56svh; }
}

/* ---------- Feedback board (8 Oct 2026): makermap.lol/feedback ---------- */
.fbk-head { gap: 10px; }
.fbk-head .lead { max-width: 52ch; }
.fbk-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fbk-areas { display: flex; flex-wrap: wrap; gap: 6px; }
.fbk-areas .ach { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); font: 500 12.5px/1 var(--body); color: var(--ink); cursor: pointer; white-space: nowrap; }
.fbk-areas .ach em { font: 400 11px/1 var(--mono); font-style: normal; color: var(--faint); }
.fbk-areas .ach[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.fbk-areas .ach[aria-pressed="true"] em { color: #c9cdd2; }
.fbk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.fbk-tabs button { flex: none; border: 0; background: none; padding: 11px 10px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 600 14px/1 var(--display); color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.fbk-tabs button:first-child { padding-left: 2px; }
.fbk-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.fbk-tabs .n { font: 500 11px/1 var(--mono); color: var(--faint); }
.fbk-list-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fbk-list-h h2 { font: 600 15px/1.2 var(--display); margin: 0; }
.fbk-list-h .tabs button { flex: none; padding: 0 10px; height: 28px; font-size: 12.5px; }
.fbk-rows { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--panel); }
.fbk-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-top: 1px solid var(--rule); cursor: pointer; transition: background .15s; }
.fbk-row:first-child { border-top: 0; }
.fbk-row:hover { background: var(--panel-2); }
.fbk-row.bug { cursor: default; align-items: start; }
.fbk-row.bug:hover { background: none; }
.fbk-bug { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; font: 700 18px/1 var(--display); background: color-mix(in srgb, var(--intro) 12%, var(--panel)); color: var(--intro); }
.fbk-v { width: 46px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 1px solid var(--rule); border-radius: 11px; background: var(--panel); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.fbk-v svg { width: 12px; height: 12px; color: var(--muted); }
.fbk-v b { font: 600 15px/1 var(--display); font-variant-numeric: tabular-nums; }
.fbk-v:hover { border-color: var(--intro); }
.fbk-v:active { transform: scale(.94); }
.fbk-v.on { background: color-mix(in srgb, var(--intro) 10%, var(--panel)); border-color: color-mix(in srgb, var(--intro) 55%, var(--rule)); color: var(--intro); }
.fbk-v.on svg { color: var(--intro); }
.btn.fbk-on { background: color-mix(in srgb, var(--intro) 10%, var(--panel)); border-color: color-mix(in srgb, var(--intro) 55%, var(--rule)); color: var(--intro); }
.fbk-big .btn svg { width: 11px; height: 11px; }
.fbk-t { min-width: 0; display: grid; gap: 3px; }
.fbk-t b { font: 600 14.5px/1.25 var(--display); }
.fbk-t .ln { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbk-t .ln.wrap { white-space: pre-line; }
.fbk-m { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin-top: 3px; font: 400 11px/1 var(--mono); color: var(--faint); }
.fbk-c { display: inline-flex; gap: 4px; align-items: center; }
.fbk-st { font: 600 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: 5px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.fbk-st.review, .fbk-st.confirmed { background: var(--panel-2); color: var(--muted); }
.fbk-st.planned { color: var(--comment); background: color-mix(in srgb, var(--comment) 12%, var(--panel)); }
.fbk-st.building, .fbk-st.fixing { color: #8a6410; background: color-mix(in srgb, var(--gold) 17%, var(--panel)); }
.fbk-st.shipped, .fbk-st.fixed { color: #177a51; background: color-mix(in srgb, var(--live) 13%, var(--panel)); }
.fbk-st.area { background: none; border: 1px solid var(--rule); }
.fbk-f { display: inline-flex; }
.fbk-f .pic { width: 18px; height: 18px; font-size: 8px; box-shadow: 0 0 0 2px var(--panel); margin-left: -5px; }
.fbk-f .pic:first-child { margin-left: 0; }
.fbk-mk { color: var(--intro); font-weight: 500; }
.fbk-ra { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fbk-sel { font: 500 12px/1 var(--body); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 8px; background: var(--panel); cursor: pointer; }
.fbk-claude { font: 500 11.5px/1 var(--body); color: var(--ink); border: 1px solid var(--rule); border-radius: 7px; padding: 5px 7px; background: var(--panel); white-space: nowrap; cursor: pointer; }
.fbk-claude:hover { border-color: var(--muted); }
.fbk-ctx { display: block; margin-top: 4px; font: 400 11px/1.45 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.fbk-own { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--ink); color: var(--panel); }
.fbk-own b { font: 600 15px/1.2 var(--display); }
.fbk-own p { margin: 0; font-size: 12.5px; color: #c9cdd2; line-height: 1.45; }
.fbk-own p strong { color: #fff; }
.fbk-own .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fbk-own .btn { background: var(--panel); color: var(--ink); border-color: var(--panel); }
.fbk-own .btn.primary { background: var(--intro); color: #fff; border-color: var(--intro); }
.fbk-empty { display: grid; gap: 6px; justify-items: start; padding: 18px; border: 1px dashed var(--rule); border-radius: 14px; font-size: 13.5px; color: var(--muted); }
.fbk-empty b { font: 600 15px/1.2 var(--display); color: var(--ink); }
.fbk-empty .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fbk-road { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fbk-lane { display: grid; gap: 8px; align-content: start; background: var(--ground); border: 1px solid var(--rule); border-radius: 12px; padding: 10px; min-width: 0; }
.fbk-lane > b { display: flex; justify-content: space-between; font: 600 12.5px/1 var(--display); padding: 2px 2px 4px; }
.fbk-lane > b span { font: 400 11px/1 var(--mono); color: var(--faint); }
.fbk-card { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--rule); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.fbk-card:hover { border-color: var(--muted); }
.fbk-card b { font: 600 13px/1.25 var(--display); }
.fbk-card .fbk-m { margin: 0; }
.fbk-ship { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; border-top: 1px solid var(--rule); cursor: pointer; }
.fbk-ship:first-child { border-top: 0; }
.fbk-ship:hover { background: var(--panel-2); }
.fbk-ship .d { font: 500 11px/1.3 var(--mono); color: var(--live); text-transform: uppercase; padding-top: 2px; }
.fbk-idea { display: grid; gap: 14px; }
.fbk-idea h1 { font-size: 24px; margin: 0; }
.fbk-idea .body { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-line; }
.fbk-author { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.fbk-author .pic { width: 26px; height: 26px; font-size: 11px; }
.fbk-author b { color: var(--ink); font-weight: 600; }
.fbk-big { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--rule); border-radius: 12px; }
.fbk-big .btn { min-width: 120px; }
.fbk-big span { font-size: 13px; color: var(--muted); } .fbk-big span b { color: var(--ink); }
.fbk-voters { display: flex; flex-wrap: wrap; gap: 6px; }
.fbk-voter { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 3px; border-radius: 999px; border: 1px solid var(--rule); font-size: 12px; background: var(--panel); white-space: nowrap; }
.fbk-voter .pic { width: 22px; height: 22px; font-size: 10px; }
.fbk-tl { display: grid; gap: 4px; }
.fbk-tl div { display: grid; gap: 5px; font-size: 11.5px; color: var(--faint); min-width: 0; }
.fbk-tl div::before { content: ""; height: 4px; border-radius: 99px; background: var(--rule); }
.fbk-tl div.done { color: var(--ink); } .fbk-tl div.done::before { background: var(--live); }
.fbk-tl div.now { color: var(--ink); } .fbk-tl div.now::before { background: var(--intro); }
.fbk-tl small { font: 400 10.5px/1.2 var(--mono); color: var(--faint); }
.fbk-tools { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--ground); border: 1px dashed color-mix(in srgb, var(--ink) 30%, var(--rule)); }
.fbk-tools > b { font: 600 12.5px/1 var(--display); }
.fbk-tools .chips .chip { height: 30px; }
.fbk-tools .acts, .fbk-reply .acts { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fbk-thread { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.fbk-cmt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px; border-top: 1px solid var(--rule); }
.fbk-cmt:first-child { border-top: 0; }
.fbk-cmt .pic { width: 30px; height: 30px; font-size: 12px; }
.fbk-cmt .who { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fbk-cmt .who b { color: var(--ink); font-weight: 600; }
.fbk-cmt p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.fbk-cmt.mk { background: color-mix(in srgb, var(--intro) 5%, var(--panel)); }
.fbk-mtag { font: 600 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 5px; border-radius: 4px; background: var(--intro); color: #fff; }
.fbk-reply { display: grid; gap: 8px; }
.fbk-reply textarea { width: 100%; min-height: 70px; resize: vertical; font: 14px/1.45 var(--body); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 11px; }
.fbk-report { align-self: flex-start; margin: 18px 0 6px; padding: 4px 0; border: 0; background: none; font: 400 13px/1.3 var(--body); color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; }
.fbk-report:hover { color: var(--ink); }
.signin.fbs .fbk-ctxbox { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); font: 400 12px/1.4 var(--mono); color: var(--muted); margin: 0 0 12px; overflow-wrap: anywhere; }
.signin.fbs .fbk-ctxbox b { color: var(--ink); font-weight: 500; }
.signin.fbs .fbk-shotin { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--rule); border-radius: 12px; font-size: 13px; color: var(--muted); margin: 0 0 12px; cursor: pointer; }
.signin.fbs .fbk-shotin input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.signin.fbs .fbk-shotin i { font-style: normal; color: var(--faint); }
.signin.fbs .err { color: var(--intro); font-size: 13px; margin: 0 0 10px; }
.signin.fbs .si-f select { width: 100%; }
.fbk-sim { display: grid; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; margin: -2px 0 12px; }
.fbk-sim > small { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 9px 11px 7px; background: var(--panel-2); }
.fbk-sim div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 11px; border-top: 1px solid var(--rule); font-size: 13px; }
.fbk-sim em { font-style: normal; font: 400 11px/1 var(--mono); color: var(--faint); margin-left: 6px; }
.fbk-toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 100001; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--panel); font-size: 13.5px; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.rail-i .rail-n.fb { font-style: normal; }
@media (max-width: 600px) { .fbk-road { grid-template-columns: 1fr; } .fbk-row { grid-template-columns: 42px minmax(0, 1fr); } .fbk-row .fbk-ra { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; } }

/* ---------- Rate MakerMap (18 Oct 2026): the 1-5 star ask, and the admins' Ratings tab ---------- */
.rate-card { position: fixed; z-index: 1003; right: 20px; bottom: 96px; width: 340px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 12px 40px rgba(27, 31, 36, .18); padding: 16px 16px 14px; display: grid; gap: 10px; animation: rate-in .32s var(--ease, ease-out); }
@keyframes rate-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .rate-card { animation: none; } }
.rate-card .rate-h { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.rate-card .rate-h b { font: 700 16px/1.25 var(--display); }
.rate-card .rate-h small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); font-weight: 400; font-family: var(--body); }
.rate-x { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--panel-2); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.rate-stars { display: flex; gap: 4px; }
.rate-stars button { border: 0; background: none; padding: 2px; cursor: pointer; line-height: 0; border-radius: 8px; }
.rate-stars button:hover svg, .rate-stars button:focus-visible svg { transform: scale(1.12); }
.rate-stars svg { transition: transform .12s; }
.rate-word { font: 600 13px/1 var(--body); color: var(--muted); min-height: 13px; }
.rate-card textarea { width: 100%; min-height: 76px; resize: vertical; font: 400 14px/1.45 var(--body); padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel-2); color: var(--ink); }
.rate-card textarea:focus { outline: none; border-color: var(--muted); }
.rate-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rate-acts .linkish { font-size: 13px; }
.rate-card .err { margin: 0; }
.rate-done { display: grid; gap: 4px; } .rate-done span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 760px) { .rate-card { left: 12px; right: 12px; width: auto; max-width: none; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
.rt-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); margin-bottom: 14px; }
.rt-avg b { display: block; font: 700 40px/1 var(--display); letter-spacing: -.02em; }
.rt-avg small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.rt-bars { display: grid; gap: 5px; }
.rt-bar { display: grid; grid-template-columns: 26px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font: 500 12px/1 var(--mono); color: var(--muted); }
.rt-bar i { display: block; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; } .rt-bar i em { display: block; height: 100%; background: #E0A21B; border-radius: 4px; }
.rt-bar span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rt-row { display: grid; gap: 4px; padding: 12px 16px; border-top: 1px solid var(--rule); } .rt-row:first-child { border-top: 0; }
.rt-row .rt-st { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); } .rt-row .rt-st span:first-child { line-height: 0; }
.rt-row p { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.rt-row .rt-ctx { font: 400 11.5px/1.4 var(--mono); color: var(--faint); overflow-wrap: anywhere; }
.rt-list { border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }

/* ---------- Ratings from makers' own sites (19 Oct 2026): the snippet and the ratings, on the product's Reviews tab ---------- */
.sr { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); margin-top: 12px; }
.sr-h b { display: block; font: 700 16px/1.25 var(--display); } .sr-h small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.45; max-width: 62ch; }
.sr-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.sr-prev { border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 24px rgba(27, 31, 36, .10); padding: 12px; display: grid; gap: 8px; font-size: 12px; }
.sr-prev b { font: 700 13px/1.2 var(--display); } .sr-prev .st { display: flex; gap: 3px; color: var(--ink); line-height: 0; }
.sr-prev .by { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--faint); border-top: 1px solid var(--panel-2); padding-top: 7px; } .sr-prev .by i { width: 7px; height: 7px; border-radius: 50%; background: var(--intro); }
.sr-code { margin: 0; font: 400 11.5px/1.6 var(--mono); background: var(--ink); color: #D9DCE0; border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.sr-code .k { color: #F3A283; } .sr-code .g { color: #9ED4A8; }
.sr-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.sr-acts .on { display: inline-flex; align-items: center; gap: 6px; color: var(--live); font-weight: 600; } .sr-acts .on i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.sr-res { display: grid; gap: 10px; } .sr-res h4 { margin: 4px 0 0; font: 700 15px/1.2 var(--display); }
@media (max-width: 760px) { .sr-row { grid-template-columns: 1fr; } .sr-prev { display: none; } }

/* ---------- Search (30 Sep 2026): one box, suggestions, /search's results on the map ---------- */
.talkmap { display: none !important; }
.tsearch { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 9px; width: min(520px, 42vw); height: 40px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--ground); }
.tsearch:focus-within { border-color: var(--ink); background: var(--panel); }
/* The search fields show the app's focus ring like every other control (MM-287), drawn on the field's pill. */
:is(.tsearch, .xsearch, .xs-top):has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tsearch svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.tsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 14.5px/1 var(--body); color: var(--ink); }
.xs { position: fixed; z-index: 1200; top: 64px; left: 50%; transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); max-height: min(72vh, 680px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--panel); box-shadow: 0 18px 50px rgba(27,31,36,.18); }
.xs[hidden] { display: none !important; }
.xs > * { flex-shrink: 0; }
.xs-top { display: none; }
.xs .xchips { margin: 0; padding: 0 0 2px; max-width: none !important; }
.xs .xchip { height: 32px; box-shadow: none; }
.sx-list { display: grid; }
.sx-sub { margin: 10px 4px 2px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sx-it { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 8px 6px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.sx-it:hover, .sx-it:focus-visible { background: var(--panel-2); outline: none; }
.sx-it > .pic { width: 36px; height: 36px; }
.sx-it > span:last-child { min-width: 0; }
.sx-it b { display: block; font: 500 14.5px/1.3 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-it b i { font-style: normal; font: 500 12px var(--mono); color: var(--intro); }
.sx-it small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--muted); }
.sx-ic svg { width: 17px; height: 17px; }
.sx-it.ask .sx-ic { background: color-mix(in srgb, var(--intro) 12%, var(--panel)); color: var(--intro); }
.sx-wait { margin: 4px 6px 0; }
/* Results */
.sx-res { gap: 14px; }
.sx-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sx-h h2 { font: 700 20px/1.25 var(--display); margin: 0 0 3px; }
.sx-acts { display: flex; gap: 6px; flex: none; }
.sx-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 0; border-top: 1px solid var(--rule); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.sx-row:first-child { border-top: 0; }
.sx-row:hover { background: var(--panel-2); }
.sx-row > .pic { width: 40px; height: 40px; }
.sx-rt { min-width: 0; display: grid; gap: 1px; }
.sx-rt b { font: 600 14px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-rt b i { font-style: normal; font: 500 12px var(--mono); color: var(--intro); }
.sx-rt small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-rt .sx-why { color: var(--ink); }
.sx-pct { font: 600 13px/1 var(--mono); padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--live) 12%, var(--panel)); color: color-mix(in srgb, var(--live) 75%, var(--ink)); }
.xchip .n { font: 500 12px var(--mono); opacity: .7; }
.xchip .xchip-x { font-size: 12px; opacity: .7; margin-left: 1px; }
@media (max-width: 900px) {
  .xs { inset: 0; top: 0; left: 0; transform: none; width: auto; max-height: none; height: 100%; border: 0; border-radius: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 20px; box-shadow: none; }
  .xs-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) 36px; align-items: center; gap: 4px; height: 50px; padding: 0 6px 0 2px; border-radius: 999px; background: var(--panel); box-shadow: 0 2px 10px rgba(27,31,36,.18); }
  .xs-top input { min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 16px/1 var(--body); color: var(--ink); }
  .xs-back, .xs-clear { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; }
  body.sx-open .tabbar { display: none; }
  /* The box and the filters stay put; the results scroll under them, in what's on screen above the keyboard (sxFit).
     The panel's colour runs on under the keyboard, so the map never shows through it (iPhone's keyboard is see-through). */
  .xs { overflow: hidden; box-shadow: 0 0 0 100vmax var(--panel); }
  .xs > .xs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- A maker, opened like a place (30 Sep 2026) ---------- */
.otm { font-size: 13.5px; color: var(--muted); margin-top: -2px; }
.otm b { color: var(--live); font-weight: 600; }
.pphotos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 2px 0; }
.pphotos::-webkit-scrollbar { display: none; }
.pphoto { flex: none; width: 200px; display: grid; gap: 6px; text-decoration: none; color: var(--ink); }
.pphoto > img { width: 200px; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 12px; border: 1px solid var(--rule); background: var(--panel-2); }
.pphoto span { display: flex; align-items: center; gap: 6px; font: 500 12.5px/1.2 var(--body); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pphoto span img { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.whymeet { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--live) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--live) 25%, var(--rule)); }
.whymeet b { font: 600 14px/1.2 var(--display); }
.whychips { display: flex; flex-wrap: wrap; gap: 6px; }
.whychips .rbtn.hot { border-color: color-mix(in srgb, var(--intro) 45%, var(--rule)); color: var(--intro); }
.whymeet.out { grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: var(--panel-2); border-color: var(--rule); }
.whymeet.out small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.inviteban { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--intro) 30%, var(--rule)); background: color-mix(in srgb, var(--intro) 6%, var(--panel)); }
.inviteban b { display: block; font: 600 15px/1.25 var(--display); }
.inviteban span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
/* A boat on a phone: a sheet from the bottom, like a maker or a meetup. */
.signin.bt-sheet .bt-card { width: auto; max-width: none; padding: 6px 0 0; font-size: 14px; }

/* ---------- Product reviews (30 Sep 2026) ---------- */
.rvr { display: inline-flex; align-items: center; gap: 3px; font: 600 12.5px/1 var(--body); color: #B7791F; white-space: nowrap; }
.rvr small { font-weight: 400; color: var(--muted); }
.rvr.few { color: var(--muted); font-weight: 500; }
.pact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rvst { color: #E0A21B; letter-spacing: 1px; font-size: 13px; } .rvst i { font-style: normal; color: var(--rule); }
.signin.rvsheet .si-sheet { width: min(520px, 100%); }
.rv-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding-right: 30px; }
.rv-head .pic { width: 44px; height: 44px; border-radius: 10px; }
.rv-head h3 { margin: 0; font: 700 20px/1.2 var(--display); }
.rv-head small { color: var(--muted); font-size: 13px; }
.rv-sum { margin: 12px 0; font-size: 13.5px; color: var(--muted); } .rv-sum b { color: var(--ink); }
.rv-form { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel-2); }
.rv-lbl { font: 600 13px/1.2 var(--display); }
.rv-stars { display: flex; gap: 2px; }
.rv-stars button { width: 40px; height: 40px; border: 0; background: none; font-size: 30px; line-height: 1; color: var(--rule); cursor: pointer; padding: 0; }
.rv-stars button.on { color: #E0A21B; }
.rv-uses { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-form textarea { width: 100%; font: 14px/1.45 var(--body); color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; resize: vertical; }
.rv-count { font: 400 12px var(--mono); color: var(--muted); margin-top: -4px; } .rv-count.ok { color: var(--live); }
.rv-form .si-go[aria-disabled="true"] { opacity: .5; }
.rv-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); font-size: 13.5px; color: var(--muted); }
.rv-done { display: grid; gap: 8px; justify-items: start; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--live) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--live) 30%, var(--rule)); }
.rv-done span { font-size: 13.5px; color: var(--muted); }
.rv-list { display: grid; margin-top: 14px; }
.rv-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.rv-row .pic { width: 34px; height: 34px; }
.rv-row b { font: 600 14px/1.2 var(--display); }
.rv-row small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.rv-row p { margin: 6px 0 0; line-height: 1.45; }

/* ---------- Review reports (1 Oct 2026) ---------- */
.rv-acts { display: flex; gap: 12px; margin-top: 6px; }
.rv-acts .linkish { font-size: 12px; color: var(--muted); }
.rv-acts .rv-sent { font-size: 12px; color: var(--muted); }
.rv-repf { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel-2); }
.rv-repf .rv-lbl { font-size: 12.5px; }
.rv-repf textarea { width: 100%; font: 13.5px/1.4 var(--body); color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 10px; resize: vertical; }
.rv-repf .row-b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.rv-repf .row-b .si-fine { flex: 0 0 auto; margin: 0; text-align: left; }

/*--makermap-style-block--*/

/* One look, light and quiet: white cards on a warm-grey ground, orange only for the action. */
:root {
  --ground: #F6F6F4; --panel: #FFFFFF; --panel-2: #F1F1EE; --ink: #1B1F24; --muted: #5F6670; --faint: #8B929A; --rule: #E6E6E2;
  --ocean: #E9EEF0; --intro: #E4562A; --comment: #2A8C9C; --gold: #D9A21B; --live: #22A06B; --focus: #1B1F24;
  --shadow: 0 1px 2px rgba(27,31,36,.05), 0 8px 24px rgba(27,31,36,.08);
  /* "Twemoji Country Flags" draws flags on Windows only (lib/flagfont.mjs). */
  --display: "Twemoji Country Flags", "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif; --body: "Twemoji Country Flags", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Twemoji Country Flags", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
}
html, body { height: 100%; }
/* No double-tap zoom anywhere (tapping + twice quickly zoomed the whole page on iPhones). Scrolling and pinch-zoom still work. */
html { touch-action: manipulation; }
body { background: var(--ground); color: var(--ink); font: 400 14px/1.45 var(--body); overflow: hidden; }
* { box-sizing: border-box; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
/* Names on cards and the left nav are links for search engines and Cmd-click; they look like the text around them. */
a[data-spa] { text-decoration: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--intro) 30%, transparent); }

/* ---------- the split: list on the left, map on the right ---------- */
.app { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); height: 100%; } /* minmax: the column is the window, never wider: at ~1,000 px the top bar pushed the page 17 px past it */
.split { display: grid; grid-template-columns: minmax(440px, 46%) 1fr; min-height: 0; }
.col { overflow-y: auto; min-height: 0; --colpad: 22px; padding: var(--colpad) 26px 40px; display: flex; flex-direction: column; gap: 18px; overscroll-behavior: contain; background: var(--panel); }
.rows { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--panel); }
.rows .row { border-radius: 0; }
.col::-webkit-scrollbar { width: 8px; } .col::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px; }
.mapcol { position: relative; min-height: 0; min-width: 0; border-left: 1px solid var(--rule); } /* min-width 0: the map column shrinks to its track instead of its content */
#map { position: absolute; inset: 0; background: #FFFFFF; z-index: 0; } /* Safari on iOS 26+ paints the strip behind the clock in this colour: white, like the bars of other sites */ /* own stacking context: no pin's z-index can climb over the map buttons */
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font: 400 13px/1 var(--mono); pointer-events: none; z-index: 2; }

/* Until people.json lands: a grey skeleton of the list, and a quiet pulse on the map instead of bare text. */
.skel { display: flex; flex-direction: column; gap: 14px; }
.skel i { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--panel-2) 0 40%, #F8F8F6 50%, var(--panel-2) 60% 100%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
.skel .sh { width: 62%; height: 24px; } .skel .sl { width: 84%; height: 12px; margin-top: -4px; }
.skel .sr { display: grid; grid-template-columns: 44px 1fr; gap: 6px 12px; align-items: center; padding: 6px 0; }
.skel .sr i:first-child { width: 44px; height: 44px; border-radius: 50%; grid-row: span 2; }
.skel .sr i:nth-child(2) { width: 55%; height: 13px; align-self: end; } .skel .sr i:nth-child(3) { width: 80%; height: 11px; align-self: start; }
.skel .sr:nth-child(odd) i:nth-child(2) { width: 42%; } .skel .sr:nth-child(3n) i:nth-child(3) { width: 66%; }
.loading::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--intro); margin: 0 auto 12px; animation: pulse 1.6s infinite; }
.loading { align-content: center; padding: 0 24px; text-align: center; line-height: 1.5; } .loading.err::before { display: none; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.glass { background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid color-mix(in srgb, var(--rule) 80%, transparent); box-shadow: var(--shadow); }

/* Top bar: brand, a centred pill of views, live count and the one action. */
.topbar { height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--rule); background: var(--panel); z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 700 17px/1 var(--display); letter-spacing: -.02em; text-decoration: none; justify-self: center; grid-column: 2; grid-row: 1; }
.brand .pin { width: 10px; height: 10px; border-radius: 50%; background: var(--intro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--intro) 25%, transparent); }
.top-right { display: flex; align-items: center; gap: 8px; justify-self: end; }
.live { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 10px; height: 34px; border: 1px solid var(--rule); border-radius: 999px; font: 400 12px/1 var(--mono); color: var(--muted); text-decoration: none; background: var(--ground); white-space: nowrap; }
.live:hover { border-color: var(--muted); }
/* Pulses a few times when the numbers refresh, then rests: an endless pulse made Chrome redraw every pin on the map 60 times a second. */
.live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 2.2s ease-out 3; }
.live b { color: var(--ink); font-weight: 500; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--rule); background: var(--ground); color: var(--ink); cursor: pointer; font-weight: 500; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: transform .15s var(--ease), border-color .15s, filter .15s; }
.btn:hover { border-color: var(--muted); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--intro); border-color: var(--intro); color: #fff; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--panel); border-radius: 999px; height: 36px; }
.btn.x { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.lg { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 12px; }

/* The list head: what this is, and the two things a maker can do. */
.head { display: flex; flex-direction: column; gap: 10px; }
.head h1 { font-size: 26px; }
.head .lead { font-size: 13.5px; max-width: 52ch; }
.head .actions { margin-top: 4px; }
/* The invite page (makermap.lol/handle/invite) */
.inv { gap: 14px; }
.inv-by { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: color-mix(in srgb, var(--intro) 12%, var(--panel)); color: color-mix(in srgb, var(--intro) 80%, var(--ink)); font-size: 13px; font-weight: 500; }
.inv-by .pic { width: 26px; height: 26px; font-size: 11px; }
.inv h1 { font-size: 30px; }
.inv-who { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; padding: 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); cursor: pointer; font: inherit; color: inherit; }
.inv-who:hover { border-color: var(--muted); }
.inv-who .pic { width: 48px; height: 48px; }
.inv-who b { display: flex; align-items: center; gap: 4px; font: 600 15px/1.2 var(--display); }
.inv-who small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.inv-who q { display: block; font-size: 13px; margin-top: 4px; color: var(--ink); }
.inv-form { display: flex; flex-direction: column; gap: 6px; }
.inv-form label { font: 600 13px/1.2 var(--display); }
.inv-form .hint { font-size: 12.5px; color: var(--muted); }
.morepts.wc { margin: 2px 0 0; }
.wc-line { align-self: flex-start; font-size: 13px; }
details.jmore > summary { list-style: none; cursor: pointer; }
details.jmore > summary::-webkit-details-marker { display: none; }
details.jmore > summary i { font-style: normal; font-weight: 400; color: var(--muted); }
details.jmore[open] > summary { margin-bottom: 4px; }
.su-thanks { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); font-size: 13px; color: var(--muted); }
.su-thanks .pic { width: 30px; height: 30px; flex: none; }
.su-thanks b { color: var(--live); }
.joinbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--intro) 60%, var(--rule)); border-radius: 12px; background: color-mix(in srgb, var(--intro) 4%, var(--panel)); font-size: 13px; }
.joinbar b { font-family: var(--display); }
.pchips button.chip { font: inherit; background: none; cursor: pointer; }
.me-head .metabs { margin-top: 6px; }
.me-head #mepanel { margin-top: 12px; }
.profile .manage.ghost { background: var(--panel); color: var(--ink); border-color: var(--rule); }
.profile .manage.ghost:hover { border-color: var(--muted); background: var(--panel); }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.invcard { border: 1.5px solid var(--intro); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: color-mix(in srgb, var(--intro) 3%, var(--panel)); }
.ic-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ic-top b { display: block; font: 700 17px/1.2 var(--display); }
.ic-top span { font-size: 13px; color: var(--muted); }
.ic-tot { text-align: right; flex: none; }
.ic-tot strong { display: block; font: 700 22px/1 var(--display); color: var(--live); font-variant-numeric: tabular-nums; }
.ic-tot small { font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.ic-link { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ic-link code { flex: 1 1 200px; min-width: 0; font: 500 13px/1.3 var(--mono); padding: 9px 11px; border-radius: 9px; background: var(--panel); border: 1px solid var(--rule); overflow-wrap: anywhere; }
.ic-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.ic-card img { width: 132px; height: auto; aspect-ratio: 1200 / 630; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel-2); }
.ic-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.ic-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ic-row:last-child { border-bottom: 0; }
.ic-row .pic { width: 28px; height: 28px; }
.ic-row b { font-weight: 600; font-size: 13.5px; }
.ic-row small { display: block; font-size: 12px; color: var(--faint); }
.ic-row em { font: 500 13px var(--mono); font-style: normal; color: var(--live); }
/* Logged in: your photo in the top bar, and its menu */
.umenu-wrap { position: fixed; inset: 0; z-index: 1002; }
.umenu-back { position: absolute; inset: 0; }
.umenu { position: absolute; top: 56px; right: 16px; width: 260px; background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: umIn .14s var(--ease); }
@keyframes umIn { from { opacity: 0; transform: translateY(-4px); } }
.um-grab { display: none; }
.um-who { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.um-who .pic { width: 36px; height: 36px; }
.um-who b { display: block; font: 700 14px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-who small { font: 400 11.5px var(--mono); color: var(--muted); }
.umenu [role=menuitem] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 9px; border: 0; background: none; font: 500 14px/1.25 var(--body); color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.umenu [role=menuitem]:hover, .umenu [role=menuitem]:focus-visible { background: var(--panel-2); outline: none; }
.umenu [role=menuitem] small { display: block; font-size: 11.5px; font-weight: 400; color: var(--faint); }
.umenu [role=menuitem] em { font: 500 12px var(--mono); font-style: normal; color: var(--live); }
.umenu hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 0; }
@media (max-width: 600px) {
  .umenu-back { background: rgba(27, 31, 36, .35); }
  .umenu { top: auto; left: 0; right: 0; bottom: 0; width: auto; border-radius: 20px 20px 0 0; padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px)); animation: umUp .2s var(--ease); }
  @keyframes umUp { from { transform: translateY(100%); } }
  .um-grab { display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--rule); align-self: center; margin-bottom: 6px; }
  .umenu [role=menuitem] { padding: 13px 10px; font-size: 15px; }
}
.inrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.intro-delta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); font-size: 12.5px; color: var(--muted); }
.intro-delta b { font: 600 18px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 5px; }
.intro-delta b.up { color: var(--live); }
.intro-delta i { font-style: normal; color: var(--faint); font-family: var(--mono); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); }
.setrow b { display: block; font: 600 13.5px/1.3 var(--display); }
.setrow small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tgl { position: relative; width: 42px; height: 24px; flex: none; }
.tgl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.tgl i { position: absolute; inset: 0; border-radius: 999px; background: #D5D5CF; transition: background .15s; pointer-events: none; }
.tgl i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.tgl input:checked + i { background: var(--live); }
.tgl input:checked + i::after { transform: translateX(18px); }
.tgl input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.tgl input:disabled + i { opacity: .5; }
.inv-steps { margin: 4px 0 0; padding: 12px 0 0 20px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.socials { display: flex; flex-wrap: wrap; gap: 6px; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--muted); line-height: 1.45; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--intro); flex: none; }
.sgs { display: flex; flex-direction: column; gap: 6px; }
.sg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--intro) 45%, var(--rule)); border-radius: 10px; background: var(--panel); font-size: 13px; }
.sg .grow { flex: 1 1 150px; color: var(--muted); min-width: 0; }
.sg b { font: 500 12.5px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.socgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 10px; }
.meprod { border: 1px solid var(--rule); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--panel); }
.meprod .mp-top { display: flex; align-items: center; gap: 8px; font: 400 12.5px/1 var(--mono); }
.meprod .mp-top img { width: 18px; height: 18px; border-radius: 5px; }
.meprod .mp-top a { color: var(--ink); text-decoration: none; }
.meprod .mp-act { margin-left: auto; display: flex; gap: 10px; }
.grid2.wide { grid-template-columns: 1fr 2fr; }
.grid2.half { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .grid2.wide, .grid2.half { grid-template-columns: 1fr; } }
.mp-add { display: flex; gap: 8px; } .mp-add input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--rule); border-radius: 9px; padding: 0 11px; background: var(--panel); }
.builtby { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 12px; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s; }
.builtby img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.builtby b { color: var(--ink); font-weight: 600; }
.builtby:hover { border-color: var(--muted); color: var(--ink); }
.row .act { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--rule); background: var(--panel); font-size: 12px; color: var(--muted); white-space: nowrap; transition: border-color .15s, color .15s; }
.row:hover .act { border-color: var(--intro); color: var(--intro); }
.row .prod { font: 500 11px/1 var(--mono); color: var(--gold); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.row .rcta { grid-column: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; min-width: 0; }
.row > .rk, .row > .pic, .row > .pic-wrap, .row > .right { grid-row: span 2; align-self: center; }
.rbtn { display: inline-flex; align-items: center; gap: 5px; height: 26px; max-width: 100%; padding: 0 9px; border-radius: 7px; border: 1px solid var(--rule); background: var(--panel); font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .15s, background .15s, color .15s; }
.rbtn .pl { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rbtn svg { width: 12px; height: 12px; flex: none; color: var(--faint); }
.step.locked { opacity: .55; }
.step.locked .btn { pointer-events: none; }
@media (max-width: 899px) { .step.last { margin-bottom: 72px; } }
.rbtn.loc { min-width: 0; flex: 0 1 auto; }
.rbtn.loc.plain { cursor: default; }
.rbtn.plain.style { cursor: default; color: var(--muted); }
.wstyle { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.wstyle .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.wb { font: 500 12px/1 var(--body); padding: 6px 9px; border-radius: 999px; border: 1px dashed var(--rule); background: var(--panel); color: var(--ink); }
.wb.said { border-style: solid; border-color: color-mix(in srgb, var(--live) 45%, var(--rule)); background: color-mix(in srgb, var(--live) 10%, var(--panel)); }
.wb.said::before { content: "✓ "; color: var(--live); font-weight: 700; }
.signin { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; }
.signin .si-back { position: absolute; inset: 0; background: rgba(20, 18, 16, .45); animation: si-fade .2s ease both; }
.signin .si-sheet { position: relative; width: min(440px, 100%); max-height: calc(100% - 32px); overflow: auto; background: var(--panel); color: var(--ink); border-radius: 20px; padding: 24px 22px 18px; box-shadow: 0 30px 80px rgba(0,0,0,.3); animation: si-up .28s var(--ease) both; }
.signin .si-x { position: absolute; top: 4px; right: 4px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.signin .si-x:hover, .signin .si-x:active { background: var(--panel-2); color: var(--ink); }
/* Every close ×. The "×" character sits off-centre in its circle, and a grid button gives the hidden text a row of its
   own under the icon (the meetup page's ✕ sat 4.5px high that way). So these buttons hide their text, centre with flex
   (hidden text is 0×0 there) and draw the profile sheet's ✕, the same path, from --x-icon. --xs is the icon box. */
:root { --x-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
:is(.signin .si-x:not(.rv-x), .mt-sheet .mt-x[data-mt-close], .rcard .rc-x, .clkpop .cp-x, .savebar .sb-x, .meetcard .x, .xs-top .xs-clear, .mt-chip button, .mt-person button) { font-size: 0 !important; line-height: 0; align-items: center; justify-content: center; padding: 0; }
:is(.signin .si-x:not(.rv-x), .mt-sheet .mt-x[data-mt-close], .rcard .rc-x, .savebar .sb-x, .meetcard .x, .xs-top .xs-clear) { display: flex; }
:is(.signin .si-x:not(.rv-x), .mt-sheet .mt-x[data-mt-close], .rcard .rc-x, .clkpop .cp-x, .savebar .sb-x, .meetcard .x, .xs-top .xs-clear, .mt-chip button, .mt-person button)::before { content: ""; flex: none; width: var(--xs, 18px); height: var(--xs, 18px); background: currentColor; -webkit-mask: var(--x-icon) center / contain no-repeat; mask: var(--x-icon) center / contain no-repeat; }
.signin .si-x:not(.rv-x), .mt-sheet .mt-x[data-mt-close] { --xs: 20px; }
.meetcard .x { width: 28px; height: 28px; top: 4px; right: 4px; }
.clkpop .cp-x, .savebar .sb-x, .meetcard .x, .xs-top .xs-clear { --xs: 16px; }
.mt-chip button, .mt-person button { --xs: 14px; display: inline-flex; width: 16px; height: 16px; }
.signin .si-why { font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--intro); padding-right: 28px; }
.signin h3 { font: 700 24px/1.1 var(--display); margin: 8px 0 4px; }
.signin .si-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }
.signin li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 13.5px; line-height: 1.35; }
.signin li i { font-style: normal; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; background: color-mix(in srgb, var(--intro) 14%, var(--panel)); color: var(--intro); }
.signin li b { display: block; font-weight: 600; }
.signin li span { color: var(--muted); }
.signin .si-go { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 12px; background: var(--ink); color: var(--panel); font-weight: 600; font-size: 15px; text-decoration: none; width: 100%; border: 0; font-family: inherit; cursor: pointer; }
.signin .si-go:focus-visible { outline: 3px solid var(--intro); outline-offset: 2px; }
.signin .si-fine { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }
.signin .si-f { display: grid; gap: 4px; margin: 0 0 10px; }
.signin .si-f label { font-size: 12px; color: var(--muted); }
.signin .si-f select { width: 100%; font: 14px/1.4 var(--body); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 11px; }
.signin .si-f select:focus { outline: 2px solid color-mix(in srgb, var(--intro) 60%, transparent); outline-offset: 0; border-color: var(--intro); }
.signin .si-f input, .signin .si-f textarea { width: 100%; font: 14px/1.4 var(--body); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 11px; }
.signin .si-f textarea { resize: vertical; min-height: 110px; font-size: 13.5px; }
.signin .si-chip:focus-visible { outline: 2px solid var(--intro); outline-offset: 2px; }
.signin .si-f input:focus, .signin .si-f textarea:focus { outline: 2px solid color-mix(in srgb, var(--intro) 60%, transparent); outline-offset: 0; border-color: var(--intro); }
.signin .si-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.signin .si-chip { font: 500 12px/1 var(--body); padding: 7px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
.signin .si-chip[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.signin .si-found { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 12px; border-radius: 12px; background: var(--panel-2); font-size: 13px; margin: 0 0 12px; }
.signin .si-found.ok { grid-template-columns: 1fr; background: color-mix(in srgb, var(--live) 14%, var(--panel)); }
.signin .si-found.ok b { color: var(--live); }
.signin .si-found > span:only-child { grid-column: 1 / -1; }
.signin .si-found.slow { background: color-mix(in srgb, #d99a1e 16%, var(--panel)); }
.signin .si-found.slow b { color: color-mix(in srgb, #b7791f 85%, var(--ink)); }
.signin .si-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--rule); border-top-color: var(--intro); animation: si-spin 1s linear infinite; }
@keyframes si-spin { to { transform: rotate(360deg); } }
.signin .si-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.signin .si-go + .si-fine { text-align: left; }
.signin .si-fine .linkish { font-size: 11.5px; }
@media (prefers-reduced-motion: reduce) { .signin .si-spin { animation: none; } }
/* The new sign-up (JOIN_V2): one login-first funnel for every door, drawn in the same sheet. */
.signin .jn-checks { display: grid; gap: 8px; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.signin .jn-strip { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); font-size: 13.5px; line-height: 1.35; }
.signin .jn-strip .pic, .signin .jn-strip img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--gold); }
.signin .jn-lab { display: grid; gap: 6px; margin: 12px 0 0; }
.signin .jn-lab > span:first-child, .signin .jn-q { font: 600 13px/1.2 var(--display); }
.signin .jn-lab input, .signin .jn-in { width: 100%; font: 400 15px/1.2 var(--body); padding: 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
.signin .jn-lab input:focus, .signin .jn-in:focus { outline: 2px solid color-mix(in srgb, var(--intro) 60%, transparent); outline-offset: 0; border-color: var(--intro); }
.signin .jn-note { color: var(--muted); font-size: 12px; line-height: 1.4; }
.signin .jn-card { border: 1px solid var(--rule); border-radius: 14px; padding: 14px; display: grid; gap: 10px; background: var(--panel); }
.signin .jn-who { display: flex; gap: 12px; align-items: center; }
.signin .jn-who > .pic, .signin .jn-who > img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--gold); }
.signin .jn-who > span { min-width: 0; flex: 1; }
.signin .jn-who b { display: block; font: 700 17px/1.2 var(--display); }
.signin .jn-who small { color: var(--muted); font-size: 12.5px; }
.signin .jn-who .linkish { align-self: flex-start; font-size: 12.5px; white-space: nowrap; }
.signin .jn-line { font-size: 13.5px; line-height: 1.45; }
.signin .jn-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* The ✕ (every step before "Put me on the map") sits where a progress bar's end would be: the bar stops short of it. */
.signin.jn .si-x ~ .su-prog { padding-right: 44px; }
.signin .jn-cnt { float: right; font: 400 11px/1.6 var(--mono); color: var(--muted); }
.signin .jn-cnt.over { color: #C43F2A; }
.signin .jn-val { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 46px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--panel); font-size: 14px; }
.signin .jn-val > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signin .jn-val img { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.signin .jn-val .linkish { margin-left: auto; flex: none; font-size: 13px; }
.signin .jn-val .linkish.go { color: var(--intro); }
.signin .jn-list { display: grid; gap: 4px; margin-top: 6px; }
.signin .jn-list button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); font: 14px/1.3 var(--body); color: var(--ink); cursor: pointer; }
.signin .jn-list small { color: var(--muted); }
.signin .jn-more { margin-top: 18px; padding: 14px; border-radius: 14px; background: var(--panel-2); }
.signin .jn-more > b { display: block; font: 600 13.5px/1.2 var(--display); }
.signin .jn-cap { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.signin .jn-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.signin .jn-sel label { display: grid; gap: 0; min-width: 0; }
.signin .jn-sel .jn-cap { margin-top: 12px; }
.signin .jn-sel select { width: 100%; font: 13.5px/1.2 var(--body); padding: 10px 11px; border-radius: 10px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
.signin .jn-more .si-chip { background: var(--panel); }
.signin .jn-more .si-chip[aria-pressed="true"] { background: var(--ink); }
.signin .jn-bar { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom, 0px)); margin: 18px -22px calc(-18px - env(safe-area-inset-bottom, 0px)); padding: 12px 22px calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, color-mix(in srgb, var(--panel) 0%, transparent), var(--panel) 18px); z-index: 2; }
.jn-maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.jn-map { display: grid; gap: 8px; text-align: center; min-width: 0; }
.jn-bar .jn-hint { margin: 0 0 10px; text-align: center; font-size: 13px; color: var(--muted); }
.jn-map > span:first-child { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); background: #e8e8e6 center / cover no-repeat; }
.jn-map.here > span:first-child { border: 2px solid var(--live); }
.jn-map.next > span:first-child { border: 2px dashed var(--intro); }
.jn-map.far > span:first-child { opacity: .55; }
.jn-map .su-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #555; }
.jn-map .su-pin.t0 { width: 44px; height: 44px; } .jn-map .su-pin.t1 { width: 46px; height: 46px; } .jn-map .su-pin.t2 { width: 56px; height: 56px; }
.jn-map.ahead .su-pin { filter: grayscale(1); opacity: .8; }
.jn-map > span:last-child { display: grid; gap: 2px; }
.jn-map b { font: 600 13px/1.2 var(--display); }
.jn-map small { font-size: 11.5px; color: var(--muted); }
.jn-map.here small { color: var(--live); font-weight: 600; }
.jn-map.next small { color: var(--intro); font-weight: 600; }
.jn-pts { display: grid; gap: 8px; margin: 16px 0 4px; font-size: 13px; }
.jn-pts .m { color: var(--muted); }
.jn-track { height: 6px; border-radius: 99px; background: var(--rule); overflow: hidden; display: flex; }
.jn-track i { height: 100%; background: var(--intro); border-radius: 99px; }
.jn-track i.ghost { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--intro) 45%, transparent) 0 4px, color-mix(in srgb, var(--intro) 18%, transparent) 4px 8px); }
.signin .jn-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; text-align: center; padding: 16px; border-radius: 14px; background: var(--panel-2); }
.signin .jn-vs > span { display: grid; justify-items: center; gap: 6px; }
.signin .jn-vs .pic { width: 48px; height: 48px; }
.signin .jn-howto { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.signin .jn-howto li { display: list-item; }
.signin .jn-confetti { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; overflow: hidden; z-index: 3; }
.signin .jn-confetti i { position: absolute; top: -12px; animation: jn-fall 1.6s cubic-bezier(.25, .6, .4, 1) forwards; opacity: .95; }
@keyframes jn-fall { to { transform: translateY(420px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .signin .jn-confetti { display: none; } }
/* /me · Profile with the new sign-up: spot on the map, the Next card, strength, ways to grow, plans. */
.growcards { display: grid; gap: 14px; margin: 4px 0 22px; }
.gc { border: 1px solid var(--rule); border-radius: 16px; padding: 14px 16px; background: var(--panel); display: grid; gap: 12px; }
.gc-h { font: 600 15px/1.2 var(--display); }
.gc-spot .jn-maps { margin-top: 0; }
.gc-spot .jn-pts { margin: 0; }
.gc-next { background: var(--ink); color: var(--panel); border-color: var(--ink); padding: 18px; }
.gc-eb { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--intro) 80%, #fff); }
.gc-t { font: 700 20px/1.2 var(--display); }
.gc-s { font-size: 13.5px; line-height: 1.45; color: color-mix(in srgb, var(--panel) 75%, transparent); }
.gc-next > .btn, .gc-acts .btn { justify-self: start; }
.gc-next .btn:not(.primary) { background: transparent; color: var(--panel); border-color: color-mix(in srgb, var(--panel) 35%, transparent); }
.gc-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.gc-faces { display: flex; align-items: center; gap: 0; }
.gc-faces .pic { width: 30px; height: 30px; border: 2px solid var(--ink); margin-left: -8px; }
.gc-faces .pic:first-child { margin-left: 0; }
.gc-faces > span { margin-left: 10px; font-size: 13px; opacity: .75; }
.gc-badge, .gd-badge { display: block; padding: 10px; border-radius: 12px; background: var(--panel); }
.gc-badge img, .gd-badge img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.gc-code { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 10px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 10%, transparent); }
.gc-code code { flex: 1; min-width: 0; font: 400 11.5px/1.35 var(--mono); color: color-mix(in srgb, var(--panel) 85%, transparent); word-break: break-all; }
.gc-code.light { background: var(--panel-2); } .gc-code.light code { color: var(--ink); }
.gc-msg { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--panel) 80%, transparent); }
.gc-str { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.gc-str small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.gc-ring { position: relative; width: 52px; height: 52px; } .gc-ring svg { transform: rotate(-90deg); }
.gc-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px/1 var(--display); }
.gc-grow { gap: 0; padding-top: 12px; padding-bottom: 12px; }
.gc-grow .gc-h { padding-bottom: 6px; }
.gc-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--rule); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.gc-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--intro) 12%, var(--panel)); color: var(--intro); object-fit: cover; }
.gc-rt { min-width: 0; } .gc-rt b { display: block; font: 600 14.5px/1.3 var(--display); } .gc-rt small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.gc-rp { display: grid; justify-items: end; gap: 4px; text-align: right; } .gc-rp b { font: 600 13px/1 var(--display); white-space: nowrap; } .gc-rp em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--intro); white-space: nowrap; }
.gc-row.done .gc-rt b { font-weight: 500; color: var(--muted); } .gc-row.done .gc-rp b { color: var(--live); }
.gc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0 0; border-top: 1px solid var(--rule); }
.gc-foot .linkish { font-size: 13.5px; font-weight: 600; }
.gc-foot span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.gc-foot i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--live); color: #fff; font: 700 10px/1 var(--mono); font-style: normal; }
.signin .gd-hows { display: grid; gap: 10px; margin-bottom: 14px; }
.signin .gd-how { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.4; }
.signin .gd-how > span:first-child { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); font: 600 11px/1 var(--mono); color: var(--muted); }
.signin .gd-badge { margin-bottom: 14px; background: var(--panel-2); }
.signin .gd-sites { margin-top: 14px; }
.signin .gd-bot { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--rule); border-radius: 14px; }
.signin .gd-bot img { width: 52px; height: 52px; border-radius: 50%; }
.signin .gd-bot b { display: block; font: 600 15px/1.2 var(--display); } .signin .gd-bot small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.signin .gd-ok { color: var(--live); font-size: 13px; }
@keyframes si-fade { from { opacity: 0; } }
@keyframes si-up { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 560px) { .signin { place-items: end center; padding: 0; } .signin .si-sheet { width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 92%; animation-name: si-up; } }
@media (prefers-reduced-motion: reduce) { .signin .si-back, .signin .si-sheet { animation: none; } }
/* Find your match: pick what kind of match first. Reuses the sign-in sheet (centred, bottom sheet on phones). */
.signin.fym .si-sheet { width: min(540px, 100%); display: flex; flex-direction: column; gap: 16px; }
.fym-h { display: flex; align-items: flex-start; gap: 12px; padding-right: 36px; }
.fym-h .pic { width: 44px; height: 44px; flex: none; }
.fym-h h2 { margin: 0; font: 600 22px/1.2 var(--display); }
.fym-h p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.fym-list { display: flex; flex-direction: column; gap: 8px; }
.fym-opt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 56px; text-align: left; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; touch-action: manipulation; }
.fym-opt:hover:not(:disabled) { border-color: var(--intro); background: color-mix(in srgb, var(--intro) 5%, var(--panel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--intro) 14%, transparent); outline: none; }
.fym-opt:focus-visible { outline: 2px solid var(--intro); outline-offset: 2px; }
.fym-opt:disabled { cursor: default; background: var(--ground); }
.fym-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--panel-2); display: grid; place-items: center; color: var(--ink); transition: background .15s, color .15s; }
.fym-opt:hover:not(:disabled) .fym-ic { background: var(--intro); color: #fff; }
.fym-opt:disabled .fym-ic { color: var(--faint); }
.fym-ic svg { width: 20px; height: 20px; }
.fym-t { display: block; font: 600 15px/1.3 var(--display); }
.fym-opt:disabled .fym-t { color: var(--muted); }
.fym-s { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.fym-pill { font: 500 11px/1 var(--mono); padding: 5px 7px; border-radius: 7px; border: 1px solid var(--rule); background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.fym-pill.hot { border-color: color-mix(in srgb, var(--intro) 45%, var(--rule)); background: color-mix(in srgb, var(--intro) 9%, var(--panel)); color: var(--intro); }
.fym-trip { margin: -2px 0 2px; padding: 12px 14px; border: 1px solid var(--intro); border-radius: 14px; background: color-mix(in srgb, var(--intro) 5%, var(--panel)); display: flex; flex-direction: column; gap: 8px; }
.fym-trip label { font: 500 11px var(--mono); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.fym-trip .row { display: flex; gap: 8px; }
.fym-trip input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); font: 500 16px var(--body); color: var(--ink); }
.fym-trip input:focus-visible { outline: 2px solid var(--intro); outline-offset: 1px; }
/* The city list under every place field (cityPick), in the sign-up list's look (.signin .jn-list). */
.cpick { display: grid; gap: 4px; margin-top: 6px; grid-column: 1 / -1; }
.cpick button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); font: 14px/1.3 var(--body); color: var(--ink); cursor: pointer; }
.cpick button:hover, .cpick button:focus-visible, .signin .jn-list button:hover, .signin .jn-list button:focus-visible { border-color: color-mix(in srgb, var(--intro) 45%, var(--rule)); background: color-mix(in srgb, var(--intro) 6%, var(--panel)); outline: none; }
.cpick small { color: var(--muted); }
.cp-val { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--panel); font-size: 14px; color: var(--ink); }
.cp-val > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-val .linkish { margin-left: auto; flex: none; font-size: 13px; color: var(--intro); }
.cp-err { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; color: #b42318; }
.fym-prods { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 2px; padding: 12px 14px; border: 1px solid var(--intro); border-radius: 14px; background: color-mix(in srgb, var(--intro) 5%, var(--panel)); }
.signin.fym .si-sheet { overflow: hidden; }
.signin.fym .si-sheet:focus { outline: none; }
.fym-list { overflow-y: auto; min-height: 0; margin: -4px; padding: 4px; overscroll-behavior: contain; }
.fym-list > * { flex-shrink: 0; }
.prod-hl { outline: 2px solid var(--intro); outline-offset: 3px; border-radius: 10px; } /* on a short screen the list scrolls; the cards never squash into each other */
.fym-trip .btn { height: 44px; }
.fym-trip span { font-size: 12.5px; color: var(--muted); }
.fym-hide { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-height: 32px; cursor: pointer; }
.fym-hide input { width: 16px; height: 16px; accent-color: var(--intro); }
/* After-login setup (same sheet as sign-in): 1 where you're based, 2 how far out your face shows, then done. */
.signin .su-prog { display: flex; gap: 6px; align-items: center; margin: 0 0 14px; }
.signin .su-prog span { height: 4px; flex: 1; border-radius: 99px; background: var(--rule); }
.signin .su-prog span.on { background: var(--intro); } .signin .su-prog span.done { background: var(--live); }
.signin .su-prog small { font: 400 11px/1 var(--mono); color: var(--muted); margin-left: 6px; }
/* The same look as the sign-up list (.jn-list, .cpick): separate rows with gaps. */
.signin .su-list { display: grid; gap: 4px; margin: -4px 0 10px; }
.signin .su-list button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); font: 14px/1.3 var(--body); color: var(--ink); cursor: pointer; }
.signin .su-list button:hover, .signin .su-list button:focus-visible { border-color: color-mix(in srgb, var(--intro) 45%, var(--rule)); background: color-mix(in srgb, var(--intro) 6%, var(--panel)); outline: none; }
.signin .su-list small, .signin .su-country small { color: var(--muted); font-size: 12px; }
.signin .su-country { font-size: 13px; color: var(--muted); margin: 0 0 12px; } .signin .su-country b { color: var(--ink); font-weight: 600; }
.dc-note { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 100001; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--panel); font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: si-up .28s var(--ease) both; }
/* Save MakerMap to your phone: a strip across the top on phones, like an app store banner, that pushes the page down
   (savebar script at the end of the page), and the how-to sheet it opens. */
.savebar { position: sticky; top: 0; z-index: 3; flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 32px; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 14px; background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--rule); cursor: pointer; -webkit-tap-highlight-color: transparent; animation: si-fade .25s ease both; }
.savebar img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 1px var(--rule); }
.savebar b { display: block; font: 600 15px/1.2 var(--display); }
.savebar span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.savebar .sb-go { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; padding: 0; color: var(--intro); cursor: pointer; touch-action: manipulation; }
.savebar .sb-go svg { width: 28px; height: 28px; }
.savebar .sb-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--panel-2); padding: 0; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; touch-action: manipulation; }
body.has-savebar { display: flex; flex-direction: column; }
body.has-savebar > .app { flex: 1 1 0; height: auto; min-height: 0; }
body.sx-open .savebar { display: none; }
/* iOS 26+ fades whatever sits under the clock unless a solid, full-width box is held at the top edge. On Explore the
   pinned map is that box (white #map, a clean white strip); on the map-less phone pages (You, Updates, Contribute,
   profiles) this 12px white band is, so their titles don't fade. It overlaps the page's own top padding. */
.topedge { display: none; }
@media (max-width: 900px) {
  .app.page .col > .topedge { display: block; position: sticky; top: 0; z-index: 4; flex: none; height: 12px; margin-bottom: -12px; background: var(--panel); pointer-events: none; }
}
.signin .sv-tile { display: grid; justify-items: center; gap: 6px; margin: 4px 0 16px; padding: 16px 0 14px; border-radius: 16px; background: var(--ocean); font-size: 12px; color: var(--ink); }
.signin .sv-tile img { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 4px 14px rgba(27,31,36,.14); }
.signin .sv-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }
.signin .sv-steps svg { width: 17px; height: 17px; margin-left: 4px; vertical-align: -3px; }
.signin .sv-steps.ios svg { color: #0A84FF; }
.signin .sv-copy { margin: 0 0 12px; }
.signin .dc-warn { margin: 4px 0 14px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 16%, var(--panel)); font-size: 13px; line-height: 1.4; color: var(--ink); }
.signin .dc-hint { font-size: 12px; color: var(--muted); }
.signin.dc .si-fine { text-align: center; margin-top: 4px; } .signin.dc .si-fine .linkish { padding: 12px 18px; font-size: 13px; }
.signin .dc-perk { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 14%, var(--panel)); font-size: 13px; } .signin .dc-perk b { font-family: var(--display); font-size: 15px; }
.signin .dc-consent { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.signin .si-go[aria-disabled="true"] { opacity: .55; }
.signin .si-f input[aria-invalid="true"] { border-color: var(--intro); }
.signin .su-tiers { display: grid; gap: 9px; margin: 0 0 12px; }
.signin .su-tier { display: grid; grid-template-columns: 18px 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); cursor: pointer; }
.signin .su-tier.on { border: 2px solid var(--ink); padding: 11px; }
/* The plans step: header and buttons stay put, the plans scroll between them. */
.signin .si-sheet.su-fixed { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.signin .su-fixed .su-top { flex: none; }
.signin .su-fixed .su-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -22px; padding: 12px 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.signin .su-fixed .su-scroll .su-tiers { margin: 0; }
.signin .su-fixed .su-bot { flex: none; padding: 6px 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
.signin .su-tier.pop { border: 2px solid var(--intro); padding: 11px; }
.signin .su-tier.pop.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--intro) 18%, transparent); }
.signin .su-pop { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--intro) 12%, var(--panel)); color: var(--intro); font: 600 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.signin .su-tier.off { opacity: .55; cursor: not-allowed; }
.signin .su-tier input { margin: 0; width: 18px; height: 18px; accent-color: var(--ink); }
.su-pin { justify-self: center; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--panel-2); color: #fff; font: 600 12px/1 var(--display); }
.su-pin img { width: 100%; height: 100%; object-fit: cover; }
.su-pin.t0 { width: 28px; height: 28px; box-shadow: 0 0 0 2px var(--gold); }
.su-pin.t1 { width: 40px; height: 40px; box-shadow: 0 0 0 3px var(--gold), 0 3px 10px rgba(27,31,36,.25); }
.su-pin.t2 { width: 50px; height: 50px; box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--panel), 0 0 0 6.5px color-mix(in srgb, var(--gold) 55%, transparent), 0 5px 14px rgba(27,31,36,.3); }
.signin .su-tx b { display: block; font: 700 15.5px/1.1 var(--display); }
.signin .su-tx small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.signin .su-tx em, .signin .su-feats em { display: inline-block; margin-top: 5px; padding: 3px 7px; border-radius: 6px; font: 500 10.5px/1.3 var(--mono); font-style: normal; background: color-mix(in srgb, var(--gold) 16%, var(--panel)); color: #6B5310; }
.signin .su-pr { text-align: right; font: 700 16px/1 var(--display); white-space: nowrap; }
.signin .su-pr small { display: block; margin-top: 2px; font: 400 11px/1.3 var(--body); color: var(--muted); }
.signin .su-pr.free { font: 600 14px/1 var(--body); color: #17804F; }
.signin .su-tier .su-feats { grid-column: 2 / -1; display: grid; gap: 6px; margin-top: 2px; }
.signin .su-lead { font: 600 11px/1.3 var(--body); color: var(--muted); }
.signin .su-ft { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.signin .su-ft svg { flex: none; margin-top: 2.5px; color: #17804F; }
.signin .su-ft.soon { color: var(--muted); } .signin .su-ft.soon svg { color: #8B929A; }
.signin .su-feats em { justify-self: start; margin-top: 2px; }
.signin .su-tier .su-tx b { font-size: 15.5px; } .signin .su-tier .su-tx small { font-size: 12px; }
.signin .su-ft i, .signin .su-soon { font: 600 9.5px/1.4 var(--mono); font-style: normal; padding: 1px 5px; border-radius: 5px; background: var(--panel-2); color: var(--muted); letter-spacing: .04em; }
.signin .su-cmp { margin: -4px auto 10px; font-weight: 600; }
.signin .su-back { display: block; margin: 0 0 8px; }
.signin .su-cmp-t { display: grid; margin: 0 0 12px; font-size: 12.5px; }
.signin .su-cr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 64px); gap: 4px; align-items: center; padding: 7px 0; border-top: 1px solid var(--panel-2); }
.signin .su-cr > span:not(:first-child) { text-align: center; } .signin .su-cr > span.top { background: #FBFAF7; border-radius: 6px; padding: 2px 0; font-weight: 600; }
.signin .su-ch { border-top: 0; align-items: end; padding-bottom: 6px; }
.signin .su-ch > span { display: grid; justify-items: center; gap: 4px; } .signin .su-ch b { font: 700 12px/1 var(--display); } .signin .su-ch small { font-size: 10.5px; color: var(--muted); }
.signin .su-ch .su-pin.t0 { width: 22px; height: 22px; } .signin .su-ch .su-pin.t1 { width: 28px; height: 28px; } .signin .su-ch .su-pin.t2 { width: 34px; height: 34px; }
.signin .su-cs { padding: 12px 0 4px; font: 600 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.signin .su-ok { color: #17804F; font-weight: 700; } .signin .su-no { color: #8B929A; }
@media (max-width: 400px) { .signin .su-cr { grid-template-columns: minmax(0, 1fr) repeat(3, 54px); } }
.signin .su-seg { display: flex; gap: 3px; padding: 3px; margin: 0 0 12px; background: #ECECE8; border-radius: 10px; }
.signin .su-seg button { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: transparent; font: 500 13px/1 var(--body); color: var(--muted); cursor: pointer; }
.signin .su-seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); font-weight: 600; }
.signin .si-go.pay { background: #D2461D; color: #fff; }
.signin .si-go.ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); margin-top: 8px; }
.signin .su-alt { display: block; margin: 10px auto 0; min-height: 36px; }
/* "Your pin" on /me */
.step.vis .vis-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.step.vis .vis-row b { display: block; font: 600 14.5px/1.2 var(--display); }
.step.vis .vis-row span.m { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.step.vis .vis-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .step.vis .vis-row { grid-template-columns: 56px minmax(0, 1fr); } .step.vis .vis-acts { grid-column: 1 / -1; justify-content: flex-start; } }
/* The post index card on /me */
.step.pix .pix-q, .step.pix .pix-tags { display: grid; gap: 5px; }
.step.pix .lbl { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.step.pix q { display: block; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); font-size: 13px; line-height: 1.45; quotes: "“" "”"; }
.step.pix .pix-tags > span:last-child { display: flex; flex-wrap: wrap; gap: 6px; }
/* The free maker's own pin just turned into a dot: one quiet offer, at most once a week. */
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }
.followers { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 6px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }
.followers .fhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.followers .fhead strong { font: 600 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.followers .fdeltas { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.followers .fd.up b { color: var(--live); }
.followers .fd.down b { color: var(--intro); }
.followers .fchart { width: 100%; height: 110px; display: block; }
.followers .fchart .line { fill: none; stroke: var(--intro); stroke-width: 2; stroke-linejoin: round; }
.followers .fchart .area { fill: color-mix(in srgb, var(--intro) 12%, transparent); }
.followers .faxis { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.followers.slim { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 16px; font-size: 13px; }
.followers.slim b { font-variant-numeric: tabular-nums; }
.followers.slim span { color: var(--muted); font-size: 12px; }
/* The Growth tab: one grid of days, with the chips deciding what a square counts (posts, followers gained, points). */
.act { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }
.act .ahead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.act .asw { display: inline-flex; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 9px; overflow: hidden; }
.act .asw button { border: 0; background: var(--panel); padding: 5px 10px; font: 500 12px/1 var(--body); color: var(--muted); cursor: pointer; }
.act .asw button[aria-selected="true"] { background: var(--ink); color: var(--panel); }
.act .achips { display: flex; gap: 6px; flex-wrap: wrap; }
.act .achips .rbtn { cursor: pointer; font-size: 12.5px; padding: 0 10px; }
.act .achips .rbtn[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.agrid { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 6px; overflow-x: auto; scrollbar-width: none; }
.agrid::-webkit-scrollbar { display: none; }
.amonths { grid-column: 2; display: grid; grid-template-columns: repeat(var(--weeks), 11px); font: 500 9.5px/1 var(--mono); color: var(--faint); }
.adays { grid-column: 1; display: flex; flex-direction: column; justify-content: space-around; padding: 2px 0 0; font: 500 9.5px/1 var(--mono); color: var(--faint); text-align: right; }
.acols { grid-column: 2; display: flex; gap: 2px; }
.acols .wk { display: flex; flex-direction: column; gap: 2px; }
.acols .wk i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.acols .wk i.e { background: transparent; }
.acols .wk i:hover { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.acols .wk i.l0, .alegend i.l0 { background: color-mix(in srgb, var(--ink) 6%, var(--panel)); }
.acols .wk i.l1, .alegend i.l1 { background: color-mix(in srgb, var(--intro) 22%, var(--panel)); }
.acols .wk i.l2, .alegend i.l2 { background: color-mix(in srgb, var(--intro) 45%, var(--panel)); }
.acols .wk i.l3, .alegend i.l3 { background: color-mix(in srgb, var(--intro) 70%, var(--panel)); }
.acols .wk i.l4, .alegend i.l4 { background: var(--intro); }
.alegend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--faint); }
.alegend i { width: 9px; height: 9px; border-radius: 2px; }
.alegend em { margin-left: auto; font-style: normal; }
.ppanel .pstrip.gtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pstrip.gtiles .tile { background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pstrip.gtiles strong { font-size: 19px; }
.pstrip.gtiles span { font-size: 11.5px; color: var(--muted); }
.gnote { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.gnote i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--gold); }
.gnote b { color: var(--ink); font-weight: 600; }
.ahours { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }
.ahours .lbl em { font: 500 10px/1 var(--mono); font-style: normal; color: var(--faint); margin-left: 6px; }
.ahours .hbars { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.ahours .hbars i { flex: 1; height: var(--h); min-height: 2px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--intro) 35%, var(--panel)); }
.ahours .hbars i.pk { background: var(--intro); }
/* The Posts view before World: a faded sample of the grid above the upsell card, and a small lock on the chip. */
.alock { opacity: .45; filter: saturate(.6); pointer-events: none; user-select: none; }
.alock .alegend em { display: none; }
.act .achips .rbtn .lk-ic { width: 11px; height: 11px; margin-left: 5px; flex: none; }
.ahours .hax { display: flex; justify-content: space-between; font: 500 9.5px/1 var(--mono); color: var(--faint); }

.about { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 6px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }
.about .bestline { margin: 0; font: 500 14.5px/1.35 var(--display); }
.about .bio { margin: 0; font-size: 13px; line-height: 1.45; white-space: pre-line; color: var(--muted); }
.about .facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.about .arow { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.about .arow .k { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.about .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.about .ab { font: 500 12px/1 var(--body); padding: 6px 9px; border-radius: 999px; background: var(--panel-2); color: var(--ink); text-decoration: none; }
.about .ab.open { background: color-mix(in srgb, var(--live) 14%, var(--panel)); }
.about .ab.co i, .about .ab i { font-style: normal; color: var(--muted); }
.about a.ab:hover { text-decoration: underline; }
.about .hint { font-size: 11.5px; color: var(--muted); }
@media (max-width: 480px) { .about .arow { grid-template-columns: 1fr; gap: 4px; } }
.togs { display: flex; flex-wrap: wrap; gap: 6px; }
.tog { font: 500 12px/1 var(--body); padding: 7px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
.tog[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.tog:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
.wb.want { border-style: solid; border-color: color-mix(in srgb, var(--intro) 40%, var(--rule)); color: var(--intro); }
.rbtn.loc.plain:hover { border-color: var(--rule); }
.meetcard { position: absolute; right: 16px; bottom: 34px; z-index: 3000; width: min(290px, calc(100% - 32px)); padding: 14px; border-radius: 16px; background: var(--ink); color: var(--panel); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.3); animation: mrow-in .45s var(--ease) both; }
.meetcard b { font: 600 15px/1.25 var(--display); padding-right: 18px; }
.meetcard .sub { font-size: 12.5px; opacity: .78; }
.meetcard .faces { display: flex; }
.meetcard .faces .pic { width: 28px; height: 28px; margin-left: -7px; box-shadow: 0 0 0 2px var(--ink); }
.meetcard .faces .pic:first-child { margin-left: 0; }
.meetcard .btn { align-self: flex-start; }
.meetcard .sub a { color: inherit; }
.meetcard .post { font-size: 12.5px; line-height: 1.4; white-space: pre-wrap; background: rgba(255,255,255,.08); border-radius: 10px; padding: 8px 10px; max-height: 150px; overflow: auto; }
.meetcard .x { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: inherit; opacity: .6; font-size: 18px; cursor: pointer; }
@media (max-width: 900px) { .meetcard { left: 12px; right: 12px; bottom: 30px; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 6px 10px; } .meetcard.plan .sub { display: none; } .meetcard .post, .meetcard .sub { flex-basis: 100%; } .meetcard b { font-size: 13.5px; flex: 1 1 140px; } }
.showcase.found { border-style: dashed; }
.showcase.found .lbl { color: var(--faint); }
p.mrr { font-size: 13px; color: var(--muted); }
p.mrr b { color: var(--live); font-weight: 600; }
.mbanner { margin: 14px 0; padding: 14px; border-radius: 16px; border: 1.5px solid var(--intro); background: color-mix(in srgb, var(--intro) 6%, var(--panel)); display: flex; flex-direction: column; gap: 8px; }
.mbanner .who { display: flex; align-items: center; gap: 10px; }
.mbanner .who .pic { width: 40px; height: 40px; }
.mbanner b { display: block; font: 600 15px/1.25 var(--display); }
.mbanner span { color: var(--muted); font-size: 12.5px; }
.mbanner .mchips { margin-top: 0; }
.rbtn.loc:hover { border-color: var(--ink); }
.rbtn.add { border-color: color-mix(in srgb, var(--intro) 45%, var(--rule)); background: color-mix(in srgb, var(--intro) 7%, var(--panel)); color: var(--intro); font-weight: 600; flex: none; }
.rbtn.add:hover { background: var(--intro); border-color: var(--intro); color: #fff; }
.row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.row .pic, .row .pic-wrap { width: 44px; height: 44px; }
.row .pic-wrap .pic { width: 44px; height: 44px; }
.row.mine { background: color-mix(in srgb, var(--gold) 10%, var(--panel)); }

/* Photo pins: the people worth a face on the map. The drop-in fills backwards only (hidden through its stagger delay);
   a forwards fill kept the last keyframe's transform applied, which beat the hover scale for good. */
.ppin { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); box-shadow: 0 0 0 2.5px var(--intro), 0 4px 12px rgba(0,0,0,.28); cursor: pointer; transition: transform .2s var(--ease); animation: pin-in .5s var(--ease) backwards; }
.ppin img, .ppin .ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: #fff; font: 600 13px/1 var(--display); }
.ppin:hover { transform: scale(1.14); z-index: 5; }
.ppin .rk { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); font: 600 9.5px/1 var(--mono); padding: 2px 5px; border-radius: 999px; background: var(--ink); color: var(--panel); white-space: nowrap; }
.ppin.gold { box-shadow: 0 0 0 2.5px var(--gold), 0 4px 12px rgba(0,0,0,.28); }
/* The glow rings three times as the pin lands (same delay as its drop-in), then rests hidden; hovering rings it again.
   It takes no pointer: as part of the pin its pulsing size kept switching the hover on and off at the pin's edge. */
.ppin.gold::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; animation: glow 2.4s ease-out 3; animation-delay: inherit; }
.ppin.gold:hover::before { animation: glow-h 2.4s ease-out infinite; }
.ppin.back, .ppin.back::before { animation: none; } /* back on the map after being a dot at the world view (syncShown) */
.ppin.gold .rk { background: var(--gold); color: #1B1F24; }
/* Pin tiers (lib/tiers.mjs): size says how far out a face shows. City photos appear at city zoom, Country from country
   zoom, Continent from the world view with the maker's name. Gold stays "claimed", whatever the size. */
.ppin.t0 { width: 26px; height: 26px; }
.ppin.t1 { width: 33px; height: 33px; box-shadow: 0 0 0 3px var(--gold), 0 5px 14px rgba(0,0,0,.3); }
.ppin.t2 { width: 40px; height: 40px; box-shadow: 0 0 0 3px var(--gold), 0 0 0 5.5px var(--panel), 0 0 0 7px color-mix(in srgb, var(--gold) 55%, transparent), 0 6px 18px rgba(0,0,0,.32); }
.ppin.t1 .ini { font-size: 13px; } .ppin.t2 .ini { font-size: 16px; }
.ppin .pnm { position: absolute; left: 50%; top: calc(100% + 11px); transform: translateX(-50%); font: 600 11px/1 var(--body); padding: 3px 7px; border-radius: 999px; background: var(--ink); color: var(--panel); white-space: nowrap; pointer-events: none; }
/* World view: only the top rung shows a full face, names on hover. One size at every zoom, and letting them overlap
   out here is fine. */
/* Names stayed hidden out here when 200 pins carried one. Only the top rung has a full pin now, so ~20 names read fine. */
#map.zb2 .ppin.tiny .pnm { display: none; }
#map.zgroup .ppin .pnm { display: none; } /* below GROUP_ZOOM names give way; they show on hover */
.ppin.sel { box-shadow: 0 0 0 3px var(--focus), 0 0 0 7px color-mix(in srgb, var(--focus) 25%, transparent), 0 4px 12px rgba(0,0,0,.28); z-index: 6; }
/* A pin with the keyboard's focus (MM-102) comes out from under its neighbours, so its ring shows; below the match view's
   own pin (2000). Markers carry their stacking order inline (renderPins), hence !important. */
.maplibregl-marker:has(> [role="button"]:focus-visible) { z-index: 1999 !important; }
.ppin .plg { position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--panel); background: var(--panel-2); object-fit: cover; }
/* A claimed maker who is out of their band, or crowded out by a better-placed pin, keeps a small face instead of
   disappearing: still theirs, still hoverable, and it grows into the full pin as the map makes room.
   No animation or content override here: toggling either restarts the drop-in and the gold glow, so every step
   while zooming would replay them. Hiding the glow with visibility leaves its animation running untouched. */
.ppin.tiny { width: 16px; height: 16px; box-shadow: 0 0 0 1.5px var(--gold), 0 1px 3px rgba(0,0,0,.28); }
.ppin.tiny::before { visibility: hidden; }
.ppin.tiny .rk, .ppin.tiny .pnm, .ppin.tiny .plg { display: none; }
.ppin.tiny .ini { font-size: 8px; }
.ppin.tiny:hover { transform: scale(1.5); }
/* An unclaimed maker, once the map is deep enough to show them: their face, plain orange, under everyone claimed. */
.ppin.unc { width: 16px; height: 16px; box-shadow: 0 0 0 2px var(--intro), 0 2px 6px rgba(0,0,0,.22); animation: none; }
/* Small when they first appear, so a big city's faces don't land as a pile; full size once the map is deep enough. */
#map.zdeep .ppin.unc { width: 22px; height: 22px; }
/* Hidden-count badge: zoomed out, the pin that wins a city's spot says how many sit under it. Top-left, clear of the
   product logo (top-right) and the rank (below). It stays on a small face on purpose: there it is the whole signal. */
.ppin .mm-more { position: absolute; left: -9px; top: -9px; font: 600 9.5px/1 var(--mono); padding: 3px 5px; border-radius: 999px; background: var(--ink); color: var(--panel); white-space: nowrap; box-shadow: 0 0 0 2px var(--panel); cursor: zoom-in; z-index: 2; }
.ppin.tiny .mm-more { left: -8px; top: -8px; }
/* A pile with nobody claimed: the best-ranked unclaimed maker stands in for it, a bit bigger than a face would be at
   this zoom and smaller than any claimed pin, with the count on their shoulder. Never a text pill: too big, too many. */
.ppin.unc.lead { width: 22px; height: 22px; }
.ppin.unc .mm-more { left: -8px; top: -8px; }
.mm-more[hidden] { display: none; }
/* .btn sets display, which beats the hidden attribute: once they're on the map, "Add yourself" goes. */
/* MapLibre gives the card itself pointer-events: auto. If the card can take the cursor, a card drawn over the hovered
   pin steals it: mouseleave hides the card, mouseenter shows it again, and the pin flashes. */
.maplibregl-popup.tt .maplibregl-popup-content { pointer-events: none; background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; padding: 7px 10px; font: 400 12.5px/1.35 var(--body); box-shadow: var(--shadow); white-space: nowrap; max-width: 300px; overflow: hidden; }
.maplibregl-popup.tt { z-index: 5000; pointer-events: none; }
.maplibregl-popup.tt .maplibregl-popup-tip { display: none; }
.maplibregl-popup.tt b, .maplibregl-popup.tt .sub { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.maplibregl-popup.tt b { font-weight: 600; }
.maplibregl-popup.tt .sub { color: var(--muted); font: 400 11.5px/1.35 var(--mono); }
.maplibregl-popup.tt .sub.gold { color: var(--gold); }
.maplibregl-ctrl-attrib { font: 400 10px/1.4 var(--mono) !important; background: color-mix(in srgb, var(--panel) 80%, transparent) !important; color: var(--faint) !important; }
.maplibregl-ctrl-attrib a { color: var(--muted) !important; }
.maplibregl-marker { cursor: pointer; }
.nogl { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; text-align: center; padding: 24px; background: var(--panel); color: var(--muted); font: 400 13px/1.45 var(--body); }
.nogl b { color: var(--ink); font-weight: 600; font-size: 14px; }
.nogl .ng-wrap { display: grid; justify-items: center; gap: 2px; }
.nogl .ng-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; margin-top: 8px; }
.nogl .ng-links a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--bg, #fff); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font: 600 13.5px/1 var(--body); }
.nogl .ng-links a span { color: var(--intro); }
.nogl .ng-h { margin-top: 12px; font: 600 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 900px) { .nogl { padding: 130px 16px 110px; } }
/* Matches: the card on a profile, the list, and the map sequence (zoom, radar sweep, arcs, pins). */
.mfind { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--intro) 35%, var(--rule)); background: color-mix(in srgb, var(--intro) 7%, var(--panel)); }
.mfind > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.mfind b { font: 600 15.5px/1.3 var(--display); }
.mfind .sub { color: var(--muted); font-size: 13px; }
.mlist { margin: 2px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.mhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mhead h4 { margin: 0; font: 600 16px/1.25 var(--display); }
.mhead > div { min-width: 0; }
.mhead .sub { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhead .links { display: flex; gap: 10px; flex: none; font-size: 12.5px; }
.mx { flex: none; } .mx svg { pointer-events: none; }
.mhide { display: flex; align-items: center; gap: 6px; align-self: center; color: var(--muted); font-size: 12.5px; cursor: pointer; width: fit-content; }
.mhide input { margin: 0; accent-color: var(--intro); }
.mscan { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; overflow: hidden; animation: mscan-out .35s var(--ease) forwards; animation-delay: var(--scan, 0ms); }
.mscan .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--intro); animation: pulse-o 1s ease-in-out infinite; }
.mrow { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); opacity: 0; animation: mrow-in .5s var(--ease) forwards; transition: border-color .2s, box-shadow .2s; }
.mlist.static .mrow, .mlist.static .mscan { animation: none; opacity: 1; }
.mlist.static .mscan { display: none; }
.mrow.hl { border-color: var(--intro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--intro) 15%, transparent); }
/* Picking who's in, after "Host a meetup": a round select in each card's corner, a bar that follows you down the list. */
.mrow { position: relative; }
.mrow.picked { border-color: var(--intro); background: color-mix(in srgb, var(--intro) 3%, var(--panel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--intro) 14%, transparent); }
.mlist.picking .mrow { cursor: pointer; }
.mlist.picking .mrow .nm, .mlist.picking .mrow .meta { padding-right: 36px; }
.mtick { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 28%, var(--rule)); background: var(--panel); color: transparent; display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--ease); }
.mtick svg { width: 16px; height: 16px; pointer-events: none; }
.mtick[aria-checked="true"] { background: var(--intro); border-color: var(--intro); color: #fff; transform: scale(1.06); }
.mtick:disabled { opacity: .35; cursor: not-allowed; }
.meetup .btn.mlight { background: var(--panel); border-color: var(--panel); color: var(--ink); }
.mpickbar { position: sticky; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: var(--panel); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.mpickbar .faces { display: flex; flex: none; }
.mpickbar .faces .pic { width: 28px; height: 28px; border: 2px solid var(--ink); margin-left: -9px; }
.mpickbar .faces .pic:first-child, .mpickbar .faces .slot:first-child { margin-left: 0; }
.mpickbar .slot { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--panel) 45%, transparent); margin-left: -6px; }
.mpickbar .faces .more { height: 28px; min-width: 28px; padding: 0 6px; margin-left: -9px; border-radius: 999px; border: 2px solid var(--ink); background: color-mix(in srgb, var(--panel) 18%, var(--ink)); color: var(--panel); display: grid; place-items: center; font: 600 11.5px/1 var(--display); }
.mpickbar .t { flex: 1; min-width: 0; display: grid; }
.mpickbar b, .mpickbar .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpickbar b { font: 600 14.5px/1.25 var(--display); }
.mpickbar .sub { color: color-mix(in srgb, var(--panel) 70%, transparent); font-size: 12px; }
.mpickbar .linkish, .mpickbar .btn { flex: none; }
@media (max-width: 359px) { .mpickbar .faces { display: none; } }
.mpickbar .linkish { color: color-mix(in srgb, var(--panel) 75%, transparent); }
.mpickbar .btn { background: var(--intro); border-color: var(--intro); color: #fff; }
.mpickbar .btn[disabled] { opacity: .45; cursor: not-allowed; }
body:has(.mlist.picking) .mfab, body:has(.mlist.picking) .mappill { display: none !important; }
.mmore { align-self: center; }
.meetup .m-meet[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) { .mrow { grid-template-columns: 46px minmax(0, 1fr); } }
.mrow .av { position: relative; width: 46px; height: 46px; }
.mrow .av .pic { width: 46px; height: 46px; }
.mrow .no { position: absolute; bottom: -3px; right: -3px; width: 19px; height: 19px; border-radius: 50%; background: var(--intro); color: #fff; font: 600 10.5px/19px var(--mono); text-align: center; box-shadow: 0 0 0 2px var(--panel); }
.mrow .nm { font-weight: 600; line-height: 1.3; }
.mrow .meta { color: var(--muted); font-size: 12.5px; }
.mrow .said { color: var(--muted); font-size: 13px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mchip { font: 400 11px/1 var(--mono); padding: 5px 7px; border-radius: 7px; border: 1px solid var(--rule); background: var(--panel-2); color: var(--ink); }
.mchip.hot { border-color: color-mix(in srgb, var(--intro) 45%, var(--rule)); background: color-mix(in srgb, var(--intro) 9%, var(--panel)); color: var(--intro); }
.mrow .actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Follow (4 Oct 2026) took View profile's place: the photo and the name open the profile. */
.mrow .nm a { color: inherit; text-decoration: none; } .mrow .av[data-mview] { cursor: pointer; }
.mnote { color: var(--muted); font-size: 13px; }
@keyframes mrow-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mscan-out { to { opacity: 0; height: 0; margin: -5px 0; } }
@keyframes pulse-o { 50% { opacity: .25; } }
.mradar { position: relative; border-radius: 50%; pointer-events: none; opacity: 0; animation: mradar-life var(--life, 1700ms) var(--ease) forwards; }
.mradar .ring { position: absolute; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--intro) 50%, transparent); }
.mradar .ring.r1 { inset: 0; background: color-mix(in srgb, var(--intro) 5%, transparent); }
.mradar .ring.r2 { inset: 22%; border-style: dashed; opacity: .7; }
.mradar .ring.r3 { inset: 44%; opacity: .5; }
.mradar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 250deg, color-mix(in srgb, var(--intro) 10%, transparent) 300deg, color-mix(in srgb, var(--intro) 55%, transparent) 360deg); animation: msweep .85s linear infinite; }
@keyframes msweep { to { transform: rotate(360deg); } }
@keyframes mradar-life { 0% { opacity: 0; transform: scale(.2); } 18% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
.mblip { width: 9px; height: 9px; border-radius: 50%; background: var(--intro); opacity: 0; animation: mblip .9s ease-out forwards; pointer-events: none; }
@keyframes mblip { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.7); } 100% { opacity: 0; transform: scale(.9); } }
.mhost { transition: transform .25s var(--ease); cursor: pointer; }
.mhost.hl { transform: scale(1.22); }
.mhost { transition: transform .25s var(--ease), opacity .25s, filter .25s; }
.mhost.faded { opacity: .38; filter: grayscale(1); transform: scale(.82); }
.mpin { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 3px var(--intro), 0 8px 20px rgba(0,0,0,.3); opacity: 0; transform: scale(.2); animation: mpin-in .6s cubic-bezier(.2,1.5,.4,1) forwards; }
.mpin img, .mpin .ini { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: #fff; font: 600 16px/1 var(--display); }
.mpin .no { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--intro); color: #fff; font: 600 11px/20px var(--mono); text-align: center; box-shadow: 0 0 0 2px var(--panel); }
.mpin::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--intro); animation: mhalo 2s ease-out .6s infinite; opacity: 0; }
.mme { position: relative; width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px color-mix(in srgb, var(--intro) 35%, transparent), 0 10px 26px rgba(0,0,0,.35); background: var(--panel); animation: mpin-in .6s cubic-bezier(.2,1.5,.4,1) both; }
.mme img, .mme .ini { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: #fff; font: 600 20px/1 var(--display); }
.mme::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--intro); animation: mhalo 1.6s ease-out infinite; }
@keyframes mpin-in { 0% { opacity: 0; transform: scale(.2) translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes mhalo { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
body.matching .ppin { opacity: .28; transition: opacity .4s; }
@media (prefers-reduced-motion: reduce) { .mrow, .mpin, .mme, .mscan { animation: none !important; opacity: 1 !important; transform: none !important; } .mscan { display: none; } .mpin::after, .mme::after { animation: none; } }
/* Product fit: the panel under a product, its rows, products made for you, and the worldwide wave. */
.pfit { border-top: 1px solid color-mix(in srgb, var(--intro) 30%, var(--rule)); background: color-mix(in srgb, var(--intro) 5%, var(--panel)); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pfit .ptop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pfit .ptop h4 { margin: 0; font: 600 15px/1.25 var(--display); }
.pfit .ptop .sub { color: var(--muted); font-size: 12.5px; }
.pfit .links { display: flex; gap: 10px; flex: none; font-size: 12.5px; }
.pctl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 9px; overflow: hidden; background: var(--panel); }
.seg button { border: 0; background: none; padding: 6px 10px; font: 500 12.5px var(--body); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.kchip { font: 400 11.5px/1 var(--mono); padding: 6px 8px; border-radius: 7px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
.kchip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--intro) 45%, var(--rule)); background: color-mix(in srgb, var(--intro) 10%, var(--panel)); color: var(--intro); }
.kind { font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: 6px; background: color-mix(in srgb, var(--intro) 12%, var(--panel)); color: var(--intro); }
.kind.advocate { background: color-mix(in srgb, var(--gold) 16%, var(--panel)); color: color-mix(in srgb, var(--gold) 80%, var(--ink)); }
.kind.customer { background: color-mix(in srgb, var(--live) 14%, var(--panel)); color: var(--live); }
.pquote { margin-top: 6px; font-size: 13px; color: var(--ink); border-left: 2px solid var(--intro); padding-left: 8px; }
.pquote mark { background: color-mix(in srgb, var(--intro) 18%, transparent); color: inherit; padding: 0 2px; border-radius: 3px; }
.pfy { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.pfy .it { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); text-decoration: none; color: inherit; }
.pfy .it:hover { border-color: var(--intro); }
.pfy .it .pic { width: 36px; height: 36px; }
.pfy b { font-weight: 600; font-size: 14px; }
.pfy .tl { display: block; color: var(--muted); font-size: 12.5px; }
.pfy .by { display: block; color: var(--faint); font-size: 12px; margin-top: 3px; }
.pfy .pt { color: inherit; text-decoration: none; }
.pfy .pt:hover b { color: var(--intro); }
.pfy .by a { color: inherit; }
.pfy .by b { color: var(--muted); font-weight: 600; }
.pfy .pact { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pfy .it.own:hover { border-color: var(--rule); }
.pfy > .pfit { border: 1px solid color-mix(in srgb, var(--intro) 30%, var(--rule)); border-radius: 12px; }
.pfy .it.add { display: flex; align-items: center; justify-content: center; border-style: dashed; border-color: color-mix(in srgb, var(--intro) 45%, var(--rule)); color: var(--intro); font-weight: 500; font-size: 13.5px; padding: 12px; }
.mwave { position: relative; pointer-events: none; }
.mwave span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--intro) 60%, transparent); background: radial-gradient(circle, transparent 62%, color-mix(in srgb, var(--intro) 10%, transparent) 70%, transparent 72%); opacity: 0; transform: scale(.02); animation: mwave 1.8s cubic-bezier(.2,.6,.3,1) forwards; }
.mwave span:nth-child(2) { animation-delay: .35s; } .mwave span:nth-child(3) { animation-delay: .7s; }
@keyframes mwave { 0% { opacity: .9; transform: scale(.02); } 100% { opacity: 0; transform: scale(1); } }
.mblip.stay { animation-name: mstay; animation-duration: 1.1s; }
@keyframes mstay { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.9); } 100% { opacity: .55; transform: scale(1); } }
.mme .mbadge { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 7px; background: var(--ink); color: #fff; box-shadow: 0 0 0 2px var(--panel); display: grid; place-items: center; font: 700 12px/1 var(--display); overflow: hidden; }
.mme .mbadge img { width: 24px; height: 24px; border-radius: 0; object-fit: cover; }
.mme .mbadge:has(img) { background: #fff; }
@media (prefers-reduced-motion: reduce) { .mwave { display: none; } .mblip.stay { animation: none; opacity: .55; } }
.meetup { margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: var(--panel); opacity: 0; animation: mrow-in .5s var(--ease) forwards; }
.mlist.static .meetup { animation: none; opacity: 1; }
.meetup .faces { display: flex; flex: none; }
.meetup .faces .pic { width: 30px; height: 30px; border: 2px solid var(--ink); margin-left: -8px; }
.meetup .faces .pic:first-child { margin-left: 0; }
.meetup b { display: block; font: 600 15px/1.25 var(--display); }
.meetup .sub { color: color-mix(in srgb, var(--panel) 70%, transparent); font-size: 12.5px; }
.meetup .btn { background: var(--intro); border-color: var(--intro); color: #fff; }
.meetup .grow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; flex: 1 1 240px; }
.meetup .grow > div { flex: 1 1 200px; min-width: 0; }
.meetup.minvite { flex-direction: column; align-items: stretch; gap: 8px; padding: 11px 14px; }
.meetup .mi-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.meetup .mi-row .faces .pic { width: 27px; height: 27px; margin-left: -9px; }
.meetup .mi-row .faces .pic:first-child { margin-left: 0; }
@keyframes pin-in { 0% { opacity: 0; transform: scale(.2) translateY(-14px); } 60% { opacity: 1; transform: scale(1.1) translateY(0); } 100% { transform: none; } }
@keyframes glow { 0% { opacity: .7; transform: scale(.8); } 70% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes glow-h { 0% { opacity: .7; transform: scale(.8); } 70% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }

/* ---------- panels ---------- */

.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
h1 { margin: 0; font: 700 30px/1.04 var(--display); letter-spacing: -.02em; text-wrap: balance; }
h1 em { font-style: normal; color: var(--intro); }
.lead { margin: 0; color: var(--muted); font-size: 14px; max-width: 46ch; }

.search { position: relative; }
.search input.flash { border-color: var(--intro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--intro) 18%, transparent); }
.search input { width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--rule); background: var(--ground); padding: 0 12px 0 34px; }
.search svg { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; color: var(--faint); }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--panel-2); }
.tabs button { flex: 1; border: 0; background: transparent; height: 32px; border-radius: 8px; cursor: pointer; font: 600 13px/1 var(--display); color: var(--muted); transition: background .15s, color .15s; white-space: nowrap; }
.tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; cursor: pointer; font-size: 12.5px; color: var(--muted); transition: all .15s; }
.chip:hover { border-color: var(--muted); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.chip .n { font: 400 11px/1 var(--mono); opacity: .7; }
.section-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.section-h h2 { font: 600 13px/1.2 var(--display); letter-spacing: .02em; margin: 0; }
.section-h .meta { font: 400 12px/1 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
/* "How ranking works": a small button by the list title, and the card it opens (also on top of a maker's Points tab). */
.section-h .rules-btn { margin-right: auto; align-self: center; }
.rules-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); font: 500 12.5px/1 var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.rules-btn:hover, .rules-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--muted); }
.rules-btn svg { width: 14px; height: 14px; flex: none; }
.rcard { border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); padding: 14px 16px; display: grid; gap: 10px; margin: 10px 0 2px; }
.rcard .rc-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rcard .rc-h b { font: 600 15px/1.2 var(--display); }
.rcard .rc-x { border: 0; background: none; color: var(--faint); font-size: 20px; line-height: 1; cursor: pointer; width: 32px; height: 32px; margin: -8px -8px -8px 0; }
.rcard .rc-ts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rcard .rc-ts div { background: var(--panel-2); border-radius: 10px; padding: 9px 10px; display: grid; gap: 3px; align-content: start; }
.rcard .rc-ts b { font: 700 18px/1 var(--display); color: var(--intro); font-variant-numeric: tabular-nums; }
.rcard .rc-ts span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.rcard .rc-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.rcard .rc-f a { color: var(--ink); font-weight: 600; }
.linkish { background: none; border: 0; padding: 0; color: var(--muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.note { font-size: 12.5px; color: var(--muted); margin: 0; }
.note-mini { font-size: 12px; color: var(--faint); margin: 0; }

/* ---------- rows ---------- */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; align-items: center; padding: 10px 6px; border: 0; border-top: 1px solid var(--rule); background: transparent; text-align: left; width: 100%; cursor: pointer; border-radius: 10px; transition: background .15s; animation: fade-up .4s var(--ease) both; }
.row:first-child { border-top: 0; }
#chipsbox { display: contents; }
.row.skel { pointer-events: none; }
.row.skel .pic, .row.skel b, .row.skel .line { display: block; background: var(--panel-2); border-radius: 6px; }
.row.skel .pic { border-radius: 50%; }
.row.skel b { width: 45%; height: 13px; }
.row.skel .line { width: 80%; height: 11px; margin-top: 9px; }
.row:hover { background: var(--panel-2); }
.row[aria-current="true"] { background: var(--panel-2); }
.rk { font: 600 13px/1 var(--mono); color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
.row:nth-child(-n+3) .rk { color: var(--intro); }
.pic { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--panel-2); display: grid; place-items: center; color: #fff; font: 600 15px/1 var(--display); flex: none; }
.pic.sq { border-radius: 11px; }
.pic-wrap { position: relative; width: 40px; height: 40px; flex: none; }
.pic-wrap .badge { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--panel); background: var(--gold); display: grid; place-items: center; font-size: 8px; color: #1B1F24; }
.txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.txt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.txt .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txt .line { font-size: 12.5px; color: var(--ink); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.metric strong { font: 600 17px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.metric span { font: 400 10px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.metric .up { color: var(--live); font-weight: 600; font-size: 11px; }
.morepts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.morepts li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 10px; }
.morepts li i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--rule); display: grid; place-items: center; font: 700 10px/1 var(--mono); font-style: normal; color: #fff; }
.morepts li.done i { background: var(--live); border-color: var(--live); }
.morepts li b { font: 600 12.5px/1.2 var(--display); color: var(--intro); white-space: nowrap; font-variant-numeric: tabular-nums; }
.morepts li.done b { color: var(--ink); }
.morepts textarea { font: 400 12px/1.5 var(--mono); width: 100%; resize: vertical; }
.morepts li .pc { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 6px; }
.morepts .pc-acts, .morepts .pc-copy, .morepts .pc-badge { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.morepts .pc-copy code { font: 400 12.5px/1.3 var(--mono); padding: 6px 9px; border-radius: 8px; background: var(--ground); border: 1px solid var(--rule); overflow-wrap: anywhere; }
.morepts .pc-acts .hint { font-size: 12px; color: var(--muted); }
.morepts .pc-msg { margin: 0; font-size: 12.5px; color: var(--muted); }
.morepts .pc-msg.ok { color: var(--live); }
.morepts .pc-badge { margin-top: 8px; }
.bv { margin: 14px 0; padding: 16px; border-radius: 14px; border: 1px solid var(--rule); background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
.bv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bv-top b { font: 600 15.5px/1.3 var(--display); }
.bv-top span { font: 600 12.5px/1.2 var(--display); color: var(--intro); white-space: nowrap; }
.bv-img { max-width: 100%; height: auto; align-self: flex-start; }
.bv-code { display: flex; flex-direction: column; gap: 8px; }
.bv-code code, .bv-alt code { font: 400 12px/1.45 var(--mono); padding: 8px 10px; border-radius: 8px; background: var(--ground); border: 1px solid var(--rule); overflow-wrap: anywhere; display: block; }
.bv-alt summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.bv-alt[open] { display: flex; flex-direction: column; gap: 8px; }
.bv-alt .btn { align-self: flex-start; }
.bv-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bv-row input { flex: 1 1 200px; min-width: 0; font: 400 13px/1.3 var(--mono); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: 9px; padding: 8px 10px; }
.bv-site { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--gold) 12%, var(--panel)); }
.bv-site .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.bv-site.on { background: color-mix(in srgb, var(--live) 12%, var(--panel)); } .bv-site.on .dot { background: var(--live); }
.bv-site .d { font: 400 12.5px/1.3 var(--mono); overflow-wrap: anywhere; }
.bv-site .r { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.bv .hint, .morepts .hint { font-size: 12px; color: var(--muted); }
.morepts .pc-badge img { max-width: 100%; height: auto; }
.tag { font: 500 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 5px; border-radius: 4px; background: var(--panel-2); color: var(--muted); }
.more { width: 100%; height: 36px; border: 1px solid var(--rule); background: var(--ground); border-radius: 10px; cursor: pointer; color: var(--muted); }

/* ---------- featured (right) ---------- */
.live.static { cursor: default; }
.live:not(.static):hover { border-color: var(--muted); }
.rbtn.acct { border-color: color-mix(in srgb, var(--intro) 45%, var(--rule)); background: color-mix(in srgb, var(--intro) 7%, var(--panel)); color: var(--intro); font-weight: 600; text-decoration: none; flex: none; }
.vmark { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.16em; color: #3b82f6; flex: none; }
.vmark.u { color: #A7ADB4; }
.vbadge { display: inline-flex; vertical-align: -.16em; border-radius: 50%; cursor: help; }
.vbadge .vmark { vertical-align: 0; }
.vbadge:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.metric strong.wait { color: var(--faint); }
.rdiv { padding: 9px 10px; border-top: 1px solid var(--rule); background: var(--panel-2); font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.bcard { position: fixed; z-index: 60; width: 290px; max-width: calc(100vw - 24px); background: var(--ink); color: var(--panel); border-radius: 14px; padding: 14px 15px; font: 400 13px/1.45 var(--body); box-shadow: 0 12px 32px rgba(0,0,0,.25); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.bcard.on { opacity: 1; transform: none; pointer-events: auto; }
.bcard b.t { display: block; font: 600 14.5px/1.2 var(--display); margin-bottom: 4px; }
.bcard .m { display: block; opacity: .72; }
.bcard ul { margin: 10px 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bcard li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; }
.bcard li svg { width: 14px; height: 14px; margin-top: 3px; }
.bcard .cta { display: inline-flex; background: var(--intro); color: #fff; font: 600 13px var(--body); padding: 7px 12px; border-radius: 9px; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .bcard { transition: none; } }
.xsync { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 11px 5px 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); font-size: 12.5px; color: var(--muted); }
.xsync i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.claimcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 14px 0; padding: 16px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--intro) 45%, var(--rule)); background: color-mix(in srgb, var(--intro) 5%, var(--panel)); }
.claimcard > div > b { font: 600 16px/1.3 var(--display); }
@media (max-width: 560px) { .claimcard { grid-template-columns: 1fr; } }
.rbtn.prodlink { gap: 6px; text-decoration: none; color: var(--ink); border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); background: color-mix(in srgb, var(--gold) 9%, var(--panel)); font: 400 12px/1 var(--mono); flex: none; max-width: 100%; }
.rbtn.prodlink img { width: 15px; height: 15px; border-radius: 4px; object-fit: cover; flex: none; }
.rbtn.prodlink:hover { border-color: var(--gold); }
.prow { display: grid; grid-template-columns: 30px 44px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 10px; border-top: 1px solid var(--rule); cursor: pointer; transition: background .15s; animation: fade-up .4s var(--ease) both; }
.rows .prow:first-child { border-top: 0; }
.prow:hover { background: var(--panel-2); }
.prow .unv { font-size: 11px; letter-spacing: .02em; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.prow .pic.sq { width: 44px; height: 44px; border-radius: 11px; font-size: 18px; }
.prow .txt b { font: 600 15px/1.25 var(--display); }
.prow .txt .line { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prow .by { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.prow .by > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .by .pic { width: 16px; height: 16px; font-size: 8px; flex: none; }
.prow .right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; max-width: 150px; }
.tabs.sm { padding: 2px; border-radius: 9px; }
.psort { border: 0; background: transparent; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12px; color: var(--muted); cursor: pointer; }
.psort[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(27,31,36,.08); }
.pempty .rows { margin-top: 6px; background: var(--panel); }

/* ---------- person ---------- */
.back { align-self: flex-start; }
.profile { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.profile .pic { width: 64px; height: 64px; font-size: 24px; }
.profile :is(h1, h3) { margin: 0; font: 700 22px/1.1 var(--display); letter-spacing: -.015em; overflow-wrap: anywhere; }
/* The maker's name is the page's h1 (here, and .x-name on phones): drawn as before, without the h1's balanced lines. */
.profile h1, h1.x-name { text-wrap: wrap; }
.profile .handle { font: 400 12.5px/1.5 var(--mono); color: var(--muted); }
.profile .handle a { text-decoration: none; }
/* Manage: on a verified profile for the owner, and for anyone not logged in (who may be the owner: it logs them in). */
.profile.has-manage { grid-template-columns: 64px minmax(0, 1fr) auto; }
.profile .manage { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--ink); background: var(--ink); color: var(--panel); font: 600 13px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.profile .manage:hover { background: color-mix(in srgb, var(--ink) 85%, var(--panel)); }
.profile .manage svg { width: 14px; height: 14px; }
/* Social icons right of the name: X first, then what the maker filled in on /me (Profile, Your socials). */
.profile.has-soc { grid-template-columns: 64px minmax(0, 1fr) auto; }
.profile.has-soc.has-manage { grid-template-columns: 64px minmax(0, 1fr) auto auto; }
.psoc { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; max-width: 152px; }
.psoc a { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); display: grid; place-items: center; text-decoration: none; transition: border-color .15s, transform .15s var(--ease); }
.psoc a:hover { border-color: var(--ink); }
.psoc a:active { transform: scale(.94); }
.psoc svg { width: 16px; height: 16px; display: block; }
.psoc a.add { border-style: dashed; color: var(--muted); background: none; }
.psoc a.add:hover { border-color: var(--intro); color: var(--intro); }
.psoc a.add.wide { width: auto; display: inline-flex; gap: 6px; padding: 0 11px; font: 600 12.5px/1 var(--body); white-space: nowrap; }
.psoc a.add.wide svg { width: 13px; height: 13px; }
/* #view is the list column; when it's narrow (phones, small windows) the row drops under the handle. */
#view { container: view / inline-size; }
@container view (max-width: 520px) {
  .profile.has-soc .pic { grid-row: 1 / span 2; }
  .profile.has-soc .psoc { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; max-width: none; margin-top: -6px; }
  .psoc a { width: 34px; height: 34px; }
}
.where { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.pill { font: 500 10.5px/1 var(--mono); letter-spacing: .03em; padding: 3px 5px; border-radius: 4px; background: var(--panel-2); color: var(--muted); }
.faces { display: flex; align-items: center; gap: 8px; }
.faces .stack { display: flex; }
.faces .stack .pic { width: 28px; height: 28px; font-size: 11px; border: 2px solid var(--panel); margin-left: -8px; }
.faces .stack > :first-child { margin-left: 0; }
.faces span.t { font-size: 12.5px; color: var(--muted); }
.tweet { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; background: var(--ground); display: flex; flex-direction: column; gap: 8px; }
.tweet .ctx { font: 400 12px/1.3 var(--mono); color: var(--faint); }
.tweet .ctx.main { color: var(--intro); }
.tweet .body { white-space: pre-line; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.tweet .body a { color: var(--comment); text-decoration: none; }
.tweet .stats { display: flex; gap: 14px; flex-wrap: wrap; font: 400 12px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; align-items: center; }
.tweet .stats a { margin-left: auto; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
/* Profile: three numbers, the main buttons, then four tabs (personHtml). */
.pstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--rule); gap: 1px; }
.pstrip button { border: 0; background: var(--panel); text-align: left; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; font: inherit; color: inherit; }
.pstrip button:hover { background: var(--ground); }
.pstrip strong { font: 600 22px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pstrip strong.accent { color: var(--intro); }
.pstrip strong.wait { color: var(--faint); }
.pstrip span { font: 500 10px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.pstrip span.up { color: var(--live); }
.pcta .grow { flex: 1 1 auto; }
/* Sticky under the top bar: the column pads its content by --colpad, and sticky counts that padding, so the bar would stop --colpad short and let the content slide through the gap. Pull it back up by the same amount. */
.ptabs { position: sticky; top: calc(0px - var(--colpad, 0px)); z-index: 3; display: flex; gap: 2px; margin-top: 2px; background: var(--panel); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 12px 10px 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 600 14px/1 var(--display); color: var(--muted); cursor: pointer; white-space: nowrap; }
.ptabs button:first-child { padding-left: 2px; }
.ptabs button:hover { color: var(--ink); }
.ptabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.ptabs .n { font: 500 11px/1 var(--mono); color: var(--faint); }
.ptabs .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.ppanel { display: flex; flex-direction: column; gap: 16px; min-height: 240px; }
.ppanel > .about, .ppanel > .followers, .ppanel > .pfy, .ppanel > .mfind, .ppanel > .claimcard { margin: 0; }
.ppanel .xsync { margin-top: 0; }
.psec { display: flex; flex-direction: column; gap: 8px; }
.psec h4 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.psec h4 .up { color: var(--live); letter-spacing: 0; }
.phero { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pbig { font: 700 46px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pbig.wait { color: var(--faint); }
.psub { margin-top: 6px; font-size: 13px; color: var(--muted); }
.psub b { color: var(--ink); }
.ptoday { padding: 8px 12px; border-radius: 10px; text-align: right; background: color-mix(in srgb, var(--live) 12%, var(--panel)); color: var(--live); }
.ptoday b { display: block; font: 700 20px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ptoday span { font-size: 12px; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchips .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; color: var(--muted); }
.pchips .chip b { color: var(--ink); font-family: var(--display); }
.pl-chart { width: 100%; height: 96px; display: block; }
.pl-chart .grid { stroke: var(--rule); stroke-dasharray: 2 4; }
.pl-chart .line { fill: none; stroke: var(--live); stroke-width: 2; stroke-linejoin: round; }
.pl-chart .line.est { stroke-dasharray: 4 4; opacity: .6; }
.pchips .chip.rise { color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, var(--rule)); }
.pchips .chip.fall { color: var(--intro); }
.pl-chart .area { fill: color-mix(in srgb, var(--live) 11%, transparent); }
.pl-axis { display: flex; justify-content: space-between; gap: 8px; font: 400 11px/1.3 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
/* One bar, two uses: the points breakdown and the product-fit strength. Both used to be declared twice; this is what the
   two declarations added up to, so both bars look exactly as they did. */
.pbar { display: flex; gap: 2px; height: 12px; border-radius: 6px; background: var(--panel-2); margin-top: 8px; overflow: hidden; }
.pbar i { display: block; height: 100%; min-width: 3px; background: var(--intro); border-radius: 3px; }
.plegend > div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.plegend > div:first-child { border-top: 0; }
.plegend .sw { width: 10px; height: 10px; border-radius: 3px; }
.plegend .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.plegend .pc { font: 400 11px/1 var(--mono); color: var(--faint); text-align: right; }
.pfeed { display: flex; flex-direction: column; }
.pev { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--rule); }
.pfeed > .pev:first-child, .pday + .pev { border-top: 0; }
.pev .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--k); background: color-mix(in srgb, var(--k) 13%, var(--panel)); }
.pev .w { min-width: 0; }
.pev b { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.pev small { display: block; font-size: 12px; color: var(--muted); }
.pev small a, .pev small .linkish { color: inherit; font-size: 12px; }
.pev .plus { font: 500 13px/1.4 var(--mono); color: var(--live); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pday { display: flex; justify-content: space-between; padding: 14px 0 4px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--rule); }
.pday span:last-child { color: var(--live); }
.pmore { width: 100%; }
.psubhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.psubhead b { font: 600 17px/1.2 var(--display); }
.pfilters { display: flex; flex-wrap: wrap; gap: 6px; }
.pfilters button { border: 1px solid var(--rule); background: var(--panel); border-radius: 999px; padding: 5px 11px; font: 500 12px/1.2 var(--body); color: var(--muted); cursor: pointer; }
.pfilters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.pwait { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1.5px dashed color-mix(in srgb, var(--intro) 45%, var(--rule)); border-radius: 14px; background: color-mix(in srgb, var(--intro) 4%, var(--panel)); }
.pwait > b { font: 600 16px/1.3 var(--display); }
.psteps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: s; }
.psteps li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 13px; counter-increment: s; }
.psteps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--panel); display: grid; place-items: center; font: 500 11px/1 var(--mono); }
.tweet .stats .earned { color: var(--live); }
.preplies summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.preplies .stack-v { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.nfaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.nface { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.nface:hover { border-color: var(--muted); }
.nface .pic { width: 34px; height: 34px; flex: none; }
.nface > span { min-width: 0; }
.nface b, .nface small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nface b { font-size: 13px; font-weight: 600; }
.nface small { font-size: 12px; color: var(--muted); }
@media (max-width: 460px) { .pbig { font-size: 38px; } .pstrip strong { font-size: 19px; } .pstrip button { padding: 9px 10px; } .pcta .grow { flex: 1 1 auto; } .pcta .btn:not(.grow) { flex: 0 0 auto; } }
.showcase { border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--rule)); border-radius: 14px; overflow: hidden; background: var(--ground); display: flex; flex-direction: column; }
.showcase > .lbl, .pempty .lbl { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.showcase > .lbl { padding: 12px 14px 0; order: -1; }
/* A page built for someone who hasn't claimed it yet (api/stage.js drafts): the banner that says so. */
.dready { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--ink); color: var(--panel); }
.dready b { font: 600 15.5px/1.25 var(--display); display: block; }
.dready > div > span { font-size: 12.5px; color: rgba(255,255,255,.72); }
.dready .q { display: block; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 12.5px; color: rgba(255,255,255,.86); }
.dready .btn { height: 40px; padding: 0 16px; font-size: 14px; }
@media (max-width: 560px) { .dready { grid-template-columns: 1fr; } .dready .btn { width: 100%; } }
.pempty { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--intro) 45%, var(--rule)); background: color-mix(in srgb, var(--intro) 4%, var(--panel)); }
.pempty b { font: 600 16px/1.3 var(--display); }
.pempty p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.where .rbtn { height: 30px; font-size: 13.5px; cursor: pointer; }
.where .rbtn:hover { border-color: var(--ink); }
.showcase img.banner { width: 100%; aspect-ratio: 1.91; object-fit: cover; max-width: 100%; display: block; background: var(--panel-2); }
.showcase .in { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.showcase .ptitle { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.showcase .ptitle .pic { width: 44px; height: 44px; font-size: 18px; }
.showcase h4 { margin: 0; font: 700 17px/1.15 var(--display); }
.showcase .host { font: 400 12px/1.4 var(--mono); color: var(--muted); text-decoration: none; }
.showcase p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- claim ---------- */
.step { border: 1px solid var(--rule); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--ground); }
.grid2 { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start; }
.grid2 label { white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.pk { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); cursor: pointer; }
.pk b { font-size: 13.5px; font-weight: 600; } .pk span { font-size: 12px; color: var(--muted); }
.pk[aria-pressed="true"] { border-color: var(--intro); background: color-mix(in srgb, var(--intro) 7%, var(--panel)); }
.pk[aria-pressed="true"] b { color: var(--intro); }
.step .st { display: flex; align-items: center; gap: 10px; font: 600 13.5px/1.2 var(--display); }
.step .st .no { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--panel); display: grid; place-items: center; font: 600 11px/1 var(--mono); flex: none; transition: background .2s; }
.ai-draft .ai-lines { margin: 0; padding-left: 18px; line-height: 1.5; }
.ai-draft .actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.step[data-done="true"] .st .no { background: var(--live); color: #fff; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.field label i { font-style: normal; text-transform: none; letter-spacing: 0; }
.field input, .field textarea { width: 100%; border: 1px solid var(--rule); border-radius: 9px; background: var(--panel); padding: 9px 11px; font-size: 14px; resize: vertical; }
.field select { width: 100%; border: 1px solid var(--rule); border-radius: 9px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%235F6670' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center; padding: 9px 32px 9px 11px; font: inherit; font-size: 14px; color: var(--ink); appearance: none; -webkit-appearance: none; }
.field select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.field textarea { min-height: 150px; line-height: 1.45; }
.field .hint { font-size: 12px; color: var(--faint); }
.err { color: #C43F2A; font-size: 13px; margin: 0; }
/* Rules tab: five blocks. Numbers come from the board (RULES in lib/plugpoints.mjs). */
.rl { display: flex; flex-direction: column; gap: 26px; --deep: #D2461D; }
.rl .rl-h1 { margin: -8px 0 0; font: 700 32px/1.05 var(--display); letter-spacing: -.02em; }
.rl .rl-lead { margin: -14px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.rl-jump { display: flex; gap: 8px; flex-wrap: wrap; margin-top: -10px; }
.rl-jump button { font: 600 13px/1 var(--display); padding: 11px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
.rl-jump button.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.rl-btn { display: inline-flex; align-items: center; justify-content: center; font: 600 14px/1 var(--display); padding: 13px 18px; border-radius: 999px; border: 0; background: var(--deep); color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap; }
.rl-btn:hover { filter: brightness(.95); }
.rl-btn.ink { background: var(--ink); border-radius: 12px; }
.rl-btn.light { background: var(--panel); color: var(--ink); }
.rl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rl-st { background: var(--panel); border: 1px solid var(--rule); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.rl-st p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.rl-st p b { color: var(--ink); }
.rl-st.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.rl-st-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rl-st-top .pic { width: 40px; height: 40px; flex: none; }
.rl-who { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.rl-who b { font: 600 15px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-who span { font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rl-st.dark .rl-who span, .rl-st.dark .rl-of, .rl-st.dark .rl-tot small, .rl-st.dark .rl-legend { color: #B9BEC5; }
.rl-st-nums { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rl-st-nums > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.rl-rank { font: 700 50px/.9 var(--display); letter-spacing: -.03em; }
.rl-of { font-size: 14px; }
.rl-tot { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rl-tot b { font: 700 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.rl-tot small { font: 500 13px/1 var(--body); }
.rl-up { font: 500 12px/1 var(--mono); color: #6FD3A2; text-transform: uppercase; }
.rl-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: #2E343B; }
.rl-bar i { display: block; height: 100%; }
.rl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; }
.rl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rl-legend b { color: #fff; font: 600 13.5px/1.3 var(--display); }
.rl-legend em { width: 8px; height: 8px; border-radius: 2px; background: var(--c); display: inline-block; }
.rl-wait { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.rl-wait span { font: 700 42px/1 var(--display); letter-spacing: -.03em; color: var(--faint); font-variant-numeric: tabular-nums; }
.rl-st > .rl-btn { align-self: flex-start; }
.rl-h3 { font: 600 18px/1.25 var(--display); }
.rl-find { display: flex; gap: 8px; }
.rl-find input { flex: 1; min-width: 0; font: 400 15px/1 var(--body); padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--ground); color: var(--ink); }
.rl-small { font-size: 12.5px; color: var(--muted); }
.rl-sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.rl-eb { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rl-sec h2 { margin: -4px 0 2px; font: 600 23px/1.15 var(--display); letter-spacing: -.01em; }
.rl-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #ECECE8; border-radius: 12px; }
.rl-tabs button { font: 600 13.5px/1 var(--display); padding: 12px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.rl-tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(27,31,36,.08); }
.rl-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rl-steps li { background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.rl-steps li.on { border-color: #F0C9B8; }
.rl-steps li .rl-btn { margin-top: auto; align-self: flex-start; padding: 11px 14px; font-size: 13px; white-space: normal; text-align: left; }
.rl-steps i { font: 600 12px/1 var(--mono); font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; }
.rl-steps li.on i { background: var(--deep); }
.rl-steps b { font: 600 15px/1.2 var(--display); color: var(--ink); }
.rl-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rl-hero { background: #FDF1EC; border: 1px solid #F0C9B8; border-radius: 18px; padding: 18px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.rl-hero-l { display: flex; flex-direction: column; gap: 7px; }
.rl-hero-top { display: flex; align-items: center; gap: 8px; }
.rl-all { font: 700 34px/1 var(--display); letter-spacing: -.02em; }
.rl-math { background: var(--panel); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 5px; font: 400 12.5px/1.5 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.rl-math span:first-child { font: 400 12px/1.4 var(--body); }
.rl-math b { font: 700 22px/1.1 var(--display); color: var(--ink); }
.rl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rl-tile { background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; padding: 15px; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "ic tag" "t t" "n n" "d d" "x x"; gap: 7px 8px; align-content: start; }
.rl-tile .rl-ic { grid-area: ic; } .rl-tile .rl-tag { grid-area: tag; justify-self: end; align-self: center; } .rl-tile .rl-t { grid-area: t; } .rl-tile .rl-n { grid-area: n; } .rl-tile .rl-d { grid-area: d; } .rl-tile .rl-badge { grid-area: x; }
.rl-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--panel-2); color: var(--ink); display: grid; place-items: center; }
.rl-ic.o { background: var(--deep); color: #fff; }
.rl-tag { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); padding: 5px 8px; border-radius: 999px; white-space: nowrap; justify-self: start; }
.rl-tag.o { background: var(--panel); color: #9A3412; }
.rl-t { font: 600 15px/1.2 var(--display); }
.rl-n { font: 700 30px/1 var(--display); letter-spacing: -.02em; }
.rl-n small { font: 400 13px/1 var(--body); letter-spacing: 0; color: var(--muted); }
.rl-d { font-size: 13px; line-height: 1.45; color: var(--muted); }
.rl-badge { justify-self: start; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; border-radius: 9px; padding: 6px 10px 6px 8px; font: 600 11.5px/1.2 var(--display); }
.rl-badge i { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--intro); }
.rl-calc { background: var(--panel); border: 1px solid var(--rule); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.rl-calc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rl-calc-h b { font: 600 16px/1.2 var(--display); } .rl-calc-h span { font-size: 12.5px; color: var(--muted); }
.rl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 600 13px/1 var(--display); }
.rl-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; }
.rl-chips .k { background: var(--ink); color: #fff; } .rl-chips .c { background: #E6F2F4; color: #1F6A76; } .rl-chips .r { background: #E7F4EE; color: #17804F; } .rl-chips .l { background: #FBEDE8; color: #B03A14; } .rl-chips .p { color: var(--faint); padding: 0; }
.rl-crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.rl-crow b { font: 600 15px/1.3 var(--display); } .rl-crow em { font: 400 12px/1 var(--mono); font-style: normal; color: var(--muted); }
.rl-step { display: flex; align-items: center; gap: 6px; }
.rl-step button { width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 12px; background: var(--ground); font: 600 18px/1 var(--display); color: var(--ink); cursor: pointer; }
.rl-step output { min-width: 52px; text-align: center; font: 700 19px/1 var(--display); font-variant-numeric: tabular-nums; }
.rl-meet { align-self: flex-start; font: 600 13.5px/1 var(--display); padding: 13px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
.rl-meet.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rl-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 16px; }
.rl-sum span { font: 400 12.5px/1.6 var(--mono); color: #B9BEC5; } .rl-sum b { font: 700 30px/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; } .rl-sum small { font: 400 12px/1 var(--body); color: #B9BEC5; }
.rl-fair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rl-fair > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 13px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.rl-fair b { display: block; font: 600 14px/1.3 var(--display); color: var(--ink); }
.rl-fair i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--ink); }
.rl-fair i.b { background: #EAF1FE; color: #2563EB; } .rl-fair i.g { background: #E7F4EE; color: #17804F; } .rl-fair i.r { background: #FBEAE8; color: #B42318; }
.rl-faq { background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; }
.rl-faq details { padding: 15px 18px; border-top: 1px solid var(--rule); } .rl-faq details:first-child { border-top: 0; }
.rl-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; font: 600 15px/1.3 var(--display); }
.rl-faq summary::-webkit-details-marker { display: none; }
.rl-faq summary::after { content: "+"; color: var(--muted); } .rl-faq details[open] summary::after { content: "−"; }
.rl-faq p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.rl-end { background: var(--ink); color: #fff; border-radius: 20px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.rl-end > b { font: 600 19px/1.25 var(--display); } .rl-end > span { font-size: 14px; line-height: 1.5; color: #B9BEC5; }
.rl-end > div { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.rl-legal { display: flex; justify-content: center; gap: 18px; margin-top: -14px; font-size: 13px; }
.rl-legal a { color: var(--muted); text-decoration: none; padding: 6px 2px; } .rl-legal a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 520px) {
  .rl-steps, .rl-hero, .rl-tiles, .rl-fair { grid-template-columns: 1fr; }
  .rl-tile { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ic t n" "ic d n"; align-items: center; gap: 2px 12px; padding: 12px 14px; }
  .rl-tile .rl-tag, .rl-tile .rl-badge, .rl-tile .rl-n small { display: none; }
  .rl-tile .rl-n { font-size: 22px; text-align: right; }
  .rl-tile .rl-d { font-size: 12.5px; }
  .rl-rank { font-size: 42px; }
  .rl-st-top .rl-btn { width: 100%; }
}


/* ---------- map furniture ---------- */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.intro { background: var(--intro); } .dot.comment { background: transparent; box-shadow: inset 0 0 0 2px var(--comment); } .dot.gold { background: transparent; box-shadow: inset 0 0 0 2px var(--gold); }
/* The door to /search: one ink pill in the map's bottom-left corner, the corner nothing else uses (the Park chip and
   the zoom buttons hold the top row, the attribution the bottom-right). It is a link; nothing else on the page changes. */
.talkmap { position: absolute; left: 14px; bottom: 14px; z-index: 901; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13.5px/1 var(--body); text-decoration: none; white-space: nowrap; box-shadow: 0 8px 24px rgba(27,31,36,.28); transition: transform .15s var(--ease), filter .15s; }
.talkmap:hover { filter: brightness(1.15); transform: translateY(-1px); }
.talkmap:active { transform: scale(.97); }
.talkmap svg { width: 12px; height: 12px; color: var(--intro); }
.zoombtns { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; z-index: 900; }
.zoombtns button { width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer; font: 500 18px/1 var(--body); color: var(--ink); }
.zoombtns button + button { border-top: 1px solid var(--rule); }
.zoombtns button:hover { background: var(--panel-2); }
.mappill { display: none; position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 1000; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 6px 20px rgba(27,31,36,.22); cursor: pointer; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s; visibility: hidden; }
.mappill svg { width: 16px; height: 16px; }
/* Hidden is visibility: hidden too (after the fade), so Tab and VoiceOver skip it while it can't be seen (MM-248). */
.app.listfull .mappill { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.view { display: flex; flex-direction: column; gap: 16px; animation: fade .35s var(--ease) both; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .live .lt { display: none; } .live { padding: 0 10px 0 9px; } .topbar { gap: 8px; }
  .row .prod { display: none; }
  .rcta:has(.prodlink) .loc .pl { display: none; }
}
@media (max-width: 600px) { .prow { grid-template-columns: 22px 40px minmax(0, 1fr); } .prow .pic.sq { width: 40px; height: 40px; } .prow .right { grid-column: 3; flex-direction: row; align-items: center; justify-content: space-between; max-width: none; margin-top: 8px; } .prow .metric { flex-direction: row; align-items: baseline; gap: 5px; } }
@media (max-width: 900px) {
  .topbar { grid-template-columns: auto 1fr auto; padding: 0 12px; }
  .brand { justify-self: start; grid-column: auto; grid-row: auto; }
  .split { grid-template-columns: 1fr; }
  /* Phones: the map sits at the top of the scrolling list and stays put while the list slides up over it
     like a sheet. It is all native scrolling, so nothing resizes and nothing jumps. */
  .col { --colpad: 0px; padding: 0; gap: 0; }
  .col > .mapcol { position: sticky; top: 0; flex: none; height: 53vh; height: 53svh; border-left: 0; z-index: 0; }
  /* Pulling the sheet down grows the map; on release it settles at the small or the big size. */
  .col > .mapcol.snap { transition: height .32s var(--ease); }
  /* The list sheet overlaps the map by 18px, so 14px from the map edge would sit under it: 14px clear of the sheet, like the Park chip is from the top. */
  .talkmap { bottom: 32px; }
  /* Last on the tab, the pin card would scroll to a stop under the floating Map pill: leave room for it. */
  .pincard:last-child { margin-bottom: 56px; }
  .col > .mapcol .maplibregl-ctrl-bottom-right { bottom: 18px; }
  /* margin-top: the sheet overlaps the map by 18px; the meet card sits above that (.meetcard bottom: 30px). */
  .col > .view { flex: none; position: relative; z-index: 1; margin-top: -18px; padding: 20px 16px 40px; min-height: 100%; background: var(--panel); border-radius: 18px 18px 0 0; box-shadow: 0 -1px 0 var(--rule), 0 -10px 30px rgba(27,31,36,.08); }
  .col > .view::before { content: ""; align-self: center; width: 36px; height: 4px; margin: -8px 0 -4px; border-radius: 4px; background: var(--rule); }
  .mappill { display: inline-flex; }
  /* Phones are short on GPU memory: no endless glow per claimed pin, and no pins at all while the list covers the map. */
  .ppin.gold::before { display: none; }
  .app.mapcovered .maplibregl-marker { visibility: hidden; }
  /* Phones: the views and your profile live in the tab bar at the bottom, so the top bar keeps the logo and the one action.
     display: contents on .top-right lets the live count and the button sit in the same three columns as the logo,
     so the logo stays centred even when one of them is hidden. */
  .topbar { position: relative; grid-template-columns: 1fr auto 1fr; height: 56px; padding: 0 12px; }
  .top-right { display: contents; }
  .topbar .live { grid-column: 1; justify-self: start; }
  /* The logo sits in the middle of the screen, not in the middle of what is left over, so it stays centred
     whether or not the live count and the button are there. Both of them are shorter than half the gap it needs. */
  .topbar .brand { position: absolute; left: 50%; transform: translateX(-50%); font-size: 15px; }
  /* Room for the floating Map pill (78 px up, 44 px tall) plus a gap, so the last button on a page scrolls clear of it. */
  .col > .view { padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  .mappill { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .dc-note { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
/* Under 390px the wordmark would run into the button, so only the dot stays. */
@media (max-width: 389px) { .brand span.t { display: none; } }
/* ---------- phone tab bar ---------- */
.tabbar { display: none; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; padding: 6px 8px max(6px, calc(env(safe-area-inset-bottom, 0px) - 10px)); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-top: 1px solid var(--rule); }
.tabbar button { border: 0; background: transparent; display: grid; justify-items: center; gap: 3px; padding: 4px 0 2px; color: var(--muted); font: 500 11px/1.1 var(--body); cursor: pointer; min-width: 0; }
.tabbar .ic { width: 52px; height: 30px; display: grid; place-items: center; border-radius: 999px; transition: background .15s; }
.tabbar svg { width: 20px; height: 20px; }
.tabbar .lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar button[aria-current="true"] { color: var(--ink); font-weight: 600; }
.tabbar button[aria-current="true"] .ic { background: var(--panel-2); }
.tabbar .pic { width: 24px; height: 24px; font-size: 11px; box-shadow: 0 0 0 2px var(--panel); }
.tabbar button[aria-current="true"] .pic { box-shadow: 0 0 0 2px var(--ink); }
@media (max-width: 900px) { .tabbar { display: grid; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- launch film box (26 Sep 2026, one day) ---------- */
/* Launch film picture-in-picture: bottom right of the map, above the (i) button. */
.filmpip { position: absolute; right: 14px; bottom: 58px; z-index: 6; width: 296px; border-radius: 16px; overflow: hidden; background: #0A0A0B; color: #F6F5F2; box-shadow: 0 18px 44px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); display: block; animation: pipin .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pipin { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.filmpip .fp-v { position: relative; aspect-ratio: 16 / 9; background: #000; }
.filmpip video, .filmpip .fp-v img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.filmpip video { opacity: 0; transition: opacity .4s; }
.filmpip video.on { opacity: 1; }
.filmpip .fp-v::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); }
.filmpip .fp-live { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: rgba(10,10,11,.72); backdrop-filter: blur(6px); font: 600 11.5px/1 "Public Sans", system-ui, sans-serif; color: #F4A488; }
.filmpip .fp-live i { width: 7px; height: 7px; border-radius: 50%; background: #E4562A; animation: pipbeat 1.6s ease-out infinite; }
@keyframes pipbeat { 0% { box-shadow: 0 0 0 0 rgba(228,86,42,.7); } 70%, 100% { box-shadow: 0 0 0 7px rgba(228,86,42,0); } }
.filmpip .fp-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(10,10,11,.6); backdrop-filter: blur(6px); display: grid; place-items: center; transition: transform .15s; }
.filmpip:hover .play { transform: scale(1.08); background: #E4562A; }
.filmpip .fp-play svg { width: 18px; height: 18px; margin-left: 3px; fill: #fff; }
.filmpip .fp-dur { position: absolute; right: 10px; bottom: 9px; z-index: 2; font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; padding: 4px 6px; border-radius: 6px; background: rgba(0,0,0,.55); }
.filmpip .fp-cap { display: flex; align-items: center; gap: 10px; padding: 10px 12px 11px; }
.filmpip .fp-cap b { display: block; font: 700 15px/1.15 "Familjen Grotesk", system-ui, sans-serif; letter-spacing: -.01em; }
.filmpip .fp-cap small { display: block; margin-top: 2px; font: 400 12.5px/1.3 "Public Sans", system-ui, sans-serif; color: #9B9BA5; }
.filmpip .fp-cap .fp-go { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: #F6F5F2; color: #0A0A0B; font: 600 12.5px/1 "Public Sans", system-ui, sans-serif; }
.filmpip .fp-cap .fp-go svg { width: 12px; height: 12px; }
.filmpip .fp-x { position: absolute; right: 8px; top: 8px; z-index: 3; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(10,10,11,.72); backdrop-filter: blur(6px); color: #fff; font: 16px/26px system-ui; cursor: pointer; padding: 0; }
.filmpip .fp-x:hover { background: #fff; color: #0A0A0B; }
@media (max-width: 760px) {
  /* On phones it sits on top of the (i) button (the sheet covers the map below it); closing it shows (i) again. */
  .filmpip { width: 176px; right: 10px; bottom: 28px; border-radius: 13px; }
  .filmpip .fp-live { left: 7px; top: 7px; padding: 4px 7px; font-size: 10px; }
  .filmpip .fp-play { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .filmpip .fp-play svg { width: 14px; height: 14px; }
  .filmpip .fp-dur { display: none; }
  .filmpip .fp-cap { padding: 7px 9px 8px; }
  .filmpip .fp-cap b { font-size: 12.5px; }
  .filmpip .fp-cap small, .filmpip .fp-cap .fp-go { display: none; }
  .filmpip .fp-x { width: 22px; height: 22px; font-size: 13px; line-height: 22px; right: 6px; top: 6px; }
}
.filmpip .fp-a { display: block; color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .filmpip, .filmpip .fp-live i { animation: none; } }
/* ---------- click counts (lib/clicks.mjs): one number, the breakdown on hover or tap ---------- */
.clk { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--rule); background: var(--panel); font: 400 12px/1 var(--mono); color: var(--muted); cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; }
.clk b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.clk svg, .ptile-clk span svg { width: 12px; height: 12px; flex: none; color: var(--faint); }
.clk:hover, .clk[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.clk:hover svg, .clk[aria-expanded="true"] svg { color: var(--intro); }
.pstrip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pstrip button.ptile-clk[aria-expanded="true"] { background: var(--ground); }
.pstrip button.ptile-clk span { display: inline-flex; gap: 4px; align-items: center; }
.pstrip button.ptile-clk span svg { width: 10px; height: 10px; }
.bt-meta .clk { height: 24px; }
@media (max-width: 600px) { .prow .right { flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; } }
.clkpop { position: fixed; z-index: 5000; width: 300px; max-width: calc(100vw - 24px); padding: 12px 12px 11px; display: grid; gap: 10px; border-radius: 14px; border: 1px solid var(--rule); box-shadow: var(--shadow); background: color-mix(in srgb, var(--panel) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 13px/1.4 var(--body); color: var(--ink); opacity: 0; transform: translateY(-4px); transition: opacity .14s, transform .14s var(--ease); pointer-events: none; }
.clkpop.on { opacity: 1; transform: none; pointer-events: auto; }
.cp-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-h b { font: 700 14px/1.2 var(--display); margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-h .lbl { font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.cp-x { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; display: none; }
.cp-x:hover { background: var(--panel-2); }
.clkpop.pinned .cp-x { display: flex; }
.cp-t { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.cp-t > div { background: var(--panel); padding: 8px 8px 7px; display: grid; gap: 4px; min-width: 0; }
.cp-t strong { font: 600 17px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cp-t span { font: 500 9px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.cp-t > div.today strong { color: var(--intro); }
.cp-t.lg strong { font-size: 21px; }
.cp-t.lg > div { padding: 10px 10px 9px; }
.cp-f { display: flex; justify-content: space-between; gap: 8px; font: 400 10.5px/1.3 var(--mono); color: var(--faint); }
.cp-extra { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px solid var(--rule); }
.cp-extra b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cbars { display: grid; gap: 4px; }
.cbars .plot { position: relative; height: 54px; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 2px; align-items: end; border-bottom: 1px solid var(--rule); }
.cbars .plot i { display: block; min-height: 1px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--ink) 22%, var(--panel)); }
.cbars .plot i.t { background: var(--intro); }
.cbars .plot i.pk { background: color-mix(in srgb, var(--ink) 48%, var(--panel)); }
.cbars .plot .mx { position: absolute; left: 0; top: -2px; font: 400 9.5px/1 var(--mono); color: var(--faint); background: color-mix(in srgb, var(--panel) 85%, transparent); padding-right: 4px; }
.cbars .ax { display: flex; justify-content: space-between; font: 400 9.5px/1 var(--mono); color: var(--faint); }
.cbars.big .plot { height: 130px; gap: 3px; }
.cbars.big .plot i { border-radius: 3px 3px 0 0; }
.cbars.big .plot i:hover { background: var(--ink); }
.cbars.big .plot i.t:hover { background: color-mix(in srgb, var(--intro) 80%, var(--ink)); }
.cbars.big .plot .mx, .cbars.big .ax { font-size: 10.5px; }
.cbars .plot.empty { display: grid; place-items: center; grid-template-columns: 1fr; font: 400 11px/1 var(--mono); color: var(--faint); }
.myclk { display: grid; gap: 12px; border: 1px solid var(--rule); border-radius: 14px; padding: 14px 14px 12px; background: var(--panel); }
.myclk-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.myclk-h b { font: 700 16px/1.2 var(--display); margin-right: auto; }
.myclk .tabs.sm button { flex: none; padding: 0 12px; height: 28px; font-size: 12.5px; }
.myclk .readout { font: 400 11.5px/1.2 var(--mono); color: var(--muted); min-height: 14px; }
.myclk .readout b { color: var(--ink); font-weight: 500; }
.myclk-list { display: grid; border-top: 1px solid var(--rule); }
.myclk-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 54px); gap: 8px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--rule); font-size: 13px; }
.myclk-row:last-child { border-bottom: 0; }
.myclk-row.hd { font: 500 9.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding-block: 9px 7px; }
.myclk-row > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.myclk-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myclk-row .today { color: var(--intro); }
.myclk .note-mini { margin: 0; }
@media (max-width: 460px) { .myclk-row { grid-template-columns: minmax(0, 1fr) repeat(4, 42px); gap: 4px; font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .clkpop { transition: none; } }

/* ---------- The rework's look, as drawn in the plan (1 Oct 2026): search, chips, tabs, the feed, Top products ---------- */
/* Search: the MakerMap dot on the left, ✦ "ask the map" on the right. */
.x-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--intro); box-shadow: 0 0 0 4px color-mix(in srgb, var(--intro) 18%, transparent); flex: none; justify-self: center; }
.xask { width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--intro); cursor: pointer; }
.xask svg { width: 18px !important; height: 18px !important; color: var(--intro) !important; }
.tsearch { padding: 0 6px 0 16px; gap: 10px; }
/* The online pill (1 Oct 2026): in the top bar on desktop, in the list on phones. Built by by the title or the count. */
.td-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
.td-pitch .builtby b { font: 600 12px/1 var(--body); }
.td-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-live { height: 28px; background: var(--panel); }
@media (min-width: 901px) { .td-live { display: none !important; } }
@media (max-width: 900px) { .td-top { display: grid; justify-content: start; } }
/* Chips: white, bold; the picked one ink. */
.xchip { border: 0; font-weight: 600; box-shadow: 0 1px 6px rgba(27,31,36,.16); }
.xchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.xchip[aria-pressed="true"]:hover { border-color: var(--ink); }
/* The meetups are a chip and a feed section: no second "N meetups coming up" pill on the map. */
#mt-mapchip { display: none !important; }
/* Phones: the tab you're on is a soft orange pill with an orange icon. */
.tabbar button[aria-current="true"] .ic { background: color-mix(in srgb, var(--intro) 14%, var(--panel)); color: var(--intro); }
/* Section heads as in the design: a big title, its note under it or on the right. */
.x-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.x-sh :is(h1, h2) { margin: 0; font: 700 20px/1.15 var(--display); letter-spacing: -.01em; }
.x-sh h1 { text-wrap: wrap; } /* a tab's title (Makers, Products, Meetups, Community) is its page's h1 */
.x-sh .mview, .x-sh > div > span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.x-sh .builtby { margin-top: 8px; }
.x-sh .rules-btn { flex: none; width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
.x-sh .rules-btn svg { width: 16px; height: 16px; }
/* Today on the map */
.today { gap: 20px; }
.td-top { display: grid; gap: 6px; }
.td-top h2 { font: 700 22px/1.15 var(--display); letter-spacing: -.01em; }
.h-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.h-sh h2 { margin: 0; font: 700 19px/1.2 var(--display); letter-spacing: -.01em; }
.h-sh span { font-size: 12.5px; color: var(--faint); text-align: right; }
.td-sec { gap: 12px; }
.h-scroll { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -26px; padding: 2px 26px 4px; scroll-padding: 0 26px; }
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; }
/* A computer: a sideways row's cut-off side fades, with a round ‹ or › that scrolls it (hsWrap). None on phones. */
.hs-wrap { position: relative; min-width: 0; }
.hs-btn { display: none; }
@media (min-width: 901px) {
  .hs-btn:not([hidden]) { display: grid; place-items: center; position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; margin-top: -18px; padding: 0; border-radius: 50%; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(27,31,36,.12); cursor: pointer; }
  .hs-btn:hover { border-color: var(--muted); }
  .hs-btn.l { left: 6px; } .hs-btn.r { right: 6px; }
  .hs-wrap.fr > :first-child { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); }
  .hs-wrap.fl > :first-child { -webkit-mask-image: linear-gradient(to right, transparent, #000 72px); mask-image: linear-gradient(to right, transparent, #000 72px); }
  .hs-wrap.fl.fr > :first-child { -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent); }
}
.h-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 4px; }
.h-grid > .h-tc { width: auto; }
.h-all { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; width: 100%; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--ink); font: 600 14px/1 var(--body); cursor: pointer; }
.h-all:hover { background: color-mix(in srgb, var(--ink) 7%, var(--panel-2)); }
a.h-all { text-decoration: none; }
.x-city { color: var(--intro); font-weight: 600; text-decoration: none; white-space: nowrap; }
/* Trending: the maker's photo as the card's picture, the quote on it. */
.h-tc { flex: none; width: 262px; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--intro) 7%, var(--panel)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.h-tc-img { position: relative; display: block; height: 170px; flex: none; }
.h-tc-img > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.h-tag { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--panel); font: 600 12px/1 var(--body); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.h-tag svg { color: var(--intro); }
.h-q { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 5px; padding: 9px 11px; border-radius: 14px; background: rgba(255,255,255,.93); color: #1B1F24; }
.h-q b { font: 600 13.5px/1.3 var(--display); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.h-q > span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #5F6670; }
.h-q .pic { width: 20px; height: 20px; font-size: 9px; }
.h-tc-b { display: grid; gap: 3px; padding: 11px 13px 13px; }
.h-tc-b > b { font: 700 17px/1.2 var(--display); }
.h-tc-b > span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-tc-b .accent { color: var(--intro); } .h-tc-b .up { font-style: normal; color: var(--live); font-weight: 600; } .h-clk { color: var(--ink); font-weight: 600; }
/* Rows: face, name and a line, something on the right. */
.h-rows { display: grid; gap: 14px; }
.h-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.h-row > .pic, .h-trav .pic { width: 44px; height: 44px; font-size: 16px; }
.h-row > .pic.sq { border-radius: 12px; }
.h-rt { min-width: 0; } .h-rt b { display: block; font: 600 15px/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-rt > span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-up { display: grid; gap: 3px; text-align: right; font: 600 15px/1 var(--display); color: var(--live); }
.h-up em { font: 500 12px/1 var(--mono); font-style: normal; color: var(--intro); }
.h-row .btn.sm { height: 32px; }
.h-trav { position: relative; width: 44px; height: 44px; }
.h-trav i { position: absolute; right: -4px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); font-style: normal; font-size: 11px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.h-clks { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px; border: 1px solid var(--rule); border-radius: 10px; font: 400 12.5px/1 var(--mono); color: var(--muted); white-space: nowrap; } .h-clks b { color: var(--ink); font-weight: 600; }
/* Meetups: cards with the date big. */
.h-mc { flex: none; width: 210px; display: grid; gap: 6px; align-content: start; padding: 13px 14px; border: 0; border-radius: 16px; background: var(--panel-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.h-mc > b { font: 600 15px/1.25 var(--display); } .h-mc > span { font-size: 12.5px; color: var(--muted); }
.h-md { display: flex; align-items: baseline; gap: 6px; }
.h-md b { font: 700 30px/1 var(--display); } .h-md span { font: 500 15px/1 var(--display); color: var(--muted); }
.h-mtag { margin-left: auto; align-self: center; padding: 5px 7px; border-radius: 6px; font: 500 11px/1 var(--mono); font-style: normal; white-space: nowrap; }
.h-mtag.ok { background: color-mix(in srgb, var(--live) 16%, var(--panel)); color: #17744D; }
.h-mtag.y { background: color-mix(in srgb, var(--gold) 20%, var(--panel)); color: #7A5A07; }
/* New on the map: four faces. */
.h-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.h-faces button { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.h-faces .pic { width: 56px; height: 56px; margin-bottom: 4px; font-size: 20px; }
.h-faces b { max-width: 100%; font: 600 13px/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-faces span { max-width: 100%; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lists: tinted cards with four photos. */
.h-lc { flex: none; width: 236px; display: grid; gap: 4px; align-content: start; padding: 14px 14px 13px; border-radius: 18px; background: var(--lc); color: #1B1F24; text-decoration: none; }
.h-lc > b { font: 700 17px/1.2 var(--display); } .h-lc > span { font-size: 12.5px; color: #5F6670; }
.h-lg { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
.h-lg .pic { width: 100%; height: 76px; border-radius: 10px; object-fit: cover; font-size: 22px; }
/* Boats */
.h-boat { display: grid; grid-template-columns: 26px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 14px; background: color-mix(in srgb, var(--comment) 10%, var(--panel)); color: var(--comment); text-decoration: none; }
.h-host { background: color-mix(in srgb, var(--intro) 9%, var(--panel)); color: var(--intro); margin-top: 10px; }
/* MakerMap in Claude on Explore (claudeRowHtml): the Host a meetup row, with a ✕ where the arrow is. */
.cl-row { grid-template-columns: 26px minmax(0, 1fr) 24px; margin: 14px 0 4px; } .cl-row > a { color: inherit; text-decoration: none; min-width: 0; } .cl-row > a > span { display: block; font-size: 12.5px; color: var(--muted); }
.cl-x { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 2px; cursor: pointer; justify-self: end; border-radius: 6px; }
.h-boat b { display: block; font: 600 14.5px/1.25 var(--display); color: var(--ink); } .h-boat > span > span { font-size: 12.5px; color: var(--muted); }
/* The product's picture on its page (Overview). */
.x-pc-img { display: block; max-width: 520px; aspect-ratio: 1.91; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--panel-2); }
.x-pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Products directory (8 Oct 2026): search, sorts and category chips over a grid of tiles; rows on phones. */
#plist .pd-tools { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.pd-search { position: relative; flex: 1; min-width: 0; display: block; }
.pd-search input { width: 100%; height: 40px; border: 1px solid var(--rule); border-radius: 999px; padding: 0 14px 0 36px; font: 15px var(--body); background: var(--panel); color: var(--ink); }
.pd-search input:focus { border-color: var(--muted); }
.pd-search svg { position: absolute; left: 13px; top: 12px; width: 16px; height: 16px; color: var(--faint); }
/* Ask in plain words: the magnifier on the left, the ✦ on the right in orange, like Explore's search bar (11 Oct 2026). */
.pd-ask input { padding-right: 38px; }
@media (max-width: 480px) { .pd-ask input { font-size: 14px; } }
.pd-search .pd-ai { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); display: grid; pointer-events: none; }
.pd-search .pd-ai svg { position: static; width: 18px; height: 18px; color: var(--intro); }
.pd-sort { flex: none; }
.pd-sort button { flex: none; padding: 0 12px; height: 32px; font-size: 12.5px; }
.pd-chips { margin-top: 12px; }
.pd-chips .chip { text-decoration: none; }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.pd-tile { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--intro) 7%, var(--panel)); color: var(--ink); text-decoration: none; cursor: pointer; min-width: 0; }
.pd-tile:hover { background: color-mix(in srgb, var(--intro) 11%, var(--panel)); }
.pd-tile:focus-visible { outline: 2px solid var(--intro); outline-offset: 2px; }
.pd-tile.found { background: var(--panel-2); }
.pd-img { position: relative; display: block; aspect-ratio: 1.91; background: var(--panel-2); }
.pd-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-logo { position: absolute; left: 12px; bottom: -16px; }
.pd-logo .pic { width: 36px; height: 36px; border-radius: 10px; background: var(--panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--intro) 7%, var(--panel)); object-fit: contain; font-size: 15px; }
.pd-img:not(:has(> img)) { display: grid; place-items: center; }
.pd-img:not(:has(> img)) .pd-logo { position: static; }
.pd-img:not(:has(> img)) .pd-logo .pic { width: 56px; height: 56px; border-radius: 14px; font-size: 22px; box-shadow: none; }
.pd-b { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 22px 13px 12px; min-width: 0; }
.pd-img:not(:has(> img)) + .pd-b { padding-top: 12px; }
.pd-b > b { font: 700 16px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-t { font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 36.4px; flex: none; }
.pd-by { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); min-width: 0; margin-top: 2px; }
.pd-by > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-by .pic { width: 18px; height: 18px; font-size: 8px; flex: none; }
.pd-f { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; min-height: 28px; }
.pd-rk { font: 600 12.5px/1 var(--mono); color: var(--intro); margin-right: auto; }
.pd-f .unv { font-size: 11px; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px; margin-right: auto; }
.pd-f .clk { height: 28px; }
.pd-div { grid-column: 1 / -1; padding: 10px 2px 0; font: 600 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
@media (max-width: 900px) {
  #plist .pd-tools { flex-direction: column; align-items: stretch; }
  .pd-sort { overflow-x: auto; scrollbar-width: none; }
  .pd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .pd-chips .chip { flex: none; }
  /* A phone lists rows: logo, name, a line, the maker, and the rank with the clicks. */
  .pd-grid { grid-template-columns: 1fr; gap: 0; margin-top: 10px; }
  .pd-tile, .pd-tile.found { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-radius: 0; background: none; border-top: 1px solid var(--rule); }
  .pd-tile:hover { background: none; }
  .pd-img, .pd-img:not(:has(> img)) { display: block; aspect-ratio: auto; background: none; }
  .pd-img > img { display: none; }
  .pd-logo, .pd-img:not(:has(> img)) .pd-logo { position: static; }
  .pd-logo .pic, .pd-img:not(:has(> img)) .pd-logo .pic { width: 44px; height: 44px; border-radius: 11px; font-size: 18px; box-shadow: none; background: var(--panel-2); }
  .pd-b, .pd-img:not(:has(> img)) + .pd-b { padding: 0; gap: 2px; }
  .pd-t { -webkit-line-clamp: 1; height: auto; }
  .pd-f { padding-top: 2px; min-height: 0; }
  .pd-f .clk { height: 24px; }
  .pd-div { padding: 14px 0 6px; }
}
.x-acts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -26px; padding: 0 26px; }
.x-acts::-webkit-scrollbar { display: none; }
.x-act { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--intro) 9%, var(--panel)); color: var(--ink); font: 600 13px/1 var(--body); text-decoration: none; cursor: pointer; }
.x-act svg { color: var(--intro); }
.x-act:hover { background: color-mix(in srgb, var(--intro) 15%, var(--panel)); }
.x-acts .clk { height: 36px; }
@media (max-width: 900px) {
  .xsearch { grid-template-columns: 22px minmax(0, 1fr) 32px 36px !important; }
  /* On a phone a maker's row is the name, a line and the points: the place, style and product chips are on their page. */
  #mlist .row .rcta { display: none; }
  .h-scroll { margin: 0 -16px; padding: 2px 16px 4px; scroll-padding: 0 16px; }
  .h-tc { width: 250px; }
  .x-acts { margin: 0 -16px; padding: 0 16px; }
}

/* ---------- The rework as drawn, part 2 (1 Oct 2026): the maker sheet and page ---------- */
/* Their products as the photos: one big, two stacked. */
.x-gal { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; height: 210px; }
.x-gal.one { grid-template-columns: 1fr; }
.x-gal .x-g2 { display: grid; grid-auto-rows: 1fr; gap: 6px; min-height: 0; }
.x-gal a { position: relative; display: block; min-height: 0; height: 100%; border-radius: 14px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--rule); }
.x-gal .x-g1 { min-height: 0; }
/* contain, not cover (14 Oct 2026): a wide share image cropped to the tile cut its headline ("ou post."); the whole image
   shows, on the tile's own background. */
.x-gal img { width: 100%; height: 100%; object-fit: contain; display: block; }
.x-gal span { position: absolute; left: 8px; bottom: 8px; padding: 4px 7px; border-radius: 6px; background: rgba(27,31,36,.8); color: #fff; font: 500 11px/1 var(--mono); }
.pmain .x-gal { height: 280px; margin-top: 4px; }
/* Why you two should meet: a soft orange card, a line per thing you share. */
.whymeet { background: color-mix(in srgb, var(--intro) 6%, var(--panel)); border: 0; }
.whymeet.out { background: color-mix(in srgb, var(--intro) 6%, var(--panel)); }
.x-why { gap: 2px; }
.x-why-h { display: flex; align-items: center; gap: 8px; color: var(--intro); margin-bottom: 4px; }
.x-why-h b { color: var(--ink); font: 600 15px/1.2 var(--display); }
.x-wl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 14px; }
.x-wl + .x-wl { border-top: 1px solid color-mix(in srgb, var(--intro) 12%, var(--rule)); }
.x-wl.hot { color: var(--intro); font-weight: 600; }
/* Say hi on X: the button, the post it writes (a chat bubble) with the reason chips, and the X icon in rows. */
.pcta .dmbtn { justify-content: center; } .pcta .dmbtn svg, .dm-say .btn svg { flex: none; }
.pcta .savebtn.sub { flex: none; }
/* Why you two should meet, as a card of its own (the Google Maps "Know before you go" box), then the ways to meet. */
.wm-stack { display: grid; gap: 12px; } .wm-stack:empty { display: none; }
.wm-card { display: grid; gap: 6px; padding: 16px 18px 12px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--intro) 9%, var(--panel)), var(--panel) 96%); }
.wm-h { display: flex; align-items: center; gap: 10px; color: var(--intro); }
.wm-h b { color: var(--ink); font: 600 17px/1.2 var(--display); }
.wm-faces { margin-left: auto; display: flex; }
.wm-faces .pic { width: 26px; height: 26px; border: 2px solid var(--panel); }
.wm-faces .pic + .pic { margin-left: -8px; }
.wm-sub { margin: 0 0 2px; font-size: 13px; color: var(--muted); }
.wm-list { margin: 0; padding: 0 0 0 18px; display: grid; }
.wm-list li { padding: 7px 0; font-size: 15px; line-height: 1.4; }
.wm-list li::marker { color: var(--muted); }
.wm-list li.hot { font-weight: 600; }
.wm-say { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--panel-2); }
.wm-st { font: 600 16px/1.2 var(--display); }
.wm-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.wm-ctas .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); }
.wm-ctas .btn.best { border-color: var(--intro); color: var(--intro); }
.wm-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
/* The Say hi sheet: the post, the DM me switch, Post on X. */
.signin.hisheet .si-sheet { width: min(500px, 100%); display: grid; gap: 14px; }
.hi-post { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px; border-radius: 14px; background: var(--panel-2); }
.hi-post .pic { width: 32px; height: 32px; }
.hi-post q { quotes: none; white-space: pre-line; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
/* The words next to your photo; with no photo of yours (not on the map yet), across the whole card. */
.hi-post > q { grid-column: 2; }
.hi-post > q:only-child { grid-column: 1 / -1; }
.wm-url { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--muted); font-size: 13px; }
.hi-acts { display: grid; gap: 8px; }
.hi-acts .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.rdm { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); color: var(--ink); cursor: pointer; }
.rdm:hover, .rdm:focus-visible { background: color-mix(in srgb, var(--intro) 14%, var(--panel)); color: var(--intro); }
.h-trow { display: flex; align-items: center; gap: 8px; } .h-trow .h-row { flex: 1 1 auto; min-width: 0; }
.h-trow .dmtrip { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.sx-row:has(.rdm) { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
.nface .rdm { margin-left: auto; width: 28px; height: 28px; }
/* The sheet's head (phones). */
.x-mh { display: flex; justify-content: space-between; gap: 8px; }
.x-mh-t { display: flex; gap: 12px; align-items: center; min-width: 0; }
.x-mh-t > .pic, .x-mh-t > .pic-wrap .pic { width: 64px; height: 64px; font-size: 24px; flex: none; }
.x-name { display: block; font: 700 22px/1.12 var(--display); letter-spacing: -.015em; }
.x-name .vbadge { vertical-align: -2px; }
.x-meta { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); }
.x-meta .accent { color: var(--intro); font-weight: 600; } .x-meta .up { color: var(--live); } .x-meta .wait { color: var(--muted); font-weight: 600; }
.x-icons { display: flex; gap: 6px; flex: none; align-self: flex-start; }
.mh-i { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--ink); cursor: pointer; text-decoration: none; }
.mh-q { margin: 0; font: 600 15px/1.4 var(--display); }
.mh-acts:empty { display: none; }
.x-act.on { background: var(--panel-2); }
.x-act.main { background: var(--intro); color: #fff; } .x-act.main svg { color: #fff; }
.mh-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) {
  /* The sheet: claim banner compact, the button beside the words. */
  .dready { grid-template-columns: minmax(0, 1fr) auto !important; }
  .dready .btn { width: auto !important; }
  .x-gal { height: 200px; }
}
/* Invite them (an unclaimed page, seen by another maker): a dashed card, the button dark. */
.inviteban { border-style: dashed !important; background: color-mix(in srgb, var(--intro) 5%, var(--panel)); }
.inviteban .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--panel); }

/* ---------- The rework as drawn, part 3 (1 Oct 2026): You, Contribute, and logged out ---------- */
.x-h { margin: 0 0 4px; font: 700 26px/1.1 var(--display); letter-spacing: -.02em; align-self: flex-start; }
.you-out .x-h { text-align: left; width: 100%; }
/* You: the gear on the right of your name. */
.you-top { position: relative; }
.you-gear { margin-left: auto; width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--ink); cursor: pointer; }
.you-nm { display: block; font: 700 17px/1.2 var(--display); }
/* Find my matches: the soft orange card, the icons orange, one line each. */
.you-fm { background: color-mix(in srgb, var(--intro) 6%, var(--panel)); border: 0; }
.you-fm .gc-h { display: flex; align-items: center; gap: 8px; } .you-fm .gc-h svg { color: var(--intro); }
.you-fm .fym-s { display: none; }
.you-fm .fym-opt { min-height: 52px; padding: 9px 12px; background: var(--panel); }
.you-fm .fym-opt:first-child { border-color: var(--intro); box-shadow: 0 0 0 1px var(--intro); }
.you-fm .fym-ic { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--intro) 12%, var(--panel)); color: var(--intro); }
.you-fm .fym-t { font-size: 14px; }
.you-acts .btn { flex: 1; }
.you-tiles .you-tile b { font: 600 15px/1.2 var(--display); }
/* Contribute */
.gc-nextbar { grid-template-columns: auto minmax(0, 1fr) auto; }
.gc-nextbar .gc-eb { color: var(--intro); display: grid; place-items: center; }
.gc-nextbar em:empty { display: none; }
.gc-today { padding: 12px 14px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--live) 10%, var(--panel)); }
.gc-today b.up { font: 700 16px/1.2 var(--display); }
.gc-link .ic-link code { flex: 1; min-width: 0; }
.gc-link .ic-link .btn.x { flex-basis: 100%; justify-content: center; }
.gc-new { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 2px 6px; border-radius: 5px; background: color-mix(in srgb, var(--intro) 10%, var(--panel)); color: var(--intro); font: 600 10px/1.3 var(--mono); font-style: normal; text-transform: uppercase; vertical-align: 1px; }
.gc-new::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--intro); }
/* Logged out: one face in the middle with its rank, the others around, the pin under it; a white page. */
body:has(.you-out), :is(#scroll, #view, .col, main):has(.you-out) { background: var(--panel) !important; }
.you-out { text-align: center; }
.you-out .note-mini .linkish { color: var(--intro); font-weight: 600; text-decoration: none; }
.you-art { width: 280px; height: 200px; }
.you-mid { position: absolute; left: 50%; top: 22px; width: 88px; height: 88px; margin-left: -44px; }
.you-mid .pic { position: static; width: 88px; height: 88px; font-size: 30px; box-shadow: 0 0 0 3px var(--intro), 0 6px 18px rgba(27,31,36,.2); }
.you-mid i { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 2px 6px; border-radius: 6px; background: var(--ink); color: #fff; font: 600 11px/1.2 var(--mono); font-style: normal; }
.you-art .you-pin { top: 152px; }
.you-art > .pic { width: 44px; height: 44px; }

/* ---------- The rework as drawn, part 4 (1 Oct 2026): search ---------- */
/* The box: grey, flat; ✦ while empty, × once you type. */
.xs-spark { display: grid; place-items: center; color: var(--intro); }
#sxq:placeholder-shown ~ .xs-clear { display: none; }
#sxq:not(:placeholder-shown) ~ .xs-spark { display: none; }
/* Ours is the only ×: Android Chrome draws its own small blue one in a search box too. */
#sxq::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
@media (max-width: 900px) { .xs-top { background: var(--panel-2) !important; box-shadow: none !important; } }
/* Filters: outlined chips, the picked one ink. */
.xs .xchip { border: 1px solid var(--rule); background: var(--panel); box-shadow: none; }
.xs .xchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
/* Shortcuts side by side: an icon in a circle, a title, a line. */
.sx-shorts .sx-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.sx-shorts .sx-it { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 6px 4px; }
.sx-shorts .sx-it b { font-size: 13.5px; } .sx-shorts .sx-it small { font-size: 11.5px; white-space: normal; line-height: 1.25; }
.sx-shorts .sx-it:nth-child(2) > :first-child { background: var(--intro); color: #fff; }
/* Suggestions: ↖ puts it in the box; "Ask the map about …" in orange. */
.sx-list .sx-it:has(small):not(.sx-shorts *) { grid-template-columns: 36px minmax(0, 1fr) 16px; }
.sx-list .sx-it:has(small):not(.sx-shorts *)::after { content: "↖"; color: var(--faint); font-size: 15px; justify-self: end; }
.sx-it.ask:has(small) b { color: var(--intro); }
/* Results: plain rows. */
.sx-plain { border: 0 !important; background: none !important; border-radius: 0 !important; }
.sx-plain .sx-row { padding-left: 0; padding-right: 0; }
/* Maker rows: one row each; the maker's page has Say hi and Follow (4 Oct 2026). */
.sx-item { display: grid; border-top: 1px solid var(--rule); }
.sx-item:first-child { border-top: 0; }
.sx-item > .sx-row { border-top: 0; }
/* Search: the place filter as a removable chip in the results header; the labelled sections under it. */
.sx-res .sx-pl { height: 30px; margin-top: 8px; padding: 0 10px 0 12px; gap: 6px; border: 1px solid var(--rule); box-shadow: none; font-size: 13px; }
.sx-res .sx-pl .sx-plx { color: var(--faint); font-size: 12px; margin-left: 2px; }
.sx-res .sx-look { display: block; margin-top: 4px; color: var(--intro); }
.sx-res .sx-pl:hover .sx-plx { color: var(--ink); }
.sx-res .sx-sub { margin: 6px 0 -6px; }
.sx-none { margin: 6px 6px 2px; }

/* ---------- The rework as drawn, part 5 (1 Oct 2026): a product's reviews ---------- */
.rvsheet .rv-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; }
.rvsheet .rv-head { grid-template-columns: 56px minmax(0, 1fr); align-items: start; padding-right: 44px; }
.rvsheet .rv-head .pic { width: 56px; height: 56px; border-radius: 14px; }
.rvsheet .rv-head h3 { font: 700 22px/1.15 var(--display); }
.rv-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 3px 0 2px; font-size: 13.5px; color: var(--muted); } .rv-sub b { color: var(--ink); }
.rvst { display: inline-flex; gap: 1px; vertical-align: -2px; }
.rv-tabs { position: static; margin: 12px 0 0; }
.rv-body { display: grid; gap: 14px; padding-top: 14px; }
.rv-ov { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
/* The spread of stars. */
.rv-hist { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.rv-big { display: grid; justify-items: center; gap: 4px; } .rv-big b { font: 700 38px/1 var(--display); } .rv-big small { font-size: 12.5px; color: var(--muted); }
.rv-bars { display: grid; gap: 5px; } .rv-bars span { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; align-items: center; font: 500 11.5px/1 var(--mono); color: var(--muted); }
.rv-bars i { font-style: normal; } .rv-bars em { display: block; height: 8px; border-radius: 99px; background: var(--panel-2); overflow: hidden; } .rv-bars u { display: block; height: 100%; background: #D9A21B; border-radius: 99px; }
/* Rate and review: one tap on a star. */
.rv-rate { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.rv-rate > .pic { width: 40px; height: 40px; } .rv-rate b { font: 600 15px/1.2 var(--display); }
.rv-rstars { display: flex; gap: 2px; } .rv-rstars button { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
/* The reviews. */
.rv-list { margin-top: 0; }
.rv-row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.rv-row > .pic { width: 40px; height: 40px; }
.rv-rh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.rv-rh b { font: 600 15px/1.2 var(--display); }
.rv-use { padding: 4px 7px; border-radius: 6px; background: color-mix(in srgb, var(--live) 12%, var(--panel)); color: #17744D; font: 500 11px/1 var(--mono); font-style: normal; text-transform: uppercase; white-space: nowrap; }
.rv-rs { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .rv-rs small { margin: 0 !important; }
.rv-row p { font-size: 14.5px; }
/* Writing one: its own screen, Post top right. */
.rvsheet.rv-writing .si-sheet { display: grid; gap: 16px; align-content: start; }
.rv-wtop { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rv-wtop b { text-align: center; font: 700 19px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-wtop .btn[aria-disabled="true"] { opacity: .5; }
.rv-as { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; } .rv-as .pic { width: 44px; height: 44px; }
.rv-as b { display: block; font: 600 15px/1.2 var(--display); } .rv-as small { font-size: 13px; color: var(--muted); }
.rv-writing .rv-stars { justify-content: center; gap: 6px; } .rv-writing .rv-stars button { width: auto; height: auto; line-height: 0; }
.rv-writing .rv-uses { justify-content: center; }
.rv-writing .si-chip[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.rv-tbox { position: relative; } .rv-tbox textarea { width: 100%; min-height: 120px; font: 15px/1.45 var(--body); color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 12px 14px 26px; resize: vertical; }
.rv-tbox .rv-count { position: absolute; right: 12px; bottom: 10px; margin: 0; }
.rv-pts { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--live) 9%, var(--panel)); font-size: 13.5px; line-height: 1.45; color: var(--muted); } .rv-pts b { color: #17744D; }
@media (max-width: 900px) { .rvsheet.rv-writing .si-sheet { position: fixed; inset: 0; max-height: none; height: 100%; border-radius: 0; padding-top: calc(16px + env(safe-area-inset-top, 0px)); overflow-y: auto; } }

/* ---------- The rework as drawn, part 6 (1 Oct 2026): the meetup and boat sheets on phones (style only: meet.js and
   boats.js keep their markup) ---------- */
@media (max-width: 900px) {
  /* A meetup: a round close button top right instead of "Back to the map" and the address; the title smaller, black. */
  .mt-pad .mt-top { justify-content: flex-end !important; }
  .mt-pad { position: relative; }
  .mt-pad > .mt-top { position: absolute; top: 8px; right: 16px; z-index: 1; }
  .mt-pad > .mt-top + * { padding-right: 46px; }
  .mt-top .mt-path { display: none; }
  .mt-pad .mt-top .mt-back { margin-left: auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; line-height: 0; border-radius: 50%; background: var(--panel-2); font-size: 0; color: var(--ink); }
  .mt-top .mt-back::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--x-icon) center / contain no-repeat; mask: var(--x-icon) center / contain no-repeat; flex: none; } /* the centred ✕, see "Every close ×" */
  .mt-pad .mt-h1 { font-size: 26px !important; line-height: 1.1 !important; }
  .mt-pad .mt-h1 em { color: inherit !important; }
  .mt-pad > .eyebrow, .mt-pad .mt-eyebrow { color: var(--muted) !important; }
  /* A boat: the site as the orange pill, Share as a soft pill, the bid, then Outbid across the sheet. */
  .bt-sheet .bt-head { padding-right: 36px; } /* clear of the sheet's round ✕ (36px, 14px in from the edge) */
  .bt-sheet .bt-sp { align-self: flex-start; padding: 4px 7px; border-radius: 6px; background: color-mix(in srgb, var(--gold) 20%, var(--panel)); color: #7A5A07; font: 600 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
  .bt-sheet .bt-meta .bt-link { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--intro); color: #fff; font: 600 13.5px/1 var(--body); }
  .bt-sheet .bt-foot { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; }
  .bt-sheet .bt-foot .bt-go { width: 100%; justify-content: center; height: 44px; }
  .bt-sheet .bt-cardacts .bt-lnk { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: color-mix(in srgb, var(--intro) 9%, var(--panel)); color: var(--ink); font: 600 13px/1 var(--body); text-decoration: none; }
}

/* ---------- Phones (1 Oct 2026): more map above the sheet, as drawn in the plan ---------- */
@media (max-width: 900px) { .col > .mapcol { height: 66vh; height: 66svh; } }

/* ---------- 1 Oct 2026: "Find my matches" floats centred at the bottom of the map, always. Logged in: your matches;
   anyone else: the join flow (findMine). On phones the sheet overlaps the map by 18px, so it sits 32px up, like the talk pill did. */
.mfab { position: absolute; left: 50%; bottom: 20px; z-index: 901; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--intro); color: #fff; font: 600 15.5px/1 var(--body); white-space: nowrap; cursor: pointer; box-shadow: 0 8px 24px color-mix(in srgb, var(--intro) 45%, transparent), 0 2px 6px rgba(27,31,36,.18); transition: transform .15s var(--ease), filter .15s; }
.mfab svg { width: 18px; height: 18px; flex: none; }
.mfab:hover { filter: brightness(1.07); transform: translateX(-50%) translateY(-1px); }
.mfab:active { transform: translateX(-50%) scale(.97); }
.mfab:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 900px) { .mfab { bottom: 34px; height: 46px; font-size: 15px; } }

/* ---------- 2 Oct 2026 (Philip's feedback): with a maker open, Find my matches steps aside. On phones their sheet works
   like a place in Google Maps: it covers the tab bar (✕ and the Map pill lead back), and springs open or shut (setup()). ---------- */
.mfab { transition: transform .15s var(--ease), filter .15s, opacity .2s, visibility 0s; }
.app.pview .mfab { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s .2s; }
@media (max-width: 900px) {
  .tabbar { transition: transform .28s var(--ease), visibility 0s; }
  .app.pview .tabbar { transform: translateY(100%); visibility: hidden; pointer-events: none; transition: transform .28s var(--ease), visibility 0s .28s; }
  .app.pview .col > .view { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } /* the Map pill, 22 px up and 44 px tall, plus a gap */
  .app.pview .mappill { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .app.pview .dc-note { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 1 Oct 2026: no scrollbar on the desktop list (it still scrolls) ---------- */
@media (min-width: 901px) { #scroll { scrollbar-width: none; } #scroll::-webkit-scrollbar { display: none; } }

/* Follow (1 Oct 2026): the feed of the makers you follow, at the top of Today on the map. */
.fl-rows { display: grid; gap: 14px; }
.fl-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink); text-decoration: none; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.fl-row > .pic { width: 44px; height: 44px; }
.fl-row b { font: 600 15px/1.25 var(--display); }
.fl-row .fl-what { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); }
.fl-row q { display: block; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); font-size: 14px; line-height: 1.45; quotes: "“" "”"; overflow-wrap: anywhere; }
.fl-empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.fl-empty .h-lg { display: inline-flex; } .fl-empty .pic { width: 30px; height: 30px; margin-left: -8px; box-shadow: 0 0 0 2px var(--panel); } .fl-empty .pic:first-child { margin-left: 0; }

/* Updates from makers you follow (plan, 1 Oct 2026) */
.nb-dot { position: absolute; top: 6px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--intro); box-shadow: 0 0 0 2px var(--panel); }
#xme { position: relative; } #xme .nb-dot { top: 0; right: 0; width: 11px; height: 11px; }
.umenu.upd { width: 380px; right: 110px; padding: 0; gap: 0; }
.upd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--rule); }
.upd-h b { font: 700 16px/1.2 var(--display); } .upd-h small { font-size: 12.5px; color: var(--muted); }
.upd-list { display: grid; max-height: min(60vh, 520px); overflow-y: auto; padding: 4px 0; }
.upd-r { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 10px 16px 10px 16px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.upd-r:hover { background: var(--panel-2); }
.upd-r .pic { width: 40px; height: 40px; }
.upd-r > span { min-width: 0; }
.upd-r b { font-weight: 600; } .upd-r .upd-w { font-size: 13.5px; line-height: 1.35; }
.upd-r .upd-t { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-r .upd-when { display: block; margin-top: 2px; font: 400 11.5px/1.2 var(--mono); color: var(--faint); }
.upd-r.new::after { content: ""; position: absolute; right: 14px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--intro); }
.upd-r.new { background: color-mix(in srgb, var(--intro) 5%, var(--panel)); }
.upd-live { position: relative; }
.upd-live .upd-r { padding-right: 120px; }
.upd-live .upd-r.new::after { display: none; }
.upd-live .upd-when { color: var(--intro); font-weight: 500; }
.upd-join { position: absolute; right: 14px; top: 0; bottom: 0; margin: auto 0; gap: 6px; }
.upd-f { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px 12px; border-top: 1px solid var(--rule); font-size: 13px; }
.upd-empty { padding: 18px 16px; font-size: 13.5px; color: var(--muted); }
.umenu [role=menuitem] .upd-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--intro); color: #fff; font: 600 12px/22px var(--mono); text-align: center; font-style: normal; }
@media (max-width: 600px) { .umenu.upd { right: 0; width: auto; padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); } .upd-list { max-height: 62vh; } }

/* Notifications tab (plan, 1 Oct 2026) */
@media (max-width: 900px) { #tabbar.tb4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.tabbar .ic { position: relative; }
.ntf { gap: 14px; }
.ntf-list { display: grid; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--panel); }
.ntf-list .upd-r { padding: 12px 14px; border-top: 1px solid var(--rule); }
.ntf-list .upd-r:first-child { border-top: 0; }
.ntf-list > .upd-live { border-top: 1px solid var(--rule); }
.ntf-list > .upd-live:first-child { border-top: 0; }
.ntf-list .upd-live .upd-r { border-top: 0; padding-right: 120px; }
.ntf-sub { font-size: 13.5px; color: var(--muted); margin: -6px 0 0; }
.ntf-sug { display: grid; gap: 10px; }
.ntf-sug .row-s { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ntf-sug .row-s .pic { width: 44px; height: 44px; }
.ntf-sug .row-s b { display: block; font: 600 15px/1.25 var(--display); } .ntf-sug .row-s small { display: block; font-size: 12.5px; color: var(--muted); }

/* Today (8 Oct 2026): the public feed on the Today tab. One column on phones with "Here today" as a strip of faces;
   from 900px of page, the feed and a sticky "Here today" column beside it. */
.tdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; max-width: 1040px; margin: 0 auto; width: 100%; }
.tdp-main { display: grid; gap: 14px; min-width: 0; }
.tdp-top { display: grid; gap: 6px; }
.tdp-top h1 { font: 700 28px/1.1 var(--display); margin: 0; }
.tdp-top .ntf-sub { margin: 0; }
.tf-tabs { justify-self: start; border-radius: 999px; padding: 3px; gap: 2px; background: var(--panel-2); border-color: transparent; }
.tf-tabs button { border-radius: 999px; padding: 8px 14px; font-size: 13px; position: relative; white-space: nowrap; flex: none; }
/* Five tabs on a phone: they scroll sideways instead of wrapping (Questions, 8 Oct). */
.tf-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.tf-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 480px) { .tf-tabs button { padding: 8px 11px; } }
.tf-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--intro); }
.tf-day { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 -4px; font: 700 18px/1.2 var(--display); }
.tf-day small { font: 400 12px/1 var(--mono); color: var(--faint); }
.tf-body { display: grid; gap: 14px; }
.tf-list { display: grid; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--panel); }
.tf-r { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 13px 16px; border: 0; border-top: 1px solid var(--rule); background: none; font: inherit; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.tf-r:first-child { border-top: 0; }
.tf-r:hover { background: color-mix(in srgb, var(--panel-2) 60%, var(--panel)); }
.tf-r .pic { width: 40px; height: 40px; }
.tf-r > span { display: grid; gap: 4px; min-width: 0; }
.tf-w { font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.tf-w b { color: var(--ink); font-weight: 600; }
.tf-k { display: inline-block; margin-right: 7px; padding: 3px 6px; border-radius: 5px; font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; vertical-align: 1px; background: var(--panel-2); color: var(--muted); }
.tf-k.j { background: #E5F4EC; color: #17744D; } .tf-k.m { background: #E4F1F3; color: #1E6B77; } .tf-k.r { background: #FBF1DC; color: #8A6410; }
.tf-k.t { background: #ECEAF7; color: #4B3F9E; } .tf-k.c { background: color-mix(in srgb, var(--intro) 12%, var(--panel)); color: #B23E1A; }
.tf-q { font-size: 14px; line-height: 1.45; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tf-stars { color: #B7791F; letter-spacing: 1px; font-size: 14px; }
.tf-m { font: 400 11.5px/1.2 var(--mono); color: var(--faint); }
.tf-climb { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }
.tf-climb button { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; }
.tf-climb .pic { width: 26px; height: 26px; }
.tf-climb b { font-weight: 600; font-size: 13.5px; } .tf-climb em { font-style: normal; font-size: 13px; }
.tf-empty { padding: 18px 16px; border: 1px dashed var(--rule); border-radius: 14px; color: var(--muted); font-size: 14px; margin: 0; }
.tf-out { display: grid; justify-items: start; gap: 8px; padding: 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }
.tf-out b { font: 700 18px/1.25 var(--display); } .tf-out span { color: var(--muted); font-size: 14px; }
.tf-fol { display: grid; gap: 14px; }
.tf-here { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); min-width: 0; }
.tf-hh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tf-hh b { font: 700 15px/1.2 var(--display); } .tf-hh span { font: 400 11.5px/1.2 var(--mono); color: var(--faint); }
.tf-faces { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.tf-faces::-webkit-scrollbar { display: none; }
.tf-f { display: grid; justify-items: center; gap: 3px; flex: none; width: 58px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: center; }
.tf-f .pic { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--live); }
.tf-f > span { display: grid; gap: 1px; max-width: 100%; }
.tf-f b { font: 600 12px/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-f small { font: 400 10.5px/1.2 var(--mono); color: var(--live); white-space: nowrap; }
.tf-more { font-size: 12.5px; color: var(--muted); }
.tdp > .tf-here { display: none; }
body:has(.tdp), :is(#scroll, #view, .col, main):has(.tdp) { background: var(--panel) !important; }
.tf-soon { display: grid; gap: 10px; } .tf-soon .tf-day { margin: 0; }
@container view (min-width: 900px) {
  .tdp { grid-template-columns: minmax(0, 1fr) 260px; }
  .tdp > .tf-here { display: grid; position: sticky; top: 16px; }
  .tf-here-m { display: none; }
  .tdp > .tf-here .tf-faces { display: grid; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  .tdp > .tf-here .tf-f { width: auto; grid-template-columns: 32px minmax(0, 1fr); justify-items: start; align-items: center; gap: 10px; padding: 5px 0; text-align: left; }
  .tdp > .tf-here .tf-f .pic { width: 32px; height: 32px; }
  .tdp > .tf-here .tf-f > span { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px; width: 100%; }
  .tdp > .tf-here .tf-f b { font-size: 13.5px; }
}
/* Ask the makers (8 Oct 2026): the Ask card and question rows on Today, the Questions tab, a question's page, the Ask sheet. */
.tf-k.q { background: #E6ECFB; color: #2F4FB3; }
.q-ask { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }
.q-ask-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.q-ask-top .pic { width: 40px; height: 40px; }
.pic.q-mark { background: var(--intro); color: #fff; display: grid; place-items: center; font: 700 18px/1 var(--display); }
.q-ask-in { display: block; width: 100%; padding: 11px 14px; border-radius: 12px; background: var(--panel-2); color: var(--muted); font: 400 14.5px/1.3 var(--body); border: 1px solid transparent; text-align: left; cursor: text; }
.q-ask-go { padding: 10px 16px; border-radius: 999px; border: 0; background: var(--intro); color: #fff; font: 600 14px/1 var(--body); cursor: pointer; }
.q-ask-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.q-faces { display: inline-flex; flex: none; }
.q-faces .pic { width: 22px; height: 22px; margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
.q-faces .pic:first-child { margin-left: 0; }
.q-t { font: 600 15.5px/1.32 var(--display); color: var(--ink); }
.q-why { font-size: 12.5px; color: #2F4FB3; font-weight: 500; }
.q-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 400 11.5px/1.2 var(--mono); color: var(--faint); }
.q-ans-n { font: 600 12px/1 var(--body); color: var(--live); }
.q-ans-n.zero { color: #B7791F; }
.q-cta { justify-self: start; margin-top: 2px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); font: 600 12.5px/1 var(--body); color: var(--ink); }
.q-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.q-chips::-webkit-scrollbar { display: none; }
.q-chips button { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); font: 500 13px/1 var(--body); color: var(--muted); cursor: pointer; }
.q-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.q-chips.cm-qs { margin: 0 0 14px; }
.q-chips.cm-qs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); font: 500 13px/1 var(--body); color: var(--ink); text-decoration: none; }
.q-chips.cm-qs a b { font: 500 12px/1 var(--mono); color: var(--muted); }
.q-chips.cm-qs a:hover { border-color: var(--ink); }
.q-card { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); }
.q-card h4 { margin: 0; font: 700 15px/1.2 var(--display); }
.q-mini { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; }
.q-mini .pic { width: 32px; height: 32px; }
.q-mini b { font-weight: 600; } .q-mini small { display: block; color: var(--muted); font-size: 12px; }
.q-mini em { font: 600 11.5px/1 var(--mono); color: var(--live); font-style: normal; }
.q-page { display: grid; gap: 16px; max-width: 1040px; margin: 0 auto; width: 100%; grid-template-columns: minmax(0, 1fr); align-items: start; }
body:has(.q-page), :is(#scroll, #view, .col, main):has(.q-page) { background: var(--panel) !important; }
.q-main { display: grid; gap: 16px; min-width: 0; }
.q-back { font-size: 13px; color: var(--muted); text-decoration: none; justify-self: start; }
.q-head { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--rule); border-radius: 16px; background: var(--panel); }
.q-head h1 { font: 700 22px/1.2 var(--display); margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.q-by { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.q-by .pic { width: 28px; height: 28px; }
.q-by .linkish { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; text-decoration: none; }
.q-by b { color: var(--ink); font-weight: 600; }
.q-by .rk { font: 600 11.5px/1 var(--mono); color: var(--intro); }
.q-by .prod { font: 500 11.5px/1 var(--mono); padding: 4px 6px; border-radius: 6px; background: var(--panel-2); color: var(--ink); }
.q-body, .q-an p, .q-rep p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.q-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); }
.q-acts button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); font: 600 12.5px/1 var(--body); color: var(--ink); cursor: pointer; }
.q-acts button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--live) 50%, var(--rule)); background: color-mix(in srgb, var(--live) 10%, var(--panel)); color: #17744D; }
.q-acts button.x { background: var(--ink); border-color: var(--ink); color: #fff; }
.q-sent { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #2F4FB3 7%, var(--panel)); font-size: 13px; color: var(--muted); }
.q-sent b { color: var(--ink); font-weight: 600; }
.q-sent .q-faces .pic { width: 26px; height: 26px; box-shadow: 0 0 0 2px #EEF1FB; }
.q-list { display: grid; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--panel); }
.q-an { display: grid; gap: 8px; padding: 16px; border-top: 1px solid var(--rule); scroll-margin-top: 80px; }
.q-an:first-child { border-top: 0; }
.q-an.best { background: color-mix(in srgb, var(--live) 5%, var(--panel)); }
.q-best { justify-self: start; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--live) 14%, var(--panel)); color: #17744D; font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.q-held { justify-self: start; padding: 4px 8px; border-radius: 6px; background: #FBF1DC; color: #8A6410; font: 500 11px/1.3 var(--mono); }
.q-reply { display: grid; gap: 10px; margin: 2px 0 0 14px; padding-left: 12px; border-left: 2px solid var(--rule); }
.q-rep { display: grid; gap: 6px; }
.q-rep .q-by .pic { width: 22px; height: 22px; }
.q-rep p { font-size: 14px; }
.q-write { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); box-shadow: 0 6px 20px rgba(27,31,36,.08); }
.q-write.sm { box-shadow: none; padding: 8px; }
.q-write textarea, .q-write > span { width: 100%; min-height: 42px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: var(--panel-2); color: var(--ink); font: 400 14.5px/1.4 var(--body); resize: vertical; }
.q-write > span { color: var(--muted); }
.q-write textarea:focus { outline: none; border-color: var(--ink); background: var(--panel); }
.q-write button { padding: 11px 16px; border-radius: 999px; border: 0; background: var(--intro); color: #fff; font: 600 14px/1 var(--body); cursor: pointer; }
.q-write button[aria-busy="true"] { opacity: .6; }
.q-rail { display: none; }
.q-rel { display: grid; gap: 8px; font-size: 13.5px; }
.q-rel a { color: var(--ink); text-decoration: none; font-weight: 500; line-height: 1.35; }
.q-rel small { display: block; color: var(--faint); font: 400 11px/1.4 var(--mono); }
@container view (min-width: 900px) { .q-page { grid-template-columns: minmax(0, 1fr) 280px; } .q-rail { display: grid; gap: 14px; position: sticky; top: 16px; } }
.qas .si-sheet { display: grid; gap: 12px; width: min(540px, 100%); }
.qas h3 { margin: 0; }
.q-field { width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); font: 400 14.5px/1.45 var(--body); color: var(--ink); resize: vertical; }
.q-field.big { font: 600 16px/1.35 var(--display); }
.q-field:focus { outline: none; border-color: var(--ink); }
.qa-live { display: grid; gap: 12px; }
.q-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.q-tags .lbl { margin-right: 2px; font-size: 13px; color: var(--ink); }
.q-tags button { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--rule); font: 500 12.5px/1 var(--body); color: var(--muted); background: var(--panel); cursor: pointer; }
.q-tags button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.q-route { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 12px; border-radius: 12px; background: color-mix(in srgb, #2F4FB3 7%, var(--panel)); font-size: 13px; color: var(--muted); }
.q-route b { color: var(--ink); }
.q-x { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.q-x input { width: 18px; height: 18px; accent-color: var(--ink); }
.q-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; max-width: min(92vw, 440px); padding: 11px 16px; border-radius: 12px; background: var(--ink); color: #fff; font: 500 14px/1.4 var(--body); box-shadow: 0 10px 30px rgba(0,0,0,.2); }


/* The maker page's right column (1 Oct 2026): a map picture of their place, and Coming up. */
.railcard.rmapcard { padding: 0; overflow: hidden; gap: 0; }
.rmini { position: relative; height: 170px; background: var(--ocean); }
.rmini .maplibregl-canvas { outline: none; }
.rmini-pin { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold), 0 2px 6px rgba(27,31,36,.25); overflow: hidden; background: var(--panel); }
.rmini-pin .pic { width: 30px; height: 30px; font-size: 11px; }
.rmini-pin.me { width: 40px; height: 40px; box-shadow: 0 0 0 3px var(--intro), 0 3px 10px rgba(27,31,36,.3); z-index: 2; }
.rmini-pin.me .pic { width: 40px; height: 40px; }
.rmapcard .rmap-b { display: grid; gap: 10px; padding: 14px 16px; }
.rmeet { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.rmeet .d { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; align-content: center; background: color-mix(in srgb, var(--intro) 10%, var(--panel)); color: var(--intro); line-height: 1; }
.rmeet .d b { font: 700 15px/1 var(--display); } .rmeet .d small { font: 500 9.5px/1.2 var(--mono); text-transform: uppercase; }
.rmeet span b { display: block; font: 600 14px/1.25 var(--display); } .rmeet span small { display: block; font-size: 12.5px; color: var(--muted); }

/* Projects tab (1 Oct 2026) */
.prj { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.prj-c { display: grid; align-content: start; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--panel); }
.prj-img { display: block; aspect-ratio: 1200 / 630; background: var(--panel-2); border-bottom: 1px solid var(--rule); }
.prj-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prj-b { display: grid; gap: 8px; padding: 14px; }
.prj-h { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; }
.prj-h .pic { width: 36px; height: 36px; border-radius: 9px; }
.prj-h b { display: block; font: 600 15px/1.25 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prj-h small { display: block; font-size: 12.5px; color: var(--muted); }
.prj-t { font-size: 13.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prj-a { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* A product as its own page on desktop (1 Oct 2026). */
@media (min-width: 901px) {
  .signin.rvpage { position: fixed; inset: 60px 0 0 0; z-index: 900; display: block; padding: 0; overflow-y: auto; background: var(--panel); }
  .signin.rvpage .si-back, .signin.rvpage .rv-x { display: none; }
  .signin.rvpage .si-sheet { position: static; width: auto !important; max-width: 1140px; max-height: none; margin: 0 auto; padding: 26px 26px 64px; border: 0; border-radius: 0; box-shadow: none; background: none; animation: none; transform: none; overflow: visible; }
  .rvp-back { justify-self: start; font-size: 14px; color: var(--muted); }
  .rvp-head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 14px; }
  .rvp-head .pic { width: 76px; height: 76px; border-radius: 18px; font-size: 28px; }
  .rvp-head h1 { margin: 0; font: 700 38px/1.1 var(--display); letter-spacing: -.02em; }
  .rvp-head .rv-sub { font-size: 15px; }
  .rvp-tag { margin: 14px 0 0; max-width: 72ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
  .rvp-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
  .rvp-acts .btn { height: 42px; padding: 0 18px; font-size: 14.5px; border-radius: 11px; }
  .rvpage .rv-tabs { margin-top: 10px; }
  .rvpage .rv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
  .rvp-hist { margin-top: 22px; padding: 18px 22px; border: 1px solid var(--rule); border-radius: 16px; }
  .rvp-hist .rv-hist { margin: 0; }
  .rvp-made { margin-top: 16px; }
  .rvp-made .rmini { height: 190px; }
}
/* Helpful, and the maker's reply. */
.rv-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.rv-foot .rv-acts { margin: 0; }
.rv-help { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); color: var(--muted); font: 500 13px/1 var(--body); cursor: pointer; }
.rv-help svg { width: 15px; height: 15px; }
.rv-help:hover { border-color: var(--muted); color: var(--ink); }
.rv-help[aria-pressed="true"] { border-color: color-mix(in srgb, var(--live) 45%, var(--rule)); color: var(--live); background: color-mix(in srgb, var(--live) 8%, var(--panel)); }
.rv-reply { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--panel-2); }
.rv-reply .pic { width: 32px; height: 32px; }
.rv-reply b { display: block; font: 600 13.5px/1.3 var(--display); } .rv-reply span span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.rv-replyf { display: grid; gap: 8px; margin-top: 10px; }
.rv-replyf textarea { width: 100%; font: 14px/1.45 var(--body); color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 10px; resize: vertical; box-sizing: border-box; }
/* Also post it on X */
.rv-xsw { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; cursor: pointer; }
.rv-xsw > svg { width: 18px; height: 18px; flex: none; }
.rv-xsw span:not(.tgl) { flex: 1; min-width: 0; } .rv-xsw b { display: block; font: 600 15px/1.25 var(--display); } .rv-xsw small { display: block; font-size: 12.5px; color: var(--muted); }

/* ---------- Navigation (3 Oct 2026): phones get a Meetups tab, desktop a left nav ---------- */
.rail { display: none; }
/* ---------- Explore v2 (3 Oct 2026): the map only on Explore ----------
   Makers, Products and Meetups from the left nav (and the phone's Meetups tab) open as full pages, like Updates (.fl).
   The chips stay on the Explore map; the Meetups chip shows meetup pins only (#map.mt-only). On desktop the Explore
   list is 540px (420px below 1100px, so the map keeps room; 6 Oct: wide enough for the second trending card) and folds away with the tab on its edge (.ex-closed). */
.ex-tab { display: none; }
.app.fl .mappill { display: none !important; }
#map.mt-only .maplibregl-marker:not(.mt-pin):not(.mt-visit) { display: none !important; }
.mapcol:has(#map.mt-only) #bt-chip { display: none !important; }
@media (min-width: 901px) {
  .app { --ex-w: 540px; }
  .app:not(.page) .split { position: relative; grid-template-columns: var(--ex-w) minmax(0, 1fr); }
  .app.ex-closed:not(.page) .split { grid-template-columns: 0 minmax(0, 1fr); }
  .app.ex-closed:not(.page) .split > .col { visibility: hidden; padding-inline: 0; overflow: hidden; }
  .app:not(.page) .ex-tab { display: grid; place-items: center; position: absolute; z-index: 905; top: 50%; left: var(--ex-w); transform: translateY(-50%); width: 24px; height: 52px; padding: 0; border: 1px solid var(--rule); border-left: 0; border-radius: 0 10px 10px 0; background: var(--panel); color: var(--ink); box-shadow: 3px 1px 8px rgba(27,31,36,.12); cursor: pointer; }
  .app.ex-closed:not(.page) .ex-tab { left: 0; }
  .ex-tab svg { width: 14px; height: 14px; }
  .app.ex-closed .ex-tab svg { transform: rotate(180deg); }
  .ex-tab:hover { color: var(--intro); }
  .ex-tab:focus-visible { outline: 2px solid var(--intro); outline-offset: 2px; }
  .app.page.fl .col { padding-inline: max(26px, calc((100% - 860px) / 2)); }
}
@media (min-width: 901px) and (max-width: 1099px) { .app { --ex-w: 420px; } }
@media (max-width: 900px) { #tabbar.tb5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } #tabbar.tb5 .ic { width: 48px; } }
@media (min-width: 901px) {
  .app { grid-template-columns: 232px minmax(0, 1fr); }
  .app > :not(.rail) { grid-column: 2; }
  .rail { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; gap: 14px; padding: 16px 12px 14px; border-right: 1px solid var(--rule); background: var(--panel); overflow-y: auto; min-height: 0; z-index: 6; }
  .rail-brand { grid-column: auto; justify-self: start; height: 28px; padding: 0 10px; margin-bottom: 8px; }
  .topbar .brand:not(.rail-brand) { visibility: hidden; }
  .rail-g { display: grid; gap: 2px; } .rail-g2 { padding-top: 12px; border-top: 1px solid var(--rule); }
  .rail-i { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 500 14.5px/1 var(--body); cursor: pointer; text-align: left; position: relative; text-decoration: none; }
  .rail-i svg { width: 18px; height: 18px; flex: none; }
  .rail-i:hover { background: var(--panel-2); color: var(--ink); }
  .rail-i[aria-current="true"] { background: color-mix(in srgb, var(--intro) 12%, var(--panel)); color: var(--intro); font-weight: 600; }
  .rail-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-n { font: 500 12px/1 var(--mono); color: var(--muted); font-style: normal; }
  .rail-i[aria-current="true"] .rail-n { color: var(--intro); }
  .rail-end { margin-top: auto; display: grid; gap: 10px; }
  .rail-btn { height: 40px; border-radius: 999px; justify-content: center; gap: 6px; }
  .rail-btn .rail-l { flex: none; }
  .rail-plus { font-size: 17px; line-height: 1; }
  .rail-acct { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); cursor: pointer; text-align: left; color: var(--ink); }
  .rail-acct:hover, .rail-acct.on { border-color: var(--muted); }
  .rail-acct .pic { width: 34px; height: 34px; flex: none; }
  .rail-x { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #000; color: #fff; } .rail-x svg { width: 14px; height: 14px; }
  .umenu-wrap.from-rail .umenu { top: auto; right: auto; bottom: 72px; left: 12px; width: 260px; }
  .rail-acct b { display: block; font: 600 14px/1.2 var(--display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; } .rail-acct small { display: block; font: 400 12px/1.3 var(--body); color: var(--muted); }
}
@media (min-width: 901px) and (max-width: 1279px) {
  .app { grid-template-columns: 72px minmax(0, 1fr); }
  .rail { padding: 16px 10px 14px; }
  .rail-brand .t, .rail-i .rail-l, .rail-n, .rail-btn .rail-l, .rail-acct .rail-l { display: none; }
  .rail-brand { justify-content: center; padding: 0; }
  .rail-i { justify-content: center; padding: 0; }
  .rail-btn { padding: 0; } .rail-plus { font-size: 20px; }
  .rail-acct { justify-content: center; border: 0; padding: 4px 0; }
}

/*--makermap-style-block--*/

/* ---------- 3 Oct: every sheet's × sits in the round grey circle, like the profile and match headers. The icon stays the
   "Every close x" mask. /sponsor on phones: the round x top right, placed like the meetup page's. ---------- */
.signin .si-x:not(.rv-x) { top: 14px; right: 14px; width: 36px; height: 36px; background: var(--panel-2); color: var(--ink); --xs: 18px; }
.signin .si-x:not(.rv-x)::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
/* Hit boxes (MM-136, MM-249, MM-254): the small controls keep their drawn size and take taps from a transparent box
   around them, 44 px on phones (where it would reach a neighbour, only the sides that have room), and at least 24 px
   for the promo row's x and the verified badge everywhere. :where() so a control positioned on purpose keeps it. */
:where(.cl-x, .vbadge) { position: relative; }
.cl-x::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }
.vbadge::after { content: ""; position: absolute; inset: -5px -8px -5px -2px; }
@media (max-width: 900px) {
  :where(.savebar .sb-x, .xask, .x-sh .rules-btn, .xs-back, .xs-clear, .clkpop .cp-x, .cm-f > a, .cm-f > button, .tabs.sm button, .btn.sm, .mt-chip button, .mt-person button) { position: relative; }
  :is(.savebar .sb-x, .xask, .x-sh .rules-btn, .xs-back, .xs-clear, .clkpop .cp-x, .meetcard .x, .cm-f > a, .cm-f > button)::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }
  /* Side by side in their bar (2 px apart): taller only. */
  :is(.tabs.sm button, .btn.sm)::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)) 0; }
  /* Makers' and Products' sorts scroll sideways: the box stops at their edge (36 px), and must not make them scroll up and down. */
  .tabs.sm:is(.mk-sorts, .pd-sort) { overflow-y: hidden; }
  /* A chip's x: the chip's height and a little over, out to its right edge, never into the next chip (6 px away). */
  :is(.mt-chip button, .mt-person button)::after { content: ""; position: absolute; inset: -10px -14px -10px -6px; }
}
.mt-sheet .mt-sheet-top .mt-x[data-mt-close] { width: 36px; height: 36px; margin: 0; border-radius: 50%; background: var(--panel-2); color: var(--ink); --xs: 18px; }
:is(.signin .si-x, .mt-sheet .mt-x):focus-visible { outline: 2px solid var(--intro); outline-offset: 2px; }
@media (max-width: 900px) {
  .bt-pad { position: relative; }
  .bt-pad > .bt-top:has(.bt-back[data-bt-home]) { position: absolute; top: 8px; right: 16px; z-index: 1; }
  .bt-pad > .bt-top:has(.bt-back[data-bt-home]) + * { padding-right: 46px; }
  .bt-top .bt-back[data-bt-home] { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; line-height: 0; border-radius: 50%; background: var(--panel-2); font-size: 0; color: var(--ink); letter-spacing: 0; }
  .bt-top .bt-back[data-bt-home]::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--x-icon) center / contain no-repeat; mask: var(--x-icon) center / contain no-repeat; flex: none; }
}

/*--makermap-style-block--*/

/* ---------- 3 Oct, desktop: matches only; the product page keeps the left nav; /sponsor fields fit. ---------- */
@media (min-width: 901px) {
  #view .mh-panel .mh-i.mx { display: none; }
  .back[data-mback] { margin-bottom: 10px; }
  .signin.rvpage { left: 232px; }
}
@media (min-width: 901px) and (max-width: 1279px) { .signin.rvpage { left: 72px; } }
.bt-f { min-width: 0; } .bt-f input { width: 100%; min-width: 0; box-sizing: border-box; }

/*--makermap-style-block--*/

/* ---------- App cleanup (9 Oct 2026): Explore · Makers · Meetups · Community · You ----------
   One column for every page (860px on a computer), one tab header (.x-sh), the grey bar (.tabs.sm) for every switch
   and sort, left-aligned; chips only for categories and topics. */
@media (min-width: 901px) { .app.page.acct .col { padding-inline: max(26px, calc((100% - 860px) / 2)); } }
.tabs.sm button { flex: none; padding: 0 14px; }
.pg { display: grid; gap: 14px; min-width: 0; }
.pg > .tabs.sm { margin-top: 2px; }
.pg-h { margin: 10px 0 -4px; font: 700 18px/1.2 var(--display); }
/* You: the tab header, Contribute, then Your profile (section headings), in the page's one column. */
section.head.you, section.head.you-out { max-width: none; }
.you .x-sh, .you-out .x-sh { margin: 0 0 6px; width: 100%; }
.you-top .you-strb { margin-left: auto; flex: none; display: grid; justify-items: center; gap: 5px; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }
.you-strb small { font: 600 12px/1 var(--display); color: var(--intro); }
.you-strb:focus-visible { outline: 2px solid var(--intro); outline-offset: 4px; border-radius: 8px; }
.y-tabs { margin: 2px 0 4px; }
.y-plans { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
a.gc-row { color: inherit; text-decoration: none; }
.you-out .more-links { width: 100%; margin-top: 18px; text-align: left; }
.more-links .gc-rp em { font-size: 20px; line-height: 1; color: var(--faint); }
.more-links .gc-rt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 901px) { .more-links { display: none !important; } }
/* Makers and Products: one search (the box on phones, the top bar on a computer), suggestions, then the sorts. */
.mk .pd-tools { display: flex; }
.mk .pd-chips { margin-top: 0; }
.mk-ai .chip svg { color: var(--intro); flex: none; }
.mk .rows { margin-top: 2px; }
.mk-empty { padding: 6px 2px; }
@media (min-width: 901px) { .mk-tools, #plist .pd-search { display: none !important; } }
/* The map's Products layer: the maker's product logo in their pin, pins without a product faded back. */
.ppin.prodl > img:first-child { border-radius: 28%; background: #fff; object-fit: contain; padding: 5px; box-sizing: border-box; }
.ppin.noprod { opacity: .2; }
/* Meetups: Host a meetup on top (the kinds of match as an accordion: one open, its faces and one button), the page's column. */
.plan-m { margin: 2px 0 4px; }
.plan-m .fym-opt:not(.fym-open) { border-color: var(--rule) !important; box-shadow: none !important; background: var(--panel) !important; }
.plan-m .fym-opt:not(.fym-open) .fym-ic { background: color-mix(in srgb, var(--intro) 10%, var(--panel)) !important; color: var(--intro) !important; }
.plan-m .fym-open { border-color: var(--intro) !important; box-shadow: 0 0 0 1px var(--intro) !important; background: var(--panel); cursor: default; }
.plan-m .fym-open .fym-ic { background: var(--intro); color: #fff; }
.plan-m .fym-x { grid-column: 1 / -1; display: grid; gap: 12px; padding: 4px 0 2px; min-width: 0; }
.plan-m .fym-x .h-faces { margin: 2px 0 0; }
.plan-m .fym-cta { width: 100%; justify-content: center; }
.plan-m .fym-hide { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font-size: 13.5px; color: var(--muted); }
.plan-m .fym-s.hk-off { display: block; }
.plan-m .hk-none { margin: 0; }
.plan-m .mt-host-come { display: block; margin-top: -4px; }
.hk-more { display: grid !important; place-items: center; background: var(--panel-2) !important; color: var(--ink); font: 600 16px var(--display) !important; }
.mt-tabs { margin-top: 4px; }
.mt-trips { margin: 18px 0 2px; }
.mt-topic { align-self: flex-start; text-decoration: none; }
.mt-tfans { margin-top: 10px; }
@media (min-width: 901px) { #mt-view .mt-pad { max-width: none; padding-left: 0; padding-right: 0; } }
@media (max-width: 900px) { #mt-view .mt-pad { padding-left: 0; padding-right: 0; } }
/* Meetups (11 Oct 2026): one Host a meetup button on phones; on a computer the left nav's button does it (.in = logged in). */
.mt-hostbtn { display: grid; gap: 8px; margin: 2px 0 4px; } .mt-hostbtn .btn { width: 100%; height: 46px; font-size: 15.5px; } .mt-hostbtn .mt-mut { margin: 0; }
@media (min-width: 901px) { .mt-hostbtn.in { display: none; } }
/* Find your people, folded: the open kind, then "N more ways to find people". */
.fym-folded .fym-opt:not(.fym-open) { display: none; }
.plan-m .fym-more { margin-top: 10px; }
#mk-people { scroll-margin-top: 12px; }
/* Tab tops (12 Oct 2026): the tab's title and its count, at Explore's "Today on the map" size, then the search (phones)
   and the pills; Makers' sorts scroll sideways on a phone when they don't fit. */
.x-sh.pg-top :is(h1, h2) { font: 700 22px/1.15 var(--display); letter-spacing: -.01em; }
#plist .pd-tools { margin-top: 0; }
#mk-list { scroll-margin-top: 12px; }
@media (max-width: 900px) { .mk-sorts { overflow-x: auto; scrollbar-width: none; } .mk-sorts::-webkit-scrollbar { display: none; } .tabs.sm.mk-sorts button { padding: 0 7px; } }
#mt-view .mt-lpad { padding-top: 0; }
/* A city's fanned-out pins: only the middle one carries its name all the time; the others show theirs on hover or when picked
   (12 Oct 2026: "George" and "Martijn" sat on top of each other over Lisbon). */
.fan .ppin .pnm { display: none; } .fan:hover .ppin .pnm, .fan .ppin.sel .pnm { display: block; }
/* …and its #rank where it would sit under a pin drawn above it (fanBadges). Hidden, not removed: it is measured again. */
.fan:not(:hover) .ppin:not(.sel) .rk.off { visibility: hidden; }
/* The map's "Sponsor a boat · N free" pill on a computer: the left nav has the item, so the map doesn't. */
@media (min-width: 901px) { #bt-chip { display: none !important; } .mapcol:has(#bt-chip:not([hidden])) .xchips { max-width: none; } }
/* Back (12 Oct 2026): one control on every page you open (backHtml). A computer: "‹ Back", small and grey, top left; a
   phone: a round ‹ top left. .top: a left-nav item's page, so a phone only. .nb-row holds it on meetup pages. */
.nb-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; justify-self: start; margin: 0 0 6px; padding: 0; border: 0; background: none; font: 500 13.5px/1 var(--body); color: var(--muted); text-decoration: none; cursor: pointer; }
.nb-back:hover { color: var(--ink); } .nb-back span { font-size: 20px; line-height: .8; }
.nb-row { display: flex; }
@media (min-width: 901px) { .nb-back.top, .bt-top.nb-dhide { display: none !important; } }
@media (max-width: 900px) { .nb-back { width: 38px; height: 38px; justify-content: center; border-radius: 50%; background: var(--panel-2); color: var(--ink); } .nb-back b { display: none; } .nb-back span { font-size: 28px; margin: -4px 0 0 -2px; } }
/* Opened from outside (nothing of ours to go back to), a left-nav page's ‹ on a phone says where it goes: "‹ You". */
@media (max-width: 900px) { .nb-back.top.lbl { width: auto; padding: 0 14px 0 10px; gap: 4px; border-radius: 19px; } .nb-back.top.lbl b { display: inline; } }
/* Community: the composer, the topics, one post card (also on topics and maker pages), a topic's header and its meetups. */
.cm-write { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--rule); color: var(--faint); font: 400 14.5px/1.4 var(--body); text-align: left; cursor: pointer; }
.cm-write .pic { width: 30px; height: 30px; flex: none; } .cm-write span { flex: 1; min-width: 0; }
.cm-write i { margin-left: auto; font-style: normal; padding: 7px 12px; border-radius: 999px; background: var(--intro); color: #fff; font: 600 13px var(--display); flex: none; }
.cm-note { font-size: 12.5px; color: var(--muted); margin: -6px 4px 0; }
.cm-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .cm-pills::-webkit-scrollbar { display: none; } .cm-pills button { flex: none; }
.cm-list .tf-r { text-decoration: none; }
.q-route .linkish { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }
.q-head a.tf-k { text-decoration: none; } .cm-p h3 a { color: inherit; text-decoration: none; }
.cm-topics { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cm-t { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--rule); align-content: start; color: var(--ink); text-decoration: none; }
.cm-t .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 700 16px var(--display); color: #fff; }
.cm-t b { font: 700 16px/1.2 var(--display); } .cm-t > span:not(.ic):not(.lq-faces) { font-size: 12.5px; color: var(--muted); }
.lq-faces { display: flex; } .lq-faces .pic { width: 22px; height: 22px; margin-left: -6px; border: 2px solid var(--panel); font-size: 10px; } .lq-faces .pic:first-child { margin-left: 0; }
.cm-p { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; min-width: 0; }
.cm-p.sv-new { box-shadow: 0 0 0 2px var(--intro) inset; } #cm-list { scroll-margin-top: 28px; }
.cm-ph { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; } .cm-ph .pic { width: 36px; height: 36px; }
.cm-ph b { font: 600 14.5px var(--display); } .cm-ph b .linkish { font: inherit; color: inherit; padding: 0; text-decoration: none; } .cm-ph small { display: block; color: var(--muted); font-size: 12.5px; }
.cm-who { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.cm-p h3 { font: 700 16.5px/1.3 var(--display); margin: 2px 0 0; } .cm-p p { margin: 0; white-space: pre-line; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.cm-p[data-cm-cut] { cursor: pointer; } .cm-p p .linkish { font-size: 13.5px; white-space: nowrap; }
.cm-f { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.cm-f > a, .cm-f > button:not(.cm-up) { color: var(--muted); text-decoration: none; border: 0; background: none; padding: 6px 0; font: inherit; cursor: pointer; }
.cm-f .src { font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.cm-f .cm-hide { margin-left: auto; font-size: 12px; }
.cm-up { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--panel); font: 600 12.5px var(--display); color: var(--ink); cursor: pointer; }
.cm-up.on { border-color: var(--intro); color: var(--intro); background: color-mix(in srgb, var(--intro) 7%, var(--panel)); }
.cm-q .cm-f { justify-content: space-between; } .cm-ans { font: 600 13px var(--display); color: var(--live); }
.cm-empty { padding: 4px 2px; }
.qp-back { font-size: 13px; color: var(--muted); text-decoration: none; justify-self: start; }
.cm-hd { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--rule); }
.cm-hd h1 { font: 700 24px/1.15 var(--display); margin: 0; } .cm-hd p { margin: 0; color: var(--muted); font-size: 14px; }
.qp-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.cm-hd .tf-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tm { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--intro) 6%, var(--panel)); border: 1px solid color-mix(in srgb, var(--intro) 22%, var(--rule)); }
.tm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; } .tm-h b { font: 700 17px/1.2 var(--display); } .tm-h span { font-size: 13px; color: var(--muted); }
.tm-o, .tm-m { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--rule); text-align: left; font: inherit; color: var(--ink); cursor: default; }
.lrn17 { display: grid; gap: 10px; margin: 18px 0 6px; } .lrn17 > .lbl { display: block; } .lrn17 .q-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.lbl.lrn-x { display: block; margin: 18px 0 8px; }
.pgrowth { margin-top: 22px; } .pgrowth > .lbl { display: block; margin-bottom: 10px; }
.tm-m { cursor: pointer; } .tm-o b, .tm-m b { font: 600 15px var(--display); } .tm-o span, .tm-m span { font-size: 13px; color: var(--muted); } .tm-o .btn { justify-self: start; margin-top: 6px; }