/* My builds: the stage and its caption, and what else I build. The views draw on the stage, one layer at a
   time, styled by their kind: a drawing on paper, a 3D scene in the studio, or a tool.
   The drawing kit's sheet and block diagram are here too, then the 3D studio's canvas and the tools' window. */

/* The tabs and their stage (tabs.css), then the chosen view's caption under it */
.bs-ch { padding-block-end: var(--space-fluid-l); }
.bs-cap { margin: 0; color: var(--muted); }

/* What else I build, under the stage */
.bs-other {
  padding-block: var(--space-6) var(--space-fluid-m);
  border-block-start: 1px solid var(--line);
}
.bs-other p {
  margin-block: 0 var(--space-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
}
.bs-other ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: var(--weight-medium);
}

/* The stage keeps its shape before and while a view loads, and turns tall when narrow, before any script runs,
   so nothing shifts. A tool sets its own height. */
.bs-st { container: stage / inline-size; }
.stage {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background: var(--sunk);
}
.stage:has(.layer) { background: none; }
@container stage (width < 560px) {
  .stage { aspect-ratio: 400 / 620; }
}
.stage.tool { aspect-ratio: auto; }
.layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.layer[data-kind="drawing"], .layer[data-kind="failed"] { border: 1px solid var(--line); background: var(--sheet); }
.layer[data-kind="real"] { background: radial-gradient(85% 75% at 50% 30%, var(--studio-hi), var(--studio-lo)); }
.layer[data-kind="screen"] { position: relative; inset: auto; overflow: visible; border-radius: 0; }
.stage-err {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--space-6);
  text-align: center;
  color: var(--bad-text);
}

/* Drawing: a sheet that draws itself in. Each part waits its --d, set on it by the drawing. */
.ld { --d: 0s; position: absolute; inset: 0; }
.ld svg { display: block; inline-size: 100%; block-size: 100%; font-family: var(--mono); }
.ld text { fill: var(--sheet-ink); font-size: var(--sheet-text-md); font-weight: var(--weight-medium); }
.ld .zone { fill: var(--sheet-soft); font-size: var(--sheet-text-sm); text-anchor: middle; }
.ld .lab { fill: var(--sheet-soft); font-size: var(--sheet-text-xs); letter-spacing: var(--tracking-caps); }
.ld .val { font-size: var(--sheet-text-lg); font-weight: var(--weight-semibold); }
.ld .val.big { font-size: var(--sheet-text-xl); letter-spacing: var(--tracking-wide); }
.ld .thin { fill: none; stroke: var(--sheet-faint); stroke-width: .8; }
.ld .frame { fill: none; stroke: var(--sheet-ink); stroke-width: 1.2; }
.ld .part { fill: var(--sheet); stroke: var(--sheet-ink); stroke-width: .8; vector-effect: non-scaling-stroke; }
.ld .row text { font-size: var(--sheet-text-md); }
.ld .rowbg { fill: transparent; transition: fill var(--dur-fast) var(--ease); }
.ld .row.hl .rowbg { fill: var(--sheet-faint); }
.ld .dr { animation: ld-draw var(--dur-slow) var(--ease) both; animation-delay: var(--d); }
.ld .fd { animation: ld-fade var(--dur-base) var(--ease) both; animation-delay: var(--d); }
@keyframes ld-draw { from { stroke-dasharray: 0 1; } to { stroke-dasharray: 1 0; } }
@keyframes ld-fade { from { opacity: 0; } }

/* Block diagram: its item tags, and the highlight a hovered item shares with its row */
.ld .nt { font-size: var(--sheet-text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); }
.ld .ns { fill: var(--sheet-soft); font-size: var(--sheet-text-xs); letter-spacing: var(--tracking-wide); }
.ld .wl {
  fill: var(--sheet-soft);
  font-size: var(--sheet-text-xs);
  letter-spacing: var(--tracking-wide);
  paint-order: stroke;
  stroke: var(--sheet);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.ld .wire { fill: none; stroke: var(--sheet-ink); stroke-width: .9; vector-effect: non-scaling-stroke; }
.ld .ah { fill: var(--sheet-ink); stroke: none; }
.ld .tag circle {
  fill: var(--sheet);
  stroke: var(--sheet-ink);
  stroke-width: .8;
  transition: fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease);
}
.ld .tag text { font-size: var(--sheet-text-sm); font-weight: var(--weight-semibold); transition: fill var(--dur-fast) var(--ease); }
.ld .node .part { transition: fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease); }
.ld .node.hl .part { fill: color-mix(in srgb, var(--sheet-hl) 9%, var(--sheet)); stroke: var(--sheet-hl); }
.ld .hl > .tag circle { fill: var(--sheet-hl); stroke: var(--sheet-hl); }
.ld .hl > .tag text { fill: var(--sheet); }

