/* ============================================================================
   Ledgerline — assets/ledgerline.css
   Design tokens follow the shadcn/ui convention: every colour is a bare HSL
   triplet in a custom property, consumed by Tailwind as `hsl(var(--token))`.
   Light is warm paper + ledger ink + one pen-yellow accent. Dark inverts it.
   Tailwind's CDN build injects its preflight *after* this file, so anything in
   here that competes with an element-level Tailwind reset is deliberately a
   class, not a bare element rule (except body, which wins on specificity).
   ========================================================================= */

:root {
  --background: 42 30% 96%;          /* warm paper */
  --foreground: 152 16% 11%;         /* ledger ink */
  --card: 40 44% 99%;
  --card-foreground: 152 16% 11%;
  --popover: 40 44% 99%;
  --popover-foreground: 152 16% 11%;
  --primary: 152 46% 23%;            /* the green of a bank stamp */
  --primary-foreground: 42 45% 96%;
  --secondary: 44 24% 91%;
  --secondary-foreground: 152 16% 16%;
  --muted: 44 22% 91%;
  --muted-foreground: 152 8% 40%;
  --accent: 47 92% 58%;              /* pen-yellow, used like an underline */
  --accent-foreground: 152 40% 12%;
  --destructive: 3 68% 45%;
  --destructive-foreground: 0 0% 100%;
  --border: 44 16% 84%;
  --input: 44 16% 82%;
  --ring: 152 46% 23%;
  --radius: 0.875rem;
}

.dark {
  --background: 155 16% 8%;
  --foreground: 45 26% 94%;
  --card: 154 14% 11%;
  --card-foreground: 45 26% 94%;
  --popover: 154 14% 11%;
  --popover-foreground: 45 26% 94%;
  --primary: 152 42% 62%;
  --primary-foreground: 155 30% 9%;
  --secondary: 154 12% 16%;
  --secondary-foreground: 45 24% 92%;
  --muted: 154 12% 16%;
  --muted-foreground: 150 9% 66%;
  --accent: 47 92% 58%;
  --accent-foreground: 155 30% 9%;
  --destructive: 3 62% 58%;
  --destructive-foreground: 155 30% 9%;
  --border: 154 12% 20%;
  --input: 154 12% 22%;
  --ring: 152 42% 62%;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: hsl(var(--accent) / 0.4);
  color: hsl(var(--foreground));
}

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- helpers used by the page -------------------------------------------- */

/* faint ruled ledger, for the hero and the closing band */
.ledger-paper {
  background-image:
    linear-gradient(hsl(var(--border) / 0.55) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / 0.38) 1px, transparent 1px);
  background-size: 100% 2.25rem, 2.25rem 100%;
  background-position: 0 -1px, -1px 0;
}

.ledger-glow {
  background-image: radial-gradient(
    62% 58% at 50% 0%,
    hsl(var(--primary) / 0.18),
    transparent 72%
  );
}

/* shadcn accordion motion, done with the grid-rows trick so the panel is
   measurable without JS height math */
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.acc-panel[data-open="true"] { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }

.tree { scrollbar-width: thin; }