/* sako-internal — layout: title bar + tab nav (eli5-style) + page */

@layer components {

  /* ─── Title bar ──────────────────────────────────────────────
   * Compact brand header above the tab strip.
   */
  .title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--page-px);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  .title-bar__brand {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);

    a {
      font-size: var(--text-sm);
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--accent);
      text-decoration: none;
    }
  }

  .title-bar__sub {
    font-size: var(--text-xs);
    color: var(--ink-2);
    letter-spacing: 0.03em;
  }

  .title-bar__user a {
    font-size: var(--text-xs);
    color: var(--ink-2);
    text-decoration: none;

    &:hover { color: var(--ink); text-decoration: none; }
  }

  /* ─── Tab nav ────────────────────────────────────────────────
   * Bordered tabs row, eli5-style.
   */
  .tab-nav {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    overflow-x: auto;
    padding-inline: var(--page-px);
  }

  .tab-nav__item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    border-right: 1px solid var(--border);
    transition: color 0.12s, background 0.12s;

    &:first-child { border-left: 1px solid var(--border); }

    &:hover {
      color: var(--ink);
      background: var(--surface-2);
      text-decoration: none;
    }

    &.tab-nav__item--active {
      color: var(--accent);
      background: var(--accent-bg);
    }
  }

  /* ─── Page header ────────────────────────────────────────────
   * Title + subtitle + optional action button side by side.
   */
  .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-light);

    h1 { margin: 0; }
    p  { margin: 0; color: var(--ink-2); font-size: var(--text-sm); margin-top: 2px; }
  }
}

@layer modules {
  .page {
    padding-inline: var(--page-px);
    padding-block: var(--space-8);
  }

  .page--narrow {
    max-width: 800px;
    margin-inline: auto;
  }

  .stack > * + *    { margin-top: var(--space-4); }
  .stack-sm > * + * { margin-top: var(--space-2); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
  }

  /* ─── Sections use small uppercase headings ───────────────── */
  section > h2 {
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--ink-2) !important;
    margin-bottom: var(--space-2) !important;
  }

  /* ─── Content type row ───────────────────────────────────────
   * Used on /content_types index.
   */
  .content-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border-light);

    &:last-child { border-bottom: none; }
  }

  /* ─── Empty state ────────────────────────────────────────────
   */
  .empty-state {
    text-align: center;
    padding: var(--space-10) var(--space-4);
    color: var(--ink-2);
    font-size: var(--text-sm);
  }
}