/* source: print\flyt.html style block 1 */
:root{
    --page-w: 210mm; /* A4 portrait */
    --page-h: 297mm;
    --margin: 10mm;
    --gap: 8mm;
    --border: #333;
    --grid: #cfd3da;
    --grid-5: #aeb4bf;
    --axes: #0b0b0b;
    --figure: #777777;
    --pcolor: #000000;
    --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  }
  html, body{
    height:100%;
    margin:0;
    background:#f6f7fb;
    color:#111;
    font-family: var(--font);
  }
  .toolbar{
    display:flex;
    gap:12px;
    padding:12px 16px;
    position:sticky;
    top:0;
    background:linear-gradient(180deg, #fff, #fff8);
    border-bottom:1px solid #e8e8e8;
    backdrop-filter: blur(6px);
    z-index:2;
  }
  .toolbar button{
    font-size:13px;
    padding:8px 12px;
    border-radius:10px;
    border:1px solid #d0d0d0;
    background:#fff;
    cursor:pointer;
  }
  .toolbar .hint{ margin-left:auto; opacity:0.75; font-size:12px; }

  .page{
    width: var(--page-w);
    min-height: var(--page-h);
    margin: 12px auto;
    background:#fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: var(--margin);
    box-sizing: border-box;
  }
  header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:5mm;
  }
  h1{
    font-size:17px; margin:0;
    letter-spacing:0.2px;
  }

  .grid2x2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--gap);
    height: calc(var(--page-h) - 2*var(--margin) - 26mm);
  }
  .task{
    border:1px solid var(--border);
    border-radius:8px;
    padding:6px;                 /* lavere ramme */
    display:grid;
    grid-template-rows: auto 1fr;
    gap:4px;
  }
  .task h2{
    font-size:13px; margin:0 0 1px 0;
  }
  .task p{ font-size:12px; margin:0 2px 0 2px; line-height:1.25; }
  .canvas-wrap{
    display:flex; align-items:center; justify-content:center;
  }
  canvas{
    width:100%;
    aspect-ratio:1 / 1; /* sikrer kvadrater */
    height:auto;
    border-radius:6px;
  }

  @media print{
    body{ background:#fff; }
    .toolbar{ display:none !important; }
    .page{ box-shadow:none; margin:0; padding: var(--margin); }
  }