:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f0f3f6;
  --border: #dde3ea;
  --text: #16202a;
  --text-muted: #5f6b78;
  --accent: #0f766e;
  --accent-soft: #d8f0ec;
  --accent-text: #ffffff;
  --accent-hover: #115e59;
  --result: #0b5e57;
  --error: #b42318;
  --error-soft: #fde8e6;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
  --radius: 14px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  --line: 1.75rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1318;
    --surface: #161c23;
    --surface-2: #1d252e;
    --border: #28323d;
    --text: #e6ebf0;
    --text-muted: #8b98a7;
    --accent: #2dd4bf;
    --accent-soft: #11332f;
    --accent-text: #06201d;
    --accent-hover: #5eead4;
    --result: #5eead4;
    --error: #f87171;
    --error-soft: #3b1a1a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0e1318;
  --surface: #161c23;
  --surface-2: #1d252e;
  --border: #28323d;
  --text: #e6ebf0;
  --text-muted: #8b98a7;
  --accent: #2dd4bf;
  --accent-soft: #11332f;
  --accent-text: #06201d;
  --accent-hover: #5eead4;
  --result: #5eead4;
  --error: #f87171;
  --error-soft: #3b1a1a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Until app.js has translated the page (the head script sets this class for languages
   other than English), the static English text is invisible but keeps its space, so
   nothing flashes and nothing moves. The head script removes the class by itself at
   DOMContentLoaded or after 3 s, so the text never stays hidden. */
html.i18n-pending :is([data-i18n], [data-i18n-html], #hint-text, .select-wrap select) {
  color: transparent !important;
  text-shadow: none !important;
}
html.i18n-pending .editor::placeholder { color: transparent; }

/* Top bar ----------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 800;
  font-size: 1.3rem;
  box-shadow: var(--shadow);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6b78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 36px;
  padding: 0 30px 0 12px;
  cursor: pointer;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
}

.icon-btn:hover, .btn:hover, .select-wrap select:hover { border-color: var(--accent); }
.icon-btn:hover, .btn:where(:not(.btn-primary, .btn-link, :disabled)):hover, .select-wrap select:hover { background-color: var(--surface-2); }

/* Three-state theme button: the icon shows the chosen state (system, light, dark). */
.theme-btn svg { display: none; }
.theme-btn[data-state="system"] .icon-auto,
.theme-btn[data-state="light"] .icon-sun,
.theme-btn[data-state="dark"] .icon-moon { display: block; }

/* Settings: the ⚙ dialog holds every setting; wide screens also keep compact format,
   decimals and language selects in the top bar (phones hide them, see below). */
