/* SDKDiff shared UI stylesheet — source of truth: tools/sdk-diff-tool/site/ */
:root {
  /* Warm neutral dark — gentle brown undertone, no blue cast */
  --bg:            #1c1a1b;
  --panel:         #232123;
  --panel-2:       #2b282b;
  --border:        #322f31;
  --border-strong: #423e40;

  /* Parchment off-white + warm muted secondary */
  --text:          #e4dac6;
  --text-2:        #b8ae9c;
  --muted:         #847b6f;
  --muted-2:       #5a524b;

  /* Copper accent */
  --accent:        #eca554;
  --accent-2:      #f6c078;

  /* Warm semantics — badges, chips, stats. Distinct from diff colors below. */
  --added:         #a8c860;
  --removed:       #e47e60;
  --changed:       #e8ab44;
  --unchanged:     #847b6f;
  --failed:        #d48cb4;

  /* Diff +/- markers stay unambiguously red/green so they're never confused
     with the warm semantic palette above. Used ONLY on actual diff lines. */
  --diff-add:      #5fcc5a;
  --diff-remove:   #e85555;

  --code-bg:       #161416;

  --font-sans:     'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html {
  /* Disable mobile font boosting: iOS Safari / Android Chrome otherwise
     inflate text in wide scrollable blocks (i.e. the diff tables), making
     code render larger than the declared size while prose stays put. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent-2); }
code, pre { font-family: var(--font-mono); }

#layout {
  display: grid;
  grid-template-columns: 304px 1fr;
  height: 100vh;
}

/* ============================================================
   SIDEBAR
============================================================ */
#sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 28px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#brand { display: flex; flex-direction: column; gap: 18px; }

.brand-mark {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.brand-logo {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
}
.brand-logo .accent { color: var(--accent); }

.brand-title { display: flex; flex-direction: column; gap: 4px; }
.brand-title .label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
}
#sidebar h1 {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 400;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
#sidebar h1 .arrow {
  color: var(--accent);
  margin: 0 4px;
  font-weight: 400;
}

/* Diff switcher — the version header becomes a <select> when a sibling
   manifest.json lists more than one diff. Fills the sidebar width; long
   labels ellipsize rather than hard-clipping mid-word. */
#diffswitch { width: 100%; }
#diffswitch select {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  background-color: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 28px 6px 10px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23eca554' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
#diffswitch select:hover { border-color: var(--accent); }
#diffswitch select:focus { outline: none; border-color: var(--accent); }
#diffswitch option { background: var(--panel); color: var(--text); }

.brand-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.brand-credit { font-size: 12px; color: var(--muted); margin: 0; }
.brand-credit a {
  color: var(--text-2);
  border-bottom: 1px dotted var(--muted-2);
  padding-bottom: 1px;
}
.brand-credit a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Search — boxed input with magnifier icon, clearly clickable */
#search {
  width: 100%;
  padding: 9px 12px 9px 34px;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8ae9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px 14px;
}
#search:hover { border-color: var(--muted); }
#search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(236, 165, 84, 0.12);
}
#search::placeholder { color: var(--muted); }

/* Filter chips */
#filters { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  padding: 4px 9px 4px 8px;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  user-select: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}
.chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}
.chip[data-status="new"]       { color: var(--added); }
.chip[data-status="changed"]   { color: var(--changed); }
.chip[data-status="removed"]   { color: var(--removed); }
.chip[data-status="unchanged"] { color: var(--unchanged); }
.chip[data-status="failed"]    { color: var(--failed); }
.chip.on {
  background: rgba(255,255,255,0.03);
  border-color: currentColor;
}
.chip.on::before { opacity: 1; }

/* Hide-private toggle */
.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.toggle input { accent-color: var(--accent); }
.toggle code {
  font-size: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--text-2);
}

/* Framework list */
#fwlist {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
}
#fwlist li { position: relative; }
#fwlist li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  margin: 0 -10px;
  border-radius: 4px;
  color: var(--text-2);
  font-size: 13px;
  gap: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
#fwlist li a:hover {
  color: var(--text);
  background: var(--panel-2);
  text-decoration: none;
}
#fwlist li.active a {
  color: var(--text);
  background: var(--panel-2);
}
#fwlist li.active a::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
}
#fwlist li a > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#fwlist li a > .badge { flex-shrink: 0; }

/* Status badges */
.badge {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
  letter-spacing: 0.1em;
  background: transparent;
  border: 1px solid currentColor;
  flex-shrink: 0;
  line-height: 1.2;
}
.badge.new       { color: var(--added); }
.badge.removed   { color: var(--removed); }
.badge.changed   { color: var(--changed); }
.badge.unchanged { color: var(--unchanged); }
.badge.failed    { color: var(--failed); }

/* ============================================================
   MAIN CONTENT
============================================================ */
#main {
  overflow-y: auto;
  padding: 56px 56px 120px 64px;
  scroll-padding-top: 24px;
}

/* Stats banner — editorial inline strip */
.summary-banner {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding: 0 0 32px;
  margin: 0 0 40px;
  border-bottom: 1px solid var(--border);
}
.summary-banner .stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.summary-banner .stat b {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: block;
}
.summary-banner .stat span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat.new b       { color: var(--added); }
.stat.changed b   { color: var(--changed); }
.stat.removed b   { color: var(--removed); }
.stat.unchanged b { color: var(--unchanged); }
.stat.failed b    { color: var(--failed); }

/* Per-framework section */
.fw {
  padding-top: 56px;
  margin-top: 56px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 24px;
}
.fw:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.fw-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.fw h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.1;
}
.fw .toplinks {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 22px;
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.fw .toplinks a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(236, 165, 84, 0.45);
  text-underline-offset: 3px;
}
.fw .toplinks a:hover {
  color: var(--accent-2);
  text-decoration-color: var(--accent-2);
}

/* Editorial summary block (Claude-generated) */
.summary {
  margin: 0 0 28px;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--accent);
  background: transparent;
  border-radius: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
}
.summary p { margin: 0 0 12px; }
.summary p:first-child { font-size: 16px; color: var(--text); }
.summary p:last-child { margin-bottom: 0; }
.summary ul { margin: 12px 0 0; padding-left: 20px; }
.summary li { margin-bottom: 6px; color: var(--text-2); }
.summary li:last-child { margin-bottom: 0; }
.summary li::marker { color: var(--muted); }
.summary code {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 12.5px;
  color: var(--accent);
  font-family: var(--font-mono);
  /* Long API names must break rather than widen the page on narrow screens */
  overflow-wrap: anywhere;
}

/* Collapsible diff sections */
details.section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 14px 0;
  overflow: hidden;
}
details.section > summary {
  padding: 12px 18px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel);
  transition: background 0.15s ease;
}
details.section > summary:hover { background: var(--panel-2); }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
details.section[data-kind="added"]   > summary { border-left: 2px solid var(--added); }
details.section[data-kind="removed"] > summary { border-left: 2px solid var(--removed); }
details.section[data-kind="changed"] > summary { border-left: 2px solid var(--changed); }

