/* ==========================================================================
   Private Wealth Management Institute — credential verification
   Shared stylesheet. Serves /credentials/, /credentials/{ID}/ and 404.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — light */
  --ivory:  #F7F4EC;
  --paper:  #FCFAF4;
  --paper2: #F2EDE1;
  --brown:  #3E2A16;
  --mid:    #6B573E;
  --faint:  #776753;
  --gold:   #A8842A;
  --ok:     #3F6B34;
  --err:    #8C2F39;

  /* Derived surfaces. Kept as separate tokens so dark mode can retune them
     without touching the palette above. */
  --hairline:   rgba(62, 42, 22, .14);
  --hairline-2: rgba(62, 42, 22, .07);
  --gold-wash:  rgba(168, 132, 42, .10);
  --ok-wash:    rgba(63, 107, 52, .12);
  --err-wash:   rgba(140, 47, 57, .12);
  --on-brown:   #F7F4EC;
  --shadow-1:   0 1px 2px rgba(62, 42, 22, .05);
  --shadow-2:   0 6px 24px rgba(62, 42, 22, .08);

  /* Type families */
  --fd: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fb: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fm: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale. 12px is the absolute floor (metadata labels only);
     16px is the floor for anything that reads as body copy. */
  --t-meta:    clamp(0.75rem,  0.735rem + 0.07vw, 0.8125rem);
  --t-ui:      clamp(0.875rem, 0.855rem + 0.10vw, 0.9375rem);
  --t-body:    clamp(1rem,     0.980rem + 0.10vw, 1.0625rem);
  --t-lead:    clamp(1.0625rem, 1.010rem + 0.26vw, 1.1875rem);
  --t-display: clamp(1.5rem,   1.310rem + 0.95vw, 2rem);
  --t-name:    clamp(2rem,     1.480rem + 2.60vw, 3.25rem);

  /* Spacing */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10: 2.5rem;
  --s12: 3rem;   --s16: 4rem;   --s20: 5rem;

  --r-sm: .25rem; --r-md: .5rem; --r-lg: .75rem; --r-full: 9999px;
  --ease: 180ms cubic-bezier(.16, 1, .3, 1);
  --measure: 66ch;
}

[data-theme="dark"] {
  --ivory:  #181511;
  --paper:  #1E1A15;
  --paper2: #241F19;
  --brown:  #E8E1D3;
  --mid:    #AD9E86;
  --faint:  #968874;
  --gold:   #C9A54D;
  --ok:     #7FA96F;
  --err:    #D07A83;

  --hairline:   rgba(232, 225, 211, .15);
  --hairline-2: rgba(232, 225, 211, .08);
  --gold-wash:  rgba(201, 165, 77, .12);
  --ok-wash:    rgba(127, 169, 111, .14);
  --err-wash:   rgba(208, 122, 131, .14);
  --on-brown:   #181511;
  --shadow-1:   0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2:   0 6px 24px rgba(0, 0, 0, .45);
}

/* Fallback for visitors who never touch the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ivory:  #181511;
    --paper:  #1E1A15;
    --paper2: #241F19;
    --brown:  #E8E1D3;
    --mid:    #AD9E86;
    --faint:  #968874;
    --gold:   #C9A54D;
    --ok:     #7FA96F;
    --err:    #D07A83;

    --hairline:   rgba(232, 225, 211, .15);
    --hairline-2: rgba(232, 225, 211, .08);
    --gold-wash:  rgba(201, 165, 77, .12);
    --ok-wash:    rgba(127, 169, 111, .14);
    --err-wash:   rgba(208, 122, 131, .14);
    --on-brown:   #181511;
    --shadow-1:   0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2:   0 6px 24px rgba(0, 0, 0, .45);
  }
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--ivory);
  color: var(--brown);
  font-family: var(--fb);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.15; font-weight: 600; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.mono {
  font-family: var(--fm);
  font-size: var(--t-meta);
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  top: var(--s3); left: var(--s3);
  z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--brown);
  color: var(--on-brown);
  border-radius: var(--r-md);
  font-size: var(--t-ui);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--ease);
}
.skip:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Header, footer, layout
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: var(--ivory);
  border-bottom: 1px solid var(--hairline-2);
}

.masthead__brand { display: flex; align-items: center; text-decoration: none; }
.masthead__brand img { height: 40px; width: 40px; }
.masthead__spacer { flex: 1; }

/* Artwork swap. The mono lockup is near-invisible on the dark ground and the
   reverse lockup is near-invisible on the ivory one, so each theme shows only
   the variant drawn for it. Both follow the toggle and the OS preference. */
