/* Koble opp radioen. Page layout in the kit's tokens; the equipment in its
   own fixed colours, because a radio is grey whatever the theme. */

.hookup {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: var(--s-6);
  align-items: start;
}
/* The kit gives .note and .btn their own display, which outranks the hidden
   attribute: the "ready" box showed while nothing was ready. */
.hookup [hidden] { display: none !important; }

.hk-side { position: sticky; top: var(--s-4); display: grid; gap: var(--s-3); }
.hk-bench { display: grid; gap: var(--s-6); min-width: 0; }

.hk-h { font-size: var(--t-lg, 1.15rem); margin: 0 0 var(--s-2); }
.hk-h3 { font-size: var(--t-base, 1rem); margin: var(--s-4) 0 var(--s-2); color: var(--muted); }
.hk-hint { color: var(--muted); margin: var(--s-2) 0; }
.hk-message { margin: 0; }

/* The checklist folds; its summary is the heading, the count, and -- only
   while folded -- the next step. */
.hk-check > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2);
  margin-bottom: var(--s-2); cursor: pointer; list-style: none;
}
.hk-check > summary::-webkit-details-marker { display: none; }
.hk-check > summary .hk-h { margin: 0; }
.hk-check > summary::before { content: "▾"; color: var(--muted); }
.hk-check:not([open]) > summary::before { content: "▸"; }
.hk-progress { color: var(--muted); }
.hk-next { flex-basis: 100%; color: var(--muted); }
.hk-check[open] .hk-next { display: none; }

/* The checklist: a ring that fills in, the step, and a reason when it is
   wrong. */
.hk-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.hk-checklist li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--s-2);
  align-items: start;
}
.hk-checklist .hk-ring {
  width: 1.1rem; height: 1.1rem; margin-top: 0.15rem;
  border: 2px solid var(--rule-strong); border-radius: 50%;
}
.hk-checklist li.is-done .hk-ring { background: var(--done); border-color: var(--done); }
.hk-checklist li.is-done .hk-step { color: var(--muted); }
.hk-checklist .hk-note { display: block; color: var(--danger); font-size: 0.9em; margin-top: 0.15rem; }
.hk-summary { margin: var(--s-2) 0 0; padding-left: 1.1rem; }
.hk-ready { display: block; }
.hk-ready h2 { margin: 0; font-size: var(--t-lg, 1.15rem); }

/* Parts: cables, adapters, power supplies -- things to pick up. */
.hk-tray {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s-2);
}
.hk-part, .hk-token {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: var(--s-2); align-items: center; text-align: left;
  width: 100%; min-height: 48px; padding: var(--s-2) var(--s-3);
  font: inherit; color: var(--ink);
  background: var(--surface); border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-control); cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
/* Only what can be dragged keeps the browser's own touch scrolling off;
   the cable and supply buttons are taps, and a swipe across them scrolls. */
