/* ───────────────────────────────────────────────────────────────────
 * posts.css — view_post + posts-system styles.
 *
 * Step 13 — extracted out of templates/posts/view_post.html (which had
 * grown to a 600-line inline <style> block and was forking any future
 * global token change). The template now only carries markup + class
 * names; the file is loaded via a <link> at the top of view_post.html.
 *
 * Editorial-magazine personality of the post page:
 *   - gold accent stripe along the top of the hero (signature edge)
 *   - cover halo glow that echoes .profile-avatar
 *   - body card with a gold left-stripe (editorial pull-quote feel)
 *   - drop cap on the first paragraph
 *   - section titles get a gold underline ornament
 * Cards use .surf.surf-gold so they share the profile-page family.
 * Sidebar flips to the LEFT on lg via Bootstrap's order-lg-first.
 * ─────────────────────────────────────────────────────────────────── */

/* Step 9 — Recommended-for-you rail (sidebar). Compact rows: tiny
 * cover thumb on the left, title + author/date on the right. Each row
 * is a full-width link with a subtle hover lift. */
.post-recommend-card{padding:20px}
.post-recommend-row{
  display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;
  padding:8px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--border);
}
.post-recommend-row:last-of-type{border-bottom:none}
.post-recommend-row:hover .post-recommend-title{color:var(--accent)}
.post-recommend-cover{
  width:48px;height:48px;border-radius:10px;overflow:hidden;flex-shrink:0;
  background:var(--bg-surface);
}
.post-recommend-cover img{width:100%;height:100%;object-fit:cover;display:block}
.post-recommend-cover-empty{
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);font-weight:700;font-size:var(--fs-xl);letter-spacing:.04em;
}
.post-recommend-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.post-recommend-title{
  font-size:var(--fs-sm);font-weight:600;color:var(--text-primary);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s;
}
.post-recommend-meta{font-size:var(--fs-xs);color:var(--text-muted)}

/* Step 8 — reading progress bar. Fixed to the very top of the viewport,
 * a thin gold rule that fills as the reader scrolls past the body
 * content. ``--progress`` is updated by JS as a percent (0..100). */
.post-reading-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:80;
  background:transparent;pointer-events:none;
}
#postProgressFill{
  display:block;height:100%;width:var(--progress, 0%);
  background:linear-gradient(90deg,var(--accent),#ffd35e);
  box-shadow:0 0 12px rgba(205,161,44,.40);
  transition:width .12s ease-out;
}

/* Step 8 — Print stylesheet. When the user prints (or "Save as PDF"
 * via the browser), strip the chrome — sidebar, comments, share/save
 * actions — and let the body breathe. The hero stays so the printout
 * is recognisable as a piece of writing rather than a generic block. */
