/* ============================================
   WritingNepal — Add a Book page styles
   Extends style.css + profile.css tokens.
   ============================================ */

.ab-hero{
  display:flex; align-items:center; gap:28px; margin:32px 0 40px;
  background:linear-gradient(160deg,#FDECC8,#FFF9EC);
  border:2px solid var(--ink); border-radius:var(--radius-lg);
  box-shadow:6px 6px 0 var(--gold); padding:28px 32px;
}
.ab-hero-art{ flex:none; width:130px; }
.ab-hero-art svg{ width:100%; height:auto; display:block; }
.ab-hero-text h1{ font-size:1.9rem; margin-bottom:8px; }
.ab-hero-text p{ color:var(--ink-soft); max-width:52ch; }
.ab-akshar-badge{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  background:var(--ink); color:var(--gold); font-weight:800; font-size:.95rem;
  padding:8px 18px; border-radius:999px;
}

.ab-shell{ display:grid; grid-template-columns:1fr 320px; gap:28px; margin-bottom:60px; align-items:start; }

.ab-section{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; margin-bottom:20px;
}
.ab-section h3{ font-size:1.05rem; margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.ab-section h3 .num{
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:800; font-size:.8rem;
}
.ab-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ab-field{ margin-bottom:16px; }
.ab-field.full{ grid-column:1 / -1; }
.ab-field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:6px; }
.ab-field label .req{ color:var(--rose-deep); }
.ab-field input, .ab-field select, .ab-field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px;
  font-family:inherit; font-size:.92rem; background:var(--paper);
}
.ab-field textarea{ min-height:100px; resize:vertical; }
.ab-field input:focus, .ab-field select:focus, .ab-field textarea:focus{ outline:none; border-color:var(--gold-deep); }

.ab-cover-drop{
  border:2px dashed var(--line); border-radius:12px; padding:26px; text-align:center;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.ab-cover-drop:hover, .ab-cover-drop.drag-over{ border-color:var(--gold-deep); background:var(--paper-deep); }
.ab-cover-drop .icon{ font-size:1.8rem; margin-bottom:8px; }
.ab-cover-drop p{ font-size:.86rem; color:var(--ink-soft); margin:0; }
.ab-cover-drop input[type="file"]{ display:none; }

/* ---- sticky sidebar ---- */
.ab-sidebar{ position:sticky; top:20px; }
.ab-preview-card{
  background:var(--white); border:2px solid var(--ink); border-radius:var(--radius-lg);
  box-shadow:5px 5px 0 var(--gold); padding:22px; text-align:center; margin-bottom:20px;
}
.ab-preview-cover{
  width:120px; aspect-ratio:2/3; margin:0 auto 14px; border-radius:8px;
  background:linear-gradient(155deg,#3E5A69,#12181F); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:#EADFC0; font-family:'Noto Serif Devanagari',serif; font-weight:700; font-size:.85rem; padding:10px;
}
.ab-preview-cover img{ width:100%; height:100%; object-fit:cover; }
.ab-preview-title{ font-family:'Fraunces',serif; font-weight:700; font-size:1rem; margin-bottom:2px; }
.ab-preview-author{ font-size:.82rem; color:var(--ink-soft); }

.ab-progress-card{
  background:var(--paper-deep); border-radius:var(--radius); padding:20px; margin-bottom:20px;
}
.ab-progress-card .lbl{ display:flex; justify-content:space-between; font-size:.82rem; font-weight:700; margin-bottom:8px; }
.ab-progress-track{ height:10px; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:10px; }
.ab-progress-fill{ height:100%; background:linear-gradient(90deg,var(--gold),var(--clay-deep)); border-radius:999px; width:0%; transition:width .3s var(--bounce); }
.ab-progress-note{ font-size:.78rem; color:var(--ink-soft); }
.ab-progress-note strong{ color:var(--gold-deep); }

.ab-submit-btn{ width:100%; text-align:center; }

/* ---- success celebration ---- */
.ab-success{ display:none; text-align:center; padding:60px 20px; }
.ab-success.show{ display:block; animation:step-in .35s var(--bounce); }
.ab-success .icon{ font-size:3rem; margin-bottom:14px; }
.ab-success h2{ font-size:1.6rem; margin-bottom:10px; }
.ab-success p{ color:var(--ink-soft); max-width:48ch; margin:0 auto 20px; }
.ab-success .ak-earned{
  display:inline-block; font-family:'Fraunces',serif; font-weight:900; font-size:2rem; color:var(--gold-deep); margin-bottom:20px;
}

@media (max-width:900px){
  .ab-shell{ grid-template-columns:1fr; }
  .ab-sidebar{ position:static; }
}
@media (max-width:640px){
  .ab-hero{ flex-direction:column; text-align:center; }
  .ab-grid{ grid-template-columns:1fr; }
}