/* Antenne. Page layout in the kit's tokens, like the hookup module; the
   dipole in its own fixed colours, because copper is brown whatever the
   theme. */

.antenna {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: var(--s-6);
  align-items: start;
}
/* The kit gives .note its own display, which outranks the hidden
   attribute. */
.antenna [hidden] { display: none !important; }

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

.an-h { font-size: var(--t-lg, 1.15rem); margin: 0; }
.an-hint { color: var(--muted); margin: 0; max-width: 60ch; }
.an-message { margin: 0; }
/* A heading over its text, not beside it as the kit's .note lays out. */
.an-done { display: block; }
.an-done h2 { margin: 0; font-size: var(--t-lg, 1.15rem); }
.an-done p { margin: var(--s-1) 0 0; }

/* The checklist folds; its summary is the heading, the count, and -- only
   while folded -- the next step. */
.an-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;
}
.an-check > summary::-webkit-details-marker { display: none; }
.an-check > summary::before { content: "▾"; color: var(--muted); }
.an-check:not([open]) > summary::before { content: "▸"; }
.an-progress { color: var(--muted); }
.an-next { flex-basis: 100%; color: var(--muted); }
.an-check[open] .an-next { display: none; }
.an-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.an-checklist li { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--s-2); align-items: start; }
.an-ring {
  width: 1.1rem; height: 1.1rem; margin-top: 0.15rem;
  border: 2px solid var(--rule-strong); border-radius: 50%;
}
.an-checklist li.is-done .an-ring { background: var(--done); border-color: var(--done); }
.an-checklist li.is-done .an-step-label { color: var(--muted); }

/* Keys: the bands. */
.an-keys { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.an-key {
  min-width: 48px; min-height: 48px; padding: 0 var(--s-4);
  font: inherit; font-weight: var(--w-strong); color: var(--ink);
  background: var(--surface); border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-control); cursor: pointer;
}
.an-key:hover:not(:disabled) { border-color: var(--ink); }
.an-key[aria-pressed="true"] {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--tint);
}
.an-key:disabled { opacity: 0.4; cursor: not-allowed; }
/* The dipole, drawn in the open air. */
.an-dipole { display: block; width: 100%; max-width: 40rem; height: auto; }
.an-wire { fill: none; stroke: #6b4e2e; stroke-width: 3; stroke-linecap: round; }
.an-insulator { fill: none; stroke: #e8e4d8; stroke-width: 8; stroke-linecap: round; }
.an-rope { fill: none; stroke: #9a8a6a; stroke-width: 2; }
.an-balun { fill: #e8e6e0; stroke: #8a9097; stroke-width: 2; }
.an-coax { fill: none; stroke: #16171a; stroke-width: 8; stroke-linecap: round; }
.an-label { fill: #2b2e33; font: 600 12px var(--font-text, sans-serif); text-anchor: middle; }
.an-leg-label { fill: var(--ink); font-size: 14px; }

/* The chart, in the page's own ink. */
.an-measure, .an-cut { min-height: 48px; }
.an-chart { display: block; width: 100%; max-width: 40rem; height: auto; }
.an-grid { stroke: var(--rule); stroke-width: 1; }
.an-grid.is-v { stroke-dasharray: 2 4; }
.an-band { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.an-window { fill: color-mix(in srgb, var(--done) 18%, transparent); }
.an-axis { fill: var(--muted); font: 11px var(--font-text, sans-serif); text-anchor: middle; }
.an-axis-y { text-anchor: end; }
.an-axis-name { text-anchor: end; }
.an-curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.an-curve.is-old { stroke: var(--muted); stroke-width: 1.5; opacity: 0.6; }
.an-min { fill: var(--paper); stroke: var(--accent); stroke-width: 2.5; }
.an-min-label { fill: var(--ink); font: 600 12px var(--font-text, sans-serif); }

.an-leg { display: grid; gap: var(--s-1); }
.an-leg input {
  width: 9rem; min-height: 48px; padding: 0 var(--s-3);
  font: inherit; font-size: 1.15rem; color: var(--ink);
  background: var(--surface); border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-control);
}

@media (max-width: 760px) {
  .antenna { grid-template-columns: 1fr; gap: var(--s-4); padding-bottom: 5rem; }
  .an-side { position: static; }
  .an-bench { gap: var(--s-5); }
  /* The answer to a press is at the bottom of the screen, above the menu,
     wherever the page is scrolled. */
  .an-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);
  }
  body:has(.tabbar) .an-message { bottom: calc(var(--tabbar-h) + var(--s-2) + env(safe-area-inset-bottom)); }
}