/* ─────────────────────────────────────────
   components.css — reusable UI components
   ───────────────────────────────────────── */

/* ── Console (input panel) ───────────────── */
.console {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: clamp(16px, 2.5vw, 24px);
  margin-bottom: 20px;
  position: relative;
}

.console::before {
  content: attr(data-label);
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  padding: 3px 10px;
}

/* ── Field labels ────────────────────────── */
.field-label {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.field-hint {
  font-size: 11px;
  color: var(--faint);
  margin-top: 4px;
}

/* ── IP address input row ────────────────── */
.ip-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-2);
  background: var(--ink);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.octets {
  display: flex;
  flex: 1;
  min-width: 200px;
}

.oct {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--txt);
  font-family: var(--font-mono);
  font-size: clamp(18px, 3.5vw, 26px);
  font-weight: 500;
  text-align: center;
  padding: 12px 2px;
  outline: none;
  transition: background 0.15s;
  min-width: 0;
}

.oct:focus { background: var(--amber-bg); }
.oct.amber { color: var(--amber); }

.dot {
  display: flex;
  align-items: center;
  color: var(--faint);
  font-size: 20px;
  font-weight: 600;
  padding: 0 1px;
}

.sep {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--dim);
  font-size: clamp(18px, 3.5vw, 26px);
  border-left: 1px solid var(--border-2);
  background: var(--panel);
}

.cidr-in {
  width: 60px;
  background: transparent;
  border: none;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: clamp(18px, 3.5vw, 26px);
  font-weight: 500;
  text-align: center;
  padding: 12px 4px;
  outline: none;
  transition: background 0.15s;
}

.cidr-in:focus { background: var(--amber-bg); }

/* ── Slider + mask select row ────────────── */
.controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.slider-wrap {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.slider-wrap label {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.12em;
  white-space: nowrap;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 2px;
  background: var(--border-2);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--amber);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--amber);
  cursor: grab;
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--amber);
  border: 2px solid var(--ink);
  cursor: grab;
}

select {
  background: var(--ink);
  color: var(--txt);
  border: 1px solid var(--border-2);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  cursor: pointer;
}

/* ── Preset buttons ──────────────────────── */
.presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: border-color 0.15s, color 0.15s;
}

.preset-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* ── Error message ───────────────────────── */
.err {
  min-height: 20px;
  font-size: 12px;
  color: var(--bad);
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.04em;
}

/* ── 32-bit visualizer ───────────────────── */
.bitviz { margin-bottom: 20px; }

.bitviz-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.bitviz-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--dim);
  text-transform: uppercase;
}

.legend {
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: var(--faint);
  letter-spacing: 0.08em;
}

.legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend i {
  width: 10px;
  height: 10px;
  display: block;
  flex: none;
}

.bits-wrap {
  display: flex;
  gap: 6px;
}

.byte {
  flex: 1;
  display: flex;
  gap: 2px;
}

.bit {
  flex: 1;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0px, 1.3vw, 11px);
  font-weight: 600;
  background: var(--host-bit);
  color: rgba(255, 255, 255, 0.4);
  transition: background 0.2s, color 0.2s;
}

.bit.net {
  background: var(--amber);
  color: var(--ink);
}

.byte-labels {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}

.byte-labels div {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: var(--faint);
}

