/* Prototype chrome (build.py → prototype.html, src/shell/router.js).
   Desktop: screen list on the left, the phone centred, caption under it.
   <=600px: the phone fills the viewport (scaled by --pt-scale), a small "Screens" button opens the list. */

html, body.pt { height: 100%; }
body.pt { margin: 0; overflow: hidden; background: var(--color-subtle); color: var(--color-text-primary); font: var(--text-body); }
.pt-app { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: 100vh; height: 100dvh; }

/* ---------- side list ---------- */
.pt-side { display: flex; flex-direction: column; min-height: 0; background: var(--color-white); border-right: var(--border-default); }
.pt-side-head { padding: var(--space-6) var(--space-6) var(--space-4); display: grid; gap: var(--space-3); }
.pt-logo { width: 128px; height: 44px; color: var(--color-red); display: block; }
.pt-side-head p { font: var(--text-body-sm); color: var(--color-text-secondary); }
.pt-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-6) var(--space-4); border-bottom: var(--border-default); }
.pt-tool { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-border-strong); font: var(--text-label); color: var(--color-text-primary); cursor: pointer; }
.pt-tool:hover { background: var(--color-subtle); }
.pt-tool[aria-pressed="true"] { background: var(--color-pale-pink); box-shadow: inset 0 0 0 2px var(--color-red); }
.pt-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-2) var(--space-3) var(--space-12); }
.pt-list details { border-bottom: var(--border-default); }
.pt-list summary { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); font: var(--text-label); font-weight: 700; cursor: pointer; list-style: none; }
.pt-list summary::-webkit-details-marker { display: none; }
.pt-list summary span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--color-red); color: var(--color-white); font-variant-numeric: var(--meta-figures); }
.pt-list ol { list-style: none; padding: 0 0 var(--space-2); }
.pt-list a { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font: var(--text-body-sm); color: var(--color-text-secondary); }
.pt-list a span { flex: none; min-width: 36px; font: var(--text-meta); font-weight: 700; color: var(--color-text-primary); font-variant-numeric: var(--meta-figures); }
.pt-list a:hover { background: var(--color-subtle); color: var(--color-text-primary); }
.pt-list a.is-on { background: var(--color-pale-pink); color: var(--color-text-primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--color-red); }

/* ---------- stage + scaled phone ---------- */
.pt-stage { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); overflow: hidden; }
.pt-device { position: relative; flex: none; width: calc(390px * var(--pt-scale, 1)); height: calc(844px * var(--pt-scale, 1)); }
.pt-device > .phone { position: absolute; left: 0; top: 0; transform: scale(var(--pt-scale, 1)); transform-origin: 0 0; box-shadow: var(--shadow-float); }
.pt-caption { width: calc(390px * var(--pt-scale, 1)); min-width: 320px; max-width: 520px; display: grid; gap: var(--space-1); text-align: center; }
.pt-cap-title { font: var(--text-title); }
.pt-cap-text { font: var(--text-body-sm); color: var(--color-text-secondary); }
.pt-menu { display: none; }

/* ---------- tap areas ---------- */
.pt [data-go] { cursor: pointer; }
body.pt-hot .pt-device [data-go], body.pt-flash .pt-device [data-go] { box-shadow: var(--focus-ring), inset 0 0 0 2px var(--color-red); border-radius: var(--radius-sm); }
body.pt-flash .pt-device [data-go] { animation: pt-flash 500ms var(--ease); }
@keyframes pt-flash { from { box-shadow: 0 0 0 6px var(--color-red), inset 0 0 0 2px var(--color-red); } }

/* ---------- phone-sized viewport: the phone is the app ---------- */
@media (max-width: 600px) {
  body.pt { background: var(--color-charcoal); }
  .pt-app { display: block; }
  .pt-stage { position: fixed; inset: 0; padding: 0; gap: 0; }
  .pt-device > .phone { border: 0; border-radius: 0; box-shadow: none; }
  .pt-caption { display: none; }
  .pt-side { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); transform: translateX(-100%); transition: transform var(--dur-panel) var(--ease); }
  body.pt-menu-open .pt-side { box-shadow: var(--shadow-float); }
  body.pt-menu-open .pt-side { transform: none; }
  body.pt-menu-open .pt-stage::after { content: ""; position: fixed; inset: 0; z-index: 30; background: var(--color-overlay); }
  .pt-menu { display: inline-flex; align-items: center; position: fixed; z-index: 50; top: 8px; left: 50%; transform: translateX(-50%); height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-charcoal); color: var(--color-white); font: var(--text-meta); font-weight: 700; opacity: 0.88; cursor: pointer; border: 0; }
  body.pt-menu-open .pt-menu { left: auto; right: var(--space-3); transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pt-side { transition: none; } body.pt-flash .pt-device [data-go] { animation: none; } }

/* Toast for actions that leave the app (data-ext); added by orchestrator */
.pt-toast { position: absolute; left: 50%; bottom: 120px; transform: translate(-50%, 8px); z-index: 50;
  background: var(--color-charcoal); color: var(--color-white); font: 600 15px/20px var(--font-sans);
  padding: 12px 16px; border-radius: var(--radius-pill); opacity: 0; pointer-events: none; white-space: nowrap;
  transition: opacity var(--dur-fast, 150ms), transform var(--dur-fast, 150ms); }
.pt-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.pt-device { position: relative; }

/* "Other outcomes" chips under the phone (data-alt targets); added by orchestrator */
.pt-alts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); max-width: 520px; margin: var(--space-3) auto 0; padding: 0 var(--space-4); }
.pt-alts__l { font: var(--text-label); color: var(--color-text-secondary); margin-right: var(--space-1); }
.pt-alt { min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: var(--border-strong); background: var(--color-white); color: var(--color-text-primary); font: var(--text-label); cursor: pointer; }
.pt-alt:hover { border-color: var(--color-charcoal); }
/* On phones the chips sit at the top of the Screens menu (moved there by router.js) */
@media (max-width: 600px) {
  .pt-side .pt-alts { justify-content: flex-start; margin: 0; padding: var(--space-3) var(--space-4); border-bottom: var(--border-default); max-width: none; }
  .pt-side .pt-alts__l { display: block; width: 100%; }
}