/* ============================================================
   PASSAGE by Khoshà — mobile RECORDS density pass
   Scope: the record dossier pages (Employer / Foreign Worker /
   Institution / Protection File — and the legacy Client dossier,
   which shares the exact same .dossier/.kv/.tabs markup) plus
   every modal and form in the app.

   Loads LAST (after mobile.css) so equal-specificity rules here
   win without needing !important — except the handful of spots
   that override an inline `style="margin-top:16px"` etc. on a
   nested sub-panel, which is called out at each site.

   Everything is scoped to @media (max-width:760px). Desktop is
   completely untouched. This is a DENSITY pass only — no colour,
   font or visual-language changes.

   Out of scope (owned by other agents, no rules written here):
   .topbar/.top-tools/.searchbox/#quickAdd/#langSw/avatar/bell,
   .gv-bar, .mb-menu*, .side, Dashboard (.kpis/.kpi/.dash- family/.hero),
   Intake, tables (.tbl/.tbl-wrap/cardable), .cl-card/.cl-grid,
   kanban (.kan/.kcard), .filter-chips/.toolrow on list pages.
   ============================================================ */

@media (max-width:760px){

  /* ============================================================
     1. RECORD DOSSIER HEADER
     Shared by employer.js / worker.js / institution.js /
     protection.js (VIEWS.protfile) and app.js (VIEWS.client) —
     they all render the identical .dossier/.dh-* markup.
     Target: well under half the previous height.
     ============================================================ */
  .dossier{padding:14px 14px 12px;border-radius:18px;margin-bottom:12px}
  .dh-main{gap:10px}
  .dh-ava{width:44px;height:44px;flex:0 0 44px;font-size:15px}
  .dh-id{min-width:0;flex:1 1 140px}
  .dh-name{font-size:19px;line-height:1.15}

  /* chips: one scrollable line instead of wrapping across 3-4 rows */
  .dh-chips{
    margin-top:6px;flex-wrap:nowrap;overflow-x:auto;gap:5px;
    padding-bottom:1px;position:relative;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .dh-chips::-webkit-scrollbar{display:none}
  .dh-chips::after{
    content:"";position:absolute;top:0;right:0;bottom:1px;width:20px;
    background:linear-gradient(90deg,transparent,var(--paper) 78%);pointer-events:none;
  }
  .dh-chip{flex:0 0 auto;white-space:nowrap;font-size:10.5px;padding:3px 9px}

  /* actions: compact equal-width row, not stacked full-width blocks.
     mobile.css's minmax(110px,1fr) only ever fits 2 of a typical
     2-3 button row in a ~330px dossier — drop the floor so 3 fit. */
  .dh-actions{margin-top:8px;gap:6px;grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
  .dh-actions .btn{padding:11px 6px;font-size:11.5px;border-radius:99px}

  /* stats: single horizontally-scrollable strip of narrow tiles —
     the single biggest win, replaces 2-3 stacked rows with one */
  .dh-stats{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;
    margin-top:8px;padding-bottom:1px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .dh-stats::-webkit-scrollbar{display:none}
  .dh-stat{flex:0 0 auto;min-width:0;padding:7px 11px;border-radius:12px}
  .dh-stat .v{font-size:15px;line-height:1.15}
  .dh-stat .l{font-size:8px;letter-spacing:.04em;margin-top:1px;white-space:nowrap}

  /* journey step bar (legacy Client dossier) */
  .dh-journey{margin-top:10px;padding-top:8px}
  .dh-step::before{top:6px}
  .dh-dot{width:15px;height:15px}

  /* ============================================================
     2. RECORD TABS — one scrollable line, tighter, snap-friendly.
        Active-tab-into-view is CSS scroll-snap only (no JS): this
        makes user scrolling settle cleanly on a tab boundary, but
        cannot itself teleport a far-right active tab into view on
        first paint since the tab strip is a fresh element every
        render (documented in the handoff report).
     ============================================================ */
  .tabs{
    margin:0 -14px 8px;padding:0 14px 4px;gap:2px;
    scroll-snap-type:x proximity;scroll-padding-inline:14px;
  }
  .tab{padding:9px 11px;font-size:12.5px;scroll-snap-align:start}

  /* ============================================================
     3. KV DEFINITION LISTS — label-above-value stacked rows with
        a hairline between pairs. This alone reclaims a huge amount
        of height across every profile/campus/program panel.
     ============================================================ */
  .kv{display:block}
  .kv dt{display:block;font-size:9.5px;letter-spacing:.06em;padding-top:0}
  .kv dt:not(:first-child){border-top:1px solid var(--stroke-soft);margin-top:7px;padding-top:7px}
  .kv dd{display:block;font-size:13.5px;margin:2px 0 0;font-weight:500}

  /* ============================================================
     4. PANELS & GRIDS
     ============================================================ */
  .panel{padding:13px 14px;border-radius:16px}
  .panel-title{font-size:13px;margin-bottom:8px}
  /* nested sub-panels (e.g. "Primary Contact Person") are given an
     inline background+margin by employer.js/institution.js/protection.js/
     app.js — the margin varies per call site, so this overrides the
     inline style deliberately. */
  .panel .panel{margin-top:10px!important;margin-bottom:10px!important;padding:11px 12px}
  .grid-2,.grid-3{grid-template-columns:1fr;gap:10px}

  /* ============================================================
     5. FORMS & MODALS
     ============================================================ */
  .m-card,.m-card.wide{padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))}
  .m-card::before{margin:0 auto 10px}
  .m-title{font-size:18px;margin-bottom:3px}
  .m-sub{font-size:12.5px;margin-bottom:14px}
  .frow{gap:10px;margin-bottom:9px}
  .fld label{margin-bottom:4px}
  /* inputs stay >=16px (set !important in mobile.css already) so iOS
     never auto-zooms on focus — untouched here, just tighter padding */
  .fld input,.fld select,.fld textarea{padding:10px 12px;border-radius:11px}
  .fld textarea{min-height:58px}
  .fgroup{margin-bottom:12px}
  .fgroup>label{margin-bottom:6px}

  /* sticky action row — Save/Cancel always reachable on a long form
     without scrolling to the very end of the sheet */
  .m-foot{
    position:sticky;bottom:0;z-index:2;background:var(--paper);
    margin:12px -16px 0;gap:8px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--stroke-soft);
  }

  /* generic vertical-rhythm utilities used throughout every tab body */
  .mt14{margin-top:10px}
  .mb14{margin-bottom:10px}

  /* ============================================================
     6. SHARED TAB-BODY COMPONENTS
     (doc checklists, warning callouts, timelines — reused across
     Employer Tasks, Worker Documents/Notes, Institution Compliance,
     Protection tabs, and the legacy Client dossier)
     ============================================================ */
  .doc-it{padding:7px 2px}
  .wk-warn{padding:9px 11px;margin-bottom:8px;font-size:12px;gap:8px}
  .emp-unemp-box,.inst-warn-box,.pro-risk-box{padding:9px 12px;font-size:12px}
  .tl{padding-left:20px}
  .tl-it{padding:0 0 11px}

  /* location / campus address cards */
  .emp-loc-card,.inst-campus-card{padding:12px 14px;gap:6px}
  .emp-loc-grid,.inst-campus-grid{gap:10px}

  /* meeting / hearing cards */
  .emp-meeting-card,.pro-hearing-card{padding:12px 14px}
  .emp-meeting-grid,.pro-hearing-grid{gap:10px}

  /* ============================================================
     7. EMPLOYER FILE — per-tab tightening
     ============================================================ */
  /* Document Request tab: the six upload blocks were the tallest
     thing in the file — filter input + label + file rows padded
     at desktop scale, six times over */
  .emp-progress-wrap{margin-bottom:12px;gap:10px}
  .emp-doc-grid{gap:10px}
  .emp-doc-block{padding:12px 14px}
  .emp-doc-head{margin-bottom:8px;gap:8px}
  .emp-doc-label{font-size:10px}
  .emp-doc-file{padding:6px 0;font-size:12px;gap:8px}
  .emp-doc-empty{padding:4px 0;font-size:12px}

  /* Job Bank tab: alert strip above the (out-of-scope) table */
  .emp-alert-strip{gap:5px;margin-bottom:10px}
  .emp-alert-chip{padding:7px 11px;font-size:11.5px}

  /* Foreign Workers tab: linked-worker rows */
  .emp-worker-row{padding:10px 12px;gap:10px}

  /* LMIA Application tab + modal */
  .emp-lmia-card{padding:12px 14px;gap:5px}
  .emp-lmia-grid{gap:10px}
  /* the 8-option stream radio list was the tallest thing in any
     modal in the app — tighten each row hard */
  .emp-stream-radio{padding:4px;gap:0}
  .emp-stream-opt{padding:8px 9px;font-size:12px;line-height:1.3;gap:8px}

  /* ============================================================
     8. FOREIGN WORKER FILE — per-tab tightening
     ============================================================ */
  /* passport card: already has its own mobile block in passport.css;
     this file loads after it and tightens further for a real 390px
     viewport, without breaking the one-line scrollable MRZ band */
  .pp-book{padding:6px 6px 6px 13px}
  .pp-page{padding:12px 12px 10px}
  .pp-top{gap:8px;padding-bottom:9px}
  .pp-flag{width:52px;height:36px}
  .pp-country{font-size:13px}
  .pp-body{gap:10px;padding:10px 0 8px}
  .pp-photo{flex:0 0 64px;width:64px}
  .pp-photo-mono{height:82px;font-size:22px}
  .pp-fields{gap:7px}
  .pp-mrz{padding:8px 10px;margin-top:4px}
  .pp-permit{padding:11px 12px}
  .pp-permit-g{gap:9px 12px}

  /* ============================================================
     9. INSTITUTION (DLI) FILE — per-tab tightening
     ============================================================ */
  .inst-explain{padding:10px 12px;font-size:11.5px;margin-bottom:12px}
  .inst-pal-big{font-size:28px;padding:10px 0 2px}

  /* ============================================================
     10. PROTECTION FILE — per-tab tightening
     ============================================================ */
  .pro-alert-strip{gap:6px;margin-bottom:12px}
  .pro-alert-row,.pro-clock-row{padding:9px 11px;gap:6px}
  .pro-clock-list{gap:6px}
}