/* ==========================================================================
   Mise-Kal documentation site
   ==========================================================================

   Design notes
   ------------
   The palette mirrors the application's own design system so the site and the
   product read as one thing. The app uses warm neutrals rather than cool greys
   because a screen that sits in a dining room all evening should not read
   clinical, and Ember is reserved for identity and primary actions.

   Status colours deliberately avoid orange so an order's state can never be
   mistaken for a button: queued is neutral, preparing is blue, ready is green,
   and red is kept for trouble. That rule is load-bearing in the product and is
   followed here too.

   The background grid is drawn with CSS gradients rather than an image: it
   scales to any viewport, costs nothing to download, and stays crisp on a
   high-DPI display.
   ========================================================================== */

:root {
  /* Tells the browser this page is dark, which is what makes every *native*
     control render dark too: checkbox and radio bodies, number-input spinners,
     date pickers, and the default scrollbar. Without it the page paints dark
     while the controls inside it stay light - a white checkbox on a black card.
     `accent-color` alone does not fix that; it only tints the checked fill. */
  color-scheme: dark;

  /* Surfaces.
     Every neutral here is warm-shifted: red is the highest channel, then green,
     then blue. That ordering is what makes the surface read as charcoal with
     red in it rather than as teal.

     The previous palette had it the other way round - #0b0f10 is R11 G15 B16 -
     so every neutral on the site carried a green cast, including the panels and
     the page behind the grid. A red grid drawn over a green-black page does not
     read as red; the two cancel. Fixing the grid alone would not have been
     enough, which is why the whole neutral ramp moved. */
  --bg:            #0e0a09;   /* was #0b0f10 - green cast */
  /* The grid is Ember at a much higher opacity than a neutral grid would need.
     A red line over a near-black warm page is a small difference in the red
     channel only, so 7.5% read as noise rather than as a grid. These values
     were tuned by sampling the rendered pixels, not by eye. */
  --bg-grid:       rgba(232, 102, 61, 0.20);
  --bg-grid-major: rgba(232, 102, 61, 0.34);
  --surface:       #17100e;
  --surface-raised:#1f1614;
  --surface-sunken:#120c0b;

  /* Glass. Panels are translucent with a backdrop blur, so the grid reads
     through them as depth rather than being hidden by an opaque slab.
     --glass and --glass-strong are two steps: the first for cards that sit on
     the page, the second for surfaces that float above content. */
  --glass:         rgba(26, 17, 15, 0.55);
  --glass-strong:  rgba(22, 14, 12, 0.74);
  --glass-border:  rgba(255, 255, 255, 0.07);
  --glass-border-strong: rgba(232, 102, 61, 0.22);

  /* Borders */
  --border:        #2b1e1b;
  --border-strong: #3d2a25;

  /* Text. Kept close to neutral so body copy stays readable; only the dimmest
     step carries any warmth. --text-tertiary is used for hints and captions
     that are small, so it is held above 4.5:1 rather than allowed to sit at the
     3:1 that would only be acceptable for large text. */
  --text:          #ede6e3;   /* 15.97:1 on --bg */
  --text-secondary:#a89691;   /*  6.98:1 */
  --text-tertiary: #8a7671;   /*  4.79:1 */

  /* Brand and status. Ember is identity only; never a status. */
  --ember:         #e8663d;
  --ember-dim:     #b84e2c;
  --on-ember:      #1a0d08;

  --status-queued:  #8a7d7a;
  --status-cooking: #3b82f6;
  --status-ready:   #22c55e;
  --status-trouble: #ef4444;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Consolas,
               'Liberation Mono', Menlo, monospace;

  /* Space */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  --radius: 6px;
  --radius-lg: 10px;

  --max-width: 1120px;
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background-color: var(--bg);
  /* The grid: a fine 44px lattice in Ember with a stronger line every fifth
     cell. Both opacities are deliberately low — a grid behind body text
     competes with it, and the threshold where the eye stops reading the lines
     as structure is around 6% on this background. */
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
    linear-gradient(var(--bg-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid-major) 1px, transparent 1px);
  background-size:
    44px 44px,
    44px 44px,
    220px 220px,
    220px 220px;
  /* Fixed so the lattice stays put while content scrolls, which is what makes
     the glass panels read as floating above it. */
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Money and any column of digits must not shift as values change. */
.tabular { font-variant-numeric: tabular-nums; }

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

a {
  color: var(--ember);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-24);
}

