/* ═══════════════════════════════════════════════════════════════════════
   WriteUpCafe — Home Feed CSS
   Based on the WC-home.html design template.
   Self-contained tokens; loaded after app.css.
═══════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --bg:       #F5EFE6;
  --surface:  #FDFAF5;
  --espresso: #160C02;
  --ink:      #1A0F05;
  --ink2:     #3D2410;
  --ink3:     #7A5640;
  --ink4:     #B89880;
  --rule:     #E0D4C4;
  --ruled:    #EDE5D8;
  --copper:   #C05A18;
  --copperL:  #E07030;
  --copperXL: #F0924A;
  --copperP:  #FDF0E6;
  --amber:    #D4900A;
  --amberP:   #FFF5D6;
  --teal:     #0E6E5A;
  --tealP:    #DBF0EB;
  --navy:     #1A3A6E;
  --navyP:    #DEE8FA;
  --rose:     #8E1F40;
  --roseP:    #FAEAF0;
  --sage:     #3A6040;
  --sageP:    #E4F0E4;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

/* ── BODY OVERRIDE ── */
body.hf-body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── NAV APP OVERRIDES (home page) ── */
/* Inherit all nav styles from app.css — no layout/component overrides */

/* ── TOPIC NAV ── */
.topic-nav {
  background: rgba(22,12,2,.97);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.topic-nav-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.topic-nav-inner::-webkit-scrollbar { display: none; }
.tnav {
  padding: 9px 15px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .3px;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: .15s;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  display: inline-block;
}
.tnav:hover { color: rgba(255,255,255,.75); }
.tnav.active { color: var(--copperXL); border-bottom-color: var(--copperXL); }

/* ── LAYOUT ── */
.layout {
  max-width: 1340px;
  margin: 0 auto;
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 252px 1fr 260px;
  gap: 24px;
  align-items: start;
}
/* Alias for backward-compat with hf-shell */
.hf-shell {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0;
}

/* ── PANEL (shared card shell) ── */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
}
.panel-hd {
  padding: 12px 15px 11px;
  border-bottom: 1px solid var(--ruled);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-title {
  font-family: 'Playfair Display', serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--espresso);
}
.panel-more {
  font-size: 11px;
  color: var(--copper);
  text-decoration: none;
  font-weight: 500;
}
.panel-more:hover { text-decoration: underline; }
.panel-bd { padding: 12px 15px; }

/* ── LEFT NAV PANEL ── */
.sl { /* left sidebar column */ }
.lnav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--ruled);
  color: var(--ink2);
  text-decoration: none;
  cursor: pointer;
  transition: .12s;
}
.lnav-item:last-child { border-bottom: none; }
.lnav-item:hover { background: var(--ruled); }
.lnav-item.active { background: var(--copperP); color: var(--copper); }
.lnav-icon { color: var(--ink3); flex-shrink: 0; opacity: .8; }
.lnav-item.active .lnav-icon { color: var(--copper); opacity: 1; }
.lnav-label { flex: 1; font-size: 13px; font-weight: 400; }
.lnav-badge {
  padding: 1.5px 7px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.bc { background: var(--copper); }
.bt { background: var(--teal); }
.bs { background: var(--sage); }

/* ── STATS ── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 12px 15px 0;
}
.sc {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 9px;
  text-align: center;
  cursor: pointer;
  transition: .15s;
}
.sc:hover { background: var(--copperP); border-color: var(--copperXL); }
.sc-n {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--espresso);
  display: block;
  line-height: 1;
}
.sc-l {
  font-size: 9.5px;
  color: var(--ink4);
  margin: 2px 0 3px;
  display: block;
}
.delta {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
}
.du { color: var(--teal); background: var(--tealP); }
.df { color: var(--ink3); background: var(--ruled); }
.goal-block {
  padding: 11px 15px 13px;
  margin-top: 10px;
  border-top: 1px solid var(--ruled);
}
.g-label { font-size: 10px; color: var(--ink4); margin-bottom: 3px; }
.g-num {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 5px;
}
.g-num span { font-size: 11.5px; color: var(--ink4); font-family: 'DM Sans', sans-serif; font-weight: 400; }
.g-bar { height: 6px; background: var(--ruled); border-radius: 3px; overflow: hidden; }
.g-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--copper), var(--copperL));
  border-radius: 3px;
  transition: width .6s ease;
}
.g-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink4);
  margin-top: 4px;
}

/* ── TOPICS PILLS ── */
.topics-wrap { margin-bottom: 14px; }
.section-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink4);
  margin-bottom: 9px;
  padding-left: 1px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 12px;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  font-size: 12px;
  color: var(--ink2);
  cursor: pointer;
  margin: 0 5px 7px 0;
  text-decoration: none;
  transition: .15s;
}
.pill:hover { background: var(--copperP); border-color: var(--copperXL); color: var(--copper); }
.pill.on { background: var(--copperP); color: var(--copper); border-color: var(--copper); }
.pill.dashed { border-style: dashed; background: transparent; color: var(--ink4); }
.pill.dashed:hover { background: var(--ruled); }

/* ── STREAK ── */
.streak-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}
.streak-n {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--copper);
  line-height: 1;
}
.streak-label { font-size: 12px; color: var(--ink3); line-height: 1.5; }
.week-row { display: flex; gap: 4px; }
.wd {
  flex: 1;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink4);
  background: var(--ruled);
}
.wd.done { background: var(--copperP); color: var(--copper); }
.wd.now { background: var(--espresso); color: #fff; }

/* ── PROMPT CARD ── */
.prompt-card {
  background: linear-gradient(135deg, var(--espresso) 0%, #2D1608 100%);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.04);
}
.prompt-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--copperXL);
  font-weight: 700;
  margin-bottom: 7px;
}
.prompt-q {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 13px;
  color: #F5EFE6;
  line-height: 1.6;
  margin-bottom: 11px;
}
.btn-sm {
  display: inline-block;
  padding: 6px 14px;
  background: var(--copper);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: .15s;
}
.btn-sm:hover { background: var(--copperL); }

