/* Design studio workspace. Tools are dark like a production floor; the product is the bright thing in the room. */
.studio-page { background: var(--navy); }
.studio-page .site-header { position: static; border-bottom: 1px solid var(--navy-3); }
.studio { --panel: #0f2636; --panel-line: #24465c; --soft: #b9cad5; color: #eef4f8; font-size: 1rem; padding-bottom: 64px; }
.studio h2 { color: var(--white); font: 800 1.7rem/1 var(--display); margin: 0 0 12px; }
.studio h3 { color: var(--white); font: 800 1.35rem/1 var(--display); margin: 18px 0 6px; }
.studio label, .studio legend { display: block; font-weight: 600; font-size: .92rem; margin: 10px 0 4px; color: #dbe6ec; padding: 0; }
.studio fieldset { border: 0; padding: 0; margin: 0; }
.studio input[type=text], .studio input[type=number], .studio select, .studio textarea {
  width: 100%; min-height: 40px; padding: 7px 9px; border: 1px solid #4a6b80; border-radius: 0; background: #071c2a; color: var(--white); font: 400 .98rem var(--body);
}
.studio input:focus, .studio select:focus, .studio textarea:focus { border-color: var(--cyan); }
.studio input[type=color] { width: 100%; height: 40px; padding: 2px; border: 1px solid #4a6b80; background: #071c2a; cursor: pointer; }
.studio input[type=range] { width: 100%; accent-color: var(--cyan); }
.studio a { color: var(--cyan); }
.tool { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 12px; border: 1px solid #4a6b80; background: #17354a; color: var(--white); font: 600 .94rem/1.1 var(--body); text-decoration: none; cursor: pointer; }
.studio a.tool { color: var(--white); }
.tool:hover:not(:disabled) { background: #24506d; }
.tool:disabled { opacity: .45; cursor: not-allowed; }
.tool-primary, .studio a.tool-primary { background: var(--cyan); border-color: var(--cyan); color: var(--navy); font-weight: 800; }
.tool-primary:hover:not(:disabled) { background: var(--white); }
.tool-danger { border-color: #e08a8e; color: #ffc9cb; }
.tool-wide { width: 100%; margin-bottom: 8px; }
.studio label.file-tool { display: flex; align-items: center; justify-content: center; margin: 0 0 8px; color: var(--white); font-size: .94rem; cursor: pointer; }
#add-image:focus-visible + * , #add-image:focus-visible ~ .panel-help { outline: 0; }
.file-tool:has(+ #add-image:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }

.studio-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 10px var(--gutter); background: var(--panel); border-bottom: 1px solid var(--panel-line); }
.studio-title { flex: 1 1 280px; min-width: 0; }
.studio-title input { max-width: 340px; font-weight: 700 !important; }
.storage-state { margin: 4px 0 0; font-size: .88rem; color: var(--soft); }
.storage-state.is-warning { color: var(--hi); }
.studio-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-notice { margin: 0; padding: 7px var(--gutter); background: #fffbdb; color: var(--navy); font-size: .92rem; border-bottom: 1px solid #e5dc8a; }

.studio-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; align-items: start; gap: 0; }
.studio-side, .studio-inspector { min-width: 0; }
.panel { background: var(--panel); padding: 14px 16px; border-bottom: 1px solid var(--panel-line); }
.studio-side { border-right: 1px solid var(--panel-line); }
.studio-inspector { border-left: 1px solid var(--panel-line); }
.panel-help { font-size: .9rem; color: var(--soft); margin: 6px 0; }
.control-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.toggle-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.toggle-row > * { flex: 1 1 auto; }
.toggle { min-height: 40px; padding: 6px 10px; border: 1px solid #4a6b80; background: #071c2a; color: var(--white); font: 600 .92rem var(--body); cursor: pointer; }
.toggle[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--navy); font-weight: 800; }
.check-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.check-row label { margin: 0; }
.check-row input { width: 20px; height: 20px; accent-color: var(--cyan); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { width: 40px; height: 40px; padding: 0; border: 2px solid #6d8797; cursor: pointer; }
.swatch[aria-pressed="true"] { outline: 3px solid var(--cyan); outline-offset: 2px; border-color: var(--white); }

.nudge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.nudge .tool { font-size: 1.15rem; }

.layer-list { display: grid; gap: 6px; counter-reset: none; }
.layer-row { background: #0a1f2d; border: 1px solid var(--panel-line); }
.layer-row.is-selected { border-color: var(--cyan); box-shadow: inset 4px 0 0 var(--cyan); }
.layer-select { display: block; width: 100%; min-height: 40px; padding: 8px 10px; text-align: left; border: 0; background: none; color: var(--white); font: 600 .94rem var(--body); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-select small { color: var(--soft); font-weight: 400; margin-left: 6px; }
.layer-tools { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 4px 4px; }
.layer-tools button { flex: 1 1 auto; min-height: 36px; min-width: 40px; padding: 2px 4px; border: 0; background: #17354a; color: var(--white); font: 600 .8rem var(--body); cursor: pointer; }
.layer-tools button:hover:not(:disabled) { background: #24506d; }
.layer-tools button:disabled { opacity: .4; }
.layer-tools button[aria-pressed="true"] { background: var(--hi); color: var(--navy); }

.draft-list { display: grid; gap: 4px; }
.draft-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; }
.draft-list button { min-height: 36px; padding: 4px 8px; border: 1px solid var(--panel-line); background: #0a1f2d; color: var(--white); font: 500 .88rem var(--body); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.draft-list button[aria-current="true"] { border-color: var(--cyan); }

.studio-stage-col { padding: 12px clamp(8px, 2vw, 24px) 18px; min-width: 0; position: sticky; top: 0; }
.view-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; min-height: 40px; justify-content: center; }
.view-tabs button { min-height: 40px; padding: 6px 16px; border: 1px solid #4a6b80; background: #0f2636; color: var(--white); font: 700 .94rem var(--body); cursor: pointer; }
.view-tabs button[aria-pressed="true"] { background: var(--white); color: var(--navy); border-color: var(--white); }
.stage-frame { display: flex; justify-content: center; align-items: center; width: 100%; overflow: hidden; }
.stage-frame .canvas-container { box-shadow: 0 0 0 1px #24465c; touch-action: pan-y; }
#design-canvas:focus-visible + canvas, .stage-frame .canvas-container:focus-within { outline: 3px solid var(--cyan); outline-offset: 2px; }
.stage-warnings { display: grid; gap: 4px; margin-top: 8px; }
.stage-warnings li { background: #fffbdb; color: var(--navy); padding: 6px 10px; font-size: .92rem; border-left: 5px solid var(--hi); }

.studio-tabs { display: none; }
.studio-dialog { max-width: min(92vw, 500px); padding: 22px; border: 0; background: var(--panel); color: #eef4f8; }
.studio-dialog::backdrop { background: rgba(3,12,18,.72); }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.studio-toast { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 60; max-width: min(92vw, 560px); padding: 10px 16px; background: var(--white); color: var(--navy); font-weight: 700; box-shadow: 0 0 0 2px var(--navy); }
.studio-toast.is-error { background: #ffe4e5; color: #7a0c13; box-shadow: 0 0 0 2px #a4262c; }

@media (max-width: 1180px) {
  .studio-grid { grid-template-columns: 260px minmax(0, 1fr); }
  .studio-inspector { grid-column: 1 / -1; border-left: 0; }
  #edit-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; }
  #edit-form[hidden] { display: none !important; }
}

/* Phone and small tablet: the canvas stays on top, one panel at a time below, tabs at the bottom */
@media (max-width: 820px) {
  .studio-bar { padding-inline: 12px; }
  .studio-title { flex-basis: 100%; }
  .studio-title input { max-width: none; }
  .studio-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .studio-actions .tool { padding-inline: 4px; font-size: .84rem; }
  .studio-notice { padding-inline: 12px; font-size: .86rem; }
  .studio-grid { display: flex; flex-direction: column; align-items: stretch; }
  .studio-stage-col { order: -1; position: sticky; top: 0; z-index: 20; padding: 6px 8px; background: var(--navy); border-bottom: 1px solid var(--panel-line); }
  .view-tabs { min-height: 0; margin-bottom: 6px; }
  .view-tabs button { padding-inline: 10px; font-size: .86rem; }
  .stage-warnings { max-height: 58px; overflow-y: auto; margin-top: 6px; }
  .stage-warnings li { font-size: .82rem; padding: 3px 8px; }
  .studio-side { border: 0; }
  .studio .panel { display: none; border: 0; }
  .studio .panel.is-visible { display: block; }
  .studio-inspector { border: 0; }
  .studio-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #0a1f2d; border-top: 2px solid var(--cyan); }
  .studio-tabs button { min-height: 56px; border: 0; background: none; color: var(--white); font: 700 .88rem var(--body); cursor: pointer; }
  .studio-tabs button[aria-pressed="true"] { background: var(--cyan); color: var(--navy); }
  #edit-form { display: block; }
}