/* UI.4 honeycomb - Signals screen (standard §17; layout of T60-X, tasks/P7-design/T60-X/UI.4/selected/layout.css).
   Colours come from the app style tokens of .nx (Terminal / Neon / Bloomed); the cells carry their own palette. */
#view-honeycomb .hc { max-width: 1440px; margin: 0 auto; padding: 16px 18px 40px; color: var(--fg); font-family: var(--nx-font); }
#view-honeycomb small, #view-honeycomb dt, #view-honeycomb time, #view-honeycomb .hc-quiet { font: 11px/1.5 var(--nx-mono); color: var(--fg-2); }
#view-honeycomb h2, #view-honeycomb h3, #view-honeycomb p, #view-honeycomb dl, #view-honeycomb dd { margin: 0; }
.hc-top, .hc-maphead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hc-top { margin-bottom: 12px; }
.hc-title { font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.hc-switch { display: flex; border: 1px solid var(--border-2); border-radius: var(--nx-radius-sm); overflow: hidden; }
.hc-switch button { padding: 7px 12px; font: 12px var(--nx-mono); color: var(--fg-2); }
.hc-switch button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.hc-note { color: var(--warn); font: 11px var(--nx-mono); min-height: 0; margin-bottom: 6px; }
.hc-note:empty { display: none; }
.hc-desk { display: grid; grid-template-columns: minmax(220px, 25%) 1fr; gap: 12px; }
.hc-card, .hc-map, .hc-below details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--nx-radius); }
.hc-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; align-self: start; }
.hc-card.enter .hc-hero svg { animation: hc-enter .42s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 50%; }
@keyframes hc-enter { from { transform: scale(.45); opacity: .3; } to { transform: scale(1); opacity: 1; } }
.hc-back { align-self: flex-start; padding: 0; font: 11px var(--nx-mono); color: var(--fg-2); }
.hc-hero { width: 100%; height: 108px; }
.hc-hero svg { width: 100%; height: 100%; overflow: visible; }
.hc-card h3 { font: 700 24px var(--nx-mono); letter-spacing: -.05em; }
.hc-status { display: flex; flex-wrap: wrap; gap: 6px; font: 12px var(--nx-mono); }
.hc-card dd .nx-bd, .hc-card dd .nx-bl { margin-left: 6px; } .hc-card dd small { color: var(--fg-2); }
.hc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hc-legend { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; }
.hc-legend > small { color: var(--fg-2); font: 11px var(--nx-mono); }
.hc-card dl > div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); padding: 6px 0; }
.hc-card dd { font: 12px var(--nx-mono); text-align: right; font-variant-numeric: tabular-nums; }
.hc-map { min-width: 0; padding: 14px; }
.hc-maphead { margin-bottom: 8px; }
.hc-maphead strong { font-size: 14px; }
.hc-maphead input { width: 160px; padding: 7px 9px; font: 12px var(--nx-mono); color: var(--fg); background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--nx-radius-sm); }
.hc-svg { width: 100%; display: block; overflow: visible; }
.hc-node { cursor: pointer; outline: none; }
.hc-node[aria-disabled="true"] { cursor: default; }
.hc-node:focus-visible .hc-hit { stroke: var(--fg); stroke-width: 2; }
/* owner 5 Nov: the chosen cell is not outlined at the sides - it glows in its own colour and gets brighter */
.hc-node.on { filter: brightness(1.3) drop-shadow(0 0 5px var(--hc-glow, var(--cyan))) drop-shadow(0 0 12px var(--hc-glow, var(--cyan))); }
/* Bloomed is light: brightness washes the drawing out (T60-X REVIEW-116-V6: pip outlines 1.8-2.8:1) - only the glow, contrast as unselected */
html[data-theme="bloomed"] .hc-node.on { filter: drop-shadow(0 0 4px var(--hc-glow, var(--cyan))) drop-shadow(0 0 9px var(--hc-glow, var(--cyan))); }
/* T60-X REVIEW-116-V7: the glow of a chosen Bloomed cell lightens the ground of its open pips - their outline darkens (worst 4.43:1) */
/* UI.5 (owner 6 Nov): open pips now carry the side line #175f32 / #9b2633 - darkened when chosen (T60-X review118, worst 3.21:1) */
html[data-theme="bloomed"] .hc-node.on polygon[fill="none"][stroke="#175f32"] { stroke: #072713; }
html[data-theme="bloomed"] .hc-node.on polygon[fill="none"][stroke="#9b2633"] { stroke: #430912; }
.hc-node[aria-disabled="false"]:not(.on):hover { filter: brightness(1.18); }
.hc-more { display: block; width: 100%; margin-top: 9px; padding: 8px; font: 12px var(--nx-mono); color: var(--fg-2); border: 1px solid var(--border-2); border-radius: var(--nx-radius-sm); }
.hc-below { margin-top: 12px; display: grid; gap: 9px; }
.hc-below details { padding: 0 16px; }
.hc-below summary { padding: 12px 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.hc-below details[open] > summary { border-bottom: 1px solid var(--border); }
.hc-event { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--border); padding: 8px 0; font-size: 13px; }
.hc-event:last-child { border: 0; }
.hc-event b { font-weight: 500; }
.hc-event span { font: 11px var(--nx-mono); color: var(--fg-2); }
.hc-quiet { padding: 10px 0; line-height: 1.6; }
.hc-guide-opt { display: flex; align-items: center; gap: 5px; padding-top: 9px; }
.hc-guide-opt button { padding: 3px 10px; font: 12px var(--nx-mono); border: 1px solid var(--border-2); border-radius: var(--nx-radius-sm); }
.hc-guide-opt button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.hc-guide { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 8px 0 12px; }
.hc-guide > div { text-align: center; font: 11px var(--nx-mono); color: var(--fg-2); }
.hc-guide svg { display: block; height: 58px; width: 100%; overflow: visible; }
.hc-bars { display: block; width: 100%; max-height: 230px; }
.hc-bars .up { stroke: var(--green); fill: var(--green); }
.hc-bars .dn { stroke: var(--red); fill: var(--red); }
.hc-bars path.lv { fill: none; stroke-dasharray: 4 4; }
.hc-bars text.lv { font: 10px var(--nx-mono); stroke: none; }
.hc-bars .lv.entry { stroke: var(--cyan); fill: var(--cyan); }
.hc-bars .lv.stop { stroke: var(--red); fill: var(--red); }
.hc-bars .lv.tp { stroke: var(--green); fill: var(--green); }
.hc-bars path.lv.entry, .hc-bars path.lv.stop, .hc-bars path.lv.tp { fill: none; }
@media (max-width: 740px) {
  #view-honeycomb .hc { padding: 12px 10px 28px; }
  .hc-title { font-size: 22px; }
  .hc-desk { display: flex; flex-direction: column; }
  .hc-map { order: 0; padding: 10px; }
  .hc-card { order: 1; display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; padding: 12px; }
  .hc-card > .hc-quiet, .hc-card > .hc-back, .hc-card > small { grid-column: 1 / -1; }
  .hc-card > .hc-back { justify-self: start; }
  .hc-hero { grid-column: 1; grid-row: 3 / 7; height: 86px; }
  .hc-card h3, .hc-status, .hc-card dl { grid-column: 2; }
  .hc-maphead input { width: 128px; }
  .hc-guide { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hc-event { grid-template-columns: 96px 1fr auto; }
}