/* ═══════════════════════════════════════════════════════════════════════════ */
/* Stellar UI — Component layer built on Stellar design tokens               */
/* Mobile-first · Semantic HTML · Nested CSS                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Phase 1: Reset & Base ────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--viewport-base-font-size);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-0);
  line-height: var(--font-line-height-0);
  color: var(--neutral-1-on);
  background: var(--neutral-2);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ── Phase 1: Top Navigation ──────────────────────────────────────────────── */

nav[data-topnav] {
  position: sticky;
  top: 0;
  z-index: var(--zindex-drawer);
  display: flex;
  align-items: center;
  gap: var(--size-0);
  padding: var(--size--1) var(--size-1);
  background: var(--primary-5);
  border-bottom: var(--border-width-0) solid var(--neutral-3);
  box-shadow: var(--shadow-0);

  a {
    text-decoration: none;
    color: inherit;
  }

  strong {
    font-size: var(--font-size-1);
    color: var(--neutral-2-on);
  }
}

/* ── Phase 1: Sidebar Layout ──────────────────────────────────────────────── */

[data-sidebar-layout] {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  > nav[data-topnav] {
    order: -1;
  }

  > aside[data-sidebar] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--zindex-drawer) + 1);
    width: 16rem;
    height: 100dvh;
    background: var(--neutral-1);
    border-inline-end: var(--border-width-0) solid var(--neutral-3);
    box-shadow: var(--shadow-2);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--anim-duration-base) var(--anim-ease-standard);

    > header {
      flex-shrink: 0;
      padding: var(--size--1);
      border-bottom: var(--border-width-0) solid var(--neutral-3);

      strong {
        display: block;
        font-size: var(--font-size-0);
        color: var(--neutral-2-on);
      }

      small {
        font-size: var(--font-size--2);
        color: var(--neutral-7);
      }
    }

    > nav {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: var(--size--2);
      font-size: var(--font-size--1);

      ul {
        list-style: none;
        display: flex;
        flex-direction: column;
      }

      a {
        display: flex;
        gap: var(--size--2);
        padding: var(--size--2) var(--size--1);
        color: var(--neutral-1-on);
        text-decoration: none;
        border-radius: var(--border-radius-0);
        transition: background-color var(--anim-duration-fast);

        &:hover,
        &[aria-current] {
          background: var(--neutral-3);
        }
      }

      /* Sidebar nested accordion (details/summary in nav) */
      details {
        border: none;
        overflow: visible;

        & + details { margin-top: 0; }
        &[open] summary { border-bottom: none; }
        > ul { margin-inline-start: var(--size--1); padding: var(--size--2) 0; }
      }

      summary {
        justify-content: flex-start;
        padding: var(--size--2) var(--size--1);
        border-radius: var(--border-radius-0);

        &::after {
          width: var(--size--1);
          height: var(--size--1);
          margin-inline-start: auto;
        }
      }
    }

    > footer {
      flex-shrink: 0;
      margin-block-start: auto;
      padding: var(--size--1);
      display: flex;
      flex-direction: column;
      gap: var(--size--2);
    }
  }

  /* Sidebar open state (mobile) */
  &[data-sidebar-open] > aside[data-sidebar] {
    transform: translateX(0);
  }

  > main {
    flex: 1;
    min-width: 0;
  }
}

/* ── Phase 1: Desktop sidebar ─────────────────────────────────────────────── */

@media (min-width: 768px) {
  [data-sidebar-layout] {
    display: grid;
    grid-template-columns: 14rem 1fr;
    grid-template-rows: auto 1fr;

    > nav[data-topnav] {
      grid-column: 1 / -1;
      order: unset;
    }

    > aside[data-sidebar] {
      position: sticky;
      top: var(--topnav-h, 0px);
      width: auto;
      height: calc(100dvh - var(--topnav-h, 0px));
      z-index: 1;
      grid-row: 2;
      transform: none;
      box-shadow: var(--shadow-1);
    }

    /* On desktop, open state means collapsed (toggled OFF) */
    &[data-sidebar-open] {
      grid-template-columns: 0px 1fr;

      > aside[data-sidebar] {
        overflow: hidden;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        border-inline-end: none;
      }
    }

    [data-sidebar-toggle] {
      display: none;
    }

    &[data-sidebar-layout="always"] [data-sidebar-toggle] {
      display: inline-flex;
    }

    > main {
      grid-row: 2;
    }
  }
}