.on-dark { display: none; }
[data-theme="dark"] .on-light { display: none; }
[data-theme="dark"] .on-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none; }
  :root:not([data-theme="light"]) .on-dark  { display: block; }
}

.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  color: var(--mid);
  transition: background var(--ease), color var(--ease);
}
.icon-btn:hover { background: var(--paper2); color: var(--brown); }

.shell {
  max-width: 1180px;
  margin-inline: auto;
  padding: var(--s10) var(--s5) var(--s20);
}

.eyebrow {
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: var(--s4);
}

.site-footer {
  border-top: 1px solid var(--hairline-2);
  padding: var(--s10) 0 var(--s12);
  color: var(--mid);
  font-size: var(--t-ui);
}
/* Aligned to the same 1180px content column as .shell, so the lockup and the
   footer copy share a left edge with the record card above them. The inline
   padding has to sit on the inner wrapper, not on .site-footer: .shell caps its
   own border-box at 1180px, so padding applied outside the cap would shift this
   column 20px left of the content above it. */
.site-footer__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--s5);
}
.site-footer p { max-width: var(--measure); }
.site-footer p + p { margin-top: var(--s3); }
.site-footer .footer-lockup { margin-bottom: var(--s6); }
.site-footer .footer-lockup img { height: 132px; width: auto; }
.site-footer strong { color: var(--brown); font-weight: 600; }
.site-footer a { color: var(--mid); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--brown); }
.site-footer .disclaimer { font-size: var(--t-meta); color: var(--faint); }

/* --------------------------------------------------------------------------
   4. Cards, status, buttons
   -------------------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card--pad { padding: var(--s6); }
@media (min-width: 768px) { .card--pad { padding: var(--s10); } }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-full);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.status--valid   { background: var(--ok-wash);  color: var(--ok); }
.status--revoked { background: var(--err-wash); color: var(--err); }

.status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status__dot--pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--t-ui);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn--primary { background: var(--brown); color: var(--on-brown); }
.btn--primary:hover { background: var(--mid); }
.btn--quiet { border-color: var(--hairline); color: var(--brown); }
.btn--quiet:hover { background: var(--paper2); }
.btn--block { width: 100%; }

.btn[aria-disabled="true"] {
  background: var(--paper2);
  border-color: var(--hairline);
  color: var(--faint);
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Credential record
   -------------------------------------------------------------------------- */

.record {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: start;
}
@media (min-width: 900px) {
  .record { grid-template-columns: 1.35fr 0.85fr; gap: var(--s8); }
}

.record__name {
  font-family: var(--fd);
  font-size: var(--t-name);
  font-weight: 600;
  line-height: 1.05;
  margin: var(--s5) 0 var(--s4);
  text-wrap: balance;
}
.record__programme { font-size: var(--t-lead); font-weight: 600; }
.record__subtitle {
  font-family: var(--fd);
  font-style: italic;
  font-size: var(--t-display);
  color: var(--gold);
  margin-top: var(--s1);
  line-height: 1.25;
}

.facts { margin-top: var(--s8); border-top: 1px solid var(--hairline-2); }
.fact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--hairline-2);
}
@media (min-width: 640px) {
  /* 240px keeps "Document hash (SHA-256)" on one line; at 210px it broke
     after the hyphen in "(SHA-". */
  .fact { grid-template-columns: 240px 1fr; gap: var(--s5); align-items: baseline; }
}
.fact dt {
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mid);
}
.fact dd { font-size: var(--t-body); }

.section-heading {
  font-family: var(--fd);
  font-size: var(--t-display);
  margin-top: var(--s12);
}
.section-note { font-size: var(--t-ui); color: var(--mid); margin-top: var(--s2); max-width: var(--measure); }

