/* Nuboc IP LLC. All rights reserved. */

/* =============================================================================
   11. Components
   ============================================================================= */

/* Badges */
.nax-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--nax-r-sm);
  font-size: 0.692rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.nax-badge-xs {
  padding: 1px 5px;
  font-size: 0.615rem;
}

.nax-badge-primary {
  background: var(--nax-accent);
  color: #fff;
}

.nax-badge-success {
  background: var(--nax-green-solid);
  color: #fff;
}

.nax-badge-danger {
  background: var(--nax-red);
  color: #fff;
}

.nax-badge-warning {
  background: var(--nax-amber-solid);
  color: #fff;
}

.nax-badge-info {
  background: var(--nax-blue);
  color: #fff;
}

.nax-badge-neutral {
  background: var(--nax-ink-10);
  color: var(--nax-ink-70);
}

.nax-badge-attention {
  background: var(--nax-attention-solid);
  color: var(--nax-on-accent);
}

.nax-badge-soft-primary {
  background: var(--nax-accent-lt);
  color: var(--nax-accent-dark);
}

.nax-badge-soft-success {
  background: var(--nax-green-bg);
  color: var(--nax-green-text);
}

.nax-badge-soft-danger {
  background: var(--nax-red-bg);
  color: var(--nax-red-dark);
}

.nax-badge-soft-warning {
  background: var(--nax-amber-bg);
  color: var(--nax-amber-text);
}

.nax-badge-soft-info {
  background: var(--nax-blue-bg);
  color: var(--nax-blue-dark);
}

.nax-badge-soft-neutral {
  background: var(--nax-ink-10);
  color: var(--nax-ink-text-2);
}

.nax-badge-soft-attention {
  background: var(--nax-attention-bg);
  color: var(--nax-attention-text);
}

.nax-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  padding: 0;
}

/* Cards */
.nax-card {
  background: var(--nax-surface);
  border: 1px solid var(--nax-ink-10);
  border-radius: var(--nax-r);
  box-shadow: var(--nax-sh);
}

.nax-card-header {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 40px;
  border-bottom: 1px solid var(--nax-ink-10);
  flex-shrink: 0;
}

.nax-card-title {
  font-size: 0.846rem;
  font-weight: 600;
  color: var(--nax-ink);
  flex: 1;
  letter-spacing: -0.01em;
}

.nax-card-body {
  padding: 14px 16px;
}

.nax-card-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--nax-ink-10);
  font-size: 0.769rem;
  color: var(--nax-ink-text-2);
}

/* A smaller footnote under a card's content — lighter than the footer */
.nax-card-note {
  padding: 8px 14px;
  font-size: 0.692rem;
  color: var(--nax-ink-text-2);
  border-top: 1px solid var(--nax-ink-07);
}

/* KPI Tiles */
.nax-kpi {
  background: var(--nax-surface);
  border: 1px solid var(--nax-ink-10);
  border-radius: var(--nax-r);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nax-kpi-label {
  font-size: 0.692rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nax-ink-text-2);
}

.nax-kpi-value {
  font-family: var(--nax-font-mono);
  font-size: 1.384rem;
  font-weight: 500;
  color: var(--nax-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

.nax-kpi-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nax-kpi-strip .nax-kpi {
  flex: 1;
  min-width: 140px;
}

.nax-kpi-value.is-warn {
  color: var(--nax-amber-text);
}

.nax-kpi-note {
  font-size: 0.692rem;
  color: var(--nax-ink-text-3);
}

/* One bar, tiles divided: a list's summary sitting above it. */
.nax-kpi-strip[data-joined] {
  gap: 0;
  background: var(--nax-surface);
  border: 1px solid var(--nax-ink-10);
  border-radius: var(--nax-r-lg);
  overflow: hidden;
}

.nax-kpi-strip[data-joined] .nax-kpi {
  border: 0;
  border-inline-end: 1px solid var(--nax-ink-08);
  border-radius: 0;
  padding: var(--nax-space-2) var(--nax-space-4);
  gap: 2px;
  background: transparent;
}

.nax-kpi-strip[data-joined] .nax-kpi:last-child {
  border-inline-end: 0;
}

.nax-kpi-strip[data-joined] .nax-kpi-value {
  font-size: 1rem;
}

a.nax-kpi {
  color: inherit;
  text-decoration: none;
  transition: background var(--nax-t);
}

a.nax-kpi:hover {
  background: var(--nax-ink-03);
}

a.nax-kpi:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: -2px;
}

a.nax-kpi[aria-current="page"] {
  background: var(--nax-accent-lt);
  box-shadow: inset 0 -2px 0 var(--nax-accent);
}

.nax-kpi-delta {
  font-size: 0.769rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.nax-kpi-delta.up {
  color: var(--nax-green-text);
}

.nax-kpi-delta.down {
  color: var(--nax-red-text);
}

.nax-kpi-delta.flat {
  color: var(--nax-ink-text-2);
}

/* Modals */
.nax-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 14, 17, .45);
  z-index: var(--nax-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--nax-t-med);
}

.nax-modal-backdrop.is-open {
  opacity: 1;
}

.nax-modal {
  background: var(--nax-surface);
  border: 1px solid var(--nax-ink-10);
  border-radius: var(--nax-r-lg);
  box-shadow: var(--nax-sh-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: scale(.96) translateY(8px);
  transition: transform var(--nax-t-med);
}

.nax-modal-backdrop.is-open .nax-modal {
  transform: scale(1) translateY(0);
}

.nax-modal-sm {
  max-width: 400px;
}

.nax-modal-lg {
  max-width: 760px;
}

.nax-modal-xl {
  max-width: 1000px;
}

.nax-modal-header {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 44px;
  border-bottom: 1px solid var(--nax-ink-10);
  flex-shrink: 0;
}

.nax-modal-title {
  font-size: 0.923rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  flex: 1;
}

.nax-modal-body {
  padding: 16px;
  overflow-y: auto;
  font-size: 0.846rem;
  flex: 1;
}

.nax-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--nax-ink-10);
  flex-shrink: 0;
}

/* Dropdowns */
.nax-dropdown {
  position: relative;
  display: inline-flex;
}

.nax-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--nax-z-overlay);
  min-width: 160px;
  background: var(--nax-surface);
  border: 1px solid var(--nax-ink-20);
  border-radius: var(--nax-r);
  box-shadow: var(--nax-sh-md);
  padding: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--nax-t), transform var(--nax-t);
}

.nax-dropdown-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nax-dropdown-menu.align-right {
  left: auto;
  right: 0;
}

.nax-dropdown-menu.align-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.nax-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 30px;
  font-size: 0.769rem;
  color: var(--nax-ink-70);
  border-radius: var(--nax-r-sm);
  cursor: pointer;
  transition: background var(--nax-t), color var(--nax-t);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.nax-dropdown-item:hover {
  background: var(--nax-ink-05);
  color: var(--nax-ink);
  text-decoration: none;
}

.nax-dropdown-item.is-danger:hover {
  background: var(--nax-red-bg);
  color: var(--nax-red-text);
}

.nax-dropdown-item:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.nax-dropdown-divider {
  height: 1px;
  background: var(--nax-ink-10);
  margin: 3px 0;
}

.nax-dropdown-label {
  padding: 6px 10px 2px;
  font-size: 0.692rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nax-ink-text-2);
}

/* Toasts */
.nax-toasts {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: var(--nax-z-toast);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.nax-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--nax-surface);
  border: 1px solid var(--nax-ink-20);
  border-radius: var(--nax-r);
  box-shadow: var(--nax-sh-md);
  font-size: 0.769rem;
  color: var(--nax-ink-70);
  min-width: 240px;
  max-width: 360px;
  pointer-events: auto;
  transform: translateX(110%);
  transition: transform var(--nax-t-med);
}

.nax-toast.is-visible {
  transform: translateX(0);
}

.nax-toast-icon.success {
  color: var(--nax-green-text);
}

.nax-toast-icon.error {
  color: var(--nax-red-text);
}

.nax-toast-icon.warning {
  color: var(--nax-amber-text);
}

.nax-toast-icon.info {
  color: var(--nax-blue);
}

.nax-toast-body {
  flex: 1;
}

.nax-toast-title {
  font-weight: 600;
  color: var(--nax-ink);
  margin-bottom: 1px;
}

.nax-toast-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--nax-ink-text-2);
  cursor: pointer;
  line-height: 1;
}

.nax-toast-dismiss:hover {
  color: var(--nax-ink);
}

/* Tabs */
.nax-tabs {
  display: flex;
  border-bottom: 1px solid var(--nax-ink-10);
}

.nax-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 36px;
  font-size: 0.769rem;
  font-weight: 500;
  color: var(--nax-ink-text-2);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--nax-t), border-color var(--nax-t);
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  margin-bottom: -1px;
  text-decoration: none;
  white-space: nowrap;
}

.nax-tab:hover {
  color: var(--nax-ink);
  text-decoration: none;
}

.nax-tab.is-active {
  color: var(--nax-accent);
  border-bottom-color: var(--nax-accent);
}

.nax-tab-panels .nax-tab-panel {
  display: none;
}

.nax-tab-panels .nax-tab-panel.is-active {
  display: block;
}

/* Empty states */
.nax-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 10px;
}

.nax-empty-icon {
  color: var(--nax-ink-text-2);
  margin-bottom: 4px;
}

.nax-empty-title {
  font-size: 0.923rem;
  font-weight: 600;
  color: var(--nax-ink-70);
}

.nax-empty-desc {
  font-size: 0.769rem;
  color: var(--nax-ink-text-2);
  max-width: 280px;
  line-height: 1.5;
}

.nax-empty-state {
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.nax-empty-state-icon {
  color: var(--nax-ink-text-2);
}

.nax-empty-state-title {
  font-size: 0.846rem;
  font-weight: 500;
  color: var(--nax-ink);
}

.nax-empty-state-desc {
  font-size: 0.769rem;
  color: var(--nax-ink-text-2);
}

/* Guidance under an empty state's description — first steps, left-aligned. */
.nax-empty-state-body {
  max-width: 460px;
  margin-top: 4px;
  font-size: 0.769rem;
  color: var(--nax-ink-text-2);
  text-align: left;
}
.nax-empty-state-body ol { margin: 0; padding-left: 18px; }
.nax-empty-state-body li + li { margin-top: 4px; }

/* One-line empty notice inside a section body */
.nax-empty-state-sm {
  padding: 12px 0;
  font-size: 0.769rem;
  color: var(--nax-ink-text-2);
}

/* Activity feed */
.nax-activity {
  display: flex;
  flex-direction: column;
}

.nax-activity-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--nax-ink-10);
  font-size: 0.769rem;
}

.nax-activity-item:last-child {
  border-bottom: none;
}

.nax-activity-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--nax-ink-05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nax-ink-text-2);
  margin-top: 1px;
}

.nax-activity-body {
  flex: 1;
}

.nax-activity-text {
  color: var(--nax-ink-70);
  line-height: 1.4;
}