main { display: block; }

section { padding: var(--space-64) 0; }

section + section { border-top: 1px solid var(--border); }

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Glass rather than a solid bar, so the grid stays visible behind the
     navigation instead of being cut off by it. The blur is what keeps the
     links legible over content scrolling underneath. */
  background: var(--glass-strong);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--glass-border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--ember);
  display: grid;
  place-items: center;
  color: var(--on-ember);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--text-secondary);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.site-nav a:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}
.site-nav a[aria-current='page'] {
  color: var(--text);
  background: var(--surface);
}

.nav-toggle { display: none; }

@media (max-width: 760px) {
  .site-header .wrap {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
  .site-nav { width: 100%; margin-left: 0; gap: 0; }
  .site-nav a { padding: 6px 8px; font-size: 13px; }
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding: var(--space-96) 0 var(--space-64);
  border-bottom: 1px solid var(--border);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 var(--space-16);
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 var(--space-24);
  max-width: 20ch;
}

.lede {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 0 var(--space-32);
}

h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 650;
  margin: 0 0 var(--space-16);
}

h3 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: var(--space-32) 0 var(--space-8);
}

h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: var(--space-24) 0 var(--space-8);
}

.section-lede {
  color: var(--text-secondary);
  max-width: 68ch;
  margin: 0 0 var(--space-32);
}

p { margin: 0 0 var(--space-16); }
p:last-child { margin-bottom: 0; }

/* --- Buttons -------------------------------------------------------------- */

.actions {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 550;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--ember);
  color: var(--on-ember);
}
.btn-primary:hover { background: #f07449; }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-raised); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--text); background: var(--surface); }

/* --- Cards and grids ------------------------------------------------------ */

.grid {
  display: grid;
  gap: var(--space-16);
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  /* Glass. A faint top highlight plus a blur reads as a pane rather than as a
     flat panel, which is what keeps a grid of them from looking like a table. */
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.25);
  transition: border-color 140ms ease, background-color 140ms ease;
}

/* Only cards that are links get a hover state, so a static card does not
   advertise itself as interactive. */
a.card:hover {
  border-color: var(--glass-border-strong);
  background: rgba(24, 32, 34, 0.62);
  text-decoration: none;
}

.card h3 { margin-top: 0; }
.card p { color: var(--text-secondary); font-size: 0.94rem; }
.card p:last-child { margin-bottom: 0; }

.card-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-12);
}

/* --- Tables --------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: var(--space-24) 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--text-tertiary);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

td code { white-space: nowrap; }

/* --- Code ----------------------------------------------------------------- */

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

pre {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-16) var(--space-24);
  overflow-x: auto;
  margin: var(--space-16) 0;
  line-height: 1.6;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* The one thing worth colouring in a shell block: the comment. */
pre .c { color: var(--text-tertiary); }

/* --- Diagrams ------------------------------------------------------------- */

/* The architecture diagrams in the README are plain ASCII so they survive
   being copied into a terminal or an issue. On the site the same diagrams are
   rendered in a monospace block with the grid showing through, which keeps them
   legible without pretending to be vector art. */
