/* pcbview — the application page, after Altium 365: the top bar, the project
   tree and the breadcrumb bar round the viewer, which fills the window beside
   the tree. The viewer itself, and the palette, are viewer.css, loaded first;
   a page that embeds the viewer loads only that. */

@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;
  --top: 64px; --bar: 36px; --side: 280px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); overflow: hidden;
  font: 14px/1.6 Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr);
  grid-template-rows: var(--top) var(--bar) minmax(0, 1fr);
}
b, strong { color: var(--head); font-weight: 600; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
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; }
.sub { color: var(--muted); font-size: .88em; font-weight: 400; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 70%, transparent); color: #fff; }

/* ---- buttons in the chrome, A365's secondary and primary ---- */
.a3-btn {
  font: inherit; font-weight: 500; color: #fff; background: var(--btn);
  border: 0; border-radius: 3px; 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); }

/* ================================================================== shell == */
.a3-top {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .9rem; padding: 0 1.1rem 0 .8rem;
  background: var(--chrome); border-bottom: 1px solid var(--edge); z-index: 30; min-width: 0;
}
.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-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; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.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 {
  grid-row: 2 / 4; grid-column: 1; background: var(--chrome); border-right: 1px solid var(--edge);
  display: flex; flex-direction: column; font-size: .82rem; min-height: 0; z-index: 20;
}
.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.4rem);
  white-space: nowrap; cursor: pointer; font-weight: 500;
}
.a3-row:hover { background: var(--btn); }
.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-foot { padding: .9rem 1rem 1rem; }
.a3-foot .a3-btn { display: flex; justify-content: center; width: 100%; padding: .42rem; }

.a3-bar {
  grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: .8rem; padding: 0 1rem;
  background: var(--chrome); border-bottom: 1px solid var(--edge); font-size: .82rem; min-width: 0;
}
.a3-crumb { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.a3-crumb svg { width: 16px; height: 16px; flex: none; }
.a3-crumb .sep { color: var(--dim); }
.a3-page { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.a3-page code { font-size: .78rem; }

/* ================================================================== viewer == */
.pv-main { grid-column: 2; grid-row: 3; min-height: 0; min-width: 0; padding: .75rem; }
.pv-main > section.vw { height: 100%; }

/* ---- the board list (index.html with several boards) ---- */
.pv-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: .75rem; align-content: start; overflow-y: auto; }
.pv-board { display: grid; gap: .2rem; background: var(--card); border-radius: 4px; padding: .8rem;
  color: var(--fg); }
.pv-board:hover { text-decoration: none; outline: 1px solid var(--accent); }
.pv-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--canvas); margin-bottom: .4rem; }
.pv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pv-board span { font-size: .8rem; color: var(--muted); }

/* ================================================================== narrow == */
@media (max-width: 900px) {
  :root { --side: 0px; }
  body { grid-template-columns: 0 minmax(0, 1fr); }
  .a3-menu { display: grid; }
  .a3-side { position: fixed; top: var(--top); bottom: 0; left: 0; width: 290px; 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-page { display: none; }
}
@media (max-width: 760px) {
  body { overflow: auto; height: auto; grid-template-rows: var(--top) var(--bar) auto; }
  html { height: auto; }
  .a3-top { position: sticky; top: 0; }
  .a3-proj small { display: none; }
  .pv-main { padding: .5rem; }
  /* overflow: visible, or the section is the bar's scrollport and "sticky,
     64px down" lands it 64px into the section, over the canvas, instead of
     under the top bar (its rounded corners need no clipping at this height) */
  .pv-main > section.vw { height: auto; overflow: visible; }
  .pv-main .vw-bar { position: sticky; top: var(--top); z-index: 10; }
  .pv-main .vw-panel { scroll-margin-top: calc(var(--top) + 34px); }
}

/* the board list has no breadcrumb bar: its cards take that row too */
.pv-list .pv-main { grid-row: 2 / 4; }