/* =============================================================================
   NDPC public verification page (TASK-08).

   Presentation only. Consumes ndpc-tokens.css — no colour is declared here that
   is not a --ndpc-* token or a mix of one with black/white. The status palette
   (--ndpc-status-*) is used here in anger for the first time: it carries the
   verdict, and nothing else on the page may use it.

   Loaded by base_public.html (the search page and the direct verification link).
   It never touches the auth or staff CSS.
   ============================================================================= */

.vp-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', system-ui, -apple-system, 'Inter', sans-serif;
  font-size: var(--ndpc-fs-body);
  color: var(--ndpc-body);
  /* Very pale green wash so the white focal card has something to sit on. The
     second declaration wins where color-mix() is supported; both are the
     --ndpc-green-soft token thinned toward white, not a new colour. */
  background: var(--ndpc-surface);
  background: color-mix(in srgb, var(--ndpc-green-soft) 55%, #fff);
}

/* Logo-motif texture behind everything — the same concentric rings and keyhole as
   the auth panel, in the NDPC green at 4–6%. Fixed, so it does not scroll into the
   card, and inert to the pointer. Texture, never decoration: if in doubt, fainter. */
.vp-wm {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: repeating-radial-gradient(circle at 50% 38%, transparent 0 54px, rgba(0, 72, 42, .05) 54px 56px);
  background: repeating-radial-gradient(circle at 50% 38%, transparent 0 54px, color-mix(in srgb, var(--ndpc-green) 6%, transparent) 54px 56px);
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 26%, transparent 60%);
          mask-image: radial-gradient(circle at 50% 38%, #000 26%, transparent 60%);
}
.vp-wm .bi {
  position: absolute; bottom: -7%; right: -4%;
  font-size: 19rem; line-height: 1;
  color: rgba(0, 72, 42, .04);
  color: color-mix(in srgb, var(--ndpc-green) 5%, transparent);
}

/* Everything real sits above the texture. */
.vp-header, .vp-main, .vp-footer { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   Slim header bar — the NDPC mark and name. Trust framing: for a government
   verification service this is what separates the real page from a lookalike.
   ------------------------------------------------------------------------- */
.vp-header {
  background: var(--ndpc-surface);
  border-bottom: 1px solid var(--ndpc-line);
  padding: .9rem 2rem;
}
/* The lockup is pinned to the left edge of the bar, not centred on the card
   below it: an institutional header anchors at the corner. */
.vp-header__inner { display: flex; align-items: center; }

/* The full lockup, straight onto the white bar — the source JPEG's own white
   background disappears into it, so no card or radius is needed here. It already
   carries "NDPC" and the Commission's name; only the service name sits beside it. */
.vp-header__logo { display: block; height: 56px; width: auto; flex-shrink: 0; }
.vp-header__text {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 1.1rem; margin-left: 1.1rem;
  border-left: 1px solid var(--ndpc-line);
  min-height: 34px;              /* keeps the divider a sensible length beside the logo */
}
.vp-header__name { font-size: 1.05rem; font-weight: 500; color: var(--ndpc-ink); line-height: 1.25; }

/* ------------------------------------------------------------------------- */
.vp-main { flex: 1; padding: 3rem 1.25rem 3.5rem; }
.vp-inner { max-width: 560px; margin: 0 auto; }

/* -------------------------------------------------------------------------
   Hero — pale-green icon badge, heading, one muted line, the search row.
   ------------------------------------------------------------------------- */
.vp-hero { text-align: center; }

/* The landing page's hero is a contained focal card, so the search box reads as
   the point of the page rather than as something adrift in whitespace. Only the
   search page uses it — the direct-link page's hero stays plain above its result
   card, so the two never stack as two competing cards. */
.vp-hero--card {
  background: var(--ndpc-surface);
  border: 0.5px solid var(--ndpc-line);
  border-radius: 16px;
  padding: 2.5rem 2.25rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}
.vp-hero__badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ndpc-green-soft); color: var(--ndpc-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.75rem; margin-bottom: 1.25rem;
}
.vp-hero__title { font-size: 23px; font-weight: 500; color: var(--ndpc-ink); margin: 0 0 .5rem; }
.vp-hero__lede { font-size: var(--ndpc-fs-body); color: var(--ndpc-muted); margin: 0 0 1.75rem; line-height: 1.5; }

