/* =========================================================================
   howto.css  ·  Half Fast Racing  ·  shared styles for /how-to/
   -------------------------------------------------------------------------
   Loaded AFTER style.css by every page in the How To section.

   RULE FOR THIS FILE: it must not redefine anything style.css already owns.
   Body text, h1 family/color, h2, and link color all come from style.css.
   What lives here is only the furniture the How To pages need: the hero,
   the numbered steps, the annotated screenshots, the callout, the finish
   panel and the troubleshooting accordion.

   If a heading ever looks wrong on a How To page, fix it in style.css --
   not here, and never in a page's own <style> block.
   ========================================================================= */

:root{
  /* style.css defines --orange/--dark/--light/--white/--gray. These four fill
     the gaps the How To pages need and nothing else. */
  --ht-muted:#b0b0b0;
  --ht-dim:#808080;
  --ht-border:rgba(255,255,255,.1);
  --ht-glow:rgba(255,102,0,.15);
}

/* style.css caps every direct child of <body> at --cap and centers it. The
   How To wrapper manages its own width through .ht-wrap, so it opts out --
   and so must the lightbox, or its backdrop is only 1280px wide and clicking
   beside the enlarged image lands on the page behind instead of closing. */
body > .howto{max-width:none !important;width:100%}
body > #ht-lb{max-width:none !important;width:auto;margin:0 !important}

html{scroll-behavior:smooth}

/* style.css sets no color for a bare <a>, so prose links would fall back to
   browser blue. Scoped to .howto so this can't leak into nav or footer. */
.howto a{color:var(--orange)}
.howto a:hover{color:var(--orange-hover,#FF8533)}

/* Mirrors .site-nav's gutter model so content lines up with the nav logo. */
.ht-wrap{max-width:calc(1280px + 4rem);margin:0 auto;padding:0 2rem}

/* ---------------------------------------------------------------- HERO -- */
/* Copied verbatim from the inline .hero block in rules.php so the two pages
   are the same object, not two things that resemble each other. The h1 itself
   is governed by `body .hero h1` at the foot of style.css -- nothing here
   touches its font. */
.howto .hero{text-align:center;padding:28px 0 20px}
/* Only the properties the canonical rule leaves alone. `.howto .hero h1` is
   two classes and beats `body .hero h1`'s one, so anything declared here wins
   -- which makes this rule dangerous. Two specific hazards:

     font-size / font-weight / letter-spacing
        would reintroduce the fake 900 bold the canonical rule exists to kill.

     the `margin` shorthand
        writes margin-left:0 and margin-right:0, destroying the
        margin-left:auto / margin-right:auto that CENTERS the title. The
        canonical rule sets width:80% then scales it 1.25x from the center;
        without the auto margins the box sits hard left and the title lands
        10% of the viewport off-center at every width.

   Use longhand margin-top / margin-bottom only. Never the shorthand. */
.howto .hero h1{text-transform:uppercase;margin-top:0;margin-bottom:6px}
.howto .hero p{font-size:.88rem;color:#6b7280;margin:0}

/* ------------------------------------------------------ SECTION RULE ---- */
.ht-rule{
  display:flex;align-items:center;gap:14px;margin:52px 0 24px;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ht-muted);
}
.ht-rule::after{content:"";flex:1;height:1px;background:var(--ht-border)}

/* ------------------------------------------------------- CALLOUT -------- */
.ht-note{
  display:flex;gap:16px;align-items:flex-start;
  border:1px solid var(--ht-border);border-left:3px solid var(--orange);
  background:linear-gradient(90deg,var(--ht-glow),transparent 42%),#1a1a1a;
  border-radius:10px;padding:18px 22px;margin-top:40px;
}
.ht-note-k{flex:0 0 5.5em;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);line-height:1.35;padding-top:3px}
.ht-note p{margin:0;font-size:.95rem}
.ht-note p + p{margin-top:8px}
.ht-note strong{color:var(--white)}

/* --------------------------------------------------------- STEPS -------- */
.ht-steps{list-style:none;margin:0;padding:0}
.ht-step{display:grid;grid-template-columns:82px 1fr;gap:26px;padding:40px 0}
.ht-step + .ht-step{border-top:1px solid var(--ht-border)}
.ht-rail{display:flex;flex-direction:column;align-items:center;gap:14px}
.ht-num{font-family:'JuraDigits','Jura',sans-serif;font-weight:700;
  font-size:3rem;line-height:1;color:var(--orange)}
.ht-rail-line{flex:1;width:1px;min-height:30px;
  background:linear-gradient(var(--ht-border),transparent)}
.ht-step h2{margin:2px 0 12px}   /* family/size/stretch inherited from style.css */
.ht-step p{margin:0 0 14px;max-width:66ch}
.ht-step p strong{color:var(--white);font-weight:600}

/* UI labels quoted from the software being documented */
.ht-kbd{font-size:.8rem;font-weight:700;color:var(--white);
  background:var(--light);border:1px solid var(--ht-border);border-bottom-width:2px;
  border-radius:5px;padding:2px 7px;white-space:nowrap}

/* ------------------------------------- ANNOTATED SCREENSHOTS ------------ */
.ht-fig{margin:20px 0 0;max-width:1080px}
/* max-width is set per image by the script in _footer.inc.php, to the
   screenshot's natural width -- so a small screenshot is never upscaled, and
   the frame stays exactly image-sized, which is what keeps the percentage-
   positioned rings on target. */
.ht-frame{position:relative;display:block;width:100%;padding:0;
  border:1px solid var(--ht-border);border-radius:12px;overflow:hidden;
  background:var(--dark);box-shadow:0 18px 44px rgba(0,0,0,.5);
  cursor:default;line-height:0;text-align:left}
.ht-frame img{display:block;width:100%;height:auto}

/* Zoom affordances appear only on frames the script marked .zoomable -- i.e.
   where the image is actually shrunk enough for enlarging to be worth it.
   Frames without it are plain figures and are disabled, so they are not
   focusable and advertise nothing. The highlight rings show either way. */
.ht-frame.zoomable{cursor:zoom-in}
.ht-frame.zoomable::after{
  content:"⤢ Enlarge";position:absolute;top:10px;right:10px;z-index:2;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);background:rgba(0,0,0,.82);border:1px solid var(--ht-border);
  border-radius:5px;padding:4px 8px;line-height:1.4;opacity:.75;
  transition:opacity .15s ease}
