/* ── Scania Sans @font-face ───────────────────────── */

/* Cyrillic subset (U+0400-04FF) */
@font-face {
  font-family: 'Scania Sans';
  font-weight: bold;
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCY-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans';
  font-style: italic;
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCY-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans';
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCY-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Condensed';
  font-weight: bold;
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCYCondensed-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Condensed';
  font-style: italic;
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCYCondensed-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Condensed';
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCYCondensed-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Headline';
  font-weight: bold;
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCYHeadline-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Headline';
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCYHeadline-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Semi Condensed';
  font-weight: bold;
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Semi Condensed';
  font-style: italic;
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Semi Condensed';
  font-display: swap;
  unicode-range: U+0400-04FF;
  src: url('./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff') format('woff');
}

/* Latin (default) */
@font-face {
  font-family: 'Scania Sans';
  font-weight: bold;
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSans-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans';
  font-style: italic;
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSans-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans';
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSans-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Condensed';
  font-weight: bold;
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSansCondensed-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Condensed';
  font-style: italic;
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSansCondensed-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Condensed';
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSansCondensed-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Headline';
  font-weight: bold;
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSansHeadline-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Headline';
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSansHeadline-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Semi Condensed';
  font-weight: bold;
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSansSemiCondensed-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Semi Condensed';
  font-style: italic;
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSansSemiCondensed-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Scania Sans Semi Condensed';
  font-display: swap;
  src: url('./assets/fonts/latin/ScaniaSansSemiCondensed-Regular.woff') format('woff');
}

/* ── Reset & Variables ───────────────────────────── */

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

