/* ============================================================
   PASSAGE by Khoshà — mobile DENSITY pass: lists, tables, boards
   Owner scope: employers, workers, institutions, cases (kanban),
   lmia, jobs, ads, noc, unemployment, payments, tasks, crs,
   settings, clients — every list/table/board/directory page and
   the filter/toolbar furniture that sits on them.

   Loads LAST (after mobile.css) so equal-specificity rules here
   win by source order. Everything is scoped to
   @media (max-width:760px) — desktop is byte-for-byte unchanged.

   Does NOT touch: .topbar/.top-tools/.searchbox/#quickAdd/#langSw/
   avatar/alert bell, .gv-bar, the full-screen mobile menu, .side,
   the Dashboard's own .hero, its .dash- prefixed classes and its
   .kpis, Intake, .dossier, its .dh- prefixed classes, .tabs/.tab,
   .kv, .panel internals on record pages, modals, .m- prefixed
   classes, .frow, .fld, and the passport card's .pp- classes
   — those belong to the other two mobile-compaction passes.

   No new classes were introduced (this file cannot edit markup),
   so the --ml- custom properties below are the only "ml-"
   namespaced thing here — they document the shared compact scale
   all three passes were asked to match exactly.
   ============================================================ */
@media (max-width:760px){

  :root{
    --ml-gutter:12px;
    --ml-gap:10px;
    --ml-pad:13px 14px;
    --ml-radius:16px;
    --ml-title:13px;
    --ml-body:13.5px;
    --ml-caption:10px;
    --ml-tap:40px;
  }

  /* ------------------------------------------------------------
     0. shared scale — page gutter, block gap, panel, chips
     ------------------------------------------------------------ */
  .view{ padding-left:var(--ml-gutter); padding-right:var(--ml-gutter); }
  .panel{ padding:var(--ml-pad); border-radius:var(--ml-radius); }
  .panel-title{ font-size:var(--ml-title); margin-bottom:8px; }
  .mb14{ margin-bottom:var(--ml-gap); }
  .mt14{ margin-top:var(--ml-gap); }
  .toolrow{ margin:2px 0 var(--ml-gap); gap:8px; row-gap:8px; }

  /* ============================================================
     1. FILTER CHIPS / TOOLBARS — one scrollable line, tight
     ------------------------------------------------------------
     .filter-chips previously carried flex-wrap:nowrap, which
     forced the nested .chip-sub (flex-basis:100%) to sit INSIDE
     the same scrolling line as one giant 100%-wide item, wrapping
     its own children into a tall internal block (the "9 family
     chips + chip-sub eats a screen" bug on Cases). Switching to a
     block/inline-block model gives two independent, always-single-
     line, horizontally-scrolling rows instead: chips flow inline
     and simply wrap to void — no, they don't wrap, because the
     container is nowrap; .chip-sub is a block box so it always
     starts a fresh line regardless of the inline nowrap above it,
     and then scrolls independently on its own line.
     ============================================================ */
  .toolrow{ min-width:0; }
  .toolrow .filter-chips{
    display:block;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    width:100%;
    min-width:0;
    padding-bottom:3px;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
    mask-image:linear-gradient(90deg,#000 90%,transparent);
  }
  .toolrow .filter-chips::-webkit-scrollbar{ display:none; }
  .toolrow .filter-chips .chip{
    display:inline-block;
    vertical-align:middle;
    margin:0 5px 0 0;
    padding:6px 12px;
    font-size:12px;
  }
  .toolrow .filter-chips .chip-sm{ padding:5px 10px; font-size:11px; }
  .toolrow .filter-chips .chip-sub{
    display:block;
    white-space:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex-basis:auto;
    min-width:0;
    margin:5px 0 0;
    padding:6px 0 1px;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);
    mask-image:linear-gradient(90deg,#000 90%,transparent);
  }
  .toolrow .filter-chips .chip-sub::-webkit-scrollbar{ display:none; }
  .toolrow .filter-chips .chip-sub .chip{ margin:0 5px 0 0; }

  /* min touch target for every chip, without growing them visually
     past the compact padding above (invisible hit-area extension) */
  .toolrow .filter-chips .chip{ position:relative; }
  .toolrow .filter-chips .chip::after{
    content:""; position:absolute; inset:-6px -2px;
  }

  /* ============================================================
     2. TABLE-CARDS (.tbl.cardable) — the biggest win
     ------------------------------------------------------------
     Applies on every list/table page in scope: employers(n/a —
     uses card grid), workers, jobs, payments, unemployment, and
     (auto-cardified by mobile.js) lmia's compliance table. Keeps
     the existing "label ::before + value" one-line mechanism but
     tightens it into a genuine 4–7 line block, gives the first
     cell a real heading treatment, adds hairline separators
     instead of an all-over border, and stops rich/multi-part
     values (chip lists, meters) from being squashed into the
     label/value flex row where they don't fit.
     ============================================================ */
  .tbl.cardable tr{
    padding:10px 12px;
    margin-bottom:8px;
    border-radius:14px;
  }
  .tbl.cardable td{
    padding:4px 0;
    font-size:12.5px;
    gap:10px;
  }
  .tbl.cardable td[data-l]::before{
    font-size:9.5px;
  }

  /* labelled rows: hairline separators, safe against long text */
  .tbl.cardable td[data-l]{
    border-bottom:1px solid var(--stroke-soft);
    flex-wrap:wrap;
    row-gap:2px;
    overflow-wrap:anywhere;
  }
  .tbl.cardable td[data-l]:last-of-type{ border-bottom:0; }
  .tbl.cardable td[data-l] .pill{ white-space:normal; text-align:right; }

  /* first cell = card title row, not a label/value pair. Column 0
     is left unlabeled by mobile.js convention; a few tables (e.g.
     the unemployment CMA table) set data-l on it anyway, so this
     rule is written to win regardless via a later, hidden ::before.
     Stays a flex row (name left / sub-line right, inherited from
     the base cardable rule) instead of forcing a stacked block —
     for the ordinary [t-main, t-sub] pair that's one line, not two,
     which is where most of a card's height lives at 14 rows/screen;
     it only gets the heavier block treatment below when it actually
     has 3+ parts that would otherwise be squeezed onto one line. */
  .tbl.cardable td:first-child{
    padding:0 0 6px;
    margin-bottom:6px;
    border-bottom:1px solid var(--stroke-soft);
    align-items:baseline;
  }
  .tbl.cardable td:first-child::before{ display:none; }
  .tbl.cardable td:first-child .t-main{ font-size:14px; }
  .tbl.cardable td:first-child .t-sub{ margin-top:1px; }
  .tbl.cardable tr:has(> td:only-child) td:first-child{
    padding:0; margin-bottom:0; border-bottom:0;
  }
  /* identity cells with 3+ parts (flag + name + sub, etc.) do need
     to stack, the same way multi-part value cells do below */
  .tbl.cardable td:first-child:has(.t-sub):has(.flag),
  .tbl.cardable td:first-child:has(.pill ~ .pill){
    display:block;
  }

  /* value cells that carry more than plain text (a chip list, a
     compliance meter, a second "t-sub" line) get stacked instead
     of squeezed into the label/value flex row */
  .tbl.cardable td[data-l]:has(.t-sub),
  .tbl.cardable td[data-l]:has(.comp-meter),
  .tbl.cardable td[data-l]:has(.pill ~ .pill){
    display:block;
  }
  .tbl.cardable td[data-l]:has(.t-sub)::before,
  .tbl.cardable td[data-l]:has(.comp-meter)::before,
  .tbl.cardable td[data-l]:has(.pill ~ .pill)::before{
    display:block;
    margin-bottom:4px;
  }
  .tbl.cardable td .comp-meter{ gap:3px; }
  .tbl.cardable td .comp-meter .cm-row{ font-size:10.5px; gap:6px; }
  .tbl.cardable td .comp-meter .cm-ok{ width:15px; height:15px; flex-basis:15px; font-size:8.5px; }

  /* trailing action cell(s) — buttons with no data-l, not the
     title cell either (e.g. jobs' Match/→Ad, unemployment Delete) */
  .tbl.cardable td:not([data-l]):not(:first-child){
    padding-top:8px;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .tbl.cardable .btn{ min-height:var(--ml-tap); display:inline-flex; align-items:center; }

  /* empty-state colspan cell keeps its panel padding as-is */
  .tbl.cardable td[colspan]{ padding:0; }

  /* raw (non-.tbl) matrices/scenario tables that mobile.js wraps
     in .mb-tbl-scroll instead of cardifying (CRS permutation
     matrix, scenario bench) — tighten cell padding only */
  .mb-tbl-scroll table.mx td{ padding:7px 4px; font-size:12px; }
  .mb-tbl-scroll table.mx th{ padding:5px 4px; font-size:9px; }
  .mb-tbl-scroll .scen-table th,
  .mb-tbl-scroll .scen-table td{ padding:5px 6px; font-size:11.5px; }

  /* ============================================================
     3. DIRECTORY CARDS — clients (legacy), employers, institutions
     ============================================================ */
  .cl-card,.emp-card,.inst-card{
    padding:12px 14px;
    border-radius:16px;
  }
  .cl-top,.emp-card-head,.inst-card-head{ gap:10px; }
  .cl-ava,.emp-ava,.inst-ava{
    width:40px; height:40px; flex-basis:40px; font-size:13.5px;
  }
  .cl-name,.emp-card-name,.inst-card-name{ font-size:14px; line-height:1.2; }
  .cl-sub,.emp-card-sub,.inst-card-sub{ font-size:11.5px; }
  .cl-crs{ width:40px; height:40px; font-size:12.5px; }
  .cl-crs span{ font-size:7px; }
  .emp-warn-chip,.inst-warn-chip{ width:22px; height:22px; font-size:12px; }

  .cl-foot,.emp-card-stats,.inst-card-stats{
    margin-top:8px;
    padding-top:8px;
    gap:5px;
  }
  .cl-chip,.emp-stat-chip,.inst-stat-chip{
    font-size:10.5px;
    padding:3px 9px;
  }

  /* client journey meter (legacy Clients directory) */
  .cl-journey{ margin:9px 0 2px; }
  .cl-jbar{ gap:3px; }
  .cl-jseg{ height:4px; }
  .cl-jlabel{ margin-top:5px; font-size:9.5px; }

  /* institution PAL mini-meter shown on the directory card itself
     (the bigger .inst-pal-meter lives on the institution's own
     record page and is out of scope) */
  .inst-pal-mini{ margin-top:8px; }
  .inst-pal-mini-label{ font-size:9.5px; margin-bottom:3px; }
  .inst-pal-mini-bar{ height:5px; }

  /* LMIA desk's employer picker — reuses .kpi as a mini directory.
     Scoped to [data-emp] so the dashboard's own .kpi stat tiles
     (out of scope) are untouched. */
  .kpi[data-emp]{ padding:10px 12px; }
  .kpi[data-emp] .k-orb{ width:26px; height:26px; margin-bottom:6px; }
  .kpi[data-emp] .k-orb svg{ width:13px; height:13px; }
  .kpi[data-emp] .k-num{ font-size:13.5px!important; line-height:1.25; } /* overrides an inline font-size:17px */
  .kpi[data-emp] .k-lbl{ font-size:10px; margin-top:1px; }
  .kpi[data-emp] .k-sub{ font-size:10px; margin-top:3px; }

  /* ============================================================
     4. CASES KANBAN
     ------------------------------------------------------------
     Column snap-scroll and single-column-per-screen already exist
     upstream (mobile.css); this section is the vertical-density
     pass: tighter column chrome and a kcard that fits type/name/
     stage/due date in ~64px as asked.
     ============================================================ */
  .kan{ gap:8px; margin:0 -12px; padding:0 12px 10px; }
  .kan-col{ padding:8px; border-radius:14px; }
  .kan-head{ padding:1px 4px 6px; }
  .kan-title{ font-size:10.5px; }
  .kan-count{ font-size:10px; padding:1px 7px; }
  .kan-cards{ gap:6px; min-height:0; }
  .kcard{ padding:8px 10px; border-radius:12px; }
  .kcard .kc-type{ font-size:9px; }
  .kcard .kc-name{ font-size:13px; margin:2px 0 3px; line-height:1.25; }
  .kcard .stages{ gap:3px; }
  .kcard .stg{ width:6px; height:6px; }
  .kcard .kc-meta{ margin-top:5px!important; font-size:10.5px; } /* overrides an inline margin-top:8px */

  /* ============================================================
     5. LMIA DESK — compliance meter cells handled generically
     above (§2); nothing LMIA-specific beyond the employer picker
     (§3) and the note spacing (shared .mt14, §0).
     ============================================================ */

  /* ============================================================
     6. PLACEMENTS (jobs) / JOB ADS
     ============================================================ */
  .ads-grid{ gap:10px; }
  .ad-card{ padding:12px 14px; border-radius:16px; gap:7px; }
  .ad-title{ font-size:14px; line-height:1.2; }
  .ad-emp{ font-size:11.5px; }
  .ad-facts{ gap:5px; }
  .fact{ font-size:10.5px; padding:3px 9px; }
  .ad-compliance{ font-size:11px; padding-top:6px; gap:6px; }

  /* channel + applicant "tables" inside the Job Ads composer —
     these are specific list components (not generic modal chrome),
     called out explicitly for compaction on this page */
  .chan-row{ padding:7px 2px; gap:6px 10px; font-size:12px; }
  .chan-name{ min-width:120px; }
  .chan-dates{ font-size:11px; }
  .days-badge{ font-size:11.5px; padding:2px 9px; }
  .applicant-row{ padding:6px 2px; font-size:12px; gap:3px 8px; }
  .ad-preview{ padding:12px 14px; font-size:12px; max-height:220px; }

  /* ============================================================
     7. NOC EXPLORER
     ------------------------------------------------------------
     VIEWS.noc sets an inline grid-template-columns:2fr 1fr on
     .grid-2; mobile.css already forces 1fr with !important —
     left untouched here on purpose.
     ============================================================ */
  /* NOC's left column is a bare, unclassed grid-item div holding the
     nowrap filter-chip rows; without an explicit min-width it forces
     .grid-2's single 1fr track (and the whole page) to the chip
     row's un-wrapped intrinsic width. Scoped to skip .panel/.dash-col
     so the client-profile/payments/settings .grid-2 usages (whose
     direct children are always classed) are unaffected. */
  .grid-2 > div:not(.panel):not(.dash-col){ min-width:0; }

  .noc-search{ padding:9px 15px; }
  .noc-grid{ gap:8px; }
  .noc-card{ padding:10px 12px; border-radius:14px; }
  .noc-code{ font-size:13px; }
  .teer-chip{ font-size:9px; padding:2px 6px; margin-left:6px; }
  .noc-title{ font-size:12.5px; margin:4px 0 2px; }
  .noc-meta{ font-size:11px; }
  .teer-legend{ gap:4px; font-size:11px; }
  .teer-legend b{ flex-basis:52px; }
  .wage-verdict{ padding:10px 12px; font-size:12px; }

  /* ============================================================
     8. UNEMPLOYMENT REFERENCE
     ============================================================ */
  .gv-rate-in{ width:58px; padding:5px 6px; }
  .gv-flaglist{ gap:6px; }
  .gv-flagrow{ padding:8px 10px; gap:8px; border-radius:12px; }
  .gv-flagmain b{ font-size:12.5px; }
  .gv-flagsub{ font-size:10.5px; }

  /* ============================================================
     9. PAYMENTS — invoice table handled generically by §2; status
     pills already compact via the shared .pill rules.
     ============================================================ */

  /* ============================================================
     10. TASKS — Overdue / This week / Later / Done groups
     ============================================================ */
  .doc-it{ padding:6px 2px; gap:8px; }
  .doc-name{ font-size:12.5px; }
  .doc-req{ font-size:9px; }
  .doc-box{ position:relative; } /* invisible hit-area extension below */
  .doc-box::after{ content:""; position:absolute; inset:-7px; }

  /* ============================================================
     11. CRS STUDIO — ring, factor rows, lever/matrix tables
     ------------------------------------------------------------
     .crs-form .fgroup and .crs-wrap .seg are scoped to CRS's own
     ancestor wrappers (not the bare .fgroup/.seg used inside
     modals), so tightening them here can't affect the modal
     forms pass. .frow/.fld themselves are left alone everywhere,
     including inside CRS, per the shared scope boundary.
     ============================================================ */
  .crs-form .fgroup{ margin-bottom:10px; }
  .crs-form .fgroup>label{ margin-bottom:4px; font-size:9.5px; }
  .crs-form [style*="height:8px"]{ height:5px!important; } /* inline spacer divs between seg-rows */
  .crs-wrap .seg{ padding:6px 10px; font-size:11.5px; }

  .crs-score-card{ padding:16px 14px; }
  .crs-ring{ width:126px; height:126px; margin-bottom:10px; }
  .crs-ring svg{ width:126px; height:126px; }
  .crs-num .n{ font-size:32px; }
  .crs-num .of{ font-size:10px; }
  .crs-verdict{ font-size:11.5px; margin:0 auto 10px; }
  .crs-break{ gap:3px; margin-top:6px; }
  .cb-row{ padding:5px 2px; font-size:12px; }
  .draw-row{ padding:4px 2px; font-size:11px; }

  .crs-extra{ gap:12px; }
  .lever-row{ padding:6px 2px; gap:8px; font-size:12px; }
  .lever-gain{ font-size:12px; min-width:38px; }
  .target-row{ gap:6px; margin-bottom:8px; }
  .target-row .chip{ padding:6px 12px; font-size:11.5px; }
  .scen-chip{ padding:3px 5px 3px 10px; font-size:11px; }
  .scen-chip button{ position:relative; }
  .scen-chip button::after{ content:""; position:absolute; inset:-9px; }

  /* ============================================================
     12. SETTINGS (Firm)
     ============================================================ */
  .grid-2 [style*="margin-top:26px"]{ margin-top:16px!important; } /* Team panel-title, inline-styled */

  /* ============================================================
     13. LEGACY CLIENTS — grid handled by §3 above; filter chips
     by §1; nothing page-specific beyond that.
     ============================================================ */
}