/*
 * Notebook + crayon look for the three public generators
 * (/karty-pracy/, /krzyzowki/, /pomoce-dydaktyczne/), matching the material
 * pages (materials-craft.css). Loaded after material-generators.css.
 * Screen only: printed worksheets, crosswords and lesson plans are untouched.
 */
@media screen {
  .p24-generator {
    --gc-paper: #fffcf6;
    --gc-kraft: #f5eedf;
    --gc-grid: rgba(14, 116, 144, 0.07);
    --gc-fiber: rgba(120, 72, 8, 0.06);
    --gc-crayon: #f59e0b;
    --gc-crayon-deep: #d97706;
    --gc-note: #fff4c2;
    --gc-line-soft: rgba(14, 116, 144, 0.14);
    --gc-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 18px 36px -24px rgba(120, 72, 8, 0.35);
    --gc-shadow-lift: 0 1px 0 rgba(15, 23, 42, 0.04), 0 28px 48px -26px rgba(120, 72, 8, 0.5);
    --gc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --primary: #09695b;
    --primary-dark: #075345;
    --ink: #19342f;
    background-color: var(--gc-paper);
    background-image:
      linear-gradient(var(--gc-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--gc-grid) 1px, transparent 1px);
    background-size: 24px 24px;
    font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  .p24-generator h1,
  .p24-generator h2,
  .p24-generator .brand { font-family: 'Baloo 2', 'Onest', system-ui, sans-serif; }

  /* Top bar with crayon rule */
  .p24-generator .topbar {
    position: relative;
    border-bottom: 0;
    padding: 14px 0 16px;
  }
  .p24-generator .topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C80 2 160 4.4 240 2.8S360 3.8 399 3' fill='none' stroke='%23f59e0b' stroke-width='3' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  }
  .p24-generator .brand { font-size: 1.3rem; font-weight: 700; color: var(--primary); }
  .p24-generator .topbar-actions .secondary-button { border-radius: 999px; }

  /* Intro */
  .p24-generator .generator-intro,
  .p24-generator .app-header { padding: 32px 0 28px; }
  .p24-generator .eyebrow {
    font: 600 1.45rem/1.1 'Caveat', cursive;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gc-crayon-deep);
  }
  .p24-generator h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; line-height: 1.08; }
  .p24-generator .generator-intro h1::after,
  .p24-generator .app-header h1::after {
    content: '';
    display: block;
    width: min(220px, 60%);
    height: 12px;
    margin-top: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9C50 3 110 12 196 5' fill='none' stroke='%23f59e0b' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M10 11C70 7 130 13 190 8' fill='none' stroke='%23fbbf24' stroke-width='1.6' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  }

  /* Panels: settings as a notebook sheet, preview on kraft paper */
  .p24-generator .app-shell { gap: 32px; }
  .p24-generator .panel {
    position: relative;
    border-radius: 6px;
    border-color: var(--gc-line-soft);
    box-shadow: var(--gc-shadow-lift);
  }
  .p24-generator .editor-panel {
    background-color: #fff;
    background-image: linear-gradient(90deg, transparent 12px, rgba(239, 68, 68, 0.25) 12px 14px, transparent 14px);
    rotate: -0.4deg;
  }
  .p24-generator .editor-panel::after,
  .p24-generator .result-panel::after,
  .p24-generator .result-panel-wrap::after {
    content: '';
    position: absolute;
    z-index: 3;
    top: -13px;
    left: 50%;
    width: 110px;
    height: 26px;
    margin-left: -55px;
    rotate: -3deg;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 6px, transparent 6px 12px), rgba(45, 212, 191, 0.42);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 26' preserveAspectRatio='none'%3E%3Cpath d='M3 1L6 4L2 7L5 10L1 13L5 16L2 19L6 22L3 25H101L98 22L102 19L99 16L103 13L99 10L102 7L98 4L101 1Z'/%3E%3C/svg%3E") center / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 26' preserveAspectRatio='none'%3E%3Cpath d='M3 1L6 4L2 7L5 10L1 13L5 16L2 19L6 22L3 25H101L98 22L102 19L99 16L103 13L99 10L102 7L98 4L101 1Z'/%3E%3C/svg%3E") center / 100% 100%;
  }
  .p24-generator .result-panel::after,
  .p24-generator .result-panel-wrap::after { background-color: rgba(251, 191, 36, 0.5); rotate: 2deg; }
  .p24-generator .result-panel,
  .p24-generator .result-panel-wrap {
    background-color: var(--gc-kraft);
    background-image: radial-gradient(var(--gc-fiber) 1px, transparent 1.4px);
    background-size: 14px 14px;
  }
  .p24-generator .section-header h2 { font-size: 1.6rem; font-weight: 700; }

  /* Paper sheets inside the preview */
  .p24-generator #worksheet-child-preview > *,
  .p24-generator .aid-package,
  .p24-generator .crossword-board {
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 22px 40px -26px rgba(120, 72, 8, 0.55);
  }
  .p24-generator .generator-solution,
  .p24-generator .generator-options { border-radius: 10px; border-style: dashed; }
  .p24-generator .generator-solution > summary,
  .p24-generator .generator-options > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
  .p24-generator .generator-solution > summary::-webkit-details-marker,
  .p24-generator .generator-options > summary::-webkit-details-marker { display: none; }
  .p24-generator .generator-solution > summary::after,
  .p24-generator .generator-options > summary::after {
    content: '';
    flex: 0 0 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13.4 4.2C12.8 9 13.2 16 12.7 21.8M4.4 12.6C9.6 13.3 16 12.4 21.7 13.1' fill='none' stroke='%23f59e0b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: rotate 0.4s var(--gc-spring);
  }
  .p24-generator .generator-solution[open] > summary::after,
  .p24-generator .generator-options[open] > summary::after { rotate: 135deg; }

  /* Controls */
  .p24-generator input:not([type="checkbox"]),
  .p24-generator select,
  .p24-generator textarea { border-color: #b7c9bf; border-radius: 10px; font-family: inherit; }
  .p24-generator input:not([type="checkbox"]):focus,
  .p24-generator select:focus,
  .p24-generator textarea:focus { border-color: var(--gc-crayon); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); outline: none; }
  .p24-generator :focus-visible { outline-color: var(--gc-crayon-deep); }
  .p24-generator .primary-button,
  .p24-generator .ai-button,
  .p24-generator .secondary-button { border-radius: 999px; font-family: inherit; transition: background-color 0.2s ease, transform 0.25s var(--gc-spring), box-shadow 0.25s ease; }
  .p24-generator .primary-button:hover:not(:disabled),
  .p24-generator .ai-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(9, 105, 91, 0.6); }
  .p24-generator .example-grid button {
    border: 1.5px dashed var(--gc-line-soft);
    border-radius: 8px;
    font-family: inherit;
    rotate: -1deg;
    transition: rotate 0.35s var(--gc-spring), background-color 0.2s ease, border-color 0.2s ease;
  }
  .p24-generator .example-grid button:nth-child(2n) { rotate: 1deg; }
  .p24-generator .example-grid button:hover { rotate: 0deg; border-color: var(--gc-crayon); background: var(--gc-note); }
  .p24-generator .view-toggle { border-radius: 999px; }
  .p24-generator .view-toggle button { border-radius: 999px; }
}

@media screen and (max-width: 980px) {
  .p24-generator .editor-panel { rotate: 0deg; }
}