/* =============================================================================
 * Kiviland — pane module styles. Owned by kl-pane.js. Base classes live in
 * kiviland.css; this file adds what the module needs and overrides nothing
 * outside its own selectors (.kl-turn* · .kl-card* · .kl-approval* · .kl-clipping*
 * · .kl-divider · .kl-gate · .kl-sep · .kl-ticker · .kl-type · .kl-floor children).
 *
 * Laws kept: lowercase copy, mono for data only, radius 4/8/12, motion is
 * transform/opacity and value-scoped (120/200/300/700ms on the site's curves).
 * ========================================================================== */

/* ------------------------------------------------------------- the greeting */
/* the one centred card: full measure between two equal gutters, so the orb can
   still take the right gutter when it leaves the floor */
.kl-turn--centre { grid-template-columns: var(--kl-gutter) 1fr var(--kl-gutter); }
.kl-turn--centre .kl-card { grid-column: 2; margin: 0; transform-origin: top right; border-top-right-radius: var(--r-xs); }
.kl-card--marque .kl-card__text:empty { display: none; }
.kl-card--marque .kl-card__lead .kl-word { display: inline; }

/* ------------------------------------------------------------- kivi's side */
/* nudges, clippings and approvals sit on kivi's side: the same 24px shift and
   the 4px pinched corner nearest the orb */
.kl-turn--nudge .kl-card,
.kl-turn--clipping .kl-card,
.kl-turn--approval .kl-card { margin-left: 24px; transform-origin: top right; border-top-right-radius: var(--r-xs); }
.kl-turn--nudge .kl-card.is-emerging,
.kl-turn--clipping .kl-card.is-emerging,
.kl-turn--approval .kl-card.is-emerging { --kl-clip-x: calc(100% + 34px); }
/* the clipping keeps its thunk while it emerges (the base sets one animation per rule) */
.kl-turn--clipping .kl-card.is-emerging { animation: kl-card-emerge 420ms var(--kl-ease-soft) both, kl-thunk var(--kl-dur-pulse) var(--ease) 1; }
.kl-turn--clipping .kl-card.is-restored { animation: none; }

/* a card being written holds one line open so the first word has somewhere to land */
.kl-card.is-writing .kl-card__text { min-height: 1.6em; }
.kl-turn--nudge .kl-card.is-writing .kl-card__text { min-height: 1.5em; }

/* the tail: three dots between the avatar and the card's pinched corner (D6). the
   dots module rotates them (up-right for kivi, up-left for you); we only seat them */
.kl-turn__tail { position: absolute; pointer-events: none; display: block; }
.kl-turn__gutter--right .kl-turn__tail { right: calc(100% - 6px); bottom: calc(100% - 4px); }
.kl-turn__gutter--left .kl-turn__tail { left: calc(100% - 6px); bottom: calc(100% - 4px); }
.kl-turn__tail:empty { display: none; }

/* ------------------------------------------------------------- your side */
.kl-card__scroll { transition: max-height 300ms var(--ease); }
.kl-card__scroll::-webkit-scrollbar { display: none; }
.kl-card__listening .kl-dots { height: 9px; }
/* the interrupted sentence's cut mark, after the last word */
.kl-cut { opacity: 0; animation: kl-word-in 120ms var(--ease) forwards; }

/* --------------------------------------------------------------- language */
/* devanagari: taller line boxes, and italic only for latin script (D3, §3 language) */
.kl-flow.is-devanagari .kl-card__text,
.kl-card.is-devanagari .kl-card__text { line-height: 1.7; }
.kl-flow.is-devanagari .kl-turn--you .kl-card__text,
.kl-turn--you .kl-card.is-devanagari .kl-card__text { font-style: normal; line-height: 1.7; }

/* --------------------------------------------------------------- approval */
.kl-approval__head { margin: 0 0 4px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink2); letter-spacing: 0.04em; }
.kl-approval__summary { margin: 0; font-size: 1rem; color: var(--ink1); }
.kl-approval__row button[disabled] { opacity: 0.5; cursor: default; }
.kl-approval__result { font-variant-numeric: tabular-nums; }
.kl-turn--approval.is-expired .kl-card { color: var(--ink2); }

/* --------------------------------------------------------------- clipping */
.kl-clipping__alias { flex: 0 0 auto; }
.kl-clipping__goal { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-clipping__leader { min-width: 24px; }
.kl-clipping__elapsed { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- divider */
.kl-divider.is-static .kl-divider__line { animation: none; }

/* ------------------------------------------------------------------- gate */
.kl-gate { transition: opacity 200ms var(--ease); }
.kl-gate.is-out { opacity: 0; }
.kl-gate__btn { font-size: 0.9375rem; }
.kl-gate__btn svg { flex: none; }
.kl-gate__peek { object-fit: contain; }

/* ------------------------------------------------------ closing countdown */
.kl-closing { font-variant-numeric: tabular-nums; color: var(--ink1); }

/* ------------------------------------------------------------------ floor */
/* the ticker is pressable: a line you can send */
.kl-ticker { cursor: pointer; user-select: none; -webkit-user-select: none; transition: opacity 300ms var(--kl-ease-soft), transform 300ms var(--kl-ease-soft), color 120ms var(--ease); }
.kl-ticker:hover, .kl-ticker:focus-visible { color: var(--ink1); }
.kl-ticker:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hairline-strong); }
/* text-only: the type field takes the last row, the ticker moves up a row */
.kl-floor.is-text-only .kl-ticker { grid-row: 2; align-self: end; margin-bottom: 6px; }
/* a quiet caption (pane.note): one line, centred, above the last row */
.kl-note { grid-row: 2; align-self: end; margin: 0 0 4px; max-width: 100%; font-size: 0.8125rem; color: var(--ink2); text-align: center; opacity: 0; transform: translateY(4px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); pointer-events: none; }
.kl-note.is-in { opacity: 1; transform: none; }
.kl-floor.is-text-only .kl-note { grid-row: 1; }
/* "new below": at the floor row's right while the reader has scrolled up */
.kl-newbelow { position: absolute; right: 0; top: 4px; margin: 0; padding: 2px 0; border: 0; background: none; font: inherit; font-size: 0.8125rem; color: var(--ink2); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hairline-strong); }
.kl-newbelow:hover { color: var(--ink1); }
.kl-newbelow::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--annotation); margin-right: 8px; vertical-align: middle; }
/* the seat keeps kivi's orb visible in text-only (the base hides your mark there) */
.kl-stage[data-mic='denied'] .kl-floor__mark:has(.kl-orb) { display: flex; }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kl-card__scroll, .kl-gate, .kl-note, .kl-ticker { transition-duration: 1ms; }
  .kl-cut { animation: none; opacity: 1; }
  .kl-turn--clipping .kl-card.is-emerging { animation: none; }
}

/* the hourglass at the end of kivi's last card: an errand is still running (2026-09-07) */
.kl-hourglass { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 8px 0 0 2px; color: var(--ink2); vertical-align: middle; }
.kl-hourglass svg { width: 18px; height: 18px; animation: kl-hourglass 2s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
@keyframes kl-hourglass {
  0%, 22% { transform: rotate(0deg); }
  50%, 72% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .kl-hourglass svg { animation: none; }
}