/* Phones and tablets. The site is held in the hand here: everything a thumb has to hit is at least 44 px (32 px inside
   a viewer, where the model needs the room), fields are 16 px so iOS does not zoom into them, the keys rows become
   rows of touch chips (there is no keyboard), every viewer says how to handle it with fingers, hover states become
   press states, and nothing sits under the notch or the home indicator. Desktop is untouched: almost everything here
   is inside (pointer: coarse) or (hover: none). Loaded last. */

/* ---------- Safe areas (the page is laid out to the screen's edges: viewport-fit=cover) ---------- */
/* The gutter itself grows to clear the notch, so every layout that is measured from it (the content measure, the
   first screen, the studio) keeps its own width rule. */
:root { --gutter: max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right)); }
@media (min-width: 860px) { :root { --gutter: max(var(--space-8), env(safe-area-inset-left), env(safe-area-inset-right)); } }
.ftr { padding-bottom: max(var(--space-12), calc(var(--space-6) + env(safe-area-inset-bottom))); }
.reg__in { padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom)); }

/* ---------- The viewer hint, for the hand that is holding it ---------- */
.view-hint__t { display: none; }
@media (hover: none) {
  .view-hint { display: block; }
  .view-hint__p { display: none; }
  .view-hint__t { display: inline; }
}

/* ---------- Coarse pointers: a finger, not a cursor ---------- */
@media (pointer: coarse) {
  html { -webkit-tap-highlight-color: transparent; }
  a, button, summary, label, select, input { touch-action: manipulation; }

  /* The header and the footer */
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .lang { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; }
  .lang::after { bottom: var(--space-1); }
  .hdr__cta, .reg-btn { min-height: 44px; }
  .nav { gap: var(--space-2); }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-2); }
  .nav a::after { bottom: var(--space-1); inset-inline: var(--space-2); }
  .reg-btn { width: 44px; height: 44px; }
  .ftr__nav { gap: 0 var(--space-2); }
  .ftr__nav > a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-2); }
  .ftr__nav > a::after { bottom: var(--space-1); }
  .zc__link { padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }

  /* Buttons */
  .ei-btn { min-height: 44px; box-sizing: border-box; }
  .ei-btn .ei-kbd { display: none; }

  /* Fields: 16 px, so iOS never zooms the page into one, and tall enough to hit */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select { min-height: 44px; box-sizing: border-box; }
  input:is([type="checkbox"], [type="radio"]):not(.seg__o input) { inline-size: var(--space-6); block-size: var(--space-6); accent-color: var(--ice-ink); }
  .seg__o span { padding-block: var(--space-3); }
  summary { min-height: 44px; display: flex; align-items: center; gap: var(--space-2); }
  summary::before { content: '▸'; transition: rotate var(--dur-tick) var(--ease-instrument); }
  details[open] > summary::before { rotate: 90deg; }
  summary::-webkit-details-marker { display: none; }
  summary { list-style: none; }

  /* Sliders: a track you can find and a thumb you can hold */
  input[type="range"] { height: 44px !important; }
  input[type="range"]::-webkit-slider-thumb { width: 24px !important; height: 24px !important; margin-top: -11.25px !important; }
  input[type="range"]::-moz-range-thumb { width: 24px !important; height: 24px !important; }
  .ctl { row-gap: 0; }
  .ctl kbd { display: none; }
  .ctl__seg button { box-sizing: border-box; display: inline-grid; place-items: center; min-height: 40px; }
  .ctl__btn { box-sizing: border-box; min-height: 40px; }
  .au-cn a { display: inline-block; padding-block: var(--space-2); }

  /* The viewer's own toolbar: 32 px keys inside the model, so the model keeps the room */
  .tools .ctl__seg--v button { box-sizing: border-box; display: grid; place-items: center; min-height: 32px; min-width: 44px; }
  .tools [data-zoom] { min-height: 36px; font-size: 18px; }
  .tools__measure { min-width: 44px; min-height: 40px; }

  /* The keys rows become rows of touch chips: there is no keyboard, and every key is a thing to do */
  .keys { flex-wrap: nowrap; gap: var(--space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--space-4); -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--space-3), #000 calc(100% - var(--space-8)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--space-3), #000 calc(100% - var(--space-8)), transparent); }
  [dir="rtl"] .keys { -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--space-3), #000 calc(100% - var(--space-8)), transparent); mask-image: linear-gradient(to left, transparent, #000 var(--space-3), #000 calc(100% - var(--space-8)), transparent); }
  .keys::-webkit-scrollbar { display: none; }
  .keys button { flex: none; box-sizing: border-box; min-height: 40px; padding: 0 var(--space-4); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-2); background: var(--surface-100); color: var(--ink); white-space: nowrap; scroll-snap-align: start; }
  .keys button:active { background: var(--surface-200); }
  .keys button[aria-pressed="true"] { border-color: var(--ice-ink); background: var(--ice-tint); color: var(--ice-ink); }
  .keys button.is-off { border-color: var(--line); }
  .keys kbd { display: none; }
  .keys__note { display: none; }   /* a file is dropped with a mouse; on a touch screen the Open buttons do it */
  .keys::after { content: ''; flex: none; width: var(--space-4); }

  /* Links that stand on their own in lists, and citation marks: a target, not a word */
  main :is(li, dd) > a:only-child, main :is(li, dd) > a:first-child:last-of-type { display: inline-block; padding-block: var(--space-2); }
  .cite { display: inline-block; padding: var(--space-2) var(--space-1); margin: calc(-1 * var(--space-2)) 0; }
}