/* ── READ LIST ── */
.rl-row {
  display: flex;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ruled);
  cursor: pointer;
}
.rl-row:last-child { border-bottom: none; }
.rl-n {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--rule);
  width: 16px;
  flex-shrink: 0;
  padding-top: 1px;
}
.rl-t { font-size: 12px; color: var(--ink2); line-height: 1.4; margin-bottom: 1px; }
.rl-m { font-size: 10.5px; color: var(--ink4); }

/* ── CENTRAL FEED ── */
.feed { min-width: 0; }

/* Announce */
.announce {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--espresso);
  padding: 9px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: rgba(255,255,255,.8);
  animation: slideIn .35s ease both;
}
.announce-chip {
  background: var(--copper);
  color: #fff;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.announce-x {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: .15s;
}
.announce-x:hover { color: #fff; }

/* Composer */
.composer {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.composer-row {
  display: flex;
  align-items: center;
  gap: 11px;
}
.comp-ava {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--copperP);
  border: 2px solid var(--copper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--copper);
  flex-shrink: 0;
  overflow: hidden;
}
.comp-ava img { width: 100%; height: 100%; object-fit: cover; }
.comp-box {
  flex: 1;
  padding: 9px 16px;
  background: var(--bg);
  border: 1.5px solid var(--rule);
  border-radius: 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: var(--ink4);
  cursor: pointer;
  outline: none;
  transition: .2s;
  resize: none;
}
.comp-box:focus {
  border-color: var(--copper);
  background: var(--surface);
  color: var(--ink);
}
.comp-icons { display: flex; gap: 6px; flex-shrink: 0; }
.ci {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  cursor: pointer;
  transition: .15s;
}
.ci:hover { background: var(--copperP); border-color: var(--copperXL); color: var(--copper); }

/* Compose form expanded state */
.hf-compose-bottom {
  display: none;
  padding: 10px 0 0;
  margin-top: 10px;
  border-top: 1px solid var(--ruled);
}
.hf-compose-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.hf-compose-hint {
  font-size: 11.5px;
  color: var(--ink4);
  flex: 1;
}
.hf-compose-count {
  font-size: 11.5px;
  color: var(--ink4);
  min-width: 28px;
  text-align: right;
}
.hf-compose-cancel {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--rule);
  background: transparent;
  color: var(--ink3);
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hf-compose-cancel:hover { background: var(--ruled); border-color: var(--copper); color: var(--copper); }
.hf-compose-submit {
  padding: 7px 20px;
  border-radius: 20px;
  border: none;
  background: var(--copper);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.hf-compose-submit:hover { background: var(--copperL); }
.hf-compose-submit:active { transform: scale(.97); }

/* Feed tabs */
.feed-tabs {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
}
.ftab {
  flex: 1;
  padding: 14px 10px 12px;
  border: none;
  background: transparent;
  color: var(--ink4);
  cursor: pointer;
  transition: .2s;
  font-family: 'DM Sans', sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-bottom: 3px solid transparent;
}
.ftab-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.ftab-label { font-size: 13px; font-weight: 600; transition: .2s; }
.ftab-sub { font-size: 10.5px; font-weight: 400; color: var(--ink4); transition: .2s; }
.ftab.on { color: var(--espresso); border-bottom-color: var(--copper); background: var(--copperP, rgba(196,98,45,.06)); }
.ftab.on .ftab-sub { color: var(--copper); }
.ftab:hover:not(.on) { background: var(--ruled); }
.ftab-sep { width: 1px; background: var(--rule); align-self: stretch; margin: 10px 0; }

/* Date divider */
.hf-date-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 12px 0 10px;
  font-size: 10.5px;
  color: var(--ink4);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.hf-date-divider::before,
.hf-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.hf-date-divider span {
  padding: 0 12px;
}

/* Empty feed */
.hf-empty-feed {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
}
.hf-ef-icon { margin-bottom: 12px; line-height: 1; }
.hf-ef-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 8px;
}
.hf-ef-body {
  font-size: 14px;
  color: var(--ink3);
  line-height: 1.6;
}
.hf-ef-body a {
  color: var(--copper);
  text-decoration: none;
  font-weight: 500;
}
.hf-ef-body a:hover { text-decoration: underline; }

/* ── FEED CARD ── */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .2s, transform .15s;
  animation: slideIn .3s ease both;
}
.card:hover { box-shadow: 0 8px 28px rgba(20,10,2,.1); transform: translateY(-2px); }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton loader cards ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skel-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  animation: skeletonFadeIn .3s ease both;
}
@keyframes skeletonFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.skel-card .skel-body {
  display: flex;
  padding: 13px 15px;
  align-items: stretch;
  gap: 13px;
}
.skel-bone {
  background: linear-gradient(90deg, var(--ruled) 25%, #f5ede3 37%, var(--ruled) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}
.skel-img {
  width: 148px;
  min-height: 100px;
  border-radius: 10px;
  flex-shrink: 0;
}
.skel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.skel-tag   { width: 60px;  height: 10px; border-radius: 4px; }
.skel-title { width: 85%;   height: 16px; }
.skel-title2{ width: 60%;   height: 16px; }
.skel-line  { width: 100%;  height: 11px; border-radius: 4px; }
.skel-line2 { width: 75%;   height: 11px; border-radius: 4px; }
.skel-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-top: 1px solid var(--ruled);
}
.skel-ava  { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.skel-name { width: 90px; height: 10px; border-radius: 4px; }
.skel-date { width: 50px; height: 10px; border-radius: 4px; margin-left: auto; }

/* Stagger skeleton animations */
.skel-card:nth-child(2) .skel-bone { animation-delay: .15s; }
.skel-card:nth-child(3) .skel-bone { animation-delay: .3s; }

/* Activity row */
.act-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px 0;
  font-size: 12px;
  color: var(--ink3);
}
.act-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.ai-write   { background: var(--navyP); color: var(--navy); }
.ai-blog    { background: var(--tealP); color: var(--teal); }
.ai-follow  { background: var(--roseP); color: var(--rose); }
.ai-status  { background: var(--amberP); color: var(--amber); }
.ai-comment { background: var(--ruled); color: var(--ink2); }
.ai-review  { background: var(--amberP); color: var(--amber); }
.act-row strong { color: var(--ink2); font-weight: 500; }
.act-time { margin-left: auto; font-size: 10.5px; color: var(--ink4); flex-shrink: 0; }

/* Follow source tag */
.follow-src {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.follow-src--topic { background: rgba(42,176,158,0.12); color: var(--teal); }
.follow-src--blog  { background: rgba(212,168,83,0.12); color: var(--gold); }

/* Following sub-filters */
.hf-follow-filters {
  display: flex;
  gap: 6px;
  padding: 10px 0;
  margin-bottom: 4px;
}
.hf-ff-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: transparent;
  color: var(--ink3);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.hf-ff-pill:hover { border-color: var(--ink2); color: var(--ink2); }
.hf-ff-pill.on {
  background: var(--espresso, #2C1F14);
  border-color: var(--espresso, #2C1F14);
  color: #fff;
}
.hf-ff-pill.on svg { stroke: #fff; }
.hf-card-wrap { display: block; }
.hf-card-wrap.hf-hidden { display: none; }

/* Card body */
.cbody {
  display: flex;
  padding: 13px 15px;
  align-items: stretch;
}
.cimg {
  width: 148px;
  min-height: 100px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ruled);
  margin-right: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--rule);
}
.cimg img { width: 100%; height: 100%; object-fit: cover; }
.ccont { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ctopic {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 5px;
  text-decoration: none;
}
.ctopic:hover { text-decoration: underline; }
.ctitle {
  font-family: 'Playfair Display', serif;
  font-size: clamp(15px, 2.2vw, 16.5px);
  font-weight: 700;
  color: var(--espresso);
  line-height: 1.3;
  margin-bottom: 6px;
  text-decoration: none;
  display: block;
}
.ctitle:hover { color: var(--copper); }
.cexcerpt {
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 9px;
}
.cauthor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
}
.cauthor-left { display: flex; align-items: center; gap: 6px; }
.cava {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.cava img { width: 100%; height: 100%; object-fit: cover; }
.cname { font-size: 12px; font-weight: 500; color: var(--ink2); text-decoration: none; }
.cname:hover { color: var(--copper); }
.csep { color: var(--rule); font-size: 10px; }
.cblog { font-size: 12px; color: var(--ink3); text-decoration: none; }
.cblog:hover { color: var(--copper); }

/* Card footer */
.cfoot-rule {
  border: none;
  border-top: 1px solid var(--ruled);
  margin: 12px -16px 0;
}
.cfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 10px;
}
/* Inside ccont or cstatus the parent already provides horizontal padding */
.ccont .cfoot-rule,
.cstatus .cfoot-rule { margin: 12px 0 0; }
.ccont .cfoot,
.cstatus .cfoot { padding: 8px 0 10px; }
.cfoot-left  { display: flex; align-items: center; gap: 10px; }
.cfoot-right { display: flex; align-items: center; gap: 4px; }
.cfoot-sep   { width: 1px; height: 14px; background: var(--ruled); margin: 0 4px; }
.ca {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink3);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: .15s;
  font-family: 'DM Sans', sans-serif;
}
.ca:hover { color: var(--copper); }
.ca.liked  { color: #B02050; }
.ca.active { color: #B02050; }
.cta,
.cta-out {
  padding: 6px 14px;
  background: transparent;
  color: var(--copper);
  border: 1.5px solid var(--copper);
  border-radius: 16px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: .15s;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  flex-shrink: 0;
}
.cta:hover,
.cta-out:hover { background: var(--copper); color: #fff; }

/* Progress bar */
.prog { height: 3px; background: var(--ruled); }
.prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--copper), var(--copperL));
  width: 0;
  transition: width .5s ease;
}

/* Social card */
.csocial {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.sava-stack { display: flex; flex-shrink: 0; }
.sava-stack .cava {
  width: 42px;
  height: 42px;
  font-size: 15px;
  border: 2.5px solid var(--surface);
  margin-left: -8px;
}
.sava-stack .cava:first-child { margin-left: 0; }
.stext { flex: 1; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.stext strong { color: var(--espresso); font-weight: 500; }

/* Status card */
.cstatus { padding: 14px 16px 0; }
.sq {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16.5px;
  color: var(--espresso);
  line-height: 1.55;
  margin-bottom: 11px;
  padding-left: 14px;
  border-left: 3px solid var(--copper);
}
.comment-strip {
  background: var(--bg);
  border-left: 3px solid var(--copper);
  border-radius: 0 6px 6px 0;
  padding: 9px 13px;
  margin: 0 15px 11px;
  font-size: 12.5px;
  color: var(--ink3);
  font-style: italic;
  line-height: 1.5;
}

/* Repost banner */
.repost-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  font-size: 11.5px;
  color: var(--copper);
  font-weight: 600;
  border-bottom: 1px solid var(--ruled);
  background: var(--copperP);
}

/* Review stars */
.stars { display: flex; gap: 2px; margin-bottom: 4px; }
.star-f { color: var(--amber); font-size: 13.5px; }
.star-e { color: var(--rule); font-size: 13.5px; }

/* Badge */
.badge { display: inline-block; padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.b-new  { background: var(--tealP); color: var(--teal); }
.b-feat { background: var(--amberP); color: var(--amber); }
.b-you  { background: var(--copperP); color: var(--copper); }

/* Follow btn */
.follow-btn {
  padding: 5px 13px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--espresso);
  background: transparent;
  color: var(--espresso);
  transition: .15s;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}
.follow-btn:hover, .follow-btn.on { background: var(--espresso); color: #fff; }

/* Load more */
.load-more {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  transition: .15s;
}
.load-more:hover { background: var(--espresso); color: #fff; border-color: var(--espresso); }

/* Alias for existing JS hook */
.hf-load-more-btn {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  transition: .15s;
  margin-top: 4px;
}
.hf-load-more-btn:hover { background: var(--espresso); color: #fff; border-color: var(--espresso); }

/* ── RIGHT SIDEBAR ── */
.sr { /* right sidebar column */ }
.cta-banner {
  background: var(--espresso);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
}
.cta-banner-eye {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--copperXL);
  font-weight: 700;
  margin-bottom: 6px;
}
.cta-banner-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 13.5px;
  color: rgba(245,239,230,.85);
  line-height: 1.6;
  margin-bottom: 13px;
}
.cta-banner-text strong { color: var(--copperXL); font-style: normal; }
.cta-banner-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px;
  background: var(--copper);
  color: #fff;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: .15s;
  box-shadow: 0 2px 10px rgba(192,90,24,.35);
}
.cta-banner-btn:hover { background: var(--copperL); }

/* Trend */
.trend-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ruled);
  cursor: pointer;
  transition: .12s;
}
.trend-row:last-child { border-bottom: none; }
.trend-row:hover { transform: translateX(3px); }
.trend-n {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--rule);
  padding-top: 1px;
}
.trend-n.hot { color: var(--copper); }
.trend-t { font-size: 12.5px; color: var(--ink2); line-height: 1.4; margin-bottom: 1px; }
.trend-m { font-size: 10.5px; color: var(--ink4); }

