/* PSS Plasma — phone and touch layer.
 *
 * Three causes fixed in one place, so no component has to remember them:
 *   1. The floating column (WhatsApp, assistant, back-to-top) stacked off ONE floor
 *      variable instead of a hand-tuned bottom per button per context. Any page that
 *      adds a bottom bar raises --pss-fab-floor and the whole column moves with it.
 *   2. A 44px minimum on anything that is tapped, at coarse pointers only, so the
 *      desktop design is untouched.
 *   3. A 12px floor on body text and 16px on form controls at phone widths, so nothing
 *      is unreadable and iOS never zooms the page on focus.
 *
 * Guarded by tests/mobile/guard.py — new faults of these three kinds fail the suite.
 */

/* ---------- 1. the floating column ---------- */
:root{
  --pss-fab-floor:18px;   /* free space at the bottom of the screen; a bottom bar raises it */
  --pss-fab-s1:68px;      /* WhatsApp 58 + 10 gap */
  --pss-fab-s2:0px;       /* assistant 52 + 10 gap, only when it is on the page */
  --pss-fab-s3:42px;      /* back-to-top, the top of the column; height only, no gap above */
}
/* The sums are written out at each element on purpose: a custom property that refers to
   another is resolved where it is DEFINED, so deriving --pss-fab-2 on :root would freeze
   the floor at its :root value and ignore the per-context overrides below. */
body:has(.pss-ag-launch){--pss-fab-s2:62px}
body:not(:has(.pss-wa)){--pss-fab-s1:0px}
/* The has-mbar class is on <body> at every width; the bar itself only appears at 760px and
   under, so the space it needs is only reserved there -- otherwise the desktop reserves
   room for a bar that is not shown and stacks the buttons on top of each other. */
@media (max-width:760px){ body.has-mbar{--pss-fab-floor:84px;--pss-fab-s1:0px} }  /* the bar hides WhatsApp */
body:has(.pss-studio){--pss-fab-floor:18px}               /* desktop studio: no dock */
@media (max-width:860px){ body:has(.pss-studio){--pss-fab-floor:calc(var(--st-dock,90px) + 6px)} }  /* phone studio: clear .pss-st-mob */

.pss-wa{bottom:calc(var(--pss-fab-floor) + env(safe-area-inset-bottom))}
.pss-ag-launch{bottom:calc(var(--pss-fab-floor) + env(safe-area-inset-bottom) + var(--pss-fab-s1))}
.pss-totop{bottom:calc(var(--pss-fab-floor) + env(safe-area-inset-bottom) + var(--pss-fab-s1) + var(--pss-fab-s2))}
.pss-toasts{bottom:calc(var(--pss-fab-floor) + 16px)}

/* ---------- 2. tap targets ---------- */
@media (pointer:coarse){
  .pss-btn,.pss-tab,.pss-chip,.pss-st-link,.pss-map__open,.pss-feat__go,
  .pss-footer__keys,.pss-drawer-nav__line,.pss-nav__brand{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .pss-btn--block,.pss-drawer-nav__line{display:flex}
  .pss-nav__brand,.pss-feat__go,.pss-map__open,.pss-footer__keys,.pss-drawer-nav__line{justify-content:flex-start}
  .pss-iconbtn,.pss-navbtn,.pss-st-icon,.pss-burger,.pss-theme-toggle{min-width:44px;min-height:44px}
  .pss-jb-badge,.pss-chip--toggle{min-height:40px}
  summary,label[for]{min-height:44px;display:flex;align-items:center}
  .pss-st-qty button{min-width:40px;min-height:40px}
  /* link lists: block rows, so they can simply be tall enough */
  .pss-footer__links a,.pss-footer__contact a,.pss-band__contact a,.pss-contact__list a{
    min-height:44px;display:flex;align-items:center}
  /* links that run inline inside a sentence (breadcrumbs, the counties we cover) cannot be
     made tall without breaking the line, so they get a taller tap box through padding and
     the line is opened up to match */
  .pss-crumbs,.pss-footer__reach,.pss-footer__util{line-height:2.4}
  /* min-width as well as padding: the counties sit in a flex row, so a short name like
     "Kent" is only as wide as its text. */
  .pss-crumbs a,.pss-footer__reach a,.pss-footer__util a{display:inline-block;min-width:44px;padding:9px 8px;text-align:center}
  .pss-gl__az a{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- 3. readable text, no iOS zoom ---------- */
@media (max-width:860px){
  .pss-main small,.pss-footer small,.pss-main code,.pss-mat__name small,.pss-band__contact small,
  .pss-contact__list small,.pss-feat__tag,.pss-gl__cat,.pss-shape__c,.pss-nav__tag,
  .pss-budget__row .pss-field>span,.pss-pt-dhead__val small,.pss-pt-sheets figcaption{font-size:12px}
  /* !important because this is an accessibility floor, not a style: under 16px iOS zooms
     the whole page on focus and the person has to pinch back out. Component rules that
     set a smaller size are more specific and would otherwise win. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]),
  select,textarea{font-size:16px!important}
  /* One component compacts a nine-column row with its own !important; on a phone that row
     collapses to two columns, so the floor answers at the same weight rather than leaving
     a 14px field that makes iOS zoom. */
  .pss-budget__row input,.pss-budget__row select{font-size:16px!important}
}

/* ---------- 4. the phone nav fits the phone ---------- */
/* At 360px the bar wanted 366px: logo + search + language + accessibility + theme +
   Studio + burger. Below 700px the four secondary controls move into the drawer,
   where they get labels instead of icons, and the bar keeps logo / Studio / menu. */
@media (max-width:700px){
  .pss-nav__tools,.pss-theme-toggle{display:none}
}
.pss-drawer-nav__tools{display:grid;gap:2px;margin:6px 0}
.pss-drawer-nav__tool{width:100%;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;gap:10px}
.pss-drawer-nav__tool:hover,.pss-drawer-nav__tool:focus-visible{background:var(--surface-2)}
@media (min-width:701px){.pss-drawer-nav__tools{display:none}}

/* ---------- 5. the drawer is a modal ---------- */
/* It was z-index 600, under the mobile bar (720) and the assistant button (705), so both
   floated over the open menu and hid its last rows. The opacity needs !important because
   those buttons carry entrance animations, and an animated value outranks a normal
   declaration in the cascade however specific the selector is. */
.pss-drawer-nav{z-index:800}
body.pss-lock .pss-mbar,body.pss-lock .pss-wa,body.pss-lock .pss-ag-launch,body.pss-lock .pss-totop{
  opacity:0!important;pointer-events:none!important;
}
.pss-drawer-nav__panel{padding-bottom:calc(var(--pss-fab-floor) + 16px)}

/* ---------- 6. the end of the page clears the floating column ---------- */
/* At the bottom there is nowhere left to scroll, so whatever is still under the bar or the
   floating buttons is unreachable. The footer reserves the whole column, computed from the
   same variables that place it, so it stays right when a bar is added or removed. */
@media (max-width:860px){
  .pss-footer{padding-bottom:calc(var(--pss-fab-floor) + var(--pss-fab-s1) + var(--pss-fab-s2) + var(--pss-fab-s3) + 16px)}
}