/* 3D: the studio's canvas fades in over the layer once it has drawn */
.l3 { position: absolute; inset: 0; }
.l3-cv {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  cursor: grab;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.l3.on .l3-cv { opacity: 1; }
.l3.drag .l3-cv { cursor: grabbing; }
.l3-cv:focus-visible { outline: 2px solid var(--accent); outline-offset: calc(-1 * var(--space-1-5)); border-radius: var(--r-lg); }
.l3-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--space-6);
  text-align: center;
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  color: var(--muted);
}
.l3-msg.err { color: var(--bad-text); }
.l3-hint {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--space-4);
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.l3.moved .l3-hint { opacity: 0; }

/* Tool: a desktop app's window, always dark. Every chapter's tool shares the frame; the layout tool fills it here. */
.sc {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--tool-line);
  border-radius: var(--r-md);
  background: var(--tool-bg);
  color: var(--tool-text);
  box-shadow: var(--tool-shadow);
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color-scheme: dark;
}
.sc-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-3-5) var(--space-2-5);
  border-block-end: 1px solid var(--tool-line);
  background: var(--tool-panel);
}
.sc-lights { display: flex; gap: var(--space-1-5); }
.sc-lights i { inline-size: 10px; block-size: 10px; border-radius: var(--r-round); background: var(--tool-line); }
.sc-file {
  overflow: hidden;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sc-file span { color: var(--tool-muted); }
.sc-pill {
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-radius: var(--r-pill);
  background: var(--tool-raise);
  color: var(--tool-muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  white-space: nowrap;
}
.sc-tools { display: flex; gap: var(--space-0-5); margin-inline-start: auto; }
.sc-tools svg {
  inline-size: 28px;
  block-size: 28px;
  padding: var(--space-1-5);
  border-radius: var(--r-sm);
  fill: none;
  stroke: var(--tool-muted);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sc-tools svg.on { background: var(--tool-raise); stroke: var(--tool-text); }
.sc-run {
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--tool-top) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--tool-top) 12%, transparent);
  color: var(--tool-top);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  white-space: nowrap;
  cursor: pointer;
}
.sc-run:hover { background: color-mix(in srgb, var(--tool-top) 22%, transparent); }
.sc-run:focus-visible, .sc-nets button:focus-visible, .sc-pick select:focus-visible { outline: 2px solid var(--tool-top); outline-offset: 2px; }
.sc-main { display: grid; grid-template-columns: 176px minmax(0, 1fr) 240px; min-block-size: 0; }
.sc-layers {
  --c: var(--tool-text);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-inline-size: 0;
  margin: 0;
  padding: var(--space-3);
  border: 0;
  border-inline-end: 1px solid var(--tool-line);
  background: var(--tool-panel);
}
.sc-layers legend { float: inline-start; inline-size: 100%; }
.sc-layers legend, .sc-h {
  margin-block: 0 var(--space-2);
  margin-inline: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--tool-muted);
}
.sc-layers label {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  cursor: pointer;
}
.sc-layers label:hover { background: var(--tool-raise); }
.sc-layers input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.sc-layers i { flex: none; inline-size: 12px; block-size: 12px; border-radius: var(--r-xs); background: var(--c); }
.sc-layers input:not(:checked) + i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); opacity: .6; }
.sc-layers input:not(:checked) ~ span { color: var(--tool-muted); }
.sc-layers input:focus-visible + i { outline: 2px solid var(--tool-top); outline-offset: 2px; }
.sc-view {
  position: relative;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, var(--tool-view), var(--tool-bg));
}
.sc-insp {
  min-inline-size: 0;
  overflow-y: auto;
  padding-block: var(--space-3);
  padding-inline: var(--space-3-5);
  border-inline-start: 1px solid var(--tool-line);
  background: var(--tool-panel);
}
.sc-status {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-inline-size: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-3-5);
  border-block-start: 1px solid var(--tool-line);
  background: var(--tool-panel);
  color: var(--tool-muted);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  white-space: nowrap;
}
.sc-drc { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.sc-drc i {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--r-round);
  background: var(--tool-bot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tool-bot) 22%, transparent);
}
.sc-drc b { font-weight: var(--weight-medium); }
.drc-ok .sc-drc i { background: var(--tool-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tool-ok) 22%, transparent); }
.drc-ok .sc-drc b { color: var(--tool-text); }

/* A narrow tool stacks its panels */
.sc.compact { aspect-ratio: auto; }
.sc.compact .sc-tools, .sc.compact .sc-pill, .sc.compact .sc-grid, .sc.compact .sc-xy, .sc.compact .sc-net { display: none; }
.sc.compact .sc-run { margin-inline-start: auto; }
.sc.compact .sc-main { grid-template-columns: minmax(0, 1fr); }
.sc.compact .sc-layers { flex-flow: row wrap; gap: var(--space-1-5); padding: var(--space-2-5); border: 0; border-block-end: 1px solid var(--tool-line); }
.sc.compact .sc-layers legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.sc.compact .sc-layers label { flex: none; padding-block: var(--space-1); padding-inline: var(--space-2); border: 1px solid var(--tool-line); white-space: nowrap; }
.sc.compact .sc-view { aspect-ratio: 70 / 46; }
.sc.compact .sc-insp { border: 0; border-block-start: 1px solid var(--tool-line); }
.sc.compact .sc-status { gap: var(--space-3); }

