/* ============================================================
   binario.css — Binary & Base Analyzer
   Stili specifici. Le primitive (panel, seg, field) sono in lab.css.
   ============================================================ */

.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
}
.app-grid > * { min-width: 0; }
.app-grid > .full { grid-column: 1 / -1; }

@media (max-width: 920px) {
  .app-grid { grid-template-columns: minmax(0, 1fr); }
  .app-grid > .full { grid-column: auto; }
}

/* ---------- Convertitore ---------- */
.conv { display: grid; gap: 0.9rem; }
.conv-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  grid-template-areas: "label field" "label err";
  align-items: center;
  gap: 0.2rem 1rem;
}
.conv-row > label {
  grid-area: label;
  font-size: 0.92rem;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.conv-row .field { grid-area: field; }
.conv-row .field-err { grid-area: err; }

/* ---------- Visualizzatore bit ---------- */
.bitfield-wrap { overflow-x: auto; padding-bottom: 0.5rem; }
.bitfield {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  justify-content: flex-start;
}
.nibble { display: flex; gap: 0.3rem; }
.bit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
}
.bit-box {
  width: 2.5rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink-faint);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.12s var(--ease);
}
.bit:hover .bit-box { border-color: var(--accent); color: var(--ink); }
.bit:active .bit-box { transform: scale(0.93); }
.bit.on .bit-box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.bit.sign .bit-box { border-style: dashed; }
.bit.sign.on .bit-box { box-shadow: inset 0 0 0 2px var(--bg-elev); }
.bit-weight { font-size: 0.6rem; color: var(--ink-faint); letter-spacing: 0.02em; }
.bit-index { font-size: 0.58rem; color: var(--line); }
.bit.on .bit-weight { color: var(--accent); }
.bit:focus-visible .bit-box { outline: 2px solid var(--accent); outline-offset: 2px; }

.bit-actions { margin-top: 1.5rem; }
.stepper { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.stepper button {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.stepper button:hover { border-color: var(--accent); color: var(--accent); }
.stepper button:active { transform: translateY(1px); }

.decomp {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.decomp .term { color: var(--accent); }
.decomp .eq { color: var(--ink); font-weight: 600; }
.decomp .note { display: block; margin-top: 0.5rem; font-size: 0.78rem; color: var(--ink-faint); }

/* ---------- Operazioni bit a bit ---------- */
.bw-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1.5rem;
}
.bw-operand label, .bw-op label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.45rem;
}
.bw-op select {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  outline: none;
}
.bw-op select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
#opBWrap.hidden { visibility: hidden; }

.bw-rows {
  display: grid;
  gap: 0.4rem;
  font-family: var(--font-mono);
  overflow-x: auto;
}
.bw-line {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.15rem;
}
.bw-line.result { border-top: 1px solid var(--line); padding-top: 0.55rem; margin-top: 0.2rem; }
.bw-tag { font-size: 0.78rem; color: var(--ink-soft); }
.bw-line.result .bw-tag { color: var(--accent); font-weight: 600; }
.bw-bits { display: flex; gap: 0.28rem; }
.bw-bit {
  width: 1.55rem; height: 1.7rem;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.9rem;
  color: var(--ink-faint);
  background: var(--bg);
}
.bw-bit.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bw-gap { width: 0.4rem; }

.bw-result {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.bw-result-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.bw-result-vals { display: flex; gap: 1.5rem; flex-wrap: wrap; font-family: var(--font-mono); }
.bw-result-vals span { font-size: 0.92rem; }
.bw-result-vals b { color: var(--accent); font-weight: 600; }
.bw-result-vals .k { color: var(--ink-faint); font-size: 0.7rem; display: block; }

@media (max-width: 560px) {
  .conv-row { grid-template-columns: 1fr; grid-template-areas: "label" "field" "err"; gap: 0.4rem; }
  .bw-inputs { grid-template-columns: 1fr; }
  .bit-box { width: 2.1rem; height: 2.3rem; font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .panel { padding: 1.1rem; }
  .controls-panel, .builder-controls { gap: 0.9rem 1.1rem; }
  .control-group { flex-wrap: wrap; }
  .seg { flex-wrap: wrap; }
  .seg-btn { padding: 0.4rem 0.62rem; font-size: 0.74rem; }
  .control-label { font-size: 0.7rem; }
  .target-field { max-width: none; width: 100%; }
  .target-row { gap: 0.6rem; }
  .bw-op select { width: 100%; }
}

/* ============================================================
   Costruttore guidato (primo blocco) — ex strumento separato
   ============================================================ */
.builder-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}

.target-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.target-row label { font-size: 0.92rem; font-weight: 500; }
.target-field { max-width: 16rem; }
.target-field input { font-size: 1.15rem; }

.target-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem 1.5rem;
  flex-wrap: wrap;
  padding: 0.95rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.target-banner .big { font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.target-banner .lbl { font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.03em; }
.target-banner .rem-val { color: var(--accent); }
.target-banner.success {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent-wash);
}
.target-banner.over { border-color: #e0533d; background: rgba(224,83,61,0.08); }
.target-banner.over .rem-val { color: #e0533d; }

.pos-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.pos-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.2rem;
  background: var(--bg);
}
.pos-stepper button {
  width: 2rem; height: 2rem;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pos-stepper button:hover { background: var(--accent); color: var(--accent-ink); }
.pos-stepper #posCount {
  min-width: 2rem; text-align: center;
  font-family: var(--font-mono); font-weight: 600;
}

.slots-wrap { overflow-x: auto; padding: 0.25rem 0 0.75rem; }
.slots { display: flex; gap: 0.6rem; align-items: stretch; min-width: min-content; }
.slot {
  flex: 1 1 0;
  min-width: 4.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  text-align: center;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.slot.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent-wash);
}
.slot.hint { animation: slotHint 1.1s var(--ease) 2; }
@keyframes slotHint {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px var(--accent); }
}
.slot-exp { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); }
.slot-digit-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.slot-nudge {
  width: 1.6rem; height: 1.1rem;
  border: 0; background: transparent;
  color: var(--ink-faint);
  cursor: pointer; font-size: 0.7rem; line-height: 1;
  border-radius: 5px;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.slot-nudge:hover { color: var(--accent); background: var(--bg-sunk); }
.slot-digit {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-elev);
  font-family: var(--font-mono);
  font-size: 1.4rem; font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer; user-select: none;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.1s var(--ease);
}
.slot-digit:hover { border-color: var(--accent); color: var(--ink); }
.slot-digit:active { transform: scale(0.92); }
.slot.active .slot-digit { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.slot-digit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot-weight { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; color: var(--ink); }
.slot.active .slot-weight { color: var(--accent); }
.slot-contrib { font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-faint); min-height: 0.8rem; }

.builder-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
/* .ghost-btn è ora una primitiva condivisa in lab.css */

.builder-output { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.out-sum { font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.8; color: var(--ink-soft); }
.out-sum .term { color: var(--accent); white-space: nowrap; }
.out-sum .plus { color: var(--ink-faint); }
.out-result { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.out-result .big {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
}
.out-result .sub { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); }
.out-string {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 600; color: var(--accent); word-break: break-all;
}
.out-success-tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent);
  margin-bottom: 0.85rem;
}
.out-hint { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); }

@media (max-width: 560px) {
  .slot { min-width: 4rem; }
  .slot-digit { width: 2.2rem; height: 2.2rem; font-size: 1.2rem; }
}