/* ── Phase 1: Main Content Area ───────────────────────────────────────────── */

main {
  flex: 1;
  padding: var(--size-1);
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  overflow-x: hidden;

  @media (min-width: 768px) {
    padding: var(--size-2);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 2: Base Elements — Typography & inline elements                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  color: var(--neutral-2-on);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1.25;
  margin-block-end: var(--size--1);
}

h1 { font-size: var(--font-size-5); }
h2 { font-size: var(--font-size-4); }
h3 { font-size: var(--font-size-3); }
h4 { font-size: var(--font-size-2); }
h5 { font-size: var(--font-size-1); }
h6 { font-size: var(--font-size-0); }

p {
  margin-block-end: var(--size-0);
}

a {
  color: var(--primary-7);
  text-decoration-thickness: var(--border-width-0);
  text-underline-offset: 0.15em;
  transition: color var(--anim-duration-fast);

  &:hover {
    color: var(--primary-9);
  }
}

strong, b { font-weight: var(--font-weight-semi-bold); }
small { font-size: var(--font-size--1); }

mark {
  background: var(--secondary-3);
  color: var(--secondary-3-on);
  padding: 0.05em 0.25em;
  border-radius: var(--border-radius-0);
}

code {
  font-family: var(--font-mono);
  font-size: var(--font-size--1);
  background: var(--neutral-2);
  padding: 0.15em 0.35em;
  border-radius: var(--border-radius-0);
}

pre {
  margin-block-end: var(--size-0);
  padding: var(--size-0);
  background: var(--neutral-2);
  border: var(--border-width-0) solid var(--neutral-3);
  border-radius: var(--border-radius-1);
  overflow-x: auto;

  code {
    background: none;
    padding: 0;
    font-size: var(--font-size--1);
  }
}

blockquote {
  margin-block-end: var(--size-0);
  padding: var(--size--1) var(--size-1);
  border-inline-start: 3px solid var(--primary-5);
  color: var(--neutral-7);
  font-style: italic;
}

hr {
  border: none;
  border-top: var(--border-width-0) solid var(--neutral-3);
  margin-block: var(--size-1);
}

ul, ol {
  margin-block-end: var(--size-0);
  padding-inline-start: var(--size-2);
}

li {
  margin-block-end: var(--size--2);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 3: Forms                                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

label {
  display: block;
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);

  &:has(input:where([type=checkbox], [type=radio])) {
    display: inline-flex;
    align-items: center;
    gap: var(--size--1);
    font-weight: var(--font-weight-normal);
  }
}

:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), textarea, select) {
  width: 100%;
  margin-block-start: var(--size--2);
  padding: var(--size--1) var(--size-0);
  font-size: var(--font-size-0);
  font-family: inherit;
  line-height: var(--font-line-height-0);
  background-color: var(--neutral-1);
  color: var(--neutral-1-on);
  border: var(--border-width-0) solid var(--neutral-4);
  border-radius: var(--border-radius-0);
  transition: border-color var(--anim-duration-fast), box-shadow var(--anim-duration-fast);

  &::placeholder {
    color: var(--neutral-6);
  }

  &:focus {
    outline: none;
    border-color: var(--primary-7);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary-7) 25%, transparent);
    z-index: 1;
  }

  &:disabled {
    background-color: var(--neutral-2);
    color: var(--neutral-6);
    cursor: not-allowed;
  }

  &:is([aria-invalid="true"], :user-invalid) {
    border-color: var(--error-7);

    &:focus {
      box-shadow: 0 0 0 2px color-mix(in oklch, var(--error-7) 25%, transparent);
    }
  }
}

textarea {
  height: auto;
  min-height: 5rem;
  padding: var(--size-0);
  resize: vertical;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--size--1) center;
  padding-inline-end: var(--size-2);
  cursor: pointer;
}

input:where([type=checkbox], [type=radio]) {
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  position: relative;
  background-color: var(--neutral-1);
  border: var(--border-width-0) solid var(--neutral-4);
  cursor: pointer;
  transition: background-color var(--anim-duration-fast), border-color var(--anim-duration-fast);

  &:checked {
    background-color: var(--primary-7);
    border-color: var(--primary-7);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--primary-7-on);
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: 100%;
    }
  }
}

input[type=checkbox] {
  border-radius: var(--border-radius-0);

  &:checked::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }

  &[role=switch] {
    --_switch-h: 1.25rem;
    --_switch-inset: 2px;
    --_switch-thumb: calc(var(--_switch-h) - var(--_switch-inset) * 3);

    width: calc(var(--_switch-h) * 2);
    height: var(--_switch-h);
    border-radius: 999px;
    background-color: var(--neutral-4);

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: var(--_switch-inset);
      transform: translateY(-50%);
      width: var(--_switch-thumb);
      height: var(--_switch-thumb);
      background-color: var(--neutral-1);
      border-radius: 999px;
      transition: transform var(--anim-duration-fast);
      box-shadow: var(--shadow-0);
    }

    &:checked {
      background-color: var(--primary-7);

      &::after {
        content: none;
      }

      &::before {
        transform: translateY(-50%) translateX(var(--_switch-h));
      }
    }
  }
}

input[type=radio] {
  border-radius: 999px;

  &:checked::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
  }
}

:where(input:where([type=checkbox], [type=radio], [type=range]), select):not(:disabled),
label:has(input:where([type=checkbox], [type=radio]):not(:disabled)) {
  cursor: pointer;
}

input[type=range] {
  width: 100%;
  height: 0.25rem;
  appearance: none;
  background: var(--neutral-3);
  border-radius: 999px;

  &::-webkit-slider-thumb {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--primary-7);
    border-radius: 999px;
    transition: transform var(--anim-duration-fast);

    &:hover {
      transform: scale(1.1);
    }
  }

  &::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--primary-7);
    border: none;
    border-radius: 999px;
  }
}

input[type=color] {
  appearance: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: var(--size--2);
  background: var(--neutral-1);
  border: var(--border-width-0) solid var(--neutral-4);
  border-radius: var(--border-radius-0);
  cursor: pointer;
}

fieldset {
  border: var(--border-width-0) solid var(--neutral-3);
  border-radius: var(--border-radius-1);
  padding: var(--size-1);
  margin-block-end: var(--size-1);
}

legend {
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--size--1);
}

/* Input group — input + button combo */
fieldset.group {
  display: flex;
  align-items: stretch;
  border: none;
  padding: 0;
  margin: 0;

  > :is(input, textarea, select) {
    flex: 1;
    margin-block-start: 0;

    &:not(:focus):not(:last-child) {
      border-inline-end-color: transparent;
    }
  }

  > :is(input, textarea, select, button) {
    border-radius: 0;
    &:first-child {
      border-radius: var(--border-radius-0) 0 0 var(--border-radius-0);
    }

    &:last-child {
      border-radius: 0 var(--border-radius-0) var(--border-radius-0) 0;
    }
  }

  > legend {
    float: inline-start;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--size-0);
    line-height: var(--font-line-height-0);
    font-weight: var(--font-weight-normal);
    color: var(--neutral-6);
    background-color: var(--neutral-2);
    border: var(--border-width-0) solid var(--neutral-4);
    border-inline-end: none;
    border-radius: var(--border-radius-0) 0 0 var(--border-radius-0);
  }
}

/* Field wrapper with error state */
[data-field] {
  margin-block-end: var(--size-0);

  [data-hint], .error {
    font-size: var(--font-size--2);
    font-weight: var(--font-weight-normal);
    color: var(--neutral-6);
    margin-block-start: var(--size--2);
  }

  .error {
    display: none;
  }

  &[data-field="error"] .error {
    display: block;
    color: var(--error-7);
  }
}

::file-selector-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--size--1) var(--size-0);
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);
  background-color: transparent;
  color: var(--neutral-1-on);
  border: var(--border-width-0) solid var(--neutral-4);
  border-radius: var(--border-radius-0);
  cursor: pointer;
  margin-inline-end: var(--size-0);
}

