/* Fonts and tokens come from /console-ui/console-ui.min.css; the names this file
   uses (--foreground, --border, --green ...) resolve from compat-archive.css. */

* {
  box-sizing: border-box;
}

.asset-library { display: grid; gap: var(--space-6); padding: var(--space-6); }
.asset-library-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-6); }
.asset-library-filters .ui-field { flex: 1; min-width: var(--size-filter-field); }
.asset-library-filters .ui-field:first-child { flex-basis: var(--size-filter-field-wide); }
.asset-library-actions, .asset-file-meta, .asset-file-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.asset-file-meta { justify-content: space-between; color: var(--text-muted); font-size: var(--type-label); }
.asset-library-note, .asset-provenance { color: var(--text-muted); font-size: var(--type-label); overflow-wrap: anywhere; }
.asset-library-group { min-width: 0; }
.asset-library-group h2 { margin-bottom: var(--space-6); }
.asset-library-grid { display: flex; flex-wrap: wrap; align-items: start; gap: var(--space-6); }
.asset-library-file { width: var(--size-filter-field); max-width: var(--size-full); display: grid; gap: var(--space-3); }
.asset-library-file img, .asset-library-file video { display: block; width: var(--size-full); height: auto; object-fit: contain; }
.asset-library-file .preview-frame { height: auto; min-height: 0; }
.asset-file-label { align-items: start; flex-wrap: nowrap; overflow-wrap: anywhere; }
.asset-file-label span { min-width: 0; }
.asset-file-label input { flex: none; min-height: 0; padding: 0; }
.asset-no-preview { min-height: var(--size-textarea-min); display: grid; place-items: center; padding: var(--space-6); background: var(--surface-sunken); color: var(--text-muted); }
.asset-decision-dialog { display: none; gap: var(--space-6); padding: var(--space-8); }
.asset-decision-dialog[open] { display: grid; }
.asset-decision-dialog .ui-select { width: var(--size-full); min-width: 0; }
.asset-history { padding-left: var(--space-8); overflow-wrap: anywhere; }
.asset-history li { margin-bottom: var(--space-6); }

.package-preview {
  padding: var(--space-6);
  display: grid;
  gap: var(--space-6);
}
.package-heading, .package-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.package-heading > a { margin-left: auto; }
.package-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-8);
}
.package-columns section { min-width: 0; }
.package-columns h2 {
  font-size: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.package-aside { display: grid; align-content: start; gap: var(--space-6); }
.package-tree {
  border: var(--size-hairline) solid var(--border);
  border-radius: var(--radius-ui);
  padding: var(--space-4);
  overflow-wrap: anywhere;
}
.package-tree > strong { display: block; }
.package-group { margin-top: var(--space-3); }
.package-group summary, .package-stat, .package-entry {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.package-group summary { cursor: pointer; }
.package-group summary::before { content: "▸ "; }
.package-group[open] summary::before { content: "▾ "; }
.package-group summary span:first-child { margin-right: auto; }
.package-entry { padding-left: var(--space-4); overflow-wrap: anywhere; }
.package-entry span:first-child { min-width: 0; }
.package-entry span:last-child, .package-stat span:last-child { flex-shrink: 0; }
.package-footer { border-top: var(--size-hairline) solid var(--text); padding-top: var(--space-4); }
.package-footer span { margin-left: auto; }
@media (max-width: 700px) {
  .asset-library-file { width: var(--size-full); }
  .package-preview { padding: var(--space-4); }
  .package-columns { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .package-entry, .package-group summary, .package-stat { flex-wrap: wrap; }
  .package-footer span { margin-left: 0; }
}

html,
body {
  min-height: var(--size-full);
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-synthesis: none;
}

/* Large type tightens, small type stays open. Without this every size
   inherited one leading value and nothing shared a baseline. */
h1, h2, h3, h4 {
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
}

.status-chip {
  line-height: var(--leading-snug);
  max-width: var(--size-full);
  overflow-wrap: anywhere;
}

body {
  min-height: var(--viewport-h);
  padding-top: var(--header-h);
}

body.dialog-open {
  position: fixed;
  top: var(--dialog-scroll-offset, 0);
  right: 0;
  left: 0;
  width: var(--size-full);
  overflow: hidden;
}

button,
input,
select,
textarea {
  min-width: 0;
  border-radius: var(--radius-ui);
  color: inherit;
  font: inherit;
}

a {
  color: inherit;
}

button {
  min-width: var(--control-h);
  min-height: var(--control-h);
  cursor: pointer;
  transition: background-color var(--motion), border-color var(--motion), color var(--motion), opacity var(--motion);
}

button:disabled {
  cursor: not-allowed;
  opacity: 1;
}

::-webkit-scrollbar {
  width: var(--space-4);
  height: var(--space-4);
  background: var(--scrollbar-bg);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-left: var(--size-hairline) solid var(--border);
}

::-webkit-scrollbar-thumb {
  border: var(--size-hairline) solid var(--scrollbar-bg);
  background: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.skip-link,
.visually-hidden {
  position: absolute;
  width: var(--size-hairline);
  height: var(--size-hairline);
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  z-index: var(--z-skip-link);
  width: auto;
  height: auto;
  clip: auto;
  padding: var(--space-4);
  background: var(--text);
  color: var(--surface);
}

.global-header {
  position: fixed;
  z-index: var(--z-archive-header);
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-h);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--shell-gutter);
  border-bottom: var(--border-ui-strong);
  background: var(--surface);
}

.header-brand,
.scope-link {
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-weight: var(--weight-bold);
  text-decoration: none;
  text-transform: uppercase;
}

.header-brand {
  flex: 0 0 auto;
  padding: 0 var(--space-4);
  font-size: var(--type-subtitle);
  letter-spacing: var(--track-brand);
}

.scope-nav {
  min-width: 0;
  min-height: var(--size-full);
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.scope-nav::-webkit-scrollbar {
  display: none;
}

.scope-link {
  flex: 0 0 auto;
  height: var(--size-full);
  padding: 0 var(--space-6);
  border-inline-start: var(--border-ui);
  font-size: var(--type-body);
}

.scope-link:last-child {
  border-inline-end: var(--border-ui);
}

.scope-link.is-active {
  background: var(--text);
  color: var(--surface);
}

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.text-control,
.control,
.micro-control {
  border: var(--border-ui);
  background: var(--surface-raised);
  color: var(--text);
}

.text-control {
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-4);
  font-size: var(--type-label);
}

a.text-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.control {
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-4);
}

.micro-control {
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-4);
  font-size: var(--type-label);
}


.text-control:hover,
.control:hover:not(:disabled),
.micro-control:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface);
}
.control.is-active {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}
.control.primary {
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-4);
  border: var(--outline-input);
  background: var(--text);
  color: var(--surface);
  font-weight: var(--weight-bold);
}
.control.primary:hover:not(:disabled) {
  opacity: var(--opacity-primary-hover);
}

.control:disabled,
.micro-control:disabled {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text-faint);
}
.control.primary:disabled {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text-muted);
}

.verified { color: var(--green); }
.failed{ color: var(--red) !important; }

main {
  width: var(--size-full);
  min-height: calc(var(--viewport-dynamic-h) - var(--header-h));
  padding: var(--shell-gutter);
}

.workspace-shell,
.workspace {
  min-height: calc(var(--viewport-dynamic-h) - var(--header-h) - (2 * var(--shell-gutter)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  align-items: start;
}

.collection-header {
  min-width: 0;
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-ui);
  color: var(--text-muted);
  font-size: var(--type-label);
}

.collection-meta,
.collection-state,
.ui-tabs,
.ui-pagination {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.collection-meta strong {
  color: var(--text);
}

.ui-card {
  min-width: 0;
  background: var(--surface);
}

.ui-panel,
.ui-dialog {
  min-width: 0;
  border: var(--border-ui-strong);
  border-radius: var(--radius-ui);
  background: var(--surface-raised);
}

.ui-dialog {
  box-shadow: var(--shadow-dialog);
}

.ui-state {
  min-width: 0;
}

.ui-feedback {
  min-width: 0;
}

.ui-disclosure > summary {
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-ui);
  list-style: none;
  cursor: pointer;
}

.ui-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ui-disclosure[open] > summary {
  border-bottom-color: var(--line-strong);
}

.list-pane {
  min-width: 0;
  overflow-x: auto;
  border-right: var(--size-hairline) solid var(--border-strong);
}

.filters {
  min-width: 0;
  min-height: var(--size-filter-bar-min);
  display: grid;
  grid-template-columns: var(--tracks-archive-filters);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--size-hairline) solid var(--border-strong);
}

.filter-disclosure > summary {
  display: none;
}

input,
select,
textarea {
  width: var(--size-full);
  background: var(--surface-raised);
  transition: background-color var(--motion-retained-row), border-color var(--motion-retained-row), color var(--motion-retained-row);
}

input {
  min-height: var(--control-h);
  border: var(--border-ui);
  padding: var(--space-2) var(--space-4);
}

select {
  min-height: var(--control-h);
  border: var(--size-hairline) solid var(--border);
  padding: var(--space-2) var(--space-4);
}

