/* ============================================================================
 * m5web.css — Media5 standalone-website chrome for the DITA-OT "m5web" transtype.
 *
 * Linked ON TOP OF the DITA-OT base stylesheet (commonltr.css), which m5web still
 * copies+links; rules here win by cascade order. This file is linked ONLY in
 * m5web output (the standalone static site) — never in the m5html5 output that
 * Confluence embeds — so it cannot affect Confluence. The body:not(...) guard is
 * belt-and-suspenders in case the output is ever embedded elsewhere.
 *
 * Palette (navy): banner #0f1120 · accents/headings #0d1b3e · topichead #fdf1f0.
 * Source of truth: tests_site_documentation/EN/style.css "Media5 site chrome".
 *
 * The .m5-* selectors are the wrappers the retired Python pipeline (transform.py)
 * used to inject; they are kept so that layout still works if such markup is ever
 * present, but the native DITA-OT 4.2 elements (header[role=banner],
 * nav.toc[role=navigation], main[role=main], article) are what actually get
 * styled here — verified against generated output.
 * ==========================================================================*/

*, *::before, *::after { box-sizing: border-box; }

body:not(#com-atlassian-confluence) {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #222;
  background: #f0f2f5;
  margin: 0;
  padding: 0;
}

/* ── Top banner ─────────────────────────────────────────────────────────────
   Native html5 emits <header role="banner"> holding the topicmeta lines from
   topic_override.xsl (title / date / product / version / PDF link). Render it as
   the navy Media5 bar. */
header[role="banner"],
.m5-header {
  background: #0f1120;
  color: #fff;
  padding: 10px 24px;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
header[role="banner"] a,
.m5-header a { color: rgba(255,255,255,.8); text-decoration: none; }
header[role="banner"] a:hover,
.m5-header a:hover { color: #fff; text-decoration: underline; }
header[role="banner"] hr { display: none; }

/* topicmeta lines emitted inside the banner by gen-user-header (topic_override.xsl,
   which is shared with Confluence and must not be edited). Keep the document title
   and product name; hide the version, the (empty) date, and the dead "__PDF__"
   download link — __PDF__ is a placeholder only the uti_tool scripts rewrite, so in
   the standalone site it points nowhere. */
header[role="banner"] .topicmeta { display: inline; margin-right: 14px; }
header[role="banner"] .topicmeta.title { font-weight: 700; font-size: 15px; }
header[role="banner"] .topicmeta.product { color: rgba(255,255,255,.6); font-size: 12px; }
header[role="banner"] .topicmeta.date,
header[role="banner"] .topicmeta.version,
header[role="banner"] .topicmeta.pdf { display: none; }

.m5-logo { font-weight: 700; color: #fff !important; }
.m5-sep  { color: rgba(255,255,255,.3); }

/* ── Layout: banner on top, TOC sidebar, content ────────────────────────────
   Real DITA-OT 4.2 markup (confirmed from generated output):
     <header role="banner"> … </header>
     <nav class="toc" role="navigation">
        <ul><li><span>Group label</span><ul><li><a href="#…">Entry</a></li>…
     <main role="main"> <article> … </article> </main>
   i.e. the TOC is a plain nested <ul>/<li>; group labels are <li> > <span>,
   entries are <li> > <a>. There is NO ul.map / li.topichead / li.topicref.

   A flex-wrap row lays the banner across the top (flex-basis 100%) and puts the
   TOC and the content side by side, with the TOC as a sticky left sidebar. */
body:not(#com-atlassian-confluence) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
header[role="banner"], .m5-header { flex: 0 0 100%; }

nav.toc,
nav[role="navigation"] {
  flex: 0 0 300px;
  align-self: flex-start;
  position: sticky;
  top: 44px;                        /* just below the sticky banner */
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid #dce1e9;
  padding: 16px 14px 24px;
}
nav.toc ul { list-style: none; margin: 0; padding-left: 12px; }
nav.toc > ul { padding-left: 0; }
nav.toc li { margin: 0; }
/* Group labels (topichead equivalent) */
nav.toc li > span {
  display: block;
  font-weight: 600;
  color: #0d1b3e;
  font-size: 13px;
  margin-top: 12px;
  padding: 5px 8px;
  background: #fdf1f0;
  border-left: 3px solid #0d1b3e;
  border-radius: 0 3px 3px 0;
}
/* Entries */
nav.toc li > a {
  display: block;
  padding: 4px 8px;
  color: #0d1b3e;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
  border-radius: 3px;
}
nav.toc li > a:hover { background: #f5f8ff; text-decoration: underline; }
/* Current-section indicator, set by the scroll-spy in hdf.xml (inset shadow so
   there is no layout shift as the active item changes). */
nav.toc li > a.active {
  background: #fdf1f0;
  color: #0d1b3e;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #0d1b3e;
}

/* ── Content column ─────────────────────────────────────────────────────────*/
main[role="main"],
.m5-page {
  flex: 1 1 0;
  min-width: 0;
  margin: 24px 32px 40px;
  background: #fff;
  border: 1px solid #dce1e9;
  border-radius: 6px;
  padding: 32px 40px 40px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}

main article { line-height: 1.6; }

/* Narrow screens: stack the TOC above the content instead of a sidebar. */
@media (max-width: 820px) {
  nav.toc,
  nav[role="navigation"] {
    flex: 0 0 100%;
    position: static;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid #dce1e9;
  }
  main[role="main"], .m5-page { flex: 0 0 100%; margin: 16px; }
}

/* Return-to-top separators added by topic_override.xsl between articles */
main hr { border: 0; border-top: 1px solid #e3e7ee; margin: 28px 0 0; }
main a[href="#"] { font-size: 12px; color: #6b7280; text-decoration: none; }
main a[href="#"]:hover { color: #0d1b3e; text-decoration: underline; }

/* ── Headings ───────────────────────────────────────────────────────────────*/
h1.topictitle1 {
  font-size: 20px;
  font-weight: 700;
  color: #0d1b3e;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #0d1b3e;
}
h2.topictitle2 { font-size: 16px; color: #0d1b3e; margin-top: 24px; }
h3.topictitle3 { font-size: 14px; color: #004080; margin-top: 18px; }
.sectiontitle  { color: #0d1b3e; font-size: 14px; font-weight: 600; margin-top: 20px; }

/* ── Tables ─────────────────────────────────────────────────────────────────*/
table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; }
th { background: #0d1b3e; color: #fff; padding: 8px 12px; text-align: left; font-weight: 600; }
td { padding: 6px 12px; border: 1px solid #dce1e9; vertical-align: top; }
tr:nth-child(even) td { background: #f8f9fc; }

/* ── Steps ──────────────────────────────────────────────────────────────────*/
ol.steps { padding-left: 20px; }
ol.steps li { margin-bottom: 10px; line-height: 1.5; }
.ph.cmd { font-weight: 500; }

/* ── Notes ──────────────────────────────────────────────────────────────────*/
.note {
  background: #f0f6ff;
  border-left: 4px solid #0d1b3e;
  padding: 10px 14px;
  margin: 12px 0;
  border-radius: 0 4px 4px 0;
}
.note__title { font-weight: 700; color: #0d1b3e; }

/* ── Code ───────────────────────────────────────────────────────────────────*/
.codeblock, pre {
  background: #f6f8fa;
  border: 1px solid #dce1e9;
  border-radius: 4px;
  padding: 12px 16px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  overflow-x: auto;
  line-height: 1.5;
}
.codeph { font-family: monospace; background: #f0f0f0; padding: 1px 4px; border-radius: 3px; }

/* ── Images ─────────────────────────────────────────────────────────────────*/
img { max-width: 100%; height: auto; border: 1px solid #dce1e9; border-radius: 4px; margin: 8px 0; }

/* ── Prereq / result sections ───────────────────────────────────────────────*/
.prereq, .result {
  background: #f9fafb;
  border: 1px solid #e0e5ee;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13px;
}

/* ── UI labels ──────────────────────────────────────────────────────────────*/
.wintitle { font-weight: 700; }

/* ── Screen / terminal output ───────────────────────────────────────────────*/
.screen {
  background: #1e1e1e; color: #d4d4d4; font-family: monospace; font-size: 12.5px;
  padding: 12px; border-radius: 4px; overflow-x: auto; white-space: pre;
}