/* Device classes.
 *
 * Loaded LAST so it can restate layout rules the earlier sheets set as
 * constants. It does not restyle components — it decides, per class of screen,
 * how much room the panel gets, how tall the header is, and where the floating
 * scene chrome sits so nothing lands on top of anything else.
 *
 * The whole layout is driven by four tokens. Every magic number that used to
 * encode "the panel is 370 wide" — most damagingly #feedbackBtn's right:426px,
 * which was 370 + 22 + a gap and silently wrong the moment the panel moved —
 * is expressed in terms of them instead.
 *
 * The classes, and why each boundary is where it is:
 *
 *   phone portrait   <=720px   the bottom sheet; matches main.js isMobile(),
 *                              which owns the sheet's drag behaviour. Moving
 *                              this boundary without moving that one gives a
 *                              sheet layout with no sheet logic.
 *   short viewport   <=500px tall   a phone on its side, and a small laptop in
 *                              a video call. Vertical room is the scarce thing,
 *                              so the header shrinks and the panel keeps the
 *                              side, never the bottom.
 *   tablet           721-1179  touch, but with room for a side panel. The panel
 *                              becomes proportional and hit targets grow to the
 *                              44px both platform guidelines ask for.
 *   laptop           1180-1679 what the original layout was drawn for. Unchanged.
 *   large display    1680-2559 a sales-office screen, read from a metre or two.
 *   4K               >=2560    the same screen with four times the pixels. The
 *                              browser does NOT scale for us: 3840 CSS px means
 *                              a 370px panel is 9.6% of the width and body text
 *                              is a few millimetres tall. Everything steps up.
 */

:root {
  --header-h: 68px;
  --panel-w: 370px;
  --panel-gap: 22px;
  /* Where the panel's left edge falls, so floating chrome can clear it. */
  --panel-edge: calc(var(--panel-w) + var(--panel-gap) * 2);
}

/* Both, always, from the one token: .shell's offset and the header's own
 * height are the same measurement, and setting only the first left a 10px band
 * of nothing under the header on any class that changed it. */
header { height: var(--header-h); }
.shell { inset: var(--header-h) 0 0; }

/* Scoped away from the phone on purpose. Below 721px the panel is a bottom
 * sheet — creative-direction.css pins it with `top:auto` and drives its height
 * from a drag gesture — and restating `top` here unconditionally turned it into
 * a TOP sheet that covered the residence and clipped its own call to action. */
@media (min-width: 721px) {
  #panel {
    right: var(--panel-gap);
    top: var(--panel-gap);
    bottom: var(--panel-gap);
    width: min(var(--panel-w), calc(100% - var(--panel-gap) * 2));
  }
}

/* Was right:426px. Now it tracks the panel at every size. */
#feedbackBtn { right: calc(var(--panel-edge) + 12px); }

/* ----------------------------------------------------------------- touch */
/* Hit sizing belongs to the INPUT, not to the width. An iPad Pro in landscape
 * is 1366px — laptop-width and touch-driven — so keying 44px targets on a
 * breakpoint would have left the biggest tablet with mouse-sized controls.
 * 44px is the smallest reliable target on both platforms; these were drawn
 * at 34. */
@media (pointer: coarse) {
  header button, .lang select { min-height: 44px; }
  .season { padding: 4px; }
  #panel .tabs button { min-height: 40px; }
  .card { padding: 14px; }
  .primary, .secondary { padding: 15px; }
}

/* ---------------------------------------------------------------- tablet */
/* 721-1279: an iPad in either orientation, and an Android tablet. The panel
 * stops being a constant and takes a share of the width, so a 1180px landscape
 * iPad does not hand the residence the same 370px a 3840px wall does.
 *
 * The floor is 370 on purpose: it is what every size above a phone used to get,
 * and a proportional rule that makes a portrait tablet NARROWER than it was is
 * not an improvement. 820px portrait lands on the floor; 1180px landscape gets
 * the ceiling. */
@media (min-width: 721px) and (max-width: 1279px) {
  :root { --panel-w: clamp(370px, 40vw, 470px); --panel-gap: 18px; }
}

/* ------------------------------------------------------- large display */
/* 1680-2559: a sales-office screen. The panel is read standing up, from
 * further away than a laptop, so it gets both more width and more type. */
@media (min-width: 1680px) and (max-width: 2559px) {
  :root { --header-h: 78px; --panel-w: clamp(430px, 26vw, 560px); --panel-gap: 28px; }

  header { padding: 0 32px; }
  header button { padding: 11px 16px; font-size: 16px; }
  .lang select { padding: 9px 13px; font-size: 15px; }

  #panel { padding: 30px; }
  #panel h1 { font-size: 36px; }
  #panel p, #panel .card strong { font-size: 17px; }
  #panel .card small { font-size: 14px; }
  #panel .eyebrow { font-size: 12px; }
}

