/* The account world: sign-in, account, welcome, the sponsor wall, and the
   terms, privacy and refund pages. Like the pricing page, they wear the home
   page's frame (styles.css and site.js, loaded first): its tokens, faces,
   design pixel, header and Night footer, lit by the site's own wallpaper. The
   404 takes styles.css and this file for its tokens and faces, and no frame.
   This file adds only what the account world needs beyond the home page;
   the portrait, the pill buttons and .visually-hidden live in styles.css,
   since the home page's sponsor wall wears them too. */

/* The tokens the home page has no use for. */
:root {
  --pressed: #dae5eb;
  --rule-strong: #9eacb3;
  --error-ground: #f6ede7;
  --error-text: #653c2b;
  --error-border: #a97861;
}
/* A short page still ends on its footer. */
body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* The frame sets its Han in Glow Sans SC, which is subset to the home and
   pricing pages' copy (styles.css). The account world's own copy, and a
   Supporter's chosen name, set in the system CJK faces instead, so a character
   outside the subset never drops into a second face mid-line. */
main {
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC";
  --body: "Stack Sans Text", var(--cjk), sans-serif;
  --display: "Stack Sans Headline", var(--cjk), sans-serif;
  font-family: var(--body);
}
/* The column. main spans the window, as the home page's does, so the frame's
   sideways clip on it (styles.css) falls at the screen's edge, never across a
   focus ring or the Mac's shadow at the column's; the padding draws the
   column .page-width would. */
.account-main {
  padding: calc(80 * var(--u)) max(var(--gutter), (100% - 1184 * var(--u)) / 2) calc(120 * var(--u));
}

/* Shared heading block. */
.account-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40 * var(--u), 4.5vw, 64 * var(--u));
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.account-title span {
  display: block;
  color: var(--soft);
}
.account-lead {
  max-width: 52ch;
  margin: calc(24 * var(--u)) 0 0;
  color: var(--muted);
  font-size: calc(17 * var(--u));
  line-height: 1.6;
}
/* A centred head (the sponsor wall), set like the home page's
   closing bookend. */
.page-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-head .account-lead {
  margin-inline: auto;
}

.pricing-fineprint {
  max-width: 70ch;
  margin: calc(32 * var(--u)) 0 0;
  color: var(--muted);
  font-size: calc(12 * var(--u));
  line-height: 1.6;
}

.notice-error {
  margin: calc(32 * var(--u)) 0 0;
  padding: calc(13 * var(--u)) calc(16 * var(--u));
  border: 1px solid var(--error-border);
  border-radius: calc(12 * var(--u));
  background: var(--error-ground);
  color: var(--error-text);
  font-size: calc(14 * var(--u));
  line-height: 1.5;
}

/* Sign in: the form in a column beside a Mac (desktop.css). The column
   centres itself against the screen; below 1081px the screen steps aside and
   the form stands alone in the middle of the page. */
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, calc(420 * var(--u))) minmax(0, 1fr);
  column-gap: calc(88 * var(--u));
  align-items: center;
  padding-block: calc(24 * var(--u)) calc(88 * var(--u));
}
.auth {
  min-width: 0;
  padding-block: calc(32 * var(--u));
}
.auth-title {
  font-size: clamp(34 * var(--u), 3.1vw, 44 * var(--u));
  line-height: 1.08;
}
.auth .account-lead {
  margin-top: calc(14 * var(--u));
  font-size: calc(16 * var(--u));
}
/* The address a reset or verification is for, named in the lead. */
.auth .account-lead strong {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.auth-modes {
  display: flex;
  gap: calc(4 * var(--u));
  margin-top: calc(32 * var(--u));
  padding: calc(4 * var(--u));
  border-radius: 999px;
  background: rgb(24 33 38 / 0.06);
}
.auth-modes button {
  flex: 1;
  min-height: calc(40 * var(--u));
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 600 calc(14 * var(--u))/1 var(--body);
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}
.auth-modes button:hover {
  color: var(--ink);
}
.auth-modes button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(24 33 38 / 0.1),
    0 calc(2 * var(--u)) calc(8 * var(--u)) rgb(24 33 38 / 0.06);
}
.auth-form {
  display: grid;
  gap: calc(18 * var(--u));
  margin-top: calc(24 * var(--u));
}
.field {
  display: grid;
  gap: calc(8 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 600;
}
.field small {
  color: var(--muted);
  font-weight: 400;
}
.field input {
  width: 100%;
  min-height: calc(48 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: 1px solid var(--control-border);
  border-radius: calc(12 * var(--u));
  background: #fff;
  color: var(--ink);
  font: 400 calc(15 * var(--u))/1.4 var(--body);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.field input:hover {
  border-color: var(--rule-strong);
}
.field input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(55 88 101 / 0.22);
}
/* The password's label shares its row with "Forgot password?", in the hints'
   Slate Grey and underlined as a link in running text, so the way to a new
   password sits where a forgotten one is noticed. */
.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--u));
}
.field-link {
  /* A 24px target around 13px words, taking no more room in the row. */
  padding-block: calc(4 * var(--u));
  margin-block: calc(-4 * var(--u));
  color: var(--muted);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  transition: color 160ms ease;
}
.field-link:hover {
  color: var(--accent);
}
/* The password keeps a Show key inside its right edge. */
.field-input {
  position: relative;
}
.field-input:has(.field-reveal:not([hidden])) input {
  padding-right: calc(76 * var(--u));
}
.field-reveal {
  position: absolute;
  top: 50%;
  right: calc(4 * var(--u));
  min-width: calc(60 * var(--u));
  min-height: calc(40 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: 0;
  border-radius: calc(9 * var(--u));
  background: none;
  color: var(--muted);
  font: 600 calc(13 * var(--u))/1 var(--body);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color 160ms ease,
    color 160ms ease;
}
.field-reveal:hover {
  background: rgb(24 33 38 / 0.06);
  color: var(--ink);
}
.auth-form .button {
  align-self: stretch;
  min-height: calc(52 * var(--u));
  margin-top: calc(6 * var(--u));
}
.auth-or {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin: calc(24 * var(--u)) 0 0;
  color: var(--muted);
  font-size: calc(12 * var(--u));
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
.auth .button-github {
  display: flex;
  min-height: calc(52 * var(--u));
  margin-top: calc(16 * var(--u));
  background: var(--paper);
}
.button-github svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  fill: currentColor;
  stroke: none;
}
.auth-fineprint {
  margin: 0;
  text-align: center;
}
.auth-panel p {
  margin: calc(16 * var(--u)) 0 0;
  color: var(--muted);
  font-size: calc(15 * var(--u));
  line-height: 1.7;
}
.auth-panel strong {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  margin-top: calc(28 * var(--u));
}
.auth-actions .button,
.auth-form .notice-error {
  margin: 0;
}

/* The Mac beside the form: a widget of what the Supporter edition brings,
   on the left as macOS keeps them, and the Dock at the foot. */
.auth-desktop {
  align-self: stretch;
  min-height: calc(640 * var(--u));
}
.desk-widget {
  position: absolute;
  top: calc(64 * var(--u));
  left: calc(32 * var(--u));
  width: min(calc(340 * var(--u)), 100% - 64 * var(--u));
  padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u));
}
.desk-widget-head {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
}
.desk-widget-head img {
  flex: none;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  margin: calc(-4 * var(--u));
}
.desk-widget-head p {
  display: grid;
  gap: calc(2 * var(--u));
  margin: 0;
  font-size: calc(15 * var(--u));
  line-height: 1.25;
}
.desk-widget-head b {
  font-weight: 600;
}
.desk-widget-head span {
  color: var(--muted);
  font-size: calc(13 * var(--u));
}
.desk-widget-list {
  display: grid;
  gap: calc(9 * var(--u));
  margin: calc(16 * var(--u)) 0 0;
  padding: calc(14 * var(--u)) 0 0;
  border-top: 1px solid rgb(24 33 38 / 0.1);
  list-style: none;
  font-size: calc(13 * var(--u));
  line-height: 1.4;
}
.desk-widget-list li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.desk-widget-list li::before {
  content: "";
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7 9.5 16 6 12.5'/%3E%3C/svg%3E")
      center / 12px no-repeat,
    linear-gradient(135deg, #3a86ff, #8a3dff);
}
.auth-dock {
  position: absolute;
  bottom: calc(10 * var(--u));
  left: 50%;
  transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
  /* The widget and the Dock settle onto the screen once, as a Mac wakes. */
  .auth-desktop .desk-widget {
    animation: widget-in 900ms var(--ease) 150ms both;
  }
  .auth-desktop .auth-dock {
    animation: dock-in 900ms var(--ease) 250ms both;
  }
}
@keyframes widget-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
@keyframes dock-in {
  from {
    opacity: 0;
    transform: translate(-50%, 24px);
  }
}
@media (max-width: 1080px) {
  .auth-layout {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
  }
  .auth-desktop {
    display: none;
  }
}

.pricing-fineprint a,
.legal a {
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}
.pricing-fineprint a:hover,
.legal a:hover {
  color: var(--accent);
}

/* Terms, privacy and refunds: one readable column. */
.legal {
  max-width: 68ch;
}
.legal-updated {
  margin: calc(16 * var(--u)) 0 0;
  color: var(--muted);
  font-size: calc(13 * var(--u));
}
.legal-lead {
  margin: calc(40 * var(--u)) 0 0;
  font-size: calc(17 * var(--u));
  line-height: 1.6;
}
.legal h2 {
  margin: calc(48 * var(--u)) 0 0;
  padding-top: calc(20 * var(--u));
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: calc(22 * var(--u));
  font-weight: 400;
  letter-spacing: -0.02em;
}
.legal p,
.legal li {
  font-size: calc(15 * var(--u));
  line-height: 1.75;
}
.legal p {
  margin: calc(14 * var(--u)) 0 0;
}
.legal ul {
  margin: calc(14 * var(--u)) 0 0;
  padding-left: 1.2em;
}
.legal li + li {
  margin-top: calc(10 * var(--u));
}
.legal strong {
  font-weight: 600;
}

@media (max-width: 760px) {
  .account-main {
    padding-block: 56px 88px;
  }
}
@media (max-width: 540px) {
  .account-lead {
    font-size: 15px;
  }
}

/* Account page and the sponsor listing form (account/, welcome/). */
.account-section {
  margin-top: calc(56 * var(--u));
  padding-top: calc(20 * var(--u));
  border-top: 1px solid var(--line);
}
.account-section h2 {
  margin: 0;
  font-family: var(--display);
  font-size: calc(22 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.account-copy {
  max-width: 60ch;
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(15 * var(--u));
  line-height: 1.7;
}
.account-copy:empty {
  display: none;
}
.account-copy a,
.sponsor-more a,
.control-hint a {
  text-decoration: underline;
  text-decoration-color: var(--rule-strong, var(--control-border));
  text-underline-offset: 3px;
  transition: color 160ms ease;
}
.account-copy a:hover,
.sponsor-more a:hover,
.control-hint a:hover {
  color: var(--accent);
}
/* Inline actions beside text: the same outline button, without its top margin. */
.button-small {
  min-height: calc(44 * var(--u));
  margin-top: 0;
  padding: 0 calc(16 * var(--u));
}

/* Sign-in: email, password and GitHub as a hairline list. */
.account-facts {
  max-width: calc(560 * var(--u));
  margin: calc(24 * var(--u)) 0 0;
}
.account-fact {
  display: grid;
  grid-template-columns: calc(140 * var(--u)) minmax(0, 1fr);
  column-gap: calc(24 * var(--u));
  align-items: center;
  min-height: calc(64 * var(--u));
  padding: calc(10 * var(--u)) 0;
  border-top: 1px solid var(--line);
}
.account-fact:last-child {
  border-bottom: 1px solid var(--line);
}
.account-fact dt {
  color: var(--muted);
  font-size: calc(13 * var(--u));
  font-weight: 600;
}
.account-fact dd {
  margin: 0;
  font-size: calc(15 * var(--u));
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* The email's row also says whether the address is verified, and while it
   isn't, offers the link that verifies it. */
.fact-note {
  display: block;
  color: var(--muted);
  font-size: calc(13 * var(--u));
}
.account-fact .fact-action {
  margin-top: calc(10 * var(--u));
}
/* With a note under the address, the term stays level with the address. */
.account-fact:has(.fact-note) {
  align-items: baseline;
}

/* The listing form: fields on the left, the wall tile as it would appear on the
   right, staying in view while the fields scroll. */
.sponsor-form {
  display: grid;
  grid-template-columns: minmax(0, calc(560 * var(--u))) minmax(calc(240 * var(--u)), 1fr);
  column-gap: calc(68 * var(--u));
  align-items: start;
  margin-top: calc(32 * var(--u));
}
.sponsor-fields {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: calc(28 * var(--u));
  min-width: 0;
}
.wall-preview {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  /* It holds where a section lands, under the header's band. */
  top: calc(var(--header) + 20 * var(--u));
  margin: 0;
  min-width: 0;
}
.sponsor-form-compact {
  grid-template-columns: minmax(0, calc(560 * var(--u)));
}
.sponsor-form-compact .wall-preview {
  grid-column: 1;
  position: static;
  margin-bottom: calc(32 * var(--u));
}
.sponsor-form-compact .sponsor-fields {
  grid-row: 2;
}

/* The preview is the wall label itself: the tile on a hairline ledge, the name
   in display type, the month in a caption. Off, it fades and says so. */
.wall-preview-state {
  color: var(--muted);
  font-size: calc(12 * var(--u));
  line-height: 1.6;
}
.wall-tile {
  display: inline-grid;
  max-width: 100%;
  min-width: min(100%, 220 * var(--u));
  margin-top: calc(14 * var(--u));
  transition: opacity 200ms ease;
}
.wall-tile .portrait {
  margin-bottom: calc(12 * var(--u));
}
.wall-label {
  display: grid;
  gap: calc(2 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid var(--line);
}
.wall-name {
  font-family: var(--display);
  font-size: calc(22 * var(--u));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.wall-name.is-empty {
  color: var(--muted);
}
.wall-since {
  color: var(--muted);
  font-size: calc(12 * var(--u));
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.wall-preview[data-shown="false"] .wall-tile {
  opacity: 0.45;
}

/* Controls: native checkbox and radios in ink (accent-color on :root), every
   row at least 44px, hints in the caption size under the label. */
.control-hint {
  display: block;
  color: var(--muted);
  font-size: calc(13 * var(--u));
  font-weight: 400;
  line-height: 1.6;
}
.switch-row {
  display: grid;
  grid-template-columns: calc(20 * var(--u)) minmax(0, 1fr);
  column-gap: calc(14 * var(--u));
  align-items: center;
}
.switch-row input,
.picture-option input[type="radio"] {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  margin: 0;
  cursor: pointer;
}
.switch-row label,
.picture-option-label {
  display: flex;
  align-items: center;
  min-height: calc(44 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: 600;
  cursor: pointer;
}
.switch-row .control-hint {
  grid-column: 2;
}
.sponsor-field {
  gap: calc(4 * var(--u));
}
.sponsor-field input {
  max-width: calc(400 * var(--u));
  margin-top: calc(6 * var(--u));
}

/* Picture sources: a hairline list of radio rows, each with a 36px preview. */
.picture-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.picture-list legend {
  padding: 0;
  font-size: calc(13 * var(--u));
  font-weight: 600;
}
.picture-options {
  margin-top: calc(12 * var(--u));
}
.picture-option {
  display: grid;
  grid-template-columns: calc(20 * var(--u)) calc(36 * var(--u)) minmax(0, 1fr);
  column-gap: calc(14 * var(--u));
  align-items: center;
  padding: calc(10 * var(--u)) 0;
  border-top: 1px solid var(--line);
}
.picture-option:last-child {
  border-bottom: 1px solid var(--line);
}
.picture-option input[type="radio"] {
  grid-column: 1;
  grid-row: 1;
}
.picture-option-label {
  grid-column: 2 / 4;
  grid-row: 1;
  gap: calc(14 * var(--u));
}
.picture-option .portrait {
  --size: calc(36 * var(--u));
  transition: opacity 160ms ease;
}
.picture-option-hint {
  grid-column: 3;
  grid-row: 2;
  overflow-wrap: anywhere;
}
.picture-option-actions {
  grid-column: 3;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u));
}
.picture-option:has(input[type="radio"]:disabled) .picture-option-label {
  color: var(--muted);
  cursor: default;
}
.picture-option:has(input[type="radio"]:disabled) .portrait {
  opacity: 0.5;
}
.picture-option input[type="radio"]:disabled {
  cursor: default;
}
/* The file input stays in the tab order under its button-shaped label. */
.file-input:focus-visible + .button {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sponsor-form .notice-error {
  margin: 0;
}
.sponsor-form .notice-error a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sponsor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(12 * var(--u)) calc(20 * var(--u));
}
.sponsor-actions .button {
  margin-top: 0;
  min-width: calc(120 * var(--u));
}
.sponsor-status {
  margin: 0;
  font-size: calc(14 * var(--u));
  line-height: 1.5;
}
.sponsor-status:empty {
  display: none;
}
.sponsor-more {
  margin: 0;
  font-size: calc(15 * var(--u));
  line-height: 1.7;
}

@media (max-width: 1080px) {
  .sponsor-form {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.6fr);
    column-gap: 40px;
  }
}
@media (max-width: 760px) {
  .account-section {
    margin-top: 48px;
  }
  .sponsor-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .wall-preview {
    grid-column: 1;
    grid-row: 1;
    position: static;
    margin-bottom: 32px;
  }
  .sponsor-fields {
    grid-row: 2;
  }
}
@media (max-width: 540px) {
  .account-fact {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
    padding: 12px 0;
  }
  .picture-option-hint,
  .picture-option-actions {
    grid-column: 2 / 4;
  }
  .sponsor-actions .button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wall-tile,
  .picture-option .portrait,
  .account-copy a,
  .sponsor-more a,
  .control-hint a,
  .field-link {
    transition: none;
  }
}

/* Chinese (the /zh/ pages), as on the home page (styles.css). Han glyphs keep
   their own spacing, and the display sizes' Latin-tuned line boxes (1.06,
   1.08) sit too close for a two-line Han title, so they open to 1.2. */
:is(h1, h2, h3):lang(zh) {
  letter-spacing: 0;
}
:is(.account-title, .auth-title):lang(zh) {
  line-height: 1.2;
}