/* Robust UI with grid and editor; patched to prevent button overlap */
:root {
  --bg: #0f1115;
  --fg: #e9eef5;
  --muted: #a6b3c4;
  --card: #171922;
  --acc: #6ea8fe;
  --border: #242838;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}

.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
h1 { margin: 0 0 6px; font-size: 1.6rem; }
.sub { margin: 0; color: var(--muted); }

.grid { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } #javaEditor { order: 2; } }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.muted { color: var(--muted); }

.row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .row { grid-template-columns: 1fr; } }

.control { min-width: 0; }
.control .label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 6px; }

/* === Hex input visibility patch === */
.stop-row.bedrock input[type="text"],
#javaEditor .stop-row input[type="text"],
#javaEditor input[type="text"] {
  color: var(--fg, #e6e9ef);         /* bright text */
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.3px;
}

.stop-row.bedrock input[type="text"]::placeholder,
#javaEditor input[type="text"]::placeholder {
  color: rgba(230,233,239,0.45);
}

/* Ensure inputs don't compress to zero width */
.stop-row.bedrock input[type="text"] { min-width: 120px; }

/* Segmented controls */
.segmented {
  display: flex; /* was inline-flex */
  flex-wrap: wrap; /* allow wrap on small screens */
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}
.seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--fg);
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1;
}
.seg:hover { background: #1f2330; }
.seg.active { background: var(--acc); color: #021022; }

textarea, input[type="number"], input[type="text"] {
  width: 100%;
  background: #0e1017;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}

.preview-area {
  min-height: 72px;
  display: block;
  padding: 18px;
  line-height: 1.4;
  font-size: 1.5rem;
  white-space: pre-wrap; /* preserve spaces/newlines */
  word-break: break-word;
}

.output-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.output-header small { color: var(--muted); }

.buttons { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
button {
  position: relative; /* ensure not absolute from external resets */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--acc);
  color: #021022;
  border: 0;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }

/* Sidebar editor */
#javaEditor h3 { margin-top: 0; }
#stopList { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.stop-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.stop-row input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.stop-row button { padding: 6px 10px; }

.foot { color: var(--muted); }



/* === Collapse two-column layout when Java editor is hidden === */
.grid:has(#javaEditor[hidden]) {
  grid-template-columns: 1fr !important;
}
/* === End collapse rule === */


/* === Final fixed grid and Bedrock popover === */
.grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; }
.side { grid-column: 1; }
.main { grid-column: 2; }
@media (max-width: 820px){ .grid { grid-template-columns: 1fr; } .side,.main{ grid-column:1; } }

#bedrockEditor .stop-list { max-height: calc(100vh - 220px); overflow: auto; padding-right: 4px; }
.stop-row.bedrock { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; position: relative; }
.stop-row.bedrock .swatch {
  width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--sw, #ffffff); cursor: pointer;
}
.stop-row.bedrock .palette {
  position: absolute; top: 44px; left: 0;
  padding: 8px; background: #0e1017; border: 1px solid var(--border);
  border-radius: 12px; display: grid; grid-template-columns: repeat(10, 20px);
  gap: 6px; z-index: 30; box-shadow: 0 8px 28px rgba(0,0,0,.5);
  max-height: 200px; overflow: auto;
}
.stop-row.bedrock .palette.hidden { display: none; }
.stop-row.bedrock .palette .chip { width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; }


/* === v2 layout hardening === */
.grid { display:grid; grid-template-columns: 360px 1fr !important; gap:16px; }
.side { grid-column:1; }
.main { grid-column:2; }
@media (max-width: 820px){ .grid { grid-template-columns:1fr !important; } .side,.main{ grid-column:1; } }

/* Bedrock editor: do NOT clip popovers */
#bedrockEditor, #bedrockEditor .card, #bedrockEditor .side { overflow: visible; }
#bedrockEditor .stop-list { overflow: visible; max-height: none; }

.stop-row.bedrock { display:grid; grid-template-columns: 40px 1fr auto; gap:8px; align-items:center; position:relative; }
.stop-row.bedrock .swatch { width:40px; height:36px; border-radius:10px; border:1px solid var(--border); background:var(--sw,#fff); cursor:pointer; }

/* Palette popover */
.stop-row.bedrock .palette {
  position:absolute; top:44px; left:0;
  padding:8px; background:#0e1017; border:1px solid var(--border); border-radius:12px;
  display:grid; grid-template-columns: repeat(14, 22px); gap:8px;
  z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.stop-row.bedrock .palette.hidden { display:none; }
.stop-row.bedrock .palette .chip { width:22px; height:22px; border-radius:5px; border:1px solid rgba(255,255,255,.25); cursor:pointer; }

/* --- Style checkboxes layout --- */
#styleChecks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  align-items: center;
}
#styleChecks .check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  white-space: nowrap;
}
#styleChecks input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--acc);
}

/* === Desktop polish for style checkboxes === */
#styleChecks { 
  grid-template-columns: repeat(2, minmax(220px, 1fr)); 
}
#styleChecks .check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
  padding: 4px 6px;
  border-radius: 8px;
}
#styleChecks .check:hover {
  background: rgba(255,255,255,0.04);
}
#styleChecks input[type="checkbox"] {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
#styleChecks code {
  opacity: .55;
  font-size: .9em;
  margin-left: 4px;
}

/* Wider screens: lay out in 4 neat columns */
@media (min-width: 1100px) {
  #styleChecks {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 10px 18px;
  }
}