/*
 * attend. -- the shell: wordmark, the deep-ink sidebar and rail, the phone top
 * bar and tab bar, the navigation drawer, the account block, the footer credit,
 * the bare, loading and offline pages, and the sign-in layout (owner's concept
 * L3 "Check-in moment"). Look: docs/design/visual-design.md §8, §10 and
 * "Sidebar"; markup: templates/layouts/*, templates/components/nav_*.html,
 * user_menu, notices_link, wordmark, app_loading, templates/auth/*.
 *
 * Linked after app.css and components.css (templates/base.html), so these
 * rules override the shared ones at equal specificity; shell parts are scoped
 * under .sidebar, .drawer, .topbar and .bottom-nav. Colours only as
 * var(--attend-*) tokens from app.css, no gradients, blur or filters, shadows
 * only as the light theme's elevation tokens (tests/test_css_rules.py,
 * tests/ui/test_shell_indigo.py).
 */
@layer components {
  /* The ink sidebar and drawer: the menu fits a laptop window (below); on a
     very short one it still scrolls, without a visible bar (owner, 2026-11-02). */
  .sidebar,
  .drawer {
    scrollbar-width: none;
    scrollbar-color: var(--attend-sidebar-scrollbar) transparent;
  }

  .sidebar::-webkit-scrollbar,
  .drawer::-webkit-scrollbar {
    display: none;
  }

  /* ------------------------------------------------------- wordmark (§8) */
  .wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: 24px;
    font-weight: var(--weight-display);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--attend-text-strong);
    white-space: nowrap;
  }

  .wordmark--lg {
    font-size: 48px;
  }

  /* The full stop as a true circle on the baseline: brand in light,
     brand-text in dark (--attend-accent is each theme's). */
  .wordmark__dot {
    display: inline-block;
    flex: none;
    inline-size: 0.3em;
    block-size: 0.3em;
    margin-inline-start: 0.06em;
    border-radius: 50%;
    background: var(--attend-accent);
  }

  /* ------------------------------------------------------------ shell */
  .shell {
    background: var(--attend-ground);
  }

  .nav__link {
    min-height: var(--touch);
  }

  /* Phone top app bar: the wordmark, then Notices (and the drawer button).
     The bar is sticky on the ground colour, so a hairline keeps its edge once
     content scrolls under it (design §10 "no border until scrolled" needs a
     scroll observer; a permanent hairline is the simpler, script-free form). */
  .topbar {
    min-height: var(--topbar-h);
    padding: var(--space-1) var(--space-4) var(--space-1) var(--space-5);
    padding-top: max(var(--space-1), env(safe-area-inset-top));
    border-bottom: 1px solid var(--attend-border);
    background: var(--attend-ground);
  }

  .topbar__brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    border-radius: var(--r-sm);
    color: var(--attend-text-strong);
    text-decoration: none;
  }

  .topbar__actions {
    gap: var(--space-2);
  }

  .topbar__action {
    position: relative;
    inline-size: var(--touch);
    min-width: var(--touch);
    block-size: var(--touch);
    min-height: var(--touch);
    padding: 0;
    border: 1px solid var(--attend-border);
    border-radius: 50%;
    background: var(--attend-surface);
    color: var(--attend-text-strong);
  }

  .topbar .topbar__action:hover {
    background: var(--attend-row-hover);
    color: var(--attend-text-strong);
  }

  .topbar .topbar__action .icon {
    inline-size: 22px;
    block-size: 22px;
  }

  .topbar .notices-link .count-badge {
    position: absolute;
    inset-block-start: -3px;
    inset-inline-end: -4px;
    min-inline-size: 18px;
    block-size: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    outline: 2px solid var(--attend-ground);
    background: var(--attend-brand);
    color: var(--attend-on-brand);
    font-size: 11px;
    font-weight: var(--weight-label);
    line-height: 18px;
  }

  /* Content: a 20px gutter on phones (app.css sets the wider screens'),
     the credit last and centred. */
  @media (max-width: 767px) {
    .main {
      padding: var(--space-4) var(--space-5) var(--space-6);
      padding-left: max(var(--space-5), env(safe-area-inset-left));
      padding-right: max(var(--space-5), env(safe-area-inset-right));
    }

    .shell--bottom-nav .main {
      padding-bottom: calc(var(--bottom-nav-h) + var(--space-6) + env(safe-area-inset-bottom));
    }
  }

  .main-foot {
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-8);
    padding-top: 0;
    border-top: 0;
    color: var(--attend-text-muted);
    font-size: var(--text-label);
    line-height: var(--leading-label);
    text-align: center;
  }

  .main-foot .credit {
    color: var(--attend-text-muted);
  }

  /* Phone tab bar: 64px + safe area, the active icon in a 56x32 tint pill. */
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--attend-border);
    background: var(--attend-surface);
    box-shadow: var(--attend-shadow-bar);
  }

  .bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--bottom-nav-h);
    color: var(--attend-text-muted);
    font-size: var(--text-label);
    font-weight: var(--weight-button);
    line-height: var(--leading-label);
    text-decoration: none;
  }

  .bottom-nav__pill {
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 32px;
    border-radius: var(--r-pill);
  }

  .bottom-nav .bottom-nav__link .icon {
    inline-size: 24px;
    block-size: 24px;
  }

  .bottom-nav .bottom-nav__link:hover {
    color: var(--attend-text-strong);
  }

  .bottom-nav .bottom-nav__link[aria-current="page"] {
    color: var(--attend-brand-text);
  }

  .bottom-nav__link[aria-current="page"] .bottom-nav__pill {
    background: var(--attend-brand-tint);
  }

  .bottom-nav .bottom-nav__link:focus-visible {
    outline-offset: -2px;
  }

  /* ------------------------------------- deep-ink sidebar and the drawer */
  .sidebar,
  .drawer {
    color: var(--attend-sidebar-text);
  }

  .sidebar :focus-visible,
  .drawer :focus-visible {
    outline-color: var(--attend-sidebar-accent);
  }

  .sidebar .brand,
  .drawer .brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) 0;
    border-radius: var(--r-sm);
    color: var(--attend-sidebar-strong);
    text-decoration: none;
  }

  .sidebar .wordmark,
  .drawer .wordmark {
    color: var(--attend-sidebar-strong);
  }

  .sidebar .wordmark__dot,
  .drawer .wordmark__dot {
    background: var(--attend-sidebar-accent);
  }

  /* The institution: two lines at most, the full name on hover (title). */
  .sidebar .brand__org {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    color: var(--attend-sidebar-muted);
    font-size: var(--text-label);
    line-height: var(--leading-label);
  }

  .brand__short {
    display: none;
  }

  .sidebar .nav,
  .drawer .nav {
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .sidebar .nav__title,
  .drawer .nav__title {
    padding: 0 var(--space-3) var(--space-2);
    color: var(--attend-sidebar-muted);
    font-size: var(--text-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-label);
    text-transform: uppercase;
  }

  .sidebar .nav__link,
  .drawer .nav__link {
    position: relative;
    gap: var(--space-3);
    min-height: var(--touch);
    padding: 0 var(--space-3);
    border-radius: var(--r-pill);
    color: var(--attend-sidebar-text);
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    text-decoration: none;
  }

  .sidebar .nav__link .icon,
  .drawer .nav__link .icon {
    inline-size: 20px;
    block-size: 20px;
  }

  .sidebar .nav__link:hover,
  .drawer .nav__link:hover {
    background: var(--attend-sidebar-hover);
    color: var(--attend-sidebar-strong);
  }

  .sidebar .nav__link[aria-current="page"],
  .drawer .nav__link[aria-current="page"] {
    background: var(--attend-sidebar-active);
    color: var(--attend-sidebar-strong);
    font-weight: var(--weight-strong);
  }

  .sidebar .nav__link[aria-current="page"] .icon,
  .drawer .nav__link[aria-current="page"] .icon {
    color: var(--attend-sidebar-accent);
  }

  /* The motif: a 6px accent dot at the active item's right edge. */
  .sidebar .nav__link[aria-current="page"]::after,
  .drawer .nav__link[aria-current="page"]::after {
    content: "";
    flex: none;
    inline-size: 6px;
    block-size: 6px;
    margin-inline-start: auto;
    border-radius: 50%;
    background: var(--attend-sidebar-accent);
  }

  .sidebar .count-badge,
  .drawer .count-badge {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-inline-size: 20px;
    block-size: 20px;
    margin-inline-start: auto;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--attend-sidebar-accent);
    color: var(--attend-sidebar-on-accent);
    font-size: 11px;
    font-weight: var(--weight-label);
    line-height: 20px;
  }

  .sidebar .sidebar__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-8);
  }

  /* Account: initials circle, name and role; then Sign out. */
  .sidebar .user-menu__who,
  .drawer .user-menu__who {
    gap: var(--space-3);
    min-height: var(--touch);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-md);
    color: var(--attend-sidebar-strong);
    text-decoration: none;
  }

  .sidebar .user-menu__who:hover,
  .drawer .user-menu__who:hover {
    background: var(--attend-sidebar-hover);
  }

  .sidebar .avatar,
  .drawer .avatar {
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid var(--attend-sidebar-active);
    background: var(--attend-sidebar-active);
    color: var(--attend-sidebar-strong);
    font-size: var(--text-label);
    font-weight: var(--weight-label);
  }

  .sidebar .user-menu__text,
  .drawer .user-menu__text {
    color: var(--attend-sidebar-muted);
  }

  .sidebar .user-menu__name,
  .drawer .user-menu__name {
    color: var(--attend-sidebar-strong);
    font-size: var(--text-small);
    font-weight: var(--weight-strong);
  }

  .sidebar .user-menu__role,
  .drawer .user-menu__role {
    color: var(--attend-sidebar-muted);
    font-size: var(--text-label);
  }

  .sidebar .user-menu .btn,
  .drawer .user-menu .btn,
  .sidebar .nav-toggle {
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: var(--touch);
    padding: 0 var(--space-3);
    border-color: transparent;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--attend-sidebar-text);
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
  }

  .sidebar .user-menu .btn:hover,
  .drawer .user-menu .btn:hover,
  .sidebar .nav-toggle:hover {
    background: var(--attend-sidebar-hover);
    color: var(--attend-sidebar-strong);
  }

  .sidebar .nav-toggle {
    inline-size: var(--touch);
    padding: 0;
    justify-content: center;
    color: var(--attend-sidebar-muted);
  }

  .sidebar .sidebar__credit {
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-3) 0;
    border-top: 1px solid var(--attend-sidebar-active);
  }

  .sidebar .credit {
    color: var(--attend-sidebar-muted);
    font-size: var(--text-label);
    line-height: var(--leading-label);
  }

  /* The drawer (administrators on phones): the same ink panel. */
  .drawer {
    padding: var(--space-4) var(--space-3);
    padding-top: max(var(--space-4), env(safe-area-inset-top));
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    border-right: 1px solid var(--attend-sidebar-border);
    background: var(--attend-sidebar);
  }

  .drawer .drawer__head {
    padding-inline-start: var(--space-3);
  }

  .drawer .drawer__head .btn {
    border-color: transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--attend-sidebar-text);
  }

  .drawer .drawer__head .btn:hover {
    background: var(--attend-sidebar-hover);
    color: var(--attend-sidebar-strong);
  }

  @media (min-width: 768px) {
    .sidebar {
      gap: 0;
      padding: var(--space-5) var(--space-1) var(--space-4);
      border-right: 1px solid var(--attend-sidebar-border);
      background: var(--attend-sidebar);
    }

    .main-foot {
      flex-direction: row;
      justify-content: space-between;
      align-items: baseline;
      padding-top: var(--space-4);
      border-top: 1px solid var(--attend-border);
      text-align: start;
    }
  }

  @media (min-width: 1024px) {
    .shell:not([data-nav="collapsed"]) .sidebar {
      padding-inline: var(--space-3);
    }
  }

  /* A mouse-driven desktop: the design's compact 36px links and tighter
     gaps, so the whole menu fits a ~880px-tall window (touch keeps 44px). */
  @media (min-width: 1024px) and (pointer: fine) {
    .sidebar .nav__link {
      min-height: 36px;
    }

    .sidebar .nav {
      gap: var(--space-2);
      margin-top: var(--space-4);
    }

    .sidebar .sidebar__foot {
      padding-top: var(--space-3);
    }
  }

  /* The credit shows once at every width: in the expanded sidebar's foot at
     >=1024px, in the footer under the content everywhere else. */
  @media (min-width: 1024px) {
    .shell:not([data-nav="collapsed"]) .main-foot .credit {
      display: none;
    }
  }

  /* Rail: 768-1023px always, and >=1024px when collapsed. Labels stay in the
     accessibility tree (visually hidden), so links keep their names. */
  @media (min-width: 768px) and (max-width: 1023px) {
    .sidebar .sidebar__credit,
    .sidebar .brand__org,
    .sidebar .nav__title,
    .sidebar .user-menu__text {
      display: none;
    }

    .sidebar .brand__full,
    .sidebar .nav__label {
      display: inline;
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .sidebar .brand__short {
      display: inline-flex;
      align-items: baseline;
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: var(--weight-display);
      letter-spacing: -0.04em;
      line-height: 1;
      color: var(--attend-sidebar-strong);
    }

    .sidebar .brand,
    .sidebar .nav__link,
    .sidebar .user-menu__who,
    .sidebar .user-menu .btn {
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .sidebar .brand {
      min-height: var(--touch);
    }

    .sidebar .nav__link[aria-current="page"]::after {
      content: none;
    }

    .sidebar .count-badge {
      position: absolute;
      inset-block-start: 2px;
      inset-inline-end: 2px;
      margin: 0;
    }
  }

  @media (min-width: 1024px) {
    .shell[data-nav="collapsed"] .sidebar .sidebar__credit,
    .shell[data-nav="collapsed"] .sidebar .brand__org,
    .shell[data-nav="collapsed"] .sidebar .nav__title,
    .shell[data-nav="collapsed"] .sidebar .user-menu__text {
      display: none;
    }

    .shell[data-nav="collapsed"] .sidebar .brand__full,
    .shell[data-nav="collapsed"] .sidebar .nav__label {
      display: inline;
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .shell[data-nav="collapsed"] .sidebar .brand__short {
      display: inline-flex;
      align-items: baseline;
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: var(--weight-display);
      letter-spacing: -0.04em;
      line-height: 1;
      color: var(--attend-sidebar-strong);
    }

    .shell[data-nav="collapsed"] .sidebar .brand,
    .shell[data-nav="collapsed"] .sidebar .nav__link,
    .shell[data-nav="collapsed"] .sidebar .user-menu__who,
    .shell[data-nav="collapsed"] .sidebar .user-menu .btn {
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .shell[data-nav="collapsed"] .sidebar .brand {
      min-height: var(--touch);
    }

    .shell[data-nav="collapsed"] .sidebar .nav__link[aria-current="page"]::after {
      content: none;
    }

    .shell[data-nav="collapsed"] .sidebar .count-badge {
      position: absolute;
      inset-block-start: 2px;
      inset-inline-end: 2px;
      margin: 0;
    }

    .shell[data-nav="collapsed"] .sidebar .nav-toggle {
      align-self: center;
    }
  }

  /* --------------------------------------- bare, loading and offline pages */
  .bare {
    padding: var(--space-8) var(--space-5) var(--space-6);
    background: var(--attend-ground);
  }

  .bare__inner {
    max-width: 440px;
    gap: var(--space-6);
  }

  .bare .brand {
    align-self: flex-start;
    padding: 0;
    border-radius: var(--r-sm);
    color: var(--attend-text-strong);
    text-decoration: none;
  }

  .bare .credit,
  .app-loading .credit,
  .auth .credit {
    color: var(--attend-text-muted);
    font-size: var(--text-label);
    line-height: var(--leading-label);
  }

  .app-loading {
    gap: var(--space-6);
    background: var(--attend-ground);
  }

  .app-loading .credit {
    margin-top: var(--space-10);
  }

  /* ------------------------------------- sign-in: L3 "Check-in moment" */
  .auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--attend-ground);
  }

  /* Phone: the picture in a pale indigo panel, then the wordmark and its line. */
  .auth__hero {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    padding: var(--space-3) var(--space-4) 0;
  }

  .auth__art {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 216px;
    overflow: hidden;
    border: 1px solid var(--attend-hero-border);
    border-radius: var(--r-xl);
    background: var(--attend-hero);
  }

  .auth__art-svg {
    inline-size: 240px;
    max-inline-size: 100%;
    block-size: auto;
  }

  .auth__brand {
    padding: var(--space-6) var(--space-1) 0;
  }

  .auth__brand .brand {
    display: inline-flex;
    padding: 0;
    border-radius: var(--r-sm);
    color: var(--attend-text-strong);
    text-decoration: none;
  }

  .auth__brand .wordmark--lg {
    font-size: 40px;
  }

  .auth__tagline {
    margin-top: var(--space-2);
    color: var(--attend-text);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
  }

  .auth__side {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-5) var(--space-5);
  }

  .auth__main {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-top: var(--space-6);
  }

  .auth__icon {
    display: none;
  }

  .auth__icon-tile {
    fill: var(--attend-brand);
  }

  .auth__icon-ring {
    stroke: var(--attend-on-brand);
  }

  .auth__icon-mark {
    fill: var(--attend-on-brand);
  }

  .auth__intro .page-header__sub {
    margin-top: var(--space-1);
    color: var(--attend-text-muted);
    font-size: var(--text-body);
  }

  .auth__alt {
    text-align: center;
  }

  .auth__alt a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 0 var(--space-2);
    border-radius: var(--r-pill);
    font-weight: var(--weight-bold);
    text-underline-offset: 3px;
  }

  .auth__foot {
    margin-top: auto;
    padding-top: var(--space-8);
    text-align: center;
  }

  /* The picture's colours follow the theme; the code tile stays white like
     the presenter's. */
  .art-soft {
    fill: var(--attend-hero-border);
  }

  .art-dot {
    fill: var(--attend-accent);
  }

  .art-tile {
    fill: var(--attend-projection-bg);
    stroke: var(--attend-hero-border);
  }

  .art-finder {
    stroke: var(--attend-projection-fg);
  }

  .art-module {
    fill: var(--attend-projection-fg);
  }

  .art-phone {
    fill: var(--attend-surface);
    stroke: var(--attend-text-strong);
  }

  .art-phone-ink {
    fill: var(--attend-text-strong);
  }

  .art-halo {
    fill: var(--attend-positive-bg);
  }

  .art-disc {
    fill: var(--attend-positive-solid);
  }

  .art-check {
    stroke: var(--attend-on-brand);
  }

  .art-line {
    fill: var(--attend-border);
  }

  /* Show/hide password: a real button inside the field. */
  .password-field {
    position: relative;
  }

  .password-field input {
    padding-inline-end: calc(var(--touch) + var(--space-5));
  }

  .password-toggle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--touch);
    block-size: var(--touch);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--attend-brand-text);
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
  }

  .password-toggle:hover {
    background: var(--attend-row-hover);
  }

  .password-toggle__show,
  .password-toggle__hide {
    display: inline-flex;
  }

  .password-toggle[aria-pressed="true"] .password-toggle__show,
  .password-toggle:not([aria-pressed="true"]) .password-toggle__hide {
    display: none;
  }

  .password-toggle:focus-visible {
    outline-offset: 0;
  }

  @media (min-width: 1024px) {
    .auth {
      flex-direction: row;
      align-items: stretch;
    }

    .auth__hero {
      flex: 1 1 560px;
      justify-content: space-between;
      gap: var(--space-8);
      max-width: none;
      margin: var(--space-4);
      padding: var(--space-10);
      overflow: hidden;
      border: 1px solid var(--attend-hero-border);
      border-radius: var(--r-xl);
      background: var(--attend-hero);
    }

    .auth__art {
      order: 0;
      flex: 1 1 auto;
      block-size: auto;
      border: 0;
      border-radius: 0;
      background: none;
    }

    .auth__art-svg {
      inline-size: 100%;
      max-inline-size: 480px;
    }

    .auth__brand {
      padding: 0;
    }

    .auth__brand .wordmark--lg {
      font-size: 48px;
    }

    .auth__tagline {
      margin-top: var(--space-3);
      font-size: var(--text-h2);
      line-height: var(--leading-h2);
    }

    .auth__side {
      flex: 1 1 480px;
      padding: var(--space-10) var(--space-8) var(--space-6);
    }

    .auth__main {
      max-width: 380px;
      margin-block: auto;
      padding-top: 0;
    }

    .auth__icon {
      display: block;
      inline-size: 48px;
      block-size: 48px;
    }

    .auth__foot {
      width: 100%;
      max-width: 380px;
      margin: 0 auto;
    }
  }
}