/* ==========================================================================
   Matchdaita — the verification page
   Loaded after site.css. Reuses the auth pages' masthead.
   ========================================================================== */

.how { display:grid; gap:14px; margin-top:30px; }
@media (min-width: 780px){ .how { grid-template-columns:repeat(3,1fr); } }
.how-step { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); }
.how-step h3 { font-size:15px; margin-bottom:7px; }
.how-step p { font-size:13.5px; color:var(--mut); line-height:1.55; }

/* ---- the overall verdict ----
   Green only when every revealed seal checked out in this browser, just now. It is
   never rendered from a stored answer: a "verified" badge that does not do the
   verifying is the exact thing this page exists to replace. */
.verdict {
  margin-top:28px; padding:16px 18px; border-radius:var(--r); font-size:14.5px; line-height:1.5;
  display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line);
}
.verdict .ic { flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
               font-size:12px; font-weight:800; color:#fff; margin-top:1px; }
.verdict.ok { background:rgba(0,229,255,.09); border-color:rgba(0,229,255,.30); }
.verdict.ok .ic { background:var(--win); }
.verdict.bad { background:rgba(107,114,128,.09); border-color:rgba(107,114,128,.32); }
.verdict.bad .ic { background:var(--loss); }
.verdict b { font-weight:800; }
:root:not([data-theme="light"]) .verdict.ok { background:rgba(0,229,255,.10); }
:root:not([data-theme="light"]) .verdict.bad { background:rgba(107,114,128,.10); }

/* ---- one commitment ---- */
.commits { margin-top:18px; display:grid; gap:12px; }
.commit { background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.commit-hd { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:13px 16px; }
.commit-hd .d { font-size:15px; font-weight:800; letter-spacing:-.02em; }
.commit-hd .m { font-size:12.5px; color:var(--mut); font-weight:600; }
.commit-hd .state { margin-left:auto; }
.state {
  display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; padding:4px 9px; border-radius:5px;
}
.state-ok { background:var(--win); color:#fff; }
.state-bad { background:var(--loss); color:#fff; }
.state-sealed { background:var(--card2); color:var(--mut); border:1px solid var(--line2); }
.state-checking { background:var(--card2); color:var(--mut2); }

.commit-body { padding:0 16px 14px; }
.kv { display:grid; gap:2px 14px; font-size:12.5px; }
@media (min-width: 620px){ .kv { grid-template-columns:130px 1fr; } }
.kv dt { color:var(--mut2); font-weight:600; }
.kv dd { margin:0; color:var(--txt); }
.hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11.5px; word-break:break-all; line-height:1.5;
}
.hash.match { color:var(--win); font-weight:600; }
.hash.miss { color:var(--loss); font-weight:600; }

.commit-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.mini {
  font-family:inherit; font-size:12px; font-weight:700; padding:7px 12px; border-radius:6px;
  border:1px solid var(--line2); background:transparent; color:var(--txt); cursor:pointer;
}
.mini:hover { background:var(--card2); }

.payload {
  margin-top:12px; padding:12px; border-radius:8px; background:var(--card2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px; line-height:1.55; white-space:pre-wrap; word-break:break-word;
  max-height:280px; overflow:auto;
}
.selfcheck {
  margin-top:10px; padding:11px 12px; border-radius:8px; background:var(--card2);
  font-size:12.5px; color:var(--mut); line-height:1.5;
}
.selfcheck code {
  display:block; margin-top:7px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11.5px; color:var(--txt); word-break:break-all;
}

/* ---- the honest section ---- */
.honest { margin-top:38px; padding-top:26px; border-top:1px solid var(--line); }
.honest h2 { font-size:22px; }
.two { display:grid; gap:20px; margin-top:18px; }
@media (min-width: 780px){ .two { grid-template-columns:1fr 1fr; gap:28px; } }
.two h3 { font-size:15px; margin-bottom:7px; }
.two h3.yes { color:var(--win); }
.two h3.no { color:var(--loss); }
.two p { font-size:13.5px; color:var(--mut); line-height:1.6; }
.two p b { color:var(--txt); font-weight:700; }
.foot-note { margin-top:22px; font-size:13px; color:var(--mut2); }
.recipe {
  margin-top:12px; padding:14px; border-radius:8px; background:var(--card2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11.5px; line-height:1.6; white-space:pre-wrap; color:var(--txt); overflow-x:auto;
}