/* ============================================================================
   firatada.com — site layer on top of spark-theme.css
   ----------------------------------------------------------------------------
   Spark ships the shell (sidebar, topbar, buttons, stat cards). This file adds
   the tutorial and skill cards, their long-form content, the command boxes,
   and the density step for <=1600px CSS viewports (design.md → "Design for
   the CSS viewport, not the monitor"). Colours come from Spark tokens only.
   ============================================================================ */

:root {
  /* names the existing components and the style dictionary were written against */
  --border: var(--line);
  --text-dim: var(--muted);
  --bg-soft: var(--surface2);
  --mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
  --topbar-h: 62px;
}

html { font-size: 16px; }
@media (max-width: 1600px) { html { font-size: 13.5px; } }

/* ---------------------------------------------------------------------------
   1. SHELL
   --------------------------------------------------------------------------- */
.sidebar { position: sticky; top: 0; }
.sidebar .nav { overflow-y: auto; }
.nav button .num {
  font-family: var(--mono); font-size: 10px; font-weight: 800;
  color: var(--muted); min-width: 16px;
}
.nav button.active .num { color: rgba(255,255,255,.75); }
.brand .logo { font-size: 15px; font-weight: 800; letter-spacing: -.5px; }
.side-foot a { color: var(--afiniti-blue); text-decoration: none; font-weight: 700; }
.side-foot a:hover { text-decoration: underline; }

.main { min-height: 100vh; }
.topbar { min-height: var(--topbar-h); }
.topbar .crumb { font-size: 12px; color: var(--muted); font-weight: 600; }
.topbar .crumb b { color: var(--afiniti-navy); font-weight: 800; }
.content { width: 100%; }

#mobile-nav {
  display: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 10px; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--afiniti-navy); max-width: 16rem;
}
@media (max-width: 820px) {
  #mobile-nav { display: block; }
  .topbar .crumb { display: none; }
  .content { padding: 18px 14px; }
  .topbar { padding: 12px 14px; }
}

/* ---------------------------------------------------------------------------
   2. VIEW HEAD
   --------------------------------------------------------------------------- */
.view-head { margin-bottom: 18px; max-width: 70rem; }
.view-head h2 { font-size: 26px; font-weight: 800; letter-spacing: -.4px; color: var(--afiniti-navy); margin-bottom: 4px; }
.view-head p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.view-sub { font-size: 15px; font-weight: 800; color: var(--afiniti-navy); margin: 28px 0 12px; }

/* ---------------------------------------------------------------------------
   3. OVERVIEW
   --------------------------------------------------------------------------- */
.hero-card {
  display: flex; align-items: center; gap: 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 28px; margin-bottom: 18px;
  position: relative; overflow: hidden;
}
.hero-card::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(27,77,245,.12), rgba(51,198,244,.08));
}
.hero-card .avatar { width: 72px; height: 72px; font-size: 24px; box-shadow: 0 8px 20px rgba(27,77,245,.3); }
.hero-card h2 { font-size: 30px; font-weight: 800; letter-spacing: -.6px; color: var(--afiniti-navy); }
.hero-card .role { font-size: 14px; font-weight: 700; color: var(--afiniti-blue); margin-top: 2px; }
.hero-card p { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 46rem; line-height: 1.55; }
.hero-card .actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 700px) { .hero-card { flex-direction: column; align-items: flex-start; } }

.entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 16px; }

