/* ============================================================
   $CURE — paper
   ------------------------------------------------------------
   The design system: colour, type, and the four sketch
   primitives every component is built from.

   The look is a whiteboard drawing — ink outlines on warm
   paper, one teal accent, nothing filled that a marker
   wouldn't fill. Two rules keep it coherent:

     1. Every box is a 2px ink outline with four slightly
        different corners. That asymmetry IS the hand-drawn
        feel — it has to stay small, or the edges bow.
     2. Teal is for the product and for money moving. It is
        never decoration.

   Deliberately light-only. The artwork is line-on-white and a
   dark inversion would turn the doctor into a photo negative.
   ============================================================ */

:root {
  /* ---- ink ---- */
  --ink: #16181a;
  --ink-2: #4a5257;
  --ink-3: #838d93;
  --ink-line: #16181a;
  --ink-line-soft: #c9cfd2;

  /* ---- paper ---- */
  --paper: #fdfcf7;
  --paper-2: #ffffff;
  --paper-3: #f4f2ea;
  --paper-sunk: #faf8f1;

  /* ---- teal: the product, and money moving ---- */
  --teal: #00857c;
  --teal-deep: #006158;
  --teal-lift: #17a597;
  --teal-wash: #e4f2f0;
  --teal-ink: #ffffff;

  /* ---- signal ---- */
  --up: #0f7b53;
  --down: #b8402f;
  --warn: #b07a12;

  /* ---- type ---- */
  --hand: "Kalam", "Comic Sans MS", "Segoe Print", cursive;
  --print: "Architects Daughter", "Kalam", "Comic Sans MS", cursive;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Consolas", monospace;

  /* ---- geometry ---- */
  --gap: 18px;
  --pad: 22px;
  --rail: 1240px;
  --line: 2px;

  /* The reference is line art: thin ink outlines, no heavy furniture. Panels
     get a whisper of offset so they lift off the paper; only the buttons —
     the things you are meant to press — get a solid drawn shadow. */
  --lift: 3px 4px 0 rgba(22, 24, 26, 0.07);
  --lift-sm: 2px 3px 0 rgba(22, 24, 26, 0.85);
  --lift-teal: 2px 3px 0 var(--teal-deep);
}

/* ============================================================
   Reset
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--print);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  /* Faint ruled paper. Two gradients, no image request. */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(0, 133, 124, 0.045), transparent 45%),
    radial-gradient(circle at 84% 8%, rgba(0, 133, 124, 0.035), transparent 40%);
  background-attachment: fixed;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

button,
input {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--hand);
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ============================================================
   Sketch primitive 1 — the box
   ------------------------------------------------------------
   Four slightly different corner radii per box, and a different
   set per variant, so no two frames read as stamped from the
   same template.

   The values are deliberately SMALL. A large asymmetric radius
   bows the straight edge between two corners, and a bowed edge
   on a 1200px panel looks warped rather than hand-drawn.
   ============================================================ */
.sketch {
  background: var(--paper-2);
  border: var(--line) solid var(--ink-line);
  border-radius: 13px 9px 15px 10px / 10px 15px 9px 13px;
  box-shadow: var(--lift);
}

.sketch--b {
  border-radius: 9px 14px 10px 16px / 15px 10px 14px 9px;
}
.sketch--c {
  border-radius: 15px 10px 9px 14px / 9px 14px 15px 10px;
}
/* Calmest of all, for anything holding a table or a wide row. */
.sketch--flat {
  border-radius: 11px 8px 12px 9px / 9px 12px 8px 11px;
}

/* ============================================================
   Sketch primitive 2 — the button
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.02rem;
  background: var(--paper-2);
  border: var(--line) solid var(--ink-line);
  border-radius: 11px 8px 12px 9px / 9px 12px 8px 11px;
  box-shadow: var(--lift-sm);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}

.btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 4px 0 rgba(22, 24, 26, 0.9);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(22, 24, 26, 0.9);
}

.btn--go {
  background: var(--teal);
  color: var(--teal-ink);
  box-shadow: var(--lift-teal);
}
.btn--go:hover {
  background: var(--teal-lift);
  box-shadow: 3px 4px 0 var(--teal-deep);
}
.btn--go:active {
  box-shadow: 0 0 0 var(--teal-deep);
}

.btn--sm {
  padding: 7px 14px;
  font-size: 0.92rem;
  box-shadow: 2px 2px 0 rgba(22, 24, 26, 0.8);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   Sketch primitive 3 — the underline
   ------------------------------------------------------------
   A marker stroke under a word. Used for the active nav item
   and for anything the eye should land on first.
   ============================================================ */
.mark {
  position: relative;
  /* inline-block + line-height:1 pins the box to the em square. As a plain
     inline, the box inherits the font's full line box — which for Kalam is
     ~1.6em — and the stroke lands on whatever paragraph follows. */
  display: inline-block;
  line-height: 1;
  padding-bottom: 5px;
}
.mark::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  height: 4px;
  background: var(--teal);
  border-radius: 60% 40% 55% 45% / 100% 100% 100% 100%;
  transform: rotate(-0.6deg);
}

/* ============================================================
   Sketch primitive 4 — the divider
   ============================================================ */
.rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: var(--ink-line-soft);
  border-radius: 2px;
}

/* ============================================================
   Type utilities
   ============================================================ */
.label {
  font-family: var(--print);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
}

.num {
  font-family: var(--hand);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  line-height: 1.05;
}

.muted {
  color: var(--ink-2);
}
.dim {
  color: var(--ink-3);
}
.teal {
  color: var(--teal);
}
.up {
  color: var(--up);
}
.down {
  color: var(--down);
}

.addr {
  font-family: var(--mono);
  font-size: 0.85em;
  letter-spacing: -0.01em;
}

/* A value that just changed. The flash is the point of a board
   left open on a screen — it is how a landed drop announces itself. */
@keyframes flash {
  0% {
    background: var(--teal);
    color: var(--teal-ink);
  }
  100% {
    background: transparent;
    color: inherit;
  }
}
.flash {
  animation: flash 1.1s ease-out;
  border-radius: 6px;
}

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