/* Case simulations (web/sim.js), shared by the guide and the landing page. Theme tokens only. */
.ck-sim { --sim-r: 0px; margin: 20px 0 26px; max-width: 760px; min-width: 0; width: 100%; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.sim-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.sim-tabs::-webkit-scrollbar { display: none; }
.sim-tabs button { flex: none; font: inherit; font-size: 13.5px; padding: 6px 12px; border: 1px solid var(--line); background: none; color: var(--mute); border-radius: 999px; cursor: pointer; }
.sim-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.sim-tabs button:focus-visible, .sim-play:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.sim-stage { position: relative; border: 1.5px solid var(--ink); background: var(--paper); overflow: hidden; }
.sim-screen { position: relative; min-height: 300px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.sim-foot { display: flex; align-items: flex-start; gap: 16px; padding: 12px 22px 16px; border-top: 1px solid var(--line); }
.sim-cap { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.5; color: var(--ink-2, var(--ink)); }
.sim-play { flex: none; font: inherit; font-size: 13px; background: none; border: 1px solid var(--line); color: var(--ink); padding: 5px 12px; cursor: pointer; }
.sim-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.sim-prog i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }

/* an incoming message (the paste case) */
.sim-msg { align-self: flex-start; max-width: 88%; background: var(--wash); border: 1px solid var(--line); padding: 10px 14px; animation: sim-in .45s cubic-bezier(.2,.7,.1,1); }
.sim-msg small { display: block; font-size: 11.5px; color: var(--mute); margin-bottom: 4px; }
.sim-msg pre { margin: 0; font: inherit; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.sim-msg.sel pre { background: color-mix(in srgb, var(--gold) 28%, transparent); transition: background .3s; }

/* the quick add line */
.sim-qa { position: relative; display: flex; align-items: flex-start; gap: 10px; border-bottom: 2px solid var(--ink); padding: 6px 0 10px; font-size: clamp(16px, 2.2vw, 20px); line-height: 1.45; min-height: 44px; }
.sim-qa kbd { flex: none; font: inherit; font-size: .8em; line-height: 1; padding: 4px 7px; border: 1.5px solid var(--ink); margin-top: 2px; }
.sim-line { min-width: 0; overflow-wrap: anywhere; }
.pasted .sim-line { font-size: .78em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.sim-caret { flex: none; width: 2px; height: 1.2em; background: var(--gold); margin-top: 3px; margin-left: -8px; animation: sim-blink 1s steps(1) infinite; }
.entered .sim-caret { visibility: hidden; }
.sim-enter { position: absolute; right: 0; bottom: 10px; font-size: 12px; font-weight: 500; border: 1.5px solid var(--ink); padding: 2px 8px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s, background .2s, color .2s; }
.entered .sim-enter { opacity: 1; transform: none; background: var(--ink); color: var(--on-ink); }
.done .sim-enter { opacity: 0; }
.sim-line mark { background: none; color: inherit; border-bottom: 3px solid var(--gold); padding-bottom: 1px; }
.sim-line mark.k-kind { border-color: var(--ink); }
.sim-line mark.k-money, .sim-line mark.k-join { border-color: var(--ft-green, var(--gold)); }
.sim-line mark.k-repeat, .sim-line mark.k-zone, .sim-line mark.k-project { border-color: var(--ft-blue, var(--gold)); }

/* what it understood */
.sim-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.sim-chip { font-size: 13px; padding: 4px 10px; border: 1px solid var(--line); background: var(--wash); animation: sim-pop .35s cubic-bezier(.34,1.5,.64,1); }
.sim-chip.k-kind { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.sim-chip.k-when, .sim-chip.k-time { border-color: var(--gold); }
.entered .sim-chips { opacity: .45; transition: opacity .4s; }

/* the result and what follows */
.sim-out { display: flex; flex-direction: column; gap: 12px; }
.sim-card { display: flex; align-items: center; gap: 14px; animation: sim-drop .5s cubic-bezier(.2,.8,.2,1.15); }
.sim-card .sim-bar { flex: none; width: 96px; height: 14px; background: var(--ink); animation: sim-grow .6s .1s cubic-bezier(.2,.8,.2,1) backwards; transform-origin: left; }
.sim-card.k-claim .sim-bar { background: var(--gold); }
.sim-card small { display: block; font-size: 12.5px; color: var(--mute); }
.sim-card b { display: block; font-size: 19px; font-weight: 600; line-height: 1.25; }
.sim-note { display: flex; gap: 10px; align-items: center; align-self: flex-end; width: min(300px, 100%); padding: 10px 14px; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 0 10px 24px -14px rgba(0,0,0,.4); animation: sim-slide .5s cubic-bezier(.2,.8,.2,1.1); }
.sim-note .sim-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.sim-note small { display: block; font-size: 11.5px; color: var(--mute); } .sim-note b { font-size: 14.5px; font-weight: 600; }
.sim-devs { display: flex; gap: 8px; justify-content: flex-end; }
.sim-devs span { font-size: 12px; padding: 3px 9px; border: 1px solid var(--line); color: var(--mute); animation: sim-light .5s backwards; }
.sim-devs span:nth-child(1) { animation-delay: .3s; } .sim-devs span:nth-child(2) { animation-delay: .55s; } .sim-devs span:nth-child(3) { animation-delay: .8s; }
.sim-ledger { display: flex; align-items: baseline; gap: 12px; animation: sim-in .4s; }
.sim-ledger small { font-size: 13px; color: var(--mute); } .sim-ledger b { font-size: 26px; font-weight: 600; }
.sim-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sim-dates span { font-size: 14px; padding: 5px 11px; border: 1.5px solid var(--gold); animation: sim-pop .4s backwards; }
.sim-dates em { font-style: normal; font-size: 12.5px; color: var(--mute); animation: sim-in .3s backwards; }
.sim-dates > :nth-child(2), .sim-dates > :nth-child(3) { animation-delay: .35s; } .sim-dates > :nth-child(4), .sim-dates > :nth-child(5) { animation-delay: .7s; }
.sim-zones { display: flex; gap: 12px; }
.sim-zones > div { flex: 1; max-width: 180px; padding: 10px 14px; border: 1px solid var(--line); animation: sim-in .4s backwards; }
.sim-zones > div.here { border: 1.5px solid var(--ink); animation-delay: .35s; }
.sim-zones small { display: block; font-size: 12px; color: var(--mute); } .sim-zones b { font-size: 24px; font-weight: 600; margin-right: 6px; } .sim-zones em { font-style: normal; font-size: 12.5px; color: var(--gold-text, var(--gold)); }
.sim-join { display: flex; align-items: center; gap: 12px; }
.sim-btn { background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 500; padding: 8px 16px; animation: sim-pulse 1.6s .3s 2; }
.sim-join small { font-size: 12.5px; color: var(--mute); }
.sim-gantt { --n: 5; }
.sim-days, .sim-row { display: grid; grid-template-columns: 70px repeat(7, 1fr); gap: 0; align-items: center; }
.sim-days::before { content: ''; }
.sim-days span { font-size: 11.5px; color: var(--mute); text-align: center; border-left: 1px solid var(--line); padding: 2px 0; }
.sim-row { height: 30px; border-top: 1px solid var(--line); }
.sim-row small { font-size: 12px; color: var(--mute); }
.sim-row i { grid-column: 2 / span var(--n); height: 12px; background: var(--ink); transform-origin: left; animation: sim-grow .8s .15s cubic-bezier(.2,.8,.2,1) backwards; }

@keyframes sim-blink { 50% { opacity: 0; } }
@keyframes sim-pop { from { opacity: 0; transform: scale(.7); } }
@keyframes sim-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes sim-drop { from { opacity: 0; transform: translateY(-16px); } }
@keyframes sim-grow { from { transform: scaleX(0); } }
@keyframes sim-slide { from { opacity: 0; transform: translateX(30px); } }
@keyframes sim-light { from { opacity: 0; } 60% { background: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--ink); } }
@keyframes sim-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 35%, transparent); } }

