/* GTS Verify — one stylesheet, every page. No external requests, no webfonts.
   Screen: modern institutional. Print: flattened to a government form (see @media print). */

:root{
  /* Brand, sampled from the letterhead */
  --navy:#28326F;
  --blue:#0396FE;
  --link:#0B5ED7;

  /* Institutional neutrals */
  --ink:#0F172A;
  --body:#334155;
  --muted:#5E6B7E;   /* 4.94:1 worst case, over the #F1F5F9 code tint */
  --line:#E2E8F0;
  --hair:#EEF2F7;
  --surface:#FFFFFF;
  --page:#F4F6FA;

  /* Status. Each pairs a text colour with its own tint; both meet 4.5:1. */
  --valid:#0F6D3C;      --valid-bg:#ECFAF1;      --valid-edge:#B6E3C9;
  --revoked:#B01218;    --revoked-bg:#FEF0F0;    --revoked-edge:#F3C2C2;
  --superseded:#8A5300; --superseded-bg:#FFF7E8; --superseded-edge:#EFD69C;

  --r:10px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 20px -8px rgba(15,23,42,.10);
  --sans:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,
         "Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; padding:0 16px 72px; background:var(--page); color:var(--body);
  font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
.wrap{max-width:46rem; margin:0 auto}
h1{font-size:1.5rem; line-height:1.25; font-weight:650; color:var(--ink); margin:0 0 .35rem; letter-spacing:-.011em}
h2{font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
   color:var(--muted); margin:2.25rem 0 .85rem}
p{margin:.65rem 0}
a{color:var(--link); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:3px}
strong{color:var(--ink); font-weight:650}
ol,ul{margin:.65rem 0; padding-inline-start:1.25rem}
li{margin:.4rem 0}

/* Urdu. Nastaliq where the device has it, naskh otherwise. No webfont request:
   a page that phones home leaks who is verifying which document.
   ponytail: self-host Noto Nastaliq Urdu woff2 in site/fonts/ when we have the
   file; add one @font-face and prepend it to this stack. */
.ur{
  direction:rtl; text-align:right;
  font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",
              "Nafees Nastaleeq","Noto Naskh Arabic",serif;
  line-height:2.25;
}
.ur [dir=ltr]{display:inline-block; font-family:var(--sans)}

/* ---------------------------------------------------------------- masthead */
.site{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:20px 0 16px; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand img{
  width:44px; height:44px; border-radius:9px; display:block;
  box-shadow:0 1px 3px rgba(15,23,42,.18);
}
.brand-n{display:block; font-weight:700; font-size:.95rem; color:var(--navy);
         letter-spacing:.005em; line-height:1.25}
.brand-s{display:block; font-size:.8rem; color:var(--muted); line-height:1.4}
.brand-tag{
  margin-inline-start:auto; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--navy);
  background:#EDF2FC; border:1px solid #D5E0F5; border-radius:999px; padding:5px 11px;
}

/* ---------------------------------------------------------------- languages
   Plain links, not a toggle. Switching language is an ordinary navigation, so
   it works with JavaScript off and cannot half-fail on a stranger's phone. */
.langs{
  display:flex; flex-wrap:wrap; gap:6px 15px; align-items:baseline;
  margin:0 0 24px; padding-bottom:14px; border-bottom:1px solid var(--line);
  font-size:.9rem;
}
.langs-l{font-size:.68rem; font-weight:700; text-transform:uppercase;
         letter-spacing:.11em; color:var(--muted)}
.langs a{color:var(--link); text-decoration:none}
.langs a:hover{text-decoration:underline}
.langs [aria-current]{font-weight:700; color:var(--ink)}

/* Per-locale faces. Nastaliq needs far more leading than a Latin face; Arabic
   naskh and CJK need their own stacks. All system fonts - hard rule 6 forbids
   fetching a webfont, which would leak who is verifying which document. */
:root[lang="ur"]{--sans:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",
                        "Nafees Nastaleeq","Noto Naskh Arabic",serif}
:root[lang="ur"] body{line-height:2.15}
:root[lang="ur"] h1,:root[lang="ur"] .banner .t{line-height:1.7}
:root[lang="ar"]{--sans:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif}
:root[lang="ar"] body{line-height:1.9}
:root[lang="zh"]{--sans:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",
                        "Noto Sans CJK SC","Segoe UI",sans-serif}
:root[lang="ja"]{--sans:"Yu Gothic UI","Hiragino Sans","Meiryo",
                        "Noto Sans CJK JP","Segoe UI",sans-serif}
:root[lang="ko"]{--sans:"Malgun Gothic","Apple SD Gothic Neo",
                        "Noto Sans CJK KR","Segoe UI",sans-serif}
:root[lang="hi"]{--sans:"Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari",
                        "Segoe UI",sans-serif}
:root[lang="hi"] body{line-height:1.8}
:root[lang="fa"]{--sans:"Segoe UI","Iranian Sans","Vazirmatn",
                        "Noto Naskh Arabic",Tahoma,sans-serif}
:root[lang="fa"] body{line-height:1.95}

/* ---------------------------------------------------------------- surfaces */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:26px 26px 30px;
}
.card + .card{margin-top:18px}
.lede{font-size:1.02rem; color:var(--body)}

