/* The pages that were still in the oldest look (T294), as uiux-opus drew them (t294.css, #3033, as delivered): the public
   page bar, the centered card (sign-in, payment done, errors, the passcode, authorizing a computer). Site kit names (sx-);
   linked after site.css. What web adds for its pages is at the end. */

/* 1. Public page bar: the homepage's top row (.sx-top) on its own. Night sky in dark, like the homepage; paper in light,
      like every other bar since T285. The homepage itself keeps its night hero in both themes. */
.sx-pagebar .sx-top { height: 64px; }
:root:not([data-scorpio-effective-theme="dark"]) .sx-pagebar { --sky-fg: var(--fg); --sky-muted: var(--muted); background: var(--surface); background-image: none; box-shadow: inset 0 -1px 0 var(--line); }
:root:not([data-scorpio-effective-theme="dark"]) .sx-pagebar .sx-btn.sx-line { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
:root:not([data-scorpio-effective-theme="dark"]) .sx-pagebar .sx-lang { background: var(--hl); box-shadow: none; }
:root:not([data-scorpio-effective-theme="dark"]) .sx-pagebar .sx-lang .sx-on { background: var(--surface); box-shadow: 0 1px 3px rgba(16, 22, 40, 0.14), 0 0 0 1px var(--line); }
/* bar, the page, then the homepage's footer at the bottom of a short page */
body.sx.sx-pub { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.sx-pub > main { flex: 1; padding: 64px var(--pad) 80px; }

/* 2. The centered card: the file page's download card (.fv-card) in site kit names. Payment done, errors, the passcode,
      authorizing a computer, and (with the lockup on top) signing in. */
.sx-msg { width: min(480px, 100%); margin: 0 auto; padding: 32px 28px 26px; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(16, 22, 40, 0.5); text-align: center; }
:root[data-scorpio-effective-theme="dark"] .sx-msg { box-shadow: 0 0 0 1px var(--line-strong); }
.sx-msg .sx-mi { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; background: var(--hl); color: var(--fg); }
.sx-msg .sx-mi svg { width: 30px; height: 30px; }
.sx-msg .sx-mi.sx-ok { background: var(--live-soft); color: var(--live-ink); }
.sx-msg h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.35; font-weight: 800; }
.sx-msg p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.sx-msg .sx-note { text-align: left; margin: -4px 0 18px; padding: 10px 12px; border-radius: 12px; background: var(--wait-soft); color: var(--wait-ink); font-size: 14px; line-height: 1.5; }
.sx-msg .sx-fld { text-align: left; }
.sx-msg input.sx-in { display: block; width: 100%; margin: 0; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--fg); -webkit-appearance: none; appearance: none; }
.sx-msg input.sx-in:focus { box-shadow: inset 0 0 0 2px var(--action); }
.sx-msg input.sx-mono { font: 600 17px var(--mono); letter-spacing: 0.06em; }
.sx-msg input.sx-bad { box-shadow: inset 0 0 0 2px var(--you-ink); }
.sx-msg .sx-btn { font: inherit; font-weight: 650; border: 0; cursor: pointer; text-decoration: none; }
.sx-msg .sx-btn.sx-lg { font-size: 16.5px; }
.sx-msg small { display: block; margin-top: 16px; font-size: 14px; color: var(--muted); }
/* signing in: the lockup instead of an icon, the two ways in as full-width buttons */
.sx-login .s-lockup { display: block; height: 30px; width: auto; margin: 6px auto 16px; color: var(--fg); }
.sx-login .sx-btn { color: var(--fg); }
.sx-login .sx-btn + .sx-btn { margin-top: 10px; }
.sx-login .sx-link { color: var(--link); }
/* in the signed-in shell (settings' column and bar): the card sits in the middle of the page */
.ui .pagein.sx-center { display: block; padding-top: 48px; }

@media (max-width: 760px) {
  body.sx-pub > main { padding: 28px 16px 48px; }
  .sx-msg { padding: 26px 20px 22px; }
  .ui .pagein.sx-center { padding-top: 24px; }
}

