/* ============================================================
   Work permit preview — IMM 1442 styling
   Sibling of passport.css. Same stance: reads as a document
   *view*, never as a document — permanent watermark, no Canada
   wordmark or departmental signature, no security features, no
   print path. Conditions are not drawn at the firm's request.
   ============================================================ */

.wp-wrap{display:flex;flex-direction:column;gap:11px}

.wp-doc{
  position:relative;overflow:hidden;
  border-radius:8px;
  background:linear-gradient(168deg,#FCFDFB 0%,#F4F7F1 55%,#EEF3EC 100%);
  color:#16211C;
  padding:14px 16px 12px;
  box-shadow:0 26px 60px -30px rgba(20,32,26,.6), 0 3px 10px -4px rgba(20,32,26,.34),
             inset 0 0 0 1px rgba(22,33,28,.14);
  /* The form is dense — a permit is a lot of small print in a small space —
     so everything inside is sized from one place. */
  font-size:11px;line-height:1.32;
}

/* Fine security engraving, the same trick the passport page uses so the card
   does not read as a flat HTML form. */
.wp-guilloche{
  position:absolute;inset:0;pointer-events:none;opacity:.34;
  background-image:
    repeating-linear-gradient(52deg,rgba(38,92,76,.13) 0 .5px,transparent .5px 6px),
    repeating-linear-gradient(-52deg,rgba(38,92,76,.10) 0 .5px,transparent .5px 8px),
    radial-gradient(circle at 82% 22%,rgba(46,104,86,.13),transparent 56%);
}

.wp-watermark{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-24deg);
  font-family:var(--disp);font-weight:800;font-size:clamp(20px,3.4vw,34px);
  letter-spacing:.16em;white-space:nowrap;pointer-events:none;
  color:rgba(38,92,76,.13);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  z-index:2;
}

/* Lifts the form's own content over the engraving and the watermark. Both of
   those are absolutely positioned and must stay that way — an earlier version
   of this rule matched them too and dropped the watermark to the top of the
   card, where it also pushed the card's scroll width out. */
.wp-doc > *:not(.wp-guilloche):not(.wp-watermark){position:relative;z-index:3;max-width:100%}

