/* Stay Home Network — mobile polish + motion (2026-10-06). Loaded after shn-2026.css. Phone rules only (<=767px) unless noted. */
:root{--shn-m-ease:cubic-bezier(.22,1,.36,1)}

/* ---------- motion primitives (all sizes; honours reduced-motion) ---------- */
@keyframes shnFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes shnSlideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes shnPop{0%{transform:scale(1)}40%{transform:scale(.92)}100%{transform:scale(1)}}
.shn-reveal{opacity:0;transform:translateY(14px)}
.shn-reveal.shn-in{animation:shnFadeUp .55s var(--shn-m-ease) both}
@media (prefers-reduced-motion:reduce){.shn-reveal,.shn-reveal.shn-in{opacity:1!important;transform:none!important;animation:none!important}
  .shn-drawer-nav>*{animation:none!important}}

/* ---------- post action bar: Like / Comment / Share as real buttons (all sizes) ---------- */
.post_foot_actions{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
.post_foot_actions>#wo_post_stat_button.stats{display:flex!important;flex:1 1 100%;gap:8px;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.post_foot_actions>#wo_post_stat_button.stats>.stat-item{display:flex!important;flex:1 1 0;align-items:center;justify-content:center;gap:7px;width:auto!important;min-width:0;min-height:42px;margin:0!important;padding:8px 6px!important;border:1px solid #eef0f5!important;border-radius:12px!important;background:#f7f8fb!important;color:#475467!important;font-size:13px;font-weight:600;line-height:1;transition:background-color .18s ease,color .18s ease,transform .18s var(--shn-m-ease);cursor:pointer;-webkit-tap-highlight-color:transparent}
.post_foot_actions>#wo_post_stat_button.stats>.stat-item svg{flex:0 0 auto;width:20px!important;height:20px!important}
.post_foot_actions>#wo_post_stat_button.stats>.stat-item .like-btn-mobile{display:inline!important}
.post_foot_actions>#wo_post_stat_button.stats .like-btn,.post_foot_actions>#wo_post_stat_button.stats [class^="status-reaction"]{display:inline-flex!important;align-items:center;gap:6px;white-space:nowrap}
.post_foot_actions>#wo_post_stat_button.stats>.stat-item:hover{background:#fff1f3!important;color:var(--shn-primary,#e11d48)!important;border-color:#ffd5dc!important}
.post_foot_actions>#wo_post_stat_button.stats>.stat-item:active{animation:shnPop .28s var(--shn-m-ease)}
.post_foot_actions>#wo_post_stat_button.stats .reactions-box{bottom:46px}
.post_foot_actions>:not(#wo_post_stat_button){order:-1;margin-left:auto;font-size:12px;color:#667085}
.night-mode .post_foot_actions>#wo_post_stat_button.stats>.stat-item{background:#1f2430!important;border-color:#2a3040!important;color:#cbd5e1!important}

@media (max-width:767px){
  html,body{max-width:100%;overflow-x:hidden}
  img,video,iframe{max-width:100%;height:auto}
  .post .post-file img,.post img.image-file{max-width:100%!important;height:auto!important}

  /* ---------- phone drawer (☰) ---------- */
  .left-sidebar.wo_new_left_side{width:min(86vw,320px)!important;padding:14px 12px calc(24px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;background:#fff!important;box-shadow:24px 0 60px rgba(17,24,39,.22)!important;transition:transform .32s var(--shn-m-ease)!important}
  .left-sidebar.wo_new_left_side .shn-drawer-nav{display:grid!important;gap:3px;padding:6px 4px!important;border:0!important;box-shadow:none!important;background:transparent!important}
  .shn-drawer-nav>a{min-height:46px!important;font-size:14px!important;border-radius:12px!important}
  .shn-drawer-nav>a i{font-size:17px!important}
  .shn-drawer-nav .shn-rail-label{margin:14px 10px 4px!important}
  .shn-drawer-nav .shn-rail-brand{padding:4px 6px 8px;border-bottom:1px solid #f0f1f5;margin-bottom:6px!important}
  .shn-drawer-nav .shn-rail-profile{position:sticky;bottom:0;margin-top:12px!important;box-shadow:0 -8px 20px rgba(255,255,255,.9)}
  body.side_open .shn-drawer-nav>*{animation:shnSlideIn .38s var(--shn-m-ease) both}
  body.side_open .shn-drawer-nav>*:nth-child(-n+6){animation-delay:.04s}
  body.side_open .shn-drawer-nav>*:nth-child(n+7):nth-child(-n+12){animation-delay:.08s}
  body.side_open .shn-drawer-nav>*:nth-child(n+13){animation-delay:.12s}
  .slide_menu_backdrop{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .night-mode .left-sidebar.wo_new_left_side{background:#141821!important}

  /* ---------- feed spacing ---------- */
  .shn-home{padding:8px 8px 96px!important}
  .shn-app-shell .middlecol .wow_content,.shn-app-shell .middlecol .wo_post,.middlecol .post .panel{border-radius:16px!important}
  /* single-story card: compact strip instead of a tall empty box */
  .wow_story_list,.stories_list,.wo_stories{min-height:0!important}
  .publisher-box{padding:12px!important}

  /* ---------- cookie bar + install button above the bottom dock ---------- */
  .cc-window.cc-floating{left:10px!important;right:10px!important;bottom:calc(86px + env(safe-area-inset-bottom))!important;max-width:none!important;padding:12px 14px!important;border-radius:14px!important;font-size:13px!important;line-height:1.45!important;box-shadow:0 14px 40px rgba(17,24,39,.25)!important;animation:shnFadeUp .4s var(--shn-m-ease) both}
  body:not(:has(.shn-mobile-dock)) .cc-window.cc-floating{bottom:calc(10px + env(safe-area-inset-bottom))!important}
  .cc-window .cc-compliance{margin-top:8px}
  .cc-window .cc-btn{padding:6px 14px!important;border-radius:10px!important;font-size:13px!important}
  #shn-install-app{bottom:calc(86px + env(safe-area-inset-bottom))!important;right:12px!important;padding:9px 14px!important;font-size:13px!important}
  body:has(.cc-window:not(.cc-invisible)) #shn-install-app{display:none!important}
  body:not(:has(.shn-mobile-dock)) #shn-install-app{bottom:calc(14px + env(safe-area-inset-bottom))!important}
  .shn-mobile-dock{padding-bottom:calc(7px + env(safe-area-inset-bottom))!important}

  /* ---------- blog article readability ---------- */
  .read-blog-desc,.blog-content,.wo_blog_content,.read-blog-container .content,.blog_post_content{text-align:left!important;-webkit-hyphens:auto;hyphens:auto;font-family:Poppins,system-ui,sans-serif!important;font-size:15.5px!important;line-height:1.75!important}
  .read-blog-container p,.read-blog-container li{text-align:left!important}
  .read-blog-container h2{font-size:22px!important;line-height:1.3!important;font-family:Poppins,system-ui,sans-serif!important}
  .read-blog-container h3{font-size:18px!important;line-height:1.35!important}
  .read-blog-container table{display:block;overflow-x:auto;white-space:normal}

  /* ---------- welcome / landing ---------- */
  .shn-landing{padding:8px!important}
  .shn-landing .shn-landing-grid{display:flex!important;flex-direction:column;gap:10px}
  .shn-landing .shn-landing-showcase{order:1}
  .shn-landing .shn-auth-panel{order:2;margin-top:0!important;animation:shnFadeUp .5s .1s var(--shn-m-ease) both}
  .shn-landing .shn-landing-hero{padding:22px 18px 20px!important}
  .shn-landing .logo{margin-bottom:22px!important}
  .shn-landing .shn-landing-hero>h1{font-size:34px!important;margin:14px 0 10px!important}
  .shn-landing .shn-landing-hero>p,.shn-landing .feature_access_shell_head p,.shn-landing .feature_access_tile span{text-transform:none!important}
  .shn-landing .shn-landing-hero>h1,.shn-landing .shn-landing-hero>p{animation:shnFadeUp .5s var(--shn-m-ease) both}
  .shn-landing-proof{gap:14px!important;margin:18px 0 14px!important}
  /* feature tiles: compact 2-column grid, descriptions hidden on phones */
  .shn-landing .feature_access_shell{padding:12px!important;border-radius:18px!important}
  .shn-landing .feature_access_shell_head{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .shn-landing .feature_access_shell_head p{display:none}
  .shn-landing .feature_access_shell_head h3{font-size:16px!important;margin:2px 0 0!important}
  .shn-landing .feature_access_grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:10px}
  .shn-landing .feature_access_tile{min-height:0!important;padding:11px 12px!important;border-radius:12px!important}
  .shn-landing .feature_access_tile strong{font-size:13px!important}
  .shn-landing .feature_access_tile span{display:none!important}
  /* international access box */
  .shn-landing [class*="intl"],.shn-landing [class*="international"]{line-height:1.5!important}
  .shn-landing [class*="intl"] p,.shn-landing [class*="international"] p{margin:6px 0!important;line-height:1.5!important}
}

/* ---- round 2 tweaks (2026-10-06) ---- */
.post_foot_actions>#wo_post_stat_button.stats .like-btn,.post_foot_actions>#wo_post_stat_button.stats .like-btn *{font-size:13px!important;color:inherit;visibility:visible!important}
.post_foot_actions>#wo_post_stat_button.stats [class^="status-reaction"]{font-size:13px!important;font-weight:600}
@media (max-width:767px){
  .shn-drawer-nav .shn-rail-profile{position:static!important;box-shadow:none!important}
  .cc-window.cc-floating{width:auto!important;max-width:calc(100% - 20px)!important;box-sizing:border-box!important}
  .cc-window .cc-message{margin-bottom:6px!important}
  .shn-landing .feature_access_count{color:#fff!important;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.22)}
  .shn-landing .feature_access_shell_head{text-align:left}
}
/* blog article typography (all sizes) */
.wo_read_blog_bg_img h2,.read-blog-container h2:first-of-type,.blog-heading h2{font-family:Poppins,system-ui,sans-serif!important;letter-spacing:-.02em;font-weight:600!important}
.read-blog .read-blog-head,.read-blog .read-blog-head *{font-style:normal!important;font-weight:500!important;color:#475467!important;font-family:Poppins,system-ui,sans-serif!important;line-height:1.65!important}
.read-blog .read-content,.read-blog .read-content p,.read-blog .read-content li{text-align:left!important;font-family:Poppins,system-ui,sans-serif!important}
.read-blog .read-content h2,.read-blog .read-content h3{font-family:Poppins,system-ui,sans-serif!important;font-weight:600!important;letter-spacing:-.01em}
@media (max-width:767px){.read-blog .read-content{font-size:15px!important;line-height:1.75!important}.read-blog .read-content h2{font-size:21px!important;line-height:1.3!important}}