textarea {
  min-height: var(--size-preview-row-w);
  border: var(--border-ui);
  padding: var(--space-2) var(--space-4);
  line-height: var(--leading-textarea-compact);
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--text);
  outline: var(--outline-input);
  outline-offset: calc(-1 * var(--size-hairline));
}


.feedback {
  color: var(--muted);
  font-size: var(--type-caption);
}


.work-popup-shell {
  position: fixed;
  z-index: var(--z-archive-panel);
  inset: var(--header-h) 0 0;
  display: grid;
  place-items: center;
  padding: var(--space-8);
  background: var(--scrim);
}

.work-popup-shell .inspector {
  position: relative;
  /* Bounded by the shell (its containing block), not the window: 100vw does
     not track page zoom, and the popup ran off the right edge when zoomed. */
  width: var(--size-full);
  max-width: var(--work-review-w);
  max-height: calc(var(--viewport-dynamic-h) - var(--header-h) - (2 * var(--space-8)));
  border: var(--border-ui-strong);
  box-shadow: var(--shadow-popup);
}

.work-popup {
  height: var(--size-full);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--surface-raised);
}

.work-popup .inspector-form {
  min-height: 0;
  display: grid;
  grid-template-columns: var(--tracks-work-popup);
  align-items: start;
  overflow: auto;
  border-left: 0;
  background: var(--surface-raised);
}

.work-popup-form-column {
  min-width: 0;
}

.work-popup-tabs {
  flex-wrap: nowrap;
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  border-bottom: var(--border-ui-strong);
  background: var(--surface-raised);
}

.work-popup-tabs .control {
  flex: 0 0 auto;
  transition: none;
}

.work-tab-panel[hidden] {
  display: none;
}

.work-popup-wide-column {
  grid-column: 1 / -1;
}

.work-popup .inspector-form[data-active-tab="media"] .work-popup-media-column {
  grid-column: 1;
}

.work-popup-media-column {
  border-right: var(--border-ui-strong);
}

.work-popup .inspector-header > .action-row {
  flex-wrap: wrap;
  max-width: var(--size-full);
}

.work-popup .section-body {
  padding: var(--space-8);
  gap: var(--space-6);
}

.work-review-empty {
  min-height: var(--stage-h-max);
  padding: var(--space-16);
  display: grid;
  place-content: center;
  gap: var(--space-8);
}

.media-tile-meta .ui-disclosure {
  overflow-wrap: anywhere;
}

.work-popup .inspector-form > [data-work-save-draft] {
  grid-column: 1 / -1;
}


.row-cell {
  min-width: 0;
  padding: var(--space-2);
  overflow: hidden;
  border-right: var(--size-hairline) solid var(--border);
}

.row-cell:last-child {
  border-right: 0;
}

.preview-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}


.preview-frame {
  position: relative;
  width: var(--size-full);
  aspect-ratio: var(--preview-ar, var(--ratio-video-fallback));
  overflow: hidden;
  border: var(--size-hairline) solid var(--border);
  background: var(--surface);
}

.preview-frame.is-pending {
  background:
    var(--background-preview-pending);
  background-size: var(--background-preview-size);
  animation: preview-shimmer var(--duration-preview-shimmer) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .preview-frame.is-pending { animation: none; }
}

@keyframes preview-shimmer {
  0% { background-position: var(--position-preview-start); }
  100% { background-position: var(--position-preview-end); }
}

.preview-frame.is-error::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  content: "PREVIEW UNAVAILABLE";
}

.preview-row {
  width: var(--size-preview-row-w);
  height: var(--size-preview-row-h);
  aspect-ratio: auto;
}

.preview-media {
  width: var(--size-full);
  max-height: var(--size-preview-media-max);
  display: block;
  object-fit: contain;
}

.preview-playback-link {
  width: var(--size-full);
  height: var(--size-full);
  display: block;
}

.preview-embed {
  height: var(--size-full);
  border: 0;
}

.preview-row .preview-media {
  height: var(--size-full);
  object-fit: contain;
}

.preview-empty {
  min-height: var(--size-preview-empty);
  display: grid;
  place-items: center;
  border: var(--size-hairline) dashed var(--border);
  background: var(--surface-raised);
  color: var(--foreground);
  font-size: var(--type-caption);
  font-weight: var(--weight-bold);
}

.preview-empty.preview-row {
  min-height: 0;
}

.continuous-status {
  min-height: var(--size-thumb);
  display: grid;
  place-items: center;
  border-top: var(--size-hairline) solid var(--border-strong);
  color: var(--muted);
  font-size: var(--type-caption);
}

.continuous-status:has(button),
.empty-list {
  gap: var(--space-4);
  padding: var(--space-12);
  text-align: center;
}

.empty-list p {
  margin: 0;
}

.empty-state {
  min-height: var(--size-preview-empty);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-12);
  color: var(--muted);
  text-align: center;
}

.empty-state p {
  margin: 0;
}

.continuous-status.is-complete {
  color: var(--faint);
}

.window-spacer {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  place-items: start center;
  height: var(--window-spacer-height, auto);
  padding-top: var(--space-6);
  border-bottom: var(--size-hairline) dashed var(--border-strong);
  background: var(--background-window-spacer);
}

.window-spacer-control {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  background: var(--surface-raised);
}

.action-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.empty-list {
  min-height: var(--size-empty-list);
  display: grid;
  place-items: center;
  color: var(--muted);
}

.inspector:not(.work-popup) {
  position: sticky;
  top: var(--header-h);
  height: calc(var(--viewport-dynamic-h) - var(--header-h) - (2 * var(--shell-gutter)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-raised);
}

.inspector-placeholder {
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  color: var(--muted);
  text-align: center;
}

.inspector-placeholder span {
  color: var(--foreground);
  font-weight: var(--weight-bold);
}

.inspector-error {
  border-color: var(--red);
  color: var(--foreground);
}

.inspector-error > span {
  color: var(--red);
}

.inspector-recovery {
  flex-wrap: wrap;
  justify-content: center;
}

.inspector-header {
  flex: 0 0 auto;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: var(--size-hairline) solid var(--border-strong);
}

.inspector-header > div {
  min-width: 0;
  flex: 1 1 auto;
}

.inspector-header h1 {
  margin: var(--size-rule-strong) 0;
  font-size: var(--type-subtitle);
  line-height: var(--leading-inspector-title);
  overflow-wrap: break-word;
  word-break: normal;
}

.inspector-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.inspector-header > .micro-control {
  flex: 0 0 auto;
}

.inspector-header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-caption);
}

.inspector-header .editor-context {
  margin-top: var(--space-1);
  color: var(--foreground);
}

.inspector-preview {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-4);
  border-bottom: var(--size-hairline) solid var(--border);
}

.inspector-preview .preview-frame {
  width: min(var(--size-full), var(--size-inspector-preview));
  height: auto;
}

.inspector-preview .preview-media {
  width: var(--size-full);
  height: var(--size-full);
  max-height: none;
  object-fit: contain;
}

.inspector-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.editor-essentials {
  border-bottom: var(--border-ui-strong);
}

.editor-essentials h2 {
  min-height: var(--size-control);
  display: flex;
  align-items: center;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-ui);
  font-size: var(--type-label);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.inspector-section {
  border-bottom: var(--size-hairline) solid var(--border-strong);
}

.inspector-section > summary {
  min-height: var(--size-control);
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--type-label);
  font-weight: var(--weight-bold);
  list-style: none;
  cursor: pointer;
}

.inspector-section > summary::-webkit-details-marker {
  display: none;
}

.inspector-section[open] > summary {
  border-bottom: var(--border-ui);
}

.section-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}


.field {
  display: grid;
  gap: var(--space-2);
}

.field > span {
  color: var(--muted);
  font-size: var(--type-caption);
  letter-spacing: var(--track-field);
}

.field-pair,
.field-triple {
  display: grid;
  gap: var(--space-4);
}

.field-pair { grid-template-columns: 1fr 1fr; }
.field-triple { grid-template-columns: repeat(3, 1fr); }

.structured-editor {
  display: grid;
  gap: var(--space-2);
}

.structured-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.structured-heading strong,
.structured-cell > span {
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-field);
}

.structured-rows {
  display: grid;
  gap: var(--space-2);
}

.structured-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--size-hairline) solid var(--border);
}

.structured-row-credit {
  grid-template-columns: var(--tracks-credit-fields);
}

.structured-cell {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.structured-remove {
  margin-bottom: var(--space-2);
}

.source-note,
.muted,
.history-line {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-caption);
}

.source-note {
  padding-left: var(--space-4);
  border-left: var(--size-rule-strong) solid var(--border);
}

.work-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.work-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-ui);
  font-size: var(--type-caption);
}