.diagram {
  /* Also glass: the diagrams sit on the grid, and an opaque block would cut a
     hole in it. */
  background: rgba(14, 19, 20, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: var(--space-24);
  overflow-x: auto;
  margin: var(--space-24) 0;
}

.diagram pre {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

@media (max-width: 700px) {
  .diagram pre { font-size: 0.66rem; }
}

/* --- Callouts ------------------------------------------------------------- */

.note {
  border-left: 3px solid var(--border-strong);
  padding: var(--space-4) 0 var(--space-4) var(--space-16);
  margin: var(--space-24) 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
}

.note-warn { border-left-color: var(--ember); }
.note-stop { border-left-color: var(--status-trouble); }

.note strong { color: var(--text); font-weight: 600; }

/* --- Badges --------------------------------------------------------------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: var(--space-24) 0;
}
.badges img { height: 20px; display: block; }

/* --- Status pills --------------------------------------------------------- */

/* Follows the product's own rule: status is never carried by orange. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  white-space: nowrap;
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.pill-queued  { color: var(--status-queued); }
.pill-cooking { color: var(--status-cooking); }
.pill-ready   { color: var(--status-ready); }
.pill-trouble { color: var(--status-trouble); }
.pill-ember   { color: var(--ember); }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-48) 0;
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  justify-content: space-between;
  align-items: flex-start;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}
.footer-links a { color: var(--text-secondary); }

/* --- Scrollbars ----------------------------------------------------------- */

/* Two rule sets on purpose. `scrollbar-color` and `scrollbar-width` are the
   standard properties and cover Firefox and recent Chromium; the
   `::-webkit-scrollbar` pseudo-elements are what older Chromium and Safari
   actually honour. Neither alone is enough, and they do not conflict.

   The thumb is Ember at rest and brightens on hover, so a scrollbar reads as
   part of the product rather than as a browser artefact. The track is the page
   background, so the bar does not draw a stripe down the edge of a glass panel. */

:root {
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  /* A transparent border with background-clip makes the thumb visually inset
     from the track, which is what keeps it from touching the panel edge. */
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ember-dim);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:active {
  background: var(--ember);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Horizontal scroll regions - the tables and the ASCII diagrams - get the same
   treatment so a wide table does not show a default grey bar. */
.table-scroll::-webkit-scrollbar,
.diagram::-webkit-scrollbar,
pre::-webkit-scrollbar {
  height: 8px;
}

/* --- Form controls -------------------------------------------------------- */

/* Every control is styled explicitly rather than left to the browser.
   `color-scheme: dark` handles the rendering, but the default dark controls
   are still the browser's greys and blues, which do not match the palette.
   These rules are what make a checkbox look like part of the product. */

input,
select,
textarea {
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 7px 10px;
  transition: border-color 120ms ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--text-tertiary);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(232, 102, 61, 0.14);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

/* Numeric fields: the spinners are the browser's and look foreign on a dark
   surface. They are kept - removing them costs a keyboard user the ability to
   nudge a value - but tinted to match. */
input[type='number'] {
  font-variant-numeric: tabular-nums;
}

/* Checkboxes and radios.
   `appearance: none` replaces the native control entirely, so it is only used
   where the replacement keeps every affordance: the box, the check, the
   keyboard focus ring, and the disabled state. Where a control cannot be
   replaced faithfully it is left native and `accent-color` is used instead. */

input[type='checkbox'],
input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  padding: 0;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

input[type='checkbox'] {
  border-radius: 4px;
}

input[type='radio'] {
  border-radius: 50%;
}

input[type='checkbox']:hover,
input[type='radio']:hover {
  border-color: var(--ember-dim);
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  background: var(--ember);
  border-color: var(--ember);
}

/* The check mark is drawn with a rotated border rather than an image or a
   glyph, so it inherits the colour and scales with the box. */
input[type='checkbox']:checked::after {
  content: '';
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid var(--on-ember);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type='radio']:checked::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--on-ember);
}

input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

input[type='checkbox']:disabled,
input[type='radio']:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* A small button, for toolbars where a full-size one would dominate. */
.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
}

/* A numeric field sized for an amount. Tabular figures so the digits do not
   shift as the value changes. */
.field-amount {
  width: 96px;
  font-variant-numeric: tabular-nums;
}

/* --- Selection and touch --------------------------------------------------- */

/* The browser's default selection is its own blue, which is the one colour that
   does not belong anywhere in this palette. */
::selection {
  background: rgba(232, 102, 61, 0.3);
  color: var(--text);
}

/* On touch devices the browser paints a grey flash over anything tapped. On a
   dark surface it reads as a bug rather than as feedback, and the buttons here
   already have their own pressed states. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Dragging a link or an image out of the page leaves a ghost of it behind.
   Neither is useful on a documentation site. */
a,
img {
  -webkit-user-drag: none;
}

/* --- Utilities ------------------------------------------------------------ */

.mono { font-family: var(--font-mono); font-size: 0.875em; }
.muted { color: var(--text-secondary); }
.dim { color: var(--text-tertiary); }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ember);
  color: var(--on-ember);
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Print ---------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .actions { display: none; }
  a { color: #000; text-decoration: underline; }
  .card, .diagram, pre { border-color: #ccc; background: #fafafa; }
}