/* =========================================================================
   Grundlag
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0;
}

h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand); }

img, svg { max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

::selection { background: var(--brand-wash); color: var(--ink); }

/* Tal, datoer, timer og ugenumre saettes altid i mono - det er instrumentet. */
.data, .mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s3); top: -100px; z-index: 100;
  background: var(--brand); color: var(--ink-on-brand);
  padding: var(--s2) var(--s4); border-radius: var(--r);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s3); }

/* =========================================================================
   Skallen: topbjaelke + sidepanel + indhold
   ========================================================================= */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: 'topbar topbar' 'sidebar main';
  min-height: 100dvh;
}

.topbar {
  grid-area: topbar;
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.topbar__brand {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--t-md);
  letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
  padding-right: var(--s3);
}

/* Mærket: et lille ugegitter - tre streger, en fyldt. */
.topbar__mark {
  width: 22px; height: 22px; flex: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.topbar__mark i { background: var(--rule-strong); border-radius: 1px; display: block; }
.topbar__mark i:nth-child(2) { background: var(--brand); }

.topbar__spacer { flex: 1; }

.topbar__search {
  flex: 0 1 340px;
  display: flex; align-items: center; gap: var(--s2);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 0 var(--s3);
  height: 34px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.topbar__search:focus-within { border-color: var(--brand-edge); background: var(--surface); }
.topbar__search input {
  flex: 1; border: 0; background: none; color: inherit;
  font: inherit; font-size: var(--t-sm); outline: none; min-width: 0;
}
.topbar__search kbd {
  font-family: var(--font-data); font-size: var(--t-xs);
  color: var(--ink-3); border: 1px solid var(--rule);
  border-radius: var(--r-xs); padding: 1px 5px; background: var(--surface);
}

.sidebar {
  grid-area: sidebar;
  border-right: 1px solid var(--rule);
  background: var(--surface);
  padding: var(--s4) 0 var(--s8);
  overflow-y: auto;
  position: sticky; top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
}

.sidebar__section { padding: 0 var(--s3); margin-bottom: var(--s5); }

.sidebar__label {
  font-family: var(--font-data);
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 var(--s3) var(--s2);
  display: flex; align-items: center; justify-content: space-between;
}

.navlink {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--t-base); font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navlink:hover { background: var(--surface-2); color: var(--ink); }
.navlink[aria-current='page'] {
  background: var(--brand-wash); color: var(--brand-ink); font-weight: 600;
}
.navlink__icon { width: 18px; height: 18px; flex: none; opacity: .85; }
.navlink__count {
  margin-left: auto; font-family: var(--font-data); font-size: var(--t-xs);
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.navlink[aria-current='page'] .navlink__count { color: var(--brand-ink); }
.navlink__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Projekterne kan traekkes op og ned. Haandtaget ligger oven paa prikken og
   bytter plads med den ved hover, saa menuen ikke bliver bredere af det. */
.sidebar__projects { display: flex; flex-direction: column; }
.navlink--project { position: relative; }
.navlink__grip {
  position: absolute; left: calc(var(--s3) - 3px); top: 0; bottom: 0;
  display: flex; align-items: center;
  color: var(--ink-3); cursor: grab;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.navlink--project:hover .navlink__grip { opacity: 1; }
.navlink--project:hover .navlink__dot { opacity: 0; }
.navlink__grip:active { cursor: grabbing; }
.navlink--project.is-ghost { opacity: .35; }
.navlink--project.is-drag { background: var(--surface-2); box-shadow: var(--shadow-drag); }

.main {
  grid-area: main;
  min-width: 0;
  padding: var(--s6) var(--s6) var(--s10);
}
.main__inner { max-width: var(--content-max); margin: 0 auto; }

/* =========================================================================
   Knapper og formularer
   ========================================================================= */

.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-edge: var(--rule-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 0 var(--s4); height: 36px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-edge);
  border-radius: var(--r);
  font: inherit; font-size: var(--t-base); font-weight: 550;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }

.btn--primary {
  --btn-bg: var(--brand); --btn-fg: var(--ink-on-brand); --btn-edge: var(--brand);
}
.btn--primary:hover { --btn-bg: var(--brand-ink); --btn-edge: var(--brand-ink); }

.btn--ghost { --btn-bg: transparent; --btn-edge: transparent; color: var(--ink-2); }
.btn--ghost:hover { --btn-bg: var(--surface-2); --btn-edge: var(--rule); color: var(--ink); }

.btn--danger { --btn-fg: var(--critical); --btn-edge: var(--critical-edge); }
.btn--danger:hover { --btn-bg: var(--critical-wash); --btn-edge: var(--critical); }

.btn--sm { height: 28px; padding: 0 var(--s3); font-size: var(--t-sm); }
.btn--icon { width: 34px; padding: 0; }
.btn--icon.btn--sm { width: 28px; }

.field { display: block; margin-bottom: var(--s4); }
.field__label {
  display: block; margin-bottom: var(--s2);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
}
.field__hint { margin-top: var(--s2); font-size: var(--t-sm); color: var(--ink-3); }
.field__error { margin-top: var(--s2); font-size: var(--t-sm); color: var(--critical); }

.input, .select, .textarea {
  width: 100%; padding: var(--s2) var(--s3); min-height: 36px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--r);
  font: inherit; font-size: var(--t-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.input[aria-invalid='true'], .select[aria-invalid='true'] { border-color: var(--critical); }
.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-body); }
.input--date, .input--time, .input--num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 15px, calc(100% - 12px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--s8);
}

.checkline { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-base); cursor: pointer; }
.checkline input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

.field-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.field-row > .field { flex: 1 1 160px; margin-bottom: var(--s4); }

/* =========================================================================
   Sidehoved i indholdet
   ========================================================================= */

.pagehead { margin-bottom: var(--s6); }
.pagehead__eyebrow {
  font-family: var(--font-data); font-size: var(--t-xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2);
}
.pagehead__title { font-size: var(--t-2xl); letter-spacing: -0.025em; }
.pagehead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.pagehead__sub { color: var(--ink-2); font-size: var(--t-base); margin-top: var(--s2); }

/* =========================================================================
   Hurtig-tilfoej
   ========================================================================= */

.quickadd {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  padding: var(--s2) var(--s3) var(--s2) var(--s4);
  margin-bottom: var(--s3);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quickadd:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.quickadd__plus { color: var(--ink-3); flex: none; display: flex; }
.quickadd__input {
  flex: 1; border: 0; background: none; color: inherit; min-width: 0;
  font: inherit; font-size: var(--t-md); padding: var(--s2) 0; outline: none;
}
.quickadd__input::placeholder { color: var(--ink-3); }

.quickadd__chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--s2); border-radius: var(--r-pill);
  font-family: var(--font-data); font-size: var(--t-xs);
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.chip--date   { background: var(--brand-wash);    color: var(--brand-ink); border-color: var(--brand-edge); }
.chip--est    { background: var(--violet-wash);   color: var(--violet);    border-color: transparent; }
.chip--prio   { background: var(--amber-wash);    color: var(--amber);     border-color: var(--amber-edge); }
.chip--project{ background: var(--surface-2);     color: var(--ink-2); }
.chip__x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; line-height: 1; opacity: .6; font-size: 13px; }
.chip__x:hover { opacity: 1; }

.quickadd-hint {
  font-size: var(--t-sm); color: var(--ink-3);
  margin: 0 0 var(--s6) var(--s4);
}
.quickadd-hint code {
  font-family: var(--font-data); font-size: var(--t-xs);
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--r-xs); padding: 1px 5px; color: var(--ink-2);
}

/* =========================================================================
   Tidsrygraden + protokollen (opgavelisten)
   Signaturen: en linjeret venstremargen der baerer tiden.
   ========================================================================= */

.ledger { margin-bottom: var(--s7); }

.ledger__head {
  display: grid;
  grid-template-columns: var(--spine-w) 1fr auto;
  align-items: baseline;
  gap: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1.5px solid var(--rule-strong);
}

.ledger__spine {
  font-family: var(--font-data); font-size: var(--t-xs);
  color: var(--ink-3); letter-spacing: 0.04em;
  text-align: right; padding-right: var(--s3);
  white-space: nowrap;
}

