/*
  Professional Industrial UI — workspace migration layer.
  The rules deliberately use only semantic tokens.  Existing route markup and
  business workflows stay intact while the screens adopt the same dense,
  production-oriented visual language as Field mode.
*/

.workspace-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ui-space-4);
  margin-bottom: var(--ui-space-4);
  padding-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--border);
}

.workspace-page-header h1 {
  margin: var(--ui-space-1) 0 0;
  color: var(--text-primary);
  font-size: clamp(25px, 2.6vw, 32px);
  line-height: 1.15;
}

.workspace-page-header p {
  max-width: 760px;
  margin: var(--ui-space-1) 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.workspace-page-header .button-row {
  justify-content: flex-end;
}

.workspace-filter-bar,
.workspace-section,
.workspace-dense-registry,
.workspace-table-surface {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

.workspace-filter-bar {
  display: grid;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-4);
  padding: var(--ui-space-3);
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-lg);
}

.workspace-filter-bar .actions,
.workspace-filter-bar .button-row {
  align-self: end;
}

.workspace-filter-bar label,
.workspace-section label,
.workspace-dense-registry label {
  color: var(--text-primary);
}

.workspace-filter-bar input,
.workspace-filter-bar select,
.workspace-filter-bar textarea,
.workspace-section input,
.workspace-section select,
.workspace-section textarea,
.workspace-dense-registry input,
.workspace-dense-registry select,
.workspace-dense-registry textarea {
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
}

.workspace-dense-registry {
  display: grid;
  gap: var(--ui-space-2);
}

.workspace-dense-registry .joint,
.workspace-dense-registry .request-card,
.workspace-dense-registry .queue-card,
.workspace-dense-registry .list > a {
  min-height: 60px;
  padding: var(--ui-space-3);
  border-color: var(--border);
  border-radius: var(--ui-radius-md);
  background: var(--surface);
  box-shadow: none;
}

.workspace-dense-registry .joint:hover,
.workspace-dense-registry .request-card:hover,
.workspace-dense-registry .queue-card:hover,
.workspace-dense-registry .list > a:hover {
  border-color: var(--border-focus);
  background: var(--surface-interactive);
}

.workspace-dense-registry .joint:focus-visible,
.workspace-dense-registry .request-card:focus-visible,
.workspace-dense-registry .queue-card:focus-visible,
.workspace-dense-registry .list > a:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--ui-focus-ring);
}

.workspace-dense-registry .joint p,
.workspace-dense-registry .request-card span,
.workspace-dense-registry .queue-head small,
.workspace-dense-registry .list > a span {
  color: var(--text-secondary);
}

.workspace-table-surface,
.workspace-dense-registry .joints-table-wrap,
.workspace-dense-registry .summary-table-wrap,
.workspace-dense-registry .ndt-selection-wrap,
.workspace-dense-registry .welder-table-wrap,
.workspace-dense-registry .shift-existing-list,
.workspace-dense-registry .shift-new-table {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-lg);
  background: var(--surface);
}

.workspace-table-surface table,
.workspace-dense-registry table {
  color: var(--text-primary);
}

