/* Theme tokens (carried over from FinckTech "winter light" until EnduEdit has its own design). Zone and free-ride colours are the same in both themes. */
:root{color-scheme:light;--bg:#f6f8fa;--surface:#fff;--line:#dfe5ea;--text:#18222a;--text2:#56636e;--accent:#2f6e99;--accent-hover:#1f5276;--accent-soft:#e4eef5;--on-accent:#fff;--font:"Jost",system-ui,sans-serif;--z1:#aeb8bf;--z2:#56b4f1;--z3:#76cd84;--z4:#f2d354;--z5:#ed9549;--z6:#de6267;--free-ride:#b8a6db;--chart-ink:#18222a}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#0e1317;--surface:#161d22;--line:#26313a;--text:#e6edf2;--text2:#98a7b2;--accent:#8cc3e6;--accent-hover:#b5daf0;--accent-soft:#1c2e3a;--on-accent:#0e1317}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0e1317;--surface:#161d22;--line:#26313a;--text:#e6edf2;--text2:#98a7b2;--accent:#8cc3e6;--accent-hover:#b5daf0;--accent-soft:#1c2e3a;--on-accent:#0e1317}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.45;font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased}
h1,p{margin:0}

footer{max-width:1200px;margin:0 auto 24px;padding:0 24px;font-size:13px;color:var(--text2)}footer a{color:inherit}
header{height:64px;border-bottom:1px solid var(--line)}.top{max-width:1200px;margin:auto;padding:10px 24px;display:flex;align-items:center;gap:20px}.brand{font-size:15px;letter-spacing:.14em;font-weight:500;text-decoration:none;color:var(--text)}#theme{margin-left:auto}main{max-width:1200px;margin:24px auto;padding:0 24px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
button{font:inherit;min-height:44px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);padding:10px 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:hover{border-color:var(--accent)}button:disabled{opacity:.4;cursor:default}.primary{background:var(--accent);color:var(--on-accent)}#theme{width:44px;border-radius:99px;padding:8px}.icon{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.shape{width:32px;height:28px;flex-shrink:0;fill:var(--block-color,var(--accent));stroke:var(--text2);stroke-width:.6}
.metadata{display:grid;grid-template-columns:2fr .8fr .8fr .7fr .7fr;gap:16px;align-items:end}.metric{padding:0 8px}.metric span,label{color:var(--text2);font-size:13px}.metric span{display:block}.metric strong{font-weight:300;font-size:28px;line-height:44px}label{display:flex;flex-direction:column;gap:4px}input{width:100%;min-width:0;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:44px}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hint{font-size:13px;color:var(--text2)}.wide{grid-column:1/-1}.empty{color:var(--text2);text-align:center;font-size:14px}
.editor-error{font-size:13px;color:var(--text);margin:4px 0;flex-basis:100%;border-left:2px solid var(--accent);padding-left:8px}

/* File actions, browser drafts, and editing history have distinct places. */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.action-group{display:flex;gap:6px;align-items:center}
.toolbar button{font-size:14px;min-height:44px;padding:10px 14px}
.toolbar .primary{border-color:var(--accent);padding-inline:18px;font-weight:500}
.toolbar .primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
.draft-actions{padding-left:16px;border-left:1px solid var(--line)}
.other-actions{margin-left:auto}
.other-actions button{background:transparent}

/* Timeline */
.chart-card{position:relative;margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.chart-card.drop-ready{outline:2px dashed var(--accent);outline-offset:2px}.chart-card.remove-ready{outline:2px dashed var(--z6);outline-offset:2px}
.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 8px 6px}
.chart-heading>span{font-size:13px;color:var(--text2)}
.history-actions{display:flex;gap:4px}
.history-actions button{width:44px;padding:10px;background:transparent;border-color:transparent}
.history-actions button:hover:not(:disabled){border-color:var(--line);background:var(--accent-soft)}
.plot{overflow-x:auto;scrollbar-color:var(--line) var(--surface)}
#chart{width:100%;display:block;touch-action:none;user-select:none}#chart .grid{stroke:var(--line)}#chart text{fill:var(--text2);font-size:13px}
#chart .time-grid{stroke-dasharray:3 4;pointer-events:none}#chart .time-tick{font-size:11px;pointer-events:none}
#chart polygon{cursor:inherit;stroke:var(--surface);stroke-width:1}#chart polygon.selected{vector-effect:non-scaling-stroke}
#chart .selection-outline{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
#chart.block-in-hand polygon.selected,#chart.block-in-hand .selection-outline{opacity:.3}
/* Bar label font sizes are set inline to fit each bar. */
#chart .bar-label{fill:var(--chart-ink);font-weight:500;pointer-events:none}#chart .bar-label.outside{fill:var(--text)}
#chart .bar-power{font-weight:600}#chart .bar-metric{font-weight:400}
#chart .ramp-handle{fill:transparent;stroke:none;cursor:ns-resize}
#chart .ramp-dot{fill:var(--surface);stroke:var(--text2);stroke-width:1;pointer-events:none}
#chart .ramp-handle:hover+.ramp-dot,#chart .ramp-handle:focus-visible+.ramp-dot{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
#chart .resize-cue{fill:none;stroke:var(--accent);stroke-width:3;pointer-events:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
#chart .resize-cue.subtle{opacity:.45}
#timeline{text-align:right;margin-top:4px}
.selected-details{border-top:1px solid var(--line);padding:12px 6px 4px;font-size:14px;line-height:1.6;color:var(--text);overflow-wrap:anywhere}
.selected-details strong{font-weight:500;display:block;margin-bottom:2px}
.selected-details[hidden]{display:none}

/* Drag feedback */
.drag-ghost{position:fixed;z-index:1000;pointer-events:none;display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text)}.drag-ghost.valid-drop{border-color:var(--accent)}
.drop-marker{position:absolute;top:20px;bottom:40px;border-left:2px dashed var(--accent);pointer-events:none}
.chart-order-marker{border-left:3px solid var(--accent);top:70px;bottom:85px}
.chart-order-marker::before,.chart-order-marker::after{content:"";position:absolute;left:-5px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.chart-order-marker::before{top:0}.chart-order-marker::after{bottom:0}
.grabbed-block{flex-direction:column;gap:5px;padding:6px;cursor:grabbing;border-color:var(--accent)}
.grabbed-block.remove-pending{border-color:var(--z6);border-width:2px}
.drag-feedback{font-size:12px;white-space:nowrap;color:var(--text)}
.grab-preview{width:130px;height:110px;display:block;overflow:hidden}
.grab-preview text{fill:var(--chart-ink);font-size:9px}
.grab-preview .grid,.grab-preview .time-tick{display:none}

/* Palette */
.palette{display:flex;flex-wrap:wrap;gap:8px}.palette>button{flex-direction:column;gap:3px;font-size:13px;min-width:68px;padding:8px 12px;border-bottom:3px solid var(--block-color,var(--line))}.palette>button .shape{width:34px;height:28px}.palette>button small{font-size:10px;color:var(--text2)}
.palette>button[data-add]{cursor:grab;touch-action:none;user-select:none}.palette>button[data-add]:active{cursor:grabbing}

/* Block list and settings */
#blocks{margin-top:20px;display:grid;gap:8px}
.block-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;border:1px solid var(--line);border-radius:14px;padding:6px;background:var(--surface)}.block-row>button:first-child{flex:1;justify-content:flex-start;text-align:left;border:0;background:transparent}.block-row small{display:block;color:var(--text2);font-size:13px}
.block-row.active{border-color:var(--accent);outline:1px solid var(--accent)}
.block-row .block-select{cursor:grab;touch-action:pan-x;user-select:none}.block-row .block-select:active{cursor:grabbing}.block-row.reordering{opacity:.45}.block-row.insert-before::before,.block-row.insert-after::after{content:"";position:absolute;left:0;right:0;border-top:2px solid var(--accent);pointer-events:none}.block-row.insert-before::before{top:-5px}.block-row.insert-after::after{bottom:-5px}.row-ghost{max-width:360px}.row-ghost small{display:block;color:var(--text2)}
.block-row form{flex-basis:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px 10px;border-top:1px solid var(--line)}.block-row.active form{border-top-color:var(--accent)}
#settings .hint{margin:0}#settings .palette>button{flex-direction:row;min-width:0;border-bottom-width:1px;font-size:14px}.event{grid-column:1/-1;display:grid;grid-template-columns:100px 1fr 44px;gap:8px}
.duration-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.duration-control{display:flex;align-items:center;gap:4px;min-width:0}
.duration-control input{flex:1;min-width:0;text-align:center;padding-inline:4px}
.duration-control button{flex:0 0 44px;width:44px;padding:8px;font-size:20px;line-height:1;border-radius:10px}

@media(max-width:720px){
 main{padding:0 16px;margin:16px auto}footer{padding:0 16px}.top{padding:10px 16px;gap:10px}.brand{font-size:13px}
 .metadata{grid-template-columns:1fr 1fr;gap:10px}.metadata>label:first-child{grid-column:1/-1}.metric{padding:0}
 .toolbar{gap:10px;display:grid;grid-template-columns:1fr 1fr}
 .file-actions{grid-column:1/-1}
 .toolbar button{flex:1;font-size:13px;padding:9px 10px;gap:5px}
 .file-actions #download{flex:1.4}
 .draft-actions{padding-left:0;border-left:0}
 .draft-actions button{padding-inline:5px;font-size:12px;gap:4px}.draft-actions .icon{width:16px;height:16px}
 .other-actions{margin-left:0}
 .action-group{gap:6px;min-width:0}
 .chart-card{padding:6px}.chart-heading{padding:0 0 6px 6px}
 #chart{min-width:800px}.plot{padding-bottom:8px}
 .palette{gap:6px}.palette>button{min-width:58px;flex:1;padding:6px 8px}
 .block-row form{grid-template-columns:1fr 1fr}.block-row small{font-size:12px}.event{grid-template-columns:80px 1fr 44px}
}