/* Tren-Tren design layer (Oct 2026): Apple's structure, Tren-Tren's personality. Loaded after transit.css.
   Principles: glass only on the floating navigation layer, color only where it means something (line colors, the main
   action, live status, rewards), corners that nest inside each other, Apple's type scale, and the iPhone's own
   accessibility settings honored automatically. */

/* ---------- tokens ---------- */
:root {
  /* Apple type scale, in rem so it follows the iPhone's Text Size (body = 1rem = 17pt by default) */
  --t-large: 2rem; --t-title1: 1.65rem; --t-title2: 1.3rem; --t-title3: 1.18rem; --t-headline: 1rem; --t-callout: .94rem; --t-sub: .88rem; --t-foot: .78rem; --t-cap: .7rem;
  --round: ui-rounded, "SF Pro Rounded", var(--display);
  /* corners nest: a card inside the panel's 16px padding is the panel radius minus 16, a row inside a card minus its padding */
  --r-sheet: 38px; --r-card: 22px; --r-row: 14px; --r-small: 10px;
  --fill: color-mix(in srgb, var(--ink) 5%, transparent); --fill2: color-mix(in srgb, var(--ink) 9%, transparent); --sep: color-mix(in srgb, var(--ink) 9%, transparent);
  --glass-bg: color-mix(in srgb, var(--paper) 58%, transparent); --glass-blur: blur(26px) saturate(1.8);
  --glass-edge: inset 0 0 0 .5px rgba(255, 255, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .75);
  --glass-shadow: 0 8px 30px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
  --fluid: cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fill: color-mix(in srgb, var(--ink) 8%, transparent); --fill2: color-mix(in srgb, var(--ink) 13%, transparent); --glass-bg: color-mix(in srgb, var(--paper) 52%, transparent); --glass-edge: inset 0 0 0 .5px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .14); --glass-shadow: 0 8px 30px rgba(0, 0, 0, .45); } }
:root[data-theme="dark"] { --fill: color-mix(in srgb, var(--ink) 8%, transparent); --fill2: color-mix(in srgb, var(--ink) 13%, transparent); --glass-bg: color-mix(in srgb, var(--paper) 52%, transparent); --glass-edge: inset 0 0 0 .5px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .14); --glass-shadow: 0 8px 30px rgba(0, 0, 0, .45); }

/* ---------- text: follow the iPhone's Text Size and Bold Text ---------- */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
  :root.big, :root.simple { font: -apple-system-title3; }
  html, body { font-family: var(--text); line-height: 1.45; }
  body { font-size: 1rem; }
}
/* section headers: title case and a real heading size, no ALL CAPS */
.sec, .hcard__t { font: 600 var(--t-title3)/1.25 var(--display); letter-spacing: -.01em; text-transform: none; }
.sheet__body h3 { font-family: var(--display); font-weight: 600; font-size: var(--t-title3); letter-spacing: -.01em; }
.me-h, .layers__scroll h5 { text-transform: none; letter-spacing: 0; font-size: var(--t-sub); font-weight: 600; }
.soft.small, .small.soft { font-size: var(--t-foot); }
/* numbers (times, counts, streaks) in rounded, even-width digits */
.num, .big-mins, .pl-big b, .rv-head b, .flex-b b, .dl-city b, .trip__time, .pl-stat b, .flex-id b { font-family: var(--round); font-variant-numeric: tabular-nums; }

/* ---------- controls ---------- */
.btn { min-height: 46px; font-weight: 600; padding: 12px 20px; }
.btn--quiet { background: var(--fill2); }
.chip { border: 0; background: var(--fill); }
.chip:hover { background: var(--fill2); }
.jump a, .jump button { background: var(--fill); }
/* scrolling chip rows fade at the edge instead of cutting a word in half */
.chips:not(.chips--wrap) { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 30px), transparent); }

/* ---------- cards: one surface, nested corners, no card-in-card borders ---------- */
.hcard, .paycard, .tile, .pl-big, .pl-sotd, .dl-rings, .dl-pledge, .dl-city, .flex-id, .solo-ghost, .solo-comp, .rv-note, .cap { border-radius: var(--r-card); }
.hcard { border: 0; box-shadow: none; background: var(--fill); }
.hcard .hcard, .hcard .block > .tile, .hcard .pl-sotd, .hcard .dl-rings, .hcard .dl-ask, .hcard .dl-wq { border-radius: var(--r-row); }

