/* The DEN — LLaMa Chat. Claude/ChatGPT-style light interface, Saturday's
   editorial cream palette + Inter body / Playfair display headings. */

/* Force a light body under this route regardless of what base.html does. */
body.den-page {
  background: var(--den-bg);
  color: var(--den-ink);
}

/* ── DEN-SHELL-1 · Viewport-locked app shell ─────────────────
 *
 * The DEN is a chat app, not a document, and it now behaves like
 * one: the page itself does not scroll, the thread does. Before
 * this the whole document scrolled — site nav, header, thread and
 * a `position: sticky` composer all moving together — so on a long
 * transcript you scrolled past the input to reach the input.
 *
 * The shape is the standard three-part shell:
 *
 *   .den            grid, exactly the height of the viewport minus
 *                   the fixed site chrome. Clips.
 *   .den-sidebar    its own scroll region.
 *   .den__frame     flex column: header (fixed) / thread (grows and
 *                   scrolls) / composer (fixed at the bottom).
 *
 * Every link in that chain needs `min-height: 0`. A flex or grid
 * item's default `min-height: auto` refuses to shrink below its
 * content, which silently hands the scroll back to the document and
 * undoes the whole thing.
 *
 * 100dvh, not 100vh: on mobile 100vh is the viewport with the
 * browser chrome *retracted*, so the composer sits below the fold
 * until the user scrolls. dvh tracks the chrome as it hides.
 *
 * The document-level lock lives on .site-main rather than body so
 * it cannot leak to any other page, and the footer is hidden here —
 * in a locked shell it is unreachable, and leaving it in the flow
 * is what would force the document to scroll again.
 */
body.den-page { overflow: hidden; }
body.den-page .site-main {
  height: 100dvh;
  overflow: hidden;
}
/* The site footer's class is `.sf` — see templates/partials/footer.html.
 * Worth knowing: the DEN stylesheets have carried a
 * `body.den-page .site-footer` rule for a long time and that selector
 * has never matched anything. den_guide.css and den_case_files.css
 * still carry their own copies of the same dead rule; left alone here
 * because making them live would change those pages' footer
 * background, which is not this PR's job. */
body.den-page .sf { display: none; }

.den {

  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--den-ink);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: grid;
  grid-template-columns: var(--den-sidebar-w) 1fr;
  gap: 0;
}

.den__frame {
  /* DEN-WIDTH-1 · The chat column fills the space the sidebar leaves.
     It used to cap at 780px and centre, which on a 1900px monitor left
     more than half the width empty while the prose sat squeezed into a
     narrow ribbon.
     --den-measure is the single knob for how wide the assistant's PROSE
     is allowed to run. It caps paragraphs, lists and headings only —
     rich cards, tables and embeds are deliberately exempt and fill the
     full column, because their value is in the columns they can show.
     `none` removes the cap entirely. */
  --den-measure: 90ch;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  /* DEN-SHELL-1 · The 200px bottom reserve is gone with the sticky
     composer that needed it. The composer is now a sibling below the
     thread rather than floating over it, so nothing has to be held
     clear — the thread's own scroll region ends where the composer
     begins. */
  padding: 24px 20px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar toggle button — hidden on desktop, shown on mobile above header. */
.den__sidebar-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin: 0 0 8px;
  background: var(--den-surface);
  border: 1px solid var(--den-border);
  border-radius: 999px;
  color: var(--den-ink-70);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  align-self: flex-start;
}
.den__sidebar-toggle:hover {
  border-color: var(--den-border-strong);
  color: var(--den-ink);
}

/* ── Sidebar ────────────────────────────────────────────────── */
.den-sidebar {
  /* DEN-SHELL-1 · was `position: sticky; top: 0; height: 100vh`,
     which slid the sidebar under the fixed site nav and gave it a
     scroll region 60px taller than the space it actually had. Inside
     the locked shell it is simply a full-height grid cell. */
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 14px 24px;
  background: var(--den-sidebar-bg);
  border-right: 1px solid var(--den-border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.den-sidebar__new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--den-ink);
  color: var(--den-on-accent);
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  justify-content: center;
  transition: background 0.15s ease;
}
.den-sidebar__new:hover { background: var(--den-ink-invert); }

.den-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.den-sidebar__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 8px 6px 6px;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--den-ink-50);
}
.den-sidebar__tier-label {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--den-sage-soft);
  color: var(--den-sage);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.den-sidebar__tier-label--pro {
  background: var(--den-gold-tint);
  color: var(--den-gold-ink);
}
.den-sidebar__tier-label--free {
  background: var(--den-neutral-bg);
  color: var(--den-ink-70);
}

/* ── Marquee · Wave 1 · tier chips (Daily / Weekly / Archive)
   Small warm-cream chips that segment the 8-item Marquee panel
   into three consumption rhythms.  Sits between rows, not as a
   bold rule — the tiering should feel discovered, not shouted.
   Anchor tags reuse .den-sidebar__item so archive rows inherit
   the exact same padding, colour and locked treatment as button
   rows without a second style block. */
.den-sidebar__marquee-tier {
  display: inline-block;
  margin: 14px 0 4px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(28,28,25,0.05);
  color: var(--den-ink-70);
  border-radius: 3px;
}
.den-sidebar__marquee-tier:first-of-type {
  margin-top: 4px;
}
/* Anchor-based Marquee rows: kill default underline + inherit
   ambient colour so the row looks identical to a <button>. */
a.den-sidebar__item {
  text-decoration: none;
  color: inherit;
}
/* Static stat row (no click target) — same look as a button but
   without hover cursor / interactive affordance. */
.den-sidebar__item--stat {
  cursor: default;
}

.den-sidebar__item {
  /* DEN-SIDEBAR-1 · row now icon + body, so the eye scans an icon
     column instead of reading every label. */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--den-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.den-sidebar__item:hover {
  background: var(--den-surface);
  border-color: var(--den-border);
}
.den-sidebar__item-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--den-ink);
}
.den-sidebar__item-sub {
  font-size: 11.5px;
  color: var(--den-ink-50);
  line-height: 1.4;
}
.den-sidebar__item--locked .den-sidebar__item-title,
.den-sidebar__item--locked .den-sidebar__item-sub {
  color: var(--den-ink-30);
}
.den-sidebar__item--locked:hover {
  background: rgba(255,255,255,0.6);
}
.den-sidebar__lock {
  color: var(--den-ink-30);
  vertical-align: -1px;
}

.den-sidebar__footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--den-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.den-sidebar__guide {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--den-sage-soft);
  color: var(--den-sage);
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(63, 85, 68, 0.20);
  transition: transform 0.12s, background 0.12s;
}
.den-sidebar__guide:hover {
  transform: translateY(-1px);
  background: rgba(63, 85, 68, 0.14);
}
.den-sidebar__guide-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.den-sidebar__guide-sub {
  font-size: 11px;
  color: var(--den-ink-70);
}
.den-sidebar__upgrade {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--den-gold-hi) 0%, var(--den-gold-lo) 100%);
  color: var(--den-gold-deep);
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid var(--den-gold);
}
.den-sidebar__upgrade:hover { transform: translateY(-1px); }
.den-sidebar__upgrade-title {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}
.den-sidebar__upgrade-sub {
  font-size: 11.5px;
  opacity: 0.85;
}

/* ── Header ─────────────────────────────────────────────────── */
.den__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 4px 22px;
  border-bottom: 1px solid var(--den-border);
  margin-bottom: 24px;
}
.den__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.den__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--den-border-strong);
  background: var(--den-surface);
}
.den__title-wrap { line-height: 1.2; }
.den__title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--den-ink);
}
.den__eyebrow {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--den-ink-50);
  letter-spacing: 0.01em;
}

.den__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.den__tier {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--den-sage-soft);
  color: var(--den-sage);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.den__tier--demo   { background: var(--den-neutral-bg); color: var(--den-ink-70); }
.den__tier--cub_pro { background: var(--den-gold-tint); color: var(--den-gold-ink); }
.den__quota {
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--den-ink-70);
  background: rgba(0,0,0,0.04);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
.den__quota--warn {
  background: var(--den-warn-bg);
  color: var(--den-gold-ink);
}
.den__quota--critical {
  background: var(--den-crit-bg);
  color: var(--den-crit-ink);
}
.den__mock-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--den-gold-hi);
  color: var(--den-gold-deep);
  border: 1px solid var(--den-gold);
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-size: 10px;
  cursor: help;
}

/* ── LLM-not-ready notice (shown when DEN_ENABLED=False) ───── */
.den__llm-notice {
  display: block;
  padding: 12px 16px;
  margin: 0 0 22px;
  background: var(--den-sidebar-bg);
  border: 1px solid var(--den-border);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--den-ink-70);
  line-height: 1.55;
}
.den__llm-notice strong {
  color: var(--den-ink);
  font-weight: 700;
}

/* ── Upsell strip ──────────────────────────────────────────── */
.den__upsell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  margin: 0 0 22px;
  background: var(--den-on-accent);
  border: 1px solid var(--den-gold-tint);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--den-gold-ink);
}
.den__upsell strong { font-weight: 700; }
.den__upsell-body { flex: 1; line-height: 1.55; }
.den__upsell-cta {
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--den-ink);
  color: var(--den-on-accent);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
  white-space: nowrap;
}
.den__upsell-cta:hover { background: var(--den-ink-invert); }

