/* Qapha Guardian dashboard. Imports tokens.css + khuluma.css for the shared
   CongoSky chrome; adds the standing parent view (children, trends, alerts,
   thresholds). The live demo (/qapha/demo/) shows the moment; this shows the
   ongoing picture a guardian actually lives with. */

.gbar { display:flex; align-items:center; gap:.6rem; }
.demo-tag { font-size:.72rem; font-family:var(--kh-font-head); letter-spacing:.08em; text-transform:uppercase; color:var(--kh-bg); background:var(--kh-mustard); padding:.2rem .5rem; border:var(--kh-stroke) solid var(--kh-ink-stroke); }

.disclaimer { font-size:.82rem; color:var(--kh-muted); border-left:var(--kh-stroke-heavy) solid var(--kh-mustard); background:var(--kh-panel); padding:.6rem .8rem; margin:.4rem 0 1rem; }

.install-row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:0 0 1rem; }
.install-btn { display:none; font-family:var(--kh-font-head); font-weight:600; background:var(--kh-mustard); color:var(--kh-bg); border:var(--kh-stroke) solid var(--kh-ink-stroke); padding:.45rem .9rem; cursor:pointer; }
.net { font-size:.78rem; color:var(--kh-muted); }
.net.off { color:var(--kh-terracotta); }

h2.sec { font-family:var(--kh-font-head); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--kh-muted); margin:1.4rem 0 .6rem; }

/* children */
.kids { display:grid; gap:.8rem; grid-template-columns:1fr; }
@media (min-width:620px){ .kids{ grid-template-columns:1fr 1fr; } }
.kid { background:var(--kh-panel); border:var(--kh-stroke-heavy) solid var(--kh-ink-stroke); box-shadow:inset 0 0 0 2px var(--kh-cream); padding:.8rem .9rem; }
.kid-head { display:flex; align-items:center; gap:.6rem; }
.kid-lamp { width:22px; height:22px; border-radius:50%; flex:none; border:2px solid var(--kh-ink-stroke); }
.kid-lamp.green{ background:var(--kh-olive); } .kid-lamp.amber{ background:var(--kh-terracotta); } .kid-lamp.red{ background:var(--kh-warrior-red); animation:pulse 1.2s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 6px rgba(168,32,40,0);} 0%,100%{ box-shadow:0 0 0 0 rgba(168,32,40,.4);} }
.kid-name { font-family:var(--kh-font-head); font-weight:600; font-size:1rem; }
.kid-age { color:var(--kh-muted); font-size:.85rem; }
.kid-status { font-size:.9rem; margin:.5rem 0 .3rem; }
.kid-spark { display:block; width:100%; height:34px; margin-top:.3rem; }
.kid-foot { display:flex; justify-content:space-between; font-size:.74rem; color:var(--kh-muted); margin-top:.3rem; }

/* alert feed */
.feed { display:flex; flex-direction:column; gap:.6rem; }
.feed-empty { color:var(--kh-muted); font-size:.9rem; }
.alert { border:var(--kh-stroke) solid var(--kh-ink-stroke); background:var(--kh-panel); }
.alert.ack { opacity:.6; }
.a-head { display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; flex-wrap:wrap; }
.alert.red .a-head{ background:var(--kh-warrior-red); color:#fff; } .alert.amber .a-head{ background:var(--kh-terracotta); color:#2a160e; }
.a-head .who { font-family:var(--kh-font-head); font-weight:600; }
.a-head .tier { font-family:var(--kh-font-head); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor; padding:.04rem .35rem; border-radius:var(--kh-radius-pill); }
.a-head .when { margin-left:auto; font-size:.74rem; opacity:.85; }
.a-body { padding:.5rem .6rem; }
.a-cat { font-family:var(--kh-font-head); font-weight:600; font-size:.92rem; margin-bottom:.2rem; }
.a-action { font-size:.9rem; }
.a-help { font-size:.82rem; margin-top:.35rem; } .a-help a{ color:var(--kh-mustard); }
.a-foot { display:flex; align-items:center; gap:.7rem; margin-top:.5rem; flex-wrap:wrap; }
.redbar { font-family:monospace; letter-spacing:.1em; color:var(--kh-dust); }
.ack-btn { font-family:var(--kh-font-head); font-size:.76rem; background:none; border:1px solid var(--kh-line); color:var(--kh-muted); padding:.18rem .55rem; border-radius:var(--kh-radius-pill); cursor:pointer; }
.ack-btn:hover{ color:var(--kh-ink); border-color:var(--kh-mustard); }
.ack-mark { font-size:.76rem; color:var(--kh-olive); font-family:var(--kh-font-head); }

/* thresholds */
.rules { display:flex; flex-direction:column; gap:.5rem; }
.rule { display:flex; align-items:flex-start; gap:.6rem; background:var(--kh-panel); border:var(--kh-stroke) solid var(--kh-ink-stroke); padding:.55rem .7rem; }
.rule .dot { width:16px; height:16px; border-radius:50%; flex:none; margin-top:.2rem; border:2px solid var(--kh-ink-stroke); }
.rule .dot.r{ background:var(--kh-warrior-red);} .rule .dot.a{ background:var(--kh-terracotta);} .rule .dot.g{ background:var(--kh-olive);}
.rule .txt { flex:1; }
.rule .txt b { font-family:var(--kh-font-head); display:block; font-size:.9rem; }
.rule .txt span { font-size:.82rem; color:var(--kh-muted); }
.rule select { background:var(--kh-bg); color:var(--kh-ink); border:var(--kh-stroke) solid var(--kh-ink-stroke); font:inherit; font-size:.82rem; padding:.25rem .4rem; }
.rule.locked select { opacity:.6; pointer-events:none; }

.reset { background:none; border:0; color:var(--kh-muted); font-size:.78rem; text-decoration:underline; cursor:pointer; padding:0; margin-top:.8rem; }