/* Route Plotter v3 — Main Styles (UoN Carbon Design System)
   Requires: tokens.css to be loaded first
   AAA-first: Black text on white, strong borders, visible focus
*/

/* Reset */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}

html,body{
  height:100%;
}

body{
  font-family:var(--font-sans);
  font-size:var(--type-body);
  line-height:var(--lh-body);
  color:var(--text-01);
  background:var(--ui-background);
  overflow:hidden;
}

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

/* Skip link */
.skip-link{
  position:absolute;
  left:var(--space-4);
  top:var(--space-2);
  transform:translateY(-200%);
  background:var(--interactive-01);
  color:var(--text-04);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-2);
  text-decoration:none;
  z-index:10001;
  transition:transform var(--motion-fast) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible{
  transform:translateY(0);
  outline:none;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 5px var(--focus-outer);
}

/* Links: always underlined */
a{
  color:var(--link-01);
  text-decoration:underline;
  text-underline-offset:2px;
}
a:visited{color:var(--link-visited);}

/* Universal focus style: robust two-layer ring */
:where(a,button,[role="button"],input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 5px var(--focus-outer);
}

/* Ensure minimum touch target size */
button,
input[type="color"],
select{
  min-height:var(--control-lg);
}

/* App Container - CSS Grid for proper viewport fill
   Row 1: Header (fixed height)
   Row 2: Main content (fills remaining space)
   Row 3: Timeline/controls (auto height)
   Sidebar widths use clamp() for responsive sizing (relative units)
*/
#app {
  display: grid;
  grid-template-rows: auto 1fr auto; /* header row auto-sizes to content+padding */
  grid-template-columns: var(--sidebar-left) 1fr var(--sidebar-right);
  height: 100vh;
  overflow: hidden;
}

/* Header - spans all columns, per spec §3.1 */
.header{
  grid-row: 1;
  grid-column: 1 / -1;
  background:var(--ui-01);
  padding:1rem 0.75rem 1rem 1rem; /* generous vertical breathing room */
  display:flex;
  align-items:center;
  gap:var(--topbar-gap);
  /* Removed border-bottom per user request */
}

.header-title{
  font-size:var(--type-h1);
  line-height:var(--lh-h1);
  font-weight:var(--w-h1);
  margin:0;
  color:var(--text-01);
}

.header-controls{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-left:auto;
}

/* Header control groups - HDR-01: spacing as separators, not rules */
.header-group{
  display:flex;
  align-items:center;
  gap:var(--space-2);
}
.header-group + .header-group{
  margin-left:1.5rem; /* 24px gap between groups - HDR-01 */
}


/* Danger button styling - neutral by default, red on hover (per spec) */
.btn-danger{
  border-color:var(--border-strong);
  color:var(--text-01);
}
.btn-danger:hover{
  background:var(--support-error-bg);
  border-color:var(--support-error);
  color:var(--support-error);
}
.btn-danger:active{
  background:var(--uon-jubilee-red-05);
  transform:translateY(1px);
}

/* HDR-05: Segmented Control (Edit/Preview) */
.segmented-control{
  position:relative;
  display:inline-flex;
  align-items:center;
  background:var(--ui-02);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-2);
  padding:0.125rem;
  height:var(--control-h); /* 36px per spec */
}

.segment{
  position:relative;
  padding:0 0.75rem;
  height:calc(var(--control-h) - 0.375rem); /* ~60% of outer, accounting for padding */
  min-width:3.5rem;
  font-size:var(--control-font);
  font-weight:400;
  color:var(--text-02);
  background:transparent;
  border:none;
  border-radius:calc(var(--radius-2) - 0.0625rem);
  cursor:pointer;
  transition:color var(--motion-fast) var(--ease-out),
             background var(--motion-fast) var(--ease-out),
             font-weight var(--motion-fast) var(--ease-out);
  user-select:none;
}

.segment:hover:not(.active){
  color:var(--text-01);
  background:var(--hover-ui);
}

.segment.active{
  color:var(--text-on-color);
  font-weight:600;
  background:var(--interactive-01);
  box-shadow:var(--elev-1);
}

.segment:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 5px var(--focus-outer);
  z-index:1;
}

/* Legacy mode-switch support (for camera zoom toggle) */
.mode-switch{
  display:flex;
  align-items:center;
  gap:0.125rem;
  background:var(--ui-02);
  border:1px solid var(--border-subtle);
  border-radius:999px;
  padding:0.25rem 0.375rem;
  min-height:var(--control-lg);
}

.mode-label{
  font-size:var(--control-font);
  font-weight:500;
  color:var(--text-03);
  padding:0.25rem 0.5rem;
  border-radius:999px;
  transition:color var(--motion-fast) var(--ease-out),
             background var(--motion-fast) var(--ease-out);
  user-select:none;
}

.mode-label.active{
  color:var(--text-01);
  font-weight:600;
  background:var(--ui-00);
  box-shadow:var(--elev-1);
}

/* Mode toggle (switch style) - for camera zoom etc */
.mode-toggle{
  position:relative;
  width:2.75rem;
  height:1.5rem;
  min-height:1.5rem;
  background:var(--ui-03);
  border:1px solid transparent;
  border-radius:999rem;
  cursor:pointer;
  transition:background var(--motion-fast) var(--ease-out);
  padding:0;
  box-sizing:border-box;
}

.mode-toggle:hover{
  background:var(--hover-ui);
}

.mode-toggle:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 5px var(--focus-outer);
}

.mode-toggle[aria-checked="true"]{
  background:var(--interactive-01);
}

.mode-toggle[aria-checked="true"]:hover{
  background:var(--hover-primary);
}

.mode-toggle-thumb{
  position:absolute;
  top:0.125rem;
  left:0.125rem;
  width:1.125rem;
  height:1.125rem;
  background:var(--ui-00);
  border-radius:50%;
  box-shadow:var(--elev-1);
  transition:transform var(--motion-fast) var(--ease-out);
  pointer-events:none;
}

.mode-toggle[aria-checked="true"] .mode-toggle-thumb{
  transform:translateX(1.25rem);
}

/* Toast notification — replaces tip banner, auto-dismisses */
.toast-container{
  position:fixed;
  top:var(--space-3);
  left:50%;
  transform:translateX(-50%);
  z-index:9000;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2);
  pointer-events:none;
}

