/* css/account.css — the account button in the header, and the card under it.

   Drawn the way everything else on this page is drawn: an ink rule, a hard
   shadow with no blur in it, and no gradient anywhere. It sits beside the
   theme switch and has to hold its own next to a control that is a small
   painting — so it stays a plain stamped pill, and lets the sky be the thing
   the eye goes to.

   The whole block is `hidden` until js/account.js has a backend to point at.
   A header that briefly shows a sign-in and then takes it away again is worse
   than one that never showed it. */

.account {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.account[hidden] { display: none; }

.account-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0.4rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-full);
  box-shadow: 2px 2px 0 var(--shadow-color);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Pressed into the page rather than lifted off it: the shadow is what moves,
   and the button moves into the space it leaves. */
.account-button:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow-color);
}

.account-button:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--shadow-color);
}

.account-button:focus-visible {
  outline: 3px solid var(--accent-yellow);
  outline-offset: 2px;
}

.account-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-color);
  object-fit: cover;
  /* The picture arrives from Google and is the one thing here the site did not
     draw. Until it does, the space it will take is already held. */
  background: var(--bg-tertiary);
}

.account-mark {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One or the other, never both — and the test is the picture, not the state.
   Keyed to signed-in/out, a reader whose Google account has no photo got a
   button with nothing in it at all, which on a phone (where the name is
   dropped) is an empty pill. The drawn head stands in for a picture that is
   not there, whoever is signed in. */
.account-avatar:not([hidden]) ~ .account-mark { display: none; }

.account-label {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The reason, said once beside the button while nobody is signed in.

   The same slab the hero runs its marker through — comic yellow, ink rule,
   hard shadow, a hair off true — so the one sentence that asks something of
   the reader is the one thing on this row drawn in the loud ink. "اختياري"
   is stamped on its corner first, before the promise, so nobody reads the
   promise as a demand. */
.account-hint {
  position: relative;
  display: inline-block;
  max-width: 34rem;
  margin: 0.35rem 0.2rem 0.2rem;
  padding: 0.55rem 0.9rem 0.55rem 1rem;
  color: var(--brass-on);
  background: var(--accent-yellow-fill);
  border: 2.5px solid var(--border-color);
  border-radius: var(--radius-xs);
  box-shadow: 4px 4px 0 var(--shadow-color);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.65;
  text-wrap: balance;
  transform: rotate(-0.8deg);
}

/* The sentence's own leading word, set apart as a stamp on the slab's edge. */
.account-hint b {
  display: inline-block;
  margin-inline-end: 0.5rem;
  padding: 0.05rem 0.45rem;
  color: var(--accent-yellow-fill);
  background: var(--border-color);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: 0.12em;
  transform: rotate(0.8deg);
}

.account-hint[hidden] { display: none; }

@media (max-width: 520px) {
  .account-hint {
    display: block;
    flex-basis: 100%;
    max-width: none;
    margin-inline: 0.2rem;
    font-size: 0.82rem;
    box-shadow: 3px 3px 0 var(--shadow-color);
  }
}

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

.account-menu {
  position: absolute;
  inset-block-start: calc(100% + 0.6rem);
  /* Anchored to the inline end so it hangs under the button and inside the
     page in both directions — this site is RTL, and `right` would have pinned
     it to the wrong edge the moment anything here was read in English. */
  inset-inline-end: 0;
  z-index: 60;
  min-width: 15rem;
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: start;
}

.account-menu[hidden] { display: none; }

.account-email {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-all;
}

.account-status {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}

.account-status:empty { display: none; }

.account-note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.account-signout {
  width: 100%;
  margin-block-start: var(--spacing-md);
  padding: 0.45rem 0.75rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.account-signout:hover { background: var(--primary-light); }

.account-signout:focus-visible {
  outline: 3px solid var(--accent-yellow);
  outline-offset: 2px;
}

/* On a phone the header is tight and the name is the first thing to go: the
   avatar alone still says who is signed in, and the menu carries the email. */
@media (max-width: 520px) {
  .account-button { padding: 0.35rem 0.5rem; }
  .account[data-state="in"] .account-label { display: none; }
  .account-menu {
    position: fixed;
    inset-inline: var(--spacing-md);
    inset-block-start: calc(var(--header-h) + 0.5rem);
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-button { transition: none; }
  .account-button:hover,
  .account-button:active { transform: none; }
}


/* ------------------------------------------------------------------ the form

   Email and password, in the site's own stamped vocabulary: an ink rule, a
   hard shadow, the brass on the one button that does the thing. */
.account-form {
  display: grid;
  gap: 0.7rem;
}

.account-form[hidden],
.account-signed[hidden] { display: none; }

.account-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.account-form .account-note { margin: 0; }

.account-field {
  display: grid;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.account-field[hidden] { display: none; }

.account-field input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: inset 2px 2px 0 color-mix(in srgb, var(--shadow-color) 12%, transparent);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.account-field input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}

.account-error,
.account-done {
  margin: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.6;
  border-radius: var(--radius-xs);
}

.account-error {
  color: #7a1d1d;
  background: #fde8e8;
  border-inline-start: 3px solid #c43b3b;
}

.account-done {
  color: var(--primary-on-light);
  background: var(--primary-light);
  border-inline-start: 3px solid var(--primary);
}

[data-theme="dark"] .account-error {
  color: #ffd2d2;
  background: #3a1616;
  border-inline-start-color: #ff7b7b;
}

.account-error[hidden],
.account-done[hidden] { display: none; }

.account-submit {
  margin-block-start: 0.15rem;
  padding: 0.6rem 1rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--brass-on);
  background: var(--brass-fill);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--shadow-color);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.account-submit:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--shadow-color);
}

.account-submit:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.account-submit:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: 3px 3px 0 var(--shadow-color);
}

.account-submit:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.account-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin: 0.2rem 0 0;
}

.account-link {
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  background: none;
  border: 0;
  border-block-end: 2px solid var(--accent-yellow);
  cursor: pointer;
}

.account-link:hover { color: var(--primary-hover); }

.account-link:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.account-link[hidden] { display: none; }

.account-signed {
  display: grid;
  gap: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .account-submit,
  .account-field input { transition: none; }
  .account-submit:hover,
  .account-submit:active { transform: none; }
}