.nax-activity-time {
  color: var(--nax-ink-text-2);
  margin-top: 2px;
  font-family: var(--nax-font-mono);
  font-size: 0.692rem;
}

/* Avatar */
.nax-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--nax-accent-dim);
  color: var(--nax-accent);
  font-weight: 600;
  flex-shrink: 0;
}

.nax-avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 0.615rem;
}

.nax-avatar-md {
  width: 32px;
  height: 32px;
  font-size: 0.769rem;
}

.nax-avatar-lg {
  width: 40px;
  height: 40px;
  font-size: 0.923rem;
}

.nax-avatar-xl {
  width: 80px;
  height: 80px;
  font-size: 1.8rem;
}

.nax-avatar-xl {
  width: 56px;
  height: 56px;
  font-size: 1.4rem;
}

/* Divider */
.nax-divider {
  height: 1px;
  background: var(--nax-ink-10);
  border: none;
  margin: 0;
}

/* Spinner */
.nax-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--nax-ink-10);
  border-top-color: var(--nax-accent);
  border-radius: 50%;
  animation: nax-spin .6s linear infinite;
}

.nax-spinner-sm {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

.nax-spinner-lg {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

/* Skeleton */
.nax-skeleton {
  background: linear-gradient(90deg, var(--nax-ink-05) 25%, var(--nax-ink-10) 50%, var(--nax-ink-05) 75%);
  background-size: 200% 100%;
  animation: nax-shimmer 1.4s infinite;
  border-radius: var(--nax-r-sm);
}

/* Timeline */
.nax-timeline {
  padding: 4px 20px 8px;
}

.nax-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--nax-ink-05);
  position: relative;
}

.nax-timeline-item:last-child {
  border-bottom: none;
}

.nax-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.nax-timeline-dot--green {
  background: var(--nax-green);
}

.nax-timeline-dot--red {
  background: var(--nax-red);
}

.nax-timeline-dot--blue {
  background: var(--nax-accent);
}

.nax-timeline-dot--neutral {
  background: var(--nax-ink-20);
}

.nax-timeline-body {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.769rem;
}

.nax-timeline-action {
  color: var(--nax-ink);
  font-weight: 500;
}

.nax-timeline-time {
  color: var(--nax-ink-text-2);
  font-size: 0.718rem;
  margin-left: auto;
  white-space: nowrap;
}

.nax-timeline-group {
  border-bottom: 1px solid var(--nax-ink-05);
}

.nax-timeline-group:last-child {
  border-bottom: none;
}

.nax-timeline-group-header {
  padding: 6px 20px;
  font-size: 0.692rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--nax-ink-text-2);
  background: var(--nax-ink-03);
  border-bottom: 1px solid var(--nax-ink-05);
}

/* Policy */
.nax-policy-group {
  border-bottom: 1px solid var(--nax-ink-05);
}

.nax-policy-group:last-child {
  border-bottom: none;
}

.nax-policy-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--nax-ink-03);
  font-size: 0.692rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--nax-ink-text-2);
  border-bottom: 1px solid var(--nax-ink-05);
}

.nax-policy-list {
  list-style: none;
  padding: 0 20px;
}

.nax-policy-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--nax-ink-05);
}

.nax-policy-item:last-child {
  border-bottom: none;
}

.nax-policy-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nax-policy-key {
  font-family: 'DM Mono', monospace;
  font-size: 0.718rem;
  color: var(--nax-accent);
  background: var(--nax-accent-lt);
  padding: 2px 6px;
  border-radius: var(--nax-r-sm);
}

.nax-policy-key--sm {
  font-size: 0.667rem;
  padding: 1px 5px;
}

.nax-policy-label {
  font-size: 0.769rem;
  color: var(--nax-ink-text-2);
}

/* Detail list */
.nax-detail-list {
  padding: 0 20px;
}

.nax-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--nax-ink-05);
}

.nax-detail-row:last-child {
  border-bottom: none;
}

.nax-detail-label {
  font-size: 0.769rem;
  color: var(--nax-ink-text-2);
}

.nax-detail-value {
  font-size: 0.769rem;
  color: var(--nax-ink);
  text-align: right;
}

/* Detail lists inside cards stay dense (profile sidebar) */
.nax-card .nax-detail-list {
  padding: 4px 0 8px;
}

.nax-card .nax-detail-row {
  padding: 5px 16px;
  border-bottom: none;
}

/* Role/member lists */
.nax-role-list {
  list-style: none;
  padding: 0 20px;
}

.nax-role-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--nax-ink-05);
}

.nax-role-item-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nax-role-item-meta {
  font-size: 0.692rem;
  color: var(--nax-ink-text-2);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nax-role-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nax-role-assign {
  padding: 14px 20px;
  border-top: 1px solid var(--nax-ink-10);
  background: var(--nax-ink-05);
}

.nax-role-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--nax-r);
  background: var(--nax-accent-lt);
  color: var(--nax-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nax-member-list {
  list-style: none;
  padding: 0 20px;
}

.nax-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--nax-ink-05);
}

.nax-member-item:last-child {
  border-bottom: none;
}

.nax-member-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nax-member-name {
  font-size: 0.769rem;
  font-weight: 500;
  color: var(--nax-ink);
}

.nax-member-email {
  font-size: 0.692rem;
  color: var(--nax-ink-text-2);
  margin-top: 1px;
}

.nax-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =============================================================================
   Session expiry warning — floats above the workspace, does not displace it
   ============================================================================= */
.nax-session-warning {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: var(--nax-z-toast);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 11px 14px;
    border-radius: var(--nax-r);
    background: var(--nax-chrome-2);
    color: var(--nax-chrome-text);
    font-family: var(--nax-font-sans);
    font-size: 0.8rem;
    line-height: 1.45;
    box-shadow: var(--nax-sh-lg);
}

.nax-session-warning__text { flex: 1; }

/* Tabular figures so the countdown doesn't jitter as digits change */
.nax-session-warning__clock {
    font-family: var(--nax-font-mono);
    font-variant-numeric: tabular-nums;
    /* Sits on --nax-chrome-2 (dark) — amber-light gives 8.3:1 there. */
    color: var(--nax-amber-light);
}

.nax-session-warning__btn {
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid var(--nax-signal-line);
    border-radius: var(--nax-r-sm);
    background: transparent;
    color: var(--nax-signal-bright);
    font-family: var(--nax-font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--nax-t), border-color var(--nax-t);
}

.nax-session-warning__btn:hover {
    background: var(--nax-signal-dim);
    border-color: var(--nax-signal);
}

.nax-session-warning__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--nax-signal-dim);
}

@media (max-width: 520px) {
    .nax-session-warning { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* =============================================================================
   Export download notice — standalone public page (minimal layout, may be
   opened by a signed-out recipient after their organization has closed)
   ============================================================================= */
.nax-export-notice {
    max-width: 34rem;
    margin: 12vh auto;
    padding: 0 24px;
    font-family: var(--nax-font-sans);
    color: var(--nax-ink);
    text-align: center;
}

.nax-export-notice h1 {
    font-family: var(--nax-font-serif);
    font-weight: 400;
    font-size: 1.9rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}

.nax-export-notice p {
    margin: 0 0 10px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--nax-ink-text-2);
}

.nax-export-notice__meta {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--nax-ink-10);
    font-size: 0.82rem;
    color: var(--nax-ink-text-3);
}

/* ── Shared keyboard focus rings (WCAG 2.4.7) ───────────────────────────── */

.nax-acct-tab:focus-visible,
.nax-search-filter-tab:focus-visible,
.nax-entity-switcher-trigger:focus-visible,
.nax-user-menu-trigger:focus-visible,
.nax-dash-module:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: 2px;
}

/* ── Record provenance strip ─────────────────────────────────────────────── */
.nax-provenance {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--nax-ink-08);
  font-size: 0.769rem;
  color: var(--nax-ink-text-2);
}

.nax-provenance__sep {
  color: var(--nax-ink-20);
}

.nax-provenance__link {
  color: var(--nax-accent);
  text-decoration: none;
  font-weight: 500;
}

.nax-provenance__link:hover {
  text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Record pane — the chart-of-accounts row-inspector idiom for any table.
   Wrap table + pane in .nax-pane-layout (data-controller="record-pane");
   rows opt in via data-action + data-pane-* attributes.
   -------------------------------------------------------------------------- */
.nax-pane-layout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.nax-pane-layout__main {
  flex: 1;
  min-width: 0;
}

.nax-row-clickable { cursor: pointer; }

.nax-table tbody tr.is-selected td { background: var(--nax-accent-dim); }

.nax-record-pane {
  display: none;
  width: 380px;
  flex-shrink: 0;
  background: var(--nax-surface);
  border: 1px solid var(--nax-ink-10);
  border-radius: 5px;
  position: sticky;
  top: calc(var(--nax-settings-chrome, 108px) + 12px);
  max-height: calc(100vh - var(--nax-topbar-h) - var(--nax-settings-chrome, 108px) - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--nax-ink-20) transparent;
}

.nax-record-pane.is-open { display: block; }

.nax-record-pane__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--nax-ink-10);
}

.nax-record-pane__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--nax-ink);
  margin: 0;
}

.nax-record-pane__close {
  border: none;
  background: transparent;
  color: var(--nax-ink-text-2);
  cursor: pointer;
  display: inline-flex;
  padding: 3px;
  border-radius: var(--nax-r-sm);
}

.nax-record-pane__close:hover { background: var(--nax-ink-05); color: var(--nax-ink); }

.nax-record-pane__body { padding: 16px; }

/* Caps section label over a value — the CoA detail grammar. */
.nax-record-pane__label {
  font-size: 0.692rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nax-ink-text-2);
  margin-top: 12px;
}
.nax-record-pane__label:first-child { margin-top: 0; }

.nax-record-pane__value { font-size: 0.846rem; color: var(--nax-ink); margin-top: 3px; overflow-wrap: anywhere; }

.nax-record-pane__value-lg { font-size: 1.15rem; font-weight: 700; color: var(--nax-ink); margin-top: 3px; }

.nax-record-pane__chip {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.692rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--nax-ink-05);
  color: var(--nax-ink-text-2);
}
.nax-record-pane__chip[data-value="Active"]      { background: var(--nax-green-bg, var(--nax-ink-05)); color: var(--nax-green-text, var(--nax-ink)); }
.nax-record-pane__chip[data-value="Suspended"],
.nax-record-pane__chip[data-value="Deactivated"] { background: var(--nax-red-bg); color: var(--nax-red-dark); }

.nax-record-pane__actions { display: flex; gap: 8px; margin: 14px 0; }
.nax-record-pane__actions .nax-btn { flex: 1; justify-content: center; }

.nax-record-pane__card {
  border: 1px solid var(--nax-ink-10);
  border-radius: 5px;
  margin-top: 10px;
  overflow: hidden;
}

