/* The CRM page: the sign-in pages and Settings, with the keyboard shortcuts and the email sequences (js/settings.js).
   Loaded after marketing.css, before last.css. Use the tokens of ws.css and app.css; never a raw color. */

/* ===== Sign-in ===== */
/* A calm product sign-in: the lockup, one card (32px padding; 20px on a phone), app-scale type, one solid button, each
   error under its own field. The page follows the theme of the workspace; the QR code stays dark on white. */
body.is-signin { background: var(--ground); }
.signin { display: grid; align-content: center; justify-content: center; grid-template-columns: minmax(0, 400px); min-height: 100dvh; padding: 32px 16px 48px; }
.signin-wide { grid-template-columns: minmax(0, 480px); }
.signin .brand { margin: 0 0 8px 2px; }
.sign-brand img { display: block; width: auto; height: 30px; }
.sign-descriptor { margin: 0 0 24px 2px; color: var(--muted); font: 500 12px/16px var(--mono); letter-spacing: .12em; }
.sign-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--raised); box-shadow: var(--shadow-sm); }
.sign-card h1 { font: 600 22px/28px var(--sans); letter-spacing: -.015em; }
.sign-sub { margin-top: 6px; color: var(--muted); font: 400 var(--t-body) var(--sans); }
.sign-card .field { margin-top: 20px; }
.sign-card .field + .field { margin-top: 16px; }
.sign-card .btn-block { height: 40px; margin-top: 24px; }
.sign-card .label-row .link { font: 500 var(--t-sm) var(--sans); }
/* The error of the whole step (no connection, a step that the page does not know): a quiet strip above the button. */
.sign-error { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 10px 12px; border-radius: var(--r-md); background: var(--late-soft); color: var(--late); font: 500 var(--t-sm) var(--sans); }
.sign-error .icon { flex: none; margin-top: 2px; }
.sign-error .link { font-weight: 500; }
.sign-error:empty { display: none; }
.sign-error + .btn-block { margin-top: 16px; }
.sign-ok { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding: 10px 12px; border-radius: var(--r-md); background: var(--good-soft); color: var(--good); font: 500 var(--t-sm) var(--sans); }
.sign-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 20px; color: var(--muted); font: 400 var(--t-sm) var(--sans); }
.sign-row .link { font-weight: 500; }
.sign-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sign-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; color: var(--muted); font: 400 var(--t-sm) var(--sans); text-align: center; }
/* The error of one field (the sign-in pages and the forms of Marketing): under it, with the field's edge in the late color. */
.field-err { display: flex; align-items: flex-start; gap: 6px; color: var(--late); font: 500 var(--t-sm) var(--sans); }
.field-err .icon { flex: none; margin-top: 2px; }
.field-err:empty { display: none; }
.field-hint { margin-top: -2px; }
.input[aria-invalid="true"]:focus { border-color: var(--late); box-shadow: 0 0 0 3px var(--late-soft); }
.pw { position: relative; display: block; }
.pw .input { padding-right: 48px; }
.pw-eye { position: absolute; top: 4px; right: 4px; }
.pw-eye[aria-pressed="true"] { color: var(--ink); }
.code-row { display: grid; grid-template-columns: repeat(6, minmax(0, 48px)); gap: 10px; margin-top: 24px; }
.field .code-row { margin-top: 0; }
.code-box { width: 100%; height: 52px; padding: 0; border: 1px solid var(--field-edge); border-radius: var(--r-md); background: var(--field); color: var(--ink); font: 500 22px/1 var(--mono); text-align: center; }
.code-box:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.code-row.is-bad .code-box { border-color: var(--late); }
.code-row.is-bad .code-box:focus { box-shadow: 0 0 0 3px var(--late-soft); }
.setup { gap: 24px; margin-top: 24px; }
.setup li { grid-template-columns: 26px minmax(0, 1fr); }
.setup b, .setup-code > .field > .label { color: var(--ink); font: 500 var(--t-md) var(--sans); }
.setup-code > .field { margin-top: 0; gap: 12px; }
.setup .code-row { margin-top: 0; }
.setup-qr { display: flex; align-items: center; gap: 24px; margin-top: 14px; }
.qr { display: grid; flex: none; place-items: center; width: 140px; height: 140px; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--muted); }
/* The QR code keeps its white ground in the dark theme too, so each app can scan it. */
.qr.is-ready { overflow: hidden; background: var(--qr-ground); }
.qr svg { display: block; width: 100%; height: 100%; }
.setup-key { display: block; margin: 8px 0 10px; color: var(--ink); font: 400 var(--t-md) var(--mono); letter-spacing: .04em; }
.setup-phone { margin-top: 10px; font: 400 var(--t-md) var(--sans); }
.setup-phone:empty { display: none; }
.setup-phone .link, .setup-qr .link { font-weight: 500; }
@media (max-width: 759px) {
  .signin { align-content: start; padding: 24px 16px 40px; }
  .signin .brand { margin: 8px 0 24px; }
  .sign-card { padding: 24px 20px; border-radius: var(--r-lg); }
  .sign-card .input { font-size: 16px; }
  .sign-card .btn-block { height: 44px; }
  .code-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .code-box { height: 48px; font-size: 20px; }
  .setup-qr { flex-wrap: wrap; gap: 16px 24px; }
  .sign-row .link, .setup-phone .link { display: inline-flex; align-items: center; min-height: 44px; }
  .pw-eye { top: 0; right: 0; width: 44px; height: 40px; }
}

