/* styreagenten.ai — the screens inside the main pane.
 *
 * The shell around them is skall.css. Everything here draws through the tokens
 * below, which is why retuning the palette to the design handoff was a change
 * to this block rather than to six hundred lines of rules.
 *
 * The fonts are named and not fetched. This app runs locally because a board's
 * correspondence should not leave the machine, and a webfont request on every
 * load is a third party being told when the app was opened — a Google request
 * per session would undo the premise for the sake of a typeface. The design
 * asks for Newsreader, Instrument Sans and IBM Plex Mono; until those are
 * vendored into the repo the stacks fall back to system faces, and the swap is
 * these three lines.
 */

:root {
  /* Warm paper, per the design handoff §1. The desktop is the darkest surface
     and the cards sit ON it — the inversion of the old panel, where the page
     was near-white and the rail was grey. */
  --desk: #efeae0;
  --page: #faf7f1;
  --surface: #faf7f1;
  --rail: #f4efe5;
  --list: #fcfaf5;
  --sunk: #f2ece0;
  --sunk-deep: #ede7db;

  --ink: #2a2622;
  --body: #3f3931;
  --body-soft: #4a4238;
  --muted: #8a8175;
  --faint: #a79c89;

  --hairline: #e2dacb;
  --divider: #ede7da;
  --row-line: #f1ebdf;

  /* Ochre carries every accent now. The old blue is gone: on this paper it
     read as a link from another application. */
  --accent: #a8622a;
  --accent-hover: #8a4e1e;
  --accent-tint: #f1e7d4;
  --accent-wash: #f6efe0;
  --ochre: #c07a34;

  --brick: #c0563a;
  --brand-ink: #2a2622;
  --add-line: #d9cfbb;
  --add-icon: #a8622a;

  --ok: #3e7c5a;
  --ok-bg: #edf2ee;
  --ok-line: #cfe0d5;
  --ok-dot: #5c9270;

  /* Amber is what the system does not know: gaps, open questions, unconfirmed
     decisions. Never an error colour — this is the product's best content. */
  --gap-ink: #8a5a18;
  --gap-mark: #d3b36a;
  --gap-bg: #f9f2e4;
  --gap-line: #eee0c6;

  /* Serif for content, sans for UI, mono for dates and numbers. Not a
     preference — a reader must be able to tell what was captured from a source
     apart from what this application is saying. */
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--page); color: var(--ink);
  font: 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { color: var(--accent-hover); }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
h1, h2 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
input { font: inherit; }

/* The shell — desktop, sidebar, the three panes — is skall.css. What is left
 * in this file is what lives INSIDE the main pane. */

