/* Blixtflow – sidan om sociala medier: skrivrutan som syns på båda plattformarna, inlägget som delar sig
   (social.js sätter --sp), Instagram-gränserna, månadskalendern och "Försök igen". Bygger på ai.css. */

.soc-av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(135deg, #F4A28C, #C8796A); }
.soc-mini { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; font-family: Arial, sans-serif; font-style: normal; font-weight: 800; color: #fff; }
.soc-mini .ic { width: 14px; height: 14px; }
.soc-mini--fb { background: #1877F2; }
.soc-mini--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.soc-album { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 150px; }
.soc-album i { background: linear-gradient(135deg, #C8A8F2, #7E45C9); }
.soc-album i:first-child { grid-row: span 2; background: linear-gradient(135deg, #F8D9CC, #C8796A); }
.soc-album i:nth-child(3) { background: linear-gradient(135deg, #F2FAA3, #9B5DE5 80%); }
.soc-album i:nth-child(4) { display: none; }
.soc-dots { position: absolute; left: 50%; bottom: 10px; display: flex; gap: 4px; translate: -50% 0; }
.soc-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.soc-dots i.is-on { background: #fff; }
.soc-dots--dark i { background: #D9CCE6; }
.soc-dots--dark i.is-on { background: #0095F6; }

/* ==========================================================================
   1. Hjälten
   ========================================================================== */
.soc-show { position: relative; display: grid; gap: 14px; padding-bottom: 20px; }
.soc-composer { padding: 16px; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95); }
.motion .soc-composer { animation: chp-rise 1.1s .2s var(--ease-out) backwards; }
.soc-composer__acc { display: flex; flex-wrap: wrap; gap: 8px; }
.soc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 12px; font-size: .8rem; font-weight: 700; box-shadow: inset 0 0 0 1px var(--line); }
.soc-chip i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-family: Arial, sans-serif; font-style: normal; font-weight: 800; color: #fff; }
.soc-chip--fb i { background: #1877F2; }
.soc-chip--ig i { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.soc-chip i .ic { width: 14px; height: 14px; }
.soc-chip b { position: relative; width: 28px; height: 16px; border-radius: 8px; background: var(--ok); }
.soc-chip b::after { content: ""; position: absolute; top: 2px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.soc-composer__text { min-height: 3.2em; margin: 12px 0; font-size: .95rem; line-height: 1.5; }
.soc-composer__text.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--primar-ink); animation: caret .8s steps(1) infinite; }
.soc-composer__foot { display: flex; align-items: center; gap: 8px; }
.soc-composer__foot span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px; font-size: .78rem; font-weight: 650; color: var(--primar-ink); background: var(--soft); }
.soc-composer__foot .ic { width: 14px; height: 14px; }
.soc-composer__foot b { margin-left: auto; padding: 8px 14px; border-radius: 11px; font-size: .82rem; color: #fff; background: var(--primar-ink); }
.soc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.soc-post { overflow: hidden; border-radius: 18px; color: #1c1e21; background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); font-family: system-ui, "Segoe UI", sans-serif; }
.motion .soc-post--fb { animation: chp-rise 1s .5s var(--ease-out) backwards; }
.motion .soc-post--ig { animation: chp-rise 1s .7s var(--ease-out) backwards; }
.soc-post__head { display: flex; align-items: center; gap: 8px; padding: 10px; font-size: .78rem; }
.soc-post__head span { display: grid; }
.soc-post__head small { font-size: .66rem; color: #65676b; }
.soc-post__head .soc-av { width: 26px; height: 26px; font-size: .7rem; }
.soc-post__text { padding: 0 10px 8px; font-size: .72rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.soc-post__text--ig { padding-top: 4px; -webkit-line-clamp: 2; }
.soc-post__bar { display: flex; justify-content: space-around; padding: 8px; font-size: .7rem; color: #65676b; border-top: 1px solid #e4e6eb; }
.soc-square { position: relative; aspect-ratio: 1; background: linear-gradient(135deg, #F8D9CC, #C8796A); }
.soc-post__icons { padding: 6px 10px 0; font-size: .9rem; letter-spacing: 6px; }
.soc-post__likes { padding: 2px 10px 0; font-size: .7rem; font-weight: 700; }
.soc-bx { position: absolute; right: -30px; top: -60px; z-index: 3; width: 120px; }
@media (max-width: 599px) { .soc-bx { right: -10px; top: -70px; width: 90px; } .soc-post__text { -webkit-line-clamp: 2; } }

/* ==========================================================================
   2. Ett blir två
   ========================================================================== */
.soc-split { --sp: 1; background: var(--ljus); }
.soc-stage { position: relative; height: 420px; width: min(100% - 2 * var(--gutter), 1000px); margin-inline: auto; }
.soc-card { position: absolute; left: 50%; top: 50%; width: 300px; padding: 14px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px rgba(44, 14, 61, .5); translate: -50% -50%; }
.soc-card__label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .82rem; font-weight: 800; }
.soc-card__txt { margin-top: 10px; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
.soc-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.soc-grid4 i { aspect-ratio: 1.2; border-radius: 8px; background: linear-gradient(135deg, #C8A8F2, #7E45C9); }
.soc-grid4 i:nth-child(1) { background: linear-gradient(135deg, #F8D9CC, #C8796A); }
.soc-grid4 i:nth-child(3) { background: linear-gradient(135deg, #F2FAA3, #9B5DE5 80%); }
.soc-grid4 i:nth-child(4) { background: linear-gradient(135deg, #3A1650, #9B5DE5); }
.soc-card--src { z-index: 3; opacity: calc(1 - var(--sp) * 1.6); transform: scale(calc(1 - var(--sp) * .3)); }
.soc-card--fb, .soc-card--ig { opacity: clamp(0, var(--sp) * 2 - .3, 1); }
.soc-card--fb { transform: translateX(calc(var(--sp) * -190px)) rotate(calc(var(--sp) * -4deg)); }
.soc-card--ig { transform: translateX(calc(var(--sp) * 190px)) rotate(calc(var(--sp) * 4deg)); }
.soc-album--big { height: 230px; border-radius: 12px; overflow: hidden; }
.soc-album--big i:nth-child(4) { display: block; grid-column: 2; }
.soc-album--big { grid-template-rows: 1fr 1fr 1fr; }
.soc-album--big i:first-child { grid-row: span 3; }
.soc-carousel { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 12px; }
.soc-carousel__track { display: flex; width: 400%; height: 100%; transform: translateX(calc(var(--slide, 0) * -25%)); transition: transform .6s var(--ease-out); }
.soc-carousel__track i { flex: 1; background: linear-gradient(135deg, #F8D9CC, #C8796A); }
.soc-carousel__track i:nth-child(2) { background: linear-gradient(135deg, #C8A8F2, #7E45C9); }
.soc-carousel__track i:nth-child(3) { background: linear-gradient(135deg, #F2FAA3, #9B5DE5 80%); }
.soc-carousel__track i:nth-child(4) { background: linear-gradient(135deg, #3A1650, #9B5DE5); }
.soc-card--ig .soc-dots { position: static; justify-content: center; margin-top: 10px; translate: none; }
.soc-reel { position: absolute; left: 50%; bottom: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 9px; border-radius: 999px; font-weight: 800; color: #fff; background: var(--natt); translate: -50% 0; opacity: clamp(0, var(--sp) * 3 - 2, 1); transform: translateY(calc((1 - var(--sp)) * 20px)); }
.soc-reel span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .7rem; color: var(--natt); background: var(--gnista); }
@media (max-width: 699px) {
  .soc-stage { height: 560px; }
  .soc-card { width: 240px; }
  .soc-card--fb { transform: translateY(calc(var(--sp) * -130px)) translateX(calc(var(--sp) * -40px)) rotate(calc(var(--sp) * -4deg)); }
  .soc-card--ig { transform: translateY(calc(var(--sp) * 120px)) translateX(calc(var(--sp) * 40px)) rotate(calc(var(--sp) * 4deg)); }
  .soc-album--big { height: 150px; }
  .soc-card--ig .soc-carousel { aspect-ratio: 1.4; }
  .soc-reel { bottom: -20px; }
}

/* ==========================================================================
   3. Instagram-gränserna
   ========================================================================== */
.soc-limits { background: linear-gradient(180deg, var(--natt), #321147); }
.soc-check { --focus: var(--gnista); display: grid; gap: 16px; padding: 22px; border-radius: 28px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--on-dark-line), 0 50px 100px -40px rgba(0, 0, 0, .8); }
.soc-check textarea { width: 100%; min-height: 150px; padding: 16px; border: 0; border-radius: 18px; font: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink); background: #fff; resize: vertical; }
.soc-check textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(242, 250, 163, .5); }
.soc-rings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.soc-ring { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--on-dark-2); }
.soc-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.soc-ring circle { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 5; }
.soc-ring .soc-ring__arc { stroke: var(--gnista); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v, 0) * 100); transition: stroke-dashoffset .4s var(--ease-out), stroke .3s; }
.soc-ring.is-warn .soc-ring__arc { stroke: #F59E0B; }
.soc-ring.is-over .soc-ring__arc { stroke: #F87171; }
.soc-ring b { color: #fff; font-variant-numeric: tabular-nums; }
.soc-state { margin-left: auto; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 800; color: var(--natt); background: #7BE3AE; }
.soc-state.is-warn { background: #FCD34D; }
.soc-state.is-over { color: #fff; background: #DC2626; }
.soc-check__btns .ic { width: 16px; height: 16px; }

/* ==========================================================================
   4. Månadskalendern
   ========================================================================== */
.soc-month { max-width: 980px; margin-inline: auto; padding: 22px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.soc-month__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.soc-month__h > b { font-size: 1.4rem; font-weight: 800; }
.soc-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--muted); }
.soc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.soc-legend i { width: 10px; height: 10px; border-radius: 3px; }
.is-done { background: var(--primar-ink); }
.is-plan { background: var(--gnista); }
.is-draft { background: #E5DCF0; }
.soc-month__days, .soc-month__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.soc-month__days span { padding-bottom: 6px; font-size: .72rem; font-weight: 800; text-align: center; color: var(--muted); }
.soc-day { display: grid; align-content: start; gap: 4px; min-height: 86px; padding: 6px; border-radius: 12px; background: var(--ljus); }
.soc-day.is-out { opacity: .35; }
.soc-day small { font-size: .7rem; color: var(--muted); }
.soc-pill { overflow: hidden; padding: 4px 6px; border-radius: 7px; font-size: .7rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.soc-pill.is-plan { color: var(--natt); }
.soc-pill.is-draft { color: var(--ink-2); }
.reveal-on .soc-month .soc-pill { opacity: 0; transform: translateY(-16px) scale(.8); }
.reveal-on .soc-month.is-in .soc-pill { opacity: 1; transform: none; transition: opacity .3s, transform .6s var(--spring); transition-delay: calc(.3s + var(--i) * .12s); }
@media (max-width: 699px) { .soc-month { padding: 12px; } .soc-day { min-height: 54px; padding: 4px; } .soc-pill { padding: 0; height: 8px; font-size: 0; } .soc-month__days, .soc-month__grid { gap: 3px; } }

/* ==========================================================================
   5. Status
   ========================================================================== */
.soc-status { padding-top: 0; }
.soc-st { display: grid; gap: 10px; padding: 24px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.soc-st__row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--ljus); }
.soc-st__row b { flex: 1; font-size: .95rem; }
.soc-st__badge { padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 800; color: var(--ok); background: var(--ok-soft); }
.soc-st__row.is-fail { box-shadow: inset 0 0 0 1.5px #FCA5A5; }
.soc-st__row.is-fail .soc-st__badge { color: #B91C1C; background: #FEE2E2; }
.soc-st__row.is-busy .soc-st__badge { color: var(--primar-ink); background: var(--soft); }
.soc-st__row.is-fixed { box-shadow: inset 0 0 0 1.5px rgba(22, 122, 91, .4); }
.soc-st__row.is-fixed .soc-st__badge { animation: bump .5s var(--spring); }
.soc-st__retry { justify-self: start; margin-top: 6px; }
.soc-st__retry .ic { width: 16px; height: 16px; }
.soc-st__retry[disabled] { opacity: .5; pointer-events: none; }
.soc-def { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }