/**
 * Author: Andrey Morozov
 * Confidential. Proprietary and confidential. Unauthorized copying or distribution is prohibited.
 * Styles task-oriented project documentation and numbered screenshot callouts.
 * Keeps annotations separate from unchanged application pixels and usable on small screens.
 * Product interface styling and capture coordinates belong to their owning applications and inventories.
 */
.annotated-screen { margin: 28px 0; }
.annotated-scroll { overflow: auto; padding: 12px; margin: 0 -12px; }
.annotated-frame { position: relative; width: 100%; background: #0d1423; border: 1px solid var(--iam-stroke-strong); border-radius: 12px; }
.screen-expanded .annotated-frame { width: var(--capture-width); }
.screen-zoom { padding: 7px 12px; border: 1px solid var(--iam-stroke-strong); border-radius: 8px; color: var(--iam-blue-hi); font-size: 13px; }
.annotated-frame a, .annotated-frame img { display: block; width: 100%; height: 100%; border-radius: 12px; }
.annotated-frame img { object-fit: contain; margin: 0; }
.control-highlight { position: absolute; border: 3px solid #ff8b23; border-radius: 6px; box-shadow: 0 0 0 1px #181e2b; pointer-events: none; }
.control-highlight b { position: absolute; top: -12px; left: -12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ff8b23; color: #111827; font: 700 13px/1 sans-serif; box-shadow: 0 0 0 2px white; }
.annotated-screen figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--iam-ink-mute); }
.control-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-left: 24px; font-size: 13px; }
.journey-notice { border-left: 4px solid #ff8b23; padding: 14px 18px; margin: 24px 0; background: #fff5e8; color: #263246; border-radius: 0 8px 8px 0; line-height: 1.6; }
.journey-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0 44px; }
.journey-card { padding: 22px; border: 1px solid var(--iam-stroke); border-radius: 12px; background: var(--iam-panel); }
.journey-card h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; }
.journey-card h2 a { color: var(--iam-ink); }
.journey-card p { color: var(--iam-ink-mute); font-size: 14px; line-height: 1.6; }
.journey-card ul { padding-left: 20px; margin: 16px 0 0; }
.journey-card li { margin: 10px 0; font-size: 14px; line-height: 1.5; }
.journey-card a { color: var(--iam-blue-hi); }
.journey-card:hover { border-color: var(--iam-stroke-bright); }
@media (max-width: 700px) {
  .journey-cards { grid-template-columns: 1fr; }
  .control-highlight { border-width: 2px; }
  .control-highlight b { width: 20px; height: 20px; top: -10px; left: -8px; font-size: 11px; }
  .control-legend { display: block; }
  .control-legend li { margin: 6px 0; }
}