.toast{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  background:var(--ui-05, #161616);
  color:var(--text-04, #fff);
  border-radius:var(--radius-2);
  font-size:var(--type-caption);
  box-shadow:var(--elev-3, 0 4px 16px rgba(0,0,0,0.25));
  pointer-events:auto;
  opacity:0;
  transform:translateY(-0.5rem);
  transition:opacity var(--motion-med) var(--ease-out),
             transform var(--motion-med) var(--ease-out);
}

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

.toast-dismiss{
  flex-shrink:0;
  width:1.25rem;
  height:1.25rem;
  padding:0;
  background:transparent;
  border:none;
  border-radius:var(--radius-1);
  cursor:pointer;
  font-size:0.875rem;
  color:inherit;
  opacity:0.7;
  display:flex;
  align-items:center;
  justify-content:center;
}

.toast-dismiss:hover{
  opacity:1;
}

/* NEW-03: Keyboard shortcut chip styling */
kbd{
  display:inline-block;
  padding:0.125rem 0.375rem;
  font-family:var(--font-mono);
  font-size:0.75rem;
  font-weight:500;
  color:var(--text-02);
  background:var(--ui-02);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-1);
  box-shadow:0 1px 0 var(--border-subtle);
  white-space:nowrap;
}

/* Export Warning Tooltip */
.export-warning{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:var(--support-warning);
  color:var(--text-01);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-2);
  font-size:var(--type-caption);
  font-weight:500;
  white-space:nowrap;
  box-shadow:var(--elev-2);
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--motion-fast) var(--ease-out),
             visibility var(--motion-fast) var(--ease-out);
  pointer-events:none;
}

.export-warning.visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.export-warning-arrow{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:6px solid var(--support-warning);
}

/* Highlight the mode switch when warning is shown */
.mode-switch.highlight-warning{
  box-shadow:0 0 0 3px var(--support-warning-bg);
}

/* Beacon sub-controls */
.beacon-sub-controls{
  margin:var(--space-2) 0 var(--space-3) 0;
  padding:var(--space-3);
  background:var(--ui-01);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-2);
  border-left:3px solid var(--interactive-01);
}

.beacon-sub-controls label{
  margin-bottom:var(--space-2);
}

.beacon-sub-controls label:last-child{
  margin-bottom:0;
}

.beacon-sub-controls .checkbox-label{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  cursor:pointer;
  margin-top:var(--space-2);
}

.beacon-sub-controls .checkbox-label input[type="checkbox"]{
  width:16px;
  height:16px;
  cursor:pointer;
  accent-color:var(--interactive-01);
}

/* Main Content - spans all columns in row 2, contains sidebars + canvas */
.main{
  grid-row: 2;
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: var(--sidebar-left) 1fr var(--sidebar-right);
  position:relative;
  background:var(--ui-background);
  overflow:hidden;
  min-height:0;
}

/* Left Sidebar (Settings) - scrolls internally, no horizontal scroll per spec §4.1 */
.sidebar{
  grid-column: 1;
  background:var(--ui-01);
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
  /* Prevent content from causing horizontal overflow */
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Ensure all sidebar children respect container width */
.sidebar *{
  max-width:100%;
  box-sizing:border-box;
}

/* Sidebar Header - per spec §4.3 use spacing not lines */
.sidebar-header{
  padding:0.75rem 1rem; /* 12px 16px */
  background:var(--ui-01);
  flex-shrink:0;
}

.sidebar-header h2{
  font-size:var(--type-h2);
  line-height:var(--lh-h2);
  font-weight:var(--w-h2);
  color:var(--text-01);
  margin:0;
}

/* Compact sidebar header (subtitle only, no h2) */
.sidebar-header-compact{
  padding:var(--space-2) var(--space-3);
  min-height:0;
}

/* N1-1: Subtitle showing selected waypoint name */
.sidebar-subtitle{
  display:block;
  font-size:var(--type-caption);
  color:var(--text-helper);
  margin-top:0;
  min-height:1.2em;
}

/* Inner sidebar header (for Global Settings) - spacing instead of border per spec §4.3 */
.sidebar-header-inner{
  margin-top:0.5rem;
  padding-top:0.75rem;
}

/* Sidebar Tabs */
.sidebar-tabs{
  display:flex;
  background:var(--ui-02);
  border-bottom:1px solid var(--border-subtle);
  flex-shrink:0;
  height:var(--control-md);
}

.tab-btn{
  flex:1;
  padding:0;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;
  font-size:var(--type-body);
  line-height:calc(var(--control-md) - 2px);
  font-weight:500;
  color:var(--text-02);
  transition:all var(--motion-fast) var(--ease-out);
}

.tab-btn:hover{
  background:var(--hover-ui);
  color:var(--text-01);
}

.tab-btn.active{
  background:var(--ui-01);
  color:var(--text-01);
  border-bottom-color:var(--interactive-01);
}

/* Tab Content */
.tab-content{
  display:none;
  padding:var(--space-4);
  overflow-y:auto;
  overflow-x:hidden;
  flex:1;
}

.tab-content.active{
  display:flex;
  flex-direction:column;
}

/* Right Sidebar (Waypoints) - scrolls internally, no horizontal scroll per spec §4.1 */
.sidebar-right{
  grid-column: 3;
  background:var(--ui-01);
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
  /* Prevent content from causing horizontal overflow */
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Duration block at top of right sidebar per spec §10.1 */
.duration-block{
  padding:0.75rem;           /* 12px per spec */
  border:1px solid var(--border-subtle);
  border-radius:0.5rem;      /* 8px per spec */
  margin:0.75rem;
  background:var(--ui-00);
}

/* ── Parameter Tooltip (Carbon Definition Tooltip pattern) ─────────────
   [data-tip] labels get dotted underline hint; shared .param-tooltip
   element positioned by JS to avoid sidebar overflow clipping.
   Colors hardcoded (#161616 bg, #fff text) for guaranteed WCAG AAA 7:1+
   contrast regardless of which CSS variable theme is active. */

[data-tip]{
  cursor:help;
  border-bottom:1px dotted currentColor;
}
.param-tooltip{
  display:none;
  position:absolute;
  z-index:10000;
  max-width:260px;
  padding:0.5rem 0.75rem;
  background:#161616;
  color:#ffffff;
  border-radius:0.25rem;
  font-size:0.75rem;
  line-height:1.45;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  pointer-events:none; /* click-through so outside-click dismiss works */
}

/* Ensure all right sidebar children respect container width */
.sidebar-right *{
  max-width:100%;
  box-sizing:border-box;
}

/* Tab content panels in left sidebar */
.sidebar > .tab-content{
  padding:var(--space-4);
  flex:1;
  overflow-x:hidden;
  word-wrap:break-word;
}

/* Waypoint editor placeholder */
.waypoint-editor-placeholder{
  padding:var(--space-4);
  color:var(--text-01);
  line-height:var(--lh-body);
}

.waypoint-editor-placeholder h4{
  font-size:var(--type-body);
  font-weight:600;
  color:var(--text-01);
  margin:var(--space-4) 0 var(--space-2) 0;
}

.waypoint-editor-placeholder h4:first-child{
  margin-top:0;
}

.waypoint-editor-placeholder ul{
  margin:0;
  padding-left:var(--space-5);
}

.waypoint-editor-placeholder li{
  margin-bottom:var(--space-1);
  font-size:var(--type-body);
  color:var(--text-02);
}

/* ============================================================================
   COLLAPSIBLE SECTIONS
   ============================================================================ */

.settings-section{
  margin-bottom:var(--space-3); /* Spacing provides separation, not borders */
  border-radius:var(--radius);
  overflow:hidden;
  border:none;                  /* Remove passive container border */
  background:var(--ui-02);      /* Subtle background instead of border */
}

/* Section header "cap" band - per spec v3.1.241 §5.1 */
.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.5rem 0.75rem; /* 8px 12px per spec */
  background:var(--cap-system); /* default cap color */
  cursor:pointer;
  user-select:none;
  transition:background var(--motion-fast) var(--ease-out);
}

.section-header:hover{
  filter:brightness(0.97);
}

/* Focus state for section headers - AAA compliant ring per spec §C */
.section-header:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 5px var(--focus-outer);
  z-index:1; /* Ensure focus ring is above adjacent elements */
}