.workspace-table-surface thead th,
.workspace-dense-registry thead th,
.workspace-dense-registry .summary-table th,
.workspace-dense-registry .joints-table th,
.workspace-dense-registry .welder-table th,
.workspace-dense-registry .ndt-selection-table th {
  border-bottom-color: var(--border);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

.workspace-table-surface tbody td,
.workspace-dense-registry tbody td,
.workspace-dense-registry .summary-table td,
.workspace-dense-registry .joints-table td,
.workspace-dense-registry .welder-table td,
.workspace-dense-registry .ndt-selection-table td {
  border-bottom-color: var(--border);
  background: var(--surface);
}

.workspace-table-surface tbody tr:hover td,
.workspace-dense-registry tbody tr:hover td,
.workspace-dense-registry .summary-table tbody tr:hover td,
.workspace-dense-registry .joints-table tbody tr:hover td,
.workspace-dense-registry .welder-table tbody tr:hover td,
.workspace-dense-registry .ndt-selection-table tbody tr:hover td {
  background: var(--surface-interactive);
}

.workspace-table-surface tbody tr:focus-within td,
.workspace-dense-registry tbody tr:focus-within td {
  background: var(--surface-selected);
}

.workspace-filter-toggle {
  display: none;
}

.workspace-mobile-filter-open,
.workspace-mobile-directory-create,
.joints-mobile-list {
  display: none;
}

.workspace-filter-bar.workspace-sheet-source--open {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.workspace-filter-bar.workspace-sheet-source--open .line-navigator-layout {
  display: grid;
  gap: var(--ui-space-3);
}

.workspace-filter-bar.workspace-sheet-source--open .line-refiners {
  border-color: var(--border);
  border-radius: var(--ui-radius-md);
  background: var(--surface-subtle);
}

.workspace-empty {
  max-width: 560px;
  padding: var(--ui-space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--ui-radius-lg);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  text-align: left;
}

.workspace-empty b {
  display: block;
  margin-bottom: var(--ui-space-1);
  color: var(--text-primary);
}

.workspace-empty p {
  margin: 0;
  color: var(--text-secondary);
}

.workspace-status,
.weld-status,
.method-chip,
.queue-deadline,
.badge {
  border: 1px solid currentColor;
  background: var(--surface-subtle);
}

.weld-status.welded,
.badge.confirmed,
.badge.welding-completed,
.ndt-result-accepted {
  color: var(--state-success);
}

.weld-status.unwelded,
.badge.welding-planned {
  color: var(--state-neutral);
}

.badge.proposed,
.badge.welding-in_progress,
.queue-deadline,
.ndt-item-status {
  color: var(--state-warning);
}

.method-chip,
.queue-deadline:not(.overdue) {
  color: var(--state-info);
}

.queue-deadline.overdue,
.ndt-result-rejected,
.ndt-item-status.rejected {
  color: var(--state-danger);
}

.workspace-section .section-heading,
.workspace-dense-registry .section-heading {
  margin-bottom: 0;
}

.workspace-section .section-heading p,
.workspace-dense-registry .section-heading p {
  color: var(--text-secondary);
}

.workspace-section .section-heading h2,
.workspace-dense-registry .section-heading h2 {
  color: var(--text-primary);
}

.workspace-section .form-grid,
.workspace-section .welder-create,
.workspace-section .welder-import-form,
.workspace-section .ndt-request-meta,
.workspace-section .assignment-form,
.workspace-section .queue-result-fields {
  align-items: end;
}

.workspace-section .button,
.workspace-page-header .button,
.workspace-dense-registry .button {
  min-height: var(--ui-control-height);
}

/* Existing workspace templates adopt the layer through their established
   semantic landmarks. This keeps all legacy routes functional while avoiding
   another set of page-specific component implementations. */
.page:has(.summary-register) > .heading,
.page:has(.registry-filter-panel) > .heading,
.page:has(.joint-list) > .heading,
.page:has(.ndt-batch-panel) > .heading,
.page:has(.ndt-queue) > .heading,
.page:has(.welder-table) > .heading,
.page:has(#welding-shift-form) > .heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ui-space-4);
  margin-bottom: var(--ui-space-4);
  padding-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--border);
}

.page:has(.summary-register) > .heading h1,
.page:has(.registry-filter-panel) > .heading h1,
.page:has(.joint-list) > .heading h1,
.page:has(.ndt-batch-panel) > .heading h1,
.page:has(.ndt-queue) > .heading h1,
.page:has(.welder-table) > .heading h1,
.page:has(#welding-shift-form) > .heading h1 {
  color: var(--text-primary);
  font-size: clamp(25px, 2.6vw, 32px);
  line-height: 1.15;
}

.page:has(.summary-register) > .heading p,
.page:has(.registry-filter-panel) > .heading p,
.page:has(.joint-list) > .heading p,
.page:has(.ndt-batch-panel) > .heading p,
.page:has(.ndt-queue) > .heading p,
.page:has(.welder-table) > .heading p,
.page:has(#welding-shift-form) > .heading p {
  color: var(--text-secondary);
}

.page:has(.summary-register) > form.panel,
.page:has(.registry-filter-panel) > form.panel,
.page:has(.joint-list) > form.panel,
.page:has(.ndt-batch-panel) > form.panel,
.page:has(.ndt-queue) > form.panel,
.page:has(.welder-table) > form.filter,
.page:has(#welding-shift-form) > form.panel {
  margin-bottom: var(--ui-space-4);
  padding: var(--ui-space-3);
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

.page:has(.joint-list) .joint-list,
.page:has(.ndt-queue) .ndt-queue,
.page:has(.welder-table) .welder-table-wrap,
.page:has(.ndt-batch-panel) .ndt-existing-requests,
.page:has(#welding-shift-form) .shift-existing-list,
.page:has(#welding-shift-form) .shift-new-table {
  gap: var(--ui-space-2);
}

.page:has(.joint-list) .joint-list > .joint,
.page:has(.ndt-queue) .ndt-queue > .queue-card,
.page:has(.ndt-batch-panel) .request-card,
.page:has(.welder-table) .welder-exchange,
.page:has(.welder-table) .welder-create,
.page:has(#welding-shift-form) .shift-common,
.page:has(#welding-shift-form) .shift-existing,
.page:has(#welding-shift-form) .shift-new {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

.page:has(.joint-list) .joint-list > .joint:hover,
.page:has(.ndt-queue) .ndt-queue > .queue-card:hover,
.page:has(.ndt-batch-panel) .request-card:hover {
  border-color: var(--border-focus);
  background: var(--surface-interactive);
}

.page:has(.ndt-queue) .queue-card,
.page:has(.ndt-batch-panel) .ndt-batch-panel,
.page:has(.ndt-batch-panel) .ndt-exchange-panel,
.page:has(.welder-table) .panel,
.page:has(#welding-shift-form) .shift-common,
.page:has(#welding-shift-form) .shift-existing,
.page:has(#welding-shift-form) .shift-new {
  padding: var(--ui-space-3);
  border-radius: var(--ui-radius-lg);
}

.page:has(.ndt-batch-panel) .ndt-selection-wrap,
.page:has(.welder-table) .welder-table-wrap,
.page:has(#welding-shift-form) .shift-existing-list,
.page:has(#welding-shift-form) .shift-new-table {
  border-color: var(--border);
  background: var(--surface);
}

.page:has(.ndt-batch-panel) .ndt-selection-table th,
.page:has(.welder-table) .welder-table th,
.page:has(#welding-shift-form) .shift-existing-list th,
.page:has(#welding-shift-form) .shift-new-table th {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}

.page:has(.ndt-batch-panel) .ndt-selection-table td,
.page:has(.welder-table) .welder-table td,
.page:has(#welding-shift-form) .shift-existing-list td,
.page:has(#welding-shift-form) .shift-new-table td {
  background: var(--surface);
  border-bottom-color: var(--border);
}

.page:has(.ndt-batch-panel) .ndt-selection-table tbody tr:hover td,
.page:has(.welder-table) .welder-table tbody tr:hover td,
.page:has(#welding-shift-form) .shift-existing-list tbody tr:hover td {
  background: var(--surface-interactive);
}

/* Global navigation is a calm navigation layer rather than a toolbar card. */
.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-primary);
}

.brand,
.brand:visited {
  color: var(--text-primary);
}

.brand small,
.project-switch,
.userbox,
.userbox button {
  color: var(--text-secondary);
}

.project-switch select {
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
}

/* Tablet widths need a second header row before the phone layout takes over. */
@media (min-width: 721px) and (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    padding-block: var(--ui-space-2);
  }

  .project-switch {
    order: 3;
    flex: 1 1 min(100%, 420px);
  }

  .userbox {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
  }

  .userbox .user-name {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

.nav {
  border-bottom-color: var(--border);
  background: var(--surface);
}

.nav > a,
.nav-more > summary,
.nav-more-menu a {
  color: var(--text-secondary);
}

.nav > a:hover,
.nav > a.active,
.nav-more > summary:hover,
.nav-more.is-active > summary,
.nav-more-menu a:hover {
  background: var(--surface-interactive);
  color: var(--text-primary);
}

.nav-more-menu {
  border-color: var(--border);
  background: var(--surface-raised);
  box-shadow: var(--ui-shadow-raised);
}

/* Migrated workspaces share one token-driven surface contract in both themes. */
.workspace-dense-registry,
.workspace-filter-bar,
.workspace-section,
.page:has(.summary-register) > form.panel,
.page:has(.registry-filter-panel) > form.panel,
.page:has(.joint-list) > form.panel,
.page:has(.ndt-batch-panel) > form.panel,
.page:has(.ndt-queue) > form.panel,
.page:has(.welder-table) > form.filter,
.page:has(#welding-shift-form) > form.panel {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}

/* Isometry viewer keeps the drawing as a distinct visual surface, while its
   navigation, marker details and lists follow the shared workspace grammar. */
.workspace-view-switch {
  border-color: var(--border);
  background: var(--surface-subtle);
}

.workspace-view-switch a,
.workspace-view-switch span {
  color: var(--text-secondary);
}

.workspace-view-switch .is-active {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: none;
}

.marker-work-card,
.isometry-extra-tools,
.marker-work-card dl div,
.marker-ndt-actions {
  border-color: var(--border);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: none;
}

/* The optional drawing controls remain in the document flow, but start
   collapsed so the drawing keeps visual priority on compact screens. */
.isometry-extra-tools {
  display: grid;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-3);
  padding: var(--ui-space-3);
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-lg);
  background: var(--surface-raised);
  color: var(--text-primary);
}

.isometry-extra-tools > h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.25;
}

.isometry-extra-tools .click-tip,
.isometry-extra-tools .marker-size-form,
.isometry-extra-tools .split {
  margin: 0;
}

.isometry-action-notice {
  margin: var(--ui-space-3) 0 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 1px solid var(--state-success);
  border-radius: var(--ui-radius-md);
  background: var(--state-success-surface);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.isometry-action-notice.is-error {
  border-color: var(--state-danger);
  background: var(--state-danger-surface);
}

.marker-ndt-actions button,
.marker-list-open {
  border-color: var(--border-strong);
  background: var(--surface-interactive);
  color: var(--text-primary);
}

/* Joint markers remain circular at every saved marker size and viewport. */
.drawing-canvas .drawing-marker {
  box-sizing: border-box;
  inline-size: var(--marker-size, 28px);
  block-size: var(--marker-size, 28px);
  width: var(--marker-size, 28px);
  min-width: var(--marker-size, 28px);
  max-width: var(--marker-size, 28px);
  height: var(--marker-size, 28px);
  min-height: var(--marker-size, 28px);
  max-height: var(--marker-size, 28px);
  aspect-ratio: 1 / 1;
  padding: 2px;
  border-radius: 50%;
  font-size: clamp(9px, calc(var(--marker-size, 28px) * .4), 11px);
}

.marker-list > div {
  border-bottom-color: var(--border);
}

/* The marker register is a compact action list, not a stack of full-width
   buttons.  The row keeps the joint and its coordinates together, while the
   destructive action stays deliberately secondary. */
.marker-list {
  display: grid;
  gap: 0;
}

.marker-list > div {
  display: grid;
  grid-template-areas:
    "joint action"
    "details action";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--ui-space-2);
  min-width: 0;
  padding: var(--ui-space-2) 0;
}

.marker-list-open {
  grid-area: joint;
  justify-self: start;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-sm);
  background: var(--surface-interactive);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.15;
}

.marker-list > div > span {
  grid-area: details;
  min-width: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.marker-list > div > form {
  grid-area: action;
  align-self: center;
  margin: 0;
}

.marker-list > div > form .danger {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--state-danger);
  border-radius: var(--ui-radius-sm);
  background: var(--state-danger-surface);
  color: var(--state-danger);
  font-size: 12px;
  line-height: 1;
}

.marker-list > div > form .danger:hover {
  border-color: var(--state-danger);
  background: color-mix(in srgb, var(--state-danger-surface) 72%, var(--state-danger));
  color: var(--text-primary);
}

@media (max-width: 720px) {
  .marker-list > div {
    align-items: center;
    padding: 8px 0;
  }

  .marker-list > div > form .danger {
    width: auto;
  }
}

.line-context-card {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(240px, 2fr) repeat(3, minmax(130px, 1fr));
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-3);
}

.line-context-card > div {
  display: grid;
  gap: var(--ui-space-1);
  min-width: 0;
}

.line-context-card span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.line-context-card b {
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 15px;
}

.line-context-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(200px, 1fr) minmax(240px, 1.2fr) auto;
  align-items: end;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3);
}

.isometry-extra-tools__details,
.isometry-secondary-section {
  overflow: hidden;
}

.isometry-extra-tools__details > summary,
.isometry-secondary-section > summary {
  display: flex;
  align-items: center;
  min-height: var(--ui-control-height);
  cursor: pointer;
  color: var(--text-primary);
  font-weight: 750;
  list-style: none;
}

.isometry-extra-tools__details > summary::-webkit-details-marker,
.isometry-secondary-section > summary::-webkit-details-marker {
  display: none;
}

.isometry-extra-tools__details > summary::before,
.isometry-secondary-section > summary::before {
  content: '›';
  margin-right: var(--ui-space-2);
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
  transition: transform 160ms ease;
}

.isometry-extra-tools__details[open] > summary::before,
.isometry-secondary-section[open] > summary::before {
  transform: rotate(90deg);
}

.isometry-extra-tools__details[open] > summary {
  margin-bottom: var(--ui-space-3);
}

.isometry-secondary-sections {
  display: grid;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
}

.isometry-secondary-section {
  padding: 0 var(--ui-space-3);
}

.isometry-secondary-section[open] > summary {
  border-bottom: 1px solid var(--border);
}

.isometry-secondary-section > :not(summary) {
  margin-top: var(--ui-space-3);
  margin-bottom: var(--ui-space-3);
}

.isometry-secondary-section .marker-list {
  margin-inline: 0;
}

.line-context__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3);
}

.line-context__heading h2 {
  margin: var(--ui-space-1) 0 0;
}

.line-context-editor {
  margin-top: var(--ui-space-3);
  border-top: 1px solid var(--border);
}

.line-context-editor > summary {
  min-height: var(--ui-control-height);
  padding: var(--ui-space-3) 0;
  color: var(--accent);
  cursor: pointer;
  font-weight: 750;
}

.line-context-editor[open] > summary {
  border-bottom: 1px solid var(--border);
}

.line-context-form h2,
.line-context-form p {
  margin: 0;
}

.line-context-form p {
  color: var(--text-secondary);
  font-size: 13px;
}

@media (min-width: 721px) and (max-width: 980px) {
  .line-context-card,
  .line-context-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .line-context-form > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .line-context-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-2);
  }

  .line-context-form {
    grid-template-columns: 1fr;
  }

  .line-context__heading {
    align-items: center;
  }
}

.marker-work-card dt,
.marker-ndt-actions span {
  color: var(--text-muted);
}

.page:has(.isometry-viewer) > .heading,
.page:has(.report-section) > .heading,
.page:has(.access-directory) > .heading,
.page:has(.project-cards) > .heading,
.page:has(.project-onboarding) > .heading,
.page:has(.project-management) > .heading {
  padding-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--border);
}

