/* ========= Theme & Base ========= */
:root{
  --bg:#1e1e1e;
  --panel:#252526;
  --panel-2:#2c2c2c;
  --text:#e6e6e6;
  --muted:#a0a4b0;
  --border:#343434;
  --accent:#7CFFB2;         /* retro green accent */
  --status:#1f6f3e;         /* green status bar */
  --font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --base-size: 15px;
  --code-size: 15px;
}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--base-size);
  display:flex; flex-direction:column;
}

/* ========= Title Bar (sticky, single row; tabs wrap inside) ========= */
.titlebar{
  position: sticky; top: 0; z-index: 1000;
  min-height: 42px;
  padding: 6px 12px;
  display: flex;
  align-items: flex-start;        /* top align if tabs wrap */
  gap: 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;              /* keep traffic + actions in one row */
}

/* traffic lights (left) + label */
.traffic, .tabs-label { flex: 0 0 auto; }

/* actions stay pinned right, style unchanged */
.actions { flex: 0 0 auto; display:flex; gap:8px; }
.actions button{
  background:#333;border:1px solid var(--border);color:var(--text);
  padding:6px 10px; border-radius:6px; cursor:pointer;
  font-size:calc(var(--base-size)*0.9);
}
.actions button:hover{background:#3a3a3a}

/* ========= Tabs: take middle space and wrap internally ========= */
.tabs{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;                /* ✅ allow multiple rows */
  align-content: flex-start;
  gap: 2px;
  overflow: hidden;
}

.tab {
  height: 34px;
  padding: 0 16px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text);
  border-right: 1px solid var(--border);
  font-size: calc(var(--base-size)*0.95);
  flex: 0 0 auto;
  white-space: nowrap;
}
.tab.active{ background:#1a1a1a; border-top:2px solid var(--accent) }

/* Optional gradient edge on wide screens */
/* ===== Phone layout: actions on row 1, tabs as a grid on row 2 ===== */
@media (max-width: 700px){
  .titlebar{
    position: sticky; top: 0; z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;             /* allow two rows */
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 6px 12px;
  }

  /* ordering inside the titlebar */
  .tabs-label{ order: 0; flex: 0 0 auto; }
  .traffic   { order: 0; flex: 0 0 auto; }
  .actions   { order: 1; margin-left: auto; flex: 0 0 auto; }
  .tabs      {
    order: 2;
    width: 100%;
    /* grid so tabs don’t become one tall column */
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr)); /* 2 columns */
    gap: 8px 10px;
    overflow: visible;
    mask-image: none;
  }

  /* tab buttons look like chips in the grid */
  .tab{
    border-right: 0;
    height: 36px;
    background: #1a1a1a;
    border-radius: 8px;
    text-align: center;
    flex: 0 0 auto;          /* keep natural width inside grid cell */
    white-space: nowrap;
  }
  .tab.active{
    border-top: 0;           /* remove desktop active bar */
    outline: 2px solid var(--accent);
  }
}

/* ultra-narrow phones: fall back to one column */
@media (max-width: 380px){
  .tabs{
    grid-template-columns: 1fr;
  }
}

/* ========= Main Layout ========= */
.layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 260px 1fr 2.7fr; /* Explorer | Editor | Preview */
}

/* Explorer */
.explorer{
  background:var(--panel); border-right:1px solid var(--border);
  padding:10px; overflow:auto;
}
.explorer-title{
  font-size:12px; color:#8a8a8a; margin-bottom:8px;
}
.explorer-section{
  margin-top:12px; margin-bottom:6px;
  font-size:12px; color:#8a8a8a;
}
.file{
  padding:6px 6px; border-radius:6px; cursor:pointer;
  font-size: calc(var(--base-size)*0.95);
}
.file:hover{ background:#2f2f2f }
.file.active{ background:#1f1f1f; outline:1px solid var(--border) }

/* Editors */
.editors{
  display:flex; flex-direction:column; min-height:0;
  background:#1b1b1b; border-right:1px solid var(--border);
}
.editor-header,.preview-header{
  background:var(--panel); border-bottom:1px solid var(--border);
  padding:10px 14px; display:flex; align-items:center; gap:8px;
  font-size:calc(var(--base-size)*0.95);
}
.muted{color:var(--muted)}

.editor-stack{position:relative; min-height:0; flex:1}
.code-editor{
  position:absolute; inset:0; width:100%; height:100%;
  resize:none; outline:none; border:none;
  background:#1e1e1e; color:#dcdcdc;
  padding:20px 22px; line-height:1.65;
  font-family:var(--font); font-size:var(--code-size);
  tab-size:2;
}
.hidden{display:none}

/* Preview */
.preview{display:flex; flex-direction:column; min-height:0; background:#111}
#previewFrame{flex:1; width:100%; border:none; background:#fff}

/* Bottom Panel (fixed height + scrolls internally) */
.panel{
  background: var(--panel);
  border-top: 1px solid var(--border);
  height: 180px;
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
}
.panel-tabs{
  display: flex;
  gap: 24px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  font-size: calc(var(--base-size) * 0.85);
  color: #aaa;
  flex: 0 0 auto;
  white-space: nowrap;
}

.tabs-label{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .9;
  margin-right: 6px;
}
.terminal{
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px;
  color: #ccc;
  font-size: calc(var(--base-size) * 0.95);
  white-space: pre-wrap;
  background: var(--panel-2);
}
.prompt{color:var(--accent)}

/* Status Bar */
.statusbar{
  background:var(--status); color:#fff; height:28px;
  display:flex; align-items:center; gap:22px; padding:0 12px;
  font-size:calc(var(--base-size)*0.9);
}

/* Responsive */
@media (max-width: 1100px){
  .layout{grid-template-columns:220px 1fr 1fr}
}
@media (max-width: 900px){
  .layout{grid-template-columns:1fr}
  .preview{height:50vh}
}



/* BisonBytes image: show full poster, no crop */
.card.bison .img{
  height:auto;            /* override 220px */
  object-fit:contain;     /* show entire image */
  width:100%;
  display:block;
}

/* Give the image column enough width so it isn't a sliver */
.card.bison .row{
  grid-template-columns: 1fr 360px;   /* text | poster */
}

/* Optional: keep poster from getting taller than the card needs */
.card.bison .media{
  max-height: 560px;      /* tweak as you like */
  display:flex;
  align-items:center;
  justify-content:center;
}


/* ========= Mobile View ========= */
/* Mobile: preview-only mode */
/* Mobile: preview-only mode (but keep topbar) */
@media (max-width: 700px){
  /* collapse to single column */
  .layout{ grid-template-columns: 1fr !important; }

  /* hide explorer + editor + bottom panel + statusbar */
  .explorer,
  .editors,
  .panel,
  .statusbar { display:none !important; }

  /* preview should fill under the titlebar */
  .preview{
    height: calc(100vh - 42px);   /* subtract topbar height */
    min-height: calc(100vh - 42px);
  }
  #previewFrame{
    height: 100% !important;
    width: 100% !important;
  }
}