/* ============================================================
   PASSAGE by Khoshà — Employer module styles
   All new classes are prefixed emp- ; uses the existing design
   tokens from styles.css (--paper --bone --ink --gold --gold-deep
   --green --red --stroke etc.) so it matches the light-luxury
   gold aesthetic without redefining anything.
   ============================================================ */

/* ---------- employer directory grid ---------- */
.emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
/* `overflow:hidden` keeps the rounded corners clipping the background, and
   nothing inside is positioned to escape it — but it also silently ate any
   content taller than the card. Nothing is fixed-height here, so the card
   grows instead. */
.emp-card{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(244,240,233,.55));
  border:1px solid var(--stroke-soft);border-radius:24px;padding:20px;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s,border-color .3s}
.emp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(169,130,76,.35)}
.emp-card-head{display:flex;align-items:flex-start;gap:14px}
.emp-ava{width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:16px;color:#FFFDF7;
  background:radial-gradient(circle at 32% 28%,var(--gold-hi),var(--gold) 58%,var(--gold-deep));
  box-shadow:var(--shadow-soft)}
.emp-id{flex:1;min-width:0}
/* WRAPS. Both of these were nowrap + ellipsis, which is right for a table
   cell and wrong for a card: "Harajuku Izakaya, Ohyama Ramen, Fuji Market"
   became "Harajuku Izakaya, Ohyama R…", and a card exists to be READ at a
   glance rather than clicked to find out what it says. The grid already
   stretches every card in a row to the tallest (listview.css), so a
   two-line name costs nothing but the row it is in.

   `overflow-wrap:anywhere` is for the one case wrapping cannot help — an
   address or an email with no spaces in it, which would otherwise push the
   card wider than its column. */
.emp-card-name{font-family:var(--disp);font-weight:700;font-size:16px;line-height:1.25;
  overflow-wrap:anywhere}
.emp-card-sub{font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.45;
  overflow-wrap:anywhere}
.emp-warn-chip{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(140,59,46,.12);color:var(--red);font-size:14px;font-weight:700}
.emp-card-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--stroke-soft)}
.emp-stat-chip{font-size:11.5px;font-weight:600;border-radius:99px;padding:4px 11px;background:rgba(255,255,255,.7);border:1px solid var(--stroke-soft);color:var(--ink-soft)}
/* Facts that used to sit on their own truncated line — the low-wage cap,
   the local unemployment rate — read better as capsules in this strip,
   which wraps. Toned, because a cap over the limit and a 6%+ unemployment
   rate are the two numbers on the card that mean "stop". */
.emp-stat-chip.warn{color:var(--red);border-color:rgba(140,59,46,.32);background:rgba(140,59,46,.07)}
.emp-stat-chip.note{color:var(--gold-deep);border-color:rgba(169,130,76,.32);background:rgba(169,130,76,.08)}
.emp-stat-chip .k{color:var(--ink-faint);font-weight:600}

/* ---------- work locations ---------- */
.emp-loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.emp-loc-card{background:rgba(255,255,255,.6);border:1px solid var(--stroke-soft);border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.emp-loc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.emp-loc-label{font-family:var(--disp);font-weight:700;font-size:14.5px}
.emp-loc-addr{font-size:13px;color:var(--ink-soft);line-height:1.5}
.emp-loc-links{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px}
.emp-loc-links a{color:var(--gold-deep);font-weight:600;text-decoration:underline}
.emp-loc-actions{display:flex;gap:8px;margin-top:4px}

/* ---------- document requests ---------- */
.emp-progress-wrap{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.emp-progress-bar{flex:1;height:8px;background:var(--bone-2);border-radius:99px;overflow:hidden}
.emp-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-hi),var(--gold-deep));transition:width .4s cubic-bezier(.2,.9,.3,1)}
.emp-doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.emp-doc-block{background:rgba(255,255,255,.55);border:1px solid var(--stroke-soft);border-radius:var(--r-lg);padding:16px 18px}
.emp-doc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.emp-doc-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.emp-doc-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.emp-doc-filter{border:1px solid var(--stroke);border-radius:99px;padding:6px 12px;font-size:12.5px;background:#fff;outline:0;width:120px;transition:border-color .2s,box-shadow .2s,width .2s}
.emp-doc-filter:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,130,76,.10);width:150px}
.emp-doc-files{display:flex;flex-direction:column}
.emp-doc-file{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--stroke-soft);font-size:12.5px}
.emp-doc-file:last-child{border-bottom:0}
.emp-doc-fname{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-doc-fmeta{color:var(--ink-faint);font-size:11.5px;flex:0 0 auto}
.emp-doc-empty{color:var(--ink-faint);font-size:12.5px;padding:6px 2px}

/* ---------- cap calculation ---------- */
.emp-cap-big{font-family:var(--disp);font-weight:800;font-size:44px;text-align:center;padding:18px 0 4px;line-height:1}
.emp-cap-pass{color:var(--green)}
.emp-cap-fail{color:var(--red)}

/* ---------- calendar (meetings) ---------- */
.emp-meeting-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.emp-meeting-card{position:relative;display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.6);
  border:1px solid var(--stroke-soft);border-radius:var(--r-md);padding:14px 16px}