.work-history-change {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.source-note[data-source-date-evidence] {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.source-date-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.source-date-option > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.work-tag-editor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-height: var(--control-h-touch);
  padding: var(--space-2) var(--space-3);
  border: var(--border-ui);
  background: var(--surface-raised);
}

.work-tag-editor:focus-within {
  border-color: var(--text);
  outline: var(--outline-input);
  outline-offset: calc(-1 * var(--size-hairline));
}

.work-tag-editor > input {
  flex: 1 1 var(--size-work-tags);
  min-width: 0;
  min-height: var(--control-h);
  padding: 0;
  border: 0;
  outline: 0;
}

.work-popup .field > span,
.work-popup .structured-heading strong,
.work-popup .structured-cell > span {
  text-transform: uppercase;
}

.relation-list,
.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.relation-list li,
.checklist li {
  padding: var(--space-2) 0;
  border-bottom: var(--size-hairline) dotted var(--border);
  font-size: var(--type-caption);
}

.inspector-actions {
  flex: 0 0 auto;
  position: sticky;
  z-index: var(--z-local-sticky);
  bottom: 0;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: var(--size-hairline) solid var(--border-strong);
  background: var(--surface-raised);
}

.inspector-actions .feedback {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inspector-action-status {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: var(--space-1);
}

.inspector-change-summary,
.inspector-return-note {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspector-change-summary {
  color: var(--foreground);
}

.feedback.is-unsaved {
  color: var(--foreground);
  font-weight: var(--weight-bold);
}

.feedback.is-saved {
  color: var(--green);
}

.feedback.is-error {
  color: var(--red);
}

.page-state {
  min-height: calc(var(--viewport-dynamic-h) - var(--header-h) - (2 * var(--shell-gutter)));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-4);
  color: var(--muted);
}

.error-state strong {
  color: var(--red);
}

.source-filters {
  grid-template-columns: var(--tracks-source-filters);
}

.source-filters .source-providers {
  grid-column: 1 / -1;
  padding: 0 0 var(--space-2);
}

.source-more-filters {
  grid-column: 1 / -1;
}

.source-more-filter-grid {
  display: grid;
  grid-template-columns: var(--tracks-source-more);
  gap: var(--space-2);
  padding: var(--space-3);
}

.source-technical-filter {
  grid-column: 1 / -1;
}

.media-inbox-scopes{
  min-height: var(--size-filter-bar-min);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--size-hairline) solid var(--border);
}

.media-inbox-scopes .is-active {
  border-color: var(--foreground);
  background: var(--foreground);
  color: var(--surface);
}

.media-scope-groups {
  flex-wrap: wrap;
  align-items: stretch;
}

.media-scope-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline-end: var(--space-3);
  border-inline-end: var(--border-ui);
}

.media-scope-label {
  color: var(--muted);
  font-size: var(--type-label);
}

.media-inbox-audio {
  width: calc(var(--size-full) - var(--space-8));
  margin: var(--space-16) var(--space-4);
}

.source-grid{
  border-bottom: var(--size-hairline) solid var(--border-strong);
}

.source-grid { min-width: var(--size-source-grid-min); }
.source-choice-bar {
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--size-hairline) solid var(--border);
}
.source-choice-bar .muted { flex-basis: var(--size-full); }
.source-row .preview-cell { flex-direction: column; gap: var(--space-2); }
.source-row .preview-cell .ui-check { min-height: var(--control-h); flex-shrink: 0; }
.source-row .preview-cell .ui-check span { display: none; }
.source-decision-actions { flex-wrap: wrap; }

.source-row {
  min-height: var(--size-source-row-min);
  display: grid;
  grid-template-columns: var(--tracks-source-row);
  border-bottom: var(--size-hairline) solid var(--border);
  background: var(--surface);
}

.source-row:not(.source-row-head) { cursor: pointer; }
.source-row .preview-frame {
  width: var(--size-full);
  height: var(--size-source-thumb);
}
.source-row .preview-media {
  height: var(--size-source-thumb);
  object-fit: contain;
}
.source-row:not(.source-row-head):hover,
.source-row:not(.source-row-head):focus,
.source-row.is-active {
  background: var(--surface-subtle);
  transition: background-color var(--motion-retained-row), box-shadow var(--motion-retained-row);
}
.source-row.is-active { box-shadow: var(--shadow-source-selected); }

.source-row-head{
  min-height: var(--space-12);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: var(--type-caption);
}

.source-row-head {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-media-label);
  border-bottom: var(--size-hairline) solid var(--border-strong);
}

.source-provider-cell,
.source-caption-cell,
.source-media-cell,
.source-link-cell,
.source-review-cell{
  display: flex;
  flex-direction: column;
  gap: var(--size-rule-strong);
}

