/* Compass Afar -- component styles. Every colour, size, radius, shadow and duration is a token from theme.css
   (loaded first by index.html); nothing here hardcodes a hue. */

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0; background: var(--wash); color: var(--ink);
  font-family: var(--font-sans);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(0px, 4vw, 40px); min-height:100dvh;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
img{ max-width:100%; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.mono{ font-family: var(--font-mono); }
h1,h2,h3{ font-family: var(--font-display); margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color: var(--accent-deep); }

/* ---------- compass mark ---------- */
.mark{ display:inline-flex; }
.mark svg{ display:block; }

/* ---------- app shell / frame ---------- */
.app-shell{ width:100%; display:flex; justify-content:center; }
.app-frame{
  position:relative; width:100%; max-width:420px; height:min(860px, 95dvh);
  background: var(--surface); border-radius: var(--radius-l);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-float);
  overflow:hidden; display:flex; flex-direction:column;
}
@media (max-width:480px){
  body{ padding:0; }
  .app-frame{ max-width:none; height:100dvh; border-radius:0; box-shadow:none; }
}

.app-header{
  flex:none; display:grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px;
  padding: 16px 18px 12px;
}
.icon-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border-strong);
  background: var(--surface-soft); color: var(--ink-soft); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none;
}
.icon-btn:hover{ background: var(--chip); color: var(--ink); }
.icon-btn svg{ width:16px; height:16px; }
.app-header .tag{
  font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--tracking-caps); font-weight:600;
  color: var(--accent-deep); background: var(--chip); border-radius: var(--radius-pill); padding:5px 10px;
}
.header-left{ justify-self:start; display:flex; align-items:center; gap:8px; min-width:0; }
.header-right{ justify-self:end; display:flex; align-items:center; gap:8px; }
/* THE LOCKUP: "Compass [dial] Afar". The dial is sized to the text's cap height and centred on it, with the same
   gap on both sides; the same rule set serves the header (.lockup) and the menu head (.lockup.lg). */
.lockup{ display:inline-flex; align-items:center; gap:.34em; white-space:nowrap; font-size: var(--fs-title); line-height:1; }
.lockup .word{ font-family: var(--font-display); font-weight:600; font-size:1em; color: var(--ink); line-height:1; }
.lockup .lockup-mark{ display:inline-flex; width:.8em; height:.8em; flex:none; transform: translateY(-.03em); }
.lockup .lockup-mark .c-rose{ width:100%; height:100%; }
.lockup.lg{ font-size:1.5rem; gap:.3em; }
.header-logo{ justify-self:center; }
/* launch: the flying dial lands between the words, which then fade in on either side as it settles */
html.launching .header-logo .word{ opacity:0; }
.header-logo .word{ transition: opacity 300ms ease, transform 300ms var(--ease-out); }
html.launching .header-logo .word:first-child{ transform: translateX(6px); }
html.launching .header-logo .word:last-child{ transform: translateX(-6px); }
html.launching .header-mark{ opacity:0; } /* the launch animation's flying dial lands here, then this one takes over */
.header-spacer{ flex:1; }

.screens{ position:relative; flex:1; min-height:0; }
.screen{
  position:absolute; inset:0; padding: 4px 22px 22px;
  display:flex; flex-direction:column; overflow-y:auto;
  transform: translateX(100%); opacity:0; pointer-events:none;
  transition: transform var(--dur-slow) var(--ease-inout), opacity var(--dur-base) ease;
}
.screen.active{ transform:translateX(0); opacity:1; pointer-events:auto; }
.screen.prev{ transform:translateX(-100%); opacity:0; }

.progress{ display:flex; gap:6px; margin: 6px 0 20px; flex:none; }
.progress i{ flex:1; height:4px; border-radius:999px; background: var(--border); display:block; }
.progress i.done{ background: var(--accent); }

.screen-head{ margin-bottom:20px; flex:none; position:relative; }
.detail-head{ position:relative; }
.screen-head .eyebrow{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); font-weight:600; }
.screen-head h2{ font-size: var(--fs-display); font-weight:600; margin-top:8px; }
.screen-head .sub{ color: var(--ink-soft); font-size: var(--fs-body); margin-top:8px; line-height:1.5; }

/* ---------- splash ---------- */
#screen-splash{ align-items:center; justify-content:center; text-align:center; gap:18px; padding-inline:24px; }
.splash-lockup{ display:flex; align-items:center; gap:8px; }
.splash-lockup .word{ font-family: var(--font-display); font-weight:600; font-size:clamp(1.4rem,6.6vw,1.9rem); color: var(--ink); }
.mark-badge{ position:relative; width:58px; height:58px; display:flex; align-items:center; justify-content:center; flex:none; }
.mark-badge .pulse{
  content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--border-strong);
  animation: pulse-ring 2.6s cubic-bezier(.4,0,.6,1) infinite;
}
.mark-badge .mark{ position:relative; z-index:1; }
.mark-badge .mark .c-rose{ width:44px; height:44px; }
@keyframes pulse-ring{ 0%{ transform:scale(.8); opacity:.9; } 70%{ transform:scale(1.35); opacity:0; } 100%{ transform:scale(1.35); opacity:0; } }

/* ---------- buttons / inputs ---------- */
.btn{
  appearance:none; border:none; cursor:pointer; border-radius:999px; font-weight:700; font-size: var(--fs-body);
  padding:15px 26px; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
}
.btn-primary{ background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); }
.btn-primary:hover{ background: var(--accent-deep); }
.btn-primary:active{ background: var(--accent-press); }
.btn-ghost{ background: var(--surface-soft); color: var(--ink); border:1.5px solid var(--border); }
.btn-ghost:hover{ border-color: var(--border-strong); }
.btn-sm{ padding:9px 16px; font-size: var(--fs-body); width:auto; }
.btn-link{ all:unset; cursor:pointer; color: var(--accent-deep); font-weight:700; font-size: var(--fs-body); }
.btn-link[hidden]{ display:none; } /* all:unset would otherwise beat the hidden attribute */
#signin-retry-btn{ display:inline-block; margin:6px 0 14px; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size: var(--fs-caption); font-weight:700; color: var(--ink-soft); margin-bottom:6px; }
.field input, .field select{
  width:100%; font-family: var(--font-sans); font-size: var(--fs-body); font-weight:600; color:var(--ink);
  background: var(--surface-soft); border:1.5px solid var(--border); border-radius: var(--radius-m);
  padding:12px 14px;
}
.field input:focus, .field select:focus{ border-color: var(--accent); outline:none; background: var(--surface); }
.field-error{ color:var(--risk-fg); font-size: var(--fs-caption); margin-top:6px; min-height:1em; }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }

.cal-cost-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.search{ position:relative; margin-bottom:16px; flex:none; }
.search input{
  width:100%; font-family: var(--font-sans); font-size: var(--fs-body); font-weight:600; color:var(--ink);
  background: var(--surface-soft); border:1.5px solid var(--border); border-radius: var(--radius-m);
  padding:14px 16px 14px 42px;
}
.search input::placeholder{ color: var(--ink-faint); font-weight:500; }
.search input:focus{ border-color: var(--accent); outline:none; background: var(--surface); }
.search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:17px; height:17px; color: var(--ink-faint); pointer-events:none; }

.list{ display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1; padding-bottom:6px; }
.row-btn{
  all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:13px;
  border:1.5px solid var(--border); border-radius: var(--radius-m); padding:14px 15px; background: var(--surface);
}
.row-btn:hover{ border-color: var(--border-strong); background: var(--p2); }
.row-btn[aria-pressed="true"]{ border-color: var(--accent); background: var(--p2); }
.row-btn[disabled]{ cursor:default; opacity:.55; }
.row-icon{
  flex:none; width:38px; height:38px; border-radius:50%; background: var(--chip);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:700; font-size: var(--fs-caption); color: var(--accent-deep);
}
.row-btn[aria-pressed="true"] .row-icon{ background: var(--accent); color: var(--on-accent); }
.row-body{ flex:1; min-width:0; text-align:left; display:flex; flex-direction:column; gap:2px; }
.row-title{ font-weight:700; font-size: var(--fs-body); display:block; }
.row-sub{ font-size: var(--fs-caption); color: var(--ink-soft); display:block; }
.row-soon{
  font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft);
  background: var(--surface-soft); border:1px solid var(--border); border-radius:999px; padding:4px 9px;
}

/* ---------- detail / map ---------- */
.detail-head{ flex:none; margin-bottom:16px; }
.detail-head .eyebrow{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); font-weight:600; }
.detail-head h2{ font-size: var(--fs-display); font-weight:600; margin-top:6px; line-height:1.15; }
.detail-head .loc{ font-size: var(--fs-body); color: var(--ink-soft); margin-top:5px; }
.detail-blurb{ font-size: var(--fs-body); color: var(--ink-soft); line-height:1.55; margin-bottom:18px; }

.leaflet-map{ height:220px; border-radius: var(--radius-m); overflow:hidden; border:1.5px solid var(--border); margin-bottom:18px; flex:none; background: var(--map-bg); }
.map-attrib-note{ font-size: var(--fs-caption); color: var(--ink-faint); margin: -12px 0 16px; }

.transit-title{ font-size: var(--fs-caption); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:10px; flex:none; font-family: var(--font-mono); }



/* ---------- filter chips ---------- */
.filter-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; flex:none; }
.f-chip{
  all:unset; flex:none; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600; padding:8px 13px;
  border-radius:999px; border:1.5px solid var(--border); background: var(--surface); color: var(--ink-soft); cursor:pointer; white-space:nowrap;
}
.f-chip:hover{ border-color: var(--border-strong); }
.f-chip[aria-pressed="true"]{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.f-chip{ display:inline-flex; align-items:center; }
.f-chip .icon{ width:13px; height:13px; margin-right:5px; }
/* a second, lighter row of pills sitting under a primary control (e.g. Community's General topic filters under
   its My School / General / Requests segmented tabs) -- borderless until picked, so it reads as one step down
   in the hierarchy rather than a second copy of the row above it. */
.chip-row-sm{ margin-top:-4px; scrollbar-width:none; }
.chip-row-sm::-webkit-scrollbar{ display:none; } /* swipeable like an iOS pill row, no visible scrollbar */
.chip-row-sm .f-chip{ border-color:transparent; background:transparent; color: var(--neutral-text); padding:6px 11px; font-family: var(--font-sans); font-weight:600; }
.chip-row-sm .f-chip:hover{ background: var(--neutral-fill); }
.chip-row-sm .f-chip[aria-pressed="true"]{ background: var(--chip); border-color:transparent; color: var(--accent-deep); }

.empty-note{ color: var(--ink-soft); font-size: var(--fs-body); text-align:center; padding:26px 10px; }
/* every empty state carries the accent rose (a mask, so it takes the ink-faint token) */
.empty-note::before{ content:""; display:block; width:26px; height:26px; margin:0 auto 8px; background: var(--ink-faint); opacity:.8; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='none' stroke='black' stroke-width='5'/><circle cx='50' cy='50' r='29' fill='none' stroke='black' stroke-width='3'/><polygon points='50,14 44,50 56,50' fill='black'/><polygon points='50,86 44,50 56,50' fill='black' opacity='.45'/><circle cx='50' cy='50' r='6' fill='black'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='none' stroke='black' stroke-width='5'/><circle cx='50' cy='50' r='29' fill='none' stroke='black' stroke-width='3'/><polygon points='50,14 44,50 56,50' fill='black'/><polygon points='50,86 44,50 56,50' fill='black' opacity='.45'/><circle cx='50' cy='50' r='6' fill='black'/></svg>") center / contain no-repeat; }
.view-toggle, .tab-toggle{ display:flex; gap:6px; margin-bottom:14px; flex:none; }
.view-toggle button, .tab-toggle button{
  all:unset; flex:1; text-align:center; cursor:pointer; font-weight:700; font-size: var(--fs-body); padding:8px; border-radius:10px;
  background: var(--surface-soft); color: var(--ink-soft); border:1.5px solid var(--border);
}
.view-toggle button.active, .tab-toggle button.active{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- community: segmented tabs, one-line composer, light post cards ----------
   Chrome here is system grey (--neutral-*); the rose accent is reserved for whatever is selected. */
.tab-toggle.seg{ background: var(--neutral-fill); border:none; border-radius: var(--radius-pill); padding:3px; gap:2px; }
.tab-toggle.seg button{ border:none; background:transparent; color: var(--neutral-text); border-radius: var(--radius-pill); padding:7px 6px; font-size: var(--fs-caption); }
.tab-toggle.seg button.active{ background: var(--accent); color: var(--on-accent); }
.composer{ margin-bottom: var(--sp-4); flex:none; }
.composer-row{ position:relative; }
.composer textarea{
  width:100%; box-sizing:border-box; display:block; font:inherit; font-size: var(--fs-body); line-height:1.4; resize:none; min-height:48px; max-height:120px;
  padding: 13px 52px 13px 16px; background: var(--neutral-fill); border:1.5px solid transparent; border-radius:24px; color: var(--ink);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.composer textarea:focus{ outline:none; border-color: var(--accent); background: var(--surface); }
.composer-send{
  all:unset; box-sizing:border-box; position:absolute; right:6px; top:6px; width:36px; height:36px; border-radius:50%; cursor:pointer;
  background: var(--accent); color: var(--on-accent); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-accent);
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease;
}
.composer-send .icon{ width:17px; height:17px; }
.composer-send:hover{ background: var(--accent-deep); } .composer-send:active{ transform:scale(.94); }
.composer-send:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.composer-meta{ display:none; align-items:center; gap:10px; margin-top:8px; padding-left:4px; }
.composer.expanded .composer-meta{ display:flex; }
.composer-scope{
  all:unset; box-sizing:border-box; cursor:pointer; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:600; letter-spacing:.02em;
  padding:5px 11px; border-radius: var(--radius-pill); border:1.5px solid var(--border); background: var(--surface); color: var(--ink-soft);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.composer-scope[aria-pressed="true"]{ background: var(--chip); border-color: var(--border-strong); color: var(--accent-deep); }
.composer-scope:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.composer-hint{ font-size: var(--fs-caption); color: var(--ink-faint); line-height:1.3; }
/* the composer's own topic pill, only shown once General is on -- same small/borderless language as .chip-row-sm,
   single-select (tap again to clear), entirely optional. */
.composer-cat-row{ display:flex; flex-wrap:wrap; gap:6px; margin: 8px 0 0; padding-left:4px; }
.composer-cat-row[hidden]{ display:none; }
.composer-cat-row .f-chip{ border-color:transparent; background: var(--neutral-fill); color: var(--neutral-text); padding:6px 11px; font-family: var(--font-sans); font-weight:600; }
.composer-cat-row .f-chip:hover{ background: var(--chip); }
.composer-cat-row .f-chip[aria-pressed="true"]{ background: var(--chip); border-color: var(--border-strong); color: var(--accent-deep); }
.composer .field-error:empty{ min-height:0; margin:0; }
.post{ display:flex; gap:12px; padding:14px 16px; margin-bottom:10px; background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-card); }
.post-avatar{ flex:none; width:38px; height:38px; border-radius:50%; background: var(--chip); color: var(--accent-deep); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:700; font-size: var(--fs-caption); }
.post.mine .post-avatar{ background: var(--accent); color: var(--on-accent); }
.post-main{ flex:1; min-width:0; }
.post-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.post-who{ font-weight:700; font-size: var(--fs-body); }
.post-time{ margin-left:auto; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-faint); white-space:nowrap; }
.post-body{ font-size: var(--fs-body); line-height:1.45; overflow-wrap:anywhere; }
/* a post's own topic tag: plain gray, never the accent -- the accent is reserved for the filter pill someone
   actually picked, not for restating it on every post that happens to match. */
.post-cat{ display:inline-flex; align-items:center; gap:4px; font-size: var(--fs-caption); color: var(--ink-faint); margin-top:6px; }
.post-cat .icon{ width:12px; height:12px; }
.post-actions{ display:flex; gap:14px; margin-top:8px; }
.post-actions .quiet{ all:unset; cursor:pointer; font-size: var(--fs-caption); font-weight:700; color: var(--accent-deep); }
.post-actions .quiet[disabled]{ opacity:.6; cursor:default; }
.post-actions .quiet:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; border-radius:6px; }
.post-actions .tag{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-faint); }
.empty-compass{ text-align:center; padding: var(--sp-6) var(--sp-3); color: var(--ink-soft); font-size: var(--fs-body); }
.empty-compass .c-rose{ width:48px; height:48px; margin:0 auto 10px; }
.community-friend-tag{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--accent-deep); background: var(--chip); padding:4px 9px; border-radius:999px; }
.community-req-actions{ display:flex; gap:8px; }

