/* The Tool Bakery - Pyramid Builder Online (Modern Theme) */
:root{
  --ttb-bg: #0f1115;
  --ttb-card: #161a22;
  --ttb-muted: #9aa3b2;
  --ttb-text: #e6e8ec;
  --ttb-accent: #7aa2ff;
  --ttb-accent-2: #7ff0d9;
  --ttb-line: #2a2f3a;
  --ttb-border: #1f2430;
  --ttb-danger: #ff7182;
  --ttb-shadow: 0 10px 30px rgba(0,0,0,.35);
}

html, body{ background: var(--ttb-bg); color: var(--ttb-text); }
.ttb-tool{ max-width: 980px; margin: 32px auto; padding: 0 16px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.ttb-title{ font-size: 28px; margin: 0 0 6px; }
.ttb-subtitle{ color: var(--ttb-muted); margin: 0 0 16px; }

.ttb-card{
  background: var(--ttb-card);
  border: 1px solid var(--ttb-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--ttb-shadow);
  margin: 18px 0;
}
.ttb-h2{ margin: 0 0 12px; font-size: 20px; color:#fff; }
.ttb-divider{ height: 1px; background: var(--ttb-border); margin: 22px 0; }

.ttb-upload-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.ttb-help{ color: var(--ttb-muted); margin-top: 8px; font-size: 14px; }
.ttb-msg{ margin-top: 8px; font-size: 14px; color: var(--ttb-accent-2); }

/* Buttons */
.ttb-actions, .ttb-actions-row{ display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.ttb-btn{
  background: #232a36; color: var(--ttb-text);
  border: 1px solid var(--ttb-border);
  border-radius: 12px; padding: 10px 14px;
  cursor: pointer; font-weight: 600;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
.ttb-btn:hover{ background:#2a3240; border-color:#2f3746; }
.ttb-btn:active{ transform: translateY(1px); }
.ttb-btn.primary{ background: linear-gradient(135deg, var(--ttb-accent), var(--ttb-accent-2)); color:#081015; border-color:transparent; }
.ttb-btn.ghost{ background: transparent; border: 1px dashed var(--ttb-border); color: var(--ttb-muted); }

/* Builder sections */
.ttb-pyr-sections{ display:grid; grid-template-columns:1fr; gap:14px; }
.ttb-pyr-section{ background:#12161e; border:1px solid #ddd; border-radius:14px; padding:12px; }
.ttb-pyr-sec-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.ttb-pyr-sec-label{ font-weight:700; color:#fff; }
.ttb-icon-btn{
  background: transparent; color: var(--ttb-muted);
  border: 1px solid var(--ttb-border); width: 32px; height: 32px; border-radius: 10px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ttb-icon-btn:hover{ color: var(--ttb-text); border-color: #364057; }
.ttb-icon-btn.ttb-remove{ border-color:#3b2327; color:#ff9aa8; }
.ttb-icon-btn.ttb-remove:hover{ background:#2a1418; color:#ffc0c8; }

.ttb-field{ display:flex; gap:10px; align-items:center; margin:8px 0; flex-wrap:wrap; }
.ttb-field label{ width:160px; color:var(--ttb-muted); }
.ttb-input, .ttb-textarea, .ttb-input-file{
  flex:1; min-width:220px; background:#0f131a; color:var(--ttb-text);
  border:1px solid var(--ttb-border); border-radius:10px; padding:10px 12px;
}
.ttb-textarea{ resize:vertical; }
.ttb-image-preview{
  display:flex; align-items:center; justify-content:center; width:72px; height:72px;
  border-radius:12px; border:1px dashed var(--ttb-border); background:#0b0f15; overflow:hidden;
}
.ttb-img-ph{ color:var(--ttb-muted); font-size:12px; }
.ttb-img-el{ width:100%; height:100%; object-fit:cover; display:block; }

/* Swatches */
.ttb-pyr-swatches{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ttb-pyr-swatch{
  width:28px; height:28px; border-radius:8px; border:2px solid #222a35; background: var(--sw);
  cursor:pointer; outline:none;
}
.ttb-pyr-swatch.active{ box-shadow: 0 0 0 3px rgba(122,162,255,.35); }

/* Items */
.ttb-pyr-items{ display:grid; grid-template-columns:1fr; gap:10px; }
.ttb-pyr-item{ background:#0f131a; border:1px solid #ddd; border-radius:12px; padding:10px; }
.ttb-pyr-item-head{ display:flex; justify-content:space-between; align-items:center; }
.ttb-pyr-item-label{ font-weight:700; color: #fff; }

/* ===========================
   OUTPUT: true pyramid
   =========================== */

/* Two stacked layers: triangle outline + tiers */
.ttb-pyr-output{
  display: grid;
  grid-template: 1fr / 1fr;
  background:#0b0f15;
  border:1px dashed var(--ttb-border);
  border-radius:12px;
  padding:18px;
  overflow:hidden;
  box-sizing:border-box;
}

/* Outline layer (contained by the grid cell) */
.ttb-pyr-outline{ grid-area: 1 / 1; z-index: 0; }
.ttb-pyr-outline svg{ width:100%; height:100%; display:block; }
.ttb-pyr-outline polygon{
  fill:none;
  stroke: rgba(122,162,255,.35);
  stroke-width: 8;
  stroke-linejoin: round;
}

/* Tiers container */
.ttb-pyr-output-inner{
  grid-area: 1 / 1; z-index: 1;
  display:flex; flex-direction:column-reverse; gap:14px;
}

/* Tier (trapezoid) */
.ttb-pyr-tier{
  width: var(--tier-width, 100%);
  height: var(--tier-height, 90px);
  margin: 0 auto;
  background: var(--pyr-color, #2b3344);
  /* top edge inset by --skew so the sides taper to the next tier width */
  clip-path: polygon(
    var(--skew,0%) 0%,
    calc(100% - var(--skew,0%)) 0%,
    100% 100%,
    0% 100%
  );
  box-shadow: 0 8px 22px rgba(0,0,0,.25), inset 0 0 0 2px rgba(8,16,24,.25);
  display:flex; align-items:flex-end;
}

/* Items inside a tier */
.ttb-pyr-tier-inner{
  --gap: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 8px 12px 10px;
  box-sizing: border-box;
}

.ttb-row{
  display: grid;
  justify-items: center;
  align-items: end;
  gap: var(--gap);
}
.ttb-row.top{ grid-template-columns: repeat(var(--cols-top, 0), 1fr); }
.ttb-row.bottom{ grid-template-columns: repeat(var(--cols-bottom, 1), 1fr); }

.ttb-pyr-card{ text-align:center; min-width:0; }

.ttb-pyr-card{ text-align:center; min-width:0; }

.ttb-pyr-circle{
  width: var(--circle-size, var(--circle-base, 60px));
  height: var(--circle-size, var(--circle-base, 60px));
  border-radius: 50%;
  margin: 0 auto;
  border: var(--circle-border, 3px) solid rgba(255,255,255,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  overflow: hidden;
  background: #0a0f16;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ttb-row.bottom .ttb-pyr-circle{
  --circle-size: min(var(--circle-base, 60px),
                     calc((100% / max(var(--cols-bottom,1),1)) - var(--gap)));
}
.ttb-row.top .ttb-pyr-circle{
  --circle-size: min(var(--circle-base, 60px),
                     calc((100% / max(var(--cols-top,1),1)) - var(--gap)));
}

.ttb-pyr-circle img{ width:100%; height:100%; object-fit:cover; display:block; }
.ttb-pyr-ph{ font-size: 28px; color:#2f3a52; line-height:1; }

.ttb-pyr-caption{ margin-top:8px; color:var(--ttb-text); opacity:.9; }

/* Responsive */
@media (max-width: 920px){
  .ttb-pyr-output-inner{ gap:12px; }
  .ttb-pyr-tier{ --tier-height: 80px; }
}
@media (max-width: 700px){
  .ttb-pyr-tier{ --tier-height: 70px; }
  .ttb-pyr-circle{ width: min(78%, 100px); height: min(78%, 100px); border-width:5px; }
  .ttb-pyr-caption{ font-size:13px; }
}

/* Pyramid tier now acts as a host; the child handles the trapezoid */
.ttb-pyr .ttb-pyr-tier{
  position: relative;
  width: var(--tier-width, 100%);
  height: var(--tier-height, 200px);
  background: transparent !important;
  clip-path: none !important;
  overflow: visible; /* so drag items can hang outside */
}

/* The actual trapezoid background */
.ttb-pyr .ttb-pyr-trap{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--pyr-color, #2b3344);
  border-radius:12px 12px 0 0;
  /* use the same CSS var we already compute in JS on the parent */
  clip-path: polygon(var(--skew, 0%) 0%, calc(100% - var(--skew, 0%)) 0%, 100% 100%, 0% 100%);
}

/* Draggable items sit above the trapezoid */
.ttb-pyr .ttb-pyr-drag-layer{ 
  position: absolute; inset: 0; z-index: 2; pointer-events: auto; 
}
.ttb-pyr .ttb-drag-item{ 
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%); cursor: grab; user-select: none; touch-action: none;
}
.ttb-pyr .ttb-drag-item.dragging{ cursor: grabbing; }

/* Circle stays as you specified (JS can still set --circle-base 30px on top tier) */
.ttb-pyr .ttb-pyr-circle{
  width: var(--circle-base, 60px);
  height: var(--circle-base, 60px);
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  overflow: hidden;
  background: #0a0f16;
  display: flex; align-items: center; justify-content: center;
}
.ttb-pyr .ttb-pyr-circle img{ width:100%; height:100%; object-fit:cover; display:block; }
.ttb-pyr .ttb-pyr-caption{ font-size: 12px; margin-top: 6px; text-align: center; color:#000; }

#ttb-pyr-json { color: #fff; }