/* Libre Computer Board Layout — what is specific to drawing a board.
 *
 * The page frame, top bar, brand, controls, notices, footer, panel, segmented
 * control and toggle rows all come from css/lc-kit.css, which the GPIO pinout
 * uses too. What is left here is the canvas stage and the things only a layout
 * viewer has: copper-layer colours, the board substrate, the parts list, the
 * detail panel and the HUD.
 */

:root {
  /* Copper by stackup position, top of the board to the bottom of it. The ramp
     is deliberate: a reader toggling two layers on at once has to be able to
     tell which trace is on which, and adjacent layers are the pair that gets
     confused, so adjacent entries are far apart in hue. */
  --cu-1: #c2303a;
  --cu-2: #1f6fd0;
  --cu-3: #2f8f45;
  --cu-4: #b8912a;
  --cu-5: #a832ad;
  --cu-6: #12898c;
  --cu-7: #cf5a0e;
  --cu-8: #5a5ce0;

  /* The board itself, drawn on canvas. Solder-mask green over a light page and
     a near-black ground once copper is on, because a light substrate under
     eight translucent layers reads as mud either way. */
  --board: #1f6b45;
  --board-cu: #0d1410;
  --board-edge: #4a5058;
  --silk: #f2f4f6;
  --hole-ring: #6b727b;
  --part-label: #ffffff;
  --net-hi: #00a05f;
  --stage-bg: #e7ebef;
}

html.dark {
  --cu-1: #e5484d;
  --cu-2: #4da3ff;
  --cu-3: #46a758;
  --cu-4: #eac54f;
  --cu-5: #d148d8;
  --cu-6: #21c7c7;
  --cu-7: #f76b15;
  --cu-8: #8d8fff;

  --board: #1b4332;
  --board-cu: #0d1410;
  --board-edge: #4a5058;
  --silk: #d7dbe0;
  --hole-ring: #8b9098;
  --part-label: #ffffff;
  --net-hi: #00e58a;
  --stage-bg: #0b0d10;
}

body { overflow: hidden; }

#sidebar { width: 254px; }

#board-meta {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}
#board-meta b { color: var(--text); font-weight: 600; }
#board-meta .status {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
#board-meta .status.unlisted { color: var(--warn); border-color: var(--warn); }

#copper-note { margin: 4px 0 0; font-size: 11px; color: var(--text-dim); }

#comp-list {
  height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-sunken);
}
#comp-list-inner { position: relative; }
.comp-item {
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  padding: 3px 8px;
  font: 12px/16px ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.comp-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.comp-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.comp-item .fp { color: var(--text-dim); margin-left: 6px; }

#detail { margin-top: 10px; }
#detail h4 {
  margin: 0 0 6px;
  font: 700 14px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
}
#detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: 12px;
}
#detail dt { color: var(--text-dim); }
#detail dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

/* ---- canvas stage ---- */

#stage {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--stage-bg);
  touch-action: none;
  cursor: grab;
}
#stage.dragging { cursor: grabbing; }
#stage canvas { position: absolute; inset: 0; }

#hud, #keys {
  position: absolute;
  bottom: 10px;
  padding: 4px 9px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border: 1px solid var(--border);
  color: var(--text-dim);
  pointer-events: none;
}
#hud {
  left: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
}
#hud .net { color: var(--net-hi); }
#keys { right: 12px; font-size: 11px; }
#keys kbd {
  font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 3px;
}

#tooltip {
  position: absolute;
  z-index: 5;
  max-width: 260px;
  padding: 5px 9px;
  border-radius: 5px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: 12px;
  pointer-events: none;
}
#tooltip .r {
  font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
}
#tooltip .f {
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--stage-bg) 72%, transparent);
  color: var(--text-dim);
  font-size: 14px;
  z-index: 6;
}

/* ---- narrow ---- */

@media (max-width: 820px) {
  body { overflow: auto; }
  .lc-main { flex-direction: column-reverse; }
  #sidebar {
    width: auto;
    border-right: none;
    border-top: 1px solid var(--border);
    overflow: visible;
  }
  #stage { height: 62vh; flex: none; }
  #keys { display: none; }
  input[type="search"] { width: 100%; }
}