/* Ski-AI component styles — the shared vocabulary used on all five screens.
   Requires skiai-tokens.css. Sizes are the 1440-wide reference values from the mocks
   (the mocks scale with the viewport: 1 unit = 1/144 of the frame width). */

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--track) transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); } a:hover { color: var(--text); }
input::placeholder { color: var(--muted); opacity: 1; } input:focus, button:focus { outline: none; }
.page-radial { background: var(--bg-radial); }              /* Gear Twin, Account, Site (no map behind) */

/* ---- glass surfaces ---- */
.sk-glass { background: var(--panel); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow); }
.sk-panel { display: flex; flex-direction: column; overflow: hidden; }   /* use together with .sk-glass — left panel / right rail: header row + scrolling body */
.sk-panel-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 20px; }
.sk-popover { background: var(--panel-solid); backdrop-filter: var(--blur); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; }
.sk-well { background: var(--panel2-soft); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; }   /* resort card / who-it-suits */
.sk-well.accent { border-color: var(--accent-line); }

/* ---- header (identical on every screen) ---- */
.sk-header { position: absolute; left: var(--inset); right: var(--inset); top: var(--inset); height: var(--header-h); display: flex; align-items: center; gap: 16px; padding: 0 16px; z-index: 5; }
.sk-wordmark { display: inline-flex; align-items: center; gap: 7px; font: 800 21px/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; color: var(--text); text-decoration: none; }
  /* the hound is the mark, so it scales with the type rather than sitting at a fixed pixel size */
