/* KiCad 365 web viewer. Neutral, flat, dense: closer to Altium 365 and Grafana than to GitHub. */
@font-face {
  font-family: "Inter";
  src: url("/static/vendor/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --fg: #1f2023;
  --fg-muted: #686c73;
  --fg-faint: #8b8f96;
  --fg-accent: #2c5fca;
  --fg-success: #1d7a3a;
  --fg-attention: #8f5f00;
  --fg-danger: #c4302b;
  --fg-done: #7446c9;
  --accent: #3d71d9;
  --accent-hover: #3565c4;
  --bg: #f3f4f5;
  --bg-top: #ffffff;
  --bg-panel: #fafafa;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-thumb: #e9ebed;
  --bg-field: #ffffff;
  --bg-hover: #0000000d;
  --bg-viewer: #e4e6e8;
  --bg-accent: #3d71d91a;
  --bg-attention: #f5b40024;
  --sel: #3d71d91f;
  --border: #d5d8dc;
  --border-muted: #e3e5e8;
  --btn-bg: #ffffff;
  --btn-hover: #f0f1f3;
  --btn-border: #d0d3d7;
  --tag-bg: #0000000f;
  --on-accent: #ffffff;
  --shadow: 0 0 0 1px #0000001a, 0 8px 24px #0000001f;
  --card-ring: #d5d8dc;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --r: 4px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg: #e4e4e6; --fg-muted: #a0a0a6; --fg-faint: #7c7c83; --fg-accent: #79a6ff; --fg-success: #5cc07a;
    --fg-attention: #e3b341; --fg-danger: #ff6b63; --fg-done: #b48cff;
    --accent: #3d71d9; --accent-hover: #4a7ee6;
    --bg: #1b1b1d; --bg-top: #242426; --bg-panel: #212123; --bg-card: #262628; --bg-card-hover: #2c2c2f;
    --bg-thumb: #1f1f21; --bg-field: #161617; --bg-hover: #ffffff0f; --bg-viewer: #141415;
    --bg-accent: #3d71d926; --bg-attention: #e3b3411f; --sel: #3d71d933;
    --border: #3a3a3e; --border-muted: #2e2e31;
    --btn-bg: #2e2e31; --btn-hover: #38383c; --btn-border: #404044;
    --tag-bg: #ffffff14; --shadow: 0 0 0 1px #ffffff14, 0 12px 32px #000000a6; --card-ring: #4a4a4f;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.5 var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--fg-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
code, .mono { font-family: var(--mono); font-size: 12px; }
svg { flex: none; }
.muted { color: var(--fg-muted); }
.small { font-size: 12px; }
.spacer { flex: 1; }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; white-space: nowrap;
  color: var(--fg); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--r); text-decoration: none; transition: background-color .15s, border-color .15s; }
.btn:hover { background: var(--btn-hover); text-decoration: none; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.primary { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.invisible { background: none; border-color: transparent; color: var(--fg-muted); }
.btn.invisible:hover { background: var(--bg-hover); color: var(--fg); }
.btn.icon { width: 32px; padding: 0; }
.topbar .btn.icon { width: 28px; height: 28px; }
.viewbar .btn.icon { width: 26px; height: 26px; }
.btn.icon.on { color: var(--fg); background: var(--sel); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.label { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap; border-radius: 3px; background: var(--tag-bg); color: var(--fg-muted); }
.label.old { color: var(--fg-attention); background: var(--bg-attention); }
.label.open { color: var(--fg-done); background: color-mix(in srgb, var(--fg-done) 16%, transparent); }
.label.dirty { color: var(--fg-attention); background: var(--bg-attention); }
.label.release { color: var(--fg-success); background: color-mix(in srgb, var(--fg-success) 16%, transparent); }
.label.accent { color: var(--fg-accent); background: var(--bg-accent); }
.form-control { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-field); color: var(--fg); font: inherit; font-size: 13px; }
.form-control:focus { border-color: var(--accent); outline: none; }
select.form-control { appearance: none; -webkit-appearance: none; padding: 0 30px 0 10px; cursor: pointer;
  background: var(--bg-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23888c93'%3E%3Cpath d='M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; }
.field { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.field select { width: auto; }
.show-old { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted); white-space: nowrap; cursor: pointer; }
.show-old:hover { color: var(--fg); }
.show-old input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 14px; height: 14px; margin: 0; border: 1px solid var(--border); border-radius: 3px; background: var(--bg-field); cursor: pointer; }
.show-old:hover input { border-color: var(--fg-muted); }
.show-old input:checked { background: var(--accent); border-color: var(--accent); }
.show-old input:checked::after { content: ""; width: 7px; height: 3px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: translateY(-1px) rotate(-45deg); }
.show-old input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; background: var(--bg-field); border: 1px solid var(--border); border-radius: var(--r); color: var(--fg-faint); }
.search:focus-within { border-color: var(--accent); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--fg); font: inherit; font-size: 13px; }
.search input::placeholder { color: var(--fg-faint); }
.counter { display: inline-block; min-width: 18px; padding: 0 5px; font-size: 11px; font-weight: 500; line-height: 18px; text-align: center; border-radius: 3px; background: var(--tag-bg); color: var(--fg-muted); }
.spin { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--bg-field); }
.segmented button, .segmented a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; min-width: 32px; padding: 0 12px;
  border: 0; border-left: 1px solid var(--border); background: none; color: var(--fg-muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-decoration: none; }