/* ── Results grid ────────────────────────── */
.results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.cell {
  background: var(--panel-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background 0.15s;
}

.cell:hover { background: var(--panel); }
.cell.wide { grid-column: 1 / -1; }

.cell .ck {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.cell .cv {
  font-size: clamp(14px, 2.2vw, 18px);
  font-weight: 500;
  color: var(--txt);
  word-break: break-all;
}

.cell .cv.amber { color: var(--amber-s); }
.cell .csub { font-size: 11px; color: var(--dim); }

.copyable { cursor: pointer; }
.copyable:hover .ck::after { content: " ⧉"; color: var(--amber); }
.copyable.copied .ck::after { content: " ✓"; color: var(--good); }

/* ── Scope / class badges ────────────────── */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid currentColor;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.pill.priv  { color: var(--good); }
.pill.pub   { color: var(--amber-s); }
.pill.spec  { color: var(--dim); }

/* ── Mode selector (subnetter) ───────────── */
.mode-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.mode-btn {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mode-btn.active {
  background: var(--amber-bg);
  border-color: var(--amber);
  color: var(--amber);
}

/* ── Secondary input block ───────────────── */
.sec-block {
  display: none;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sec-block.on { display: flex; }

.n-input {
  width: 80px;
  background: var(--ink);
  border: 1px solid var(--border-2);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  padding: 8px;
  outline: none;
}

.hint-txt {
  font-size: 12px;
  color: var(--dim);
}

/* ── Action button ───────────────────────── */
.action-btn {
  background: var(--amber);
  color: var(--ink);
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn:hover { background: var(--amber-s); }

/* ── Subnet summary stats ────────────────── */
.subnet-summary {
  display: flex;
  border: 1px solid var(--border-2);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sstat {
  flex: 1;
  min-width: 100px;
  padding: 12px 16px;
  border-right: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sstat:last-child { border-right: none; }
.sstat .sk { font-size: 10px; color: var(--faint); letter-spacing: 0.12em; text-transform: uppercase; }
.sstat .sv { font-size: 20px; font-weight: 500; color: var(--amber-s); }

/* ── Data table ──────────────────────────── */
.tbl-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
}

tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--txt);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--panel); }

.row-num {
  background: var(--amber-bg);
  color: var(--amber);
  font-size: 11px;
  padding: 2px 7px;
  display: inline-block;
}

.copy-row {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.copy-row:hover { border-color: var(--amber); color: var(--amber); }

.limit-note {
  font-size: 11px;
  color: var(--dim);
  padding: 12px;
  text-align: center;
  border-top: 1px solid var(--border);
  letter-spacing: 0.06em;
}

/* ── Direction toggle (wildcard) ─────────── */
.dir-toggle {
  display: flex;
  border: 1px solid var(--border-2);
  width: fit-content;
  margin-bottom: 16px;
  overflow: hidden;
}

.dir-btn {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--dim);
  transition: background 0.15s, color 0.15s;
}

.dir-btn.active {
  background: var(--panel);
  color: var(--txt);
}

/* ── Wildcard comparison panel ───────────── */
.compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.comp-card {
  padding: 16px;
  border: 1px solid var(--border-2);
  background: var(--panel-2);
}

.comp-card.amber {
  border-color: var(--amber);
  background: var(--amber-bg);
}

.comp-lbl {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

.comp-card.amber .comp-lbl { color: rgba(255, 176, 0, 0.6); }

.comp-val {
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 500;
  color: var(--txt);
  margin-bottom: 6px;
  word-break: break-all;
}

.comp-card.amber .comp-val { color: var(--amber); }

.comp-bin {
  font-size: clamp(8px, 1.3vw, 11px);
  color: var(--faint);
  word-break: break-all;
  line-height: 1.5;
}

.comp-card.amber .comp-bin { color: rgba(255, 176, 0, 0.45); }

.cidr-badge {
  display: inline-block;
  background: var(--amber);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  margin-top: 8px;
}

.compare-arrow {
  font-size: 24px;
  color: var(--faint);
  text-align: center;
}

/* ── Usage example cards ─────────────────── */
.use-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.use-card {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 16px;
}

.use-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.use-badge {
  font-size: 11px;
  padding: 3px 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.badge-cisco {
  background: rgba(55, 138, 221, 0.15);
  color: #62aeff;
  border: 1px solid rgba(55, 138, 221, 0.3);
}

.badge-ospf {
  background: rgba(62, 207, 117, 0.15);
  color: #3ecf75;
  border: 1px solid rgba(62, 207, 117, 0.3);
}

.use-desc { font-size: 12px; color: var(--dim); }

.code-block {
  background: var(--ink);
  border: 1px solid var(--border);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.8;
}

.kw    { color: #62aeff; }
.ip-hl { color: var(--txt); }
.wc-hl { color: var(--amber-s); font-weight: 500; }
.cm    { color: var(--faint); }

/* ── Responsive ──────────────────────────── */
@media (max-width: 600px) {
  .bit { font-size: 0; }
  .bits-wrap { gap: 3px; }
  .byte { gap: 1px; }
  .compare {
    grid-template-columns: 1fr;
  }
  .compare-arrow { transform: rotate(90deg); }
  .sstat { min-width: 80px; }
}