/* ==========================================================================
   Settings: what the agents use.
   Three tiles (Accounts · Models · Email), each as tall as what it holds,
   provider groups, one row pattern:
     [marker]  name (Strong)                       [more] [figure | marks] [control]
               meta (Meta)
   Every word in ink; hierarchy from size, weight and space. Controls are the
   kit's, untouched: switch (small, in rows), checkbox, progress, outline chip, buttons.
   Only the exception is marked. What waits for a person (a sign-in that expired,
   no inbox to send from) is white, raised with --raise, first in its list, with
   the one needs-you marker; connected has no mark, off says so in its chip or switch.
   ========================================================================== */
.view-settings .page { padding-bottom: 40px; }

/* ---------- Head ---------- */
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; padding: 8px 2px 0; margin-bottom: 20px; }

/* ---------- Three tiles, each as tall as its content ---------- */
.st-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.st-sec { animation: rise var(--dur-3) var(--ease) both; }
.st-body { margin-top: 16px; }

/* ---------- Provider groups: the name above its rows, space between groups ---------- */
.st-group + .st-group { margin-top: 20px; }
.st-group-head { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 16px; margin-bottom: 4px; line-height: 16px; }
.st-group-note { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.st-list { display: flex; flex-direction: column; gap: 2px; margin: 0 -10px; }
.st-none { padding: 8px 10px; }

/* ---------- One row pattern ---------- */
.st-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main end" "extra extra";
  align-items: center; column-gap: 12px; min-width: 0; padding: 8px 10px; border-radius: var(--r-2); cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}
.st-row.has-dot { grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-areas: "dot main end" ". extra extra"; }
.st-row:hover, .st-row:has(.st-more[aria-expanded="true"]) { background: var(--hover); }
.st-row > .dot { grid-area: dot; align-self: start; margin-top: 6px; }
.st-row-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.st-row-title, .st-row-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row-title { line-height: 20px; }
.st-row-meta { line-height: 16px; }
/* At least an agent mark tall, so rows keep one rhythm whether they carry marks or only a switch. */
.st-row-end { grid-area: end; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; min-height: 24px; }
.st-row.is-fresh { animation: st-fresh 2.4s var(--ease); }
@keyframes st-fresh { from { background: var(--fill); } }

