/* Base: token mapping and page chrome. Tokens live in design/tokens.css. */

@import url("../design/tokens.css");

:root {
  --app-bg: var(--ui-color-canvas);
  --app-surface: var(--ui-color-surface);
  --app-surface-muted: var(--ui-color-surface-muted);
  --app-border: var(--ui-color-border);
  --app-border-strong: var(--ui-color-border-strong);
  --app-text: var(--ui-color-text);
  --app-muted: var(--ui-color-text-secondary);
  --app-text-tertiary: var(--ui-color-text-tertiary);
  --app-primary: var(--ui-color-primary);
  --app-primary-light: var(--ui-color-primary-muted);
  --app-primary-hover: var(--ui-color-primary-hover);
  --app-tool-nav-height: 100dvh;
  --app-success: var(--ui-color-success);
  --app-success-muted: var(--ui-color-success-muted);
  --app-warning: var(--ui-color-warning);
  --app-warning-muted: var(--ui-color-warning-muted);
  --app-danger: var(--ui-color-danger);
  --app-danger-muted: var(--ui-color-danger-muted);
  --app-sheet-unchanged-opacity: 0.25;
  --app-focus: 0 0 0 3px color-mix(in srgb, var(--app-primary) 24%, transparent);
  --app-panel-radius: var(--ui-radius-panel);
  --app-panel-border: 1px solid var(--app-border);
  --app-panel-shadow: var(--ui-shadow-none);
  --app-header-sticky-offset: 0px;
  --app-sticky-overlap: 1px;
  --app-z-sticky-header: 50;
  --app-z-sticky-subbar: 40;
  --app-z-dropdown: 48;
  --app-z-drag-overlay: 60;
  --app-z-file-ghost: 70;
  --app-z-toast: 80;
  --app-z-fullscreen-host: 90;
  --app-table-head-bg: var(--app-surface);
  --app-table-head-text: var(--app-primary);
  --app-table-head-fill: var(--app-table-head-bg);
  --app-table-head-edge: var(--app-border);
  --app-table-head-edge-shadow: inset 0 -1px 0 0 var(--app-table-head-edge);
  --app-table-head-bleed-cover: inset 0 2px 0 0 var(--app-table-head-fill);
  --app-table-head-padding-y: 0.65rem;
  --app-table-row-padding-y: 0.5rem;
  --app-table-row-padding-x: 0.5rem;
  --compare-row-hover-bg: color-mix(in srgb, var(--app-text) 3.5%, var(--app-surface));
  --compare-col-hover-bg: var(--ui-table-col-hover-overlay);
  --compare-row-col-hover-bg: color-mix(in srgb, var(--app-text) 4.5%, var(--app-surface));
  --app-diff-mark: #f3dc96;
  --app-diff-mark-text: #5c4a12;
  --app-diff-formula: var(--app-warning-muted);
  --app-diff-structure: var(--app-primary-light);
  --app-diff-merge: #e6d9f2;
  --app-diff-merge-text: #543784;
  --app-diff-missing: var(--app-danger-muted);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  min-width: 320px;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--ui-font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--ui-font-sans);
  line-height: 1.5;
}

button, input, select { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, small { text-wrap: pretty; }
svg { display: block; fill: currentColor; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(.btn, .icon-btn, .info-popover-btn, .filter-bar-reset, .workspace-panel-quiet-btn, .footer-action, .history-clear-btn, .history-open-btn, .history-delete-btn, .multi-select-toggle, .file-remove-btn, .file-order-btn, .sheet-map-remove, .sheet-map-add, summary, .compare-layout-btn, .compare-zoom-btn, .compare-zoom-value, .sheet-tab, .sheet-tab-nav, .dialog-legend-item):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

:where(.btn, .icon-btn, .info-popover-btn, .multi-select-toggle, input, select, summary, .drop-zone, .history-open-btn, .history-delete-btn, .history-clear-btn, .sheet-map-remove, .sheet-map-add, .dialog-legend-item):focus-visible {
  outline: none;
  box-shadow: var(--app-focus);
}

/* Controls */

.btn, .icon-btn {
  min-height: var(--ui-size-control);
  border: 0;
  border-radius: var(--ui-radius-control);
  cursor: pointer;
  transition-property: background-color, color, box-shadow, transform, opacity, border-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  font-size: var(--ui-font-size-md);
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}

.btn svg,
.btn .fa-solid {
  width: 0.9rem;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
}
.btn svg { height: 0.9rem; }

.btn:active:not(:disabled),
.icon-btn:active:not(:disabled) { transform: scale(0.96); }
.multi-select-toggle:active,
.result-settings > summary:active,
#sideBySideBtn:active {
  transform: none;
}
.btn:disabled { cursor: not-allowed; opacity: 0.48; }

.btn-primary {
  color: var(--ui-color-on-primary);
  background: var(--app-primary);
  border-color: var(--app-primary);
}
.btn-primary:hover:not(:disabled) {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}

.btn-ghost {
  color: var(--app-muted);
  background: transparent;
}
.btn-ghost:hover:not(:disabled) {
  color: var(--app-text);
  background: var(--app-surface-muted);
}

.btn-outline {
  color: var(--app-muted);
  background: transparent;
  border-color: currentColor;
}
.btn-outline:hover:not(:disabled) {
  color: var(--app-text);
  background: var(--app-surface-muted);
  border-color: currentColor;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: var(--ui-size-control);
  padding: 0;
  color: var(--app-muted);
  background: transparent;
}
.icon-btn:hover {
  color: var(--app-text);
  background: var(--app-surface-muted);
}
.icon-btn svg,
.icon-btn .fa-solid {
  width: 1.1rem;
  font-size: 1.1rem;
  line-height: 1;
  text-align: center;
}
.icon-btn svg { height: 1.1rem; }

.btn[aria-busy="true"]::before,
.footer-action[aria-busy="true"]::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: control-spin 700ms linear infinite;
}

.footer-action[aria-busy="true"]::after {
  display: inline-block;
  margin-left: 0.35rem;
  vertical-align: -0.1rem;
}

@keyframes control-spin { to { transform: rotate(360deg); } }

/* Shell / tool nav / workspace — ported from sas-tools style */

.app-shell {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 100dvh;
}

.app-shell-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.app-tool-nav {
  --app-tool-nav-gutter: 0.5rem;
  --app-tool-nav-item: 2.25rem;
  --app-tool-nav-inner: 15.25rem;
  --app-tool-nav-expanded: calc(var(--app-tool-nav-inner) + var(--app-tool-nav-gutter) * 2);
  --app-tool-nav-collapsed: calc(var(--app-tool-nav-item) + var(--app-tool-nav-gutter) * 2);
  --app-tool-nav-bg: var(--app-primary);
  --app-tool-nav-hover: color-mix(in srgb, var(--ui-color-on-primary) 12%, transparent);
  --app-tool-nav-active: var(--app-bg);
  --app-tool-nav-ink: color-mix(in srgb, var(--ui-color-on-primary) 78%, var(--app-primary));
  --app-tool-nav-ink-muted: color-mix(in srgb, var(--ui-color-on-primary) 52%, var(--app-primary));
  box-sizing: border-box;
  flex: 0 0 var(--app-tool-nav-expanded);
  width: var(--app-tool-nav-expanded);
  max-width: var(--app-tool-nav-expanded);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 1;
  align-self: flex-start;
  height: var(--app-tool-nav-height);
  max-height: var(--app-tool-nav-height);
  padding: 0.75rem var(--app-tool-nav-gutter) 1rem;
  background: var(--app-tool-nav-bg);
  border: none;
  border-right: none;
  border-radius: 0;
  transition-property: flex-basis, width, max-width;
  transition-duration: 0.28s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.app-tool-nav.is-collapsed {
  flex-basis: var(--app-tool-nav-collapsed);
  width: var(--app-tool-nav-collapsed);
  max-width: var(--app-tool-nav-collapsed);
}

.app-tool-nav-inner {
  box-sizing: border-box;
  width: var(--app-tool-nav-inner);
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.app-tool-nav-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-12);
  padding: 0.2rem 0 0.9rem;
  overflow: hidden;
  position: relative;
}

.app-tool-nav-brand-text {
  flex: 0 0 auto;
  min-width: 0;
}

.app-tool-nav .app-title {
  color: var(--ui-color-on-primary);
  font-size: var(--ui-font-size-lg);
  white-space: nowrap;
}

.app-tool-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-bottom: var(--ui-space-8);
}

.app-tool-nav-foot {
  flex: 0 0 auto;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ui-space-2);
  padding: var(--ui-space-8) 0 0;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--ui-color-on-primary) 16%, transparent);
  box-shadow: none;
  transition-property: width, max-width;
  transition-duration: 0.28s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.app-tool-nav-toggle {
  position: relative;
  left: 0;
  z-index: 1;
  flex: 0 0 var(--app-tool-nav-item);
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--app-tool-nav-item);
  min-height: var(--app-tool-nav-item);
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--app-tool-nav-ink-muted);
  cursor: pointer;
  transition-property: background-color, color, transform, left;
  transition-duration: 0.15s, 0.15s, 0.15s, 0.28s;
}

.app-tool-nav.is-collapsed .app-tool-nav-toggle {
  left: calc(var(--app-tool-nav-item) - 100%);
}

.app-tool-nav-toggle i {
  width: 1rem;
  font-size: 0.7rem;
  line-height: 1;
  text-align: center;
}

.app-tool-nav-toggle:hover {
  background: var(--app-tool-nav-hover);
  color: var(--ui-color-on-primary);
}

.app-tool-nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--app-primary) 24%, transparent);
}

.app-tool-nav-toggle:active {
  transform: scale(0.98);
}

.app-tool-nav-item.app-tool-nav-workspace {
  background: var(--app-surface);
  color: var(--app-primary);
  border: none;
  box-shadow: none;
}

.app-tool-nav-item.app-tool-nav-workspace:hover:not(:disabled) {
  background: var(--app-surface);
  color: var(--app-primary-hover);
}

.app-tool-nav-item.app-tool-nav-workspace:active {
  transform: scale(0.98);
}

.app-tool-nav-item.app-tool-nav-workspace .app-tool-nav-icon {
  opacity: 1;
}

.app-tool-nav-item.app-tool-nav-workspace .app-tool-nav-title {
  font-weight: 650;
}

.app-tool-nav-item.app-tool-nav-workspace .app-workspace-badge {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 1.35rem;
  padding: 0.2em 0.5em;
  border: none;
  background: var(--app-primary-light);
  color: var(--app-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: 0;
  vertical-align: middle;
}

.app-tool-nav-item.app-tool-nav-workspace.is-flash {
  background: var(--app-primary-light);
  color: var(--app-primary);
}

.app-tool-nav.is-collapsed .app-tool-nav-foot,
.app-tool-nav.is-collapsed .app-tool-nav-item.app-tool-nav-workspace {
  width: var(--app-tool-nav-item);
  max-width: var(--app-tool-nav-item);
}

.app-tool-nav.is-collapsed .app-tool-nav-item.app-tool-nav-workspace {
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-height: var(--app-tool-nav-item);
  height: var(--app-tool-nav-item);
}

.app-tool-nav.is-collapsed .app-tool-nav-item.app-tool-nav-workspace .app-tool-nav-icon-wrap {
  position: relative;
}

.app-tool-nav.is-collapsed .app-tool-nav-item.app-tool-nav-workspace .app-tool-nav-title,
.app-tool-nav.is-collapsed .app-tool-nav-item.app-tool-nav-workspace .app-workspace-badge {
  display: none !important;
}

/* Collapse: clip the wide inner rail — keep icon positions stable, fade labels. */
.app-tool-nav-title,
.app-tool-badge,
.app-tool-nav .app-title {
  transition-property: opacity;
  transition-duration: 0.18s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.app-tool-nav.is-collapsed .app-tool-nav-title,
.app-tool-nav.is-collapsed .app-tool-badge,
.app-tool-nav.is-collapsed .app-title {
  opacity: 0;
}

.app-tool-nav-flyout-tip {
  position: fixed;
  z-index: 1080;
  transform: translateY(-50%);
  padding: 0.35rem 0.55rem;
  border-radius: var(--ui-radius-control);
  background: var(--app-text);
  color: var(--app-surface);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--app-text) 18%, transparent);
}

