/* components/_accordion.css
   Dynamic floating panel geometry is driven by CSS vars, set by JS via
   StyleManager, instead of direct left/top/width/height styles.

   Every sidebar panel and analysis window is a frame:

     .accordion-panel                 the unit that docks and floats
       .accordion-panel-actions       header controls (undock, dock, copy, close)
       details.accordion-section      the disclosure: summary + content, the card

   A <summary> is itself the disclosure button, so no control may sit inside
   it; a closed <details> renders only its summary, so the controls cannot sit
   anywhere else in it either. The action bar is the frame's own child, laid
   over the right end of the summary row, and the summary keeps a matching
   empty slot (`summary::after`) so its title never runs under the controls.
*/

.accordion-panel.accordion-floating {
  left: var(--pos-x, var(--space-2));
  top: var(--pos-y, var(--space-2));
  width: var(--pos-width, var(--accordion-default-width));
  height: var(--pos-height, auto);
  z-index: var(--z-layer, var(--z-floating));
}

/* A <details> lays its content out in its own slot, out of reach of the
   card's flex column, so the content is held to the window's height here:
   the window's own height (or the viewport, when that is smaller) less the
   header (`--floating-header-height`, measured by the dockable owner) and
   the card's border. The content is then the scroller. */
.accordion-floating > .accordion-section .accordion-content {
  max-height: min(
    calc(var(--pos-height) - var(--floating-header-height, 0px) - 2 * var(--border-width-1)),
    calc(100dvh - var(--space-4) - var(--floating-header-height, 0px) - 2 * var(--border-width-1))
  );
  overflow-y: auto;
  overflow-x: hidden;
}

/* ========================================================================
   Accordion sections
   ===================================================================== */

.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--control-panel-gap);
}

/* The frame. Header controls are sized by one variable so the summary's slot
   and the bar laid over it can never disagree. */
.accordion-panel {
  --panel-action-size: var(--space-5);
  --panel-actions-width: var(--panel-action-size);
  position: relative;
}

.accordion-panel-actions {
  position: absolute;
  top: calc(var(--border-width-1) + var(--control-panel-summary-padding-y));
  right: calc(var(--border-width-1) + var(--control-panel-summary-padding-x));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--panel-action-size);
  /* The controls draw their glyphs in the header's type, as they would
     inside the summary. */
  font-weight: var(--font-weight-medium);
  font-size: var(--type-button);
  color: var(--color-text-primary);
  /* The bar's gaps and decoration belong to the summary underneath: a press
     there toggles or drags the panel exactly as it did before the controls
     moved out of the summary. */
  pointer-events: none;
}

.accordion-panel-actions > button {
  width: var(--panel-action-size);
  height: var(--panel-action-size);
  pointer-events: auto;
}

/* A floating card is positioned (it holds the width handle), so the bar, which
   precedes it, is raised to stay painted over the card's header. Docked, the
   card is not positioned and the bar paints over it as it is. */
.accordion-floating > .accordion-panel-actions {
  z-index: var(--z-raised);
}

/* The summary's slot for the bar: the same box the controls once took inside
   it, so the row keeps its height and the title its room. */
.accordion-panel-actions + .accordion-section > summary::after {
  content: '';
  flex: 0 0 var(--panel-actions-width);
  height: var(--panel-action-size);
  margin-left: auto;
}

/* Docked, a panel offers to undock; floating, it offers everything else. */
.accordion-panel:not(.accordion-floating) > .accordion-panel-actions > .accordion-undock-btn,
.accordion-panel.accordion-floating > .accordion-panel-actions > button:not(.accordion-undock-btn) {
  display: inline-flex;
}

/* The card around each details */
.accordion-section {
  border: var(--border-default);
  border-radius: var(--radius-none);
  overflow: visible; /* allow dropdowns (e.g., gene search) to render outside the card */
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-md);
}

/* The summary: the panel's title row. */
.accordion-section summary {
  list-style: none;
  cursor: grab;
  padding: var(--control-panel-summary-padding-y) var(--control-panel-summary-padding-x);
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-title);
  line-height: var(--leading-tight);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface-secondary);
  border-bottom: var(--border-width-1) solid transparent;
  color: var(--color-text-primary);
  transition: var(--transition-colors);
}

.accordion-panel.dragging summary {
  cursor: grabbing;
}

.accordion-panel.dragging {
  -webkit-user-select: none;
  user-select: none;
}

