/* CM001 kit — tabs.css (@layer cm.components). */
@layer cm.components {
  .cm-tabs-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
  .cm-tab {
    padding: 8px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0;
    background: transparent; color: var(--text-2); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; margin-bottom: -1px;
  }
  .cm-tab:hover { color: var(--text); }
  .cm-tab.is-active { background: var(--surface); color: var(--brand); border-color: var(--line); }
  .cm-tabs-panel[hidden] { display: none; }

  /* ---- link tabs -----------------------------------------------------------
     Same component as the JS tabs, but each tab is an <a> because the panel is
     rendered server-side (deep-linkable, survives reload). */
  .cm-tab--link { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; line-height: 1.2; }
  .cm-tab--link:hover { text-decoration: none; }
  .cm-tab-count {
    display: inline-grid; place-items: center; min-inline-size: 20px; padding: 0 6px; block-size: 18px;
    border-radius: 999px; background: var(--surface-2); color: var(--text-3);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .cm-tab.is-active .cm-tab-count { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }

  /* ---- second level --------------------------------------------------------
     Subordinate to the tab bar above it: pills, smaller type, tinted rail. One
     row of siblings instead of a stack of headings, so the hierarchy reads as
     category → list → data. */
  .cm-subtabs {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
    margin: -8px 0 16px; padding: 8px 10px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md, 10px);
  }
  .cm-subtabs-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-inline-end: 2px; }
  .cm-subtab {
    display: inline-flex; align-items: center; gap: 6px; min-block-size: 30px; padding: 4px 11px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2);
    font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background var(--dur-fast, 120ms) var(--ease-std, ease), border-color var(--dur-fast, 120ms) var(--ease-std, ease), color var(--dur-fast, 120ms) var(--ease-std, ease);
  }
  .cm-subtab:hover { border-color: var(--line-2, #cbd5e1); color: var(--text); text-decoration: none; }
  .cm-subtab.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
  .cm-subtab-count {
    display: inline-grid; place-items: center; min-inline-size: 18px; padding: 0 5px; block-size: 17px;
    border-radius: 999px; background: var(--surface-2); color: var(--text-3);
    font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .cm-subtab.is-active .cm-subtab-count { background: color-mix(in srgb, #fff 26%, transparent); color: var(--on-brand, #fff); }

  @media (max-width: 640px) {
    .cm-tabs-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .cm-tabs-nav::-webkit-scrollbar { display: none; }
    .cm-tab { white-space: nowrap; }
  }
}