/* publish.css for anishpatel.co (Obsidian Publish). Direction B, "Red pen", chosen by AP 2026-10-10.
   Live once AP publishes this file. Check it in Publish's
   preview at phone width in both themes with an instrument on the page,
   then publish it. Delete the file to revert to the default look.

   Rewritten 2026-10-10. Do it once and freeze it: Publish renames classes
   between versions, so every extra rule is upkeep. Turn off the graph,
   the right-hand panel and hover previews in Publish's site options first;
   that needs no CSS.

   Palette and fonts are shared with the instruments (anishshailpatel/instruments),
   so a chart reads as part of the page. Change a token here and change the
   same token in the five tools' :root block. Direction: "Red pen" (see
   _editorial/site-style-options.html); swap the four font/colour lines to
   change direction. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* 1. Tokens. The accent is a red pen: links, and the one number a passage turns on. */
body {
  --ap-serif: "Source Serif 4", Georgia, serif;
  --ap-sans: Inter, -apple-system, "Segoe UI", sans-serif;
  --ap-mono: "IBM Plex Mono", Consolas, monospace;
  --font-text-theme: var(--ap-serif);
  --font-interface-theme: var(--ap-sans);
  --font-monospace-theme: var(--ap-mono);
  --font-text-size: 17px;          /* the serif's smaller x-height reads like the tools' 16px Inter */
  --line-height-normal: 1.65;
  --file-line-width: 40rem;
}
body.theme-light {
  --background-primary: #faf8f4;  --background-secondary: #f3f1ec;
  --text-normal: #1d1d1b;  --text-muted: #5a5850;  --text-faint: #8a877e;
  --text-accent: #b4452f;  --link-color: #b4452f;  --link-external-color: #b4452f;
  --interactive-accent: #c8503a;  --background-modifier-border: #e2ded6;
  --ap-good: #4a7a5c;  --ap-bad: #b4452f;
}
body.theme-dark {
  --background-primary: #17181b;  --background-secondary: #1d1f23;
  --text-normal: #e6e5e1;  --text-muted: #a8a59d;  --text-faint: #7f7c75;
  --text-accent: #e88a76;  --link-color: #e88a76;  --link-external-color: #e88a76;
  --interactive-accent: #e0745e;  --background-modifier-border: #2e3035;
  --ap-good: #7d9d88;  --ap-bad: #e88a76;
}

/* 2. Quiet chrome: no file tree, so Home is the only way round and
   off-the-map pages stay off it. */
.site-body-left-column { display: none; }
/* The centre column already fills the width, so auto margins on it do nothing.
   What holds the reading column at the left edge is .render-container-inner,
   which sits at a fixed 700px inside the flex row left over once the right
   sidebar has taken its 300px. Centre it there, and centre the sizer inside it:
   Obsidian's own rule sets a 48px left margin that a plain `margin: 0 auto` loses to. */
.render-container { justify-content: center; }
.published-container .markdown-preview-sizer { margin-left: auto; margin-right: auto; }

/* 3. Measure and rhythm */
.markdown-preview-sizer { max-width: var(--file-line-width); margin: 0 auto; }
.markdown-rendered h1, .markdown-rendered h2, .markdown-rendered h3 {
  font-family: var(--ap-sans); font-weight: 600; letter-spacing: -0.01em;
}
.markdown-rendered h2 { font-size: 1.2em; margin-top: 2em; }
.markdown-rendered a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.markdown-rendered hr { border: 0; border-top: 1px solid var(--background-modifier-border); margin: 2.2em 0; }

/* 4. Tables read like a pack: sans labels, mono figures, light rules */
.markdown-rendered table { font-family: var(--ap-sans); font-size: 0.85em; border-collapse: collapse; }
.markdown-rendered th { font-weight: 500; color: var(--text-muted); border: 0; border-bottom: 1px solid var(--background-modifier-border); }
.markdown-rendered td { border: 0; border-bottom: 1px solid var(--background-modifier-border); font-variant-numeric: tabular-nums; }
.markdown-rendered td:not(:first-child) { font-family: var(--ap-mono); font-size: 0.95em; }

/* 5. "The working" callouts: a margin note, not a box */
.markdown-rendered .callout { background: transparent; border: 0; border-left: 2px solid var(--interactive-accent); border-radius: 0; padding: 0.2em 0 0.2em 1em; font-size: 0.92em; }
.markdown-rendered .callout-title { font-family: var(--ap-sans); font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.markdown-rendered .callout-icon { display: none; }