/* 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; }
  .pv-main > section.vw { height: auto; }
  .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; }