.page { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.page[hidden] { display: none; }

/* --- saker --- */

.sak-col {
  width: 285px; flex: none; display: flex; flex-direction: column;
  min-width: 220px; background: var(--surface); border-right: 1px solid var(--hairline);
}
.sak-list { flex: 1; overflow: auto; padding: 6px 0 12px; }

.sak-row {
  display: block; width: 100%; text-align: left;
  padding: 9px 18px 11px; border-left: 2px solid transparent;
}
.sak-row:hover { background: var(--page); }
.sak-row.on { border-left-color: var(--accent); background: var(--accent-tint); }
.sak-row .line { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
/* The status the case page declares. Activity computed from the documents is
 * a different claim and does not share this mark. */
.sak-row .live { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.live.open { background: var(--ok); }
.live.waiting { background: var(--gap-mark); }
.live.closed { background: #c3cad1; }
.sak-row .name {
  font-size: 13.5px; line-height: 1.35; color: var(--body); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sak-row.on .name { color: var(--ink); font-weight: 600; }
.sak-row .meta {
  display: block; font-family: var(--mono); font-size: 11px; color: var(--faint);
  padding-left: 16px; margin-top: 3px;
}


/* --- dokumenter --- */

.browser { flex: 1; display: flex; min-height: 0; }
/* No card, no page padding. A bordered rounded box around a bordered column
 * and a bordered strip is three lines saying the same thing, and it cost the
 * list about 50px of width and 45px of height to say it. One hairline between
 * the columns does the whole job, which is what "flat with hairline borders"
 * meant in the first place. */
.browser-card { flex: 1; display: flex; min-width: 0; }
/* Wider than the handoff's 310px, because the tree put more in the column than
 * the flat list had: a thread is named after a mail's subject, and a subject
 * ellipsised to two characters is a row you cannot read at all. */
.doc-col {
  flex: 1; display: flex; flex-direction: column;
  min-width: 260px; background: var(--list);
}
.doc-list { flex: 1; overflow: auto; padding: 4px 0 8px; }

/* Two icons, and nothing standing over the list that is not being used. A
 * search box and two dropdowns held three rows of a column whose whole job is
 * fitting documents into it, to offer things a person wants occasionally. */
/* Søket først og alltid framme — et felt bak et ikon var et felt ingen
 * fant — med sorteringsknappen ved siden av. Én rad, ikke to. */
.list-tools {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; flex: none; position: relative;
}
.tool {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px; color: var(--muted);
}
.tool svg { width: 15px; height: 15px; }
.tool:hover { background: var(--divider); color: var(--body); }
.tool.on { background: var(--accent-wash); color: var(--accent); }

.sort-menu {
  position: absolute; top: 32px; right: 8px; z-index: 5; min-width: 168px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 4px; box-shadow: 0 6px 20px #11171d1f;
}
.sort-menu[hidden] { display: none; }
.sort-option {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px 8px; border-radius: 5px; font-size: 13px; color: var(--body);
}
.sort-option:hover { background: var(--divider); }
.sort-option.on { color: var(--accent); font-weight: 600; }
.sort-option .check { width: 12px; flex: none; font-size: 11px; }

.search-wrap { flex: 1; min-width: 0; }
.search-wrap input {
  width: 100%; font: inherit; font-size: 12.5px; color: var(--body-soft);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 5px 8px;
}
.search-wrap input:focus { outline: none; border-color: var(--accent); }
.search-wrap input::placeholder { color: var(--faint); }

/* Dragging this widens the list. A long subject line is the reason: some
 * documents cannot be told apart in 310px, and which ones depends on the
 * corpus rather than on anything we can pick in advance. */
.resizer {
  width: 5px; flex: none; cursor: col-resize; background: var(--hairline);
  border: 0; padding: 0;
}
.resizer:hover, .resizer.dragging { background: var(--accent); }

.reader {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  position: relative; background: var(--surface);
}

/* Veien ut av et åpnet dokument. Den fantes ikke: å åpne noe her var en
 * enveisdør, og eneste vei tilbake til listen alene var å bytte fane.
 *
 * Over innholdet og ikke i en topplist, fordi ruten ikke HAR en topplist —
 * dokumentet begynner på første linje, og en stripe over det bare for å bære
 * ett kryss ville kostet hver leser 40px av det de leser. Samme form som
 * kilderutens kryss, så de to leses som samme handling. */
.pane-lukk {
  position: absolute; top: 10px; right: 14px; z-index: 2;
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 17px; line-height: 1;
  background: var(--surface);
}
.pane-lukk:hover { background: var(--rail); color: var(--body); }
/* Plass til krysset i den ene linjen som når opp til det. Knappen ligger OVER
 * innholdet med ugjennomsiktig bunn, så uten dette ville en lang emnelinje
 * blitt kuttet av en knapp i stedet for av kanten — og det leser som en
 * rendringsfeil, ikke som en knapp. Bare den øverste overskriften: alt lenger
 * ned ligger godt under knappen uansett.
 *
 * Etterkommer og ikke barn: hver renderer pakker innholdet sitt i sin egen
 * div, så `.pane > h1` traff ingenting — målt i panelet, ikke antatt. */
.pane h1:first-child { padding-right: 30px; }
/* Ingenting åpent, ingen knapp — og `.solo` skjuler hele ruten uansett, så
 * dette er for det korte øyeblikket ruten står der uten innhold. */
.browser-card.solo .pane-lukk { display: none; }
body.resizing { cursor: col-resize; user-select: none; }

/* The reader pane is always visible, like a three-pane layout. */

/* A file tree, folded by kind. One row per document and nothing wrapped, so
 * the number you can see at once is the number that fits, which is the whole
 * point of the shape.
 *
 * The kind lives in the heading rather than on every row: inside "E-poster"
 * every row is an e-post, and a tag repeating that 595 times is noise. */
.tree-group { margin-bottom: 1px; }
.tree-head {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 5px 12px 5px 8px; border-radius: 5px;
  font-size: 13px; font-weight: 600; color: var(--body-soft);
}
.tree-head:hover { background: var(--divider); }
.tree-head .twist {
  display: flex; flex: none; color: var(--faint); transition: transform 0.12s ease;
}
.tree-head .twist svg { width: 13px; height: 13px; }
.tree-head[aria-expanded="true"] .twist { transform: rotate(90deg); }
/* A folded group wears the document row, so the column keeps one rhythm. What
 * marks it as a group is the chevron and the count on its second line — not a
 * different height, a different weight and a different set of columns, which
 * is what it had. Between four-line rows it read as a second list interleaved
 * with this one.
 *
 * Lighter than a document all the same: a group is a container, and its name
 * is already the name of the things inside it. */
.doc-row.gruppe .from { font-weight: 500; }
.doc-row.gruppe .twist {
  display: flex; flex: none; align-self: flex-start;
  margin-top: 2px; color: var(--faint); transition: transform 0.12s ease;
}
.doc-row.gruppe .twist svg { width: 13px; height: 13px; }
.doc-row.gruppe[aria-expanded="true"] .twist { transform: rotate(90deg); }
.doc-row.gruppe[aria-expanded="true"] { background: var(--rail); }

/* The guide line, so a long list of children stays visibly attached to the
 * heading it belongs to once that heading has scrolled out of view. */
.tree-kids { margin: 1px 0 3px 14px; border-left: 1px solid var(--hairline); padding-left: 3px; }
.tree-kids[hidden] { display: none; }

/* The twisty column is reserved on every row, not only on the rows that have
 * one. A conversation of one is drawn as its mail, and a mail whose name began
 * where a heading's twisty is would read as a different level of the tree
 * rather than as the same level with nothing to open. 8 of padding, 13 of
 * chevron, 7 of gap: the same three numbers .tree-head is built from. */
/* Four lines: who from, what about, when, and the opening of it. A board scans
 * correspondence by sender first, which the old single-line row could not show
 * at all — the subject sat where a name belongs.
 *
 * Separated by a hairline per row rather than by radius and fill. A list of
 * eighty of these is read as a column, and eighty rounded tinted boxes is
 * eighty objects. */
.doc-row {
  display: flex; gap: 11px; width: 100%; text-align: left;
  padding: 12px 16px 13px; border-bottom: 1px solid var(--row-line);
}
.doc-row:hover { background: var(--rail); }
.doc-row.on { background: #f0eadd; }
/* The selected row's one mark, in the kind's own colour. It replaces a dot on
 * every row: the list holds a single kind, so a mark repeating that on each
 * line says nothing. */
.twist-gap { width: 13px; flex: none; }
.row-text { flex: 1; min-width: 0; display: block; }
.row-date { flex: none; font-family: var(--mono); font-size: 11px; color: #b0a694;
  white-space: nowrap; align-self: center; }
.doc-row .from {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-row .subject {
  display: block; margin-top: 2px; font-size: 13px; color: var(--body-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-row .when {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 10.5px; color: #b0a694;
}
/* Two lines and then it stops. The row is a way of recognising a document, not
 * a way of reading one. */
.doc-row .opening {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 4px;
  font-size: 12px; line-height: 1.4; color: var(--muted);
}
.doc-row .clip { font-size: 10px; }
/* The type, on a Kildeliste row: a case cites across kinds, so there the badge
 * is saying something the rows around it do not. In the document tree the
 * heading already says it, and per row it would only repeat. */
.tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; flex: none;
  border-radius: 3px; padding: 1px 5px; text-transform: uppercase;
}
.list-empty { padding: 18px 22px; font-size: 13px; color: var(--faint); }

/* The end of a kind, where there is more of it. Aligned with the rows above
 * rather than centred, because it is the next row of the list and not a
 * footer under it — and it says where you are on the same right-hand edge the
 * dates use, so "20 av 80" is read in the column that answers "how much". */
.tree-more {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 5px 12px 5px 28px; border-radius: 5px;
  font-size: 12.5px; color: var(--accent);
}
.tree-more:hover { background: var(--accent-wash); }
.tree-more:disabled { color: var(--faint); background: none; cursor: default; }
.tree-more .more-label { flex: 1; min-width: 0; }

/* --- the tab strip --- */

/* The connected tab: the strip is a shade darker than the pane, the open tab
 * is the pane's own white, and it merges by covering the millimetre between
 * them. No border and no shadow, so nothing has to line up with anything.
 *
 * Tabs never shrink. The handoff caps a label at 170px and scrolls the strip;
 * letting them squeeze instead would turn five open tabs into five ellipses,
 * and a tab too narrow to read is not a tab, it is a marker for one.
 */
.tabstrip {
  display: flex; align-items: flex-end; gap: 3px; flex: none;
  background: #f4f6f8; padding: 8px 10px 0; overflow-x: auto; scrollbar-width: thin;
}
.tab {
  display: flex; align-items: center; gap: 7px; flex: none; max-width: 170px;
  padding: 9px 13px 11px; border-radius: 8px 8px 0 0;
  font-size: 13px; font-weight: 500; color: #8a95a0; white-space: nowrap;
}
.tab:hover { color: var(--body-soft); }
.tab.on {
  background: var(--surface); color: var(--ink); font-weight: 600; margin-bottom: -1px;
}
.tab .dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.tab .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tab .x {
  color: var(--faint); font-size: 15px; line-height: 1; flex: none;
  padding: 0 3px; border-radius: 3px; opacity: 0;
}
/* Shown on the tab you are pointing at or reading. Eight always-on crosses
 * across a strip is eight invitations to lose your place. */
.tab:hover .x, .tab.on .x { opacity: 1; }
.tab .x:hover { background: #e6eaee; color: var(--body-soft); }

/* Held at 40px across. More reintroduced a horizontal scrollbar and wrapped
 * the labels in the properties table, per the handoff. */
.pane { flex: 1; overflow: auto; padding: 24px 40px 32px; }
#sak-pane { padding: 32px 40px; }
.pane-empty { color: var(--faint); font-size: 14px; padding: 40px 0; }
/* What the list is, above both columns. Serif, because it names a body of
 * documents rather than a control. */
.liste-topp {
  flex: none; padding: 20px 30px 16px; border-bottom: 1px solid var(--divider);
}
.liste-navn {
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  letter-spacing: -0.01em; color: var(--ink);
}
.liste-under { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }

/* --- the reader ---------------------------------------------------------- */

.les-emne {
  font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.25;
  letter-spacing: 0; color: var(--ink); margin-bottom: 0;
}
.les-fra {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--divider);
}
.les-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: #ede6d8; color: #6b6151;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
}
.les-hvem { flex: 1; min-width: 0; }
.les-navn {
  display: block; font-size: 13.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.les-til {
  display: block; font-size: 11.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.les-dato {
  flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  white-space: nowrap;
}

.svar-knapp {
  flex: none; font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 5px 12px; border-radius: 6px; cursor: pointer;
  background: var(--accent); color: #fff; border: none;
  white-space: nowrap; margin-left: 8px;
}
.svar-knapp:hover { opacity: 0.85; }

/* Chips for the three things worth acting on. The sak one navigates and shows
 * it; the other two state a fact and say so by not offering a pointer. */
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tags .tag {
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  padding: 5px 11px; border-radius: 99px; white-space: nowrap;
  background: var(--sunk); color: var(--body-soft);
}
.tags .tag-sak { background: var(--accent-wash); color: var(--accent); cursor: pointer; }
.tags .tag-sak:hover { background: var(--accent-tint); }

.entity { max-width: 640px; }

/* Except when it holds a document. Prose wants a line it can be read along;
   a file wants the room it has. The cap stays on the heading and the
   properties, so only the document itself takes the width. */
.entity:has(.file-view) { max-width: none; }
.entity:has(.file-view) > h1,
.entity:has(.file-view) > .caps,
.entity:has(.file-view) > .props,
.entity:has(.file-view) > .type-chip,
.entity:has(.file-view) > .les-fra,
.entity:has(.file-view) > .tags,
.entity:has(.file-view) > .gap-note { max-width: 640px; }

.type-chip {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em; border-radius: 4px; padding: 3px 9px;
  /* It was breaking to "E-/poster": a hyphenated word in a box sized to it. */
  white-space: nowrap;
  margin-bottom: 16px;
  color: #5a6673; background: #eef1f4; border: 1px solid #dde2e7;
}
.entity h1 { font-size: 26px; line-height: 1.18; margin-bottom: 22px; letter-spacing: -0.015em; }
/* The reader sets its own subject: serif, 24px, and no bottom margin because
 * the sender line under it carries the spacing. Written after `.entity h1`
 * and with the same weight, so it wins on order rather than on a selector
 * nobody can read. */
.entity h1.les-emne {
  font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.25;
  letter-spacing: 0; margin-bottom: 0;
}

.entity-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; margin-top: 6px;
}
.entity-meta .les-dato { font-size: 13px; color: var(--body-soft); }
.entity-docs { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
.entity-doc {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 6px; border: none; background: none;
  cursor: pointer; text-align: left; font: inherit; color: var(--body);
}
.entity-doc:hover { background: var(--sunk); }
.entity-doc-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.entity-doc-label { flex: 1; font-size: 13.5px; line-height: 1.35; }
.entity-doc-meta {
  font-family: var(--mono); font-size: 11px; color: #8a95a0; white-space: nowrap;
}

.caps {
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
  color: #8a95a0; margin-bottom: 6px;
}
.props { margin-bottom: 24px; }
.prop { display: flex; gap: 16px; padding: 11px 2px; align-items: flex-start; }
.prop + .prop { border-top: 1px solid var(--divider); }
.prop-key { width: 150px; flex: none; color: #7a8792; font-size: 12.5px; }
.prop-val {
  flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 13px; line-height: 1.5; color: var(--body); word-break: break-word;
}
.view-toggle {
  display: inline-flex; border: 1px solid var(--divider); border-radius: 6px;
  overflow: hidden; margin: 16px 0 8px;
}
.view-toggle button {
  border: none; background: none; padding: 6px 14px; font: inherit;
  font-size: 12.5px; font-weight: 500; color: #7a8792; cursor: pointer;
}
.view-toggle button + button { border-left: 1px solid var(--divider); }
.view-toggle button.on { background: var(--accent); color: #fff; }
.view-data, .view-file { display: none; }
.view-data.on, .view-file.on { display: block; }

.detail-table { margin-bottom: 24px; overflow-x: auto; }
.detail-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.detail-table th {
  text-align: left; font-weight: 600; font-size: 12px; color: #7a8792;
  padding: 6px 10px 6px 0; border-bottom: 1px solid var(--divider);
}
.detail-table td {
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--divider);
  color: var(--body); line-height: 1.4;
}

/* Anything in the properties table that is a node in the graph opens. That is
 * the whole point of the pane: from a file to the matter it concerns without
 * searching for it. */
.node-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #25324b;
  background: #f4f6f8; border: 1px solid #e1e6eb; border-radius: 6px; padding: 5px 10px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.node-chip:hover { background: #eaeef2; border-color: var(--accent); color: var(--accent); }
.node-chip .dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.node-chip.sak {
  font-family: var(--mono); font-size: 11px; color: #8f3b21;
  background: #f3e3db; border-color: #e4c4b4;
}
.node-chip.sak:hover { background: #eed9cf; color: #8f3b21; border-color: var(--brick); }

/* --- the sak pane --- */

.sak-nr {
  display: inline-flex; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: #8f3b21; background: #f3e3db; border: 1px solid #e4c4b4; border-radius: 4px;
  padding: 3px 9px;
}

/* The saksside's own timeline, drawn: one bead per entry, on one thread. The
 * text is the board's, unchanged. */
.timeline { padding-left: 7px; }
.timeline-row {
  position: relative; padding: 0 0 20px 26px; border-left: 2px solid var(--divider);
}
.timeline-row:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-row .bead {
  position: absolute; left: -7px; top: 4px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--brick); border: 3px solid var(--page);
}
.timeline-row .when {
  display: block; font-family: var(--mono); font-size: 12px; color: var(--faint);
  margin-bottom: 3px;
}
.timeline-row .said { display: block; font-size: 14px; line-height: 1.65; color: var(--body); }
.timeline-row .said p { margin: 0; }
.timeline-empty { font-size: 13.5px; color: var(--faint); }

/* --- the resolved kildeliste --- */

.sources { border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.source-row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 13px; border-bottom: 1px solid var(--divider); background: var(--surface);
}
.source-row:last-child { border-bottom: 0; }
.source-row:hover { background: #f7f9fb; }
.source-row .ref {
  flex: none; width: 30px; font-family: var(--mono); font-size: 11px; color: var(--faint);
}
.source-row .title {
  flex: 1; min-width: 0; font-size: 13.5px; color: #25324b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.source-row:hover .title { color: var(--accent); }
.source-row .when {
  flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--faint);
}

/* --- the sak header --- */

.sak-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.sak-status {
  font-size: 12px; font-weight: 600; border-radius: 4px; padding: 3px 10px;
  color: var(--muted); background: #f0f2f4; border: 1px solid #e1e5e9;
}
.sak-status.open { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.sak-status.waiting {
  color: var(--gap-ink); background: var(--gap-bg); border-color: var(--gap-line);
}
.sak-topic {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 4px; padding: 3px 9px;
}

.block { margin-bottom: 30px; }
.block .prose { font-size: 14px; line-height: 1.7; color: var(--body); }
.block .prose p { margin: 0 0 12px; }
.block .prose ul { margin: 0 0 12px; padding-left: 20px; }
.block .prose li { margin-bottom: 6px; }

/* A citation you can follow. Traceability is the product, so the marker in
 * the prose is the document, not a number asking to be trusted. */
.cite {
  font-family: var(--mono); font-size: 11px; vertical-align: 1px;
  color: var(--accent); background: var(--accent-wash);
  border: 1px solid #cfe0f0; border-radius: 3px; padding: 0 4px; margin: 0 1px;
}
.cite:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Typeboksen: sans, ikke mono — den bærer et ord, ikke en nøkkel. Fargene
 * settes inline fra typekartet, samme kilde som merket øverst i kilderuten,
 * så de to aldri kan si hver sin farge om samme type. Hover beholder typens
 * farger og løfter bare kanten: å bytte til aksentblå slettet nettopp den
 * informasjonen boksen finnes for å bære. */
.cite-type {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.02em; padding: 0 5px;
}
.cite-type:hover { filter: brightness(0.93); }


/* Serif, because this is the document rather than the application talking.
 * No rule above it: the tags are the separator, and a border under them drew
 * a second line 16px from the first. */
/* 13.5px, som raden ved siden av. Den var 16.5, og de to sto side om side:
 * samme setning i listen og i leseren, i to størrelser, med et halvt sekunds
 * omstilling hver gang blikket gikk mellom dem. Én skriftstørrelse på skjermen
 * er verdt mer enn den lesbarheten de tre punktene ekstra kjøpte.
 *
 * Linjeavstanden er beholdt romslig: en kortere linje trenger den mindre, men
 * dette er brødtekst i full bredde og ikke en rad. */
.body-text { padding-top: 20px; }
.body-text p {
  font-family: var(--serif); font-size: 13.5px; line-height: 1.7;
  color: var(--ink); margin: 0 0 13px;
}
.body-none { font-size: 14px; color: var(--faint); }

.note {
  display: flex; gap: 11px; align-items: flex-start; border-radius: 8px;
  padding: 14px 16px; font-size: 13px; line-height: 1.55; margin-bottom: 22px;
}
.note.amber { background: var(--gap-bg); border: 1px solid var(--gap-line); color: var(--gap-ink); }
.note.amber .mark-icon { color: var(--gap-mark); }
.note.green { background: var(--ok-bg); border: 1px solid var(--ok-line); color: #2f5c40; }
.note.plain { background: var(--rail); border: 1px solid var(--hairline); color: var(--body-soft); }

/* --- legg til data --- */

.split { flex: 1; display: flex; min-height: 0; }
.sources-col {
  width: 320px; flex: none; background: var(--rail); border-right: 1px solid var(--hairline);
  padding: 22px 20px; overflow: auto;
}
.col-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brick); margin: 0 0 10px;
}
.col-label.later { color: var(--faint); margin-top: 26px; }
.connect-col { flex: 1; overflow: auto; padding: 34px 40px; }
.connect { max-width: 560px; }
.connect h2 { font-size: 26px; margin-bottom: 14px; }
.lede { font-size: 15px; color: var(--body); line-height: 1.65; }

.source {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 12px 14px; margin-bottom: 8px; color: inherit;
}
.source.on { border: 2px solid var(--accent); padding: 11px 13px; }
.source:disabled { opacity: 0.55; cursor: not-allowed; }
.source .tile {
  width: 30px; height: 30px; border-radius: 7px; background: #1f6e52; color: #f3efe6;
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex: none;
}
.source-name { font-size: 14px; font-weight: 600; }
.source-sub { font-size: 12px; color: var(--muted); }
.source .dot {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.source .soon { margin-left: auto; }

.trust { margin: 24px 0; display: flex; flex-direction: column; gap: 14px; }
.trust-row { display: flex; gap: 12px; align-items: flex-start; }
.trust-title { font-size: 14.5px; font-weight: 600; }
.trust-body { font-size: 13px; color: var(--muted); }

.field { margin-top: 22px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%; border: 1px solid var(--hairline); border-radius: 6px; padding: 9px 12px;
  font-size: 14px; background: var(--surface);
}
.field input:focus { outline: none; border-color: var(--accent); }
.caption { font-size: 12.5px; color: var(--faint); margin: 8px 0 0; }
.actions { margin-top: 22px; }
.primary {
  background: var(--accent); color: #fff; border-radius: 6px; padding: 11px 20px;
  font-size: 14.5px; font-weight: 600;
}
.primary:hover { background: var(--accent-hover); }
.quiet {
  border: 1px solid var(--hairline); border-radius: 6px; padding: 5px 10px;
  font-size: 12.5px; color: var(--body-soft); background: var(--surface);
}
.quiet:hover { border-color: var(--accent); color: var(--accent); }
.muted { color: var(--muted); font-size: 13px; }

/* A nav item for something that is coming. Listed rather than hidden: a board
   asking whether the graph view exists deserves to see that it is planned. */
.nav-item.off { opacity: 0.55; cursor: default; }
.nav-item.off:hover { background: none; }
.nav-tag {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1px 4px;
}

/* The document itself, filling the pane. No frame and no rounded corner: a
   box drawn around a document says "here is a preview of a file", and what we
   want it to say is "here is the file". It scrolls inside itself, the way an
   attachment opened inside a mail client does.

   Chrome's own PDF viewer draws the rest: its toolbar and thumbnail panel are
   turned off in the URL, but the grey it paints around the pages belongs to
   the viewer and cannot be reached from out here. Drawing pages ourselves
   would mean carrying a PDF renderer. */
.file-view { margin-top: 4px; }
.file-page {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}
iframe.file-page {
  /* Tall enough to read in, and it grows with the window. The pane scrolls
     to it and the document scrolls inside. */
  height: calc(100vh - 210px);
  min-height: 560px;
}
img.file-page { height: auto; }
.file-note { font-size: 13px; color: var(--faint); margin: 10px 0 0; }

/* A note beside a link: why it is uncertain, or what we could not tell apart.
   Beside rather than instead of, because the link is still the useful thing. */
.soft-note { font-size: 12px; color: var(--faint); margin-left: 6px; }


/* Attachments, shown under the document they came with rather than behind a
 * chip. For most of this corpus the file IS the substance — the protokoll,
 * the contract, the invoice scan — so it belongs on the page a person is
 * already reading. */
.attached { margin-top: 28px; }
.attached .caps { margin-bottom: 10px; }
.attachment {
  margin: 0 0 18px; border: 1px solid var(--hairline); border-radius: 8px;
  overflow: hidden; background: var(--surface);
}
.attachment figcaption {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--hairline); background: var(--list);
}
.attachment figcaption .link {
  font-size: 13px; font-weight: 600; color: var(--accent); text-align: left;
}
.attachment figcaption .link:hover { text-decoration: underline; }
.attachment figcaption .side { font-size: 11.5px; color: var(--faint); flex: none; }
/* A tall PDF must not push the mail off the screen: it scrolls in its own box
 * and opens full-size in its own tab through the heading. */
.attachment .file-view { max-height: 520px; overflow: auto; }


/* The quoted history, folded. Shown in full when asked for — nothing is
 * parsed away — but out of the way until then, so the newest message is what
 * a person reads first. */
.quoted { margin-top: 18px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.quoted summary {
  cursor: pointer; font-size: 12.5px; color: var(--muted); list-style: none;
  display: inline-flex; align-items: center; gap: 6px; user-select: none;
}
.quoted summary::-webkit-details-marker { display: none; }
.quoted summary::before { content: '▸'; font-size: 11px; }
.quoted[open] summary::before { content: '▾'; }
.quoted summary:hover { color: var(--body); }
.quoted-body { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--divider); color: var(--body-soft); }

/* A paperclip beside a row that carries one. Small, and before the date so
 * the right-hand column stays a column of dates. */
.clip { flex: none; font-size: 10.5px; opacity: .55; margin-left: 4px; }


/* The conversation a document is one of. Folded like the quoted history, but
 * this one is read from the graph: every row is a real document and opens. */
.convo { margin-top: 24px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.convo summary {
  cursor: pointer; font-size: 12.5px; color: var(--muted); list-style: none;
  display: inline-flex; align-items: center; gap: 6px; user-select: none;
}
.convo summary::-webkit-details-marker { display: none; }
.convo summary::before { content: '▸'; font-size: 11px; }
.convo[open] summary::before { content: '▾'; }
.convo summary:hover { color: var(--body); }
.convo-body { margin-top: 8px; }
.convo-row {
  display: grid; grid-template-columns: 130px 82px 1fr; gap: 10px; width: 100%;
  text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 12.5px;
  align-items: baseline; color: var(--body-soft);
}
.convo-row:hover { background: var(--divider); }
/* Where you are in the exchange, marked rather than left out. */
.convo-row.on { background: var(--accent-wash); color: var(--body); font-weight: 600; }
.convo-who { font-weight: 600; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-when { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.convo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }