/* viewer.css — the viewer itself: the tab strip, the SCH / PCB / 3D panels,
   the part pane and the overview. Everything is scoped to section.vw, so a
   page that embeds the viewer (`embed` in pcbview.toml) keeps its own look
   round it; pcbview.css adds the application page (top bar, project tree).
   The palette is measured off Altium's own documentation screenshots of the
   A365 workspace: #282828 for everything that is chrome, #222 under the
   content, #484848 for buttons, #3876ad for the selection, and the viewers'
   #c8c8c8 canvas. The colours below are defaults at zero specificity: a page
   that sets the same variables on :root wins. */

:where(:root) {
  --well: #1e1e1e; --bg: #222222; --chrome: #282828; --card: #282828; --raised: #333333;
  --btn: #484848; --btn-hi: #565656; --tab-on: #727272; --edge: #181818; --line: #3b3b3b;
  --head: #ffffff; --fg: #d8d8d8; --muted: #a8a8a8; --dim: #868e94;
  --accent: #3876ad; --accent-hi: #4285c1; --link: #7dc0ff;
  --up: #67c465; --warn: #ff9f0a; --bad: #e5534b;
  --canvas: #c8c8c8;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

section.vw {
  display: flex; flex-direction: column; background: var(--card); color: var(--fg);
  border-radius: 4px; overflow: hidden; padding: 0; font-size: 14px; line-height: 1.6;
}
.vw, .vw *, .vw *::before, .vw *::after { box-sizing: border-box; }
.vw [hidden], .vw[hidden], [data-pv-note][hidden] { display: none !important; }
.vw b, .vw strong { color: var(--head); font-weight: 600; }
.vw a { color: var(--link); text-decoration: none; }
.vw a:hover { text-decoration: underline; }
.vw code { font-family: var(--mono); font-size: .86em; background: var(--well); border: 1px solid var(--line);
  border-radius: 3px; padding: .05em .35em; color: #e4e4e4; overflow-wrap: anywhere; }
.vw .sub { color: var(--muted); font-size: .88em; font-weight: 400; }
.vw .warn { color: var(--warn); }
.vw input[type=range], .vw input[type=checkbox], .vw input[type=radio] { accent-color: var(--accent); }

/* a page of its own fills the window (pcbview.css); embedded, the viewer is
   as tall as the window less the page's own fixed chrome, --pv-embed-h */
.vw[data-pv-embed] { height: var(--pv-embed-h, min(calc(100vh - 6rem), 60rem)); min-height: 26rem; }
.vw:fullscreen { height: 100%; background: var(--canvas); }

/* ---- buttons, A365's secondary and primary ---- */
.cu button, .b3 button, .vw .a3-btn {
  font: inherit; font-size: .78rem; font-weight: 500; color: #fff; background: var(--btn);
  border: 0; border-radius: 3px; padding: .2rem .6rem; cursor: pointer; line-height: 1.5;
}
.cu button:hover, .b3 button:hover, .vw .a3-btn:hover { background: var(--btn-hi); text-decoration: none; }
.cu button.on, .b3 button.on { background: var(--accent); }
.cu button.on:hover, .b3 button.on:hover { background: var(--accent-hi); }
.vw .a3-btn { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.vw .a3-btn svg { width: 15px; height: 15px; flex: none; }

/* ---- the tab strip ---- */
.vw-bar {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  height: 34px; background: var(--chrome); border-bottom: 1px solid var(--edge);
}
.vw-left, .vw-tools { display: flex; align-items: center; gap: .3rem; padding: 0 .6rem; }
.vw-tools { justify-content: flex-end; }
.vw-left button, .vw-tools button {
  display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .8rem;
  color: #fff; background: none; border: 0; padding: .25rem .35rem; border-radius: 3px; cursor: pointer;
}
.vw-left button:hover, .vw-tools button:hover { background: var(--btn); }
.vw-left button[aria-pressed=false] { color: var(--muted); }
.vw-tools button.on { background: var(--tab-on); }
.vw-left svg, .vw-tools svg { width: 16px; height: 16px; flex: none; }
.vw-tabs { display: flex; }
.vw-tabs button {
  font: inherit; font-size: .8rem; font-weight: 600; color: #fff; background: none;
  border: 0; padding: 0 .9rem; cursor: pointer;
}
.vw-tabs button:hover { background: var(--btn); }
.vw-tabs button[aria-selected=true] { background: var(--tab-on); }
.vw-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; scroll-margin-top: 34px; }

/* ---- the panel + canvas grid every tab shares ---- */
.cu {
  --plate: var(--canvas); --cu-dim: #4a4a4a;
  flex: 1; min-height: 0; display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) auto;
}
.vw.nolayers .cu { grid-template-columns: minmax(0, 1fr) auto; }
.vw.nolayers .cu-panel { display: none; }
.cu-panel {
  background: var(--chrome); border-right: 1px solid var(--edge); padding: .6rem .75rem .8rem;
  font-size: .82rem; overflow-y: auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: var(--btn) transparent;
}
.cu-lay {
  display: grid; grid-template-columns: 1rem auto auto .8rem 1fr; gap: .35rem;
  align-items: center; padding: .2rem .25rem; border-radius: 2px; margin: 0 -.25rem;
}
.cu-lay:hover { background: var(--btn); }
.cu-lay.on { background: var(--accent); }
.cu-lay.on .k, .cu-lay.on .fx { color: #dbe8f5; }
.cu-lay .k { color: var(--dim); font-size: .72rem; font-family: var(--mono); }
.cu-lay input { margin: 0; }
.cu-lay .sw { width: .8rem; height: .8rem; border-radius: 2px; border: 1px solid rgba(0,0,0,.4); }
.cu-lay label { cursor: pointer; min-width: 0; line-height: 1.25; }
.cu-lay .nm { font-weight: 600; color: #fff; }
.cu-lay .fx { display: block; color: var(--muted); font-size: .7rem; font-family: var(--mono); }
.cu-head { color: var(--muted); text-transform: uppercase; letter-spacing: .1em;
  font-size: .66rem; font-weight: 600; margin: .6rem 0 .25rem; }
.cu-head:first-child { margin-top: .1rem; }
.cu-row { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .5rem; }
.cu-ctl { display: block; margin-top: .6rem; color: var(--muted); font-size: .76rem; }
.cu-ctl input[type=range] { width: 100%; margin-top: .15rem; }
.cu-note { margin: .6rem 0 0; font-size: .76rem; line-height: 1.45; color: var(--muted); }
.cu-note:empty, .cu-hint:empty { display: none; }
.cu-read { margin: .45rem 0 0; font-size: .72rem; color: var(--link); min-height: 1.2em; font-family: var(--mono); }
.cu-hint { margin: .5rem 0 0; font-size: .7rem; line-height: 1.4; color: var(--dim); }
.cu-hint b { color: var(--muted); }

.cu-canvas { position: relative; background: var(--plate); min-width: 0; min-height: 0; overflow: hidden; }
.cu-plate { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.cu-plate.drag { cursor: grabbing; }
.cu-plate.pick { cursor: crosshair; }
.cu-pan { position: absolute; inset: 0; transform-origin: 0 0; }
.cu-flip { position: absolute; transform-origin: 50% 50%; }
.cu-flip img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  pointer-events: none; -webkit-user-drag: none; user-select: none; }
.cu-mark {
  position: absolute; z-index: 400; pointer-events: none; border: 2px solid #2f9bff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 12px rgba(47,155,255,.8); border-radius: 1px;
}
.cu-scale { position: absolute; left: .7rem; bottom: .6rem; display: flex; align-items: center;
  gap: .4rem; color: var(--cu-dim); font-size: .7rem; font-family: var(--mono); pointer-events: none; }
.cu-scale i { display: block; height: 5px; border: 1px solid var(--cu-dim); border-top: none; }
.cu-back { position: absolute; right: .7rem; top: .6rem; color: var(--cu-dim); font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; pointer-events: none; font-weight: 600; }

/* grid mode: the copper layers again, side by side */
.cu-grid { position: absolute; inset: 0; overflow: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem; padding: .6rem; align-content: start; }
.cu-cell { min-width: 0; }
.cu-tile { position: relative; background: var(--plate); overflow: hidden; }
.cu-tile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.cu-tile b { position: absolute; left: .45rem; top: .3rem; font-size: .7rem; font-weight: 600; color: #fff;
  background: rgba(40,40,40,.85); padding: 0 .35rem; border-radius: 2px; z-index: 2; }
.cu-cap { color: #3a3a3a; font-size: .68rem; line-height: 1.35; padding: .25rem .1rem 0; font-family: var(--mono); }
.cu-cap span { display: block; }

/* ---- schematic (sch.js) ---- */
.sch-sheet {
  display: grid !important; grid-template-columns: 1rem 1fr; gap: 0 .35rem; width: 100%;
  text-align: left; background: none !important; padding: .25rem .3rem !important;
  margin: 0 0 .1rem; border-radius: 2px;
}
.sch-sheet:hover { background: var(--btn) !important; }
.sch-sheet.on { background: var(--accent) !important; }
.sch-sheet .k { color: var(--dim); font-size: .72rem; font-family: var(--mono); grid-row: span 2; }
.sch-sheet .nm { font-weight: 600; color: #fff; }
.sch-sheet .fx { color: var(--muted); font-size: .7rem; line-height: 1.3; font-weight: 400; }
.sch-sheet.on .k, .sch-sheet.on .fx { color: #dbe8f5; }
.sch-plate { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.sch-plate.drag { cursor: grabbing; }
.sch-pan { position: absolute; inset: 0; transform-origin: 0 0; }
.sch-pan img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none;
  background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.35); }

/* ---- 3D (board3d.js) ---- */
.b3 { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.b3-bar {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  font-size: .8rem; padding: .35rem .7rem; background: var(--chrome); border-bottom: 1px solid var(--edge);
}
.b3-bar .cu-row { margin: 0; }
.b3-layers { display: flex; flex-wrap: wrap; gap: .15rem .8rem; color: var(--fg); }
.b3-layers label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.b3-layers input { margin: 0; }
.b3-find { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); margin-left: auto; }
.b3-find input {
  font: inherit; font-size: .78rem; width: 7rem; padding: .15rem .45rem; color: #fff;
  background: var(--well); border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--mono); text-transform: uppercase;
}
.b3-find input:focus { outline: none; border-color: var(--accent); }
.b3-find input.bad { border-color: var(--warn); }
.b3-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.b3-stage { position: relative; overflow: hidden; background: var(--canvas); flex: 1; min-width: 0; touch-action: none; }
.b3-stage canvas { display: block; width: 100%; height: 100%; }
.b3-msg {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 1rem;
  color: #4a4a4a; font-size: .85rem; text-align: center; pointer-events: none; z-index: 5;
}
.b3-msg code { background: rgba(255,255,255,.5); color: #222; border-color: #aaa; }
.b3-tag {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none;
  background: var(--chrome); color: #fff; border-radius: 3px; padding: .3rem .6rem;
  font-size: .76rem; line-height: 1.4; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.b3-tag::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;
  border: 5px solid transparent; border-bottom: 0; border-top-color: var(--chrome); }
.b3-tag b { font-family: var(--mono); }
.b3-tag span { display: block; color: var(--muted); font-size: .68rem; font-family: var(--mono); }
.b3-facts { flex: none; margin: 0; padding: .4rem .8rem; font-size: .74rem; color: var(--muted);
  background: var(--chrome); border-top: 1px solid var(--edge); line-height: 1.45; }
.b3-facts:empty { display: none; }

/* the part pane: A365's properties panel, docked on the canvas's right */
.b3-info {
  flex: none; width: 18.5rem; display: flex; flex-direction: column; min-height: 0;
  background: var(--chrome); border-left: 1px solid var(--edge); font-size: .8rem;
}
.b3-ih { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .6rem .55rem .95rem; border-bottom: 1px solid var(--line); }
.b3-ih b { font-size: .95rem; font-family: var(--mono); }
.pv-pane .b3-x { font: inherit; background: none; color: var(--muted); font-size: 1.15rem; line-height: 1;
  padding: .1rem .35rem; border: 0; border-radius: 3px; cursor: pointer; }
.pv-pane .b3-x:hover { background: var(--btn); color: #fff; }
.b3-ib { flex: 1; min-height: 0; overflow-y: auto; padding: 0 .95rem 1rem;
  scrollbar-width: thin; scrollbar-color: var(--btn) transparent; }
.b3-ib dl { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: .45rem .6rem;
  margin: 0; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.b3-ib dt { color: #fff; font-weight: 600; }
.b3-ib dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.b3-ib dd small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.4; margin-top: .1rem; }
.b3-ib dl.par dt { font-weight: 500; color: var(--muted); text-align: right; }
.b3-ib h4 { margin: .85rem 0 .35rem; color: #fff; font-size: .8rem; font-weight: 600;
  display: flex; justify-content: space-between; }
.b3-ib h4 span { color: var(--muted); font-weight: 500; }
.b3-ib h4 + dl { padding-top: .15rem; }
.b3-ib .mono { font-family: var(--mono); font-size: .76rem; }
.b3-ib a[target=_blank]::after { content: "\2197"; font-size: .8em; margin-left: .15em; }
.b3-ib a.b3-alt { font-size: .72rem; margin-left: .35rem; }
.b3-dnp { display: inline-block; margin-left: .4rem; padding: 0 .35rem; border-radius: 2px;
  font-size: .66rem; font-weight: 600; color: #1e1e1e; background: var(--warn); vertical-align: .08em; }
table.b3-pins { border-collapse: collapse; width: 100%; margin: 0; font-size: .74rem; font-family: var(--mono); }
table.b3-pins td { padding: .14rem .45rem; border-bottom: 1px solid #313131; vertical-align: top; }
table.b3-pins td:first-child { color: var(--muted); width: 3.2rem; padding-left: .2rem; }
.b3-nc { color: var(--dim); font-style: italic; font-family: Inter, system-ui, sans-serif; }
.b3-empty { color: var(--muted); margin: 1rem 0; }

/* ---- the overview ---- */
.pv-over { overflow-y: auto; }
.pv-card { max-width: 60rem; padding: 1.2rem 1.5rem 1.5rem; }
.pv-card h1 { font-size: 1.3rem; margin: 0 0 .5rem; color: var(--head); font-weight: 600; }
.pv-lede { margin: 0 0 1rem; font-size: .95rem; max-width: 50rem; }
.pv-facts { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .1rem 1rem; margin: 0;
  border-top: 1px solid var(--line); }
.pv-facts dt, .pv-facts dd { padding: .55rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.pv-facts dt { color: var(--head); font-weight: 600; }
.pv-facts dd small { display: block; color: var(--muted); font-size: .8rem; margin-top: .1rem; }

/* ================================================================== narrow == */
@media (max-width: 760px) {
  section.vw, .vw[data-pv-embed] { height: auto; min-height: 0; }
  .vw-panel { scroll-margin-top: 34px; }
  .cu, .vw.nolayers .cu { grid-template-columns: 1fr; grid-template-rows: auto; }
  .cu-canvas { height: 72vh; order: -1; }
  .cu-panel { border-right: 0; border-top: 1px solid var(--edge); }
  .b3-body { flex-direction: column; overflow: visible; }
  .b3-stage { flex: none; height: 72vh; }
  .b3-info { width: auto; height: 22rem; border-left: 0; border-top: 1px solid var(--edge); }
  .b3-find { margin-left: 0; }
  .vw-left button span { display: none; }
  .pv-card { padding: 1rem; }
  .pv-facts { grid-template-columns: 6rem minmax(0, 1fr); }
}