/* Suggestions */
.sugg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ruled);
}
.sugg-row:last-child { border-bottom: none; }
.sugg-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}
.sugg-ava img { width: 100%; height: 100%; object-fit: cover; }
.sugg-name { font-size: 12.5px; font-weight: 500; color: var(--espresso); }
.sugg-sub { font-size: 10.5px; color: var(--ink4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Trending Blogs widget */
.tb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--ruled);
}
.tb-row:last-child { border-bottom: none; }
.tb-ava {
  width: 36px; height: 36px; /* border-radius: 10px; */ flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 13px; font-weight: 700;
  color: #fff; overflow: hidden;
}
.tb-ava img { width: 100%; height: 100%; object-fit: cover; }
.tb-info { flex: 1; min-width: 0; }
.tb-name {
  font-size: 12.5px; font-weight: 600; color: var(--ink2, #2C1A0E);
  text-decoration: none; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-name:hover { color: var(--copper, #C4622D); }
.tb-meta {
  display: flex; gap: 6px; font-size: 10.5px; color: var(--ink4, #6B4E38);
  margin-top: 1px; overflow: hidden; white-space: nowrap;
}
.hf-tb-follow-btn {
  flex-shrink: 0; padding: 4px 12px; border-radius: 14px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--copper, #C4622D); background: transparent;
  color: var(--copper, #C4622D); transition: all .15s;
  font-family: 'DM Sans', sans-serif;
}
.hf-tb-follow-btn:hover,
.hf-tb-follow-btn.following {
  background: var(--copper, #C4622D); color: #fff;
}

/* Leaderboard */
.lb-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ruled);
}
.lb-row:last-child { border-bottom: none; }
.lb-r {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--rule);
}
.lb-r.g { color: #D4A520; }
.lb-r.s { color: #9BA0A6; }
.lb-r.b { color: var(--copper); }
.lb-pts { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--copper); flex-shrink: 0; }
.lb-you {
  background: var(--copperP);
  margin: 0 -15px;
  padding: 8px 15px;
  border-top: 1px solid var(--rule);
}

/* Blog discover */
.blog-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ruled);
}
.blog-row:last-child { border-bottom: none; }
.blog-ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Footer */
.r-footer a {
  font-size: 10.5px;
  color: var(--ink4);
  text-decoration: none;
  margin-right: 9px;
  display: inline-block;
  margin-bottom: 4px;
}
.r-footer a:hover { color: var(--copper); }
.r-footer p { font-size: 10px; color: var(--rule); margin-top: 2px; }

/* ── JS HOOK BUTTON STYLES ── */

/* Like buttons — base .ca style + red when active/liked */
.hf-like-btn,
.hf-bp-like-btn,
.hf-sp-like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink3);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: .15s;
  font-family: 'DM Sans', sans-serif;
}
.hf-like-btn:hover,
.hf-bp-like-btn:hover,
.hf-sp-like-btn:hover { color: var(--copper); }
.hf-like-btn.active,
.hf-like-btn.liked,
.hf-bp-like-btn.active,
.hf-bp-like-btn.liked,
.hf-sp-like-btn.active,
.hf-sp-like-btn.liked { color: #B02050; }
.hf-like-btn svg,
.hf-bp-like-btn svg,
.hf-sp-like-btn svg { width: 15px; height: 15px; }

/* Share button */
.hf-share-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink3);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: .15s;
  font-family: 'DM Sans', sans-serif;
}
.hf-share-btn:hover { color: var(--copper); }
.hf-share-btn svg { width: 15px; height: 15px; }

