/* ============================================================
   VanguardOphir — Asset Verification Terminal
   Aesthetic: a cold corporate database readout. Not paper —
   a screen you were never meant to see your own record on.
   ============================================================ */

:root {
  --bg:        #0c0b0d;
  --bg-2:      #131217;
  --panel:     #17161c;
  --line:      #2a2833;
  --ink:       #d8d2c4;   /* bone text on dark */
  --dim:       #7d7768;
  --copper:    #b07a44;
  --crimson:   #c0303f;
  --crimson-d: #7e1420;
  --active:    #b9873f;   /* amber — in service */
  --pending:   #c77b2c;   /* orange — in progress */
  --dead:      #c0303f;   /* crimson — decommissioned */
  --ghost:     #5a5566;   /* grey — unregistered */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(140% 100% at 50% 0%, #1a1820 0%, var(--bg) 60%, #060507 100%);
  color: var(--ink);
  font-family: "Space Mono", ui-monospace, monospace;
  padding: 40px 18px 60px;
  display: flex;
  justify-content: center;
}

/* faint CRT scanlines over everything */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: .5;
}

/* ---------- Terminal shell ---------- */
.term {
  width: 100%; max-width: 680px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 120px),
    var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px #000, 0 0 0 1px rgba(255,255,255,.02) inset;
  padding: 26px 28px 22px;
}

/* ---------- Header ---------- */
.term__head { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.term__brand {
  display: flex; align-items: center; gap: 12px;
  font-family: "Oswald", sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: .16em;
}

/* === static/verify/verify.css  —  .term__glyph === */
.term__glyph {
  position: relative; display: inline-grid; place-items: center;
  width: 34px; height: 34px; color: var(--copper);
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 12px; line-height: 1;
}
.term__glyph::before {
  content: ""; position: absolute; inset: 3px;
  border: 2px solid var(--copper); transform: rotate(45deg);
}

.term__brand span:last-child { }
.term__sys {
  margin: 12px 0 0; font-size: 12px; letter-spacing: .16em; color: var(--dim);
}

/* ---------- Query ---------- */
.query { margin-top: 22px; }
.query__label {
  display: block; font-size: 12px; letter-spacing: .2em; color: var(--copper);
  margin-bottom: 10px;
}
.query__row {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); background: var(--bg-2);
}
.query__prompt {
  display: grid; place-items: center; width: 34px;
  color: var(--crimson); font-weight: 700;
}
.query__input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; color: var(--ink);
  font-family: "Space Mono", monospace; font-size: 15px; letter-spacing: .08em;
  padding: 13px 8px;
  text-transform: uppercase;
}
.query__input::placeholder { color: var(--dim); text-transform: none; letter-spacing: .04em; }
.query__input:focus { outline: none; }
.query__row:focus-within { border-color: var(--copper); }
.query__btn {
  font-family: "Oswald", sans-serif; font-weight: 600;
  letter-spacing: .12em; font-size: 13px;
  color: var(--bg); background: var(--copper); border: 0;
  padding: 0 20px; cursor: pointer; transition: background .12s;
}
.query__btn:hover { background: #c98d52; }
.query__btn:focus-visible { outline: 3px solid var(--crimson); outline-offset: 2px; }
.query__hint { margin: 10px 0 0; font-size: 12px; color: var(--dim); }

/* ---------- Scan sequence ---------- */
.scan { margin-top: 26px; min-height: 96px; }
.scan__line {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; color: var(--copper);
  opacity: 0;
}
.scan__line.is-on { opacity: 1; }
.scan__line.is-on::after { content: " OK"; color: var(--active); }

/* ---------- Result ---------- */
.result { margin-top: 24px; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.result__statusbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line);
  background: var(--bg-2);
}
.result__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dim); flex: none; }
.result__status {
  font-family: "Oswald", sans-serif; font-weight: 700;
  font-size: clamp(16px, 4vw, 22px); letter-spacing: .08em;
}

