/* ZenCap — library, provenance, verifier, performer and model surfaces.
 *
 * An ADDITIVE sheet. zencap.css owns the design language (tokens, cards,
 * tables, pills, forms); nothing here redefines any of it. This file exists
 * because the CSP is `style-src 'self'`: a style="" attribute in a template is
 * not a small exception, it is a silently broken layout. Every dimension these
 * surfaces need therefore arrives as a class.
 *
 * Loaded per-page via the templates' `head_extra` block, not from base.html,
 * so surfaces that do not need it do not pay for it.
 */

/* --- verdict banners ------------------------------------------------------
 * The public verifier's answer, and the per-asset live check. Three states,
 * never two: verified, verified-with-caveats, failed. The wording lives in the
 * template; the colour is the same taxonomy the pills use. */

.verdict {
  border-radius: var(--r); padding: 18px 22px; margin: 0 0 18px;
  border: 1px solid; display: block;
}
.verdict .vhead {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em; display: block;
  margin: 0 0 6px;
}
.verdict .vsub { font-size: 12.5px; margin: 0; line-height: 1.7; color: var(--muted); }
.verdict.ok { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .45); }
.verdict.ok .vhead { color: var(--ok); }
.verdict.warn { background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .4); }
.verdict.warn .vhead { color: var(--warn); }
.verdict.bad { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .45); }
.verdict.bad .vhead { color: var(--bad); }

/* The htmx swap target on an asset page. Keeps its height between swaps so
   the page does not jump when the fragment lands. */
.verifybox { min-height: 62px; margin-top: 12px; }
.verifybox .verdict { margin: 0; padding: 12px 16px; }
.verifybox .verdict .vhead { font-size: 13px; margin-bottom: 3px; }

/* --- chain-of-title certificate card -------------------------------------
 * Rendered from the certificate dict with escaped markup rather than through
 * certificate.render_certificate_html(): that helper interpolates values into
 * an f-string without escaping, and it is styled for the legacy portal. */

.cert { border-left: 3px solid var(--ok); padding-left: 18px; }
.cert h2 { color: var(--ok); }
.certkv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0 0 4px; }
.certkv dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--dim); padding-top: 2px;
}
.certkv dd { margin: 0; font-size: 12.5px; min-width: 0; }
.certkv dd.mono { font-size: 11px; }

/* --- asset page ----------------------------------------------------------- */

.assethead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 2px 0 4px; }
.assethead h1 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.assetmeta { color: var(--muted); font-size: 12px; margin: 0 0 6px; }
.viewernote { margin-top: 10px; }
.simscore { font-variant-numeric: tabular-nums; }
/* "14.0s @ 60" is one value; breaking it across lines reads as two. */
td.nowrap { white-space: nowrap; }

/* --- filter bars ---------------------------------------------------------- */

.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 16px; }
.filters label.field { margin: 0; }
.filters input, .filters select { width: 168px; }
.filters input.wide { width: 260px; }
.filters .seqpair { display: flex; gap: 8px; }
.filters .seqpair input { width: 88px; }

/* --- ledger event detail -------------------------------------------------- */

.payloadbox {
  background: #0a1120; border: 1px solid var(--border2); border-radius: var(--r-sm);
  padding: 14px 16px; overflow-x: auto; font-family: var(--mono); font-size: 11.5px;
  color: var(--text); line-height: 1.6; margin: 0; white-space: pre;
}
.seqnav { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; font-size: 12px; }
.seqnav a, .seqnav span {
  border: 1px solid var(--border2); border-radius: var(--r-sm); padding: 5px 11px;
  color: var(--muted);
}
.seqnav a:hover { border-color: var(--acc); color: var(--text); text-decoration: none; }
.seqnav .disabled { opacity: .4; }

/* --- model cards ---------------------------------------------------------- */

.modelgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; }
.modelgrid .card { margin: 0; }
.aucline { display: flex; align-items: baseline; gap: 10px; }
.aucline .big { font-size: 22px; }
.trainedon { font-size: 12px; margin: 0; line-height: 1.9; }

/* Meter fill widths. `.meter i` is zencap.css's; only the width is ours, and
   it cannot be an inline style under `style-src 'self'`. One class per whole
   percent — coarser buckets would misreport an AUC gate by up to 2.5 points,
   and a model gate is not a place to round for tidiness. */