/* ---------------------------------------------------------------------------
   4. CARD GRID — closed cards fill the width; an open card takes the whole row
   --------------------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
.card-grid.wide { grid-template-columns: 1fr; }

.card-grid > .card, .card-grid > .skill-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; cursor: pointer; min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  scroll-margin-top: calc(var(--topbar-h) + 14px);
}
.card-grid > .card:not(.open):hover, .card-grid > .skill-card:not(.open):hover {
  border-color: var(--afiniti-blue); box-shadow: 0 14px 34px rgba(10,26,64,.12);
}
.card-grid > .lifted { transform: translateY(-3px); }
.card-grid > .card.open, .card-grid > .skill-card.open {
  grid-column: 1 / -1; cursor: default; border-color: var(--afiniti-blue); padding: 20px 24px 24px;
}

/* head */
.card-head, .skill-head { position: relative; padding-right: 34px; }
.card-head h3, .skill-head h3 { font-size: 16px; font-weight: 800; color: var(--afiniti-navy); line-height: 1.3; }
.card-head::after, .skill-head::after {
  content: "+"; position: absolute; right: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface2); color: var(--muted); font-size: 17px; font-weight: 700;
}
.card.open .card-head::after, .skill-card.open .skill-head::after {
  content: "−"; background: var(--afiniti-blue); color: #fff; box-shadow: 0 4px 12px rgba(27,77,245,.35);
}
.skill-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.gh-link {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--afiniti-blue);
  text-decoration: none; background: rgba(27,77,245,.07); border: 1px solid rgba(27,77,245,.18);
  border-radius: 20px; padding: 1px 9px;
}
.gh-link:hover { border-color: var(--afiniti-blue); }
.card-grid .meta { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.excerpt {
  font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.open > .excerpt, .open .excerpt { display: none; }

/* bodies */
.card-body, .skill-body { display: none; cursor: auto; }
.card.open .card-body { display: block; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; }
.skill-card.open .skill-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 4px 32px; align-items: start;
  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 6px;
}
.skill-body > .desc, .skill-body > .skill-row:has(.st-dict) { grid-column: 1 / -1; }
.skill-row { margin-top: 12px; min-width: 0; }
/* screenshots inside a card span both columns */
.skill-row.shots { grid-column: 1 / -1; }
.shot { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: 0 0 12px; }
.shot-phone { width: 220px; }
.skill-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--afiniti-blue); margin-bottom: 6px;
}
.desc { font-size: 14px; color: var(--text); line-height: 1.6; margin-top: 10px; max-width: 64rem; }
.desc a, .bio a { color: var(--afiniti-blue); text-decoration: none; font-weight: 700; }
.desc a:hover, .bio a:hover { text-decoration: underline; }
.skill-list { list-style: none; columns: 3 10rem; column-gap: 20px; margin: 6px 0; font-size: 13px; }
.skill-list li { padding: 3px 0 3px 14px; position: relative; break-inside: avoid; }
.skill-list li::before { content: "•"; position: absolute; left: 2px; color: var(--afiniti-blue); }

/* long-form tutorial: two columns when the card is open and the screen is wide */
.card-body article { padding: 8px 0 0; columns: 2 30rem; column-gap: 44px; }
.card-body article > * { break-inside: avoid; }
/* The unbreakable unit is a heading plus the content under it, not a single
   block and not a single row. Sections move between columns whole; a heading is
   never separated from its list, and a list is never cut in half. */
.card-body article > .sec { break-inside: avoid; }
.card-body article > .sec > :first-child { margin-top: 0; }
/* one rule per card: a single column, since a rule is one unbreakable text */
.card-body article.rule { columns: auto; max-width: 100ch; }
.card-body article.rule > .sec + .sec { margin-top: 14px; }
article h2 { font-size: 18px; font-weight: 800; color: var(--afiniti-navy); margin: 22px 0 8px; break-after: avoid; }
article h2:first-child { margin-top: 10px; }
article h3 { font-size: 15px; font-weight: 800; color: var(--afiniti-navy); margin: 18px 0 6px; break-after: avoid; }
article p { font-size: 14px; line-height: 1.65; margin: 0 0 12px; color: var(--text); }
article ul, article ol { margin: 0 0 12px 20px; font-size: 14px; line-height: 1.6; }
article li { margin-bottom: 5px; }
article li::marker { color: var(--afiniti-blue); }
article a { color: var(--afiniti-blue); text-decoration: none; font-weight: 700; }
article a:hover { text-decoration: underline; }
article strong { color: var(--afiniti-navy); }
article img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 12px; display: block; }
code { font-size: .88em; }

.callout {
  background: linear-gradient(135deg, rgba(27,77,245,.06), rgba(51,198,244,.05));
  border: 1px solid rgba(27,77,245,.2); border-left: 4px solid var(--afiniti-blue);
  border-radius: 12px; padding: 14px 16px; margin: 0 0 14px;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout-title { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--afiniti-blue); margin-bottom: 6px; }

/* ---------------------------------------------------------------------------
   5. COMMAND BOXES — one paste per box (design.md → "Copyable command blocks")
   --------------------------------------------------------------------------- */