/* ── Welcome / empty state ─────────────────────────────────── */
.den__welcome {
  padding: 56px 16px 32px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.den__welcome-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--den-border-strong);
  background: var(--den-surface);
  margin-bottom: 22px;
}
.den__welcome-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--den-ink);
}
.den__welcome-body {
  color: var(--den-ink-70);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: 46ch;
}
.den__starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  text-align: left;
}
.den__starter {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  background: var(--den-surface);
  border: 1px solid var(--den-border);
  border-radius: 14px;
  color: var(--den-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.den__starter:hover {
  border-color: var(--den-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(28,28,25,0.05);
}
.den__starter-title {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--den-ink);
}
.den__starter-sub {
  font-size: 12.5px;
  color: var(--den-ink-50);
}

/* ── Thread ────────────────────────────────────────────────── */
.den__thread {
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* DEN-SHELL-1 · This is the scroll region now. `min-height: 0` is
     load-bearing: without it the flex item refuses to shrink below
     its content and the document starts scrolling again instead.
     overscroll-behavior stops a flick at the top of the thread from
     chaining into a page-level bounce. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Breathing room so the last turn does not butt against the
     composer, and the first is not flush against the header. */
  padding: 2px 2px 16px;
}
.den__turn {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: den-in 0.28s ease-out both;
  /* DEN-SHELL-1 · The 220px reserve existed to hold the last turn
     clear of a composer that floated over the thread. The composer no
     longer overlaps anything, so scrollIntoView({block:'end'}) inside
     the thread's own scroll region lands correctly with just a little
     breathing room. scroll-margin-top does the same at the header end
     for block:'start' — see appendTurn() in den.js. */
  scroll-margin-bottom: 12px;
  scroll-margin-top: 12px;
}
@keyframes den-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* User: right-aligned soft pill */
.den__turn--user {
  justify-content: flex-end;
}
.den__turn--user .den__turn-inner {
  max-width: 78%;
}
.den__turn--user .den__turn-body {
  background: var(--den-user-bg);
  color: var(--den-ink);
  border-radius: 18px 18px 4px 18px;
  padding: 12px 16px;
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.55;
}

/* Assistant: full-width prose, small LLaMa avatar */
.den__turn--assistant .den__turn-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--den-border-strong);
  background: var(--den-surface);
  flex-shrink: 0;
  margin-top: 2px;
}
.den__turn--assistant .den__turn-inner {
  flex: 1;
  min-width: 0;
}
.den__turn--assistant .den__turn-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--den-ink);
}
.den__turn--assistant .den__turn-body p {
  margin: 0 0 10px;
}
.den__turn--assistant .den__turn-body p:last-child { margin-bottom: 0; }
.den__turn--assistant .den__turn-body ul {
  margin: 0 0 10px;
  padding-left: 20px;
  list-style: disc;
}
.den__turn--assistant .den__turn-body ul:last-child { margin-bottom: 0; }
.den__turn--assistant .den__turn-body li {
  margin: 0 0 4px;
  line-height: 1.55;
}
.den__turn--assistant .den__turn-body li:last-child { margin-bottom: 0; }
.den__turn--assistant .den__turn-body strong { color: var(--den-ink); font-weight: 700; }
.den__turn--assistant .den__turn-body em { color: var(--den-ink-70); font-style: italic; }
.den__turn--assistant .den__turn-body a {
  color: var(--den-sage);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.den__turn--assistant .den__turn-body a:hover {
  border-bottom-color: var(--den-sage);
}
.den__turn--pending .den__turn-body {
  color: var(--den-ink-50);
  font-style: italic;
}
.den__turn--pending .den__turn-body::after {
  content: '…';
  display: inline-block;
  animation: den-dots 1.2s steps(4, end) infinite;
  overflow: hidden;
  vertical-align: bottom;
  width: 1.2ch;
}
@keyframes den-dots {
  from { width: 0; }
  to   { width: 1.4ch; }
}

.den__turn--typing .den__turn-body::after {
  content: '';
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--den-sage, currentColor);
  border-radius: 1px;
  animation: den-cursor 1s steps(2, start) infinite;
}
@keyframes den-cursor {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .den__turn--typing .den__turn-body::after { display: none; }
}

/* Sources + feedback */
.den__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(63,85,68,0.10);
}
.den__sources-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--den-ink-50);
  margin-right: 2px;
}
.den__source {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--den-sage-soft);
  color: var(--den-sage);
  border: 1px solid rgba(63,85,68,0.14);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.den__source:hover {
  background: rgba(63,85,68,0.14);
  border-color: rgba(63,85,68,0.30);
}
.den__source--flat {
  background: transparent;
  color: var(--den-ink-70);
  border-color: rgba(63,85,68,0.20);
  cursor: default;
}
.den__source--flat:hover {
  background: transparent;
  border-color: rgba(63,85,68,0.20);
}

.den__followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.den__followups-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--den-ink-50);
  margin-right: 2px;
}
.den__followup {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--den-ink);
  border: 1px solid rgba(63,85,68,0.22);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.08s ease;
}
.den__followup:hover {
  background: var(--den-sage-soft);
  border-color: var(--den-sage);
  color: var(--den-sage);
}
.den__followup:active {
  transform: translateY(1px);
}
.den__followup::before {
  content: '→';
  margin-right: 6px;
  color: var(--den-sage);
  font-weight: 500;
}

/* ── Rich embeds (race, honest record) ─────────────────────── */
.den__embeds {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.den__embed {
  display: block;
  padding: 12px 14px;
  background: var(--den-surface);
  border: 1px solid var(--den-border-strong);
  border-radius: 12px;
  text-decoration: none;
  color: var(--den-ink);
  transition: border-color 0.15s ease, background 0.15s ease,
              transform 0.08s ease;
}
.den__embed:hover {
  border-color: var(--den-sage);
  background: var(--den-sage-soft);
}
.den__embed:active {
  transform: translateY(1px);
}
.den__embed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.den__embed-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--den-sage);
  padding: 2px 8px;
  background: var(--den-sage-soft);
  border-radius: 4px;
}
.den__embed-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--den-ink);
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}
.den__embed-meta {
  font-size: 12px;
  color: var(--den-ink-50);
  white-space: nowrap;
}
.den__embed-body {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: baseline;
  padding: 6px 0 8px;
  border-top: 1px solid var(--den-border);
  border-bottom: 1px solid var(--den-border);
}
.den__embed-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.den__embed-stat--right {
  margin-left: auto;
  text-align: right;
}
.den__embed-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--den-ink-50);
}
.den__embed-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--den-ink);
  line-height: 1.2;
}
.den__embed-stat-value--won {
  color: var(--den-sage);
}
.den__embed-stat-value--muted {
  color: var(--den-ink-50);
  font-weight: 500;
}
.den__embed-foot {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--den-sage);
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .den__embed-body { gap: 12px 16px; }
  .den__embed-title { font-size: 15px; }
}
.den__fb {
  display: inline-flex;
  gap: 4px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.den__turn--assistant:hover .den__fb { opacity: 1; }
.den__fb-btn {
  padding: 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--den-ink-50);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.den__fb-btn:hover {
  background: var(--den-user-bg);
  color: var(--den-ink);
}
.den__fb-btn--on {
  background: var(--den-sage-soft);
  color: var(--den-sage);
  border-color: rgba(63,85,68,0.20);
}

/* ── Composer ──────────────────────────────────────────────── */
.den__composer {
  /* DEN-SHELL-1 · No longer sticky — it is the last row of the shell's
     flex column, so it is pinned to the bottom of the viewport by the
     layout itself rather than by scroll position. flex: 0 0 auto keeps
     it at its natural height while the thread takes the slack. */
  position: relative;
  flex: 0 0 auto;
  margin: 0 auto;
  width: 100%;
  /* DEN-WIDTH-1 · Tracks the frame rather than its own 740px cap, so
     the input pill lines up with the thread above it at any width. */
  max-width: none;
  background: var(--den-bg);
  padding: 6px 0 16px;
}
.den__composer::before {
  /* Fade over the last of the thread so a long transcript dissolves
     into the composer instead of ending on a hard cut. Same effect as
     before; it now sits above a real boundary rather than under a
     floating pill. */
  content: '';
  position: absolute;
  inset: -28px 0 auto 0;
  height: 28px;
  background: linear-gradient(to top, var(--den-bg), rgba(250,248,242,0));
  pointer-events: none;
}
.den__composer-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 10px 18px;
  background: var(--den-surface);
  border: 1px solid var(--den-border-strong);
  border-radius: 20px;
  box-shadow: 0 8px 28px -12px rgba(28,28,25,0.14);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.den__composer-inner:focus-within {
  border-color: var(--den-sage);
  box-shadow: 0 8px 28px -8px rgba(63,85,68,0.22);
}
.den__input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  resize: none;
  font: inherit;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--den-ink);
  padding: 8px 0;
  max-height: 200px;
  min-height: 26px;
}
.den__input::placeholder { color: var(--den-ink-30); }

.den__send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--den-ink);
  color: var(--den-on-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.den__send:hover { background: var(--den-ink-invert); }
.den__send:disabled {
  background: var(--den-ink-30);
  cursor: not-allowed;
}
.den__send:active { transform: scale(0.96); }

.den__composer-hint {
  margin: 8px 6px 0;
  font-size: 11.5px;
  color: var(--den-ink-50);
  text-align: center;
}

/* ── Quota meter above composer ─────────────────────────────── */
.den__meter {
  margin: 0 6px 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--den-surface);
  border: 1px solid var(--den-border);
  font-variant-numeric: tabular-nums;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.den__meter--warn {
  border-color: rgba(184, 135, 31, 0.35);
  background: var(--den-warn-bg);
}
.den__meter--critical {
  border-color: rgba(138, 46, 10, 0.35);
  background: var(--den-crit-bg);
}
.den__meter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 12.5px;
  color: var(--den-ink-70);
}
.den__meter-label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--den-ink-50);
}
.den__meter-count {
  font-weight: 600;
  color: var(--den-ink);
}
.den__meter-count strong { font-size: 14px; }
.den__meter-slash {
  color: var(--den-ink-30);
  margin: 0 1px;
}
.den__meter-reset {
  color: var(--den-ink-50);
  font-size: 11.5px;
}
.den__meter-upgrade {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--den-sage);
  color: var(--den-surface);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.15s ease;
}
.den__meter-upgrade:hover {
  background: var(--den-sage-strong);
}
.den__meter--critical .den__meter-upgrade {
  background: var(--den-crit-ink);
}
.den__meter-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: var(--den-neutral-bg);
  overflow: hidden;
}
.den__meter-fill {
  display: block;
  height: 100%;
  background: var(--den-sage);
  border-radius: 999px;
  transition: width 0.35s ease, background 0.2s ease;
}
.den__meter--warn .den__meter-fill     { background: var(--den-gold); }
.den__meter--critical .den__meter-fill { background: var(--den-crit-ink); }
.den__meter-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--den-ink-70);
  min-height: 1em;
}
.den__meter-note:empty { display: none; }
.den__meter--critical .den__meter-note { color: var(--den-crit-ink); }
.den__composer-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--den-user-bg);
  border: 1px solid var(--den-border);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--den-ink-70);
  vertical-align: baseline;
}