.settings-body { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.settings-sep { border: 0; border-top: 1px solid var(--border); margin: 2px 0; width: 100%; }
.switch-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.switch-row input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-title { font-weight: 600; }
.switch-hint { font-size: 0.8rem; color: var(--text-muted); }
.settings-body .select-wrap { display: flex; flex-direction: column; gap: 6px; }
.settings-body .select-caption {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
  font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
}
.settings-body .select-wrap select { width: 100%; max-width: none; font-family: var(--font); font-size: 1rem; }

/* Phones, narrow windows and touch tablets: the three selects no longer fit next to the
   brand, so only the Settings dialog has them. */
@media (max-width: 760px), (max-width: 860px) and (pointer: coarse) {
  .topbar .select-wrap { display: none; }
}
/* One column (900px and less): the language select goes first, so the brand, the two
   other selects and the buttons keep the 24px gutter of the cards and never scroll
   the page sideways. Settings keeps all three. */
@media (max-width: 900px) {
  .topbar .select-lang { display: none; }
}
/* Touch screens a little wider than a phone (landscape phones, small tablets): Paste and
   Clear show only their icons, so the toolbar stays on one row. */
@media (min-width: 601px) and (max-width: 860px) and (pointer: coarse) {
  .btn-icon-text:not(.rates-btn) { padding-left: 12px; padding-right: 12px; }
  .btn-icon-text:not(.rates-btn) .btn-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .btn-icon-text svg { color: var(--text); }
}

/* Layout ------------------------------------------------------------------ */

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 326px;  /* fits a 300px ad inside the card */
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 24px 28px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.workspace { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar-spacer { flex: 1; }
/* When the toolbar would wrap, the rates button takes a row of its own (app.js
   layoutRatesRow), so Export and Share stay together on the right. */
.toolbar.rates-own-row .rates-btn { order: 10; flex: 1 0 100%; justify-content: center; }

.btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled, .menu.is-disabled > summary.btn { opacity: 0.45; cursor: default; }
.btn:disabled:hover, .menu.is-disabled > summary.btn:hover { border-color: var(--border); background-color: var(--surface); }
.btn-primary:disabled:hover { border-color: var(--accent); background-color: var(--accent); }

:where(.toolbar) .btn { min-height: 36px; }  /* <button> and <summary> render at the same height */
/* Dropdown chevrons: the same stroked SVG as the selects' arrow. */
.chevron { flex-shrink: 0; color: var(--text-muted); }

/* Toolbar buttons with an icon; on phones only the icon shows (the name is the aria-label). */
.btn-icon-text { display: inline-flex; align-items: center; gap: 6px; }
.btn-icon-text svg { flex-shrink: 0; color: var(--text-muted); }
/* Paste only where there is no Ctrl+V: touch screens. */
.paste-btn { display: none; }
@media (pointer: coarse) { .paste-btn { display: inline-flex; } }
.phone-only { display: none; }
/* "Insert today's rates": only while a line needs a currency rate. */
.rates-btn { border-color: var(--accent); color: var(--accent); }
.rates-btn svg, .toolbar .rates-btn svg { color: currentColor; }
.rates-btn[hidden] { display: none; }
.rates-btn[aria-busy="true"] { cursor: progress; opacity: 0.7; }

.btn-link {
  border: none;
  background: none;
  color: var(--accent);
  padding: 6px 0 0;
  font-weight: 500;
}

/* Sheet ------------------------------------------------------------------- */

.sheet {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  min-height: 22rem;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: var(--line);
}

.gutter, .editor, .results {
  padding-top: 14px;
  padding-bottom: 14px;
}

.gutter {
  color: var(--text-muted);
  text-align: right;
  padding-right: 0.6rem;
  user-select: none;
  font-size: 0.75rem;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}

.gutter div { height: var(--row, var(--line)); line-height: var(--row, var(--line)); }
.gutter div.current { color: var(--text); font-weight: 700; }

.editor {
  font: inherit;
  line-height: inherit;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding-left: 14px;
  padding-right: 14px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 100%;
  tab-size: 4;
}

.editor::placeholder { color: var(--text-muted); opacity: 1; }

.results {
  padding-right: 14px;
  padding-left: 14px;
  border-left: 1px dashed var(--border);
  min-width: 7rem;
  text-align: right;
  display: flex;
  flex-direction: column;
}

/* Result rows: value and error rows are buttons, the rest are plain rows. Every row is
   exactly one editor line tall (--row is read from the editor's computed line-height). */
.result {
  display: block;
  position: relative;
  height: var(--row, var(--line));
  font: inherit;
  line-height: var(--row, var(--line));
  color: var(--result);
  font-weight: 500;
  text-align: right;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 0 6px;
  margin: 0 -6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s;
}
/* A value row cuts its digits, never its unit, currency sign or weekday: the unit span
   keeps its width and only the number is ellipsized (full value in the tooltip and the
   status bar). */
button.result.value { display: flex; justify-content: flex-end; }
.result.value .main { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.result.value .unit, .result.value .mark { flex-shrink: 0; white-space: pre; }
/* A date keeps all its digits and a workday count or an age its number; their trailing
   word ("(Mon)", "рабочих дней") is what gets the ellipsis. */
.result.d-date .main, .result.d-workdays .main, .result.d-age .main { flex-shrink: 0; }
.result.d-date .unit, .result.d-workdays .unit, .result.d-age .unit { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.result { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Hover is lighter than the caret line, so only one row ever looks current. */
button.result:hover { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
.result.current, .result.current:hover { background: var(--accent-soft); }
.result.in-selection { background: var(--surface-2); box-shadow: inset -3px 0 0 var(--accent); }
.result.current.in-selection { background: var(--accent-soft); }
.result.muted { color: var(--text-muted); cursor: default; }
/* Headings, comments and blank lines have nothing to fill: the bold gutter number marks them. */
.result.muted.current { background: transparent; }

.result.error { color: var(--error); font-weight: 400; }
/* Long reasons and amounts in words are cut with an ellipsis; the full text is in the
   tooltip and the status bar. */
.result .err-text, .result.words .main {
  display: inline-block;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.result.words .main { max-width: 28ch; }
.result.error:hover { background: var(--error-soft); }
.result .err-icon { display: inline-block; vertical-align: -1px; margin-right: 4px; }
.result.pending { color: var(--text-muted); }
.result.pending:hover { background: var(--surface-2); }
.pending-dots { letter-spacing: 0.1em; }

/* "Copied" drawn over the cell for a moment; it may grow to the left over the editor. */
.result.copied { overflow: visible; }
.result.copied::after, .stat-value.copied::after, .line-status-copy.copied::after {
  content: attr(data-flash);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6px;
  border-radius: inherit;
  background: var(--accent-soft);
  color: var(--result);
  font-weight: 600;
  white-space: nowrap;
}
.stat-value { position: relative; }
.stat-value.copied::after { justify-content: flex-start; padding: 0; right: auto; left: 0; }
.line-status-copy { position: relative; }
.line-status-copy.copied::after { justify-content: center; }

.hint {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin: -6px 0 -4px;
  padding: 0 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.hint svg { flex-shrink: 0; color: var(--accent); }

/* First screen: tagline and starter chips --------------------------------------- */

.tagline {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}

.starter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 -2px;
}
.starter[hidden] { display: none; }
.starter-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.chip {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.chip-more { font-family: var(--font); font-weight: 500; color: var(--accent); }

/* A result row that an example or a chip just added. */
.result.just-added { animation: just-added 1.2s ease-out; }
@keyframes just-added {
  from { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
  to { background: transparent; box-shadow: none; }
}
.hint[hidden] { display: none; }

/* Current-line status bar: replaces the hint once the sheet has content. On a sheet
   taller than the window it sticks to the bottom edge (above the key row), so the full
   error and the Copy button stay in view while typing. UI, not the ad: the ad is never
   sticky. */
.line-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 -4px;
  padding: 0 0 0 4px;
  min-height: 36px;
  font-size: 0.85rem;
  color: var(--text);
  position: sticky;
  bottom: calc(var(--vv-bottom, 0px) + var(--keyrow-space, 0px));
  z-index: 2;
  background: var(--bg);
}
/* The caret row is revealed above the stuck bar, not under it. */
html { scroll-padding-bottom: 48px; }
.line-status[hidden] { display: none; }
/* Prose (errors, hints) in the text font; values and rates in the mono font. Numbers
   carry no-break spaces (app.js keepTogether), so they wrap only when wider than the bar. */
.line-status-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  overflow-wrap: anywhere;
}
.line-status[data-kind="value"] .line-status-text,
.line-status[data-kind="rate"] .line-status-text { font-family: var(--mono); }
.line-status[data-kind="error"] .line-status-text { color: var(--error); }
.line-status[data-kind="pending"] .line-status-text,
.line-status[data-kind="note"] .line-status-text,
.line-status[data-kind="rate"] .line-status-text { color: var(--text-muted); }
/* The copy tip and the heading/note labels are prose, not numbers. */
.line-status[data-kind="hint"] .line-status-text,
.line-status[data-kind="note"] .line-status-text { font-family: var(--font); font-size: 0.8rem; }
.line-status[data-kind="hint"] .line-status-text { color: var(--text-muted); }
.line-status-copy { flex: 0 0 auto; padding: 5px 12px; font-size: 0.8rem; }
.line-status-copy[hidden] { display: none; }

/* Summary ----------------------------------------------------------------- */

.summary {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
/* An empty sheet has nothing to sum: no card of dashes under it. */
.summary.is-empty { display: none; }
/* No sum (different currencies, or all lines of a model sheet): the caption gives the
   reason and only the figures that exist stay; with just a count, it shares one row. */
.summary.is-nosum .stat.is-null { display: none; }
.summary.is-countonly { flex-wrap: nowrap; align-items: center; }
.summary.is-countonly .summary-caption { flex: 1 1 0; min-width: 0; padding: 12px 16px; }
.summary.is-countonly .stat { flex: 0 0 auto; border-left: 1px solid var(--border); border-right: none; }

.summary-caption {
  flex: 1 1 100%;
  padding: 8px 16px 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.summary.is-selection { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 1px var(--accent); }
.summary.is-selection .summary-caption { color: var(--accent); }

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 16px;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}
.stat:last-child { border-right: none; }
.stat:hover { background: var(--surface-2); }

.stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}

.stat-value {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--result);
  white-space: nowrap;
}

/* Sidebar ----------------------------------------------------------------- */

.sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.tips { padding: 18px 20px; }
.tips h2 { margin: 0 0 12px; font-size: 0.95rem; font-weight: 600; }

.tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tips-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Runnable examples look like code and add themselves to the sheet when clicked. */
.try {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 6px;
  margin: 1px 0;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
  max-width: 100%;
  /* Breaks between words only; numbers carry no-break spaces (app.js keepTogether). */
  overflow-wrap: break-word;
}
.try:hover { border-color: var(--accent); background: var(--accent-soft); }
.try::after { content: " \21B5"; content: " \21B5" / ""; color: var(--text-muted); font-size: 0.85em; opacity: 0; transition: opacity 0.12s; }
.try:hover::after, .try:focus-visible::after { opacity: 1; }
.tips-plain { font-size: 0.8rem; color: var(--text-muted); }
.help-lead { margin: 10px 0 0; color: var(--text-muted); }
/* Subsections (h4) sit under the uppercase section labels (h3) and stay quieter than them. */
.dialog-body h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin: 14px 0 6px; }

.tips-list code, .dialog code {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 6px;
  align-self: flex-start;
}
.tips-list code.nowrap, .dialog code.nowrap { white-space: nowrap; }

/* Advertisement: one slot, labeled, never sticky, never covers content ----- */

.ad-card {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ad-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}

.ad-card[hidden] { display: none; }

/* Narrow phones (under 360px) cannot fit a 300px unit inside the padded card: the card
   runs edge to edge instead, so a 300x250 unit fits down to a 320px screen. */
@media (max-width: 360px) {
  .ad-card { margin: 0 -16px; padding: 12px 0; border-radius: 0; border-left: 0; border-right: 0; }
  .ad-label { padding: 0 16px; }
  .ad-slot { border-radius: 0; }
}

.ad-slot {
  height: 250px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
}

.ad-frame { display: block; width: 300px; height: 250px; border: 0; }

.ad-placeholder {
  width: 100%;
  height: 250px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 16px;
  line-height: 1.5;
}

/* House card: shown in the same box when an ad is blocked or unfilled. */
.ad-house {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
  border-radius: 10px;
  background: var(--accent-soft);
}
.ad-house-title { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.ad-house-text { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-muted); }

/* Footer ------------------------------------------------------------------ */

.footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 24px 24px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Dialog ------------------------------------------------------------------ */

.dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(640px, 92vw);
  width: 100%;
}
/* Browsers without <dialog> support (app.js adds .dialog-fallback) show it inline otherwise. */
dialog:not([open]) { display: none; }
.dialog-fallback[open] {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1000;
  box-shadow: 0 0 0 100vmax rgba(10, 14, 20, 0.5);
}
.dialog::backdrop { background: rgba(10, 14, 20, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

.dialog-inner {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 85vh;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.dialog-head h2 { margin: 0; font-size: 1.05rem; }

.dialog-body {
  padding: 8px 20px 20px;
  overflow: auto;
  font-size: 0.9rem;
  line-height: 1.55;
}
.dialog-body h3 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); margin: 20px 0 8px; }
.dialog-body table { border-collapse: collapse; width: 100%; }
.dialog-body td { padding: 5px 8px 5px 0; vertical-align: top; border-bottom: 1px solid var(--border); }
.dialog-body td:first-child { white-space: nowrap; }
kbd {
  font-family: var(--mono);
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  background: var(--surface-2);
}

/* Toast ------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + var(--vv-bottom, 0px) + var(--keyrow-space, 0px));
  transform: translate(-50%, 20px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
  /* Rows of stats are split by a line; the last row's line is pulled under the clip. */
  .stat { border-bottom: 1px solid var(--border); margin-bottom: -1px; }
}

@media (max-width: 600px) {
  .topbar, .layout, .footer { padding-left: 16px; padding-right: 16px; }
  .brand-name { font-size: 0.95rem; white-space: nowrap; }
  .topbar { gap: 8px; }
  .topbar-actions { gap: 6px; }
  .select-wrap select { max-width: 7.5rem; font-size: 0.78rem; padding: 8px 24px 8px 10px; background-position: right 8px center; }
  .icon-btn { width: 34px; height: 34px; flex-shrink: 0; }
  /* The input keeps at least 56% of a phone screen; a longer result cuts its digits. */
  .sheet { grid-template-columns: minmax(0, 1fr) fit-content(44%); font-size: 0.88rem; }
  .gutter { display: none; }
  .results { min-width: 5rem; padding-left: 10px; padding-right: 10px; }
  .result .err-text { max-width: 13ch; }
  .result.words .main { max-width: 18ch; }
  .stat { padding: 10px 14px; }
  /* Phones: Sum on a row of its own, then Count | Average and Min | Max. */
  .summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .summary.is-empty { display: none; }
  .summary-caption, .stat[data-key="sum"] { grid-column: 1 / -1; }
  .stat { border-right: none; }
  .stat[data-key="count"], .stat[data-key="min"] { border-right: 1px solid var(--border); }
  .stat[data-key="sum"] .stat-value { font-size: 1.15rem; }
  .stat-value { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* No sum: Count, Min and Max (a model sheet) share one row; a count alone sits next
     to the caption. */
  .summary.is-nosum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary.is-countonly { display: flex; }
  .summary.is-countonly .summary-caption { padding: 10px 14px; }
  .summary.is-countonly .stat { border-bottom: none; margin-bottom: 0; }
}

/* Language selector --------------------------------------------------------- */
.select-lang select { font-family: var(--font); }
@media (max-width: 600px) {
  .select-lang select { max-width: 6rem; }
}

/* Phones: one header row (brand, Settings, Help, theme) and one toolbar row ------- */
@media (max-width: 600px) {
  .topbar { flex-wrap: nowrap; }
  .brand { min-width: 0; flex-shrink: 1; gap: 8px; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; font-size: 0.92rem; }
  .topbar-actions { flex-shrink: 0; gap: 4px; }
  .tagline { font-size: 0.95rem; }
  .toolbar { flex-wrap: nowrap; gap: 6px; }
  .wide-only { display: none; }
  .phone-only { display: block; }
  .btn-icon-text { padding-left: 10px; padding-right: 10px; }
  .btn-icon-text .btn-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .btn-icon-text svg { color: var(--text); }
  .toolbar .menu summary.btn { white-space: nowrap; }
  /* The rates button gets a row of its own below the one-row toolbar. */
  .toolbar.has-rates { flex-wrap: wrap; }
  .toolbar .rates-btn { order: 10; flex: 1 0 100%; justify-content: center; }
  /* Starter chips: one row that scrolls sideways instead of three rows of chips. */
  .starter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .starter::-webkit-scrollbar { display: none; }
  .starter > * { flex: 0 0 auto; }
}

/* The narrowest phones (320-360px): the one-row toolbar drops the menu arrows and some
   padding so that Paste, Templates, Clear and Share still fit without sideways scroll. */
@media (max-width: 360px) {
  .toolbar { gap: 4px; }
  .toolbar .menu summary.btn { padding-left: 10px; padding-right: 10px; }
  .toolbar .menu summary.btn > [aria-hidden="true"] { display: none; }
  .btn-icon-text { padding-left: 9px; padding-right: 9px; }
  .brand-mark { width: 30px; height: 30px; font-size: 1.15rem; }
}

/* Engine-load guard ----------------------------------------------------------- */

.engine-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 16px;
  background: var(--error-soft);
  color: var(--error);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}
.engine-banner[hidden] { display: none; }
body.engine-failed .toolbar,
body.engine-failed .sheetbar,
body.engine-failed .summary { opacity: 0.5; pointer-events: none; }

/* Sheet bar: tabs on wide screens, a select on phones -------------------------- */

.sheetbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: -6px;
}

.sheet-tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 2px;
  margin-left: -2px;  /* the first tab lines up with the toolbar below */
  flex: 0 1 auto;
}

.sheet-tab {
  flex: 0 0 auto;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 6px 12px;
  line-height: 18px;  /* 32px tall with the border, level with the + and ⋯ buttons */
  cursor: pointer;
}
.sheet-tab:hover { color: var(--text); background: var(--surface-2); }
.sheet-tab[aria-selected="true"] {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.sheet-add, .sheet-more {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.sheet-add:hover, .sheet-more:hover { border-color: var(--accent); background: var(--surface-2); }

/* Every button gives tap and click feedback, not only the phone keys. */
.btn:where(:not(.btn-primary, .btn-link, :disabled)):active, .icon-btn:active, .sheet-add:active, .sheet-more:active,
.sheet-tab:active, .chip:active, .try:active, .menu-item:active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.menu.is-disabled > summary.btn:active { background: var(--surface); border-color: var(--border); box-shadow: none; }
.btn-primary:not(:disabled):active { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(1px); }

.sheet-select-wrap { display: none; }

.sheet-tab:focus-visible, .sheet-add:focus-visible, .menu summary:focus-visible,
.menu-item:focus-visible, .toast-action:focus-visible, .install button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Disclosure menus (Export, sheet actions) ------------------------------------ */

.menu { position: relative; }
.menu summary { list-style: none; user-select: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary.btn { display: inline-flex; align-items: center; gap: 4px; }
.menu[open] > summary { border-color: var(--accent); }

.menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 13.5rem;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow), 0 10px 30px rgba(16, 24, 40, 0.12);
}
/* Menus at the left of a row open to the right; app.js flips one that would leave the screen. */
.tpl-menu .menu-list, .sheet-menu .menu-list { right: auto; left: 0; }
.menu-list.menu-align-left { right: auto; left: 0; }
.menu-list.menu-align-right { left: auto; right: 0; }

.menu-item {
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-danger { color: var(--error); }
.menu-sep { border: none; border-top: 1px solid var(--border); margin: 5px 4px; }

/* Toast with an Undo action --------------------------------------------------- */

.toast { display: flex; align-items: center; gap: 14px; z-index: 50; }
.toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Storage-full warnings are read in full: they wrap instead of being cut. */
.toast.is-warning { white-space: normal; max-width: min(90vw, 560px); line-height: 1.35; }
.toast.is-warning .toast-text { overflow: visible; }
.toast-warn { display: block; margin-top: 3px; font-weight: 600; }
.toast.has-action { pointer-events: auto; padding-right: 8px; }
.toast-action {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 600;
  color: var(--accent-soft);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 4px 12px;
  min-height: 32px;
  cursor: pointer;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .toast-action { color: var(--accent-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast-action { color: var(--accent-text); }
}
.toast-action:focus-visible { outline-color: currentColor; }

/* Result decorations ---------------------------------------------------------- */

.result .unit { color: var(--text-muted); font-weight: 400; }
.result.rate { color: var(--text-muted); font-weight: 400; }
.result.mismatch .main { text-decoration: underline wavy var(--error); text-underline-offset: 4px; }
.result .mark { color: var(--error); font-weight: 700; margin-right: 4px; }


/* Rename dialog ------------------------------------------------------------------ */

.dialog-small { max-width: min(420px, 92vw); }
.rename-body { padding-top: 16px; }
.text-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
}
.text-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.rename-hint { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Footer install link ------------------------------------------------------------ */

.footer-links { display: inline-flex; align-items: center; gap: 14px; }
.install { display: inline-flex; align-items: center; gap: 2px; }
.install[hidden] { display: none; }
.install .btn-link { padding: 0; font-size: inherit; cursor: pointer; }
.install-dismiss {
  border: none;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}

/* Print: only a clean table with the sheet name --------------------------------- */

.print-sheet-wrap { display: none; }

@media print {
  body {
    --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f4f6; --border: #d0d5dd;
    --text: #111111; --text-muted: #555555; --result: #111111; --error: #b42318;
    color-scheme: light;
    background: #ffffff;
    color: #111111;
    min-height: 0;
  }
  .topbar, .toolbar, .sheetbar, .hint, .sidebar, .footer, .toast, .ad-card,
  .engine-banner, .layout, .keyrow, dialog { display: none !important; }
  .print-sheet-wrap { display: block; font-family: var(--font); }
  .print-sheet-wrap h1 { font-size: 18pt; margin: 0 0 2pt; }
  .print-date { margin: 0 0 12pt; color: #555555; font-size: 9pt; }
  .print-sheet { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 10pt; }
  .print-sheet td { padding: 3pt 6pt; border-bottom: 0.5pt solid #d0d5dd; vertical-align: top; }
  .print-result { text-align: right; white-space: nowrap; }
  .print-heading td { font-family: var(--font); font-weight: 700; padding-top: 10pt; border-bottom: 1pt solid #111111; }
  .print-comment td { font-style: italic; color: #555555; }
  .print-error td { color: #b42318; }
  .print-sheet tfoot td { font-weight: 700; border-top: 1.5pt solid #111111; border-bottom: none; }
  .print-sheet tr { break-inside: avoid; }
}

/* Phones: the sheet switcher becomes a select ----------------------------------- */

@media (max-width: 600px) {
  .sheet-tabs, .sheet-add { display: none; }
  .sheet-select-wrap { display: block; flex: 1 1 auto; min-width: 0; }
  .sheet-select-wrap select { width: 100%; max-width: none; font-family: var(--font); }
  .sheet-more { width: 36px; height: 36px; }
  .sheet-menu .menu-list { left: auto; right: 0; }  /* the phone ⋯ button is at the right edge */
  .toast { bottom: calc(16px + var(--vv-bottom, 0px) + var(--keyrow-space, 0px)); max-width: calc(100vw - 32px); }
  /* A long message wraps instead of being cut ("Added with the line it needs: …"): the
     toast spans the gutters and its auto margins centre it. */
  .toast { left: 16px; right: 16px; width: max-content; margin-inline: auto; white-space: normal; line-height: 1.35; transform: translateY(20px); }
  .toast.show { transform: none; }
  .toast-text { overflow: visible; }
  .toast-action { min-height: 40px; }
}

/* Focus, contrast and motion ------------------------------------------------------ */

:where(button, select, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.result:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stat:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.btn-primary:focus-visible { outline-color: var(--text); }
.sheet:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 3px var(--accent-soft); }

/* Lines cut at the editor's right edge fade out there while the sheet is not being
   edited (app.js autosize sets .editor-cut); while typing, the caret line scrolls. */
.sheet.editor-cut:not(:focus-within) .results { position: relative; }
.sheet.editor-cut:not(:focus-within) .results::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -25px;
  width: 24px;
  background: linear-gradient(to right, transparent, var(--surface));
  pointer-events: none;
  z-index: 2;
}

/* Forced colors drop backgrounds and shadows: the open sheet gets a Highlight border
   and a heavier label, and the sheet a Highlight ring while the editor has focus. */
@media (forced-colors: active) {
  :where(button, select, a, summary, [tabindex]):focus-visible,
  .result:focus-visible, .stat:focus-visible, .toast-action:focus-visible { outline: 2px solid Highlight; }
  .result.current { outline: 1px solid Highlight; outline-offset: -1px; }
  .sheet-tab:not([aria-selected="true"]) { border: 0; padding: 7px 13px; }  /* forced colors repaint any border */
  .sheet-tab[aria-selected="true"] { border: 2px solid Highlight; padding: 5px 11px; font-weight: 700; text-decoration: underline; }
  .sheet:focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
  .sheet.editor-cut .results::before { display: none; }
}

@media (prefers-contrast: more) {
  :root, :root[data-theme], :root:not([data-theme="light"]) {
    --border: #7c8895;
    --text-muted: var(--text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .result, .toast, .stat { transition: none; }
  .dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Narrow phones: Help tables stack, each example on the full width of the dialog with
   its explanation below, so examples never wrap inside a number. */
@media (max-width: 480px) {
  .dialog-body td:first-child { white-space: normal; }
  .help-body table, .help-body tbody, .help-body tr, .help-body td { display: block; width: auto; }
  .help-body td { border-bottom: 0; padding-right: 0; }
  .help-body td:first-child { padding-bottom: 2px; }
  .help-body tr { border-bottom: 1px solid var(--border); padding: 4px 0; }
}

/* Math key row: touch screens only, docked above the on-screen keyboard --------- */

.keyrow {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--vv-bottom, 0px);
  z-index: 40;
  display: flex;
  gap: 4px;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08);
}
.keyrow.is-docked { padding-bottom: 4px; }  /* the keyboard already covers the safe area */
.keyrow[hidden] { display: none; }
.key {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.key:active { background: var(--accent-soft); border-color: var(--accent); }
.key-enter { flex-grow: 1.4; color: var(--accent); }
html.keyrow-open { scroll-padding-bottom: calc(var(--keyrow-space, 0px) + 56px); }
html.keyrow-open body { padding-bottom: var(--keyrow-space, 0px); }

/* Touch screens: 16px text (no iOS zoom on focus), 44px targets ----------------- */

@media (pointer: coarse) {
  :root { --line: 2.25rem; }
  .sheet, .select-wrap select { font-size: 1rem; }
  .btn, .icon-btn, .select-wrap select, .sheet-more, .sheet-add, .chip, .menu-item { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .sheet-more, .sheet-add { width: 44px; height: 44px; }
  .sheet-tab { min-height: 44px; }  /* level with the + and ⋯ buttons */
  .btn-link { padding: 12px 0; }
  .stat { min-height: 56px; }
  .menu-item { display: flex; align-items: center; }
  .try { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 8px; vertical-align: middle; }
  .btn-icon-text { min-width: 44px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .install .btn-link { min-height: 44px; }
  .install-dismiss { min-width: 44px; min-height: 44px; }
  .tips-list { gap: 10px; }
  .menu summary.btn, .btn-icon-text { justify-content: center; }
  html:not(.keyrow-open) { scroll-padding-bottom: 56px; }  /* the bar is 44px here */
}
/* With 44px Paste and Clear the one-row phone toolbar (Paste, Templates, Clear, Share)
   needs tighter gaps to stay inside the 16px gutters; Russian labels are the widest. */
@media (pointer: coarse) and (max-width: 600px) {
  .toolbar { gap: 4px; }
}
@media (pointer: coarse) and (max-width: 360px) {
  .toolbar { gap: 2px; }
  .toolbar .menu summary.btn { padding-left: 8px; padding-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .result.just-added { animation: none; }
  .try::after { transition: none; }
}

/* Help: example buttons may wrap between words inside the first column. */
@media (min-width: 481px) {
  .help-body td:first-child { white-space: normal; width: 42%; }
}

/* Task pages: explanatory text under the calculator (generated by landing/build_pages.py) */
.landing {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 32px;
  color: var(--text);
  line-height: 1.6;
}
.landing-inner { max-width: 72ch; }
.landing h2 { font-size: 1.15rem; margin: 28px 0 8px; letter-spacing: -0.01em; }
.landing p { margin: 0 0 12px; }
.landing-lead { font-size: 1.02rem; color: var(--text-muted); }
.landing ul { padding-left: 1.3em; margin: 0 0 12px; }
.landing li { margin: 4px 0; }
.landing a { color: var(--accent); }
.landing code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.landing-examples {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 16px;
  font-size: 0.95rem;
}
.landing-examples th, .landing-examples td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--border);
}
.landing-examples th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.landing-examples td:last-child { font-family: var(--mono); color: var(--result); }
.landing-examples .try {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  text-align: left;
}
.landing-examples .try:hover { border-color: var(--accent); background: var(--accent-soft); }
.landing-note { color: var(--text-muted); font-size: 0.9rem; }
.landing .faq details { border-bottom: 1px solid var(--border); padding: 10px 0; }
.landing .faq summary { cursor: pointer; font-weight: 600; }
.landing .faq details > :not(summary) { margin: 8px 0 4px; }
.landing-related { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
@media (max-width: 600px) {
  .landing { padding-left: 16px; padding-right: 16px; }
  .landing-examples th:first-child, .landing-examples td:first-child { max-width: 55%; }
  .landing-examples .try { white-space: normal; }
}