@media print{
  .topbar, .sidebar, .navbar, .post-reading-progress,
  .post-reactions-card, .post-comments-card, .post-comment-form-card,
  .post-tags-row .post-tag-pill-x, .post-similar-cta,
  .col-lg-4.order-lg-first, .modal, .arch-form-actions,
  .post-body-tools{display:none !important}
  .post-hero-cover{height:200px !important}
  .post-hero-overlay{background:linear-gradient(180deg,rgba(15,17,23,.10),rgba(15,17,23,.85)) !important}
  body{background:#fff !important;color:#111 !important;padding-bottom:0 !important}
  .surf, .post-body-card{background:#fff !important;border:none !important;box-shadow:none !important}
  .post-body-content{
    color:#111 !important; max-height:none !important; overflow:visible !important;
    text-align:start !important; font-size:13.5pt !important; line-height:1.7 !important;
    max-width:none !important;
  }
  .post-body-content a{color:#000 !important;text-decoration:underline}
  .col-lg-8{flex:0 0 100% !important;max-width:100% !important}
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.post-hero{
  position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.3),0 0 0 1px rgba(205,161,44,.18);
}
.post-hero-cover{position:relative;height:320px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.post-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,23,.25) 0%,rgba(15,17,23,.94) 100%)}
.post-hero-back{position:absolute;top:18px;inset-inline-start:22px;z-index:2;color:#fff;text-decoration:none;font-size:var(--fs-sm);background:rgba(0,0,0,.55);padding:6px 12px;border-radius:99px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s}
.post-hero-back:hover{background:rgba(0,0,0,.6);color:var(--accent-surface)}
/* Top-right hero cluster — holds the "Adjust cover" control + the PRIVATE
   badge in one flex row so they never overlap (logical inset = RTL-safe). */
.post-hero-tr{position:absolute;top:18px;inset-inline-end:22px;z-index:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-inline-size:min(100%,420px)}
.post-hero-private{color:#fff;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:rgba(248,113,113,.85);padding:5px 12px;border-radius:99px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}
.post-hero-content{position:relative;z-index:1;padding:28px 32px 26px;width:100%}
/* Reuse the per-category --cat-* tokens that .post-card-*-label binds, but
 * override the absolute positioning + box style so the chip sits inline in
 * the hero content. */
.post-hero-category{
  position:static!important;top:auto!important;inset-inline-end:auto!important;
  display:inline-flex;align-items:center;
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:5px 14px;border-radius:99px;margin-bottom:12px;text-decoration:none;
  background-color:var(--cat-bg-strong);color:var(--cat-fg);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .15s,background var(--dur-fast) var(--ease);
}
.post-hero-category:hover{transform:translateY(-1px);color:var(--cat-fg)}
.post-hero-content h1{font-size:32px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.2;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.post-hero-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:var(--fs-sm);color:rgba(255,255,255,.85)}
.post-hero-meta span i{margin-inline-end:5px;color:var(--accent)}
/* Step 6 — draft / scheduled status chip. Subtle background tint per
 * state, sits inline with the rest of the meta strip. */
.post-status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:99px;
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.16);
}
.post-status-pill.is-draft{background:rgba(251,146,60,.18);color:#fed7aa;border-color:rgba(251,146,60,.40)}
.post-status-pill.is-scheduled{background:rgba(56,189,248,.18);color:#bae6fd;border-color:rgba(56,189,248,.40)}
.post-status-pill i{color:inherit;margin:0}

/* ── Tags row ────────────────────────────────────────────────────────
 * Chip-style pills on the start side, a "Similar posts" CTA pill anchored
 * to the end side. The blacklist toggle is an inline ✕ glyph baked into
 * each tag pill so the row reads cleanly. Toggle is dimmed at rest and
 * brightens on pill hover. */
.post-tags-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.post-tags-strip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 auto;min-width:0}
.post-similar-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px 6px 14px;border-radius:99px;
  background:var(--accent-dim);color:var(--accent)!important;
  border:1px solid rgba(205,161,44,.45);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;text-decoration:none;
  white-space:nowrap;flex-shrink:0;
  box-shadow:0 1px 6px rgba(205,161,44,.18);
  transition:background .15s,color .15s,border-color .15s,box-shadow .25s var(--ease),transform .15s;
}
.post-similar-cta:hover{
  background:var(--accent-surface);color:#1a1a1a!important;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(205,161,44,.14),0 4px 12px rgba(205,161,44,.32);
  transform:translateY(-1px);
}
.post-similar-cta i{font-size:var(--fs-xs)}
.post-similar-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  border-radius:99px;background:rgba(0,0,0,.18);
  font-size:var(--fs-xs);font-weight:700;
}
.post-similar-cta:hover .post-similar-count{background:rgba(0,0,0,.22)}
.post-tag-pill{
  display:inline-flex;align-items:stretch;
  background:var(--overlay-soft);border:1px solid var(--border);
  border-radius:99px;height:28px;
  transition:border-color .15s,background .15s;
  overflow:hidden;
}
.post-tag-pill:hover{background:var(--accent-dim);border-color:rgba(205,161,44,.30)}
.post-tag-pill-label{
  display:inline-flex;align-items:center;
  padding:0 12px;font-size:var(--fs-xs);font-weight:500;
  color:var(--text-muted);text-decoration:none;
  transition:color .15s;
}
.post-tag-pill:hover .post-tag-pill-label{color:var(--accent)}
.post-tag-pill-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;border:none;border-inline-start:1px solid var(--border);
  background:transparent;color:var(--text-muted);font-size:var(--fs-2xs);
  cursor:pointer;padding:0;opacity:.55;
  transition:background .15s,color .15s,opacity .15s;
}
.post-tag-pill:hover .post-tag-pill-x{opacity:1}
.post-tag-pill-x:hover{background:rgba(248,113,113,.15);color:var(--danger)}
.post-tag-pill.is-blocked{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.30)}
.post-tag-pill.is-blocked .post-tag-pill-label{color:var(--danger);text-decoration:line-through}
.post-tag-pill.is-blocked .post-tag-pill-x{color:var(--danger);opacity:1}
.post-tag-pill.is-blocked .post-tag-pill-x:hover{background:var(--accent-dim);color:var(--accent)}

/* ── Section titles — uppercase accent label with gold underline ornament
 * to echo the editorial mood. The underline is short on purpose, like a
 * magazine section rule. */