/* ---- top row: department line + protected marking ---- */
.wp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wp-dept{display:flex;flex-direction:column;gap:1px;font-size:8.5px;font-weight:600;
  line-height:1.3;color:#25453A;max-width:60%}
.wp-dept span:last-child{font-style:italic;font-weight:500;color:#41645A}
.wp-prot{display:flex;flex-direction:column;gap:1px;text-align:right;flex:0 0 auto;
  font-size:7.5px;font-weight:700;letter-spacing:.06em;color:#6E4B2A}

/* ---- security band ---- */
.wp-band{
  margin-top:9px;border-radius:3px;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 11px;
  background:linear-gradient(103deg,#1E4F44 0%,#2A6B58 46%,#1B4A40 100%);
  color:#EAF3EE;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
/* microtext lines across the band, as on the printed form */
.wp-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 4px);
}
.wp-band{position:relative}
.wp-band-word{
  position:relative;font-family:var(--disp);font-weight:800;
  font-size:clamp(17px,3.4vw,25px);letter-spacing:.16em;line-height:1;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.wp-band-nums{position:relative;text-align:right;display:flex;flex-direction:column;gap:3px;min-width:0}
.wp-band-num{
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:11px;letter-spacing:.10em;font-weight:600;white-space:nowrap;
}
.wp-band-num em{display:block;font-style:normal;font-family:var(--body,inherit);
  font-size:6.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.66;margin-top:1px}
.wp-band .wp-blank{border-bottom-color:rgba(234,243,238,.6)}

/* ---- holder block + reference numbers ---- */
.wp-holder{display:flex;justify-content:space-between;gap:14px;margin-top:11px}
.wp-holder-addr{min-width:0;font-size:10.5px;line-height:1.45;letter-spacing:.02em}
.wp-holder-name{font-weight:700;letter-spacing:.04em;word-break:break-word}
.wp-holder-ids{flex:0 0 auto;text-align:right;font-size:10px;line-height:1.6;
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;letter-spacing:.04em}
.wp-holder-ids span{font-family:var(--body,inherit);font-weight:600;color:#41645A;letter-spacing:.02em}

/* ---- title + section rules ---- */
.wp-title{
  text-align:center;margin:13px 0 9px;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(12px,2.5vw,15.5px);letter-spacing:.13em;
}
.wp-sec{
  margin:9px 0 7px;padding-bottom:3px;
  border-bottom:1px solid rgba(22,33,28,.28);
  font-size:8.5px;font-weight:700;letter-spacing:.10em;color:#25453A;
  text-transform:uppercase;
}

/* ---- field grid ----
   Two columns on the card, one on a narrow one. Long values (employer,
   worksite, occupation, travel document) take the full width so nothing is
   clipped — the firm has been shown truncated cards before and does not
   want to see it again. */
/* align-items:end lines the VALUES up across a row. Without it a two-line
   bilingual label ("LMIA or Exempt No./N° de l'EIMT ou Dispense") pushed its
   value a line below its neighbour's and the form read as though it had
   skipped a field. */
.wp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;align-content:start;align-items:end}
.wp-field{min-width:0}
.wp-wide{grid-column:1 / -1}
.wp-fl{font-size:7.5px;letter-spacing:.09em;text-transform:uppercase;color:#5E7B71;font-weight:700;line-height:1.3}
.wp-fr{font-weight:500;opacity:.78}
.wp-fv{font-size:12px;font-weight:600;margin-top:2px;line-height:1.3;
  overflow-wrap:anywhere;word-break:break-word}
.wp-mono .wp-fv{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;letter-spacing:.05em;font-size:11.5px}
.wp-expired .wp-fv{color:#8C3B2E}
.wp-soon .wp-fv{color:#8A6634}

/* A blank on a paper form is a ruled space. Shown as one so a half-filled
   record LOOKS half-filled instead of looking like a value we hold. */
.wp-blank{
  display:inline-block;vertical-align:baseline;
  width:var(--wp-bw,90px);max-width:100%;height:1em;
  border-bottom:1px dotted rgba(22,33,28,.42);
}

/* ---- remarks (conditions are not drawn — firm's instruction) ---- */
.wp-remarks{margin-top:12px}
.wp-remarks-l{font-size:9px;font-weight:700;letter-spacing:.06em;color:#25453A;margin-bottom:6px}
.wp-rule{height:1px;background:rgba(22,33,28,.20);margin-bottom:11px}

.wp-warn{
  text-align:center;margin:4px 0 10px;
  font-size:9px;font-weight:800;letter-spacing:.05em;color:#7B2F26;
  overflow-wrap:anywhere;
}

.wp-foot{border-top:1px solid rgba(22,33,28,.20);padding-top:7px}
.wp-foot p{margin:0 0 3px;font-size:6.5px;line-height:1.42;letter-spacing:.03em;color:#4C665D}
.wp-foot p:last-of-type{font-style:italic}
.wp-formno{margin-top:4px;font-size:7.5px;font-weight:700;letter-spacing:.08em;color:#25453A}

/* ============================================================
   Placing it beside the passport in the worker dossier's ID band

   polish.css lays the band out as [passport | dates]. This adds a third
   column between them. Written at .dossier specificity so it wins whatever
   order the stylesheets happen to be linked in, and only when the work
   permit column is actually present.
   ============================================================ */
.wk-idband-wp .wp-wrap{margin-bottom:0}

/* Two selectors, two RULES — never one list. A browser without :has() throws
   away a whole selector list containing it, which would take the class-based
   rule with it and leave the band on two columns. */
.dossier .wk-idband.wk-idband-3{
  grid-template-columns:minmax(0,1.12fr) minmax(0,1.06fr) minmax(0,.82fr);
  gap:16px;
}
.dossier .wk-idband:has(> .wk-idband-wp){
  grid-template-columns:minmax(0,1.12fr) minmax(0,1.06fr) minmax(0,.82fr);
  gap:16px;
}

/* Below ~1240px three columns squeeze the permit's small print past legible.
   The two documents stay side by side — that is the point of the pair — and
   the dates strip drops to its own full-width row underneath. */
@media (max-width:1240px){
  .dossier .wk-idband.wk-idband-3{grid-template-columns:1fr 1fr;gap:14px}
  .dossier .wk-idband.wk-idband-3 .dh-stats{grid-column:1 / -1}
  .dossier .wk-idband:has(> .wk-idband-wp){grid-template-columns:1fr 1fr;gap:14px}
  .dossier .wk-idband:has(> .wk-idband-wp) .dh-stats{grid-column:1 / -1}
}

@media (max-width:820px){
  .dossier .wk-idband.wk-idband-3{grid-template-columns:1fr}
  .dossier .wk-idband:has(> .wk-idband-wp){grid-template-columns:1fr}
  .wk-idband-wp{order:3}
  .wp-doc{font-size:12px;padding:14px 15px 12px}
  .wp-grid{grid-template-columns:1fr 1fr}
  .wp-fv{font-size:13px}
  .wp-holder{flex-direction:column;gap:8px}
  .wp-holder-ids{text-align:left}
}

@media (max-width:430px){
  .wp-grid{grid-template-columns:1fr}
  .wp-head{flex-direction:column;gap:6px}
  .wp-dept{max-width:100%}
  .wp-prot{text-align:left}
  .wp-band{flex-direction:column;align-items:flex-start;gap:6px}
  .wp-band-nums{text-align:left}
}