/* HQ — the parent's view. Pairs with dash.js, scoped to .dash so nothing here
   reaches the kid's screen. Arcade cabinet, read by an adult: the pixel font
   shouts the section names, everything read as prose is the system font. */

.dash {
  --d-warn: #ffb02e;            /* finding it hard — not an alarm */
  --d-bad: #ff5d5d;             /* needs you. The only red on this screen */
  --d-well: #0d2233;            /* bar track, same well as the keypad */
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  margin-bottom: 22px;
}

/* ------------------------------------------------------------------ blocks */

.dash .d-sec { margin: 0 0 18px; }
.dash .d-sec:last-of-type { margin-bottom: 0; }

.dash .d-head {
  font-family: var(--pixel);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--d-bad);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.dash .d-head-quiet { color: var(--turq); }

.dash .d-dot {
  width: 10px; height: 10px; flex: 0 0 10px;
  background: var(--d-bad);
  box-shadow: 0 0 10px rgba(255, 93, 93, .8);
  animation: d-pulse 1.6s steps(2, end) infinite;
}
@keyframes d-pulse { 50% { opacity: .35; } }

/* -------------------------------------------------------------- 1 needs you */

.dash .d-alarm {
  border: 2px solid var(--d-bad);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #2a1418, #1b1016);
  box-shadow: 0 5px 0 #071018, 0 0 22px rgba(255, 93, 93, .18);
  padding: 15px 16px 16px;
}

.dash .d-need + .d-need {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255, 93, 93, .3);
}
.dash .d-need-name {
  font-size: 20px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em;
}
.dash .d-need-say {
  margin: 6px 0 11px;
  font-size: 15px; line-height: 1.45; color: #ffd9d9;
}
.dash .d-meta { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* the calm version of the same slot */
.dash .d-clearnight {
  border: 2px solid var(--green-deep);
  border-radius: var(--radius);
  background: #10241d;
  padding: 13px 16px;
}
.dash .d-ok {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--green);
  display: flex; align-items: center; gap: 10px;
}

/* ------------------------------------------------------------- 2 the bars */

.dash .d-rows { display: grid; gap: 12px; }

.dash .d-row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px 13px;
}
.dash .d-row-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.dash .d-name { font-size: 17px; font-weight: 600; line-height: 1.3; }

.dash .d-tag {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; border: 1px solid;
}
.dash .d-tag-got { color: var(--green); border-color: var(--green-deep); background: #12291d; }
.dash .d-tag-open { color: var(--d-warn); border-color: #7a5312; background: #2a2110; }

.dash .d-bar {
  display: flex; height: 12px; margin: 10px 0 8px;
  background: var(--d-well);
  border: 2px solid #0a1a26;
  overflow: hidden;
  image-rendering: pixelated;
}
.dash .d-bar i { display: block; height: 100%; transition: width .35s steps(10, end); }
.dash .d-hit.lv-ok    { background: repeating-linear-gradient(90deg, var(--green) 0 8px, #2fa85e 8px 10px); }
.dash .d-hit.lv-mid   { background: repeating-linear-gradient(90deg, var(--blue) 0 8px, #2b8fc4 8px 10px); }
.dash .d-hit.lv-hard  { background: repeating-linear-gradient(90deg, var(--d-warn) 0 8px, #c9861d 8px 10px); }
.dash .d-hit.lv-stuck { background: repeating-linear-gradient(90deg, var(--d-bad) 0 8px, #c93a3a 8px 10px); }
.dash .d-miss { background: #5d1f1f; box-shadow: inset 2px 0 0 #0a1a26; }

.dash .d-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
}
.dash .d-foot b { color: #4a6d84; font-weight: 400; }
.dash .d-foot span:first-child { color: var(--ink); font-variant-numeric: tabular-nums; }

.dash .d-more { margin: 9px 2px 0; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------- 3 cleared */

.dash .d-fold {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #10202f;
}
.dash .d-fold > summary {
  list-style: none; cursor: pointer; padding: 11px 14px;
  display: flex; align-items: center; gap: 9px;
}
.dash .d-fold > summary::-webkit-details-marker { display: none; }
.dash .d-fold > summary .d-head { margin: 0; }
.dash .d-fold > summary::after {
  content: "▸"; margin-left: auto; color: var(--muted); font-size: 12px;
}
.dash .d-fold[open] > summary::after { content: "▾"; }

.dash .d-clears { padding: 0 14px 12px; display: grid; gap: 1px; }
.dash .d-clear {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-top: 1px solid #1a3247;
  font-size: 15px;
}
.dash .d-tick { color: var(--green); flex: 0 0 auto; }
.dash .d-clear-name { flex: 1; min-width: 0; }
.dash .d-clear-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- 4 strip */

.dash .d-strip {
  margin-top: 18px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.dash .d-stat { background: #10202f; padding: 9px 12px 10px; }
.dash .d-k {
  font-family: var(--pixel); font-size: 8px; line-height: 1.6;
  letter-spacing: .08em; text-transform: uppercase; color: var(--turq);
}
.dash .d-v {
  font-size: 22px; font-weight: 700; margin-top: 3px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  display: flex; align-items: baseline; gap: 7px;
}
.dash .d-u { font-size: 12px; font-weight: 400; color: var(--muted); }

.dash .d-badges { grid-column: 1 / -1; background: #10202f; padding: 10px 12px 11px; }
.dash .d-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dash .d-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink);
  background: #16293c; border: 1px solid var(--line); border-radius: 3px;
  padding: 4px 8px 4px 6px;
}
.dash .d-badge-i { font-size: 13px; line-height: 1; }
.dash .d-badge-none { color: var(--muted); }

/* ------------------------------------------------------------- empty vault */

.dash .d-blank {
  margin: 0; padding: 16px;
  border: 1px dashed var(--turq-deep); border-radius: var(--radius);
  color: var(--muted); font-size: 15px; line-height: 1.5;
}

/* --------------------------------------------------------- wider than 560px */

@media (min-width: 560px) {
  .dash .d-strip { grid-template-columns: repeat(4, 1fr); }
  .dash .d-need-name { font-size: 22px; }
  .dash .d-need-say { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .dash * { animation: none !important; transition: none !important; }
}