.accordion-dock-btn,
.accordion-maximize-btn,
.accordion-copy-btn,
.accordion-close-btn {
  display: none;
  width: var(--panel-action-size);
  height: var(--panel-action-size);
  padding: 0;
  border: var(--border-width-1) solid var(--color-border-subtle);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.accordion-dock-btn::before {
  content: '↩';
  font-size: var(--control-glyph-sm);
  line-height: 1;
}

.accordion-copy-btn::before {
  content: '⧉';
  font-size: var(--control-glyph-sm);
  line-height: 1;
}

.accordion-maximize-btn::before {
  content: '';
  width: 9px;
  height: 9px;
  border: var(--border-width-1) solid currentColor;
  border-top-width: 2px;
}

/* Maximized: two overlapping boxes, "restore". */
.accordion-maximize-btn[aria-pressed="true"]::before {
  width: 7px;
  height: 7px;
  box-shadow: 2px -2px 0 -1px var(--color-surface-secondary), 2px -2px 0 0 currentColor;
}

.accordion-close-btn::before {
  content: '×';
  font-size: var(--control-glyph-md);
  line-height: 1;
}

.accordion-dock-btn:hover,
.accordion-maximize-btn:hover,
.accordion-copy-btn:hover,
.accordion-close-btn:hover {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
}

.accordion-dock-btn:active,
.accordion-maximize-btn:active,
.accordion-copy-btn:active,
.accordion-close-btn:active {
  background: var(--color-interactive-secondary-active);
}

.accordion-dock-btn:focus-visible,
.accordion-maximize-btn:focus-visible,
.accordion-copy-btn:focus-visible,
.accordion-close-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Floating (undocked) accordion panels */
#floating-panels-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-floating);
  transform: translateZ(0);
  contain: layout style;
  isolation: isolate;
}

/* Floating panel: the frame is the positioned window, the details inside it
   the card with proper scroll containment.

   The window is composited as one surface (`will-change: filter` asks for the
   surface and applies no filter). Without one, the content scroller of a panel
   whose content overflows is an opaque layer of its own over the WebGL plot,
   and Chromium's software compositor culls the plot under it at the vertically
   mirrored position: the plot's texture is bottom-left origin, and the culled
   part of it is drawn flipped. The page background then shows through at the
   scroller's mirror image across the canvas centre — a band below a panel near
   the top, above one near the bottom. In its own surface the window's opaque
   layers occlude only the window, never the plot. The surface is the size of
   the window, so it adds no full-screen pass to a plot frame. */
.accordion-panel.accordion-floating {
  pointer-events: auto;
  position: fixed;
  /* A panel keeps the size it was given; a smaller viewport only clips it
     to itself, so widening the window again gives the size back. */
  max-width: calc(100vw - var(--space-4));
  max-height: calc(100dvh - var(--space-4));
  /* Use flex column so the card fills the window */
  display: flex;
  flex-direction: column;
  contain: layout style;
  transform: translateZ(0);
  will-change: filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.accordion-floating > .accordion-section {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* The same base text as the docked sidebar. */
  font-size: var(--type-control);
  color: var(--color-text-primary);
  /* Use flex column for proper content sizing */
  display: flex;
  flex-direction: column;
  /* Overflow hidden on container; scroll on content. */
  overflow: hidden;
  border: var(--border-default);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-floating);
  contain: layout style;
}

.accordion-floating > .accordion-section > summary {
  flex: 0 0 auto;
  /* A finger on a floating header moves the panel; nothing behind it scrolls. */
  touch-action: none;
}

