/* ==========================================================================
   One responsive system, four modes (docs/design/A2-LANDSCAPE.md).

   Sizes come from the height and from min() of width and height, never from the
   width alone, and every edge honours env(safe-area-inset-*). The modes do not
   overlap: the split between phone and iPad landscape is the 700px height.

     phone portrait    the base styles (styles.css, bubble.css)
     iPad portrait     (orientation: portrait) and (min-width: 600px)
     phone landscape   (orientation: landscape) and (max-height: 699px) and (min-width: 560px)
     iPad landscape    (orientation: landscape) and (min-height: 700px) and (min-width: 900px)

   js/app.js reads the same queries (LAYOUT_QUERIES); test/layouts.test.mjs keeps
   the two in step.
   ========================================================================== */

/* ============================================================ iPad portrait */

@media (orientation: portrait) and (min-width: 600px) {
  .topbar, .reading, .bubble { width: min(100%, 720px); }
  .topbar { padding: calc(env(safe-area-inset-top) + 24px) 32px 0; }
  .topbar__place, .topbar__round { height: 52px; border-radius: 26px; }
  .topbar__place { font-size: 20px; }
  .topbar__round { width: 52px; }
  .topbar__round .icon { width: 28px; height: 28px; }

  .reading { justify-content: center; gap: 36px; padding: 10px 32px 0; }
  .reading__temp { font-size: clamp(110px, 14.9vw, 155px); }
  .reading__side { padding-top: 10px; }
  .reading__desc { font-size: 30px; }
  .reading__meta { font-size: 20px; }
  .reading__yesterday { font-size: 22px; }
  .reading__refresh { font-size: 20px; min-height: 52px; }

  .bubble { margin-top: 18px; padding: 0 32px; }
  :root, body[data-sky="night"] {
    --phrase-size: 42px; --phrase-size-m: 38px; --phrase-size-s: 34px; --phrase-size-xs: 30px;
  }
  .bubble__text { max-width: 620px; margin: -12px auto; }

  /* The bear is the screen: his box is a share of the smaller side, his feet stand
     above the floating card, and the hill is drawn wide enough that its crest
     still crosses him at mid-waist. */
  .home { position: relative; }
  .scene {
    --s: min(72vw, 50dvh);
    --feet: calc(300px + env(safe-area-inset-bottom) + 24px);
  }
  .scene__ext { display: none; }

  /* The info panel floats as a centred card with grass on both sides. */
  .panel {
    position: absolute;
    left: 50%;
    bottom: calc(40px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(calc(100% - 64px), 640px);
    padding: 24px 28px 28px;
    border-radius: 36px;
    box-shadow: 0 6px 0 rgba(58, 38, 22, 0.14);
  }
  .cue__img { width: 104px; height: 104px; }
  .cue__label { font-size: 22px; }
  .cues { min-height: 150px; }
  .later { height: 60px; margin-top: 16px; border-radius: 30px; font-size: 24px; }
  .later .icon { width: 24px; height: 24px; }
  body[data-sky="night"] .panel__heading, .panel__heading { font-size: 22px; }

  /* A centred bottom sheet. */
  .sheet {
    width: min(calc(100% - 64px), 760px);
    max-width: none;
    max-height: 70dvh;
    border-radius: 36px 36px 0 0;
  }
  .sheet--tall { height: 88dvh; max-height: calc(88dvh - var(--kb, 0px)); }
  .sheet__handle { height: 52px; }
  .sheet { --handle-h: 52px; }
  .sheet__body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .sheet__title { font-size: 34px; }
}

/* =========================================================== iPad landscape */

@media (orientation: landscape) and (min-height: 700px) and (min-width: 900px) {
  :root { --col: 480px; --sky-w: calc(100vw - var(--col)); }
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--col);
    grid-template-rows: auto auto auto 1fr;
    /* The page never clips: when the column holds more than the height allows, the
       stage scrolls (the scene stays put, see .scene below) and the column's
       background grows with it. */
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-gutter: auto;
  }
  .stage::after { content: ""; grid-column: 2; grid-row: 1 / -1; background: var(--panel-bg); z-index: 0; transition: background 900ms ease; }
  .home { display: contents; }
  .scene { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; align-self: start; height: var(--app-h, 100dvh); z-index: 1; min-height: 0; }
  .scene { --s: min(760px, calc(100vw - var(--col)), 82dvh); --feet: max(24px, 6dvh); overflow: clip; }
  /* The right-hand column covers the sky there: the sun and moon go in the open sky
     of the left-hand scene instead. */
  .orb--sun, .orb--moon { right: calc(var(--col) + 9vw); top: 14dvh; }
  .cloud--a { top: 24dvh; }
  .cloud--b { top: 34dvh; }

  .topbar, .reading, .panel { grid-column: 2; position: relative; z-index: 2; width: 100%; margin: 0; color: var(--panel-ink); }
  .bubble { grid-column: 2; grid-row: 3; z-index: 2; width: 100%; margin: 0; padding: 14px 28px 0; }
  .topbar { grid-row: 1; padding: 22px 28px 0; }
  .reading { grid-row: 2; padding: 14px 28px 0; }
  .panel {
    grid-row: 4; background: none; border-radius: 0; box-shadow: none;
    padding: 18px 28px calc(max(28px, 4.5dvh) + env(safe-area-inset-bottom)); display: flex; flex-direction: column;
  }

  /* The column is cream by day and navy at night, like the phone's panel. */
  .topbar__place, .topbar__round { height: 52px; background: transparent; border: 3px solid var(--panel-ink); color: var(--panel-ink); }
  .topbar__round { width: 52px; }
  body[data-sky="night"] .topbar__place, body[data-sky="night"] .topbar__round { background: transparent; color: var(--panel-ink); }
  .reading__temp { font-size: clamp(72px, 13dvh, 108px); }
  .reading__desc { font-size: clamp(20px, 3.4dvh, 26px); }
  .reading__meta { font-size: 17px; }
  .reading__yesterday { font-size: 20px; line-height: 1.15; }
  .reading__refresh { min-height: 52px; }

  .bubble__text,
  body[data-sky="night"] .bubble__text,
  body[data-sky="stormy"] .bubble__text {
    --phrase-ink: var(--panel-ink);
    --phrase-glow: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: clamp(30px, 5.4dvh, 40px);
  }
  .bubble__text.is-m { font-size: clamp(27px, 4.9dvh, 36px); }
  .bubble__text.is-s { font-size: clamp(25px, 4.4dvh, 32px); }
  .bubble__text.is-xs { font-size: clamp(22px, 3.8dvh, 28px); }

  .panel__heading, body[data-sky="night"] .panel__heading { display: block; text-align: left; font-size: 20px; }
  .cues { justify-content: flex-start; gap: 36px; min-height: 0; }
  .cue { flex: 0 0 auto; }
  .cue__img { width: clamp(68px, 12.4dvh, 104px); height: clamp(68px, 12.4dvh, 104px); }
  .cue__label { font-size: clamp(17px, 2.7dvh, 20px); }
  .later { display: none; }
  .inline-day:not([hidden]) { display: block; margin-top: auto; padding-top: 14px; }
  .stops { background: var(--card); border-radius: 26px; padding: 14px 6px 12px; color: #3a2616; }
  .first__panel { top: auto; }
}

/* Larger iPads: a wider column and bigger type. */
@media (orientation: landscape) and (min-height: 700px) and (min-width: 1300px) {
  :root { --col: 560px; }
  .reading__temp { font-size: clamp(72px, 14.5dvh, 124px); }
  .bubble__text, body[data-sky="night"] .bubble__text { font-size: clamp(32px, 5.8dvh, 44px); }
  .bubble__text.is-m { font-size: clamp(29px, 5.2dvh, 40px); }
  .bubble__text.is-s { font-size: clamp(26px, 4.7dvh, 36px); }
  .cue__img { width: clamp(72px, 13.5dvh, 116px); height: clamp(72px, 13.5dvh, 116px); }
  .cue__label { font-size: clamp(18px, 2.9dvh, 22px); }
}

/* ====================================== the side sheet, in both two-column layouts */
@media (orientation: landscape) and (max-height: 699px) and (min-width: 560px), (orientation: landscape) and (min-height: 700px) and (min-width: 900px) {
  /* The sheet comes in from the right as a side sheet. */
  .sheet {
    inset: 0 0 0 auto;
    margin: 0;
    width: calc(min(520px, 48vw) + env(safe-area-inset-right));
    max-width: none;
    height: calc(var(--app-h, 100dvh) - var(--kb, 0px));
    max-height: none;
    margin-bottom: 0;
    border-radius: 28px 0 0 28px;
  }
  .sheet { --handle-h: 0px; } /* the close circle floats over the content here */
  .sheet[open] { animation-name: sheetInRight; }
  .sheet.is-closing { animation-name: sheetOutRight; }
  /* A small floating close circle, top left; the content scrolls the full height behind it. */
  .sheet__handle {
    top: 8px; width: 44px; height: 44px; margin: 8px 0 -52px 12px; border-radius: 50%;
    background: #3a2616; z-index: 3; cursor: pointer; padding: 0; justify-content: center;
    box-shadow: 0 0 0 6px rgba(255, 247, 230, 0.92), 0 2px 10px rgba(58, 38, 22, 0.2);
  }
  .sheet__handle span {
    position: relative; width: 44px; height: 44px; border-radius: 50%; background: none;
  }
  .sheet__handle span::after {
    content: ""; position: absolute; left: 14px; top: 16px; width: 12px; height: 12px;
    border: solid #fff7e6; border-width: 0 3px 3px 0; transform: rotate(-45deg);
  }
  .sheet__handle:focus-visible span { outline: 3px solid var(--ink); outline-offset: 2px; }
  /* Even margins: 24px each side of the content, and on the notch side just enough to clear the island. */
  .sheet__body { padding: 8px max(24px, calc(env(safe-area-inset-right) - 6px)) calc(20px + env(safe-area-inset-bottom)) 24px; }
  .sheet__title { padding: 0 0 0 56px; min-height: 52px; display: flex; align-items: center; font-size: 26px; touch-action: none; }
  .settings__back { margin-left: 56px; } /* clear the close chevron; the title below it sits under the chevron's row */
}