.app-tool-nav-flyout-tip[hidden] {
  display: none !important;
}

.app-tool-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
}

.app-tool-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--ui-space-12);
  width: 100%;
  min-height: var(--app-tool-nav-item);
  padding: 0 0.7rem;
  border: none;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--app-tool-nav-ink);
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  transition-property: background-color, color, width, max-width, padding;
  transition-duration: 0.15s, 0.15s, 0.28s, 0.28s, 0.28s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.app-tool-nav-item:hover:not(:disabled):not(.is-active):not(.app-tool-nav-workspace) {
  background: var(--app-tool-nav-hover);
  color: var(--ui-color-on-primary);
}

.app-tool-nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--app-primary) 24%, transparent);
}

.app-tool-nav-item.is-active {
  background: var(--app-tool-nav-active);
  color: var(--app-primary);
  font-weight: 650;
}

.app-tool-nav-item.is-active .app-tool-nav-icon {
  opacity: 1;
  color: var(--app-primary);
}

.app-tool-nav-item.is-upcoming:not(.is-active) {
  color: var(--app-tool-nav-ink-muted);
  font-weight: 500;
}

.app-tool-nav-item.is-upcoming:not(.is-active) .app-tool-nav-icon {
  opacity: 0.5;
}

.app-tool-nav-item.is-upcoming:hover:not(:disabled):not(.is-active):not(.app-tool-nav-workspace) {
  background: color-mix(in srgb, var(--ui-color-on-primary) 8%, transparent);
  color: color-mix(in srgb, var(--ui-color-on-primary) 70%, var(--app-primary));
}

.app-tool-nav-item.is-upcoming:hover:not(:disabled):not(.is-active):not(.app-tool-nav-workspace) .app-tool-nav-icon {
  opacity: 0.7;
}

.app-tool-nav-icon-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
}

.app-tool-nav-icon {
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.2;
  color: inherit;
  opacity: 0.85;
}

.app-tool-nav-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--ui-font-size-sm);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-align: start;
}

.app-tool-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-height: 1.15rem;
  padding: 0.15em 0.5em;
  border-radius: var(--ui-radius-pill);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.app-tool-badge--upcoming {
  background: var(--app-surface-muted);
  color: var(--app-muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-text) 10%, var(--app-border));
}

.app-tool-badge--preview {
  background: var(--app-primary-light);
  color: var(--app-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary) 22%, var(--app-border));
}

.app-tool-badge--alpha {
  background: color-mix(in srgb, #c47d0e 14%, var(--app-surface, #fff));
  color: #8a5a00;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #c47d0e 28%, var(--app-border));
}

.app-tool-nav-item .app-tool-badge {
  width: 3.55rem;
  margin-left: auto;
  box-sizing: border-box;
  letter-spacing: 0.04em;
}

.app-tool-nav-item .app-tool-badge--upcoming {
  background: color-mix(in srgb, var(--ui-color-on-primary) 8%, transparent);
  color: color-mix(in srgb, var(--ui-color-on-primary) 48%, var(--app-primary));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-color-on-primary) 12%, transparent);
}

.app-tool-nav-item .app-tool-badge--preview {
  background: color-mix(in srgb, var(--ui-color-on-primary) 92%, transparent);
  color: var(--app-primary);
  box-shadow: none;
}

.app-tool-nav-item .app-tool-badge--alpha {
  background: color-mix(in srgb, #f0c14a 88%, transparent);
  color: #5c3d00;
  box-shadow: none;
}

.app-tool-nav-item.is-active .app-tool-badge--upcoming {
  background: var(--app-surface-muted);
  color: var(--app-muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-text) 10%, var(--app-border));
}

.app-tool-nav-item.is-active .app-tool-badge--preview {
  background: var(--app-primary-light);
  color: var(--app-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-primary) 22%, var(--app-border));
}

.app-tool-nav-item.is-active .app-tool-badge--alpha {
  background: color-mix(in srgb, #c47d0e 14%, var(--app-surface, #fff));
  color: #8a5a00;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #c47d0e 28%, var(--app-border));
}

.app-tool-nav-item:hover:not(:disabled):not(.is-active):not(.app-tool-nav-workspace) .app-tool-badge--upcoming {
  background: color-mix(in srgb, var(--ui-color-on-primary) 10%, transparent);
  color: color-mix(in srgb, var(--ui-color-on-primary) 62%, var(--app-primary));
}

.app-tool-nav-item:hover:not(:disabled):not(.is-active):not(.app-tool-nav-workspace) .app-tool-badge--preview {
  background: var(--ui-color-on-primary);
  color: var(--app-primary);
}

.app-tool-nav-item:hover:not(:disabled):not(.is-active):not(.app-tool-nav-workspace) .app-tool-badge--alpha {
  background: #f0c14a;
  color: #5c3d00;
}

.app-tool-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--ui-space-20) 1.5rem var(--ui-space-48);
}

.app-tool-panel[hidden] {
  display: none !important;
}

.tool-placeholder {
  padding: var(--ui-space-8) 0 1rem;
  max-width: 36rem;
}

.tool-placeholder-lead {
  margin-top: var(--ui-space-8);
  font-size: var(--ui-font-size-sm);
  line-height: 1.45;
  color: var(--app-muted);
  text-wrap: pretty;
}

.workspace-empty-note {
  text-wrap: pretty;
  max-width: 36rem;
}

/* Shared workspace status — inventory + tool relevance */

.workspace-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-panel);
  background: color-mix(in srgb, var(--app-surface-muted) 70%, var(--app-surface));
  font-size: var(--ui-font-size-sm);
  line-height: 1.4;
}

.workspace-status-main {
  min-width: 0;
  flex: 1 1 14rem;
  text-wrap: pretty;
}

.workspace-status-inv {
  font-weight: 600;
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
}

.workspace-status-sep {
  color: var(--app-muted);
}

.workspace-status-ready {
  color: var(--app-muted);
}

.workspace-status-miss {
  color: var(--app-text);
  font-weight: 600;
}

.workspace-status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.65rem;
  flex: 0 0 auto;
}

.workspace-status-actions .workspace-panel-quiet-btn,
.workspace-status-actions .btn-link {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
  color: var(--app-primary);
}

.workspace-status-actions .workspace-panel-quiet-btn:hover,
.workspace-status-actions .workspace-panel-quiet-btn:focus-visible,
.workspace-status-actions .btn-link:hover,
.workspace-status-actions .btn-link:focus-visible {
  text-decoration: underline;
}

.workspace-status-cta {
  font-weight: 650;
}

.workspace-dialog {
  width: min(42rem, calc(100vw - 2rem));
}

.workspace-dialog .workspace-modal-actions {
  margin: 0.25rem 0 0.75rem;
}

.workspace-dialog .workspace-modal-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.workspace-dialog .workspace-modal-list {
  margin-top: 0.5rem;
}

.workspace-dialog .confirm-dialog-footer {
  justify-content: flex-end;
}

.workspace-dialog .workspace-modal-clear {
  margin-right: auto;
}

.workspace-modal-error {
  color: var(--app-danger);
  margin: 0;
}

@media (max-width: 900px) {
  .app-shell {
    flex-direction: column;
    gap: 0;
    min-height: 0;
  }

  .app-tool-nav,
  .app-tool-nav.is-collapsed {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: var(--ui-space-12) var(--ui-space-16);
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-color-on-primary) 16%, transparent);
  }

  .app-tool-nav-inner {
    width: 100%;
    height: auto;
    max-height: none;
    padding: 0;
  }

  .app-tool-nav-scroll {
    overflow: visible;
    padding-bottom: 0;
  }

  .app-tool-nav-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--ui-space-8);
    overflow-x: auto;
    padding-bottom: var(--ui-space-4);
    scrollbar-width: thin;
  }

  .app-tool-nav-item {
    flex: 0 0 auto;
    width: var(--app-tool-nav-inner);
    max-width: 70vw;
  }

  .app-tool-nav.is-collapsed .app-tool-nav-item.app-tool-nav-workspace,
  .app-tool-nav.is-collapsed .app-tool-nav-foot {
    width: var(--app-tool-nav-item);
    max-width: var(--app-tool-nav-item);
  }

  .app-tool-nav-foot {
    position: static;
    margin-top: var(--ui-space-8);
    padding: var(--ui-space-8) 0 0;
    background: transparent;
    box-shadow: none;
    align-items: flex-start;
  }

  .app-tool-nav-toggle {
    flex: 0 0 var(--app-tool-nav-item);
  }

  .app-tool-nav.is-collapsed .app-tool-nav-toggle {
    left: 0;
  }

  .app-tool-nav-workspace {
    width: auto;
    max-width: var(--app-tool-nav-inner);
  }

  .app-tool-nav.is-collapsed .app-tool-nav-item.app-tool-nav-workspace {
    width: auto;
    max-width: none;
  }

  .app-tool-main {
    padding-top: var(--ui-space-16);
  }
}

.workspace-modal-lead {
  font-size: var(--ui-font-size-sm);
  text-wrap: pretty;
}

.workspace-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-8);
}

.workspace-modal-empty {
  padding: var(--ui-space-16);
  border-radius: var(--ui-radius-panel);
  background: var(--app-surface-muted);
  font-size: var(--ui-font-size-sm);
  text-wrap: pretty;
}

.workspace-modal-group + .workspace-modal-group {
  margin-top: var(--ui-space-16);
}

.workspace-modal-group-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ui-space-8);
  margin: 0 0 var(--ui-space-8);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-muted);
}

.workspace-modal-group-tag {
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--app-primary);
  font-size: 0.72rem;
}

.workspace-modal-group.is-tool-other {
  opacity: 0.72;
}

.workspace-modal-group.is-tool-relevant .workspace-modal-group-title {
  color: var(--app-text);
}

.workspace-modal-group-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--app-text);
  letter-spacing: 0;
  text-transform: none;
}

.workspace-modal-explorer {
  max-height: none;
}

/* Chronological source history — same column as the drop zone */

.history-section {
  max-width: 35rem;
  margin: 0 auto 2rem;
}

.file-explorer {
  --file-tree-step: 1.2rem;
  --file-tree-pad: 0.75rem;
  --file-tree-icon: 1rem;
  --file-tree-gap: 0.2rem;
  --file-tree-radius: 0.4rem;
  --file-tree-line: color-mix(in srgb, var(--app-text) 52%, var(--app-muted));
  background: var(--app-surface);
  border: var(--app-panel-border);
  border-radius: var(--app-panel-radius);
  box-shadow:
    0 1px 2px rgba(28, 36, 48, 0.06),
    0 0 0 1px color-mix(in srgb, var(--app-border-strong) 35%, transparent);
}

.file-explorer > :first-child {
  border-top-left-radius: calc(var(--app-panel-radius) - 1px);
  border-top-right-radius: calc(var(--app-panel-radius) - 1px);
}

.file-explorer > :last-child {
  border-bottom-left-radius: calc(var(--app-panel-radius) - 1px);
  border-bottom-right-radius: calc(var(--app-panel-radius) - 1px);
}

