/* source: print\procentcirler.htm style block 1 */
:root{
      --pane-h: 50mm;   /* cirklernes højde = 10 tern */
      --grid-w: 50mm;   /* ternet felt 10×10 */
      --gap: 5mm;       /* afstand mellem elementer */
    }

    body { font-family: sans-serif; background:#fff; margin:20px; }
    h1 { text-align:center; margin-bottom:12px; }

    /* >>> NYT: centrér hele opgavedelen <<< */
    #printArea{
      display: flex;
      flex-direction: column;
      align-items: center;  /* centrerer hver .print-task horisontalt */
      gap: 12px;            /* lodret luft mellem rækkerne */
    }

    /* Række: venstre (cirkler + =) + højre (tern) */
    .print-task{
      display: flex;
      align-items: center;
      gap: var(--gap);           /* 5 mm mellem venstre og højre */
      margin-bottom: 0;          /* vi bruger gap i #printArea */
      page-break-inside: avoid;
    }

    .diagram{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--gap);           /* 5 mm mellem cirkler og lighedstegn */
      flex: 0 0 auto;
    }
    .diagram canvas{
      height: var(--pane-h);
      width: auto;
      display: block;
      background:#fff;
    }

    .eq{
      display:flex; align-items:center; justify-content:center;
      height: var(--pane-h);
      font-size: 12mm; font-weight:700; line-height:1; user-select:none;
    }

    .calc-grid{
      width: var(--grid-w);
      height: var(--pane-h);
      flex: 0 0 var(--grid-w);
      border: 1px solid #bdbdbd;
      border-radius: 8px;
      background:#fff;
      background-image:
        linear-gradient(to right, rgba(0,0,0,0.35) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.35) 1px, transparent 1px),
        linear-gradient(to right, rgba(0,0,0,0.60) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.60) 1px, transparent 1px);
      background-size:
        5mm 5mm, 5mm 5mm, 25mm 25mm, 25mm 25mm;
      background-position: 0 0, 0 0, 0 0, 0 0;
    }
    @supports not (background-size: 5mm 5mm){
      .calc-grid{ background-size:19px 19px,19px 19px,95px 95px,95px 95px; }
    }

    #controls{ text-align:center; margin-top:10px; }
    #controls button{
      background:#4CAF50; color:#fff; padding:10px 18px; font-size:16px;
      border:none; border-radius:6px; cursor:pointer;
    }
    #controls button:hover{ background:#45a049; }

    @media print{
      #controls{ display:none; }
      @page{ size:A4 portrait; margin:10mm; }
      body{ margin:0; }
    }