/* explore.css — WB-YSA-R R3 (#6080): Explore root, feature lists, and search styles.
 * Spec: AlexBulankou/p product-backlog/wb/ysa-design-r1:
 *   3a (Explore iOS light), 3b (Explore Android dark),
 *   3c (Rest areas list iOS), 3g (Search iOS), 3h (Food by exit Android)
 * Tokens from /wb-tokens.css.
 */

:root {
  --wbe-tabbar-space: calc(var(--wb-tabbar-clear, 96px) + 24px);
}

body {
  margin: 0;
  font-family: "Futura", "Century Gothic", "Avenir Next", "Nunito Sans", system-ui, sans-serif;
  background: var(--wb-bg, #0A0F1C);
  color: var(--wb-ink, #F2F4F8);
  -webkit-font-smoothing: antialiased;
}

.wbe-container {
  min-height: 100vh;
  background: var(--wb-bg);
  color: var(--wb-ink);
  font-family: var(--wb-font);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 0 var(--wbe-tabbar-space);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* Titles. #6740 (WB-FLEX FR6 T1): headings sit on the ladder in both skins. h1 28/34, 32/38 from 600, 36/44 from 840
   (700); section heads h2 22/28, 24/30, 26/32 (600); empty-state and prompt titles h3 18/24, 20/26 from 840 (600).
   They were the app's 34 (iOS) / 32 (Android), 20 at 700 and 19-20 on every width. */
.wbe-title {
  font-size: var(--wb-text-h1, 28px);
  line-height: var(--wb-text-h1-lh, 34px);
  font-weight: 700;
  letter-spacing: 0.37px;
  padding: 6px 20px 4px;
  margin: 0;
  color: var(--wb-ink);
}

html.android .wbe-title {
  padding: 0 20px 14px;
}

/* Groups */
.wbe-group {
  margin-top: 16px;
}

.wbe-group-title {
  padding: 16px 20px 8px;
  font-size: var(--wb-text-h2, 22px);
  line-height: var(--wb-text-h2-lh, 28px);
  font-weight: 600;
  margin: 0;
  color: var(--wb-ink);
}

html.android .wbe-group-title {
  padding: 22px 20px 10px;
  color: var(--wb-orange-text);
}

/* Group cards */
.wbe-group-card {
  margin: 0 var(--wb-margin-list);
  background: var(--wb-surface);
  border-radius: var(--wb-radius-card);
  overflow: hidden;
}

html.android .wbe-group-card {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Rows */
.wbe-feature-row,
.wbe-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 16px;
  min-height: var(--wb-target-row, 56px);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.wbe-feature-row:active,
.wbe-item-row:active {
  background: rgba(0, 0, 0, 0.04);
}

html[data-wb-scheme="dark"] .wbe-feature-row:active,
html[data-wb-scheme="dark"] .wbe-item-row:active {
  background: rgba(255, 255, 255, 0.06);
}

/* Android M3 segmented card items */
html.android .wbe-item-single {
  border-radius: 24px;
  background: var(--wb-surface);
}

html.android .wbe-item-first {
  border-radius: 24px 24px 4px 4px;
  background: var(--wb-surface);
}

html.android .wbe-item-middle {
  border-radius: 4px;
  background: var(--wb-surface);
}

html.android .wbe-item-last {
  border-radius: 4px 4px 24px 24px;
  background: var(--wb-surface);
}

/* Icon tile */
.wbe-icon-tile {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #fff;
}

html.android .wbe-icon-tile {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--wb-orange-tint) !important;
  color: var(--wb-on-orange-tint);
}

/* Content block */
.wbe-feature-content,
.wbe-item-content {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 0;
  min-width: 0;
}

.wbe-row-border {
  border-bottom: 0.5px solid var(--wb-separator);
}

html.android .wbe-row-border {
  border-bottom: none;
}

.wbe-feature-text,
.wbe-item-text {
  flex: 1;
  min-width: 0;
}

.wbe-feature-title,
.wbe-item-title {
  font-size: var(--wb-type-body);
  line-height: 22px;
  font-weight: 500;
  color: var(--wb-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wbe-feature-sub,
.wbe-item-sub {
  font-size: var(--wb-type-support);
  line-height: 20px;
  color: var(--wb-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wbe-chevron {
  display: flex;
  align-items: center;
  color: var(--wb-ink-3);
  flex: none;
}

/* Android Top Search Bar on Explore Root */
.wbe-search-bar-wrap {
  padding: 12px 16px 14px;
}

.wbe-android-search-bar {
  height: 56px;
  border-radius: 28px;
  background: var(--wb-surface);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.wbe-search-icon {
  display: flex;
  align-items: center;
  color: var(--wb-ink-2);
}

.wbe-search-placeholder {
  font-size: 16px;
  color: var(--wb-ink-2);
}

/* Feature List View Chrome */
.wbe-nav-bar {
  height: 52px;
  display: flex;
  align-items: center;
  /* #6373: share sits at the right edge (frames 11a/11e), not beside Back. */
  justify-content: space-between;
  padding: 0 16px;
}

html.android .wbe-nav-bar {
  height: 64px;
  padding: 0 8px;
}

.wbe-back-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(11, 18, 32, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--wb-ink);
  -webkit-tap-highlight-color: transparent;
}

html[data-wb-scheme="dark"] .wbe-back-btn {
  background: rgba(32, 40, 60, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* #6373: the OS-preference copy the share button already had. Without it a
   dark phone with no explicit scheme got a light disc behind a light chevron. */
@media (prefers-color-scheme: dark) {
  html:not([data-wb-scheme="light"]) .wbe-back-btn {
    background: rgba(32, 40, 60, 0.8);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
}

html.android .wbe-back-btn {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

/* iOS Segmented Control */
.wbe-segmented-control {
  margin: 4px 16px 16px;
  height: 36px;
  border-radius: 18px;
  background: rgba(118, 118, 128, 0.12);
  display: flex;
  padding: 2px;
  box-sizing: border-box;
}

.wbe-segment {
  flex: 1;
  min-width: 0; /* #6287: a long label ("Other highways") ellipsizes inside its pill instead of spilling out */
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* block, not flex: text-overflow never applies to a flex container's text, which was clipped at both
     ends ("her highwa") instead of ellipsized. line-height centres it vertically in the 32 px pill. */
  display: block;
  line-height: 32px;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--wb-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s ease;
}

.wbe-segment.active {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  font-weight: 600;
  color: var(--wb-ink);
}

/* #6287: dark must cover the SYSTEM setting too, not only an explicit pin. A phone in dark mode sets no
   data-wb-scheme, so only the media query applies; without it the selected segment was white on white. */
@media (prefers-color-scheme: dark) {
  html:not([data-wb-scheme="light"]) .wbe-segment.active {
    background: #2b3550;
    color: #ffffff;
  }
}
html[data-wb-scheme="dark"] .wbe-segment.active {
  background: #2b3550;
  color: #ffffff;
}

/* Android Filter Chips */
.wbe-chips-scroll {
  display: flex;
  gap: 8px;
  padding: 4px 16px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.wbe-chips-scroll::-webkit-scrollbar {
  display: none;
}

.wbe-chip {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--wb-separator);
  background: transparent;
  color: var(--wb-ink-2);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
}

.wbe-chip.active {
  padding: 0 16px 0 10px;
  background: var(--wb-orange-tint);
  color: var(--wb-on-orange-tint);
  border-color: transparent;
}

.wbe-chip-check {
  display: inline-flex;
  align-items: center;
}

/* Section headers in list view */
.wbe-section-title {
  padding: 20px 20px 8px;
  font-size: var(--wb-text-h2, 22px);
  line-height: var(--wb-text-h2-lh, 28px);
  font-weight: 600;
  color: var(--wb-ink);
  margin: 0;
}

.wbe-section-dir {
  font-weight: 400;
  color: var(--wb-ink-2);
  font-size: 17px;
  margin-left: 4px;
}

/* #6740 (T1): Android keeps its orange section header and padding, but the
   size is the h2 ladder like every other heading (was 16 px at 500). */
html.android .wbe-section-title {
  padding: 14px 20px 10px;
  color: var(--wb-orange-text);
}

/* Search View */
.wbe-search-field-container {
  margin: 12px 16px 16px;
}

.wbe-search-field {
  height: 52px;
  border-radius: 26px;
  background: var(--wb-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}

.wbe-field-icon {
  display: flex;
  align-items: center;
  color: var(--wb-ink-2);
}

.wbe-search-input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--wb-ink);
  font: inherit;
  font-size: 17px;
  outline: none;
}

.wbe-search-clear {
  border: 0;
  background: transparent;
  color: var(--wb-ink-3);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
}

.wbe-search-group {
  margin-top: 14px;
}

.wbe-search-group-title {
  padding: 14px 20px 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--wb-ink-2);
  margin: 0;
}

.wbe-search-result-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.wb-match {
  font-weight: 700;
  color: var(--wb-ink);
}

.wbe-search-empty-prompt {
  text-align: center;
  padding: 50px 24px;
}

.wbe-prompt-icon {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 14px;
}

.wbe-prompt-title {
  font-size: var(--wb-text-h3, 18px);
  line-height: var(--wb-text-h3-lh, 24px);
  font-weight: 600;
  color: var(--wb-ink);
  margin-bottom: 8px;
}

.wbe-prompt-sub {
  font-size: 15px;
  color: var(--wb-ink-2);
}

/* Skeleton animation and styles (from 7a) */
@keyframes wbe-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.25; }
}

.wbs-skeleton {
  margin: 0 var(--wb-margin-list);
  padding-top: 12px;
}

.wbs-group {
  padding: 16px 4px 8px;
  font-size: var(--wb-text-h2, 22px);
  line-height: var(--wb-text-h2-lh, 28px);
  font-weight: 600;
  color: var(--wb-ink);
  margin: 0;
}

.wbs-list {
  background: var(--wb-surface);
  border-radius: var(--wb-radius-card);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.wbs-srow {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
}

.wbs-sicon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--wb-separator);
  animation: wbe-pulse 1.5s infinite;
}

.wbs-slines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wbs-slines span {
  height: 12px;
  border-radius: 6px;
  background: var(--wb-separator);
  animation: wbe-pulse 1.5s infinite;
}

/* Offline state (from 7b) */
.wbs-offline-banner {
  margin: 12px var(--wb-margin-list);
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--wb-surface);
  color: var(--wb-ink);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.wbs-empty,
.wbe-empty {
  text-align: center;
  padding: 60px 24px;
}

.wbs-empty-icon {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--wb-ink-3);
}

.wbs-empty-title,
.wbe-empty-title {
  font-size: var(--wb-text-h3, 18px);
  line-height: var(--wb-text-h3-lh, 24px);
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--wb-ink);
}

.wbs-empty-line,
.wbe-empty-line {
  font-size: 15px;
  color: var(--wb-ink-2);
  margin-bottom: 24px;
}

.wbs-retry,
.wbe-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 22px;
  background: var(--wb-orange);
  color: var(--wb-on-orange);
  font: 600 16px var(--wb-font);
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

/* WB-YSA-R R17b (#6114) / R3 (#6163): Pattern B list-detail selected item (tablet/desktop >=840 only) */
@media (min-width: 840px) {
  .wbe-item-row.wbe-item-selected {
    background: var(--wb-orange-tint, rgba(255, 122, 74, 0.15)) !important;
  }
  html.android .wbe-item-row.wbe-item-selected .wbe-item-title {
    color: var(--wb-orange-text, #C0451A);
    font-weight: 600;
  }
  /* #6892: on the selected row's orange tint, #1E7A46 is 4.14:1 on Android #FFDBCD and 4.21:1 on iOS over #F2F2F7;
     #176338 reaches 5.65:1 (Android) and 5.75:1 (iOS), meeting WCAG AA 4.5:1 floor. */
  .wbe-item-row.wbe-item-selected .wbe-pass-words.wbe-tone-open,
  .wbe-item-row.wbe-item-selected.wbe-tone-open .wbe-pass-words {
    color: #176338;
  }
  html[data-wb-scheme="dark"] .wbe-item-row.wbe-item-selected .wbe-pass-words.wbe-tone-open,
  html[data-wb-scheme="dark"] .wbe-item-row.wbe-item-selected.wbe-tone-open .wbe-pass-words {
    color: var(--tone-ink);
  }
  @media (prefers-color-scheme: dark) {
    html:not([data-wb-scheme="light"]) .wbe-item-row.wbe-item-selected .wbe-pass-words.wbe-tone-open,
    html:not([data-wb-scheme="light"]) .wbe-item-row.wbe-item-selected.wbe-tone-open .wbe-pass-words {
      color: var(--tone-ink);
    }
  }
}

.wbe-detail-content {
  padding: 16px 20px;
}
/* #6372: the page itself fills the pane beside its list (12c, 12e). The layout's pane padding and scroll belong
   to the page inside the frame, so the pane gives them up (the size-class rules outrank a plain class). */
.wb-detail-pane.wbe-detail-framed {
  padding: 0 !important;
  overflow: hidden !important;
}
.wbe-detail-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.wbe-detail-back-bar {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 12px;
}
.wbe-detail-title {
  font-size: var(--wb-type-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--wb-ink);
}
.wbe-detail-sub {
  font-size: var(--wb-type-support);
  color: var(--wb-ink-2);
  margin-bottom: 16px;
}
.wbe-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--wb-surface);
  color: var(--wb-ink);
  font-size: var(--wb-text-meta, 13px);   /* #6740 (T2 meta), was 14 */
  font-weight: 600;
  margin-bottom: 20px;
  border: 1px solid var(--wb-separator);
}
.wbe-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--wb-open);
}
.wbe-detail-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.wbe-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--wb-radius-button);
  font: 600 var(--wb-type-body)/1 var(--wb-font);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wbe-primary-btn {
  background: var(--wb-orange);
  color: var(--wb-on-orange);
}
.wbe-secondary-btn {
  background: var(--wb-surface);
  color: var(--wb-ink);
  border: 1px solid var(--wb-separator);
}
.wbe-detail-card {
  background: var(--wb-surface);
  border-radius: var(--wb-radius-card);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.wbe-detail-card-title {
  font-size: var(--wb-type-title-3);
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--wb-ink);
}
.wbe-detail-card-text {
  font-size: var(--wb-type-body);
  color: var(--wb-ink-2);
  line-height: 1.5;
  margin: 0;
}