.sk-wordmark img { width: 1.34em; height: 1.34em; object-fit: contain; flex: none; }
.sk-wordmark span { color: var(--accent); }
.sk-nav { display: flex; gap: 3px; background: var(--panel2); border-radius: var(--r-control); padding: 3px; white-space: nowrap; }
.sk-nav a { color: var(--muted); padding: 5px 11px; font: 600 12.5px var(--font); border-radius: 8px; text-decoration: none; }
.sk-nav a:hover { color: var(--text); }
.sk-nav a.on { background: var(--accent); color: var(--on-accent); }
.sk-omnibox { display: flex; align-items: center; gap: 9px; width: 100%; max-width: 600px; height: 38px; background: var(--panel2); border: 1px solid var(--line-strong); border-radius: 11px; padding: 0 11px 0 12px; margin: 0 auto; }
.sk-omnibox:focus-within { border-color: var(--accent-focus); box-shadow: 0 0 0 3px var(--accent-ring); }
.sk-omnibox svg { width: 17px; height: 17px; flex: none; opacity: .75; stroke: var(--text); }
.sk-omnibox input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: 13.5px var(--font); }
.sk-kbd { font: 500 10.5px var(--font-mono); color: var(--muted); border: 1px solid var(--line-dashed); border-radius: 5px; padding: 1.5px 5.5px; white-space: nowrap; }
.sk-account { display: flex; align-items: center; gap: 7px; font: 600 12.5px var(--font); color: var(--text); text-decoration: none; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 10px 3px 3px; white-space: nowrap; }
.sk-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #04121a; font-weight: 800; font-size: 11px; background: linear-gradient(135deg, #a78bfa, #6ee7ff); }
[data-theme="light"] .sk-avatar { background: linear-gradient(135deg, #c4b5fd, #7dd3fc); }
.sk-icon-btn { width: 38px; height: 38px; border-radius: var(--r-control); display: inline-flex; align-items: center; justify-content: center; background: var(--panel2); border: 1px solid var(--line-strong); color: var(--muted); text-decoration: none; flex: none; cursor: pointer; }
.sk-icon-btn:hover { color: var(--text); border-color: var(--accent-line); }
.sk-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- tabs (underline) ---- */
.sk-tabs { display: flex; gap: 24px; padding: 15px 20px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.sk-tab { background: none; border: 0; padding: 0 0 11px; font: 600 13.5px var(--font); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.sk-tab.on { color: var(--text); border-bottom-color: var(--accent); }
.sk-tab.sm { font-size: 12px; padding-bottom: 9px; }

/* ---- segmented control (View / Colour by / Labels) ---- */
.sk-seg { display: flex; gap: 3px; background: var(--panel2); border-radius: var(--r-control); padding: 3px; }
.sk-seg button { flex: 1; background: none; border: 0; border-radius: 8px; padding: 6px 4px; font: 600 12px var(--font); color: var(--muted); cursor: pointer; white-space: nowrap; }
.sk-seg button.on { background: var(--accent-soft); color: var(--accent); }

/* ---- buttons ---- */
.sk-btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-control); padding: 9px 12px; font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }
.sk-btn:hover { border-color: var(--accent-line); }
.sk-btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }        /* filled toggle (Pin ✓, Watching ✓, ● Posts) */
.sk-btn.primary { background: var(--accent); color: var(--on-accent); border: 0; font-weight: 700; font-size: 13.5px; padding: 11px 14px; }   /* ONE per surface */
.sk-btn.primary:hover { background: var(--accent-hover); }
.sk-btn.ghost { background: none; border: 0; color: var(--accent); padding: 6px 0; }
.sk-btn.ghost:hover { color: var(--text); }
.sk-btn.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.sk-btn.bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.sk-fab { position: absolute; right: var(--inset); bottom: var(--inset); background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: 12px 18px; font: 700 14px var(--font); box-shadow: 0 10px 30px var(--accent-ring); cursor: pointer; }
.sk-more { width: 36px; padding: 0; font-weight: 700; }   /* "···" secondary menu button next to the primary */

/* ---- fields ---- */
.sk-field { display: flex; align-items: center; gap: 9px; height: 39px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-control); padding: 0 11px; }
.sk-field > .k { color: var(--muted); font-size: 12px; width: 42px; flex: none; }          /* "From", "Want", "Drive" */
.sk-field input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: 13px var(--font); }
.sk-field .chev { color: var(--muted); }
.sk-input { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-field); padding: 9px 11px; color: var(--text); font: 11.5px var(--font); }   /* stacked form inputs (Account) */
.sk-disclosure { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1.5px 6px; align-items: center; background: none; border: 0; padding: 4px 2px; color: var(--muted); font: 500 12px var(--font); cursor: pointer; text-align: left; width: 100%; }
.sk-disclosure .v { grid-column: 2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-disclosure .chev { display: inline-block; transition: transform .2s; } .sk-disclosure[aria-expanded="true"] .chev { transform: rotate(90deg); }

/* ---- switch ---- */
.sk-switch { width: 34px; height: 19px; border-radius: 10px; background: var(--track); position: relative; flex: none; transition: background .2s; }
.sk-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left .2s; }
.sk-switch.on { background: var(--accent); } .sk-switch.on::after { left: 17px; background: var(--on-accent); }
[data-theme="light"] .sk-switch.on::after { background: #fff; }
.sk-switch.curate.on { background: var(--warn); }   /* team-only Curate mode is amber */

/* ---- text ---- */
.sk-label { font: 700 11px var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }   /* section labels */
.sk-label .sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sk-h2 { font: 700 19px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0; }          /* panel headings */
.sk-title { font: 800 21px/1.1 var(--font-display); letter-spacing: -.02em; }                    /* resort / site card title */
.sk-h1 { font: 800 36px/1.05 var(--font-display); letter-spacing: -.03em; margin: 0; }          /* Site profile */
.sk-h1.gear { font-size: 30px; letter-spacing: -.025em; }
.sk-hero { font: 800 42px/1.05 var(--font-display); letter-spacing: -.03em; text-wrap: pretty; } /* signed-out headline */
.sk-mono { font: 500 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); } .text-2 { color: var(--text-2); }

