/* =============================================================================
   shell.css — the app shell (spec §5.3): the ink sidebar on desktop, an icon
   rail on tablets, a bottom tab bar on phones, the top bar, section tabs, the
   content column, and the slim public layout. Breakpoints: 700 px and 1100 px.
   ============================================================================= */
@layer components {
  /* ---- App layout -------------------------------------------------------- */
  .app { min-height: 100dvh; }
  .app__side { display: none; }
  .app__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100dvh;
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  }
  @media (min-width: 700px) {
    .app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
    .app__side { display: flex; }
    .app__main { padding-bottom: 0; }
  }
  @media (min-width: 1100px) {
    .app { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  }

  /* ---- Sidebar ----------------------------------------------------------- */
  .side {
    position: sticky;
    top: 0;
    flex-direction: column;
    gap: var(--sp-2);
    height: 100dvh;
    padding: var(--sp-4) var(--sp-3);
    border-right: 1px solid var(--side-line);
    background: var(--side-bg);
    color: var(--side-text);
  }
  .side :focus-visible { outline-color: var(--side-focus); }
  .side__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-1) var(--sp-2) var(--sp-4);
    color: var(--side-active-text);
    font-size: var(--fs-20);
    font-weight: var(--fw-heavy);
    text-decoration: none;
  }
  .side__brand img { width: 30px; height: 33px; }
  .side__brand em { color: var(--electric); font-style: normal; }
  .side__nav { display: grid; gap: var(--sp-1); }
  .side__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--control-h);
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--side-text);
    font-weight: var(--fw-bold);
    text-decoration: none;
  }
  .side__link:hover { background: var(--side-line); color: var(--side-active-text); }
  .side__link[aria-current='page'] { background: var(--side-active-bg); color: var(--side-active-text); }
  .side__foot { display: grid; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--side-line); }
  .side__user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    color: var(--side-text);
    text-decoration: none;
  }
  .side__user:hover { background: var(--side-line); color: var(--side-text); }
  .side__who { min-width: 0; line-height: 1.25; }
  .side__who b { display: block; overflow: hidden; color: var(--side-active-text); text-overflow: ellipsis; white-space: nowrap; }
  .side__who small { font-size: var(--fs-12); }
  .side__guest { display: grid; gap: var(--sp-2); }

  /* Tablet: icons only; labels stay for screen readers. */
  @media (min-width: 700px) and (max-width: 1099.98px) {
    .side { align-items: center; padding: var(--sp-3) var(--sp-2); }
    .side__brand { padding: var(--sp-1) 0 var(--sp-3); }
    .side__brand span, .side__label, .side__who, .side__guest .side__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .side__link { justify-content: center; width: 48px; padding: 0; }
    .side__user { justify-content: center; padding: var(--sp-1); }
    .side__guest .btn { width: 48px; padding: 0; }
  }

  /* ---- Top bar and section tabs ------------------------------------------ */
  .top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--top-h);
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  /* Fixed-size controls never give way to a long title: the title shrinks instead. */
  .top__brand { display: grid; flex: none; place-items: center; width: var(--control-h); height: var(--control-h); margin-left: calc(-1 * var(--sp-2)); }
  .top .icon-btn { flex: none; }
  .top__brand img { width: 26px; height: 29px; }
  .top__title {
    min-width: 0;
    overflow: hidden;
    font-size: var(--fs-20);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .top__spacer { flex: 1; }
  .top__desk { display: none; }
  @media (min-width: 700px) {
    .top__brand { display: none; }
    .top__desk { display: inline-flex; }
  }
  @media (max-width: 699.98px) {
    .top { min-height: 56px; padding: 0 var(--sp-3); }
    .top__title { font-size: var(--fs-18); }
  }

  .section-tabs { padding: 0 var(--sp-5); background: var(--surface); }
  @media (max-width: 699.98px) {
    .section-tabs { padding: 0 var(--sp-2); }
  }

  .content { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--sp-5); }
  @media (max-width: 699.98px) {
    .content { padding: var(--sp-3); }
  }

  .page-error { display: grid; justify-items: center; gap: var(--sp-3); max-width: 480px; margin: var(--sp-8) auto; text-align: center; }
  .page-error svg.i { width: 40px; height: 40px; color: var(--warn); }

  /* ---- Анги is for kids and coaches (phase 3) -------------------------------- */
  html[data-account='adult']:not([data-role='coach']) [data-section='class'] { display: none; }

  /* ---- Phone tab bar ------------------------------------------------------ */
  .tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--side-line);
    background: var(--side-bg);
  }
  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--side-text);
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    text-decoration: none;
  }
  .tabbar__ic { display: grid; place-items: center; width: 52px; height: 30px; border-radius: var(--r-pill); }
  .tabbar a[aria-current='page'] { color: var(--side-active-text); }
  .tabbar a[aria-current='page'] .tabbar__ic { background: var(--electric); color: var(--side-bg); }
  .tabbar :focus-visible { outline-color: var(--side-focus); outline-offset: -3px; }
  /* After the base rule above, or its display: grid would win: phones only. */
  @media (min-width: 700px) {
    .tabbar { display: none; }
  }

  /* ---- Public layout (landing, login, 404) -------------------------------- */
  .pub { display: flex; flex-direction: column; min-height: 100dvh; }
  .pub-top {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--top-h);
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }
  .pub-top__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: var(--control-h);
    min-height: var(--control-h);
    margin-right: auto;
    color: var(--text);
    font-size: var(--fs-18);
    font-weight: var(--fw-heavy);
    text-decoration: none;
  }
  .pub-top__brand img { width: 28px; height: 31px; }
  .pub-main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--sp-6) var(--sp-5); }
  .pub-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-6) var(--sp-5);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--fs-13);
  }
  .pub-foot a { display: inline-flex; align-items: center; min-height: var(--control-h); }
  @media (max-width: 699.98px) {
    .pub-top { padding: 0 var(--sp-3); }
    .pub-top__name, .pub-top__signup { display: none; }
    .pub-main { padding: var(--sp-4) var(--sp-3); }
  }
}