/* Shared, stage-only report-family shell. The general Joomla menu and
   calculator output remain untouched; only report routes load this file. */
body.sl-stage-personal-report {
  --sl-bg-deep: var(--sl-yoo-background, #0d0c0b);
  --sl-surface-raised: #1c1815;
  --sl-surface-warm: #211b17;
  --sl-line-strong: rgba(224, 183, 149, .32);
  --sl-copper-bright: var(--sl-yoo-link, #e0b795);
  /* Main YOOtheme row + report-family row + room above the anchored heading. */
  --sl-report-reader-offset: 188px;
}
html[data-theme="light"] body.sl-stage-personal-report {
  --sl-bg-deep: #fff;
  --sl-surface-raised: #f8f5f1;
  --sl-surface-warm: #f7eee7;
  --sl-line-strong: #d7c4b5;
  --sl-copper-bright: #895536;
}
/* The family row owns the divider; a second header border leaves a thin
   strip below the navigation even when its margin is zero. */
body.sl-stage-personal-report .sl-stage-header--report { border-bottom: 0; }
/* Keep both report navigation rows on the same column as the report itself.
   The general site header is wider by default, which makes its menu drift
   away from the reader at laptop widths. */
body.sl-stage-personal-report .sl-stage-report-family-inner { width: min(calc(100% - 80px), 1180px); }
@media (min-width: 1181px) {
  body.sl-stage-personal-report .sl-stage-header-inner { width: min(calc(100% - 80px), 1180px); }
  body.sl-stage-personal-report .sl-stage-main-inner { min-height: 78px; gap: 16px; }
  body.sl-stage-personal-report .sl-stage-primary .uk-navbar-nav { gap: 16px; }
  body.sl-stage-personal-report .sl-stage-primary .uk-navbar-nav > li > a { font-size: 15px; }
}
/* The component's legacy .navevo gives report navigation an outer margin.
   This shared family bar is a separate header element, not that component menu. */
body.sl-stage-personal-report .sl-stage-report-family { margin: 0; padding: 0; border-inline: 0; border-radius: 0; background: var(--sl-bg-deep); box-shadow: none; }
body.sl-stage-personal-report .sl-stage-report-family { border-top: 1px solid var(--sl-line); border-bottom: 1px solid var(--sl-line-strong); }
/* On desktop the report begins at the family-menu divider. The family menu
   is hidden on phones, where the report keeps its normal section spacing. */
@media (min-width: 901px) {
  body.sl-stage-personal-report #tm-main { padding-top: 0; }
}
body.sl-stage-personal-report .sl-stage-report-family-inner { display: flex; min-height: 58px; align-items: stretch; gap: 4px; margin-inline: auto; }
body.sl-stage-personal-report .sl-stage-report-family a { position: relative; display: inline-flex; min-height: 58px; align-items: center; gap: 9px; padding: 0 17px; color: var(--sl-muted); font: 400 14px/1.3 var(--sl-yoo-font-body, Arsenal, Arial, sans-serif); text-decoration: none; white-space: nowrap; }
body.sl-stage-personal-report .sl-stage-report-family a:last-child { margin-left: auto; }
body.sl-stage-personal-report .sl-stage-report-family a:hover,
body.sl-stage-personal-report .sl-stage-report-family a:focus-visible,
body.sl-stage-personal-report .sl-stage-report-family a.is-active { color: var(--sl-text); background: var(--sl-surface); }
body.sl-stage-personal-report .sl-stage-report-family a.is-active::after { position: absolute; right: 17px; bottom: -1px; left: 17px; height: 2px; background: var(--sl-copper-bright); content: ""; }
body.sl-stage-personal-report .sl-stage-report-family a:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: -3px; }
body.sl-stage-personal-report .sl-stage-report-family img { display: block; flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; }
body.sl-stage-personal-report:not(.sl-stage-period-report) #tm-main .navevo { display: none; }
body.sl-stage-personal-report #tm-main .uk-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
body.sl-stage-personal-report #tm-main .uk-breadcrumb > li[hidden] { display: none; }
body.sl-stage-personal-report #tm-main .uk-breadcrumb > li,
body.sl-stage-personal-report #tm-main .uk-breadcrumb > li :is(a, span) { color: var(--sl-muted); font: 400 14px/1.4 var(--sl-yoo-font-body, Arsenal, Arial, sans-serif); text-transform: none; letter-spacing: normal; }
body.sl-stage-personal-report #tm-main .uk-breadcrumb > li :is(a, span):hover { color: var(--sl-text); }
body.sl-stage-personal-report #tm-main > .uk-container > .uk-margin-medium-bottom { margin-bottom: 24px !important; }
html[data-theme="light"] body.sl-stage-personal-report .sl-stage-report-family { background: #fff; }
@media (max-width: 920px) {
  body.sl-stage-personal-report { --sl-report-reader-offset: 168px; }
  body.sl-stage-personal-report .sl-stage-main-inner { min-height: 64px; }
  body.sl-stage-personal-report .sl-stage-report-family-inner { width: calc(100% - 20px); min-height: 52px; overflow-x: auto; scrollbar-width: none; }
  body.sl-stage-personal-report .sl-stage-report-family-inner::-webkit-scrollbar { display: none; }
  body.sl-stage-personal-report .sl-stage-report-family a { min-height: 52px; padding-inline: 11px; font-size: 12px; }
  body.sl-stage-personal-report .sl-stage-report-family img { width: 22px; height: 22px; }
}
/* At phone/tablet widths the fixed four-item navigation already provides
   these routes. Avoid a second, horizontally clipped menu above the report. */
@media (max-width: 900px) {
  /* Native anchor/focus/scroll-into-view must reserve the fixed report bar,
     not only add space after the last document content. */
  html:has(body.sl-stage-personal-report) { scroll-padding-block: 96px calc(96px + env(safe-area-inset-bottom)); }
  body.sl-stage-personal-report .sl-stage-report-family { display: none; }
  body.sl-stage-personal-report { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  /* The bottom report bar is hidden while the global menu is open, so the
     drawer must cover that space too instead of exposing the report below. */
  body.sl-stage-personal-report .sl-stage-primary { max-height: none; }
  body.sl-stage-personal-report .sl-report-mobile-nav { padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  body.sl-stage-personal-report .sl-report-mobile-nav a { min-width: 0; min-height: 62px; font-size: 11px; line-height: 1.12; text-align: center; }
  body.sl-stage-personal-report .sl-report-mobile-nav img { width: 23px; height: 23px; }
  body.sl-stage-personal-report .sl-report-mobile-nav a span { display: flex; min-height: 2.24em; max-width: 88px; align-items: center; justify-content: center; }
  body.sl-stage-period-report .report-navigation_kind_period { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.sl-stage-period-report .report-navigation_kind_period a { font-size: 13px; line-height: 1.2; }
}
@media (max-width: 600px) {
  body.sl-stage-personal-report .sl-stage-report-family a:last-child { margin-left: 0; }
  body.sl-stage-personal-report .sl-stage-report-family a { padding-inline: 9px; }
}

/* Enlarge the original wrapping label, not the native checkbox or its state. */
body.sl-stage-personal-report #tm-main .jlslogin #login-form label[for="modlgn-remember"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
}

/* Saved Sade Sati uses its native component markup, not the Start reader.
   Presentation only: keep the original cards, text, controls and UIkit states. */
body.sl-stage-period-report #tm-main .saved-period-reader__heading {
  margin-block: 40px 20px;
  color: var(--sl-text);
  font: 400 clamp(28px, 3vw, 36px)/1.25 var(--sl-yoo-font-heading, Arsenal, Arial, sans-serif);
  text-align: left;
  scroll-margin-top: var(--sl-report-reader-offset);
}
body.sl-stage-period-report #tm-main .saved-period-reader__heading:focus-visible {
  outline: 2px solid var(--sl-focus);
  outline-offset: 4px;
}
body.sl-stage-period-report #tm-main .pservices {
  padding-block: 32px;
}
body.sl-stage-period-report #tm-main .pservices > h1 {
  margin: 0 0 24px;
  color: var(--sl-text);
  font: 400 clamp(32px, 4vw, 48px)/1.15 var(--sl-yoo-font-heading, Arsenal, Arial, sans-serif);
  text-align: left;
}
body.sl-stage-period-report #tm-main .uk-card:not(.uk-modal .uk-card):not(.report-period) {
  background: var(--sl-surface);
  color: var(--sl-text);
  border: 1px solid var(--sl-line-strong);
  border-radius: 16px;
  box-shadow: none;
}
body.sl-stage-period-report #tm-main .uk-card-body {
  padding: 28px;
  font: 400 18px/1.65 var(--sl-yoo-font-body, Arsenal, Arial, sans-serif);
  overflow-wrap: anywhere;
}
/* Introduction is a full-width section, but the prose has a reader's measure. */
body.sl-stage-period-report #tm-main .pservices + [uk-grid] .uk-card-body > [uk-grid],
body.sl-stage-period-report #tm-main .saved-period-reader + [uk-grid] .uk-card-body > [uk-grid] {
  max-width: 75ch;
  margin-inline: auto;
}
body.sl-stage-period-report #tm-main .uk-card-header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--sl-line-strong);
  background: var(--sl-surface-warm);
  border-radius: 15px 15px 0 0;
}
body.sl-stage-period-report #tm-main .uk-card-header h4 {
  margin: 0;
  color: var(--sl-text);
  font: 400 26px/1.25 var(--sl-yoo-font-heading, Arsenal, Arial, sans-serif);
}
body.sl-stage-period-report #tm-main h3:not(.uk-modal h3) {
  margin-block: 40px 20px;
  color: var(--sl-text);
  font: 400 clamp(26px, 3vw, 36px)/1.25 var(--sl-yoo-font-heading, Arsenal, Arial, sans-serif);
  text-align: left;
}
/* Date headings belong to the compact period row, not the prose rhythm. */
body.sl-stage-period-report #tm-main .report-period__layout .report-period__heading {
  margin: 0;
}
body.sl-stage-period-report #tm-main .uk-alert {
  padding: 24px 40px 24px 24px;
  background: var(--sl-surface-warm);
  color: var(--sl-text);
  border-radius: 12px;
}
body.sl-stage-period-report #tm-main .uk-alert h3 {
  margin-top: 0;
}
body.sl-stage-period-report #tm-main .uk-card-body > .uk-button {
  min-height: 48px;
  padding: 12px 20px;
  color: var(--sl-button-ink);
  background: var(--sl-accent);
  font: 400 18px/1.35 var(--sl-yoo-font-body, Arsenal, Arial, sans-serif);
  border-radius: 999px;
  white-space: normal;
}
body.sl-stage-period-report #tm-main .uk-card-body > .uk-button:focus-visible {
  outline: 2px solid var(--sl-focus);
  outline-offset: 4px;
}
@media (max-width: 600px) {
  body.sl-stage-period-report #tm-main .uk-card-body { padding: 20px; font-size: 16px; }
  body.sl-stage-period-report #tm-main .uk-card-header { padding: 20px; }
  /* Native mobile heading rules use !important; override only this reader role. */
  body.sl-stage-period-report #tm-main h3:not(.uk-modal h3) { font-size: 26px !important; font-weight: 400 !important; }
  body.sl-stage-period-report #tm-main .pservices > h1 { font-size: 32px !important; font-weight: 400 !important; }
}