/* ── Closed / coming-soon state ─────────────────────────────── */
.den__closed {
  max-width: 520px;
  margin: 80px auto 120px;
  padding: 32px 24px;
  text-align: center;
  background: var(--den-surface);
  border: 1px solid var(--den-border);
  border-radius: 16px;
}
.den__closed .den__llama,
.den__closed .den__welcome-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}
.den__closed-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  color: var(--den-ink);
  margin: 0 0 14px;
}
.den__closed-body {
  color: var(--den-ink-70);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto 14px;
  max-width: 40ch;
}
.den__closed-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 22px;
  background: var(--den-sage);
  color: var(--den-on-accent);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 12.5px;
  text-transform: uppercase;
}
.den__closed-cta:hover { background: var(--den-sage); }

/* ── Tablet — narrower sidebar ──────────────────────────────── */
@media (max-width: 1024px) {
  .den { --den-sidebar-w: 220px; }
  .den-sidebar { padding: 16px 10px 20px; }
}

/* ── Mobile — sidebar becomes an off-canvas drawer ──────────── */
@media (max-width: 780px) {
  .den {
    /* DEN-SHELL-1 · was `display: block`. The sidebar is off-canvas
       (position: fixed) at this width, so the shell is a single
       column — but it still has to be a flex column that clips, or
       the frame cannot claim the remaining height and the document
       takes the scroll back. */
    display: flex;
    flex-direction: column;
    padding-top: 8px;
  }
  .den__sidebar-toggle { display: inline-flex; margin: 8px 20px 0; }
  /* DEN-SHEET-1 · A bottom sheet, not a left drawer.
   *
   * The drawer slid in from the left edge, which is where iOS reads a
   * swipe as "go back" — so the gesture that opens it is the gesture
   * that leaves the page, and the two compete. A sheet rises from the
   * thumb instead, which is also where the hand already is.
   *
   * Same class and same toggle: `.is-sidebar-open` on `.den`, set by
   * the Features button. Only the geometry changes, so nothing in
   * den.js needed touching.
   */
  .den-sidebar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    /* Never taller than the thumb can reach back over, and never so
       short that the list is a peephole. */
    height: auto;
    max-height: min(74dvh, 640px);
    transform: translateY(100%);
    transition: transform 0.24s cubic-bezier(.32, .72, 0, 1);
    z-index: 40;
    border-right: 0;
    border-top: 1px solid var(--den-border-strong);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px -10px rgba(28, 28, 25, 0.26);
    padding-top: 8px;
    /* Clears the home indicator on a notched phone. */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* The grab handle. Says "this drags down" without a word. */
  .den-sidebar::before {
    content: '';
    display: block;
    /* flex-basis, not just height: .den-sidebar is a flex column, so
       the handle becomes a flex item and shrinks to nothing on a
       height alone — it computed to 0px. */
    flex: 0 0 4px;
    width: 38px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 2px;
    background: var(--den-border-strong);
  }
  .den.is-sidebar-open .den-sidebar {
    transform: translateY(0);
  }
  .den.is-sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(28,28,25,0.28);
    z-index: 35;
    animation: den-fade-in 0.18s ease-out;
  }
  @keyframes den-fade-in {
    from { opacity: 0; } to { opacity: 1; }
  }
  .den__frame { padding: 16px 14px 0; min-height: 0; flex: 1 1 auto; }
  .den__header { padding: 4px 2px 16px; margin-bottom: 18px; }
  .den__title { font-size: 19px; }
  .den__welcome { padding: 32px 8px 24px; }
  .den__welcome-title { font-size: 24px; }
  .den__starters { grid-template-columns: 1fr; }
  .den__composer { padding-bottom: 12px; }
  .den__fb { opacity: 1; }

  /* DEN-SHELL-1 · The composer now has a fixed budget instead of an
     unbounded document to float over, so anything inside it costs the
     thread directly. On a 700px-tall phone the quota meter was 108px —
     larger than the input pill at 70px — because the label, count,
     reset note and Upgrade link each wrapped onto their own row.
     Tighten it: the reset note is dropped (the header chip already
     carries "N of M left today" and its title attribute repeats the
     reset time) and the rest is packed onto one line. Everything else,
     including the Upgrade CTA, stays. */
  .den__meter { margin: 0 2px 8px; padding: 7px 10px; border-radius: 10px; }
  .den__meter-row { gap: 2px 8px; font-size: 12px; flex-wrap: nowrap; }
  .den__meter-reset { display: none; }
  .den__meter-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .den__meter-upgrade { margin-left: auto; white-space: nowrap; }
  .den__meter-bar { margin-top: 6px; }
}

/* ══════════════════════════════════════════════════════════
   STREAMING UI  (PR-DEN-1: "Make it feel alive")
   Rendered by den.js during a streaming ask. All rules here
   are additive - nothing pre-existing changes visual weight
   unless a status/streaming/interrupted state applies.
   ══════════════════════════════════════════════════════════ */

/* Status line: "Checking Wikipedia..." etc. Sits above the
   turn body while the stream is warming up + between tool calls. */
.den__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
  font-size: 13px;
  font-style: italic;
  color: var(--den-muted-ink);
  letter-spacing: 0.01em;
}
.den__status::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: den-status-pulse 1.2s ease-in-out infinite;
}
@keyframes den-status-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .den__status::before { animation: none; opacity: 0.7; }
}

/* Streaming state: token cursor blink at the end of the body.
   Uses ::after so it goes away automatically when we swap
   textContent for innerHTML at 'done'. */
.den__turn--streaming .den__turn-body::after {
  content: '\25AE';   /* filled block glyph = block-cursor look */
  display: inline-block;
  margin-left: 2px;
  color: var(--den-faint-ink);
  animation: den-cursor-blink 1s steps(2) infinite;
}
@keyframes den-cursor-blink {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .den__turn--streaming .den__turn-body::after { animation: none; }
}

/* Interrupted state: user hit Stop mid-stream. Keep the partial
   output but grey it slightly so it's not mistaken for a complete
   answer. The " [stopped]" note appended in JS carries the label. */
.den__turn--interrupted .den__turn-body { color: var(--den-muted-ink); }
.den__turn-note {
  font-style: italic;
  color: var(--den-faint-ink);
  font-size: 12px;
}

/* Send button in Stop mode. Kept minimal - just an inversion
   so it's obviously a different affordance. */
.den__send--stop {
  background: var(--den-stop) !important;   /* burnt-amber = "stop" */
  color: var(--den-on-accent) !important;
}
.den__send--stop:hover { background: var(--den-stop-hi) !important; }

