/* ==========================================================================
   MathMaster – interaktyvus ploteris
   ==========================================================================

   Du išdėstymai: plačiame ekrane brėžinys ir analizės skydelis stovi greta,
   siaurame – vienas po kito. Drobės spalvos imamos iš CSS kintamųjų, todėl
   tamsi tema veikia savaime (`plotter.js` jas nuskaito per getComputedStyle).
   ========================================================================== */

.plt {
  --plt-grid: #E5E9F2;
  --plt-grid2: #F1F5F9;
  --plt-axis: #334155;
  --plt-text: #475569;
  --plt-bg: #FFFFFF;

  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

[data-theme="dark"] .plt {
  --plt-grid: #27304A;
  --plt-grid2: #1B2237;
  --plt-axis: #94A3B8;
  --plt-text: #94A3B8;
  --plt-bg: #131A2A;
}

/* ------------------------------- skirtukai ------------------------------- */

.plt-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.plt-tab {
  padding: 9px 16px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: 800;
  font-size: .88rem;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.plt-tab:hover { border-color: var(--secondary); color: var(--secondary); }
.plt-tab.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.plt-tab:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(99, 102, 241, .18); }

/* ------------------------------- įvestys --------------------------------- */

.plt-inputs { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

.plt-eq {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.plt-eq-wide { flex-basis: 100%; }
.plt-eq-lbl { font-size: .78rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.plt-eq-slot { flex: 1 1 auto; min-width: 0; display: flex; }

.plt-dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex: 0 0 auto; display: inline-block;
}

.plt-field {
  flex: 1 1 auto; min-width: 0;
  font-size: 1.05rem;
  padding: 4px 8px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  --caret-color: var(--secondary);
  --selection-background-color: rgba(99, 102, 241, .22);
}
.plt-field:focus, .plt-field:focus-within {
  border-color: var(--secondary);
  outline: none;
}
.plt-field.plain { font-family: 'JetBrains Mono', Consolas, monospace; font-size: .95rem; }

.plt-add, .plt-x {
  border: 2px dashed var(--border);
  background: none;
  color: var(--muted);
  border-radius: 12px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: .82rem;
  cursor: pointer;
}
.plt-add:hover, .plt-x:hover { border-color: var(--secondary); color: var(--secondary); }
.plt-x { padding: 2px 9px; border-style: solid; font-size: 1rem; line-height: 1; }

.plt-coefs { display: flex; gap: 8px; flex: 1 1 100%; }
.plt-coef {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px 10px; flex: 1 1 0;
}
.plt-coef > span { font-weight: 800; font-style: italic; color: var(--muted); }
.plt-coef-slot { flex: 1 1 auto; min-width: 0; display: flex; }
.plt-coef input {
  width: 100%; min-width: 0; border: none; background: none;
  color: var(--text); font-size: 1rem; font-weight: 700; outline: none;
}

/* ------------------------------- brėžinys -------------------------------- */

/* Dvylikos stulpelių tinklelis: brėžiniui 7, analizei 5. Anksčiau tai buvo
   `flex: 1 1 380px` abiem, todėl plotis pasidalydavo beveik po lygiai ir
   brėžinys likdavo per siauras tam, kas jame turi tilpti. */
.plt-main {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
}
.plt-stage { grid-column: span 12; }
.plt-panel { grid-column: span 12; }

@media (min-width: 1024px) {
  .plt-stage { grid-column: span 7; }
  .plt-panel { grid-column: span 5; }
}

.plt-stage {
  position: relative;
  min-width: 0;
  border-radius: var(--r-sm, 14px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--plt-bg);
}
.plt-canvas {
  display: block;
  width: 100%;
  height: 420px;
  touch-action: none;              /* tempimas slenka brėžinį, o ne puslapį */
  cursor: grab;
}
.plt-canvas.is-dragging { cursor: grabbing; }

/* Mygtukai sudėti į vieną juostą su savo fonu – atskirai plūduriuodami virš
   ašių jie atrodė atsitiktinai numesti ir maišėsi su brėžiniu. */
.plt-tools {
  position: absolute; right: 10px; top: 10px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--plt-bg) 88%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.1));
}
.plt-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-size: 1.05rem; font-weight: 800; line-height: 1;
  cursor: pointer;
}
.plt-btn:hover { border-color: var(--secondary); color: var(--secondary); }
.plt-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(99, 102, 241, .18); }

