/* Monochrome "Notion" look for the Addition, Subtraction, Multiplication, Division, Floor Division, Square Root and Cube Root Calculators. Loaded from their _calculator.php,
   so it applies to those pages and their /embed only. It re-themes the page by overriding the daisyUI
   colour variables wherever a .nx-calc block is present, then styles the page's own nx-* blocks. */

html:has(.nx-calc) {
  --nx-ink: #37352f;
  --nx-muted: rgba(55, 53, 47, 0.65);
  --nx-faint: rgba(55, 53, 47, 0.45);
  --nx-line: rgba(55, 53, 47, 0.16);
  --nx-line-soft: rgba(55, 53, 47, 0.09);
  --nx-hover: rgba(55, 53, 47, 0.08);
  --nx-block: #f7f6f3;
  --nx-bg: #ffffff;
  --nx-solid: #2f2e2a;
  --nx-on-solid: #ffffff;

  --color-base-100: var(--nx-bg);
  --color-base-200: var(--nx-block);
  --color-base-300: #e9e8e4;
  --color-base-content: var(--nx-ink);
  --color-primary: var(--nx-solid);
  --color-primary-content: var(--nx-on-solid);
  --color-secondary: var(--nx-solid);
  --color-secondary-content: var(--nx-on-solid);
  --color-accent: var(--nx-solid);
  --color-accent-content: var(--nx-on-solid);
  --radius-box: 6px;
  --radius-field: 4px;
  --radius-selector: 4px;
}

html[data-theme="dark"]:has(.nx-calc) {
  --nx-ink: rgba(255, 255, 255, 0.86);
  --nx-muted: rgba(255, 255, 255, 0.6);
  --nx-faint: rgba(255, 255, 255, 0.4);
  --nx-line: rgba(255, 255, 255, 0.16);
  --nx-line-soft: rgba(255, 255, 255, 0.09);
  --nx-hover: rgba(255, 255, 255, 0.07);
  --nx-block: #252525;
  --nx-bg: #191919;
  --nx-solid: #ececec;
  --nx-on-solid: #191919;
  --color-base-300: #2f2f2f;
}

html:has(.nx-calc) body {
  background: var(--nx-bg);
  color: var(--nx-ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Shared site chrome, toned down to one ink colour on this page. */
html:has(.nx-calc) .navbar { box-shadow: 0 1px 0 var(--nx-line-soft); }
html:has(.nx-calc) .navbar .text-yellow-600 { color: var(--nx-muted); }
html:has(.nx-calc) .navbar img,
html:has(.nx-calc) footer img { filter: grayscale(1); }
html:has(.nx-calc) nav[aria-label="Breadcrumb"] { color: var(--nx-faint); margin-bottom: 28px; }
html:has(.nx-calc) nav[aria-label="Breadcrumb"] a { color: var(--nx-muted); }
html:has(.nx-calc) nav[aria-label="Breadcrumb"] .font-semibold { color: var(--nx-ink); font-weight: 500; }
html:has(.nx-calc) .text-primary { color: var(--nx-ink); }
html:has(.nx-calc) .text-blue-600 { color: var(--nx-muted); }
html:has(.nx-calc) .shadow-sm,
html:has(.nx-calc) .shadow-md { box-shadow: none; }
html:has(.nx-calc) .navbar.shadow-md { box-shadow: 0 1px 0 var(--nx-line-soft); }

/* Page head */
/* Icon and title share the first row; the subtitle and "Updated" line run full width underneath. */
.nx-head { margin: 0 0 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.nx-head > :not(.nx-page-icon):not(h1) { grid-column: 1 / -1; }
.nx-head .nx-page-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 0;
  border: 1px solid var(--nx-line); border-radius: 8px;
  font-size: 34px; font-weight: 300; line-height: 1; color: var(--nx-ink);
}
.nx-head h1 { font-size: 40px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--nx-ink); }
.nx-head p { margin-top: 8px; font-size: 16px; color: var(--nx-muted); }

/* Calculator block */
.nx-calc {
  border: 1px solid var(--nx-line);
  border-radius: 6px;
  background: var(--nx-bg);
  padding: 22px;
  color: var(--nx-ink);
}
.nx-eq { display: flex; align-items: flex-end; gap: 12px; }
.nx-field { flex: 1 1 0; min-width: 0; }
.nx-calc label, .nx-label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--nx-muted);
}
.nx-field input {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--nx-line); border-radius: 4px;
  background: var(--nx-block); color: var(--nx-ink);
  font: 500 18px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  outline: none; transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  -moz-appearance: textfield; appearance: textfield;
}
.nx-field input::-webkit-outer-spin-button,
.nx-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nx-field input::placeholder { color: var(--nx-faint); }
.nx-field input:hover { border-color: var(--nx-faint); }
.nx-field input:focus { background: var(--nx-bg); border-color: var(--nx-ink); box-shadow: 0 0 0 3px var(--nx-hover); }
.nx-op {
  flex: 0 0 auto; width: 20px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font: 400 22px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--nx-faint);
}