:root {
  --bg: #0f1117;
  --bg-surface: #181a24;
  --bg-card: #1e2030;
  --border: #2a2d3e;
  --border-subtle: #22253580;
  --text: #e4e5eb;
  --text-muted: #8b8fa3;
  --text-dim: #5c6078;
  --accent: #7b8aff;
  --accent-bright: #a4b0ff;
  --accent-glow: #6c7aff50;
  --primary-bg: #2d3ea8;
  --primary-border: #4a5cd0;
  --primary-glow: #3a4abf30;
  --secondary-bg: #1f6050;
  --secondary-border: #35977a;
  --secondary-glow: #2a7a6430;
  --muted-bg: #2e2b40;
  --muted-border: #46425e;
  --muted-glow: #3b376030;
  --milestone-bg: #6b4c1e;
  --milestone-border: #a07a2e;
  --milestone-glow: #8b691430;
  --rose-bg: #7a2745;
  --rose-border: #c04870;
  --rose-glow: #c0487030;
  --amber-bg: #7a5a1a;
  --amber-border: #c49030;
  --amber-glow: #c4903030;
  --teal-bg: #1a5a5a;
  --teal-border: #30a0a0;
  --teal-glow: #30a0a030;
  --violet-bg: #4a2a7a;
  --violet-border: #7a50c0;
  --violet-glow: #7a50c030;
  --select-outline: #c0ccff;
  --hover-overlay: #ffffff10;
  --editing-overlay: #ffffff15;
  --hover-overlay-subtle: #ffffff08;
  --editing-overlay-subtle: #ffffff0c;
  --btn-hover-bg: #2a2d42;
  --canvas-gradient: linear-gradient(165deg, #13151f 0%, #0f1117 50%, #121420 100%);
  --canvas-shadow: #00000040;
  --menu-shadow: #00000060;
  --lane-height: 90px;
  --col-width: 130px;
  --label-width: 160px;
  --timeline-height: 40px;
  --title-area-height: 100px;
  --canvas-pad-x: 48px;
  --canvas-pad-y: 36px;
  --block-radius: 8px;
  --handle-size: 8px;
}

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* ── Theme: Light ────────────────────────────────── */

body.theme-light {
  --bg: #f5f6fa;
  --bg-surface: #ffffff;
  --bg-card: #ecedf2;
  --border: #d0d3e0;
  --border-subtle: #d0d3e050;
  --text: #1a1c2a;
  --text-muted: #6b6f85;
  --text-dim: #9499b0;
  --accent: #4a5aee;
  --accent-bright: #3045dd;
  --accent-glow: #4a5aee30;
  --primary-bg: #dde2ff;
  --primary-border: #aab4f0;
  --primary-glow: #4a5aee10;
  --secondary-bg: #d0f0e8;
  --secondary-border: #7ec8b0;
  --secondary-glow: #2a7a6410;
  --muted-bg: #e8e4f0;
  --muted-border: #c0bbd0;
  --muted-glow: #6b60a010;
  --milestone-bg: #f0e8d0;
  --milestone-border: #c8b080;
  --milestone-glow: #8b691410;
  --rose-bg: #fce0e8;
  --rose-border: #e8a0b8;
  --rose-glow: #c0487010;
  --amber-bg: #f8ecd0;
  --amber-border: #d4b060;
  --amber-glow: #c4903010;
  --teal-bg: #d0f0f0;
  --teal-border: #70c0c0;
  --teal-glow: #30a0a010;
  --violet-bg: #e8ddf8;
  --violet-border: #b090e0;
  --violet-glow: #7a50c010;
  --select-outline: #3045dd;
  --hover-overlay: #00000008;
  --editing-overlay: #00000010;
  --hover-overlay-subtle: #00000005;
  --editing-overlay-subtle: #00000008;
  --btn-hover-bg: #e0e2f0;
  --canvas-gradient: linear-gradient(165deg, #fafbff 0%, #f5f6fa 50%, #f0f1f8 100%);
  --canvas-shadow: #00000015;
  --menu-shadow: #00000020;
}

/* ── Theme: Executive ────────────────────────────── */

body.theme-executive {
  --bg: #faf9f6;
  --bg-surface: #ffffff;
  --bg-card: #f0ede8;
  --border: #d8d4cc;
  --border-subtle: #d8d4cc50;
  --text: #2c2a26;
  --text-muted: #7a756a;
  --text-dim: #a09888;
  --accent: #8b6914;
  --accent-bright: #a07a18;
  --accent-glow: #8b691430;
  --primary-bg: #1a3a5c;
  --primary-border: #2a5a8c;
  --primary-glow: #1a3a5c15;
  --secondary-bg: #3a6040;
  --secondary-border: #508850;
  --secondary-glow: #3a604015;
  --muted-bg: #8a8070;
  --muted-border: #a09888;
  --muted-glow: #8a807015;
  --milestone-bg: #6b4c1e;
  --milestone-border: #a07a2e;
  --milestone-glow: #8b691415;
  --rose-bg: #6a2038;
  --rose-border: #a04060;
  --rose-glow: #a0406015;
  --amber-bg: #6a4a10;
  --amber-border: #a07a28;
  --amber-glow: #a07a2815;
  --teal-bg: #1a4a4a;
  --teal-border: #308080;
  --teal-glow: #30808015;
  --violet-bg: #3a2060;
  --violet-border: #6040a0;
  --violet-glow: #6040a015;
  --select-outline: #8b6914;
  --hover-overlay: #00000006;
  --editing-overlay: #0000000a;
  --hover-overlay-subtle: #00000004;
  --editing-overlay-subtle: #00000006;
  --btn-hover-bg: #e8e4dc;
  --canvas-gradient: linear-gradient(165deg, #fefdfb 0%, #faf9f6 50%, #f8f6f2 100%);
  --canvas-shadow: #00000010;
  --menu-shadow: #00000018;
}

body.theme-executive .block.style-Primary,
body.theme-executive .block.style-Secondary,
body.theme-executive .block.style-Rose,
body.theme-executive .block.style-Amber,
body.theme-executive .block.style-Teal,
body.theme-executive .block.style-Violet {
  color: #f0ede8;
}

/* ── Theme: Scania ──────────────────────────────── */

body.theme-scania {
  --bg: #0e1013;
  --bg-surface: #1c222b;
  --bg-card: #242c37;
  --border: #3a4554;
  --border-subtle: #2d364350;
  --text: #ebecee;
  --text-muted: #93a1b7;
  --text-dim: #535f70;
  --accent: #4a89f3;
  --accent-bright: #87afe8;
  --accent-glow: #2a6ecf40;
  --primary-bg: #0f3263;
  --primary-border: #2a6ecf;
  --primary-glow: #2058a830;
  --secondary-bg: #003a2d;
  --secondary-border: #41c29f;
  --secondary-glow: #00665030;
  --muted-bg: #2d3643;
  --muted-border: #535f70;
  --muted-glow: #3a455430;
  --milestone-bg: #8b6e00;
  --milestone-border: #f1c21b;
  --milestone-glow: #8b6e0030;
  --rose-bg: #6a1a38;
  --rose-border: #d44070;
  --rose-glow: #d4407030;
  --amber-bg: #6a4a10;
  --amber-border: #d4a030;
  --amber-glow: #d4a03030;
  --teal-bg: #0a4a4a;
  --teal-border: #30b0a0;
  --teal-glow: #30b0a030;
  --violet-bg: #3a1a6a;
  --violet-border: #8050d0;
  --violet-glow: #8050d030;
  --select-outline: #4a89f3;
  --hover-overlay: #ffffff10;
  --editing-overlay: #ffffff15;
  --hover-overlay-subtle: #ffffff08;
  --editing-overlay-subtle: #ffffff0c;
  --btn-hover-bg: #2d3643;
  --canvas-gradient: linear-gradient(165deg, #151829 0%, #0e1013 50%, #1c222b 100%);
  --canvas-shadow: #00000050;
  --menu-shadow: #00000070;
}

body[class*="theme-scania"],
body[class*="theme-scania"] #top-bar,
body[class*="theme-scania"] .popup-panel,
body[class*="theme-scania"] .modal,
body[class*="theme-scania"] .timeline-popup {
  font-family: 'Scania Sans', 'Scania Sans Semi Condensed', arial, helvetica, sans-serif;
}

/* Tegel headline-01: Scania Sans Headline */
body[class*="theme-scania"] #canvas-title {
  font: normal normal bold 28px/36px 'Scania Sans Headline', 'Scania Sans', arial, sans-serif;
  letter-spacing: -0.02em;
}

/* Tegel body-02: Scania Sans */
body[class*="theme-scania"] #canvas-subtitle {
  font: normal normal normal 15px/22px 'Scania Sans', arial, helvetica, sans-serif;
  letter-spacing: -0.02em;
}

/* Tegel headline-06: Scania Sans */
body[class*="theme-scania"] #topbar-title {
  font: normal normal 600 14px/16px 'Scania Sans', arial, helvetica, sans-serif;
  letter-spacing: -0.02em;
}

/* Tegel detail-02: Scania Sans Semi Condensed */
body[class*="theme-scania"] #topbar-subtitle {
  font: normal normal normal 11px/14px 'Scania Sans Semi Condensed', 'Scania Sans Condensed', arial, helvetica, sans-serif;
  letter-spacing: -0.01em;
}

/* Tegel detail-05: time bucket labels */
body[class*="theme-scania"] .time-bucket {
  font: normal normal 600 12px/16px 'Scania Sans Semi Condensed', 'Scania Sans Condensed', arial, helvetica, sans-serif;
  letter-spacing: 0;
}

