/* The sign-in page and the Account page's passkeys. Loaded after style.css
   and meant to stay out of its way: everything here is scoped to .si-page,
   .si-* or .acct-* / .pk-*.

   Sign-in is the one product screen that keeps the brand's first look: Void
   ground, a Space-tinted glass card, Hull hairlines, Frost and Regolith text,
   a few stars as dust and one planetary limb with a thin Ice rim. Ice appears
   only on that rim, the card's top edge, focus rings and the one primary
   action. Light theme follows the brand's Frost-tinted white (#EEF3F5).
   Spacing is on the 8px grid; borders are 1px. */

/* ---------- Sign in: tokens ---------- */

.si-page {
  --si-bg: #04060A;                      /* Void */
  --si-card: rgba(10, 15, 21, .74);      /* Space, as glass */
  --si-card-edge: #18212B;               /* Hull */
  --si-rule: #1D2833;                    /* dividers inside the card */
  --si-line: #27333F;                    /* control borders */
  --si-line-hover: #3A4857;
  --si-fill: rgba(255, 255, 255, .03);
  --si-fill-hover: rgba(255, 255, 255, .06);
  --si-field: rgba(4, 6, 10, .55);
  --si-text: #E6F1F4;                    /* Frost */
  --si-text-2: #7D8A97;                  /* Regolith, 5.7:1 on Void */
  --si-ice: #7CE0EE;
  --si-ice-hover: #9BE9F3;
  --si-ice-press: #5FCBDB;
  --si-on-ice: #04060A;                  /* text on an Ice fill is always Void */
  --si-ice-edge: transparent;
  --si-ring: rgba(124, 224, 238, .65);
  --si-ring-soft: rgba(124, 224, 238, .14);
  --si-rim: #7CE0EE;
  --si-rim-top: rgba(124, 224, 238, .75);
  --si-glow: rgba(124, 224, 238, .22);
  --si-planet: #070B10;
  --si-stars: 1;
  --si-rise: clamp(56px, 9vh, 104px);     /* how far the limb stands above the bottom edge */
  --si-error: #F2555A;
  --si-shadow: 0 32px 64px -24px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .04);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .si-page {
    --si-bg: #EEF3F5;
    --si-card: rgba(255, 255, 255, .82);
    --si-card-edge: #D6DEE6;
    --si-rule: #DCE3EA;
    --si-line: #CBD5DE;
    --si-line-hover: #AEBBC8;
    --si-fill: rgba(12, 17, 24, .02);
    --si-fill-hover: rgba(12, 17, 24, .05);
    --si-field: #FFFFFF;
    --si-text: #0C1118;
    --si-text-2: #56626F;
    --si-ice-hover: #6AD5E4;
    --si-ice-press: #52C4D4;
    --si-ice-edge: rgba(8, 112, 126, .38);
    --si-ring: rgba(8, 112, 126, .6);
    --si-ring-soft: rgba(8, 112, 126, .14);
    --si-rim: #0B7C8B;
    --si-rim-top: rgba(11, 124, 139, .4);
    --si-glow: rgba(11, 124, 139, 0);
    --si-planet: #F8FBFC;
    --si-stars: 0;
    --si-error: #C4292E;
    --si-shadow: 0 24px 56px -28px rgba(16, 24, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
  }
}
:root[data-theme="light"] .si-page {
  --si-bg: #EEF3F5;
  --si-card: rgba(255, 255, 255, .82);
  --si-card-edge: #D6DEE6;
  --si-rule: #DCE3EA;
  --si-line: #CBD5DE;
  --si-line-hover: #AEBBC8;
  --si-fill: rgba(12, 17, 24, .02);
  --si-fill-hover: rgba(12, 17, 24, .05);
  --si-field: #FFFFFF;
  --si-text: #0C1118;
  --si-text-2: #56626F;
  --si-ice-hover: #6AD5E4;
  --si-ice-press: #52C4D4;
  --si-ice-edge: rgba(8, 112, 126, .38);
  --si-ring: rgba(8, 112, 126, .6);
  --si-ring-soft: rgba(8, 112, 126, .14);
  --si-rim: #0B7C8B;
  --si-rim-top: rgba(11, 124, 139, .4);
  --si-glow: rgba(11, 124, 139, 0);
  --si-planet: #F8FBFC;
  --si-stars: 0;
  --si-error: #C4292E;
  --si-shadow: 0 24px 56px -28px rgba(16, 24, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ---------- Sign in: page and sky ---------- */

.si-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  justify-items: center;
  align-content: start;
  /* Anchored where a collapsed card sits at the optical centre, so opening
     the token field or showing a message grows the card downward instead of
     shifting everything above it. */
  padding: max(32px, calc(50vh - 232px)) 16px calc(var(--si-rise) + 8px);
  background: var(--si-bg);
  color: var(--si-text);
  transition: background-color .3s ease;
}

.si-page ::selection { background: rgba(124, 224, 238, .32); color: var(--si-text); }
:root[data-theme="light"] .si-page ::selection { background: rgba(8, 112, 126, .22); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .si-page ::selection { background: rgba(8, 112, 126, .22); } }

.si-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.si-stars {
  position: absolute;
  inset: 0;
  opacity: var(--si-stars);
  transition: opacity .3s ease;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1120' height='700' viewBox='0 0 1120 700'><circle cx='362.7' cy='105.6' r='0.38' fill='%23E6F1F4' fill-opacity='0.35'/><circle cx='65.0' cy='355.2' r='0.5' fill='%23E6F1F4' fill-opacity='0.2'/><circle cx='475.5' cy='578.8' r='0.43' fill='%23E6F1F4' fill-opacity='0.38'/><circle cx='646.4' cy='277.7' r='1.12' fill='%23E6F1F4' fill-opacity='0.91'/><circle cx='161.6' cy='82.5' r='0.64' fill='%23E6F1F4' fill-opacity='0.24'/><circle cx='715.6' cy='260.7' r='0.37' fill='%23E6F1F4' fill-opacity='0.2'/><circle cx='762.0' cy='299.3' r='0.55' fill='%23E6F1F4' fill-opacity='0.33'/><circle cx='889.7' cy='489.3' r='0.55' fill='%23E6F1F4' fill-opacity='0.35'/><circle cx='817.0' cy='201.6' r='1.15' fill='%23E6F1F4' fill-opacity='0.8'/><circle cx='170.2' cy='342.3' r='0.58' fill='%23E6F1F4' fill-opacity='0.42'/><circle cx='980.5' cy='219.6' r='0.56' fill='%23E6F1F4' fill-opacity='0.37'/><circle cx='940.8' cy='661.3' r='0.58' fill='%23E6F1F4' fill-opacity='0.2'/><circle cx='724.8' cy='695.2' r='0.81' fill='%23E6F1F4' fill-opacity='0.54'/><circle cx='25.3' cy='323.2' r='0.39' fill='%23E6F1F4' fill-opacity='0.2'/><circle cx='144.9' cy='173.3' r='0.65' fill='%23E6F1F4' fill-opacity='0.21'/><circle cx='615.4' cy='618.4' r='1.05' fill='%23E6F1F4' fill-opacity='0.5'/><circle cx='401.8' cy='618.9' r='1.16' fill='%23E6F1F4' fill-opacity='0.74'/><circle cx='261.3' cy='339.5' r='0.44' fill='%23E6F1F4' fill-opacity='0.18'/><circle cx='413.6' cy='396.4' r='1.38' fill='%23E6F1F4' fill-opacity='0.83'/><circle cx='757.3' cy='37.8' r='1.01' fill='%23E6F1F4' fill-opacity='0.71'/><circle cx='439.5' cy='279.3' r='0.57' fill='%23E6F1F4' fill-opacity='0.2'/><circle cx='233.8' cy='113.6' r='0.37' fill='%23E6F1F4' fill-opacity='0.18'/><circle cx='113.6' cy='254.5' r='0.66' fill='%23E6F1F4' fill-opacity='0.38'/><circle cx='282.5' cy='243.2' r='0.39' fill='%23E6F1F4' fill-opacity='0.45'/><circle cx='521.9' cy='338.7' r='0.39' fill='%23E6F1F4' fill-opacity='0.29'/><circle cx='928.3' cy='113.0' r='0.68' fill='%23E6F1F4' fill-opacity='0.35'/><circle cx='608.4' cy='18.9' r='0.69' fill='%23E6F1F4' fill-opacity='0.46'/><circle cx='292.4' cy='256.7' r='0.62' fill='%23E6F1F4' fill-opacity='0.35'/><circle cx='369.2' cy='156.1' r='1.09' fill='%23E6F1F4' fill-opacity='0.7'/><circle cx='916.5' cy='517.9' r='0.53' fill='%237CE0EE' fill-opacity='0.29'/><circle cx='31.3' cy='195.6' r='0.59' fill='%23E6F1F4' fill-opacity='0.49'/><circle cx='1049.5' cy='691.6' r='1.25' fill='%23E6F1F4' fill-opacity='0.76'/><circle cx='220.3' cy='143.1' r='0.67' fill='%23E6F1F4' fill-opacity='0.45'/><circle cx='731.3' cy='559.8' r='0.58' fill='%23E6F1F4' fill-opacity='0.47'/><circle cx='840.2' cy='334.6' r='0.63' fill='%23E6F1F4' fill-opacity='0.29'/><circle cx='1088.3' cy='277.1' r='0.68' fill='%23E6F1F4' fill-opacity='0.41'/><circle cx='142.3' cy='105.8' r='1.02' fill='%23E6F1F4' fill-opacity='0.45'/><circle cx='1097.9' cy='460.1' r='0.54' fill='%237CE0EE' fill-opacity='0.22'/><circle cx='1087.4' cy='454.8' r='0.68' fill='%23E6F1F4' fill-opacity='0.32'/><circle cx='925.3' cy='147.7' r='0.45' fill='%23E6F1F4' fill-opacity='0.26'/><circle cx='290.5' cy='293.3' r='0.67' fill='%23E6F1F4' fill-opacity='0.29'/><circle cx='653.4' cy='633.0' r='0.67' fill='%23E6F1F4' fill-opacity='0.34'/><circle cx='586.3' cy='13.1' r='0.41' fill='%23E6F1F4' fill-opacity='0.18'/><circle cx='193.0' cy='331.4' r='0.92' fill='%23E6F1F4' fill-opacity='0.51'/><circle cx='622.1' cy='549.0' r='0.55' fill='%23E6F1F4' fill-opacity='0.26'/><circle cx='864.9' cy='355.4' r='0.62' fill='%23E6F1F4' fill-opacity='0.47'/><circle cx='686.0' cy='353.9' r='0.59' fill='%23E6F1F4' fill-opacity='0.32'/><circle cx='535.4' cy='659.1' r='0.66' fill='%23E6F1F4' fill-opacity='0.48'/><circle cx='626.7' cy='660.3' r='0.75' fill='%23E6F1F4' fill-opacity='0.44'/><circle cx='81.3' cy='168.4' r='0.58' fill='%23E6F1F4' fill-opacity='0.43'/><circle cx='173.0' cy='501.3' r='0.4' fill='%23E6F1F4' fill-opacity='0.46'/><circle cx='245.9' cy='666.8' r='0.52' fill='%23E6F1F4' fill-opacity='0.5'/><circle cx='180.8' cy='302.1' r='0.47' fill='%23E6F1F4' fill-opacity='0.24'/><circle cx='808.8' cy='13.6' r='0.5' fill='%23E6F1F4' fill-opacity='0.19'/><circle cx='698.8' cy='358.6' r='0.69' fill='%23E6F1F4' fill-opacity='0.43'/><circle cx='117.4' cy='185.9' r='0.62' fill='%23E6F1F4' fill-opacity='0.27'/><circle cx='472.9' cy='638.0' r='0.8' fill='%23E6F1F4' fill-opacity='0.45'/><circle cx='639.1' cy='490.3' r='0.37' fill='%23E6F1F4' fill-opacity='0.4'/><circle cx='81.1' cy='656.8' r='0.63' fill='%23E6F1F4' fill-opacity='0.21'/><circle cx='74.6' cy='603.9' r='0.47' fill='%23E6F1F4' fill-opacity='0.36'/><circle cx='300.0' cy='90.5' r='0.43' fill='%23E6F1F4' fill-opacity='0.22'/><circle cx='56.4' cy='141.2' r='0.46' fill='%23E6F1F4' fill-opacity='0.42'/><circle cx='560.1' cy='124.5' r='0.36' fill='%237CE0EE' fill-opacity='0.26'/><circle cx='821.1' cy='385.7' r='0.52' fill='%23E6F1F4' fill-opacity='0.48'/><circle cx='917.2' cy='302.5' r='0.64' fill='%23E6F1F4' fill-opacity='0.31'/><circle cx='770.3' cy='687.7' r='0.64' fill='%23E6F1F4' fill-opacity='0.41'/><circle cx='453.3' cy='243.3' r='0.4' fill='%23E6F1F4' fill-opacity='0.2'/><circle cx='286.3' cy='114.3' r='0.64' fill='%23E6F1F4' fill-opacity='0.46'/><circle cx='315.8' cy='169.5' r='0.51' fill='%23E6F1F4' fill-opacity='0.23'/><circle cx='294.8' cy='673.3' r='1.32' fill='%23E6F1F4' fill-opacity='0.76'/><circle cx='346.7' cy='249.6' r='0.48' fill='%23E6F1F4' fill-opacity='0.33'/><circle cx='225.1' cy='353.3' r='0.44' fill='%23E6F1F4' fill-opacity='0.21'/><circle cx='46.7' cy='15.7' r='0.43' fill='%23E6F1F4' fill-opacity='0.37'/><circle cx='840.6' cy='460.3' r='0.66' fill='%23E6F1F4' fill-opacity='0.3'/><circle cx='1102.9' cy='104.6' r='0.96' fill='%23E6F1F4' fill-opacity='0.42'/><circle cx='999.0' cy='439.1' r='1.02' fill='%23E6F1F4' fill-opacity='0.45'/><circle cx='564.9' cy='584.5' r='1.03' fill='%23E6F1F4' fill-opacity='0.6'/><circle cx='764.8' cy='485.3' r='0.36' fill='%23E6F1F4' fill-opacity='0.22'/><circle cx='117.5' cy='585.1' r='0.57' fill='%23E6F1F4' fill-opacity='0.38'/><circle cx='548.0' cy='2.3' r='1.0' fill='%23E6F1F4' fill-opacity='0.58'/><circle cx='738.4' cy='46.2' r='0.8' fill='%23E6F1F4' fill-opacity='0.43'/><circle cx='816.9' cy='143.7' r='1.09' fill='%23E6F1F4' fill-opacity='0.57'/><circle cx='536.5' cy='478.6' r='0.95' fill='%23E6F1F4' fill-opacity='0.62'/><circle cx='165.1' cy='177.8' r='0.82' fill='%237CE0EE' fill-opacity='0.6'/><circle cx='67.9' cy='188.1' r='0.59' fill='%23E6F1F4' fill-opacity='0.4'/><circle cx='578.5' cy='325.3' r='0.39' fill='%23E6F1F4' fill-opacity='0.47'/><circle cx='1095.5' cy='655.4' r='0.51' fill='%23E6F1F4' fill-opacity='0.44'/><circle cx='503.4' cy='188.1' r='0.68' fill='%23E6F1F4' fill-opacity='0.25'/><circle cx='158.7' cy='366.8' r='1.15' fill='%23E6F1F4' fill-opacity='0.91'/><circle cx='993.3' cy='492.3' r='0.66' fill='%237CE0EE' fill-opacity='0.34'/><circle cx='4.0' cy='344.2' r='0.46' fill='%23E6F1F4' fill-opacity='0.23'/><circle cx='354.0' cy='588.2' r='0.61' fill='%23E6F1F4' fill-opacity='0.45'/><circle cx='1037.6' cy='499.1' r='0.82' fill='%23E6F1F4' fill-opacity='0.53'/><circle cx='1118.6' cy='412.4' r='0.5' fill='%237CE0EE' fill-opacity='0.27'/><circle cx='113.9' cy='584.3' r='0.68' fill='%23E6F1F4' fill-opacity='0.26'/><circle cx='572.3' cy='132.9' r='0.68' fill='%23E6F1F4' fill-opacity='0.46'/></svg>");
  background-size: 1120px 700px;
  background-position: center top;
}
/* A planetary limb along the bottom: a body that is dark except for a thin
   Ice rim on its lit edge, fading as the curve falls away. The one glowing
   thing on the page. */
.si-limb {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--si-rise));
  width: max(300vw, 2600px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--si-planet), var(--si-planet)) padding-box,
    linear-gradient(180deg, var(--si-rim) 0, var(--si-rim) .04%, transparent 2.6%) border-box;
  box-shadow: 0 -16px 40px -18px var(--si-glow);
  transition: background .3s ease, box-shadow .3s ease;
}