/* ---------------------------------------------------------------- status banner
   The largest element on the page. Colour is never the only signal: the icon,
   the word and the border weight each carry the state on their own. */
.banner{
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid; border-inline-start-width:5px; border-radius:var(--r);
  padding:18px 20px; margin:0 0 26px;
}
.banner .ico{flex:0 0 auto; width:32px; height:32px; margin-top:1px}
.banner .t{font-size:1.6rem; font-weight:700; line-height:1.15; letter-spacing:-.015em}
.banner .t-ur{font-size:1.15rem; line-height:1.9; margin:.1rem 0 0; font-weight:400}
.banner .why{margin:.7rem 0 0; font-size:.95rem; color:var(--ink)}
.s-valid{color:var(--valid); background:var(--valid-bg); border-color:var(--valid-edge); border-inline-start-color:var(--valid)}
.s-revoked{color:var(--revoked); background:var(--revoked-bg); border-color:var(--revoked-edge); border-inline-start-color:var(--revoked)}
.s-superseded{color:var(--superseded); background:var(--superseded-bg); border-color:var(--superseded-edge); border-inline-start-color:var(--superseded)}

/* ---------------------------------------------------------------- the code */
.code{
  font:650 1.15rem/1.35 var(--mono); letter-spacing:.05em; color:var(--ink);
  background:#F8FAFC; border:1px solid var(--line); border-radius:7px;
  padding:6px 11px; display:inline-block; white-space:nowrap;
}
.code-sm{font-size:.9rem; padding:2px 7px}

/* ---------------------------------------------------------------- field grid */
.fields{display:grid; grid-template-columns:1fr 1fr; gap:0 30px; margin:0}
.f{border-top:1px solid var(--hair); padding:14px 0}
.f:first-child{border-top:0; padding-top:0}
.f-wide{grid-column:1 / -1}
.f dt{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
      color:var(--muted); margin:0 0 5px}
.f dt .ur{display:block; text-align:left; font-size:.9rem; font-weight:400;
           text-transform:none; letter-spacing:0; line-height:1.85; margin-top:-1px}
