/* ═══════════════════════════════════════════════════════════════════════
   HUDDI v0.1 — OSD surface only
   Integer-scaled Silkscreen. No other faces. No antialias. No opacity state.
   Drop-in: link this + import huddi.js
   ═══════════════════════════════════════════════════════════════════════ */

.huddi,
.huddi * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: none !important;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  text-rendering: geometricPrecision;
  font-variant-ligatures: none;
  letter-spacing: 0 !important;
}

.huddi {
  /* --s integer 1|2|3 · cell = 1ch at font-size 8px×--s */
  --s: 2;
  --huddi-ink: #e8e8e8;
  --huddi-cut: #0d0d0d;
  --huddi-solid: #e8e8e8;

  font-family: 'Silkscreen', monospace;
  font-size: calc(8px * var(--s));
  line-height: 1;
  color: var(--huddi-solid);
  white-space: pre;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.huddi.blend-difference { mix-blend-mode: difference; color: #fff; }
.huddi.blend-solid { mix-blend-mode: normal; color: var(--huddi-solid); }

.huddi .hit { pointer-events: auto; cursor: pointer; }
.huddi button.hit {
  display: block; width: 100%;
  background: none !important; border: none !important; outline: none !important;
  padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}

.huddi .osdsol-bar {
  cursor: ew-resize;
  touch-action: pan-y;
  /* expanded hit: label + bar + gap (ADD measured 48px @ --s:2) */
  padding: 1em 0;
  margin: -1em 0;
  position: relative;
}
.huddi .osdsol-xy { cursor: crosshair; touch-action: none; }
.huddi .osdsol-hdr { cursor: pointer; }

/* Grid cells — 1ch mono paper (Phase 2 HUDDI face will true-mono 8px) */
.huddi .grid1 .gc {
  display: inline-block;
  width: 1ch;
  text-align: center;
  line-height: 1;
}
.huddi .grid1 .gc.cut {
  background: var(--huddi-ink);
  color: var(--huddi-cut);
}
.huddi.blend-difference .grid1 .gc.cut {
  background: #fff;
  color: #000;
}
.huddi .grid1 .gline { display: block; line-height: 1; }

.huddi .osd-gap { height: 1em; pointer-events: none; }
.huddi .row { white-space: pre; }
/* disabled = removed from interaction; never half-lit */
.huddi .row.disabled { pointer-events: none; display: none; }

.huddi .panel {
  pointer-events: auto;
  text-align: left;
  max-height: calc(100dvh - 8px * var(--s) - 2.5em);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  touch-action: pan-y;
}
.huddi .panel::-webkit-scrollbar { display: none; }

.huddi .anchor-tr {
  position: absolute;
  top: calc(8px * var(--s));
  right: calc(8px * var(--s));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.huddi .anchor-bl {
  position: absolute;
  bottom: calc(8px * var(--s) + 1ch);
  left: calc(8px * var(--s) + 1ch);
}
.huddi .anchor-br {
  position: absolute;
  bottom: calc(8px * var(--s));
  right: calc(8px * var(--s));
  text-align: right;
  pointer-events: none;
}

.huddi .credits {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.huddi .credit-line { display: block; min-height: 1em; line-height: 1; }

.huddi .midi-hud {
  opacity: 0;
  transition: opacity 0.25s steps(2, end);
  pointer-events: none;
}
.huddi .midi-hud.visible { opacity: 1; }
.huddi .learn-chip {
  opacity: 0;
  transition: opacity 0.2s steps(2, end);
  pointer-events: none;
}
.huddi .learn-chip.visible { opacity: 1; }