/* The annotated screens (visual PRD): real screenshots with numbered pins on their controls, each pin's row in the UI
   breakdown table, and the user stories. Built on /cloud-console/project-info/console.css; colours only from its tokens, so the light
   theme (the default) and the dark one both work. No script of its own: theme.js swaps the screenshots. */

/* The intro: what the page is, the rules every screen keeps, and the list of screens */
.rules { margin: var(--space-3) 0 var(--space-5); }
.rules li { max-width: 80ch; }
.jump { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-2); list-style: none; margin: var(--space-3) 0 var(--space-6); padding: 0; }
.jump li { margin: 0; }
.jump a {
  display: flex; flex-direction: column; gap: 2px; height: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink);
}
.jump a:hover { border-color: var(--accent); text-decoration: none; }
.jump b { color: var(--accent); font-weight: 600; }
.jump span { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }

/* One screen */
.screen-section { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--line); scroll-margin-top: var(--space-4); }
.screen-section > h2 { margin-top: 0; font-size: var(--text-xl); }
.screen-section h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.route { display: inline-block; max-width: 100%; margin: 0 0 var(--space-2); }
.back-top { font-size: var(--text-sm); margin: var(--space-4) 0 0; }

/* The screenshot with its pins. The box is the image's own size (1280 by --h image pixels); a pin sits just above and
   left of its control's top left corner (so it covers none of its words), in per cent of the box, so it stays by the
   control at every width; the frame's top padding holds the pins of the top row. */
.shot-pins { margin: var(--space-3) 0 var(--space-5); }
.shot-pins figcaption { margin: 0; }
.pin-frame { margin: 0 0 var(--space-2); padding: 28px 16px 16px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pin-box { position: relative; }
.pin-box img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.pin {
  position: absolute; z-index: 1; left: calc(var(--x) / 1280 * 100%); top: calc(var(--y) / var(--h) * 100%);
  transform: translate(-100%, -100%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: 600 12px/1 var(--font); text-decoration: none;
  box-shadow: 0 0 0 2px var(--bar-ink), 0 0 0 3px var(--bar-bg), var(--shadow-sm);
}
.pin:hover { background: var(--accent-hover); text-decoration: none; z-index: 2; }
.pin:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 50%; z-index: 2; }
.pin-hint { display: none; color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-2); }

/* The pin's number in its table row */
.pin-num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
  color: var(--accent-ink); font-weight: 600; font-size: 12px; line-height: 1;
}
.matrix tbody tr { scroll-margin-top: var(--space-4); }
.matrix tbody tr:target td { background: var(--accent-soft); }
.matrix .col-pin { width: 56px; }
.matrix td:first-child { white-space: nowrap; }
.matrix td:nth-child(2) { font-weight: 600; }
.matrix td:last-child code { white-space: normal; }

/* User stories: one card each, Given, When and Then on their own lines */
.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); list-style: none; margin: var(--space-3) 0; padding: 0; }
.stories > li { margin: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.stories h4 { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: 600; }
.stories p { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.stories p b { display: inline-block; min-width: 3.6em; color: var(--accent); font-weight: 600; }

/* Status and labels */
.status td:nth-child(2) .chip { margin: 2px 4px 2px 0; }
.status td:nth-child(2) { white-space: normal; }

@media (min-width: 641px) {
  .matrix table { min-width: 880px; }
  .matrix th:nth-child(2) { width: 13%; }
  .matrix th:nth-child(3) { width: 22%; }
  .matrix th:nth-child(4) { width: 27%; }
  .matrix th:nth-child(5) { width: 18%; }
  .status table { min-width: 720px; }
}
/* Phones: the screenshot keeps a width where pins do not overlap, and scrolls sideways inside its frame */
@media (max-width: 640px) {
  .pin-frame { overflow-x: auto; padding: 28px 16px 16px; }
  .pin-box { min-width: 520px; }
  .pin-hint { display: block; }
  .screen-section { margin-top: var(--space-8); }
  .stories { grid-template-columns: minmax(0, 1fr); }
}