/* ---------- Sign in: entrance ---------- */

@keyframes si-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes si-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes si-sweep { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

.si-in { animation: si-rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms + 40ms); }

/* ---------- Sign in: card ---------- */

.si-shell { width: 100%; max-width: 408px; }

.si-card {
  position: relative;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--si-card);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--si-card-edge);
  box-shadow: var(--si-shadow);
  transition: background-color .3s ease, border-color .3s ease;
}
/* The rim light on the card's top edge. */
.si-card::before {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--si-rim-top), transparent);
  pointer-events: none;
}

.si-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 32px; }
.si-page .lockup { gap: 12px; margin-bottom: 16px; color: var(--si-text); }
.si-page .lockup img { width: 32px; height: 32px; }
.si-page .wordmark { font-size: 26px; }
.si-head h1 { font-size: 32px; font-weight: 200; line-height: 1.15; letter-spacing: -.005em; color: var(--si-text); }
.si-head p { font-size: 14px; line-height: 1.6; color: var(--si-text-2); }

/* ---------- Sign in: the stack ---------- */

.si-stack { display: flex; flex-direction: column; gap: 8px; }

.si-skel { display: block; height: 48px; border-radius: 8px; background: var(--si-rule); animation: si-pulse 1.4s ease-in-out infinite; }