.source-provider-cell strong,
.source-caption-cell strong,
.source-provider-cell span,
.source-caption-cell span,
.source-media-cell span,
.source-link-cell span,
.source-review-cell span{
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-provider-cell strong,
.source-provider-cell span,
.source-caption-cell span,
.source-media-cell span,
.source-link-cell span,
.source-review-cell span{ white-space: nowrap; }

.source-review-cell span {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.source-preview-state {
  color: var(--text-muted);
  line-height: var(--leading-preview-state);
  white-space: normal !important;
}

.source-provider-cell span,
.source-caption-cell span,
.source-media-cell span,
.source-link-cell span,
.source-review-cell span{
  color: var(--muted);
  font-size: var(--type-caption);
}

.source-caption-cell strong {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.source-date-cell { color: var(--muted); font-size: var(--type-caption); }
.source-review-cell.is-excluded span:first-child,
.policy-warning { color: var(--red); }

.source-facts {
  display: grid;
  grid-template-columns: var(--tracks-source-facts);
  margin: 0;
  border-top: var(--size-hairline) solid var(--border);
  border-left: var(--size-hairline) solid var(--border);
}

.source-facts dt,
.source-facts dd {
  min-width: 0;
  margin: 0;
  padding: var(--space-2);
  border-right: var(--size-hairline) solid var(--border);
  border-bottom: var(--size-hairline) solid var(--border);
  overflow-wrap: anywhere;
}

.source-facts dt { color: var(--muted); font-size: var(--type-caption); }
.policy-warning,
.preview-reason { margin: 0; white-space: pre-wrap; }
.policy-warning,
.preview-reason { color: var(--muted); font-size: var(--type-caption); }

.source-inspector .inspector-preview { display: grid; gap: var(--space-2); }
.source-inspector .inspector-preview .preview-empty { width: var(--size-full); min-height: var(--size-source-empty); }

.source-media-browser .preview-frame {
  width: min(var(--size-full), var(--size-inspector-preview));
  max-height: var(--size-source-preview-h);
}

.source-media-navigation {
  display: grid;
  grid-template-columns: var(--tracks-source-navigation);
  align-items: center;
  gap: var(--space-2);
}

.source-media-navigation span {
  text-align: center;
  font-size: var(--type-caption);
}

.source-media-navigation .micro-control { min-height: var(--control-h); }
.duplicate-export-note { color: var(--foreground) !important; }

.source-attachment {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--tracks-source-attachment);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--size-hairline) solid var(--border);
}

.source-attachment-preview {
  width: var(--size-source-attachment-w);
  height: var(--size-source-attachment-h);
}

.source-attachment-preview .preview-frame,
.source-attachment-preview .preview-empty {
  width: var(--size-full);
  height: var(--size-full);
}

.source-attachment-facts { min-width: 0; display: grid; gap: var(--size-rule-strong); }
.source-attachment-facts > * { min-width: 0; overflow-wrap: anywhere; }
.source-attachment-facts span { color: var(--muted); font-size: var(--type-caption); }
.source-playback-link { width: max-content; text-decoration: none; }

.source-attachment code {
  min-width: 0;
  overflow: hidden;
  font: inherit;
  font-size: var(--type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-work-decisions { display: grid; gap: var(--space-2); }

.source-work-decision {
  display: grid;
  grid-template-columns: var(--tracks-source-decision);
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--size-hairline) solid var(--border);
}

.source-work-picker,
.source-work-decision > strong,
.source-work-decision > .field,
.source-work-provenance,
.source-work-link { grid-column: 1 / -1; }

.source-work-link { width: max-content; text-decoration: none; }

.work-source-item,
.imported-work-evidence,
.candidate-group-member {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--size-hairline) solid var(--border);
}

.work-source-item-main,
.imported-work-evidence > div,
.candidate-group-member > div {
  min-width: 0;
  display: grid;
  gap: var(--size-rule-strong);
}

.work-source-item span,
.imported-work-evidence span,
.candidate-group-member span {
  color: var(--muted);
  font-size: var(--type-caption);
  overflow-wrap: anywhere;
}

.imported-work-evidence code {
  font: inherit;
  font-size: var(--type-caption);
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 1079px) {
  :root {
    --shell-gutter: var(--space-6);
  }

  .workspace-shell,
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .list-pane {
    border-right: 0;
  }

  .inspector:not(.work-popup),
  .owner-item-inspector,
  .owner-data-inspector {
    position: static;
    height: auto;
    max-height: none;
    border-top: var(--border-ui-strong);
    border-left: 0;
  }
}

@media (max-width: 1300px) {

  .filters {
    grid-template-columns: var(--tracks-archive-filters-dense);
  }

  .source-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .source-filters .search-field {
    grid-column: span 2;
  }


}

@media (max-width: 700px) {
  .work-history-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .work-history-change { grid-column: 1 / -1; }

  ul.file-truth-list li.source-file-review,
  .source-file-review .source-file-decision {
    grid-template-columns: minmax(0, 1fr);
  }

  .source-file-review .source-file-decision .action-row,
  .source-file-review .source-file-decision .feedback {
    grid-column: auto;
  }

  .header-brand {
    display: none;
  }

  button,
  .scope-link,
  .text-control,
  .control,
  .micro-control,
  input,
  select,
  summary {
    min-width: var(--control-h-touch);
    min-height: var(--control-h-touch);
  }

  .filter-disclosure > summary {
    min-height: var(--control-h-touch);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    font-weight: var(--weight-bold);
    list-style: none;
    cursor: pointer;
  }

  .filter-disclosure > summary::after {
    content: "[+]";
    margin-left: var(--space-4);
  }

  .filter-disclosure[open] > summary::after {
    content: "[-]";
  }

  .filter-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  .filter-disclosure[open] > summary {
    border-bottom: var(--border-ui);
  }

  .filter-disclosure {
    border-bottom: var(--size-hairline) solid var(--border-strong);
    background: var(--surface-raised);
  }

  .filter-disclosure .filters {
    border-bottom: 0;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .list-pane {
    border-right: 0;
  }


  .media-inbox-scopes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }

  .media-inbox-scopes .control {
    min-height: var(--size-filter-bar-min);
    justify-content: center;
    white-space: normal;
  }

  .media-scope-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .media-scope-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 0 var(--space-2);
    border-right: 0;
    border-bottom: var(--border-ui);
  }

  .media-scope-label {
    grid-column: 1 / -1;
  }

  .media-scope-groups .media-sort-select {
    width: var(--size-full);
    margin: 0;
  }


  .work-popup-shell {
    place-items: stretch;
    padding: var(--space-6);
  }

  .work-popup-shell .inspector {
    width: var(--size-full);
    max-height: calc(var(--viewport-dynamic-h) - var(--header-h) - (2 * var(--space-6)));
  }

  .work-popup .inspector-actions {
    position: sticky;
    flex-wrap: wrap;
    bottom: 0;
    z-index: var(--z-local-sticky);
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  }

  .work-popup .inspector-actions .feedback {
    flex-basis: var(--size-full);
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .work-popup .inspector-form {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: calc(var(--savebar-mobile-h) + var(--space-8));
  }

  .work-popup-media-column {
    border-right: 0;
  }

  .work-popup .inspector-form > [data-work-save-draft] {
    grid-column: auto;
  }

  .inspector-action-status {
    flex-basis: var(--size-full);
  }

  .work-popup .field-pair,
  .work-popup .field-triple {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-popup .micro-control,
  .work-popup .control{
    min-height: var(--control-h-touch);
  }

  .source-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-3);
  }

  .source-filters .search-field {
    grid-column: 1 / -1;
  }

  .source-filters input,
  .source-filters select,
  .source-filters button,
  .source-inspector input,
  .source-inspector select,
  .source-inspector .micro-control,
  .source-inspector .control,
  .source-inspector .icon-control,
  .source-inspector .inspector-section > summary,
  .source-inspector .ui-disclosure > summary,
  .owner-data-inspector .ui-disclosure > summary,
  .owner-item-inspector .ui-disclosure > summary,
  .source-filters .ui-disclosure > summary {
    min-height: var(--control-h-touch);
  }

  .source-grid {
    min-width: 0;
  }

  .source-row-head {
    display: none;
  }

  .source-row:not(.source-row-head) {
    min-width: 0;
    min-height: var(--size-source-row-mobile);
    grid-template-columns: var(--tracks-source-row-mobile);
    grid-template-rows: auto auto auto;
    padding: var(--space-3);
  }

  .source-row:not(.source-row-head) > .row-cell {
    min-width: 0;
    padding: var(--space-row-inset) var(--space-3);
    border-left: 0;
  }

  .source-row:not(.source-row-head) > .preview-cell {
    grid-column: 1;
    grid-row: 1 / 4;
    align-items: start;
  }

  .source-row:not(.source-row-head) > .source-provider-cell,
  .source-row:not(.source-row-head) > .source-caption-cell,
  .source-row:not(.source-row-head) > .source-review-cell {
    grid-column: 2;
  }

  .source-row:not(.source-row-head) > .source-date-cell,
  .source-row:not(.source-row-head) > .source-media-cell,
  .source-row:not(.source-row-head) > .source-link-cell {
    display: none;
  }

  .workspace > .inspector-placeholder:not(.source-inspector-placeholder) {
    display: none;
  }

  .source-inspector,
  .source-inspector-placeholder {
    position: fixed !important;
    z-index: var(--z-archive-panel);
    top: var(--header-h) !important;
    right: 0;
    bottom: 0;
    left: 0;
    width: var(--size-full);
    height: auto !important;
    border-top: var(--size-hairline) solid var(--border-strong);
    background: var(--surface-raised);
  }

  .owner-data-inspector {
    position: fixed !important;
    z-index: var(--z-archive-panel);
    top: var(--header-h) !important;
    right: 0;
    bottom: 0;
    left: 0;
    width: var(--size-full);
    max-width: none;
    height: calc(var(--viewport-dynamic-h) - var(--header-h)) !important;
    max-height: none !important;
    overflow-y: auto;
    border-top: var(--border-ui-strong);
    background: var(--surface-raised);
  }

  .source-inspector .field-pair,
  .source-inspector .field-triple,
  .source-work-decision,
  .source-attachment {
    grid-template-columns: minmax(0, 1fr);
  }

  .source-inspector .inspector-actions {
    flex-wrap: wrap;
  }

  .source-media-browser .preview-frame { max-height: var(--size-source-preview-mobile-h); }
  .source-media-navigation .micro-control { min-height: var(--size-filter-bar-min); }
}

.taxonomy-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.taxonomy-group, .taxonomy-group .action-row { min-width: 0; }
.location-directory, .location-basename { overflow-wrap: anywhere; min-width: 0; }
ul[data-work-locations] li { grid-template-columns: minmax(0, 1fr); }
.location-preview { width: var(--size-source-thumb); padding: 0; }
.location-preview img { width: var(--size-full); max-height: var(--size-source-thumb); object-fit: contain; }
.taxonomy-group .ui-input { min-width: 0; width: var(--size-full); }
.structured-row-credit { grid-template-columns: minmax(0, 1fr); }


.check-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.triage-decision-editor,
.new-relation {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--size-hairline) solid var(--border);
}

.curation-relations {
  display: grid;
  gap: var(--space-3);
}

.curation-relation {
  display: grid;
  gap: var(--space-relation-gap);
  padding: var(--space-3);
  border-left: var(--space-row-inset) solid var(--muted);
}

.curation-relation.is-active {
  border-left-color: var(--green);
}

.curation-relation.is-reversed {
  opacity: var(--opacity-reversed);
}

@media (max-width: 700px) {

  .taxonomy-editor {
    grid-template-columns: 1fr;
  }

}

@media (max-height: 800px) {
  .inspector-preview {
    padding-block: var(--space-2);
  }

  .inspector-preview .preview-frame {
    width: min(var(--size-full), var(--size-inspector-preview-short));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: var(--duration-reduced) !important;
  }
}

@media print {
  .global-header,
  .filters,

  .inspector-actions {
    display: none !important;
  }

  .workspace {
    display: block;
  }

  .list-pane {
    display: none;
  }

  .inspector {
    position: static;
    height: auto;
    overflow: visible;
  }

  .inspector-form {
    overflow: visible;
  }
}

/* Owner-first archive workspace. */
.owner-session-shell {
  min-height: calc(var(--viewport-dynamic-h) - var(--header-h) - (2 * var(--shell-gutter)));
  display: grid;
  place-items: center;
  padding: var(--space-16);
}
body:has([data-owner-session-form]) {
  padding-top: 0;
}
body:has([data-owner-session-form]) .global-header {
  display: none;
}
body:has([data-owner-session-form]) main,
body:has([data-owner-session-form]) .owner-session-shell {
  min-height: var(--viewport-dynamic-h);
}
body:has([data-owner-session-form]) main {
  padding: 0;
}
body:has([data-owner-session-form]) .owner-session-shell {
  padding: var(--space-16);
}

.owner-session-panel {
  width: min(var(--dialog-w-narrow), var(--size-full));
  display: grid;
  gap: var(--space-8);
  padding: var(--space-12);
  border: var(--border-ui-strong);
  background: var(--surface-raised);
}
.owner-session-login {
  justify-items: start;
  padding: 0;
  border: 0;
  background: none;
}
.owner-session-login .ui-field {
  width: var(--size-full);
}
.owner-session-login .ui-input:focus:not(:focus-visible) {
  outline: none;
}
.owner-session-login .ui-input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.owner-session-panel input,
.owner-session-panel .ui-btn {
  min-height: var(--header-h);
}
.owner-session-panel h1,
.owner-item-inspector h2,
.owner-data-inspector h2{
  margin: 0;
  font-size: var(--type-title);
  line-height: var(--leading-inspector-title);
}
.owner-session-login h1 {
  line-height: var(--leading-tight);
}

.owner-workspace,
.owner-data-workspace {
  min-height: calc(var(--viewport-dynamic-h) - var(--header-h) - (2 * var(--shell-gutter)));
}

