/*
 * 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;
}

.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);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 1220px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  color: var(--paper);
  text-decoration: none;
}

.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;
}

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

.table-scroll table {
  min-width: 860px;
  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;
}

dl {
  display: grid;
  grid-template-columns: max-content 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. */
.data-table th,
.data-table td {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.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;
}

.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: 7rem 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;
}

.change-list dd {
  margin-left: 0;
}

/* 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;
  }
}