.page:has(.report-section) .report-section,
.page:has(.access-directory) .access-directory,
.page:has(.project-cards) .project-cards,
.page:has(.project-create-panel) .project-create-panel,
.page:has(.project-management) .project-management,
.page:has(.project-management) .backup-entry,
.page:has(.project-management) .danger-panel {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

.page:has(.report-section) .report-table-wrap,
.page:has(.report-section) .report-table,
.page:has(.access-directory) .access-directory__list,
.page:has(.project-cards) .project-cards-list {
  border-color: var(--border);
}

.page:has(.report-section) .report-table th,
.page:has(.report-section) .report-table td {
  border-bottom-color: var(--border);
}

.page:has(.report-section) .report-table th {
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

.page:has(.report-section) .report-table tbody tr:hover td {
  background: var(--surface-interactive);
}

/* A selected, focused, hovered or attention-required row must never inherit a
   light legacy surface in the dark theme. These state tokens are shared by
   every dense table so state remains readable without relying on colour only. */
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
  text-shadow: none;
}

::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-text);
  text-shadow: none;
}

:where(
  .report-table,
  .joints-table,
  .summary-table,
  .welder-table,
  .ndt-selection-table,
  .shift-existing-list table,
  .shift-new-table table,
  .line-navigator-table
) tbody tr:hover > td {
  background: var(--table-row-hover);
  color: var(--text-primary);
}