/* ---- what web adds for its pages (T294) ---- */
/* the providers' marks in the sign-in buttons; a provider not set up yet; a sign-in problem */
.sx-login .sx-btn .mark { width: 20px; height: 20px; flex: none; }
.sx-login .sx-btn.sx-off { opacity: 0.55; cursor: default; }
.sx-login .sx-btn small { display: inline; margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.sx-msg .sx-note.sx-bad { background: var(--you-soft); color: var(--you-ink); }
.sx-msg .sx-check { display: flex; justify-content: center; min-height: 65px; margin: 0 0 16px; }
/* authorizing a computer, its confirm step: what asks, then the two answers side by side */
.sx-msg .sx-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--hl); text-align: left; font-size: 15px; }
.sx-msg .sx-kv dt { color: var(--muted); }
.sx-msg .sx-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sx-msg .sx-kv .sx-mono { font: 600 15px var(--mono); letter-spacing: 0.06em; }
.sx-msg .sx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sx-msg small.sx-detail { margin: -8px 0 18px; font-size: 12.5px; overflow-wrap: anywhere; }
/* pricing: the homepage's price section on its own page */
body.sx-pub > main.sx-flush { padding: 0; }
.sx-pricing.sx-sec { padding: 56px var(--pad) 72px; }
.sx-pricing .sx-sub { margin-bottom: 32px; }
.sx-plan .sx-state { margin: 0 0 10px; font-size: 15px; }
.sx-plan .sx-state span { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: 13.5px; }
.sx-plan .sx-buy { display: grid; gap: 10px; }
.sx-plan .sx-state + .sx-btn { margin-top: 4px; }
.sx-pricing .sx-foot-note { margin-top: 22px; text-align: left; max-width: 62em; line-height: 1.6; }
/* the privacy policy and the terms: one column set like a Markdown file on its own page (file-view.ts DOC_CSS) */
.sx-doc { max-width: 760px; margin: 0 auto; line-height: 1.75; overflow-wrap: break-word; }
.sx-doc h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.3; font-weight: 800; }
.sx-doc > .sx-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.sx-doc h2, .sx-doc h3 { font-weight: 800; line-height: 1.35; margin: 1.4em 0 0.5em; }
.sx-doc h2 { font-size: 1.4em; }
.sx-doc h3 { font-size: 1.15em; }
.sx-doc p { margin: 0.6em 0; }
.sx-doc ul, .sx-doc ol { padding-left: 1.4em; margin: 0.5em 0; }
.sx-doc a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.sx-doc code { font: 0.88em var(--mono); padding: 0.08em 0.35em; border-radius: 5px; background: var(--code-bg); }
/* a public topic's snapshot: rows like the topic page's (avatar, name, time, the text), read only */
.sx-snap { max-width: 760px; margin: 0 auto; }
.sx-snap h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; }
.sx-snap .sx-intro { margin: 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.sx-snap .sx-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); vertical-align: 2px; }
.sx-rows { margin: 22px 0 18px; padding: 4px 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.sx-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 9px; padding: 12px 0 11px; }
.sx-row + .sx-row { box-shadow: inset 0 1px 0 var(--line); }
.sx-av { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--hl); color: var(--fg); font-size: 11px; font-weight: 750; }
.sx-av.sx-agent { background: none; }
.sx-av.sx-agent .bot { width: 22px; height: 22px; }
.sx-rt { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 14px; }
.sx-rt b { font-weight: 700; }
.sx-rt span { color: var(--muted); font-size: 12.5px; }
.sx-rt time { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.sx-rx { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.6; }
.sx-rf { margin-top: 4px; color: var(--muted); font-size: 14px; }
.sx-snap > .sx-sub { color: var(--muted); font-size: 14px; }
@media (max-width: 760px) {
  .sx-pricing.sx-sec { padding: 32px 16px 48px; }
  .sx-doc h1 { font-size: 26px; }
  .sx-rows { padding: 2px 14px; }
}
/* a wrong passcode or code stays red while the box has focus (the passcode box takes focus on load) */
.sx-msg input.sx-bad, .sx-msg input.sx-bad:focus { box-shadow: inset 0 0 0 2px var(--you-ink); }