/* Face editor layout only. Color, type, header lockup, and footer come from /style.css. */

.editor-lead{grid-column:1/-1;margin:0;color:var(--muted);font-size:14px;line-height:1.6}
main.editor-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.2fr) minmax(240px,.8fr);gap:16px;padding-top:28px;padding-bottom:8px;align-items:start}
.editor-layout section{border:1px solid var(--line);background:var(--white);border-radius:var(--radius);padding:20px;min-width:0}
.editor-layout h2{font-size:20px;margin:0}
.pane-title,.actions,.row,.clips,.describe-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.describe-form{display:grid;gap:8px;margin:0 0 14px}
.describe-form label{font-size:13px}
.describe-row{align-items:stretch}
.describe-row input{flex:1 1 160px;min-width:0;width:100%;background:var(--paper);border:1px solid var(--ink);color:var(--ink);border-radius:3px;padding:10px 12px}
.describe-row button{flex:0 0 auto}
.describe-form .note{margin:0}
.pane-title{justify-content:space-between;margin-bottom:12px}
.editor-layout button:not(.primary),.editor-layout select,.editor-layout input[type=number]{background:var(--paper);border:1px solid var(--ink);color:var(--ink);border-radius:3px;padding:10px 12px}
.editor-layout select{appearance:none;-webkit-appearance:none;padding-right:34px;background-color:var(--paper);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23262920' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.editor-layout input[type=range]{accent-color:var(--ink)}
.editor-layout input[type=range]:active{accent-color:var(--orange)}
.editor-layout button{cursor:pointer}
.editor-layout button:not(.primary):hover{border-color:var(--ink)}
.editor-layout .primary{padding:10px 14px;gap:8px}
.editor-layout textarea{width:100%;height:70vh;min-height:360px;max-height:none;resize:vertical;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:16px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0}
.actions{margin-top:12px}
#status{color:var(--ink);min-height:1.5rem;overflow-wrap:anywhere}
#status.error,.over{color:var(--red)!important}
.display{background:#050810;border:1px solid var(--ink);border-radius:18px;overflow:hidden;max-width:100%;margin-top:12px}
.display canvas{width:100%;height:auto;display:block}
.note{color:var(--muted);font-size:13px;line-height:1.5}
#budget{color:var(--ink);font-size:13px}
.row{margin-top:16px;align-items:flex-start}
.row label{display:grid;gap:6px;font-size:13px}
.row input[type=range]{width:min(180px,100%)}
.look-pad{width:120px;height:85px;background:radial-gradient(circle at var(--look-x,50%) var(--look-y,50%),var(--ink) 0 5px,transparent 6px),linear-gradient(90deg,transparent 49%,var(--line) 50%,transparent 51%),linear-gradient(transparent 49%,var(--line) 50%,transparent 51%),var(--paper);border:1px solid var(--line);border-radius:var(--radius);touch-action:none;cursor:crosshair}
.channels-pane .channel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 3.5rem;gap:8px;align-items:center;margin:10px 0;font-size:12px}
.channel output{text-align:right;font-variant-numeric:tabular-nums}
.channel input{width:100%}
.device-preview{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.device-preview .actions{align-items:stretch}
.device-preview select{max-width:100%}
#device-status{font-size:13px;color:var(--muted)}
@media(max-width:1200px){main.editor-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.channels-pane{grid-column:1/-1}.channels-pane #sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}}
@media(max-width:760px){main.editor-layout{grid-template-columns:1fr;padding-top:20px}.channels-pane{grid-column:auto}.channels-pane #sliders{display:block}.editor-layout textarea{height:45vh;min-height:240px}}