.si-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font: 400 15px/1 var(--sans);
  letter-spacing: .02em;
  text-align: left;
  text-decoration: none;
  color: var(--si-text);
  background: var(--si-fill);
  border: 1px solid var(--si-line);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .1s ease, box-shadow .16s ease;
}
.si-btn:hover { background: var(--si-fill-hover); border-color: var(--si-line-hover); color: var(--si-text); }
.si-btn:active { transform: translateY(1px); }
.si-btn:focus-visible { outline: 2px solid var(--si-ring); outline-offset: 2px; }
.si-btn .i { width: 20px; height: 20px; vertical-align: 0; }
.si-btn .si-label { flex: 1 1 auto; min-width: 0; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-btn .si-go { width: 16px; height: 16px; opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }
.si-btn:hover .si-go, .si-btn:focus-visible .si-go { opacity: .7; transform: none; }

.si-btn.primary {
  font-weight: 500;
  color: var(--si-on-ice);
  background: var(--si-ice);
  border-color: var(--si-ice-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
}
.si-btn.primary:hover { background: var(--si-ice-hover); border-color: var(--si-ice-edge); color: var(--si-on-ice); }
.si-btn.primary:active { background: var(--si-ice-press); box-shadow: none; }
.si-btn.primary .si-go { opacity: .7; transform: none; }
.si-btn.primary:hover .si-go { opacity: 1; transform: translateX(2px); }

/* Pending: no spinner (brand), a hairline sweeping along the bottom edge. */
.si-btn::after, .si-bar-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: translateX(-110%);
}
.is-loading { pointer-events: none; }
.is-loading::after { opacity: .55; animation: si-sweep 1.15s cubic-bezier(.45, 0, .25, 1) infinite; }
.is-loading .si-go { opacity: 0 !important; }
.si-btn.is-done .si-go { opacity: 0; }

.si-or { display: flex; align-items: center; gap: 16px; margin: 8px 0; font: 400 11px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--si-text-2); }
.si-or::before, .si-or::after { content: ""; flex: 1; height: 1px; background: var(--si-rule); }

