/* Night Ledger components
   Load after tokens.css. Every class starts with nl-.
   States come from real attributes (aria-current, aria-pressed, aria-checked,
   aria-selected, aria-invalid, disabled, data-status), not from extra classes. */

/* ---------- base ---------- */

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--info); }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

.nl-mono { font-family: var(--mono); }
.nl-muted { color: var(--muted); }

/* labels: 11px mono uppercase for column and section labels */
.nl-label-caps {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* paths and IDs: 12px mono lowercase */
.nl-path, .nl-id { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.nl-id { white-space: nowrap; }

/* ---------- app shell: rail + main ---------- */

.nl-app { display: flex; flex-wrap: wrap; min-height: 100vh; }

.nl-rail {
  flex: 1 1 var(--rail-width);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--s4) var(--s3);
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.nl-main { flex: 999 1 560px; min-width: 0; padding: 20px var(--s5) var(--s6); }

.nl-brand { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 var(--s2); font-weight: 600; }
.nl-brand::before { content: ""; width: 12px; height: 12px; border-radius: 1px; background: var(--accent); }

/* Plan / Docs switch at the top of the rail */
.nl-site-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.nl-site-switch > a,
.nl-site-switch > button {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.nl-site-switch > [aria-current="page"],
.nl-site-switch > [aria-pressed="true"] { background: var(--raised); color: var(--ink); font-weight: 600; }

.nl-nav-label { padding: 0 var(--s2) 6px; }
.nl-nav-label:not(.nl-label-caps) { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.nl-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: 36px;
  padding: 0 var(--s2);
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
}
.nl-nav-item:hover { background: var(--raised); color: var(--ink); }
.nl-nav-item[aria-current="page"] { background: var(--raised); color: var(--ink); font-weight: 500; }

.nl-now { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--accent-text); }

.nl-rail-bottom { margin-top: auto; }

/* page header */
.nl-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s4); }
.nl-title { margin: 2px 0 0; font-size: 24px; line-height: 32px; font-weight: 600; }
.nl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

.nl-section-title {
  margin: 0;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- buttons ---------- */

.nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: var(--h-control);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.nl-btn:hover { background: var(--raised); color: var(--ink); }

.nl-btn--primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; }
.nl-btn--primary:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.1); }
.nl-btn--primary:active { filter: brightness(0.9); }

.nl-btn--ghost { border-color: transparent; background: transparent; }

.nl-btn--danger { border-color: var(--danger); background: transparent; color: var(--danger); font-weight: 500; }
.nl-btn--danger:hover { background: var(--raised); color: var(--danger); }

.nl-btn--sm { height: var(--h-compact); padding: 0 10px; font-size: 13px; }
.nl-btn--icon { width: var(--h-control); padding: 0; }
.nl-btn--icon.nl-btn--sm { width: var(--h-compact); }

.nl-btn:disabled,
.nl-btn[aria-disabled="true"] {
  border-color: var(--line);
  background: var(--raised);
  color: var(--muted);
  filter: none;
  cursor: not-allowed;
}

.nl-btn svg { width: 16px; height: 16px; flex: none; }

