/* ── De set ───────────────────────────────────────────────────────────────
   Een foto van de eigen transceiver met daarover een levend scherm: de
   spectrum scope beweegt echt, de frequentie staat er in de kleur van het
   thema, de S-meter trilt en de LED's ademen.

   De foto zelf is een <img> in de HTML (dus geen background-image: hij moet
   mee kunnen schalen, een alt-tekst hebben en lazy kunnen laden). Het scherm
   wordt er als percentage overheen gelegd, zodat het meeschaalt op elk formaat.

   Uitlijnen op jouw eigen foto gaat met de vier variabelen hieronder; de
   waarden lees je af in _werk/rig-kalibratie.html. */
.rig{
  --screen-x:25.71%;   /* linkerkant van het TFT-scherm, in % van de foto */
  --screen-y:12.26%;     /* bovenkant */
  --screen-w:38.64%;     /* breedte */
  --screen-h:60.19%;     /* hoogte  */
  --rx-x:34.16%;         /* de RX-LED, voor het ademende lampje */
  --rx-y:4.58%;

  margin:22px 0 6px;
}
/* Het referentievlak voor het scherm en de LED is de FOTO, niet de hele figure.
   Stond het onderschrift binnen dat vlak, dan verschoof alles zodra dat over
   twee regels liep — precies wat er op een telefoon gebeurde. */
.rig .rig-frame{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--screen);
  box-shadow:var(--shadow);
  isolation:isolate;
}
.rig img{
  display:block;width:100%;height:auto;
  /* de foto krijgt een lichte kleurzweem van het actieve thema, zodat een
     donkere foto ook in een licht thema niet als vreemd element aanvoelt */
  filter:saturate(.92) contrast(1.04);
}
/* het scherm van de set */
.rig .screen{
  position:absolute;
  left:var(--screen-x);top:var(--screen-y);
  width:var(--screen-w);height:var(--screen-h);
  display:grid;grid-template-rows:auto auto auto 1fr auto;
  gap:2%;padding:1.6% 2%;
  background:linear-gradient(180deg,#04070c,#020407);
  box-shadow:inset 0 0 8% 2% rgba(0,0,0,.75);
  font-family:var(--font-mono);
  container-type:inline-size;
  overflow:hidden;
}
/* glasreflectie over het scherm: één schuine veeg, heel subtiel */
.rig .screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 22%,transparent 46%);
}
.rig .scr-top{
  display:flex;align-items:center;gap:1.4em;
  font-size:clamp(6px,1.7cqi,12px);letter-spacing:.12em;color:var(--muted);
}
.rig .scr-top .on{color:var(--ok);text-shadow:0 0 .5em var(--ok)}
.rig .scr-top .clock{margin-left:auto;color:var(--fg-2)}

.rig .smeter{display:grid;gap:.25em;align-content:start}
.rig .smeter .scale{
  display:flex;justify-content:space-between;align-items:flex-end;
  font-size:clamp(5px,1.7cqi,11px);color:var(--muted);line-height:1;
}
.rig .smeter .scale span{position:relative;padding-bottom:.45em}
.rig .smeter .scale span::after{
  content:"";position:absolute;left:50%;bottom:0;width:1px;height:.35em;background:var(--muted);
}
.rig .smeter .scale .hi{color:var(--bad)}
.rig .smeter .scale .hi::after{background:var(--bad)}
.rig .smeter .bar{
  position:relative;height:clamp(5px,2.4cqi,14px);border-radius:1px;overflow:hidden;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
/* de balk is opgebouwd uit segmenten, net als op het scherm van de set */
.rig .smeter .bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.55) 3px 4px);
}
.rig .smeter .bar i{
  display:block;height:100%;width:var(--s,42%);
  background:linear-gradient(90deg,var(--ok) 0%,var(--ok) 58%,var(--warn) 74%,var(--bad) 100%);
  background-size:calc(100cqi) 100%;
  transition:width .18s linear;
}
.rig .smeter .bar u{
  position:absolute;top:0;bottom:0;left:var(--p,42%);width:2px;background:var(--fg);
  opacity:.85;transition:left .5s ease-out;
}

.rig .vfo{display:flex;align-items:baseline;gap:3%;justify-content:space-between}
.rig .vfo .big{
  font-size:clamp(14px,7.4cqi,52px);font-weight:800;line-height:1;
  color:var(--warn);text-shadow:0 0 .45em color-mix(in srgb,var(--warn) 55%,transparent);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.rig .vfo .sub{
  font-size:clamp(9px,3.6cqi,26px);font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.rig .vfo .unit{font-size:.42em;color:var(--muted);margin-left:.35em;letter-spacing:.1em}

.rig .scope{position:relative;min-height:0}
.rig .scope canvas{display:block;width:100%;height:100%}
.rig .scope .span{
  position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;
  font-size:clamp(5px,1.5cqi,10px);color:var(--muted);padding:0 .2em;
}
.rig .softkeys{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1.5%;
  font-size:clamp(5px,1.5cqi,10px);letter-spacing:.08em;color:var(--fg-2);text-align:center;
}
.rig .softkeys span{
  padding:.35em 0;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
}
/* de RX-LED op het front, buiten het scherm */
.rig .rxled{
  position:absolute;left:var(--rx-x);top:var(--rx-y);
  width:2.9%;height:1.1%;border-radius:2px;
  background:var(--ok);opacity:.55;mix-blend-mode:screen;
  box-shadow:0 0 1.1vw var(--ok);
  animation:rigbreath 2.6s ease-in-out infinite;
}
@keyframes rigbreath{0%,100%{opacity:.35}50%{opacity:.9}}

/* onderschrift onder de foto */
.rig-caption{
  font-size:12.5px;color:var(--muted);margin-top:8px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}

/* bewegingsvoorkeur */
body[data-motion="off"] .rig .rxled{animation:none;opacity:.85}
@media (prefers-reduced-motion:reduce){
  .rig .rxled{animation:none;opacity:.85}
  .rig .smeter .bar i,.rig .smeter .bar u{transition:none}
}
@media (max-width:720px){
  /* Op een telefoon blijft het scherm gewoon leven; alleen de allerkleinste
     regeltjes gaan eruit, want die zijn daar toch niet te lezen. Wat overblijft
     is waar het om gaat: de frequentie, de meter en de bewegende scope. */
  .rig .scr-top,.rig .softkeys{display:none}
  .rig .screen{gap:3%;padding:2% 2.5%;grid-template-rows:auto auto 1fr}
  .rig .smeter .scale span:nth-child(even){display:none}   /* helft van de schaal */
  .rig .vfo .sub{display:none}                              /* alleen de hoofd-VFO */
  .rig .vfo .big{font-size:clamp(11px,9cqi,30px)}
  .rig .scope .span{font-size:clamp(4px,2cqi,9px)}
}
@media (max-width:420px){
  /* heel smal: de spanlabels onder de scope vallen ook weg */
  .rig .scope .span{display:none}
}