.emp-meeting-card.past{opacity:.55}
.emp-meeting-date{flex:0 0 48px;text-align:center;background:var(--bone);border-radius:12px;padding:5px 0}
.emp-meeting-date .d{font-family:var(--disp);font-weight:700;font-size:16px;line-height:1.1}
.emp-meeting-date .m{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
/* Mirrors .pro-hearing-date .y in protection.css — the two calendar chips must
   not disagree about whether a date carries its year. 48px of content box holds
   "2027" at 8.5px with room to spare, so the chip is not widened. */
.emp-meeting-date .y{font-size:8.5px;letter-spacing:.06em;line-height:1.2;margin-top:1px;
  font-variant-numeric:tabular-nums;color:var(--ink-soft);opacity:.8}
.emp-meeting-body{flex:1;min-width:0}
.emp-meeting-title{font-weight:600;font-size:13.5px}
.emp-meeting-card [data-meetdel]{position:absolute;top:8px;right:8px}

/* ---------- Job Bank alert strip ---------- */
.emp-alert-strip{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.emp-alert-chip{display:block;font-size:12.5px;border-radius:12px;padding:8px 14px;background:rgba(169,130,76,.10);color:var(--gold-deep);line-height:1.5}
.emp-alert-chip.amber{background:rgba(169,130,76,.14);color:var(--gold-deep)}
.emp-alert-chip.red{background:rgba(140,59,46,.10);color:var(--red)}
span.emp-alert-chip{border-radius:99px;padding:2px 10px;font-weight:600;font-size:11px;margin-right:4px}

/* ---------- foreign workers ---------- */
.emp-worker-grid{display:flex;flex-direction:column;gap:8px}
.emp-worker-row{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.55);border:1px solid var(--stroke-soft);
  border-radius:var(--r-md);padding:12px 16px;cursor:pointer;transition:all .2s}
.emp-worker-row:hover{border-color:rgba(169,130,76,.35);transform:translateY(-1px)}
.emp-worker-permit{flex:0 0 auto;text-align:right}
.emp-worker-warn{font-size:10.5px;color:var(--red);font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-top:4px}

/* ---------- LMIA applications ---------- */
.emp-lmia-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.emp-lmia-card{background:rgba(255,255,255,.6);border:1px solid var(--stroke-soft);border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.emp-lmia-head{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- LMIA stream radio list ---------- */
.emp-stream-radio{display:flex;flex-direction:column;gap:4px;border:1px solid var(--stroke-soft);border-radius:var(--r-md);padding:6px;background:#fff}
.emp-stream-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:13px;cursor:pointer;transition:background .15s}
.emp-stream-opt:hover{background:var(--bone)}
.emp-stream-opt input{accent-color:var(--gold);flex:0 0 auto}

/* ---------- unemployment / refusal-risk callout ---------- */
.emp-unemp-box{background:rgba(140,59,46,.08);color:var(--red);border-radius:var(--r-md);padding:10px 14px;font-size:12.5px;line-height:1.6}
.emp-unemp-box a{color:var(--red);text-decoration:underline;font-weight:600}

/* window-vs-window flip callout — the "filing two weeks later changes the
   answer" warning, appended after a rate note (either polarity, so it uses
   gold rather than red/green). */
.emp-window-flip{margin-top:8px;background:rgba(169,130,76,.10);color:var(--gold-deep);border-radius:var(--r-sm);padding:8px 12px;font-size:12px;line-height:1.55}
.emp-window-flip a{color:var(--gold-deep);text-decoration:underline;font-weight:600}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:760px){
  .emp-grid,.emp-loc-grid,.emp-doc-grid,.emp-meeting-grid,.emp-lmia-grid{grid-template-columns:1fr}
  .emp-card{padding:16px;border-radius:18px}
  .emp-worker-row{flex-wrap:wrap}
  .emp-worker-permit{text-align:left;flex:1 1 100%}
  .emp-doc-tools{width:100%}
  .emp-doc-filter{flex:1;width:auto}
  .emp-doc-filter:focus{width:auto}
  .emp-cap-big{font-size:34px}
  .emp-meeting-card{flex-wrap:wrap}
}

/* Provincial certificate on the employer card — the same job the permit
   chip does on a foreign worker: a date you can act on before it bites.
   An LMIA cannot be filed without a valid one, so expired and missing are
   both red; a renewal coming up is amber; simply valid stays quiet, because
   a page of green chips teaches the eye to skip the row. */
.emp-cert-chip{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.01em;
  border-radius:99px;padding:3px 10px;white-space:nowrap;border:1px solid transparent}
.emp-cert-ok{color:var(--ink-faint);background:rgba(26,27,24,.045);border-color:rgba(26,27,24,.08)}
.emp-cert-amber{color:var(--gold-deep);background:rgba(169,130,76,.11);border-color:rgba(169,130,76,.32)}
.emp-cert-red{color:var(--red);background:rgba(140,59,46,.09);border-color:rgba(140,59,46,.30)}
.emp-card-dim{color:var(--ink-faint);font-size:11.5px}

/* ============================================================
   RENEWAL SUBMITTED, NOT YET GRANTED — provincial certificate tab
   ------------------------------------------------------------
   Gold, like every other "in hand, not yet resolved" state in Passage, and
   deliberately NOT green: the certificate on file is still the one running
   out, and a green strip would read as though the renewal had landed. It
   sits directly under the state banner because it is the qualifier on it —
   "expires in 41 days" and "the renewal went in on 12 June" are one
   sentence, and a consultant who reads the first without the second rings
   an employer who has already done the work.
   ============================================================ */
.cert-renew-strip{margin:-4px 0 14px;padding:11px 14px;border:1px solid rgba(169,130,76,.32);
  border-left-width:3px;border-radius:var(--r-md);background:rgba(169,130,76,.08)}
.cert-renew-flag{margin-bottom:7px;display:inline-block}
.cert-renew-line{font-size:13px;font-weight:600;color:var(--ink);line-height:1.5}
.cert-renew-why{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.5}
.cert-renew-acts{margin-top:9px}
/* The same line on the row it belongs to. It stays on a certificate that
   has since been replaced, so it is quieter there than in the strip: it is
   history, not a thing to act on. */
.cert-renew-sub{color:var(--gold-deep);font-weight:600;margin-top:3px}
.cert-renew-warn{margin:0 0 12px;padding:9px 12px;border-radius:var(--r-sm);
  background:rgba(169,130,76,.10);color:var(--gold-deep);font-size:12.5px;line-height:1.55}

@media (max-width:760px){
  .cert-renew-strip{padding:10px 12px}
  .cert-renew-line{font-size:12.5px}
  /* The renewal line is the longest string in the table's first column;
     without this it forces the whole table wide on a phone. */
  .cert-renew-sub{white-space:normal}
}
/* The renewal line on a certificate that is no longer the one in force. */
.cert-renew-hist{color:var(--ink-faint);font-weight:400;margin-top:1px}

/* On a phone mobile-lists.css turns .tbl.cardable rows into cards and lays
   the identity cell out as a flex ROW — fine for the usual [number, type]
   pair, cramped into four narrow columns once the renewal line and its
   history note join them. The house rule for an identity cell with three or
   more parts is already `display:block` (mobile-lists.css, ".identity cells
   with 3+ parts"); this says the certificate's renewal line is one of those,
   rather than inventing a second layout for it. */
@media (max-width:760px){
  .tbl.cardable td:first-child:has(.cert-renew-sub){display:block}
  .cert-renew-sub,.cert-renew-hist{margin-top:4px}
}

/* ------------------------------------------------------------
   THE CAP WORKSHEET TAB, ON A FILE WITH THIRTY WORK LOCATIONS
   (25 September 2026)

   The low-wage cap is a per-work-location rule, so this tab prints one
   worksheet — the seven lines plus twelve inputs — for every address on
   the file. Three of the firm's employers have 24, 28 and 31 addresses,
   and that is 4,400-5,600 DOM nodes and 400-480 KB of markup in a single
   paint. Measured on the firm's own data at 4x CPU (a mid-range office
   laptop): the tab took 0.7-1.3 seconds to appear, against a 400 ms
   budget. Only about 150 ms of that was arithmetic; the rest was the
   browser laying out thirty worksheets nobody had scrolled to yet.

   `content-visibility:auto` tells the browser to skip layout and paint
   for a sheet while it is off screen, and to do it the moment it scrolls
   into view. Nothing is hidden, nothing is collapsed, no click is added:
   the page looks and behaves exactly as before, including Ctrl-F (the
   browser reveals a skipped sheet to show a match) and every
   getElementById the save handler uses — the DOM is all there.

   `contain-intrinsic-size:auto <h>` is the height to assume for a sheet
   that has not been laid out yet, so the scrollbar is honest on the first
   paint; `auto` then remembers each sheet's real height once it has been
   seen. The three figures are MEASURED, not guessed — a worksheet on this
   firm's data is 1157px at 1440 wide, 1994px once .grid-2 collapses to one
   column at 1100 (styles.css), and 2969px on a 390px phone — so the
   placeholder follows the same breakpoint the layout does.

   Printing gets the real thing: a skipped subtree would print blank, and
   this worksheet is the firm's working for a filing. */
.emp-cap-sheet{ content-visibility:auto; contain-intrinsic-size:auto 1160px; }
@media (max-width:1100px){ .emp-cap-sheet{ contain-intrinsic-size:auto 2000px; } }
@media (max-width:760px){  .emp-cap-sheet{ contain-intrinsic-size:auto 2980px; } }
@media print{ .emp-cap-sheet{ content-visibility:visible; } }

/* ============================================================
   THE TWO SCHEDULED DATES — THE FIRM'S OWN PLAN (migration 098)
   ------------------------------------------------------------
   "We need a schedule date for new application as well as re-submission"
   — and, asked what one is: "it is the date we plan to submit the
   application."

   The LMIA application form is a screen where almost every date is
   somebody ELSE'S: the filing date is what went to Service Canada, the
   decision date and both expiries are read off their letters, and the
   application number is theirs. Two boxes on it now hold a date this
   office chose for itself, and a consultant who mistakes one for the other
   has a plan recorded as a fact.

   So the two plan fields carry a small tag on their label rather than a
   colour on the input. A tinted box would compete with the red the expiry
   and plan notes use for a real contradiction, and it would print as grey
   shading on the modal; four words on the label say the same thing in both
   themes and on paper, and are still there when the field is read out over
   the phone.

   Gold, not red or green: this is provenance, in the same register as the
   "(from the named worker)" note on the LMIA card, not a warning.
   ============================================================ */
.lf-plan-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-deep);background:rgba(169,130,76,.12);border:1px solid rgba(169,130,76,.28);
  vertical-align:1px}
/* A hairline on the leading edge of the input itself, so the pair still
   reads as a plan once the eye is below the labels. Deliberately the only
   thing that changes about the control: same height, same font, same
   focus ring, so nothing on this row jumps when a plan is typed. */
.fld input.lf-plan{border-left:2px solid rgba(169,130,76,.45)}
@media print{
  .lf-plan-tag{background:none;border-color:currentColor}
  .fld input.lf-plan{border-left-width:1px}
}