:root {
  /* Color Variables */
  --Aphase: hsl(0, 100%, 50%);
  --Bphase: hsl(43, 100%, 50%);
  --Cphase: hsl(240, 100%, 50%);
  --lineGuide: hsl(0, 6%, 25%);
  --negative: hsl(300, 100%, 50%);
  --positive: hsl(120, 100%, 50%);
  --zero: hsl(0, 0%, 50%);
  --colorText: #322c2d;
  --color-bg: none;
  --borderFrames: steelblue;
  --thickness_abc: 5px;

  /* Responsive sizing with cqi */
  --mainFontSize: 1cqi;
  --gap: .35rem;
  --input-w: 7ch;             /* width equals 7 characters */
  --font-sm: .875rem;
  --border: 1px solid #cacaca;  
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-size: var(--mainFontSize, 14px);
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color-scheme: dark light;
  background-color: var(--color-bg);
  color: var(--colorText);
}

button {
  position: relative;
  background: none;
  border: 1px solid var(--colorText);
  border-radius: 0.25em;
  font-size: 1rem;
  color: var(--colorText);
  font-family: "Monorama", monospace;
  padding-block: 0.25em;
  padding-inline: 0.75em;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s, background 0.3s;
  z-index: 1;
}
button:focus-visible {
  outline: 2px solid var(--Aphase);
  outline-offset: 2px;
}
button span {
  padding-inline-end: 0.5em;
}
button::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0%;
  height: 100%;
  background: var(--colorText);
  z-index: -1;
  transition: width 0.3s;
}
button:hover, button:focus-visible {
  color: var(--color-bg);
}
button:hover::after,
button:focus-visible::after {
  width: 100%;
}

label.btn>input[type='radio'] {
    display: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

a {
  display: flex;
  flex: 1 1 0%;
  text-decoration: none;
  outline: none;
  text-align: center;
  line-height: 1.5;
  color: black;
  transition: background 0.2s, color 0.2s;
}
a:link,
a:visited {
  color: black;
}
a:hover,
a:focus-visible {
  color: black;
}


circle.vectora,
circle.vectorb,
circle.vectorc,
circle.vectorab,
circle.vectorbc,
circle.vectorca,
circle.vectora_I,
circle.vectorb_I,
circle.vectorc_I,
circle.vector_KN {
  fill: rgba(255,255,255,0.01);
  stroke: rgba(255,255,255,0.01);
  stroke-width: 0.2px;
}

circle.vector_Z_Line,
circle.vector_Z2_Line,
circle.vector_Z3_Line {
  fill: rgba(255,255,255,0.01);
  stroke: #000;
  stroke-width: 0.2px;
}

circle.intersect,
circle.intersect2,
circle.intersect3 {
  stroke: #000;
  stroke-width: 0.2px;
}
circle.intersect { fill: rgba(0,255,0,0.1); }
circle.intersect2 { fill: rgba(0,0,255,0.1);}
circle.intersect3 { fill: rgba(255,0,0,0.1);}

text { text-anchor: middle; }

/* Text phase coloring and scaling */
.texta, .textai, .textaLegend, .textaiLegend, .texta_I, .texta_Z, .textab_Z {
  fill: var(--Aphase); font-size: 2rem; font-weight: bold;
}
.textb, .textbi, .textbLegend, .textbiLegend, .textb_I, .textb_Z, .textbc_Z {
  fill: var(--Bphase); font-size: 2rem; font-weight: bold;
}
.textc, .textci, .textcLegend, .textciLegend, .textc_I, .textc_Z, .textca_Z {
  fill: var(--Cphase); font-size: 2rem; font-weight: bold;
}

polyline {
  stroke-width: 5px;
}
polyline.vectora, polyline.vectorab, polyline.vectora_I, polyline.vectorab_I, polyline.vectora_Z, polyline.vectorab_Z {
  stroke: var(--Aphase);
  stroke-width: var(--thickness_abc);
  stroke-linecap: round;
  cursor: pointer;
}
polyline.vectorb, polyline.vectorbc, polyline.vectorb_I, polyline.vectorbc_I, polyline.vectorb_Z, polyline.vectorbc_Z, polyline.vectorb_Z_prime {
  stroke: var(--Bphase);
  stroke-width: var(--thickness_abc);
  stroke-linecap: round;
  cursor: pointer;
}
polyline.vectorc, polyline.vectorca, polyline.vectorc_I, polyline.vectorca_I, polyline.vectorc_Z, polyline.vectorca_Z, polyline.vectorc_Z_prime {
  stroke: var(--Cphase);
  stroke-width: var(--thickness_abc);
  stroke-linecap: round;
  cursor: pointer;
}

polyline:is(.vector2, .vector2i, .vector2_I, .vector2bis, .vector2bis_I) {
  stroke: var(--negative);
  stroke-width: 4px;
  stroke-dasharray: 3;
}
polyline:is(.vector1, .vector1_I, .vector1bis, .vector1bis_I) {
  stroke:var(--positive);
  stroke-width: 4px;
  stroke-dasharray: 3;
}
polyline:is(.vector0, .vector0_I, .vector0bis, .vector0bis_I, .vector_KN) {
  stroke: var(--zero);
  stroke-width: 4px;
  stroke-dasharray: 3;
}
polyline.vector_Z_Line {
  stroke: steelblue;
  stroke-width: 2px;
}

marker {
  fill: black;
}

#marka, #arrow-marka, #markab, #markai, #markabi, #markaz, #markabz, #markaz_prime { fill: var(--Aphase); cursor: pointer; }
#markb, #markbc, #markbi, #markbci, #markbz, #markbcz, #markbz_prime { fill: var(--Bphase); cursor: pointer; }
#markc, #markca, #markci, #markcai, #markcz, #markcaz, #markcz_prime { fill: var(--Cphase); cursor: pointer; }
#mark2, #mark2i, #mark2bis, #mark2bisi { fill: var(--negative);}
#mark1, #mark1i, #mark1bis, #mark1bisi { fill: var(--positive);}
#mark0, #mark0i, #mark0bis, #mark0bisi, #markKN, #markc-arc { fill: var(--zero);}
#markPol { stroke: steelblue; stroke-width: 2px; }

#toggleon,
#toggleon_I {
  width: 10px;
  height: 13px;
  padding-inline-end: 3px;
  border-style: solid;
  border-color: #000;
  border-width: 1px;
  background: rgb(1, 6, 66);
  text-align: left;
}

