/* ============================================================
   MOBILE.CSS — the phone + tablet layer for the whole site
   ------------------------------------------------------------
   Added 2026-08-21. Loaded LAST on every page so it wins the
   cascade over nav.css / styles.css / crm.css / admin.css.

   THE ONE RULE FOR THIS FILE: every declaration lives inside a
   `max-width` media query. Nothing here may change the desktop
   rendering — that was the explicit ask. If you need a change
   that applies at every width, it does not belong in this file.

   Breakpoints used here
     <= 1366px  TOUCH ONLY — wide tables get a real horizontal
                scroller (an iPad Pro in landscape still shows a
                1015px table in a ~940px pane)
     <= 1024px  TOUCH ONLY — trims the portal chrome for tablets
     <=  900px  the public off-canvas nav exists from here down
     <=  767px  PHONE / SMALL TABLET — portal switches to drawer
                mode, tables become cards, modals become sheets
     <=  480px  small phone — tighter padding, smaller headings

   The two touch-only bands are qualified with `(pointer: coarse)`
   so that narrowing a desktop browser window never changes it.

   Why 767 and not 640 (the old breakpoint): at 641-767px the
   sidebar was still a 200px column beside a ~500px pane, and
   BELOW 560px `crm.css` had `.crm-sidebar{display:none}` with no
   replacement — the portals had no navigation at all on a phone.
   ============================================================ */


/* ============================================================
   0. ELEMENTS THIS FILE INTRODUCES
   ------------------------------------------------------------
   The only unconditional rules in the file, and they only hide
   nodes that mobile.js adds and that no desktop layout has ever
   contained — so the desktop rendering is still untouched. They
   must sit outside a media query: mobile.js builds the drawer
   once, at any width, and without this the drawer's header would
   paint inside the sidebar on a 1440px screen.
   ============================================================ */
.csa-drawer-head { display: none; }


/* ============================================================
   1. TABLET LANDSCAPE  (<= 1024px, touch only)
   ------------------------------------------------------------
   `pointer: coarse` deliberately: a 1024px-wide *desktop* window
   is still the desktop and must not change. This is for an iPad
   in landscape, where the 240px sidebar costs real work area.
   ============================================================ */
