:root {
  --bg: #0c0c12;
  --grid: #242429;
  --line: #3d3d41;
  --blue: #2965ae;
  --text: #ffffff;
  --muted: #858588;
  --green: #37ae8d;
  --yellow: #dec92b;
  --red: #d73526;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: 'Noto Sans', system-ui, sans-serif; font-size: 13px; -webkit-font-smoothing: antialiased; }

/* ---------- chart ---------- */
.chart { position: relative; width: 100%; aspect-ratio: 600 / 560; min-height: 240px; max-height: max(360px, calc(100vh - 190px)); }
.slip-chart { display: block; position: absolute; inset: 0; user-select: none; touch-action: none; overflow: visible; font-family: 'Noto Sans', system-ui, sans-serif; }
.slip-chart .ax { fill: var(--text); font-weight: 700; }
.slip-chart .val { fill: var(--text); font-weight: 600; pointer-events: none; }
.slip-chart .rl { font-weight: 700; pointer-events: none; }
.slip-chart .lbl-mu { font-weight: 700; pointer-events: none; }
.slip-chart .pt { outline: none; }
.slip-chart [data-fk], .slip-chart [data-appear], .slip-chart .pt { transition: opacity .2s ease, stroke-width .2s ease, r .2s ease; }
.slip-chart.is-dragging, .slip-chart.is-dragging .pt { cursor: grabbing; }
.slip-chart .pt:focus-visible { stroke: #fff; }
.slip-tip {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--text); background: #1b1b20;
  border: 1px solid var(--line); border-radius: 3px; padding: 4px 8px;
  opacity: 0; transition: opacity .2s ease;
}
.slip-tip.is-on { opacity: 1; }

/* ---------- app shell ---------- */
.app { margin: 0; padding: 16px 20px; }
.head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.head h1 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: .02em; }
.head .crumb { color: var(--muted); font-size: 12px; font-weight: 600; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 10px 0 14px; border-bottom: 1px solid var(--grid); margin-bottom: 16px; }
.group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.group > .lbl { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }

button, select {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text);
  background: transparent; border: 1px solid var(--line); border-radius: 3px;
  height: 28px; padding: 0 10px; cursor: pointer;
}
button:hover, select:hover { border-color: var(--blue); }
button:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); }
button:disabled { opacity: .35; cursor: default; border-color: var(--line); }
select { background: var(--bg); padding-right: 6px; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: -1px; padding: 0 8px; }
.seg button:first-child { border-radius: 3px 0 0 3px; margin-left: 0; }
.seg button:last-child { border-radius: 0 3px 3px 0; }
.seg button[aria-pressed="true"] { position: relative; z-index: 1; }