/* Open comments button */
.hf-open-comments-btn,
.hf-bp-comments-btn,
.hf-sp-comments-btn,
.hf-activity-comments-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink3);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: .15s;
  font-family: 'DM Sans', sans-serif;
}
.hf-open-comments-btn:hover,
.hf-bp-comments-btn:hover,
.hf-sp-comments-btn:hover,
.hf-activity-comments-btn:hover { color: var(--copper); }
.hf-open-comments-btn svg,
.hf-bp-comments-btn svg,
.hf-sp-comments-btn svg,
.hf-activity-comments-btn svg { width: 15px; height: 15px; }

/* Activity like btn */
.hf-activity-like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink3);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: .15s;
  font-family: 'DM Sans', sans-serif;
}
.hf-activity-like-btn:hover { color: var(--copper); }
.hf-activity-like-btn.active,
.hf-activity-like-btn.liked { color: #B02050; }
.hf-activity-like-btn svg { width: 15px; height: 15px; }

/* Repost button */
.hf-repost-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink3);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: .15s;
  font-family: 'DM Sans', sans-serif;
}
.hf-repost-btn:hover { color: #0f7a5a; }
.hf-repost-btn.reposted { color: #0f7a5a; }
.hf-repost-btn svg { width: 15px; height: 15px; }

/* Save / bookmark buttons */
.hf-rxn-save,
.hf-save-btn,
.hf-bp-save-btn,
.hf-sp-save-btn,
.hf-blog-save-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: .15s;
}
.hf-rxn-save:hover,
.hf-save-btn:hover,
.hf-bp-save-btn:hover,
.hf-sp-save-btn:hover,
.hf-blog-save-btn:hover { color: var(--copper); background: var(--copperP); }
.hf-rxn-save.active,
.hf-save-btn.active,
.hf-bp-save-btn.active,
.hf-sp-save-btn.active,
.hf-blog-save-btn.active { color: var(--copper); }
.hf-rxn-save svg,
.hf-save-btn svg,
.hf-bp-save-btn svg,
.hf-sp-save-btn svg,
.hf-blog-save-btn svg { width: 15px; height: 15px; }

/* Blog directory follow button */
.hf-bdcard-follow-btn {
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--copper);
  background: transparent;
  color: var(--copper);
  transition: .15s;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  flex-shrink: 0;
}
.hf-bdcard-follow-btn:hover,
.hf-bdcard-follow-btn.active { background: var(--copper); color: #fff; }

/* Writer follow form */
.hf-wf-follow-btn,
.hf-wf-follow-form button {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--espresso);
  background: transparent;
  color: var(--espresso);
  transition: .15s;
  font-family: 'DM Sans', sans-serif;
}
.hf-wf-follow-btn:hover,
.hf-wf-follow-form button:hover { background: var(--espresso); color: #fff; }

/* ── COMMENT MODAL ── */
.hf-cmt-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(22,12,2,.55);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
}
.hf-cmt-overlay.open {
  display: flex;
}
.hf-cmt-modal {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(22,12,2,.25);
  animation: slideIn .25s ease both;
}
.hf-cmt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ruled);
  flex-shrink: 0;
}
.hf-cmt-modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--espresso);
}
.hf-cmt-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--ink3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}
.hf-cmt-close:hover { background: var(--ruled); color: var(--ink); }
.hf-cmt-close svg { width: 14px; height: 14px; }
.hf-cmt-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}
.hf-cmt-loading {
  text-align: center;
  color: var(--ink4);
  font-size: 13px;
  padding: 24px 0;
}

