/* KCCU panel, laid out from FCOM-FMS/KCCU layout (FCOM).png.

   All geometry is a multiple of --u, a px unit that js/main.js sets from the
   available width, so the whole panel scales down to a phone without a
   transform (which would soften the legends). */

.kccu {
  --u: 14px;
  --gap: calc(var(--u) * 0.36);
  background: var(--kccu-panel);
  border-radius: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
  box-sizing: border-box;
  color: var(--kccu-legend);
  letter-spacing: 0.03em;
  user-select: none;
}

/* Key boxes are sized off --u; the legend is deliberately large relative to the
   box so single characters do not swim in empty space. */
.kccu-key {
  background: var(--kccu-key);
  border: 1px solid #3D444B;
  border-radius: calc(var(--u) * 0.18);
  color: var(--kccu-legend);
  min-width: calc(var(--u) * 1.75);
  height: calc(var(--u) * 1.75);
  padding: 0 calc(var(--u) * 0.12);
  font-size: calc(var(--u) * 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  white-space: pre-line;
  cursor: pointer;
}

.kccu-key:hover  { background: #23282E; }
.kccu-key:active { background: #33393F; transform: translateY(1px); }

.kccu-key--wide  { min-width: calc(var(--u) * 2.9); }
.kccu-key--boxed { box-shadow: inset 0 0 0 1px var(--kccu-legend); }
.kccu-key--round { border-radius: 50%; width: calc(var(--u) * 1.75); }

/* two-line legends (CLR INFO, NAV AID, SEC INDEX, NOTE PAD, MAIL BOX) */
.kccu-key--stacked { font-size: calc(var(--u) * 0.52); }

/* the diagram shows several unlabelled keys; they are inert */
.kccu-key--blank { cursor: default; }
.kccu-key--blank:hover  { background: var(--kccu-key); }
.kccu-key--blank:active { background: var(--kccu-key); transform: none; }

.kccu-row {
  display: flex;
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.kccu-row--indent { padding-left: calc(var(--u) * 1.2); }

/* The alphanumeric rows share a 22 half-column grid so they span the full
   panel width; js/kccu/kccu.js sets each key's span. */
.kccu-row--keys {
  display: grid;
  grid-template-columns: repeat(22, 1fr);
  gap: var(--gap);
}

.kccu-row--keys .kccu-key { min-width: 0; width: auto; }

/* ---- top block ---- */

.kccu-top {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 1.5);
  margin-bottom: calc(var(--u) * 0.9);
}

.kccu-esc { display: flex; flex-direction: column; gap: var(--gap); }

.kccu-arrows { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.16); }
.kccu-arrows__side { display: flex; gap: calc(var(--u) * 1.4); }
.kccu-arrows .kccu-key { min-width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.4); }

/* sits immediately right of the arrow cluster - the FCOM diagram leaves only a
   sliver of panel between them, not the full remaining width */
/* The ten shortcut keys share one width and one font size regardless of legend
   length; the unnamed key beside ATC COM is given a narrow column so the ten
   that matter get the space. */
.kccu-shortcuts {
  border: 1px solid var(--kccu-edge);
  border-radius: calc(var(--u) * 0.25);
  padding: var(--gap);
  flex: 1;
  min-width: 0;
}

/* Each row is its own grid on the same template, so the five named keys always
   land in the five wide columns and only the blank uses the narrow sixth. The
   columns are fractional so the block absorbs whatever width is left beside the
   ESC and arrow clusters rather than overflowing the panel. */
.kccu-shortcuts .kccu-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 0.5fr;
  gap: var(--gap);
}

.kccu-shortcuts .kccu-row:last-child { margin-bottom: 0; }

.kccu-shortcuts .kccu-key {
  min-width: 0;
  width: auto;
  height: calc(var(--u) * 2.1);
  font-size: calc(var(--u) * 0.62);
}

/* ---- keyboard ---- */

.kccu-keyboard { margin-bottom: calc(var(--u) * 0.9); }
.kccu-keyboard .kccu-row:last-child { margin-bottom: 0; }

/* ---- bottom block ---- */

.kccu-bottom {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: calc(var(--u) * 0.8);
}

.kccu-bottom__left { flex: 1; min-width: 0; }

.kccu-wheel {
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 2.8);
  margin-top: calc(var(--u) * 0.2);
  border-radius: calc(var(--u) * 0.6);
  background: repeating-linear-gradient(#2a2f34 0 2px, #4a5158 2px 4px);
  border: 1px solid var(--kccu-edge);
  flex: none;
}

.kccu-ball {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 4.4);
  margin: calc(var(--u) * 0.5) 0 0 calc(var(--u) * 1.2);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #F4F6F8, #B9C2CA 60%, #8A949D);
  border: 1px solid var(--kccu-edge);
}

/* numeric pad sits under ENT, at the right of the bottom block.
   Six columns so the round keys span two and the square tail keys span three. */
/* Six half-columns of the keyboard grid, so a numeric key ends up exactly as
   wide as a letter key. .kccu-bottom and .kccu-keyboard are both full-width
   children of .kccu, so the percentage resolves against the same box. */
.kccu-numpad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap);
  width: calc((100% - 21 * var(--gap)) / 22 * 6 + 5 * var(--gap));
  margin-left: auto;
  flex: none;
}

.kccu-numpad .kccu-row { display: contents; }
.kccu-numpad .kccu-key { grid-column: span 3; width: auto; min-width: 0; }

/* aspect-ratio keeps them circular at whatever width the grid gives them */
.kccu-numpad .kccu-key--round {
  grid-column: span 2;
  height: auto;
  aspect-ratio: 1;
}