/* Electronics, Layout: the board in a layout tool, with its nets, the chosen part and a design-rule check */
.sc-svg { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
.sc-dot { fill: var(--tool-grid); }
.sc-svg .tr { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--dur-fast) var(--ease); }
.sc-svg [data-ly="top"] .tr { stroke: var(--tool-top); }
.sc-svg [data-ly="bot"] .tr { stroke: var(--tool-bot); opacity: .7; }
.sc-svg .pour { fill: var(--tool-top); opacity: .13; transition: opacity var(--dur-fast) var(--ease); }
.sc-svg .pd { fill: var(--tool-pad); transition: opacity var(--dur-fast) var(--ease); }
.sc-svg .pd.ring { fill: none; stroke: var(--tool-pad); }
.sc-svg .via { fill: none; stroke: var(--tool-pad); stroke-width: .15; transition: opacity var(--dur-fast) var(--ease); }
.sc-svg .silk polyline, .sc-svg .silk rect, .sc-svg .silk circle { fill: none; stroke: var(--tool-silk); stroke-width: .15; }
.sc-svg .silk .fill { fill: var(--tool-silk); stroke: none; }
.sc-svg .silk text { fill: var(--tool-silk); font-family: var(--mono); font-weight: var(--weight-semibold); text-anchor: middle; dominant-baseline: central; }
.sc-svg .silk { opacity: .8; }
.sc-svg .edge { fill: none; stroke: var(--tool-edge); stroke-width: .2; }
.sc-svg .ko { fill: url(#sc-hatch); stroke: var(--tool-ko); stroke-width: .12; stroke-dasharray: .6 .4; opacity: .85; }
.sc-hatch { stroke: var(--tool-ko); stroke-width: .1; opacity: .5; }
.sc-svg .nethits polyline { fill: none; stroke: transparent; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; }
.sc-svg .nethits rect, .sc-svg .nethits circle { fill: transparent; pointer-events: fill; }
.sc-svg .parthits rect { fill: transparent; pointer-events: fill; cursor: pointer; }
.sc-svg .parthits rect:hover { fill: var(--tool-hover); stroke: var(--tool-silk); stroke-width: .12; }
.sc-svg .sel { fill: none; stroke: var(--tool-top); stroke-width: .18; stroke-dasharray: .5 .3; pointer-events: none; }
.sc-svg .off { display: none; }
.sc-svg.netmode .ly .tr, .sc-svg.netmode .ly .pd, .sc-svg.netmode .ly .via, .sc-svg.netmode .pour { opacity: .22; }
.sc-svg.netmode .ly .on-net { opacity: 1; filter: drop-shadow(0 0 .4px var(--tool-top)); }
.sc-scan {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(-1 * var(--space-18));
  inline-size: var(--space-18);
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tool-top) 14%, transparent) 70%, var(--tool-top));
}
.sc-scan:dir(rtl) { scale: -1 1; }
.sc-scan.run { animation: sc-scan var(--dur-long) var(--ease-sweep) both; }
@keyframes sc-scan {
  0% { inset-inline-start: calc(-1 * var(--space-18)); opacity: 1; }
  90% { opacity: 1; }
  100% { inset-inline-start: 100%; opacity: 0; }
}
.sc-pick {
  display: grid;
  gap: var(--space-2);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--tool-muted);
}
.sc-pick select {
  inline-size: 100%;
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-sm);
  background: var(--tool-raise);
  color: var(--tool-text);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: normal;
  text-transform: none;
}
.sc-ref {
  margin-block: var(--space-4) var(--space-1);
  margin-inline: 0;
  font-family: var(--mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
}
.sc-desc { margin-block: 0 var(--space-3); margin-inline: 0; color: var(--tool-muted); font-size: var(--text-xs); }
.sc-info dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-xs); }
.sc-info dt { color: var(--tool-muted); }
.sc-info dd {
  margin: 0;
  text-align: end;
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
.sc-info .sc-h { margin-block-start: var(--space-4); }
.sc-nets { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.sc-nets button {
  padding-block: var(--space-1);
  padding-inline: var(--space-1-5);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-xs);
  background: var(--tool-raise);
  color: var(--tool-text);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  cursor: pointer;
}
.sc-nets button:hover { border-color: var(--tool-muted); }
.sc-nets button[aria-pressed="true"] { border-color: var(--tool-top); color: var(--tool-top); }
.sc-xy { min-inline-size: 21ch; font-variant-numeric: tabular-nums; }
.sc-net { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; color: var(--tool-text); }

@media (prefers-reduced-motion: reduce) {
  .ld .dr, .ld .fd, .sc-scan.run { animation: none; }
  .l3-cv, .l3-hint { transition: none; }
}