/*
 * Larin manual theme
 *
 * Calm, readable and self-contained.  No remote fonts, scripts or assets.
 * The palette uses forest green and warm brass to echo Larin's local,
 * deliberate and durable character without turning the manual into a toy UI.
 */

:root {
  color-scheme: light dark;

  --larin-bg: #f3f1e9;
  --larin-surface: #fffdf7;
  --larin-surface-raised: #ffffff;
  --larin-text: #1f2924;
  --larin-muted: #68716c;
  --larin-border: #d8d5ca;
  --larin-border-strong: #b9c1ba;
  --larin-primary: #245c45;
  --larin-primary-strong: #174634;
  --larin-primary-soft: #e3eee7;
  --larin-accent: #9b6a22;
  --larin-accent-soft: #f4e6cb;
  --larin-code-bg: #18251f;
  --larin-code-text: #eef7f1;
  --larin-inline-code-bg: #e9ece7;
  --larin-inline-code-text: #174634;
  --larin-selection: #c8dfcf;
  --larin-shadow: 0 1.2rem 3rem rgb(31 41 36 / 0.10);
  --larin-radius: 0.85rem;
  --larin-content-width: 76ch;

  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

@media (prefers-color-scheme: dark) {
  :root {
    --larin-bg: #111813;
    --larin-surface: #18211b;
    --larin-surface-raised: #1d2821;
    --larin-text: #e8eee9;
    --larin-muted: #a5b0a8;
    --larin-border: #344038;
    --larin-border-strong: #4a5a50;
    --larin-primary: #8bc5a1;
    --larin-primary-strong: #b5ddc4;
    --larin-primary-soft: #203a2d;
    --larin-accent: #e0b56e;
    --larin-accent-soft: #46371f;
    --larin-code-bg: #0b110d;
    --larin-code-text: #eef7f1;
    --larin-inline-code-bg: #27342c;
    --larin-inline-code-text: #b5ddc4;
    --larin-selection: #315940;
    --larin-shadow: 0 1.2rem 3rem rgb(0 0 0 / 0.28);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  background: var(--larin-bg);
}

body {
  max-width: var(--larin-content-width);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.25rem) clamp(1rem, 4vw, 2.5rem) 5rem;
  color: var(--larin-text);
  background: var(--larin-surface);
  border-inline: 1px solid var(--larin-border);
  box-shadow: var(--larin-shadow);
  font-size: clamp(1rem, 0.98rem + 0.15vw, 1.08rem);
  line-height: 1.72;
}

::selection {
  color: var(--larin-text);
  background: var(--larin-selection);
}

a {
  color: var(--larin-primary);
  font-weight: 600;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--larin-primary) 55%, transparent);
}

a:hover {
  color: var(--larin-primary-strong);
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--larin-accent) 72%, transparent);
  outline-offset: 0.2rem;
  border-radius: 0.15rem;
}

/* Previous / contents / next navigation. */
.larin-manual-nav {
  position: sticky;
  top: 0.75rem;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 0.58rem 0.72rem;
  background: color-mix(in srgb, var(--larin-surface-raised) 90%, transparent);
  border: 1px solid var(--larin-border);
  border-radius: 999px;
  box-shadow: 0 0.45rem 1.4rem rgb(31 41 36 / 0.10);
  backdrop-filter: blur(12px);
}

.larin-manual-nav a {
  display: block;
  width: fit-content;
  padding: 0.28rem 0.7rem;
  color: var(--larin-text);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

.larin-manual-nav a:hover {
  color: var(--larin-primary-strong);
  background: var(--larin-primary-soft);
}

.larin-manual-nav > :nth-child(2) {
  justify-self: center;
  color: var(--larin-primary-strong);
}

.larin-manual-nav > :last-child {
  justify-self: end;
  text-align: right;
}

/* Document identity / hero. */
#title-block-header {
  position: relative;
  margin: 0 0 2.5rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--larin-primary-soft), transparent 68%),
    var(--larin-surface-raised);
  border: 1px solid var(--larin-border);
  border-radius: calc(var(--larin-radius) * 1.45);
}

#title-block-header::before {
  content: "LARIN";
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.18rem 0.6rem;
  color: var(--larin-primary-strong);
  background: var(--larin-primary-soft);
  border: 1px solid color-mix(in srgb, var(--larin-primary) 35%, transparent);
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