/* ---------- housing list card ---------- */
.housing-card{ border:1.5px solid var(--border); border-radius: var(--radius-m); margin-bottom:10px; overflow:hidden; background: var(--surface); flex:none; }
.housing-card[data-open="true"]{ border-color: var(--border-strong); }
.housing-summary{ all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:flex; align-items:flex-start; gap:10px; padding:14px 15px; }
.h-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.h-title{ font-weight:700; font-size: var(--fs-body); }
.h-meta{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-soft); }
.h-meta .v-ok{ color: var(--safe-fg); font-weight:700; }
.h-meta .v-warn{ color: var(--mod-fg); font-weight:700; }
.attr-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.attr-chip{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-soft); background: var(--surface-soft); border:1px solid var(--border); border-radius:999px; padding:2px 8px; }
.h-side{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.h-chev{ color: var(--ink-faint); transition: transform var(--dur-fast) ease; display:flex; }
.h-chev .icon{ width:16px; height:16px; }
.housing-card[data-open="true"] .h-chev{ transform:rotate(180deg); color: var(--accent-deep); }
.housing-expand{ padding:0 15px 16px; border-top:1px solid var(--border); }
.housing-expand[hidden]{ display:none; }
.commute-stat{ display:flex; align-items:baseline; gap:8px; margin:14px 0; }
.commute-stat .big{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-display); color: var(--ink); }
.commute-stat .lbl{ font-size: var(--fs-body); color: var(--ink-soft); }
.price-compare{ margin-bottom:16px; }
.pc-label{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:8px; }
.pc-track{ position:relative; height:6px; border-radius:999px; background: var(--chip); }
.pc-fill{ position:absolute; top:0; bottom:0; border-radius:999px; background: var(--border-strong); }
.pc-marker{ position:absolute; top:50%; width:13px; height:13px; border-radius:50%; background: var(--accent); border:2.5px solid var(--surface); transform:translate(-50%,-50%); box-shadow:0 1px 5px rgba(var(--ink-rgb),.4); }
.pc-note{ font-size: var(--fs-body); margin-top:9px; }
.pc-note.ok{ color: var(--ink-soft); }
.pc-note.warn{ color: var(--mod-fg); font-weight:600; }
.source-line{ font-size: var(--fs-caption); color: var(--ink-faint); margin-bottom:14px; }
.verify-note{ display:flex; gap:8px; padding:12px 13px; border-radius:12px; font-size: var(--fs-body); line-height:1.45; margin-bottom:12px; }
.verify-note.ok{ background: var(--safe-bg); color: var(--safe-fg); }
.verify-note.warn{ background: var(--mod-bg); color: var(--mod-fg); }
.card-actions{ display:flex; gap:8px; }
.icon-toggle{
  all:unset; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border); background: var(--surface-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; color: var(--ink-soft);
}
.icon-toggle .icon{ width:17px; height:17px; }
.icon-toggle.saved{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.icon-toggle.saved .icon svg{ fill: currentColor; }
.icon-toggle.pop{ animation: heart-pop .35s ease; }
@keyframes heart-pop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.35);} 100%{ transform:scale(1);} }

/* ---------- swipe stack ---------- */
.swipe-stage{ position:relative; flex:1; min-height:340px; margin-bottom:12px; }
.swipe-card{
  position:absolute; inset:0; background: var(--surface); border:1.5px solid var(--border); border-radius: var(--radius-l);
  padding:20px; display:flex; flex-direction:column; box-shadow:0 20px 40px -20px rgba(var(--ink-rgb),.35); touch-action:none;
  cursor:grab; user-select:none;
}
.swipe-card:active{ cursor:grabbing; }
.swipe-card .sc-price{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-display); }
.swipe-card .sc-title{ font-weight:700; font-size: var(--fs-body); margin-top:4px; }
.swipe-card .sc-meta{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-soft); margin-top:8px; }
.swipe-card .sc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.swipe-card .sc-spacer{ flex:1; }
.swipe-card .sc-stamp{
  position:absolute; top:26px; font-family: var(--font-mono); font-weight:800; font-size: var(--fs-title); letter-spacing:.06em;
  padding:6px 14px; border-radius:10px; border:3px solid; text-transform:uppercase; opacity:0; transform:rotate(-12deg);
}
.swipe-card .sc-stamp.like{ right:22px; color: var(--safe-fg); border-color: var(--safe-fg); transform:rotate(10deg); }
.swipe-card .sc-stamp.pass{ left:22px; color:var(--risk-fg); border-color:var(--risk-fg); }
.swipe-actions{ display:flex; justify-content:center; gap:20px; flex:none; margin-bottom:6px; }
.swipe-btn{
  all:unset; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 10px 22px -12px rgba(var(--ink-rgb),.4); background: var(--surface); border:1.5px solid var(--border);
}
.swipe-btn .icon{ width:24px; height:24px; }
.swipe-btn.pass{ color:var(--risk-fg); }
.swipe-btn.like{ color: var(--accent-deep); }
.swipe-done{ text-align:center; color: var(--ink-soft); padding:40px 20px; }

/* ---------- safety ---------- */
.district-select{ margin-bottom:14px; flex:none; }
.district-card{ border:1.5px solid var(--border); border-radius: var(--radius-m); padding:16px; margin-bottom:12px; background: var(--surface); }
.district-card h3{ font-size: var(--fs-title); }
.vibe-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 14px; }
.vibe-chip{ font-size: var(--fs-caption); background: var(--chip); border-radius:999px; padding:5px 11px; display:inline-flex; align-items:center; gap:5px; }
.stat-pending{ display:flex; gap:8px; padding:12px 13px; border-radius:12px; font-size: var(--fs-body); line-height:1.45; background: var(--pending-bg); color: var(--pending-fg); margin-bottom:10px; }
.granularity-line{ font-size: var(--fs-caption); color: var(--ink-faint); }
.granularity-line a{ color: var(--ink-faint); text-decoration:underline; }

.police-activity{ margin-bottom:14px; }
.police-activity .pa-total{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.police-activity .pa-total .big{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-display); }
.police-activity .pa-total .lbl{ font-size: var(--fs-body); color: var(--ink-soft); }
.pa-breakdown{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin-bottom:10px; }
.pa-stat{ background: var(--surface-soft); border:1px solid var(--border); border-radius:10px; padding:8px; text-align:center; }
.pa-stat .n{ font-weight:700; font-size: var(--fs-body); }
.pa-stat .l{ font-size: var(--fs-caption); color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.caveat-note{ font-size: var(--fs-caption); color: var(--ink-soft); line-height:1.5; background: var(--surface-soft); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.out-of-scope-note{ display:flex; gap:8px; padding:12px 13px; border-radius:12px; font-size: var(--fs-body); line-height:1.45; background: var(--chip); color: var(--ink-soft); margin-bottom:10px; }

.citywide-card{ border:1.5px solid var(--border); border-radius: var(--radius-m); padding:16px; margin-bottom:16px; background: var(--surface); }
.citywide-card h3{ font-size: var(--fs-body); margin-bottom:4px; }
.citywide-period{ font-size: var(--fs-caption); color: var(--ink-faint); margin-bottom:12px; font-family: var(--font-mono); }
.cw-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--border); font-size: var(--fs-body); }
.cw-row:first-of-type{ border-top:none; }
.cw-row .cw-label{ color: var(--ink-soft); }
.cw-row .cw-count{ font-weight:700; font-family: var(--font-mono); }
.cw-row .cw-change{ font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:700; padding:2px 7px; border-radius:999px; margin-left:8px; }
.cw-change.up{ background: var(--mod-bg); color: var(--mod-fg); }
.cw-change.down{ background: var(--safe-bg); color: var(--safe-fg); }
.citywide-source{ font-size: var(--fs-caption); color: var(--ink-faint); margin-top:10px; }
.known-gap{ font-size: var(--fs-caption); line-height:1.5; color: var(--ink-soft); background: var(--surface-soft); border-radius:10px; padding:10px 12px; margin-top:10px; font-style:italic; }

/* ---------- District Activity Index gauge ---------- */
.gauge-card{ border:1.5px solid var(--border); border-radius: var(--radius-l); padding:20px; margin-bottom:16px; background: var(--surface); text-align:center; cursor:pointer; }
.gauge-svg{ width:150px; height:150px; margin:0 auto; }
.gauge-svg .track{ fill:none; stroke: var(--chip); stroke-width:10; }
.gauge-svg .progress{ fill:none; stroke: var(--accent); stroke-width:10; stroke-linecap:round; transform-origin:50% 50%; transform:rotate(-90deg); transition: stroke-dashoffset .6s ease; }
.gauge-number{ font-family: var(--font-display); font-weight:700; font-size: var(--fs-display); fill: var(--ink); }
.gauge-number.budget-amount{ font-size: var(--fs-display); }
.gauge-sub{ font-family: var(--font-mono); font-size: var(--fs-caption); fill: var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.gauge-title{ font-weight:700; font-size: var(--fs-body); margin-top:8px; }
.gauge-hint{ font-size: var(--fs-caption); color: var(--ink-faint); margin-top:4px; }
.gauge-factors{ margin-top:16px; text-align:left; display:flex; flex-direction:column; gap:10px; }
.gauge-factor-row .gf-head{ display:flex; justify-content:space-between; font-size: var(--fs-caption); margin-bottom:5px; }
.gauge-factor-row .gf-label{ color: var(--ink-soft); }
.gauge-factor-row .gf-value{ font-weight:700; font-family: var(--font-mono); }
.gauge-factor-track{ height:6px; border-radius:999px; background: var(--chip); overflow:hidden; }
.gauge-factor-fill{ height:100%; background: var(--border-strong); border-radius:999px; }

.methodology-modal .modal-card{ max-width:320px; text-align:left; }
.methodology-modal h3{ font-size: var(--fs-body); margin-bottom:10px; }
.methodology-modal p{ font-size: var(--fs-body); line-height:1.55; color: var(--ink-soft); margin-bottom:10px; }
.methodology-modal .formula-box{ font-family: var(--font-mono); font-size: var(--fs-caption); background: var(--surface-soft); border-radius:10px; padding:10px 12px; margin-bottom:10px; line-height:1.6; }

.disclosure-toggle{
  all:unset; display:flex; align-items:center; gap:6px; cursor:pointer; font-weight:700; font-size: var(--fs-body);
  color: var(--accent-deep); padding:10px 0; width:100%;
}
.disclosure-toggle .icon{ width:15px; height:15px; transition: transform var(--dur-fast) ease; }
.disclosure-toggle[aria-expanded="true"] .icon{ transform:rotate(180deg); }

.cw-row{ padding:7px 0; }
.cw-change{ display:inline-flex; align-items:center; gap:3px; background: var(--chip); }
.cw-change .arrow{ font-size: var(--fs-caption); }

/* ---------- events ---------- */
.event-card{ border:1.5px solid var(--border); border-radius: var(--radius-m); margin-bottom:10px; background: var(--surface); overflow:hidden; }
.event-summary-row{ display:flex; gap:12px; padding:15px; align-items:flex-start; cursor:pointer; }
.event-dropdown-actions{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.event-dropdown-actions .btn{ flex:1; }
.event-ticket-link{ display:flex; gap:12px; flex:1; min-width:0; text-decoration:none; color:inherit; }
.event-date{
  flex:none; width:52px; text-align:center; background: var(--chip); border-radius:12px; padding:8px 0; font-family: var(--font-mono); height:fit-content;
}
.event-date .d{ font-weight:800; font-size: var(--fs-title); line-height:1; color: var(--accent-deep); }
.event-date .m{ font-size: var(--fs-caption); text-transform:uppercase; letter-spacing:.05em; color: var(--ink-soft); }
.event-body{ flex:1; min-width:0; }
.event-name{ font-weight:700; font-size: var(--fs-body); }
.event-meta{ font-size: var(--fs-caption); color: var(--ink-soft); margin-top:4px; }
.event-cat{ display:inline-block; font-family: var(--font-mono); font-size: var(--fs-caption); text-transform:uppercase; letter-spacing:.05em; background: var(--surface-soft); border:1px solid var(--border); border-radius:999px; padding:3px 8px; margin-top:8px; }
.event-logo{ flex:none; width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; padding:3px; margin-top:6px; }
.event-logo img{ width:100%; height:100%; object-fit:contain; }
.event-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex:none; }
.event-expand{ padding:0 15px 16px; border-top:1px solid var(--border); margin-top:2px; }
.event-expand[hidden]{ display:none; }
.event-expand-btn{ all:unset; cursor:pointer; color: var(--ink-faint); display:flex; padding:4px; }
.event-expand-btn .icon{ width:16px; height:16px; transition: transform var(--dur-fast) ease; }
.event-card[data-open="true"] .event-expand-btn .icon{ transform:rotate(180deg); color: var(--accent-deep); }
/* the one "no home address" state (frontend/no-home-prompt.js): one line, one button into Housing -- never an error */
.no-home-prompt{ margin: 6px 0 4px; font-size: var(--fs-body); line-height:1.5; color: var(--ink-soft); }
.no-home-prompt .btn-link{ font-weight:700; }
/* Housing, with no address saved: the way back to Account for someone who already has a place */
.housing-nudge{ font-size: var(--fs-caption); color: var(--ink-soft); margin: -8px 0 var(--sp-3); flex:none; }
.housing-nudge[hidden]{ display:none; }
.housing-nudge .btn-link{ font-size: var(--fs-caption); }
/* arrival date: the sign-up step and Settings say what the date means, in one line */
.arrival-phase-line{ font-size: var(--fs-caption); color: var(--ink-soft); min-height:1.2em; margin: -6px 0 10px; }
.arrival-phase-line b{ color: var(--accent-deep); font-weight:700; }
.arrival-phase-line:empty{ min-height:0; margin:0; }
.field input[type="date"]{ -webkit-appearance:none; appearance:none; min-height:46px; }
.commute-address-prompt{ display:flex; gap:8px; padding:12px 13px; border-radius:12px; font-size: var(--fs-body); line-height:1.45; background: var(--pending-bg); color: var(--pending-fg); margin-top:14px; align-items:center; justify-content:space-between; }

/* on-card general commute chip, per spec #2 -- a cached background estimate shown on
   every card, not a live lookup (hence no refresh/spinner affordance here) */
.commute-chip{ display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-caption); color: var(--ink-soft); margin-top:6px; font-family: var(--font-mono); }
.commute-chip .network-logo{ width:16px; height:16px; padding:2px; border-radius:5px; }
.commute-chip.muted{ color: var(--ink-faint); }
/* an event card's route state (app.js: eventRouteSectionHTML): one line, one way forward */
.route-state{ margin: 6px 0 10px; font-size: var(--fs-body); line-height:1.5; color: var(--ink-soft); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.route-state .btn-link{ font-weight:700; }
.route-spinner{ width:14px; height:14px; border-radius:50%; border:2px solid var(--border-strong); border-top-color: var(--accent); animation: route-spin .8s linear infinite; }
@keyframes route-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .route-spinner{ animation:none; } }