.ledger__title {
  font-family: var(--font-display); font-weight: 650;
  font-size: var(--t-base); letter-spacing: 0.01em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: var(--s2);
}
.ledger__count {
  font-family: var(--font-data); font-size: var(--t-xs);
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

.ledger--overdue .ledger__head { border-bottom-color: var(--critical-edge); }
.ledger--overdue .ledger__title { color: var(--critical); }
.ledger--today .ledger__head { border-bottom-color: var(--brand-edge); }

.ledger__body { list-style: none; margin: 0; padding: 0; }

/* En post: afkrydsning | titel | metadata, med rygraden til venstre */
.row {
  display: grid;
  grid-template-columns: var(--spine-w) 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s2) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  background: transparent;
  transition: background var(--dur) var(--ease);
}
.row:hover { background: var(--surface); }
.row:last-child { border-bottom-color: transparent; }

/* Rygradens tik - en lille streg der markerer posten paa tidsaksen */
.row__spine {
  font-family: var(--font-data); font-size: var(--t-xs);
  color: var(--ink-3); text-align: right; padding-right: var(--s3);
  font-variant-numeric: tabular-nums;
  position: relative; align-self: stretch;
  display: flex; align-items: center; justify-content: flex-end;
}
.row__spine::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 7px; height: 1px; background: var(--rule-strong);
}
.row--critical .row__spine::after { background: var(--critical); width: 11px; height: 2px; }
.row--overdue .row__spine { color: var(--critical); }

.row__grip {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--spine-w);
  cursor: grab; opacity: 0;
  background: linear-gradient(90deg, transparent, transparent);
  display: flex; align-items: center; padding-left: var(--s1);
  transition: opacity var(--dur) var(--ease);
}
.row:hover .row__grip { opacity: 1; }
.row__grip:active { cursor: grabbing; }
.row__grip svg { color: var(--ink-3); }

.check {
  appearance: none; margin: 0;
  width: 19px; height: 19px; flex: none;
  border: 1.5px solid var(--rule-strong); border-radius: 50%;
  background: var(--surface); cursor: pointer; position: relative;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.check:hover { border-color: var(--brand); }
.check::after {
  content: ''; position: absolute; inset: 0;
  background: var(--moss); border-radius: 50%;
  transform: scale(0); opacity: 0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.check:checked { border-color: var(--moss); }
.check:checked::after { transform: scale(1); opacity: 1; }
.check:checked::before {
  content: ''; position: absolute; z-index: 1;
  left: 5.5px; top: 2.5px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.check--prio-high  { border-color: var(--amber); }
.check--prio-urgent{ border-color: var(--critical); border-width: 2px; }

.row__main { min-width: 0; }
.row__title {
  display: block; color: var(--ink); text-decoration: none;
  font-size: var(--t-base); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  position: relative;
}
.row__title:hover { color: var(--brand-ink); }
.row__sub {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: 1px; font-size: var(--t-sm); color: var(--ink-3);
  overflow: hidden;
}
.row__sub a { color: inherit; text-decoration: none; }
.row__sub a:hover { color: var(--ink-2); text-decoration: underline; }

.row__meta { display: flex; align-items: center; gap: var(--s2); flex: none; }

/* Fuldfoerelse: stregen tegnes hen over teksten, saa forsvinder posten. */
.row--completing .row__title::after {
  content: ''; position: absolute; left: 0; top: 50%;
  height: 1.5px; background: var(--ink-3);
  animation: strike var(--dur-slow) var(--ease) forwards;
}
@keyframes strike { from { width: 0; } to { width: 100%; } }

.row--leaving {
  animation: rowLeave var(--dur-slow) var(--ease) forwards;
  overflow: hidden;
}
@keyframes rowLeave {
  to { opacity: 0; transform: translateX(10px); max-height: 0; padding-top: 0; padding-bottom: 0; }
}

.row--done .row__title { color: var(--ink-3); text-decoration: line-through; }

/* Traek og slip */
.row.is-ghost { opacity: .35; background: var(--brand-wash); }
.row.is-chosen { background: var(--surface); }
.row.is-drag {
  box-shadow: var(--shadow-drag); border-radius: var(--r);
  border-bottom-color: transparent; background: var(--surface);
}
.ledger__body.is-dropzone { background: var(--brand-wash); border-radius: var(--r); min-height: 44px; }

.ledger__empty {
  grid-column: 1 / -1;
  padding: var(--s5) var(--s5) var(--s5) calc(var(--spine-w) + var(--s3));
  color: var(--ink-3); font-size: var(--t-sm);
}

/* =========================================================================
   Maerkater
   ========================================================================= */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px var(--s2); border-radius: var(--r-sm);
  font-family: var(--font-data); font-size: var(--t-xs);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  border: 1px solid transparent;
}
.badge--due      { background: var(--surface-2);      color: var(--ink-2);     border-color: var(--rule); }
.badge--today    { background: var(--brand-wash);     color: var(--brand-ink); border-color: var(--brand-edge); }
.badge--overdue  { background: var(--critical-wash);  color: var(--critical);  border-color: var(--critical-edge); }
.badge--est      { background: transparent;           color: var(--ink-3);     border-color: var(--rule); }
.badge--blocked  { background: var(--amber-wash);     color: var(--amber);     border-color: var(--amber-edge); }
.badge--critical { background: var(--critical-wash);  color: var(--critical);  border-color: var(--critical-edge); }
.badge--done     { background: var(--moss-wash);      color: var(--moss);      border-color: var(--moss-edge); }
.badge--price    { background: var(--surface-sunk);   color: var(--ink-2);     border-color: var(--rule); font-family: var(--font-data); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-sm); color: var(--ink-2);
}
.tag__dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }

.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 10px; font-weight: 650;
  letter-spacing: 0.02em; color: #fff;
  border: 1.5px solid var(--surface);
}
.avatar--sm { width: 20px; height: 20px; font-size: 9px; }
.avatar--lg { width: 36px; height: 36px; font-size: 13px; }
.avatar-stack { display: flex; }
.avatar-stack .avatar + .avatar { margin-left: -7px; }

/* =========================================================================
   Flader og maalere
   ========================================================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s4);
}
.card__title {
  font-family: var(--font-data); font-size: var(--t-xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
}

.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.stat__label {
  font-family: var(--font-data); font-size: var(--t-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s1);
}
.stat__value {
  font-family: var(--font-display); font-size: var(--t-2xl);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__unit { font-size: var(--t-md); color: var(--ink-3); font-weight: 500; }
.stat__note { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s2); }

/* Fremdriftsbjaelke */
.meter {
  height: 6px; border-radius: var(--r-pill);
  background: var(--surface-sunk); overflow: hidden;
}
.meter__fill {
  height: 100%; border-radius: var(--r-pill);
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease-out);
}
.meter--done .meter__fill { background: var(--moss); }
.meter--late .meter__fill { background: var(--critical); }
.meter--thin { height: 3px; }
.meter--tall { height: 10px; }

/* Instrumentet: den forventede slutdato som aflaesning */
.forecast {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3) var(--s5);
  align-items: center;
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: var(--r);
}
.forecast--late { border-left-color: var(--critical); }
.forecast--early { border-left-color: var(--moss); }
.forecast--unknown { border-left-color: var(--rule-strong); }

.forecast__label {
  font-family: var(--font-data); font-size: var(--t-xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
  grid-column: 1 / -1; margin-bottom: calc(-1 * var(--s2));
}
.forecast__date {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-xl); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.forecast__delta { font-size: var(--t-sm); color: var(--ink-2); }
.forecast--late .forecast__delta { color: var(--critical); }
.forecast--early .forecast__delta { color: var(--moss); }

/* Tidsakse for mål vs. forventet */
.deltabar { position: relative; height: 22px; }
.deltabar__track {
  position: absolute; left: 0; right: 0; top: 10px;
  height: 2px; background: var(--rule);
}
.deltabar__span { position: absolute; top: 7px; height: 8px; border-radius: 2px; }
.deltabar__span--plan { background: var(--rule-strong); }
.deltabar__span--over { background: var(--critical); }
.deltabar__span--under { background: var(--moss); }
.deltabar__tick {
  position: absolute; top: 2px; width: 1px; height: 18px; background: var(--ink-3);
}
.deltabar__tick span {
  position: absolute; top: -4px; left: 4px;
  font-family: var(--font-data); font-size: var(--t-xs); color: var(--ink-3);
  white-space: nowrap;
}

/* Projektkort i sidepanelet og paa projektsiden */
.projectcard {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s4);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.projectcard:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.projectcard__top { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.projectcard__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.projectcard__name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); letter-spacing: -0.01em; }
.projectcard__stats {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-data); font-size: var(--t-xs); color: var(--ink-3);
  margin-bottom: var(--s2);
}

/* =========================================================================
   Board (kanban)
   ========================================================================= */

.board {
  display: flex; gap: var(--s4); align-items: flex-start;
  overflow-x: auto; padding-bottom: var(--s5);
  scroll-snap-type: x proximity;
}
.column {
  flex: 0 0 296px; scroll-snap-align: start;
  background: var(--surface-sunk);
  border-radius: var(--r-lg);
  padding: var(--s3);
  max-height: calc(100dvh - var(--topbar-h) - 190px);
  display: flex; flex-direction: column;
}
.column__head {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s2) var(--s3);
}
.column__dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.column__name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-base); }
.column__count {
  margin-left: auto; font-family: var(--font-data); font-size: var(--t-xs); color: var(--ink-3);
}
.column__count.is-over { color: var(--critical); font-weight: 500; }
.column__body {
  display: flex; flex-direction: column; gap: var(--s2);
  overflow-y: auto; flex: 1; min-height: 52px; padding: 2px;
}
.column__body.is-dropzone { background: var(--brand-wash); border-radius: var(--r); }

.taskcard {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: var(--s3);
  cursor: grab; text-decoration: none; color: inherit; display: block;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.taskcard:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-1); }
.taskcard.is-drag { box-shadow: var(--shadow-drag); cursor: grabbing; }
.taskcard.is-ghost { opacity: .35; }
.taskcard--critical { border-left: 3px solid var(--critical); }
.taskcard__title { font-size: var(--t-base); line-height: 1.35; margin-bottom: var(--s2); }
a.taskcard__title { display: block; color: inherit; text-decoration: none; }

/* Slippes kortet i en "faerdig"-kolonne, streges titlen ud med det samme -
   klassen saettes af board.js, naar serveren har taget imod flytningen. */
.taskcard--done .taskcard__title { color: var(--ink-3); text-decoration: line-through; }
.taskcard__foot { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.taskcard__foot .avatar-stack { margin-left: auto; }

/* =========================================================================
   Tidslinje (Gantt)
   ========================================================================= */

.gantt {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
}
.gantt__toolbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule);
}
.gantt__scroll { overflow: auto; max-height: calc(100dvh - var(--topbar-h) - 210px); }
.gantt svg { display: block; }
.gantt-bar { cursor: grab; }
.gantt-bar:active { cursor: grabbing; }
.gantt-bar rect { transition: filter var(--dur) var(--ease); }
.gantt-bar:hover rect { filter: brightness(1.08); }

.segmented {
  display: inline-flex; background: var(--surface-sunk);
  border-radius: var(--r); padding: 2px; gap: 2px;
}
.segmented button {
  border: 0; background: none; color: var(--ink-2);
  font: inherit; font-size: var(--t-sm); font-weight: 550;
  padding: var(--s1) var(--s3); border-radius: var(--r-sm); cursor: pointer;
}
.segmented button[aria-pressed='true'] {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
}

/* =========================================================================
   Faner
   ========================================================================= */

.tabs {
  display: flex; gap: var(--s1); align-items: center;
  border-bottom: 1px solid var(--rule); margin-bottom: var(--s5);
  overflow-x: auto;
}
.tab {
  padding: var(--s3) var(--s4);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--t-base); font-weight: 550; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-current='page'] { color: var(--brand-ink); border-bottom-color: var(--brand); }

/* =========================================================================
   Skuffe (opgavepanel) og dialog
   ========================================================================= */

.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 60;
  width: min(560px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-panel);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.drawer.is-open { transform: none; }
.drawer__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule);
}
.drawer__body { overflow-y: auto; padding: var(--s5); flex: 1; }
.drawer__foot { border-top: 1px solid var(--rule); padding: var(--s3) var(--s4); display: flex; gap: var(--s2); }

.scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgb(10 14 16 / .38);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  backdrop-filter: blur(1.5px);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

dialog.modal {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
  padding: 0; width: min(520px, calc(100vw - 2rem));
  box-shadow: var(--shadow-2);
}
dialog.modal::backdrop { background: rgb(10 14 16 / .38); backdrop-filter: blur(1.5px); }
.modal__head { padding: var(--s5) var(--s5) 0; }
.modal__body { padding: var(--s4) var(--s5); }
.modal__foot { padding: 0 var(--s5) var(--s5); display: flex; gap: var(--s2); justify-content: flex-end; }

/* Bekraeftelsen foer noget slettes: smallere end de andre dialoger, og uden
   felter at udfylde - der er kun spoergsmaalet og de to svar. */
