/* wb-flexible-layout.css · WB-YSA-R R17b (#6114) · flexible layout for Pattern B (list-detail) and Pattern C (content with supporting pane).
 * Spec: AlexBulankou/p product-backlog/flexible-layout-r1 (WithBy section, DW1-DW5, RF1-RF6).
 * Tokens from /wb-tokens.css.
 */

:root {
  --wb-b-list-width: clamp(360px, 32vw, 440px);
  --wb-b-detail-max: 760px;
  --wb-c-content-max: 720px;
  --wb-c-supporting-width: clamp(340px, 40vw, 1100px);
  --wb-live-map-width: clamp(420px, 30vw, 640px);
}

/* Nav clearance and in-flow positioning for web and app mode */
html.wb-nav body {
  margin-inline-start: var(--wb-nav-start, 0px);
}

/* Prevent horizontal scroll at any viewport width */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ---------- Pattern B: List-detail ---------- */
.wb-pattern-b {
  width: 100%;
  box-sizing: border-box;
  color: var(--wb-ink);
  font-family: var(--wb-font);
}

/* Compact (<600) and Medium (600-839): Single column */
html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-pattern-b {
  display: block;
  padding-bottom: calc(var(--wb-tabbar-clear, 0px) + 24px);
}

/* When detail is pushed on narrow screens (<840) */
html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-pattern-b.wb-pushed-detail .wb-list-pane {
  display: none !important;
}
html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-pattern-b.wb-pushed-detail .wb-detail-pane {
  display: block !important;
  width: 100%;
  max-width: 100%;
}
html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-pattern-b.wb-pushed-detail .wb-detail-back {
  display: flex !important;
}

/* When list is shown on narrow screens (<840) */
html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-pattern-b:not(.wb-pushed-detail) .wb-list-pane {
  display: block !important;
  width: 100%;
}
html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-pattern-b:not(.wb-pushed-detail) .wb-detail-pane {
  display: none !important;
}

/* Map pane is always hidden on narrow screens (<1600) */
html:not([data-wsc="xl"]) .wb-pattern-b .wb-map-pane {
  display: none !important;
}