/* ---- chips / pills ---- */
.sk-chip { background: var(--panel2); border: 1px solid var(--line-strong); border-radius: var(--r-chip); padding: 3.5px 9px; font-size: 11.5px; color: var(--text); }   /* tags, spec chips */
.sk-chip.quiet { color: var(--muted); }
.sk-suggest { background: var(--panel2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 11px; font: 12px var(--font); color: var(--text-2); cursor: pointer; text-align: left; }
.sk-suggest:hover { border-color: var(--accent-line); color: var(--text); }
.sk-pill { display: inline-block; border-radius: var(--r-pill); padding: 3px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sk-pill.ok { background: var(--ok-bg); color: var(--ok-text); }                          /* Open · snowing, Verified */
.sk-pill.neutral { background: var(--panel2); color: var(--muted); border: 1px solid var(--line-dashed); }   /* Forecast only */
.sk-pill.d0 { background: var(--d0-bg); color: var(--d0-text); } .sk-pill.d1 { background: var(--d1-bg); color: var(--d1-text); }
.sk-pill.d2 { background: var(--d2-bg); color: var(--d2-text); } .sk-pill.d3 { background: var(--d3-bg); color: var(--d3-text); }
.sk-pill.d4 { background: var(--d4-bg); color: var(--d4-text); } .sk-pill.d5 { background: var(--d5-bg); color: var(--d5-text); }
.sk-resort-chip { background: var(--chip-bg); color: var(--chip-text); border-radius: 5px; padding: .5px 5px; font-weight: 600; cursor: pointer; white-space: nowrap; }   /* [[Niseko United]] inside an answer */
.sk-cite { background: var(--cite-bg); color: var(--cite-text); border-radius: 4px; padding: 0 4.5px; font-size: .85em; font-weight: 600; margin: 0 1px; }               /* [1] */
.sk-ext { color: var(--accent2); }   /* niseko.ne.jp ↗ */

/* ---- data ---- */
.sk-stat { background: var(--tile); border-radius: var(--r-field); padding: 8px 9px; font-size: 10.5px; color: var(--muted); }
.sk-stat b { display: block; font: 700 17px/1.2 var(--font); color: var(--text); margin-top: 2px; }
.sk-stat b .unit { font-size: .6em; color: var(--muted); }
.sk-stat.accent b { color: var(--accent); }
.sk-stats-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.sk-stats-5 { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.sk-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-row); font-size: 12.5px; cursor: pointer; }
.sk-row:last-child { border-bottom: 0; } .sk-row:hover { color: var(--accent); }
.sk-row .meta { color: var(--muted); font-size: .9em; white-space: nowrap; }
.sk-leader { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 10px; padding: 10px 0; border-bottom: 1px solid var(--line-row); cursor: pointer; font-size: 13px; }
.sk-leader b { color: var(--accent); font-variant-numeric: tabular-nums; }
.sk-leader .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--bar); }
.sk-days { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 5px; }
.sk-day { text-align: center; font-size: 10.5px; color: var(--muted); }
.sk-day .b { height: 36px; display: flex; align-items: flex-end; margin-bottom: 4px; }
.sk-day .b i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--bar-vertical); min-height: 2px; }
.sk-day b { display: block; color: var(--text); font-size: 11.5px; }
.sk-trait-bar { height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; } .sk-trait-bar i { display: block; height: 100%; border-radius: 3px; background: var(--bar-trait); }
.sk-share { display: flex; height: 10px; border-radius: 5px; overflow: hidden; }   /* terrain mix: green / blue / black / expert(striped) */
.sk-glow-dot { width: 8.5px; height: 8.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent-glow); flex: none; }
.sk-ramp { width: 70px; height: 5px; border-radius: 2.5px; flex: none; }   /* background: var(--ramp-snow) etc. */
.sk-placeholder { border-radius: 10px; border: 1px solid var(--line-strong); background: var(--placeholder-stripe); display: flex; align-items: center; justify-content: center; }
.sk-placeholder span { font: 500 10.5px var(--font-mono); color: var(--muted); background: var(--panel-solid); padding: 4px 8px; border-radius: 6px; }
.sk-empty { padding: 11px 12px; border: 1px dashed var(--line-dashed); border-radius: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.sk-note { padding: 9px 11px; border-radius: 9px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-size: 12px; }   /* transient "Sign in to…" */

/* ---- assistant thread ---- */
.sk-thread { flex: 1; min-height: 0; overflow: auto; padding: 13px 16px; display: flex; flex-direction: column; gap: 11px; }
.sk-msg { padding: 10px 12px; font-size: 13px; line-height: 1.55; border: 1px solid var(--line); }
.sk-msg.user { align-self: flex-end; max-width: 88%; background: var(--panel2); border-radius: 12px 12px 4px 12px; line-height: 1.45; }
.sk-msg.ai { align-self: flex-start; border-radius: 12px 12px 12px 4px; }
.sk-msg .sources { margin-top: 9px; padding-top: 7px; border-top: 1px dashed var(--line-dashed); display: grid; gap: 3px; font-size: .85em; color: var(--muted); }
.sk-msg .actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .sk-msg .actions .sk-btn { padding: 5px 9px; font-size: .9em; }
.sk-progress { display: grid; gap: 4px; font-size: 12.5px; } .sk-progress .done { color: var(--muted); }
.sk-ask { margin: 0 10px 10px; display: flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 11px; padding: 5px 5px 5px 13px; }
.sk-ask input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: 13px var(--font); padding: 4px 0; }
.sk-ask .sk-btn.primary { border-radius: 8px; padding: 8px 13px; font-size: 12.5px; }