.settings-section.expanded .section-header{
  box-shadow:inset 4px 0 0 0 var(--interactive-01);
}

/* Expanded + focused: combine both indicators */
.settings-section.expanded .section-header:focus-visible{
  box-shadow:
    inset 4px 0 0 0 var(--interactive-01),
    0 0 0 2px var(--focus-inner),
    0 0 0 5px var(--focus-outer);
}

/* Section title - text always #0F0F0F per spec §0 */
.section-title{
  font-size:var(--type-label);
  line-height:var(--lh-label);
  font-weight:var(--w-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--text-01);
  margin:0;
}

.section-chevron{
  color:var(--icon-02);
  transition:transform var(--motion-med) var(--ease-out);
}

.settings-section.expanded .section-chevron{
  transform:rotate(90deg);
}

/* Section content - flat tint per spec v3.1.256 §G (no inner white card)
   PAN-04: Removed inner border - outer .settings-section border is sufficient */
.section-content{
  display:none;
  padding:var(--section-pad);    /* 0.75rem per spec §B */
  background:var(--tint-system); /* default tint */
  border:none;                   /* PAN-04: no nested frames */
  border-radius:0;               /* PAN-04: clipped by parent overflow:hidden */
  margin:0;
}

.settings-section.expanded .section-content{
  display:block;
}

/* Section tints and cap bands per spec v3.1.241 §5.1 */
/* Header uses cap color (darker), content uses tint (lighter) */
.settings-section[data-section="marker"] .section-header{ background: var(--cap-marker); }
.settings-section[data-section="marker"] .section-content{ background: var(--tint-marker); }
.settings-section[data-section="text"] .section-header{ background: var(--cap-text); }
.settings-section[data-section="text"] .section-content{ background: var(--tint-text); }
.settings-section[data-section="path"] .section-header{ background: var(--cap-path); }
.settings-section[data-section="path"] .section-content{ background: var(--tint-path); }
.settings-section[data-section="camera"] .section-header{ background: var(--cap-camera); }
.settings-section[data-section="camera"] .section-content{ background: var(--tint-camera); }
/* Global Settings sections: all grey per spec v3.1.241 §5.2 */
.settings-section[data-section="background"] .section-header{ background: var(--cap-system); }
.settings-section[data-section="background"] .section-content{ background: var(--tint-system); }
.settings-section[data-section="animation"] .section-header{ background: var(--cap-system); }
.settings-section[data-section="animation"] .section-content{ background: var(--tint-system); }
.settings-section[data-section="export"] .section-header{ background: var(--cap-system); }
.settings-section[data-section="export"] .section-content{ background: var(--tint-system); }

/* === Last-interacted section (blue tint emphasis) ===
   Provides "where am I?" orientation without color-coding meaning.
   Coexists with expanded accent bar. */
.settings-section[data-last="true"]{
  box-shadow: 0 0 0 2px var(--section-last-ring);
}
.settings-section[data-last="true"] .section-header{
  background: var(--cap-last);
}
.settings-section[data-last="true"].expanded .section-header{
  background: var(--cap-last-open);
}
.settings-section[data-last="true"] .section-title{
  font-weight: 600;
}

/* Ensure focus rings remain visible above last-interacted styling */
.section-header:focus-visible{
  position: relative;
  z-index: 2;
}

/* Empty section state - compact padding, no dead space */
.section-content-empty{
  padding:var(--space-3);
}

.empty-state{
  margin:0;
  color:var(--text-02);
  font-style:italic;
  font-size:var(--type-caption);
}

/* Section content controls - per spec v3.1.256 §B */
.section-content label{
  display:flex;
  align-items:center;
  margin-bottom:var(--row-gap);  /* 0.5rem per spec §B */
  font-size:var(--type-body);
  gap:var(--label-gap);          /* 0.25rem per spec §B */
  min-width:0;
}

.section-content label span:first-child{
  flex:0 0 6rem; /* Consistent label width per spec §I */
  color:var(--text-02);
  font-weight:500;
  font-size:var(--type-caption); /* Smaller label text */
}

.section-content input[type="color"]{
  width:60px;
  height:35px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-1);
  cursor:pointer;
  padding:2px;
}

.section-content input[type="range"]{
  flex:1;
  margin:0 var(--space-2);
  accent-color:var(--interactive-01);
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:var(--ui-03);
  border-radius:2px;
  outline:none;
}

.section-content input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--interactive-01);
  cursor:pointer;
  border:none;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}

.section-content input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--interactive-01);
  cursor:pointer;
  border:none;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}

.section-content input[type="range"]::-moz-range-track{
  height:4px;
  background:var(--ui-03);
  border-radius:2px;
}

.section-content input[type="range"]:focus-visible{
  box-shadow:0 0 0 2px var(--focus-inner), 0 0 0 5px var(--focus-outer);
}

.section-content label span:last-child{
  min-width:2.5rem; /* Consistent value width per spec §I */
  text-align:right;
  font-family:var(--font-mono);
  font-size:var(--type-mono);
  font-weight:var(--w-mono);
  color:var(--text-02);
}

.section-content select{
  flex:1;
  min-height:var(--control-minh); /* 2.5rem per spec §B */
  padding:var(--space-1) var(--space-2);
  padding-right:2rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-1);
  background:var(--ui-02);
  font-size:var(--control-font); /* 0.875rem per spec §B */
  color:var(--text-01);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23525252' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.5rem center;
  background-size:0.75rem;
  cursor:pointer;
}

.section-content input[type="text"]{
  flex:1;
  width:100%; /* full width per spec v3.1.241 §9 */
  min-height:var(--control-minh); /* 2.5rem per spec */
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-1);
  font-size:var(--type-body);
  color:var(--text-01);
  background:var(--ui-00); /* white input on tinted background */
}

.section-content input[type="number"]{
  min-height:var(--control-minh); /* 2.5rem per spec §B */
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-1);
  font-size:var(--control-font); /* 0.875rem per spec §B */
  color:var(--text-01);
}