/* Expanded (840-1199) and Large (1200-1599): Two panes (list + detail) */
html:is([data-wsc="expanded"], [data-wsc="large"]) .wb-pattern-b {
  display: grid !important;
  grid-template-columns: var(--wb-b-list-width) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

html:is([data-wsc="expanded"], [data-wsc="large"]) .wb-pattern-b .wb-list-pane {
  display: block !important;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-right: 0.5px solid var(--wb-separator);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(var(--wb-tabbar-clear, 0px) + 24px) 16px;
  box-sizing: border-box;
}

html:is([data-wsc="expanded"], [data-wsc="large"]) .wb-pattern-b .wb-detail-pane {
  display: block !important;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 24px calc(var(--wb-tabbar-clear, 0px) + 24px) 24px;
  box-sizing: border-box;
  max-width: var(--wb-b-detail-max);
}

html:is([data-wsc="expanded"], [data-wsc="large"]) .wb-pattern-b .wb-detail-back {
  display: none !important;
}

/* Extra-large (>=1600): On Live, three panes! (list + detail + map) */
html[data-wsc="xl"] .wb-pattern-b.wb-live-layout {
  display: grid !important;
  grid-template-columns: clamp(360px, 24vw, 440px) minmax(0, 1fr) var(--wb-live-map-width) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: max(0px, calc((100vw - var(--wb-nav-start, 0px) - 2560px) / 2));
  padding-right: max(0px, calc((100vw - var(--wb-nav-start, 0px) - 2560px) / 2));
}

html[data-wsc="xl"] .wb-pattern-b.wb-live-layout .wb-list-pane {
  display: block !important;
  height: 100%;
  overflow-y: auto;
  border-right: 0.5px solid var(--wb-separator);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(var(--wb-tabbar-clear, 0px) + 24px) 16px;
  box-sizing: border-box;
}

html[data-wsc="xl"] .wb-pattern-b.wb-live-layout .wb-detail-pane {
  display: block !important;
  height: 100%;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 24px calc(var(--wb-tabbar-clear, 0px) + 24px) 24px;
  box-sizing: border-box;
  max-width: var(--wb-b-detail-max);
}

html[data-wsc="xl"] .wb-pattern-b.wb-live-layout .wb-detail-back {
  display: none !important;
}

html[data-wsc="xl"] .wb-pattern-b.wb-live-layout .wb-map-pane {
  display: block !important;
  position: relative;
  margin: 16px 16px 16px 0;
  border-radius: var(--wb-radius-card);
  overflow: hidden;
  height: calc(100% - 32px);
  box-sizing: border-box;
}

/* Extra-large non-live Pattern B (Explore, Profile, Food, Podcast): Two panes centered */
html[data-wsc="xl"] .wb-pattern-b:not(.wb-live-layout) {
  display: grid !important;
  grid-template-columns: var(--wb-b-list-width) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: max(0px, calc((100vw - var(--wb-nav-start, 0px) - 2560px) / 2));
  padding-right: max(0px, calc((100vw - var(--wb-nav-start, 0px) - 2560px) / 2));
}

html[data-wsc="xl"] .wb-pattern-b:not(.wb-live-layout) .wb-list-pane {
  display: block !important;
  height: 100%;
  overflow-y: auto;
  border-right: 0.5px solid var(--wb-separator);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(var(--wb-tabbar-clear, 0px) + 24px) 16px;
  box-sizing: border-box;
}

html[data-wsc="xl"] .wb-pattern-b:not(.wb-live-layout) .wb-detail-pane {
  display: block !important;
  height: 100%;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 24px calc(var(--wb-tabbar-clear, 0px) + 24px) 24px;
  box-sizing: border-box;
  max-width: var(--wb-b-detail-max);
}

html[data-wsc="xl"] .wb-pattern-b:not(.wb-live-layout) .wb-detail-back {
  display: none !important;
}


/* ---------- Pattern C: Content with supporting map pane ---------- */
.wb-pattern-c {
  width: 100%;
  box-sizing: border-box;
  color: var(--wb-ink);
  font-family: var(--wb-font);
}

/* Compact (<600) and Medium (600-839): Single column with inline map */
html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-pattern-c {
  display: block;
  padding-bottom: calc(var(--wb-tabbar-clear, 0px) + 24px);
}

html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-pattern-c .wb-content-pane {
  display: block !important;
  width: 100%;
  max-width: var(--wb-c-content-max);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px;
  box-sizing: border-box;
}

html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-pattern-c .wb-inline-map {
  display: block !important;
}

html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-pattern-c .wb-supporting-pane {
  display: none !important;
}

/* Expanded (840-1199), Large (1200-1599), and XL (>=1600): Content + Supporting map pane */
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) .wb-pattern-c {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--wb-c-supporting-width) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

html[data-wsc="xl"] .wb-pattern-c {
  grid-template-columns: minmax(0, 1fr) clamp(420px, 42vw, 1100px) !important;
  padding-left: max(0px, calc((100vw - var(--wb-nav-start, 0px) - 2560px) / 2));
  padding-right: max(0px, calc((100vw - var(--wb-nav-start, 0px) - 2560px) / 2));
}

html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) .wb-pattern-c .wb-content-pane {
  display: block !important;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: var(--wb-c-content-max);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 24px calc(var(--wb-tabbar-clear, 0px) + 24px) 24px;
  box-sizing: border-box;
}

/* Inline map card inside content is hidden when supporting pane is visible */
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) .wb-pattern-c :is(.wb-inline-map, .wb-cov-map-card) {
  display: none !important;
}

html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) .wb-pattern-c .wb-supporting-pane {
  display: block !important;
  position: relative;
  margin: 16px 16px 16px 0;
  border-radius: var(--wb-radius-card);
  overflow: hidden;
  height: calc(100% - 32px);
  box-sizing: border-box;
}

.wb-pattern-c .wb-supporting-pane .wb-pane-map {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}


/* #6303 (zz3 iPad finding 3): an expanded window in PORTRAIT (an iPad 13" upright, 1032 wide) is too narrow
   for content + a map pane: the map is width-bound and sat 340 tall at the top of a 1344 tall pane. There
   Pattern C is one column, 640 max, with the inline map card, as at medium (13d); landscape keeps the split. */
