/* ============================================
   WritingNepal — Add Writing (Catch editor) styles
   Extends style.css + profile.css tokens.
   ============================================ */

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

/* ---- top bar ---- */
.editor-topbar{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin:24px 0 20px;
}
.editor-topbar .status{ font-size:.82rem; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.editor-topbar .status .dot{ width:7px; height:7px; border-radius:50%; background:var(--leaf-deep); }
.editor-topbar .actions{ display:flex; gap:10px; align-items:center; }
.editor-back-link{ color:var(--ink-soft); font-weight:700; font-size:.85rem; text-decoration:none; }
.editor-back-link:hover{ color:var(--ink); text-decoration:underline; }

/* ---- title ---- */
.editor-title{
  width:100%; border:none; background:transparent; font-family:'Fraunces',serif; font-weight:800;
  font-size:2rem; line-height:1.2; padding:0; margin-bottom:18px; color:var(--ink);
}
.editor-title::placeholder{ color:#C9BFAE; }
.editor-title:focus{ outline:none; }

/* ---- toolbar ---- */
.editor-toolbar{
  display:flex; gap:4px; flex-wrap:wrap; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:8px; margin-bottom:16px;
  /* Sticky, but offset below the site's own sticky header (which sits at
     top:0 with z-index:50) — without the offset+lower z-index fix, on a
     long Catch the toolbar scrolls up and gets covered by the header,
     so it looks like it "vanished" and you can't reach Bold/Italic/etc. */
  position:sticky; top:calc(var(--header-h) + 10px); z-index:20;
  box-shadow:0 2px 8px rgba(18,10,8,0.06);
}
.editor-toolbar button{
  width:34px; height:34px; border-radius:8px; font-size:.92rem; font-weight:700; color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.editor-toolbar button:hover{ background:var(--paper-deep); }
.editor-toolbar button.active{ background:var(--ink); color:var(--gold); }
.editor-toolbar .sep{ width:1px; height:22px; background:var(--line); margin:0 4px; }
.editor-toolbar select{
  border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:.82rem; font-family:inherit; color:var(--ink); background:var(--white);
}
.editor-toolbar select.tb-style{ height:34px; min-width:118px; }
#insertFootnoteBtn{ width:auto; padding:0 8px; font-size:.72rem; font-weight:800; letter-spacing:.02em; }

/* ---- toolbar popovers (Align, Text color) ----
   Gentle by design: instead of permanently showing every align option
   and every color swatch in the main row, each group collapses behind
   one trigger button and only opens on click. Keeps the toolbar calm
   at a glance without hiding anything more than one tap away. */
.tb-popover-wrap{ position:relative; }
.tb-popover{
  display:none; position:absolute; top:calc(100% + 6px); left:0;
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  padding:6px; box-shadow:0 6px 18px rgba(18,10,8,0.12); z-index:30;
  gap:4px;
}
.tb-popover.show{ display:flex; }
.tb-popover button{
  width:32px; height:32px; border-radius:7px; font-size:.86rem; font-weight:700; color:var(--ink);
  display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.tb-popover button:hover{ background:var(--paper-deep); }

.tb-color-popover{ padding:8px; gap:6px; }
.tb-swatch{
  width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line);
  padding:0; transition:transform .12s ease;
}
.tb-swatch:hover{ transform:scale(1.12); }
.tb-color-dot{
  width:14px; height:14px; border-radius:50%; background:var(--ink); display:block;
  border:1.5px solid var(--line);
}

/* ---- footnotes (rendered inside the Catch body) ---- */
.editor-body .wn-footnotes{ margin-top:34px; font-size:.86rem; color:var(--ink-soft); }
.editor-body .wn-footnotes hr{ border:none; border-top:1px solid var(--line); margin-bottom:14px; }
.editor-body .wn-footnotes ol{ padding-left:20px; margin:0; }
.editor-body .wn-footnotes li{ margin-bottom:6px; }
.editor-body sup.wn-fn-ref a{ text-decoration:none; }

/* ---- editable body ---- */
.editor-body{
  min-height:420px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 32px; font-size:1.08rem; line-height:1.85; color:var(--ink);
}
.editor-body:focus{ outline:none; border-color:var(--gold-deep); }
.editor-body[data-placeholder]:empty::before{
  content:attr(data-placeholder); color:#C9BFAE; pointer-events:none;
}
.editor-body h2{ font-family:'Fraunces',serif; font-size:1.4rem; margin:24px 0 10px; }
.editor-body h3{ font-family:'Fraunces',serif; font-size:1.18rem; margin:20px 0 8px; color:var(--ink); }
.editor-body blockquote{
  border-left:4px solid var(--gold); margin:20px 0; padding:2px 0 2px 18px;
  font-family:'Fraunces',serif; font-style:italic; color:var(--ink-soft);
}
.editor-body ul, .editor-body ol{ padding-left:24px; margin:14px 0; }
.editor-body a{ color:var(--clay-deep); }

.editor-footbar{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:.8rem; color:var(--ink-soft); }

/* ---- sidebar ---- */
.editor-sidebar > *{ margin-bottom:20px; }
.ed-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.ed-card h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:14px; }

.ed-field{ margin-bottom:14px; }
.ed-field label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:6px; }
.ed-field select, .ed-field input[type="date"]{
  width:100%; border:1.5px solid var(--line); border-radius:8px; padding:9px 10px; font-family:inherit; font-size:.88rem;
}

.ed-access-toggle{ display:flex; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; margin-bottom:14px; }
.ed-access-toggle button{ flex:1; padding:9px 0; font-size:.86rem; font-weight:700; color:var(--ink-soft); }
.ed-access-toggle button.active{ background:var(--ink); color:var(--gold); }
.ed-access-toggle button.active.paid{ background:var(--clay); color:var(--white); }
.ed-price-row{ display:none; align-items:center; gap:8px; background:var(--paper-deep); border-radius:10px; padding:10px 14px; margin-bottom:6px; }
.ed-price-row.show{ display:flex; }
.ed-price-row span{ font-weight:700; color:var(--ink-soft); }
.ed-price-row input{ border:none; background:transparent; font-family:inherit; font-size:1rem; font-weight:700; width:70px; }
.ed-price-row input:focus{ outline:none; }

/* ---- pricing suggestion ---- */
.ed-suggest{
  background:var(--paper-deep); border-radius:12px; padding:16px; margin-top:10px; display:none;
}
.ed-suggest.show{ display:block; }
.ed-suggest .range{ font-family:'Fraunces',serif; font-weight:800; font-size:1.2rem; color:var(--gold-deep); margin-bottom:8px; }
.ed-suggest ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ed-suggest li{ font-size:.8rem; color:var(--ink-soft); display:flex; gap:6px; }
.ed-suggest li::before{ content:'•'; color:var(--gold-deep); font-weight:800; }
.ed-suggest .apply{ margin-top:12px; font-size:.8rem; font-weight:700; color:var(--clay-deep); }

.ed-publish-actions{ display:flex; flex-direction:column; gap:10px; }
.ed-publish-actions .btn{ width:100%; text-align:center; }

@media (max-width: 900px){
  .editor-shell{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .editor-body{ padding:20px; }
  .editor-title{ font-size:1.5rem; }
  /* Used to be position:static here, which is exactly why the toolbar
     disappeared off the top of the screen once you scrolled into a long
     Catch on mobile — it stays sticky now too, just below the (shorter)
     mobile header via --header-h. */
  .editor-toolbar{ top:calc(var(--header-h) + 8px); }
}