.owner-workspace.has-no-inspector,
.owner-data-workspace.has-no-inspector {
  grid-template-columns: minmax(0, 1fr);
}

.owner-list-pane,
.owner-data-main,
.owner-inbox-shell {
  min-width: 0;
  padding: 0;
}

.owner-archive-filters,
.owner-data-controls {
  display: grid;
  grid-template-columns: var(--tracks-owner-filters);
  align-items: end;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: var(--border-ui);
}

.owner-data-controls {
  grid-template-columns: var(--tracks-data-controls);
}

.owner-review-filters {
  grid-template-columns: var(--tracks-source-more);
}

.owner-review-list {
  margin-top: var(--space-4);
  border-top: var(--border-ui-strong);
}

.owner-review-choice {
  border-bottom: var(--border-ui);
}

.owner-review-choice .owner-review-row {
  border-bottom: 0;
}

.owner-review-pane {
  overflow-x: clip;
}

.owner-review-row {
  align-items: start;
}

.owner-review-summary,
.owner-review-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  min-width: 0;
}

.owner-review-primary {
  display: flex;
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
}

.owner-review-next {
  margin: 0;
  font-size: var(--type-subtitle);
  overflow-wrap: anywhere;
  white-space: normal;
}

.owner-review-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--muted);
  font-size: var(--type-caption);
}

.owner-review-warning {
  color: var(--error);
}

.owner-review-state {
  justify-items: end;
  color: var(--muted);
  font-size: var(--type-caption);
  text-align: right;
}

.owner-works-table,
.owner-data-table {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  touch-action: pan-x;
  margin-top: var(--space-4);
  border-top: var(--border-ui-strong);
}

.owner-data-table:focus-visible {
  outline: var(--border-ui-strong);
  outline-offset: var(--space-1);
}

.owner-table-head,
.owner-item-row {
  display: grid;
  grid-template-columns: var(--tracks-owner-row);
  min-width: var(--size-owner-list-min);
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4);
  border-bottom: var(--border-ui);
}

.owner-table-head {
  color: var(--muted);
}

button.owner-item-row,
button.owner-archive-card,
button.owner-data-row {
  width: var(--size-full);
  color: inherit;
  font: inherit;
  text-align: left;
  border: 0;
  border-bottom: var(--border-ui);
  border-radius: var(--radius-control);
  background: var(--colour-clear);
  cursor: pointer;
}

button.owner-item-row:hover,
button.owner-item-row:focus-visible,
button.owner-archive-card:hover,
button.owner-archive-card:focus-visible,
button.owner-data-row:hover,
button.owner-data-row:focus-visible {
  color: inherit;
  background: var(--surface-subtle);
  border-bottom-color: var(--line-strong) !important;
}

button.owner-item-row.is-selected,
button.owner-archive-card.is-selected,
button.owner-data-row.is-selected {
  color: var(--surface);
  background: var(--foreground);
  border-bottom-color: var(--foreground) !important;
  outline: none;
}

.owner-item-title {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.owner-item-title strong,
.owner-item-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-chip {
  width: max-content;
  padding: var(--space-1) var(--space-2);
  border: var(--size-hairline) solid currentColor;
}.owner-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: var(--space-8);
  padding: var(--space-4) 0;
}

/* Dense justified rows. Every tile grows in proportion to its cover's shape,
   so each row fills the width exactly and rows sit flush with one another —
   no ragged column bottoms, and reading order runs left-to-right the way the
   sort claims it does. */
.owner-works-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-5);
  padding-top: var(--space-6);
}

/* Absorbs the leftover space on the final row so one trailing tile keeps its
   natural scale instead of stretching across the whole wall. */
.owner-works-grid::after {
  content: "";
  flex: var(--grow-trailing-space) 1 0;
}

.owner-card-media-count {
  color: var(--muted);
  font-size: var(--type-caption);
  letter-spacing: var(--track-media-count);
}

.work-media-legend,
.owner-media-action-legend,
.media-cover-help,
.media-gallery-cue {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-label);
}

.media-gallery-cue {
  display: none;
}

.work-media-legend {
  padding: 0 0 var(--space-2);
}

.owner-card-media-note {
  color: var(--muted);
  font-size: var(--type-label);
  border-left: var(--size-rule-strong) solid var(--border);
  padding-left: var(--space-2);
}

.continuous-sentinel.is-loading {
  color: var(--muted);
  pointer-events: none;
  animation: sentinel-pulse var(--duration-sentinel-pulse) ease-in-out infinite;
}

@keyframes sentinel-pulse {
  0%, 100% { opacity: var(--opacity-pulse-high); }
  50% { opacity: var(--opacity-pulse-low); }
}

.owner-archive-card {
  min-width: 0;
  display: grid;
  gap: var(--space-4);
  padding: 0 0 var(--space-5);
  border: 0 !important;
  border-bottom: var(--border-ui) !important;
}

.owner-work-card {
  --ar:var(--ratio-work-fallback);
  /* Both the basis and the growth are proportional to the cover's shape, so
     width stays a constant multiple of the aspect ratio and every tile in a
     row lands on exactly the same height. */
  flex: var(--ar) 1 calc(var(--ar) * var(--size-tile-basis));
  /* Keep the floor under the proportional basis: the moment a tall tile gets
     clamped it stops matching its row's height. */
  min-width: var(--size-tile-min);
  max-width: var(--size-full);
  /* A column so the stage chip can sit on the tile's baseline: tiles in a row
     share a height, so the chips line up across the row instead of drifting
     with however many lines the title took. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: 0;
  padding-bottom: var(--space-4);
  transition: none;
}

/* Sibling controls keep selection independent from the existing open button. */
.owner-work-choice {
  position: relative;
  min-width: 0;
  max-width: var(--size-full);
}

.owner-work-choice--gallery {
  flex: var(--ar) 1 calc(var(--ar) * var(--size-tile-basis));
  min-width: var(--size-tile-min);
  display: flex;
}

.owner-work-choice > .owner-work-card {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* The select box only shows on hover, keyboard focus, or once a Work is selected. */
.work-select-control {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-media-label);
  display: grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  opacity: 0;
  background: var(--surface);
  border: var(--border-ui-strong);
  cursor: pointer;
  transition: opacity var(--motion);
}

/* Remove sits in the opposite corner and shows with the select box. */
.work-remove-control {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: var(--z-media-label);
  opacity: 0;
  transition: opacity var(--motion);
}

.owner-work-choice:hover .work-remove-control,
.work-remove-control:focus-visible,
.owner-work-choice:hover .work-select-control,
.work-select-control:focus-within,
.work-select-control:has(input:checked) {
  opacity: 1;
}

.work-select-control input[type="checkbox"] {
  width: var(--size-check);
  height: var(--size-check);
  min-height: 0;
  margin: 0;
  accent-color: var(--foreground);
  cursor: pointer;
}

.work-select-control:focus-within {
  outline: var(--border-ui-strong);
}

.owner-work-choice .owner-item-row,
.owner-work-choice .owner-work-card--text-only .owner-item-title {
  padding-left: calc(var(--control-h-touch) + var(--space-4));
}

.owner-work-choice.is-checked {
  outline: var(--border-ui-strong);
  outline-offset: var(--space-1);
}

.work-tag-bar {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--border-ui);
}

.work-tag-bar p { margin: 0; }
.work-tag-bar[hidden] { display: none; }
.work-tag-controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); }
.work-tag-bar [hidden] { display: none; }
.work-tags-field { display: grid; gap: var(--space-2); flex: 1 1 var(--size-work-tags); min-width: 0; }
.work-tags-field input { width: var(--size-full); min-width: 0; }
[data-work-tags-feedback] { overflow-wrap: anywhere; }
[data-work-tags-feedback] ul { margin: var(--space-4) 0; padding-left: var(--space-10); }
[data-work-tags-feedback] li + li { margin-top: var(--space-3); }
[data-work-tags-feedback] button { margin-left: var(--space-4); }

.owner-work-card .owner-preview {
  align-self: stretch;
}

.owner-work-card .status-chip {
  margin-top: auto;
}

/* Reserve the server-known cover shape before bytes arrive. Some retained
   originals have no stored dimensions, so contain them rather than letting
   the fallback frame crop the decoded image. */
.owner-work-card .owner-preview {
  aspect-ratio: var(--ar);
  overflow: hidden;
  background: var(--surface-raised);
}

.owner-work-card .owner-preview .preview-frame,
.owner-work-card .owner-preview .preview-media,
.owner-work-card .owner-preview img {
  width: var(--size-full);
  height: var(--size-full);
  max-height: none;
  aspect-ratio: auto;
  display: block;
  object-fit: contain;
}

/* Nothing inside a tile is allowed to set the tile's width. */
.owner-work-card .owner-item-title,
.owner-work-card .owner-item-title strong,
.owner-work-card .owner-item-title span {
  min-width: 0;
  max-width: var(--size-full);
  overflow-wrap: anywhere;
}