@media (orientation: portrait) {
  html[data-wsc="expanded"] .wb-pattern-c { display: block !important; height: auto; overflow: visible; padding-bottom: calc(var(--wb-tabbar-clear, 0px) + 24px); }
  html[data-wsc="expanded"] .wb-pattern-c .wb-content-pane { height: auto; overflow: visible; max-width: 640px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 12px) 24px; }
  html[data-wsc="expanded"] .wb-pattern-c :is(.wb-inline-map, .wb-cov-map-card) { display: block !important; }
  html[data-wsc="expanded"] .wb-pattern-c .wb-supporting-pane { display: none !important; }
  /* issue #6873: iPad portrait coverage list page has inline map card in app mode */
  html.yojowa-app:is([data-wsc="medium"], [data-wsc="expanded"]) .wb-pattern-c .wb-cov-list-map { display: block !important; }
}

/* ---------- Transitions and Motion (Resize rules) ---------- */
.wb-pattern-b,
.wb-pattern-c,
.wb-list-pane,
.wb-detail-pane,
.wb-content-pane,
.wb-supporting-pane,
.wb-map-pane {
  transition: opacity 150ms ease-in-out, transform 300ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .wb-pattern-b,
  .wb-pattern-c,
  .wb-list-pane,
  .wb-detail-pane,
  .wb-content-pane,
  .wb-supporting-pane,
  .wb-map-pane {
    transition: opacity 150ms ease-in-out !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Pattern D: Sheets, Panels, Dialogs & Carried State (WB-YSA-R R17c #6115)
   ========================================================================== */

/* No horizontal scroll across any width */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* Shared sheet container */
#wb-navigate-sheet,
#wb-stop-sheet,
.wb-sheet-host,
.wb-dialog-host {
  position: fixed;
  inset: 0;
  z-index: 2000;
  box-sizing: border-box;
}

#wb-navigate-sheet[hidden],
#wb-stop-sheet[hidden],
.wb-sheet-host[hidden],
.wb-dialog-host[hidden] {
  display: none !important;
}

/* Backdrops */
#wb-navigate-sheet .wb-sheet-backdrop,
#wb-stop-sheet .wb-stop-backdrop,
.wb-sheet-host .wb-sheet-backdrop,
.wb-dialog-host .wb-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  transition: opacity 150ms ease-in-out;
}

/* --- 1. Navigate & Stop Sheet (< 840 Bottom Sheet -> >= 840 Side Sheet) --- */

/* Below 840: Bottom Sheet pinned to bottom */
html:is([data-wsc="compact"], [data-wsc="medium"]) #wb-navigate-sheet:not([hidden]),
html:is([data-wsc="compact"], [data-wsc="medium"]) #wb-stop-sheet:not([hidden]),
html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-sheet-host:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Compact (< 600): Full width bottom sheet */
html[data-wsc="compact"] #wb-navigate-sheet .wb-sheet-container,
html[data-wsc="compact"] #wb-stop-sheet .wb-stop-sheet-card,
html[data-wsc="compact"] .wb-sheet-host .wb-sheet-card {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 28px 28px 0 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Medium (600–839): Modal bottom sheet, max 640px wide, centered */
html[data-wsc="medium"] #wb-navigate-sheet .wb-sheet-container,
html[data-wsc="medium"] #wb-stop-sheet .wb-stop-sheet-card,
html[data-wsc="medium"] .wb-sheet-host .wb-sheet-card {
  width: 100% !important;
  max-width: 640px !important;
  border-radius: 28px 28px 0 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Expanded, Large, XL (>= 840): Side sheet over the map / supporting pane */
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) #wb-navigate-sheet:not([hidden]),
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) #wb-stop-sheet:not([hidden]),
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) .wb-sheet-host:not([hidden]) {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
}

/* WB-FLEX A7: Non-modal over the map from 840 */
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) #wb-stop-sheet {
  pointer-events: none !important;
}
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) #wb-stop-sheet .wb-stop-backdrop {
  display: none !important;
}

html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) #wb-navigate-sheet .wb-sheet-container,
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) #wb-stop-sheet .wb-stop-sheet-card,
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) .wb-sheet-host .wb-sheet-card {
  position: relative !important;
  width: clamp(380px, 32vw, 480px) !important;
  max-width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px) 24px !important;
  box-sizing: border-box !important;
  border-radius: 28px 0 0 28px !important;
  background: var(--wb-surface, #FFFFFF) !important;
  color: var(--wb-ink, #0B1220) !important;
  font-family: var(--wb-font) !important;
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.28) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 16px !important;
  pointer-events: auto !important;
}

/* WB-FLEX A7: 400-wide side sheet on the end edge from 840 */
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) #wb-stop-sheet .wb-stop-sheet-card {
  width: 400px !important;
}

