/*
  tokens.css — Arclae Course Studio design system.
  A small, tool-oriented token + component layer (Loop palette) shared by the Studio. Dark, spacious,
  Figma/Illustrator-like: a top bar, a left tool rail, a canvas, and a right inspector.
*/
:root{
  --bg:#0A140D; --bg2:#0e2415; --panel:#122B1A; --panel2:#173726;
  --line:#1f3a29; --line2:#2a4d36;
  --lime:#C2F03C; --cream:#EDEFE6; --sage:#9DB1A0; --amber:#F2B838; --red:#E5544B;
  --radius:10px; --radius-lg:16px;
  --rail:56px; --topbar:52px; --inspector:320px;
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,Monaco,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--cream);font-family:var(--font);font-size:14px;overflow:hidden}

/* --- buttons --- */
.btn{background:var(--panel2);color:var(--cream);border:1px solid var(--line2);border-radius:var(--radius);
  padding:7px 12px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.12s}
.btn:hover{border-color:var(--lime);color:var(--lime)}
.btn.primary{background:var(--lime);color:#102016;border-color:var(--lime);font-weight:700}
.btn.primary:hover{filter:brightness(1.05);color:#102016}
.btn.ghost{background:transparent}
.btn.danger:hover{border-color:var(--red);color:var(--red)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.sm{padding:4px 8px;font-size:12px}
/* Lucide icons inside buttons (same outline set/style as the Veo app; colour follows the button via currentColor) */
.btn svg{width:15px;height:15px;flex:none}
.btn.icon{padding:6px}
.btn.sm.icon{padding:4px}

/* --- inputs --- */
input,select{background:var(--bg2);color:var(--cream);border:1px solid var(--line2);border-radius:8px;
  padding:7px 9px;font-size:13px;font-family:var(--font);width:100%}
input:focus,select:focus{outline:none;border-color:var(--lime)}
label.fld{display:block;margin:0 0 10px}
label.fld > span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sage);margin:0 0 4px}
input[type=color]{padding:2px;height:30px;width:44px}

/* --- chips + hints --- */
.chip{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--panel2);color:var(--sage);
  border:1px solid var(--line2)}
