/* InvictusCad — UI component layer (2026-09-29 redesign).
   Loaded after styles.css. styles.css keeps the colour tokens (hull / ink /
   accent / ok / warn / err, light + dark) and the app skeleton; this file adds
   one type scale, one spacing scale and the shared components every page uses:
   buttons, badges, cards, page headers, toolbars, menus, and the empty /
   loading / error states. New UI code uses these classes, never inline
   style.cssText. */

body { font-size: var(--fs-body); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }



/* ── page scaffold: every destination (Projects, Drawings, Calculators,
      Assemblies, Catalogues) opens with the same header ─────────────── */
.page { padding: var(--s5) var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s4);
  min-height: 100%; }
.page-head { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.page-title { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.page-sub { color: var(--ink-3); font-size: var(--fs-meta); margin-top: 2px; }
.page-head .grow { flex: 1; min-width: 180px; }
.toolbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.search { height: 32px; border-radius: var(--r-sm); border: 1px solid var(--rule-strong); background: var(--hull-1);
  padding: 0 var(--s3); font-size: var(--fs-meta); min-width: 200px; color: var(--ink); }
.search:focus { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.select { height: 32px; border-radius: var(--r-sm); border: 1px solid var(--rule-strong); background: var(--hull-1);
  padding: 0 var(--s2); font-size: var(--fs-meta); color: var(--ink); }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-meta); color: var(--ink-2); cursor: pointer; }
.section-h { font: 700 var(--fs-meta)/1 var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3);
  margin: var(--s2) 0 var(--s1); }

/* ── cards & grids ───────────────────────────────────────────────────── */
.card { background: var(--hull-1); border: 1px solid var(--rule); border-radius: var(--r-xl);
  box-shadow: var(--elev-1); overflow: hidden; }
.card.hover { transition: border-color .12s, box-shadow .15s var(--ease), transform .15s var(--ease); cursor: pointer; }
.card.hover:hover { border-color: var(--rule-strong); box-shadow: var(--elev-2); transform: translateY(-1px); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: var(--s4); }

/* part card (Projects) */
.pcard { display: flex; flex-direction: column; position: relative; overflow: visible; }
/* .card clips (overflow:hidden) and cut the ⋯ menu to its first item, so "Delete part…" could not be
   reached: the part card lets the menu out, the thumbnail keeps the rounded top corners itself, and the
   card with an open menu sits above the next row. */
.pcard:has(.menu) { z-index: 5; }
.pcard.menu-open { z-index: 5; }   /* the same for a browser without :has() (RC8 LOW-B4); a separate rule, because one unknown selector voids a whole list */
.del-req { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.del-slug { color: var(--ink-3); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.del-warn { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.pcard .thumb { border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; }
.pcard .thumb { aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse at 50% 38%, var(--hull-1), var(--hull-3) 78%);
  display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--rule); overflow: hidden; }
.pcard .thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--s2); }
html:not([data-theme="light"]) .pcard .thumb { border-bottom-color: var(--rule-strong); }
.pcard .thumb .ph { color: var(--ink-4); font-size: var(--fs-meta); }
.pcard .body { padding: var(--s3) var(--s3) var(--s2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pcard .name { font-weight: 650; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.3; overflow-wrap: anywhere; }   /* two lines, then the ellipsis; the whole name is in the title attribute */
.pcard .meta { color: var(--ink-3); font-size: var(--fs-meta); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pcard .meta .mass { font-weight: 600; color: var(--ink-2); }
.pcard .mass-note, .ph-masswarn, .lx-masswarn { color: var(--warn); font-size: var(--fs-meta); line-height: 1.35; }
.pcard .mass-note { margin-top: 2px; }
.pcard .badges { position: absolute; top: var(--s2); left: var(--s2); display: flex; gap: 4px; flex-wrap: wrap; }
.pcard .foot { display: flex; gap: var(--s1); align-items: center; padding: 0 var(--s3) var(--s3); margin-top: auto; }
.pcard .foot .grow { flex: 1; }
.pcard .builds { font-size: var(--fs-meta); color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; }

/* ── menu (a small popover of actions) ───────────────────────────────── */
.menu-wrap { position: relative; display: inline-flex; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 180px;
  background: var(--hull-1); border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  box-shadow: var(--elev-2); padding: 4px; display: flex; flex-direction: column; }
.menu.up { top: auto; bottom: calc(100% + 4px); }
.menu a, .menu button { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%;
  padding: 7px 10px; border-radius: 5px; border: none; background: none; color: var(--ink);
  font-size: var(--fs-meta); cursor: pointer; text-decoration: none; }
.menu a:hover, .menu button:hover { background: var(--hull-3); }
.menu a:focus-visible, .menu button:focus-visible { background: var(--hull-3); outline: 2px solid var(--accent); outline-offset: -2px; }   /* K4 */
.menu .sep { height: 1px; background: var(--rule); margin: 4px 2px; }
.menu .hint { color: var(--ink-3); font-size: var(--fs-meta); margin-left: auto; }

/* ── states ──────────────────────────────────────────────────────────── */
.empty { border: 1px dashed var(--rule-strong); border-radius: var(--r-xl); padding: var(--s6) var(--s5);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s2); color: var(--ink-2); }
.empty .e-ico { font-size: 28px; opacity: .7; }
.empty .e-title { font-weight: 650; color: var(--ink); font-size: var(--fs-title); }
.empty .e-text { max-width: 440px; font-size: var(--fs-meta); color: var(--ink-3); }
.state-err { border: 1px solid color-mix(in srgb, var(--err) 40%, transparent); background: color-mix(in srgb, var(--err) 8%, transparent);
  color: var(--ink); border-radius: var(--r-md); padding: var(--s3); display: flex; gap: var(--s3); align-items: center; }
.state-err .grow { flex: 1; }
.skeleton { background: linear-gradient(90deg, var(--hull-2), var(--hull-3), var(--hull-2)); background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite; border-radius: var(--r-md); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-card { height: 250px; border-radius: var(--r-xl); }
.sk-row { height: 44px; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .card.hover:hover { transform: none; } }

/* ── master / detail (Assemblies, Catalogues) ────────────────────────── */
.md { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: var(--s4); align-items: start; }
.md-list { display: flex; flex-direction: column; gap: 4px; }
.md-item { display: flex; align-items: center; gap: var(--s2); padding: 10px var(--s3); border-radius: var(--r-md);
  border: 1px solid transparent; background: none; cursor: pointer; text-align: left; width: 100%; color: var(--ink); }
.md-item:hover { background: var(--hull-3); }
.md-item.on { background: var(--wash); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.md-item .t { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-item .s { color: var(--ink-3); font-size: var(--fs-meta); }
.md-detail { min-width: 0; }
@media (max-width: 900px) { .md { grid-template-columns: minmax(0, 1fr); } }

/* ── top bar: agent / engine status ─────────────────────────────────── */
.status-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--rule); font-size: var(--fs-meta); color: var(--ink-2); background: var(--hull-1); cursor: default; }
.status-pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.status-pill.ok .d { background: var(--ok); }
.status-pill.warn .d { background: var(--warn); }
.status-pill.err .d { background: var(--err); }
.status-pill.err { cursor: pointer; }
.status-pill.off { color: var(--ink-3); }

/* ── notice inside a run: the product never degrades silently ────────── */
.notice { border-radius: var(--r-md); padding: 10px 12px; font-size: var(--fs-meta); display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--rule-strong); background: var(--hull-2); }
.notice.warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.notice .n-ico { color: var(--warn); font-weight: 700; }
.notice .grow { flex: 1; }

/* assemblies detail */
.asm-head { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.asm-head .grow { flex: 1; min-width: 200px; }
.asm-title { font-size: var(--fs-h2); font-weight: 700; }
.asm-clash { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-meta); }
.asm-clash ul { margin: 0 0 0 18px; }
.asm-plan { background: #fff; border-bottom: 1px solid var(--rule); max-height: 380px; overflow: auto; cursor: zoom-in; }
.asm-plan img { width: 100%; display: block; }
.asm-body { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.asm-add .search { flex: 1; min-width: 200px; }
.linklike { background: none; border: none; padding: 0; color: var(--accent); font: 600 var(--fs-body) var(--sans); cursor: pointer; text-align: left; }
.linklike:hover { text-decoration: underline; }

/* chat welcome (part-aware) */
.welcome .w-title { font-size: var(--fs-title); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.welcome .w-hi { font-size: var(--fs-body); }
.welcome .w-ex button { font-size: var(--fs-meta); padding: 7px 12px; }
.notice + .notice { margin-top: 4px; }

/* phone: status pills keep only their dot */
@media (max-width: 700px) { .status-pill { padding: 0 8px; } .status-pill > span:not(.d) { display: none; } }
.ck-main > .page-head { margin-bottom: var(--s2); }

/* ── rail (session 5): the ONLY rail definition — four layered versions in
   styles.css were removed. Destinations, New design, chats, recent designs. ── */
#rail { width: 224px; }
.nav-sec { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 var(--s2); }
.nav-dests { display: flex; flex-direction: column; gap: 1px; padding: var(--s3) 0 var(--s2); }
.nav-item { display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm); padding: 6px 10px;
  font-size: var(--fs-ui); color: var(--ink-2); cursor: pointer; }
.nav-item:hover { background: var(--hull-3); color: var(--ink); }
.nav-item.on { background: var(--wash); color: var(--ink); font-weight: 600; }
.nav-ico { display: inline-block; width: 18px; text-align: center; color: var(--ink-3); }
.nav-item.on .nav-ico { color: var(--accent); }
.nav-new { margin: var(--s1) 0 var(--s2); width: 100%; height: 32px; background: var(--accent-deep); color: #fff;
  border: none; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-meta); }
.nav-new:hover { background: var(--accent-hover); }
.nav-h { font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--ink-3); padding: var(--s3) 10px var(--s1); }
.zc-sec { padding: 0 0 var(--s2); }
/* six whole rows (a half-cut row read as a rendering bug), fading at the foot
   so more chats below read as scrollable */
#zChats { max-height: 184px; overflow-y: auto; flex: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, #000 88%, transparent); }
#rail #zProjects { flex: 1; min-height: 120px; max-height: none; overflow-y: auto; }
.zc-row { display: flex; align-items: center; gap: var(--s2); padding: 6px 10px; border-radius: var(--r-sm);
  cursor: pointer; font-size: var(--fs-ui); color: var(--ink); }
.zc-row:hover { background: var(--hull-3); }
.zc-row.on { background: var(--wash); }
.zc-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-row .when { color: var(--ink-3); font-size: var(--fs-meta); }
.zc-row img.zc-thumb { width: 34px; height: 34px; flex: none; border-radius: var(--r-sm);
  object-fit: contain; background: var(--hull-3); }
/* a picture that did not load: the same box, empty, with a 1px dashed rule (the kit's missing look); the row's meta line says "No preview" */
.zc-row .zc-thumb.zc-nothumb { display: block; width: 34px; height: 34px; flex: none; box-sizing: border-box; border-radius: var(--r-sm);
  border: 1px dashed var(--rule-strong); }
.zc-partrow { padding: 5px 8px; }
.zc-partrow .zc-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.zc-partrow .zc-body .t { width: 100%; font-weight: 500; }
.zc-caret { color: var(--ink-4); font-size: 10px; padding: 0 2px; cursor: pointer; flex: none; }
.zc-caret:hover { color: var(--accent); }
.zc-sub { margin-left: 42px; padding: 4px 8px; }
.zc-sub .zc-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.zc-sub .zc-body .t { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-2); }
.zc-all { color: var(--accent); font-weight: 500; font-size: var(--fs-meta); }
.zc-empty { font-size: var(--fs-meta); color: var(--ink-3); padding: var(--s1) 10px; line-height: 1.5; }

/* ── top bar + settings popover (session 5) ── */
.top-btn { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--hull-1); border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  font-size: var(--fs-meta); color: var(--ink); }
.top-btn:hover { background: var(--hull-3); }
.top-btn.wide { width: 100%; justify-content: flex-start; margin-bottom: var(--s2); }
.popover { border-radius: var(--r-xl); box-shadow: var(--elev-2); padding: var(--s3) var(--s4); }
#settings { width: 288px; }
.pop-h { font-size: var(--fs-body); font-weight: 650; margin-bottom: var(--s2); }
.pop-h.sub { font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--ink-3); margin: var(--s3) 0 var(--s1); }
.pop-row { padding: 5px 0; font-size: var(--fs-meta); gap: var(--s2); cursor: pointer; }

/* ── part header + 3D toolbar: one floating segmented bar ── */
#partHead { padding: 10px var(--s4); gap: var(--s3); min-height: 50px; }
.ph-name { font-size: var(--fs-title); font-weight: 650; }
.ph-meta { font-size: var(--fs-meta); color: var(--ink-3); }
.hud { top: var(--s3); left: var(--s3); gap: 2px; padding: 3px; max-width: calc(100% - 24px);
  background: color-mix(in srgb, var(--hull-1) 92%, transparent); border: 1px solid var(--rule);
  border-radius: var(--r-md); box-shadow: var(--elev-1); backdrop-filter: blur(6px); }
.hud button { height: 26px; padding: 0 9px; border: none; background: none; border-radius: var(--r-sm);
  font-size: var(--fs-meta); font-weight: 500; color: var(--ink-2); opacity: 1; }
.hud button:hover { background: var(--hull-3); color: var(--ink); }
.hud button.on { background: var(--wash); color: var(--accent); }
.hud-sep { height: 18px; margin: 0 3px; background: var(--rule); opacity: 1; }
#spec { font-family: var(--sans); font-size: var(--fs-meta); color: var(--ink-3); }

/* ── chat composer: Send is the one primary action in Design ── */
.composer textarea { border-radius: var(--r-md); padding: 8px 10px; }
.composer .send { height: 34px; padding: 0 16px; background: var(--accent-deep); color: #fff; border: none;
  border-radius: var(--r-sm); font-weight: 600; }
.composer .send:hover { background: var(--accent-hover); border: none; }
#chatHead { background: var(--hull-1); padding: 10px var(--s3); }

/* ── drawing pane toolbar + document preview modal (session 5) ── */
.dz-bar { padding: var(--s2) var(--s3); gap: var(--s2); border-bottom: 1px solid var(--rule); margin: 0; }
.dz-bar .spacer { flex: 1; }
/* Make drawing menu on the Drawing tab: the Download menu's pattern, opening to the right of its button */
.mk-menu .mk-pop { left: 0; right: auto; top: 32px; width: 250px; padding: var(--s3) var(--s4); gap: var(--s3); align-items: stretch; }
.mk-pop .btn { align-self: flex-start; }
.mk-follow { display: flex; gap: 6px; align-items: center; font-size: var(--fs-meta); color: var(--ink-2); cursor: pointer; }
.mk-follow input { accent-color: var(--accent); }
.mk-note { margin: 0; font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.45; }
.mk-sub { font-size: var(--fs-meta); color: var(--ink-3); font-weight: 600; margin-bottom: 2px; }
.mk-list { display: flex; flex-direction: column; }
.dl-menu .popover a.mk-made, .mk-pop .dp-status a { padding: 4px 0; font-size: var(--fs-meta); color: var(--accent); text-decoration: none; }
.mk-pop .dp-status a { font-size: var(--fs-meta); font-weight: 600; }
.mk-made:hover, .mk-pop .dp-status a:hover { text-decoration: underline; }
.dz-pct { width: 44px; text-align: right; font-size: var(--fs-meta); color: var(--ink-3); }
.dz-vp { flex: 1; overflow: hidden; position: relative; background: var(--hull-1); cursor: grab; }
.dz-empty { padding: var(--s5); color: var(--ink-3); font-size: var(--fs-meta); }
.modal-scrim { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, #000 62%, transparent); }
.modal { width: min(920px, 94vw); height: min(88vh, 900px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--hull-1); border: 1px solid var(--rule-strong); border-radius: var(--r-xl); box-shadow: var(--elev-2); }
.modal-bar { display: flex; gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); }
.modal-title { flex: 1; min-width: 0; font-weight: 650; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-frame { flex: 1; border: none; background: #fff; }

/* what's new (release note, once per person per release) */
.wn { width: min(560px, 94vw); max-height: min(86vh, 760px); overflow: auto; background: var(--hull-1);
  border: 1px solid var(--rule-strong); border-radius: var(--r-xl); box-shadow: var(--elev-2); padding: var(--s4) var(--s5); }
.wn-head { display: flex; align-items: baseline; gap: var(--s2); }
.wn-title { flex: 1; font-weight: 700; font-size: var(--fs-title); }
.wn-date { color: var(--ink-3); font-size: var(--fs-meta); }
.wn-intro { color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.5; margin: var(--s2) 0 var(--s3); }
.wn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.wn-list li { display: grid; gap: 2px; padding-left: 14px; position: relative; font-size: var(--fs-meta); line-height: 1.45; }
.wn-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.wn-list strong { font-weight: 650; }
.wn-list span { color: var(--ink-2); }
.wn-foot { display: flex; justify-content: flex-end; margin-top: var(--s4); }
/* ALA-62 #9: the close is in view at the top, and "Got it" stays in view at the foot of a long list */
.wn-x { flex: none; width: 40px; height: 40px; margin: -8px -8px 0 0; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: var(--fs-h1); line-height: 1; cursor: pointer; }
.wn-x:hover { background: var(--hull-2, var(--hull-0)); color: var(--ink); }
.wn-foot { position: sticky; bottom: 0; background: var(--hull-1); padding-top: var(--s2); }
@media (max-width: 600px) { .wn { padding: var(--s3); } }

/* update notice (studio updated while open) */
.upd-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: var(--s2, 8px); flex-wrap: wrap; max-width: min(640px, calc(100vw - 32px));
  padding: 10px 14px; background: var(--hull-1); color: var(--ink-1, inherit); border: 1px solid var(--rule-strong);
  border-radius: var(--r-xl); box-shadow: var(--elev-2); font-size: var(--fs-meta); }
.upd-bar span { flex: 1 1 260px; }

/* release notes waiting, shown when the engineer was already busy at load */
.top-btn.wn-chip { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* workspace switch (2026-10-01): CAD | Calculations & docs, a segmented control like Sagara's */
.ws-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; flex: none;
  background: var(--hull-0); border: 1px solid var(--rule); border-radius: 7px; }
.ws-switch button { height: 26px; padding: 0 11px; border: 0; border-radius: 5px; background: transparent;
  color: var(--ink-3); font-size: var(--fs-meta); font-weight: 550; white-space: nowrap; }
.ws-switch button:hover { color: var(--ink); background: transparent; }
.ws-switch button.on { background: var(--hull-3); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.ws-switch .ws-short { display: none; }
@media (max-width: 1100px) { .ws-switch .ws-long { display: none; } .ws-switch .ws-short { display: inline; } }
@media (max-width: 700px) { .ws-switch button { padding: 0 8px; font-size: var(--fs-meta); } }
/* the calculations side has no design chats of its own to start */
body[data-ws="calc"] #nvNew { display: none; }
/* the rail's copy of the switch is for phones, where the top bar has no room for it */
.rail-ws { display: none; }
@media (max-width: 700px) {
  #topbar .ws-switch { display: none; }
  .rail-ws { display: flex; margin: var(--s3) 0 0; }
  .rail-ws button { flex: 1 1 0; height: 32px; }
}
/* one studio: Jobs (the redesign preview at /next) sits before the Design / Calculations switch (2026-10-01) */
.jobs-link { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 7px; flex: none;
  color: var(--ink-2); font-size: var(--fs-ui); font-weight: 600; text-decoration: none; border: 1px solid var(--rule); }
.jobs-link:hover { color: var(--ink); border-color: var(--rule-strong); background: var(--hull-3); text-decoration: none; }
.jobs-new { font-size: var(--fs-meta); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 700px) { .jobs-new { display: none; } }
/* one Projects page: Parts | Drawings | Assemblies | Tools (2026-10-01) */
.proj-tabs { display: none; gap: 2px; padding: 8px 16px 0; border-bottom: 1px solid var(--rule); background: var(--hull-1); flex: none; overflow-x: auto; }
body[data-dest="projects"] .proj-tabs { display: flex; }
.proj-tabs button { height: 34px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
  color: var(--ink-3); font-size: var(--fs-ui); font-weight: 550; white-space: nowrap; }
.proj-tabs button:hover { color: var(--ink); background: transparent; }
.proj-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.tools-page .ck-card + .ck-card { margin-top: 18px; }
/* the calculator cards' @container rules (styles.css: inputs and results stack under 760 px) need a
   container: the Tools page is not inside .ck-main, so without this a phone squeezed the results
   into a 20 px column, one word per line (UX review P1-8) */
.tools-page { container-type: inline-size; }

/* place a design in a project (place.js) — result card row and the Projects dialog */
.place { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--fs-meta); }
.place-l { color: var(--ink-3); }
.place .select.sm { height: 28px; max-width: 260px; }
.place-new { display: inline-flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.place-in { height: 28px; border-radius: var(--r-sm); border: 1px solid var(--rule-strong); background: var(--hull-1);
  padding: 0 var(--s2); font-size: var(--fs-meta); color: var(--ink); min-width: 180px; }
.place-in:focus, .place .select:focus { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.place-s { color: var(--ink-3); font-size: var(--fs-meta); }
.place-s.ok { color: var(--ok); }
.place-s.err { color: var(--err); }
.modal.place-dlg { width: min(460px, 94vw); height: auto; }
.place-dlg-body { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.place-dlg-foot { display: flex; justify-content: flex-end; padding: var(--s2) var(--s4) var(--s3); }
.rc-place { margin-top: var(--s2); }
@media (pointer: coarse) {
  .place .select.sm, .place-in, .place .btn.sm { height: 40px; }
}
.section-h.proj-sec { display: flex; align-items: center; gap: var(--s2); }
.section-h.proj-sec .grow { flex: 1; min-width: 0; }
/* phones: every top-bar and rail control at least 40 px to tap (vui NEW-3, 2026-10-01) */
@media (pointer: coarse) {
  .top-btn, #menuBtn { min-height: 40px; height: auto; }
  #mseg button { min-height: 44px; }
  #rail [data-dest] { min-height: 40px; }
}

/* phone layout pass (sphone-studio, 2026-10-01): grids may shrink below their
   widest item, so Assemblies / Tools never pan sideways */
.md-list, .md-detail, .md-detail > section.card, #p-tools > *, #p-tools .card { min-width: 0; }
.table td { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .proj-grid .card .name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (pointer: coarse) {
  #attach, .hud button, .proj-tabs button, .ck-go, select.ck-mpick, .ck-fig-btn, .sg { min-height: 40px; }
  #attach, .ck-fig-btn { min-width: 40px; }
  .pop-row { min-height: 40px; }
}

/* ── top bar: the shared header (shared/header.css) owns the brand, sections, Apps and account; ──
   these are Design's own controls in its slots (rail button, status, search, settings) */
#topbar .top-btn svg { flex: none; }
@media (max-width: 899px) {
  #topbar #btnSettings { width: 40px; justify-content: center; padding: 0; }
  #topbar #btnSettings .ts-l { display: none; }
  #topbar #agentWrap, #topbar #laneWrap { display: none; }
  #topbar #menuBtn { width: 40px; padding: 0; }
  #topbar #menuBtn, #topbar .topbar-search, #topbar #btnSettings { flex: none; }
}
#topbar #btnSettings { background: transparent; border-color: transparent; color: var(--ink-2); }
#topbar #btnSettings:hover { background: var(--hull-3); color: var(--ink); }

/* Drawing projects (Library tab, 2026-10-07): the engineer's sheet is the face of each card; the verdict reads first */
.dp-bar { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.dp-bar .search { flex: 1; min-width: 200px; max-width: 360px; margin-left: auto; }
.dp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--hull-3); flex-wrap: wrap; }
.dp-segb { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2);
  font: 600 var(--fs-meta)/1 var(--sans); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.dp-segb:hover { color: var(--ink); }
.dp-segb.on { background: var(--hull-1); color: var(--ink); box-shadow: var(--elev-1); }
.dp-segb:focus-visible, .dp-tabs button:focus-visible { outline: none; box-shadow: var(--focus); }
.dp-n { font: 600 var(--fs-meta)/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.dp-n.warn { color: var(--warn); }
.dp-grid { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
/* his sheet is paper in either theme: a drawing is read black on white */
.dp-sheet { background: #fff; border-bottom: 1px solid var(--rule); }
.dp-sheet img { padding: 6px; mix-blend-mode: multiply; }
.dp-card .body { gap: 6px; }
.dp-card .name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.dp-top { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; min-width: 0; }
.dp-num { font: 600 var(--fs-meta)/1.2 var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dp-facts { font-variant-numeric: tabular-nums; }
.dp-mass b { color: var(--ink); font-weight: 650; }
.dp-q { color: var(--warn); font-weight: 600; }
.dp-why { font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dp-card.dp-fail { border-color: color-mix(in srgb, var(--err) 45%, var(--rule)); }
.dp-card.dp-check { border-color: color-mix(in srgb, var(--warn) 45%, var(--rule)); }
.dp-sk { aspect-ratio: 4 / 4.2; }

.dp-project { gap: var(--s3); }
.dp-back { align-self: flex-start; }
.dp-head { display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap; }
.dp-head .grow { flex: 1; min-width: 240px; }
.dp-headline { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.dp-headline .page-title { font-family: var(--mono); font-size: var(--fs-h2); letter-spacing: 0; overflow-wrap: anywhere; }
.dp-verdict { margin: var(--s2) 0 0; max-width: 78ch; color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.5; }
.dp-revs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); font-size: var(--fs-meta); color: var(--ink-3); }
.dp-rev { height: 28px; min-width: 32px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--r-sm, 6px); background: transparent;
  color: var(--ink-2); font: 600 var(--fs-meta)/1 var(--mono); cursor: pointer; }
.dp-rev:hover { border-color: var(--ink-3); color: var(--ink); }
.dp-studio-note { margin-top: var(--s2); }
.dp-docs { margin-bottom: var(--s4); }
.dp-doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.dp-doclist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.dp-doc-t { font-weight: 600; overflow-wrap: anywhere; }
.dp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); overflow-x: auto; margin-top: var(--s2); }
.dp-tabs button { height: 36px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
  color: var(--ink-3); font: 600 var(--fs-meta)/1 var(--sans); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.dp-tabs button:hover { color: var(--ink); }
.dp-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.dp-pane { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s2); min-width: 0; }
.dp-h2 { font-size: var(--fs-body); font-weight: 700; margin: 0; }
.dp-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s4); }
.dp-page { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dp-page a { display: block; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.dp-page a:focus-visible { outline: none; box-shadow: var(--focus); }
.dp-page img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.dp-page figcaption { font-size: var(--fs-meta); color: var(--ink-3); }
.dp-builds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s4); }
.dp-build { overflow: hidden; display: flex; flex-direction: column; }
.dp-iso { aspect-ratio: 4 / 3; background: var(--hull-2); border-bottom: 1px solid var(--rule); display: grid; place-items: center; }
.dp-iso img { width: 100%; height: 100%; object-fit: contain; padding: var(--s2); }
.dp-build-b { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.dp-build-b .meta { color: var(--ink-3); font-size: var(--fs-meta); }
.dp-make { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.dp-make.lit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--wash); }
.dp-fields { display: flex; gap: var(--s4); align-items: flex-end; flex-wrap: wrap; }
.dp-lab { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-meta); color: var(--ink-3); font-weight: 600; }
.dp-choice { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dp-choice legend { font-size: var(--fs-meta); color: var(--ink-3); font-weight: 600; padding: 0; margin-bottom: 6px; }
.dp-choice label { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-meta); color: var(--ink-2); cursor: pointer; }
.dp-choice input { accent-color: var(--accent); }
.dp-status { font-size: var(--fs-meta); color: var(--ink-2); min-height: 1.2em; }
.dp-dwg { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.dp-dwg .meta { color: var(--ink-3); font-size: var(--fs-meta); }
.dp-warn summary { cursor: pointer; font-size: var(--fs-meta); color: var(--warn); font-weight: 600; }
.dp-warn ul { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.5; }
.dp-gap { margin: 0; }
.dp-check { display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s4); border-bottom: 1px solid var(--rule); }
.dp-line { margin: 0; font-size: var(--fs-meta); line-height: 1.5; max-width: 90ch; padding-left: 10px; border-left: 1px solid var(--rule-strong); }
.dp-line.fail { color: var(--err); border-left-color: var(--err); }
.dp-line.warn { color: var(--warn); border-left-color: var(--warn); }
.dp-line.note { color: var(--ink-3); font-size: var(--fs-meta); }
.dp-tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--hull-1); }
.dp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.dp-table th { text-align: left; font: 600 var(--fs-meta)/1.2 var(--sans); color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.dp-table td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.dp-table tr:last-child td { border-bottom: 0; }
.dp-quiet { color: var(--ink-3); font-size: var(--fs-meta); }      /* a cell that says what it is in plain text: only a failing value gets a chip */
.dp-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-qs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--hull-1); counter-reset: q; }
.dp-qq { display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; padding: 12px 14px; border-bottom: 1px solid var(--rule); counter-increment: q; }
.dp-qq:last-child { border-bottom: 0; }
.dp-qq::before { content: counter(q); grid-row: span 3; font: 600 var(--fs-meta)/1.5 var(--mono); color: var(--ink-3); }
.dp-kind { font-size: var(--fs-meta); font-weight: 650; color: var(--ink-3); }
.dp-qq.check .dp-kind { color: var(--warn); }
.dp-qt { font-size: var(--fs-meta); line-height: 1.5; color: var(--ink); max-width: 90ch; overflow-wrap: anywhere; }
.dp-src { font-size: var(--fs-meta); color: var(--ink-3); }
@media (max-width: 640px) {
  .dp-bar .search { max-width: none; margin-left: 0; }
  .dp-head .toolbar { width: 100%; }
  .dp-fields { flex-direction: column; align-items: stretch; }
}
#grpColour:empty { display: none; }

/* WP31 L4: the Studio's own confirm / prompt dialog, the Undo toast, the deletion-request states */
.ask-body { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.ask-name { font-weight: 650; font-size: var(--fs-body); overflow-wrap: anywhere; }
.ask-text { margin: 0; color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.5; overflow-wrap: anywhere; }
.ask-field { display: flex; flex-direction: column; gap: 4px; }
.ask-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; font: inherit; color: var(--ink-1); background: var(--hull-2); border: 1px solid var(--rule-strong); border-radius: var(--r-md, 6px); padding: var(--s2); }
.ask-foot { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s2) var(--s4) var(--s3); }
.undo-toast { display: flex; align-items: center; gap: var(--s3); }
.undo-toast .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.del-note { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); margin: var(--s2) 0; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--r-md, 6px); background: var(--hull-1); font-size: var(--fs-meta); }
.del-note.kept { border-left-color: var(--ok); }
.del-note .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pcard.del-pending { opacity: .62; }
@media (pointer: coarse) { .ask-foot .btn, .undo-toast .btn, .del-note .btn { min-height: 40px; } }
/* WP34 Recently deleted (flag STUDIO_SOFT_DELETE): one row per item; on a phone the meta and the buttons wrap under the name */
.rdel { margin: var(--s2) 0 var(--s4); padding: var(--s2) var(--s3); border: 1px solid var(--rule); border-radius: var(--r-md, 6px); background: var(--hull-1); }
.rdel .section-h { margin-top: 0; }
.rdel-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1, 4px) var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.rdel-name { display: flex; flex-direction: column; min-width: 12rem; flex: 1 1 14rem; }
.rdel-name .name { font-weight: 600; overflow-wrap: anywhere; }
.rdel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); color: var(--ink-3); font-size: var(--fs-meta); flex: 2 1 18rem; min-width: 0; }
.rdel-reason { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
.rdel-notice + .rdel-notice { margin-top: 4px; }
.rdel-notice .btn { margin-left: 4px; }
@media (max-width: 600px) { .rdel-row .btn { margin-left: auto; } .rdel-reason { max-width: 100%; white-space: normal; } }
@media (pointer: coarse) { .rdel-row .btn, .rdel-notice .btn { min-height: 40px; } }

/* a drawing made in the background (WP33; js/gabg.js): the panel in the Drawing tab, the pill on cards and rows, the dot on the tab */
.gab-panel { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 46ch; padding: var(--s5); margin: var(--s5) auto;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--hull-2); color: var(--ink); }
.gab-panel[data-state="queued"] { border-left-color: var(--ink-4); }
.gab-panel[data-state="failed"] { border-left-color: var(--err); }
.gab-panel[data-state="done"] { border-left-color: var(--ok); }
.gab-title { font-size: var(--fs-body); font-weight: 650; line-height: 1.35; }
.gab-sub { font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.45; }
.gab-bar { width: 100%; height: 4px; border-radius: 2px; background: var(--hull-3); overflow: hidden; }
.gab-bar i { display: block; height: 100%; width: 35%; background: var(--accent); border-radius: 2px; animation: gabslide 1.8s ease-in-out infinite; }
@keyframes gabslide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .gab-bar i { animation: none; width: 100%; opacity: .5; } }
.gab { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-meta); line-height: 1; padding: 3px 7px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-2, var(--ink)); background: var(--hull-2); white-space: nowrap; vertical-align: middle; }
.gab[hidden] { display: none; }
.gab::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }      /* Drawing…: info */
.gab[data-state="queued"]::before { background: var(--ink-3); }                                                          /* Waiting: dim */
.gab[data-state="done"]::before { background: var(--ok); }                                                               /* Drawing ready: ok */
.gab[data-state="failed"] { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--rule)); background: color-mix(in srgb, var(--err) 12%, transparent); }   /* Drawing failed: the failed tone */
.gab[data-state="failed"]::before { background: var(--err); }
.gab[data-state="running"]::before, .gab[data-state="queued"]::before { animation: gabpulse 1.2s ease-in-out infinite; }
@keyframes gabpulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .gab::before { animation: none !important; } }
.gab.dot { padding: 0; width: 8px; height: 8px; margin-left: 6px; border: 0; background: none; }
.gab.dot::before { width: 8px; height: 8px; }
.zc-body .gab { margin-top: 3px; align-self: flex-start; }
@media (max-width: 480px) { .gab-panel { margin: var(--s4) var(--s3); padding: var(--s4); } }

/* Library on a phone (sw-libfix, 2026-10-11): every control and card action at least 44 px to tap (our phone-target standard) - the page buttons, filter, sort,
   the two checkboxes (the whole label is the target), a card's Open / Drawing and its ⋯ menu with its items */
@media (pointer: coarse), (max-width: 700px) {
  .lib-page .toolbar .btn, .lib-page .toolbar .search, .lib-page .toolbar .select, .lib-page .pcard .foot .btn,
  .lib-page .del-req .btn, .lib-page .del-note .btn { min-height: 44px; height: auto; }
  .lib-page .toolbar .search { height: 44px; }
  .lib-page .toolbar .select { height: 44px; }
  .lib-page .toolbar .check { min-height: 44px; }
  .lib-page .toolbar .check input { width: 20px; height: 20px; margin: 0; }
  .lib-page .btn.icon, .lib-page .menu-wrap > .btn { min-width: 44px; min-height: 44px; }
  .lib-page .menu a, .lib-page .menu button { min-height: 44px; }
  .lib-page .menu { max-height: min(70vh, 560px); overflow-y: auto; }   /* a part's long menu at 44 px a row still fits the screen; it scrolls */
}
/* WP34: a drawing project's builds that are in Recently deleted */
.dp-gone { margin-top: var(--s4); }
.dp-gone-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--rule); }
/* ---- Standards (Library > Standards, js/pages/standards.js) ----
   States are words + icons, never colour alone. Unchecked = dark text on an amber fill in both themes (11:1); checked and disputed
   use a tint of the status colour behind the normal ink colour. */
.sd-bar-top { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.sd-pick-l { font-size: var(--fs-meta); color: var(--ink-3); }
.sd-pick { height: var(--h-ctl); padding: 0 var(--s2); border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--hull-1); color: var(--ink); font: inherit; }
.sd-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s4); align-items: start; position: relative; }
.sd-sources { display: flex; flex-direction: column; gap: var(--s2); }
.sd-src { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: var(--s3); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--hull-1); color: var(--ink); cursor: pointer; font: inherit; }
.sd-src:hover { border-color: var(--rule-strong); }
.sd-src.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.sd-src:focus-visible, .sd-card:focus-visible, .sd-row:focus-visible, .sd-pill:focus-visible { outline: none; box-shadow: var(--focus); }
.sd-src-top { display: flex; align-items: baseline; gap: var(--s2); justify-content: space-between; min-width: 0; }
.sd-code { font: 600 var(--fs-meta)/1.3 var(--mono); overflow-wrap: anywhere; }
.sd-ed { font: var(--fs-meta)/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.sd-src-f { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sd-lic { font-size: var(--fs-meta); color: var(--ink-3); }
.sd-lic-bad { color: var(--err); font-weight: 600; }
.sd-cov { display: flex; flex-direction: column; gap: 4px; }
.sd-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--hull-4); gap: 1px; }
.sd-seg-ok { background: var(--ok); } .sd-seg-err { background: var(--err); } .sd-seg-warn { background: var(--warn); }
.sd-cov-w { font-size: var(--fs-meta); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sd-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.sd-head { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.sd-h { margin: 0; font: 650 var(--fs-h2)/1.2 var(--sans); overflow-wrap: anywhere; }
.sd-th { margin: 0 0 var(--s2); font: 600 var(--fs-body)/1.3 var(--sans); overflow-wrap: anywhere; }
.sd-sub { margin: var(--s3) 0 var(--s1); font: 600 var(--fs-meta)/1.3 var(--sans); color: var(--ink-2); }
.sd-table { background: var(--hull-1); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s3); }
.sd-scroll { overflow-x: auto; }
.sd-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.sd-tbl th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.sd-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.sd-row { cursor: pointer; } .sd-row:hover { background: var(--hull-3); }
.sd-num { text-align: right !important; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sd-key { font-weight: 600; } .sd-pg { font-family: var(--mono); color: var(--ink-3); }
.sd-blind { color: var(--ink-4); letter-spacing: 2px; }
.sd-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
.sd-k { background: var(--hull-4); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.sd-ico { font-weight: 700; }
.sd-c-checked { background: color-mix(in srgb, var(--ok) 20%, var(--hull-1)); color: var(--ink); }
.sd-c-unchecked { background: #f2b84b; color: #1b1200; }
.sd-c-disputed { background: color-mix(in srgb, var(--err) 22%, var(--hull-1)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--err); }
.sd-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 24px; padding: 2px 10px; border: 0; border-radius: 12px; font: 600 var(--fs-meta)/1.3 var(--mono); text-align: left; cursor: default; }
.sd-pill-t { overflow-wrap: anywhere; }
.sd-banner { display: flex; gap: var(--s2); align-items: center; padding: var(--s3); margin-bottom: var(--s3); border-radius: var(--r-md); background: color-mix(in srgb, var(--err) 14%, var(--hull-1)); box-shadow: inset 0 0 0 1px var(--err); color: var(--ink); }
.sd-ro { padding: var(--s2) var(--s3); margin-bottom: var(--s3); border-radius: var(--r-md); background: var(--hull-3); color: var(--ink-2); font-size: var(--fs-meta); }
.sd-none { color: var(--ink-3); font-size: var(--fs-meta); padding: var(--s2) 0; }
.sd-drawer { position: fixed; top: 48px; right: 0; bottom: 0; width: min(420px, 100vw); overflow-y: auto; padding: var(--s4); background: var(--hull-1); border-left: 1px solid var(--rule-strong); box-shadow: var(--elev-2); z-index: 30; display: flex; flex-direction: column; gap: var(--s2); }
.sd-drawer[hidden] { display: none; }
/* the docked Copilot rail (shared/crail.css: >= 1280 px, z 40, --crail-w) sits at the right edge and would cover 352 of the drawer's 420 px: it opens beside the rail */
@media (min-width: 1280px) { html[data-crail="open"] .sd-drawer { right: var(--crail-w, 352px); } }
.sd-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--s3); margin: 0; font-size: var(--fs-meta); }
.sd-dl dt { color: var(--ink-3); } .sd-dl dd { margin: 0; overflow-wrap: anywhere; }
.sd-list { margin: 0; padding-left: var(--s4); font-size: var(--fs-meta); color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; }
.sd-card-c { display: flex; gap: 6px; flex-wrap: wrap; }
.sd-dispute { padding: var(--s3); border-radius: var(--r-md); background: color-mix(in srgb, var(--err) 14%, var(--hull-1)); box-shadow: inset 0 0 0 1px var(--err); font-size: var(--fs-meta); display: flex; flex-direction: column; gap: 4px; }
.sd-dispute-t { font-weight: 650; }
.sd-ok { padding: var(--s2) var(--s3); border-radius: var(--r-md); background: color-mix(in srgb, var(--ok) 18%, var(--hull-1)); font-size: var(--fs-meta); }
.sd-check { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.sd-form { display: flex; flex-direction: column; gap: var(--s2); }
.sd-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--ink-2); }
.sd-field input, .sd-field textarea { height: var(--h-ctl); padding: 0 var(--s2); border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--hull-0); color: var(--ink); font: var(--fs-body) var(--mono); }
.sd-field textarea { height: auto; padding: var(--s2); font-family: var(--sans); }
.sd-keybox { padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--hull-3); font: var(--fs-meta)/1.4 var(--mono); overflow-wrap: anywhere; }
.sd-hint { margin: 0; font-size: var(--fs-meta); color: var(--ink-3); }
.sd-cards { display: flex; flex-direction: column; gap: var(--s2); }
.sd-card { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: var(--s3); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--hull-1); color: var(--ink); font: inherit; cursor: pointer; }
@media (max-width: 700px) {
  .sd-layout { grid-template-columns: minmax(0, 1fr); }
  .sd-drawer { width: 100vw; border-left: 0; }
  .sd-bar-top .dp-seg { width: 100%; }
  .sd-tbl { display: none; }
}
@media (pointer: coarse) { .sd-src, .sd-card, .sd-pill, .sd-field input { min-height: 44px; } }
.sd-hidden { font-size: var(--fs-meta); color: var(--ink-3); font-style: italic; }