/* Kept shared components. Solid surfaces, restrained depth, one icon set.
   Each surface sets the --k-* tokens to its own palette (the office is dark,
   the phone and the desk are light); these defaults are the light set. */
:root {
  --k-surface: #ffffff; --k-surface-2: #f4f6f2; --k-ink: #14201a; --k-mut: #5b6660; --k-dim: #8a938e;
  --k-line: rgba(20,32,26,.10); --k-line-2: rgba(20,32,26,.16);
  --k-green: #1e6b50; --k-green-bg: rgba(30,107,80,.10); --k-amber: #b7791f; --k-amber-bg: rgba(183,121,31,.12);
  --k-clay: #b23b3b; --k-clay-bg: rgba(178,59,59,.10); --k-navy: #2c5c8f; --k-navy-bg: rgba(44,92,143,.10);
  --k-shadow: 0 1px 2px rgba(15,25,20,.06), 0 10px 30px rgba(15,25,20,.10);
  --k-shadow-lift: 0 2px 6px rgba(15,25,20,.10), 0 22px 50px rgba(15,25,20,.18);
  --k-r: 16px;
}
.hi { display: inline-block; vertical-align: -0.18em; flex: none; }

/* ---- operational event stack ---------------------------------------------- */
.kev-stack { position: fixed; z-index: 120; right: 18px; top: calc(14px + var(--sosh, 0px) + var(--kept-demo-h, 0px) + env(safe-area-inset-top));
  width: min(340px, calc(100vw - 28px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.kev { pointer-events: auto; display: flex; gap: 12px; align-items: center; text-align: left; width: 100%; cursor: pointer;
  background: var(--k-surface); color: var(--k-ink); border: 1px solid var(--k-line); border-radius: var(--k-r);
  padding: 12px 14px; box-shadow: var(--k-shadow-lift); font: inherit; }
.kev-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--k-surface-2); color: var(--k-mut); flex: none; }
.kev-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kev-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.kev-top b { font-size: 14px; letter-spacing: -.005em; }
.kev-state { font-size: 12.5px; font-weight: 650; }
.kev-sub { font-size: 12px; color: var(--k-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kev-good .kev-ic { background: var(--k-green-bg); color: var(--k-green); } .kev-good .kev-state { color: var(--k-green); }
.kev-warn .kev-ic { background: var(--k-amber-bg); color: var(--k-amber); } .kev-warn .kev-state { color: var(--k-amber); }
.kev-bad .kev-ic { background: var(--k-clay-bg); color: var(--k-clay); } .kev-bad .kev-state { color: var(--k-clay); }
.kev-info .kev-ic { background: var(--k-navy-bg); color: var(--k-navy); } .kev-info .kev-state { color: var(--k-navy); }
@media (max-width: 600px) { .kev-stack { right: 14px; left: 14px; width: auto; } }

/* ---- floating dock ----------------------------------------------------------- */
.kdock { position: fixed; z-index: 110; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; border-radius: 22px;
  background: var(--k-surface); border: 1px solid var(--k-line); box-shadow: var(--k-shadow-lift); }
.kdock-i { --s: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: calc(46px * var(--s)); height: calc(46px * var(--s)); border-radius: 14px; border: 0; cursor: pointer;
  background: var(--k-surface-2); color: var(--k-mut); transition: width .14s ease-out, height .14s ease-out, background .2s, color .2s; }
.kdock-i .kdock-l { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px); opacity: 0; pointer-events: none;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--k-ink); color: var(--k-surface); padding: 4px 8px; border-radius: 7px;
  transition: opacity .15s, transform .2s cubic-bezier(.2,.9,.25,1.12); }
.kdock-i:hover .kdock-l, .kdock-i:focus-visible .kdock-l { opacity: 1; transform: translate(-50%, 0); }
.kdock-i.on { background: var(--k-ink); color: var(--k-surface); }
.kdock-i.on::after { content: ''; position: absolute; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: var(--k-ink); }
@media (pointer: coarse) {
  .kdock { gap: 4px; padding: 6px 8px; }
  .kdock-i { width: 64px; height: 50px; }
  .kdock-i .kdock-l { position: static; opacity: 1; transform: none; background: none; color: inherit; padding: 0; font-size: 10.5px; }
}

/* ---- info popover --------------------------------------------------------------- */
.kinfo { position: relative; display: inline-flex; vertical-align: middle; }
.kinfo-b { border: 0; background: none; color: var(--k-dim); cursor: pointer; padding: 2px; border-radius: 50%; display: inline-flex; }
.kinfo-b:hover, .kinfo.open .kinfo-b { color: var(--k-ink); }
.kinfo-p { position: absolute; z-index: 130; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); width: 260px; max-width: 80vw;
  background: var(--k-surface); color: var(--k-ink); border: 1px solid var(--k-line); border-radius: 12px; box-shadow: var(--k-shadow-lift);
  padding: 11px 13px; font-size: 12.5px; line-height: 1.5; font-weight: 450; text-align: left; opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .2s cubic-bezier(.2,.9,.25,1.12); }
.kinfo.open .kinfo-p { opacity: 1; transform: translateX(-50%); pointer-events: auto; }

/* ---- shared visual pieces --------------------------------------------------------- */
.kmeter { height: 6px; border-radius: 3px; background: var(--k-surface-2); overflow: hidden; position: relative; }
.kmeter > i { display: block; height: 100%; border-radius: 3px; background: var(--k-green); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.kmeter.low > i { background: var(--k-amber); } .kmeter.crit > i { background: var(--k-clay); }
.kmeter .kpar { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--k-ink); opacity: .45; border-radius: 1px; }
.kempty { text-align: center; padding: 34px 20px; color: var(--k-mut); }
.kempty .kempty-ic { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--k-surface-2); color: var(--k-mut); }
.kempty b { display: block; color: var(--k-ink); font-size: 16px; margin-bottom: 12px; }
.kchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 3px 8px; border-radius: 999px; background: var(--k-surface-2); color: var(--k-mut); white-space: nowrap; }
.kchip.good { background: var(--k-green-bg); color: var(--k-green); } .kchip.warn { background: var(--k-amber-bg); color: var(--k-amber); }
.kchip.bad { background: var(--k-clay-bg); color: var(--k-clay); } .kchip.info { background: var(--k-navy-bg); color: var(--k-navy); }
@media (prefers-reduced-motion: reduce) { .kdock-i, .kinfo-p, .kmeter > i { transition: none !important; } }