/* look.css — Showstudio im Look des Valueverse-Players (Thomas 6.11.: „Diese Seiten gehören zusammen“).
   Wird von layout.mjs auf JEDER Seite des Studio-Hosts geladen, nach dem Button-Kit (kit/teamwave-buttons.css, kit/timeline-chips.css)
   und vor den Seitenstilen. Dunkel ist Standard (Inline-Skript im <head>), hell über html[data-theme="light"] wie im Player.
   Enthält nur: Kopfzeile, Typografie, Flächen und das Einpassen der Kit-Knöpfe. Keine eigenen Knopf-Optiken mehr. */

/* Helle Kit-Variante (kit/teamwave-light.css): unsere Farbtoken und den Seitenhintergrund behalten */
html[data-tw-theme="light"]{--ink:#121217;--muted:#68666b;--line:rgba(18,18,23,.17)}
html[data-tw-theme="light"] body{background:var(--paper);color:var(--ink)}

/* ── Kopfzeile (wie .play-bar im Player, hier klebend über die volle Breite) ── */
.tw-head{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:18px;min-height:72px;padding:0 clamp(16px,2.4vw,34px);border-bottom:1px solid var(--line);background:var(--header-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-width:0}
.tw-head .play-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:none;min-height:40px}
.tw-head .play-wave,.tw-head .play-word{height:22px;width:auto;display:block}
.tw-head .word-light{display:none}
html[data-theme="light"] .tw-head .word-dark{display:none}
html[data-theme="light"] .tw-head .word-light{display:block;height:20px}
.tw-head-menu{display:contents}
.tw-head .play-nav{display:flex;align-items:center;gap:10px;justify-self:center;min-width:0}
.tw-head .play-nav .tw-chip{text-decoration:none}
.tw-head-tools{display:flex;align-items:center;gap:12px;min-width:0;justify-content:flex-end}
.tw-head-fixed{display:flex;align-items:center;gap:10px;flex:none}
.tw-head .lang{font:500 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;white-space:nowrap}
.tw-head .lang a{display:inline-flex;align-items:center;min-height:36px;color:var(--muted);text-decoration:none;text-transform:none}
.tw-head .lang a.on{color:var(--ink);text-decoration:underline;border:0}
.tw-head .play-logout{margin:0;display:inline}
.tw-head .play-logout .linkish{min-height:36px;background:none;border:0;padding:0;cursor:pointer;font:500 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.tw-head .play-logout .linkish:hover{color:var(--ink)}
.tw-head .badge{margin-left:4px}
.tw-head .play-theme{min-width:0;height:36px;gap:6px}
.tw-head .play-theme svg{width:15px;height:15px;display:block}
.tw-head .play-theme>span{display:inline-flex;align-items:center;gap:6px}
.tw-head .play-theme .to-light,html[data-theme="dark"] .tw-head .play-theme .to-dark{display:none}
html[data-theme="dark"] .tw-head .play-theme .to-light{display:inline-flex}
.tw-head .menu{display:none;margin:0;background:none;border:0;padding:8px;cursor:pointer}
.tw-head .menu span{display:block;width:24px;height:1px;background:var(--ink);margin:7px 0}
@media(max-width:1023px){
  .tw-head{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .tw-head-fixed{justify-self:end}
  .tw-head-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;flex-direction:column;align-items:stretch;gap:16px;padding:16px clamp(16px,2.4vw,34px) 20px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 40px var(--float-shadow)}
  .tw-head-menu.open{display:flex}
  .tw-head .play-nav{justify-self:stretch;flex-wrap:wrap}
  .tw-head .play-nav .tw-chip{flex:1 1 auto}
  .tw-head-tools{justify-content:flex-start;flex-wrap:wrap}
  .tw-head .menu{display:block}
}
@media(max-width:549px){
  .tw-head{padding:0 16px}
  .tw-head .play-wave{display:none}
  .tw-head .play-theme .lbl{display:none}
}

/* ── Kit-Knöpfe einpassen (gleiche Schrift wie im Player) ── */
.tw-chip,.tw-button--text,.tw-button--label{font-family:"Space Grotesk",system-ui,sans-serif;font-size:13px;text-decoration:none;letter-spacing:0;text-transform:none}
.tw-chip--large{font-size:13px}
.tw-button.full{width:100%}
.tw-button--text.tw-button--small{min-width:0}
a.tw-button:hover,a.tw-chip:hover{text-decoration:none}

/* ── Typografie wie im Player: ruhige Grotesk statt fetter Arial ── */
.h-page,.hero h1,.crate-title,.library-title,.playlist-panel h2,.recordhead h2,.notes h3,.showname,.studio-head [data-title],.step h3,.sheet-title,.show-head h3,.talk-head h2,.card h2,.card h3{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:500;letter-spacing:-.03em}
.h-page{font-size:clamp(28px,3.4vw,36px);line-height:1.1;letter-spacing:-.035em;margin:4px 0 14px}
.hero{padding:26px 0 10px}
.hero h1{font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.035em;margin:10px 0 14px}
.hero .lead{font-size:clamp(16px,1.4vw,19px);color:var(--text-2);margin:0 0 10px}
.hero .lead-s{font-size:15px;color:var(--muted)}
.hero .actions{margin-top:22px}
.eyebrow{font-size:11px}
.crate-title{font-size:22px;line-height:1.2}
.studio-head [data-title]{font-size:28px;line-height:1.15;font-weight:500}
.step h3{font-size:20px;letter-spacing:-.02em;margin:0 0 8px}
.show-head h3{font-size:20px}
.sheet-title{font-size:24px}

/* ── Flächen: Karten mit Radius wie im Player ── */
.card{border-radius:12px}
.steps{gap:14px;margin:26px 0}
.step{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:12px;background:var(--card);padding:18px}
.step-no{color:var(--muted);margin-bottom:14px}
.chip{border-radius:6px}
.flash{border-radius:8px}
.studio-input{border-radius:10px}
.studio-search .studio-input{border-radius:25px;padding-left:44px}
.studio-search-ico{width:44px}
.narrow .card.form{border-radius:14px}
.tablehead{border-radius:0}

/* ── Studio: Reiter (mobil) und Chips ── */
.studio-tabs{display:flex;gap:8px;margin:0 0 16px;border:0}
.studio-tabs .tw-chip{flex:1 1 0}
.chips-scroll .tw-chip{flex:none;scroll-snap-align:start}

/* ── Studio: runde Kit-Knöpfe in den Zeilen (Vorhören, Hinzufügen, Entfernen, Bearbeiten) ── */
.icon-btn{--tw-size:34px;--tw-icon:16px;flex:none;font-size:18px;line-height:1}
.icon-btn.add{font-size:22px}
.trk .icon-btn{--tw-size:32px;--tw-icon:15px}

/* ── Studio: beschriftete Kit-Knöpfe in Kopf, Fuß, Formularen ── */
.head-buttons .tw-button{flex:none}
.playlist-import .tw-button{flex:none}
.show-foot .tw-button{width:100%}
@media(max-width:479px){
  .head-buttons .tw-button,.sheet-actions .tw-button,.show-actions .tw-button{flex:1 1 auto}
  .show-actions .inline-form .tw-button{width:100%}
  .show-foot .tw-button{padding:0 8px;font-size:12px}
}

/* ── Moderations-Panel: Kit-Knöpfe statt eigener Optik ── */
.talk-modes{display:flex;gap:8px;padding:0;background:transparent}
.talk-modes .tw-chip{flex:1 1 0;min-height:40px}
.talk-play{--tw-size:56px;--tw-icon:22px}
.talk-play .talk-play-ico{display:block;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.talk-play.is-playing .talk-play-ico{width:14px;height:16px;border:0;margin:0;background:linear-gradient(90deg,currentColor 0 38%,transparent 38% 62%,currentColor 62%)}
.talk-play.is-cue{background:var(--blue);border-color:var(--blue);color:#fff}
.talk-btn.is-danger{color:#ff8f8f}
.talk-zoom{font-size:18px;line-height:1}
.talk-close{font-size:20px;line-height:1}

/* ── Studio-Player-Leiste: Optik der Player-Transportleiste ── */
.sp-bar{--sp-bg:#1e1c27;--sp-line:#484050;background:var(--sp-bg);border-top:1px solid var(--sp-line);box-shadow:0 -12px 40px #0002;color:#f3f0ea}
html[data-theme="light"] .sp-bar{--sp-bg:#fff;--sp-line:#d6d0de;color:#121217}
.sp-bar .sp-artist,.sp-bar .sp-time,.sp-bar .sp-tag{color:#9a98a8}
html[data-theme="light"] .sp-bar .sp-artist,html[data-theme="light"] .sp-bar .sp-time,html[data-theme="light"] .sp-bar .sp-tag{color:#68666b}
.sp-ctrl{gap:8px}
.sp-btn{--tw-size:36px;--tw-icon:17px;font-size:14px}
.sp-play{--tw-size:44px;--tw-icon:20px}
.sp-add{--tw-size:36px;font-size:20px;line-height:1;margin-right:4px}
.sp-close{--tw-size:36px;font-size:20px;line-height:1}
.sp-prog{flex:0 1 240px;width:240px;min-width:60px;cursor:pointer;touch-action:none;background:none}
.sp-knob{position:absolute;top:50%;left:calc(var(--tw-knob)/2 + (100% - var(--tw-knob))*var(--tw-progress,0%)/100%);width:var(--tw-knob);height:var(--tw-knob);transform:translate(-50%,-50%);border-radius:50%;border:1px solid;border-color:#f7ddff #bf96ce #684c7d;background:radial-gradient(ellipse at 30% 22%,#f9e8ff,#e3bedf 40%,#bf8cc9 75%,#a577b5);box-shadow:inset 0 1px 1px #fff9,0 2px 0 #64416c,0 3px 6px #0008;pointer-events:none;z-index:1}
.sp-prog:focus-visible{outline:2px solid #5db7ff;outline-offset:1px;border-radius:7px}