/* Walkthrough card, ring, label and dimming (specs/_alphas/semaix-alphas.md, Walkthrough Style; reviewed by Fajar 15 Oct 2026:
   a card docked at the bottom above the presenter bar, the violet of SEMAI_DEMO_WALKTHROUGH_STYLE_v1, tokens AS-11a) */
.walk { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: min(760px, calc(100% - 32px)); z-index: 58; }
.walk[hidden] { display: none; }
.walk-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 16px 12px; border-radius: 12px; border: 1px solid var(--walk-edge); background: var(--walk); color: var(--on-walk); box-shadow: 0 12px 32px var(--walk-shadow); animation: walkin .34s var(--spring, ease-out) backwards; }
@keyframes walkin { from { opacity: 0; transform: translateY(10px); } }
.walk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; line-height: 1.35; }
.walk-kind { font: 600 13px var(--font); padding: 1px 8px; border-radius: 99px; background: var(--walk-tint); color: var(--walk-deep); white-space: nowrap; }
.walk-does, .walk-sees { margin: 0; font-size: 14px; line-height: 1.45; display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 8px; }
.walk-does span, .walk-sees span { color: var(--walk-soft); font-size: 13px; padding-top: 1px; }
.walk-sees { opacity: .8; }
.walk-sees.on { opacity: 1; font-weight: 600; }
.walk-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--walk-line); }
.walk-show { margin-right: auto; }
html.walking #walkShowBar { display: none; }
.walk-show select { height: 34px; width: auto; max-width: 100%; border-radius: 8px; border: 1px solid var(--walk-soft); background: transparent; color: var(--on-walk); font: 600 13px var(--font); padding: 0 8px; cursor: pointer; }
.walk-show select option { color: var(--ink); background: var(--surface); }
.walk-acts button { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--walk-soft); background: transparent; color: var(--on-walk); font: 600 14px var(--font); cursor: pointer; }
.walk-acts button.next { background: var(--on-walk); color: var(--walk); border-color: var(--on-walk); }
.walk-acts button[disabled] { opacity: .45; cursor: default; }
.walk-acts button:focus-visible, .walk-show select:focus-visible { outline: 2px solid var(--on-walk); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .walk-acts button:not([disabled]):not(.next):hover { background: var(--walk-hover); } }
.walk-acts button:not([disabled]):active { transform: scale(.96); }
/* Room for the card: the page, slide-overs, dialogs and notices stay clear of it */
html.walking .frame { padding-bottom: var(--walk-room, 0px); }
html.walking .sheet, html.walking .binar { bottom: var(--walk-room, 0px); border-bottom: 1px solid var(--line); border-bottom-left-radius: 12px; }
html.walking .dialog { top: calc(var(--header-h) + (100% - var(--header-h) - var(--walk-room, 0px)) / 2); max-height: calc(100% - var(--header-h) - var(--walk-room, 0px) - 24px); overflow: auto; }
html.walking .toast { bottom: calc(var(--walk-room, 0px) + 4px); }
/* The presenter bar: steps to show, and after Exit "Walkthrough n ended at step k" with Resume and Start again.
   The bar wraps to a second row rather than hiding controls off its edge. */
