/* Kalender AI on the landing pages: a still example of the chat panel (.kd) and of the
   Files page (.fd), written into the page as plain HTML so their words are in the page.
   They look like the real panel (agent/chat.css) but nothing in them can be clicked.
   The chat plays once when it scrolls into view (landing.js adds .seen); without that
   script, or with reduced motion, the last frame simply shows. Uses landing.css tokens. */

/* Subject colours, as in landing/demo.js: light, then dark */
.kd-fld { --c: #00c7be; }
.kd-stat { --c: #007aff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-fld { --c: #63e6e2; } :root:not([data-theme="light"]) .kd-stat { --c: #0a84ff; } }
:root[data-theme="dark"] .kd-fld { --c: #63e6e2; }
:root[data-theme="dark"] .kd-stat { --c: #0a84ff; }

/* ---------- The stage: a piece of desk with the panel in the middle ---------- */
.kd-stage, .fd-stage {
  display: grid; place-items: center; padding: 3rem 1rem; border-radius: 14px;
  background: radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px, color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: var(--shadow-card);
}
.hero .kd-stage { margin-top: 3.25rem; }

/* ---------- The chat panel ---------- */
.kd { width: min(26rem, 100%); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow-sheet); overflow: hidden; text-align: left; }
.kd p { margin: 0; }
.kd-head { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border-bottom: 1px solid var(--rule); }
.kd-mascot { flex: none; width: 44px; height: 44px; overflow: visible; }
.kd-mascot .paper { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.kd-mascot .binding { fill: var(--red); }
.kd-mascot .ink { fill: var(--ink); }
.kd-mascot .line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.kd-title { flex: 1; min-width: 0; display: grid; }
.kd-title b { font: 600 1.0625rem/1.2 var(--display); }
.kd-title span { overflow: hidden; color: var(--pencil); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.kd-credits { display: grid; text-align: right; line-height: 1.1; }
.kd-credits b { font: 600 1.0625rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.kd-credits span { color: var(--pencil); font-size: .75rem; }

.kd-log { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; }
.kd-me { align-self: flex-end; max-width: 85%; padding: .5rem .875rem; border-radius: 16px 16px 4px 16px; background: var(--ink); color: var(--surface); font-size: .9375rem; line-height: 1.5; }
.kd-ai { align-self: flex-start; max-width: 94%; font-size: .9375rem; line-height: 1.6; }
.kd-steps { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: var(--pencil); font-size: .8125rem; }
.kd-steps span::before { content: "✓ "; color: #1f6f3c; }
:root[data-theme="dark"] .kd-steps span::before { color: #7fd49a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-steps span::before { color: #7fd49a; } }
.kd-cost { margin-top: -.375rem; color: var(--pencil); font-size: .75rem; }

/* Answer cards: a few days of the calendar, free time, a suggestion */
.kd-card { padding: .75rem .875rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.kd-day + .kd-day { margin-top: .625rem; }
.kd-day-name { margin-bottom: .25rem !important; color: var(--pencil); font: 600 .8125rem/1.3 var(--display); }
.kd-row { display: grid; grid-template-columns: 3px 5.75rem minmax(0, 1fr); gap: .5rem; align-items: start; padding: .25rem 0; font-size: .875rem; }
.kd-row::before { content: ""; align-self: stretch; border-radius: 2px; background: var(--c, var(--rule)); }
.kd-row time { color: var(--pencil); font-family: var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-row b { font-weight: 600; }
.kd-free { display: flex; flex-wrap: wrap; gap: .375rem; }
.kd-free span { padding: .125rem .5rem; border-radius: 999px; background: #e3f4e8; color: #1f6f3c; font: 600 .8125rem/1.5 var(--display); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .kd-free span { background: #1f2e25; color: #7fd49a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd-free span { background: #1f2e25; color: #7fd49a; } }

/* The suggestion is a tear-off calendar page: red binding, perforation, the subject's colour at the foot */
.kd-prop { display: flex; gap: .875rem; }
.kd-slot { flex: none; width: 78px; }
.kd-stub { display: flex; justify-content: space-around; height: 11px; border-radius: 6px 6px 0 0; background: var(--red); }
.kd-stub i { width: 3px; height: 8px; margin-top: -4px; border-radius: 2px; background: var(--ink); }
.kd-page { display: block; padding: .3rem 0 .45rem; text-align: center; background: var(--surface); border: 1px solid var(--rule); border-top: 2px dotted var(--control-edge); border-bottom: 3px solid var(--c, var(--rule)); border-radius: 0 0 8px 8px; transform-origin: 0 0; }
.kd-page > span { display: block; }
.kd-page .m { color: var(--red); font-size: .6875rem; }
.kd-page .d { font: 600 2.125rem/1 var(--display); font-variant-numeric: tabular-nums; }
.kd-page .w { color: var(--pencil); font-size: .6875rem; }
.kd-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; }
.kd-info > span { display: block; }
.kd-info .k { color: var(--pencil); font-size: .75rem; }
.kd-info .t { font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.kd-info .s { color: var(--pencil); font-size: .8125rem; }
.kd-acts { display: flex !important; flex-wrap: wrap; gap: .375rem; }
.kd-btn { padding: .375rem .75rem; border: 1px solid var(--control-edge); border-radius: 8px; color: var(--ink); font: 600 .8125rem/1.2 var(--text); }
.kd-btn.primary { border-color: var(--red); background: var(--red); color: var(--on-red); }

/* The writing box, empty */
.kd-compose { display: flex; align-items: center; gap: .5rem; margin: 0 .75rem .75rem; padding: .375rem .375rem .375rem .875rem; border-radius: 16px; background: var(--surface-2); color: var(--pencil); font-size: .9375rem; }
.kd-compose span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-go { flex: none; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--surface); }
.kd-go svg { width: 18px; height: 18px; }

/* Played once: the messages arrive in turn, the page drops in and the mascot hops */
.kd-log > :nth-child(1) { --i: 0; } .kd-log > :nth-child(2) { --i: 1; } .kd-log > :nth-child(3) { --i: 2; }
.kd-log > :nth-child(4) { --i: 3; } .kd-log > :nth-child(5) { --i: 4; } .kd-log > :nth-child(6) { --i: 5; }
.kd-log > :nth-child(7) { --i: 6; } .kd-log > :nth-child(8) { --i: 7; } .kd-log > :nth-child(9) { --i: 8; }
.kd-log > :nth-child(10) { --i: 9; }
@media screen and (prefers-reduced-motion: no-preference) {
  [data-reveal] .kd:not(.seen) .kd-log > * { opacity: 0; }
  .kd.seen .kd-log > * { animation: kd-in .45s cubic-bezier(.2, .8, .2, 1) calc(.2s + var(--i) * .42s) both; }
  .kd.seen .kd-prop .kd-page { animation: kd-drop .6s cubic-bezier(.2, .9, .3, 1.25) calc(.35s + var(--i) * .42s) both; }
  .kd.seen .kd-mascot { animation: kd-hop .42s ease-out 3.6s 2; }
}
@keyframes kd-in { from { opacity: 0; transform: translateY(.5rem); } }
@keyframes kd-drop { from { opacity: 0; transform: translateY(-.75rem) rotate(-8deg); } }
@keyframes kd-hop { 50% { transform: translateY(-6px) rotate(-5deg); } }

/* ---------- The Files page ---------- */
.fd { width: min(40rem, 100%); padding: 1.25rem 1.25rem .5rem; background: var(--surface); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow-sheet); }
.fd p { margin: 0; }
.fd-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--rule); }
.fd-head b { font: 600 1.375rem/1.2 var(--display); }
.fd-head span { color: var(--pencil); font-size: .875rem; }
.fd-list { margin: 0; padding: 0; list-style: none; }
.fd-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .875rem; align-items: center; padding: .875rem 0; }
.fd-list li + li { border-top: 1px solid var(--rule); }
.fd-icon { display: grid; place-items: center; width: 2.25rem; height: 2.75rem; border-radius: 4px 10px 4px 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); color: var(--red); font: 700 .625rem/1 var(--display); letter-spacing: .04em; }
.fd-name { display: grid; min-width: 0; }
.fd-name b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fd-name span { color: var(--pencil); font-size: .8125rem; }
.fd-switch { display: inline-flex; align-items: center; gap: .5rem; color: var(--pencil); font-size: .8125rem; }
.fd-switch::before { content: ""; flex: none; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: color-mix(in srgb, var(--control-edge) 45%, transparent) radial-gradient(circle at .625rem 50%, var(--surface) .45rem, transparent .5rem); }
.fd-switch.on { color: var(--ink); }
.fd-switch.on::before { background: var(--red) radial-gradient(circle at 1.625rem 50%, #fff .45rem, transparent .5rem); }

@media (max-width: 47.5rem) {
  .kd-stage, .fd-stage { padding: 1.5rem .75rem; }
  .hero .kd-stage { margin-top: 2.25rem; }
  .fd { padding: 1rem 1rem .25rem; }
  .fd-list li { grid-template-columns: auto minmax(0, 1fr); }
  .fd-switch { grid-column: 2; }
}
@media (forced-colors: active) {
  .kd-btn.primary, .fd-switch.on::before { forced-color-adjust: none; }
}