/* Per-turn controls: Copy / Retry row under the response. */
.den__turn-controls {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e5e7eb;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
.den__turn:hover .den__turn-controls,
.den__turn:focus-within .den__turn-controls {
  opacity: 1;
}
/* Mobile: no hover, keep them always visible. */
@media (hover: none) {
  .den__turn-controls { opacity: 1; }
}
.den__turn-ctrl {
  border: 1px solid var(--den-border);
  background: var(--den-surface);
  color: var(--den-ink-70);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.den__turn-ctrl:hover {
  background: var(--den-user-bg);
  color: var(--den-ink);
  border-color: var(--den-border-strong);
}


/* ═══ Desktop readability uplift ═══════════════════════════════
 * The base sizes (15/15.5px) were tuned for mobile. On a 780px
 * pane at 15.5px lines run ~90ch - past the 65-75ch sweet spot -
 * and skim time drops. We bump body text at ≥900px, again at
 * ≥1200px, and cap the assistant reading column so long
 * paragraphs stay in the comfortable band. Mobile untouched.
 * ═════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .den__turn--user .den__turn-body {
    font-size: 16px;
    line-height: 1.6;
  }
  .den__turn--assistant .den__turn-body {
    font-size: 16.5px;
    line-height: 1.7;
  }
  .den__turn--assistant .den__turn-body li { line-height: 1.6; }
  /* DEN-WIDTH-1 · The reading measure applies to prose only.
   *
   * It used to be a hard 68ch on .den__turn-inner, which capped the
   * whole assistant turn — cards, tables and embeds included. That is
   * also why widening the frame alone would not have helped: the
   * column would have grown while everything inside it stayed the same
   * width, just pushed to the left.
   *
   * Targeting text-level children by tag keeps long paragraphs
   * readable while letting a racecard, a market-pulse table or an
   * embed use the full column — those earn their width in columns of
   * data, not characters. Anything the markdown pipeline or
   * augment_reply_html emits as a div/table/figure is exempt by
   * omission, which is the behaviour we want as new card types ship.
   *
   * Below 900px this block does not apply, and the viewport is
   * narrower than the measure anyway, so it is a no-op on mobile. */
  .den__turn--assistant .den__turn-inner { max-width: none; }
  .den__turn--assistant .den__turn-body > p,
  .den__turn--assistant .den__turn-body > ul,
  .den__turn--assistant .den__turn-body > ol,
  .den__turn--assistant .den__turn-body > h1,
  .den__turn--assistant .den__turn-body > h2,
  .den__turn--assistant .den__turn-body > h3,
  .den__turn--assistant .den__turn-body > h4,
  .den__turn--assistant .den__turn-body > blockquote {
    max-width: var(--den-measure, none);
  }
}
@media (min-width: 1200px) {
  .den__turn--user .den__turn-body     { font-size: 17px; }
  .den__turn--assistant .den__turn-body { font-size: 17.5px; }
}


/* ═══ Command palette (PR-DEN-slice-2) ═══════════════════════
 * Popover above the composer, triggered by typing '/' as the
 * first character. Filters a registry of free commands + example
 * paid prompts. Match the DEN's editorial cream + sage palette.
 * ═════════════════════════════════════════════════════════════ */
.den__composer-inner {
  position: relative;   /* Positioning root for the popover. */
}
.den__palette {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  background: var(--den-surface);
  border: 1px solid var(--den-border-strong);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(28, 28, 25, 0.14),
              0 2px 4px  var(--den-neutral-bg);
  z-index: 20;
  animation: den-palette-in 0.12s ease-out both;
}
@keyframes den-palette-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.den__palette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--den-border);
  background: var(--den-sidebar-bg);
  border-radius: 14px 14px 0 0;
}
.den__palette-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--den-sage);
}
.den__palette-hint {
  font-size: 11px;
  color: var(--den-ink-50);
  display: flex;
  gap: 6px;
  align-items: center;
}
.den__palette-hint kbd {
  font-family: inherit;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--den-border-strong);
  border-radius: 4px;
  background: var(--den-surface);
  color: var(--den-ink-70);
}
.den__palette-list {
  padding: 4px 0;
}
.den__palette-cat {
  padding: 10px 16px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--den-ink-50);
}
.den__palette-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.08s;
}
.den__palette-row:hover,
.den__palette-row--active {
  background: var(--den-sage-soft);
}
.den__palette-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.den__palette-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--den-ink);
  line-height: 1.3;
}
.den__palette-hint-text {
  font-size: 12.5px;
  color: var(--den-ink-50);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.den__palette-cost {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
}
.den__palette-cost--free {
  background: rgba(47, 122, 74, 0.10);
  color: var(--den-green);
}
.den__palette-cost--paid {
  background: rgba(168, 107, 18, 0.10);
  color: var(--den-amber);
}

/* ── DEN-TIER-3 · Locked rows ─────────────────────────────────
 * A gated command stays listed and searchable. Hiding it would make
 * the paid tier invisible to exactly the people deciding whether to
 * buy it — the padlock is the pitch.
 *
 * Dimmed, not disabled: the row stays a real button and stays
 * keyboard-reachable, and selecting it opens the upgrade prompt. A
 * `disabled` attribute would drop it out of the tab order and leave
 * the Cub no way to find out why it is greyed. */
.den__palette-cost--locked {
  background: var(--den-sage-soft);
  color: var(--den-sage);
}
.den__palette-row--locked .den__palette-label,
.den__palette-row--locked .den__palette-hint-text {
  color: var(--den-ink-50);
}
.den__palette-lock {
  margin-left: 6px;
  font-size: 10px;
  /* The glyph carries its own colour; opacity stops it competing with
     the label it sits beside. */
  opacity: 0.75;
}

/* ── DEN-TIER-3 · Upgrade prompt ──────────────────────────────
 * Rendered as an assistant turn rather than a toast: the Cub asked
 * for something and this is the answer, so it belongs in the
 * transcript, stays scrolled back to, and does not interrupt.
 * Sage rather than the amber used for quota warnings — this is not an
 * error state, it is a door. */
.den__turn--upgrade .den__turn-body {
  color: var(--den-ink);
}
.den__upgrade-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--den-sage);
  color: var(--den-on-accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
.den__upgrade-cta:hover { background: var(--den-sage-strong); }
.den__upgrade-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--den-ink-50);
}
.den__palette-empty {
  padding: 16px;
  text-align: center;
  color: var(--den-ink-50);
  font-size: 13px;
}
.den__palette-empty kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--den-border-strong);
  border-radius: 4px;
  background: var(--den-surface);
  color: var(--den-ink-70);
}
/* Composer hint kbd chips match the palette's — reads as one system. */
.den__composer-hint kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--den-border-strong);
  border-radius: 4px;
  background: var(--den-surface);
  color: var(--den-ink-70);
}

/* Narrow phones: shrink hint chips + tighten spacing. */
@media (max-width: 640px) {
  .den__palette {
    max-height: 60vh;
  }
  .den__palette-hint {
    display: none; /* Header chip text drops - keyboard nav isn't the primary flow on touch. */
  }
  .den__palette-row {
    padding: 10px 14px;
  }
  .den__palette-label       { font-size: 15px; }
  .den__palette-hint-text   { font-size: 12px; }
}


/* ═══ Slice 6 - response cost badges ══════════════════════
 * Small chip above the follow-ups strip that classifies HOW an
 * assistant reply was computed:
 *   ⚡ Instant       - direct.* (SQL / cache / pure math), £0
 *   🧠 Investigation - LLM turn, spent one of the 3/day quota
 *
 * Rendered server-side for historical turns (den_badge_html filter)
 * and client-side for live-streamed turns (renderBadge in den.js).
 * Both paths produce the same markup so styles are shared.
 * ═════════════════════════════════════════════════════════════ */
.den__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.den__badge-icon  { font-size: 12px; line-height: 1; }
.den__badge-label { font-size: 11px; letter-spacing: 0.06em; }

.den__badge--instant {
  background: rgba(47, 122, 74, 0.10);
  color: var(--den-green);
}
.den__badge--investigation {
  background: rgba(184, 135, 31, 0.10);   /* gold-soft, matches quota meter */
  color: var(--den-gold);
}


/* ═══ Slice 29a — Mobile chat polish ═══════════════════════════
 * All changes below the 780px breakpoint. Goal: closer to the
 * native-app touch feel — bigger tap targets, more breathing
 * room, less inherited desktop chrome. Zero JS, zero template
 * changes; safe to revert as one block.
 *
 * Rules of thumb:
 *   - Primary tap target ≥ 44px (Apple/Google)
 *   - Composer + send is the #1 interaction, so it goes further
 *   - Preserve the chat-first landing (no home screen, no bottom
 *     nav) — this pass polishes what's there, not the shape.
 * ═════════════════════════════════════════════════════════════ */

@media (max-width: 780px) {
  /* Frame — a little more horizontal breathing room. DEN-SHELL-1
     dropped the 220px bottom reserve here too; the composer is a real
     row at the foot of the shell now, not an overlay to dodge. */
  .den__frame { padding: 16px 18px 0; }
  .den__turn  { scroll-margin-bottom: 12px; }

  /* Turns — bigger gaps so bigger elements below don't collide. */
  .den__thread { gap: 26px; }

  /* Assistant avatar — anchors the thread on a narrow column. */
  .den__turn--assistant .den__turn-avatar {
    width: 36px;
    height: 36px;
  }

  /* User bubble — reclaim horizontal room; a phone doesn't need
     the desktop breathing gutter on the right. */
  .den__turn--user .den__turn-inner { max-width: 88%; }
  .den__turn--user .den__turn-body {
    padding: 14px 18px;
    font-size: 15.5px;
  }

  /* Composer — the primary interaction. Taller input, bigger
     send button, extra safe-area clearance from the bottom. */
  .den__composer { padding-top: 8px; }
  .den__composer-inner {
    padding: 12px 12px 12px 18px;
    border-radius: 22px;
  }
  .den__input {
    font-size: 16px;         /* ≥16px stops iOS Safari from zooming on focus */
    padding: 10px 0;
    min-height: 28px;
  }
  .den__send {
    width: 44px;
    height: 44px;
  }
  .den__send svg { width: 18px; height: 18px; }

  /* Follow-up chips — tapped constantly, deserve a real tap
     target. Larger padding + font, wider gap so a thumb can't
     land on two chips at once. */
  .den__followups { gap: 10px; margin-top: 14px; }
  .den__followup {
    padding: 10px 14px;
    font-size: 14px;
    min-height: 40px;
  }

  /* Turn-level controls (Copy / Retry / Delete) — currently 24px
     tall, bump so a thumb hits them cleanly. */
  .den__turn-ctrl {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 32px;
  }

  /* Feedback buttons — same reasoning. */
  .den__fb-btn {
    min-height: 32px;
    min-width: 32px;
  }
}


/* Narrower phones — one-handed reach. */
@media (max-width: 480px) {
  /* Composer hint (⏎ send · Shift+⏎ new line) is desktop UX —
     wastes vertical space on touch, hide entirely. */
  .den__composer-hint { display: none; }

  /* Send button larger for thumb-reach on small screens. */
  .den__send {
    width: 48px;
    height: 48px;
  }
  .den__send svg { width: 20px; height: 20px; }

  /* Composer padding tuned so total inner height still lands
     ~56px with the bigger send button. */
  .den__composer-inner { padding: 10px 10px 10px 18px; }

  /* Trim frame padding a hair so the send button doesn't feel
     jammed against the viewport edge. */
  .den__frame { padding: 12px 16px 0; }
}


/* ── DEN-API-LOOKUP · PR-4b · Live racecard card ─────────────
   Rich card the agent injects when get_live_racecard OK's, and
   the DirectCommand SINGLE path renders as its reply_html_override.
   Two spellings of the same idea:
     .lr__masthead  = "meeting header" (course + date)
     .lr__race      = one race panel   (repeats per race)
   Card is scoped inside .den__msg-content, so the base editorial
   palette + font stack propagate.  Runners table uses a CSS grid
   rather than <table> so we can control column widths cleanly
   and let long horse names wrap without breaking layout. */

.lr {
  margin-top: 14px;
  padding: 18px 20px 16px;
  background: var(--den-surface);
  border: 1px solid var(--den-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 28, 25, 0.03);
  overflow: hidden;
}

