@import url('/assets/design-system.css');
/* Shell */
.app-layout {
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  min-height:100dvh
}
.sidebar {
  height:100dvh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:24px 20px;
  background:var(--navy);
  color:#fff;
  z-index:20;
  overflow:auto
}
.sidebar .wordmark {
  font-size:1.125rem;
  gap:8px
}
.nav-caption {
  font-size:.8125rem;
  color:#C4D5D7;
  margin:44px 0 12px;
  letter-spacing:.02em
}
.sidebar nav {
  display:flex;
  flex-direction:column;
  gap:8px;
  flex-shrink:0
}
.sidebar nav a {
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:10px;
  padding:12px;
  min-height:48px;
  font-size:.9375rem;
  color:#D6E4E5
}
.sidebar nav a[aria-current=page] {
  background:#28464D;
  color:#fff
}
.sidebar nav a[aria-current=page] .ico {
  color:var(--gold)
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:36px
}
.workspace-link {
  display:flex;
  gap:10px;
  align-items:center;
  border-top:1px solid #729096;
  padding-top:16px;
  font-size:.9375rem
}
.workspace-link>span:nth-child(2) {
  min-width:0;
  flex:1;
  overflow-wrap:anywhere
}
.workspace-link small {
  font-size:.875rem;
  color:#D6E4E5;
  margin-top:3px
}
.workspace-link>.ico {
  display:none
}
.avatar {
  display:none
}
.workspace {
  min-width:0
}
.topbar {
  height:72px;
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  gap:16px
}
.topbar-label {
  font-size:1.125rem;
  font-weight:600
}
.topbar-right {
  display:flex;
  align-items:center;
  gap:8px
}
.quiet-link {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:48px;
  min-height:48px;
  color:var(--muted)
}
.mobile-title,.mobile-back,.bottom-nav,.keyboard-done {
  display:none
}
.content {
  max-width:1320px;
  margin:auto;
  padding:40px;
  min-height:calc(100dvh - 150px);
  outline:none
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:28px
}
.page-kicker {
  display:none
}
.lede {
  font-size:1.0625rem;
  line-height:1.5;
  margin-top:8px;
  max-width:780px
}
.app-footer {
  max-width:1320px;
  margin:auto;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  padding:24px 40px;
  border-top:1px solid var(--border);
  font-size:.875rem;
  color:var(--muted)
}
.app-footer a {
  margin-left:auto;
  min-height:24px
}
.content>section,.content>.stat-grid,.content>.overview-grid {
  margin-bottom:28px
}
.boot {
  display:grid;
  place-content:center;
  min-height:100dvh
}
.loading {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:140px;
  color:var(--muted);
  font-size:1rem
}
.spinner {
  width:20px;
  height:20px;
  border:2px solid var(--border);
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin .8s linear infinite
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
/* Surfaces, fields and feedback */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden
}
.form-card {
  padding:24px
}
.form-card>h2,.form-card>p {
  margin-bottom:16px
}
.form-card>p:last-child {
  margin-top:16px;
  margin-bottom:0
}
.form-card h2 {
  font-size:1.375rem
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:28px 0 20px
}
.section-heading h2 {
  font-size:1.375rem
}
.section-heading .eyebrow {
  display:none
}
.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0
}
.field>span:first-child {
  font-size:.9375rem;
  font-weight:500;
  color:var(--text)
}
.field>small {
  font-size:.9375rem
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.checkbox {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  font-size:1rem;
  color:var(--text)
}
.checkbox input {
  margin:0
}
.toolbar {
  display:flex;
  align-items:end;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:24px
}
.toolbar>.field {
  flex:1;
  min-width:160px
}
.toolbar>select {
  width:auto;
  max-width:280px;
  flex:1;
  min-width:150px
}
.search-input {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:180px;
  flex:1;
  border:1px solid var(--input-border);
  background:var(--card);
  border-radius:10px;
  padding-left:12px;
  color:var(--muted)
}
.search-input input {
  border:0;
  background:none;
  padding-left:0;
  min-height:48px
}
.search-input:focus-within {
  outline:2px solid var(--green);
  outline-offset:2px
}
.search-input input:focus {
  outline:0
}
.search-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  flex:1;
  min-width:180px;
  font-size:.9375rem;
  font-weight:500
}
.search-field>.search-input {
  width:100%
}
.search-field>.search-input input {
  font-weight:400
}
.search-field>.search-input .ico {
  display:none
}
.notice {
  padding:16px 20px;
  background:var(--blue);
  color:var(--text);
  border-radius:10px;
  font-size:.9375rem;
  line-height:1.5;
  margin:20px 0
}
.notice p {
  margin-top:8px;
  color:inherit
}
.notice.error {
  background:#F9E9E6;
  color:var(--danger);
  border:1px solid #D9A29A
}
.notice.error::before {
  content:'!';
  font-weight:700;
  margin-right:10px
}
.empty {
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:32px;
  align-items:flex-start;
  text-align:left;
  background:var(--blue);
  border-radius:18px;
  color:var(--text)
}
.empty h3 {
  font-size:1.375rem;
  line-height:1.35
}
.empty p {
  font-size:1.0625rem;
  max-width:640px;
  color:inherit
}
.empty-icon {
  display:grid;
  place-items:center;
  color:var(--text);
  width:44px;
  height:44px
}
.empty-icon .ico {
  width:32px;
  height:32px
}
.empty>.btn {
  margin-top:8px
}
.list-row {
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  border-bottom:1px solid var(--border);
  font-size:1rem;
  min-width:0
}
.list-row:last-child {
  border-bottom:0
}
.list-row>div:first-child {
  flex:1;
  min-width:0
}
.list-row p {
  font-size:.9375rem;
  margin-top:5px
}
.list-row>span:first-child {
  flex:1
}
.list-row .actions {
  margin-left:auto
}
.segmented {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
  max-width:100%
}
.segmented button {
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  padding:10px 16px;
  border-radius:10px;
  min-height:44px;
  font-size:.9375rem;
  flex:1
}
.segmented button[aria-pressed=true] {
  background:var(--navy);
  color:#fff;
  border-color:var(--navy)
}
.scroll-tabs {
  flex-wrap:wrap
}
.load-more {
  display:flex;
  margin:24px auto
}
.disclosure {
  padding:16px 0;
  border-top:1px solid var(--border);
  margin-top:8px
}
.disclosure summary {
  font-size:1rem;
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  min-height:44px;
  align-content:center
}
.disclosure>.stack {
  padding-top:16px
}
.table-scroll {
  overflow:auto;
  max-width:100%;
  margin:20px 0
}
table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
  font-size:1rem
}
th {
  font-weight:600;
  color:var(--text);
  font-size:.9375rem
}
th,td {
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  white-space:nowrap
}
td {
  color:var(--muted)
}
/* Overview and tool navigation */
.overview-hero {
  padding:32px;
  background:var(--navy);
  border-radius:18px;
  color:#fff;
  margin-bottom:28px
}
.overview-hero .eyebrow {
  color:var(--gold);
  margin-bottom:18px
}
.overview-hero h2 {
  font-size:2.75rem;
  line-height:1.15;
  letter-spacing:-.035em;
  color:#fff;
  margin-bottom:20px;
  max-width:740px
}
.overview-hero p:not(.eyebrow) {
  color:#D6E4E5;
  max-width:760px;
  margin-bottom:16px;
  font-size:1.125rem;
  line-height:1.5
}
.overview-hero .btn {
  margin-top:0
}
.stat-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.stat-card {
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  min-width:0;
  min-height:84px
}
.stat-card>div {
  min-width:0;
  flex:1
}
.stat-card>div>span:last-child {
  display:block;
  font-size:.9375rem;
  color:var(--muted);
  margin-top:4px
}
.stat-card>.ico:last-child {
  width:18px;
  height:18px;
  color:var(--muted)
}
.stat-icon,.row-icon,.destination-icon,.tool-icon,.content-mark {
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--mint);
  color:var(--text)
}
.stat-card:first-child .stat-icon {
  background:var(--pale)
}
.stat-card:nth-child(3) .stat-icon {
  background:var(--blue)
}
.metric {
  font-size:1.75rem;
  font-weight:600;
  line-height:1.25;
  overflow-wrap:anywhere
}
.stat-card .metric {
  font-size:1.125rem;
  letter-spacing:0
}
.benefit-rows:has(.empty) {
  border:0;
  background:none
}
.benefit-rows .empty {
  padding:16px 20px;
  border-radius:10px
}
.benefit-rows .empty p {
  font-size:.9375rem
}
.benefit-row {
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:20px;
  text-align:left;
  border-bottom:1px solid var(--border)
}
.benefit-row:last-child {
  border-bottom:0
}
.benefit-row>span:nth-child(2) {
  min-width:0
}
.benefit-row small {
  margin-top:4px
}
.row-value {
  margin-left:auto;
  text-align:right;
  font-size:1.125rem
}
.benefit-row>.ico {
  width:18px;
  color:var(--muted)
}
.tracked-summary {
  display:flex;
  gap:16px;
  align-items:baseline;
  padding:24px;
  border-bottom:1px solid var(--border)
}
.tracked-summary strong {
  font-size:2rem;
  font-variant-numeric:tabular-nums
}
.tracked-summary span {
  font-size:.9375rem;
  color:var(--muted)
}
.destination-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.destination-card {
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:18px;
  min-width:0
}
.destination-card>div {
  min-width:0;
  flex:1
}
.destination-card h3 {
  font-size:1.0625rem
}
.destination-card p {
  font-size:.9375rem;
  margin-top:4px
}
.destination-card>.ico {
  width:18px;
  color:var(--muted)
}
.more-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  align-items:start
}
.more-group h2 {
  font-size:1.375rem;
  margin-bottom:20px
}
.tool-list {
  display:flex;
  flex-direction:column;
  gap:16px
}
.tool-row {
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  min-height:84px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px
}
.tool-row>span:nth-child(2) {
  flex:1;
  min-width:0
}
.tool-row strong {
  font-size:1.0625rem
}
.tool-row small {
  margin-top:4px
}
.tool-row>.ico {
  width:18px;
  color:var(--muted)
}
.install-card {
  padding:24px;
  margin-top:28px;
  max-width:760px
}
.install-card h2 {
  margin-bottom:12px
}
.install-card .btn {
  margin:16px 0
}
.install-card .fine {
  margin-top:16px
}
.install-steps {
  padding-left:24px;
  color:var(--muted)
}
.install-steps li+li {
  margin-top:12px
}
/* Editorial and directory patterns. No reference imagery is shipped. */
.article-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:20px
}
.article-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  padding:24px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:18px;
  min-width:0;
  text-align:left
}
.article-card h2,.article-card h3 {
  font-size:1.25rem;
  line-height:1.4;
  letter-spacing:-.02em
}
.article-card p {
  font-size:1rem;
  line-height:1.5;
  overflow-wrap:anywhere
}
.article-card>.text-link,.article-foot {
  margin-top:auto
}
.article-foot {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  width:100%;
  color:var(--muted);
  font-size:.9375rem
}
.article-foot>span:last-child {
  color:var(--green)
}
.content-heading {
  display:flex;
  align-items:flex-start;
  gap:16px;
  width:100%
}
.content-heading>div:last-child {
  min-width:0;
  flex:1
}
.content-heading .eyebrow {
  font-size:.8125rem;
  margin-bottom:6px
}
.content-mark {
  width:64px;
  height:64px;
  background:var(--blue);
  font-size:1.125rem;
  font-weight:600
}
.content-mark .ico {
  width:28px;
  height:28px
}
.editorial-card {
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  column-gap:24px;
  row-gap:12px;
  align-items:start
}
.editorial-art {
  grid-row:1/5;
  width:160px;
  min-height:170px;
  border-radius:12px;
  background:var(--blue);
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
  padding:24px;
  color:var(--text)
}
.editorial-art .ico {
  width:32px;
  height:32px
}
.editorial-art strong {
  font-size:1.25rem;
  line-height:1.25
}
.editorial-card .article-foot {
  grid-column:2
}
.editorial-card .read-action {
  background:var(--navy);
  border-radius:10px;
  color:white;
  font-size:1rem;
  font-weight:600;
  padding:12px 20px;
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center
}
.editorial-card .article-foot>span:last-child {
  color:white
}
.editorial-card .eyebrow {
  font-size:.8125rem
}
.editorial-card>p {
  grid-column:2
}
.content[data-route=library] .article-grid {
  grid-template-columns:1fr
}
.content[data-route=library] .article-card {
  max-width:100%
}
.offer-badge {
  background:var(--pale);
  color:var(--text);
  padding:6px 10px;
  border-radius:6px;
  font-size:.9375rem
}
.property-card .content-mark {
  background:var(--pale)
}
.property-card:nth-child(3n) .content-mark {
  background:var(--blue)
}
.brand-card .content-mark {
  background:var(--pale);
  font-size:1.625rem
}
.airport-code {
  display:flex;
  flex-direction:column;
  gap:10px;
  border-radius:12px;
  background:var(--blue);
  padding:16px;
  font-size:1.75rem;
  font-weight:600;
  min-width:86px;
  align-items:flex-start;
  line-height:1.1
}
.airport-code .ico {
  width:24px;
  height:24px
}
.airport-card .content-heading {
  align-items:center
}
.airport-card .facility-action {
  border-top:1px solid var(--border);
  padding-top:16px;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px
}
.airport-card .btn {
  align-self:flex-start
}
.health-card .content-mark {
  background:var(--mint);
  color:var(--green)
}
.reader {
  max-width:690px;
  margin:auto;
  padding:8px 0 24px
}
.reader h2 {
  font-size:2rem;
  line-height:1.2;
  margin:16px 0
}
.reader .reader-excerpt {
  font-size:1.125rem;
  line-height:1.6;
  margin-bottom:16px
}
.reader .actions {
  margin:20px 0 28px
}
.reader h3 {
  font-size:1.375rem;
  margin:28px 0 12px
}
.reader>.prose {
  font-size:1.0625rem;
  line-height:1.7;
  margin:20px 0;
  color:var(--text)
}
.reader-back {
  margin-bottom:20px
}
.sources {
  border-top:1px solid var(--border);
  padding-top:8px;
  margin-top:32px
}
.sources p {
  margin:8px 0
}
.reader .article-card {
  margin-top:16px;
  width:100%
}
/* Real interactive map: preserve provider attribution and input behavior. */
.map-layout {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);
  min-height:570px;
  border-radius:18px;
  overflow:hidden;
  gap:20px
}
.map-panel {
  position:relative;
  min-width:0;
  background:#E9F0E9;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden
}
#map {
  position:absolute;
  inset:0;
  overflow:hidden;
  touch-action:none;
  cursor:grab
}
.map-world {
  position:absolute;
  inset:0
}
.map-tile {
  position:absolute;
  width:256px;
  height:256px;
  max-width:none;
  filter:saturate(.55);
  pointer-events:none;
  user-select:none
}
.map-controls {
  position:absolute;
  top:14px;
  left:14px;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--input-border);
  border-radius:10px;
  overflow:hidden;
  z-index:2;
  cursor:default;
  box-shadow:var(--raised)
}
.map-controls button {
  width:44px;
  height:44px;
  font-size:1.5rem;
  color:var(--text)
}
.map-controls button+button {
  border-top:1px solid var(--border)
}
.map-attribution {
  position:absolute;
  bottom:0;
  right:0;
  background:var(--card);
  color:var(--text);
  font-size:.6875rem;
  padding:4px 8px;
  z-index:2;
  cursor:default
}
.map-attribution a {
  text-decoration:underline
}
.map-pin {
  position:absolute;
  transform:translate(-50%,-50%);
  width:32px;
  height:32px;
  min-width:32px;
  border:2px solid var(--card);
  background:var(--gold);
  color:var(--text);
  border-radius:50%;
  font-weight:700;
  font-size:.8125rem;
  box-shadow:var(--raised);
  z-index:1;
  padding:0
}
.map-pin.cluster {
  width:38px;
  height:38px;
  border-width:3px
}
.search-area {
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  white-space:nowrap;
  box-shadow:var(--raised);
  font-size:.9375rem;
  padding:12px 16px
}
.places-panel {
  min-width:0;
  max-height:610px;
  overflow-y:auto
}
.places-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  font-size:1.125rem
}
.places-panel>#area-label {
  font-size:.875rem;
  margin-bottom:20px
}
.place-row {
  width:100%;
  display:flex;
  gap:16px;
  padding:18px 16px;
  text-align:left;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  align-items:center;
  margin-bottom:12px
}
.place-icon {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:none;
  background:var(--mint);
  border-radius:12px;
  color:var(--text)
}
.place-row>span:nth-child(2) {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  flex:1
}
.place-row strong {
  font-size:1rem;
  line-height:1.4
}
.place-row small {
  font-size:.8125rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.025em
}
.place-row>span:nth-child(2)>span {
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.4
}
.place-distance {
  font-size:.875rem;
  color:var(--muted);
  margin-left:auto;
  white-space:nowrap
}
.meta-block {
  border-top:1px solid var(--border);
  margin:24px 0;
  padding-top:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:.9375rem;
  color:var(--muted)
}
.chain-map {
  position:relative;
  height:320px;
  overflow:hidden;
  touch-action:none;
  border:1px solid var(--border);
  border-radius:14px;
  margin:20px 0;
  cursor:grab
}
.chain-map+.form-grid,.chain-map~.actions {
  margin:20px 0
}
.map-touch-toggle {
  display:none;
  position:absolute;
  bottom:40px;
  left:12px;
  z-index:4;
  background:var(--card);
  border:1px solid var(--input-border);
  border-radius:10px;
  padding:10px 14px;
  color:var(--text);
  font-size:.9375rem
}
.map-touch-toggle[aria-pressed=true] {
  background:var(--navy);
  color:#fff
}
.content[data-route=favorites]>.card {
  background:none;
  border:0;
  max-width:780px
}
.content[data-route=favorites] .place-row {
  margin-bottom:16px
}
/* Wallet */
.wallet-overview {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--mint);
  border-radius:16px;
  padding:20px 24px;
  margin-bottom:28px
}
.wallet-overview .metric {
  display:block;
  margin-top:4px
}
.wallet-grid {
  display:flex;
  flex-direction:column;
  gap:28px
}
.wallet-item {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:24px;
  align-items:start
}
.wallet-card {
  padding:0;
  min-width:0;
  text-align:left;
  width:100%
}
.card-art {
  min-height:230px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  padding:28px;
  border-radius:18px;
  background:var(--navy);
  color:#fff
}
.card-art>span:first-child {
  font-size:.8125rem;
  color:var(--gold);
  text-transform:uppercase
}
.card-art>strong {
  font-size:1.5rem;
  line-height:1.3;
  letter-spacing:-.025em;
  margin-top:28px;
  max-width:100%
}
.card-art>.ico {
  position:absolute;
  bottom:28px;
  right:28px;
  color:var(--gold)
}
.card-art>small {
  font-size:.9375rem;
  color:#D6E4E5;
  padding-right:32px
}
.art-1 {
  background:#284B51
}
.art-2 {
  background:#30404E
}
.wallet-summary {
  padding:20px 0 0
}
.wallet-summary h2 {
  font-size:1.25rem;
  margin-bottom:10px
}
.wallet-summary p {
  font-size:.9375rem
}
.wallet-credits {
  display:flex;
  flex-direction:column;
  gap:16px
}
.wallet-credit {
  padding:24px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--card)
}
.wallet-credit h3 {
  font-size:1.375rem;
  margin:12px 0
}
.wallet-credit .fine {
  margin:12px 0
}
.wallet-credit .btn {
  width:100%;
  margin-top:12px
}
.catalog-list {
  margin:20px 0;
  max-height:320px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px
}
.catalog-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  text-align:left;
  padding:20px;
  border-bottom:1px solid var(--border)
}
.catalog-row:last-child {
  border-bottom:0
}
.catalog-row strong {
  display:block;
  font-size:1.0625rem;
  margin:6px 0
}
.catalog-row small {
  font-size:.9375rem
}
.catalog-row .ico {
  color:var(--green)
}
.detail-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px
}
.detail-summary .metric {
  display:block;
  font-size:2.25rem;
  margin:12px 0
}
.credit-list {
  margin-top:20px
}
.credit-row {
  padding:24px 0;
  border-bottom:1px solid var(--border)
}
.credit-row:last-child {
  border-bottom:0
}
.credit-row>h3 {
  margin:12px 0
}
.credit-row p {
  font-size:1rem;
  margin-top:12px
}
.credit-row .actions {
  margin-top:16px
}
.credit-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.credit-title h3 {
  margin-top:8px;
  font-size:1.25rem
}
.credit-title>strong {
  font-size:1.5rem;
  font-variant-numeric:tabular-nums
}
.credit-title>strong,.credit-title h3 {
  overflow-wrap:anywhere
}
progress {
  width:100%;
  height:7px;
  display:block;
  border:0;
  border-radius:7px;
  overflow:hidden;
  appearance:none;
  background:var(--border);
  margin-top:18px
}
progress::-webkit-progress-bar {
  background:var(--border)
}
progress::-webkit-progress-value {
  background:var(--green)
}
progress::-moz-progress-bar {
  background:var(--green)
}
/* Financial tools: result, inputs and saved actions remain separate. */
.planner-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:start
}
.planner-grid>.form-card {
  padding:24px
}
.planner-grid .form-grid {
  grid-template-columns:1fr
}
.result-panel {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px
}
.result-panel>.empty {
  min-height:220px
}
.result-card {
  padding:28px;
  border-radius:18px;
  background:var(--navy);
  color:#fff;
  min-width:0
}
.result-card .eyebrow {
  color:var(--gold)
}
.result-card p,.result-card small {
  color:#D6E4E5
}
.result-number {
  display:block;
  margin:16px 0;
  font-size:clamp(2rem,3.2vw,2.75rem);
  line-height:1.15;
  letter-spacing:-.04em;
  overflow-wrap:anywhere;
  color:#fff;
  font-weight:600
}
.result-card>p:not(.eyebrow) {
  font-size:1rem;
  line-height:1.5
}
.result-rows {
  display:flex;
  flex-direction:column;
  margin:20px 0 0
}
.result-rows>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  font-size:1rem
}
.result-rows>div>span {
  color:#D6E4E5
}
.result-rows strong {
  text-align:right;
  font-variant-numeric:tabular-nums
}
.result-card .fine {
  font-size:.9375rem;
  margin-top:20px
}
.result-card .notice {
  background:#28464D;
  color:#E5EEF0
}
.result-actions {
  display:flex;
  flex-direction:column;
  gap:12px
}
.result-card .disclosure {
  border-color:#5C777E
}
.result-card .disclosure summary {
  color:#fff
}
.result-card table th {
  color:#fff
}
.result-card table td {
  color:#D6E4E5
}
.result-card th,.result-card td {
  border-color:#5C777E
}
.condition {
  margin:0 0 20px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  background:var(--card);
  min-width:0
}
.condition legend {
  font-size:.9375rem;
  color:var(--muted);
  padding:0 8px
}
.condition .form-grid {
  grid-template-columns:1fr
}
.content[data-route=va] .planner-grid>.form-card {
  background:none;
  border:0;
  padding:0;
  overflow:visible
}
.content[data-route=va] #va-form>h2,.content[data-route=va] #va-form>p {
  padding:0 4px
}
.content[data-route=va] #va-form>.disclosure {
  padding:20px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px
}
.allocation-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.growth-chart {
  width:100%;
  height:auto;
  margin-top:20px;
  overflow:visible
}
.chart-grid {
  stroke:#5C777E;
  fill:none;
  stroke-width:1
}
.principal-line {
  stroke:#B3CCD5;
  fill:none;
  stroke-width:2;
  stroke-dasharray:6 5
}
.balance-line {
  stroke:var(--gold);
  fill:none;
  stroke-width:3;
  stroke-linejoin:round
}
.chart-legend {
  display:flex;
  justify-content:center;
  gap:20px;
  font-size:.875rem;
  color:#D6E4E5;
  flex-wrap:wrap
}
.chart-legend>span:first-child {
  color:var(--gold)
}
.tsp-tool-select {
  display:none
}
.snapshot-grid>.result-panel {
  grid-column:1;
  grid-row:1
}
.snapshot-grid>.form-card {
  grid-column:2;
  grid-row:1
}
.snapshot-links {
  display:flex;
  flex-direction:column;
  gap:16px
}
.snapshot-links .tool-row {
  text-align:left;
  width:100%
}
.budget-layout {
  display:flex;
  flex-direction:column;
  gap:24px
}
.budget-layout>.result-panel {
  order:-1
}
.budget-inputs {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:start
}
.budget-bills .section-heading {
  margin-top:0
}
.settings-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:start
}
.settings-grid>.stack {
  gap:24px
}
.settings-grid #reserve-profile {
  display:flex;
  flex-direction:column;
  gap:20px
}
.settings-grid .form-grid {
  grid-template-columns:1fr
}
/* Conversations */
.chat-layout {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  min-height:560px;
  height:calc(100dvh - 240px);
  background:var(--card)
}
.chat-history {
  padding:16px;
  border-right:1px solid var(--border);
  overflow:auto
}
.chat-history #threads {
  margin-top:20px
}
.chat-history .btn {
  font-size:.9375rem
}
.history-toggle {
  display:none
}
.thread-row {
  display:flex;
  align-items:center;
  gap:4px;
  border-bottom:1px solid var(--border);
  padding:8px 0
}
.thread-button {
  text-align:left;
  flex:1;
  padding:12px 0;
  color:var(--muted);
  overflow-wrap:anywhere;
  font-size:.9375rem;
  min-height:48px
}
.thread-button[aria-current=true] {
  font-weight:600;
  color:var(--green)
}
.thread-row .icon-button {
  min-width:44px;
  min-height:44px;
  padding:8px
}
.thread-row .ico {
  width:18px;
  height:18px
}
.chat-main {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0
}
#chat-messages {
  overflow:auto;
  flex:1;
  min-height:0;
  padding:24px;
  scroll-behavior:smooth
}
.chat-turn {
  display:flex;
  flex-direction:column;
  gap:24px;
  margin:0 auto 28px;
  max-width:700px
}
.user-message {
  background:var(--blue);
  padding:16px 20px;
  border-radius:16px;
  max-width:92%;
  align-self:flex-end
}
.user-message>p {
  white-space:pre-wrap;
  color:var(--text);
  font-size:1.0625rem;
  margin-top:8px;
  overflow-wrap:anywhere
}
.message-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.8125rem;
  color:var(--muted);
  font-weight:600
}
.message-label .ico {
  width:20px;
  height:20px
}
.message-text {
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--text);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:12px 0
}
.chat-main form {
  margin:0 20px 20px;
  border:1px solid var(--input-border);
  border-radius:12px;
  overflow:hidden;
  background:var(--bg);
  flex:none
}
.chat-main form:focus-within {
  outline:2px solid var(--green);
  outline-offset:2px
}
.chat-main textarea {
  border:0;
  border-radius:0;
  background:none;
  font-size:1.0625rem;
  resize:none;
  padding:16px;
  min-height:90px
}
.chat-main textarea:focus {
  outline:none
}
.composer-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:0 12px 12px
}
.composer-actions small {
  font-size:.8125rem;
  margin-right:auto
}
.composer-actions small span {
  display:inline
}
.chat-welcome {
  text-align:left;
  max-width:650px;
  padding:16px 0;
  margin:auto
}
.chat-welcome h2 {
  margin:0 0 16px;
  font-size:1.5rem
}
.chat-welcome>p {
  font-size:1.0625rem
}
.chat-emblem {
  display:none
}
.prompt-grid {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:24px
}
.prompt {
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:1rem;
  padding:16px;
  color:var(--text);
  text-align:left;
  min-height:64px
}
.prompt .ico {
  color:var(--muted)
}
#chat-error {
  margin:0 20px
}
#chat-error:empty {
  display:none
}
/* Sheets and transient surfaces */
dialog {
  max-width:min(620px,calc(100vw - 40px));
  width:100%;
  max-height:calc(100dvh - 48px);
  border:1px solid var(--border);
  border-radius:18px;
  padding:0;
  background:var(--card);
  color:var(--text);
  box-shadow:0 16px 48px rgb(19 46 55 / 18%);
  overflow-y:auto
}
dialog.wide {
  max-width:min(880px,calc(100vw - 40px))
}
dialog::backdrop {
  background:rgb(19 46 55 / 65%)
}
.dialog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 24px;
  border-bottom:1px solid var(--border);
  background:var(--card);
  position:sticky;
  top:0;
  z-index:5
}
.dialog-head h2 {
  font-size:1.5rem;
  flex:1;
  overflow-wrap:anywhere
}
.dialog-head .icon-button {
  background:var(--bg)
}
.dialog-body {
  padding:24px
}
.dialog-body>p {
  font-size:1.0625rem;
  line-height:1.5;
  margin:0 0 20px
}
.dialog-body>h2 {
  margin-bottom:16px
}
.dialog-body>h3 {
  margin:24px 0 16px
}
.dialog-body>.stack,.dialog-body>form {
  margin-top:20px
}
.dialog-body>.full+.full {
  margin-top:12px
}
.sheet-open {
  overflow:hidden
}
#toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
  max-width:calc(100vw - 32px);
  background:var(--navy);
  color:#fff;
  padding:16px 20px;
  font-size:1rem;
  border-radius:12px;
  z-index:100;
  box-shadow:var(--raised)
}
#toast.visible {
  opacity:1
}
.connection-screen {
  max-width:620px;
  min-height:100dvh;
  padding:40px 20px;
  margin:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:28px
}
.connection-screen h1 {
  margin-bottom:16px
}
.connection-screen .btn {
  margin-top:12px
}
@media(hover:hover) and (pointer:fine) {
  .sidebar nav a:hover {
    background:#28464D;
    color:white
  }
  .tool-row:hover,.place-row:hover,.catalog-row:hover,.benefit-row:hover {
    background:var(--elevated)
  }
  .article-card:hover,.destination-card:hover {
    border-color:var(--input-border)
  }
  .prompt:hover {
    background:var(--bg)
  }
}
@media(min-width:1700px) {
  .content {
    padding:48px 60px
  }
  .topbar {
    padding-inline:60px
  }
  .app-footer {
    padding-inline:60px
  }
}
@media(max-width:1200px) and (min-width:961px) {
  .app-layout {
    grid-template-columns:218px minmax(0,1fr)
  }
  .sidebar {
    padding-inline:16px
  }
  .sidebar .wordmark {
    font-size:1rem
  }
  .content {
    padding:32px 24px
  }
  .topbar {
    padding-inline:24px
  }
  .stat-grid {
    grid-template-columns:1fr
  }
  .map-layout {
    grid-template-columns:1fr;
    min-height:0
  }
  .map-panel {
    height:420px
  }
  .places-panel {
    max-height:none
  }
  .article-grid {
    grid-template-columns:1fr
  }
  .chat-layout {
    grid-template-columns:180px minmax(0,1fr)
  }
  .wallet-item {
    grid-template-columns:1fr
  }
  .editorial-card {
    grid-template-columns:120px minmax(0,1fr)
  }
  .editorial-art {
    width:120px;
    padding:16px
  }
}
@media(max-width:960px) {
  :root {
    --nav-height:calc(74px + env(safe-area-inset-bottom,0px))
  }
  .app-layout {
    grid-template-columns:1fr
  }
  .sidebar,.topbar-label {
    display:none
  }
  .workspace {
    padding-bottom:var(--nav-height)
  }
  .topbar {
    position:sticky;
    top:0;
    z-index:20;
    height:auto;
    min-height:calc(64px + env(safe-area-inset-top,0px));
    padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px));
    gap:8px;
    border-bottom:1px solid var(--border)
  }
  .mobile-title {
    display:block;
    margin-right:auto;
    font-size:1.25rem;
    font-weight:600;
    min-width:0
  }
  .mobile-back {
    display:inline-flex;
    margin-left:-12px;
    min-width:36px;
    padding:6px
  }
  .topbar-right {
    gap:0
  }
  .topbar-right .icon-button {
    display:none
  }
  .bottom-nav {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;
    z-index:25;
    bottom:0;
    left:0;
    right:0;
    background:var(--card);
    border-top:1px solid var(--border);
    padding:7px max(8px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
    gap:4px
  }
  .bottom-nav a {
    min-height:58px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:.75rem;
    font-weight:500;
    color:var(--muted);
    border-radius:12px
  }
  .bottom-nav a[aria-current=page] {
    color:var(--green);
    background:var(--mint)
  }
  .bottom-nav .ico {
    width:24px;
    height:24px
  }
  .content {
    padding:32px max(20px,env(safe-area-inset-right,0px)) 32px max(20px,env(safe-area-inset-left,0px));
    min-height:calc(100dvh - 160px - var(--nav-height))
  }
  .app-footer {
    padding:24px max(20px,env(safe-area-inset-right,0px)) 24px max(20px,env(safe-area-inset-left,0px));
    font-size:.8125rem
  }
  .app-footer>span:last-child {
    flex-basis:100%
  }
  #toast {
    bottom:calc(var(--nav-height) + 12px);
    width:max-content
  }
  .editing .bottom-nav {
    display:none
  }
  .editing .workspace {
    padding-bottom:0
  }
  .editing .keyboard-done {
    display:inline-flex;
    min-width:48px
  }
  .editing .topbar-right {
    display:none
  }
  .keyboard-open #toast {
    bottom:12px
  }
  .keyboard-open dialog {
    max-height:calc(var(--visible-height,100dvh) - 16px);
    top:var(--visible-top,0px);
    bottom:auto;
    margin-top:8px
  }
  .dialog-head .keyboard-done {
    flex:none
  }
}
@media(max-width:767px) {
  .page-heading {
    display:block;
    margin-bottom:24px
  }
  .page-heading .actions {
    margin-top:16px
  }
  .page-heading .actions:empty {
    display:none
  }
  .lede {
    margin-top:10px;
    font-size:1.0625rem;
    line-height:1.5
  }
  .overview-hero {
    padding:24px 22px;
    margin-bottom:20px
  }
  .overview-hero h2 {
    font-size:2rem;
    line-height:1.1;
    margin-bottom:18px
  }
  .overview-hero .eyebrow {
    font-size:.8125rem;
    margin-bottom:16px
  }
  .overview-hero p:not(.eyebrow) {
    font-size:1.0625rem;
    margin-bottom:16px
  }
  .overview-hero .btn {
    width:100%
  }
  .stat-grid {
    grid-template-columns:1fr;
    gap:12px
  }
  .stat-card {
    padding:16px;
    min-height:84px;
    gap:16px
  }
  .stat-card .metric {
    font-size:1.0625rem
  }
  .destination-grid {
    grid-template-columns:1fr
  }
  .destination-card {
    padding:16px
  }
  .destination-card h3 {
    font-size:1.0625rem
  }
  .content>section,.content>.stat-grid {
    margin-bottom:24px
  }
  .section-heading {
    margin:28px 0 16px
  }
  .section-heading h2 {
    font-size:1.25rem
  }
  .section-heading .text-button {
    font-size:.9375rem
  }
  .benefit-row {
    padding:16px;
    flex-wrap:wrap;
    gap:12px
  }
  .row-value {
    font-size:1rem
  }
  .benefit-row>.ico {
    display:none
  }
  .benefit-row small {
    font-size:.875rem
  }
  .tracked-summary {
    flex-wrap:wrap;
    padding:20px
  }
  .article-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .article-card {
    padding:22px
  }
  .article-card h2,.article-card h3 {
    font-size:1.25rem
  }
  .content-mark {
    width:64px;
    height:64px
  }
  .content-heading {
    gap:16px
  }
  .article-card .btn {
    width:100%
  }
  .editorial-card {
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    gap:12px 16px
  }
  .editorial-art {
    grid-row:1/3;
    width:56px;
    height:56px;
    min-height:0;
    padding:14px;
    gap:0;
    justify-content:center
  }
  .editorial-art .ico {
    width:28px;
    height:28px
  }
  .editorial-art strong {
    display:none
  }
  .editorial-card>.eyebrow {
    grid-column:2
  }
  .editorial-card>h3 {
    grid-column:2;
    grid-row:2
  }
  .editorial-card>p {
    grid-column:1/-1
  }
  .editorial-card .article-foot {
    grid-column:1/-1
  }
  .editorial-card .article-foot .read-action {
    flex:1
  }
  .editorial-card .article-foot>span:first-child {
    font-size:.875rem
  }
  .editorial-card .article-foot {
    padding-top:4px
  }
  .toolbar {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:24px
  }
  .toolbar>.search-input,.toolbar>.search-field {
    grid-column:1/-1;
    min-width:0;
    width:100%
  }
  .toolbar>select,.toolbar>.field {
    min-width:0;
    max-width:100%;
    width:100%
  }
  .toolbar>.btn {
    grid-column:1/-1
  }
  .toolbar>.field {
    grid-column:auto
  }
  .toolbar>.search-field>.search-input {
    min-width:0
  }
  .map-layout {
    grid-template-columns:1fr;
    min-height:0;
    gap:20px
  }
  .map-panel {
    height:290px
  }
  .places-panel {
    overflow:visible;
    max-height:none
  }
  .places-header {
    align-items:center;
    gap:8px;
    font-size:1.125rem
  }
  .places-header .text-button {
    font-size:.9375rem
  }
  .places-panel>#area-label {
    font-size:.875rem
  }
  .place-row {
    padding:16px;
    gap:12px
  }
  .place-row small {
    font-size:.75rem
  }
  .place-distance {
    font-size:.8125rem
  }
  .place-row>span:nth-child(2)>span {
    font-size:.875rem
  }
  .place-icon {
    width:40px;
    height:40px
  }
  .content[data-route=discover]>.page-heading .actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .content[data-route=discover]>.page-heading .actions .btn {
    font-size:.9375rem;
    padding:12px
  }
  .wallet-overview {
    padding:20px 16px;
    gap:12px;
    margin-bottom:24px
  }
  .wallet-overview .metric {
    font-size:1.75rem
  }
  .wallet-overview .eyebrow {
    font-size:.75rem
  }
  .wallet-overview .btn {
    padding:12px 16px;
    font-size:.9375rem
  }
  .wallet-item {
    grid-template-columns:1fr;
    gap:24px
  }
  .card-art {
    min-height:216px;
    padding:24px
  }
  .card-art>strong {
    font-size:1.375rem
  }
  .wallet-summary {
    padding-top:20px
  }
  .wallet-summary h2 {
    font-size:1.25rem
  }
  .wallet-credit {
    padding:24px
  }
  .wallet-grid {
    gap:32px
  }
  .planner-grid {
    grid-template-columns:minmax(0,1fr);
    gap:24px
  }
  .planner-grid>.result-panel,.planner-grid>.result-panel>#va-result {
    display:contents
  }
  .planner-grid>.result-panel>.result-card,.planner-grid>.result-panel>.empty,.planner-grid>.result-panel>#va-result>.result-card,.planner-grid>.result-panel>#va-result>.empty {
    grid-column:1;
    grid-row:1
  }
  .planner-grid>.form-card {
    grid-column:1;
    grid-row:2
  }
  .planner-grid>.result-panel>.result-actions,.planner-grid>.result-panel>#va-result>.result-actions {
    grid-column:1;
    grid-row:3
  }
  .planner-grid>.result-panel>.card {
    grid-column:1;
    grid-row:4
  }
  .planner-grid .result-card {
    padding:24px
  }
  .result-number {
    font-size:2.5rem
  }
  .result-card>p:not(.eyebrow) {
    font-size:1rem
  }
  .result-rows>div {
    font-size:1rem;
    gap:16px
  }
  .result-panel>.empty {
    min-height:0
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .allocation-grid {
    gap:16px
  }
  .form-card,.planner-grid>.form-card {
    padding:24px
  }
  .content[data-route=va] .planner-grid>.form-card {
    padding:0
  }
  .budget-inputs {
    grid-template-columns:1fr
  }
  .settings-grid {
    grid-template-columns:1fr
  }
  .more-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .tool-row {
    padding:16px
  }
  .tsp-tool-select {
    display:flex;
    margin-bottom:24px
  }
  .content[data-route=tsp]>.scroll-tabs {
    display:none
  }
  .snapshot-grid>.result-panel>.snapshot-links {
    grid-column:1;
    grid-row:2
  }
  .snapshot-grid>.form-card {
    grid-row:3
  }
  .reader h2 {
    font-size:1.75rem
  }
  .reader .reader-excerpt {
    font-size:1.0625rem
  }
  .reader>.prose {
    font-size:1.0625rem;
    line-height:1.7
  }
  .detail-summary {
    flex-wrap:wrap
  }
  .credit-title {
    align-items:flex-start
  }
  .credit-title>strong {
    font-size:1.25rem
  }
  .credit-title h3 {
    font-size:1.125rem
  }
  .credit-row .actions>.btn {
    width:100%
  }
  .credit-row p {
    font-size:1rem
  }
  .list-row {
    padding:16px;
    flex-wrap:wrap;
    gap:12px
  }
  .segmented button {
    font-size:.9375rem;
    padding:10px 12px
  }
  .chat-layout {
    display:flex;
    flex-direction:column;
    height:calc(var(--visible-height,100dvh) - 245px - var(--nav-height));
    min-height:460px
  }
  .chat-history {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    border-right:0;
    border-bottom:1px solid var(--border);
    padding:16px;
    max-height:210px;
    flex:none
  }
  .chat-history>.btn {
    flex:1;
    font-size:.875rem;
    padding:12px;
    min-width:0
  }
  .history-toggle {
    display:inline-flex;
    flex:0 0 auto;
    font-size:.875rem;
    min-height:48px;
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px
  }
  .chat-history #threads {
    display:none;
    margin-top:0;
    max-height:110px;
    overflow:auto;
    width:100%
  }
  .chat-history.history-open #threads {
    display:block
  }
  .chat-history #more-threads {
    display:none
  }
  .chat-history.history-open #more-threads:not([hidden]) {
    display:inline-flex
  }
  .chat-main {
    flex:1
  }
  #chat-messages {
    padding:20px 16px
  }
  .chat-welcome {
    padding:0
  }
  .chat-welcome h2 {
    font-size:1.375rem
  }
  .chat-welcome>p {
    font-size:1rem
  }
  .prompt-grid {
    margin-top:20px;
    gap:12px
  }
  .prompt {
    padding:12px;
    font-size:.9375rem;
    min-height:64px
  }
  .chat-main form {
    margin:0 16px 16px
  }
  .chat-main textarea {
    min-height:90px
  }
  .composer-actions .btn {
    min-height:48px
  }
  .keyboard-open .content[data-route=chat]>.page-heading,.keyboard-open .chat-history,.keyboard-open .content[data-route=chat]~.app-footer {
    display:none
  }
  .keyboard-open .content[data-route=chat] {
    padding-block:12px
  }
  .keyboard-open .chat-layout {
    height:calc(var(--visible-height,100dvh) - 92px);
    min-height:220px
  }
  dialog,dialog.wide {
    max-width:100%;
    width:100%;
    max-height:calc(var(--visible-height,100dvh) - env(safe-area-inset-top,0px) - 12px);
    margin:auto 0 0;
    border-radius:20px 20px 0 0;
    border-bottom:0
  }
  .dialog-head {
    padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(20px,env(safe-area-inset-left,0px));
    gap:10px
  }
  .dialog-head h2 {
    font-size:1.375rem
  }
  .dialog-body {
    padding:24px max(20px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))
  }
  .dialog-body .actions .btn {
    flex:1 1 auto
  }
  .keyboard-open dialog {
    margin:8px 0 0
  }
  .install-card {
    padding:24px
  }
}
@media(pointer:coarse) {
  .place-map#map,.place-map.chain-map {
    touch-action:pan-y pinch-zoom
  }
  .place-map.touch-moving#map,.place-map.touch-moving.chain-map {
    touch-action:none
  }
  .map-touch-toggle {
    display:block;
    min-height:48px
  }
  .map-controls button {
    width:48px;
    height:48px
  }
  .map-pin,.map-pin.cluster {
    width:44px;
    height:44px;
    min-width:44px
  }
  .map-pin::after {
    content:'';
    position:absolute;
    inset:-3px;
    border-radius:50%
  }
  .search-area {
    min-height:48px;
    max-width:calc(100% - 140px);
    white-space:normal;
    line-height:1.25
  }
  .map-attribution a {
    display:inline-block;
    padding:7px 0
  }
  .editing .keyboard-done {
    display:inline-flex;
    min-width:48px
  }
  .editing .topbar-right {
    display:none
  }
  .keyboard-open dialog {
    max-height:calc(var(--visible-height,100dvh) - 16px);
    top:var(--visible-top,0px);
    bottom:auto;
    margin-top:8px
  }
}
@media(max-width:359px) {
  .content {
    padding-inline:16px
  }
  .wordmark,.mobile-title {
    font-size:1.125rem
  }
  .toolbar {
    grid-template-columns:minmax(0,1fr)
  }
  .wallet-overview {
    flex-wrap:wrap
  }
  .wallet-overview .btn {
    width:100%
  }
  .allocation-grid {
    gap:12px
  }
  .form-card,.planner-grid>.form-card {
    padding:20px
  }
  .place-distance {
    white-space:normal;
    max-width:48px
  }
  .benefit-row .row-icon {
    display:none
  }
  .stat-card {
    gap:12px
  }
  .stat-icon {
    width:40px;
    height:40px
  }
  .form-card h2 {
    font-size:1.25rem
  }
}
@media(max-width:960px) and (max-height:500px) and (orientation:landscape) {
  :root {
    --nav-height:calc(56px + env(safe-area-inset-bottom,0px))
  }
  .bottom-nav a {
    min-height:42px;
    flex-direction:row;
    gap:8px
  }
  .topbar {
    min-height:48px
  }
}
/* Refinements from matched viewport review. */
.tool-navigation {
  display:flex;
  justify-content:flex-end;
  margin:20px 0
}
.planner-grid:has(#save-pay)~.tool-navigation {
  display:none
}
.wallet-count {
  margin-top:24px
}
.budget-bills>.btn {
  margin-top:20px
}
@media(max-width:767px) {
  .content {
    padding-top:24px
  }
  .content[data-route=library] .toolbar>.btn {
    grid-column:2;
    grid-row:2
  }
  .content[data-route=library] .toolbar>.field {
    grid-column:1;
    grid-row:2
  }
  .content[data-route=library] .segmented button {
    min-width:0;
    white-space:normal;
    flex:1
  }
  .tool-navigation>.btn {
    width:100%
  }
  .snapshot-grid>.result-panel>.snapshot-note {
    grid-column:1;
    grid-row:2
  }
  .snapshot-grid>.result-panel>.snapshot-links {
    grid-row:3
  }
  .snapshot-grid>.form-card {
    grid-row:4
  }
  .content[data-route=wallet]>.page-heading {
    margin-bottom:20px
  }
}
.chart-scale {
  margin-top:20px;
  font-size:.875rem;
  color:#D6E4E5
}
.chart-axis {
  display:flex;
  justify-content:space-between;
  font-size:.875rem;
  color:#D6E4E5;
  margin:4px 0 16px
}
.result-card>.chart-scale {
  font-size:.875rem
}
.result-card {
  scroll-margin-top:96px;
}
/* A native chooser with a wrapping selected label; no custom menu or keyboard model. */
.select-control {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:12px;
  border:1px solid var(--input-border);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
  font-size:1.0625rem;
  line-height:1.4;
  width:100%;
}
.select-control select {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  z-index:1;
  cursor:pointer;
}
.select-control:focus-within {
  outline:2px solid var(--green);
  outline-offset:2px;
}
.select-value {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere;
  pointer-events:none;
}
.select-control>.ico {
  width:18px;
  height:18px;
  pointer-events:none;
}