/* ===========================================================
   Z3UI — shared design system for Z3POC-WEB-RADIO
   Loaded on every page (main site + admin). One place defines:
   icons, cards, tiles, badges, section headers and the app shell.
   Depends on the :root variables in z3dmr.css.
   =========================================================== */

/* ---------- 1. icons ---------- */
.z3i{display:inline-block;vertical-align:middle;flex:none;color:currentColor}
.z3ib{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:10px;
  background:rgba(255,176,58,.1);color:var(--amber);
  border:1px solid rgba(255,176,58,.22)}
.z3ib-sm{width:26px;height:26px;border-radius:8px}
.z3ib-lg{width:44px;height:44px;border-radius:13px}
.z3ib-ok{background:rgba(57,217,138,.1);color:var(--green);border-color:rgba(57,217,138,.24)}
.z3ib-off{background:rgba(255,82,82,.09);color:#ff7a7a;border-color:rgba(255,82,82,.24)}
.z3ib-warn{background:rgba(255,176,58,.1);color:var(--amber);border-color:rgba(255,176,58,.24)}
.z3ib-info{background:rgba(120,180,255,.1);color:#8fc0ff;border-color:rgba(120,180,255,.24)}
.z3ib-mute{background:rgba(255,255,255,.04);color:var(--muted);border-color:var(--line)}

/* ---------- 2. section / card heading ---------- */
.z3-h{display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font-size:1.06rem;font-weight:600;color:var(--text)}
.z3-h-w{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.z3-h-sub{font-size:.8rem;font-weight:400;color:var(--muted)}
.z3-h-act{margin-left:auto;display:flex;gap:8px;align-items:center}
.z3-kicker{margin:0 0 6px;font:600 11px var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber)}

/* ---------- 3. cards ---------- */
.z3-card{position:relative;padding:20px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);
  display:flex;flex-direction:column;min-width:0}
.z3-card:hover{border-color:#31413c}
.z3-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.z3-card-head .z3-h{margin:0}
.z3-card-head .z3-h-act{margin-left:auto}
.z3-card.is-ok{border-color:rgba(57,217,138,.3);
  background:linear-gradient(150deg,rgba(57,217,138,.07),var(--panel) 55%)}
.z3-card.is-warn{border-color:rgba(255,176,58,.3);
  background:linear-gradient(150deg,rgba(255,176,58,.07),var(--panel) 55%)}
.z3-card.is-off{border-color:rgba(255,82,82,.28);
  background:linear-gradient(150deg,rgba(255,82,82,.06),var(--panel) 55%)}
.z3-card-body{flex:1;min-width:0}

/* ---------- 4. stat tiles ---------- */
.z3-tiles{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.z3-tile{background:var(--panel-2);padding:16px 15px;
  display:flex;align-items:center;gap:13px;min-width:0}
.z3-tile-v{display:flex;flex-direction:column;gap:3px;min-width:0}
.z3-tile-v strong{font:600 24px/1 var(--mono);color:var(--text);
  overflow:hidden;text-overflow:ellipsis}
.z3-tile-v span{font-size:11.5px;color:var(--muted);line-height:1.3}
.z3-tile.ok .z3ib{background:rgba(57,217,138,.1);color:var(--green);border-color:rgba(57,217,138,.24)}
.z3-tile.warn .z3ib{background:rgba(255,176,58,.1);color:var(--amber);border-color:rgba(255,176,58,.24)}
.z3-tile.off .z3ib{background:rgba(255,82,82,.09);color:#ff7a7a;border-color:rgba(255,82,82,.24)}

/* ---------- 5. badges / pills ---------- */
.z3-badge{display:inline-flex;align-items:center;gap:6px;
  font:600 11px var(--mono);letter-spacing:.06em;
  padding:4px 10px;border-radius:20px;white-space:nowrap;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted)}
.z3-badge .z3i{width:13px;height:13px}
.z3-badge-ok{color:var(--green);border-color:rgba(57,217,138,.3);background:rgba(57,217,138,.08)}
.z3-badge-warn{color:var(--amber);border-color:rgba(255,176,58,.3);background:rgba(255,176,58,.08)}
.z3-badge-off{color:#ff7a7a;border-color:rgba(255,82,82,.3);background:rgba(255,82,82,.08)}
.z3-badge-info{color:#8fc0ff;border-color:rgba(120,180,255,.3);background:rgba(120,180,255,.08)}

/* ---------- 6. checklist (honest state lists) ---------- */
.z3-check{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.z3-check li{display:flex;gap:11px;align-items:flex-start;
  font-size:.92rem;line-height:1.55;color:var(--muted)}
.z3-check li b{color:var(--text);font-weight:600}
.z3-check .z3i{flex:none;margin-top:2px}
.z3-check .ok{color:var(--green)}
.z3-check .off{color:#ff7a7a}
.z3-check .warn{color:var(--amber)}

/* ---------- 7. icon list (features) ---------- */
.z3-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.z3-list li{display:flex;gap:12px;align-items:flex-start}
.z3-list-t{min-width:0}
.z3-list-t b{display:block;color:var(--text);font-size:.95rem;font-weight:600;margin-bottom:2px}
.z3-list-t span{display:block;font-size:.88rem;line-height:1.5;color:var(--muted)}

/* ---------- 8. toolbar (page actions) ---------- */
.z3-toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.z3-btn{display:inline-flex;align-items:center;gap:7px;
  font:600 13px var(--sans);color:var(--text);
  padding:.52rem .9rem;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  text-decoration:none;cursor:pointer}
.z3-btn:hover{border-color:#3b4d47;background:rgba(255,255,255,.06);text-decoration:none}
.z3-btn-p{background:var(--amber);border-color:var(--amber);color:#1a1200}
.z3-btn-p:hover{background:#ffbe5c;border-color:#ffbe5c}
.z3-btn-ok{color:var(--green);border-color:rgba(57,217,138,.35);background:rgba(57,217,138,.08)}
.z3-btn-ok:hover{background:rgba(57,217,138,.14)}
.z3-btn-danger{color:#ff7a7a;border-color:rgba(255,82,82,.35);background:rgba(255,82,82,.08)}
.z3-btn-danger:hover{background:rgba(255,82,82,.14)}
.z3-btn-sm{padding:.34rem .62rem;font-size:12px;border-radius:8px}

/* ---------- 9. legacy list icons now rendered as SVG (tx checklist) ---------- */
.tx-ico{display:inline-flex;vertical-align:middle;width:16px;color:var(--muted)}
.tx-checklist li.ok .tx-ico{color:var(--green)}
.tx-checklist li.todo .tx-ico{color:var(--muted)}
/* Ranking/list titles that carry an inline icon */
.panel-title{display:inline-flex;align-items:center;gap:8px}
.activity-title{display:inline-flex;align-items:center;gap:7px}

/* ===========================================================
   10. TERMINAL BRIDGE
   The terminal is a dense radio console: its uppercase micro-labels
   are deliberate, not legacy. So we do NOT restyle .panel into
   .z3-card — that would make the controls look like web cards.
   Instead the panels are pulled onto the same design TOKENS
   (border, radius, chip sizes, tones) and gain inline SVG icons,
   so the console and the rest of the product look like one thing.
   =========================================================== */
.panel{border-color:var(--line);border-radius:var(--radius)}
.panel-title{gap:8px}
.panel-title .z3i{opacity:.85}

/* icon chip sized for the console's micro-labels */
.panel-title .z3ib{width:22px;height:22px;border-radius:6px;
  background:rgba(255,255,255,.04);border-color:transparent;color:var(--muted)}
.panel-title .z3ib-ok{color:var(--green);background:rgba(57,217,138,.1)}
.panel-title .z3ib-warn{color:var(--amber);background:rgba(255,176,58,.1)}
.panel-title .z3ib-info{color:#8fc0ff;background:rgba(120,180,255,.1)}
.panel-title .z3ib-off{color:#ff7a7a;background:rgba(255,82,82,.09)}

/* status chips inside the console keep the Z3UI badge language */
.panel .z3-badge{font-size:10px;padding:3px 8px}
.insight-head .panel-title,.panel-head-row .panel-title{margin:0}

/* details/summary panels: keep the marker clean next to an icon chip */
.side-fold > summary::-webkit-details-marker{display:none}
.side-fold > summary{list-style:none;cursor:pointer}
.side-fold > summary .panel-title{display:inline-flex}
@media(max-width:560px){.panel-title{font-size:.68rem;letter-spacing:.08em}}

/* ---------- 9. page shell ---------- */
.z3-pagehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.z3-pagehead h1{margin:0;font-size:1.55rem;line-height:1.15}
.z3-pagehead p{margin:4px 0 0;font-size:.9rem;color:var(--muted);max-width:70ch;line-height:1.55}
.z3-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.z3-grid-2{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.z3-stack{display:grid;gap:14px}
.z3-note{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;
  border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:10px;background:var(--panel-2);font-size:.88rem;
  line-height:1.55;color:var(--muted)}
.z3-note .z3i{flex:none;margin-top:1px}
.z3-note b{color:var(--text)}
.z3-note.is-ok{border-left-color:var(--green)}
.z3-note.is-warn{border-left-color:var(--amber);background:rgba(255,176,58,.05)}
.z3-note.is-off{border-left-color:#ff7a7a;background:rgba(255,82,82,.05)}

/* ---------- 10. admin navigation (grouped) ---------- */
.admin-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0 0 20px;padding:10px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel)}
.admin-nav .admin-home{display:inline-flex;align-items:center;gap:7px;
  font:600 13px var(--sans);color:var(--text);text-decoration:none;
  padding:.5rem .85rem;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.03)}
.admin-nav .admin-home:hover{border-color:#3b4d47;text-decoration:none}
.admin-grp{display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  padding-left:11px;margin-left:5px;border-left:1px solid var(--line)}
.admin-grp-lbl{font:600 9.5px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding:0 3px 0 5px}
.admin-link{display:inline-flex;align-items:center;gap:7px;
  font:600 13px var(--sans);color:var(--muted);text-decoration:none;
  padding:.44rem .72rem;border-radius:9px;
  border:1px solid transparent;white-space:nowrap}
.admin-link:hover{color:var(--text);background:rgba(255,255,255,.05);text-decoration:none}
.admin-link .z3ib{width:24px;height:24px;border-radius:7px;
  background:rgba(255,255,255,.04);border-color:transparent;color:inherit}
.admin-link.active{color:var(--text);background:rgba(255,176,58,.1);
  border-color:rgba(255,176,58,.28)}
.admin-link.active .z3ib{background:rgba(255,176,58,.16);color:var(--amber);
  border-color:rgba(255,176,58,.24)}
.admin-who{margin-left:auto;display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:var(--muted);padding-left:11px;
  border-left:1px solid var(--line)}
.admin-who .who-call{font:600 12px var(--mono);color:var(--green)}

/* ---------- 11. responsive ---------- */
@media(max-width:760px){
  .z3-grid-2{grid-template-columns:1fr}
  .z3-pagehead h1{font-size:1.3rem}
  .admin-grp{border-left:0;padding-left:0;margin-left:0;width:100%}
  .admin-grp-lbl{width:100%;padding:4px 0 0}
  .admin-who{margin-left:0;border-left:0;padding-left:0}
}
@media(prefers-reduced-motion:reduce){
  .z3-card,.z3-btn,.admin-link{transition:none}
}