/* source: faerdighed\geometri\arealer-print.htm style block 1 */
:root {
      --task-w: 18.6cm; /* to kort per A4: hver opgave indeholder både venstre (figur+meta) og højre (løsning) kolonne */
      --task-h: 11cm;
      --gap: 0.5cm;
    }
    html, body { margin: 0; padding: 0; }
    body { font-family: Arial, Helvetica, sans-serif; }

    .controls { position: sticky; top: 0; background: #fff; padding: 10px; border-bottom: 1px solid #ddd; display:flex; gap:8px; align-items:center; z-index: 5; }
    .controls button { padding: 6px 10px; }
    .controls .hint { font-size: 12px; color:#333; }

    .sheet {
      padding: 10mm;
      display: grid;
      grid-template-columns: repeat(1, var(--task-w)); /* én opgave per række for bedre klipning */
      grid-auto-rows: auto;
      gap: var(--gap);
      justify-content: center;
      background: #fff;
    }

    .task { box-sizing: border-box; width: var(--task-w); height: var(--task-h); border: 1px solid #000; padding: 0.3cm; display: grid; grid-template-columns: 1fr 8.8cm; grid-template-rows: auto 1fr; gap: 0.25cm; }
    .task h3 { margin: 0; font-size: 14px; grid-column: 1 / -1; }

    .left { display: grid; grid-template-rows: auto auto; gap: 0.25cm; }
    .figure { border: 1px solid #000; display: flex; align-items: center; justify-content: center; height: 6cm; }

    .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25cm; }
    .box { border: 1px solid #000; padding: 0.15cm; min-height: 2.8cm; }
    .box h4 { margin: 0 0 0.1cm 0; font-size: 12px; }
    .box p, .box ul { margin: 0; font-size: 12px; }

    .solve { border: 1px solid #000; padding: 0.15cm; display:flex; flex-direction:column; }
    .solve h4 { margin: 0 0 0.1cm 0; font-size: 12px; }
    .lines { flex:1; background: repeating-linear-gradient(0deg, transparent, transparent 13px, #e6e6e6 13px, #e6e6e6 14px); border: 1px dashed #aaa; }

    /* SVG: 1 enhed = 1 cm via viewBox */
    svg { width: 8cm; height: 5.6cm; }
    .shape { fill: none; stroke: #000; stroke-width: 0.06; }
    .aux { stroke-dasharray: 0.12 0.12; stroke: #333; stroke-width: 0.04; }
    .rt-mark { stroke: #000; stroke-width: 0.04; }
    .lbl { font-size: 0.22px; fill: #000; }

    @media print {
  @page { size: A4 portrait; margin: 30mm 10mm 10mm 10mm; }
      .controls { display: none; }
      @page { size: A4 portrait; margin: 10mm; }
    }
  
/* === Print header & layout controls === */
.print-header { display: block; position: fixed; top: 10mm;            /* align with @page top margin */
    left: 0;
    right: 0;
    text-align: center;
    font-size: 18pt;
    font-weight: 700;
  }
  body { margin: 0; }     /* normalize */
  /* reserve space so content doesn't hit header */
  .task:nth-of-type(2n) { page-break-after: page; } /* 2 tasks per page */



/* === Per-page layout (2 tasks per page) === */
.page { }
.page-header { text-align: center; font-size: 18pt; font-weight: 700; margin: 0 0 10mm 0; }

@media print {
  .print-header { display: none !important; } /* hide the global header when printing */
  .page { break-after: page; page-break-after: always; }
  .page:last-child { break-after: auto; page-break-after: auto; }
}
@media screen {
  /* optional: show only once on screen; page headers still visible inline */
}


.task, .box, .figure, .solve {
  border-radius: 6px;
}

.task {
  border: 1px solid #555;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
  background: #fafafa;
  margin-bottom: 8mm;
}

.figure {
  background: #fff;
}

.shape {
  fill: #e0e0e0; /* lys grå indeni */
  stroke: #000;
  stroke-width: 0.06;
}


.solve {
  background: #fff;
  position: relative;
  z-index: 1;   /* gør at den dækker gråt baggrundslag */
}