/* Homepage section 03 (site-how.js): how work reaches you, in the app's look. A source on the left (the team chat with
   the read-only bot, a Kick in call, a voice note to the bot, your own Claude), and on the right a small copy of your
   day: what SiKick found (silver), the orb at the head of the dotted schedule line, and Today (lime, yours). */
.skh {
  --bg: #0f1012; --bg1: #141517; --bg3: #1f2125; --ln: rgba(255,255,255,.07); --ln2: rgba(255,255,255,.1); --ln3: rgba(255,255,255,.16);
  --tx: #f3f5f8; --tx2: #a3a8b0; --tx3: #6a7079; --dn: #ff4d5e; --p-atlas: #9b7bff; --p-harbor: #7cc6ff; --dot: rgba(255,255,255,.085);
  --ff: 'Space Grotesk', 'Inter', system-ui, sans-serif; --fm: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  position: relative; padding: 22px 22px 18px; border: 1px solid var(--ln2); border-radius: 18px; color: var(--tx); font: 400 13px/1.45 var(--ff); letter-spacing: 0;
  background: radial-gradient(circle, var(--dot) 1px, transparent 1.3px) 0 0 / 28px 28px, var(--bg);
}
body.light .skh {
  --bg: #f3f4f6; --bg1: #ffffff; --bg3: #eef0f3; --ln: rgba(16,19,23,.12); --ln2: rgba(16,19,23,.18); --ln3: rgba(16,19,23,.3);
  --tx: #101317; --tx2: #4e545d; --tx3: #7b818a; --dn: #e0324a; --p-atlas: #6d4fe0; --p-harbor: #1d7fc4; --dot: rgba(16,19,23,.11);
  box-shadow: 0 1px 2px rgba(16,19,23,.04), 0 30px 70px -40px rgba(16,19,23,.3);
}
.skh *, .skh *::before, .skh *::after { box-sizing: border-box; }
.skh button { font: inherit; color: inherit; cursor: pointer; }
.skh :focus-visible { outline: 2px solid var(--sk-lm-ln); outline-offset: 2px; }
.skh .k { font: 500 10.5px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--tx3); }
.skh .k.sv { color: var(--sk-sv); } .skh .k.ac { color: var(--sk-lm); }
.skh-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.skh-ttl { font: 600 clamp(17px, 1.6vw, 21px)/1.2 var(--ff); color: var(--tx); }
.skh-ttl i { font-style: normal; color: var(--sk-lm); }
.skh-steps { display: flex; gap: 2px; margin: 0 0 0 auto; padding: 2px; list-style: none; border: 1px solid var(--ln2); border-radius: 11px; flex-wrap: wrap; }
.skh-steps button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--tx3); font: 500 12px var(--ff); white-space: nowrap; }
.skh-steps button em { font: 400 10px var(--fm); font-style: normal; }
.skh-steps button:hover { color: var(--tx); }
.skh-steps button[aria-current="step"] { background: var(--bg3); color: var(--tx); box-shadow: inset 0 0 0 1px var(--sk-lm-ln); }
.skh-steps button[aria-current="step"] em { color: var(--sk-lm); }
.skh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1.25fr); align-items: stretch; min-height: 400px; }

