/* source: faerdighed\funktioner\andengrad_A4.htm style block 1 */
:root{
    --gap: 16px;
    --pad: 12px;
    --W: 800px;   /* tegnecanvas CSS-bredde */
    --H: 480px;   /* tegnecanvas CSS-højde  */
  }
  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; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
  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);
    display:grid; grid-template-columns: minmax(320px,1fr) minmax(360px,1fr); gap: var(--gap);
    background:#fafbff; margin-bottom: var(--gap);
  }
  .title{ font-weight:700; color:#334; margin-bottom:6px; }
  .left,.right{ display:flex; flex-direction:column; gap:10px; }
  .canvas-wrap{ display:flex; justify-content:center; }
  canvas{
    background:#fff; border:1px solid #333; border-radius:6px;
    width: var(--W); height: var(--H); max-width:100%;
  }
  .q{ line-height:1.35; }
  .choices{ display:flex; flex-direction:column; gap:6px; }
  .choice{ display:flex; align-items:center; gap:8px; }
  .check{ width:18px; height:18px; border:1px solid #999; border-radius:3px; background:#fff; }
  .hint{ color:#667085; font-size:0.92rem; }

  /* Sildeben – 350 px linje, x/y i første felt, rykket lidt mod venstre */
  .fishbone{ border:1px solid #d0d6df; border-radius:8px; padding:10px 12px; background:#fff; }
  .fish-row{ display:flex; align-items:center; gap:10px; }
  .answer{ display:none; color:#0b69a3; font-size:0.95rem; }
  .answer.shown{ display:block; }

  /* Print */
  .print-heading, .print-heading-facit{ display:none; }
  #facitPrint{ display:none; }
  .page-break{ page-break-before: always; }
  @page { size: A4; margin: 10mm; }
 @media print{
  /* Skjul header/knapper og stram generelt */
  header, .controls { display: none !important; }
  main{ padding: 0; }

  /* Mindre canvas så venstre + højre kan stå på samme side */
  :root{
    --W: 720px;   /* var fx 800 */
    --H: 400px;   /* var fx 480 */
  }

  /* Lås kolonnebredder, så højre kolonne ikke bliver for bred */
  .task{
    grid-template-columns: 430px 340px;  /* venstre = lærred, højre = spørgsmål */
    gap: 10px;
    padding: 8px;
    margin-bottom: 8px;
    break-inside: avoid; page-break-inside: avoid;
  }
  .left, .right, .canvas-wrap, canvas{
    break-inside: avoid; page-break-inside: avoid;
  }

  /* Sørg for at højresøjlen ikke “strækker” */
  .right{ max-width: 340px; }

  /* SILDEBEN: fast bredde ved print (ingen procent, ingen autoskalering) */
  .fishbone{
    width: 310px;                 /* selve boksen */
    padding: 8px 10px;
    box-sizing: border-box;
  }
  .fishbone svg{
    width: 310px !important;      /* så SVG ikke skubber boksen ud */
    height: 70px !important;
  }

  /* Regnefeltet under D): fast bredde og større højde med den sparede plads */
  .calcbox{
    display: block;
    width: 310px;                 /* matcher højresøjlen */
    height: 140px;                /* ekstra plads */
    border: 1px solid #d0d6df;
    border-radius: 8px;
    box-sizing: border-box;
  }
}