/* ========================================================================
   Sidebar – newspaper-inspired, but with pure white background
   ===================================================================== */


/* Sidebar container: fixed paper column */
#sidebar {
  position: fixed;
  top: var(--space-2-5);
  left: var(--space-2-5);
  bottom: var(--space-2-5);
  width: var(--sidebar-width);
  box-sizing: border-box;
  border: var(--border-default);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-md);
  font-size: var(--type-control);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--space-5));
  transition: transform var(--duration-normal) var(--easing-standard),
    opacity var(--duration-normal) var(--easing-standard);
  /* Isolate layout calculations for better drag performance */
  contain: layout style;
  /* The paper colour. The scroll area paints it; the phone layout's
     close-control strip, which lies outside the scroll area, paints it too. */
  --menu-paper: color-mix(in srgb, var(--color-surface-sunken) 94%, var(--black));
}

.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  background-color: var(--menu-paper);
  /* Subtle horizontal rules to suggest paper */
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-border-strong) 8%, transparent) 1px,
    transparent 1px
  );
  background-size: 100% 26px;
  /* Subtle inset shadow for depth */
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--color-text-primary) 6%, transparent);
  padding: var(--space-2-5) var(--space-3) var(--space-2-5);
  display: flex;
  flex-direction: column;
  gap: var(--control-panel-gap);
  overflow-x: hidden;
  overflow-y: auto;
  /* Contain layout for smooth accordion drag/undock */
  contain: layout;
}

#sidebar.hidden {
  transform: translateX(calc(-1 * (var(--sidebar-width) + var(--space-5))));
  opacity: 0;
  pointer-events: none;
}

#sidebar.hidden #sidebar-resize-handle {
  display: none;
}

/* The phone panel's peek bar exists only in the phone layout
   (layouts/_responsive.css). */
.phone-sheet-bar {
  display: none;
}

#sidebar.resizing {
  transition: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Sidebar toggle tab */
#sidebar-toggle {
  position: fixed;
  top: var(--space-2-5);
  left: var(--space-2-5);
  width: var(--sidebar-toggle-width);
  height: var(--sidebar-toggle-height);
  background: var(--color-surface-elevated);
  border: var(--border-default);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: var(--z-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--control-glyph-lg);
  color: var(--color-text-primary);
  transition: left var(--duration-normal) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

/* Only a pointer that hovers: a touch screen keeps :hover on the last element
   tapped, which left the toggle grey and pressed after every open or close. */
@media (hover: hover) {
  #sidebar-toggle:hover {
    background: var(--color-surface-tertiary);
    transform: translateY(1px);
    box-shadow: var(--shadow-xs);
  }
}

#sidebar-toggle.sidebar-open {
  left: calc(var(--space-2-5) + var(--sidebar-width));
}

/* Sidebar resize handle */
#sidebar-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(-1 * var(--space-4));
  width: var(--space-4);
  cursor: ew-resize;
  z-index: 40;
  touch-action: none;
}

#sidebar-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--space-1);
  height: var(--space-10);
  background: color-mix(in srgb, var(--color-border-strong) 15%, transparent);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

#sidebar-resize-handle:hover::after,
#sidebar.resizing #sidebar-resize-handle::after {
  background: color-mix(in srgb, var(--color-border-strong) 35%, transparent);
}

/* Masthead style for the logo */
.sidebar-brand {
  margin: 0;
  border: var(--border-default);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-md);
}

.sidebar-brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-2) var(--space-1-5) var(--space-2);
  text-decoration: none;
}

.sidebar-brand-link:hover {
  background: var(--color-surface-tertiary);
}

.sidebar-brand-link:active {
  background: var(--color-border-light);
}

.sidebar-brand-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.sidebar-logo {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

/* The wordmark is grey-scale ink drawn for a light surface. In the dark theme
   it is inverted (the hue rotation keeps any tint where it was), so the brand
   card follows the theme like every other surface instead of staying a white
   block. The brand card's wordmark does the same (components/_welcome.css). */
:root[data-theme="dark"] .sidebar-logo {
  filter: invert(1) hue-rotate(180deg);
}

/* Field selector rows: a label above a select and its field actions. */
.field-select {
  display: flex;
  flex-direction: column;
}

.field-select + .field-select {
  margin-top: var(--control-block-gap);
}

/* ========================================================================
   Split-view HUD (small multiples) in sidebar
   ===================================================================== */

.split-view-row {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-1-5) 0;
}

/* The (i) beside "Link cameras" sits centred on the row, far enough from the
   button that its hit ring (widest on touch) never covers it. */
.split-view-row > .info-btn {
  align-self: center;
  margin-left: var(--space-1);
}

.split-view-badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 200px;
  overflow-y: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* The layout label sits beside its select in this row, not above it. */
.split-view-actions label {
  margin: 0;
}

.split-view-actions {
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
}

/* The layout select takes the row's free width, so "Grid compare" and "Edit
   selected view" read in full instead of being cut to a fixed 100px. */
#view-layout-mode {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}

