/* source: faerdighed\statistik\boksplot_A4.htm style block 1 */
:root{ --gap:14px; --pad:12px; --axisW:1080px; }
  body{ font-family: ui-sans-serif, system-ui, Segoe UI, Arial; margin:0; padding:clamp(10px,2vw,22px); background:#f7f8fb; color:#111; }
  header{ display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
  h1{ font-size:clamp(18px,2.2vw,26px); margin:0 12px 0 0; }
  .controls{ display:flex; flex-wrap:wrap; gap:8px; }
  button{ font:inherit; padding:8px 12px; border-radius:10px; border:1px solid #cfd3d8; background:#fff; cursor:pointer; box-shadow:0 1px 1px rgba(0,0,0,.05); }
  button:hover{ background:#eef4ff; }

  main{ background:#fff; border:1px solid #e5e7ec; border-radius:12px; padding:12px; }

  .task{ border:1px solid #dfe3e9; border-radius:10px; padding:var(--pad); background:#fafbff;
         display:flex; flex-direction:column; gap:var(--gap); max-width:100%; }
  .title{ font-weight:700; color:#334; }

  .card{ background:#fff; border:1px solid #e5e7ec; border-radius:10px; padding:10px; }
  .data{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{ padding:6px 10px; border-radius:999px; border:1px solid #dfe3e9; background:#fff; font-size:0.95rem; }

  .linepad{ height:70px; border:1px dashed #ccd3df; border-radius:8px; background:
            repeating-linear-gradient(#fff, #fff 17px, #eef2f8 18px); }

  .kv-row{ display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; }
  .kv-box{ border:1px solid #cfd6e6; border-radius:10px; background:#fff; padding:8px; }
  .kv-label{ font-size:13px; color:#445; font-weight:600; margin-bottom:4px; text-align:center; }
  .kv-field{ height:42px; border:1px dashed #c6cedb; border-radius:8px; background:
             repeating-linear-gradient(#fff, #fff 18px, #eef3ff 19px); }

  .work{ height:160px; border:1px solid #d0d6df; border-radius:8px; background:
         repeating-linear-gradient(#fff, #fff 20px, #f2f5fa 21px); }

  /* Plot-område – lineal tegnes inde i bunden, boksplottet ovenover */
  .plot-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
  .plot-area{ width: min(100%, var(--axisW)); height:150px; border:1px solid #cfd6e6; border-radius:8px; background:#fff; position:relative; }
  .plot-overlay{ position:absolute; inset:0; }

  .answer{ display:none; color:#0b69a3; font-size:0.95rem; }
  .answer.shown{ display:block; }

  @page { size: A4; margin: 10mm; }
  @media print{
    header{ display:none !important; }
    body{ padding:0; background:#fff; }
    main{ border:none; padding:0 8mm; }
    .task, .card, .plot-area{ break-inside: avoid; page-break-inside: avoid; }
    .plot-area{ height:150px; }
    .work{ height:170px; }
    .answer{ display:none !important; }
    #facitPrint{ display:block; page-break-before: always; }
  }