/* The clickable prototype: a real screenshot with links over its controls, the strip above it, and the walkthrough
   script. Loaded after /cloud-console/project-info/console.css; every colour is one of its tokens, so light and dark both work. */

a.button:hover { text-decoration: none; }
a.button-primary:hover { color: var(--accent-ink); }

/* The strip above a screen: its name, what it is, the way back, and the same links as text */
.proto-strip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-4); }
.proto-strip-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.proto-strip-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.proto-strip h1 { overflow-wrap: anywhere; }
.proto-kicker { margin: 0 0 var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.proto-what { margin: var(--space-2) 0 0; color: var(--muted); max-width: 80ch; }
.proto-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.proto-goes, .proto-note { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.proto-goes h2, .proto-note h2 { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.proto-note p { max-width: 80ch; }
.proto-note:target { border-top-color: var(--accent); }
.proto-note:target h2 { color: var(--accent); }
.proto-links { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.proto-links li, .proto-links li + li { margin: 0; min-width: 0; max-width: 100%; }
.proto-links a {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; max-width: 100%; min-height: 32px; padding: 5px var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--raised); color: var(--accent); font-weight: 500;
  line-height: 1.4; overflow-wrap: anywhere;
}
.proto-links a:hover { border-color: var(--accent); text-decoration: none; }
.proto-links a span { color: var(--muted); font-size: var(--text-sm); font-weight: 400; }

/* The screenshot, sized by its own aspect ratio, and the hotspots over it (each centred on its control, at least 24px) */
.proto-frame {
  position: relative; margin: 0; overflow: hidden; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow);
}
.proto-frame img { display: block; width: 100%; height: 100%; }
.proto-frame.phone { max-width: 390px; margin-inline: auto; }
.proto-frame.crop { max-width: 968px; }
.hot {
  position: absolute; left: var(--l); top: var(--t); width: max(24px, var(--w)); height: max(24px, var(--h));
  transform: translate(-50%, -50%); border: 2px dashed var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: var(--radius-sm);
}
.hot:hover { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); text-decoration: none; }
.hot:focus-visible {
  border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: 3px solid var(--focus); outline-offset: -1px; border-radius: var(--radius-sm);
}
.proto-hint { color: var(--muted); font-size: var(--text-sm); margin: var(--space-2) 0 0; }

/* The walkthrough script */
.proto-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-4) 0; }
.proto-howto { max-width: 80ch; }
.proto-sample { display: inline-block; width: 28px; height: 18px; vertical-align: middle; border: 2px dashed var(--accent); border-radius: var(--radius-sm); }
.scenario { max-width: 980px; }
.scenario h3 { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.scenario > p:first-of-type { color: var(--muted); margin-top: 0; }
.proto-steps { list-style: none; counter-reset: step; margin: var(--space-3) 0; padding: 0; }
.proto-steps > li { counter-increment: step; position: relative; min-height: 24px; margin: 0 0 var(--space-3); padding-left: 36px; overflow-wrap: anywhere; }
.proto-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--text-sm); font-weight: 600;
}
.proto-expect {
  margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--ok); border-left-width: 4px;
  border-radius: var(--radius); background: var(--ok-soft); color: var(--ink); overflow-wrap: anywhere;
}
.proto-expect b { color: var(--ok); }
.edges { display: grid; gap: var(--space-3); margin: var(--space-3) 0 var(--space-5); }
.edge {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--space-4); align-items: start; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}
.edge h3 { font-size: var(--text-md); margin: 0 0 var(--space-1); }
.edge p { margin: var(--space-1) 0; overflow-wrap: anywhere; }
.edge .label-inline { font-weight: 600; }
.proto-thumb { display: block; color: var(--muted); font-size: var(--text-sm); }
.proto-thumb img { display: block; width: 100%; height: auto; margin-bottom: var(--space-1); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line-strong); background: var(--raised); }
.proto-thumb:hover { color: var(--accent); }
.proto-thumb:hover img { box-shadow: 0 0 0 2px var(--accent); }
.proto-group { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-md); }
.cards.proto-cards { margin-top: var(--space-2); }
.role-table td:first-child { font-weight: 600; white-space: nowrap; }
.role-table th { white-space: normal; }

@media (max-width: 640px) {
  .proto-strip { padding: var(--space-4); }
  .edge { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .edge .proto-thumb { max-width: 280px; }
  .role-table td:first-child { white-space: normal; }
}