/* The Prototype tool (Board 2's Prototype board): the panel, the Playing chip, the device that
   plays, the hotspots, and the transitions between screens and overlays. Transition lengths
   come from --proto-dur, which the app sets on the device (Slow motion triples it). */

/* Panel ------------------------------------------------------------------------------------- */

.proto-lead { font-size: 13px; }
.panel-body.proto-panel { gap: 16px; padding: 14px 16px 16px; }

.proto-field { display: flex; flex-direction: column; gap: 6px; }
.select-start select { height: 40px; padding: 0 32px 0 10px; font-weight: 700; }
.select-start.has-tag select { padding-right: 96px; }
.select-start .tag { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.select-start > .i:last-child { right: 11px; margin-top: -7.5px; }

.proto-path { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface2); border: var(--bwc) solid #271813; border-radius: var(--rc); }
:root[data-skin="clean"] .proto-path { border-color: #e6dccb; }
.proto-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.proto-step { padding: 2px 8px; font-family: var(--ui); font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--ink); background: #ffffff; border: 2px solid #271813; border-radius: 0; }
.proto-step:hover:not(.is-on) { background: var(--tint); }
.proto-step.is-on { background: #ff5f1f; cursor: default; }
:root[data-skin="clean"] .proto-step { padding: 3px 9px; font-weight: 400; background: #fffdf8; border: 1px solid #e6dccb; border-radius: 999px; }
:root[data-skin="clean"] .proto-step.is-on { padding: 4px 10px; font-weight: 700; color: #ffffff; background: #9a3412; border: 0; }
.proto-arrow, .proto-gap, .proto-via { color: var(--muted); }
.proto-arrow .i { stroke-width: 2.25; }

.proto-switches { display: flex; flex-direction: column; }
.proto-switch { display: flex; align-items: center; gap: 12px; min-height: 54px; border-bottom: 2px solid rgba(39, 24, 19, 0.15); }
.proto-switch:last-child { border-bottom: 0; }
:root[data-skin="clean"] .proto-switch { border-bottom: 1px solid #e6dccb; }
:root[data-skin="clean"] .proto-switch:last-child { border-bottom: 0; }
.proto-switch-title { font-weight: 600; }

.proto-can { display: flex; flex-direction: column; gap: 7px; }
.proto-can-row { display: flex; align-items: center; gap: 8px; padding: 0; font-size: 13px; line-height: 1.4; text-align: left; color: var(--ink); background: none; border: 0; }
.proto-can-row .i { color: var(--accent-ink); }
.proto-can-row:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.proto-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.proto-btn { height: 40px; }
.proto-empty-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 2px dashed var(--line); border-radius: var(--rc); }
:root[data-skin="clean"] .proto-empty-card { border: 1.5px dashed var(--control); }

/* Canvas ------------------------------------------------------------------------------------ */

.proto-chip { position: absolute; z-index: 2; transform: translateX(-50%); }
.proto-dot { width: 9px; height: 9px; flex: none; background: #15803d; border-radius: 50%; box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18); }
.proto-where { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.proto-hint { position: absolute; z-index: 2; margin: 0; transform: translateX(-50%); font-size: 13px; line-height: 1.35; white-space: nowrap; color: var(--muted); }
.proto-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; }
.work:fullscreen { background-color: var(--canvas); }

/* The device that plays */
.proto-panes { position: absolute; inset: 0; overflow: hidden; cursor: default; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; --hot: rgba(255, 95, 31, 0.75); }
:root[data-skin="clean"] .proto-panes { --hot: rgba(154, 52, 18, 0.6); }
.proto-pane { position: absolute; inset: 0; animation-duration: var(--proto-dur, 300ms); animation-timing-function: cubic-bezier(0.22, 0.8, 0.24, 1); animation-fill-mode: both; }

/* Hotspots: what can be tapped (Board 2: 2 px, the accent at 75%) */
.proto-panes .wf-hot-t { outline: 2px solid var(--hot); outline-offset: -3px; }
.proto-panes .wf-icon-btn.wf-hot-t, .proto-panes .wf-bar-link.wf-hot-t { outline-offset: -6px; }
.proto-panes .wf-chip.wf-hot-t { outline-offset: 2px; }
.proto-panes .wf-tab.wf-hot-t { outline-offset: -2px; }
.proto-panes .wf-part.wf-hot-t { outline: 0; }
.proto-panes .wf-part.wf-hot-t > * { outline: 2px solid var(--hot); outline-offset: 2px; }
.proto-panes .wf-p-floating.wf-hot-t > * { outline-offset: 3px; }

/* Rows a swipe or a tap changed */
.proto-panes .wf-row-sel { background: color-mix(in srgb, var(--wf-accent) 14%, transparent); }
.proto-panes .wf-row-gone { min-height: 0; overflow: hidden; pointer-events: none; animation: proto-row-out 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.proto-panes.is-slow .wf-row-gone { animation-duration: 1140ms; }
@keyframes proto-row-out {
  0% { transform: translateX(var(--from-x, 0px)); max-height: var(--row-h, 72px); opacity: 1; }
  55% { transform: translateX(-110%); max-height: var(--row-h, 72px); opacity: 0; }
  100% { transform: translateX(-110%); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; opacity: 0; }
}

/* Slow motion: what moves on a screen plays 3 times slower too */
.proto-panes.is-slow .wf-anim .wf-reel, .proto-panes.is-slow .wf-anim .wf-dot { animation-duration: 27s; }
.proto-panes.is-slow .wf-anim .wf-dot:nth-child(2) { animation-delay: -18s; }
.proto-panes.is-slow .wf-anim .wf-dot:nth-child(3) { animation-delay: -9s; }
.proto-panes.is-slow .wf-moves .wf-spinner { animation-duration: 2.7s; }
.proto-panes.is-slow .wf-moves .wf-typing-dot { animation-duration: 3.6s; }
.proto-panes.is-slow .wf-moves .wf-typing-dot:nth-child(2) { animation-delay: 0.45s; }
.proto-panes.is-slow .wf-moves .wf-typing-dot:nth-child(3) { animation-delay: 0.9s; }
.proto-panes.is-slow .wf-moves .wf-progress-fill { animation-duration: 9.6s; }
.proto-panes.is-slow .wf-knob { transition-duration: 480ms; }

/* Screen to screen. Forward: the new screen is on top; back: the old one leaves on top. */
.proto-in-push { animation-name: proto-from-right; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.16); }
.proto-out-push { animation-name: proto-to-left; }
.proto-in-push-back { animation-name: proto-from-left; }
.proto-out-push-back { animation-name: proto-to-right; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.16); }
.proto-in-fade, .proto-in-fade-back { animation-name: proto-fade-in; }
.proto-out-fade, .proto-out-fade-back { animation-name: proto-fade-out; }
.proto-in-up { animation-name: proto-rise; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.16); }
.proto-out-up-back { animation-name: proto-sink; }
.proto-in-pop { animation-name: proto-grow; }
.proto-out-pop-back { animation-name: proto-shrink; }
.proto-out-up, .proto-out-pop { animation-name: proto-dim; }
.proto-in-up-back, .proto-in-pop-back { animation-name: proto-undim; }

/* Overlays opening and closing */
.proto-pane[class*="proto-ov-in-"] .wf-scrim { animation: proto-fade-in var(--proto-dur) ease both; }
.proto-pane[class*="proto-ov-out-"] .wf-scrim { animation: proto-fade-out var(--proto-dur) ease both; }
.proto-pane[class*="proto-ov-out-"] .wf-layer { pointer-events: none; }
.proto-ov-in-pop .wf-sheet-box { animation: proto-pop-in var(--proto-dur) cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.proto-ov-out-pop .wf-sheet-box { animation: proto-pop-out var(--proto-dur) ease both; }
.proto-ov-in-up .wf-sheet-box { animation: proto-rise-box var(--proto-dur) cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.proto-ov-out-up .wf-sheet-box { animation: proto-sink-box var(--proto-dur) ease-in both; }
.proto-ov-in-fade .wf-sheet-box { animation: proto-fade-in var(--proto-dur) ease both; }
.proto-ov-out-fade .wf-sheet-box { animation: proto-fade-out var(--proto-dur) ease both; }
.proto-ov-in-push .wf-sheet-box { animation: proto-from-right var(--proto-dur) cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.proto-ov-out-push .wf-sheet-box { animation: proto-to-right var(--proto-dur) ease-in both; }
.proto-panes .wf-layer-menu .wf-sheet-box { transform-origin: 50% 0; }
.proto-panes .wf-layer-sheet .wf-sheet-box, .proto-panes .wf-layer-toast .wf-sheet-box { transform-origin: 50% 100%; }

@keyframes proto-from-right { from { transform: translateX(100%); } }
@keyframes proto-to-right { to { transform: translateX(100%); } }
@keyframes proto-from-left { from { transform: translateX(-30%); filter: brightness(0.8); } }
@keyframes proto-to-left { to { transform: translateX(-30%); filter: brightness(0.8); } }
@keyframes proto-fade-in { from { opacity: 0; } }
@keyframes proto-fade-out { to { opacity: 0; } }
@keyframes proto-rise { from { transform: translateY(100%); } }
@keyframes proto-sink { to { transform: translateY(100%); } }
@keyframes proto-rise-box { from { transform: translateY(var(--proto-h, 100vh)); } }
@keyframes proto-sink-box { to { transform: translateY(var(--proto-h, 100vh)); } }
@keyframes proto-grow { from { opacity: 0; transform: scale(0.9); } }
@keyframes proto-shrink { to { opacity: 0; transform: scale(0.9); } }
@keyframes proto-dim { to { filter: brightness(0.8); } }
@keyframes proto-undim { from { filter: brightness(0.8); } }
@keyframes proto-pop-in { from { opacity: 0; transform: scale(0.92); } }
@keyframes proto-pop-out { to { opacity: 0; transform: scale(0.94); } }

/* The finger, a hold filling up, and the note an effect leaves (the app's look, not the
   wireframe's, so it reads as the tool talking) */
.proto-touch { position: absolute; z-index: 45; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; background: rgba(39, 24, 19, 0.22); border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 50%; animation: proto-touch-in 120ms ease-out both; }
.proto-touch.is-up { animation: proto-touch-out 300ms ease-out forwards; }
.proto-press { position: absolute; z-index: 46; width: 58px; height: 58px; margin: -29px 0 0 -29px; pointer-events: none; border: 3px solid var(--accent); border-radius: 50%; animation: proto-hold 500ms linear both; }
.proto-note {
  position: absolute;
  z-index: 50;
  left: 50%;
  bottom: 128px;
  max-width: calc(100% - 48px);
  padding: 9px 14px;
  pointer-events: none;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: #ffffff;
  background: var(--dark);
  border: 2px solid #ffffff;
  border-radius: 0;
  box-shadow: var(--dark-shadow);
  transform: translateX(-50%);
  animation: proto-note 1800ms ease both;
}
:root[data-skin="clean"] .proto-note { font-weight: 600; border: 0; border-radius: 12px; }
@keyframes proto-touch-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes proto-touch-out { to { opacity: 0; transform: scale(1.5); } }
@keyframes proto-hold { from { opacity: 0.25; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes proto-note {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  9%, 86% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}

/* The Share link dialog */
.share-link { width: 100%; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .proto-touch, .proto-press, .proto-note { animation-duration: 0.01ms; }
  .proto-note { animation: none; }
}