/* UI5 Web Components adoption overrides (U3 pilot) */

/* The ui5-shellbar provides its own layout. */
ui5-shellbar { display: block; }

/* Logo sizing — the SVG has only a viewBox, no intrinsic width/height,
   so it collapses to 0 inside the shellbar's flex layout without this. */
ui5-shellbar img[slot="logo"] {
  height: 1.5rem;
  width: auto;
}

/* User popover (#sb-user-popover) — internal layout */
#sb-user-popover::part(content) {
  padding: 0;
}

#sb-user-popover .user-popover__content {
  padding: 1rem 1.25rem;
  min-width: 14rem;
}

#sb-user-popover .user-popover__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0.5rem;
}

#sb-user-popover .user-popover__name {
  font-weight: 600;
  font-size: 1rem;
  margin-top: 0.75rem;
  color: var(--sapTextColor);
}

#sb-user-popover .user-popover__email {
  font-size: 0.875rem;
  color: var(--sapContent_LabelColor);
  margin-top: 0.25rem;
}

#sb-user-popover .user-popover__separator {
  border: none;
  border-top: 1px solid var(--sapGroup_TitleBorderColor);
  margin: 0.75rem 0;
}

#sb-user-popover .user-popover__link {
  display: block;
  padding: 0.5rem 0;
  color: var(--sapTextColor);
  text-decoration: none;
  font-size: 0.875rem;
}

#sb-user-popover .user-popover__link:hover {
  color: var(--sapLinkColor);
}

#sb-user-popover #logout-btn {
  margin-top: 0.75rem;
  width: 100%;
}

/* Share popover (#sb-share-popover) — internal layout */
#sb-share-popover .share-popover__body {
  padding: 0.75rem 1rem;
  min-width: 22rem;
  max-width: 26rem;
}

#sb-share-popover .share-popover__section + .share-popover__section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sapGroup_ContentBorderColor);
}

#sb-share-popover .share-popover__heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sapContent_LabelColor);
  margin-bottom: 0.25rem;
}

#sb-share-popover .share-popover__row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

#sb-share-popover #share-url-input {
  flex: 1 1 auto;
  min-width: 0;
}

#sb-share-popover .share-popover__status {
  font-size: 0.75rem;
  color: var(--sapPositiveColor, #107e3e);
  margin-top: 0.5rem;
  min-height: 1rem;
}

#sb-share-popover .share-popover__list {
  margin: 0 -1rem;
}