.nax-record-pane__card-title {
  font-size: 0.692rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nax-ink-text-2);
  padding: 9px 12px;
  background: var(--nax-canvas);
  border-bottom: 1px solid var(--nax-ink-10);
}

.nax-record-pane__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.808rem;
}
.nax-record-pane__row + .nax-record-pane__row { border-top: 1px solid var(--nax-ink-08, var(--nax-ink-10)); }

.nax-record-pane__row-label { color: var(--nax-ink-text-2); flex-shrink: 0; }

.nax-record-pane__row-value { color: var(--nax-ink); text-align: right; overflow-wrap: anywhere; }

.nax-record-pane__row-value.is-empty { color: var(--nax-ink-text-2); }

/* Card-title leading icon (SectionCardComponent icon:) */
.nax-settings-section-title__ic {
  color: var(--nax-ink-text-2);
  flex-shrink: 0;
}

/* Detail card — neutral column wrapper for record/detail panels. Shared
   across engines; do not reach for another engine's card class. */
.nax-card-detail {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nax-ink-10);
  border-radius: var(--nax-r-lg);
  background: var(--nax-surface);
  overflow: hidden;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* A table inside the card takes the card's frame, not one of its own. */
.nax-card-detail .nax-table-wrap {
  border: 0;
  border-radius: 0;
}

/* =============================================================================
   Attachment list — the files on a record (AttachmentListComponent)
   ============================================================================= */
.nax-attachment-list {
  display: grid;
  gap: var(--nax-space-3);
}

.nax-attachment-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--nax-ink-10);
  border-radius: var(--nax-r);
  background: var(--nax-surface);
}

.nax-attachment-list li {
  display: flex;
  align-items: center;
  gap: var(--nax-space-3);
  padding: var(--nax-space-2) var(--nax-space-3);
}

.nax-attachment-list li + li {
  border-top: 1px solid var(--nax-ink-10);
}

.nax-attachment-list li a {
  color: var(--nax-ink);
  overflow-wrap: anywhere;
}

.nax-attachment-list small,
.nax-attachment-list > p {
  color: var(--nax-ink-text-2);
}

.nax-attachment-list > p {
  margin: 0;
}

.nax-attachment-list li form {
  margin-inline-start: auto;
}

.nax-attachment-list > form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nax-space-2);
}

/* =============================================================================
   Document preview — a PDF or image shown in place (DocumentPreviewComponent).
   data-kind is pdf | image | link; link means nothing could be shown inline.
   ============================================================================= */
.nax-document-preview {
  display: grid;
  gap: var(--nax-space-2);
  margin: 0;
}

.nax-document-preview object,
.nax-document-preview img {
  inline-size: 100%;
  border: 1px solid var(--nax-ink-10);
  border-radius: var(--nax-r);
  background: var(--nax-surface);
}

/* A PDF frame has no intrinsic size; a letter page's proportions let it read
   as a page and scale with whatever column it sits in. */
.nax-document-preview object {
  aspect-ratio: 8.5 / 11;
}

/* The object's own content, shown only where the browser has no PDF viewer. */
.nax-document-preview object p {
  margin: 0;
  padding: var(--nax-space-3);
  color: var(--nax-ink-text-2);
}

.nax-document-preview img {
  block-size: auto;
}

.nax-document-preview figcaption {
  display: flex;
  align-items: center;
  gap: var(--nax-space-3);
  color: var(--nax-ink-text-2);
  overflow-wrap: anywhere;
}

.nax-document-preview figcaption span {
  margin-inline-end: auto;
}

.nax-document-preview[data-kind="link"] figcaption {
  padding: var(--nax-space-3);
  border: 1px dashed var(--nax-ink-20);
  border-radius: var(--nax-r);
}

/* A converted preview (data-kind="pdf-preview"): nuboc_storage's pdf-preview
   controller draws each page onto a canvas at the column's width, a
   spreadsheet's sheets behind NAX tabs. */
.nax-document-preview section {
  display: grid;
  gap: var(--nax-space-3);
}

.nax-document-preview section figure {
  display: grid;
  gap: var(--nax-space-1);
  margin: 0;
}

/* The tabs, the failure notice and the sheets not chosen; display above
   would otherwise win. */
.nax-document-preview section [hidden] {
  display: none;
}

.nax-document-preview canvas {
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--nax-ink-10);
  border-radius: var(--nax-r);
  background: var(--nax-surface);
}

.nax-document-preview [role="status"] {
  display: flex;
  align-items: center;
  gap: var(--nax-space-2);
  margin: 0;
  color: var(--nax-ink-text-2);
}

/* In the detail drawer a preview is a window onto the document — the first
   page at the drawer's width, the rest a scroll away — so the file's name,
   actions and details stay in view. "Open full size" floats in its corner. */
.nax-detail-drawer .nax-document-preview {
  position: relative;
}

.nax-detail-drawer .nax-document-preview > :is(section, object, img) {
  max-block-size: var(--nax-preview-window-h);
}

.nax-detail-drawer .nax-document-preview > section {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nax-detail-drawer .nax-document-preview > img {
  object-fit: contain;
}

.nax-detail-drawer .nax-document-preview:is([data-kind="pdf"], [data-kind="image"], [data-state="ready"]) > figcaption > .nax-btn {
  position: absolute;
  inset-block-start: var(--nax-space-2);
  inset-inline-end: var(--nax-space-2);
  box-shadow: var(--nax-sh-md);
}

/* =============================================================================
   PDF viewer — a PDF read in a near-full-screen modal (PdfViewerComponent,
   the pdf-viewer controller on PDF.js's viewer components). It is a
   .nax-modal dialog laid out as a grid: the toolbar across the top, the
   page thumbnails beside the pages, a spreadsheet's sheet tabs underneath.
   The chrome follows the theme; the pages stay white, as printed.
   ============================================================================= */
dialog.nax-pdf-viewer {
  width: calc(100vw - 2 * var(--nax-space-6));
  height: calc(100dvh - 2 * var(--nax-space-6));
  max-height: none;
}

dialog.nax-pdf-viewer[open],
.nax-pdf-viewer:not(dialog) {
  display: grid;
  grid-template:
    "header  header"   auto
    "sidebar document" minmax(0, 1fr)
    "sheets  sheets"   auto
    / auto minmax(0, 1fr);
}

/* Inline (inline: true): the same viewer laid into the page, filling the
   box it is given — a workspace, a record page's document column. It is
   positioned so the pages' scroller sits in its document area. */
.nax-pdf-viewer:not(dialog) {
  position: relative;
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
  border: 1px solid var(--nax-ink-10);
  border-radius: var(--nax-r);
  background: var(--nax-surface);
}

/* The page behind stays where it was while a document is open. */
html:has(dialog.nax-pdf-viewer[open]) {
  overflow: hidden;
}

.nax-pdf-viewer > [hidden] {
  display: none;
}

.nax-pdf-viewer > header {
  grid-area: header;
  container: nax-pdf-toolbar / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nax-space-2) var(--nax-space-3);
  padding: var(--nax-space-2) var(--nax-space-3);
  border-bottom: 1px solid var(--nax-ink-10);
}

/* Rotate, full screen and print: buttons in a wide toolbar, a "More tools"
   menu (its popovertarget button) in a narrow one, so the toolbar keeps to
   one line. Full screen shows maximize, or minimize while full screen. */