.directions-dropdown{ padding-top:4px; }
.directions-total{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed var(--border); }
.directions-total .big{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-display); white-space:nowrap; }
.directions-total .lbl{ font-size: var(--fs-caption); color: var(--ink-soft); }

/* ---------- essentials ---------- */
/* a place is an .event-card (same expandable card as Events / My Calendar); this note sits above the list */
.essentials-note{ font-size: var(--fs-caption); color: var(--ink-soft); line-height:1.5; margin: 0 0 var(--sp-3); }

/* ---------- events calendar (All tab) ---------- */
.cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-nav button{ all:unset; cursor:pointer; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size: var(--fs-title); color: var(--ink-soft); background: var(--surface-soft); border:1px solid var(--border); }
.cal-month-label{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-title); }
.cal-weekdays{ display:grid; grid-template-columns: repeat(7,1fr); text-align:center; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-faint); text-transform:uppercase; margin-bottom:6px; }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; margin-bottom:16px; }
.cal-day{
  all:unset; box-sizing:border-box; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:10px; cursor:pointer; font-size: var(--fs-body); color: var(--ink); position:relative;
}
.cal-day:hover{ background: var(--surface-soft); }
.cal-day.empty{ cursor:default; visibility:hidden; }
.cal-day.today{ font-weight:800; color: var(--accent-deep); }
.cal-day .dot{ width:4px; height:4px; border-radius:50%; background: var(--accent); margin-top:2px; }
.cal-day.selected{ background: var(--accent); color: var(--on-accent); }
.cal-day.selected .dot{ background:#fff; }
.cal-day.past{ opacity:.35; }
.cal-day-heading{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); font-weight:700; margin-bottom:10px; }

/* ---------- auth ---------- */
.auth-toggle{ display:flex; gap:8px; margin-bottom:18px; }
.auth-toggle button{
  all:unset; flex:1; text-align:center; cursor:pointer; font-weight:700; font-size: var(--fs-body); padding:10px; border-radius:999px;
  background: var(--surface-soft); color: var(--ink-soft); border:1.5px solid var(--border);
}
.auth-toggle button.active{ background: var(--ink); color: var(--surface); border-color: var(--ink); }
.guest-note{ text-align:center; margin-top:14px; font-size: var(--fs-body); color: var(--ink-soft); }

.btn-google{ background: var(--surface); color: var(--ink); border:1.5px solid var(--border-strong); }
.btn-google:hover{ background: var(--surface-soft); }
.btn[disabled]{ opacity:.6; cursor:default; }

.divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color: var(--ink-faint); font-size: var(--fs-caption); font-weight:600; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background: var(--border); }

.password-wrap{ position:relative; }
.password-wrap input{ padding-right:64px; }
.password-toggle-btn{
  all:unset; position:absolute; right:12px; top:50%; transform:translateY(-50%); cursor:pointer;
  font-size: var(--fs-caption); font-weight:700; color: var(--accent-deep);
}
.password-strength{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.password-strength[hidden]{ display:none; }
.password-strength-bar{ flex:1; height:5px; border-radius:999px; background: var(--border); overflow:hidden; }
.password-strength-bar i{ display:block; height:100%; width:0%; border-radius:999px; transition: width var(--dur-fast) ease, background var(--dur-fast) ease; }
.password-strength-bar i.strength-weak{ background:var(--risk-fg); }
.password-strength-bar i.strength-fair{ background: var(--mod-fg); }
.password-strength-bar i.strength-strong{ background: var(--safe-fg); }
.password-strength span{ font-size: var(--fs-caption); font-weight:700; color: var(--ink-soft); min-width:36px; }

.forgot-row{ text-align:right; margin: -8px 0 10px; }

.walkthrough-list{ margin:0 0 22px; padding-left:22px; display:flex; flex-direction:column; gap:12px; color: var(--ink); font-size: var(--fs-body); }
.walkthrough-list li{ line-height:1.5; }
.walkthrough-list a{ color: var(--accent-deep); font-weight:700; }

.account-name{ font-weight:800; font-size: var(--fs-body); }

/* ---------- account / saved / badges ---------- */
.account-card{ display:flex; align-items:center; gap:12px; border:1.5px solid var(--border); border-radius: var(--radius-m); padding:14px; margin-bottom:16px; background: var(--surface); }
.account-avatar{ width:44px; height:44px; border-radius:50%; background: var(--accent); color: var(--on-accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--font-display); flex:none; }
.account-email{ font-weight:700; font-size: var(--fs-body); }
.account-sub{ font-size: var(--fs-caption); color: var(--ink-soft); }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; border:1.5px solid var(--border); border-radius: var(--radius-m); padding:13px 15px; margin-bottom:10px; background: var(--surface); }
.toggle-row .lbl{ font-weight:700; font-size: var(--fs-body); }
.switch{ position:relative; width:42px; height:24px; flex:none; }
.switch input{ opacity:0; width:100%; height:100%; margin:0; position:absolute; cursor:pointer; }
.switch .track{ position:absolute; inset:0; background: var(--border); border-radius:999px; transition: var(--dur-fast) ease; }
.switch .thumb{ position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition: var(--dur-fast) ease; }
.switch input:checked + .track{ background: var(--accent); }
.switch input:checked ~ .thumb{ transform:translateX(18px); }

.badge-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-bottom:8px; }
.badge-tile{ border:1.5px solid var(--border); border-radius: var(--radius-m); padding:14px 8px; text-align:center; background: var(--surface); }
.badge-tile.locked{ opacity:.35; }
.badge-tile .icon{ width:26px; height:26px; color: var(--accent-deep); }
.badge-tile.locked .icon{ color: var(--ink-faint); }
.badge-tile .name{ font-size: var(--fs-caption); font-weight:700; margin-top:6px; line-height:1.2; }

.section-title{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); font-weight:700; margin: 18px 0 10px; }
.section-title:first-child{ margin-top:0; }

/* ---------- toast / badge unlock ---------- */
.toast{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px); z-index:50;
  background: var(--ink); color: var(--surface); padding:12px 18px; border-radius:999px; font-size: var(--fs-body); font-weight:700;
  display:flex; align-items:center; gap:8px; opacity:0; transition: opacity var(--dur-base) ease, transform var(--dur-base) ease; pointer-events:none;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45); white-space:nowrap;
}
.toast .icon{ width:16px; height:16px; flex:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- chat bubble ---------- */
.chat-fab{
  position:absolute; right:16px; bottom:16px; z-index:40; width:52px; height:52px; border-radius:50%;
  background: var(--accent); color: var(--on-accent); border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 14px 28px -12px rgba(var(--accent-rgb),.6);
}
.chat-fab .icon{ width:24px; height:24px; }
.chat-fab[hidden]{ display:none; }
.chat-fab:hover{ background: var(--accent-deep); }
.chat-panel{
  position:absolute; right:14px; bottom:78px; z-index:41; width:min(300px, 80vw); max-height:380px;
  background: var(--surface); border:1.5px solid var(--border); border-radius: var(--radius-m); box-shadow:0 24px 50px -20px rgba(var(--ink-rgb),.4);
  display:flex; flex-direction:column; overflow:hidden; transform:translateY(12px) scale(.97); opacity:0; pointer-events:none; transition:var(--dur-fast) ease;
}
.chat-panel.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.chat-head{ padding:12px 14px; border-bottom:1px solid var(--border); font-weight:700; font-size: var(--fs-body); display:flex; align-items:center; justify-content:space-between; }
.chat-body{ flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; font-size: var(--fs-body); }
.chat-msg{ max-width:85%; padding:8px 11px; border-radius:12px; line-height:1.4; white-space:pre-line; }
.chat-msg.bot{ background: var(--surface-soft); align-self:flex-start; }
.chat-msg.me{ background: var(--accent); color: var(--on-accent); align-self:flex-end; }
.chat-msg.typing{ color: var(--ink-faint); animation: chat-typing-pulse 1.1s ease-in-out infinite; }
@keyframes chat-typing-pulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.chat-proposal-card{ align-self:stretch; border:1.5px solid var(--border); border-radius:12px; padding:10px 12px; background: var(--surface-soft); }
.chat-proposal-card .cpc-title{ font-weight:700; font-size: var(--fs-body); }
.chat-proposal-card .cpc-meta{ font-size: var(--fs-caption); color: var(--ink-soft); margin-top:2px; }
.chat-proposal-card .cpc-when{ font-weight:600; font-size: var(--fs-body); margin-top:2px; }
.chat-proposal-card .cpc-fields{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:8px; }
.chat-proposal-card .cpc-field{ display:flex; flex-direction:column; gap:3px; font-size: var(--fs-caption); color: var(--ink-soft); min-width:0; }
.chat-proposal-card .cpc-field[hidden]{ display:none; }
.chat-proposal-card .cpc-cat-field{ margin-top:8px; }
.chat-proposal-card .cpc-field input{ font:inherit; font-size: var(--fs-caption); font-weight:600; padding:6px 8px; border:1.5px solid var(--border); border-radius:10px; background: var(--surface); color: var(--ink); min-width:0; width:100%; box-sizing:border-box; }
.chat-proposal-card .cpc-cat-field select{ margin-top:0; }
.chat-proposal-card .cpc-actions{ display:flex; gap:8px; margin-top:9px; }
.chat-proposal-card .cpc-actions .btn{ flex:1; padding:7px 8px; font-size: var(--fs-caption); width:auto; }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }
.chat-suggest button{ all:unset; cursor:pointer; font-size: var(--fs-caption); background: var(--chip); color: var(--accent-deep); padding:5px 10px; border-radius:999px; }
.chat-input-row{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); }
.chat-input-row input{ flex:1; border:1.5px solid var(--border); border-radius:999px; padding:8px 12px; font-size: var(--fs-body); background: var(--surface-soft); color: var(--ink); }
.chat-input-row button{ all:unset; cursor:pointer; color: var(--accent-deep); font-weight:700; padding:8px 6px; }