.meter i.p0 { width: 0; }
.meter i.p1 { width: 1%; }   .meter i.p2 { width: 2%; }   .meter i.p3 { width: 3%; }
.meter i.p4 { width: 4%; }   .meter i.p5 { width: 5%; }   .meter i.p6 { width: 6%; }
.meter i.p7 { width: 7%; }   .meter i.p8 { width: 8%; }   .meter i.p9 { width: 9%; }
.meter i.p10 { width: 10%; } .meter i.p11 { width: 11%; } .meter i.p12 { width: 12%; }
.meter i.p13 { width: 13%; } .meter i.p14 { width: 14%; } .meter i.p15 { width: 15%; }
.meter i.p16 { width: 16%; } .meter i.p17 { width: 17%; } .meter i.p18 { width: 18%; }
.meter i.p19 { width: 19%; } .meter i.p20 { width: 20%; } .meter i.p21 { width: 21%; }
.meter i.p22 { width: 22%; } .meter i.p23 { width: 23%; } .meter i.p24 { width: 24%; }
.meter i.p25 { width: 25%; } .meter i.p26 { width: 26%; } .meter i.p27 { width: 27%; }
.meter i.p28 { width: 28%; } .meter i.p29 { width: 29%; } .meter i.p30 { width: 30%; }
.meter i.p31 { width: 31%; } .meter i.p32 { width: 32%; } .meter i.p33 { width: 33%; }
.meter i.p34 { width: 34%; } .meter i.p35 { width: 35%; } .meter i.p36 { width: 36%; }
.meter i.p37 { width: 37%; } .meter i.p38 { width: 38%; } .meter i.p39 { width: 39%; }
.meter i.p40 { width: 40%; } .meter i.p41 { width: 41%; } .meter i.p42 { width: 42%; }
.meter i.p43 { width: 43%; } .meter i.p44 { width: 44%; } .meter i.p45 { width: 45%; }
.meter i.p46 { width: 46%; } .meter i.p47 { width: 47%; } .meter i.p48 { width: 48%; }
.meter i.p49 { width: 49%; } .meter i.p50 { width: 50%; } .meter i.p51 { width: 51%; }
.meter i.p52 { width: 52%; } .meter i.p53 { width: 53%; } .meter i.p54 { width: 54%; }
.meter i.p55 { width: 55%; } .meter i.p56 { width: 56%; } .meter i.p57 { width: 57%; }
.meter i.p58 { width: 58%; } .meter i.p59 { width: 59%; } .meter i.p60 { width: 60%; }
.meter i.p61 { width: 61%; } .meter i.p62 { width: 62%; } .meter i.p63 { width: 63%; }
.meter i.p64 { width: 64%; } .meter i.p65 { width: 65%; } .meter i.p66 { width: 66%; }
.meter i.p67 { width: 67%; } .meter i.p68 { width: 68%; } .meter i.p69 { width: 69%; }
.meter i.p70 { width: 70%; } .meter i.p71 { width: 71%; } .meter i.p72 { width: 72%; }
.meter i.p73 { width: 73%; } .meter i.p74 { width: 74%; } .meter i.p75 { width: 75%; }
.meter i.p76 { width: 76%; } .meter i.p77 { width: 77%; } .meter i.p78 { width: 78%; }
.meter i.p79 { width: 79%; } .meter i.p80 { width: 80%; } .meter i.p81 { width: 81%; }
.meter i.p82 { width: 82%; } .meter i.p83 { width: 83%; } .meter i.p84 { width: 84%; }
.meter i.p85 { width: 85%; } .meter i.p86 { width: 86%; } .meter i.p87 { width: 87%; }
.meter i.p88 { width: 88%; } .meter i.p89 { width: 89%; } .meter i.p90 { width: 90%; }
.meter i.p91 { width: 91%; } .meter i.p92 { width: 92%; } .meter i.p93 { width: 93%; }
.meter i.p94 { width: 94%; } .meter i.p95 { width: 95%; } .meter i.p96 { width: 96%; }
.meter i.p97 { width: 97%; } .meter i.p98 { width: 98%; } .meter i.p99 { width: 99%; }
.meter i.p100 { width: 100%; }

/* --- public verifier ------------------------------------------------------ */

.verifyform textarea { max-width: none; min-height: 190px; font-family: var(--mono); font-size: 11.5px; }
.verifyform input[type=file] {
  max-width: none; border: 1px dashed var(--border2); background: #0a1120;
  color: var(--muted); border-radius: var(--r-sm); padding: 12px 14px; font-size: 12px;
  width: 100%;
}
.verifyform .or {
  text-align: center; color: var(--dim); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; margin: 16px 0;
}
.verdictkey { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.verdictkey .vk {
  border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px;
  background: var(--panel2);
}
.verdictkey .vk b { display: block; font-size: 12px; margin: 0 0 5px; }
.verdictkey .vk p { color: var(--muted); font-size: 11.5px; margin: 0; line-height: 1.65; }
.verdictkey .vk.ok b { color: var(--ok); }
.verdictkey .vk.warn b { color: var(--warn); }
.verdictkey .vk.bad b { color: var(--bad); }

/* --- performer surfaces --------------------------------------------------- */

.subnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.subnav a {
  border: 1px solid var(--border2); border-radius: var(--r-sm); padding: 6px 13px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.subnav a:hover { border-color: var(--acc); color: var(--text); text-decoration: none; }
.subnav a.on { background: rgba(59, 130, 246, .16); color: #dbeafe; border-color: var(--border2); }

.plainlist { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.plainlist li { padding: 7px 0; border-bottom: 1px solid rgba(30, 42, 68, .55); }
.plainlist li:last-child { border-bottom: 0; }
.plainlist .yes { color: var(--ok); font-weight: 700; }
.plainlist .no { color: var(--dim); font-weight: 700; }

.emptyblock {
  border: 1px dashed var(--border2); border-radius: var(--r); padding: 26px 24px;
  color: var(--muted); font-size: 12.5px; line-height: 1.75;
}
.emptyblock b { color: var(--text); display: block; margin: 0 0 6px; font-size: 13px; }

@media (max-width: 900px) {
  .certkv { grid-template-columns: 1fr; gap: 0 0; }
  .certkv dt { margin-top: 10px; }
  .filters input, .filters select, .filters input.wide { width: 100%; }
  .modelgrid { grid-template-columns: 1fr; }
}

/* Light Agena data surfaces. */
.payloadbox { background: #f4f0e7; color: var(--text); }
.cert { border-color: #9a642e; }
.cert h2 { color: var(--text); }
.emptyblock { background: #f9f6ef; }
.verifyform input[type=file] { background: #f7f4ed; color: var(--text); }
.subnav a.on { background: #ede2d1; color: var(--text); border-color: #d5bea0; }
.plainlist li { border-color: #e8e1d6; }