/* Control row stacked - per spec v3.1.256 §B */
.control-row{
  margin-bottom:var(--row-gap); /* 0.5rem per spec §B */
}

/* CTL-01: Control row grid pattern - label + control alignment */
.control-row-grid{
  display:grid;
  grid-template-columns:var(--sidebar-label-width) 1fr;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--row-gap);
  min-height:var(--touch-target-min); /* WCAG AAA: 44px min height */
}

/* CTL-03/04: Input with suffix (px, fps, etc) */
.input-with-suffix{
  position:relative;
  display:flex;
  align-items:center;
}
.input-with-suffix input{
  flex:1;
  padding-right:2.5rem; /* Space for suffix */
}
.input-with-suffix .input-suffix{
  position:absolute;
  right:0.75rem;
  color:var(--text-03);
  font-size:var(--type-caption);
  pointer-events:none;
}

.control-row .btn{
  width:100%;
}

.control-warning{
  color:var(--text-01);
  font-size:var(--type-caption);
  padding:var(--space-1) var(--space-2);
  margin-bottom:var(--space-2);
  background:var(--support-error-bg);
  border-left:3px solid var(--support-error);
  border-radius:var(--radius-1);
}

.control-row-stacked{
  display:flex;
  gap:var(--space-4);
  margin-bottom:var(--space-3);
}

.control-row-stacked .control-cell{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
}

.control-row-stacked .control-label{
  font-size:var(--type-caption);
  color:var(--text-02);
}

.control-row-stacked input[type="color"]{
  width:100%;
  height:32px;
  padding:2px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-1);
  cursor:pointer;
}

.control-row-stacked select{
  width:100%;
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-1);
  font-size:var(--type-body);
  background:var(--ui-02);
  color:var(--text-01);
}

/* Settings sections container */
.settings-sections{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Disabled state for controls */
.settings-disabled .section-content{
  opacity:0.5;
  pointer-events:none;
}

.settings-disabled .section-header{
  opacity:0.7;
}

/* Compact control groups */
.control-group-compact{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

.control-row-inline{
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

.control-row-inline span:first-child{
  min-width:var(--sidebar-label-width);
  font-size:var(--type-body);
  color:var(--text-02);
}

.control-row-inline span:last-child{
  font-size:var(--type-caption);
  color:var(--text-03);
}

.control-row-inline input[type="range"]{
  flex:1;
  min-width:60px;
}

.control-label-short{
  min-width:70px;
  flex-shrink:0;
}

/* Read-only slider value (for prev zoom display) */
/* CTL-06: Fixed min-width for slider value labels to prevent layout jitter */
.slider-value{
  min-width:3.25rem;
  text-align:right;
}

.slider-value-readonly{
  flex:1;
  text-align:left;
  color:var(--text-03);
  font-style:italic;
}

.control-label-small{
  font-size:var(--type-caption);
  color:var(--text-02);
  margin-bottom:var(--space-1);
  display:block;
}

.btn-group-compact{
  display:flex;
  gap:var(--space-2);
}

/* Export presets row - aligned with labels per spec §L */
.export-presets{
  display:flex;
  align-items:center;
  margin-bottom:var(--row-gap);
  gap:var(--label-gap);
}

.export-presets > span:first-child{
  flex:0 0 6rem;
  color:var(--text-02);
  font-weight:500;
  font-size:var(--type-caption);
}

.btn-group-inline{
  display:flex;
  gap:var(--space-1);
  flex-wrap:wrap;
}

.btn-small{
  padding:0.125rem var(--space-2); /* Reduced ~40% vertical padding */
  font-size:var(--type-caption);
  min-height:1.25rem; /* Reduced ~40% from 2rem */
}

/* Beacon sub-controls (duplicate removed - see earlier definition) */

/* Placeholder controls (coming soon) */
.control-placeholder{
  display:flex;
  align-items:center;
  margin-bottom:var(--space-4);
  font-size:var(--type-body);
  gap:var(--space-2);
}

.control-placeholder span:first-child{
  min-width:100px;
  color:var(--disabled-03);
}

.control-placeholder .coming-soon{
  font-size:var(--type-caption);
  color:var(--disabled-03);
  font-style:italic;
  background:var(--ui-01);
  padding:var(--space-0) var(--space-2);
  border-radius:var(--radius-1);
}

.control-group{
  margin-bottom:var(--space-6);
  max-width:100%;
  box-sizing:border-box;
}

.control-group h3{
  font-size:var(--type-label);
  font-weight:var(--w-label);
  color:var(--text-01);
  margin-bottom:var(--space-4);
  text-transform:uppercase;
  letter-spacing:var(--ls-label);
}

.control-group label{
  display:flex;
  align-items:center;
  margin-bottom:var(--space-4);
  font-size:var(--type-body);
  gap:var(--space-2);
  min-width:0;
}

.control-group label span:first-child{
  flex:0 0 6rem; /* Match section-content labels per spec §O */
  color:var(--text-02);
  font-weight:500;
  font-size:var(--type-caption);
}

.control-group input[type="color"]{
  width:60px;
  height:35px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-1);
  cursor:pointer;
  padding:2px;
}

.control-group input[type="range"]{
  flex:1;
  margin:0 var(--space-2);
  accent-color:var(--interactive-01);
}

.control-group label span:last-child{
  min-width:30px;
  font-family:var(--font-mono);
  font-weight:var(--w-mono);
  color:var(--text-02);
}

.control-group select{
  flex:1;
  padding:var(--space-1) var(--space-2);
  padding-right:2rem;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-1);
  background:var(--ui-02);
  font-size:var(--type-body);
  color:var(--text-01);
  max-width:100%;
  box-sizing:border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23525252' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.5rem center;
  background-size:0.75rem;
  cursor:pointer;
}

/* Checkbox styles */
.checkbox-container{
  margin:var(--space-3) 0;
}

.checkbox-label{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:var(--space-2)!important;
  cursor:pointer;
  margin-bottom:var(--space-2)!important;
}

.checkbox-label input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--interactive-01);
}

/* Waypoints Tab */
#waypoints-tab .control-group{
  display:flex;
  flex-direction:column;
  flex:1;
  margin-bottom:0;
}

/* Waypoint List
   Scroll container with padding to prevent focus ring clipping.
   Uses scroll-margin on children to keep focused items visible.
*/
.waypoint-list{
  margin-top:var(--space-4);
  flex:1;
  min-height:0;
  overflow-y:auto;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-2);
  background:var(--ui-02);
  padding:6px;
  list-style:none;
}

/* Empty state for waypoint list */
.waypoint-list-empty{
  padding:var(--space-6) var(--space-4);
  text-align:center;
  color:var(--text-01);
}

.waypoint-list-empty p{
  margin:0;
  font-size:var(--type-body);
}

.waypoint-list-empty .hint{
  margin-top:var(--space-2);
  font-size:var(--type-caption);
  color:var(--text-03);
}