/* WB-YSA-R2 L3 (#6261): Needs your location in explore list */
.wbe-needs-loc {
  color: var(--wb-orange-text) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wbe-feature-row.wbe-loc-off .wbe-icon-tile {
  background: #E3E4E9 !important;
  color: var(--wb-ink-3, #8A909B) !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-wb-scheme="light"]) .wbe-feature-row.wbe-loc-off .wbe-icon-tile {
    background: #2B3550 !important;
    color: #8E95A6 !important;
  }
}
html[data-wb-scheme="dark"] .wbe-feature-row.wbe-loc-off .wbe-icon-tile {
  background: #2B3550 !important;
  color: #8E95A6 !important;
}
html.android .wbe-feature-row.wbe-loc-off .wbe-icon-tile {
  background: #E3E4E9 !important;
  color: var(--wb-ink-3, #8A909B) !important;
}
@media (prefers-color-scheme: dark) {
  html.android:not([data-wb-scheme="light"]) .wbe-feature-row.wbe-loc-off .wbe-icon-tile {
    background: #2B3550 !important;
    color: #8E95A6 !important;
  }
}
html.android[data-wb-scheme="dark"] .wbe-feature-row.wbe-loc-off .wbe-icon-tile {
  background: #2B3550 !important;
  color: #8E95A6 !important;
}

/* WB-YSA-R2 E1 (#6265): Live conditions, Route guides, Today styles */
.wbe-topbar-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(11, 18, 32, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  color: var(--wb-ink);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
html[data-wb-scheme="dark"] .wbe-topbar-action-btn {
  background: rgba(32, 40, 60, 0.8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  html:not([data-wb-scheme="light"]) .wbe-topbar-action-btn {
    background: rgba(32, 40, 60, 0.8);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
}
html.android .wbe-topbar-action-btn {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

.wbe-temp {
  font-size: 15px;
  font-weight: 500;
  color: var(--wb-ink-2);
  margin-left: auto;
  flex: none;
}

/* Today summary card (Frame 11e) */
.wb-today-summary-card {
  margin: 0 16px 8px;
  background: var(--wb-surface);
  border-radius: var(--wb-radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.wb-today-weather-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--wb-ink-2);
}
.wb-today-headline {
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  color: var(--wb-ink);
}
.wb-today-desc {
  font-size: 17px;
  line-height: 23px;
  color: var(--wb-ink);
}

.wb-today-season-title {
  padding: 20px 20px 8px;
}

.wb-today-season-card {
  margin: 0 16px;
  background: var(--wb-surface);
  border-radius: var(--wb-radius-card);
  overflow: hidden;
}

.wbe-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex: none;
}




/* #6373: the Today card holds the page's own live boxes (#6362), which carry
   the web page's type scale (a hero temperature, a 1.6rem headline). Frame
   11e sets them as a secondary weather line over a 20px headline. */
#wb-today-app .wb-today-summary-card .live-dyn { overflow: visible; }
#wb-today-app .wb-today-summary-card p { margin: 0; }
#wb-today-app .wb-today-summary-card .today-wx { font-size: 15px; line-height: 20px; color: var(--wb-ink-2); }
#wb-today-app .wb-today-summary-card .today-temp { font-size: inherit; line-height: inherit; font-weight: 600; color: var(--wb-ink); }
#wb-today-app .wb-today-summary-card .live-src { font-size: 13px; line-height: 18px; color: var(--wb-ink-2); }
#wb-today-app .wb-today-summary-card .today-headline { font-size: 20px; line-height: 25px; font-weight: 700; color: var(--wb-ink); margin: 2px 0; }
#wb-today-app .wb-today-summary-card .today-status { font-size: 13px; line-height: 18px; color: var(--wb-ink-2); }

/* #6379 (frame 11f): a town page's own sections as cards in the app. menu.js wraps each "Things to do" category in
   a <details> (count and exit range read from its own rows); the tokens are scheme-aware, so there is no second
   theme copy to keep in step (#6378). */
/* the frame's small orange section labels; wb-tokens.css styles every app h2 with !important, so these must too.
   The sections already carry #6368's 16 px gutter, so the label only needs its own inset. */
html.yojowa-app .tp-do > h2,
html.yojowa-app .tp-exits > h2 {
  margin: 0 !important;
  padding: 20px 4px 8px !important;
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  color: var(--wb-orange-text) !important;
}
html.yojowa-app .wb-town-cat {
  background: var(--wb-surface);
  border-top: 0.5px solid var(--wb-separator);
}
html.yojowa-app .wb-town-cat:first-of-type {
  border-top: 0;
  border-radius: 20px 20px 0 0;
}
html.yojowa-app .wb-town-cat:last-of-type {
  border-radius: 0 0 20px 20px;
}
html.yojowa-app .wb-town-cat:only-of-type {
  border-radius: 20px;
}
html.yojowa-app .wb-town-cat > summary,
html.yojowa-app .tp-live.wb-town-live {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 16px;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.yojowa-app .wb-town-cat > summary::-webkit-details-marker {
  display: none;
}
html.yojowa-app .wb-town-ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: var(--wb-orange-tint);
  color: var(--wb-orange-text);
}
html.yojowa-app .wb-town-ic svg {
  width: 22px;
  height: 22px;
}
html.yojowa-app .wb-town-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
html.yojowa-app .wb-town-n {
  font-size: 17px;
  line-height: 22px;
  color: var(--wb-ink);
}
html.yojowa-app .wb-town-s {
  font-size: var(--wb-text-meta, 13px);   /* #6740 (T2 meta), was 14/19 */
  line-height: var(--wb-text-meta-lh, 18px);
  color: var(--wb-ink-2);
}
html.yojowa-app .wb-town-cat > .tp-list {
  list-style: none;
  margin: 0;
  padding: 0 16px 12px 70px;
}
html.yojowa-app .wb-town-cat > .tp-list li {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  padding: 8px 0;
  border-top: 0.5px solid var(--wb-separator);
  font-size: 15px;
  line-height: 20px;
  color: var(--wb-ink);
}
html.yojowa-app .wb-town-cat > .tp-list .tp-d,
html.yojowa-app .wb-town-cat > .tp-list .tp-x {
  color: var(--wb-ink-2);
  font-size: var(--wb-text-meta, 13px);   /* #6740 (T2 meta), was 14 */
}
html.yojowa-app .tp-live.wb-town-live {
  margin: 0 16px 8px;
  border-radius: 20px;
  background: var(--wb-surface);
  color: var(--wb-ink);
  font-size: 16px;
  cursor: default;
}

/* #6364 (frame 11g): Explore's stories nearby rows (explore-stories.ts) */
.wbe-stories-card .wbe-story-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wbe-stories-card .wbe-distance {
  flex: none;
  margin-left: auto;
  padding-left: 12px;
  font-size: 15px;
  color: var(--wb-ink-2);
}

/* WB 1.7 S10 (#6220, frames 1a / 1b): Mountain passes. A pass row's tile and words take the colour of the pass's
   state (the pass page's tones, live_page .pv-tone-*), never a fixed green; a row with no reading stays neutral.
   Colour is never the only signal: each state also has its icon and its words.
   WB-FLEX FR10 (#6744, T5): a state's ink and tint are the status roles (wb-tokens.css --wb-ok/-warn/-bad, light and
   dark): open is ok, caution and chains are warn, closed is bad, no reading is ink-2 on surface-2. The tokens switch
   with the scheme, so only the icon's inner stroke needs a dark rule below. Bridge is NOT a state: it marks the row's
   kind (a bridge has no verdict; its live read changes only the subtitle), so it keeps its blue, light and dark. */
.wbe-tone-open { --tone-ink: var(--wb-ok-ink); --tone-tint: var(--wb-ok-tint); }
.wbe-tone-caution { --tone-ink: var(--wb-warn-ink); --tone-tint: var(--wb-warn-tint); }
.wbe-tone-chains { --tone-ink: var(--wb-warn-ink); --tone-tint: var(--wb-warn-tint); }
.wbe-tone-closed { --tone-ink: var(--wb-bad-ink); --tone-tint: var(--wb-bad-tint); }
.wbe-tone-neutral, .wbe-tone-none { --tone-ink: var(--wb-ink-2); --tone-tint: var(--wb-surface-2); }
.wbe-tone-bridge { --tone-ink: #1F5FC4; --tone-tint: color-mix(in srgb, #2F7CF6 18%, transparent); }
.wbe-pass-tile {
  width: 40px; height: 40px; border-radius: 20px; flex: none; margin-right: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tone-ink); background: var(--tone-tint);
  --pv-on-ico: #fff;
}
.wbe-pass-tile svg { width: 22px; height: 22px; }
.wbe-item-sub.wbe-pass-words { color: var(--tone-ink); font-weight: 600; }
/* Frame 1a wraps the verdict to two lines; :not([hidden]) because a display rule would beat the hidden attribute. */
.wbe-item-sub.wbe-pass-words:not([hidden]) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.wbe-item-road { color: var(--wb-ink-2); font-weight: 400; }
.wbe-ext { color: var(--wb-ink-3); margin-left: 12px; flex: none; display: flex; }
.wbe-other-row .wbe-temp { margin-left: auto; }
.wbe-list-credit { margin: 8px 20px 0; font-size: 13px; line-height: 18px; color: var(--wb-ink-2); }
.wbe-header-sub.wbe-live-checked { margin: -4px 0 12px 20px; font-size: 15px; color: var(--wb-ink-2); }
html[data-wb-scheme="dark"] .wbe-tone-bridge { --tone-ink: #A9C6FF; --tone-tint: color-mix(in srgb, #2F7CF6 26%, transparent); }
html[data-wb-scheme="dark"] .wbe-pass-tile { --pv-on-ico: #10141c; }
@media (prefers-color-scheme: dark) {
  html:not([data-wb-scheme="light"]) .wbe-tone-bridge { --tone-ink: #A9C6FF; --tone-tint: color-mix(in srgb, #2F7CF6 26%, transparent); }
  html:not([data-wb-scheme="light"]) .wbe-pass-tile { --pv-on-ico: #10141c; }
}