/* Admin layer: a right-hand drawer over the stage so the operator sees the
   live picture while changing things. OhSnap colours live here only. This
   file is the drawer's bones (head, tabs, panel, forms, buttons);
   admin-widgets.css has the pieces panels build from. Every colour is a
   token from theme.css so the dark theme needs no rule here. */

#admin {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw);
  display: grid; grid-template-rows: auto auto 1fr;
  background: var(--paper); color: var(--ink);
  box-shadow: -16px 0 48px rgba(0, 0, 0, .4); border-left: 4px solid var(--blue);
  font-size: 14px; z-index: 50;
}
#admin:not([hidden]) { animation: drawer-in .32s var(--ease) both; }
@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
#admin[data-big] { font-size: 16px; width: min(880px, 100vw); }

/* Head: the burst, the word, the version, and the three buttons, over a
   gradient with a slow sheen. */
#admin-head {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--grad-head); color: #fff; overflow: hidden;
}
#admin-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%);
  transform: translateX(-100%); animation: head-sheen 9s ease-in-out infinite;
}
@keyframes head-sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
#admin-head > * { position: relative; z-index: 1; }
.burst-admin { width: 40px; height: 40px; overflow: visible; flex: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25)); }
.burst-admin .rays { transform-origin: 100px 100px; animation: burst-throb 3.2s ease-in-out infinite; }
@keyframes burst-throb { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.07) rotate(3deg); } }
#admin-title { font-family: var(--display); font-size: 26px; letter-spacing: .03em; line-height: 1; text-shadow: 0 2px 0 rgba(20, 22, 43, .35); }
#admin-title::after { content: "!"; color: var(--yellow); }
#admin-version {
  font-family: var(--mono); font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
}
#admin-head .grow { flex: 1; }
#admin-theme, #admin-close, #admin-quit {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .16); color: #fff; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-weight: 700;
  transition: background .15s, transform .12s;
}
#admin-theme { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 999px; }
#admin-theme .moon, body[data-admin-theme="dark"] #admin-theme .sun { display: none; }
body[data-admin-theme="dark"] #admin-theme .moon { display: inline-flex; }
#admin-theme:hover, #admin-close:hover { background: rgba(255, 255, 255, .28); transform: translateY(-1px); }
#admin-quit { background: rgba(228, 72, 91, .92); border-color: rgba(255, 255, 255, .25); }
#admin-quit:hover { background: rgba(228, 72, 91, 1); transform: translateY(-1px); }
.ico { display: inline-flex; line-height: 0; }
.ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* One even row: hub.js sets the column count to the number of panels. */
#admin-tabs { display: grid; grid-auto-flow: column; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
#admin-tabs button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
  border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-2); padding: 7px 2px 6px; border-radius: 8px 8px 0 0; cursor: pointer;
  font-weight: 700; font-size: 11px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, color .15s;
}
#admin-tabs button .ico { color: var(--ink-3); transition: transform .18s var(--ease), color .15s; }
#admin-tabs button:hover { background: var(--paper); color: var(--ink); }
#admin-tabs button:hover .ico { transform: translateY(-2px); color: var(--blue); }
#admin-tabs button[aria-selected="true"] { background: var(--blue-soft); color: var(--blue-deep); border-bottom-color: var(--yellow-deep); }
#admin-tabs button[aria-selected="true"] .ico { color: var(--blue-deep); }
#admin-tabs .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#admin[data-big] #admin-tabs button { font-size: 13px; }