#title-block-header::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -4.5rem;
  width: 13rem;
  height: 13rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--larin-accent) 22%, transparent), transparent 68%);
  pointer-events: none;
}

#title-block-header .title {
  max-width: 20ch;
  margin: 0;
  color: var(--larin-primary-strong);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  font-size: clamp(2.05rem, 7vw, 4rem);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

#title-block-header .subtitle {
  max-width: 48ch;
  margin: 1rem 0 0;
  color: var(--larin-muted);
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  line-height: 1.45;
}

#title-block-header .author {
  margin: 1.2rem 0 0;
  color: var(--larin-accent);
  font-weight: 700;
}

#title-block-header .date {
  display: none;
}

/* Local table of contents. */
#TOC {
  margin: 0 0 3rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: color-mix(in srgb, var(--larin-primary-soft) 65%, var(--larin-surface));
  border: 1px solid color-mix(in srgb, var(--larin-primary) 30%, var(--larin-border));
  border-left: 0.34rem solid var(--larin-primary);
  border-radius: var(--larin-radius);
}

#TOC::before {
  content: "På den här sidan";
  display: block;
  margin-bottom: 0.55rem;
  color: var(--larin-primary-strong);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#TOC ul {
  margin: 0;
  padding-left: 1.2rem;
}

#TOC li {
  margin: 0.25rem 0;
}

#TOC a {
  font-weight: 600;
  text-decoration: none;
}

/* Typography. Pandoc emits level-one headings for Org's top-level sections. */
h1,
h2,
h3,
h4 {
  color: var(--larin-primary-strong);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  line-height: 1.18;
  text-wrap: balance;
}

body > h1 {
  margin: 3.35rem 0 1rem;
  padding-top: 0.15rem;
  font-size: clamp(1.65rem, 4vw, 2.3rem);
  letter-spacing: -0.025em;
}

body > h1::after {
  content: "";
  display: block;
  width: 3.4rem;
  height: 0.18rem;
  margin-top: 0.65rem;
  background: linear-gradient(90deg, var(--larin-accent), transparent);
  border-radius: 999px;
}

h2 {
  margin: 2.6rem 0 0.8rem;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
}

h3 {
  margin: 2rem 0 0.65rem;
  font-size: 1.22rem;
}

h4 {
  margin: 1.7rem 0 0.55rem;
  font-size: 1.08rem;
}

p,
ul,
ol,
dl,
blockquote,
pre,
table {
  margin-block: 0 1.15rem;
}

ul,
ol {
  padding-left: 1.5rem;
}

li {
  margin: 0.28rem 0;
}

li::marker {
  color: var(--larin-accent);
  font-weight: 700;
}

strong {
  color: color-mix(in srgb, var(--larin-text) 80%, var(--larin-primary));
}

hr {
  height: 1px;
  margin: 3rem 0;
  background: linear-gradient(90deg, transparent, var(--larin-border-strong), transparent);
  border: 0;
}

blockquote {
  position: relative;
  margin-inline: 0;
  padding: 1rem 1.25rem 1rem 1.45rem;
  color: color-mix(in srgb, var(--larin-text) 88%, var(--larin-primary));
  background: var(--larin-accent-soft);
  border-left: 0.35rem solid var(--larin-accent);
  border-radius: 0 var(--larin-radius) var(--larin-radius) 0;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  font-size: 1.08em;
}

blockquote > :last-child {
  margin-bottom: 0;
}

/* Code and terminal examples. */
code,
kbd,
samp,
pre {
  font-family: "Iosevka Term", "Cascadia Code", "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;
}

