/*
 * PinDisclaimerCollect — PIN removal acknowledgement page.
 *
 * Copied from nmicollect's collect.css (itself transcribed from
 * qrcodescanpages/Styles/_tokens.less) so the page matches the rest of the
 * SecureTree public estate. Additions for this page are grouped under
 * "disclaimer additions" at the bottom of the form-column block.
 *
 * Linked from index.html with a ?v= cache-buster — bump it whenever this file
 * changes (no asp-append-version: the page is a static file).
 */
:root{
  color-scheme:light;
  --navy-deep:#0c2f55; --navy:#12406e; --navy-light:#1b4e83;
  --surface:#fff; --raised:#f4f4f4;
  --border:#ccc; --border-subtle:#e6e6e6; --rule:#dedede;
  --text:#2b2b2b; --text-secondary:#666; --text-muted:#707070;
  --action:#20718d; --action-hover:#1d6a84; --focus:#2584a3;
  --negative:#a02b38; --negative-bg:#fdf2f3; --negative-border:#e2b6bb;
  --positive:#2f6027; --positive-bg:#f1f7ef; --positive-border:#c4dcbb;
  --nm-green:#529342; --nm-blue:#2584a3; --nm-yellow:#f7a749; --nm-orange:#e57244; --nm-red:#cb3a49;
  --radius:3px;
  --font:open-sans,"Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;
  --font-display:exo-soft,var(--font);
  --font-cond:open-sans-condensed,var(--font);
}
*,*::before,*::after{box-sizing:border-box}
/* 62.5% keeps 1rem = 10px while still honouring the reader's browser font
   size. Do not re-pin this to an absolute px value. */
html{font-size:62.5%}
body{margin:0;min-height:100vh;font-family:var(--font);font-size:1.5rem;line-height:1.6;
     color:var(--text);background:var(--surface)}
img{display:block;max-width:100%}

.skip{position:absolute;left:1rem;top:-10rem;z-index:100;padding:.8rem 1.4rem;
      background:#fff;color:var(--text);font-size:1.4rem;font-weight:600;
      border:.2rem solid var(--nm-blue);border-radius:var(--radius);text-decoration:none}
.skip:focus{top:1rem;outline:none}

.accent{display:grid;grid-template-columns:repeat(5,1fr);height:.5rem}
.accent span:nth-child(1){background:var(--nm-green)}
.accent span:nth-child(2){background:var(--nm-blue)}
.accent span:nth-child(3){background:var(--nm-yellow)}
.accent span:nth-child(4){background:var(--nm-orange)}
.accent span:nth-child(5){background:var(--nm-red)}

