/* Minimal; we’ll style later */
.fasto-masto { max-width: 760px; margin: 1rem auto; padding: 0 1rem; }

/* LIST (SSR) */
.fasto-masto-list .masto-item { margin: .9rem 0; }
.fasto-masto-list .masto-body { line-height: 1.45; }
.fasto-masto-list .masto-time { display:inline-block; margin-top:.25rem; font-size:.9rem; opacity:.8; }

/* UPDATES (client) */
.fasto-masto-updates .masto-group { margin: 1.6rem 0 .6rem; font-weight: 700; font-size: 1rem; opacity: .9; }
.fasto-masto-updates .masto-card { opacity:0; transform: translateY(24px); transition: all .45s ease;
  background: rgba(255,255,255,.05); border-radius: 10px; padding: .8rem 1rem; margin-bottom: .8rem; }
.fasto-masto-updates .masto-card.visible { opacity:1; transform:none; }
.fasto-masto-updates .masto-card p { margin: 0 0 .35rem; line-height: 1.5; }
.fasto-masto-updates .masto-card time { font-size:.9rem; opacity:.8; }

/* Dark-friendly default vars (optional to override globally) */
.fasto-dark .fasto-masto-updates .masto-card { background: rgba(255,255,255,.06); }


.fasto-masto{ max-width: 980px; margin: 0 auto; }
.fasto-masto-list .masto-item{
  background: var(--fasto-card); border:1px solid var(--fasto-border);
  border-radius:14px; padding:12px 14px; margin:.75rem 0;
}
.fasto-masto-updates .masto-group{ margin:1.6rem 0 .6rem; font-weight:800; letter-spacing:.3px; opacity:.9; }
.fasto-masto-updates .masto-card{
  background: var(--fasto-card); border:1px solid var(--fasto-border);
  border-radius:14px; padding:12px 14px; margin:.65rem 0;
  opacity:0; transform:translateY(20px); transition: all .45s ease; 
}
.fasto-masto-updates .masto-card.visible{ opacity:1; transform:none; }

/* ===============================
   FASTO — Mastodon Updates preset
   (opt‑in: add class="masto-clean [light|dark] [compact]")
   =============================== */

.fasto-masto-updates.masto-clean{
  max-width: 820px;
  margin: 0 auto;
  padding: 12px 18px 56px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Group headings (Today / Yesterday / …) */
.fasto-masto-updates.masto-clean .masto-group{
  margin: 26px 0 12px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1rem;
}

/* Cards (scoped so it doesn't affect your existing style) */
.fasto-masto-updates.masto-clean .masto-card{
  border-radius: 14px;
  padding: 14px 16px;
  margin: 10px 0;
  border: 1px solid;               /* color set per theme below */
  opacity: 0;                       /* your IO reveal keeps working */
  transform: translateY(18px);
  transition: opacity .35s ease, transform .35s ease, box-shadow .2s ease, background .2s ease;
}
.fasto-masto-updates.masto-clean .masto-card.visible{
  opacity: 1; transform: none;
}
.fasto-masto-updates.masto-clean .masto-card p{
  margin: 0 0 8px 0; line-height: 1.55; font-size: 15.5px;
}
.fasto-masto-updates.masto-clean .masto-card time{
  font-size: 13px; opacity: .85;
}
.fasto-masto-updates.masto-clean .masto-card a{
  text-decoration: none;            /* rely on color to indicate link */
}

/* Compact toggle */
.fasto-masto-updates.masto-clean.compact .masto-card{
  padding: 12px 14px;
}

/* ---------- LIGHT (white page) ---------- */
.fasto-masto-updates.masto-clean.light .masto-group{ color:#2b3a44; }
.fasto-masto-updates.masto-clean.light .masto-card{
  background:#fff;
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.fasto-masto-updates.masto-clean.light .masto-card:hover{
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.fasto-masto-updates.masto-clean.light .masto-card p{ color:#1f2b33; }
.fasto-masto-updates.masto-clean.light .masto-card time{ color:#516672; }
.fasto-masto-updates.masto-clean.light .masto-card a{ color:#0077cc; }
.fasto-masto-updates.masto-clean.light .masto-card a:hover{ color:#005fa3; }

/* ---------- DARK (optional) ---------- */
.fasto-masto-updates.masto-clean.dark .masto-group{ color:#cfe8fb; }
.fasto-masto-updates.masto-clean.dark .masto-card{
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 8px 22px rgba(0,0,0,.38);
}
.fasto-masto-updates.masto-clean.dark .masto-card:hover{
  background: rgba(255,255,255,.07);
}
.fasto-masto-updates.masto-clean.dark .masto-card p{ color:#e9f6ff; }
.fasto-masto-updates.masto-clean.dark .masto-card time{ color:#9fc4d9; }
.fasto-masto-updates.masto-clean.dark .masto-card a{ color:#86e1ff; }
.fasto-masto-updates.masto-clean.dark .masto-card a:hover{ color:#b1ecff; }

/* Mobile polish */
@media (max-width: 680px){
  .fasto-masto-updates.masto-clean{ padding: 10px 12px 50px; }
  .fasto-masto-updates.masto-clean .masto-card{ border-radius: 12px; }
}