/* ==========================================================================
   Dewan Integriti Malaysia — public membership verification (/sahkan).

   Loads on top of dim.css and uses its tokens, but is deliberately its own
   file: this page is opened by a stranger's phone camera and nothing else on
   the property shares its job. It is the only page here designed to be read
   at arm's length, one-handed, outdoors, in a hurry.

   MOBILE FIRST in the literal sense — the default rules ARE the phone layout,
   and the only media query widens things for a desktop that scanned via a
   webcam or followed a shared link.
   ========================================================================== */

.vbody{
  background:var(--grad-deep);
  color:var(--ink);
  min-height:100vh;
  min-height:100dvh;              /* dvh: the iOS toolbar must not crop the verdict */
  display:flex;flex-direction:column;
  margin:0;
}

/* ---------- top bar ---------- */
.vtop{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;max-width:640px;margin-inline:auto;width:100%;box-sizing:border-box;
}
.vtop__brand{display:flex;align-items:center}
.vtop__brand img{height:34px;width:auto;display:block}
.vtop__lang{display:inline-flex;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.28);border-radius:999px}
.vtop__lang a{padding:5px 10px;font-size:14px;color:#c3cfe6;border-radius:999px;text-decoration:none}
.vtop__lang a.is-on{background:var(--yellow);color:#2b2400;font-weight:700}

/* ---------- shell ---------- */
.vmain{
  flex:1;width:100%;max-width:640px;margin-inline:auto;
  padding:4px 18px 30px;box-sizing:border-box;
}
.vcard{
  background:var(--white);
  border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(3,10,28,.34);
  overflow:hidden;
}

/* ---------- the verdict ----------
   Full-bleed and first. A person holding someone else's card wants one word
   before any detail, so the colour block carries the answer and the fields
   below it are for checking, not for deciding. */
.vverdict{padding:26px 22px 22px;text-align:center;color:#fff}
.vcard--ok   .vverdict{background:linear-gradient(160deg,#0f7a43 0%,#12934f 100%)}
.vcard--warn .vverdict{background:linear-gradient(160deg,#8a5a06 0%,#b57b0d 100%)}
.vcard--bad  .vverdict{background:linear-gradient(160deg,#8c1d1d 0%,#af2626 100%)}

.vverdict__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;
  background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.5);
  margin-bottom:14px;
}
.vverdict__mark svg{width:34px;height:34px;color:#fff}
.vverdict h1{
  font-family:var(--display,'Archivo',system-ui,sans-serif);
  font-size:clamp(23px,6.4vw,30px);line-height:1.15;
  margin:0 0 8px;color:#fff;letter-spacing:.01em;
}
.vverdict p{margin:0;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.94)}

/* ---------- member portrait ----------
   It sits between the verdict and identity fields: first answer whether the
   card is valid, then let the person holding it compare the face, then read the
   text details. The source file stays outside public_html. */
.vportrait{padding:22px 22px 4px;display:flex;justify-content:center;background:#fff}
.vportrait img{
  display:block;width:min(68vw,260px);aspect-ratio:4/5;object-fit:cover;object-position:center 24%;
  border-radius:20px;border:1px solid var(--line);box-shadow:0 12px 28px rgba(8,22,55,.14);
}
.vportrait__empty{
  width:min(68vw,260px);aspect-ratio:4/5;border-radius:20px;border:1px dashed #b8c2d3;
  background:linear-gradient(145deg,#f7f8fb,#eef1f7);color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  font-size:14px;font-weight:600;text-align:center;
}
.vportrait__empty svg{width:62px;height:62px;fill:none;stroke:#8f9bb0;stroke-width:1.5;stroke-linecap:round}

/* ---------- the fields ---------- */
.vfields{margin:0;padding:8px 22px 4px}
.vfields > div{
  padding:13px 0;border-bottom:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:3px;
}
.vfields > div:last-child{border-bottom:0}
.vfields dt{
  margin:0;font-size:12.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.vfields dd{margin:0;font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.35}
.vfields__big{font-size:clamp(20px,5.4vw,25px) !important;font-weight:700 !important;letter-spacing:-.01em}
.vfields code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15.5px;letter-spacing:.04em;
  background:var(--tint);border:1px solid var(--line);border-radius:8px;padding:3px 9px;
}
/* The DIM appointment. `.pill` is declared in portal.css, which this page does
   NOT load — the public layout carries dim.css and this sheet only. Without a
   rule here the position rendered as bare text inside the <dd>, so the one field
   DIM asked to see stood out least, and it looked different from the same title
   on the member profile and the admin desk. Declared rather than imported: the
   portal sheet is a logged-in work surface and pulling it in for one class would
   ship a nav, a flash and a form system to a stranger with a phone camera.
   Sized a touch larger than the portal's pill because a scanned card is read at
   arm's length, and word-break keeps a long Malay title (Timbalan Setiausaha
   Agung) inside the card on a narrow phone instead of overflowing it. */
.vfields .pill{
  display:inline-block;align-self:flex-start;max-width:100%;
  padding:5px 14px;border-radius:999px;
  font-size:15.5px;font-weight:700;letter-spacing:.03em;line-height:1.4;
  overflow-wrap:anywhere;
}
.vfields .pill--info{background:#eff1f4;color:#15429b}

.vstamp{
  margin:0;padding:14px 22px 18px;
  font-size:13px;color:var(--muted);border-top:1px solid var(--line-2);
}
.vstamp code{font-family:ui-monospace,Menlo,monospace;word-break:break-all;font-size:12.5px}

/* ---------- form / intro ---------- */
.vintro{padding:26px 22px 4px}
.vintro h1{
  font-family:var(--display,'Archivo',system-ui,sans-serif);
  font-size:clamp(22px,5.6vw,28px);margin:0 0 10px;color:var(--royal-800);line-height:1.18;
}
.vintro p{margin:0;font-size:15.5px;line-height:1.55;color:var(--body)}

.vform{padding:18px 22px 6px;display:flex;flex-direction:column;gap:10px}
.vform label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vform input{
  font:inherit;font-size:17px;                 /* >=16px or iOS Safari zooms the page on focus */
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
  padding:14px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);width:100%;box-sizing:border-box;
}
.vform input:focus{outline:none;border-color:var(--royal-500);box-shadow:0 0 0 4px rgba(26,84,176,.14)}
.vform input::placeholder{color:#a9b2c4;letter-spacing:.02em}
.vform button{
  font:inherit;font-weight:700;font-size:16.5px;cursor:pointer;
  padding:14px 18px;border:0;border-radius:var(--r-sm);
  background:var(--royal-700);color:#fff;
}
.vform button:hover{background:var(--royal-600)}

.vhelp{margin:0;padding:10px 22px 18px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.vhelp a{color:var(--royal-600);font-weight:600}
.valert{
  margin:14px 22px 0;padding:12px 14px;border-radius:var(--r-sm);
  background:#fdf3f3;border:1px solid #f0cccc;color:#8c1d1d;font-size:14.5px;
}
.vnote{
  margin:0;padding:16px 22px 22px;border-top:1px solid var(--line-2);background:var(--tint);
}
.vnote p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}

.vagain{margin:20px 0 0;text-align:center}
.vagain a{color:#cdd8ec;font-size:15px;font-weight:600;text-decoration:none}
.vagain a:hover{color:#fff}

/* ---------- footer ---------- */
.vfoot{
  max-width:640px;margin-inline:auto;width:100%;box-sizing:border-box;
  padding:8px 20px 30px;text-align:center;color:#9dabc6;font-size:12.5px;line-height:1.7;
}
.vfoot p{margin:0}
.vfoot strong{color:#dce4f2}
.vfoot a{color:var(--yellow);text-decoration:none}

@media (min-width:680px){
  .vmain{padding-top:14px}
  .vverdict{padding:34px 30px 28px}
  .vfields{padding-inline:30px}
  .vstamp,.vhelp,.vnote,.vintro,.vform{padding-inline:30px}
  .vportrait{padding:28px 30px 6px}
}

/* Honour a reader who has asked for less motion or more contrast. */
@media (prefers-contrast:more){
  .vcard{box-shadow:none;border:2px solid var(--ink)}
  .vfields dt{color:#3b4457}
}

/* ==========================================================================
   THE MEMBERSHIP CARD  (portal /ahli/kad)
   Sized in millimetres at ISO/IEC 7810 ID-1 — 85.6 x 53.98mm, a bank card.
   The same element is previewed on screen via a scale transform, so the thing
   being previewed IS the thing being printed.
   ========================================================================== */
.cardstage{
  /* 50px, not 26px. The card is previewed at scale(1.45), and a transform does
     NOT change the element's layout box — 53.98mm reserves 204px while the card
     visually occupies 296px, so 46px hangs off each end. At 26px the stage
     quietly clipped the card's own header and its footer (the code and the
     integritychamber.my/sahkan line) on every preview, on screen only; print
     resets the scale to 1, so nothing about the printed card ever showed it. */
  margin:18px 0 0;padding:50px 0;
  display:flex;
  /* `safe center` matters on a 320px phone, where the card is wider than the
     stage: a centred flex item overflows EQUALLY on both sides, and the left
     overflow of a scroll container cannot be scrolled to — so the leading 22px
     of the card, band and all, was unreachable on the narrowest phones. `safe`
     falls back to flex-start exactly when centring would push content out of
     reach. The plain `center` above it is the fallback for a browser that does
     not know the keyword. */
  justify-content:center;
  justify-content:safe center;
  background:
    linear-gradient(0deg,rgba(7,29,73,.04),rgba(7,29,73,.04)),
    repeating-linear-gradient(45deg,#f4f6f9 0 10px,#eef1f6 10px 20px);
  border:1px solid var(--line);border-radius:var(--r);
  overflow:auto;
}
.idcard{
  width:85.6mm;height:53.98mm;
  flex:none;box-sizing:border-box;
  background:var(--white);
  border-radius:3.2mm;
  box-shadow:0 6px 22px rgba(7,29,73,.22);
  display:flex;overflow:hidden;
  color:var(--ink);
  /* Screen preview only. The print rule below resets it to 1 so the printed
     card is the true 85.6mm — a transform would otherwise scale the output. */
  transform:scale(1.45);transform-origin:center center;
}
/* The flag rule: royal blue / white / royal yellow, down the leading edge. */
.idcard__band{
  width:2.6mm;flex:none;
  background:linear-gradient(180deg,
    var(--royal-800) 0 33.3%, #fff 33.3% 66.6%, var(--yellow) 66.6% 100%);
}
.idcard__body{flex:1;padding:3.1mm 3.4mm 2.6mm;display:flex;flex-direction:column;min-width:0}

.idcard__head{display:flex;align-items:center;gap:2mm;padding-bottom:1.8mm;border-bottom:.25mm solid var(--line)}
.idcard__logo{height:6.4mm;width:auto;flex:none}
.idcard__org{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.idcard__org strong{
  font-family:var(--display,'Archivo',system-ui,sans-serif);
  font-size:2.5mm;letter-spacing:.055em;color:var(--royal-800);white-space:nowrap;
}
.idcard__org span{font-size:2mm;color:var(--muted);letter-spacing:.02em;white-space:nowrap}

.idcard__main{flex:1;display:flex;gap:2.6mm;padding-top:2.2mm;min-height:0}
.idcard__who{flex:1;min-width:0;display:flex;flex-direction:column}
.idcard__label{
  font-size:1.9mm;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.idcard__name{
  font-family:var(--display,'Archivo',system-ui,sans-serif);
  font-size:4.1mm;line-height:1.12;margin:.7mm 0 0;color:var(--royal-800);
  letter-spacing:-.005em;
  /* A long Malaysian full name must wrap to two lines, not overflow the card. */
  overflow-wrap:anywhere;
}
/* The steps. Measured on a rendered card at each length, not calculated:
   4.1mm holds about 20 characters a line in this column, and the block below the
   name (company, tier, member number, expiry) needs the room it is standing in.
   A formal royal styling is five names deep and has to come down to 2.2mm to let
   the number and the expiry stay on the card. */
.idcard__name.is-long{font-size:3.5mm}
.idcard__name.is-longer{font-size:2.95mm;line-height:1.16}
.idcard__name.is-longest{font-size:2.5mm;line-height:1.2}
.idcard__name.is-formal{font-size:2.2mm;line-height:1.22;letter-spacing:0}
.idcard__co{margin:.7mm 0 0;font-size:2.35mm;color:var(--body);line-height:1.25;overflow-wrap:anywhere}
.idcard__tier{
  margin:1mm 0 0;font-size:2.4mm;font-weight:700;color:var(--royal-600);line-height:1.2;
}
/* `margin-top:auto` only pushes this down when there IS spare room. With a long
   name there was none, so the block simply overlapped the line above it. A
   minimum gap keeps the number and the expiry legible whatever the name does. */
.idcard__meta{margin-top:auto;display:flex;gap:3.4mm;padding-top:1.4mm;flex:none}
.idcard__who > .idcard__tier{flex:none}
.idcard__who > .idcard__name{flex:0 1 auto;min-height:0}
.idcard__meta div{display:flex;flex-direction:column;min-width:0}
.idcard__meta span{font-size:1.85mm;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.idcard__meta b{font-size:2.5mm;color:var(--ink);font-family:ui-monospace,Menlo,monospace;letter-spacing:.01em}

/* 22mm, not 19mm. The symbol is 41 modules plus a 4-module quiet zone each side,
   so 22mm gives ~0.45mm per module on paper. At 19mm it was ~0.39mm, which is
   inside the range where a phone camera starts needing a second attempt — and the
   one thing this card cannot afford is being awkward to scan. */
.idcard__qr{flex:none;width:22mm;display:flex;flex-direction:column;align-items:center;gap:.6mm}
.idcard__qr svg{width:22mm;height:22mm;display:block}
.idcard__scan{font-size:1.75mm;letter-spacing:.05em;color:var(--muted);text-align:center;line-height:1.2}

.idcard__foot{
  margin-top:1.6mm;padding-top:1.4mm;border-top:.25mm solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:2mm;
}
.idcard__code{
  font-family:ui-monospace,Menlo,monospace;font-size:1.95mm;letter-spacing:.045em;
  color:var(--muted);overflow-wrap:anywhere;
}
.idcard__site{font-size:1.95mm;font-weight:700;color:var(--royal-700);white-space:nowrap}

.cardacts{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.printnote{display:none}

/* ==========================================================================
   THE QR ON ITS OWN  (admin card desk, /admin/kad/<id>)
   The secretariat sends this file to a print shop, so the proof they check on
   screen is shown large — big enough to see that it is a complete symbol with
   its quiet zone, not a thumbnail that hides a clipped edge.
   ========================================================================== */
.qrproof{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.qrproof__art{
  flex:none;padding:12px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);
}
.qrproof__art svg{width:54mm;height:54mm;display:block}
.qrproof__side{flex:1;min-width:250px}
/* 14px, not 13. This is the link an admin reads character by character to check
   they are about to send the right person's code to a printer, and anything
   under 14px also triggers iOS's focus zoom on the surrounding page. */
.qrproof__url{
  font-family:ui-monospace,Menlo,monospace;font-size:14px;
  overflow-wrap:anywhere;line-height:1.5;
}
@media (max-width:560px){
  .qrproof__art svg{width:44mm;height:44mm}
}

/* On a narrow phone the 85.6mm card plus a 1.45 scale is wider than the
   viewport, so drop the preview scale rather than let it clip. */
@media (max-width:560px){
  .idcard{transform:scale(1)}
  .cardstage{padding:16px 8px}
}

@media print{
  /* Only the card reaches the paper. */
  .no-print,.pnav,.pfoot,.alert,.phead{display:none !important}
  body.portal{background:#fff !important}
  .pmain,.pwrap{padding:0 !important;margin:0 !important;max-width:none !important}
  .cardstage{
    background:none !important;border:0 !important;padding:0 !important;margin:0 !important;
    display:block !important;overflow:visible !important;
  }
  .idcard{
    transform:none !important;                 /* true 85.6 x 53.98mm on paper */
    box-shadow:none !important;
    border:.2mm solid #c8ced9 !important;      /* a cut line, since there is no bleed */
    break-inside:avoid;page-break-inside:avoid;
  }
  .printnote{display:block;margin-top:6mm;font-size:9pt;color:#555}
  @page{size:A4;margin:12mm}
}