/* ---------- share card modal ---------- */
.modal-overlay{
  position:absolute; inset:0; background:var(--scrim); z-index:60; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity var(--dur-fast) ease; padding:24px;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-card{ background: var(--surface); border-radius: var(--radius-m); padding:18px; max-width:300px; width:100%; text-align:center; }
.modal-card canvas{ width:100%; border-radius:12px; margin-bottom:14px; border:1px solid var(--border); }

/* ---------- leaflet override tweaks ---------- */
.leaflet-container{ font-family: var(--font-sans), sans-serif; background: var(--map-bg) !important; }
.leaflet-control-zoom{ display:none; } /* custom controls used instead */
.campus-pin{ background:none; border:none; }
/* the route on the Campus Map: a pin at home (filled) and at every board / alight stop (ringed in the line's colour) */
.route-pin{ background:none; border:none; }
.route-pin .rp-dot{ display:block; box-sizing:border-box; width:14px; height:14px; margin:2px; border-radius:50%; background: var(--surface); border:3px solid var(--rp, var(--accent-deep)); box-shadow: 0 1px 4px rgba(var(--ink-rgb), .4); }
.route-pin.home .rp-dot{ width:18px; height:18px; margin:0; background: var(--accent); border:3px solid var(--surface); box-shadow: 0 0 0 2px var(--accent-deep), 0 2px 6px rgba(var(--ink-rgb), .4); }
.campus-pin .pin-dot{
  display:block; width:22px; height:22px; border-radius:50% 50% 50% 0; background: var(--accent); border:2.5px solid #fff;
  transform: rotate(-45deg); box-shadow:0 3px 8px -2px rgba(var(--ink-rgb),.45);
}
.map-mini-controls{ position:absolute; z-index:1000; bottom:10px; right:10px; display:flex; flex-direction:column; gap:6px; }
.map-mini-controls button{
  all:unset; width:28px; height:28px; border-radius:9px; background: var(--surface); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 10px -4px rgba(var(--ink-rgb),.3);
  font-weight:700; color: var(--ink); font-size: var(--fs-body); line-height:1;
}
.map-wrap{ position:relative; margin-bottom:8px; flex:none; }

/* ---------- icon system (Lucide, inline) ---------- */
.icon{ display:inline-block; width:1em; height:1em; vertical-align:-0.15em; }
.icon svg{ display:block; width:100%; height:100%; }
button .icon, .icon-btn .icon{ width:18px; height:18px; }
.icon-btn svg{ width:18px; height:18px; }


/* ---------- transit network + line badge ---------- */
.network-logo{
  width:26px; height:26px; border-radius:8px; background:#fff; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; padding:4px; flex:none;
}
.network-logo img{ width:100%; height:100%; object-fit:contain; }

/* ---------- hamburger slide-in drawer ---------- */
.hamburger-btn .icon{ width:18px; height:18px; }
.nav-menu-scrim{
  position:absolute; inset:0; z-index:44; background:var(--scrim);
  opacity:0; pointer-events:none; transition: opacity var(--dur-base) ease;
}
.nav-menu-scrim.open{ opacity:1; pointer-events:auto; }
.nav-menu-scrim[hidden]{ display:none; }
/* The menu is an overlay that slides in from the RIGHT (the hamburger is on the right of the top bar).
   Closed means genuinely gone -- not just slid off to the side: hidden, untouchable, and with no shadow, so no
   strip of it can ever show at the card's edge. Open is only ever set by tapping the hamburger. */
.nav-drawer{
  position:absolute; right:0; left:auto; top:0; bottom:0; width:min(280px, 80%); z-index:46;
  background: var(--surface); box-shadow:none;
  transform: translateX(100%); visibility:hidden; pointer-events:none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease, visibility 0s linear var(--dur-base);
  display:flex; flex-direction:column; overflow:hidden;
}
.nav-drawer.open{
  transform: translateX(0); visibility:visible; pointer-events:auto; box-shadow: var(--shadow-drawer);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease, visibility 0s;
}
/* The list (Explore, Personal) scrolls on its own; the footer below it never moves, so the two can't collide however many
   sections are open. The list carries the panel's side padding itself so a tile's shadow is never clipped by the scroll box. */
#nav-drawer-items{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; display:flex; flex-direction:column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-3) var(--sp-2); }
#nav-drawer-items::-webkit-scrollbar{ display:none; }
.nav-drawer-head{ display:flex; justify-content:center; padding: 8px 8px 14px; }
/* Settings + Account: utility, not navigation. Two small bare icon buttons, bottom-right, no labels, no tiles. */
.nav-drawer-foot{ flex:none; display:flex; justify-content:flex-end; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
.nav-util-btn{
  all:unset; box-sizing:border-box; width:40px; height:40px; border-radius:50%; cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center; background: var(--neutral-fill); color: var(--neutral-text);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.nav-util-btn .icon{ width:20px; height:20px; }
.nav-util-btn:hover{ color: var(--ink); }
.nav-util-btn.active{ background: var(--accent); color: var(--on-accent); }
.nav-util-btn:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
/* Each entry is a tile in the app's card language, not a flat list row. */
.nav-menu-item{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px; width:100%; cursor:pointer;
  padding: 11px 12px; border-radius: var(--radius-m); border:1.5px solid var(--border); background: var(--surface);
  font-weight:700; font-size: var(--fs-body); color: var(--ink); box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.nav-menu-item:hover{ border-color: var(--border-strong); background: var(--surface-soft); }
.nav-menu-item:active{ transform: scale(.985); }
.nav-menu-item.active{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); }
.nav-menu-item.soon{ color: var(--ink-faint); cursor:default; box-shadow:none; }
.nav-menu-item .icon{ width:19px; height:19px; color: var(--ink-soft); flex:none; }
.nav-menu-item.active .icon{ color: var(--on-accent); }
.nav-menu-item.soon .icon{ color: var(--ink-faint); }
/* the active item's mark: a small dot ringed like the dial's rim, beside its icon */
.nav-menu-item .icon{ position:relative; }
.nav-menu-item .icon::after{ content:""; position:absolute; right:-5px; top:-5px; width:7px; height:7px; border-radius:50%; background: var(--on-accent); box-shadow: 0 0 0 2px var(--accent); opacity:0; transform:scale(.4); transition: opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring); }
.nav-menu-item.active .icon::after{ opacity:1; transform:scale(1); }
.nav-menu-item .soon-tag{ margin-left:auto; font-family: var(--font-mono); font-size: var(--fs-caption); text-transform:uppercase; letter-spacing:.05em; color: var(--ink-faint); }
/* "Explore" is a group: the tile toggles (aria-expanded), its sections sit indented beneath it. The chevron and
   the [hidden] body follow the app's disclosure pattern (see .disclosure-toggle / .event-expand). */
.nav-menu-group-toggle{ font-size: var(--fs-title); padding: 13px 14px; }
.nav-menu-group-toggle .chev{ margin-left:auto; display:flex; width:16px; height:16px; color: var(--ink-faint); transition: transform var(--dur-fast) ease; }
.nav-menu-group-toggle .chev .icon{ width:16px; height:16px; }
.nav-menu-group-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.nav-menu-group-toggle.active .chev{ color: var(--on-accent); }
.nav-menu-sub{ display:flex; flex-direction:column; gap:6px; padding: 2px 0 4px 14px; border-left:2px solid var(--border); margin-left:14px; }
.nav-menu-sub[hidden]{ display:none; }
.nav-menu-sub .nav-menu-item{ padding: 9px 11px; box-shadow:none; }
.nav-menu-item .nav-logo .c-rose{ width:100%; height:100%; } /* "Home": the dial itself as the icon */


/* Logged-out gate: screens that hold personal data show only their heading plus this
   "Please log in" card (see syncLoginGates() in app.js) -- nothing else on them is visible. */
.screen[data-gated="true"] > :not(.screen-head):not(.login-gate){ display:none !important; }
.login-gate{ border:1.5px solid var(--border); border-radius: var(--radius-l); padding:22px 18px; margin-bottom:16px; background: var(--surface); text-align:center; }
.login-gate-title{ font-family: var(--font-display); font-size: var(--fs-title); font-weight:600; margin-bottom:6px; }
.login-gate .sub{ color: var(--ink-soft); font-size: var(--fs-body); margin-bottom:14px; }

/* ---------- Profile form (Settings + first-sign-in setup): phone input, place search ---------- */
.profile-form .field{ margin-bottom:12px; }
.profile-saved{ color: var(--accent-deep); font-size: var(--fs-body); font-weight:700; min-height:1.2em; margin:4px 0 8px; }
.profile-form .btn-primary{ margin-top:4px; }
/* No reserved space for messages that aren't showing (errors, "found on the map", "saved"): the form stays compact and the
   button and "Skip for now" stay in view on a phone. Regions are zero-height, not display:none, so screen readers still announce them. */
.profile-form .field-error:empty, .profile-form .place-status:empty, .profile-form .profile-saved:empty{ min-height:0; margin:0; }
.profile-form .sub{ margin-bottom:10px; }

/* phone: intl-tel-input, re-skinned to the app's pink fields */
.field .iti{ width:100%; --iti-border-color: var(--border); --iti-hover-color: var(--surface-soft); --iti-country-selector-bg: var(--surface); --iti-icon-color: var(--ink-soft); }
.field .iti input.iti__tel-input, .field .iti input[type="tel"]{ padding-top:12px; padding-bottom:12px; }
.iti__country-container .iti__selected-country{ border-radius: var(--radius-m) 0 0 var(--radius-m); }
.iti__selected-dial-code{ color: var(--ink); font-weight:700; font-family: var(--font-sans); }
.iti__dropdown-content{ background: var(--surface); color: var(--ink); border:1.5px solid var(--border); border-radius: var(--radius-m); box-shadow: 0 14px 30px -14px rgba(var(--accent-rgb),.4); font-family: var(--font-sans); }
.iti__search-input{ background: var(--surface-soft); color: var(--ink); border:1.5px solid var(--border); border-radius: var(--radius-s); font-family: var(--font-sans); }
.iti__country.iti__highlight, .iti__country:hover{ background: var(--surface-soft); }
.iti__dial-code{ color: var(--ink-faint); }

/* address / place search (Google Places, or plain text when no key is configured) */
.place-input-wrap{ position:relative; }
.place-list{ list-style:none; margin:6px 0 0; padding:6px; position:absolute; left:0; right:0; z-index:40; background: var(--surface); border:1.5px solid var(--border); border-radius: var(--radius-m); box-shadow: 0 14px 30px -14px rgba(var(--accent-rgb),.4); max-height:220px; overflow:auto; }
.place-list[hidden]{ display:none; }
.place-list li{ padding:9px 10px; border-radius: var(--radius-s); font-size: var(--fs-body); font-weight:600; color: var(--ink); cursor:pointer; line-height:1.35; }
.place-list li small{ display:block; font-weight:500; color: var(--ink-soft); }
.place-list li[aria-selected="true"], .place-list li:hover{ background: var(--surface-soft); }
.place-status{ font-size: var(--fs-caption); color: var(--ink-faint); margin-top:6px; min-height:1em; }
.place-status.ok{ color: var(--accent-deep); font-weight:700; }

/* ---------- How to get there: route summary + step list ---------- */
.route-block{ padding-top:2px; }
.route-summary{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-title); line-height:1.3; color: var(--ink); margin-bottom:8px; }
.route-summary.muted{ color: var(--ink-soft); font-family: var(--font-sans); font-size: var(--fs-body); }
.route-origin{ display:inline-block; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--accent-deep); background: var(--surface-soft); border:1px solid var(--border); border-radius:999px; padding:3px 9px; margin:0 0 10px; }
.route-steps{ list-style:none; margin:4px 0 6px; padding:0; }
.route-step{ display:flex; gap:11px; align-items:flex-start; padding:7px 0; font-size: var(--fs-body); line-height:1.4; position:relative; }
.route-step + .route-step::before{ content:""; position:absolute; left:14px; top:-9px; height:16px; border-left:2px dotted var(--border-strong); }
.rs-mark{ flex:none; min-width:30px; display:flex; justify-content:center; align-items:center; color: var(--ink-soft); padding-top:1px; }
.rs-mark .icon{ width:18px; height:18px; }
.rs-body{ flex:1; min-width:0; }
.rs-title{ font-weight:700; color: var(--ink); }
.rs-sub{ color: var(--ink-soft); font-size: var(--fs-caption); margin-top:2px; }
.route-step.change .rs-body{ color: var(--ink-soft); font-weight:600; }
.line-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; padding:3px 7px; border-radius:8px; font-family: var(--font-mono); font-weight:700; font-size: var(--fs-caption); letter-spacing:.02em; white-space:nowrap; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.route-note{ font-size: var(--fs-caption); line-height:1.45; color: var(--pending-fg); background: var(--pending-bg); border-radius:10px; padding:9px 11px; margin:8px 0 0; }
.route-source{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-faint); margin:10px 0 0; line-height:1.4; }
/* "How to buy your ticket": a collapsed row under the steps (route-card.js; copy in data/metroTicketGuide.js) */
.ticket-guide{ margin:10px 0 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.ticket-guide + .ticket-guide{ margin-top:0; border-top:0; } /* two operators: two rows, one hairline between them */
.tg-toggle{ display:flex; align-items:center; gap:9px; width:100%; min-height:44px; padding:0; border:0; background:none; font:inherit; font-size: var(--fs-body); font-weight:700; color: var(--ink); text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tg-toggle:active{ opacity:.6; }
.tg-toggle:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; border-radius:8px; }
.tg-title{ flex:1; min-width:0; }
.tg-toggle .icon{ width:18px; height:18px; color: var(--accent-deep); transition: transform .28s ease; }
.ticket-guide.open .tg-toggle .icon{ transform: rotate(180deg); }
.tg-panel{ display:grid; grid-template-rows:0fr; visibility:hidden; transition: grid-template-rows .28s ease, visibility 0s .28s; }
.ticket-guide.open .tg-panel{ grid-template-rows:1fr; visibility:visible; transition: grid-template-rows .28s ease, visibility 0s; }
.tg-inner{ overflow:hidden; min-height:0; }
.tg-steps{ list-style:none; margin:0; padding:0 0 4px; }
.tg-step{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; font-size: var(--fs-body); line-height:1.4; color: var(--ink-soft); }
.tg-step strong{ color: var(--ink); }
.tg-num{ flex:none; width:22px; height:22px; margin-top:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight:700; color: var(--accent-deep); background: var(--chip); }
.tg-text{ flex:1; min-width:0; }
.tg-hint{ display:block; margin-top:4px; font-size: var(--fs-caption); color: var(--ink-faint); }
/* the machine's buttons, drawn as chips: the one to press has the pink outline and the "tap" badge, the rest of its row fades */
.tg-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:8px; padding-top:8px; max-width:100%; }
.tg-chip{ position:relative; display:inline-flex; align-items:center; min-height:26px; max-width:100%; padding:3px 10px; border-radius:8px; border:1.5px solid transparent; font-size: var(--fs-caption); font-weight:700; line-height:1.25; color: var(--ink); background: var(--neutral-fill); overflow-wrap:anywhere; }
.tg-chip strong{ color:inherit; }
.tg-chip-metro{ background:#17324f; color:#fff; }                                     /* the blue machine's list options */
.tg-chip-accept{ background:transparent; border-color: var(--neutral-line); color:#1f8f4e; border-radius:999px; }
.tg-chip-leave{ background:transparent; border-color: var(--neutral-line); color:#c8323a; border-radius:999px; }
.tg-chip-key{ min-width:30px; justify-content:center; background: var(--surface); border-color: var(--neutral-line); font-family: var(--font-mono); font-size: var(--fs-body); }
.tg-chip-flag{ background: var(--surface); border-color: var(--neutral-line); }
.tg-chip-renfe{ background:#7b2482; color:#fff; border-radius:10px; }                 /* the purple machine's main button */
.tg-chip-renfe-light{ background:#ebedf0; color:#3a3a45; border-radius:10px; }
.tg-chip-pay{ background: var(--surface); border-color: var(--neutral-line); font-size: var(--fs-body); }
.tg-chip.is-tap{ box-shadow: 0 0 0 2px var(--accent); }
.tg-chip.is-off{ opacity:.4; }
.tg-chip:not(.is-tap) .tg-tap{ display:none; } /* a switch-dependent chip keeps its badge in the markup; only the one to press shows it */
.tg-tap{ position:absolute; top:-9px; right:-6px; padding:1px 5px; border-radius:999px; background: var(--accent); color: var(--on-accent); font-size:9px; font-weight:800; line-height:1.3; white-space:nowrap; letter-spacing:.02em; }
.tg-arrow{ color: var(--ink-faint); font-weight:700; }
/* the guide's switch ("I have a Multi card"): an iOS toggle on a hairline row above the steps */
.tg-switch{ display:flex; align-items:center; gap:10px; min-height:40px; padding:4px 0; border-bottom:1px solid var(--border); font-size: var(--fs-caption); font-weight:600; color: var(--ink-soft); cursor:pointer; }
.tg-switch > span:first-child{ flex:1; }
.tg-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.tg-knob{ flex:none; width:40px; height:24px; border-radius:999px; background: var(--neutral-line); position:relative; transition: background var(--dur-fast) ease; }
.tg-knob::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--dur-fast) ease; }
.tg-switch input:checked + .tg-knob{ background: var(--accent-deep); }
.tg-switch input:checked + .tg-knob::after{ transform: translateX(16px); }
.tg-switch input:focus-visible + .tg-knob{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.tg-footer{ padding:8px 0 12px; border-top:1px solid var(--border); font-size: var(--fs-caption); line-height:1.45; color: var(--ink-soft); }
.tg-footer p{ margin:0 0 6px; }
.tg-footer p:last-child{ margin-bottom:0; }
.tg-footer a{ color: var(--accent-deep); font-weight:700; text-decoration:none; }
@media (prefers-reduced-motion: reduce){ .tg-panel, .ticket-guide.open .tg-panel, .tg-toggle .icon, .tg-knob, .tg-knob::after{ transition:none; } }

/* ---------- school logos: one square badge for every school ---------- */
.school-logo{
  flex:none; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; padding:3px;
}
.school-logo img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.school-logo.sz-md{ width:52px; height:52px; }
.school-logo.sz-sm{ width:32px; height:32px; border-radius:9px; padding:2px; }
/* A logo published only as a white version sits on a dark badge (the school's `logo_bg` column). */
.school-logo.on-dark{ background:#1f1a1d; border-color: var(--border-strong); }
/* No logo, or the file failed: neutral initials badge. Also used for the "isn't listed" graduation cap. */
.school-logo.initials, .school-logo.generic, .school-logo.failed{ background: var(--surface-soft); color: var(--ink-soft); }
.school-logo.initials, .school-logo.failed::after{ font-family: var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.02em; line-height:1; text-align:center; }
.school-logo.sz-sm.initials, .school-logo.sz-sm.failed::after{ font-size:.42rem; }
.school-logo.failed img{ display:none; }
.school-logo.failed::after{ content: attr(data-initials); }
.school-logo.failed.on-dark{ background: var(--surface-soft); border-color: var(--border); }
.school-logo.generic .icon{ width:22px; height:22px; }
.school-logo.sz-sm.generic .icon{ width:14px; height:14px; }
.account-sub .school-logo{ margin-right:6px; vertical-align:middle; }

/* ---------- school picker: a field that opens a searchable, grouped bottom sheet ---------- */
.school-picker-btn{
  all:unset; box-sizing:border-box; width:100%; min-height:56px; display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:10px 14px; border:1.5px solid var(--border); border-radius: var(--radius-m); background: var(--surface-soft);
  font-weight:700; font-size: var(--fs-body); color: var(--ink);
}
.school-picker-btn:hover{ border-color: var(--border-strong); }
.school-picker-btn:focus-visible, .school-picker-btn[aria-expanded="true"]{ border-color: var(--accent); background: var(--surface); outline:none; }
.school-picker-btn .sp-value{ flex:1; min-width:0; line-height:1.25; overflow-wrap:anywhere; }
.school-picker-btn .sp-placeholder{ flex:1; color: var(--ink-faint); font-weight:600; }
.school-picker-btn > .icon{ flex:none; width:18px; height:18px; color: var(--accent-deep); }
.school-picker.invalid .school-picker-btn{ border-color:var(--risk-fg); }

.sp-backdrop{ position:absolute; inset:0; z-index:80; background:var(--scrim); opacity:0; transition: opacity var(--dur-fast) ease; }
.sp-backdrop.open{ opacity:1; }
.sp-sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:81; max-height:82%; display:flex; flex-direction:column;
  background: var(--surface); border-radius:26px 26px 0 0; box-shadow:0 -18px 40px -16px rgba(var(--ink-rgb),.45);
  padding:8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform var(--dur-base) var(--ease-out);
}
.sp-sheet.open{ transform: translateY(0); }
.sp-grab{ width:40px; height:4px; border-radius:999px; background: var(--border-strong); margin:4px auto 12px; flex:none; }
.sp-title{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-title); margin:0 0 10px; flex:none; }
.sp-search{ position:relative; flex:none; margin-bottom:8px; }
.sp-search .icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color: var(--ink-faint); pointer-events:none; }
.sp-search input{
  width:100%; font:inherit; font-weight:600; font-size: var(--fs-body); color: var(--ink); background: var(--surface-soft);
  border:1.5px solid var(--border); border-radius: var(--radius-m); padding:12px 14px 12px 40px;
}
.sp-search input:focus{ border-color: var(--accent); outline:none; background: var(--surface); }
.sp-list{ overflow-y:auto; overscroll-behavior:contain; flex:1; padding-bottom:4px; }
.sp-group{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); font-weight:700; padding:14px 6px 6px; }
.sp-option{ display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius: var(--radius-m); cursor:pointer; border:1.5px solid transparent; }
.sp-option .sp-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.sp-option .sp-name{ font-weight:700; font-size: var(--fs-body); }
.sp-option .sp-sub{ font-size: var(--fs-caption); color: var(--ink-soft); }
.sp-option.active{ background: var(--p2); border-color: var(--border); }
.sp-option[aria-selected="true"]{ border-color: var(--accent); background: var(--p2); }
.sp-option .sp-check{ flex:none; width:18px; height:18px; color: var(--accent); visibility:hidden; }
.sp-option[aria-selected="true"] .sp-check{ visibility:visible; }
.sp-empty{ color: var(--ink-soft); text-align:center; padding:26px 10px; font-size: var(--fs-body); }

/* ---------- safety net: shown instead of a blank card when the app can't start ---------- */
.crash-screen{ position:absolute; inset:0; z-index:200; background: var(--surface); display:flex; align-items:center; justify-content:center; padding:28px; text-align:center; }
.crash-screen[hidden]{ display:none; }
.crash-card h2{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-display); margin-bottom:6px; }
.crash-card p{ color: var(--ink-soft); font-size: var(--fs-body); margin-bottom:18px; }
.crash-card .crash-detail{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-faint); margin:16px 0 0; word-break:break-word; }


