/* Begeleide link (agenda koppelen), gedeeld door B2C en B2B. Ontwerp: docs/superpowers/specs/2026-10-22-agenda-apple-design.md.
   Legt zich over het bestaande koppelformulier; dat formulier blijft in de pagina voor de serverkant. */
.scak{container-type:inline-size;display:grid;gap:12px;color:var(--sc-ink,#171A1F);font-family:var(--sc-font-body,Inter,system-ui,sans-serif)}
.scak-has-guide #calendarConnectForm,.scak-has-guide #calendarSourceForm{display:none}
.scak-view[hidden]{display:none!important}
.scak-view{display:grid;gap:12px}
.scak-lede{margin:0;font-weight:650;font-size:1rem}
.scak-small{margin:0;color:var(--sc-muted,#6A717C);font-size:.8rem;line-height:1.45}
.scak-copy{margin:0;color:var(--sc-ink-soft,#4B525C);font-size:.88rem;line-height:1.5}
.scak-options{display:grid;gap:8px}
.scak-option{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:56px;padding:10px 12px;border:1px solid var(--sc-line,rgba(23,26,31,.12));border-radius:14px;background:var(--sc-surface,#fff);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color 160ms ease,transform 120ms ease}
.scak-option:hover{background:var(--sc-paper,#F6F4EF)}
.scak-option:active{transform:scale(.99)}
.scak-option i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--sc-ink,#171A1F);color:var(--sc-surface,#fff);font:700 .8rem/1 var(--sc-font-body,Inter,sans-serif);font-style:normal}
.scak-option strong{display:block;font-size:.92rem}
.scak-option small{display:block;color:var(--sc-muted,#6A717C);font-size:.78rem}
.scak-option em{font-style:normal;color:var(--sc-muted,#6A717C);font-size:.8rem}
.scak-option.is-suggested{border-color:var(--sc-accent,#2E5BFF);background:var(--sc-accent-soft,#E9EEFF)}
.scak-option.is-suggested em{color:var(--sc-accent-deep,#2149D8);font-weight:650}
.scak-back{justify-self:start;padding:0;border:0;background:none;color:var(--sc-accent-deep,#2149D8);font:600 .85rem var(--sc-font-body,Inter,sans-serif);cursor:pointer}
.scak-title{margin:0;font:650 1.1rem/1.2 var(--sc-font-display,"Bricolage Grotesque",sans-serif)}
.scak-video{position:relative;width:100%;aspect-ratio:16/9;max-height:200px;border-radius:14px;border:1px solid var(--sc-line,rgba(23,26,31,.12));background:var(--sc-paper,#F6F4EF);overflow:hidden}
.scak-scene{position:absolute;inset:12px;display:grid;gap:7px;align-content:start;opacity:0;animation:scak-scene 9s infinite;animation-delay:calc(var(--i) * 3s - .4s)}
.scak-bar{height:12px;border-radius:5px;background:var(--sc-line,rgba(23,26,31,.12))}
.scak-bar.w40{width:40%}.scak-bar.w60{width:60%}.scak-bar.w75{width:75%}
.scak-target{justify-self:start;padding:3px 8px;border-radius:7px;border:1.5px solid var(--sc-accent,#2E5BFF);background:var(--sc-accent-soft,#E9EEFF);color:var(--sc-accent-deep,#2149D8);font:650 .75rem var(--sc-font-body,Inter,sans-serif)}
.scak-tap{position:absolute;left:24%;top:62px;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(46,91,255,.32);box-shadow:0 0 0 2px rgba(46,91,255,.55);animation:scak-tap 3s infinite}
.scak-cap{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;border-radius:8px;background:rgba(23,26,31,.84);color:#fff;font:600 .72rem var(--sc-font-body,Inter,sans-serif);text-align:center}
@keyframes scak-scene{0%{opacity:0}4%{opacity:1}30%{opacity:1}34%{opacity:0}100%{opacity:0}}
@keyframes scak-tap{0%,40%{transform:scale(.6);opacity:0}55%{transform:scale(1);opacity:1}75%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.scak-steps{margin:0;padding-left:20px;display:grid;gap:4px;color:var(--sc-ink-soft,#4B525C);font-size:.88rem;line-height:1.45}
.scak-note{margin:0;padding:10px 12px;border-radius:12px;background:var(--sc-amber-soft,#FBF0DB);color:var(--sc-ink,#171A1F);font-size:.8rem;line-height:1.45}
.scak-welcome{padding:10px 12px;border-radius:12px;background:var(--sc-accent-soft,#E9EEFF);color:var(--sc-accent-deep,#2149D8);font-weight:650;font-size:.88rem}
.scak-welcome[hidden]{display:none}
.scak-label{font-weight:600;font-size:.82rem;color:var(--sc-ink-soft,#4B525C)}
.scak-paste{display:flex;gap:8px}
.scak-paste input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--sc-line,rgba(23,26,31,.12));border-radius:12px;background:var(--sc-surface,#fff);color:inherit;font:inherit;font-size:.9rem}
.scak-paste button,.scak-primary,.scak-secondary,.scak-quiet{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:12px;font:650 .88rem var(--sc-font-body,Inter,sans-serif);text-decoration:none;cursor:pointer}
.scak-paste button,.scak-secondary{border:1px solid var(--sc-line,rgba(23,26,31,.12));background:var(--sc-surface,#fff);color:var(--sc-ink,#171A1F)}
.scak-primary{border:0;background:var(--sc-accent,#2E5BFF);color:#fff}
.scak-primary:disabled{opacity:.45;cursor:default}
.scak-quiet{border:0;background:transparent;color:var(--sc-muted,#6A717C)}
.scak-recognize{margin:0;min-height:1.2em;font-size:.82rem;line-height:1.4;color:var(--sc-muted,#6A717C)}
.scak-recognize[data-tone="ok"]{color:var(--sc-green,#1F7F52)}
.scak-recognize[data-tone="ok"]::before{content:"✓ ";font-weight:800}
.scak-recognize[data-tone="warn"]{color:var(--sc-amber,#9A6510)}
.scak-recognize[data-tone="error"]{color:var(--sc-red,#C8473B)}
.scak-ok{display:grid;gap:3px;padding:12px 14px;border-radius:14px;background:var(--sc-green-soft,#E3F3EA);color:var(--sc-green,#1F7F52)}
.scak-ok strong{font-size:.95rem}
.scak-ok span{color:var(--sc-ink-soft,#4B525C);font-size:.85rem}
/* Na het koppelen meteen de andere kant op: je studieblokken in je eigen agenda. */
.scak-next{display:grid;gap:10px;padding:14px;border:1px solid var(--sc-line,rgba(23,26,31,.12));border-radius:14px;background:var(--sc-surface,#fff)}
.scak-next .scak-copy{margin:0}
.scak-next [data-scak-feed]{display:grid;gap:8px}
.scak-cals{display:grid;gap:4px}
.scak-cal{display:grid;grid-template-columns:20px 12px 1fr;gap:10px;align-items:center;min-height:42px;padding:6px 8px;border-radius:10px;cursor:pointer}
.scak-cal:hover{background:var(--sc-paper,#F6F4EF)}
.scak-cal input{width:18px;height:18px;accent-color:var(--sc-accent,#2E5BFF)}
.scak-cal i{width:12px;height:12px;border-radius:50%}
.scak-apps{display:flex;flex-wrap:wrap;gap:8px}
.scak button:focus-visible,.scak a:focus-visible,.scak input:focus-visible{outline:2px solid var(--sc-accent,#2E5BFF);outline-offset:2px}
/* Smalle kolom (zijbalk op de laptop): kaarten compact, plakveld onder elkaar. */
/* Iconen per agenda en de live stappen (CB, 23 okt 2026). */
.scak-option i.scak-logo{width:32px;height:32px;border-radius:8px;background:transparent;color:inherit}
.scak-option i.scak-logo svg{display:block}
.scak-option i.scak-logo-device,.scak-option i.scak-logo-school{background:var(--sc-ink,#171A1F);color:var(--sc-surface,#fff)}
.scak-option{grid-template-columns:32px minmax(0,1fr) auto}
.scak-track-count{margin:0;font:600 .72rem var(--sc-font-body,Inter,sans-serif);letter-spacing:.04em;text-transform:uppercase;color:var(--sc-muted,#6A717C)}
.scak-track{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.scak-track li>button,.scak-track-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;width:100%;padding:7px 6px;border:0;border-radius:10px;background:transparent;color:var(--sc-ink-soft,#4B525C);font:inherit;font-size:.86rem;line-height:1.45;text-align:left}
.scak-track li>button{cursor:pointer}
.scak-track li>button:hover{background:var(--sc-paper,#F6F4EF)}
.scak-track i{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;border:1.5px solid var(--sc-line,rgba(23,26,31,.18));font:700 .7rem/1 var(--sc-font-body,Inter,sans-serif);font-style:normal;color:var(--sc-muted,#6A717C);transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.scak-track li[data-state="done"] i{background:var(--sc-green,#1F7F52);border-color:var(--sc-green,#1F7F52);color:#fff}
.scak-track li[data-state="done"] span{color:var(--sc-muted,#6A717C)}
.scak-track li[data-state="now"] i{background:var(--sc-accent,#2E5BFF);border-color:var(--sc-accent,#2E5BFF);color:#fff}
.scak-track li[data-state="now"] span{color:var(--sc-ink,#171A1F);font-weight:600}
@container (max-width:300px){
  .scak-option{grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:9px 10px;min-height:52px}
  .scak-option i{width:28px;height:28px}
  .scak-option small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .scak-video{max-height:130px}
  .scak-steps{font-size:.82rem;padding-left:18px}
  .scak-paste{flex-direction:column}
  .scak-primary,.scak-secondary{width:100%}
}
@media(prefers-reduced-motion:reduce){.scak-scene{animation:none}.scak-scene:not(:first-child){display:none}.scak-tap{animation:none;opacity:1}}