/* A reader's own screens: signing in, the welcome, the profile, the privacy note.

   Its own stylesheet on admin.css's precedent, and for the same reason: none of
   this is the reading surface, and the reading surface does not want it. Loaded
   only by the templates that carry body.account.

   The masthead's account chip is NOT here. It is drawn on every page whether or
   not this file is loaded, so it lives in base.css beside the other masthead
   controls.

   Tokens are base.css's throughout, so both schemes follow without a media
   query. Nothing here sets a colour literally. */

/* ---------------------------------------------------------------------------
   The page
   --------------------------------------------------------------------------- */

.account__wrap {
  max-inline-size: 30rem;
  margin-block: var(--space-7) var(--space-8);
}

/* The forms want more room than the sign-in card: a column of switches reads
   badly at card width, and the fieldsets have hint text under every legend. */
.account__wrap--wide {
  max-inline-size: var(--measure);
}

.account__card {
  padding: var(--space-6) var(--space-5);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-control);
  background: var(--paper-raised);
  box-shadow: var(--shadow-soft);
}

.account__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--ink);
}

.account__subhead {
  margin: var(--space-7) 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--ink);
}

.account__lede {
  margin: 0 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.prose {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-reading);
  color: var(--ink-soft);
}

.prose strong { color: var(--ink); }

ul.prose {
  padding-inline-start: var(--space-5);
}

ul.prose li { margin-block-end: var(--space-3); }

.account__fineprint {
  margin: var(--space-4) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--ink-faint);
}

.account__error,
.account__saved {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
}

.account__error {
  border-color: var(--caution);
  background: var(--caution-tint);
  color: var(--caution);
}

.account__saved {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-strong);
}

/* ---------------------------------------------------------------------------
   Signing in
   --------------------------------------------------------------------------- */

/* Full width and 48px tall, which is the one control on the page and should
   look like it. Outlined rather than filled: the masthead's gateway is the only
   filled control this site draws, and borrowing that weight here would put two
   of them on screen at once. */
.account__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-block-size: 48px;
  padding-inline: var(--space-4);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius-control);
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-calm);
}

.account__google:hover,
.account__google:focus-visible {
  border-color: var(--accent);
}

/* Google's mark keeps its own four colours, which their terms require, so it is
   the one thing on this page not drawn from the token set. */
.account__googlemark { flex: none; }

.account__note {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--ink-faint);
}

/* A rule with a word sitting in it. The two pseudo-elements are the rule; the
   flex row is what keeps the word centred as the card resizes. */
.account__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.account__divider::before,
.account__divider::after {
  content: "";
  flex: 1;
  block-size: var(--hair);
  background: var(--rule);
}

.account__alt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  text-align: center;
}

.account__alt a { color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   Who you are
   --------------------------------------------------------------------------- */

.account__identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-control);
  background: var(--paper-raised);
}

/* Initials, never a fetched portrait: see the note in profile.html on why the
   policy is the reason rather than the taste. */
.account__disc {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
}

.account__who { min-inline-size: 0; }

.account__name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
}

.account__email {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.account__since {
  margin: var(--space-2) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   The setup screens: the real panel, over a live verse

   WHY THERE IS NO SECOND SET OF CONTROLS HERE
   There was, and it was wrong. A reader choosing defaults met a stack of
   bordered cards that named the same switches as the Display panel in slightly
   different words, and then met the panel itself the moment they started
   reading -- two objects doing one job, kept in step by hand. The panel is now
   included directly (templates/_display_panel.html) with a real cut of a real
   surah beneath it, so what a reader sets up is the thing they will use, and
   what they see it do is what it does.

   Everything below is layout. The panel's own appearance is quran.css's, and
   nothing here overrides it beyond taking it out of the dropdown's positioning.
   --------------------------------------------------------------------------- */

.setup {
  inline-size: min(100% - 2rem, 82rem);
  margin-inline: auto;
  padding-block: var(--space-4) 0;
}


/* The title and its one line of explanation share a baseline rather than
   stacking. This screen's job is to get the reader to the panel and the verse,
   and every row of chrome above them is a row of the preview pushed under the
   fold -- which is the one thing this layout exists to avoid. */
.setup__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-block-end: var(--space-3);
}

.setup__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--ink);
}

.setup__lede {
  flex: 1 1 22rem;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.setup__noscript,
.setup__saved {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius-control);
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
}

/* --- who you are ---------------------------------------------------------- */

.setup__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-3);
}

.setup__disc {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 600;
}

.setup__who { min-inline-size: 0; margin-inline-end: auto; }

.setup__name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--ink);
}

.setup__email {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.setup__outform { flex: none; margin: 0; }

.setup__signout {
  min-block-size: 40px;
  padding-inline: var(--space-4);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  cursor: pointer;
}

.setup__signout:hover,
.setup__signout:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
}