.post-section-title{
  font-size:var(--fs-sm);font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:16px;padding-bottom:10px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--border);position:relative;
}
.post-section-title::after{
  content:"";position:absolute;left:0;bottom:-1px;
  width:38px;height:2px;background:var(--accent-surface);
  border-radius:2px;
}
.post-section-title i{font-size:var(--fs-sm)}
.post-comments-count{margin-inline-start:auto;background:var(--accent-dim);color:var(--accent);padding:2px 10px;border-radius:99px;font-size:var(--fs-xs);font-weight:700;letter-spacing:0;text-transform:none;border:1px solid rgba(205,161,44,.30)}

/* ── Body card — editorial reading area ────────────────────────────── */
.post-body-card{padding:30px 36px;position:relative}
.post-body-card:hover{transform:none}  /* keep the reading area calm */
/* Reading-area tools — Aa- / Aa / Aa+ buttons sitting at the top-right of
 * the body card. Borrows the .arch-btn-ghost feel but compact. */
.post-body-tools{
  position:absolute;top:14px;inset-inline-end:14px;z-index:2;
  display:inline-flex;gap:4px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:99px;padding:3px;
}
.post-body-zoom{
  width:28px;height:28px;border-radius:99px;border:none;background:transparent;
  color:var(--text-muted);font-size:var(--fs-xs);font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,color .15s;
}
.post-body-zoom:hover{background:var(--accent-dim);color:var(--accent)}
.post-body-zoom:disabled{opacity:.35;cursor:not-allowed}
#postFontReset{font-family:Georgia,'Times New Roman',serif;font-size:var(--fs-sm)}

/* Constrained reading column — capped at ~62ch so long lines don't
 * fatigue the eye, justified, centered inside the card. Clamped to 12
 * lines tall (em-based so the clamp scales with the font sizer) with
 * a styled gold scrollbar on the inline-end edge. */
.post-body-content{
  --post-body-fs:15.5px;
  --post-body-lh:1.85;
  color:var(--text-secondary);font-size:var(--post-body-fs);line-height:var(--post-body-lh);
  text-align:justify;hyphens:auto;overflow-wrap:break-word;
  max-width:62ch;margin-inline:auto;
  margin-top:32px;  /* clear the toolbar */
  position:relative;z-index:1;
  max-height:calc(var(--post-body-lh) * 12em);
  overflow-y:auto;overflow-x:hidden;
  padding-inline-end:14px;  /* breathing room next to the scrollbar */
  scroll-padding-block:8px;
  scrollbar-width:thin;
  scrollbar-color:var(--accent-dim) transparent;
}
/* WebKit scrollbar — slim, rounded, dim-gold thumb that lights to full
 * accent on hover. Track stays transparent so the gold-halo card surface
 * shows through. */
.post-body-content::-webkit-scrollbar{width:8px}
.post-body-content::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.post-body-content::-webkit-scrollbar-thumb{
  background:var(--accent-dim);
  border:2px solid transparent;background-clip:padding-box;
  border-radius:99px;
}
.post-body-content::-webkit-scrollbar-thumb:hover{
  background:var(--accent-surface);background-clip:padding-box;
  box-shadow:0 0 8px rgba(205,161,44,.30);
}
/* When the body fits within the 12-line cap, drop the gutter and hide the
 * track entirely so short posts don't render an empty scrollbar lane. */
