/* FIG. 4 mini split-flap (Flipboard). Tiles come from the shared .flap-* styles in css/site.css;
   this file sizes them to the widget's own width (container units) and styles the controls
   and the wiring sketch. Every colour is a core token, so both sets work without extra code. */

.w-mini-flap { container-type: inline-size; min-width: 0; }

.w-mini-flap .mf-board {
  --mf-pad: 4px;
  --mf-gap: 2px;
  --flap-h: 38px;
  padding: var(--mf-pad);
  gap: var(--mf-gap);
}
.w-mini-flap .flap-tile { font-size: 18px; }

@container (min-width: 280px) {
  .w-mini-flap .mf-board { --mf-pad: 6px; --mf-gap: 3px; }
}
@container (min-width: 440px) {
  .w-mini-flap .mf-board { --mf-pad: 10px; --mf-gap: 4px; }
}

/* tile height and glyph size follow the tile width: 38px tall on a phone, 46px at the desktop sheet */
@supports (width: 1cqi) {
  .w-mini-flap .mf-board {
    --mf-tile-w: calc((100cqi - 2 * var(--mf-pad) - 13 * var(--mf-gap)) / 14);
    --flap-h: clamp(38px, calc(var(--mf-tile-w) * 1.6), 64px);
  }
  .w-mini-flap .flap-tile { font-size: max(12px, min(calc(var(--mf-tile-w) * 1.1), calc(var(--flap-h) * .57))); }
}

.w-mini-flap .mf-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px;
}
.w-mini-flap .mf-next {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--sheet);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.2;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
@media (hover: hover) {
  .w-mini-flap .mf-next:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
}
.w-mini-flap .mf-next:active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.w-mini-flap .mf-readout {
  margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.45; letter-spacing: .06em; color: var(--ink-2);
}
.w-mini-flap .mf-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.w-mini-flap .mf-wiring { display: block; width: 100%; max-width: 100%; height: auto; margin-top: 14px; }
.w-mini-flap .mf-wiring text { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; }
.w-mini-flap .mf-w-box { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.2; }
.w-mini-flap .mf-w-link { fill: none; stroke: var(--ink); stroke-width: 1; }
.w-mini-flap .mf-w-name { fill: var(--ink); font-weight: 600; }
.w-mini-flap .mf-w-note { fill: var(--ink-2); font-weight: 400; }

@media (forced-colors: active) {
  .w-mini-flap .mf-w-box { fill: Canvas; stroke: CanvasText; }
  .w-mini-flap .mf-w-link { stroke: CanvasText; }
  .w-mini-flap .mf-w-name, .w-mini-flap .mf-w-note { fill: CanvasText; }
  .w-mini-flap .mf-next { border-color: ButtonText; }
}