@layer components {
  .settings {
    --settings-spacer: var(--block-space);
    --settings-item-padding-inline: 0.5ch;

    align-items: start;
    display: flex;
    gap: calc(var(--settings-spacer) * 2);
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    max-inline-size: min(100ch, 100%);

    @media (min-width: 960px) {
      flex-direction: row;

      .settings__panel {
        max-inline-size: 50%;
      }
    }
  }

  /* A settings page with one panel (People, Email, Plugins) gives it the page's full width. */
  .settings:has(> .settings__panel:only-child):not(.settings--split) {
    max-inline-size: 100%;

    > .settings__panel {
      flex: 1;
      max-inline-size: 100%;
    }
  }

  /* Sections & Panels
  /* -------------------------------------------------------------------------- */

  .settings__panel {
    --panel-size: 100%;
    --panel-padding: calc(var(--settings-spacer) / 1);

    display: flex;
    flex-direction: column;
    gap: var(--panel-padding);
    min-block-size: 100%;
    min-inline-size: 0;

    @media (min-width: 640px) {
      --panel-padding: calc(var(--settings-spacer) * 2);
    }
  }

  .settings__panel--users {
    @media (min-width: 640px) {
      max-height: 80dvh;
    }

    @media (min-width: 960px) {
      max-height: calc(100dvh - 12rem);
    }
  }

  .settings__section {
    h2:not(.lexxy-content *) {
      font-size: var(--text-large);
    }

    /* A section's header is one compact row: its name at the start, a rule running on, and any
    /* controls (a filter, a count) at the end, so a section starts with its content, not a
    /* banner. */
    > header {
      align-items: center;
      display: flex;
      gap: var(--inline-space);

      h2 {
        font-size: var(--text-medium);
        font-weight: 800;
        margin: 0;
      }

      h2.divider {
        flex: 1;
        min-inline-size: 0;

        &::before { display: none; }
      }

      .filters {
        flex-shrink: 0;
        padding-block-start: 0;
      }

      .quick-filter > button {
        padding-block: 0.3em;
      }
    }

    > * + * {
      margin-block-start: calc(var(--panel-padding) / 2);
    }

    &:is(:first-child):has(h2) {
      margin-top: -0.33lh; /* Align h2 letters caps with panel padding */
    }
  }

  .settings__section--negative {
    h2 {
      color: var(--color-negative);
    }

    .divider {
      --divider-color: oklch(var(--lch-red-light));
    }
  }

  .settings__section:has(.settings__scrollable-list) {
    @media (min-width: 640px) {
      display: flex;
      flex: 1;
      flex-direction: column;
      min-height: 0;
    }
  }

  .settings__scrollable-list {
    flex: 1 1 auto;
    list-style: none;
    margin: calc(var(--settings-spacer) / -4) calc(-1 * var(--settings-item-padding-inline));
    padding: 0;
    overflow: auto;

    li {
      border-radius: calc(0.5em * var(--radius-scale, 1));

      /* Add padding if it's not already on a link within */
      &:not(:has(a:first-child)) { padding-inline-end: var(--settings-item-padding-inline); }
      &:not(:has(a:last-child)) { padding-inline-end: var(--settings-item-padding-inline); }
    }

    a {
      padding: calc(var(--settings-spacer) / 4) var(--settings-item-padding-inline);

      @media(any-hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }
    }

    /* Only add a BG color when you can actually navigate */
    .settings__user-filter:focus-within & {
      [aria-selected] {
        background: var(--color-selected);
      }
    }
  }

  /* Users
  /* ------------------------------------------------------------------------ */

  .settings__user-filter {
    --btn-size: 3.5ch;
    --avatar-size: var(--btn-size);

    display: flex;
    flex-direction: column;
    gap: calc(var(--settings-spacer) / 2);
    min-height: 0;
  }

  .settings__user-filter--bg {
    background-color: var(--color-ink-lightest);
    border-radius: calc(0.5em * var(--radius-scale, 1));
    margin-block: 0;
    padding: var(--settings-spacer);
  }
}

/* Settings > People */
@layer components {
  .people__avatar {
    --avatar-size: 2em;

    flex-shrink: 0;
  }

  .people__invite {
    display: grid;
    gap: var(--inline-space-half);
    grid-template-columns: 1fr auto auto;

    @media (max-width: 639px) {
      grid-template-columns: 1fr;
    }
  }

  .people__roles {
    display: grid;
    gap: 0.25em 1em;
    grid-template-columns: max-content 1fr;
  }

  .people__permissions {
    inline-size: 100%;
  }
}

