/* Scroll Sites Custom CSS */
/* Deployed via: K15t Scroll Sites theme editor > Custom CSS */
/* ----------------------------------------------------------------- */

.toc-column-wrapper {
  display: none;
}

@media screen and (min-width: 1280px) {
  .toc-column-wrapper {
    display: block;
  }
}

.external-links-box {
  border: 1px solid var(--_border-color);
  border-radius: var(--K15t-radius-small);
  margin-bottom: 0.5rem;
  padding-bottom: 1rem;
}

.external-links-box h2 {
  font: var(--K15t-font-body-small-strong);
  padding-inline: 16px;
  padding-block: 16px 0;
}

.external-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.external-links-list li {
  padding-inline-start: 16px;
  margin-block: 6px;
}

.external-links-box .toc-link {
  color: var(--_foreground-color);
}

/* Image / XML tab widget */
.rw-tab-widget {
  border: 1px solid var(--K15t-border-neutral-strong);
  border-radius: var(--K15t-radius-small);
  background-color: var(--K15t-surface-raised);
  margin-block: 1rlh;
  overflow: hidden;
}

.rw-tab-nav {
  display: flex;
  border-bottom: 1px solid var(--K15t-border-neutral-strong);
}

.rw-tab-btn {
  padding: 6px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  cursor: pointer;
  font: var(--K15t-font-body-small-strong);
  color: inherit;
  opacity: 0.55;
  transition: opacity 100ms;
}

.rw-tab-btn:hover { opacity: 0.8; }

.rw-tab-btn.active {
  border-bottom-color: var(--K15t-border-brand-bold, var(--theme-header-text-color, #000c34));
  opacity: 1;
}

.rw-tab-pane { display: none; padding: 12px 16px; position: relative; }
.rw-tab-pane.active { display: block; }

/* Belt-and-suspenders for the class-stripping in custom.js: even if Confluence's
   Fabric editor re-applies a data-align onto the source image's K15t component
   and the JS strip misses it, force the image back to a plain centered block
   inside the tab pane. !important beats K15t's own alignment rules, which
   otherwise outrank this selector's specificity. */
.rw-tab-pane .block-image {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.rw-tab-pane img { max-width: 100%; height: auto; display: block; }
.rw-tab-pane pre { margin: 0; overflow-x: auto; }

/* === Home page (confluence-content-id 84279538): hide auto-generated title === */
[data-confluence-content-id="84279538"] article#content > header {
  display: none;
}

/* === Home page: equal-height panels and per-panel brand colours === */

/* Stretch all panels to the height of the tallest in their row */
.layout-cell {
  display: flex;
  flex-direction: column;
}
.layout-cell [data-component="panel"] {
  flex: 1;
}

/* Coloured title bar — only applied when JS sets data-panel-color */
[data-component="panel"][data-panel-color] {
  border: 2px solid var(--panel-color);
  padding: 0;          /* zero panel padding so title bar can reach the edges */
  overflow: hidden;    /* clip title bar background to the panel's border-radius */
}
[data-component="panel"][data-panel-color] .panel-meta {
  background-color: var(--panel-color);
  padding: 10px 16px;
  margin: 0;
}
[data-component="panel"][data-panel-color] .panel-title {
  font-weight: bold;
  color: #ffffff;
}
[data-component="panel"][data-panel-color] .panel-content {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}
[data-component="panel"][data-panel-color] .panel-content > p:last-child {
  margin-top: auto;
  padding-top: 8px;
}

/* Dark mode: give the tile body text the theme foreground back.

   K15t's own dark-mode rule for a custom-appearance panel (styles.css, @layer base) is

     :root[data-color-scheme=dark] [data-component=panel][data-appearance=custom]
       { --text-color: var(--K15t-color-neutral-25) }

   and their neutral scale INVERTS in dark mode: --K15t-color-neutral-25 is #F7F7F9 in
   light mode but hsl(220, 18%, 5%) in dark. That rule assumes a custom panel also
   carries the author's own light background. Ours never do — every tile colours the
   border and the title bar and leaves the panel macro's `bgColor` parameter empty — so
   the panel background follows the theme and goes dark while the text is forced
   near-black. Result: unreadable body copy in all 67 tiles across the 12 pages that
   have them, from the moment dark mode arrived.

   `var(--K15t-foreground)` is exactly what the panel's own base rule falls back to when
   --text-color is unset, so this restores the default rather than inventing a colour.
   The :not() keeps K15t's behaviour for any panel that does set its own background,
   where dark text is the right answer — verified 2026-08-17 that no panel on the live
   site sets one. Specificity is not what makes this win: our sheet is unlayered, and an
   unlayered declaration beats anything in @layer base regardless. */
:root[data-color-scheme="dark"] [data-component="panel"][data-appearance="custom"]:not([style*="--bg-color"]) {
  --text-color: var(--K15t-foreground);
}

/* Fallback title bar — for a page whose panel title parameters a Confluence
   editor save has stripped. In that state K15t emits no .panel-meta and no
   .panel-title, and the title is a bold paragraph at the top of the body
   instead; custom.js sets data-panel-title-fallback when it had to read the
   title from there. These rules rebuild the bar out of that paragraph, undoing
   .panel-content's padding so the background reaches the panel edges.

   This is damage limitation, not a fix: repair the page with
   `python dev/fix_erw_panel_tiles.py --apply`. */
[data-component="panel"][data-panel-color][data-panel-title-fallback] .panel-content > p:first-child {
  background-color: var(--panel-color);
  color: #ffffff;
  font-weight: bold;
  padding: 10px 16px;
  margin: -12px -16px 12px;
}
[data-component="panel"][data-panel-color][data-panel-title-fallback] .panel-content > p:first-child strong {
  color: #ffffff;
}

/* Planned release tiles — a release that is scheduled but not out yet. Set by JS
   on any panel whose title ends "(planned)". These tiles carry no link, because
   there is no page behind them, so they need to read as "coming" rather than as
   a broken tile. */
[data-component="panel"][data-panel-planned] {
  opacity: 0.62;
}
[data-component="panel"][data-panel-planned] .panel-title {
  font-weight: normal;
}