/* Foldables, dual screens, cover-screen widths, and safe areas.
   Segment metrics come from env(viewport-segment-*) when the browser has them,
   or from fold.js (Device Posture API, getWindowSegments, or a test hook). */

@media (horizontal-viewport-segments: 2) {
  :root {
    --seg0: env(viewport-segment-width 0 0);
    --seg0x: env(viewport-segment-left 0 0);
    --seg1: env(viewport-segment-width 1 0);
    --seg1x: env(viewport-segment-left 1 0);
    --hinge: max(0px, calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)));
  }
}
@media (vertical-viewport-segments: 2) {
  :root {
    --seg0h: env(viewport-segment-height 0 0);
    --seg1h: env(viewport-segment-height 0 1);
    --seg1y: env(viewport-segment-top 0 1);
    --hinge-y: env(viewport-segment-bottom 0 0);
    --hinge: max(0px, calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)));
  }
}

/* Unfolded foldables land around 600–840dp, below the old 768px tablet rule. */
@media (min-width: 600px) and (min-height: 500px) and (max-width: 767px) {
  header, main { max-width: 920px; }
  .tabs { width: min(888px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  #v-find:not([hidden]), #v-plan:not([hidden]), #v-explore:not([hidden]), #v-log:not([hidden]), #v-goals:not([hidden]) {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: start;
  }
  #v-find:not([hidden]) > .xrow,
  #v-find:not([hidden]) > .card:has(#q),
  #v-find:not([hidden]) > #list,
  #v-find:not([hidden]) > button,
  #v-find:not([hidden]) > #dpAsk,
  #v-find:not([hidden]) > #goFind,
  #v-plan:not([hidden]) > #plOut,
  #v-plan:not([hidden]) > #goPlan,
  #v-explore:not([hidden]) > .hero,
  #v-explore:not([hidden]) > .xtiles,
  #v-explore:not([hidden]) > #rtOut,
  #v-log:not([hidden]) > .logseg,
  #v-log:not([hidden]) > button,
  #v-log:not([hidden]) > .card:first-of-type,
  #v-log:not([hidden]) > #goPane { grid-column: 1 / -1; }
}

header { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (max-width: 1023px) {
  .tabs { width: min(528px, calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tabs { width: min(888px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
}
@media (min-width: 1024px) {
  .tabs { padding-top: max(22px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); }
}

/* Book posture: vertical hinge. Each column is one segment. The gap is the hinge. */
html[data-fold="book"] body { padding-left: env(safe-area-inset-left) !important; }
html[data-fold="book"] header {
  max-width: none;
  width: var(--seg0);
  margin-left: var(--seg0x);
  padding-left: 16px;
  padding-right: 12px;
}
html[data-fold="book"] main {
  max-width: none;
  width: calc(var(--seg0) + var(--hinge) + var(--seg1));
  margin-left: var(--seg0x);
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
html[data-fold="book"] main > section:not([hidden]) {
  display: grid !important;
  grid-template-columns: var(--seg0) var(--seg1) !important;
  column-gap: var(--hinge) !important;
  align-items: start;
}
html[data-fold="book"] main > section:not([hidden]) > * {
  grid-column: auto !important;
  min-width: 0;
  max-width: 100%;
}
html[data-fold="book"] .tabs {
  left: var(--seg0x);
  right: auto;
  top: auto;
  bottom: calc(8px + env(safe-area-inset-bottom));
  transform: none;
  width: calc(var(--seg0) + var(--hinge) + var(--seg1));
  height: auto;
  display: grid;
  grid-template-columns: var(--seg0) var(--hinge) var(--seg1);
  flex-direction: row;
  gap: 0;
  padding: 4px 0;
  border-radius: 22px;
}
html[data-fold="book"] .foldside { display: flex; min-width: 0; gap: 2px; padding: 0 4px; }
html[data-fold="book"] .foldside button {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  white-space: normal;
  height: auto;
  min-height: 44px;
}
html[data-fold="book"] .foldgap { width: var(--hinge); pointer-events: none; }
html[data-fold="book"] .bsheet,
html[data-fold="book"] .gosheet,
html[data-fold="book"] .pw {
  box-sizing: border-box;
  padding-left: var(--seg1x);
}
html[data-fold="book"] .bsin,
html[data-fold="book"] .gosh,
html[data-fold="book"] .pwb {
  width: 100%;
  max-width: var(--seg1);
  margin-right: 0;
}
html[data-fold="book"] .bdbar,
html[data-fold="book"] .gobar,
html[data-fold="book"] .ogbar,
html[data-fold="book"] .betafb {
  left: calc(var(--seg0x) + 10px);
  right: auto;
  width: calc(var(--seg0) - 20px);
  transform: none;
}

/* Tabletop posture: horizontal hinge. The mask covers the hinge so controls are not drawn there. */
html[data-fold="tabletop"] .tabs {
  top: auto;
  bottom: calc(8px + env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left));
  transform: none;
  width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
  height: auto;
  flex-direction: row;
}
html[data-fold="tabletop"]::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: var(--hinge-y);
  height: var(--hinge);
  background: var(--bg, #ffffff);
  z-index: 40;
  pointer-events: auto;
}
html[data-fold="tabletop"] .bsheet,
html[data-fold="tabletop"] .gosheet {
  padding-top: var(--seg1y);
  box-sizing: border-box;
}
html[data-fold="tabletop"] .bsin,
html[data-fold="tabletop"] .gosh {
  max-height: calc(var(--seg1h) - 8px);
}

/* Cover screens are about 280–400dp wide. This block stays last so it wins over the generic tab width. */
@media (max-width: 420px) {
  h1 { font-size: 24px; }
  header { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .hero h2 { font-size: 20px; }
  .hero p { max-width: 100%; }
  .betabadge { white-space: normal; }
  .card { padding: 14px; }
  /* The shorthand above would drop the calorie card's top padding and let the skillet sticker cover My goals. */
  .ringcard { padding-top: 64px; }
  .tabs {
    width: calc(100% - 8px - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding: 4px;
    border-radius: 18px;
  }
  .tabs button { font-size: 12px; line-height: 1.05; white-space: normal; min-width: 0; padding: 6px 1px; }
  :root { --nav-h: 132px; }
  button.wide, .logfav, .prefjump {
    white-space: normal;
    line-height: 1.25;
    height: auto;
  }
}

/* Desktop side rail. High specificity so a later phone-width rule cannot stretch this into a full-height column. Book and tabletop keep their own nav. */
@media (min-width: 1024px) {
  html:not([data-fold="book"]):not([data-fold="tabletop"]) body { padding-left: 228px; }
  html:not([data-fold="book"]):not([data-fold="tabletop"]) .tabs {
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 228px;
    max-width: 228px;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    border-radius: 0;
  }
  html:not([data-fold="book"]):not([data-fold="tabletop"]) .tabs button {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    min-height: 48px;
  }
}

/* Longhands with !important. The minified theme sheet collapses left/top into inset, which leaves the phone rule (left:50%; transform:translateX(-50%)) in place on some browsers, so the rail sits in the middle of the page. */
@media (min-width: 1024px) {
  body { padding-left: 228px !important; padding-bottom: 32px !important; }
  .tabs {
    position: fixed !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    width: 228px !important;
    max-width: 228px !important;
    height: 100dvh !important;
    max-height: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
}
@media (max-width: 1023px) {
  main > section,
  main > #v-meal {
    padding-bottom: calc(var(--nav-h, 112px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (min-width: 600px) and (min-height: 500px) {
  #v-find > #tourBanner { grid-column: 1 / -1; grid-row: 1; order: -3; }
  #v-find > .hero.now, #v-find > .ringcard { order: -2; }
  #v-find > #imBtn { order: -1; }
}