/* Plugins
/* ------------------------------------------------------------------------ */
@layer components {
  /* Settings > Plugins: one card per plugin, two to a row on a wide screen. */
  .plugin-cards {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;

    @media (max-width: 640px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .plugin-card {
    --panel-padding: var(--block-space);
    --panel-size: 100%;
    --panel-border-radius: calc(0.75em * var(--radius-scale, 1));
  }
}

/* A record's name, at the top left of its page's first panel (the header keeps the actions). */
@layer components {
  .page-title {
    font-size: var(--text-x-large);
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: start;
    text-wrap: balance;
  }
}

/* The first-run checklist on home (briefings/_setup). */
@layer components {
  .setup__steps {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .setup__check {
    align-items: center;
    block-size: 1.4rem;
    border: 1.5px solid var(--color-ink-light);
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.75rem;
    inline-size: 1.4rem;
    justify-content: center;
  }

  .setup__check--done {
    background-color: var(--color-positive);
    border-color: transparent;
    color: var(--color-canvas);
  }

  .setup__title--done {
    text-decoration: line-through;
  }

  .setup__link {
    color: var(--color-ink);
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover { color: var(--color-link); text-decoration: underline; }
    }
  }

  .setup__footer {
    border-block-start: 1px solid var(--color-ink-lighter);
    margin-block-start: var(--block-space-half);
    padding-block-start: var(--block-space-half);
  }
}

/* What happens next on an engagement, under its state (engagement_next_step). */
@layer components {
  .engagement-next-step {
    border-inline-start: 3px solid var(--color-link);
    padding-inline-start: 0.75em;
  }
}

/* A record's page, and its new and edit pages: the working column (2/3) and a sidebar (1/3)
/* of facts and smaller sections, stacked below 960px. The sidebar is as tall as what it holds. */
@layer components {
  .settings.settings--split {
    max-inline-size: min(160ch, 100%);

    @media (min-width: 960px) {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);

      .settings__panel {
        max-inline-size: none;
        min-block-size: 0;
      }
    }
  }

  .settings__panel--side {
    --panel-padding: var(--block-space);
    --settings-spacer: var(--block-space-half);

    .settings__section {
      flex: none;
    }

    @media (min-width: 640px) {
      --panel-padding: calc(var(--block-space) * 1.25);
    }
  }

  /* Label and value pairs down a sidebar: Owner, Client, Due… */
  .record-facts {
    display: grid;
    font-size: var(--text-small);
    gap: 0.4em 1em;
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 0;
    text-align: start;

    dt { color: var(--color-ink-dark); }
    dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
  }
}

/* What happens next, in order, down a sidebar. */
@layer components {
  .record-steps {
    display: grid;
    gap: 0.4em;
    margin: 0;
    padding-inline-start: 1.3em;
    text-align: start;
  }
}

/* Record pages, compact: smaller section headings and tighter panels, so a page reads as its
/* title, then its sections, and more of it fits on a screen. */
@layer components {
  .settings--split {
    .settings__panel {
      @media (min-width: 640px) {
        --panel-padding: calc(var(--settings-spacer) * 1.5);
      }
    }

    .settings__panel--side {
      @media (min-width: 640px) {
        --panel-padding: calc(var(--block-space) * 1.25);
      }
    }

    .settings__section h2:not(.lexxy-content *) {
      font-size: var(--text-medium);
      font-weight: 800;
    }

    .settings__panel--side .settings__section h2:not(.lexxy-content *) {
      font-size: var(--text-normal);
    }
  }

  /* The working column's tabs (layouts/shared/_record_tabs): the core's sections, each plugin
  /* panel, History. The first heading in a tab repeats the tab's name, so it's hidden. */
  .record-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .record-tabs__nav {
    border-block-end: 1px solid var(--color-ink-lighter);
    display: flex;
    gap: 0.25em;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .record-tabs__tab {
    align-items: center;
    border-block-end: 2px solid transparent;
    color: var(--color-ink-dark);
    display: inline-flex;
    font-size: var(--text-small);
    font-weight: 600;
    gap: 0.4em;
    margin-block-end: -1px;
    padding: 0.5em 0.7em;
    text-decoration: none;
    white-space: nowrap;

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

    &[aria-current="page"] {
      border-block-end-color: var(--color-link);
      color: var(--color-ink);
    }
  }

  .record-tabs__count {
    background-color: var(--color-ink-lightest);
    border-radius: var(--radius-pill, 99rem);
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 0.25em 0.55em;
  }

  .record-tabs__panel {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);

    > .settings__section:first-child > header > h2.divider {
      display: none;
    }
  }

  /* A section's add action: one small button at the start of the row after the list, the same
  /* everywhere. A <details> one opens its form below it. */
  .section-actions {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    margin-block-start: var(--block-space-half);
    text-align: start;

    > form { align-self: stretch; }
  }

  /* A contact in the sidebar: name and details on the left, portal and approval as icons. */
  .contact-row {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
  }

  .contact-row__who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
    text-align: start;
  }

  .contact-row__marks {
    color: var(--color-ink-dark);
    display: flex;
    flex-shrink: 0;
    gap: 0.35em;
  }

  .contact-row__mark {
    --icon-size: 1em;

    display: inline-flex;
  }

  .contact-row__mark--approve {
    color: var(--color-positive);
  }
}

/* A record's name with its actions (Edit, Copy for AI) on the same line. */
@layer components {
  .page-heading {
    align-items: flex-start;
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;

    .page-title { min-inline-size: 0; }
  }

  .page-heading__actions {
    display: flex;
    flex-shrink: 0;
    font-size: var(--text-x-small);
    gap: var(--inline-space-half, 0.5ch);
  }
}

/* Hiding a record page's sidebar (]): the working column takes the width, and the sidebar
/* stays as a thin strip holding the button that brings it back. */
@layer components {
  .settings__panel--side {
    position: relative;

    > .settings__section:first-of-type > header {
      padding-inline-end: 2rem;
    }
  }

  .sidebar-toggle {
    inset-block-start: calc(var(--panel-padding) - 0.35rem);
    inset-inline-end: calc(var(--panel-padding) - 0.5rem);
    position: absolute;
    z-index: 1;
  }

  html[data-sidebar="collapsed"] {
    .settings.settings--split {
      @media (min-width: 960px) {
        grid-template-columns: minmax(0, 1fr) 2.75rem;
      }
    }

    .settings__panel--side {
      --panel-padding: 0.4rem;

      align-items: center;
      min-block-size: 2.75rem;

      /* !important: sections carry the flex utility, and utilities come after components. */
      > :not(.sidebar-toggle) { display: none !important; }

      .sidebar-toggle {
        inset: auto;
        position: static;

        .icon { transform: scaleX(-1); }
      }
    }
  }
}