/* ============================================================
   Handschrift-Studio – Layout & Optik
   ============================================================ */

:root {
  --bg: #2b2f3a;
  --panel-bg: #f7f8fa;
  --accent: #4a7cf0;
  --line-height: 36px; /* Zeilenraster: muss zu lineHeight in writer.js passen */
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", system-ui, sans-serif;
  background: linear-gradient(160deg, #2b2f3a 0%, #1e2129 100%);
  color: #e8eaef;
  padding: 24px;
}

.app-header {
  text-align: center;
  margin-bottom: 20px;
}
.app-header h1 { margin: 0 0 4px; font-size: 1.9rem; }
.app-header p  { margin: 0; opacity: .7; }

/* ---------- Einstellungs-Leiste ---------- */

.settings-bar {
  max-width: 1400px;
  margin: 0 auto 20px;
  background: var(--panel-bg);
  color: #2a2d35;
  border-radius: var(--radius);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.settings-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-label {
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .6;
}

.settings-divider {
  width: 1px;
  align-self: stretch;
  background: #d4d8e0;
}

.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-btn {
  font: 600 .95rem "Nunito", sans-serif;
  padding: 8px 14px;
  border: 2px solid #d4d8e0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.tool-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.tool-btn.is-active {
  border-color: var(--accent);
  background: #ecf2ff;
  box-shadow: 0 0 0 3px rgba(74, 124, 240, .18);
}

/* Farb-Punkte */
.color-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #d4d8e0;
  background: var(--c, #fff);
  cursor: pointer;
  padding: 0;
  transition: transform .1s, box-shadow .15s, border-color .15s;
}
.color-dot:hover { transform: translateY(-1px); }
.color-dot.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--accent);
}
.color-dot--auto {
  width: auto;
  border-radius: 14px;
  padding: 0 10px;
  font: 700 .72rem "Nunito", sans-serif;
  color: #555;
  background: linear-gradient(135deg, #fff 0 48%, #e3e7ee 52% 100%);
}

#colorPicker {
  width: 34px;
  height: 28px;
  padding: 0 2px;
  border: 2px solid #d4d8e0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
#colorPicker.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--accent);
}

/* Papier-Vorschau-Kacheln */
.swatch {
  width: 84px;
  height: 54px;
  border: 2px solid #d4d8e0;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.swatch:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(74, 124, 240, .25);
}
.swatch span {
  font: 700 .68rem "Nunito", sans-serif;
  color: #333;
  background: rgba(255, 255, 255, .82);
  width: 100%;
  padding: 2px 0;
  text-align: center;
}

/* ---------- Zwei-Fenster-Layout ---------- */

.panels {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start; /* Fenster dürfen unterschiedlich hoch sein */
}

@media (max-width: 950px) {
  .panels { grid-template-columns: 1fr; }
}

.panel {
  background: var(--panel-bg);
  color: #2a2d35;
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

/* ---------- Eingabefenster: bewusst schlicht, Größe per Anfasser ---------- */

#textInput {
  height: 460px;
  min-height: 160px;
  min-width: 240px;
  max-width: 100%;
  resize: both; /* Größe unten rechts manuell anpassbar */
  border: 2px solid #d4d8e0;
  border-radius: 10px;
  padding: 16px;
  font: 400 1.05rem/1.6 "Nunito", sans-serif;
  color: #2a2d35;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
#textInput:focus { border-color: var(--accent); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }

.action-btn {
  font: 600 .9rem "Nunito", sans-serif;
  padding: 9px 14px;
  border: none;
  border-radius: 10px;
  background: #e3e7ee;
  cursor: pointer;
  transition: background .15s;
}
.action-btn:hover { background: #d3d9e3; }
.action-btn--danger:hover { background: #f3cdcd; }

/* ---------- Ausgabefenster: nur das Papier, Größe per Anfasser ---------- */

.panel--output { padding: 14px; }

.paper-wrap {
  height: 560px;
  min-height: 200px;
  min-width: 260px;
  max-width: 100%;
  resize: both; /* Größe unten rechts manuell anpassbar */
  overflow-y: auto;
  border-radius: 8px;
  background: #565b68;
  padding: 14px;
  scroll-behavior: smooth;
}

.paper {
  min-height: 100%;
  border-radius: 4px;
  padding: var(--line-height) 44px 60px 44px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  position: relative;
}

/* Zeichenfläche: Striche werden von writer.js gesetzt */
#sheet {
  display: block;
}
#sheet path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Stiftspitze, die auf der Linie mitläuft */
#sheet .pen-tip {
  font-size: 24px;
  user-select: none;
}
#sheet .pen-tip.is-idle {
  animation: pen-blink 1.2s steps(2) infinite;
}
@keyframes pen-blink {
  from { opacity: .9; }
  to   { opacity: .1; }
}

/* ============================================================
   Papiersorten (gemeinsam für Blatt & Vorschau-Kachel)
   ============================================================ */

.paper-bg--weiss { background-color: #fdfdfb; }

.paper-bg--liniert {
  background-color: #fcfcf7;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--line-height) - 1px),
    rgba(86, 128, 178, .5) calc(var(--line-height) - 1px),
    rgba(86, 128, 178, .5) var(--line-height)
  );
  background-origin: content-box;
}
.paper.paper-bg--liniert { padding-left: 86px; }
.paper.paper-bg--liniert::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 64px;
  width: 2px;
  background: rgba(212, 88, 88, .55);
}

.paper-bg--kariert {
  background-color: #fcfcf7;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 17px,
      rgba(120, 150, 190, .35) 17px, rgba(120, 150, 190, .35) 18px),
    repeating-linear-gradient(to right, transparent 0, transparent 17px,
      rgba(120, 150, 190, .35) 17px, rgba(120, 150, 190, .35) 18px);
  background-origin: content-box;
}

.paper-bg--alt {
  background-color: #e4d3a8;
  background-image:
    radial-gradient(ellipse 360px 280px at 18% 22%, rgba(150, 105, 40, .22), transparent 70%),
    radial-gradient(ellipse 300px 220px at 82% 70%, rgba(140, 95, 35, .20), transparent 70%),
    radial-gradient(ellipse 200px 160px at 65% 15%, rgba(120, 80, 30, .14), transparent 70%),
    radial-gradient(ellipse 240px 200px at 30% 85%, rgba(130, 90, 35, .18), transparent 70%),
    radial-gradient(ellipse at center, transparent 55%, rgba(100, 65, 20, .28) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.paper.paper-bg--alt {
  box-shadow:
    inset 0 0 60px rgba(90, 55, 15, .35),
    0 4px 18px rgba(0, 0, 0, .35);
}

.paper-bg--pergament {
  background-color: #f3e9d2;
  background-image:
    radial-gradient(ellipse at 70% 30%, rgba(190, 160, 110, .15), transparent 60%),
    radial-gradient(ellipse at 25% 75%, rgba(180, 150, 100, .12), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.09' numOctaves='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0 0.25 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.paper.paper-bg--pergament {
  box-shadow:
    inset 0 0 40px rgba(150, 115, 60, .25),
    0 4px 18px rgba(0, 0, 0, .35);
}