.quad-handle {
    cursor: pointer;
    stroke: black;
    stroke-width: 1px;
}

.vis_inner_Z_svg { width:539px; height:318px; }
/* ------------ unit toggle (km | miles) ------------ */
#spanUnit{
  display:inline-block;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  position:relative;      /* anchor the ghost         */
}

#spanUnit::after{
  content:"miles";        /* longest visible variant  */
  visibility:hidden;      /* invisible to the user    */
  display:inline-block;
  height:0;               /* contributes zero height  */
  overflow:hidden;        /* guarantees height stays 0*/
  pointer-events:none;
}

/* ------------ Ω per unit labels ------------------- */
.spanOhmsPerUnit{
  display:inline-block;
  position:relative;
}

.spanOhmsPerUnit::after{
  content:"Ω/miles";      /* longest visible variant  */
  visibility:hidden;
  display:inline-block;
  height:0;
  overflow:hidden;
  pointer-events:none;
}

/* (optional) small hover cue for the toggle         */
#spanUnit:hover{
  background:#80ea59;
  border-radius:2px;
}

.ground-char{
  display:grid;
  gap:calc(var(--gap) * 2);
}

/* Radios */
.char-type{
  display:inline-flex;
  gap:var(--gap);
  border:0;
  padding:0;
}

/* Reach grid */
.reach{
  display:grid;
  gap:var(--gap);
}
#reach{
  display:none;
}
.reach-row{
  display:grid;
  grid-template-columns:
    /* label | value | Ω | angle | º | r2 | r3 */
    auto var(--input-w) auto var(--input-w) auto repeat(2,auto);
  align-items:center;
  gap:var(--gap);
  font-size:var(--font-sm);
}

.reach-row input{
  max-width:var(--input-w);
  padding:.1rem .25rem;
  border:var(--border);
  border-radius:.25rem;
}

.label{ white-space:nowrap; }
.unit { text-align:center; min-width:1.25rem; }
.calc { min-width:3ch; text-align:right; }

/* Compact on narrow containers */
@container (max-width:26rem){
  .reach-row{
    grid-template-columns:repeat(2,auto);  /* stacks into 2-col pairs */
  }
}

/* Visually hide but still accessible */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}