/* The shared parts every view builds from: buttons, cards, badges, the
   drawer and its rows, the row menus, pills, the composer, the gear,
   Refresh, the instructions panel, the avatar, the Settings dialog, the
   link button, the section headings, the form fields, and a memory's lines
   and box (memory-view.js, in an agent's settings and on Settings' Memory
   page). */
@layer components {
  /* Buttons: .button is a secondary action, a tint that reads on the page
     and on a card alike; .button-primary is a form's one main action,
     filled with the accent; .button-danger confirms a destructive one.
     A disabled button of any kind is the quiet tint with faint text. */
  .button {
    min-height: var(--control-height);
    padding: 0 var(--control-pad-x);
    border: 0;
    border-radius: var(--radius-control);
    background: var(--button-tint);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .button:hover { background: var(--button-tint-hover); }
  .button:disabled,
  .button:disabled:hover {
    background: var(--button-tint);
    color: var(--faint);
    filter: none;
    cursor: default;
  }
  .button-small {
    padding: 0 var(--control-pad-x-small);
    font-size: 13px;
  }
  .button-primary {
    background: var(--green);
    color: var(--on-accent);
  }
  .button-primary:hover { background: var(--green-dark); }
  .button-danger {
    background: var(--red);
    color: var(--on-accent);
  }
  .button-danger:hover { background: var(--red); filter: brightness(0.92); }

  .status-line {
    margin: 0 0 16px;
  }
  /* The Settings dialog (settings-dialog.js): a sheet over any view, the
     list of pages at its left and the open page at its right, under quick
     chat like the brief's overlay. Full screen on a phone, where the list and
     a page take turns. */
  .settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--shadow-sheet);
  }
  .settings-sheet {
    position: relative;
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    width: 100%;
    max-width: 1100px;
    height: min(900px, 100%);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 16px 48px var(--shadow-pop);
  }
  .settings-sheet:focus { outline: none; }
  .settings-pages {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding: 16px 10px;
    overflow-y: auto;
    border-right: 1px solid var(--line);
    background: var(--paper);
  }
  .settings-title {
    margin: 6px 12px 14px;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
  }
  .settings-page-link {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .settings-page-link:hover { background: var(--hover-tint); }
  .settings-page-link[aria-current="page"] {
    background: var(--side);
    box-shadow: 0 1px 3px var(--shadow-tint);
  }
  .settings-page-chevron { display: none; color: var(--muted); }
  /* The page's head stays at the top as the page scrolls, on the sheet's
     own fill and edge to edge, so the close button always sits on it and
     never over the page's content. */
  .settings-page {
    --sheet-top: 18px;
    --sheet-side: 32px;
    min-width: 0;
    min-height: 0;
    padding: var(--sheet-top) var(--sheet-side) 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* What scrolls into view stops below the head. */
    scroll-padding-top: calc(var(--sheet-top) + 52px);
  }
  #settings-sheet .settings-page :is(p, .settings-page-lead, .settings-note, .settings-list-note, .settings-about-terms, .settings-about-licence) {
    max-width: 72ch;
  }
  .settings-page-head {
    position: sticky;
    /* A sticky box keeps clear of its scroller's padding; this one covers it. */
    top: calc(-1 * var(--sheet-top));
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: calc(var(--sheet-top) + 52px);
    margin: calc(-1 * var(--sheet-top)) calc(-1 * var(--sheet-side)) 0;
    padding: var(--sheet-top) calc(var(--sheet-side) + 44px) 8px var(--sheet-side);
    background: var(--paper);
  }
  .settings-page-title {
    margin: 0;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
  }
  .settings-page-title:focus { outline: none; }
  .settings-sheet .settings-back { display: none; }
  /* Centered on the head's line. */
  .settings-close {
    position: absolute;
    top: 22px;
    right: 18px;
    z-index: 5;
  }
  .settings-theme, .settings-switch { justify-self: start; }

  /* A label-and-field row of a .settings-rows card (General,
     Notifications): the label at the left, the field at the right, a
     hairline between rows. */
  .settings-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    align-items: center;
    gap: 8px 16px;
    padding: 12px 0;
    border-top: 1px solid var(--raised-line);
  }
  .settings-row:first-child { border-top: 0; }

  .settings-label {
    font-weight: 500;
  }

  .settings-note {
    grid-column: 2;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
  }

  .settings-status {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
  }
  .settings-status.is-bad { color: var(--red); }
  .card-list {
    display: grid;
    gap: 12px;
  }

  .card {
    min-width: 0;
    padding: 14px 20px 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
  }

  .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 44px;
  }

  /* A tablist under a heading: the Feed's feeds, Todo's horizons, and the
     tabs of an agent's settings pane. The chosen tab is underlined. */
  .pane-tabs {
    display: flex;
    flex: none;
    gap: var(--pane-tab-gap, 4px);
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .pane-tabs[hidden] { display: none; }
  .pane-tab {
    flex: none;
    min-height: 44px;
    padding: 0 var(--pane-tab-padding, 12px);
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .pane-tab:hover { color: var(--ink); }
  .pane-tab[aria-selected="true"] {
    border-bottom-color: var(--green);
    color: var(--ink);
  }
  /* The agent settings tabs are glyphs, evenly across the row; the chosen
     one is a filled tile instead of an underline. */
  #agent-pane-tabs.pane-tabs { gap: 4px; padding: 0; border-bottom: 0; overflow: visible; }
  .pane-tab-icon {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 40px;
    padding: 0;
    border-bottom: 0;
    border-radius: var(--radius-control);
  }
  .pane-tab-icon:hover { background: var(--hover-tint); }
  .pane-tab-icon[aria-selected="true"] { background: var(--green-bg); color: var(--green-dark); }
  .pane-tab-icon:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  .pane-tab-icon .pane-tab-dot { position: absolute; top: 7px; left: calc(50% + 6px); margin: 0; }

  .card-name {
    margin: 0;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 400;
  }

  .badge {
    grid-area: badge;
    justify-self: end;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .badge-good { background: var(--green-bg); color: var(--green-dark); }
  .badge-wait { background: var(--amber-bg); color: var(--amber); }
  .badge-bad { background: var(--red-bg); color: var(--red); }
  /* Settings: one gear wherever a view, the brief, or an agent has settings:
     last on a page heading's row, in the Agents list's tools, or in the
     brief's bar. Quiet at rest; it tints on hover and while its sheet is open. */
  .settings-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
  .settings-toggle svg { flex: none; width: 18px; height: 18px; }
  @media (hover: hover) {
    .settings-toggle:hover {
      background: color-mix(in srgb, var(--ink) 6%, transparent);
      color: var(--ink);
    }
  }
  .settings-toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    color: var(--ink);
  }
  @media (prefers-reduced-motion: reduce) {
    .settings-toggle { transition: none; }
  }
  .instructions {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }

  .instructions-heading {
    margin: 0;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 400;
  }

  .instructions .text-card { margin-top: 12px; }
  .instructions-problem {
    margin: 6px 0 0;
    color: var(--muted);
    overflow-wrap: anywhere;
  }

  /* A block of text on a card of the grouped list's surface: the
     instructions panels' prose (instructions.js) and an agent's
     Instructions. */
  .text-card {
    padding: 4px var(--row-inset) 14px;
    border-radius: var(--radius-card);
    background: var(--raised);
  }
  p.text-card { padding-top: 14px; }
  /* The instructions panels' prose (instructions.js). */
  .goal-prose h4 { margin: 12px 0 0; font-size: 14px; }
  .goal-prose p,
  .goal-prose ul {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
  }
  .goal-prose ul { padding-left: 20px; }
  .goal-prose ol { margin: 6px 0 0; padding-left: 22px; overflow-wrap: anywhere; }

  /* The criteria's sources table scrolls on its own rather than widening the
     page. */
  .instructions-table {
    display: block;
    max-width: 100%;
    margin: 6px 0 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
  }
  .instructions-table th,
  .instructions-table td {
    padding: 4px 12px 4px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }


  .instructions-composer .composer-input {
    display: block;
    width: 100%;
  }

  .instructions-actions { margin-top: 8px; }
  /* Refresh: a quiet ghost box like the gear, not a bordered button. Todo
     and Ideas share it, and the thread's back and New chat take the same
     look as .ghost-button. */
  .refresh-button,
  .ghost-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
  .refresh-button svg { flex: none; width: 18px; height: 18px; }
  .ghost-button svg { flex: none; width: 20px; height: 20px; }
  @media (hover: hover) {
    .refresh-button:hover:not(:disabled),
    .ghost-button:hover:not(:disabled) {
      background: var(--hover-tint);
      color: var(--ink);
    }
  }
  .refresh-button:disabled,
  .ghost-button:disabled { opacity: 0.5; cursor: default; }
  @media (prefers-reduced-motion: reduce) {
    .refresh-button,
    .ghost-button { transition: none; }
  }
  /* Filter: the ghost button on a heading row (Feed, Artifacts) with the
     green control-dot while a filter is chosen, and the panel, the
     heading's next sibling, holding the side panel's rows as chips
     (core/filter-panel.js), as wide as the bar with the bar's own insets
     (--head-left and --head-right, defined in shell.css for both). In
     flow, it pushes the list down at rest as Todo's add form does, and
     sticks flush under the bar once the page scrolls; it is painted in the
     page's own surface, so the chips sit on the page. The chips wrap in
     rows, a group's heading (Sources, Agents) on a line of its own over
     its chips. */
  .filter-toggle { position: relative; }
  .ghost-button.filter-toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    color: var(--ink);
  }
  .filter-toggle.is-on { color: var(--ink); }
  .filter-panel {
    position: sticky;
    top: calc(var(--controls-h) - var(--page-top));
    z-index: 1;
    flex: none;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-height: 50vh;
    margin-bottom: 8px;
    padding: 4px var(--head-right) 16px var(--head-left);
    overflow-y: auto;
    background: var(--surface-page);
  }
  .filter-panel[hidden] { display: none; }
  .filter-options {
    display: flex;
    flex: 1 0 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .collection-search {
    display: flex;
    flex: 1 0 100%;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 13px;
  }
  .collection-search input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-page);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
  }
  .collection-search input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  /* A group's label over its chips, the side panel's group heading in
     type, on the chips' left edge. */
  .chip-group-label {
    flex: 1 0 100%;
    margin: 8px 0 -2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  /* A chip: one choice of a filter, fully round, a soft fill at rest and
     the accent's fill while chosen (aria-pressed), its name, then its count
     muted, with a source's badge or an agent's avatar (.chip-lead) at its
     left. The settings list's .pill is the same shape for a set of
     choices; a chip is a filter's one choice, so its chosen state is the
     stronger fill. */
  .chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--button-tint);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
  }
  .chip:hover { background: var(--button-tint-hover); }
  .chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  .chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chip-count { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
  .chip-lead { flex: none; width: 22px; height: 22px; margin-left: -7px; font-size: 10px; }
  .chip[aria-pressed="true"],
  .chip[aria-pressed="true"]:hover {
    background: var(--green);
    color: var(--on-accent);
  }
  .chip[aria-pressed="true"] .chip-count { color: inherit; }
  @media (max-width: 719.98px) {
    .chip { min-height: 36px; font-size: 14px; }
    .chip-lead { width: 24px; height: 24px; margin-left: -8px; }
  }
  /* Refresh turns while a Todo job or an Ideas refresh runs. */
  .refresh-button.is-spinning svg { animation: focus-spin 1s linear infinite; }
  @keyframes focus-spin {
    to { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .refresh-button.is-spinning svg { animation: none; opacity: 0.5; }
  }
  /* An agent's round picture, or its initials on a badge color (avatar.js). */
  .avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    color: var(--on-accent);
    font-weight: 600;
    line-height: 1;
    user-select: none;
  }
  .avatar-small { width: 24px; height: 24px; font-size: 10px; }
  .avatar-large { width: 28px; height: 28px; font-size: 12px; }
  .avatar-image { background: var(--side); }
  /* Beside a name inside a sentence (delegation lines). */
  .avatar-inline { margin-right: 6px; vertical-align: middle; }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .avatar[data-initials]::before { content: attr(data-initials); }
  .avatar-badge-0 { background: var(--badge-0); }
  .avatar-badge-1 { background: var(--badge-1); }
  .avatar-badge-2 { background: var(--badge-2); }
  .avatar-badge-3 { background: var(--badge-3); }
  .avatar-badge-4 { background: var(--badge-4); }
  .avatar-badge-5 { background: var(--badge-5); }
  .drawer-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* .row-menu-wrap's margins and .row-menu's top fit a Todo card; Goals
     overrides the margin. The views reveal .row-more on hover. */
  .row-menu-wrap { position: relative; margin: -10px 0 -10px; }
  .row-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
  }
  .row-more svg { fill: currentColor; }
  .row-more[aria-expanded="true"] { opacity: 1; }
  .row-more:hover { background: var(--hover-tint); color: var(--ink); }
  /* A menu or popover is a floating card (.menu-surface): the float
     surface, the card's corners, a little padding, and entries of one
     height (--menu-row) with their own corners: the row menus, the app
     menu, the composer's model, To, and @ menus, quick chat's agent menu,
     and the notifications. .menu-entry is an entry; a divided one starts
     a group under a hairline. */
  .menu-surface {
    padding: 6px;
    border: 1px solid var(--float-line);
    border-radius: var(--radius-card);
    background: var(--float);
    box-shadow: 0 8px 24px var(--shadow-pop);
  }
  .menu-entry {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: var(--menu-row);
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-entry);
    background: none;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .menu-entry:hover { background: var(--hover-tint); }
  .row-menu {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 7;
    display: grid;
    width: 188px;
  }
  .row-menu-entry[aria-current="true"] { color: var(--green); font-weight: 600; }
  .row-menu-divided { position: relative; margin-top: 7px; }
  .row-menu-divided::before {
    content: "";
    position: absolute;
    top: -4px;
    right: 6px;
    left: 6px;
    height: 1px;
    background: var(--float-line);
  }
  /* A heading over a row menu's entries: an agent's Move to, a Settings
     row's menu. */
  .row-menu-label {
    margin: 0;
    padding: 8px 12px 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }
  /* An item open in place of its view's list (Artifacts, Goals): Back,
     the title, and the item's ⋯ or action on one row. */
  .open-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-left: -10px;
  }
  .open-title {
    flex: 1;
    min-width: 0;
    margin: 6px 0 0;
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .open-head .row-menu-wrap { margin: -6px 0 0; }
  .open-head .row-more { opacity: 1; }
  .dropline {
    height: 2px;
    margin: -5px 0;
    border-radius: 2px;
    background: var(--green);
    list-style: none;
  }
  .drawer {
    margin-top: 32px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .drawer + .drawer { margin-top: 16px; }
  .drawer .drawer-rows { gap: 2px; margin-top: 10px; }
  /* A drawer without the rule above it: Goals' "Done and dropped" and the
     agent pane's Advanced. */
  .drawer.drawer-heading { padding-top: 0; border-top: 0; }
  /* A fold (a <details>'s <summary>, or a button with aria-expanded), the
     side panel's Routines and Hidden folds' and its group headings' shape:
     a small chevron that turns down as it opens, then the grouped list's
     label text, never the browser's marker. .fold-mark is
     the chevron alone, on a summary that keeps its own text (a thread's
     folded card, a run's reply). */
  .fold,
  .fold-mark {
    list-style: none;
    cursor: pointer;
  }
  .fold::-webkit-details-marker,
  .fold-mark::-webkit-details-marker { display: none; }
  .fold {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
  }
  .fold:hover { color: var(--ink); }
  .fold::before,
  .fold-mark::before {
    content: "";
    display: inline-block;
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0 10px 2px 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 120ms ease;
  }
  details[open] > .fold::before,
  details[open] > .fold-mark::before,
  .fold[aria-expanded="true"]::before { margin-bottom: 4px; transform: rotate(45deg); }
  .fold:focus-visible,
  .fold-mark:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
  @media (prefers-reduced-motion: reduce) {
    .fold::before,
    .fold-mark::before { transition: none; }
  }
  .drawer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 2px;
    color: var(--ink-soft);
  }
  .drawer-row-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .pill {
    flex: none;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: none;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  .pill:hover { border-color: var(--green); color: var(--green); }
  @media (hover: none) {
    .row-more { opacity: 1; }
  }
  .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    padding: 0;
  }
  .composer {
    padding: 12px 24px;
    padding-bottom: max(12px, var(--composer-inset-bottom, env(safe-area-inset-bottom)));
    border-top: 1px solid var(--line);
  }
  /* The thread composer's box: the input over the bar, ringed while focused. */
  .composer-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--composer);
    box-shadow: 0 2px 10px var(--shadow-pop);
    cursor: text;
  }
  .composer-box:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 1px var(--green), 0 2px 10px var(--shadow-pop);
  }
  /* The chat composer keeps 16px type on a desk too: it is the thread's
     own box, not a form field (tokens.css). */
  .composer-box .composer-input {
    display: block;
    flex: none;
    width: 100%;
    min-height: 0;
    max-height: 244px;
    padding: 12px 18px 2px;
    font-size: 16px;
    overflow-y: hidden;
    border: 0;
    border-radius: 24px 24px 0 0;
    background: transparent;
    resize: none;
    outline: none;
  }
  /* Below its max-height the input is as tall as the draft and never
     scrolls; growInput (thread-view.js) marks it full past that. */
  .composer-box .composer-input.composer-input-full { overflow-y: auto; }
  .composer-box .composer-input::placeholder { color: var(--faint); opacity: 1; }
  .composer-box .composer-input:disabled { background: transparent; cursor: default; }
  .composer-box:has(.composer-input:disabled) {
    background: var(--bg);
    box-shadow: none;
    cursor: default;
  }
  .composer-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 4px 4px 10px;
    cursor: default;
  }
  .composer-attach {
    display: flex;
    align-items: center;
    margin-right: auto;
  }
  /* Files dragged over the box: the ring shows it will take them. */
  .composer-box.composer-box-drop {
    border-color: var(--green);
    background: var(--green-bg);
    box-shadow: 0 0 0 2px var(--green), 0 2px 10px var(--shadow-pop);
  }
  .composer-files {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px 4px;
    cursor: default;
  }
  .composer-label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 13px;
  }

  .composer-row {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }
  .composer-input {
    flex: 1;
    min-width: 0;
    min-height: var(--field-height);
    padding: var(--field-pad-y) var(--field-pad-x);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: var(--field-font);
    line-height: 1.4;
    resize: vertical;
  }
  .composer-input:disabled { background: var(--bg); color: var(--muted); }

  .composer-reason {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
  }
  .composer-tools {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .link-button {
    min-height: var(--control-height);
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--green);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
  }

  /* The headings that split a view into its parts: the Feed's days, the
     Ideas topics, and an artifact's History. */
  .section-heading {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
  }

  /* A form: each field a label over the field, the field on the raised
     surface with the card's look (a field inside a card sits a step back,
     --field-inset). Focus rings the field in the accent, as the thread's
     composer box does. A field's size is the device's (tokens.css): a
     phone's 44px and 16px, a desk's in proportion to the body text.
     .settings-select is General's and Notifications' fields, the same
     field; a plain .composer-input (Todo's, Ideas', and the brief's
     forms) is too. */
  .form-field {
    display: grid;
    gap: 6px;
  }
  /* A label starts at its field's left edge, as General's do. */
  .form-label,
  .form-legend,
  .composer-label {
    padding: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
  }
  .form-input,
  .settings-select,
  .composer:not(.thread-composer) .composer-input {
    width: 100%;
    min-width: 0;
    min-height: var(--field-height);
    padding: var(--field-pad-y) calc(var(--row-inset) - 1px);
    border: 1px solid var(--field-line);
    border-radius: var(--radius-control);
    background: var(--raised);
    color: var(--ink);
    font: inherit;
    font-size: var(--field-font);
    line-height: 1.4;
  }
  /* A select keeps the field's height and look on every engine (Safari
     draws its own short control otherwise), its caret two strokes in the
     muted ink at the right. */
  select:is(.settings-select, .form-input) {
    padding-right: calc(var(--row-inset) + 22px);
    background-image:
      linear-gradient(45deg, transparent calc(50% - 0.75px), var(--muted) calc(50% - 0.75px), var(--muted) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
      linear-gradient(-45deg, transparent calc(50% - 0.75px), var(--muted) calc(50% - 0.75px), var(--muted) calc(50% + 0.75px), transparent calc(50% + 0.75px));
    background-position: right calc(var(--row-inset) + 5px) center, right var(--row-inset) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  :is(.settings-list, .settings-rows, .menu-surface) :is(.form-input, .settings-select) { background-color: var(--field-inset); }
  :is(.form-input, .settings-select, .composer-input):focus { outline: none; }
  :is(.form-input, .settings-select, .composer:not(.thread-composer) .composer-input):focus-visible {
    border-color: var(--green);
    box-shadow: 0 0 0 1px var(--green);
  }
  :is(.form-input, .settings-select):disabled {
    color: var(--muted);
    cursor: default;
  }
  textarea.form-input {
    min-height: var(--field-area);
    resize: vertical;
  }
  .form-fieldset {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .form-fieldset .form-legend { margin-bottom: 4px; }
  .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
  }
  .form-check input:not([role="switch"]) {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--green);
  }
  /* A switch: any checkbox that says it is one (role="switch"), drawn as a
     track and a knob, on in the accent. It stays the native checkbox, so
     the keyboard, the label, and a screen reader's "on" and "off" are the
     browser's own. .form-switch is a form's row of one on a card: the name
     at the left, the switch at the right. */
  input[type="checkbox"][role="switch"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: var(--switch-off);
    cursor: pointer;
    transition: background-color 150ms ease;
  }
  input[type="checkbox"][role="switch"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 150ms ease;
  }
  input[type="checkbox"][role="switch"]:checked { background: var(--green); }
  input[type="checkbox"][role="switch"]:checked::before { transform: translateX(18px); }
  input[type="checkbox"][role="switch"]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  input[type="checkbox"][role="switch"]:disabled { opacity: 0.45; cursor: default; }
  @media (prefers-reduced-motion: reduce) {
    input[type="checkbox"][role="switch"],
    input[type="checkbox"][role="switch"]::before { transition: none; }
  }
  .form-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--row-height);
    padding: 0 var(--row-inset);
    border-radius: var(--radius-card);
    background: var(--raised);
    font-weight: 500;
    cursor: pointer;
  }
  .form-switch > input { order: 2; }
  .form-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
  }
  /* A field's note lines up with its label and field. */
  :is(.form-field, .details-form) > .form-note { padding: 0; }
  .form-problems {
    margin: 0;
    padding-left: 1.2em;
    color: var(--red);
    font-size: 14px;
  }
  .form-actions {
    display: flex;
    gap: 8px;
  }

  /* A memory: its lines, each over a muted line of its day and source,
     its topics, and Edit's one box, which grows with its text. */
  .memory-head .memory-edit { margin-left: auto; }
  .memory-intro { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
  .memory-entries,
  .memory-topics {
    display: grid;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
  }
  .memory-topics { gap: 0; }
  .memory-entry-text { margin: 0; overflow-wrap: anywhere; }
  .memory-entry-meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
  .memory-source {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }
  .memory-source:hover { color: var(--ink); }
  .memory-line { overflow-wrap: anywhere; }
  .memory-heading { font-weight: 600; }
  .memory-topic-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 8px 0;
    border: 0;
    border-top: 1px solid var(--line);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  .memory-topic-button svg { flex: none; color: var(--muted); }
  .memory-topic-button:hover .memory-topic-summary { text-decoration: underline; }
  .memory-edit-form { display: grid; gap: 8px; min-width: 0; }
  .memory-topic-name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  textarea.form-input.memory-box {
    width: 100%;
    min-height: 160px;
    box-sizing: border-box;
    /* A field's type size (tokens.css), so a phone does not zoom on focus. */
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1.45;
    overflow: hidden;
    resize: none;
  }
  .memory-refusal { margin: 0; }

  /* A settings list (core/settings-rows.js), the grouped list every
     settings page, dialog, and pane takes: a small muted label over a card
     of rows on the raised surface, a hairline between rows inside the card
     (inset to the rows' text), and space between groups. A row is its
     title over one muted line of state, the agents' pills, and one value,
     switch, or chevron at the right, with anything of the row's full width
     under it. The pills are .pill, a chosen one the model menu's chosen
     effort; above four, a count opens the row menu's popover of
     checkboxes. The Devices card is the same card, one per device.
     .settings-rows is the same card holding label-and-field rows.
     .settings-list-foot is a muted line under a card. A card of
     .settings-list-actions holds whole-row buttons (.settings-list-button),
     a destructive one's text red (.is-danger): Disconnect, Sign out, an
     agent's Archive and Delete. */
  .settings-list-block + .settings-list-block { margin-top: 24px; }
  .settings-list-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 0 var(--row-inset);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
  }
  .settings-list-note { margin: -2px var(--row-inset) 8px; color: var(--muted); font-size: 13px; }
  .settings-list-foot { margin: 6px var(--row-inset) 0; color: var(--muted); font-size: 13px; }
  .settings-list,
  .settings-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    border-radius: var(--radius-card);
    background: var(--raised);
  }
  .settings-rows { padding: 0 var(--row-inset); }
  .settings-list-row { border: 0; }
  .settings-list > :not([hidden]) ~ :not([hidden]) {
    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-list-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: var(--row-height);
    padding: 12px 12px 12px var(--row-inset);
  }
  .settings-list-main { display: grid; flex: 1 1 0; gap: 3px; min-width: 0; }
  .settings-list-title-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
  .settings-list-title { font-weight: 500; overflow-wrap: anywhere; }
  .settings-list-tag { color: var(--muted); font-size: 13px; }
  .settings-list-state { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  .settings-list-state.is-bad { color: var(--red); }
  .settings-list-action { display: flex; flex: none; align-items: center; gap: 8px; }
  .settings-list-action > input[type="checkbox"][role="switch"] { margin: 0 4px; }
  .settings-list-action .row-menu-wrap { margin: 0; }
  .settings-list-more { opacity: 1; }
  .settings-list-below { display: grid; gap: 8px; padding: 0 var(--row-inset) 14px; }
  /* A row that opens something: the whole line is the button, its hover
     the card's own corners at the card's ends. */
  .settings-list-open {
    width: 100%;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .settings-list > :first-child > .settings-list-open { border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); }
  .settings-list > :last-child > .settings-list-open { border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); }
  .settings-list-open:hover { background-color: var(--hover-tint); }
  .settings-list-chevron { flex: none; color: var(--muted); }
  a.settings-list-open { text-decoration: none; }
  /* A row that is one checkbox's or switch's label: the name at the left,
     the control at the right (Wallet's agents). */
  .settings-list-check {
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--row-height);
    padding: 12px var(--row-inset);
    font-weight: 500;
    cursor: pointer;
  }
  /* A group with no rows says so in a card of its own. */
  .settings-list-empty {
    margin: 0;
    padding: 14px var(--row-inset);
    border-radius: var(--radius-card);
    background: var(--raised);
    color: var(--muted);
  }
  .settings-list-actions { overflow: hidden; }
  .settings-list-button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--row-height);
    padding: 0 var(--row-inset);
    border: 0;
    background-color: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  .settings-list-button:hover:not(:disabled) { background-color: var(--hover-tint); }
  .settings-list-button:disabled { color: var(--faint); cursor: default; }
  .settings-list-button.is-danger:not(:disabled) { color: var(--red); }
  /* A row that opens a text under it, the Feed's takeaway shape: its
     chevron turns down once the text shows. */
  .settings-list-turn { transition: transform 120ms ease; transform: rotate(-90deg); }
  .settings-list-toggle[aria-expanded="true"] .settings-list-turn { transform: rotate(0deg); }
  .settings-list-toggle:hover .settings-list-chevron,
  .settings-list-toggle[aria-expanded="true"] .settings-list-chevron { color: var(--ink); }
  .settings-list-panel { padding: 0 16px 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
  .settings-list-panel[hidden] { display: none; }
  .settings-list-after { color: var(--muted); }
  /* A fact: its label over its value. */
  .settings-list-fact { display: grid; gap: 3px; padding: 12px var(--row-inset); }
  .settings-list-fact dd { margin: 0; }
  .settings-list-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
  .settings-list-pill { min-height: 28px; padding: 0 10px; font-size: 12px; }
  .settings-list-pill[aria-pressed="true"] {
    border-color: var(--green);
    background: var(--green-bg);
    color: var(--ink);
    font-weight: 600;
  }
  .settings-list-pill[aria-disabled="true"] { cursor: default; opacity: 0.6; }
  .settings-list-popup-wrap { position: relative; }
  .settings-list-count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 0 6px 0 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
  }
  .settings-list-count:hover,
  .settings-list-count[aria-expanded="true"] { background: var(--hover-tint); color: var(--ink); }
  .settings-list-popover { top: 36px; z-index: 9; width: 200px; padding: 8px 14px; }
  /* A settings row's menu: as wide as its longest label up to the
     screen's edge, each entry one line, a mark before its label where it
     has one (the heading's folded ⋯, shell.css). Under a named button it
     sits just below it. */
  .settings-list-menu { z-index: 9; width: max-content; min-width: 200px; max-width: min(300px, calc(100vw - 32px)); }
  .settings-list-choose + .settings-list-menu { top: calc(100% + 6px); }
  .settings-list-menu .menu-entry { gap: 10px; }
  .row-menu-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-list-menu [role="menuitemcheckbox"] { justify-content: space-between; gap: 8px; }
  .settings-list-menu [aria-checked="true"]::after { content: "✓"; color: var(--green); font-weight: 600; }
  .settings-list-popover[hidden],
  .settings-list-menu[hidden] { display: none; }
  /* A product's logo beside its name (core/brands.js): its own mark in a
     20px slot, drawn through a mask in its color (the thread's
     .provider-icon); a provider without one, its first letter on a
     neutral tile; an API key, the plain key glyph. */
  .brand-mark {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
  }
  .brand-mark-logo {
    background-color: var(--brand-color, var(--ink));
    -webkit-mask: no-repeat center / 18px 18px;
    mask: no-repeat center / 18px 18px;
  }
  .brand-mark-letter {
    border-radius: 5px;
    background: var(--hover-tint);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }
  .brand-mark-letter::before { content: attr(data-letter); }
  .brand-mark-glyph { color: var(--ink-soft); }
  /* A sign-in's code to enter elsewhere (Rows.code): large enough to read
     across a room, in the app's type with its own hyphen, in a field-like
     box, Copy beside it. */
  .settings-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .settings-code-copy { align-self: stretch; height: auto; }
  .settings-code-text {
    display: inline-flex;
    align-items: center;
    min-height: var(--field-height);
    padding: 6px 16px;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-control);
    background: var(--field-inset);
    color: var(--ink);
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    user-select: all;
  }
  .settings-mark {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--mark-color, var(--ink-soft)) 12%, var(--paper));
    color: var(--mark-color, var(--ink-soft));
  }
  /* A provider's own mark keeps its colors, on a neutral tile in both
     themes (core/settings-rows.js names each source). */
  .settings-mark-brand {
    background: color-mix(in srgb, var(--ink) 4%, var(--paper));
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .settings-mark-brand svg { width: 20px; height: 20px; }
  .settings-mark-small { width: 28px; height: 28px; border-radius: 7px; }
  .settings-mark-small svg { width: 16px; height: 16px; }
  .settings-cards { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .settings-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 14px;
    padding: 14px 12px 14px var(--row-inset);
    border: 0;
    border-radius: var(--radius-card);
    background: var(--raised);
  }

  @media (max-width: 719.98px) {
    /* A row's title a step larger on a phone, as Settings' page list's is. */
    .settings-list-title,
    .settings-list-check,
    .settings-list-button,
    .form-switch { font-size: 15px; }
    .row-more { opacity: 1; }
    /* The pills wrap under the title; the action stays at its right. */
    .settings-list-line > .settings-list-pills { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .settings-list-popover { right: auto; left: 0; }
  }
}