/* "More" appears where the pointer is; its place is kept so nothing shifts. */
.st-more { margin: -4px; opacity: 0; transition: opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.st-row:hover .st-more, .st-row:focus-within .st-more, .st-more[aria-expanded="true"] { opacity: 1; }

/* A figure: the number on the name's line, its scale or its unit on the meta line. */
.st-fig { flex: none; display: flex; flex-direction: column; align-items: flex-end; align-self: stretch; min-width: 64px; }
.st-fig-n { line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-fig-l { line-height: 16px; white-space: nowrap; }
.st-fig > .progress { width: 64px; margin: 6px 0; }

/* Inline rename: the field takes the text's place at the text's size, without moving the row. */
.view-settings .st-rename { height: 26px; margin: -3px 0 -3px -8px; padding: 0 8px; width: calc(100% + 8px); font-weight: 500; }
.view-settings .st-row-meta .st-rename { width: 60%; height: 22px; margin: -3px 0 -3px -8px; font-size: var(--fs-meta); font-weight: 400; }
.st-row-meta:has(.st-rename) { overflow: visible; }

/* ---------- Accounts: a sign-in that expired (or a key that stopped working) waits for a person ---------- */
.st-row.is-expired { margin: 4px 0 6px; padding-top: 12px; padding-bottom: 12px; border-radius: var(--r-3); background: var(--surface); box-shadow: var(--raise); }
.st-row.is-expired:hover, .st-row.is-expired:has(.st-more[aria-expanded="true"]) { background: var(--surface); }

/* ---------- Keys: sealed on the server, shown by their last four ---------- */
.st-key-line { display: flex; align-items: center; gap: 2px; min-width: 0; height: 16px; }
.st-key-mask { margin-right: 6px; line-height: 16px; white-space: nowrap; }

/* ---------- Models: who uses each one, as agent marks (the same avatars as everywhere) ---------- */
.st-agents { display: flex; align-items: center; gap: 4px; }
.st-agent { display: inline-grid; padding: 0; border: 0; background: none; border-radius: var(--r-1); cursor: pointer; }
.st-agent .av { transition: background var(--dur-1) var(--ease); }
.st-agent:hover .av { --av-bg: var(--fill-2); }

/* ---------- Email ---------- */
.st-sync { display: inline-flex; align-items: center; gap: 6px; }
.st-check { grid-area: extra; justify-self: start; margin-top: 10px; }
/* While the operator keeps sending off: the first thing in the tile (after what waits for a person) */
.st-body > .st-dry { margin-bottom: 20px; }

/* The foot: the way to the sending rules, right under the inboxes. With no inbox to send from it moves to the top of the tile, raised. */
.st-foot.is-human { margin: 16px -10px 0; padding: 0; border-radius: var(--r-3); background: var(--surface); box-shadow: var(--raise); }
.st-notice {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 14px 12px 14px 10px;
  border: 0; border-radius: inherit; background: none; color: var(--ink); text-align: left; cursor: pointer;
}
.st-notice-text { line-height: 20px; }
.st-notice > .ic { transition: transform var(--dur-2) var(--ease); }
.st-notice:hover > .ic { transform: translateX(2px); }

/* ==========================================================================
   Flows (modals): choose, sign in on the provider's page, done.
   ========================================================================== */
.st-flow { animation: rise var(--dur-2) var(--ease); }

/* Choosing a provider: the shared list (.list-divided > button.list-row), an icon tile like an agent's, a chevron. */
.st-choices { margin: -8px -12px; }
.st-choice { gap: 14px; padding: 12px; }
.st-choice-icon { flex: none; width: 40px; height: 40px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--fill); }
.st-choice > .ic:last-child { transition: transform var(--dur-2) var(--ease); }
.st-choice:hover > .ic:last-child { transform: translateX(2px); }

/* Steps: the shared look (.steps, as UI.steps), with room for a field, a checkbox or a link inside a step.
   Your turn = the ink ring; waiting for the provider = the same ring, its dot breathing. */
.st-steps { margin: -6px 0; }
.st-steps .step { gap: 12px; padding: 10px 0; }
.st-steps .step:not(:last-child)::before { top: 32px; bottom: -8px; }
.st-steps .step.is-live .step-ic::after { animation: breathe-dot var(--breath) var(--ease-io) infinite; }
.st-steps .st-label { margin-top: 12px; }
.st-steps .st-code { margin-top: 12px; font-family: var(--mono); font-size: var(--fs-meta); }
.st-flow-check { align-self: flex-start; }
.st-reopen { align-self: flex-start; margin-top: 8px; }

.st-form { display: flex; flex-direction: column; gap: 20px; }
.st-modal .st-key-input { font-family: var(--mono); font-size: var(--fs-meta); }

/* Connecting an inbox: the address and its sign-in in pairs, then sending and reading, each parted by a hairline */
.st-mail { gap: 16px; }
.st-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-cols-server { display: grid; grid-template-columns: minmax(0, 1fr) 88px 128px; gap: 12px; }
.st-part { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.st-part > .field-label { align-self: flex-start; }
.st-mail .st-dry { margin-top: 4px; }

.st-seg { display: grid; width: 100%; }
.st-search { margin-top: 16px; }
/* A fixed height, so the dialog keeps its place while you switch provider or search (seven rows; the search's room when it is hidden). */
.st-picks { display: flex; flex-direction: column; gap: 2px; height: 292px; margin: 12px -10px 0; overflow: auto; }
.st-search[hidden] + .st-picks { height: 346px; }
.st-pick { display: flex; gap: 12px; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: var(--r-2); transition: background var(--dur-1) var(--ease); }
.st-pick:hover { background: var(--hover); }
.st-pick:has(input:checked) { background: var(--fill); }
.st-pick-name { flex: none; white-space: nowrap; }
.st-pick-note { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.st-picks > .empty { flex: 1 1 auto; }

/* ---------- Smaller screens (1280×800): the same rhythm, a step tighter ---------- */
@media (max-height: 860px) {
  .view-settings .page { padding-bottom: 24px; }
  .st-head { padding-top: 4px; margin-bottom: 16px; }
  .view-settings .st-sec { padding-top: 16px; padding-bottom: 16px; }
  .st-body { margin-top: 12px; }
  .st-group + .st-group { margin-top: 16px; }
  .st-row { padding-top: 6px; padding-bottom: 6px; }
  .st-row.is-expired { padding-top: 10px; padding-bottom: 10px; }
  .st-check { margin-top: 8px; }
}