/* Walkthrough player: form -> Make -> Airtable -> dashboard.
   Used by index.html, mounted by walkthrough.js into [data-walkthrough].
   Uses the host page tokens (--text, --muted, --accent, --line, --surface, --on-accent, --font)
   with Nocturne fallbacks. Everything is scoped under .wt. No em dash anywhere. */
.wt {
  --ui: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Assistant", sans-serif;
  font-family: var(--font, "Assistant", system-ui, sans-serif);
  color: var(--text);
  position: relative;
}
.wt *, .wt *::before, .wt *::after { box-sizing: border-box; }
.wt [hidden] { display: none !important; }
.wt .stage { line-height: 1.4; text-align: left; }
.wt .stage p, .wt .stage h3, .wt .stage label { margin: 0; color: inherit; letter-spacing: normal; }
.wt .steps li { margin: 0; padding: 0; }

/* step rail */
.wt .steps { list-style: none; padding: 0; margin: 30px 0 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wt .steps button { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); position: relative; overflow: hidden; }
.wt .steps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wt .steps .n { display: block; font-size: 12px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.wt .steps .t { display: block; font-size: 15px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.wt .steps .bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--line); }
.wt .steps .bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.wt .steps [aria-current="step"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.wt .steps [aria-current="step"] .t, .wt .steps .done .t { color: var(--text); }
.wt .steps .done .bar i { width: 100%; }

/* player */
.wt .player { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 50px rgba(0,0,0,.35); }
.wt .fit { position: relative; width: 100%; overflow: hidden; }
.wt .stage { position: absolute; left: 0; top: 0; width: 760px; height: 440px; transform-origin: 0 0; font-family: var(--ui); }
.wt .viewport { position: relative; width: 760px; height: 440px; overflow: hidden; background: #fff; }
.wt .scene { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; pointer-events: none; overflow: hidden; }
.wt .scene.on { opacity: 1; }
.wt .world { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .9s cubic-bezier(.65,0,.25,1); }

/* cursor */
.wt .cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 18px; height: 24px; transition: transform .7s cubic-bezier(.55,0,.25,1), opacity .3s; pointer-events: none; }
.wt .cursor svg { display: block; transition: transform .12s; transform-origin: 2px 2px; }
.wt .cursor.down svg { transform: scale(.86); }
.wt .ripple { position: absolute; z-index: 19; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid rgba(203,162,76,.9); pointer-events: none; animation: wt-rip .55s ease-out forwards; }
@keyframes wt-rip { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* ---------- scene 1: Noga's The Shift page (her real styling) ---------- */
.wt .lp { width: 760px; height: 440px; background: #fff; color: #50514c; font-family: "Assistant", sans-serif; direction: rtl; text-align: right; position: relative; }
.wt .lp-top { height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 0 26px; font-size: 9px; letter-spacing: .28em; color: #8b8c86; }
.wt .lp-body { display: grid; grid-template-columns: 1fr 300px; gap: 48px; padding: 26px 46px 0; }
.wt .lp-eyebrow { font-size: 10px; letter-spacing: .2em; color: #8b8c86; }
.wt .lp-rule { width: 30px; height: 1px; background: #8b8c86; margin: 8px 0 14px; }
.wt .lp-h { font-weight: 200; font-size: 34px; line-height: 1.15; margin: 0 0 16px; color: #50514c; }
.wt .lp-copy p { font-size: 12.5px; line-height: 1.75; margin: 0 0 10px; }
.wt .lp-copy b { font-weight: 700; }
.wt .lp-form { position: relative; }
.wt .f label { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 5px; }
.wt .f { margin-bottom: 14px; }
.wt .fld { height: 38px; border: 1px solid #d9dfd2; background: #fff; display: flex; align-items: center; padding: 0 10px; font-size: 13px; color: #3d3e3a; transition: border-color .2s, box-shadow .2s; }
.wt .fld.ltr { direction: ltr; justify-content: flex-end; }
.wt .fld.area { height: 54px; align-items: flex-start; padding-top: 8px; margin-bottom: 14px; }
.wt .fld.focus { border-color: #50514c; box-shadow: 0 0 0 2px rgba(80,81,76,.12); }
.wt .caret { display: none; width: 1px; height: 15px; background: #3d3e3a; margin-inline-start: 1px; animation: wt-blink 1s steps(1) infinite; }
.wt .fld.focus .caret { display: inline-block; }
@keyframes wt-blink { 50% { opacity: 0; } }
.wt .tog { font-size: 11.5px; margin: 2px 0 14px; display: flex; gap: 6px; align-items: center; }
.wt .tog .plus { font-size: 15px; line-height: 1; color: #8b8c86; }
.wt .tog .opt { color: #8b8c86; }
.wt .btn { display: inline-block; background: #50514c; color: #fff; font-weight: 700; font-size: 12px; padding: 11px 24px; box-shadow: 0 6px 14px rgba(80,81,76,.22); transition: background .2s, transform .12s; }
.wt .btn.busy { background: #6c6d67; }
.wt .priv { font-size: 9.5px; color: #8b8c86; margin: 10px 0 0; }
.wt .ok { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 8px; animation: wt-fadeUp .5s ease both; }
.wt .ok .tick { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #50514c; display: grid; place-items: center; font-size: 18px; }
.wt .ok strong { font-size: 20px; font-weight: 300; }
.wt .ok span { font-size: 12.5px; color: #8b8c86; }
@keyframes wt-fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- scene 2: the Make scenario (real module names and routes) ---------- */
.wt .mk { width: 1100px; height: 440px; background-color: #f3f3f6; background-image: radial-gradient(#d9d9e2 1px, transparent 1.2px); background-size: 18px 18px; position: relative; }
.wt .mk svg.links { position: absolute; inset: 0; }
.wt .mk .lk { fill: none; stroke: #c3c3cf; stroke-width: 2.5; stroke-dasharray: 1 7; stroke-linecap: round; transition: stroke .3s; }
.wt .mk .lk.lit { stroke: #7b3fe4; }
.wt .mk .flt { font-size: 10px; fill: #7a7a8c; font-family: var(--ui); }
.wt .mk .pk { fill: #7b3fe4; opacity: 0; }
.wt .nd { position: absolute; width: 116px; margin-left: -58px; text-align: center; }
.wt .nd .c { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; position: relative; box-shadow: 0 2px 6px rgba(20,20,40,.18); transition: transform .25s, box-shadow .25s, filter .3s; }
.wt .nd.rt .c { width: 40px; height: 40px; background: #9aa1ad; }
.wt .nd .c svg { width: 24px; height: 24px; }
.wt .nd.rt .c svg { width: 18px; height: 18px; }
.wt .nd .nm { font-size: 10.5px; font-weight: 700; color: #2b2b3a; margin-top: 7px; line-height: 1.25; }
.wt .nd .sb { font-size: 9px; color: #7a7a8c; line-height: 1.3; }
.wt .nd.dim .c { filter: grayscale(.2) opacity(.55); }
.wt .nd.dim .nm, .wt .nd.dim .sb { opacity: .55; }
.wt .nd.run .c { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(123,63,228,.18), 0 2px 8px rgba(20,20,40,.2); }
.wt .nd .ops { position: absolute; top: -4px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: #2b2b3a; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.wt .nd.rt .ops { right: -12px; }
.wt .nd.done .ops { opacity: 1; transform: none; }
.wt .mk-hud { position: absolute; z-index: 3; font-family: var(--ui); }
.wt .mk-title { top: 12px; left: 12px; background: #fff; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 700; color: #2b2b3a; box-shadow: 0 1px 4px rgba(0,0,0,.1); display: flex; gap: 8px; align-items: center; }
.wt .mk-title small { font-weight: 500; color: #7a7a8c; font-size: 11px; }
.wt .mk-bottom { bottom: 12px; left: 12px; display: flex; gap: 10px; align-items: center; }
.wt .mk-run { background: #7b3fe4; color: #fff; font-size: 12px; font-weight: 700; border-radius: 18px; padding: 8px 16px; }
.wt .mk-sched { background: #fff; border-radius: 18px; padding: 6px 12px; font-size: 11px; color: #2b2b3a; display: flex; gap: 8px; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.wt .sw { width: 26px; height: 14px; border-radius: 7px; background: #3bb273; position: relative; }
.wt .sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.wt .toast { position: absolute; z-index: 4; top: 16px; right: 16px; width: 340px; box-sizing: border-box; background: #fff; border: 1px solid #e6e6ee; border-radius: 14px; box-shadow: 0 14px 40px rgba(20,20,40,.24), 0 2px 6px rgba(20,20,40,.08); padding: 14px 18px 14px; display: grid; gap: 8px; line-height: 1.4; transform: translateY(-140%); transition: transform .6s cubic-bezier(.2,1.2,.4,1); font-family: var(--ui); overflow: hidden; }
.wt .toast.in { transform: none; }
.wt .toast .t-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #7a7a8c; direction: ltr; }
.wt .toast .ic { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #fbe9e7; color: #d93025; display: grid; place-items: center; }
.wt .toast .app { font-weight: 700; color: #2b2b3a; }
.wt .toast .when { margin-left: auto; direction: rtl; }
.wt .toast .sub { font-size: 15px; font-weight: 700; color: #20262c; direction: rtl; text-align: right; line-height: 1.45; padding-top: 2px; }
.wt .toast .pre { font-size: 12.5px; color: #5f6670; direction: rtl; text-align: right; line-height: 1.45; }
.wt .toast .t-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #efeff4; padding-top: 8px; margin-top: 2px; font-size: 10.5px; color: #8a8a9c; direction: ltr; }
.wt .toast .t-foot b { color: #7b3fe4; font-weight: 700; }

/* ---------- scene 3: Airtable grid (real base, table, view and fields) ---------- */
.wt .w-at { width: 760px; height: 440px; background: #fff; color: #1d1f25; font-size: 12px; position: relative; }
.wt .at-top { height: 44px; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid #e5e7eb; gap: 10px; }
.wt .bicon { width: 24px; height: 24px; border-radius: 6px; background: #0e8a16; display: grid; place-items: center; }
.wt .at-base { font-weight: 700; font-size: 14px; }
.wt .at-tabs { display: flex; gap: 16px; margin: 0 auto; font-size: 12px; color: #4c5563; }
.wt .at-tabs .on { color: #1d1f25; font-weight: 600; box-shadow: inset 0 -2px 0 #0e8a16; padding-bottom: 12px; margin-bottom: -13px; }
.wt .at-share { background: #0e8a16; color: #fff; font-weight: 700; border-radius: 6px; padding: 5px 11px; font-size: 12px; }
.wt .at-tbls { height: 30px; background: #e6f5e3; display: flex; align-items: flex-end; padding: 0 10px; gap: 2px; font-size: 12px; }
.wt .at-tbls span { padding: 6px 12px; color: #3b4452; }
.wt .at-tbls .on { background: #fff; border-radius: 5px 5px 0 0; font-weight: 600; color: #1d1f25; }
.wt .at-view { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid #e5e7eb; font-size: 12px; }
.wt .at-vname { font-weight: 700; display: flex; gap: 6px; align-items: center; margin-inline-end: auto; }
/* border: 0 guards against a host page's own .chip class */
.wt .chip { border: 0; border-radius: 5px; padding: 4px 8px; font-size: 11px; color: #1d1f25; white-space: nowrap; }
.wt .chip.h { background: #cfe6ff; }
.wt .chip.f { background: #d4f5d0; }
.wt .chip.s { background: #ffe0cc; }
.wt .grid { position: relative; }
.wt .gh, .wt .gr { display: grid; grid-template-columns: 34px 100px 88px 92px 132px 118px 124px 72px; }
.wt .gh > div, .wt .gr > div { height: 32px; display: flex; align-items: center; padding: 0 8px; border-right: 1px solid #eceef2; border-bottom: 1px solid #eceef2; white-space: nowrap; overflow: hidden; }
.wt .gh > div { background: #f7f8fa; font-weight: 600; font-size: 11.5px; gap: 5px; color: #2b3240; }
.wt .gh .ty { color: #7b8494; font-size: 10px; font-weight: 700; }
.wt .gr { background: #fff; }
.wt .gr > div { font-size: 12px; }
.wt .gr .rn { color: #8a93a3; justify-content: center; font-size: 11px; }
.wt .gr .he { direction: rtl; unicode-bidi: plaintext; }
/* new grid row highlight */
.wt .gr.is-new { animation: wt-rowIn .7s cubic-bezier(.2,1,.3,1) both; }
.wt .gr.is-new > div { animation: wt-hl 2.6s ease-out both; }
@keyframes wt-rowIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes wt-hl { 0%, 35% { background: #fff6cc; } 100% { background: #fff; } }
.wt .gr .add { color: #8a93a3; }
.wt .pill { border-radius: 10px; padding: 2px 8px; font-size: 11px; }
.wt .pill.teal { background: #c2f5e9; }
.wt .pill.blue { background: #cfdfff; }
.wt .at-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; border-top: 1px solid #e5e7eb; font-size: 11px; color: #4c5563; display: flex; align-items: center; padding: 0 12px; background: #fff; }

/* ---------- scene 4: Airtable Interface dashboard (real page and tiles) ---------- */
.wt .db { width: 760px; height: 440px; background: #f4f5f7; display: grid; grid-template-columns: 170px 1fr; color: #1d1f25; }
.wt .db-side { background: #0b8a12; color: #fff; padding: 14px 10px; }
.wt .db-side .brand { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 13px; margin-bottom: 16px; }
.wt .db-side .brand .bicon { background: rgba(255,255,255,.18); }
.wt .db-side .pg { font-size: 11.5px; padding: 6px 8px; border-radius: 5px; direction: rtl; text-align: right; }
.wt .db-side .pg.on { background: rgba(0,0,0,.18); font-weight: 700; }
.wt .db-main { background: #fff; margin: 10px 10px 0 0; border-radius: 8px 8px 0 0; padding: 12px 16px; overflow: hidden; }
.wt .db-filter { display: flex; font-size: 11px; border: 1px solid #dfe2e7; border-radius: 5px; width: max-content; }
.wt .db-filter span { padding: 5px 9px; border-right: 1px solid #dfe2e7; color: #3b4452; }
.wt .db-filter span:last-child { border: 0; color: #8a93a3; min-width: 150px; }
.wt .db-title { font-size: 22px; font-weight: 700; margin: 12px 0 10px; }
.wt .db-grid { display: grid; grid-template-columns: 150px 150px 1fr; gap: 12px; }
.wt .tile { background: #fff; border: 1px solid #cfd3da; border-radius: 8px; padding: 10px 12px; height: 102px; position: relative; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.wt .tile .tt { direction: rtl; text-align: right; font-size: 12px; font-weight: 600; color: #2b3240; }
.wt .tile .num { font-size: 34px; font-weight: 500; line-height: 1; margin-top: 18px; height: 36px; position: relative; overflow: hidden; font-variant-numeric: tabular-nums; }
.wt .tile .num span { position: absolute; left: 0; top: 0; transition: transform .6s cubic-bezier(.3,1.3,.5,1), opacity .4s; }
.wt .tile .num .nx { transform: translateY(110%); opacity: 0; }
.wt .tile.bump .num .cur { transform: translateY(-110%); opacity: 0; }
.wt .tile.bump .num .nx { transform: none; opacity: 1; }
.wt .tile.bump { border-color: #0b8a12; box-shadow: 0 0 0 3px rgba(11,138,18,.16); }
.wt .plus1 { position: absolute; left: 58px; top: 44px; background: #0b8a12; color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s; }
.wt .tile.bump .plus1 { opacity: 1; transform: none; }
.wt .pie-card { grid-row: span 2; background: #fff; border: 1px solid #e3e6eb; border-radius: 8px; padding: 10px 12px; }
.wt .pie-card .tt { direction: rtl; text-align: right; font-size: 12px; font-weight: 600; border-bottom: 1px solid #eceef2; padding-bottom: 8px; }
.wt .pie-wrap { display: flex; align-items: center; gap: 14px; padding-top: 16px; }
.wt .pie { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#43b9d8 0 10.5%, #f7c234 10.5% 100%); flex: none; }
.wt .legend { font-size: 10.5px; color: #3b4452; display: grid; gap: 4px; }
.wt .legend .lt { color: #8a93a3; font-size: 12px; direction: rtl; }
.wt .legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }

/* end card */
.wt .endcard { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; background: rgba(14,27,24,.9); backdrop-filter: blur(3px); color: #eaf1ec; font-family: var(--font); direction: rtl; opacity: 0; pointer-events: none; transition: opacity .5s; }
.wt .endcard.on { opacity: 1; pointer-events: auto; }
.wt .endcard .k { color: var(--accent); font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.wt .endcard .big { font-size: 34px; font-weight: 800; line-height: 1.2; max-width: 20ch; text-wrap: balance; }
.wt .endcard button { all: unset; cursor: pointer; margin-top: 8px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 16px; padding: 10px 26px; border-radius: 40px; }
.wt .endcard button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* caption + controls */
.wt .below { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin-top: 14px; }
.wt .caption { margin: 0; font-size: 18px; min-height: 3.3em; flex: 1; min-width: 0; text-wrap: pretty; }
.wt .ctrl { display: flex; gap: 8px; flex: none; }
.wt .ctrl button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); border: 1px solid var(--line); background: var(--surface); border-radius: 30px; padding: 7px 14px; }
.wt .ctrl button:hover { border-color: var(--accent); }
.wt .ctrl button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wt .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wt .instant *, .wt .instant *::before, .wt .instant *::after { transition: none !important; animation-duration: 1ms !important; }

@media (max-width: 620px) {
  .wt .steps .t { font-size: 13px; }
  .wt .steps button { padding: 8px 8px 10px; }
  .wt .below { flex-direction: column; gap: 10px; }
  .wt .caption { font-size: 16px; min-height: 4.2em; }
}
@media (prefers-reduced-motion: reduce) {
  .wt .stage *, .wt .stage *::before, .wt .stage *::after { transition: none !important; animation-duration: 1ms !important; }
}