@media (max-width: 1024px) and (pointer: coarse) {
  :root { --crm-sidebar-w: 210px; }
  .content { padding: 22px 20px; }
  .crm-topbar { padding: 0 14px; gap: 10px; }
  .crm-search-bar { max-width: 420px; }
  /* Sidebar rows sized for a fingertip rather than a cursor. */
  .crm-sidebar .crm-sub-link { min-height: 40px; }
  .crm-nav-section-btn { min-height: 40px; }
  .btn-sm, .btn-ghost { min-height: 38px; }

  /* iPadOS Safari zooms on focus below 16px exactly like the
     iPhone does, and it does not zoom back out. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="month"], input:not([type]),
  select, textarea { font-size: 16px !important; }

  button, [role="button"], a, input, select, textarea, label {
    touch-action: manipulation;
  }
}


/* ============================================================
   2. ROOT OVERFLOW  (<= 900px)
   ------------------------------------------------------------
   From 900px down, nav.css parks `.main-nav` off-canvas at
   translateX(100%) — a fixed box sitting at x 390-722 on a phone.
   On the public pages `body{overflow-x:hidden}` masked it, but on
   every employee page the shell sets `body{overflow:hidden}` and
   the document genuinely scrolled 332px sideways into dead space.
   `clip` (not `hidden`) because it does not create a scroll
   container, so it cannot break position:sticky inside the app.
   ============================================================ */
@media (max-width: 900px) {
  html { overflow-x: clip; }
  body { overflow-x: clip; }

  /* The drawer is only reachable when open — keep it out of the
     tab order and off the a11y tree until then. */
  .main-nav:not(.open) { visibility: hidden; }
  .main-nav.open { visibility: visible; }

  /* Homepage "Let's Discuss Your Next Project" cards. `repeat(3,
     1fr)` floors each track at min-content, so on an iPad the
     three tracks resolved to 135/268/350px and the Follow Us card
     hung 5px past the container. minmax(0,1fr) lets them shrink. */
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-card { min-width: 0; }
  .social-links { flex-wrap: wrap; }
}


/* ============================================================
   3. PORTAL SHELL  (<= 767px)
   Employee + My Account pages: header/topbar/sidebar/content.
   ============================================================ */
@media (max-width: 767px) {

  /* ── 3a. Chrome height ──────────────────────────────────────
     140px of fixed chrome (80 header + 60 topbar) ate a sixth of
     an iPhone screen. Scoped with :has() so ONLY portal pages
     shrink; public pages keep the 80px header. Browsers without
     :has() simply keep the current height. */
  body:has(.crm-topbar) .site-header { height: 56px; }
  body:has(.crm-topbar) .site-header .header-inner { height: 56px; padding: 0 14px; }
  body:has(.crm-topbar) .site-header .logo img { height: 30px; }
  body:has(.crm-topbar) .main-nav { padding-top: calc(56px + 20px); }

  .crm-topbar {
    height: 52px;
    padding: 0 8px;
    gap: 8px;
  }
  .crm-topbar-brand { font-size: 14px; gap: 6px; min-height: 44px; }
  .crm-topbar-brand .crm-tag { font-size: 12px; padding: 3px 8px; }
  .crm-topbar-user { gap: 6px; }
  .crm-topbar-user .user-name { display: none; }
  .crm-role-badge { display: none; }

  /* Search collapses to an icon-width field that expands on focus;
     at 390px a full search box left no room for the tag + sign-out. */
  .crm-search-wrap { flex: 1 1 auto; min-width: 0; max-width: none; }
  .crm-search-input { font-size: 16px; padding: 8px 10px 8px 34px; }
  .crm-search-icon { left: 10px; }
  .crm-search-results { max-height: 60vh; }

  /* ── 3b. The sidebar becomes a real drawer ──────────────────
     crm.css hid it outright below 560px; this brings it back as
     an overlay panel that mobile.js can open. */
  .crm-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 320px) !important;
    max-width: 320px;
    z-index: 2600;
    padding: 0 8px 24px;
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--bg-1, #111118);
    border-right: 1px solid var(--border, rgba(255,255,255,.08));
    box-shadow: 8px 0 34px rgba(0, 0, 0, .5);
  }
  .crm-sidebar.drawer-open { transform: translateX(0); }
  html.csa-drawer-open, html.csa-drawer-open body { overflow: hidden; }

  /* Header injected into the drawer by mobile.js (hidden at every
     other width by the base rule in section 0). */
  .csa-drawer-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 0 -8px 8px; padding: 12px 14px;
    background: var(--bg-1, #111118);
    border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  }
  .csa-drawer-title {
    font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--accent-light, #8fbdd4);
  }
  .csa-drawer-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -8px -10px -8px 0;
    border: 0; background: none; border-radius: 10px;
    color: var(--text-dim, #a0a8b4); cursor: pointer;
  }
  .csa-drawer-close:active { background: rgba(255,255,255,.06); }

  /* Sidebar rows: finger-sized, not mouse-sized. */
  .crm-sidebar .crm-sub-link,
  .crm-sidebar .crm-nav-section-btn,
  .crm-sidebar .nav-btn,
  .crm-sidebar a {
    min-height: 46px;
    font-size: 15px;
    padding-top: 10px; padding-bottom: 10px;
  }
  .crm-sidebar .crm-nav-section-label { font-size: 12.5px !important; }
  .crm-sidebar .crm-nav-add { font-size: 12.5px !important; min-height: 34px; }

  /* Toggle button that opens the drawer (mobile.js injects it) */
  .crm-sidebar-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin-left: -4px;
    border: 0; border-radius: 10px;
    background: none; color: var(--text-dim, #a0a8b4);
    cursor: pointer; flex-shrink: 0;
  }
  .crm-sidebar-toggle:active { background: rgba(255,255,255,.07); }
  .crm-sidebar-toggle .csa-dot {
    position: absolute; transform: translate(13px, -11px);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger, #e06d6d);
  }

  .sidebar-overlay {
    z-index: 2550;
    background: rgba(0, 0, 0, .58);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  /* ── 3c. Content pane ───────────────────────────────────────
     `.app-body` / `.crm-body` stay `display:flex`. The sidebar is
     position:fixed in drawer mode, so it leaves the flow and the
     content pane becomes the only flex child and fills the row.
     Switching the row to `block` collapsed the pane to its own
     content height (169px on an empty HR portal) and killed
     scrolling, because the shell locks `body{overflow:hidden}`. */
  .content, .crm-content {
    margin-left: 0 !important;
    padding: 14px 12px 40px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  /* The shell is height-locked; the content pane is the scroller. */
  .app, .crm-app { min-height: 0; }
}


/* ============================================================
   4. PORTAL CONTENT PATTERNS  (<= 767px)
   ============================================================ */
@media (max-width: 767px) {

  /* Page headers / toolbars stack instead of squeezing. */
  .content-header,
  .crm-detail-header,
  .crm-list-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  .content-header h1, .content h1 { font-size: 20px; line-height: 1.25; }
  .content h2 { font-size: 17px; }
  .content-header .row-gap,
  .content-header > div { flex-wrap: wrap; gap: 8px; }

  /* Anything laid out as a row of controls wraps rather than
     overflowing the pane. `.csa-wrap` is applied by mobile.js to
     any nowrap flex row in the pane whose children have been
     squeezed — see the CRM record header, where a 390px screen
     compressed the account name to a 25px column and printed
     "3D Audio Visual Communications" one letter per line. */
  .crm-toolbar, .crm-filters, .crm-actions,
  .toolbar, .filters, .row-gap, .btn-row, .csa-wrap {
    flex-wrap: wrap !important;
    gap: 8px;
  }
  .csa-wrap > * { min-width: 0; }

  /* The CRM / account record header, stacked explicitly: back
     link on its own line, then the title, then the actions. */
  .crm-detail-topbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }
  .crm-detail-back { order: -1; flex: 0 0 auto; min-height: 40px; }
  .crm-detail-title {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 17px;
    overflow-wrap: anywhere;
  }
  .crm-detail-actions { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  .crm-detail-actions > * { flex: 1 1 auto; justify-content: center; }
  .crm-detail-body { padding: 14px 12px; }

  /* Multi-column grids collapse. `minmax(...)` templates are the
     common failure: a 3-col minmax(240px,1fr) grid does not
     reflow below its min and blows the pane out sideways.
     `.csa-stack` is applied by mobile.js to any grid in the pane
     whose narrowest track measures under 150px — that catches the
     dozens of bespoke `*-grid` classes the portals define at
     runtime, which no hand-written selector list would. */
  .crm-fields-grid, .crm-form-grid, .form-grid,
  .ana-grid, .perf-grid, .stat-grid, .card-grid, .kpi-grid,
  .csa-stack {
    grid-template-columns: 1fr !important;
  }
  /* Deliberately NOT `[style*="grid-template-columns"] { 1fr }`:
     the PTO calendar and the Company Holidays month grids are
     built with inline `repeat(7, 1fr)`, and flattening those
     turned a month into a vertical list reading SUN, MON, TUE.
     `.csa-stack` is measured and only ever hits 2-4 column
     layouts, which is what that rule was reaching for. */
  .content [style*="display:flex"][style*="gap"] { flex-wrap: wrap; }

  /* Text floor. mobile.js marks anything in the work area that
     computes under 12px; a static selector list cannot reach it,
     because finance.js / marketing.js / sales-support.js inject
     their <style> blocks at runtime — those land after this file
     and win every specificity tie. Same reason for the
     !important on the button and label rules below. */
  .csa-fs-up { font-size: 12.5px !important; line-height: 1.45; }

  /* CRM list pagers (`_pgBar` in crm.html builds them inline as
     Prev | info | Next | page-size). `flex:1` on the info span
     squeezed "Showing 1-50 of 1,090 matching records" into a
     60px column between the buttons; give it its own full-width
     line above them. Matched on the id prefix because the bar is
     generated with no class. */
  [id^="lv-pg-"] { gap: 8px !important; padding: 10px 12px !important; }
  [id^="lv-pg-"] > span[id$="-info"] {
    flex: 1 0 100% !important;
    order: -1;
    text-align: left !important;
    font-size: 12.5px !important;
  }
  [id^="lv-pg-"] > button { flex: 1 1 auto; min-height: 40px; }
  [id^="lv-pg-"] > select { flex: 1 1 118px; min-height: 40px; }

  /* Cards / panels */
  .crm-card, .card, .panel, .crm-detail, .crm-section {
    padding: 14px 12px;
    border-radius: 12px;
  }

  /* Buttons: real tap targets, and never wider than the pane. */
  .content .btn, .content button.btn,
  .btn-primary, .btn-secondary, .btn-ghost,
  .crm-btn, .ss-act-btn, .inv-act-btn {
    min-height: 40px !important;
    padding-top: 8px !important; padding-bottom: 8px !important;
    font-size: 13.5px !important;
  }
  .btn-sm, .btn-xs { min-height: 36px !important; font-size: 13px !important; }
  .content th, .crm-content th { font-size: 12px !important; }
  .content label, .crm-content label,
  .modal label, .crm-modal label { font-size: 13px !important; }
  .content-header .btn,
  .content-header button { flex: 1 1 auto; justify-content: center; }

  /* Long identifiers (emails, URLs, file names) must wrap. */
  .content, .crm-content { overflow-wrap: anywhere; }
  .content pre, .content code { white-space: pre-wrap; word-break: break-word; }

  /* Typography floor — 10-11px labels are unreadable on a phone. */
  .content .pill, .content .chip, .content .tag,
  .crm-tag, .nav-emp-theme-state, .crm-inq-badge, .nav-badge,
  .content th, .content .muted, .content small {
    font-size: 12px;
  }
}


/* ============================================================
   5. TABLES  (<= 767px)
   ------------------------------------------------------------
   Two behaviours, both mobile-only:

   (a) CARD MODE — mobile.js adds `.csa-cards` to list tables it
       can safely transform (a real <thead>, >= 3 columns, no
       colspan/rowspan in the body). Each row becomes a labelled
       card, so nothing is clipped and nothing needs sideways
       scrolling. Opt a table out with class `no-cards`.

   (b) SCROLL MODE — everything else gets a proper horizontal
       scroller with a sticky header row, instead of being cut off
       at the edge of the pane. Before this, `.content` clipped
       (overflow: hidden auto) and columns past ~390px were simply
       unreachable — the Finance invoice table is 1015px wide.
   ============================================================ */
/* Scroll mode also covers the 768-1024 touch band: an iPad in
   portrait keeps the two-pane layout, so a 1015px invoice table
   still has to fit a ~580px pane and was being cut off there too.
   Cards stay phone-only — a tablet has room for a real table. */
@media (max-width: 767px), (max-width: 1366px) and (pointer: coarse) {

  /* ── (b) scroll mode ── */
  .csa-tscroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    border-radius: 10px;
  }
  .csa-tscroll > table { min-width: max-content; margin: 0; }
  .csa-tscroll > table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--bg-1, #111118);
  }
  .csa-tscroll::-webkit-scrollbar { height: 8px; }
  .csa-tscroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18); border-radius: 4px;
  }
  /* "there is more to the right" affordance */
  .csa-tscroll.csa-has-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
}