.nx-result {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 14px 12px 14px 14px;
  border-radius: 4px; background: var(--nx-block);
}
.nx-result.hidden { display: none; }
/* Placeholder shown while there is no result, so the block does not jump when the sum appears. */
.nx-result-empty { display: none; }
.nx-result.hidden + .nx-result-empty { display: flex; }
.nx-result-empty .nx-op, .nx-result-empty .nx-label { color: var(--nx-faint); }
.nx-dash { display: block; font: 600 28px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--nx-faint); }
.nx-expr {
  min-height: 18px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 18px; color: var(--nx-muted); font-variant-numeric: tabular-nums;
}
.nx-result-empty .nx-expr { color: var(--nx-faint); }
/* Error hints (e.g. divide by zero) wrap instead of being cut off, and read as a message, not a placeholder. */
.nx-result-empty.is-error .nx-expr { white-space: normal; color: var(--nx-ink); }
.nx-result .nx-op { height: auto; color: var(--nx-muted); }
.nx-result-body { flex: 1 1 auto; min-width: 0; }
.nx-result-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.nx-btn-sm { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-size: 13px; background: var(--nx-bg); white-space: nowrap; }
.nx-btn-sm:hover { background: var(--nx-bg); border-color: var(--nx-faint); }
.nx-btn-sm svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nx-btn-sm[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }
.nx-copy { min-width: 82px; justify-content: center; }
.nx-copy .nx-ico-check { display: none; }
.nx-copy.is-copied .nx-ico-check { display: block; }
.nx-copy.is-copied .nx-ico-copy { display: none; }
.nx-result .nx-copy.is-copied, .nx-result .nx-copy.is-copied:hover { background: var(--nx-solid); border-color: var(--nx-solid); color: var(--nx-on-solid); }
.nx-result input::selection { background: var(--nx-line); }
.nx-result input[data-size="m"] { font-size: 22px; line-height: 35px; }
.nx-result input[data-size="s"] { font-size: 17px; line-height: 35px; }
.nx-result.nx-flash { animation: nx-flash 0.6s ease-out; }
@keyframes nx-flash { from { box-shadow: inset 0 0 0 1px var(--nx-ink); } to { box-shadow: inset 0 0 0 1px transparent; } }
@media (prefers-reduced-motion: reduce) { .nx-result.nx-flash { animation: none; } }
.nx-result label, .nx-result .nx-label { margin-bottom: 2px; }
.nx-result input {
  display: block; width: 100%; padding: 0; border: 0; background: transparent; outline: none;
  color: var(--nx-ink); text-overflow: ellipsis;
  font: 600 28px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.nx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.nx-btn {
  height: 34px; padding: 0 14px;
  border: 1px solid var(--nx-line); border-radius: 4px;
  background: transparent; color: var(--nx-ink);
  font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.nx-btn:hover { background: var(--nx-hover); }
.nx-btn-primary { background: var(--nx-solid); border-color: var(--nx-solid); color: var(--nx-on-solid); }
.nx-btn-primary:hover { background: var(--nx-solid); opacity: 0.85; }
.nx-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  border: 0; border-radius: 4px; background: transparent; color: var(--nx-muted); cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nx-icon-btn:hover { background: var(--nx-hover); color: var(--nx-ink); }
.nx-icon-btn svg { width: 18px; height: 18px; }
.nx-btn:focus-visible, .nx-icon-btn:focus-visible { outline: 2px solid var(--nx-ink); outline-offset: 2px; }
.nx-hint { margin-left: 6px; font-size: 12px; color: var(--nx-faint); }
.nx-hint kbd {
  padding: 1px 5px; border: 1px solid var(--nx-line); border-radius: 3px;
  font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--nx-muted);
}
.nx-tools { display: inline-flex; gap: 2px; margin-left: auto; }
/* The shared Embed button keeps its own classes; restyle it here to match .nx-icon-btn. */
.nx-tools > .btn {
  width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; box-shadow: none;
  border-radius: 4px; background: transparent; color: var(--nx-muted);
}
.nx-tools > .btn:hover { background: var(--nx-hover); color: var(--nx-ink); }
.nx-tools > .btn svg { width: 18px; height: 18px; }

/* Article */
.nx-doc { padding: 8px 0 0; max-width: 760px; color: var(--nx-ink); font-size: 16px; line-height: 1.65; }
/* Full column width, lined up with the calculator block (all pages using this stylesheet). */
.nx-doc.nx-doc-full { max-width: none; }
.nx-doc h2 { margin: 28px 0 10px; font-size: 30px; line-height: 1.3; font-weight: 700; }
.nx-doc h3 { margin: 34px 0 8px; font-size: 20px; line-height: 1.35; font-weight: 600; }
.nx-doc p, .nx-doc li { color: var(--nx-ink); }
.nx-doc p { margin-bottom: 12px; }
.nx-doc ul, .nx-doc ol { margin-bottom: 16px; }
.nx-doc .font-medium { font-weight: 600; }
.nx-doc h3 { scroll-margin-top: 84px; }
.nx-head .nx-updated { margin-top: 6px; font-size: 13px; color: var(--nx-faint); }
.nx-quick { margin: 4px 0 18px; padding: 16px 18px; border-left: 3px solid var(--nx-ink); background: var(--nx-block); border-radius: 0 4px 4px 0; }
.nx-doc .nx-quick h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nx-muted); }
.nx-quick p { margin-bottom: 8px; }
.nx-quick ul { margin: 0; padding-left: 18px; list-style: disc; }
.nx-quick li { margin: 2px 0; }
.nx-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 16px; }
.nx-dl dt { font-weight: 600; }
.nx-dl dd { margin: 0; }
.nx-toc { margin: 4px 0 22px; padding: 14px 18px; border-radius: 4px; background: var(--nx-block); }
.nx-toc-title { margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nx-muted); }
.nx-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.nx-toc li { break-inside: avoid; }
.nx-toc a {
  display: block; padding: 3px 0; font-size: 14px; line-height: 1.45; color: var(--nx-muted);
  text-decoration: underline; text-decoration-color: var(--nx-line); text-underline-offset: 3px;
}
.nx-toc a:hover { color: var(--nx-ink); text-decoration-color: var(--nx-ink); }
.nx-code {
  margin: 6px 0 16px; padding: 14px 18px; overflow-x: auto;
  border-radius: 4px; background: var(--nx-block);
  font: 400 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--nx-ink);
}
.nx-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
.nx-grid > div { padding: 12px 14px; border: 1px solid var(--nx-line); border-radius: 4px; font-size: 15px; line-height: 1.55; }
.nx-grid > div > span { display: block; margin-bottom: 2px; font-weight: 600; }
.nx-callout {
  display: flex; gap: 12px; margin: 20px 0; padding: 16px 18px;
  border-radius: 4px; background: var(--nx-block);
}
.nx-callout > .nx-callout-icon { flex: 0 0 auto; font-size: 18px; line-height: 1.6; filter: grayscale(1); }
.nx-callout p:last-child { margin-bottom: 0; }
.nx-toggle { border-bottom: 1px solid var(--nx-line-soft); }
.nx-toggle summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 6px; margin: 0 -6px;
  border-radius: 4px; font-weight: 600; cursor: pointer; list-style: none;
}
.nx-toggle summary::-webkit-details-marker { display: none; }
.nx-toggle summary::before {
  content: ""; flex: 0 0 auto; width: 0; height: 0;
  border-left: 6px solid var(--nx-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s;
}
.nx-toggle[open] summary::before { transform: rotate(90deg); }
.nx-toggle summary:hover { background: var(--nx-hover); }
.nx-toggle > div { padding: 2px 0 12px 14px; }

/* Sidebar: flat page lists instead of boxed cards */
.nx-side section { border: 0; border-radius: 0; margin-bottom: 28px; }
.nx-side section > div:first-child { background: transparent; padding: 0 8px 6px; border-bottom: 1px solid var(--nx-line-soft); }
.nx-side h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nx-muted); }
.nx-side h4 { margin: 0 0 2px; padding: 0 8px; font-size: 12px; font-weight: 500; color: var(--nx-faint); }
.nx-side .js-toggle-box { font-size: 12px; color: var(--nx-faint); }
.nx-side section > div[id] { padding: 6px 0 0; background: transparent; }
.nx-side section > div[id] > div { padding: 10px 0 0; border: 0; }
.nx-side ul { border: 0; border-radius: 0; }
.nx-side ul > li { border: 0; }
.nx-side ul a { padding: 5px 8px; border-radius: 4px; color: var(--nx-ink); }
.nx-side ul a span { font-size: 14px; }
.nx-side ul a span[aria-hidden] { opacity: 0; }
.nx-side ul a:hover { background: var(--nx-hover); }
.nx-side ul a:hover span[aria-hidden] { opacity: 0.5; }

