/* Page themes.
 *
 * A theme styles the elements markdown already produces — headings,
 * paragraphs, lists, tables, quotes, code — so a page gets a considered look
 * without inventing any markup. That is the whole point: the author writes
 * markdown, and the design is not their problem.
 *
 * Themes are CHOSEN from this file, never written by an author. A stylesheet an
 * author supplies is arbitrary CSS on the app's own origin, which is the
 * surface ADR 014 exists to close. Adding a theme is adding a block here.
 *
 * Every colour comes from a token so both schemes resolve as a set. Nothing
 * here may define a colour only inside a dark block — that is how a page ends
 * up printing one theme's text on the other theme's ground.
 *
 * The tokens are the semantic layer of ADR 016 (`--nt-color-*`, `--nt-font-*`,
 * `--nt-text-size`, `--nt-leading`, `--nt-measure`, `--nt-radius`,
 * `--nt-density`), defined at `:root` in application.css from the shell
 * palette and redefined on `.content.nt-themed` by a page theme. A preset is
 * a block here that reads them; a component names its own tokens (third
 * tier) defaulting to them; a variant overrides the component's tokens. */

/* ============================================================ tokens
 * A themed page carries its values as custom properties on `.content.nt-themed`
 * (see Theme::Css — typed values, never text an author wrote). Everything
 * below reads them through `var()` with the preset's value as fallback, so a
 * page that only names a preset looks exactly as it did before the tokens.
 *
 * The ground is painted at the wrapper, not the prose: `.mark-container` and
 * `.content` have their own backgrounds with `!important` in pages.css, so
 * the theme has to claim them by class, and it does so only when themed. */

/* The light set is assigned here, by the stylesheet, so that the dark rules
 * further down can re-point the same names. Assigned inline they would win
 * over any selector and never switch. */
.content.nt-themed {
  --nt-color-background: var(--nt-light-color-background);
  --nt-color-foreground: var(--nt-light-color-foreground);
  --nt-color-muted-foreground: var(--nt-light-color-muted-foreground);
  --nt-color-accent: var(--nt-light-color-accent);
  --nt-color-surface: var(--nt-light-color-surface);
  --nt-color-border: var(--nt-light-color-border);
  --nt-color-border-muted: var(--nt-light-color-border);
  --nt-heading-color: var(--nt-light-heading-color, var(--nt-color-foreground));

  background: var(--nt-color-background, #ffffff) !important;
  color: var(--nt-color-foreground, #24292f);
}

.content.nt-themed .mark-container,
.content.nt-themed .mark-container .mark-preview {
  background: var(--nt-color-background, #ffffff) !important;
}

.page-content > turbo-frame:has(> .content.nt-themed) {
  background: transparent;
}

.content.nt-themed .mark-preview {
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-size);
  line-height: var(--nt-leading);
  color: var(--nt-color-foreground);
}

.content.nt-themed .mark-preview > * {
  max-width: var(--nt-measure);
}

.content.nt-themed .mark-preview > table,
.content.nt-themed .mark-preview > pre,
.content.nt-themed .mark-preview > figure,
.content.nt-themed .mark-preview > .nt-block,
.content.nt-themed .mark-preview > .nt-cards,
.content.nt-themed .mark-preview > .nt-callout {
  max-width: none;
}

.content.nt-themed .mark-preview h1,
.content.nt-themed .mark-preview h2,
.content.nt-themed .mark-preview h3,
.content.nt-themed .mark-preview h4 {
  font-family: var(--nt-font-heading);
  color: var(--nt-heading-color, var(--nt-color-foreground));
  text-transform: var(--nt-heading-transform, none);
}

/* A page that names no preset gets one ladder, scaled. Pages with a preset
 * keep the preset's own ladder (below), scaled the same way. */
.content.nt-themed .mark-preview:not([class*="nt-theme-"]) h1 { font-size: calc(2rem * var(--nt-heading-scale, 1)); font-weight: var(--nt-heading-weight, 660); letter-spacing: var(--nt-heading-tracking, -0.012em); }
.content.nt-themed .mark-preview:not([class*="nt-theme-"]) h2 { font-size: calc(1.375rem * var(--nt-heading-scale, 1)); font-weight: var(--nt-heading-weight, 640); letter-spacing: var(--nt-heading-tracking, -0.012em); }
.content.nt-themed .mark-preview:not([class*="nt-theme-"]) h3 { font-size: calc(1.125rem * var(--nt-heading-scale, 1)); font-weight: var(--nt-heading-weight, 640); letter-spacing: var(--nt-heading-tracking, 0); }
.content.nt-themed .mark-preview:not([class*="nt-theme-"]) h4 { font-size: calc(1rem * var(--nt-heading-scale, 1)); font-weight: var(--nt-heading-weight, 640); }

/* ============================================================ dark scheme
 * A themed page that switches carries its dark set as `--nt-dark-*` (see
 * Theme::Css). In the two dark states the semantic names are re-pointed at
 * it; the class `nt-themed-auto` is what makes this cycle-free — a page with
 * no dark set never enters the rule, so no token ever references itself. */
[data-theme="dark"] .content.nt-themed-auto {
  --nt-color-background: var(--nt-dark-color-background);
  --nt-color-foreground: var(--nt-dark-color-foreground);
  --nt-color-muted-foreground: var(--nt-dark-color-muted-foreground);
  --nt-color-accent: var(--nt-dark-color-accent);
  --nt-color-surface: var(--nt-dark-color-surface);
  --nt-color-border: var(--nt-dark-color-border);
  --nt-color-border-muted: var(--nt-dark-color-border);
  --nt-heading-color: var(--nt-dark-heading-color, var(--nt-dark-color-foreground));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .content.nt-themed-auto {
    --nt-color-background: var(--nt-dark-color-background);
    --nt-color-foreground: var(--nt-dark-color-foreground);
    --nt-color-muted-foreground: var(--nt-dark-color-muted-foreground);
    --nt-color-accent: var(--nt-dark-color-accent);
    --nt-color-surface: var(--nt-dark-color-surface);
    --nt-color-border: var(--nt-dark-color-border);
    --nt-color-border-muted: var(--nt-dark-color-border);
    --nt-heading-color: var(--nt-dark-heading-color, var(--nt-dark-color-foreground));
  }
}

.content.nt-themed .mark-preview code {
  background: var(--nt-color-surface);
  border-radius: calc(var(--nt-radius, 6px) / 2);
}

/* Inline code keeps its own colour on a light ground; on a dark ground that
 * colour has no contrast against the surface, so it reads in the accent. */
.content.nt-themed[data-nt-scheme="dark"] .mark-preview :not(pre) > code,
[data-theme="dark"] .content.nt-themed-auto .mark-preview :not(pre) > code {
  color: var(--nt-color-accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .content.nt-themed-auto .mark-preview :not(pre) > code {
    color: var(--nt-color-accent);
  }
}

.content.nt-themed .mark-preview pre {
  background: var(--nt-color-surface);
  border: 1px solid var(--nt-color-border);
  border-radius: var(--nt-radius, 6px);
}

.content.nt-themed[data-nt-scheme="dark"] .mark-preview a,
[data-theme="dark"] .content.nt-themed-auto .mark-preview a { color: var(--nt-color-accent); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .content.nt-themed-auto .mark-preview a { color: var(--nt-color-accent); }
}

.content.nt-themed .mark-preview p,
.content.nt-themed .mark-preview li {
  margin-bottom: calc(1rem * var(--nt-density, 1));
}

/* ============================================================ header
 * ADR 017: the chrome follows the space's theme. The tokens ride on
 * `.page-container` as `--nt-light-header-*` / `--nt-dark-header-*` and are
 * assigned here, so the dark states can re-point them. Presence is not
 * themeable: nothing below hides the visibility tag, sign-in or the banner. */
.nt-header-themed {
  --nt-header-background: var(--nt-light-header-background);
  --nt-header-foreground: var(--nt-light-header-foreground);
  --nt-header-border: var(--nt-light-header-border);
}

[data-theme="dark"] .nt-header-themed.nt-header-auto {
  --nt-header-background: var(--nt-dark-header-background);
  --nt-header-foreground: var(--nt-dark-header-foreground);
  --nt-header-border: var(--nt-dark-header-border);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nt-header-themed.nt-header-auto {
    --nt-header-background: var(--nt-dark-header-background);
    --nt-header-foreground: var(--nt-dark-header-foreground);
    --nt-header-border: var(--nt-dark-header-border);
  }
}

.nt-header-themed .page-header {
  background: var(--nt-header-background);
  border-bottom-color: var(--nt-header-border);
  color: var(--nt-header-foreground);
}

.nt-header-themed .page-header .logo,
.nt-header-themed .page-header .nav-button,
.nt-header-themed .page-header .menu-toggle,
.nt-header-themed .page-header .breadcrumb-current,
.nt-header-themed .page-header .breadcrumb-compact,
.nt-header-themed .page-header .breadcrumb-link,
.nt-header-themed .page-header .breadcrumb {
  color: var(--nt-header-foreground);
}

.nt-header-themed .page-header .nav-button:hover,
.nt-header-themed .page-header .menu-toggle:hover {
  background: color-mix(in srgb, var(--nt-header-foreground) 12%, transparent);
  color: var(--nt-header-foreground);
}

/* The tag keeps its meaning colours (green public, blue private) on any
 * ground; only its text follows the header so it stays legible. */
.nt-header-themed .page-header .tag {
  color: var(--nt-header-foreground);
}

.nt-header-themed .page-header .logo-image {
  display: block;
  height: 28px;
  width: auto;
  max-width: 180px;
}

/* ============================================================ conventions
 * Three shapes a document is full of, styled from what markdown already
 * produces — no new syntax, nothing for the sanitizer to learn.
 *
 * A KICKER is the small line above a heading ("PORTS · REFERÊNCIA DE
 * ARQUITETURA"). Written as an italic line right before the heading, which
 * is what the artifact importer emits, it is set small, spaced and in the
 * accent. `:has()` is what lets the rule look forward to the heading. */
.content.nt-themed .mark-preview p:has(> em:only-child):has(+ h1, + h2, + h3) {
  margin-bottom: 0.35rem;
  font-family: var(--nt-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nt-color-accent);
}

.content.nt-themed .mark-preview p:has(> em:only-child):has(+ h1, + h2, + h3) > em {
  font-style: normal;
}

.content.nt-themed .mark-preview p:has(> em:only-child):has(+ h1, + h2, + h3) + h1,
.content.nt-themed .mark-preview p:has(> em:only-child):has(+ h1, + h2, + h3) + h2,
.content.nt-themed .mark-preview p:has(> em:only-child):has(+ h1, + h2, + h3) + h3 {
  margin-top: 0;
}

/* A FIGURE sits on a sheet. Diagrams and charts get the surface, a rule and
 * the radius, which on a dark ground is what makes a white SVG read as a
 * placed object rather than a hole in the page. */
.content.nt-themed .mark-preview .nt-diagram,
.content.nt-themed .mark-preview .nt-chart {
  background: var(--nt-color-surface);
  border: 1px solid var(--nt-color-border);
  border-radius: var(--nt-radius, 6px);
  padding: 1rem 1.25rem;
}

/* Always white: mermaid is drawn light on a themed page (see registry.js),
 * and the sheet cannot know at render time which scheme the reader is in. */
.content.nt-themed .mark-preview .nt-diagram {
  background: #ffffff;
  color: #24292f;
}

/* A QUOTE is a callout: the artifact's bordered, tinted box. */
.content.nt-themed .mark-preview blockquote {
  margin: 1.5rem 0;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--nt-color-accent);
  border-radius: 0 var(--nt-radius, 6px) var(--nt-radius, 6px) 0;
  background: var(--nt-color-surface);
}

.content.nt-themed .mark-preview table {
  color: var(--nt-color-foreground);
}

.content.nt-themed .mark-preview th,
.content.nt-themed .mark-preview td {
  border-color: var(--nt-color-border);
  background: transparent;
}

.content.nt-themed .mark-preview thead th {
  color: var(--nt-color-muted-foreground);
}

.content.nt-themed .mark-preview hr {
  border-top-color: var(--nt-color-border);
}

/* ============================================================ containers
 * The blocks that markdown has no spelling for (ADR 015, step 3): a pill, a
 * callout with a title, cards on a grid. Rendered by the blocks controller
 * from fences and from `pill:` inline code, with createElement only. */
/* Component tokens (ADR 016, third tier): each component names what it
 * needs, defaulting to the semantic layer; a VARIANT redefines the
 * component's tokens, never the properties. That is what keeps a variant
 * from having to know which properties the base sets. */
.nt-pill {
  --nt-pill-fg: var(--nt-color-muted-foreground, #586069);
  --nt-pill-bg: var(--nt-color-surface, #f6f8fa);
  --nt-pill-border: var(--nt-color-border, #d0d7de);

  display: inline-block;
  padding: 0.15em 0.7em;
  border: 1px solid var(--nt-pill-border);
  border-radius: 999px;
  font-family: var(--nt-font-heading, inherit);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nt-pill-fg);
  background: var(--nt-pill-bg);
  vertical-align: middle;
  white-space: nowrap;
}

.nt-pill.nt-pill-accent {
  --nt-pill-fg: var(--nt-color-accent, #007acc);
  --nt-pill-border: var(--nt-color-accent, #007acc);
  --nt-pill-bg: transparent;
}

.nt-callout {
  --nt-callout-bg: var(--nt-color-surface, #f6f8fa);
  --nt-callout-fg: var(--nt-color-foreground, #24292f);
  --nt-callout-border: var(--nt-color-border, #d0d7de);
  --nt-callout-accent: var(--nt-color-accent, #007acc);

  margin: 1.5rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--nt-callout-border);
  border-left: 3px solid var(--nt-callout-accent);
  border-radius: var(--nt-radius, 6px);
  background: var(--nt-callout-bg);
  color: var(--nt-callout-fg);
}

.nt-callout-title {
  margin: 0 0 0.35rem;
  font-family: var(--nt-font-heading, inherit);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nt-color-accent, #007acc);
}

.nt-callout p { margin: 0 0 0.5rem; }
.nt-callout p:last-child { margin-bottom: 0; }

.nt-cards {
  display: grid;
  grid-template-columns: repeat(var(--nt-cards-columns, 2), minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.5rem 0;
}

@media (max-width: 640px) {
  .nt-cards { grid-template-columns: 1fr; }
}

.nt-card {
  --nt-card-bg: var(--nt-color-surface, #f6f8fa);
  --nt-card-fg: var(--nt-color-foreground, #24292f);
  --nt-card-border: var(--nt-color-border, #d0d7de);

  padding: 0.9rem 1rem;
  border: 1px solid var(--nt-card-border);
  border-radius: var(--nt-radius, 6px);
  background: var(--nt-card-bg);
  color: var(--nt-card-fg);
}

.nt-card-title {
  margin: 0 0 0.4rem;
  font-family: var(--nt-font-heading, inherit);
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--nt-color-foreground, #24292f);
}

.nt-card p { margin: 0 0 0.4rem; font-size: 0.92em; color: var(--nt-color-muted-foreground, #586069); }
.nt-card p:last-child { margin-bottom: 0; }

.mark-preview .nt-card .nt-card-title { color: var(--nt-card-fg, var(--nt-color-foreground, #24292f)); }
.mark-preview .nt-card p { color: var(--nt-color-muted-foreground, #586069); }
.mark-preview .nt-callout p { color: var(--nt-callout-fg, var(--nt-color-foreground, #24292f)); }
.mark-preview .nt-callout .nt-callout-title { color: var(--nt-callout-accent, var(--nt-color-accent, #007acc)); }
.mark-preview .nt-card strong, .mark-preview .nt-callout strong { color: var(--nt-color-foreground, #24292f); }

@media print {
  .content.nt-themed, .content.nt-themed .mark-container { background: #ffffff !important; }
  .content.nt-themed .mark-preview { color: #24292f; }
}

/* ============================================================ editorial
 * For prose that is meant to be read start to finish: an article, an essay,
 * a piece of writing. Serif body, a measure that stops before the line gets
 * tiring, and headings that sit quietly above the text rather than shouting. */

.mark-preview.nt-theme-editorial {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--nt-color-foreground);
}

.mark-preview.nt-theme-editorial > * {
  max-width: 68ch;
}

/* Anything with its own internal layout keeps the full width — a table or a
 * diagram squeezed into a prose measure is unreadable in a different way. */
.mark-preview.nt-theme-editorial > table,
.mark-preview.nt-theme-editorial > pre,
.mark-preview.nt-theme-editorial > figure,
.mark-preview.nt-theme-editorial > .nt-block {
  max-width: none;
}

.mark-preview.nt-theme-editorial h1,
.mark-preview.nt-theme-editorial h2,
.mark-preview.nt-theme-editorial h3 {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  letter-spacing: var(--nt-heading-tracking, -0.02em);
  line-height: 1.18;
  text-wrap: balance;
}

/* The preset's ladder is the fallback of the heading knobs (ADR 016): a page
 * that chose nothing renders exactly as before; a chosen weight or scale
 * applies to every level, so the hierarchy survives the choice. */
.mark-preview.nt-theme-editorial h1 { font-size: calc(2.25rem * var(--nt-heading-scale, 1)); font-weight: var(--nt-heading-weight, 680); margin: 0 0 1rem; }
.mark-preview.nt-theme-editorial h2 { font-size: calc(1.5rem * var(--nt-heading-scale, 1)); font-weight: var(--nt-heading-weight, 640); margin: 2.75rem 0 0.75rem; }
.mark-preview.nt-theme-editorial h3 { font-size: calc(1.125rem * var(--nt-heading-scale, 1)); font-weight: var(--nt-heading-weight, 640); margin: 2rem 0 0.5rem; }

.mark-preview.nt-theme-editorial p { margin: 0 0 1.15rem; }

.mark-preview.nt-theme-editorial li { margin-bottom: 0.5rem; }

/* No quotation marks and no tint: a rule and a shift in colour is enough to
 * say "set apart", and it survives both schemes without a second decision. */
.mark-preview.nt-theme-editorial blockquote {
  margin: 1.75rem 0;
  padding: 0.1rem 0 0.1rem 1.25rem;
  border-left: 2px solid var(--nt-color-accent);
  color: var(--nt-color-muted-foreground);
  font-style: normal;
}

/* Same cascade collision as the technical theme: the grid has to be cleared,
 * not merely overridden on one edge. */
.mark-preview.nt-theme-editorial table {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.9375rem;
  margin: 1.75rem 0;
}

.mark-preview.nt-theme-editorial th,
.mark-preview.nt-theme-editorial td {
  text-align: left;
  padding: 0.55rem 0.9rem 0.55rem 0;
  border: 0;
  border-bottom: 1px solid var(--nt-color-border);
  vertical-align: top;
}

.mark-preview.nt-theme-editorial thead th {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nt-color-muted-foreground);
  font-weight: 640;
}

.mark-preview.nt-theme-editorial hr {
  border: 0;
  border-top: 1px solid var(--nt-color-border);
  margin: 2.75rem 0;
}

.mark-preview.nt-theme-editorial a {
  color: inherit;
  text-decoration-color: var(--nt-color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mark-preview.nt-theme-editorial a:hover { color: var(--nt-color-accent); }

/* ============================================================ technical
 * For reference: docs, tables of numbers, things scanned rather than read.
 * Tighter, sans throughout, and digits that line up in columns. */

.mark-preview.nt-theme-technical {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--nt-color-foreground);
}

.mark-preview.nt-theme-technical h1,
.mark-preview.nt-theme-technical h2,
.mark-preview.nt-theme-technical h3 {
  letter-spacing: var(--nt-heading-tracking, -0.012em);
  line-height: 1.25;
  text-wrap: balance;
}

.mark-preview.nt-theme-technical h1 { font-size: calc(1.75rem * var(--nt-heading-scale, 1)); font-weight: var(--nt-heading-weight, 660); margin: 0 0 0.75rem; }

/* A rule under h2 is the cheapest way to make a long reference page scannable:
 * the eye finds the section boundary without reading a word. */
.mark-preview.nt-theme-technical h2 {
  font-size: calc(1.1875rem * var(--nt-heading-scale, 1));
  font-weight: var(--nt-heading-weight, 640);
  margin: 2.25rem 0 0.65rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--nt-color-border);
}

.mark-preview.nt-theme-technical h3 { font-size: calc(1rem * var(--nt-heading-scale, 1)); font-weight: var(--nt-heading-weight, 640); margin: 1.5rem 0 0.4rem; }

.mark-preview.nt-theme-technical p { margin: 0 0 0.85rem; }
.mark-preview.nt-theme-technical li { margin-bottom: 0.3rem; }

.mark-preview.nt-theme-technical table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  margin: 1.25rem 0;
}

/* `border: 0` first, deliberately: mark.css draws a full grid on tables, so
 * setting only `border-bottom` leaves the vertical rules in place and the
 * result is a boxed-in table nobody asked for. The row rule alone is enough to
 * follow a line across. */
.mark-preview.nt-theme-technical th,
.mark-preview.nt-theme-technical td {
  text-align: left;
  padding: 0.45rem 0.85rem 0.45rem 0;
  border: 0;
  border-bottom: 1px solid var(--nt-color-border);
  vertical-align: top;
}

/* The first column carries the row's identity; the rest is detail. */
.mark-preview.nt-theme-technical td:first-child,
.mark-preview.nt-theme-technical th:first-child {
  padding-left: 0.15rem;
}

.mark-preview.nt-theme-technical thead th {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nt-color-muted-foreground);
  font-weight: 640;
}

.mark-preview.nt-theme-technical blockquote {
  margin: 1.25rem 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--nt-color-accent);
  background: var(--nt-color-surface);
  color: var(--nt-color-muted-foreground);
  font-size: 0.875rem;
}

.mark-preview.nt-theme-technical code {
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
}

.mark-preview.nt-theme-technical hr {
  border: 0;
  border-top: 1px solid var(--nt-color-border);
  margin: 2rem 0;
}

/* ============================================================ chat
 * Bubbles. `me` on the right in the accent's tint, everyone else on the
 * left on the surface. Component tokens (ADR 016) so a theme recolours a
 * conversation by redefining the semantic layer alone. */
.nt-chat {
  --nt-chat-me-bg: color-mix(in srgb, var(--nt-color-accent, #007acc) 22%, var(--nt-color-surface, #f6f8fa));
  --nt-chat-them-bg: var(--nt-color-surface, #f6f8fa);
  --nt-chat-fg: var(--nt-color-foreground, #24292f);
  --nt-chat-meta: var(--nt-color-muted-foreground, #586069);

  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 1.5rem 0;
  padding: 0.75rem;
  border: 1px solid var(--nt-color-border, #d0d7de);
  border-radius: var(--nt-radius, 6px);
  background: var(--nt-color-background, #ffffff);
}

.nt-chat-title { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nt-chat-meta); }
.nt-chat-row { display: flex; }
.nt-chat-row-me { justify-content: flex-end; }

.nt-bubble {
  max-width: min(72%, 32rem);
  padding: 0.45rem 0.7rem;
  border-radius: calc(var(--nt-radius, 6px) + 6px);
  border-bottom-left-radius: 4px;
  background: var(--nt-chat-them-bg);
  color: var(--nt-chat-fg);
  font-size: 0.95em;
  line-height: 1.4;
}

.nt-bubble-me {
  background: var(--nt-chat-me-bg);
  border-bottom-left-radius: calc(var(--nt-radius, 6px) + 6px);
  border-bottom-right-radius: 4px;
}

.nt-bubble p { margin: 0; }
.mark-preview .nt-bubble p { color: var(--nt-chat-fg); }
.nt-bubble-who { display: block; font-size: 0.72rem; font-weight: 650; color: var(--nt-color-accent, #007acc); margin-bottom: 0.15rem; }
.nt-bubble-time { display: block; text-align: right; font-size: 0.68rem; color: var(--nt-chat-meta); margin-top: 0.2rem; }

/* A metric tile: the number is the point. */
.nt-card.nt-card-metric .nt-card-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ============================================================ checklist
 * The one block that keeps state, and the one that most needs the theme: a
 * checklist is read as a tool, not as prose. Component tokens (ADR 016) over
 * the semantic layer, so a themed page recolours it without knowing it
 * exists. `accent-color` is what makes the tick itself follow the theme —
 * one property, no custom-drawn checkbox, and the platform keeps its own
 * focus ring and its own hit area. */
.nt-checklist {
  --nt-check-bg: var(--nt-color-background, #ffffff);
  --nt-check-surface: var(--nt-color-surface, #f6f8fa);
  --nt-check-fg: var(--nt-color-foreground, #24292f);
  --nt-check-meta: var(--nt-color-muted-foreground, #586069);
  --nt-check-border: var(--nt-color-border, #d0d7de);
  --nt-check-accent: var(--nt-color-accent, #007acc);

  margin: 1.5rem 0;
  padding: 0.9rem 1.1rem 0.7rem;
  border: 1px solid var(--nt-check-border);
  border-radius: var(--nt-radius, 6px);
  background: var(--nt-check-bg);
  color: var(--nt-check-fg);
}

.nt-checklist-head { margin-bottom: 0.7rem; }

.nt-checklist-title {
  margin: 0 0 0.45rem;
  font-family: var(--nt-font-heading, inherit);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nt-check-accent);
}

.mark-preview .nt-checklist-title { color: var(--nt-check-accent); }

.nt-checklist-meter {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.nt-checklist-count {
  font-size: 0.8rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--nt-check-meta);
  white-space: nowrap;
}

.nt-checklist-bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--nt-check-surface);
  border: 1px solid var(--nt-check-border);
  overflow: hidden;
}

.nt-checklist-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--nt-check-accent);
  transition: width 160ms ease;
}

.nt-checklist.is-complete .nt-checklist-count { color: var(--nt-check-accent); }

.nt-checklist-reset {
  border: 1px solid var(--nt-check-border);
  background: var(--nt-check-surface);
  color: var(--nt-check-meta);
  border-radius: calc(var(--nt-radius, 6px) / 1.5);
  padding: 2px 8px;
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.nt-checklist-reset:hover { color: var(--nt-check-fg); }

.nt-checklist-group + .nt-checklist-group { margin-top: 0.7rem; }

.nt-checklist-group-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.25rem;
  font-family: var(--nt-font-heading, inherit);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nt-check-meta);
}

.mark-preview .nt-checklist-group-name { color: var(--nt-check-meta); }

.nt-checklist-tally { font-variant-numeric: tabular-nums; font-weight: 650; }

.nt-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nt-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.28rem 0;
  margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--nt-check-border) 45%, transparent);
}

.nt-checklist li:last-child { border-bottom: 0; }

.nt-checklist input[type="checkbox"] {
  /* 18px is the smallest tick that still reads on a phone, and the label
   * carries the rest of the hit area. */
  width: 18px;
  height: 18px;
  margin: 0.18rem 0 0;
  flex: none;
  accent-color: var(--nt-check-accent);
  cursor: pointer;
}

.nt-checklist label {
  cursor: pointer;
  font-size: 0.95em;
  line-height: 1.45;
  color: var(--nt-check-fg);
}

.mark-preview .nt-checklist label { color: var(--nt-check-fg); }

/* Done is quieter, not gone: the reader still has to be able to read what
 * they ticked. */
.nt-checklist li.is-done label {
  color: var(--nt-check-meta);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--nt-check-accent) 55%, transparent);
}

.nt-checklist-note {
  margin: 0.6rem 0 0;
  font-size: 0.68rem;
  color: var(--nt-check-meta);
}

.mark-preview .nt-checklist-note { color: var(--nt-check-meta); }

@media (prefers-reduced-motion: reduce) {
  .nt-checklist-bar > i { transition: none; }
}