/* Tuqqa responsive layer.

   Everything that makes the site work on a phone, a tablet and a desktop
   lives here, and nothing here edits a base stylesheet. This file is linked
   LAST on every page that has its own <head>, so it settles the cascade.

   Two kinds of rule live here, and the difference matters:

   1. Name-independent rules. These match on structure, never on a class name,
      so renaming anything in the base CSS or the markup cannot break them.
      Prefer these — they are the reason this file does not rot.

   2. Component rules, which do name a class. Unavoidable for things like a
      specific button's tap area. Every selector in that section is checked by
      tests/Feature/ResponsiveLayerTest.php: if a class is renamed and a
      selector here stops matching anything, that test fails by name rather
      than the layout silently breaking on phones.

   Zero specificity is deliberate. `:where(...)` contributes nothing to
   specificity, so these are floors that any real rule in a base stylesheet
   overrides without needing !important. */

/* ==========================================================================
   1. Name-independent
   ========================================================================== */

/* A grid or flex child's automatic minimum size is its own content, so a wide
   table, a long word or a full-width carousel slide makes its column wider
   than the device — and because html/body clip horizontally, the overflow is
   not scrollable, it is invisible. Rows simply get cut off.

   This puts the floor at 0 for every element at zero specificity, which lets
   one-column layouts actually be one column. Anything that genuinely needs a
   minimum still declares one (`.table{min-width:860px}`, `.hc-ask>div
   {min-width:260px}`) and wins, because any real selector beats :where(). */
:where(body *) { min-width: 0 }

/* Media never pushes its container wider than the screen. Base rules that set
   an explicit width still win. */
:where(img, video, canvas, svg, iframe) { max-width: 100% }

/* A wide table belongs in a scroll region of its own rather than stretching
   the page. Only applies where the base CSS has not already said otherwise. */
:where(.table-wrap, .tblwrap) { overflow-x: auto; -webkit-overflow-scrolling: touch }

@media (max-width: 640px) {
  :where(table.table, table.tbl, table.neg-table) th { padding: 10px }
  :where(table.table, table.tbl, table.neg-table) td { height: 58px; padding: 12px 10px }
  :where(table.table, table.tbl, table.neg-table) th:first-child,
  :where(table.table, table.tbl, table.neg-table) td:first-child { padding-inline-start: 12px }
  :where(table.table, table.tbl, table.neg-table) th:last-child,
  :where(table.table, table.tbl, table.neg-table) td:last-child { padding-inline-end: 12px }
}

/* ==========================================================================
   2. Component rules
   Every selector below names a class. The guard test finds them by that fact
   alone — anything without :where() has to still match something real — so
   renaming a class in a base stylesheet fails that test by name.
   ========================================================================== */

/* Storefront app chrome exists in the shared layout but only becomes part of
   the interface on a phone. Keeping the desktop header as the single source
   of its actions avoids two competing navigation systems at wider sizes. */
.mobile-menu-toggle, .hicons .mobile-header-only, .mobile-app-nav, .shop-mobile-filter-toggle { display: none }
:where(.mobile-specification-title) { display: none }
.mobile-nav-layer[hidden], .mobile-nav-panel[hidden] { display: none }

/* Touch targets. The visual size stays exactly as designed; only the area the
   finger has to hit grows, via a transparent pseudo-element. */

/* Header icons lose their text labels under 860px, leaving a 21px target. */
@media (max-width: 860px) {
  .hicons .ic { position: relative }
  .hicons .ic::after { content: ""; position: absolute; inset: -9px -4px }
}

