/* ============================================================
   Elvatis Trust - product-specific styles on top of elvatis-ds.css.
   Accent = teal. Adds the verify form (landing) and the verify
   result viewer (verify.html). No external dependencies.
   ============================================================ */

:root{ --product-accent:#14C8B0; --c-teal:#14C8B0; }

/* Trust "you are here" card accent in the system grid */
.pcard.here{ --pc:var(--c-teal); }

.mono{ font-family:var(--font-mono); letter-spacing:0.01em; color:var(--c-body); }

/* --- Verify form (landing #pruefen) --- */
.verify-form{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:1.8rem; max-width:760px;
}
.verify-input{
  flex:1 1 320px; min-width:0;
  font-family:var(--font-mono); font-size:0.95rem; color:var(--c-ink);
  background:var(--c-card); border:1px solid var(--c-line-2); border-radius:8px;
  padding:0.85rem 1rem; transition:.16s;
}
.verify-input::placeholder{ color:var(--c-muted); opacity:0.8; }
.verify-input:focus{ outline:none; border-color:var(--product-accent);
  box-shadow:0 0 0 3px rgba(20,200,176,0.14); }

/* --- Verify viewer (verify.html) --- */
.vr-main{ padding:3.5rem 0 4.5rem; min-height:60vh; }
.vr-card{
  margin-top:2rem; background:var(--c-card); border:1px solid var(--c-line);
  border-radius:14px; padding:2rem 1.9rem;
}
.vr-status{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-serif); font-weight:700; font-size:1.5rem; color:var(--c-ink);
}
.vr-status .ico{
  width:14px; height:14px; border-radius:50%; background:var(--c-muted); flex-shrink:0;
  box-shadow:0 0 0 5px rgba(143,160,189,0.16);
}
.vr-card.is-valid .vr-status .ico{ background:#1FD18A; box-shadow:0 0 0 5px rgba(31,209,138,0.18); }
.vr-card.is-revoked .vr-status .ico{ background:var(--c-coral); box-shadow:0 0 0 5px rgba(255,111,145,0.18); }
.vr-card.is-expired .vr-status .ico{ background:var(--c-amber); box-shadow:0 0 0 5px rgba(245,184,61,0.18); }
.vr-card.is-valid .vr-status{ color:#7CF0C4; }
.vr-card.is-revoked .vr-status{ color:#FFA9BC; }
.vr-card.is-expired .vr-status{ color:#FAD58A; }

.vr-sub{ font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.04em;
  color:var(--c-muted); margin-top:0.5rem; }

.vr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem 2rem; margin-top:1.8rem; }
.vr-field .k{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--c-muted); }
.vr-field .v{ color:var(--c-ink); font-size:1rem; margin-top:0.25rem; word-break:break-word; }
.vr-field .v.mono{ font-size:0.88rem; color:var(--c-body); }

.vr-proof{ margin-top:1.8rem; border-top:1px solid var(--c-line); padding-top:1.5rem; }
.vr-proof h3{ font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--c-muted); font-weight:600; }
.vr-kv{ display:flex; flex-direction:column; gap:0.7rem; margin-top:1rem; }
.vr-kv .row{ display:flex; gap:14px; flex-wrap:wrap; align-items:baseline; }
.vr-kv .rk{ font-family:var(--font-mono); font-size:0.78rem; color:var(--c-muted);
  min-width:150px; }
.vr-kv .rv{ font-family:var(--font-mono); font-size:0.82rem; color:var(--c-body);
  word-break:break-all; flex:1; }
.vr-note{ font-family:var(--font-mono); font-size:0.8rem; color:var(--c-muted); margin-top:1.6rem; }
.vr-again{ margin-top:2.4rem; }

/* Loading / empty / error states */
.vr-msg{ font-size:1.05rem; color:var(--c-body); margin-top:2rem; }
[hidden]{ display:none !important; }

@media(max-width:820px){
  .vr-grid{ grid-template-columns:1fr; }
  .vr-kv .rk{ min-width:0; }
}