/* Story flight: caption bar while flying, stop card at each stop, dock button state. Tokens from tokens.css with fallbacks. */
.sf-bar {
  position: absolute; left: 50%; bottom: clamp(34px, 5vh, 52px); transform: translateX(-50%);   /* sits where the dock was (hidden while flying) */
  display: flex; align-items: center; gap: 12px; max-width: min(640px, calc(100vw - 32px));
  padding: 8px 8px 8px 14px; border-radius: 999px; z-index: 4;
  background: var(--glass-soft, rgba(24, 20, 17, .86)); border: 1px solid var(--line, rgba(243, 235, 221, .16));
  color: var(--cream, #f3ebdd); font: 500 13px/1.3 var(--font-ui, system-ui, sans-serif);
}
.sf-bar[hidden], .sf-card[hidden] { display: none; }
.sf-bt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sf-card {
  position: absolute; left: 50%; bottom: calc(clamp(34px, 5vh, 52px) + 74px); transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px)); max-height: 46vh; overflow: auto; box-sizing: border-box;
  padding: 16px 18px 14px; border-radius: 14px; z-index: 4;
  background: var(--glass-soft, rgba(24, 20, 17, .86)); border: 1px solid var(--line, rgba(243, 235, 221, .16));
  color: var(--cream, #f3ebdd); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.sf-k { margin: 0 0 4px; font: 600 11px var(--font-ui, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #b8ad98); }
.sf-n { margin: 0 0 6px; font: 600 24px/1.15 var(--f-title, Georgia, serif); letter-spacing: .04em; }
.sf-c { margin: 0 0 8px; font: 400 15px/1.5 var(--font-text, Georgia, serif); }
.sf-src { margin: 0 0 12px; font-size: 11px; line-height: 1.4; word-break: break-all; color: var(--muted, #b8ad98); }
.sf-src a { color: inherit; }
.sf-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.sf-open, .sf-x {
  font: 600 13px var(--font-ui, system-ui, sans-serif); min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, rgba(243, 235, 221, .16)); background: transparent; color: var(--cream, #f3ebdd);
}
.sf-open { background: var(--accent, #e9a23b); color: #15120f; border-color: transparent; }
.sf-open:focus-visible, .sf-x:focus-visible, .sf-dock:focus-visible { outline: 2px solid var(--accent, #e9a23b); outline-offset: 2px; }
.sf-bar .sf-x { flex: none; border-color: var(--line-2, rgba(243, 235, 221, .32)); }
.sf-x:hover { border-color: var(--accent, #e9a23b); color: var(--accent, #e9a23b); }
/* while flying: the camera is scripted, so the dock and compass/zoom column step aside; the bar holds the one End control */
body.sf-on .dockwrap, body.sf-on .dock, body.sf-on .tools, body.sf-on .edge-prompt { display: none; }
.sf-dock[aria-pressed="true"] { background: var(--accent, #e9a23b); color: #15120f; }
@media (max-width: 700px) {
  .sf-bar { left: 10px; right: 10px; bottom: 30px; transform: none; max-width: none; }
  .sf-bar { border-radius: 24px; } .sf-bt { flex: 1; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .sf-card { left: 10px; right: 10px; width: auto; transform: none; bottom: 102px; max-height: 40vh; padding: 14px 16px 12px; }
}
/* story picker: opens above the dock button, grouped by Explore area */
.sf-menu {
  position: fixed; z-index: 6; width: min(340px, calc(100vw - 16px)); max-height: min(60vh, 460px); overflow: auto; box-sizing: border-box;
  padding: 8px; border-radius: 14px; background: var(--glass, rgba(24, 20, 17, .94)); border: 1px solid var(--line, rgba(243, 235, 221, .16));
  color: var(--cream, #f3ebdd); box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.sf-menu[hidden] { display: none; }
.sf-ah { margin: 8px 8px 4px; font: 600 11px var(--font-ui, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #b8ad98); }
.sf-sec:first-child .sf-ah { margin-top: 2px; }
.sf-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 44px; box-sizing: border-box; text-align: left;
  padding: 8px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer;
  font: 500 14px/1.3 var(--font-ui, system-ui, sans-serif);
}
.sf-item:hover { border-color: var(--line-2, rgba(243, 235, 221, .28)); }
.sf-item:focus-visible { outline: 2px solid var(--accent, #e9a23b); outline-offset: 1px; }
.sf-is { font-size: 12px; color: var(--muted, #b8ad98); }