/* ---- door ---- */
/* The host door's card, a house panel on the stage: one grid for every
   state. On a phone it all runs down the card. From 1024px what to do stands
   on the left (.sn-main), what a host gets on the right (the pillars, two rows
   tall) and the totals under the left column, so the card has no hole in it.
   The pillars are the list part's, the totals the stat part's, the buttons
   the button part's; here only where they stand. Settings first; the widths
   only change settings. */
.sn-box {
  --sn-gap: var(--sp-6);         /* between the blocks, and between the two columns: the approved card's 24px at every width */
  --sn-cols: minmax(0, 7fr) minmax(0, 5fr);
  display: grid; gap: var(--sn-gap); min-width: 0;
}
@media (min-width: 1024px) {
  .sn-box { grid-template-columns: var(--sn-cols); }
  .sn-box > * { grid-column: 1 / -1; }
  .sn-box > .sn-main { grid-column: 1; }
  .sn-box > .sn-pillars { grid-column: 2; grid-row: span 2; align-self: start; }
  .sn-box > .sn-totals { grid-column: 1; align-self: end; }
}

/* "Checking…": the pixel face, holding the card open about as tall as what follows, so the card
   does not grow out of a sliver. With scripts off it is hidden and the noscript sentence stands. */
.sn-busy { --sn-wait: 216px; font: var(--t-label); text-transform: uppercase; }
.sn-wait { min-height: var(--sn-wait); }
@media (min-width: 1024px) { .sn-busy { --sn-wait: 280px; } }
html:not(.js) .sn-wait { display: none; }

/* What to do: the heading, a note over the lead, the lead, the one action, the small print.
   Each piece carries its own settings, so it reads the same wherever it stands (the noscript
   sentence stands outside .sn-main, and the dashboard's cards borrow these). */
.sn-main {
  --sn-fine-measure: 56ch; --sn-req-measure: 46ch; --sn-measure: 52ch;
  --sn-callout-track: -.01em;
  display: grid; gap: var(--sp-3); justify-items: start; align-content: start; min-width: 0;
}
.sn-h { --sn-h-size: 28px; --sn-h-line: 32px; --sn-h-track: -.025em; font: 700 var(--sn-h-size)/var(--sn-h-line) var(--sans); letter-spacing: var(--sn-h-track); text-wrap: balance; }
.sn-lead { --sn-lead-size: 17px; --sn-lead-line: 28px; --sn-lead-measure: 52ch; font: 400 var(--sn-lead-size)/var(--sn-lead-line) var(--sans); max-width: var(--sn-lead-measure); text-wrap: pretty; }
.sn-lead a { font-weight: 700; }
/* the note on a line of its own ("Your session expired."; X's own text may end without a full stop); none, none shown */
.sn-said { display: block; margin-bottom: var(--sp-1); font-weight: 700; }
.sn-said:empty { display: none; }
.sn-act { margin-top: var(--sp-2); }
.sn-act + .sn-fine { margin-top: var(--sp-2); }   /* clear of the button's drop */
.sn-fine, .sn-req { font: var(--t-ui-medium); color: var(--muted); max-width: var(--sn-fine-measure); }
.sn-req { max-width: var(--sn-req-measure); }
.sn-fine a, .sn-req a, .sn-see a, .sn-why a { color: var(--ink); font-weight: 700; }
.sn-buy { display: grid; gap: var(--sp-3); justify-items: start; margin-top: var(--sp-2); }
.sn-closed { max-width: var(--sn-req-measure); background: var(--tan); border: var(--line); padding: var(--sp-3) var(--sp-4); font: var(--t-ui-medium); }
/* Free for every reader. Not free to make. The house's card (the panel part's), its first two sentences its head. */
.sn-callout { margin-top: var(--sp-3); max-width: var(--sn-measure); padding: var(--sp-4); font: var(--t-body); }
.sn-callout-h { display: block; margin-bottom: var(--sp-1); font: var(--t-h5); letter-spacing: var(--sn-callout-track); }
@media (min-width: 768px) { .sn-h { --sn-h-size: 40px; --sn-h-line: 44px; } .sn-lead { --sn-lead-size: 18px; } }
@media (min-width: 1280px) { .sn-h { --sn-h-size: 48px; --sn-h-line: 52px; } .sn-lead { --sn-lead-size: 20px; --sn-lead-line: 32px; } }
@media (min-width: 1600px) { .sn-h { --sn-h-size: 64px; --sn-h-line: 64px; --sn-h-track: -.03em; } }

.sn-see { font: var(--t-body-strong); }
.sn-end { --sn-end-measure: 56ch; font: var(--t-ui-medium); color: var(--muted); max-width: var(--sn-end-measure); }

/* Signed in: the account row at the top of the card (the list part's dotted rule under it): who,
   then what they can do from here. Two things to do (the admin's) share a line under who on a phone. */
.sn-acct {
  --sn-acct-gap: var(--sp-2) var(--sp-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-acct-gap); padding-bottom: var(--sp-4);
}
.sn-acct > .ls-more, .sn-acct > .sn-out { flex: none; }
@media (max-width: 599px) { .sn-acct:has(.ls-more) > .sn-who { flex-basis: 100%; } }
/* The who card: a square picture with an ink line, the name over the @handle in the pixel face. */
.sn-who {
  --sn-face: 58px;
  --sn-name-track: -.01em;
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0; margin-right: auto;
}
.sn-face { flex: none; width: var(--sn-face); height: var(--sn-face); border: var(--line); background: var(--tan); object-fit: cover; }
/* the site's fallback face, the robot, drawn at three times its size on his own backdrop */
.sn-face[src$="pfp-18.png"] { image-rendering: pixelated; background: var(--robot-bg); }
.sn-id { min-width: 0; }
.sn-name { display: block; font: var(--t-h4); letter-spacing: var(--sn-name-track); overflow-wrap: anywhere; }
.sn-handle { display: block; margin-top: var(--sp-1); font: var(--t-label); text-transform: uppercase; overflow-wrap: anywhere; }

/* What a host gets, and the totals: the list part's pillars and the stat part's tiles, placed. */
.sn-pillars, .sn-totals { min-width: 0; }

/* What X shares, under the list part's dotted rule across the card, with the sign-in card only.
   The rule runs the card's width; the words stop at 110 characters. */
.sn-why {
  --sn-why-measure: 110ch;
  --sn-why-pad: 18px;
  margin-top: var(--sp-6); padding-top: var(--sn-why-pad); padding-right: max(0px, calc(100% - var(--sn-why-measure)));
  font: var(--t-ui-medium); color: var(--muted);
}
@media (min-width: 1024px) { .sn-why { margin-top: var(--sp-8); } }
.sn-noscript { margin: 0; }