/* ds-viewer.css: Pacing design system layer for the Pacing Viewer app (index.html).
   Loads AFTER styles.css, ds/fonts.css and ds/tokens.css (vendored, unchanged: see ds/ds.lock.json). Adds no new colours: every value is a token from ds/tokens.css.
   Scope: <html class="pc"> (script.js already sets data-theme="dark|light" on <html>, which the tokens read).
   Rules here only remap the app's own custom properties and override look and layout. No DOM ids or classes change.
   Preview rules are scoped to #markdown-preview, not .markdown-body: the PDF export builds a temporary
   .markdown-body.pdf-export element, which must keep its current look. The announcement bar is in bar.css.
   The priority+ toolbar tiers are set by initToolbarOverflow() in script.js. */

/* App fonts: only the faces the app uses (Inter, IBM Plex Mono 400, 500 and 600, latin), declared here with
   font-display: swap and pointing at the vendored WOFF2 files in /fonts/ (never edited, hashed in ds/ds.lock.json).
   index.html does not link ds/fonts.css: it declares 50 faces, 45 of them for files the app does not ship.
   Inter is one variable file, so one face covers weights 300 to 700. TASA Orbiter comes from ds/tokens.css. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Map the app's variables onto the tokens ---------- */
html.pc {
  --bg-color: var(--surface-page);
  --editor-bg: var(--surface-sunken);
  --preview-bg: var(--surface-page);
  --text-color: var(--text);
  --preview-text-color: var(--text);
  --border-color: var(--line);
  --header-bg: var(--surface-page);
  --button-bg: transparent;
  --button-hover: var(--surface-hover);
  --button-active: var(--surface-hover);
  --dropzone-bg: transparent;
  --scrollbar-thumb: var(--line-strong);
  --scrollbar-track: transparent;
  --accent-color: var(--text-accent);          /* AA as text in both modes (#ff9233 dark, #a94f08 light) */
  --accent-rgb: 255, 146, 51;                  /* brand orange as a triple, for rgba(var(--accent-rgb), a) in styles.css */
  --brand-orange: var(--accent);
  --table-bg: var(--surface-page);
  --code-bg: var(--surface-sunken);
  --color-danger-fg: var(--danger);

  --syn-string: var(--brand-orange-soft);      /* dark */
  --ds-header-h: 64px;
}
html.pc[data-theme="light"] { --syn-string: var(--brand-orange-deep); }

/* GitHub markdown variables, remapped onto tokens. Set on #markdown-preview itself because styles.css sets them there. */
html.pc #markdown-preview {
  --color-fg-default: var(--text);
  --color-fg-muted: var(--text-muted);
  --color-fg-subtle: var(--text-faint);
  --color-canvas-default: var(--surface-page);
  --color-canvas-subtle: var(--surface-sunken);
  --color-border-default: var(--line);
  --color-border-muted: var(--line);
  --color-accent-fg: var(--text-link);
  --color-accent-emphasis: var(--accent);
  --color-neutral-muted: var(--surface-hover);
  --color-attention-subtle: var(--accent-tint);
  --color-prettylights-syntax-comment: var(--text-faint);
  --color-prettylights-syntax-keyword: var(--text-accent);
  --color-prettylights-syntax-entity: var(--text-link);
  --color-prettylights-syntax-constant: var(--text-link);
  --color-prettylights-syntax-string: var(--syn-string);
  --color-prettylights-syntax-variable: var(--text-accent);
  --color-prettylights-syntax-entity-tag: var(--text-link);
  --color-prettylights-syntax-storage-modifier-import: var(--text);
  --color-prettylights-syntax-markup-heading: var(--text-link);
  --color-prettylights-syntax-markup-bold: var(--text);
  --color-prettylights-syntax-markup-italic: var(--text);

}

html.pc body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  background: var(--surface-page);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
html.pc ::selection { background: var(--accent); color: var(--on-accent); }
html.pc :focus-visible, html.pc button:focus-visible, html.pc a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
html.pc .app-container { height: 100vh; height: 100dvh; }