@media (min-width: 640px) {
  .nx-grid { grid-template-columns: 1fr 1fr; }
  .nx-grid > .nx-wide { grid-column: span 2; }
}
@media (max-width: 639px) {
  .nx-head h1 { font-size: 30px; }
  .nx-head .nx-page-icon { width: 48px; height: 48px; font-size: 28px; }
  .nx-calc { padding: 16px; }
  .nx-eq { flex-direction: column; align-items: stretch; gap: 4px; }
  .nx-eq .nx-op { height: 22px; width: auto; justify-content: flex-start; padding-left: 2px; }
  .nx-result { flex-wrap: wrap; row-gap: 10px; }
  .nx-result-body { flex-basis: 0; }
  .nx-result-actions { flex-basis: 100%; flex-wrap: wrap; padding-left: 32px; }
  .nx-result input { font-size: 24px; line-height: 30px; }
  .nx-result input[data-size="m"] { font-size: 19px; line-height: 30px; }
  .nx-result input[data-size="s"] { font-size: 14px; line-height: 30px; }
  .nx-dash { line-height: 30px; }
  .nx-hint { display: none; }
  .nx-toc ol { columns: 1; }
  .nx-dash { font-size: 24px; }
  .nx-doc h2 { font-size: 24px; }
}

/* Share dialog: brand-coloured network badges go grey to keep the page to one ink colour. */
html:has(.nx-calc) .js-share-modal .js-share-link > span:first-child { filter: grayscale(1); }

