/* Hermetic app kit: reusable pieces for app-style pages (tools, dashboards) built on hermetic.css.
   Load after hermetic.css. Provides the red status token, search form, segmented tabs (aria-selected),
   spinner and message, status flags, cards with key/value rows, tags and a plain table. Class names
   are prefixed (cc-, kv-) so they never collide with hermetic.css. Markup is in templates/app.html. */

/* The kit has no red token. Defined for both modes the same way the kit defines its own. */
body{--bad:#c62828; --bad-tint:rgba(198,40,40,.09)}
:root[data-theme="dark"] body{--bad:#ff7b72; --bad-tint:rgba(255,123,114,.11)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body{--bad:#ff7b72; --bad-tint:rgba(255,123,114,.11)}
}


/* ---------- search ---------- */
body .cc-search{height:52px;padding:0 10px 0 16px;border-radius:12px;gap:12px;max-width:560px;margin-top:22px;overflow:hidden}
body .cc-search input{font:500 18px/1 var(--v2-font)}
.cc-search svg{width:18px;height:18px}
body .cc-search .mbtn{flex:0 0 auto;height:34px;padding:0 16px;font-weight:600}
body .pagehead{padding-bottom:clamp(20px,3vw,32px)}

/* ---------- tabs (kit segmented control, driven by aria-selected) ---------- */
body .filterbtn[aria-selected="true"]{background:var(--btn);color:var(--btn-ink);box-shadow:inset 0 1px 0 var(--btn-hi),var(--btn-shadow),0 0 0 1px var(--btn-edge)}
.filterbtn .count{font:600 10.5px/1 var(--v2-font);background:var(--bad);color:var(--ground);border-radius:9px;padding:2px 6px;margin-left:6px}

.msg{color:var(--muted);padding:40px 0;font-size:15px}
.msg.err{color:var(--bad)}
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line-2);border-top-color:var(--a);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-1px}
@keyframes sp{to{transform:rotate(360deg)}}

.flags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.flag{font:700 11px/1 var(--v2-font);letter-spacing:.07em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid}
.flag.bad{color:var(--bad);background:var(--bad-tint);border-color:var(--bad)}
.flag.warn{color:var(--warn);background:var(--warn-tint);border-color:var(--warn)}
.flag.good{color:var(--ok);background:var(--ok-tint);border-color:var(--ok)}

/* ---------- cards ---------- */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin:0 0 20px}
.cc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--v2-radius);padding:22px 24px}
.cc-card h3{font:600 11px/1 var(--v2-font);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.kv{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}
.cc-sec+.cc-sec{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.kv:first-of-type{border-top:0;padding-top:0}
.kv-k{flex:0 0 74px;font:600 11px/1.4 var(--v2-font);color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.kv-v{flex:1;min-width:0;font-size:14.5px;line-height:1.45;word-break:break-word}
.kv-list{list-style:none;margin:0;padding:0}
.kv-list li{padding:2px 0}
.kv-note,.note-line{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.mono,code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12.5px}
.cc-card .mono,.rec,table .mono,.mx-rec,.timing .mono{background:none;border:0;padding:0}
.mx-rec{display:block;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12.5px;line-height:1.6;word-break:break-all}
.mx-rec i{display:inline-block;min-width:26px;color:var(--faint);font-style:normal}
.cc-tag{display:inline-block;font:600 11px/1.4 var(--v2-font);padding:3px 9px;border-radius:999px;margin:2px 4px 0 0;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.cc-tag-warn{color:var(--warn);border-color:var(--warn);background:var(--warn-tint)}
.ok{color:var(--ok)} .wn{color:var(--warn)} .bd{color:var(--bad)} .dim{color:var(--faint)}

table{border-collapse:collapse;width:100%;font-size:14.5px}
th{text-align:left;font:600 11px/1 var(--v2-font);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:0 14px 8px 0;border-bottom:1px solid var(--line)}
td{padding:9px 14px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
td:first-child{color:var(--ink);font-weight:500}
.tbl-scroll{overflow-x:auto;margin-top:8px}

@media (max-width:620px){
  body .cc-search{height:52px}
  body .cc-search input{font-size:16px}
  .cc-card{padding-inline:18px}
}