/* help-assets/v3_help.css -- CRATE › HELP, the cheat sheet (2026-10-02).
   Its own file so it stays out of the one big stylesheet in index.html. That
   sheet loads AFTER this one, so anything here that has to beat it carries a
   second class (see .crate-main.crate-main-help). Colours are sampled from
   Jade's mock, HELPME.png. */

.help-page{
  --hl-yellow:#d6dc26;   /* titles, bold lime words */
  --hl-lime:#d8e898;     /* soft lime words */
  --hl-pink:#e8107a;     /* hot pink words, CRATE labels */
  --hl-soft:#f8a8c8;     /* soft pink words */
  --hl-orange:#f49424;   /* the price line */
  --help-text:#f8f8f8;
  font-family:"automate", var(--font-mono);
  font-size:13.7px;
  line-height:1.55;
  color:var(--help-text);
  letter-spacing:0.01em;
  /* the mock's night fade, black at the top to plum at the bottom */
  background:linear-gradient(180deg, #060608 0%, #1a0d12 20%, #2d131f 40%, #3e1728 60%, #4e1530 80%, #5d1038 100%);
  border-radius:6px;
  padding:26px 28px 34px;
  /* no overflow:hidden: the rounded background needs no clip, and a clipping box made
     the hover glows below draw ghost rectangles in some browsers */
}
.help-page p{ margin:0 0 0.9em; }
.help-page img{ -webkit-user-drag:none; user-select:none; }

/* No scroll region inside the window: it grows and the PAGE scrolls.
   Two classes, so it outranks .crate-main's max-height further down the
   main sheet (and the phone rules, which only ever lift it). */
.crate-main.crate-main-help{ max-height:none; overflow:visible; scrollbar-gutter:auto; }
/* the window title is Jade's sentence, so it keeps her lower case */
.help-win-title{ text-transform:none; }

/* --- highlights ------------------------------------------------------- */
.hl-y{ color:var(--hl-yellow); font-weight:700; }
.hl-l{ color:var(--hl-lime); }
.hl-p{ color:var(--hl-pink); }
.hl-s{ color:var(--hl-soft); }
.hl-w{ color:#fff; font-weight:700; }

/* in-text links: a CRATE section, styled as the word it is */
.help-sec{
  display:inline; text-align:inherit; white-space:normal;
  background:none; border:0; padding:0; margin:0; font:inherit; letter-spacing:inherit;
  cursor:pointer; text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:3px; transition:text-decoration-color .15s ease, text-shadow .15s ease;
}
.help-sec:hover, .help-sec:focus-visible{
  text-decoration-color:currentColor; text-shadow:0 0 8px currentColor; outline:none;
}
.help-sec.hl-p{ color:var(--hl-pink); }
.help-sec.hl-s{ color:var(--hl-soft); }
.help-ext{ text-decoration:underline; text-decoration-color:rgba(248,168,200,0.45); text-underline-offset:3px; transition:text-decoration-color .15s ease, text-shadow .15s ease; }
.help-ext:hover, .help-ext:focus-visible{ text-decoration-color:currentColor; text-shadow:0 0 8px currentColor; outline:none; }

/* --- welcome ---------------------------------------------------------- */
.help-welcome{ position:relative; }
.help-hello{
  display:flex; align-items:center; gap:16px; margin:0 0 14px;
  font-family:inherit; font-size:27px; font-weight:700; line-height:1.15; letter-spacing:0.02em;
  color:var(--hl-yellow); text-shadow:0 0 10px rgba(214,220,38,0.45);
  text-transform:none;
}
.help-arrow{ display:block; width:52px; height:auto; flex:none; }
.help-arrow-big{ width:78px; }
.help-arrowline{
  display:grid; grid-template-columns:52px 1fr; gap:0 16px; align-items:start;
  margin:0 0 6px 62px; font-size:14.5px;
}
.help-arrowline .help-arrow{ margin-top:0.35em; }
.help-sign{ display:inline-block; padding-left:2.4em; }
/* sits beside the INDEX lockup, as drawn; pulled up into its row */
.help-egg{
  display:block; width:180px; height:auto; margin:22px 0 -150px 40px;
  position:relative; z-index:0; pointer-events:none;
}

/* --- feature blocks --------------------------------------------------- */
.help-block{ margin-top:52px; position:relative; z-index:1; }
/* STATIONS tucks up under DIG so the two paid searches read as a pair: the radio
   rises beside DIG's shorter last lines, and the word (42px down inside the art)
   lands just under the text. Measured at the full-width desktop box; narrower
   screens get the plain small gap (below). */
#help-stations{ margin-top:-46px; }
/* below 1180px the page box narrows and DIG's text wraps to a 4th line, so no tuck */
@media (max-width:1179px){ #help-stations{ margin-top:14px; } }
.help-head{ display:flex; flex-direction:column; align-items:flex-start; }
.help-side-right .help-head{ align-items:flex-end; text-align:right; }
.help-lockup-row{ display:flex; align-items:center; gap:14px; max-width:100%; }
.help-side-right .help-lockup-row{ flex-direction:row-reverse; }

.help-lockup{
  display:block; width:min(var(--help-w), 100%); padding:0; margin:0;
  background:none; border:0; border-radius:10px; cursor:pointer;
}
/* Hover glows: the glow layer exists from the start (an invisible shadow, promoted up
   front), so a hover only changes its colour. Switching a filter on at hover time is
   what drew ghost boxes around the art (Jade, 2026-10-03). No brightness(): it tinted
   the faint edge pixels. */
.help-lockup img, .help-pill img, .help-send img{ will-change:filter; }
.help-lockup img{ display:block; width:100%; height:auto; filter:drop-shadow(0 0 12px rgba(255,45,139,0)); transition:filter .18s ease, transform .18s ease; }
.help-tone-lime .help-lockup img{ filter:drop-shadow(0 0 12px rgba(214,232,90,0)); }
.help-tone-lime .help-lockup:hover img,
.help-tone-lime .help-lockup:focus-visible img{ filter:drop-shadow(0 0 12px rgba(214,232,90,0.85)); }
.help-tone-pink .help-lockup:hover img,
.help-tone-pink .help-lockup:focus-visible img{ filter:drop-shadow(0 0 12px rgba(255,45,139,0.9)); }
.help-lockup:focus-visible{ outline:2px dashed rgba(255,255,255,0.55); outline-offset:6px; }
.help-lockup:active img{ transform:translateY(1px); }

/* taglines sit under the lockup's WORD, not its icon (as drawn) */
.help-tag, .help-price{ padding-left:calc(min(var(--help-w), 100%) * var(--help-inset)); }
.help-side-right .help-tag,
.help-side-right .help-price{ padding-left:0; padding-right:calc(min(var(--help-w), 100%) * var(--help-inset)); }
.help-tag{ font-size:18px; line-height:1.25; margin-top:calc(2px - min(var(--help-w), 100%) * var(--help-pull, 0)); color:#fff; position:relative; }
.help-price{ font-size:13.5px; color:var(--hl-orange); font-weight:700; letter-spacing:0.03em; margin-top:1px; }
.help-body{ margin-top:20px; }

/* "you are here" on the CRATE lockup: Jade's pixel arrow, glow in code */
.help-here{ display:flex; align-items:center; gap:8px; color:var(--hl-pink); font-size:13px; white-space:nowrap; }
.help-here img{
  width:46px; height:auto; transform:scaleX(-1);
  filter:drop-shadow(0 0 6px rgba(255,45,139,0.9));
  animation:help-here-nudge 1.6s ease-in-out infinite;
}
.help-here span{ text-shadow:0 0 8px rgba(255,45,139,0.7); }
@keyframes help-here-nudge{
  0%, 100%{ translate:0 0; }
  50%{ translate:-6px 0; }
}

/* INDEX's numbered steps, hanging under their numbers */
.help-steps{ margin:0; padding-left:1.5em; }
.help-steps li{ margin:0 0 1em; padding-left:0.2em; }
.help-steps li::marker{ color:var(--hl-yellow); font-weight:700; }
.help-lead{ color:var(--hl-lime); font-size:15px; }

/* CRATE's "My Lists: ..." entries: the text hangs off its own label */
.help-defs{ margin:0; }
.help-def{ display:flex; gap:0 0.45em; margin:0 0 1em; }
.help-def dt{ flex:none; margin:0; }
.help-def dd{ flex:1; margin:0; }
.help-def dt .help-sec{ font-weight:700; }

/* --- FAQ: expandable rows, live text, no art ----------------------------- */
.help-faq{ margin-top:60px; }
.help-faq-title{
  margin:0 0 14px; font-family:inherit; font-size:27px; font-weight:700; line-height:1.15; letter-spacing:0.06em;
  color:var(--hl-yellow); text-shadow:0 0 10px rgba(214,220,38,0.45); text-transform:none;
}
.help-faq-list{ border-top:1px solid rgba(255,45,139,0.35); }
.help-faq-item{ border-bottom:1px solid rgba(255,45,139,0.35); }
.help-faq-q{
  display:flex; align-items:baseline; gap:12px; padding:12px 6px; cursor:pointer; list-style:none;
  font-size:15px; line-height:1.4; color:#fff; border-radius:6px; transition:color .15s ease, text-shadow .15s ease;
}
.help-faq-q::-webkit-details-marker{ display:none; }
.help-faq-q:hover{ color:var(--hl-lime); text-shadow:0 0 8px rgba(216,232,152,0.5); }
.help-faq-q:focus-visible{ outline:2px dashed rgba(255,255,255,0.55); outline-offset:2px; }
/* + when shut, - when open, in the lime of the titles */
.help-faq-mark{ flex:none; width:1em; text-align:center; font-weight:700; color:var(--hl-yellow); }
.help-faq-mark::before{ content:"+"; }
.help-faq-item[open] > .help-faq-q{ color:var(--hl-soft); }
.help-faq-item[open] .help-faq-mark::before{ content:"\2013"; }
.help-faq-a{ padding:0 6px 14px calc(6px + 1em + 12px); }
.help-faq-a p:last-child{ margin-bottom:0; }

/* --- MORE HELP / FIRMWARE --------------------------------------------- */
.help-more{ margin-top:56px; text-align:center; }
.help-pills{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px 30px; }
.help-pill{ display:block; width:210px; max-width:44%; border-radius:999px; }
.help-pill img{ display:block; width:100%; height:auto; filter:drop-shadow(0 0 12px rgba(214,232,90,0)); transition:filter .18s ease, transform .18s ease; }
.help-pill:hover img,
.help-pill:focus-visible img{ filter:drop-shadow(0 0 12px rgba(214,232,90,0.8)); }
.help-pill:focus-visible{ outline:2px dashed rgba(255,255,255,0.55); outline-offset:4px; }
.help-pill:active img{ transform:translateY(1px); }
.help-pill-cap{ margin:10px 0 0 !important; font-size:11.5px; color:rgba(248,248,248,0.62); }

/* --- feedback --------------------------------------------------------- */
.help-feedback{
  display:grid; grid-template-columns:170px 1fr; gap:0 18px; align-items:start;
  margin-top:40px;
}
.help-fire{ grid-column:1; grid-row:1; width:170px; height:auto; margin-top:26px; pointer-events:none; }
.help-fb-main{ grid-column:2; grid-row:1; min-width:0; }
.help-fb-title{ margin:0 0 10px -46px; }
.help-fb-title img{ display:block; width:100%; max-width:560px; height:auto; }
.help-fb-line{ font-size:13.7px; }
.help-fb-box{
  display:block; width:100%; box-sizing:border-box; min-height:130px; resize:vertical;
  margin-top:4px; padding:8px 12px;
  font-family:"automate", var(--font-mono); font-size:14px; line-height:1.5; color:#fff;
  background:rgba(0,0,0,0.28);
  /* Jade's drawn frame as a 9-slice, so the rounded corners never stretch */
  border:16px solid transparent;
  border-image:url("help-frame.webp") 58 / 16px stretch;
  border-radius:22px;
  outline:none;
  transition:box-shadow .18s ease;
}
.help-fb-box:focus{ box-shadow:0 0 18px rgba(255,45,139,0.45); }
.help-fb-box:disabled{ opacity:0.5; cursor:not-allowed; }
.help-fb-row{ display:flex; align-items:center; gap:14px; margin-top:12px; }
.help-send{ flex:none; width:122px; padding:0; margin:0; background:none; border:0; border-radius:999px; cursor:pointer; }
.help-send img{ display:block; width:100%; height:auto; filter:drop-shadow(0 0 12px rgba(255,45,139,0)); transition:filter .18s ease, opacity .18s ease, transform .18s ease; }
.help-send:hover img,
.help-send:focus-visible img{ filter:drop-shadow(0 0 12px rgba(255,45,139,0.85)); }
.help-send:focus-visible{ outline:2px dashed rgba(255,255,255,0.55); outline-offset:4px; }
.help-send:active img{ transform:translateY(1px); }
/* the pill has SEND baked in, so "sending" is a dim plus the status line */
.help-send.is-sending{ cursor:progress; }
.help-send.is-sending img{ opacity:0.45; filter:drop-shadow(0 0 12px rgba(255,45,139,0)); }
.help-send:disabled{ cursor:not-allowed; }
.help-send:disabled img{ opacity:0.35; filter:grayscale(0.4); }
.help-fb-status{ flex:1; min-width:0; font-size:12.5px; line-height:1.4; color:rgba(248,248,248,0.7); }
.help-fb-status.is-ok{ color:var(--hl-lime); }
.help-fb-status.is-err{ color:var(--hl-soft); }
.help-fb-status a{ color:var(--hl-yellow); }
.help-fb-count{ flex:none; font-size:11px; color:rgba(248,248,248,0.45); }

@media (prefers-reduced-motion: reduce){
  .help-here img{ animation:none; }
}

/* --- narrower desktop: the content box narrows below ~1000px ----------- */
@media (max-width:1000px){
  #help-stations{ margin-top:14px; }
  .help-page{ padding:22px 20px 30px; }
  .help-arrowline{ margin-left:28px; }
  .help-egg{ width:140px; margin:18px 0 -110px 16px; }
}

/* --- phone: one centred column (Jade does a full mobile pass later) ---- */
@media (max-width:760px){
  .crate-main.crate-main-help{ padding:6px; }
  .help-faq{ margin-top:44px; }
  .help-faq-title{ font-size:22px; }
  .help-faq-q{ font-size:14px; gap:10px; padding:11px 2px; }
  .help-faq-a{ padding:0 2px 12px calc(2px + 1em + 10px); }
  .help-page{ padding:18px 14px 26px; font-size:13.5px; }
  .help-hello{ font-size:21px; gap:10px; }
  .help-arrow-big{ width:52px; }
  .help-arrowline{ grid-template-columns:34px 1fr; gap:0 10px; margin-left:0; font-size:13.5px; }
  .help-arrow{ width:34px; }
  .help-sign{ padding-left:1em; }
  .help-egg{ width:110px; margin:18px auto 0; }
  .help-block{ margin-top:38px; }
  .help-head,
  .help-side-right .help-head{ align-items:center; text-align:center; }
  .help-lockup{ width:min(var(--help-w), 300px, 100%); }
  .help-lockup-row,
  .help-side-right .help-lockup-row{ flex-direction:column; gap:4px; }
  .help-tag, .help-price,
  .help-side-right .help-tag,
  .help-side-right .help-price{ padding:0; }
  .help-tag{ font-size:16px; margin-top:2px; }
  .help-here img{ transform:rotate(-90deg); width:34px; }
  .help-def{ display:block; padding-left:1em; text-indent:-1em; }
  .help-def dd{ display:inline; }
  .help-def dt{ display:inline; }
  .help-pill{ width:46%; max-width:46%; }
  .help-pills{ gap:12px 4%; }
  .help-feedback{ grid-template-columns:1fr; text-align:left; }
  .help-fire{ grid-row:1; width:110px; margin:0 auto 8px; }
  .help-fb-main{ grid-column:1; grid-row:2; }
  .help-fb-title{ margin:0 0 10px; }
  .help-fb-row{ flex-wrap:wrap; }
  .help-fb-status{ flex-basis:100%; order:3; }
}