/* REDESIGNED: Floating panel content with explicit scroll containment */
.accordion-floating > .accordion-section .accordion-content {
  /* Let JS set max-height for proper containment */
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  /* Scroll is enabled via inline styles from JS */
  background: var(--color-surface-elevated);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Keep content visible during drag */
.accordion-floating.dragging .accordion-content {
  pointer-events: none;
}

/* A collapsed floating panel is as tall as its header; the selector outranks
   the --pos-height rule above, so no !important is needed. */
.accordion-panel.accordion-floating:has(> .accordion-section:not([open])) {
  height: auto;
}

.accordion-floating > .accordion-section:not([open]) .accordion-content {
  display: none;
}

/* Global drag/resize state - prevents unwanted interactions */
body.dock-dragging,
body.dock-resizing {
  overflow-anchor: none;
}

body.dock-dragging {
  cursor: grabbing !important;
}

body.dock-resizing {
  cursor: var(--dock-resize-cursor, ew-resize) !important;
}

/* REDESIGNED: Dragging state - GPU optimized with proper containment */
.accordion-panel.accordion-floating.dragging {
  transition: none !important;
  animation: none !important;
  opacity: var(--opacity-95);
  contain: layout style;
  /* Still one surface while it moves (see the floating panel above). */
  will-change: transform, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Elevated shadow while dragging */
.accordion-floating.dragging > .accordion-section {
  animation: none !important;
  box-shadow: var(--shadow-lg);
}

.accordion-panel.accordion-floating.resizing {
  transition: none !important;
  animation: none !important;
  contain: layout style;
}

/* Resize handles: four edges and four corners on the frame of a floating
   panel. Edges are 8 px bands straddling the border and corners 16 px
   squares centred on it; a finger gets 24 px edges and 32 px corners. A
   handle reaches at most 12 px past the border, so with a window kept 8 px
   inside the viewport every handle's middle is on screen. A handle shows a
   2 px accent line along its border on hover, focus or drag; the
   bottom-right corner always shows a faint grip, so the window reads as
   resizable before the pointer finds an edge. */
.accordion-resize-handle {
  --handle-edge: 8px;
  --handle-corner: 16px;
  --handle-outside: calc(var(--handle-edge) / 2);
  --handle-corner-outside: calc(var(--handle-corner) / 2);
  display: none;
  position: absolute;
  z-index: var(--z-raised);
  touch-action: none;
}

@media (pointer: coarse) {
  .accordion-resize-handle {
    --handle-edge: 24px;
    --handle-corner: 32px;
    --handle-outside: 12px;
    --handle-corner-outside: 12px;
  }
}

.accordion-floating > .accordion-resize-handle {
  display: block;
}

.accordion-resize-handle[data-edge="n"],
.accordion-resize-handle[data-edge="s"] {
  left: calc(var(--handle-corner) - var(--handle-corner-outside));
  right: calc(var(--handle-corner) - var(--handle-corner-outside));
  height: var(--handle-edge);
  cursor: ns-resize;
}

.accordion-resize-handle[data-edge="n"] { top: calc(-1 * var(--handle-outside)); }
.accordion-resize-handle[data-edge="s"] { bottom: calc(-1 * var(--handle-outside)); }

.accordion-resize-handle[data-edge="e"],
.accordion-resize-handle[data-edge="w"] {
  top: calc(var(--handle-corner) - var(--handle-corner-outside));
  bottom: calc(var(--handle-corner) - var(--handle-corner-outside));
  width: var(--handle-edge);
  cursor: ew-resize;
}

.accordion-resize-handle[data-edge="e"] { right: calc(-1 * var(--handle-outside)); }
.accordion-resize-handle[data-edge="w"] { left: calc(-1 * var(--handle-outside)); }

.accordion-resize-handle[data-edge="ne"],
.accordion-resize-handle[data-edge="se"],
.accordion-resize-handle[data-edge="sw"],
.accordion-resize-handle[data-edge="nw"] {
  width: var(--handle-corner);
  height: var(--handle-corner);
}

.accordion-resize-handle[data-edge="ne"] {
  top: calc(-1 * var(--handle-corner-outside));
  right: calc(-1 * var(--handle-corner-outside));
  cursor: nesw-resize;
}

.accordion-resize-handle[data-edge="se"] {
  bottom: calc(-1 * var(--handle-corner-outside));
  right: calc(-1 * var(--handle-corner-outside));
  cursor: nwse-resize;
}

.accordion-resize-handle[data-edge="sw"] {
  bottom: calc(-1 * var(--handle-corner-outside));
  left: calc(-1 * var(--handle-corner-outside));
  cursor: nesw-resize;
}

.accordion-resize-handle[data-edge="nw"] {
  top: calc(-1 * var(--handle-corner-outside));
  left: calc(-1 * var(--handle-corner-outside));
  cursor: nwse-resize;
}

/* The accent line sits on the panel's border, whatever the handle's reach. */
.accordion-resize-handle::after {
  content: '';
  position: absolute;
  background: var(--color-border-focus);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--easing-standard);
}

.accordion-resize-handle[data-edge="n"]::after,
.accordion-resize-handle[data-edge="s"]::after {
  left: 0;
  right: 0;
  height: 2px;
}

.accordion-resize-handle[data-edge="n"]::after { top: calc(var(--handle-outside) - 1px); }
.accordion-resize-handle[data-edge="s"]::after { bottom: calc(var(--handle-outside) - 1px); }

.accordion-resize-handle[data-edge="e"]::after,
.accordion-resize-handle[data-edge="w"]::after {
  top: 0;
  bottom: 0;
  width: 2px;
}

.accordion-resize-handle[data-edge="e"]::after { right: calc(var(--handle-outside) - 1px); }
.accordion-resize-handle[data-edge="w"]::after { left: calc(var(--handle-outside) - 1px); }

/* A corner lights the two borders it moves, as an L. */
.accordion-resize-handle[data-edge="ne"]::after,
.accordion-resize-handle[data-edge="se"]::after,
.accordion-resize-handle[data-edge="sw"]::after,
.accordion-resize-handle[data-edge="nw"]::after {
  width: calc(var(--handle-corner) - var(--handle-corner-outside) + 1px);
  height: calc(var(--handle-corner) - var(--handle-corner-outside) + 1px);
  background: transparent;
  border: 0 solid var(--color-border-focus);
}

.accordion-resize-handle[data-edge="ne"]::after {
  top: calc(var(--handle-corner-outside) - 1px); right: calc(var(--handle-corner-outside) - 1px);
  border-top-width: 2px; border-right-width: 2px;
}

.accordion-resize-handle[data-edge="se"]::after {
  bottom: calc(var(--handle-corner-outside) - 1px); right: calc(var(--handle-corner-outside) - 1px);
  border-bottom-width: 2px; border-right-width: 2px;
}

.accordion-resize-handle[data-edge="sw"]::after {
  bottom: calc(var(--handle-corner-outside) - 1px); left: calc(var(--handle-corner-outside) - 1px);
  border-bottom-width: 2px; border-left-width: 2px;
}

.accordion-resize-handle[data-edge="nw"]::after {
  top: calc(var(--handle-corner-outside) - 1px); left: calc(var(--handle-corner-outside) - 1px);
  border-top-width: 2px; border-left-width: 2px;
}

@media (hover: hover) {
  .accordion-resize-handle:hover::after {
    opacity: 1;
  }
}

.accordion-resize-handle:focus-visible::after,
.accordion-floating.resizing > .accordion-resize-handle:active::after {
  opacity: 1;
}

.accordion-resize-handle:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* The always-visible grip in the bottom-right corner: three short diagonal
   strokes inside the card. */
.accordion-resize-handle[data-edge="se"]::before {
  content: '';
  position: absolute;
  right: calc(var(--handle-corner-outside) + 2px);
  bottom: calc(var(--handle-corner-outside) + 2px);
  width: 9px;
  height: 9px;
  background: linear-gradient(
    135deg,
    transparent 0 45%, var(--color-text-tertiary) 45% 52%,
    transparent 52% 64%, var(--color-text-tertiary) 64% 71%,
    transparent 71% 83%, var(--color-text-tertiary) 83% 90%,
    transparent 90%
  );
  opacity: var(--opacity-50);
  pointer-events: none;
}

/* The size while it changes, in the window's own corner. */
.floating-size-readout {
  display: none;
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: var(--z-raised);
  padding: var(--space-0-5) var(--space-1-5);
  border: var(--border-width-1) solid var(--color-border-light);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font-size: var(--type-readout);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.accordion-floating.resizing > .floating-size-readout,
.accordion-floating.size-readout-visible > .floating-size-readout {
  display: block;
}

/* The line an edge snapped to, across the whole viewport. */
.floating-snap-guide {
  position: fixed;
  z-index: var(--z-raised);
  background: var(--color-border-focus);
  pointer-events: none;
}

.floating-snap-guide[data-axis="x"] {
  top: 0;
  bottom: 0;
  left: var(--guide-at);
  width: 1px;
}

.floating-snap-guide[data-axis="y"] {
  left: 0;
  right: 0;
  top: var(--guide-at);
  height: 1px;
}

.floating-snap-guide[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-resize-handle::after {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Detach/Attach Animations - Sharp, minimal, paper-lifting aesthetic          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* The frame moves (scale, fade) and carries its header controls along; the
   card inside it casts the shadow. */

/* Undock animation - panel lifts off with subtle scale and shadow */
@keyframes undock-lift {
  0% {
    opacity: var(--opacity-60);
    transform: translateZ(0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
}

@keyframes undock-lift-shadow {
  0% { box-shadow: var(--shadow-sm); }
  100% { box-shadow: var(--shadow-md); }
}

/* Dock animation - panel settles back with quick fade */
@keyframes dock-settle {
  0% {
    opacity: 0;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes dock-settle-shadow {
  0% { box-shadow: var(--shadow-lg); }
  100% { box-shadow: var(--shadow-md); }
}

.accordion-panel.floating-enter {
  animation: undock-lift var(--duration-fast) var(--easing-out) forwards;
}

.accordion-panel.floating-enter > .accordion-section {
  animation: undock-lift-shadow var(--duration-fast) var(--easing-out) forwards;
}

.accordion-panel.dock-settle {
  animation: dock-settle var(--duration-fast) var(--easing-out) forwards;
}

.accordion-panel.dock-settle > .accordion-section {
  animation: dock-settle-shadow var(--duration-fast) var(--easing-out) forwards;
}

/* Dock zone indicators - design-consistent dark gray */
#sidebar.dock-drop-active {
  outline: 2px dashed var(--color-text-primary);
  outline-offset: var(--space-1);
  transition: outline-color var(--duration-fast) var(--easing-standard),
    outline-offset var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard);
}

#sidebar.dock-drop-hover {
  outline: 2px solid var(--color-text-primary);
  outline-offset: var(--space-0-5);
  background: color-mix(in srgb, var(--color-border-strong) 3%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Drag Ghost - lightweight preview element for zero-lag dragging              */
/* ═══════════════════════════════════════════════════════════════════════════ */

.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--ghost-width, auto);
  pointer-events: none;
  z-index: var(--z-max);
  background: var(--color-surface-elevated);
  border: var(--border-default);
  box-shadow: var(--shadow-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-title);
  color: var(--color-text-primary);
  padding: var(--control-panel-summary-padding-y) var(--control-panel-summary-padding-x);
  /* GPU accelerated */
  will-change: transform, box-shadow, border-width;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Smooth transitions for state changes */
  transition: box-shadow var(--duration-fast) var(--easing-out),
    border-width var(--duration-fast) var(--easing-out);
}

/* Ghost elevates when outside detach zone - smooth lift effect */
.drag-ghost.will-detach {
  border-width: 2px;
  box-shadow: var(--shadow-xl);
}

/* Original element dimmed while being dragged - smooth fade */
.accordion-panel.drag-source {
  opacity: var(--opacity-30);
  outline: 2px dashed var(--color-text-primary);
  outline-offset: -2px;
  transition: opacity var(--duration-fast) var(--easing-out);
}

/* Placeholder to prevent sidebar reflow during undock - GPU optimized */
.accordion-dock-placeholder {
  box-sizing: border-box;
  pointer-events: none;
  /* Invisible but maintains height during undock */
  contain: strict;
  /* Prevent any visual rendering */
  visibility: hidden;
}

/* Optimize sidebar during drag - disable transitions and contain layout */
body.dock-dragging .sidebar-scroll {
  /* Strict containment during drag prevents reflow propagation */
  contain: strict;
}

body.dock-dragging .accordion-panel:not(.accordion-floating) > .accordion-section {
  /* Disable transitions on docked sections during drag */
  transition: none !important;
}

/* A pointer on a header control is a pointer on the header. */
.accordion-section summary:hover,
:where(.accordion-panel:has(> .accordion-panel-actions :hover)) > .accordion-section > summary {
  background: var(--color-border-light);
  color: var(--color-text-primary);
}

/* Arrow marker */
.accordion-section summary::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
  color: var(--color-text-secondary);
}

/* Closed points down, open points up: the same reading every nested
   disclosure in the app gives (analysis sub-panels, form sections). Open used
   to point left, which reads as "go back", not "collapse". */
.accordion-section[open] summary::before {
  transform: rotate(225deg);
}

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

.accordion-section[open] summary {
  border-bottom-color: var(--color-border-light);
}

.accordion-content {
  padding: var(--space-2) var(--space-2-5) var(--space-2-5);
  display: flex;
  flex-direction: column;
  gap: var(--control-group-gap);
  overflow-x: hidden;
}

/* The panel's own gap is the rhythm between its top-level groups; a block's
   top margin applies only where it is nested in a box or a group (the block
   and group margins are zero-specificity, so this wins wherever it applies). */
.accordion-content > * {
  margin-top: 0;
}

/* Sidebar footer link */
/* The footer sits on the sidebar's sunken paper, darker than any text surface
   the theme contract measures, so it takes the secondary text token. */
#copyright {
  font-size: var(--type-hint);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-width-1) solid color-mix(in srgb, var(--color-border-strong) 8%, transparent);
  text-align: center;
  white-space: normal;
}

/* Four short lines: who made it; docs, citing, source, privacy and terms; the
   licence and accessibility; the build. */
#copyright p {
  margin: 0;
  line-height: var(--leading-normal);
}

#copyright a {
  color: inherit;
  text-decoration: none;
}

/* Each item of the footer keeps to one line, so a narrow sidebar breaks the
   line between items rather than inside a link. */
#copyright a,
#copyright #web-build-version {
  white-space: nowrap;
}

#copyright a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}