/* ---------- 3. Header: three-column grid, no absolutely positioned centre group ---------- */
html.pc .app-header {
  padding: 0 var(--space-4);
  min-height: var(--ds-header-h);
  display: flex;
  align-items: center;
  background: var(--surface-page);
  border-bottom: 1px solid var(--line);
  z-index: var(--z-menu);
}
html.pc .header-container {
  display: grid !important;                      /* beats Bootstrap's .d-flex !important */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-5);
  width: 100%;
  padding: 0;
}
html.pc .header-left  { grid-column: 1; flex: none; min-width: 0; gap: var(--space-3); }
html.pc .view-mode-group { grid-column: 2; justify-self: center; position: static; transform: none; }
html.pc .header-right { grid-column: 3; flex: none; justify-self: end; gap: var(--space-2); }
html.pc .mobile-menu  { grid-column: 3; justify-self: end; }

html.pc .pacing-logo-link { margin-right: 0; }
html.pc .pacing-logo { height: 32px; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); }
html.pc .header-left h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  margin: 0 !important;
}
html.pc .stats-container { gap: var(--space-3); margin-left: var(--space-2); white-space: nowrap; }
html.pc .stats-container .stat-item { margin: 0 !important; font-size: 13px; color: var(--text-faint); }
html.pc .stats-container .stat-item i { color: var(--text-faint); }

