/* The guide (viewer/guide.js): the intro, the Guide menu, a tour's spotlight, card and docked steps. House style:
   the panel colour, 1 px lines, an amber edge, uppercase condensed heads, square corners. Over everything on the
   page (z-index 9000+); the spotlight and the ring take no pointer events, so the real control stays clickable. */
.gd-hole { position: fixed; z-index: 9000; pointer-events: none; box-shadow: 0 0 0 9999px rgba(4, 5, 7, 0.62);
  outline: 1px solid var(--accent); outline-offset: 2px; transition: left .18s, top .18s, width .18s, height .18s; }
.gd-hole.ring { box-shadow: 0 0 0 6px rgba(230, 179, 90, .16), 0 0 22px 4px rgba(230, 179, 90, .22); outline: 2px solid var(--accent);
  animation: gd-ring 2.4s ease-in-out infinite; }
@keyframes gd-ring { 50% { outline-color: rgba(230, 179, 90, .45); } }
.gd-ring { position: fixed; z-index: 9001; pointer-events: none; outline: 2px solid var(--accent); outline-offset: 3px;
  box-shadow: 0 0 0 9px rgba(230, 179, 90, .18), 0 0 24px 6px rgba(230, 179, 90, .3); }
.gd-dim { position: fixed; inset: 0; z-index: 9000; background: rgba(4, 5, 7, 0.66); }
.gd-dim.clear { background: none; }                 /* the intro's cut-out does the dimming */
.gd-hole.gd-intro-ring { z-index: 9001; transition: none; box-shadow: 0 0 0 9999px rgba(4, 5, 7, 0.66); outline-width: 2px; }

.gd-card { position: fixed; z-index: 9002; width: 330px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px;
  background: rgba(21, 23, 26, 0.97); border: 1px solid var(--line); border-left: 2px solid var(--accent); color: var(--text);
  font-size: 14px; line-height: 1.38; letter-spacing: 0.02em; box-shadow: 0 8px 30px rgba(0, 0, 0, .55); right: auto; bottom: auto;
  transition: left .18s, top .18s; }