/* Tegel headline-06: lane labels */
body[class*="theme-scania"] .lane-label {
  font: normal normal 500 13px/18px 'Scania Sans', arial, helvetica, sans-serif;
  letter-spacing: -0.02em;
}

/* Tegel body-02: block text */
body[class*="theme-scania"] .block {
  font: normal normal normal 12.5px/1.4 'Scania Sans', arial, helvetica, sans-serif;
  letter-spacing: -0.02em;
}

/* Tegel detail-04: buttons */
body[class*="theme-scania"] #top-bar button {
  font: normal normal normal 12px/16px 'Scania Sans', arial, helvetica, sans-serif;
  letter-spacing: 0;
}

/* Tegel detail-02: popup items */
body[class*="theme-scania"] .popup-item {
  font: normal normal normal 13px/16px 'Scania Sans Semi Condensed', 'Scania Sans Condensed', arial, helvetica, sans-serif;
  letter-spacing: -0.01em;
}

/* Tegel headline-05: template picker */
body[class*="theme-scania"] .template-picker-title {
  font: normal normal bold 16px/24px 'Scania Sans', arial, helvetica, sans-serif;
  letter-spacing: -0.02em;
}

body.theme-scania .block.style-Primary,
body.theme-scania .block.style-Secondary,
body.theme-scania .block.style-Milestone,
body.theme-scania .block.style-Rose,
body.theme-scania .block.style-Amber,
body.theme-scania .block.style-Teal,
body.theme-scania .block.style-Violet {
  color: #ebecee;
}

body.snapping.theme-scania .grid-vline-quarter { opacity: 0.3; }

/* ── Scania icons (replace Unicode with Tegel SVGs) ─ */

body[class*="theme-scania"] .scania-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: middle;
}

