/* Settings: the account, its team, assistants, app connections and what it pays for, and the page that cancels
   part of that. Every class here starts with st-; the page is built from the shared zones, rows and lists. */

/* ---------- Small parts of rows and settings ---------- */
.phead-ic.st-ic-bad { --rtc: var(--bad); }
.st-value { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-email { font-size: var(--fs-s); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.st-value form { display: flex; margin: 0; }
/* A command that needs its own fields (a new email, a password, a code) on one line. */
.st-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.st-line .input { flex: 1 1 160px; min-width: 0; }
.st-line .btn { flex: none; }
.st-locked, .st-warn { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: var(--fs-xs); color: var(--ink-4); }
.st-locked svg, .st-warn svg { width: 14px; height: 14px; flex: none; }
.st-warn { color: var(--warn); }
.st-none { font-size: var(--fs-s); color: var(--ink-4); }
.st-danger-list { margin: 0 0 6px; padding-left: 18px; font-size: var(--fs-s); line-height: 1.7; color: var(--ink-3); }
.st-danger-list li::marker { color: var(--bad); }

/* Two-factor: the setup key, the code and the recovery codes. */
.st-key { font-family: var(--mono); font-size: var(--fs-m); font-weight: 600; letter-spacing: .08em; color: var(--ink); }
.st-line .st-otp { flex: 0 1 150px; font-family: var(--mono); letter-spacing: .2em; }
.st-codes { display: grid; grid-template-columns: repeat(5, max-content); gap: 6px 22px; margin: 0 0 14px; font-family: var(--mono); font-size: var(--fs-s); color: var(--ink); }

/* People, devices and assistants in front of their names. */
.st-person {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand-text) 12%, var(--panel)); color: var(--brand-text); font-size: var(--fs-s); font-weight: 700;
}
.st-device { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--r-m); background: var(--panel-3); color: var(--ink-3); }
.st-device svg { width: 16px; height: 16px; }
.st-2fa { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-s); color: var(--ink-3); }
.st-2fa svg { width: 15px; height: 15px; }
.st-2fa.on { color: var(--ok); }
a.st-app-name { color: inherit; }
a.st-app-name:hover { color: var(--brand-text); }
.st-agent { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-s); font-weight: 600; }
.st-agent svg { width: 14px; height: 14px; }

/* ---------- The lists of the tabs: every column but the first a fixed width ---------- */
.st-sessions { --rl-cols: minmax(0, 1fr) 140px 120px 160px 120px 32px; --rl-cols-md: minmax(0, 1fr) 150px 120px 32px; }
.st-team { --rl-cols: minmax(0, 1fr) 140px 110px 110px 32px; --rl-cols-md: minmax(0, 1fr) 130px 32px; }
.st-assistants { --rl-cols: minmax(0, 1fr) 120px 160px 320px 32px; --rl-cols-md: minmax(0, 1fr) 260px 32px; }

/* App connections and the apps beside them: their heads, rows and feet sit on the same lines, the buttons share a width. */
.st-conns { --rl-cols: 96px minmax(0, 1fr) 100px 80px 124px 32px; }
.st-apps { --rl-cols: 96px minmax(0, 1fr) 160px; --rl-btn: 160px; }
.st-split .toolbar .find-field.grow { flex-basis: 180px; }

/* ---------- Email preferences: a row per kind of email ---------- */
.st-prefs { display: grid; }
.st-pref { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.st-pref:first-child { border-top: 0; padding-top: 4px; }
.st-pref .head-ic { width: 34px; height: 34px; border-radius: var(--r-m); }
.st-pref .head-ic svg { width: 16px; height: 16px; }
.st-pref b { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
.st-pref span:not(.sl):not(.itip):not(.head-ic) { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-4); }

/* The roles in the invite panel. */
.st-roles { margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); color: var(--ink-3); }
.st-roles li { padding: 8px 0; border-top: 1px solid var(--line-soft); line-height: 1.5; }
.st-roles li:first-child { border-top: 0; padding-top: 0; }
.st-roles b { color: var(--ink); }