/* Waypoint Item Base - calm rows without card borders
   Selection uses left accent bar; focus ring applied to .waypoint-row button.
*/
.waypoint-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--space-1);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-quiet);
  border-radius:0;
  min-height:var(--row-height);
  scroll-margin:0.75rem;
  transition:background var(--motion-fast) var(--ease-out);
}

/* Selection styling: left accent bar (UoN blue per Carbon) + subtle fill */
.waypoint-item.selected,
.waypoint-item.is-selected{
  background:var(--selected-ui);
}
.waypoint-item.selected::before,
.waypoint-item.is-selected::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:var(--border-width-focus);
  background:var(--interactive-01);
}
.waypoint-item.selected .waypoint-title,
.waypoint-item.is-selected .waypoint-title{
  font-weight:600;
}

/* Focus-within: elevate z-index so focus ring isn't clipped */
.waypoint-item:focus-within{
  z-index:2;
}

/* Selection + focus: accent bar via ::before, focus ring on .waypoint-row */

.waypoint-item.dragging{
  opacity:0.5;
}

/* Waypoint Row Button - receives focus and selection click
   RGT-02: Tighter density while maintaining 44px tap target */
.waypoint-row{
  flex:1;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:0.375rem var(--space-3); /* RGT-02: reduced from space-2 (0.5rem) */
  min-height:var(--control-lg); /* 44px tap target preserved */
  background:transparent;
  border:none;
  border-radius:var(--radius-2);
  cursor:pointer;
  font:inherit;
  color:var(--text-01);
  text-align:left;
}

.waypoint-row:hover{
  background:var(--hover-ui);
}

/* Focus ring on the row button (not the li) */
.waypoint-row:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 5px var(--focus-outer);
}

/* Colour dot — visual marker colour indicator per waypoint (N6-1) */
.waypoint-color-dot{
  width:0.75rem;
  height:0.75rem;
  border-radius:50%;
  flex-shrink:0;
  border:1px solid var(--border-subtle);
}

/* None-colour dot: red diagonal line over white circle */
.waypoint-color-dot.is-none{
  background:
    linear-gradient(
      to top right,
      transparent calc(50% - 0.5px),
      #DA1E28 calc(50% - 0.5px),
      #DA1E28 calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    ) !important;
}

.waypoint-handle{
  color:var(--icon-02);
  flex-shrink:0;
}

.waypoint-title{
  flex:1;
  font-size:var(--type-body);
  color:var(--text-01);
}
/* Inline rename input — matches waypoint-title dimensions for seamless editing */
.waypoint-rename-input{
  flex:1;
  font-size:var(--type-body);
  color:var(--text-01);
  background:var(--ui-01);
  border:1px solid var(--interactive-01);
  border-radius:var(--radius-2);
  padding:0 var(--space-2);
  outline:none;
  min-width:0;
}
.waypoint-rename-input:focus-visible{
  box-shadow:0 0 0 2px var(--focus);
}

/* Delete button: separate focusable control with own focus ring */
.waypoint-delete{
  width:var(--control-lg);
  height:var(--control-lg);
  border-radius:var(--radius-2);
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  color:var(--icon-02);
  flex-shrink:0;
  font-size:1.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.waypoint-delete:hover{
  background:var(--hover-ui);
  color:var(--support-error);
}

.waypoint-delete:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 5px var(--focus-outer);
}

/* Move up/down buttons - keyboard alternative to drag (AAA) */
.waypoint-move-btns{
  display:flex;
  flex-direction:column;
  gap:0;
  opacity:0;
  transition:opacity var(--motion-fast) var(--ease-out);
}

.waypoint-item:hover .waypoint-move-btns,
.waypoint-item:focus-within .waypoint-move-btns{
  opacity:1;
}

.waypoint-move-btn{
  width:1.5rem;
  height:1rem;
  padding:0;
  border:none;
  background:transparent;
  color:var(--icon-02);
  cursor:pointer;
  font-size:0.5rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-1);
}

.waypoint-move-btn:hover:not(:disabled){
  background:var(--hover-ui);
  color:var(--text-01);
}

.waypoint-move-btn:disabled{
  opacity:0.3;
  cursor:not-allowed;
}

.waypoint-move-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 4px var(--focus-outer);
}

/* Add Waypoint button - keyboard-accessible way to add waypoints (AAA) */
.waypoint-item-add{
  border-top:1px dashed var(--border-passive);
  margin-top:var(--space-1);
}

.waypoint-add-btn{
  justify-content:center;
  gap:var(--space-1);
  color:var(--text-02);
  font-weight:500;
}

.waypoint-add-btn:hover{
  background:var(--hover-ui);
  color:var(--text-01);
}

.waypoint-add-icon{
  font-size:1rem;
  font-weight:600;
  line-height:1;
}

/* Editable waypoint name input */
.waypoint-item-label.editing{
  background:var(--ui-02);
  border:1px solid var(--interactive-01);
  border-radius:var(--radius-1);
  padding:var(--space-0) var(--space-1);
  outline:none;
}

.waypoint-item-label[contenteditable="true"]:focus{
  background:var(--ui-02);
  border:1px solid var(--interactive-01);
  border-radius:var(--radius-1);
  padding:var(--space-0) var(--space-1);
  outline:none;
}

/* Modal styles */
.modal,.splash-screen{
  position:fixed;
  inset:0;
  background:var(--overlay-01);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
  z-index:999;
}

.modal-content,.splash-content{
  position:relative; /* MOD-01: For close button positioning */
  background:var(--ui-02);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-3);
  box-shadow:var(--elev-3);
  padding:var(--space-6);
  max-width:720px;
  width:100%;
}

/* Splash content: flex column for consistent vertical rhythm (Carbon modal body pattern) */
.splash-content{
  display:flex;
  flex-direction:column;
}

/* MOD-01: Close × button in top-right corner of modals */
.modal-close-x{
  position:absolute;
  top:var(--space-3);
  right:var(--space-3);
  width:2rem;
  height:2rem;
  padding:0;
  background:transparent;
  border:none;
  border-radius:var(--radius-1);
  cursor:pointer;
  font-size:1.5rem;
  line-height:1;
  color:var(--text-02);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--motion-fast) var(--ease-out),
             color var(--motion-fast) var(--ease-out);
}

.modal-close-x:hover{
  background:var(--hover-ui);
  color:var(--text-01);
}

.modal-close-x:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 5px var(--focus-outer);
}

.modal-content h3{
  margin:0 0 var(--space-4) 0;
  color:var(--text-01);
}

.modal-content p{
  margin:0 0 var(--space-5) 0;
  color:var(--text-02);
  line-height:var(--lh-body);
}

.modal-buttons{
  display:flex;
  gap:var(--space-3);
  justify-content:flex-end;
}

/* ========== Keyboard Shortcuts Modal ========== */
.shortcuts-modal{
  max-width:48rem;
  width:90vw;
}