.split-badge,
.view-target-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-0-5) + var(--space-px)) var(--space-1-5);
  border-radius: var(--radius-sm);
  font-size: var(--type-control);
  background: var(--color-border-light);
  border: var(--border-width-1) solid var(--color-border-default);
  cursor: pointer;
  transition: var(--transition-colors);
}

/* A view row is two lines: what the view shows (and its remove button), then
   its field, link mark and navigation mode. */
.split-badge {
  flex-wrap: wrap;
  row-gap: var(--space-0-5);
}

/* The row's first line selects the view: its number, the camera mark and what
   it shows, which gets the line's full width. */
.split-badge-select {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.split-badge-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split-badge-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 100%;
  min-width: 0;
  /* Under the label: past the number pill and the camera mark. */
  padding-left: calc(var(--space-5) + var(--space-1));
}

.split-badge-sub {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--type-compact);
  opacity: var(--opacity-75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "linked": the view shares its camera with the views of its embedding. */
.split-badge-link {
  flex-shrink: 0;
  font-size: var(--type-compact);
  padding: var(--space-px) var(--space-1);
  border-radius: var(--radius-full);
  border: var(--border-width-1) dashed color-mix(in srgb, currentColor 45%, transparent);
  opacity: var(--opacity-85);
  cursor: help;
}

.split-badge-pill {
  font-size: var(--type-compact);
  padding: var(--space-px) var(--space-1-5);
  border-radius: var(--radius-full);
  border: var(--border-width-1) solid color-mix(in srgb, var(--color-border-strong) 50%, transparent);
  background: var(--color-surface-secondary);
}

/*
   Maturity tag — a small pill that says a control's selected option is not
   finished. Built from the same tokens as `.split-badge-pill` so it reads as
   part of the sidebar rather than as an alert, and toned with the info triple
   (a beta feature is usable, not a hazard), which is defined per theme and
   therefore correct in light and dark without a second rule.
*/
.maturity-tag {
  flex: 0 0 auto;
  font-size: var(--type-compact);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  padding: var(--space-px) var(--space-1-5);
  border-radius: var(--radius-full);
  border: var(--border-width-1) solid color-mix(in srgb, var(--color-info) 45%, transparent);
  background: var(--color-info-soft);
  color: var(--color-info-text);
  cursor: help;
}

.split-badge-remove {
  background: transparent;
  border-radius: var(--radius-full);
  border: var(--border-width-1) solid color-mix(in srgb, var(--color-border-strong) 35%, transparent);
  cursor: pointer;
  font-size: var(--type-control);
  line-height: 1;
  padding: 0 var(--space-1);
  margin-left: var(--space-3);
}

.split-badge-remove:hover {
  background: var(--color-danger-dark);
  color: var(--color-text-inverse);
  border-color: var(--color-danger-dark);
}

.split-badge.active {
  background: var(--color-interactive-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-interactive-primary);
}

/* The selected row keeps its number's circle, drawn in the inverse colour. */
.split-badge.active .split-badge-pill {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: color-mix(in srgb, var(--color-text-inverse) 70%, transparent);
}

.split-badge.active .split-badge-remove {
  border-color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
  color: var(--color-text-inverse);
}

.split-badge.active-camera,
.view-target-badge.active-camera {
  box-shadow: 0 0 0 2px var(--color-border-focus);
}

/* The Navigation panel's "Applies to" row: the focused view's badge, read-only. */
.navigation-view-target {
  display: flex;
  flex-direction: column;
  gap: var(--control-row-gap);
}

.navigation-view-target[hidden] {
  display: none;
}

/* Read-only: it names the target, it is not a control. */
.view-target-badge {
  cursor: default;
}

/* Camera indicator - separate element outside the pill */
.split-badge-camera {
  font-size: var(--type-hint);
  opacity: 0;
  margin-left: calc(-1 * var(--space-0-5));
}

.split-badge.active-camera .split-badge-camera,
.view-target-badge.active-camera .split-badge-camera {
  opacity: 1;
}

/* The navigation-mode indicator on each view row: every view navigates by
   its own mode. It is always shown, so its text is a text colour (AA on the
   row); only its outline is faint. */
.split-badge-nav {
  font-family: inherit;
  font-size: var(--type-compact);
  font-weight: var(--font-weight-medium);
  padding: var(--space-px) var(--space-1);
  margin-left: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  border: var(--border-width-1) solid color-mix(in srgb, var(--color-border-strong) 25%, transparent);
  cursor: pointer;
  transition: var(--transition-colors);
  flex-shrink: 0;
}

.split-badge-nav:hover {
  background: color-mix(in srgb, var(--color-border-strong) 6%, transparent);
  color: var(--color-text-primary);
  border-color: color-mix(in srgb, var(--color-border-strong) 40%, transparent);
}

.split-badge-nav:active {
  background: color-mix(in srgb, var(--color-border-strong) 10%, transparent);
}

.split-badge.active .split-badge-nav {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: color-mix(in srgb, var(--color-text-inverse) 35%, transparent);
}

.split-badge.active .split-badge-nav:hover {
  background: color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
  color: var(--color-text-inverse);
  border-color: color-mix(in srgb, var(--color-text-inverse) 50%, transparent);
}