/* segmented control: buttons with aria-pressed */
.nl-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.nl-seg > button {
  height: 34px;
  padding: 0 12px;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.nl-seg > button + button { border-left: 1px solid var(--line-strong); }
.nl-seg > button[aria-pressed="true"] { background: var(--ink); color: var(--ground); font-weight: 500; }

/* ---------- forms ---------- */

.nl-field { display: block; }
.nl-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.nl-help { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.nl-error { display: block; margin-top: 6px; font-size: 12px; color: var(--danger); }

.nl-input,
.nl-select,
.nl-textarea {
  width: 100%;
  height: var(--h-control);
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.nl-select { padding: 0 8px; }
.nl-textarea { height: auto; min-height: 96px; padding: 8px 10px; line-height: 20px; resize: vertical; }
.nl-input::placeholder, .nl-textarea::placeholder { color: var(--muted); }
.nl-input:focus-visible, .nl-select:focus-visible, .nl-textarea:focus-visible { border-color: var(--info); }
.nl-input[aria-invalid="true"], .nl-select[aria-invalid="true"], .nl-textarea[aria-invalid="true"] { border-color: var(--danger); }
.nl-input:disabled, .nl-select:disabled, .nl-textarea:disabled { border-color: var(--line); background: var(--raised); color: var(--muted); cursor: not-allowed; }

/* inside a card or dialog, inputs sit on the page ground */
.nl-card .nl-input, .nl-card .nl-select, .nl-card .nl-textarea,
.nl-dialog .nl-input, .nl-dialog .nl-select, .nl-dialog .nl-textarea { background: var(--ground); }

/* checkbox and radio: native inputs inside a label */
.nl-check { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; }
.nl-check > input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.nl-check:has(input:disabled) { color: var(--muted); cursor: not-allowed; }

/* switch: <button role="switch" aria-checked="true|false"> */
.nl-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 36px;
  height: 20px;
  padding: 2px;
  border: 0;
  border-radius: 10px;
  background: var(--line-strong);
  cursor: pointer;
}
.nl-toggle::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
.nl-toggle[aria-checked="true"] { justify-content: flex-end; background: var(--accent); }
.nl-toggle[aria-checked="true"]::after { background: var(--on-accent); }

/* search with icon and shortcut hint */
.nl-search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: var(--h-control);
  padding: 0 var(--s2) 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
}
.nl-search:focus-within { outline: 2px solid var(--info); outline-offset: 2px; }
.nl-search > svg { width: 16px; height: 16px; flex: none; }
.nl-search > input { flex: 1 1 0; min-width: 0; height: 30px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; }

/* ---------- small data display ---------- */

/* status: <span class="nl-status" data-status="in-progress">In progress</span> */
.nl-status { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.nl-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 1px; background: var(--muted); }
[data-status="backlog"].nl-status::before, .nl-dot[data-status="backlog"] { background: var(--muted); }
[data-status="todo"].nl-status::before, .nl-dot[data-status="todo"] { background: var(--ink); }
[data-status="in-progress"].nl-status::before, .nl-dot[data-status="in-progress"] { background: var(--accent); }
[data-status="in-review"].nl-status::before, .nl-dot[data-status="in-review"] { background: var(--info); }
[data-status="done"].nl-status::before, .nl-dot[data-status="done"] { background: var(--ok); }
[data-status="blocked"].nl-status::before, .nl-dot[data-status="blocked"] { background: var(--danger); }
.nl-status[data-status="blocked"] { color: var(--danger); }

/* a bare marker when the name is already written next to it */
.nl-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 1px; background: var(--muted); }

/* priority: P1 high is ink and medium weight, P2 and P3 are muted */
.nl-prio { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.nl-prio[data-p="1"] { color: var(--ink); font-weight: 500; }

.nl-tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--muted); }

/* issue link chip, e.g. OPS-215 */
.nl-ref { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--mono); font-size: 12px; text-decoration: none; }

.nl-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--radius); background: var(--raised); font-family: var(--mono); font-size: 11px; line-height: 20px; text-align: center; }
.nl-count--new { background: var(--accent); color: var(--on-accent); font-weight: 500; }

.nl-kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; line-height: 18px; color: var(--muted); }

.nl-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-family: var(--mono); font-size: 11px; }
.nl-avatar--empty { border-style: dashed; color: var(--muted); }
.nl-avatars { display: inline-flex; }
.nl-avatars > .nl-avatar + .nl-avatar { margin-left: -6px; }

/* cycle bar: one <span data-status> per issue */
.nl-cyclebar { display: flex; gap: 3px; }
.nl-cyclebar > span { flex: 1 1 0; height: 4px; border-radius: 1px; background: var(--muted); }
.nl-cyclebar > [data-status="todo"] { background: var(--ink); }
.nl-cyclebar > [data-status="in-progress"] { background: var(--accent); }
.nl-cyclebar > [data-status="in-review"] { background: var(--info); }
.nl-cyclebar > [data-status="done"] { background: var(--ok); }
.nl-cyclebar > [data-status="blocked"] { background: var(--danger); }