/* ================= BUDGET ================= */
.bud-card{ background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--budget-shadow); border:1px solid var(--border); padding:18px 18px 16px; margin-bottom:16px; }
.bud-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.bud-title{ font-weight:800; font-size: var(--fs-title); letter-spacing:-.01em; }
.bud-nav{ display:flex; align-items:center; gap:4px; min-width:0; }
.bud-nav-btn{ all:unset; cursor:pointer; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--ink-soft); font-size: var(--fs-title); line-height:1; }
.bud-nav-btn:hover:not([disabled]){ background: var(--chip); color: var(--ink); }
.bud-nav-btn[disabled]{ opacity:.3; cursor:default; }
.bud-nav-btn:focus-visible{ outline:2px solid var(--accent-deep); }
.bud-period{ font-size: var(--fs-body); font-weight:700; color: var(--ink-soft); padding:0 2px; white-space:nowrap; }
.bud-badge{ display:inline-block; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:999px; background: var(--chip); color: var(--accent-deep); margin-bottom:6px; }

.bud-gauge{ position:relative; width:100%; max-width:320px; margin:4px auto 6px; }
.bud-gauge svg{ display:block; width:100%; height:auto; overflow:visible; }
.bud-center{ position:absolute; left:0; right:0; bottom:2px; text-align:center; pointer-events:none; }
.bud-cap{ display:block; font-size: var(--fs-caption); color: var(--ink-faint); font-weight:600; }
.bud-total{ display:block; font-size: var(--fs-display); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.bud-track{ fill:none; stroke-width:22; stroke-linecap:round; }
.bud-use-track{ fill:none; stroke-width:5; stroke-linecap:round; opacity:.22; }
.bud-use{ fill:none; stroke-width:5; stroke-linecap:butt; }
.bud-empty{ fill:none; stroke: var(--chip); stroke-width:22; stroke-linecap:round; }
.bud-seg{ cursor:pointer; outline:none; transition: opacity var(--dur-fast) ease; }
.bud-seg:focus-visible .bud-track{ filter: drop-shadow(0 0 3px var(--accent-deep)); }
.bud-sweep{ fill:none; stroke-width:64; stroke-dasharray:1; stroke-dashoffset:0; }
.bud-anim .bud-sweep{ animation: bud-sweep 1.05s cubic-bezier(.3,.7,.2,1) both; }
@keyframes bud-sweep{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .bud-anim .bud-sweep{ animation:none; } }

.bud-summary{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px 14px; font-size: var(--fs-caption); color: var(--ink-soft); margin:2px 0 14px; }
.bud-summary b{ color: var(--ink); font-weight:800; }
.bud-summary .over{ color: var(--budget-over); }

.bud-list{ display:flex; flex-direction:column; gap:2px; }
.bud-row{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:14px; padding:10px 8px; border-radius: var(--radius-m); transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease; }
.bud-row:hover, .bud-row.is-on{ background: var(--surface-soft); }
.bud-row:focus-visible{ outline:2px solid var(--accent-deep); }
.bud-swatch{ flex:none; width:14px; height:40px; border-radius:6px; background: var(--cat); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.bud-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.bud-name{ font-weight:700; font-size: var(--fs-body); }
.bud-meter{ display:block; height:6px; border-radius:999px; background: var(--chip); overflow:hidden; position:relative; }
.bud-meter i{ position:absolute; top:0; bottom:0; left:0; background: var(--cat); }
.bud-meter i.planned{ background: repeating-linear-gradient(135deg, var(--cat) 0 3px, transparent 3px 6px); opacity:.85; }
.bud-meter i.planned::before{ content:""; position:absolute; inset:0; background: var(--cat); opacity:.25; }
.bud-cap2{ font-size: var(--fs-caption); color: var(--ink-faint); }
.bud-cap2.over{ color: var(--budget-over); font-weight:700; }
.bud-row-figs{ flex:none; text-align:right; display:flex; flex-direction:column; gap:2px; }
.bud-pct{ font-weight:800; font-size: var(--fs-body); }
.bud-amt{ font-size: var(--fs-body); color: var(--ink-faint); }
.bud-card .is-dim, .bud-row.is-dim, .bud-seg.is-dim{ opacity:.3; }

.bud-actions{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.bud-finish{ display:flex; align-items:center; justify-content:center; gap:8px; }
.bud-finish .icon{ width:18px; height:18px; }
.bud-linkrow{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:14px 16px; border:1.5px solid var(--border); border-radius: var(--radius-m); background: var(--surface); font-weight:700; }
.bud-linkrow:hover{ border-color: var(--border-strong); background: var(--p2); }
.bud-linkrow .sub{ font-weight:500; font-size: var(--fs-caption); color: var(--ink-soft); }
.bud-linkrow .icon{ width:18px; height:18px; color: var(--accent-deep); }
.bud-banner{ border:1.5px solid var(--border-strong); background: var(--p2); border-radius: var(--radius-m); padding:12px 14px; margin-bottom:14px; font-size: var(--fs-body); display:flex; flex-direction:column; gap:10px; }
.bud-banner b{ font-weight:800; }
.bud-note-box{ margin:0 0 16px; }
.bud-note-box textarea{ width:100%; min-height:70px; font:inherit; font-size: var(--fs-body); font-weight:500; color: var(--ink); background: var(--surface-soft); border:1.5px solid var(--border); border-radius: var(--radius-m); padding:10px 12px; resize:vertical; }
.bud-note-box textarea:focus{ border-color: var(--accent); outline:none; background: var(--surface); }
.bud-back{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size: var(--fs-body); color: var(--accent-deep); margin-bottom:12px; }
.bud-back:focus-visible{ outline:2px solid var(--accent-deep); }

/* category page */
.bud-cat-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.bud-cat-head h2{ margin:0; font-size: var(--fs-display); }
.bud-cat-head .bud-swatch{ height:34px; }
.bud-items{ display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.bud-item{ border:1.5px solid var(--border); border-radius: var(--radius-m); padding:12px; background: var(--surface); display:flex; gap:12px; align-items:flex-start; }
.bud-item-date{ flex:none; width:44px; text-align:center; border-radius:12px; background: var(--chip); padding:6px 0; }
.bud-item-date .d{ font-weight:800; font-size: var(--fs-title); line-height:1; }
.bud-item-date .m{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.06em; color: var(--ink-soft); }
.bud-item-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.bud-item-name{ font-weight:700; overflow-wrap:anywhere; }
.bud-item-meta{ font-size: var(--fs-caption); color: var(--ink-soft); display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.bud-item-note{ font-size: var(--fs-caption); color: var(--ink-soft); overflow-wrap:anywhere; }
.bud-tag{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:2px 7px; border-radius:999px; background: var(--chip); color: var(--accent-deep); }
.bud-tag.planned{ background: transparent; border:1px dashed var(--border-strong); color: var(--ink-soft); }
.bud-item-cost{ font-weight:800; }
.bud-item-actions{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; }
.bud-item-actions .btn-link{ font-size: var(--fs-caption); }
.bud-item-side{ flex:none; display:flex; gap:2px; }
.icon-toggle .icon{ width:16px; height:16px; }

/* history */
.bud-timeline{ display:flex; flex-direction:column; gap:8px; }
.bud-hist{ all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; flex-direction:column; gap:8px; padding:12px 14px; border:1.5px solid var(--border); border-radius: var(--radius-m); background: var(--surface); }
.bud-hist:hover{ border-color: var(--border-strong); }
.bud-hist:focus-visible{ outline:2px solid var(--accent-deep); }
.bud-hist.current{ border-color: var(--accent); background: var(--p2); box-shadow: 0 0 0 2px var(--selected); }
.bud-hist.upcoming{ border-style:dashed; }
.bud-hist-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bud-hist-name{ font-weight:800; }
.bud-hist-fig{ font-size: var(--fs-caption); color: var(--ink-soft); }
.bud-stack{ display:flex; height:8px; border-radius:999px; overflow:hidden; background: var(--chip); gap:2px; }
.bud-stack i{ display:block; height:100%; background: var(--cat); }
.bud-stack i.upcoming{ opacity:.45; }
.bud-hist-group{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); font-weight:700; margin:14px 0 2px; }

/* schedule form (onboarding + Settings) */
.seg-control{ display:flex; gap:4px; padding:4px; border-radius:999px; background: var(--chip); margin-bottom:16px; }
.seg-control button{ all:unset; flex:1; text-align:center; cursor:pointer; padding:10px 6px; border-radius:999px; font-weight:700; font-size: var(--fs-body); color: var(--ink-soft); }
.seg-control button[aria-checked="true"]{ background: var(--surface); color: var(--accent-deep); box-shadow: 0 4px 12px -6px rgba(var(--accent-rgb),.5); }
.seg-control button:focus-visible{ outline:2px solid var(--accent-deep); }
.split-box{ border:1.5px solid var(--border); border-radius: var(--radius-m); padding:12px 14px; margin:4px 0 8px; background: var(--surface); }
.split-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-weight:700; font-size: var(--fs-body); color: var(--ink-soft); }
.split-row{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.split-row .bud-swatch{ height:28px; width:12px; }
.split-row .split-name{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; font-weight:700; font-size: var(--fs-body); }
.split-row > label.split-name{ flex:1 1 0; min-width:0; }
.split-row input{ width:74px; text-align:right; font:inherit; font-weight:700; color: var(--ink); background: var(--surface-soft); border:1.5px solid var(--border); border-radius: 12px; padding:8px 10px; }
.split-row input:focus{ border-color: var(--accent); outline:none; }
.split-row .split-eur{ font-size: var(--fs-caption); font-weight:600; color: var(--ink-faint); min-height:1em; }
.split-total{ font-size: var(--fs-caption); font-weight:700; color: var(--ink-soft); text-align:right; margin-top:4px; }
.split-total.bad{ color: var(--budget-over); }
.form-note{ font-size: var(--fs-caption); color: var(--ink-soft); margin:4px 0 12px; }
.pct-suffix{ font-size: var(--fs-body); color: var(--ink-faint); margin-left:-4px; }

/* sheets (finish period, budgets, add/edit item, choose a category) */
.sheet-body{ overflow-y:auto; overscroll-behavior:contain; flex:1 1 auto; min-height:0; padding:2px 10px 6px 2px; scrollbar-gutter:stable; }
.sheet-actions{ display:flex; gap:10px; margin-top:12px; padding-top:4px; flex:none; }
.sheet-actions .btn{ flex:1; }
.fin-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 10px; padding:8px 0; border-bottom:1px solid var(--border); font-size: var(--fs-body); }
.fin-row:last-child{ border-bottom:none; }
.fin-row .fin-name{ display:flex; align-items:center; gap:8px; font-weight:700; }
.fin-row .bud-swatch{ height:18px; width:8px; border-radius:4px; }
.fin-row .under{ color: var(--ink-soft); font-size: var(--fs-body); }
.fin-row .over{ color: var(--budget-over); font-weight:700; font-size: var(--fs-body); }
.cat-choices{ display:flex; flex-direction:column; gap:8px; }
.cat-choice{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; padding:14px; border:1.5px solid var(--border); border-radius: var(--radius-m); font-weight:700; }
.cat-choice:hover{ border-color: var(--border-strong); background: var(--p2); }
.cat-choice:focus-visible{ outline:2px solid var(--accent-deep); }
.cat-choice .bud-swatch{ height:24px; width:10px; }

/* category tag/dot wherever an entry appears (My Calendar, chat) */
.cat-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background: var(--cat); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); flex:none; }
.cat-tag{ display:inline-flex; align-items:center; gap:6px; font-size: var(--fs-caption); font-weight:700; color: var(--ink-soft); }
.cal-cat-select{ font:inherit; font-size: var(--fs-caption); font-weight:700; color: var(--ink); background: var(--surface-soft); border:1.5px solid var(--border); border-radius:999px; padding:4px 8px; }
.cal-day .dots{ display:flex; gap:2px; margin-top:2px; height:4px; }
.cal-day .dots .dot{ margin-top:0; background: var(--cat, var(--accent)); }
.cal-day.selected .dots .dot{ background:#fff; }
.chat-proposal-card select{ width:100%; margin-top:8px; font:inherit; font-size: var(--fs-caption); font-weight:700; padding:6px 8px; border:1.5px solid var(--border); border-radius:10px; background: var(--surface); color: var(--ink); }
.chat-proposal-card .cpc-error{ color: var(--budget-over); font-size: var(--fs-caption); margin-top:4px; min-height:1em; }

.icon.flip{ transform: scaleX(-1); }
.bud-back .icon{ width:16px; height:16px; }
.bud-linkrow .icon{ display:inline-block; vertical-align:-3px; margin-right:4px; }

/* ---------- room prices: "What do you pay?" (Housing banner, SETTLED phase only) ---------- */
.room-price-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border-radius: var(--radius-m); margin-bottom:16px; flex:none;
  background: linear-gradient(135deg, var(--chip), var(--surface)); border:1.5px solid var(--border-strong);
}
.room-price-banner p{ font-weight:700; font-size: var(--fs-body); color: var(--ink); display:flex; align-items:center; gap:6px; }
.room-price-banner .icon{ width:16px; height:16px; color: var(--safe-fg); flex:none; }
.room-price-banner.reported{ background: var(--surface-soft); border-color: var(--border); }
.room-price-banner .btn-link{ font-weight:700; white-space:nowrap; }
.rp-agg-line{ font-size: var(--fs-caption); color: var(--accent-deep); font-weight:600; margin: -6px 0 10px; min-height:1.2em; }

/* ---------- Housing tools: the two cards on the Housing screen ---------- */
.tool-cards{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:16px; flex:none; }
@media (min-width: 420px){ .tool-cards{ grid-template-columns:1fr 1fr; } }
.tool-card{
  all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; padding:13px 14px;
  border:1.5px solid var(--border); border-radius: var(--radius-m); background: var(--surface);
  box-shadow: 0 10px 22px -16px rgba(var(--accent-rgb),.45); transition: border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.tool-card:hover{ border-color: var(--accent); }
.tool-card:active{ transform: scale(.985); }
.tool-card:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.tool-card-wide{ grid-column: 1 / -1; }
.tool-card-icon{ flex:none; width:40px; height:40px; border-radius:12px; background: var(--chip); color: var(--accent-deep); display:flex; align-items:center; justify-content:center; }
.tool-card-icon .icon{ width:20px; height:20px; }
.tool-card-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tool-card-title{ font-weight:700; font-size: var(--fs-body); color: var(--ink); }
.tool-card-sub{ font-size: var(--fs-caption); line-height:1.35; color: var(--ink-soft); }
.tool-card-chev{ flex:none; color: var(--ink-faint); display:flex; }
.tool-card-chev .icon{ width:16px; height:16px; }
@media (min-width: 420px){ .tool-card{ flex-direction:column; align-items:flex-start; gap:10px; } .tool-card-chev{ display:none; } }

/* ---------- Housing tools: the tool screens ---------- */
.tool-form .field{ margin-bottom:12px; }
.tool-form textarea{
  width:100%; box-sizing:border-box; font:inherit; font-size: var(--fs-body); line-height:1.45; padding:12px 14px; resize:vertical; min-height:120px;
  background: var(--surface-soft); border:1.5px solid var(--border); border-radius: var(--radius-m); color: var(--ink);
}
.tool-form textarea:focus{ border-color: var(--accent); outline:none; background: var(--surface); }
.field-label{ display:block; font-size: var(--fs-caption); font-weight:700; color: var(--ink-soft); margin-bottom:6px; }
.field .optional{ font-weight:600; color: var(--ink-faint); }
.field-hint{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-faint); margin-top:4px; text-align:right; }
.fact-row{ display:flex; flex-direction:column; gap:6px; }
.fact{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:9px 12px; border:1.5px solid var(--border); border-radius: var(--radius-s); background: var(--surface); font-size: var(--fs-body); font-weight:600; }
.fact:has(input:checked){ border-color: var(--accent); background: var(--p2); }
.fact input{ accent-color: var(--accent); width:17px; height:17px; margin:0; flex:none; }
.tool-quota{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-faint); text-align:center; margin-top:10px; min-height:1em; }
.tool-form .field-error:empty{ min-height:0; margin:0; }
.privacy-note{ font-size: var(--fs-caption); line-height:1.45; color: var(--ink-soft); background: var(--surface-soft); border-radius:12px; padding:10px 12px; margin-bottom:12px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* upload */
.upload-drop{
  display:flex; align-items:center; gap:12px; padding:14px; cursor:pointer; border:1.5px dashed var(--border-strong); border-radius: var(--radius-m);
  background: var(--surface-soft); transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease; position:relative;
}
.upload-drop:hover, .upload-drop.over{ border-color: var(--accent); background: var(--p2); }
.upload-drop input{ position:absolute; width:1px; height:1px; opacity:0; }
.upload-drop:focus-within{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.upload-icon{ flex:none; width:38px; height:38px; border-radius:50%; background: var(--chip); color: var(--accent-deep); display:flex; align-items:center; justify-content:center; }
.upload-icon .icon{ width:18px; height:18px; }
.upload-text{ display:flex; flex-direction:column; gap:2px; font-size: var(--fs-body); color: var(--ink); }
.upload-text span{ font-size: var(--fs-caption); color: var(--ink-soft); }
.upload-chosen{ display:flex; align-items:center; gap:10px; margin-top:8px; padding:10px 12px; border:1.5px solid var(--accent); border-radius: var(--radius-s); background: var(--p2); font-size: var(--fs-body); }
.upload-chosen[hidden]{ display:none; }
.upload-chosen-icon{ color: var(--accent-deep); display:flex; }
.upload-chosen-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.or-divider{ display:flex; align-items:center; gap:10px; margin:4px 0 12px; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); }
.or-divider::before, .or-divider::after{ content:""; flex:1; border-top:1px solid var(--border); }

/* results */
.tool-result{ margin-top:18px; }
.result-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.result-head h3{ font-family: var(--font-display); font-size: var(--fs-title); font-weight:600; }
.rating-card{ border-radius: var(--radius-l); padding:18px 18px 16px; margin-bottom:14px; display:flex; gap:14px; align-items:flex-start; }
.rating-card.ok{ background: var(--safe-bg); color: var(--safe-fg); }
.rating-card.careful{ background: var(--mod-bg); color: var(--mod-fg); }
.rating-card.high{ background: var(--risk-bg); color: var(--risk-fg); }
.rating-icon{ flex:none; width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; }
:root[data-theme="dark"] .rating-icon{ background: rgba(0,0,0,.22); }
.rating-icon .icon{ width:22px; height:22px; }
.rating-label{ font-family: var(--font-display); font-size: var(--fs-display); font-weight:600; line-height:1.15; }
.rating-sub{ font-size: var(--fs-body); line-height:1.45; margin-top:4px; }
.rating-ai{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.06em; text-transform:uppercase; margin-top:8px; opacity:.8; }
.flag-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.flag{ border:1.5px solid var(--border); border-radius: var(--radius-m); padding:12px 14px; background: var(--surface); display:flex; gap:10px; }
.flag-mark{ flex:none; color: var(--risk-fg); display:flex; padding-top:2px; }
.flag-mark .icon{ width:18px; height:18px; }
.flag-title{ font-weight:700; font-size: var(--fs-body); }
.flag-why{ font-size: var(--fs-body); line-height:1.45; color: var(--ink-soft); margin-top:3px; }
.flag-quote{ font-size: var(--fs-caption); line-height:1.4; margin-top:6px; padding:6px 10px; border-left:3px solid var(--border-strong); color: var(--ink-soft); font-style:italic; background: var(--surface-soft); border-radius:0 8px 8px 0; }
.steps-title, .tips-title{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); font-weight:600; margin:16px 0 8px; }
.step-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; counter-reset: step; }
.step-list li{ display:flex; gap:12px; font-size: var(--fs-body); line-height:1.45; counter-increment: step; }
.step-list li::before{ content: counter(step); flex:none; width:26px; height:26px; border-radius:50%; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-weight:700; font-size: var(--fs-caption); display:flex; align-items:center; justify-content:center; }
.disclaimer{ display:flex; gap:8px; padding:11px 13px; border-radius:12px; font-size: var(--fs-caption); line-height:1.45; background: var(--pending-bg); color: var(--pending-fg); margin:4px 0 14px; }
.disclaimer .icon{ flex:none; width:16px; height:16px; margin-top:2px; }
.tool-tips{ margin-top:6px; }
.tip{ border:1.5px solid var(--border); border-radius: var(--radius-m); padding:12px 14px; background: var(--surface); margin-bottom:8px; }
.tip-title{ font-weight:700; font-size: var(--fs-body); }
.tip-body{ font-size: var(--fs-body); line-height:1.45; color: var(--ink-soft); margin-top:3px; }
.tool-actions{ display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.tool-actions .btn{ flex:1; }

/* lease sections: tap a clause to see the original next to the plain English */
.lease-meta{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-faint); margin:-6px 0 12px; }
.clause{ border:1.5px solid var(--border); border-radius: var(--radius-m); background: var(--surface); margin-bottom:8px; overflow:hidden; }
.clause.missing{ border-style:dashed; }
.clause-btn{ all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:flex; gap:10px; align-items:flex-start; padding:12px 14px; }
.clause-btn:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:-2px; }
.clause-body{ flex:1; min-width:0; }
.clause-heading{ font-weight:700; font-size: var(--fs-body); }
.clause-summary{ font-size: var(--fs-body); line-height:1.45; color: var(--ink-soft); margin-top:3px; white-space:pre-line; }
.clause.missing .clause-summary{ color: var(--ink-faint); font-style:italic; }
.clause-chev{ flex:none; color: var(--ink-faint); display:flex; transition: transform var(--dur-fast) ease; margin-top:2px; }
.clause-chev .icon{ width:16px; height:16px; }
.clause[data-open="true"] .clause-chev{ transform:rotate(180deg); color: var(--accent-deep); }
.clause-original{ border-top:1px solid var(--border); padding:10px 14px 12px; background: var(--surface-soft); }
.clause-original[hidden]{ display:none; }
.clause-original-label{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:5px; }
.clause-original-text{ font-size: var(--fs-body); line-height:1.5; white-space:pre-line; color: var(--ink); }
.clause-original-text:empty::before{ content:"Not in the contract."; color: var(--ink-faint); font-style:italic; }
.watch{ border-left:4px solid var(--mod-fg); }
.q-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:6px; }
.q-list li{ display:flex; gap:10px; font-size: var(--fs-body); line-height:1.45; padding:9px 12px; border:1.5px solid var(--border); border-radius: var(--radius-s); background: var(--surface); }
.q-list li .icon{ flex:none; width:16px; height:16px; color: var(--accent-deep); margin-top:2px; }
.chat-tool-card .cpc-hint{ font-size: var(--fs-caption); color: var(--ink-soft); margin-top:2px; }


