/* ============================================================
   Quiet Paper — public stylesheet for rcgoswami.com
   Tokens are CSS variables so the dashboard's font / accent /
   theme settings can re-skin the whole site with no template edits.
   ============================================================ */

:root{
  --paper:#FCFCFA; --ink:#1A1A1A; --whisper:#6E6E68; --hair:#E7E6E0;
  --accent:#B26A2E; --accent-soft:rgba(178,106,46,0.10);
  --font-deva:'Tiro Devanagari Hindi', serif;
  --font-latin:'Spectral', Georgia, serif;
}
[data-accent="indigo"]{ --accent:#434E73; --accent-soft:rgba(67,78,115,0.10); }
[data-theme="dark"]{
  --paper:#1A1A18; --ink:#E7E4DC; --whisper:#979388; --hair:#302F2A;
  --accent:#D08A45; --accent-soft:rgba(208,138,69,0.14);
}
[data-theme="dark"][data-accent="indigo"]{ --accent:#9098C6; --accent-soft:rgba(144,152,198,0.14); }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-latin); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .35s ease, color .35s ease;
}
a{ color:inherit; }
.wrap{ max-width:38rem; margin:0 auto; padding:0 1.5rem; }

/* language toggle visibility */
.lang-en{ display:none; }
[data-lang="en"] .lang-hi{ display:none; }
[data-lang="en"] .lang-en{ display:inline; }
.verse .lang-hi, .prose .lang-hi{ display:block; }
.verse .lang-en, .prose .lang-en{ display:none; }
[data-lang="en"] .verse .lang-hi,
[data-lang="en"] .prose .lang-hi{ display:none; }
[data-lang="en"] .verse .lang-en,
[data-lang="en"] .prose .lang-en{ display:block; }

/* ---------- masthead ---------- */
header{ padding:2.25rem 0 1.5rem; }
.masthead{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.wordmark{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-deva); font-size:1.18rem; letter-spacing:.01em; text-decoration:none; line-height:1.3; }
.wordmark-text{ display:block; }
.wordmark-emblem{
  height: clamp(52px, 13vw, 64px);
  width:  clamp(52px, 13vw, 64px);
  flex: none; display: block;
  margin-left: -0.5em;   /* offsets the square's built-in left padding */
}
.wordmark-emblem--dark{ display:none; }
[data-theme="dark"] .wordmark-emblem--light{ display:none; }
[data-theme="dark"] .wordmark-emblem--dark{ display:block; }
.wordmark small{ display:block; font-family:var(--font-latin); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--whisper); margin-top:.25rem; }
.controls{ display:flex; align-items:center; gap:.6rem; flex:none; }
.theme-btn{ appearance:none; width:1.95rem; height:1.95rem; border:1px solid var(--hair); border-radius:2px; background:transparent; color:var(--whisper); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:color .2s, border-color .2s; }
.theme-btn:hover, .theme-btn:focus-visible{ color:var(--ink); border-color:var(--accent); }
.theme-btn svg{ width:15px; height:15px; }
.theme-btn .i-sun{ display:none; }
[data-theme="dark"] .theme-btn .i-moon{ display:none; }
[data-theme="dark"] .theme-btn .i-sun{ display:inline; }
.lang{ display:inline-flex; font-family:var(--font-latin); font-size:.78rem; border:1px solid var(--hair); border-radius:2px; overflow:hidden; flex:none; }
.lang button{ appearance:none; border:0; background:transparent; color:var(--whisper); padding:.28rem .6rem; cursor:pointer; font:inherit; transition:color .2s, background .2s; }
.lang button[aria-pressed="true"]{ color:var(--paper); background:var(--accent); }

