/*
 * The reader app on Tabler: the token mapping, the overrides Tabler needs because some of
 * its values are literals rather than variables, the shell, and the handful of Katern
 * components (docs/design/reader-ui.md).
 *
 * Loaded after tabler.min.css, fonts.css and tokens.css. Every value here is a var(--k-*)
 * token; the guard test (config/tests/test_reader_ui_guard.py) fails on a literal colour,
 * font-family, font-size or letter-spacing, and on a token used here that tokens.css does not
 * define.
 */

/* ---- 1. Tabler's own variables, mapped onto the tokens. Names read from the vendored
 *         tabler-1.5.0/tabler.min.css, not from documentation. Same specificity as
 *         Tabler's :root and [data-theme=light] blocks, later in the cascade, so these win.
 *         Tabler derives most colours with light-dark(), which follows the color-scheme
 *         that tokens.css sets in each theme state. */
:root {
  --tblr-font-sans-serif: var(--k-font);
  --tblr-font-monospace: var(--k-mono);
  --tblr-body-font-size: var(--k-size-body);
  --tblr-body-line-height: var(--k-leading-body);
  --tblr-font-weight-bold: var(--k-weight-bold); /* Tabler's is 700; we ship no 700 */

  --tblr-body-color: var(--k-ink);
  --tblr-heading-color: var(--k-ink);
  --tblr-secondary: var(--k-ink-2);
  --tblr-secondary-color: var(--k-ink-2); /* a literal 75%-alpha grey in Tabler */
  --tblr-tertiary: var(--k-ink-3);

  --tblr-body-bg: var(--k-page);
  --tblr-bg-surface: var(--k-card);
  --tblr-bg-surface-secondary: var(--k-sunken);
  --tblr-bg-forms: var(--k-card);

  --tblr-border-color: var(--k-line);
  --tblr-border-color-translucent: var(--k-line);

  --tblr-primary: var(--k-accent);
  --tblr-primary-fg: var(--k-accent-ink);
  /* Tabler's hover is a translucent mix of the primary: 4.49:1 under white text. The
     accent itself is the hover colour; the hover is signalled by the shadow below. */
  --tblr-primary-darken: var(--k-accent);
  --tblr-link-color: var(--k-accent);
  --tblr-link-hover-color: var(--k-accent);

  --tblr-success: var(--k-ok);
  --tblr-warning: var(--k-warn);
  --tblr-danger: var(--k-fail);

  --tblr-border-radius: var(--k-radius-ctl);
  --tblr-shadow-card: var(--k-shadow);
  --tblr-sidebar-width: var(--k-sidebar);

  --tblr-font-size-h1: var(--k-size-title);
  --tblr-font-size-h2: var(--k-size-card);
  --tblr-font-size-h3: var(--k-size-card);
}

/* ---- 2. Where Tabler uses a literal, not a variable. Without these, controls render at
 *         14px under 16px text and bold renders at a synthesised 700. */
b, strong { font-weight: var(--k-weight-bold); }

.btn {
  --tblr-btn-font-size: var(--k-size-label);
  --tblr-btn-font-weight: var(--k-weight-bold);
  --tblr-btn-border-radius: var(--k-radius-ctl);
}
.btn-primary:hover { box-shadow: var(--k-shadow); }

/* Secondary: transparent with a visible boundary, per reader-ui.md. */
.btn-secondary {
  --tblr-btn-color: var(--k-ink);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: var(--k-line-control);
  --tblr-btn-hover-color: var(--k-ink);
  --tblr-btn-hover-bg: var(--k-sunken);
  --tblr-btn-hover-border-color: var(--k-line-control);
  --tblr-btn-active-color: var(--k-ink);
  --tblr-btn-active-bg: var(--k-sunken);
  --tblr-btn-active-border-color: var(--k-line-control);
}