/* LinkedIn copy rows */
.copyfields { display: grid; gap: var(--s2); margin-top: var(--s5); }
.copyrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s2) var(--s4);
  align-items: center;
  padding: var(--s3) var(--s4);
  background: var(--paper2);
  border-radius: var(--r-md);
}
@media (min-width: 640px) {
  .copyrow { grid-template-columns: 150px 1fr auto; }
}
.copyrow__label {
  grid-column: 1 / -1;
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mid);
}
@media (min-width: 640px) { .copyrow__label { grid-column: auto; } }
.copyrow__value { font-size: var(--t-ui); font-weight: 500; overflow-wrap: anywhere; }
.copyrow__btn {
  min-height: 44px;
  min-width: 68px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--t-meta);
  font-weight: 500;
  transition: background var(--ease), border-color var(--ease);
}
.copyrow__btn:hover { background: var(--paper2); border-color: var(--gold); }

.privacy-note {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-2);
  font-size: var(--t-ui);
  color: var(--mid);
  max-width: var(--measure);
}

/* Right-hand rail */
.rail { display: flex; flex-direction: column; gap: var(--s3); }
@media (min-width: 900px) {
  /* The rail is far shorter than the record, so it follows the scroll rather
     than leaving a tall empty column. 68px clears the sticky masthead. */
  .rail { position: sticky; top: 68px; }
}
.rail__qr { display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding: var(--s6); }
.qr-plate {
  width: 172px; height: 172px;
  padding: 11px;
  background: #FFFFFF;              /* white regardless of theme, for scan reliability */
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}
.qr-plate canvas, .qr-plate img { width: 100% !important; height: 100% !important; display: block; }
.rail__hint { font-size: var(--t-meta); color: var(--mid); text-align: center; }

/* --------------------------------------------------------------------------
   6. Landing — lookup and result states
   -------------------------------------------------------------------------- */

.masthead-title {
  font-family: var(--fd);
  font-size: var(--t-name);
  font-weight: 600;
  line-height: 1.05;
  max-width: 20ch;
}
.lede { font-size: var(--t-lead); color: var(--mid); max-width: var(--measure); margin-top: var(--s4); }

.lookup { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); max-width: 640px; }
.lookup__input {
  flex: 1 1 260px;
  min-height: 44px;
  padding: var(--s3) var(--s4);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: var(--t-body);
  letter-spacing: .02em;
}
.lookup__input::placeholder { color: var(--faint); }
.lookup__input:focus-visible { border-color: var(--gold); }
.lookup__hint { font-size: var(--t-ui); color: var(--mid); margin-top: var(--s3); }

.result { margin-top: var(--s8); }
.result__name { font-family: var(--fd); font-size: var(--t-display); font-weight: 600; margin: var(--s4) 0 var(--s1); }
.result__programme { color: var(--mid); font-size: var(--t-ui); }
.result__actions { margin-top: var(--s6); }
.result__revoked { margin-top: var(--s4); color: var(--err); font-size: var(--t-ui); max-width: var(--measure); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s16) var(--s6); }
.empty svg { color: var(--faint); margin-bottom: var(--s5); }
/* The 404 uses an h1 here and the lookup result an h2; both are the same
   visual rank, so they share one rule. */
.empty h1, .empty h2 { font-family: var(--fd); font-size: var(--t-display); font-weight: 600; margin-bottom: var(--s3); }
.empty p { color: var(--mid); max-width: 46ch; font-size: var(--t-ui); }
.empty p + p { margin-top: var(--s2); }
.empty .btn { margin-top: var(--s6); }

/* --------------------------------------------------------------------------
   7. Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s6);
  z-index: 90;
  padding: var(--s3) var(--s6);
  background: var(--brown);
  color: var(--on-brown);
  border-radius: var(--r-full);
  font-size: var(--t-ui);
  box-shadow: var(--shadow-2);
  /* Hidden outright rather than only translated away, so an empty pill can
     never peek into the viewport before it has been given a message. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 150%);
  transition: transform 300ms cubic-bezier(.16, 1, .3, 1), opacity 300ms linear, visibility 0s linear 300ms;
}
.toast.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   8. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .masthead, .rail, .toast, .skip, .copyrow__btn { display: none !important; }
  body { background: #fff; color: #000; }
  .shell { padding: 0; }
  .card { border: none; box-shadow: none; }
}