::file-selector-button:hover {
  background-color: var(--neutral-2);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 4: Interactive Components                                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────────────────── */

:is(button, [type=submit], [type=reset], [type=button], a.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size--1);
  padding: var(--size--1) var(--size-1);
  font-size: var(--font-size--1);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-0);
  white-space: nowrap;
  text-decoration: none;
  background-color: var(--primary-7);
  color: var(--primary-7-on);
  border-radius: var(--border-radius-0);
  border: var(--border-width-0) solid transparent;
  transition: background-color var(--anim-duration-fast), opacity var(--anim-duration-fast);
  cursor: pointer;

  &:hover:not(:disabled) {
    background-color: var(--primary-8);
  }

  &:active:not(:disabled) {
    background-color: var(--primary-9);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Variants */
  &[data-variant="secondary"] {
    background-color: var(--neutral-3);
    color: var(--neutral-1-on);

    &:hover:not(:disabled) { background-color: var(--neutral-4); }
  }

  &[data-variant="danger"] {
    background-color: var(--error-7);
    color: var(--error-7-on);

    &:hover:not(:disabled) { background-color: var(--error-8); }
  }

  /* Outline style */
  &.outline {
    background-color: transparent;
    color: var(--neutral-1-on);
    border-color: var(--neutral-4);

    &:hover:not(:disabled) { background-color: var(--neutral-2); }

    &[data-variant="danger"] {
      color: var(--error-7);
      border-color: var(--error-7);
      &:hover:not(:disabled) { background-color: color-mix(in oklch, var(--error-7) 10%, transparent); }
    }

    &[data-variant="secondary"] {
      color: var(--neutral-6);
      border-color: var(--neutral-4);
    }
  }

  /* Ghost style — like outline but no border */
  &.ghost {
    background-color: transparent;
    color: var(--neutral-1-on);
    border-color: transparent;

    &:hover:not(:disabled) { background-color: var(--neutral-2); }

    &[data-variant="danger"] {
      color: var(--error-7);
      &:hover:not(:disabled) { background-color: color-mix(in oklch, var(--error-7) 10%, transparent); }
    }
  }

  /* Sizes */
  &.small {
    padding: var(--size--2) var(--size-0);
    font-size: var(--font-size--2);
  }

  &.large {
    padding: var(--size-0) var(--size-2);
    font-size: var(--font-size-0);
  }

  &.icon {
    width: 2.5rem;
    padding: 0;

    &.small { width: 2rem; }
    &.large { width: 3rem; }
  }
}

/* Button group */
menu.buttons {
  list-style-type: none;
  padding-inline-start: 0;
  display: inline-flex;

  > li {
    &:first-child > * {
      border-start-start-radius: var(--border-radius-0);
      border-end-start-radius: var(--border-radius-0);
    }

    &:last-child > * {
      border-start-end-radius: var(--border-radius-0);
      border-end-end-radius: var(--border-radius-0);
    }

    > * {
      border-radius: 0;
    }

    &:not(:last-child) > * {
      border-inline-end: var(--border-width-0) solid color-mix(in oklch, var(--primary-7-on) 20%, transparent);
    }
  }
}

/* ── Cards (article element) ──────────────────────────────────────────────── */

article {
  background-color: var(--neutral-1);
  border: var(--border-width-0) solid var(--neutral-3);
  border-radius: var(--border-radius-1);
  box-shadow: var(--shadow-0);
  padding: var(--size-1);
  margin-block-end: var(--size-0);

  > header {
    margin: calc(-1 * var(--size-1));
    margin-block-end: var(--size-0);
    padding: var(--size-0) var(--size-1);
    border-bottom: var(--border-width-0) solid var(--neutral-3);

    > :is(h1, h2, h3, h4, h5, h6) {
      margin-block-end: 0;
    }

    > p {
      font-size: var(--font-size--1);
      color: var(--neutral-6);
      margin-block-end: 0;
    }
  }

  > footer {
    margin: calc(-1 * var(--size-1));
    margin-block-start: var(--size-0);
    padding: var(--size-0) var(--size-1);
    border-top: var(--border-width-0) solid var(--neutral-3);
    display: flex;
    justify-content: flex-end;
    gap: var(--size--1);
  }
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

.table {
  min-width: 320px;
  width: 100%;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size--1);
}

