/* Shared styles for the student and teacher pages. No build step, no framework. */

:root {
  --bg: #f6f4ef;
  --card: #ffffff;
  --ink: #1d2433;
  --muted: #5d6677;
  --line: #d9d5cc;
  --accent: #2f5bd3;
  --accent-ink: #ffffff;
  --accent-soft: #e6ecfb;
  --good: #1f8a4c;
  --good-soft: #e3f4ea;
  --warn: #c2255c;        /* raspberry: input errors and wrong blanks only */
  --warn-soft: #fdeef3;
  --no: #d0342c;          /* red: the ✕ on "Det må du ikke" only */
  --tip: #fff6d6;
  --fill: #3d6ef0;
  --fill-soft: #d4def9;
  --gold: #f2b632;         /* mustard: mastery and the streak (as in the favicon) */
  --math-bg: #eef1f7;     /* calculation chips (.math) */
  --math-line: #c9d1e3;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(29, 36, 51, 0.06), 0 4px 16px rgba(29, 36, 51, 0.06);
  /* Four font sizes for everything (exceptions: badges, fraction digits, SVG labels). */
  --fs-small: 15px;   /* meta: small buttons, notes, teacher tiles and tables */
  --fs-body: 18px;    /* running text, buttons, tips */
  --fs-task: 22px;    /* the maths: prompt, steps, inputs, answers, explanations, calculator */
  --fs-title: 26px;   /* page titles and feedback headlines */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Dashboard-style: every screen fills one frame of a fixed height, so boxes, bottoms and
     buttons stay put from screen to screen (minimums: more text grows a box, an exception).
     A teaching screen, a wrong answer's feedback and the calculator are the frame; a question
     is its box + the row of help tabs under it. Hand and Excel questions alternate, so they
     share one box, as tall as the Excel sheet and the tallest choice question. The frame fits
     a laptop browser (1366x768 screen: about 660 px under the browser's bars). */
  --frame-h: 560px;
  --tabs-h: 44px;     /* the help tabs under a question */
  --task-h: calc(var(--frame-h) - var(--tabs-h) - 12px);   /* a question's box */
  --side-w: 340px;    /* the calculator's column; a teaching screen's picture column lines up with it */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }   /* a scrollbar on some screens must not shift the page */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-body)/1.5 var(--font);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
[hidden] { display: none !important; }

/* --- Layout ------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--line);
  min-height: 60px;   /* the same with or without the calculator button */
}
.topbar .hello { font-weight: 600; }
.topbar .btn.small, .topbar .linkish { font-size: var(--fs-body); }   /* one size in the bar */
.topbar .spacer { flex: 1; }
.linkish { background: none; border: 0; padding: 4px; color: var(--muted); cursor: pointer; text-decoration: underline; font-size: var(--fs-small); }