/* Gear icon → Scania settings */
body[class*="theme-scania"] .timeline-gear {
  font-size: 0;
  width: 24px;
  height: 24px;
}
body[class*="theme-scania"] .timeline-gear::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m13.787 6.803.935-2.823h2.444l.934 2.818.493.152c.567.174 1.115.391 1.63.649l.456.228 2.753-1.428 1.71 1.71-1.37 2.652.282.476c.363.614.649 1.295.866 2.02l.15.498 2.822.935v2.476l-2.82.934-.15.496c-.202.66-.474 1.303-.8 1.885l-.264.47 1.284 2.48-1.71 1.711-2.475-1.281-.467.256c-.608.333-1.24.605-1.894.804l-.495.15-.935 2.82h-2.445l-.935-2.804-.494-.15a9.596 9.596 0 0 1-1.885-.8l-.47-.263-2.48 1.284-1.711-1.71 1.281-2.476-.256-.467a10.015 10.015 0 0 1-.804-1.893l-.15-.496-2.82-.934v-2.461l2.806-.936.15-.497a9.903 9.903 0 0 1 .874-2.034l.267-.47-1.36-2.648 1.722-1.722 2.766 1.435.463-.244a8.826 8.826 0 0 1 1.603-.653l.499-.15Zm.682-4.823c-.724 0-1.328.456-1.559 1.11l-.003.009-.696 2.1c-.336.119-.662.251-.983.4L9.165 4.53a1.623 1.623 0 0 0-1.937.285L5.145 6.897a1.65 1.65 0 0 0-.313 1.912l.996 1.94c-.239.467-.45.957-.628 1.463l-2.086.695-.009.003a1.644 1.644 0 0 0-1.109 1.558v2.967c0 .724.456 1.328 1.11 1.559l.009.003 2.104.697c.158.444.342.875.548 1.293l-.907 1.752a1.623 1.623 0 0 0 .285 1.936l2.098 2.097.014.014a1.672 1.672 0 0 0 1.883.27l1.774-.918c.418.208.854.391 1.297.548l.696 2.088.003.009c.23.653.835 1.109 1.559 1.109h2.95c.724 0 1.328-.456 1.559-1.11l.003-.009.697-2.104c.444-.158.875-.342 1.293-.548l1.752.907a1.623 1.623 0 0 0 1.937-.285l2.097-2.098.013-.014a1.672 1.672 0 0 0 .27-1.883l-.918-1.774c.208-.418.392-.853.548-1.296l2.104-.697.009-.003a1.644 1.644 0 0 0 1.109-1.559v-2.982c0-.724-.456-1.328-1.11-1.559l-.008-.003-2.1-.696c-.174-.5-.38-.992-.625-1.466l.98-1.896a1.623 1.623 0 0 0-.286-1.936l-2.097-2.097-.015-.014a1.672 1.672 0 0 0-1.883-.27l-.007.004-2.091 1.085c-.318-.142-.643-.271-.972-.387L18.981 3.1l-.003-.01A1.644 1.644 0 0 0 17.42 1.98h-2.951Zm-2.632 13.956a4.108 4.108 0 1 1 8.215 0 4.108 4.108 0 0 1-8.215 0Zm4.107-6.108a6.107 6.107 0 1 0 0 12.215 6.107 6.107 0 0 0 0-12.215Z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m13.787 6.803.935-2.823h2.444l.934 2.818.493.152c.567.174 1.115.391 1.63.649l.456.228 2.753-1.428 1.71 1.71-1.37 2.652.282.476c.363.614.649 1.295.866 2.02l.15.498 2.822.935v2.476l-2.82.934-.15.496c-.202.66-.474 1.303-.8 1.885l-.264.47 1.284 2.48-1.71 1.711-2.475-1.281-.467.256c-.608.333-1.24.605-1.894.804l-.495.15-.935 2.82h-2.445l-.935-2.804-.494-.15a9.596 9.596 0 0 1-1.885-.8l-.47-.263-2.48 1.284-1.711-1.71 1.281-2.476-.256-.467a10.015 10.015 0 0 1-.804-1.893l-.15-.496-2.82-.934v-2.461l2.806-.936.15-.497a9.903 9.903 0 0 1 .874-2.034l.267-.47-1.36-2.648 1.722-1.722 2.766 1.435.463-.244a8.826 8.826 0 0 1 1.603-.653l.499-.15Zm.682-4.823c-.724 0-1.328.456-1.559 1.11l-.003.009-.696 2.1c-.336.119-.662.251-.983.4L9.165 4.53a1.623 1.623 0 0 0-1.937.285L5.145 6.897a1.65 1.65 0 0 0-.313 1.912l.996 1.94c-.239.467-.45.957-.628 1.463l-2.086.695-.009.003a1.644 1.644 0 0 0-1.109 1.558v2.967c0 .724.456 1.328 1.11 1.559l.009.003 2.104.697c.158.444.342.875.548 1.293l-.907 1.752a1.623 1.623 0 0 0 .285 1.936l2.098 2.097.014.014a1.672 1.672 0 0 0 1.883.27l1.774-.918c.418.208.854.391 1.297.548l.696 2.088.003.009c.23.653.835 1.109 1.559 1.109h2.95c.724 0 1.328-.456 1.559-1.11l.003-.009.697-2.104c.444-.158.875-.342 1.293-.548l1.752.907a1.623 1.623 0 0 0 1.937-.285l2.097-2.098.013-.014a1.672 1.672 0 0 0 .27-1.883l-.918-1.774c.208-.418.392-.853.548-1.296l2.104-.697.009-.003a1.644 1.644 0 0 0 1.109-1.559v-2.982c0-.724-.456-1.328-1.11-1.559l-.008-.003-2.1-.696c-.174-.5-.38-.992-.625-1.466l.98-1.896a1.623 1.623 0 0 0-.286-1.936l-2.097-2.097-.015-.014a1.672 1.672 0 0 0-1.883-.27l-.007.004-2.091 1.085c-.318-.142-.643-.271-.972-.387L18.981 3.1l-.003-.01A1.644 1.644 0 0 0 17.42 1.98h-2.951Zm-2.632 13.956a4.108 4.108 0 1 1 8.215 0 4.108 4.108 0 0 1-8.215 0Zm4.107-6.108a6.107 6.107 0 1 0 0 12.215 6.107 6.107 0 0 0 0-12.215Z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Delete × → Scania trash */
body[class*="theme-scania"] .lane-delete-btn {
  font-size: 0;
}
body[class*="theme-scania"] .lane-delete-btn::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29,6h-8V4c0-1.1-0.9-2-2-2h-6c-1.1,0-2,0.9-2,2v2H3C2.5,6,2,6.4,2,7s0.5,1,1,1h1.2l3.7,20.4c0.2,1,1,1.6,2,1.6h12.3c1,0,1.8-0.7,2-1.6L27.8,8H29c0.5,0,1-0.5,1-1S29.5,6,29,6z M13,4h6v2h-6V4z M22.2,28H9.8L6.2,8h19.6L22.2,28z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29,6h-8V4c0-1.1-0.9-2-2-2h-6c-1.1,0-2,0.9-2,2v2H3C2.5,6,2,6.4,2,7s0.5,1,1,1h1.2l3.7,20.4c0.2,1,1,1.6,2,1.6h12.3c1,0,1.8-0.7,2-1.6L27.8,8H29c0.5,0,1-0.5,1-1S29.5,6,29,6z M13,4h6v2h-6V4z M22.2,28H9.8L6.2,8h19.6L22.2,28z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Milestone ◆ → Scania diamond */
body[class*="theme-scania"] .milestone-icon {
  font-size: 0;
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 4px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27.6819 9.91089C28.1127 10.5828 28.1025 11.4462 27.6561 12.1078L17.4407 27.2452C17.4253 27.2679 17.409 27.29 17.3918 27.3115C17.2311 27.5119 17.0283 27.6847 16.7883 27.8079C16.5471 27.9317 16.2783 28 15.9996 28C15.7209 28 15.452 27.9317 15.2109 27.8079C14.971 27.6847 14.7681 27.5119 14.6074 27.3115C14.5902 27.29 14.5739 27.2679 14.5585 27.2451L4.34352 12.1078C3.89705 11.4462 3.88685 10.5828 4.31758 9.91095L7.51631 4.92126C7.8846 4.3468 8.52016 4 9.20192 4H22.7973C23.4791 4 24.1146 4.34674 24.4828 4.9212L27.6819 9.91089Z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M27.6819 9.91089C28.1127 10.5828 28.1025 11.4462 27.6561 12.1078L17.4407 27.2452C17.4253 27.2679 17.409 27.29 17.3918 27.3115C17.2311 27.5119 17.0283 27.6847 16.7883 27.8079C16.5471 27.9317 16.2783 28 15.9996 28C15.7209 28 15.452 27.9317 15.2109 27.8079C14.971 27.6847 14.7681 27.5119 14.6074 27.3115C14.5902 27.29 14.5739 27.2679 14.5585 27.2451L4.34352 12.1078C3.89705 11.4462 3.88685 10.5828 4.31758 9.91095L7.51631 4.92126C7.8846 4.3468 8.52016 4 9.20192 4H22.7973C23.4791 4 24.1146 4.34674 24.4828 4.9212L27.6819 9.91089Z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Undo button → Scania undo icon */
body[class*="theme-scania"] #btn-undo {
  font-size: 0;
  line-height: 0;
  color: transparent;
  width: 32px;
  min-width: 32px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[class*="theme-scania"] #btn-undo::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M25.94 7.62C27.92 9.97 29 12.93 29 16s-1.08 6.04-3.06 8.38c-1.98 2.34-4.72 3.92-7.74 4.43-3.02.52-6.13-.05-8.78-1.6-2.64-1.55-4.66-3.99-5.68-6.88a1 1 0 0 1 1.88-.67c.87 2.45 2.57 4.51 4.81 5.82 2.24 1.31 4.87 1.79 7.43 1.35 2.56-.44 4.88-1.77 6.55-3.75 1.67-1.98 2.59-4.5 2.59-7.09s-.92-5.1-2.59-7.09c-1.67-1.98-3.99-3.33-6.55-3.75-2.56-.44-5.19.08-7.43 1.39C8.62 7.58 7.15 9.14 6.2 11H10.8a1 1 0 1 1 0 2H4.72a.996.996 0 0 1-.72 0 1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v4.07A13.94 13.94 0 0 1 9.42 4.79c2.65-1.55 5.76-2.12 8.78-1.6 3.02.52 5.76 2.09 7.74 4.43Z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M25.94 7.62C27.92 9.97 29 12.93 29 16s-1.08 6.04-3.06 8.38c-1.98 2.34-4.72 3.92-7.74 4.43-3.02.52-6.13-.05-8.78-1.6-2.64-1.55-4.66-3.99-5.68-6.88a1 1 0 0 1 1.88-.67c.87 2.45 2.57 4.51 4.81 5.82 2.24 1.31 4.87 1.79 7.43 1.35 2.56-.44 4.88-1.77 6.55-3.75 1.67-1.98 2.59-4.5 2.59-7.09s-.92-5.1-2.59-7.09c-1.67-1.98-3.99-3.33-6.55-3.75-2.56-.44-5.19.08-7.43 1.39C8.62 7.58 7.15 9.14 6.2 11H10.8a1 1 0 1 1 0 2H4.72a.996.996 0 0 1-.72 0 1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v4.07A13.94 13.94 0 0 1 9.42 4.79c2.65-1.55 5.76-2.12 8.78-1.6 3.02.52 5.76 2.09 7.74 4.43Z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Redo button → Scania undo icon (flipped horizontally) */
body[class*="theme-scania"] #btn-redo {
  font-size: 0;
  line-height: 0;
  color: transparent;
  width: 32px;
  min-width: 32px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[class*="theme-scania"] #btn-redo::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--text);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M25.94 7.62C27.92 9.97 29 12.93 29 16s-1.08 6.04-3.06 8.38c-1.98 2.34-4.72 3.92-7.74 4.43-3.02.52-6.13-.05-8.78-1.6-2.64-1.55-4.66-3.99-5.68-6.88a1 1 0 0 1 1.88-.67c.87 2.45 2.57 4.51 4.81 5.82 2.24 1.31 4.87 1.79 7.43 1.35 2.56-.44 4.88-1.77 6.55-3.75 1.67-1.98 2.59-4.5 2.59-7.09s-.92-5.1-2.59-7.09c-1.67-1.98-3.99-3.33-6.55-3.75-2.56-.44-5.19.08-7.43 1.39C8.62 7.58 7.15 9.14 6.2 11H10.8a1 1 0 1 1 0 2H4.72a.996.996 0 0 1-.72 0 1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v4.07A13.94 13.94 0 0 1 9.42 4.79c2.65-1.55 5.76-2.12 8.78-1.6 3.02.52 5.76 2.09 7.74 4.43Z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M25.94 7.62C27.92 9.97 29 12.93 29 16s-1.08 6.04-3.06 8.38c-1.98 2.34-4.72 3.92-7.74 4.43-3.02.52-6.13-.05-8.78-1.6-2.64-1.55-4.66-3.99-5.68-6.88a1 1 0 0 1 1.88-.67c.87 2.45 2.57 4.51 4.81 5.82 2.24 1.31 4.87 1.79 7.43 1.35 2.56-.44 4.88-1.77 6.55-3.75 1.67-1.98 2.59-4.5 2.59-7.09s-.92-5.1-2.59-7.09c-1.67-1.98-3.99-3.33-6.55-3.75-2.56-.44-5.19.08-7.43 1.39C8.62 7.58 7.15 9.14 6.2 11H10.8a1 1 0 1 1 0 2H4.72a.996.996 0 0 1-.72 0 1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v4.07A13.94 13.94 0 0 1 9.42 4.79c2.65-1.55 5.76-2.12 8.78-1.6 3.02.52 5.76 2.09 7.74 4.43Z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: scaleX(-1);
}

