/* servodrive — shared page style, after Altium 365.
   The palette is measured off Altium's own documentation screenshots of the
   A365 workspace (project, history, releases and viewer pages): #282828 for
   everything that is chrome, #222 under the content, #484848 for buttons,
   #3876ad for the selection, and the viewers' #c8c8c8 canvas. Dark only, as
   A365 is. shell.js adds the top bar, the project tree and the sheet bar; the
   pages read as plain dark documents without it. */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(vendor/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(vendor/fonts/inter-greek.woff2) format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

:root {
  color-scheme: dark;
  --well: #1e1e1e;      /* inputs, code, the deepest recess */
  --bg: #222222;        /* under the content */
  --chrome: #282828;    /* top bar, tree, bars, cards */
  --card: #282828;
  --raised: #333333;    /* a tile inside a card */
  --btn: #484848;       /* secondary buttons, chips, a hovered row */
  --btn-hi: #565656;
  --tab-on: #727272;    /* the selected viewer tab */
  --edge: #181818;      /* the seam between two panes */
  --line: #3b3b3b;      /* a rule inside a card */
  --head: #ffffff;
  --fg: #d8d8d8;
  --muted: #a8a8a8;
  --dim: #868e94;
  --accent: #3876ad;    /* selection, primary buttons */
  --accent-hi: #4285c1;
  --link: #7dc0ff;
  --timeline: #7acdf0;
  --up: #67c465; --warn: #ff9f0a; --bad: #e5534b; --down: #6e6e6e;
  --chip: #333333;
  --canvas: #c8c8c8;    /* the viewers' canvas */
  --sheet: #ffffff;     /* a drawing, the way A365 lays out a schematic sheet */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --top: 64px; --bar: 36px; --side: 300px;
  --shadow: none;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
html.a365 { scroll-padding-top: calc(var(--top) + var(--bar) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.6 Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01";
  padding: 0 0 3rem; -webkit-font-smoothing: antialiased;
}
main, footer { margin: 0; padding: 0 1.5rem; }        /* the full width of the content area */
strong, b { color: var(--head); font-weight: 600; }
em { color: var(--head); }

/* ---- the page header, laid out like A365's summary cards ---- */
header {
  background: var(--card); border-radius: 4px; margin: 1.25rem auto 0;
  width: calc(100% - 3rem); padding: 1.1rem 1.35rem 1.2rem;
}
.crumb { margin: 0 0 .7rem; font-size: .82rem; color: var(--muted); }
.title { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
h1 { font-size: 1.35rem; margin: 0 .35rem 0 0; color: var(--head); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.02rem; margin: 0 0 .75rem; color: var(--head); font-weight: 600; }
h3 { font-size: .93rem; margin: 1.35rem 0 .4rem; color: var(--head); font-weight: 600; }
.card h3, section > h2 + h3 { margin-top: 0; }
.state {
  display: inline-flex; align-items: center; gap: .42rem; border-radius: 3px;
  padding: .12rem .55rem; font-size: .76rem; font-weight: 500; line-height: 1.5;
  background: var(--raised); border: 1px solid var(--btn); color: var(--head);
  white-space: nowrap;
}
.state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--down); flex: none; }
.state.active .dot { background: var(--up); }
.state.blocked .dot, .state.draft .dot { background: var(--warn); }
.lede { color: var(--fg); font-size: .95rem; margin: .7rem 0 0; }
.meta { color: var(--muted); font-size: .82rem; margin: .7rem 0 0; }
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: .75rem; }
section, .card {
  background: var(--card); border-radius: 4px; padding: 1.05rem 1.35rem 1.15rem;
  min-width: 0; scroll-margin-top: 1rem;
}
.cols { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cols .card { background: var(--raised); padding: .9rem 1rem; }
p { margin: .6rem 0; }
section > p:first-of-type { margin-top: 0; }
ul, ol { margin: .4rem 0; padding-left: 1.15rem; }
li { margin: .25rem 0; }
li::marker { color: var(--dim); }
ul.checks { list-style: none; padding-left: 0; }
ul.checks li { position: relative; padding-left: 1.5rem; }
ul.checks li::before {
  content: ""; position: absolute; left: .2rem; top: .42em; width: 10px; height: 10px;
  border-radius: 50%; border: 1.5px solid var(--dim);
}
ul.checks li.done { color: var(--muted); }
ul.checks li.done::before { background: var(--up); border-color: var(--up); }
ol.q > li { margin: .8rem 0; }
.todo { color: var(--muted); font-style: italic; }
.sub { color: var(--muted); font-size: .88em; font-weight: 400; }
code, pre, var { font-family: var(--mono); }
var { font-style: italic; }
code {
  font-size: .86em; background: var(--well); border: 1px solid var(--line);
  border-radius: 3px; padding: .05em .35em; color: #e4e4e4;
}
pre {
  background: var(--well); border: 1px solid var(--edge); border-radius: 4px;
  padding: .8rem 1rem; overflow-x: auto; font-size: .8rem; line-height: 1.55; margin: .7rem 0;
}
pre code { background: none; border: 0; padding: 0; font-size: 1em; }
pre.tree { background: var(--well); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a code { color: var(--link); }
footer { margin-top: 1.5rem; color: var(--dim); font-size: .8rem; }
footer p { margin: .3rem 0; }
::selection { background: color-mix(in srgb, var(--accent) 70%, transparent); color: #fff; }

/* ---- figures: drawings sit on a sheet, as a schematic does in A365 ----
   The SVGs carry both palettes; asked for their light one here, they match
   the simulation's PNGs, which are white. */
figure { margin: 1rem 0; }
figure img, figure object {
  display: block; width: 100%; height: auto; margin: 0 auto; color-scheme: light;
  background: var(--sheet); border-radius: 3px; padding: .6rem;
}
figcaption { color: var(--muted); font-size: .84rem; margin-top: .6rem; }

/* ---- tables, like the BOM view ---- */
.tablewrap { width: 100%; overflow-x: auto; }
table {
  border-collapse: collapse; margin: .8rem 0 1rem; font-size: .86rem; width: 100%;
}
caption {
  text-align: left; color: var(--muted); font-size: .82rem;
  padding-bottom: .45rem; caption-side: top;
}
th, td {
  text-align: left; vertical-align: top; padding: .42rem .7rem;
  border-bottom: 1px solid var(--line);
}
th:first-child, td:first-child { padding-left: .6rem; }
thead th {
  background: var(--raised); color: var(--muted); font-weight: 600; font-size: .78rem;
  white-space: nowrap; border-bottom: 1px solid var(--edge);
}
tbody tr:hover > * { background: #2f2f2f; }
tbody th { font-weight: 600; white-space: nowrap; color: var(--head); }
table.num td:nth-child(n+2) { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.tot td { font-weight: 600; color: var(--head); border-top: 1px solid var(--dim); }
th.grp {
  padding-top: .9rem; color: var(--link); font-size: .72rem; background: none;
  text-transform: uppercase; letter-spacing: .08em; border-bottom: none;
}
table.pins td:first-child { font-family: var(--mono); white-space: nowrap; }
td.chg { font-weight: 600; color: var(--head); }
td.fix { color: var(--up); }
td.fix strong { color: inherit; }
td.keep { color: var(--muted); }

/* the hand-back table: four columns that would otherwise size themselves by
   the longest code span rather than by what is worth reading */
table.hb { table-layout: fixed; }
table.hb th:nth-child(1), table.hb td:nth-child(1) { width: 30%; }
table.hb th:nth-child(2), table.hb td:nth-child(2) { width: 25%; }
table.hb th:nth-child(3), table.hb td:nth-child(3) { width: 29%; }
table.hb th:nth-child(4), table.hb td:nth-child(4) { width: 16%; }
table.hb td { overflow-wrap: anywhere; }
table.hb td.chg { color: var(--warn); }

/* ---- call-outs: tinted like the history view's event cards ---- */
.note {
  border-left: 3px solid var(--timeline); background: #242e34;
  border-radius: 3px; padding: .75rem 1rem; margin: 1rem 0; font-size: .92rem;
}
.note > :first-child { margin-top: 0; }
.note > :last-child { margin-bottom: 0; }
.note.good { border-left-color: var(--up); background: #232f27; }
.note.warn { border-left-color: var(--warn); background: #332a1f; }

/* ---- header stat row: the category tiles on A365's library page ---- */
.stats {
  display: grid; gap: .5rem; margin: 1rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stat { background: var(--raised); border-radius: 3px; padding: .55rem .8rem .6rem; }
.stat b { display: block; color: var(--head); font-size: .82rem; font-weight: 600; }
.stat span { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- past work, behind disclosures ----
   Everything that is history or reference rather than a live question. */
.archhead {
  margin: .9rem 0 -.3rem; padding: 0 .1rem; font-size: .7rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .12em;
}
details.arch {
  background: var(--card); border-radius: 4px; padding: 0 1.35rem; scroll-margin-top: 1rem;
}
details.arch > summary {
  cursor: pointer; padding: .7rem 0; font-size: .92rem; font-weight: 600; color: var(--head);
  list-style: none; display: flex; align-items: baseline; gap: .5rem;
}
details.arch > summary::-webkit-details-marker { display: none; }
details.arch > summary::before {
  content: ""; flex: none; width: 7px; height: 7px; align-self: center;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); margin: 0 .35rem 0 .1rem; transition: transform .12s;
}
details.arch[open] > summary::before { transform: rotate(45deg); }
details.arch > summary:hover { color: var(--link); }
details.arch[open] { padding-bottom: 1.1rem; }
details.arch[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
details.arch > :last-child { margin-bottom: 0; }

/* ---- the log, drawn as A365's history timeline ---- */
.log { position: relative; display: grid; gap: .6rem; padding-left: 1.9rem; }
.log::before {
  content: ""; position: absolute; left: .55rem; top: .3rem; bottom: .3rem;
  width: 2px; background: var(--timeline);
}
.entry {
  position: relative; background: #242c30; border-radius: 3px; padding: .7rem 1rem .75rem;
}
.entry::before {
  content: ""; position: absolute; left: calc(-1.9rem + .55rem - 5px); top: .95rem;
  width: 12px; height: 12px; border-radius: 50%; background: var(--timeline);
  box-shadow: 0 0 0 3px var(--card);
}
.entry::after {
  content: ""; position: absolute; left: calc(-1.9rem + .55rem + 7px); top: 1.35rem;
  width: calc(1.9rem - .55rem - 7px); height: 2px; background: var(--timeline);
}
.entry time {
  display: block; color: var(--head); font-weight: 600; font-size: .82rem;
  font-variant-numeric: tabular-nums; margin-bottom: .2rem;
}
.entry > :last-child { margin-bottom: 0; }
.entry p:first-of-type { margin-top: 0; }

/* ---- buttons, A365's secondary and primary (the shell's; the viewer has its own) ---- */
.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;
}
.a3-btn:hover { background: var(--btn-hi); text-decoration: none; }
.a3-btn.primary { background: var(--accent); }
.a3-btn.primary:hover { background: var(--accent-hi); }
input[type=range], input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* ---- the viewer ----
   pcbview's: `pcbview build pcbview.toml` writes it into the page between
   <!-- pcbview:begin --> and <!-- pcbview:end -->, with its own stylesheet
   (viewer/assets/viewer.css), which takes this palette. Set here: its height,
   the window less the shell's two bars, and the page's own words about the
   open tab (data-pv-note), which sit under it as the bottom of the same card. */
:root { --pv-embed-h: calc(100vh - var(--top) - var(--bar) - 2rem); }
.vw-about {
  background: var(--card); border-top: 1px solid var(--edge); border-radius: 0 0 4px 4px;
  padding: .95rem 1.35rem 1.1rem; margin-top: -.75rem;       /* main's gap: it is the viewer's */
}
.vw-about > :first-child { margin-top: 0; }
.vw-about > :last-child { margin-bottom: 0; }
section.vw:has(~ .vw-about:not([hidden])) { border-radius: 4px 4px 0 0; }

/* ================================================================== shell ==
   What shell.js builds: the top bar, the project tree, the sheet bar. */
html.a365 body { padding: calc(var(--top) + var(--bar)) 0 3rem var(--side); }
.a3-top {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--top);
  display: flex; align-items: center; gap: .9rem; padding: 0 1.1rem 0 .8rem;
  background: var(--chrome); border-bottom: 1px solid var(--edge);
}
.a3-top a { color: inherit; text-decoration: none; }
.a3-back, .a3-menu {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px;
  color: #fff; background: none; border: 0; cursor: pointer; padding: 0; flex: none;
}
.a3-back:hover, .a3-menu:hover { background: var(--btn); }
.a3-back svg, .a3-menu svg { width: 16px; height: 16px; }
.a3-menu { display: none; }
.a3-back.none { visibility: hidden; }
.a3-proj { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.a3-proj svg { width: 34px; height: 34px; flex: none; }
.a3-proj span { display: grid; line-height: 1.35; min-width: 0; }
.a3-proj small { color: var(--fg); font-size: .8rem; }
.a3-proj b { color: #fff; font-size: .86rem; font-weight: 600; }
.a3-sp { flex: 1; }
.a3-btn {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem;
  padding: .38rem .95rem; white-space: nowrap;
}
.a3-btn svg { width: 15px; height: 15px; flex: none; }

.a3-side {
  position: fixed; z-index: 20; top: var(--top); bottom: 0; left: 0; width: var(--side);
  background: var(--chrome); border-right: 1px solid var(--edge);
  display: flex; flex-direction: column; font-size: .82rem;
}
.a3-label {
  padding: 1.1rem 1rem .5rem; color: var(--muted); font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
}
.a3-tree {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 1rem;
  scrollbar-width: thin; scrollbar-color: var(--btn) transparent;
}
.a3-tree ul { list-style: none; margin: 0; padding: 0; }
.a3-tree li { margin: 0; }
.a3-row {
  display: flex; align-items: center; gap: .45rem; height: 32px; color: #fff;
  padding-right: .8rem; padding-left: calc(.7rem + var(--d, 0) * 1.5rem);
  text-decoration: none; white-space: nowrap; cursor: pointer; font-weight: 500;
}
a.a3-row:hover, .a3-row:hover { background: var(--btn); text-decoration: none; }
.a3-row.here { background: var(--accent); }
.a3-row.page { font-weight: 600; }
.a3-row .t { overflow: hidden; text-overflow: ellipsis; min-width: 0; color: inherit; flex: 1; }
.a3-row a.t:hover { text-decoration: none; }
.a3-row .ic { width: 16px; height: 16px; flex: none; }
.a3-tw {
  width: 16px; height: 16px; flex: none; display: grid; place-items: center;
  color: #fff; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 2px;
}
.a3-tw svg { width: 12px; height: 12px; transition: transform .12s; }
.a3-tw[aria-expanded=true] svg { transform: rotate(90deg); }
.a3-tw.leaf { visibility: hidden; }
.a3-tree li > ul[hidden] { display: none; }
.a3-foot { padding: .9rem 1rem 1rem; }
.a3-foot .a3-btn { display: flex; justify-content: center; width: 100%; padding: .42rem; }

.a3-bar {
  position: fixed; z-index: 15; top: var(--top); left: var(--side); right: 0; height: var(--bar);
  display: flex; align-items: center; gap: .8rem; padding: 0 1rem;
  background: var(--chrome); border-bottom: 1px solid var(--edge); font-size: .82rem;
}
.a3-sheet { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; position: relative; }
.a3-sheet svg { width: 16px; height: 16px; flex: none; }
.a3-sheet select {
  appearance: none; font: inherit; font-weight: 500; color: #fff; background: none; border: 0;
  padding: .25rem 1.5rem .25rem .3rem; border-radius: 3px; cursor: pointer; max-width: 60vw;
  text-overflow: ellipsis; field-sizing: content;
}
.a3-sheet select:hover { background: var(--btn); }
.a3-sheet select option { background: var(--chrome); color: #fff; }
.a3-sheet::after {
  content: ""; position: absolute; right: .55rem; top: 50%; width: 6px; height: 6px;
  border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.a3-bar .a3-sp { flex: 1; }
.a3-bar .a3-page { color: var(--muted); white-space: nowrap; }
html.a365 .crumb { display: none; }

@media (max-width: 900px) {
  :root { --side: 0px; }
  .a3-menu { display: grid; }
  .a3-side { width: 300px; max-width: 86vw; transform: translateX(-100%); transition: transform .18s; }
  html.nav-open .a3-side { transform: none; box-shadow: 4px 0 24px rgba(0,0,0,.5); }
  .a3-top .a3-btn span { display: none; }
  .a3-bar .a3-page { display: none; }
}
@media (max-width: 760px) {
  /* a wide table scrolls inside its card rather than widening the page */
  main table:not(.b3-pins) { display: block; overflow-x: auto; }
}
@media (max-width: 560px) {
  main, footer { padding: 0 .75rem; }
  header { padding: 1rem; width: calc(100% - 1.5rem); }
  section, .card { padding: .9rem 1rem 1rem; }
  details.arch { padding: 0 1rem; }
  .a3-proj small { display: none; }
}