/* T-TRAK Track Designer — additional styles on top of style.css */

.designer-body{
  height:100vh;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--bg-2);
}
.designer-header{flex-shrink:0}
.designer-header .meta a{font-size:.85rem}

.designer-shell{
  flex:1;display:grid;grid-template-columns:280px 1fr 340px;
  min-height:0;border-top:1px solid var(--rule);
}
@media (max-width:1100px){.designer-shell{grid-template-columns:240px 1fr 280px}}
@media (max-width:820px){
  .designer-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;overflow:auto}
  .d-palette,.d-stats{max-height:40vh;overflow:auto}
}

/* ===== PALETTE (left) ===== */
.d-palette{
  background:var(--card);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;min-height:0;
}
.d-palette-head{
  padding:14px 18px 10px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.d-palette-head h2{
  font-family:'Fraunces',serif;font-size:1.1rem;font-weight:500;
  color:var(--ink);margin:0;
}
.d-palette-head select{
  font-family:inherit;font-size:.86rem;padding:6px 8px;
  border:1px solid var(--rule);background:var(--bg-2);color:var(--ink);
}
.d-palette-help{
  padding:10px 18px;font-size:.78rem;color:var(--ink-2);
  background:var(--bg-2);border-bottom:1px solid var(--rule);
  line-height:1.5;
}
.d-palette-list{flex:1;overflow:auto;padding:8px;min-height:0}
.d-palette-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:4px;
  background:var(--bg);border:1px solid var(--rule);
  cursor:grab;transition:background .12s,border-color .12s;
}
.d-palette-item:hover{background:var(--card);border-color:var(--purple-3)}
.d-palette-item:active{cursor:grabbing;background:var(--purple-soft);border-color:var(--purple)}
.d-palette-item svg{flex-shrink:0;width:54px;height:36px}
.d-palette-item .pi-meta{flex:1;min-width:0}
.d-palette-item .pi-name{
  font-size:.84rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.d-palette-item .pi-dim{
  font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--ink-3);
}

.d-palette-foot{
  border-top:1px solid var(--rule);padding:14px 18px;background:var(--bg-2);
}
.d-palette-foot h3{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-3);margin:0 0 10px;font-family:'Inter',sans-serif}
.d-actions{display:flex;gap:6px;margin-bottom:8px}
.d-btn{
  flex:1;padding:8px 10px;font-size:.82rem;font-family:inherit;
  background:var(--card);color:var(--ink);border:1px solid var(--rule);
  cursor:pointer;transition:background .12s,border-color .12s;
}
.d-btn:hover{background:var(--bg);border-color:var(--purple-3)}
.d-btn:active{background:var(--purple-soft)}
.d-btn-primary{background:var(--purple);color:#fff;border-color:var(--purple)}
.d-btn-primary:hover{background:var(--purple-deep);border-color:var(--purple-deep)}
.d-btn-primary.active{background:var(--good);border-color:var(--good)}

/* ===== CANVAS (center) ===== */
.d-canvas-wrap{
  position:relative;background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;min-height:0;
}
.d-toolbar{
  padding:8px 16px;background:var(--card);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:14px;font-size:.82rem;color:var(--ink-2);
  min-height:38px;
}
.d-tool-label{font-family:'JetBrains Mono',monospace;font-size:.78rem}
.d-tool-spacer{flex:1}
.d-zoom-readout{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;
  padding:2px 8px;background:var(--bg);border:1px solid var(--rule);
}
#board{
  flex:1;width:100%;height:100%;display:block;cursor:default;
  background:var(--bg);
  touch-action:none;
}
#board.dragging{cursor:grabbing}
#board.panning{cursor:grab}
.d-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.d-empty-card{
  background:var(--card);border:1px solid var(--rule);padding:30px 36px;max-width:420px;
  text-align:center;
}
.d-empty-card h2{
  font-family:'Fraunces',serif;font-size:1.4rem;font-weight:500;
  color:var(--ink);margin:0 0 12px;
}
.d-empty-card p{font-size:.92rem;color:var(--ink-2);margin:0 0 8px}
.d-empty-card .muted{font-size:.82rem;color:var(--ink-3)}
.d-empty-card kbd{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;
  background:var(--bg);border:1px solid var(--rule);padding:2px 6px;
}

/* SVG module rendering */
.module-group{cursor:grab}
.module-group.selected .module-outline{stroke:var(--purple);stroke-width:2}
.module-group.dragging{cursor:grabbing;opacity:.85}
.module-outline{fill:var(--card);stroke:var(--ink);stroke-width:1.4}
.module-track{stroke:var(--ink);stroke-width:1.2;fill:none}
.module-foot{fill:var(--card);stroke:var(--ink);stroke-width:0.8}
.module-skyboard{fill:url(#skyboard-hatch);stroke:var(--ink);stroke-width:0.8}
.module-label{font-family:'JetBrains Mono',monospace;font-size:8px;fill:var(--ink-3);pointer-events:none}
.anchor-dot{fill:var(--purple);stroke:#fff;stroke-width:1.5;cursor:pointer;opacity:0}
.module-group:hover .anchor-dot,.module-group.selected .anchor-dot{opacity:0.7}
.anchor-dot.snap-target{opacity:1;fill:var(--good);stroke:var(--good)}
.anchor-dot.snap-target circle{r:8}
.ghost-module{opacity:.5;pointer-events:none}
.ghost-module .module-outline{stroke-dasharray:4 3;stroke:var(--purple);fill:rgba(79,45,127,.06)}
.train-marker{fill:var(--red);stroke:#fff;stroke-width:1.5}

.trestle{fill:none;stroke:var(--brass);stroke-width:1;stroke-dasharray:6 4;opacity:.6}
.trestle-label{font-family:'JetBrains Mono',monospace;font-size:9px;fill:var(--brass);opacity:.7}

/* ===== STATS (right) ===== */
.d-stats{
  background:var(--card);border-left:1px solid var(--rule);
  display:flex;flex-direction:column;min-height:0;
}
.d-stats-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--rule);background:var(--bg-2);
  flex-shrink:0;
}
.d-tab{
  flex:1;padding:11px 8px;font-size:.78rem;font-family:inherit;
  background:transparent;color:var(--ink-2);border:0;border-bottom:3px solid transparent;
  cursor:pointer;transition:color .12s,border-color .12s;
}
.d-tab:hover{color:var(--ink)}
.d-tab.on{color:var(--purple);border-bottom-color:var(--purple);background:var(--card)}
.d-stats-body{flex:1;overflow:auto;padding:18px 20px;min-height:0}
.d-pane{display:none}
.d-pane.on{display:block}

.d-stat-block{
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.d-stat-block:last-child{border-bottom:0}
.d-stat-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;color:var(--ink-3);margin-bottom:4px;
}
.d-stat-value{
  font-family:'Fraunces',serif;font-size:1.4rem;font-weight:500;color:var(--ink);
}
.d-stat-value.mono{font-family:'JetBrains Mono',monospace;font-size:1.05rem}
.d-section-h{
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink-3);margin:18px 0 10px;font-family:'Inter',sans-serif;
}
.d-section-h:first-child{margin-top:0}

.d-validation{list-style:none;padding:0;margin:0}
.d-validation li{
  padding:8px 10px;margin-bottom:6px;font-size:.84rem;
  background:var(--bg-2);border-left:3px solid var(--ink-3);
}
.d-validation li.ok{border-left-color:var(--good);color:var(--ink)}
.d-validation li.warn{border-left-color:var(--warn);color:var(--ink)}
.d-validation li.crit{border-left-color:var(--crit);color:var(--ink)}
.d-validation li.info{border-left-color:var(--purple-3);color:var(--ink-2)}

.d-table{width:100%;border-collapse:collapse;font-size:.82rem}
.d-table th{
  text-align:left;font-weight:600;color:var(--ink-2);
  padding:8px 6px;border-bottom:1px solid var(--rule);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
}
.d-table td{padding:7px 6px;border-bottom:1px solid var(--rule);vertical-align:top}
.d-table td.num,.d-table th.num{text-align:right;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.d-table tr:last-child td{border-bottom:0}
.d-table tbody tr:hover{background:var(--bg-2)}

.d-form-row{margin-bottom:10px}
.d-form-row label{display:block;font-size:.78rem;color:var(--ink-2);font-weight:600}
.d-form-row input{
  width:100%;padding:7px 10px;font-family:inherit;font-size:.88rem;
  border:1px solid var(--rule);background:var(--bg-2);color:var(--ink);margin-top:4px;
}
.d-form-row input:focus{outline:0;border-color:var(--purple);background:#fff}

.muted{color:var(--ink-2)}
.small{font-size:.84rem}

/* toast / notification */
.d-toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 22px;font-size:.88rem;
  z-index:1000;opacity:0;transition:opacity .2s;pointer-events:none;
}
.d-toast.show{opacity:1}

/* print */
.print-only{display:none}
@media print{
  .designer-body{height:auto;overflow:visible}
  .designer-shell,.designer-header,.d-palette,.d-stats,.d-toolbar{display:none!important}
  .d-canvas-wrap{display:none}
  .print-only{display:block;padding:0;color:#000;background:#fff}
  .print-only header{margin-bottom:18pt;padding-bottom:8pt;border-bottom:1pt solid #000}
  .print-only h1{font-family:'Fraunces',serif;font-size:24pt;margin:0 0 4pt;font-weight:500}
  .print-only .meta{font-size:10pt;color:#666}
  .print-only h2{font-family:'Fraunces',serif;font-size:14pt;margin:18pt 0 6pt;page-break-after:avoid}
  .print-only h3{font-size:11pt;margin:10pt 0 4pt}
  .print-only table{width:100%;border-collapse:collapse;font-size:9pt;margin:6pt 0}
  .print-only table th,.print-only table td{padding:3pt 5pt;border:.5pt solid #000;text-align:left}
  .print-only table .num{text-align:right;font-family:'JetBrains Mono',monospace}
  .print-only svg{max-width:100%;height:auto;border:.5pt solid #000;background:#fff}
  .print-only section{margin-bottom:18pt;page-break-inside:avoid}
  @page{size:A4 portrait;margin:15mm}
}