/* Kun det, der hører til på skærmen. Alt hvad billedet skal vise, sættes som
 * attributter i exercise.js - stylesheetet følger ikke med, når SVG'et
 * serialiseres og tegnes på et canvas.
 *
 * Derfor er der heller ikke noget mørkt tema for selve arket: SVG'et maler sin
 * egen hvide bund, fordi den bund også er billedets. Arket er et stykke papir,
 * og det ligger på bordet i begge temaer. */

/* Fremdriften hører til arket og ikke til betjeningen. Den står lige over
 * arket, hvor markeringerne sker, og betjeningen bliver til gengæld én linje:
 * navnet til venstre, knapperne til højre. */
.progress {
  margin: clamp(20px, 3vw, 32px) 0 9px;
  color: var(--ink-soft);
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
}

.progress + .sheet-scroll { margin-top: 0; }

/* .btn står i site.css - kursussiderne har også knapper. */

/* ── Arket ────────────────────────────────────────────────────────────── */

.sheet-scroll {
  margin-top: clamp(20px, 3vw, 32px);
  overflow-x: auto;
  /* Hvid i begge temaer. Se noten øverst. */
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-lift);
  /* Under den bredde bliver ikonerne for små at ramme; så panorerer man
   * hellere sidelæns end at få et ark, der ikke kan bruges. */
  -webkit-overflow-scrolling: touch;
}

.sheet {
  display: block;
  width: 100%;
  min-width: 880px;
  height: auto;
}

/* Peger man på nr. 4, fyldes 1-4 gråt, så man kan se hvad klikket ville gøre.
 * Det sker i exercise.js, fordi et fyldt ikon skifter path og ikke kun farve. */
.pip { cursor: pointer; }
.pip path { transition: fill .12s ease; }

.pip:focus { outline: none; }
.pip:focus-visible rect { outline: 2px solid #17202a; outline-offset: -2px; }

.note {
  max-width: var(--measure);
  margin: 18px 0 0;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

@media (max-width: 760px) {
  .actions { width: 100%; margin-left: 0; }
  .actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pip path { transition: none; }
}

/* ── Modsætningerne ───────────────────────────────────────────────────────
 *
 * Ikke en fejl, der skal rettes. Kassen står derfor i sidens egne farver og
 * ikke i rødt — den peger på noget, gruppen skal tale om, og ikke på noget,
 * den studerende har gjort forkert. */

.flags {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.flag {
  max-width: var(--measure);
  padding: 14px 18px 15px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-control);
}

.flag h3 {
  margin: 0 0 3px;
  font-size: var(--step-0);
  font-weight: 600;
}

.flag p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* ── Linket til gruppen ───────────────────────────────────────────────── */

.share {
  max-width: var(--measure);
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line);
}

.share h2 { margin: 0 0 6px; font-size: var(--step-1); }
.share p { margin: 0 0 14px; color: var(--ink-soft); font-size: var(--step--1); }

.share-row { display: flex; flex-wrap: wrap; gap: 10px; }

.share-row input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 10px 13px;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink-soft);
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}

/* ── Sidetoppen ───────────────────────────────────────────────────────────
 *
 * Øvelsen er arket, ikke teksten om arket. Toppen er derfor strammere her end
 * på de sider, hvor overskriften er det første, man skal læse: arket skal nå
 * med op over kanten på en almindelig skærm. */

.page-head { padding: clamp(26px, 3.4vw, 44px) 0 0; }
.page-head h1 { font-size: clamp(30px, 4vw + 10px, 48px); }

.page-head .lede {
  margin-top: 11px;
  max-width: 66ch;
  font-size: var(--step-0);
}

/* ── Færdig ───────────────────────────────────────────────────────────────
 *
 * Øvelsen har ingen anden slutning end den, man selv sætter, og uden et vindue
 * var der ikke noget, der sagde "sådan". Vinduet samler det, der skal ske
 * bagefter — gem, del, send — og siger med rene ord, at markeringerne stadig
 * kan rettes. */

.done {
  width: min(640px, calc(100vw - 32px));
  max-height: min(84vh, 780px);
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.done::backdrop { background: rgba(11, 17, 22, .55); }

.done[open] {
  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: no-preference) {
  .done[open] { animation: rise .35s var(--ease) both; }
}

.done-top {
  position: relative;
  padding: clamp(22px, 3vw, 30px) clamp(52px, 6vw, 62px) 18px clamp(22px, 3vw, 30px);
  border-bottom: 1px solid var(--line);
}

.done-mark {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.done-top h2 { margin: 3px 0 0; font-size: var(--step-2); }

.done-lede {
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.done-x {
  position: absolute;
  top: clamp(16px, 2.4vw, 22px);
  right: clamp(14px, 2vw, 20px);
  width: 34px;
  height: 34px;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  cursor: pointer;
}

.done-x:hover { color: var(--ink); border-color: var(--line); }

/* `flex: 1` ville være `flex-basis: 0`, og en kolonne-flexbox med auto højde
 * regner i WebKit den slags barn ud til nul: hele midten af vinduet forsvandt
 * i Safari. Basis skal derfor være indholdet selv, og min-height: 0 er dét,
 * der stadig lader den krympe og rulle, når vinduet rammer sin max-height. */
.done-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 clamp(22px, 3vw, 30px);
}

.done-part { padding: clamp(18px, 2.4vw, 24px) 0; }
.done-part + .done-part { border-top: 1px solid var(--line); }

.done-part h3 { font-size: var(--step-1); }

.done-part > p {
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.done-plain { font-style: normal; }

.done-hint {
  margin-top: 11px;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

.done-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 13px;
}

.done-row input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 10px 13px;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink-soft);
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}

.done-part .flags { margin: 13px 0 0; }
.done-part .flag { max-width: none; }

.done-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px clamp(22px, 3vw, 30px);
  background: var(--paper-sunk);
  border-top: 1px solid var(--line);
}

/* Tre knapper kan ikke stå på én linje på en telefon. Den, der fører videre,
 * får sin egen. */
@media (max-width: 760px) {
  .actions { flex-wrap: wrap; }
  #finish { flex: 1 0 100%; }
}