.nax-pdf-viewer > header > menu {
  display: flex;
  align-items: center;
  gap: var(--nax-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

@container nax-pdf-toolbar (min-width: 841px) {
  .nax-pdf-viewer > header > [popovertarget] {
    display: none;
  }
}

/* Narrow, the title also gives up more of its width before anything wraps. */
@container nax-pdf-toolbar (max-width: 840px) {
  .nax-pdf-viewer > header > menu {
    display: none;
  }

  .nax-pdf-viewer > header > h2 {
    flex-basis: 6rem;
  }
}

.nax-pdf-viewer:not([data-fullscreen]) [data-pdf-viewer-target~="fullscreen"] > svg + svg,
.nax-pdf-viewer[data-fullscreen] [data-pdf-viewer-target~="fullscreen"] > svg:first-child {
  display: none;
}

.nax-pdf-viewer h2 {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font-size: 0.923rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nax-pdf-viewer fieldset,
.nax-pdf-viewer search {
  display: flex;
  align-items: center;
  gap: var(--nax-space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.nax-pdf-viewer fieldset > span,
.nax-pdf-viewer output {
  color: var(--nax-ink-text-2);
  font-size: 0.769rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nax-pdf-viewer input[type="number"] {
  width: 4.5em;
  text-align: end;
}

.nax-pdf-viewer select {
  width: auto;
}

.nax-pdf-viewer input[type="search"] {
  width: 14em;
}

/* The page thumbnails. */
.nax-pdf-viewer > nav:not(.nax-tabs) {
  grid-area: sidebar;
  width: var(--nax-pdf-sidebar-w);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-inline-end: 1px solid var(--nax-ink-10);
}

.nax-pdf-viewer ol {
  display: grid;
  gap: var(--nax-space-3);
  margin: 0;
  padding: var(--nax-space-3);
  list-style: none;
}

.nax-pdf-viewer ol button {
  display: grid;
  justify-items: center;
  gap: var(--nax-space-1);
  width: 100%;
  padding: var(--nax-space-1);
  border: 0;
  border-radius: var(--nax-r);
  background: none;
  color: var(--nax-ink-text-2);
  font-size: 0.692rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.nax-pdf-viewer ol button:hover {
  background: var(--nax-ink-05);
}

.nax-pdf-viewer ol button:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: -2px;
}

.nax-pdf-viewer ol button[aria-current="page"] {
  background: var(--nax-accent-dim);
  color: var(--nax-accent);
}

.nax-pdf-viewer ol canvas {
  width: 100%;
  height: auto;
  background: var(--nax-paper);
  box-shadow: 0 0 0 1px var(--nax-ink-10);
}

.nax-pdf-viewer ol button[aria-current="page"] canvas {
  box-shadow: 0 0 0 2px var(--nax-accent);
}

/* The pages' scroller. PDF.js requires it absolutely positioned; placed in
   the grid's document area, that area is its box. */
.nax-pdf-viewer > [role="region"] {
  grid-area: document;
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--nax-ink-10);
}

.nax-pdf-viewer > [role="region"]:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: -2px;
}

/* Loading and failure sit over the scroller, which is positioned too and
   comes first, so these paint above it. */
.nax-pdf-viewer > [role="status"],
.nax-pdf-viewer > section {
  grid-area: document;
  position: relative;
  place-self: center;
  margin: 0;
  border-radius: var(--nax-r-lg);
  background: var(--nax-surface);
  box-shadow: var(--nax-sh-md);
}

.nax-pdf-viewer > [role="status"] {
  display: flex;
  align-items: center;
  gap: var(--nax-space-2);
  padding: var(--nax-space-2) var(--nax-space-3);
  color: var(--nax-ink-text-2);
}

.nax-pdf-viewer > section {
  padding: var(--nax-space-4);
}

/* A print that could not be prepared: the message stays, the spinner goes. */
.nax-pdf-viewer > [data-failed] > .nax-spinner {
  display: none;
}

/* A spreadsheet's sheets, one a page: tabs along the bottom edge. */
.nax-pdf-viewer > .nax-tabs {
  grid-area: sheets;
  overflow-x: auto;
  padding-inline: var(--nax-space-2);
  border-top: 1px solid var(--nax-ink-10);
  border-bottom: 0;
}

.nax-pdf-viewer > .nax-tabs .nax-tab {
  margin: -1px 0 0;
  border-top: 2px solid transparent;
  border-bottom: 0;
}

.nax-pdf-viewer > .nax-tabs .nax-tab[aria-current="true"] {
  color: var(--nax-accent);
  border-top-color: var(--nax-accent);
}

@media (max-width: 720px) {
  dialog.nax-pdf-viewer {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .nax-pdf-viewer input[type="search"] {
    width: 9em;
  }
}

/* Full screen. An inline viewer is itself the full-screen element; a dialog
   may not be one, so the page goes full screen and the dialog covers it. */
dialog.nax-pdf-viewer[data-fullscreen] {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  border: 0;
  border-radius: 0;
}

.nax-pdf-viewer:not(dialog):fullscreen {
  border: 0;
  border-radius: 0;
}

/* Printing: the controller draws each page into an image in a .nax-pdf-print
   container on <body>, and only that container prints — a page a sheet, the
   image as large as the sheet allows, edge to edge on its own named page so
   no other print loses its margins. The !important is the escape hatch: a
   print must hide every other box, whatever display its own rules give it. */
.nax-pdf-print {
  display: none;
}

@page nax-pdf-print {
  margin: 0;
}

@media print {
  /* The app shell is one viewport tall with its overflow hidden
     (.nax-app in nax-layout.css), which would print only the first sheet.
     Let the print run on for as many pages as it has. */
  html:has(> body > .nax-pdf-print),
  body:has(> .nax-pdf-print) {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  body:has(> .nax-pdf-print) {
    margin: 0;
    padding: 0;
    background: none;
  }

  body:has(> .nax-pdf-print) > :not(.nax-pdf-print),
  body:has(> .nax-pdf-print) :modal {
    display: none !important;
  }

  .nax-pdf-print {
    display: block;
    page: nax-pdf-print;
  }

  .nax-pdf-print img {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: contain;
    break-inside: avoid;
  }

  .nax-pdf-print img:not(:last-child) {
    break-after: page;
  }
}

/* PDF.js's page layout, from its web/pdf_viewer.css (6.4.299): only what the
   page, its canvas and its text layer need. The page spacing is PDF.js's own,
   which its scroll arithmetic assumes. Page colour is --nax-paper. */
.nax-pdf-viewer .pdfViewer {
  --scale-factor: 1;
}

.nax-pdf-viewer .pdfViewer .page {
  --user-unit: 1;
  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
  --scale-round-x: 1px;
  --scale-round-y: 1px;

  direction: ltr;
  position: relative;
  overflow: visible;
  margin: 1px auto -8px;
  border: 9px solid transparent;
  background-clip: content-box;
  background-color: var(--nax-paper);
}

.nax-pdf-viewer .canvasWrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.nax-pdf-viewer .canvasWrapper canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  contain: content;
}

.nax-pdf-viewer .canvasWrapper canvas .structTree {
  contain: strict;
}

.nax-pdf-viewer .canvasWrapper canvas.detailView {
  image-rendering: pixelated;
}

.nax-pdf-viewer [data-main-rotation="90"] {
  transform: rotate(90deg) translateY(-100%);
}

.nax-pdf-viewer [data-main-rotation="180"] {
  transform: rotate(180deg) translate(-100%, -100%);
}

.nax-pdf-viewer [data-main-rotation="270"] {
  transform: rotate(270deg) translateX(-100%);
}

/* The text layer: transparent text laid exactly over the drawn page, so it
   can be selected, copied and found. Find's matches use the amber and green
   channels, which hold in either theme over a white page. */
.nax-pdf-viewer .textLayer {
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));

  color-scheme: only light;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: initial;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
}

.nax-pdf-viewer .textLayer.highlighting {
  touch-action: none;
}

.nax-pdf-viewer .textLayer :is(span, br) {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
  -webkit-user-select: text;
  user-select: text;
}

.nax-pdf-viewer .textLayer > :not(.markedContent),
.nax-pdf-viewer .textLayer .markedContent span:not(.markedContent) {
  --font-height: 0;
  --scale-x: 1;
  --rotate: 0deg;

  z-index: 1;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.nax-pdf-viewer .textLayer .markedContent {
  display: contents;
}

.nax-pdf-viewer .textLayer span[role="img"] {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

.nax-pdf-viewer .textLayer .highlight {
  margin: -1px;
  padding: 1px;
  border-radius: var(--nax-r-sm);
  background-color: rgba(var(--nax-amber-rgb), .35);
}

.nax-pdf-viewer .textLayer .highlight.appended {
  position: initial;
}

.nax-pdf-viewer .textLayer .highlight.begin {
  border-radius: var(--nax-r-sm) 0 0 var(--nax-r-sm);
}

.nax-pdf-viewer .textLayer .highlight.end {
  border-radius: 0 var(--nax-r-sm) var(--nax-r-sm) 0;
}

.nax-pdf-viewer .textLayer .highlight.middle {
  border-radius: 0;
}

.nax-pdf-viewer .textLayer .highlight.selected {
  background-color: rgba(var(--nax-green-rgb), .4);
  scroll-margin-top: var(--nax-space-8);
}

.nax-pdf-viewer .textLayer ::selection {
  background: rgba(var(--nax-accent-rgb), .25);
  color: transparent;
}

.nax-pdf-viewer .textLayer.selectionRendering ::selection,
.nax-pdf-viewer .textLayer br::selection {
  background: transparent;
  color: transparent;
}

.nax-pdf-viewer .textLayer .endOfContent {
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  display: block;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.nax-pdf-viewer .textLayer.selecting .endOfContent {
  top: 0;
}

@media screen and (forced-colors: active) {
  .nax-pdf-viewer .textLayer .highlight,
  .nax-pdf-viewer .textLayer .highlight.selected {
    background-color: transparent;
    outline: 1px solid Highlight;
  }
}

/* =============================================================================
   Workspace — the frame a full-page app canvas sits in (WorkspaceComponent).
   The one place a fixed height is right: Studio sizes itself to its box, so
   an unsized box collapses it to nothing.
   ============================================================================= */
.nax-workspace {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  block-size: calc(100vh - var(--nax-workspace-offset));
  min-block-size: var(--nax-workspace-min-h);
}

/* =============================================================================
   Smart date field (DateFieldComponent). Under the input: the readings it
   asks about, then the date it settled on. A field it cannot settle yet is
   aria-invalid and quiet about it — amber, not an error.
   ============================================================================= */
.nax-date-field .nax-input[aria-invalid="true"],
.nax-date-range-last .nax-input[aria-invalid="true"] {
  border-color: var(--nax-amber);
}

.nax-date-field p {
  margin: var(--nax-space-1) 0 0;
  color: var(--nax-ink-text-2);
}

.nax-date-field output {
  display: block;
  margin-block-start: var(--nax-space-1);
  color: var(--nax-ink-text-2);
}

.nax-date-field output:empty {
  display: none;
}

/* =============================================================================
   Date range picker (DateRangePickerComponent). The popover is <dialog
   popover>; it hangs under its trigger where CSS anchor positioning ships and
   sits centred where it does not, scrolling when the viewport is short.
   Presets and calendar carry `hidden` until date_range_controller.js
   connects, leaving the fields and Apply.
   State is ARIA and data: aria-pressed on the chosen preset and the two ends,
   aria-current on the group holding the choice, data-in-range across the
   span, aria-current="date" on today, data-companion on the month drawn
   beside the end month.
   ============================================================================= */
.nax-date-range {
  display: inline-block;
  anchor-scope: --nax-date-range;
}

.nax-date-range > button {
  anchor-name: --nax-date-range;
}

.nax-date-range dialog {
  max-inline-size: calc(100vw - 2 * var(--nax-space-3));
  max-block-size: calc(100dvh - 2 * var(--nax-space-3));
  overflow: auto;
  padding: 0;
  border: 1px solid var(--nax-ink-10);
  border-radius: var(--nax-r-lg);
  background: var(--nax-surface);
  color: var(--nax-ink);
  box-shadow: var(--nax-sh-lg);
}

.nax-date-range dialog:popover-open {
  display: grid;
  block-size: max-content;
  align-content: start;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "presets dates"
    "presets last"
    "presets calendar"
    "presets footer";
}

@supports (position-area: block-end) {
  .nax-date-range dialog {
    position-anchor: --nax-date-range;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-inline, flip-block;
    /* An anchored box otherwise stretches to fill its position area, and
       the grid then spreads that height between its rows as gaps. */
    align-self: start;
    justify-self: start;
    inset: auto;
    margin: var(--nax-space-1) 0 0;
  }
}

.nax-date-range-presets {
  grid-area: presets;
  padding: var(--nax-space-2);
  border-inline-end: 1px solid var(--nax-ink-10);
}

.nax-date-range-presets menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nax-date-range-presets button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--nax-space-3);
  inline-size: 100%;
  padding: var(--nax-space-1) var(--nax-space-3);
  border: 0;
  border-radius: var(--nax-r-sm);
  background: none;
  color: var(--nax-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.nax-date-range-presets small {
  flex-basis: 100%;
  color: var(--nax-ink-text-2);
}

.nax-date-range-presets button:hover,
.nax-date-range-presets button[aria-pressed="true"],
.nax-date-range-presets button[aria-current="true"] {
  background: var(--nax-ink-05);
}

.nax-date-range-presets button[aria-pressed="true"],
.nax-date-range-presets button[aria-current="true"] {
  font-weight: 600;
}

/* Every fiscal year on the books, and every quarter of them, can be a long
   list; it scrolls under its Back button. */
.nax-date-range-presets section > menu {
  max-block-size: var(--nax-list-max-h);
  overflow-y: auto;
}

.nax-date-range-presets section > button {
  justify-content: flex-start;
  margin-block-end: var(--nax-space-1);
  font-weight: 600;
}

.nax-date-range-presets select {
  display: none;
}

.nax-date-range fieldset {
  grid-area: dates;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--nax-space-2);
  margin: 0;
  padding: var(--nax-space-3) var(--nax-space-4) 0;
  border: 0;
}

.nax-date-range fieldset .nax-date-field {
  flex: 1 1 0;
  min-inline-size: 0;
}

.nax-date-range fieldset > svg {
  block-size: var(--nax-row);
}

.nax-date-range fieldset > label:not(.nax-visually-hidden) {
  display: inline-flex;
  align-items: center;
  gap: var(--nax-space-1);
  min-block-size: var(--nax-row);
}

.nax-date-range fieldset > p {
  flex-basis: 100%;
  margin: 0;
  color: var(--nax-ink-text-2);
}

.nax-date-range fieldset > p:empty {
  display: none;
}

/* The Last row is a fieldset too, laid out as the dates are; only its
   place and its alignment differ. */
.nax-date-range .nax-date-range-last {
  grid-area: last;
  align-items: center;
}

.nax-date-range-last .nax-input,
.nax-date-range-last .nax-select {
  flex: 1 1 0;
  min-inline-size: 0;
}

.nax-date-range-calendar {
  grid-area: calendar;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--nax-space-6);
  padding: var(--nax-space-3) var(--nax-space-4);
}

/* ‹ month year › across the top, the two selects centred between the
   arrows. */
.nax-date-range-calendar header {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: var(--nax-space-2);
  padding-block-end: var(--nax-space-3);
}

.nax-date-range-calendar header select:first-of-type {
  margin-inline-start: auto;
}

.nax-date-range-calendar header select:last-of-type {
  margin-inline-end: auto;
}

.nax-date-range table {
  border-collapse: collapse;
}

.nax-date-range caption {
  padding-block-end: var(--nax-space-3);
  font-weight: 600;
}

.nax-date-range th {
  padding-block-end: var(--nax-space-1);
  color: var(--nax-ink-text-2);
  font-weight: 400;
}

.nax-date-range th abbr {
  text-decoration: none;
}

.nax-date-range td {
  padding: 0;
}

.nax-date-range td button {
  inline-size: var(--nax-row);
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--nax-r);
  background: none;
  color: var(--nax-ink);
  font: inherit;
  cursor: pointer;
}

.nax-date-range td button:hover {
  background: var(--nax-ink-05);
}

.nax-date-range td button:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: 2px;
}

.nax-date-range td button[data-in-range] {
  border-radius: 0;
  background: var(--nax-accent-lt);
}

.nax-date-range td button[aria-pressed="true"] {
  border-radius: var(--nax-r);
  background: var(--nax-accent);
  color: var(--nax-surface);
}

.nax-date-range td button[aria-current="date"] {
  font-weight: 700;
  text-decoration: underline;
}

.nax-date-range dialog footer {
  grid-area: footer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nax-space-2);
  padding: var(--nax-space-3) var(--nax-space-4);
  border-block-start: 1px solid var(--nax-ink-10);
}

.nax-date-range footer output {
  margin-inline-end: auto;
  color: var(--nax-ink-text-2);
}

@media (max-width: 768px) {
  .nax-date-range dialog:popover-open {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "presets" "dates" "last" "calendar" "footer";
  }

  .nax-date-range-presets {
    border-inline-end: 0;
    padding: var(--nax-space-3) var(--nax-space-4) 0;
  }

  .nax-date-range-presets menu,
  .nax-date-range-presets section {
    display: none;
  }

  .nax-date-range-presets select {
    display: block;
  }

  .nax-date-range .nax-btn,
  .nax-date-range .nax-input,
  .nax-date-range .nax-select,
  .nax-date-range fieldset > label:not(.nax-visually-hidden),
  .nax-date-field p button {
    min-block-size: var(--nax-touch);
  }

  .nax-date-range-calendar header .nax-btn {
    min-inline-size: var(--nax-touch);
  }

  .nax-date-range table[data-companion] {
    display: none;
  }

  .nax-date-range td button {
    inline-size: var(--nax-touch);
  }
}

/* =============================================================================
   Record paging (RecordPagingComponent) — ← 41 of 212 → in the breadcrumb
   row. An arrow with nowhere to go is an aria-hidden span, not a link.
   ============================================================================= */
.nax-record-paging {
  display: inline-flex;
  align-items: center;
  gap: var(--nax-space-1);
  color: var(--nax-ink-text-2);
}

.nax-record-paging > a,
.nax-record-paging > span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--nax-space-6);
  block-size: var(--nax-space-6);
  border-radius: var(--nax-r-sm);
  color: var(--nax-ink-text-2);
}