/* The trust strip is a compact card group, not five loose floating items. */
@media (min-width: 761px) and (max-width: 1400px) {
  .trust .wrap { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .trust .t { grid-column: span 2 }
  .trust .t:nth-last-child(2) { grid-column: 2 / span 2 }
}

@media (min-width: 601px) and (max-width: 760px) {
  .trust .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .trust .t:last-child { grid-column: 1 / -1 }
}

@media (max-width: 600px) {
  .trust { padding-block: 14px }
  .trust .wrap { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-inline: 14px }
  .trust .t { min-height: 0; padding: 12px }
}

/* The header notification panel hangs off its icon on a wide screen; on a
   phone the icon sits near the edge, so the panel spans the header instead. */
@media (max-width: 620px) {
  header.main .wrap { position: relative }
  .site-bell { position: static }
  .site-bell-panel { top: calc(100% + 6px); inset-inline: 10px; width: auto }
}

/* The storefront becomes a small app shell on phones: three utility actions
   stay in the top bar, five destinations stay reachable by one thumb at the
   bottom, and the long menu/category trees move into one accessible drawer. */
@media (max-width: 680px) {
  .has-mobile-app-shell { padding-bottom: calc(74px + env(safe-area-inset-bottom)) }
  :where(body.mobile-nav-open) { overflow: hidden }

  .topbar, nav.cats { display: none }
  header.main { z-index: 100; box-shadow: 0 4px 18px rgba(12, 59, 104, .08) }
  header.main .wrap { display: grid; grid-template-columns: 44px minmax(104px, 1fr) auto; min-height: 66px; height: auto; gap: 8px; padding-block: 7px }
  header.main .logo { grid-column: 2; grid-row: 1; justify-self: center }
  header.main .brand-logo-header { width: 132px; height: 50px }
  header.main .langsel { display: none }

  .mobile-menu-toggle { grid-column: 1; grid-row: 1; align-self: center; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 0; background: transparent; color: var(--blue2); cursor: pointer }
  .mobile-menu-toggle svg { width: 25px; height: 25px }
  .mobile-menu-toggle:focus-visible, .mobile-search-toggle:focus-visible { outline: 3px solid rgba(28, 122, 196, .25); outline-offset: 2px }

  header.main .hicons { grid-column: 3; grid-row: 1; justify-self: end; display: flex; gap: 3px }
  .hicons .header-shop, .hicons .header-compare, .hicons .header-basket, .hicons .header-account { display: none }
  .hicons .header-saved, .hicons .site-bell, .hicons .mobile-header-only { display: flex }
  .hicons .site-bell { order: 1 }
  .hicons .header-saved { order: 2 }
  .hicons .mobile-search-toggle { order: 3 }
  .hicons .ic, .site-bell > button.ic { justify-content: center; width: 39px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--navy) }
  .hicons .ic span:not(.ic-badge), .site-bell > button.ic span:not(.ic-badge) { display: none }
  .hicons .ic .ici, .site-bell > button.ic .ici { width: 23px; height: 23px }
  .hicons .ic-badge { top: 2px; inset-inline-end: 0; right: auto; min-width: 16px }
  .hicons .mobile-search-toggle { font: inherit; cursor: pointer }

  header.main .search { display: var(--mobile-search-display, none); grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; margin: 2px 0 3px; box-shadow: 0 5px 18px rgba(12, 59, 104, .08) }
  header.main .search input { min-width: 0; padding: 11px 12px; font-size: 16px }
  header.main .search button { min-width: 48px; padding-inline: 13px }
  .site-bell-panel { top: calc(100% + 7px); inset-inline: 7px; width: auto; max-height: min(430px, calc(100dvh - 156px)); border-radius: 14px }

  .mobile-nav-layer { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: minmax(0, 420px) 1fr }
  .mobile-nav-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(5, 25, 44, .56); backdrop-filter: blur(3px); cursor: pointer }
  .mobile-nav-drawer { position: relative; z-index: 1; grid-column: 1; width: min(92vw, 420px); height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--ink); box-shadow: 18px 0 55px rgba(4, 29, 51, .24); outline: 0 }
  .mobile-nav-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 82px; padding: calc(13px + env(safe-area-inset-top)) 18px 13px; background: linear-gradient(125deg, var(--navy), #125e96); color: #fff }
  .mobile-nav-head span { display: block; margin-bottom: 2px; color: #bcd8ef; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase }
  .mobile-nav-head strong { display: block; font-size: 18px; line-height: 1.25 }
  .mobile-nav-head button { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer }
  .mobile-nav-head button svg { width: 22px; height: 22px }
  .mobile-nav-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); background: #fff }
  .mobile-nav-tabs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 57px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 750; cursor: pointer }
  .mobile-nav-tabs button svg { width: 19px; height: 19px }
  .mobile-nav-tabs button[aria-selected="true"] { color: var(--blue2) }
  .mobile-nav-tabs button[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 18px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--blue) }
  .mobile-nav-body { flex: 1; overflow: hidden; background: #f7f9fc }
  .mobile-nav-panel { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px calc(26px + env(safe-area-inset-bottom)) }
  .mobile-menu-links { display: grid; gap: 7px }
  .mobile-menu-links a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 56px; padding: 9px 13px; border: 1px solid #e2e9f0; border-radius: 13px; background: #fff; color: #2d4153; font-size: 14px; font-weight: 650; box-shadow: 0 3px 10px rgba(12, 59, 104, .035) }
  .mobile-menu-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--sky); color: var(--blue2) }
  .mobile-menu-icon svg { width: 20px; height: 20px }
  .mobile-menu-label { min-width: 0 }
  .mobile-menu-links a b { color: #8aa0b2; font-size: 21px; font-weight: 400 }
  .mobile-menu-links a.is-current { border-color: #b9d7ee; background: #edf6fc; color: var(--blue2) }
  .mobile-language-picker { margin-top: 18px; padding: 14px; border: 1px solid #e0e8ef; border-radius: 14px; background: #fff }
  .mobile-language-picker > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase }
  .mobile-language-picker > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px }
  .mobile-language-picker form { margin: 0 }
  .mobile-language-picker :is(button, a) { display: grid; place-items: center; text-decoration: none; width: 100%; min-height: 38px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafc; color: var(--ink); font: inherit; font-size: 11.5px; cursor: pointer }
  .mobile-language-picker :is(button, a).is-current { border-color: var(--blue); background: var(--blue); color: #fff; font-weight: 750 }

  .mobile-category-all { display: flex; align-items: center; justify-content: space-between; min-height: 50px; margin-bottom: 10px; padding: 11px 14px; border-radius: 13px; background: linear-gradient(120deg, var(--navy), #155f99); color: #fff; font-size: 13.5px; font-weight: 750 }
  .mobile-category-list { display: grid; gap: 8px }
  .mobile-category-list details { overflow: hidden; border: 1px solid #dfe7ef; border-radius: 14px; background: #fff }
  .mobile-category-list summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 10px; min-height: 62px; padding: 9px 13px; cursor: pointer; list-style: none }
  .mobile-category-list summary > span:nth-child(2) { min-width: 0 }
  .mobile-category-list summary b { display: block; color: var(--navy); font-size: 14px; line-height: 1.3 }
  .mobile-category-list summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px }
  .mobile-category-list summary > svg { width: 18px; height: 18px; color: #75899b; transition: transform .18s }
  .mobile-category-children { display: grid; gap: 1px; padding: 3px 12px 12px 62px; border-top: 1px solid #edf1f5 }
  .mobile-category-children a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 7px 4px; border-bottom: 1px solid #eef2f5; color: #40566a; font-size: 12.5px }
  .mobile-category-children a:first-child { display: block; color: var(--blue2); font-weight: 750 }
  .mobile-category-children a:last-child { border-bottom: 0 }
  .mobile-app-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: calc(66px + env(safe-area-inset-bottom)); padding: 5px 5px env(safe-area-inset-bottom); border-top: 1px solid #dce5ed; background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px rgba(12, 59, 104, .1); backdrop-filter: blur(12px) }
  .mobile-app-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 4px 2px; border-radius: 12px; color: var(--blue2); font-size: 10.5px; font-weight: 650; line-height: 1.2 }
  .mobile-app-nav a svg { width: 23px; height: 23px }
  .mobile-app-nav a.is-current { background: #edf6fc; color: var(--blue2) }
  .mobile-app-nav a.is-current::before { content: ""; position: absolute; top: 0; width: 25px; height: 3px; border-radius: 0 0 4px 4px; background: var(--orange) }
  .mobile-app-badge { position: absolute; top: 2px; inset-inline-start: calc(50% + 8px); display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #fff; border-radius: 10px; background: var(--orange); color: #fff; font-size: 9px; line-height: 1 }

  .has-mobile-app-shell .help-launch { right: auto; inset-inline-end: 14px; bottom: calc(var(--help-launch-lift, 86px) + env(safe-area-inset-bottom)); width: 50px; height: 50px }
  .has-mobile-app-shell .help-panel { bottom: calc(150px + env(safe-area-inset-bottom)); height: min(520px, calc(100dvh - 234px)) }
  .hp-nudge { display: none !important }
  .totop { inset-inline-end: 14px; right: auto; bottom: calc(146px + env(safe-area-inset-bottom)) }
  .cookie-consent { bottom: calc(78px + env(safe-area-inset-bottom)) }

  .shop-mobile-filter-toggle { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 54px; padding: 9px 13px; border: 1px solid #d8e3ec; border-radius: 12px; background: #fff; color: var(--blue2); font: inherit; text-align: start; box-shadow: 0 4px 14px rgba(12, 59, 104, .06); cursor: pointer }
  .shop-mobile-filter-toggle > svg:first-child { flex: none; width: 23px; height: 23px }
  .shop-mobile-filter-toggle > span { flex: 1; display: grid; gap: 1px }
  .shop-mobile-filter-toggle b { font-size: 13.5px }
  .shop-mobile-filter-toggle small { color: var(--muted); font-size: 11px }
  .shop-mobile-filter-chevron { flex: none; width: 18px; height: 18px; transition: transform .18s }
  .shop-mobile-filter-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 6px; border-radius: 12px; background: var(--orange); color: #fff; font-size: 11px }
  .shop-lay > .filters { display: none; max-height: min(70dvh, 620px); overflow-y: auto; margin-top: -26px; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 10px 25px rgba(12, 59, 104, .08) }
  .shop-top { align-items: flex-start }

  :where(body.mobile-product-sequenced) .product-specifications-tab { display: none }
  :where(body.mobile-product-sequenced) .product-specifications-pane { display: block; margin: 4px 0 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff }
  :where(body.mobile-product-sequenced) .mobile-specification-title { display: block; margin: 0 0 10px; color: var(--navy); font-size: 16px }
  :where(body.mobile-product-sequenced) .product-specifications-pane ul { margin: 0; padding-inline-start: 20px }
  :where(body.mobile-product-sequenced) .pd-gallery > .pd-info { margin-top: 24px }
}

/* Hero carousel dots are 9px by design. The gap is 8px, so 4px a side meets
   exactly and no dot steals its neighbour's taps. */
.hdots button { position: relative }
.hdots button::after { content: ""; position: absolute; inset: -12px -4px }

/* Help Center: two large buttons will not sit side by side on a small phone.
   The base markup sets flex:none inline, so this has to out-rank it. */
@media (max-width: 620px) {
  .hc-ask .hc-ask-cta { flex: 1 1 100% !important; width: 100% }
  .hc-ask .hc-ask-cta .btn { flex: 1 1 100%; justify-content: center }
}

/* Product gallery: a thumbnail column beside the main image leaves a phone's
   image too narrow, so there the thumbnails drop to a swipeable row under it. */
@media (max-width: 620px) {
  .pd-stage.has-thumbs { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .pd-stage.has-thumbs .main { grid-column: 1; grid-row: 1 }
  .pd-stage.has-thumbs .thumbs { grid-column: 1; grid-row: 2; flex-direction: row; height: auto; min-height: 0; overflow-x: auto; overflow-y: hidden }
  .product-media-disclaimer { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 15px 14px; padding-inline-start: 11px; border-inline-start-width: 5px; font-size: 13px; line-height: 1.6 }
  .product-media-disclaimer svg { width: 26px; height: 26px }
}

/* Basket lines: a photo, the details and the line total side by side leave the
   details about 150px on a phone — too narrow for a quantity box and two
   buttons, which then overlap. So on a phone the photo shrinks, the total
   moves up beside the title's line of sight (under the details), and the
   actions take the whole width, the two buttons sharing a row. The base
   markup sets these with inline styles, so they have to out-rank it. */
@media (max-width: 620px) {
  .cart-line { flex-wrap: wrap !important; gap: 12px !important }
  .cart-line > .rel-img { width: 64px !important; height: 64px !important; font-size: 26px !important }
  .cart-line > .cart-line-body { flex: 1 1 calc(100% - 76px) !important }
  .cart-line > .cart-line-total { flex: 1 1 100% !important; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-align: start !important; padding-top: 10px; border-top: 1px dashed var(--line) }
  .cart-line .cart-line-total .cart-remove-form { margin: 0 }
  .cart-actions, .cart-qty-form { width: 100% }
  /* Update sits with the quantity it saves; Make an offer, the main action,
     gets a full row of its own so its label and handshake never collide. */
  .cart-qty-form input[name="quantity"] { flex: 1 1 80px; width: auto !important; order: 1 }
  .cart-qty-form .btn-ghost { flex: none; order: 2 }
  .cart-qty-form .cart-offer { flex: 1 1 100%; order: 3; justify-content: center }
}

/* Sample quantities keep the variant name readable while the label and field
   share a compact second row on a phone. */
@media (max-width: 620px) {
  .sample-quantity-row { grid-template-columns: minmax(0, 1fr) 100px }
  .sample-quantity-row > div { grid-column: 1 / -1 }
}
@media (max-width: 820px) {
  .listing-bulk-card { grid-template-columns: minmax(0, 1fr); gap: 18px }
  .listing-bulk-actions { padding-inline-start: 0; padding-top: 18px; border-inline-start: 0; border-top: 1px solid var(--line) }
  .listing-tax-mode { align-items: flex-start; flex-direction: column; gap: 12px }
}
@media (max-width: 900px) {
  footer .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 560px) {
  footer .fgrid { grid-template-columns: minmax(0, 1fr) }
  .footer-legal-line { align-items: center }
  .footer-legal-links { align-items: center }
}
@media (max-width: 520px) {
  .listing-bulk-steps { display: grid }
  .listing-export-actions { grid-template-columns: minmax(0, 1fr) }
}
@media(max-width:760px){
  .policy-page{padding:20px 10px 40px}.policy-paper{padding:20px 18px 28px;border-radius:16px}.policy-page-header{margin-bottom:28px;padding-bottom:24px}.policy-page-toolbar{grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px}.policy-page-logo{grid-column:1;grid-row:1}.policy-back-button{grid-column:1;grid-row:2;justify-self:center}.policy-download-button{grid-column:1;grid-row:3;justify-self:center}.policy-title-block{margin-top:18px}.policy-paper h1{font-size:28px}.policy-paper>.policy-content{font-size:15px;line-height:1.72}.policy-support-card{grid-template-columns:auto minmax(0,1fr);padding:18px;gap:14px;margin-top:32px}.policy-support-button{grid-column:1/-1;width:100%}
  .policy-modal{padding:0}.policy-modal-panel{width:100%;height:100%;max-height:none;border-radius:0}.policy-modal-head{padding:14px}.policy-modal-head h2{font-size:17px}.policy-modal-scroll{padding:22px 18px}.policy-modal-foot{padding:12px 16px}
  .cookie-consent{left:10px;right:10px;bottom:10px;grid-template-columns:auto 1fr;padding:15px}.cookie-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.cookie-actions .btn{width:100%}
}

/* Email delivery steps stack their button under the explanation on narrow admin screens. */
@media (max-width: 700px) {
  .mail-step { align-items: stretch; flex-direction: column }
  .mail-step .btn { width: 100% }
}

@media (max-width: 680px) {
  /* The sticky offer bar is shown by app.js; :where keeps these zero-specificity
     so the base rule in app.css and these settle by order alone. */
  :where(.pd-sticky-cta:not([hidden])) { position: fixed; inset-inline: 0; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 89; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid #dce5ee; background: #fff; box-shadow: 0 -6px 18px rgba(12, 40, 70, .08) }
  :where(.pd-sticky-price) b { font-size: 18px; color: var(--navy) }
  :where(.pd-sticky-price) span { margin-inline-start: 4px; font-size: 12px }
  :where(.pd-sticky-cta) .btn { min-height: 44px; padding-inline: 18px; white-space: nowrap }
}

/* Featured products wheel (css/featured-wheel.css): the header stacks on a phone.
   :where() keeps these at the base rules' specificity, so order settles it. */
@media (max-width: 680px) {
  :where(.wrap) > .fwheel { padding: 18px 12px 14px; border-radius: 16px }
  :where(.fwheel) .fwheel-title { font-size: 20px }
  :where(.fwheel) .fwheel-sub { font-size: 13px }
  :where(.fwheel) .fwheel-ctrl { width: 100%; justify-content: space-between }
}

/* ==========================================================================
   Dashboards on a phone (buyer, seller, console, inspector)
   The sidebar is the shared drawer in dashboard-chrome.css; these keep forms,
   search boxes, dialogs and the chat button inside the screen.
   ========================================================================== */
@media(max-width:900px){
  .sku-search{width:100%}
  .sku-search .field-search{flex:1 1 100%;min-width:0}
  .sku-search .field-sku input{width:100%}
  .field-search input{max-width:100%}
  .page-head,.pagehead{flex-wrap:wrap;gap:10px}
  .page-head .btn,.pagehead .btn{max-width:100%}
  input,select,textarea{max-width:100%}
}
@media(max-width:640px){
  /* 16px stops iOS zooming the page when a field gets focus. */
  .main input:not([type=checkbox]):not([type=radio]):not([type=file]),.main select,.main textarea,.modal input:not([type=checkbox]):not([type=radio]):not([type=file]),.modal select,.modal textarea{font-size:16px}
  .modal{align-items:flex-end;padding:0}
  .modal-card,.modal-card.wide{width:100%;max-width:100%;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);border-radius:18px 18px 0 0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .modal-card .modal-head{position:sticky;top:0;z-index:3;background:#fff}
  .modal-card .modal-foot{position:sticky;bottom:0;z-index:3;background:#fff;padding-bottom:max(13px,env(safe-area-inset-bottom))}
  .modal-foot .btn{flex:1 1 140px;justify-content:center;text-align:center}
}
/* A dialog always sits above the chat button; the button never hides the last rows of a page. */
.modal{z-index:120}
@media(max-width:640px){
  .content{padding-bottom:96px}
  .help-launch{right:14px;bottom:14px;width:52px;height:52px;font-size:22px}
  .help-panel{right:8px;left:8px;bottom:76px;width:auto;max-width:none}
  .hp-nudge{display:none}
}
/* A pinned Actions column would cover half of a phone's width; let it scroll with the rest. */
@media(max-width:640px){
  table.sticky-end th:last-child,table.sticky-end td:last-child{position:static;box-shadow:none}
}
/* The page behind an open menu or dialog stays put while a finger moves over it. */
@media(max-width:900px){
  :where(html:has(.side.open), html:has(.modal.on)) { overflow: hidden }
}