/* status tones */
.result__statusbar[data-field][data-tone="active"]        { border-color: var(--active); }
.result__statusbar[data-tone="active"]        .result__dot    { background: var(--active); box-shadow: 0 0 12px var(--active); }
.result__statusbar[data-tone="active"]        .result__status { color: var(--active); }
.result__statusbar[data-tone="pending"]       { border-color: var(--pending); }
.result__statusbar[data-tone="pending"]       .result__dot    { background: var(--pending); box-shadow: 0 0 12px var(--pending); animation: pulse 1.1s infinite; }
.result__statusbar[data-tone="pending"]       .result__status { color: var(--pending); }
.result__statusbar[data-tone="decommissioned"]{ border-color: var(--dead); background: linear-gradient(90deg, rgba(192,48,63,.12), var(--bg-2)); }
.result__statusbar[data-tone="decommissioned"].result__dot,
.result__statusbar[data-tone="decommissioned"] .result__dot   { background: var(--dead); box-shadow: 0 0 12px var(--dead); }
.result__statusbar[data-tone="decommissioned"] .result__status{ color: var(--dead); }
.result__statusbar[data-tone="unregistered"]  { border-style: dashed; border-color: var(--ghost); }
.result__statusbar[data-tone="unregistered"]  .result__dot    { background: var(--ghost); }
.result__statusbar[data-tone="unregistered"]  .result__status { color: var(--ghost); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* record grid */
.record { margin: 18px 0 0; }
.record__row {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  padding: 10px 2px; border-bottom: 1px dotted var(--line);
}
.record__row dt { font-size: 12px; letter-spacing: .1em; color: var(--dim); }
.record__row dd { margin: 0; font-size: 13px; word-break: break-word; }
.record__row[data-optional] { display: none; }        /* shown only when populated */
.record__row.is-shown { display: grid; }

.result__readout {
  margin: 18px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--ink);
  border-left: 2px solid var(--copper); padding-left: 14px;
}

/* actions */
.result__actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.act {
  font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .1em;
  font-size: 12px; text-transform: uppercase; text-decoration: none;
  padding: 12px 18px; cursor: pointer; border: 1px solid;
  transition: transform .12s, background .12s;
}
.act:hover { transform: translateY(-2px); }
.act:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
.act--danger { color: #fff; background: var(--crimson-d); border-color: var(--crimson); }
.act--danger:hover { background: var(--crimson); }
.act--ghost  { color: var(--ink); background: transparent; border-color: var(--line); }
.act--ghost:hover { background: rgba(255,255,255,.05); }

/* history log */
.log { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 8px; }
.log summary {
  cursor: pointer; font-size: 11px; letter-spacing: .14em; color: var(--copper);
  padding: 6px 0; list-style: none;
}
.log summary::-webkit-details-marker { display: none; }
.log summary::before { content: "▸ "; }
.log[open] summary::before { content: "▾ "; }
.log__list { margin: 8px 0 4px; padding: 0; list-style: none; }
.log__list li {
  font-size: 11px; color: var(--dim); padding: 5px 0;
  border-bottom: 1px dotted var(--line); display: flex; gap: 10px;
}
.log__list li b { color: var(--ink); font-weight: 700; }
.log__ts { color: var(--copper); flex: none; }

/* ---------- Footer ---------- */
.term__foot {
  margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px;
}
.term__foot p { margin: 0 0 4px; font-size: 12px; letter-spacing: .1em; color: var(--dim); }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .term { padding: 20px 18px; }
  .record__row { grid-template-columns: 1fr; gap: 2px; }
  .query__btn { padding: 0 14px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .result { animation: none; }
  .result__statusbar[data-tone="pending"] .result__dot { animation: none; }
  .act:hover { transform: none; }
}

.term__brand{color:inherit;text-decoration:none;transition:opacity .12s}
.term__brand:hover{opacity:.8}

.term__brand { color: inherit; text-decoration: none; transition: opacity .12s; }
.term__brand:hover { opacity: .8; }
.term__brand:focus-visible { outline: 3px solid var(--copper); outline-offset: 4px; }

.term__foot-nav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); } .term__foot-nav a { color:var(--copper); text-decoration:none; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.1em; transition:opacity .12s; } .term__foot-nav a:hover { opacity:.7; } .term__foot-nav span { color:var(--dim); font-size:11px; }

/* soft funnel nudge below the verified asset details */
.result__funnel {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
  letter-spacing: .02em;
}
.result__funnel a {
  color: var(--copper);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .12s;
}
.result__funnel a:hover { opacity: .7; text-decoration: underline; }