/* source: print\arter.htm style block 1 */
:root{
    --maxw: 900px;
    --gap: 14px;
    --task-h: 180px;  /* samlet højde pr. opgave */
    --pad: 10px;
    --font: "Segoe UI", Arial, sans-serif;
  }
  *{box-sizing:border-box}
  body{
    font-family: var(--font);
    margin: 18px;
    text-align: center;
  }
  h1{margin:4px 0 12px}
  .controls{ margin: 12px 0 14px; }
  button{
    font-size:16px; padding:8px 14px; margin:6px; cursor:pointer;
  }
  .grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    max-width: var(--maxw);
    margin: 0 auto;
  }
  .task{
    border: 2px solid #bbb;
    border-radius: 10px;
    padding: var(--pad);
    text-align: left;
    min-height: var(--task-h);
    position: relative;
    display:flex;
    flex-direction:column;
  }
  .head{
    display:flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom:6px;
  }
  .opgnr{
    font-size: 14px;
    font-weight: 600;
  }
  .expr{
    font-size: 26px;
    font-weight: 600;
    text-align: right;
  }
  /* Ternet baggrund i arbejdsfeltet */
 .workspace{
  flex:none;
  height: 112px;              /* 4 tern á 25px */
  border-radius: 6px;
  border: 1px dashed #c9c9c9;
  background-image: 
    linear-gradient(to right, #e6e6e6 1px, transparent 1px),
    linear-gradient(to bottom, #e6e6e6 1px, transparent 1px);
  background-size: 25px 28px; /* større tern */
}
  .answer{
    position:absolute;
    right:10px; bottom:8px;
    font-size: 16px;
    background:#fff;
    padding:2px 6px;
    border-radius:6px;
    border:1px solid #ddd;
    display:none;
  }
  .show-answers .answer{ display:inline-block; }

  @media print{
    .controls{display:none}
    body{margin:8mm}
    .grid{gap:10px}
  }