/* ---- map furniture ---- */
.sk-map-chip { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 13px; background: var(--panel); backdrop-filter: var(--blur); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); font-size: 12.5px; white-space: nowrap; }
.sk-map-ctrl { display: flex; flex-direction: column; }
.sk-map-ctrl button { width: 34px; height: 34px; padding: 0; background: var(--panel); border: 1px solid var(--line-strong); color: var(--text); font: 700 22px/1 var(--font); cursor: pointer; }
.sk-map-ctrl button:first-child { border-radius: 9px 9px 0 0; border-bottom: 0; } .sk-map-ctrl button:last-child { border-radius: 0 0 9px 9px; border-top: 0; color: var(--muted); font-size: 15px; font-weight: 600; }
.sk-ring { width: 40px; height: 40px; border: 2.5px solid var(--accent); border-radius: 50%; box-shadow: 0 0 20px var(--accent-glow), inset 0 0 12px var(--accent-ring); pointer-events: none; }
.sk-legend-row { display: flex; align-items: center; gap: 9px; padding: 5px 7px; margin: 0 -7px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.sk-legend-row:hover { background: var(--panel2); } .sk-legend-row.off { opacity: .4; }
.sk-legend-row .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }

/* ─── Small screens ──────────────────────────────────────────────────────────────────────────────────────────
   Every page header carries a wordmark, four nav links, a search box and account controls. That fits a laptop
   and overflows a phone, cutting the last link off the right edge. Let the nav scroll sideways instead of
   pushing, drop the search box to an icon's worth of space, and keep tap targets at a finger's size. */
@media (max-width: 720px) {
  header { gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; }
  header nav, .sk-nav { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; flex: 1 1 auto; min-width: 0; }
  header nav::-webkit-scrollbar, .sk-nav::-webkit-scrollbar { display: none; }
  header nav a, .sk-nav a { white-space: nowrap; flex: none; }
  .sk-wordmark { font-size: 18px; flex: none; }
  #omni, #omnibox, .sk-omnibox { min-width: 0; }
  header #omni { display: none; }                      /* search lives on the page, not in a cramped bar */
  .sk-btn, .sk-icon-btn, .btn { min-height: 40px; }
  .sk-icon-btn, .ibtn { min-width: 40px; }
  input, select, textarea { font-size: 16px; }          /* below 16px iOS zooms the whole page on focus */
}

/* The one mobile menu (built by skiai-shell.js). Hidden entirely above 720px, where the header has room. */
#sk-menu-btn { display: none; }
@media (max-width: 720px) {
  #sk-menu-btn { display: inline-flex; align-items: center; justify-content: center; order: -1; }
  header nav, .sk-nav { display: none !important; }     /* every destination now lives in the menu */
  #sk-menu { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); display: block;
    padding: calc(60px + env(safe-area-inset-top)) 10px 10px; overflow: auto; }
  #sk-menu[hidden] { display: none; }
  .sk-menu-card { background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: var(--r-panel);
    box-shadow: var(--shadow-frame); padding: 6px; display: grid; gap: 2px; max-width: 520px; margin: 0 auto; }
  .sk-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    padding: 11px 13px; border-radius: var(--r-control); color: var(--text); text-decoration: none; font: inherit; min-height: 44px; }
  .sk-menu-item:hover, .sk-menu-item:focus-visible { background: var(--panel2); }
  .sk-menu-item.on { background: var(--accent-soft); color: var(--accent); }
  .sk-menu-item.accent { background: var(--accent-soft); color: var(--accent); }
  .sk-menu-item b { display: block; font: 600 15px/1.3 var(--font); }
  .sk-menu-item span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
  .sk-menu-item.on span, .sk-menu-item.accent span { color: inherit; opacity: .75; }
  .sk-menu-head { padding: 12px 13px 4px; font: 700 10.5px var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
  .sk-menu-foot { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
  body.sk-menu-open { overflow: hidden; }
}

/* ─── Direct messages in the header ──────────────────────────────────────────────────────────────────────────
   The button carries an unread count; the panel holds the conversation list and the thread itself, so a reply
   never means leaving the page you were on. */
.sk-dot-n { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 10px/16px var(--font);
  text-align: center; box-shadow: 0 0 0 2px var(--panel-solid); }
#sk-dm { position: fixed; top: calc(var(--header-h) + 10px); right: 12px; z-index: 70; width: min(380px, calc(100vw - 20px));
  background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: var(--r-panel);
  box-shadow: var(--shadow-frame); overflow: hidden; }
