/* Settings: General's Runtimes, the Notifications, Host, About, Data controls, Devices, Connections,
   Wallet, Agents, and Skills pages, and on a phone the dialog's rows in one column and its
   full-screen sheet. The lists themselves are components.css's settings
   list. */
@layer views {
  /* General's Runtimes, above the fields: each runtime's mark in a slot of
     one width, so the names line up whether or not it has one. */
  .settings-runtimes { margin-bottom: 20px; }
  .settings-background-backup { margin-bottom: 20px; }
  .settings-background-backup .settings-list-state { overflow-wrap: anywhere; }
  .settings-background-backup .settings-list-menu { width: min(320px, calc(100vw - 32px)); }
  .settings-background-backup .row-menu-text { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .settings-background-backup .settings-status { margin: 8px var(--row-inset); }
  @media (max-width: 719.98px) {
    .settings-background-backup .settings-list-main { flex-basis: 100%; }
    .settings-background-backup .settings-list-action { margin-left: auto; }
  }
  .settings-runtime-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; }
  .settings-about-how code,
  .settings-about-licence {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ink);
  }
  .settings-about-how code { font-size: 12px; }
  .settings-runtimes .settings-status { margin: 8px 0 0; }
  /* A sign-in under way, as Link's and Outlook's: Open <runtime> and
     Cancel, the Code field with Continue under them, and a device code in
     its box (components.css .settings-code); a key's field with Save, the
     same. */
  .runtime-actions { margin-top: 0; }
  .runtime-open { display: inline-flex; align-items: center; text-decoration: none; }
  .runtime-code-form,
  .runtime-key-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 10px; }
  .runtime-code-form .form-field,
  .runtime-key-form .form-field { flex: 1 1 16em; margin: 0; }
  .runtime-code-form .form-actions,
  .runtime-key-form .form-actions { margin: 0; }
  /* Several providers' keys: the Provider select on a line of its own
     over the Key field, which keeps Save and Cancel beside it. */
  .runtime-key-form .form-field:has(.runtime-key-provider) { flex: 1 1 100%; }
  .runtime-key-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
  .runtime-sentence { margin: 8px 0 0; }
  /* The one word a sentence links (Outlook's address, connection-link). */
  .runtime-setting-link { color: inherit; text-decoration: underline; }
  .runtime-reading { color: var(--muted); }
  /* About: the version in the ink, its commit after it lighter; the terms
     and the licence open under their rows. */
  .settings-about-version .settings-list-state { color: var(--ink); }
  .settings-about-version .settings-list-after { color: var(--muted); }
  .settings-about-leaves { margin-top: 4px; }
  .settings-about-terms { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
  .settings-about-licence {
    margin: 0;
    max-height: 320px;
    overflow: auto;
    font-size: 12px;
    white-space: pre-wrap;
  }

  /* Data controls: Reset's title in red, as the ⋯ menus' Delete is; Import
     memory's box and Add under its row; what the import kept and left out;
     Reset's confirm with its field. */
  .settings-list-row-danger .settings-list-title { color: var(--red); }
  .settings-data-import { display: grid; gap: 8px; }
  .settings-data-box { min-height: 120px; line-height: 1.45; }
  .settings-data-actions { display: flex; gap: 8px; }
  .settings-data-result { display: grid; gap: 4px; }
  .settings-data-result p { margin: 0; }
  .settings-data-skipped { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
  .settings-data-skip { display: grid; gap: 2px; }
  .settings-data-skip-line { overflow-wrap: anywhere; }
  .settings-data-skip-reason { color: var(--muted); font-size: 13px; }
  .settings-data-word { max-width: 240px; }
  .settings-data-resetting,
  .settings-data-refusal { margin: 0; }

  /* The Host page's facts: a long path wraps anywhere rather than
     widening the page. */
  .settings-host-facts .settings-list-state { overflow-wrap: anywhere; }
  /* The Browser for agents row's install line under "Not installed". */
  .settings-install {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
  }
  /* The command breaks only between its words, never inside one (a
     browser would break "--with-deps" at its hyphen): each word is a
     settings-install-word, and one longer than the line scrolls in the
     command's own box. */
  .settings-install-command {
    display: block;
    margin-top: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ink);
    overflow-wrap: normal;
    word-break: normal;
    overflow-x: auto;
    user-select: all;
  }
  .settings-install-word { white-space: nowrap; }

  /* The Devices page: a card per paired device, then Pair a device and a
     minted code. Sign out sits at the foot of the page list. */
  .settings-device-list:not(:empty) { margin-bottom: 16px; }
  .settings-device-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  /* The page list's groups: on a desk a gap between them in the side
     list; on a phone each is a card of the grouped list (components.css's
     settings list), Sign out a card of its own at the foot. */
  .settings-page-group { display: grid; gap: 2px; }
  .settings-page-group + .settings-page-group { margin-top: 12px; }
  .settings-page-group.settings-sign-out { margin-top: auto; }
  .settings-sign-out .settings-page-link { color: var(--red); }
  .settings-sign-out-status { margin: 4px 12px 0; }
  /* The line under a page's title (Wallet). */
  .settings-page-lead { margin: -4px 0 16px; color: var(--muted); }
  .settings-pair { margin-top: 12px; }
  .settings-pair-code {
    margin: 0 0 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 22px;
    letter-spacing: 0.05em;
    user-select: all;
  }
  .settings-pair-link { overflow-wrap: anywhere; user-select: all; }

  /* Connectors: compact lists, with account details in the same page. */
  #settings-connection-list > .pane-tabs { margin-bottom: 16px; }
  .connection-search { display: flex; margin-bottom: 16px; max-width: 560px; }
  .connection-lists:not([hidden]) { margin: 0 0 16px; }
  .settings-list-aside { flex: none; margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
  .settings-list-aside.is-bad { color: var(--red); }
  .connection-lists [data-connection] .settings-list-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .connection-detail-back { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
  #settings-connection-detail { position: relative; display: grid; gap: 24px; min-width: 0; }
  #settings-connection-detail[hidden] { display: none; }
  .connection-identity { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 110px; }
  .connection-identity > .settings-mark { width: 40px; height: 40px; flex: none; }
  .connection-identity-copy { flex: 1 1 0; min-width: 0; }
  .connection-identity-copy .settings-page-title { margin: 0; }
  .connection-identity-line { margin: 2px 0 0; color: var(--muted); overflow-wrap: anywhere; }
  .connection-disconnect { position: absolute; top: 4px; right: 0; }
  .connection-access-options { width: max-content; margin: 12px 0 8px; }
  .connection-access-options + .settings-list-note { margin-top: 0; }
  .theme-options.connection-access-options label:has(input:checked) { background: color-mix(in srgb, var(--green) 12%, var(--paper)); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 2px var(--green); }
  .connection-access-check { display: inline-block; width: 1em; margin-right: 5px; visibility: hidden; }
  .connection-access-options label:has(input:checked) .connection-access-check { visibility: visible; }
  .connection-access-ask { display: grid; justify-items: start; gap: 8px; margin: 0 var(--row-inset); }
  .connection-access-ask > .settings-status { margin: 0; }
  .connection-form-access > .connection-access-options { margin-top: 4px; }
  .connection-form-access > .form-note { margin: 0; }
  #settings-connection-detail .settings-list-block { min-width: 0; }
  #settings-connection-detail > .settings-list-block { margin-top: 0; }
  #settings-connection-detail .settings-list-fact.is-bad .settings-list-state { color: var(--red); }
  .connection-note { margin-top: 2px; }
  /* What agents may do on the account without asking (Always allow). */
  .connection-permissions { margin: 2px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
  .connection-permission { overflow-wrap: anywhere; }
  .connection-empty { margin: 0 0 16px; color: var(--muted); }
  .connection-form {
    display: grid;
    gap: 10px;
    max-width: 560px;
    margin-top: 8px;
    scroll-margin-top: 8px;
  }
  .settings-list-block > .connection-form { margin-top: 16px; }
  .connection-steps {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 1.4em;
  }
  .connection-redirect {
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    user-select: all;
  }
  .connection-client {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
  }
  .connection-choose { justify-self: start; }
  /* A pairing code over its buttons; the link is a button like the rest. */
  .connection-pair { display: grid; gap: 12px; }
  .connection-open { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  /* A service's mark on the tile a mail provider's sits on. */
  .connection-service-mark .brand-mark { width: 16px; height: 16px; }
  .connection-service-mark .brand-mark-logo { -webkit-mask-size: 15px 15px; mask-size: 15px 15px; }
  .connection-service-letter { background: var(--ink-soft); box-shadow: none; }
  .connection-service-letter .brand-mark-letter { background: none; color: var(--paper); font-size: 12px; }
  /* A service's return address in the pairing code's box, in the size of an
     address. */
  .connection-steps .settings-code { margin-top: 6px; }
  .settings-code .connection-return {
    display: block;
    flex: 1 1 200px;
    min-width: 0;
    padding: 6px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .connection-client-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
  }
  .connection-how { margin: 0; overflow-wrap: anywhere; }
  .connection-link { color: inherit; text-decoration: underline; }
  .connection-refusal { margin: 0; }
  .connection-form .form-actions { flex-wrap: wrap; }
  /* The Link row on the Wallet page, in the grouped list's shape: a card
     with the account's row and Test mode, then Agents that can buy, a card
     with a row per agent (its name, its checkbox at the right, a granted
     one's two limits under it) and the note under the card, then the
     buttons. */
  .link-row {
    display: grid;
    gap: 24px;
  }
  .link-row > .connection-actions { margin-top: -8px; }
  .link-row > .settings-status { margin: -12px 16px 0; }
  .link-account .connection-how { margin: 4px 0 0; }
  .connection-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-width: 0;
  }
  .connection-name { font-weight: 600; }
  /* The Link row's name follows Link's mark, as a Connections list's
     heading follows its provider's. */
  .link-row .connection-top { align-items: center; }
  .link-account .connection-name { font-weight: 500; }
  .connection-access,
  .connection-state { color: var(--muted); font-size: 13px; }
  .connection-state { margin: 0; overflow-wrap: anywhere; }
  .connection-state.is-bad { color: var(--red); }
  .connection-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .link-agents { display: block; min-width: 0; }
  .link-agents > .settings-list-heading { float: left; width: 100%; }
  .link-agents > .settings-list { clear: both; }
  .link-caps { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 16px 14px; }
  .link-cap { display: grid; gap: 2px; font-size: 13px; }
  .link-cap-label { color: var(--muted); }
  .link-cap-box { display: inline-flex; align-items: center; gap: 4px; }
  .link-cap-input { width: 8em; }
  .link-open { display: inline-flex; align-items: center; text-decoration: none; }

  /* Notifications: the Hours row's switch at its right, as This device's,
     and its two times under the title while the switch is on. */
  /* Send a test sits 16px under its row, as Pair a device does under its list. */
  #settings-push-test { margin-top: 16px; }
  .settings-hours { margin-bottom: 20px; }
  .settings-hours-times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 16px; }
  .settings-hours-times[hidden] { display: none; }
  /* 40px on a phone, a field's height on a desk. */
  .settings-time { width: 8.5em; min-height: min(40px, var(--field-height)); padding: 0 10px; }
  .settings-hours-to { color: var(--muted); font-size: 13px; }

  /* A row whose field needs the page's width: the label over a text area,
     the note under it. The text area grows to fit its text, from six lines
     up to most of the screen, and scrolls inside its border past that. */
  .settings-row-stacked { grid-template-columns: minmax(0, 1fr); }
  .settings-row-stacked .settings-note { grid-column: 1; }
  .settings-textarea {
    field-sizing: content;
    min-height: 132px;
    max-height: 60vh;
    padding: var(--field-pad-y) var(--field-pad-x);
    line-height: 1.45;
    overflow-y: auto;
    resize: vertical;
  }

  /* A heading over a part of a page (Connections' providers, General's
     model pairs). */
  .settings-section-heading {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
  }
  /* The Agents page: its status line over a settings list per group, each
     row an agent's name over its description's first clause, cut with an
     ellipsis only when it does not fit. */
  .settings-agent-row .settings-list-title,
  .settings-agent-row .settings-list-state {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .settings-agent-row .settings-list-title-line { flex-wrap: nowrap; }
  .settings-agent-row .settings-list-tag { flex: none; }

  /* The Skills page: Shared, Imported folders, and Built in, each a
     settings list; an imported folder's path is set as code, its skills and
     Remove under it. */
  .skill-row-note { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
  .skill-import .settings-list-title {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
  }
  .skill-import-skills { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .skill-import-skill { display: grid; gap: 2px; }
  .skill-import-skill-name { font-weight: 600; overflow-wrap: anywhere; }
  .skill-import-skill .skill-row-description { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
  .skill-import-skill .skill-row-description.is-bad { color: var(--red); }
  .skill-import-remove { justify-self: start; }

  @media (max-width: 719.98px) {
    .settings-row {
      grid-template-columns: minmax(0, 1fr);
      gap: 6px;
    }
    .settings-note {
      grid-column: 1;
    }

    .settings-overlay { padding: 0; }
    .settings-sheet {
      grid-template-columns: minmax(0, 1fr);
      max-width: none;
      height: 100%;
      border: 0;
      border-radius: 0;
    }
    .settings-sheet.is-listing .settings-page { display: none; }
    .settings-sheet:not(.is-listing) .settings-pages { display: none; }
    .settings-pages {
      --list-top: max(8px, env(safe-area-inset-top));
      padding: var(--list-top) 16px 16px;
      border-right: 0;
      background: var(--paper);
    }
    /* The list's title stays at the top under the close button, as a
       page's head does. */
    .settings-title {
      position: sticky;
      top: calc(-1 * var(--list-top));
      z-index: 4;
      display: flex;
      flex: none;
      align-items: center;
      min-height: 44px;
      margin: calc(-1 * var(--list-top)) -16px 8px;
      padding: var(--list-top) 60px 8px 16px;
      background: var(--paper);
      font-size: 28px;
    }
    /* On a phone each group is a card of the grouped list. */
    .settings-page-group {
      gap: 0;
      overflow: hidden;
      border-radius: var(--radius-card);
      background: var(--raised);
    }
    .settings-page-group + .settings-page-group { margin-top: 20px; }
    .settings-page-group.settings-sign-out { margin-top: 20px; }
    .settings-page-link {
      height: var(--row-height);
      padding: 0 14px 0 var(--row-inset);
      border-radius: 0;
      font-size: 15px;
    }
    .settings-page-link + .settings-page-link {
      background-image: linear-gradient(var(--raised-line), var(--raised-line));
      background-position: var(--row-inset) 0;
      background-size: calc(100% - 2 * var(--row-inset)) 1px;
      background-repeat: no-repeat;
    }
    .settings-page-link[aria-current="page"] {
      background-color: transparent;
      box-shadow: none;
    }
    .settings-page-link:hover { background-color: var(--hover-tint); }
    .settings-page-chevron { display: block; }
    :root:not([data-theme="dark"]) .settings-page-group { background: var(--side); }
    /* The last control scrolls clear of quick chat's button. */
    .settings-page {
      --sheet-top: max(8px, env(safe-area-inset-top));
      --sheet-side: 16px;
      padding-bottom: calc(var(--nav-bar-h) + 80px + env(safe-area-inset-bottom));
    }
    .settings-page-head { padding-left: calc(var(--sheet-side) - 8px); }
    .settings-sheet .settings-back { display: inline-flex; }
    .connection-detail-open > .settings-page-head .settings-back { display: none; }
    .connection-access-options { width: 100%; }
    .connection-access-options label { flex: 1 1 0; }
    .connection-identity { padding-right: 0; }
    .connection-disconnect { position: static; order: 2; width: 100%; min-height: 44px; }
    .connection-confirm { order: 1; }
    .settings-close {
      top: calc(max(8px, env(safe-area-inset-top)) + 4px);
      right: 8px;
    }
  }

  /* In the light theme the dialog's cards are --side, a step lighter than
     --raised, so they sit softly on the sheet. Only the card fills change:
     fields keep --field-inset, rules keep --raised-line, and dark keeps
     --raised. */
  :root:not([data-theme="dark"]) #settings-sheet :is(.settings-list, .settings-rows, .settings-card, .settings-list-empty) {
    background: var(--side);
  }
}