thead {
  border-bottom: var(--border-width-0) solid var(--neutral-3);
}

th, td {
  overflow-wrap: break-word;
}

th {
  padding: var(--size-0) var(--size--1);
  text-align: start;
  font-weight: var(--font-weight-medium);
  color: var(--neutral-6);
}

td {
  padding: var(--size-0) var(--size--1);
}

tbody tr {
  border-bottom: var(--border-width-0) solid var(--neutral-3);
  transition: background-color var(--anim-duration-fast);

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

  &:hover {
    background-color: color-mix(in oklch, var(--neutral-2) 50%, transparent);
  }
}

/* ── Dialog ───────────────────────────────────────────────────────────────── */

dialog {
  position: fixed;
  inset: 0;
  z-index: var(--zindex-dialog);
  width: min(100% - 2rem, 32rem);
  max-height: 85vh;
  margin: auto;
  padding: 0;
  background-color: var(--neutral-1);
  border: var(--border-width-0) solid var(--neutral-3);
  border-radius: var(--border-radius-2);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  color: var(--neutral-1-on);

  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    overlay 150ms ease allow-discrete,
    display 150ms ease allow-discrete;

  &[open] {
    opacity: 1;
    transform: scale(1);
  }

  @starting-style {
    &[open] {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  &::backdrop {
    background-color: rgb(0 0 0 / 0);
    transition:
      background-color 150ms ease,
      overlay 150ms ease allow-discrete,
      display 150ms ease allow-discrete;
  }

  &[open]::backdrop {
    background-color: rgb(0 0 0 / 0.5);
  }

  @starting-style {
    &[open]::backdrop {
      background-color: rgb(0 0 0 / 0);
    }
  }

  > header,
  > form > header {
    display: flex;
    flex-direction: column;
    gap: var(--size--2);
    padding: var(--size-1);
    padding-block-end: 0;

    > :is(h1, h2, h3, h4, h5, h6) {
      margin-block-end: 0;
    }

    > p {
      font-size: var(--font-size--1);
      color: var(--neutral-6);
      margin-block-end: 0;
    }
  }

  > p, > div, > section,
  > form > p, > form > div, > form > section {
    padding: var(--size-1);
    overflow-y: auto;
  }

  > footer,
  > form > footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--size--1);
    padding: var(--size-1);
    padding-block-start: 0;
  }
}

/* ── Badges ───────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--size--2);
  padding: var(--size--2) var(--size--1);
  font-size: var(--font-size--2);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height--1);
  background-color: var(--primary-7);
  color: var(--primary-7-on);
  border-radius: var(--border-radius-2);

  &.secondary {
    background-color: var(--neutral-3);
    color: var(--neutral-1-on);
  }

  &.outline {
    background-color: transparent;
    color: var(--neutral-1-on);
    border: var(--border-width-0) solid var(--neutral-4);
  }

  &.success {
    color: var(--tertiary-9);
    background-color: color-mix(in oklch, var(--tertiary-7) 15%, transparent);
  }

  &.warning {
    color: var(--secondary-9);
    background-color: color-mix(in oklch, var(--secondary-7) 15%, transparent);
  }

  &.danger {
    color: var(--error-9);
    background-color: color-mix(in oklch, var(--error-7) 15%, transparent);
  }
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */

[role="alert"] {
  position: relative;
  display: flex;
  gap: var(--size-0);
  padding: var(--size-0) var(--size-1);
  background-color: var(--neutral-1);
  border: var(--border-width-0) solid var(--neutral-3);
  border-radius: var(--border-radius-1);
  font-size: var(--font-size--1);

  &[data-variant] {
    border: none;
  }

  &[data-variant="error"],
  &[data-variant="danger"] {
    color: var(--error-9);
    background-color: color-mix(in oklch, var(--error-7) 10%, transparent);

    a { color: var(--error-9); }
  }

  &[data-variant="success"] {
    color: var(--tertiary-9);
    background-color: color-mix(in oklch, var(--tertiary-7) 10%, transparent);

    a { color: var(--tertiary-9); }
  }

  &[data-variant="warning"] {
    color: var(--secondary-9);
    background-color: color-mix(in oklch, var(--secondary-7) 10%, transparent);

    a { color: var(--secondary-9); }
  }
}

/* ── Spinner ──────────────────────────────────────────────────────────────── */

@keyframes sui-spin {
  to { transform: rotate(360deg); }
}

[aria-busy="true"] {
  &::before {
    content: "";
    display: inline-block;
    inset: 0;
    margin: auto;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--neutral-3);
    border-top-color: var(--primary-7);
    border-radius: 999px;
    animation: sui-spin 1s linear infinite;
    text-align: center;
  }

  &[data-spinner~="small"]::before {
    width: 1rem;
    height: 1rem;
  }

  &[data-spinner~="large"]::before {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
  }

  &[data-spinner~="overlay"] {
    position: relative;

    > * {
      opacity: 0.3;
      pointer-events: none;
    }

    &::before {
      position: absolute;
      inset: 0;
      margin: auto;
      z-index: 1;
    }
  }
}

/* ── Progress & Meter ─────────────────────────────────────────────────────── */

progress {
  appearance: none;
  width: 100%;
  height: 0.25rem;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--neutral-3);

  &::-webkit-progress-bar {
    background-color: var(--neutral-3);
    border-radius: 999px;
  }

  &::-webkit-progress-value {
    background-color: var(--primary-7);
    border-radius: 999px;
    transition: width var(--anim-duration-base);
  }

  &::-moz-progress-bar {
    background-color: var(--primary-7);
    border-radius: 999px;
  }
}

meter {
  appearance: none;
  width: 100%;
  height: 0.25rem;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--neutral-3);

  &::-webkit-meter-bar {
    background: var(--neutral-3);
    border: none;
    border-radius: 999px;
    height: 0.25rem;
  }

  &::-webkit-meter-optimum-value,
  &::-webkit-meter-suboptimum-value,
  &::-webkit-meter-even-less-good-value {
    border-radius: 999px;
  }

  &::-webkit-meter-optimum-value { background: var(--tertiary-7); }
  &::-webkit-meter-suboptimum-value { background: var(--secondary-7); }
  &::-webkit-meter-even-less-good-value { background: var(--error-7); }

  &::-moz-meter-bar {
    background: var(--tertiary-7);
    border-radius: 999px;
  }

  &:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--secondary-7); }
  &:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--error-7); }
}

/* ── Accordion (details/summary) ──────────────────────────────────────────── */

details {
  border: var(--border-width-0) solid var(--neutral-3);
  border-radius: var(--border-radius-1);
  overflow: hidden;

  & + details {
    margin-top: -1px;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  &:has(+ details) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  &[open] summary {
    border-bottom: var(--border-width-0) solid var(--neutral-3);
  }
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size--1);
  padding: var(--size-0);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--anim-duration-fast);

  &:hover {
    background-color: var(--neutral-2);
  }

  &::-webkit-details-marker, &::marker {
    display: none;
  }

  &::after {
    content: "";
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    transition: transform var(--anim-duration-fast);
  }

  details[open] &::after {
    transform: rotate(180deg);
  }
}

details > *:not(summary) {
  margin: var(--size-0);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 5: JS-Coupled Components (must match oat.js selectors)              */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toast Notifications ──────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;

  &::backdrop {
    display: none;
  }

  &[data-placement="top-left"]     { inset: var(--size-1) auto auto var(--size-1); }
  &[data-placement="top-center"]   { inset: var(--size-1) auto auto 50%; transform: translateX(-50%); }
  &[data-placement="top-right"]    { inset: var(--size-1) var(--size-1) auto auto; }
  &[data-placement="bottom-left"]  { inset: auto auto var(--size-1) var(--size-1); flex-direction: column-reverse; }
  &[data-placement="bottom-center"]{ inset: auto auto var(--size-1) 50%; transform: translateX(-50%); flex-direction: column-reverse; }
  &[data-placement="bottom-right"] { inset: auto var(--size-1) var(--size-1) auto; flex-direction: column-reverse; }
}

