/* The panel block for the hourly cycle section (SEB-271: plain section, no
   card -- a thin top rule separates it like every other section, rows are
   separated by thin rules, nothing is boxed). Colours are style.css tokens,
   except the three cycle-strip states below, which are DESIGN.md's own
   chart palette (dust grey #D3D0CB, stamp grey #9A9A9A, vintage grape
   #3F3047 -- the same three literal values check_design.py's ALLOWED set
   already names) rather than the retired indigo ramp. style.css's :root
   has not absorbed this palette as named tokens yet, so these are written
   as the literal hex DESIGN.md specifies; that is a wider migration this
   issue does not take on. */

.dkpanel {
    background: none;
    color: var(--color-ink);
    font-family: var(--font-body);
  }

  /* Minimal hp-* styles needed for the cycle block */
  .dkpanel .hp-sec { display: flex; flex-direction: column; gap: 16px; }
  .dkpanel .hp-sechead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
  .dkpanel .hp-row { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
  .dkpanel .hp-main { flex: 999 1 600px; min-width: 0; }
  .dkpanel .hp-side { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 28px; }
  .dkpanel .hp-tight { gap: 10px; }
  .dkpanel .hp-list { border-top: 1px solid var(--color-neutral-300); }
  .dkpanel .hp-step { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-neutral-300); font-size: 14px; }
  .dkpanel .hp-time { width: 64px; }
  .dkpanel .hp-sdot, .dkpanel .hp-sdot-amber { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--color-ink); flex: none; }
  .dkpanel .hp-sdot-amber { background: var(--color-ink); }
  .dkpanel .hp-steptext { flex: 1; min-width: 180px; }
  .dkpanel .hp-strip { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
  .dkpanel .hp-strip span { height: 22px; border-radius: 3px; }
  .dkpanel .hp-strip .sc, .dkpanel .ksc { background: var(--color-neutral-300); }
  .dkpanel .hp-strip .sm, .dkpanel .ksm { background: var(--color-neutral-500); }
  .dkpanel .hp-strip .sf, .dkpanel .ksf { background: var(--color-neutral-900); }
  /* Gap: no reading at all for this clock hour. No fill of any kind -- "the
     chart shows a gap" is the page's own existing copy (subNote). A hollow,
     dashed square reads as empty without adding any new legend word. */
  .dkpanel .hp-strip .sg { background: none; border: 1px dashed var(--color-neutral-400); }
  .dkpanel .hp-legend { display: flex; flex-wrap: wrap; gap: 16px; }
  @media (max-width: 620px) {
    .dkpanel .hp-strip { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  }
  .dkpanel .hp-sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; vertical-align: -1px; }
  .dkpanel .hp-small { font-size: 14px; }
  .dkpanel .hp-tiny { font-size: 12px; }
  .dkpanel .soft { color: var(--color-neutral-700); }
  .dkpanel .muted { color: var(--color-neutral-600); }
  .dkpanel .mono { font-family: var(--font-body); font-variant-numeric: tabular-nums; }