/* ---------- accessibility: the iPhone's own settings ---------- */
@media (prefers-reduced-transparency: reduce) {
  .search, .year-chip, .icon, .pill, .tabs, .ticker, .statusblur, .layers, .future, .ctx, .flycard, .mic-top, .map-cap, .sheet, .lp-menu, .bot-fab, .tk-pill { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--paper) !important; }
}
@media (prefers-contrast: more) {
  :root { --line: color-mix(in srgb, var(--ink) 35%, transparent); --sep: color-mix(in srgb, var(--ink) 30%, transparent); --ink-soft: color-mix(in srgb, var(--ink) 82%, var(--paper)); }
  .chip, .btn--quiet, .hcard, .tile, .map-cap, .tabs { box-shadow: inset 0 0 0 1px var(--line); }
}

/* ---------- map chrome: search lives in the panel, the top of the map stays clear ---------- */
.top { padding-right: 72px; align-items: flex-start; gap: 8px; }
.top .search, .top .mic-top { display: none !important; }
.year-chip { height: 44px; padding: 0 10px 0 14px; font-size: 1.05rem; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.year-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .3s var(--fluid); }
/* map buttons: two grouped glass capsules, like Apple Maps */
.ctrl { top: calc(env(safe-area-inset-top, 0px) + 10px); gap: 10px; }
.map-cap { display: flex; flex-direction: column; width: 46px; overflow: hidden; border-radius: 23px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); }
.map-cap:not(:has(> .icon:not([hidden]))) { display: none; }
.map-cap .icon { position: relative; width: 46px; height: 46px; margin-top: -.5px; border-radius: 0; border-top: .5px solid var(--sep); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .2s, color .2s; }
.map-cap .icon:not([aria-pressed="true"]):not([aria-expanded="true"]) { background: transparent; }
.map-cap .icon[aria-pressed="true"], .map-cap .icon[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.map-cap .icon:active { transform: none; background: var(--fill2); }
.map-cap .icon svg { width: 21px; height: 21px; }
.sat .map-cap, .sat .year-chip { box-shadow: var(--glass-edge), 0 10px 30px rgba(0, 0, 0, .35); }
/* the ticker is a small pill beside the year; tap it to read, it folds back after a while */
.top .ticker { position: relative; inset: auto; top: auto; left: auto; right: auto; width: auto; flex: 1 1 auto; min-width: 0; max-width: 100%; height: 44px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--glass-shadow); transition: max-width .45s var(--fluid), background .2s; }
.top .ticker.is-pill { flex: 0 1 auto; max-width: 170px; padding: 0 10px 0 6px; }
.ticker.is-pill .ticker__txt, .ticker.is-pill .ticker__next { display: none; }
.ticker.is-pill .ticker__item { flex: 0 1 auto; gap: 6px; }
.ticker.is-pill .ticker__n:not(:empty) { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 10px; background: var(--fill2); font-weight: 600; color: var(--ink); }
.has-pill .top .ticker { top: auto; }
@media (min-width: 900px) { .top { padding-right: 12px; } .top .ticker { width: auto; } }
:root.lowfx .map-cap, :root.lowfx .year-chip { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--paper) !important; }
:root.lowfx .map-cap .icon:not([aria-pressed="true"]):not([aria-expanded="true"]) { background: transparent !important; }
@media (prefers-reduced-transparency: reduce) { .map-cap .icon:not([aria-pressed="true"]):not([aria-expanded="true"]) { background: transparent !important; } }

/* search row at the top of the panel, in thumb reach */
.psearch-row { display: flex; gap: 8px; margin: 2px 0 16px; }
.psearch { flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 14px; border: 0; border-radius: var(--r-row); background: var(--fill2); color: var(--ink-soft); font: inherit; font-size: var(--t-headline); text-align: left; cursor: text; transition: transform .3s var(--fluid), background .2s; }
.psearch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psearch svg, .psearch-mic svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.psearch-mic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--fill2); color: var(--ink); cursor: pointer; }
.psearch:active, .psearch-mic:active { transform: scale(.97); }