.owner-work-card .status-chip {
  box-sizing: border-box;
  max-width: var(--size-full);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Titles hold one or two lines so row bottoms stay level. */
/* nowrap from the list rule would defeat the clamp and spill lines over the
   meta below; titles wrap normally and stop at two lines. */
.owner-work-card .owner-item-title strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* Chrome's standard line-clamp overrides the box and lets the clipped
     lines paint over the date; the max-height is the backstop. */
  max-height: calc(2 * var(--leading-snug) * var(--size-em));
  overflow: hidden;
  white-space: normal;
}

.owner-work-card .owner-item-title strong {
  font-size: var(--type-subtitle);
  line-height: var(--leading-snug);
}

.owner-work-card .owner-item-date {
  color: var(--muted);
}

.owner-work-card--text-only {
  min-height: 0;
  padding-top: var(--space-3);
}

button.owner-work-card:hover,
button.owner-work-card:focus-visible {
  color: inherit;
  background: var(--surface-subtle);
  border-bottom-color: var(--line-strong) !important;
}

button.owner-work-card.is-selected {
  color: var(--surface);
  background: var(--foreground);
  border-bottom-color: var(--foreground) !important;
}

button.owner-work-card.is-selected * {
  color: inherit;
}

.owner-preview-placeholder {
  aspect-ratio: var(--ratio-still-fallback);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  color: var(--muted);
  background: var(--surface-sunken);
  border-bottom: var(--border-ui);
  text-align: center;
}

.owner-preview-placeholder span {
  max-width: var(--size-preview-note);
  font-size: var(--type-label);
  line-height: var(--leading-snug);
}

.owner-preview {
  position: relative;
  width: var(--size-full);
  overflow: hidden;
  background: var(--media-backdrop);
  border-bottom: var(--border-ui);
}

.owner-preview .preview-frame {
  width: var(--size-full);
  height: auto;
  aspect-ratio: var(--preview-ar, var(--ratio-video-fallback));
  border: 0;
}

.owner-preview .preview-media {
  width: var(--size-full);
  height: var(--size-full);
  max-height: none;
  object-fit: contain;
}

.owner-archive-card > :not(.owner-preview-placeholder):not(.owner-preview) {
  margin-inline: var(--space-5);
}

/* List cards let titles run; gallery Work cards keep their two-line clamp. */
.owner-archive-card:not(.owner-work-card) .owner-item-title strong {
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  white-space: normal;
}

.owner-item-inspector,
.owner-data-inspector {
  position: sticky;
  top: calc(var(--header-h) + var(--shell-gutter));
  align-self: start;
  max-height: calc(var(--viewport-dynamic-h) - var(--header-h) - (2 * var(--shell-gutter)));
  overflow-y: auto;
  padding: var(--space-8);
  border-left: var(--border-ui-strong);
  background: var(--surface-raised);
}

.owner-item-inspector.empty,
.owner-data-inspector {
  min-height: var(--size-owner-empty);
}

.owner-metadata-form,
.owner-inspector-preview,
.owner-data-inspector dl {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.owner-inspector-preview .preview-frame {
  border-color: var(--border-strong);
}

.owner-date-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.owner-date-fields .field:first-child {
  grid-column: 1 / -1;
}
.owner-data-inspector dl div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-bottom: var(--border-ui);
}
.owner-data-inspector dd {
  overflow-wrap: anywhere;
  color: var(--muted);
}

.owner-r2-media-card {
  display: grid;
  align-content: start;
}

.owner-r2-media-card .preview-frame,
.owner-r2-media-card .media-inbox-audio {
  width: var(--size-full);
  margin: 0;
}

.owner-media-browser {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
}

.owner-media-browser .media-inbox-scopes {
  padding-inline: 0;
}

.owner-media-wall {
  position: relative;
  width: var(--size-full);
  min-height: var(--size-owner-empty);
  contain: layout style;
}

.owner-media-wall-card {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--media-w);
  height: var(--media-h);
  min-width: 0;
  display: block;
  overflow: hidden;
  padding: 0;
  transform: translate3d(var(--media-x), var(--media-y), 0);
  border: 0;
  background: var(--surface-raised);
}

.owner-media-wall-card .preview-frame,
.owner-media-wall-card .preview-empty,
.owner-media-wall-card .media-inbox-audio {
  width: var(--size-full);
  height: var(--size-full);
  min-height: 0;
  aspect-ratio: auto;
  border: 0;
}

.owner-media-wall-card .media-open-button {
  height: var(--size-full);
}

.owner-media-wall-card .preview-media,
.owner-media-wall-card .preview-playback-link {
  width: var(--size-full);
  height: var(--size-full);
  max-height: none;
  object-fit: contain;
}

.owner-media-wall-card .owner-media-copy {
  position: absolute;
  inset: auto 0 0;
  z-index: var(--z-media-label);
  gap: var(--space-2);
  padding: var(--space-6) var(--space-2) var(--space-2);
  opacity: 0;
  background: var(--background-media-label);
  color: var(--media-text);
  transition: opacity var(--motion);
}

.owner-media-wall-card:hover .owner-media-copy,
.owner-media-wall-card:focus-within .owner-media-copy {
  opacity: 1;
}

.owner-media-flag {
  position: absolute;
  inset: var(--space-2) var(--space-2) auto auto;
  z-index: var(--z-media-label);
  padding: var(--size-hairline) var(--space-2);
  background: var(--scrim);
  color: var(--media-text);
  font-size: var(--type-label);
  line-height: var(--leading-media-flag);
  pointer-events: none;
}

.media-sort-select {
  margin-inline-start: auto;
  width: auto;
}

.owner-media-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.owner-media-actions .control {
  min-height: var(--control-h);
  padding: var(--space-1) var(--space-2);
  border-color: currentColor;
  background: var(--scrim);
  color: inherit;
  font-size: var(--type-label);
}

.owner-media-actions .owner-media-action {
  min-width: var(--control-h);
}

.owner-media-action-legend {
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-ui);
}

.owner-media-wall-progress {
  min-height: var(--control-h-touch);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--muted);
}

.owner-media-wall-progress .continuous-sentinel {
  width: auto;
  min-height: var(--control-h);
  margin: 0;
}.owner-media-copy {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
}.owner-media-copy > strong {
  overflow-wrap: anywhere;
  font-size: var(--type-subtitle);
}.owner-media-details dl,
.owner-media-details dd,
.owner-media-details p {
  margin: 0;
}.owner-media-details summary {
  width: max-content;
  color: var(--muted);
  cursor: pointer;
}

.owner-media-details dl {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.owner-media-details dl div {
  display: grid;
  grid-template-columns: var(--tracks-media-details);
  gap: var(--space-4);
}

.owner-media-details dt {
  color: var(--muted);
}


.owner-queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-4);
}

.owner-queue-actions .control {
  min-height: var(--size-control);
  padding: var(--space-2) var(--space-3);
}.owner-match-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  background: var(--border);
}.owner-match-item,
.owner-match-target-empty {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--foreground);
  background: var(--surface);
}.owner-match-item .preview-frame,
.owner-match-item .owner-preview-placeholder {
  width: var(--size-full);
  height: var(--size-match-preview-h);
  aspect-ratio: auto;
  border: 0;
}.owner-match-item .preview-media {
  width: var(--size-full);
  height: var(--size-full);
  max-height: none;
  object-fit: contain;
}

.owner-match-dialog {
  position: fixed;
  inset: var(--space-8);
  z-index: var(--z-archive-panel);
  width: min(var(--dialog-w-wide), calc(var(--viewport-w) - (2 * var(--space-8))));
  max-width: none;
  max-height: calc(var(--viewport-dynamic-h) - (2 * var(--space-8)));
  margin: auto;
  padding: var(--space-8);
  overflow-y: auto;
  color: var(--foreground);
  background: var(--surface-raised);
  border: var(--border-ui-strong);
  border-radius: var(--radius-ui);
  box-shadow: var(--shadow-dialog);
}

.owner-match-dialog p {
  margin: var(--space-4) 0;
}

.owner-match-heading,
.owner-match-search,
.owner-match-decision {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

.owner-match-heading h2 {
  margin: var(--space-1) 0 0;
}

.owner-match-search {
  padding: var(--space-6) 0 var(--space-4);
  border-top: var(--border-ui);
}

.owner-match-search .field {
  min-width: min(var(--size-match-search), var(--size-full));
}

.owner-match-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
  max-height: var(--size-inspector-preview-short);
  overflow-y: auto;
  background: var(--border);
}