@media (max-width: 767px) {
  /* ── (a) card mode ── */
  table.csa-cards {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  table.csa-cards thead { display: none; }
  table.csa-cards tbody, table.csa-cards tfoot { display: block; width: 100%; }
  table.csa-cards tr {
    display: block;
    margin: 0 0 10px;
    padding: 4px 0 6px;
    background: var(--bg-1, #111118);
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 12px;
  }
  table.csa-cards tr:last-child { margin-bottom: 0; }
  table.csa-cards td {
    display: grid;
    grid-template-columns: minmax(84px, 36%) 1fr;
    gap: 4px 12px;
    align-items: start;
    width: auto !important;
    padding: 7px 13px !important;
    border: 0 !important;
    text-align: left !important;
    font-size: 13.5px;
    white-space: normal !important;
  }
  table.csa-cards td::before {
    content: attr(data-label);
    grid-column: 1;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted, #6b7280);
    padding-top: 2px;
  }
  /* Every element inside the cell is pinned to the value column.
     Without this, a cell holding two elements (e.g. the invoice
     "Billed to" name plus its muted sub-line) auto-places the
     second one back under the LABEL — it reads as if the label
     column had swallowed half the value. */
  table.csa-cards td > * { grid-column: 2; min-width: 0; }
  /* First meaningful cell reads as the card's title. */
  table.csa-cards td.csa-card-title {
    display: block;
    padding: 10px 13px 8px !important;
    font-size: 15px; font-weight: 650; color: var(--text, #f0f2f5);
    border-bottom: 1px solid var(--border, rgba(255,255,255,.07)) !important;
    margin-bottom: 3px;
  }
  table.csa-cards td.csa-card-title::before { content: none; }
  /* Cells with no header text, and cells that are only controls. */
  table.csa-cards td.csa-card-nolabel { display: block; }
  table.csa-cards td.csa-card-nolabel::before { content: none; }
  table.csa-cards td.csa-card-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 9px 13px 11px !important;
    border-top: 1px solid var(--border, rgba(255,255,255,.07)) !important;
    margin-top: 3px;
  }
  table.csa-cards td.csa-card-actions::before { content: none; }
  table.csa-cards td.csa-card-actions button,
  table.csa-cards td.csa-card-actions a {
    min-height: 38px; padding: 8px 14px;
    display: inline-flex; align-items: center;
  }
  table.csa-cards td.csa-card-check {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 13px !important;
  }
  table.csa-cards td.csa-card-check::before {
    content: attr(data-label);
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    color: var(--text-muted, #6b7280);
  }
  table.csa-cards td:empty { display: none; }
  table.csa-cards tr.csa-card-empty td { display: block; text-align: center !important; }
  table.csa-cards input[type="checkbox"],
  table.csa-cards input[type="radio"] { width: 20px; height: 20px; }
}


/* ============================================================
   6. MODALS AS SHEETS  (<= 767px)
   ------------------------------------------------------------
   Five modal families are in use — `.modal` (admin), `.crm-modal`,
   `.news-modal` (public news), `.ss-modal` (sales support) and
   `.csa-modal` — each with its own backdrop. crm.css full-screened
   only `.modal`.

   The backdrop matters as much as the box: `.crm-modal-backdrop`
   is a padded flex centering container, so a `width:100vw` modal
   inside it started 24px in and hung 24px off the right edge —
   the New Contact form's inputs were cut off mid-field. Zeroing
   the backdrop's padding and stretching its items is what
   actually makes the sheet fill the screen.
   ============================================================ */
@media (max-width: 767px) {
  .modal-backdrop, .crm-modal-backdrop, .news-modal-backdrop,
  .request-modal-backdrop, .ss-modal-overlay, .csa-modal-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    /* Above the site header. crm.css pins `.site-header` to
       `z-index: 1000 !important`, and the backdrops sit at 400 —
       fine while a modal was a centred card, but a full-height
       sheet had its own title bar hidden behind the header. */
    z-index: 3000 !important;
  }
  /* …and the toasts stay above the sheet, so "Saved" is still
     visible when it fires from inside a modal. */
  .toasts, #toasts, .crm-toasts { z-index: 3200 !important; }

  .modal, .crm-modal, .csa-modal, .news-modal, .ss-modal,
  .picker-modal, .modal-card, .crm-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
  }

  .modal-header, .crm-modal-header, .csa-modal-header, .ss-modal-head {
    flex: 0 0 auto;
    padding: 14px !important;
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-2, #16161f);
  }
  .modal-body, .crm-modal-body, .csa-modal-body,
  .ss-modal-body, .news-modal-scroll {
    flex: 1 1 auto;
    max-height: none !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 14px !important;
  }
  .modal-footer, .crm-modal-footer, .csa-modal-footer,
  .ss-modal-actions, .news-modal-footer {
    flex: 0 0 auto;
    position: sticky; bottom: 0; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--bg-2, #16161f);
    border-top: 1px solid var(--border, rgba(255,255,255,.08));
  }
  .modal-footer > button, .crm-modal-footer > button,
  .csa-modal-footer > button, .ss-modal-actions > button {
    flex: 1 1 140px; min-height: 44px; justify-content: center;
  }
  .csa-modal-x, .modal-close, .crm-modal-x,
  .crm-modal-close, .news-modal-close, .ss-modal-close {
    width: 44px !important; height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  /* Modal grids collapse too. */
  .modal .crm-form-grid, .modal .form-grid,
  .crm-modal .crm-form-grid, .crm-modal .crm-fields-grid { grid-template-columns: 1fr !important; }
}


/* ============================================================
   7. FORM CONTROLS + TAP TARGETS  (<= 767px)
   ------------------------------------------------------------
   iOS Safari zooms the page whenever a focused control is under
   16px, and it does NOT zoom back out. Every text control on the
   site was 13-14px. 16px is the fix; it is not a style choice.
   ============================================================ */
@media (max-width: 767px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="month"], input:not([type]),
  select, textarea {
    font-size: 16px !important;
    min-height: 44px;
    max-width: 100%;
  }
  textarea { min-height: 96px; line-height: 1.5; }
  select { padding-right: 30px; }

  label { font-size: 13px; }

  input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px;
    min-height: 0;
  }
  /* Applied by mobile.js only to boxes that actually render under
     19px — usually because a page wrote width:15px inline, which
     no plain selector can beat. Never applied to the zero-size
     inputs behind the custom toggle switches. */
  .csa-tap-cb { width: 21px !important; height: 21px !important; }
  /* Text buttons the apps drew at 28-30px tall. Marked by
     mobile.js so the 16px icon buttons keep their size. */
  .csa-tap-btn {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
  }

  /* Topbar role caption (RSM Dashboard) sits outside .content, so
     the measured text pass never reaches it. */
  .rsm-user-role { font-size: 12px !important; }

  /* Anything genuinely clickable gets a 44px hit area, without
     changing how it looks (padding, not size). */
  a.nav-link, .nav-cta, .tab, .crm-tab, .news-tab, .pill-btn {
    min-height: 44px;
    display: inline-flex; align-items: center;
  }

  /* Stop the double-tap-to-zoom delay on controls. */
  button, [role="button"], a, input, select, textarea, label {
    touch-action: manipulation;
  }
}


