/* Orange Pill Wiki — shared styles.
   Mirrors the book's reader UI one-to-one:
   - Top bar (wiki-home icon, title, Jump-to selector, font cycler, size A↓/A↑, theme)
   - Bottom bar (scroll-progress + category)
   - Font size classes fs-xs … fs-3x
   - Sans/serif/mono font families
   - Light / dark / sepia themes with smooth transitions
   Additional wiki-only: entry-head, summary block, illustration float,
   appears-in / related / further-reading lists, card grids for index/sample. */

:root{--o:#E05C00;--bg:#faf9f6;--text:#2a2a2a;--text2:#555;--border:#e0ddd8;--card:#fff;--bar:#ffffffee;--fs:18px;--lh:1.75;--ff:'Georgia',serif}
[data-theme="dark"]{--bg:#111;--text:#d4d4d4;--text2:#888;--border:#2a2a2a;--card:#1a1a1a;--bar:#111111ee}
[data-theme="sepia"]{--bg:#f4ecd8;--text:#5b4636;--text2:#8b7355;--border:#d4c5a9;--card:#faf3e3;--bar:#f4ecd8ee}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:var(--fs);scroll-behavior:smooth}
/* body ALSO binds font-size to --fs so that fs-* classes on body actually propagate.
   (Putting the class on body sets --fs only within body's scope; html is the parent
   and wouldn't see it — so we make body's own font-size read the class-provided --fs.) */
body{font-family:var(--ff);font-size:var(--fs);background:var(--bg);color:var(--text);line-height:var(--lh);transition:background .3s,color .3s,font-size .15s;padding-top:52px;padding-bottom:52px}

/* Top bar (matches book) */
.top-bar{position:fixed;top:0;left:0;right:0;height:48px;background:var(--bar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:8px;z-index:100;font-size:13px}
.top-bar .title{flex:1;font-weight:700;color:var(--o);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.top-bar select,.top-bar button,.top-bar a.iconbtn{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer;font-family:system-ui;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;height:28px;line-height:1}
.top-bar button:hover,.top-bar a.iconbtn:hover{border-color:var(--o)}
.top-bar button.active{background:var(--o);color:#fff;border-color:var(--o)}

/* Bottom bar (matches book) */
.bot-bar{position:fixed;bottom:0;left:0;right:0;height:48px;background:var(--bar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:100;font-size:12px;color:var(--text2)}
.bot-bar .progress-track{flex:1;height:3px;background:var(--border);border-radius:2px;margin:0 12px;cursor:pointer}
.bot-bar .progress-fill{height:100%;background:var(--o);border-radius:2px;transition:width .2s}

/* Font size ladder — aggressive enough that A↑ visibly scales up to 2× default.
   Default is fs-md = 18px. A↑ goes 18 → 22 → 28 → 36 (2×) → 44 (2.44×).
   A↓ goes 18 → 16 → 14. */
.fs-xs{--fs:14px;--lh:1.55}
.fs-sm{--fs:16px;--lh:1.65}
.fs-md{--fs:18px;--lh:1.75}
.fs-lg{--fs:22px;--lh:1.8}
.fs-xl{--fs:28px;--lh:1.82}
.fs-2x{--fs:36px;--lh:1.85}
.fs-3x{--fs:44px;--lh:1.88}

/* Font family options (matches book) */
[data-font="sans"]{--ff:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
[data-font="serif"]{--ff:'Georgia','Times New Roman',serif}
[data-font="mono"]{--ff:'SF Mono',Menlo,monospace}

/* Reader area — slightly wider than book to accommodate the entry-head + figure.
   Max-width scales a little with larger font settings so lines don't become cramped. */
.reader{max-width:740px;margin:0 auto;padding:24px 32px 40px}
.fs-lg .reader, body.fs-lg .reader{max-width:820px}
.fs-xl .reader, body.fs-xl .reader{max-width:920px}
.fs-2x .reader, body.fs-2x .reader{max-width:1040px}
.fs-3x .reader, body.fs-3x .reader{max-width:1160px}
/* Shrink the floated illustration at big sizes so text keeps ~30 chars per line */
.fs-xl .entry-illus{width:220px}
.fs-2x .entry-illus,.fs-3x .entry-illus{width:200px}
.reader h1{font-size:2.2em;line-height:1.2;margin:6px 0 8px;color:var(--text)}
.reader h2{font-size:1.35em;color:var(--o);margin:32px 0 12px;border-bottom:1px solid var(--border);padding-bottom:6px;letter-spacing:.3px}
.reader h3{font-size:1.05em;color:var(--text);margin:20px 0 8px;font-variant:small-caps;letter-spacing:.6px}
.reader p{margin:0 0 1em;color:var(--text)}
.reader ul{margin:0 0 1em 1.2em}
.reader li{margin:.3em 0}
.reader em{color:var(--text2)}

/* Entry header */
.entry-head{padding:20px 0 22px;border-bottom:1px solid var(--border);margin-bottom:24px}
.entry-cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.5px;color:#fff;background:var(--o);padding:3px 10px;border-radius:3px;margin-bottom:14px;text-transform:uppercase;font-family:system-ui}
.entry-epitome{font-size:1.1em;color:var(--text2);font-style:italic;margin-top:8px}

/* Summary box */
.summary{background:var(--card);border-left:4px solid var(--o);padding:18px 22px;margin:24px 0 28px;border-radius:0 4px 4px 0}
.summary p{margin:0;font-size:.98em}
.summary::after{content:"— Edo Segal's Note \005E Opus";display:block;font-style:italic;color:var(--o);font-size:.85em;margin-top:10px;text-align:right}

/* Illustration ink color is parameterized via --ink-color.
   SVGs in wiki entries use fill="currentColor" — see bottom of file. */
:root{--ink-color:#D62828}            /* mildly dark red, perceptually matched */
[data-theme="dark"]{--ink-color:#F05050}
[data-theme="sepia"]{--ink-color:#8A1E1E}

/* Section blocks */
.sec{margin:22px 0}

/* Appears-in / related lists */
.appears-in ul, .related ul{list-style:none;margin-left:0;padding:8px 0}
.appears-in li, .related li{padding:4px 0;border-bottom:1px dotted var(--border)}
.appears-in li:last-child, .related li:last-child{border-bottom:none}
.appears-in a, .related a{color:var(--o);text-decoration:none;font-weight:600}
.appears-in a:hover, .related a:hover{text-decoration:underline}

/* === Three-tier link styling ===
   .wiki-link  → internal wiki entry       orange, NO underline
   .book-link  → Orange Pill Cycle book    orange, bold, NO underline
   .wp-link    → external Wikipedia        orange, solid underline
   All three shift to black (light) / white (dark) / warm-brown (sepia) when :visited. */

.reader a.wiki-link,
.reader a.book-link,
.reader a.wp-link,
.further-reading a.wp-link{
  color:var(--o);
  text-decoration:none;
  transition:color .12s,text-decoration-color .12s,background .12s;
}
/* Internal wiki + book links: no underline */
.reader a.wiki-link,
.reader a.book-link{text-decoration:none;border-bottom:none}
.reader a.book-link{font-weight:600}
/* External Wikipedia links: solid underline (always), plus tiny favicon after */
.reader a.wp-link,
.further-reading a.wp-link{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
/* Tiny Wikipedia icon after every wp-link (kept close to the last letter) */
.reader a.wp-link::after,
.further-reading a.wp-link::after{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  margin:0 1px 0 3px;
  vertical-align:baseline;
  background:url("wikipediaicon.ico") no-repeat center/contain;
  /* Icon ignores text decoration on the link */
  text-decoration:none;
  transform:translateY(1px);
}
/* In dark mode, the dark "W" on transparent bg can look too heavy; lighten slightly */
[data-theme="dark"] .reader a.wp-link::after,
[data-theme="dark"] .further-reading a.wp-link::after{
  filter:invert(1) brightness(1.1);
}
/* Visited colors */
.reader a.wiki-link:visited,
.reader a.book-link:visited,
.reader a.wp-link:visited,
.further-reading a.wp-link:visited{color:#000}
[data-theme="dark"] .reader a.wiki-link:visited,
[data-theme="dark"] .reader a.book-link:visited,
[data-theme="dark"] .reader a.wp-link:visited,
[data-theme="dark"] .further-reading a.wp-link:visited{color:#fff}
[data-theme="sepia"] .reader a.wiki-link:visited,
[data-theme="sepia"] .reader a.book-link:visited,
[data-theme="sepia"] .reader a.wp-link:visited,
[data-theme="sepia"] .further-reading a.wp-link:visited{color:#2a1c0d}
/* Hover — subtle warm wash */
.reader a.wiki-link:hover,
.reader a.book-link:hover,
.reader a.wp-link:hover,
.further-reading a.wp-link:hover{background:rgba(224,92,0,.08)}

/* Floated entry illustration (magazine-style) */
.entry-illus{float:right;width:260px;margin:4px 0 14px 22px;shape-outside:margin-box}
.entry-illus img{width:100%;height:auto;display:block;border-radius:10px;overflow:hidden}
/* Every image on a wiki page gets rounded corners for visual consistency */
.reader img, .sample-card .thumb img, .index-card img{border-radius:10px}
/* Transparent PNG pixels are pure black — invert for dark, tint for sepia */
[data-theme="dark"] .entry-illus img{filter:invert(1)}
[data-theme="sepia"] .entry-illus img{filter:sepia(.4) saturate(.7)}
.entry-illus figcaption{font-size:.78em;color:var(--text2);font-style:italic;margin-top:8px;line-height:1.45;text-align:center;padding:0 4px}
@media(max-width:600px){
  .entry-illus{float:none;width:100%;margin:0 0 16px 0}
}

/* Further reading */
.further-reading{font-size:.92em;color:var(--text2);border-top:1px solid var(--border);margin-top:32px;padding-top:16px}
.further-reading h3{color:var(--text2);margin-top:0}
.further-reading ol{margin:0 0 0 1.4em}
.further-reading li{margin:.4em 0}
.further-reading a.cite-link{color:var(--o);text-decoration:none;padding:0 4px;border-bottom:1px dotted var(--o)}
.further-reading a.cite-link:hover{background:rgba(224,92,0,.08);border-bottom:1px solid var(--o)}
.further-reading a.cite-link:visited{color:#000;border-bottom-color:#000}
[data-theme="dark"] .further-reading a.cite-link:visited{color:#fff;border-bottom-color:#fff}

/* Footer */
.wiki-foot{margin-top:48px;padding-top:20px;border-top:1px solid var(--border);color:var(--text2);font-size:.82em;text-align:center;font-family:system-ui}
.wiki-foot a{color:var(--text2)}

/* Index page specific */
.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:24px 0}
.index-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:16px;transition:border-color .15s}
.index-card:hover{border-color:var(--o)}
.index-card h3{margin:0 0 4px;font-family:var(--ff);font-variant:normal;letter-spacing:0}
.index-card h3 a{color:var(--text);text-decoration:none}
.index-card h3 a:hover{color:var(--o)}
.index-card .cat{font-size:10px;letter-spacing:1.2px;color:var(--o);font-weight:700;text-transform:uppercase;font-family:system-ui}
.index-card p{font-size:.88em;color:var(--text2);margin:6px 0 0}
.index-section{margin:28px 0}
.index-section h2{font-size:1.2em;color:var(--o);border-bottom:1px solid var(--border);padding-bottom:6px;letter-spacing:.3px}

/* Responsive */
@media(max-width:600px){
  .reader{padding:16px 18px}
  .reader h1{font-size:1.7em}
  .top-bar .title{font-size:12px}
  .top-bar select{max-width:110px}
}

/* === Inline-SVG illustrations === .
   Entries now embed <svg> directly in place of the old <img>, with
   fill="currentColor" on every path. Setting `color` on the figure paints
   the ink in any chosen hue. PNG source stays canonical (black on transparent). */
.entry-illus{color:var(--ink-color)}
.entry-illus svg{display:block;width:100%;height:auto;border-radius:10px}
.entry-illus img{filter:none !important}  /* legacy fallback only */
[data-theme="dark"] .entry-illus img{filter:none !important}
[data-theme="sepia"] .entry-illus img{filter:none !important}

/* Collapsible commentary boxes — Contrarian (red) and Arbitrator (blue).
   Hidden if their containing <details> elements are not present in the page. */
.coll{background:var(--card);padding:14px 22px;margin:24px 0 28px;border-radius:0 4px 4px 0;transition:padding .15s}
.coll[open]{padding:18px 22px}
.coll-c{border-left:4px solid #D62828}
.coll-a{border-left:4px solid #5BA3D9}
.coll summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;outline:none}
.coll summary::-webkit-details-marker{display:none}
.coll .plus{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid currentColor;border-radius:5px;font-weight:700;font-size:15px;line-height:1;flex-shrink:0;transition:transform .2s,background .2s}
.coll-c .plus{color:#D62828}
.coll-a .plus{color:#5BA3D9}
.coll summary:hover .plus{background:rgba(0,0,0,.04);transform:scale(1.08)}
.coll[open] .plus::before{content:"\002212"}
.coll:not([open]) .plus::before{content:"+"}
.coll .title{font-weight:700;font-size:1em;color:var(--text)}
.coll .by{font-style:italic;font-size:.85em;margin-left:auto;white-space:nowrap}
.coll-c .by{color:#D62828}
.coll-a .by{color:#5BA3D9}
.coll .body{margin-top:14px;font-size:.98em;line-height:1.65}
.coll .body p{margin:0 0 12px}
.coll .body p:last-of-type{margin-bottom:0}
.coll .sig{font-style:italic;font-size:.85em;margin-top:10px;text-align:right}
.coll-c .sig{color:#D62828}
.coll-a .sig{color:#5BA3D9}