/* The account page's own rules. site.css is loaded first and carries the whole
 * design — colour, elevation, spacing, the type ramp, `.wrap`, `.card`,
 * `.plans`, the header and the footer. Everything below is what this page adds
 * and nothing it could have inherited, so the two surfaces cannot drift apart
 * by a border radius.
 */

/* The bar is permanently `stuck` here: this page has no hero for a transparent
   header to sit over, so an unstyled bar would just be a floating wordmark. */
.bar-back {
  color: var(--muted); text-decoration: none; font-size: var(--fs-sm);
  padding-inline: var(--s2);
}
.bar-back:hover { color: var(--text); }

.acc { padding-block: clamp(40px, 6vw, 72px); min-height: 60vh; }

/* This page borrows site.css, and the one thing it must NOT borrow is the
   headline size. `--fs-h1` reaches 68px, which is a hero: it is what a stranger
   reads first on a page whose job is to persuade. Here the first thing is a
   password field, and a 68px «ورود به حساب سوا» above it shouts at somebody who
   has already decided. */
.acc-head h1 { font-size: clamp(24px, 1.6vw + 18px, 34px); }
.acc-head .sub { font-size: var(--fs-sm); }
.acc-head { margin-block-end: var(--s6); }
.acc-h2 { font-size: var(--fs-h3); margin-block-start: var(--s8); }
.acc-sub { margin-block-end: var(--s5); font-size: var(--fs-sm); }

/* Signing in is a single column and reads better centred; the signed-in page is
   a dashboard and uses the full width it is given. */
/* ONE width for the heading and the card under it. They used to be 520 and 460,
   so the title and the sub-copy overhung the box they belong to by 60px — the
   only two things on the page, and they did not share an edge. */
#gate { max-width: 460px; margin-inline: auto; }

/* The landing page's light is sized for a full-height hero. On a form this
   short it becomes the loudest thing on screen, so it is turned down rather
   than turned off — the page should still look like the same product. */
.acc-lit .aurora { opacity: .45; }

.loading { color: var(--muted); font-size: var(--fs-sm); }

/* ------------------------------------------------------------- the verdict */

/* Deliberately not a `.card`: a card lifts off the page and this has to read as
   a statement about the page. The left edge carries the meaning — green for
   settled, pink for anything else — so it survives being skimmed. */
.notice {
  margin-block-end: var(--s6);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  border-inline-start: 3px solid var(--muted);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.notice.ok   { border-inline-start-color: var(--like); background: rgb(var(--like-rgb) / .08); }
.notice.bad  { border-inline-start-color: var(--accent-2); background: rgb(var(--accent-rgb) / .10); }

/* --------------------------------------------------------------- the forms */

/* Width comes from `#gate` above; naming it twice is how the two came apart. */
.form-card { width: 100%; }

.tabs {
  display: flex; gap: var(--s1);
  padding: var(--s1);
  margin-block-end: var(--s5);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.tab {
  flex: 1; min-height: 40px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; transition: background .2s, color .2s;
}
.tab.on { background: var(--surface-high); color: var(--text); }

.field { display: block; margin-block-end: var(--s4); }
.field > span { display: block; margin-block-end: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.field small { display: block; margin-block-start: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.field input {
  width: 100%; min-height: 48px;
  padding-inline: var(--s4);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm);
}
/* A credential field is always Latin, whatever the page's direction — the
   `dir="ltr"` in the markup handles the text, and this keeps the caret and the
   placeholder on the same side as the characters being typed. */
.field input:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgb(var(--accent-2-rgb) / .18);
}

.btn-primary {
  width: 100%; min-height: 50px;
  border: 0; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent); font: inherit; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; box-shadow: var(--e1);
  transition: filter .2s;
}
.btn-primary:disabled { filter: grayscale(.6) brightness(.7); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:not(:disabled):hover { filter: brightness(1.08); }
}

.ghost {
  min-height: 36px; padding-inline: var(--s4);
  background: transparent; color: var(--muted);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-xs); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.ghost:hover { color: var(--text); border-color: var(--hairline-top); }

.err {
  margin-block-end: var(--s4);
  color: var(--nope); font-size: var(--fs-sm);
}
.fine { margin-block-start: var(--s4); font-size: var(--fs-xs); color: var(--muted); }
.fine a { color: var(--accent-2); }

/* ------------------------------------------------------------ the standing */

.status-card { padding: clamp(20px, 2.4vw, 28px); }
.status-row { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center;
  padding: 5px 14px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface); border: 1px solid var(--hairline); color: var(--muted);
}
.pill.live  { background: rgb(var(--like-rgb) / .12); border-color: rgb(var(--like-rgb) / .45); color: var(--like-soft); }
.pill.trial { background: rgb(var(--accent-2-rgb) / .12); border-color: rgb(var(--accent-2-rgb) / .45); color: var(--nope); }
.status-row .ghost { margin-inline-start: auto; }
.status-line { margin-block-start: var(--s4); font-size: var(--fs-lead); }
.status-note { margin-block-start: var(--s2); font-size: var(--fs-sm); color: var(--muted); }

/* ---------------------------------------------------------------- buying */

/* `.plan` from site.css centres its text and is built to be read, not pressed.
   These are the same objects with a button in them, so the padding grows and
   the card stops lifting on hover — the button is the affordance now, and two
   things reacting to one pointer reads as a bug. */
.plan-buy { display: flex; flex-direction: column; gap: var(--s3); }
.plan-buy .btn-primary { margin-block-start: auto; }
@media (hover: hover) and (pointer: fine) {
  .plan-buy:hover { transform: none; }
}

/* --------------------------------------------------------------- history */

.hist { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hist th, .hist td {
  padding: var(--s3) var(--s2);
  border-block-end: 1px solid var(--hairline);
  text-align: start;
  white-space: nowrap;
}
.hist th { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.hist td.money { font-variant-numeric: tabular-nums; }
.hist-wrap { overflow-x: auto; }
.hist-empty { color: var(--muted); font-size: var(--fs-sm); }
.tag {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-full);
  font-size: 12px; border: 1px solid var(--hairline); color: var(--muted);
}
.tag.paid { border-color: rgb(var(--like-rgb) / .45); color: var(--like-soft); }
.tag.bad  { border-color: rgb(var(--accent-2-rgb) / .40); color: var(--nope); }

/* ------------------------------------------------- arriving from the app */

/* The way back into the iPhone app, shown only to somebody the App Store build
   sent here. Above everything, because it is the one control on the page that
   is not about this page.

   Themed from the same variables as everything else — nothing here names a
   colour — so it follows a published palette like the rest of the document. */
.to-app {
  display: flex; align-items: center; gap: var(--s2);
  margin-block-end: var(--s5);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: rgb(var(--accent-rgb) / .12);
  border: 1px solid rgb(var(--accent-rgb) / .45);
  color: var(--text);
  font-size: var(--fs-sm); font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .to-app:hover { background: rgb(var(--accent-rgb) / .20); }
}
/* Flipped with the writing direction rather than pinned to the right: this
   arrow means "away from here", and in Persian "away" is the other way. */
.to-app-arrow { margin-inline-start: auto; color: var(--accent-2); }
[dir="rtl"] .to-app-arrow { transform: scaleX(-1); }

/* The plan the app was showing when they tapped. Marked rather than bought —
   see `focusWantedPlan` — so the ring has to be strong enough to find with the
   eye after a smooth scroll, and quiet enough not to read as an error. */
.plan-wanted {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px rgb(var(--accent-2-rgb) / .35);
}