:where(
  .report-table,
  .joints-table,
  .summary-table,
  .welder-table,
  .ndt-selection-table,
  .shift-existing-list table,
  .shift-new-table table,
  .line-navigator-table
) tbody tr:focus-within > td,
:where(
  .report-table,
  .joints-table,
  .summary-table,
  .welder-table,
  .ndt-selection-table,
  .shift-existing-list table,
  .shift-new-table table,
  .line-navigator-table
) tbody tr.is-selected > td,
:where(
  .report-table,
  .joints-table,
  .summary-table,
  .welder-table,
  .ndt-selection-table,
  .shift-existing-list table,
  .shift-new-table table,
  .line-navigator-table
) tbody tr.is-previewed > td,
:where(
  .report-table,
  .joints-table,
  .summary-table,
  .welder-table,
  .ndt-selection-table,
  .shift-existing-list table,
  .shift-new-table table,
  .line-navigator-table
) tbody tr[aria-selected="true"] > td {
  background: var(--table-row-selected);
  color: var(--text-primary);
}

.report-table tbody tr.has-problem > td {
  background: var(--state-danger-surface);
  color: var(--text-primary);
}

.report-table tbody tr.has-problem > td:first-child {
  box-shadow: inset 3px 0 0 var(--state-danger);
}

.report-table tbody tr.has-problem:hover > td,
.report-table tbody tr.has-problem:focus-within > td {
  background: color-mix(in srgb, var(--state-danger-surface) 76%, var(--table-row-hover));
}