.shortcuts-modal .modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--border-subtle);
  margin-bottom:var(--space-4);
}

.shortcuts-modal .modal-header h2{
  margin:0;
  font-size:var(--type-heading-02);
  color:var(--text-01);
}

.shortcuts-modal .modal-close{
  width:2rem;
  height:2rem;
  padding:0;
  background:transparent;
  border:none;
  border-radius:var(--radius-1);
  cursor:pointer;
  font-size:1.5rem;
  line-height:1;
  color:var(--text-02);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--motion-fast) var(--ease-out);
}

.shortcuts-modal .modal-close:hover{
  background:var(--hover-ui);
  color:var(--text-01);
}

.shortcuts-modal .modal-close:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--focus-inner),0 0 0 5px var(--focus-outer);
}

.shortcuts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr));
  gap:var(--space-5);
}

.shortcut-section h3{
  margin:0 0 var(--space-3) 0;
  font-size:var(--type-body);
  font-weight:600;
  color:var(--text-01);
  border-bottom:1px solid var(--border-subtle);
  padding-bottom:var(--space-2);
}

.shortcut-list{
  margin:0;
  padding:0;
}

.shortcut-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:var(--space-1) 0;
  gap:var(--space-3);
}

.shortcut-item dt{
  font-family:var(--font-mono);
  font-size:var(--type-caption);
  background:var(--ui-01);
  padding:var(--space-0) var(--space-2);
  border-radius:var(--radius-1);
  border:1px solid var(--border-subtle);
  white-space:nowrap;
  color:var(--text-01);
}

.shortcut-item dd{
  margin:0;
  font-size:var(--type-caption);
  color:var(--text-02);
  text-align:right;
}

.shortcuts-modal .modal-footer{
  margin-top:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--border-subtle);
}

.shortcut-tip{
  margin:0;
  font-size:var(--type-caption);
  color:var(--text-helper);
  font-style:italic;
}

/* ========== Waypoint Instructions (Getting Started) ========== */
.waypoint-instructions{
  padding:var(--space-4);
  font-size:var(--type-caption);
  color:var(--text-02);
  line-height:var(--lh-body);
}

.waypoint-instructions h2{
  margin:0 0 var(--space-2) 0;
  font-size:var(--type-body);
  color:var(--text-01);
}

.waypoint-instructions h2:not(:first-child){
  margin-top:var(--space-4);
}

.waypoint-instructions ul{
  margin:0;
  padding-left:var(--space-5);
}

.waypoint-instructions li{
  margin-bottom:var(--space-1);
}

.waypoint-instructions kbd{
  display:inline-block;
  padding:var(--space-0) var(--space-1);
  font-family:var(--font-mono);
  font-size:var(--type-caption);
  background:var(--ui-01);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-1);
  box-shadow:0 1px 0 var(--ui-03);
}

.shortcuts-hint{
  margin-top:var(--space-4);
  padding-top:var(--space-3);
  border-top:1px solid var(--border-subtle);
  font-size:var(--type-caption);
  color:var(--text-helper);
  text-align:center;
}

.shortcuts-hint-btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  margin-top:var(--space-4);
  padding:var(--space-2) var(--space-4);
  font-size:var(--type-caption);
  color:var(--text-02);
  background:var(--ui-01);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-2);
  cursor:pointer;
  transition:background var(--motion-fast) var(--ease-out),
             border-color var(--motion-fast) var(--ease-out);
}

.shortcuts-hint-btn:hover{
  background:var(--hover-ui);
  border-color:var(--border-interactive);
}

.shortcuts-hint-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--focus-inner),0 0 0 5px var(--focus-outer);
}

.shortcuts-hint-btn kbd{
  padding:var(--space-0) var(--space-1);
  font-family:var(--font-mono);
  font-size:var(--type-caption);
  background:var(--ui-02);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-1);
}

/* Essential actions grid (inline + splash) */
.essential-actions{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  margin:var(--space-3) 0;
}

.essential-action{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--type-body-compact);
}

.essential-action kbd{
  min-width:5rem;
  padding:var(--space-1) var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--type-caption);
  text-align:center;
  background:var(--ui-01);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-1);
  box-shadow:0 1px 0 var(--ui-03);
}

.essential-action .action-icon{
  font-size:1rem;
  width:1.5rem;
  text-align:center;
}

.essential-action .action-result{
  color:var(--text-02);
}

/* Splash screen essential actions (larger) */
.essential-actions--splash{
  gap:var(--space-3);
}

.essential-actions--splash .essential-action{
  font-size:var(--type-body);
}

.essential-actions--splash kbd{
  min-width:6rem;
  padding:var(--space-2) var(--space-3);
  font-size:var(--type-body-compact);
}

.splash-instructions{
  text-align:left;
}

.splash-instructions h3{
  margin-bottom:var(--space-3);
  font-size:var(--type-heading-03);
  font-weight:600;
}

/* Splash help layout */
.splash-help{
  text-align:left;
  max-height:60vh;
  overflow-y:auto;
  padding-right:var(--space-2);
}

.splash-intro{
  margin-bottom:var(--space-4);
  font-size:var(--type-body);
  color:var(--text-02);
}

.splash-sections{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}

.help-section h3{
  margin:0 0 var(--space-2) 0;
  font-size:var(--type-body);
  font-weight:600;
  color:var(--text-01);
}

.help-section ul{
  margin:0;
  padding-left:var(--space-5);
}

.help-section li{
  margin-bottom:var(--space-1);
  font-size:var(--type-body-compact);
  color:var(--text-02);
}

.help-section kbd{
  padding:var(--space-0) var(--space-1);
  font-family:var(--font-mono);
  font-size:var(--type-caption);
  background:var(--ui-01);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-1);
}

/* Controls accordion (Carbon disclosure pattern) */
.controls-accordion{
  margin-top:var(--space-5);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-2);
  background:var(--ui-01);
}

.controls-accordion summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--space-3) var(--space-4);
  font-size:var(--type-body-compact);
  font-weight:500;
  color:var(--text-01);
  cursor:pointer;
  list-style:none;
  user-select:none;
}

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

.controls-accordion summary::before{
  content:'▶';
  margin-right:var(--space-2);
  font-size:0.75rem;
  transition:transform var(--motion-fast) var(--ease-out);
}

.controls-accordion[open] summary::before{
  transform:rotate(90deg);
}

.controls-accordion .accordion-hint{
  font-size:var(--type-caption);
  color:var(--text-helper);
}

.controls-accordion[open] .accordion-hint{
  display:none;
}

.controls-accordion summary:hover{
  background:var(--hover-ui);
}

.controls-accordion summary:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--focus-inner);
}

.controls-content{
  padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--border-subtle);
  max-height:40vh;
  overflow-y:auto;
}

.controls-category{
  margin-bottom:var(--space-4);
}

