/**
 * Tabs — token-driven. Radio-driven, framework-free tab strip.
 * Colours and spacing resolve against variables.css.
 */

.tabs {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.tabs input[type='radio'] {
  display: none;
}

.tabs ul li label {
  cursor: pointer;
  color: var(--brand-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  display: inline-block;
}

.tabs ul li label:hover {
  text-decoration: underline;
}

.tabs > div {
  border: 1px solid var(--border-color);
  margin-top: -1px;
  padding: var(--spacing-md);
  display: none;
}

@media (min-width: 768px) {
  .tabs ul {
    list-style-type: none;
    padding: 0;
    /* Flush with the content panel below (no side inset), small gap between tabs. */
    margin: 0;
    gap: 2px;
    display: flex;
    z-index: 100;
  }

  .tabs ul li {
    margin: 0;
    padding: 0;
  }

  .tabs ul li label {
    display: block;
    /* Reset the global forms.css `label { margin-bottom }` so the tab bottoms
       reach the strip edge and merge with the panel (otherwise a ~4px gap). */
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background-color: var(--gray-light);
    cursor: pointer;
  }

  .tabs ul li label:hover {
    background-color: var(--border-light);
  }

  .tabs input[type='radio']:checked + label {
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--bg-white);
    border-top: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold);
  }
}