pre {
  position: relative; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 14px; margin: 0 0 14px; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--afiniti-navy);
}
pre code, pre code.hljs { background: none !important; border: none; padding: 0 !important; font-size: inherit; color: inherit; display: inline; }
pre.has-copy { padding-right: 92px; } /* room for the Turkish "KOPYALA" button too */
pre.wrap, pre.wrap code { white-space: pre-wrap; word-break: break-word; }
.copy-btn {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  font-family: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 9px; cursor: pointer; transition: .15s;
}
pre:not(.wrap) .copy-btn { top: 8px; transform: none; }
.cmd-step pre .copy-btn { top: 50%; transform: translateY(-50%); }
.copy-btn:hover { color: var(--afiniti-blue); border-color: var(--afiniti-blue); }
.copy-btn.copied { color: var(--green); border-color: var(--green); }

.cmd-group { margin: 0 0 14px; }
.skill-row .cmd-group { margin: 0; }
.cmd-context { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 0 0 6px; }
.cmd-context::before { content: "# "; }
.cmd-step + .cmd-context { margin-top: 12px; }
.cmd-step { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.cmd-step:last-child { margin-bottom: 0; }
.cmd-step .n {
  flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--afiniti-blue); color: #fff; font-size: 11px; font-weight: 800;
  box-shadow: 0 3px 8px rgba(27,77,245,.3);
}
.cmd-step pre { flex: 1 1 16rem; min-width: 0; margin: 0; }
/* a long command wraps instead of scrolling under the copy button */
.cmd-step pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd-note { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------------------
   6. ABOUT
   --------------------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 16px; align-items: start; }
.about-grid .card { padding: 20px 22px; }
.about-grid h3.ch { font-size: 15px; font-weight: 800; color: var(--afiniti-navy); margin-bottom: 10px; }
.bio { font-size: 15px; line-height: 1.65; color: var(--text); }
.highlights { list-style: none; }
.highlights li { padding: 9px 0 9px 24px; position: relative; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); line-height: 1.5; }
.highlights li:last-child { border-bottom: none; }
.highlights li::before { content: "✦"; position: absolute; left: 2px; top: 9px; color: var(--gold); }
.highlights li strong { color: var(--afiniti-navy); }
.timeline-item { border-left: 2px solid var(--line); padding: 0 0 20px 20px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--afiniti-blue), var(--afiniti-cyan)); box-shadow: 0 0 0 3px var(--surface);
}
.timeline-item .period { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.timeline-item h3 { font-size: 15px; font-weight: 800; color: var(--afiniti-navy); margin: 2px 0; }
.timeline-item .role { font-size: 13px; font-weight: 700; color: var(--afiniti-blue); }
.timeline-item p { font-size: 13.5px; color: var(--muted); margin-top: 5px; line-height: 1.55; }

/* ---------------------------------------------------------------------------
   7. STYLE DICTIONARY inside the UI/UX Pro Max card — Spark overrides
   --------------------------------------------------------------------------- */
.st-dict { --accent: var(--afiniti-blue); --accent-dim: var(--afiniti-blue); --bg: var(--surface); }
.st-dict .st-controls { top: var(--topbar-h); background: var(--surface); }
.st-dict .st-grid { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.st-dict .st-tile { border-radius: 12px; }
.st-dict .st-tile.open .st-face .sp { height: 280px; }
.view-callout { max-width: 64rem; margin-bottom: 16px; }
.view-foot { margin-top: 20px; font-size: 14px; color: var(--muted); }
.about-stack { display: grid; gap: 16px; align-content: start; }
.content > .view > .card-grid:first-child, .content > .view > .view-callout:first-child { margin-top: 0; }
#view-overview .stat-grid { margin-bottom: 16px; }

/* ---- v3: three-layer structure (start → pillars → reference) ---- */
.view-lede { font-size: 1.02rem; line-height: 1.62; color: var(--muted); max-width: 66ch; margin: 0 0 22px; }
/* an embedded live example (three.js); its source loads only when its view opens */
.demo-frame { display: block; width: 100%; aspect-ratio: 16 / 10; margin: 0 0 26px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); }
@media (max-width: 640px) { .demo-frame { aspect-ratio: 3 / 5; } }
.view-h2 { font-family: Manrope, Inter, sans-serif; font-size: 1.05rem; font-weight: 800;
           color: var(--afiniti-navy); margin: 30px 0 14px; }
.view-note { font-size: .88rem; line-height: 1.6; color: var(--muted); max-width: 70ch; margin: 20px 0 0; }
.view-callout { background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius);
                padding: 16px 18px; margin: 0 0 20px; }
