/* =========================================================================
   Bolwear Certificate Verify — public styles
   Built on the Bolton Footwear theme tokens (--bf-*). Fallbacks let the
   page stand on its own if the theme is ever swapped.
   ========================================================================= */

.bw-cert-main {
  --bw-bg: var(--bf-bg, #0d0d0d);
  --bw-fg: var(--bf-fg, #f5f3f1);
  --bw-card: var(--bf-card, #191919);
  --bw-muted: var(--bf-muted-fg, #9a9a9a);
  --bw-border: var(--bf-border, rgba(255,255,255,.12));
  --bw-input: var(--bf-input, rgba(255,255,255,.16));
  --bw-ember: var(--bf-primary, #e46227);
  --bw-ember-fg: var(--bf-primary-fg, #0d0d0d);
  --bw-ok: oklch(0.78 0.16 150);
  --bw-warn: oklch(0.8 0.15 80);
  --bw-bad: oklch(0.68 0.2 25);
  --bw-display: var(--bf-font-display, "Bebas Neue", "Barlow Condensed", Impact, sans-serif);
  --bw-sans: var(--bf-font-sans, "Barlow", system-ui, sans-serif);
  background: var(--bw-bg);
  color: var(--bw-fg);
  font-family: var(--bw-sans);
}
.bw-cert-wrap--embed { --bw-bg: transparent; }

/* ---------- tone helpers ----------------------------------------------- */
.bw-tone-ok   { --bw-tone: var(--bw-ok); }
.bw-tone-warn { --bw-tone: var(--bw-warn); }
.bw-tone-bad  { --bw-tone: var(--bw-bad); }
.bw-tone-text { color: var(--bw-tone, inherit); }

.bw-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem;
  border: 1px solid var(--bw-tone, var(--bw-border));
  color: var(--bw-tone, var(--bw-fg));
}
.bw-mark svg { width: 0.9rem; height: 0.9rem; }
.bw-mark--lg { width: 4rem; height: 4rem; flex-basis: 4rem; background: var(--bw-tone); color: var(--bw-bg); border-color: var(--bw-tone); }
.bw-mark--lg svg { width: 2rem; height: 2rem; }

/* ---------- header ----------------------------------------------------- */
.bw-head { align-items: end; }
.bw-title {
  margin-top: 1rem;
  font-family: var(--bw-display);
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.88;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.bw-head__status { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
@media (min-width: 768px) { .bw-head__status { align-items: flex-end; text-align: right; } }
.bw-status {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  border: 1px solid var(--bw-tone);
  color: var(--bw-tone);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.bw-status .bw-mark { border-color: var(--bw-tone); background: var(--bw-tone); color: var(--bw-bg); }
.bw-status__note { max-width: 22rem; }

/* ---------- stats strip ------------------------------------------------ */
.bw-stats { margin-top: 3rem; }
.bw-stats .bf-stat__v { font-size: 2.25rem; }
@media (min-width: 640px) { .bw-stats .bf-stat__v { font-size: 2.75rem; } }
@media (min-width: 1024px) { .bw-stats .bf-stat__v { font-size: 3.25rem; } }

/* ---------- body: definition list + aside cards ------------------------ */
.bw-body { margin-top: 3rem; }
.bw-dl > div {
  display: grid; grid-template-columns: 1fr; gap: 0.35rem 2rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--bw-border);
}
.bw-dl > div:last-child { border-bottom: 1px solid var(--bw-border); }
.bw-dl dt { margin: 0; }
.bw-dl dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; overflow-wrap: anywhere; }
.bw-dl--tech { margin-top: 2rem; }
.bw-dl--tech dd { font-size: 0.9375rem; color: var(--bw-muted); }
.bw-dl--tech a { color: var(--bw-ember); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .bw-dl > div { grid-template-columns: 15rem minmax(0, 1fr); align-items: baseline; }
}
.bw-mono code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem; letter-spacing: 0.02em;
  background: var(--bw-card); color: var(--bw-fg);
  padding: 0.25rem 0.5rem; word-break: break-all;
}

.bw-aside { margin-top: 2rem; }
@media (min-width: 768px) { .bw-aside { margin-top: 0; } }
.bw-docs { margin-top: 0; grid-template-columns: 1fr; }
.bw-docs .bf-card--doc { padding: 1.75rem; }
.bw-docs .bf-card--doc h3 { margin-top: 1.25rem; font-size: 1.75rem; }
.bw-docs .bf-card--doc .bf-eyebrow { margin-top: 0.5rem; }
.bw-docs .bf-card--doc p:not(.bf-eyebrow) { margin-top: 0.75rem; }
.bw-docs .bf-card__dl { margin-top: 1.25rem; }
.bw-docs .bf-card__dl svg { width: 1rem; height: 1rem; }

/* ---------- notes ------------------------------------------------------ */
.bw-note {
  display: flex; gap: 1rem; align-items: flex-start;
  margin-top: 1.5rem; padding: 1.1rem 1.25rem;
  border-left: 2px solid var(--bw-ember);
  background: var(--bw-card);
}
.bw-note--warn { border-left-color: var(--bw-warn); }
.bw-note__icon { flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; color: var(--bw-ember); margin-top: 0.15rem; }
.bw-note--warn .bw-note__icon { color: var(--bw-warn); }
.bw-note__icon svg { width: 100%; height: 100%; }
.bw-note strong { color: var(--bw-fg); font-weight: 600; }

/* ---------- states / pills --------------------------------------------- */
.bw-states { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--bw-border); }
.bw-states .bf-pills { margin-top: 1rem; }
.bw-pill--bad { color: var(--bw-bad) !important; border-color: color-mix(in oklab, var(--bw-bad) 50%, transparent) !important; }

/* ---------- forms ------------------------------------------------------ */
.bw-forms { margin-top: 3rem; }
.bw-form {
  margin-top: 3rem;
  padding: 2rem;
  border: 1px solid var(--bw-border);
  background: var(--bw-card);
}
.bw-forms .bw-form { margin-top: 0; height: 100%; }
.bw-form__title { margin-top: 0.75rem; font-family: var(--bw-display); font-size: 2rem; line-height: 0.95; text-transform: uppercase; }
.bw-form .bf-small { margin-top: 1rem; }
.bw-label { display: block; margin-top: 1.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bw-muted); }
.bw-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; align-items: stretch; }
.bw-row--end { justify-content: flex-end; margin-top: 1.25rem; }
.bw-row input[type="text"] {
  flex: 1 1 14rem; min-width: 0;
  padding: 0.9rem 1rem;
  font: inherit; font-size: 1rem;
  color: var(--bw-fg); background: transparent;
  border: 1px solid var(--bw-input); border-radius: 0;
}
.bw-row input[type="text"]::placeholder { color: var(--bw-muted); }
.bw-row input[type="text"]:focus { outline: 2px solid var(--bw-ember); outline-offset: 2px; }
.bw-row .bf-btn { justify-content: center; }
.bw-dropzone {
  position: relative; display: flex; align-items: center; gap: 1rem;
  margin-top: 1.5rem; padding: 1.25rem 1.5rem;
  border: 1px dashed var(--bw-input);
  color: var(--bw-fg); cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.bw-dropzone:hover { border-color: var(--bw-ember); color: var(--bw-ember); }
.bw-dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bw-dropzone__icon { width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; color: var(--bw-ember); }
.bw-dropzone__icon svg { width: 100%; height: 100%; }
.bw-dropzone__text { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.bw-dropzone.has-file { border-style: solid; border-color: var(--bw-ember); }
.bw-dropzone.has-file .bw-dropzone__text::after { content: attr(data-file); display: block; margin-top: 0.25rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--bw-muted); }

/* ---------- comparison result ----------------------------------------- */
.bw-result {
  margin-bottom: 4rem;
  padding: 2rem;
  border: 1px solid var(--bw-border);
  border-top: 3px solid var(--bw-tone);
  background: var(--bw-card);
}
.bw-result__head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; }
.bw-result__title { margin-top: 0.75rem; font-family: var(--bw-display); font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 0.9; text-transform: uppercase; }
.bw-filename { margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bw-muted); }
.bw-checks { margin-top: 2rem; border-top: 1px solid var(--bw-border); }
.bw-checks li {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.4rem 1rem; align-items: center;
  padding-block: 1rem; border-bottom: 1px solid var(--bw-border);
}
.bw-checks__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bw-muted); }
.bw-checks__value { grid-column: 2; color: var(--bw-tone); font-weight: 500; }
@media (min-width: 640px) {
  .bw-checks li { grid-template-columns: 1.75rem 11rem minmax(0, 1fr); }
  .bw-checks__value { grid-column: auto; }
}
.bw-official { margin-top: 1.75rem; padding: 1.5rem; border: 1px solid var(--bw-border); background: var(--bw-bg); }
.bw-official__grid { display: grid; grid-template-columns: 1fr; gap: 1rem 2rem; }
.bw-official__grid dd { margin-top: 0.3rem; font-size: 1.0625rem; }
@media (min-width: 640px) { .bw-official__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bw-official .bf-small { margin-top: 1.25rem; }
.bw-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.bw-actions .bf-btn svg, .bw-row .bf-btn svg { width: 0.9rem; height: 0.9rem; }
.bw-result .bw-mono { margin-top: 1.5rem; }

/* ---------- misc ------------------------------------------------------- */
.bw-lead { margin-top: 2rem; max-width: 46rem; }
.bw-foot { margin-top: 4rem; max-width: 46rem; }
.bw-cert-main .bw-actions .bf-btn, .bw-cert-main .bw-row .bf-btn { display: inline-flex; }