/* Praying Wall — member account page. Builds on ../styles/main.css tokens. */

[hidden] { display: none !important; }

.acct-main { padding-block: 40px 64px; display: grid; gap: 24px; }
.acct .card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px; display: grid; gap: 14px; align-content: start;
}
.acct .card.narrow { width: 100%; max-width: 480px; margin-inline: auto; }
.acct .card.center { text-align: center; justify-items: center; }
.acct h1 { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2rem); margin: 0; line-height: 1.2; }
.acct h2 { font-family: var(--serif); font-size: 1.3rem; margin: 0; }
.acct p { margin: 0; }
.dim { color: var(--dim); }
.small { font-size: .88rem; }
.eyebrow { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

.msg { color: var(--accent); font-size: .94rem; }
.msg:empty { display: none; }
.notice {
  border: 1px solid var(--accent-edge); background: var(--accent-soft); color: var(--text);
  border-radius: 12px; padding: 12px 14px; font-size: .94rem;
}
.field-help { font-size: .84rem; color: var(--dim); margin: 2px 0 0; }

/* sign in / create switch */
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.seg button {
  background: none; border: 0; border-radius: 9px; padding: 10px; font: inherit; font-weight: 600;
  color: var(--dim); cursor: pointer;
}
.seg button[aria-selected="true"] { background: var(--surface-2, var(--surface)); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.btn.wide { width: 100%; justify-content: center; }
.google { width: 100%; justify-content: center; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: .86rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#f-auth, #f-reset, #f-setup, #f-profile { display: grid; gap: 16px; }

.link-btn {
  background: none; border: 0; padding: 4px 0; font: inherit; font-size: .92rem; justify-self: start;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: start;
}
.card.center .link-btn { justify-self: center; text-align: center; }
.link-btn:hover { color: var(--text); }
.btn.danger { color: #d0605e; }
.guest a { color: var(--accent); }

/* account */
.acct-head { display: grid; gap: 6px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.badge {
  display: inline-block; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: 4px 12px;
  border: 1px solid var(--line); color: var(--text);
}
.badge.gold { background: var(--badge-bg); color: var(--on-badge); border-color: transparent; }
.plan-name { font-family: var(--serif); font-size: 1.5rem; }
.acct-grid { display: grid; gap: 20px; align-items: start; }
.stack { display: grid; gap: 20px; }
@media (min-width: 900px) { .acct-grid { grid-template-columns: 1.1fr 1fr; } }
.card .btn-sm { justify-self: start; }

.back-home { text-align: center; font-size: .92rem; justify-self: center; }
.back-home a { color: var(--dim); }
.prayer-list { margin-bottom: 20px; }
.pl-items { display: grid; gap: 12px; }
.pl-item { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; background: var(--surface-2, var(--surface)); }
.pl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.pl-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Urdu: this file loads after main.css, so a few of its rules would win the
   tie and hand an Urdu heading back to Newsreader, which has no Arabic
   glyphs at all. Restate them here. See the Nastaliq note in main.css. */
[lang="ur"] .acct h1,
[lang="ur"] .acct h2,
[lang="ur"] .plan-name { font-family: "Noto Nastaliq Urdu", var(--serif); font-weight: 400; }
[lang="ur"] .acct h1 { line-height: 1.75; }
[lang="ur"] .acct h2, [lang="ur"] .plan-name { line-height: 1.8; }
[lang="ur"] .pl-body { line-height: 2.05; }

/* Decisions about the account, and asking for a second look */
.dec-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.dec-list li { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 6px; }
.dec-list li:first-child { border-top: 0; padding-top: 0; }
.dec-what { font-weight: 600; }
.dec-snip { font-style: italic; overflow-wrap: anywhere; }
.dec-state { font-size: .92em; }
.dec-state.is-good { color: var(--accent); font-weight: 600; }
.dec-reply { padding: 8px 12px; border-left: 3px solid var(--accent-edge); background: var(--accent-soft); border-radius: 0 var(--r) var(--r) 0; overflow-wrap: anywhere; }
.dec-form { display: grid; gap: 8px; }
.dec-form textarea { width: 100%; min-height: 88px; resize: vertical; font: inherit; }
.dec-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quiet-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.quiet-list li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.quiet-name { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* The Prayer Promise queue */
.pl-item.is-waiting { border-color: var(--accent-edge); }
.pl-item.is-late { border-color: #d0605e; box-shadow: inset 3px 0 0 #d0605e; }
[dir="rtl"] .pl-item.is-late { box-shadow: inset -3px 0 0 #d0605e; }
.pl-tag { font-size: .74rem; }
.pl-tag.is-late { background: #d0605e; color: #fff; }
.pl-tag.is-waiting { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-edge); }
.pl-tag.is-first, .pl-tag.is-overlooked { background: transparent; color: var(--text); border: 1px solid var(--line); }
.pl-tag.is-answered { background: var(--badge-bg); color: var(--on-badge); }
.pl-update { margin: 0; font-size: .92rem; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); overflow-wrap: anywhere; }
.pl-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-note { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.pl-note label { display: grid; gap: 6px; font-size: .92rem; }
.pl-note textarea { width: 100%; }
.pl-note p { margin: 0; }
.pl-note-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-done-wrap { margin-top: 18px; }
.pl-done-h { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 10px; color: var(--dim); }
#pl-more { margin-top: 10px; }