/* ===== Settings ===== */
/* The page: the parts at the left (a list like the sidebar), then the part with its own heading. The side cards go to a
   third column from 1680px; below that they go under the part. On a phone the parts are one row that scrolls. */
.st { display: grid; grid-template-columns: 200px minmax(0, 600px) minmax(0, 400px); column-gap: 40px; align-items: start; margin-top: 28px; }
.st-wide { grid-template-columns: 200px minmax(0, 1fr); }
@media (min-width: 1100px) and (max-width: 1679px) {
  .st:not(.st-wide) { grid-template-columns: 200px minmax(0, 720px); }
  .st:not(.st-wide) > .cols-side { grid-column: 2; margin-top: 24px; }
}
@media (max-width: 1679px) {
  .st > .st-nav { grid-row: 1 / span 2; }
}
.st-nav { position: sticky; top: 24px; display: grid; gap: 2px; align-content: start; }
.st-nav a { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: var(--r-md); color: var(--ink-2); font: 400 var(--t-md) var(--sans); text-decoration: none; }
.st-nav a:hover { background: var(--hover); color: var(--ink); }
.st-nav a[aria-current] { background: var(--selected); color: var(--ink); font-weight: 500; }
.st-nav a:focus-visible { outline-offset: -2px; }
.st-body { min-width: 0; }
/* The heading of a part: its name (h2), one line, and its own controls at the right (the History filter). */
.st-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.st-head-text { min-width: 0; }
.st-title { font: 600 var(--t-h2) var(--sans); letter-spacing: -.01em; }
.st-lede { margin-top: 2px; color: var(--muted); font: 400 var(--t-body) var(--sans); }
/* A group of a part (h3) */
.st-label { margin: 0; color: var(--ink-2); font: 500 var(--t-sm) var(--sans); }
.label-row > .st-label { margin: 0; }
.st-gap { margin-top: 32px; }
.st-gap-s { margin-top: 16px; }
.st-rows { margin-top: 8px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 var(--t-body) var(--sans); }
.st-row:last-child { border-bottom: 0; }
.st-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-main b, .st-row-label { display: flex; align-items: center; gap: 8px; color: var(--ink); font: 500 var(--t-md) var(--sans); }
.st-side { display: flex; align-items: center; gap: 16px; flex: none; }
.st-side .select-wrap { min-width: 200px; }
.st-row > .st-main > div { min-width: 0; }
.st-stack { flex-direction: column; align-items: stretch; gap: 12px; }
.st-stack > .st-main { flex-direction: column; align-items: stretch; gap: 12px; }
.st-user .st-side { flex: 1; justify-content: space-between; max-width: 296px; }
/* A founder row with no room: the sign-in facts go under the name, never over it. */
.st-user { flex-wrap: wrap; row-gap: 10px; }
.st-user .st-main { min-width: min(100%, 230px); }
.st-user .st-side { min-width: min(100%, 240px); }
.st-mid { display: grid; gap: 4px; }
.st-mid .label { font: 400 var(--t-sm) var(--sans); }
.st-yes, .st-never, .st-wait { display: inline-flex; align-items: center; gap: 8px; font: 400 var(--t-md) var(--sans); }
.st-yes .icon { color: var(--good); }
.st-row > .st-side > .st-yes { color: var(--good); font-weight: 500; }
.st-user .st-yes { color: var(--ink); }
.st-never { color: var(--muted); font-weight: 500; }
.st-wait { color: var(--caution); }
.st-add { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.st-add .sub { max-width: 300px; margin: 0; line-height: 19px; }
.st-add .btn { flex: none; }
.st-checks { margin-top: 10px; }
.st-note { margin-top: 8px; color: var(--muted); font: 400 var(--t-sm) var(--sans); }
/* An open decision of the founders, or a default text: a quiet neutral tag, never an error color. */
.st-open { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-sm); background: var(--tint); color: var(--muted); font: 500 var(--t-xs) var(--sans); white-space: nowrap; vertical-align: middle; cursor: help; }
.st-open .icon { color: var(--muted); }
.st-main b .st-open { font-weight: 500; }
/* A part that the code sets */
.st-ro { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font: 500 var(--t-xs) var(--sans); white-space: nowrap; cursor: help; }
/* Rules that hold together: a check on each line. */
.st-ticks { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.st-ticks li { display: flex; align-items: flex-start; gap: 10px; font: 400 var(--t-body) var(--sans); }
.st-ticks .icon { flex: none; margin-top: 4px; color: var(--good); stroke-width: 2; }
/* The one control of the hold on outreach (Settings > Sequences). */
.st-hold { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.st-hold-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--caution-soft); color: var(--caution); }
.st-hold.is-live .st-hold-ic { background: var(--good-soft); color: var(--good); }
.st-hold-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-hold-head b { font: 500 var(--t-md) var(--sans); }
.st-hold .sub { margin-top: 2px; }
/* A pointer to the one place of a control (the hold, in Settings > Posts). */
.st-pointer { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 24px; padding: 10px 12px; border-radius: var(--r-md); background: var(--tint); color: var(--ink-2); font: 400 var(--t-sm) var(--sans); }
.st-pointer .icon { flex: none; margin-top: 2px; color: var(--muted); }
.st-pointer .link { font-weight: 500; }
/* What "Posts each week" and "Days" give together. */
.st-plan { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font: 400 var(--t-sm) var(--sans); }
.st-plan .icon { flex: none; margin-top: 2px; }
.st-plan.is-warn { color: var(--caution); }
.st-agree { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 10px 12px; border-radius: var(--r-md); background: var(--tint); color: var(--ink-2); font: 400 var(--t-sm) var(--sans); }
.st-agree .icon { flex: none; margin-top: 2px; color: var(--muted); }
/* Facts in a side card: the label above its value, so a long address never breaks in a narrow column. */
.st-facts .fact, .facts.st-facts .fact { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.st-flow { display: grid; gap: 14px; margin-top: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.st-flow > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
.st-flow p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-flow .sub { margin: 0 12px 0 2px; font-size: 13px; }
.st-flow .icon { color: var(--faint); }
.st-offer { font-size: 14px; }
.st-row .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st-row .tags .tag { padding: 2px 8px; }
.st-fee { display: grid; gap: 4px; justify-items: end; }
.st-fee p { display: flex; align-items: center; gap: 8px; }
.st-fee .mono { color: var(--ink); font-size: 13px; }
.st-fee .label { font: 400 var(--t-xs) var(--sans); }
/* Used by the email sequence card of a file (js/claude.js). */
.st-h { margin-top: 12px; font: 500 var(--t-lg) var(--sans); }
.st-limit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font: 600 var(--t-h2) var(--sans); font-variant-numeric: tabular-nums; }
.st-reply { display: grid; gap: 8px; margin-top: 12px; }
.st-reply-label { color: var(--ink); font: 500 var(--t-md) var(--sans); }
.st-reply-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-reply .select-wrap { width: 200px; }
.st-word { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.st-word .input { flex: 1; min-width: 0; height: 36px; }
.st-word .sub { flex: 0 0 100%; }
.st-word .sub:empty { display: none; }
.st-form { margin-top: 0; }
.st-url { margin-top: 12px; color: var(--ink); font: 400 var(--t-md) var(--mono); overflow-wrap: anywhere; }
.st-form .sub { margin-top: 6px; }
.st-form .st-add { margin-top: 16px; }
.st-num { color: var(--ink); font-size: 12px; }
.st-link { margin-top: 14px; }
.st-link .link { font: 500 var(--t-sm) var(--sans); }
.card .sub + .st-word, .card .sub + .st-find { margin-top: 12px; }
.card > .label + .sub { margin-top: 4px; }
.ticks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 16px 0 12px; }
.ticks i { height: 4px; border-radius: 2px; background: var(--line); }
.ticks i.is-on { background: var(--accent); }
.st-subline b { font-weight: 400; }
/* Remove one person: find, pick (one line that can be undone), then Remove. */
.st-find { position: relative; display: flex; align-items: center; margin-top: 12px; }
.st-find > .icon { position: absolute; left: 12px; color: var(--muted); }
.st-find .input { padding-left: 36px; }
.st-found { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 5; display: grid; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); box-shadow: var(--shadow-md); }
.st-found button { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.st-found button:hover, .st-found button:focus-visible { background: var(--hover); }
.st-found b, .st-picked b { display: block; font: 500 var(--t-md) var(--sans); }
.st-picked { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 8px 6px 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); }
.st-picked > span { flex: 1; min-width: 0; }
.st-remove { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
/* History: When, Who (with how, under the name), What (the widest), Organization. Under 640px of its own width a row
   stacks: the time and who on one line, then what, then the organization. */
.hist { container-type: inline-size; }
.hist-tr { display: grid; grid-template-columns: 96px minmax(120px, 156px) minmax(0, 3fr) minmax(0, 2fr); column-gap: 16px; align-items: center; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 var(--t-body) var(--sans); }
.hist-tr.hist-th { min-height: 0; padding: 0 0 10px; color: var(--muted); font: 500 var(--t-xs) var(--sans); }
.hist-when { color: var(--muted); font: 400 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hist-by { display: grid; min-width: 0; }
.hist-by b { overflow: hidden; font: 500 var(--t-md) var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.hist-by .sub { margin: 0; font-size: 12px; line-height: 16px; }
.hist-form { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); color: var(--muted); }
.hist-what { min-width: 0; overflow-wrap: anywhere; }
.hist-was { color: var(--muted); }
.hist-at { min-width: 0; overflow-wrap: anywhere; }
.hist-org { color: var(--ink-2); text-decoration: none; }
.hist-org:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hist-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; }
.hist-foot .link { font-weight: 500; }
@container (max-width: 640px) {
  .hist-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: 12px 0; }
  .hist-th { display: none; }
  .hist-who { grid-row: 1; grid-column: 1; }
  .hist-when { grid-row: 1; grid-column: 2; justify-self: end; }
  .hist-what, .hist-at { grid-column: 1 / -1; }
  .hist-at { font: 400 var(--t-sm) var(--sans); }
}
.dialog-remove .line-check { margin-top: 8px; font-size: 14px; line-height: 20px; }
.dialog-remove .line-check.is-no span { color: var(--ink); }
.dialog-remove .label.gap { margin-top: 24px; }
/* The keys */
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 24px; }
.keys .lines { border-top: 1px solid var(--line); margin-top: 10px; }
.key-seq { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.dialog-keys .dialog-sub kbd { margin: 0 4px; }
.keys kbd, .dialog-sub kbd { min-width: 26px; height: 24px; }
/* The email sequences: Settings, the sheet of an email, Next steps and the file */
.seq-head { align-items: center; }
.seq-on { display: flex; align-items: center; gap: 12px; }
.seq-on .label { font: 400 var(--t-sm) var(--sans); }
.seq-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; max-width: 1000px; margin-top: 20px; }
.seq-card .rules b { font-weight: 500; color: var(--ink); }
.seq-card .rules span { color: var(--muted); }
.seq-line { margin-top: 4px; }
.seq-line .link { font-weight: 500; }
.seq-step .st-main > div { display: grid; gap: 2px; }
.seq-step .st-open { margin-left: 4px; }
.seq-subject { color: var(--ink); }
.seq-preview { margin: 0 -16px; padding: 16px; border-bottom: 1px solid var(--line); background: var(--sunken); font: 400 var(--t-body) var(--sans); }
.seq-preview b { display: block; margin: 8px 0 10px; font-weight: 500; }
.seq-n { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--tint); color: var(--muted); font-size: 12px; vertical-align: 2px; }
.seq-edit + .seq-edit { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.seq-edit .sheet-h { display: flex; align-items: center; gap: 4px; }
.seq-edit .sheet-h .st-open { margin-left: 8px; }
.seq-when { display: grid; grid-template-columns: 96px repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.seq-wait { margin-top: 12px; }
.seq-optout { margin-top: 6px; font: 400 var(--t-sm) var(--sans); }
.srow-ic { display: grid; place-items: center; width: 24px; height: 24px; color: var(--accent); }
.ccard-mail { color: var(--accent); }
.draft-subject { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--muted); border-radius: 6px; background: var(--raised); color: var(--ink); font: 500 var(--type-ui) var(--sans); }
.draft-foot { padding: 14px 19px 18px; border-top: 1px dashed var(--line); color: var(--muted); font: 400 var(--type-note) var(--sans); }
.take-emails { margin-top: 18px; }
.take-emails .sheet-info { margin-top: 8px; }
.check:has(.check-native:disabled) { opacity: .55; cursor: default; }
.emails-actions { gap: 20px; margin-top: 14px; }
.sheet-email .sheet-foot { flex-wrap: wrap; row-gap: 8px; }
.sheet-email .sheet-foot .text-btn { white-space: nowrap; }
.sheet-email .sheet-foot .link-red { color: var(--late); }
.emails-actions .link { font: 500 var(--type-small) var(--sans); }
@media (max-width: 1099px) {
  .st { grid-template-columns: 180px minmax(0, 1fr); column-gap: 32px; }
  .st > .cols-side { grid-column: 2; margin-top: 24px; }
}
@media (max-width: 759px) {
  .seq-when { grid-template-columns: 1fr; gap: 0; }
  .seq-step .st-side { width: 100%; }
  .st { display: block; margin-top: 20px; }
  /* The parts: one row that scrolls, the current one in view, a fade at a cut edge (core.js and app.css). */
  .st-nav { position: static; display: flex; gap: 0; margin: 0 calc(-1 * var(--pad)) 20px; padding: 0 var(--pad); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .st-nav::-webkit-scrollbar { display: none; }
  .st-word .input { height: 40px; }
  .st-nav a { flex: none; min-height: 44px; padding: 0 10px; border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap; }
  .st-nav a:hover { background: none; }
  .st-nav a[aria-current] { border-bottom-color: var(--accent); background: none; }
  .st > .cols-side { margin-top: 24px; }
  .st-head { align-items: flex-start; }
  .st-row, .st-add { flex-wrap: wrap; }
  .st-side .select-wrap { min-width: 0; width: 100%; }
  .st-side:has(.select-wrap) { flex: 1 1 100%; }
  .st-hold { grid-template-columns: 32px minmax(0, 1fr); }
  .st-hold > .btn { grid-column: 2; justify-self: start; }
  .st-flow > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .keys { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* A touch screen: each control of Settings is a 44px tap target. Buttons grow; links, switches and the History filter
   get a 44px tap area without moving the layout; fields are 40px with 16px text, so iOS does not zoom. */
@media (pointer: coarse) {
  .page-settings .btn { min-height: 44px; }
  .page-settings .link, .page-settings .toggle, .page-settings .seg button, .page-settings .hist-org, .st-checks .check { position: relative; }
  .page-settings .link::after, .page-settings .toggle::after, .page-settings .hist-org::after, .st-checks .check::after { content: ""; position: absolute; inset: -14px -6px; }
  .st-checks { row-gap: 28px; }
  .page-settings .seg button::after { content: ""; position: absolute; inset: -6px 0; }
  .st-picked .icon-btn { width: 44px; height: 44px; }
  .st-word .input { height: 40px; font-size: 16px; }
}