#sk-dm[hidden] { display: none; }
.sk-dm-head { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.sk-dm-head b { flex: 1; font: 700 14px var(--font); }
.sk-dm-new, .sk-dm-back { background: none; border: 0; color: var(--muted); text-decoration: none; cursor: pointer;
  font: 600 17px/1 var(--font); padding: 4px 8px; border-radius: var(--r-sm); min-height: 32px; }
.sk-dm-new:hover, .sk-dm-back:hover { background: var(--panel2); color: var(--text); }
.sk-dm-list { max-height: min(56vh, 420px); overflow: auto; }
.sk-dm-empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }
.sk-dm-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--line-row); padding: 10px 13px; cursor: pointer; color: var(--text);
  font: inherit; min-height: 56px; }
.sk-dm-row:hover { background: var(--panel2); }
.sk-dm-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--tile); flex: none; }
.sk-dm-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sk-dm-who b { font: 600 13.5px var(--font); }
.sk-dm-last { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-dm-row.unread .sk-dm-last { color: var(--text); font-weight: 600; }
.sk-dm-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; flex: none; }
.sk-dm-pip { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); font: 700 10px/18px var(--font); text-align: center; }
.sk-dm-thread { padding: 10px 12px 12px; }
.sk-dm-thread .skc-log { max-height: min(46vh, 330px); }
@media (max-width: 720px) {
  /* on a phone the panel is the screen, the same as every other messaging app */
  #sk-dm { top: auto; left: 0; right: 0; bottom: 0; width: auto; border-radius: 18px 18px 0 0;
    max-height: 82vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
  .sk-dm-list { max-height: none; flex: 1; }
}

/* Popup for a member offering a service on the map */
.guide-pop .maplibregl-popup-content { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: var(--r-control); padding: 12px 14px; box-shadow: var(--shadow-pop); }
.guide-pop .maplibregl-popup-tip { border-top-color: var(--panel-solid); border-bottom-color: var(--panel-solid); }
.guide-pop .gp { display: grid; gap: 3px; min-width: 190px; max-width: 250px; }
.guide-pop .gp-kind { font: 700 10px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.guide-pop .gp b { font: 700 14px var(--font-display); }
.guide-pop .gp-head { color: var(--muted); font-size: 12px; line-height: 1.4; }
.guide-pop .gp-price { font-size: 12px; font-weight: 600; margin-top: 2px; }
.guide-pop .gp-acts { display: flex; gap: 12px; margin-top: 7px; }
.guide-pop .gp-acts a { color: var(--accent); font-weight: 600; font-size: 12.5px; text-decoration: none; }
.guide-pop .gp-acts a:hover { text-decoration: underline; }

/* Phones narrower than ~480px. The header carries a menu, the wordmark, your account and three icon buttons, and
   at 360px that was 130px wider than the screen — the whole page scrolled sideways. Nothing is removed: the account
   pill keeps its avatar, and below 400px the wordmark keeps the hound, which is the same link home. */
@media (max-width: 480px) {
  header { gap: 6px !important; }
  .sk-account { font-size: 0 !important; gap: 0 !important; padding: 3px !important; }
  .sk-account .sk-avatar { font-size: 12px; }
  .sk-icon-btn { min-width: 38px; }
}
@media (max-width: 400px) {
  .sk-wordmark { font-size: 0 !important; gap: 0 !important; }
  .sk-wordmark img { width: 30px; height: 30px; }
}