/* ==========================================================================
   FateHalo — accounts: sign in, sign up, reset, and the reading log.

   Loaded only by the six account pages.  The header's account link lives in
   style.css instead, because every page carries one.

   The loading is the same as everywhere else on the site: cream paper, gold
   for anything live, the display serif for anything that names a thing.
   ========================================================================== */

/* ------------------------------------------------------------ the card */

.auth-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 46px);
  box-shadow: var(--shadow-sm);
}

.auth-card > .eyebrow { margin-bottom: 10px; }

.auth-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 14px;
}

/* The aside that sits beside a form on the wide layout. */
.auth-aside h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 10px;
}
.auth-aside p { font-size: 0.92rem; color: var(--ink-soft); }
.auth-aside ul { margin: 14px 0 0; padding-left: 18px; font-size: 0.9rem; color: var(--ink-soft); }
.auth-aside li + li { margin-top: 8px; }

/* --------------------------------------------------------- status panel */

.auth-status {
  display: none;
  margin-top: 26px;
  padding: 18px 22px;
  border-radius: var(--radius);
  border-left: 3px solid var(--gold-500);
  background: var(--gold-050);
  font-size: 0.93rem;
  line-height: 1.66;
}
.auth-status.is-visible { display: block; }

.auth-status h4 {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--ink);
}
.auth-status h4[hidden], .auth-status p[hidden] { display: none; }
.auth-status p { margin: 0; color: var(--ink-soft); }

.auth-status.is-error {
  border-left-color: #b0443a;
  background: #fcf3f1;
}
.auth-status.is-error h4 { color: #8e352c; }

/* The quiet line under a form, for links to the sibling page. */
.auth-switch {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}

/* The "forgotten your password" button is a link, not a second call to action. */
.btn--quiet {
  background: none;
  border: 0;
  padding: 0;
  color: var(--gold-600);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(169, 134, 58, 0.4);
  text-underline-offset: 3px;
}
.btn--quiet:hover { color: var(--gold-500); text-decoration-color: currentColor; }
.btn--quiet[disabled] { opacity: 0.55; cursor: progress; }

/* ------------------------------------------------------- account header */

.account-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.account-bar__who { min-width: 0; }

.account-bar__label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.account-bar__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.account-bar__email {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* Nothing behind the gate renders until the answer to "who is this" arrives,
   which stops the signed-out state from flashing on the way to the redirect. */
[data-requires-sign-in] { display: none; }
body.is-signed-in [data-requires-sign-in] { display: block; }

/* ---------------------------------------------------------- reading log */

.reading-list { display: grid; gap: 14px; margin-top: 26px; }

.reading-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 20px 24px;
}

.reading-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.reading-row__service {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 500;
}

.reading-row__status {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.reading-row__status--submitted { color: var(--gold-600); background: var(--gold-050); }
.reading-row__status--in_progress { color: var(--navy-600); background: rgba(31, 42, 88, 0.06); }
.reading-row__status--delivered { color: var(--paper); background: var(--gold-600); }
.reading-row__status--failed { color: #8e352c; background: rgba(142, 53, 44, 0.07); }
.reading-row__status--cancelled { color: var(--muted); background: transparent; }

.reading-row__when {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* One line naming what was drawn or given, so two readings taken on the same
   day can be told apart without opening either.  It stands in for the
   whole-request digest that used to be printed here -- same material as the
   record below, in a worse shape, twice.  The digest survives only as the
   fallback for a record with no payload to name, so its line breaks still have
   to survive. */
.reading-row__meta {
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Opening a reading.  There is no cancel link here any more: a reading is
   answered on its own, and the only thing to do with one is read it. */
.reading-row__open {
  margin-top: 16px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.86rem;
  color: var(--gold-600);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(169, 134, 58, 0.4);
  text-underline-offset: 3px;
}
.reading-row__open:hover { text-decoration-color: currentColor; }
.reading-row__open[disabled] { opacity: 0.5; cursor: progress; }

.reading-row__body { margin-top: 20px; }

/* ------------------------------------------------------- the illustration */

/* The draw, drawn back into a picture.  A single <figure> at the top of the
   detail, holding the SVG the builder produced from the record.  It is framed
   like everything else on this sheet -- cream, a gold rule, a soft shadow --
   so the image reads as part of the studio rather than a dropped-in graphic. */
.reading-illustration {
  margin: 0;
  padding: 22px 22px 16px;
  background: linear-gradient(180deg, #fdfaf1, #faf6ec);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: center;
}

.reading-illustration svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The tarot spread can hold up to ten cards; let it wrap instead of cramping
   so the cards keep their proportions on a narrow account column. */
.reading-illustration--tarot svg {
  max-width: 100%;
  overflow-x: auto;
}

.reading-illustration--tarot { overflow-x: auto; }

/* The wheel and the pillars are centred figures; cap their width so they do
   not balloon on a wide column and drown the reading beneath them. */
.reading-illustration--chart svg,
.reading-illustration--bazi svg { max-width: 340px; }

/* ------------------------------------------------------- one reading record */

.reading-detail {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: grid;
  gap: 26px;
}

.reading-record__title,
.reading-answer .reading-record__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* The record, in the shape the reading pages already give it: a small tracked
   key against a value set at the same size and leading as the reading itself.

   These rules mirror `.ledger` in readings.css on purpose.  The account page
   does not load that sheet, and the whole point of the shape is that a record
   and the page that produced it look like one studio rather than two. */
.reading-ledger { margin: 0; border-top: 1px solid var(--line); }
.reading-ledger__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 12rem) 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.reading-ledger__k {
  margin: 0;
  padding-top: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.reading-ledger__v {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* What the position means, or the card's own note: present, but not competing
   with the value above it. */
.reading-ledger__sub {
  margin: 2px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The answer itself.  Comfortable measure and generous leading, because this
   is the only thing on the page somebody actually reads. */
.reading-answer__p {
  margin: 0 0 14px;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--ink);
  max-width: 68ch;
}
.reading-answer__p:last-child { margin-bottom: 0; }

.reading-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.reading-note.is-warn { color: #8e352c; }

.reading-empty {
  margin-top: 26px;
  padding: 34px 26px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
}
.reading-empty h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 8px;
}
.reading-empty p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.reading-empty .btn { margin-top: 18px; }

/* A one-line note the server can send us to via a redirect. */
.account-note {
  margin: 0 0 22px;
  padding: 14px 20px;
  border-radius: var(--radius);
  border-left: 3px solid var(--gold-500);
  background: var(--gold-050);
  font-size: 0.92rem;
}

/* ------------------------------------------------------ Chinese setting */

/* zh.css opens up the CJK font stack; these are the handful of places where
   Latin tracking reads as a gap between full-width glyphs. */
[lang^="zh"] .account-bar__label { letter-spacing: 0.06em; }
[lang^="zh"] .reading-row__status { letter-spacing: 0.04em; text-transform: none; }
[lang^="zh"] .reading-ledger__k { letter-spacing: 0.08em; }
[lang^="zh"] .auth-status h4 { line-height: 1.5; }