.nax-record-paging > a:hover {
  background: var(--nax-ink-05);
  color: var(--nax-ink);
}

.nax-record-paging > span[aria-hidden="true"] {
  opacity: .3;
}

.nax-record-paging > span:not([aria-hidden]) {
  font-family: var(--nax-font-mono);
  font-size: 0.692rem;
  white-space: nowrap;
}

/* =============================================================================
   Record rail (RecordRailComponent) — the list beside a record. Its width is
   --nax-record-rail-w, which the page's split may override (a saved width, a
   drag); header, search and list pin to it so nothing reflows while the rail
   animates open or closed. State is aria-current on the record on screen and
   `hidden` on records a search filters out.
   ============================================================================= */
.nax-record-rail {
  flex: 0 0 var(--nax-record-rail-w);
  inline-size: var(--nax-record-rail-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--nax-surface);
  transition: flex-basis var(--nax-t-med), inline-size var(--nax-t-med);
}

.nax-record-rail > header,
.nax-record-rail > search,
.nax-record-rail > nav {
  inline-size: var(--nax-record-rail-w);
  box-sizing: border-box;
}

.nax-record-rail > header {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: var(--nax-space-2);
  padding: var(--nax-space-3) var(--nax-space-3) 0;
}

/* Accessibility floors: a 15px heading, a 12px count. */
.nax-record-rail h2 {
  margin: 0;
  font-size: 1.153rem;
  color: var(--nax-ink);
}

.nax-record-rail > header > span {
  font-family: var(--nax-font-mono);
  font-size: 0.923rem;
  color: var(--nax-ink-text-2);
}

.nax-record-rail > search {
  display: block;
  position: relative;
  flex-shrink: 0;
  padding: var(--nax-space-3);
  border-block-end: 1px solid var(--nax-ink-08);
}

.nax-record-rail > search svg {
  position: absolute;
  inset-inline-start: calc(var(--nax-space-3) + var(--nax-space-2));
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--nax-ink-text-2);
  pointer-events: none;
}

.nax-record-rail > search input {
  inline-size: 100%;
  block-size: var(--nax-space-7);
  padding: 0 var(--nax-space-2) 0 var(--nax-space-7);
  border: 1px solid var(--nax-ink-20);
  border-radius: var(--nax-r);
  background: var(--nax-canvas);
  color: var(--nax-ink);
  font: inherit;
  font-size: 0.769rem;
}

.nax-record-rail > search input:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: 1px;
  border-color: transparent;
}

.nax-record-rail > nav {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--nax-space-1);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* A record in the list is a plain row, not a boxed card. What the row shows
   is the caller's. */
.nax-record-rail > nav > a {
  padding: var(--nax-space-2) var(--nax-space-3);
  border-radius: var(--nax-r);
  color: inherit;
  text-decoration: none;
  transition: background var(--nax-t);
}

.nax-record-rail > nav > a:hover {
  background: var(--nax-ink-04);
}

.nax-record-rail > nav > a:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: -2px;
}

.nax-record-rail > nav > a[aria-current="page"] {
  background: var(--nax-accent-lt);
}

.nax-record-rail > nav > p {
  margin: var(--nax-space-2) var(--nax-space-1);
  text-align: center;
  font-size: 0.731rem;
  color: var(--nax-ink-text-2);
}

@media (max-width: 1180px) {
  :root { --nax-record-rail-w: 248px; }
}

/* =============================================================================
   Record actions (RecordActionsComponent) — secondaries as text buttons, a
   menu of more, then the one filled primary. An action not yet available is
   aria-disabled with its reason in the title. A state change is a button_to
   form, which stays out of the layout.
   ============================================================================= */
.nax-record-actions {
  display: flex;
  align-items: center;
  gap: var(--nax-space-1);
  flex-shrink: 0;
}

.nax-record-actions form.button_to {
  display: contents;
}

.nax-record-action {
  display: inline-flex;
  align-items: center;
  block-size: var(--nax-row-compact);
  padding: 0 var(--nax-space-3);
  border: 0;
  border-radius: var(--nax-r);
  background: transparent;
  color: var(--nax-ink);
  font-size: 0.808rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--nax-t);
}

.nax-record-action:hover {
  background: var(--nax-ink-05);
  color: var(--nax-ink);
  text-decoration: none;
}

.nax-record-action:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: -1px;
}

.nax-record-action[aria-disabled="true"] {
  color: var(--nax-ink-40);
  cursor: default;
}

.nax-record-action[aria-disabled="true"]:hover {
  background: transparent;
}

/* The menu trigger, the one icon-only control. */
.nax-record-action[aria-haspopup] {
  justify-content: center;
  inline-size: var(--nax-row-compact);
  padding: 0;
  color: var(--nax-ink-text-2);
}

.nax-record-action[aria-expanded="true"] {
  background: var(--nax-ink-05);
  color: var(--nax-ink);
}

.nax-record-action--primary {
  background: var(--nax-accent);
  color: var(--nax-on-accent);
  font-weight: 600;
}

.nax-record-action--primary:hover {
  background: var(--nax-accent-dark);
  color: var(--nax-on-accent);
}

.nax-record-actions [role="group"] + [role="group"] {
  margin-block-start: var(--nax-space-1);
  padding-block-start: var(--nax-space-1);
  border-block-start: 1px solid var(--nax-ink-10);
}

.nax-record-actions .nax-dropdown-item[aria-disabled="true"] {
  opacity: .55;
  cursor: default;
}

/* Secondaries collapse into the menu, last first; the menu already holds them. */
@media (max-width: 1180px) {
  .nax-record-action[data-tier]:not([data-tier="1"]) { display: none; }
}

@media (max-width: 860px) {
  .nax-record-action[data-tier] { display: none; }
}

/* =============================================================================
   Popover (PopoverComponent). A <dialog popover>: the browser opens it,
   closes it on Escape or a click outside, and lays it in the top layer, so
   it takes no z-index. Its state is :popover-open; nothing sets a class.
   Where it hangs is the caller's: anchored under its trigger where CSS
   anchor positioning ships, centred where it does not. A long list scrolls
   inside it; its heading, choices and footer stay in view.
   ============================================================================= */
.nax-popover {
  min-inline-size: var(--nax-popover-w);
  max-inline-size: calc(100vw - 2 * var(--nax-space-3));
  max-block-size: var(--nax-list-max-h);
  padding: var(--nax-space-1);
  border: 1px solid var(--nax-ink-20);
  border-radius: var(--nax-r);
  background: var(--nax-surface);
  color: var(--nax-ink);
  box-shadow: var(--nax-sh-md);
  accent-color: var(--nax-accent);
}

.nax-popover[data-size="form"] {
  min-inline-size: var(--nax-popover-form-w);
}

.nax-popover[data-size="wide"] {
  min-inline-size: min(var(--nax-popover-wide-w), calc(100vw - 2 * var(--nax-space-3)));
  padding: var(--nax-space-2) var(--nax-space-3);
}

.nax-popover:popover-open {
  display: flex;
  flex-direction: column;
}

