/* ── Design tokens ──────────────────────────────────────────────
   Single source of truth for the UI language: use these variables
   instead of new hex values.

   The palette is "Brázda" -- a warm, agricultural language replacing
   the cool slate the app started on. Three things carry it: a flax
   ground instead of a blue-grey one, a serif for display only, and a
   single field-green accent. Wheat gold is reserved for the running
   state and appears nowhere else, which is what makes it read.

   The greys are not neutral -- every one is pulled slightly toward
   olive (hue 97deg) so they sit on the flax ground instead of fighting
   it. The whole ramp is deliberately close to white: the first cut sat
   around L .945 at twice this chroma and read as beige rather than as
   a warm white, which made the app feel heavier than it is. Warmth here
   is meant to be felt, not seen -- keep chroma under about .012 and let
   the accent carry the colour. */
:root {
  color-scheme: light;

  /* Layout */
  --rail-width: clamp(236px, 18vw, 260px);
  --main-pad: 24px;
  --answer-inspector-width: clamp(20rem, 31vw, 28rem);
  --workbook-panel-width: clamp(28rem, 52vw, 58rem);
  /* The reading column: chat messages and the composer share this so their
     edges line up. 800px is about an A4 page at 96dpi (794px). */
  --content-width: 800px;

  /* Type. --font-display is Newsreader and belongs to headings and
     empty-state titles only -- never to a control, a label or a table.
     Interface text is --font-sans everywhere, as before. */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ui-sans-serif, sans-serif;
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Surfaces */
  --surface: #fefdfb;        /* cards, panels, popups */
  --surface-inset: #f9f8f3;  /* read-only inset panels, quiet fields */
  --surface-page: #faf9f5;   /* page backdrop behind content areas */
  /* Same colour as --surface-page, as channels, for gradients and scrims that
     need it at partial alpha. Keep the two in step. */
  --surface-page-rgb: 250 249 245;
  --surface-rail: #f1f0ea;   /* the left rail, one step deeper than the page */
  /* Scrollbar thumb. Opaque on purpose: Firefox paints a *pressed* thumb
     invisibly when the author's scrollbar-color is semi-transparent, so
     grabbing a bar made it disappear until the button came back up. These are
     the old rgba(117,117,117,·) values already blended over --surface-page, so
     nothing looks different -- and the fade still works, because the idle state
     is `transparent` and the transition animates the alpha down to it. */
  --scrollbar-thumb: #d3d2ce;        /* the auto-hiding bar */
  --scrollbar-thumb-strong: #c9c8c4; /* surfaces that keep their bar up */
  --scrollbar-thumb-hover: #b0afab;
  --hover-bg: #efeee7;       /* flat control hover (tabs, nav rows) */
  --active-bg: #e6e5dc;      /* flat control selected */
  --card-hover-bg: #faf9f5;  /* card hover wash */

  /* Borders */
  --border: #e8e6df;         /* cards, panels, modals */
  --border-soft: #efeee8;    /* inset panels, dividers */
  --border-input: #e5e3dc;   /* inputs at rest */
  --border-focus: #b4b1a6;   /* inputs focused */
  --border-card-hover: #deddd3;

  /* Text */
  --ink: #1b1e16;            /* headings, strong labels */
  --ink-strong: #101208;
  --text: #3f4238;           /* body */
  --muted: #565949;          /* labels, secondary */
  --muted-rgb: 86 89 73;     /* --muted as channels, for scrims and skeletons */
  --faint: #8a8c7c;          /* placeholders, hints */

  /* Accents. --accent is the primary action (send, save); --green stays
     the constructive one (upload, copy) and is now a lighter step of the
     same hue, so the two read as one family rather than two decisions. */
  --accent: #41702e;
  --on-accent: #fefdfb;      /* label on a solid accent fill */
  --accent-hover: #2f5321;
  --green: #4b8232;
  --green-hover: #3a6626;
  --green-soft: #eef3e7;
  --green-border: #c9dab8;
  --green-deep: #2f5321;
  /* Wheat gold: the running state, and nothing else. */
  --gold: #b9841a;
  --gold-soft: #f7efdc;
  --blue: #1b6bb0;
  --red: #ab3f2b;
  --presentation: #c55a11;

  /* Radii */
  --r-sm: 8px;               /* tabs, small buttons, menu rows */
  --r-md: 10px;              /* nav rows, list rows, inputs */
  /* One measure for a section's header and the content under it. Prose sections
     sit on it directly; Knihovna is a grid and takes a wider bound with this
     gutter beside it instead. */
  --section-measure: 48rem;
  --library-gutter: 44px;
  --r-lg: 12px;              /* cards, inset panels, tables */
  --r-xl: 16px;              /* modals, popups */
  --r-pill: 999px;

  /* Motion */
  --dur: .15s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Shadows: warm-tinted, so they sit on flax rather than greying it. */
  /* Skeleton shimmer. Every placeholder in the app is this gradient on this
     keyframe, so a list, a chat and a brief all wait in the same voice. */
  --skeleton: linear-gradient(90deg,
    rgb(var(--muted-rgb) / .10),
    rgb(var(--muted-rgb) / .22),
    rgb(var(--muted-rgb) / .10));

  --shadow-card: 0 1px 2px rgba(27, 30, 22, .05);
  --shadow-float: 0 12px 32px rgba(27, 30, 22, .13);
  --shadow-pop: 0 16px 42px rgba(27, 30, 22, .15);
}

/* The upload ring's arc, in percent of a full turn. Registered as a number so
   it can be transitioned: progress arrives in jumps, and a conic gradient built
   on a bare custom property would jump with it. The initial value is the
   quarter-arc the ring turns with while the browser has nothing to report --
   the one place a browser without @property simply keeps its steps. */
@property --upload-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 25;
}

/* Shared loading keyframes: a soft dot pulse and one canonical spin
   speed. Every spinner in the app uses these. */
@keyframes pulse-soft {
  0%, 100% { opacity: .45; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* In-button loading ring for dark/solid buttons: swap the label for
   this while an action is in flight so feedback stays inside the button. */
.btn-loading-ring {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .chat-history-name.is-renaming .chat-history-letter {
    animation: none;
    opacity: 1;
  }
}