/*
 * style.css — ét stilark til hele sitet.
 *
 * Udtrykket følger TeamGantt: lys grå flade, hvide paneler, tynde kølige
 * streger, farvede bjælker med afrundede hjørner og en grøn handlingsfarve.
 *
 * Målene i :root er ikke pynt. Rækkehøjden bruges både af CSS og af gantt.js,
 * som regner bjælkernes y-position ud i pixels — de to skal være enige, ellers
 * står bjælken ved siden af sin egen række. gantt.js læser værdien herfra ved
 * opstart i stedet for at have sin egen kopi.
 */

:root {
  --row-h: 34px;
  --head-h: 56px;
  --list-w: 380px;

  --bg: #eef1f5;
  --panel: #ffffff;
  --line: #e0e5ec;
  --line-strong: #cbd3de;
  --ink: #1f2a37;
  --ink-soft: #5b6979;
  --ink-faint: #8a97a6;

  --green: #3fa45b;
  --green-dark: #348a4c;
  --blue: #2f8de4;
  --red: #d64b40;
  --amber: #e9a13b;

  --group: #46556a;
  --weekend: #f5f7fa;
  --today: #e2574c;

  --shadow: 0 1px 2px rgba(31, 42, 55, .08), 0 2px 8px rgba(31, 42, 55, .06);
  --shadow-lift: 0 6px 24px rgba(31, 42, 55, .18);
  --radius: 6px;
}

* { box-sizing: border-box; }

/* Flere elementer her har display: flex eller grid, og den regel vinder over
   browserens egen [hidden] { display: none }. Uden det her bliver et element,
   JavaScript har skjult, stående på skærmen. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }

h1, h2, h3 { margin: 0 0 .5em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }

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

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--head-h);
  padding: 0 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.brand-mark {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--green) 0%, #57bd74 100%);
  position: relative;
  flex: none;
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: #fff;
}
.brand-mark::before { left: 4px; right: 8px; top: 6px; }
.brand-mark::after  { left: 8px; right: 4px; top: 13px; }

.topbar .spacer { flex: 1 1 auto; }

.topbar .who {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 13px;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dfe6ef;
  color: #46556a;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink-faint);
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .now {
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Knapper og felter ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: #f4f7fa; border-color: #b9c4d2; }
.btn:active { background: #eaeff5; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn-danger { color: var(--red); border-color: #efc7c3; background: #fff; }
.btn-danger:hover { background: #fdf2f1; border-color: var(--red); }

.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: #eef2f7; border-color: transparent; }

.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn-icon { width: 32px; padding: 0; }

.seg {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.seg button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.seg button:hover:not(:disabled) { background: #f4f7fa; }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.seg button[aria-pressed="true"] {
  background: #e3effb;
  color: #1f5f9e;
  font-weight: 650;
  box-shadow: inset 0 -2px 0 var(--blue);
}

/* ── Farvetoner ───────────────────────────────────────────────────────────
   En tone giver en knap betydning: MoSCoW, typen, logbogens slags, gatens
   udfald. Den samme tone bruges til mærkaten, der viser valget bagefter, så
   knappen og det, den sætter, ligner hinanden. */
