/* ── coach.css — the guided year's pointers (coach.js): a ring round the control to press, an arrow
   that points at it, a bubble with the step, a marker at a pane's edge when the control is out of
   view, and a meter for the objective on the rail. Amber is what to do; teal is done. Above the desk,
   under the decisions sheet (390) and every dialog (500). Still under reduced motion. ─────────── */

#gc-coach{ position:fixed; inset:0; z-index:380; pointer-events:none; display:none; }
#gc-coach.gcc-on{ display:block; }
#gc-coach .gcc-ring, #gc-coach .gcc-arrow, #gc-coach .gcc-edge{ display:none; }
#gc-coach.gcc-on:not(.gcc-free):not(.gcc-off-screen) .gcc-ring,
#gc-coach.gcc-on:not(.gcc-free):not(.gcc-off-screen) .gcc-arrow{ display:block; }
#gc-coach.gcc-off-screen .gcc-edge{ display:flex; }
#gc-coach.gcc-off-screen .gcc-tip{ display:none; }

/* the ring: an amber outline with a soft glow and a ripple going out from it */
.gcc-ring{ position:fixed; box-sizing:border-box; border:2px solid var(--sky-amber-hi); border-radius:var(--sp-1h);
  box-shadow:0 0 0 1px var(--sky-on-amber), 0 0 var(--sp-4) var(--sky-amber-glow-3), inset 0 0 var(--sp-2) var(--sky-amber-glow-2);
  transition:left .18s ease, top .18s ease, width .18s ease, height .18s ease, border-color .25s ease; }
.gcc-ring::before, .gcc-ring::after{ content:''; position:absolute; inset:-2px; border-radius:inherit; border:2px solid var(--sky-amber); opacity:0; animation:gcc-ripple 1.8s ease-out infinite; }
.gcc-ring::after{ animation-delay:.9s; }
@keyframes gcc-ripple{ 0%{ opacity:.85; transform:scale(1); } 100%{ opacity:0; transform:scale(1.35); } }

/* a watch step (a number to keep an eye on): dashed and calm, no ripple */
#gc-coach.gcc-watch .gcc-ring{ border-style:dashed; border-color:var(--sky-info); box-shadow:0 0 var(--sp-3) var(--sky-info-dim); }
#gc-coach.gcc-watch .gcc-ring::before, #gc-coach.gcc-watch .gcc-ring::after{ animation:none; }
#gc-coach.gcc-watch .gcc-arrow{ color:var(--sky-info); animation:none; }
#gc-coach.gcc-watch .gcc-tip{ border-left-color:var(--sky-info); }

/* a new step: no sliding in from where the last one was */
#gc-coach.gcc-jump .gcc-ring, #gc-coach.gcc-jump .gcc-tip{ transition:none; }

/* a step just done: the ring goes teal for a moment */
#gc-coach.gcc-flash .gcc-ring{ border-color:var(--sky-teal); box-shadow:0 0 var(--sp-5) var(--sky-teal-dim); }

/* the arrow above or below the control, nodding at it */
.gcc-arrow{ position:fixed; width:22px; height:26px; color:var(--sky-amber-hi); filter:drop-shadow(0 1px 2px var(--sky-night)); animation:gcc-nod-down 1.1s ease-in-out infinite; }
.gcc-arrow.up{ transform:rotate(180deg); animation-name:gcc-nod-up; }
@keyframes gcc-nod-down{ 0%, 100%{ translate:0 -3px; } 50%{ translate:0 3px; } }
@keyframes gcc-nod-up{ 0%, 100%{ translate:0 3px; } 50%{ translate:0 -3px; } }

/* the bubble */
.gcc-tip{ position:fixed; box-sizing:border-box; pointer-events:auto; padding:var(--sp-2) var(--sp-3); background:var(--sky-glass-float); backdrop-filter:var(--sky-blur); -webkit-backdrop-filter:var(--sky-blur);
  border:1px solid var(--sky-amber-line); border-left:3px solid var(--sky-amber); border-radius:var(--sp-1h); box-shadow:var(--shadow-float); color:var(--sky-text);
  transition:left .18s ease, top .18s ease; animation:gcc-in .28s ease-out; }