/* -------------------------------------------------------------------- 4K */
/* >=2560, which is where a 4K panel reports 3840 CSS px unless someone has set
 * a zoom. Nothing about the layout is proportional, so every constant that
 * would otherwise render at a few millimetres is stepped up here. */
@media (min-width: 2560px) {
  :root { --header-h: 104px; --panel-w: clamp(620px, 22vw, 820px); --panel-gap: 40px; }

  header { padding: 0 48px; gap: 40px; }
  .brand strong { font-size: 26px; }
  .brand span { width: 48px; height: 48px; font-size: 15px; }
  header button { padding: 15px 22px; font-size: 21px; border-radius: 999px; }
  .lang select { padding: 13px 18px; font-size: 20px; }

  #panel { padding: 40px; border-radius: 28px; }
  #panel h1 { font-size: 50px; }
  #panel h2 { font-size: 34px; }
  #panel p, #panel .card strong { font-size: 22px; line-height: 1.5; }
  #panel .card small, #panel .spec small { font-size: 18px; }
  #panel .eyebrow { font-size: 15px; }
  .primary, .secondary { padding: 20px; font-size: 21px; border-radius: 16px; }
  .card { padding: 18px; border-radius: 18px; }

  #sceneTools button { padding: 14px 20px; font-size: 16px; }
  #feedbackBtn { padding: 14px 20px; font-size: 18px; }
  #feedbackBtn span { font-size: 18px; }
  .scene-note { max-width: min(700px, 60%); padding: 40px 46px; }
  .scene-note strong { font-size: 30px; }
  .scene-note small { font-size: 17px; }
}

/* --------------------------------------------------------- phone portrait */
/* creative-direction.css gives the phone header two rows and 94px, and sets
 * .shell to match. This file restates .shell in terms of the token, so the
 * token has to carry that 94 or the shell would start 26px above the content
 * it is supposed to sit under. */
@media (max-width: 720px) {
  :root { --header-h: 94px; --panel-gap: 8px; }
}

/* --------------------------------------------------------- short viewport */
/* A phone on its side is 390px tall with a 68px header — 17% of the screen
 * spent on navigation before anything is shown. Height, not width, is what is
 * scarce here, so this is keyed on height and deliberately overrides the phone
 * width rules below it in specificity terms by coming later in the file. */
@media (max-height: 500px) {
  :root { --header-h: 52px; --panel-gap: 10px; }

  header { height: var(--header-h); padding: 0 12px; gap: 12px; align-items: center; }
  .brand strong { display: none; }
  .brand span { width: 30px; height: 30px; }
  header button { padding: 6px 10px; font-size: 13px; }
  .lang select { padding: 5px 8px; font-size: 13px; }
  nav { position: static; margin: auto; gap: 2px; }

  /* Never the bottom sheet in landscape: a sheet plus a 52px header would
     leave the residence a letterbox. The panel keeps the side and scrolls. */
  #panel {
    position: absolute;
    top: var(--panel-gap); bottom: var(--panel-gap); right: var(--panel-gap); left: auto;
    width: min(340px, 42%); height: auto; max-height: none;
    padding: 14px 16px; border-radius: 16px;
  }
  /* #panel[data-sheet="half"] is (1,1,0) and would keep imposing a sheet
     height on a phone held sideways. Answered at the same specificity. */
  #panel[data-sheet] {
    height: auto; min-height: 0; max-height: none; overflow: auto;
  }
  #panel h1 { font-size: 22px; margin: 4px 0 8px; }
  #panel p { font-size: 13px; line-height: 1.4; }
  .sheet-handle { display: none; }

  #sceneTools { left: 12px; top: auto; bottom: 12px; }
  #feedbackBtn { top: auto; bottom: 12px; right: calc(min(340px, 42%) + 22px); }
}

/* ------------------------------------------------------------ phone chrome */
/* The collision this file was opened for. On a phone the sheet owns the bottom,
 * so #sceneTools moved to the top — and #feedbackBtn moved to the top too, 18px
 * below it, both over whatever the 3D viewer draws in its own top-left corner.
 * Three things in one strip, visibly overlapping.
 *
 * They now share one row, pinned to opposite edges, directly under the header:
 * the scene keeps its top-left corner for the viewer's own controls. */
@media (max-width: 720px) and (min-height: 501px) {
  #sceneTools {
    left: 12px; right: auto; top: 12px; bottom: auto;
    /* Reserve the right-hand end of the row for Feedback. The label is a full
       sentence and is translated into four languages, so the only safe
       assumption is that it is longer than it looks: bound it and let it
       truncate rather than trusting any particular string to fit. */
    max-width: calc(100% - 150px);
  }
  #sceneTools button {
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #feedbackBtn {
    left: auto; right: 12px; bottom: auto;
    top: calc(var(--header-h) + 12px);
    padding: 8px 12px;
  }
}