/* Settings Titanium, approved 18 Oct 2026. The Titanium tokens and the Gradient arrow button come from css/titanium.css, whose scope includes .st (one rule for the home page, sign-up and Settings). */

.st, #sheet.st {
  --page:var(--ti-page); --card:var(--ti-surface); --sheet:var(--ti-surface); --fill:var(--ti-fill);
  --ink:var(--ti-ink); --muted:var(--ti-muted); --line:var(--ti-line); --line-strong:var(--ti-muted);
  --ember:var(--ti-ember-text); --ember-fill:var(--ti-fill); --ember-soft:var(--ti-ember-soft);
  --orchid:var(--ti-orchid-text); --competitor:var(--ti-orchid-text); --orchid-fill:var(--ti-fill); --orchid-soft:var(--ti-surface-2);
  --jade:var(--ti-jade-text); --jade-fill:var(--ti-select); --jade-soft:var(--ti-jade-soft);
  --warning:#8C5B0E; --warning-soft:var(--ti-fill); --error:#B42336;
  color:var(--ti-ink); font:400 15px/22px Manrope,'IBM Plex Sans Arabic',sans-serif; font-variant-numeric:tabular-nums;
  --ti-btn-h:52px;  /* the main button is titanium.css section 4, Gradient edge (owner, 24 Oct 2026) */
}
:root[data-theme="dark"] .st, :root[data-theme="dark"] #sheet.st { --error:#FF8C8C; --warning:#E2B66A; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .st, :root:not([data-theme="light"]) #sheet.st { --error:#FF8C8C; --warning:#E2B66A; }
}
.st *, .st *::before, .st *::after { box-sizing:border-box; }
.st.st-page { background:var(--page); width:100%; max-width:480px; margin:0 auto; padding:16px 18px 64px; min-height:100vh; }
.st button, .st input, .st select { font:inherit; }
.st input, .st select, .st textarea { font-size:16px; }
.st button { cursor:pointer; text-align:start; color:inherit; }
.st button:disabled { opacity:.5; cursor:default; }
.st button:active { transform:scale(.97); }
.st button, .st a { transition:transform 160ms; }
.st :focus-visible { outline:2px solid var(--ember); outline-offset:2px; }
.st h1 { font-size:30px; line-height:36px; font-weight:700; letter-spacing:-.02em; margin:0 0 8px; }
.st h3 { font-size:20px; line-height:28px; font-weight:700; letter-spacing:-.02em; margin:0; }
.st .st-top { margin-bottom:24px; }
.st .st-heading { margin-bottom:24px; }
.st .st-note { color:var(--muted); font-size:13px; line-height:20px; margin:8px 0; overflow-wrap:anywhere; }
.st .st-card { display:block; background:var(--card); border:0; border-radius:24px; padding:16px; margin-bottom:12px; width:100%; }
.st .st-section { margin:28px 0 0; }
.st .st-label { display:block; color:var(--muted); font-size:13px; line-height:18px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; margin:20px 0 12px; }
.st .st-card-title { margin:0; font-size:16px; font-weight:600; line-height:24px; }
.st .st-card > .st-label:first-child { margin-top:0; }
.st .st-row { width:100%; min-height:64px; display:flex; align-items:center; gap:12px; padding:12px 0; background:none; border:0; border-bottom:1px solid var(--line); text-align:start; }
.st .st-row:last-child { border-bottom:0; }
.st .st-row > .ic { flex:none; color:var(--muted); }
.st .st-copy { flex:1; min-width:0; display:block; }
.st .st-row-title { display:block; font-size:16px; line-height:22px; font-weight:500; overflow-wrap:anywhere; }
.st .st-row-sub { display:block; color:var(--muted); font-size:13px; line-height:20px; margin-top:4px; overflow-wrap:anywhere; }
.st .st-routine { padding:4px 0 16px; border-bottom:1px solid var(--line); }
.st .st-routine:last-child { border-bottom:0; padding-bottom:0; }
.st .st-routine .st-row { border-bottom:0; align-items:flex-start; }
.st .st-routine-action { margin-inline-start:48px; }
.st .st-routine-action > .st-btn.st-pill-action { display:inline-flex; min-height:44px; align-items:center; justify-content:center; text-decoration:none; }
.st .st-routine .st-note a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.st .st-tile { width:36px; height:36px; border-radius:8px; display:inline-flex; justify-content:center; align-items:center; background:#27282C; color:#fff; flex:none; }
.st .st-tile.ember { background:var(--ember-fill); }
.st .st-tile.jade { background:var(--jade-fill); }
.st .st-tile.orchid { background:var(--orchid-fill); }
.st .st-tile.warning { background:#8C5B0E; }
.st .st-tile.profile { width:56px; height:56px; border-radius:50%; }
.st .brandtile { flex:none; border-radius:8px; }
.st .st-status { padding:4px 8px; border-radius:999px; background:var(--fill); font-size:13px; line-height:18px; flex:none; }
.st .st-hero { background:var(--hero); color:var(--hero-ink); padding:20px; }
.st .st-hero .st-label, .st .st-hero .st-row-sub { color:inherit; }
.st .st-hero .st-label { margin:0 0 16px; font-size:12px; }
.st .st-hero-title { font-size:16px; line-height:24px; display:block; font-weight:500; margin:16px 0; }
.st .st-faces { display:flex; padding-inline-start:8px; flex-wrap:wrap; }
.st .st-faces > .st-face { width:32px; height:32px; margin-inline-start:-8px; }
.st .st-face { display:inline-flex; width:40px; height:40px; border:2px solid var(--orchid); padding:2px; border-radius:50%; background:var(--card); flex:none; }
.st .st-face.own { border-color:var(--ember); }
.st .st-face .pfp { width:100%; height:100%; border:0; outline:0; }
.st .st-face .pfp { background:var(--orchid-soft); color:var(--orchid); font-size:16px; }
.st .st-face.own .pfp { background:var(--ember-soft); color:var(--ember); }
.st .st-faces .pfp { font-size:13px; }
.st .st-tile.profile { color:#fff; background:#27282C; font-size:24px; font-weight:500; }
.st .st-watch-row { border-bottom:1px solid var(--line); padding:8px 0 16px; }
.st .st-watch-row:last-child { border:0; }
.st .st-watch-row > .st-row { border:0; }
.st .st-watch-row .st-row-title { color:var(--competitor); }
.st .st-watch-row:has(.st-face.own) .st-row-title { color:var(--ember); }
.st .st-watch-row.paused .pfp { filter:grayscale(1); opacity:.45; }
.st .st-watch-row > .st-bot { margin-inline-start:52px; max-width:calc(100% - 52px); }
.st .st-watch-details { margin-inline-start:52px; min-width:0; }
.st .st-chips { display:flex; flex-wrap:wrap; gap:0; max-width:264px; margin-inline-start:-4px; }
.st .st-chip-target { flex:none; width:44px; height:44px; background:none; border:0; padding:5px; display:grid; place-items:center; }
.st .st-chip { position:relative; display:inline-flex; width:34px; height:34px; border-radius:8px; }
.st .st-chip .st-tile, .st .st-chip .brandtile, .st .st-net { width:34px; height:34px; }
.st .st-net .brandtile { width:100%; height:100%; }
.st .st-net-instagram .brandtile { background:linear-gradient(30deg,#FCAF45,#DD2A7B,#8134AF)!important; }
.st .st-net-linkedin .brandtile { background:#0A66C2!important; }
.st .st-net-facebook .brandtile { background:#0866FF!important; }
.st .st-net-snapchat .brandtile { background:#FFFC00!important; color:#111214; }
.st .st-net-youtube .brandtile { background:#FFFFFF!important; box-shadow:inset 0 0 0 1px var(--line); }
.st .st-net-googlemaps .brandtile, .st .st-net-maps .brandtile { background:#4285F4!important; }
.st .st-chip.checking { outline:2px solid var(--jade); outline-offset:2px; }
.st .st-chip.paused { filter:grayscale(1); opacity:.4; }
.st .st-badge, .st .st-page-count { position:absolute; top:-5px; inset-inline-end:-5px; width:16px; height:16px; display:grid; place-items:center; border-radius:50%; font-style:normal; color:#fff; background:#8C5B0E; box-shadow:0 0 0 2px var(--card); font-size:11px; line-height:16px; font-weight:700; }
.st .needs .st-badge { background:var(--ember-fill); }
.st .st-page-count { top:auto; bottom:-5px; background:var(--ink); color:var(--card); }
.st .st-plus { width:34px; height:34px; border:1.5px dashed var(--line-strong); border-radius:50%; color:var(--muted); display:grid; place-items:center; }
.st .st-plus svg { width:18px; height:18px; }
.st .st-legend { display:flex; flex-wrap:wrap; gap:12px; margin:16px 4px 24px; color:var(--muted); font-size:13px; line-height:18px; }
.st .st-legend > span { display:flex; align-items:center; gap:8px; }
.st .st-legend .st-chip { transform:scale(.6); margin:-5px; flex:none; }
.st .st-add-bar { display:flex; gap:12px; align-items:center; margin:16px 0 24px; }
.st .st-add-bar > .primary { flex:1; }
.st .st-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border-radius:999px; background:var(--card); color:var(--ink); border:1px solid var(--line); font-size:15px; line-height:22px; font-weight:500; text-decoration:none; overflow-wrap:anywhere; max-width:100%; }
.st .st-btn.danger { color:var(--error); }
.st .st-btn.orchid { color:var(--orchid); }
.st .st-btn.text, .st .st-btn.quiet { border:0; background:none; padding:8px 0; }
.st .st-btn.quiet { color:var(--muted); font-size:13px; justify-content:flex-start; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block; text-align:start; }
.st .st-btn.st-icon { width:44px; height:44px; min-height:44px; padding:0; flex:none; border-radius:50%; background:var(--card); border:1px solid var(--line); }
.st .st-icon .ic { width:22px; height:22px; }
.st .st-sheet-head .st-icon { width:40px; height:40px; min-height:40px; background:var(--sheet); }
.st .st-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.st .st-actions > .st-btn { flex:1; }
.st .st-field { display:block; margin:16px 0; color:var(--ink); font-size:13px; line-height:20px; }
.st .st-field > span { display:block; margin-bottom:8px; }
/* Invite by WhatsApp (KB 52): the country's flag and code, then the number, on one line (decided under KB 49). */
.st .st-field > .st-phone { display:flex; gap:8px; margin:0; }
.st .st-cc { position:relative; flex:0 0 auto; display:flex; align-items:center; min-height:48px; padding-block:0; padding-inline:12px 30px; border:1px solid var(--line); border-radius:16px; background:var(--sheet); color:var(--ink); font-size:16px; line-height:22px; white-space:nowrap; }
.st .st-cc::after { content:""; position:absolute; inset-inline-end:12px; top:50%; width:7px; height:7px; border:solid var(--muted); border-width:0 1.5px 1.5px 0; transform:translateY(-70%) rotate(45deg); }
.st .st-field .st-cc select { position:absolute; inset:0; width:100%; min-height:0; opacity:0; cursor:pointer; }
.st .st-cc:focus-within { outline:2px solid var(--ember); outline-offset:2px; }
.st .st-cc[hidden] { display:none; }
.st .st-field .st-phone input { flex:1 1 auto; }
.st .st-field input, .st .st-field select { width:100%; min-width:0; min-height:48px; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--sheet); color:var(--ink); font-size:16px; line-height:22px; }
.st input[type=checkbox] { width:24px; height:24px; accent-color:var(--jade); flex:none; }
.st .st-error { font-size:13px; color:var(--error); }
.st .st-provenance, .st .st-bot { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; line-height:20px; margin:8px 0; overflow-wrap:anywhere; }
.st .st-bot { display:inline-flex; border-radius:999px; padding:2px 8px; background:var(--orchid-soft); color:var(--orchid); }
.st .st-bot .brandtile, .st .st-bot .st-tile { width:16px; height:16px; border-radius:8px; }
.st .st-bot svg { width:12px; height:12px; }
.st .st-page-row { padding:8px 0; border-bottom:1px solid var(--line); }
.st .st-page-row .st-row { border:0; padding-bottom:0; }
.st .st-change { padding:8px 0; border-bottom:1px solid var(--line); }
.st .st-change.waiting { padding:16px; border:0; border-radius:16px; background:var(--ember-soft); margin-bottom:16px; }
.st .st-change .st-row { border:0; }
.st .st-change .inreport { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:18px; white-space:normal; overflow-wrap:anywhere; }
.st .st-looking { display:flex; align-items:center; color:var(--jade); font-size:13px; }
.st .st-looking svg { width:34px; height:34px; margin-inline-end:8px; }
.st .st-footer { text-align:center; margin-top:32px; }
.st .st-footer img { width:64px; height:24px; object-fit:contain; }
.st.sheet { display:block; width:min(100%,480px); max-width:480px; max-height:88dvh; background:var(--sheet); border-radius:24px 24px 0 0; padding:0; }
.st .st-sheet-head { display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:16px 12px; align-items:start; padding:8px 20px 16px; }
.st .st-sheet-head .close { grid-column:2; grid-row:1; }
.st .st-sheet-mark { grid-column:1; grid-row:1; }
.st .st-sheet-title { grid-column:1; display:flex; gap:12px; min-width:0; align-items:flex-start; }
.st .has-mark .st-sheet-title { grid-column:1 / -1; grid-row:2; }
.st .st-sheet-title > div { min-width:0; flex:1; }
.st .st-sheet-head h3 { font-size:20px; line-height:28px; font-weight:700; overflow-wrap:anywhere; }
.st .st-sheet-head .st-note { font-size:14px; line-height:20px; margin:8px 0 0; }
.st .st-sheet-mark > .st-net, .st .st-sheet-mark > .st-tile { display:inline-flex; width:48px; height:48px; }
.st .st-sheet-body { padding:0 20px 24px; }
.st .st-sheet-body > .st-section { margin:24px 0 0; padding:0; min-height:0; }
.st .st-sheet-body > .st-section:first-child { margin-top:0; }
.st .st-sheet-body .st-section > .st-label { margin:0 0 8px; }
.st .st-sheet-body .st-card { background:var(--fill); border-radius:16px; padding:16px; margin:0; }
.st .st-sheet-body .st-card > .st-note:first-child { margin-top:0; }
.st .st-sheet-body .st-card > :last-child { margin-bottom:0; }
.st .st-sheet-body > .st-section + a { margin-top:24px; }
.st .st-read-line { display:flex; align-items:flex-start; gap:12px; }
.st .st-read-line .ic { color:var(--jade); flex:none; }
.st .st-link-value { overflow-wrap:anywhere; font-size:16px; }
.st .st-network-row { gap:10px; min-height:88px; }
.st .st-network-row > .st-net, .st .st-network-row > .st-tile { width:36px; height:36px; flex:none; }
.st .st-network-row .st-row-title { font-size:16px; font-weight:500; }
.st .st-link-line { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st .st-network-row .st-provenance { font-size:12px; line-height:18px; margin:4px 0 0; }
.st .st-network-state { color:var(--muted); font-size:13px; line-height:18px; text-align:end; flex:0 0 70px; }
.st .st-network-row > .ic { width:12px; }
.st .st-competitor-name, .st .st-suggestion .st-row-title { color:var(--competitor); }
.st .st-add-network-row { gap:8px; border-bottom:0; }
.st .st-missing-logos { display:flex; gap:4px; flex-wrap:wrap; max-width:140px; }
.st .st-missing-logos .st-net, .st .st-missing-logos .st-tile { width:18px; height:18px; opacity:.4; filter:grayscale(1); }
.st .st-missing-logos svg { width:12px; height:12px; }
.st .st-missing-network { border-bottom:1px solid var(--line); }
.st .st-missing-network > .st-row { border:0; }
.st .st-missing-network .st-status { font-size:12px; }
.st .st-cost { display:flex; align-items:flex-start; gap:8px; color:var(--muted); font-size:14px; line-height:20px; margin:0 0 24px; }
.st .st-cost .ic { width:16px; height:20px; flex:none; }
.st .st-inline-network { padding:0 0 16px 48px; }
.st .st-inline-network[hidden] { display:none; }
.st .st-suggestion { position:relative; cursor:pointer; }
.st .st-suggestion input { appearance:none; border:1px solid var(--line-strong); background:var(--sheet); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; margin:0; }
.st .st-suggestion input:checked { border-color:var(--jade-fill); background:var(--jade-fill); }
.st .st-suggestion input:checked::after { content:'✓'; color:white; font-size:16px; }
.st .st-selection { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.st .st-selection .st-status { background:var(--orchid-soft); color:var(--orchid); }
.st .st-competitor-footer { position:sticky; bottom:-24px; z-index:2; margin:24px -20px -24px; padding:12px 20px 24px; border-top:1px solid var(--line); background:var(--sheet); }
.st .st-competitor-footer .st-btn { width:100%; }
.st .st-competitor-footer .st-note { margin:4px 0 12px; }
.st .st-footer .lockup { display:inline-flex; width:80px; color:var(--ink); }
.st .pl-ac { background:var(--card); color:var(--ink); }
.st .st-count { flex:none; border:0; background:none; font-size:14px; font-weight:600; padding:8px 0; }
@media (prefers-reduced-motion:reduce) { .st *, .st *::before, .st *::after { animation:none!important; transition:none!important; } }
/* The router clears the view's class on navigation, so these container rules cannot affect the reader. */
.st.col { max-width:480px; width:100%; margin-inline:auto; padding:0; background:var(--page); }
.st .st-btn[role=switch][aria-checked=true] { background:var(--jade-soft); color:var(--jade); border-color:var(--jade); }
.st .st-field input:lang(ar), .st bdi[dir=rtl] { font-family:'IBM Plex Sans Arabic',sans-serif; }
.st meter { display:block; width:100%; height:8px; accent-color:var(--jade); margin:0 0 16px; }
.st meter::-webkit-meter-bar { background:var(--line); border:0; border-radius:999px; }
.st meter::-webkit-meter-optimum-value { background:var(--jade); border-radius:999px; }
.st .st-detected { color:var(--jade); }

.st.sheet > .handle { margin:10px auto 12px; }
.st .st-heading > .st-note { font-size:15px; line-height:22px; }
.st .st-profile { gap:16px; }
.st .st-profile .st-status { display:inline-block; margin-top:8px; padding:2px 8px; }
.st .st-profile .st-row-title { font-size:18px; line-height:24px; }
.st .st-own-name { color:var(--ember); }
.st .st-hero { position:relative; padding-bottom:24px; }
.st .st-hero > .st-row-sub { padding-inline-end:48px; min-height:36px; display:flex; align-items:center; }
.st .st-hero-arrow { position:absolute; bottom:20px; inset-inline-end:20px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--card); color:var(--ink); }
.st .st-hero-arrow .ic { width:24px; height:24px; }
.st .st-terms-intro { display:flex; align-items:flex-start; gap:16px; }
.st .st-terms-intro > .st-note { flex:1; margin:0; font-size:14px; line-height:20px; }
.st .st-count { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.st .st-count strong { font-size:16px; line-height:22px; font-weight:700; }
.st .st-count > span { color:var(--ink); font-weight:400; font-size:13px; }
.st .st-count .st-meter { display:block; width:64px; height:6px; border-radius:999px; background:var(--line); overflow:hidden; }
.st .st-meter > span { display:block; height:100%; border-radius:inherit; background:var(--jade-fill); }
.st .st-mention-competitors .st-row-title { color:var(--competitor); }
.st .st-status.on { background:var(--jade-soft); color:var(--jade); }
@media (min-width:980px) { .st.sheet { border-radius:24px; } }

/* Account pages and sheets use the same tokens and column as What we watch. */
.st { --charcoal:#27282C; }
:root[data-theme="dark"] .st { --charcoal:#3A3C42; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .st { --charcoal:#3A3C42; } }
.st .st-tile:not(.ember):not(.jade):not(.orchid):not(.warning), .st .st-tile.profile { background:var(--charcoal); }
.st .st-wide { width:100%; margin-top:24px; }
.st .st-status.on { color:var(--jade); background:var(--jade-soft); }
.st .st-status.warn { color:var(--warning); background:var(--warning-soft); }
.st .st-person-face { width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:none; background:var(--fill); color:var(--muted); font-size:18px; }
.st .st-person-face.owner { background:var(--charcoal); color:#fff; }
.st .st-person-face.joined { background:var(--jade-fill); color:#fff; }
.st .st-sheet-mark .st-person-face { width:56px; height:56px; font-size:24px; }
.st .st-candidate-photo { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
/* A switch is sign-up's (.ob-switch): on is Jade, the Settings switch that is on (KB 33 1.1, Design bible 4: never black). */
.st .st-switch { width:51px; height:31px; border:0; border-radius:999px; flex:none; padding:2px; background:var(--ti-line); transition:background-color 200ms ease; }
.st .st-switch span { display:block; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform 200ms cubic-bezier(.23,1,.32,1); }
.st .st-switch[aria-checked="true"] { background:var(--ti-jade); }
.st .st-switch[aria-checked="true"] span { transform:translateX(20px); }
.st .st-switch[aria-checked="true"]:dir(rtl) span { transform:translateX(-20px); }
.st .st-switch[aria-busy="true"] { opacity:.7; }
.st .st-radio input { accent-color:var(--jade-fill); width:22px; height:22px; flex:none; }
.st .st-radio { min-height:64px; cursor:pointer; }
.st .st-copy-label { flex:none; }
.st .st-steps { padding-inline-start:24px; }
.st .st-steps li { padding:8px 0 12px 4px; overflow-wrap:anywhere; }
.st .st-steps li::marker { color:var(--muted); }
.st .st-usage { padding:8px 0 20px; border-bottom:1px solid var(--line); }
.st .st-usage:last-child { border-bottom:0; }
.st .st-usage .st-row { border:0; }
.st .st-usage meter { display:block; appearance:none; width:100%; height:6px; border:0; border-radius:999px; background:var(--line); }
.st .st-usage meter::-webkit-meter-bar { background:var(--line); border:0; border-radius:999px; }
.st .st-usage meter::-webkit-meter-optimum-value { background:var(--jade-fill); border-radius:999px; }
.st .st-usage meter::-moz-meter-bar { background:var(--jade-fill); border-radius:999px; }
.st .st-sheet-body > .st-card { background:var(--fill); }
.st .st-theme-options .st-copy { display:flex; align-items:center; gap:12px; }
.st .st-theme-options .st-copy::before { content:""; display:block; width:52px; height:44px; border:1px solid var(--line-strong); border-radius:8px; background:linear-gradient(90deg,#F1F2F3 50%,#27282C 50%); flex:none; }
.st .st-theme-options input[value="light"] + .st-copy::before { background:#F1F2F3; box-shadow:inset 8px 8px #fff; }
.st .st-theme-options input[value="dark"] + .st-copy::before { background:#111214; box-shadow:inset 8px 8px #27282C; }
.st .st-switch { position:relative; }
.st .st-switch::after { content:""; position:absolute; inset:-8px 0; }

/* "It never": crosses in the error colour (a tick would read as a promise kept). */
.st .st-never .ic { color: var(--error); }

/* Report account and knowledge sheets share the settings column and theme tokens. */
.st .st-account-block { display:flex; align-items:center; gap:12px; padding:16px; margin-bottom:16px; border-radius:16px; background:var(--ember-soft); }
.st .st-avatar { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; border-radius:50%; background:var(--ink); color:var(--page); font-size:16px; font-weight:600; }
.st .st-pill.ember { display:inline-block; padding:4px 8px; margin-top:4px; border-radius:999px; background:var(--ember-soft); color:var(--ember); font-size:13px; line-height:20px; }
.st .st-find { padding:16px; margin-bottom:12px; border-radius:16px; background:var(--ember-soft); }
.st .st-find:last-child { margin-bottom:0; }
.st .st-find > .st-row { border:0; padding:0; align-items:flex-start; }
.st .st-find img { width:56px; height:56px; flex:none; border-radius:8px; object-fit:cover; }
.st .st-find .st-actions { gap:8px; margin:12px 0 0; }
.st .st-find .st-actions > .st-btn { flex:initial; }
.st .st-logout .st-row-title { color:var(--error); }
.st .st-logout .st-tile { color:var(--error); }

/* Share Tellz: before the copy, the channels dim their tiles only; the names stay readable (WCAG AA) in every theme. */
.channels:not(.ready) .ch { opacity: 1; color: var(--text2); }
.ch .appic { transition: opacity 200ms ease; }
.channels:not(.ready) .ch .appic { opacity: .45; }

/* A row that is a plain link to a server page (Privacy, Terms) looks like the other rows. */
.st a.st-row { color:inherit; text-decoration:none; }

.st-passkeys .st-copy { min-width: 0; overflow-wrap: anywhere; }
.st-passkeys > .st-error { padding: 0 16px; }
.st-passkeys > .st-error:empty { display: none; }

/* The report's Jade condition pill also holds a kept price. */
.st .cond { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.st .soft { display:inline-flex; align-items:center; padding:4px 12px; border-radius:999px; background:var(--jade-soft); color:var(--jade); font-size:13px; line-height:20px; font-weight:600; }
/* Setup facts and custom news sources stay readable at the narrowest phone width. */
.st .st-market-source { border-bottom: 1px solid var(--line); }
.st .st-market-source:last-child { border-bottom: 0; }
.st .st-market-source .st-row { flex-wrap: wrap; }
.st .st-market-source .st-copy { min-width: 90px; overflow-wrap: anywhere; }
.st .st-market-source .st-btn { min-height: 44px; }
.st input:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
/* Round 3: quiet cards, silver cover and consistent controls. */
.st.st-page { padding:24px 16px 64px; background:var(--ti-page-glow),var(--ti-page); }
.st.col { background:var(--ti-page); }
.st h1,.st.st-page.bill-page h1 { font:600 28px/34px Manrope,sans-serif; letter-spacing:-.025em; margin:0; }
.st .st-heading-line { display:flex; align-items:center; gap:16px; }
.st .st-heading > .st-note { margin:12px 0 0; }
.st .st-label { text-transform:none; letter-spacing:.02em; font-weight:600; }
.st .st-card { box-shadow:var(--ti-card); padding:20px; min-width:0; }
.st .st-grid { display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
.st .st-grid > .st-card { margin:0; }
.st .st-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.st .st-card-head .st-label { margin:0; }
.st .st-home-card { position:relative; }
.st .st-card-link { border:0; background:none; color:var(--ti-muted); padding:0; font:inherit; }
.st .st-card-link::after { content:""; position:absolute; inset:0; border-radius:24px; }
/* Transforming the heading on press makes it the containing block of ::after.
   Keep the hit area on the whole card until pointerup; animate the card instead. */
.st .st-card-link:active { transform:none; }
.st .st-card-link:focus-visible { outline:0; }
.st .st-home-card:has(.st-card-link:focus-visible) { outline:2px solid var(--ti-ember); outline-offset:2px; }
.st .st-home-card:has(.st-card-link:active) { transform:scale(.99); }
.st .st-card-head .st-pill-action { z-index:1; position:relative; flex:none; }
.st .st-card-content { pointer-events:none; }
.st .st-card-content button,.st .st-card-content a { pointer-events:auto; position:relative; z-index:1; }
.st .st-btn:where(:not(.text):not(.quiet):not(.st-icon)) { border:1px solid var(--ti-line); background:var(--ti-fill); }
.st .st-btn.st-pill-action { background:var(--ti-fill); min-height:36px; padding:8px 14px; font:600 13px/18px Manrope,sans-serif; }
.st .st-fact { font:600 22px/28px Manrope,sans-serif; margin:0 0 8px; overflow-wrap:anywhere; }
.st .st-description { margin:8px 0 0; color:var(--ti-muted); font-size:15px; line-height:22px; }
.st .st-home-card .st-note { margin:16px 0 0; }
.st .st-cover { margin:-24px -16px 16px; padding:24px 16px; border-radius:0 0 28px 28px; background:var(--ti-sheen),var(--ti-cover); color:var(--ti-cover-ink); box-shadow:var(--ti-rim); }
.st .st-cover-nav { display:flex; justify-content:space-between; margin-bottom:24px; }
.st .st-cover-line { color:var(--ti-cover-ink-2); margin:8px 0 0; }
.st .st-cover-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; font-size:13px; }
.st .st-cover .st-faces { flex-wrap:nowrap; }
.st .st-face,.st .st-person-face { border:0; padding:2px; background:var(--ti-ring); color:var(--ti-ink); }
.st .st-face.own,.st .st-person-face.owner { background:var(--ti-ring-you); color:var(--ti-ink); }
.st .st-face .pfp,.st .st-face.own .pfp { background:var(--ti-fill); color:var(--ti-ink); box-shadow:0 0 0 2px var(--ti-surface); }
.st .st-person-face { position:relative; isolation:isolate; font-size:13px; font-weight:600; }
.st .st-person-face::before { content:""; position:absolute; inset:3px; z-index:-1; border:2px solid var(--ti-surface); border-radius:50%; background:var(--ti-fill); }
.st .st-person-face.invited { opacity:.5; background:var(--ti-fill); border:1.5px dashed var(--ti-muted); }
.st .st-cover .st-face { width:36px; height:36px; }
.st .st-face-more { width:36px; height:36px; margin-inline-start:-8px; border:1px solid var(--ti-line); border-radius:50%; background:var(--ti-fill); display:grid; place-items:center; font-weight:600; }
.st .st-reader-faces { display:flex; padding-inline-start:8px; }
.st .st-reader-faces > * { margin-inline-start:-8px; }
.st .st-btn.st-icon { background:transparent; border:1.5px solid var(--ti-line); }
.st .st-cover .st-icon { border-color:color-mix(in srgb,var(--ti-cover-ink) 24%,transparent); }
.st .st-bell { position:relative; }
.st .st-count-dot { position:absolute; top:-3px; inset-inline-end:-3px; min-width:18px; height:18px; padding:0 4px; border-radius:99px; display:grid; place-items:center; background:linear-gradient(in oklab 112deg,#C65A64 0%,#E38B7D 34%,#F0B69C 70%,#F3D4AE 100%); color:#1D1D1F; font:700 11px/14px Manrope,sans-serif; }
.st .st-watch-names { color:var(--ti-orchid-text); font-size:17px; line-height:24px; font-weight:600; margin:0; }
.st .st-read-logos { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:16px; }
.st .st-read-logos > span:first-child { font-size:13px; color:var(--ti-muted); margin-inline-end:4px; }
.st .st-read-logos .st-net,.st .st-read-logos .st-tile { width:28px; height:28px; border-radius:50%; overflow:hidden; }
.st .st-read-logos svg { width:18px; height:18px; }
.st .st-door-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.st .st-door-chips > span { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 8px; background:var(--ti-surface-2); font-size:13px; }
.st .st-door-chips .brandtile { width:16px; height:16px; border-radius:4px; }
.st .st-door-chips svg { width:12px; height:12px; }
.st .st-home-apps { display:flex; gap:24px; margin-bottom:20px; }
.st .st-app-tile { min-width:44px; min-height:44px; padding:0; border:0; background:none; color:inherit; position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; }
.st .st-app-tile .brandtile { width:40px; height:40px; border-radius:12px; }
.st .st-connected { position:absolute; inset-inline-end:0; top:31px; width:10px; height:10px; border:2px solid var(--ti-surface); background:var(--ti-jade-text); border-radius:50%; }
.st .st-quiet-list .st-row { min-height:56px; }
.st .st-quiet-list .st-tile { width:24px; height:24px; background:none!important; border-radius:0; }
.st .st-quiet-list .st-row-title { font-size:15px; }
.st .st-quiet-list .st-copy:has(.st-row-sub) { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.st .st-quiet-list .st-row-sub { margin:0; }
.st .st-quiet-list .st-logout { display:contents; }
.st .st-tile,.st .st-tile.ember,.st .st-tile.jade,.st .st-tile.orchid,.st .st-tile.warning,.st .st-tile.profile,.st .st-tile:not(.ember):not(.jade):not(.orchid):not(.warning) { background:var(--ti-fill); color:var(--ti-ink); border-radius:50%; }
.st .st-watch-row:has(.st-face.own) .st-row-title,.st .st-own-name { color:var(--ti-ink); }
.st .st-watch-row { border:0; padding:0; }
.st .st-watch-details { margin-inline-start:0; margin-top:12px; }
.st .st-read-line { margin:8px 0; }
.st .st-bot,.st .st-selection .st-status,.st .soft { background:var(--ti-fill); color:var(--ti-ink); }
.st .st-looking { color:var(--ti-muted); }
.st .st-suggestion input:checked { background:var(--ti-select); border-color:var(--ti-select); }
.st .st-radio input,.st input[type=checkbox],.st meter { accent-color:var(--ti-select); }
.st .st-suggestion input:checked::after { color:var(--ti-on-select); }
.st .st-btn[role=switch][aria-checked=true] { background:var(--ti-select); color:var(--ti-on-select); border-color:var(--ti-select); }
.st .st-meter > span,.st meter::-webkit-meter-optimum-value { background:var(--ti-select); }
.st .st-usage meter::-webkit-meter-optimum-value,.st .st-usage meter::-moz-meter-bar { background:var(--ti-select); }
.st .st-account-block,.st .st-find { background:var(--ti-surface-2); }
.st .st-status.on { background:var(--ti-jade-soft); color:var(--ti-jade-text); }
/* Your plan: the first row is the card's one fact; the rest are plain rows like the gift row under them (25 Oct 2026). */
.st .st-home-plan .st-plan-fact { border:0; padding:0 0 12px; min-height:0; }
.st .st-home-plan .st-plan-fact .st-tile,.st .st-home-plan .st-plan-fact > .ic { display:none; }
.st .st-home-plan .st-plan-fact .st-row-title { font-size:22px; line-height:28px; font-weight:600; }
.st .st-home-plan .st-plan-fact .st-row-sub { font-size:15px; line-height:22px; }
.st .st-home-plan + .st-row, .st .st-home-plan .st-row:not(.st-plan-fact) { border-top:1px solid var(--line); border-bottom:0; }
.st #st-app-changes { scroll-margin-top:24px; }

/* The Gradient arrow button itself is css/titanium.css section 4; Settings adds only its red-words variant and layouts. */
.st .ti-primary.st-destructive,#sheet.st .ti-primary.st-destructive { color:var(--error); padding:0 22px; justify-content:center; }
/* A destructive confirm keeps the pill but never wears the Ember edge: a plain line in its place (24 Oct 2026). */
.st .ti-primary.ti-primary.st-destructive::before,#sheet.st .ti-primary.ti-primary.st-destructive::before { background:var(--ti-line); }
.st .st-destructive .ti-primary-label,#sheet.st .st-destructive .ti-primary-label { flex:0 1 auto; }
.st .st-page-actions { display:flex; align-items:center; gap:6px; height:64px; padding:6px; border-radius:999px; background:linear-gradient(180deg,#2C2D31,#1D1D1F); position:fixed; z-index:10; bottom:calc(16px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:448px; box-shadow:0 8px 28px #0003; }
.st .st-page-actions > .ti-primary { flex:1; }
.st .st-page-actions .st-icon { border-color:rgba(255,255,255,.28); color:#F5F5F7; }
.st .st-page-actions .ti-primary { --ti-btn-h:52px; padding-inline-start:14px; gap:8px; }
.st.st-page:has(.st-page-actions) { padding-bottom:calc(112px + env(safe-area-inset-bottom)); }

/* Only Settings sheets override the shell's desktop side panel. */
#sheet.st:not(.open),#sheet.st.open { position:fixed; left:50%; right:auto; top:auto; bottom:0; width:min(100%,480px); max-width:100%; height:auto; max-height:88dvh; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:0; border-radius:24px 24px 0 0; background:var(--ti-surface); color:var(--ti-ink); }
#sheet.st:not(.open) { transform:translate(-50%,105%); opacity:0; }
#sheet.st.open { transform:translate(-50%,0); opacity:1; }
#sheet.st > .handle { display:block; width:40px; height:5px; margin:10px auto 12px; background:var(--ti-line); border-radius:99px; }
#sheet.st .st-sheet-head { padding:8px 24px 20px; }
#sheet.st .st-sheet-body { padding:0 24px calc(24px + env(safe-area-inset-bottom)); }
#sheet.st .st-sheet-mark > .st-tile { width:48px; height:48px; }
#sheet.st .st-sheet-head .close { background:transparent; }
#sheet.st .st-sheet-body > .ti-primary,#sheet.st form > .ti-primary,#sheet.st .st-competitor-footer > .ti-primary { width:100%; margin-top:16px; }
#sheet.st .st-sheet-actions { display:flex; align-items:center; gap:8px; margin-top:24px; }
#sheet.st .st-sheet-actions .ti-primary { flex:1; }
#sheet.st .st-second,#sheet.st .st-sheet-body > .st-btn:last-child { display:flex; width:100%; justify-content:center; margin-top:8px; }
#sheet.st .st-sheet-done { margin-top:24px; }
#sheet.st .st-sheet-body .st-card { box-shadow:none; background:var(--ti-surface-2); }
#sheet.st .st-competitor-footer { position:static; margin:24px 0 0; padding:0; border:0; background:transparent; }
#sheet.st .st-sheet-head .close { position:sticky; top:12px; z-index:3; }
#sheet.st .st-sheet-title .back { background:transparent; }
.st .bill-btn:not(.ti-primary) { background:none; color:var(--ti-ink); border-color:var(--ti-line); }
.st .bill-btn.danger { background:none; color:var(--error); }
.st .bill-plan { background:var(--ti-surface); border-color:var(--ti-line); color:var(--ti-ink); }
.st .bill-plan:has(input:checked) { border-color:var(--ti-select); background:var(--ti-surface-2); }
.st.bill-page .bill-plan input { accent-color:var(--ti-select); }
@media (min-width:1024px) {
  #view.st.col { --col:880px; width:calc(100% - var(--rail,0px) - 64px); max-width:880px; padding:0; margin-inline-start:calc(var(--rail,0px) + max(32px,(100% - var(--rail,0px) - 880px)/2)); margin-inline-end:32px; }
  .st.st-page { max-width:880px; padding:32px 0 64px; }
  .st h1,.st.st-page.bill-page h1 { font-size:34px; line-height:40px; }
  .st .st-cover { margin:0 0 16px; padding:28px 32px; border-radius:28px; }
  .st .st-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .st .st-wide-card { grid-column:1/-1; }
  .st .st-home-card { min-height:208px; padding:24px; }
  .st .st-apps-card { min-height:0; }
  .st .st-apps-card .st-card-content { display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:32px; }
  .st .st-home-apps { margin:0; }
  .st .st-quiet-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; }
  .st .st-quiet-list .st-row { border-bottom:1px solid var(--ti-line); }
  .st .st-quiet-list > .st-row:nth-last-child(2),.st .st-quiet-list .st-logout > .st-row:last-child { border-bottom:0; }
  .st .st-page-actions { position:static; transform:none; width:100%; max-width:360px; height:auto; padding:0; margin:24px auto 0; background:none; box-shadow:none; }
  .st .st-page-actions > .st-icon { display:none; }
  .st .st-page-actions .ti-primary { --ti-btn-h:56px; padding-inline-start:22px; }
  .st.st-page:has(.st-page-actions) { padding-bottom:64px; }
  #sheet.st:not(.open),#sheet.st.open { position:fixed; left:50%; top:50%; right:auto; bottom:auto; width:440px; min-width:380px; max-width:480px; height:auto; max-height:80vh; border-radius:24px; transition:transform 200ms ease-out,opacity 200ms ease-out; }
  #sheet.st:not(.open) { transform:translate(-50%,-48%) scale(.98); opacity:0; }
  #sheet.st.open { transform:translate(-50%,-50%); opacity:1; }
  #sheet.st > .handle { display:none; }
  #sheet.st .st-sheet-head { padding-top:24px; }
  #sheet.st.sheet-keyboard.open { transform:translate(-50%,-50%); }
}
@media (prefers-reduced-motion:reduce) {
  .st .st-home-card:has(.st-card-link:active),.st button:active,.st .ti-primary:active .ti-primary-arrow { transform:none; }
}

.st .st-greeting { display:block; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; }
.st .st-quiet-list .st-logout .st-tile { color:var(--error); }
.st.bill-page .bill-plan:has(input:checked) .bill-plan-copy strong { color:var(--ti-ink); }
#sheet.st .bill-sheet { display:contents; }
#sheet.st .bill-checks { padding:0; list-style:none; }
#sheet.st .bill-checks li { display:flex; gap:12px; margin:12px 0; }
#sheet.st .bill-sheet > .ti-primary { width:100%; margin-top:20px; }
.st .st-page-actions .ti-primary { height:56px; min-height:56px; --ti-btn-h:56px; }

.st [hidden],#sheet.st [hidden] { display:none!important; }
#sheet.st .st-sheet-head,#sheet.st > .handle { touch-action:pan-x; }

.st .needs .st-badge { background:var(--ti-select); color:var(--ti-on-select); }

.st .st-time-picks { display:flex; flex-wrap:wrap; gap:8px; }
.st .st-time-picks [aria-pressed="true"] { background:var(--ti-select); color:var(--ti-on-select); }
.st .st-heading > .st-fact { margin-top:16px; }
.st .st-person-face.joined,.st .st-person-face.own { background:var(--ti-ring); color:var(--ti-ink); }
#sheet.st .ti-primary { width:100%; }

#view.st .bill-note.bad,#sheet.st .bill-note.bad { background:var(--ti-surface-2); }

/* The button's words and arrow never take a click: the button always does, even while its words are being changed. */
.st .ti-primary > span, #sheet.st .ti-primary > span { pointer-events: none; }

/* The bell's count is read at 11 px: solid Ember with white (5.35:1); the gradient alone gave 4.05:1. */
.st .st-count-dot { background: #B44744; color: #FFFFFF; }

/* Muted words on the Ember-soft "waiting" card: the page's muted grey gave 4.45:1 there; ink at 72 % passes in both themes. */
.st .st-change.waiting .st-row-sub, .st .st-change.waiting .st-note { color: color-mix(in srgb, var(--ti-ink) 72%, transparent); }

/* KB 49 2.3.5: a phone sheet is as tall as its words, with 48 px of frame at most (the handle, the top and the foot). */
@media (max-width:979px) {
  #sheet.st > .handle { margin:8px auto; }
  #sheet.st .st-sheet-head { padding-top:4px; }
  #sheet.st .st-sheet-body { padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
}
/* A short message: its icon beside the one-line title, the words under both (the passkey offer). */
#sheet.st .st-sheet-head.mark-side { grid-template-columns:40px minmax(0,1fr) 40px; align-items:center; gap:8px 12px; }
#sheet.st .mark-side .st-sheet-mark { grid-column:1; grid-row:1; }
#sheet.st .mark-side .st-sheet-mark > .st-tile { width:40px; height:40px; }
#sheet.st .mark-side .st-sheet-title,#sheet.st .mark-side .st-sheet-title > div { display:contents; }
#sheet.st .mark-side h3 { grid-column:2; grid-row:1; padding:6px 0; }
#sheet.st .mark-side .st-note { grid-column:1 / -1; grid-row:2; margin:0; }
#sheet.st .mark-side .close { grid-column:3; grid-row:1; }

/* KB 33: the WhatsApp confirmation uses the existing Titanium settings card and Gradient arrow. */
.st.wa-setup { max-width:560px; }
.st.wa-setup h2 { font:600 22px/28px Manrope,sans-serif; letter-spacing:-.02em; margin:24px 0 12px; }
.st.wa-setup .st-status { display:inline-block; margin:8px 0; }
.st.wa-setup .ti-primary { margin:20px 0 12px; }
.st.wa-setup .st-heading .st-note { margin-top:8px; overflow-wrap:anywhere; }
.st.wa-setup #wa-setup-error:empty { display:none; }

/* Official market dates share the Settings row, with their own wrapping and date line. */
.st .st-market-season { min-width: 0; min-height: 44px; color: var(--ink); text-decoration: none; }
.st .st-market-season .st-copy { min-width: 0; overflow-wrap: anywhere; }
.st .st-market-date { display: block; margin-bottom: 4px; color: var(--text2); font-size: 13px; line-height: 20px; font-weight: 500; }
.st .st-market-season .ic { flex: none; }
/* An outlet's logo in Your market's sources, as sign-up draws it (js/places.js): initials until the picture loads. */
.st .st-market-source .ob-logo { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line); color: #1D1D1F; font: 600 13px/1 Manrope, sans-serif; }
.st .st-market-source .ob-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: 0; transition: opacity 160ms ease; }
.st .st-market-source .ob-logo img.ok { opacity: 1; }

/* Personal notification choices reuse the Settings radio row and Gradient arrow. */
.st .st-notification-choices { border:0; margin:0 0 20px; padding:0; min-width:0; }
.st .st-notification-choices legend { padding:0 0 8px; }
.st .st-notification-choices .st-radio { align-items:center; }

/* Settings assistant controls: a compact action group, one section per saved connection. */
.st .st-routine-action { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.st .st-routine-action > .st-note,.st .st-routine-action > .st-alert-setup { flex-basis:100%; margin:0; }
.st .st-change.waiting { background:var(--ti-surface-2); border:1px solid var(--ti-line); }
.st .st-change-actions { align-items:center; justify-content:flex-start; margin:12px 0 0; }
.st .st-change-actions > .st-btn,.st .st-change-actions > .ti-primary { flex:0 0 auto; }
.st .st-change-actions > .ti-primary { --ti-btn-h:48px; }
#sheet.st .st-sheet-body > .st-connection-account { margin-bottom:24px; }
.st .st-connections { display:flex; flex-direction:column; gap:24px; }
.st .st-connection { min-width:0; }
.st .st-connection + .st-connection { border-top:1px solid var(--ti-line); padding-top:24px; }
.st .st-connection-head { display:flex; align-items:flex-start; gap:12px; }
.st .st-connection-head h4 { margin:0; font-size:16px; line-height:24px; font-weight:600; }
.st .st-connection-head .st-note { margin:4px 0 0; }
.st .st-connection-permissions { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.st .st-connection-permissions .st-read-line { margin:0; }
.st .st-connection-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.st .st-btn.st-disconnect:not(.text) { color:var(--error); border-color:var(--error); background:transparent; }
.st .st-connection-help { margin-top:24px; padding-top:16px; border-top:1px solid var(--ti-line); }
.st .st-connection-help > .st-note { margin:0 0 12px; }

/* Manage, one grid (owner, 25 Oct 2026: "fix the settings UI ... feel free to adjust the ux"; decided under KB 49). Every
   card sits on the same two columns on a wide screen; Alerts between briefs is a wide card whose two halves are what to send
   and where; each place it can go is a row with its own switch. */
.st .st-switch-row { min-height:56px; }
.st .st-switch-row .st-row-sub { margin-top:2px; }
.st .st-alert-card .st-card-head { margin-bottom:4px; }
.st .st-alert-main > .st-row { border-bottom:0; }
.st .st-alert-columns { border-top:1px solid var(--ti-line); }
.st .st-alert-group > .st-label { margin:20px 0 4px; }
.st .st-alert-card > .st-note { margin:16px 0 0; }
.st .st-door > .brandtile, .st .st-door > .st-tile { width:36px; height:36px; }
.st .st-door-off .st-row-title { color:var(--ti-muted); }
.st .st-door-fix { display:block; min-height:24px; margin-top:2px; padding:0; border:0; background:none; color:var(--ti-ink); font-size:13px; line-height:20px; text-decoration:underline; text-underline-offset:3px; }
.st .st-home-apps .st-app-tile > span { line-height:18px; }
.st .st-app-state { margin-top:-6px; color:var(--ti-muted); font-size:12px; line-height:16px; font-weight:500; }
.st .st-app-state.on { color:var(--ti-jade-text); }
@media (min-width:1024px) {
  .st .st-alert-card { padding:24px; }
  .st .st-alert-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; }
  .st .st-apps-card .st-card-content { display:block; }
  .st .st-apps-card .st-home-apps { margin:0 0 20px; }
}

/* Settings design pass (owner, 26 Oct 2026, on Your own apps: "so blank and not clear, make me so confused on what to look
   and what to do. no proper coloring, buttons"; decided under KB 49). A state says itself in colour, with a dot: Jade when
   it works, Ember when it waits for the reader. Your own apps is one card per app (the logo and name, the state, what it may
   do, its buttons); what waits for a yes comes first; old and expired activity folds behind Show earlier. Usage meters are
   Jade, like the switches. */
.st .st-status { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.st .st-status.on, .st .st-status.act { font-weight:600; }
.st .st-status.on::before, .st .st-status.act::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.st .st-status.act { background:var(--ti-ember-soft); color:var(--ti-ember-text); }
.st .st-meter > span { background:var(--ti-jade); }
.st meter { accent-color:var(--ti-jade); }
.st meter::-webkit-meter-optimum-value, .st .st-usage meter::-webkit-meter-optimum-value { background:var(--ti-jade); }
.st .st-usage meter::-moz-meter-bar { background:var(--ti-jade); }

.st .st-app-card { display:flex; flex-direction:column; gap:16px; }
/* The name and its state on one line; the facts under both, across the card. */
.st .st-app-head { display:grid; grid-template-columns:44px minmax(0,1fr) auto; column-gap:12px; align-items:center; min-width:0; }
.st .st-app-head > .brandtile, .st .st-app-head > .st-tile { grid-row:1 / span 2; width:44px; height:44px; border-radius:12px; }
.st .st-app-head > .brandtile .logo { width:24px; height:24px; }
.st .st-app-head > .st-copy { display:contents; }
.st .st-app-head .st-row-title { grid-column:2; grid-row:1; font-size:17px; line-height:24px; font-weight:600; }
.st .st-app-head .st-row-sub { grid-column:2 / -1; grid-row:2; margin-top:2px; }
.st .st-app-head > .st-status { grid-column:3; grid-row:1; }
.st .st-app-lines { display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:1px solid var(--ti-line); }
.st .st-app-lines .st-read-line { margin:0; }
.st .st-app-daily .ic { color:var(--ti-muted); }
.st .st-app-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.st .st-app-actions > .st-btn { min-height:44px; padding:10px 16px; font-weight:600; }
.st .st-app-actions > .ti-primary { flex:1 1 100%; }
.st .st-app-out .ic { width:16px; height:16px; color:var(--ti-muted); }
.st .st-app-guide { margin:-8px 0 0; }
.st .st-app-guide a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.st .st-app-trust { display:flex; align-items:center; gap:8px; margin:16px 0 0; }
.st .st-app-trust .ic { width:16px; height:16px; flex:none; }
.st .st-asked > .st-label { color:var(--ti-ember-text); }
.st .st-asked .st-change.waiting { margin:0; border:0; padding:0; background:none; }
.st .st-asked .st-change + .st-change { margin-top:16px; padding-top:16px; border-top:1px solid var(--ti-line); }
.st .st-change .st-row > .st-status, .st .st-change .st-row > .st-btn.text { align-self:flex-start; margin-top:12px; }
.st .st-earlier { margin-top:12px; }
.st .st-earlier > summary { list-style:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid var(--ti-line); border-radius:999px; background:var(--ti-fill); font-weight:600; cursor:pointer; }
.st .st-earlier > summary::-webkit-details-marker { display:none; }
.st .st-earlier > summary .ic { width:18px; height:18px; transition:transform 160ms; }
.st .st-earlier[open] > summary { margin-bottom:8px; }
.st .st-earlier[open] > summary .ic { transform:rotate(180deg); }
.st .st-earlier .st-less, .st .st-earlier[open] .st-more { display:none; }
.st .st-earlier[open] .st-less { display:inline; }
.st .st-earlier > summary:focus-visible { outline:2px solid var(--ti-ember); outline-offset:2px; }
.st .st-apps-link .st-row { min-height:64px; }
.st .st-app-stack { display:flex; flex:none; padding-inline-start:8px; }
.st .st-app-stack > .brandtile { width:28px; height:28px; border-radius:8px; margin-inline-start:-8px; box-shadow:0 0 0 2px var(--ti-surface); }
.st .st-app-stack > .brandtile .logo { width:16px; height:16px; }
@media (prefers-reduced-motion:reduce) { .st .st-earlier > summary .ic { transition:none; } }

/* A phone sheet keeps its top (owner, 26 Oct 2026: the account sheet's rows scrolled up past its edge, under the report's
   greeting): the grabber's strip stays while the words scroll under it. Write to us: what we already know in a quiet
   card, the message box, one Send, then the email app as a plain link. */
@media (max-width:979px) {
  #sheet.st > .handle { position:sticky; top:0; z-index:2; align-self:stretch; flex:none; box-sizing:border-box; width:auto; height:21px; margin:0; padding-top:8px; border-radius:0; background:var(--ti-surface); }
  #sheet.st > .handle::before { content:""; display:block; width:40px; height:5px; margin:0 auto; border-radius:99px; background:var(--ti-line); }
}
#sheet.st .st-write-from { margin-bottom:8px; }
#sheet.st .st-write-from .st-row { min-height:52px; padding:8px 0; }
.st .st-field textarea { width:100%; min-width:0; min-height:132px; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--sheet); color:var(--ink); font:400 16px/24px Manrope,'IBM Plex Sans Arabic',sans-serif; resize:vertical; }
.st .st-field textarea:focus-visible { outline:2px solid var(--ember); outline-offset:2px; }
#sheet.st .st-write-mail { margin:16px 0 0; text-align:center; }
#sheet.st .st-write-mail a { color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* Invite your team, end to end (owner, 26 Oct 2026: "the page started from the middle ... no autocomplete or search for the
   country code ... the invitation sent pop-up was so poorly designed ... I didn't see it inside who got the invitation";
   decided under KB 49). A country you search by name or code beside the number; a number typed with its own code moves the
   code to the country. The sent sheet: their face with a Jade check drawn on, how it went, what happens next. Who reads it:
   a waiting invite says so, with Resend and Cancel invite. */
.st .st-phone-field > label { display:block; margin-bottom:8px; }
.st .pc { flex:0 0 auto; display:flex; }
.st .pc[hidden] { display:none; }
.st .pc-face { display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:0 12px; border:1px solid var(--line); border-radius:16px; background:var(--sheet); color:var(--ink); font:500 16px/22px Manrope,sans-serif; white-space:nowrap; }
.st .pc-face .pc-flag { font-size:20px; line-height:1; }
.st .pc-caret { width:14px; height:14px; color:var(--muted); transition:transform 160ms; }
.st .pc-open .pc-caret { transform:rotate(180deg); }
.st .pc-face:focus-visible { outline:2px solid var(--ember); outline-offset:2px; }
.st .pc-panel { margin-top:8px; padding:8px; border:1px solid var(--line); border-radius:16px; background:var(--sheet); }
.st .pc-panel[hidden] { display:none; }
.st .pc-search { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--fill); color:var(--ink); font-size:16px; }
.st .pc-search:focus-visible { outline:2px solid var(--ember); outline-offset:2px; }
.st .pc-results { max-height:232px; margin-top:6px; overflow-y:auto; overscroll-behavior:contain; }
.st .pc-result { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 10px; border:0; border-radius:10px; background:none; color:var(--ink); font-size:15px; text-align:start; }
.st .pc-result .pc-flag { font-size:18px; line-height:1; }
.st .pc-result .pc-name { flex:1; min-width:0; }
.st .pc-result .pc-code { color:var(--muted); font-variant-numeric:tabular-nums; }
.st .pc-result[aria-pressed="true"] { background:var(--fill); font-weight:600; }
.st .pc-result:hover { background:var(--fill); }
.st .pc-none { margin:0; padding:10px; color:var(--muted); font-size:14px; }
.st .st-contact-hint { margin:8px 0 0; }
.st .st-contact-hint:empty { display:none; }
.st .st-link-btn { display:inline; min-height:0; padding:0; border:0; background:none; color:var(--ink); font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
#sheet.st .st-sent-face { position:relative; display:inline-flex; animation:st-sent-in 280ms cubic-bezier(.2,.8,.2,1) both; }
#sheet.st .st-sent-face .st-person-face { width:56px; height:56px; font-size:18px; opacity:1; }
#sheet.st .st-sent-check { position:absolute; right:-4px; bottom:-4px; width:24px; height:24px; overflow:visible; }
#sheet.st .st-sent-check circle { fill:var(--ti-jade); stroke:var(--ti-surface); stroke-width:2; }
#sheet.st .st-sent-check path { fill:none; stroke:#FFFFFF; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16; stroke-dashoffset:16; animation:st-sent-draw 320ms 220ms cubic-bezier(.4,0,.2,1) forwards; }
@keyframes st-sent-in { from { opacity:0; transform:scale(.88); } to { opacity:1; transform:none; } }
@keyframes st-sent-draw { to { stroke-dashoffset:0; } }
#sheet.st .st-next { margin:0 0 8px; padding:4px 16px; }
#sheet.st .st-next .st-row { min-height:60px; }
#sheet.st .st-sent-more { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.st .st-mate-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 0 52px; }
.st .st-mate-actions .st-btn:not(.text) { min-height:40px; padding:8px 14px; font-size:14px; font-weight:600; }
.st .st-mate-actions .st-btn.text { min-height:40px; padding:8px 4px; font-size:14px; }
@media (prefers-reduced-motion:reduce) { #sheet.st .st-sent-face { animation:none; } #sheet.st .st-sent-check path { animation:none; stroke-dashoffset:0; } .st .pc-caret { transition:none; } }
:root[data-ob-still] #sheet.st .st-sent-face { animation:none; }
:root[data-ob-still] #sheet.st .st-sent-check path { animation:none; stroke-dashoffset:0; }

/* Feedback and help (owner, 26 Oct 2026; decided under KB 49, KB 33): what it is as three one-tap tiles (the chosen one in
   the selection colour, never Ember: Send is the one action), the message, one screenshot and what is sent with it. */
#sheet.st .st-kinds { border:0; margin:0 0 16px; padding:0; min-width:0; }
#sheet.st .st-kinds legend { padding:0; }
#sheet.st .st-kind-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#sheet.st .st-kind { position:relative; display:block; min-width:0; cursor:pointer; }
#sheet.st .st-kind input { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
#sheet.st .st-kind span { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:76px; padding:10px 6px; border-radius:16px; background:var(--ti-surface); box-shadow:inset 0 0 0 1px var(--ti-line); color:var(--ti-ink); font-size:14.5px; font-weight:500; line-height:18px; text-align:center; transition:background-color .16s ease, color .16s ease; }
#sheet.st .st-kind { transition:transform .16s cubic-bezier(.23,1,.32,1); }
#sheet.st .st-kind .ic { width:24px; height:24px; }
#sheet.st .st-kind input:checked + span { background:var(--ti-select); color:var(--ti-on-select); box-shadow:none; }
#sheet.st .st-kind input:focus-visible + span { outline:2px solid var(--ti-ember); outline-offset:2px; }
#sheet.st .st-kind:active { transform:scale(.97); }
#sheet.st .st-shot { margin:16px 0 0; }
#sheet.st .st-shot-add { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; }
#sheet.st .st-shot-add input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; font-size:0; }
#sheet.st .st-shot-add:focus-within { outline:2px solid var(--ti-ember); outline-offset:2px; }
#sheet.st .st-shot-add .ic { width:20px; height:20px; }
#sheet.st .st-shot-preview { display:flex; align-items:center; gap:12px; padding:8px 8px 8px 8px; border-radius:16px; background:var(--ti-surface); box-shadow:inset 0 0 0 1px var(--ti-line); }
#sheet.st .st-shot-preview img { flex:none; width:56px; height:56px; border-radius:10px; object-fit:cover; background:var(--ti-fill); }
#sheet.st .st-shot-preview .st-copy { flex:1; min-width:0; }
#sheet.st .st-shot-note { margin:6px 0 0; }
#sheet.st .st-sent-with { margin:16px 0 0; }
#sheet.st .st-sent-with dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; margin:0; padding:12px 14px; border-radius:16px; background:var(--ti-surface-2); font-size:13.5px; line-height:19px; }
#sheet.st .st-sent-with dt { color:var(--ti-muted); }
#sheet.st .st-sent-with dd { margin:0; color:var(--ti-ink); overflow-wrap:anywhere; }
#sheet.st .st-write-sent { font-size:16px; line-height:24px; color:var(--ti-ink); }
@media (prefers-reduced-motion:reduce) { #sheet.st .st-kind, #sheet.st .st-kind span { transition:none; } #sheet.st .st-kind:active { transform:none; } }