:not(pre) > code {
  padding: 0.12em 0.34em;
  color: var(--larin-inline-code-text);
  background: var(--larin-inline-code-bg);
  border: 1px solid color-mix(in srgb, var(--larin-primary) 18%, transparent);
  border-radius: 0.32rem;
  font-size: 0.9em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

pre {
  position: relative;
  max-width: 100%;
  padding: 1.15rem 1.3rem;
  overflow-x: auto;
  color: var(--larin-code-text);
  background: var(--larin-code-bg);
  border: 1px solid color-mix(in srgb, var(--larin-primary) 28%, #000);
  border-radius: var(--larin-radius);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.05);
  font-size: 0.9em;
  line-height: 1.55;
  tab-size: 4;
}

pre code {
  color: inherit;
  background: transparent;
  border: 0;
  font-size: inherit;
}

pre.example::before {
  content: "EXEMPEL";
  display: block;
  margin-bottom: 0.7rem;
  color: var(--larin-accent);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

div.sourceCode {
  max-width: 100%;
  margin: 0 0 1.15rem;
  overflow: hidden;
  border-radius: var(--larin-radius);
}

div.sourceCode pre {
  margin: 0;
}

/* Pandoc's default syntax colours target a white background.  The manual
   deliberately uses a dark terminal-like code surface in both colour modes. */
code span.al,
code span.er { color: #ff8f8f; font-weight: 700; }
code span.an,
code span.co,
code span.cv,
code span.do,
code span.in,
code span.wa { color: #9cafa5; font-style: italic; }
code span.at,
code span.cn,
code span.dv,
code span.fl { color: #e5bd72; }
code span.bn,
code span.ch,
code span.sc { color: #dda0dd; }
code span.bu,
code span.cf,
code span.im,
code span.kw,
code span.pp { color: #93d5a8; font-weight: 700; }
code span.dt,
code span.fu { color: #82c8e5; }
code span.op { color: #cad4ce; }
code span.ot,
code span.ss,
code span.st,
code span.va,
code span.vs { color: #b9d69f; }

figure {
  margin: 2rem 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
  border-radius: var(--larin-radius);
}

figcaption {
  margin-top: 0.55rem;
  color: var(--larin-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Tables remain readable on narrow screens. */
table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-spacing: 0;
  border-collapse: separate;
  border: 1px solid var(--larin-border);
  border-radius: var(--larin-radius);
  background: var(--larin-surface-raised);
}

th,
td {
  padding: 0.58rem 0.78rem;
  border-right: 1px solid var(--larin-border);
  border-bottom: 1px solid var(--larin-border);
  text-align: left;
  vertical-align: top;
}

th:last-child,
td:last-child {
  border-right: 0;
}

tbody tr:last-child td {
  border-bottom: 0;
}

th {
  color: var(--larin-primary-strong);
  background: var(--larin-primary-soft);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.015em;
}

tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--larin-primary-soft) 28%, transparent);
}

/* Definition lists and footnotes. */
dt {
  margin-top: 1rem;
  color: var(--larin-primary-strong);
  font-weight: 800;
}

dd {
  margin-left: 1.25rem;
}

.footnotes {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--larin-border);
  color: var(--larin-muted);
  font-size: 0.92rem;
}

/* Responsive adjustments. */
@media (max-width: 42rem) {
  body {
    padding-inline: 1rem;
    border-inline: 0;
  }

  .larin-manual-nav {
    top: 0.35rem;
    gap: 0.25rem;
    padding-inline: 0.35rem;
    font-size: 0.86rem;
  }

  .larin-manual-nav a {
    padding-inline: 0.42rem;
  }

  #title-block-header {
    padding: 1.35rem;
  }

  #TOC {
    padding-inline: 1rem;
  }
}

/* A clean paper/manual rendering. */
@media print {
  :root {
    color-scheme: light;
    --larin-bg: #fff;
    --larin-surface: #fff;
    --larin-surface-raised: #fff;
    --larin-text: #111;
    --larin-muted: #444;
    --larin-border: #bbb;
    --larin-border-strong: #777;
    --larin-primary: #184b36;
    --larin-primary-strong: #123b2b;
    --larin-primary-soft: #eef4f0;
    --larin-accent: #80571b;
    --larin-accent-soft: #f7eedf;
    --larin-code-bg: #f5f5f5;
    --larin-code-text: #111;
    --larin-inline-code-bg: #f0f0f0;
    --larin-inline-code-text: #111;
  }

  html,
  body {
    background: #fff;
  }

  body {
    max-width: none;
    padding: 0;
    border: 0;
    box-shadow: none;
    font-size: 10.5pt;
  }

  .larin-manual-nav {
    display: none;
  }

  #title-block-header,
  #TOC,
  blockquote,
  pre,
  table {
    break-inside: avoid;
    box-shadow: none;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.82em;
    font-weight: 400;
    overflow-wrap: anywhere;
  }
}