/* Blotter — base layer.
   Tailwind handles layout and color; this file holds the things it can't:
   the theme tokens, the variable-width display face, tabular figures, chrome. */

/* ── Theme tokens ───────────────────────────────────────────
   Colours are stored as raw "r g b" channels so Tailwind can apply opacity
   modifiers to them (bg-jade/10). Solid aliases below are for SVG fills and
   anywhere a plain colour is needed.

   The two themes are not inversions of each other. Dark is a terminal at
   night; light is ruled ledger paper. Jade, clay and brass each darken on
   paper so they hold contrast against it rather than glowing off it. */

:root,
[data-theme='dark'] {
  color-scheme: dark;

  --c-ground:      16 22 21;
  --c-panel:       22 31 29;
  --c-panel-2:     28 39 37;
  --c-panel-3:     34 48 45;
  --c-line:        38 51 47;
  --c-line-2:      53 71 63;

  --c-bone:        237 234 225;
  --c-bone-2:      169 176 170;
  --c-bone-3:      110 120 115;
  --c-bone-4:      74 84 80;

  --c-jade:        79 178 134;
  --c-jade-2:      46 125 91;
  --c-clay:        217 97 76;
  --c-clay-2:      168 65 47;
  --c-brass:       191 164 111;
  --c-brass-hover: 210 184 127;
  --c-on-accent:   237 234 225;

  --field-focus-bg: 32 44 41;
  --row-hover:      27 37 35;
  --scrollbar:      46 60 56;
  --scrollbar-hot:  61 78 73;

  --scrim: 8 12 11;
  --scrim-alpha: 0.82;
  --shadow-sheet: 0 24px 60px -12px rgb(0 0 0 / 0.7), 0 2px 8px rgb(0 0 0 / 0.4);
  --shadow-pop:   0 8px 24px -6px rgb(0 0 0 / 0.6);
}

[data-theme='light'] {
  color-scheme: light;

  --c-ground:      242 243 238;
  --c-panel:       251 251 248;
  --c-panel-2:     237 238 232;
  --c-panel-3:     227 229 221;
  --c-line:        222 223 215;
  --c-line-2:      195 198 186;

  --c-bone:        22 32 29;
  --c-bone-2:      70 82 77;
  --c-bone-3:      110 122 116;
  --c-bone-4:      151 160 153;

  --c-jade:        23 121 90;
  --c-jade-2:      15 92 67;
  --c-clay:        178 60 38;
  --c-clay-2:      140 45 27;
  --c-brass:       122 95 31;
  --c-brass-hover: 150 118 44;
  --c-on-accent:   251 251 248;

  --field-focus-bg: 255 255 255;
  --row-hover:      237 238 232;
  --scrollbar:      201 204 193;
  --scrollbar-hot:  177 181 168;

  --scrim: 30 38 34;
  --scrim-alpha: 0.42;
  --shadow-sheet: 0 24px 60px -14px rgb(22 32 29 / 0.22), 0 2px 8px rgb(22 32 29 / 0.08);
  --shadow-pop:   0 8px 24px -6px rgb(22 32 29 / 0.18);
}

/* Solid aliases — SVG fill/stroke can't use Tailwind classes. */
:root {
  --ground:  rgb(var(--c-ground));
  --panel:   rgb(var(--c-panel));
  --panel-2: rgb(var(--c-panel-2));
  --line:    rgb(var(--c-line));
  --line-2:  rgb(var(--c-line-2));
  --bone:    rgb(var(--c-bone));
  --bone-2:  rgb(var(--c-bone-2));
  --bone-3:  rgb(var(--c-bone-3));
  --jade:    rgb(var(--c-jade));
  --clay:    rgb(var(--c-clay));
  --brass:   rgb(var(--c-brass));
}

[v-cloak] { display: none; }

html { -webkit-text-size-adjust: 100%; }
body {
  text-rendering: optimizeLegibility;
  /* Theme switches shouldn't snap; the panels and rules cross-fade. */
  transition: background-color 220ms ease, color 220ms ease;
}

/* ── Type roles ─────────────────────────────────────────────
   disp    : headings, set wide — machine-cut, not humanist
   eyebrow : column and section labels, set narrow and tracked
   num     : every number in the app, tabular so columns align  */

.disp {
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 116;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 84;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6875rem;
  line-height: 1.1;
  color: var(--bone-3);
}

.num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* ── Form controls ─────────────────────────────────────────── */

.field {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.5rem 0.625rem;
  color: var(--bone);
  font-size: 0.875rem;
  line-height: 1.35;
  transition: border-color 120ms ease, background 120ms ease;
}
.field::placeholder { color: rgb(var(--c-bone-4)); }
.field:hover { border-color: var(--line-2); }
.field:focus {
  outline: none;
  border-color: var(--brass);
  background: rgb(var(--field-focus-bg));
}
.field:disabled { opacity: 0.45; cursor: not-allowed; }

select.field {
  appearance: none;
  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='M1 1l4 4 4-4' stroke='%236E7873' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  padding-right: 1.75rem;
}

textarea.field { resize: vertical; min-height: 5rem; }

/* Kill the browser's built-in number spinners — they fight tabular figures */
.field[type='number']::-webkit-outer-spin-button,
.field[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field[type='number'] { -moz-appearance: textfield; }

/* The date picker ships a dark glyph; only the dark theme needs it inverted. */
[data-theme='dark'] .field[type='datetime-local']::-webkit-calendar-picker-indicator,
[data-theme='dark'] .field[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(0.62) sepia(0.1);
}
.field[type='datetime-local']::-webkit-calendar-picker-indicator,
.field[type='date']::-webkit-calendar-picker-indicator { cursor: pointer; }

/* ── Focus: brass, always visible, never removed ───────────── */

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 2px;
}
.field:focus-visible { outline-offset: 0; }

/* ── Surfaces ──────────────────────────────────────────────── */

.scrim { background: rgb(var(--scrim) / var(--scrim-alpha)); }
.shadow-sheet { box-shadow: var(--shadow-sheet); }
.shadow-pop { box-shadow: var(--shadow-pop); }

/* ── Scrollbars ────────────────────────────────────────────── */

.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(var(--scrollbar)) transparent; }
.scroll-y::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.scroll-y::-webkit-scrollbar-thumb {
  background: rgb(var(--scrollbar));
  border-radius: 99px;
  border: 2px solid var(--ground);
}
.scroll-y::-webkit-scrollbar-thumb:hover { background: rgb(var(--scrollbar-hot)); }

/* ── Table chrome ──────────────────────────────────────────── */

.sticky-head th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--line);
}

.row-link { transition: background 100ms ease; }
.row-link:hover { background: rgb(var(--row-hover)); }

/* ── The R-tape ────────────────────────────────────────────── */

.tape-bar { transition: opacity 120ms ease; }
.tape:hover .tape-bar { opacity: 0.4; }
.tape .tape-bar.is-hot { opacity: 1; }

/* ── Motion ────────────────────────────────────────────────── */

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }

.anim-rise { animation: rise 320ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-fade { animation: fade 160ms ease both; }
.anim-sheet { animation: scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }

.stagger > * { animation: rise 340ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(6) { animation-delay: 200ms; }

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