/* LAYOUT-TIDY-1 (IDEA 704) and keyboard room (IDEA 705). Loaded after dew.css, so these rules win on equal weight.
   Substance only: where things sit and how they line up; every look keeps its own colours, rims and shapes.
   One edge on a phone: 16 px from the screen's side, the same as the dock, the hints, the order chip, the cards and the Back note.
   Gaps between neighbours are 8 px; every button in a card is 44 px high (no-accidental-taps.md). */

/* ---- 1. the cards that offer something (a shared try, Install as an app, Bring over your things, the evening's red offer) ----
   Two rows on a phone: the picture and the words on the first, the answers on the second, right-aligned, side by side,
   the same height. Before, "See it" stood to the right of the words and "Not now" wrapped alone to the left under them. */
@media (max-width: 560px) {
  #try-card, .calm-card { left: 16px; right: 16px; max-width: none; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; }
  #try-card div, .calm-card div, .red-offer div { flex: 1 1 calc(100% - 56px); }
  #try-card button, .calm-card button { min-height: 44px; min-width: 44px; margin: 0; }
  #try-card-close { order: 1; }
  #try-card-see { order: 2; }
}

/* ---- 2. the order chip and its pop-up: the same 16 px edge as everything else ----
   (the Meatballs module's own sheet puts the round button and its pop-up 12 px from the edge; "body #" outweighs it) */
@media (max-width: 700px) {
  body #order-btn { right: calc(var(--kv-right, 0px) + 16px); }
  body #order-pop { left: calc(var(--kv-left, 0px) + 16px); right: calc(var(--kv-right, 0px) + 16px); }
  body.earth-desk.earth-ready #order-pop { margin-right: 0; }
}
@media (max-width: 700px) and (max-height: 640px) {
  body.earth-desk.earth-ready #order-btn { right: calc(var(--kv-right, 0px) + 64px); }
  body.earth-desk.earth-ready #order-pop { margin-right: 48px; }
}

/* ---- 3. the install pill ("Try on Windows", "Try on your device") ends exactly where the dock ends ---- */
@media (max-width: 560px) {
  #try-full:not([hidden]) { right: 0; }
}

/* ---- 4. the keyboard is up in one of Dew's text fields (js/keyboard-room.js sets body.kb-open and --kb-h) ----
   What is typed stays in sight: nothing of Dew lies over the bar, the results stay inside what the keyboard leaves,
   and everything that floats and is not needed while typing steps aside. They come back with the keyboard going down. */
body.kb-open :is(#first-run, #try-full, #try-card, .calm-card, #order-btn, .corner, .ez-strip, .ez-chip, #back-note, #order-pop:not(:focus-within)) {
  visibility: hidden; pointer-events: none;
}
/* the results open upwards from the bar and may not reach above the visible part of the screen (iOS: dvh does not shrink for the keyboard) */
body.kb-open #results {
  max-height: min(60dvh, calc(var(--kv-height, 100dvh) - var(--dock-h) - 24px));
}