.lr__masthead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--den-border);
  margin-bottom: 14px;
}
.lr__masthead-mark {
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}
.lr__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--den-ink-50);
  margin-bottom: 2px;
}
.lr__course {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--den-ink);
  line-height: 1.2;
}
.lr__course-date {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--den-ink-50);
  letter-spacing: 0;
}

.lr__race + .lr__race {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--den-border);
}

.lr__race-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.lr__off-time {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--den-ink);
  line-height: 1;
  padding: 6px 12px;
  background: var(--den-sage-soft);
  color: var(--den-sage);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.lr__race-meta {
  min-width: 0;
}
.lr__race-name {
  font-weight: 600;
  color: var(--den-ink);
  font-size: 14.5px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lr__race-sub {
  font-size: 11.5px;
  color: var(--den-ink-50);
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.lr__dot {
  margin: 0 5px;
  color: var(--den-ink-30);
}
.lr__field-size {
  font-size: 11px;
  color: var(--den-ink-70);
  padding: 3px 9px;
  border: 1px solid var(--den-border);
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lr__runners {
  display: block;
  border: 1px solid var(--den-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--den-surface);
}
.lr__runner {
  display: grid;
  grid-template-columns: 46px minmax(0, 1.6fr) minmax(0, 1.4fr) 70px 62px;
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  border-top: 1px solid var(--den-border);
  font-size: 13px;
}
.lr__runner:first-child { border-top: 0; }
.lr__runner--head {
  background: rgba(28, 28, 25, 0.03);
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--den-ink-50);
}
.lr__runner--fav {
  background: linear-gradient(90deg,
    rgba(184, 135, 31, 0.06) 0%,
    rgba(184, 135, 31, 0) 60%);
}
.lr__col--num {
  font-weight: 700;
  color: var(--den-ink-70);
  font-variant-numeric: tabular-nums;
}
.lr__draw {
  font-weight: 400;
  color: var(--den-ink-30);
  font-size: 11px;
  margin-left: 3px;
}
.lr__col--horse { min-width: 0; }
.lr__horse-name {
  font-weight: 600;
  color: var(--den-ink);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lr__horse-age {
  font-size: 10.5px;
  color: var(--den-ink-50);
  font-weight: 500;
  margin-left: 4px;
}
.lr__col--conn {
  color: var(--den-ink-70);
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lr__jockey { color: var(--den-ink); }
.lr__trainer {
  color: var(--den-ink-50);
  margin-left: 4px;
}
.lr__trainer::before {
  content: '· ';
  color: var(--den-ink-30);
}
.lr__form {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--den-ink-70);
  background: rgba(28, 28, 25, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.lr__odds {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--den-ink);
  font-size: 13px;
}
.lr__odds--fav {
  color: var(--den-gold);
}
.lr__mute { color: var(--den-ink-30); }

.lr__more {
  margin: 10px 0 0;
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--den-ink-70);
  background: rgba(28, 28, 25, 0.03);
  border-radius: 8px;
}

.lr__foot {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--den-border);
  font-size: 11px;
  color: var(--den-ink-50);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Composite wrapper — LLM prose sits above the card via the
   augmenter.  No extra styling needed beyond the card's own
   margin-top, but keep the class hook in case we want a
   different visual treatment for LLM-injected cards vs
   DirectCommand-rendered ones later. */
.den__live-racecard-wrap { display: block; }

/* Mobile — compress the runner grid so long horse names have
   room + the conn column collapses under the name.  The old
   5-column layout doesn't fit under 420px. */
@media (max-width: 520px) {
  .lr {
    padding: 14px 12px 12px;
  }
  .lr__race-head {
    grid-template-columns: auto 1fr;
    row-gap: 6px;
  }
  .lr__field-size {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .lr__runner {
    grid-template-columns: 36px 1fr 60px;
    grid-template-areas:
      "num horse odds"
      "num conn form";
    row-gap: 2px;
    padding: 9px 10px;
  }
  .lr__runner--head { display: none; }
  .lr__col--num  { grid-area: num; }
  .lr__col--horse{ grid-area: horse; }
  .lr__col--conn { grid-area: conn; font-size: 11.5px; }
  .lr__col--odds { grid-area: odds; }
  .lr__col--form { grid-area: form; justify-self: end; }
}


/* ─── HR-SUM · Multi-product Honest Record card ─────────────
   Rendered on click of the sidebar "Honest Record" tile via
   the direct.honest_record_summary command. Six product rows
   with strike + P/L; muted row when a product has no settled
   picks in the window so the whole stack is visible at once. */

.den-hr-sum {
  border: 1px solid var(--den-border);
  background: var(--den-surface);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 12px 0 8px;
}
.den-hr-sum__hdr {
  border-bottom: 1px solid var(--den-border);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.den-hr-sum__eyebrow {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(212, 175, 55, 0.10);
  color: var(--den-gold);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.den-hr-sum__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  color: var(--den-ink);
  margin: 0 0 6px;
  line-height: 1.25;
}
.den-hr-sum__lede {
  margin: 0;
  color: var(--den-ink-70);
  font-size: 13.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.den-hr-sum__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.den-hr-sum__row {
  border: 1px solid var(--den-border);
  border-left: 4px solid rgba(0, 0, 0, 0.20);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
}
.den-hr-sum__row--pos  { border-left-color: var(--den-pos); }
.den-hr-sum__row--neg  { border-left-color: var(--den-neg); }
.den-hr-sum__row--flat { border-left-color: rgba(0, 0, 0, 0.20); }
.den-hr-sum__row--quiet { opacity: 0.65; }

.den-hr-sum__row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.den-hr-sum__label {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  color: var(--den-ink);
  text-decoration: none;
  font-weight: 600;
}
.den-hr-sum__label:hover { text-decoration: underline; }
.den-hr-sum__brand {
  font-size: 10.5px;
  color: var(--den-ink-30);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.den-hr-sum__quiet-note {
  font-size: 12.5px;
  color: var(--den-ink-30);
  font-style: italic;
}

.den-hr-sum__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: baseline;
}
.den-hr-sum__stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.den-hr-sum__stat--pl { margin-left: auto; text-align: right; }
.den-hr-sum__stat-val {
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 14px;
  color: var(--den-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.den-hr-sum__row--pos .den-hr-sum__stat--pl .den-hr-sum__stat-val { color: var(--den-pos); }
.den-hr-sum__row--neg .den-hr-sum__stat--pl .den-hr-sum__stat-val { color: var(--den-neg); }
.den-hr-sum__stat-lbl {
  font-size: 10px;
  color: var(--den-ink-30);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.den-hr-sum__foot {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--den-ink-30);
  font-style: italic;
}
.den-hr-sum__empty {
  padding: 16px 4px 4px;
  color: var(--den-ink-70);
  font-size: 13.5px;
  line-height: 1.6;
}


/* ─── DEN-TR · Top Rated lead-signal card ─────────────────
   The Ask LLaMa "Top Rated" tile renders this card via
   direct.top_rated. Editorial hero for today's convergence
   pick (lead) + a compact runner-up + one-tap deep link
   into Sly Man's Top Rated Today article. */

.den-tr {
  border: 1px solid var(--den-border);
  background: var(--den-surface);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 12px 0 8px;
  /* Capped like .den-bod and .den-htw so the three picks cards read
     as one family and a value cannot drift a screen from its horse. */
  max-width: 720px;
}
.den-tr__hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--den-border);
}
.den-tr__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--den-ink-30);
}
.den-tr__brand {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(212, 175, 55, 0.10);
  color: var(--den-gold);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Lead — the marquee row. */
.den-tr__lead {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 14px;
  align-items: flex-start;
}
.den-tr__rail {
  border-radius: 2px;
  min-height: 88px;
  align-self: stretch;
}
.den-tr__rail--lead { background: var(--den-pos); }
.den-tr__lead-body { min-width: 0; }
.den-tr__lead-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--den-pos);
  margin-bottom: 6px;
}
.den-tr__horse {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  color: var(--den-ink);
  margin: 0 0 4px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.den-tr__meta {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--den-ink-70);
  font-variant-numeric: tabular-nums;
}
.den-tr__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.den-tr__chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  color: var(--den-ink-70);
  white-space: nowrap;
}
.den-tr__chip--teal   { background: var(--den-hue-teal-bg); border-color: var(--den-hue-teal-line); color: var(--den-hue-teal-ink); }
.den-tr__chip--green  { background: var(--den-hue-green-bg); border-color: var(--den-hue-green-line); color: var(--den-hue-green-ink); }
.den-tr__chip--amber  { background: var(--den-hue-amber-bg); border-color: var(--den-hue-amber-line); color: var(--den-hue-amber-ink); }
.den-tr__chip--purple { background: var(--den-hue-purple-bg); border-color: var(--den-hue-purple-line); color: var(--den-hue-purple-ink); }
.den-tr__chip--blue   { background: var(--den-hue-blue-bg); border-color: var(--den-hue-blue-line); color: var(--den-hue-blue-ink); }
.den-tr__chip--coral  { background: var(--den-hue-coral-bg); border-color: var(--den-hue-coral-line); color: var(--den-hue-coral-ink); }

.den-tr__price {
  text-align: right;
  min-width: 78px;
}
.den-tr__price-lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--den-ink-30);
  margin-bottom: 4px;
}
.den-tr__price-val {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  line-height: 1;
  color: var(--den-gold);
  font-variant-numeric: tabular-nums;
}

.den-tr__runner-up {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--den-border);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: baseline;
}
.den-tr__runner-up-lbl {
  grid-column: 1 / span 2;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--den-ink-30);
  margin-bottom: 4px;
}
.den-tr__runner-up-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  color: var(--den-ink);
}
.den-tr__runner-up-meta {
  font-size: 11.5px;
  color: var(--den-ink-30);
  font-variant-numeric: tabular-nums;
}