/* Destructive: never primary, never colour-only (its label says what it does). */
.btn-destructive {
  --tblr-btn-color: var(--k-fail);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: var(--k-line-control);
  --tblr-btn-hover-color: var(--k-fail);
  --tblr-btn-hover-bg: var(--k-sunken);
  --tblr-btn-hover-border-color: var(--k-fail);
  --tblr-btn-active-color: var(--k-fail);
  --tblr-btn-active-bg: var(--k-sunken);
  --tblr-btn-active-border-color: var(--k-fail);
}

.form-control,
.form-select {
  font-size: var(--k-size-body);
  color: var(--k-ink);
  background-color: var(--k-card);
  border-color: var(--k-line-control);
}
.form-control:focus,
.form-select:focus { border-color: var(--k-focus); }
.form-control[readonly] { background-color: var(--k-sunken); }

.form-label {
  font-size: var(--k-size-label);
  font-weight: var(--k-weight-bold);
  color: var(--k-ink);
}
.form-hint {
  font-size: var(--k-size-help);
  color: var(--k-ink-3);
}
.form-error {
  margin-top: var(--k-space-2);
  font-size: var(--k-size-help);
  color: var(--k-fail);
}

.card {
  --tblr-card-spacer-x: var(--k-space-5);
  --tblr-card-spacer-y: var(--k-space-5);
  --tblr-card-border-color: var(--k-line);
  --tblr-card-border-radius: var(--k-radius-card);
  --tblr-card-box-shadow: var(--k-shadow);
  margin-bottom: var(--k-space-5);
}
.card-title {
  font-size: var(--k-size-card);
  font-weight: var(--k-weight-bold);
  letter-spacing: var(--k-tracking-card);
  line-height: var(--k-leading-tight);
}
code {
  font-size: var(--k-size-help);
  color: var(--k-ink-2);
}

/* OS-dark replication (ruling A, 2026-10-12). Tabler keys its dark component rules on a
   data-theme attribute, which a reader whose OS is dark and who has chosen nothing does not
   have. Of Tabler 1.5.0's 13 dark-keyed rules exactly one reaches a reader surface: the
   select chevron. This is that rule, value for value. Re-enumerate on a Tabler upgrade. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-select {
    --tblr-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  }
}

/* ---- 3. The shell: a vertical sidebar and a main panel. */
.k-shell {
  display: grid;
  grid-template-columns: var(--k-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.k-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--k-space-5);
  height: 100vh;
  padding: var(--k-space-6) var(--k-space-4);
  background: var(--k-card);
  border-right: var(--k-border) solid var(--k-line);
}

.k-wordmark {
  padding: 0 var(--k-space-3);
  font-size: var(--k-size-title);
  font-weight: var(--k-weight-bold);
  letter-spacing: var(--k-tracking-title);
  line-height: var(--k-leading-tight);
  color: var(--k-ink);
}
.k-wordmark:hover { color: var(--k-ink); text-decoration: none; }

.k-nav {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.k-nav a {
  display: block;
  padding: var(--k-space-3) var(--k-space-4);
  border-radius: var(--k-radius-ctl);
  font-size: var(--k-size-body);
  font-weight: var(--k-weight-medium);
  color: var(--k-ink-2);
}
.k-nav a:hover { color: var(--k-ink); background: var(--k-sunken); text-decoration: none; }
.k-nav a[aria-current="page"] {
  color: var(--k-accent);
  background: var(--k-accent-soft);
  font-weight: var(--k-weight-bold);
}

.k-whoami {
  margin-top: auto;
  padding: var(--k-space-4) var(--k-space-3) 0;
  border-top: var(--k-border) solid var(--k-line);
  font-size: var(--k-size-help);
  color: var(--k-ink-3);
  overflow-wrap: anywhere;
}
.k-whoami form { margin-top: var(--k-space-2); }
.k-signout {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--k-size-help);
  font-weight: var(--k-weight-bold);
  color: var(--k-accent);
  cursor: pointer;
}
.k-signout:hover { text-decoration: underline; }

