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

    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-medium);
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    /* 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-normal);
        font-weight: 600;
        letter-spacing: -0.01em;
        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-block-end: 0;
    margin-inline: 0;
    padding: 0;
    overflow: auto;

    /* Rows as Linear lists them: a hairline between, a tint under the pointer, and no rule
    /* running from the name to the controls (the separator stays as the spacer). */
    /* Rows keep to the column, the same width as the filters and buttons around them, with
    /* their padding inside the hover tint. */
    li {
      border-radius: calc(0.4rem * var(--radius-scale, 1));
      padding: 0.4rem var(--settings-item-padding-inline, 0.6rem);
      transition: background-color 80ms ease-out;

      @media (any-hover: hover) {
        &:hover { background-color: var(--color-hover); }
      }

      .separator--horizontal { border-color: transparent; }
    }

    /* 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;
  }

  /* A person's page (settings/people/show): their avatar, larger, beside their name and tags. */
  .person-heading {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
    margin-block-end: var(--block-space);

    .people__avatar {
      --avatar-size: 3.5em;
    }

    .page-title {
      margin-block-end: 0.2em;
    }
  }

  .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));

    /* Active or Dormant follows the switch the moment it flips, before the save lands. */
    &:has(.switch__input:checked) .plugin-card__dormant,
    &:not(:has(.switch__input:checked)) .plugin-card__active {
      display: none;
    }
  }
}

/* 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-large);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
    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;
  }
}

/* An engagement's facts in one line under its title: status, client, type, what's agreed. */
@layer components {
  .record-meta {
    align-items: center;
    color: var(--color-ink-dark);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
  }
}

/* An engagement's scope down its sidebar (engagements/_scope): each scope item with a dot for its
/* state, done of total, and a thin bar. The one whose work is shown is raised, as the settings
/* nav marks its page. */
@layer components {
  .scope-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    margin-inline: -0.6em;
  }

  .scope-nav__item {
    align-items: center;
    border-radius: var(--radius-control);
    color: var(--color-ink-darker);
    column-gap: 0.75em;
    display: grid;
    font-size: var(--text-small);
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.45em 0.6em;
    row-gap: 0.35em;
    text-decoration: none;

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

    &:focus-visible {
      outline: 2px solid var(--color-link);
      outline-offset: 1px;
    }

    &[aria-current="page"] {
      background-color: oklch(var(--lch-ink-darkest) / 7%);
      color: var(--color-ink);
      font-weight: 500;
    }
  }

  .scope-nav__name {
    align-items: center;
    display: flex;
    gap: 0.5em;
    min-inline-size: 0;
  }

  .scope-nav__count {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-variant-numeric: tabular-nums;
  }

  .scope-nav__dot {
    --scope-dot: var(--color-ink-light);

    background-color: var(--scope-dot);
    border-radius: 50%;
    block-size: 0.5em;
    flex-shrink: 0;
    inline-size: 0.5em;
  }

  .scope-nav__dot--in_progress { --scope-dot: var(--color-link); }
  .scope-nav__dot--blocked { --scope-dot: oklch(var(--lch-red-medium)); }
  .scope-nav__dot--done { --scope-dot: oklch(var(--lch-green-medium)); }

  .scope-nav__progress {
    appearance: none;
    background-color: var(--color-ink-lightest);
    block-size: 3px;
    border: 0;
    border-radius: var(--radius-pill, 99rem);
    grid-column: 1 / -1;
    inline-size: 100%;
    overflow: hidden;

    &::-webkit-progress-bar { background-color: var(--color-ink-lightest); }
    &::-webkit-progress-value { background-color: oklch(var(--lch-green-medium)); }
    &::-moz-progress-bar { background-color: oklch(var(--lch-green-medium)); }
  }

  /* The Work tab showing one scope item's work: its name, how much is done, and a way to its page. */
  .work-focus {
    margin-block-end: var(--block-space-half);
  }

  .work-focus__title {
    font-size: var(--text-medium);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    min-inline-size: 0;
  }
}