#admin-panel { overflow: auto; padding: 14px 16px 28px; scrollbar-gutter: stable; }
.panel { animation: panel-in .28s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.panel h2.sub { margin-top: 16px; font-size: 15px; }
.panel h3 { margin: 12px 0 4px; font-size: 13px; color: var(--blue-deep); }
.panel .lead { margin: 0 0 14px; color: var(--ink-2); line-height: 1.45; }
/* Panel heads (0.7): every panel opens with its title and its chord. */
.panel-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.panel-head h2 { margin: 0; }
.panel-head .ico { color: var(--blue); }
.panel-head .ico svg { width: 22px; height: 22px; }
.panel-head .chord { margin-left: auto; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.panel-head .chord kbd { font-size: 11px; }

/* Fieldsets are cards with a pill legend. */
.panel fieldset {
  border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px 14px; margin: 0 0 14px;
  background: var(--surface); box-shadow: var(--shadow-card);
}
.panel legend {
  padding: 3px 11px; font-weight: 800; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue-deep); background: var(--blue-soft); border-radius: 999px;
}
.row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 8px; margin: 7px 0; }
.row label { color: var(--ink-2); }
.row input[type="text"], .row input[type="number"], .row select, .row textarea, .folder-pick input, .folder-pick select, .asset-pick select, .url-add input {
  width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
  -webkit-user-select: text; user-select: text; transition: border-color .15s, box-shadow .15s;
}
.row input:focus-visible, .row select:focus-visible, .row textarea:focus-visible, .folder-pick input:focus-visible, .url-add input:focus-visible, .asset-pick select:focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
.row select, .folder-pick select, .asset-pick select { cursor: pointer; }
.row input[type="range"] { width: 100%; accent-color: var(--blue); }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; margin: 0; }
.row .val { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.row.check { grid-template-columns: 1fr; }
.row.check label { display: flex; align-items: center; gap: 9px; color: var(--ink); cursor: pointer; }
.row.four { grid-template-columns: 60px 1fr 60px 1fr; }
.row.four input[type="color"], .row input[type="color"] { width: 100%; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.hint { color: var(--ink-3); font-size: 12px; margin: 4px 0 6px; line-height: 1.45; }
details.fold { margin: 8px 0 4px; border-top: 1px dashed var(--line); padding-top: 6px; }
details.fold summary, details.howto summary { cursor: pointer; font-weight: 700; color: var(--ink-2); padding: 4px 0; list-style: none; transition: color .15s; }
details.fold summary:hover, details.howto summary:hover { color: var(--blue-deep); }
details.fold summary::before, details.howto summary::before { content: "+ "; color: var(--blue-deep); }
details.fold[open] summary::before, details.howto[open] summary::before { content: "- "; }
details.fold summary::-webkit-details-marker, details.howto summary::-webkit-details-marker { display: none; }
.folder-pick { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.folder-status { font-size: 12px; color: var(--ink-2); margin: 4px 0 8px; display: grid; gap: 3px; }
.folder-status code { font-family: var(--mono); font-size: 11px; color: var(--ink); word-break: break-all; }
.asset-pick { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.url-add { display: inline-flex; gap: 6px; flex: 1; min-width: 220px; }
.dropzone {
  margin: 10px 0; padding: 18px; text-align: center; color: var(--ink-3); border: 2px dashed var(--line); border-radius: var(--r);
  transition: border-color .15s, background .15s;
}
.panel.dragging .dropzone { border-color: var(--blue); color: var(--blue-deep); background: var(--blue-soft); }
/* Strip layout picker (Output, Photo mode): live previews from sheet.js. */
.layouts { display: flex; gap: 8px; flex-wrap: wrap; }
.layout-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; min-width: 96px;
  border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 11px;
  transition: transform .15s var(--ease), border-color .15s;
}
.layout-pick:hover { transform: translateY(-2px); border-color: var(--blue); }
.layout-pick canvas { display: block; height: 84px; width: auto; border: 1px solid var(--line); }
.layout-pick[aria-pressed="true"] { border-color: var(--yellow-deep); box-shadow: 0 0 0 2px var(--yellow); color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.grow { flex: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 7px 13px; border-radius: 8px; cursor: pointer; font-weight: 700;
  box-shadow: 0 1px 0 rgba(27, 31, 59, .04); transition: transform .12s var(--ease), box-shadow .15s, border-color .15s, color .15s, filter .15s;
}
.btn:hover { border-color: var(--blue); color: var(--blue-deep); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(var(--blue-rgb), .5); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--blue-soft); border-color: var(--blue); }
.btn.primary { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: var(--shadow-blue); }
.btn.primary:hover { color: #fff; filter: brightness(1.08); }
.btn.warn { background: var(--grad-warn); border-color: var(--yellow-deep); color: #1B1F3B; }
.btn.warn:hover { color: #1B1F3B; filter: brightness(1.03); }
.btn.danger { background: var(--grad-danger); border-color: transparent; color: #fff; }
.btn.danger:hover { color: #fff; filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; filter: none; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.tiny { padding: 2px 7px; font-size: 11px; }
.btn .ico svg { width: 15px; height: 15px; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 5px 10px; font-size: 13px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-family: var(--mono); word-break: break-all; -webkit-user-select: text; user-select: text; }
.status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.status.ok { background: var(--ok-soft); color: var(--ok); }
.status.bad { background: var(--danger-soft); color: var(--danger); }
pre.log {
  margin: 0; padding: 10px; max-height: 260px; overflow: auto; font-family: var(--mono); font-size: 11px;
  background: var(--log-bg); color: var(--log-fg); border-radius: 8px; white-space: pre-wrap; -webkit-user-select: text; user-select: text;
}
kbd {
  display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); border-bottom-width: 2px;
  background: var(--surface-2); font-family: var(--mono); font-size: 12px; color: var(--ink);
}