.den-tr__foot {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--den-ink-30);
  font-style: italic;
  font-variant-numeric: tabular-nums;
}

.den-tr__empty {
  padding: 8px 4px 4px;
}
.den-tr__empty .den-tr__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  color: var(--den-ink);
  margin: 0 0 6px;
}
.den-tr__empty p {
  margin: 0;
  font-size: 13px;
  color: var(--den-ink-70);
  line-height: 1.55;
}

.den-tr__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--den-user-bg);
  border: 1px solid var(--den-border);
  color: var(--den-ink);
  font-size: 12.5px;
  text-decoration: none;
}
.den-tr__cta:hover { background: rgba(212,175,55,0.08); }
.den-tr__cta-arrow { font-size: 15px; margin-left: 8px; }

@media (max-width: 520px) {
  .den-tr__lead {
    grid-template-columns: 4px 1fr;
  }
  .den-tr__price {
    grid-column: 2 / span 1;
    text-align: left;
    margin-top: 6px;
  }
}

/* ══════════════════════════════════════════════════════════
   DEN-SIDEBAR-1 · Sidebar rebuilt around the access ladder.
   
   The old one was forty-odd rows at near-identical weight under
   `DIRECT · £0` headings — implementation detail describing how a
   command executes, not who may run it. This version makes the
   commercial ladder the information architecture, so entitlement is
   stated once per section instead of badged on every row.
   ══════════════════════════════════════════════════════════ */

/* ── Your plan ────────────────────────────────────────────── */
.den-sidebar__plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--den-surface);
  border: 1px solid var(--den-border);
}
.den-sidebar__plan-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.den-sidebar__plan-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--den-sage);
  flex-shrink: 0;
}
.den-sidebar__plan--deep .den-sidebar__plan-dot,
.den-sidebar__plan--marquee .den-sidebar__plan-dot { background: var(--den-gold); }
.den-sidebar__plan-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--den-ink);
}
.den-sidebar__plan-yours {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--den-ink-50);
  margin-left: auto;
}
.den-sidebar__plan-quota {
  font-size: 12px;
  color: var(--den-ink-70);
  font-variant-numeric: tabular-nums;
}
.den-sidebar__plan-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--den-sage);
  text-decoration: none;
  margin-top: 2px;
}
.den-sidebar__plan-cta:hover { text-decoration: underline; }

/* ── Hero ─────────────────────────────────────────────────
   Start My Day is the reason to open the DEN at 8am. On the old
   sidebar it was one row among forty. */
.den-sidebar__hero {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 13px;
  margin-bottom: 16px;
  border: 1px solid var(--den-sage);
  border-radius: 14px;
  background: var(--den-sage-soft);
  color: var(--den-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.15s ease, transform 0.12s ease;
}
.den-sidebar__hero:hover { background: var(--den-sage-tint); }
.den-sidebar__hero:active { transform: scale(0.99); }
.den-sidebar__hero-icon { font-size: 17px; color: var(--den-sage); }
.den-sidebar__hero-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.den-sidebar__hero-title {
  /* DEN-SIDEBAR-1 · Measured after the first pass: this was 13.5px/700
     against rows at 13.5px/600 — the same near-identical weight the
     redesign exists to fix, with only the card background separating
     them. The ladder now steps 15 / 12.5 / 10.5 so hierarchy survives
     without relying on colour. */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.den-sidebar__hero-sub { font-size: 11.5px; color: var(--den-ink-70); }
.den-sidebar__hero-go { margin-left: auto; color: var(--den-sage); font-size: 15px; }

/* ── Sections ─────────────────────────────────────────────
   <details>, so collapsing needs no JS and stays keyboard
   reachable. The long tail is present without crowding the rows
   people actually come for. */
.den-sidebar__section { margin-bottom: 4px; }
.den-sidebar__summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
}
.den-sidebar__summary::-webkit-details-marker { display: none; }
.den-sidebar__summary:hover { background: var(--den-sage-soft); }
.den-sidebar__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--den-ink-50);
}
.den-sidebar__chev {
  margin-left: auto;
  color: var(--den-ink-30);
  transition: transform 0.15s ease;
}
.den-sidebar__section[open] > .den-sidebar__summary .den-sidebar__chev {
  transform: rotate(180deg);
}

/* Entitlement stated once, on the heading — never on every row. */
.den-sidebar__badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.den-sidebar__badge--yours {
  background: var(--den-sage-soft);
  color: var(--den-sage);
}
.den-sidebar__badge--locked {
  background: rgba(168, 107, 18, 0.12);
  color: var(--den-amber);
}
.den-sidebar__tagline {
  margin: 0 12px 6px;
  font-size: 11.5px;
  color: var(--den-ink-50);
  font-style: italic;
}

/* A locked section stays legible rather than greyed into noise — it
   is an advert, and an advert nobody can read sells nothing. */
.den-sidebar__section--locked .den-sidebar__item-title { color: var(--den-ink-70); }
.den-sidebar__section--locked .den-sidebar__item { cursor: pointer; }

.den-sidebar__pitch {
  display: block;
  padding: 5px 12px 5px 30px;
  font-size: 12.5px;
  color: var(--den-ink-70);
  position: relative;
}
.den-sidebar__pitch::before {
  content: '∞';
  position: absolute;
  left: 12px;
  color: var(--den-gold);
}

.den-sidebar__unlock {
  display: block;
  margin: 8px 12px 4px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--den-sage);
  color: var(--den-on-accent);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.den-sidebar__unlock:hover { background: var(--den-sage-strong); }

/* ── Rows ─────────────────────────────────────────────────
   Icon + title + sub, so scanning happens on the icon column
   rather than by reading every label. */
.den-sidebar__item-icon {
  font-size: 13px;
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  color: var(--den-ink-50);
}
.den-sidebar__item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* DEN-SIDEBAR-1 · Row type sits a clear step below the hero so the
   eye lands on Start My Day first. Measured, not guessed: the first
   pass had hero and rows within 0.5px and one weight of each other. */
.den-sidebar__item-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
.den-sidebar__item-sub {
  font-size: 11px;
  line-height: 1.35;
  color: var(--den-ink-50);
}

/* ── DEN-BOD-1 · Bet of the Day card ──────────────────────────
   Same shell as .den-tr (border, surface, 12px radius, 18/20
   padding) so the two cards read as one family. What differs is
   the gold rail on the pick, which is the one thing Sly Man's
   own page uses to say "this is the selection" — carrying it
   over keeps the DEN recognisably the same product.
   Type ladder matches the sidebar: 10.5 label / 12.5 body. */
.den-bod {
  border: 1px solid var(--den-border);
  background: var(--den-surface);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 12px 0 8px;
  /* DEN-WIDTH-1 lets a card take the full column, on the grounds that
     cards earn their width in columns of data. This one does — six of
     them — but six columns do not need 1400px, and on a wide monitor
     the first live pick put the price most of a screen away from the
     horse it belonged to. Wide enough for the data, narrow enough
     that a row reads as one row. */
  max-width: 720px;
}
.den-bod__hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--den-border);
}
.den-bod__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--den-ink-30);
}
.den-bod__brand {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--den-gold);
}

/* The pick */
.den-bod__pick { display: flex; gap: 14px; align-items: flex-start; }
.den-bod__rail {
  flex: 0 0 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--den-gold);
}
.den-bod__pick-body { flex: 1 1 auto; min-width: 0; }
.den-bod__horse {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--den-ink);
}
.den-bod__meta {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--den-ink-50);
}
.den-bod__figures {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 12px 0 0;
}
.den-bod__figure { margin: 0; }
.den-bod__figure dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--den-ink-30);
}
.den-bod__figure dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--den-ink);
}
.den-bod__of { font-size: 11px; font-weight: 600; color: var(--den-ink-30); }
.den-bod__state {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
}
.den-bod__conviction {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--den-ink-50);
}
.den-bod__result {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--den-border-strong);
  color: var(--den-ink-70);
  white-space: nowrap;
}
/* A settled winner is the single most important thing on the card, so
   it is filled rather than outlined — the one element that reads at a
   glance from across the page. */
.den-bod__result--won {
  color: var(--den-on-saturated);
  background: var(--den-green);
  border-color: var(--den-green);
}
.den-bod__result--lost { color: var(--den-ink-30); }
.den-bod__result--void,
.den-bod__result--abandoned { color: var(--den-ink-30); font-style: italic; }
.den-bod__pnl { font-size: 12.5px; font-weight: 700; color: var(--den-ink-70); }

/* Why */
.den-bod__why {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--den-border);
}
.den-bod__headline {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--den-ink);
}
.den-bod__narrative {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--den-ink-70);
  max-width: var(--den-measure);
}

/* The field it beat */
.den-bod__field { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--den-border); }
.den-bod__field-label {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--den-ink-30);
}
.den-bod__field-label em { font-style: italic; text-transform: none; letter-spacing: 0; }
.den-bod__rows { list-style: none; margin: 0; padding: 0; }
.den-bod__cols {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--den-ink-30);
  padding-bottom: 5px;
  border-top: 0;
}
.den-bod__cols span:nth-child(n+4) { text-align: right; }
/* A grid, not a flex row with the numbers pushed to the far end:
   columns line up down the list, so the field can be read as a table
   of prices and scores rather than six unrelated lines. */