.file-explorer .file-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem var(--file-tree-pad);
  padding-left: calc(var(--file-tree-pad) + (var(--tree-depth, 0) * var(--file-tree-step)));
  border-bottom: 1px solid color-mix(in srgb, var(--app-border) 55%, transparent);
  font-size: var(--ui-font-size-md);
  transition: background-color 0.12s ease;
}

.file-explorer .file-item:hover {
  background: var(--app-surface-muted);
}

.file-explorer .file-item:last-child {
  border-bottom: none;
}

.file-explorer .file-tree-icon {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: var(--file-tree-icon);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--app-muted);
}

.file-explorer .file-tree-guides {
  position: absolute;
  left: var(--file-tree-pad);
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  width: calc(var(--tree-depth, 0) * var(--file-tree-step));
  pointer-events: none;
}

.file-explorer .file-tree-guide {
  position: relative;
  flex: 0 0 var(--file-tree-step);
  width: var(--file-tree-step);
  height: 100%;
}

.file-explorer .file-tree-guide--pipe::before {
  content: "";
  position: absolute;
  left: calc(var(--file-tree-icon) / 2);
  top: 0;
  bottom: 0;
  border-left: 1px dotted var(--file-tree-line);
}

/* Rounded L for every child; branch continues the vertical below the elbow. */
.file-explorer .file-tree-guide--branch::after,
.file-explorer .file-tree-guide--last::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: calc(var(--file-tree-icon) / 2);
  top: 0;
  width: calc(100% - (var(--file-tree-icon) / 2) - var(--file-tree-gap));
  height: 50%;
  border-left: 1px dotted var(--file-tree-line);
  border-bottom: 1px dotted var(--file-tree-line);
  border-bottom-left-radius: var(--file-tree-radius);
}

.file-explorer .file-tree-guide--branch::before {
  content: "";
  position: absolute;
  left: calc(var(--file-tree-icon) / 2);
  top: calc(50% - var(--file-tree-radius));
  bottom: 0;
  border-left: 1px dotted var(--file-tree-line);
}

@media (forced-colors: active) {
  .file-explorer .file-tree-guide--pipe::before,
  .file-explorer .file-tree-guide--branch::before,
  .file-explorer .file-tree-guide--branch::after,
  .file-explorer .file-tree-guide--last::after,
  .file-explorer .file-folder-label--branch::after {
    border-color: CanvasText;
  }
}

.file-explorer .file-path {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  font-size: var(--ui-font-size-sm);
  word-break: break-all;
}

.file-explorer .file-path .file-name {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--app-text);
}

.file-explorer .file-meta {
  flex-shrink: 0;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.file-explorer .file-folder-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--ui-font-size-sm);
  color: var(--app-text);
  padding: 0.45rem var(--file-tree-pad);
  padding-left: calc(var(--file-tree-pad) + (var(--tree-depth, 0) * var(--file-tree-step)));
  background: color-mix(in srgb, var(--app-border-strong) 18%, var(--app-surface));
  border-bottom: 1px solid var(--app-border-strong);
}

.file-explorer .file-folder-label--nested {
  background: transparent;
  border-bottom-color: color-mix(in srgb, var(--app-border) 55%, transparent);
  font-weight: 600;
}

.file-explorer .file-folder-label .file-tree-icon {
  color: var(--app-primary);
}

/* Stem under folder icon → meets child guides at the row edge. */
.file-explorer .file-folder-label--branch::after {
  content: "";
  position: absolute;
  left: calc(
    var(--file-tree-pad) + (var(--tree-depth, 0) * var(--file-tree-step)) +
      (var(--file-tree-icon) / 2)
  );
  top: calc(50% + (var(--file-tree-icon) / 2) + var(--file-tree-gap));
  bottom: -1px;
  border-left: 1px dotted var(--file-tree-line);
  pointer-events: none;
}

.file-explorer .file-folder-name {
  min-width: 0;
  word-break: break-all;
}

.file-explorer .file-remove-btn {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: none;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--app-muted);
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.15s, color 0.15s, transform 0.1s;
}

.file-explorer .file-remove-btn::before {
  content: "";
  position: absolute;
  inset: -0.625rem;
}

.file-explorer .file-remove-btn:hover {
  background: rgba(26, 35, 50, 0.06);
  color: var(--app-text);
}

.file-explorer .file-remove-btn:active {
  transform: scale(0.96);
}

/* Filter bar — pills above the result panel, same language as the model tools */

.filter-bar,
.filter-bar .filter-bar-fields {
  overflow: visible;
}

/* Header / footer (legacy; brand now in side nav) */

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--app-z-sticky-header);
  flex-shrink: 0;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  margin-bottom: 1.25rem;
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: var(--ui-size-header);
  padding: 0.5rem 1.5rem;
}

.app-title {
  color: var(--app-text);
  font-size: var(--ui-font-size-xl);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.app-header-context {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.app-header-context .btn-outline {
  color: var(--app-muted);
  background: transparent;
}

.app-context-note {
  color: var(--app-muted);
  font-size: var(--ui-font-size-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.app-main {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.app-footer {
  flex-shrink: 0;
  margin-top: auto;
  background: var(--app-surface);
  border-top: 1px solid var(--app-border);
}

.app-footer-inner {
  padding: 0.5rem 1.5rem;
  color: var(--app-muted);
  font-size: var(--ui-font-size-md);
}

.app-footer-inner p { line-height: 1.5; }

.app-footer-inner a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.app-footer-inner a:hover {
  color: var(--app-text);
}

.footer-action,
.workspace-panel-quiet-btn {
  position: relative;
  padding: 0;
  border: 0;
  color: var(--app-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
}

.footer-action::before,
.workspace-panel-quiet-btn::before {
  content: "";
  position: absolute;
  inset: -0.5rem -0.35rem;
}

.footer-action:hover,
.workspace-panel-quiet-btn:hover,
.footer-action:focus-visible,
.workspace-panel-quiet-btn:focus-visible {
  color: var(--app-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Entry drop zone — one compact surface on the canvas */

.upload-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: min(28rem, calc(100dvh - 10rem));
  background: transparent;
  padding: 2.5rem 1rem 3rem;
}

.upload-section.has-history {
  min-height: 0;
  align-items: stretch;
  padding-top: 2rem;
  padding-bottom: 1.25rem;
}

.drop-zone {
  box-sizing: border-box;
  width: 100%;
  max-width: 36rem;
  min-height: 16.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.75rem 2.25rem;
  text-align: center;
  cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--app-primary) 28%, var(--app-border));
  border-radius: var(--app-panel-radius);
  background: var(--app-surface);
  transition-property: border-color, background-color, box-shadow;
  transition-duration: 0.18s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.drop-zone:hover,
.drop-zone:focus-visible {
  border-color: var(--app-primary);
  border-style: solid;
  background: color-mix(in srgb, var(--app-primary-light) 55%, var(--app-surface));
  outline: none;
}

.drop-zone.is-dragging,
.drop-zone.drag-over {
  border-color: var(--app-primary);
  border-style: solid;
  background: var(--app-primary-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 16%, transparent);
}

.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.drop-zone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: var(--ui-radius-control);
  background: var(--app-primary-light);
  color: var(--app-primary);
  font-size: 1.25rem;
  line-height: 1;
}

.drop-zone:hover .drop-zone-icon,
.drop-zone:focus-visible .drop-zone-icon,
.drop-zone.is-dragging .drop-zone-icon,
.drop-zone.drag-over .drop-zone-icon {
  background: var(--app-surface);
}

.drop-zone-title {
  margin: 0 0 0.35rem;
  color: var(--app-text);
  font-size: var(--ui-font-size-lg);
  font-weight: 650;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.drop-zone-hint {
  max-width: 24rem;
  margin: 0 0 1.35rem;
  color: var(--app-muted);
  font-size: var(--ui-font-size-sm);
  line-height: 1.45;
  text-wrap: pretty;
}

.drop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

.drop-actions .btn {
  min-width: 9.5rem;
}

.drop-zone.is-loading {
  cursor: progress;
  pointer-events: none;
}

.drop-zone.is-loading .drop-zone-hint {
  font-variant-numeric: tabular-nums;
  max-width: 28rem;
  overflow-wrap: anywhere;
}

.file-drag-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--app-z-drag-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--app-bg) 78%, transparent);
  backdrop-filter: blur(3px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.file-drag-overlay.is-active {
  pointer-events: auto;
  opacity: 1;
}

.file-drag-overlay-panel {
  width: min(100%, 28rem);
  padding: 2.5rem 2rem;
  text-align: center;
  border: 2px dashed var(--app-primary);
  border-radius: var(--app-panel-radius);
  background: var(--app-surface);
}

.file-drag-overlay-icon {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 auto 0.75rem;
  color: var(--app-primary);
  font-size: 2rem;
  line-height: 1;
}

.file-drag-overlay-title {
  font-size: var(--ui-font-size-xl);
  font-weight: 600;
}

.file-drag-overlay-hint {
  margin-top: 0.25rem;
  color: var(--app-muted);
  font-size: var(--ui-font-size-sm);
}

/* Chronological comparison history — same column as the drop zone */

.history-section {
  max-width: 35rem;
  margin: 0 auto 2rem;
}

.history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-16);
  margin-bottom: var(--ui-space-8);
}

.history-heading {
  margin: 0;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.history-clear-btn {
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--app-muted);
  font: inherit;
  font-size: var(--ui-font-size-sm);
  line-height: inherit;
  cursor: pointer;
}

.history-clear-btn:hover,
.history-clear-btn:focus-visible {
  color: var(--app-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.history-day {
  margin: 0 0 var(--ui-space-16);
}

.history-day:last-child {
  margin-bottom: 0;
}

.history-day-label {
  padding: var(--ui-space-4) 0;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.history-item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--app-border);
}

.history-day-label + .history-item {
  border-top: 1px solid var(--app-border);
}

.history-open-btn {
  display: grid;
  flex: 1;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: var(--ui-space-12);
  align-items: baseline;
  min-width: 0;
  min-height: var(--ui-size-control);
  padding: var(--ui-space-8) var(--ui-space-4);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.history-open-btn:hover,
.history-open-btn:focus-visible {
  background: var(--app-surface-muted);
}

.history-time {
  color: var(--app-muted);
  font-family: var(--ui-font-mono);
  font-size: var(--ui-font-size-sm);
  font-variant-numeric: tabular-nums;
}

.history-title {
  overflow: hidden;
  color: var(--app-text);
  font-size: var(--ui-font-size-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-meta {
  color: var(--app-text-tertiary);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.history-delete-btn {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--app-muted);
  cursor: pointer;
}

.history-delete-btn:hover,
.history-delete-btn:focus-visible {
  color: var(--app-danger);
  background: var(--app-danger-muted);
}

@media (max-width: 480px) {
  .history-open-btn {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }

  .history-meta {
    grid-column: 2;
  }
}

/* Workspace as a text line */

.workspace-panel {
  padding: 0.1rem 0 0.15rem;
  margin-bottom: 0.75rem;
}

.workspace-program-label {
  color: var(--app-text);
  font-size: var(--ui-font-size-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.workspace-panel-selection {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
  color: var(--app-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.workspace-selection-delimiter { color: var(--app-muted); }

/* File chips */

.files-strip { margin-bottom: 0.75rem; }

.file-list {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 1px 1px 0.35rem;
  scroll-snap-type: x proximity;
}

.file-list.is-sorting {
  cursor: grabbing;
}

.file-chip {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  max-width: min(27rem, 80vw);
  padding: 0.35rem 0.35rem 0.35rem 0.45rem;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-control);
  background: var(--app-surface);
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-drag: none;
  transition-property: border-color, background-color, box-shadow;
  transition-duration: 150ms;
}

.file-chip.is-sortable {
  touch-action: none;
}

.file-chip.is-placeholder {
  border: 1.5px dashed color-mix(in srgb, var(--app-primary) 55%, var(--app-border-strong));
  background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface-muted));
  box-shadow: none;
}

.file-chip.is-placeholder > * {
  visibility: hidden;
}

.file-chip-ghost {
  position: fixed;
  z-index: var(--app-z-file-ghost);
  margin: 0;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(28, 36, 48, 0.16);
  opacity: 0.96;
}

body.is-file-sorting {
  cursor: grabbing;
  user-select: none;
}

.file-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0.9rem;
  color: var(--app-muted);
  cursor: grab;
}

.file-chip:active .file-drag-handle { cursor: grabbing; }
.file-drag-handle svg,
.file-drag-handle .fa-solid {
  width: 0.7rem;
  font-size: 0.75rem;
  line-height: 1;
}
.file-drag-handle svg { height: 0.95rem; }

.file-chip-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.05rem 0.2rem 0.05rem 0;
}

.file-chip-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
}

.file-name {
  min-width: 0;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ui-font-size-sm);
  font-weight: 600;
  line-height: 1.2;
}

.file-original {
  min-width: 0;
  max-width: 15rem;
  overflow: hidden;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-order {
  display: flex;
  flex: none;
  align-items: center;
}

.file-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  color: var(--app-muted);
  background: transparent;
  cursor: pointer;
}

.file-order-btn svg,
.file-order-btn .fa-solid {
  width: 0.75rem;
  font-size: 0.75rem;
  line-height: 1;
}
.file-order-btn svg { height: 0.75rem; }
.file-order-btn:hover:not(:disabled) {
  color: var(--app-text);
  background: rgba(26, 35, 50, 0.06);
}
.file-order-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

.file-remove-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  margin-left: 0.15rem;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  color: var(--app-muted);
  background: transparent;
  cursor: pointer;
  transition-property: background-color, color, transform, opacity;
  transition-duration: 150ms;
}

.file-remove-btn::before { content: ""; position: absolute; inset: -0.625rem; }
.file-remove-btn svg,
.file-remove-btn .fa-solid {
  width: 0.85rem;
  font-size: 0.85rem;
  line-height: 1;
}
.file-remove-btn svg { height: 0.85rem; }
.file-remove-btn:hover {
  color: var(--app-text);
  background: rgba(26, 35, 50, 0.06);
}
.file-remove-btn:active { transform: scale(0.96); }

@media (hover: hover) {
  .file-order,
  .file-remove-btn { opacity: 0; }
  .file-order {
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms, visibility 150ms;
  }
  .file-chip:hover .file-order,
  .file-chip:focus-within .file-order,
  .file-chip-ghost .file-order,
  .file-chip:hover .file-remove-btn,
  .file-chip:focus-within .file-remove-btn,
  .file-chip-ghost .file-remove-btn {
    opacity: 1;
  }
  .file-chip:hover .file-order,
  .file-chip:focus-within .file-order,
  .file-chip-ghost .file-order {
    visibility: visible;
  }
  .file-chip:hover .file-order,
  .file-chip:focus-within .file-order {
    pointer-events: auto;
  }
  .file-chip.is-placeholder .file-order,
  .file-chip.is-placeholder .file-remove-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Comparison settings — quiet strip, not nested cards */

.settings {
  margin: 0.25rem 0 1rem;
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
}

.settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  cursor: pointer;
  color: var(--app-text);
  font-size: var(--ui-font-size-sm);
  font-weight: 650;
  list-style: none;
}

.settings summary::-webkit-details-marker { display: none; }

.settings summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 0.25rem 0 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease-out;
}

.settings[open] summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.settings-trace {
  flex: 1;
  text-align: right;
  color: var(--app-text-tertiary);
  font-size: var(--ui-font-size-xs);
  font-weight: 500;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  padding: 0.15rem 0 0.8rem;
}

.settings-group { min-width: 0; }

.settings-group-label,
.result-settings-group-label {
  margin: 0 0 0.35rem;
  color: var(--app-muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field {
  display: grid;
  gap: var(--ui-space-6);
  max-width: 22rem;
  margin-bottom: 0.35rem;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
}

.field select,
.field input {
  min-height: var(--ui-size-control);
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-control);
  color: var(--app-text);
  background: var(--app-surface);
}

.field select,
.field input {
  width: 100%;
  padding: 0 0.65rem;
}

.check-field {
  display: flex;
  align-items: center;
  gap: var(--ui-space-8);
  min-height: 2.25rem;
  padding: 0.15rem 0.35rem;
  border-radius: var(--ui-radius-control);
  color: var(--app-muted);
  font-size: var(--ui-font-size-sm);
  cursor: pointer;
}

.check-field:hover { background: rgba(26, 35, 50, 0.04); }
.check-field input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--app-primary);
}

.settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.65rem 0 0.8rem;
  border-top: 1px solid var(--app-border);
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
}

/* Messages and metrics */

.message-area:empty { display: none; }
.message-area { margin: 0 0 1rem; }

.message {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, var(--app-border));
  border-radius: var(--ui-radius-control);
  font-size: var(--ui-font-size-md);
}

.message + .message { margin-top: var(--ui-space-8); }
.message.warning { color: var(--app-warning); background: var(--app-warning-muted); }
.message.error { color: var(--app-danger); background: var(--app-danger-muted); }
.message.success { color: var(--app-success); background: var(--app-success-muted); }
.message > svg,
.message > .fa-solid {
  width: 0.95rem;
  margin-top: 0.15rem;
  flex: none;
  font-size: 0.95rem;
  line-height: 1;
}
.message > svg { height: 0.95rem; }
.message > span { flex: 1; min-width: 0; }

.message-close {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  color: currentColor;
  background: transparent;
  cursor: pointer;
  opacity: 0.62;
}
.message-close::after { content: ""; position: absolute; inset: -4px 0; }
.message-close:hover { background: rgba(255, 255, 255, 0.45); opacity: 1; }
.message-close svg,
.message-close .fa-solid {
  width: 0.8rem;
  font-size: 0.8rem;
  line-height: 1;
}
.message-close svg { height: 0.8rem; }

/* Analysis hints — quiet surfaces, not dismissible alerts */

.sheet-map-section {
  margin: 0.15rem 0 1.1rem;
}

.sheet-map-section .workspace-program-label { margin-bottom: 0; }

.hints-section { margin: 0.25rem 0 1.25rem; }

.hints-section .workspace-program-label { margin-bottom: 0.5rem; }

.hints-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hint-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-panel-radius);
  background: var(--app-surface);
  overflow: hidden;
}

.hint-card-header { padding: 0.65rem 0.9rem 0.55rem; }

.hint-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hint-card-title {
  font-size: var(--ui-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hint-card-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0.08rem 0.42rem;
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.hint-warning .hint-card-count {
  background: #fff0bf;
  color: #6b5400;
  border: 1px solid #d9c26a;
}

.hint-info .hint-card-count {
  background: var(--app-primary-light);
  color: var(--app-primary);
}

.hint-card-subtitle {
  margin: 0.2rem 0 0;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 400;
  line-height: 1.4;
  max-width: 42em;
}

.hint-card-body {
  padding: 0 0.9rem 0.75rem;
}

.hint-card-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--app-text);
  font-size: var(--ui-font-size-sm);
  line-height: 1.5;
}

.hint-card-list li + li { margin-top: 0.2rem; }

.filter-bar {
  margin-bottom: 1rem;
  overflow: visible;
}

.filter-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.filter-bar-label {
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.filter-bar-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
}

.filter-bar-reset {
  flex-shrink: 0;
  padding: 0.25rem 0;
  border: 0;
  color: var(--app-muted);
  background: transparent;
  cursor: pointer;
  font-size: var(--ui-font-size-sm);
  text-decoration: none;
}
.filter-bar-reset:hover,
.filter-bar-reset:focus-visible {
  color: var(--app-text);
  text-decoration: underline;
}

.filter-bar .metrics {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.1rem 1.25rem;
  margin-left: auto;
  padding: 0.15rem 0;
}

.metric { display: flex; flex-direction: column; gap: 0.1rem; }

.metric strong {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--app-text);
  opacity: 0.94;
}

.metric--warning strong { color: var(--app-warning); opacity: 1; }
.metric--danger strong { color: var(--app-danger); opacity: 1; }
.metric--quiet strong {
  color: var(--app-text-tertiary);
  opacity: 1;
}

.metric span {
  color: var(--app-muted);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.multi-select-dropdown { position: relative; }

.multi-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-control);
  color: var(--app-text);
  background: var(--app-surface);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: none;
}

.multi-select-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.45rem;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  opacity: 0.4;
  transform: none;
}

.multi-select-toggle--active {
  border-color: var(--app-border-strong);
}

.multi-select-toggle--active .multi-select-summary { font-weight: 600; }

.multi-select-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.multi-select-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: var(--app-z-dropdown);
  min-width: max(16rem, 100%);
  max-width: min(48rem, calc(100vw - 2rem));
  width: max-content;
  padding: 0;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-panel);
  background: var(--app-surface);
  box-shadow: 0 0.35rem 1rem rgba(26, 35, 50, 0.1);
}

.viewport-scroll-menu-inner,
.multi-select-menu {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(24rem, calc(100vh - 8rem));
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.multi-select-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--app-border);
  font-size: 0.8125rem;
}

.multi-select-action {
  padding: 0;
  border: 0;
  color: var(--app-primary);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}
.multi-select-action:hover { text-decoration: underline; }

.multi-select-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: max-content;
  min-width: 100%;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  white-space: nowrap;
}
.multi-select-option:hover { background: var(--app-surface-muted); }
.multi-select-option input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15em;
  accent-color: var(--app-primary);
}
.multi-select-option-count {
  margin-left: auto;
  color: var(--app-text-tertiary);
  font-size: var(--ui-font-size-xs);
  font-variant-numeric: tabular-nums;
}

/* Result panel — table is the only card */

.results {
  min-width: 0;
  max-width: 100%;
}

.compare-results-panel {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  border: var(--app-panel-border);
  border-radius: var(--app-panel-radius);
  background: var(--app-surface);
  box-shadow: var(--app-panel-shadow);
  --result-tabs-offset: 3.5rem;
}

.result-tabs-bar {
  position: sticky;
  top: calc(var(--app-header-sticky-offset, 0px) - var(--app-sticky-overlap));
  z-index: var(--app-z-sticky-subbar);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  min-height: 3.5rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border-radius: var(--app-panel-radius) var(--app-panel-radius) 0 0;
  background: var(--app-surface);
  box-shadow: inset 0 1px 0 0 var(--app-surface), inset 0 -1px 0 0 var(--app-border);
}

.result-tabs-bar.is-stuck {
  border-radius: 0;
  box-shadow:
    0 -2px 0 0 var(--app-surface),
    inset 0 2px 0 0 var(--app-surface),
    inset 0 -1px 0 0 var(--app-border);
}

.result-tabs-title {
  flex-shrink: 0;
  color: var(--app-text);
  font-size: var(--ui-font-size-lg);
  font-weight: 600;
  line-height: 1.25;
}

.result-tabs-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  min-width: 0;
  flex-shrink: 0;
}

.result-tabs-actions .btn-ghost {
  color: var(--app-muted);
}
.result-tabs-actions .btn-ghost:hover:not(:disabled) {
  color: var(--app-text);
  background: var(--app-surface-muted);
}
.result-tabs-actions .btn-ghost i {
  display: none;
}
.result-tabs-actions .btn-primary {
  padding-inline: 0.7rem;
  font-weight: 600;
}