/* One field for both formats — a certificate number or a 16-character
   verification ID — with the Verify button on the same row. */
.vp-search { display: flex; gap: .6rem; align-items: stretch; }
.vp-search__field { position: relative; flex: 1; }
.vp-search__field > .bi {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  color: var(--ndpc-muted); font-size: 1rem; pointer-events: none;
}
.vp-search input.form-control {
  width: 100%; height: 48px;
  padding: 0 1rem 0 2.7rem;
  background: var(--ndpc-field-bg);
  border: 1px solid var(--ndpc-field-border);
  border-radius: var(--ndpc-radius);
  color: var(--ndpc-ink);
  font-size: var(--ndpc-fs-body);
  text-transform: uppercase;
}
.vp-search input.form-control::placeholder { color: var(--ndpc-muted); text-transform: none; }
.vp-search input.form-control:focus {
  outline: none;
  border-color: var(--ndpc-green);
  box-shadow: 0 0 0 .2rem rgba(0, 72, 42, .15);
  background: var(--ndpc-surface);
}
.vp-search__btn {
  height: 48px; padding: 0 1.6rem;
  background: var(--ndpc-green); color: #fff;
  border: 1px solid var(--ndpc-green); border-radius: var(--ndpc-radius);
  font-size: var(--ndpc-fs-body); font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  cursor: pointer;
}
.vp-search__btn:hover { background: var(--ndpc-green-hover); border-color: var(--ndpc-green-hover); }

.vp-hint { font-size: var(--ndpc-fs-hint); color: var(--ndpc-muted); margin: .8rem 0 0; text-align: center; }
.vp-hint code { font-family: 'Courier New', monospace; color: var(--ndpc-body); }

/* Input-format errors. Deliberately neutral: the status palette is reserved for
   the credential's state and must not be spent on a typo in the search box. */
.vp-formerror {
  display: flex; align-items: flex-start; gap: .55rem;
  margin: 1rem 0 0; padding: .75rem .9rem;
  border: 1px solid var(--ndpc-line); border-radius: var(--ndpc-radius);
  color: var(--ndpc-body); font-size: var(--ndpc-fs-hint); line-height: 1.5;
  text-align: left;
}
.vp-formerror .bi { color: var(--ndpc-muted); }

/* -------------------------------------------------------------------------
   Result card — a full-width status band over a white detail area.
   Every state sets --vr-status to its own token; nothing else changes.
   ------------------------------------------------------------------------- */
.vr-card {
  margin-top: 2.5rem;
  background: var(--ndpc-surface);
  border: 0.5px solid var(--ndpc-line);
  border-radius: 14px;
  overflow: hidden;              /* the band spans the full width, no gap */
}
.vr-card--valid     { --vr-status: var(--ndpc-status-valid); }
.vr-card--expired   { --vr-status: var(--ndpc-status-expired); }
.vr-card--suspended { --vr-status: var(--ndpc-status-suspended); }
.vr-card--revoked   { --vr-status: var(--ndpc-status-revoked); }

.vr-band {
  background: var(--vr-status);
  display: flex; align-items: center; gap: .9rem;
  padding: 1.15rem 1.35rem;
}
.vr-band__chip {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, .17);
  color: #fff; font-size: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.vr-band__text { min-width: 0; }
