/*
 * record.css — selskabsregistret's own surfaces.
 *
 * Everything here belongs to the screens that render a company's RECORD
 * rather than its workflow: ejerbogen (donut + per-kapitalejer historik),
 * udbyttehistorikken, vedtægternes versioner and their diff, and the
 * stamdata page (facts, ledelse, regnskabsår).
 *
 * A separate sheet, not more of notarium.css, on purpose: notarium.css is the
 * design system every screen reads, and it is already 4,000 lines edited by
 * every workstream at once. Propshaft's `stylesheet_link_tag :app` (see
 * app/views/shared/_head.html.erb) emits every file under
 * app/assets/stylesheets ALPHABETICALLY, so this one lands after notarium.css
 * and after document.css — which is what lets the vedtægter panel below tune
 * a `.doc-*` rule without raising specificity.
 *
 * Tokens only. Nothing here invents a colour: every value is a --nt-* token so
 * both themes follow the system, and the dark-mode blocks redefine tokens
 * rather than rules.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. Ejerandels-donut
   ═══════════════════════════════════════════════════════════════════════

   An inline SVG, no library, no JavaScript. The arcs are stroke-dasharray on
   concentric <circle>s, which is the one donut technique that prints, scales
   and survives a page with no JS — a conic-gradient would need a second
   element per segment and would not carry a stroke the way the ring does.

   THE CHART IS NOT THE DATA. The cap table under it is, and it says the same
   thing in words and numbers; the donut is aria-hidden and the
   legend beside it carries the names and percentages as text. That is why
   there is no colour-only encoding here: every segment is also a legend row.
*/
.nt-donut-panel {
  display: grid;
  gap: var(--nt-space-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 40rem) {
  .nt-donut-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.nt-donut {
  display: block;
  width: 11rem;
  height: 11rem;
  margin-inline: auto;
  /* The arcs are drawn clockwise from 12 o'clock; SVG starts at 3. */
  transform: rotate(-90deg);
}

.nt-donut-track {
  fill: none;
  stroke: var(--nt-surface-sunken);
}

.nt-donut-seg {
  fill: none;
  stroke-linecap: butt;
}

/* Six segment colours before the ramp repeats. Drawn from the four status
   families plus two neutrals, deliberately NOT including --nt-red: red means
   overdue in this product (notarium.css:6-11) and a kapitalejer is not an
   alarm. Ordered so the two largest holdings — which is what the eye lands
   on — are the seal and the petrol, the brand's own pair. */
.nt-donut-seg-1 { stroke: var(--nt-c-seal-500); }
.nt-donut-seg-2 { stroke: var(--nt-c-petrol-500); }
.nt-donut-seg-3 { stroke: var(--nt-c-green-500); }
.nt-donut-seg-4 { stroke: var(--nt-c-amber-500); }
.nt-donut-seg-5 { stroke: var(--nt-c-petrol-300); }
.nt-donut-seg-6 { stroke: var(--nt-c-bone-300); }

.nt-donut-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nt-space-2);
  margin: 0;
}

.nt-donut-caption {
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  text-align: center;
}

.nt-legend {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.nt-legend-row {
  display: grid;
  grid-template-columns: 0.65rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--nt-space-3);
  padding-block: var(--nt-space-1);
  border-bottom: 1px solid var(--nt-border-subtle);
}

.nt-legend-row:last-child {
  border-bottom: 0;
}

.nt-legend-swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: var(--nt-radius-full);
  align-self: center;
}

.nt-legend-swatch-1 { background: var(--nt-c-seal-500); }
.nt-legend-swatch-2 { background: var(--nt-c-petrol-500); }
.nt-legend-swatch-3 { background: var(--nt-c-green-500); }
.nt-legend-swatch-4 { background: var(--nt-c-amber-500); }
.nt-legend-swatch-5 { background: var(--nt-c-petrol-300); }
.nt-legend-swatch-6 { background: var(--nt-c-bone-300); }

.nt-legend-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.nt-legend-value {
  font-variant-numeric: tabular-nums;
  color: var(--nt-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. Ledger provenance
   ═══════════════════════════════════════════════════════════════════════ */

/* The "#" column. It is a POSITION in a sorted list, not the entry_number the
   ledger below assigns — two different meanings of "Nr." on one page is how a
   reader ends up quoting row 3 as postering 3. The header carries a title
   explaining the sort, and the cell is quiet enough not to be read as an id. */
.nt-rownum {
  font-variant-numeric: tabular-nums;
  color: var(--nt-text-tertiary);
  font-size: var(--nt-text-xs);
}

th.nt-rownum-head {
  cursor: help;
  text-decoration: underline dotted var(--nt-border);
  text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. Vedtægter: rendered prose and the diff
   ═══════════════════════════════════════════════════════════════════════ */

/* A vedtægtsversion rendered from its own params through the pinned template
   is the TEXT of the bestemmelser, not the signed original — the signatures
   live on the document version in the vault. The signature block is therefore
   suppressed here rather than rendered with empty lines under "Som dirigent:",
   which would read as a document nobody signed. */
.nt-vedt-render .doc-signature-block {
  display: none;
}

.nt-vedt-panel {
  padding-block: var(--nt-space-2);
}

/* A minimal line diff: one <ins>/<del> per changed line, no intra-line
   highlighting. Vedtægter are numbered clauses, so a whole clause reading as
   added or removed is both truthful and the way a jurist reads a redline. */
.nt-diff {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--nt-font-serif, Georgia, serif);
  font-size: var(--nt-text-sm);
  line-height: 1.6;
}

.nt-diff-line {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--nt-space-2);
  padding: 0.15rem var(--nt-space-2);
  border-radius: var(--nt-radius-xs);
}

.nt-diff-mark {
  font-family: var(--nt-font-mono, monospace);
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  user-select: none;
}

.nt-diff-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nt-diff-added {
  background: var(--nt-ok-tint);
  color: var(--nt-ok-text);
}

.nt-diff-removed {
  background: var(--nt-warn-tint);
  color: var(--nt-warn-text);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
}

.nt-diff-context {
  color: var(--nt-text-secondary);
}

/* A run of unchanged clauses collapses to one quiet line rather than
   reproducing the whole vedtægtssæt around a single changed §. */
.nt-diff-gap {
  display: block;
  padding: var(--nt-space-2) var(--nt-space-2) var(--nt-space-2) 2rem;
  font-family: var(--nt-font-mono, monospace);
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  border-top: 1px dashed var(--nt-border-subtle);
  border-bottom: 1px dashed var(--nt-border-subtle);
  margin-block: var(--nt-space-2);
}

.nt-diff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-4);
  margin-bottom: var(--nt-space-4);
  font-size: var(--nt-text-xs);
  color: var(--nt-text-secondary);
}

.nt-diff-legend span::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--nt-radius-xs);
  margin-right: var(--nt-space-2);
  vertical-align: baseline;
}

.nt-diff-legend .is-added::before { background: var(--nt-ok); }
.nt-diff-legend .is-removed::before { background: var(--nt-warn); }

/* ═══════════════════════════════════════════════════════════════════════
   4. CVR-diff (Opdater fra CVR)
   ═══════════════════════════════════════════════════════════════════════

   Three columns — felt, sådan står det hos os, sådan står det i CVR — so the
   customer approves a CHANGE rather than a button. Rows that do not differ are
   not rendered at all; a diff that lists forty identical fields hides the two
   that moved.
*/
.nt-cvr-diff-old {
  color: var(--nt-text-tertiary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
}

.nt-cvr-diff-new {
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. Vault grouping
   ═══════════════════════════════════════════════════════════════════════

   Documents produced by one legal event belong together — "Dokumenter fra den
   ordinære generalforsamling 2026" is how a customer looks for a referat, not
   "sorteret efter dato". The group head is a sticky-free, quiet band so a page
   of eight groups still reads as one list.
*/
.nt-doc-group + .nt-doc-group {
  border-top: 1px solid var(--nt-border-subtle);
}

.nt-doc-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nt-space-3);
  padding: var(--nt-space-3) var(--nt-space-5);
  background: var(--nt-surface-sunken);
  border-bottom: 1px solid var(--nt-border-subtle);
}

.nt-doc-group-title {
  font-family: var(--nt-font-display, Georgia, serif);
  font-size: var(--nt-text-sm);
  font-weight: 600;
  margin: 0;
  min-width: 0;
}

.nt-doc-group-meta {
  font-size: var(--nt-text-xs);
  color: var(--nt-text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The kind sub-heading INSIDE a group. Quieter than the group head by a full
   step, because the kind is a refinement of the event, not a peer of it. */
.nt-doc-kind-head {
  padding: var(--nt-space-3) var(--nt-space-5) 0;
  font-family: var(--nt-font-mono, monospace);
  font-size: var(--nt-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nt-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════
   6. Intent catalog categories — GONE, deliberately.

   The catalog used to be one <section> per pack category with a heading and a
   rule; with seven intents and six categories that was a page made of
   headings, five of them over a single row. The category now rides on the row
   itself as a `.nt-chip` (notarium.css §26d, .nt-intent-tag), which also
   removes the `:has()` rule that had to hide a heading whose group the filter
   had emptied. One piece of state, and now no furniture to keep in sync.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   7. Disclosure
   ═══════════════════════════════════════════════════════════════════════

   A <details> that reads as a control rather than as browser furniture. Used
   for the vedtægter panels — "Læs versionen", "Se ændringer" — where the body
   is a lazily fetched turbo-frame and the marker is the only affordance saying
   there is something behind it.

   Deliberately a real <details>: the frame inside must not load until it is
   visible, and `loading="lazy"` gets that for free from the element's own
   display:none. A JS accordion would have to reimplement it.
*/
.nt-details {
  border-top: 1px solid var(--nt-border-subtle);
  margin-top: var(--nt-space-4);
  padding-top: var(--nt-space-3);
}

.nt-details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--nt-space-2);
}

.nt-details > summary::-webkit-details-marker {
  display: none;
}

.nt-details > summary::before {
  content: "▸";
  font-size: 0.8em;
  color: var(--nt-text-tertiary);
  transition: transform var(--nt-duration-fast, 120ms) var(--nt-ease, ease);
}

.nt-details[open] > summary::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .nt-details > summary::before { transition: none; }
}

/* Ledelse on stamdata. Organ labels only render when the selskab has more
   than one organ — a one-director ApS does not need "Direktion" above the
   only table on the card. */
.nt-ledelse-organ {
  padding: 0.7rem 1.1rem 0.2rem;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nt-text-tertiary);
}

.nt-ledelse .nt-details {
  margin-top: 0;
  padding: 0.7rem 1.1rem 1rem;
}