/* ============================================================
   8. PUBLIC SITE REFINEMENTS  (<= 767px)
   The public pages were already responsive; these are the
   specific things the audit flagged at 390px.
   ============================================================ */
@media (max-width: 767px) {

  /* 8a. Readability floor. 11.2px body copy on brand cards and
     news dates was below the comfortable minimum. */
  .brand-card-desc, .news-tile-date, .event-year, .event-month,
  .team-card-map-label, .err-badge, .pfc-header,
  .pfc-speed-label, .pfc-track-label, .pfc-skip { font-size: 12.5px !important; }

  /* The homepage contact cards go single-column here. Section 2
     puts them in two columns for tablets; at 390px two columns
     leave ~180px per card and "Info@myCSAadvisor.com" (186px)
     hangs out the side. This has to re-assert because mobile.css
     loads after styles.css, which already had it right. */
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-card a { overflow-wrap: anywhere; }

  /* 8i. The sign-in sheet nav-auth.js builds inline (it is the
     only way in for a partner on a phone). */
  #csa-signin-modal label { font-size: 13px !important; }
  #csa-si-close {
    width: 44px !important; height: 44px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  #csa-si-email, #csa-si-password { font-size: 16px !important; min-height: 46px; }

  /* 8b. News category tabs were 31px tall — under the 44px
     guideline and hard to hit while scrolling. */
  .news-tabs { gap: 8px; flex-wrap: wrap; }
  .news-tab {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* 8c. Partner portal lock screen overflowed by 8px: the two
     columns are 100% wide inside a padded container and also
     carry their own horizontal padding. */
  .password-gate-lockscreen {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 0;
  }
  .password-gate-left, .password-gate-right {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 18px 16px;
  }

  /* 8d. Inline text links inside paragraphs should not become
     44px blocks (that is 7a's job for real buttons), but the
     stand-alone action links need the room. */
  #request-access-link, #forgot-password-link,
  #request-access-link-inline {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 4px 2px;
  }

  /* 8e. Announcement popup: it is a scrollable overlay, but at
     390px the card's 30px side padding left only 290px of text. */
  [role="dialog"][aria-modal="true"] > div {
    padding: 26px 18px 20px !important;
  }

  /* 8f. Footer + hero spacing on small screens. */
  .site-footer .footer-cols { gap: 22px; }

  /* 8g. /profile — the page a signed-in member (or an employee
     opening a contact's record) actually uses. It carries its own
     inline stylesheet and links none of the shared ones, so its
     10px field labels and 9px "read-only" notes need class-level
     specificity to lift. */
  .fld label { font-size: 12.5px !important; }
  .fld label .ro { font-size: 11px !important; }
  .subs-desc, .file-meta, .dz-note { font-size: 12.5px !important; }
  .avatar-btn {
    font-size: 13px !important;
    min-height: 38px; padding: 8px 14px !important;
  }
  .pill { font-size: 12px !important; }
  .back-link { min-height: 44px; display: inline-flex; align-items: center; }
  .grid2 { grid-template-columns: 1fr !important; }
  .dropzone { padding: 20px 14px; }

  /* 8h. /email-preferences — the unsubscribe / list page reached
     from every marketing email, so it is phone-first by nature. */
  .list-state { font-size: 12.5px !important; }
  .list-row { flex-wrap: wrap; gap: 8px; }
}