.vr-band__headline { font-size: 17px; font-weight: 500; color: #fff; line-height: 1.3; }
/* The sub-line is a pale tint of the status colour, not pure white. The plain
   rgba is the fallback for browsers without color-mix(). */
.vr-band__sub {
  font-size: 13px; line-height: 1.45; margin-top: .15rem;
  color: rgba(255, 255, 255, .78);
  color: color-mix(in srgb, var(--vr-status) 20%, #fff);
}

/* Detail fields — two columns: muted label, dark value. */
.vr-detail { padding: 1.35rem 1.35rem 1.5rem; }
.vr-grid {
  margin: 0;
  display: grid; grid-template-columns: 9.5rem 1fr;
  column-gap: 1rem; row-gap: .85rem;
  align-items: baseline;
}
.vr-grid dt { font-size: var(--ndpc-fs-hint); font-weight: 400; color: var(--ndpc-muted); }
.vr-grid dd { margin: 0; font-size: var(--ndpc-fs-body); color: var(--ndpc-ink); word-break: break-word; }
.vr-grid dd.mono { font-family: 'Courier New', monospace; letter-spacing: .01em; }
.vr-grid dd.on-status { color: var(--vr-status); font-weight: 500; }

/* Note box — the status colour at ~8% behind its own dark shade. */
.vr-note {
  margin-top: 1.35rem; padding: .85rem 1rem;
  border-radius: var(--ndpc-radius);
  font-size: var(--ndpc-fs-hint); line-height: 1.55;
  background: var(--ndpc-field-bg);
  background: color-mix(in srgb, var(--vr-status) 8%, #fff);
  color: var(--ndpc-body);
  color: color-mix(in srgb, var(--vr-status) 78%, #000);
}

/* Not found / removed — neutral, centred, no coloured band. */
.vr-card--none { margin-top: 2.5rem; text-align: center; padding: 2.25rem 1.5rem; }
.vr-none__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ndpc-line);
  background: color-mix(in srgb, var(--ndpc-muted) 14%, #fff);
  color: var(--ndpc-muted); font-size: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.vr-none__headline { font-size: 17px; font-weight: 500; color: var(--ndpc-ink); margin: 0 0 .4rem; }
.vr-none__line { font-size: var(--ndpc-fs-body); color: var(--ndpc-body); margin: 0 0 .6rem; line-height: 1.5; }
.vr-none__help { font-size: var(--ndpc-fs-hint); color: var(--ndpc-muted); margin: 0; line-height: 1.55; }

.vr-again { text-align: center; margin: 1.75rem 0 0; font-size: var(--ndpc-fs-hint); }
.vr-again a { color: var(--ndpc-green); text-decoration: none; }
.vr-again a:hover { color: var(--ndpc-green-hover); text-decoration: underline; }

/* -------------------------------------------------------------------------
   Footer strip — the official-service line.
   ------------------------------------------------------------------------- */
.vp-footer {
  border-top: 1px solid var(--ndpc-line);
  padding: 1.15rem 1.25rem;
  text-align: center;
  color: var(--ndpc-muted);
  font-size: var(--ndpc-fs-hint);
  line-height: 1.5;
}
.vp-footer .bi { margin-right: .35rem; }

/* -------------------------------------------------------------------------
   Mobile — this page is opened on phones far more than the staff pages.
   Tested at ~380px: the search row stacks, the band wraps, the detail grid
   collapses to one column.
   ------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .vp-main { padding: 2.25rem 1rem 2.5rem; }
  .vp-header { padding: .75rem 1rem; }
  .vp-header__logo { height: 42px; }
  .vp-header__text { padding-left: .75rem; margin-left: .75rem; min-height: 26px; }
  .vp-header__name { font-size: .95rem; }
  .vp-hero--card { padding: 1.85rem 1.25rem; border-radius: 14px; }
  .vp-wm .bi { font-size: 13rem; }
  .vp-search { flex-direction: column; }
  .vp-search__btn { width: 100%; }
  .vp-hero__title { font-size: 21px; }
  .vr-band { flex-wrap: wrap; padding: 1rem 1.1rem; gap: .75rem; }
  .vr-band__chip { width: 38px; height: 38px; font-size: 1.1rem; }
  .vr-detail { padding: 1.15rem 1.1rem 1.25rem; }
  .vr-grid { grid-template-columns: 1fr; row-gap: .25rem; }
  .vr-grid dt { margin-top: .8rem; }
  .vr-grid dt:first-child { margin-top: 0; }
}