/* ---------- Sign in: API token ---------- */

.si-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  font: 400 14px/1 var(--sans);
  letter-spacing: .02em;
  color: var(--si-text-2);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.si-toggle:hover { color: var(--si-text); background: var(--si-fill); }
.si-toggle:focus-visible { outline: 2px solid var(--si-ring); outline-offset: 2px; }
.si-toggle .i { width: 16px; height: 16px; vertical-align: 0; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.si-token[data-open="1"] .si-toggle { color: var(--si-text); }
.si-token[data-open="1"] .si-toggle .i { transform: rotate(180deg); }

/* The panel opens by animating its row from 0fr to 1fr, so the card grows
   smoothly to whatever the content needs. It stays hidden (and inert) while
   shut so nothing inside can be tabbed to. */
.si-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0 -4px;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .34s cubic-bezier(.2, .7, .2, 1), opacity .2s ease, visibility 0s linear .34s;
}
.si-token[data-open="1"] .si-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .34s cubic-bezier(.2, .7, .2, 1), opacity .24s ease .06s, visibility 0s;
}
.si-panel-clip { min-height: 0; overflow: hidden; }
.si-form { padding: 8px 4px 4px; }

/* Field and button, one bar. */
.si-bar {
  position: relative;
  display: flex;
  height: 48px;
  background: var(--si-field);
  border: 1px solid var(--si-line);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.si-bar:hover { border-color: var(--si-line-hover); }
.si-bar:focus-within { border-color: var(--si-ring); box-shadow: 0 0 0 3px var(--si-ring-soft); }
.si-bar[data-invalid="1"] { border-color: var(--si-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--si-error) 16%, transparent); }
.si-bar input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 16px;
  font: 400 14px/1 var(--mono);
  letter-spacing: 0;
  color: var(--si-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
}
.si-bar input::placeholder { color: var(--si-text-2); opacity: .8; }
.si-bar input:-webkit-autofill { -webkit-text-fill-color: var(--si-text); box-shadow: 0 0 0 100px var(--si-field) inset; caret-color: var(--si-text); }
.si-bar-btn {
  position: relative;
  flex: none;
  padding: 0 20px;
  font: 400 14px/1 var(--sans);
  letter-spacing: .02em;
  color: var(--si-text);
  background: var(--si-fill-hover);
  border: 0;
  border-left: 1px solid var(--si-line);
  cursor: pointer;
  overflow: hidden;
  transition: background-color .16s ease, color .16s ease;
}
.si-bar-btn:hover { background: color-mix(in srgb, var(--si-text) 12%, transparent); }
.si-bar-btn:active { background: color-mix(in srgb, var(--si-text) 16%, transparent); }
.si-bar-btn:focus-visible { outline: 2px solid var(--si-ring); outline-offset: -3px; }
.si-bar-btn:disabled { cursor: default; }
/* When the token is the only way in, its button is the primary action. */
.si-bar-btn.primary { font-weight: 500; color: var(--si-on-ice); background: var(--si-ice); border-left-color: var(--si-ice-edge); }
.si-bar-btn.primary:hover { background: var(--si-ice-hover); }
.si-bar-btn.primary:active { background: var(--si-ice-press); }
.si-hint { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--si-text-2); }