@media (max-width: 560px) {
  .sim-screen { min-height: 320px; padding: 16px 14px 14px; }
  .sim-foot { padding: 10px 14px 14px; flex-direction: column; gap: 8px; }
  .sim-card .sim-bar { width: 56px; }
  .sim-zones b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-sim *, .ck-sim *::before { animation: none !important; transition: none !important; }
  .sim-caret, .sim-prog { display: none; }
}

/* scenes that are not quick add (search, shortcuts, standby) */
.sim-alt { display: none; position: relative; }
.ck-sim.alt .sim-msg, .ck-sim.alt .sim-qa, .ck-sim.alt .sim-chips, .ck-sim.alt .sim-out { display: none; }
.ck-sim.alt .sim-alt { display: block; min-height: 300px; }
/* pages style kbd their own way (the guide uses a code font): inside a scene keys look like keys */
.ck-sim kbd { font-family: inherit !important; background: var(--paper) !important; color: var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.ck-sim .sim-press kbd { border: 1.5px solid var(--ink) !important; border-bottom-width: 4px !important; padding: 6px 10px !important; }
.ck-sim .sa-keys kbd { border: 1.5px solid var(--ink) !important; border-bottom-width: 3px !important; padding: 3px 8px !important; }
.ck-sim .sa-keys.on kbd { border-bottom-width: 1.5px !important; background: var(--ink) !important; color: var(--on-ink) !important; }
.sim-tabs[hidden] { display: none; }
/* the key being pressed, bottom right of the screen */
.sim-press { position: absolute; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; z-index: 3; }
.sim-press.on { animation: sim-press 1.1s ease-out forwards; }
.sim-press kbd { font: inherit; font-size: 20px !important; font-weight: 600 !important; line-height: 1.2 !important; min-width: 40px; text-align: center; padding: 6px 10px; border: 1.5px solid var(--ink); border-bottom-width: 4px; background: var(--paper); }
.sim-press span { font-size: 13px; color: var(--mute); background: var(--paper); padding: 2px 6px; }
@keyframes sim-press { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: none; } 22% { transform: translateY(2px); } 32% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* search */
.sa-keys { display: flex; gap: 6px; }
.sa-keys kbd { font: inherit; font-size: 13px !important; font-weight: 500 !important; padding: 3px 8px; border: 1.5px solid var(--ink); border-bottom-width: 3px; transition: transform .12s; }
.sa-keys.on kbd { transform: translateY(2px); border-bottom-width: 1.5px; background: var(--ink); color: var(--on-ink); }
.sa-pal { margin-top: 12px; border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 0 18px 40px -24px rgba(0,0,0,.45); opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1.1); }
.sa-pal.open { opacity: 1; transform: none; }
.sa-pal.go { opacity: .5; transition-duration: .4s; }
.sa-in { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 16px; min-height: 22px; }
.sa-mag { width: 13px; height: 13px; border: 2px solid var(--mute); border-radius: 50%; position: relative; flex: none; }
.sa-mag::after { content: ''; position: absolute; width: 6px; height: 2px; background: var(--mute); right: -6px; bottom: -3px; transform: rotate(45deg); }
.sa-in .sim-caret { margin-left: -8px; }
.sa-list { padding: 4px 0 8px; min-height: 150px; }
.sa-h { display: block; font-size: 11.5px; color: var(--mute); padding: 8px 14px 2px; }
.sa-i { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 7px 14px; font-size: 14px; animation: sim-in .25s; }
.sa-i b { font-weight: 500; } .sa-i span { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.sa-i kbd { font: inherit; font-size: 11.5px; border: 1px solid var(--line); padding: 1px 6px; color: var(--mute); }
.sa-i.hi { background: var(--wash); box-shadow: inset 3px 0 0 var(--gold); }
.sa-i mark { background: none; color: inherit; border-bottom: 2px solid var(--gold); }
.sa-toast { position: absolute; right: 0; bottom: 0; padding: 10px 14px; border: 1.5px solid var(--ink); background: var(--paper); display: flex; flex-direction: column; animation: sim-slide .4s cubic-bezier(.2,.8,.2,1.1); }
.sa-toast b { font-size: 14px; } .sa-toast span { font-size: 12.5px; color: var(--mute); }

/* shortcuts: a small app */
.sk-app { border: 1.5px solid var(--ink); min-height: 230px; position: relative; overflow: hidden; }
.sk-nav { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sk-nav span { padding: 3px 8px; color: var(--mute); position: relative; }
.sk-nav span.on { color: var(--ink); font-weight: 500; }
.sk-nav span.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -9px; height: 2px; background: var(--ink); }
.sk-body { padding: 14px 16px; }
.sk-title { display: flex; align-items: baseline; gap: 10px; }
.sk-title b { font-size: 22px; font-weight: 600; } .sk-title em { font-style: normal; font-size: 13px; color: var(--gold-text, var(--gold)); border: 1px solid var(--gold); padding: 1px 8px; }
.sk-tabs { display: flex; gap: 14px; margin: 8px 0 12px; font-size: 13px; color: var(--mute); border-bottom: 1px solid var(--line); min-height: 4px; }
.sk-tabs:empty { border: 0; margin: 6px 0; }
.sk-tabs span { padding-bottom: 6px; } .sk-tabs span.on { color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--ink); }
.sk-content { display: grid; gap: 8px; }
.sk-content i { display: block; height: 10px; width: 40%; background: var(--faint); }
.sk-content i.l { width: 70%; background: var(--ink); }
.sk-content.v1 { grid-template-columns: repeat(8, 1fr); }
.sk-content.v1 i { grid-column: calc(var(--a) + 1) / calc(var(--b) + 2); width: auto; background: var(--ink); }
.sk-content.v1 i:nth-child(2) { background: var(--gold); }
.sk-content.v2 b { display: block; height: 34px; border: 1px solid var(--line); }
.sk-content.v2 { grid-template-columns: repeat(3, 1fr); }
.sk-content.v2.t1, .sk-content.v2.t2 { grid-template-columns: 1fr; }
.sk-content.v2.t2 i { width: 60%; background: var(--ft-blue, var(--mute)); height: 8px; }
.sk-sw { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(280px, 86%); border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 0 16px 36px -20px rgba(0,0,0,.5); padding: 4px 0; animation: sim-pop .25s; }
.sk-sw div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; font-size: 13.5px; }
.sk-sw div.hi { background: var(--wash); box-shadow: inset 3px 0 0 var(--gold); }
.sk-sw b { font-weight: 500; } .sk-sw span { font-size: 12px; color: var(--mute); }