/* Add Lane + → Scania plus */
body[class*="theme-scania"] .lane-add-icon {
  font-size: 0;
  width: 16px;
  height: 16px;
  display: block;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 4.98a1 1 0 1 0-2 0V15H4.98a1 1 0 0 0 0 2H15v10.02a1 1 0 0 0 2 0V17h10.02a1 1 0 1 0 0-2H17V4.98Z' fill='currentColor'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 4.98a1 1 0 1 0-2 0V15H4.98a1 1 0 0 0 0 2H15v10.02a1 1 0 0 0 2 0V17h10.02a1 1 0 1 0 0-2H17V4.98Z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ── Theme: Scania Light ───────────────────────────── */

body.theme-scania-light {
  --bg: #f3f4f7;              /* neutral-solid-50 */
  --bg-surface: #ffffff;       /* neutral-solid-00 */
  --bg-card: #dee0e6;          /* neutral-solid-200 */
  --border: #ced2dc;           /* neutral-solid-300 */
  --border-subtle: #ced2dc50;
  --text: #0e1013;             /* neutral-solid-958 */
  --text-muted: #535f70;       /* neutral-solid-700 */
  --text-dim: #7583a0;         /* neutral-solid-600 */
  --accent: #2058a8;           /* blue-500 */
  --accent-bright: #0f3263;    /* blue-700 */
  --accent-glow: #2058a830;
  --primary-bg: #bad1e8;       /* blue-100 */
  --primary-border: #2b70d3;   /* blue-400 */
  --primary-glow: #2b70d310;
  --secondary-bg: #a4d7c4;     /* green-100 */
  --secondary-border: #009e7e; /* green-300 */
  --secondary-glow: #00665010;
  --muted-bg: #dee0e6;         /* neutral-200 */
  --muted-border: #b5bdcc;     /* neutral-400 */
  --muted-glow: #53607010;
  --milestone-bg: #f4db99;     /* yellow-50 */
  --milestone-border: #8b6e00; /* yellow-400 */
  --milestone-glow: #8b6e0010;
  --rose-bg: #f8d0dc;
  --rose-border: #d06888;
  --rose-glow: #d0688810;
  --amber-bg: #f0e0b0;
  --amber-border: #c09840;
  --amber-glow: #c0984010;
  --teal-bg: #b8e8e8;
  --teal-border: #40a8a8;
  --teal-glow: #40a8a810;
  --violet-bg: #dcd0f0;
  --violet-border: #8868c8;
  --violet-glow: #8868c810;
  --select-outline: #2b70d3;
  --hover-overlay: #00000008;
  --editing-overlay: #00000010;
  --hover-overlay-subtle: #00000005;
  --editing-overlay-subtle: #00000008;
  --btn-hover-bg: #ced2dc;
  --canvas-gradient: linear-gradient(165deg, #fafbff 0%, #f3f4f7 50%, #eef0f5 100%);
  --canvas-shadow: #00000012;
  --menu-shadow: #00000018;
}

body.theme-scania-light .block.style-Primary,
body.theme-scania-light .block.style-Secondary,
body.theme-scania-light .block.style-Milestone,
body.theme-scania-light .block.style-Rose,
body.theme-scania-light .block.style-Amber,
body.theme-scania-light .block.style-Teal,
body.theme-scania-light .block.style-Violet {
  color: #0e1013;
}

body.snapping.theme-scania-light .grid-vline-quarter { opacity: 0.25; }

/* ── Top Bar ──────────────────────────────────────── */

#top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  user-select: none;
}

.top-bar-left, .top-bar-right { display: flex; align-items: center; gap: 6px; min-width: 200px; }
.top-bar-right { justify-content: flex-end; }

.topbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }

.zoom-control {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zoom-label {
  font-size: 11px;
  color: var(--text-dim);
  min-width: 20px;
  text-align: right;
}
#zoom-slider {
  width: 60px;
  accent-color: var(--accent);
}

.top-bar-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

#topbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: text;
  padding: 1px 6px;
  border-radius: 4px;
}

#topbar-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  cursor: text;
  padding: 1px 6px;
  border-radius: 4px;
}

.topbar-editable:hover { background: var(--hover-overlay); }
.topbar-editable.editing {
  background: var(--editing-overlay);
  outline: 1px solid var(--accent);
}

#top-bar button {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

#btn-help {
  width: 28px;
  padding: 5px 0;
  text-align: center;
  font-weight: 600;
}

#top-bar button:hover {
  background: var(--btn-hover-bg);
  border-color: var(--accent);
}

#top-bar select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}

/* ── Canvas Scroll ────────────────────────────────── */

#canvas-scroll {
  position: absolute;
  top: 48px; left: 0; right: 0; bottom: 0;
  overflow: auto;
  background: var(--bg);
  text-align: center;
  padding: 32px 0;
}

/* ── Canvas ───────────────────────────────────────── */

#canvas {
  background: var(--canvas-gradient);
  border-radius: 12px;
  border: 1px solid var(--bg-card);
  padding: var(--canvas-pad-y) var(--canvas-pad-x);
  position: relative;
  display: inline-block;
  text-align: left;
  margin: 0 24px;
  box-shadow: 0 4px 40px var(--canvas-shadow);
}

#canvas.export-mode {
  padding: calc(var(--canvas-pad-y) + 16px) calc(var(--canvas-pad-x) + 24px);
}

/* ── Title Area ───────────────────────────────────── */

#title-area {
  text-align: center;
  padding-bottom: 24px;
}

#canvas-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  min-height: 36px;
  cursor: text;
  padding: 2px 8px;
  border-radius: 4px;
  outline: none;
}

#canvas-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 4px;
  min-height: 22px;
  cursor: text;
  padding: 2px 8px;
  border-radius: 4px;
  outline: none;
}

.canvas-editable:hover { background: var(--hover-overlay-subtle); }
.canvas-editable:focus, .canvas-editable.editing {
  background: var(--editing-overlay-subtle);
  outline: 1px solid var(--accent);
}

/* ── Roadmap Grid ─────────────────────────────────── */

#roadmap-grid {
  display: flex;
  gap: 0;
}

#lane-labels {
  width: var(--label-width);
  flex-shrink: 0;
  position: relative;
}

.lane-label {
  min-height: var(--lane-height);
  display: flex;
  align-items: center;
  padding: 0 22px 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: grab;
  border-radius: 4px;
  user-select: none;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  position: relative;
}

.lane-label:hover { background: var(--hover-overlay-subtle); }
.lane-label.editing {
  background: var(--editing-overlay-subtle);
  outline: 1px solid var(--accent);
  cursor: text;
}