/* ---------- panel: an iOS 26 sheet. Floating glass at peek and half, solid and edge to edge at full ---------- */
.sheet { --sheet-glass: color-mix(in srgb, var(--paper) 78%, transparent); border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
@media (max-width: 899px) {
  .sheet { transition: transform .42s var(--fluid), left .42s var(--fluid), right .42s var(--fluid), border-radius .42s var(--fluid), background-color .3s; }
  .sheet:not([data-snap="full"]) { left: 8px; right: 8px; border-radius: var(--r-sheet); background: var(--sheet-glass); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: var(--glass-edge), 0 10px 40px rgba(0, 0, 0, .18); }
  .sheet:not([data-snap="full"]) .tabs { left: 4px; right: 4px; }
  :root.lowfx .sheet { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--paper) !important; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet { --sheet-glass: color-mix(in srgb, var(--paper) 72%, transparent); } }
:root[data-theme="dark"] .sheet { --sheet-glass: color-mix(in srgb, var(--paper) 72%, transparent); }
.sheet__handle i { width: 38px; background: color-mix(in srgb, var(--ink) 22%, transparent); }

/* large, left-aligned titles; round back and close buttons; the title shrinks once you scroll */
.sheet__head { gap: 10px; padding: 0 14px 8px 14px; }
.sheet__title { font: 700 var(--t-large)/1.15 var(--display); letter-spacing: -.025em; transition: font-size .3s var(--fluid); }
.sheet.scrolled .sheet__title { font-size: var(--t-title3); letter-spacing: -.01em; }
.sheet.scrolled .sheet__head { box-shadow: 0 .5px 0 var(--sep); }
.back { width: 40px; height: 40px; background: var(--fill2); color: var(--ink); transition: transform .3s var(--fluid), background .2s; }
.back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.back:active { transform: scale(.92); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.sheet__title .badge, .sheet__title .lbadge { font-size: var(--t-sub); }

@media (prefers-reduced-motion: reduce) { .tabs, .sheet { transition: none !important; } }
@media (max-width: 899px) { .sheet:not([data-snap="full"]) .tabs { background: var(--lg-bg), color-mix(in srgb, var(--paper) 72%, transparent); } }

/* ---------- Home: widget stack ---------- */
.wstack { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 12px; margin-top: 12px; }
.wstack > * { grid-column: 1 / -1; min-width: 0; }
.wstack > .hcard { margin: 0; }
.w { position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .3s var(--fluid), box-shadow .3s var(--fluid); }
.w.w-press { transform: scale(.98); }
.w[data-size="s"] { grid-column: span 1; height: 172px; overflow: hidden; }
.w[data-size="m"] { max-height: 300px; overflow: hidden; }
.w[data-size="s"] .w-body, .w[data-size="m"] .w-body { -webkit-mask-image: linear-gradient(#000 calc(100% - 46px), transparent); mask-image: linear-gradient(#000 calc(100% - 46px), transparent); }
.w[data-size="s"] .w-body { pointer-events: none; font-size: var(--t-sub); }
.w[data-size="s"] .w-body .chips { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
.w[data-size="s"] .w-body .duo { grid-template-columns: 1fr; }
.w-open { position: absolute; inset: 0; z-index: 2; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.w[data-size="m"] .w-open { inset: auto 0 0 0; height: 56px; }
.w[data-size="m"] .w-open::after { content: ""; position: absolute; left: 50%; bottom: 12px; width: 34px; height: 5px; margin-left: -17px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.w-editlink { display: block; margin: 18px auto 6px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--fill2); color: var(--ink); font: inherit; font-weight: 600; font-size: var(--t-sub); cursor: pointer; }
/* edit mode */
.w-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 14px; min-height: 48px; }
.w-bar b { font: 700 var(--t-title2)/1.2 var(--display); letter-spacing: -.015em; }
.w-done { border: 0; padding: 10px 20px; border-radius: 999px; background: var(--orange); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.wstack.is-editing { gap: 18px 12px; padding-top: 6px; }
.w[data-editing] { overflow: visible; animation: wJiggle .32s ease-in-out infinite alternate; }
.w[data-editing]:nth-child(2n) { animation-delay: -.16s; animation-direction: alternate-reverse; }
@keyframes wJiggle { from { transform: rotate(-.5deg); } to { transform: rotate(.5deg); } }
.w[data-editing] .w-body { pointer-events: none; }
.w-edit { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.w-edit > * { pointer-events: auto; }
.w-del { position: absolute; top: -9px; left: -9px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 55%, var(--paper)); color: var(--paper); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); cursor: pointer; }
.w-grip { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--fill2); color: var(--ink); cursor: grab; touch-action: none; }
.w-size { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 .5px var(--sep), 0 4px 14px rgba(0, 0, 0, .14); white-space: nowrap; }
.w-size button { border: 0; background: none; padding: 6px 11px; border-radius: 999px; font: inherit; font-size: var(--t-foot); font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.w-size button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.w[data-size="s"] .w-size button { padding: 6px 8px; }
.w[data-size="s"] .w-size { transform: translateX(-50%) scale(.9); }
.w-del svg, .w-grip svg, .w-add i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.w.w-drag { z-index: 10; animation: none; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); transition: box-shadow .2s; }
.w.w-target { outline: 2px dashed color-mix(in srgb, var(--orange) 60%, transparent); outline-offset: 3px; }
.w-tray { margin-top: 26px; padding: 16px; border-radius: var(--r-card); background: var(--fill); }
.w-add { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border: 0; border-top: .5px solid var(--sep); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.w-add:first-of-type { border-top: 0; }
.w-add i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #2fa84f; color: #fff; }
@media (prefers-reduced-motion: reduce) { .w[data-editing] { animation: none; } }

/* ---------- calm color: neutral surfaces, color stays on icons, line badges, live status and alerts ---------- */
.tile, .wx, .fact, .stat { background: color-mix(in srgb, var(--ink) 4%, var(--paper)); }
.hcard .tile, .hcard .wx, .hcard .fact, .hcard .stat, .w-tray .tile { background: var(--fill); }
.tile.tone-amber, .tile.tone-red { background: var(--tb); }
.tile .chev { color: var(--ink-soft); opacity: .55; }
.tile__ic { width: 38px; height: 38px; border-radius: 11px; box-shadow: none; }
.tile__ic svg { width: 20px; height: 20px; }
.fact__ic, .wx__ic { color: var(--tc); }

/* ---------- planner before typing ---------- */
.planhome { margin-top: 6px; }
.suggest:not(:empty) ~ #result .planhome { display: none; }
.ph-h { margin: 18px 4px 8px; font: 600 var(--t-headline)/1.3 var(--display); }
.ph-group { border-radius: var(--r-card); background: var(--fill); overflow: hidden; }
.ph-ask { margin-top: 18px; }
.ph-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 14px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; position: relative; }
.ph-row + .ph-row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: .5px; background: var(--sep); }
.ph-row:active { background: var(--fill); }
.ph-row b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-row small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--ink-soft); font-size: var(--t-foot); margin-top: 2px; }
.ph-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--tc); color: #fff; }
.ph-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ph-ic .tren { width: 30px; height: 30px; }
.ph-ask .ph-ic { background: none; width: 40px; height: 40px; }
.ph-ask .ph-ic .tren { width: 40px; height: 40px; }
.ph-next { flex: none; font-weight: 600; color: #1c8a52; font-size: var(--t-sub); }

/* ---------- place card (stations and places), like Apple Maps ---------- */
.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 18px; }
.act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; border: 0; border-radius: var(--r-row); background: var(--fill2); color: var(--orange); font: inherit; font-size: var(--t-foot); font-weight: 600; cursor: pointer; transition: transform .3s var(--fluid), background .2s; }
.act__ic { width: 24px; height: 24px; display: grid; place-items: center; }
.act svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.act--go { background: var(--orange); color: var(--on-orange, #fff); }
.act.is-on svg { fill: currentColor; }
.act:active { transform: scale(.95); }
.pc-h, .sheet__body h3 { margin: 20px 4px 8px; font: 600 var(--t-headline)/1.3 var(--display); letter-spacing: 0; }
.pc-group { border-radius: var(--r-card); background: var(--fill); overflow: hidden; }
.deps.pc-group { display: block; gap: 0; margin: 0; }
.deps.pc-group .deps__line { display: flex; align-items: center; gap: 12px; padding: 12px 16px; position: relative; }
.deps.pc-group .deps__line + .deps__line::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--sep); }
.deps.pc-group b { display: block; font-weight: 600; }
.deps.pc-group small { display: block; color: var(--ink-soft); font-size: var(--t-foot); margin-top: 1px; }
.deps.pc-group .big-mins { font: 600 var(--t-title2)/1 var(--round); font-variant-numeric: tabular-nums; color: #1c8a52; white-space: nowrap; }
.deps.pc-group .big-mins small { display: inline; font-size: var(--t-foot); color: inherit; font-weight: 600; }
.paybox { border-radius: var(--r-card); background: var(--fill); padding: 12px 14px; margin: 12px 0 4px; }
/* details: label above value in one grouped card, no wide empty label column */
.kv { display: block; margin: 12px 0; padding: 2px 16px; border-radius: var(--r-card); background: var(--fill); font-size: var(--t-callout); }
.kv dt { padding-top: 12px; font-size: var(--t-foot); color: var(--ink-soft); }
.kv dd { padding: 2px 0 12px; border-bottom: .5px solid var(--sep); }
.kv dd:last-child { border-bottom: 0; }
.kv dd.num { font-family: var(--round); }
.sheet__title > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.sheet.scrolled .sheet__title > span { -webkit-line-clamp: 1; }

/* ---------- You: profile header and a Settings-style grouped list ---------- */
.prof { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 0 14px; }
.prof .tren--xl, .prof .avatar--xl { width: 84px; height: 84px; margin-bottom: 6px; }
.prof__name { font: 700 var(--t-title1)/1.15 var(--display); letter-spacing: -.02em; }
.prof small { color: var(--ink-soft); font-size: var(--t-sub); }
.prof__edit { margin-top: 8px; border: 0; padding: 8px 16px; border-radius: 999px; background: var(--fill2); color: var(--orange); font: inherit; font-size: var(--t-sub); font-weight: 600; cursor: pointer; }
.prof-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-card); background: var(--fill); margin-bottom: 8px; }
.prof-stats button { border: 0; background: none; padding: 12px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); font: inherit; cursor: pointer; position: relative; }
.prof-stats button + button::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: .5px; background: var(--sep); }
.prof-stats b { font: 600 var(--t-title2)/1.1 var(--round); }
.prof-stats small { font-size: var(--t-cap); color: var(--ink-soft); line-height: 1.2; }
.sgroup__h { margin: 22px 16px 6px; font: 400 var(--t-foot)/1.3 var(--text); color: var(--ink-soft); }
.sgroup { border-radius: var(--r-card); background: var(--fill); overflow: hidden; }
.srow { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 12px 8px 14px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; position: relative; }
.srow + .srow::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: .5px; background: var(--sep); }
.srow:active { background: var(--fill2); }
.srow b { display: block; font-weight: 500; }
.srow small { display: block; color: var(--ink-soft); font-size: var(--t-foot); margin-top: 1px; }
.srow__ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--tc); color: #fff; }
.srow__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.srow__ic .ring { width: 22px; height: 22px; }
.srow__ic .ring circle:first-child { stroke: rgba(255, 255, 255, .35); }
.srow__v { flex: none; color: var(--ink-soft); font-family: var(--round); font-variant-numeric: tabular-nums; }
.srow .chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); stroke-width: 2.4; opacity: .5; }