.view-callout .cmd-group { margin: 0; }
.view-callout .view-note { margin-top: 14px; }

/* A closed skill card now carries one scannable line. */
.skill-card > .excerpt { margin-top: 8px; }

/* Single-column rows: the excerpt sits beside the title, not under it. */
.card-grid > .card:not(.open), .card-grid > .skill-card:not(.open) { padding: 14px 18px; }
.card-grid > .card:not(.open) .excerpt, .card-grid > .skill-card:not(.open) .excerpt {
  margin-top: 4px; -webkit-line-clamp: 2;
}

/* Highlights keeps its third column and simply runs long. */
.accomplishments > li { margin-bottom: 10px; }
.accomplishments > li:last-child { margin-bottom: 0; }

/* A quiet counter beside a card heading. */
.ch-meta { float: right; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
           text-transform: uppercase; color: var(--muted); background: var(--surface2);
           border-radius: 999px; padding: 3px 9px; margin-top: -1px; }

/* A heading that deliberately starts the second column of a two-column article. */
.card-body article h2.col-break { break-before: column; margin-top: 0; }

/* Inline caution under a command inside a callout. */
.callout .callout-warn { font-size: .86rem; line-height: 1.55; color: var(--muted); margin: 10px 0 0; }

/* ---- One text left edge per page -----------------------------------------
   The page title, plain paragraphs and the text inside every box start at the
   same x. Boxes carry an inner padding, so each boxed container is pulled left
   by exactly that padding plus its border; the box edge sits outside the text
   column and the TEXT lands on the shared line. All box paddings are normalised
   to 18px first so one offset serves every box. ------------------------------ */
:root { --box-pad: 18px; --box-pull: 19px; }   /* 18px padding + 1px border */

.about-grid .card { padding: var(--box-pad); }
.card-grid > .card:not(.open), .card-grid > .skill-card:not(.open) { padding: 14px var(--box-pad); }
.card-grid > .card.open, .card-grid > .skill-card.open { padding: 18px var(--box-pad) 22px; }
.view-callout, .callout { padding: 16px var(--box-pad); }

.content > .view > .card-grid,
.content > .view > .about-grid,
.content > .view > .view-callout,
.content > .view > .callout,
.content > .view > .cmd-group {
  margin-left: calc(var(--box-pull) * -1);
  margin-right: calc(var(--box-pull) * -1);
}

/* ---------------------------------------------------------------------------
   11. DARK MODE — token overrides only, every component follows automatically
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg: #0b1020;
  --surface: #121a2e;
  --surface2: #1a2340;
  --line: #27314f;
  --text: #e7ecf8;
  --muted: #94a2c4;
  --afiniti-navy: #e7ecf8;
  --afiniti-blue: #4c78ff;
  --afiniti-blue-2: #6f93ff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --border: var(--line);
  --text-dim: var(--muted);
  --bg-soft: var(--surface2);
  color-scheme: dark;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2c3757; }
:root[data-theme="dark"] .topbar { background: rgba(18,26,46,.85); }
:root[data-theme="dark"] .side-foot a { color: var(--afiniti-blue-2); }
:root[data-theme="dark"] .brand h1 { color: var(--text); }
:root[data-theme="dark"] .nav button.active { box-shadow: 0 4px 12px rgba(76,120,255,.28); }
:root[data-theme="dark"] .callout { background: rgba(76,120,255,.10); border-color: rgba(76,120,255,.28); }
:root[data-theme="dark"] img { filter: brightness(.9) contrast(1.05); }

/* ---------------------------------------------------------------------------
   12. SIDEBAR CONTROLS — language and theme, at the foot of the nav
   --------------------------------------------------------------------------- */
.side-controls { display: flex; gap: 8px; padding: 10px 8px 12px; }
.seg {
  display: flex; background: var(--surface2); border: 1px solid var(--line);
  border-radius: 9px; padding: 2px; gap: 2px;
}
.seg button {
  font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  color: var(--muted); background: none; border: none; border-radius: 7px;
  padding: 5px 9px; cursor: pointer; transition: .15s; line-height: 1;
}
.seg button:hover { color: var(--afiniti-navy); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--afiniti-blue); box-shadow: var(--shadow); }
.seg.theme button { font-size: 13px; padding: 4px 8px; }

