/* Content Studio layout: library left, view center (editor / labs / catalog), properties right,
   timeline + event log bottom. Desktop-first; narrow screens get an honest preview mode. */
#sb { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100dvh; }
#sb-top { grid-row: 1; }
#sb-narrow { grid-row: 2; }
#sb-body { grid-row: 3; }
#sb-bottom { grid-row: 4; }
#boot-msg { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 16px var(--mono); color: var(--muted); background: var(--bg); z-index: 60; white-space: pre-wrap; text-align: center; }
#sb:not(.booting) #boot-msg { display: none; }
#boot-msg.error { color: var(--red); }
#sb-top { display: flex; align-items: center; gap: 12px; padding: 5px 10px; background: var(--night); border-bottom: 2px solid var(--ink); box-shadow: inset 0 -2px 0 var(--slate); }
#sb-top .brand { display: flex; align-items: center; gap: 6px; }
#sb-top .rev { flex: 1; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#sb-top .actions { display: flex; gap: 6px; align-items: center; }
.tag-test { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 1px 5px; color: #062c33; background: var(--cyan); border: 1px solid var(--ink); }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 240px; background: var(--panel); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 #05040a; display: flex; flex-direction: column; padding: 4px; }
.menu button { text-align: left; background: none; border: none; padding: 6px 8px; cursor: pointer; color: var(--text); }
.menu button:hover { background: var(--navy); }
.menu button.bad { color: var(--red); }
#sb-narrow { background: #3a2a00; color: var(--gold); padding: 6px 10px; font-size: 12px; border-bottom: 2px solid var(--ink); }
#sb-body { display: grid; grid-template-columns: 270px minmax(0, 1fr) 330px; min-height: 0; }
#sb-lib, #sb-props { background: var(--panel); overflow: auto; min-height: 0; }
#sb-lib { border-right: 2px solid var(--ink); }
#sb-props { border-left: 2px solid var(--ink); padding: 8px; }
#sb-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #0b0a14; }
#sb-tabs { display: flex; flex-wrap: wrap; gap: 0; background: var(--night); border-bottom: 2px solid var(--ink); }
#sb-tabs button { background: none; border: none; border-right: 2px solid var(--ink); color: var(--muted); padding: 6px 10px; cursor: pointer; font-weight: 700; font-size: 12px; }
#sb-tabs button.active { color: var(--text); background: var(--navy); box-shadow: inset 0 -3px 0 var(--gold); }
#sb-view { flex: 1; min-height: 0; overflow: auto; position: relative; }
#sb-bottom { background: var(--panel); border-top: 2px solid var(--ink); box-shadow: inset 0 2px 0 var(--slate); height: 190px; display: grid; grid-template-columns: 380px 1fr; min-height: 0; }
.sb-toasts { position: fixed !important; left: 50% !important; bottom: 200px !important; }
body.sandbox.narrow #sb-body { grid-template-columns: 1fr; }
body.sandbox.narrow #sb-lib, body.sandbox.narrow #sb-props, body.sandbox.narrow #sb-top .actions .btn:not([href]) { display: none; }
body.sandbox.narrow #sb-bottom { grid-template-columns: 1fr; height: 150px; }

/* Library */
.lib-head { position: sticky; top: 0; background: var(--panel); padding: 8px; border-bottom: 2px solid var(--ink); z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.lib-head input, .lib-head select { width: 100%; }
.lib-list { padding: 4px; }
.lib-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 8px 6px 2px; }
.lib-item { display: flex; align-items: center; gap: 6px; padding: 3px 6px; cursor: pointer; font-size: 12px; border: 1px solid transparent; }
.lib-item:hover { background: var(--card); }
.lib-item.sel { background: var(--navy); border-color: var(--cyan); }
.lib-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-item .id { color: var(--dim); font: 10px var(--mono); }
.lib-item canvas, .lib-item img { width: 24px; height: 24px; image-rendering: pixelated; flex: none; background: #0d0c17; }
.layer { font: 700 9px var(--mono); padding: 0 3px; border: 1px solid var(--ink); }
.layer.draft { background: var(--gold); color: #3a2a00; }
.layer.published { background: var(--cyan); color: #062c33; }
.layer.new { background: var(--green2); color: #10301a; }
.lib-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border-top: 2px solid var(--ink); position: sticky; bottom: 0; background: var(--panel); }

/* Properties */
.props h2 { font-size: 15px; margin: 0 0 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.props .sub { font: 11px var(--mono); color: var(--dim); margin-bottom: 6px; word-break: break-all; }
.props section { margin: 8px 0; }
.props section > h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pf { display: grid; grid-template-columns: 1fr 120px; gap: 4px; align-items: center; padding: 2px 0; font-size: 12px; }
.pf label { color: var(--muted); }
.pf .unit { color: var(--dim); font-size: 10px; margin-left: 2px; }
.pf input[type=number], .pf input[type=text], .pf select { width: 100%; min-height: 24px; padding: 2px 4px; font-size: 12px; }
.pf .err { grid-column: 1 / 3; color: var(--red); font-size: 11px; }
.pf.wide { grid-template-columns: 1fr; }
table.levels { width: 100%; border-collapse: collapse; font-size: 11px; }
table.levels th, table.levels td { border: 1px solid #262c4c; padding: 1px 2px; text-align: center; }
table.levels input { width: 100%; min-width: 0; min-height: 20px; padding: 1px 2px; font-size: 11px; border-width: 1px; box-shadow: none; text-align: center; }
.rel { font-size: 12px; }
.rel a { cursor: pointer; color: var(--cyan); text-decoration: none; margin-right: 6px; font-family: var(--mono); font-size: 11px; }
.ramp { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.ramp .sw { width: 18px; height: 18px; border: 2px solid var(--ink); cursor: pointer; position: relative; }
.ramp .sw.sel { outline: 2px solid var(--cyan); }
.validation { font-size: 11px; max-height: 120px; overflow: auto; }
.validation li { color: var(--red); }
textarea.json { width: 100%; height: 220px; font: 11px var(--mono); }

/* Pixel editor */
.pe { display: grid; grid-template-columns: 44px minmax(0, 1fr) 200px; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 420px; }
.pe-tools { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px; background: var(--panel); border-right: 2px solid var(--ink); }
.pe-tools button { width: 34px; height: 30px; padding: 0; font: 700 11px var(--mono); background: var(--card); border: 2px solid var(--ink); color: var(--text); cursor: pointer; }
.pe-tools button.on { background: var(--gold2); color: #1b1200; }
.pe-canvas-wrap { position: relative; overflow: auto; display: flex; align-items: center; justify-content: center; background: #08070f; }
.pe-canvas-wrap canvas { image-rendering: pixelated; cursor: crosshair; }
.pe-side { background: var(--panel); border-left: 2px solid var(--ink); padding: 6px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.pe-pal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pe-pal .sw { aspect-ratio: 1; border: 2px solid var(--ink); cursor: pointer; }
.pe-pal .sw.sel { outline: 2px solid #fff; outline-offset: -1px; }
.pe-pal .sw.t { background: repeating-conic-gradient(#343048 0 25%, #2a2640 0 50%) 0 0 / 8px 8px; }
.pe-strip { grid-column: 1 / 4; display: flex; gap: 6px; align-items: center; padding: 6px; background: var(--panel); border-top: 2px solid var(--ink); overflow-x: auto; }
.pe-frame { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; border: 2px solid var(--ink); background: #0d0c17; cursor: pointer; font: 10px var(--mono); color: var(--muted); }
.pe-frame.sel { border-color: var(--gold); color: var(--text); }
.pe-frame canvas { image-rendering: pixelated; }
.pe-preview { image-rendering: pixelated; background: #0d0c17; border: 2px solid var(--ink); align-self: center; }
.pe-info { font: 11px var(--mono); color: var(--muted); }

/* Labs */
.lab { display: grid; grid-template-columns: minmax(0, 1fr) 280px; height: 100%; min-height: 0; }
.lab-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.lab-stage .stage { flex: 1; min-height: 240px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.lab-stage canvas { image-rendering: pixelated; }
.lab-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 5px 6px; background: var(--panel); border-bottom: 2px solid var(--ink); font-size: 12px; }
.lab-bar .grp { display: flex; gap: 4px; align-items: center; padding-right: 8px; border-right: 1px solid var(--line); }
.lab-bar .grp:last-child { border-right: none; }
.lab-bar label { color: var(--muted); font-size: 11px; }
.lab-bar select, .lab-bar input[type=number] { min-height: 22px; padding: 1px 3px; font-size: 11px; width: auto; }
.lab-side { background: var(--panel); border-left: 2px solid var(--ink); overflow: auto; padding: 8px; font-size: 12px; }
.lab-side h4 { margin: 8px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.readout { font: 11px/1.45 var(--mono); white-space: pre-wrap; color: var(--text); }
.preset-list { display: flex; flex-direction: column; gap: 4px; }
.preset-list button { text-align: left; }
.expect { font-size: 11px; color: var(--cyan); background: #0d0c17; border: 1px solid var(--line); padding: 4px 6px; margin-top: 4px; }
.cmp td.better { color: var(--green2); }
.cmp td.worse { color: var(--red); }
.hint { font-size: 11px; color: var(--dim); }

/* Timeline */
.tl { padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; border-right: 2px solid var(--ink); }
.tl .row .btn { min-width: 34px; }
.tl .clock { font: 700 13px var(--mono); }
.evlog { overflow: auto; font: 11px/1.4 var(--mono); padding: 4px 8px; color: var(--muted); }
.evlog .e { white-space: pre; }
.evlog .e.mech { color: var(--text); }
.evlog .e.pay { color: var(--green2); }
.evlog .e.bad { color: var(--red); }

/* Catalog */
.cat { padding: 10px; }
.cat h3 { margin: 12px 0 6px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.cat-cell { background: var(--card); border: 2px solid var(--ink); padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font-size: 10px; text-align: center; }
.cat-cell canvas { image-rendering: pixelated; max-width: 100%; }
.cat-cell .nm { font: 10px var(--mono); color: var(--muted); word-break: break-all; }
.cat-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cat-summary .c { background: var(--card); border: 2px solid var(--ink); padding: 6px; }
.cat-summary .c b { font: 800 18px var(--mono); display: block; }
@media (max-width: 1099px) {
  #sb-body { grid-template-columns: 1fr; }
}