/* ============================================================
   9. SMALL PHONES  (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
  .content, .crm-content { padding: 12px 10px 36px; }
  .content h1, .content-header h1 { font-size: 18px; }
  .crm-topbar { padding: 0 6px; gap: 6px; }
  .crm-topbar-brand .label, .crm-topbar-brand .divider { display: none; }
  table.csa-cards td { grid-template-columns: minmax(76px, 40%) 1fr; font-size: 13px; }
  .csa-drawer-title { font-size: 12px; }
}


/* ============================================================
   10. PHONE IN LANDSCAPE  (<= 900px and short)
   A 844x390 window has 390px of height; 108px of fixed chrome is
   a quarter of it, so the chrome collapses further.
   ============================================================ */
@media (max-width: 900px) and (max-height: 460px) {
  body:has(.crm-topbar) .site-header,
  body:has(.crm-topbar) .site-header .header-inner { height: 46px; }
  body:has(.crm-topbar) .site-header .logo img { height: 24px; }
  .crm-topbar { height: 46px; }
  .content, .crm-content { padding-top: 10px; }
  .modal-body, .crm-modal-body, .csa-modal-body { padding: 10px 14px; }
}


/* ============================================================
   11b. TYPE + TAP FLOORS THAT TABLETS NEED TOO
   ------------------------------------------------------------
   The section 8 rules are phone-only, but a 9-11px caption is no
   more readable on an iPad and a 30px close button is no easier
   to hit. Repeated here for the touch-tablet band rather than
   widening section 8, which also does phone-only layout changes.
   ============================================================ */
@media (max-width: 1024px) and (pointer: coarse) {
  .brand-card-desc, .news-tile-date, .event-year, .event-month,
  .team-card-map-label, .err-badge, .pfc-header, .pfc-speed-label,
  .pfc-track-label, .pfc-skip, .news-modal-category, .news-modal-date, .subs-desc, .file-meta, .dz-note,
  .list-state { font-size: 12.5px !important; }
  .fld label { font-size: 12.5px !important; }
  .fld label .ro { font-size: 11px !important; }
  #csa-signin-modal label { font-size: 13px !important; }
  #csa-si-email, #csa-si-password { font-size: 16px !important; min-height: 46px; }
  .csa-modal-x, #csa-si-close, .news-modal-close {
    width: 44px !important; height: 44px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  .news-tab { min-height: 44px; padding: 10px 14px; font-size: 14px; }
}


/* ============================================================
   11. SAFE AREAS (notch / home indicator)
   ============================================================ */
@media (max-width: 767px) {
  body:has(.crm-topbar) .crm-topbar { padding-left: max(8px, env(safe-area-inset-left)); }
  .content, .crm-content {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .crm-sidebar { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}