/* cloudposture design system (docs/specs/design.md). Tokens first, then one
   definition per component. Component rules use tokens only (DS-1). */

/* ---------- tokens ---------- */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --t1:12px;--t2:13px;--t3:14px;--t4:16px;--t5:20px;--t6:24px;
  --r1:6px;--r2:10px;--r-pill:999px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --bg:#f6f7f9;--surface:#fff;--surface-hover:#e8ecf2;--line:#e5e7eb;--fg:#1b1f24;--muted:#6b7280;
  --brand:#1f6feb;--brand-hover:#1a5fcc;--brand-fg:#fff;
  --ok:#15803d;--bad:#b91c1c;--warn:#b45309;--info:#1d4ed8;
  --ok-bg:#dcfce7;--ok-fg:#166534;--bad-bg:#fee2e2;--bad-fg:#991b1b;--warn-bg:#fef3c7;--warn-fg:#92400e;
  --info-bg:#dbeafe;--info-fg:#1e40af;--neutral-bg:#e5e7eb;--neutral-fg:#374151;--owner-bg:#ede9fe;--owner-fg:#5b21b6;
  --focus:2px solid var(--brand);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1115;--surface:#171a20;--surface-hover:#242a34;--line:#2a2f38;--fg:#e6e8eb;--muted:#9aa3ad;
  --brand:#58a6ff;--brand-hover:#79b8ff;--brand-fg:#0f1115;
  --ok:#3fb950;--bad:#f85149;--warn:#d29922;--info:#79c0ff;
  --ok-bg:#14532d;--ok-fg:#bbf7d0;--bad-bg:#7f1d1d;--bad-fg:#fecaca;--warn-bg:#78350f;--warn-fg:#fde68a;
  --info-bg:#1e3a8a;--info-fg:#bfdbfe;--neutral-bg:#374151;--neutral-fg:#e5e7eb;--owner-bg:#4c1d95;--owner-fg:#ddd6fe;
}}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{margin:0;font:var(--t3)/1.45 var(--font);background:var(--bg);color:var(--fg)}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
:focus{outline:none}:focus-visible{outline:var(--focus);outline-offset:2px;border-radius:var(--r1)}
h1{font-size:var(--t6);margin:0 0 var(--s3)}h2{font-size:var(--t5);margin:var(--s5) 0 var(--s2)}h3{font-size:var(--t4);margin:var(--s4) 0 var(--s1)}
p{margin:var(--s2) 0}pre{font-family:var(--mono);font-size:var(--t2);background:var(--bg);border:1px solid var(--line);border-radius:var(--r1);padding:var(--s3);overflow:auto;white-space:pre-wrap;word-break:break-all;margin:var(--s2) 0}
main{max-width:1180px;margin:0 auto;padding:var(--s5);overflow-x:hidden}

/* ---------- text utilities ---------- */
.mono{font-family:var(--mono)}.muted{color:var(--muted)}.small{font-size:var(--t2)}
.err,.alarm{color:var(--bad)}.ok{color:var(--ok)}.error{color:var(--warn)}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wrap{white-space:normal;word-break:break-word}
.num{text-align:right}