/* ---------- No hover: the pointed-at states become pressed states ---------- */
@media (hover: none) {
  :is(.card--link, .tc, .report-card):active { outline: var(--stroke-hair) dashed var(--ice-ink); outline-offset: calc(-1 * var(--stroke-hair)); }
  :is(.card--link, .tc, .report-card):active .tm-grip { scale: 1; transition-delay: 0s; }
  :is(.card--link, .tc, .report-card):hover:not(:active) { outline: none; }
  :is(.card--link, .tc, .report-card):hover:not(:active):not(:focus-visible) .tm-grip { scale: 0; }
  .tc:hover .tc__fig img { transform: none; }
}

/* ---------- Narrow screens: the findings lists fit the hand ---------- */
@media (max-width: 599px) {
  .xp__table { table-layout: fixed; width: 100%; }
  .xp__table :is(th, td) { padding: var(--space-2); overflow-wrap: anywhere; }
  .xp__table :is(th, td):first-child { width: calc(var(--space-16) + var(--space-3)); padding-inline-start: var(--space-3); }
  .xp__table td.ei-id { font-size: 12px; }
  .xp__table :is(th, td).ei-num { width: 6em; }
  /* The clash list's state: its dot, still read as its word */
  .xp__table :is(th, td):nth-child(4) { width: var(--space-8); padding-inline: 0; text-align: center; }
  .xp__table th:nth-child(4), .xp__table td:nth-child(4) .ei-chip { font-size: 0; letter-spacing: 0; }
  .xp__table td:nth-child(4) .ei-chip { padding: var(--space-1); background: none; gap: 0; }
  .xp__table td:nth-child(4) .ei-chip::before { width: var(--space-2); height: var(--space-2); }
  /* The audit's category: a narrow column that wraps */
  .xp__table :is(th, td):nth-child(3):last-child { width: 6.5em; font-size: 13px; }
}

/* ---------- Plan to picture on a phone: a taller frame, so the plan, the model and the picture are a third larger.
   The picture covers the frame by its height and the camera keeps its vertical angle, so they stay registered. ---------- */
@media (max-width: 599px) {
  .st-view { aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) {
  /* Room names on the drawn plan: in two short lines, without their areas (the plan's total stands beside it) */
  .st-room b { font-size: 11px; line-height: 1.1; white-space: normal; max-width: 7.5ch; }
  .st-room span { display: none; }
  /* The three small rooms by the stair take a smaller name, word under word */
  .st-room:is(.st-room--wc, .st-room--store, .st-room--stair) b { font-size: 10px; max-width: 4ch; }
}
@media (max-width: 599px) {
  /* Sun on the plot: a square view on a phone, so the sun-path dial and the view's controls each have their corner */
  .su-view { aspect-ratio: 1; }
}

/* ---------- The narrowest phones: the header keeps the wordmark, the one call to action and the register; the
   language switch moves into the register, which carries it on every phone ---------- */
@media (max-width: 380px) {
  .hdr .lang { display: none; }
  .hdr__end { gap: var(--space-2); }
}