.den-bod__row {
  display: grid;
  grid-template-columns:
    18px                 /* rank      */
    minmax(0, 1.3fr)     /* horse     */
    minmax(0, 1fr)       /* course    */
    5.5ch                /* price     */
    5ch                  /* score     */
    5ch;                 /* outcome   */
  align-items: baseline;
  gap: 4px 12px;
  padding: 7px 0;
  border-top: 1px solid var(--den-border);
  font-size: 12.5px;
}
.den-bod__row:first-child { border-top: 0; }
.den-bod__rank { font-weight: 700; color: var(--den-ink-30); }
.den-bod__row-horse {
  font-weight: 700;
  color: var(--den-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.den-bod__row-where {
  font-size: 11px;
  color: var(--den-ink-30);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Tabular numerals so prices and scores align on the decimal down the
   column — the whole reason for reading them as a list. */
.den-bod__row-price,
.den-bod__row-score {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.den-bod__row-price { font-weight: 700; color: var(--den-ink-70); }
.den-bod__row-score { color: var(--den-ink-50); }
.den-bod__row-outcome {
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--den-ink-30);
}
.den-bod__row-outcome--won    { color: var(--den-green); }
.den-bod__row-outcome--placed { color: var(--den-ink-70); }

/* Record + link out */
.den-bod__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--den-border);
  font-size: 11.5px;
}
.den-bod__record { color: var(--den-ink-50); font-weight: 600; }
.den-bod__link { color: var(--den-gold); font-weight: 700; text-decoration: none; }
.den-bod__link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .den-bod__pick { flex-wrap: wrap; }
  .den-bod__state { flex-direction: row; align-items: center; width: 100%; }
  /* Drop the course column rather than let six columns crush the
     horse name to an ellipsis. Price and score are what the row is
     for; the meeting is on the full write-up. */
  .den-bod__row  { grid-template-columns: 16px minmax(0, 1fr) 5.5ch 5ch 5ch; }
  .den-bod__row-where, .den-bod__cols span:nth-child(3) { display: none; }
}

/* ── DEN-HTW-1 · Horses to Watch card ─────────────────────────
   Same shell as .den-bod so the picks read as one family, capped
   the same way for the same reason. What is different is the
   spine: these are GROUPED, and the group heading is the thing
   that stops five rows of equal weight reading as a list with no
   order. Confirmed carries the gold rail the Bet of the Day pick
   uses — it means the same thing in both places, that the engines
   agree. */
.den-htw {
  border: 1px solid var(--den-border);
  background: var(--den-surface);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 12px 0 8px;
  max-width: 720px;
}
.den-htw__hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--den-border);
}
.den-htw__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--den-ink-30);
}
.den-htw__brand {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--den-gold);
}

/* Groups */
.den-htw__group { margin-top: 14px; }
.den-htw__group-hdr {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 8px;
}
.den-htw__group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--den-ink-70);
}
.den-htw__group-count {
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--den-sage-tint);
  color: var(--den-ink-70);
}
.den-htw__group-sub {
  flex: 1 1 100%;
  font-size: 11.5px;
  font-style: italic;
  color: var(--den-ink-30);
}
.den-htw__group--confirmed .den-htw__group-title { color: var(--den-gold); }

/* A pick */
.den-htw__pick {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 9px 0 9px 10px;
  border-top: 1px solid var(--den-border);
  border-left: 3px solid transparent;
}
.den-htw__group--confirmed .den-htw__pick { border-left-color: var(--den-gold); }
.den-htw__group--radar     .den-htw__pick { border-left-color: var(--den-border-strong); }

/* The silk. Two colours off the runner, drawn rather than fetched —
   an <img> per pick is five requests for decoration, and the CSP
   blocks off-origin images in published surfaces anyway. */
.den-htw__silk {
  flex: 0 0 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--silk) 0 50%, var(--silk2) 50% 100%);
  color: var(--den-on-saturated);
  font-size: 10.5px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.den-htw__body { flex: 1 1 auto; min-width: 0; }
.den-htw__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}
.den-htw__horse {
  font-size: 14px;
  font-weight: 700;
  color: var(--den-ink);
  text-decoration: none;
}
.den-htw__horse:hover { text-decoration: underline; }
.den-htw__signal {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--den-sage-tint);
  color: var(--den-ink-70);
}
.den-htw__signal--gold  { background: var(--den-gold); color: var(--den-on-saturated); }
.den-htw__signal--green { background: var(--den-green); color: var(--den-on-saturated); }
.den-htw__signal--amber { background: var(--den-amber); color: var(--den-gold-deep); }
.den-htw__where {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--den-ink-30);
}
.den-htw__where a { color: inherit; text-decoration: none; }
.den-htw__where a:hover { text-decoration: underline; }
/* The reason. The whole point of the fix — it was generated, stored
   and rendered on the page, and dropped before it reached here. */
.den-htw__reason {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--den-ink-70);
  max-width: var(--den-measure);
}
.den-htw__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.den-htw__chip {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--den-border-strong);
  color: var(--den-ink-50);
}
.den-htw__figures {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.den-htw__odds {
  font-size: 15px;
  font-weight: 700;
  color: var(--den-ink);
  font-variant-numeric: tabular-nums;
}
.den-htw__sr {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--den-ink-30);
}

.den-htw__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--den-border);
  font-size: 11.5px;
}
.den-htw__record { color: var(--den-ink-50); font-weight: 600; }
.den-htw__link { color: var(--den-gold); font-weight: 700; text-decoration: none; }
.den-htw__link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .den-htw__pick { padding-left: 8px; gap: 9px; }
  .den-htw__reason { font-size: 12px; }
}

/* ── DEN-TR-2 · Top Rated: the lanes under the Fold ───────────
   The card showed one horse and a runner-up line. On a day the
   Fold holds a single name that is a card with one horse on it,
   while the article it links to lists six systems' worth of
   picks. Groups and rows below carry those lanes, in the same
   shape the Horses to Watch card uses so the two read alike. */
.den-tr__lead-value {
  font-variant-numeric: tabular-nums;
  color: var(--den-ink-70);
}
/* The systems behind a consensus, named rather than crammed into
   the label. The label used to carry them inline — "4 systems
   agree (Balanced lens (AI consensus), ...)" — which nests
   brackets and forces a mid-word truncation in any narrow column. */
.den-tr__sources {
  margin: 5px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--den-ink-30);
}

.den-tr__group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--den-border);
}
.den-tr__group-hdr {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin: 0 0 6px;
}
.den-tr__group-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--den-ink-70);
}
.den-tr__group-title--teal   { color: var(--den-hue-teal-ink); }
.den-tr__group-title--green  { color: var(--den-hue-green-ink); }
.den-tr__group-title--amber  { color: var(--den-hue-amber-ink); }
.den-tr__group-title--purple { color: var(--den-hue-purple-ink); }
.den-tr__group-title--blue   { color: var(--den-hue-blue-ink); }
.den-tr__group-title--coral  { color: var(--den-hue-coral-ink); }
.den-tr__group-sub {
  flex: 1 1 100%;
  font-size: 11px;
  font-style: italic;
  color: var(--den-ink-30);
}

/* Aligned columns, so a lane reads as a table of who tops what
   rather than as six unrelated lines. */
.den-tr__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 8ch 6ch;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--den-border);
  font-size: 12.5px;
}
.den-tr__row:first-of-type { border-top: 0; }
.den-tr__row-horse {
  font-weight: 700;
  color: var(--den-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.den-tr__row-where {
  font-size: 11.5px;
  color: var(--den-ink-30);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.den-tr__row-signals {
  text-align: right;
  font-size: 11.5px;
  color: var(--den-ink-50);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.den-tr__row-odds {
  text-align: right;
  font-weight: 700;
  color: var(--den-ink-70);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  /* Drop the meeting rather than crush the horse name to an
     ellipsis; the value and the price are what the row is for. */
  .den-tr__row { grid-template-columns: minmax(0, 1fr) 8ch 6ch; }
  .den-tr__row-where { display: none; }
}

/* ── DEN-RESULT-1 · Results on the Top Rated card ─────────────
   A fifth column on every row, and a badge beside the lead's
   price. The empty state is a middot rather than nothing, so an
   ungraded race holds its column and the rows stay aligned —
   the same rule the Bet of the Day field follows. */
.den-tr__row {
  grid-template-columns:
    minmax(0, 1.25fr)   /* horse   */
    minmax(0, 1fr)      /* meeting */
    8ch                 /* value   */
    6ch                 /* price   */
    5ch;                /* result  */
}
.den-tr__row-result {
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--den-ink-30);
}
.den-tr__row-result--won      { color: var(--den-green); }
.den-tr__row-result--placed   { color: var(--den-ink-70); }
.den-tr__row-result--unplaced { color: var(--den-ink-30); font-weight: 600; }

/* The lead's own result. Filled green on a winner — the one
   element meant to read from across the room. */
.den-tr__result {
  display: inline-block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--den-border-strong);
  color: var(--den-ink-70);
}
.den-tr__result--won {
  color: var(--den-on-saturated);
  background: var(--den-green);
  border-color: var(--den-green);
}
.den-tr__result--placed   { color: var(--den-ink-70); }
.den-tr__result--unplaced,
.den-tr__result--pending  { color: var(--den-ink-30); }

@media (max-width: 560px) {
  .den-tr__row { grid-template-columns: minmax(0, 1fr) 8ch 6ch 5ch; }
}

/* ── DEN-LOD-1 · Lay of the Day card ──────────────────────────
   Same shell and cap as .den-bod / .den-htw / .den-tr. What is
   deliberately different is the rail and the result palette: a
   lay is an opposition bet, so its accent is the amber the rest
   of the DEN uses for caution rather than the gold that means
   "back this". LANDED is still green, because a landed lay is a
   winning bet — but it takes the word LANDED, never "won". */
.den-lod {
  border: 1px solid var(--den-border);
  background: var(--den-surface);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 12px 0 8px;
  max-width: 720px;
}
.den-lod__hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--den-border);
}
.den-lod__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--den-ink-30);
}
.den-lod__brand {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--den-amber);
}

.den-lod__pick { display: flex; gap: 14px; align-items: flex-start; }
.den-lod__rail {
  flex: 0 0 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--den-amber);
}
.den-lod__pick-body { flex: 1 1 auto; min-width: 0; }
.den-lod__horse {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--den-ink);
}
/* The instruction, set apart from the name so the card cannot be
   misread as a horse to back. */