button.owner-match-item {
  width: var(--size-full);
  border: 0;
  border-radius: var(--radius-control);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.owner-match-item:hover,
button.owner-match-item:focus-visible,
button.owner-match-item.is-selected {
  box-shadow: var(--shadow-match-selected);
  outline: 0;
}

.owner-match-item > div:last-child {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.owner-match-item span {
  overflow-wrap: anywhere;
}

.owner-match-target-empty {
  min-height: var(--size-work-tags);
  place-content: center;
  color: var(--muted);
  text-align: center;
}

.owner-match-decision {
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: var(--border-ui);
}

.owner-match-more {
  position: relative;
}

.owner-match-more > summary {
  list-style: none;
  cursor: pointer;
}

.owner-match-more > summary::-webkit-details-marker {
  display: none;
}

.owner-match-more-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.owner-data-tabs,
.owner-view-toggle,
.owner-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.owner-view-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Fixed tracks so every row lines up; the table scrolls sideways past the viewport. */
.owner-data-row {
  display: grid;
  grid-template-columns: var(--size-data-title-col) repeat(var(--owner-data-rest, 6), var(--size-data-col));
  width: max-content;
  min-width: var(--size-full);
  justify-content: start; /* buttons centre their grid tracks by default */
  padding: 0;
}

.owner-data-row > * {
  width: auto;
  min-width: var(--size-data-cell-min);
  padding: var(--space-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: var(--border-ui);
}

.owner-data-head {
  color: var(--muted);
  border-bottom: var(--border-ui-strong);
}

/* The first column stays put while the rest scrolls sideways. */
.owner-data-row > :first-child {
  position: sticky;
  left: 0;
  z-index: var(--z-local-sticky);
  background: var(--surface);
  border-right: var(--border-ui-strong);
}

button.owner-data-row:hover > :first-child,
button.owner-data-row:focus-visible > :first-child {
  background: var(--surface-subtle);
}

button.owner-data-row.is-selected > :first-child {
  background: var(--foreground);
}

.owner-data-column-chooser {
  border-bottom: var(--border-ui);
}

.owner-data-column-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.owner-data-inspector dl,
.owner-data-inspector dd {
  margin: 0;
}

.owner-data-summary,
.owner-data-technical-body {
  display: grid;
  gap: var(--space-4);
}

.owner-data-summary {
  padding-bottom: var(--space-8);
}

.owner-data-technical-body {
  padding: var(--space-4);
}

.owner-data-technical-body .control {
  width: max-content;
}

.owner-data-inspector dt {
  color: var(--muted);
}

@media (max-width: 1079px) {
  .owner-workspace,
  .owner-data-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .owner-item-inspector,
  .owner-data-inspector {
    position: static;
    top: auto;
    max-height: none;
    border-top: var(--border-ui-strong);
    border-left: 0;
  }
}

/* Base Works controls precede their mobile overrides. */
.owner-works-tools { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--border-ui); }
.owner-works-tools .owner-archive-filters { flex: 1 1 auto; min-width: 0; grid-template-columns: var(--tracks-works-tools); border: 0; padding: 0; }
.owner-works-tools .owner-view-tools { flex: 0 0 auto; padding: 0 0 0 var(--space-4); }

@media (max-width: 700px) {
  html,
  body {
    min-width: 0;
  }

  .owner-archive-filters,
  .owner-data-controls,
  .owner-date-fields {
    grid-template-columns: minmax(0, 1fr);
  }.owner-archive-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Desktop is the working surface; the phone keeps the simple two-up stack. */
  .owner-works-grid {
    display: block;
    columns: 2;
    column-gap: var(--space-2);
  }

  .owner-work-card {
    width: var(--size-full);
    margin-bottom: var(--space-6);
    break-inside: avoid;
  }

  .owner-work-choice--gallery {
    width: var(--size-full);
    margin-bottom: var(--space-6);
    break-inside: avoid;
  }

  .owner-table-head,
  .owner-item-row {
    min-width: 0;
    grid-template-columns: var(--tracks-owner-row-mobile);
    gap: var(--space-3);
  }

  .owner-item-row .status-chip {
    max-width: var(--size-full);
    justify-self: end;
  }

  .owner-review-filters {
    grid-template-columns: var(--tracks-media-tiles);
  }

  .owner-review-filters > .field,
  .owner-review-filters > .field > input,
  .owner-review-filters > .field > select {
    min-width: 0;
    width: var(--size-full);
  }

  .owner-review-state {
    justify-items: start;
    text-align: left;
  }

  .owner-review-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .inspector-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .inspector-header > div {
    width: var(--size-full);
  }

  .inspector-header > .action-row,
  .inspector-header > .micro-control {
    justify-self: start;
  }

  .media-gallery-cue {
    display: block;
  }


  .owner-works-tools { flex-direction: column; align-items: stretch; }
  .owner-works-tools .owner-archive-filters { grid-template-columns: minmax(0, 1fr); }
  /* A definite width lets auto-fill compute row height inside the column flex. */
  .owner-works-tools .owner-review-filters { width: var(--size-full); grid-template-columns: var(--tracks-media-tiles); }
  .owner-works-tools .owner-view-tools { padding-left: 0; }
  .workflow-triage .media-scope-group { border-inline-end: 0; padding-inline-end: 0; margin-inline-end: 0; }

  .owner-list-pane,
  .owner-data-main,
  .owner-inbox-shell {
    padding: 0;
  }.owner-archive-filters input,
.owner-archive-filters select,
.owner-archive-filters .control,
.owner-queue-actions .control,
.owner-pagination .control,
.owner-inbox-shell .ui-disclosure > summary {
    min-height: var(--control-h-touch);
  }

  .owner-data-table {
    overflow-x: hidden;
    padding-bottom: var(--space-2);
  }

  .owner-data-head {
    display: none;
  }

  .owner-data-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .owner-data-row > * {
    width: auto;
    min-width: 0;
    padding: var(--space-2) var(--space-4);
    white-space: normal;
    border-right: 0;
  }

  .owner-data-row > [data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: var(--type-label);
  }

  .owner-match-dialog {
    inset: var(--space-6);
    width: calc(var(--viewport-w) - (2 * var(--space-6)));
    max-height: calc(var(--viewport-dynamic-h) - (2 * var(--space-6)));
    padding: var(--space-6);
  }.owner-match-pair,
.owner-match-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .owner-match-results {
    max-height: none;
  }

  .owner-match-heading,
  .owner-match-search,
  .owner-match-decision {
    align-items: stretch;
    flex-direction: column;
  }

  .owner-match-search .field {
    min-width: 0;
    width: var(--size-full);
  }

  .owner-match-more[open] {
    flex: 1 1 var(--size-full);
    width: var(--size-full);
  }

  .owner-match-more-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: var(--size-full);
  }

  .owner-match-more-actions .control {
    min-width: 0;
    white-space: normal;
  }

  .owner-session-shell {
    padding: var(--space-6);
  }

  .owner-session-login .ui-btn {
    min-height: var(--header-h) !important;
  }

  .work-popup .inspector-section > summary {
    min-height: var(--control-h-touch);
  }

  .error-state .control {
    min-height: var(--control-h-touch) !important;
  }

  .inspector-recovery button {
    min-height: var(--control-h-touch) !important;
  }

  .control.primary {
    min-height: var(--control-h-touch) !important;
  }

  .owner-media-wall-card .owner-media-copy {
    padding: var(--space-8) var(--space-2) var(--space-2);
    opacity: 1;
  }

  .owner-media-wall-card .owner-media-copy > strong,
  .owner-media-wall-card .owner-media-copy > span {
    display: none;
  }

  .owner-media-actions {
    gap: var(--space-1);
  }

  .owner-media-actions .control {
    min-width: var(--control-h-touch);
    min-height: var(--control-h-touch);
    padding: var(--space-1);
  }

  .owner-media-wall-progress .continuous-sentinel {
    min-height: var(--control-h-touch);
  }

  .text-control,
  .control,
  .micro-control{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  button,
  .scope-link,
  .text-control,
  .control,
  .micro-control,
  input,
  select,
  summary {
    min-width: var(--control-h-touch);
    min-height: var(--control-h-touch);
  }
}


.media-tile-grid {
  display: grid;
  grid-template-columns: var(--tracks-media-tiles);
  gap: var(--space-3);
}

.media-tile {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  margin: 0;
  border: var(--size-hairline) solid var(--border);
  background: var(--surface);
}

.media-tile.is-cover {
  border-color: var(--foreground);
}

.media-tile-open {
  display: block;
  width: var(--size-full);
  aspect-ratio: var(--ratio-square);
  padding: 0;
  overflow: hidden;
  color: inherit;
  border: 0;
  background: var(--media-backdrop, var(--surface-sunken));
  cursor: zoom-in;
}

.media-tile-open .media-tile-image {
  width: var(--size-full);
  height: var(--size-full);
  object-fit: contain;
  display: block;
}

.media-tile-file {
  display: grid;
  place-items: center;
  height: var(--size-full);
  color: var(--muted);
  font-size: var(--type-label);
}

.media-tile-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-2);
  color: var(--muted);
  font-size: var(--type-label);
}

.work-popup .media-tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.media-review-gallery,
.media-review-stage {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
}

.work-popup .media-review-stage .media-tile--featured {
  width: var(--size-full);
}

.work-popup .media-review-stage .media-tile-open {
  display: block;
  width: var(--size-full);
  height: auto;
  max-height: var(--stage-h-max);
  aspect-ratio: auto;
  background: var(--media-bg);
}

.work-popup .media-review-stage .media-tile-open .media-tile-image {
  width: auto;
  height: auto;
  max-height: var(--stage-h-max);
  max-width: var(--size-full);
  margin-inline: auto;
  object-fit: contain;
}

/* Shared button hover must not change the ground used to judge media. */
.work-popup .media-tile-open.ui-btn:hover:not(:disabled):not([aria-disabled="true"]),
.work-popup .media-tile-open.ui-btn:active:not(:disabled) {
  background: var(--media-bg);
}

