/* site.css — Coursepic.
 *
 * Content-Security-Policy'en tillader ikke inline style. Alt udseende står
 * derfor her, og JavaScript ændrer kun klasser og data-attributter — aldrig
 * element.style. Farverne til uddannelserne findes to steder, her og i
 * assets/programmes.js; ændres den ene, skal den anden med.
 */

:root {
  --ink: #16181d;
  --ink-soft: #5a6069;
  --line: #d9dce1;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --accent: #276fd7;
  --radius: 10px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-text-size-adjust: 100%;
}

/* ── Topbjælke ───────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.topbar__brand { font-weight: 700; letter-spacing: 0.02em; }
.topbar__nav { display: flex; gap: 16px; }

.topbar__link {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.topbar__link:hover { color: var(--ink); }
.topbar__link--current { color: var(--ink); border-bottom-color: var(--accent); }

/* ── Side ────────────────────────────────────────────────────────────────── */

.page { max-width: 980px; margin: 0 auto; padding: 28px 24px 64px; }
.page--wide { max-width: 1180px; }
.page__title { margin: 0 0 6px; font-size: 26px; letter-spacing: -0.01em; }
.page__lead { margin: 0 0 24px; max-width: 62ch; color: var(--ink-soft); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 820px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.panel--wide { margin-top: 20px; }
.panel__title { margin: 0 0 16px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.panel__subtitle { margin: 24px 0 12px; font-size: 14px; }
.panel__lead { margin: -6px 0 16px; color: var(--ink-soft); max-width: 70ch; }

/* ── Felter ──────────────────────────────────────────────────────────────── */

.field { margin-bottom: 18px; border: 0; padding: 0; }
.field--checks { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.field--button { display: flex; align-items: flex-end; }

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.field__label--inline { margin: 0 8px 0 0; display: inline-block; }

.field__input {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field__input--area { resize: vertical; line-height: 1.35; }
.field__input--small { width: 110px; }
.field__hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }

.check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }

.filename { display: flex; align-items: center; gap: 6px; }
.filename__ext { color: var(--ink-soft); font-size: 14px; }

/* ── Knapper ─────────────────────────────────────────────────────────────── */

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

.button {
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}

.button:hover { border-color: #b9bec6; }
.button--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button--primary:hover { background: #205cb5; border-color: #205cb5; }

.status { margin: 12px 0 0; min-height: 1.4em; font-size: 13px; color: var(--ink-soft); }

/* ── Forhåndsvisning ─────────────────────────────────────────────────────── */

.preview { margin-bottom: 20px; }

.preview__canvas {
  display: block;
  width: 100%;
  max-width: 828px;
  height: auto;
  border-radius: 4px;
  background:
    repeating-conic-gradient(#e9ebee 0 25%, #f7f8f9 0 50%) 0 0 / 16px 16px;
}

.preview__canvas--actual {
  display: block;
  background:
    repeating-conic-gradient(#e9ebee 0 25%, #f7f8f9 0 50%) 0 0 / 16px 16px;
}

.preview__caption { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }

/* ── Farvenøglen ─────────────────────────────────────────────────────────── */

.legend { width: 100%; border-collapse: collapse; font-size: 14px; }
.legend th, .legend td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.legend thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.legend tbody th { font-weight: 400; }
.legend code { font: 13px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.legend__examples { color: var(--ink-soft); font-size: 13px; }

.swatch {
  display: inline-block;
  width: 46px;
  height: 17px;
  border-radius: 3px;
  vertical-align: -3px;
  margin-right: 8px;
}

.swatch__codes { font: 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-soft); }

/* ── Skemaets værktøjslinje ──────────────────────────────────────────────── */

.toolbar {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.toolbar__group { display: flex; align-items: center; gap: 8px; }
.toolbar__group--grow { flex: 1 1 260px; }

.tab {
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
}

.tab:first-child { border-radius: 7px 0 0 7px; }
.tab:last-child { border-radius: 0 7px 7px 0; border-left: 0; }
.tab--current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── Skemaet ─────────────────────────────────────────────────────────────── */

.board-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.board { border-collapse: collapse; width: 100%; min-width: 900px; table-layout: fixed; }

.board th, .board td { border: 1px solid #b4b8bd; padding: 10px; vertical-align: top; text-align: left; }
.board td { display: table-cell; }
.board thead th { color: #fff; font-size: 17px; padding-top: 14px; padding-bottom: 14px; }
.board__corner { width: 92px; }

/* Tidssøjlen siger `8–10` stort og `8.15–9.50` småt under — samme to linjer
   som eksporten tegner, så skærmen og PNG'en ikke fortæller hver sin historie. */
.board th.board__slot { width: 92px; color: #fff; text-align: center; vertical-align: middle; }
.board__slot-short { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.board__slot-time { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; }
.board__cell { min-height: 92px; }
/* display:flex på en <td> ville tage cellen ud af tabellens kolonnebredder, så
   brikkerne stables med en indre kasse i stedet. */
.board__cell > .chip { display: flex; width: fit-content; touch-action: none; }
.bank__item .chip { touch-action: none; }
.board__cell--over { outline: 2px dashed var(--accent); outline-offset: -3px; }

/* Farverne står også i assets/seed.js (SEASONS), som eksporten tegner efter. */
body[data-season="efteraar"] .board thead th { background: #6f4620; }
body[data-season="efteraar"] .board th.board__slot { background: #8d6231; }
body[data-season="efteraar"] .board__row--alt .board__cell { background: #fbf3ec; }

body[data-season="foraar"] .board thead th { background: #3d5c23; }
body[data-season="foraar"] .board th.board__slot { background: #517d31; }
body[data-season="foraar"] .board__row--alt .board__cell { background: #f2f8ee; }

/* ── Brikker ─────────────────────────────────────────────────────────────── */

/* Brikken er så bred som sin tekst, ikke som cellen — ellers ville en kort kode
   fylde hele dagen ud. Lange navne (BSc-kurserne) bryder til flere linjer frem
   for at blive klippet af; det er også sådan eksporten tegner dem.

   Lys flade og mørk tekst frem for hvid tekst på fuld kulør. Kuløren bliver i
   søjlen til venstre og i kanten, så brikken stadig kan kendes på farven på en
   armslængdes afstand, men teksten står mindst 7 : 1 mod fladen — hvidt på det
   gule gav 1,9 : 1. Se `soft`/`ink` i assets/programmes.js. */
.chip {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  min-height: 28px;
  overflow: hidden;
  margin: 0 0 6px;
  border-radius: 8px;
  cursor: grab;
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  user-select: none;
}

.chip:last-child { margin-bottom: 0; }
.chip__strip { flex: 0 0 7px; }
.chip__text { padding: 0 9px; }
.chip--dragging { opacity: 0.3; }
.chip--picked { outline: 2px solid var(--ink); outline-offset: 2px; }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Spøgelsesbrikken følger markøren. position/transform sættes fra JavaScript —
   det eneste sted i koden der rører element.style — så den skal ikke have en
   startposition her, kun det der ikke ændrer sig. */
.chip-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  width: max-content;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* ── Kursusbanken ────────────────────────────────────────────────────────── */

.bank { display: flex; flex-wrap: wrap; gap: 8px; min-height: 64px; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; }
.bank--over { border-color: var(--accent); background: #f0f5fd; }
.bank__item { display: inline-flex; align-items: center; gap: 2px; }
.bank__item .chip { margin: 0; }

.bank__remove {
  width: 20px;
  height: 20px;
  padding: 0;
  font: 15px/1 var(--font);
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.bank__remove:hover { background: var(--line); color: var(--ink); }

.newcourse { display: grid; grid-template-columns: 160px minmax(0, 1fr) 220px auto; gap: 14px; align-items: start; }

@media (max-width: 760px) { .newcourse { grid-template-columns: minmax(0, 1fr); } }

.offscreen { position: absolute; left: -10000px; width: 964px; height: 560px; }

/* ── Uddannelsernes farver ───────────────────────────────────────────────── */

/* Prøven i farvenøglen viser kortets farver (søjle + flade); brikken viser
   skemaets (kulørt søjle og kant, lys flade, mørk tekst). */
.chip--ee { background: #e4effd; color: #1b4e96; box-shadow: inset 0 0 0 1px #276fd7; }
.chip--ee .chip__strip { background: #276fd7; }
.swatch--ee { background: linear-gradient(to right, #276fd7 0 30%, #3e8fee 30% 100%); }
.chip--sw { background: #fdf3e1; color: #6f4c07; box-shadow: inset 0 0 0 1px #e39b0e; }
.chip--sw .chip__strip { background: #e39b0e; }
.swatch--sw { background: linear-gradient(to right, #e39b0e 0 30%, #f2ab26 30% 100%); }
.chip--e { background: #dff4e8; color: #005c2c; box-shadow: inset 0 0 0 1px #009246; }
.chip--e .chip__strip { background: #009246; }
.swatch--e { background: linear-gradient(to right, #009246 0 30%, #17af58 30% 100%); }
.chip--st { background: #fde3e2; color: #951906; box-shadow: inset 0 0 0 1px #df2609; }
.chip--st .chip__strip { background: #df2609; }
.swatch--st { background: linear-gradient(to right, #df2609 0 30%, #f0382f 30% 100%); }
.chip--bsc { background: #e5f8f7; color: #155c5d; box-shadow: inset 0 0 0 1px #28adb0; }
.chip--bsc .chip__strip { background: #28adb0; }
.swatch--bsc { background: linear-gradient(to right, #28adb0 0 30%, #48ccc8 30% 100%); }
.chip--other { background: #e7e8e8; color: #2c3038; box-shadow: inset 0 0 0 1px #393e48; }
.chip--other .chip__strip { background: #393e48; }
.swatch--other { background: linear-gradient(to right, #393e48 0 30%, #57595c 30% 100%); }

/* ── Synkroniseringslinjen ───────────────────────────────────────────────── */

.sync {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
}

.sync__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-soft); flex: 0 0 auto; }
.sync__label { font-weight: 600; }
.sync__detail { color: var(--ink-soft); }
.sync__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sync__form { display: flex; gap: 6px; }

.sync[data-tone="ok"] .sync__dot { background: #17af58; }
.sync[data-tone="warn"] .sync__dot { background: #e39b0e; }
.sync[data-tone="bad"] .sync__dot { background: #df2609; }

.sync__button {
  padding: 5px 11px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.sync__button:hover { border-color: #b9bec6; }

.sync__input {
  width: 160px;
  padding: 5px 9px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.sync__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }