/* Mutation-Rechner – ergänzt assets/app.css (Theme-Variablen + Karten/Buttons). */
:root{ --mut-stat:var(--amber); --mut-appear:var(--accent); --mut-appear3:#b98cff; }

/* ---- Zugang ---- */
.gate-body{max-width:540px}
.gate-lead{margin:0 0 14px;color:var(--text)}
#gate-pw{margin-bottom:12px}
.gate-actions{display:flex;gap:10px;flex-wrap:wrap}
.gate-msg{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:13.5px;border:1px solid var(--line)}
.gate-msg.err{color:var(--bad);border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.07)}
.gate-msg.ok{color:var(--good);border-color:rgba(95,224,160,.5);background:rgba(95,224,160,.07)}
.gate-hint{margin:16px 0 0;color:var(--muted);font-size:12.5px;line-height:1.6;border-top:1px solid rgba(34,50,78,.6);padding-top:12px}

/* ---- Kopf des Rechners ---- */
.calc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.calc-head h2{margin:0}
.calc-head-right{display:flex;align-items:center;gap:12px}
.save-state{font-size:12px;color:var(--muted);font-family:var(--display);letter-spacing:.3px;min-height:16px}
.save-state.saved{color:var(--good)}
.save-state.saving{color:var(--amber)}
.save-state.err{color:var(--bad)}