/* ==========================================================================================
   THE COMPASS (see compass.js): one SVG rose, four variants. Only transform and opacity animate.
   ========================================================================================== */
.c-rose{ display:block; overflow:visible; color: var(--accent); }
.c-rose .c-face{ fill: var(--surface); stroke: var(--border-strong); }
.c-rose .c-inner{ fill:none; stroke: var(--border); }
.c-rose .c-tick{ stroke: var(--border-strong); }
.c-rose .c-tick.c-cardinal{ stroke: var(--ink-soft); }
.c-rose .c-tick.c-north{ stroke: var(--accent); }
.c-rose .c-letter{ fill: var(--ink-faint); font-family: var(--font-mono); font-weight:600; font-size:7px; }
.c-rose .c-letter.c-n{ fill: var(--accent-deep); }
.c-rose .c-needle{ transform: rotate(var(--needle, 0deg)); transform-origin:50px 50px; transition: transform var(--dur-base) var(--ease-spring); will-change: transform; }
.c-rose .c-needle-n{ fill: var(--accent); }
.c-rose .c-needle-s{ fill: var(--ink-faint); opacity:.7; }
.c-rose .c-pivot{ fill: var(--surface); stroke: var(--accent-deep); }
/* hero: the big one on Explore -- a soft halo behind it */
/* hero: the big dial on Explore. No rim, no inner ring, no drop shadow -- neutral ticks and letters, and only north (tick, needle) in the accent */
.c-hero .c-face{ fill:none; stroke:none; }
.c-hero .c-inner{ stroke:none; }
.c-hero .c-tick{ stroke: var(--neutral-line); }
.c-hero .c-tick.c-cardinal{ stroke: var(--neutral-text); }
.c-hero .c-tick.c-north{ stroke: var(--accent); }
.c-hero .c-letter, .c-hero .c-letter.c-n{ fill: var(--neutral-text); }
/* animate modes (Compass.logo / setMode): spin = continuous, settle = one swing to north, spinToAngle = spring to --needle */
.c-mode-spin .c-needle{ animation: c-spin 1s linear infinite; transition:none; }
.c-mode-settle .c-needle{ animation: c-settle 600ms var(--ease-out) both; }
@keyframes c-spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes c-settle{ 0%{ transform:rotate(-38deg);} 55%{ transform:rotate(12deg);} 80%{ transform:rotate(-4deg);} 100%{ transform:rotate(0deg);} }
.c-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding: var(--sp-5) var(--sp-3); color: var(--ink-soft); font-size: var(--fs-body); text-align:center; }
.c-loading .c-rose{ width:40px; height:40px; }
.c-loading.inline{ flex-direction:row; padding:0; gap:8px; display:inline-flex; }
.c-loading.inline .c-rose{ width:18px; height:18px; }
.btn .c-rose{ width:18px; height:18px; margin-right:8px; vertical-align:-4px; display:inline-block; color: currentColor; }
.btn .c-rose .c-face{ fill:transparent; stroke: currentColor; opacity:.5; } .btn .c-rose .c-needle-n{ fill: currentColor; } .btn .c-rose .c-needle-s{ fill: currentColor; opacity:.35; } .btn .c-rose .c-pivot{ fill: currentColor; stroke:none; }
.chat-msg.typing{ display:flex; align-items:center; gap:8px; animation:none; color: var(--ink-soft); }
.chat-msg.typing .c-rose{ width:20px; height:20px; }
/* map: the rose hunts over the tiles until the first ones arrive */
.map-loading{ position:absolute; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; background: var(--map-bg); border-radius: var(--radius-m); transition: opacity var(--dur-base) ease; }
.map-loading[hidden]{ display:none; }
.map-loading .c-rose{ width:44px; height:44px; }
/* accent: decorative, static */
.c-accent{ color: var(--accent-deep); }
.section-title .c-rose, .empty-note .c-rose{ width:16px; height:16px; display:inline-block; vertical-align:-3px; margin-right:6px; }
.empty-note .c-rose{ width:28px; height:28px; display:block; margin:0 auto 8px; opacity:.8; }
@media (prefers-reduced-motion: reduce){
  .c-mode-spin .c-needle, .c-mode-settle .c-needle{ animation:none; }
  .c-rose .c-needle{ transition:none; }
}