.lane-label input {
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  width: 100%;
  outline: none;
}

.lane-label.lane-dragging { opacity: 0.5; cursor: grabbing; }

.lane-label .lane-delete-btn {
  display: none;
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lane-label:hover .lane-delete-btn { display: flex; }
.lane-label .lane-delete-btn:hover { color: #ff6b6b; background: #ff6b6b15; }

.lane-add-zone {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
  transition: background 0.15s ease;
}
.lane-add-zone:hover { background: var(--hover-overlay-subtle); }
.lane-add-icon {
  font-size: 22px;
  font-weight: 300;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
  line-height: 1;
}
.lane-add-zone:hover .lane-add-icon { opacity: 0.7; color: var(--accent); }

.lane-drop-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 60;
  pointer-events: none;
}

/* ── Grid Area ────────────────────────────────────── */

#grid-area {
  position: relative;
}

#timeline-header {
  display: flex;
  height: var(--timeline-height);
  position: relative;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.time-bucket {
  width: var(--col-width);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-right: 1px dashed rgb(122, 122, 124);
}
.time-bucket:last-child { border-right: none; }

.time-bucket-pill {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 8px;
  cursor: default;
}

.timeline-gear {
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13px;
  transition: color 0.15s, border-color 0.15s;
}
.timeline-gear:hover { color: var(--accent); border-color: var(--accent); }

/* ── Grid Body ────────────────────────────────────── */

#grid-body {
  position: relative;
}

.grid-hover-plus {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 300;
  color: var(--text-dim);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.15s ease;
  cursor: pointer;
  border-radius: 6px;
  background: var(--hover-overlay-subtle);
}

.grid-hover-plus[style*="display: flex"] {
  opacity: 0.7;
  pointer-events: auto;
}

.grid-hover-plus:hover {
  opacity: 1;
  color: var(--accent);
}

#grid-lines {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
}

.grid-vline {
  position: absolute;
  top: 0;
  width: 1px;
  background: var(--border-subtle);
}

.grid-hline {
  position: absolute;
  left: 0;
  height: 1px;
  background: var(--border-subtle);
}

.grid-vline-quarter {
  position: absolute;
  top: 0;
  width: 0;
  border-left: 1px dashed var(--border-subtle);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.snapping .grid-vline-quarter { opacity: 0.35; }
body.snapping.theme-light .grid-vline-quarter { opacity: 0.25; }
body.snapping.theme-executive .grid-vline-quarter { opacity: 0.2; }

/* ── Interaction Layer ────────────────────────────── */

#interaction-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
}

.lane-row-hit {
  position: absolute;
  left: 0;
  cursor: pointer;
}

/* ── Blocks Layer ─────────────────────────────────── */

#blocks-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
}

.block {
  position: absolute;
  border-radius: var(--block-radius);
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
  cursor: grab;
  user-select: none;
  overflow: hidden;
  transition: box-shadow 0.15s;
  display: flex;
  align-items: center;
}

.block.style-Primary {
  background: var(--primary-bg);
  border: 1px solid var(--primary-border);
  box-shadow: 0 0 12px var(--primary-glow);
}

.block.style-Secondary {
  background: var(--secondary-bg);
  border: 1px solid var(--secondary-border);
  box-shadow: 0 0 12px var(--secondary-glow);
}

.block.style-Muted {
  background: var(--muted-bg);
  border: 1px solid var(--muted-border);
  box-shadow: 0 0 12px var(--muted-glow);
}

.block.style-Milestone {
  background: var(--milestone-bg);
  border: 1px solid var(--milestone-border);
  box-shadow: 0 0 12px var(--milestone-glow);
  justify-content: center;
}

.block.style-Rose {
  background: var(--rose-bg);
  border: 1px solid var(--rose-border);
  box-shadow: 0 0 12px var(--rose-glow);
}

.block.style-Amber {
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  box-shadow: 0 0 12px var(--amber-glow);
}

.block.style-Teal {
  background: var(--teal-bg);
  border: 1px solid var(--teal-border);
  box-shadow: 0 0 12px var(--teal-glow);
}

.block.style-Violet {
  background: var(--violet-bg);
  border: 1px solid var(--violet-border);
  box-shadow: 0 0 12px var(--violet-glow);
}

.block.style-Milestone .block-text {
  text-align: center;
  font-weight: 600;
}

.milestone-icon {
  font-size: 12px;
  margin-right: 4px;
  flex-shrink: 0;
  opacity: 0.7;
}

.block.selected {
  outline: 2px solid var(--select-outline);
  outline-offset: 2px;
  box-shadow: 0 0 24px var(--accent-glow), 0 0 0 1px var(--accent-glow);
  z-index: 50 !important;
}

.block .block-text {
  width: 100%;
  overflow: hidden;
  word-break: break-word;
  pointer-events: none;
}

.block .block-text.overflow-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, #000 calc(100% - 14px), transparent 100%);
}

.block .block-text.editing {
  pointer-events: auto;
  cursor: text;
  outline: none;
  text-overflow: unset;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Resize handles */
.block .handle {
  position: absolute;
  top: 0;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  z-index: 55;
  display: none;
}

.block.selected .handle { display: block; }

.block .handle-left { left: -4px; }
.block .handle-right { right: -4px; }

.block .handle::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--select-outline);
  border-radius: 3px;
  box-shadow: 0 0 6px var(--accent-glow);
}

.block .handle-left::after { left: 2px; }
.block .handle-right::after { right: 2px; }

/* Drag ghost */
.block.dragging {
  opacity: 0.7;
  cursor: grabbing;
}

body.block-dragging, body.block-dragging * {
  cursor: grabbing !important;
}