/* ── SHORT POST CARD ── */
.hf-card-short-body {
  padding: 12px 15px 14px;
}
.hf-short-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15.5px;
  color: var(--espresso);
  line-height: 1.6;
  padding-left: 14px;
  border-left: 3px solid var(--copper);
}
.ht {
  color: var(--copper);
  font-weight: 600;
  font-style: normal;
}

/* ── BLOG DIRECTORY CARD ── */
.hf-bdcard-hero {
  width: 100%;
  aspect-ratio: 16/7;
  overflow: hidden;
  background: var(--ruled);
}
.hf-bdcard-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hf-bdcard-hero a {
  display: block;
  width: 100%;
  height: 100%;
}
.hf-bdcard-hero-grad {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.hf-bdcard-hero-initials {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 900;
  color: rgba(255,255,255,.4);
}
.hf-bdcard-meta {
  padding: 12px 15px;
}
.hf-bdcard-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.hf-bdcard-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--espresso);
  text-decoration: none;
}
.hf-bdcard-name:hover { color: var(--copper); }
.hf-bdcard-desc {
  font-size: 12.5px;
  color: var(--ink3);
  line-height: 1.5;
  margin-bottom: 8px;
}
.hf-bdcard-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hf-bdcard-stat {
  font-size: 11px;
  color: var(--ink4);
}
.hf-bdcard-stat strong {
  color: var(--ink2);
  font-weight: 600;
}