.nl-stats { display: flex; flex-wrap: wrap; gap: var(--s1) 20px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.nl-stats b { color: var(--ink); font-weight: 500; }

/* ---------- table ---------- */

.nl-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.nl-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.nl-table th {
  height: 36px;
  padding: 0 var(--s3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
}
.nl-table td { height: var(--h-row); padding: 0 var(--s3); border-top: 1px solid var(--line); }
.nl-table td.nl-cell-title { font-weight: 500; max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-table td.nl-cell-title a { color: var(--ink); text-decoration: none; }
.nl-table td.nl-cell-title a:hover { text-decoration: underline; }
.nl-table td.nl-cell-check { width: 20px; padding-right: 0; }
.nl-table td.nl-cell-check input, .nl-table th input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.nl-table tbody tr:hover td { background: var(--raised); }
.nl-table tr[aria-selected="true"] td { background: var(--raised); box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }

/* group row: <tr class="nl-group"><th colspan="…" scope="colgroup">…</th></tr> */
.nl-table tr.nl-group > th {
  height: var(--h-group-row);
  border-top: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink);
}
.nl-table tr.nl-group > th .nl-group-inner { display: flex; align-items: center; gap: 10px; }
.nl-table tr.nl-group > th .nl-count { background: transparent; padding: 0; min-width: 0; color: var(--muted); }

.nl-table tfoot td { height: var(--h-row); }
.nl-table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }

/* bulk action bar, shown when rows are selected */
.nl-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2) var(--s2) 14px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.nl-bulkbar > :first-child { margin-right: auto; font-family: var(--mono); font-size: 12px; }

/* loading placeholder */
.nl-skel { display: block; height: 10px; border-radius: 2px; background: var(--raised); }

/* ---------- board ---------- */

.nl-board { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s3); }
.nl-lane { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.nl-lane-head { display: flex; align-items: center; gap: var(--s2); min-height: 28px; padding: 0 2px; }
.nl-lane-head .nl-count { margin-left: auto; background: transparent; padding: 0; color: var(--muted); }

.nl-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); }
.nl-card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.nl-card-title { font-weight: 500; }
.nl-card-title a { color: var(--ink); text-decoration: none; }

.nl-add { min-height: 36px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.nl-add:hover { color: var(--ink); border-color: var(--muted); }

/* empty state */
.nl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; }
.nl-empty-title { font-size: 16px; line-height: 24px; font-weight: 600; }
.nl-empty-text { max-width: 360px; color: var(--muted); }
.nl-empty-actions { display: flex; gap: var(--s2); margin-top: 10px; }

/* ---------- navigation ---------- */

.nl-tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); }
.nl-tabs > a { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; color: var(--muted); text-decoration: none; }
.nl-tabs > a:hover { color: var(--ink); }
.nl-tabs > a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }

/* path breadcrumb: docs / runbooks / on-call-handover */
.nl-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.nl-crumbs a { color: var(--muted); text-decoration: none; }
.nl-crumbs a:hover { color: var(--ink); }
.nl-crumbs li + li::before { content: "/"; margin-right: 6px; }
.nl-crumbs [aria-current="page"] { color: var(--ink); }

.nl-pages { display: flex; gap: var(--s1); font-family: var(--mono); font-size: 12px; }
.nl-pages > a { display: flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 var(--s2); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.nl-pages > a:hover { background: var(--raised); }
.nl-pages > a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--ground); }

/* on this page */
.nl-toc { font-size: 14px; }
.nl-toc > a { display: flex; align-items: center; min-height: 32px; color: var(--muted); text-decoration: none; }
.nl-toc > a:hover, .nl-toc > a[aria-current="true"] { color: var(--ink); }
.nl-toc > a[aria-current="true"] { font-weight: 500; }