/* ── split ── */
.split{display:flex;flex-direction:column;min-height:calc(100vh - .5rem)}
.split__form{padding:3.2rem 2rem 4rem;background:var(--surface);display:flex;flex-direction:column}
.formwrap{width:100%;max-width:44rem}
.split__panel{
  order:-1;padding:2.8rem 2rem 3.2rem;
  background-color:var(--navy-deep);
  background-image:url("/img/headBg.jpg"),linear-gradient(160deg,#0c2f55,#1b4e83);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.panelwrap{width:100%;max-width:44rem}
.panel__brand{height:2.8rem;width:auto;margin-bottom:2rem}

/* Facts are <details>: tappable disclosures below 1024px, permanently open and
   non-collapsible from 1024px up. The markup ships with `open`, so if the
   script never runs every answer stays visible — it fails open, not shut. */
.fact{border-top:.1rem solid rgba(255,255,255,.16)}
.fact > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
                gap:1.2rem;min-height:5.2rem;padding:1rem 0;cursor:pointer}
.fact > summary::-webkit-details-marker{display:none}
.fact > summary::after{content:"+";flex:none;font-size:2rem;line-height:1;color:rgba(255,255,255,.6)}
.fact[open] > summary::after{content:"\2212"}
.fact > summary:focus-visible{outline:.2rem solid #fff;outline-offset:-.2rem}
.fact h2{margin:0;font-family:var(--font-cond);font-weight:700;font-size:1.2rem;
         letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.fact p{margin:0;padding-bottom:1.4rem;font-size:1.4rem;line-height:1.55;color:rgba(255,255,255,.88)}

/* ── form column ── */
.eyebrow{margin:0 0 .8rem;font-family:var(--font-cond);font-weight:700;font-size:1.2rem;
         letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary)}
h1{margin:0 0 .8rem;font-family:var(--font-display);font-weight:600;font-size:2.4rem;
   line-height:1.22;color:var(--text)}
.lede{margin:0 0 2.8rem;font-size:1.5rem;color:var(--text-secondary)}

.field{margin-bottom:2.4rem}
label{display:block;font-weight:600;font-size:1.4rem;color:var(--text);margin-bottom:.6rem}
input,textarea{width:100%;padding:0 1.3rem;font:inherit;font-size:1.6rem;color:var(--text);
      background:var(--surface);border:.1rem solid var(--border);border-radius:var(--radius)}
input{height:4.6rem}
textarea{padding:1.1rem 1.3rem;line-height:1.5;resize:vertical;min-height:12rem}
input:hover,textarea:hover{border-color:#a4b0ba}
input:focus,textarea:focus{border-color:var(--focus);outline:.2rem solid var(--focus);outline-offset:.2rem}
.hint{margin:.6rem 0 0;font-size:1.3rem;line-height:1.5;color:var(--text-muted)}
/* min-height reserves the message slot so nothing shifts when errors appear */
.err{margin:.6rem 0 0;min-height:1.9rem;font-size:1.3rem;line-height:1.45;color:var(--negative)}
.err:not(:empty)::before{content:"\26A0";margin-right:.5rem;font-weight:700}
.field--invalid input,.field--invalid textarea{border-color:var(--negative);background:var(--negative-bg)}
.field--invalid label{color:var(--negative)}

/* ── disclaimer additions ── */
/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.hp{position:absolute;left:-1000rem;top:auto;width:.1rem;height:.1rem;overflow:hidden}
/* The acknowledgement itself: fully visible (never a scroll box — the reader
   must be able to see all of it), on a raised surface so it reads as a document. */
.disclaimer{margin:0 0 2.4rem;padding:2rem 2.2rem;background:var(--raised);
            border:.1rem solid var(--border-subtle);border-left:.4rem solid var(--navy);
            border-radius:var(--radius)}
.disclaimer h2{margin:0 0 1.2rem;font-family:var(--font-display);font-weight:600;font-size:1.7rem;
               line-height:1.3;color:var(--navy)}
.disclaimer p{margin:0 0 1.2rem;font-size:1.4rem;line-height:1.6}
.disclaimer p:last-child{margin-bottom:0}
.disclaimer__version{margin-top:1.4rem !important;padding-top:1rem;border-top:.1rem solid var(--rule);
                     font-size:1.2rem !important;color:var(--text-muted)}
/* Consent checkbox: big hit target, label wraps beside the box. */
.field--check .check{display:flex;gap:1.2rem;align-items:flex-start;margin:0;padding:1.2rem 1.4rem;
                     font-weight:600;font-size:1.4rem;line-height:1.5;cursor:pointer;
                     border:.1rem solid var(--border);border-radius:var(--radius)}
.field--check .check:hover{border-color:#a4b0ba}
.field--check .check:focus-within{border-color:var(--focus);outline:.2rem solid var(--focus);outline-offset:.2rem}
.field--check input[type=checkbox]{flex:none;width:2.2rem;height:2.2rem;margin:.1rem 0 0;padding:0;
                                   accent-color:var(--action);cursor:pointer}
.field--check input[type=checkbox]:focus{outline:none}
.field--invalid .check{border-color:var(--negative);background:var(--negative-bg)}
.field--invalid .check{color:var(--negative)}

.btn{display:block;width:100%;height:4.8rem;margin-top:2.4rem;font:inherit;font-size:1.6rem;
     font-weight:600;color:#fff;background:var(--action);border:.1rem solid var(--action);
     border-radius:var(--radius);cursor:pointer;
     transition:background-color .15s ease-in-out,border-color .15s ease-in-out}
.btn:hover{background:var(--action-hover);border-color:var(--action-hover)}
.btn:focus-visible{outline:.2rem solid var(--focus);outline-offset:.2rem}
.btn[disabled]{opacity:.55;cursor:default}

.banner{margin-top:1.6rem;padding:1.1rem 1.3rem;border-radius:var(--radius);font-size:1.4rem;line-height:1.5}
.banner:empty{display:none}
.banner--fail{background:var(--negative-bg);border:.1rem solid var(--negative-border);color:var(--negative)}
.done{padding:.4rem 0}
.done__title{margin:0 0 .8rem;font-family:var(--font-display);font-weight:600;font-size:2rem;
             line-height:1.3;color:var(--positive)}
.done__body{margin:0;font-size:1.5rem;color:var(--text-secondary)}
.done:focus{outline:none}
/* load-failure state: same shape as .done, neutral colour */
.notice{padding:.4rem 0}
.notice__title{margin:0 0 .8rem;font-family:var(--font-display);font-weight:600;font-size:2rem;
               line-height:1.3;color:var(--navy)}
.notice__body{margin:0;font-size:1.5rem;color:var(--text-secondary)}
.notice:focus{outline:none}

.legal{margin:2rem 0 0;padding-top:1.6rem;border-top:.1rem solid var(--border-subtle);
       font-size:1.3rem;line-height:1.55;color:var(--text-muted)}
.foot{margin-top:auto;padding-top:3.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
      font-size:1.3rem;color:var(--text-muted)}
.foot a{color:var(--text-secondary);text-decoration:underline}
.foot a:hover{color:var(--text)}
.foot a:focus-visible{outline:.2rem solid var(--focus);outline-offset:.2rem}
.sep{color:var(--rule)}

/* tablet: still stacked, but both columns centre so the right side is not empty */
@media (min-width:601px) and (max-width:1023px){
  .split__form,.split__panel{padding-left:4rem;padding-right:4rem}
  .formwrap,.panelwrap{margin-left:auto;margin-right:auto;max-width:56rem}
}
/* desktop split: form ~60%, panel ~40% bleeding to the right viewport edge.
   The form column is a little wider than nmicollect's because the
   acknowledgement text needs the measure. */
@media (min-width:1024px){
  .split{display:grid;
    grid-template-columns:minmax(2rem,1fr) minmax(0,66rem) minmax(0,42rem) minmax(2rem,1fr);
    align-items:stretch}
  .split__form{grid-column:2;padding:6.4rem 6rem 4.8rem 0}
  .formwrap{max-width:54rem}
  .split__panel{order:0;grid-column:3 / -1;padding:6.4rem 4rem 4.8rem 5.6rem}
  .panelwrap{max-width:38rem}
  .panel__brand{height:3.2rem;margin-bottom:3.2rem}
  h1{font-size:2.8rem}
  .fact{padding:1.8rem 0}
  .fact:last-of-type{padding-bottom:0}
  .fact > summary{display:block;min-height:0;padding:0;cursor:default}
  .fact > summary::after{display:none}
  .fact h2{margin:0 0 .5rem}
  .fact p{padding-bottom:0}
}
/* very wide: gutters weighted 1.4:1 so the navy settles at ~40%, not more */
@media (min-width:1440px){
  .split{grid-template-columns:minmax(2rem,1.4fr) minmax(0,72rem) minmax(0,44rem) minmax(2rem,1fr)}
  .split__form{padding-top:8rem}
  .split__panel{padding-top:8rem;padding-left:6.4rem}
  h1{font-size:3rem}
}
@media (max-width:600px){
  .split__form{padding:2.8rem 1.6rem 3.2rem}
  .split__panel{padding:2.4rem 1.6rem 2.8rem}
  .panel__brand{height:2.4rem;margin-bottom:1.6rem}
  h1{font-size:2.1rem}
  .disclaimer{padding:1.6rem 1.6rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}