.media-filmstrip {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--tracks-media-tiles);
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.work-popup .media-filmstrip .media-tile {
  width: var(--size-full);
}

.work-popup .media-tile {
  flex: 0 0 auto;
  max-width: var(--size-full);
}

.work-popup .media-tile-open {
  min-width: 0;
  width: var(--size-full);
  max-width: var(--size-full);
  height: var(--size-tile-basis);
  aspect-ratio: auto;
}

.work-popup .media-tile-open .media-tile-image {
  min-width: 0;
  width: auto;
  height: auto;
  max-width: var(--size-full);
  max-height: var(--size-full);
  margin-inline: auto;
}

.work-popup .media-tile-file {
  width: var(--size-tile-basis);
}

.work-popup .media-download-all {
  width: fit-content;
  justify-self: start;
}

.media-cover-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
}

.media-cover-choice input {
  width: auto;
  min-width: var(--size-cover-choice);
  min-height: var(--size-cover-choice);
  margin: 0;
  accent-color: var(--text);
}

.media-cover-marker {
  min-width: var(--size-em);
  color: var(--text);
  text-align: center;
}

.media-cover-help {
  padding: 0 var(--space-2);
}

.file-truth-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.file-truth-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: var(--size-hairline) solid var(--border);
}

.file-truth-list li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.recorded-file-locations li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.file-truth-list li.source-file-review {
  grid-template-columns: minmax(var(--size-tile-basis-mobile), var(--size-match-preview-h)) minmax(0, 1fr);
  align-items: start;
}

.source-file-preview {
  width: min(var(--size-match-preview-h), var(--size-full));
  min-height: var(--size-source-attachment-h);
}

.source-file-preview img,
.source-file-preview video {
  display: block;
  width: var(--size-full);
  height: auto;
  max-height: var(--size-inspector-preview-short);
  object-fit: contain;
}

.source-file-review-main,
.source-file-decision {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.source-file-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.source-file-heading strong,
.source-file-path {
  min-width: 0;
  overflow-wrap: anywhere;
}

.source-file-decision {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: end;
}

.source-file-decision .action-row,
.source-file-decision .feedback {
  grid-column: 1 / -1;
}

.media-inspector-overlay {
  position: fixed;
  z-index: var(--z-archive-header);
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-8);
  background: var(--background-media-overlay);
}

.media-inspector-body {
  display: grid;
  gap: var(--space-4);
  width: min(var(--size-media-inspector-w), var(--size-full));
  max-height: calc(var(--viewport-dynamic-h) - (2 * var(--space-8)));
  overflow: auto;
  padding: var(--space-5);
  border: var(--border-ui-strong);
  background: var(--surface-raised);
  box-shadow: var(--shadow-popup);
}

.media-inspector-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.media-inspector-media {
  width: var(--size-full);
  max-height: calc(var(--viewport-dynamic-h) - var(--size-work-tags));
  object-fit: contain;
  background: var(--media-backdrop, var(--surface-sunken));
}

.media-open-button {
  display: block;
  width: var(--size-full);
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: center;
  border: 0;
  background: var(--colour-clear);
  cursor: zoom-in;
}

button.owner-preview-placeholder.media-open-button {
  cursor: pointer;
}

.owner-r2-create-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
  padding-top: var(--space-4);
  border-top: var(--size-hairline) solid var(--border);
}

.media-inspector-tags {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, auto);
  gap: var(--space-3);
  align-items: end;
}

.workflow-triage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-4) 0 0;
}
.workflow-triage .media-inbox-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.workflow-triage.media-inbox-scopes { align-items: center; padding-bottom: var(--space-4); border-bottom: var(--border-ui); }
.workflow-triage .media-scope-group { gap: var(--space-1); padding-inline-end: var(--space-3); margin-inline-end: var(--space-2); }
.workflow-triage .media-scope-group:last-of-type { border-inline-end: 0; }
.workflow-triage .control {
  border-color: var(--colour-clear);
  color: var(--text-muted);
}
.workflow-triage .control:hover { border-color: var(--line-strong); color: var(--text); }
.workflow-triage .control.is-active { border-color: var(--text); background: var(--text); color: var(--surface); }

/* Works: the scope tab in the header is the page title; the heading stays for readers. */
.owner-works-pane > .collection-header { position: absolute; width: var(--size-hairline); height: var(--size-hairline); overflow: hidden; clip-path: var(--clip-hidden); }
.owner-works-pane .work-media-legend { padding-top: var(--space-3); font-size: var(--type-caption); }

.workflow-progress {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-label);
}

.media-inspector-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Sort screen (/works?view=sort) */
.sort-page{display:grid;gap:var(--space-4);padding-block:var(--space-4) var(--space-8)}
.sort-head{position:sticky;top:0;z-index:var(--z-media-label);background:var(--surface);display:grid;gap:var(--space-2);padding-block:var(--space-2) var(--space-3);border-bottom:var(--size-hairline) solid var(--border)}
.sort-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4)}
.sort-top h1{font-size:var(--type-title);margin:0}
.sort-status{font:var(--type-caption)/1.3 var(--font-mono);color:var(--text-muted)}
.sort-help{margin:0;color:var(--text-muted);font-size:var(--type-caption);max-width:var(--size-sort-help)}
.sort-tools{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.sort-tools input[type=search]{min-height:var(--control-h);padding-inline:var(--space-3);border:var(--size-hairline) solid var(--border-ui);border-radius:var(--radius-control);background:var(--surface-raised);color:var(--text);min-width:0;flex:0 1 var(--size-sort-search)}
.sort-filters{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.sort-filters button,.sort-chips button,.sort-site{font-size:var(--type-caption);border:var(--size-hairline) solid var(--border-ui);background:var(--surface-raised);color:var(--text);padding:var(--space-row-inset) var(--space-4);border-radius:var(--radius-ui);cursor:pointer}
.sort-filters button span{font-family:var(--font-mono);opacity:var(--opacity-sort-count);margin-left:var(--space-2)}
.sort-filters button[aria-pressed=true],.sort-chips button[aria-pressed=true]{background:var(--text);color:var(--surface);border-color:var(--text)}
.sort-grid{display:grid;grid-template-columns:var(--tracks-sort-grid);gap:var(--space-3)}
.sort-card{border:var(--size-hairline) solid var(--border);border-radius:var(--radius-ui);background:var(--surface-raised);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.sort-card[aria-busy=true]{opacity:var(--opacity-disabled)}
.sort-card.is-context{opacity:var(--opacity-sort-context)}
.sort-thumb{display:grid;place-items:center;aspect-ratio:auto;max-width:var(--size-full);min-height:var(--size-tile-basis-mobile);background:var(--media-bg);color:var(--media-text);font:var(--type-caption) var(--font-mono)}
.sort-thumb img{width:var(--size-full);height:auto;object-fit:contain;display:block;max-height:var(--size-sort-preview-max)}
.sort-body{display:grid;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-3);min-width:0}
.sort-title{font-weight:var(--weight-bold);line-height:var(--leading-tight);overflow-wrap:anywhere}
.sort-meta{display:flex;gap:var(--space-2);font:var(--type-caption) var(--font-mono);color:var(--text-muted)}
.sort-guess{color:var(--text)}
.sort-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sort-card.is-guess .sort-chips button[aria-pressed=true]{background:var(--colour-clear);color:var(--text);border-style:dashed;border-color:var(--text)}
.sort-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.sort-site[aria-pressed=true]{background:var(--text);color:var(--surface);border-color:var(--text);font-weight:var(--weight-bold)}
.sort-ok{background:var(--colour-clear);border:0;padding:var(--space-2) 0;color:var(--text);text-decoration:underline;text-underline-offset:var(--underline-offset);cursor:pointer;font-size:var(--type-caption)}
.sort-empty{grid-column:1/-1;color:var(--text-muted);text-align:center;padding:var(--space-8) 0}
.sort-thumb span{padding:var(--space-20) 0}
.sort-grid{align-items:start}
.sort-row-left{display:flex;gap:var(--space-3);flex-wrap:wrap}
.sort-hide{font-size:var(--type-caption);border:var(--size-hairline) solid var(--border-ui);background:var(--colour-clear);color:var(--text-muted);padding:var(--space-row-inset) var(--space-4);border-radius:var(--radius-ui);cursor:pointer}
.sort-hide:hover{color:var(--text);border-color:var(--text)}
.sort-undo{font:inherit;background:none;border:0;padding:0 0 0 var(--space-3);color:var(--text);text-decoration:underline;cursor:pointer}
.sort-thumb img.is-small{width:auto;max-width:min(var(--size-full),var(--size-filter-field-wide));margin:auto}
.sort-gap{color:var(--text);font-weight:var(--weight-bold)}

/* Simple nav: Sort and Edit works on the left; Inbox and All files as quiet links on the right */
.scope-quiet{opacity:var(--opacity-sort-quiet);font-size:var(--type-caption)}
.scope-quiet:hover,.scope-quiet[aria-current]{opacity:1}
@media (max-width:640px){.scope-quiet{display:none}}