.den-lod__verb {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--den-amber);
  vertical-align: 2px;
  margin-right: 2px;
}
.den-lod__meta { margin: 3px 0 0; font-size: 12.5px; color: var(--den-ink-50); }
.den-lod__figures { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0 0; }
.den-lod__figure { margin: 0; }
.den-lod__figure dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--den-ink-30);
}
.den-lod__figure dd {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--den-ink);
  font-variant-numeric: tabular-nums;
}
.den-lod__of { font-size: 11px; font-weight: 600; color: var(--den-ink-30); }

.den-lod__state {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
}
.den-lod__conviction {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--den-ink-50);
}
.den-lod__result {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--den-border-strong);
  color: var(--den-ink-70);
  white-space: nowrap;
}
.den-lod__result--won {
  color: var(--den-on-saturated);
  background: var(--den-green);
  border-color: var(--den-green);
}
.den-lod__result--lost    { color: var(--den-ink-30); }
.den-lod__result--void,
.den-lod__result--pending { color: var(--den-ink-30); font-style: italic; }
.den-lod__pos { font-size: 11px; color: var(--den-ink-30); }

.den-lod__verdict {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--den-ink-70);
}
.den-lod__verdict--won  { color: var(--den-green); }
.den-lod__verdict--lost { color: var(--den-ink-50); }

.den-lod__why {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--den-border);
}
.den-lod__headline { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--den-ink); }
.den-lod__reason {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--den-ink-70);
  max-width: var(--den-measure);
}

.den-lod__field { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--den-border); }
.den-lod__field-label {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--den-ink-30);
}
.den-lod__field-label em { font-style: italic; text-transform: none; letter-spacing: 0; }
.den-lod__rows { list-style: none; margin: 0; padding: 0; }
.den-lod__row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)   /* favourite */
    minmax(0, 1fr)      /* race      */
    6ch                 /* price     */
    5ch                 /* loses %   */
    7ch;                /* result    */
  align-items: baseline;
  gap: 4px 12px;
  padding: 7px 0;
  border-top: 1px solid var(--den-border);
  font-size: 12.5px;
}
.den-lod__row:first-child { border-top: 0; }
.den-lod__cols {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--den-ink-30);
  padding-bottom: 5px;
}
.den-lod__cols span:nth-child(n+3) { text-align: right; }
.den-lod__row-horse {
  font-weight: 700;
  color: var(--den-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.den-lod__row-where {
  font-size: 11px;
  color: var(--den-ink-30);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.den-lod__row-price,
.den-lod__row-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--den-ink-70);
}
.den-lod__row-pct { color: var(--den-ink-50); }
.den-lod__row-result {
  text-align: right;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--den-ink-30);
}
.den-lod__row-result--won  { color: var(--den-green); }
.den-lod__row-result--lost { color: var(--den-ink-50); }

.den-lod__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--den-border);
  font-size: 11.5px;
}
.den-lod__record { color: var(--den-ink-50); font-weight: 600; }
.den-lod__link { color: var(--den-amber); font-weight: 700; text-decoration: none; }
.den-lod__link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .den-lod__pick { flex-wrap: wrap; }
  .den-lod__state { flex-direction: row; align-items: center; width: 100%; }
  .den-lod__row { grid-template-columns: minmax(0, 1fr) 6ch 5ch 7ch; }
  .den-lod__row-where, .den-lod__cols span:nth-child(2) { display: none; }
}

/* DEN-PW-TODAY · The Pick Winner picker styles moved to
   market_pulse.css, where the card itself lives.

   They were written here against the DEN token set
   (--den-surface, --den-border-strong, --den-ink-30) while every
   other rule on that card uses the pulse palette (--pulse-paper,
   --pulse-rule, --pulse-muted), so the chips read slightly off
   from the card around them and nothing said why. One card, one
   palette. */


/* ═══ DEN-DAY-1 · The day-bar ══════════════════════════════
 * Replaces the free-tier banner at the top of the page. That block
 * was the loudest thing above the fold and it sold rather than
 * served; this is the same strip telling the reader what the racing
 * is doing.
 *
 * The clock is NOT rendered by the server — `data-off-at` carries
 * the off as an epoch and den.js ticks it, the same mechanism the
 * Next Off card uses. A relative time written server-side is wrong
 * within the minute.
 */
.den-day {
  margin: 0 0 4px;
  border-top: 1px solid var(--den-border);
  border-bottom: 1px solid var(--den-border);
  background: var(--den-user-bg);
}
.den-day__next,
.den-day__done {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 22px;
  text-decoration: none;
  color: inherit;
}
.den-day__next:hover { background: var(--den-sage-soft); text-decoration: none; }
.den__turn--assistant .den__turn-body .den-day__next { color: inherit; }

.den-day__clock { display: flex; flex-direction: column; line-height: 1.05; flex: 0 0 auto; }
.den-day__lbl {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--den-ink-50);
}
.den-day__val {
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--den-ink);
}
/* Inside five minutes the bar starts shouting, quietly. Set by
   den.js, which already owns these two class names for the Next Off
   card's clock. */
.den-day__val.nx__clock-val--imminent { color: var(--den-amber); }
.den-day__val.nx__clock-val--gone { font-size: 14px; color: var(--den-ink-50); }

.den-day__where { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.den-day__race { font-size: 13.5px; font-weight: 650; color: var(--den-ink); }
.den-day__meta {
  font-size: 11.5px;
  color: var(--den-ink-50);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.den-day__go { color: var(--den-sage); font-weight: 700; flex: 0 0 auto; }
.den-day__done { color: var(--den-ink-70); }

@media (max-width: 780px) {
  .den-day__next, .den-day__done { padding: 9px 16px; gap: 11px; }
  .den-day__val { font-size: 17px; }
}

/* The free-tier pitch, now on the empty state rather than on every
   page load. */
.den__welcome-tier {
  margin: 0 0 20px;
  padding: 11px 14px;
  border: 1px solid var(--den-gold-tint);
  border-radius: 10px;
  background: var(--den-warn-bg);
  color: var(--den-gold-ink);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: left;
}
.den__welcome-tier a { color: inherit; font-weight: 700; white-space: nowrap; }
/* ═══ DEN-TILE-1 · The hero and the live tiles ═══════════════
 * The welcome screen was a 72px avatar, a heading, and five rows of
 * grey description that read the same on every visit of every day.
 */
.den__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38%;
  align-items: end;
  gap: 8px;
  margin: 0 0 22px;
  padding: 26px 0 0;
  text-align: left;
  min-height: 210px;
}
.den__hero-copy { min-width: 0; padding-bottom: 6px; }
.den__hero-eyebrow {
  margin: 0 0 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--den-ink-50);
}
.den__hero .den__welcome-title {
  font-size: clamp(27px, 7.4vw, 40px);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
  text-align: left;
}
.den__hero-rule {
  display: block;
  width: 46px;
  height: 3px;
  margin: 13px 0 0;
  border-radius: 2px;
  background: var(--den-gold);
}
.den__hero .den__welcome-body {
  margin: 13px 0 0;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--den-ink-70);
  max-width: 34ch;
}

/* The portrait is 720x1080 — a tall crop. `object-position: top`
   keeps the face in frame as the column narrows. */
.den__hero-art { align-self: end; min-width: 0; }
.den__hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  object-position: bottom;
}

/* ── Tiles ──────────────────────────────────────────────────*/
.den__starters { display: flex; flex-direction: column; gap: 9px; }
.den__starter {
  /* flex-direction explicitly: the original rule above sets `column`,
     and a later rule that only changes `display` inherits it — which
     stacked the title, the live line and the chevron vertically and
     centred them. */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
}
.den__starter-main { flex: 1 1 auto; min-width: 0; }
.den__starter-title {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--den-ink);
}
.den__starter-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--den-ink-50);
}
/* The live line. A tile with today's horse on it is the point of
   this whole change, so it reads louder than the description it
   replaces. */
.den__starter-live { display: block; margin-top: 3px; }
.den__starter-horse {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--den-ink);
}
.den__starter-horse--in  { color: var(--den-green); }
.den__starter-horse--out { color: var(--den-amber); }
.den__starter-meta {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--den-ink-50);
  font-variant-numeric: tabular-nums;
}
.den__starter-go {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1;
  color: var(--den-ink-30);
}
.den__starter--live .den__starter-go { color: var(--den-sage); }

@media (max-width: 560px) {
  .den__hero {
    grid-template-columns: minmax(0, 1fr) 34%;
    min-height: 0;
    padding-top: 10px;
    margin-bottom: 16px;
    gap: 4px;
  }
  .den__hero-img { max-height: 158px; }
  .den__hero .den__welcome-body { font-size: 13px; }
}
/* Below this the portrait stops being a portrait and starts being a
   sliver, so it goes and the copy takes the width. */
@media (max-width: 380px) {
  .den__hero { grid-template-columns: 1fr; }
  .den__hero-art { display: none; }
}
/* ═══ DEN-SLASH-1 · The "/" key in the composer ══════════════
 * The palette has always opened on "/" and the only thing that said
 * so was a parenthetical in the placeholder — which wrapped at
 * composer width and had its second line clipped, so it read as
 * "(press / for commands" with the end cut off.
 *
 * Styled as a key rather than a button: it is telling you which key
 * to press, and it also is that key.
 */
.den__slash {
  flex-shrink: 0;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 7px;
  padding: 0;
  border: 1px solid var(--den-border-strong);
  border-radius: 6px;
  background: var(--den-surface);
  color: var(--den-ink-50);
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.den__slash:hover {
  color: var(--den-sage);
  border-color: var(--den-sage);
  background: var(--den-sage-soft);
}
.den__slash:focus-visible {
  outline: 2px solid var(--den-sage);
  outline-offset: 2px;
}
/* On a touch screen there is no keyboard to press "/" on, so the
   button is the only way in and deserves the room. */
@media (hover: none) {
  .den__slash { width: 30px; height: 30px; font-size: 14px; }
}