html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) #wb-stop-sheet .wb-drag-handle {
  display: none !important;
}

/* --- 2. Sign In (Bottom sheet < 840 -> M3 Dialog >= 840) --- */
.wb-signin-dialog-host {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2100;
  box-sizing: border-box;
}

.wb-signin-dialog-host[hidden] {
  display: none !important;
}

/* < 840: Modal bottom sheet */
html:is([data-wsc="compact"], [data-wsc="medium"]) .wb-signin-dialog-host {
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

html[data-wsc="compact"] .wb-signin-dialog-host .wb-dialog-card {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 28px 28px 0 0 !important;
  margin: 0 !important;
}

html[data-wsc="medium"] .wb-signin-dialog-host .wb-dialog-card {
  width: 100% !important;
  max-width: 640px !important;
  border-radius: 28px 28px 0 0 !important;
  margin: 0 auto !important;
}

/* >= 840: M3 Dialog (centered) */
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) .wb-signin-dialog-host {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 24px !important;
}

html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) .wb-signin-dialog-host .wb-dialog-card {
  width: min(90vw, 560px) !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  margin: 0 !important;
}

/* --- WB-SIGNIN WS4 (#6805, Brief 1 S4-S6): The Sign-In Wall Sheet --- */
.wb-signin-sheet-host {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2100;
  box-sizing: border-box;
}

.wb-signin-sheet-host[hidden] {
  display: none !important;
}

.wb-signin-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2101;
  -webkit-tap-highlight-color: transparent;
}

html[data-wb-scheme="dark"] .wb-signin-scrim,
html.wb-night .wb-signin-scrim {
  background: rgba(0, 0, 0, 0.6);
}

.wb-signin-sheet-card {
  position: fixed;
  z-index: 2102;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--wb-surface, #FFFFFF);
  color: var(--wb-ink, #0B1220);
  font-family: var(--wb-font);
  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms ease-in-out;
}

/* S4: Bottom sheet below 840 (max-width 640, centered) */
@media (max-width: 839.98px) {
  .wb-signin-sheet-card {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 640px;
    margin: 0 auto;
    border-radius: 16px 16px 0 0;
    padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
    gap: 14px;
  }
  html.ios .wb-signin-sheet-card {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
  }
  html.android .wb-signin-sheet-card {
    border-radius: 28px 28px 0 0;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* S4: 400-wide side sheet on end edge from 840 */
@media (min-width: 840px) {
  .wb-signin-sheet-card {
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: 400px;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--wb-separator, rgba(0, 0, 0, 0.12));
    justify-content: center;
    gap: 14px;
  }
  html.android .wb-signin-sheet-card {
    border-radius: 28px;
    border: none;
  }
  .wb-signin-sheet-card .wb-drag-handle {
    display: none !important;
  }
}

/* S5: Folded promises under 620 tall (bottom sheet) or under 560 tall (side sheet) */
.wb-signin-promises-folded {
  display: none;
  font-size: 12px;
  line-height: 16px;
  color: var(--wb-ink-2, #5F6775);
  text-align: left;
  margin: 0;
  flex: none;
}

@media (max-width: 839.98px) and (max-height: 619.98px) {
  .wb-signin-sheet-card {
    gap: 10px;
    padding-top: 8px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
  .wb-signin-promises {
    display: none !important;
  }
  .wb-signin-promises-folded {
    display: block !important;
  }
  .wb-signin-foot .wb-signin-foot-extra {
    display: none;
  }
}

@media (min-width: 840px) and (max-height: 559.98px) {
  .wb-signin-sheet-card {
    padding: 14px 18px;
    gap: 10px;
  }
  .wb-signin-promises {
    display: none !important;
  }
  .wb-signin-promises-folded {
    display: block !important;
  }
  .wb-signin-foot .wb-signin-foot-extra {
    display: none;
  }
}

/* Header & Typography */
.wb-signin-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex: none;
}

.wb-signin-head-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.wb-signin-kicker {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wb-orange, #FF7A4A);
  margin: 0;
}

.wb-signin-title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--wb-ink, #0B1220);
  margin: 0;
}

html.android .wb-signin-title {
  font-weight: 500;
}

.wb-signin-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--wb-surface-2, #EEF1F6);
  color: var(--wb-ink, #0B1220);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.wb-signin-close-btn:hover {
  opacity: 0.85;
}

.wb-signin-sub {
  font-size: 13px;
  line-height: 18px;
  color: var(--wb-ink-2, #5F6775);
  margin: 0;
  flex: none;
}

/* Promises list */
.wb-signin-promises {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
}

.wb-signin-promise-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wb-signin-promise-badge {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--wb-surface-2, #EEF1F6);
  color: var(--wb-orange, #FF7A4A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.wb-signin-promise-text {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--wb-ink, #0B1220);
}

/* S6: Methods */
.wb-signin-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}

.wb-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  flex: none;
}

html.ios .wb-signin-btn {
  height: 50px;
  min-height: 50px;
}

.wb-signin-apple {
  background: #000000;
  color: #FFFFFF;
  border: none;
}

html[data-wb-scheme="dark"] .wb-signin-apple,
html.wb-night .wb-signin-apple {
  background: #FFFFFF;
  color: #000000;
}

.wb-signin-google {
  background: #FFFFFF;
  color: #1F1F1F;
  border: 1px solid #747775;
}

html[data-wb-scheme="dark"] .wb-signin-google,
html.wb-night .wb-signin-google {
  background: #131314;
  color: #E3E3E3;
  border: 1px solid #8E918F;
}

.wb-signin-email {
  background: var(--wb-surface-2, #EEF1F6);
  color: var(--wb-ink, #0B1220);
  border: none;
}

/* The app sign-in bridge's failure line (signin-sheet.js / .ts appSignIn). */
.wb-signin-err {
  font-size: 15px;
  line-height: 20px;
  color: var(--wb-bad-ink, #C21F35);
  text-align: center;
  margin: 0;
  flex: none;
}
.wb-signin-err[hidden] { display: none; }

.wb-signin-foot {
  font-size: 12px;
  line-height: 16px;
  color: var(--wb-ink-2, #5F6775);
  text-align: center;
  margin: 0;
  flex: none;
}

/* Dark mode theme colors */
html[data-wb-scheme="dark"] .wb-signin-sheet-card,
html.wb-night .wb-signin-sheet-card {
  background: var(--wb-surface, #161D2E);
  color: var(--wb-ink, #EAF1FB);
}

html.ios[data-wb-scheme="dark"] .wb-signin-sheet-card,
html.ios.wb-night .wb-signin-sheet-card {
  background: #1B2232 !important;
  color: #F2F4F8 !important;
}

html.android[data-wb-scheme="dark"] .wb-signin-sheet-card,
html.android.wb-night .wb-signin-sheet-card {
  background: #1D2538 !important;
  color: #E3E7F0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .wb-signin-sheet-card {
    transition: opacity 150ms ease-in-out !important;
    transform: none !important;
  }
}

/* --- 3. Delete Confirm Dialog: M3 Dialog at every size (< 840 and >= 840) --- */
.wb-delete-dialog-host {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2200 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.wb-delete-dialog-host[hidden] {
  display: none !important;
}

.wb-delete-dialog-host .wb-dialog-card {
  width: min(90vw, 480px) !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  background: var(--wb-surface, #FFFFFF) !important;
  color: var(--wb-ink, #1A1F2C) !important;
  padding: 24px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Shared Dialog Card Styling */
.wb-dialog-card {
  position: relative;
  background: var(--wb-surface, #FFFFFF);
  color: var(--wb-ink, #1A1F2C);
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Dark mode for dialogs and sheets */
html[data-wb-scheme="dark"] .wb-dialog-card {
  background: var(--wb-surface, #161D2E) !important;
  color: var(--wb-ink, #EAF1FB) !important;
}
html[data-wb-scheme="dark"] #wb-stop-sheet .wb-stop-sheet-card {
  background: var(--wb-surface, #16244A) !important;
  color: var(--wb-ink, #EAF1FB) !important;
}

/* Transitions across boundary & jumps */
#wb-navigate-sheet .wb-sheet-container,
#wb-stop-sheet .wb-stop-sheet-card,
.wb-sheet-host .wb-sheet-card,
.wb-dialog-card {
  transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), opacity 150ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  #wb-navigate-sheet .wb-sheet-container,
  #wb-stop-sheet .wb-stop-sheet-card,
  .wb-sheet-host .wb-sheet-card,
  .wb-dialog-card {
    transition: opacity 150ms ease-in-out !important;
    transform: none !important;
  }
}


/* ---------- WB-YSA-R2 T1 (#6267), frame 12c: iPad Explore = sidebar + list + page ----------
   "The tab bar becomes a sidebar with the Explore groups; Rest areas list in the middle; Bow Hill
   page on the right. Back is not needed." Only on the iPad (iOS skin, menu.js's top bar) at 840+;
   explore.ts renders the sidebar only then (isIPadSplit), so phones keep their exact page. */
.wbe-split-groups { display: none; }
html.ios[data-wb-nav="topbar"]:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) .wbe-split,
html.android[data-wb-nav="rail"][data-wsc="xl"] .wbe-split {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  height: calc(100vh - var(--wb-nav-top, 0px)); overflow: hidden;
}
html.ios[data-wb-nav="topbar"] .wbe-split .wbe-split-groups,
html.android[data-wb-nav="rail"][data-wsc="xl"] .wbe-split .wbe-split-groups {
  display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0;
  padding: 4px 12px 24px; background: rgba(120, 120, 128, 0.08); border-right: 0.5px solid var(--wb-separator);
}
html.ios[data-wb-nav="topbar"] .wbe-split .wb-pattern-b,
html.android[data-wb-nav="rail"][data-wsc="xl"] .wbe-split .wb-pattern-b { height: 100%; --wb-b-list-width: 380px; }
html.android[data-wb-nav="rail"][data-wsc="xl"] .wbe-split .wbe-nav-bar,
html.android[data-wb-nav="rail"][data-wsc="xl"] .wbe-split .wbe-back-btn,
html.android[data-wb-nav="rail"][data-wsc="xl"] .wbe-split .wb-detail-back,
html.ios[data-wb-nav="topbar"] .wbe-split .wbe-nav-bar,
html.ios[data-wb-nav="topbar"] .wbe-split .wbe-back-btn,
html.ios[data-wb-nav="topbar"] .wbe-split .wb-detail-back { display: none !important; }
.wbe-split-groups .wbe-split-title { font-size: var(--wb-text-h1, 28px); line-height: var(--wb-text-h1-lh, 34px); font-weight: 700; margin: 8px 10px 12px; padding: 0; } /* #6740 (T1): h1 ladder, was 30/36 */
.wbe-split-groups > .wbl-pill { margin: 0 0 6px; }
.wbe-split-search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin: 0 0 12px;
  border-radius: 10px; background: rgba(120, 120, 128, 0.14); color: var(--wb-ink-2); text-decoration: none; font-size: 17px;
}
.wbe-split-h { margin: 18px 10px 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wb-ink-2); }
.wbe-split-row {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 10px; border-radius: 12px;
  color: var(--wb-ink); text-decoration: none; font-size: 17px;
}
.wbe-split-ic { display: flex; flex: none; }
.wbe-split-row.wbe-split-on { background: var(--wb-orange); color: var(--wb-on-orange); font-weight: 600; }
html.ios[data-wb-nav="topbar"] .wbe-split .wbe-detail-title,
html.ios[data-wb-nav="topbar"] .wbe-split .wbe-detail-sub { padding-left: 0; padding-right: 0; margin-left: 0; }

/* ---------- WB-YSA-R2 T2 (#6268), frame 12e: Android tablet list-detail ----------
   The list opens with the search bar (no Back: the rail is the way out) and the page is never empty. */
.wbe-tablet-ld .wbe-tablet-search { margin: 8px 0 12px; }
.wbe-tablet-ld .wbe-list-view > .wbl-pill { margin: 0 0 8px 4px; }
html.android .wbe-tablet-ld .wb-detail-back { display: none !important; }

/* ---------- WB 1.7 S10 part B (#6220, frames 5d / 5f / 6c): a v2 pass page ---------- */
/* The list pane is Mountain passes (menu.js passPaneRowsHTML): state tile, name, "road · words", temperature. */
/* explore.css spaces its nav bar apart (share at the right edge); here the title sits beside Back (frame 5d) */
.wb-pass-pane .wb-pane-nav { display: flex; align-items: center; justify-content: flex-start !important; gap: 4px;
  height: auto !important; padding: 0 !important; margin: 0 0 2px; }
.wb-pass-pane .wb-pane-nav .wbe-back-btn { padding: 6px; margin-inline-start: -6px; }
/* app-mode h1/h2 are !important at (0,2,2) (`html.yojowa-app.android h1`, wb-tokens.css): outrank them, measured */
.wb-pattern-b .wb-pass-pane h1.wb-pane-title { margin: 0 !important; padding: 0 !important; font-size: 20px !important; line-height: 28px !important;
  font-weight: 500 !important; letter-spacing: 0 !important; }
.wb-pass-pane .wb-pane-checked { margin: 0 0 12px; padding-inline-start: 16px; font-size: 13px; color: var(--wb-ink-2); }
.wb-pass-pane .wb-pane-passes { background: transparent; box-shadow: none; border: 0; }
.wb-pass-pane .wb-pane-pass { border-radius: 14px; margin: 0 0 4px; }
.wb-pass-pane .wb-pane-pass .wbe-item-content { border: 0; }
.wb-pass-pane .wb-pane-pass .wbe-item-sub { white-space: normal; }
/* Selection is Explore's own orange tint (explore.css); the title stays ink, as in frame 5d */
.wb-pass-pane .wbe-item-row.wbe-item-selected .wbe-item-title { color: var(--wb-ink) !important; font-weight: 500 !important; }
.wb-pass-pane .wb-pane-pass.wbe-item-selected .wbe-item-sub { color: var(--wb-ink); }
.wb-pass-pane .wb-pane-more-title { margin: 18px 0 6px !important; padding: 0 0 0 16px !important; font-size: 13px !important;
  line-height: 18px !important; font-weight: 600 !important; color: var(--wb-orange-text) !important; }
.wb-pass-pane .wb-pane-more .wbe-group-card { background: transparent; box-shadow: none; border: 0; }
.wb-pass-pane .wb-pane-other .wbe-item-content { border-bottom: 0.5px solid var(--wb-separator); }
.wb-pass-pane .wb-pane-other .wbe-temp { margin-inline-start: auto; }
.wb-pass-pane .wb-pane-other .wbe-ext { display: none; }

/* From 1600 the Cameras box is the third pane (frame 5f): list | page | camera wall. Without cameras, two panes. */
html[data-wsc="xl"] .wb-pattern-b.wb-live-layout.wb-pass-v2 {
  grid-template-columns: clamp(360px, 18vw, 440px) minmax(0, 1fr) !important;
}
html[data-wsc="xl"] .wb-pattern-b.wb-live-layout.wb-pass-v2.wb-cams-on {
  grid-template-columns: clamp(360px, 18vw, 440px) minmax(560px, 1fr) minmax(420px, 1.15fr) !important;
}
html[data-wsc="xl"] .wb-pattern-b.wb-live-layout.wb-pass-v2 .wb-detail-pane { max-width: 1000px; }
html[data-wsc="xl"] .wb-pattern-b.wb-live-layout.wb-pass-v2:not(.wb-cams-on) .wb-cams-pane { display: none !important; }
html[data-wsc="xl"] .wb-pattern-b.wb-live-layout.wb-pass-v2.wb-cams-on .wb-cams-pane {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 20px 20px;
  background: var(--wb-surface);
  border-radius: var(--wb-radius-card);
}
/* The pane is the card; the page's own .live-box chrome (20 px padding + 16 px margin, app mode) left 472 of 584 px */
.wb-pattern-b .wb-cams-pane .pv-camsbox { margin: 0 !important; border: 0 !important; background: transparent !important;
  box-shadow: none !important; padding: 0 !important; }
/* On a phone the summit still leads, full width (live_page .pv-cam-summit); on the wall every still is one tile (5f) */
.wb-cams-pane .pv-cam-summit { grid-column: auto !important; max-width: none !important; }
.wb-cams-pane .pv-cam-summit .pv-cam-frame { border-radius: 14px; }
/* Two stills a row, three once the wall is wide (frame 5f at 2560: three of about 335 px) */
.wb-cams-pane { container-type: inline-size; }
.wb-cams-pane .pv-cams { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@container (min-width: 960px) { .wb-cams-pane .pv-cams { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
/* From 840 the list sits beside the page, so the page's own Back says nothing the list does not (frame 5d: share
   only). visibility, not display, so Share keeps its place at the right edge. */
html:is([data-wsc="expanded"], [data-wsc="large"], [data-wsc="xl"]) .wb-pass-v2 .wb-detail-pane .wb-app-topbar [data-wb-back] {
  visibility: hidden;
}