.ht-frame.zoomable:hover::after{opacity:1}
.ht-frame.zoomable:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.ht-frame[disabled]{opacity:1}   /* a disabled button must not look faded here */

/* Highlight ring. Position with inline --l/--t/--w/--h percentages so the
   ring scales with the image at every viewport width. */
.ht-hot{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);
  border:2px solid var(--orange);border-radius:6px;
  box-shadow:0 0 0 3px rgba(255,102,0,.22), 0 0 22px rgba(255,102,0,.45);
  pointer-events:none}
.ht-hot::before{content:"";position:absolute;inset:-2px;border-radius:6px;
  border:2px solid var(--orange);opacity:0;
  animation:ht-ping 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes ht-ping{
  0%{opacity:.85;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(1.16)}
}
/* Text label above a ring, e.g. "Click here". Orange pill, black text.
   Color is declared explicitly, not inherited, so it renders identically in
   the page and inside the cloned lightbox -- inheriting is what made it change
   shade between the two. Use .below when the ring is near the top edge. */
.ht-tag{
  position:absolute;top:-11px;left:-2px;transform:translateY(-100%);
  font-family:'JuraDigits','Jura',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:#000;background:var(--orange);
  padding:3px 8px;border-radius:4px;white-space:nowrap;line-height:1.5;
}
.ht-tag.below{top:auto;bottom:-11px;transform:translateY(100%)}

/* Numbered badge, sat in the gutter so it never covers the UI underneath. */
.ht-badge{position:absolute;top:-12px;left:-12px;width:25px;height:25px;
  border-radius:50%;background:var(--orange);color:#000;border:2px solid #000;
  font-size:.72rem;font-weight:700;line-height:21px;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.6)}

.ht-fig figcaption{margin-top:12px;font-size:.82rem;color:var(--ht-muted);
  display:flex;gap:9px;align-items:baseline}