/* The strip's heading is the button that opens the day; the whole strip opens it too. */
@media (orientation: landscape) and (min-height: 700px) and (min-width: 900px) {
  .inline-day__open {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 0 -4px; padding: 0 10px 0 4px;
    border: 0; border-radius: 22px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  }
  .inline-day__open .icon { width: 20px; height: 20px; transform: rotate(-90deg); }
  .inline-day__open:disabled { opacity: 0.5; cursor: default; }
  .inline-day .stops { cursor: pointer; }
}

/* ========================================================== phone landscape */

@media (orientation: landscape) and (max-height: 699px) and (min-width: 560px) {
  :root { --lcol: clamp(300px, 45vw, 430px); --sky-w: var(--lcol); }
  .stage {
    --edge-r: max(16px, env(safe-area-inset-right));
    --edge-l: max(14px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: var(--lcol) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    /* Never clip: a column taller than the screen scrolls, the scene stays put. */
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  /* The right column: cream by day, navy at night, left corners rounded. */
  .stage::after {
    content: ""; grid-column: 2; grid-row: 1 / -1; z-index: 0;
    background: var(--panel-bg); border-radius: 28px 0 0 28px; transition: background 900ms ease;
  }
  .topbar, .home { display: contents; }

  /* Scene: the bear is the height of the screen, his feet 11% above the bottom, and
     the hill 2.4 times his width, so the crest still crosses him at mid-waist. */
  .scene {
    grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; align-self: start; height: var(--app-h, 100dvh); z-index: 1; min-height: 0;
    --s: var(--app-h, 100dvh);
    --feet: calc(0.111 * var(--s));
    --ground-w: calc(2.4 * var(--s));
    overflow: clip;
  }
  .scene__ground { bottom: calc(-0.04 * var(--s)); }
  .scene__ext { display: none; }
  /* Right of centre in his column, so the place pill over the sky never touches his ear. */
  .bear { left: 62%; }
  .orb--sun { left: calc(var(--lcol) * 0.52); right: auto; top: 12dvh; width: 30dvh; }
  .orb--moon { left: calc(var(--lcol) * 0.55); right: auto; top: 12dvh; width: 30dvh; }
  .cloud--a { top: 30dvh; width: 36dvh; }
  .cloud--b { display: none; }

  /* The place pill sits over the sky, the gear in the column. */
  .topbar__place {
    grid-column: 1; grid-row: 1; z-index: 3; justify-self: start; align-self: start;
    margin: 8px 0 0 var(--edge-l); height: 44px; max-width: calc(var(--lcol) - var(--edge-l) - 8px);
    padding: 0 12px 0 10px; font-size: 15px; gap: 6px;
  }
  .topbar__round {
    grid-column: 2; grid-row: 1; z-index: 3; justify-self: end; align-self: start;
    margin: 6px var(--edge-r) 0 0; width: 44px; height: 44px; flex: none;
    background: transparent; border: 2px solid var(--panel-ink); color: var(--panel-ink);
  }
  body[data-sky="night"] .topbar__round { background: transparent; color: var(--panel-ink); }
  /* Two or more buddies: the chip sits just left of the gear (not on top of it), and the weather text leaves room for it. */
  .topbar__buddy { margin-right: calc(var(--edge-r) + 52px); }
  .topbar__buddyName { max-width: 52px; }
  body:has(.topbar__buddy:not([hidden])) .reading { padding-right: calc(var(--edge-r) + 104px); }

  .reading {
    grid-column: 2; grid-row: 1; z-index: 2; width: 100%; margin: 0; color: var(--panel-ink);
    padding: 6px calc(var(--edge-r) + 52px) 0 20px; gap: 14px;
  }
  .reading__temp { font-size: clamp(64px, 19dvh, 84px); }
  .reading__desc { font-size: clamp(18px, 5.4dvh, 24px); }
  .reading__meta { font-size: 15px; line-height: 1.15; }
  .reading__yesterday { font-size: 15px; line-height: 1.1; }
  .reading__side { padding-top: 0; }
  .reading__refresh { min-height: 44px; font-size: 15px; }

  /* The line sits inside the panel, as plain ink. */
  .bubble { grid-column: 2; grid-row: 2; z-index: 2; width: 100%; margin: 4px 0 0; padding: 0 var(--edge-r) 0 20px; }
  :root, body[data-sky="night"] {
    --phrase-size: clamp(22px, 6.6dvh, 28px);
    --phrase-size-m: clamp(21px, 6dvh, 25px);
    --phrase-size-s: 20px;
    --phrase-size-xs: 18px;
  }
  .bubble__text,
  body[data-sky="night"] .bubble__text,
  body[data-sky="stormy"] .bubble__text {
    --phrase-ink: var(--panel-ink);
    --phrase-glow: none;
    margin: 0; padding: 0; text-align: left; max-height: calc(3 * 1.08em);
  }

  .panel {
    grid-column: 2; grid-row: 3; z-index: 2; align-self: start; width: 100%; margin: 0;
    background: none; border-radius: 0; box-shadow: none; color: var(--panel-ink);
    padding: 8px var(--edge-r) calc(8px + env(safe-area-inset-bottom)) 20px;
  }
  .panel__heading, body[data-sky="night"] .panel__heading { display: none; }
  .cues { min-height: 0; justify-content: space-between; gap: 6px; }
  .cue__img { width: clamp(54px, 15dvh, 68px); height: clamp(54px, 15dvh, 68px); }
  .cue__label { font-size: 15px; }
  .cues-wrap__tap { border-radius: 16px; }
  .later { height: 44px; margin-top: 6px; border-radius: 22px; font-size: 18px; }
  /* The tick sits between the cues and Looking ahead: 44 high is the minimum target, and 750x292 still fits. */
  .dressed { margin-top: 4px; gap: 8px; }
  .dressed__go, .dressed__book { min-height: 44px; }
  .dressed__go { font-size: 19px; }
  .dressed__book { width: 56px; }
  .dressed__book img { width: 30px; height: 30px; }
  /* The shortest phones (750x292): smaller cue pictures so the tick and Looking ahead both fit. */
  @media (max-height: 320px) { .cue__img { width: 44px; height: 44px; } .cue__label { font-size: 13px; } .reading__temp { font-size: 56px; } }
  .later .icon { transform: rotate(-90deg); width: 20px; height: 20px; }
  .later__dot { left: calc(50% + 70px); top: 6px; }
  .inline-day { display: none !important; }
  .cue__label { white-space: nowrap; }
  @media (max-width: 700px) { .cue__label { font-size: 14px; } }
  /* Taller phones (874x402): spread the column so the bottom is not empty. */
  @media (min-height: 380px) {
    .panel { align-self: stretch; display: flex; flex-direction: column; justify-content: space-evenly; padding-top: 14px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .later { margin-top: 0; }
  }
  /* A tall short-landscape screen (iPad mini in Safari, about 1133x650): let the column grow. */
  @media (min-height: 560px) {
    :root { --lcol: clamp(300px, 50vw, 560px); }
    .reading__temp { font-size: clamp(84px, 17dvh, 120px); }
    .reading__desc { font-size: clamp(24px, 4.6dvh, 32px); }
    .reading__meta { font-size: 18px; }
    :root, body[data-sky="night"] {
      --phrase-size: clamp(28px, 6.4dvh, 40px);
      --phrase-size-m: clamp(26px, 5.8dvh, 36px);
      --phrase-size-s: 24px;
      --phrase-size-xs: 21px;
    }
    .cue__img { width: clamp(68px, 16dvh, 104px); height: clamp(68px, 16dvh, 104px); }
    .cue__label { font-size: 18px; }
    .later { height: 52px; font-size: 20px; }
  }

}


/* First run, place entry and the PIN gate on a short wide screen: the bear on the
   left, the panel as a right-hand column, like the home screen. */
@media (orientation: landscape) and (max-height: 699px) and (min-width: 560px) {
  .first { --edge-r: max(16px, env(safe-area-inset-right)); }
  .first__ground { left: 22.5%; bottom: calc(-0.04 * 100dvh); width: calc(2.4 * 100dvh); transform: translateX(-50%); }
  .first::after { display: none; }
  .first__bear { left: 22.5%; top: auto; bottom: 0; width: min(100dvh, 45vw); transform: translateX(-50%); }
  .first[data-view="type"] .first__bear { top: auto; width: min(100dvh, 45vw); }
  .first__panel {
    left: 45%; right: 0; top: 0; bottom: 0;
    border-radius: 28px 0 0 28px;
    padding: 12px var(--edge-r) calc(10px + env(safe-area-inset-bottom)) 20px;
    justify-content: flex-start; /* the form centres itself with auto margins, which never push it off the top of a scrolling column */
  }
  .first__type { margin-block: auto; }
  /* The greeting has its own band above the panel, so the results never scroll under it. */
  .first[data-mode="first"] .first__panel { top: 66px; border-radius: 28px 0 0 0; }
  .first[data-mode="first"].is-typing .first__panel { top: 0; height: calc(var(--first-vv, 100dvh)); border-radius: 0 0 0 28px; }
  .first[data-mode="change"] .first__panel { top: 0; max-height: none; }
  .first__bubble, .first[data-view="type"] .first__bubble {
    top: 10px; left: 45%; right: 0; margin: 0; width: auto;
    padding: 0 var(--edge-r) 0 20px;
  }
  .first__bubble .bubble__text, .first[data-view="type"] .first__bubble .bubble__text {
    font-size: 22px; text-align: left; color: var(--ink); --phrase-ink: var(--ink); --phrase-glow: none; margin: 0; padding: 0;
  }
  .first[data-view="hello"] .first__panel { padding-top: 78px; }
  .first__back { left: var(--edge-l, 14px); }
  .btn--tall { min-height: 48px; font-size: 18px; }
  .first__input { height: 48px; font-size: 18px; }
  .keypad { gap: 6px; }
  .key { height: 44px; font-size: 22px; }
  .pindots span { width: 16px; height: 16px; }
}

@keyframes sheetInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sheetOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }