@import url('./library-surface.css');

/* ======================================================
   modules/details/index.css
   Details module styles -- B1: register + find-surface + import
   Scoped to [data-module="details"] for container-rendered DOM.
   Modal-content classes (dtl-field, dtl-btn used in ctx.ui.modal
   content strings) are kept unscoped -- modal HTML mounts on
   .strata-overlay (document.body) outside the data-module attr.
   Both dark (default) and light ([data-theme="light"]) themes
   via platform tokens. ASCII only. No hardcoded colors.

   Platform tokens used (all defined in platform/styles.css):
     --bg, --panel, --panel-2, --input-bg
     --border, --border-strong
     --accent, --accent-soft, --ct-on-dark
     --text-primary, --text-secondary, --text-tertiary
     --success, --success-soft, --warning, --warning-soft
     --error, --error-soft
     --row-hover, --button-radius
   ====================================================== */

/* ============================================================
   Tier 1: Container-scoped rules
   All classes rendered inside the module's container element.
   ============================================================ */

[data-module="details"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  color: var(--text-primary);
}

[data-module="details"] * {
  box-sizing: border-box;
}

/* ---- Header toolbar ---- */
[data-module="details"] .dtl-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

[data-module="details"] .dtl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
  background: var(--panel);
}

[data-module="details"] .dtl-search {
  flex: 1;
  max-width: 280px;
  min-width: 120px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.1s;
}

[data-module="details"] .dtl-search:focus {
  border-color: var(--accent);
}

/* ---- Filter pills ---- */
[data-module="details"] .dtl-filter-pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

[data-module="details"] .dtl-pill {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

[data-module="details"] .dtl-pill:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

[data-module="details"] .dtl-pill.active {
  background: var(--accent);
  color: var(--ct-on-dark);
  border-color: var(--accent);
}

/* ---- Body ---- */
[data-module="details"] .dtl-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ---- Register / grid area ---- */
[data-module="details"] .dtl-register {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--bg);
}

[data-module="details"] .dtl-empty-msg {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 32px auto;
  text-align: center;
}

[data-module="details"] .dtl-deferred {
  font-style: italic;
  font-size: 12px;
}

/* ---- Detail card grid ---- */
[data-module="details"] .dtl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

[data-module="details"] .dtl-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  background: var(--panel);
  transition: border-color 0.1s, background 0.1s;
  user-select: none;
}

[data-module="details"] .dtl-card:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}

[data-module="details"] .dtl-card.active {
  border-color: var(--accent);
  background: var(--panel-2);
}

[data-module="details"] .dtl-card-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

[data-module="details"] .dtl-card-title {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-module="details"] .dtl-card-category {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* ---- Status pills (shared: also used unscoped in modal) ---- */
[data-module="details"] .dtl-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  margin-top: 6px;
  font-weight: 500;
}

[data-module="details"] .dtl-status-active {
  background: var(--success-soft);
  color: var(--success);
}

[data-module="details"] .dtl-status-voided {
  background: var(--panel-2);
  color: var(--text-secondary);
}

[data-module="details"] .dtl-status-superseded {
  background: var(--warning-soft);
  color: var(--warning);
}

/* ---- Thumbnails and file icons ---- */
[data-module="details"] .dtl-thumb-wrap {
  position: relative;
  margin-top: 8px;
}

[data-module="details"] .dtl-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: var(--panel-2);
}

[data-module="details"] .dtl-thumb-wrap .dtl-thumb {
  margin-top: 0;
}

[data-module="details"] .dtl-thumb-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: var(--accent);
  color: var(--ct-on-dark);
  pointer-events: none;
}

[data-module="details"] .dtl-pdf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  margin-top: 8px;
  color: var(--text-secondary);
  border-radius: 4px;
  background: var(--panel-2);
}

/* ---- Detail panel (right side, 480px) ---- */
[data-module="details"] .dtl-detail-panel {
  width: 480px;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px;
  flex-shrink: 0;
  background: var(--panel);
}

[data-module="details"] .dtl-detail-panel.hidden {
  display: none;
}

[data-module="details"] .dtl-panel-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

[data-module="details"] .dtl-panel-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

[data-module="details"] .dtl-section-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 20px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

[data-module="details"] .dtl-repr-preview {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  display: block;
  margin-bottom: 8px;
}

[data-module="details"] .dtl-repr-file {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  word-break: break-all;
}

/* ---- PDF multi-page viewer (detail panel) ---- */
[data-module="details"] .dtl-pdf-viewer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--panel-2);
}

[data-module="details"] .dtl-pdf-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

[data-module="details"] .dtl-pdf-readout {
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 64px;
  text-align: center;
}

[data-module="details"] .dtl-pdf-scroller {
  max-height: 520px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--bg);
}

[data-module="details"] .dtl-pdf-page {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

[data-module="details"] .dtl-pdf-canvas {
  display: block;
  border-radius: 2px;
}

/* ---- Markup section (D3 / C2) ---- */
[data-module="details"] .dtl-markup-status {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

[data-module="details"] .dtl-markup-needs-review {
  padding: 8px 10px;
  border: 1px solid var(--warning);
  border-radius: 6px;
  background: var(--warning-soft);
  color: var(--warning);
}

[data-module="details"] .dtl-markup-preview {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel-2);
  line-height: 0;
}

[data-module="details"] .dtl-markup-preview-canvas,
[data-module="details"] .dtl-markup-preview-img {
  display: block;
  max-width: 100%;
  height: auto;
}

[data-module="details"] .dtl-markup-preview-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

[data-module="details"] .dtl-danger-row {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---- Import drawer (right side, 320px) ---- */
[data-module="details"] .dtl-import-drawer {
  width: 320px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--panel);
}

[data-module="details"] .dtl-import-drawer.hidden {
  display: none;
}

[data-module="details"] .dtl-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

[data-module="details"] .dtl-drawer-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ---- Tab bar ---- */
[data-module="details"] .dtl-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--panel);
}

[data-module="details"] .dtl-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  background: transparent;
  font-family: inherit;
  transition: color 0.1s, border-color 0.1s;
}

[data-module="details"] .dtl-tab:hover {
  color: var(--text-primary);
}

[data-module="details"] .dtl-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

[data-module="details"] .dtl-tab-content {
  flex: 1;
  overflow-y: auto;
}

/* ---- Upload tab ---- */
[data-module="details"] .dtl-upload-area {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

[data-module="details"] .dtl-upload-zone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 32px 16px;
  text-align: center;
  width: 100%;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
  display: block;
  transition: border-color 0.1s, color 0.1s;
}

[data-module="details"] .dtl-upload-zone:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

[data-module="details"] .dtl-upload-progress {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  min-height: 16px;
}

/* ---- Lightbox grid ---- */
[data-module="details"] .dtl-lightbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
}

[data-module="details"] .dtl-lightbox-thumb {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--panel-2);
  transition: border-color 0.1s;
  width: 100%;
}

[data-module="details"] .dtl-lightbox-thumb:hover {
  border-color: var(--accent);
}

/* ---- Buttons (scoped) ---- */
[data-module="details"] .dtl-btn {
  padding: 6px 14px;
  border-radius: var(--button-radius, 6px);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  line-height: 1.4;
  white-space: nowrap;
}

[data-module="details"] .dtl-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-module="details"] .dtl-btn-primary {
  background: var(--accent);
  color: var(--ct-on-dark);
  border-color: var(--accent);
}

[data-module="details"] .dtl-btn-primary:hover {
  opacity: 0.9;
}

[data-module="details"] .dtl-btn-secondary {
  background: var(--panel-2);
  color: var(--text-primary);
  border-color: var(--border);
}

[data-module="details"] .dtl-btn-secondary:hover {
  background: var(--panel);
  border-color: var(--border-strong);
}

[data-module="details"] .dtl-btn-danger {
  background: var(--error-soft);
  color: var(--error);
  border-color: var(--error-soft);
}

[data-module="details"] .dtl-btn-danger:hover {
  opacity: 0.85;
}

[data-module="details"] .dtl-btn-sm {
  padding: 3px 8px;
  font-size: 12px;
}

/* ---- Panel form fields (scoped; inside the container) ---- */
[data-module="details"] .dtl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

[data-module="details"] .dtl-field label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

[data-module="details"] .dtl-field input,
[data-module="details"] .dtl-field select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.1s;
}

[data-module="details"] .dtl-field input:focus,
[data-module="details"] .dtl-field select:focus {
  border-color: var(--accent);
}

/* ---- Package builder (B2-2) ---- */
[data-module="details"] .dtl-pkg {
  max-width: 880px;
  margin: 0 auto;
}

[data-module="details"] .dtl-pkg-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

[data-module="details"] .dtl-pkg-name {
  flex: 1;
  min-width: 180px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.1s;
}

[data-module="details"] .dtl-pkg-name:focus {
  border-color: var(--accent);
}

[data-module="details"] .dtl-pkg-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

[data-module="details"] .dtl-pkg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

[data-module="details"] .dtl-pkg-row:last-child {
  border-bottom: none;
}

[data-module="details"] .dtl-pkg-row.selected {
  background: var(--panel-2);
}

[data-module="details"] .dtl-pkg-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

[data-module="details"] .dtl-pkg-num {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  min-width: 44px;
}

[data-module="details"] .dtl-pkg-title {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-module="details"] .dtl-pkg-count {
  margin: 10px 2px 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}

[data-module="details"] .dtl-pkg-revs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-module="details"] .dtl-pkg-rev {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}

[data-module="details"] .dtl-pkg-rev-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

[data-module="details"] .dtl-pkg-rev-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

[data-module="details"] .dtl-pkg-rev-date {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ---- Mobile responsive ---- */
@media (max-width: 768px) {
  [data-module="details"] .dtl-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  [data-module="details"] .dtl-search {
    max-width: 100%;
    flex: 1 1 150px;
    font-size: 16px; /* Prevent iOS zoom */
  }

  [data-module="details"] .dtl-body {
    flex-direction: column;
  }

  [data-module="details"] .dtl-detail-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  [data-module="details"] .dtl-import-drawer {
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  [data-module="details"] .dtl-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 640px) {
  [data-module="details"] .dtl-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  [data-module="details"] .dtl-card {
    padding: 10px;
  }

  [data-module="details"] .dtl-card-num {
    font-size: 18px;
  }

  [data-module="details"] .dtl-btn {
    min-height: 44px; /* Touch target minimum */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   Tier 2: Modal-content rules (unscoped)
   Classes used inside ctx.ui.modal({ content }) HTML strings.
   Modal HTML mounts on .strata-overlay (document.body) and has
   no data-module attribute, so scoped rules would not match.
   Prefix: d- (module-derived from "details"; matches the linter
   Tier 2 allowlist so W11 does not fire on these selectors).
   ============================================================ */

.d-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.d-field .d-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.d-field .d-input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.1s;
}

.d-field .d-input:focus {
  border-color: var(--accent);
}

/* ---- Compare-to-last-issued diff (modal content) ---- */
.d-diff {
  font-size: 13px;
  color: var(--text-primary);
}

.d-diff-sub {
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.d-diff-section {
  margin-bottom: 12px;
}

.d-diff-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
}

.d-diff-added {
  background: var(--success-soft);
  color: var(--success);
}

.d-diff-removed {
  background: var(--error-soft);
  color: var(--error);
}

.d-diff-changed {
  background: var(--warning-soft);
  color: var(--warning);
}

.d-diff-list {
  margin: 0;
  padding-left: 18px;
}

.d-diff-list li {
  margin: 2px 0;
  color: var(--text-secondary);
}

.d-diff-empty {
  margin: 0;
  color: var(--text-tertiary);
  font-style: italic;
  font-size: 12px;
}

/* ---- Promote-to-library modal ---- */
.d-promote-help {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.d-req {
  color: var(--error);
}

/* ---- Integrations (B2-3): fixture refs, redlines bridge ---- */
[data-module="details"] .dtl-bridge {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}

[data-module="details"] .dtl-bridge-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

[data-module="details"] .dtl-bridge-empty {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

[data-module="details"] .dtl-bridge-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-tertiary);
}

[data-module="details"] .dtl-bridge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

[data-module="details"] .dtl-bridge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: 12px;
}

[data-module="details"] .dtl-bridge-chip-x {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 50%;
}

[data-module="details"] .dtl-bridge-chip-x:hover {
  color: var(--error);
}

[data-module="details"] .dtl-bridge-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

[data-module="details"] .dtl-bridge-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}

[data-module="details"] .dtl-bridge-link.flagged {
  border-color: var(--warning);
  background: var(--warning-soft);
}

[data-module="details"] .dtl-bridge-link-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

[data-module="details"] .dtl-bridge-link-name {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

[data-module="details"] .dtl-bridge-link-set {
  font-size: 11px;
  color: var(--text-tertiary);
}

[data-module="details"] .dtl-bridge-flag {
  font-size: 11px;
  color: var(--warning);
  font-weight: 600;
}

[data-module="details"] .dtl-bridge-link-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

[data-module="details"] .dtl-bridge-picker {
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--panel);
}

[data-module="details"] .dtl-bridge-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

[data-module="details"] .dtl-bridge-picker .d-input {
  width: 100%;
  margin-bottom: 8px;
}

[data-module="details"] .dtl-bridge-marklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

[data-module="details"] .dtl-bridge-mark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

[data-module="details"] .dtl-bridge-mark:hover:not(:disabled) {
  border-color: var(--accent);
}

[data-module="details"] .dtl-bridge-mark:disabled {
  opacity: 0.6;
  cursor: default;
}

[data-module="details"] .dtl-bridge-mark-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--success);
  flex-shrink: 0;
}

/* ======================================================
   B3-2 -- Native drafting editor (full-height subview)
   Container-rendered under [data-module="details"] -> Tier 1 scoped.
   The calibration / underlay modal-content classes (.dtl-cal-form,
   .dtl-cal-help) mount on .strata-overlay -> Tier 2, kept UNSCOPED
   with the dtl- prefix as the leak guard.
   Colors via platform tokens only; both themes resolve.
   ====================================================== */

[data-module="details"] .dtl-draft-host {
  height: calc(100vh - 132px);
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
[data-module="details"] .dtl-draft-editor {
  /* Containing block for the layers flyout (.dtl-draft-layers). Without this
     the flyout's position:absolute anchors to the nearest positioned ancestor
     -- .strata-content in the real shell -- and lands far from the editor.
     The stage children are unaffected: they position against .dtl-draft-stage,
     which is itself position:relative. */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  overflow: hidden;
  background: var(--panel);
}

/* Toolbar (W3.7-A3: labeled File/Draw/Modify/View icon clusters -- mockup
   reference: _mockups/drafting-ui-2026-07/variant-a.html .tbar-a). */
[data-module="details"] .dtl-draft-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px 9px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  flex-shrink: 0;
}
/* One labeled cluster: a micro-label over a bordered icon row. */
[data-module="details"] .dtl-draft-tb-cluster {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
[data-module="details"] .dtl-draft-tb-grp-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-left: 3px;
}
[data-module="details"] .dtl-draft-tb-cluster-row {
  display: flex;
  align-items: center;
  /* Gate-round P2 (W3.7-A3 review): rows WRAP at narrow widths. Without this the
     row's min-content width is the whole button run, and once the editor is
     narrower than the Draw cluster the toolbar's overflow:hidden ancestor
     clips the tail buttons (datum/measure) unreachable -- pre-A3 the flat
     toolbar wrapped per-button, so narrow editors never lost tools. */
  flex-wrap: wrap;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 3px;
}
[data-module="details"] .dtl-draft-tb-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 2px;
}
/* Inside a cluster row the separator stretches to the row's full height
   (mockup .vsep) rather than a fixed 22px, since rows vary in height
   (icon buttons vs. the two-line Scale readout). */
[data-module="details"] .dtl-draft-tb-cluster-row .dtl-draft-tb-sep {
  align-self: stretch;
  height: auto;
  margin: 2px 3px;
}
[data-module="details"] .dtl-draft-tb-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-primary);
  border-radius: var(--button-radius);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}
[data-module="details"] .dtl-draft-tb-btn:hover {
  border-color: var(--border-strong);
  background: var(--row-hover);
}
[data-module="details"] .dtl-draft-tb-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Inside a cluster row, individual buttons go flat (transparent border/
   background) -- the ROW carries the visible border, mirroring the
   mockup's .ib primitive nested in a bordered .cluster-row. */
[data-module="details"] .dtl-draft-tb-cluster-row .dtl-draft-tb-btn {
  border-color: transparent;
  background: transparent;
}
/* Gate-round P3 (W3.7-A3 review): scope hover to NON-active buttons only.
   This selector (4 class-level parts) outranks .dtl-draft-tb-tool.is-active
   (3), so without :not() hovering the active tool would repaint its accent
   background with --row-hover and visually drop the armed state. */
[data-module="details"] .dtl-draft-tb-cluster-row .dtl-draft-tb-btn:not(.is-active):hover {
  border-color: transparent;
  background: var(--row-hover);
}
[data-module="details"] .dtl-draft-tb-tool.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ct-on-dark);
}
/* Disabled toolbar control (W3.6-5: grid controls before a scale is set). */
[data-module="details"] .dtl-draft-tb-btn:disabled,
[data-module="details"] .dtl-draft-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
[data-module="details"] .dtl-draft-tb-field {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
}
/* Scale readout-style control (File cluster) -- a small uppercase "Scale"
   label over the live mono value (mockup .scale-btn .lab / .mono). Kept as
   text per the W3.7-A3 brief: text-label buttons are eliminated everywhere
   EXCEPT this readout. */
[data-module="details"] .dtl-draft-tb-scale {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 10px;
  line-height: 1.25;
}
[data-module="details"] .dtl-draft-tb-scale-lab {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
[data-module="details"] .dtl-draft-tb-scale-val {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
/* W3.7-A2: the style cluster (stroke/weight/dashed) moved off the toolbar into
   the inspector's Properties tab -- see the "docked inspector" block below. */
[data-module="details"] .dtl-draft-num {
  width: 56px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 12px;
}
[data-module="details"] .dtl-draft-range { width: 90px; }
[data-module="details"] .dtl-draft-link {
  appearance: none;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ---- Docked inspector (W3.7-A2, Variant A chrome redesign) --------------
   Reference: _mockups/drafting-ui-2026-07/variant-a.html .rpanel / .rtab /
   .psec-* / .field / .control / .swatch / .switch (styling lifted; tokens
   resolve against the real platform CSS custom properties). One right-docked,
   collapsible tabbed panel: Properties | Layers | Comps | Notes. */
[data-module="details"] .dtl-draft-inspector {
  flex: 0 0 auto;
  display: flex;
  min-height: 0;
  width: 272px;
  border-left: 1px solid var(--border);
  background: var(--panel);
}
[data-module="details"] .dtl-draft-inspector.is-collapsed {
  width: 26px;
}
/* Thin edge toggle (dock handle). Full-height strip at the panel's left edge. */
[data-module="details"] .dtl-draft-insp-edge {
  flex: 0 0 auto;
  width: 20px;
  appearance: none;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
[data-module="details"] .dtl-draft-insp-edge:hover {
  background: var(--row-hover);
  color: var(--text-primary);
}
[data-module="details"] .dtl-draft-insp-edge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Chevron glyph -- points toward where the panel will go: ">" (collapse, panel
   open) vs "<" (expand, panel collapsed). */
[data-module="details"] .dtl-draft-insp-edge-glyph {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
[data-module="details"] .dtl-draft-inspector.is-collapsed .dtl-draft-insp-edge-glyph {
  transform: rotate(135deg);
}
[data-module="details"] .dtl-draft-insp-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
[data-module="details"] .dtl-draft-inspector.is-collapsed .dtl-draft-insp-main {
  display: none;
}
/* Tab bar */
[data-module="details"] .dtl-draft-insp-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--border);
}
[data-module="details"] .dtl-draft-insp-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 9px 9px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
[data-module="details"] .dtl-draft-insp-tab:hover { color: var(--text-secondary); }
[data-module="details"] .dtl-draft-insp-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
[data-module="details"] .dtl-draft-insp-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Tab bodies -- one visible at a time (display toggled by syncInspectorState). */
[data-module="details"] .dtl-draft-insp-panels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
[data-module="details"] .dtl-draft-insp-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
}

/* Properties tab -- section header (Selection vs Defaults mode). */
[data-module="details"] .dtl-draft-psec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
[data-module="details"] .dtl-draft-psec-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
[data-module="details"] .dtl-draft-psec-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  /* Defaults look (warning-tinted); .is-selection flips to accent. */
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid transparent;
}
[data-module="details"] .dtl-draft-psec-badge.is-selection {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}
[data-module="details"] .dtl-draft-psec-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0 0 14px;
  line-height: 1.45;
}

/* Fields */
[data-module="details"] .dtl-draft-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 13px;
}
[data-module="details"] .dtl-draft-field-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
[data-module="details"] .dtl-draft-field-hint {
  font-size: 10.5px;
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.4;
}
[data-module="details"] .dtl-draft-row2 {
  display: flex;
  gap: 10px;
}
[data-module="details"] .dtl-draft-row2 > .dtl-draft-field {
  flex: 1;
}
/* Full-width control (select) inside a field. .dtl-draft-num stays compact. */
[data-module="details"] .dtl-draft-control {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  color: var(--text-primary);
  padding: 0 10px;
  font-size: 12.5px;
}
[data-module="details"] .dtl-draft-control-select {
  width: 100%;
  appearance: none;
  cursor: pointer;
}
[data-module="details"] .dtl-draft-control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Dashed toggle switch (mockup .switch). */
[data-module="details"] .dtl-draft-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  font-size: 12.5px;
  color: var(--text-primary);
  cursor: pointer;
}
[data-module="details"] .dtl-draft-switch input { margin: 0; }
/* ===================================================================
   W3.7-2 semantic colour palette. Module-scoped, per-theme custom
   properties: dark values (default) are brighter so they read on the dark
   canvas; light values ([data-theme="light"]) are darker so they read on the
   white sheet. 'ink' is NOT a token -- it uses --text-primary (the untouched
   default path). The .dtl-draft-c-* element classes, .dtl-draft-sw-* swatch
   fills, and .dtl-draft-swbg-* layer dots all read these tokens; the PDF /
   thumbnail folds carry their OWN fixed print RGB (draft-pdf-render COLOR_RGB /
   draft-editor THUMB_COLOR_HEX) -- screen is theme-aware, plot is not.
   =================================================================== */
[data-module="details"] {
  --dtl-draft-red: #ff6b6b;
  --dtl-draft-blue: #5b9dff;
  --dtl-draft-green: #4ecb71;
  --dtl-draft-orange: #ffa94d;
  --dtl-draft-magenta: #e879d6;
  --dtl-draft-cyan: #4dd0e1;
  --dtl-draft-gray: #9aa0a6;
}
[data-theme="light"] [data-module="details"] {
  --dtl-draft-red: #cc1c1c;
  --dtl-draft-blue: #1c52bf;
  --dtl-draft-green: #0d8033;
  --dtl-draft-orange: #b35c00;
  --dtl-draft-magenta: #a3178a;
  --dtl-draft-cyan: #0d7d94;
  --dtl-draft-gray: #6b7076;
}
/* Element colour classes (set on the linework <g>): each sets the
   --dtl-el-color custom property that the base linework classes read for
   stroke/fill (so 'ink'/absent keeps the untouched --text-primary path and a
   selected element still overrides to --accent by specificity). */
[data-module="details"] .dtl-draft-c-red { --dtl-el-color: var(--dtl-draft-red); }
[data-module="details"] .dtl-draft-c-blue { --dtl-el-color: var(--dtl-draft-blue); }
[data-module="details"] .dtl-draft-c-green { --dtl-el-color: var(--dtl-draft-green); }
[data-module="details"] .dtl-draft-c-orange { --dtl-el-color: var(--dtl-draft-orange); }
[data-module="details"] .dtl-draft-c-magenta { --dtl-el-color: var(--dtl-draft-magenta); }
[data-module="details"] .dtl-draft-c-cyan { --dtl-el-color: var(--dtl-draft-cyan); }
[data-module="details"] .dtl-draft-c-gray { --dtl-el-color: var(--dtl-draft-gray); }

/* Colour swatch strip (Properties tab): a BYLAYER chip + one swatch button per
   palette name. */
[data-module="details"] .dtl-draft-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
[data-module="details"] .dtl-draft-swatch {
  appearance: none;
  cursor: pointer;
  padding: 0;
}
[data-module="details"] .dtl-draft-swatch-bylayer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: var(--panel-2);
}
[data-module="details"] .dtl-draft-swatch-bylayer.is-active,
[data-module="details"] .dtl-draft-swatch.is-active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
/* Colour dot swatches (one per palette name). */
[data-module="details"] .dtl-draft-sw-ink,
[data-module="details"] .dtl-draft-sw-red,
[data-module="details"] .dtl-draft-sw-blue,
[data-module="details"] .dtl-draft-sw-green,
[data-module="details"] .dtl-draft-sw-orange,
[data-module="details"] .dtl-draft-sw-magenta,
[data-module="details"] .dtl-draft-sw-cyan,
[data-module="details"] .dtl-draft-sw-gray {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
}
[data-module="details"] .dtl-draft-sw-ink { background: var(--text-primary); }
[data-module="details"] .dtl-draft-sw-red { background: var(--dtl-draft-red); }
[data-module="details"] .dtl-draft-sw-blue { background: var(--dtl-draft-blue); }
[data-module="details"] .dtl-draft-sw-green { background: var(--dtl-draft-green); }
[data-module="details"] .dtl-draft-sw-orange { background: var(--dtl-draft-orange); }
[data-module="details"] .dtl-draft-sw-magenta { background: var(--dtl-draft-magenta); }
[data-module="details"] .dtl-draft-sw-cyan { background: var(--dtl-draft-cyan); }
[data-module="details"] .dtl-draft-sw-gray { background: var(--dtl-draft-gray); }
/* Per-layer colour dot fills (Layers tab swatch indicator). */
[data-module="details"] .dtl-draft-swbg-red { background: var(--dtl-draft-red); }
[data-module="details"] .dtl-draft-swbg-blue { background: var(--dtl-draft-blue); }
[data-module="details"] .dtl-draft-swbg-green { background: var(--dtl-draft-green); }
[data-module="details"] .dtl-draft-swbg-orange { background: var(--dtl-draft-orange); }
[data-module="details"] .dtl-draft-swbg-magenta { background: var(--dtl-draft-magenta); }
[data-module="details"] .dtl-draft-swbg-cyan { background: var(--dtl-draft-cyan); }
[data-module="details"] .dtl-draft-swbg-gray { background: var(--dtl-draft-gray); }
[data-module="details"] .dtl-draft-swbg-ink { background: var(--text-primary); }
/* Compact per-layer colour select. */
[data-module="details"] .dtl-draft-layer-color { flex: 0 0 auto; max-width: 74px; }
/* Font-size row: Title/Note preset chips + numeric override. */
[data-module="details"] .dtl-draft-font-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-module="details"] .dtl-draft-chip-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-primary);
  border-radius: var(--button-radius);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
[data-module="details"] .dtl-draft-chip-btn:hover { border-color: var(--border-strong); }
/* Wide action button (Edit label / Edit text affordances). */
[data-module="details"] .dtl-draft-btn-wide {
  appearance: none;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-primary);
  border-radius: var(--button-radius);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
[data-module="details"] .dtl-draft-btn-wide:hover { border-color: var(--border-strong); }
[data-module="details"] .dtl-draft-hsep {
  height: 1px;
  background: var(--border);
  margin: 4px 0 12px;
}
[data-module="details"] .dtl-draft-btn-danger {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--error);
  border-radius: var(--button-radius);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
[data-module="details"] .dtl-draft-btn-danger:hover {
  border-color: var(--error);
  background: var(--row-hover);
}
/* Defaults-mode explainer caption (mockup .sel-caption). */
[data-module="details"] .dtl-draft-psec-caption {
  margin-top: 6px;
  padding: 8px 10px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-tertiary);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
}
[data-module="details"] .dtl-draft-psec-caption b { color: var(--text-secondary); }
[data-module="details"] .dtl-draft-psec-caption .dtl-draft-caption-em { color: var(--warning); }

/* ---- CAD status bar (W3.7-A1, Variant A chrome redesign) --------------
   Reference: _mockups/drafting-ui-2026-07/variant-a.html .statusbar / .pill
   / .status-readout (tokens lifted verbatim -- they already resolve against
   the real platform CSS custom properties). Bottom bar: left = snap/grid
   toggle pills, center = the single-line ellipsized hint, right = scale
   chip + element count + active-layer chip. */
[data-module="details"] .dtl-draft-statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  min-height: 34px;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-secondary);
  flex-wrap: nowrap;
}
[data-module="details"] .dtl-draft-statusbar-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
[data-module="details"] .dtl-draft-statusbar-center {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
[data-module="details"] .dtl-draft-statusbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
[data-module="details"] .dtl-draft-status-hint {
  display: block;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="details"] .dtl-draft-status-scale,
[data-module="details"] .dtl-draft-status-count {
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Toggle pill (osnap / angle lock / grid / grid snap). */
[data-module="details"] .dtl-draft-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
[data-module="details"] .dtl-draft-pill.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
[data-module="details"] .dtl-draft-pill:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
[data-module="details"] .dtl-draft-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
[data-module="details"] .dtl-draft-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
  flex: 0 0 auto;
}
/* Select-only pill (angle increment / grid spacing) -- a label, not a
   toggle: no is-on state, the embedded <select> carries the value. */
[data-module="details"] .dtl-draft-pill-select {
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  display: inline-flex;
  align-items: center;
}
[data-module="details"] .dtl-draft-pill-select select {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
[data-module="details"] .dtl-draft-pill-select:has(select:disabled) {
  opacity: 0.45;
}
[data-module="details"] .dtl-draft-pill-select select:disabled {
  cursor: not-allowed;
}
/* Osnap pill + its per-type-config caret + popover, grouped so the popover
   can anchor (position:absolute) to the PAIR, not just the caret. */
[data-module="details"] .dtl-draft-pill-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
[data-module="details"] .dtl-draft-pill-caret {
  appearance: none;
  height: 22px;
  min-width: 0;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-tertiary);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
[data-module="details"] .dtl-draft-pill-caret.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ct-on-dark);
}
/* Popover opens UPWARD -- it hangs off a BOTTOM status bar, so anchoring
   below (like the old toolbar-hosted version) would run off the viewport. */
[data-module="details"] .dtl-draft-osnap-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 0;
  z-index: 7;
  min-width: 168px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
[data-module="details"] .dtl-draft-osnap-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--button-radius);
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}
[data-module="details"] .dtl-draft-osnap-pop-row:hover {
  background: var(--row-hover);
}
[data-module="details"] .dtl-draft-osnap-pop-row input {
  margin: 0;
  accent-color: var(--accent);
}

/* Active-layer chip (right segment) -- click opens the (unchanged, A1) Layers
   flyout. The swatch uses --accent as a generic "active" indicator; true
   per-layer color arrives with W3.7-2. */
[data-module="details"] .dtl-draft-layer-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 1px 8px 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
[data-module="details"] .dtl-draft-layer-chip.is-active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
[data-module="details"] .dtl-draft-layer-chip-sw {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
  flex: 0 0 auto;
}

/* Lock / read-only banner */
[data-module="details"] .dtl-draft-lockbanner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Stage + layers */
/* W3.7-A2: the body row -- stage (flexes) + docked inspector (fixed width).
   Sits between the toolbar/banner and the bottom-pinned status bar in the
   editor's flex column. */
[data-module="details"] .dtl-draft-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  min-width: 0;
}
[data-module="details"] .dtl-draft-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
  touch-action: none;
}
[data-module="details"] .dtl-draft-underlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;
}
/* Drafting grid (W3.6-5): a screen-space SVG layer BENEATH the underlay +
   linework. Non-interactive; the group opacity is set inline by renderGrid()
   for the LOD fade. --grid-line resolves per theme (see the token block). */
[data-module="details"] .dtl-draft-gridsvg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
[data-module="details"] .dtl-draft-gridlines line {
  stroke: var(--border-strong);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
[data-module="details"] .dtl-draft-engine {
  /* The engine's buildStage() forces this element to position:relative inline,
     so we cannot rely on absolute inset:0 to stretch it -- give it explicit
     100% width/height (resolved against the definite-height stage) instead. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
[data-module="details"] .dtl-draft-chrome {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
[data-module="details"] .dtl-draft-selbox {
  position: absolute;
  border: 1px solid var(--accent);
  pointer-events: none;
}
[data-module="details"] .dtl-draft-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px;
  background: var(--panel);
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  pointer-events: auto;
  cursor: nwse-resize;
}
[data-module="details"] .dtl-draft-marquee {
  position: absolute;
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  pointer-events: none;
}
[data-module="details"] .dtl-draft-grip {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--accent);
  border: 1.5px solid var(--panel);
  border-radius: 50%;
  pointer-events: auto;
  cursor: move;
}
/* Rotate grip (B3-5a): a round handle above the selection box. */
[data-module="details"] .dtl-draft-handle-rotate {
  width: 11px;
  height: 11px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--panel);
  cursor: grab;
}
[data-module="details"] .dtl-draft-snapguides {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
[data-module="details"] .dtl-draft-guide {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.85;
}
[data-module="details"] .dtl-draft-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
[data-module="details"] .dtl-draft-overlay.is-authoring {
  cursor: crosshair;
}
[data-module="details"] .dtl-draft-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Element linework (engine SVG overlay, world space) */
[data-module="details"] .dtl-draft-poly {
  stroke: var(--dtl-el-color, var(--text-primary));
  fill: none;
}
[data-module="details"] .dtl-draft-poly.is-selected {
  stroke: var(--accent);
}
/* Datum pin (W3.6-5): a non-printing reference marker. A warm/secondary accent
   so it reads as a construction aid, distinct from linework + the snap accent. */
[data-module="details"] .dtl-draft-datum {
  stroke: var(--warning);
  stroke-width: 1.4;
  fill: none;
}
[data-module="details"] .dtl-draft-datum.is-selected {
  stroke: var(--accent);
}

/* Authoring preview marks (screen space) */
[data-module="details"] .dtl-draft-rubber {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
}
[data-module="details"] .dtl-draft-rubber.committed {
  stroke: var(--text-primary);
}
[data-module="details"] .dtl-draft-rubber.preview {
  stroke-dasharray: 5 4;
}
[data-module="details"] .dtl-draft-rubber.calib {
  stroke-dasharray: 5 4;
  stroke-width: 1.6;
}
[data-module="details"] .dtl-draft-vertex {
  fill: var(--accent);
  stroke: var(--panel);
  stroke-width: 1;
}
[data-module="details"] .dtl-draft-snap {
  stroke: var(--accent);
  stroke-width: 1.6;
  fill: none;
}
/* Extension osnap (B3-5d): dashed CAD inference line + a dashed tick marker. */
[data-module="details"] .dtl-draft-inference {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.7;
  fill: none;
}
[data-module="details"] .dtl-draft-snap-ext {
  stroke-dasharray: 2 2;
}
/* Edit-verb pick highlight (W3.6-4): the picked cutter / boundary / offset
   source, drawn heavier than the rubber preview so the next click's target is
   unmistakable. --accent resolves per theme. */
[data-module="details"] .dtl-draft-verb-hi {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  opacity: 0.85;
}
[data-module="details"] .dtl-draft-measure {
  fill: var(--text-primary);
  stroke: var(--bg);
  stroke-width: 3;
  paint-order: stroke;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
}

/* Floating typed-distance input */
[data-module="details"] .dtl-draft-typed {
  position: absolute;
  z-index: 6;
  width: 92px;
  padding: 3px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 12px;
  pointer-events: auto;
  box-shadow: var(--shadow-sm);
}
[data-module="details"] .dtl-draft-typed:disabled {
  border-color: var(--border);
  color: var(--text-tertiary);
  opacity: 0.7;
}

/* ---- B3-3 kinds: icon tool buttons, pattern select, note input ---- */
[data-module="details"] .dtl-draft-tb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
}
[data-module="details"] .dtl-draft-tb-icon svg { display: block; }
[data-module="details"] .dtl-draft-select {
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 12px;
}
[data-module="details"] .dtl-draft-note {
  position: absolute;
  z-index: 6;
  width: 180px;
  padding: 3px 6px;
  border: 1px solid var(--accent);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 12px;
  pointer-events: auto;
  box-shadow: var(--shadow-sm);
}

/* ---- B3-3 element linework (engine SVG overlay, world space) ---- */
[data-module="details"] .dtl-draft-text {
  fill: var(--dtl-el-color, var(--text-primary));
  font-family: inherit;
}
[data-module="details"] .dtl-draft-text.is-selected { fill: var(--accent); }
[data-module="details"] .dtl-draft-leaderline {
  stroke: var(--dtl-el-color, var(--text-primary));
  fill: var(--dtl-el-color, var(--text-primary));
  stroke-linejoin: round;
  stroke-linecap: round;
}
[data-module="details"] .dtl-draft-leaderline.is-selected {
  stroke: var(--accent);
  fill: var(--accent);
}
[data-module="details"] .dtl-draft-dim {
  stroke: var(--dtl-el-color, var(--text-secondary));
  fill: none;
  stroke-linecap: round;
}
[data-module="details"] .dtl-draft-dim.is-selected { stroke: var(--accent); }
[data-module="details"] .dtl-draft-dimtext {
  fill: var(--dtl-el-color, var(--text-primary));
  stroke: var(--bg);
  stroke-width: 3;
  paint-order: stroke;
  font-weight: 600;
  font-family: inherit;
}
[data-module="details"] .dtl-draft-dimtext.is-selected { fill: var(--accent); }
[data-module="details"] .dtl-draft-hatch {
  stroke: var(--dtl-el-color, var(--text-secondary));
}
[data-module="details"] .dtl-draft-hatch.is-selected { stroke: var(--accent); }
/* Color only -- stroke-width comes from the render model's hatchLineWeightPt
   op field (set as an attribute by appendHatchNodes; W3.6-2 fix round). The
   pattern lines + dots inherit --dtl-el-color from the element <g> (W3.7-2), so
   a coloured hatch's fill matches its boundary. */
[data-module="details"] .dtl-draft-hatch-line {
  stroke: var(--dtl-el-color, var(--text-secondary));
  fill: none;
}
[data-module="details"] .dtl-draft-hatch-fill { fill: var(--dtl-el-color, var(--text-secondary)); }

/* ---- B3-3 layers panel (side flyout) ---- */
/* W3.7-A2: the Layers flyout is now the inspector's Layers tab body -- the
   container styling (padding/scroll) is provided by .dtl-draft-insp-body; only
   the head/list/row child styles below still apply (they set no positioning). */
[data-module="details"] .dtl-draft-layers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
[data-module="details"] .dtl-draft-layers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-module="details"] .dtl-draft-layer-row {
  display: flex;
  align-items: center;
  /* W3.7-A2: the row now lives in the 272px dock (was a 300px flyout); allow it
     to wrap so the name field never gets crushed to zero when the weight
     select + Shown/Unlocked/delete controls run out of horizontal room. */
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
}
[data-module="details"] .dtl-draft-layer-row.is-active {
  border-color: var(--accent);
  background: var(--row-hover);
}
/* W3.7-A2: reserved per-layer colour swatch (BYLAYER dot; W3.7-2 wires it). */
[data-module="details"] .dtl-draft-layer-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--text-primary);
  border: 1px solid var(--border-strong);
}
[data-module="details"] .dtl-draft-layer-name {
  flex: 1 1 70px;
  min-width: 70px;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 12px;
}
/* Plot weight per layer (W3.6-2 DSP-7) -- narrower than the general
   .dtl-draft-select (toolbar) so it fits the layer row alongside the name
   field and the visible/locked/delete buttons; single-letter option labels
   (title carries the full word) keep this compact. */
[data-module="details"] .dtl-draft-layer-weight {
  flex: 0 0 auto;
  width: 34px;
  padding: 2px 2px;
  font-size: 10px;
  text-align: center;
}
[data-module="details"] .dtl-draft-layer-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-tertiary);
  border-radius: var(--button-radius);
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
}
[data-module="details"] .dtl-draft-layer-btn.is-on {
  color: var(--text-primary);
  border-color: var(--border-strong);
}
[data-module="details"] .dtl-draft-layer-btn:disabled { opacity: 0.5; cursor: default; }

/* Native-draft representation block in the detail panel */
[data-module="details"] .dtl-nativedraft-repr { margin-bottom: 8px; }

/* ---- Calibration / underlay modal content (Tier 2: UNSCOPED) ---- */
.dtl-cal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dtl-cal-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.dtl-cal-form input,
.dtl-cal-form select,
.dtl-cal-form textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 16px;
}
/* B3-5c: multiline note editing (double-click edit keeps newlines). */
.dtl-cal-form textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.35;
  font-family: inherit;
}
.dtl-cal-help {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
}

/* ---- B3-5c multiline text input (the note authoring field is a textarea) ---- */
[data-module="details"] textarea.dtl-draft-note {
  resize: none;
  min-height: 22px;
  line-height: 1.3;
  font-family: inherit;
}

/* ---- B3-5c reuse flyouts (D-note palette + components) -- mirror layers ---- */
/* W3.7-A2: the D-note / component flyouts are now the inspector's Notes / Comps
   tab bodies -- container styling comes from .dtl-draft-insp-body; only the
   head/list/item child styles below still apply (no positioning). */
[data-module="details"] .dtl-draft-reuse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
[data-module="details"] .dtl-draft-reuse-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-module="details"] .dtl-draft-reuse-list li {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
[data-module="details"] .dtl-draft-reuse-item {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
  text-align: left;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-primary);
  border-radius: var(--button-radius);
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
}
[data-module="details"] .dtl-draft-reuse-item:hover {
  border-color: var(--accent);
  background: var(--row-hover);
}
[data-module="details"] .dtl-draft-reuse-code {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--accent);
  font-size: 11px;
}
[data-module="details"] .dtl-draft-reuse-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}
[data-module="details"] .dtl-draft-reuse-hint,
[data-module="details"] .dtl-draft-reuse-empty {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 8px 0 0;
}
[data-module="details"] .dtl-draft-reuse-del {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-tertiary);
  border-radius: var(--button-radius);
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
}
[data-module="details"] .dtl-draft-reuse-del:hover {
  border-color: var(--error);
  color: var(--error);
}

/* =========================================================
   DL-2 Details Reference Library -- browse view + inspect overlay
   Adapted from _mockups/details-library-2026-07/. Tokens only, both
   themes. Facet rail on the RIGHT via the dam row-reverse precedent.
   ========================================================= */

/* ---- Header active state (Library button peer of Import/Package) ---- */
[data-module="details"] .dtl-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}

/* ---- Library area (peer flex child of dtl-body) ---- */
[data-module="details"] .dtl-library.hidden { display: none; }
[data-module="details"] .dtl-register.hidden { display: none; }
[data-module="details"] .dtl-library {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
/* =========================================================
   DL-3 Consume path: inspect CTA + register chip + picker drawer
   ========================================================= */

/* ---- Inline-SVG glyphs (ASCII-only source: close X / refresh / arrow are
   SVG, not unicode chars). */
[data-module="details"] .dtl-cmp-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-module="details"] .dtl-card-update,
[data-module="details"] .dtl-cmp-adv {
  gap: 5px;
}

/* ---- Register "from library" chip ---- */
[data-module="details"] .dtl-card-libchip {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  cursor: pointer;
}
[data-module="details"] .dtl-card-libchip:hover { border-color: var(--accent); }
[data-module="details"] .dtl-card-libchip.is-dangling {
  background: var(--panel-2);
  color: var(--text-tertiary);
  border-color: var(--border);
  cursor: default;
}

/* ---- DL-4 register "Update available" badge (amber advisory tone) ---- */
[data-module="details"] .dtl-card.dtl-card-has-update { border-color: var(--warning); }
[data-module="details"] .dtl-card-update {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning);
  cursor: pointer;
}
[data-module="details"] .dtl-card-update:hover { filter: brightness(1.05); }

/* ==========================================================================
   DL-4 Compare overlay (body-mounted; comma-fallback selector because a
   body-mounted [data-module] root is not matched by the descendant combinator
   -- ui.md body-mount lesson). Sits at 4550, above the inspect overlay (4500)
   and picker (4400) -- but the single-overlay discipline means only one is
   ever open. Amber advisory tone; both themes via tokens only.
   ========================================================================== */
[data-module="details"] .dtl-cmp-backdrop,
.dtl-cmp-backdrop[data-module="details"] {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: 4550;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  animation: dtl-lib-ov-fade 0.15s ease-out;
}
[data-module="details"] .dtl-cmp {
  width: 860px;
  max-width: 100%;
  max-height: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-module="details"] .dtl-cmp-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
[data-module="details"] .dtl-cmp-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
[data-module="details"] .dtl-cmp-adv {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning);
}
[data-module="details"] .dtl-cmp-x {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
[data-module="details"] .dtl-cmp-x:hover { color: var(--text-primary); border-color: var(--border-strong); }
[data-module="details"] .dtl-cmp-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: auto;
}
[data-module="details"] .dtl-cmp-col { padding: 16px 18px; }
[data-module="details"] .dtl-cmp-col:first-child {
  border-right: 1px solid var(--border);
  background: var(--panel-2);
}
[data-module="details"] .dtl-cmp-col-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
[data-module="details"] .dtl-cmp-tag { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
[data-module="details"] .dtl-cmp-tag.yours { background: var(--panel); color: var(--text-secondary); border: 1px solid var(--border-strong); }
[data-module="details"] .dtl-cmp-tag.latest { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
[data-module="details"] .dtl-cmp-rev { font-size: 12px; color: var(--text-tertiary); }
[data-module="details"] .dtl-cmp-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-module="details"] .dtl-cmp-thumb.is-latest { border-color: var(--accent-line); }
[data-module="details"] .dtl-cmp-thumb.is-empty { color: var(--text-tertiary); }
[data-module="details"] .dtl-cmp-thumb-img { width: 100%; height: 100%; object-fit: contain; }
[data-module="details"] .dtl-cmp-thumb-none { font-size: 12px; }

[data-module="details"] .dtl-cmp-diff { border-top: 1px solid var(--border); padding: 14px 18px; overflow-y: auto; }
[data-module="details"] .dtl-cmp-diff-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  font-weight: 700;
  margin-bottom: 10px;
}
[data-module="details"] .dtl-cmp-diff-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: baseline;
}
[data-module="details"] .dtl-cmp-diff-row.is-unavail { grid-template-columns: 130px 1fr; }
[data-module="details"] .dtl-cmp-diff-k { color: var(--text-tertiary); font-size: 12px; }
[data-module="details"] .dtl-cmp-diff-old { color: var(--text-secondary); word-break: break-word; }
[data-module="details"] .dtl-cmp-diff-new { color: var(--text-primary); word-break: break-word; }
[data-module="details"] .dtl-cmp-diff-libonly { color: var(--text-secondary); word-break: break-word; }
[data-module="details"] .dtl-cmp-diff-row.is-changed .dtl-cmp-diff-old { text-decoration: line-through; opacity: 0.7; }
[data-module="details"] .dtl-cmp-diff-row.is-changed .dtl-cmp-diff-new { color: var(--success); font-weight: 600; }
[data-module="details"] .dtl-cmp-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
[data-module="details"] .dtl-cmp-note-l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
[data-module="details"] .dtl-cmp-note-v { font-size: 13px; color: var(--text-primary); }
[data-module="details"] .dtl-cmp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
[data-module="details"] .dtl-cmp-foot-note { font-size: 12px; color: var(--text-tertiary); flex: 1; }
[data-module="details"] .dtl-cmp-btn {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--button-radius);
  cursor: pointer;
}
[data-module="details"] .dtl-cmp-btn.ghost { border: 1px solid var(--border); background: var(--panel); color: var(--text-secondary); }
[data-module="details"] .dtl-cmp-btn.ghost:hover { border-color: var(--border-strong); color: var(--text-primary); }
[data-module="details"] .dtl-cmp-btn.primary { border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); }
[data-module="details"] .dtl-cmp-btn.primary:hover { filter: brightness(1.05); }

@media (max-width: 640px) {
  [data-module="details"] .dtl-cmp-body { grid-template-columns: 1fr 1fr; }
  [data-module="details"] .dtl-cmp-col { padding: 12px; }
  [data-module="details"] .dtl-cmp-diff-row { grid-template-columns: 110px 1fr; }
  [data-module="details"] .dtl-cmp-diff-row.is-changed { grid-template-columns: 1fr; gap: 2px; }
  [data-module="details"] .dtl-cmp-diff-row.is-changed .dtl-cmp-diff-old { display: none; }
  [data-module="details"] .dtl-cmp-foot { flex-wrap: wrap; }
  [data-module="details"] .dtl-cmp-foot-note { flex-basis: 100%; }
  [data-module="details"] .dtl-cmp-btn { flex: 1; text-align: center; }
}

/* ---- DL-5 bulk multi-select promote (register) ---- */
/* Corner tick-box, shown on promotable cards. Subtle until the card is
   selected or hovered; filled accent when ticked. */
[data-module="details"] .dtl-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s, background 0.1s, color 0.1s, border-color 0.1s;
}
[data-module="details"] .dtl-card:hover .dtl-card-check,
[data-module="details"] .dtl-card.is-selected .dtl-card-check,
[data-module="details"] .dtl-grid.is-selecting .dtl-card-check {
  opacity: 1;
}
[data-module="details"] .dtl-card-check:hover { border-color: var(--accent); color: var(--accent); }
/* Touch devices have no hover to reveal the check (the dam precedent,
   modules/dam/index.css @media hover:none block); keyboard users get it
   on focus-visible. [DL-5 round-2 P2] */
@media (hover: none) {
  [data-module="details"] .dtl-card-check { opacity: 1; }
}
[data-module="details"] .dtl-card-check:focus-visible {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
}
[data-module="details"] .dtl-card.is-selected {
  border-color: var(--accent);
  background: var(--panel-2);
}
[data-module="details"] .dtl-card.is-selected .dtl-card-check {
  background: var(--accent);
  color: var(--ct-on-dark);
  border-color: var(--accent);
}

/* Selection action bar above the grid (only while something is ticked). */
[data-module="details"] .dtl-selbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--accent-soft);
}
[data-module="details"] .dtl-selbar-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 4px;
}
[data-module="details"] .dtl-selbar-promote { margin-left: auto; }

/* Queue progress line at the top of each bulk-promote modal step. */
.d-promote-progress {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 640px) {
  [data-module="details"] .dtl-selbar-promote { margin-left: 0; flex-basis: 100%; }
}