.gd-card .gd-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.15em; font-size: 12px; margin-bottom: 6px; }
.gd-card .gd-count { color: var(--dim); letter-spacing: 0.08em; white-space: nowrap; }
.gd-card h3 { margin: 0 0 4px; font-weight: normal; font-size: 17px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text); }
.gd-card p { margin: 0 0 8px; }
.gd-card .gd-note { color: #c9a77a; font-size: 13px; }
.gd-wait { display: flex; gap: 8px; align-items: center; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 12px; padding: 7px 0 8px; border-top: 1px solid var(--line); margin-top: 6px; }
.gd-wait i { flex: none; width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 0 3px rgba(230, 179, 90, .25);
  animation: gd-blink 1.6s ease-in-out infinite; }
@keyframes gd-blink { 50% { opacity: .35; } }
.gd-wait.ok { color: var(--accent); }
.gd-wait.miss { color: #c9a77a; text-transform: none; letter-spacing: 0.02em; font-size: 13px; }
.gd-wait.busy { color: var(--dim); }
.gd-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gd-btns .sp, .gd-menu .sp { flex: 1; }
.gd-btn { background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 4px 10px; font: inherit; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.gd-btn:hover:not([disabled]) { border-color: var(--dim); }
.gd-btn.pri { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.gd-btn.ghost { border-color: transparent; background: none; color: var(--dim); padding-left: 2px; padding-right: 4px; }
.gd-btn.ghost:hover { color: var(--text); border-color: transparent; }
.gd-btn.ghost.on { color: var(--accent); }
.gd-btn[disabled] { opacity: .4; cursor: default; }
.gd-btn[hidden] { display: none; }
.gd-card :focus-visible, .gd-menu :focus-visible, .gd-intro :focus-visible, .gd-dock :focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.gd-prog { display: flex; gap: 3px; margin-top: 10px; }
.gd-prog b { flex: 1; height: 2px; background: var(--line); }
.gd-prog b.on { background: var(--accent); }
.gd-notch { position: absolute; width: 10px; height: 10px; background: rgba(21, 23, 26, 0.97); border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.gd-notch[hidden] { display: none; }
.gd-notch[data-side=right] { left: -7px; transform: rotate(45deg); border-color: var(--accent); }
.gd-notch[data-side=left] { right: -6px; transform: rotate(225deg); }
.gd-notch[data-side=below] { top: -6px; transform: rotate(135deg); }
.gd-notch[data-side=above] { bottom: -6px; transform: rotate(-45deg); }

/* the phone: the card as a bottom sheet (at the top when what it points at is low) */
.gd-card.gd-sheet { left: 0 !important; right: 0; top: auto; bottom: 0; width: auto; max-width: none; border: 0; border-top: 2px solid var(--accent);
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); font-size: 15px; line-height: 1.4; box-shadow: 0 -10px 30px rgba(0, 0, 0, .6);
  max-height: 55vh; overflow: auto; transition: none; }
.gd-card.gd-sheet.top { top: 0 !important; bottom: auto; border-top: 0; border-bottom: 2px solid var(--accent); padding-top: calc(10px + env(safe-area-inset-top)); }
.gd-card.gd-sheet .gd-btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }

/* the docked steps (Option B's list, behind Steps on the card) */
.gd-dock { position: fixed; z-index: 9001; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--accent);
  display: flex; flex-direction: column; color: var(--text); font-size: 14px; line-height: 1.38; box-sizing: border-box; overflow: hidden; }
.gd-dock[hidden] { display: none; }
.gd-dock .dh { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.gd-dock .dh .k { color: var(--dim); text-transform: uppercase; letter-spacing: .15em; font-size: 12px; display: flex; justify-content: space-between; align-items: center; }
.gd-dock .dh h2 { margin: 4px 0 2px; font-weight: normal; font-size: 20px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.gd-dock .dh p { margin: 2px 0 0; color: var(--dim); font-size: 13px; }
.gd-dock ol { list-style: none; margin: 0; padding: 6px 0; overflow: auto; flex: 1; counter-reset: s; }
.gd-dock li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 0 6px; padding: 6px 14px 6px 12px; color: var(--dim);
  border-left: 2px solid transparent; }
.gd-dock li::before { content: counter(s); color: var(--dim); font-size: 13px; padding-top: 3px; }
.gd-dock li.done::before { content: "✓"; color: var(--accent); }
.gd-dock li .t { background: none; border: 0; padding: 2px 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-transform: uppercase; letter-spacing: .08em; }
.gd-dock li .t:hover { color: var(--text); }
.gd-dock li.cur { border-left-color: var(--accent); background: rgba(230, 179, 90, .06); color: var(--text); }
.gd-dock li.cur::before, .gd-dock li.cur .t { color: var(--accent); }
.gd-dock li .body { grid-column: 2; margin: 4px 0 2px; }
[data-lay=phone] .gd-dock { max-height: 42vh; border-top: 0; border-bottom: 2px solid var(--accent); }

/* links in the menu's footer and the dock's head */
.gd-link { background: none; border: 0; padding: 0; font: inherit; color: var(--text); cursor: pointer; }
.gd-link:hover { color: var(--accent); }
.gd-link kbd { font: inherit; color: var(--accent); }

/* the intro */
.gd-intro { position: fixed; z-index: 9002; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 540px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box; background: rgba(21, 23, 26, .97); border: 1px solid var(--line);
  border-top: 2px solid var(--accent); box-shadow: 0 12px 50px rgba(0, 0, 0, .7); color: var(--text); }
.gd-intro img { display: block; width: 100%; aspect-ratio: 2.4; object-fit: cover; border-bottom: 1px solid var(--line); background: #000; }
.gd-intro .in { padding: 16px 20px; }
.gd-intro .k { color: var(--dim); text-transform: uppercase; letter-spacing: .15em; font-size: 12px; display: flex; justify-content: space-between; }
.gd-intro h2 { margin: 6px 0 8px; font-weight: normal; font-size: 24px; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.gd-intro p { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.gd-intro .row { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.gd-intro .row .sp { flex: 1; }
.gd-intro .foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }
.gd-intro .foot.gd-big { margin-top: 0; padding-top: 6px; border-top: 0; }
.gd-dots { display: flex; gap: 6px; }
.gd-dots b { width: 18px; height: 2px; background: var(--line); }
.gd-dots b.on { background: var(--accent); }
[data-lay=phone] .gd-intro .gd-btn { min-height: 44px; }

/* the Guide menu, from the header */
.gd-menu { position: fixed; z-index: 9003; width: 410px; max-width: calc(100vw - 16px); max-height: calc(100vh - 70px); overflow: auto;
  box-sizing: border-box; background: rgba(21, 23, 26, .98); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6); color: var(--text); }
.gd-menu .mh { padding: 10px 14px 8px; color: var(--accent); text-transform: uppercase; letter-spacing: .15em; font-size: 13px;
  display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.gd-menu .mh span + span { color: var(--dim); letter-spacing: .06em; }
.gd-menu .sub { padding: 8px 14px 2px; color: var(--dim); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.gd-menu .gd-tour { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline; width: 100%; padding: 6px 14px;
  background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.gd-menu .gd-tour:hover, .gd-menu .gd-tour:focus-visible { background: rgba(230, 179, 90, .08); }
.gd-menu .n { color: var(--dim); font-size: 12px; }
.gd-menu .tt { text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.gd-menu .tt small { display: block; text-transform: none; letter-spacing: .02em; color: var(--dim); font-size: 12.5px; }
.gd-menu .m { color: var(--dim); font-size: 12px; white-space: nowrap; }
.gd-menu .m.ok { color: var(--accent); }
.gd-menu .mf { border-top: 1px solid var(--line); padding: 8px 14px; display: flex; gap: 14px; align-items: center; color: var(--dim); font-size: 13px; flex-wrap: wrap; }
[data-lay=phone] .gd-menu { left: 0; right: 0; top: 52px; width: auto; max-width: none; max-height: calc(100vh - 60px); }
[data-lay=phone] .gd-menu .gd-tour { padding: 10px 14px; }

/* the Guide button: on while its menu is open; one pulse when the page opens on a deep link (no intro) */
.lay-bar .gd-guide-btn.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.lay-bar .gd-guide-btn.gd-pulse { animation: gd-pulse 1.2s ease-in-out 2; }
@keyframes gd-pulse { 50% { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(230, 179, 90, .25); } }

@media (prefers-reduced-motion: reduce) {
  .gd-hole, .gd-card { transition: none; }
  .gd-hole.ring, .gd-wait i, .lay-bar .gd-guide-btn.gd-pulse { animation: none; }
}