/* Blixtflow – kalendersidan: veckan som fylls, zoomen dag/vecka/månad (cal.js sätter --z), mötet att dra,
   speglingen och inbjudan. Bygger på ai.css. */

/* ---------- Veckan ---------- */
.cal-week { --row: 46px; color: var(--ink); }
.cal-week__days { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0 0 8px; }
.cal-week__days b { font-size: .74rem; font-weight: 800; text-align: center; color: var(--muted); }
.cal-week__body { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 6px; }
.cal-week__hours { display: grid; grid-auto-rows: var(--row); font-size: .66rem; color: var(--muted); }
.cal-week__col { position: relative; height: calc(var(--row) * 8); border-radius: 10px; background: repeating-linear-gradient(180deg, transparent 0 calc(var(--row) - 1px), var(--line-2) calc(var(--row) - 1px) var(--row)), var(--ljus); }
.cal-ev { position: absolute; left: 3px; right: 3px; top: calc(var(--s) * var(--row) + 2px); height: calc(var(--l) * var(--row) - 4px); overflow: hidden; padding: 5px 7px; border-radius: 9px; font-size: .68rem; line-height: 1.25; color: #fff; background: var(--primar-ink); }
.cal-ev b, .cal-ev small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-ev small { opacity: .85; }
.cal-ev--ton { color: var(--natt); background: var(--ton); }
.cal-ev--natt { background: var(--natt); }
.cal-ev--ai { z-index: 2; color: var(--natt); background: var(--gnista); box-shadow: 0 0 0 2px #fff, 0 14px 30px -10px rgba(44, 14, 61, .5); }
.cal-ev--flat { position: static; display: block; height: auto; }
.cal-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--line-2); }
.cal-seg i { padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-style: normal; font-weight: 700; color: var(--muted); transition: background-color .3s, color .3s; }
.cal-seg i.is-on { color: #fff; background: var(--natt); }

/* ==========================================================================
   1. Hjälten
   ========================================================================== */
.cal-show { position: relative; padding: 20px 0 30px; }
.cal-app { padding: 16px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 110px -40px rgba(0, 0, 0, .95), 0 30px 90px -40px rgba(155, 93, 229, .7); }
.motion .cal-app { animation: chp-rise 1.2s .2s var(--ease-out) backwards; }
.cal-app__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: var(--ink); }
.cal-app__bar b { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.cal-app__bar .ic { width: 18px; height: 18px; color: var(--primar-ink); }
.motion .cal-week--hero .cal-ev { animation: chp-pop .6s var(--spring) backwards; animation-delay: calc(.8s + var(--i) * .15s); }
.motion .cal-week--hero .cal-ev--ai { animation: cal-drop 1s 2.4s var(--spring) backwards, glow-ring-g 2.2s 3.4s ease-in-out infinite; }
.cal-toast { position: absolute; right: -10px; bottom: 0; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; font-size: .84rem; font-weight: 700; color: var(--ink); background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .7); }
.cal-toast .ic { width: 28px; height: 28px; padding: 6px; border-radius: 9px; color: #fff; background: var(--ok); }
.motion .cal-toast { animation: chp-pop .7s 3.3s var(--spring) backwards; }
.cal-ai { position: absolute; left: -16px; top: 4px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--natt); background: var(--gnista); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7); }
.cal-ai span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--gnista); background: var(--natt); }
.cal-ai .ic { width: 15px; height: 15px; }
.motion .cal-ai { animation: chp-pop .7s 1.6s var(--spring) backwards, bob 5s 2.4s ease-in-out infinite; }
.cal-bx { position: absolute; left: -70px; bottom: -40px; z-index: 3; width: 150px; }
@media (max-width: 599px) {
  .cal-week { --row: 34px; }
  .cal-ev small { display: none; }
  .cal-ev { font-size: .58rem; padding: 3px 4px; }
  .cal-bx { left: auto; right: -10px; bottom: -70px; width: 100px; }
  .cal-toast { right: 0; bottom: -10px; font-size: .74rem; }
  .cal-ai { left: 0; top: -6px; }
}