.toast {
  --transition: 300ms;
  --transition-in: calc(var(--transition) - 50ms);

  padding: var(--size-0) var(--size-1);
  max-width: 28rem;
  min-width: 20rem;
  pointer-events: auto;
  background-color: var(--neutral-1);
  border: var(--border-width-0) solid var(--neutral-3);
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-radius: var(--border-radius-1);
  box-shadow: var(--shadow-1);
  transition: opacity var(--transition-in), transform var(--transition-in), margin var(--transition-in);
  line-height: 1;
  margin: var(--size--1) 0;

  .toast-title {
    font-weight: var(--font-weight-semi-bold);
    margin: 0 0 var(--size--1) 0;
  }

  .toast-message {
    color: var(--neutral-6);
  }

  &[data-variant="success"] {
    border-inline-start-color: var(--tertiary-7);
    .toast-title { color: var(--tertiary-9); }
  }

  &[data-variant="danger"] {
    border-inline-start-color: var(--error-7);
    .toast-title { color: var(--error-9); }
  }

  &[data-variant="warning"] {
    border-inline-start-color: var(--secondary-7);
    .toast-title { color: var(--secondary-9); }
  }

  > [data-close] {
    margin-inline-start: auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 0.5;

    &:hover { opacity: 1; }
  }

  &[data-entering] {
    opacity: 0;
    transform: translateY(-1rem);
  }

  &[data-exiting] {
    opacity: 0;
    margin: 0;
    padding-block: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity var(--transition), margin var(--transition), padding var(--transition), max-height var(--transition);
  }
}

/* ── Dropdown (ot-dropdown) ───────────────────────────────────────────────── */

ot-dropdown {
  [popover] {
    position: fixed;
    margin: 0;
    min-width: 12rem;
    background-color: var(--neutral-1);
    border: var(--border-width-0) solid var(--neutral-3);
    border-radius: var(--border-radius-1);
    box-shadow: var(--shadow-2);
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity 150ms ease-out,
      transform 150ms ease-out,
      display 150ms allow-discrete,
      overlay 150ms allow-discrete;

    &:popover-open {
      opacity: 1;
      transform: translateY(0);
    }

    @starting-style {
      &:popover-open {
        opacity: 0;
        transform: translateY(-4px);
      }
    }
  }

  [role="menuitem"] {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--size--1);
    width: 100%;
    padding: var(--size--1) var(--size-0);
    font-size: var(--font-size--1);
    text-align: start;
    color: var(--neutral-1-on);
    background: none;
    border: none;
    border-radius: var(--border-radius-0);
    cursor: pointer;

    &:hover, &:focus {
      background-color: var(--neutral-2);
      outline: none;
    }
  }
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

[role="tablist"] {
  display: inline-flex;
  align-items: center;
  gap: var(--size--2);
  padding: var(--size--2);
  background-color: var(--neutral-2);
  border-radius: var(--border-radius-1);
}

[role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--size--1) var(--size-0);
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  background-color: transparent;
  color: var(--neutral-1-on);
  border: none;
  border-radius: var(--border-radius-0);
  cursor: pointer;
  transition: background-color var(--anim-duration-fast), color var(--anim-duration-fast);

  &:hover {
    color: var(--neutral-6);
  }

  &[aria-selected="true"] {
    background-color: var(--neutral-1);
    box-shadow: var(--shadow-0);
  }
}

[role="tabpanel"] {
  padding: var(--size-0) 0;

  &:focus-visible {
    outline: none;
  }
}

/* ── Tooltip ──────────────────────────────────────────────────────────────── */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  inset-inline-start: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--anim-duration-fast), transform var(--anim-duration-fast), visibility var(--anim-duration-fast);
  pointer-events: none;
  z-index: var(--zindex-tooltip);
}

/* Text */
[data-tooltip]::after {
  content: attr(data-tooltip);
  inset-block-end: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  padding: var(--size--1) var(--size-0);
  font-size: var(--font-size--1);
  line-height: 1;
  white-space: nowrap;
  background: var(--neutral-9);
  color: var(--neutral-9-on);
  border-radius: var(--border-radius-0);
}