.dock { left: 12px; right: 12px; transform: none; width: fit-content; margin-inline: auto; flex-wrap: wrap; justify-content: center; row-gap: 4px; overflow: visible; }
#walkShowBar { max-width: 150px; }
@media (min-width: 721px) { .dock select { max-width: 168px; } }
.walk-again { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.walk-again button { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; font: 600 13px var(--font); cursor: pointer; }
#walkRing { position: fixed; inset: 0; z-index: 57; pointer-events: none; }
#walkRing[hidden] { display: none; }
#walkRing .r { position: fixed; border: 3px solid var(--walk-ring); border-radius: 10px; box-shadow: 0 0 0 4px var(--walk-halo); }
#walkRing .r.pulse { animation: walkpulse .9s cubic-bezier(.23, 1, .32, 1) 1; }
@keyframes walkpulse { 0% { box-shadow: 0 0 0 0 var(--walk-pulse); } 100% { box-shadow: 0 0 0 14px transparent; } }
#walkRing .lab { position: fixed; padding: 2px 8px; border-radius: 6px; background: var(--walk-ring); color: var(--on-walk-ring); font: 600 13px var(--font); white-space: nowrap; box-shadow: var(--shadow-1); }
#walkRing .d { position: fixed; background: var(--walk-dim); }
@media (max-width: 720px) {
  .walk { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 16px); }
  .walk-in { padding: 12px; }
  .walk-does, .walk-sees { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .walk-head { font-size: 14px; }
  .walk-acts { flex-wrap: nowrap; gap: 6px; padding-top: 8px; }
  .walk-show { margin-right: 0; flex: 1; min-width: 0; }
  .walk-show select { width: 100%; }
  .walk-acts button { padding: 0 10px; }
  /* on a phone the presenter bar stays one row that scrolls sideways */
  .dock { left: 50%; right: auto; transform: translateX(-50%); width: auto; max-width: calc(100% - 24px); flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { .walk-in, #walkRing .r.pulse { animation: none; } }
/* Notices sit above the presenter bar (its height is measured into --dock-room) */
html:not(.walking) .toast { bottom: var(--dock-room, 70px); }

/* Presenter tools (Fajar, 15 Oct 2026, 1a and 2a): searchable Screen and Demo Scenario lists, and semaiX Recap */
.dock .pick-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dock button.pick { height: 34px; border: 1px solid currentColor; border-radius: 8px; padding: 0 8px 0 10px; opacity: 1; gap: 8px; max-width: 220px; font-weight: 600; }
.dock button.pick .pick-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dock button.pick svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .8; }
.dock button.pick[aria-expanded="true"] { background: var(--bg); color: var(--ink); }
@media (min-width: 721px) { .dock button.pick { max-width: 200px; } }
.pick-pop { position: fixed; z-index: 61; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(520px, calc(100vh - 140px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); overflow: hidden; animation: fade .14s var(--ease-out); }
.pick-q { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.pick-q svg { width: 18px; height: 18px; flex-shrink: 0; }
.pick-q input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 16px var(--font); outline: none; }
.pick-q:focus-within { box-shadow: inset 0 -2px 0 var(--primary); }
.pick-list { overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 6px; }
.pick-g { position: sticky; top: 0; padding: 8px 14px 4px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.pick-o { padding: 7px 14px 7px 22px; font-size: 14px; line-height: 1.3; cursor: pointer; }
.pick-o[aria-selected="true"] { background: var(--primary-tint); color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.pick-none { margin: 0; padding: 18px 14px; color: var(--muted); font-size: 14px; }
.pick-foot { padding: 6px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.recap { position: fixed; z-index: 57; left: 0; right: 0; top: var(--header-h); bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding-bottom: var(--dock-room, 70px); animation: fade .16s var(--ease-out); }
.recap[hidden] { display: none; }
.rc-wrap { max-width: 1240px; margin: 0 auto; padding: 20px 24px 24px; display: grid; gap: 14px; }
.rc-top { display: flex; align-items: center; gap: 12px; }
.rc-top h2 { margin: 0; font-size: 22px; line-height: 1.2; outline: none; }
.rc-top .icon-btn { margin-left: auto; }
.rc-figs .figs { border: 0; }
.rc-sec { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.rc-apps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.rc-col { display: grid; gap: 14px; min-width: 0; }
.rc-app { display: grid; }
.dock #recapBtn[aria-expanded="true"] { background: var(--bg); color: var(--ink); opacity: 1; }
.rc-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.rc-h h3 { margin: 0; font-size: 15px; }
.rc-h .count { margin-left: auto; }
.rc-list, .rc-walks { list-style: none; margin: 0; padding: 4px 0 6px; }
.rc-walks { columns: 380px; column-gap: 0; padding: 6px 0; }
.rc-walks li { break-inside: avoid; }
.rc-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: baseline; width: 100%; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; font-size: 14px; line-height: 1.35; padding: 5px 14px; cursor: pointer; border-radius: 0; }
.rc-row .rc-id { color: var(--muted); font-size: 13px; }
.rc-walks .rc-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
.rc-div + .rc-div { border-top: 1px solid var(--line); }
.rc-pgrid { list-style: none; margin: 0; padding: 6px 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.rc-row.rc-p { grid-template-columns: 28px minmax(0, 1fr); align-items: start; padding-block: 8px; }
.rc-p .avatar { margin-top: 1px; }
.rc-pn { display: grid; gap: 1px; min-width: 0; }
.rc-pn b { font-weight: 600; }
.rc-pn small { color: var(--ink-2); font-size: 13px; line-height: 1.35; }
.rc-pn .rc-k { color: var(--muted); }
.rc-walks .rc-row small { color: var(--muted); font-size: 13px; white-space: nowrap; }
.rc-row:focus-visible { outline: 2px solid var(--focus, var(--primary)); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .rc-row:hover { background: var(--primary-tint); color: var(--primary); }
  .rc-row:hover .rc-id { color: var(--primary); }
}
@media (max-width: 720px) {
  .rc-wrap { padding: 16px 16px 20px; }
  .rc-walks { columns: auto; }
  .rc-figs .figs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .rc-figs .figs > div:nth-child(odd) { border-left: 0; }
  .rc-figs .figs > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .rc-figs .figs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rc-row { grid-template-columns: 104px minmax(0, 1fr); }
  .rc-row.rc-p { grid-template-columns: 28px minmax(0, 1fr); }
}