/* Legacy inline list (kept in case render_section is ever re-enabled) */
pre.lines {
  margin: 0;
  padding: 14px 18px;
  background: var(--code-bg);
  border-top: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
pre.lines .kind { color: var(--accent); }
pre.lines .line { display: inline; }
pre.lines.diff { white-space: pre; word-break: normal; }
pre.lines.diff .da { color: var(--diff-add); display: block; }
pre.lines.diff .dr { color: var(--diff-remove); display: block; }
pre.lines.diff .dh { color: var(--accent); display: block; opacity: 0.85; }
pre.lines.diff .df { color: var(--muted); display: block; font-weight: 600; margin-top: 8px; }

/* Hide-private toggle behavior */
body.hide-private .fw[data-private="true"] { display: none !important; }
body.hide-private #fwlist li[data-private="true"] { display: none !important; }
body.hide-private pre.lines .line.private { display: none; }

/* Side-by-side per-file diff */
.sbs-files {
  padding: 10px 14px 16px;
  background: var(--code-bg);
  border-top: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
}
details.sbs-file {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin: 8px 0;
  overflow: hidden;
}
details.sbs-file > summary {
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  list-style: none;
}
details.sbs-file > summary::-webkit-details-marker { display: none; }
details.sbs-file > summary::before {
  content: '+';
  display: inline-block;
  width: 14px;
  color: var(--muted);
  font-weight: 600;
}
details.sbs-file[open] > summary::before { content: '−'; }
.filetag {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  font-weight: 500;
  letter-spacing: 0.1em;
  background: transparent;
  border: 1px solid currentColor;
  /* Wrap as a unit (before the chip), never mid-chip */
  display: inline-block;
  white-space: nowrap;
}
.filetag.new     { color: var(--added); }
.filetag.removed { color: var(--removed); }

.sbs-pairs {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}
.sbs-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.sbs-pair:last-child { border-bottom: none; }
.sbs-side { overflow-x: auto; min-width: 0; background: var(--code-bg); }
.sbs-side:first-child { border-right: 1px solid var(--border); }

table.sbs-half { border-collapse: collapse; table-layout: auto; min-width: 100%; }
table.sbs-half td { padding: 1px 8px; vertical-align: top; white-space: pre; }
table.sbs-half td.ln {
  width: 48px; min-width: 48px; max-width: 48px;
  text-align: right;
  color: var(--muted-2);
  user-select: none;
  padding-right: 12px;
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.sbs-half td.code { width: auto; }
table.sbs-half td.code.del { background: rgba(232, 85, 85, 0.14); }
table.sbs-half td.code.ins { background: rgba(95, 204, 90, 0.14); }
table.sbs-half td.code.del::before {
  content: '−'; color: var(--diff-remove);
  display: inline-block; width: 12px; margin-left: -10px; opacity: 1; font-weight: 600;
}
table.sbs-half td.code.ins::before {
  content: '+'; color: var(--diff-add);
  display: inline-block; width: 12px; margin-left: -10px; opacity: 1; font-weight: 600;
}

.sbs-gap {
  background: var(--panel-2);
  color: var(--muted);
  text-align: center;
  font-style: italic;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}

/* Syntax highlighting — warm, saturated */
.tok-cmt   { color: #6c6358; font-style: italic; }
.tok-kw    { color: #d488a8; }
.tok-type  { color: #eca554; }
.tok-macro { color: #e8ab44; }
.tok-str   { color: #a8c860; }
.tok-num   { color: #e8ab44; }
.tok-pre   { color: #d4785c; font-style: italic; }

/* External Swift diff link */
a.external-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 13px;
  font-family: var(--font-mono);
}
a.external-link::before { content: '↗'; color: var(--accent); font-size: 16px; }
a.external-link:hover {
  background: var(--panel-2);
  border-color: var(--accent);
  color: var(--accent);
}

/* Standalone Swift diff page */
body.external { padding: 32px 48px; }
.external-wrap { max-width: 100%; }
.external-head { margin-bottom: 20px; }
.external-head a {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.external-head a:hover { color: var(--accent); }
.external-head h1 {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  margin: 12px 0 4px;
  color: var(--text);
}
.external-head h1 .meta {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  margin-left: 10px;
}

#empty-msg {
  display: none;
  color: var(--muted);
  padding: 60px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Lazy-load placeholder. The browser fetches fragments/<name>.html when the
   loader scrolls into view (see IntersectionObserver in JS). The min-height
   keeps scroll position stable while large diffs are still loading. */
.diff-loader { min-height: 80px; }
.diff-placeholder {
  color: var(--muted);
  padding: 32px;
  text-align: center;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.diff-placeholder::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
.diff-error {
  color: var(--removed);
  padding: 20px;
  font-size: 13px;
  font-family: var(--font-mono);
}

/* ============================================================
   APP-SHELL ADDITIONS (client-side rendering states)
============================================================ */
#boot-msg {
  color: var(--muted);
  padding: 60px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
}
#boot-msg.error { color: var(--removed); }

/* ============================================================
   RESPONSIVE LAYOUT
   Desktop is the two-pane grid above. Below 1100px the panes tighten;
   below 768px the grid collapses to a single scrolling column and the
   sidebar becomes a drawer under a sticky top bar (#mobilebar +
   #backdrop markup is emitted by the prerenderer; pages without it —
   e.g. viewer.html — simply never match these selectors).
============================================================ */
#mobilebar { display: none; }
#backdrop { display: none; }

@media (max-width: 1100px) {
  #layout { grid-template-columns: 264px 1fr; }
  #sidebar { padding: 24px 18px 28px; }
  #main { padding: 36px 28px 96px 36px; }
}

@media (max-width: 768px) {
  :root { --mobilebar-h: 52px; }

  /* Single column; the document itself scrolls. */
  html, body { height: auto; }
  #layout { display: block; height: auto; }
  #main { overflow: visible; padding: 24px 16px 96px; }

  /* Sticky top bar: menu button + brand */
  #mobilebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--mobilebar-h);
    padding: 0 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
  }
  #menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
  }
  #menu-toggle svg { stroke: var(--accent); }

  /* Sidebar becomes a drawer sliding in under the top bar */
  #sidebar {
    position: fixed;
    top: var(--mobilebar-h);
    left: 0;
    bottom: 0;
    width: min(340px, 88vw);
    z-index: 30;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    border-right: 1px solid var(--border-strong);
  }
  @media (prefers-reduced-motion: reduce) {
    #sidebar { transition: none; }
  }
  body.nav-open #sidebar {
    transform: none;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.45);
  }
  body.nav-open { overflow: hidden; }
  #backdrop {
    position: fixed;
    inset: var(--mobilebar-h) 0 0 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.45);
  }
  body.nav-open #backdrop { display: block; }

  /* Comfortable tap targets in the drawer */
  #fwlist li a { padding: 9px 10px; font-size: 14px; }
  .chip { padding: 6px 11px 6px 10px; font-size: 11px; }
  /* 16px stops iOS Safari from zooming the page on focus */
  #search { font-size: 16px; }

  /* Anchored sections land below the sticky bar */
  .fw { padding-top: 32px; margin-top: 32px; scroll-margin-top: calc(var(--mobilebar-h) + 12px); }
  .fw h2 { font-size: 22px; }
  .fw .toplinks { margin-bottom: 16px; }

  .summary-banner { gap: 18px 28px; padding-bottom: 20px; margin-bottom: 28px; }
  .summary-banner .stat { gap: 6px; }
  .summary-banner .stat b { font-size: 20px; }

  .summary { padding-left: 14px; font-size: 14px; }
  .summary p:first-child { font-size: 15px; }

  details.section > summary { padding: 11px 14px; }
  .sbs-files { padding: 8px 8px 12px; }

  /* Side-by-side diffs stack: old half above new half. The PAIR is the
     scroll container (not each half), so one horizontal pan moves both
     halves together and their columns stay aligned. Fragment markup is
     untouched data. */
  .sbs-pair {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--code-bg);
  }
  /* Each half spans its full content width so row backgrounds and the
     divider don't stop at the visible edge while panning. */
  .sbs-side { overflow-x: visible; width: max-content; min-width: 100%; }
  .sbs-side:first-child {
    border-right: none;
    border-bottom: 1px dashed var(--border-strong);
  }
  /* Labels stick to the pair's left edge while it scrolls */
  .sbs-side::before {
    content: 'new';
    display: block;
    position: sticky;
    left: 0;
    width: max-content;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 5px 8px 2px;
  }
  .sbs-side:first-child::before { content: 'old'; }
  /* Stacked halves don't need the desktop alignment filler. Hide rows that
     exist only to pad one side (no line number AND no code — a real blank
     source line keeps its number), and collapse a half that is entirely
     filler: the OLD half of a new file, the NEW half of a removed one. */
  .sbs-side tr:has(> td.ln:empty):has(> td.code:empty) { display: none; }
  .sbs-side:not(:has(td.ln:not(:empty))) { display: none; }
  /* Tighter type + slimmer number gutter: on a phone the gutter is ~18%
     of the viewport, so every pixel goes to code instead. */
  .sbs-pairs { font-size: 11px; line-height: 1.45; }
  table.sbs-half td { padding: 1px 6px; }
  table.sbs-half td.ln {
    width: 30px; min-width: 30px; max-width: 30px;
    padding-right: 6px;
    font-size: 9px;
  }

  /* Standalone viewer page */
  body.external { padding: 20px 12px; }
}

/* Very narrow screens: the number gutter costs more than it's worth */
@media (max-width: 480px) {
  table.sbs-half td.ln { display: none; }
  .sbs-files { padding: 6px 4px 10px; }
  #main { padding: 20px 10px 96px; }
}