/* Tutorial-page banners (U5) — stack with consistent spacing */
.tutorial-banners {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.tutorial-banners:empty {
  display: none;
}
.tutorial-banners ui5-message-strip {
  width: 100%;
}

/* Sticky prev/next footer bar */
.tutorial-stepnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--sapPageFooter_Background, #fff);
  border-top: 1px solid var(--sapPageFooter_BorderColor, #d9d9d9);
  box-shadow: var(--sapContent_Shadow0, 0 -1px 4px rgba(0, 0, 0, 0.06));
}
.tutorial-stepnav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tutorial-stepnav__slot {
  flex: 1 1 0;
  display: flex;
}
.tutorial-stepnav__slot--next {
  justify-content: flex-end;
}

/* Reserve space for the sticky bar so footer/joule don't sit underneath it */
body:has(.tutorial-stepnav) {
  padding-bottom: 4rem;
}

/* U8: codetabs — render the syntax-highlighted block flush against the tab
   header so the code reads as the primary content, not a card-in-a-card. */
ui5-tabcontainer.codetabs {
  display: block;
  margin: 1rem 0;
  border: 1px solid var(--sapGroup_ContentBorderColor, #e5e5ea);
  border-radius: 0.5rem;
  overflow: hidden;
}
ui5-tabcontainer.codetabs ui5-tab .highlight,
ui5-tabcontainer.codetabs ui5-tab pre {
  margin: 0;
  border-radius: 0;
  border: none;
  background: transparent;
}
ui5-tabcontainer.codetabs ui5-tab pre code {
  display: block;
  padding: 0.75rem 1rem;
  font-family: var(--sapFontMonospaceFamily, "Source Code Pro", monospace);
  font-size: 0.85rem;
  line-height: 1.55;
  overflow-x: auto;
}

/* U9: glossary terms — subtle dotted underline so readers know the term is
   interactive without it shouting like a link. Matches Horizon's "informative"
   tone (cool teal under-stroke), inherits text color so it never fights body copy. */
.glossary-term {
  border-bottom: 1px dotted var(--sapInformativeElementColor, #0a6ed1);
  cursor: help;
  /* Slightly larger hit target without changing line height. */
  padding-bottom: 1px;
}
.glossary-term:focus {
  outline: 2px solid var(--sapContent_FocusColor, #0a6ed1);
  outline-offset: 2px;
  border-radius: 2px;
}

ui5-popover.glossary-popover::part(content) {
  padding: 0.5rem 0.75rem;
}
.glossary-popover__body {
  max-width: 22rem;
  font-family: var(--sapFontFamily);
  color: var(--sapTextColor);
}
.glossary-popover__term {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
  color: var(--sapTitleColor, var(--sapTextColor));
}
.glossary-popover__definition {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--sapContent_LabelColor, var(--sapTextColor));
}
.glossary-popover__link {
  font-size: 0.8125rem;
  color: var(--sapLinkColor, #0a6ed1);
  text-decoration: none;
}
.glossary-popover__link:hover {
  text-decoration: underline;
}

/* U10: post-completion CTA strip. Sits below the last step. */
ui5-message-strip.tutorial-completion-cta {
  display: block;
  margin-top: 1.5rem;
}
ui5-message-strip.tutorial-completion-cta a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* U11: top-of-viewport reading-progress bar. Tracks scroll through
   .tutorial-steps. Sits above the sticky op-header (z:30) but below modals. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.reading-progress[data-active] { opacity: 1; }
.reading-progress[hidden] { display: none; }
.reading-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg,
    var(--sapBrandColor, #0070f2) 0%,
    var(--sapList_HighlightColor, #1b90ff) 100%);
  /* Short transition smooths small scroll deltas without lagging behind
     fast scrolls (rAF-throttled callers cap update rate to ~60fps). */
  transition: width 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress,
  .reading-progress::before { transition: none; }
}

/* U12: focus/reader mode. Toggle via shellbar #sb-reader or 'f' shortcut.
   Pre-paint script in head.html re-applies html[data-reader="on"] before
   first render to avoid chrome flash on reload. Scoped to tutorial pages
   per improvements.md U12 tradeoff ("Start with the tutorial reader,
   expand later"). The toggle is hidden on non-tutorial pages so the button
   never appears with no visual effect. */
html:not([data-page-kind="tutorial"]) ui5-shellbar-item#sb-reader {
  display: none;
}

/* Hide chrome that fights focus: side rail, anchor tabs, wizard step indicator,
   header chips, breadcrumbs, share row, sticky prev/next bar, footer, joule. */
html[data-reader="on"][data-page-kind="tutorial"] .tutorial-right-col,
html[data-reader="on"][data-page-kind="tutorial"] .op-anchor,
html[data-reader="on"][data-page-kind="tutorial"] .op-header__chips,
html[data-reader="on"][data-page-kind="tutorial"] .op-wizard-wrap,
html[data-reader="on"][data-page-kind="tutorial"] .breadcrumbs,
html[data-reader="on"][data-page-kind="tutorial"] .feedback-share,
html[data-reader="on"][data-page-kind="tutorial"] .step-controls,
html[data-reader="on"][data-page-kind="tutorial"] .tutorial-stepnav,
html[data-reader="on"][data-page-kind="tutorial"] footer,
html[data-reader="on"][data-page-kind="tutorial"] #joule-panel,
html[data-reader="on"][data-page-kind="tutorial"] #joule-starters {
  display: none !important;
}
/* Reserve-space rule for the (now-hidden) sticky stepnav: drop the body padding. */
html[data-reader="on"][data-page-kind="tutorial"] body:has(.tutorial-stepnav) {
  padding-bottom: 0;
}

/* Collapse the two-col grid into a single, reading-width column.
   ~70ch at 1.0625rem body text; centered via op-page's existing margin: auto.
   minmax(0, 1fr) (not bare 1fr) is critical: without an explicit 0 min-width,
   the grid track inherits min-content sizing, so wide intrinsic elements
   inside an expanded step (long <pre> lines, unbroken URLs, tables) push
   the column past .op-page's max-width and overflow the reading pane. */
html[data-reader="on"][data-page-kind="tutorial"] .op-twocol {
  grid-template-columns: minmax(0, 1fr);
}
html[data-reader="on"][data-page-kind="tutorial"] .op-page {
  max-width: 760px;
}
html[data-reader="on"][data-page-kind="tutorial"] .op-body {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Looser, larger type. The step body inherits this via cascade; leaving
   .step-header at default keeps section anchors at their normal weight. */
html[data-reader="on"][data-page-kind="tutorial"] .tutorial-step {
  font-size: 1.0625rem;
  line-height: 1.65;
}
html[data-reader="on"][data-page-kind="tutorial"] .tutorial-step p,
html[data-reader="on"][data-page-kind="tutorial"] .tutorial-step li {
  line-height: 1.7;
}

/* Dim the shellbar + sticky op-header so they stop competing for attention.
   Hover/focus restores them so the exit toggle and progress ring stay
   one gesture away — important for keyboard users who tab into the bar. */
html[data-reader="on"][data-page-kind="tutorial"] ui5-shellbar,
html[data-reader="on"][data-page-kind="tutorial"] .op-header {
  opacity: 0.4;
  transition: opacity 200ms ease;
}
html[data-reader="on"][data-page-kind="tutorial"] ui5-shellbar:hover,
html[data-reader="on"][data-page-kind="tutorial"] ui5-shellbar:focus-within,
html[data-reader="on"][data-page-kind="tutorial"] .op-header:hover,
html[data-reader="on"][data-page-kind="tutorial"] .op-header:focus-within {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  html[data-reader="on"][data-page-kind="tutorial"] ui5-shellbar,
  html[data-reader="on"][data-page-kind="tutorial"] .op-header { transition: none; }
}

/* Dark-mode fix for shellbar popover items (PR #575 + revised 2026-06-23).
   ORIGINAL approach used `var(--sapList_TextColor)`. That was wrong:
   `--sapList_TextColor` is an INSIDE-the-shadow-DOM UI5 list token, set on
   ui5-list's shadow root, not on the document root. At document scope the
   variable resolved to its LIGHT-theme default (#131e29 ≈ near-black) even
   when `data-theme="dark"` was active. Result: dark-on-dark text — i.e.
   the same bug it was trying to fix. (Confirmed live via Playwright +
   getComputedStyle on /me/ in dark mode.)
   `--sapTextColor` IS document-rooted (set by the theme switch on <html>)
   and resolves to #eaecee in dark + #32363a in light — exactly what we
   want. Same fix, correct variable. */
#sb-nav-popover ui5-li,
#sb-share-popover ui5-li,
#sb-user-popover ui5-li {
  color: var(--sapTextColor);
}

/* Shellbar nav-menu group separators (header.html sb-nav-popover).
   Visually divide the verb-pages group from the apps group, and apps
   from the auth-gated tail. Mirrors the user-popover__separator idiom
   in the sibling popover. aria-hidden on the <hr> so screen-readers
   don't announce a list-item-shaped pause. */
#sb-nav-popover .nav-list__separator {
  border: none;
  border-top: 1px solid var(--sapGroup_TitleBorderColor);
  margin: 0.25rem 0;
}