/* =============================================================
   VHDLwhiz packages prototype — exploratory styles, not final.
   Goal: validate layout decisions before committing to WP markup.
   ============================================================= */

:root {
  /* Brand palette mirrors the Kadence --global-palette* tokens used on
     vhdlwhiz.com so the prototype reads as part of the site. The dark
     code listing keeps its own VSCode-style theme - those values aren't
     mapped here. */
  --color-bg: #ffffff;            /* palette9 */
  --color-bg-alt: #f5f5f5;        /* palette7 - subtle background */
  --color-bg-meta: #F7FAFC;       /* palette8 - lighter background */
  --color-text: #0d172b;          /* palette3 - strongest text */
  --color-muted: #4A5568;         /* palette5 - medium text */
  --color-border: #e3e6ea;        /* derived neutral, no direct palette match */
  --color-link: #1e90ff;          /* palette1 - brand accent */
  --color-link-hover: #00c9e8;    /* palette2 - hover (matches button hover on the site) */
  --color-accent: #b82105;        /* palette13 - alert */
  --color-tag-2008: #1159af;      /* palette12 - info */
  --color-tag-2019: #6a1b9a;      /* unchanged - distinct from 2008 */

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;

  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --content-max: 920px;
  --sidebar-width: 280px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Anchor links into the page (e.g. #arithmetic-operators in the
   at-a-glance "Operator groups" row, or a deep link from search to a
   specific fold) need to clear the WP sticky header. Without this the
   browser scrolls the target to viewport top, and the sticky header
   covers it. 80px matches Kadence's default header height; tweak via
   the --scroll-offset custom property per site if needed. */
:root { --scroll-offset: 80px; }
h2[id], h3[id],
.code-stack [id],
.overload-group[id],
.section-header-fold[id] {
  scroll-margin-top: var(--scroll-offset);
}

/* Respect the user's reduced-motion preference for scroll-into-view
   and any future animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Belt-and-braces: prevent horizontal page scroll on narrow viewports
   even if a single inner element spuriously exceeds the viewport.
   Per-element overflow is still handled where it makes sense (e.g.
   scrollable code listings via overflow:auto on <pre>). */
html, body { overflow-x: hidden; }

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

/* ---------- mocked WP chrome ---------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text);
}

.site-header nav a {
  margin-left: 18px;
  color: var(--color-muted);
  font-size: 14px;
}

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
}

/* ---------- sidebar (mocked Tocer style) ---------- */

.sidebar {
  border-right: 1px solid var(--color-border);
  padding: 24px 16px 24px 24px;
  font-size: 14px;
  background: var(--color-bg-alt);
  min-height: calc(100vh - 56px);
}

.sidebar h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.sidebar ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.sidebar ul li { padding: 3px 0; }
.sidebar ul ul { padding-left: 14px; margin-bottom: 0; }

.sidebar a { color: var(--color-text); }
.sidebar a.current { font-weight: 600; color: var(--color-link); }

/* ---------- main content ---------- */

main.content {
  padding: 28px 32px 60px;
  max-width: var(--content-max);
  width: 100%;
}

.breadcrumb {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.breadcrumb a { color: var(--color-muted); }

h1.page-title {
  margin: 6px 0 4px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.subtitle {
  font-size: 15px;
  color: var(--color-muted);
  margin-bottom: 28px;
}

h2 {
  margin: 36px 0 12px;
  font-size: 22px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
}

h3 {
  margin: 28px 0 10px;
  font-size: 17px;
  font-weight: 600;
}

p { margin: 0 0 14px; }

/* ---------- declaration / body tab switcher ---------- */

.pkg-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 3px;
  margin: 18px 0 26px;
}

.pkg-tab {
  min-width: 124px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
}

.pkg-tab:hover {
  color: var(--color-text);
  background: #fff;
  text-decoration: none;
}

/* aria-current="page" is the semantic marker for the current page's link,
   so use it as the active-tab selector rather than a separate class. */
.pkg-tab[aria-current="page"] {
  color: var(--color-link);
  background: #fff;
  border-color: rgba(30, 144, 255, 0.25);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

/* ---------- "At a glance" metadata box ---------- */

.at-a-glance {
  background: var(--color-bg-meta);
  border-left: 4px solid var(--color-link);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 22px 0 30px;
  font-size: 14px;
}

.at-a-glance dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 4px;
}

.at-a-glance dt {
  font-weight: 600;
  color: var(--color-muted);
}
.at-a-glance dd {
  margin: 0;
  /* Long file paths and qualified names like ieee/numeric_std-body.vhdl
     are unbreakable tokens that, in a 1fr grid column on a narrow
     viewport, would otherwise dictate the column's min-content width
     and overflow horizontally. Allow them to break anywhere. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- "What's defined here" entity list ----------
   Flat dl below the at-a-glance box, listing the package's types,
   operator categories (with anchor links into the source listing
   below), and key named functions. Same column shape as .at-a-glance
   but unboxed, so it reads as an outline rather than a second card. */
.entity-list {
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 10px;
  font-size: 14px;
}

.entity-list dt {
  font-weight: 600;
  color: var(--color-muted);
}

.entity-list dd {
  margin: 0;
  line-height: 1.65;
}

.entity-list code {
  font-size: 13px;
}

/* ---------- on-page table of contents ---------- */

.page-toc {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 18px 0 28px;
  font-size: 14px;
}

.page-toc strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.page-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
}
.page-toc li { padding: 2px 0; break-inside: avoid; }

/* ---------- code listing ---------- */

/* Two-row toolbar:
     row 1 (toolbar-info)    : file label (left) + group counter (right)
     row 2 (toolbar-actions) : License link (left) + button cluster (right)
   Each row is its own flex container with justify-content: space-between. */
.code-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #2d2d2d;
  color: #ccc;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--font-mono);
}

.code-toolbar .toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* file-label: dim "(declaration, N lines)" suffix in #999, with the
   filename itself in #ddd bold via a <strong> wrapper in the HTML. */
.code-toolbar .file-label {
  color: #999;
}

.code-toolbar .file-label strong {
  color: #ddd;
  font-weight: 600;
}

/* License row: "License:" prefix uses the same bold-#ddd treatment as
   the filename above (same row 1 / row 2 visual hierarchy), and the
   link inside uses the button text color (#ccc, regular weight, no
   underline) so it visually connects to the action buttons sitting
   beside it. The hover brightens to #fff like the buttons. */
.code-toolbar .toolbar-license {
  color: #ddd;
  font-weight: 600;
}

.code-toolbar .toolbar-license a {
  color: #ccc;
  font-weight: normal;
  text-decoration: none;
}

.code-toolbar .toolbar-license a:hover {
  color: #fff;
}

.code-toolbar .toolbar-buttons {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Same visual treatment for <button> and the Download <a>. */
.code-toolbar button,
.code-toolbar .toolbar-button-link {
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 3px 10px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  /* Keep "Plain view", "Expand all", "Collapse all" on one line each.
     The toolbar row wraps as a whole when buttons don't fit, instead of
     each button breaking its own label into two lines. */
  white-space: nowrap;
}

.code-toolbar button:hover,
.code-toolbar .toolbar-button-link:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
}

.code-toolbar button:disabled,
.code-toolbar button:disabled:hover {
  opacity: 0.35;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.04);
  color: #888;
}

