/* Scene 2: a trading portal walked by keyboard, with tab-order badges, a key strip and a
   screen-reader speech viewer. Shares the look of the first scene (pages.css .agent-scene). */
.ts-intro { margin-top: 3rem; }
.ts-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.5rem; }
.ts-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ts-app { position: relative; padding: 14px; display: grid; gap: 12px; font-size: 0.8rem; }

/* focus ring and tab-order badges */
.ts-scene [data-n] { position: relative; border-radius: 6px; transition: outline-color 0.2s ease; outline: 3px solid transparent; outline-offset: 2px; }
.ts-scene .ts-focus { outline-color: #a855f7; }
.ts-scene .ts-visited::after {
    content: attr(data-n);
    position: absolute; top: -9px; left: -9px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #581c87; color: #fff;
    font: 700 11px/20px Inter, sans-serif; text-align: center;
}

/* watchlist */
.ts-watch { border: 1px solid #e5e7eb; }
.ts-watch div { display: grid; grid-template-columns: 1.4fr 1fr 0.7fr; padding: 5px 8px; border-top: 1px solid #f3f4f6; }
.ts-watch div:first-child { border-top: none; font-weight: 600; color: #374151; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ts-up { color: #15803d; font-weight: 600; }
.ts-down { color: #b91c1c; font-weight: 600; }

/* chart */
.ts-chart { border: 1px solid #e5e7eb; padding: 6px 8px 2px; }
.ts-chart svg { display: block; width: 100%; height: 86px; }
.ts-chart-head { display: flex; justify-content: space-between; font-weight: 600; color: #111827; }

/* order ticket */
.ts-ticket { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.ts-field span { display: block; font-size: 0.7rem; color: #374151; margin-bottom: 3px; }
.ts-field b { display: block; border: 1px solid #6b7280; border-radius: 6px; padding: 6px 8px; min-height: 30px; font-weight: 600; }
.ts-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ts-buy, .ts-sell { text-align: center; padding: 8px; border-radius: 6px; color: #fff; font-weight: 700; }
.ts-buy { background: #15803d; }
.ts-sell { background: #b91c1c; }

/* confirmation dialog */
.ts-dialog {
    position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) scale(0.96);
    width: 74%; background: #fff; border: 1px solid #d1d5db; border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); padding: 14px; color: #111827;
    opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none;
}
.ts-dialog.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ts-dialog b { display: block; font-size: 0.95rem; margin-bottom: 6px; }
.ts-dialog .ts-dbtns { display: flex; gap: 8px; margin-top: 10px; }
.ts-dbtn { padding: 6px 12px; border-radius: 6px; border: 1px solid #6b7280; font-weight: 600; }
.ts-dbtn.primary { background: #581c87; border-color: #581c87; color: #fff; }

/* keys pressed */
.ts-keys { background: #111827; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 8px 10px; min-height: 2.8em; }
.ts-keys-label { display: block; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: #d1d5db; font-weight: 600; margin-bottom: 6px; }
.ts-key { display: inline-block; margin: 0 6px 4px 0; padding: 3px 8px; border-radius: 5px; background: #f9fafb; color: #111827; border-bottom: 3px solid #9ca3af; font: 600 0.72rem/1.2 ui-monospace, Menlo, monospace; }
.ts-key.is-new { background: #f3e8ff; border-bottom-color: #a855f7; }

/* speech viewer window */
.ts-sv { margin-top: 10px; background: #ffffff; color: #111827; border-radius: 8px; overflow: hidden; border: 1px solid #d1d5db; }
.ts-sv-bar { background: #e5e7eb; padding: 6px 10px; font: 600 0.72rem/1.2 Inter, sans-serif; color: #111827; }
.ts-sv-log { padding: 8px 10px; min-height: 9.5em; font: 0.76rem/1.55 ui-monospace, Menlo, Consolas, monospace; }
.ts-sv-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-sv-log div.is-new { background: #f3e8ff; }

@media (max-width: 860px) {
    .ts-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .ts-scene [data-n], .ts-dialog { transition: none; }
}