.controls-category:last-child{
  margin-bottom:0;
}

.controls-category h4{
  margin:0 0 var(--space-2) 0;
  font-size:var(--type-caption);
  font-weight:600;
  color:var(--text-helper);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.control-item{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-1) 0;
}

.control-item kbd{
  min-width:6rem;
  padding:var(--space-1) var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--type-caption);
  text-align:center;
  background:var(--ui-02);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-1);
}

.control-item span{
  font-size:var(--type-body-compact);
  color:var(--text-02);
}

/* Inline shortcuts (sidebar) */
.inline-shortcuts{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  margin:var(--space-2) 0 var(--space-3);
}

.inline-shortcut{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--type-caption);
}

.inline-shortcut kbd{
  min-width:4.5rem;
  padding:var(--space-0) var(--space-1);
  font-family:var(--font-mono);
  font-size:var(--type-caption);
  text-align:center;
  background:var(--ui-01);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-1);
}

.inline-shortcut span{
  color:var(--text-02);
}

/* Canvas wrapper - scrollable container for canvas + sticky playbar */
.canvas-area{
  grid-column: 2;
  display:flex;
  flex-direction:column;
  align-items:center;      /* Center canvas horizontally */
  justify-content:center;  /* Center canvas vertically when shorter than viewport */
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  background:#FAFAFA;
  border-left:1px solid var(--border-subtle);
  border-right:1px solid var(--border-subtle);
}

/* Canvas - fills width, height determined by aspect-ratio (set via JS) */
#canvas{
  flex:0 0 auto;
  width:100%;
  background:#fff;
  cursor:crosshair;
  display:block;
  border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-01);
}

#canvas.dragging{
  cursor:grabbing;
}

/* Playbar - matches canvas width, sticky at bottom, attached to canvas */
.controls{
  flex-shrink:0;
  align-self:flex-start; /* Match canvas left-alignment */
  min-height:var(--touch-target-min); /* WCAG AAA: 44px minimum */
  background:var(--ui-01);
  padding:var(--space-2) var(--space-4);
  display:flex;
  align-items:center;
  gap:var(--space-4);
  position:sticky;
  bottom:0;
  z-index:10;
  box-sizing:border-box;
  margin-top:0;
  border-top:1px solid var(--border-subtle);
}

.transport-controls{
  display:flex;
  gap:var(--space-2);
}

.timeline{
  flex:1;
  display:flex;
  align-items:center;
  gap:var(--space-4);
}

.timeline-slider{
  flex:1;
  height:6px;
  border-radius:3px;
  background:var(--ui-03);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}

.timeline-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--interactive-01);
  cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-out);
}

.timeline-slider::-webkit-slider-thumb:hover{
  transform:scale(1.2);
}

.timeline-slider::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--interactive-01);
  cursor:pointer;
  border:none;
  transition:transform var(--motion-fast) var(--ease-out);
}

.timeline-slider::-moz-range-thumb:hover{
  transform:scale(1.2);
}

.time{
  font-family:var(--font-mono);
  font-size:var(--type-mono);
  line-height:var(--lh-mono);
  font-weight:var(--w-mono);
  color:var(--text-02);
  font-variant-numeric:tabular-nums;
  min-width:3rem;
}

/* Buttons - increased horizontal padding per spec §2.1A (+20-30%) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  font-size:var(--control-font);
  line-height:var(--control-line);
  font-weight:600;
  min-height:var(--control-min-h);
  padding:var(--control-pad-y) var(--control-pad-x);
  border-radius:var(--radius-2);
  border:1px solid var(--border-strong);
  background:transparent;
  color:var(--text-01);
  cursor:pointer;
  transition:
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.btn:disabled{
  cursor:not-allowed;
  background:var(--disabled-01);
  color:var(--disabled-03);
  border-color:var(--disabled-02);
}

.btn-primary{
  background:var(--uon-blue); /* per spec v3.1.241 §4.4 */
  border-color:var(--uon-blue);
  color:var(--text-04);
}

.btn-primary:hover{
  background:var(--hover-primary);
}

.btn-primary:active{
  background:var(--active-primary);
  transform:translateY(1px);
}

.btn-secondary{
  background:transparent;
  border-color:var(--border-strong);
  color:var(--text-01);
}

.btn-secondary:hover{
  background:var(--hover-ui);
}

.btn-secondary:active{
  background:var(--active-ui);
  transform:translateY(1px);
}

/* HDR-03: Icon buttons should be square with proper hit target */
.btn-icon{
  width:var(--control-lg);
  height:var(--control-lg);
  padding:0;
  border-color:transparent;
  flex-shrink:0;
}

/* Ghost button - transparent background, subtle border on hover */
.btn-ghost{
  background:transparent;
  border-color:transparent;
}
.btn-ghost:hover{
  background:var(--hover-ui);
  border-color:var(--border-subtle);
}

.btn-icon:hover{
  background:var(--hover-ui);
}

.btn-icon:active{
  background:var(--active-ui);
  transform:translateY(1px);
}

.btn-icon:disabled{
  opacity:0.4;
  cursor:not-allowed;
}

/* Undo/Redo buttons in header - same height as other controls per spec v3.1.241 §4.2 */
#undo-btn,#redo-btn{
  font-size:1.1rem;
  min-width:var(--control-minh);
  min-height:var(--control-minh);
  padding:var(--space-1);
  background:var(--ui-02);
  border:1px solid var(--border-subtle);
}

#undo-btn:not(:disabled):hover,
#redo-btn:not(:disabled):hover{
  background:var(--hover-ui);
}

/* Dropdown Component */
.dropdown{
  position:relative;
  display:inline-block;
}

.dropdown-toggle{
  cursor:pointer;
}

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  z-index:1000;
  display:none;
  min-width:160px;
  padding:var(--space-1) 0;
  margin:var(--space-0) 0 0;
  background:var(--ui-02);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-2);
  box-shadow:var(--elev-2);
}

.dropdown.open .dropdown-menu{
  display:block;
}

.dropdown-item{
  display:block;
  width:100%;
  padding:var(--space-2) var(--space-4);
  text-align:left;
  background:none;
  border:none;
  color:var(--text-01);
  font-size:var(--type-body);
  cursor:pointer;
  white-space:nowrap;
}

.dropdown-item:hover{
  background:var(--hover-ui);
}

.dropdown-item:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 0 0 5px var(--focus-outer);
}

/* Splash Screen (combined with modal styles above) */
.splash-content h2{
  color:var(--text-01);
  margin-bottom:var(--space-5);
  font-size:var(--type-h1);
}

.splash-content h3{
  color:var(--text-01);
  font-size:var(--type-h2);
  margin-top:var(--space-5);
  margin-bottom:var(--space-3);
}

.instructions{
  margin-bottom:var(--space-6);
}

.instructions ul{
  margin-left:var(--space-5);
  line-height:1.8;
  color:var(--text-02);
}

