/*
 * Statsdiffen — design tokens & system.
 *
 * Subject: Sweden's register of regleringsbrev (appropriation directions)
 * and ändringsbeslut (amendments), sourced from statskontoret.se's own
 * "Statsliggaren" ("the state's ledger") — the whole visual system is
 * built from that name: rows read
 * like ledger entries (hairline rules, not cards), every domain code (RBID,
 * diarienummer, decision number, anslag number) is set in mono so it reads
 * as data against the surrounding prose, and an amendment's changed figures
 * are underlined in redline - literally the site's own <u> change markers,
 * rendered the way an editor would mark up a paper document by hand.
 */

:root {
  --ink: #16233a;
  --ink-soft: #3f4c60;
  --paper: #eef1f2;
  --surface: #ffffff;
  --rule: #b7c3cc;
  --rule-soft: #d8dfe3;
  --seal: #c08a28;
  --seal-ink: #5c3f0f;
  --redline: #a6392b;
  --diff-add: #3f6e52;
  --paper-document: #faf8f3;

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The index is the register - a ledger you scan, so the graph-paper grid
   fits the whole page. An individual regleringsbrev is the document
   itself, meant to be read at length: rather than override the page
   background, .document-paper (below) lays a near-white sheet on top of
   it, narrower than the ledger grid behind it - the grid stays visible to
   either side, as if the document were a physical page sitting on the
   register it came from. */
.document-paper {
  max-width: 880px;
  margin: 0 auto 3rem;
  padding: 2.5rem 3rem 3rem;
  background: var(--paper-document);
  box-shadow: 0 1px 3px rgba(22, 35, 58, 0.12), 0 12px 32px rgba(22, 35, 58, 0.08);
}

@media (max-width: 640px) {
  .document-paper {
    padding: 1.75rem 1.25rem 2rem;
  }
}

/* A document's own sections nest up to 4 deep (VERKSAMHET / 1 / Mål och
   återrapporteringskrav / Kostnader för ...), rendered one level below the
   page's <h1> - i.e. h2 through h5 all appear on a real page and need a
   legible, decreasing scale, not just h1-h4. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 1.6em 0 0.5em;
}

h1 {
  font-size: 2rem;
  margin-top: 0;
}

h2 {
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

h3 {
  font-size: 1.1rem;
}

h4, h5, h6 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-style: italic;
}

/* Adjacent headings (e.g. a bare clause number "3" immediately followed by
   its title "Uppdrag") read as one unit, not two separate blocks. */
h1 + :is(h2, h3, h4, h5, h6),
h2 + :is(h2, h3, h4, h5, h6),
h3 + :is(h3, h4, h5, h6),
h4 + :is(h4, h5, h6) {
  margin-top: 0.2em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--seal-ink);
  text-decoration-color: var(--seal);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--redline);
  text-decoration-color: var(--redline);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

/* Every domain identifier - RBID, diarienummer, decision numbers, dates,
   anslag codes - is set in mono, everywhere in the app. This is the one
   consistent signal that separates "data" from "prose" on the page. */
.code,
.ledger-code,
dd.code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: -0.01em;
}

/* A section's official number ("4.1", "1:9") sits at the front of its
   heading. Mono for the same reason as every other domain identifier
   above, and dimmed so the heading still reads as a title first and a
   reference second. */
.section-number {
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Site header ---------- */

.site-header {
  background: var(--ink);
  border-bottom: 3px solid var(--seal);
}

/* The brand no longer owns the header's width - the inner wrapper does, so
   the nav can sit on the same rule as the wordmark rather than in a second
   bar. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1220px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--paper);
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: 1.25rem;
}

.site-nav__link {
  color: var(--paper);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding-bottom: 0.2rem;
  /* A transparent border in the resting state so the current-page rule adds
     no height when it appears. */
  border-bottom: 2px solid transparent;
  opacity: 0.75;
}

.site-nav__link:hover {
  opacity: 1;
}

/* The seal underline is the same mark the header itself carries, so "you are
   here" reads as part of the masthead rather than as a new device. */
.site-nav__link[aria-current] {
  opacity: 1;
  border-bottom-color: var(--seal);
}

.site-header__mark {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--seal);
  border: 1px solid var(--seal);
  border-radius: 50%;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-header__wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper);
}

.site-header__wordmark small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #9fb0c2;
  margin-top: 0.15rem;
}