html:has(.nx-calc) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.nx-calc) { scroll-behavior: auto; } }
.nx-nowrap { white-space: nowrap; }
.nx-doc code { padding: 1px 4px; border-radius: 3px; background: var(--nx-hover); font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* Single-input calculators (Square Root): the operator sits before the field, which stays a sensible width. */
.nx-op-lead { font-size: 26px; color: var(--nx-muted); }
.nx-eq .nx-op-lead + .nx-field { flex: 0 1 420px; }
/* The result lines up with the input row (20px operator + 12px gap + 420px field) instead of spanning the card. */
.nx-calc:has(.nx-op-lead) .nx-result { max-width: 452px; }
@media (max-width: 639px) {
  .nx-eq:has(.nx-op-lead) { flex-direction: row; align-items: flex-end; gap: 10px; }
  .nx-eq .nx-op-lead { height: 44px; width: 20px; padding: 0; justify-content: center; }
  .nx-eq .nx-op-lead + .nx-field { flex: 1 1 auto; }
}
/* Logarithm: two fields with no operator glyph between them, a word-sized page icon, and quick-pick chips
   (10 / e / 2) in the Base label row. */
.nx-head .nx-page-icon.nx-page-icon-word { font-size: 22px; font-weight: 400; font-style: italic; }
.nx-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.nx-label-row label { margin-bottom: 0; }
.nx-chips { display: inline-flex; gap: 4px; }
.nx-chip {
  height: 18px; min-width: 24px; padding: 0 6px;
  border: 1px solid var(--nx-line); border-radius: 3px; background: transparent; color: var(--nx-muted);
  font: 500 11px/16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nx-chip:hover { background: var(--nx-hover); color: var(--nx-ink); }
.nx-chip[aria-pressed="true"] { background: var(--nx-solid); border-color: var(--nx-solid); color: var(--nx-on-solid); }
.nx-chip:focus-visible { outline: 2px solid var(--nx-ink); outline-offset: 1px; }
@media (max-width: 639px) {
  .nx-eq.nx-eq-pair { gap: 14px; }
}
/* Inline links in the article read as links (Tailwind's reset removes the underline). The TOC keeps its own style. */
.nx-doc :is(p, li, dd) a:not(.nx-toc a) { text-decoration: underline; text-decoration-color: var(--nx-faint); text-underline-offset: 3px; }
.nx-doc :is(p, li, dd) a:not(.nx-toc a):hover { text-decoration-color: var(--nx-ink); }
/* Keep spaces used to line up formulas; long lines still wrap on phones. */
.nx-code { white-space: pre-wrap; }
/* Single-input calculators with the operator after the field (Factorial: n !). Same sizing as .nx-op-lead. */
.nx-op-trail { font-size: 26px; color: var(--nx-muted); }
.nx-eq .nx-field:has(+ .nx-op-trail) { flex: 0 1 420px; }
.nx-calc:has(.nx-op-trail) .nx-result { max-width: 452px; }
@media (max-width: 639px) {
  .nx-eq:has(.nx-op-trail) { flex-direction: row; align-items: flex-end; gap: 10px; }
  .nx-eq .nx-op-trail { height: 44px; width: 20px; padding: 0; justify-content: center; }
  .nx-eq .nx-field:has(+ .nx-op-trail) { flex: 1 1 auto; }
}
/* Simple data table in the article; the wrapper scrolls sideways on phones instead of the page. */
.nx-table-wrap { margin: 6px 0 16px; overflow-x: auto; border: 1px solid var(--nx-line); border-radius: 4px; }
.nx-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.nx-table th, .nx-table td { padding: 7px 14px; border-bottom: 1px solid var(--nx-line-soft); text-align: left; white-space: nowrap; }
.nx-table th { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--nx-muted); background: var(--nx-block); }
.nx-table tr:last-child td { border-bottom: 0; }
.nx-table td.nx-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nx-table td.nx-num { font-size: 14px; }
@media (max-width: 639px) {
  .nx-table th, .nx-table td { padding: 7px 10px; }
  .nx-table td.nx-num { font-size: 13px; }
}
/* Bit Shift: monospace page icon, a wider operator glyph (<<, >>, >>>), a segmented control for the shift
   direction, a second input row, and the bit diagram + formats table under the result. */
.nx-head .nx-page-icon.nx-page-icon-mono { font: 500 20px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -0.04em; }
.nx-op.nx-op-shift { width: auto; min-width: 28px; font-size: 17px; color: var(--nx-muted); }
.nx-op.nx-op-word { width: auto; min-width: 20px; font-family: inherit; font-size: 15px; font-weight: 400; color: var(--nx-muted); }
.nx-row-gap { margin-top: 14px; }
.nx-seg { display: flex; gap: 3px; height: 44px; padding: 3px; border: 1px solid var(--nx-line); border-radius: 4px; background: var(--nx-block); }
.nx-seg button {
  display: inline-flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 3px; background: transparent; color: var(--nx-muted);
  font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nx-seg button code { font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nx-seg button:hover { background: var(--nx-hover); color: var(--nx-ink); }
.nx-seg button[aria-pressed="true"] { background: var(--nx-bg); color: var(--nx-ink); box-shadow: 0 0 0 1px var(--nx-line), 0 1px 2px rgba(15, 15, 15, 0.06); }
.nx-seg button:focus-visible { outline: 2px solid var(--nx-ink); outline-offset: 1px; }
.nx-bits { margin-top: 8px; padding: 14px; border-radius: 4px; background: var(--nx-block); }
.nx-bits.hidden { display: none; }
.nx-bits-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; align-items: baseline; }
.nx-bits-label { font-size: 12px; font-weight: 500; color: var(--nx-muted); }
.nx-bits-row { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 500 16px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nx-bit-group { display: inline-flex; gap: 1px; }
.nx-bit { display: inline-block; width: 1.2em; border-radius: 2px; text-align: center; }
.nx-bit.is-out { color: var(--nx-faint); text-decoration: line-through; }
.nx-bit.is-in { background: var(--nx-line); }
.nx-bits-note { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--nx-muted); }
.nx-bits .nx-table-wrap { margin: 12px 0 0; background: var(--nx-bg); }
.nx-bits .nx-table th { width: 1%; }
.nx-result input[data-size="xs"] { font-size: 14px; line-height: 35px; }
@media (max-width: 639px) {
  .nx-seg button { gap: 4px; font-size: 12px; }
  .nx-seg button code { font-size: 12px; }
  .nx-bits { padding: 12px; }
  .nx-bits-grid { gap: 6px 10px; }
  .nx-bits-row { gap: 4px 6px; font-size: 13px; }
  .nx-bit { width: 1.05em; }
  .nx-result input[data-size="xs"] { font-size: 12px; line-height: 30px; }
}
/* Bitwise: a quiet note in a label row (B shows the shared number format) and the result row of the bit
   diagram set off from A and B by a rule. */
.nx-label-note { font-size: 12px; color: var(--nx-faint); }
.nx-bits-grid > .nx-bits-sum { padding-top: 6px; border-top: 1px solid var(--nx-line); }
.nx-bits-grid > .nx-bits-sum.nx-bits-label { font-weight: 600; color: var(--nx-ink); }
/* NOR: an empty half that keeps a lone field in the left column, and a muted intermediate row (A OR B) in the
   bit diagram. */
.nx-spacer { visibility: hidden; }
.nx-bits-grid > .nx-bits-faint { color: var(--nx-faint); }
@media (max-width: 639px) {
  .nx-spacer { display: none; }
}
/* Absolute Value: the field sits between two bars, |x|. Same sizing as .nx-op-lead / .nx-op-trail, and the
   result lines up with the whole row (20px bar + 12px gap on each side of the 420px field). */
.nx-op-bar { font-weight: 300; }
.nx-calc:has(.nx-op-lead):has(.nx-op-trail) .nx-result { max-width: 484px; }
/* Binary Division: the long-division steps table sits first in the details panel. */
.nx-bits .nx-table-wrap.nx-steps { margin-top: 0; }
.nx-steps td.is-one { font-weight: 700; }
.nx-table td.nx-wrap { white-space: normal; overflow-wrap: anywhere; }
.nx-table td.nx-pre { white-space: pre; }
@media (max-width: 639px) {
  .nx-steps .nx-table th, .nx-steps .nx-table td { padding: 7px 8px; }
  .nx-steps .nx-table td.nx-num { font-size: 12px; }
}
/* Fibonacci: the field sits inside F( … ). "F(" is wider than one glyph, so these ops size to their text. */
.nx-eq .nx-op.nx-op-fn { width: auto; min-width: 20px; font-weight: 300; }
/* Description sections as cards (opt-in: pages wrap each h3 section in .nx-card). Same border and radius
   as the calculator block, so the page reads as a stack of matching blocks. */
.nx-doc .nx-card { margin: 0 0 16px; padding: 22px 24px; border: 1px solid var(--nx-line); border-radius: 6px; background: var(--nx-bg); }
.nx-doc .nx-card > h2:first-child, .nx-doc .nx-card > h3:first-child { margin-top: 0; }
.nx-doc .nx-card > :last-child { margin-bottom: 0; }
.nx-doc .nx-card > .nx-faq:last-child .nx-toggle:last-child { border-bottom: 0; }
.nx-doc:has(.nx-card) { padding-top: 16px; }
.nx-doc .nx-card + .nx-callout { margin-top: 0; }
@media (max-width: 639px) {
  .nx-doc .nx-card { padding: 16px; }
}
/* Function-style inputs (sin( θ )) with an options row underneath: keep the row as wide as the input row. */
@media (min-width: 640px) {
  .nx-calc:has(.nx-op-fn) .nx-eq.nx-row-gap { max-width: 484px; }
}
/* Lagrange Error Bound: a segmented control with many options that wraps onto a second row on phones. */
.nx-seg.nx-seg-wrap { flex-wrap: wrap; height: auto; }
.nx-seg.nx-seg-wrap button { height: 36px; }
@media (max-width: 639px) {
  .nx-seg.nx-seg-wrap button { flex: 1 1 calc(33.333% - 3px); }
}
/* Cross Multiplication: two stacked fractions (numerator over a bar over denominator) with = between them.
   They stay side by side on phones; the box being solved for gets a dashed border. */
.nx-prop { display: flex; align-items: center; justify-content: center; gap: 14px; }
.nx-frac { display: flex; flex: 0 1 200px; min-width: 0; flex-direction: column; gap: 6px; }
.nx-frac-cap { font-size: 12px; color: var(--nx-faint); text-align: center; }
.nx-frac .nx-field input { text-align: center; }
.nx-frac .nx-field input.is-missing { border-style: dashed; border-color: var(--nx-faint); background: var(--nx-bg); }
.nx-frac-bar { display: block; height: 2px; border-radius: 1px; background: var(--nx-ink); }
.nx-prop > .nx-op { margin-top: 18px; }
.nx-prop-label { text-align: center; }
@media (max-width: 639px) {
  .nx-prop { gap: 8px; }
  .nx-frac .nx-field input { padding: 0 6px; font-size: 16px; }
}
/* Add Fractions (and the other fraction-arithmetic pages): a term is a caption over an optional whole-number
   box beside a stacked fraction, so mixed numbers read as 2 3/4. */
.nx-term { display: flex; flex: 0 1 260px; min-width: 0; flex-direction: column; gap: 6px; }
.nx-term-row { display: flex; align-items: center; gap: 8px; }
.nx-term-row .nx-frac { flex: 1 1 0; }
.nx-whole { flex: 0 0 40%; }
.nx-whole.hidden { display: none; }
.nx-whole input { text-align: center; }
@media (max-width: 639px) {
  .nx-term-row { gap: 4px; }
  .nx-whole input { padding: 0 4px; font-size: 16px; }
}
/* Golden Ratio: a bar split 61.8% / 38.2% above the details table (a dark, b light). */
.nx-split { display: flex; height: 30px; overflow: hidden; border-radius: 4px; font-size: 12px; }
.nx-split span { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; white-space: nowrap; }
.nx-split b { font-weight: 600; font-variant-numeric: tabular-nums; }
.nx-split-a { flex: 0 0 61.8034%; background: var(--nx-ink); color: var(--nx-bg); }
.nx-split-b { flex: 1 1 auto; background: var(--nx-line); color: var(--nx-ink); }
.nx-split + .nx-table-wrap { margin-top: 12px; }
/* Unit Rate: a wide stacked fraction whose top and bottom lines each hold a number and a unit box. */
.nx-term.nx-term-wide { flex: 0 1 440px; }
.nx-term-wide > .nx-frac { flex: 0 0 auto; }
.nx-frac-line { display: flex; gap: 8px; }
.nx-frac-line > .nx-field { flex: 1 1 0; }
.nx-frac-line > .nx-field.nx-unit { flex: 0 0 38%; }
.nx-frac-caps { display: flex; gap: 8px; }
.nx-frac-caps .nx-frac-cap { flex: 1 1 0; }
.nx-frac-caps .nx-frac-cap:nth-child(2) { flex: 0 0 38%; }
/* Fractional Exponent: base box, a raised ^, then the exponent as a stacked fraction; a chip row underneath. */
.nx-term.nx-term-base { flex: 0 1 200px; }
.nx-term.nx-term-base input { text-align: center; }
.nx-term.nx-term-exp { flex: 0 1 130px; }
.nx-term-exp > .nx-frac { flex: 0 0 auto; }
.nx-prop > .nx-op.nx-op-pow { margin-top: 0; align-self: flex-start; padding-top: 20px; }
.nx-chip-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* Percentage: one input row per mode; the rows for the other modes are hidden. */
.nx-eq.hidden { display: none; }
/* Decimal to Percentage: a trailing operator (× 100) with a full-width field and result, so the details table lines up. */
.nx-eq.nx-eq-wide .nx-field:has(+ .nx-op-trail) { flex: 1 1 auto; }
.nx-calc:has(.nx-eq-wide) .nx-result { max-width: none; }
/* Time Percentage: a number field with a unit <select> beside it. */
.nx-field-unit { display: flex; gap: 6px; }
.nx-field-unit input { flex: 1 1 auto; min-width: 0; }
.nx-field-unit select {
  flex: 0 0 auto; height: 44px; padding: 0 28px 0 10px;
  border: 1px solid var(--nx-line); border-radius: 4px;
  background-color: var(--nx-block); color: var(--nx-ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--nx-muted) 50%), linear-gradient(135deg, var(--nx-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  -webkit-appearance: none; appearance: none; outline: none; transition: border-color 0.12s, box-shadow 0.12s;
}
/* Bond Convexity: a plain dropdown field in the input row (coupon frequency). */
.nx-field > select {
  width: 100%; height: 44px; padding: 0 26px 0 10px;
  border: 1px solid var(--nx-line); border-radius: 4px;
  background-color: var(--nx-block); color: var(--nx-ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--nx-muted) 50%), linear-gradient(135deg, var(--nx-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none; outline: none; transition: border-color 0.12s, box-shadow 0.12s;
}
.nx-field:has(> select) { flex-grow: 1.6; }
.nx-field > select:hover { border-color: var(--nx-faint); }
.nx-field > select:focus { border-color: var(--nx-ink); box-shadow: 0 0 0 3px var(--nx-hover); }
.nx-field-unit select:hover { border-color: var(--nx-faint); }
.nx-field-unit select:focus { border-color: var(--nx-ink); box-shadow: 0 0 0 3px var(--nx-hover); }
/* Average Percentage: a list of numbered rows (value, optional weight, remove) with an Add button. */
.nx-rows-head, .nx-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.nx-calc.is-weighted .nx-rows-head, .nx-calc.is-weighted .nx-row { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) 34px; }
.nx-rows-head .nx-label { margin-bottom: 0; }
.nx-rows-list { display: grid; gap: 8px; margin-top: 6px; }
.nx-row-w { display: none; }
.nx-calc.is-weighted .nx-row-w { display: block; }
.nx-row-n { font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--nx-faint); text-align: right; }
.nx-row-x { font-size: 20px; line-height: 1; }
.nx-row-x[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }
.nx-rows-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; padding-left: 26px; }
.nx-rows-foot .nx-btn-sm[disabled] { opacity: 0.45; }
/* Area of Rectangle: a to-scale drawing of the shape above the details table. */
.nx-shape { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 10px; overflow: visible; }
.nx-shape rect { fill: var(--nx-hover); stroke: var(--nx-ink); stroke-width: 1.5; }
.nx-shape text { fill: var(--nx-muted); font: 500 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nx-shape .nx-shape-a { fill: var(--nx-ink); font-weight: 600; }
/* Description diagrams (inline SVG): monochrome, follow the theme through currentColor and the --nx tokens. */
.nx-fig { margin: 4px 0 18px; color: var(--nx-ink); }
.nx-fig svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; overflow: visible; }
.nx-fig text { fill: currentColor; font: 500 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nx-fig .f-strong { font-weight: 700; font-size: 13px; }
.nx-fig .f-fill { fill: var(--nx-block); }
.nx-fig .f-dark { fill: var(--nx-line); }
.nx-fig .f-line { stroke: currentColor; stroke-width: 1.5; }
.nx-fig .f-thin { fill: none; stroke: currentColor; stroke-opacity: 0.35; }
.nx-fig .f-faint { fill: none; stroke: currentColor; stroke-opacity: 0.15; }
.nx-fig .f-dash { stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 5 4; }
.nx-fig figcaption { margin-top: 6px; text-align: center; font-size: 13px; color: var(--nx-muted); }
.nx-shape .nx-shape-d { stroke: var(--nx-ink); stroke-width: 1.2; stroke-dasharray: 5 4; }
.nx-shape circle, .nx-shape ellipse { fill: var(--nx-hover); stroke: var(--nx-ink); stroke-width: 1.5; }
.nx-shape circle.nx-shape-ring, .nx-shape ellipse.nx-shape-ring { stroke-width: 3; }
.nx-shape .nx-shape-r { stroke: var(--nx-ink); stroke-width: 1.5; }
.nx-shape .nx-shape-c { fill: var(--nx-ink); stroke: none; }
/* Center of Circle: the equation line above the coefficient fields, filled in as you type. */
.nx-formula { margin-top: 14px; padding: 9px 12px; border-radius: 4px; background: var(--nx-block); color: var(--nx-ink);
  font: 500 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.nx-formula + .nx-eq.nx-row-gap { margin-top: 12px; }
@media (max-width: 639px) {
  .nx-eq.nx-eq-row { flex-direction: row; align-items: flex-end; gap: 10px; }
}
.nx-shape .nx-shape-ax { stroke: var(--nx-faint); stroke-width: 1; }
.nx-shape .nx-shape-p { fill: var(--nx-bg); stroke: var(--nx-ink); stroke-width: 1.5; }
.nx-plot { max-height: 260px; }
/* Chord Length: the chord drawn bold and the circular segment it cuts off shaded. */
.nx-shape .nx-shape-ch { stroke: var(--nx-ink); stroke-width: 3; stroke-linecap: round; }
.nx-shape .nx-shape-seg { fill: var(--nx-line); stroke: none; }
.nx-shape .nx-shape-h { stroke: var(--nx-muted); stroke-width: 1.2; }
.nx-shape .nx-shape-semi { fill: var(--nx-hover); stroke: var(--nx-ink); stroke-width: 1.5; stroke-linejoin: round; }
.nx-shape .nx-shape-tri { fill: var(--nx-hover); stroke: var(--nx-ink); stroke-width: 1.5; stroke-linejoin: round; }
.nx-head .nx-page-icon.nx-page-icon-svg svg { width: 74%; height: 74%; display: block; }
/* Contribution Margin: an optional extra field on its own row under the equation, about one field wide. */
.nx-eq.nx-eq-sub { margin-top: 14px; }
@media (min-width: 640px) { .nx-eq.nx-eq-sub .nx-field { flex: 0 1 calc((100% - 88px) / 3); } }