/* Extension Pack help refresh.
   Linked in topics.pas.html right after the project's Custom CSS, so it comes after hnd.content.css
   and the template's accordion styles.
   Most rules hook onto the inline styles HelpNDoc writes (the heading table colours,
   the callout stripe, the bullet spans), so they don't depend on rvtsNN numbering.
   The rule marked [rvts] does, and needs checking after a rebuild.
   Pasted colours, backgrounds and fonts inside hnd.content.css are cleaned after each build by
   cleanContentStyles() in extPack_documentationEditor.py, see HelpAuthoring\HelpStyle\PLAYBOOK.md. */

:root {
  --ep-ink: #0f4a7a;
  --ep-text: #26323d;
  --ep-muted: #4f7699;
  --ep-accent: #74b3e3;
  --ep-accent-strong: #2f86cf;
  --ep-link: #1a6db5;
  --ep-tint: #d9ebf8;
  --ep-line: #a9cfec;
  --ep-divider: #bcd9f0;
  /* Accordions go from a stronger blue on the left to a light blue on the right. Unlike the
     headings they never fade to white, so they stay a solid box */
  --ep-acc-label: linear-gradient(to right, #b3d6f2, #e2f0fb);
  --ep-acc-hover: linear-gradient(to right, #c2def5, #edf6fd);
  --ep-acc-open: linear-gradient(to right, #a2cdef, #d3e8f8);
  --ep-acc-body: #dfedf6;
  /* Heading bars and accordions share the original 80% width so their right edges line up */
  --ep-block-width: 80%;
}

#topic-content .main-content {
  color: var(--ep-text);
}
/* The generated Python API listing on ClassMethodOverview (div.container) keeps its own look.
   These are the styles extPack_APIHtmlBuilder.py writes into the head of its html, which don't make it
   into the HelpNDoc topic. They're limited to the listing, and the hr and link rules below skip it.
   A few properties also undo Bootstrap, which has its own .container and .label classes. */
#topic-content .main-content .container {
  width: auto;
  max-width: 1200px;
  margin: 0;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* The builder puts font and colour on body, where HelpNDoc's own .main-content rule used to win,
     so the listing showed in the page's Arial and black. Kept that way on purpose. */
  line-height: 1.6;
  color: #000;
}
.main-content .container .class-header {
  background: linear-gradient(135deg, #5dade2 0%, #3498db 100%);
  color: white;
  padding: 15px 20px;
  border-radius: 6px;
  margin: 30px 0 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.main-content .container .class-header h3 {
  margin: 0;
  font-size: 1.4em;
  font-weight: 600;
}
.main-content .container .class-description {
  background-color: #f8f9fa;
  border-left: 4px solid #3498db;
  padding: 15px 20px;
  margin: 15px 0;
  border-radius: 0 4px 4px 0;
}
.main-content .container .method-container {
  border: 1px solid #e9ecef;
  border-radius: 6px;
  margin: 20px 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.main-content .container .method-header {
  background-color: #495057;
  color: white !important;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 1.1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-content .container .method-header .method-info {
  flex: 1;
}
.main-content .container .method-header .method-badge {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.main-content .container .method-header .method-badge .circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}
.main-content .container .method-header .method-badge .label {
  padding: 0;
  font-size: 0.8em;
  font-weight: bold;
}
.main-content .container .method-header .method-badge.gui .circle { background-color: #28a745; }
.main-content .container .method-header .method-badge.gui .label { color: #28a745; }
.main-content .container .method-header .method-badge.system .circle { background-color: #dc3545; }
.main-content .container .method-header .method-badge.system .label { color: #dc3545; }
.main-content .container code {
  background-color: #f1f3f4;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
}
.main-content .container .method-header code {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: white !important;
}
.main-content .container .method-header span {
  color: #a8dadc !important;
}
.main-content .container .method-content {
  padding: 20px;
  background-color: white;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
  line-height: 1.5;
}
.main-content .container .section-title {
  color: #495057;
  font-weight: 600;
  font-size: 1em;
  margin: 15px 0 8px 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #dee2e6;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.main-content .container .deprecation-warning {
  background-color: #f8d7da;
  border: 2px solid #dc3545;
  color: #721c24;
  padding: 15px;
  border-radius: 6px;
  margin: 10px 0;
  font-weight: bold;
}
#topic-content .main-content p {
  line-height: 1.6;
}

/* Section headings: the blue table bars become headings with a brand blue underline.
   Two slightly different blues are in use (#74b3e3 and #7bb8dd), both are covered here. */
.main-content table[style*="#74b3e3"],
.main-content table[style*="#7bb8dd"] {
  width: var(--ep-block-width) !important;
  background: linear-gradient(to right, #e1effa, rgba(225, 239, 250, 0) 75%) !important;
  border-spacing: 0 !important;
  border-bottom: 3px solid var(--ep-accent) !important;
  margin-top: 18px;
}
.main-content table[style*="#74b3e3"] td,
.main-content table[style*="#7bb8dd"] td {
  width: auto !important;
  height: auto !important;
  padding: 6px 10px 6px 10px !important;
}
.main-content table[style*="#74b3e3"] span,
.main-content table[style*="#7bb8dd"] span {
  font-size: 21px;
  font-weight: 600;
  color: var(--ep-ink);
}
/* Byline next to the title ("by ...") */
.main-content table[style*="#74b3e3"] span + span,
.main-content table[style*="#7bb8dd"] span + span {
  font-size: 13px;
  font-weight: 400;
  color: var(--ep-muted);
  margin-left: 6px;
}

/* Page title: the first heading bar on the page.
   A few topics start with an empty line or a bookmark paragraph before the title,
   the "p:first-child + div" variants catch those too. */
.main-content > div:first-child table[style*="#74b3e3"],
.main-content > div:first-child table[style*="#7bb8dd"],
.main-content > p:first-child + div table[style*="#74b3e3"],
.main-content > p:first-child + div table[style*="#7bb8dd"] {
  background: none !important;
  border-bottom: 0 !important;
  margin-top: 4px;
}
.main-content > div:first-child table[style*="#74b3e3"] td,
.main-content > div:first-child table[style*="#7bb8dd"] td,
.main-content > p:first-child + div table[style*="#74b3e3"] td,
.main-content > p:first-child + div table[style*="#7bb8dd"] td {
  padding: 0 0 6px 0 !important;
}
.main-content > div:first-child table[style*="#74b3e3"] span:first-child,
.main-content > div:first-child table[style*="#7bb8dd"] span:first-child,
.main-content > p:first-child + div table[style*="#74b3e3"] span:first-child,
.main-content > p:first-child + div table[style*="#7bb8dd"] span:first-child {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Sub-headings: the light blue #c7e1f3 bars keep a blue panel and get a stronger left accent */
.main-content table[style*="#c7e1f3"] {
  width: var(--ep-block-width) !important;
  background: var(--ep-tint) !important;
  border-spacing: 0 !important;
  border-left: 4px solid var(--ep-accent-strong) !important;
  border-radius: 0 4px 4px 0;
}
.main-content table[style*="#c7e1f3"] td {
  width: auto !important;
  padding: 6px 12px !important;
}
.main-content table[style*="#c7e1f3"] span {
  font-size: 16px;
  font-weight: 600;
  color: var(--ep-ink);
}

/* [rvts] Tab group label ("MAIN TAB") as a small caps label instead of big underlined text */
.main-content span.rvts204 {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--ep-muted);
}

/* Property bullets: one size, brand colour */
.main-content span[style*="Symbola"] {
  font-size: 12pt !important;
  color: var(--ep-accent-strong) !important;
}
/* Property names: bold is enough, the underline made them look like links */
.main-content span[style*="Symbola"] ~ span {
  text-decoration: none;
}
/* The other list markers follow the same colour. HelpNDoc writes every marker as an inline-block span
   with "min-width: 24px", which is what these hook onto. Second level "o" bullets (Courier) stay a bit smaller,
   the older Tahoma bullets match the Symbola ones, numbers take the heading colour. */
.main-content span[style*="Courier New"][style*="min-width: 24px"] {
  font-size: 10pt !important;
  color: var(--ep-accent-strong) !important;
}
.main-content span[style*="Tahoma"][style*="min-width: 24px"] {
  font-size: 12pt !important;
  color: var(--ep-accent-strong) !important;
}
.main-content span[style*="'Segoe UI', 'Helvetica'"][style*="min-width: 24px"] {
  font-weight: 600;
  color: var(--ep-ink) !important;
}

/* Bitmap bullets (green/orange/blue arrows, the page icon with its magenta box) become one flat marker.
   The image keeps its box but shows only its background, clipped to a small triangle.
   PNG bullets are the Extension Pack logo bullets and stay as they are. */
.main-content span[style*="width : 24px"] > img[src$=".bmp"] {
  box-sizing: content-box;
  width: 0 !important;
  height: 0 !important;
  padding: 4px 3px;
  background: var(--ep-accent-strong);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  vertical-align: middle;
}

/* Links */
.main-content a[href]:not(.container *) {
  color: var(--ep-link);
  text-decoration: underline;
  text-decoration-color: rgba(26, 109, 181, 0.45);
  text-underline-offset: 3px;
}
.main-content a[href]:not(.container *):hover {
  text-decoration-color: currentColor;
}

/* Callouts: grey table + yellow/red stripe becomes a light panel with the stripe kept as the accent.
   The box fits its text (never wider than the page) instead of the fixed pixel width HelpNDoc writes. */
.main-content table[style*="#e2e2e2"] {
  max-width: 100%;
  background: #f5f9fc !important;
  border-spacing: 0 !important;
  border-radius: 6px;
}
.main-content table[style*="#e2e2e2"] td {
  height: auto !important;
}
.main-content table[style*="#e2e2e2"] td:first-child[style*="background-color"] {
  width: 4px !important;
  padding: 0 !important;
  font-size: 0;
  border-radius: 6px 0 0 6px;
}
/* Callouts with an icon instead of a stripe ("Nodegraph only", info) keep their icon */
.main-content table[style*="#e2e2e2"] td:first-child:not([style*="background-color"]) {
  width: auto !important;
  padding: 10px 0 10px 16px !important;
  vertical-align: middle;
}
.main-content table[style*="#e2e2e2"] td + td {
  width: auto !important;
  padding: 10px 16px !important;
}
.main-content table[style*="#e2e2e2"] td + td span {
  font-size: 14px;
  font-style: normal;
  color: var(--ep-text);
}
.main-content td[style*="#ffcc00"] { background: #f0b400 !important; }
.main-content td[style*="#ff0000"] { background: #d94141 !important; }
.main-content td[style*="#3366ff"] { background: var(--ep-accent-strong) !important; }

/* Data tables (the hotkey lists): the grey table with its dark grey header row and grey stripes
   becomes a light table in the page colours. Matched on "background-color: ..." because
   #c0c0c0 is also used as a plain border colour elsewhere. */
.main-content table[style*="background-color: #d0d0d0"] {
  background: transparent !important;
  border-spacing: 0 !important;
  border-collapse: collapse;
}
.main-content table[style*="background-color: #d0d0d0"] td {
  padding: 6px 10px !important;
  background: #fff;
  border-bottom: 1px solid var(--ep-divider);
}
.main-content td[style*="background-color: #808080"] {
  background: var(--ep-tint) !important;
  border-bottom: 2px solid var(--ep-accent) !important;
}
.main-content td[style*="background-color: #808080"] span {
  color: var(--ep-ink);
}
/* #c0c0c0 is also the fill of some icon + text tables (Colorspace, UI Overview), which get the same padding */
.main-content td[style*="background-color: #c0c0c0"] {
  padding: 6px 10px !important;
  background: #f3f8fc !important;
}

/* Empty paragraphs (one <br/> and nothing else) are how HelpNDoc makes vertical space.
   Runs of them are cut down to one, and they're dropped at the top of the page and at the top and bottom
   of callouts and accordion bodies, where padding already gives room. Table cells in general are left alone
   because some layout tables use empty lines to line text up with an image.
   Each rule stands alone so a browser without :has() skips only that rule. */
.main-content > p:first-child:has(> span:only-child > br:only-child) {
  display: none;
}
.main-content > p:has(> span:only-child > br:only-child) + p:has(> span:only-child > br:only-child) {
  display: none;
}
#myaccordion .content > p:has(> span:only-child > br:only-child) + p:has(> span:only-child > br:only-child) {
  display: none;
}
#myaccordion .content > p:first-child:has(> span:only-child > br:only-child) {
  display: none;
}
#myaccordion .content > p:last-child:has(> span:only-child > br:only-child) {
  display: none;
}
.main-content table[style*="#e2e2e2"] td > p:has(> span:only-child > br:only-child) + p:has(> span:only-child > br:only-child) {
  display: none;
}
.main-content table[style*="#e2e2e2"] td > p:first-child:has(> span:only-child > br:only-child) {
  display: none;
}
.main-content table[style*="#e2e2e2"] td > p:last-child:has(> span:only-child > br:only-child) {
  display: none;
}

/* Divider lines */
.main-content hr:not(.container *) {
  height: 1px !important;
  background: var(--ep-divider) !important;
  margin: 16px 0;
}

/* Screenshots */
.main-content img[src$=".png"],
.main-content img[src$=".gif"],
.main-content img[src$=".jpg"] {
  border-radius: 4px;
}

/* Videos are written with a fixed 1024px width, this keeps them inside narrower accordions */
.main-content video {
  max-width: 100%;
  height: auto;
}

/* Accordions: original width and colours, rounded, chevron that points right when closed and down when open.
   Labels are matched without their class because the older release notes (2.0, 2.1, 6) use
   hand-written accordions whose labels have no accordion-label class. */
#myaccordion > label,
#myaccordion > label:hover {
  width: var(--ep-block-width);
  margin: 10px 0 0 0;
  padding: 10px 60px 10px 16px;
  background: var(--ep-acc-label);
  border: 1px solid var(--ep-line);
  border-radius: 6px;
  box-shadow: none;
  color: #000;
  font-weight: 600;
  /* Same face and size as the body text, the labels used to fall back to the 10pt Arial base style */
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11pt;
}
#myaccordion > label:hover {
  background: var(--ep-acc-hover);
}
#myaccordion input:checked + label {
  border-radius: 6px 6px 0 0;
  background: var(--ep-acc-open);
}
#myaccordion .content {
  width: var(--ep-block-width);
  margin: 0;
  padding: 14px 20px;
  background: var(--ep-acc-body);
  border: 1px solid var(--ep-line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: none;
}
#myaccordion .accordion-label .accordion-arrow::before {
  content: "" !important;
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ep-accent-strong);
  border-bottom: 2px solid var(--ep-accent-strong);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
#myaccordion input.hidecontent:checked + .accordion-label .accordion-arrow::before {
  transform: rotate(45deg);
}

/* Generated table of contents ([TOC] tokens) and page navigation ([NAVIGATION]), written by
   buildPageTokens() in extPack_documentationEditor.py.
   These used to sit in a style block at the bottom of each page. HelpNDoc's sidebar only swaps the topic
   part of a page in, so that block never came along and the box showed unstyled until a reload */
/* A contents box in the text is as wide as its longest entry and no wider, so it reads as a box
   rather than taking the column over. width=xx% on the token overrides all three of these */
.ep-toc {
  box-sizing: border-box;
  width: fit-content;
  max-width: 50%;
  min-width: 240px;
  border: 1px solid var(--ep-line);
  border-radius: 6px;
  background: var(--ep-tint);
  padding: 10px 16px 12px 16px;
  margin: 0 0 18px 0;
}
/* Heading bars, accordions and callouts are all 80% wide, so the floating box takes the strip
   left over beside them. Sized in per cent for that reason: a box in pixels stops fitting at some
   window width, and everything below it then drops underneath the box instead of running past it */
.ep-toc-float {
  float: right;
  width: 18%;
  min-width: 0;
  max-width: none;
  margin: 0 0 16px 1.5%;
}
/* The SCROLL variant: the box rides along instead of scrolling away with the text. It stops at
   the bottom of the topic, and a list longer than the window scrolls inside itself */
.ep-toc-scroll {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.ep-toc-title {
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ep-ink);
  /* Enough of a gap that the heading reads as a label on the box rather than the first entry */
  margin-bottom: 12px;
}
.ep-toc-list { list-style: none; margin: 0; padding: 0; }
/* The bullet is drawn rather than a list marker, so it keeps its place under an entry that wraps
   onto a second line and doesn't depend on a font having the character */
.ep-toc-list li { position: relative; padding-left: 15px; margin: 3px 0; line-height: 1.35; }
.ep-toc-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.52em;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ep-accent-strong);
}
.ep-toc-list a { color: var(--ep-link); text-decoration: none; }
.ep-toc-list a:hover { text-decoration: underline; }
/* A top level entry is the heading a group of sections sits under, so it carries some weight */
.ep-toc-list li.ep-toc-level-1 { font-weight: 600; margin-top: 8px; }
.ep-toc-list li.ep-toc-level-1:first-child { margin-top: 0; }
/* The indent is on the margin, the padding above belongs to the bullet. Every one of these names
   the list as well as the item: `.ep-toc-list li` above is the more specific selector otherwise,
   and its margin shorthand would put the indent straight back to zero */
.ep-toc-list li.ep-toc-level-2 { margin-left: 18px; }
.ep-toc-list li.ep-toc-level-3 { margin-left: 36px; }
.ep-toc-list li.ep-toc-level-4 { margin-left: 54px; }
.ep-toc-list li.ep-toc-level-5 { margin-left: 72px; }
.ep-toc-list li.ep-toc-level-6 { margin-left: 90px; }
/* Sections below the top level get a hollow bullet, so the depth reads even where the indent is
   hard to see. Same reason for naming the list here */
.ep-toc-list li.ep-toc-level-2::before, .ep-toc-list li.ep-toc-level-3::before,
.ep-toc-list li.ep-toc-level-4::before, .ep-toc-list li.ep-toc-level-5::before,
.ep-toc-list li.ep-toc-level-6::before {
  background: transparent;
  border: 1px solid var(--ep-accent);
}

.ep-nav {
  clear: both;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  width: var(--ep-block-width);
  margin: 30px 0 10px 0;
  padding-top: 10px;
  border-top: 1px solid var(--ep-divider);
}
.ep-nav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ep-link);
  text-decoration: none;
}
.ep-nav a:hover { text-decoration: underline; }
.ep-nav-next { margin-left: auto; text-align: right; }
/* Real arrows, written as a CSS escape so the character never has to survive the build's own
   encoding. They nudge outwards on hover to show which way the link goes */
.ep-nav a::before, .ep-nav a::after {
  font-size: 1.25em;
  line-height: 1;
  color: var(--ep-accent-strong);
  transition: transform 0.15s ease;
}
.ep-nav-prev::before { content: "\2190"; }
.ep-nav-next::after { content: "\2192"; }
.ep-nav-prev:hover::before { transform: translateX(-3px); }
.ep-nav-next:hover::after { transform: translateX(3px); }

/* A narrow window leaves the floating box too small to read, so it goes back into the text flow,
   and every box uses the width it is given */
@media screen and (max-width: 900px) {
  .ep-toc { width: auto; max-width: none; min-width: 0; }
  .ep-toc-float { float: none; width: auto; margin: 0 0 18px 0; }
  .ep-nav { width: auto; }
}