.page { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
.work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.work.with-side { grid-template-columns: minmax(0, 1fr) var(--side-w); }
@media (max-width: 820px) { .work.with-side { grid-template-columns: minmax(0, 1fr); } }   /* the side goes below */
.main-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.side { min-width: 0; align-self: stretch; }   /* the calculator: full height, so it stays in view (sticky) */
.help-panels { display: flex; flex-direction: column; gap: 10px; }
/* The help tabs: one row, always the same height; the open one's text opens under it. */
.help-tabs { display: flex; gap: 10px; height: var(--tabs-h); }
.help-tab { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 2px solid transparent;
            border-radius: 12px; background: var(--card); box-shadow: var(--shadow); cursor: pointer;
            font-weight: 600; font-size: var(--fs-task); text-align: left; }
.help-tab::before { content: "▸"; color: var(--muted); }
.help-tab:hover { border-color: var(--line); }
.help-tab[aria-expanded=true] { border-color: var(--accent); color: var(--accent); }
.help-tab[aria-expanded=true]::before { content: "▾"; color: var(--accent); }
.help-body { margin: 0; padding: 16px 20px; font-size: var(--fs-task); }
.help-body.example { background: #fbfaf7; }
.lesson-card { font-size: var(--fs-task); }
.lesson-card + .lesson-card { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.lesson-card h3 { font-size: var(--fs-task); margin: 8px 0 4px; }
.lesson-card p { margin: 6px 0; }

.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; margin-bottom: 16px;
}
.card.narrow { max-width: 460px; margin: 40px auto; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
h1 { font-size: var(--fs-title); margin: 0 0 12px; }
h2 { font-size: var(--fs-task); margin: 0 0 10px; }
h3 { font-size: var(--fs-body); margin: 0 0 8px; }

/* --- Forms and buttons ---------------------------------------------------- */
label { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
/* Keyboard focus (after Enter or Tab, not a click): a clear ring with a gap, the same on a
   card and on a picture. A pale ring looked like a white border on some buttons only. */
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px; border: 2px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer;
}
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.secondary { background: #fff; color: var(--accent); }
.btn.quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.small { padding: 6px 12px; font-size: var(--fs-small); }
.btn.compact { padding: 6px 14px; }   /* the height of a .tabs button */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.error { color: var(--warn); font-weight: 600; min-height: 1.5em; margin: 8px 0 14px; }
main > .error:empty { display: none; }   /* page-level messages take no room until used */
main > .row:first-child { margin-bottom: 16px; }   /* the teacher's team tabs never touch the card below */

/* --- Progress ------------------------------------------------------------ */
.ladder { display: flex; align-items: center; gap: 10px; }
.rungs { display: flex; gap: 4px; }
.rungs span { width: 18px; height: 8px; border-radius: 4px; background: var(--line); }
.rungs span.done { background: var(--fill); }
.rungs span.here { background: var(--fill); outline: 2px solid var(--fill-soft); }
/* Mastered: a mustard circle with a check at the end of the rungs. */
.mastered { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
            background: var(--gold); color: var(--ink); font-size: 14px; font-weight: 800; }
.mastered.finished { background: var(--fill); color: #fff; }   /* teacher tile: the drill's goal reached */
/* The streak: a mustard bolt (drawn, not an emoji) before "3 i træk". */
.streak { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.streak:not(:empty)::before { content: ""; width: 11px; height: 17px; background: var(--gold);
  clip-path: polygon(62% 0, 0 58%, 44% 58%, 30% 100%, 100% 38%, 56% 38%); }

/* --- Question ------------------------------------------------------------- */
.intro { background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.prompt { font-size: var(--fs-task); font-weight: 600; margin: 8px 0; }
.instruction { color: var(--muted); }
.tip { background: var(--tip); border-radius: 10px; padding: 8px 14px; margin: 10px 0; }
.answer-row { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.answer-row input { width: 200px; font-size: var(--fs-task); padding: 8px 12px; }
.unit { font-size: var(--fs-task); font-weight: 600; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.choices .btn { font-size: var(--fs-task); padding: 16px; background: #fff; color: var(--ink); border-color: var(--line); }
.choices .btn:hover { border-color: var(--accent); }
.panel { border: 2px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 16px; }
.panel > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-task); }
.panel[open] > summary { margin-bottom: 10px; }
.example { background: #fbfaf7; }

/* Solution steps, blanks and fractions */
.answer-line { font-size: var(--fs-task); margin: 4px 0 0; }
.steps { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-task); margin: 12px 0; }
.step { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; white-space: pre-wrap; }
input.blank { width: 5.5em; font-size: inherit; padding: 4px 8px; margin: 0 4px; text-align: center; border: 2px solid var(--accent); border-radius: 8px; }
input.blank.wrong { border-color: var(--warn); background: var(--warn-soft); }
input.blank.right { border-color: var(--good); background: var(--good-soft); }
.box { display: inline-block; min-width: 2.6em; height: 1.4em; border: 2px dashed var(--muted); border-radius: 6px; margin: 0 4px; vertical-align: middle; }
.mirror { display: inline-block; min-width: 2em; padding: 0 4px; border-bottom: 2px solid var(--accent); text-align: center; margin: 0 2px; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 4px; font-size: 0.9em; }
.frac > .num { border-bottom: 2px solid currentColor; padding: 0 4px; }
.frac > .den { padding: 0 4px; }

/* Visuals (SVG) */
.visual { margin: 12px 0; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.visual svg { max-width: 100%; height: auto; }
.cell { fill: #fff; stroke: #9aa3b5; stroke-width: 1; }
.cell.on { fill: var(--fill); }
.seg { fill: #fff; stroke: #5d6677; stroke-width: 1.5; }
.seg.on { fill: var(--fill-soft); }
.vlabel { font: 600 var(--fs-small) var(--font); fill: var(--ink); text-anchor: middle; }
.vlabel.small { font-size: 12px; font-weight: 500; }
.brace { stroke: var(--ink); stroke-width: 1.5; fill: none; }

/* --- Feedback ------------------------------------------------------------- */
.headline { font-size: var(--fs-title); font-weight: 700; margin: 0 0 6px; }
.headline.good { color: var(--good); }
.headline.try { color: var(--accent); }   /* "Næsten!": calm, not an alarm */
.move { display: inline-block; background: var(--accent-soft); border-radius: 999px; padding: 4px 14px; margin: 4px 0 10px; font-weight: 600; }
.explanation { font-size: var(--fs-task); margin: 10px 0; }
.explanation p { margin: 6px 0; }
/* A calculation inside a sentence (`400 · 30 : 100 = 120` in the texts): set apart like code. */
.math {
  display: inline-block; white-space: nowrap; padding: 0 8px; margin: 1px 0; border-radius: 6px;
  background: var(--math-bg); border: 1px solid var(--math-line); font-variant-numeric: tabular-nums;
}

/* --- Teaching screens: rules, topic intro, a new idea, a worked example ----------- */
/* One box, the page's width: the text and maybe a side column with a picture (edge to
   edge) or a 100 grid. The buttons sit in the box's bottom corners, on top of the picture
   when there is one, so "Videre" is always in the same spot. */
.teach { position: relative; min-height: var(--frame-h); margin: 0 0 16px; padding: 0; overflow: hidden;
         display: grid; grid-template-columns: minmax(0, 1fr); }
.teach.has-side { grid-template-columns: minmax(0, 1fr) calc(var(--side-w) + 20px); }
.teach-text { padding: 24px 28px; display: flex; flex-direction: column; min-width: 0; }
.teach-text > .row { margin-top: auto; padding-top: 22px; }
.teach:not(.middle) .teach-text { padding-bottom: 96px; }   /* room for the buttons */
.teach:not(.middle) .teach-text > .row { position: absolute; left: 28px; right: 24px; bottom: 24px; padding: 0; }
.teach.has-side .teach-text > .row .btn:not(.secondary) { box-shadow: 0 2px 10px rgb(0 0 0 / .18); }
.teach.has-side .teach-text > .row .btn.quiet { background: rgb(255 255 255 / .9); }
.teach .deco { width: 100%; height: 100%; object-fit: cover; display: block; }
.teach-visual { display: flex; align-items: center; justify-content: center; padding: 24px;
                background: #fbfaf7; border-left: 1px solid var(--line); }
.teach.middle .teach-text { justify-content: center; align-items: center; text-align: center; }
.teach.middle .choices { width: min(100%, 520px); }
.teach .lines { max-width: 760px; }
@media (max-width: 820px) {
  .teach, .teach.has-side { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .teach .deco, .teach-visual { order: -1; height: 220px; border-left: 0; }
}
/* The waiting and done screens: a splash fills the screen under the top bar. She sits in the
   picture's right half; the left is an empty wall, and the text sits on it. The picture is
   anchored right, so a less wide screen crops the empty wall, not her; the text keeps to
   what is left of the wall (`--wall`: its share of the picture's width, both pictures). */
.splash { position: fixed; inset: 60px 0 0 0; overflow: hidden; background: #fbf7ee;
          container-type: size; --wall: 0.44; --face: 68%; }
.splash.done-screen { --face: 82%; }   /* where her face is: the centre on a narrow screen */
.splash > img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; display: block; }
html:has(.splash) { scrollbar-gutter: auto; overflow: hidden; }   /* nothing to scroll: the picture goes to the edge */
.splash-card { position: absolute; left: 7cqw; top: 45%; transform: translateY(-50%);
               /* The picture (21:9, covering) is max(100cqw, 100cqh · 21/9) wide; the wall ends
                  (1 - wall) of that from the right edge. A small gap before it. */
               max-width: min(32cqw, calc(100cqw - (1 - var(--wall)) * max(100cqw, 100cqh * 7 / 3) - 9cqw)); }
.splash-card h1 { margin: 0 0 8px; }
.splash-card p { margin: 0; color: var(--muted); }
.mastered-skills { margin-top: 18px; display: grid; gap: 6px; }   /* the waiting screen: skills mastered */
.splash-card .mastered-skills .skill { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.splash-card .done-text { color: var(--ink); white-space: pre-line; }   /* the teacher's own words */
.splash-card .btn { display: inline-block; margin-top: 18px; text-decoration: none; }
.splash-card .brand { margin-bottom: 6px; color: var(--accent); font-size: var(--fs-small); font-weight: 700;
                      letter-spacing: 0.12em; text-transform: uppercase; }
/* Too narrow for the wall (under 2:1, the card would get under about a quarter of the width;
   a laptop browser is about 2.3:1): centre her, the text on a frosted card at the bottom. */
@container (max-aspect-ratio: 2/1) {
  .splash > img { object-position: var(--face) 50%; }
  .splash-card { left: 50%; top: auto; bottom: 4vh; transform: translateX(-50%);
                 width: max-content; max-width: calc(100% - 32px); text-align: center;
                 background: rgb(255 255 255 / 0.85); backdrop-filter: blur(8px);
                 border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 28px; }
  .splash-card .mastered-skills .skill { justify-content: center; }
}
.teach .kicker { color: var(--muted); font-weight: 600; margin: 0 0 6px; }
.teach h1 { margin-bottom: 14px; }
.teach .lines { font-size: var(--fs-task); }
.teach .lines p { margin: 8px 0; }
/* "• " lines on a teaching card (render.js, cardLines): one list, indented under the line before. */
.bullets { margin: 4px 0 8px; padding-left: 1.4em; }
.bullets li { margin: 4px 0; }
.teach .rungs { margin: 0 0 14px; }
.teach .rungs span { width: 26px; }
/* A question and its feedback: the buttons at the bottom of the box. */
.card.task { min-height: var(--task-h); margin: 0; display: flex; flex-direction: column; }
.card.task.feedback { min-height: var(--frame-h); }
.card.task > form, .card.task > .xl-answer { display: flex; flex-direction: column; flex: 1; }
.card.task > .xl-answer { gap: 14px; }   /* Svar never touches the sheet */
.card.task .error:empty { min-height: 0; margin: 0; }
.card.task > .xl-answer > .error:empty { display: none; }   /* not a second gap */   /* the buttons are at the bottom: no room to reserve */
.card.task > form > .row:last-child, .card.task > .xl-answer > .row:last-child,
.card.feedback > .row:last-child { margin-top: auto; padding-top: 18px; }   /* a gap even when the box is full */
@media (max-width: 820px) { .card.task, .card.task.feedback { min-height: 0; } }
.rules h2 { margin-top: 18px; }
.rules ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-task); }
.rules li { padding: 4px 0 4px 1.6em; position: relative; }
.rules li::before { position: absolute; left: 0; font-weight: 700; }
.rules .yes li::before { content: "✓"; color: var(--good); }
.rules .no li::before { content: "✕"; color: var(--no); }

.pop { animation: pop 0.45s ease-out; }
@keyframes pop { 0% { transform: scale(0.85); opacity: 0.2; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } }
/* A right answer: a short green badge in the middle of the top bar, over whatever comes next. */
.topbar { position: relative; }
.cheer { position: absolute; inset: 0; z-index: 20; pointer-events: none;
         display: flex; align-items: center; justify-content: center; }
.cheer-pill { background: var(--good); color: #fff; border-radius: 999px; padding: 4px 20px;
              box-shadow: 0 2px 10px rgb(31 138 76 / .35); display: flex; gap: 12px; align-items: center;
              animation: cheer 0.4s ease-out; }
.cheer-head { font-size: var(--fs-task); }
.cheer-msg { font-weight: 600; }
@keyframes cheer { 0% { transform: scale(0.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cheer-pill { animation: none; } }

/* --- Calculator ----------------------------------------------------------- */
/* The frame's height, never more: its bottom is the help tabs' bottom. */
.calc { position: sticky; top: 16px; height: var(--frame-h); margin: 0; display: flex; flex-direction: column; }
.calc h3 { margin: 0; font-size: var(--fs-task); }   /* like the question beside it */
.calc .calc-line { text-align: right; color: var(--muted); font-size: var(--fs-body); min-height: 1.5em; margin: 2px 2px 4px;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.calc .calc-line.error { color: var(--warn); font-weight: 600; }
.calc input.calc-display { font-size: var(--fs-title); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.calc .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.calc .keys button { padding: 11px 0; font-size: var(--fs-task); border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.calc .keys button.op { background: var(--accent-soft); }
.calc .keys + .row { margin-top: auto; }
.calc .keys button.eq { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* --- Teacher ------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; }
.tabs button { background: none; border: 0; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--muted); }
.tabs button.active { background: var(--accent-soft); color: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
/* Fixed one-line slots: a tile never changes size. The border is always there (transparent),
   so a highlight doesn't move anything. */
.tile { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; font-size: var(--fs-small); border: 2px solid transparent; }
.tile > div { min-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-right: 6px; vertical-align: middle; }
.tile .dot.on { background: var(--good); }
.tile.done { background: var(--good-soft); }
.tile .who { font-weight: 700; font-size: var(--fs-body); display: flex; justify-content: space-between; gap: 6px; }
.tile .code { color: var(--muted); font-weight: 400; font-size: 13px; }
.tile .slow { color: var(--accent); font-weight: 600; }
.tile .rungs { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.badge.good { background: var(--good); color: #fff; }
table.list { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
table.list th, table.list td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.summary { display: flex; gap: 18px; flex-wrap: wrap; margin: 16px 0 12px; font-weight: 600; }
.spacer { flex: 1; }
/* Needs help wins over every other state: the buttons' blue, nothing mixed with green. */
.tile.help { background: var(--accent-soft); border-color: var(--accent); }
table.board tr.help td { background: var(--accent-soft); }
.badge.help { background: var(--accent); color: var(--accent-ink); }
.summary .help-count { padding: 2px 12px; border-radius: 999px; border: 2px solid var(--line); }
.summary .help-count.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
                          animation: help-pulse 1.6s ease-in-out infinite; }
@keyframes help-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(47 91 211 / 0.55); }
                        60% { box-shadow: 0 0 0 9px rgb(47 91 211 / 0); } }
@media (prefers-reduced-motion: reduce) { .summary .help-count.on { animation: none; } }
.row label { margin: 0; }
h3.form-sub { margin: 22px 0 0; }
.narrow-input { width: 90px; }
table.list code { font-size: inherit; }
@media print {
  .topbar, .no-print, .error { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; padding: 0; }
}
select.inline { width: auto; }
.preset { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; }
.preset .row { margin-top: 10px; }
label.check { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.preset-pick { margin-bottom: 8px; }
table.list tr.picked td { background: var(--accent-soft); }
.row.nowrap { flex-wrap: nowrap; gap: 6px; }
.row.icons { gap: 2px; }
/* An icon button (edit, copy, delete): the label is its tooltip. */
.btn.icon { padding: 5px; line-height: 0; border-color: transparent; }
.btn.icon:not(:disabled):hover { border-color: var(--line); filter: none; }
.btn.icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
                stroke-linecap: round; stroke-linejoin: round; }
td.nowrap { white-space: nowrap; }
select.small-select { padding: 4px 8px; font-size: var(--fs-small); }
table.list td code { white-space: nowrap; }
table.board td.place { font-weight: 700; width: 3em; }
table.board tr.muted td { color: var(--muted); }

/* Excel simulator (js/sheet.js): a small look-alike of the Danish Excel window. */
.xl { --xl-line: #d4d4d4; --xl-head: #f3f3f3; --xl-green: #107c41; font-size: var(--fs-task); }
.xl-ribbon { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-bottom: 8px; }
.xl-btn { font-size: var(--fs-small); padding: 4px 10px; border: 1px solid var(--xl-line); border-radius: 6px; background: var(--card); cursor: pointer; }
.xl-btn:hover { background: var(--xl-head); }
/* Icon buttons like Excel's Tal group: % and the two-line decimal icons. */
.xl-btn.xl-icon { min-width: 2.6em; font-weight: 600; }
.xl-btn.xl-dec { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
                 line-height: 1; padding: 2px 9px; font-size: var(--fs-small); font-weight: 600; }
.xl-arrow { color: #2b6cc4; font-weight: 700; }
.xl-formula { display: flex; align-items: stretch; border: 1px solid var(--xl-line); background: var(--card); margin-bottom: 6px; }
.xl-name { min-width: 4.5em; padding: 4px 8px; border-right: 1px solid var(--xl-line); font-size: var(--fs-small); display: flex; align-items: center; }
.xl-fx { padding: 4px 10px; color: var(--muted); font-style: italic; font-size: var(--fs-small); border-right: 1px solid var(--xl-line); display: flex; align-items: center; }
.xl input.xl-bar { flex: 1; width: auto; min-width: 0; border: 0; border-radius: 0; padding: 2px 8px; font-size: var(--fs-task); outline: none; }
.xl input.xl-bar[readonly] { color: var(--muted); }
.xl-scroll { overflow-x: auto; outline: none; }
.xl-grid { border-collapse: collapse; background: var(--card); user-select: none; }
.xl-grid th { background: var(--xl-head); color: var(--muted); font-weight: 400; font-size: var(--fs-small); border: 1px solid var(--xl-line); padding: 0 6px; }
.xl-grid th.xl-row { min-width: 2.2em; text-align: center; }
/* Columns fit their content (like autofit), so the yellow cell is in view without scrolling. */
.xl-grid td { border: 1px solid var(--xl-line); min-width: 3em; max-width: 11em; height: 1.7em; padding: 0 6px; white-space: nowrap; overflow: hidden; position: relative; cursor: cell; }
.xl-grid td.xl-num { text-align: right; }
.xl-grid td.xl-err { text-align: center; }
.xl-grid td.xl-target { background: var(--tip); min-width: 5em; }
.xl-grid td.xl-ref { outline: 2px dashed var(--accent); outline-offset: -3px; }
.xl-grid td.xl-sel { outline: 2px solid var(--xl-green); outline-offset: -2px; }
.xl input.xl-edit { position: absolute; border-radius: 0; margin: 0; inset: 0; width: 100%; border: 0; padding: 0 6px; background: var(--card); font-size: var(--fs-task); outline: 2px solid var(--xl-green); outline-offset: -2px; }
.xl-msg { min-height: 1.5em; margin-top: 6px; color: var(--warn); font-size: var(--fs-body); }
/* The Excel answer: the sheet's messages take no room until used, so Svar sits close to the sheet. */
.xl-answer { margin-top: 12px; }
.xl-answer .xl-msg:empty, .xl-answer > .error:empty { min-height: 0; margin: 0; }
.xl-answer > .row { margin-top: 14px; }