/* ── PROMOTED / SPONSORED CARD ── */
.card--promoted { border-left: 3px solid var(--copper); }
.card--promoted .act-ico { background: rgba(196,98,45,.12); }
.badge.b-promo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--copper);
  background: rgba(196,98,45,.1);
  border: 1px solid rgba(196,98,45,.25);
  border-radius: 4px;
  padding: 1px 6px;
}

/* ── SOCIAL ACTIVITY CARD (following tab: liked / commented / topic) ── */

/* Label strip */
.sac-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 15px;
  border-bottom: 1px solid var(--ruled);
  font-size: 13px;
  color: var(--ink3);
}
.sac-label-left { display: flex; align-items: center; gap: 8px; }
.sac-label-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sac-icon-comment { background: #ede8f5; }
.sac-icon-like    { background: #fdecea; }
.sac-icon-repost  { background: rgba(15,122,90,.1); }
.sac-actor { color: var(--espresso); font-weight: 500; text-decoration: none; }
.sac-actor:hover { color: var(--copper); }
.sac-timestamp { font-size: 12px; color: var(--ink4); flex-shrink: 0; }

/* Comment bubble */
.sac-cmt-strip {
  margin: 10px 0 2px;
  background: var(--surface);
  border: 1px solid var(--ruled);
  border-radius: 9px;
  padding: 9px 12px;
  position: relative;
}
.sac-cmt-strip::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 18px;
  width: 9px;
  height: 9px;
  background: var(--surface);
  border-left: 1px solid var(--ruled);
  border-top: 1px solid var(--ruled);
  transform: rotate(45deg);
}
.sac-cmt-inner { display: flex; gap: 8px; align-items: flex-start; }
.sac-cmt-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  font-family: 'Playfair Display', serif;
}
.sac-cmt-name { font-size: 11.5px; font-weight: 500; color: var(--espresso); margin-bottom: 2px; }
.sac-cmt-text {
  font-size: 12.5px;
  color: var(--ink3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Topic follow card */
.card--sac-topic { border-left: 3px solid var(--copperP); }
.sac-topic-body { padding: 14px 15px; }
.sac-topic-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sac-topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--copperP);
  border: 1px solid rgba(196,98,45,.2);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--copper);
  text-decoration: none;
  transition: background .15s;
}
.sac-topic-badge:hover { background: rgba(196,98,45,.15); }
.sac-topic-stats { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.sac-stat-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink3); }
.sac-stat-avs { display: flex; }
.sac-stat-av {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--surface);
  margin-left: -5px;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-family: 'Playfair Display', serif;
}
.sac-stat-av:first-child { margin-left: 0; }
.sac-stat-av img { width: 100%; height: 100%; object-fit: cover; }

/* Topic follow CTA button */
.sac-follow-cta {
  padding: 8px 18px;
  background: var(--copper);
  color: #fff;
  border: 1.5px solid var(--copper);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  flex-shrink: 0;
  align-self: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.sac-follow-cta:hover { background: var(--copperL); border-color: var(--copperL); }
.sac-follow-cta.following {
  background: transparent;
  color: var(--copper);
}
.sac-follow-cta.following:hover { background: var(--copperP); }

/* ── FOLLOW BLOG / AUTHOR RICH CARDS ── */
.card--sac-follow-rich { border-left: 3px solid var(--copperP); }

.sac-follow-body { padding: 14px 16px; }

.sac-follow-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Blog logo tile — dark editorial */
.sac-blog-logo {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  flex-shrink: 0;
  background: #2c2420;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  color: #f5e6c8;
  letter-spacing: .02em;
  overflow: hidden;
}
.sac-blog-logo--img { object-fit: cover; }

/* Author avatar circle */
.sac-author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
}
.sac-author-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sac-follow-details { flex: 1; min-width: 0; }

.sac-follow-name {
  font-family: 'Playfair Display', serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink2);
  line-height: 1.2;
}
.sac-follow-name-link {
  color: var(--ink2);
  text-decoration: none;
}
.sac-follow-name-link:hover { color: var(--copper); }

.sac-author-handle {
  font-size: 12px;
  color: var(--ink4);
  margin-top: 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.sac-follow-desc {
  font-size: 12.5px;
  color: var(--ink3);
  line-height: 1.5;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sac-follow-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sac-follow-stat {
  font-size: 12px;
  color: var(--ink3);
}
.sac-follow-stat strong {
  color: var(--ink2);
  font-weight: 500;
}
.sac-follow-dot { color: var(--rule); font-size: 12px; }
.sac-follow-pill {
  display: inline-block;
  background: var(--copperP);
  border: 1px solid #e8d8c8;
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11.5px;
  color: var(--ink3);
}

/* Mutual followers row — shared with topic card, but scoped here */
.sac-mutual-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink3);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ruled);
}
.sac-mutual-text strong { color: var(--ink2); font-weight: 500; }


/* Inline copper link inside label strip */
.sac-follow-link {
  color: var(--copper);
  font-weight: 500;
  text-decoration: none;
}
.sac-follow-link:hover { text-decoration: underline; }

/* ── UPDATE / ANALYTICS NUDGE CARD ── */
.card--update { border-left: 3px solid var(--teal); }
.card--update .act-ico { background: rgba(42,176,158,.12); }
.card-update-body { padding: 0 0 6px; }
.card-update-intro {
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.55;
  margin-bottom: 12px;
}
.card-update-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.card-update-stat {
  background: var(--parchment);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
}
.card-update-num {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink2);
  line-height: 1.1;
}
.card-update-lbl {
  font-size: 10px;
  color: var(--ink4);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}