/* ---------- Play and Community: calm surfaces, rewards keep their color ---------- */
.pulse-strip, .ccard, .ev-card, .starter, .pl-big, .pl-sotd { background: var(--fill) !important; border: 0 !important; box-shadow: none !important; }
.ccard, .ev-card, .starter { border-radius: var(--r-card); }
.starter { position: relative; }
.ev-card { box-shadow: inset 3px 0 0 #7048e8 !important; }
.ctabs, .jump { margin-top: 2px; }

/* ---------- iOS context menu on long-press ---------- */
.lp-dim { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s var(--fluid); }
.lp-dim.is-on { opacity: 1; }
.lp-menu { width: min(280px, calc(100vw - 24px)); max-width: none; min-width: 0; padding: 0; gap: 10px; background: none; box-shadow: none; transform: scale(.6); opacity: 0; transition: transform .38s var(--fluid), opacity .2s; }
.lp-menu.is-on { transform: none; opacity: 1; }
.lp-prev { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--paper); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.lp-prev b { display: block; padding: 0; font-size: var(--t-headline); color: var(--ink); font-weight: 600; }
.lp-prev small { display: block; color: var(--ink-soft); font-size: var(--t-foot); }
.lp-pin { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #e5484d; color: #fff; }
.lp-pin svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lp-list { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--glass-bg); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: var(--glass-edge), 0 18px 50px rgba(0, 0, 0, .25); }
.lp-menu .lp-list button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 16px; border-radius: 0; background: none; color: var(--ink); font-weight: 400; font-size: var(--t-callout); border-top: .5px solid var(--sep); }
.lp-menu .lp-list button:first-child { border-top: 0; }
.lp-menu .lp-list button.lp-main { color: var(--orange); font-weight: 600; background: none; }
.lp-menu .lp-list button:active { background: var(--fill2); transform: none; }
.lp-list svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-gap { display: block; height: 7px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.lp-gap + button { border-top: 0 !important; }
@media (prefers-reduced-transparency: reduce) { .lp-dim { -webkit-backdrop-filter: none; backdrop-filter: none; } .lp-list { background: var(--paper) !important; } }

/* ---------- one icon language: same stroke, rounded ends, same optical size ---------- */
.tile__ic svg, .sec__ic svg, .tabs svg, .icon svg, .chip svg, .btn svg, .hcard svg:not(.tren):not(.ring), .gtile__ic svg, .ticker__tag svg { stroke-linecap: round; stroke-linejoin: round; }
.tabs button svg { stroke-width: 1.9; }
.tabs button[aria-current="page"] svg { stroke-width: 2.3; }
.sec__ic { width: 28px; height: 28px; border-radius: 8px; }
.sec__ic svg { width: 17px; height: 17px; stroke-width: 2.2; }

/* ---------- fluid motion: menus grow out of the button that opened them ---------- */
.layers, .future { transform-origin: top right; }
.layers:not([hidden]), .future:not([hidden]) { animation: morphIn .42s var(--fluid) both; }
.future { transform-origin: top left; }
@keyframes morphIn { from { opacity: 0; transform: scale(.4); border-radius: 30px; } }
.sheet__body.enter { animation-timing-function: var(--fluid); }
@media (prefers-reduced-motion: reduce) { .layers:not([hidden]), .future:not([hidden]), .lp-menu { animation: none !important; transition: none !important; } }
.w-body { position: relative; z-index: 0; }
.w-edit { z-index: 5; }

/* mascot button sits bottom-left of the map so it never covers the map buttons on the right */
@media (max-width: 899px) {
  .bot-fab { right: auto; left: 14px; }
  .bot-fab__say { right: auto; left: 70px; border-radius: 14px 14px 14px 4px; }
}

/* panel tucked away: only the tab bar shows; tap a tab or swipe it up to bring the panel back */
@media (max-width: 899px) {
  .sheet[data-snap="hidden"] { transform: translate3d(0, calc(100% - var(--sheet-h, 90px)), 0); pointer-events: none; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .sheet[data-snap="hidden"] > :not(.tabs) { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
  .sheet[data-snap="hidden"] .tabs { pointer-events: auto; box-shadow: var(--glass-edge), 0 10px 30px rgba(0, 0, 0, .18); }
  .reveal { display: none !important; }
}
/* sticky chip rows: a solid strip across the whole panel width, so cards never show through */
.jump, .ctabs { position: sticky; top: -4px; z-index: 3; margin: 0 -16px 10px; padding: 10px 16px; gap: 8px; background: var(--panel, var(--paper)); box-shadow: 0 .5px 0 var(--sep); -webkit-mask-image: none; mask-image: none; scroll-padding-inline: 16px; }
.jump > *, .ctabs > * { flex: none; }
/* equal tab widths whatever the label or font, so the highlight always lines up */
.tabs button { flex: 1 1 0; min-width: 0; }
.tabs button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.62rem, 2.6vw, .74rem); }