@layer components {
  /* ─── An accounting firm's onboarding ───── */

  /* The four steps over every screen: a segment each, its name under it,
     the steps walked and the one in hand in the brand. */
  .onb-firm-progress {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
  }

  .onb-firm-progress__step {
    border-block-start: 4px solid var(--color-brand-tint);
    border-radius: 2px;
    color: var(--color-ink-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding-block-start: 0.5rem;
    text-transform: uppercase;
  }

  .onb-firm-progress__step.is-done,
  .onb-firm-progress__step.is-current {
    border-block-start-color: var(--color-brand);
    color: var(--color-brand);
  }

  .onb__pill {
    align-items: center;
    background: var(--color-surface-inverted);
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    margin: 0 auto 0.75rem;
    padding: 0.375rem 1rem;
  }

  /* The way out under a firm's card. */
  .onb-skip__form {
    display: flex;
    justify-content: center;
    margin-block-start: 1.5rem;
  }

  .onb-skip {
    background: none;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
  }

  .onb-skip:hover {
    color: var(--color-brand);
  }

  /* ‹ value › on the summary: what can be stepped rather than typed. */
  .onb-stepper {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
  }

  .onb-stepper__step {
    align-items: center;
    background: none;
    block-size: 1.75rem;
    border: none;
    border-radius: 50%;
    color: var(--color-brand);
    cursor: pointer;
    display: flex;
    inline-size: 1.75rem;
    justify-content: center;
  }

  .onb-stepper__step:hover {
    background: var(--color-brand-tint);
  }

  .onb-later__link {
    color: inherit;
  }

  /* Under the mascot while the invoice is read: a line running across, so
     the wait reads as work under way. */
  .onb-reading__line {
    background: var(--color-brand-tint);
    block-size: 4px;
    border-radius: var(--radius-pill);
    display: block;
    inline-size: min(16rem, 100%);
    margin-inline: auto;
    overflow: hidden;
    position: relative;

    &::after {
      animation: onb-reading-line 1.4s ease-in-out infinite;
      background: var(--color-brand-fill);
      border-radius: inherit;
      content: "";
      inline-size: 40%;
      inset-block: 0;
      position: absolute;
    }
  }

  @keyframes onb-reading-line {
    from { inset-inline-start: -40%; }
    to { inset-inline-start: 100%; }
  }

  .onb-card__eyebrow {
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
  }

  .onb-inline-form {
    display: inline;
  }

  .onb-link--button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
  }

  /* ─── Tím ───────────────────────────────── */

  .onb-team {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .onb-team__owner {
    align-items: center;
    background: var(--color-surface-tint);
    border-radius: var(--radius-md);
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
  }

  .onb-team__avatar {
    block-size: 2.25rem;
    font-size: 0.75rem;
    inline-size: 2.25rem;
  }

  .onb-team__name {
    flex: 1;
    font-weight: 600;
  }

  .onb-team__role {
    color: var(--color-brand);
    font-weight: 600;
  }

  .onb-team__rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .onb-team__row {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr minmax(9rem, 12rem) auto;
  }

  .onb-team__email {
    align-items: center;
    display: flex;
    position: relative;

    .icon {
      color: var(--color-ink-muted);
      inset-inline-start: 1rem;
      pointer-events: none;
      position: absolute;
    }

    .input {
      inline-size: 100%;
      padding-inline-start: 2.75rem;
    }
  }

  .onb-team__error {
    color: var(--color-negative);
    font-size: 0.875rem;
    grid-column: 1 / -1;
    margin: -0.25rem 0 0;
  }

  .onb-team__add {
    align-items: center;
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--color-brand);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    gap: 0.375rem;
    padding: 0;
  }

  .onb-team__roles {
    margin-block-start: 1rem;

    dl {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin: 0.5rem 0 0;
    }
  }

  .onb-team__role-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 9rem 1fr;

    dt {
      font-weight: 700;
    }

    dd {
      color: var(--color-ink-secondary);
      margin: 0;
    }
  }

  @media (width < 768px) {
    .onb-team__row {
      grid-template-columns: 1fr auto;
    }

    .onb-team__email {
      grid-column: 1 / -1;
    }

    .onb-team__role-row {
      grid-template-columns: 1fr;
      gap: 0;
    }
  }

  /* ─── Klienti ───────────────────────────── */

  .onb-clients {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .onb-clients__chips {
    align-items: center;
    cursor: text;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-block-size: 3.25rem;
    padding: 0.5rem 0.75rem;
  }

  .onb-clients__input {
    background: none;
    border: none;
    color: var(--color-ink);
    flex: 1;
    font: inherit;
    min-inline-size: 12rem;
    outline: none;
  }

  .onb-chip {
    align-items: center;
    background: var(--color-surface-tint);
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.25rem;
    padding: 0.25rem 0.375rem 0.25rem 0.75rem;
  }

  .onb-chip.is-invalid {
    background: var(--color-negative-tint);
    color: var(--color-negative);
  }

  .onb-chip__remove {
    align-items: center;
    background: none;
    block-size: 1.25rem;
    border: none;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    display: flex;
    inline-size: 1.25rem;
    justify-content: center;
  }

  .onb-chip__remove:hover {
    background: oklch(from var(--color-ink) l c h / 10%);
  }

  .onb-clients__under {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    font-size: 0.875rem;
    justify-content: space-between;
  }

  .onb-clients__csv {
    align-items: center;
    color: var(--color-brand);
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    gap: 0.375rem;
  }

  .onb-clients__csv:has(:focus-visible) {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }

  .onb-clients__refusals {
    margin: 0 0 1rem;
  }

  /* ─── Termíny ───────────────────────────── */

  .onb-deadlines {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .onb-deadlines__day-head {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
  }

  .onb-deadlines__day-value {
    color: var(--color-brand);
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 700;
  }

  .onb-deadlines__range {
    accent-color: var(--color-brand-fill);
    inline-size: 100%;
    margin-block: 0.75rem 0.25rem;
  }

  .onb-deadlines__fieldset {
    border: none;
    margin: 0;
    padding: 0;
  }

  /* A part of the settings beyond the deadline's, set off by a rule. */
  .onb-deadlines__section {
    border-block-start: 1px solid var(--color-border-subtle);
    padding-block-start: 1.5rem;

    .onb-switch {
      margin-block-start: 0.5rem;
    }
  }

  .onb-deadlines__pills {
    background: var(--color-surface-tint);
    border-radius: var(--radius-pill);
    display: inline-flex;
    gap: 0.25rem;
    margin-block-start: 0.5rem;
    padding: 0.25rem;
  }

  .onb-deadlines__pill {
    border-radius: var(--radius-pill);
    color: var(--color-ink-secondary);
    cursor: pointer;
    font-family: var(--font-mono);
    padding: 0.5rem 1rem;
  }

  .onb-deadlines__pill:has(input:checked) {
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-brand);
    font-weight: 700;
  }

  .onb-deadlines__pill:has(input:focus-visible) {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }

  .onb-deadlines__switches {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* A checkbox drawn as a switch, on a card that takes the brand when on. */
  .onb-switch {
    align-items: flex-start;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    position: relative;
  }

  .onb-switch:has(.onb-switch__input:checked) {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
  }

  .onb-switch__input {
    block-size: 1.5rem;
    inline-size: 2.75rem;
    inset-block-start: 1rem;
    inset-inline-start: 1.25rem;
    margin: 0;
    opacity: 0;
    position: absolute;
  }

  .onb-switch__track {
    background: var(--color-border-strong);
    block-size: 1.5rem;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    inline-size: 2.75rem;
    position: relative;
    transition: background 0.15s;

    &::after {
      background: var(--color-surface);
      block-size: 1.125rem;
      border-radius: 50%;
      content: "";
      inline-size: 1.125rem;
      inset-block-start: 0.1875rem;
      inset-inline-start: 0.1875rem;
      position: absolute;
      transition: transform 0.15s;
    }
  }

  .onb-switch__input:checked + .onb-switch__track {
    background: var(--color-brand-fill);

    &::after {
      transform: translateX(1.25rem);
    }
  }

  .onb-switch__input:focus-visible + .onb-switch__track {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }

  .onb-switch__text {
    color: var(--color-ink-secondary);
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    gap: 0.125rem;

    strong {
      color: var(--color-ink);
      font-size: 1rem;
    }
  }

  .onb-preview {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .onb-preview__label {
    background: var(--color-surface-tint);
    margin: 0;
    padding: 0.625rem 1rem;
  }

  .onb-preview__mail {
    padding: 1rem;
  }

  .onb-preview__from {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    margin: 0 0 0.5rem;
  }

  .onb-preview__subject {
    font-weight: 700;
    margin: 0 0 0.5rem;
  }

  .onb-preview__body {
    color: var(--color-ink-secondary);
    margin: 0;
  }
}