dialog.modal--confirm { width: min(420px, calc(100vw - 2rem)); }
.modal--confirm .modal__head h2 { font-size: var(--t-lg); margin: 0; }
.confirm__message { margin: 0; color: var(--ink-2); }

/* =========================================================================
   Beskeder
   ========================================================================= */

/* Beskedbjaelken sidder oeverst i fuld bredde og ligger over alt andet -
   ogsaa over topbjaelken, sidepanelet og skuffen. Popover-laget bruges naar
   browseren kan det, saa bjaelken ogsaa kommer over en aaben <dialog>. */
.toasts {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  /* Nulstiller browserens egne popover-typografier. */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  max-width: none;
  max-height: none;
  inset-inline: 0;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s5);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-base);
  box-shadow: 0 2px 14px rgb(15 20 24 / .28);
  animation: toastIn var(--dur-slow) var(--ease-out);
}

.toast__inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.toast__icon { flex: none; display: flex; opacity: .9; }
.toast__text { flex: 1; min-width: 0; }

.toast--error   { background: var(--critical); color: #fff; }
.toast--success { background: var(--moss);     color: #fff; }
.toast--warn    { background: var(--amber);    color: #fff; }

.toast button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  flex: none;
}

.toast__close {
  text-decoration: none !important;
  opacity: .75;
  display: flex;
  padding: 0 0 0 var(--s2) !important;
}
.toast__close:hover { opacity: 1; }

/* Tynd streg der loeber ud, saa man kan se hvor lang tid der er tilbage. */
.toast__timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: rgb(255 255 255 / .45);
  animation: toastTimer linear forwards;
}

.toast { position: relative; overflow: hidden; }

.toast--leaving { animation: toastOut var(--dur) var(--ease) forwards; }

@keyframes toastIn  { from { transform: translateY(-100%); } }
@keyframes toastOut { to { transform: translateY(-100%); opacity: 0; } }
@keyframes toastTimer { from { width: 100%; } to { width: 0; } }

@media (max-width: 640px) {
  .toast { padding: var(--s3) var(--s4); }
}

.notice {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); border-radius: var(--r);
  border: 1px solid var(--rule); background: var(--surface-2);
  font-size: var(--t-base); margin-bottom: var(--s4);
}
.notice--error   { border-color: var(--critical-edge); background: var(--critical-wash); color: var(--critical); }
.notice--success { border-color: var(--moss-edge);     background: var(--moss-wash);     color: var(--moss); }
.notice--warn    { border-color: var(--amber-edge);    background: var(--amber-wash);    color: var(--amber); }

.empty {
  text-align: center; padding: var(--s9) var(--s5);
  color: var(--ink-3);
}
.empty__title { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink-2); margin-bottom: var(--s2); }

/* =========================================================================
   Tabeller
   ========================================================================= */

.table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.table th {
  text-align: left; font-family: var(--font-data); font-weight: 400;
  font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); padding: var(--s2) var(--s3);
  border-bottom: 1.5px solid var(--rule-strong); white-space: nowrap;
}
.table td { padding: var(--s3); border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; text-align: right; }

/* =========================================================================
   Login og andre sider uden skal
   ========================================================================= */

.bare {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--s5);
  background:
    linear-gradient(transparent 95%, var(--rule) 95%) 0 0 / 100% 28px,
    var(--paper);
}
.bare__card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s7);
  box-shadow: var(--shadow-2);
}
.bare__mark {
  width: 30px; height: 30px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  margin-bottom: var(--s5);
}
.bare__mark i { background: var(--rule-strong); border-radius: 1px; }
.bare__mark i:nth-child(2) { background: var(--brand); }
.bare__title { font-size: var(--t-xl); margin-bottom: var(--s2); letter-spacing: -0.02em; }
.bare__intro { color: var(--ink-2); margin-bottom: var(--s5); }
.bare__foot { margin-top: var(--s5); font-size: var(--t-sm); color: var(--ink-3); text-align: center; }

/* =========================================================================
   Dato- og tidsvaelger
   Browserens egne felter kan ikke faa sidens sprog og kan ikke vise
   ugenumre, saa de er byttet ud med tekstfelt + eget panel (datepicker.js).
   ========================================================================= */

.pickfield { position: relative; display: block; }
.pickfield .input { padding-right: var(--s8); }

.pickfield__button {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 32px;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--ink-3);
  border-radius: 0 var(--r) var(--r) 0; cursor: pointer;
}
.pickfield__button:hover { color: var(--brand-ink); background: var(--surface-2); }
.pickfield__button:disabled { opacity: .4; cursor: default; background: none; }