/* ---------- Plan and billing ---------- */
.st-lines { --rl-cols: minmax(0, 1fr) 180px 300px 260px 120px; --rl-cols-md: minmax(0, 1fr) 170px 110px; }
.head-ic.st-ic { width: 34px; height: 34px; border-radius: var(--r-m); }
.head-ic.st-ic svg { width: 16px; height: 16px; }
.st-kind { font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.st-detail { font-size: var(--fs-s); line-height: 1.5; color: var(--ink-3); }
.st-price { font-family: var(--mono); font-size: var(--fs-s); font-weight: 600; color: var(--ink); white-space: nowrap; }
.st-price.muted { font-weight: 500; color: var(--ink-4); }
.rl-row.st-total { min-height: 52px; background: var(--panel-2); font-weight: 600; }
.rl-row.st-total:hover { background: var(--panel-2); }
.fig-big.st-fig-text { font-family: var(--sans); font-size: 22px; letter-spacing: -.01em; }

.st-plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.st-plan-name { font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: var(--tr-tight); text-transform: capitalize; color: var(--ink); }
.st-plan-price { font-family: var(--mono); font-size: var(--fs-m); color: var(--ink-2); }
.st-plan-note { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-4); }
.st-plan-note svg { width: 14px; height: 14px; flex: none; }
.st-plan-note.st-first { margin-top: 0; }
.st-plan-note.st-info { color: var(--brand-text); }
.st-gap { margin-top: 12px; }

/* Figures or choices side by side, split by lines like the figures of a page. */
.st-tiles { display: grid; grid-template-columns: repeat(var(--st-tiles, 3), minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-tiles.n1 { --st-tiles: 1; }
.st-tiles.n2 { --st-tiles: 2; }
.st-tiles.n4 { --st-tiles: 4; }
.st-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 16px 18px; }
.st-tile:first-child { padding-left: 0; }
.st-tile:last-child { padding-right: 0; }
.st-tile + .st-tile { border-left: 1px solid var(--line); }
.st-k { font-size: var(--fs-xs); color: var(--ink-4); }
.st-tile b { font-size: var(--fs-l); font-weight: 600; letter-spacing: var(--tr-snug); color: var(--ink); font-variant-numeric: tabular-nums; }
.st-tile small { font-size: var(--fs-xs); color: var(--ink-4); }
.st-tile.on b { color: var(--ok); }
.st-do { margin-top: auto; padding-top: 10px; }
.st-do form { margin: 0; }
.st-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-tiles.two .st-tile { padding-left: 18px; padding-right: 0; border-left: 0; }
.st-tiles.two .st-tile:nth-child(odd) { padding-left: 0; padding-right: 18px; }
.st-tiles.two .st-tile:nth-child(even) { border-left: 1px solid var(--line); }
.st-tiles.two .st-tile:nth-child(n + 3) { border-top: 1px solid var(--line); }

.st-places { --rl-cols: minmax(0, 1fr) 48px 56px 60px 84px; }
.st-places.has-next { --rl-cols: minmax(0, 1fr) 48px 56px 60px 64px 84px; }
.st-pkg { min-width: 0; font-size: var(--fs-s); font-weight: 600; line-height: 1.35; color: var(--ink); }
.st-next b { color: var(--brand-text); }
/* What follows a list in a zone whose list runs to its edges. */
.st-pad { padding: 4px var(--zr, var(--pad-x)) 20px var(--zl, var(--pad-x)); }
.st-pad:empty { display: none; }
.st-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.st-notice > div { flex: 1 1 240px; min-width: 0; }
.st-notice b { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
.st-notice span:not(.itip) { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-4); }

.st-invoices { --rl-cols: minmax(0, 1fr) 120px 96px 80px; }

/* ---------- Cancelling: one row per thing paid for, each with its own Cancel ---------- */
.st-cx { --rl-cols: 96px minmax(0, 1fr) 170px 120px 130px 110px; --rl-cols-md: 96px minmax(0, 1fr) 130px 110px; }
.st-cx .rl-name small { overflow-wrap: anywhere; }

/* ---------- Narrower pages ---------- */
@container page (max-width: 1180px) {
  .st-codes { grid-template-columns: repeat(4, max-content); }
}

@container page (max-width: 820px) {
  .st-tiles:not(.two) { grid-template-columns: minmax(0, 1fr); }
  .st-tiles:not(.two) .st-tile { padding-left: 0; padding-right: 0; }
  .st-tiles:not(.two) .st-tile + .st-tile { border-left: 0; border-top: 1px solid var(--line); }
}

@container page (max-width: 640px) {
  .st-codes { grid-template-columns: repeat(2, max-content); }
  .st-tiles.two { grid-template-columns: minmax(0, 1fr); }
  .st-tiles.two .st-tile, .st-tiles.two .st-tile:nth-child(odd) { padding-left: 0; padding-right: 0; border-left: 0; }
  .st-tiles.two .st-tile + .st-tile { border-top: 1px solid var(--line); }
  .st-pref { grid-template-columns: minmax(0, 1fr) auto; }
  .st-pref .head-ic { display: none; }
  .st-line .input { flex-basis: 100%; }
  .acard { grid-template-columns: auto 1fr; }
  .acard .ac-actions { grid-column: 1 / -1; }
}