/* ============================
   TrackMaker2: FINAL layout lock
   Match intended UI: Options | Catalogue | Canvas
   Fixes Catalogue/Grid stacking under Options by ensuring the DOM
   stays within .tm2-body and enforcing a stable 3-column layout.
   ============================ */
#trackmaker2-panel{ display:flex !important; flex-direction:column !important; }
#trackmaker2-panel .panel-header{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
#trackmaker2-panel .tm2-header-actions{ margin-left:auto !important; }
#trackmaker2-panel #trackmaker2-close.panel-close-x{
  margin-left:8px;
  width:32px;
  height:28px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color:#fff;
  cursor:pointer;
}
#trackmaker2-panel #trackmaker2-close.panel-close-x:hover{ background: rgba(255,255,255,0.14); }

#trackmaker2-panel .tm2-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns: 320px 340px 1fr !important;
  grid-template-rows: 1fr !important;
  gap:12px !important;
  align-items:stretch !important;
  overflow:hidden !important;
}

/* Options column */
#trackmaker2-panel .tm2-left{
  grid-column:1 !important;
  overflow:auto !important;
  min-width:0 !important;
}

/* Remove the old spacer column entirely (it caused dead space + confusion) */
#trackmaker2-panel .tm2-spacer{
  display:none !important;
}

/* Catalogue column */
#trackmaker2-panel .tm2-catalogue{
  grid-column:2 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
#trackmaker2-panel .tm2-cat-body{ flex:1 1 auto !important; min-height:0 !important; overflow:auto !important; }

/* Canvas column */
#trackmaker2-panel .tm2-right{
  grid-column:3 !important;
  min-width:0 !important;
  overflow:hidden !important;
  display:flex !important;
}


/* =========================================================
   TrackMaker2: visibility + header controls reliability

   Bug symptoms:
   - TM2 panel appears on page load even though it has class="hidden"
   - TM2 close (X) appears to do nothing

   Root cause:
   - Earlier CSS blocks set #trackmaker2-panel { display:flex !important; }
     which can override both the base .panel display:none and the .hidden
     display:none.

   Fix:
   - Force hidden to win.
   - Only show the panel when it is NOT hidden.
   ========================================================= */

#trackmaker2-panel.hidden{ display:none !important; }
#trackmaker2-panel:not(.hidden){ display:flex !important; flex-direction:column !important; }

#trackmaker2-panel,
#chaoracemaker-panel {
  position: absolute;
}

/* extracted from styles/03-panel-contract.css — Legacy TrackMaker controls family */
/* ============================================================
   ChaoKart — Track Maker
============================================================ */
.trackmaker-body{
  display:flex;
  gap:12px;
  height: calc(100% - 38px);
}
.trackmaker-left{
  width: 280px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
}

#tm-object-help .trackmaker-hint{
  font-size:12px;
  line-height:1.25;
}
.trackmaker-right{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#tm-canvas{
  width: 100%;
  height: 100%;
  background:#000;
  border:1px solid rgba(255,255,255,0.15);
  image-rendering: pixelated;
}
.trackmaker-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.trackmaker-row-2{
  display:flex;
  gap:10px;
}
.trackmaker-label{
  width:70px;
  font-size:12px;
  opacity:0.9;
}
.trackmaker-select{
  flex:1;
  background:#0f0f0f;
  color:#fff;
  border:1px solid rgba(255,255,255,0.2);
  padding:6px 8px;
  border-radius:6px;
}
.trackmaker-range{
  flex:1;
}
.trackmaker-val{
  width:36px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  opacity:0.9;
}
.trackmaker-btn{
  flex:1;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color:#fff;
  cursor:pointer;
}
.trackmaker-btn:hover{ background: rgba(255,255,255,0.10); }
.trackmaker-btn.danger{ border-color: rgba(255,80,80,0.35); }
.trackmaker-hint{
  font-size:12px;
  line-height:1.3;
  opacity:0.85;
  padding:8px;
  border:1px dashed rgba(255,255,255,0.18);
  border-radius:8px;
}
.trackmaker-caption{
  font-size:12px;
  opacity:0.8;
}