.post-body-content.no-scroll{overflow-y:hidden;padding-inline-end:0;scrollbar-width:none}
.post-body-content.no-scroll::-webkit-scrollbar{display:none}
.post-body-content h1,.post-body-content h2,.post-body-content h3,.post-body-content h4{color:var(--text-primary);margin-top:1.4em;margin-bottom:.6em;line-height:1.3;text-align:start}
.post-body-content h1:first-child,.post-body-content h2:first-child,.post-body-content h3:first-child{margin-top:0}
.post-body-content p{margin-bottom:1em}
/* Drop cap — magazine signature on the first paragraph only. */
.post-body-content > p:first-child::first-letter{
  /* FND-078 §7: logical float so the drop-cap follows the ARTICLE's own content
     direction (the container carries dir="auto") — English article -> left,
     Arabic article -> right — instead of the page direction that orphaned an
     English drop-cap on the right in the RTL UI. */
  float:inline-start;font-size:48px;line-height:.9;
  padding-block:6px 0;padding-inline:0 10px;margin-top:4px;
  color:var(--accent);font-weight:700;
}
.post-body-content img{max-width:100%;height:auto;border-radius:10px;margin:14px 0;display:block;box-shadow:0 4px 18px rgba(0,0,0,.28)}
/* Responsive video embeds — both filter-converted (.video-embed) and raw TinyMCE iframes */
.video-embed{position:relative;padding-top:56.25%;border-radius:8px;overflow:hidden;margin:.8em 0;background:#000}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.post-body-content iframe{max-width:100%;border:0;border-radius:8px;display:block;margin:.8em 0;aspect-ratio:16/9;height:auto}
.post-body-content a{color:var(--accent)}
.post-body-content a:hover{text-decoration:underline}
.post-body-content blockquote{border-inline-start:3px solid var(--accent);padding-block:6px;padding-inline-start:16px;margin:14px 0;color:var(--text-muted);font-style:italic;background:linear-gradient(90deg,rgba(205,161,44,.06) 0%,transparent 100%);text-align:start}
.post-body-content pre{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:14px;overflow-x:auto;font-size:var(--fs-sm);text-align:start}
.post-body-content code{background:var(--bg-surface);padding:1px 5px;border-radius:4px;font-size:.92em}
.post-body-content ul,.post-body-content ol{text-align:start}

/* ── Co-author chips (edit_post) ────────────────────────────────────── */
.ca-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;
  font-size:var(--fs-xs);font-weight:600;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.ca-chip--accepted{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08);color:#86efac}
.ca-chip--pending{border-color:rgba(205,161,44,.3);color:var(--accent)}
.ca-chip--declined{border-color:rgba(248,113,113,.3);color:#f87171;opacity:.7}
.ca-chip-avatar{width:18px;height:18px;border-radius:50%;object-fit:cover}
.ca-chip-status{font-size:var(--fs-2xs);font-weight:400;opacity:.75;text-transform:capitalize}
.ca-chip-remove{background:none;border:none;cursor:pointer;color:inherit;opacity:.6;
  font-size:var(--fs-sm);padding:0 2px;line-height:1;transition:opacity .15s}
.ca-chip-remove:hover{opacity:1}

/* ── Series navigation banner (view_post) ──────────────────────────── */
.ps-series-nav{padding:16px 20px}
.ps-series-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.ps-series-eyebrow{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.ps-series-title{font-size:var(--fs-md);font-weight:600;color:var(--text-primary)}
.ps-series-desc{font-size:var(--fs-sm);color:var(--text-muted);margin:0 0 10px}
.ps-series-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.ps-series-btn{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);font-weight:600;
  padding:5px 13px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);color:var(--text-primary);text-decoration:none;transition:background .15s}
.ps-series-btn:hover{background:rgba(255,255,255,.1);color:var(--text-primary)}
.ps-series-btn-disabled{opacity:.35;cursor:default;pointer-events:none}
.ps-series-dots{font-size:var(--fs-xs);color:var(--text-muted);flex:1;text-align:center}


/* ── Attachments — unified tile grid ─────────────────────────────────
 * Same outer card shape for every attachment so the row reads as one
 * coherent strip. Image attachments show a real thumbnail; file
 * attachments show a coloured extension badge tile. The colour palette
 * mirrors the make-post file picker (file-preview.js) so users see a
 * consistent visual language for "this is a PDF" / "this is a CAD file"
 * etc. across the upload + view sides.
 *
 * --compact variant: used in the sidebar where horizontal room is tight.
 * Trims tile minmax + meta padding so 3 tiles fit per sidebar row. */
.post-attachments-card{padding:18px}
/* Compact sidebar variant — tiles at their original compact size (≈78px),
 * with `justify-content:space-evenly` + `gap:0` so the leftover space in
 * the tray is split into FOUR equal parts: left edge → tile1 → tile2 →
 * tile3 → right edge. That gives identical spacing on every side and
 * between every tile. */
.post-attachments-card--compact .post-attach-tray{
  grid-template-columns:repeat(3,78px);
  column-gap:0;row-gap:14px;
  justify-content:space-evenly;
}
.post-attachments-card--compact .post-attach-thumb{aspect-ratio:1/1}
.post-attachments-card--compact .post-attach-meta{padding:5px 6px 6px}
.post-attachments-card--compact .post-attach-name{font-size:var(--fs-2xs);font-weight:500;line-height:1.3}
.post-attachments-card--compact .post-attach-ext{font-size:var(--fs-sm)}
.post-attach-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-inline-start:6px;
  border-radius:99px;background:var(--accent-dim);color:var(--accent);
  font-size:var(--fs-2xs);font-weight:700;border:1px solid rgba(205,161,44,.30);
}
.post-attach-tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.post-attach-tile{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;text-decoration:none;
  transition:border-color .15s,transform .2s,box-shadow .25s var(--ease);
}
.post-attach-tile:hover{
  border-color:rgba(205,161,44,.45);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 0 1px rgba(205,161,44,.18);
}
.post-attach-thumb{
  position:relative;width:100%;aspect-ratio:4/3;
  background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.post-attach-thumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .35s var(--ease)}
