/*
 * GrnaLookup - replacement gift card lookup page.
 *
 * Self-contained: no web fonts (the SecureTree Typekit kit is domain-locked
 * and this is a client-facing page). Linked from index.html with a ?v=
 * cache-buster - bump it whenever this file changes (static file, no
 * asp-append-version).
 */
:root{
  color-scheme:light;
  --ink:#1c1c1c; --ink-2:#4a4a4a; --ink-3:#767676;
  --surface:#fff; --canvas:#f3f1ee; --raised:#faf9f7;
  --border:#d6d2cc; --border-subtle:#e8e5e0; --rule:#e2dfd9;
  --accent:#b1121b; --accent-hover:#8f0e15; --focus:#2b6cb0;
  --negative:#a02b38; --negative-bg:#fdf2f3; --negative-border:#e2b6bb;
  --positive:#2f6027; --positive-bg:#f1f7ef;
  --radius:4px;
  --font:"Segoe UI",Roboto,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*,*::before,*::after{box-sizing:border-box}
/* 62.5% keeps 1rem = 10px while honouring the reader's browser font size. */
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(--ink);background:var(--canvas)}

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

/* -- masthead -- */
.masthead{background:var(--ink);color:#fff;border-bottom:.4rem solid var(--accent)}
.masthead__inner{max-width:64rem;margin:0 auto;padding:2.2rem 2rem 2rem}
.masthead__brand{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.masthead__sub{margin:.3rem 0 0;font-size:1.4rem;color:rgba(255,255,255,.7)}

/* -- page / card -- */
.page{padding:3.2rem 2rem 4.8rem}
.page:focus{outline:none}
.card{max-width:64rem;margin:0 auto;padding:3.2rem 3.2rem 2.4rem;background:var(--surface);
      border:.1rem solid var(--border-subtle);border-radius:.6rem;box-shadow:0 .2rem 1.2rem rgba(0,0,0,.05)}
.view:focus{outline:none}

.eyebrow{margin:0 0 .6rem;font-size:1.2rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--positive)}
h1{margin:0 0 .8rem;font-size:2.4rem;line-height:1.25;font-weight:700;color:var(--ink)}
.lede{margin:0 0 2.4rem;font-size:1.5rem;color:var(--ink-2)}

/* -- form -- */
.field{margin-bottom:2rem}
label{display:block;font-weight:600;font-size:1.4rem;margin-bottom:.6rem}
input{width:100%;height:4.6rem;padding:0 1.3rem;font:inherit;font-size:1.6rem;color:var(--ink);
      background:var(--surface);border:.1rem solid var(--border);border-radius:var(--radius)}
input::placeholder{color:#a8a39c}
input:hover{border-color:#aaa49c}
input: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(--ink-3)}
/* 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{border-color:var(--negative);background:var(--negative-bg)}
.field--invalid label{color:var(--negative)}

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

.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)}

/* -- result -- */
.newcard{margin:0 0 2.4rem;padding:2rem 2.2rem;background:var(--raised);border:.1rem solid var(--border-subtle);
         border-left:.4rem solid var(--accent);border-radius:var(--radius)}
.newcard__label{margin:0 0 .4rem;font-size:1.2rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.newcard__number{margin:0;font-family:var(--mono);font-size:2.6rem;font-weight:600;letter-spacing:.06em;
                 line-height:1.3;color:var(--ink);user-select:all;overflow-wrap:anywhere}

.facts{margin:0;padding:0;border-top:.1rem solid var(--rule)}
.facts__row{display:grid;grid-template-columns:12rem 1fr;gap:1.2rem;padding:1.1rem 0;border-bottom:.1rem solid var(--rule)}
.facts dt{margin:0;font-size:1.3rem;font-weight:600;color:var(--ink-3)}
.facts dd{margin:0;font-size:1.5rem;overflow-wrap:anywhere}

/* -- footer -- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
      margin-top:3.2rem;padding-top:1.6rem;border-top:.1rem solid var(--rule);font-size:1.3rem;color:var(--ink-3)}
.foot a{color:var(--ink-2);text-decoration:underline}
.foot a:hover{color:var(--ink)}
.linkbtn{padding:0;font:inherit;font-size:1.3rem;color:var(--ink-2);background:none;border:0;text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--ink)}
.linkbtn:focus-visible,.foot a:focus-visible{outline:.2rem solid var(--focus);outline-offset:.2rem}

@media (max-width:600px){
  .masthead__inner{padding:1.8rem 1.6rem 1.6rem}
  .page{padding:1.6rem 1.6rem 3.2rem}
  .card{padding:2.4rem 2rem 2rem}
  h1{font-size:2.1rem}
  .newcard{padding:1.6rem}
  .newcard__number{font-size:2.1rem}
  .facts__row{grid-template-columns:1fr;gap:.2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}