/* The demo layer (demo-chrome.js). Demo hosts only. */
body.kdemo-leaving > *:not(#kept-demo-bar) { transition: opacity .25s, filter .25s; opacity: .35; filter: blur(2px); }

/* ---- Try Kept ---------------------------------------------------------------- */
.kobj { position: fixed; z-index: 115; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 300px;
  background: var(--k-surface); color: var(--k-ink); border: 1px solid var(--k-line); border-radius: 18px; box-shadow: var(--k-shadow-lift);
  overflow: hidden; transition: width .32s cubic-bezier(.2,.9,.25,1.12), border-radius .32s; font-size: 14px; }
.kobj-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.kobj-k { font-weight: 700; letter-spacing: -.005em; }
.kobj-p { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--k-mut); display: inline-flex; }
.kobj-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--k-surface-2); overflow: hidden; min-width: 30px; }
.kobj-bar i { display: block; height: 100%; background: var(--k-green); border-radius: 2px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.kobj-m { color: var(--k-dim); transition: transform .3s; }
.kobj-b { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.kobj-b > * { min-height: 0; overflow: hidden; }
.kobj.min .kobj-b { grid-template-rows: 0fr; opacity: 0; }
.kobj.min { width: 220px; }
.kobj:not(.min) .kobj-m { transform: rotate(90deg); }
.kobj ol { list-style: none; margin: 0; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kobj li { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 11px; color: var(--k-dim); flex-wrap: wrap; }
.kobj li.now { color: var(--k-ink); background: var(--k-surface-2); }
.kobj li.done { color: var(--k-mut); }
.kobj li.done .kobj-l { text-decoration: line-through; text-decoration-color: var(--k-line-2); }
.kobj-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  border: 1.5px solid var(--k-line-2); flex: none; }
.kobj li.now .kobj-n { border-color: var(--k-ink); }
.kobj li.done .kobj-n { background: var(--k-green); border-color: var(--k-green); color: #fff; }
.kobj-l { flex: 1; font-weight: 600; min-width: 0; }
.kobj-act { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; border-radius: 10px; padding: 7px 11px;
  background: var(--k-ink); color: var(--k-surface); font: 600 12.5px/1 inherit; font-family: inherit; }
.kobj-act:hover { opacity: .9; }
a.kobj-act { text-decoration: none; }
.kobj-act.quiet { background: transparent; color: var(--k-mut); border: 1px solid var(--k-line); }
.kobj-next { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; margin: 6px 0 4px; padding-top: 12px; border-top: 1px solid var(--k-line); }
.kobj-end .kobj-next b { font-family: inherit; font-weight: 650; font-size: 14px; letter-spacing: 0; }
.kobj-next .kobj-act { margin-top: 4px; }
.kobj-end { padding: 6px 18px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.kobj-end-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--k-green-bg); color: var(--k-green); }
.kobj-end b { font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 26px; letter-spacing: -.01em; }
.kobj-end span { color: var(--k-mut); font-size: 13px; line-height: 1.45; }
.kobj.complete .kobj-bar i { background: var(--k-green); }

/* ---- Handoff ------------------------------------------------------------------- */
.khand-wrap { position: fixed; inset: 0; z-index: 140; background: rgba(10,16,13,.45); display: grid; place-items: center; padding: 20px; }
.khand { position: relative; width: min(360px, 100%); background: var(--k-surface); color: var(--k-ink); border-radius: 22px; padding: 22px 22px 18px;
  box-shadow: var(--k-shadow-lift); border: 1px solid var(--k-line); text-align: center; }
.khand-x { position: absolute; top: 12px; right: 12px; border: 0; background: var(--k-surface-2); color: var(--k-mut); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.khand-k { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--k-green); }
.khand h3 { margin: 8px 0 14px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.khand-qr { width: 216px; max-width: 70vw; margin: 0 auto; padding: 10px; background: #fff; border-radius: 16px; border: 1px solid var(--k-line); transition: opacity .3s, filter .3s; }
.khand-qr svg { display: block; width: 100%; height: auto; }
.khand-qr.gone { opacity: .2; filter: blur(3px); }
.khand p { color: var(--k-mut); font-size: 13.5px; margin: 14px 0 12px; }
.khand-link { display: flex; gap: 8px; }
.khand-link input { flex: 1; min-width: 0; border: 1px solid var(--k-line); border-radius: 10px; padding: 8px 10px; font: 12px var(--mono, ui-monospace, monospace);
  background: var(--k-surface-2); color: var(--k-mut); }
.khand-t { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--k-dim); }

/* ---- Seats on a phone: one button in the demo strip --------------------------- */
.kseat-m { position: fixed; z-index: 2147483647; top: 0; right: 6px; height: var(--kept-demo-h, 30px); display: flex; align-items: center; }
.kseat-btn { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff; font: 650 11.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.kseat-fan[hidden] { display: none; }
.kseat-fan { position: absolute; top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; gap: 6px; }
.kseat-fan button { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 11px; border-radius: 14px; border: 1px solid var(--k-line); cursor: pointer;
  background: var(--k-surface); color: var(--k-ink); box-shadow: var(--k-shadow-lift); font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; }
.kseat-fan button.on { background: var(--k-ink); color: var(--k-surface); }
@media (max-width: 640px), (pointer: coarse) {
  /* Open: a sheet under the demo strip. Collapsed: a pill IN the strip, so it
     never sits over the screen's own header (the safety button lives there). */
  .kobj { left: 12px; right: 12px; width: auto; top: calc(var(--kept-demo-h, 30px) + 8px + env(safe-area-inset-top)); bottom: auto; z-index: 2147483646; }
  .kobj.min { top: 0; left: 6px; right: auto; width: auto; height: var(--kept-demo-h, 30px); background: none; border: 0; box-shadow: none; border-radius: 0;
    display: flex; align-items: center; overflow: visible; z-index: 2147483647; }
  .kobj.min .kobj-h { height: 22px; padding: 0 9px; gap: 6px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: 11.5px; }
  .kobj.min .kobj-k { font-weight: 650; } .kobj.min .kobj-p { color: rgba(255,255,255,.85); font-size: 11px; }
  .kobj.min .kobj-bar, .kobj.min .kobj-m, .kobj.min .kobj-b { display: none; }
}

@media (prefers-reduced-motion: reduce) { .kobj, .kobj-b, .kobj-bar i { transition: none !important; } }
/* A slide-over is open: the demo layer steps out of the way until it closes. */
.kobj, .kdock { transition: opacity .2s, transform .25s; }
body:has(.panel.show) .kobj, body:has(.panel.show) .kdock, body:has(.khand-wrap) .kdock { opacity: 0; pointer-events: none; }
body:has(.panel.show) .kobj { transform: translateY(12px); }
/* Room for the dock and Try Kept at the end of a long page. */
body.kdemo-on #main { padding-bottom: 140px; }
/* Toasts sit above the dock, not under it. */
body.kdemo-on .toast, body.kdemo-on #toast2 { bottom: calc(96px + env(safe-area-inset-bottom)) !important; z-index: 125 !important; }