[data-tone="red"]    { --tone-bg: #fbe9e7; --tone-ink: #a3372e; --tone-line: #f0c3bd; --tone-solid: #d64b40; }
[data-tone="amber"]  { --tone-bg: #fdf3e3; --tone-ink: #8a5a17; --tone-line: #f1d6a8; --tone-solid: #e9a13b; }
[data-tone="blue"]   { --tone-bg: #eaf3fc; --tone-ink: #1f5f9e; --tone-line: #bcd7f2; --tone-solid: #2f8de4; }
[data-tone="green"]  { --tone-bg: #eaf6ee; --tone-ink: #2c6b41; --tone-line: #bfe0c9; --tone-solid: #3fa45b; }
[data-tone="teal"]   { --tone-bg: #e3f4f4; --tone-ink: #146c6e; --tone-line: #b2dcdc; --tone-solid: #0f9ea1; }
[data-tone="purple"] { --tone-bg: #f1ebfa; --tone-ink: #6b3f8f; --tone-line: #d6c6ee; --tone-solid: #8e63cf; }
[data-tone="orange"] { --tone-bg: #fdeee4; --tone-ink: #a4501d; --tone-line: #f3cdb3; --tone-solid: #e8742f; }
[data-tone="grey"]   { --tone-bg: #eef2f7; --tone-ink: #5b6979; --tone-line: #d3dae3; --tone-solid: #8a97a6; }

.seg button[data-tone] { color: var(--tone-ink); }
.seg button[data-tone][aria-pressed="true"] {
  background: var(--tone-bg);
  color: var(--tone-ink);
  box-shadow: inset 0 -2px 0 var(--tone-solid);
}
.seg button.is-inherited {
  background-image: linear-gradient(to right, var(--tone-solid, var(--blue)) 55%, transparent 55%);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: bottom;
}
.btn[data-tone] { background: var(--tone-bg); border-color: var(--tone-line); color: var(--tone-ink); }
.btn[data-tone]:hover { border-color: var(--tone-solid); background: var(--tone-bg); filter: brightness(.98); }

/* En knap, der slår noget til og fra, skal kunne ses, når den er slået til. */
.btn[aria-pressed="true"] { background: #e3effb; border-color: #9cc3ea; color: #1f5f9e; }
.btn[aria-pressed="true"]:hover { background: #d8e8f9; }

.ico { flex: none; display: block; }

/* Værktøjslinjen har mange knapper. Når pladsen er knap, står de sjældne som
   ikoner med deres forklaring i title, så linjen ikke brækker i to. Med alle
   tekster fremme skal linjen bruge knap 2000 px; kompakt klarer den sig ned
   til omkring 1300. */
@media (max-width: 1980px) {
  .toolbar .btn.compact { width: 32px; padding: 0; }
  .toolbar .btn.compact .lbl { display: none; }
  #history button { width: 34px; padding: 0; }
  #history .lbl { display: none; }
  /* Syv visninger: knapperne rykker lidt sammen, så Scrum er med på linjen. */
  .toolbar .seg [data-view] { padding: 0 9px; }
}
.btn-sm .ico { width: 13px; height: 13px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; min-height: 72px; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 141, 228, .16);
}

label.field { display: block; margin-bottom: 12px; }
label.field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.field-row { display: flex; gap: 10px; }
.field-row > * { flex: 1 1 0; min-width: 0; }

.hint { color: var(--ink-faint); font-size: 12.5px; }
.err {
  background: #fdf2f1;
  border: 1px solid #f0cdc9;
  color: #a3372e;
  border-radius: var(--radius);
  padding: 9px 11px;
  font-size: 13px;
  margin-bottom: 12px;
}
.ok {
  background: #f1f9f3;
  border: 1px solid #c8e6d1;
  color: #2c6b41;
  border-radius: var(--radius);
  padding: 9px 11px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ── Kort og lister ───────────────────────────────────────────────────── */

.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }
.wrap-wide { max-width: 1320px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 18px; }
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { margin: 0; }
.card-body { padding: 18px; }

.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row > .spacer { flex: 1 1 auto; }
.row-wrap { flex-wrap: wrap; }

table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
  font-weight: 650;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--line);
}
table.grid td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  border-radius: 11px;
  background: #eef2f7;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
}
.pill-green { background: #eaf6ee; color: #2c6b41; }
.pill-amber { background: #fdf3e3; color: #8a5a17; }
.pill-blue { background: #eaf3fc; color: #1f5f9e; }
.pill-red { background: #fbe9e7; color: #a3372e; }

.empty {
  padding: 46px 20px;
  text-align: center;
  color: var(--ink-faint);
}

/* ── Projektkort på forsiden ──────────────────────────────────────────── */

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.project-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.project-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.project-card .bar-top { height: 4px; }
.project-card .inner { padding: 15px 16px 16px; }
.project-card h3 { margin: 0 0 4px; font-size: 15.5px; }
.project-card .meta { color: var(--ink-faint); font-size: 12.5px; }

.progress {
  height: 6px;
  border-radius: 3px;
  background: #e8edf3;
  overflow: hidden;
  margin-top: 12px;
}
.progress > i { display: block; height: 100%; background: var(--green); border-radius: 3px; }

.new-card {
  display: grid;
  place-items: center;
  min-height: 132px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  font-weight: 600;
}
.new-card:hover { border-color: var(--green); color: var(--green-dark); background: #fff; }

/* ── Login / invitation ───────────────────────────────────────────────── */

.auth-page {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}
.auth-box { width: 100%; max-width: 400px; }
.auth-box .card-body { padding: 24px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head .brand { justify-content: center; font-size: 17px; }
.auth-head p { color: var(--ink-soft); margin: 8px 0 0; }

/* ── Gantt ────────────────────────────────────────────────────────────── */

.project-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* Knapperne må hellere ombryde end at skrumpe: uden flex-wrap og flex:none
   presses den sidste knap i hver gruppe sammen til en stribe på smalle
   skærme, og teksten forsvinder uden at noget ser forkert ud. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
  position: relative;
  z-index: 20;
}
.toolbar > * { flex: none; }
.toolbar .spacer { flex: 1 1 auto; min-width: 0; }

.gt-stage { flex: 1 1 auto; display: flex; min-height: 0; }

.gt {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
}

.gt-head {
  display: flex;
  flex: none;
  height: 54px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--panel);
}

.gt-head-left {
  width: var(--list-w);
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-strong);
}

/* Øverste række: knapperne. Samme højde som tidslinjens øverste række, så de
   to hoveder står på linje. */
.gt-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 27px;
  padding: 0 8px 0 10px;
  border-bottom: 1px solid var(--line);
}

.gt-head-cols {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 0 8px 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
  font-weight: 650;
}
.gt-head-cols .c-name { flex: 1 1 auto; }
.gt-head-cols .c-date { width: 74px; flex: none; text-align: right; }
.gt-head-cols .c-pct { width: 44px; flex: none; text-align: right; }

/* Knapper, der skal kunne være i et 27 px højt hoved. */
.btn-xs {
  height: 21px;
  padding: 0 8px;
  font-size: 11.5px;
  border-radius: 4px;
  gap: 4px;
}
.btn-xs .ico { width: 12px; height: 12px; }

/* Uden for hovedet (liste- og kalendervisning) står knapperne som to
   almindelige knapper i værktøjslinjen. */
#list-actions { display: flex; gap: 6px; }

/* scrollbar-gutter holder hovedet lige så bredt som diagrammet under det på
   de platforme, hvor rullebjælken tager plads. Ellers står månederne en
   rullebjælkes bredde forskudt af de bjælker, de skal stå over. */
.gt-head-right { flex: 1 1 auto; overflow: hidden; position: relative; scrollbar-gutter: stable; }
/* Højden står fast: cellerne indeni er absolut placerede og kan ikke skubbe
   hovedet ud i en højde af sig selv. */
.gt-timehead { position: relative; height: 54px; }

.gt-major, .gt-minor { position: absolute; left: 0; top: 0; height: 27px; }
.gt-minor { top: 27px; height: 27px; border-top: 1px solid var(--line); }

.gt-major-cell, .gt-minor-cell {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--line);
  padding-left: 7px;
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
}
.gt-major-cell { font-weight: 650; color: var(--ink); text-transform: capitalize; }
.gt-minor-cell { justify-content: center; padding-left: 0; font-size: 11px; color: var(--ink-faint); }
.gt-minor-cell.is-weekend { background: var(--weekend); }
.gt-minor-cell.is-today { background: #fdeceb; color: var(--today); font-weight: 700; }

/*
 * Én rulleflade for begge retninger.
 *
 * Diagrammet rullede før vandret for sig selv med overflow-y: hidden. Det er
 * fint til en håndfuld opgaver, men et flexbarn med sin egen overflow bliver
 * kun strakt til den *synlige* højde — så snart planen var længere end
 * skærmen, klippede diagrammet nederst, mens opgavelisten fortsatte. Bjælkerne
 * fandtes, men kunne ikke ses.
 *
 * Nu ruller .gt-body begge veje, og opgavelisten bliver stående til venstre
 * med position: sticky. Så er der én højde at holde styr på, og den er
 * indholdets.
 */
.gt-body {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

.gt-list {
  width: var(--list-w);
  flex: none;
  border-right: 1px solid var(--line-strong);
  position: sticky;
  left: 0;
  /* Over bjælkerne — også over den, der trækkes (z-index: 6). */
  z-index: 8;
  background: var(--panel);
}

.gt-row {
  display: flex;
  align-items: center;
  height: var(--row-h);
  padding-right: 8px;
  border-bottom: 1px solid #f1f4f8;
  cursor: default;
  position: relative;
}
.gt-row:hover { background: #f7f9fc; }
.gt-row.is-selected { background: #eaf3fc; }
.gt-row.is-group > .r-name { font-weight: 650; }

/* Epicen er en overskrift og skal læses som én: lidt større, lidt mørkere, og
   med en streg over sig, så øjet ser hvor et afsnit begynder. */
.gt-row.is-epic { background: #f6f8fb; box-shadow: inset 0 1px 0 var(--line-strong); }
.gt-row.is-epic:hover { background: #eff3f8; }
.gt-row.is-epic.is-selected { background: #eaf3fc; }
.gt-row.is-epic > .r-name { font-weight: 700; letter-spacing: .01em; }
.gt-row.is-epic > .r-dot { width: 4px; height: 15px; border-radius: 1px; }

/* Hele pointen med en epic er at kunne pakke den sammen, og gruppernes ti
   pixels chevron er for lidt til den opgave: den skal kunne ses uden at man
   leder efter den. */
.gt-row.is-epic > .r-twisty {
  width: 21px;
  height: 21px;
  margin-right: 3px;
  border-radius: 4px;
  color: var(--ink);
  background: #e3e9f1;
}
.gt-row.is-epic > .r-twisty:hover:not(:disabled) { background: var(--line-strong); }
.gt-row.is-epic > .r-twisty svg { width: 12px; height: 12px; }

/* En tom epic har intet at folde. Knappen bliver stående og siger det — før
   skjulte den sig selv, og så var der ikke noget at finde. */
.gt-row.is-epic > .r-twisty.is-leaf {
  visibility: visible;
  background: none;
  opacity: .28;
  cursor: default;
}
.gt-row.is-drop-before::before,
.gt-row.is-drop-after::after {
  content: "";
  position: absolute;
  left: calc(26px + var(--drop-depth, 0) * 15px);
  right: 8px;
  height: 2px;
  background: var(--blue);
}
.gt-row.is-drop-before::before { top: -1px; }
.gt-row.is-drop-after::after { bottom: -1px; }
.gt-row.is-dragging { opacity: .45; }

.r-grip {
  width: 16px;
  flex: none;
  color: #c3ccd8;
  cursor: grab;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  user-select: none;
}
.gt-row:hover .r-grip { color: var(--ink-faint); }

.r-twisty {
  width: 16px;
  height: 16px;
  flex: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink-soft);
  display: grid;
  place-items: center;
}
.r-twisty svg { transition: transform .12s; }
.r-twisty.is-collapsed svg { transform: rotate(-90deg); }
.r-twisty.is-leaf { visibility: hidden; }

.r-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
  margin-right: 7px;
}

/* MoSCoW-bogstavet efter navnet. Must står stærkest; Won't er næsten væk. */
.r-moscow {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin: 0 4px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  background: #eef2f7;
  color: var(--ink-soft);
}
.r-moscow.is-must { background: #fbe9e7; color: #a3372e; }
.r-moscow.is-should { background: #fdf3e3; color: #8a5a17; }
.r-moscow.is-could { background: #eaf3fc; color: #1f5f9e; }
.r-moscow.is-wont { background: transparent; color: var(--ink-faint); text-decoration: line-through; }

.r-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  padding: 2px 4px;
  border-radius: 3px;
}
.r-name:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(47, 141, 228, .3);
  overflow: visible;
}

.r-date { width: 74px; flex: none; text-align: right; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.r-pct { width: 44px; flex: none; text-align: right; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* "3/5" for en milepæl med stage-gate: hvor meget der er på plads. */
.r-pct.is-gate { font-weight: 650; color: var(--ink-soft); }
.r-pct.is-gate.is-done { color: var(--green); }
.r-pct.is-gate.is-late { color: var(--red); }

/* flex-shrink: 0 — lærredets bredde er tidsaksens, og den skal have lov at
   være bredere end vinduet, så .gt-body har noget at rulle i. */
.gt-chart { flex: 1 0 auto; position: relative; }
.gt-canvas { position: relative; }

.gt-grid { position: absolute; inset: 0; }

.gt-sprint {
  position: absolute;
  top: 0;
  background: rgba(47, 141, 228, .045);
  border-left: 1px dashed rgba(47, 141, 228, .35);
  pointer-events: none;
  overflow: hidden;
}
.gt-sprint.is-odd { background: rgba(47, 141, 228, .085); }
.gt-sprint-label {
  position: sticky;
  top: 0;
  display: inline-block;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 650;
  color: #1f5f9e;
  opacity: .75;
  white-space: nowrap;
}

.gt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--today);
  opacity: .55;
  pointer-events: none;
}

/* Milepælens lodrette streg. Den ligger bag bjælkerne og tager aldrig imod
   klik: den skal kunne ses tværs gennem planen uden at komme i vejen. */
.gt-mlines { position: absolute; inset: 0; pointer-events: none; }
.gt-mline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed currentColor;
  opacity: .38;
}
.gt-mline.is-late { opacity: .6; }
.gt-mline.is-selected { opacity: 1; border-left-style: solid; }

.gt-links { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.gt-links path { fill: none; stroke: #93a1b2; stroke-width: 1.5; }
.gt-links path.is-hot { stroke: var(--blue); stroke-width: 2; }
.gt-links polygon { fill: #93a1b2; }
.gt-links g { pointer-events: stroke; cursor: pointer; }
.gt-links g:hover path { stroke: var(--blue); }
.gt-links g:hover polygon { fill: var(--blue); }

.gt-bar {
  position: absolute;
  height: 18px;
  border-radius: 4px;
  background: var(--blue);
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.gt-bar.is-dragging { cursor: grabbing; box-shadow: var(--shadow-lift); z-index: 6; }
.gt-bar.is-selected { outline: 2px solid var(--ink); outline-offset: 1px; }

.gt-bar .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .22);
  border-radius: 4px 0 0 4px;
  pointer-events: none;
}

.gt-bar .grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
  opacity: 0;
  touch-action: none;
}
.gt-bar .grip::after {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 2px;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .85);
}
.gt-bar .grip-l { left: 0; }
.gt-bar .grip-r { right: 0; }
.gt-bar:hover .grip { opacity: 1; }

/* Trækpunktet til bindinger. Ligger uden for bjælken, så det ikke stjæler
   klik fra selve bjælken, og findes på både opgaver, grupper og milepæle. */
.knob {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink-faint);
  opacity: 0;
  cursor: crosshair;
  touch-action: none;
  z-index: 3;
}
.knob-l { left: -16px; }
.knob-r { right: -16px; }
.knob:hover { border-color: var(--blue); }
.gt-bar:hover .knob, .gt-bar.is-linking .knob { opacity: 1; }

.gt-bar .label {
  position: absolute;
  left: calc(100% + 9px);
  white-space: nowrap;
  font-size: 12px;
  color: var(--ink-soft);
  pointer-events: none;
}

/* Tjekmarkeringen for en stage-gate: sidder for enden af bjælken, så den
   følger med, når bjælken trækkes, og ikke skygger for procenten indeni. */
.gt-check {
  position: absolute;
  left: calc(100% + 7px);
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 3px;
  background: #fff;
  color: #fff;
  font-size: 10px;
  line-height: 11px;
  text-align: center;
  font-weight: 700;
  pointer-events: none;
}
.gt-check.is-done { background: var(--green); border-color: var(--green); }

/* Epicens linje: én samlet streg fra det tidligste til det seneste i den.
   Ingen trækflader og ingen markør — den følger sit indhold. */
.gt-epic {
  position: absolute;
  height: 12px;
  border-radius: 3px;
  background: var(--group);
  opacity: .9;
  cursor: default;
}
.gt-epic::before, .gt-epic::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ink);
  opacity: .45;
}
.gt-epic::before { left: 0; border-radius: 3px 0 0 3px; }
.gt-epic::after { right: 0; border-radius: 0 3px 3px 0; }
.gt-epic.is-selected { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Gruppebjælken er tynd og mørk med nedadvendte ender, som i TeamGantt. */
.gt-group {
  position: absolute;
  height: 10px;
  background: var(--c, var(--group));
  border-radius: 2px;
  cursor: grab;
  touch-action: none;
}
.gt-group::before, .gt-group::after {
  content: "";
  position: absolute;
  top: 100%;
  border-style: solid;
  border-width: 6px 5px 0;
  border-color: var(--c, var(--group)) transparent transparent;
}
.gt-group::before { left: 0; }
.gt-group::after { right: 0; }
.gt-group.is-dragging { cursor: grabbing; }

/* Selve romben sidder i ::before. Ville elementet selv være drejet 45°, ville
   trækpunkterne til bindinger stå på skrå og ligge det forkerte sted. */
.gt-milestone {
  position: absolute;
  width: 15px;
  height: 15px;
  color: var(--group);
  cursor: grab;
  touch-action: none;
}
.gt-milestone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}
.gt-milestone.is-selected::before { outline: 2px solid var(--ink); outline-offset: 2px; }
.gt-milestone .knob-l { left: -18px; }
.gt-milestone .knob-r { right: -18px; }
.gt-milestone:hover .knob, .gt-milestone.is-linking .knob { opacity: 1; }
.gt-group:hover .knob, .gt-group.is-linking .knob { opacity: 1; }

.gt-baseline {
  position: absolute;
  height: 5px;
  border-radius: 2px;
  background: #b9c4d2;
  pointer-events: none;
}

.gt-linkline { position: absolute; inset: 0; pointer-events: none; }
.gt-linkline path { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 4 3; fill: none; }

.gt-droptarget { outline: 2px dashed var(--blue); outline-offset: 2px; }

.gt-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  background: #fafbfd;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ── Inspektør ────────────────────────────────────────────────────────── */

.inspector {
  width: 320px;
  flex: none;
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 16px;
}
.inspector[hidden] { display: none; }
.inspector h3 { display: flex; align-items: center; gap: 8px; }
.inspector .sect { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.inspector .sect > h4 {
  margin: 0 0 10px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
/* "Standard" er ingen egen farve: opgaven følger projektets, en gruppe og en
   epic er grå. Den streges over, så den ikke ligner en hvid farve. */
.swatch.is-default { background: linear-gradient(135deg, #fff 45%, var(--red) 45% 55%, #fff 55%) !important; border-color: var(--line-strong); }
.swatch.is-default[aria-pressed="true"] { border-color: var(--ink); }
.swatch-custom { position: relative; overflow: hidden; background: conic-gradient(#d64b40, #e3b521, #3fa45b, #14a5c9, #5565d6, #b455c4, #d64b40) !important; }
.swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: 0; }

/* Stage-gatens afkrydsningsliste. Den kan blive lang i et projekt med mange
   opgaver, så den ruller for sig selv i stedet for at skubbe resten af
   inspektøren — noter og knapper skal stadig kunne nås. */
.gate-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px;
}
.gate-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.gate-item:hover { background: #f4f7fb; }
.gate-item[hidden] { display: none; }
.gate-item input { width: 14px; height: 14px; flex: none; margin: 0; accent-color: var(--green); }
.gate-item .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-item.is-done .nm { color: var(--green); }
.gate-item .when { flex: none; font-size: 11px; color: var(--ink-faint); }
.gate-item .when.is-late { color: var(--red); }
.inspector .hint.is-late { color: var(--red); }

.dep-list { display: flex; flex-direction: column; gap: 6px; }
.dep-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  background: #f5f7fa;
  border-radius: var(--radius);
  padding: 6px 8px;
}
.dep-item .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-item select { width: 62px; height: 26px; padding: 0 4px; font-size: 12px; }
.dep-item input { width: 52px; height: 26px; padding: 0 6px; font-size: 12px; }

/* ── Liste- og kalendervisning ────────────────────────────────────────── */

.view-pane { flex: 1 1 auto; overflow: auto; padding: 18px; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cal .dow { background: #f7f9fc; padding: 7px 9px; font-size: 11.5px; font-weight: 650; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.cal .day { background: #fff; min-height: 104px; padding: 6px 7px; }
.cal .day.is-out { background: #fafbfd; color: var(--ink-faint); }
.cal .day.is-today .num { background: var(--today); color: #fff; }
.cal .day .num {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.cal .chip {
  display: block;
  font-size: 11.5px;
  color: #fff;
  border-radius: 3px;
  padding: 2px 5px;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.cal .chip.is-milestone { background: var(--group) !important; }

/* ── Epics som inkrementer ────────────────────────────────────────────── */

.flow-view { display: flex; flex-direction: column; gap: 14px; }
.flow-head { align-items: flex-start; }
.flow-head .hint { margin: 0; max-width: 640px; }
.flow-head .spacer { flex: 1 1 auto; }
.flow-strip {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 4px 4px;
}
/* Tegningen skaleres efter højden, så tre-fire epics kan ses på én gang;
   flere end det ruller sidelæns. */
.flow-strip svg { display: block; height: 300px; width: auto; max-width: none; }
.flow-strip .ef-inc, .flow-strip .ef-seg { cursor: pointer; }
.flow-strip .ef-seg:hover > path:first-of-type { filter: brightness(.96); }
.flow-detail .row .spacer { flex: 1 1 auto; }
.flow-table .ph-head td { background: #f7f9fc; padding-top: 8px; padding-bottom: 8px; }
.flow-table .ph-head.is-focus td { background: #eaf3fc; box-shadow: inset 3px 0 0 var(--blue); }
.flow-table a { color: var(--ink); text-decoration: none; }
.flow-table a:hover { color: var(--blue); text-decoration: underline; }
.flow-table .ph-name { font-weight: 650; color: var(--ink); }

/* ── Proces: revisionshistorik og gate-beslutninger ───────────────────── */

.process-view { display: flex; flex-direction: column; gap: 14px; max-width: 1180px; }
.process-tabs { align-self: flex-start; }
.process-head { align-items: flex-start; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.process-head > div:first-child { max-width: 620px; }
.process-head .spacer { flex: 1 1 auto; }
.process-table td { vertical-align: top; }
.process-table tr.is-click { cursor: pointer; }
.process-table tr.is-click:hover td { background: #f7f9fc; }
.process-table .nowrap { white-space: nowrap; }
.process-table .pill { margin-top: 4px; }
.cell-text { margin: 0 0 4px; white-space: pre-wrap; max-width: 620px; }
.decision-text { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; }

.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.outcomes .outcome {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.outcomes .outcome span { font-size: 11.5px; color: var(--ink-faint); line-height: 1.35; }
.outcomes .outcome strong { display: flex; align-items: center; gap: 5px; color: var(--tone-ink, var(--ink)); }
.outcomes .outcome:hover { border-color: var(--tone-solid, var(--blue)); }
.outcomes .outcome[aria-pressed="true"] { border-color: var(--tone-solid, var(--blue)); background: var(--tone-bg, #eef4fb); box-shadow: 0 0 0 1px var(--tone-solid, var(--blue)); }
.field > .lbl { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.seg-fill { display: flex; }

.sprint-card.is-now { box-shadow: var(--shadow), inset 3px 0 0 var(--blue); }
.sprint-goal { margin-top: 10px; padding: 10px 12px; background: #f7f9fc; border-radius: var(--radius); white-space: pre-wrap; font-size: 14px; }
.sprint-goal.is-empty { color: var(--ink-faint); font-style: italic; }
.sprint-goal .lock { float: right; margin-left: 8px; font-size: 11px; font-weight: 650; color: var(--ink-faint); font-style: normal; }
.sprint-tasks { margin: 0; padding-left: 18px; columns: 2; column-gap: 28px; font-size: 13px; }
.sprint-tasks li { break-inside: avoid; margin-bottom: 2px; }
.sprint-tasks li.is-done a { color: var(--ink-faint); text-decoration: line-through; }
.sprint-tasks a { color: var(--ink); text-decoration: none; }
.sprint-tasks a:hover { color: var(--blue); text-decoration: underline; }
.hint.is-late { color: var(--red); }
.dod-list { margin: 0 0 6px; padding-left: 22px; }
.dod-list li { margin-bottom: 6px; }
.dod-list li input { width: calc(100% - 40px); }
.dod-check { display: flex; flex-direction: column; gap: 8px; }
.dod-check label { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.dod-check input { margin-top: 3px; }

.process-tabs { flex-wrap: wrap; }
.log-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #f7f9fc; border-radius: var(--radius); }
.log-form .seg button { height: 28px; }
.log-form input[type=date] { width: auto; }
.log-week { margin: 16px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.log-entry { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.log-entry.is-editing { display: block; }
.log-meta { flex: none; width: 170px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 12.5px; }
.log-body { flex: 1 1 auto; min-width: 0; }
.log-conclusion { color: var(--ink-soft); font-weight: 600; }
.nowrap { white-space: nowrap; }

.risk-layout { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 22px; align-items: start; }
.risk-matrix { display: grid; grid-template-columns: 92px repeat(3, 1fr); gap: 4px; }
.risk-cell { min-height: 78px; padding: 5px; background: #f3f6fa; border-radius: 4px; display: flex; flex-direction: column; gap: 4px; }
.risk-cell.is-hot { background: #fbe9e7; }
.risk-axis { font-size: 11px; color: var(--ink-faint); display: flex; align-items: center; justify-content: flex-end; text-align: right; padding-right: 4px; }
.risk-axis.is-x { justify-content: center; text-align: center; padding: 2px 0 0; }
.risk-chip { all: unset; cursor: pointer; font-size: 11.5px; line-height: 1.3; padding: 3px 6px; background: #fff; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; text-overflow: ellipsis; }
.risk-chip:hover { border-color: var(--blue); }
.process-table tr.is-closed td { color: var(--ink-faint); }
@media (max-width: 900px) { .risk-layout { grid-template-columns: 1fr; } }

.tour-veil { position: fixed; inset: 0; background: rgba(23, 32, 43, .45); z-index: 90; }
.tour-spot {
  position: fixed;
  z-index: 90;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(23, 32, 43, .45), 0 0 0 2px var(--blue);
  pointer-events: none;
  transition: top .2s, left .2s, width .2s, height .2s;
}
.tour-card {
  position: fixed;
  z-index: 91;
  width: min(380px, calc(100vw - 32px));
  padding: 16px 18px 14px;
  background: var(--panel);
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
}
.tour-card h3 { margin: 0 24px 6px 0; font-size: 15px; }
.tour-card p { margin: 0 0 14px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.tour-card .row { gap: 6px; }
.tour-close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 18px; color: var(--ink-faint); cursor: pointer; }

.new-card.is-demo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.new-card.is-demo span { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }

.agenda { margin: 6px 0 10px; padding: 14px 16px; background: #f7f9fc; border: 1px solid var(--line); border-radius: var(--radius); font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.seg-fill button { flex: 1 1 0; padding: 0 6px; min-width: 0; }
.inspector .seg-fill button { font-size: 12.5px; }
/* Fasen: tre pr. række, så "Arver: Udvikling" og "Leverance" kan stå fuldt ud. */
.seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.seg-grid button { border-bottom: 1px solid var(--line); padding: 0 6px; font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-grid button:nth-child(3n) { border-right: 0; }
.seg-grid button:nth-last-child(-n+3) { border-bottom: 0; }

/* ── Dialog og besked ─────────────────────────────────────────────────── */

dialog {
  border: 0;
  border-radius: 10px;
  padding: 0;
  box-shadow: var(--shadow-lift);
  max-width: 440px;
  width: calc(100% - 32px);
  color: var(--ink);
}
dialog.is-wide { max-width: 680px; }
dialog.is-wide textarea { min-height: 0; }
dialog .actions .spacer { flex: 1 1 auto; }
dialog::backdrop { background: rgba(23, 32, 43, .42); }
dialog .card-body { padding: 20px; }
dialog h2 { margin-bottom: 14px; }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}
.toast {
  background: #24303f;
  color: #fff;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: var(--shadow-lift);
  max-width: 380px;
  animation: toast-in .18s ease-out;
}
.toast.is-error { background: #a3372e; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

.copyfield { display: flex; gap: 6px; }
.copyfield input { font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Print: én side med gantten, uden flader der ikke kan klikkes ─────── */

@media print {
  @page { size: landscape; margin: 10mm; }
  body { background: #fff; }
  .topbar, .toolbar, .inspector, .gt-foot, .toasts, .r-grip, .r-twisty { display: none !important; }
  .project-page { height: auto; overflow: visible; }
  .gt-body { overflow: visible !important; }
  .gt-chart { overflow: visible !important; }
  /* Papiret ruller ikke, og en sticky kolonne i et ark uden rulning bliver
     stående — men den ville skjule bjælkerne bagved, hvis arket er smallere
     end planen. Kolonnen skal bare stå, hvor den står. */
  .gt-list { border-right: 1px solid #999; position: static; }
  .print-head { display: block !important; margin-bottom: 8mm; }
  .gt-bar, .gt-group, .gt-epic, .gt-milestone, .gt-baseline, .gt-check, .gt-mline, .cal .chip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
.print-head { display: none; }

@media (max-width: 720px) {
  :root { --list-w: 190px; }
  .wrap { padding: 18px 14px 40px; }
  .inspector { position: fixed; right: 0; top: 0; bottom: 0; z-index: 40; box-shadow: var(--shadow-lift); }

  /* På en telefon er der kun plads til navnet og én dato. Uden det her bliver
     opgavenavnet skåret ned til ét bogstav, mens tre talkolonner får plads. */
  .gt-head-left .c-date + .c-date,
  .gt-head-left .c-pct,
  .gt-row .r-date + .r-date,
  .gt-row .r-pct { display: none; }
}

/* ── Story points og burnup ───────────────────────────────────────────── */

.seg-points { width: 100%; }
.seg-points button { flex: 1 1 0; padding-left: 0; padding-right: 0; }
.seg-points button.is-oversized,
.seg-points button.is-oversized:disabled { color: var(--red); background: #fdf0ef; opacity: 1; }
.burnup-chart {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  overflow-x: auto;
}
.burnup-chart svg { display: block; width: 100%; height: auto; min-width: 640px; }
.burnup-note { margin: 0 0 8px; }
.burnup-note.is-over { color: var(--red); font-weight: 600; }
.velocity-field { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.velocity-field .row { gap: 10px; margin-bottom: 6px; }
.velocity-field input { width: 90px; }
.burnup-scroll { overflow-x: auto; }
.burnup-table { margin-top: 8px; white-space: nowrap; }
.burnup-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.burnup-table tr.is-current td { background: #f3f8fd; font-weight: 600; }

/* ── Scrum ────────────────────────────────────────────────────────────── */

/* Boardet fylder visningen, og hver kolonne ruller for sig: backloggen kan
   blive lang, og sprintet, der kører, skal blive stående øverst. */
.sc-view { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.sc-head { align-items: flex-start; gap: 12px; }
.sc-head > .hint { margin: 0; max-width: 780px; }
.sc-mine { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; cursor: pointer; }
.sc-mine input { width: auto; height: auto; margin: 0; }
.sc-board { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; }
.sc-col { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); }
.sc-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sc-col-head h3 { margin: 0; font-size: 14px; }
.sc-col-head .spacer { flex: 1 1 auto; }
.sc-list { flex: 1 1 auto; min-height: 80px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.sc-empty { padding: 22px 12px; text-align: center; color: var(--ink-faint); }
.sc-empty p { margin: 0 0 8px; }

/* Kortene. Kanten og tonen viser, hvor opgaven er: blå i gang, gul til
   review, grøn godkendt — som knapperne, der flytter den videre. */
.sc-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.sc-card[draggable="true"] { cursor: grab; }
.sc-card:hover { border-color: var(--line-strong); }
.sc-card.is-doing { border-left-color: var(--blue); background: #f8fbff; }
.sc-card.is-review { border-left-color: var(--amber); background: #fffaf1; }
.sc-card.is-done { border-left-color: var(--green); background: #f6fbf7; }
.sc-card.is-done .sc-name { color: var(--ink-soft); }
.sc-card.is-selected { box-shadow: 0 0 0 2px var(--blue); }
.sc-card.is-dragging { opacity: .45; }
.sc-main { flex: 1 1 auto; min-width: 0; }
.sc-name { font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; }
.sc-tag {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--tone-bg);
  color: var(--tone-ink);
}
.sc-place { color: var(--ink-faint); }
.sc-note { color: var(--red); font-weight: 600; }
.sc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.sc-people { display: inline-flex; align-items: center; gap: 3px; }
.sc-arrow { color: var(--ink-faint); font-size: 11px; }
.sc-actions { display: flex; gap: 4px; }
.avatar-xs { width: 22px; height: 22px; font-size: 10px; }
.avatar.is-empty { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-faint); }

/* Hvor et kort lander, når det slippes i backloggen. */
.sc-card.drop-before { box-shadow: 0 -3px 0 var(--blue); }
.sc-list.drop-end { box-shadow: inset 0 -3px 0 var(--blue); }

.sc-sprint { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; gap: 6px; background: #fbfcfd; }
.sc-sprint.is-now { border-color: #bcd7f2; box-shadow: inset 3px 0 0 var(--blue); }
.sc-sprint.is-late { border-color: #f0c3bd; }
/* Mens et kort fra backloggen trækkes, viser sprintene, at de kan tage imod det. */
.sc-drag-backlog .sc-sprint[data-sprint] { border-style: dashed; border-color: #9cc3ea; }
.sc-sprint.is-drop { background: #eaf3fc; border-color: var(--blue); }
.sc-sprint-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-sprint-head .spacer { flex: 1 1 auto; }
.sc-goal { font-size: 13px; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; white-space: pre-wrap; }
.sc-fold { align-self: flex-start; border: 0; background: none; color: var(--blue); font: inherit; font-size: 12px; padding: 2px 0; cursor: pointer; }
.sc-fold:hover { text-decoration: underline; }
.sc-outside { margin: 4px 2px; }
.sc-past { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.sc-past h4 { margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.sc-past-row { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 2px 0; }
.sc-past-row .spacer { flex: 1 1 auto; }

.pill[data-tone] { background: var(--tone-bg); color: var(--tone-ink); }
.sc-state-row { gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .sc-view { height: auto; }
  .sc-board { grid-template-columns: 1fr; }
  .sc-list { overflow: visible; }
}