/* TrackMaker button variants */
.trackmaker-btn.primary{border-color:#66ccff;}


/* ===== moved from 03-panel-contract.css: Legacy TrackMaker1 removal guard ===== */
/* Legacy TrackMaker1 fully removed */

/* =========================================
   Panel-contract breakup pass31 — trackmaker/chao-race-maker spill
   ========================================= */

/* TRACKMAKER2: keep header actions left of pin/x and avoid overlap */
#trackmaker2-panel > .panel-header{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: var(--panel-header-h, 44px);
}

/* ============================
   Chao Race Maker (CRM)
   ============================ */
#chaoracemaker-panel{ display:flex; flex-direction:column; }
#chaoracemaker-panel .panel-header{ flex:0 0 auto; }
#chaoracemaker-panel .crm-body{ flex:1 1 auto; min-height:0; display:flex; gap:14px; padding:12px; overflow:hidden; }
#chaoracemaker-panel .crm-left{ width:330px; min-width:330px; display:flex; flex-direction:column; gap:10px; overflow:auto; padding-right:6px; }
#chaoracemaker-panel .crm-catalogue{ width:330px; min-width:330px; display:flex; flex-direction:column; gap:8px; overflow:hidden; background:rgba(10,14,24,0.76); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:10px; }
#chaoracemaker-panel .crm-right{ flex:1 1 auto; min-width:0; display:flex; overflow:hidden; }
#chaoracemaker-panel .crm-right canvas{ width:100% !important; height:100% !important; display:block; background:#0b1220; border:1px solid rgba(255,255,255,0.16); border-radius:14px; image-rendering:pixelated; }
.crm-row{display:flex; align-items:center; gap:8px;}
.crm-row-2{justify-content:space-between;}
.crm-sub{flex:1; display:flex; align-items:center; gap:6px;}
.crm-label{min-width:78px; font-size:13px; color:rgba(255,255,255,0.86);}
.crm-input,.crm-select{flex:1; min-width:0; background:rgba(14,18,28,0.85); color:#fff; border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:8px 10px; font-size:13px;}
.crm-check{font-size:13px; color:rgba(255,255,255,0.86); user-select:none;}
.crm-btn{appearance:none; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.08); color:#fff; border-radius:10px; padding:9px 12px; font-size:13px; cursor:pointer;}
.crm-btn:hover{ background:rgba(255,255,255,0.12); }
.crm-small{font-size:12px; line-height:1.35; color:rgba(255,255,255,0.7);}
.crm-hint{font-size:12px; line-height:1.45; color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px 12px;}
.crm-cat-head{display:flex; flex-direction:column; gap:8px;}
.crm-cat-title{font-size:15px; font-weight:700; color:#fff;}
.crm-cat-tabs{display:flex; flex-wrap:wrap; gap:6px;}
.crm-cat-tab{appearance:none; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); color:#fff; border-radius:999px; padding:7px 12px; font-size:12px; cursor:pointer;}
.crm-cat-tab.active{background:rgba(110,170,255,0.22); border-color:rgba(110,170,255,0.45);}
.crm-cat-body{flex:1 1 auto; min-height:0; overflow:auto;}
.crm-cat-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.crm-cat-item{display:flex; flex-direction:column; gap:8px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); border-radius:14px; padding:10px; cursor:pointer; min-height:110px;}
.crm-cat-item.active{outline:2px solid rgba(110,170,255,0.55); background:rgba(110,170,255,0.14);}
.crm-cat-preview{height:56px; border-radius:10px; border:1px solid rgba(255,255,255,0.10); background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); position:relative; overflow:hidden;}
.crm-cat-name{font-size:12px; line-height:1.3; color:#fff;}