/* ---------------------------- analizės skydelis --------------------------- */

.plt-panel {
  min-width: 0;
  padding: 14px 16px;
  border-radius: var(--r-sm, 14px);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.plt-title { margin: 0 0 8px; font-size: 1.1rem; font-weight: 800; color: var(--text); }
.plt-eqline { margin-bottom: 12px; font-size: 1.2rem; overflow-x: auto; }

.plt-rows { display: flex; flex-direction: column; gap: 6px; }
.plt-row {
  display: grid;
  grid-template-columns: 42% 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 1.05rem;
}
.plt-row:first-child { border-top: none; }
.plt-k { color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.plt-k .plt-dot { width: 10px; height: 10px; flex: none; }
.plt-v { min-width: 0; color: var(--text); overflow-x: auto; }
.plt-sub { color: var(--muted); font-size: .92em; }
.plt-shape { font-size: 1.15em; font-weight: 800; }

.plt-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.plt-badge.is-one  { background: #DCFCE7; color: #166534; }
.plt-badge.is-none { background: #FEE2E2; color: #991B1B; }
.plt-badge.is-many { background: #E0E7FF; color: #3730A3; }

[data-theme="dark"] .plt-badge.is-one  { background: rgba(22,163,74,.22);  color: #86EFAC; }
[data-theme="dark"] .plt-badge.is-none { background: rgba(220,38,38,.22);  color: #FCA5A5; }
[data-theme="dark"] .plt-badge.is-many { background: rgba(99,102,241,.22); color: #C7D2FE; }

.plt-warn { margin: 0 0 8px; font-size: .84rem; color: #B45309; }
.plt-warn code {
  font-family: 'JetBrains Mono', Consolas, monospace;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 5px;
}
.plt-note { margin: 0; font-size: .86rem; color: var(--muted); }

/* ------------------------------- siauras ekranas -------------------------- */

@media (max-width: 780px) {
  .plt-canvas { height: 320px; }
  .plt-row { grid-template-columns: 50% 1fr; }
}
@media (max-width: 480px) {
  .plt-canvas { height: 280px; }
  .plt-row { grid-template-columns: 1fr; row-gap: 4px; }
}

@media print {
  .plt-tabs, .plt-tools, .plt-inputs, .plt-add, .plt-x { display: none !important; }
  .plt-stage, .plt-panel { break-inside: avoid; }
}

/* ----------------------- atskiras įrankio puslapis ------------------------ */

/* Šie stiliai anksčiau gyveno tik `formulas.css`, kurio ploterio puslapis
   neįkelia. Todėl antraštė likdavo be tarpų ir prilipdavo prie naršymo kelio,
   o įžanga atrodydavo nukirpta. */
.fx-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 40px;
}
.fx-head { margin: 1rem 0 24px; }
.fx-title {
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
}
.fx-sub {
  margin: 0;
  max-width: 78ch;
  color: var(--text-2);
  font-weight: 600;
  line-height: 1.6;
}

.plt-page-host { margin-bottom: 22px; }

.plt-tips {
  padding: 16px 18px;
  border-radius: var(--r, 18px);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.plt-tips-h { margin: 0 0 8px; font-size: .95rem; font-weight: 800; color: var(--text); }
.plt-tips-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.plt-tips-list li { font-size: .88rem; line-height: 1.55; color: var(--text-2); }
.plt-tips-list code {
  font-family: 'JetBrains Mono', Consolas, monospace;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; font-size: .95em;
}