nav{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.4rem 1.15rem; font-family:var(--font-deva); font-size:.92rem; }
nav a{ color:var(--whisper); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
nav a:hover, nav a:focus-visible{ color:var(--ink); border-color:var(--accent); }
nav a[aria-current="page"]{ color:var(--ink); }

/* ---------- shared type ---------- */
main{ padding:2.5rem 0 1rem; }
.eyebrow{ font-family:var(--font-deva); font-size:.82rem; letter-spacing:0; text-transform:none; color:var(--accent); margin:0 0 .9rem; }
.title, .page-title{ font-family:var(--font-deva); font-weight:400; font-size:2.15rem; line-height:1.25; margin:0; letter-spacing:.005em; }
.title a{ text-decoration:none; }
.rule{ width:2.5rem; height:1px; background:var(--accent); margin:1.35rem 0 2.1rem; }

.verse{ font-family:var(--font-deva); font-size:1.235rem; line-height:1.95; white-space:pre-wrap; margin:0; }
[data-lang="en"] .verse{ font-family:var(--font-latin); font-size:1.16rem; line-height:1.9; }

.prose{ font-family:var(--font-deva); font-size:1.12rem; line-height:1.9; white-space:pre-wrap; }
[data-lang="en"] .prose{ font-family:var(--font-latin); }

.colophon{ margin-top:2.4rem; font-family:var(--font-latin); font-size:.86rem; color:var(--whisper); }
.colophon em{ font-style:italic; color:var(--ink); }

/* ---------- home ---------- */
.home-intro{ padding:1rem 0 2.5rem; }
.home-name{ font-family:var(--font-deva); font-weight:400; font-size:2.4rem; line-height:1.2; margin:.2rem 0 .6rem; }
.home-line{ font-family:var(--font-latin); color:var(--whisper); margin:0; }
.home-featured{ border-top:1px solid var(--hair); padding-top:2.4rem; }
.more{ margin-top:2rem; font-family:var(--font-deva); }
.more a{ color:var(--accent); text-decoration:none; }

/* ---------- cards ---------- */
.card{ display:block; text-decoration:none; padding:1.15rem 0; border-bottom:1px solid var(--hair); }
.card:first-of-type{ border-top:1px solid var(--hair); }
.card-title{ font-family:var(--font-deva); font-size:1.32rem; color:var(--ink); display:block; }
.card-preview{ display:block; font-family:var(--font-deva); font-size:.95rem; color:var(--whisper); margin-top:.3rem; }
.card:hover .card-title{ color:var(--accent); }

/* ---------- share / book / footer ---------- */
.share{ margin:2.6rem 0 0; display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.wa{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-latin); font-size:.86rem; color:var(--accent); text-decoration:none; border:1px solid var(--accent); border-radius:2px; padding:.45rem .9rem; transition:background .2s, color .2s; }
.wa:hover, .wa:focus-visible{ background:var(--accent); color:var(--paper); }
.wa svg{ width:15px; height:15px; }
.back{ font-family:var(--font-deva); font-size:.9rem; color:var(--whisper); text-decoration:none; }
.back:hover{ color:var(--ink); }
.book-buy{ margin-top:2rem; }
.empty{ font-family:var(--font-deva); color:var(--whisper); padding:1rem 0; }

footer{ margin-top:4rem; padding:1.6rem 0 2.4rem; border-top:1px solid var(--hair); }
.foot-meta{ font-family:var(--font-latin); font-size:.72rem; color:var(--whisper); letter-spacing:.02em; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }
@media (min-width:600px){
  .wordmark{ font-size:1.3rem; }
  .title, .page-title{ font-size:2.5rem; }
  .home-name{ font-size:2.9rem; }
  .verse{ font-size:1.3rem; }
}

/* ---------- footer accent toggle (reader-facing) ---------- */
.foot-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.accent-switch{ display:inline-flex; align-items:center; gap:.55rem; }
.accent-switch button{ width:1.05rem; height:1.05rem; border-radius:50%; border:1px solid var(--hair); cursor:pointer; padding:0; transition:transform .15s, box-shadow .15s; }
.accent-switch button:hover{ transform:scale(1.12); }
.dot-saffron{ background:#B26A2E; }
.dot-indigo{ background:#434E73; }
.accent-switch button[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3px currentColor; }
.dot-saffron[aria-pressed="true"]{ color:#B26A2E; }
.dot-indigo[aria-pressed="true"]{ color:#434E73; }

/* ---------- panel: login / admin ---------- */
.panel-wrap{ max-width:24rem; margin:0 auto; padding:4rem 1.5rem; min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
.panel-brand{ font-family:var(--font-deva); font-size:1.35rem; text-align:center; line-height:1.3; }
.panel-brand small{ display:block; font-family:var(--font-latin); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--whisper); margin-top:.3rem; }
.panel-sub{ text-align:center; color:var(--whisper); font-family:var(--font-latin); font-size:.85rem; margin:.4rem 0 2.2rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-family:var(--font-deva); font-size:.92rem; margin-bottom:.4rem; color:var(--ink); }
.field input{ width:100%; padding:.6rem .7rem; font-family:var(--font-latin); font-size:1rem; color:var(--ink); background:var(--paper); border:1px solid var(--hair); border-radius:3px; }
.field input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.remember{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-latin); font-size:.85rem; color:var(--whisper); margin-bottom:1rem; }
.btn-primary{ width:100%; appearance:none; cursor:pointer; font-family:var(--font-deva); font-size:1.05rem; color:var(--paper); background:var(--accent); border:0; border-radius:3px; padding:.65rem; margin-top:.4rem; transition:opacity .2s; }
.btn-primary:hover{ opacity:.92; }
.form-error{ font-family:var(--font-deva); color:#B23A2E; font-size:.88rem; margin:0 0 1.1rem; padding:.6rem .8rem; background:rgba(178,58,46,0.07); border-radius:3px; }
.admin-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.6rem; }
.logout-btn{ appearance:none; background:transparent; border:1px solid var(--hair); border-radius:3px; padding:.35rem .7rem; font-family:var(--font-deva); font-size:.82rem; color:var(--whisper); cursor:pointer; }
.logout-btn:hover{ color:var(--ink); border-color:var(--accent); }

/* ===================== admin / dashboard (Step 5) ===================== */
.panel-main{ min-height:100vh; }

/* top bar */
.admin-bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.85rem 1.2rem; border-bottom:1px solid var(--hair); flex-wrap:wrap; }
.admin-brand{ font-family:var(--font-deva); font-size:1.05rem; color:var(--ink); text-decoration:none; }
.admin-bar-right{ display:flex; align-items:center; gap:.9rem; }
.admin-hi{ font-family:var(--font-deva); font-size:.85rem; color:var(--whisper); }
.admin-link{ font-family:var(--font-deva); font-size:.85rem; color:var(--accent); text-decoration:none; }
.admin-logout{ margin:0; }

/* shared shell */
.admin-shell{ max-width:46rem; margin:0 auto; padding:1.8rem 1.2rem 4rem; }

/* ---------- list ---------- */
.list-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.list-title{ font-family:var(--font-deva); font-size:1.5rem; font-weight:500; margin:0; }
.new-btn{ width:auto; display:inline-block; text-decoration:none; padding:.5rem 1rem; font-size:.95rem; }

.flash{ font-family:var(--font-deva); font-size:.9rem; color:var(--ink);
  background:rgba(178,106,46,0.10); border:1px solid var(--hair); border-radius:4px;
  padding:.6rem .85rem; margin-bottom:1.1rem; }

.filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.chip{ appearance:none; cursor:pointer; font-family:var(--font-deva); font-size:.85rem;
  background:transparent; border:1px solid var(--hair); border-radius:999px;
  padding:.32rem .8rem; color:var(--whisper); }
.chip-on{ color:var(--paper); background:var(--accent); border-color:var(--accent); }
.chip-count{ opacity:.7; font-size:.78rem; }

.empty{ font-family:var(--font-deva); color:var(--whisper); padding:2rem 0; text-align:center; }

.rows{ list-style:none; margin:0; padding:0; }
.row{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  padding:.9rem 0; border-bottom:1px solid var(--hair); flex-wrap:wrap; }
.row-title{ font-family:var(--font-deva); font-size:1.12rem; color:var(--ink); display:block; }
.row-meta{ display:flex; align-items:center; gap:.7rem; margin-top:.25rem; flex-wrap:wrap; }
.type-tag{ font-family:var(--font-deva); font-size:.72rem; color:var(--whisper);
  border:1px solid var(--hair); border-radius:3px; padding:.05rem .4rem; }
.dot{ font-family:var(--font-deva); font-size:.74rem; }
.dot.pub{ color:#3B7A4B; } .dot.draft{ color:var(--whisper); }
.row-time{ font-family:var(--font-latin); font-size:.72rem; color:var(--whisper); }
.row-actions{ display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }
.act{ appearance:none; cursor:pointer; background:transparent; border:0;
  font-family:var(--font-deva); font-size:.82rem; color:var(--accent); text-decoration:none; padding:.15rem .1rem; }
.act:hover{ text-decoration:underline; }
.act-del{ color:#B23A2E; } .act-pub{ color:#3B7A4B; }

/* ---------- editor ---------- */
.editor-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; }
.editor-title{ font-family:var(--font-deva); font-size:1.4rem; font-weight:500; margin:0; }
.editor-back{ font-family:var(--font-deva); font-size:.85rem; color:var(--accent); text-decoration:none; }

.select, .text-input, .verse-input{ width:100%; font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--hair); border-radius:4px; padding:.55rem .7rem; }
.select{ font-family:var(--font-deva); }
.deva{ font-family:var(--font-deva); }
.latin{ font-family:var(--font-latin); }
.verse-input{ line-height:1.9; resize:vertical; }
.text-input:focus, .verse-input:focus, .select:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.err{ display:block; font-family:var(--font-deva); color:#B23A2E; font-size:.82rem; margin-top:.35rem; }

/* live preview */
.preview-card{ border:1px solid var(--hair); border-left:3px solid var(--accent);
  border-radius:4px; padding:1rem 1.1rem; margin:.2rem 0 1.4rem; background:var(--paper); }
.preview-card.en{ border-left-color:var(--whisper); }
.preview-tag{ font-family:var(--font-latin); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--whisper); margin-bottom:.5rem; }
.preview-title{ font-size:1.25rem; font-weight:500; margin:0 0 .5rem; color:var(--ink); }
.preview-verse{ white-space:pre-wrap; line-height:2; color:var(--ink); font-size:1.05rem; }
.preview-card.en .preview-verse, .preview-card.en .preview-title{ color:var(--ink); }

/* english block */
.en-block{ border-top:1px solid var(--hair); margin-top:.4rem; padding-top:1.3rem; }
.en-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.9rem; gap:1rem; }
.en-label{ font-family:var(--font-deva); font-size:.95rem; color:var(--ink); }
.en-label small{ font-family:var(--font-latin); color:var(--whisper); }
.btn-ghost{ appearance:none; cursor:pointer; font-family:var(--font-deva); font-size:.85rem;
  background:transparent; color:var(--accent); border:1px solid var(--accent); border-radius:4px; padding:.35rem .8rem; }
.btn-ghost:hover{ background:var(--accent); color:var(--paper); }
.overwrite-warn{ font-family:var(--font-deva); font-size:.85rem; color:var(--ink);
  background:rgba(178,58,46,0.07); border:1px solid var(--hair); border-radius:4px;
  padding:.6rem .8rem; margin-bottom:1rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.warn-yes, .warn-no{ appearance:none; cursor:pointer; font-family:var(--font-deva); font-size:.8rem;
  border-radius:3px; padding:.25rem .6rem; border:1px solid var(--hair); background:transparent; }
.warn-yes{ color:#B23A2E; } .warn-no{ color:var(--whisper); }

/* options */
.check-row{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-deva);
  font-size:.92rem; color:var(--ink); margin:.4rem 0 1.4rem; }
.social-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.9rem 0; border-top:1px solid var(--hair); margin-top:.4rem; }
.social-label{ font-family:var(--font-deva); font-size:.85rem; color:var(--whisper); }
.chip-disabled{ display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-latin);
  font-size:.82rem; color:var(--whisper); border:1px dashed var(--hair); border-radius:999px; padding:.25rem .7rem; opacity:.65; }
.soon{ font-family:var(--font-deva); font-size:.72rem; color:var(--accent); }

/* seo */
.seo{ border-top:1px solid var(--hair); margin-top:.4rem; padding-top:1rem; }
.seo-toggle{ appearance:none; cursor:pointer; background:transparent; border:0;
  font-family:var(--font-deva); font-size:.88rem; color:var(--whisper); padding:.2rem 0; }
.seo-note{ font-family:var(--font-deva); font-size:.8rem; color:var(--whisper); margin:.4rem 0 .8rem; }

/* actions */
.actions{ display:flex; gap:.8rem; margin-top:1.8rem; flex-wrap:wrap; }
.btn-secondary{ appearance:none; cursor:pointer; font-family:var(--font-deva); font-size:1rem;
  color:var(--ink); background:transparent; border:1px solid var(--hair); border-radius:4px; padding:.6rem 1.2rem; }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
.actions .btn-primary{ width:auto; margin-top:0; padding:.6rem 1.4rem; }

@media (max-width:520px){
  .row-actions{ width:100%; }
  .actions{ flex-direction:column; }
  .actions .btn-primary, .btn-secondary{ width:100%; }
}

/* ---------- admin toggles (theme + accent) ---------- */
.admin-toggles{ display:flex; align-items:center; gap:.45rem; }
.qp-toggle{ appearance:none; cursor:pointer; background:transparent; border:1px solid var(--hair);
  border-radius:4px; color:var(--whisper); font-size:.95rem; line-height:1; padding:.25rem .45rem; }
.qp-toggle:hover{ color:var(--ink); border-color:var(--accent); }
.qp-dot{ appearance:none; cursor:pointer; width:15px; height:15px; border-radius:50%;
  border:1px solid var(--hair); padding:0; }
.qp-dot.saffron{ background:#B26A2E; }
.qp-dot.indigo{ background:#434E73; }
html[data-accent="saffron"] .qp-dot.saffron,
html[data-accent="indigo"]  .qp-dot.indigo{ outline:2px solid var(--ink); outline-offset:1px; }

/* a touch more height so Devanagari in the type select isn't cramped */
.select{ min-height:2.7rem; line-height:1.7; padding-top:.5rem; padding-bottom:.5rem; }

/* keep the top bar tidy on small screens */
@media (max-width:560px){
  .admin-hi{ display:none; }
}

/* ---------- admin: change-password flash reuse + footer logged-in link ---------- */
.foot-admin{ display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--hair); }
.foot-admin-link{ font-family:var(--font-deva); font-size:.8rem; color:var(--whisper);
  text-decoration:none; background:transparent; border:0; cursor:pointer; padding:0; }
.foot-admin-link:hover{ color:var(--accent); }
.foot-admin .as-btn{ font:inherit; }
.foot-sep{ color:var(--hair); }
.foot-logout{ margin:0; display:inline; }