.segmented > :first-child { border-left: 0; }
.segmented button:hover, .segmented a:hover { color: var(--fg); background: var(--bg-hover); text-decoration: none; }
.segmented .on, .segmented .on:hover { background: var(--sel); color: var(--fg); }
.segmented [aria-disabled="true"], .segmented [disabled] { opacity: 0.4; pointer-events: none; }
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; color: var(--fg-muted); min-height: 200px; }
.center h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg); }
.center p { margin: 0; max-width: 52ch; }
#app > .center { height: 100%; }

/* Top bar */
#app { height: 100%; display: flex; flex-direction: column; }
.topbar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr); align-items: center; gap: 16px;
  height: 36px; padding: 0 10px; background: var(--bg-top); border-bottom: 1px solid var(--border-muted); }
.topbar .left, .topbar .right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar .right { justify-content: flex-end; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; letter-spacing: -.01em; color: var(--fg); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { width: 20px; height: 20px; }
.topbar .search { height: 26px; }
.me { position: relative; }
.me summary { list-style: none; display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 2px; border-radius: var(--r); color: var(--fg-muted); }
.me summary::-webkit-details-marker { display: none; }
.me summary:hover { background: var(--bg-hover); }
.avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-thumb); display: grid; place-items: center; font-weight: 600; color: var(--fg); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; padding: 4px; background: var(--bg-card); border-radius: var(--r); box-shadow: var(--shadow); }
.menu .who { padding: 8px 10px; border-bottom: 1px solid var(--border-muted); margin-bottom: 4px; font-size: 12px; color: var(--fg-muted); }
.menu .who b { display: block; font-size: 13px; font-weight: 600; color: var(--fg); }
.menu button { width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: 3px; background: none; font-size: 13px; }
.menu button:hover { background: var(--bg-hover); }

/* Home: board gallery */
.home { flex: 1; min-height: 0; overflow-y: auto; }
.toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 24px; background: var(--bg); }
.toolbar select { height: 32px; }
.toolbar .sum { font-size: 12px; color: var(--fg-faint); }
.group-title { display: flex; align-items: center; gap: 8px; margin: 8px 24px 12px; padding: 2px 6px 2px 2px; border: 0; border-radius: var(--r); background: none; font-size: 13px; font-weight: 600; color: var(--fg); }
.group-title:hover { background: var(--bg-hover); }
.group-title svg, table.list tr.grp svg { color: var(--fg-faint); transition: transform .12s; }
.group-title.closed svg, table.list tr.grp.closed svg { transform: rotate(-90deg); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding: 0 24px 24px; }
.card { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r); background: var(--bg-card); color: var(--fg); overflow: hidden; transition: background-color .15s, box-shadow .15s; }
.card:hover { background: var(--bg-card-hover); box-shadow: 0 0 0 1px var(--card-ring); text-decoration: none; }
.thumb { position: relative; aspect-ratio: 16 / 10; background: var(--bg-thumb); overflow: hidden; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.thumb.sch img { padding: 10px; }
.thumb .none { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--fg-faint); font-size: 12px; }
.thumb .tags { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.thumb .tags .label { background: var(--bg-card); }
.card-body { display: grid; gap: 2px; padding: 10px 12px 12px; }
.card-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; }
.card-title .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { font-size: 12px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta b { color: var(--fg); font-weight: 500; }
.ico-board { color: var(--fg-success); }
.ico-sheet { color: var(--fg-accent); }
.ico-3d { color: var(--fg-done); }
.ico-bom { color: var(--fg-attention); }
.ico-folder { color: var(--fg-faint); }

table.list { width: calc(100% - 48px); margin: 0 24px 24px; border-collapse: collapse; background: var(--bg-card); border-radius: var(--r); overflow: hidden; }
table.list th { text-align: left; font-size: 12px; font-weight: 600; color: var(--fg-muted); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.list th button { border: 0; background: none; padding: 0; font-weight: 600; color: inherit; display: inline-flex; gap: 4px; align-items: center; }
table.list td { padding: 7px 12px; border-bottom: 1px solid var(--border-muted); vertical-align: middle; font-size: 13px; }
table.list tr:last-child td { border-bottom: 0; }
table.list tbody tr { cursor: pointer; }
table.list tbody tr:hover td { background: var(--bg-hover); }
table.list tr.grp td { background: var(--bg-panel); font-size: 12px; font-weight: 600; color: var(--fg-muted); }
table.list tr.grp:hover td { background: var(--bg-hover); }
table.list tr.grp .gt { display: inline-flex; align-items: center; gap: 8px; }
table.list .c-repo { white-space: nowrap; }
table.list .nm { display: flex; align-items: center; gap: 10px; min-width: 220px; }
table.list .nm a { color: var(--fg); font-weight: 600; }
table.list .mini { width: 48px; height: 30px; flex: none; border-radius: 3px; background: var(--bg-thumb); display: grid; place-items: center; overflow: hidden; }
table.list .mini img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
table.list .desc { color: var(--fg-muted); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.list .when { white-space: nowrap; color: var(--fg-muted); }
.empty { padding: 48px 16px; text-align: center; color: var(--fg-muted); }

/* Board page */
.topbar.board-top { grid-template-columns: minmax(0, 1fr) auto; }
.crumb { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crumb .mini { width: 26px; height: 26px; flex: none; border-radius: 3px; background: var(--bg-thumb); display: grid; place-items: center; overflow: hidden; }
.crumb .mini img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.crumb .txt { min-width: 0; display: grid; line-height: 1.15; }
.crumb .sub { font-size: 10px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb .ttl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.crumb .ttl span.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev select { height: 26px; max-width: 280px; font-size: 12px; }
.board-layout { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--tree-w, 280px) minmax(0, 1fr); }
.board-layout.no-tree { grid-template-columns: minmax(0, 1fr); }
.board-layout.no-tree .tree, .board-layout.no-tree .resizer { display: none; }
.resizer { position: absolute; z-index: 15; top: 0; bottom: 0; left: calc(var(--tree-w, 280px) - 3px); width: 6px; cursor: col-resize; touch-action: none; }
.resizer:hover, .resizing .resizer { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.resizing { cursor: col-resize; user-select: none; }
.resizing .viewer { pointer-events: none; }

.tree { min-height: 0; overflow-y: auto; background: var(--bg-panel); border-right: 1px solid var(--border-muted); display: flex; flex-direction: column; }
.tree-head { padding: 14px 16px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--fg-faint); }
.tree-items { padding: 0 6px; }
.ti { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 8px; border: 0; border-radius: 3px; background: none; color: var(--fg); font-size: 13px; text-align: left; white-space: nowrap; }
.ti:hover { background: var(--bg-hover); text-decoration: none; }
.ti.sel { background: var(--sel); }
.ti.dis { opacity: 0.45; pointer-events: none; }
.ti .t { overflow: hidden; text-overflow: ellipsis; }
.ti .pg { margin-left: auto; font-size: 11px; color: var(--fg-faint); }
.ti.folder { color: var(--fg-muted); font-weight: 600; font-size: 12px; cursor: default; }
.ti.folder:hover { background: none; }
button.ti.folder { cursor: pointer; }
button.ti.folder:hover { background: var(--bg-hover); }
.ti.folder.closed > svg:first-child { transform: rotate(-90deg); }
.ti .n { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--fg-faint); }
.about { margin-top: auto; padding: 12px 16px 16px; border-top: 1px solid var(--border-muted); display: grid; gap: 6px; font-size: 12px; color: var(--fg-muted); }
.about p { margin: 0; color: var(--fg); font-size: 13px; }
.about b { color: var(--fg); font-weight: 600; }
.about .labels { display: flex; gap: 4px; flex-wrap: wrap; }

.viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.viewbar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; height: 32px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--border-muted); background: var(--bg-top); }
.viewbar .doc { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; font-weight: 600; }
.viewbar .doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docbtn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; height: 26px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: var(--r); background: none; font-weight: 600; }
.docbtn:hover, .docbtn[aria-expanded="true"] { background: var(--bg-hover); }
.docbtn > svg:last-child { color: var(--fg-faint); }
.viewer { position: relative; }
.docmenu { position: absolute; z-index: 40; left: 8px; top: 32px; width: 340px; max-width: calc(100% - 16px); max-height: calc(100% - 56px); overflow-y: auto; padding: 4px; background: var(--bg-card); border-radius: var(--r); box-shadow: var(--shadow); }
.docitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 8px; border: 0; border-radius: 3px; background: none; text-align: left; }
.docitem:hover { background: var(--bg-hover); }
.docitem.sel { background: var(--sel); }
.dthumb { flex: none; width: 96px; height: 68px; display: grid; place-items: center; border-radius: 3px; background: #f5f4ef; overflow: hidden; color: var(--fg-faint); box-shadow: 0 0 0 1px var(--border-muted); }
.dthumb img { width: 100%; height: 100%; object-fit: contain; }
.dname { min-width: 0; display: grid; font-size: 13px; }
.dname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dname small { font-size: 11px; color: var(--fg-faint); }
.viewbar .tools { display: flex; justify-content: flex-end; gap: 2px; }
/* SCH / PCB / 3D / BOM: flat tabs filling the bar's height, as in Altium 365's viewer. */
.viewbar #tabs { align-self: stretch; display: flex; border: 0; border-radius: 0; background: none; overflow: visible; }
.viewbar #tabs a { height: auto; min-width: 40px; padding: 0 10px; border: 0; border-radius: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--fg); transition: background-color .15s; }
.viewbar #tabs a:hover { background: var(--bg-hover); }
.viewbar #tabs a.on, .viewbar #tabs a.on:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.banner { flex: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 16px; font-size: 13px; border-bottom: 1px solid var(--border-muted); }
.banner.info { background: var(--bg-accent); }
.banner.warn { background: var(--bg-attention); }
.panel { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.panel.scroll { overflow-y: auto; padding: 20px 24px 24px; }
.panel.scroll > * { flex: none; width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; }   /* don't shrink to fit: overflow and scroll */

/* KiCanvas stays hidden until it has drawn: before that it shows a solid cyan canvas and icon names as text. */
.kc { flex: 1; min-height: 0; position: relative; display: flex; background: var(--bg-viewer); }
.kc kicanvas-embed { flex: 1; min-height: 0; width: 100%; display: block; }
.kc.loading kicanvas-embed { visibility: hidden; }
.kc .kc-wait { position: absolute; inset: 0; display: none; place-items: center; }
.kc.loading .kc-wait { display: grid; }
model-viewer { flex: 1; width: 100%; min-height: 300px; background: var(--bg-viewer); --poster-color: transparent; }
.svgview { flex: 1; min-height: 0; overflow: hidden; cursor: grab; background: #001023; touch-action: none; }
.svgview:active { cursor: grabbing; }
.svgview img { width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; user-select: none; padding: 16px; }
.svgnote { padding: 6px 16px; border-top: 1px solid var(--border-muted); }
.view3d { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.view3d-bar { position: absolute; z-index: 2; left: 12px; top: 12px; right: 12px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.view3d-bar > * { pointer-events: auto; }
.render { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px; background: var(--bg-viewer); }
.render img { max-width: 100%; max-height: 100%; object-fit: contain; }

.kc-host, .kc-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kc-host[hidden], .kc-slot[hidden], #tabbody[hidden] { display: none; }

/* Our panel beside KiCanvas (static/kc-tools.js) */
/* The panel floats over the canvas's right edge, so the drawing never resizes or shifts under it. */
.kc { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.kc.resizing { cursor: col-resize; user-select: none; }
.kc.resizing kicanvas-embed { pointer-events: none; }
.kc kicanvas-embed { height: 100%; }
.kc.panel-closed .kc-panel { display: none; }
.kc-panel { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: var(--kc-panel-w, 280px); box-shadow: -8px 0 24px #0000002e; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; background: var(--bg-panel); border-left: 1px solid var(--border-muted); font-size: 12px; }
.kc-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; background: var(--bg-panel); border-bottom: 1px solid var(--border-muted); }
.kc-tabs { flex: 1; display: flex; }
.kc-head .kc-title { flex: 1; padding: 9px 14px; }
.kc-close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 0 4px; border: 0; border-radius: var(--r); background: none; color: var(--fg-muted); }
.kc-close:hover { background: var(--bg-hover); color: var(--fg); }
.kc-resizer { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 6px; cursor: col-resize; touch-action: none; }
.kc-resizer:hover, .kc.resizing .kc-resizer { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.kc-tabs button { flex: 1; height: 32px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--fg-muted); font-size: 12px; font-weight: 600; }
.kc-tabs button:hover { color: var(--fg); }
.kc-tabs button.on { color: var(--fg); border-bottom-color: var(--accent); }
.kc-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
.kc-body { padding: 0 0 12px; }
.kc-sec { padding: 6px 14px 10px; border-bottom: 1px solid var(--border-muted); }
.kc-sec:last-child { border-bottom: 0; }
.kc-sec-title { margin: 2px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); }
.kc-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 2px 0; }
.kc-row .k { color: var(--fg-muted); }
.kc-row .v { min-width: 0; overflow-wrap: anywhere; color: var(--fg); }
.kc-row .v.mono { font-family: var(--mono); font-size: 11px; overflow-wrap: break-word; }
.kc-hint { margin: 8px 14px; color: var(--fg-faint); }
.kc-hero { padding: 12px 14px 12px; border-bottom: 1px solid var(--border-muted); }
.kc-kind { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); }
.kc-name { margin-top: 2px; font-size: 18px; line-height: 1.25; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.kc-name b { font-weight: 600; }
.kc-name .dim { color: var(--fg-faint); font-weight: 500; }
.kc-sub { margin-top: 1px; font-size: 13px; color: var(--fg-muted); overflow-wrap: anywhere; }
.kc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.kc-chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--tag-bg); color: var(--fg-muted); font-size: 11px; font-weight: 500; }
.kc-chip .sw { width: 8px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px #0000002e; }
.kc-chip.warn { background: var(--bg-attention); color: var(--fg-attention); }
.kc-facts { padding: 8px 14px; border-bottom: 1px solid var(--border-muted); }
.kc-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--border-muted); }
.kc-action { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--btn-border); border-radius: var(--r); background: var(--btn-bg); color: var(--fg); font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; }
.kc-action:hover { background: var(--btn-hover); text-decoration: none; }
.kc-links { display: flex; flex-wrap: wrap; gap: 4px; }
.kc-link { padding: 1px 6px; border: 1px solid var(--border-muted); border-radius: 3px; background: none; color: var(--fg); font: 11px/16px var(--mono); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.kc-link:hover { border-color: var(--accent); color: var(--fg-accent); }
.kc-pins { display: grid; gap: 3px; }
.kc-pin { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 6px; }
.kc-pin .num { font: 11px var(--mono); color: var(--fg-faint); text-align: right; }
.kc-pin .kc-link { justify-self: start; }
.kc-card { display: flex; gap: 8px; align-items: baseline; width: 100%; padding: 6px 8px; border: 1px solid var(--border-muted); border-radius: var(--r); background: none; color: var(--fg); font-size: 12px; text-align: left; cursor: pointer; }
.kc-card span { color: var(--fg-muted); }
.kc-card:hover { border-color: var(--accent); }
.kc-more { border-bottom: 1px solid var(--border-muted); }
.kc-more summary { display: flex; align-items: center; gap: 6px; padding: 9px 14px; list-style: none; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); }
.kc-more summary::-webkit-details-marker { display: none; }
.kc-more summary:hover { color: var(--fg); }
.kc-more summary svg { transition: transform .12s; }
.kc-more[open] summary svg { transform: rotate(90deg); }
.kc-more-body { padding: 0 14px 10px; }
.kc-panel .muted { color: var(--fg-faint); }
.kc-layer-tools { display: flex; gap: 6px; padding: 4px 10px 8px; }
.kc-layer { display: flex; align-items: center; gap: 8px; width: 100%; height: 26px; padding: 0 12px; border: 0; background: none; color: var(--fg); font-size: 12px; text-align: left; }
.kc-layer:hover { background: var(--bg-hover); }
.kc-layer .sw { width: 12px; height: 12px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1px #0000002e; }
.kc-layer .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-layer.off { color: var(--fg-faint); }
.kc-layer.off .sw { opacity: .3; }
div.kc-layer { cursor: pointer; }
.kc-layer.active { background: var(--sel); font-weight: 600; }
.kc-only, .kc-eye { flex: none; border: 0; background: none; color: var(--fg-muted); border-radius: 3px; }
.kc-only { height: 20px; padding: 0 6px; font-size: 11px; opacity: 0; }
.kc-layer:hover .kc-only, .kc-only:focus-visible { opacity: 1; }
.kc-only:hover { background: var(--bg-hover); color: var(--fg); }
.kc-eye { width: 24px; height: 22px; padding: 0; }
.kc-eye:hover { background: var(--bg-hover); color: var(--fg); }
@media (max-width: 900px) { .kc { grid-template-columns: minmax(0, 1fr); } .kc-panel { display: none; } }

.kc-layers-menu { width: 300px; padding: 0; display: flex; flex-direction: column; }
.kc-layers-menu .kc-tabs { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; background: var(--bg-card); border-bottom: 1px solid var(--border-muted); }
.kc-layers-menu .kc-tabs > button[data-mtab] { flex: none; height: 36px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--fg-muted); font-size: 13px; font-weight: 600; }
.kc-layers-menu .kc-tabs > button[data-mtab].on { color: var(--fg); border-bottom-color: var(--accent); }
.kc-layers-menu .kc-tabs .spacer { flex: 1; }
.kc-layers-menu .kc-tabs .kc-close { flex: none; width: 28px; height: 28px; margin: 0 4px; border-bottom: 0; }
.kc-layers-menu .kc-menu-body { padding: 4px 0 8px; }
.kc-side { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; }
.kc-side .segmented button { height: 26px; padding: 0 14px; }
.kc-link { border: 0; background: none; color: var(--fg-accent); font-size: 12px; padding: 2px 4px; border-radius: 3px; }
.kc-link:hover { background: var(--bg-hover); }
.kc-group { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 12px 0 10px; border: 0; background: none; color: var(--fg); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.kc-group .n { flex: 1; min-width: 0; }
.kc-group .kc-eye { display: grid; place-items: center; opacity: 0; }
.kc-group:hover .kc-only, .kc-group:hover .kc-eye, .kc-group.off .kc-eye { opacity: 1; }
.kc-group.off .n { color: var(--fg-faint); }
.kc-group:hover { background: var(--bg-hover); }
.kc-group svg { color: var(--fg-faint); transition: transform .12s; }
.kc-group.closed svg { transform: rotate(-90deg); }
.kc-layers-menu .kc-layer { padding-left: 28px; }
.kc-layers-menu [data-object].kc-layer { padding-left: 12px; }
.kc-layer .kc-eye { display: grid; place-items: center; opacity: 0; }
.kc-layer:hover .kc-eye, .kc-layer.off .kc-eye { opacity: 1; }
.kc-layer.off .n { color: var(--fg-faint); }

.kc-chooser { position: absolute; z-index: 45; min-width: 220px; max-width: 320px; padding: 4px; background: var(--bg-card); border-radius: var(--r); box-shadow: var(--shadow); font-size: 12px; }
.kc-chooser-title { padding: 4px 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); }
.kc-chooser button { display: block; width: 100%; padding: 5px 8px; border: 0; border-radius: 3px; background: none; color: var(--fg); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-chooser button:hover { background: var(--bg-hover); }

/* Assembly Assistant */
:root { --asm-bg: #f2f2ef; --asm-edge: #2b2b2e; --asm-pad: #c7a14a; --asm-fab: #9a9aa2; --asm-silk: #4d4d55; --asm-hole: #f2f2ef;
  --asm-cur: #2f6fe4; --asm-placed: #1d9a4a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --asm-bg: #141415; --asm-edge: #d6d6da; --asm-pad: #a8893f; --asm-fab: #5d5d66; --asm-silk: #9a9aa3; --asm-hole: #141415;
  --asm-cur: #5b93ff; --asm-placed: #3fbf6a; } }
.ico-asm { color: var(--fg-accent); }
.asm-progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-muted); margin-right: 8px; white-space: nowrap; }
.asm-progress b { color: var(--fg); }
.asm-progress .bar { width: 120px; height: 6px; border-radius: 3px; background: var(--tag-bg); overflow: hidden; }
.asm-progress .bar span { display: block; height: 100%; background: var(--asm-placed); transition: width .2s; }
.asm { flex: 1; min-height: 0; display: grid; grid-template-columns: 380px minmax(0, 1fr); }
.asm-list { min-height: 0; display: flex; flex-direction: column; background: var(--bg-panel); border-right: 1px solid var(--border-muted); }
.asm-tools { display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-muted); }
.asm-row { display: flex; align-items: center; gap: 12px; }
.asm-row .segmented button { height: 26px; padding: 0 10px; }
.asm-lines { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 6px; }
.asm-line { display: flex; gap: 10px; padding: 8px; border-radius: var(--r); cursor: pointer; }
.asm-line:hover { background: var(--bg-hover); }
.asm-line.sel { background: var(--sel); box-shadow: inset 3px 0 0 var(--asm-cur); }
.asm-line.done .asm-value, .asm-line.done .asm-fp { color: var(--fg-faint); }
.asm-line.dnp { opacity: .6; }
.asm-check { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 0; border: 1.5px solid var(--border); border-radius: 4px; background: var(--bg-field); display: grid; place-items: center; }
.asm-check:hover { border-color: var(--fg-muted); }
.asm-check.on { background: var(--asm-placed); border-color: var(--asm-placed); }
.asm-check.on::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.asm-check.some::after { content: ""; width: 8px; height: 2px; background: var(--asm-placed); }
.asm-check[disabled] { opacity: .4; }
.asm-main { min-width: 0; flex: 1; display: grid; gap: 2px; }
.asm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.asm-n { min-width: 18px; font-size: 11px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.asm-value { font-weight: 600; font-size: 13px; }
.asm-qty { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.asm-fp { font-size: 11px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-refs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.asm-ref { height: 20px; padding: 0 5px; border: 0; border-radius: 3px; background: var(--tag-bg); color: var(--fg); font: 11px var(--mono); }
.asm-ref:hover { background: var(--btn-hover); }
.asm-ref.on { background: color-mix(in srgb, var(--asm-placed) 22%, transparent); color: var(--fg-success); text-decoration: line-through; }
.asm-keys { padding: 6px 12px; border-top: 1px solid var(--border-muted); font-size: 11px; color: var(--fg-faint); }
.asm-view { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.asm-bar { flex: none; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-bottom: 1px solid var(--border-muted); background: var(--bg-top); }
.asm-bar .segmented button { height: 26px; }
.asm-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.asm-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--asm-bg); cursor: grab; touch-action: none; }
.asm-canvas.panning { cursor: grabbing; }
.asm-canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 16px; transform-origin: 0 0; }
.asm-canvas svg .l-edge, .asm-canvas svg .l-pad, .asm-canvas svg .l-fab, .asm-canvas svg .l-silk { pointer-events: none; }
.asm-overlay polygon { fill: transparent; stroke: none; vector-effect: non-scaling-stroke; cursor: pointer; pointer-events: all; }
.asm-overlay polygon:hover { stroke: var(--fg-muted); stroke-width: 1px; }
.asm-overlay polygon.placed { fill: color-mix(in srgb, var(--asm-placed) 38%, transparent); }
.asm-overlay polygon.cur { fill: color-mix(in srgb, var(--asm-cur) 45%, transparent); stroke: var(--asm-cur); stroke-width: 2px; animation: asm-pulse 1.4s ease-in-out infinite; }
@keyframes asm-pulse { 50% { fill: color-mix(in srgb, var(--asm-cur) 20%, transparent); } }
@media (prefers-reduced-motion: reduce) { .asm-overlay polygon.cur { animation: none; } }
@media (max-width: 900px) {
  .asm { grid-template-columns: minmax(0, 1fr); grid-template-rows: 55% 45%; }
  .asm-view { order: -1; }
  .asm-list { border-right: 0; border-top: 1px solid var(--border-muted); }
  .asm-progress .bar, .asm-keys { display: none; }
}

/* Panels inside a board */
.box { border-radius: var(--r); overflow: hidden; background: var(--bg-card); }
.box + .box { margin-top: 16px; }
.box-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; flex-wrap: wrap; }
table.bom { width: 100%; border-collapse: collapse; font-size: 13px; }
table.bom th, table.bom td { padding: 6px 12px; text-align: left; border-bottom: 1px solid var(--border-muted); vertical-align: top; }
table.bom th { position: sticky; top: 0; background: var(--bg-card); font-weight: 600; font-size: 12px; color: var(--fg-muted); }
table.bom td.refs { font-family: var(--mono); font-size: 12px; max-width: 360px; overflow-wrap: anywhere; }
table.bom td.num { text-align: right; }
table.bom tr.dnp td { color: var(--fg-muted); text-decoration: line-through; }
.dl { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border-muted); }
.dl:first-of-type { border-top: 0; }
.dl .txt { flex: 1; min-width: 0; display: grid; }
.dl .txt b { font-weight: 500; }
.dl .txt span { font-size: 12px; color: var(--fg-muted); }
.commit { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border-muted); }
.commit:first-of-type { border-top: 0; }
.commit.sel { background: var(--sel); }
.commit .c-main { flex: 1; min-width: 0; display: grid; }
.commit .subj { font-weight: 500; overflow-wrap: anywhere; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.commit .who { font-size: 12px; color: var(--fg-muted); }
.commit .who b { color: var(--fg); font-weight: 500; }
.commit .sha { color: var(--fg-muted); }
.problems { margin: 0; padding-left: 20px; }
.problems pre { margin: 4px 0 0; white-space: pre-wrap; font: 12px var(--mono); color: var(--fg-muted); max-height: 120px; overflow: auto; }

/* Sign-in: always dark, like Grafana's, with a faint trace pattern toward the edges. */
body.login { min-height: 100%; display: flex; flex-direction: column; color: #ccccdc; background: #0f1012; overflow-x: hidden; }
body.login::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 115%, #f5a62340, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% -10%, #3d71d92e, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 40h70l30 30h60l20-20h60M0 120h40l40 40h80l40-40h40M60 240v-50l30-30h30M180 0v30l-20 20h-40M210 240v-60l-30-30'/%3E%3Cg fill='%23ffffff' fill-opacity='.035' stroke='none'%3E%3Ccircle cx='70' cy='40' r='4'/%3E%3Ccircle cx='160' cy='70' r='4'/%3E%3Ccircle cx='120' cy='160' r='4'/%3E%3Ccircle cx='120' cy='50' r='4'/%3E%3Ccircle cx='180' cy='150' r='4'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #0000004d 20%, #000 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #0000004d 20%, #000 100%); }
.login-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 48px 16px; }
.login-brand { display: grid; justify-items: center; gap: 20px; text-align: center; }
.login-brand img { width: 72px; height: 72px; }
.login-brand h1 { margin: 0; font-size: 32px; font-weight: 500; letter-spacing: -.01em; color: #e4e4ea; }
.login-box { width: 100%; max-width: 480px; display: grid; gap: 16px; padding: 32px; border-radius: 6px; background: #18191cb3; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.login-box .btn { height: 40px; font-size: 14px; width: 100%; }
.login-box .btn.github { color: #fff; background: #2f3237; border-color: #ffffff1f; }
.login-box .btn.github:hover { background: #393c42; }
.login-box .err { margin: 0; padding: 8px 12px; border-radius: 4px; color: #ffb4ae; background: #d1242f26; font-size: 13px; }
.login-box .note { margin: 0; font-size: 13px; color: #9b9ba8; text-align: center; }
.login-foot { position: relative; z-index: 1; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 16px; font-size: 12px; color: #8a8a96; }
.login-foot a { color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.login-foot a:hover { color: #ccccdc; text-decoration: none; }

/* Narrow screens */
@media (max-width: 900px) {
  .board-layout { grid-template-columns: minmax(0, 1fr); }
  .board-layout .tree, .board-layout .resizer { display: none; }
  .board-layout.tree-open .tree { display: flex; position: fixed; z-index: 30; left: 0; top: 36px; bottom: 0; width: min(300px, 85vw); box-shadow: var(--shadow); }
  .viewbar .doc { display: none; }
  .viewbar { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 640px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 0 12px; }
  .brand span { display: none; }
  .topbar.board-top .rev { display: none; }
  .toolbar { padding: 12px 16px; gap: 10px; }
  .grid { padding: 0 16px 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .group-title { margin: 8px 16px; }
  table.list { width: calc(100% - 32px); margin: 0 16px 16px; }
  table.list .c-desc, table.list .c-cat, table.list .c-repo, table.list .c-by { display: none; }
  .panel.scroll { padding: 12px 16px 16px; }
  .viewbar .segmented a { padding: 0 8px; }
  .login-brand h1 { font-size: 26px; }
  .login-box { padding: 24px 20px; }
}
@media (max-width: 400px) { .grid { grid-template-columns: minmax(0, 1fr); } }

/* (i) menu: board numbers and view controls */
.infomenu { left: auto; right: 8px; width: 300px; padding: 0; font-size: 12px; }
.infomenu .kc-row { grid-template-columns: minmax(0, 1fr) auto; }
.infomenu .kc-row .v { text-align: right; color: var(--fg); }
kbd { display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 3px; font: 600 11px/16px var(--mono); text-align: center; color: var(--fg); background: var(--bg-card); }
.ovl { text-decoration: overline; text-decoration-thickness: 1px; }
.kc-more summary .count { margin-left: 2px; font-weight: 500; letter-spacing: 0; color: var(--fg-faint); }
.kc-sub .kc-value { font-size: 14px; font-weight: 500; color: var(--fg); }
.kc-sub .kc-desc { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--fg-muted); }

/* Sidebar: nets, ERC, DRC */
.ti.tnet { height: 26px; font-size: 12px; }
.ti.tnet .n { margin-left: auto; font-size: 11px; color: var(--fg-faint); }
.tfilter { padding: 4px 6px 4px 38px; }
.tfilter input { width: 100%; height: 26px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-field); color: var(--fg); font-size: 12px; }
.tnote { padding: 4px 8px 6px 44px; font-size: 12px; color: var(--fg-faint); }
.ti.tgroup { font-size: 12px; color: var(--fg); }
.ti.tgroup.closed > svg:first-child { transform: rotate(-90deg); }
.ti.tgroup .n { margin-left: auto; }
.sev { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-attention); }
.sev.error { background: var(--fg-danger); }
.tcheck { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 5px 8px 5px 56px; border: 0; border-radius: 3px; background: none; color: var(--fg); font-size: 12px; text-align: left; }
.tcheck:hover { background: var(--bg-hover); }
.tcheck.sel { background: var(--sel); }
.tcheck .sev { margin-top: 5px; }
.tcheck .tc { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tcheck .tt { overflow-wrap: anywhere; }
.tcheck .ts { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; color: var(--fg-muted); overflow-wrap: anywhere; }
.tbadges { margin-left: auto; display: flex; gap: 8px; }
.tbadge { font-size: 11px; font-weight: 600; color: var(--fg-attention); }
.tbadge.error { color: var(--fg-danger); }
.tbadge.ok { color: var(--fg-success); }

/* "Newer changes aren't built yet" */
.dialog { width: min(440px, calc(100vw - 32px)); padding: 20px 22px 18px; border: 1px solid var(--border-muted); border-radius: 8px; background: var(--bg-card); color: var(--fg); box-shadow: var(--shadow); }
.dialog::backdrop { background: #0006; }
.dialog h2 { margin: 0 0 8px; font-size: 16px; }
.dialog p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.dcommits { margin: 0 0 12px; padding: 0; list-style: none; border: 1px solid var(--border-muted); border-radius: var(--r); }
.dcommits li { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; font-size: 13px; border-top: 1px solid var(--border-muted); }
.dcommits li:first-child { border-top: 0; }
.dcommits li span { font-size: 12px; color: var(--fg-muted); }
.dactions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.spin.sm { width: 14px; height: 14px; }