.hk-token, [data-adapter] { touch-action: none; cursor: grab; }
.hk-part:hover, .hk-token:hover { border-color: var(--ink); }
.hk-part[aria-pressed="true"], .hk-token[aria-pressed="true"] {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--tint);
}
.hk-part .hk-icon, .hk-token .hk-icon, .hk-swatch { grid-row: 1 / span 2; }
.hk-part.is-plain { grid-template-columns: 1fr; }
.hk-icon {
  width: 40px; height: 40px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.hk-part-name { font-weight: var(--w-strong); line-height: 1.2; }
.hk-part-sub { color: var(--muted); font-size: 0.9em; line-height: 1.2; }
.hk-swatch { width: 14px; height: 40px; border-radius: 3px; }
.hk-swatch-ground { background: repeating-linear-gradient(45deg, #2f8f3a 0 6px, #e9c81c 6px 12px); }
.hk-swatch-red { background: #c8261d; }
.hk-swatch-black { background: #1c1d1f; }
.hk-swatch-plug { background: #2b2e33; border: 2px solid #8a9097; }

.hk-ends { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-3); }
.hk-ends .hk-token { width: auto; flex: 1 1 11rem; }
.hk-cable-line { flex: 0 1 3rem; height: 6px; border-radius: 3px; background: #1c1d1f; }
.hk-cable-line.is-thin { height: 4px; }
.hk-cable-line.is-tv { background: #e9e6df; border: 1px solid var(--rule-strong); }

/* The drawings, and the sockets over them. A socket is a real button laid
   over the drawing, so a finger, a mouse and a keyboard all reach it. */
.hk-radio-view { overflow-x: auto; border-radius: var(--radius-control); }
.hk-radio, .hk-scene { position: relative; }
.hk-rear, .hk-art { display: block; width: 100%; height: auto; }
.hk-drop {
  position: absolute; width: 52px; height: 52px; transform: translate(-50%, -50%);
  margin: 0; padding: 0; border: 0; background: transparent; border-radius: 50%;
  cursor: pointer;
}
.hk-drop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.is-carrying .hk-drop[data-drop] { outline: 2px dashed var(--accent); outline-offset: -2px; background: rgb(255 255 255 / 0.12); }
.hk-drop.is-hover { outline: 3px solid var(--accent); }

.hk-at-dc { left: 9.7%; top: 16.3%; }
.hk-at-gnd { left: 8.3%; top: 44.3%; }
.hk-at-ant { left: 8.6%; top: 66%; }
.hk-at-feed { left: 50%; top: 54.3%; }
.hk-at-rod { left: 25%; top: 35.9%; }
.hk-at-pipe { left: 75%; top: 41.2%; width: 96px; }
.hk-at-switch { left: 16.7%; top: 55.9%; border-radius: 8px; }
.hk-at-plus { left: 66.7%; top: 55.9%; }
.hk-at-minus { left: 82.2%; top: 55.9%; }

/* The equipment's own colours. */
.hk-body { fill: #2b2e33; }
.hk-body-edge { fill: none; stroke: #3a3e44; stroke-width: 2; }
.hk-foot { fill: #1b1d20; }
.hk-socket-body { fill: #1f2125; stroke: #45494f; stroke-width: 2; }
.hk-metal { fill: #b9bec4; stroke: #6e747b; stroke-width: 2; }
.hk-metal-dark { fill: #6e747b; stroke: #4c5157; stroke-width: 2; }
.hk-screw { fill: #8a9097; stroke: #4c5157; stroke-width: 1.5; }
.hk-slot { fill: none; stroke: #3a3e44; stroke-width: 3; stroke-linecap: round; }
.hk-ptfe { fill: #f2efe6; }
.hk-pin-hole { fill: #0e0f11; }
.hk-pin { fill: #c8a24a; }
.hk-grille { fill: none; stroke: #45494f; stroke-width: 3; }
.hk-strut { fill: none; stroke: #5a5f66; stroke-width: 6; stroke-linecap: round; }
.hk-label { fill: #c9ccd1; font: 600 13px var(--font-text, sans-serif); text-anchor: middle; letter-spacing: 0.04em; }
.hk-label-dark { fill: var(--ink); }
.hk-inert { opacity: 0.55; }

.hk-wire { fill: none; stroke-width: 7; stroke-linecap: round; }
.hk-wire-red, .lead-red .hk-wire { stroke: #c8261d; }
.hk-wire-black, .lead-black .hk-wire { stroke: #1c1d1f; }
.hk-wire-ground { stroke: #2f8f3a; stroke-dasharray: 10 10; }
.hk-lug { fill: #c9a24a; stroke: #7d6528; stroke-width: 2; }
.hk-plug-body { fill: #2f3237; stroke: #8a9097; stroke-width: 2; }

.hk-coax { fill: none; stroke: #16171a; stroke-width: 14; stroke-linecap: round; }
.coax-thin .hk-coax { stroke-width: 8; }
.coax-tv .hk-coax { stroke: #e9e6df; stroke-width: 9; }
.hk-coupling { fill: #c3c8ce; stroke: #6e747b; stroke-width: 2; }
.hk-knurl { fill: none; stroke: #8a9097; stroke-width: 1.5; }

.hk-dipole { fill: none; stroke: #6b4e2e; stroke-width: 3; stroke-linecap: round; }
.hk-insulator { fill: none; stroke: #f2efe6; stroke-width: 8; stroke-linecap: round; }
.hk-rope { fill: none; stroke: #9a8a6a; stroke-width: 2; }
.hk-balun { fill: #e8e6e0; stroke: #8a9097; stroke-width: 2; }

.hk-earth { fill: #6b5236; }
.hk-grass { fill: none; stroke: #4b7a32; stroke-width: 2; }
.hk-rod { fill: none; stroke: #b07a3a; stroke-width: 8; stroke-linecap: round; }
.hk-pipe { fill: none; stroke: #c9b23a; stroke-width: 18; stroke-linecap: round; }
.hk-pipe-band { fill: none; stroke: #b3261e; stroke-width: 18; }

.hk-psu { fill: #34373c; stroke: #1b1d20; stroke-width: 2; }
.hk-rocker { fill: #2b2e33; stroke: #8a9097; stroke-width: 2; }
.hk-rocker.is-on { fill: #b3261e; }
.hk-lamp { fill: #3a3e44; }
.hk-lamp.is-on { fill: #57d364; }
.hk-post-red { fill: #c8261d; stroke: #6b1410; stroke-width: 2; }
.hk-post-black { fill: #1c1d1f; stroke: #6e747b; stroke-width: 2; }
.hk-fuse { fill: #ffb3ad; }

/* A part being dragged: a copy that follows the pointer. */
.hk-ghost {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  opacity: 0.92; transform-origin: 0 0;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.25);
}

@media (max-width: 760px) {
  .hookup { grid-template-columns: 1fr; gap: var(--s-4); }
  .hk-side { position: static; }
  /* Every connection has one end in the radio. On a phone the rear panel
     rides along under the bar, whole and at the width of the screen, so a
     part picked up anywhere on the page goes into it without scrolling. */
  .hk-radio-card {
    position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top)); z-index: 10;
    margin: calc(-1 * var(--s-2)) calc(-1 * var(--gutter)) 0;
    padding: var(--s-2) var(--gutter);
    background: var(--paper); border-bottom: var(--rule-w) solid var(--rule);
  }
  .hk-radio-card .hk-h { font-size: var(--t-base, 1rem); margin-bottom: var(--s-1, 0.25rem); }
  /* At this size the panel's own lettering is too small to read; the three
     working sockets get theirs back. */
  .hk-label-work { font-size: 21px; }
  /* Their targets are bands across the left edge, each a finger high:
     socket, label and the dark panel beside them all count. */
  .hk-radio .hk-drop {
    transform: none; left: 0; width: 24%; height: 28.7%; border-radius: 6px;
  }
  .hk-radio .hk-at-dc { top: 2.6%; }
  .hk-radio .hk-at-gnd { top: 31.3%; }
  .hk-radio .hk-at-ant { top: 60%; }
  /* The answer to a move appears where the move was made: at the bottom of
     the screen, whatever part of the page is showing. */
  .hk-message {
    position: fixed; z-index: 15;
    left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
    border: var(--rule-w) solid var(--rule-strong);
  }
  /* Above the menu, where there is one. */
  body:has(.tabbar) .hk-message { bottom: calc(var(--tabbar-h) + var(--s-2) + env(safe-area-inset-bottom)); }
  /* Room under the last part for the message to sit in. */
  .hookup { padding-bottom: 5rem; }
  /* The two ends stack on a phone; a line between them would float. */
  .hk-cable-line { display: none; }
}