.instructions ul li{
  margin-bottom:var(--space-2);
}

.instructions kbd{
  display:inline-block;
  padding:var(--space-0) var(--space-1);
  font-family:var(--font-mono);
  font-size:var(--type-caption);
  background:var(--ui-01);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-1);
  box-shadow:0 1px 0 var(--ui-03);
}

#splash-close{
  width:100%;
  padding:var(--space-3);
  font-size:var(--type-body);
  margin-top:var(--space-5);
}

/* Checkbox below CTA — enough space to feel separate, not orphaned */
.splash-content>.checkbox-label{
  margin-top:var(--space-3);
  margin-bottom:0!important;
}

/* Beacon Animation */
@keyframes beacon-pulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.3);opacity:0.8;}
}

@keyframes beacon-ripple{
  0%{transform:scale(0.8);opacity:1;}
  100%{transform:scale(2.5);opacity:0;}
}

/* Path Style */
.path{
  stroke:var(--map-series-1);
  stroke-width:var(--map-path-stroke-width);
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Animations */
@keyframes pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.1);}
  100%{transform:scale(1);}
}

.pulse{
  animation:pulse 0.5s ease-in-out;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* High contrast adjustments */
@media (prefers-contrast:more){
  .btn-primary{background:var(--uon-jubilee-red);color:var(--text-04);}
  .btn-secondary{background:var(--ui-02);color:var(--text-01);}
  .timeline-slider{background:var(--ui-04);}
  .header{border-bottom-color:var(--ui-04);}
}

/* Impact overlay (zoom prompt etc) */
.impact-toast,.zoom-prompt{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(0.9);
  background:var(--interactive-01);
  color:var(--text-04);
  border-radius:var(--radius-2);
  box-shadow:var(--elev-2);
  padding:var(--space-4) var(--space-5);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--motion-med) var(--ease-out),
             transform var(--motion-med) var(--ease-out);
  z-index:10000;
}

.impact-toast.visible,.zoom-prompt.visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
}

/* =========================
   Responsive: Medium screens - collapsible right sidebar
   At ~1280px (80rem), right sidebar becomes collapsible overlay
   ========================= */
@media (max-width: 80rem) {
  .sidebar-left,
  .sidebar.left {
    max-width: var(--sidebar-max-width);
    min-width: var(--sidebar-min-width);
  }
  
  .sidebar-right,
  .sidebar.right {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-max-width);
    max-width: 90vw;
    transform: translateX(100%);
    transition: transform var(--motion-fast) var(--ease-out);
    z-index: 100;
    box-shadow: var(--elev-3);
  }
  
  .sidebar-right.is-open,
  .sidebar.right.is-open {
    transform: translateX(0);
  }
  
  /* Sidebar toggle button - visible at medium screens */
  .sidebar-toggle {
    display: flex;
    position: fixed;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    background: var(--ui-01);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2);
    padding: var(--space-2);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--elev-1);
  }
  
  .sidebar-toggle:hover {
    background: var(--hover-ui);
  }
  
  /* Backdrop overlay when sidebar is open */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-01);
    z-index: 99;
  }
  
  .sidebar-backdrop.is-visible {
    display: block;
  }
}

/* =========================
   Responsive: Reflow breakpoint for AAA zoom compliance
   At ~1024px (64rem) or 200%+ zoom on 1440px screens, stack layout
   ========================= */
@media (max-width: 64rem) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    height: auto;
    min-height: 100vh;
  }
  
  .sidebar.left {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    border-right: none;
    border-bottom: 1px solid var(--border-passive);
    max-height: 40vh;
    overflow-y: auto;
  }
  
  .main-content {
    grid-column: 1;
    grid-row: 2;
    min-height: 50vh;
  }
  
  .sidebar.right {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    max-width: none;
    border-left: none;
    border-top: 1px solid var(--border-passive);
    max-height: 30vh;
    overflow-y: auto;
  }
  
  /* Header spans full width */
  header {
    grid-column: 1;
  }
  
  /* Playbar at bottom */
  .playbar-container {
    grid-column: 1;
    grid-row: 4;
  }
}

/* ==========================================================================
   Preview Mode Indicator
   Visual feedback when in Preview mode (Issue #10)
   ========================================================================== */

body[data-mode="preview"] .sidebar.left,
body[data-mode="preview"] .sidebar-left {
  display: none;
}

body[data-mode="preview"] .canvas-area {
  grid-column: 1 / -1;
}

/* Preview mode badge */
body[data-mode="preview"]::after {
  content: 'PREVIEW';
  position: fixed;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-3);
  background: var(--interactive-01);
  color: var(--text-04);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-2);
  opacity: 0.9;
  z-index: 1000;
  pointer-events: none;
}

/* Reduced motion: no opacity animation */
@media (prefers-reduced-motion: reduce) {
  body[data-mode="preview"]::after {
    opacity: 1;
  }
}

/* =========================
   Min-width gate (R-3)
   Warn users on screens narrower than 1440px
   ========================= */
.screen-warning{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  align-items:center;
  justify-content:center;
}

.screen-warning-content{
  background:var(--ui-00);
  border-radius:var(--radius-2);
  padding:var(--space-5) var(--space-6);
  max-width:28rem;
  text-align:center;
  box-shadow:var(--elev-3, 0 8px 32px rgba(0,0,0,0.3));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-3);
}

.screen-warning-content svg{
  color:var(--support-warning, #F1C21B);
}

.screen-warning-content h2{
  font-size:var(--type-h2);
  font-weight:var(--w-h2);
  color:var(--text-01);
  margin:0;
}

.screen-warning-content p{
  font-size:var(--type-body);
  color:var(--text-02);
  margin:0;
  line-height:1.5;
}

.screen-warning-hint{
  font-size:var(--type-caption) !important;
  color:var(--text-03) !important;
  font-family:var(--font-mono);
}

/* ============================================================================
   UTILITY LAYOUT CLASSES
   Extracted from inline styles for maintainability (Carbon pattern)
   ============================================================================ */

/* Inline row for upload / action controls */
.upload-row{
  display:flex;
  gap:var(--space-2);
  align-items:center;
  margin-top:var(--space-3);
}

/* Custom marker / head preview container */
.preview-box{
  padding:var(--space-2);
  border:1px solid var(--ui-03, #CFD4D8);
  text-align:center;
}

/* Right sidebar control row: label + range + value on one line */
.sidebar-control-row{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin:0;
}

.sidebar-control-row span[data-tip],
.sidebar-control-row > span:first-child{
  flex:0 0 auto;
  font-weight:500;
  color:var(--text-02);
}

.sidebar-control-row input[type="range"]{
  flex:1;
}

.sidebar-control-row .slider-value{
  min-width:2.5rem;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
}

/* Show warning on narrow screens */
@media (max-width: 1439px) {
  .screen-warning:not(.dismissed){
    display:flex;
  }
}