/* ---------- Sign in: messages ---------- */

.si-alert {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -16px;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .28s cubic-bezier(.2, .7, .2, 1), opacity .2s ease, margin .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .28s;
}
.si-alert[data-open="1"] { grid-template-rows: 1fr; margin-top: -16px; margin-bottom: 16px; opacity: 1; visibility: visible; transition-delay: 0s; }
.si-alert-clip { min-height: 0; overflow: hidden; }
.si-alert-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--si-text);
  background: color-mix(in srgb, var(--si-error) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--si-error) 48%, transparent);
  border-radius: 8px;
}
.si-alert-body .i { margin-top: 2px; color: var(--si-error); }
.si-alert[data-tone="quiet"] .si-alert-body { background: var(--si-fill); border-color: var(--si-line); }
.si-alert[data-tone="quiet"] .si-alert-body .i { color: var(--si-text-2); }

.si-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 16px; padding: 0 4px; font: 400 11px/1.6 var(--mono); letter-spacing: .08em; color: var(--si-text-2); }
.si-foot .linkish { color: var(--si-text-2); }
.si-foot .linkish:hover { color: var(--si-text); }
.si-foot .linkish:focus-visible { outline: 2px solid var(--si-ring); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 480px) {
  .si-page { padding: max(24px, 9vh) 16px calc(var(--si-rise) + 8px); }
  .si-card { padding: 24px 20px; }
  .si-card::before { left: 20px; right: 20px; }
  .si-head { margin-bottom: 24px; }
  .si-head h1 { font-size: 28px; }
  /* 16px stops iOS zooming into the field. */
  .si-bar input { font-size: 16px; }
  .si-alert { margin-top: -8px; }
  .si-alert[data-open="1"] { margin-top: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .si-page *, .si-page *::before, .si-page *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .si-btn:active { transform: none; }
  .is-loading::after { opacity: .55; width: 100%; transform: none; }
}

/* ---------- Account ---------- */

.acct-who { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px; }
.acct-who .avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--well); object-fit: cover; }
.acct-who .avatar-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-2); border: 1px solid var(--line); }
.acct-who .who-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-who .nm { font-size: 16px; font-weight: 400; }
.acct-who .sub { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.acct-orgs { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.pk-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pk-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--text-2); background: var(--well); border: 1px solid var(--line); border-radius: var(--r-sm); }
.pk-ico .i { width: 20px; height: 20px; vertical-align: 0; }
.pk-name > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.pk-table td.actions { white-space: nowrap; }
.pk-table td.actions .btn + .btn { margin-left: 8px; }
.pk-table tr.just-added td { animation: pk-flash 2.6s ease-out; }
@keyframes pk-flash { from { background: var(--vivid-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .pk-table tr.just-added td { animation: none; } }

.pk-msg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--text-2); border: 1px solid var(--line); border-radius: var(--r); }
.pk-msg .i { margin-top: 2px; flex: none; }
.pk-msg.error { color: var(--text); border-color: color-mix(in srgb, var(--error) 55%, var(--line)); }
.pk-msg.error .i { color: var(--error); }
.pk-note { display: flex; align-items: flex-start; gap: 8px; }
.pk-note .i { margin-top: 3px; flex: none; }