/* ---------- view tabs ---------- */
.chart[hidden], .hint[hidden], .toolbar[hidden], .usage[hidden], .side-mu[hidden], .view-actions[hidden], .icon-seg[hidden] { display: none; }
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--grid); margin-bottom: 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs button {
  height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: none;
  font-size: 15px; font-weight: 700; color: var(--muted); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s;
}
.tabs button:hover { color: var(--text); border-color: transparent; }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: #3f8ce8; background: none; }
.subbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 4px; }
.subbar[hidden] { display: none; }
.vmodes button { min-width: 72px; }
.maps button { min-width: 30px; padding: 0 6px; }
/* ---------- settings / user offset panels ---------- */
.panel { padding: 4px 0 14px; margin-bottom: 16px; border-bottom: 1px solid var(--grid); }
.panel[hidden] { display: none; }
.panel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.panel-note { color: var(--muted); font-size: 11px; margin: 8px 0; max-width: 820px; line-height: 1.5; }
.shift-fill { margin: 6px 0; }
.shift-tbl { border-collapse: collapse; font-size: 11px; margin: 4px 0 10px; }
.shift-tbl th { font-weight: 700; color: var(--muted); padding: 2px 3px; text-align: center; white-space: nowrap; }
.shift-tbl th[scope="row"] { text-align: left; padding-right: 8px; }
.shift-tbl th.zero { color: var(--text); }
.shift-tbl td { padding: 2px; }
.shift-tbl input {
  width: 40px; height: 24px; padding: 0 3px; text-align: right;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--text);
  background: #121218; border: 1px solid var(--line); border-radius: 3px;
}
.shift-tbl input:hover { border-color: var(--blue); }
.shift-tbl input:focus { outline: none; border-color: #3f8ce8; box-shadow: 0 0 0 1px #3f8ce8; }
.shift-tbl input:disabled { opacity: .35; }
.usage { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.usage b { color: var(--text); font-weight: 700; }
.spacer { flex: 1; }

/* ---------- mu line settings ---------- */
.mu-panel { padding: 0 0 14px; margin-bottom: 16px; border-bottom: 1px solid var(--grid); }
.mu-panel[hidden] { display: none; }
.mu-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mu-head .group[hidden] { display: none; }
.mu-note { color: var(--muted); font-size: 11px; margin: 8px 0 0; }
.mu-tables { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.mu-tables:empty { display: none; }
.mu-cap { color: var(--muted); font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.mu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 24px; max-width: 900px; }
.mu-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mu-lbl { width: 44px; flex: none; font-size: 11px; font-weight: 700; color: var(--muted); }
.mu-unit { font-size: 11px; font-weight: 700; color: var(--muted); }
.mu-ctl input[type="range"] { flex: 1; min-width: 80px; accent-color: #3f8ce8; height: 20px; margin: 0; cursor: pointer; }
.mu-ctl input[type="text"] {
  width: 52px; height: 24px; padding: 0 6px; text-align: right; flex: none;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--text);
  background: #121218; border: 1px solid var(--line); border-radius: 3px;
}
.mu-ctl input[type="text"]:hover { border-color: var(--blue); }
.mu-ctl input[type="text"]:focus { outline: none; border-color: #3f8ce8; box-shadow: 0 0 0 1px #3f8ce8; }
#mu button:disabled { opacity: .3; }
.hint { color: var(--muted); font-size: 11px; margin-top: 10px; }
kbd { font: inherit; font-weight: 700; color: var(--text); }

/* ---------- states sheet ---------- */
.states { display: grid; grid-template-columns: 1fr; gap: 48px 160px; padding: 24px 16px; max-width: 1450px; margin: 0 auto; }
@media (min-width: 900px) { .states { grid-template-columns: 1fr 1fr; padding: 24px 40px; } }
.states .chart { max-height: none; }
.states figure { margin: 0; }
.states figcaption { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }

@media (max-width: 480px) {
  .app { padding: 12px 8px; }
  .toolbar { gap: 8px 10px; }
}

/* ---------- two-column layout: allocation table | main ---------- */
.layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .layout { grid-template-columns: auto minmax(0, 1fr); gap: 28px; } }
.main { min-width: 0; }
#mainView[hidden], .picker[hidden] { display: none; }
.side { position: sticky; top: 50px;   /* top: set by fitSide() in app.js, below the sticky tab row */ overflow-x: hidden; padding-right: 8px; scrollbar-gutter: stable;   /* 8px + the 12px scrollbar slot (always reserved) = the same 20px gap, so the vertical scrollbar never squeezes the table */ border-right: 1px solid var(--grid); }
@media (max-width: 999px) { .side { position: static; border-right: 0; padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid var(--grid); } }
.side-h { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 10px; }

/* ---------- spreadsheet grid (sheet-grid.js) ---------- */
.sheet { border-collapse: collapse; font-size: 12px; outline: none; user-select: none; }
.sheet th { font-weight: 700; color: var(--muted); font-size: 11px; height: 26px; padding: 0 8px; text-align: right; background: #121218; border: 1px solid var(--grid); white-space: nowrap; }
.sheet th.corner { text-align: left; font-weight: 600; }
.sheet th[scope="row"] { text-align: left; color: var(--text); padding: 0 12px 0 8px; }
.sheet td[data-r] {
  position: relative; height: 30px; min-width: 52px; padding: 0 9px; text-align: right;
  border: 1px solid var(--grid); background: var(--bg); cursor: cell;
}
.sheet .num { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sheet td.uses-edited .num { color: #3f8ce8; }
.sheet td.row-active .num { color: #3f8ce8; }
.sheet td.ro { background: #101016; }
.sheet td.ro .num { color: var(--muted); font-weight: 600; }
/* selection: tinted range with an outline on its outer edges, active cell framed */
.sheet td.in-sel { background: rgba(63, 140, 232, .14); }
.sheet td.sel-t { box-shadow: inset 0 1px 0 #3f8ce8; }
.sheet td.sel-b { box-shadow: inset 0 -1px 0 #3f8ce8; }
.sheet td.sel-l { box-shadow: inset 1px 0 0 #3f8ce8; }
.sheet td.sel-r { box-shadow: inset -1px 0 0 #3f8ce8; }
.sheet td.sel-t.sel-l { box-shadow: inset 1px 1px 0 #3f8ce8; }
.sheet td.sel-t.sel-r { box-shadow: inset -1px 1px 0 #3f8ce8; }
.sheet td.sel-b.sel-l { box-shadow: inset 1px -1px 0 #3f8ce8; }
.sheet td.sel-b.sel-r { box-shadow: inset -1px -1px 0 #3f8ce8; }
.sheet td.sel-t.sel-b { box-shadow: inset 0 1px 0 #3f8ce8, inset 0 -1px 0 #3f8ce8; }
.sheet td.sel-l.sel-r { box-shadow: inset 1px 0 0 #3f8ce8, inset -1px 0 0 #3f8ce8; }
.sheet td.sel-t.sel-b.sel-l { box-shadow: inset 1px 1px 0 #3f8ce8, inset 0 -1px 0 #3f8ce8; }
.sheet td.sel-t.sel-b.sel-r { box-shadow: inset -1px 1px 0 #3f8ce8, inset 0 -1px 0 #3f8ce8; }
.sheet td.sel-l.sel-r.sel-t { box-shadow: inset 1px 1px 0 #3f8ce8, inset -1px 0 0 #3f8ce8; }
.sheet td.sel-l.sel-r.sel-b { box-shadow: inset 1px -1px 0 #3f8ce8, inset -1px 0 0 #3f8ce8; }
.sheet td.is-active { box-shadow: inset 0 0 0 2px #3f8ce8 !important; }
.sheet:not(:focus-within) td.is-active { box-shadow: inset 0 0 0 2px rgba(63, 140, 232, .55) !important; }
.sg-edit {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 9px; text-align: right;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--text);
  background: #121218; border: 0; box-shadow: inset 0 0 0 2px #3f8ce8; outline: none;
}
.alloc-msg { min-height: 16px; margin: 6px 0 0; color: var(--muted); font-size: 11px; }

/* ---------- table view ---------- */
.table-view[hidden] { display: none; }
.tv-cap { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.tv-cap b { color: var(--text); }
.tv-ro { color: var(--muted); font-style: italic; }
.table-view .sheet td[data-r] { min-width: 56px; }

/* ---------- Google Material Icons (filled) ---------- */
.material-icons { font-size: 18px; line-height: 1; vertical-align: middle; }
.ico-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px 0 7px; }
.ico-btn .material-icons { font-size: 17px; }
.icon-seg button { width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.icon-seg button .material-icons { font-size: 18px; }
.slip-chart .mi { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-feature-settings: 'liga'; }

/* ---------- map picker ---------- */
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 12px; border-bottom: 1px solid var(--grid); margin-bottom: 12px; }
.picker-title { font-size: 14px; font-weight: 600; }
.picker-title b { font-weight: 700; }
.picker-sub { color: var(--muted); font-size: 12px; font-weight: 600; margin-left: 8px; }
.picker-body { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .picker-body { grid-template-columns: 200px minmax(0, 1fr); } }
.picker-list { display: flex; flex-direction: column; gap: 2px; max-height: 80vh; overflow-y: auto; }
.pk {
  display: grid; grid-template-columns: 58px 1fr; align-items: baseline; gap: 4px;
  height: auto; min-height: 30px; padding: 5px 8px; text-align: left;
  border: 1px solid transparent; border-radius: 3px; background: none;
}
.pk-name { font-size: 13px; font-weight: 700; white-space: nowrap; }
.pk .num { font-variant-numeric: tabular-nums; }
.pk-use { color: var(--muted); font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; }
.pk:hover { background: rgba(255, 255, 255, .04); border-color: var(--grid); }
.pk[aria-selected="true"] { border-color: #3f8ce8; background: rgba(63, 140, 232, .12); }
.pk[aria-selected="true"] .num { color: #3f8ce8; }

/* ---------- app header ---------- */
/* 25 % black over the app background (scrolls away with the page; the lowest tab row stays at the top instead); inside its bottom
   25px a shadow: 25 % black at the bottom edge, fading out upwards */
.appbar { position: relative; z-index: 30; height: 50px;
  background: linear-gradient(to top, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 25px), linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)), var(--bg); }
.appbar-in { display: flex; align-items: center; gap: 6px; height: 100%; margin: 0; padding: 0 20px; }
.brand { font-size: 12px; font-weight: 600; color: #8a93a8; white-space: nowrap; }
.appbar-sep { font-size: 18px; color: #4b5570; }
.appbar-title { margin: 0; font-size: 13px; font-weight: 700; white-space: nowrap; }
.hist-ctl { display: flex; align-items: center; gap: 2px; }
.icon-btn {
  width: 32px; height: 30px; padding: 0; border: 0; border-radius: 3px; background: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
}
.icon-btn:hover { background: rgba(255, 255, 255, .08); border-color: transparent; }
.icon-btn:disabled { opacity: .3; background: none; }
.icon-btn .material-icons { font-size: 20px; }
#histBtn { width: 26px; }
#histBtn[aria-expanded="true"] { background: rgba(63, 140, 232, .18); color: #3f8ce8; }

/* ---------- changes panel ---------- */
.history {
  position: fixed; top: 50px; right: 0; bottom: 0; z-index: 25; width: min(360px, 100vw);
  background: #11151f; border-left: 1px solid #1d2640; box-shadow: -12px 0 32px rgba(0, 0, 0, .45);
  transform: translateX(100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
  display: flex; flex-direction: column;
}
.history.is-open { transform: none; visibility: visible; transition: transform .2s ease; }
.history-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid #1d2640; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.history-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; }
.history-list li { padding: 9px 16px; border-bottom: 1px solid #181d2a; }
.h-main { display: flex; align-items: baseline; gap: 12px; }
.h-label { font-size: 13px; font-weight: 700; color: var(--text); }
.h-time { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.h-desc { margin-top: 2px; font-size: 11px; color: var(--muted); }
.h-empty { color: var(--muted); font-size: 12px; border-bottom: 0 !important; }
@media (max-width: 480px) { .brand, .appbar-sep { display: none; } .appbar-in { padding: 0 8px; } }

/* ---------- left column: contextual map list ---------- */
@media (min-width: 1000px) { .side { max-height: calc(100vh - 56px); overflow-y: auto; } }
.side-ctx { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); }
.side-ctx[hidden] { display: none; }
.ctx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ctx-head .side-h { margin: 0; }
.switch { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 4px; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 700; }
.switch:hover { color: var(--text); background: rgba(255, 255, 255, .05); border-color: transparent; }
.switch[hidden] { display: none; }
.switch .material-icons { font-size: 30px; color: #4b5570; transition: color .2s; }
.switch[aria-checked="true"] { color: var(--text); }
.switch[aria-checked="true"] .material-icons { color: #3f8ce8; }
.ctx-list { max-height: none; }
.ctx-list .pk-name { display: inline-flex; align-items: center; gap: 4px; }
.ctx-list .sw { display: none; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.ctx-list.show-sw .sw { display: inline-block; }
.ctx-list.show-sw .pk { grid-template-columns: 72px 1fr; }

/* ---------- clickable sheet headers (mode rows / gear columns) ---------- */
.sheet th.hdr-click { cursor: pointer; transition: color .2s, background-color .2s; }
.sheet th.hdr-click:hover { color: var(--text); background: #1a1f2c; }
.sheet th.hdr-on { color: #3f8ce8 !important; background: rgba(63, 140, 232, .14); box-shadow: inset 0 -2px 0 #3f8ce8; }
.sheet th[scope="row"].hdr-on { box-shadow: inset 2px 0 0 #3f8ce8; }
.ctx-list.show-sw .pk[aria-selected="true"] { border-color: var(--mc); background: rgba(255, 255, 255, .05); }
.ctx-list.show-sw .pk[aria-selected="true"] .num { color: var(--mc); }

/* ---------- tab bar with view actions on the right ---------- */
.tabbar { display: flex; align-items: center; gap: 12px 24px; border-bottom: 1px solid var(--grid); margin-bottom: 12px; flex-wrap: wrap; }
.tabbar .tabs { border-bottom: 0; margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.view-actions { margin-left: auto; padding: 4px 0; }

/* ---------- left column: mu_x level ---------- */
.side-mu { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); }
.side-mu .side-h { margin: 0 0 8px; }
.side-mu .seg { display: flex; }
.side-mu .seg button { flex: 1; }

/* ---------- full width: the chart fills the main column and the remaining height ---------- */
.main .chart { aspect-ratio: auto; max-height: none; height: max(360px, calc(100vh - 200px)); }
.main .mu-panel:not([hidden]) ~ .chart { height: max(360px, calc(100vh - 330px)); }
@media (max-width: 699px) { .main .chart, .main .mu-panel:not([hidden]) ~ .chart { height: auto; aspect-ratio: 600 / 560; } }

/* ---------- left column blocks (μ lines, All maps, map list) ---------- */
.side-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grid); }
.side-block[hidden] { display: none; }
.side-block .side-h { margin: 0 0 8px; }
.side .mu-panel { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.side-seg { display: flex; margin-bottom: 6px; }
.side-seg button { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; }
#muCalc[hidden] { display: none; }
.side .mu-tables { margin-top: 8px; }
.side .mu-grid { grid-template-columns: 1fr; max-width: none; }
.side .switch { padding-left: 0; }
.side .switch .material-icons { font-size: 32px; }
#lineStyle button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#lineStyle .material-icons { font-size: 17px; }

/* ---------- graph + data table stacked (table always visible, full width) ---------- */
.main .chart { height: max(340px, calc(100vh - 350px)); }
.main .table-view { margin-top: 14px; }
#mapTbl { width: 100%; table-layout: fixed; }
#mapTbl th.corner { width: 90px; }
#mapTbl td[data-r] { min-width: 0; }

/* ---------- Copy / Paste ▾ ---------- */
.split { position: relative; display: inline-flex; }
.split > .ico-btn { border-radius: 3px 0 0 3px; }
.split-arrow {
  width: 26px; padding: 0; border-left: 0; border-radius: 0 3px 3px 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.split-arrow[aria-expanded="true"] { background: rgba(63, 140, 232, .18); border-color: #3f8ce8; }
.split[hidden], #copyMap[hidden] { display: none; }
.menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; width: 280px; max-height: 70vh; overflow-y: auto;
  padding: 4px; background: #141b2d; border: 1px solid #1d2640; border-radius: 4px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.menu[hidden] { display: none; }
.menu-h { padding: 6px 8px 4px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.menu button {
  display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 6px; width: 100%; height: auto;
  padding: 6px 8px; text-align: left; border: 0; border-radius: 3px; background: none;
}
.menu button:hover, .menu button:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
.menu-name { font-size: 13px; font-weight: 700; }
.menu-use { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699px) { .main .chart { height: auto; aspect-ratio: 600 / 560; } }

/* ---------- map list as vertical tabs for the graph (top of the left column) ---------- */
.side-tabs[hidden] { display: none; }
.side-tabs .side-h { margin: 10px 0 8px; }
.side-tabs:not([hidden]) ~ .side-alloc-h { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--grid); }
.side-tabs .ctx-list { gap: 0; margin-right: -20px; }          /* tabs run up to the column divider, next to the graph */
.side-tabs .pk {
  min-height: 36px; padding: 8px 14px 8px 11px; align-items: center;
  border: 0; border-left: 3px solid transparent; border-radius: 0; background: none;
  transition: background-color .2s, border-color .2s;
}
.side-tabs .pk + .pk { border-top: 1px solid #16161d; }
.side-tabs .pk:hover { background: rgba(255, 255, 255, .04); }
.side-tabs .pk .pk-name { font-size: 14px; color: var(--muted); }
.side-tabs .pk:hover .pk-name { color: var(--text); }
.side-tabs .pk[aria-selected="true"],
.side-tabs .ctx-list.show-sw .pk[aria-selected="true"] {
  background: #141b2d; border-color: transparent; border-left-color: #3f8ce8;
  box-shadow: inset -2px 0 0 #3f8ce8;                             /* edge that joins the graph */
}
.side-tabs .ctx-list.show-sw .pk[aria-selected="true"] { border-left-color: var(--mc); box-shadow: inset -2px 0 0 var(--mc); }
.side-tabs .pk[aria-selected="true"] .pk-name { color: var(--text); }
.side-tabs .pk[aria-selected="true"] .num { color: inherit; }

/* ---------- compact data table under the graph (33 % lower rows) ---------- */
#mapTbl th { height: 18px; font-size: 10px; }
#mapTbl td[data-r] { height: 20px; }
#mapTbl .num { font-size: 12px; }
#mapTbl .sg-edit { font-size: 12px; }
.main .table-view { margin-top: 10px; }

/* ---------- map list title with ↑ / ↓ ---------- */
.side-h-row { display: flex; align-items: center; justify-content: space-between; }
.nav-arrows { display: inline-flex; gap: 2px; }
.nav-arrows .icon-btn { width: 26px; height: 24px; color: var(--muted); }
.nav-arrows .icon-btn:hover:not(:disabled) { color: var(--text); }
.nav-arrows .material-icons { font-size: 18px; }
.appbar-file { margin-left: 10px; padding: 2px 8px; border-radius: 3px; background: rgba(255, 255, 255, .06); color: #8a93a8; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.appbar-file:empty { display: none; }
#dtcModeRow[hidden] { display: none; }

/* ---------- segmented switches: pill style everywhere ---------- */
.seg { display: inline-flex; align-items: center; gap: 0; padding: 2px; border: 1px solid #3d3d41; border-radius: 999px; background: transparent; }
.seg button,
.seg button:first-child,
.seg button:last-child {
  height: 26px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text); font-weight: 600;
  transition: background-color .2s, color .2s;
}
.seg button:hover { background: rgba(255, 255, 255, .05); border-color: transparent; }
.seg button[aria-pressed="true"] { background: #3d3d41; color: var(--text); font-weight: 700; }
.seg button:disabled { opacity: .35; background: transparent; }
.side-seg { display: flex; }
.side-seg button { flex: 1 1 auto; }
.switch-list { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.switch[hidden] { display: none; }
.mu-hint { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
#bgSel button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#bgSel .material-icons { font-size: 17px; }

/* ---------- ⓘ info icon with tooltip (label rows in the left column) ---------- */
.info-tip { position: relative; display: inline-flex; }
.info-btn { width: 24px; height: 24px; color: var(--muted); }
.info-btn .material-icons { font-size: 17px; }
.info-btn:hover, .info-btn:focus-visible { color: var(--text); }
.info-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 280px;
  padding: 8px 10px; border-radius: 4px; background: #141b2d; border: 1px solid #1d2640;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  color: var(--text); font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; pointer-events: none;
}
.info-tip:hover .info-pop, .info-btn:focus-visible + .info-pop { opacity: 1; visibility: visible; transition: opacity .2s; }
.mu-ctl.stacked { flex-wrap: wrap; row-gap: 6px; }
.mu-ctl.stacked .mu-lbl { width: auto; flex-basis: 100%; }

/* ---------- Display: μ levels switch + map filter chips ---------- */
#sideShow[hidden] { display: none; }
.side-sub { margin: 10px 0 6px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.chip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  min-width: 30px; height: 24px; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color .2s, border-color .2s, color .2s;
}
.chip:hover { border-color: var(--mc); color: var(--text); }
.chip[aria-pressed="true"] { border-color: var(--mc); color: var(--mc); background: rgba(255, 255, 255, .04); }
.chip.is-current, .chip.is-current:disabled { background: var(--mc); border-color: var(--mc); color: #0c0c12; opacity: 1; cursor: default; }
.side[hidden] { display: none; }
.layout.no-side { grid-template-columns: 1fr; }

/* ---------- +- Buttons: sliders + table under the graph ---------- */
.shift-panel { margin: 14px 0 0; padding: 0; border-bottom: 0; }
.shift-top .mu-grid { flex: 1 1 520px; max-width: 720px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin: 0; }
#shiftTbl td[data-r] { min-width: 44px; height: 24px; }
#shiftTbl th { height: 22px; }
#shiftTbl th.corner { font-weight: 600; }
#shiftTbl { width: 100%; table-layout: fixed; }
#shiftTbl th.corner { width: 110px; }
#shiftTbl td[data-r] { min-width: 0; padding: 0 6px; }
/* ---------- settings: section titles + DTC mode radio table ---------- */
.set-h { font-size: 15px; font-weight: 700; color: var(--text); margin: 8px 0 10px; }
.set-h + .seg + .set-h, #settingsPanel .set-h:not(:first-child) { margin-top: 28px; }
.mode-tbl td { text-align: center; padding: 0; height: 30px; min-width: 76px; border: 1px solid var(--grid); }
.mode-tbl th:not(.corner):not([scope="row"]) { text-align: center; min-width: 76px; }
.mode-tbl th[scope="row"] { font-weight: 400; font-size: 13px; }   /* mode names 2px bigger than the other table text */
.mode-tbl th[scope="row"] b { display: inline-block; width: 18px; color: var(--muted); font-weight: 700; }
.mode-tbl label { display: flex; align-items: center; justify-content: center; height: 30px; cursor: pointer; }
.mode-tbl input { accent-color: #3f8ce8; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.mode-tbl tr:hover td, .mode-tbl tr:hover th[scope="row"] { background: rgba(63,140,232,.06); }
.shift-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin: 30px 0 14px; }   /* below the graph */
.shift-top[hidden] { display: none; }
.shift-pick { display: flex; flex-direction: column; gap: 6px; }
.shift-pick select { height: 32px; font-size: 13px; font-weight: 600; min-width: 260px; }
.shift-pick .mu-lbl { white-space: nowrap; width: auto; }
.use-g { margin-right: 18px; } .use-g:last-child { margin-right: 0; }
/* ---------- graph fills the remaining height: main view = viewport below the tabs, the chart takes what the rest leaves ---------- */
@media (min-width: 700px) {
  .main #mainView > .chart { height: var(--chart-h, 480px); }   /* set by fitMain() in app.js */
}
@media (min-width: 1000px) { .side { box-sizing: border-box; } }   /* height: fitSide() in app.js (down to 12px above the window bottom) */
/* +- Buttons table: level headers in the graph colours; the selected level is underlined in its colour */
#shiftTbl thead th[data-hc] { color: var(--lc); cursor: pointer; }
#shiftTbl thead th.hdr-on { color: var(--lc) !important; background: rgba(255, 255, 255, .07); box-shadow: inset 0 -2px 0 var(--lc); }
/* left column: fixed 380px */
@media (min-width: 1000px) { .layout { grid-template-columns: 383px minmax(0, 1fr); } .side { width: 383px; box-sizing: border-box; } }   /* 362px table + 8px padding + 12px scrollbar slot + 1px divider */
/* page scrollbar: the browser's own one is hidden (no width taken); js/page-scrollbar.js draws one over the content */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.side { overflow-x: hidden; }
/* ---------- slip target allocation: "Edit Map N" button ---------- */
.side-alloc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.edit-map-btn { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--text); height: 26px; }
/* ---------- map editor overlay ---------- */
.editor { position: fixed; inset: 0; z-index: 50; background: rgba(4, 6, 12, .72); display: flex; align-items: center; justify-content: center; padding: 24px; }
.editor[hidden] { display: none; }
.editor-box { width: min(1400px, 100%); height: calc(100vh - 48px); background: var(--bg); border: 1px solid var(--grid); border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); display: flex; flex-direction: column; overflow: hidden; }
.editor-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--grid); }
.editor-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.editor-body { flex: 1; min-height: 0; padding: 16px 20px; overflow-y: auto; }   /* one column; scrolls to the rest of the table */
.editor-side { display: none; }
.editor-side .mu-panel { margin: 0; padding: 0; border: 0; }
.editor-main { display: flex; flex-direction: column; min-width: 0; }
.editor-main .chart { flex: none; height: var(--editor-chart-h, 420px); min-height: 0; max-height: none; aspect-ratio: auto; }
.editor-main .mu-panel { margin: 14px 0 0; padding: 0; border: 0; max-width: 560px; }
.editor-main .table-view { margin-top: 14px; }
body.no-scroll { overflow: hidden; }
@media (max-width: 899px) { .editor { padding: 0; } .editor-box { height: 100vh; border-radius: 0; } .editor-body { grid-template-columns: 1fr; } .editor-main .chart { flex: none; height: 60vw; } }
#logClear[hidden] { display: none; }
/* Import MOTEC data: once a log is loaded, its × (hide) sits inside the button, at the right end */
.log-wrap { position: relative; display: inline-flex; }
.log-wrap:has(#logClear:not([hidden])) #log { padding-right: 32px; }
.log-wrap #logClear { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 24px; height: 22px; border-radius: 2px; }
.log-wrap #logClear .material-icons { font-size: 17px; }
.log-wrap #logClear:hover { background: rgba(255, 255, 255, .18); }
#mapList .pk { height: 28px; min-height: 28px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }   /* map list rows: 28px */
/* ---------- left column: Map details (selected map) ---------- */
.map-details > .side-h-row { margin-bottom: 6px; }
.md-name { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.md-name .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.md-use { color: var(--muted); font-size: 11px; font-weight: 600; margin: 0 0 4px; }
.md-use[hidden] { display: none; }
.md-sub { margin-top: 14px; }
.md-sub .side-h { margin: 0 0 8px; }
.map-details .mu-panel { padding: 0; border: 0; margin-bottom: 0; }
#sideLine[hidden] { display: none; }
/* curvy version of the show_chart icon (Smooth) */
.ico-svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* legend under the graph */
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 6px 0 0 40px; color: var(--muted); font-size: 11px; font-weight: 600; }
.chart-legend[hidden] { display: none; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend svg { height: 14px; width: auto; color: var(--lc, #3f8ce8); fill: none; }
.chart-legend svg circle { fill: #fff; }
#log[hidden], #exportMrck[hidden], #importMrck[hidden] { display: none; }
.slip-chart:focus, .slip-chart:focus-visible, .chart:focus { outline: none; }   /* no focus frame around the graph; target points show their own focus */
/* ---------- B tabs: second row of tabs (riding modes / gears / maps), 2px smaller than the main tabs ---------- */
.tab-sep { flex: none; width: 1px; height: 18px; align-self: center; background: var(--grid); }
.subtabs { display: flex; gap: 22px; border-bottom: 1px solid var(--grid); margin: -12px 0 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.subtabs[hidden] { display: none; }
.subtabs button {
  flex: none; height: 38px; padding: 0 2px; border: 0; border-radius: 0; background: none;
  font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.subtabs button:hover { color: var(--text); border-color: transparent; }
.subtabs button[aria-selected="true"] { color: var(--text); border-bottom-color: #3f8ce8; background: none; }
.subtabs .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.subtabs .sw { width: 2px; height: 12px; border-radius: 1px; }   /* map colour as a short vertical line */
.subtabs .sw-all { background: #fff; }   /* All: white mark, same size as the map colours */
#editMapBtn[hidden] { display: none; }
/* ---------- changes panel: versions on a timeline ---------- */
.history-list .h-item { position: relative; padding: 9px 16px 9px 40px; cursor: pointer; transition: background .15s; }
.history-list .h-item::before {            /* the vertical line through all versions */
  content: ''; position: absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: #2a3247;
}
.history-list .h-item:first-child::before { top: 16px; }
.history-list .h-item:last-child::before { bottom: calc(100% - 16px); }
.history-list .h-item::after {             /* the dot of this version */
  content: ''; position: absolute; left: 15px; top: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: #11151f; border: 2px solid #5a6684; box-sizing: border-box; transition: transform .15s, border-color .15s;
}
.history-list .h-item:hover, .history-list .h-item:focus-visible { background: rgba(63, 140, 232, .09); outline: none; }
.history-list .h-item:hover::after, .history-list .h-item:focus-visible::after { border-color: #3f8ce8; transform: scale(1.25); }
.history-list .h-item.is-current { cursor: default; background: rgba(63, 140, 232, .06); }
.history-list .h-item.is-current::after { background: #3f8ce8; border-color: #3f8ce8; }
.history-list .h-item.is-future { opacity: .5; }
.history-list .h-item.is-future:hover { opacity: .85; }
.history-list .h-item.is-future::after { border-style: dashed; }
.h-now { font-size: 10px; font-weight: 700; color: #3f8ce8; text-transform: uppercase; letter-spacing: .06em; }
.h-orig .h-label { color: var(--muted); }
/* ---------- left column: 30px between elements / inputs ---------- */
.side .alloc-msg { min-height: 0; margin: 0; }
.side .alloc-msg:not(:empty) { margin-top: 6px; }
.side .side-block { margin-top: 30px; padding-top: 30px; }
.side .md-sub { margin-top: 30px; }
.side #sideShow .switch + .side-sub { margin-top: 24px; }   /* + the switch's 6px = 30px */
/* left column scrollbar: 12px, no arrow buttons */
.side::-webkit-scrollbar { width: 12px; }
.side::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.side::-webkit-scrollbar-track { background: transparent; }
.side::-webkit-scrollbar-thumb { background: #3a3d48; border-radius: 6px; border: 3px solid var(--bg); }
.side::-webkit-scrollbar-thumb:hover { background: #555a68; }
.map-details > .side-h-row { flex-direction: column; align-items: flex-start; gap: 10px; }   /* map name below the MAP DETAILS label */
/* Google Material Symbols (Outlined), as on fonts.google.com/icons: the app's .material-icons spans use this font */
.material-icons {
  font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.slip-chart .mi { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.switch .material-icons { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }   /* switches stay filled pills */
/* Add MOTEC data / Export MRCK (and the other action buttons next to the tabs): 10 % white, 20 % on hover, 25 % black while pressed */
#viewActions .ico-btn:not(:disabled) { background: rgba(255, 255, 255, .1); transition: background .2s; }
#viewActions .ico-btn, #viewActions .ico-btn:hover, #viewActions .split-arrow, #viewActions .split-arrow:hover { border-color: transparent; }   /* no stroke on the action buttons */
#viewActions .ico-btn:not(:disabled):hover { background: rgba(255, 255, 255, .2); }
#viewActions .ico-btn:not(:disabled):active { background: rgba(0, 0, 0, .25); transition: none; }
/* ---------- imported MoTeC log, below the graph (log-panel.js) ---------- */
.log-panel { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--grid); }
.log-panel[hidden] { display: none; }
.lp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.lp-head .switch { margin-left: -4px; }
.lp-info { color: var(--muted); font-size: 11px; font-weight: 600; }
.lp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 600; }
.lp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lp-legend svg { width: 26px; height: 12px; }
.log-panel.is-off .lp-body { display: none; }
.lp-cap { margin: 14px 0 2px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lp-cap span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.lp-red-box { position: relative; height: 180px; }
.lp-red-svg { display: block; position: absolute; inset: 0; overflow: visible; font-family: 'Noto Sans', system-ui, sans-serif; }
.lp-red-svg .ax { fill: var(--text); font-weight: 700; }
.lp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 32px; }
.lp-row[hidden] { display: none; }
.lp-lbl { width: 62px; flex: none; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lp-row .switch { padding-right: 10px; }
.lp-read { color: var(--muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-chip small { color: inherit; opacity: .7; font-weight: 600; margin-left: 4px; }
.lp-chip { padding: 0 8px; }
/* μ slider: two ends + a draggable bar between them */
.lp-mu { flex: 1 1 260px; max-width: 520px; min-width: 200px; padding: 0 8px; }
.lp-range { position: relative; height: 24px; touch-action: none; cursor: pointer; }
.lp-track { position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: var(--line); }
.lp-bar { position: absolute; top: 7px; height: 10px; border-radius: 3px; background: #3f8ce8; cursor: grab; }
.lp-range.is-moving, .lp-range.is-moving .lp-bar { cursor: grabbing; }
.lp-thumb { position: absolute; top: 3px; width: 12px; height: 18px; margin-left: -6px; border-radius: 3px; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); box-sizing: border-box; cursor: ew-resize; }
.lp-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lp-ticks { position: relative; height: 14px; color: var(--muted); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-ticks span { position: absolute; transform: translateX(-50%); }
.lp-tl-box { margin-top: 4px; }
.lp-tl { display: block; touch-action: none; }
.lp-lbl-mu { text-transform: none; font-size: 13px; }
/* logged data adjusters in the left column (log-panel.js, this.side) */
.lp-side { margin-top: 18px; }
.lp-side[hidden] { display: none; }
.lp-side > .side-h { margin-top: 0; }
.lp-side .switch { margin-left: 0; }   /* the left column clips overflow: no negative margin, or the switch pill gets cut */
.lp-side .lp-info { color: var(--muted); font-size: 11px; font-weight: 600; margin: 2px 0 4px; }
.lp-sub { display: flex; align-items: center; gap: 4px 10px; margin-top: 10px; }
.lp-sub .side-sub { margin: 0; min-width: 44px; }
.lp-sub .lp-read { margin-left: auto; }
.lp-side .chip-list { margin-top: 4px; }
.lp-side .lp-mu { max-width: none; min-width: 0; padding: 6px 8px 0; }
.lp-side.is-off .lp-side-body, .log-panel.is-off .lp-head { display: none; }
.log-panel > .lp-side { margin: 0 0 12px; max-width: 360px; }   /* docked in the panel (+- Buttons, no left column) */
.lp-ticks span:first-child { transform: translateX(-8px); } .lp-ticks span:last-child { transform: translateX(calc(-100% + 8px)); }   /* end labels stay inside the column */
/* μ slider track = the μ colour scale (legend of the reduction graph); outside the range dimmed, the range outlined */
.lp-track { top: 7px; height: 10px; border-radius: 3px; }
.lp-dim { position: absolute; top: 7px; height: 10px; background: rgba(12, 12, 18, .78); pointer-events: none; }
.lp-dim-l { left: 0; border-radius: 3px 0 0 3px; }
.lp-dim-r { right: 0; border-radius: 0 3px 3px 0; }
.lp-bar { top: 5px; height: 14px; background: transparent; box-sizing: border-box; }   /* invisible: only the drag area of the μ range */
/* left column: "Logged data filters" — each filter (label, control, its Automatically adjust switch below) well apart */
.lp-side .lp-filters-h { margin: 30px 0 8px; padding-top: 30px; border-top: 1px solid var(--grid); }   /* same spacing as the divider above "Logged data" (.side .side-block) */
.lp-filter { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 22px; }
.lp-filter > .lp-sub, .lp-corner-row > .lp-sub { margin-top: 0; }
.lp-filter > .switch { align-self: flex-start; margin-top: 2px; }
.lp-filter .lp-mu { flex: none; padding-top: 2px; }   /* not the row layout's flex-basis (would become height here) */
.lp-corner-row { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lp-corner-row[hidden] { display: none; }
.lp-time .lp-tl-box { margin-top: 0; }

.lp-time .chip-list { margin-top: 0; }
.lp-time > .lp-tl-h { margin-top: 10px; }
.lp-time > .lp-tl-box + .lp-corner-row { margin-top: 14px; }   /* timeline right below the laps, then the corners map */
/* track map (corners and straights): 8px track, 1px cuts at corner ends, clicked parts blue */
.lp-map-box[hidden] { display: none; }
.lp-map { display: block; overflow: visible; font-family: 'Noto Sans', system-ui, sans-serif; }
.lp-map .lp-trk, .lp-map .lp-c-line { fill: none; stroke: #4a4a52; stroke-width: 8px; stroke-linejoin: round; }
.lp-map .lp-c-hit { fill: none; stroke: transparent; stroke-width: 16px; }
.lp-map .lp-c { cursor: pointer; }
.lp-map .lp-c:hover .lp-c-line { stroke: #6e6e78; }
.lp-map .lp-c.is-on .lp-c-line { stroke: #3f8ce8; }
.lp-map .lp-cut { fill: none; stroke: var(--bg); stroke-width: 1px; pointer-events: none; }
.lp-map .lp-c-num { fill: var(--muted); font-size: 9px; font-weight: 700; cursor: pointer; user-select: none; }
.lp-map .lp-c-num.is-on { fill: #3f8ce8; }
.lp-link { margin-left: auto; height: auto; padding: 0; border: 0; background: none; color: #3f8ce8; font-size: 11px; font-weight: 700; }
.lp-link:hover { text-decoration: underline; }
.lp-link[hidden] { display: none; }
/* ---------- header: 25 % black, 50px — logo (original, black background) | title + author; history on the right ---------- */
.appbar .appbar-logo { height: 28px; width: auto; flex: none; display: block; mix-blend-mode: lighten; }   /* the image's black background takes the header colour */
.appbar-div { width: 1px; height: 30px; background: #3a3a40; margin: 0 16px 0 14px; flex: none; }
.appbar-titles { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.appbar .appbar-title { margin: 0; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.appbar-by { color: #8a8a90; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.appbar .icon-btn { color: #fff; }
.appbar .icon-btn:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 480px) { .appbar .appbar-logo { height: 22px; } .appbar-div { margin: 0 10px; } }
/* page scrollbar over the content (page-scrollbar.js), same look as the left column's: 12px, 6px thumb */
.page-scroll { position: fixed; top: 0; right: 0; bottom: 0; width: 12px; z-index: 40; }
.page-scroll[hidden] { display: none; }
.page-scroll-thumb { position: absolute; top: 0; left: 0; right: 0; box-sizing: border-box; border: 3px solid transparent; background-clip: padding-box; border-radius: 6px; background-color: #3a3d48; cursor: default; transition: background-color .15s; touch-action: none; }
.page-scroll-thumb:hover, .page-scroll.is-dragging .page-scroll-thumb { background-color: #555a68; }
/* gear / mode labels right of the graph (slip-chart.js): coloured box, dark 11px text, 10 % darker on hover */
.slip-chart .rl-box { pointer-events: none; }
.slip-chart .rl-box rect { transition: filter .15s; }
.slip-chart .rl-box.is-hover rect { filter: brightness(.9); }
.main .table-view { margin-top: 30px; }   /* 30px between the graph + legend and the data table */
.chart-title { margin: 0; }
.chart-title[hidden] { display: none; }
/* The lowest tab row stays at the top of the window while the page scrolls: the second row (riding modes / gears /
   maps) when it is shown, else the main tab row (Settings, +- Buttons). The left column sticks below it (app.js fitSide). */
.subtabs { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.app:has(> .subtabs[hidden]) > .tabbar { position: sticky; top: 0; z-index: 20; background: var(--bg); }
/* title row above the graph (level with the left column label): title on the left, legend on the right */
.chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px; margin: 10px 0; min-height: 15px; }
.chart-head .chart-legend { padding: 0; gap: 4px 18px; }
.chart-title .lc { text-transform: none; }
.chart-legends { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; margin-left: auto; }
.chart-head .chart-legend[hidden] { display: none; }
.log-legend svg { width: 26px; height: 12px; }
/* slip smoothing slider (left column, under Show logged data) */
.lp-smooth { margin-top: 14px; }
.lp-side.is-off .lp-smooth { display: none; }
.lp-smooth-in { width: 100%; margin: 8px 0 0; accent-color: #3f8ce8; }
.slip-chart .ax-g { font-weight: 700; }   /* G scale row of the acceleration layer */
/* legend entries are toggles: hidden data types faded and struck through */
.chart-legends [data-k] { cursor: pointer; user-select: none; border-radius: 3px; transition: opacity .15s; }
.chart-legends [data-k]:hover { color: var(--text); }
.chart-legends [data-k]:focus-visible { outline: 2px solid #3f8ce8; outline-offset: 2px; }
.chart-legends [data-k].is-off { opacity: .4; text-decoration: line-through; }
.lp-map-src { margin-top: -2px; }
/* ---------- Add MOTEC data: source modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(4, 6, 12, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-box { width: min(440px, 100%); background: var(--bg); border: 1px solid var(--grid); border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--grid); }
.modal-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.modal-opts { display: grid; gap: 10px; padding: 20px; }
.modal-opt {
  display: flex; align-items: center; gap: 14px; height: auto; padding: 14px 16px; text-align: left;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--grid); border-radius: 4px; color: var(--text); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.modal-opt:hover:not(:disabled), .modal-opt:focus-visible { background: rgba(63, 140, 232, .12); border-color: #3f8ce8; outline: none; }
.modal-opt:disabled { opacity: .7; cursor: progress; }
.modal-opt .material-icons { font-size: 26px; color: #3f8ce8; }
.mo-txt { display: flex; flex-direction: column; gap: 3px; }
.mo-txt b { font-size: 14px; font-weight: 700; }
.mo-sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.lp-acc-box { position: relative; height: 240px; }
.lp-acc-cv { display: block; }
/* ---------- Simulation tab ---------- */
.sim-panel[hidden] { display: none; }
.sim-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 4px 0 18px; }
.sim-bar.is-off .sim-pick { opacity: .4; pointer-events: none; }
.sim-pick { display: flex; align-items: center; gap: 6px; }
.sim-lbl { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.sim-sel { height: 32px; min-width: 200px; font-size: 13px; font-weight: 600; }
.sim-step:disabled { opacity: .3; cursor: default; }
.sim-info { color: var(--muted); font-size: 12px; font-weight: 600; margin-left: auto; }
.sim-empty { padding: 60px 0; text-align: center; color: var(--muted); }
.sim-empty[hidden], .sim-body[hidden] { display: none; }
.sim-empty .ico-btn { margin: 8px auto 0; background: rgba(255, 255, 255, .2); }
.sim-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.sim-h:not(:first-child) { margin-top: 30px; }
.sim-h-sub { text-transform: none; letter-spacing: 0; font-weight: 600; }
.sim-plot { position: relative; width: 100%; }
.sim-plot canvas { display: block; }
.sim-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 11px; font-weight: 600; color: var(--muted); margin: 0 0 6px; min-height: 22px; }
.sim-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.sim-sw { display: inline-block; width: 18px; height: 0; }
.sim-sw-dots { height: 6px; background: radial-gradient(circle, #36b2e3 1.5px, transparent 2px) 0 0 / 6px 6px repeat-x; }
.sim-sw-mu { border-top: 1px solid #f5d846; }
.sim-sw-tgt { border-top: 3px solid #fff; border-radius: 2px; }
.sim-scale i { display: inline-block; width: 90px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #2a3fae 0%, #2f6fe0 20%, #36b2e3 40%, #86d9b6 55%, #f5d846 70%, #f38e2e 85%, #e0282e 100%); }
.sim-bin { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; font-size: 11px; font-weight: 700; color: var(--text);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--grid); border-radius: 3px; }
.sim-bin i { width: 10px; height: 10px; border-radius: 2px; }
.sim-bin span { color: var(--muted); font-weight: 600; }
.sim-bin[aria-pressed="false"] { opacity: .4; }
.sim-none { color: var(--muted); }
.sim-h .lc { text-transform: none; }
/* Simulation tab, left column: its selectors, then the logged data's timeline / circuit map, then the map details */
#simSide[hidden] { display: none; }
.layout.sim-mode .side:not([hidden]) { display: flex; flex-direction: column; }
.layout.sim-mode #simSide { order: 1; }
.layout.sim-mode #sideLog { order: 3; }
.layout.sim-mode #mapDetails { order: 2; }
.layout.sim-mode .side-alloc-h, .layout.sim-mode #allocTbl, .layout.sim-mode #allocMsg { display: none; }
.layout.sim-mode .lp-side > :not(.lp-side-body) { display: none; }   /* Simulation: no show switch / smoothing; the filters below decide */
.sim-side { border-top: 0; margin-top: 0 !important; padding-top: 0 !important; }
.sim-side .side-h { margin: 0 0 8px; }
.sim-pick { margin-bottom: 16px; }
.sim-pick .side-sub { margin: 0 0 6px; }
.sim-pick-row { display: flex; align-items: center; gap: 6px; }
.sim-pick-row .sim-sel { flex: 1; min-width: 0; }
.sim-side.is-off .sim-pick { opacity: .4; pointer-events: none; }
.sim-side .sim-info { margin: 0; }
/* Simulation: empty state until MoTeC data is loaded (the two options of Add MOTEC data) */
.sim-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 80px 16px 40px; color: var(--muted); }
.sim-empty[hidden] { display: none; }
.sim-empty-ic { font-size: 40px; color: #3f8ce8; margin-bottom: 14px; }
.sim-empty-h { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--text); }
.sim-empty-p { margin: 0 0 22px; font-size: 13px; }
.sim-empty-opts { width: min(440px, 100%); padding: 0; }
.sim-sw-map { border-top: 3.5px solid; border-radius: 2px; }
.sim-legend .sim-sw-mu { border-top: 1.5px dashed; }
.sim-sw-tgt { border-top: 4px solid #fff; }
/* Simulation: riding mode switch (one at a time) and gear buttons (several, like the laps) */
.sim-modes { display: flex; }
.sim-modes button { flex: 1; }
.sim-gears .chip span { margin-left: 5px; font-weight: 600; opacity: .65; }
.sim-gears .chip.is-edit { box-shadow: inset 0 -2px 0 #fff; }   /* the gear whose map is edited (when several are on) */
/* Simulation selectors: label above the control */
.sim-side .sim-pick { display: block; margin-bottom: 16px; }
.sim-side .sim-pick .side-sub { margin: 0 0 8px; }
/* μ range slider: dots halfway between the μ levels; click a segment between two dots, hover shows it */
.lp-segs { position: absolute; left: 0; right: 0; top: 7px; height: 10px; pointer-events: none; }
.lp-dot { position: absolute; top: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(0, 0, 0, .25); }
.lp-seg-hover { position: absolute; top: -1px; height: 12px; border-radius: 4px; background: rgba(0, 0, 0, .1); }
.lp-seg-hover[hidden] { display: none; }
/* Simulation: of the logged data filters only μ (no Automatically adjust) and the laps / timeline / circuit map */
.layout.sim-mode .lp-side-body > :not(.lp-time):not(.lp-filter:has(.lp-mu)) { display: none !important; }
.layout.sim-mode .lp-filter:has(.lp-mu) .switch { display: none; }
/* reset icon in a label row (right-aligned): back to the default (all / nothing filtered); only shown when changed */
.reset-btn { margin-left: auto; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.reset-btn .material-icons { font-size: 16px; }
.reset-btn:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.reset-btn[hidden] { display: none; }
.lp-read + .reset-btn { margin-left: 6px; }
.sim-side .sim-sub { margin: 0 0 8px; }
.sim-side .sim-sub .side-sub { margin: 0; }
/* Simulation legend: entries hide / show their data (as the slip-target graph's legends) */
.sim-legend-top [data-k] { cursor: pointer; user-select: none; border-radius: 3px; transition: opacity .15s; }
.sim-legend-top [data-k]:hover { color: var(--text); }
.sim-legend-top [data-k]:focus-visible { outline: 2px solid #3f8ce8; outline-offset: 2px; }
.sim-legend-top [data-k].is-off { opacity: .4; text-decoration: line-through; }
.sim-legend-top .sim-scale { margin-left: 4px; display: inline-flex; align-items: center; gap: 5px; }
/* +- Buttons: left column with the example map and the factor / offset per level, then the logged data adjusters */
.user-side[hidden] { display: none; }
.layout.user-mode .side-alloc-h, .layout.user-mode #allocTbl, .layout.user-mode #allocMsg { display: none; }
.layout.user-mode .user-side { margin-top: 0; padding-top: 0; border-top: 0; }
.user-side .side-h { margin: 0 0 12px; }
.user-side .shift-top { display: flex; flex-direction: column; align-items: stretch; gap: 20px; margin: 0; }
.user-side .shift-top .mu-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: none; flex: none; }
.user-side .shift-pick { order: -1; }                                   /* example map first */
.user-side .shift-pick select { min-width: 0; width: 100%; }