.card-update-change {
  font-size: 11px;
  color: var(--teal);
  font-weight: 600;
  margin-top: 3px;
}

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 1080px) {
  .layout { grid-template-columns: 252px 1fr; }
  .sr { display: none; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; padding: 16px 16px; }
  .sl { display: none; }
}
@media (max-width: 700px) {
  .layout { padding: 10px 12px; }
  .nav-date, .nav-divider { display: none; }
  .comp-icons { display: none; }
  .cbody { flex-direction: column; }
  .cimg { width: 100%; min-height: 140px; height: 140px; margin-right: 0; margin-bottom: 11px; }
  .ctitle { font-size: 15px !important; }
  .hf-cmt-modal { max-height: 95vh; border-radius: 16px 16px 0 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Recommendation entity cards (blog / user / topic suggestions)
   ═══════════════════════════════════════════════════════════════ */

.card--rec {
  border-left: 3px solid var(--copper, #C4622D);
}

.card--rec .act-ico.ai-rec {
  background: rgba(196,98,45,.12);
  color: var(--copper, #C4622D);
}

.rec-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 16px;
}

.rec-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
}
.rec-card-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.rec-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rec-card-info {
  flex: 1;
  min-width: 0;
}

.rec-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink2, #2C1A0E);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
}
.rec-card-name:hover { text-decoration: underline; }

.rec-card-desc {
  font-size: 12.5px;
  color: var(--ink4, #6B4E38);
  line-height: 1.5;
  margin: 4px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rec-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: var(--ink4, #6B4E38);
}

.rec-card-topic {
  background: var(--cream-deep, #EDE4D6);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
}

.rec-card-action {
  flex-shrink: 0;
}

/* Follow buttons inside rec cards — reuse existing patterns */
.rec-card-action .hf-bdcard-follow-btn,
.rec-card-action .hf-wf-follow-btn,
.rec-card-action .hf-topic-follow-btn {
  padding: 7px 16px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--copper, #C4622D);
  background: transparent;
  color: var(--copper, #C4622D);
  transition: all .15s;
  text-decoration: none;
  display: inline-block;
}
.rec-card-action .hf-bdcard-follow-btn:hover,
.rec-card-action .hf-topic-follow-btn:hover,
.rec-card-action .hf-bdcard-follow-btn.following,
.rec-card-action .hf-topic-follow-btn.following {
  background: var(--copper, #C4622D);
  color: #fff;
}

/* Hide posting time on For You tab (score-based, not chronological) */
.hf-foryou .act-time { display: none; }

/* ── User Recommendation Card (ruc-*) ── */

.ruc-profile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px 10px;
}

.ruc-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  text-decoration: none;
}
.ruc-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ruc-info {
  flex: 1;
  min-width: 0;
}

.ruc-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink2, #2C1A0E);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
}
.ruc-name:hover { text-decoration: underline; }

.ruc-handle {
  font-size: 11.5px;
  color: var(--ink4, #6B4E38);
  display: block;
  margin-top: 1px;
}

.ruc-bio {
  font-size: 12.5px;
  color: var(--ink3, #3A2415);
  line-height: 1.55;
  margin: 6px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ruc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: var(--ink4, #6B4E38);
}
.ruc-stats strong {
  color: var(--ink2, #2C1A0E);
}

.ruc-topic-tag {
  background: var(--cream-deep, #EDE4D6);
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
}

.ruc-action { flex-shrink: 0; padding-top: 4px; }

.ruc-action .hf-rec-user-follow-btn {
  padding: 7px 18px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--copper, #C4622D);
  background: transparent;
  color: var(--copper, #C4622D);
  transition: all .15s;
  text-decoration: none;
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
}
.ruc-action .hf-rec-user-follow-btn:hover,
.ruc-action .hf-rec-user-follow-btn.following {
  background: var(--copper, #C4622D);
  color: #fff;
}

/* Sample posts by this author */
.ruc-posts {
  padding: 0 16px 10px;
  border-top: 1px solid var(--ruled, rgba(0,0,0,.06));
  margin-top: 4px;
}

.ruc-post-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ruled, rgba(0,0,0,.04));
  text-decoration: none;
}
.ruc-post-row:last-child { border-bottom: none; }

.ruc-post-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink2, #2C1A0E);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ruc-post-row:hover .ruc-post-title { color: var(--copper, #C4622D); }

/* ── Topic Recommendation Card (rtc-*) ── */

.rtc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 0;
}

.rtc-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rtc-header-info {
  flex: 1;
  min-width: 0;
}

.rtc-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: block;
  line-height: 1.3;
}
.rtc-name:hover { text-decoration: underline; text-underline-offset: 2px; }

.rtc-stats {
  display: flex;
  gap: 10px;
  margin-top: 3px;
  font-size: 11px;
  color: rgba(255,255,255,.5);
}
.rtc-stats span { white-space: nowrap; }

.rtc-header-action { flex-shrink: 0; }

.rtc-follow-btn {
  padding: 7px 18px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  transition: all .15s;
  text-decoration: none;
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
}
.rtc-follow-btn:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.6); }
.rtc-follow-btn.following { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }

/* Sample posts list */
.rtc-posts {
  padding: 6px 16px 2px;
}

.rtc-post-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ruled, rgba(0,0,0,.06));
  text-decoration: none;
  transition: background .1s;
}
.rtc-post-row:last-child { border-bottom: none; }
.rtc-post-row:hover { background: rgba(0,0,0,.015); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }

.rtc-post-ava {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}
.rtc-post-ava img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.rtc-post-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rtc-post-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2, #2C1A0E);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rtc-post-author {
  font-size: 11px;
  color: var(--ink4, #6B4E38);
}

/* See all link footer */
.rtc-footer {
  padding: 8px 16px 12px;
}

.rtc-see-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--copper, #C4622D);
  text-decoration: none;
}
.rtc-see-all:hover { text-decoration: underline; }

/* Responsive: stack on small screens */
@media (max-width: 600px) {
  .rec-card-body { flex-wrap: wrap; }
  .rec-card-action { width: 100%; margin-top: 6px; }
  .rec-card-action button,
  .rec-card-action a { width: 100%; text-align: center; }
  .rtc-stats { flex-wrap: wrap; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile touch-target overrides (44px minimum)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Nav handled by app.css mobile overrides */

  /* Card action buttons (like, share, comment, repost) */
  .ca,
  .hf-like-btn, .hf-bp-like-btn, .hf-sp-like-btn,
  .hf-share-btn,
  .hf-open-comments-btn, .hf-bp-comments-btn, .hf-sp-comments-btn, .hf-activity-comments-btn,
  .hf-activity-like-btn,
  .hf-repost-btn { min-height: 44px; padding: 10px 6px; display: inline-flex; align-items: center; }

  /* Save/bookmark icon buttons */
  .hf-rxn-save, .hf-save-btn, .hf-bp-save-btn, .hf-sp-save-btn, .hf-blog-save-btn {
    width: 44px; height: 44px;
  }

  /* Follow buttons */
  .follow-btn { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  .hf-bdcard-follow-btn { min-height: 44px; padding: 10px 16px; }
  .hf-tb-follow-btn { min-height: 44px; padding: 8px 14px; font-size: 12px; }

  /* Filter pills */
  .pill { min-height: 44px; padding: 10px 14px; }

  /* CTA buttons */
  .cta, .cta-out { min-height: 44px; padding: 10px 16px; }

  /* Comment modal close */
  .hf-cmt-close { width: 44px; height: 44px; }

  /* Tab navigation */
  .tnav { min-height: 44px; padding: 12px 16px; }

  /* Onboarding responsive */
  .ob-topics-grid { grid-template-columns: 1fr; }
  .ob-writers-grid { grid-template-columns: 1fr; }
  .ob-blogs-grid { grid-template-columns: 1fr; }
}

/* ═══ Onboarding — follow to build your feed ═══ */
.ob-wrap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.ob-hero {
  text-align: center;
  padding: 32px 24px 24px;
  border-bottom: 1px solid var(--rule);
}
.ob-hero-icon { margin-bottom: 12px; line-height: 1; }
.ob-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--espresso, #2C1F14);
  margin: 0 0 6px;
}
.ob-hero-sub {
  font-size: 14px;
  color: var(--ink3, #777);
  margin: 0;
  line-height: 1.5;
}
.ob-section { padding: 20px 24px; border-bottom: 1px solid var(--rule); }
.ob-section:last-of-type { border-bottom: none; }
.ob-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.ob-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--espresso, #2C1F14);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ob-see-all {
  font-size: 12px;
  color: var(--accent, #e8553d);
  text-decoration: none;
  font-weight: 500;
}
.ob-see-all:hover { text-decoration: underline; }

/* Topics grid */
.ob-topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ob-topic-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-align: center;
  transition: border-color 0.15s;
}
.ob-topic-chip:hover { border-color: var(--accent); }
.ob-topic-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--espresso, #2C1F14);
  line-height: 1.3;
}
.ob-topic-meta {
  font-size: 11px;
  color: var(--ink3, #777);
}

/* Writers grid */
.ob-writers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ob-writer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 8px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  gap: 4px;
  transition: border-color 0.15s;
}
.ob-writer-card:hover { border-color: var(--accent); }
.ob-writer-ava {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ob-writer-ava img { width: 100%; height: 100%; object-fit: cover; }
.ob-writer-init {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
.ob-writer-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--espresso, #2C1F14);
  text-decoration: none;
  line-height: 1.3;
}
.ob-writer-name:hover { color: var(--accent); }
.ob-writer-meta {
  font-size: 11px;
  color: var(--ink3, #777);
}

/* Blogs grid */
.ob-blogs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ob-blog-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  transition: border-color 0.15s;
}
.ob-blog-card:hover { border-color: var(--accent); }
.ob-blog-ava {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--rule);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob-blog-ava img { width: 100%; height: 100%; object-fit: cover; }
.ob-blog-init {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.ob-blog-info { flex: 1; min-width: 0; }
.ob-blog-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--espresso, #2C1F14);
  text-decoration: none;
  display: block;
  line-height: 1.3;
}
.ob-blog-name:hover { color: var(--accent); }
.ob-blog-host {
  font-size: 11px;
  color: var(--ink3, #777);
  display: block;
}
.ob-blog-meta {
  font-size: 11px;
  color: var(--ink3, #777);
}

/* Follow button */
.ob-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid var(--accent, #e8553d);
  border-radius: 6px;
  background: transparent;
  color: var(--accent, #e8553d);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 6px;
  white-space: nowrap;
}
.ob-follow-btn:hover {
  background: var(--accent, #e8553d);
  color: #fff;
}
.ob-follow-btn.followed {
  background: var(--teal, #2ab09e);
  border-color: var(--teal, #2ab09e);
  color: #fff;
}
.ob-follow-btn.followed svg { display: none; }

/* Footer */
.ob-footer {
  padding: 16px 24px;
  text-align: center;
}
.ob-browse-btn {
  display: inline-block;
  padding: 10px 28px;
  background: var(--accent, #e8553d);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}
.ob-browse-btn:hover { opacity: 0.9; }