.site-main {
  max-width: 1220px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* The ledger table in particular has enough columns to want the room - on
   a genuinely large monitor, capping it at 1220px left most of the
   screen empty either side while the table itself still needed a
   scrollbar. */
@media (min-width: 1600px) {
  .site-main {
    max-width: 1520px;
  }
}

/* ---------- Filters (card-catalog tabs, not a boxed form) ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1.25rem;
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.filters__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.filters__actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.filters label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.filters select,
.filters input[type="text"],
.multiselect__trigger {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.4rem 0.6rem;
  max-width: 100%;
}

.multiselect__trigger {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* padding-right alone doesn't move the arrow - a native <select> (appearance:
   auto) draws its own arrow glyph in a fixed slot at the box's edge that
   ignores content padding entirely; only the option text shifts. Turning
   appearance off and drawing our own arrow (an inset SVG chevron) is the
   only way to actually give it breathing room - and lets the Myndighet
   combobox's plain text input, and the Budgetår multiselect's trigger
   button, wear the exact same arrow, so they still read as dropdowns
   despite neither being a real <select> underneath. */
.filters select,
.combobox input[type="text"],
.multiselect__trigger {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0L10 0L5 6Z' fill='%233f4c60'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 10px 6px;
}

/* Anchors the option list under the input/trigger; a plain <ul>/<div>
   otherwise flows in document layout and would push everything below it
   down the page. */
.combobox,
.multiselect {
  position: relative;
}

.combobox__list,
.multiselect__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 4px 12px rgba(22, 35, 58, 0.15);
}

/* The combobox (Myndighet) can safely match its own input's width - it's
   already one of the wider fields. Budgetår is one of the narrowest
   (just "2026"), so pinning the list to that same width the same way
   cramped every row; let it be its own comfortable width instead,
   independent of the trigger button underneath it. */
.combobox__list {
  right: 0;
}

.multiselect__list {
  min-width: 10rem;
}

.combobox__list li {
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-soft);
}

.combobox__list li:last-child {
  border-bottom: none;
}

.combobox__list li.combobox__option--blank {
  font-style: italic;
  color: var(--ink-soft);
}

.combobox__list li:hover,
.combobox__list li.combobox__option--active {
  background: var(--paper);
  color: var(--seal-ink);
}

/* Checkboxes, not <li> rows you click anywhere on - several need to stay
   ticked at once here (unlike the Myndighet combobox, which picks one and
   closes), so each option needs its own explicit, independently toggled
   control rather than a single click-to-select row. */
.multiselect__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-soft);
}

.multiselect__option:last-child {
  border-bottom: none;
}

.multiselect__option:hover {
  background: var(--paper);
}

@media (max-width: 640px) {
  .filters__field {
    width: 100%;
  }

  .filters select,
  .filters input[type="text"] {
    width: 100%;
  }
}

.filters input[type="submit"] {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.filters input[type="submit"]:hover {
  background: var(--seal-ink);
  border-color: var(--seal-ink);
}

.filters a {
  align-self: center;
  font-size: 0.85rem;
}

/* ---------- Ledger table (the index) ---------- */

.table-scroll,
.table-scroll-top {
  overflow-x: auto;
  /* A visible, always-on scrollbar rather than an overlay one that only
     appears on hover/scroll and is easy to miss entirely - if the table is
     wider than its box, that has to be obvious, not just technically true.
     --rule (a muted steel-grey), not --seal - now that there are two of
     these (one always visible above the table, not just the one you'd
     scroll into at the bottom), the gold read as a second call-to-action
     competing with the real ones rather than plumbing. */
  scrollbar-width: auto;
  scrollbar-color: var(--rule) var(--paper);
}

.table-scroll {
  margin: 1rem 0;
}

.table-scroll::-webkit-scrollbar,
.table-scroll-top::-webkit-scrollbar {
  height: 12px;
}

.table-scroll::-webkit-scrollbar-track,
.table-scroll-top::-webkit-scrollbar-track {
  background: var(--paper);
}

.table-scroll::-webkit-scrollbar-thumb,
.table-scroll-top::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 6px;
  border: 2px solid var(--paper);
}

/* The table's own horizontal scrollbar sits at its bottom edge - only
   reachable after scrolling down past every row, which makes a long
   table's sideways scroll hard to even discover. This mirrors it above
   the table instead: overflow-y hidden keeps it to a scrollbar-height
   strip, and the inner spacer (width set to match the table's own
   scrollWidth by the sync-scroll controller) is what actually gives the
   scrollbar something to scroll. */
.table-scroll-top {
  overflow-y: hidden;
  height: 14px;
  margin-top: 1rem;
}

.table-scroll-top > div {
  height: 1px;
}

/* Swedish compounds run long - "Arbetsmarknadsdepartementet",
   "MERVÄRDESSKATTEKOSTNADER" - and a word with nowhere to break does not
   wrap, it overflows its container. On a phone that is most of the width
   of the screen. overflow-wrap is inherited, so declaring it once here
   covers every descendant; break-word only kicks in when the word genuinely
   cannot fit, so ordinary prose is untouched.

   Deliberately not `body { overflow-x: hidden }`, the usual reflex for this
   symptom: that hides overflow rather than preventing it, so the layout is
   still broken and simply clipped, and it silently breaks position: sticky
   on every descendant. */
body {
  overflow-wrap: break-word;
}

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--surface);
}

/* Only the index's ledger needs a floor: nine columns that must not
   collapse into unreadable slivers, so it scrolls on anything narrow. A
   document-body table is wrapped in the same scroll container but sets no
   minimum - most are two or three columns and fit a phone perfectly well,
   and forcing them to scroll would be worse than letting them be narrow. */
.table-scroll--ledger table {
  min-width: 860px;
}

.table-scroll table {
  margin: 0;
}

th, td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: middle;
}

/* The anslag summary is allowed to wrap over several lines - it's the one
   piece of information on this row that isn't available anywhere else. */
.ledger-anslag {
  min-width: 11rem;
  white-space: normal;
  line-height: 1.4;
}

/* The whole row is a click target (see the row-link Stimulus controller)
   for sighted mouse use; a real link still sits in the row too (just
   visually hidden, in the year cell - see _regleringsbrev_table.html.erb)
   so copy-link, ctrl/cmd-click, and keyboard nav all still work. */
.ledger-row {
  cursor: pointer;
}

thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 500;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}

/* A couple of headers are long enough that forcing them onto one line
   inflates their whole column's width unnecessarily. */
thead th.wrap-header {
  white-space: normal;
  min-width: 7rem;
  line-height: 1.3;
}

thead th a {
  color: inherit;
  text-decoration: none;
}

thead th a:hover {
  color: var(--redline);
}

tbody tr:hover {
  background: var(--paper);
}