.compare-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
  width: max-content;
  height: var(--ui-size-control);
  padding: var(--ui-space-2);
  gap: 0;
  background: var(--app-bg);
  border: none;
  border-radius: var(--ui-radius-panel);
}

.compare-tabs-seg {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--ui-size-control) - 2 * var(--ui-space-2));
  padding: 0 var(--ui-space-12);
  border-radius: var(--ui-radius-control);
  color: var(--app-muted);
  font-size: var(--ui-font-size-sm);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  transition-property: color, background-color;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.compare-tabs-seg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 40px;
  transform: translateY(-50%);
}

.compare-tabs-seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.compare-tabs-seg:hover {
  color: var(--app-primary);
}

.compare-tabs-seg:has(:checked) {
  color: var(--app-primary);
  font-weight: 600;
  background: var(--app-surface);
}

.compare-tabs-seg:has(:focus-visible) {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--app-primary) 25%, transparent);
  z-index: 1;
}

.result-settings { position: relative; flex: none; }
.result-settings > summary { list-style: none; }
.result-settings > summary::-webkit-details-marker,
.result-settings > summary::marker { display: none; }
.result-settings > summary::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.result-settings[open] > summary {
  color: var(--app-text);
  background: var(--app-surface-muted);
}

.result-settings-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: var(--app-z-dropdown);
  width: 20rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-panel);
  background: var(--app-surface);
  box-shadow: 0 0.35rem 1rem rgba(26, 35, 50, 0.1);
}

.result-settings-group + .result-settings-group {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--app-border);
}

.result-settings-group-label { padding: 0.1rem 0.55rem 0.3rem; }

.result-settings-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.55rem;
  border-radius: var(--ui-radius-control);
  cursor: pointer;
  font-size: var(--ui-font-size-sm);
  line-height: 1.35;
}
.result-settings-option:hover { background: rgba(26, 35, 50, 0.04); }
.result-settings-option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.48;
}
.result-settings-option:has(input:disabled):hover { background: transparent; }
.result-settings-option input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--app-primary);
}

.result-settings-field {
  display: grid;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem 0.45rem;
  color: var(--app-text);
  font-size: var(--ui-font-size-sm);
}

.result-settings-field > span,
.result-settings-field-label {
  font-size: 0.8125rem;
  font-weight: 600;
}

.result-settings-field-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.25rem;
}

.info-popover-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--app-muted);
  line-height: 1;
  cursor: pointer;
}

.info-popover-btn:hover,
.info-popover-btn:focus-visible,
.info-popover-btn[aria-expanded="true"] {
  color: var(--app-primary);
}

.info-popover {
  --popover-arrow-width: 1rem;
  --popover-arrow-height: 0.5rem;
  position: fixed;
  inset: unset;
  width: max-content;
  max-width: min(26rem, calc(100vw - 1.5rem));
  height: fit-content;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-panel);
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.info-popover-arrow {
  position: absolute;
  left: calc(var(--popover-caret, 1rem) - 0.5 * var(--popover-arrow-width));
  width: var(--popover-arrow-width);
  height: var(--popover-arrow-height);
}

.info-popover-arrow::before,
.info-popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.info-popover[data-placement="bottom"] .info-popover-arrow {
  top: calc(-1 * var(--popover-arrow-height) - 1px);
}

.info-popover[data-placement="bottom"] .info-popover-arrow::before,
.info-popover[data-placement="bottom"] .info-popover-arrow::after {
  border-width: 0 calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height);
}

.info-popover[data-placement="bottom"] .info-popover-arrow::before {
  top: 0;
  border-bottom-color: var(--app-border);
}

.info-popover[data-placement="bottom"] .info-popover-arrow::after {
  top: 1px;
  border-bottom-color: var(--app-surface-muted);
}

.info-popover[data-placement="top"] .info-popover-arrow {
  bottom: calc(-1 * var(--popover-arrow-height) - 1px);
}

.info-popover[data-placement="top"] .info-popover-arrow::before,
.info-popover[data-placement="top"] .info-popover-arrow::after {
  border-width: var(--popover-arrow-height) calc(var(--popover-arrow-width) * 0.5) 0;
}

.info-popover[data-placement="top"] .info-popover-arrow::before {
  bottom: 0;
  border-top-color: var(--app-border);
}

.info-popover[data-placement="top"] .info-popover-arrow::after {
  bottom: 1px;
  border-top-color: var(--app-surface);
}

.info-popover-header {
  position: relative;
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--app-text);
  background: var(--app-surface-muted);
  border-bottom: 1px solid var(--app-border);
  border-radius: calc(var(--ui-radius-panel) - 1px) calc(var(--ui-radius-panel) - 1px) 0 0;
}

.info-popover[data-placement="bottom"] .info-popover-header::before {
  position: absolute;
  top: 0;
  left: var(--popover-caret, 1rem);
  width: var(--popover-arrow-width);
  margin-left: calc(-0.5 * var(--popover-arrow-width));
  content: "";
  border-bottom: 1px solid var(--app-surface-muted);
}

.info-popover-body {
  padding: 1rem;
  color: var(--app-text);
}

.info-popover-body p {
  margin: 0 0 0.5rem;
}

.info-popover-body p:last-child {
  margin-bottom: 0;
}

.info-popover-meta {
  color: var(--app-muted);
}

.info-popover-body code {
  font-family: var(--ui-font-mono);
  font-size: 0.875em;
  color: var(--app-primary);
  background: var(--app-primary-light);
  padding: 0.1em 0.35em;
  border-radius: var(--ui-radius-control);
}

.result-settings-field select,
.result-settings-field input {
  width: 100%;
  min-height: var(--ui-size-control);
  padding: 0 0.55rem;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-control);
  color: var(--app-text);
  background: var(--app-surface);
  font-size: var(--ui-font-size-sm);
}

.result-settings-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.35rem 0.55rem 0.15rem;
  border-top: 1px solid var(--app-border);
  margin-top: 0.35rem;
}

.search-group {
  display: flex;
  align-items: stretch;
  width: 220px;
  min-width: 0;
  flex-shrink: 0;
}

.search-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--app-border);
  border-right: 0;
  border-radius: var(--ui-radius-control) 0 0 var(--ui-radius-control);
  background: var(--app-surface);
  color: var(--app-muted);
}

.search-group-icon svg,
.search-group-icon .fa-solid {
  width: 0.85rem;
  font-size: 0.85rem;
  line-height: 1;
}
.search-group-icon svg { height: 0.85rem; }

.search-group input {
  width: 100%;
  min-height: var(--ui-size-control);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--app-border);
  border-radius: 0 var(--ui-radius-control) var(--ui-radius-control) 0;
  color: var(--app-text);
  background: var(--app-surface);
  font-size: var(--ui-font-size-md);
  line-height: 1.5;
}

.results-table-content {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  border-radius: 0 0 var(--app-panel-radius) var(--app-panel-radius);
}

.results-table-wrap {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  /* clip, not visible: auto+visible computes to auto/auto and shows a Windows hover scrollbar. */
  overflow-y: clip;
  --compare-col-hover-bg: var(--ui-table-col-hover-overlay);
}

.results-sticky-head {
  display: none;
  position: fixed;
  z-index: calc(var(--app-z-sticky-subbar) + 1);
  overflow: hidden;
  background: var(--app-table-head-bg);
  box-shadow: var(--app-table-head-edge-shadow);
  scrollbar-width: none;
}

.results-sticky-head::-webkit-scrollbar {
  display: none;
}

.results-sticky-head.is-pinned {
  display: block;
}

.results-sticky-head .diff-table {
  margin: 0;
}

.results-bottom-scroll {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: calc(var(--app-z-sticky-subbar) + 1);
  display: none;
  height: 0.95rem;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--app-border);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(2px);
}

.results-bottom-scroll.is-visible {
  display: block;
}

.results-bottom-scroll-inner {
  height: 1px;
}

/* One overlay bar instead of restyling every body cell in the column. */
.table-col-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  pointer-events: none;
  background: var(--compare-col-hover-bg, var(--ui-table-col-hover-overlay));
}

.table-col-hover-overlay.is-visible {
  display: block;
}

.diff-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ui-font-size-sm);
}