/* Buttons: pc-btn--outline look, 40px control height (--control-sm) */
html.pc .tool-button,
html.pc .view-mode-btn {
  min-height: var(--control-sm);
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  gap: 6px;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
html.pc .tool-button:hover, html.pc .view-mode-btn:hover { background: var(--surface-hover); border-color: var(--text); }
html.pc .tool-button:active { background: var(--surface-hover); }
html.pc .tool-button.border-primary { border-color: var(--line-strong) !important; }
html.pc .tool-button.sync-enabled:not(.border-primary) { background: var(--accent-tint); border-color: var(--text-accent); color: var(--text-accent); }
html.pc .tool-button i { font-size: 16px; }

/* View mode: one segmented pill. Active = accent fill, as pc-tabs */
html.pc .view-mode-group {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
html.pc .view-mode-btn, html.pc .view-mode-btn:first-child, html.pc .view-mode-btn:last-child {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-weight: 500;
}
html.pc .view-mode-btn:not(:last-child) { border-right: 0; }
html.pc .view-mode-btn:hover { background: var(--surface-hover); color: var(--text); }
html.pc .view-mode-btn.active,
html.pc .view-mode-btn.active:not(:last-child) {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  padding: 0 14px;
  font-weight: 600;
}

html.pc .dropdown-menu {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: var(--space-2);
  font-size: 14px;
}
html.pc .dropdown-item { color: var(--text); border-radius: var(--radius-sm); padding: 8px 12px; }
html.pc .dropdown-item:hover, html.pc .dropdown-item:focus { background: var(--surface-hover); }

/* Priority+ toolbar (toolbar-overflow.js). The script measures and picks a tier and how many controls go into "More".
   Tiers: l2 every label; l1 labels on Sync, Import, Export and Share; l1v the same with icon-only view modes; l0 icons only (last resort).
   No width breakpoints here: nothing is hand-placed. Rules are scoped to ".toolbar >" so moved items keep their menu look. */
html.pc .toolbar { flex-wrap: nowrap; position: relative; }
html.pc .view-mode-group { min-width: max-content; }
html.pc .stats-container { display: flex !important; }
html.pc .header-container.tb-l1 .toolbar > #copy-markdown-button,
html.pc .header-container.tb-l1 .toolbar > #wiki-button,
html.pc .header-container.tb-l1v .toolbar > #copy-markdown-button,
html.pc .header-container.tb-l1v .toolbar > #wiki-button,
html.pc .header-container.tb-l0 .toolbar > .tool-button,
html.pc .header-container.tb-l0 .toolbar > .dropdown .tool-button { font-size: 0; gap: 0; padding: 0; width: var(--control-sm); justify-content: center; }
html.pc .header-container.tb-l1 .toolbar > #copy-markdown-button i,
html.pc .header-container.tb-l1 .toolbar > #wiki-button i,
html.pc .header-container.tb-l1v .toolbar > #copy-markdown-button i,
html.pc .header-container.tb-l1v .toolbar > #wiki-button i,
html.pc .header-container.tb-l0 .toolbar > .tool-button i,
html.pc .header-container.tb-l0 .toolbar > .dropdown .tool-button i { font-size: 17px; }
html.pc .header-container.tb-l0 .toolbar > .dropdown .tool-button.dropdown-toggle::after { display: none; }
html.pc .header-container.tb-l1v .view-mode-btn span, html.pc .header-container.tb-l0 .view-mode-btn span { display: none; }
html.pc .header-container.tb-l1v .view-mode-btn, html.pc .header-container.tb-l1v .view-mode-btn.active, html.pc .header-container.tb-l0 .view-mode-btn, html.pc .header-container.tb-l0 .view-mode-btn.active { padding: 0 12px; }
html.pc #theme-toggle { padding: 0; width: var(--control-sm); justify-content: center; }
html.pc .toolbar > .tb-more, html.pc .toolbar > .dropdown { flex-shrink: 0; }
html.pc #more-menu-button { padding: 0; width: var(--control-sm); justify-content: center; }
html.pc #more-menu-button[aria-expanded="true"] { background: var(--surface-hover); border-color: var(--text); }
html.pc .tb-more-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-modal);
  min-width: 240px; padding: var(--space-2);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
}
html.pc .tb-more-menu > .tool-button {
  width: 100%; min-height: 40px; justify-content: flex-start; gap: 10px; padding: 0 12px;
  border: 0; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; background: transparent;
}
html.pc .tb-more-menu > .tool-button:hover, html.pc .tb-more-menu > .tool-button:focus-visible { background: var(--surface-hover); }
html.pc .tb-more-menu > .tool-button.sync-enabled:not(.border-primary) { background: var(--accent-tint); }
html.pc .tb-more-menu > #theme-toggle::after { content: attr(title); }
html.pc .tb-more-menu > .tool-button i { font-size: 17px; width: 20px; text-align: center; }
html.pc .tb-more-menu > .dropdown { padding: var(--space-1) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: var(--space-1) 0; }
html.pc .tb-more-menu > .dropdown::before { content: "Export"; display: block; padding: 4px 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
html.pc .tb-more-menu > .dropdown > .tool-button { display: none; }
html.pc .tb-more-menu > .dropdown .dropdown-menu { display: block; position: static; transform: none; border: 0; box-shadow: none; background: transparent; padding: 0; min-width: 0; }
html.pc .tb-more-menu > .stats-container { flex-direction: column; align-items: flex-start !important; gap: 2px; padding: var(--space-2) 12px; margin: 0; border-top: 1px solid var(--line); }
html.pc .tb-more-menu > .stats-container .stat-item { display: block !important; font-size: 13px; color: var(--text-muted); }

/* ---------- 4. Tabs bar ---------- */
html.pc .tab-bar {
  height: 44px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--space-3);
}
html.pc .tab-list { align-items: flex-end; gap: 2px; }
html.pc .tab-item {
  height: 36px;
  min-width: 120px;
  max-width: 220px;
  padding: 0 8px 0 14px;
  margin-right: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  opacity: 1;
}
html.pc .tab-item:hover { background: var(--surface-hover); color: var(--text); opacity: 1; }
html.pc .tab-item.active {
  background: var(--surface-page);
  color: var(--text);
  box-shadow: inset 0 2px 0 var(--accent);
  border: 0;
  margin-bottom: -1px;
  height: 37px;
}
html.pc .tab-menu-btn { width: 28px; height: 28px; border-radius: var(--radius-pill); color: var(--text-muted); }
html.pc .tab-new-btn { align-self: center; width: 32px; height: 32px; border-radius: var(--radius-pill); color: var(--text-muted); }
html.pc .tab-reset-btn, html.pc .tab-reset-btn:hover { font-size: 13px; height: 32px; border-radius: var(--radius-pill); border-color: var(--line-strong); }
html.pc .tab-menu-dropdown {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}

/* ---------- 5. Dropzone: a slim strip, never over the preview ---------- */
html.pc .dropzone {
  margin: var(--space-2) var(--space-3) 0 !important;
  width: auto;
  padding: 10px var(--space-5);
  min-height: 0;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
html.pc .dropzone p { font-size: 14px; color: var(--text-muted); }
html.pc .dropzone:hover { border: 1px dashed var(--accent); }
html.pc .dropzone:hover p { color: var(--text-accent); transform: none; }
html.pc .dropzone .close-btn { top: 50%; transform: translateY(-50%); right: 8px; width: 28px; height: 28px; background: transparent; border: 0; opacity: .8; }
html.pc .dropzone .close-btn:hover { background: var(--surface-hover); opacity: 1; }

/* ---------- 6. Panes ---------- */
html.pc .editor-pane { background: var(--surface-sunken); border-right: 1px solid var(--line); padding: 0; }
html.pc .preview-pane { background: var(--surface-page); padding: 0; }
html.pc #markdown-editor {
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.65;
  padding: var(--space-5);
  caret-color: var(--accent);
}
html.pc #markdown-editor::placeholder { color: var(--text-faint); }
html.pc .resize-divider:hover { background: var(--surface-hover); }
html.pc .resize-divider-handle { background: var(--line-strong); }

/* ---------- 7. Rendered markdown: 16px body, 68 to 78ch measure, readable in both modes ---------- */
html.pc #markdown-preview {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: transparent;
  padding: var(--space-6) var(--space-6) var(--space-8);
  color-scheme: dark;
}
html.pc[data-theme="light"] #markdown-preview { color-scheme: light; }
html.pc .content-container.view-preview-only #markdown-preview { max-width: 78ch; margin-inline: auto; padding-top: var(--space-7); }
html.pc #markdown-preview h1, html.pc #markdown-preview h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; color: var(--text); border-bottom: 1px solid var(--line); text-wrap: balance; }
html.pc #markdown-preview h1 { font-size: 2.25rem; line-height: 1.15; }
html.pc #markdown-preview h2 { font-size: 1.6rem; line-height: 1.25; }
html.pc #markdown-preview h3, html.pc #markdown-preview h4, html.pc #markdown-preview h5, html.pc #markdown-preview h6 {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; color: var(--text);
}
html.pc #markdown-preview a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
html.pc #markdown-preview a:hover { text-decoration-thickness: 2px; }
html.pc #markdown-preview strong { color: var(--text); font-weight: 600; }
html.pc #markdown-preview hr { background: var(--line); height: 1px; }
html.pc #markdown-preview blockquote {
  color: var(--text-muted);
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-3) var(--space-4);
}
html.pc #markdown-preview blockquote > :last-child { margin-bottom: 0; }

html.pc #markdown-preview code, html.pc #markdown-preview tt {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 0.15em 0.4em;
  color: var(--text);
}
html.pc #markdown-preview pre {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: 14px;
  line-height: 1.6;
}
html.pc #markdown-preview pre code, html.pc #markdown-preview pre tt { border: 0; padding: 0; background: transparent; font-size: inherit; }

html.pc #markdown-preview table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); }
html.pc #markdown-preview table th { background: var(--surface-sunken); color: var(--text); font-weight: 600; border: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; }
html.pc #markdown-preview table td { border: 0; border-top: 1px solid var(--line); padding: 10px 14px; color: var(--text); }
html.pc #markdown-preview table tr, html.pc #markdown-preview table tr:nth-child(2n) { background: transparent; border: 0; }
html.pc #markdown-preview table tr:nth-child(2n) td { background: color-mix(in srgb, var(--surface-sunken) 55%, transparent); }

/* Task lists: token-drawn checkbox (native disabled boxes render grey), no bullet beside it */
html.pc #markdown-preview li:has(> input[type="checkbox"]) { list-style: none; margin-left: -2em; }
html.pc #markdown-preview input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1.1em; height: 1.1em; margin: 0 0.55em 0.15em 0; vertical-align: middle;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-xs); background: transparent;
}
html.pc #markdown-preview input[type="checkbox"]:checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230d1117' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat;
  border-color: var(--accent);
}
html.pc #markdown-preview .mathjax-display, html.pc #markdown-preview mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; }

/* Mermaid: give diagrams a card so the theme colours Mermaid picks (dark or default) always sit on a known ground.
   Node and edge colours stay Mermaid's own, because script.js owns the Mermaid theme. */
html.pc #markdown-preview .mermaid-container {
  padding: var(--space-4);
  margin: var(--space-4) 0 var(--space-5);
  overflow-x: auto;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
html.pc .mermaid-toolbar-btn { border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--text); }

/* ---------- 8. Modals and toasts ---------- */
html.pc .reset-modal-box, html.pc .mermaid-modal-content { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); color: var(--text); }
html.pc .reset-modal-overlay { background: var(--scrim); }
html.pc .reset-modal-btn { border-radius: var(--radius-pill); min-height: var(--control-sm); font-weight: 600; }
html.pc .reset-modal-confirm { background: var(--danger); color: var(--surface-page); border-color: var(--danger); }
html.pc .share-toast { background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); border-left-color: var(--accent); }

/* ---------- 9. Mobile ---------- */
html.pc .mobile-menu-panel {
  background: var(--surface-raised);
  height: 100vh; height: 100dvh;
  box-shadow: var(--shadow-lift);
  border-left: 1px solid var(--line);
  z-index: var(--z-modal);
}
html.pc .mobile-menu-overlay { background: var(--scrim); z-index: calc(var(--z-modal) - 1); }
html.pc .mobile-menu { z-index: var(--z-modal); }
html.pc .mobile-menu-header h5 { font-family: var(--font-display); font-weight: 500; font-size: 20px; }
html.pc .mobile-menu-item, html.pc .mobile-tab-item {
  min-height: var(--control-sm);
  font-size: 15px;
  color: var(--text);
  border-radius: var(--radius-sm);
}
html.pc .mobile-tab-item.active { background: var(--accent-tint); color: var(--text-accent); }
html.pc .mobile-menu-item:hover { background: var(--surface-hover); }
html.pc .mobile-view-mode-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
html.pc .mobile-stats-container .stat-item { display: flex; gap: 6px; align-items: center; color: var(--text-muted); font-size: 14px; }

@media (max-width: 767px) {
  html.pc .app-header { min-height: 56px; padding-inline: var(--space-4); }
  html.pc .pacing-logo { height: 28px; }
  html.pc .header-left h1 { font-size: 18px; }
  html.pc .header-container { grid-template-columns: minmax(0, 1fr) auto; }
  /* Drag and drop does not exist on touch screens, and Import is in the menu: the strip is hidden so it never covers the preview */
  html.pc .dropzone { display: none !important; }
  html.pc .editor-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  html.pc #markdown-editor { padding: var(--space-4); font-size: 14px; }
  html.pc #markdown-preview { padding: var(--space-5) var(--space-4) var(--space-7); }
  html.pc #markdown-preview h1 { font-size: 1.85rem; }
  html.pc #markdown-preview h2 { font-size: 1.4rem; }
  html.pc #markdown-preview pre { padding: var(--space-3) var(--space-4); }
  html.pc #markdown-preview table th, html.pc #markdown-preview table td { padding: 8px 10px; white-space: nowrap; }
  html.pc #markdown-preview .mermaid-container .mermaid svg { min-width: 560px; }
}

/* "by Pacing": small way in to /about, next to the title. Hidden below 1100px (the menu carries "About Pacing"). */
html.pc .by-pacing { font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; white-space: nowrap; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 10px; margin-left: var(--space-1); }
html.pc .by-pacing:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-hover); }
@media (max-width: 1099px) { html.pc .by-pacing { display: none; } }
html.pc a.mobile-menu-item { display: flex; align-items: center; gap: 4px; text-decoration: none; padding: 0 12px; }
html.pc .tb-more-menu > #theme-toggle { width: 100%; padding: 0 12px; justify-content: flex-start; }
html.pc .tb-more-menu > .stats-container:first-child { border-top: 0; }
html.pc .tb-more-menu > .tool-button.border-primary { border: 0 !important; }

/* Below 768px the drawer lists the stats; the header never shows them (they overlapped the menu button). */
@media (max-width: 767px) { html.pc .header-left .stats-container { display: none !important; } }