/* Loaded on the guided sample pages (the sample question and its Drill page), and on Drill and the
   test screen for the "ask us" guide (ask-guide.js). */
/* Guide arrows (guide.js) for the guided sample: a big gold arrow with a navy label, bobbing toward
   what it points at. Placed by its tip; the layout runs back from the tip along the arrow. */
.guide-arrow { position: fixed; z-index: 100; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.guide-arrow[hidden] { display: none; }
.guide-arrow[data-side="left"] { flex-direction: row-reverse; transform: translate(-100%, -50%); }
.guide-arrow[data-side="right"] { flex-direction: row; transform: translate(0, -50%); }
.guide-arrow[data-side="top"] { flex-direction: column-reverse; transform: translate(-50%, -100%); }
.guide-arrow[data-side="bottom"] { flex-direction: column; transform: translate(-50%, 0); }
.guide-icon { display: block; width: 76px; height: 48px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.guide-icon svg { display: block; width: 100%; height: 100%; transform: rotate(var(--angle, 0deg)); }
.guide-arrow[data-side="left"] .guide-icon { animation: guide-bob-r 0.9s ease-in-out infinite; }
.guide-arrow[data-side="right"] .guide-icon { animation: guide-bob-l 0.9s ease-in-out infinite; }
.guide-arrow[data-side="top"] .guide-icon { animation: guide-bob-d 0.9s ease-in-out infinite; }
.guide-arrow[data-side="bottom"] .guide-icon { animation: guide-bob-u 0.9s ease-in-out infinite; }
@keyframes guide-bob-r { 50% { transform: translateX(10px); } }
@keyframes guide-bob-l { 50% { transform: translateX(-10px); } }
@keyframes guide-bob-d { 50% { transform: translateY(10px); } }
@keyframes guide-bob-u { 50% { transform: translateY(-10px); } }
.guide-label { width: max-content; max-width: 230px; padding: 7px 12px; border: 2px solid #f5b301; border-radius: 10px; background: #0d1b2a; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); font-size: 15px; font-weight: 700; line-height: 1.3; color: #fff; text-align: center; }
.guide-para { display: block; }
.guide-para + .guide-para { margin-top: 8px; }
/* A dashed gold box around an area the arrow is about (outline: true), and a button in the label. */
.guide-box { position: fixed; z-index: 99; border: 3px dashed #f5b301; border-radius: 10px; box-shadow: 0 0 0 4px rgba(245, 179, 1, 0.22); pointer-events: none; animation: guide-box 1.6s ease-in-out infinite; }
.guide-box[hidden] { display: none; }
@keyframes guide-box { 50% { box-shadow: 0 0 0 8px rgba(245, 179, 1, 0.12); } }
.guide-btn { display: block; margin: 9px auto 2px; padding: 6px 16px; border: 0; border-radius: 999px; background: #f5b301; font: inherit; font-size: 14px; font-weight: 800; color: #0d1b2a; cursor: pointer; pointer-events: auto; }
.guide-btn:hover { background: #ffc933; }