/* Arrow */
[data-tooltip]::before {
  content: '';
  inset-block-end: calc(100% - 5px);
  transform: translateX(-50%) translateY(4px);
  border: 8px solid transparent;
  border-top-color: var(--neutral-9);
}

[data-tooltip]:is(:hover, :focus-visible)::before,
[data-tooltip]:is(:hover, :focus-visible)::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 700ms;
  transform: translateX(-50%) translateY(0);
}

/* ── Theme Picker ─────────────────────────────────────────────────────────── */

[data-theme-picker] {
  display: inline-flex;
  gap: var(--size--2);
  padding: var(--size--2);
  background: var(--neutral-2);
  border-radius: var(--border-radius-0);

  button {
    padding: var(--size--2);
    background: none;
    border: none;
    border-radius: var(--border-radius-0);
    cursor: pointer;
    color: var(--neutral-6);

    &[aria-pressed="true"] {
      background: var(--neutral-1);
      color: var(--neutral-1-on);
      box-shadow: var(--shadow-0);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* Phase 6: Utilities — class-based helpers                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

.align-left   { text-align: start; }
.align-center { text-align: center; }
.align-right  { text-align: end; }
.text-light   { color: var(--neutral-6); }
.text-lighter { color: var(--neutral-7); }
.text-success { color: var(--tertiary-7); }
.text-warning { color: var(--secondary-7); }
.text-danger  { color: var(--error-7); }

.hstack {
  display: flex;
  align-items: center;
  gap: var(--size-0);
  flex-wrap: wrap;
  align-content: flex-start;

  * { margin: 0; }

  &.spread { justify-content: space-between; }
}

.vstack {
  display: flex;
  flex-direction: column;
  gap: var(--size--2);

  > * { margin-block: 0; }
}

.gap-1 { gap: var(--size--1); }
.gap-2 { gap: var(--size--2); }
.gap-4 { gap: var(--size-1); }

.mt-2 { margin-block-start: var(--size--1); }
.mt-4 { margin-block-start: var(--size-1); }
.mt-6 { margin-block-start: var(--size-2); }

.mb-2 { margin-block-end: var(--size--1); }
.mb-4 { margin-block-end: var(--size-1); }
.mb-6 { margin-block-end: var(--size-2); }

.p-4 { padding: var(--size-1); }

.w-100 { width: 100%; }

/* ── Page header ──────────────────────────────────────────────────────────── */

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-0);
}

/* ── Stat grid ────────────────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-0);

  @media (min-width: 768px) {
    grid-template-columns: repeat(4, 1fr);
  }

  article p { margin: 0; }
}

.stat-value {
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-bold);
}

/* ── Service card ─────────────────────────────────────────────────────────── */

article > header progress {
  margin-block-start: var(--size--1);
}

article > [role="alert"] {
  margin-inline: var(--size-0);
}

/* ── Accordion badge + content ────────────────────────────────────────────── */

summary .badge {
  margin-inline-start: var(--size--1);
}

summary .inline-status {
  display: inline-flex;
  align-items: center;
  gap: var(--size--2);
  margin-inline-start: var(--size--1);
}

details > div {
  padding: var(--size-0);
}

details > div > [role="alert"] + .hstack {
  margin-block-start: var(--size-0);
}

:is(ul, ol, a).unstyled {
  list-style: none;
  text-decoration: none;
  padding: 0;
}

/* ── Skeleton loading ─────────────────────────────────────────────────────── */

@keyframes sui-shimmer {
  to { background-position: -200% 0; }
}

[role="status"].skeleton {
  margin-block-end: var(--size-0);
  background: var(--neutral-2);
  border-radius: var(--border-radius-1);
  animation: sui-shimmer 2s infinite;
  background-size: 200% 100%;
  background-image: linear-gradient(
    90deg,
    var(--neutral-2) 0%,
    var(--neutral-3) 50%,
    var(--neutral-2) 100%
  );

  &.box {
    width: 4rem;
    height: 4rem;
  }

  &.line {
    height: 1rem;
    width: 100%;
  }
}