/* --- the panel, taken out of the dropdown ---------------------------------

   The dropdown version is absolutely positioned under the masthead button and
   animates in. Here it is simply a block in the page: same borders, same
   groups, same everything, minus the machinery for arriving and leaving. The
   overrides are all positional for that reason -- a visual change would make
   the two panels different objects again, which is what this file exists to
   stop. */

.qs-panel--inline {
  position: static;
  inline-size: 100%;
  max-inline-size: none;
  margin-block-end: var(--space-4);
  /* The dropdown starts translated and faded and is brought in by .is-open,
     which never arrives here because there is nothing to open. */
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

/* --- the preview ---------------------------------------------------------- */

.setup__preview {
  padding: var(--space-4) var(--space-5) var(--space-2);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-control);
  background: var(--paper-raised);
}

.setup__previewlabel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  padding-block-end: var(--space-2);
  border-block-end: var(--hair) solid var(--rule-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.setup__previewsurah { letter-spacing: 0.04em; }

/* The preview is a window onto a page, not the page: it scrolls inside itself,
   so three verses of commentary cannot push Save off the screen and the panel
   above never moves while the reader is working it.

   The floor matters as much as the cap. Below about 15rem the window shows the
   Arabic and clips the translation directly under it, which is the one pairing
   a reader is checking when they change the size or the face -- so on a short
   screen this keeps its height and the page scrolls instead. */
.setup__preview .verse-list {
  block-size: clamp(15rem, 38vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- the action bar ------------------------------------------------------- */

/* Sticky at the foot, so Save is reachable without scrolling back up past the
   preview the reader has just been changing. */
.setup__actions {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding-block: var(--space-4);
  background: var(--paper);
  border-block-start: var(--hair) solid var(--rule);
}

/* The one filled control on this screen. The masthead's gateway is the only
   filled control in the CHROME, and this is in the page: the doctrine is one
   filled control per view, and on a screen whose whole purpose is this button
   that button is it. */
.setup__save {
  min-block-size: 44px;
  padding-inline: var(--space-5);
  border: var(--hair) solid var(--accent-strong);
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--paper-raised);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease-calm);
}

.setup__save:hover,
.setup__save:focus-visible { background: var(--accent-strong); }

.setup__skip {
  min-block-size: 44px;
  padding-inline: var(--space-4);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-calm),
              color var(--dur) var(--ease-calm);
}

.setup__skip:hover,
.setup__skip:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
}

.setup__hint {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--ink-faint);
}

/* Below the panel's own three-column rung there is no room for a preview beside
   anything, and the sticky bar costs more than it gives on a short screen. */
@media (max-width: 48rem) {
  .setup__preview .verse-list { block-size: auto; max-block-size: none; }
  .setup__actions { position: static; }
}


/* ---------------------------------------------------------------------------
   Wide: the panel and the preview side by side

   PLACED LAST, AND THAT IS LOAD-BEARING. Every rule it overrides is above it at
   the same specificity, so at any earlier position the plain .setup__preview
   .verse-list height would win and the window would stay at its stacked size.
   Same trap, same answer, as the masthead's two ladders in quran.css.

   WHY SIDE BY SIDE AT ALL
   Stacked, the panel is around 480px and the preview begins under it, so on a
   1440x900 laptop the reader sees every switch and the Arabic of the first
   verse -- and the translation directly beneath it, which is what half these
   switches actually change, falls below the fold. Turning Qarai on then does
   something the reader cannot see, which defeats the screen. Beside it, the
   panel reflows to fewer, taller columns (.qs-groups is multi-column at 14rem,
   so that costs no rule here) and both fit above the fold together.

   72rem, because below it each column is under 30rem: the preview's Arabic
   starts wrapping mid-verse, and two cramped columns are worse than one honest
   one.
   --------------------------------------------------------------------------- */

@media (min-width: 72rem) {
  .setup {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-5);
  }

  .setup__intro,
  .setup__actions { grid-column: 1 / -1; }

  .setup > .qs-panel--inline { margin-block-end: 0; }

  /* Sized against the VIEWPORT, never against the panel beside it, and that is
     worth stating because the obvious thing -- stretch the preview to match its
     neighbour -- was tried and is a trap. A stretched grid item whose contents
     are unbounded becomes the tallest item and therefore sets the row height it
     was meant to be following: three verses of commentary took the page from
     1362px to 1962px in one rule. Bounded here, the row is decided by the
     panel, whose height is known. The two cards end at slightly different
     points, which costs nothing where the circular version cost the fold. */
  .setup__preview .verse-list {
    block-size: min(58vh, 34rem);
    max-block-size: none;
  }
}