.k-main { padding: var(--k-space-6); }
.k-content { max-width: calc(var(--k-measure) + 2 * var(--k-space-5)); }

.k-title {
  margin: 0 0 var(--k-space-5);
  font-size: var(--k-size-title);
  font-weight: var(--k-weight-bold);
  letter-spacing: var(--k-tracking-title);
  line-height: var(--k-leading-tight);
}

/* Signed out: no sidebar, one centred card (ADR-0029: outside the shell). */
.k-solo {
  max-width: calc(var(--k-measure) * 0.6);
  margin: 0 auto;
  padding: var(--k-space-7) var(--k-space-4);
}
.k-solo .k-wordmark { display: block; margin-bottom: var(--k-space-5); padding: 0; }

/* Narrow screens: no script, so no collapse. The sidebar becomes a top block whose
   destinations wrap. */
@media (max-width: 900px) {
  .k-shell { grid-template-columns: minmax(0, 1fr); }
  .k-sidebar {
    position: static;
    height: auto;
    padding: var(--k-space-4);
    border-right: 0;
    border-bottom: var(--k-border) solid var(--k-line);
  }
  .k-nav { flex-direction: row; flex-wrap: wrap; }
  .k-whoami { margin-top: 0; }
  .k-main { padding: var(--k-space-5) var(--k-space-4); }
}

/* ---- 4. Katern components (reader-ui.md, Components). */

/* Running text never wider than the measure, on any screen. */
.k-prose { max-width: var(--k-measure); }
.k-prose p:last-child { margin-bottom: 0; }

.k-meta {
  font-size: var(--k-size-help);
  color: var(--k-ink-3);
}

/* Line rows: separated rows inside a card. */
.k-rows { margin: 0; padding: 0; list-style: none; }
.k-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--k-space-3) var(--k-space-5);
  padding: var(--k-space-4) 0;
  border-top: var(--k-border) solid var(--k-line);
}
.k-row:first-child { border-top: 0; padding-top: 0; }
.k-row:last-child { padding-bottom: 0; }
.k-row__main { flex: 1 1 18rem; min-width: 0; }
.k-row__name {
  display: block;
  font-weight: var(--k-weight-bold);
  overflow-wrap: anywhere;
}
.k-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--k-space-3);
}

/* State chip: a dot plus a label. Colour is never the only signal: the label is always
   there, and "not set up" differs in shape (hollow) as well as hue. */
.k-state {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  font-size: var(--k-size-chip);
  font-weight: var(--k-weight-bold);
  color: var(--k-ink-2);
}
.k-state::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: var(--k-focus-width) solid currentColor;
  background: currentColor;
}
.k-state--ok::before { color: var(--k-ok); }
.k-state--fail::before { color: var(--k-fail); }
.k-state--unset::before { color: var(--k-ink-3); background: transparent; }
.k-state--paused::before { color: var(--k-ink-3); border-radius: 1px; }

/* Alert: how Today says what needs attention. A left border, a title, one line, the fix. */
.k-alert {
  margin-bottom: var(--k-space-4);
  padding: var(--k-space-4) var(--k-space-5);
  background: var(--k-card);
  border: var(--k-border) solid var(--k-line);
  border-left: calc(var(--k-focus-width) * 2) solid var(--k-warn);
  border-radius: var(--k-radius-card);
  box-shadow: var(--k-shadow);
}
.k-alert--fail { border-left-color: var(--k-fail); }
.k-alert__title {
  display: block;
  font-weight: var(--k-weight-bold);
  color: var(--k-ink);
}
.k-alert p { margin: var(--k-space-1) 0 0; color: var(--k-ink-2); }

/* "What that means": the only component with its own ground. */
.k-panel {
  margin-top: var(--k-space-4);
  padding: var(--k-space-4) var(--k-space-5);
  background: var(--k-sunken);
  border-radius: var(--k-radius-sm);
}
.k-panel__label {
  display: block;
  font-size: var(--k-size-help);
  color: var(--k-ink-3);
}
.k-panel__value {
  display: block;
  font-size: var(--k-size-lead);
  font-weight: var(--k-weight-bold);
  line-height: var(--k-leading-tight);
  color: var(--k-ink);
}
.k-panel p { margin: var(--k-space-2) 0 0; color: var(--k-ink-2); }

/* The one number on a screen. */
.k-hero {
  display: block;
  font-size: var(--k-size-hero);
  font-weight: var(--k-weight-bold);
  letter-spacing: var(--k-tracking-hero);
  line-height: var(--k-leading-tight);
  color: var(--k-ink);
}

/* Fact tiles: secondary by design. */
.k-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--k-space-4);
  margin-top: var(--k-space-5);
}
.k-tile {
  padding: var(--k-space-4);
  border: var(--k-border) solid var(--k-line);
  border-radius: var(--k-radius-sm);
}
.k-tile__value {
  display: block;
  font-size: var(--k-size-lead);
  font-weight: var(--k-weight-bold);
  color: var(--k-ink);
}
.k-tile__label { font-size: var(--k-size-help); color: var(--k-ink-3); }

/* Empty state: says WHY it is empty. */
.k-empty {
  padding: var(--k-space-5);
  border: var(--k-border) dashed var(--k-line-control);
  border-radius: var(--k-radius-card);
}
.k-empty__title { display: block; font-weight: var(--k-weight-bold); color: var(--k-ink); }
.k-empty p { margin: var(--k-space-1) 0 0; color: var(--k-ink-2); }

/* Forms laid out in a row (a field beside its button). */
.k-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--k-space-3);
}
.k-inline-form .k-field { flex: 1 1 16rem; }
.k-field { margin-bottom: var(--k-space-4); }
.k-inline-form .k-field { margin-bottom: 0; }

.k-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-space-4);
  margin-top: var(--k-space-5);
}

/* A form Django renders itself ({{ form.as_div }}), styled to match the fields above
   without rewriting its markup: its attributes and error list stay Django's. */
.k-django-form > div { margin-bottom: var(--k-space-4); }
.k-django-form label {
  display: block;
  margin-bottom: var(--k-space-2);
  font-size: var(--k-size-label);
  font-weight: var(--k-weight-bold);
}
.k-django-form input:not([type="hidden"]) {
  display: block;
  width: 100%;
  padding: var(--k-space-3) var(--k-space-4);
  font-size: var(--k-size-body);
  color: var(--k-ink);
  background: var(--k-card);
  border: var(--k-border) solid var(--k-line-control);
  border-radius: var(--k-radius-ctl);
}
.k-django-form input:focus { border-color: var(--k-focus); }
.k-django-form .errorlist {
  margin: 0 0 var(--k-space-4);
  padding: 0;
  list-style: none;
  font-size: var(--k-size-help);
  color: var(--k-fail);
}

/* Flash messages, as alerts without the shadow. */
.k-messages { margin: 0 0 var(--k-space-5); padding: 0; list-style: none; }
.k-messages li {
  margin-bottom: var(--k-space-2);
  padding: var(--k-space-3) var(--k-space-4);
  background: var(--k-card);
  border: var(--k-border) solid var(--k-line);
  border-left: calc(var(--k-focus-width) * 2) solid var(--k-accent);
  border-radius: var(--k-radius-sm);
}
.k-messages li.warning { border-left-color: var(--k-warn); }
.k-messages li.error { border-left-color: var(--k-fail); }

/* The order page's call to action. `button` is the class the order tests assert on. */
a.button {
  display: inline-block;
  padding: var(--k-space-3) var(--k-space-5);
  border-radius: var(--k-radius-ctl);
  background: var(--k-accent);
  color: var(--k-accent-ink);
  font-size: var(--k-size-label);
  font-weight: var(--k-weight-bold);
}
a.button:hover { color: var(--k-accent-ink); text-decoration: none; box-shadow: var(--k-shadow); }