/* Revider: designsystem. Se docs/design.md. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #F3F5F0;
  --paper-2: #E8EEE8;
  --card: #FFFFFF;
  --ink: #14231C;
  --ink-2: #4E5D55;
  --ink-3: #7C8A82;
  --rule: #D3DED6;
  --rule-2: #E4EBE6;
  --green: #1F5E46;
  --green-2: #164735;
  --green-wash: #E2EEE6;
  --stamp: #2B4FA6;
  --stamp-wash: #E8EDF8;
  --marker: #F7E37A;
  --marker-wash: #FCF5CC;
  --amber: #8A5A00;
  --red: #B42318;
  --red-wash: #FDEDEB;
  --margin-red: #E2A8A1;

  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --shadow: 0 1px 0 rgba(20, 35, 28, .04), 0 8px 24px -12px rgba(20, 35, 28, .18);
  --wrap: 1180px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-2); }
:focus-visible { outline: 3px solid var(--stamp); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--marker); color: var(--ink); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: 2.4rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: 1.25rem 0 .5rem; }
p { margin: 0 0 .9rem; }
small, .small { font-size: .84rem; }
.muted { color: var(--ink-2); }
code, .mono { font-family: var(--mono); font-size: .92em; }

/* ---------- Ramme ---------- */

.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .7rem max(1.25rem, calc((100vw - var(--wrap)) / 2));
  background: rgba(243, 245, 240, .92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand svg { width: 26px; height: 26px; flex: none; }
.top .right { margin-left: auto; display: flex; gap: .9rem; align-items: center; }
.top .right a { color: var(--ink); text-decoration: none; font-weight: 500; }
.top .right a:hover { color: var(--green); }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-wash); color: var(--green); font-weight: 800; font-size: .85rem; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.foot { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1.25rem 3rem; color: var(--ink-3); font-size: .85rem; display: flex; gap: 1.25rem; flex-wrap: wrap; border-top: 1px solid var(--rule); }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot a.on { color: var(--ink); font-weight: 700; }
.foot .sep { flex: 1; }

.crumbs { font-size: .88rem; color: var(--ink-3); margin-bottom: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--green); text-decoration: underline; }
.crumbs .slash { color: var(--rule); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-head h1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.page-head .sub { color: var(--ink-2); margin: .35rem 0 0; }
.page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Kontekstskifter */
.menu { position: relative; }
.menu summary { cursor: pointer; list-style: none; padding: .38rem .8rem; border: 1px solid var(--rule); border-radius: 999px; font-weight: 600; font-size: .92rem; background: var(--card); display: inline-flex; align-items: center; gap: .4rem; }
.menu summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translateY(-2px); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--green); }
.menu-body { position: absolute; z-index: 30; top: calc(100% + .5rem); left: 0; min-width: 340px; max-height: 70vh; overflow: auto; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: .4rem; }
.menu-group { padding: .5rem .6rem .25rem; font-size: .78rem; color: var(--ink-3); font-weight: 600; }
.menu-body a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .6rem; color: var(--ink); border-radius: var(--r-sm); text-decoration: none; }
.menu-body a:hover { background: var(--paper); }
.menu-body a small { color: var(--ink-3); }

/* ---------- Flader ---------- */

.panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }
.panel > h2:first-child { margin-bottom: .9rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.25rem; align-items: start; }
.grid > .panel { margin-bottom: 0; }
.stack > * + * { margin-top: 1.25rem; }
.item-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 900px) { .item-grid { grid-template-columns: 1fr; } }

/* ---------- Formularer ---------- */