/* ---- Inkubator-Umschaltung (Tonith / Wymir) ---- */
.inc-switch{display:inline-flex;flex-wrap:wrap;gap:3px;background:rgba(7,11,20,.7);border:1px solid var(--line);border-radius:11px;padding:3px;margin-bottom:8px}
.inc-btn{background:transparent;border:0;border-radius:8px;color:var(--muted);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.3px;padding:8px 18px;cursor:pointer;transition:background .12s, color .12s}
.inc-btn:hover{color:var(--text)}
.inc-btn.on{background:var(--accent);color:#04121a}
.inc-hint{color:var(--muted);font-size:12px;margin:0 0 12px}
.inc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.inc-row .inc-switch{margin-bottom:0}
.inc-edit{background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.3px;border-radius:9px;padding:7px 11px;cursor:pointer;transition:color .12s, box-shadow .12s, background .12s}
.inc-edit:hover{color:var(--accent);box-shadow:inset 0 0 0 1px rgba(55,208,230,.5);background:rgba(55,208,230,.08)}
.inc-namer{background:rgba(7,11,20,.55);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.inc-namer>label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-family:var(--display);margin-bottom:8px}
.inc-namer-row{display:flex;gap:8px;flex-wrap:wrap}
.inc-namer-row input{flex:1;min-width:130px}

/* ---- Log-Buttons ---- */
.log-actions{display:flex;flex-direction:column;gap:12px}
.log-btn{font-family:var(--display);font-weight:800;letter-spacing:.5px;font-size:17px;border:0;border-radius:12px;padding:18px 14px;cursor:pointer;background:transparent;transition:transform .1s, filter .18s, box-shadow .2s, background .15s}
.log-btn:active{transform:translateY(1px)}
.log-none{background:linear-gradient(180deg,rgba(95,224,160,.18),rgba(95,224,160,.08));color:var(--good);box-shadow:inset 0 0 0 1px rgba(95,224,160,.45)}
.log-none:hover{filter:brightness(1.1);box-shadow:inset 0 0 0 1px var(--good),0 10px 26px -14px rgba(95,224,160,.6)}
.log-mut-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.log-mut-row .log-btn{font-size:14.5px;padding:15px 8px}
.log-mut[data-kind="stat"]{color:var(--mut-stat);background:rgba(255,180,84,.09);box-shadow:inset 0 0 0 1px rgba(255,180,84,.5)}
.log-mut[data-kind="stat"]:hover{background:rgba(255,180,84,.17);box-shadow:inset 0 0 0 1px var(--mut-stat),0 10px 24px -14px rgba(255,180,84,.6)}
.log-mut[data-kind="appear"]{color:var(--mut-appear);background:rgba(55,208,230,.09);box-shadow:inset 0 0 0 1px rgba(55,208,230,.5)}
.log-mut[data-kind="appear"]:hover{background:rgba(55,208,230,.17);box-shadow:inset 0 0 0 1px var(--mut-appear),0 10px 24px -14px rgba(55,208,230,.6)}
.log-mut[data-kind="appear3"]{color:var(--mut-appear3);background:rgba(185,140,255,.11);box-shadow:inset 0 0 0 1px rgba(185,140,255,.55)}
.log-mut[data-kind="appear3"]:hover{background:rgba(185,140,255,.2);box-shadow:inset 0 0 0 1px var(--mut-appear3),0 10px 24px -14px rgba(185,140,255,.6)}

.log-sub{display:flex;gap:10px;margin:12px 0 4px;flex-wrap:wrap}
.mini-btn{background:transparent;border:0;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:12.5px;padding:7px 12px;cursor:pointer;transition:color .15s, box-shadow .15s, background .15s}
.mini-btn:hover{color:var(--text);box-shadow:inset 0 0 0 1px #2c4062}
.mini-danger:hover{color:var(--bad);box-shadow:inset 0 0 0 1px rgba(255,107,107,.5);background:rgba(255,107,107,.06)}

/* ---- Statistik-Kacheln ---- */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:18px 0 6px}
.stat-card{background:rgba(7,11,20,.55);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat-card .sc-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-family:var(--display)}
.stat-card .sc-val{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.15;margin-top:4px}
.stat-card .sc-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.stat-card.hi .sc-val{color:var(--amber);text-shadow:0 0 16px rgba(255,180,84,.35)}
.stat-card.cy .sc-val{color:var(--accent)}

/* ---- Verlauf (Punkte) ---- */
.seq-title{font-family:var(--display);font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin:20px 0 10px}
.seq-count{opacity:.7;font-size:11px;margin-left:4px;letter-spacing:.5px}
.sequence{display:flex;flex-wrap:wrap;gap:6px}
.seq-dot{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-family:var(--display);font-weight:700;position:relative;cursor:pointer;transition:transform .1s}
.seq-dot:hover{transform:translateY(-1px)}
.seq-dot.d-none{background:rgba(95,224,160,.12);color:var(--good);box-shadow:inset 0 0 0 1px rgba(95,224,160,.4)}
.seq-dot.d-mut,.seq-dot.d-stat{background:rgba(255,180,84,.16);color:var(--mut-stat);box-shadow:inset 0 0 0 1px rgba(255,180,84,.55)}
.seq-dot.d-appear{background:rgba(55,208,230,.16);color:var(--mut-appear);box-shadow:inset 0 0 0 1px rgba(55,208,230,.55)}
.seq-dot.d-appear3{background:rgba(185,140,255,.18);color:var(--mut-appear3);box-shadow:inset 0 0 0 1px rgba(185,140,255,.6)}
.seq-empty{color:var(--muted);font-size:13.5px;padding:4px 0}

/* Legende + Typ-Kacheln */
.seq-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.seq-legend .lg{display:inline-flex;align-items:center;gap:6px}
.seq-legend .lg::before{content:"";width:12px;height:12px;border-radius:4px}
.lg-none::before{background:rgba(95,224,160,.7)}
.lg-stat::before{background:var(--mut-stat)}
.lg-appear::before{background:var(--mut-appear)}
.lg-appear3::before{background:var(--mut-appear3)}
.type-block{margin-top:4px}
.stat-card.t-stat .sc-val{color:var(--mut-stat)}
.stat-card.t-appear .sc-val{color:var(--mut-appear)}
.stat-card.t-appear3 .sc-val{color:var(--mut-appear3)}

/* Notizen (optional pro Versuch) */
.seq-dot.has-note::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(7,11,20,.9)}
.note-hint{color:var(--muted);font-size:12px;margin:10px 0 0}
.entry-editor{margin-top:12px;background:rgba(7,11,20,.55);border:1px solid var(--line);border-radius:12px;padding:14px}
.entry-editor-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.entry-editor-head #entry-title{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.3px}
.entry-time{color:var(--muted);font-size:12px}
.ee-field{margin-bottom:12px}
.ee-field>label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-family:var(--display);margin-bottom:6px}
.ee-seg{display:inline-flex;flex-wrap:wrap;gap:3px;background:rgba(7,11,20,.7);border:1px solid var(--line);border-radius:10px;padding:3px}
.ee-opt{background:transparent;border:0;border-radius:7px;color:var(--muted);font-family:var(--display);font-weight:700;font-size:12.5px;padding:7px 13px;cursor:pointer;transition:background .12s, color .12s}
.ee-opt:hover{color:var(--text)}
.ee-opt.on{background:var(--accent);color:#04121a}
.entry-editor input{width:100%}
.ee-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.notes-list{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.notes-title{font-family:var(--display);font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:2px}
.note-row{display:flex;align-items:center;gap:10px;background:rgba(9,15,26,.5);border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px}
.note-jump{flex:0 0 auto;background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);border-radius:7px;padding:3px 9px;font-family:var(--display);font-size:12px;cursor:pointer;transition:color .15s, box-shadow .15s}
.note-jump:hover{color:var(--accent);box-shadow:inset 0 0 0 1px rgba(55,208,230,.5)}
.nd{width:9px;height:9px;border-radius:3px;flex:0 0 auto;display:inline-block}
.nd-none{background:rgba(95,224,160,.75)} .nd-mut,.nd-stat{background:var(--mut-stat)} .nd-appear{background:var(--mut-appear)} .nd-appear3{background:var(--mut-appear3)}
.note-typ{color:var(--muted);flex:0 0 auto;min-width:80px}
.note-text{color:var(--text);flex:1;word-break:break-word}

/* ---- Rate vs. Erwartung (Forest-Plot: Punkt = Rate, Balken = 95-%-Spanne, grün = Richtwert) ---- */
.rate-block{margin-top:4px}
.rate-lead{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--text)}
.rate-lead b{color:var(--accent);font-family:var(--display)}
.rate-group{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-family:var(--display);margin:12px 0 2px}
.rate-row{display:grid;grid-template-columns:118px minmax(120px,1fr) 250px;align-items:center;gap:12px;padding:5px 0}
.rr-label{font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rate-row.main .rr-label{color:var(--text);font-weight:800}
.rr-plot{position:relative;height:18px;background:rgba(7,11,20,.55);border:1px solid var(--line);border-radius:6px}
.rate-row.main .rr-plot{height:22px}
.rp-band{position:absolute;top:0;bottom:0;background:rgba(95,224,160,.16);box-shadow:inset 1px 0 0 rgba(95,224,160,.55),inset -1px 0 0 rgba(95,224,160,.55)}
.rp-ci{position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:rgba(55,208,230,.5)}
.rp-ci.clip{-webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);mask-image:linear-gradient(90deg,#000 60%,transparent)}
.rp-dot{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(55,208,230,.7)}
.rate-row.k-stat .rp-ci{background:rgba(255,180,84,.5)}
.rate-row.k-stat .rp-dot{background:var(--mut-stat);box-shadow:0 0 8px rgba(255,180,84,.6)}
.rate-row.k-appear3 .rp-ci{background:rgba(185,140,255,.55)}
.rate-row.k-appear3 .rp-dot{background:var(--mut-appear3);box-shadow:0 0 8px rgba(185,140,255,.6)}
.rr-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:var(--display)}
.rr-num{white-space:nowrap;font-size:12.5px}
.rr-num b{font-size:14px;color:var(--text)}
.rr-num span{color:var(--muted);font-size:11.5px;margin-left:6px}
.rv{font-size:11.5px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.rv-ok{color:var(--accent)} .rv-hi{color:var(--good)} .rv-lo{color:var(--amber)} .rv-few{color:var(--muted);font-weight:600}
.rate-row.axis{padding:0}
.rr-axis{height:14px;background:none;border:0}
.rr-axis span{position:absolute;top:0;transform:translateX(-50%);font-size:10px;color:var(--muted);font-family:var(--display)}
.rate-note{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.55}
@media(max-width:560px){
  .rate-row{grid-template-columns:84px 1fr;column-gap:10px;row-gap:3px}
  .rr-meta{grid-column:2}
  .rate-row.axis .rr-meta{display:none}
}

@media(max-width:560px){
  .log-btn{font-size:15px;padding:16px 10px}
  .log-mut-row .log-btn{font-size:13px;padding:13px 6px}
  .stat-card .sc-val{font-size:22px}
}
@media(max-width:460px){ .log-mut-row{grid-template-columns:1fr} }