.nax-popover h2 {
  margin: 0;
  padding: var(--nax-space-2) var(--nax-space-3) var(--nax-space-1);
  font: inherit;
  font-size: 0.692rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nax-ink-text-2);
}

.nax-popover > label:not([hidden]) {
  display: block;
  padding: var(--nax-space-1);
}

.nax-popover > label input {
  inline-size: 100%;
}

.nax-popover menu,
.nax-popover ul {
  flex: 0 1 auto;
  min-block-size: 0;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nax-popover menu button,
.nax-popover li label,
.nax-popover [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: var(--nax-space-2);
  inline-size: 100%;
  min-block-size: var(--nax-row-compact);
  padding: 0 var(--nax-space-3);
  border: 0;
  border-radius: var(--nax-r-sm);
  background: none;
  color: var(--nax-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.nax-popover menu button:hover,
.nax-popover menu button:focus-visible,
.nax-popover li label:hover,
.nax-popover li label:has(input:focus-visible),
.nax-popover [role="menuitem"]:hover,
.nax-popover [role="menuitem"]:focus-visible {
  background: var(--nax-ink-04);
}

/* Inset, because the list scrolls and would clip a ring drawn outside the row. */
.nax-popover menu button:focus-visible,
.nax-popover li label:has(input:focus-visible),
.nax-popover [role="menuitem"]:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: -2px;
}

.nax-popover small,
.nax-popover data {
  margin-inline-start: auto;
  padding-inline-start: var(--nax-space-3);
  color: var(--nax-ink-text-3);
  font-family: var(--nax-font-mono);
  font-size: 0.769rem;
  font-variant-numeric: tabular-nums;
}

.nax-popover > p {
  margin: 0;
  padding: var(--nax-space-2) var(--nax-space-3);
  color: var(--nax-ink-text-3);
}

.nax-popover fieldset {
  display: flex;
  gap: var(--nax-space-4);
  margin: var(--nax-space-1) 0 0;
  padding: var(--nax-space-2) var(--nax-space-3);
  border: 0;
  border-block-start: 1px solid var(--nax-ink-08);
}

.nax-popover fieldset label {
  display: inline-flex;
  align-items: center;
  gap: var(--nax-space-1);
  cursor: pointer;
}

.nax-popover footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--nax-space-2);
  padding: var(--nax-space-2);
}

/* A menu (role="menu"): links, buttons and button_to forms, one per row. A
   destructive item speaks in the danger tokens; one that can't be used now is
   aria-disabled and says why under its label, so neither leans on colour. */
.nax-popover[role="menu"] [role="menuitem"] {
  text-decoration: none;
}

.nax-popover[role="menu"] [role="menuitem"] > svg {
  flex-shrink: 0;
  color: var(--nax-ink-text-2);
}

/* A menu may open on a line about its subject ("31 files") and split its
   items into groups with rules; neither is an item, so arrows pass over them. */
.nax-popover[role="menu"] > p {
  padding-block: var(--nax-space-1);
  font-size: 0.769rem;
}

.nax-popover[role="menu"] > hr {
  margin: var(--nax-space-1) var(--nax-space-3);
  border: 0;
  border-block-start: 1px solid var(--nax-ink-08);
}

.nax-popover [role="menuitem"].nax-menuitem-danger,
.nax-popover [role="menuitem"].nax-menuitem-danger > svg {
  color: var(--nax-red-text);
}

.nax-popover [role="menuitem"].nax-menuitem-danger:hover,
.nax-popover [role="menuitem"].nax-menuitem-danger:focus-visible {
  background: var(--nax-red-bg);
}

.nax-popover [role="menuitem"][aria-disabled="true"] {
  flex-wrap: wrap;
  column-gap: var(--nax-space-2);
  padding-block: var(--nax-space-1);
  color: var(--nax-ink-text-3);
  cursor: default;
}

.nax-popover [role="menuitem"][aria-disabled="true"] > svg {
  color: inherit;
}

.nax-popover [role="menuitem"][aria-disabled="true"]:hover {
  background: none;
}

.nax-popover [role="menuitem"][aria-disabled="true"] > small {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.769rem;
  font-variant-numeric: normal;
}

@media (pointer: coarse) {
  .nax-popover menu button,
  .nax-popover li label,
  .nax-popover [role="menuitem"] {
    min-block-size: var(--nax-touch);
  }
}

/* =============================================================================
   Filter bar (FilterBarComponent). One bordered box, the GET form, holds the
   chips, the search and the Filter button; the view picker sits left of it,
   the row-size switch and columns right, each outside the form. The field
   and value popovers hang under the box. A value list opened from the field
   list stays on top of it, so the field list hides while a value list is
   open; Escape closes the value list and shows the field list again.
   ============================================================================= */
.nax-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--nax-space-2);
  padding: var(--nax-space-2);
  border-block-end: 1px solid var(--nax-ink-08);
  anchor-scope: --nax-filter-bar;
}

.nax-filter-bar search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--nax-space-2);
  min-inline-size: 0;
}

.nax-filter-bar search > form:has(> input[type="search"]) {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nax-space-1);
  min-inline-size: 0;
  min-block-size: var(--nax-row-compact);
  padding: 0 var(--nax-space-1);
  border: 1px solid var(--nax-ink-20);
  border-radius: var(--nax-r);
  background: var(--nax-surface);
  anchor-name: --nax-filter-bar;
}

.nax-filter-bar search > form:has(> input[type="search"]):focus-within {
  border-color: var(--nax-accent);
  box-shadow: 0 0 0 2px var(--nax-accent-dim);
}

.nax-filter-bar form > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nax-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nax-filter-bar form > ul > li {
  display: inline-flex;
  align-items: center;
  block-size: var(--nax-control-sm);
  border-radius: var(--nax-r-sm);
  background: var(--nax-accent-lt);
  color: var(--nax-accent-dark);
}

.nax-filter-bar form > ul > li > * {
  display: inline-flex;
  align-items: center;
  gap: var(--nax-space-1);
  block-size: 100%;
  padding: 0 var(--nax-space-2);
  border: 0;
  border-radius: var(--nax-r-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.nax-filter-bar form > ul > li > :hover {
  background: var(--nax-accent-dim);
}

/* A typed filter that can't be read: shown, never quietly dropped. */
.nax-filter-bar form > ul > li[data-state="error"] {
  background: var(--nax-red-bg);
  color: var(--nax-red-text);
}

.nax-filter-bar form > ul strong {
  font-weight: 600;
}

.nax-filter-bar input[type="search"]:not(.nax-input) {
  flex: 1 0 16ch;
  block-size: var(--nax-control-sm);
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.nax-filter-bar form > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--nax-control-sm);
  block-size: var(--nax-control-sm);
  border-radius: 50%;
  color: var(--nax-ink-text-3);
}

.nax-filter-bar form > a:hover {
  background: var(--nax-ink-06);
  color: var(--nax-ink);
}

.nax-filter-bar .nax-popover:popover-open:has(~ .nax-popover:popover-open) {
  visibility: hidden;
}

/* The field list comes first; every popover after it is a field's values, which carry Is / Is not and Apply. */
.nax-filter-bar .nax-popover ~ .nax-popover {
  min-inline-size: var(--nax-popover-form-w);
}

@supports (position-area: block-end) {
  .nax-filter-bar .nax-popover {
    position-anchor: --nax-filter-bar;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-inline;
    inset: auto;
    margin: var(--nax-space-1) 0 0;
  }

  /* A popover opened from a button at the end of the bar hangs from that
     button (its opener is its anchor), right edges lined up. */
  .nax-popover[data-align="start"] {
    position-anchor: auto;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-inline;
    inset: auto;
    margin: var(--nax-space-1) 0 0;
  }

  .nax-popover[data-align="end"],
  .nax-filter-bar .nax-popover[data-align="end"] {
    position-anchor: auto;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-inline;
    inset: auto;
    margin: var(--nax-space-1) 0 0;
  }
}

/* ── Column header menu ────────────────────────────────────────────────
   A faint ⌄ beside each header (always there, so touch can reach it),
   opening sort, a typed filter, pick values, move, hide and help. */
.nax-column-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  margin-inline-start: 2px;
  padding: 0;
  border: 0;
  border-radius: var(--nax-r-sm);
  background: transparent;
  color: var(--nax-ink-30);
  cursor: pointer;
}

th:hover .nax-column-menu-button,
.nax-column-menu-button:focus-visible {
  color: var(--nax-ink);
  background: var(--nax-ink-06);
}

.nax-column-menu-button:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: 1px;
}

.nax-col-funnel {
  color: var(--nax-accent);
  flex: none;
}

.nax-column-menu {
  display: flex;
  flex-direction: column;
  gap: var(--nax-space-1);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  text-align: start;
}

.nax-column-menu menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nax-column-menu menu a,
.nax-column-menu menu button {
  display: flex;
  align-items: center;
  gap: var(--nax-space-2);
  inline-size: 100%;
  min-block-size: var(--nax-row-compact);
  padding: 0 var(--nax-space-2);
  border: 0;
  border-radius: var(--nax-r-sm);
  background: transparent;
  font: inherit;
  font-size: 0.846rem;
  color: var(--nax-ink-70);
  text-decoration: none;
  cursor: pointer;
}

.nax-column-menu menu svg {
  color: var(--nax-accent);
  flex: none;
}

.nax-column-menu menu a:hover,
.nax-column-menu menu button:hover:not([disabled]),
.nax-column-menu menu a:focus-visible,
.nax-column-menu menu button:focus-visible {
  background: var(--nax-ink-04);
  color: var(--nax-ink);
  outline: none;
}

.nax-column-menu menu a[aria-current] {
  color: var(--nax-ink);
  font-weight: 600;
}

.nax-column-menu menu button[disabled] {
  opacity: .4;
  cursor: default;
}

.nax-column-menu__filter {
  display: flex;
  flex-direction: column;
  gap: var(--nax-space-1);
  padding: var(--nax-space-2);
  border-block: 1px solid var(--nax-ink-08);
}

.nax-column-menu__filter label {
  font-size: 0.692rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nax-ink-text-2);
}

.nax-column-menu__filter div {
  display: flex;
  gap: var(--nax-space-1);
}

.nax-column-menu__filter input {
  flex: 1;
  min-inline-size: 0;
  block-size: var(--nax-control-sm);
  padding: 0 var(--nax-space-2);
  border: 1px solid var(--nax-ink-30);
  border-radius: var(--nax-r-sm);
  font-family: var(--nax-font-mono);
  font-size: 0.846rem;
}

.nax-column-menu__filter input:focus {
  outline: 2px solid var(--nax-accent);
  outline-offset: -1px;
  border-color: var(--nax-accent);
}

.nax-column-menu__filter input[aria-invalid] {
  border-color: var(--nax-red);
}

.nax-column-menu__note {
  margin: 0;
  font-family: var(--nax-font-mono);
  font-size: 0.692rem;
  color: var(--nax-ink-text-3);
}

.nax-column-menu__note[data-state="error"] {
  font-family: inherit;
  color: var(--nax-red-text);
}