.chip.done{background:var(--lime);color:#102016;border-color:var(--lime)}
.chip.warn{background:var(--amber);color:#102016;border-color:var(--amber)}
.hint{color:var(--sage);font-size:12px;line-height:1.45}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}

/* --- app shell --- */
/* Panel columns are `auto` so the rail + inspector size to their own (JS-driven) width; the canvas takes the
   rest. Width changes animate with the Veo easing, EXCEPT while dragging (the .no-anim class is toggled on). */
.shell{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:var(--topbar) 1fr;
  grid-template-areas:"top top top" "rail canvas inspector";height:100vh}
.topbar{grid-area:top;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.rail{grid-area:rail;position:relative;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;width:190px;overflow:hidden;
  transition:width 280ms cubic-bezier(0.32,0.72,0,1)}
.canvas{grid-area:canvas;position:relative;background:var(--bg2)}
.inspector{grid-area:inspector;position:relative;background:var(--panel);border-left:1px solid var(--line);
  width:320px;transition:width 280ms cubic-bezier(0.32,0.72,0,1)}
.no-anim{transition:none !important}

/* the scrollable content areas inside each panel (the resize handle + toggle sit outside these) */
.rail-tools{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:4px;padding:10px 8px}
.inspector-body{position:absolute;inset:0 0 0 0;overflow:auto;padding:14px}

/* --- drag-to-resize edge handles --- */
.resizer{position:absolute;top:0;bottom:0;width:10px;z-index:30;cursor:col-resize;touch-action:none}
.resizer .bar{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
  background:transparent;transition:background .12s}
.resizer:hover .bar,.resizer.dragging .bar{background:var(--lime)}
.rail .resizer{right:-5px}
.inspector .resizer{left:-5px}

/* --- collapse toggles (chevrons) --- */
.paneltoggle{position:absolute;z-index:31;width:22px;height:22px;border-radius:6px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--sage);cursor:pointer;font-size:12px;line-height:1;display:flex;
  align-items:center;justify-content:center}
.paneltoggle:hover{color:var(--lime);border-color:var(--lime)}
.paneltoggle svg{width:14px;height:14px;transition:transform 200ms cubic-bezier(0.32,0.72,0,1)}
.rail .paneltoggle{left:8px;bottom:8px}
.inspector .paneltoggle{right:8px;top:8px}
/* the toggle chevron flips direction when the panel is collapsed (no JS glyph-swap) */
.rail.collapsed .paneltoggle svg,.inspector.collapsed .paneltoggle svg{transform:rotate(180deg)}

/* tool rail buttons — icon + label; label hides when the rail is collapsed */
.tool{height:40px;border-radius:10px;background:transparent;border:1px solid transparent;color:var(--cream);
  cursor:pointer;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 10px;
  transition:background .12s,color .12s;white-space:nowrap;text-align:left}
.tool .ic{flex:none;width:20px;display:flex;align-items:center;justify-content:flex-start}
.tool .ic svg{width:18px;height:18px}
.tool .label{flex:1;font-size:13px;text-align:left;overflow:hidden;text-overflow:ellipsis}
.tool .kbd{flex:none;font-size:10px;color:var(--sage);border:1px solid var(--line2);border-radius:4px;padding:1px 4px}
.tool:hover{background:var(--panel2)}
.tool.active{background:var(--lime);color:#102016;border-color:var(--lime)}
.tool.active .kbd{color:#102016;border-color:rgba(16,32,22,.4)}

/* collapsed rail: icons only, centered; labels/shortcuts hidden (native title = tooltip) */
.rail.collapsed .rail-tools{padding:10px 8px}
.rail.collapsed .tool{justify-content:center;padding:0;width:40px;margin:0 auto}
.rail.collapsed .tool .ic{width:auto;justify-content:center}
.rail.collapsed .tool .label,.rail.collapsed .tool .kbd{display:none}

/* collapsed inspector: thin strip with just the reopen chevron */
.inspector.collapsed{width:16px !important}
.inspector.collapsed .inspector-body{display:none}
.inspector.collapsed .resizer{cursor:e-resize}

/* styled-view toggle (active = lime) + sun time-of-day control */
.btn.icon.on{background:var(--lime);color:#102016;border-color:var(--lime)}
.sunctl{display:flex;align-items:center;gap:6px;color:var(--sage)}
.sunctl svg{width:15px;height:15px;color:var(--amber)}
.sunctl input[type=range]{width:120px;height:4px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,#26405c,var(--amber),#eaf2c9);border-radius:99px;padding:0;border:none}
.sunctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--cream);border:2px solid var(--panel);cursor:pointer}
.sunctl input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--cream);border:2px solid var(--panel);cursor:pointer}
/* terrain relief control — narrower, with an earthy (shadow→ridge) track + green mountain glyph */
.terrainctl svg{color:#7bbf6a}
.terrainctl input[type=range]{width:90px;background:linear-gradient(90deg,#2a2118,#6b5636,#d9c9a0)}
/* dawn/dusk colour wash over the map — subtle, soft-light, tinting the imagery + terrain (not the UI) */
#skyWash{position:absolute;inset:0;pointer-events:none;z-index:390;opacity:0;mix-blend-mode:soft-light;
  transition:opacity .35s ease, background-color .35s ease}
/* sun dial + clock readout beside the time slider */
.sundial{display:flex;align-items:center;gap:6px}
.sundial #sunDial{width:30px;height:30px;display:block}
.sunreadout{display:flex;flex-direction:column;line-height:1.1}
.sunreadout #sunClock{font-size:13px;font-variant-numeric:tabular-nums}
.sunreadout #sunFacing{font-size:10px}
/* downhill fall-line arrows drawn inside greens (slope overlay) */
.slope-arrow{width:16px;height:16px;font-size:15px;line-height:16px;text-align:center;color:#fff;
  text-shadow:0 0 2px #000,0 0 2px #000;font-weight:700}
/* slope-overlay legend (bottom-left, only while the overlay is on) */
.slope-legend{position:absolute;z-index:600;bottom:16px;left:12px;background:rgba(10,20,13,.9);
  border:1px solid var(--line2);border-radius:10px;padding:8px 10px;box-shadow:var(--shadow)}
.slope-legend .sl-title{font-size:11px;color:var(--sage);margin:0 0 6px}
.slope-legend .sl-ramp{display:flex;gap:0;border-radius:5px;overflow:hidden}
.slope-legend .sl-ramp span{font-size:10px;color:#102016;padding:2px 6px;font-weight:600;white-space:nowrap}
.slope-legend .sl-note{font-size:10px;color:var(--sage);margin:6px 0 0}

/* top bar bits */
.brand{font-weight:800;letter-spacing:.02em}
.brand .dot{color:var(--lime)}
.savestate{font-size:12px;color:var(--sage)}
.spacer{flex:1}

/* inspector sections */
.sect{border-bottom:1px solid var(--line);padding:0 0 14px;margin:0 0 14px}
.sect h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin:0 0 10px}
.row{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.row .grow{flex:1}
.layer{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer}
.layer:hover{background:var(--panel2)}
.layer.sel{background:var(--panel2);outline:1px solid var(--lime)}
.layer.off .ic-glyph,.layer.off .sw,.layer.off .grow{opacity:.45}
.sw{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.35)}
/* per-hole Layers overview: grouped sub-lists + glyph icons + read-only [auto] tag */
.layer-group{margin:0 0 10px}
.layer-group h4{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sage);margin:6px 0 4px}
.layer .ic-glyph{width:14px;text-align:center;font-size:13px;flex:none;line-height:1}
.layer .tag{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--sage);
  border:1px solid var(--line2);border-radius:99px;padding:1px 6px}

/* "What am I drawing?" type palette — swatch buttons, the active one lime-outlined */
.palette{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.swatch-btn{display:flex;align-items:center;gap:7px;padding:6px 8px;background:var(--panel2);color:var(--cream);
  border:1px solid var(--line2);border-radius:8px;font-size:12px;cursor:pointer;text-align:left;transition:.12s}
.swatch-btn:hover{border-color:var(--lime)}
.swatch-btn.active{border-color:var(--lime);outline:1px solid var(--lime);background:var(--panel)}
.swatch-btn .sw{width:14px;height:14px;flex:none}
.swatch-btn .lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* colour dot echoing the active draw type in the map badge + Finish bar */
.draw-dot{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;
  margin-right:2px;border:1px solid rgba(255,255,255,.4)}
/* selected-feature properties block (click a layer / shape to edit it here) */
.featprops{border:1px solid var(--lime);border-radius:var(--radius);padding:12px;background:var(--panel2)}
.featprops .fp-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;font-weight:600}

/* login */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{width:340px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow)}
.login-card h1{font-size:20px;margin:0 0 4px}
.login-card .sub{color:var(--sage);font-size:13px;margin:0 0 18px}
.err{color:var(--red);font-size:12px;min-height:16px;margin:6px 0 0}

/* bezier pen + curve editor */
body.penning .leaflet-container{cursor:crosshair}
.bz-anchor{width:12px;height:12px;border-radius:50%;background:#102016;border:2px solid var(--lime);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.bz-anchor.corner{border-radius:2px}                 /* square = corner, round = smooth */
.bz-handle{width:11px;height:11px;border-radius:50%;background:#fff;border:1px solid var(--panel);box-shadow:0 0 0 1px rgba(0,0,0,.4)}

/* map controls overlay */
.map-badge{position:absolute;z-index:500;top:10px;left:10px;background:rgba(10,20,13,.8);border:1px solid var(--line2);
  border-radius:8px;padding:6px 10px;font-size:12px;color:var(--cream)}
/* pen toolbar — floats bottom-centre while drawing so Finish/Cancel are always one click away */
.penbar{position:absolute;z-index:600;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;
  gap:10px;background:rgba(10,20,13,.92);border:1px solid var(--line2);border-radius:12px;padding:8px 12px;
  box-shadow:var(--shadow)}
.penbar-count{font-size:12px;color:var(--sage);font-variant-numeric:tabular-nums;min-width:58px}
.penbar-count.ready{color:var(--lime)}
/* the first anchor grows into a "click to close" ring once the shape has enough points */
.bz-first{width:16px;height:16px;border-radius:50%;background:rgba(194,240,60,.25);border:2px solid var(--lime);
  box-shadow:0 0 0 3px rgba(194,240,60,.18)}
.measure-label{background:var(--lime);color:#102016;font-weight:700;font-size:12px;padding:2px 6px;border-radius:6px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--lime);
  color:var(--cream);padding:9px 14px;border-radius:10px;z-index:1000;box-shadow:var(--shadow)}