/* ==========================================================================================
   EXPLORE: the spinnable compass. Six points on a ring; whichever sits at north is active.
   Sizes are clamps of the viewport so the whole unit fits a small phone without cropping.
   ========================================================================================== */
.explore-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: clamp(8px, 2.5vh, 18px); }
.explore-greeting{ text-align:center; flex:none; margin-bottom: clamp(14px, 4vh, 34px); }
.explore-greeting .eyebrow{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--tracking-caps); text-transform:uppercase; color: var(--ink-faint); font-weight:600; }
.explore-greeting h2{ font-size: var(--fs-display); font-weight:600; margin-top:4px; }
.compass-ring{ position:relative; width: var(--ring, min(360px, 94vw, 50vh)); aspect-ratio:1; flex:none; touch-action:none; } /* one size for every wheel */
.compass-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; pointer-events:none;
  width: var(--hub); height: var(--hub);
}
.compass-center .c-rose{ width:100%; height:100%; }
.explore-caption{ text-align:center; flex:none; min-height:2.9em; padding: 0 var(--sp-4); }
.explore-caption .cap-name{ font-family: var(--font-display); font-size: var(--fs-title); font-weight:600; transition: opacity var(--dur-fast) ease; }
.explore-caption .cap-desc{ font-size: var(--fs-body); color: var(--ink-soft); line-height: var(--lh-body); margin-top:2px; }
.explore-caption.swap .cap-name, .explore-caption.swap .cap-desc{ opacity:0; }
/* the phase's lead strip: three chips under the greeting (PRE_ARRIVAL: Housing · Budget · Community, ...). Neutral
   until one is "hot" -- Housing with no address saved -- which gets the accent ring and a dot, the one loud thing. */
.explore-lead{ display:flex; justify-content:center; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap:wrap; }
.explore-lead[hidden]{ display:none; }
.setup-card{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:8px; margin-top: var(--sp-3); padding:9px 14px; border-radius:999px; background: var(--chip); color: var(--accent-deep); font-size: var(--fs-body); box-shadow: 0 0 0 1.5px var(--accent); }
.setup-card[hidden]{ display:none; }
.setup-card .icon{ width:16px; height:16px; }
.setup-card:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.setup-prompt{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:14px 15px; border-radius:14px; background: var(--surface-soft); border:1px solid var(--border); margin:8px 0 12px; }
.setup-prompt p{ margin:0; font-size: var(--fs-body); color: var(--ink); }
.setup-prompt .btn{ width:auto; }
.lead-chip{
  all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius: var(--radius-pill);
  background: var(--neutral-fill); color: var(--neutral-text); font-weight:600; font-size: var(--fs-caption); position:relative; white-space:nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.lead-chip .icon{ width:14px; height:14px; }
.lead-chip:hover{ color: var(--ink); }
.lead-chip:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.lead-chip.hot{ background: var(--chip); color: var(--accent-deep); box-shadow: 0 0 0 1.5px var(--accent); }
.lead-chip.hot::after{ content:""; position:absolute; right:-2px; top:-2px; width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.explore-go{ width:auto; min-width:160px; padding: 13px 28px; gap:8px; flex:none; }
.explore-go .icon{ width:18px; height:18px; }

/* --- The wheel look, shared by Explore and sign-up step 4 (Interests) ----------------------------------------------------
   No halo disc behind the wheel, no circle round any icon, no ring on the dial: icon + label pairs sit on the page around a
   large dial (the hero rose, over half the ring). A point is either NEUTRAL or ACTIVE (accent icon, bold label, scaled up by
   app.js). --bloom (0..1) drives how active a point is: on Explore it eases in as the ring turns a point to north; on the
   static Interests wheel a picked point is bloom 1. aria-current (Explore's point at north) and aria-pressed="true"
   (a picked interest) get the same bold label. Markup + metrics come from wheel.js; behaviour is per screen in app.js. */
#screen-explore, #screen-signup-interests{ overflow-x:hidden; } /* the spinning dial's rotated bounding box is wider than the ring; nothing visible ever leaves it */
.compass-dial{ position:absolute; inset:0; will-change: transform; cursor:grab; }
.compass-dial.grabbing{ cursor:grabbing; }
.compass-points{ position:absolute; inset:0; }
.compass-point{
  all:unset; position:absolute; left:50%; top:50%; width: var(--pt-w); display:flex; flex-direction:column; align-items:center; gap: var(--sp-1);
  cursor:pointer; z-index:2; text-align:center; will-change: transform; --bloom:0;
  color: var(--neutral-text);
  color: color-mix(in srgb, var(--accent-deep) calc(var(--bloom) * 100%), var(--neutral-text)); /* eases in as the point turns active */
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .compass-point[aria-current="true"], .compass-point[aria-pressed="true"]{ color: var(--accent-deep); }
}
.compass-point .pt-icon{ position:relative; display:flex; align-items:center; justify-content:center; color:inherit; }
.compass-point .pt-icon .icon{ width:28px; height:28px; }
.compass-point .pt-icon .icon svg{ stroke-width:1.75; }
.compass-point .pt-label{ color:inherit; font-weight:600; font-size: var(--fs-caption); line-height:1.1; white-space:nowrap; }
.compass-point[aria-current="true"] .pt-label, .compass-point[aria-pressed="true"] .pt-label{ font-weight:800; }
/* home only: the dot on the Housing spoke while there is no address yet */
#compass-ring .compass-point .pt-dot{ display:none; position:absolute; right:-4px; top:-2px; width:9px; height:9px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
#compass-ring .compass-point.hot .pt-dot{ display:block; }
/* pressing Go: the chosen icon dips and returns */
#compass-ring .compass-point.pulse .pt-icon{ animation: pt-press var(--dur-base) ease; }
@keyframes pt-press{ 40%{ transform:scale(.86); } }

/* the multi-select wheel (Interests; "is-static" is its historical name -- it spins like Explore now): a taller label allowance so long names ("Museums & culture") wrap to two lines under the icon
   instead of running past the ring; the one-line height keeps every icon exactly where Explore puts it. A small check badge marks a picked point. */
.compass-ring.is-static{ cursor:default; }
.is-static .compass-point .pt-label{ white-space:normal; height:1.1em; }
/* picked points ease up to their bloom -- only once the first layout is in, so the points don't fly out from the centre when the screen opens */
.is-static.is-laid-out .compass-point{ transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) ease; }
.is-static.is-spinning .compass-point{ transition: color var(--dur-fast) ease; } /* while the wheel turns, the points follow it frame by frame (as on Explore) */
.is-static .compass-point:focus-visible{ outline:none; }
.is-static .compass-point:focus-visible .pt-icon::after{ content:""; position:absolute; inset:-6px; border-radius:12px; border:2px solid var(--accent-deep); }
.is-static .compass-point .pt-check{ position:absolute; right:-6px; top:-4px; width:16px; height:16px; border-radius:50%; background: var(--on-accent); color: var(--accent-deep); display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 2px var(--accent); opacity:0; transform:scale(.4); transition: opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring); }
.is-static .compass-point .pt-check .icon{ width:10px; height:10px; }
.is-static .compass-point[aria-pressed="true"] .pt-check{ opacity:1; transform:scale(1); }
.is-static .compass-point.pop .pt-icon{ animation: interest-pop var(--dur-base) var(--ease-spring); }
@keyframes interest-pop{ 0%{ transform:scale(1);} 45%{ transform:scale(1.14);} 100%{ transform:scale(1);} }

/* ==========================================================================================
   LAUNCH + GATE (Compass.launch). Timings live in compass.js (LAUNCH) and the CSS below must match:
   spin 450ms, zoom 1200ms (needle 1650ms total), gate button 250ms, idle 20s/turn, glow 1.8s.
   ========================================================================================== */