/* command palette */
.nl-palette { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--overlay-shadow); overflow: hidden; }
.nl-palette-input { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.nl-palette-input > svg { width: 16px; height: 16px; flex: none; }
.nl-palette-input > input { flex: 1 1 0; min-width: 0; height: 36px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; }
.nl-palette-list { padding: 6px; }
.nl-palette-group { padding: 10px var(--s2) var(--s1); }
.nl-palette-group:first-child { padding-top: 6px; }
.nl-palette-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 var(--s2); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.nl-palette-item > :first-child:not(.nl-dot), .nl-palette-item > .nl-dot + span { flex: 1 1 0; min-width: 0; }
.nl-palette-item[aria-selected="true"], .nl-palette-item:hover { background: var(--raised); color: var(--ink); }

/* ---------- feedback and overlays ---------- */

/* callout: <div class="nl-callout" data-kind="note|warning|danger|ok"> */
.nl-callout { padding: var(--s3) 14px; background: var(--surface); border: 1px solid var(--info); border-radius: var(--radius); }
.nl-callout-label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--info); }
.nl-callout > :not(.nl-callout-label) { margin: 2px 0 0; }
.nl-callout[data-kind="warning"] { border-color: var(--accent); }
.nl-callout[data-kind="warning"] .nl-callout-label { color: var(--accent-text); }
.nl-callout[data-kind="danger"] { border-color: var(--danger); }
.nl-callout[data-kind="danger"] .nl-callout-label { color: var(--danger); }
.nl-callout[data-kind="ok"] { border-color: var(--ok); }
.nl-callout[data-kind="ok"] .nl-callout-label { color: var(--ok); }

.nl-toast { display: flex; align-items: center; gap: var(--s3); max-width: 440px; padding: var(--s2) var(--s2) var(--s2) 14px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--overlay-shadow); }
.nl-toast > .nl-toast-text { flex: 1 1 0; min-width: 0; }

/* dialog: use the native <dialog class="nl-dialog"> */
.nl-dialog { width: min(440px, calc(100% - 32px)); padding: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--overlay-shadow); }
.nl-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.nl-dialog-body { padding: 18px 20px var(--s4); }
.nl-dialog-title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.nl-dialog-text { margin: 6px 0 0; color: var(--muted); }
.nl-dialog-actions { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) 20px; border-top: 1px solid var(--line); }

/* menu */
.nl-menu { min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--overlay-shadow); }
.nl-menu-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); width: 100%; min-height: 34px; padding: 0 var(--s2); border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nl-menu-item:hover, .nl-menu-item:focus-visible { background: var(--raised); outline: none; }
.nl-menu-item kbd { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.nl-menu-item--danger { color: var(--danger); }
.nl-menu-sep { height: 1px; margin: 6px 0; background: var(--line); border: 0; }

/* tooltip: inverted */
.nl-tooltip { display: inline-block; padding: var(--s1) var(--s2); border-radius: var(--radius); background: var(--ink); color: var(--ground); font-size: 12px; line-height: 16px; }

/* ---------- docs content ---------- */

.nl-docs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s6) 48px; padding: var(--s5) var(--s7) 48px; }
.nl-docs > article { flex: 999 1 460px; min-width: 0; max-width: var(--prose-width); }
.nl-docs > .nl-toc { flex: 1 1 160px; min-width: 0; padding-top: var(--s1); position: sticky; top: var(--s5); }

.nl-prose { font-size: 15px; line-height: 24px; }
.nl-prose h1 { margin: var(--s1) 0 0; font-size: 28px; line-height: 36px; font-weight: 600; }
.nl-prose h2 { margin: 28px 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); font-size: 18px; line-height: 26px; font-weight: 600; }
.nl-prose h3 { margin: 20px 0 0; font-size: 15px; line-height: 24px; font-weight: 600; }
.nl-prose p { margin: var(--s3) 0 0; }
.nl-prose .nl-lead { margin-top: 20px; font-size: 16px; line-height: 26px; }
.nl-prose small, .nl-prose .nl-small { font-size: 13px; line-height: 20px; color: var(--muted); }
.nl-prose ul:not(.nl-checklist) { margin: var(--s3) 0 0; padding-left: 18px; list-style: square; }
.nl-prose ul:not(.nl-checklist) > li { padding-left: var(--s1); }
.nl-prose ul:not(.nl-checklist) > li + li { margin-top: var(--s1); }
.nl-prose code { padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-family: var(--mono); font-size: 13px; }
.nl-prose blockquote { margin: var(--s4) 0 0; padding: var(--s3) 14px; background: var(--raised); border-radius: var(--radius); }
.nl-prose blockquote > footer { margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.nl-prose figure { margin: var(--s4) 0 0; }
.nl-prose figure img { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }
.nl-prose figcaption { margin-top: var(--s2); font-size: 13px; line-height: 20px; color: var(--muted); }
.nl-prose dl:not(.nl-meta) { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s3); margin: var(--s3) 0 0; }
.nl-prose dl:not(.nl-meta) dt { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.nl-prose dl:not(.nl-meta) dd { margin: 0; }
.nl-prose > .nl-callout, .nl-prose > .nl-code, .nl-prose > .nl-table-wrap, .nl-prose > .nl-embed, .nl-prose > .nl-decision { margin-top: var(--s4); }
.nl-prose .nl-table { min-width: 460px; font-size: 14px; line-height: 20px; }

/* numbered steps: <ol class="nl-steps"> with mono 01 02 03 */
.nl-steps { margin: var(--s3) 0 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--s2); }
.nl-steps > li { display: flex; gap: var(--s3); counter-increment: step; }
.nl-steps > li::before { content: counter(step, decimal-leading-zero); flex: none; width: 24px; padding-top: 2px; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* checklist */
.nl-checklist { margin: var(--s3) 0 0; padding: 0; list-style: none; }
.nl-checklist .nl-check { min-height: 32px; }
.nl-checklist .nl-check:has(input:checked) > span { color: var(--muted); text-decoration: line-through; }

/* metadata strip under the page title */
.nl-meta { display: flex; flex-wrap: wrap; margin-top: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--mono); font-size: 12px; }
.nl-meta > div { flex: 1 1 120px; padding: var(--s2) var(--s3); }
.nl-meta > div + div { border-left: 1px solid var(--line); }
.nl-meta dt, .nl-meta .nl-meta-key { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nl-meta dd { margin: 0; }

/* code block with header */
.nl-code { background: var(--code); border: 1px solid var(--line); border-radius: var(--radius); color: var(--code-ink); }
.nl-code-head { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: var(--s1) 6px var(--s1) 14px; border-bottom: 1px solid var(--code-line); font-family: var(--mono); font-size: 11px; color: var(--code-muted); }
.nl-code-head button { height: 24px; padding: 0 var(--s2); border: 1px solid var(--code-border); border-radius: var(--radius); background: transparent; color: var(--code-ink); font-family: var(--mono); font-size: 11px; cursor: pointer; }
.nl-code pre { margin: 0; padding: var(--s3) 14px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 22px; }
.nl-code pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }
.nl-code .c { color: var(--code-muted); }
.nl-code .add { color: var(--code-add); }
.nl-code .del { color: var(--code-del); }

/* issue embedded in a docs page */
.nl-embed { display: flex; align-items: center; gap: var(--s3); min-height: var(--h-row); padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.nl-embed:hover { background: var(--raised); color: var(--ink); }
.nl-embed > .nl-embed-title { flex: 1 1 0; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* decision record header */
.nl-decision { padding: var(--s3) 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.nl-decision-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.nl-decision-title { margin-top: var(--s1); font-size: 15px; line-height: 24px; font-weight: 600; }
.nl-decision-meta { margin-top: 2px; font-size: 13px; color: var(--muted); }

/* previous / next */
.nl-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: 40px; }
.nl-pager > a { display: block; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.nl-pager > a:hover { background: var(--raised); }
.nl-pager > a:last-child { text-align: right; }
.nl-pager-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nl-pager-title { display: block; font-weight: 500; }
.nl-page-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin-top: var(--s3); font-size: 13px; color: var(--muted); }

/* ---------- small screens ---------- */

@media (max-width: 720px) {
  .nl-rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .nl-main { padding: var(--s4); }
  .nl-docs { padding: var(--s4); }
  .nl-docs > .nl-toc { position: static; }
}