/* ============================================================
   PLOTTER.CSS — Aussehen des Funktionsplotters (shared/plotter.js).
   Farben wie in trainer.css. Mobile first: Grafik oben, Algebra
   darunter; ab 820 px Algebra links, Grafik rechts (wie GeoGebra).
   ============================================================ */
.plotter{
  --pl-ink: var(--ink, #1B2A4A);
  --pl-soft: var(--ink-soft, rgba(27,42,74,.62));
  --pl-border: var(--border, rgba(27,42,74,.14));
  --pl-grid: rgba(27,42,74,.07);
  --pl-grid-major: rgba(27,42,74,.17);
  --pl-bg: #FFFFFF;
  --pl-panel: var(--paper, #EEF1F6);
  --pl-accent: var(--teal, #2F6F6E);
  --pl-bad: var(--rust, #B0472E);
  color-scheme: light;
  display:flex; flex-direction:column;
  background:var(--pl-bg); color:var(--pl-ink);
  border:1px solid var(--pl-border); border-radius:16px; overflow:hidden;
  box-shadow:0 6px 18px rgba(27,42,74,.07);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.plotter *{box-sizing:border-box;}
.plotter [hidden]{display:none !important;}
.plotter button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer;}
.plotter button:focus-visible, .plotter input:focus-visible, .plotter .pl-def:focus-visible{outline:2px solid var(--pl-accent);outline-offset:2px;}

/* --- Grafik --- */
.pl-graphics{position:relative; height:clamp(280px, 56vh, 560px); min-height:0; border-bottom:1px solid var(--pl-border); user-select:none; -webkit-user-select:none;}
.pl-canvas{display:block; position:absolute; inset:0; width:100%; height:100%;}
.pl-tools{position:absolute; top:8px; left:8px; display:flex; gap:6px;}
.pl-tool{display:flex; align-items:center; gap:5px; height:40px; padding:0 11px 0 9px; border-radius:10px; border:1.5px solid var(--pl-border); background:rgba(255,255,255,.94); font-size:.85rem; font-weight:600; color:var(--pl-soft);}
.pl-tool svg{width:18px; height:18px; fill:currentColor;}
.pl-tool.active{border-color:var(--pl-ink); color:var(--pl-ink); box-shadow:0 2px 0 var(--pl-ink);}
.pl-zoom{position:absolute; right:8px; bottom:8px; display:flex; flex-direction:column; gap:6px;}
.pl-zoom button{width:40px; height:40px; border-radius:10px; border:1.5px solid var(--pl-border); background:rgba(255,255,255,.94); font-size:1.35rem; line-height:1; display:flex; align-items:center; justify-content:center; color:var(--pl-ink);}
.pl-zoom svg{width:18px; height:18px; fill:var(--pl-ink);}
.pl-tip{position:absolute; left:8px; bottom:8px; max-width:calc(100% - 70px); padding:4px 9px; border-radius:8px; background:rgba(255,255,255,.94); border:1px solid var(--pl-border); font-family:Georgia, serif; font-size:1rem; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* --- Algebra / Tabelle --- */
.pl-side{display:flex; flex-direction:column; min-height:0; background:var(--pl-bg);}
.pl-tabs{display:flex; border-bottom:1px solid var(--pl-border);}
.pl-tab{flex:1; padding:10px 0; border:none; background:transparent; font-size:.9rem; font-weight:600; color:var(--pl-soft); border-bottom:2.5px solid transparent;}
.pl-tab.active{color:var(--pl-ink); border-bottom-color:var(--pl-ink);}
.pl-algebra, .pl-table{overflow:auto; min-height:0;}
.pl-list{list-style:none; margin:0; padding:0;}
.pl-item{display:flex; align-items:flex-start; gap:10px; padding:10px 8px 10px 12px; border-bottom:1px solid var(--pl-border);}
.pl-dot{flex:none; width:22px; height:22px; margin-top:2px; border-radius:50%; border:2.5px solid var(--c, var(--pl-ink)); background:var(--c, var(--pl-ink)); padding:0;}
.pl-dot.off{background:transparent;}
.pl-dot.none{border:none; background:transparent;}
.pl-body{flex:1; min-width:0;}
.pl-def{display:inline-block; max-width:100%; font-family:Georgia, 'Iowan Old Style', serif; font-size:1.12rem; line-height:1.45; overflow-wrap:anywhere; border-radius:6px; padding:0 2px; cursor:text;}
.pl-item.fixed .pl-def{cursor:default;}
.pl-def sup{font-size:.72em; line-height:0;}
.pl-def sub{font-size:.72em; line-height:0;}
.pl-def small{font-family:system-ui, sans-serif; font-size:.78rem; color:var(--pl-soft);}
.pl-val{font-weight:600;}
.pl-slider{display:flex; align-items:center; gap:8px; margin-top:4px;}
.pl-slider input[type=range]{flex:1; min-width:0; height:32px; accent-color:var(--pl-accent);}
.pl-min, .pl-max{font-size:.75rem; color:var(--pl-soft); min-width:1.6em; text-align:center;}
.pl-sopt{flex:none; width:32px; height:32px; border:none; background:transparent; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0;}
.pl-sopt svg{width:18px; height:18px; fill:var(--pl-soft);}
.pl-sopt.on, .pl-sopt:hover{background:var(--pl-panel);}
.pl-sopt.on svg{fill:var(--pl-ink);}
.pl-sset{padding:6px 0 2px;}
.pl-serr{flex-basis:100%; margin:0; font-size:.85rem; color:var(--pl-bad);}
.pl-vset{position:absolute; top:56px; left:8px; right:58px; max-width:320px; padding:10px 12px; border-radius:12px; border:1.5px solid var(--pl-border); background:rgba(255,255,255,.97); box-shadow:0 6px 18px rgba(0,0,0,.12); display:flex; flex-direction:column; gap:8px; z-index:3; user-select:text; -webkit-user-select:text;}
.pl-vset[hidden]{display:none;}
.pl-vset > div{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--pl-soft);}
.pl-vset > div > span:first-child{min-width:3.4em;}
.pl-vset input{width:4.6em; min-width:0; flex:1; font-family:Georgia, serif; font-size:1rem; padding:6px 8px; border-radius:8px; border:1.5px solid var(--pl-border); color:var(--pl-ink); background:var(--pl-bg);}
.pl-vset input.bad{border-color:var(--pl-bad);}
.pl-vset .pl-vbtns{justify-content:flex-end; gap:8px;}
.pl-vbtns button{flex:1 1 0; min-width:0; height:36px; padding:0 8px; border-radius:8px; border:1.5px solid var(--pl-border); background:var(--pl-bg); font-weight:600; font-size:.9rem; color:var(--pl-ink);}
.pl-vbtns .pl-vok{background:var(--pl-ink); border-color:var(--pl-ink); color:#fff;}
.pl-del{flex:none; width:32px; height:32px; border:none; background:transparent; font-size:1.3rem; color:var(--pl-soft); border-radius:8px;}
.pl-del:hover{background:var(--pl-panel); color:var(--pl-bad);}
.pl-inputrow{display:flex; align-items:center; gap:10px; padding:8px 8px 8px 12px;}
.pl-plus{flex:none; width:22px; text-align:center; font-size:1.3rem; color:var(--pl-soft);}
.pl-input, .pl-edit{flex:1; width:100%; min-width:0; font-family:Georgia, serif; font-size:1.1rem; padding:9px 10px; border-radius:10px; border:1.5px solid var(--pl-border); background:var(--pl-bg); color:var(--pl-ink);}
.pl-input::placeholder{color:var(--pl-soft); font-style:italic;}
.pl-input:focus, .pl-edit:focus{border-color:var(--pl-accent); outline:none; box-shadow:0 0 0 2px rgba(47,111,110,.18);}
.pl-error{margin:0 12px 8px 44px; font-size:.85rem; font-weight:600; color:var(--pl-bad);}
.pl-body .pl-error{margin:6px 0 0;}
.pl-keys{padding:4px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background:var(--pl-panel); border-top:1px solid var(--pl-border);}
.pl-ktabs{display:flex; gap:4px; margin-bottom:5px;}
.pl-ktabs button{flex:none; min-width:58px; height:34px; padding:0 12px; border:none; border-bottom:2.5px solid transparent; background:transparent; font-size:.9rem; font-weight:600; color:var(--pl-soft);}
.pl-ktabs button.active{color:var(--pl-ink); border-bottom-color:var(--pl-ink);}
.pl-ktabs .pl-kspace{flex:1;}
.pl-ktabs .pl-karrow, .pl-ktabs .pl-kclose{min-width:44px; padding:0 8px; border-radius:8px; font-size:1.15rem; color:var(--pl-ink);}
.pl-ktabs .pl-karrow{background:#DDE3EC; border-bottom:none; margin-left:4px;}
.pl-ktabs .pl-kclose{color:var(--pl-soft); margin-left:4px;}
.pl-kpad{display:grid; gap:5px; grid-auto-rows:42px;}
.pl-kpad button{height:auto; min-width:0; border-radius:8px; border:1px solid var(--pl-border); background:var(--pl-bg); font-family:Georgia, serif; font-size:1.05rem; padding:0; overflow:hidden; white-space:nowrap; box-shadow:0 1px 0 var(--pl-border);}
.pl-kpad button:active{background:var(--pl-panel);}
.pl-kpad button.pl-fn{background:#DDE3EC;}
.pl-kpad button.pl-fn.pl-enter{background:var(--pl-accent); border-color:var(--pl-accent); color:#fff; font-size:min(1.7rem, 7.5cqw); font-weight:700;}
.pl-kpad button.pl-fn[data-k="BS"]{font-size:min(1.35rem, 6cqw);}
.pl-keys{container-type:inline-size;}
.pl-kpad button.on{background:var(--pl-ink); color:#fff;}
/* Handy/Tablet: Tastatur unten angedockt (statt der Systemtastatur) */
.plotter.pl-kb-open .pl-keys{position:fixed; left:0; right:0; bottom:0; z-index:50; box-shadow:0 -6px 18px rgba(27,42,74,.14); color-scheme:light; color:var(--pl-ink);}
@media (min-width:600px){ .plotter.pl-kb-open .pl-keys{padding-left:max(6px, calc((100vw - 760px)/2)); padding-right:max(6px, calc((100vw - 760px)/2));} }
.pl-kbtoggle{flex:none; width:40px; height:40px; border-radius:10px; border:1.5px solid var(--pl-border); background:var(--pl-bg); padding:0; display:flex; align-items:center; justify-content:center; color:var(--pl-soft);}
.pl-kbtoggle svg{width:22px; height:22px; fill:currentColor;}
.pl-kbtoggle.on{border-color:var(--pl-accent); color:var(--pl-accent);}
/* Live-Vorschau: so versteht der Plotter die Eingabe; Tippen setzt den Cursor */
.pl-preview{margin:-2px 8px 8px 44px; min-height:2.2em; padding:9px 10px 7px; border-radius:10px; background:var(--pl-panel); font-family:Georgia, 'Iowan Old Style', serif; font-size:1.15rem; line-height:1.7; overflow-x:auto; white-space:nowrap; cursor:text;}
.pl-body .pl-preview{margin:6px 0 0;}
.pl-preview sup{font-size:.72em;}
.pl-preview .pl-tk{border-radius:3px;}
.pl-preview .pl-ph{display:inline-block; min-width:.9em; padding:0 2px; color:var(--pl-soft); border:1.3px dashed var(--pl-soft); border-radius:4px; line-height:1.1; text-align:center; font-size:.85em;}
.pl-preview .pl-ph.pl-cur{border-style:solid; border-color:var(--pl-accent); color:var(--pl-accent); background:rgba(47,111,110,.12);}
.pl-preview .pl-cur-end{position:relative;}
.pl-preview .pl-cur-end::after{content:''; position:absolute; right:-2px; top:.12em; bottom:.12em; width:1.5px; background:var(--pl-accent); animation:pl-blink 1.06s steps(1) infinite; pointer-events:none;}
@keyframes pl-blink{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){ .pl-preview .pl-cur-end::after{animation:none;} }
.pl-preview .pl-raw{font-family:system-ui, sans-serif; font-size:.95rem;}

.pl-tset{display:flex; gap:12px; padding:10px 12px; flex-wrap:wrap;}
.pl-tset label{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--pl-soft);}
.pl-tset input{width:5em; font-family:Georgia, serif; font-size:1rem; padding:6px 8px; border-radius:8px; border:1.5px solid var(--pl-border); color:var(--pl-ink); background:var(--pl-bg);}
.pl-tset input.bad{border-color:var(--pl-bad);}
.pl-tscroll{overflow-x:auto; padding:0 12px 12px;}
.pl-tab-t{border-collapse:collapse; font-family:Georgia, serif; font-size:1rem; min-width:100%;}
.pl-tab-t th, .pl-tab-t td{border:1px solid var(--pl-border); padding:6px 10px; text-align:center; white-space:nowrap;}
.pl-tab-t th{background:var(--pl-panel); font-weight:600;}
.pl-empty{padding:0 12px 12px; font-size:.9rem; color:var(--pl-soft);}

/* --- Tablet quer / PC: Algebra links, Grafik rechts --- */
@media (min-width:820px){
  .plotter{flex-direction:row-reverse; height:clamp(460px, 76vh, 820px);}
  .pl-graphics{flex:1; height:auto; border-bottom:none; border-left:1px solid var(--pl-border);}
  .pl-side{width:360px; flex:none;}
  .pl-algebra, .pl-table{flex:1;}
  .pl-kpad{gap:4px; grid-auto-rows:40px;}
  .pl-kpad button{font-size:.98rem;}
  .pl-kpad button.pl-word{font-size:.66rem;}
  .pl-kpad button.pl-small{font-size:.74rem; letter-spacing:-.06em;}
  .pl-kpad sub{margin:0 0 0 -1px;}
}
.pl-frac{display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; margin:0 2px; font-size:.92em;}
.pl-frac > span:first-child{border-bottom:1.3px solid currentColor; padding:0 3px;}
.pl-frac > span:last-child{padding:0 3px;}
.pl-tip .pl-frac{font-size:.8em;}
.pl-play{flex:none; width:32px; height:32px; margin-top:-3px; margin-left:-5px; border-radius:50%; border:1.5px solid var(--pl-border); background:var(--pl-bg); display:flex; align-items:center; justify-content:center; padding:0; color:var(--pl-accent);}
.pl-play svg{width:16px; height:16px; fill:currentColor;}
.pl-play.on{background:var(--pl-accent); border-color:var(--pl-accent); color:#fff;}
.pl-more{flex:none; width:32px; height:32px; border:none; background:transparent; font-size:1.25rem; line-height:1; color:var(--pl-soft); border-radius:8px; padding:0;}
.pl-more:hover{background:var(--pl-panel); color:var(--pl-ink);}
.pl-item{position:relative;}
.pl-menu{position:absolute; right:8px; top:44px; z-index:5; display:flex; flex-direction:column; min-width:210px; padding:6px; border-radius:12px; background:var(--pl-bg); border:1px solid var(--pl-border); box-shadow:0 10px 28px rgba(27,42,74,.18);}
.pl-menu button{text-align:left; padding:10px 12px; border:none; background:transparent; border-radius:8px; font-size:.95rem; color:var(--pl-ink);}
.pl-menu button:hover, .pl-menu button:focus-visible{background:var(--pl-panel); outline:none;}
.pl-def small{margin-left:4px;}
.pl-gdef{font-size:1rem;}
.pl-glist{display:flex; flex-direction:column; gap:2px; margin-top:2px; font-family:Georgia, 'Iowan Old Style', serif; font-size:1.05rem;}
.pl-gp small{font-family:system-ui, sans-serif; font-size:.78rem; color:var(--pl-soft);}
.pl-gp.none{font-family:system-ui, sans-serif; font-size:.85rem; color:var(--pl-soft); font-style:italic;}
.pl-kpad button.pl-fn{font-family:system-ui, sans-serif; font-size:.82rem;}
.pl-kpad button.pl-word{font-family:system-ui, sans-serif; font-size:clamp(.66rem, 3.1vw, .8rem); letter-spacing:-.01em;}
.pl-kpad button.pl-small{font-size:clamp(.74rem, 3.5vw, .95rem); letter-spacing:-.03em;}
.pl-kph{display:inline-block; width:.62em; height:.78em; border:1.3px dashed currentColor; border-radius:2px; vertical-align:-.08em; opacity:.75;}
.pl-kpad sup .pl-kph, .pl-kpad sub .pl-kph{width:.62em; height:.75em; border-width:1.2px;}
.pl-kpad sup{font-size:.7em; vertical-align:.55em; line-height:0;}
.pl-kpad sub{font-size:.7em; vertical-align:-.45em; line-height:0; margin:0 1px;}
.pl-kfrac{display:inline-flex; flex-direction:column; align-items:center; line-height:1; gap:2px;}
.pl-kfrac > span:first-child{border-bottom:1.3px solid currentColor; padding:0 2px 2px;}
.pl-kfrac .pl-kph{width:.55em; height:.6em;}
.pl-sqrt{display:inline-flex; align-items:stretch; white-space:nowrap; vertical-align:baseline; margin:0 1px;}
.pl-sqrt .pl-rs{position:relative; display:flex; flex:none; width:.62em; align-self:stretch;}
.pl-sqrt .pl-rs svg{width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.3px; vector-effect:non-scaling-stroke; stroke-linejoin:round;}
.pl-sqrt .pl-rs path{vector-effect:non-scaling-stroke;}
.pl-sqrt .pl-sr{position:absolute; width:1px; height:1px; overflow:hidden; opacity:0;}
.pl-sqrt .pl-rad{align-self:baseline; border-top:1.3px solid currentColor; padding:2px 2px 0 1px; line-height:1.15;}
.pl-frac .pl-sqrt{margin-top:3px;}
.pl-sqrt .pl-ridx{align-self:flex-start; font-size:.62em; line-height:1; margin-right:-.42em; padding-top:.2em; position:relative; z-index:1;}
.pl-sqrt .pl-ridx .pl-ph{font-size:.9em;}
.pl-kpad button sup:first-child{margin-right:-.25em;}
.pl-def small{white-space:nowrap; display:inline-block;}
.pl-kpad button.pl-small .pl-kph{margin-left:.1em;}