.nax-column-menu__layout {
  padding-block-start: var(--nax-space-1);
  border-block-start: 1px solid var(--nax-ink-08);
}

.nax-column-menu__help {
  padding: var(--nax-space-1) var(--nax-space-2);
  border-block-start: 1px solid var(--nax-ink-08);
  font-size: 0.769rem;
  color: var(--nax-ink-70);
}

.nax-column-menu__help summary {
  cursor: pointer;
  color: var(--nax-accent);
}

.nax-column-menu__help p {
  margin: var(--nax-space-1) 0 0;
}

/* A popover opened from a table header sits in the top layer but still
   inherits the header's type; it reads as body text. */
th .nax-popover {
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  font-weight: 400;
  font-size: 0.846rem;
  color: var(--nax-ink);
}

.nax-column-menu__values {
  display: flex;
  flex-direction: column;
  gap: var(--nax-space-1);
  padding: var(--nax-space-1) var(--nax-space-2) var(--nax-space-2);
  border-block-end: 1px solid var(--nax-ink-08);
}

.nax-column-menu__values fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.nax-column-menu__values legend {
  padding: 0;
  font-size: 0.692rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nax-ink-text-2);
}

.nax-column-menu__values ul {
  list-style: none;
  margin: var(--nax-space-1) 0 0;
  padding: 0;
  max-block-size: 12rem;
  overflow-y: auto;
}

.nax-column-menu__values li label {
  display: flex;
  align-items: center;
  gap: var(--nax-space-2);
  min-block-size: var(--nax-control-sm);
  padding: 0 var(--nax-space-1);
  border-radius: var(--nax-r-sm);
  cursor: pointer;
}

.nax-column-menu__values li label:hover {
  background: var(--nax-ink-04);
}

.nax-column-menu__values data {
  margin-inline-start: auto;
  font-family: var(--nax-font-mono);
  font-size: 0.769rem;
  color: var(--nax-ink-text-3);
}

.nax-column-menu__op {
  display: flex;
  align-items: center;
  gap: var(--nax-space-3);
}

.nax-column-menu__op label {
  display: flex;
  align-items: center;
  gap: var(--nax-space-1);
  cursor: pointer;
}

.nax-column-menu__op button {
  margin-inline-start: auto;
}

/* =============================================================================
   Folder tree (FolderTreeComponent). A <nav> of nested lists: each folder a
   row of two columns, its disclosure button (when it holds folders) and its
   link; the folders inside sit under the link, so every level indents by
   one button's width. From the fourth level down (a folder three below its
   root) the indent and the disclosure column both shrink to the deep step,
   so a name four levels down still shows; a name too long for its row
   trails off, and the link's title gives it whole. Branch state is aria-expanded plus hidden on the list
   it controls. On narrow screens the Location button folds the whole tree,
   read from its aria-expanded; it stays hidden, and the tree open, until
   folder_tree_controller.js shows it.
   The link spans the whole row, under the disclosure button, so hovering or
   focusing anything in the row tints all of it; the current folder keeps
   its stronger selected look instead.
   A folder with actions ends its row in a "…" menu button (aria-haspopup),
   laid over the count's slot. Hovering or focusing the row, or opening its
   menu, swaps the count for the "…" in place — the count fades but stays
   in the accessibility tree — and a row without actions keeps its count.
   On a coarse pointer there is no hover, so the "…" always shows, in a slot
   of its own after the count. Its menu is a .nax-popover role="menu",
   anchored under it.
   ============================================================================= */
/* row:  a row's height, and its disclosure column's width at the top levels.
   col:  this folder's disclosure column — its link's leading slot.
   step: how far the folders inside this one sit in from it.
   gap:  the space between the glyphs and words of its row. */
.nax-folder-tree {
  --nax-folder-tree-row: var(--nax-control-sm);
  --nax-folder-tree-col: var(--nax-folder-tree-row);
  --nax-folder-tree-gap: var(--nax-space-2);
  --nax-folder-tree-step: var(--nax-folder-tree-row);
  --nax-folder-tree-deep-col: var(--nax-tree-step-deep);
  --nax-folder-tree-deep-step: var(--nax-tree-step-deep);
  --nax-folder-tree-line: var(--nax-ink-20);
  font-size: 0.846rem;
}

.nax-folder-tree li li li {
  --nax-folder-tree-step: var(--nax-folder-tree-deep-step);
}

.nax-folder-tree li li li li {
  --nax-folder-tree-col: var(--nax-folder-tree-deep-col);
  --nax-folder-tree-gap: var(--nax-space-1);
}

/* A group with no folder to open (the quick-access rows: All files, Recent,
   Pinned) reserves no disclosure column, so its icons start where the group
   headings' words do; the counts keep the row's end, in line with the
   folders below. */
.nax-folder-tree > div > ul:not(:has(> li > button[aria-controls])) > li {
  --nax-folder-tree-col: 0px;
}

/* One line, always: a heading too long for the column trails off, and its
   title gives it whole. */
.nax-folder-tree h2 {
  margin: var(--nax-space-3) 0 var(--nax-space-1);
  padding: 0 var(--nax-space-2);
  overflow: hidden;
  font: inherit;
  font-size: 0.692rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nax-ink-text-2);
}

.nax-folder-tree h2:first-child {
  margin-block-start: 0;
}

/* A group with actions heads itself with a row: its heading across the whole
   of it, and its compact icon-only buttons (the VS Code Explorer's New File /
   Refresh / Collapse All) in one box laid over the heading's end. Out of the
   flow, they take none of the heading's width and showing them shifts
   nothing: the box paints the panel's surface, fading in over a short run so
   a long heading trails off under it rather than being cut. They show while
   the group — heading or folders — is hovered or holds focus, and always on
   a coarse pointer; hidden, they only fade, so they stay in the tab order
   and focus brings them back. The row is as tall as the buttons, shown or
   not. The expand/collapse toggle carries both its icons and shows the one
   its data-tree-next names. A button_to's form steps aside so its button
   sits in the box. */
.nax-folder-tree header {
  --nax-folder-tree-surface: var(--nax-surface);
  --nax-folder-tree-fade: var(--nax-space-4);
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: var(--nax-control-xs);
  margin: var(--nax-space-3) 0 var(--nax-space-1);
}

.nax-folder-tree header:first-child {
  margin-block-start: 0;
}

.nax-folder-tree header > h2 {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
}

.nax-folder-tree header > div {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: var(--nax-space-1);
  padding-inline: var(--nax-folder-tree-fade) var(--nax-space-1);
  background: linear-gradient(to right, transparent, var(--nax-folder-tree-surface) var(--nax-folder-tree-fade));
  opacity: 0;
  transition: opacity var(--nax-t);
}

.nax-folder-tree header > div:dir(rtl) {
  background: linear-gradient(to left, transparent, var(--nax-folder-tree-surface) var(--nax-folder-tree-fade));
}

.nax-folder-tree header:is(:hover, :focus-within, :has(+ :is(ul, p):is(:hover, :focus-within))) > div {
  opacity: 1;
}

.nax-folder-tree header form {
  display: contents;
}

.nax-folder-tree header :is(a, button) {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: var(--nax-control-xs);
  block-size: var(--nax-control-xs);
  padding: 0;
  border: 0;
  border-radius: var(--nax-r-sm);
  background: none;
  color: var(--nax-ink-text-2);
  cursor: pointer;
  transition: background var(--nax-t);
}

.nax-folder-tree header :is(a, button):not([aria-disabled="true"]):hover {
  background: var(--nax-ink-05);
  color: var(--nax-ink);
}

.nax-folder-tree header [aria-disabled="true"] {
  color: var(--nax-ink-text-3);
  cursor: not-allowed;
}

.nax-folder-tree header [data-tree-next="expand"] > [data-tree-icon="collapse"],
.nax-folder-tree header [data-tree-next="collapse"] > [data-tree-icon="expand"] {
  display: none;
}

.nax-folder-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nax-folder-tree li {
  display: grid;
  grid-template-columns: var(--nax-folder-tree-col) minmax(0, 1fr);
  align-items: center;
  anchor-scope: --nax-folder-actions;
}

.nax-folder-tree li > a {
  grid-area: 1 / 1 / 2 / -1;
}

/* Under the link, pulled back from the disclosure column to the step. The
   guide is where this folder's guide line runs, measured from the folders
   inside — resolved here, so they inherit their parent's, not their own. */
.nax-folder-tree li > ul {
  --nax-folder-tree-guide: calc(var(--nax-folder-tree-col) / 2 - var(--nax-folder-tree-step));
  grid-area: 2 / 2 / 3 / -1;
  margin-inline-start: calc(var(--nax-folder-tree-step) - var(--nax-folder-tree-col));
}

/* Tree connector — the sidebar sub-nav's guide line, elbow and arrowhead, at
   every depth. A folder's guide line runs down its disclosure column; each
   folder inside draws the elbow off it into its own row (::before), and every
   one but the last carries the line on past its own branch to the next. The
   elbow reaches the row's first glyph: a branch's disclosure button, or across
   a leaf's empty slot to its icon. The arrowhead (::after) points into the
   folder on screen and the one under the pointer or focus. A collapsed branch
   is hidden, connectors and all. Decorative: empty generated content, drawn
   beside the link, never announced. */
.nax-folder-tree li li {
  --nax-folder-tree-elbow-end: var(--nax-folder-tree-col);
  position: relative;
}

.nax-folder-tree li li:has(> button[aria-controls]) {
  --nax-folder-tree-elbow-end: 0px;
}

.nax-folder-tree li li::before,
.nax-folder-tree li li::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.nax-folder-tree li li::before {
  inset-block-start: 0;
  inset-inline-start: var(--nax-folder-tree-guide);
  box-sizing: border-box;
  inline-size: calc(var(--nax-folder-tree-elbow-end) - var(--nax-folder-tree-guide));
  block-size: calc(var(--nax-folder-tree-row) / 2);
  border-inline-start: var(--nax-tree-line-w) solid var(--nax-folder-tree-line);
  border-block-end: var(--nax-tree-line-w) solid var(--nax-folder-tree-line);
  border-end-start-radius: var(--nax-tree-elbow-r);
}

.nax-folder-tree li li:not(:last-child)::before {
  inset-block-end: 0;
  block-size: auto;
  border-block-end: 0;
  border-end-start-radius: 0;
  background: linear-gradient(var(--nax-folder-tree-line), var(--nax-folder-tree-line))
    0 calc(var(--nax-folder-tree-row) / 2 - var(--nax-tree-line-w)) / 100% var(--nax-tree-line-w) no-repeat;
}

.nax-folder-tree li li::after {
  inset-block-start: calc(var(--nax-folder-tree-row) / 2 - var(--nax-tree-line-w) / 2 - var(--nax-tree-arrow-h));
  inset-inline-start: var(--nax-folder-tree-elbow-end);
  border-block: var(--nax-tree-arrow-h) solid transparent;
  border-inline-start: var(--nax-tree-arrow-w) solid var(--nax-folder-tree-line);
  opacity: 0;
  transition: opacity var(--nax-t);
}

