/* Small release-level overrides kept separate so the mobile WebView and site
   always receive the same final layout behavior. */
.video-recommended .eyebrow{color:#bcaeff}

/* One continuous desktop header. The sidebar column and the header band share
   a single chrome surface, and the sidebar divider starts below the header,
   so the two columns no longer meet in a visible step at the top corner. */
:root{
  --app-header-height:86px;
  /* Where the header's 1px baseline ends: the sidebar surface and the column
     divider both start here so the baseline runs edge to edge. */
  --app-header-edge:calc(var(--app-header-height) + 1px);
  --app-chrome-surface:#18171e;
  --app-header-surface:var(--app-chrome-surface);
  --app-sidebar-surface:var(--app-chrome-surface);
  --app-header-shadow:0 8px 26px #00000018;
}
:root[data-theme="light"]{
  --app-chrome-surface:#fff;
  --app-header-shadow:0 8px 26px #3b2c6a09;
}
/* The header surface is fixed, so its contents have to travel with it —
   otherwise the breadcrumb and the stats scroll out from under the bar. */
.topbar{
  position:sticky;
  top:0;
  z-index:21;
  height:var(--app-header-height);
  background:transparent;
  border-bottom:0;
  box-shadow:none;
}
.shell::before{
  content:"";
  position:fixed;
  z-index:19;
  inset:0 0 auto;
  height:var(--app-header-height);
  background:var(--app-header-surface);
  border-bottom:1px solid var(--line);
  box-shadow:var(--app-header-shadow);
  pointer-events:none;
}
/* When the server drops, a fixed banner takes the top 46px and the topbar is
   pushed down to clear it; the header surface moves with it. */
html.server-offline .shell::before,html.server-offline .topbar{top:46px}
.sidebar{
  isolation:isolate;
  border-left:0;
  background:linear-gradient(180deg,transparent 0 var(--app-header-edge),var(--app-sidebar-surface) var(--app-header-edge) 100%);
  box-shadow:none;
}
.sidebar::before{
  display:none;
}
/* The column divider is a pseudo-element instead of a border so it starts
   under the header line; a border would run the full height and cut the
   header band in two. */
.sidebar::after{
  content:"";
  position:absolute;
  z-index:0;
  top:var(--app-header-edge);
  bottom:0;
  left:0;
  width:1px;
  background:var(--line);
  pointer-events:none;
}
.sidebar>*{position:relative;z-index:1}
html[dir="ltr"] .sidebar{border-right:0;box-shadow:none}
html[dir="ltr"] .sidebar::after{left:auto;right:0}
html[data-theme="light"] .topbar{background:transparent;box-shadow:none}
html[data-theme="light"] .sidebar{
  background:linear-gradient(180deg,transparent 0 var(--app-header-edge),var(--app-sidebar-surface) var(--app-header-edge) 100%);
  box-shadow:none;
}

/* The phone chrome follows the phone LAYOUT, not the pointer type. A coarse
   pointer alone used to switch these off, so a touchscreen desktop lost the
   unified header while keeping the desktop sidebar rail. */
@media(max-width:720px){
  .shell::before{display:none}
  .topbar{position:relative;top:auto;height:70px}
  .topbar,html[data-theme="light"] .topbar{background:var(--ks13);border-bottom:1px solid var(--line)}
  .sidebar{isolation:auto;background:var(--ks51);box-shadow:none}
  html[data-theme="light"] .sidebar{background:var(--ks51);box-shadow:none}
  .sidebar::before,.sidebar::after{display:none}
}
/* The native clients get the bottom-nav layout from mobile.css under this same
   condition, so their chrome has to match it. */
@media(max-device-width:720px),(hover:none) and (pointer:coarse){
  html[data-client="mobile"] .nav button[data-page="video"]{display:none!important}
  html[data-client="mobile"] .shell::before{display:none}
  html[data-client="mobile"] .topbar{position:relative;top:auto}
  html[data-client="mobile"] .topbar,html[data-theme="light"][data-client="mobile"] .topbar{background:var(--ks13);border-bottom:1px solid var(--line)}
  html[data-client="mobile"] .sidebar{isolation:auto;background:var(--ks51);box-shadow:none}
  html[data-theme="light"][data-client="mobile"] .sidebar{background:var(--ks51);box-shadow:none}
  html[data-client="mobile"] .sidebar::before,html[data-client="mobile"] .sidebar::after{display:none}
}

/* The reason and the period label are two separate lines: inline they ran into
   each other ("התאמה ידניתשבועי"). */
.xp-adjustment span small{display:block;margin-top:2px}

/* Light mode is plain white, so the page background itself carries no tint and
   the chrome separates by a hairline instead of a shadow. */
:root[data-theme="light"]{--app-header-shadow:none}
html[data-theme="light"] .shell::before{border-bottom:1px solid var(--line)}

/* Professional courses. The lesson row is the one from the English path, but a
   course is an ordered outline rather than a winding journey, so the connecting
   curve and the zigzag indent come off. */
.track-progress{font-weight:800;color:var(--purple);white-space:nowrap}
.track-lessons{padding:14px 0 2px}
.track-lessons .lesson-step,.track-lessons .lesson-step:nth-child(2n){padding:6px 10px;min-height:86px}
.track-lessons .lesson-step:before{display:none}
.track-card .subheading{margin:6px 0 0;max-width:640px}
.track-option{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.track-option:last-of-type{border-bottom:0}
.track-option input{margin-top:3px;width:18px;height:18px;accent-color:var(--purple)}
.track-option small{display:block;color:var(--muted);font-size:12px;margin-top:2px}