/* Panelerne ligger i browserens oeverste lag, saa de hverken klippes af
   opgavepanelets rullefelt eller forsvinder bag en aaben <dialog>. */
.calendar, .timelist {
  position: fixed;
  inset: auto; margin: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--r);
  box-shadow: var(--shadow-2);
  z-index: 900;
}

.calendar { padding: var(--s3); width: max-content; }

.calendar__head {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s2);
}
.calendar__title {
  flex: 1; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-base);
  letter-spacing: -0.01em;
}
.calendar__nav {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--ink-2); cursor: pointer;
}
.calendar__nav:hover { background: var(--surface-2); border-color: var(--rule); color: var(--ink); }

.calendar__grid { border-collapse: collapse; }
.calendar__grid th {
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-3);
  padding: 0 0 var(--s1);
}
.calendar__grid thead th { text-align: center; }

/* Ugenummeret staar i sin egen kolonne med en streg imellem - som i en kalender.
   Ugedagene ved siden af staar midt i deres 34px og faar derved omtrent otte
   punkter luft ind til stregen; her saettes den samme afstand med padding.

   Navnet paa gitteret skal med i selektoren: `.calendar__grid th` ovenfor
   vejer tungere end en klasse alene, saa dens padding-genvej ville ellers
   nulstille det hele - og ugenumrene ville klistre til stregen. */
.calendar__grid .calendar__weekhead,
.calendar__grid .calendar__week {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink-3);
  padding-right: var(--s2); border-right: 1px solid var(--rule);
}
.calendar__week { font-size: var(--t-xs); font-weight: 400; }
.calendar__grid td:first-of-type { padding-left: var(--s1); }

.calendar__day {
  width: 34px; height: 30px;
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink);
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: var(--t-sm); cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.calendar__day:hover { background: var(--surface-2); }
.calendar__day:focus-visible { outline: none; box-shadow: var(--focus); }
.calendar__day.is-outside { color: var(--ink-3); opacity: .55; }
.calendar__day.is-weekend { color: var(--ink-3); }
.calendar__day[aria-current='date'] {
  box-shadow: inset 0 0 0 1px var(--brand-edge);
  color: var(--brand-ink); font-weight: 500;
}
.calendar__day.is-selected {
  background: var(--brand); color: var(--ink-on-brand); font-weight: 500;
}
.calendar__day.is-selected:hover { background: var(--brand-ink); }
.calendar__day:disabled { opacity: .28; cursor: default; background: none; }

.calendar__foot {
  display: flex; gap: var(--s2); justify-content: space-between;
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--rule);
}

.timelist {
  padding: var(--s1); width: 122px;
  max-height: 258px; overflow-y: auto; overscroll-behavior: contain;
}
.timelist__item {
  padding: var(--s1) var(--s2);
  border-radius: var(--r-sm);
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: var(--t-sm); color: var(--ink); cursor: pointer;
}
.timelist__item:hover { background: var(--surface-2); }
.timelist__item.is-active { background: var(--brand-wash); color: var(--brand-ink); }

/* =========================================================================
   Mindre skaerme
   ========================================================================= */

@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'topbar' 'main';
  }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; z-index: 50;
    width: var(--sidebar-w); height: calc(100dvh - var(--topbar-h));
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
    box-shadow: var(--shadow-2);
  }
  .sidebar.is-open { transform: none; }
  .main { padding: var(--s4) var(--s4) var(--s9); }
  .topbar__search { flex-basis: 0; }
}

@media (min-width: 901px) {
  .topbar__menu { display: none; }
}

@media (max-width: 640px) {
  :root { --spine-w: 34px; }
  .pagehead__title { font-size: var(--t-xl); }
  .row { grid-template-columns: var(--spine-w) 20px minmax(0, 1fr); gap: var(--s2); }
  .row__meta { grid-column: 2 / -1; margin-top: 2px; }
  .row { padding-top: var(--s2); padding-bottom: var(--s2); }
  .stat__value { font-size: var(--t-xl); }
  .topbar__search { display: none; }
  .drawer { width: 100vw; }
}

@media print {
  .topbar, .sidebar, .quickadd, .btn { display: none !important; }
  .shell { display: block; }
  body { background: #fff; }
}