/* tc_modern.css -- modern reskin for ForeHelp-compiled TableCurve Studio help topics.
   Deliberately a DIFFERENT filename than ForeHelp's own project stylesheet
   ("tcstudio1.css") -- ForeHelp overwrites that file with its own native styles on
   every Build, so this file must stay outside ForeHelp's control. Loaded as a SECOND
   stylesheet, after ForeHelp's own, by apply_modern_css.py; every rule below is
   !important specifically so it always wins regardless of link order or specificity.

   Targets ForeHelp's OWN class names directly (.BannerBase/.Base/.Subhead/.Bullet3D/etc.)
   so it works with zero HTML changes. Palette/typography loosely modeled on the
   TableCurve Studio MkDocs prototype for visual consistency between the two doc surfaces. */

:root {
  --tc-accent:      #2563eb;   /* link / accent blue, close to Material's primary */
  --tc-accent-dark: #1d4ed8;
  --tc-heading:     #0f172a;   /* near-black, replaces the old pure green banner */
  --tc-subhead:     #334155;   /* dark slate, deliberately NOT blue so headings read as
                                   structural text, distinct from blue clickable links
                                   (was #1e3a8a, too close to the link-blue accent) */
  --tc-text:        #1f2530;
  --tc-muted:       #5b6472;
  --tc-border:      #e2e8f0;
  --tc-bg:          #ffffff;
  --tc-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tc-accent:      #60a5fa;
    --tc-accent-dark: #93c5fd;
    --tc-heading:     #f1f5f9;
    --tc-subhead:     #cbd5e1;   /* light slate, same not-blue distinction as light mode */
    --tc-text:        #dbe2ea;
    --tc-muted:       #94a3b8;
    --tc-border:      #2b3544;
    --tc-bg:          #0f1620;
  }
}

html, body {
  background: var(--tc-bg) !important;
  color: var(--tc-text) !important;
  font-family: var(--tc-font) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 2.5rem 2rem 4rem !important;
}

/* Back/Home nav bar -- injected right after <body> by apply_nav.py. ForeHelp's plain
   HTML export has no Prev/Next/Home navigation outside the .chm runtime, so this is
   the only way out of a topic reached via search or an external link. Sits above the
   title banner, bold + underlined + high-contrast per the project's low-vision
   formatting rule (color alone is never the only signal). */
.tc-navbar {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  font-family: var(--tc-font) !important;
  margin: 0 0 1.3rem 0 !important;
  padding: 0 0 .7rem 0 !important;
  border-bottom: 1px solid var(--tc-border) !important;
}
.tc-navbar a {
  color: var(--tc-accent) !important;
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent) !important;
  text-underline-offset: 2px !important;
}
/* R2N logo -- first item in the nav bar, injected by apply_nav.py. No underline
   (it's a brand mark, not a text link) and a bit of right margin to separate it
   from the Back/Home/etc. text links that follow. */
.tc-nav-logo-link {
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: .5rem !important;
}
.tc-nav-logo {
  display: inline-block !important;
  height: 26px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}
.tc-navbar a:hover {
  color: var(--tc-accent-dark) !important;
}
.tc-nav-sep {
  color: var(--tc-border) !important;
}
/* Topic-title search box -- injected by apply_nav.py, powered by search.js reading
   search_index.json (built by apply_build_search_index.py). Pushed to the right edge
   of the nav bar; results drop down below the input without affecting nav-bar height. */
.tc-nav-search-wrap {
  position: relative !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.tc-search-input {
  font-family: var(--tc-font) !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  width: 11rem !important;
  padding: .3rem .6rem !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: 999px !important;
  background: var(--tc-bg) !important;
  color: var(--tc-text) !important;
  outline: none !important;
}
.tc-search-input:focus {
  border-color: var(--tc-accent) !important;
  width: 14rem !important;
}
.tc-search-results {
  display: none;
  position: absolute !important;
  top: calc(100% + .3rem) !important;
  right: 0 !important;
  min-width: 16rem !important;
  max-width: 24rem !important;
  background: var(--tc-bg) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: .5rem !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.15) !important;
  z-index: 1001 !important;
  overflow: hidden !important;
}
.tc-search-results.tc-search-open {
  display: block;
}
.tc-search-result {
  display: block !important;
  padding: .5rem .8rem !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: var(--tc-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--tc-border) !important;
}
.tc-search-result:last-child {
  border-bottom: none !important;
}
.tc-search-result:hover,
.tc-search-result.tc-search-active {
  background: color-mix(in srgb, var(--tc-accent) 12%, transparent) !important;
  color: var(--tc-accent-dark) !important;
}
.tc-search-result mark {
  background: none !important;
  color: var(--tc-accent) !important;
  font-weight: 700 !important;
}
.tc-search-empty {
  padding: .5rem .8rem !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: var(--tc-muted) !important;
}
/* Floating scroll-to-top button -- injected by apply_nav.py right after the
   navbar div. Fixed bottom-right, small and unobtrusive; href="#" is a reliable
   cross-browser scroll-to-top with no JS needed. Harmless on short pages, useful
   on the long reference/equation-list topics. */
.tc-scroll-top {
  position: fixed !important;
  right: 1.5rem !important;
  bottom: 1.5rem !important;
  padding: .4rem .8rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .3rem !important;
  justify-content: center !important;
  background: var(--tc-bg) !important;
  color: var(--tc-muted) !important;
  border: 1px solid var(--tc-border) !important;
  border-radius: 999px !important;
  font-size: .85rem !important;
  font-family: inherit !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.12) !important;
  opacity: .85 !important;
  z-index: 1000 !important;
}
.tc-scroll-top:hover {
  color: var(--tc-accent) !important;
  border-color: var(--tc-accent) !important;
  opacity: 1 !important;
}
html {
  scroll-behavior: smooth !important;
}
.tc-nav-current {
  color: var(--tc-muted) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Every ForeHelp paragraph-style variant used across the 300+ topics -- all normalized
   to the same modern body-text look unless overridden below. */
.Base, .Base1, .base2, .Base3, .Base4, .Base5, .BaseTimes, .BaseEqn,
.BaseList, .BaseList0, .BaseListIcon, .BaseList-1, .BaseList-11, .BaseListMagenta,
.DefinitionList, .PlainText, .NormalWeb, .Normal, .Normal1, .Normal2 {
  font-size: 1rem !important;
  font-family: var(--tc-font) !important;
  color: var(--tc-text) !important;
  margin: 0 0 .85rem 0 !important;
  text-indent: 0 !important;
  max-width: none !important;
}

/* BaseList items are link-list entries (e.g. the Documentation landing page's chapter
   links). Indentation was historically done with inline &nbsp; runs in the source HTML,
   which varied inconsistently (5 vs 10 &nbsp; depending on who/what authored that
   paragraph) and rendered as visibly misaligned list items. apply_fix_link_indent.py
   now strips that inline indentation entirely; this single CSS rule provides the
   visual indent uniformly instead, so every BaseList item lines up regardless of its
   original authoring. */
.BaseList, .BaseList0, .BaseListIcon, .BaseList-1, .BaseList-11, .BaseListMagenta {
  padding-left: 1.5rem !important;
}

/* BaseListIcon specifically: many reference lists (e.g. File_Menu.htm) mix items
   that have a leading toolbar-icon image with items that genuinely never had one
   assigned (real commands with no dedicated toolbar button, like "Save As" or
   "Rename Selected Item" -- not a missing/broken image, confirmed by checking the
   source has no <IMG> tag at all for those lines). Icon-having lines show [icon]
   [text]; icon-less lines showed bare [text] starting flush at the paragraph edge,
   so the text itself started at two different x-positions depending on icon
   presence -- a ragged, inconsistent look. This inserts an invisible 20px spacer
   (matching the forced inline-icon size above) only on lines with no icon, so
   every line's TEXT lines up at the same x-position whether or not it has an
   icon. */
.BaseListIcon:not(:has(> img:first-child)):not(:has(> a:first-child > img:first-child))::before {
  content: "";
  display: inline-block;
  width: 20px;
  margin-right: .2rem;
}

/* Banner / topic title -- ForeHelp emits this as the very first element, no wrapper div */
.BannerBase, .BannerBase1, .BannerBase2, .bannerbase {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  color: var(--tc-heading) !important;
  font-family: var(--tc-font) !important;
  margin: 0 0 .3rem 0 !important;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--tc-accent);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.BannerBase img { border-radius: 4px; }

/* the <HR> ForeHelp places right after the banner */
body > hr:first-of-type { display: none; }

/* Tutorial hierarchy, 3 real levels (was previously one flattened rule --
   BaseHeader/Subhead21/BaseInstr2 all looked identical: same size, weight, color):
     1. .BaseHeader  -- the tutorial SECTION, e.g. "Tutorial 1: Approximating Functions"
     2. .Subhead21   -- the specific OPERATION within that section, e.g. "Starting TableCurve Studio"
     3. .BaseInstr2  -- the literal INSTRUCTION to execute, e.g. "Start TableCurve Studio by selecting..."
   Each level needs to read as a step down from the one above, and the instruction
   level additionally needs to pop visually since it's the line a user is actively
   scanning for while following along -- a callout treatment does that better than
   just another size/color step would. */

/* Level 1: tutorial section heading */
.BaseHeader {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--tc-heading) !important;
  font-family: var(--tc-font) !important;
  margin: 2.2rem 0 .8rem 0 !important;
  text-indent: 0 !important;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--tc-border);
}

/* Level 2: the specific operation -- every other Subhead variant used across the
   non-tutorial reference topics stays on this same rule, unchanged from before.
   .tc-pseudo-head is added by apply_pseudo_hierarchy.py: most topics never actually
   use a real Subhead class for their sub-headings -- the author just hand-bolded a
   plain Base paragraph in red (#ff0000) instead. That script detects the pattern
   (a paragraph whose very first run is bold + red) and tags the <P> with this class
   so it gets the same Level-2 treatment without 500+ manual ForeHelp re-tags. */
.Subhead, .Subhead1, .Subhead2, .subhead3, .Subhead4, .Subhead5, .subhead-1, .Subhead21,
.tc-pseudo-head {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--tc-subhead) !important;
  font-family: var(--tc-font) !important;
  margin: 1.5rem 0 .5rem 0 !important;
  text-indent: 0 !important;
  padding-top: .2rem;
}
/* neutralize the hand-coded inline red/magenta now that the paragraph itself
   carries the right color -- higher specificity than the global span[style*=...]
   rules below, so it wins inside a tagged paragraph without touching them elsewhere. */
.tc-pseudo-head span[style*="ff0000"], .tc-pseudo-head span[style*="ff00ff"] {
  color: inherit !important;
  font-weight: inherit !important;
}

/* Level 3: the actual instruction to execute -- callout block, not just smaller text,
   so it's the thing the eye lands on first while working through a tutorial step.
   .tc-pseudo-instr is the same apply_pseudo_hierarchy.py mechanism as .tc-pseudo-head
   above, for paragraphs that open with bold + magenta (#ff00ff) instead of a real
   Base Instr2 tag. */
.BaseInstr, .BaseInstr2, .Instruction, .instruction1, .tc-pseudo-instr {
  display: block;
  font-size: .95rem !important;
  font-weight: 600 !important;
  color: var(--tc-text) !important;
  font-family: var(--tc-font) !important;
  margin: .5rem 0 1rem 0 !important;
  text-indent: 0 !important;
  padding: .6rem .9rem !important;
  background: color-mix(in srgb, var(--tc-accent) 8%, transparent) !important;
  border-left: 3px solid var(--tc-accent) !important;
  border-radius: 0 6px 6px 0 !important;
}
.tc-pseudo-instr span[style*="ff0000"], .tc-pseudo-instr span[style*="ff00ff"] {
  color: inherit !important;
  font-weight: inherit !important;
}

/* List items (Algorithms, Graph Controls, Partial Derivative surfaces, etc.) */
.Bullet3D, .Bullet5, .bullet51, .List1, .List2, .List3 {
  font-size: 1rem !important;
  font-family: var(--tc-font) !important;
  color: var(--tc-text) !important;
  margin: 0 0 .35rem 1.4rem !important;
  text-indent: -1.1rem !important;
  list-style: none;
}

/* Real hotspot links -- ForeHelp emits plain <A HREF>, sometimes with the .Hyperlink
   character style */
a:link, a:visited, .Hyperlink, .Hyperlink1 {
  color: var(--tc-accent) !important;
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent) !important;
  text-underline-offset: 2px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
a:hover {
  color: var(--tc-accent-dark) !important;
  text-decoration-color: currentColor !important;
}

/* ForeHelp's Make Jump wraps an <A> AROUND the existing text run but does not strip
   that run's own inline color (e.g. the orange #ff8040 pending-hotspot marker) -- so
   the child span's inline style still wins for itself unless overridden here. Force
   any span/font nested inside a real link to the link color, so a term that gets
   linked visibly turns blue even though its own inline color was never removed. */
a[href] span, a[href] font {
  color: var(--tc-accent) !important;
}
a[href]:hover span, a[href]:hover font {
  color: var(--tc-accent-dark) !important;
}

/* Legacy inline-colored SPANs some topics carry directly in the source */
span[style*="ff0000"] { color: #dc2626 !important; }
span[style*="008000"] { color: var(--tc-heading) !important; }

/* The native ForeHelp "blue UI-term callout" (button/field names like OK, SSE, Update)
   is NOT a link -- it just happens to use #0000ff, which reads as identical to the
   real link color above and makes clickable vs. non-clickable text indistinguishable.
   Color should mean exactly one thing (clickable), so these become bold neutral text
   instead. (a[href] span, above, still wins if one of these ever IS wrapped in a real
   link -- higher specificity -- so this is safe either way.) */
span[style*="0000ff"] {
  color: var(--tc-text) !important;
  font-weight: 600;
}

/* Screenshots / dialog captures dropped inline in a body paragraph (the default --
   real screenshots across the build start at 101px wide and go up, with no overlap
   against the icon widths below, so this is the safe fallback for anything not
   explicitly matched as a small icon). */
img {
  display: block;
  /* Capped at a fixed width, not 100% of the (now-wider) body -- a handful of
     screenshots are declared 1000px+ and were ballooning to fill nearly the
     whole page once body max-width went from 860px to 1200px. Capping keeps
     every topic's screenshots a consistent, moderate size regardless of how
     wide any individual image happens to be declared. */
  max-width: min(100%, 780px);
  height: auto;
  margin: 1rem 0;
  border: 1px solid var(--tc-border);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Inline dialog/toolbar icons -- small glyphs ForeHelp drops mid-sentence (e.g. the
   little button/menu icons before "Update", "Save", etc.). Verified against every
   WIDTH value actually used across all 344 compiled topics: real icons run 1-70px;
   real screenshots jump straight to 101px+. The old rule only matched 32/40, so most
   real icons (19, 20, 21, 60px, etc.) fell through to the block rule above and got
   shoved onto their own line, breaking the sentence and reading like a new topic. */
img[width="1"], img[width="2"], img[width="3"], img[width="4"], img[width="16"],
img[width="18"], img[width="19"], img[width="20"], img[width="21"], img[width="23"],
img[width="29"], img[width="30"], img[width="32"], img[width="36"], img[width="40"],
img[width="41"], img[width="49"], img[width="50"], img[width="55"], img[width="60"],
img[width="68"], img[width="70"] {
  display: inline-block !important;
  /* Forced to a uniform 20x20 rendered size rather than trusting each icon
     file's own declared WIDTH/HEIGHT -- the same logical icon (e.g. a
     tree-node glyph) was authored at inconsistent native sizes across topics
     (16px here, 36px there), which looked mismatched sitting next to
     otherwise-identical icons. Every width in this selector list (1-70px)
     gets scaled to the same 20px box, up or down. */
  width: 20px !important;
  max-width: none !important;
  height: 20px !important;
  vertical-align: middle !important;
  margin: 0 .2rem !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}

/* Prev/Next/Home footer nav table ForeHelp appends at the bottom of every topic */
table[width="100%"] {
  margin-top: 2.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid var(--tc-border);
}
table[width="100%"] img { opacity: .55; transition: opacity .15s ease; }
table[width="100%"] a:hover img { opacity: 1; }