/* Social media manager guide: month calendar, time split, report cards. */
.sm-guide { --sm-plan:#6b62d6; --sm-create:#d9822b; --sm-engage:#2f8f83; --sm-ads:#cc4b6a; --sm-report:#3e7bd6; }
.sm-guide .sm-t-plan { --c:var(--sm-plan); } .sm-guide .sm-t-create { --c:var(--sm-create); } .sm-guide .sm-t-engage { --c:var(--sm-engage); } .sm-guide .sm-t-ads { --c:var(--sm-ads); } .sm-guide .sm-t-report { --c:var(--sm-report); }
.sm-guide .sm-cal { margin:44px 0; padding:26px; border-radius:26px; border:1px solid var(--fe-border); background:var(--fe-surface); color:var(--fe-ink); scroll-margin-top:110px; }
.sm-guide .sm-title { margin-top:6px; font:400 clamp(1.6rem,3vw,2.1rem)/1.1 'DM Serif Display',serif; }
.sm-guide .sm-sub { margin-top:6px; color:var(--fe-muted); font-size:.92rem; line-height:1.55; }
.sm-guide .sm-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; }
.sm-guide .sm-legend span { display:flex; align-items:center; gap:6px; color:var(--fe-muted); font-size:.78rem; font-weight:700; }
.sm-guide .sm-legend span::before { content:""; width:10px; height:10px; border-radius:3px; background:var(--c); }
.sm-guide .sm-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin-top:18px; }
.sm-guide .sm-wd { padding:4px; color:var(--fe-muted); font:800 .7rem 'Manrope',sans-serif; letter-spacing:.06em; text-align:center; text-transform:uppercase; }
.sm-guide .sm-c { display:grid; align-content:start; gap:3px; min-height:78px; padding:8px; border-radius:12px; border:1px solid var(--fe-border); background:var(--fe-raised); color:var(--fe-ink); text-align:left; }
.sm-guide .sm-c span { font:800 .82rem 'Manrope',sans-serif; }
.sm-guide .sm-c small { font:600 .68rem/1.25 'Manrope',sans-serif; color:var(--fe-muted); }
.sm-guide .sm-empty { opacity:.45; }
.sm-guide button.sm-c { border-left:4px solid var(--c); cursor:pointer; transition:transform .2s,box-shadow .2s; }
.sm-guide button.sm-c:hover { transform:translateY(-2px); }
.sm-guide button.sm-c.is-on { background:var(--c); border-color:var(--c); color:#fff; box-shadow:0 10px 24px -12px var(--c); }
.sm-guide button.sm-c.is-on small { color:rgba(255,255,255,.85); }
.sm-guide button:focus-visible { outline:3px solid var(--fe-accent-2); outline-offset:2px; }
.sm-guide .sm-detail { display:grid; gap:6px; margin-top:14px; padding:20px 22px; border-radius:20px; border-left:6px solid var(--c); background:var(--fe-raised); font-size:.95rem; line-height:1.6; animation:sm-in .3s ease; }
@keyframes sm-in { from { opacity:0; transform:translateY(6px); } }
.sm-guide .sm-tag { color:var(--c); font:800 .72rem 'Manrope',sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.sm-guide .sm-detail b { font:400 1.4rem/1.2 'DM Serif Display',serif; }
.sm-guide .sm-detail > span:nth-of-type(2) { color:var(--fe-muted); }
.sm-guide .sm-nav { display:flex; justify-content:space-between; gap:8px; margin-top:8px; }
.sm-guide .sm-nav button { min-height:40px; padding:0 16px; border:1px solid var(--fe-border); border-radius:999px; background:var(--fe-surface); color:var(--fe-ink); font:700 .84rem 'Manrope',sans-serif; cursor:pointer; }
.sm-guide .sm-split { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:22px 0; }
.sm-guide .sm-split > div, .sm-guide .sm-report > div { display:grid; align-content:start; gap:6px; padding:16px; border-radius:16px; border:1px solid var(--fe-border); background:var(--fe-raised); color:var(--fe-muted); font-size:.86rem; line-height:1.5; }
.sm-guide .sm-split > div { border-top:5px solid var(--c); }
.sm-guide .sm-split b, .sm-guide .sm-report b { color:var(--fe-ink); font-size:.98rem; }
.sm-guide .sm-report { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:22px 0; }
.sm-guide .sm-report > div:last-child { grid-column:1 / -1; background:color-mix(in srgb,var(--fe-accent) 10%,var(--fe-raised)); }
@media (max-width:860px) { .sm-guide .sm-split { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) {
  .sm-guide .sm-cal { padding:14px; margin-left:-6px; margin-right:-6px; }
  .sm-guide .sm-grid { gap:4px; }
  .sm-guide .sm-c { min-height:46px; padding:6px 4px; text-align:center; }
  .sm-guide .sm-c small { display:none; }
  .sm-guide .sm-wd { font-size:.6rem; padding:2px; }
  .sm-guide .sm-split, .sm-guide .sm-report { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .sm-guide .sm-detail { animation:none; } }