.ht-fig .tick{color:var(--orange);font-weight:700;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.ht-fig figcaption strong{display:inline-block;min-width:17px;height:17px;
  line-height:17px;text-align:center;border-radius:50%;
  background:var(--orange);color:#000;font-size:.66rem;font-weight:700;margin:0 2px}

/* --------------------------------------------------------- FINISH ------- */
.ht-finish{margin-top:12px;border:1px solid var(--ht-border);border-radius:14px;
  overflow:hidden;background:linear-gradient(180deg,rgba(46,213,115,.09),transparent 60%),#1a1a1a}
.ht-flag{height:12px;width:100%;opacity:.9;
  background-image:repeating-conic-gradient(var(--white) 0% 25%, #000 0% 50%);
  background-size:16px 16px}
.ht-finish-body{padding:28px 30px 32px}
.ht-finish h2{margin:0 0 10px}
.ht-finish h2 .ok{color:#2ED573}
.ht-finish-body > p{margin:0 0 20px;max-width:64ch}
.ht-next{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.ht-next li{border:1px solid var(--ht-border);border-radius:10px;
  padding:15px 17px;background:rgba(0,0,0,.24)}
.ht-next h3{font-size:.66rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange);margin:0 0 7px}
.ht-next p{margin:0;font-size:.88rem}

/* ------------------------------------------------- TROUBLESHOOTING ------ */
.ht-help details{border:1px solid var(--ht-border);border-radius:10px;
  background:#1a1a1a;margin-bottom:10px}
.ht-help details[open]{border-color:var(--light)}
.ht-help summary{cursor:pointer;padding:14px 20px;font-weight:600;font-size:.95rem;
  color:var(--white);list-style:none;display:flex;align-items:center;gap:12px}
.ht-help summary::-webkit-details-marker{display:none}
.ht-help summary::before{content:"+";font-weight:700;color:var(--orange);
  font-size:1rem;line-height:1;width:14px;flex:none}
.ht-help details[open] summary::before{content:"–"}
.ht-help summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;border-radius:10px}
.ht-help .ans{padding:0 20px 18px 46px;font-size:.9rem}
.ht-help .ans p{margin:0 0 10px}
.ht-help .ans p:last-child{margin-bottom:0}

/* ------------------------------------------------------- LIGHTBOX ------- */
/* z-index must clear .site-nav, which is sticky at z-index:1000 in style.css.
   Below that, the nav sits on top of the backdrop and swallows clicks on the
   close button. */
#ht-lb{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.94);
  display:none;align-items:center;justify-content:center;padding:26px;cursor:zoom-out}
#ht-lb.on{display:flex}
/* position:relative + shrink-to-fit is what makes the cloned rings land
   correctly: .ht-hot is positioned in percentages, so the box must size to
   the image exactly, not to the viewport. */
#ht-lb-box{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:100%}
#ht-lb-box img{display:block;max-width:100%;max-height:88vh;width:auto;height:auto;
  border-radius:8px;border:1px solid var(--ht-border)}
/* the ring's pulse is a page-level flourish; hold it steady when enlarged,
   since the reader is now looking closely at the thing it points to */
#ht-lb-box .ht-hot::before{animation:none}
#ht-lb .close{position:absolute;top:18px;right:22px;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ht-muted);background:none;
  border:1px solid var(--ht-border);border-radius:6px;padding:7px 12px;cursor:pointer}
#ht-lb .close:hover{color:var(--white);border-color:var(--light)}

/* ---------------------------------------------------- SECTION INDEX ----- */
.ht-index{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ht-index a{display:block;border:1px solid var(--ht-border);border-radius:12px;
  padding:22px 24px;background:#1a1a1a;text-decoration:none;transition:.15s}
.ht-index a:hover{border-color:rgba(255,102,0,.3);background:var(--light)}
/* Planned-but-unwritten guides. A div, not a disabled <a> -- nothing to click,
   nothing for a screen reader to announce as a link. */
.ht-index .soon{display:block;border:1px dashed var(--ht-border);border-radius:12px;
  padding:22px 24px;background:rgba(26,26,26,.5);opacity:.55}
.ht-index .soon h2,.ht-index .soon p{color:var(--ht-muted)}
.ht-index .soon .meta{color:var(--ht-dim)}
.ht-index h2{margin:0 0 8px}
.ht-index p{margin:0;font-size:.9rem;color:var(--ht-muted)}
.ht-index .meta{display:block;margin-top:12px;font-size:.66rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--orange)}

/* ----------------------------------------------------- RESPONSIVE ------- */
@media (max-width:768px){ .ht-wrap{padding:0 1rem} }
@media (max-width:720px){
  .ht-step{grid-template-columns:1fr;gap:0}
  .ht-rail{flex-direction:row;align-items:baseline;gap:12px;margin-bottom:6px}
  .ht-rail-line{display:none}
  .ht-num{font-size:2.2rem}
  .ht-tag{font-size:10px;padding:2px 6px}
  .ht-finish-body{padding:22px 18px 24px}
  .ht-note{flex-direction:column;gap:10px}
  .ht-note-k{flex:0 0 auto;padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ht-hot::before{animation:none}
  *{transition:none !important}
}