.post-attach-tile:hover .post-attach-thumb img{transform:scale(1.04)}

/* Coloured ext badge tile — colour is set per ext via [data-ext] below.
 * Default is a neutral muted swatch so unknown extensions still look
 * intentional rather than broken. */
.post-attach-badge{
  background:linear-gradient(135deg,var(--cat-c) 0%,var(--cat-c-dark) 100%);
  --cat-c:#475569;--cat-c-dark:#334155;
}
/* Step 13 — was 'Poppins',system-ui,sans-serif. The project no longer
 * ships Poppins after the Final 2026 redesign; falling back to the
 * inherited Nunito keeps the badge in the platform's actual type
 * vocabulary instead of ghost-loading a missing font. */
.post-attach-ext{
  font-size:var(--fs-xl);font-weight:800;color:#fff;letter-spacing:.04em;
  font-family:'Nunito',system-ui,sans-serif;text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,.35);
}
/* Per-extension colours — mirrors static/javascript/file-preview.js so
 * the visual language is the same on the upload side and the view side. */
.post-attach-badge[data-ext="pdf"]{--cat-c:#ef4444;--cat-c-dark:#b91c1c}
.post-attach-badge[data-ext="doc"],.post-attach-badge[data-ext="docx"],
.post-attach-badge[data-ext="rtf"],.post-attach-badge[data-ext="odt"]{--cat-c:#2563eb;--cat-c-dark:#1d4ed8}
.post-attach-badge[data-ext="txt"]{--cat-c:#64748b;--cat-c-dark:#475569}
.post-attach-badge[data-ext="xls"],.post-attach-badge[data-ext="xlsx"],
.post-attach-badge[data-ext="csv"],.post-attach-badge[data-ext="ods"]{--cat-c:#16a34a;--cat-c-dark:#15803d}
.post-attach-badge[data-ext="ppt"],.post-attach-badge[data-ext="pptx"],
.post-attach-badge[data-ext="odp"]{--cat-c:#f97316;--cat-c-dark:#c2410c}
.post-attach-badge[data-ext="dwg"],.post-attach-badge[data-ext="dxf"],
.post-attach-badge[data-ext="rvt"],.post-attach-badge[data-ext="rfa"]{--cat-c:#eab308;--cat-c-dark:#a16207}
.post-attach-badge[data-ext="skp"],.post-attach-badge[data-ext="3dm"],
.post-attach-badge[data-ext="ifc"]{--cat-c:#0ea5e9;--cat-c-dark:#0369a1}
.post-attach-badge[data-ext="obj"],.post-attach-badge[data-ext="stl"],
.post-attach-badge[data-ext="dae"],.post-attach-badge[data-ext="gh"]{--cat-c:#10b981;--cat-c-dark:#047857}
.post-attach-badge[data-ext="psd"]{--cat-c:#1d4ed8;--cat-c-dark:#1e3a8a}
.post-attach-badge[data-ext="ai"],.post-attach-badge[data-ext="eps"]{--cat-c:#fb923c;--cat-c-dark:#c2410c}
.post-attach-badge[data-ext="indd"]{--cat-c:#be185d;--cat-c-dark:#831843}
.post-attach-badge[data-ext="zip"],.post-attach-badge[data-ext="rar"],
.post-attach-badge[data-ext="7z"],.post-attach-badge[data-ext="tar"],
.post-attach-badge[data-ext="gz"]{--cat-c:#a855f7;--cat-c-dark:#7e22ce}
.post-attach-badge[data-ext="mp4"],.post-attach-badge[data-ext="mov"],
.post-attach-badge[data-ext="webm"],.post-attach-badge[data-ext="mkv"]{--cat-c:#db2777;--cat-c-dark:#9d174d}
.post-attach-badge[data-ext="mp3"],.post-attach-badge[data-ext="wav"],
.post-attach-badge[data-ext="ogg"],.post-attach-badge[data-ext="m4a"]{--cat-c:#06b6d4;--cat-c-dark:#0e7490}

.post-attach-meta{padding:8px 10px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.post-attach-name{font-size:var(--fs-xs);font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.post-attach-hint{font-size:var(--fs-2xs);color:var(--text-muted);display:inline-flex;align-items:center;gap:5px}
.post-attach-hint i{font-size:var(--fs-2xs);color:var(--accent)}
.post-attach-tile:hover .post-attach-name{color:var(--accent)}

/* ── Reactions card ──────────────────────────────────────────────────
 * Layout: [👍 N | 👎 N]   👁 N           [Comment →]
 * Like + dislike are visually fused into one capsule with a hairline
 * separator between them; the view stat sits inline; the Comment CTA is
 * pinned to the end side via margin-inline-start:auto. */
.post-reactions-card{
  padding:10px 14px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
/* Step 7 — six-kind reaction strip. Each pill is an emoji + count;
 * the active one (the viewer's current pick) gets a gold background
 * and a subtle lift. Hover gives every pill a soft halo so it's
 * obvious all six are clickable. */
.post-reactions-strip{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.post-react-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:99px;
  background:transparent;border:1px solid var(--border);
  color:var(--text-secondary);font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s,box-shadow .25s var(--ease);
}
.post-react-pill:hover{
  background:var(--accent-dim);border-color:rgba(205,161,44,.35);
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.post-react-pill.is-active{
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
}
.post-react-pill.is-active.is-dislike{
  background:rgba(248,113,113,.14);border-color:var(--danger);color:var(--danger);
}
.post-react-emoji{font-size:var(--fs-md);line-height:1}
.post-react-count{font-variant-numeric:tabular-nums;min-width:14px;text-align:end}

/* Share dropdown — anchored under the Share button, slides into view
 * with a small fade. Each option is a row in the menu; the icons
 * inherit the brand vocabulary used across the site. */
.post-share-wrap{position:relative}
.post-share-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-md);box-shadow:0 12px 28px rgba(0,0,0,.30);
  padding:6px;display:flex;flex-direction:column;gap:2px;z-index:10;
}
.post-share-menu[hidden]{display:none}
.post-share-option{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border:none;background:transparent;cursor:pointer;
  color:var(--text-secondary);font-size:var(--fs-sm);font-weight:500;text-align:start;
  text-decoration:none;border-radius:var(--radius-sm);width:100%;
  transition:background .15s,color .15s;
}
.post-share-option:hover{background:var(--accent-dim);color:var(--accent)}
.post-share-option i{width:16px;text-align:center;color:var(--text-muted);font-size:var(--fs-sm)}
.post-share-option:hover i{color:var(--accent)}
.post-reactions-group{
  display:inline-flex;align-items:center;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:99px;overflow:hidden;
}
.post-reactions-group form{margin:0;display:inline-flex}
.post-reactions-group .post-react-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:none;color:var(--text-secondary);
  font-size:var(--fs-sm);font-weight:600;padding:7px 16px;cursor:pointer;
  transition:background .15s,color .15s;
}
.post-reactions-group .post-react-btn:hover{background:var(--accent-dim);color:var(--accent)}
.post-reactions-group .post-react-btn i{font-size:var(--fs-sm)}
.post-react-divider{width:1px;align-self:stretch;background:var(--border)}

.post-react-stat{color:var(--text-muted);font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:6px}
.post-react-stat i{color:var(--accent)}
.post-react-cta{margin-inline-start:auto;height:36px;font-size:var(--fs-sm);padding:0 16px}

/* ── Comments ──────────────────────────────────────────────────────── */
.post-comment-form-card{padding:24px 28px}
/* Comment textarea — locked to 6 lines (no resize handle), with the same
 * gold-tinted focus ring used on other form inputs. */
.comment-body-textarea{
  resize:none;
  height:calc(6 * 1.55em + 22px);  /* ~6 lines + vertical padding */
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  padding:12px 14px;
  font-size:var(--fs-md);line-height:1.55;
  width:100%;
  transition:border-color .15s,box-shadow .25s var(--ease);
}
.comment-body-textarea:focus{
  border-color:rgba(205,161,44,.45);outline:none;
  box-shadow:0 0 0 3px rgba(205,161,44,.10);
}
/* Action row sits below the textarea: attach-photo button + Leave-comment
 * CTA, both pinned to the end side. The photo input itself is visually
 * hidden — the <label> styled as a button triggers it. */
.comment-form-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;justify-content:flex-end;
}
.comment-photo-input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* .comment-photo-btn is defined globally in style.css (it serves both posts AND
 * projects comment composers); the duplicate here was removed (FR-4 Wave 2). It's
 * a 40px gold icon button deliberately height-matched to the send CTA + a
 * file-input label pattern — kept as its own class, not folded into .arch-icon-btn. */

.comment-photo-preview{
  display:inline-flex;align-items:center;
  margin-inline-end:auto;  /* pushes preview to the start side, buttons to the end */
  position:relative;
}
.comment-photo-preview img{
  width:44px;height:44px;border-radius:8px;object-fit:cover;
  border:1px solid var(--border-hover);
  box-shadow:0 0 8px rgba(205,161,44,.16);
}
.comment-photo-clear{
  position:absolute;top:-6px;inset-inline-end:-6px;
  width:20px;height:20px;border-radius:50%;
  background:var(--bg-surface);border:1px solid var(--border-hover);
  color:var(--text-muted);font-size:var(--fs-2xs);line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  transition:color .15s,border-color .15s,background .15s;
}
.comment-photo-clear:hover{color:var(--danger);border-color:var(--danger);background:rgba(248,113,113,.10)}
.post-comments-card{padding:24px 28px}
.post-comment{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border)}
.post-comment:last-child{border-bottom:none;padding-bottom:0}
.post-comment:first-of-type{padding-top:0}
.post-comment-avatar img{width:42px;height:42px;border-radius:12px;object-fit:cover;flex-shrink:0;border:1px solid var(--border)}
.post-comment-body{flex:1;min-width:0}
.post-comment-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.post-comment-name{font-size:var(--fs-sm);font-weight:600;color:var(--text-primary);text-decoration:none}
.post-comment-name:hover{color:var(--accent)}
.post-comment-time{color:var(--text-muted);font-size:var(--fs-xs)}
.post-comment-title{font-size:var(--fs-md);font-weight:600;color:var(--text-primary);margin:2px 0}
.post-comment-text{font-size:var(--fs-md);line-height:1.6;color:var(--text-secondary);margin:4px 0;word-break:break-word}
.post-comment-cover{max-width:60%;margin-top:8px;border-radius:10px;cursor:zoom-in}
.post-comment-actions{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.post-comment-react{font-size:var(--fs-xs);padding:3px 10px}

/* Step 5 — replies block: indented under the parent with a left rail
 * matching the gold accent vocabulary. */
.post-comment-replies{
  margin-left:46px;padding-left:14px;
  border-left:2px solid var(--accent-dim);
  display:flex;flex-direction:column;gap:10px;margin-top:10px;
}
.post-comment--reply{padding-inline-start:0}
/* Edited pill — inline next to the timestamp, intentionally subtle. */
.post-comment-edited{color:var(--text-muted);font-size:var(--fs-xs);font-style:italic;margin-inline-start:6px}
/* Soft-deleted: keep the row in the thread (so replies still anchor)
 * but redact the body to a grey placeholder. */
.post-comment--deleted{opacity:.65}
.post-comment-deleted-body{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--bg-surface);border:1px dashed var(--border);
  border-radius:8px;color:var(--text-muted);font-size:var(--fs-xs);font-style:italic;
}
/* Edit + reply inline forms — match the comment-textarea look */
.comment-edit-form,.comment-reply-form{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.comment-edit-form .comment-form-actions,
.comment-reply-form .comment-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* ── Sidebar bits ──────────────────────────────────────────────────── */
.post-author-link{text-decoration:none;display:block;color:inherit}
/* Author avatar — borrows .profile-avatar's 18px square + soft gold halo so
 * the post page reads as one family with the user profile. */
.post-author-avatar{
  width:56px;height:56px;border-radius:16px;object-fit:cover;flex-shrink:0;
  box-shadow:0 0 14px rgba(205,161,44,.22);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.post-author-link:hover .post-author-avatar{
  transform:translateY(-2px);
  box-shadow:0 0 22px rgba(205,161,44,.34);
}
.post-author-name{font-size:var(--fs-md);font-weight:600;color:var(--text-primary);margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.post-author-link:hover .post-author-name{color:var(--accent)}
.post-author-handle{color:var(--text-muted);font-size:var(--fs-xs)}
.post-author-profession{margin:4px 0 0;font-size:var(--fs-xs);color:var(--accent)}
/* Comment avatar gets the same family glow, sized down */
.post-comment-avatar img{box-shadow:0 0 8px rgba(205,161,44,.16);transition:box-shadow .2s,transform .25s var(--ease)}
.post-comment-avatar:hover img{transform:translateY(-1px);box-shadow:0 0 14px rgba(205,161,44,.28)}

/* Action button (Save / Share) — small count pill tucked inside the
 * ghost button so the user sees engagement at a glance. */
.post-action-btn{font-size:var(--fs-xs);display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px}
.post-action-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 6px;
  border-radius:99px;background:var(--overlay-soft);
  color:var(--text-muted);font-size:var(--fs-2xs);font-weight:700;
  border:1px solid var(--border);
  transition:background .15s,color .15s,border-color .15s;
}
.post-action-btn:hover .post-action-count{background:var(--accent-dim);color:var(--accent);border-color:rgba(205,161,44,.30)}

/* ── Photo strip — top-of-content gallery when 2+ images attached ──── */
.post-photo-strip-card{padding:16px 18px}
.post-photo-strip-tray{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;scrollbar-color:var(--accent-dim) transparent;
}
.post-photo-strip-tray::-webkit-scrollbar{height:5px}
.post-photo-strip-tray::-webkit-scrollbar-track{background:transparent}
.post-photo-strip-tray::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:99px}
.post-photo-strip-tray::-webkit-scrollbar-thumb:hover{background:var(--accent-surface)}
.post-photo-strip-thumb{
  flex:0 0 auto;width:200px;height:160px;
  border-radius:10px;overflow:hidden;display:block;
  position:relative;cursor:zoom-in;
  border:1px solid var(--border);
  transition:border-color .15s,box-shadow .25s var(--ease),transform .2s;
}
.post-photo-strip-thumb:hover{
  border-color:rgba(205,161,44,.45);
  box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 0 1px rgba(205,161,44,.18);
  transform:translateY(-2px);
}
.post-photo-strip-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease)}
.post-photo-strip-thumb:hover img{transform:scale(1.04)}
.post-photo-strip-thumb::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,0);transition:background .2s;pointer-events:none;
}
.post-photo-strip-thumb:hover::after{background:rgba(0,0,0,.16)}

@media (max-width:768px){
  /* Let the cover grow with its overlaid content instead of clamping to a
     fixed 200px box: a long title + multi-row meta used to overflow the box
     and — because .post-hero clips with overflow:hidden — get cut off and
     collide with the absolute Back pill (top:18px). min-height keeps the
     short-content look; the content's reserved top padding guarantees the
     category chip always clears the Back button no matter how tall the meta. */
  .post-hero-cover{height:auto;min-height:200px}
  .post-hero-content{padding:56px 18px 16px}
  .post-hero-content h1{font-size:var(--fs-2xl)}
  .post-hero-meta{gap:10px;font-size:var(--fs-xs)}
  .post-body-card{padding:20px 22px 22px 24px}
  .post-comments-card,.post-comment-form-card,.post-attachments-card{padding:18px 20px}
  .post-body-content{font-size:var(--fs-md);text-align:start;hyphens:none}
  /* shrink the drop cap on mobile so it doesn't crowd the line */
  .post-body-content > p:first-child::first-letter{font-size:42px;padding-inline-end:8px}
  .post-comment-cover{max-width:100%}
  .post-author-avatar{width:48px;height:48px;border-radius:14px}
  .post-photo-strip-thumb{width:150px;height:120px}
}

/* ── Step #30 — "More by this author" strip ───────────────────────── */
.mba-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mba-card{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);transition:border-color .15s,background .15s;color:inherit;text-decoration:none}
.mba-card:hover{border-color:var(--accent);background:rgba(205,161,44,.04);color:inherit;text-decoration:none}
.mba-thumb{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;flex-shrink:0}
.mba-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:rgba(255,255,255,.18)}
.mba-meta{padding:12px 14px 14px;flex:1;display:flex;flex-direction:column;gap:4px}
.mba-title{font-size:var(--fs-sm);font-weight:600;margin:0;line-height:1.4;color:var(--text-primary)}
.mba-sub{font-size:var(--fs-xs);color:var(--text-muted)}
@media(max-width:640px){.mba-strip{grid-template-columns:1fr}}


/* ── Light-theme overrides ──────────────────────────────────────────── */
/* "More by author" cards — white-overlay border/bg invisible on white */
[data-theme="light"] .mba-card {
  border-color: var(--border);
  background: var(--overlay-soft);
}
[data-theme="light"] .mba-thumb-empty { color: var(--text-muted); }

/* Post status pill — white text on near-transparent bg */
[data-theme="light"] .post-status-pill {
  background: var(--overlay-soft);
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="light"] .post-status-pill.is-draft {
  background: rgba(251,146,60,.10);
  color: #92400e;
  border-color: rgba(251,146,60,.28);
}
[data-theme="light"] .post-status-pill.is-scheduled {
  background: rgba(56,189,248,.10);
  color: #075985;
  border-color: rgba(56,189,248,.32);
}
/* Co-author chip accepted — light green text unreadable on white */
[data-theme="light"] .ca-chip--accepted {
  color: #065f46;
  background: rgba(5,150,105,.10);
  border-color: rgba(5,150,105,.28);
}
/* Series nav buttons — white-overlay border/bg */
[data-theme="light"] .ps-series-btn {
  border-color: var(--border);
  background: var(--overlay-soft);
}
[data-theme="light"] .ps-series-btn:hover {
  background: var(--overlay-hover);
}