/* ---------- MCP: consent and Connect an agent (#187) ---------- */

.mcp-access-set { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; flex: none; }
.mcp-access-set legend { padding: 0; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); }
.mcp-access { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--field); cursor: pointer; }
.mcp-access:hover { border-color: var(--line-hover); }
.mcp-access:has(input:checked) { border-color: var(--vivid); background: var(--vivid-soft); }
.mcp-access:has(input:focus-visible) { outline: 2px solid var(--vivid-ring); outline-offset: 2px; }
.mcp-access.off { cursor: not-allowed; opacity: .6; }
.mcp-access input { margin: 3px 0 0; flex: none; accent-color: var(--vivid); }
.mcp-access-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mcp-access-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--text); }
.mcp-access-title .i { color: var(--text-2); }
.mcp-access:has(input:checked) .mcp-access-title .i { color: var(--vivid-ink); }
.mcp-access-text { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.mcpauth .cliauth-head h1 { overflow-wrap: anywhere; }
.mcpauth .cliauth-facts dd { overflow-wrap: anywhere; }
.mcpauth .callout { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.mcpauth .callout strong { color: var(--text); }

.mcp-tabs { margin: 4px 0 0; }
.mcp-howto { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.6; }
.mcp-howto p { margin: 0; max-width: 72ch; }
.mcp-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.mcp-snippet { border: 1px solid var(--line); border-radius: var(--r); background: var(--well); overflow: hidden; }
.mcp-snippet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.mcp-snippet pre { margin: 0; padding: 12px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--text); }
.badge.mcp-write { border-color: var(--vivid-soft); background: var(--vivid-soft); color: var(--vivid-ink); }
.mcp-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.mcp-table td.actions { white-space: nowrap; }
.tok-mcp-lead { margin: -8px 0 16px; font-size: 14px; }
.mcp-howto code { white-space: nowrap; }
@media (max-width: 600px) {
  .mcp-snippet pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}