/* 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-normal);
      font-weight: 600;
    }

    .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"],
    &[aria-pressed="true"] {
      border-block-end-color: var(--color-link);
      color: var(--color-ink);
    }
  }

  /* Tabs that switch in place (ReActionView state) rather than by link: an engagement's sidebar. */
  button.record-tabs__tab {
    background: none;
    border-block-start: 0;
    border-inline: 0;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
  }

  .sidebar-tabs {
    margin-block-end: calc(var(--block-space-half) * -1);
  }

  .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 record's form (clients/_form): labelled fields down the column, short ones paired in a row
  /* that stacks when narrow, a switch as a row of its own with its explanation beside it, and
  /* Cancel and the save button at the end, on a hairline. Custom fields use the same field and
  /* label (custom_field_inputs), so they match on every form. */
  .record-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    text-align: start;
  }

  .record-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-inline-size: 0;
    text-align: start;
  }

  .record-form__label {
    color: var(--color-ink);
    font-size: var(--text-small);
    font-weight: 500;
  }

  .record-form__hint {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
  }

  .record-form__row {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  }

  /* A short field (a status) beside a long one (a time zone). */
  .record-form__row--narrow-first {
    @media (min-width: 640px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
  }

  .record-form__toggle {
    align-items: center;
    border: 1px solid var(--color-ink-lighter);
    border-radius: calc(0.6rem * var(--radius-scale, 1));
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.75rem 0.9rem;
  }

  .record-form__toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-inline-size: 0;
  }

  .record-form__footer {
    align-items: center;
    border-block-start: 1px solid var(--color-ink-lighter);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-block-start: 0.25rem;
    padding-block-start: 1rem;

    .btn { font-size: var(--text-small); }
  }

  .record-form__cancel {
    --btn-color: var(--color-ink-dark);
    --btn-padding: 0.45em 0.85em;

    border-radius: var(--radius-control);

    @media (any-hover: hover) {
      &:hover { background-color: var(--color-hover); color: var(--color-ink); filter: none; }
    }
  }

  /* A commitment (commitments/_commitment): its text, its state and Resolve on one row. The text
  /* takes the room, so the state and the button sit at the end. Opened, Resolve takes a line of
  /* its own: the button stays at the end and the form runs the full width beneath it. */
  .commitment-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    > :first-child { flex: 1 1 12rem; }
  }

  .commitment-row > .commitment-row__resolve {
    flex-shrink: 0;
    margin-block-end: 0;

    &[open] > summary.btn { margin-block-end: 0; }

    &[open] {
      flex-basis: 100%;
      inline-size: 100%;
      text-align: end;

      > form {
        flex-wrap: nowrap;
        margin-block-start: 0.5rem;
        text-align: start;

        .input {
          flex: 1 1 auto;
          inline-size: auto;
          min-inline-size: 0;
        }

        .btn { flex-shrink: 0; }
      }
    }
  }

  /* A question for a person (questions/_question): the close button in the top right, clear of
  /* the text, and the answers on one row below. */
  .question {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
  }

  .question__text {
    padding-inline-end: 2rem;
  }

  .question__dismiss-form {
    inset: -0.15rem -0.25rem auto auto;
    position: absolute;
  }

  .question__dismiss {
    --icon-size: 0.85rem;

    block-size: 1.75rem;
    border-radius: var(--radius-control);
    color: var(--color-ink-medium);
    display: grid;
    inline-size: 1.75rem;
    place-items: center;

    @media (any-hover: hover) {
      &:hover { background-color: var(--color-hover); color: var(--color-ink); filter: none; }
    }
  }

  .question__answers {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    .input-action { flex: 1 1 14rem; }
  }

  /* A field with its submit inside it: the arrow sits at the field's end. */
  .input-action {
    display: flex;
    position: relative;

    .input {
      padding-inline-end: 2.4rem;
    }
  }

  .input-action__submit {
    --icon-size: 0.95rem;

    block-size: 1.75rem;
    border-radius: calc(var(--radius-control) - 0.1rem);
    color: var(--color-ink-medium);
    display: grid;
    inline-size: 1.75rem;
    inset: 50% 0.3rem auto auto;
    place-items: center;
    position: absolute;
    translate: 0 -50%;

    @media (any-hover: hover) {
      &:hover { background-color: var(--color-hover); color: var(--color-ink); filter: none; }
    }

    .input-action:has(.input:not(:placeholder-shown)) & {
      background-color: var(--color-link);
      color: var(--color-white);
    }
  }

  /* Writing a note above a record's notes (notes/_section): one bordered box, the editor on top
  /* (toolbar always shown, so focusing it shifts nothing), and the kind, source and Add note
  /* along its foot. */
  .note-composer {
    --note-padding-inline: 0.9rem;

    border: 1px solid var(--color-ink-light);
    border-radius: calc(0.6rem * var(--radius-scale, 1));
    display: flex;
    flex-direction: column;
    text-align: start;
    transition: border-color 100ms ease-out, box-shadow 100ms ease-out;

    &:focus-within {
      border-color: var(--color-link);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-link) 22%, transparent);
    }

    lexxy-editor.lexxy-content,
    lexxy-editor.lexxy-content:focus-within {
      border: 0;
      border-radius: inherit;
      box-shadow: none;
      padding: 0 var(--note-padding-inline);

      .lexxy-editor__content { min-block-size: 3lh; }
    }
  }

  /* The notes below the composer line up with it: the same width (no bleed into the panel's
  /* padding, as other lists have) and the same inner padding, so a note's text starts where
  /* the composer's does. */
  .note-composer + .notes-list,
  .note-composer ~ .notes-list {
    margin: var(--block-space) 0 0;

    li { padding: 0.6rem 0.9rem; }
  }

  .note-composer__footer {
    align-items: center;
    border-block-start: 1px solid var(--color-ink-lighter);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;

    .input {
      --input-border-color: transparent;
      --input-background: transparent;

      font-size: var(--text-x-small);
      inline-size: auto;
      padding-block: 0.35em;

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

    .note-composer__kind { flex: 0 0 auto; }
    .note-composer__source { flex: 1 1 10rem; min-inline-size: 0; }
    .note-composer__submit { font-size: var(--text-small); margin-inline-start: auto; }
  }

  /* Adding files where a record's documents are listed (documents/_section): a dashed box the
  /* full width of the column; dropping files on it uploads them. Hovered or dragged over, it
  /* takes the accent. */
  .document-drop__target {
    --btn-background: transparent;
    --btn-border-color: var(--color-ink-light);
    --btn-color: var(--color-ink-dark);
    --btn-font-weight: 500;
    --btn-padding: 1.1rem 1rem;
    --btn-shadow: none;
    --icon-size: 1rem;

    font-size: var(--text-small);
    inline-size: 100%;

    @media (any-hover: hover) {
      &:hover { filter: none; }
    }

    &:hover,
    &:has(input:focus-visible),
    &.drag-and-drop__hover-container {
      --btn-background: var(--color-selected-light);
      --btn-border-color: var(--color-link);
      --btn-color: var(--color-ink);
    }
  }

  .document-drop + .settings__scrollable-list {
    margin-block-start: var(--block-space-half);
  }

  /* A section's filter (layouts/shared/_segmented_filter): its choices side by side in one
  /* hairline track, each with a muted count, the current one raised like the view toggle.
  /* In a tab the section's heading is hidden, so the control leads the section. */
  .segmented-filter {
    background-color: var(--color-ink-lightest);
    border: 1px solid var(--color-ink-lighter);
    border-radius: var(--radius-control);
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.1em;
    max-inline-size: 100%;
    overflow-x: auto;
    padding: 0.15em;
    scrollbar-width: none;
  }

  .segmented-filter__option {
    align-items: center;
    border-radius: calc(var(--radius-control) - 0.15em);
    color: var(--color-ink-dark);
    display: inline-flex;
    font-size: var(--text-x-small);
    font-weight: 500;
    gap: 0.45em;
    padding: 0.3em 0.7em;
    text-decoration: none;
    white-space: nowrap;

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

    &[aria-current="true"] {
      background-color: var(--color-canvas);
      box-shadow: 0 0 0 1px var(--color-ink-lighter), 0 1px 2px oklch(var(--lch-black) / 6%);
      color: var(--color-ink);
    }
  }

  .segmented-filter__count {
    color: var(--color-ink-medium);
    font-variant-numeric: tabular-nums;

    [aria-current="true"] > & { color: var(--color-ink-dark); }
  }

  /* 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,
    > .sidebar-tabs {
      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); }
      }
    }
  }
}

/* Settings > Connected apps: each connection's recent calls (AgentCall), under Activity. */
@layer components {
  .connected-apps > li + li {
    border-block-start: 1px solid var(--color-ink-lightest);
    padding-block-start: var(--block-space-half);
  }

  .connected-app__activity > summary {
    cursor: pointer;
    inline-size: fit-content;
  }

  .connected-app__calls {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    list-style: none;
    margin: var(--block-space-half) 0 0;
    padding: 0;

    code {
      font-size: inherit;
    }
  }
}

/* Setting up two-factor sign-in: numbered steps, the QR code on white (authenticator apps read
/* it best dark on light, whatever the theme), and a code field six digits wide. */
@layer components {
  .two-factor__steps {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    margin: 0;
    padding-inline-start: 1.25em;
  }

  .two-factor__qr-frame {
    background: #fff;
    border: 1px solid var(--color-ink-lighter);
    border-radius: calc(0.5rem * var(--radius-scale, 1));
    inline-size: fit-content;
    margin-block: var(--block-space-half);
    padding: 0.75rem;
  }

  .two-factor__qr {
    block-size: 11rem;
    display: block;
    inline-size: 11rem;
  }

  .input.two-factor__code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-medium);
    font-weight: 600;
    inline-size: 11ch;
    letter-spacing: 0.15em;
    min-inline-size: 0;
  }
}