@keyframes gcc-in{ from{ opacity:0; translate:0 var(--sp-1h); } to{ opacity:1; translate:0 0; } }
.gcc-k{ font:600 var(--fs-1) var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sky-amber-hi); margin-bottom:var(--sp-1); }
.gcc-t{ font:var(--fs-3)/1.45 var(--sans); }
.gcc-act{ display:flex; justify-content:flex-end; margin-top:var(--sp-1h); }
.gcc-off{ background:none; border:0; padding:var(--sp-0) 0; font:var(--fs-1) var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--sky-dim); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.gcc-off:hover, .gcc-off:focus-visible{ color:var(--sky-text); }

/* the control is scrolled out of view: a marker at the pane's edge that scrolls to it */
.gcc-edge{ position:fixed; transform:translateX(-50%); pointer-events:auto; align-items:center; gap:var(--sp-1h); padding:var(--sp-1) var(--sp-3); border:1px solid var(--sky-amber); border-radius:999px;
  background:var(--sky-glass-float); color:var(--sky-amber-hi); font:600 var(--fs-1) var(--mono); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; box-shadow:0 0 var(--sp-3) var(--sky-amber-glow-3); animation:gcc-nod-down 1.1s ease-in-out infinite; }
.gcc-edge.up{ animation-name:gcc-nod-up; }
.gcc-edge-a{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid currentColor; }
.gcc-edge.up .gcc-edge-a{ border-top:0; border-bottom:6px solid currentColor; }

/* a lesson cleared: the rail's dots glow once */
body:has(#gc-coach.gcc-cleared) #guide .g-dots i.now{ box-shadow:0 0 0 3px var(--sky-teal-dim); }

/* the meter on the rail */
.gcc-prog{ display:inline-flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.gcc-meter{ display:inline-flex; align-items:center; gap:var(--sp-1h); font:var(--fs-1) var(--mono); letter-spacing:.06em; color:var(--sky-muted); white-space:nowrap; }
.gcc-ml{ text-transform:uppercase; }
.gcc-mb{ position:relative; display:inline-block; width:64px; height:6px; border-radius:3px; background:var(--sky-tile-2); overflow:hidden; }
.gcc-mb i{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg, var(--sky-amber-dim), var(--sky-amber)); border-radius:inherit; transition:width .6s ease; }
.gcc-meter.ok .gcc-mb i{ background:var(--sky-teal); }
.gcc-meter.ok .gcc-mv{ color:var(--sky-teal); }
.gcc-mv{ color:var(--sky-text); font-variant-numeric:tabular-nums; }
#guide .gcc-sw[aria-pressed="false"]{ opacity:.7; }

/* a phone: the meter takes the rail's own line, the bubble is narrower type */
/* in the bubble only on a phone, where the rail is folded to one line */
.gcc-tip-prog{ display:none; }
@media (max-width:900px){
  #guide .gcc-prog{ display:none; }
  html.gc-ios-gx #guide .gcc-prog{ display:inline-flex; }
  .gcc-tip-prog:not(:empty){ display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-1); margin-top:var(--sp-2); }
  .gcc-tip-prog .gcc-meter{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--sp-2); }
  .gcc-tip-prog .gcc-mb{ grid-column:1 / -1; grid-row:2; width:auto; }
  .gcc-t{ font-size:var(--fs-4); }
}

@media (prefers-reduced-motion: reduce){
  .gcc-ring, .gcc-tip{ transition:none; }
  .gcc-ring::before, .gcc-ring::after{ animation:none; }
  .gcc-arrow, .gcc-arrow.up, .gcc-edge, .gcc-tip{ animation:none; }
  .gcc-mb i{ transition:none; }
}
@media print{ #gc-coach, .gcc-prog, .gcc-sw{ display:none !important; } }

/* Next, on a step that only shows something */
.gcc-next{ display:none; margin-left:var(--sp-3); padding:var(--sp-1) var(--sp-3); font:600 var(--fs-1) var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--sky-on-amber); background:var(--sky-amber); border:0; border-radius:var(--sp-1); cursor:pointer; }
.gcc-tip.has-next .gcc-next{ display:inline-block; }
.gcc-next:hover, .gcc-next:focus-visible{ background:var(--sky-amber-hi); }
.gcc-act{ align-items:center; }
@media (max-width:900px){ .gcc-next{ min-height:var(--h-touch); padding:0 var(--sp-4); } .gcc-off{ min-height:var(--h-touch); padding:0 var(--sp-2); } }