/*
  The phone as an app (LD2-I, LD2 §4 #8): a bottom tab bar (Views/Shared/_TabBar.cshtml, Looks/LearnTabs.cs) and a
  slim top bar beside it. Only on phone widths (760 px and below); larger screens keep the places in the top bar.
  Lessons, quizzes and tests (focus) have no tab bar and do not load this file, so nothing covers their own bar.
  --ln-tabs-h is the bar's height without the iPhone's home-indicator area (env(safe-area-inset-bottom)); the page
  ends above both, and Noor's corner (kids.css) and the kids site's toast sit above them too.
  Adults: frosted paper, the world's light along the edge, the current tab in a soft lamp of the world's colour.
  Teens: a flat plane with a hard edge, the current tab a sticker in violet and cyan with an offset shadow.
  Kids: a chunky toy shelf, each tab a round button in its own colour that presses down, 64 px and more to tap.
  The lamp is a named view transition: it glides to the next tab as the page changes (none with less motion).
*/

.ln-tabs, .ln-menu-places { display: none; }

@media (max-width: 760px) {
  :root:has(.ln-tabs) { --ln-tabs-h: 62px; }
  :root:has(.ln--kid > .ln-tabs) { --ln-tabs-h: 80px; }

  /* ---------- The page ends above the bar (and the home indicator) ---------- */
  .ln:has(> .ln-tabs) { box-sizing: border-box; padding-bottom: calc(var(--ln-tabs-h) + env(safe-area-inset-bottom)); }
  .ln:has(> .ln-tabs) .ln-main { padding-bottom: 28px; }
  .ln-shell:has(.ln-tabs) .k-toast { bottom: calc(var(--ln-tabs-h) + 18px + env(safe-area-inset-bottom)); }

  /* ---------- The slim top bar: the mark and its name, who is learning, the menu ---------- */
  .ln:has(> .ln-tabs) { --ln-bar-h: 53px; }
  .ln:has(> .ln-tabs) .ln-bar-links { display: none; }
  .ln:has(> .ln-tabs) .ln-bar-start { display: none; }
  .ln:has(> .ln-tabs) .ln-bar-in { flex-wrap: nowrap; gap: 8px; padding-block: 6px; padding-inline: max(14px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
  .ln:has(> .ln-tabs) .ln-bar-home { margin-inline-end: auto; min-width: 0; gap: 8px; }
  .ln:has(> .ln-tabs) .ln-bar-home > span { display: grid; min-width: 0; }
  .ln:has(> .ln-tabs) .ln-bar-brand > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ln:has(> .ln-tabs) .ln-bar-star { width: 24px; height: 24px; }
  .ln:has(> .ln-tabs) .ln-menu-panel { top: calc(100% + 6px); max-height: calc(100dvh - var(--ln-above, 0px) - var(--ln-bar-h) - var(--ln-tabs-h) - env(safe-area-inset-bottom) - 18px); overflow-y: auto; overscroll-behavior: contain; }

  /* The places the tabs do not carry (courses, certificates, "Where do I start?"), at the top of the menu. */
  .ln:has(> .ln-tabs) .ln-menu-places { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 4px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ln-line); }
  .ln .ln-menu-places a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 12px; background: var(--ln-card-2); box-shadow: inset 0 0 0 1px var(--ln-line); font-size: 14px; font-weight: 650; line-height: 1.2; color: var(--ln-ink); }
  .ln .ln-menu-places a:only-child { grid-column: 1 / -1; }
  .ln .ln-menu-places a[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--w-accent, #f29a3f); }

  /* ---------- The tab bar (adults) ---------- */
  .ln-tabs {
    display: block; position: fixed; z-index: 32; inset: auto 0 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--ln-paper) 92%, transparent);
    backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
    border-top: 1px solid var(--ln-line);
    view-transition-name: ln-tabs;
  }
  /* The same light as along the top bar's foot, along the top edge. */
  .ln-tabs::before { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--w-accent, #f29a3f) 30%, var(--w-glow, #ffd27a) 70%, transparent); opacity: .4; pointer-events: none; }
  .ln-tabs-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: var(--ln-tabs-h); max-width: 560px; margin: 0 auto; padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right)); }
  .ln .ln-tab { position: relative; height: 100%; display: grid; justify-items: center; align-content: center; gap: 3px; padding-inline: 2px; color: var(--ln-ink-2); font-size: 11.5px; font-weight: 650; line-height: 1.15; -webkit-tap-highlight-color: transparent; }
  .ln .ln-tab:focus-visible { outline-offset: -4px; border-radius: 16px; }
  .ln-tab-icon { position: relative; display: grid; place-items: center; width: 56px; height: 30px; transition: transform .18s var(--ln-ease, ease-out); }
  .ln-tab:active .ln-tab-icon { transform: scale(.9); }
  .ln-tab-icon svg { position: relative; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ln-tab-label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ln-tab-lamp { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--w-accent, #f29a3f) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-accent, #f29a3f) 30%, transparent); view-transition-name: ln-tab-lamp; }
  .ln .ln-tab[aria-current="page"] { color: var(--ln-ink); font-weight: 800; }
  .ln-tab[aria-current="page"] svg { stroke: var(--w-ink, #6b3f10); }
  .ln-tab[aria-current="page"] .ln-tab-fill { fill: color-mix(in srgb, var(--w-accent, #f29a3f) 50%, transparent); }
  @media (hover: hover) {
    .ln .ln-tab:not([aria-current]):hover { color: var(--ln-ink); }
  }

  /* ---------- Teens: a flat plane, a hard edge, the current tab a sticker ---------- */
  .ln--teen .ln-tabs { background: color-mix(in srgb, var(--ln-paper) 94%, transparent); border-top: 2px solid color-mix(in srgb, #8b5cf6 50%, transparent); }
  .ln--teen .ln-tabs::before { display: none; }
  .ln--teen .ln-tab { font-family: var(--ln-display); font-weight: 700; letter-spacing: -.01em; }
  .ln--teen .ln-tab-lamp { inset: 1px 6px; border-radius: 9px; background: linear-gradient(135deg, #8b5cf6, #22d3ee); box-shadow: 3px 3px 0 color-mix(in srgb, #22d3ee 40%, #12081f); }
  .ln--teen .ln-tab[aria-current="page"] svg { stroke: #fff; }
  .ln--teen .ln-tab[aria-current="page"] .ln-tab-fill { fill: rgba(255, 255, 255, .3); }

  /* ---------- Kids: a toy shelf of round buttons, each in its own colour ---------- */
  .ln--kid .ln-tabs { background: var(--ln-card); border-top: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -4px 0 var(--k-edge, #f1e3c4), 0 -16px 34px -22px rgba(31, 42, 68, .5); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ln--kid .ln-tabs::before { display: none; }
  .ln--kid .ln-tabs-in { max-width: 460px; padding-block: 4px 2px; }
  .ln--kid .ln-tab { gap: 4px; min-height: 64px; color: var(--k-muted, #4f5a78); font-size: 14px; font-weight: 900; }
  .ln--kid .ln-tab[data-tab="play"] { --k-tone: #ffb020; --k-tone-ink: #3b2200; }
  .ln--kid .ln-tab[data-tab="stickers"] { --k-tone: #ff6fa5; --k-tone-ink: #4a0f27; }
  .ln--kid .ln-tab[data-tab="grown-ups"] { --k-tone: #5a8dff; --k-tone-ink: #0d2260; }
  .ln--kid .ln-tab-icon { width: 48px; height: 48px; border-radius: 50%; color: color-mix(in srgb, var(--k-tone) 55%, #000); background: color-mix(in srgb, var(--k-tone) 20%, var(--ln-card)); box-shadow: 0 4px 0 color-mix(in srgb, var(--k-tone) 42%, var(--ln-card)); transition: transform .16s var(--ip-ease-spring, ease-out), box-shadow .16s; }
  .ln--kid .ln-tab:active .ln-tab-icon { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--k-tone) 42%, var(--ln-card)); }
  .ln--kid .ln-tab-icon svg { width: 26px; height: 26px; stroke-width: 2.2; }
  .ln--kid .ln-tab-lamp { border-radius: 50%; background: var(--k-tone); box-shadow: 0 4px 0 color-mix(in srgb, var(--k-tone) 60%, #000), inset 0 2px 0 rgba(255, 255, 255, .45); }
  .ln--kid .ln-tab[aria-current="page"] { color: var(--k-ink, #1f2a44); }
  .ln--kid .ln-tab[aria-current="page"] .ln-tab-icon { box-shadow: none; }
  .ln--kid .ln-tab[aria-current="page"] svg { stroke: var(--k-tone-ink); }
  .ln--kid .ln-tab[aria-current="page"] .ln-tab-fill { fill: #fff; }
  html[data-theme="dark"] .ln--kid .ln-tab-icon { color: color-mix(in srgb, var(--k-tone) 70%, #fff); background: color-mix(in srgb, var(--k-tone) 22%, var(--ln-card)); }
  html[data-theme="dark"] .ln--kid .ln-tabs { box-shadow: 0 -4px 0 var(--k-edge, #0b1126), 0 -16px 34px -22px rgba(0, 0, 0, .8); }

  /* Windows high contrast: the current tab keeps a mark of its own. */
  @media (forced-colors: active) {
    .ln-tab-lamp { background: Highlight; }
    .ln-tab[aria-current="page"] svg { stroke: HighlightText; }
  }
}

/* The lamp glides from the old tab to the new one between pages; the bar itself stays put. */
::view-transition-group(ln-tab-lamp) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-group(ln-tabs) { animation-duration: .28s; }

@media print {
  .ln-tabs { display: none !important; }
}