@layer reset, base, layout, components, pages, utilities;

@layer layout {
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    background: linear-gradient(to right, var(--sunken) calc(var(--sidebar-width) - 1px), var(--rule) 0 var(--sidebar-width), transparent 0);
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Sidebar ------------------------------------------------------------ */

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: 24px 16px;
    background: var(--sunken);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    color: var(--ink);
    text-decoration: none;
  }
  .brand:hover { color: var(--ink); }
  .brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 20px var(--serif);
  }
  .brand__name { font: 600 26px var(--serif); letter-spacing: -0.02em; }

  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav a, .nav button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-2);
    text-decoration: none;
    font: 500 15px var(--sans);
    text-align: left;
  }
  .nav a:hover, .nav button:hover { background: var(--hover); color: var(--ink); }
  .nav a[aria-current="page"], .nav a.is-active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
  }
  .nav button { color: var(--muted); }
  .nav__count { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); }
  .nav__swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

  .nav-section { display: flex; flex-direction: column; }
  .nav-label {
    padding: 0 12px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .new-collection { padding: 4px 4px 0; }
  .new-collection input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: 14px;
  }

  .sidebar__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--muted);
  }
  .sidebar__foot form { margin-left: auto; }
  .sidebar__foot button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--muted);
    font-size: 13px;
    text-decoration: underline;
  }

  /* Main column -------------------------------------------------------- */

  .main {
    min-width: 0;
    padding: 36px var(--gutter) 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .main--flush-top { padding-top: 28px; }

  .page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  .page-head__text { display: flex; flex-direction: column; gap: 6px; }
  .eyebrow { font-size: 15px; color: var(--muted); }
  .page-title {
    font: 500 42px/1.05 var(--serif);
    letter-spacing: -0.02em;
  }
  .page-title--xl { font-size: 46px; }
  .lede { font-size: 17px; color: var(--ink-3); }

  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--muted);
  }
  .breadcrumb a { color: var(--muted); }
  .breadcrumb [aria-current] { color: var(--ink); }

  /* Mobile chrome ------------------------------------------------------ */

  .mobile-bar, .tabbar { display: none; }

  /* Phones, and tablets like the iPad in either orientation: touch screens get the tab bar, not the sidebar. */
  @media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    /*
     * An app shell exactly as tall as the screen: the top bar, the page scrolling inside, then
     * the tab bar. Neither bar is fixed or sticky, because iPhone Safari strands both partway
     * up the page while its toolbar floats, grows and shrinks, and when the keyboard opens.
     * Nothing can sit below the tab bar when the page itself never scrolls.
     */
    .app { display: flex; flex-direction: column; background: none; height: 100vh; height: 100dvh; overflow: hidden; }
    .sidebar { display: none; }

    .mobile-bar {
      flex: none;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
      background: var(--sunken);
      border-bottom: 1px solid var(--rule);
    }
    .mobile-bar .brand { padding: 0; }
    .mobile-bar .brand__mark { width: 30px; height: 30px; font-size: 18px; }
    .mobile-bar .brand__name { font-size: 22px; }
    .mobile-bar .btn { min-height: 40px; margin-left: auto; }
    .mobile-bar .btn + .btn { margin-left: 0; }

    .main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 20px var(--gutter) 32px; gap: 20px; }
    .main > * { flex-shrink: 0; }
    .page-title { font-size: 32px; }
    .page-title--xl { font-size: 34px; }

    .bottom-chrome { flex: none; z-index: 20; }
    .tabbar {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
      background: var(--surface);
      border-top: 1px solid var(--rule);
    }
    .tabbar a {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      min-height: 48px;
      justify-content: center;
      border-radius: var(--radius-sm);
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      text-decoration: none;
    }
    .tabbar a { position: relative; }
    .tabbar a[aria-current="page"] { color: var(--accent); }
    .tabbar__badge {
      position: absolute;
      top: 4px;
      left: calc(50% + 6px);
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--accent);
      color: var(--surface);
      font-size: 11px;
      line-height: 18px;
      text-align: center;
    }

    /* While typing, the keyboard covers the bottom of the screen, so the tab bar steps aside. */
    @media (pointer: coarse) {
      .app:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="file"]), textarea):focus) .bottom-chrome { display: none; }
    }

    /* The phone's More tab: the sidebar's links as a full page. */
    .menu-page { display: flex; flex-direction: column; gap: 24px; }
    .menu-page .nav a, .menu-page .nav button, .menu-page .new-collection-toggle summary { min-height: 48px; font-size: 16px; }
    .menu-page .sidebar__foot { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 15px; }

    /* The title right below says where you are. */
    .breadcrumb [aria-current], .breadcrumb [aria-current] ~ *, .breadcrumb span:has(+ [aria-current]) { display: none; }
  }
}

@layer layout {
  .new-collection-toggle summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font: 500 15px var(--sans);
    list-style: none;
    cursor: pointer;
  }
  .new-collection-toggle summary::-webkit-details-marker { display: none; }
  .new-collection-toggle summary:hover { background: var(--hover); color: var(--ink); }

  /* Auth pages */
  .auth__main {
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 440px;
    margin: 0 auto;
    padding: 48px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }
  .auth__brand { align-self: center; }
  .auth__panel { gap: 22px; }
  .auth__panel .page-title { font-size: 34px; }
  .auth__links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
}