/* ============================================================
   Mac Usta · Dashboard grid + rails + cc-block + device/line/service lists + board map + phone meta
   Loaded by index.html via <link>.  See styles/_index.css for order.
   ============================================================ */

   10. DASHBOARD GRID
   ============================================================ */
.grid { display: grid; gap: var(--gap); }

.grid-dashboard {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "rails rails rails rails rails target target target target target target target"
    "i2c   i2c   i2c   i2c   spi   spi   spi   spi   usb   usb   usb   usb"
    "lines lines lines lines lines lines lines board board board board board";
}
.panel-rails  { grid-area: rails; }
.panel-target { grid-area: target; }
[data-bus-card="i2c"] { grid-area: i2c; }
[data-bus-card="spi"] { grid-area: spi; }
[data-bus-card="usb"] { grid-area: usb; }
.panel-lines  { grid-area: lines; }
.panel-board  { grid-area: board; }

.grid-bench {
  grid-template-columns: 2fr 1fr;
}
.grid-iphone {
  grid-template-columns: 1.1fr 1fr;
}
.grid-terminal {
  grid-template-columns: 2fr 1fr;
}

/* ============================================================
   11. RAILS (voltage bars)
   ============================================================ */
.rails { display: grid; gap: 14px; }
.rail {
  display: grid;
  grid-template-columns: 60px 110px 1fr 90px;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(14,27,48,.15);
}
.rail:last-child { border-bottom: 0; }
.rail-key {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--ink);
  font-weight: 500;
}
.rail-val {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1;
  font-feature-settings: "tnum";
}
.rail-bar {
  position: relative;
  height: 18px;
  background:
    repeating-linear-gradient(90deg,
      rgba(14,27,48,.07) 0 1px,
      transparent 1px 10%);
  border: 1px solid var(--ink);
  overflow: hidden;
}
.rail-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brass), var(--rust));
  transition: width var(--t-mid);
  position: relative;
}
.rail-bar i::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2px;
  background: var(--ink);
  box-shadow: 0 0 6px var(--brass-light);
}
.rail-nom {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
}

/* ============================================================
   12. CC BLOCK (target port)
   ============================================================ */
.cc-block { display: grid; gap: 12px; }
.cc-row {
  display: grid;
  grid-template-columns: 50px 1fr 80px;
  align-items: center;
  gap: 14px;
}
.cc-key {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink);
  font-weight: 500;
}
meter {
  width: 100%;
  height: 14px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  display: block;
}
meter::-webkit-meter-bar {
  background: var(--paper-2);
  height: 14px;
  border: 0;
}
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
  background: linear-gradient(90deg, var(--spark), var(--rust));
  transition: width var(--t-mid);
}
meter::-moz-meter-bar {
  background: linear-gradient(90deg, var(--spark), var(--rust));
}
.cc-val {
  font-family: var(--f-mono);
  font-size: 13px;
  text-align: right;
  font-feature-settings: "tnum";
}
.vbus-flag {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border: 1px dashed var(--ink);
  background: rgba(255,255,255,.4);
  margin-top: 4px;
}
.vbus-flag span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink);
}
.vbus-flag em {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  color: var(--rust);
  font-variation-settings: "opsz" 72;
}

.quick-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 6px;
}

/* ============================================================
   13. DEVICE / LINE / SERVICE LISTS
   ============================================================ */
.device-list {
  display: grid; gap: 10px;
}
.device-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-left-width: 4px;
  position: relative;
}
.device-card.occupied { border-left-color: var(--moss); }
.device-card.warn     { border-left-color: var(--warn); background: rgba(199,107,30,.06); }
.device-card.empty    { border-left-color: var(--idle); opacity: .8; }
.device-card span {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2px;
}
.device-card strong {
  display: block;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}
.device-card small {
  display: block;
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--ink-soft);
}
.device-list-large .device-card { padding: 16px 18px; }

/* badge (status pill) */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: var(--paper-0);
  white-space: nowrap;
}
.badge.occupied { color: var(--moss); background: var(--ok-soft); }
.badge.warn     { color: var(--warn); background: var(--warn-soft); }
.badge.empty    { color: var(--idle); background: var(--idle-soft); }

/* line table */
.line-table { display: grid; gap: 8px; }
.line-row {
  display: grid;
  grid-template-columns: 60px 90px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  background: var(--paper-0);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: background var(--t-fast);
}
.line-row:hover { background: var(--paper-2); }
.line-row .pin {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--rust);
  font-weight: 500;
}
.line-row strong {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink);
}
.line-row small {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.line-row button {
  padding: 7px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: all var(--t-fast);
}
.line-row button:hover {
  background: var(--ink);
  color: var(--paper-0);
}

/* service list */
.service-list { display: grid; gap: 8px; }
.service-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--paper-0);
  border: 1px solid var(--ink);
  border-left-width: 3px;
}
.service-row strong {
  display: block;
  font-family: var(--f-sans);
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 2px;
}
.service-row small {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .03em;
}

/* ============================================================
   14. BOARD MAP (schematic)
   ============================================================ */
.board {
  position: relative;
  aspect-ratio: 400 / 280;
  background:
    linear-gradient(0deg, transparent 49%, rgba(14,27,48,.08) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(14,27,48,.08) 50%, transparent 51%);
  background-size: 40px 40px;
  border: 1px dashed rgba(14,27,48,.3);
  margin-top: 4px;
}
.board-traces {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.board-traces path {
  fill: none;
  stroke: rgba(14,27,48,.2);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  transition: stroke var(--t-mid);
}
.board-traces path.active {
  stroke: var(--rust);
  stroke-dasharray: none;
  filter: drop-shadow(0 0 4px rgba(183,62,46,.4));
  animation: traceFlow 3s linear infinite;
}
@keyframes traceFlow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -20; }
}

.mod {
  position: absolute;
  padding: 8px 12px 10px;
  background: var(--paper-0);
  border: 1px solid var(--ink);
  min-width: 110px;
  transition: all var(--t-mid);
}
.mod-no {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--brass);
}
.mod strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .05em;
  margin: 3px 0 2px;
}
.mod small {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.mod.occupied {
  background: var(--ink);
  color: var(--paper-0);
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(183,62,46,.16);
}
.mod.occupied .mod-no { color: var(--brass-light); }
.mod.occupied strong { color: var(--paper-0); }
.mod.occupied small  { color: var(--paper-3); }
.mod.idle { opacity: .55; }

.mod.host        { left: 2%;  top: 10%; }
.mod.oled        { left: 2%;  top: 60%; }
.mod.ft232       { left: 24%; top: 70%; }
.mod.bridge      { left: 36%; top: 30%; min-width: 150px; }
.mod.pd          { left: 60%; top: 60%; }
.mod.target-port { right: 2%; top: 18%; min-width: 130px; }

/* ============================================================
   15. PHONE META
   ============================================================ */
.phone-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(14,27,48,.18);
}
.phone-meta > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  padding: 12px 4px;
  border-bottom: 1px dashed rgba(14,27,48,.15);
  align-items: baseline;
}
.phone-meta > div:nth-child(odd) { border-right: 1px dashed rgba(14,27,48,.15); padding-right: 16px; }
.phone-meta > div:nth-child(even) { padding-left: 16px; }
.phone-meta dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.phone-meta dd {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.phone-meta dd.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; }

/* ============================================================