.diff-table th {
  /* top: 0 — viewport stick uses .results-sticky-head (overflow-x creates a containing block). */
  position: sticky;
  top: 0;
  z-index: 3;
  padding: var(--app-table-head-padding-y) var(--app-table-row-padding-x);
  color: var(--app-table-head-text);
  background: var(--app-table-head-fill);
  /* Bleed-cover must be defined here: on :root, var(--app-table-head-fill) already
     resolves to white and is inherited as a concrete color. */
  --app-table-head-bleed-cover: inset 0 2px 0 0 var(--app-table-head-fill);
  box-shadow:
    0 -2px 0 0 var(--app-table-head-fill),
    var(--app-table-head-bleed-cover),
    var(--app-table-head-edge-shadow);
  text-align: left;
  font-size: var(--ui-font-size-sm);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.diff-table td {
  max-width: 20rem;
  padding: var(--app-table-row-padding-y) var(--app-table-row-padding-x);
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
  background: var(--app-surface);
}

.diff-table tbody tr { cursor: pointer; }
.diff-table tbody tr:hover > td {
  background: var(--compare-row-hover-bg);
}
.diff-table tbody tr:focus-visible { outline: 2px solid var(--app-primary); outline-offset: -2px; }
.diff-table tbody tr:last-child td { border-bottom: 0; }
.diff-table th.is-column-hover {
  --app-table-head-fill: color-mix(in srgb, var(--app-text) 3.5%, var(--app-table-head-bg));
}

.file-col-header {
  position: relative;
  min-width: 0;
  max-width: 20rem;
  text-align: left;
  vertical-align: bottom;
  white-space: normal;
}
.file-col-header.is-baseline {
  padding-top: 0.7rem;
}
.file-col-header-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  line-height: 1.15;
}
.file-col-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  font-weight: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.baseline-mark {
  flex: none;
  display: inline-block;
  padding: 0.08rem 0.35rem;
  border-radius: 0.2rem;
  color: var(--app-primary);
  background: rgba(30, 90, 138, 0.14);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.file-col-header .baseline-mark {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  padding: 0.04rem 0.28rem;
  border-radius: 0 0 0.2rem 0.2rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.cell-col {
  width: 1%;
  max-width: 7.5rem;
  overflow: hidden;
  white-space: nowrap;
}

.delta-col {
  width: 1%;
  max-width: 8.5rem;
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cell-delta {
  display: block;
  overflow: hidden;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-delta-rel {
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 400;
}

.cell-address {
  display: block;
  max-width: 7.5rem;
  overflow: hidden;
  color: var(--app-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-name { white-space: nowrap; }

.cell-value {
  display: block;
  box-sizing: border-box;
  max-height: 4.4em;
  overflow: clip;
  color: var(--app-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cell-value.is-empty {
  color: color-mix(in srgb, var(--app-text-tertiary) 32%, var(--app-surface));
  font-weight: 400;
}

.value-formula,
.value-meta {
  display: block;
  margin-top: 0.2rem;
  overflow: hidden;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kind-badges {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
}

.kind-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.6em;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  color: var(--app-text);
  background: var(--app-surface-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.kind-badge.kind-value,
.kind-badge.kind-type {
  color: var(--app-diff-mark-text);
  background: var(--app-diff-mark);
}

.kind-badge.kind-formula,
.kind-badge.kind-numberFormat,
.kind-badge.kind-format {
  color: var(--app-warning);
  background: var(--app-diff-formula);
}

.kind-badge.kind-merge {
  color: var(--app-diff-merge-text);
  background: var(--app-diff-merge);
}

.kind-badge.kind-hyperlink,
.kind-badge.kind-comment {
  color: var(--app-primary);
  background: var(--app-diff-structure);
}

.kind-badge.kind-empty,
.kind-badge.kind-row,
.kind-badge.kind-column {
  color: var(--app-danger);
  background: var(--app-diff-missing);
}

.results.hide-formulas .value-formula { display: none; }
.results.hide-formats .value-format { display: none; }

.empty-result {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: 3rem 1rem;
  color: var(--app-muted);
  text-align: center;
}
.empty-result svg,
.empty-result .fa-solid {
  width: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--app-success);
  font-size: 2.5rem;
  line-height: 1;
}
.empty-result svg { height: 2.5rem; }
.empty-result p {
  color: var(--app-text);
  font-size: var(--ui-font-size-md);
}
.empty-result span { font-size: var(--ui-font-size-sm); }

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface);
  border-radius: 0 0 var(--app-panel-radius) var(--app-panel-radius);
  color: var(--app-muted);
  font-size: var(--ui-font-size-sm);
  font-variant-numeric: tabular-nums;
}

.compare-results-panel:has(#loadMoreRow[hidden]) .diff-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: calc(var(--app-panel-radius) - 1px);
}
.compare-results-panel:has(#loadMoreRow[hidden]) .diff-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--app-panel-radius) - 1px);
}
.compare-results-panel:has(#emptyResult:not([hidden])) .results-table-content,
.compare-results-panel:has(#emptyResult:not([hidden])) .empty-result {
  border-radius: 0 0 var(--app-panel-radius) var(--app-panel-radius);
}

/* Dialogs */

.comparison-dialog,
.confirm-dialog {
  padding: 0;
  border: 0;
  outline: none;
  border-radius: var(--ui-radius-panel);
  color: var(--app-text);
  background: var(--app-surface);
  box-shadow: 0 1.5rem 4.5rem rgba(14, 30, 45, 0.28);
  overscroll-behavior: contain;
}

.comparison-dialog {
  overflow: hidden;
}

.comparison-dialog:focus,
.comparison-dialog:focus-visible,
.confirm-dialog:focus,
.confirm-dialog:focus-visible {
  outline: none;
}

.comparison-dialog {
  width: calc(100vw - 1.5rem);
  height: calc(100vh - 1.5rem);
  max-width: none;
  max-height: none;
}

.comparison-dialog::backdrop,
.confirm-dialog::backdrop {
  background: rgba(14, 30, 45, 0.48);
  backdrop-filter: blur(2px);
  overscroll-behavior: none;
}

.comparison-dialog,
.confirm-dialog,
.comparison-fullscreen-host.is-active {
  overscroll-behavior: contain;
}

.comparison-dialog:fullscreen,
.comparison-dialog:-webkit-full-screen,
.comparison-dialog.is-expanded {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
}

.comparison-dialog.is-expanded {
  width: 100vw;
  height: 100vh;
}

.comparison-fullscreen-host.is-active,
.comparison-fullscreen-host:fullscreen,
.comparison-fullscreen-host:-webkit-full-screen {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  border-radius: 0;
  color: var(--app-text);
  background: var(--app-surface);
}

.comparison-fullscreen-host.is-active {
  position: fixed;
  inset: 0;
  z-index: var(--app-z-fullscreen-host);
}

.comparison-fullscreen-host:fullscreen,
.comparison-fullscreen-host:-webkit-full-screen,
.comparison-dialog:fullscreen,
.comparison-dialog:-webkit-full-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.dialog-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.dialog-header,
.dialog-toolbar,
.dialog-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.dialog-header {
  justify-content: space-between;
  min-height: 3.5rem;
  border-bottom: 1px solid var(--app-border);
}

.dialog-heading h2 {
  font-size: var(--ui-font-size-xl);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.dialog-actions { display: flex; gap: var(--ui-space-4); }

.dialog-toolbar {
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--app-surface-muted);
  border-bottom: 1px solid var(--app-border);
}

.compare-zoom-field,
.compare-layout-field {
  max-width: none;
  margin-bottom: 0;
  min-width: 0;
}

.compare-zoom,
.compare-layout {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  width: max-content;
  height: var(--ui-size-control);
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-control);
  overflow: hidden;
}

.compare-zoom {
  background: var(--app-surface);
}

.compare-layout {
  background: var(--app-bg);
}

.compare-zoom-btn,
.compare-zoom-value,
.compare-layout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  color: var(--app-text-tertiary);
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.compare-zoom-btn,
.compare-layout-btn {
  width: 1.75rem;
  padding: 0;
}

.compare-layout-btn {
  appearance: none;
  width: 2rem;
  font-weight: 600;
  box-shadow: none;
}

.compare-layout-btn + .compare-layout-btn {
  border-left: 1px solid var(--app-border);
}

.compare-zoom-btn .fa-solid {
  font-size: 0.7rem;
}

.compare-layout-icon {
  width: 0.8rem;
  height: 0.8rem;
}

.compare-layout-icon.is-stacked {
  transform: rotate(90deg);
}

.compare-zoom-value {
  min-width: 2.75rem;
  padding: 0 0.15rem;
  border-left: 1px solid var(--app-border);
  border-right: 1px solid var(--app-border);
  color: var(--app-text);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.compare-zoom-btn:hover:not(:disabled),
.compare-zoom-value:hover {
  color: var(--app-text);
  background: var(--app-surface-muted);
}

.compare-layout-btn:hover:not(.is-active) {
  color: var(--app-text);
  background: var(--app-surface);
}

.compare-layout-btn.is-active {
  color: var(--app-primary);
  background: var(--app-surface);
  font-weight: 700;
}

.compare-layout-btn.is-active:hover {
  color: var(--app-primary);
  background: var(--app-surface);
}

.compare-zoom-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

.compare-zoom-btn:focus-visible,
.compare-zoom-value:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-primary) 35%, transparent);
  z-index: 1;
}

.compare-layout-btn:focus-visible,
button.dialog-legend-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--app-primary) 35%, transparent);
  outline-offset: -2px;
  box-shadow: none;
  z-index: 1;
}

.dialog-toolbar .field {
  margin-bottom: 0;
}

.compact-field { min-width: 11.5rem; }

.dialog-toolbar .compare-zoom-field,
.dialog-toolbar .compare-layout-field,
.dialog-toolbar .compare-format-field,
.dialog-toolbar .compare-dim-field,
.dialog-toolbar .compare-lead-field,
.dialog-toolbar .compare-sheets-field,
.dialog-toolbar .compare-legend-field {
  min-width: 0;
}

.dialog-toolbar .compare-legend-field {
  flex: 1 1 12rem;
  max-width: none;
}

.compare-format-field .compare-layout-btn,
.compare-dim-field .compare-layout-btn,
.compare-lead-field .compare-layout-btn,
.compare-sheets-field .compare-layout-btn {
  width: auto;
  min-width: 2.25rem;
  padding: 0 0.55rem;
  font-size: var(--ui-font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.compare-format-field .compare-layout-btn.is-active,
.compare-dim-field .compare-layout-btn.is-active,
.compare-lead-field .compare-layout-btn.is-active,
.compare-sheets-field .compare-layout-btn.is-active {
  font-weight: 700;
}

.comparison-panes {
  display: grid;
  grid-template-columns: repeat(var(--pane-count, 2), minmax(0, 1fr));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  --compare-zoom: 1;
}

.comparison-panes.is-vertical {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(var(--pane-count, 2), minmax(0, 1fr));
}

.comparison-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.comparison-panes:not(.is-vertical) .comparison-pane:not(:last-child) {
  border-right: 2px solid var(--app-border-strong);
}

.comparison-panes.is-vertical .comparison-pane:not(:last-child) {
  border-bottom: 1px solid var(--app-border);
}

.pane-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.85rem;
  padding: 0.2rem 0.55rem 0.2rem 0.65rem;
  overflow: hidden;
  color: var(--excel-header-text, #575757);
  background: var(--excel-header-bg, #f3f3f3);
  border-bottom: 1px solid var(--excel-header-edge, #d0d0d0);
  font-size: var(--ui-font-size-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.pane-title-copy {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
}

.pane-title-name,
.pane-title-file,
.pane-title-sheet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane-title-name {
  min-width: 0;
  color: var(--app-text);
  font-weight: 700;
}

.pane-title-file {
  min-width: 0;
  color: var(--app-muted);
  font-weight: 500;
}

.pane-title-sheet {
  flex: none;
  max-width: 8rem;
  color: var(--app-muted);
  font-weight: 500;
}

.pane-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 1.75rem;
  padding: 0 0.65rem;
  overflow: hidden;
  border-top: 1px solid var(--app-border);
  color: var(--app-text);
  background: var(--app-bg);
  font-family: Calibri, Carlito, "Segoe UI", var(--ui-font-sans);
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.pane-status-address {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  color: var(--app-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pane-status-stats {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
  gap: 0.65rem;
}

.pane-status-chip {
  display: grid;
  grid-template-columns: auto minmax(1.75rem, max-content);
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding-left: 0.65rem;
  border-left: 1px solid var(--app-border);
  white-space: nowrap;
}

.pane-status-chip.is-count {
  grid-template-columns: auto 1.75rem;
}

.pane-status-chip.is-sum {
  grid-template-columns: auto 4.75rem;
}

.pane-status-chip.is-delta {
  grid-template-columns: auto max-content;
}

.pane-status-delta-rel {
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 400;
}

.pane-status-chip-label {
  color: var(--app-muted);
}

.pane-status-chip-value {
  overflow: hidden;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
}

.sheet-grid-clip {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.sheet-grid-wrap {
  height: 100%;
  min-height: 0;
  overflow: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  isolation: isolate;
  zoom: var(--compare-zoom);
}

body:has(.comparison-dialog[open]),
body:has(.comparison-fullscreen-host.is-active),
html.is-modal-open,
html.is-modal-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-modal-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

.sheet-grid {
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: Calibri, Carlito, "Segoe UI", var(--ui-font-sans);
  font-size: 11px;
  --excel-select: var(--app-primary);
  --excel-header-bg: #f3f3f3;
  --excel-header-text: #575757;
  --excel-header-edge: #d4d4d4;
  --excel-header-selected-bg: var(--app-primary-light);
  --excel-header-selected-text: var(--app-primary);
}

.sheet-grid col.row-head-col {
  width: 48px;
}

.sheet-grid th,
.sheet-grid td {
  box-sizing: border-box;
  padding: 1px 4px;
  border-right: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.sheet-grid thead th {
  height: 20px;
  text-align: center;
}

.sheet-grid th {
  position: sticky;
  top: 0;
  z-index: 5;
  color: var(--excel-header-text);
  background: var(--excel-header-bg);
  box-shadow: inset 0 -1px 0 0 var(--excel-header-edge);
  font-family: Calibri, Carlito, "Segoe UI", var(--ui-font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
}

.sheet-grid .row-head {
  position: sticky;
  left: 0;
  z-index: 4;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  padding-right: 6px;
  color: var(--excel-header-text);
  background: var(--excel-header-bg);
  text-align: right;
  font-family: Calibri, Carlito, "Segoe UI", var(--ui-font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
}

.sheet-grid thead .row-head {
  z-index: 6;
  padding: 0;
}

.sheet-grid thead .row-head::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  background: #b1b1b1;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.sheet-grid th.is-selected-head,
.sheet-grid .row-head.is-selected-head {
  color: var(--excel-header-selected-text);
  background: var(--excel-header-selected-bg);
}

.sheet-grid td.is-frozen-col {
  position: sticky;
  left: var(--freeze-left, 48px);
  z-index: 1;
  background: var(--app-surface);
}

.sheet-grid tr.is-frozen-row td {
  position: sticky;
  top: var(--freeze-top, 20px);
  z-index: 2;
  background: var(--app-surface);
}

.sheet-grid tr.is-frozen-row .row-head {
  z-index: 4;
}

.sheet-grid tr.is-frozen-row td.is-frozen-col {
  z-index: 3;
}

.sheet-grid tr.is-freeze-row-end td {
  box-shadow: inset 0 -2px 0 #767676;
}

.sheet-grid td.is-freeze-col-end {
  box-shadow: inset -2px 0 0 #767676;
}

.sheet-grid tr.is-freeze-row-end td.is-freeze-col-end {
  box-shadow: inset -2px -2px 0 #767676;
}

.sheet-grid:not(.is-sheet-gridlines) td:not(.row-head) {
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.sheet-grid td.is-overflow {
  overflow: hidden;
  text-overflow: clip;
}

.sheet-grid td.is-shrink {
  overflow: hidden;
  text-overflow: clip;
}

.sheet-grid td.is-super .cell-text {
  font-size: 0.75em;
  vertical-align: super;
}

.sheet-grid td.is-sub .cell-text {
  font-size: 0.75em;
  vertical-align: sub;
}

.sheet-grid .row-head.is-outlined {
  box-shadow: inset 3px 0 0 var(--app-primary);
}

.sheet-grid td.is-hyperlink {
  color: #0563c1;
  text-decoration: underline;
}

.sheet-grid td.is-vertical-text > .cell-clip {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}

.sheet-grid td {
  cursor: cell;
}
.sheet-grid tbody tr {
  height: var(--row-height);
}
.sheet-grid tbody td.row-head {
  height: auto;
}
.sheet-grid tbody td:not(.row-head) {
  position: relative;
  z-index: 0;
  padding: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  text-overflow: clip;
  /* pre: honor \n without soft-wrap. is-wrap upgrades to pre-wrap. */
  white-space: pre;
  vertical-align: bottom;
}
.sheet-grid tbody td:not(.row-head) > .cell-clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  display: grid;
  align-content: end;
  align-items: end;
  justify-items: stretch;
  overflow: hidden;
  padding: 1px 4px;
  text-align: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
}
.sheet-grid tbody td:not(.row-head).is-wrap {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  text-overflow: clip;
}
.sheet-grid td.is-merged {
  overflow: hidden;
  text-overflow: clip;
}
.sheet-grid tbody td:not(.row-head).is-wrap.is-merged {
  overflow: hidden;
  text-overflow: clip;
  white-space: pre-wrap;
}
.sheet-grid col.is-hidden,
.sheet-grid th.is-hidden,
.sheet-grid td.is-hidden {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  overflow: hidden;
}
.sheet-grid tr.is-hidden-row,
.sheet-grid tr.is-hidden-row td {
  height: 0 !important;
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}
.sheet-grid td:hover:not(.is-target):not(.is-selected) {
  background: color-mix(in srgb, var(--app-primary) 8%, transparent);
}

.sheet-grid td.is-type-number {
  text-align: right;
}
.sheet-grid td.is-type-boolean,
.sheet-grid td.is-type-error {
  text-align: center;
}

.dialog-shell.is-sheet-font .sheet-grid td:not(.row-head) {
  font-weight: var(--sheet-weight, inherit);
  font-style: var(--sheet-style, inherit);
  font-size: var(--sheet-size, 11pt);
  font-family: var(--sheet-family, Calibri, Carlito, "Segoe UI", sans-serif);
  text-decoration: var(--sheet-decoration, inherit);
  text-decoration-style: var(--sheet-decoration-style, inherit);
}

.dialog-shell.is-sheet-font .sheet-grid thead th,
.dialog-shell.is-sheet-font .sheet-grid .row-head {
  font-family: Calibri, Carlito, "Segoe UI", var(--ui-font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
}

.dialog-shell.is-sheet-font .sheet-grid .row-head {
  font-weight: 600;
}

.dialog-shell.is-sheet-align .sheet-grid td:not(.row-head),
.dialog-shell.is-sheet-align .sheet-grid td.is-type-number,
.dialog-shell.is-sheet-align .sheet-grid td.is-type-boolean,
.dialog-shell.is-sheet-align .sheet-grid td.is-type-error {
  text-align: var(--sheet-align, left);
  vertical-align: var(--sheet-valign, bottom);
}

.dialog-shell.is-sheet-align .sheet-grid td:not(.row-head) > .cell-clip {
  align-content: var(--sheet-pack, end);
  align-items: var(--sheet-pack, end);
  padding-left: var(--sheet-pad-left, 4px);
  transform: var(--sheet-transform, none);
}

.dialog-shell.is-sheet-align .sheet-grid td.is-merged {
  overflow: hidden;
  text-overflow: clip;
}

/* Cell edges only carry optional gridlines. Explicit xf borders paint once on ::after
   (inset box-shadow); applying them here as well doubled the stroke weight. */
.dialog-shell.is-sheet-borders .sheet-grid td:not(.row-head) {
  border-top-width: 0;
  border-top-style: none;
  border-top-color: transparent;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: transparent;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  border-left-width: 0;
  border-left-style: none;
  border-left-color: transparent;
}

/* Explicit xf borders paint above fill and diff highlights (Excel: fill inside, border on top). */
.dialog-shell.is-sheet-borders .sheet-grid td:not(.row-head)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: none;
  box-shadow: var(--sheet-border-shadow, none);
}

.dialog-shell.is-sheet-borders .sheet-grid.is-sheet-gridlines td:not(.row-head) {
  border-right-color: var(--app-border);
  border-bottom-color: var(--app-border);
}

.dialog-shell:not(.is-sheet-align) .sheet-grid tbody td:not(.row-head).is-wrap {
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: pre-wrap;
}
.dialog-shell:not(.is-sheet-align) .sheet-grid td.is-vertical-text > .cell-clip {
  transform: none;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
.dialog-shell:not(.is-sheet-font) .sheet-grid td:not(.row-head) {
  font-weight: 500;
}
.dialog-shell:not(.is-sheet-font) .sheet-grid td.is-super,
.dialog-shell:not(.is-sheet-font) .sheet-grid td.is-sub,
.dialog-shell:not(.is-sheet-font) .sheet-grid td:not(.row-head) span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  text-decoration: inherit !important;
  vertical-align: baseline !important;
}

.dialog-shell.is-sheet-colors .sheet-grid td:not(.row-head) {
  background-color: var(--sheet-fill, var(--app-surface));
  color: var(--sheet-color, inherit);
}

.dialog-shell.is-sheet-colors .sheet-grid td:not(.row-head) span {
  color: var(--sheet-color, inherit);
}

.dialog-shell.is-sheet-colors .sheet-grid td.is-frozen-col,
.dialog-shell.is-sheet-colors .sheet-grid tr.is-frozen-row td:not(.row-head) {
  background-color: var(--sheet-fill, var(--app-surface));
}

.dialog-shell.is-sheet-colors .sheet-grid td:not(.row-head):not(.is-diff):not(.is-target):not(.is-selected):hover {
  background-color: color-mix(in srgb, var(--app-primary) 8%, var(--sheet-fill, var(--app-surface)));
}

/* Applied fills (including white) cover default gridlines. Explicit xf borders stay on ::after. */
.dialog-shell.is-sheet-colors .sheet-grid td.has-fill:not(.row-head) {
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.dialog-shell.is-sheet-colors.is-sheet-borders .sheet-grid td.has-fill:not(.row-head) {
  /* Gridlines stay hidden; xf borders remain on ::after only. */
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.dialog-shell.is-dim-unchanged .sheet-grid td:not(.row-head):not(.is-diff):not(.is-absent):not(.is-target):not(.is-selected) {
  opacity: var(--app-sheet-unchanged-opacity);
}

.sheet-grid-wrap:focus,
.sheet-grid-wrap:focus-visible {
  outline: none;
}

.sheet-grid td:focus,
.sheet-grid td:focus-visible {
  outline: none;
}
.sheet-grid td:focus-visible:not(.is-target):not(.is-selected) {
  box-shadow: inset 0 0 0 2px var(--app-primary);
}
.sheet-grid td.is-target {
  z-index: 3;
}
.sheet-grid td.sel-n { --sel-n: 2px; }
.sheet-grid td.sel-s { --sel-s: 2px; }
.sheet-grid td.sel-e { --sel-e: 2px; }
.sheet-grid td.sel-w { --sel-w: 2px; }
.sheet-grid td.sel-n::before,
.sheet-grid td.sel-s::before,
.sheet-grid td.sel-e::before,
.sheet-grid td.sel-w::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 4;
  border-style: solid;
  border-color: var(--excel-select);
  border-width: var(--sel-n, 0px) var(--sel-e, 0px) var(--sel-s, 0px) var(--sel-w, 0px);
}

.sheet-grid td.is-diff,
.sheet-grid td.is-diff-value,
.sheet-grid td.is-diff-type {
  color: var(--app-text) !important;
  background: var(--app-diff-mark) !important;
}
.sheet-grid td.is-diff-formula:not(.is-diff-value),
.sheet-grid td.is-diff-format:not(.is-diff-value),
.sheet-grid td.is-diff-numberFormat:not(.is-diff-value) {
  color: var(--app-text) !important;
  background: var(--app-diff-formula) !important;
}
.sheet-grid td.is-diff-merge:not(.is-diff-value):not(.is-diff-empty) {
  color: var(--app-text) !important;
  background: var(--app-diff-merge) !important;
}
.sheet-grid td.is-diff-hyperlink:not(.is-diff-value),
.sheet-grid td.is-diff-comment:not(.is-diff-value) {
  color: var(--app-text) !important;
  background: var(--app-diff-structure) !important;
}
.sheet-grid td.is-diff-value.is-diff-formula,
.sheet-grid td.is-diff-value-formula {
  color: var(--app-text) !important;
  background: linear-gradient(135deg, var(--app-diff-formula) 0.7rem, var(--app-diff-mark) 0.7rem) !important;
}
.sheet-grid td.is-diff-empty,
.sheet-grid td.is-diff-row,
.sheet-grid td.is-diff-column {
  color: var(--app-text) !important;
  background: var(--app-diff-missing) !important;
}
.sheet-grid td.is-absent {
  background: var(--app-surface-muted) !important;
  color: transparent !important;
  cursor: default;
}
.sheet-grid .row-head.is-absent-head {
  color: var(--app-text-tertiary);
  font-style: italic;
}

.dialog-legend {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 1;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
  height: var(--ui-size-control);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-control);
  background: var(--app-bg);
}

.dialog-legend::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.dialog-legend-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 0;
  color: var(--app-text-tertiary);
  background: transparent;
  font: inherit;
  font-size: var(--ui-font-size-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.dialog-legend-item + .dialog-legend-item {
  border-left: 1px solid var(--app-border);
}

button.dialog-legend-item {
  cursor: pointer;
}

button.dialog-legend-item.is-off:hover {
  color: var(--app-text);
  background: var(--app-surface);
}

.dialog-legend-item.is-off {
  color: var(--app-text-tertiary);
  background: transparent;
  font-weight: 600;
}

.dialog-legend-item.is-diff-value:not(.is-off),
.dialog-legend-item.is-diff-type:not(.is-off) {
  color: var(--app-diff-mark-text);
  background: var(--app-diff-mark);
  font-weight: 700;
}

.dialog-legend-item.is-diff-formula:not(.is-off),
.dialog-legend-item.is-diff-format:not(.is-off),
.dialog-legend-item.is-diff-numberFormat:not(.is-off) {
  color: var(--app-warning);
  background: var(--app-diff-formula);
  font-weight: 700;
}

.dialog-legend-item.is-diff-merge:not(.is-off) {
  color: var(--app-diff-merge-text);
  background: var(--app-diff-merge);
  font-weight: 700;
}

.dialog-legend-item.is-diff-hyperlink:not(.is-off),
.dialog-legend-item.is-diff-comment:not(.is-off) {
  color: var(--app-primary);
  background: var(--app-diff-structure);
  font-weight: 700;
}

.dialog-legend-item.is-diff-value-formula:not(.is-off) {
  color: var(--app-diff-mark-text);
  background: linear-gradient(135deg, var(--app-diff-formula) 0.7rem, var(--app-diff-mark) 0.7rem);
  font-weight: 700;
}

.dialog-legend-item.is-diff-empty:not(.is-off),
.dialog-legend-item.is-diff-row:not(.is-off),
.dialog-legend-item.is-diff-column:not(.is-off) {
  color: var(--app-danger);
  background: var(--app-diff-missing);
  font-weight: 700;
}

.dialog-sheetbar {
  display: flex;
  align-items: stretch;
  min-height: 1.75rem;
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-border);
}

.dialog-sheetbar > select {
  display: none;
}

.sheet-tab-nav {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--app-text-tertiary);
  background: var(--app-bg);
  cursor: pointer;
}

.sheet-tab-nav:hover:not(:disabled) {
  color: var(--app-text);
  background: var(--app-surface);
}

.sheet-tab-nav .fa-solid {
  font-size: 0.7rem;
  line-height: 1;
}

.sheet-tab-nav:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-primary) 35%, transparent);
  z-index: 1;
}

.sheet-tabs-clip {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: stretch;
}

.sheet-tabs-clip::before,
.sheet-tabs-clip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.1rem;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.sheet-tabs-clip::before {
  left: 0;
  background: linear-gradient(to right, var(--app-bg), transparent);
}

.sheet-tabs-clip::after {
  right: 0;
  background: linear-gradient(to left, var(--app-bg), transparent);
}

.dialog-sheetbar.is-overflow-start .sheet-tabs-clip::before,
.dialog-sheetbar.is-overflow-end .sheet-tabs-clip::after {
  opacity: 1;
}

.sheet-tabs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.sheet-tabs.is-overflow-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.1rem);
  mask-image: linear-gradient(to right, transparent, #000 1.1rem);
}

.sheet-tabs.is-overflow-end {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 1.1rem);
  mask-image: linear-gradient(to left, transparent, #000 1.1rem);
}

.sheet-tabs.is-overflow-start.is-overflow-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.1rem, #000 calc(100% - 1.1rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 1.1rem, #000 calc(100% - 1.1rem), transparent);
}

.sheet-tabs::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.sheet-tab {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  max-width: 14rem;
  min-height: 1.75rem;
  height: auto;
  margin: 0;
  padding: 0 0.5rem 0 0.7rem;
  border: 0;
  border-right: 1px solid var(--app-border);
  color: var(--app-muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--ui-font-size-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
}

.sheet-tab-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-tab-badge {
  flex: none;
  min-width: 1.15rem;
  padding: 0 0.32rem;
  border-radius: var(--ui-radius-pill);
  color: var(--app-warning);
  background: var(--app-diff-mark);
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15rem;
  text-align: center;
}

.sheet-tab-badge.is-zero {
  color: var(--app-success);
  background: var(--app-success-muted);
}

.sheet-tab:hover:not([aria-selected="true"]) {
  color: var(--app-text);
  background: var(--app-surface);
}

.sheet-tab[aria-selected="true"] {
  color: var(--app-primary);
  background: var(--app-surface);
  font-weight: 700;
}

.sheet-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--app-primary);
  pointer-events: none;
}

.sheet-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-primary) 35%, transparent);
  z-index: 1;
}

.dialog-footer {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-height: 0;
  padding: 0.35rem 0.75rem;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface-muted);
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
}

.dialog-footer:empty {
  display: none;
  padding: 0;
  border: 0;
}

.confirm-dialog { width: min(36rem, calc(100vw - 2rem)); max-width: none; }
.confirm-dialog-shell { display: grid; }

.confirm-dialog-header,
.confirm-dialog-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.confirm-dialog-header {
  justify-content: space-between;
  min-height: 3.5rem;
  border-bottom: 1px solid var(--app-border);
}

.confirm-dialog-header h2 {
  font-size: var(--ui-font-size-xl);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.confirm-dialog-body {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--app-muted);
  font-size: var(--ui-font-size-sm);
  line-height: 1.5;
}

.confirm-dialog-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface-muted);
}

.confirm-dialog.sheet-map-dialog {
  width: min(52rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
}

.sheet-map-dialog .confirm-dialog-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100vh - 2rem);
}