/* standby */
.ss-scr { position: relative; min-height: 260px; border: 1.5px solid var(--ink); background: var(--paper); overflow: hidden; display: grid; place-items: center; text-align: center; opacity: .35; transition: opacity .6s; }
.ss-scr.on { opacity: 1; }
.ss-in { padding: 18px 14px 56px; transition: transform 2s ease-in-out; }
.ss-scr.drift .ss-in { transform: translate(4px, -3px); }
.ss-day { display: block; font-size: 13px; color: var(--mute); }
.ss-clock { display: inline-flex; align-items: flex-start; gap: 4px; line-height: 1; margin: 4px 0; }
.ss-clock b { font-size: clamp(44px, 9vw, 72px); font-weight: 600; letter-spacing: -.02em; }
.ss-clock sup { font-size: 15px; color: var(--gold-text, var(--gold)); margin-top: 8px; }
.ss-clock em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--mute); align-self: flex-end; margin-bottom: 8px; }
.ss-zones { display: block; font-size: 12.5px; color: var(--mute); }
.ss-line { margin: 10px 0 2px; font-size: 15px; font-weight: 500; } .ss-next { margin: 0; font-size: 13.5px; color: var(--mute); } .ss-next b { color: var(--ink); font-weight: 500; }
.ss-pets { position: absolute; left: 0; right: 0; bottom: 6px; height: 40px; }
.ss-pet { position: absolute; bottom: 0; width: 56px; height: 36px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: ss-walk 14s linear infinite, ss-bob .5s ease-in-out infinite alternate; }
.ss-pet.b { width: 46px; stroke: var(--gold); animation-duration: 18s, .42s; animation-delay: -6s, 0s; }
.ss-pet circle { fill: currentColor; }
@keyframes ss-walk { from { left: -60px; } to { left: 100%; } }
@keyframes ss-bob { to { translate: 0 -2px; } }
.ss-alarm { position: absolute; top: 12px; right: 12px; display: flex; gap: 10px; text-align: left; width: min(260px, 80%); padding: 10px 12px; border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 0 14px 30px -18px rgba(0,0,0,.5); animation: sim-slide .45s cubic-bezier(.2,.8,.2,1.1); z-index: 2; }
.ss-alarm i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); margin-top: 4px; }
.ss-alarm small { display: block; font-size: 11.5px; color: var(--mute); } .ss-alarm b { display: block; font-size: 14px; font-weight: 600; }
.ss-alarm span { display: flex; gap: 12px; margin-top: 4px; font-size: 12.5px; } .ss-alarm u { text-underline-offset: 3px; }
@media (max-width: 560px) { .ss-alarm { top: auto; bottom: 46px; left: 10px; right: 10px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .ss-pet { animation: none !important; left: 30%; } .ss-pet.b { left: 55%; } .ss-scr { opacity: 1; } }