/* Period looks. Chosen with the "Look" selector; stored per browser.
   Each look only sets variables plus a few signature touches. */

/* ---------- DX7 (1983): chocolate-brown case, cream silkscreen, mint membrane keys,
   burgundy accents, red LED voice display, grey-green LCD ---------- */
html:root[data-skin="dx7"] {
  color-scheme: dark;
  --bg: #231d19; --panel: #2e2620; --text: #efe6d3; --muted: #a8998a; --line: #463b32;
  --accent: #7cc4ae; --accent-soft: #2e443d; --sel: #3a5249; --focus: #7cc4ae; --star: #ff4433; --star-avg: #7cc4ae;
  --danger: #ff5a4a; --drop: #37574b; --input: #3a3029; --input-text: #efe6d3;
  --playing: #5e2129; --playing-strong: #ff5a4a;
  --btn: #3b3129; --on-accent: #1b1613; --ok: #7cc4ae; --radius: 2px;
  --header: #1a1512; --title: #efe6d3; --led: #ff4433;
  --font-ui: "Barlow", "Segoe UI", sans-serif; --font-title: "Michroma", sans-serif;
  --font-mono: "Share Tech Mono", Consolas, monospace;
  --lcd-bg: #a2ad8e; --lcd-text: #18200f;
  --op1: #ff6f5e; --op2: #f2a65a; --op3: #e8d36a; --op4: #7cc4ae; --op5: #7fb2e5; --op6: #d29be0;
}
html[data-skin="dx7"] header { box-shadow: inset 0 -3px 0 #7a2c35; }
html[data-skin="dx7"] h1 { letter-spacing: .14em; font-size: 15px; }
html[data-skin="dx7"] h1::before { content: "■ "; color: var(--accent); }
html[data-skin="dx7"] button.danger { background: #6e2730; border-color: #6e2730; color: #f5d9d6; }
html[data-skin="dx7"] #catList .n, html[data-skin="dx7"] #listenList .n,
html[data-skin="dx7"] #count { text-shadow: 0 0 6px rgba(255, 68, 51, .65); font-family: var(--font-mono); }
html[data-skin="dx7"] #count { color: var(--led); }
html[data-skin="dx7"] tr.selected .warn { color: #ffaea4; }   /* --danger is too dark on --sel */

/* ---------- DX7II / TX802 (1986): graphite case, backlit yellow-green LCD, orange accents ---------- */
html:root[data-skin="dx7ii"] {
  color-scheme: dark;
  --bg: #222427; --panel: #2c2f33; --text: #e6e6e1; --muted: #9a9ea4; --line: #42464c;
  --accent: #c9da52; --accent-soft: #3a4022; --sel: #43492a; --focus: #c9da52; --star: #f59b2a; --star-avg: #8fb0c9;
  --danger: #f0703c; --drop: #3f4a24; --input: #383c41; --input-text: #e6e6e1;
  --playing: #57391a; --playing-strong: #f59b2a;
  --btn: #3a3e43; --on-accent: #1d2208; --ok: #c9da52; --radius: 3px; --hl-mix: 20%;
  --header: #18191b; --title: #e6e6e1; --led: #c9da52;
  --font-ui: "Barlow", "Segoe UI", sans-serif; --font-title: "Michroma", sans-serif;
  --font-mono: "Share Tech Mono", Consolas, monospace;
  --lcd-bg: #b7c84a; --lcd-text: #1a2105;
  --op1: #ff7a5c; --op2: #f59b2a; --op3: #c9da52; --op4: #6fd08c; --op5: #79b8ff; --op6: #c79bff;
}
html[data-skin="dx7ii"] header { box-shadow: inset 0 -2px 0 #f59b2a; }
html[data-skin="dx7ii"] h1 { letter-spacing: .12em; font-size: 15px; }

/* ---------- Brochure '83: cream paper, brown type, orange/mustard stripes ---------- */
html:root[data-skin="brochure"] {
  color-scheme: light;
  --bg: #efe5cf; --panel: #f8f1df; --text: #3a2618; --muted: #78604a; --line: #dccbaa;
  --accent: #b04e10; --accent-soft: #f4dcbc; --sel: #f1d3a4; --focus: #b04e10; --star: #d99b16; --star-avg: #6f8aa6;
  --danger: #b23a22; --drop: #e7e2a9; --input: #fffaf0; --input-text: #3a2618;
  --playing: #f7c96c; --playing-strong: #a84a14;
  --btn: #fbf5e6; --on-accent: #fff8ec; --ok: #5d8a2e; --radius: 14px;
  --header: #4a2e1d; --header-text: #f8f1df; --title: #fbe3b4; --led: #a84a14;
  --font-ui: "Jost", "Segoe UI", sans-serif; --font-title: "Jost", sans-serif;
  --font-mono: "Share Tech Mono", Consolas, monospace;
  --op1: #b23a22; --op2: #b0500a; --op3: #806500; --op4: #487420; --op5: #2f63a8; --op6: #7a3f8f;
}
html[data-skin="brochure"] header {
  border-bottom: 0;
  box-shadow: 0 4px 0 #e0a72c, 0 8px 0 #d4651c, 0 12px 0 #a8401f;
  margin-bottom: 12px;
}
html[data-skin="brochure"] h1 { font-weight: 700; font-style: italic; font-size: 19px; letter-spacing: .02em; }
html[data-skin="brochure"] header select { background: #6a4630; color: #f8f1df; border-color: #7c563d; }
html[data-skin="brochure"] header option { background: #6a4630; color: #f8f1df; }
html[data-skin="brochure"] header button, html[data-skin="brochure"] header .btn-link { background: #6a4630; color: #f8f1df; border-color: #7c563d; }

/* ---------- Amber and green CRT monitors ---------- */
html:root[data-skin="amber"], html:root[data-skin="green"] {
  color-scheme: dark;
  --font-ui: "VT323", Consolas, monospace; --font-mono: "VT323", Consolas, monospace;
  --font-title: "VT323", monospace; --font-size: 17px; --radius: 0;
}
html:root[data-skin="amber"] {
  --bg: #0b0803; --panel: #100b04; --text: #ffb000; --muted: #a87414; --line: #3a2807;
  --accent: #ffcc4d; --accent-soft: #2a1d06; --sel: #3b2a08; --focus: #ffcc4d; --star: #ffcc4d; --star-avg: #a87414;
  --danger: #ff6a2a; --drop: #2f2a08; --input: #0b0803; --input-text: #ffb000;
  --playing: #503400; --playing-strong: #ffe08a;
  --btn: #140e05; --on-accent: #0b0803; --ok: #ffcc4d; --hl-mix: 20%;
  --header: #0b0803; --title: #ffcc4d; --led: #ffcc4d; --glow: rgba(255, 176, 0, .45);
  --op1: #ffe6a0; --op2: #ffcc4d; --op3: #ffb000; --op4: #e69a00; --op5: #c98a1c; --op6: #b07a18;
}
html:root[data-skin="green"] {
  --bg: #040a05; --panel: #061008; --text: #3dff6e; --muted: #1f9a43; --line: #0f3a1b;
  --accent: #9dffb8; --accent-soft: #0b2a14; --sel: #0f3a1c; --focus: #9dffb8; --star: #9dffb8; --star-avg: #1f9a43;
  --danger: #ffef5a; --drop: #12401f; --input: #040a05; --input-text: #3dff6e;
  --playing: #145a26; --playing-strong: #d6ffe1;
  --btn: #081409; --on-accent: #040a05; --ok: #9dffb8;
  --header: #040a05; --title: #9dffb8; --led: #9dffb8; --glow: rgba(61, 255, 110, .4);
  --op1: #d6ffe1; --op2: #9dffb8; --op3: #3dff6e; --op4: #2fd85a; --op5: #27b84d; --op6: #1fa043;
}
html[data-skin="amber"] body, html[data-skin="green"] body { text-shadow: 0 0 5px var(--glow); }
html[data-skin="amber"] h1, html[data-skin="green"] h1 { font-size: 24px; font-weight: 400; letter-spacing: .05em; }
html[data-skin="amber"] h1::after, html[data-skin="green"] h1::after { content: "_"; animation: blink 1.1s steps(1) infinite; }
html[data-skin="amber"] body::after, html[data-skin="green"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
html[data-skin="amber"] .stars span, html[data-skin="green"] .stars span { font-size: 16px; }
/* The pixel font runs small: lift the fixed small print */
html[data-skin="amber"] :is(.hint, .keys, h2, code, #slots li .lbl, .sugg b, .sugg.agree, th[data-dir]::after),
html[data-skin="green"] :is(.hint, .keys, h2, code, #slots li .lbl, .sugg b, .sugg.agree, th[data-dir]::after) { font-size: 15px; }
@keyframes blink { 50% { opacity: 0; } }
/* Keep editor text readable over bright operator tints */
html:is([data-skin="amber"], [data-skin="green"]) #editDlg .alg :is(g.car, g.on) .lvl { opacity: .25; }
html[data-skin="amber"] .ed-card.on { background: color-mix(in srgb, var(--c) 3%, var(--panel)); }
html[data-skin="brochure"] .env-graph :is(.sus-t, .mk-t) { fill: #9a430c; }
html:is([data-skin="amber"], [data-skin="green"]) .rnd-help { min-height: 5em; }   /* Random help wraps to 4 lines in the pixel font */
/* One colour on a monitor: the operators' envelopes also differ by their dashes */
html:is([data-skin="amber"], [data-skin="green"]) :is(#edEnv, #edEnvQ) .c.op2 { stroke-dasharray: 6 2; }
html:is([data-skin="amber"], [data-skin="green"]) :is(#edEnv, #edEnvQ) .c.op3 { stroke-dasharray: 2 2; }
html:is([data-skin="amber"], [data-skin="green"]) :is(#edEnv, #edEnvQ) .c.op4 { stroke-dasharray: 8 2 2 2; }
html:is([data-skin="amber"], [data-skin="green"]) :is(#edEnv, #edEnvQ) .c.op5 { stroke-dasharray: 4 4; }
html:is([data-skin="amber"], [data-skin="green"]) :is(#edEnv, #edEnvQ) .c.op6 { stroke-dasharray: 1 3; }

/* ---------- LCD voice-name cells (DX7, DX7II) ---------- */
html[data-skin="dx7"] tbody tr td.name, html[data-skin="dx7ii"] tbody tr td.name {
  background: var(--lcd-bg); color: var(--lcd-text); letter-spacing: .04em;
  border-bottom-color: var(--bg);
}
html[data-skin="dx7"] #slots li input, html[data-skin="dx7ii"] #slots li input {
  background: var(--lcd-bg); color: var(--lcd-text); border-color: transparent;
}
html[data-skin="dx7"] tbody tr.selected td.name, html[data-skin="dx7ii"] tbody tr.selected td.name {
  box-shadow: inset 0 0 0 2px var(--accent);
}
html[data-skin="dx7"] tbody tr.playing td.name, html[data-skin="dx7ii"] tbody tr.playing td.name {
  box-shadow: inset 0 0 0 2px var(--playing-strong);
}
/* Light operator colours on the dark looks: dark text on the operator chips */
html:root:is([data-skin="dx7"], [data-skin="dx7ii"], [data-skin="amber"], [data-skin="green"]) { --chip-text: #111; }
html:root[data-skin="brochure"] { --chip-text: #fff; }