.launch{ position:absolute; inset:0; z-index:200; background: var(--accent); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:inherit; touch-action:manipulation; }
.launch[hidden]{ display:none; }
.launch-dial{ width: 56%; max-width:56vmin; aspect-ratio:1; will-change: transform; transform-origin:50% 50%; }
.launch-dial .c-rose{ width:100%; height:100%; filter: drop-shadow(0 18px 30px rgba(var(--ink-rgb),.28)); }
.launch-dial .c-rose .c-needle{ transition:none; }
.launch.spin .launch-dial .c-needle{ animation: launch-spin 1650ms cubic-bezier(.12,.72,.18,1) both; }
@keyframes launch-spin{ from{ transform:rotate(0deg);} to{ transform:rotate(1440deg);} }
.launch.zoom .launch-dial{ animation: launch-zoom 1200ms cubic-bezier(.6,0,.35,1) both; }
@keyframes launch-zoom{ from{ transform:scale(1);} to{ transform:scale(7);} }
.launch.zoomed .launch-dial{ transform:scale(7); }        /* the gate: parked at the end of the zoom */
.launch.rm .launch-dial{ transform:none; }                 /* reduced motion: the full dial, no zoom */
.launch.rm .launch-dial .c-needle, .launch.rm .launch-explore .glow{ animation:none !important; } /* ...and no sway, no glow pulse */
/* the idle needle at the gate: one slow turn every 20 s */
.launch.gate .launch-dial .c-needle{ animation: launch-idle 20s linear infinite; }
@keyframes launch-idle{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.launch.reveal{ animation: launch-fade 350ms ease both; pointer-events:none; }
@keyframes launch-fade{ to{ opacity:0; } }
.launch-flyer{ position:absolute; left:0; top:0; width:24px; height:24px; opacity:0; will-change: transform; transform-origin:0 0; }
.launch-flyer .c-rose{ width:100%; height:100%; }
/* the Explore button: a disc over the pivot, exactly the pivot ring's size. The zoomed dial's pivot circle is r=4 with a
   1.6-unit stroke in a 100-unit rose, scaled x7: outer diameter = 9.6% of 7 dial widths = .672 dial widths. The button
   repeats that ring (a deep-pink band the width of the artwork's stroke around a pink centre), so the two read as one. */
.launch-explore{
  all:unset; box-sizing:border-box; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  width: calc(min(56%, 56vmin) * .672); aspect-ratio:1; padding:0; border-radius:50%;
  --gate-centre: var(--accent);
  background: radial-gradient(circle closest-side, var(--gate-centre) 0 66%, var(--accent-deep) 66.5% 100%);
  color: var(--on-accent); cursor:pointer;
  box-shadow: var(--shadow-accent), 0 4px 14px rgba(var(--ink-rgb),.18);
  font-family: var(--font-display); font-weight:700; font-size: clamp(.9rem, 4vw, var(--fs-title)); letter-spacing:.01em;
  opacity:0; pointer-events:none; transition: opacity 250ms ease, background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.launch.gate .launch-explore{ opacity:1; pointer-events:auto; }
.launch.leaving .launch-explore{ opacity:0; pointer-events:none; }
.launch-explore:focus-visible{ outline:3px solid var(--on-accent); outline-offset:3px; }
.launch-explore:active{ transform:translate(-50%,-50%) scale(.96); --gate-centre: var(--accent-press); }
.launch-explore .label{ line-height:1; }
.launch-explore .chev{ width:9px; height:9px; border-right:2.5px solid currentColor; border-top:2.5px solid currentColor; transform:rotate(45deg); margin-top:-1px; }
.launch-explore .glow{ position:absolute; inset:-4px; border-radius:50%; pointer-events:none; z-index:-1;
  box-shadow: 0 0 0 7px rgba(var(--accent-rgb),.28), 0 0 34px 6px rgba(var(--accent-rgb),.5); opacity:.8; will-change: transform, opacity; }
.launch.gate .launch-explore .glow{ animation: gate-glow 1.8s ease-in-out infinite; }
@keyframes gate-glow{ 0%,100%{ transform:scale(1); opacity:.6; } 50%{ transform:scale(1.05); opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .launch.spin .launch-dial .c-needle, .launch.zoom .launch-dial, .launch.gate .launch-dial .c-needle, .launch.gate .launch-explore .glow{ animation:none; }
  .launch.reveal{ animation-duration: 250ms; }
}

/* ---------- interests: the wheel is the shared one (see "The wheel look" above); only the page around it is here ---------- */
.interest-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: clamp(8px, 2.5vh, 18px); padding-bottom:8px; }
.interest-wrap .field-error{ min-height:0; margin-top:2px; }
.btn[aria-disabled="true"]{ opacity:.55; box-shadow:none; }


/* ==========================================================================================
   QUIET SURFACES: the shared minimalist language of Safety, Events and My Calendar (a screen
   carries class "quiet"). Rules: no bordered cards -- hairline dividers between items; one
   accent per item (the date or the number), the rest in ink / ink-soft; notes are a left rule,
   not a tinted box; icon buttons are bare until they're on. Spacing: 16px between items,
   section labels in the mono caption style (.section-title / .cal-day-heading).
   ========================================================================================== */
.screen.quiet .screen-head{ margin-bottom: var(--sp-5); }
.screen.quiet .screen-head .sub{ max-width:40ch; }
/* filter chips: text until selected */
.screen.quiet .f-chip{ background:transparent; border-color:transparent; padding:7px 10px; color: var(--ink-soft); }
.screen.quiet .f-chip:hover{ color: var(--ink); }
.screen.quiet .f-chip[aria-pressed="true"]{ background: var(--chip); border-color:transparent; color: var(--accent-deep); }
/* lists: dividers, not cards */
.screen.quiet .event-card{ border:0; border-radius:0; border-bottom:1px solid var(--border); margin:0; background:transparent; overflow:visible; }
.screen.quiet .event-card:last-child{ border-bottom:0; }
.screen.quiet .event-summary-row{ padding: var(--sp-4) 0; gap: var(--sp-4); }
.screen.quiet .event-date{ width:40px; background:transparent; border-radius:0; padding:0; font-family: var(--font-display); }
.screen.quiet .event-date .d{ font-size:1.5rem; font-weight:600; line-height:1; }
.screen.quiet .event-date .m{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.08em; color: var(--ink-faint); margin-top:3px; }
.screen.quiet .event-name{ font-size: var(--fs-body); line-height:1.35; }
.screen.quiet .event-meta{ color: var(--ink-soft); }
.screen.quiet .event-cat{ background:transparent; border:0; padding:0; margin-top:6px; color: var(--ink-faint); letter-spacing:.08em; }
.screen.quiet .event-logo{ margin-top:8px; }
.screen.quiet .commute-chip{ margin-top:4px; }
.screen.quiet .event-actions{ gap:2px; }
.screen.quiet .event-actions .icon-toggle{ width:34px; height:34px; background:transparent; border-color:transparent; color: var(--ink-faint); }
.screen.quiet .event-actions .icon-toggle:hover{ color: var(--accent-deep); background: var(--surface-soft); }
.screen.quiet .event-actions .icon-toggle.saved{ background: var(--accent); color: var(--on-accent); }
.screen.quiet .event-expand-btn{ padding:8px; }
.screen.quiet .event-expand{ border-top:1px dashed var(--border); margin:0 0 var(--sp-4); padding: var(--sp-3) 0 var(--sp-2); }
.screen.quiet .event-dropdown-actions .icon-toggle{ width:38px; height:38px; }
.screen.quiet .cal-cat-select{ background:transparent; border-color: var(--border); }
/* month grid: bare arrows, a soft selected day */
.screen.quiet .cal-nav{ margin-bottom: var(--sp-3); }
.screen.quiet .cal-nav button{ background:transparent; border-color:transparent; }
.screen.quiet .cal-nav button:hover{ background: var(--surface-soft); }
.screen.quiet .cal-grid{ gap:2px; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom:1px solid var(--border); }
.screen.quiet .cal-day{ font-size: var(--fs-body); }
.screen.quiet .cal-day.today{ box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.screen.quiet .cal-day.selected{ box-shadow:none; }
.screen.quiet .cal-day-heading{ margin: var(--sp-2) 0 var(--sp-2); }
.screen.quiet .empty-note{ padding: var(--sp-4) 0; text-align:left; }
.screen.quiet .empty-note::before{ display:none; }
/* Safety: the index and the district read as one column of numbers and hairlines */
.screen.quiet .district-select{ margin-bottom: var(--sp-4); }
.screen.quiet .gauge-card{ border:0; border-radius:0; padding: var(--sp-2) 0 var(--sp-4); margin-bottom: var(--sp-4); border-bottom:1px solid var(--border); background:transparent; }
.screen.quiet .gauge-svg{ width:132px; height:132px; }
.screen.quiet .gauge-svg .track{ stroke: var(--p4); stroke-width:6; }
.screen.quiet .gauge-svg .progress{ stroke-width:6; }
.screen.quiet .gauge-factors{ gap: var(--sp-3); }
.screen.quiet .gauge-factor-track{ height:3px; }
.screen.quiet .gauge-factor-fill{ background: var(--accent); }
.screen.quiet .district-card{ border:0; border-radius:0; padding:0; margin-bottom: var(--sp-4); background:transparent; }
.screen.quiet .district-card h3{ font-size: var(--fs-title); }
.screen.quiet .vibe-chips{ margin: var(--sp-2) 0 var(--sp-4); }
.screen.quiet .vibe-chip{ background:transparent; padding:0; color: var(--ink-soft); gap:4px; }
.screen.quiet .vibe-chip + .vibe-chip::before{ content:"·"; color: var(--ink-faint); margin-right:6px; }
.screen.quiet .police-activity{ margin-bottom: var(--sp-4); }
.screen.quiet .pa-total{ margin-bottom: var(--sp-3); }
.screen.quiet .pa-total .big{ font-size:2rem; line-height:1; }
.screen.quiet .pa-breakdown{ grid-template-columns: 1fr 1fr; gap:0; margin-bottom: var(--sp-3); border-top:1px solid var(--border); }
.screen.quiet .pa-stat{ background:transparent; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:9px 0; text-align:left; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.screen.quiet .pa-stat:nth-child(odd){ padding-right: var(--sp-3); }
.screen.quiet .pa-stat:nth-child(even){ padding-left: var(--sp-3); border-left:1px solid var(--border); }
.screen.quiet .pa-stat .n{ font-family: var(--font-mono); order:2; }
.screen.quiet .pa-stat .l{ text-transform:none; letter-spacing:0; font-size: var(--fs-caption); }
/* notes: a left rule instead of a tinted box; the status colour only on the rule */
.screen.quiet .caveat-note, .screen.quiet .known-gap, .screen.quiet .out-of-scope-note, .screen.quiet .stat-pending{
  background:transparent; border-radius:0; padding: 2px 0 2px var(--sp-3); border-left:2px solid var(--border-strong); margin: 0 0 var(--sp-4); font-size: var(--fs-caption); color: var(--ink-soft); line-height:1.5;
}
.screen.quiet .known-gap{ font-style:normal; }
.screen.quiet .stat-pending{ border-left-color: var(--pending-fg); }
.screen.quiet .out-of-scope-note{ border-left-color: var(--border); }
.screen.quiet .granularity-line{ margin-bottom: var(--sp-4); }
.screen.quiet .disclosure-toggle{ padding: var(--sp-3) 0; border-top:1px solid var(--border); }
.screen.quiet .citywide-card{ border:0; border-radius:0; padding:0 0 var(--sp-4); background:transparent; }
.screen.quiet .citywide-card h3{ font-size: var(--fs-body); }
.screen.quiet .cw-row{ padding:9px 0; }
.screen.quiet .cw-change{ background:transparent; padding:0; margin-left:8px; }
.screen.quiet .cw-change.up{ color: var(--mod-fg); }
.screen.quiet .cw-change.down{ color: var(--safe-fg); }
.screen.quiet .citywide-source{ margin-top: var(--sp-3); }


/* ==========================================================================================
   SOS INFORMATION. The SOS button mirrors the menu button: same 34px circle, top-left, on every
   screen past the launch -- in the semantic risk red (a status colour, not a new brand hue), the
   one deliberately loud element in the app. The card itself uses the quiet language (hairlines,
   one big number), because in a real emergency the page has to be scannable.
   ========================================================================================== */
.icon-btn.sos-btn{
  background: var(--risk-fg); border-color: var(--risk-fg); color:#fff;
  font-family: var(--font-sans); font-weight:800; font-size:.56rem; letter-spacing:.06em; line-height:1;
  box-shadow: 0 8px 18px -10px rgba(165,34,58,.75);
}
.icon-btn.sos-btn:hover{ background: var(--risk-fg); color:#fff; filter:brightness(1.08); }
.icon-btn.sos-btn:active{ transform:scale(.95); }
.icon-btn.sos-btn:focus-visible{ outline:3px solid var(--risk-fg); outline-offset:2px; }
.icon-btn.sos-btn[hidden]{ display:none; }
html[data-theme="dark"] .icon-btn.sos-btn{ background:#c8304a; border-color:#c8304a; }
.sos-eyebrow{ color: var(--risk-fg) !important; }
.sos-nudge{ border-left:2px solid var(--risk-fg); padding:2px 0 2px var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-caption); color: var(--ink-soft); line-height:1.5; }
.sos-edit-body[hidden]{ display:none; }
.sos-skip{ display:block; margin: 12px auto 0; }
.em-call{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; color: var(--on-accent);
  background: var(--risk-fg); border-radius: var(--radius-m); padding: 18px 16px 14px; margin: 6px 0 8px;
}
.em-call .num{ font-family: var(--font-display); font-weight:700; font-size:3rem; line-height:1; letter-spacing:.02em; }
.em-call .lbl{ font-size: var(--fs-caption); font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; margin-top:6px; }
.em-note{ font-size: var(--fs-caption); color: var(--ink-soft); line-height:1.5; margin: 0 0 var(--sp-3); }
.em-section{ border-top:1px solid var(--border); padding: var(--sp-3) 0 var(--sp-4); }
.em-section .section-title{ margin: 0 0 8px; }
.em-name{ font-weight:700; font-size: var(--fs-body); }
.em-sub{ font-size: var(--fs-caption); color: var(--ink-soft); line-height:1.5; margin-top:2px; }
.em-tel{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-family: var(--font-mono); font-weight:700; font-size: var(--fs-body); color: var(--accent-deep); text-decoration:none; border:1.5px solid var(--border); border-radius:999px; padding:7px 12px; }
.em-tel .icon{ width:16px; height:16px; }
.em-link{ color: var(--accent-deep); font-weight:700; }
.em-medical{ display:grid; grid-template-columns: auto 1fr; gap:6px 16px; font-size: var(--fs-body); }
.em-medical .k{ color: var(--ink-soft); }
.em-medical .v{ font-weight:600; overflow-wrap:anywhere; }
.em-medical .v.empty{ color: var(--ink-faint); font-weight:500; }
.em-blood{ font-family: var(--font-display); font-weight:700; font-size:1.6rem; line-height:1; color: var(--risk-fg); }
.em-offline .toggle-row{ gap: var(--sp-3); margin-bottom: 6px; }
.em-offline .toggle-row .lbl{ cursor:pointer; }
.em-foot{ border-top:1px solid var(--border); padding-top: var(--sp-3); display:flex; flex-direction:column; gap:10px; }
.em-stale{ font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-faint); }
.em-stale.offline{ color: var(--mod-fg); }

/* ---- honesty labels and load errors ---- */
.example-tag{ display:inline-block; margin-bottom:4px; padding:1px 9px; border:1px solid var(--border); border-radius:999px; background: var(--surface-soft); color: var(--ink-soft); font-size: var(--fs-caption); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.example-note{ margin:0 0 10px; padding:8px 10px; border-radius:10px; background: var(--surface-soft); color: var(--ink-soft); font-size: var(--fs-caption); line-height:1.4; }
.load-error{ text-align:center; padding:18px 8px; }
.load-error .empty-note{ margin:0 0 6px; }
.load-error .btn-link{ display:inline-block; margin-top:4px; }
.sample-tag{ display:inline-block; align-self:flex-start; padding:3px 10px; border-radius:999px; background: var(--mod-bg); color: var(--mod-fg); font-size: var(--fs-caption); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.h-body .sample-tag{ margin-bottom:2px; }
.swipe-card .sample-tag{ margin-top:6px; }
/* a listing from a source's API: attribution (where it came from), deliberately NOT in the Verified colour */
.src-tag{ display:inline-block; padding:0 8px; border:1px solid var(--border-strong); border-radius:999px; color: var(--ink-soft); font-weight:700; }
.swipe-card .src-tag{ margin-top:6px; font-size: var(--fs-caption); }
.verify-note.source{ background: var(--surface-soft); color: var(--ink-soft); }
.listing-tips{ margin:0 0 12px; padding:12px 13px; border-radius:12px; border:1px solid var(--border); font-size: var(--fs-body); line-height:1.45; }
.listing-tips .tips-h{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:6px; }
.listing-tips ul{ margin:0 0 8px; padding-left:18px; }
.listing-tips li.warn{ color: var(--mod-fg); font-weight:600; }
.verify-note.example{ background: var(--surface-soft); color: var(--ink-soft); flex-wrap:wrap; align-items:center; }
.housing-sample-line{ margin:6px 0 0; font-size: var(--fs-body); font-weight:600; color: var(--mod-fg); }
.housing-sample-line[hidden]{ display:none; }
.commute-via{ margin:-6px 0 12px; font-size: var(--fs-caption); color: var(--ink-soft); line-height:1.4; }
.sc-verified{ margin-top:6px; font-weight:700; color: var(--safe-fg); font-size: var(--fs-caption); }

/* ---- interests: "For you" on Events, and the Settings chips ---- */
.event-card.for-you{ box-shadow: inset 3px 0 0 var(--accent); padding-left:12px; }
.foryou-tag{ display:inline-block; margin-bottom:4px; margin-right:6px; padding:1px 9px; border-radius:999px; background: var(--chip); color: var(--accent-deep); font-size: var(--fs-caption); font-weight:700; }
.f-chip.matches::after{ content:""; display:inline-block; width:6px; height:6px; margin-left:6px; border-radius:50%; background: var(--accent); vertical-align:middle; }
.interest-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.interest-chip{ display:inline-flex; align-items:center; gap:6px; }
.interest-chip .icon{ width:16px; height:16px; }

/* ---------- Compare my room ---------- */
.cmp-scam-btn{ width:100%; margin:-2px 0 14px; }
.cmp-block{ border:1.5px solid var(--border); border-radius: var(--radius-m); background: var(--surface); padding:14px 16px; margin-bottom:12px; }
.cmp-h{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); font-weight:600; margin-bottom:6px; }
.cmp-big{ font-family: var(--font-display); font-size: var(--fs-display); font-weight:600; line-height:1.15; color: var(--ink); }
.cmp-unit{ font-family: var(--font-body, inherit); font-size: var(--fs-body); font-weight:600; color: var(--ink-soft); }
.cmp-line{ font-size: var(--fs-body); color: var(--ink); margin:6px 0 0; }
.cmp-label{ font-size: var(--fs-caption); font-weight:700; color: var(--accent-deep); margin:8px 0 0; }
.cmp-muted{ font-size: var(--fs-body); line-height:1.45; color: var(--ink-soft); margin:6px 0 0; }
.cmp-stale{ display:flex; gap:8px; align-items:flex-start; font-size: var(--fs-caption); line-height:1.4; color: var(--mod-fg); background: var(--mod-bg); border-radius: var(--radius-s); padding:8px 10px; margin:10px 0 0; }
.cmp-stale .icon{ width:16px; height:16px; flex:none; margin-top:1px; }
.cmp-notes{ margin:0 0 12px; padding:0 0 0 18px; font-size: var(--fs-caption); line-height:1.45; color: var(--ink-soft); }
.cmp-notes li{ margin-bottom:4px; }
.cmp-share{ border-radius: var(--radius-m); background: var(--p2); padding:12px 14px; margin-bottom:12px; }
.cmp-share p{ font-size: var(--fs-body); margin:0 0 10px; }
.cmp-attrib{ font-size: var(--fs-caption); line-height:1.4; color: var(--ink-faint); margin:0 0 12px; }
#screen-compare-room .toggle-row{ margin-bottom:8px; }
#screen-compare-room .place-status:empty{ min-height:0; margin:0; }