/* RBID reads as a ledger account number: mono, dim. */
td.code {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* The row's own left margin rule, on whichever column leads the row. */
.ledger-row-accent {
  border-left: 2px solid var(--rule);
}

tbody tr:hover .ledger-row-accent {
  border-left-color: var(--seal);
}

/* Year reads as a bookkeeping figure: mono, right-aligned, tabular. */
.ledger-year {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

[class^="ledger-type--"] {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ledger-type--regleringsbrev {
  color: var(--ink-soft);
}

.ledger-type--anslag {
  color: var(--seal-ink);
}

/* Myndighet is blank (a dash) for a department-level Anslag letter - dim it
   so the eye doesn't read it as a missing/broken value. */
.ledger-dash {
  color: var(--rule);
}

/* "Ändringsbeslut ingår: Ja" gets the same redline used for amendment
   tracking everywhere else on the page. */
.ledger-amended {
  color: var(--redline);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* ---------- Document show page ---------- */

.document-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

.document-eyebrow .tag--andringsbeslut {
  color: var(--redline);
  border: 1px solid var(--redline);
  border-radius: 2px;
  padding: 0.05em 0.4em;
  margin-left: 0.4em;
}

/* minmax(0, ...) on both tracks, not a bare max-content/1fr pair: a grid
   track sized to max-content never shrinks, and a grid item defaults to
   min-width: auto so it refuses to go below its own content width. Together
   that meant the metadata list kept its full desktop width on a narrow
   phone and pushed its values off the right edge instead of wrapping. The
   same trap as .change-list below. */
dl {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 400;
  padding-top: 0.15rem;
}

dd {
  margin-left: 0;
  font-size: 0.95rem;
}

dd.code {
  font-size: 0.9rem;
}

.section-text {
  white-space: pre-line;
}

/* Financial/appropriation tables within a document's own sections: this is
   ledger data end to end (anslag codes, amounts), so every cell is mono
   rather than picking out individual columns. */
/* The body-wide overflow-wrap: break-word is right for prose and wrong
   inside a table: it lets a column shrink to one character wide instead of
   letting the table grow and scroll. Tables have a scroll container for
   exactly this, so they should use it. */
.data-table th,
.data-table td {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  overflow-wrap: normal;
}

.data-table th {
  background: var(--paper);
  font-weight: 500;
}

/* A ramanslag's "Disponeras av X" divider and its per-anslagpost rows are
   really one visual table, but the source splits them across several
   sibling <table>s - a myndighet-total row, then a top-level "ap" row per
   anslagpost, then (for any with sub-items) a differently-classed "dp" row
   per sub-item, indented one level. Each gets its own auto-sized columns
   left alone, so the name column starts at a different x per table and the
   amounts trail raggedly rather than lining up - fix both by giving every
   member of the family the same fixed code/amount column widths (the name
   column simply fills what's left) and right-aligning the amount, the
   standard ledger convention for a column of figures. */
.data-table.table-anslagtilldelade-anslagspost-ap,
.data-table.table-anslagtilldelade-anslagspost-dp,
.data-table.table-anslagtilldelade-myndighet {
  table-layout: fixed;
  /* The two fixed columns below come to 19rem between them. Without a floor
     the name column gets whatever is left, which on a phone is about 3rem -
     the anslag's name then wrapped to roughly one letter per line. A minimum
     lets .table-scroll do its job instead: the family keeps the shared
     column widths that make sibling tables line up as one ledger, and
     scrolls sideways when the screen is too narrow for them. */
  min-width: 34rem;
}

.data-table.table-anslagtilldelade-anslagspost-ap td:first-child,
.data-table.table-anslagtilldelade-anslagspost-dp td:first-child {
  width: 6.5rem;
}

.data-table.table-anslagtilldelade-anslagspost-dp td:first-child {
  padding-left: 2rem;
}

.data-table.table-anslagtilldelade-anslagspost-ap td:last-child,
.data-table.table-anslagtilldelade-anslagspost-dp td:last-child,
.data-table.table-anslagtilldelade-myndighet th:last-child {
  width: 12.5rem;
  text-align: right;
}

/* Mirrors the code column's left indent on the other side, so a sub-item's
   amount pulls in from the right by the same amount its code pulls in from
   the left - the source does this too (see the original site's own
   anslagspost-dp CSS). Without it, a sub-item's number lines up flush with
   its parent's despite the row itself reading as indented, which looks
   like the indent stopped applying partway across. */
.data-table.table-anslagtilldelade-anslagspost-dp td:last-child {
  padding-right: 2rem;
}

/* Amendment notice: the redline signature. Rendered like a hand-marked
   correction slip clipped to the document, not a boxed "info" alert. */
.amendment-notice {
  position: relative;
  margin: 1.5rem 0;
  padding: 0.9rem 1.25rem 0.9rem 1.5rem;
  background: var(--surface);
  border-left: 3px solid var(--redline);
}

.amendment-notice::before {
  content: "Ändringsbeslut finns";
  position: absolute;
  top: -0.6rem;
  left: 1.1rem;
  background: var(--redline);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
}

/* The summary now carries two different things - a plain statement (where
   to actually find the changes: marked in place, in the text and tables
   below) and the toggle itself (this dated log is a secondary, folded-away
   view). Only the toggle half reads as a link; the statement stays plain
   so the line doesn't look like the whole sentence is clickable. */
.amendment-notice summary {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.amendment-notice summary::-webkit-details-marker {
  display: none;
}

.amendment-notice .lead-text {
  margin-right: 0.75em;
}

.amendment-notice .show-label,
.amendment-notice .hide-label {
  color: var(--redline);
}

.amendment-notice summary:hover .show-label,
.amendment-notice summary:hover .hide-label {
  text-decoration: underline;
}

.amendment-notice .hide-label {
  display: none;
}

.amendment-notice[open] .show-label {
  display: none;
}

.amendment-notice[open] .hide-label {
  display: inline;
}

/* One entry per decision in the lineage's full history - a running log,
   like successive stamped revisions to a paper file, not just this
   document's own most recent change. */
.amendment-entry {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule-soft);
}

.amendment-notice[open] summary {
  margin-bottom: 0.5rem;
}

.amendment-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 0 0 0.3rem;
}

/* Each changed heading is its own labeled row - the same label/value ledger
   pattern as the document metadata block - rather than a bulleted list, so
   a run of several separate changes reads as distinct entries rather than
   one loosely punctuated paragraph. */
.change-list {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  column-gap: 2.25rem;
  row-gap: 0.4rem;
  margin: 0.6rem 0 0;
}

/* Capped and wrapping, not max-content - a long section heading used to
   force the whole label column wide, squeezing the changed text (the part
   worth reading) into a narrow one. Letting the label itself wrap across
   lines keeps it small and gives the value column the room. */
.change-list dt {
  font-size: 0.78rem;
  padding-top: 0.1rem;
  line-height: 1.3;
  /* A single long compound word (Swedish headings run words together, e.g.
     "MERVÄRDESSKATTEKOSTNADER") can exceed the column width on its own -
     wrapping at spaces alone leaves nowhere to break it, so it spills into
     the value column. Force a mid-word break in that case. */
  overflow-wrap: anywhere;
}

/* min-width: 0 because a grid item defaults to min-width: auto, which
   means it will not shrink below its own min-content width - one long
   value and the 1fr column pushes the whole list past the page's right
   edge instead of wrapping inside it. `anywhere` rather than `break-word`
   because only `anywhere` also shrinks the track's min-content
   contribution, which is what the grid actually measures. */
.change-list dd {
  margin-left: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Plain ink, not a diff color - a heavily colored/underlined value here
   read as noise rather than emphasis (it's a summary entry, not the
   in-place track-changes marking used inline in the document body, which
   stays red/green - see del.diff-old / ins.diff-new below). */
.change-list .changed-value {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Inline table diff: a changed cell shows what it replaced (struck through,
   red) immediately followed by the current value (green) - track changes,
   in place, rather than a separate list disconnected from the number it
   describes. */
del.diff-old {
  color: var(--redline);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: 0.75;
}

ins.diff-new {
  color: var(--diff-add);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
  font-weight: 500;
}

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

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 1rem 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.pagination__status {
  color: var(--ink-soft);
}

.pagination__disabled {
  color: var(--rule);
}

/* ---------- Document closing: signatures & Kopia till ---------- */

.document-closing {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.document-closing h2:first-child {
  margin-top: 0;
}

.closing-officer {
  display: block;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* A "Kopia till" list often runs 20-30 names long; a single vertical list
   that long is a lot of scanning, so it flows into newspaper-style columns
   instead - the recipient's own name stays the only structure needed. */
.copy-recipients {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}

.copy-recipients li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--rule-soft);
  break-inside: avoid;
}

@media (max-width: 640px) {
  .copy-recipients {
    columns: 1;
  }
}

/* --- Anslag series chart (see docs/roadmap.md B3) -------------------------
   One quantitative series, so one hue. --chart-series is its own token
   rather than a reuse of an existing one: --redline already means "this was
   amended" and --diff-add means "this was added", and borrowing either for
   a neutral column would make the chart claim something it doesn't mean.
   Validated against the document surface (#faf8f3) - lightness band, chroma
   floor and contrast all pass, and it separates from --redline well past the
   CVD threshold, which matters because the two appear on the page together. */
:root {
  --chart-series: #1f6f9c;
}

.anslag-chart {
  margin: 2rem 0 2.5rem;
}

.anslag-chart figcaption {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.anslag-chart__svg {
  /* Scales down with the container but never below the width at which the
     year labels would collide; .table-scroll handles the overflow. */
  min-width: 560px;
  max-width: 100%;
  height: auto;
  display: block;
}

.anslag-chart__bar {
  fill: var(--chart-series);
}

/* Hairline, solid, one step off the surface - present enough to read a
   value against, recessive enough to stay out of the way. */
.anslag-chart__grid {
  stroke: var(--rule-soft);
  stroke-width: 1;
}

.anslag-chart__baseline {
  stroke: var(--rule);
  stroke-width: 1;
}

.anslag-chart__axis {
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  fill: var(--ink-soft);
}

/* The value labels are text, so they wear a text token rather than the
   series colour - the column beside them already carries the identity. */
.anslag-chart__value {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  fill: var(--ink);
}

.anslag-chart__break {
  stroke: var(--redline);
  stroke-width: 1;
}

.anslag-chart__break-label {
  font-family: var(--font-body);
  font-size: 10px;
  fill: var(--redline);
}

.anslag-table {
  margin-top: 0.5rem;
}

.anslag-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.anslag-row--break td {
  border-top: 1px solid var(--redline);
}

.anslag-break-tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--redline);
  border: 1px solid var(--redline);
  border-radius: 2px;
  padding: 0 0.3rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}

.anslag-notes {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.anslag-notes ul {
  padding-left: 1.1rem;
}

.anslag-notes li {
  margin-bottom: 0.5rem;
}

.anslag-former-names {
  margin: -0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --- Översikt index ------------------------------------------------------ */
.oversikt-lede {
  max-width: 46rem;
  color: var(--ink-soft);
}

.oversikt-group {
  margin: 2.5rem 0;
}

.oversikt-group h2 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}

.oversikt-group__count {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: auto;
}

.oversikt-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A short series and a series with holes in it are different facts, so the
   year range says which it is rather than leaving the reader to assume. */
.oversikt-gap {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-left: 0.4rem;
}

/* An anslag number can be reused for something unrelated after the previous
   occupant is wound up. Naming the predecessor is the difference between a
   row that is merely terse and one that is wrong. */
.oversikt-reused {
  display: block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--ink-soft);
}

/* --- Statens budget: the budget propositions ------------------------------

   A second corpus rather than a second view of the first, so it reuses the
   ledger, the filters and .document-paper wholesale. What is new here is the
   vocabulary that corpus has and the regleringsbrev do not: a parse status per
   document, captioned tables, and the diagrams we cannot draw. */

/* Why a document has no body, in the ledger's Status column. Only the two
   permanent states are tinted - "Ej tolkad" is a to-do and should read as
   neutral, not as a warning. */
.ledger-state--parsed {
  color: var(--diff-add);
}

.ledger-state--unparsable,
.ledger-state--failed {
  color: var(--redline);
}

.ledger-state--superset {
  color: var(--ink-soft);
}

.document-eyebrow .tag--unparsed {
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.05em 0.4em;
  margin-left: 0.4em;
}

/* The budget tables name themselves ("Tabell 3.43 Anslagsutveckling 1:17 ...")
   and state their unit on a line of their own. Both are part of the table, not
   of the prose around it, hence <figure>/<figcaption> rather than a stray
   paragraph that could drift away from what it labels. */
.data-figure {
  margin: 1.5rem 0;
}

.data-figure__caption {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.data-figure__label {
  font-weight: 600;
  color: var(--ink);
  margin-right: 0.35em;
}

.data-figure__unit {
  display: block;
  font-size: 0.74rem;
  font-style: italic;
}

/* A diagram we deliberately do not reproduce. The propositions' charts are
   vector drawings, so extracting them would need a rasteriser on the dyno and
   somewhere to keep thousands of images (see docs/backlog.md).

   Styled as a quiet framed note rather than a broken-image box, because
   nothing is broken: the alt text says what the chart shows and, since the
   chart is vector, its own data labels come out as text - so the reader gets
   the numbers it was drawn from. */
.document-figure {
  margin: 1.5rem 0;
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  background: var(--paper);
  padding: 0.9rem 1.1rem;
}

.document-figure__caption {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.document-figure__label {
  font-weight: 600;
  color: var(--ink);
  margin-right: 0.35em;
}

.document-figure__body {
  border-left: 2px solid var(--rule);
  padding-left: 0.85rem;
}

.document-figure__alt {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
}

.document-figure__values {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
}

.document-figure__source {
  margin: 0.6rem 0 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

/* The Anslagsbelopp summary, lifted to the top of an utgiftsområde page
   because it is what most readers came for. Set apart from the document body
   below it, which repeats the same table in its own place. */
.anslagsbelopp {
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.2rem 0.4rem;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
}

.anslagsbelopp h2 {
  margin-top: 0;
}

.anslagsbelopp__unit {
  font-size: 0.74rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: -0.4rem;
}

/* Amounts are read down the column and compared against each other, so they
   line up on the right and the figures share one width. */
.anslagsbelopp__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.anslagsbelopp tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--rule);
}

/* An unnumbered sub-heading inside a section ("Ändamål", "Skälen för
   regeringens förslag"). Quieter than a numbered section's heading, since it
   is a label within one rather than a division of the document. */
.section-subheading {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 1.2rem 0 0.3rem;
}

/* A table's footnote, which belongs visually to the table above it. */
.section-footnote {
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-top: -0.4rem;
}

.unparsed-notice {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--paper);
  border-left: 3px solid var(--rule);
}

.unparsed-notice h2 {
  margin-top: 0;
}