/* ============================================================================
   Integration — Drafter inside Siemens NX
   ----------------------------------------------------------------------------
   Two vocabularies live in this file and they must not blend:

   `nx-*`  is a facsimile of Siemens NX 2406. Windows metrics, Segoe UI, hard 1px
           hairlines, no radii, no shadows, no motion. It deliberately does NOT read
           tokens from ds/colors.css — NX is not our product and must not inherit our
           type scale, our grays, or our accent. The literal hex values here are the
           point, not drift.

   `dfi-*` is the Drafter add-in panel. It uses our tokens and our type, because the
           whole reason this screen exists is to design the one surface of our product
           that lives inside somebody else's application.

   Everything is sized off the reference screenshots at 1.25× → these are the 1× values.
   ========================================================================== */

.nx-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #F0F0F0;
  color: #1F1F1F;
  font-family: "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.nx-app button { font: inherit; color: inherit; }
.nx-app input { font: inherit; color: inherit; }
.nx-icon, .nx-glyph { display: block; flex: none; }
.nx-caret { font-style: normal; font-size: 8px; line-height: 1; opacity: 0.8; }

/* ── Title bar ─────────────────────────────────────────────────────────────
   Siemens petrol. The quick-access strip is deliberately dense and slightly
   illegible at 1× — that is what it looks like. */
.nx-titlebar {
  flex: none;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 0 8px;
  background: #127C89;
  color: #FFFFFF;
}
.nx-brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding-right: 4px;
}
.nx-qa { display: flex; align-items: center; gap: 1px; }
.nx-qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  cursor: default;
}
.nx-qa-btn:hover { background: rgba(255, 255, 255, 0.16); }
.nx-qa-wide { gap: 4px; padding: 0 6px; font-size: 12px; }
.nx-qa-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.32); margin: 0 4px; }
.nx-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #FFFFFF;
  white-space: nowrap;
}
.nx-titlebar-right { display: flex; align-items: center; gap: 0; }
.nx-siemens {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-right: 14px;
}
.nx-win-btn {
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  cursor: default;
}
.nx-win-btn:hover { background: rgba(255, 255, 255, 0.18); }
.nx-win-btn.is-close:hover { background: #C42B1C; }

/* ── Menu bar (doubles as the ribbon tab strip) ──────────────────────────── */
.nx-menubar {
  flex: none;
  height: 26px;
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border-bottom: 1px solid #E4E4E4;
}
.nx-menus { display: flex; align-items: stretch; }
.nx-menu-wrap { position: relative; display: flex; }
.nx-menu {
  border: 0;
  background: transparent;
  padding: 0 9px;
  font-size: 12px;
  color: #1F1F1F;
  cursor: default;
  border-bottom: 2px solid transparent;
}
.nx-menu:hover { background: #E9F1F3; }
.nx-menu.is-active { border-bottom-color: #E8791E; font-weight: 600; }
.nx-menu.is-open { background: #E9F1F3; }
.nx-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 208px;
  padding: 2px;
  background: #FFFFFF;
  border: 1px solid #C6C6C6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.nx-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  font-size: 12px;
  text-align: left;
  cursor: default;
}
.nx-dropdown button:hover { background: #E9F1F3; }
.nx-dropdown img { width: 13px; height: 16px; object-fit: contain; }

.nx-menubar-right { margin-left: auto; display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.nx-search {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding: 0 5px;
  background: #FFFFFF;
  border: 1px solid #B9B9B9;
  color: #767676;
}
.nx-search input {
  width: 150px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 11px;
}
.nx-menubar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #4A4A4A;
  cursor: default;
}
.nx-menubar-btn:hover { background: #E9F1F3; }
.nx-menubar-wide { font-size: 11px; }

/* ── Ribbon ────────────────────────────────────────────────────────────────
   Fixed height with the group row clipped rather than wrapped: NX truncates the
   ribbon from the right when the window narrows, it never reflows it. */
.nx-ribbon {
  flex: none;
  display: flex;
  height: 86px;
  background: #FFFFFF;
  border-bottom: 1px solid #D6D6D6;
}
.nx-ribbon-groups { flex: 1; display: flex; min-width: 0; overflow: hidden; }
.nx-rb-group {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #E4E4E4;
  padding: 0 2px;
  min-width: 0;
}
.nx-rb-items { flex: 1; display: flex; align-items: flex-start; gap: 0; padding-top: 3px; }
.nx-rb-footer {
  flex: none;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}
.nx-rb-group-label { font-size: 11px; color: #656565; white-space: nowrap; }
.nx-rb-footer .nx-caret { position: absolute; right: 2px; color: #8A8A8A; }

.nx-rb-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 62px;
  min-height: 60px;
  padding: 4px 2px 0;
  border: 1px solid transparent;
  background: transparent;
  cursor: default;
}
.nx-rb-big:hover:not(.is-disabled) { background: #E9F1F3; border-color: #BFD7DC; }
.nx-rb-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  line-height: 1.18;
  color: #1F1F1F;
  text-align: center;
}
.nx-rb-big.is-disabled { opacity: 0.4; }
/* Wider labels ("Feature Control Frame") get the room NX gives them. */
.nx-rb-big:nth-child(n) { flex: none; }

.nx-rb-stack { display: flex; flex-direction: column; gap: 1px; padding-top: 4px; }
.nx-rb-small {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 6px 0 3px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 11px;
  white-space: nowrap;
  cursor: default;
}
.nx-rb-small:hover:not(.is-disabled) { background: #E9F1F3; border-color: #BFD7DC; }
.nx-rb-small.is-disabled { opacity: 0.4; }

.nx-rb-icons { display: flex; flex-direction: column; gap: 1px; padding: 4px 2px 0; }
.nx-rb-iconrow { display: flex; gap: 1px; }
.nx-rb-iconbtn {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  cursor: default;
}
.nx-rb-iconbtn:hover { background: #E9F1F3; border-color: #BFD7DC; }

.nx-ribbon-collapse {
  flex: none;
  width: 18px;
  border: 0;
  border-left: 1px solid #E4E4E4;
  background: transparent;
  color: #8A8A8A;
  display: grid;
  place-items: end center;
  padding-bottom: 4px;
  cursor: default;
}

/* ── Body: rails · navigator · graphics ─────────────────────────────────── */
.nx-body { flex: 1; min-height: 0; display: flex; }

.nx-rail {
  flex: none;
  width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  background: #F0F0F0;
  color: #5A5A5A;
}
.nx-rail-left { border-right: 1px solid #D6D6D6; gap: 20px; }
/* The right bar carries roughly half again as many tools in the same height. */
.nx-rail-right { border-left: 1px solid #D6D6D6; gap: 8px; }
.nx-rail-btn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: default;
}
.nx-rail-btn:hover { background: #DCE7E9; }

/* Part Navigator */
.nx-panel {
  flex: none;
  width: 274px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #FFFFFF;
  border-right: 1px solid #D6D6D6;
}
.nx-panel-head {
  flex: none;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 6px;
  border-bottom: 1px solid #E4E4E4;
}
.nx-panel-title { font-size: 12px; font-weight: 600; }
.nx-panel-pin {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: #6A6A6A;
  cursor: default;
}
.nx-panel-cols {
  flex: none;
  display: flex;
  height: 20px;
  background: #F0F0F0;
  border-bottom: 1px solid #D6D6D6;
  font-size: 11px;
  color: #3A3A3A;
}
.nx-col { display: flex; align-items: center; padding: 0 4px; border-right: 1px solid #D6D6D6; }
.nx-col-name { flex: 1; min-width: 0; gap: 4px; }
.nx-col-n { width: 28px; flex: none; }
.nx-sort { font-style: normal; font-size: 8px; color: #6A6A6A; }

.nx-panel-tree { flex: 1; min-height: 0; overflow: auto; }
.nx-tree-row {
  display: flex;
  height: 19px;
  align-items: center;
  font-size: 12px;
  white-space: nowrap;
}
.nx-tree-row.is-bold .nx-tree-label { font-weight: 700; }
.nx-tree-row:hover:not(.is-blank) { background: #E9F1F3; }
.nx-tree-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.nx-cell {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #EFEFEF;
  font-size: 10px;
  color: #4A4A4A;
}
.nx-tree-exp { width: 9px; text-align: center; color: #4A4A4A; font-size: 11px; }
.nx-tree-check { color: #2E9B2E; font-size: 11px; line-height: 1; }
.nx-tree-warn { color: #C79A2E; font-weight: 700; }
.nx-tree-ico { width: 14px; height: 14px; flex: none; }
.nx-tree-ico [fill="none"] { stroke-width: 1; }
.nx-tree-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #2E9B2E;
  border: 1px solid #1F7A1F;
}
.nx-tree-label { overflow: hidden; text-overflow: ellipsis; }

.nx-panel-hscroll {
  flex: none;
  height: 12px;
  background: #F0F0F0;
  border-top: 1px solid #E4E4E4;
  display: flex;
  align-items: center;
  padding: 0 2px;
}
.nx-panel-hthumb { width: 62%; height: 7px; background: #CDCDCD; }
.nx-panel-sections { flex: none; }
.nx-panel-section {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-top: 1px solid #E4E4E4;
  background: #FFFFFF;
  font-size: 13px;
  color: #0F6CBD;
  text-align: left;
  cursor: default;
}
.nx-panel-section:hover { background: #F5F9FC; }
.nx-panel-caret { font-size: 8px; color: #0F6CBD; }

/* ── Graphics area ─────────────────────────────────────────────────────────
   NX's default gradient is a light neutral that runs slightly darker toward the
   bottom-left. The part and the sheet both float in it. */
.nx-graphics { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.nx-tabstrip {
  flex: none;
  height: 22px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 4px;
  background: #F5F5F5;
  border-bottom: 1px solid #D6D6D6;
  overflow: hidden;
}
.nx-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 7px;
  font-size: 12px;
  color: #2A2A2A;
  border: 1px solid transparent;
  border-bottom: 0;
  white-space: nowrap;
}
.nx-tab:hover { background: #EAEFF1; }
.nx-tab.is-active {
  background: #FFFFFF;
  border-color: #C6C6C6;
  font-weight: 600;
  color: #0F6CBD;
}
.nx-tab-ico { width: 13px; height: 13px; }
.nx-tab-detach, .nx-tab-close { font-size: 10px; color: #5A5A5A; }

.nx-viewport {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, #C2C5C7 0%, #D0D3D5 42%, #BABEC0 100%);
}
/* Placement is measured off the reference: the part sits a touch left of centre and a
   touch below it, with the WCS parked up and to its right. */
.nx-part {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(44%, 560px);
  transform: translate(-54%, -45%);
}
.nx-wcs { position: absolute; left: 52%; top: 30%; width: 104px; transform: translate(-50%, -50%); }
.nx-triad { position: absolute; left: 14px; bottom: 10px; width: 92px; height: 92px; }

.nx-sheet-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px 18px 26px;
}
.nx-sheet {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
}

/* ── Status bar ────────────────────────────────────────────────────────────── */
.nx-statusbar {
  flex: none;
  height: 21px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  background: #F0F0F0;
  border-top: 1px solid #D6D6D6;
  font-size: 12px;
  font-weight: 600;
}
.nx-status-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-status-right { display: flex; align-items: center; gap: 5px; font-weight: 400; color: #3A3A3A; }

/* ============================================================================
   THE NX "NEW" DIALOG  (nxd-*)
   Still NX's vocabulary — the teal title strip, the blue section headers, the
   element-thin table. It fills the graphics column, which is where NX docks it.
   ========================================================================== */
.nxd {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #A6A6A6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.nxd-title {
  flex: none;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 0 0 8px;
  background: #1F4E6B;
  color: #FFFFFF;
  font-size: 12px;
}
.nxd-title span { flex: 1; }
.nxd-title-close {
  width: 32px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  cursor: default;
}
.nxd-title-close:hover { background: #C42B1C; }

.nxd-tabs { flex: none; padding: 3px 6px 0; background: #FFFFFF; }
.nxd-tabrow { display: flex; gap: 0; }
.nxd-tab {
  padding: 4px 12px;
  font-size: 12px;
  color: #1F1F1F;
  border: 1px solid #DCDCDC;
  border-bottom: 0;
  background: #F6F6F6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nxd-tab.is-active { background: #FFFFFF; border-color: #B4B4B4; font-weight: 600; }
.nxd-tabrow:last-child { border-bottom: 1px solid #B4B4B4; }

.nxd-body { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 8px 10px; overflow: auto; }
.nxd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nxd-side { flex: none; width: 232px; }

.nxd-section {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  font-size: 12px;
  font-weight: 600;
  color: #0F6CBD;
}
.nxd-section-caret { font-size: 8px; }
.nxd-templates { padding: 0 0 8px 14px; }
.nxd-filters { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px 14px; }
.nxd-filter { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.nxd-filter-right { margin-left: auto; }
.nxd-select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
  height: 20px;
  padding: 0 4px;
  background: #FFFFFF;
  border: 1px solid #B9B9B9;
  font-size: 12px;
}
.nxd-select-caret { margin-left: auto; font-style: normal; font-size: 8px; color: #4A4A4A; }

.nxd-table { border: 1px solid #C6C6C6; background: #FFFFFF; }
.nxd-tr {
  display: flex;
  width: 100%;
  height: 20px;
  align-items: stretch;
  border: 0;
  border-bottom: 1px solid #EFEFEF;
  background: transparent;
  font-size: 12px;
  text-align: left;
  cursor: default;
}
.nxd-th { background: #F0F0F0; border-bottom: 1px solid #C6C6C6; font-weight: 400; }
.nxd-tr:hover:not(.nxd-th):not(.is-blank) { background: #E9F1F3; }
.nxd-tr.is-selected { background: #CCE3F5; }
.nxd-td {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
  border-right: 1px solid #EFEFEF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nxd-td-name { flex: 1.5; }
.nxd-td-wide { flex: 1.4; }

.nxd-fields { padding: 2px 0 8px 14px; display: flex; flex-direction: column; gap: 4px; }
.nxd-field { display: flex; align-items: center; gap: 8px; }
.nxd-field-label { width: 42px; flex: none; font-size: 12px; }
.nxd-input {
  flex: 1;
  min-width: 0;
  height: 20px;
  padding: 0 4px;
  background: #FFFFFF;
  border: 1px solid #B9B9B9;
  outline: 0;
  font-size: 12px;
}
.nxd-input:focus { border-color: #127C89; }
.nxd-browse {
  flex: none;
  width: 22px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #B9B9B9;
  background: #F6F6F6;
  color: #4A4A4A;
  cursor: default;
}
.nxd-browse:hover { background: #E9F1F3; }

.nxd-preview {
  border: 1px solid #C6C6C6;
  background: #FFFFFF;
  padding: 6px;
  margin: 0 0 8px 14px;
}
.nxd-preview svg { width: 100%; height: auto; display: block; }
.nxd-props { margin: 0; padding: 0 0 0 14px; font-size: 12px; }
.nxd-props > div { display: flex; gap: 6px; padding: 1px 0; }
.nxd-props dt { flex: none; color: #3A3A3A; }
.nxd-props dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* NX right-aligns OK/Apply/Cancel. Here they sit left instead: the dialog fills the
   graphics area and the Drafter panel floats over its right third, so right-aligned
   buttons would be unreachable without first dragging the panel away. No reference
   screenshot shows this footer, so there is no fidelity being traded — only reach. */
.nxd-foot {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 6px 10px 8px;
  border-top: 1px solid #E4E4E4;
}
.nxd-btn {
  min-width: 74px;
  height: 23px;
  padding: 0 10px;
  border: 1px solid #B9B9B9;
  background: #F6F6F6;
  font-size: 12px;
  cursor: default;
}
.nxd-btn:hover { background: #E9F1F3; border-color: #127C89; }
.nxd-btn.is-default { border-color: #127C89; box-shadow: inset 0 0 0 1px #BFD7DC; }

/* ============================================================================
   THE DRAFTER PANEL  (dfi-*)
   ----------------------------------------------------------------------------
   Our product, so this half is built ON the design system rather than beside it:
   `.btn .btn-primary .btn-sm`, `.input .input-sm`, `.input-group`, `.select`,
   `.segmented .seg-item`, `.menu`, and tokens for every color, radius, space and
   size. What is left here is composition plus four named divergences, each
   commented at its rule:

     1. `.dfi-tabs` inverts `.segmented` — framed container, filled active chip.
     2. `.dfi-hero` grids in LINES, where `--grid-dot` grids in dots.
     3. `.dfi-radio` is local; the DS has no radio primitive yet.
     4. Controls run at `--ctl-h-sm`, not the `--ctl-h-md` page default.

   Surface stack, measured off the reference designs: title bar and header are
   white-ish bands, the panel body is `--bg-1`, and content sits on it as a white
   card (export) or bare with a white footer (import).
   ========================================================================== */
.dfi-window button, .dfi-window input, .dfi-window select {
  font-family: inherit;
}

.dfi-window {
  /* Fixed, not absolute: this window is a sibling of `.nx-app`, so there is no positioned
     ancestor to resolve against — and it should track the viewport, like a real one. */
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-1);
  border-radius: var(--r-sm);
  border: 1px solid var(--gray-200);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.10);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg);
}
.dfi-window.is-collapsed { height: auto; }

/* Windows chrome, so Segoe and 12px — this bar belongs to the OS, not to us. */
.dfi-titlebar {
  flex: none;
  height: 28px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 0 0 var(--s-2);
  /* OS chrome, not our palette: Windows' own titlebar fill and, below, its close-button
     red. Tokenizing these would claim they are Drafter colors. They are not. */
  background: #F7F7F9;
  border-bottom: 1px solid var(--gray-200);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 12px;
  color: var(--gray-800);
  cursor: move;
}
.dfi-titlebar-ico { width: 15px; height: 15px; flex: none; display: block; }
.dfi-titlebar-ico svg { width: 100%; height: 100%; display: block; border-radius: 1px; }
.dfi-titlebar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfi-winbtns { display: flex; flex: none; align-self: stretch; padding-right: var(--s-1); }
.dfi-winbtn {
  width: 30px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--gray-800);
  cursor: pointer;
}
.dfi-winbtn:hover { background: var(--gray-200); }
.dfi-winbtn.is-close:hover { background: #C42B1C; color: var(--white); }

.dfi-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* The short centred grab mark the reference designs carry just under the title bar. */
.dfi-grip {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 26px;
  height: 2px;
  margin-left: -13px;
  border-radius: var(--r-pill);
  background: var(--gray-300);
}

/* ── Header band ───────────────────────────────────────────────────────────── */
.dfi-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  /* 12/16, not 16 all round: with a 28px account chip that lands the band at 54px, which
     is what the reference measures. 16 made it 62 and the header read as a masthead. */
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.dfi-logo { height: 21px; width: auto; display: block; }
/* A chip, because the reference draws one — but the quietest possible version of it.
   The DS default (--gray-300 border + --shadow-1) made this read as a button competing
   with the logo across the band; a hairline and no lift is closer to the design. */
.dfi-account {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 28px;
  box-sizing: border-box;
  padding: 0 var(--s-2) 0 2px;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--fg);
  cursor: pointer;
}
.dfi-account:hover { border-color: var(--gray-300); }
.dfi-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--success);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.dfi-account-name { font-size: var(--fs-body); font-weight: var(--fw-medium); }

/* ── Tabs — the two directions of the integration, and never more than two ──
   DIVERGENCE 1. `.segmented` fills the container (--gray-100) and lifts the active
   item to white. The reference inverts that: the container is a white frame and the
   active item is the filled chip. Only the two fills and the border move; height,
   type, spacing and behaviour still come from `.segmented` / `.seg-item`. */
.dfi-tabs {
  flex: none;
  display: flex;
  margin: var(--s-4) var(--s-4) 0;
  padding: 3px;
  gap: 3px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--r-sm);
}
.dfi-tabs .seg-item {
  flex: 1;
  height: 28px;
  box-sizing: border-box;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.dfi-tabs .seg-item[aria-selected="true"] {
  background: var(--bg-2);
  border-color: var(--gray-300);
  /* Keeps `.seg-item`'s lift. The fill inverts, the raised-ness does not. */
  box-shadow: var(--shadow-1);
  color: var(--gray-900);
}
/* Real Material Symbols glyph now (was a hand-drawn SVG) — needs (0,2,0) specificity to
   beat Google's own `.material-symbols-outlined { font-size: 24px }` rule, same as every
   other bespoke icon size in this codebase. */
.material-symbols-outlined.dfi-tab-ico { width: 15px; height: 15px; font-size: 15px; line-height: 1; flex: none; }

.dfi-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dfi-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4); }
/* Same shell as `.dfi-confirm` and `.dfi-import`: a scrolling body over a fixed footer, so
   the primary CTA sits in one place on every tab of this panel. */
.dfi-export { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ── Export tab ───────────────────────────────────────────────────────────── */
/* `.card-surface` with the radius of a panel section and no padding, because the
   hero runs edge to edge inside it. */
.dfi-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-sm);
  background: var(--white);
  overflow: hidden;
}

/* DIVERGENCE 2. `--grid-dot` is the DS drafting pattern and it grids in dots. The
   reference hero grids in LINES on the 4px ladder (var(--s-8) squares), which is what
   engineering paper actually looks like. Same ink as the dots: --gray-200. */
.dfi-hero {
  flex: none;
  padding: var(--s-8) var(--s-4);
  border-bottom: 1px solid var(--gray-300);
  background-color: var(--white);
  background-image:
    linear-gradient(to right, var(--gray-200) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gray-200) 1px, transparent 1px);
  background-size: var(--s-8) var(--s-8);
}
.dfi-hero-row { display: flex; align-items: center; justify-content: center; gap: var(--s-5); }
.dfi-hero-tile { position: relative; width: 96px; height: 96px; flex: none; display: block; }
/* The offset sheet behind each tile: what crosses this bridge is a drawing set. */
.dfi-hero-stack {
  position: absolute;
  left: -7px;
  bottom: -7px;
  width: 96px;
  height: 96px;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}
.dfi-hero-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}
.dfi-hero-logo { width: 58px; height: 58px; display: block; }
.dfi-hero-logo svg { width: 100%; height: 100%; display: block; }
/* Drafter's mark rides its own dark plate, the way the app icon does.
   #1A1B1E is the artwork's own dark (it is the fill inside every assets/brand/*-ink
   file) and there is still no token for it — --ink-dark is #14181F and --gray-900 is
   #141414. This is the second place in the product now hardcoding it, which is one
   more argument for naming one of the three canonical. */
.dfi-hero-logo.is-brand {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  /* The one radius exception in the panel: this is the Drafter app mark's own plate, not a
     container. At 4px it stops reading as an app icon and starts reading as a black box. */
  border-radius: var(--r-xl);
  background: #1A1B1E;
}
.dfi-hero-logo.is-brand img { width: 26px; height: auto; display: block; }
.dfi-hero-arrow { width: 44px; height: 22px; flex: none; }

/* 24 top and bottom, 16 at the sides — the reference is deliberately looser
   vertically than horizontally inside this card. */
.dfi-card-body { padding: var(--s-6) var(--s-4); }
.dfi-h {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--s-2);
}
.dfi-p {
  font-size: var(--fs-dense);
  line-height: var(--lh-body);
  color: var(--gray-700);
  margin: 0 0 var(--s-4);
}

.dfi-options { display: flex; flex-direction: column; gap: var(--s-3); }
/* The fill does NOT change with selection — see DfiOption. */
.dfi-option {
  border: 1px solid var(--gray-300);
  border-radius: var(--r-sm);
  background: var(--bg-1);
}
.dfi-option-hit {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  width: 100%;
  /* 8/16. At 12 the two cards each ran ~8px tall and the pair stopped reading as a
     tight either/or. */
  padding: var(--s-2) var(--s-4);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.dfi-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dfi-option-label { font-size: var(--fs-body); color: var(--fg); }
.dfi-option-desc { font-size: var(--fs-sm); font-style: italic; line-height: var(--lh-snug); color: var(--fg-muted); }
/* Revealed content returns to the card's own padding rather than indenting under the
   label — it belongs to the option, not to its description. */
.dfi-option-extra { padding: 0 var(--s-4) var(--s-2); }

/* DIVERGENCE 3. No radio primitive exists in ds/components.css yet; this is the
   Mantine-shaped one the reference uses, and it is the obvious next candidate. */
/* Mantine's own radio fills solid on select with a white centre dot — it does NOT keep an
   orange ring with an orange dot inside a white card. Unchecked is a plain gray outline. */
.dfi-radio {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--gray-400);
  background: var(--white);
  display: grid;
  place-items: center;
}
.dfi-radio.is-on {
  border-color: var(--orange-500);
  background: var(--orange-500);
}
.dfi-radio.is-on::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}

.dfi-label {
  display: block;
  font-size: var(--fs-dense);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin-bottom: var(--s-1);
}
.dfi-req { color: var(--danger); margin-left: 1px; }

/* `.btn` with no size class = `--ctl-h-md` (36px) and a 14px label, both native. Height,
   padding and type all come from the DS now; the panel only asks for a minimum width so a
   six-letter label still reads as a button, and the shared 4px radius. */
.dfi-foot .btn {
  min-width: 84px;
  border-radius: var(--r-sm);
}

/* "Export another drawing" — DS has no orange ghost variant (only `.btn-ghost-danger` for
   red), so this is that same shape: no fill, no border, tinted text instead of the DS
   default gray-700, with a matching orange-tinted hover so the fill on interaction still
   reads as "this button", not a stray gray one. */
.dfi-cta-quiet {
  border-color: transparent;
  --btn-fg: var(--orange-600);
}
.dfi-cta-quiet:hover, .dfi-cta-quiet.is-hover { background: var(--orange-50); }
.dfi-cta-quiet:active, .dfi-cta-quiet.is-active { background: var(--orange-100); }

/* ── Import tab ───────────────────────────────────────────────────────────── */
.dfi-import { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dfi-import-steps { flex: none; padding: var(--s-4) var(--s-4) 0; }
.dfi-step + .dfi-step { margin-top: var(--s-4); }
.dfi-step-head { display: flex; align-items: baseline; gap: var(--s-3); }
.dfi-step-head .dfi-h { flex: 1; }
.dfi-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--orange-600);
  font-family: var(--font-sans);
  font-size: var(--fs-dense);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.dfi-link svg { width: 14px; height: 14px; }
.dfi-link:hover { color: var(--orange-700); }
.dfi-step .dfi-p { margin-bottom: var(--s-3); }

/* `.input-group` supplies the frame and the focus ring; these add the leading icon
   slot and the combobox caret. */
.dfi-field { align-items: center; border-radius: var(--r-sm); }
/* `.input`, `.select` and `.menu` ship `--r-md` / `--r-lg` from ds/components.css. The
   panel is a single-radius surface, so it restates 4px for the DS classes it borrows. */
.dfi-window .input, .dfi-window .select { border-radius: var(--r-sm); }
.dfi-field .input { padding-left: var(--s-1); }
.dfi-field-ico { display: flex; align-items: center; padding-left: 10px; color: var(--fg-subtle); }
.dfi-field-caret {
  flex: none;
  width: 26px;
  align-self: stretch;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}
.dfi-field-caret:hover { color: var(--fg); }

.dfi-combo { position: relative; }
.dfi-combo-list {
  position: absolute;
  border-radius: var(--r-sm);
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 190px;
  overflow: auto;
  margin: 0;
  list-style: none;
  min-width: 0;
}
.dfi-combo-list button {
  display: grid;
  /* Fixed first column: `auto` sizes per-button, so the tags would stagger row to row. */
  grid-template-columns: 68px 1fr;
  gap: 0 var(--s-2);
  width: 100%;
  padding: var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.dfi-combo-list button:hover { background: var(--gray-50); }
.dfi-combo-id { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg); }
.dfi-combo-name { font-size: var(--fs-dense); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfi-combo-detail { grid-column: 2; font-size: var(--fs-xs); color: var(--fg-subtle); }

.dfi-list { flex: 1; min-height: 60px; overflow-y: auto; padding: var(--s-4) var(--s-4) 0; }
.dfi-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
/* Separators start at the title, not at the icon — the icon column reads as a gutter. */
.dfi-row::after {
  content: "";
  position: absolute;
  left: 52px;
  right: var(--s-2);
  bottom: 0;
  height: 1px;
  background: var(--gray-200);
}
.dfi-row:last-child::after, .dfi-row.is-selected::after { display: none; }
.dfi-row:hover { background: var(--gray-50); }
.dfi-row.is-selected, .dfi-row.is-selected:hover {
  background: var(--orange-50);
  border-color: var(--orange-400);
}
.dfi-row-ico { width: 32px; height: 32px; flex: none; }
.dfi-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dfi-row-name { font-size: var(--fs-body); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfi-row-meta { font-size: var(--fs-sm); color: var(--fg-muted); }
.dfi-list-empty { font-size: var(--fs-dense); color: var(--fg-muted); padding: var(--s-4) var(--s-2); margin: 0; }

/* White footer over the sunken body, so the list visibly runs under it. */
.dfi-foot {
  flex: none;
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}

/* ── Confirm Blueprint ─────────────────────────────────────────────────────────
   Same shell as the import tab: one scrolling body over a fixed white footer, so the
   Create Drawing button is reachable no matter how far the list runs.

   DIVERGENCE. The rows here are ports of Assembly 2.0's `.asm-prop-row` / `.asm-cellbtn`
   / `.asm-dropdown` family rather than reuses. Those live in app.css behind `.asm-props`
   descendant selectors and are sized for a 300px desktop column with a 40px cell height;
   this panel is 412px of Windows child window at `--ctl-h-sm` density. Same grammar,
   re-tuned — and re-prefixed so a change to the assembly panel can't reach in here. */
.dfi-confirm { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dfi-confirm-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s-4); }

/* Back sits above the title, not in the title row — it navigates away from the screen,
   and grouping it with the screen's own actions reads like one of them. */
.dfi-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 24px;
  margin: 0 0 var(--s-3) calc(var(--s-2) * -1);
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-muted);
  font-size: var(--fs-dense);
  cursor: pointer;
}
.dfi-back:hover { background: var(--gray-100); color: var(--gray-800); }

.dfi-confirm-head { margin-bottom: var(--s-4); }
.dfi-confirm-head .dfi-p { margin: 0; }

/* The Blueprint card. True white on the panel's sunken grey, so the whole set of
   selections reads as one settled object — a receipt — rather than a page of separate
   fields. Everything the Blueprint carries lives inside it, dividers included. */
.dfi-bp-card {
  border: 1px solid var(--gray-300);
  border-radius: var(--r-sm);
  background: var(--white);
  overflow: hidden;
}

/* The Blueprint's identity line: name, override state, and the one Edit affordance that
   flips the whole card. No fill of its own — the card is white end to end, so the divider
   and the heavier name type carry the hierarchy instead of a tint. */
.dfi-bp-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-3);
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}
/* The title and its Modified state travel as one unit. */
.dfi-bp-head-name { min-width: 0; display: flex; align-items: center; gap: var(--s-2); }
.dfi-confirm-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-dense);
  font-weight: var(--fw-semibold);
  color: var(--gray-900);
}
.dfi-badge-mod {
  flex: none;
  height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border: 1px solid var(--orange-200);
  border-radius: var(--r-sm);
  background: var(--orange-50);
  color: var(--orange-700);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}


/* Padding on the section, not the card body, so each divider spans the card edge to edge —
   the same reason `.asm-props-section` carries its own padding. */
.dfi-section { padding: var(--s-3); border-bottom: 1px solid var(--gray-200); }
.dfi-section:last-child { border-bottom: 0; }
.dfi-section-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--gray-700);
}

/* Inline label on a fixed basis + control filling the rest (`.asm-prop-row`). 74px lands
   "Tolerance" on one line at this font size without stealing width from the values. */
/* Rows hold `--ctl-h-md` in both modes, so flipping to edit swaps a pill for a field
   without moving the row it sits in. (The card as a whole does still grow, because the
   drawing toggles and tag pickers below are genuinely taller than the chips they replace —
   that part is the point, not drift.) */
.dfi-prop-row { display: flex; align-items: center; gap: var(--s-2); min-height: var(--ctl-h-md); min-width: 0; }
/* Read-only rows sit edge to edge fine — a pill is a small shape with its own whitespace
   around it. But an outlined field is a hard rectangle, and stacked with zero gap the
   borders touch and the section reads as one fused box instead of five distinct fields.
   Scoped to edit mode so the denser read-only receipt doesn't gain space it doesn't need. */
.dfi-bp-card.is-editing .dfi-prop-row + .dfi-prop-row { margin-top: var(--s-3); }
.dfi-prop-label { flex: 0 0 74px; font-size: var(--fs-sm); color: var(--fg-muted); }
.dfi-prop-control { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-2); }
/* The old value keeps its full text and the control gives up the width for it — the reverse
   (truncating "was Aluminum 6061-T6" to "was Aluminum 6061-T…") loses the one fact the hint
   exists to carry. The pill next to it already ellipsises, so nothing overflows the row. */
.dfi-prop-was { flex: 0 1 auto; min-width: 0; font-size: var(--fs-xs); color: var(--fg-muted); font-style: italic; white-space: nowrap; }

.dfi-pill {
  height: 20px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  padding: 0 7px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dfi-pill-x { margin-left: 4px; cursor: pointer; opacity: 0.6; }
.dfi-pill-x:hover { opacity: 1; }

/* The pill-select trigger. Read-only it is chrome-free — the value alone, so the card reads
   as a receipt. In edit mode it becomes a visible field immediately (see `.is-editing`
   below) rather than waiting for a hover: once the user has said "I am editing", every
   editable thing should look editable without being hunted for.
   Height is `--ctl-h-md` (36px) — the design system's default input size, which is the
   "small" of the Mantine spec this panel is drawn from. See the SIZE-NAME WARNING at the
   top of ds/components.css: our `-sm` suffix is Mantine's "xs", not its "sm". */
.dfi-cellbtn {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  /* Shrinkable rather than `width: 100%`, so a "was …" hint beside it takes the width it
     needs instead of being pushed off the row's right edge. */
  flex: 1 1 auto;
  min-width: 0;
  height: var(--ctl-h-md);
  padding: 0 var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-micro, 120ms) var(--ease, ease), background var(--dur-micro, 120ms) var(--ease, ease);
}
/* Edit mode: outlined and white from the moment the flip happens, matching `.input`. */
.dfi-bp-card.is-editing .dfi-cellbtn { border-color: var(--gray-300); background: var(--white); }
.dfi-bp-card.is-editing .dfi-cellbtn:hover { border-color: var(--gray-400); }
.dfi-bp-card.is-editing .dfi-cellbtn:focus-visible {
  outline: none;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.12);
}
/* The pill hugs its own label — `flex: 1` here would stretch a value pill across the whole
   row, which reads as a filled input rather than a tag. The caret is what takes up the
   slack, so it stays pinned right however short the value is. */
.dfi-cellbtn > :first-child { min-width: 0; }
.dfi-cellbtn > svg { flex: none; margin-left: auto; }
.dfi-cell-empty { font-size: var(--fs-sm); color: var(--gray-400); }

/* Portaled to <body>, so it escapes both `.dfi-content`'s scroll and the window's clip.
   `position: fixed` for the same reason `.dfi-window` is. */
.dfi-dropdown {
  position: fixed;
  z-index: 1200;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  padding: var(--s-2);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  font-family: var(--font-sans);
}
.dfi-dropdown button, .dfi-dropdown input { box-sizing: border-box; font-family: inherit; }
.dfi-dropdown-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--gray-100);
  border-radius: var(--r-sm);
}
.dfi-dropdown-input {
  flex: 1;
  min-width: 80px;
  border: 0;
  background: transparent;
  font-size: var(--fs-dense);
  color: var(--gray-800);
  padding: 2px;
}
.dfi-dropdown-input:focus { outline: none; }
.dfi-dropdown-hint { font-size: var(--fs-xs); color: var(--fg-muted); padding: var(--s-2) 4px 4px; }
.dfi-dropdown-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.dfi-dropdown-opt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-dense);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.dfi-dropdown-opt:hover { background: var(--gray-100); }
.dfi-dropdown-check { margin-left: auto; color: var(--gray-600); }
.dfi-dropdown-create { color: var(--fg-muted); }
.dfi-dropdown-empty { font-size: var(--fs-dense); color: var(--gray-400); padding: 6px; }

/* Units — the one part-setup field with no library behind it, so it stays a 2-up
   segmented pair exactly as `.ps-builder-units` renders it in the drawing workflow. */
.dfi-units {
  display: inline-flex;
  gap: 3px;
  height: var(--ctl-h-md);
  box-sizing: border-box;
  padding: 3px;
  background: var(--gray-100);
  border-radius: var(--r-sm);
}
.dfi-unit-btn {
  height: 100%;
  padding: 0 var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.dfi-unit-btn.is-on {
  background: var(--white);
  border-color: var(--gray-300);
  box-shadow: var(--shadow-1);
  color: var(--gray-900);
}

/* Label left, switch right — the label is the setting, so it leads. The Blueprint editor
   stacks these because it has the width to; at 412px the inline form reads better. */
.dfi-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 28px;
  cursor: pointer;
}
.dfi-toggle-label { flex: 1; min-width: 0; font-size: var(--fs-dense); color: var(--fg); }

.dfi-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dfi-chip { height: 22px; border-radius: var(--r-sm); font-size: var(--fs-sm); padding: 0 7px; }
/* An excluded setting is stated, not omitted — greyed, with the "No" carrying the meaning
   so it survives being read without colour. */
.dfi-chip.is-off { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-500); }
.dfi-chip-no { font-weight: var(--fw-semibold); margin-right: 4px; }
.dfi-tagpickers { gap: 5px; }
.dfi-tagpickers .attr-picker { height: 24px; padding: 0 8px; font-size: var(--fs-sm); }
.dfi-empty-line { margin: 0; font-size: var(--fs-dense); color: var(--fg-muted); }

/* ── Resize edges ─────────────────────────────────────────────────────────────
   Height is the one the user asked for, so the bottom edge is the widest target; the
   right edge and corner come along because a resizable window that only resizes one
   way is the surprising kind. 8px bands — thin enough to stay out of the content's
   way, thick enough to hit without aiming. */
.dfi-resize { position: absolute; z-index: 2; }
.dfi-resize-e { top: 0; right: 0; width: 8px; height: 100%; cursor: ew-resize; }
.dfi-resize-s { left: 0; bottom: 0; width: 100%; height: 8px; cursor: ns-resize; }
.dfi-resize-se { right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; }
/* The corner grip. Resize is not in the reference designs, so this is the quietest
   marker that still answers "can I drag this?" — faint until the pointer is in the
   window, then legible. */
.dfi-resize-se::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  opacity: 0.5;
  background:
    linear-gradient(135deg, transparent 42%, var(--gray-500) 42%, var(--gray-500) 58%, transparent 58%),
    linear-gradient(135deg, transparent 74%, var(--gray-500) 74%, var(--gray-500) 90%, transparent 90%);
  transition: opacity var(--dur-micro) var(--ease);
}
.dfi-window:hover .dfi-resize-se::after { opacity: 1; }