.f dd{margin:0; font-size:1.02rem; font-weight:600; color:var(--ink)}
@media (max-width:34rem){ .fields{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- content binding */
.bind{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start}
@media (max-width:34rem){.bind{grid-template-columns:1fr}}
.thumb-frame{background:#F8FAFC; border:1px solid var(--line); border-radius:8px; padding:8px; width:max-content; max-width:100%}
.thumb{display:block; width:238px; max-width:100%; height:auto; border:1px solid var(--line); background:#fff}
.thumb-cap{font-size:.72rem; color:var(--muted); text-align:center; margin:7px 0 1px}
.hashbox{background:#F8FAFC; border:1px solid var(--line); border-inline-start:4px solid var(--navy);
         border-radius:8px; padding:13px 15px; margin:.9rem 0}
/* The evidence card and the fingerprint carry the certificate's status, so the
   page reads as one verdict instead of a red banner above a neutral tick. */
.hashbox.s-revoked{border-inline-start-color:var(--revoked)}
.hashbox.s-superseded{border-inline-start-color:var(--superseded)}
.card.s-revoked{border-inline-start:4px solid var(--revoked)}
.card.s-superseded{border-inline-start:4px solid var(--superseded)}
.match-note{margin:.5rem 0 0; font-size:.93rem; font-weight:600; color:var(--ink)}
.card.s-revoked .match-note{color:var(--revoked)}
.card.s-superseded .match-note{color:var(--superseded)}
.hash{font:600 .95rem/1.55 var(--mono); word-break:break-all; color:var(--muted); margin:0}
.hash b{color:var(--ink); font-weight:700}
.howto{font-size:.86rem; color:var(--muted); margin:.6rem 0 0}
.howto code{font-family:var(--mono); font-size:.92em; background:#F1F5F9;
            border:1px solid var(--line); border-radius:4px; padding:1px 5px}

.sig{display:flex; gap:9px; align-items:flex-start; margin:1rem 0 0;
     font-size:.92rem; font-weight:600; color:var(--ink)}
.sig svg{width:19px; height:19px; flex:0 0 auto; color:var(--navy); margin-top:2px}
.rule-line{font-weight:600; color:var(--ink)}
p.rule{font-weight:600; color:var(--ink)}
.card > .note{margin:0 0 1rem}

/* ---------------------------------------------------------------- scope, dates
   The one sentence a clerk most needs and most often assumes wrongly. */
.scope{margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--hair);
       font-size:.93rem; color:var(--muted)}
.checked{margin:.55rem 0 0; font-size:.85rem; color:var(--muted)}
.tz{font-size:.82em; font-weight:400; color:var(--muted); white-space:nowrap}
.replaces{margin:.65rem 0 0; font-size:.95rem; color:var(--ink); font-weight:400}
/* A two-line Urdu prompt on the English pages, so a local reader who lands
   here first is not stranded before finding the language row. */
.ur-hint{
  margin:.9rem 0 0; font-size:.95rem; color:var(--muted); direction:rtl; text-align:right;
  font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",
              "Nafees Nastaleeq","Noto Naskh Arabic",serif;
  line-height:2.1;
}

/* ---------------------------------------------------------------- pdf check
   The file is hashed in the browser and never sent anywhere. */
.vbtn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  min-height:48px; padding:12px 24px; border:1.5px solid var(--navy);
  border-radius:9px; color:#fff; background:var(--navy);
  font:650 1rem/1.3 var(--sans); transition:background .15s ease;
}
.vbtn:hover{background:#1E2657}
.vbtn:focus-within{outline:3px solid var(--blue); outline-offset:2px}
.vres{margin:1rem 0 0; font:650 .98rem/1.5 var(--sans); word-break:break-all}
.vres.busy{color:var(--muted)}
.vres.ok{color:var(--valid)}
.vres.warn{color:var(--superseded)}
.vres.bad{color:var(--revoked)}
.card.drop{outline:3px dashed var(--blue); outline-offset:-6px}

/* ---------------------------------------------------------------- lookup */
form.lookup{display:flex; gap:10px; flex-wrap:wrap; margin:1.1rem 0 .5rem}
form.lookup input{
  flex:1 1 17rem; min-height:52px; padding:12px 15px; color:var(--ink); background:#fff;
  font:1.05rem/1.3 var(--mono); letter-spacing:.05em; text-transform:uppercase;
  border:1.5px solid #CBD5E1; border-radius:9px;
}
form.lookup input::placeholder{color:#94A3B8; letter-spacing:.04em}
form.lookup input:focus{border-color:var(--blue); outline:3px solid rgba(3,150,254,.22); outline-offset:0}
form.lookup button{
  min-height:52px; padding:12px 28px; cursor:pointer; color:#fff; background:var(--navy);
  font:650 1rem/1.3 var(--sans); border:1.5px solid var(--navy); border-radius:9px;
  transition:background .15s ease, transform .15s ease;
}
form.lookup button:hover{background:#1E2657}
form.lookup button:active{transform:translateY(1px)}

/* ---------------------------------------------------------------- contact block */
.fallback{
  background:#F8FAFC; border:1px solid var(--line); border-radius:var(--r);
  padding:17px 19px; margin:1.6rem 0 0;
}
.fallback p{margin:.35rem 0}
.fallback .k{font-weight:650; color:var(--ink)}
.contact{display:flex; gap:8px 22px; flex-wrap:wrap; margin:.5rem 0 0; font-weight:600}
.contact span,.contact a{display:inline-flex; align-items:center; gap:7px;
                          max-width:100%; overflow-wrap:anywhere}
.contact svg{width:17px; height:17px; flex:0 0 auto; color:var(--muted)}

.note{display:flex; gap:11px; align-items:flex-start; font-size:.92rem;
      color:var(--body); background:#F8FAFC; border:1px solid var(--line);
      border-radius:var(--r); padding:14px 16px}
.note svg{width:19px; height:19px; flex:0 0 auto; color:var(--navy); margin-top:2px}

table.states{border-collapse:collapse; width:100%; margin:.4rem 0 0}
table.states th,table.states td{border-top:1px solid var(--hair); padding:12px 0; text-align:left; vertical-align:top}
table.states tr:first-child th,table.states tr:first-child td{border-top:0}
table.states th{width:34%; padding-inline-end:18px; font-weight:650; color:var(--ink)}
table.states th .ur{text-align:left; font-size:.9rem; font-weight:400;
                    color:var(--muted); line-height:1.9}

footer{
  max-width:46rem; margin:26px auto 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--muted);
  display:flex; gap:8px 20px; flex-wrap:wrap; align-items:center;
}
footer .sep{color:#94A3B8}   /* decorative punctuation, carries no meaning */

@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------------------------------------------------------------- print
   Everything above is for a screen. On paper the rules invert: no tints behind
   text, no shadows, no reversed-out anything, heavy borders that survive a bad
   photocopy and a black-and-white fax. */
@media print{
  :root{--page:#fff; --shadow:none}
  body{background:#fff; color:#000; font-size:11pt; padding:0}
  .wrap,footer{max-width:none}
  .card{border:0; border-radius:0; box-shadow:none; padding:0}
  .card + .card{margin-top:14pt}
  .banner{
    background:#fff !important; color:#000 !important;
    border:2.5pt solid #000 !important; border-radius:0; page-break-inside:avoid;
  }
  .banner .t{font-size:20pt}
  .brand-tag,.thumb-frame,.hashbox,.fallback,.note,.code{
    background:#fff !important; border-color:#000 !important; border-radius:0;
  }
  .hashbox{border-left-width:2.5pt}
  .hash,.hash b,.f dd,strong{color:#000}
  .f dt,.howto,.thumb-cap,footer{color:#333}
  .howto code{background:#fff; border-color:#666}
  a{color:#000; text-decoration:none}
  .site{border-bottom:1.5pt solid #000}
  .noprint,.langs,#pdfcheck,.checked{display:none}
  .scope{color:#000; border-top-color:#000}
  .sig,.rule-line,p.rule{color:#000}
  /* A heading must not be stranded at the foot of a page with its content on the
     next one, and the evidence block only makes sense read as a unit. */
  h2{break-after:avoid; page-break-after:avoid}
  .card,.bind,.fallback{break-inside:avoid; page-break-inside:avoid}
  /* Last-resort ceiling: if a renderer ignores the icon sizing above, an icon
     must still not take over the page. */
  svg{max-width:34px; max-height:34px}
}