.sheet-map-dialog .confirm-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.9rem 1rem 1rem;
  color: var(--app-text);
}

.sheet-map-heading {
  margin: 0 0 0.45rem;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.file-alias-list {
  display: grid;
  gap: 0.4rem;
}

.file-alias-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem);
  gap: 0.65rem;
  align-items: center;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-control);
  background: var(--app-surface);
}

.file-alias-name {
  min-width: 0;
}

.file-alias-label {
  display: block;
  overflow: hidden;
  color: var(--app-text);
  font-size: var(--ui-font-size-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-alias-file {
  display: block;
  overflow: hidden;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-alias-path {
  display: block;
  overflow: hidden;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 500;
  opacity: 0.85;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-alias-row input {
  width: 100%;
  min-height: var(--ui-size-control);
  padding: 0 0.5rem;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-control);
  color: var(--app-text);
  background: var(--app-surface);
  font-size: var(--ui-font-size-sm);
  font-weight: 550;
}

.sheet-map-block {
  min-width: 0;
}

.sheet-map-table-wrap {
  overflow: auto;
  max-height: min(24rem, 50vh);
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-panel);
  background: var(--app-surface);
  overscroll-behavior: contain;
}

.sheet-map-table {
  width: 100%;
  border-collapse: collapse;
}

.sheet-map-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.5rem 0.65rem;
  color: var(--app-muted);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-muted);
}