body.block-resizing, body.block-resizing * {
  cursor: col-resize !important;
}

.block-ghost {
  position: absolute;
  border-radius: var(--block-radius);
  border: 2px dashed var(--accent);
  background: var(--accent-glow);
  pointer-events: none;
  z-index: 40;
}

/* ── Context / style menu ────────────────────────── */

.style-menu {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  z-index: 200;
  display: flex;
  gap: 4px;
  box-shadow: 0 8px 24px var(--menu-shadow);
}

.style-menu button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s;
}

.style-menu button:hover { border-color: var(--text); }
.style-menu button.active { border-color: var(--accent); }
.style-menu .sm-primary { background: var(--primary-bg); }
.style-menu .sm-secondary { background: var(--secondary-bg); }
.style-menu .sm-muted { background: var(--muted-bg); }
.style-menu .sm-milestone { background: var(--milestone-bg); }
.style-menu .sm-rose { background: var(--rose-bg); }
.style-menu .sm-amber { background: var(--amber-bg); }
.style-menu .sm-teal { background: var(--teal-bg); }
.style-menu .sm-violet { background: var(--violet-bg); }

/* ── Milestone style menu ── */
.milestone-style-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
}
.ms-icon-row, .ms-color-row {
  display: contents;
}
.ms-icon-btn {
  width: 32px; height: 32px;
  font-size: 18px;
  background: var(--bg-card);
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-icon-btn:hover { border-color: var(--text-dim); }
.ms-icon-btn.active { border-color: var(--accent); }
.ms-menu-sep {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}
.ms-color-btn {
  width: 32px; height: 32px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.ms-color-btn:hover { border-color: var(--text-dim); }
.ms-color-btn.active { border-color: var(--accent); }

/* ── Popup panels (doc switcher, settings, etc) ─── */

.popup-panel {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  z-index: 200;
  box-shadow: 0 8px 24px var(--menu-shadow);
  min-width: 180px;
  max-height: 400px;
  overflow-y: auto;
}

.popup-item {
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.popup-item:hover { background: var(--hover-overlay); }
.popup-item.active { background: var(--accent-glow); color: var(--accent-bright); }
.popup-item.destructive { color: #ff6b6b; }
.popup-item.destructive:hover { background: #ff6b6b15; }

.popup-sep { height: 1px; background: var(--border); margin: 4px 0; }
.popup-section-label {
  padding: 6px 12px 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  user-select: none;
}

.popup-item-new {
  padding: 7px 12px;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  border-radius: 4px;
}
.popup-item-new:hover { background: var(--hover-overlay-subtle); }

/* ── Timeline settings popup ────────────────────── */

.timeline-popup {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  z-index: 200;
  box-shadow: 0 8px 24px var(--menu-shadow);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline-popup label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timeline-popup select, .timeline-popup input[type="number"] {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  width: 100%;
  outline: none;
}

.timeline-popup .mode-btns {
  display: flex;
  gap: 4px;
}

.timeline-popup .mode-btn {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}
.timeline-popup .mode-btn:hover { border-color: var(--accent); color: var(--text); }
.timeline-popup .mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Template picker ─────────────────────────────── */

.template-picker {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000a;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-picker-inner {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  min-width: 360px;
  box-shadow: 0 16px 48px var(--menu-shadow);
}

.template-picker-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
}

.template-option {
  padding: 12px 16px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 4px;
  color: var(--text);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
.template-option:hover { background: var(--hover-overlay); border-color: var(--accent); }

.template-option-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Empty state ─────────────────────────────────── */

.empty-state-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-dim);
  font-size: 14px;
  pointer-events: none;
  user-select: none;
  text-align: center;
  line-height: 1.6;
}

/* ── Export overlay ────────────────────────────────── */

#export-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000c;
  z-index: 500;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text);
}

#export-overlay.show { display: flex; }


/* ── Save indicator ──────────────────────────────── */

#save-indicator {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
  pointer-events: none;
}
#save-indicator.show {
  opacity: 1;
}

/* ── Bottom Strip (Milestones + Timeline) ─────────── */

#bottom-strip {
  display: flex;
  position: relative;
}

#bottom-strip-label {
  width: var(--label-width);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#bottom-strip-track {
  position: relative;
  flex: 1;
  overflow: visible;
}

#milestone-track {
  position: relative;
  height: 48px;
  overflow: visible;
}

.milestone-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: grab;
  z-index: 10;
  padding: 2px 5px 0;
  border-radius: 5px;
  transition: background 0.15s ease;
  user-select: none;
}

.milestone-marker:hover {
  background: var(--hover-overlay-subtle);
}

.milestone-marker.selected {
  outline: 2px solid var(--select-outline);
  outline-offset: 1px;
  box-shadow: 0 0 12px var(--accent-glow);
}

.milestone-marker.dragging {
  opacity: 0.3;
}

.milestone-ghost {
  pointer-events: none;
  opacity: 0.6;
}

.milestone-diamond {
  font-size: 22px;
  line-height: 1;
  color: var(--milestone-border);
  text-shadow: 0 0 12px var(--milestone-glow);
}

.milestone-label {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin-top: 1px;
}

.milestone-label.editing {
  outline: 1px solid var(--accent);
  border-radius: 2px;
  padding: 0 4px;
  background: var(--bg);
  color: var(--text);
  overflow: visible;
  max-width: none;
}

body[class*="theme-scania"] .milestone-diamond {
  color: var(--milestone-border);
}

/* ── Drag & drop file overlay ────────────────────── */

body.drag-over::after {
  content: 'Drop .roadmap.json file to load';
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 3px dashed rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  margin: 12px;
  pointer-events: none;
}