.page:has(.project-cards) .project-cards-list > a,
.page:has(.access-directory) .access-user,
.page:has(.project-management) .admin-list > div {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

.page:has(.project-cards) .project-cards-list > a:hover,
.page:has(.access-directory) .access-user:hover,
.page:has(.project-management) .admin-list > div:hover {
  border-color: var(--border-focus);
  background: var(--surface-interactive);
}

/* Summary stays an engineering spreadsheet on desktop; the existing mobile
   projection uses the same compact dense-row visual language. */
.summary-register.workspace-dense-registry {
  /* The register combines a compact project identity, count and controls.
     Use the dense rhythm here so browser-default heading margins do not make
     the working area look vertically sparse. */
  gap: var(--ui-space-2);
  /* This register is the one dense workspace surface with direct text
     children. Give its project code, count and mobile controls a small,
     consistent breathing room without changing table-cell spacing. */
  padding-inline: var(--ui-space-2);
}

.summary-register.workspace-dense-registry .summary-register-heading {
  margin: 0;
  padding-bottom: var(--ui-space-2);
  border-bottom: 1px solid var(--border);
}

.summary-register.workspace-dense-registry .summary-register-heading > div:first-child {
  display: grid;
  gap: 2px;
}

.summary-register.workspace-dense-registry .summary-register-heading h2,
.summary-register.workspace-dense-registry .summary-register-actions,
.summary-register.workspace-dense-registry .summary-register-actions output {
  margin: 0;
}

.summary-register.workspace-dense-registry .summary-register-actions {
  gap: var(--ui-space-2);
  line-height: 1.25;
}

.summary-register.workspace-dense-registry .summary-quick-filters {
  margin: 0;
}

.summary-register.workspace-dense-registry .summary-quick-filters button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
}

