/* DJ editor page. The only stylesheet for #djedit: flat cards on the page background, one surface per
   section, fields drawn with the shared theme colours so light and dark mode match. */
body:has(#djedit:not([hidden])) .masthead{display:none}
#djedit{max-width:1200px;margin:0 auto}
#djedit .section-intro{margin:14px 0 20px}
#djedit .section-intro h2{font:600 30px/1.25 'Segoe UI',sans-serif;letter-spacing:-.6px}
#djedit .section-intro p{display:none}
#djedit #dj-editor-title,#djedit #dj-modal-close{display:none}
#djedit>.dj-panel{padding:0;background:none;border:0;box-shadow:none}

/* Two columns: who the DJ is on the left, what they say on the right. */
#djedit #dj-form{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start;gap:20px;padding:0}
#djedit #dj-form .personality-section{min-width:0;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
#djedit #dj-form>.identity-section{grid-column:1;position:sticky;top:12px}

/* Tabs on the right; only the chosen tab's sections show. */
#djedit .dj-tab-panels{grid-column:2;display:flex;flex-direction:column;gap:20px;min-width:0}
#djedit .dj-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
#djedit .dj-tabs button{min-height:40px;padding:8px 16px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;box-shadow:none;color:var(--muted);font-size:13px;white-space:nowrap}
#djedit .dj-tabs button:hover{color:var(--ink)}
#djedit .dj-tabs button.active{color:var(--ink);border-bottom-color:var(--orange);font-weight:600}
#djedit #dj-form:not([data-tab=personality]) :is(.brief-section,.guidance-section,.traits-section),
#djedit #dj-form:not([data-tab=samples]) .sample-section,
#djedit #dj-form:not([data-tab=video]) .video-section,
#djedit #dj-form:not([data-tab=gallery]) .gallery-section,
#djedit #dj-form:not([data-tab=history]) .versions-section{display:none}
#djedit #dj-form>.save-section{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;padding:0;border:0;background:none}
#djedit #dj-delete-profile{margin-right:auto}

#djedit .personality-section h3{margin:0 0 6px;font-size:17px;line-height:1.3}
#djedit .section-description{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.6}
#djedit label{display:block;font-size:12px;font-weight:600;margin:16px 0 0}
#djedit .personality-section>label:first-of-type{margin-top:0}
#djedit input,#djedit textarea,#djedit select{font-size:13px;font-weight:400;line-height:1.6;margin-top:6px;border:1px solid var(--line);border-radius:8px;background:var(--field,var(--paper));color:var(--ink);box-shadow:none}
#djedit textarea{min-height:110px}
#djedit #dj-personality{min-height:190px}
#djedit .footnote{margin:8px 0;font-size:12px}
#djedit button{font-size:12px;min-height:40px}

/* Identity column: photo and voice stacked. */
#djedit .dj-assets{display:flex;flex-direction:column;gap:20px;margin:22px 0}
#djedit .dj-asset{padding:0;border:0;background:none;flex-direction:column-reverse;align-items:flex-start;gap:12px}
#djedit .dj-asset img{width:96px;height:96px;flex-basis:96px;border-radius:12px}
#djedit .dj-asset button{white-space:normal;font-size:12px}

/* Traits: plain fields in two columns. Each title line carries its own "Writer may revise" switch. */
#djedit #dj-profile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;margin:0;padding:0;border:0;background:none}
#djedit #dj-profile-fields>h3,#djedit #dj-profile-fields>.footnote,#djedit #dj-profile-fields>.station-controls,#djedit #dj-profile-versions{grid-column:1/-1}
#djedit .profile-field{min-width:0}
#djedit .profile-field.wide{grid-column:1/-1}
#djedit .profile-field-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#djedit .profile-field-head>label:first-child{margin:0}
#djedit .profile-field textarea{display:block;min-height:96px}
#djedit .profile-ai{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap;cursor:pointer}
#djedit .profile-ai input{width:14px;height:14px;margin:0;flex:0 0 14px;accent-color:var(--orange)}
#djedit #dj-profile-fields>.station-controls{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0}

#djedit #dj-suggest{margin-top:16px;width:auto}
#djedit #dj-save{position:static;box-shadow:none;padding:12px 26px}
#djedit #dj-test-audio{width:100%;margin-top:14px}
#djedit .sample-section>button{margin:0 8px 8px 0}
#djedit #dj-test-script{font-size:13px;line-height:1.7;padding:12px;border-radius:8px;background:var(--soft)}
#djedit .dj-sample-queue button{min-height:0}

@media(max-width:900px){#djedit #dj-form{grid-template-columns:240px minmax(0,1fr)}#djedit #dj-profile-fields{grid-template-columns:1fr}}
@media(max-width:680px){#djedit #dj-form>.identity-section{position:static}#djedit #dj-form{display:flex;flex-direction:column;gap:14px}#djedit #dj-form .personality-section{width:100%;padding:18px}#djedit .dj-tab-panels{gap:14px}#djedit .dj-assets{display:grid;grid-template-columns:1fr 1fr}#djedit .dj-asset img{width:80px;height:80px;flex-basis:80px}#djedit #dj-save{width:100%}nav{flex-wrap:wrap}}

/* DJ video keyframes and break video controls */
#djedit .djv-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
#djedit .djv-row input{flex:1 1 180px;min-width:0}
#djedit .djv-frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:14px 0}
#djedit .djv-frames>p{grid-column:1/-1;margin:0}
#djedit .djv-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:14px 0 0}
#djedit .djv-gallery>p{grid-column:1/-1;margin:0}
#djedit .djv-video{padding:10px;border:1px solid var(--line);border-radius:10px;min-width:0}
#djedit .djv-video video{display:block;width:100%;aspect-ratio:1;border-radius:6px;background:#000}
#djedit .djv-video h4{margin:10px 0 2px;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
#djedit .djv-video p{margin:0;font-size:12px;color:var(--muted)}
#djedit .djv-frame{padding:10px;border:1px solid var(--line);border-radius:10px;min-width:0}
#djedit .djv-frame.djv-has-new{border-color:var(--orange)}
#djedit .djv-images{display:flex;gap:6px}
#djedit .djv-images figure{flex:1 1 0;margin:0;min-width:0}
#djedit .djv-images img,#djedit .djv-empty{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:var(--soft)}
#djedit .djv-empty{display:grid;place-items:center;font-size:12px;color:var(--muted)}
#djedit .djv-images figcaption{font-size:11px;color:var(--muted);margin-top:4px}
#djedit .djv-direction{font-size:13px;margin:8px 0 0}
#djedit .djv-move{min-width:40px;font-size:15px}
#djedit .djv-task{font-size:13px;margin:6px 0}
.djv-qc{display:inline-block;font-size:11px;padding:1px 6px;border-radius:8px;background:var(--soft);color:var(--ink)}
.djv-qc-fail{color:var(--orange)}
.djv-qc-pass{color:var(--green)}
.djv-slot{display:inline-flex;gap:6px;align-items:center;font-size:12px}
.djv-slot .djv-clip{display:inline-flex;gap:6px;align-items:center}
@media(max-width:680px){#djedit .djv-frames{grid-template-columns:1fr}}