.sheet-map-table td {
  padding: 0.4rem 0.55rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--app-border);
}

.sheet-map-table tbody tr:last-child td { border-bottom: 0; }

.sheet-map-table tbody tr.is-incomplete {
  background: var(--app-warning-muted);
}

.sheet-map-match {
  width: 7.5rem;
  min-width: 7.5rem;
}

.sheet-map-match-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18em 0.55em;
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-font-size-xs);
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sheet-map-match-badge.is-auto {
  color: var(--app-success);
  background: var(--app-success-muted);
}

.sheet-map-match-badge.is-manual {
  color: var(--app-primary);
  background: var(--app-primary-light);
}

.sheet-map-alias {
  width: 9.5rem;
  min-width: 9.5rem;
}

.sheet-map-alias input {
  width: 100%;
  min-height: var(--ui-size-control);
  padding: 0 0.5rem;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-control);
  color: var(--app-text);
  background: var(--app-surface);
  font-size: var(--ui-font-size-sm);
  font-weight: 550;
}

.sheet-map-table th:last-child,
.sheet-map-table td:last-child {
  width: 2.5rem;
  text-align: center;
}

.sheet-map-table select {
  width: 100%;
  min-width: 8rem;
  min-height: var(--ui-size-control);
  padding: 0 0.55rem;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-control);
  color: var(--app-text);
  background: var(--app-surface);
  font-size: var(--ui-font-size-sm);
}

.sheet-map-table tr.is-incomplete select {
  border-color: color-mix(in srgb, var(--app-warning) 45%, var(--app-border));
  background: var(--app-surface);
}

.sheet-map-empty {
  margin: 0;
  padding: 0.85rem 0.75rem;
  color: var(--app-muted);
  font-size: var(--ui-font-size-sm);
}

.sheet-map-remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  color: var(--app-muted);
  background: transparent;
  cursor: pointer;
}

.sheet-map-remove::before {
  content: "";
  position: absolute;
  inset: -0.4rem;
}

.sheet-map-remove:hover,
.sheet-map-remove:focus-visible {
  color: var(--app-text);
  background: var(--app-surface-muted);
}

.sheet-map-add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  min-height: var(--ui-size-control);
  margin-top: 0.65rem;
  padding: 0 0.7rem;
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--ui-radius-control);
  color: var(--app-muted);
  background: transparent;
  font-size: var(--ui-font-size-sm);
  cursor: pointer;
}

.sheet-map-add .fa-solid {
  font-size: 0.7rem;
}

.sheet-map-add:hover,
.sheet-map-add:focus-visible {
  color: var(--app-text);
  border-color: var(--app-text-secondary);
  background: var(--app-surface-muted);
}

.sheet-map-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--app-warning) 28%, var(--app-border));
  border-radius: var(--ui-radius-control);
  color: var(--app-warning);
  background: var(--app-warning-muted);
  font-size: var(--ui-font-size-sm);
  line-height: 1.4;
}

.sheet-map-warning .fa-solid {
  margin-top: 0.12rem;
  flex: none;
  font-size: 0.85rem;
}

.sheet-map-dialog .confirm-dialog-footer .btn-primary {
  margin-left: auto;
}

.toast {
  position: fixed;
  right: var(--ui-space-20);
  bottom: var(--ui-space-20);
  z-index: var(--app-z-toast);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-width: min(19rem, calc(100vw - 2rem));
  max-width: min(26rem, calc(100vw - 2.5rem));
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--app-border);
  border-radius: var(--ui-radius-panel);
  color: var(--app-text);
  background: var(--app-surface);
  box-shadow: 0 0.35rem 1rem rgba(26, 35, 50, 0.12);
  opacity: 0;
  transform: translateY(8px);
  filter: blur(3px);
  transition-property: opacity, transform, filter;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.comparison-dialog .toast,
.confirm-dialog .toast,
.comparison-fullscreen-host .toast {
  position: absolute;
  z-index: 4;
}

.toast > svg,
.toast > .fa-solid {
  width: 1rem;
  color: var(--app-success);
  font-size: 1rem;
  line-height: 1;
}
.toast > svg { height: 1rem; }
.toast.is-progress > svg,
.toast.is-progress > .fa-solid { color: var(--app-primary); }

.toast-progress {
  grid-column: 1 / -1;
  height: 0.18rem;
  overflow: hidden;
  border-radius: var(--ui-radius-pill);
  background: var(--app-primary-light);
}

.toast-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--app-primary);
  transition: width 160ms ease-out;
}

@media (max-width: 760px) {
  .app-header-inner,
  .app-main,
  .app-footer-inner {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .upload-section {
    min-height: 0;
    padding: 1.75rem 0 2rem;
  }
  .upload-section.has-history { padding-top: 1.25rem; padding-bottom: 1rem; }
  .drop-zone {
    min-height: 14.5rem;
    padding: 2rem 1.25rem;
  }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-group .field,
  .field { max-width: none; }
  .settings-trace { display: none; }
  .settings-footer { flex-direction: column; align-items: flex-start; }

  .result-tabs-bar,
  .result-tabs-actions {
    align-items: stretch;
  }

  .result-tabs-actions {
    width: 100%;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .search-group { order: 3; width: 100%; }
  .filter-bar .metrics { margin-left: 0; width: 100%; }
  .result-settings-menu { right: auto; left: 0; }

  .comparison-panes:not(.is-vertical) {
    overflow-x: auto;
    grid-template-columns: repeat(var(--pane-count, 2), minmax(560px, 1fr));
  }

  .comparison-dialog {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .toast {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *:not(.file-chip):not(.file-chip-ghost),
  *:not(.file-chip):not(.file-chip-ghost)::before,
  *:not(.file-chip):not(.file-chip-ghost)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}