form.form, .form { display: flex; flex-direction: column; gap: .75rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
label.check { flex-direction: row; align-items: flex-start; font-weight: 400; gap: .55rem; }
input, select, textarea {
  font: inherit; font-weight: 400; color: var(--ink);
  padding: .6rem .75rem; width: 100%;
  border: 1px solid #C2CFC6; border-radius: var(--r-sm); background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
input:disabled { background: var(--paper); color: var(--ink-2); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
label.check input { width: auto; margin-top: .25rem; accent-color: var(--green); }
input[type=file] { padding: .5rem; background: var(--paper); border-style: dashed; }
textarea { resize: vertical; line-height: 1.5; }
.row { display: flex; gap: .6rem; align-items: flex-end; }
.row > * { min-width: 0; }
.row.wrap { flex-wrap: wrap; align-items: center; }
.row input, .row select { width: auto; flex: 1; }
.row .short { flex: 0 0 100px; }
.row .short input { width: 100%; }
.row .grow { flex: 1; }
form.inline { display: inline; }
.form-help { font-size: .85rem; color: var(--ink-2); margin: 0; }

/* ---------- Knapper ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2;
  padding: .62rem 1rem; border-radius: var(--r-sm);
  border: 1px solid #BFCDC4; background: var(--card); color: var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--green); color: var(--ink); }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-2); border-color: var(--green-2); color: #fff; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--paper-2); }
.btn.big { font-size: 1.05rem; padding: .85rem 1.4rem; }
.btn.small { padding: .32rem .6rem; font-size: .85rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
button.link { background: none; border: none; padding: 0; font: inherit; color: var(--green); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.danger, button.link.danger { color: var(--red); }

/* ---------- Beskeder ---------- */

.flash { padding: .8rem 1rem; border-radius: var(--r-sm); margin-bottom: 1.25rem; border: 1px solid; border-left-width: 4px; }
.flash-success { background: var(--green-wash); border-color: #B7D3C1; border-left-color: var(--green); color: var(--green-2); }
.flash-error { background: var(--red-wash); border-color: #F5C2BC; border-left-color: var(--red); color: #8A1C12; }
.flash-info { background: var(--stamp-wash); border-color: #C6D2EE; border-left-color: var(--stamp); color: #22397A; }

/* ---------- Lister som regnskabspapir ---------- */

table.list { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.list th { text-align: left; font-size: .8rem; color: var(--ink-3); font-weight: 600; padding: .4rem .6rem .5rem; border-bottom: 2px solid var(--ink); white-space: nowrap; }
table.list td { padding: .7rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.list tr:last-child td { border-bottom: none; }
table.list tbody tr:hover td { background: #FAFBF8; }
table.list td a { font-weight: 600; text-decoration: none; color: var(--ink); }
table.list td a:hover { color: var(--green); text-decoration: underline; }
table.list .num, table.list td.ref { font-variant-numeric: tabular-nums; color: var(--ink-3); }
table.items { table-layout: fixed; }
table.items th:nth-child(1) { width: 3.5rem; }
table.items th:nth-child(3) { width: 9.5rem; }
table.items th:nth-child(4) { width: 8rem; }
table.items th:nth-child(5) { width: 7rem; }
table.items th:nth-child(6) { width: 4rem; }
@media (max-width: 720px) {
  table.items th:nth-child(4), table.items td:nth-child(4),
  table.items th:nth-child(5), table.items td:nth-child(5),
  table.items th:nth-child(6), table.items td:nth-child(6) { display: none; }
}
/* Din tur: markeret med tusch */
tr.my-turn td { background: var(--marker-wash); }
tr.my-turn td:first-child { box-shadow: inset 4px 0 0 var(--marker); }
tr.my-turn:hover td { background: #FBEFB0; }

ul.links { list-style: none; padding: 0; margin: 0 0 .9rem; }
ul.links li { padding: .6rem 0; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
ul.links li:last-child { border-bottom: none; }
ul.links a { font-weight: 600; text-decoration: none; color: var(--ink); }
ul.links a:hover { color: var(--green); text-decoration: underline; }
ul.codes { columns: 2; font-size: 1.05rem; padding-left: 1.2rem; }
ul.codes code { font-family: var(--mono); }
ul.log { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .87rem; }
ul.log li { padding: .45rem 0; border-bottom: 1px solid var(--rule-2); }
ul.log li .muted { margin-right: .4rem; }

/* ---------- Mærker og status ---------- */

.tag { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.tag-dark { background: var(--ink); color: #fff; }
.tag-warn { background: var(--marker-wash); color: var(--amber); box-shadow: inset 0 0 0 1px #EBD67A; }
.count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem; font-size: .8rem; border-radius: 999px; background: var(--marker); color: var(--ink); font-weight: 800; }

.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-open { background: var(--green-wash); color: var(--green); }
.s-review { background: var(--stamp-wash); color: var(--stamp); }
.s-questions { background: var(--green-wash); color: var(--green); box-shadow: inset 0 0 0 1px #A9CDB7; }
.s-approved { background: var(--paper-2); color: #45534B; }
.status-cell { white-space: nowrap; padding-right: 1.6rem !important; }
.status-cell .who { display: block; margin: .25rem 0 0 .2rem; font-size: .8rem; color: var(--ink-3); }
td.nowrap { white-space: nowrap; }
.s-approved::before { width: 10px; height: 6px; border-radius: 0; background: none; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); }
.p-draft { background: var(--paper-2); color: #45534B; }
.p-active { background: var(--stamp-wash); color: var(--stamp); }
.p-closed { background: var(--green-wash); color: var(--green); }
.p-cancelled { background: var(--red-wash); color: var(--red); }
progress { width: 100%; height: 6px; appearance: none; border: none; border-radius: 999px; background: var(--paper-2); overflow: hidden; vertical-align: middle; }
progress::-webkit-progress-bar { background: var(--paper-2); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--green); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--green); border-radius: 999px; }
.progress-cell { min-width: 120px; }
.progress-cell span { font-size: .82rem; color: var(--ink-2); }

/* ---------- Værktøjslinje og filtre ---------- */

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.filters { display: inline-flex; padding: 3px; background: var(--paper-2); border-radius: 999px; gap: 2px; }
.filters a { padding: .38rem .9rem; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .9rem; }
.filters a:hover { color: var(--ink); }
.filters a.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 35, 28, .12); }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }

details > summary { cursor: pointer; }
details.add { margin: .5rem 0; border-top: 1px solid var(--rule); padding-top: .75rem; }
details.add:first-child { border-top: none; padding-top: 0; }
details.add > summary, details.mini > summary { font-weight: 700; color: var(--green); margin-bottom: .6rem; list-style: none; display: inline-flex; align-items: center; gap: .45rem; }
details.add > summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid currentColor; font-size: .9rem; line-height: 1; }
details[open].add > summary::before { content: "\2212"; }
details.add > summary::-webkit-details-marker, details.mini > summary::-webkit-details-marker { display: none; }
details.add > summary.btn { color: #fff; }
details.add > summary.btn::before { border-color: #fff; }
details.mini > summary.danger { color: var(--red); }

.empty { text-align: center; padding: 2.5rem 1rem; border: 1.5px dashed var(--rule); border-radius: var(--r); color: var(--ink-2); background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule-2) 31px 32px); }
.empty strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: .3rem; }

/* ---------- Punkt ---------- */

.item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.item-head h1 { font-size: 2rem; }
.item-head .ref { color: var(--ink-3); font-weight: 600; margin-right: .3rem; }
.item-nav { display: flex; gap: .35rem; }
.ball { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: 1rem 1.2rem; border-radius: var(--r); margin-bottom: 1.25rem; border: 1px solid var(--rule); background: var(--card); }
.ball strong { font-weight: 800; }
.ball-mine { background: var(--marker-wash); border-color: #EAD675; box-shadow: inset 5px 0 0 var(--marker); }
.ball-locked { background: var(--stamp-wash); border-color: #C9D4EF; }
.ball .due { margin-left: auto; color: var(--ink-2); font-size: .92rem; }
.desc { white-space: normal; font-size: 1.02rem; }

.qa { border-left: 2px solid var(--rule); padding: .1rem 0 .1rem 1rem; margin-bottom: 1.2rem; }
.qa .q { margin-bottom: .5rem; }
.qa .a { background: var(--paper); border-radius: var(--r-sm); padding: .6rem .8rem; margin-bottom: .5rem; }
.qa.draft { border-left-color: var(--marker); border-left-style: dashed; }
.qa .meta { display: block; font-size: .8rem; color: var(--ink-3); margin-bottom: .2rem; }
.qa .meta b { color: var(--ink-2); font-weight: 600; }
.hash { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); }
.actions-panel form { margin-bottom: .5rem; }
.actions-panel .btn.big { width: 100%; }
.files td a { font-weight: 600; }

/* Stemplet: det ene, der må fylde */
.seal {
  display: inline-grid; gap: .1rem; padding: .55rem .9rem; border: 2px solid var(--stamp); border-radius: 8px;
  color: var(--stamp); background: rgba(232, 237, 248, .6); transform: rotate(-2deg); font-weight: 800; letter-spacing: .02em;
}
.seal small { font-family: var(--mono); font-weight: 400; font-size: .72rem; letter-spacing: 0; }

/* ---------- Login og gæstesider ---------- */

body.guest { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.guest-side {
  position: relative; padding: 2.5rem; color: #EAF2EC; background: var(--green-2);
  background-image:
    linear-gradient(to right, transparent 64px, rgba(226, 168, 161, .55) 64px 65px, transparent 65px),
    repeating-linear-gradient(to bottom, transparent 0 35px, rgba(255, 255, 255, .07) 35px 36px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.guest-side .brand { color: #fff; }
.guest-side .brand:hover { color: #fff; }
.guest-side blockquote { margin: 0 0 0 calc(64px - 2.5rem + 1.5rem); max-width: 26rem; font-size: 1.6rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.guest-side blockquote p { margin: 0 0 .8rem; }
.guest-side blockquote footer { font-size: .9rem; font-weight: 400; color: #B9D1C2; letter-spacing: 0; }
.guest-main { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem; }
.card.narrow { width: 100%; max-width: 420px; margin: 0 auto; }
.card.narrow h1 { font-size: 2rem; margin-bottom: .5rem; }
.card.narrow > p.muted { margin-bottom: 1.5rem; }
.card.narrow .btn.primary { width: 100%; padding: .8rem 1rem; }
.guest .foot { border-top: none; padding: 1.5rem 0 0; max-width: 420px; margin: 0 auto; width: 100%; }
.brand-big { display: none; }
@media (max-width: 860px) {
  body.guest { grid-template-columns: 1fr; }
  .guest-side { padding: 1.25rem 1.5rem; }
  .guest-side blockquote { display: none; }
  .guest-main { padding: 2rem 1.25rem; justify-content: flex-start; }
}
.qr { background: #fff; display: inline-block; padding: .5rem; border: 1px solid var(--rule); border-radius: var(--r-sm); }
.qr svg { width: 200px; height: 200px; display: block; }
.secret { font-family: var(--mono); font-size: 1rem; letter-spacing: .04em; background: var(--paper-2); padding: .2rem .4rem; border-radius: 4px; }

/* ---------- Forside ---------- */

.pub-top { position: sticky; top: 0; z-index: 20; background: rgba(243, 245, 240, .9); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; }
.pub-top .in { max-width: var(--wrap); margin: 0 auto; padding: .9rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.pub-top nav { display: flex; gap: 1.4rem; margin-left: 2rem; }
.pub-top nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.pub-top nav a:hover { color: var(--ink); }
.pub-top .cta { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
@media (max-width: 860px) { .pub-top nav { display: none; } }
@media (max-width: 520px) {
  .pub-top .cta .btn.ghost { display: none; }
  .pub-top .cta .btn { padding: .5rem .8rem; font-size: .9rem; }
  .ledger { padding-left: 2.6rem; background-image: linear-gradient(to right, transparent 1.9rem, var(--margin-red) 1.9rem, var(--margin-red) calc(1.9rem + 1px), transparent calc(1.9rem + 1px)); }
}
body { overflow-x: clip; }

.hero { max-width: var(--wrap); margin: 0 auto; padding: 4.5rem 1.25rem 4rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.2rem); line-height: .98; letter-spacing: -0.045em; font-weight: 800; margin-bottom: 1.4rem; }
.hero .lead { font-size: 1.22rem; line-height: 1.5; color: var(--ink-2); max-width: 32rem; margin-bottom: 2rem; }
.hero .cta { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.hero .note { font-size: .9rem; color: var(--ink-3); margin-top: 1rem; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; padding-top: 2.5rem; gap: 2.5rem; } }

/* Regnskabsarket i hero */
.ledger {
  position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(20, 35, 28, .35);
  padding: 1.1rem 1.25rem 6rem 3.4rem; overflow: hidden;
  background-image:
    linear-gradient(to right, transparent 2.6rem, var(--margin-red) 2.6rem, var(--margin-red) calc(2.6rem + 1px), transparent calc(2.6rem + 1px));
}
.ledger-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .6rem; margin-bottom: .2rem; border-bottom: 2px solid var(--ink); }
.ledger-head b { font-size: 1.05rem; }
.ledger-head span { font-size: .85rem; color: var(--ink-3); }
.lrow { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; height: 52px; border-bottom: 1px solid var(--rule-2); }
.lrow .n { color: var(--ink-3); font-size: .9rem; }
.lrow .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who { font-size: .78rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; }
.who.client { background: var(--marker-wash); color: var(--amber); }
.who.auditor { background: var(--stamp-wash); color: var(--stamp); }
.who.done { background: var(--green-wash); color: var(--green); }

/* Den animerede række: bolden flytter sig, og punktet låses. */
.lrow.live { background: linear-gradient(to right, var(--marker-wash), var(--marker-wash)) no-repeat; background-size: 100% 100%; animation: livebg 7s ease forwards 1.2s; margin-left: -.6rem; padding-left: .6rem; margin-right: -.6rem; padding-right: .6rem; border-radius: 6px; }
.lrow.live .states { position: relative; display: grid; justify-items: end; }
.lrow.live .who { grid-area: 1 / 1; opacity: 0; }
.lrow.live .who.client { animation: st1 7s ease forwards 1.2s; opacity: 1; }
.lrow.live .who.auditor { animation: st2 7s ease forwards 1.2s; }
.lrow.live .who.done { animation: st3 7s ease forwards 1.2s; }
.ledger .seal { position: absolute; right: 1.2rem; bottom: 1.1rem; opacity: 0; transform: rotate(-7deg) scale(1.4); animation: stamp .45s cubic-bezier(.2, .9, .3, 1.3) forwards 6.4s; }
@keyframes st1 { 0%, 22% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes st2 { 0%, 24% { opacity: 0; } 30%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes st3 { 0%, 64% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes livebg { 0%, 24% { background-color: transparent; background-image: linear-gradient(var(--marker-wash), var(--marker-wash)); } 30%, 62% { background-image: linear-gradient(var(--stamp-wash), var(--stamp-wash)); } 70%, 100% { background-image: linear-gradient(transparent, transparent); } }
@keyframes stamp { to { opacity: 1; transform: rotate(-7deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .lrow.live, .lrow.live .who, .ledger .seal { animation: none !important; }
  .lrow.live { background: none; }
  .lrow.live .who.client, .lrow.live .who.auditor { opacity: 0; }
  .lrow.live .who.done { opacity: 1; }
  .ledger .seal { opacity: 1; transform: rotate(-7deg); }
}

.band { border-top: 1px solid var(--rule); }
.band .in { max-width: var(--wrap); margin: 0 auto; padding: 4.5rem 1.25rem; }
.band h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.035em; font-weight: 800; max-width: 22ch; margin-bottom: 1rem; }
.band .intro { color: var(--ink-2); font-size: 1.12rem; max-width: 38rem; margin-bottom: 2.5rem; }
.band.dark { background: var(--ink); color: #E6EEE9; border-top: none; }
.band.dark h2 { color: #fff; }
.band.dark .intro { color: #A9BBB0; }

/* Forløbet: en ægte sekvens, derfor nummereret */
.flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: step; border-top: 2px solid var(--ink); }
.flow li { counter-increment: step; padding: 1.4rem 1.25rem 0 0; position: relative; }
.flow li::before { content: counter(step); display: block; font-size: 3rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: #B6C7BC; margin-bottom: .9rem; }
.flow li .who { display: inline-block; margin-bottom: .7rem; }
.flow h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.flow p { color: var(--ink-2); font-size: .97rem; margin: 0; }
@media (max-width: 900px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.split h3 { font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 1rem; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding: .7rem 0 .7rem 2rem; border-bottom: 1px solid var(--rule); }
.ticks li::before { content: ""; position: absolute; left: .2rem; top: 1.05rem; width: 12px; height: 7px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(-45deg); }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 2rem; } }

.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #2E4239; }
.proof > div { padding: 1.6rem 1.6rem 0 0; }
.proof h3 { color: #fff; font-size: 1.1rem; margin: 0 0 .5rem; }
.proof p { color: #A9BBB0; margin: 0; font-size: .97rem; }
.proof .hashline { display: block; margin-top: 1rem; font-family: var(--mono); font-size: .76rem; color: #7FA3D9; word-break: break-all; }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }

.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.price-figure { font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.price-figure small { font-size: 1.1rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); margin-left: .4rem; }
.price-unit { font-size: 1.15rem; color: var(--ink-2); margin-top: .6rem; }
@media (max-width: 760px) { .price { grid-template-columns: 1fr; gap: 1.5rem; } }

.closing { text-align: left; }
.closing .cta { display: flex; gap: .7rem; flex-wrap: wrap; }

.head-progress { width: 180px; }
.toolbar .muted.small { margin-left: auto; }
.empty + .grid, .panel + .grid { margin-top: 1.25rem; }
.row.wrap form { margin: 0; }
details.mini > summary { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }
details.mini[open] > summary { text-decoration: none; }
@media (min-width: 901px) { .item-side { position: sticky; top: 5rem; } }
@media (max-width: 640px) {
  .top { gap: .6rem; }
  .top .right { gap: .4rem; }
  .item-head { flex-wrap: wrap; }
  .item-head h1 { font-size: 1.6rem; }
  .page-head h1, h1 { font-size: 1.8rem; }
  .panel { padding: 1rem; }
}
@media (max-width: 720px) {
  table.items th:nth-child(1) { width: 2.4rem; }
  table.items th:nth-child(3) { width: 7.2rem; }
  table.list td, table.list th { padding-left: .4rem; padding-right: .4rem; }
}

/* ---------- Dialog (chat pr. punkt) ---------- */
.chat .msgs {
  display: flex; flex-direction: column; gap: .7rem;
  max-height: min(62vh, 640px); overflow-y: auto;
  padding: .3rem .2rem .8rem; margin: 0 -.2rem;
  scroll-behavior: smooth;
}
.msg {
  max-width: 82%; align-self: flex-start;
  background: #fff; border: 1px solid var(--rule); border-radius: 4px 14px 14px 14px;
  padding: .6rem .85rem .65rem;
}
.msg-mine { align-self: flex-end; background: var(--green-wash); border-color: #C9DDD0; border-radius: 14px 4px 14px 14px; }
.msg-meta { font-size: .8rem; color: var(--ink-3); display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .2rem; }
.msg-meta b { color: var(--ink-2); font-weight: 650; }
.msg-auditor:not(.msg-mine) { border-left: 3px solid var(--stamp); }
.msg-body { overflow-wrap: anywhere; line-height: 1.5; }
.msg-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.msg-files a { font-size: .85rem; padding: .2rem .55rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); text-decoration: none; }
.msg-flag { display: inline-block; margin-top: .45rem; font-size: .78rem; font-weight: 650; padding: .1rem .5rem; border-radius: 999px; }
.msg-flag.open { background: var(--marker); color: var(--ink); }
.msg-flag.done { background: var(--paper-2); color: var(--ink-3); }
.msg-new { box-shadow: 0 0 0 2px var(--marker); }
.msg-arrive { animation: msg-in .35s ease-out; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msgs-empty { align-self: center; margin: 1.2rem 0; }
.composer { border-top: 1px solid var(--rule); padding-top: .8rem; margin-top: .2rem; display: grid; gap: .55rem; }
.composer textarea { min-height: 3.2rem; resize: vertical; }
.composer-bar { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.composer-bar .btn { margin-left: auto; }
.composer .attach { flex-direction: row; align-items: center; gap: .4rem; font-weight: 500; font-size: .9rem; color: var(--ink-2); }
.composer .attach input { width: auto; max-width: 15rem; font-size: .85rem; }
.chat-notice { background: var(--marker-wash); border: 1px solid var(--marker); border-radius: 8px; padding: .5rem .8rem; margin-bottom: .7rem; font-size: .9rem; }
.chat-notice[hidden] { display: none; }

/* ---------- Ulæste ---------- */
.dot-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .38rem; border-radius: 999px;
  background: var(--marker); color: var(--ink); font-size: .75rem; font-weight: 700; line-height: 1;
  text-decoration: none; vertical-align: middle;
}
.dot-badge[hidden] { display: none; }
a.dot-badge:hover { color: var(--ink); background: #F2D94F; }
.inbox-link { position: relative; display: inline-flex; align-items: center; color: var(--ink-2); padding: .3rem; border-radius: 8px; }
.inbox-link:hover { color: var(--green); background: var(--paper-2); }
.inbox-link .dot-badge { position: absolute; top: -.35rem; right: -.55rem; min-width: 1.15rem; height: 1.15rem; font-size: .68rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inbox-list { list-style: none; margin: 0; padding: 0; }
.inbox-list li + li { border-top: 1px solid var(--rule-2); }
.inbox-list a { display: grid; gap: .15rem; padding: .7rem .2rem; text-decoration: none; color: var(--ink); }
.inbox-list a:hover { background: var(--paper); }
.inbox-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.inbox-meta { font-size: .82rem; color: var(--ink-3); display: flex; gap: .6rem; }
.inbox-last { font-size: .9rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Valg (notifikationer) ---------- */
.choices { gap: .5rem; }
label.choice { flex-direction: row; align-items: flex-start; gap: .7rem; font-weight: 400; padding: .7rem .85rem; border: 1px solid var(--rule); border-radius: 10px; background: #fff; cursor: pointer; }
label.choice:has(input:checked) { border-color: var(--green); background: var(--green-wash); }
label.choice input { width: auto; margin-top: .2rem; accent-color: var(--green); }
label.choice span { display: grid; gap: .1rem; }
label.choice small { color: var(--ink-2); }

@media (max-width: 640px) {
  .msg { max-width: 94%; }
  .composer-bar .btn { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-arrive { animation: none; }
  .chat .msgs { scroll-behavior: auto; }
}

/* ---------- Perspektivskift (demo og se som kunde) ---------- */
.act-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  padding: .5rem 1rem; font-size: .92rem; font-weight: 600;
}
.act-demo { background: var(--stamp); color: #fff; }
.act-view { background: var(--marker); color: var(--ink); }
.act-bar .btn { background: #fff; color: var(--ink); border-color: transparent; }
.act-bar .btn:hover { background: var(--paper); }
.act-bar + header.top { top: 2.6rem; }
body.read-only main form:not(.allow-ro) button,
body.read-only main form:not(.allow-ro) input,
body.read-only main form:not(.allow-ro) textarea,
body.read-only main form:not(.allow-ro) select { opacity: .55; pointer-events: none; }
.tag-demo { background: var(--stamp-wash); color: var(--stamp); }
.demo-panel { border-color: #D3C4EE; box-shadow: inset 4px 0 0 #7A5BB5; }
.demo-panel .row { display: flex; gap: .7rem; flex-wrap: wrap; }
td.row-actions { white-space: nowrap; text-align: right; }
td.row-actions form + form { margin-left: .9rem; }

/* ---------- Import ---------- */
.import-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .import-grid { grid-template-columns: 1fr; } }
.paste-area { min-height: 22rem; font-size: .95rem; line-height: 1.5; background: #fff; }
.import-cta { margin-bottom: 1rem; display: grid; gap: .4rem; justify-items: start; }
.guide h3 { margin-top: 1.3rem; }
.doc-sample { border: 1px solid var(--rule); border-radius: 8px; background: #fff; padding: 1rem 1.1rem; margin: .8rem 0 1rem; display: grid; gap: .35rem; }
.doc-sample > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; align-items: baseline; }
.ds-tag { font-size: .72rem; color: var(--ink-3); font-weight: 500; text-align: right; }
.ds-h1 { font-size: 1.15rem; font-weight: 750; margin-top: .2rem; }
.ds-h2 { font-size: 1rem; font-weight: 650; margin-top: .45rem; }
.ds-p { font-size: .9rem; color: var(--ink-2); }
.import-confirm { display: grid; gap: .8rem; }
.list td.desc { color: var(--ink-2); font-size: .9rem; max-width: 34rem; }
.list th.act, .list td.act { width: 2.5rem; text-align: right; }
.icon-btn { background: none; border: 0; padding: .3rem; border-radius: 6px; color: var(--ink-3); cursor: pointer; display: inline-flex; }
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.icon-btn.danger:hover { color: var(--red); background: #FBEAE8; }
details.add > summary.danger { color: var(--red); }
.import-confirm .row, .guide .row { justify-content: flex-start; margin: 0; padding: 0; }
.import-confirm p { margin: 0; }
.preview-list th:nth-child(2), .preview-list td:nth-child(2) { width: 34%; }
.preview-list td.desc { max-width: none; }
.preview-list th:last-child, .preview-list td:last-child { width: 7rem; }

/* ---------- Anmodning og upload på punktet ---------- */
.request { display: grid; gap: .7rem; }
.request-open { border-color: #E9D98A; box-shadow: inset 4px 0 0 var(--marker); }
.request-h { font-size: .85rem; font-weight: 650; color: var(--ink-3); margin: 0; }
.request-body { font-size: 1.15rem; line-height: 1.5; color: var(--ink); max-width: 70ch; }
.upload-zone { display: grid; gap: .6rem; margin-top: .3rem; }
.dropzone {
  position: relative; display: grid; justify-items: center; gap: .25rem; text-align: center;
  padding: 1.2rem 1rem; border: 1.5px dashed #B9C9BF; border-radius: 12px; background: var(--paper);
  cursor: pointer; font-weight: 400; color: var(--ink-2);
}
.dropzone:hover, .dropzone.over { border-color: var(--green); background: var(--green-wash); }
.dropzone:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dz-icon { color: var(--green); }
.dz-text b { color: var(--green); }
.picked { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.picked[hidden] { display: none; }
.picked li { display: flex; align-items: center; gap: .6rem; padding: .4rem .7rem; background: #fff; border: 1px solid var(--rule); border-radius: 8px; font-size: .92rem; }
.picked li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picked li small { color: var(--ink-3); }
.picked li .link { font-size: 1.2rem; line-height: 1; color: var(--ink-3); text-decoration: none; padding: 0 .2rem; }
.picked li .link:hover { color: var(--red); }
.upload-zone .btn { justify-self: start; }
.composer .picked { grid-column: 1 / -1; }

/* ---------- Hvor er jeg: side og demo ---------- */
body.side-auditor header.top { box-shadow: inset 0 3px 0 var(--stamp); }
body.side-client header.top { box-shadow: inset 0 3px 0 var(--green); }
.side-chip {
  display: inline-flex; align-items: baseline; gap: .4rem; max-width: 22rem;
  padding: .3rem .7rem; border-radius: 999px; font-size: .85rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-chip span { overflow: hidden; text-overflow: ellipsis; }
.side-chip-auditor { background: var(--stamp-wash); color: var(--stamp); }
.side-chip-client { background: var(--green-wash); color: var(--green); }
.side-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); }
.side-switch form { display: contents; }
.seg { border: 0; background: none; padding: .32rem .85rem; border-radius: 999px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg:hover:not(.on) { color: var(--ink); background: #fff; }
.seg.on { cursor: default; color: #fff; }
.seg-auditor.on { background: var(--stamp); }
.seg-client.on { background: var(--green); }
.demo-band {
  display: flex; justify-content: center; padding: .4rem 1rem; font-size: .88rem; color: #3F2D63;
  background: repeating-linear-gradient(135deg, #EEE7FA 0 14px, #E4DAF6 14px 28px);
  border-bottom: 1px solid #D3C4EE;
}
.demo-band b { font-weight: 700; margin-right: .3rem; }
.tag-demo { background: #EEE7FA; color: #5B3F92; }
.demo-band + header.top, .act-bar + .demo-band + header.top { top: 0; }
@media (max-width: 760px) {
  .side-chip span { display: none; }
  .seg { padding: .3rem .6rem; }
}

/* ---------- Knap til at vælge filer ---------- */
.attach-btn {
  position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border: 1px solid var(--rule); border-radius: 8px; background: #fff;
  font-size: .9rem; font-weight: 600; color: var(--ink-2); cursor: pointer; width: max-content;
}
.attach-btn:hover { border-color: var(--green); color: var(--green); }
.attach-btn:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.attach-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.composer > .picked { margin-top: -.2rem; }
.auditor-upload { margin-top: .9rem; }
.auditor-upload .upload-zone { margin-top: .6rem; }
.notice.perspective-note, p.notice.perspective-note { background: #EEE7FA; border: 1px solid #D3C4EE; color: #3F2D63; border-radius: 10px; padding: .6rem .9rem; margin: 0 0 1rem; }
.sub.perspective-note { color: #5B3F92; font-weight: 600; }