.summary-register.workspace-dense-registry .summary-quick-filters button:hover,
.summary-register.workspace-dense-registry .summary-quick-filters button.is-active {
  border-color: var(--accent);
  background: var(--surface-selected);
  color: var(--text-primary);
}

.summary-register.workspace-dense-registry .summary-selection-bar {
  padding: var(--ui-space-2) var(--ui-space-3);
  border-color: var(--border);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

.summary-register.workspace-dense-registry .summary-side-panel {
  padding: var(--ui-space-3);
  border-color: var(--border);
  border-radius: var(--ui-radius-lg);
  background: var(--surface-raised);
  box-shadow: none;
}

.summary-register.workspace-dense-registry .summary-table tbody tr.is-previewed td {
  background: var(--surface-selected);
}

/* Mobile registry rows are deliberately semantic rather than a scaled table. */
@media (max-width: 720px) {
  .workspace-section .section-heading,
  .workspace-dense-registry .section-heading,
  .welder-exchange .section-heading {
    align-items: stretch;
    flex-direction: column;
    gap: var(--ui-space-2);
  }

  .welder-exchange .section-heading .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .welder-exchange .section-heading .button {
    min-width: 0;
    white-space: normal;
  }

  .workspace-page-header {
    align-items: stretch;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-2);
    padding-bottom: var(--ui-space-3);
  }

  .workspace-page-header .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .workspace-page-header .button-row .button {
    width: 100%;
    padding-inline: var(--ui-space-2);
  }

  .workspace-filter-bar {
    padding: var(--ui-space-2);
  }

  .workspace-filter-toggle {
    display: inline-flex;
  }

  .workspace-mobile-filter-open {
    display: inline-flex;
    width: 100%;
    margin: 0 0 var(--ui-space-3);
  }

  #registry-filter-panel {
    display: none !important;
  }

  #registry-filter-panel.workspace-sheet-source--open {
    display: block !important;
  }

  .workspace-mobile-directory-create {
    display: inline-flex;
    width: 100%;
    margin: 0 0 var(--ui-space-3);
  }

  #welder-create-panel {
    display: none;
  }

  #welder-create-panel.workspace-sheet-source--open {
    display: grid;
  }

  .workspace-dense-registry .joint,
  .workspace-dense-registry .request-card,
  .workspace-dense-registry .queue-card,
  .workspace-dense-registry .list > a {
    min-height: 56px;
    padding: 10px;
  }

  .workspace-dense-registry .tag {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .workspace-empty {
    padding: var(--ui-space-4);
  }

  .summary-register.workspace-dense-registry .summary-register-heading {
    align-items: end;
  }

  .summary-register.workspace-dense-registry .summary-register-heading h2 {
    font-size: 21px;
    line-height: 1.15;
  }

  .summary-register.workspace-dense-registry .summary-mobile-row {
    border-color: var(--border);
    border-radius: var(--ui-radius-md);
    background: var(--surface);
  }

  .summary-register.workspace-dense-registry .summary-mobile-row.is-selected {
    border-color: var(--border-focus);
    background: var(--surface-selected);
  }

  .summary-register.workspace-dense-registry .summary-mobile-state {
    border-top-color: var(--border-strong);
  }

  .summary-register.workspace-dense-registry .summary-mobile-state--waiting-ndt {
    border-top-color: var(--state-warning);
  }

  .summary-register.workspace-dense-registry .summary-mobile-state--ndt-active {
    border-top-color: var(--state-info);
  }

  .summary-register.workspace-dense-registry .summary-mobile-state--completed {
    border-top-color: var(--state-success);
  }

  .summary-register.workspace-dense-registry .summary-mobile-state--rejected {
    border-top-color: var(--state-danger);
  }

  .joints-mobile-list {
    display: grid;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-3);
  }

  .joints-mobile-list .joint {
    display: grid;
    grid-template-columns: minmax(72px, .72fr) minmax(0, 1.35fr) minmax(80px, .9fr);
    align-items: center;
    min-width: 0;
    gap: var(--ui-space-2);
    color: var(--text-primary);
    text-decoration: none;
  }

  .joints-mobile-main,
  .joints-mobile-meta,
  .joints-mobile-state {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .joints-mobile-main b,
  .joints-mobile-meta b,
  .joints-mobile-state b,
  .joints-mobile-main small,
  .joints-mobile-meta small,
  .joints-mobile-state small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .joints-mobile-main b,
  .joints-mobile-meta b,
  .joints-mobile-state b {
    color: var(--text-primary);
    font-size: 13px;
  }

  .joints-mobile-main small,
  .joints-mobile-meta small,
  .joints-mobile-state small {
    color: var(--text-muted);
    font-size: 11px;
  }

  .joints-mobile-state {
    padding-left: var(--ui-space-2);
    border-left: 2px solid var(--border-strong);
  }

  #registry-results .joints-table-wrap {
    display: none;
  }
}

@media (max-width: 430px) {
  .workspace-page-header .button-row {
    grid-template-columns: 1fr;
  }

  .workspace-page-header .button-row:empty {
    display: none;
  }
}

@media (max-width: 720px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 8px 12px;
  }

  .topbar .brand {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    overflow: visible;
  }

  .topbar .brand-meta {
    display: flex;
  }

  .topbar .app-version {
    grid-column: auto;
    min-width: 0;
  }

  .topbar .deployment-time {
    grid-column: auto;
    min-width: 0;
    overflow: visible;
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
  }

  .topbar .userbox {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: stretch;
  }

  .topbar .user-name {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .topbar .userbox form,
  .topbar .userbox button {
    min-width: 0;
  }

  .topbar .project-switch {
    grid-column: 1;
    grid-row: 3;
  }

}