/* ==========================================================================
   2. Zoomen
   ========================================================================== */
.cal-zoom { --z: 1; background: var(--ljus); }
.cal-seg--big { margin-top: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.cal-seg--big i { padding: 8px 18px; font-size: .9rem; }
.cal-zstage { position: relative; display: grid; width: min(100% - 2 * var(--gutter), 860px); height: 470px; margin-inline: auto; }
.cal-z { grid-area: 1 / 1; align-self: center; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); opacity: 0; transition: opacity .45s, transform .7s var(--ease-out); }
.cal-z__title { margin-bottom: 10px; font-size: 1.1rem; font-weight: 800; }
.cal-z--day { transform: scale(1.15); }
.cal-z--month { transform: scale(.8); }
.cal-z--week { transform: scale(.9); }
.cal-zoom[data-view="0"] .cal-z--day, .cal-zoom[data-view="1"] .cal-z--week, .cal-zoom[data-view="2"] .cal-z--month { opacity: 1; transform: none; }
.cal-zoom:not([data-view]) .cal-z--week { opacity: 1; transform: none; }
.cal-z__row { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--line-2); font-size: .8rem; color: var(--muted); }
.cal-z__row .cal-ev { font-size: .85rem; padding: 9px 12px; }
.cal-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-mgrid span { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; height: 62px; padding: 6px; border-radius: 10px; background: var(--ljus); }
.cal-mgrid small { width: 100%; font-size: .7rem; color: var(--muted); }
.cal-mgrid i { width: 100%; height: 6px; border-radius: 3px; background: var(--primar-ink); }
.cal-mgrid i.b { background: var(--ton); }
.cal-mgrid [data-today] { box-shadow: inset 0 0 0 2px var(--gnista); background: #FBFDE3; }
.cal-mgrid [data-today] i { background: var(--natt); }
@media (max-width: 599px) { .cal-zstage { height: 440px; } .cal-mgrid span { height: 48px; } .cal-z { padding: 12px; } }

/* ==========================================================================
   3. Dra mötet
   ========================================================================== */
.cal-drag { background: linear-gradient(180deg, var(--natt), #321147); }
.cal-dnd { --row: 40px; position: relative; padding: 20px; border-radius: 26px; color: var(--ink); background: #fff; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
.cal-dnd__days { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.cal-dnd__days b { font-size: .74rem; text-align: center; color: var(--muted); }
.cal-dnd__grid { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
.cal-dnd__area { position: relative; height: calc(var(--row) * 8); border-radius: 12px; background: repeating-linear-gradient(180deg, transparent 0 calc(var(--row) - 1px), var(--line-2) calc(var(--row) - 1px) var(--row)), repeating-linear-gradient(90deg, var(--ljus) 0 calc(20% - 3px), #fff calc(20% - 3px) 20%); touch-action: none; }
.cal-dnd__card, .cal-dnd__ghost { position: absolute; left: calc(var(--d) * 20% + 3px); top: calc(var(--s) * var(--row) + 2px); width: calc(20% - 9px); height: calc(var(--row) * 2 - 4px); border-radius: 10px; }
.cal-dnd__card { z-index: 2; display: grid; align-content: start; gap: 2px; padding: 6px 8px; border: 0; cursor: grab; text-align: left; font: inherit; color: #fff; background: var(--primar-ink); box-shadow: 0 14px 30px -12px rgba(126, 69, 201, .8); transition: left .35s var(--spring), top .35s var(--spring), transform .2s, box-shadow .2s; }
.cal-dnd__card b { font-size: .74rem; line-height: 1.2; }
.cal-dnd__card small { font-size: .66rem; opacity: .85; }
.cal-dnd__grip { position: absolute; left: 50%; bottom: 4px; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: rgba(255, 255, 255, .5); }
.cal-dnd__card.is-drag { cursor: grabbing; transition: none; transform: scale(1.05) rotate(-2deg); box-shadow: 0 30px 50px -14px rgba(44, 14, 61, .7); }
.cal-dnd__ghost { z-index: 1; border: 2px dashed var(--primar); background: rgba(155, 93, 229, .08); opacity: 0; }
.cal-dnd.is-dragging .cal-dnd__ghost { opacity: 1; }
.cal-dnd__hint { position: absolute; left: calc(1 * 20% + 4px); top: calc(4 * var(--row) + 8px); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; color: var(--natt); background: var(--gnista); pointer-events: none; }
.cal-dnd__hint .ic { width: 14px; height: 14px; }
.motion .cal-dnd__hint { animation: chp-nudge 1.4s ease-in-out infinite; }
.cal-dnd.is-moved .cal-dnd__hint { display: none; }
.cal-dnd__toast { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; font-size: .86rem; font-weight: 700; color: var(--ok); background: var(--ok-soft); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .5s var(--spring); }
.cal-dnd__toast .ic { width: 16px; height: 16px; stroke-width: 3; }
.cal-dnd.is-moved .cal-dnd__toast { opacity: 1; transform: none; }

/* ==========================================================================
   4. Spegling och gäster
   ========================================================================== */
.cal-flow { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; max-width: 820px; margin-inline: auto; }
.cal-node { display: grid; justify-items: center; gap: 6px; padding: 18px 22px; border-radius: 22px; text-align: center; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.cal-node small { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--ok); }
.cal-node small .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.cal-node--bf { padding: 26px; color: #fff; background: radial-gradient(120% 120% at 100% 0%, #5b2a80, var(--natt) 65%); box-shadow: var(--shadow-3); }
.cal-node--bf small { color: var(--gnista); }
.cal-node--bf img { width: 46px; height: 46px; padding: 6px; border-radius: 14px; background: #fff; }
.cal-node__logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-family: Arial, sans-serif; font-size: 1.2rem; font-weight: 800; color: #fff; }
.cal-node__logo--g { background: conic-gradient(#4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0); }
.cal-node__logo--o { background: #0F6CBD; }
.cal-targets { display: grid; gap: 14px; }
.cal-wires { width: 100%; height: 160px; overflow: visible; }
.cal-wires path { fill: none; stroke: var(--primar); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cal-wires circle { fill: var(--primar-ink); }
@media (prefers-reduced-motion: reduce) { .cal-wires circle { display: none; } }
.cal-guest { display: grid; gap: 24px; align-items: center; max-width: 900px; margin: 50px auto 0; padding: 28px; border-radius: 28px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #5b2a80, var(--natt) 60%); box-shadow: var(--shadow-3); }
.cal-guest h3 { font-size: 1.4rem; font-weight: 800; }
.cal-guest p { margin-top: 6px; color: var(--on-dark-muted); }
.cal-invite { padding: 16px; border-radius: 20px; color: var(--ink); background: #fff; }
.cal-invite__h { display: flex; align-items: center; gap: 12px; }
.cal-invite__h span:last-child { display: grid; }
.cal-invite__h small { font-size: .8rem; color: var(--muted); }
.cal-invite__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--natt); background: var(--gnista); }
.cal-invite__ic .ic { width: 20px; height: 20px; }
.cal-invite__btns { display: flex; gap: 8px; margin-top: 12px; }
.cal-invite__btns button { flex: 1; padding: 9px; border: 0; border-radius: 11px; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700; color: var(--ink); background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, color .2s, transform .3s var(--spring); }
.cal-invite__btns button:hover { transform: translateY(-2px); }
.cal-invite__btns button[aria-pressed="true"] { color: #fff; background: var(--ok); box-shadow: none; }
.cal-invite__btns button[data-ans="no"][aria-pressed="true"] { background: var(--bad); }
.cal-invite__btns button[data-ans="maybe"][aria-pressed="true"] { color: var(--natt); background: var(--gnista); }
@media (min-width: 800px) { .cal-guest { grid-template-columns: 1fr 1fr; padding: 36px; } }
@media (max-width: 599px) { .cal-flow { grid-template-columns: 1fr; justify-items: center; } .cal-wires { width: 120px; height: 60px; rotate: 90deg; } }
.cal-def { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }

@keyframes cal-drop { from { opacity: 0; transform: translateY(-80px) scale(.8); } }