/* ---------- layout ---------- */
.head{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}.head h1,.head h2{margin:0}
.actions{margin-left:auto;display:flex;gap:var(--s2);align-items:center}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3);margin:var(--s1) 0 var(--s5)}
.reports{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:var(--s3);margin:var(--s2) 0 var(--s5)}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;gap:var(--s4);padding:var(--s2) var(--s5);background:var(--surface);border-bottom:1px solid var(--line);white-space:nowrap}
.top .brand{font-weight:700;font-size:var(--t4);color:var(--fg)}
.top nav{display:flex;align-items:center;flex-shrink:0}.top nav a{margin-right:var(--s3);color:var(--muted)}.top nav a:hover{color:var(--fg);text-decoration:none}.top nav a.on{color:var(--fg);font-weight:600}
.nav-group{margin-left:var(--s2);padding-left:var(--s3);border-left:1px solid var(--line)}.nav-label{font-size:var(--t1);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:var(--s2)}
.me{margin-left:auto;display:flex;align-items:center;gap:var(--s2);min-width:0}.me .org{color:var(--muted);border-right:1px solid var(--line);padding-right:var(--s2);max-width:220px}.me .name{max-width:200px}.me form{flex-shrink:0}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:11px;font-weight:700;color:#fff;background:var(--muted);user-select:none;flex-shrink:0}
.hue-0{background:#2563eb}.hue-1{background:#7c3aed}.hue-2{background:#059669}.hue-3{background:#d97706}.hue-4{background:#dc2626}.hue-5{background:#0891b2}.hue-6{background:#db2777}.hue-7{background:#4f46e5}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--fg);font:inherit;line-height:1.3;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface-hover);text-decoration:none}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-fg)}.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn-danger{color:var(--bad);border-color:var(--bad)}.btn-danger:hover{background:var(--bad-bg)}
.btn-sm{padding:var(--s1) var(--s2);font-size:var(--t2)}
.btn-link{border:0;background:none;color:var(--muted);padding:0;font:inherit;cursor:pointer}.btn-link:hover{color:var(--fg)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:default}

/* ---------- cards & tiles ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);margin-bottom:var(--s4)}
.card.center{max-width:420px;margin:var(--s6) auto;text-align:center}
details.card>summary{cursor:pointer;color:var(--fg);list-style:revert}details.card>summary:hover{color:var(--brand)}
.stat{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4);color:var(--fg)}
.stat b{font-size:var(--t6);line-height:1.1}.stat span{color:var(--muted);margin-top:2px}.stat small{color:var(--muted);font-size:var(--t1);margin-top:var(--s1)}
/* clickable surfaces (DS-3): identical hover */
a.stat:hover,a.card:hover,tr.row-link:hover td{background:var(--surface-hover);text-decoration:none}
tr.row-link{cursor:pointer}tr.row-link:hover .chev{color:var(--fg)}

/* ---------- table ---------- */
.table{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.table th,.table td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table th{font-size:var(--t1);text-transform:uppercase;letter-spacing:.02em;color:var(--muted);font-weight:600;text-overflow:clip}
.table tr:last-child td{border-bottom:0}.table td.wrap{white-space:normal}
.table .num{text-align:right}
.chev{color:var(--muted);font-size:var(--t4);text-align:right;padding-right:var(--s3);text-overflow:clip}
tr[aria-expanded] .chev span{display:inline-block;transition:transform .15s}tr[aria-expanded="true"] .chev span{transform:rotate(90deg)}tr[aria-expanded="true"] td{background:var(--surface-hover)}
tr.live td:first-child{box-shadow:inset 3px 0 var(--info)}
.rowname{color:var(--fg);font-weight:600}.rowname:hover{text-decoration:none}
td.results .res{display:flex;align-items:center;gap:var(--s2);line-height:1.7}td.results .chip{min-width:52px;text-align:center}td.results .nums{min-width:64px}
tr.ctl-detail>td{background:var(--bg);padding:var(--s2) var(--s3) var(--s3);white-space:normal}
.ctl-findings .table{background:var(--surface)}
.resname{font-family:var(--font)}.resname:hover{font-family:var(--mono);font-size:var(--t2)}

/* ---------- badges, chips, pills ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);font-size:var(--t1);font-weight:600;line-height:1.5;background:var(--neutral-bg);color:var(--neutral-fg)}
.badge.lk-verified,.badge.st-succeeded,.badge.fs-ok{background:var(--ok-bg);color:var(--ok-fg)}
.badge.st-running,.badge.fs-info,.badge.role-admin{background:var(--info-bg);color:var(--info-fg)}
.badge.lk-failed,.badge.st-failed,.badge.st-timed_out,.badge.fs-alarm{background:var(--bad-bg);color:var(--bad-fg)}
.badge.fs-error{background:var(--warn-bg);color:var(--warn-fg)}
.badge.role-owner{background:var(--owner-bg);color:var(--owner-fg)}
.chip{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--t1);background:var(--surface);color:var(--fg)}
/* instant CSS tooltip (no native delay): any element with data-tip */
[data-tip]{position:relative;cursor:help}
[data-tip]:hover{z-index:30}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 6px);z-index:30;white-space:nowrap;padding:var(--s1) var(--s2);border-radius:var(--r1);background:var(--fg);color:var(--bg);font-size:var(--t1);font-weight:400;line-height:1.4;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.table td,.table th{overflow:visible}.table td.trunc,.table .chev{overflow:hidden}
.chip-sm{font-size:11px;padding:0 6px}
.pill{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);font-size:var(--t1);font-weight:600}
.pill.failing{background:var(--bad-bg);color:var(--bad-fg)}.pill.passing{background:var(--ok-bg);color:var(--ok-fg)}.pill.not_evaluated{background:var(--warn-bg);color:var(--warn-fg)}

/* ---------- bars ---------- */
.bar{display:flex;height:12px;border-radius:var(--r-pill);overflow:hidden;background:var(--neutral-bg)}
.bar-sm{display:inline-flex;width:90px;height:6px;vertical-align:middle}
.bar .seg{display:block;height:100%}.bar .seg.passing{flex:1 1 auto}.bar a.seg{cursor:pointer}.bar a.seg:hover{filter:brightness(1.25);box-shadow:inset 0 0 0 2px var(--surface)}
.legend a:hover{text-decoration:underline}
.seg.failing{background:var(--bad)}.seg.passing{background:var(--ok)}.seg.noteval{background:var(--warn)}
.legend{margin:var(--s1) 0 var(--s2);display:flex;gap:var(--s3);flex-wrap:wrap}.legend a{color:var(--fg)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}.dot.failing{background:var(--bad)}.dot.passing{background:var(--ok)}.dot.noteval{background:var(--warn)}

/* ---------- forms & filters ---------- */
.form label{display:block;margin:var(--s2) 0}
.form input,.form select,.filters select,input,select{padding:var(--s2) var(--s2);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--fg);font:inherit}
.form input,.form select{width:100%;max-width:420px}
.filters{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.check{display:block;margin:var(--s1) 0}fieldset{border:1px solid var(--line);border-radius:var(--r1);margin:var(--s2) 0;padding:var(--s2) var(--s3)}
.copy input{width:100%;font-family:var(--mono)}
.flash{background:var(--warn-bg);color:var(--warn-fg);padding:var(--s2) var(--s3);border-radius:var(--r1);margin-bottom:var(--s3)}

/* ---------- report page ---------- */
.report{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4)}
.report-top{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}.report-top h2{margin:0}.report-top>.muted{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.report-top .downloads{margin-left:auto;margin-top:0;display:flex;gap:var(--s1)}
.headline{font-size:var(--t4);margin:var(--s3) 0 var(--s2)}
.steps li{margin:var(--s2) 0}
.events{list-style:none;padding:0;margin:0}.events li{padding:var(--s1) 0;border-bottom:1px dashed var(--line)}
.run-details{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s2)}.run-details summary{cursor:pointer;color:var(--brand)}
pre.logs{max-height:420px}
.status-row{display:flex;align-items:center;gap:var(--s4)}.status-row form{margin-left:auto}.status{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}.status .err{flex-basis:100%;margin:0}
.dur{font-variant-numeric:tabular-nums}
.service h3 .muted{font-weight:400}