/* The sign-in page's other ways in (Google, an emailed link), stacked under the password. */
@layer components {
  .sign-in-options {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);

    form { display: contents; }
  }

  .sign-in-steps {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding-inline-start: 1.25em;
  }
}

/* Starting setups (sign-up, Settings > Names > Start from): one row each, the choice beside its
/* words. */
@layer components {
  .start-choices {
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    margin: 0;
    padding: 0;

    legend { margin-block-end: var(--block-space-half); padding: 0; }
  }

  .start-choice {
    align-items: center;
    border: 1px solid var(--color-ink-lighter);
    border-radius: calc(0.5rem * var(--radius-scale, 1));
    cursor: pointer;
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);
    text-align: start;

    > span { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.15em; min-inline-size: 0; }

    &:has(input:checked) {
      background: var(--color-selected-light);
      border-color: var(--color-link);
    }
  }
}

/* Finishing an engagement, under its Details: Mark complete or Cancel, or Reopen once closed. */
@layer components {
  .engagement-finish { margin-block-start: var(--block-space-half); }

  /* Your menu (Settings > Your account): each plugin, its g key, ↑ ↓ and a switch to show it. */
  .menu-arranger__item {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);

    .btn--circle[disabled] {
      visibility: hidden;
    }
  }

  .menu-arranger__item--hidden {
    color: var(--color-ink-medium);

    > .icon {
      opacity: 0.5;
    }
  }

  .menu-arranger__down .icon {
    rotate: 180deg;
  }
}