.nax-folder-tree li li:has(> a[aria-current="page"], > :is(a, button):is(:hover, :focus-visible))::after {
  opacity: 1;
}

/* Above the link they sit on, so they take their own clicks. */
.nax-folder-tree li > button {
  grid-row: 1;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  inline-size: var(--nax-folder-tree-row);
  block-size: var(--nax-folder-tree-row);
  padding: 0;
  border: 0;
  border-radius: var(--nax-r-sm);
  background: none;
  color: var(--nax-ink-text-2);
  cursor: pointer;
}

.nax-folder-tree li > button:hover {
  background: var(--nax-ink-05);
  color: var(--nax-ink);
}

.nax-folder-tree li > button svg {
  transition: rotate var(--nax-t);
}

.nax-folder-tree li > button[aria-controls][aria-expanded="true"] svg {
  rotate: 90deg;
}

.nax-folder-tree li > button[aria-controls] {
  grid-column: 1;
  inline-size: var(--nax-folder-tree-col);
}

.nax-folder-tree li > button[aria-haspopup] {
  grid-column: 2;
  justify-self: end;
  anchor-name: --nax-folder-actions;
  color: var(--nax-accent);
  opacity: 0;
  transition: opacity var(--nax-t);
}

.nax-folder-tree li:has(> :is(a, button):is(:hover, :focus-visible)) > button[aria-haspopup],
.nax-folder-tree li > button[aria-haspopup][aria-expanded="true"] {
  opacity: 1;
}

@supports (position-area: block-end) {
  .nax-folder-tree [role="menu"] {
    position-anchor: --nax-folder-actions;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block, flip-inline;
    inset: auto;
    margin: var(--nax-space-1) 0 0;
  }
}

.nax-folder-tree li > a {
  display: flex;
  align-items: center;
  gap: var(--nax-folder-tree-gap);
  min-block-size: var(--nax-folder-tree-row);
  padding-block: 0;
  padding-inline: calc(var(--nax-folder-tree-col) + var(--nax-folder-tree-gap)) var(--nax-space-2);
  border-radius: var(--nax-r);
  color: var(--nax-ink);
  text-decoration: none;
  transition: background var(--nax-t);
}

.nax-folder-tree li:has(> :is(a, button):is(:hover, :focus-visible), > button[aria-haspopup][aria-expanded="true"]) > a:not([aria-current="page"]) {
  background: var(--nax-ink-05);
}

.nax-folder-tree li > a > svg {
  flex-shrink: 0;
  color: var(--nax-ink-text-2);
}

.nax-folder-tree li > a > span:first-of-type {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nax-folder-tree .nax-badge {
  flex-shrink: 0;
}

/* Inset, because a scrolling sidebar would clip a ring drawn outside the row. */
.nax-folder-tree a:focus-visible,
.nax-folder-tree button:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: -2px;
}

.nax-folder-tree a[aria-current="page"] {
  background: var(--nax-accent-lt);
  color: var(--nax-accent-dark);
  font-weight: 600;
}

.nax-folder-tree a[aria-current="page"] > svg,
.nax-folder-tree a[aria-current="page"] data {
  color: inherit;
}

.nax-folder-tree data {
  margin-inline-start: auto;
  padding-inline-start: var(--nax-space-2);
  font-family: var(--nax-font-mono);
  font-size: 0.769rem;
  font-variant-numeric: tabular-nums;
  color: var(--nax-ink-text-3);
  transition: opacity var(--nax-t);
}

/* The "…" covers the link's last row-width: a count fills at least that much
   (with the link's end padding), and a row without one keeps it clear. */
@media not all and (pointer: coarse) {
  .nax-folder-tree li:has(> button[aria-haspopup]) > a > data {
    min-inline-size: calc(var(--nax-folder-tree-row) - var(--nax-space-2));
    text-align: end;
  }

  .nax-folder-tree li:has(> button[aria-haspopup]) > a:not(:has(> data)) {
    padding-inline-end: var(--nax-folder-tree-row);
  }

  .nax-folder-tree li:has(> button[aria-haspopup]):has(> :is(a, button):is(:hover, :focus-visible), > button[aria-expanded="true"]) > a > data {
    opacity: 0;
  }
}

.nax-folder-tree > div > p {
  margin: 0;
  padding: var(--nax-space-1) var(--nax-space-2);
  color: var(--nax-ink-text-3);
}

.nax-folder-tree > button {
  display: none;
  align-items: center;
  gap: var(--nax-space-2);
  inline-size: 100%;
  min-block-size: var(--nax-touch);
  padding: 0 var(--nax-space-3);
  border: 1px solid var(--nax-ink-20);
  border-radius: var(--nax-r);
  background: var(--nax-surface);
  color: var(--nax-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.nax-folder-tree > button > span {
  color: var(--nax-ink-text-2);
}

.nax-folder-tree > button > strong {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nax-folder-tree > button > svg {
  flex-shrink: 0;
  margin-inline-start: auto;
  transition: rotate var(--nax-t);
}

.nax-folder-tree > button[aria-expanded="true"] > svg {
  rotate: 180deg;
}

@media (max-width: 768px) {
  .nax-folder-tree > button:not([hidden]) {
    display: flex;
  }

  .nax-folder-tree > button:not([hidden]) + div {
    margin-block-start: var(--nax-space-2);
  }

  .nax-folder-tree:has(> button:not([hidden])[aria-expanded="false"]) > div {
    display: none;
  }
}

/* A finger keeps the full disclosure button at every depth; deep folders
   still step in by less than a row, just past their parent's guide line. */
@media (pointer: coarse) {
  .nax-folder-tree {
    --nax-folder-tree-row: var(--nax-touch);
    --nax-folder-tree-deep-col: var(--nax-folder-tree-row);
    --nax-folder-tree-deep-step: calc(var(--nax-folder-tree-row) / 2 + var(--nax-space-2));
  }

  .nax-folder-tree li > button[aria-haspopup] {
    opacity: 1;
  }

  .nax-folder-tree header {
    min-block-size: var(--nax-touch);
  }

  .nax-folder-tree header > div {
    opacity: 1;
  }

  .nax-folder-tree header :is(a, button) {
    inline-size: var(--nax-touch);
    block-size: var(--nax-touch);
  }

  .nax-folder-tree:has(li > button[aria-haspopup]) li > a {
    padding-inline-end: var(--nax-folder-tree-row);
  }
}

/* =============================================================================
   Resizable split (ResizableSplitComponent). A grid of three: the start
   column, the handle, the rest. The start column's width is
   --nax-split-start, which the server renders at the saved width and
   resizable_split_controller.js moves; it stays within --nax-split-min and
   the lesser of --nax-split-max and --nax-split-cap (a share of the split),
   all rendered from the component, so a narrow window cannot overflow.
   The handle takes no width of its own: it straddles the line between the
   columns, drawn as that line, and widens and takes the accent under the
   pointer, on focus and while dragged (data-resizing on the split). Below
   the layout breakpoint the columns stack and the handle goes.
   ============================================================================= */
.nax-split {
  --nax-split-grip: var(--nax-space-2);
  --nax-split-line: var(--nax-ink-10);
  display: grid;
  grid-template-columns:
    clamp(var(--nax-split-min), var(--nax-split-start), min(var(--nax-split-max), var(--nax-split-cap)))
    auto minmax(0, 1fr);
}

.nax-split > [role="separator"] {
  position: relative;
  z-index: 1;
  align-self: stretch;
  inline-size: var(--nax-split-grip);
  margin-inline: calc(var(--nax-split-grip) / -2);
  cursor: col-resize;
  touch-action: none;
}

.nax-split > [role="separator"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - var(--nax-tree-line-w) / 2);
  inline-size: var(--nax-tree-line-w);
  background: var(--nax-split-line);
  transition: background var(--nax-t), inline-size var(--nax-t), inset-inline-start var(--nax-t);
}

.nax-split > [role="separator"]:is(:hover, :focus-visible)::before,
.nax-split[data-resizing] > [role="separator"]::before {
  inset-inline-start: calc(50% - var(--nax-space-1) / 2);
  inline-size: var(--nax-space-1);
  background: var(--nax-accent);
}

.nax-split > [role="separator"]:focus-visible {
  outline: none;
}

.nax-split[data-resizing] {
  cursor: col-resize;
  user-select: none;
}

@media (max-width: 768px) {
  .nax-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .nax-split > [role="separator"] {
    display: none;
  }
}

/* Icon view (IconGridComponent) — the Finder's: tiles as wide as fit, each a
   big icon or thumbnail in a fixed box, the name centred below on up to two
   lines (its title holds it whole), the meta under that. The current tile is
   drawn as a Finder selection: a rounded tint behind the icon and the name
   in an accent pill. */
.nax-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--nax-icon-tile-w), 1fr));
  gap: var(--nax-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nax-icon-grid a {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--nax-space-1);
  block-size: 100%;
  box-sizing: border-box;
  padding: var(--nax-space-2) var(--nax-space-1);
  border-radius: var(--nax-r-lg);
  color: var(--nax-ink);
  font-size: 0.846rem;
  text-align: center;
  text-decoration: none;
  transition: background var(--nax-t);
}

.nax-icon-grid a:hover {
  background: var(--nax-ink-04);
}

/* Inset, so a scrolling pane does not clip it. */
.nax-icon-grid a:focus-visible {
  outline: 2px solid var(--nax-accent);
  outline-offset: -2px;
}

.nax-icon-grid a > :is(svg, img) {
  box-sizing: border-box;
  inline-size: var(--nax-icon-art);
  block-size: var(--nax-icon-art);
  border-radius: var(--nax-r-lg);
  transition: background var(--nax-t);
}

.nax-icon-grid a > svg {
  padding: calc((var(--nax-icon-art) - var(--nax-icon-glyph)) / 2);
  color: var(--nax-ink-text-2);
}

.nax-icon-grid a > svg[data-tone="accent"] {
  color: var(--nax-accent);
  fill: var(--nax-accent-lt);
}

.nax-icon-grid a > img {
  padding: var(--nax-space-1);
  border: var(--nax-tree-line-w) solid var(--nax-ink-10);
  background: var(--nax-surface);
  object-fit: contain;
}

.nax-icon-grid a > span {
  display: -webkit-box;
  max-inline-size: 100%;
  padding-inline: var(--nax-space-1);
  overflow: hidden;
  border-radius: var(--nax-r);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.nax-icon-grid small {
  max-inline-size: 100%;
  overflow: hidden;
  font-size: 0.769rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nax-ink-text-3);
}

.nax-icon-grid a[aria-current] > :is(svg, img) {
  background: var(--nax-ink-07);
}

.nax-icon-grid a[aria-current] > span {
  background: var(--nax-accent-lt);
  color: var(--nax-accent-dark);
  font-weight: 600;
}