/* source: faerdighed\funktioner\toubekendte_A4.htm style block 1 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
  :root{
    --c1:#0b72cc;
    --c2:#0a5aa3;
    --bg:#eef7ff;
    --b:#cfe8ff;
    --r:#d62828;
    --bl:#1d4ed8;
    --grid:#e6e6e6;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;margin:0;padding:16px;background:#fff;color:#111}
  h1{margin:0 0 6px;font-size:clamp(18px,3vw,24px); text-align:center}
  .toolbar{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:8px 0 14px}
  button, .btn{
    font-size:14px; padding:8px 14px; cursor:pointer; border-radius:6px;
    border:1px solid var(--c1); background:var(--c1); color:#fff;
  }
  button:hover,.btn:hover{background:var(--c2)}

  .page{
    max-width: 1100px; margin:0 auto; background:var(--bg); border:2px solid var(--b);
    border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:14px;
  }

  .task{
    background:#fff; border:2px solid var(--b); border-radius:12px; padding:10px;
  }
  .task .row{
    display:grid; grid-template-columns: auto 360px; gap:12px; align-items:start;
  }
  .task h3{margin:0 0 8px 0; font-size:16px}
  .panel{background:#fff; border:1px solid var(--b); border-radius:10px; padding:8px}
  canvas{background:#fff; border:1px solid #000; border-radius:8px}

  .legend .r{color:var(--r); font-weight:700}
  .legend .b{color:var(--bl); font-weight:700}
  .eq{font-size:13px}
  .small{font-size:12px; opacity:.9}

  /* Udregningsfelt til højre (svage tern) */
  .work{
    margin-top:10px;
    border:2px solid var(--b);
    border-radius:10px;
    min-height: 160px;
    background:
      repeating-linear-gradient(0deg, var(--grid), var(--grid) 1px, transparent 1px, transparent 20px),
      repeating-linear-gradient(90deg, var(--grid), var(--grid) 1px, transparent 1px, transparent 20px);
    background-clip: padding-box;
    padding:8px;
    white-space:pre-line;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
  }
  .work.empty{color:#888}

  /* Facit visning */
  .work{display:none}
  body.show-facit .work{display:block}

  /* Print */
  @page { size: A4; margin: 12mm }
  @media print{
    body{padding:0; background:#fff}
    .toolbar{display:none !important}
    .page{border:none; background:#fff; padding:0}
    .task{break-inside: avoid}
  }