pre[class*="language-"] {
  margin: 0 0 24px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 13.5px;
  line-height: 1.5;
  max-height: 720px;
  overflow: auto;
}

pre[class*="language-"]:first-child {
  border-radius: var(--radius);
}

code[class*="language-"] {
  font-family: var(--font-mono);
}

/* ---------- per-line line numbers ----------
   render-core.mjs wraps each source line as:
   .code-line > .line-num + .line-code. Keep the number in a fixed left
   gutter and the highlighted source in a separate preformatted column. */

.code-stack pre[class*="language-"] {
  padding-left: 0;
}

.code-stack pre[class*="language-"] > code[class*="language-"] {
  display: block;
  white-space: normal;
}

/* Gutter width is sized for 4-digit line numbers (max 9999). The largest
   IEEE 1076 package source in the corpus is FLOAT_PKG at ~5500 lines, so
   4 digits comfortably covers every package. Bump this if a future
   corpus ever requires 5-digit line numbers.
   Line numbers live in ::before pseudo-elements (CSS counter) rather than
   DOM text nodes. Pseudo-element content is excluded from crawler text
   extraction, so crawlers see clean code without interleaved digits. */
.code-stack .code-line {
  display: grid;
  grid-template-columns: 3.65em max-content;
  min-width: max-content;
  line-height: 1.5;
  counter-increment: source-line;
}

.code-stack .code-line::before {
  content: counter(source-line);
  color: #6f7680;
  font-size: 12px;
  font-family: var(--font-mono);
  text-align: right;
  padding: 0 0.7em 0 0.55em;
  user-select: none;
  pointer-events: none;
}

.code-stack .line-code {
  white-space: pre;
}

/* ---------- VSCode "Modern Dark" theme override ----------
   Replaces Prism Tomorrow's defaults with VSCode Modern Dark editor
   colors so the listing visually matches what users see when opening
   the .vhdl file locally. Scoped to .code-stack so we don't restyle
   any other Prism blocks that might end up on the page. */

.code-stack pre[class*="language-"],
.code-stack code[class*="language-"] {
  background: #1F1F1F;
  color: #CCCCCC;
  text-shadow: none;
}

.code-stack .token.comment,
.code-stack .token.prolog,
.code-stack .token.cdata        { color: #6A9955; font-style: normal; }

.code-stack .token.punctuation  { color: #CCCCCC; }

.code-stack .token.keyword,
.code-stack .token.boolean,
.code-stack .token.attribute,
.code-stack .token.attr-name    { color: #569CD6; font-weight: normal; }

.code-stack .token.string,
.code-stack .token.char,
.code-stack .token.attr-value   { color: #CE9178; }

.code-stack .token.number,
.code-stack .token.constant     { color: #B5CEA8; }

.code-stack .token.operator,
.code-stack .token.entity,
.code-stack .token.url          { color: #D4D4D4; background: transparent; }

.code-stack .token.function,
.code-stack .token.class-name   { color: #DCDCAA; }

.code-stack .token.variable     { color: #9CDCFE; }

.code-stack .token.builtin,
.code-stack .token.tag,
.code-stack .token.symbol       { color: #4EC9B0; }

.code-stack .token.important,
.code-stack .token.bold         { font-weight: bold; }

.code-stack .token.italic       { font-style: italic; }

/* Revision-tag highlighting overrides comment color when present.
   (No annotated source ships with the prototype yet.) */
.token.comment.revision-2008 { color: var(--color-tag-2008) !important; font-weight: 600; }
.token.comment.revision-2019 { color: var(--color-tag-2019) !important; font-weight: 600; }

.loading-stub {
  padding: 18px;
  font-style: italic;
  background: #2d2d2d;
  color: #aaa;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ---------- callouts ---------- */

.callout {
  background: #fff8e1;
  border-left: 4px solid #f59f00;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 20px 0;
  font-size: 14px;
}

.callout.info {
  background: #e7f5ff;
  border-left-color: var(--color-link);
}

/* ---------- code stack with collapsible overload groups ---------- */

.code-stack {
  /* Bottom rounding moved to .code-footer (which always follows). */
  border-radius: 0;
  overflow: hidden;
  background: #1F1F1F;
}

/* Footer toolbar that always follows .code-stack. Mirrors the top
   toolbar's visual treatment but contains only License + Download so
   users at the bottom of a long listing don't have to scroll up to see
   the license or grab the source. Reuses the .code-toolbar class for
   bg/padding/typography; .code-footer overrides the corner rounding. */
.code-footer {
  border-radius: 0 0 var(--radius) var(--radius);
  margin-bottom: 24px;
}

/* Footer has only License + Download. With the default space-between
   layout the License sits far-left and Download far-right with a big
   empty middle. Use a 3-column grid (1fr | License | 1fr-right-aligned)
   so License is geometrically centered while Download stays anchored
   to the right edge. */
.code-footer .toolbar-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.code-footer .toolbar-license {
  grid-column: 2;
}

.code-footer .toolbar-buttons {
  grid-column: 3;
  justify-self: end;
}

.code-stack pre[class*="language-"] {
  margin: 0;
  border-radius: 0;
  max-height: none;
  font-size: 13.5px;
}

.code-stack pre[class*="language-"] + pre[class*="language-"] {
  border-top: 1px solid #3a3a3a;
}

.overload-group {
  background: #1f1f1f;
  border-top: 1px solid #444;
}

.overload-group:last-child {
  border-bottom: 1px solid #444;
}

.overload-group summary {
  padding: 10px 14px 10px 36px;
  cursor: pointer;
  list-style: none;
  color: #d6d6d6;
  font-family: var(--font-sans);
  font-size: 13.5px;
  user-select: none;
  position: relative;
  background: linear-gradient(to right, #2a2a2a, #232323);
  display: flex;
  align-items: center;
  gap: 10px;
}

.overload-group summary::-webkit-details-marker { display: none; }

.overload-group summary::before {
  content: "\25B6"; /* triangle */
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #888;
  transition: transform 0.15s;
}

.overload-group[open] > summary::before {
  transform: translateY(-50%) rotate(90deg);
}

.overload-group summary:hover {
  background: #333;
  color: #fff;
}

.overload-group summary:hover::before {
  color: #ddd;
}

.overload-group[open] > summary {
  border-bottom: 1px solid #444;
  background: #252525;
}

/* Keyboard focus indicator. The custom triangle replaces the native
   <details> marker, so we need an explicit outline for Tab navigation. */
.overload-group summary:focus-visible,
.section-header-fold summary:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: -2px;
}

.overload-group summary code {
  background: rgba(255, 217, 102, 0.15);
  color: #ffd966;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.overload-group summary .summary-text {
  flex: 1;
  min-width: 0;
}

/* The summary text and section-header titles are <h3> elements (for SEO
   outline + per-fold deep-linking), but visually they should match the
   surrounding summary line. Reset browser defaults. */
.overload-group summary h3,
.section-header-fold summary h3 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.overload-group summary .summary-signature {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: #d6d6d6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overload-group summary .kind-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
  letter-spacing: 0.04em;
  color: #fff;
  flex-shrink: 0;
}

.overload-group summary .kind-function { background: #2e7d32; }
.overload-group summary .kind-procedure { background: #6a1b9a; }
.overload-group summary .kind-alias { background: #00838f; }
.overload-group summary .kind-type { background: #c87000; }
.overload-group summary .kind-subtype { background: #b35a00; }
.overload-group summary .kind-constant { background: #1565c0; }
.overload-group summary .kind-header { background: #555a66; }

.overload-group summary .summary-meta {
  color: #888;
  font-size: 13.5px;
  font-weight: normal;
  margin-left: 4px;
  /* Treat counts like "7 functions" as one atomic unit: when there's
     not enough room at the end of the line, the whole phrase wraps to
     the next line instead of splitting "7" from "functions". */
  white-space: nowrap;
}

.overload-group summary .summary-variant {
  color: #ffd966;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
}

/* ---------- section-header collapsible (centered title) ---------- */

.section-header-fold {
  background: #1a1a1a;
  border-top: 1px solid #444;
}

.section-header-fold + .overload-group,
.overload-group + .section-header-fold {
  border-top: 1px solid #444;
}

.section-header-fold summary {
  text-align: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: #c8c8d0;
  letter-spacing: 0.02em;
  user-select: none;
  position: relative;
  background: linear-gradient(to right, transparent, #2a2a2a 30%, #2a2a2a 70%, transparent);
}

.section-header-fold summary::-webkit-details-marker { display: none; }

/* Disclosure triangle, mirroring the .overload-group affordance so it's
   obvious the section header is clickable. Centered title stays centered
   because the triangle is absolutely positioned. */
.section-header-fold summary::before {
  content: "\25B6";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #888;
  transition: transform 0.15s;
}

.section-header-fold[open] > summary::before {
  transform: translateY(-50%) rotate(90deg);
}

.section-header-fold summary:hover {
  color: #fff;
  background: linear-gradient(to right, transparent, #353535 30%, #353535 70%, transparent);
}

.section-header-fold summary:hover::before {
  color: #ddd;
}

.section-header-fold[open] > summary {
  border-bottom: 1px solid #444;
}

.section-header-fold pre[class*="language-"] {
  margin: 0;
  border-radius: 0;
}

/* ---------- non-collapsible section label ----------
   Used as a fallback for synthesized Id-prefix section headers that have
   no preceding `-- ====` divider line in the source to wrap. Looks like
   the summary of .section-header-fold but is a plain <div> so we don't
   advertise an expand affordance over empty content. */
.section-label {
  background: linear-gradient(to right, transparent, #2a2a2a 30%, #2a2a2a 70%, transparent);
  border-top: 1px solid #444;
  padding: 14px 16px;
  text-align: center;
}

.section-label h3.section-header-title {
  color: #c8c8d0;
  letter-spacing: 0.02em;
  font-size: 14px;
  font-weight: 600;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

.section-label + .overload-group {
  border-top: none;
}

.overload-group summary .line-range {
  color: #888;
  font-size: 12px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.code-toolbar .group-counter {
  color: #888;
  font-size: 11px;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  /* minmax(0, 1fr) instead of plain 1fr lets the column shrink below
     its intrinsic min-content width when the viewport is narrower than
     a long unbreakable token (e.g. a 26-char file path in <code>).
     Plain 1fr is minmax(auto, 1fr) and can overflow on mobile. */
  .layout,
  .layout.no-right-rail {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Sidebar is mocked WP chrome (will be replaced by a Tocer-style WP
     plugin). On mobile it dominates 17 links of vertical space above
     the actual content; hide so the prototype is testable. */
  .sidebar { display: none; }
  main.content {
    padding: 20px 16px 40px;
  }
  .page-toc ul { columns: 1; }

  /* Site header has 4 nav links with margin-left:18px each plus
     padding:12px 24px. On <=400px viewports that's wider than the
     screen with the brand. Allow wrap and tighten margins so the
     mocked chrome doesn't force horizontal page scroll. */
  .site-header { flex-wrap: wrap; padding: 10px 16px; gap: 6px 0; }
  .site-header nav a { margin-left: 12px; }
  .site-header nav a:first-child { margin-left: 0; }

  /* Page title wraps on narrow viewports; smaller font reads better. */
  h1.page-title { font-size: 24px; }

  /* Two tabs at min-width:124px each barely fit a 320px viewport
     (2*124 + gaps + padding ~259px vs 288px content area). Drop the
     min so tabs comfortably fit even at 320px. */
  .pkg-tab { min-width: 96px; padding: 8px 14px; }

  /* Long identifier lists in the "What's defined here" section: allow
     unbreakable tokens to break so they don't dictate column width. */
  .entity-list dd { overflow-wrap: anywhere; word-break: break-word; }

  /* Code toolbar: file-label + group-counter in a flex row with no
     wrap can collide. Allow each row to wrap, and let the long file
     label break across lines if the viewport demands it. */
  .code-toolbar .toolbar-row { flex-wrap: wrap; }
  .code-toolbar .file-label { overflow-wrap: anywhere; word-break: break-word; }
  /* Footer toolbar uses a 3-col grid (1fr|License|1fr); on mobile
     collapse to a single flex row that wraps. */
  .code-footer .toolbar-row { display: flex; }
  .code-footer .toolbar-license,
  .code-footer .toolbar-buttons { grid-column: auto; justify-self: auto; }

  /* Bigger tap targets per Apple/Material guidance (~44/48px). */
  .code-toolbar button,
  .code-toolbar .toolbar-button-link { padding: 8px 14px; font-size: 13px; }
  .overload-group summary { padding-top: 13px; padding-bottom: 13px; }
}

/* On phones the 4 action-toolbar buttons can't fit on one row no matter
   how tight the padding (their labels alone total ~300px). The natural
   wrap leaves an awkward 3+1. Force a balanced 2x2 grid below 480px:
   each button takes half the row width. */
@media (max-width: 480px) {
  .code-toolbar .toolbar-actions .toolbar-buttons {
    width: 100%;
    flex-wrap: wrap;
  }
  .code-toolbar .toolbar-actions .toolbar-buttons > * {
    flex: 1 0 calc(50% - 3px);
    text-align: center;
  }
}

/* WordPress themes (Kadence and others) style button:focus / :active
   with a bright accent. On our dark toolbar that reads as "stuck on"
   after a mouse click. Reset plain :focus to the default appearance
   so a clicked button looks neutral once the click ends. The
   :focus-visible rule below restores a keyboard-only focus ring on
   top, since :focus-visible cascades over plain :focus. */
.code-toolbar button:focus,
.code-toolbar .toolbar-button-link:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #ccc;
  outline: none;
}
.code-toolbar button:focus:hover,
.code-toolbar .toolbar-button-link:focus:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Brief visual response while the button is being pressed (mouse
   down). :active only applies during the press itself, so it gives
   a clear flash on click without the "stuck on" feeling that the
   muted :focus rule above is meant to avoid. The 1px translate
   simulates a physical press. */
.code-toolbar button:active,
.code-toolbar .toolbar-button-link:active {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: translateY(1px);
}

/* Toolbar buttons sit on a dark background; the default UA focus ring
   is faint there. Promote it to a brand-colored ring when keyboard
   focus is detected. */
.code-toolbar button:focus-visible,
.code-toolbar .toolbar-button-link:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* ---------- print styles ----------
   When a user prints a reference page (still common for VHDL devs who
   want a hard copy on the desk), the dark editor theme burns ink and
   the closed folds hide the very content the page is meant to convey.
   For print: drop the chrome, force every fold open, and switch the
   listing to a light, ink-friendly token theme. */
@media print {
  .site-header,
  .sidebar,
  .pkg-tabs,
  .code-toolbar .toolbar-buttons,
  .code-footer { display: none; }

  .layout { display: block; }
  main.content { padding: 0; max-width: none; width: 100%; }

  /* Force every <details> open and hide the disclosure triangle. */
  details > *:not(summary) { display: revert; }
  .overload-group summary::before,
  .section-header-fold summary::before { display: none; }
  .overload-group summary,
  .section-header-fold summary { cursor: default; }

  /* Avoid splitting a function group across pages where possible. */
  .overload-group,
  .section-header-fold { break-inside: avoid; }

  /* Light, ink-friendly code theme. */
  .code-stack,
  .code-stack pre[class*="language-"],
  .code-stack code[class*="language-"] {
    background: #ffffff !important;
    color: #1f1f1f !important;
    text-shadow: none !important;
  }
  .code-stack .code-line::before { color: #888 !important; }
  .code-stack .token.comment        { color: #1b6e1b !important; }
  .code-stack .token.keyword        { color: #00008b !important; font-weight: 600 !important; }
  .code-stack .token.string,
  .code-stack .token.char            { color: #8b1f1f !important; }
  .code-stack .token.number,
  .code-stack .token.constant       { color: #054a05 !important; }
  .code-stack .token.function,
  .code-stack .token.class-name     { color: #5a2d04 !important; }
  .code-stack .token.builtin,
  .code-stack .token.tag,
  .code-stack .token.symbol         { color: #1a4d4d !important; }

  .code-toolbar {
    background: #f0f0f0 !important;
    color: #000 !important;
  }
  .code-toolbar .file-label,
  .code-toolbar .file-label strong,
  .code-toolbar .toolbar-license,
  .code-toolbar .toolbar-license a,
  .code-toolbar .group-counter { color: #000 !important; }

  .overload-group summary,
  .section-header-fold summary {
    background: #f5f5f5 !important;
    color: #000 !important;
  }

  a { color: inherit; text-decoration: none; }
}