/* the source window */
.skh-win { display: flex; flex-direction: column; min-height: 400px; border-radius: 14px; border: 1px solid var(--ln2); background: var(--bg1); overflow: hidden; }
.skh-wh { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--ln); }
.skh-wh b { font: 600 13px var(--ff); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skh-wh small { display: block; font: 400 11px var(--ff); color: var(--tx3); }
.skh-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--bg3); color: var(--tx2); font: 600 10px var(--ff); }
.skh-av.tg { background: #2aa3df; color: #fff; } .skh-av.ki { background: var(--dn); color: #fff; } .skh-av.cl { background: #d97757; color: #fff; }
.skh-pl { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--ln2); color: var(--tx2); font: 400 10.5px var(--fm); white-space: nowrap; }
.skh-pl i { width: 6px; height: 6px; border-radius: 50%; background: var(--sk-sv); }
.skh-pl.rec i { background: var(--dn); animation: skh-blink 1.4s steps(2) infinite; } .skh-pl.rec { color: var(--tx); font-feature-settings: "tnum"; }
@keyframes skh-blink { 50% { opacity: .25; } }
.skh-wb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; overflow: hidden; }
.skh-msg { max-width: 88%; padding: 8px 11px; border-radius: 12px 12px 12px 4px; background: var(--bg3); font: 400 13px/1.4 var(--ff); color: var(--tx); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.skh-msg b { display: block; font: 600 11.5px var(--ff); color: var(--who, var(--tx2)); margin-bottom: 1px; }
.skh-msg.me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: color-mix(in srgb, #2aa3df 22%, var(--bg3)); }
.skh-msg.on { opacity: 1; transform: none; }
.skh-msg.hit { box-shadow: 0 0 0 1px var(--sk-sv-ln2), 0 0 0 4px var(--sk-sv-bg); }
.skh-msg.sys { align-self: center; max-width: none; padding: 4px 10px; border-radius: 999px; background: none; border: 1px dashed var(--ln2); color: var(--tx3); font: 400 11px var(--fm); }
.skh-line { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 4px 2px; font: 400 13px/1.45 var(--ff); color: var(--tx2); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s, color .4s; }
.skh-line b { font: 600 11.5px/1.7 var(--ff); color: var(--who, var(--tx3)); }
.skh-line.on { opacity: 1; transform: none; } .skh-line.hit { color: var(--tx); }
.skh-voice { align-self: flex-end; display: flex; align-items: center; gap: 10px; width: min(260px, 90%); padding: 10px 12px; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, #2aa3df 22%, var(--bg3)); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.skh-voice.on { opacity: 1; transform: none; }
.skh-voice .pb { width: 28px; height: 28px; border-radius: 50%; background: #2aa3df; display: grid; place-items: center; color: #fff; flex: none; }
.skh-voice .pb svg { width: 11px; height: 11px; }
.skh-wave { flex: 1; height: 22px; display: flex; align-items: center; gap: 2px; }
.skh-wave i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--tx) 45%, transparent); height: var(--h); }
.skh-voice em { font: 400 10.5px var(--fm); font-style: normal; color: var(--tx2); }
.skh-in { margin: 0 14px 12px; display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ln2); color: var(--tx3); font: 400 12.5px var(--ff); white-space: nowrap; overflow: hidden; }
.skh-in.typing { color: var(--tx); }
.skh-in.typing::after { content: ""; width: 7px; height: 14px; margin-left: 2px; background: var(--tx2); animation: skh-blink 1s steps(2) infinite; }
.skh-tip { margin: 0 14px 12px; padding: 7px 10px; border-radius: 8px; border: 1px dashed var(--ln2); color: var(--tx3); font: 400 11px var(--fm); }

/* the hand-off between the panels */
.skh-wire { position: relative; align-self: center; height: 2px; margin: 0 6px; background: radial-gradient(circle, var(--sk-sv-ln2) 1px, transparent 1.4px) 0 0 / 7px 2px; }
.skh-wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sk-sv); box-shadow: 0 0 10px var(--sk-sv); opacity: 0; }
.skh-wire.go i { animation: skh-pass .9s cubic-bezier(.45,0,.2,1) both; }
@keyframes skh-pass { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }

/* your day, small */
.skh-out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: 14px; border: 1px solid var(--ln2); background: color-mix(in srgb, var(--bg1) 60%, transparent); overflow: hidden; }
.skh-found { padding: 14px 12px 12px; border-right: 1px solid var(--sk-sv-ln); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.skh-fc { display: grid; gap: 5px; padding: 10px 11px 9px 12px; border-radius: 11px; background: var(--sk-sv-bg); border: 1px solid var(--sk-sv-ln); box-shadow: inset 2px 0 0 var(--sk-sv-ln2); animation: skh-in .5s cubic-bezier(.2,.8,.2,1) both; transition: opacity .3s, transform .3s, border-color .3s; }
.skh-fc .t { font: 500 12.5px/1.35 var(--ff); color: var(--tx); }
.skh-fc .s { font: 400 10.5px var(--fm); color: var(--sk-sv); }
.skh-fc .f { display: flex; align-items: center; gap: 6px; }
.skh-fc .acc { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--sk-lm-ln); background: var(--sk-lm-bg); color: var(--sk-lm); font: 600 11px var(--ff); transition: background .2s, color .2s; }
.skh-fc .acc.press { background: #c6ff3d; color: #0b0d07; }
.skh-fc .acc svg { width: 10px; height: 10px; }
.skh-fc.via { border-style: dashed; }
.skh-fc.out { opacity: 0; transform: translateX(10px) scale(.97); }
@keyframes skh-in { from { opacity: 0; transform: translateY(-6px); box-shadow: inset 2px 0 0 var(--sk-sv), 0 0 18px -6px var(--sk-sv); } to { opacity: 1; transform: none; } }
.skh-empty { color: var(--tx3); font: 400 12px var(--ff); padding: 6px 2px; }
.skh-day { position: relative; padding: 4px 14px 14px 6px; min-width: 0; --tw: 40px; --tgp: 14px; --ci: calc(var(--tw) + var(--tgp)); --sp: calc(var(--tw) + var(--tgp) / 2); }
.skh-day > .sko-rail { position: absolute; left: calc(6px + var(--sp) - 1px); top: 84px; bottom: 10px; mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); }
.skh-orbrow { height: 88px; display: flex; align-items: center; margin-left: calc(var(--sp) - 36px); }
.skh-orbrow .sko { --os: 72px; }
.skh-tlh { margin: 2px 0 10px var(--ci); }
.skh-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.skh-b, .skh-fc { min-width: 0; }
.skh-b { position: relative; margin-left: var(--ci); }
.skh-b > time { position: absolute; left: calc(-1 * var(--ci)); top: 50%; width: var(--tw); margin-top: -7px; text-align: right; font: 400 10.5px/14px var(--fm); color: var(--tx3); font-feature-settings: "tnum"; }
.skh-b > .r { position: absolute; left: calc(-1 * var(--ci) + var(--sp) - 4px); top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; border: 1.5px solid var(--ln3); background: var(--bg); z-index: 2; }
.skh-chip { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px 6px 12px; border-radius: 10px; border: 1px solid var(--ln2); background: var(--bg1); box-shadow: inset 3px 0 0 var(--pc, var(--ln3)); }
.skh-chip .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px var(--ff); color: var(--tx); }
.skh-chip .m { font: 400 10.5px var(--fm); color: var(--tx3); white-space: nowrap; }
.skh-b.new .skh-chip { animation: skh-land 1.5s cubic-bezier(.2,.8,.2,1) both; }
.skh-b.new > .r { border-color: var(--sk-lm-ln); }
@keyframes skh-land { 0% { opacity: 0; transform: translateY(-4px); } 30% { opacity: 1; transform: none; border-color: var(--sk-lm); box-shadow: inset 3px 0 0 var(--pc), 0 0 0 3px color-mix(in srgb, var(--sk-lm) 16%, transparent); } 100% { border-color: var(--ln2); } }
.skh-band { min-height: 22px; display: flex; align-items: center; padding: 0 10px; border-radius: 7px; border: 1px dashed var(--ln2); color: var(--tx3); font: 400 10.5px var(--fm); }

.skh-say { display: flex; gap: 12px; align-items: baseline; margin: 16px 2px 0; min-height: 42px; color: var(--tx2); font: 400 14px/1.5 var(--ff); }
.skh-say em { font: 500 11px var(--fm); font-style: normal; color: var(--sk-lm); }
.skh-say span { transition: opacity .25s; } .skh-say span.swap { opacity: 0; }
.skh-cur { position: absolute; z-index: 8; width: 18px; height: 18px; left: 0; top: 0; pointer-events: none; opacity: 0; transition: transform .7s cubic-bezier(.45,0,.2,1), opacity .3s; fill: var(--tx); stroke: var(--bg); stroke-width: 1.4; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.skh-cur.on { opacity: 1; } .skh-cur.tap { scale: .86; }

@media (max-width: 1100px) { .skh-out { grid-template-columns: 1fr; } .skh-found { border-right: 0; border-bottom: 1px solid var(--sk-sv-ln); } }
@media (max-width: 860px) {
  .skh { padding: 16px 12px 14px; border-radius: 14px; }
  .skh-steps { margin: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .skh-grid { grid-template-columns: 1fr; min-height: 0; }
  .skh-win { min-height: 300px; }
  .skh-wire { justify-self: center; width: 2px; height: 34px; margin: 4px 0; background: radial-gradient(circle, var(--sk-sv-ln2) 1px, transparent 1.4px) 0 0 / 2px 7px; }
  .skh-wire i { left: -3px; top: 0; } .skh-wire.go i { animation-name: skh-passv; }
  @keyframes skh-passv { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
  .skh-say { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .skh *, .skh *::before, .skh *::after { animation: none !important; transition: none !important; } .skh-cur { display: none; } }