/*
 * Biblioplex's application layer over the cleaner Vellum UI foundation.
 * Shared primitives stay upstream; this file owns only Biblioplex shell,
 * navigation, dense-data, and domain-specific presentation.
 */

:root {
  --color-column-hl: rgb(104 68 125 / 7%);
  --color-column-dragging: rgb(104 68 125 / 14%);
  --color-surface-warm: #fffdfa;
  --color-surface-warm-soft: #faf7f3;
  --color-surface-beige: #f1ede8;
  --color-surface-beige-soft: #f6f2ee;
  --color-surface-beige-pale: #faf8f5;
  --color-surface-parchment: #f8f4ef;
  --color-line-beige: #e2dcd6;
  --color-line-beige-soft: #ebe5df;
  --color-line-beige-faint: #f0ebe6;
  --color-line-parchment: #e5ded7;
  --color-shell-divider: color-mix(in srgb, var(--color-text-strong) 14%, transparent);
  --color-text-warm-muted: #70665f;
  --color-text-warm-faint: #90867f;
  --color-text-warm-label: #786e67;
  --color-text-warm-strong: #2b2521;
  --shadow-panel-right: none;
  --shadow-panel-left: none;
  --shadow-panel-top: none;
  --shadow-strip-top: none;
  --shadow-drawer-side: -8px 0 32px rgb(35 29 25 / 14%);
  --shadow-drawer-side-right: 8px 0 32px rgb(35 29 25 / 14%);
  --shadow-drawer-top: 0 -12px 32px rgb(35 29 25 / 14%);
}

body {
  --app-footer-h: 36px;
  --sidebar-width: 248px;
  font-weight: var(--font-weight-body);
}

/* Status banners are attached to the viewport edge, not floating cards. */
body > .banner {
  border-left: 0;
  border-radius: 0 0 var(--vui-radius-soft) var(--vui-radius-soft);
  border-right: 0;
  border-top: 0;
}

/* Shell */
.app-shell {
  grid-template-rows: 56px minmax(0, 1fr) var(--app-footer-h);
}

.app-header {
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-shell-divider);
  box-shadow: none;
  gap: 12px;
  padding: 0 20px;
}

.app-header h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-heading);
  letter-spacing: -0.025em;
}

.title-reset-btn {
  text-transform: none;
  transition: color var(--motion-fast) ease;
}

.app-left {
  background: var(--color-surface);
  border-right: 1px solid var(--color-shell-divider);
  box-shadow: none;
  gap: 18px;
  padding: 16px;
}

.app-center {
  background: var(--color-bg);
}

.app-right {
  border-left: 1px solid var(--color-shell-divider);
  box-shadow: none;
}

.app-footer,
.app-totals-strip {
  background: var(--color-surface-raised);
  box-shadow: none;
}

.app-footer {
  border-top: 1px solid var(--color-shell-divider);
}

.app-totals-strip {
  border-bottom: 0;
}

/* Sidebar hierarchy */
.sidebar-label,
.scope-option-group-label {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.scope-option {
  border-radius: var(--radius-sharp);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  padding: 6px 8px;
  text-transform: none;
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

.scope-option.is-selected {
  background: color-mix(in srgb, var(--color-accent) 13%, var(--color-surface-raised));
  box-shadow: inset 3px 0 0 var(--color-accent);
  font-weight: 600;
}

.sidebar-section .search-wrap .search-input {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sharp);
  box-shadow: var(--input-bevel);
  color: var(--color-text-strong);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 400;
  text-transform: none;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

.sidebar-filters select {
  background-color: var(--color-surface-raised);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) 50%,
    calc(100% - 10px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sharp);
  box-shadow: var(--input-bevel);
  color: var(--color-text-strong);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 400;
  text-transform: none;
}

.sidebar-section .search-wrap .search-input:focus {
  background: var(--color-input-bg-focus);
  border-color: var(--color-line-focus);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  outline: none;
}

.app-header-views .segment-btn {
  min-width: 84px;
}

.sync-chip,
.settings-toggle,
.sync-menu button {
  font-family: var(--font-body);
  text-transform: none;
}

.sync-chip,
.sync-menu button {
  font-weight: 400;
}

.sync-menu-meta strong {
  font-weight: 500;
}

.sync-chip {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sharp);
}

.sync-menu,
.settings-popover {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-popover);
}

/* Dense data chrome comes from Vellum's .vui-table. */
tbody tr.row-selected,
tbody tr.row-selected:hover {
  background: var(--color-accent-soft);
}

.cn-cell,
.set-cell,
.condition-cell,
.qty-cell,
.price-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Biblioplex metadata surfaces */
.tag-chip,
.loc-pill,
.page-chip {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sharp);
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
}

.row-tag-add,
.row-loc-add,
.deck-meta-ac-pill-clear {
  border-color: var(--color-line);
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: 500;
  transition:
    background-color var(--motion-fast) ease,
    transform var(--motion-fast) cubic-bezier(0.23, 1, 0.32, 1);
}

.row-tag-add:active,
.row-loc-add:active,
.deck-meta-ac-pill-clear:active {
  transform: scale(0.96);
}

.quick-jump-shell {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-round);
  box-shadow: var(--shadow-overlay);
}

.mcp-chat-head {
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-strong);
}

.mcp-chat-head .rune-close {
  color: var(--color-text-muted);
}

.mcp-chat-head .rune-close:hover {
  color: var(--color-text-strong);
}

@media (prefers-reduced-motion: reduce) {
  .scope-option,
  .vui-table tbody tr {
    transition-duration: 0ms;
  }
}