/* ---------------------------------------------------------------------------
   13. SIDEBAR SEARCH — one box over everything on the page
   --------------------------------------------------------------------------- */
/* the sidebar is sticky, so it owns a stacking context: lift it or the results
   panel stays trapped behind the main pane */
.sidebar { z-index: 40; }
.side-search { position: relative; padding: 0 8px 2px; }
.side-search input {
  width: 100%; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text); background: var(--surface2);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  outline: none; transition: .15s;
}
.side-search input::placeholder { color: var(--muted); font-weight: 600; }
.side-search input:focus { border-color: var(--afiniti-blue); background: var(--surface); }
.search-results {
  position: absolute; left: 8px; top: calc(100% + 6px); width: 26rem; max-width: 74vw;
  max-height: 60vh; overflow-y: auto; z-index: 60;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
}
.search-hit {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 9px; padding: 8px 10px;
  font-family: inherit; color: var(--text);
}
.search-hit:hover { background: var(--surface2); }
.sh-title { display: block; font-size: 13px; font-weight: 800; color: var(--afiniti-navy); }
.sh-view { display: block; font-size: 10px; font-weight: 700; letter-spacing: .4px; color: var(--afiniti-blue); margin-top: 1px; }
.sh-snip { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.search-hit mark { background: rgba(245,166,35,.28); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-empty { font-size: 12px; color: var(--muted); padding: 8px 10px; }
.card.search-flash, .skill-card.search-flash { box-shadow: 0 0 0 2px var(--afiniti-blue), var(--shadow); }

/* ---------------------------------------------------------------------------
   14. MARKDOWN PAIRS — the English block is the file; the Turkish twin is a
   reading aid that only appears when the page is Turkish, and never copies.
   --------------------------------------------------------------------------- */
.md-lang { display: none; }
.md-tr { display: none; }
html[lang="tr"] .md-lang {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 800;
  letter-spacing: .6px; color: var(--muted); margin: 0 0 4px;
}
html[lang="tr"] .md-lang-tr { margin-top: -6px; }
html[lang="tr"] .md-tr { display: block; }
.md-tr { background: transparent; border-style: dashed; }

/* a nav entry that jumps to a card inside another page, not to a page of its own */
.nav button.sub {
  font-size: 12px; font-weight: 600; padding-left: 38px; padding-top: 5px; padding-bottom: 5px;
  color: var(--muted); gap: 0;
}
.nav button.sub::before { content: "·"; margin-right: 8px; opacity: .6; }
.nav button.sub:hover { color: var(--afiniti-blue); background: var(--surface2); }

/* a command reference is read, not pasted: one line each, no boxes */
.cmd-ref { grid-column: 1 / -1; }
.cmd-ref .ref-group + .ref-group { margin-top: 10px; }
.cmd-ref .ref-group > b {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.cmd-ref ul, .cmd-ref ol { list-style: none; margin: 0; padding: 0; }
.cmd-ref ol { counter-reset: step; }
.cmd-ref li {
  display: flex; gap: 8px; align-items: baseline;
  padding: 2px 0; font-size: 12.5px; line-height: 1.5;
}
.cmd-ref ol li::before {
  counter-increment: step; content: counter(step) ".";
  color: var(--muted); font-family: var(--mono); font-size: 11px; min-width: 14px;
}
.cmd-ref li code {
  font-family: var(--mono); font-size: 11.5px; white-space: nowrap;
  background: var(--surface2); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 6px; color: var(--afiniti-navy);
}
.cmd-ref li span { color: var(--muted); }

/* A quoted article of law: the words of the source, set apart from the explanation around it. */
blockquote.law { margin: 4px 0 14px; padding: 10px 14px; border-left: 3px solid var(--afiniti-blue);
  background: var(--surface2); border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.6;
  color: var(--text); break-inside: avoid; }
.law-src { font-size: 12px; color: var(--muted); margin: -8px 0 14px; }
.law-block { break-inside: avoid; }

/* a two-column reference table inside a card */
.ref-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: .95em; }
.ref-table th, .ref-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ref-table th { font-weight: 600; border-bottom-width: 2px; }
.ref-table td:first-child { width: 34%; }
@media (max-width: 640px) { .ref-table th, .ref-table td { padding: 8px 6px; } }