/* Help: the how-to videos (public/help.js).
   Two ways in, in this order: ask (the question and the search, centered at a
   reading measure), or follow (one dark band holding the three-video path for
   someone brand new; it is the only dark thing on the page, so the eye lands
   on it). Then six drawn topics, then every video as a row that reads as the
   question it answers. Bigger type and bigger targets than the rest of the
   console on purpose: this is the page for the moment someone is lost. */

.help{max-width:1080px;margin:0 auto;padding:8px 0 70px;font-size:16px;color:var(--ink)}
.help-kicker{display:inline-block;font:600 12.5px/1.4 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-live)}
.help a{color:var(--accent-live)}

/* ---------------------------------------------------------------- ask */
.help-ask{max-width:760px;margin:26px auto 46px;text-align:center}
.help-ask h2{font:800 44px/1.12 var(--head);letter-spacing:-.025em;color:var(--ink);margin:12px 0 14px}
.help-ask > p{font-size:18.5px;line-height:1.55;color:var(--text-2);margin:0 auto 28px;max-width:600px}
.help-search{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line-strong);
  border-radius:14px;padding:8px 10px 8px 22px;text-align:left;
  box-shadow:0 2px 4px rgba(var(--ink-rgb),.05),0 22px 44px -22px rgba(var(--ink-rgb),.35);transition:box-shadow .15s ease,border-color .15s ease}
.help-search:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),0 22px 44px -22px rgba(var(--ink-rgb),.35)}
.help-search__icon{width:26px;height:26px;color:var(--steel);flex:none;display:flex}
.help-search__icon svg{width:26px;height:26px}
.help .help-search input{flex:1;border:0;box-shadow:none;outline:none;font:400 20px/1.3 var(--sans);
  padding:15px 2px;background:transparent;color:var(--ink);min-width:0}
.help .help-search input::placeholder{color:var(--gray)}
.help .help-search input::-webkit-search-cancel-button{display:none}
.help .help-search__clear{width:40px;height:40px;padding:0;border-radius:50%;background:var(--paper);
  border:0;color:var(--text-2);font-size:15px;box-shadow:none;flex:none}
.help .help-search__clear:hover{background:var(--fog);color:var(--ink)}
.help-popular{margin:18px 0 0;font-size:15.5px;color:var(--text-3);display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:8px 22px}
.help-popular a{font-weight:600;text-decoration:none;border-bottom:1.5px solid color-mix(in srgb, var(--accent-live) 28%, transparent)}
.help-popular a:hover{border-bottom-color:var(--accent-live)}

/* ------------------------------------------------- the path, the one dark band */
.help-start{background:var(--band);box-shadow:var(--band-lift);border-radius:16px;
  padding:34px 36px 36px;margin-bottom:56px;color:var(--white)}
.help-start .help-kicker{color:var(--band-kick)}
.help-start h3{color:var(--white);font:700 26px/1.25 var(--head);margin:6px 0 24px}
.help-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
/* the line the three steps sit on: it reads as "one, then the next" */
.help-path::before{content:"";position:absolute;left:8%;right:8%;top:31px;height:2px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb, var(--band-kick) 70%, transparent) 0 8px,transparent 8px 15px)}
.help-path li{position:relative;display:flex}
.help .help-step{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;
  background:var(--white);color:var(--ink);border:0;border-radius:12px;padding:0 22px 20px;margin-top:10px;
  box-shadow:0 2px 4px rgba(var(--ink-rgb),.12),0 18px 36px -18px rgba(var(--ink-rgb),.55);font-weight:400;
  transition:transform .14s ease,box-shadow .14s ease}
.help .help-step:hover,.help .help-step:focus-visible{background:var(--white);transform:translateY(-3px);outline:none;
  box-shadow:0 0 0 3px var(--band-kick),0 22px 40px -18px rgba(var(--ink-rgb),.6)}
.help-step__n{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--white);
  font:800 20px/44px var(--head);text-align:center;margin:-10px 0 14px;box-shadow:0 0 0 5px var(--white)}
.help-step__q{font:700 18px/1.35 var(--head);flex:1;margin-bottom:16px}
.help-step__go{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--accent-live)}
.help-step__play{width:30px;height:30px;border-radius:50%;background:var(--accent-live);color:var(--white);display:flex;
  align-items:center;justify-content:center}
.help-step__play svg{width:15px;height:15px;margin-left:2px}

/* ------------------------------------------------------------- topics */
.help-topics{margin-bottom:60px}
.help-topics > .help-kicker{display:block;text-align:center;margin-bottom:18px}
.help-tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:18px}
.help .help-tile{display:flex;flex-direction:column;gap:6px;height:100%;padding:24px 24px 20px;
  background:var(--white);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-m);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.help .help-tile:hover,.help .help-tile:focus-visible{transform:translateY(-2px);border-color:var(--accent);
  box-shadow:var(--shadow-l);outline:none}
.help-tile__icon{width:48px;height:48px;border-radius:12px;background:color-mix(in srgb, var(--accent) 12%, var(--white));color:var(--accent-live);
  display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.help-tile__icon svg{width:27px;height:27px}
.help-tile b{font:700 18.5px/1.3 var(--head)}
.help-tile span{font-size:15px;line-height:1.5;color:var(--text-2);flex:1}
.help-tile em{font-style:normal;font-size:14px;font-weight:600;color:var(--steel);margin-top:8px}

/* -------------------------------------------------------------- shelves */
.help-shelf{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-m);
  margin-bottom:28px;overflow:hidden;scroll-margin-top:90px}
.help-shelf > header{display:flex;gap:16px;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--white) 0%,var(--paper) 100%)}
.help-shelf__icon{width:46px;height:46px;flex:none;border-radius:12px;background:var(--ink);color:var(--white);
  display:flex;align-items:center;justify-content:center}
.help-shelf__icon svg{width:25px;height:25px}
.help-shelf h3{font:700 21px/1.25 var(--head);margin:0 0 2px}
.help-shelf header p{margin:0;color:var(--text-2);font-size:15px}

.help-rows{display:flex;flex-direction:column}
.help .help-row{display:grid;grid-template-columns:46px 1fr auto;gap:18px;align-items:center;width:100%;
  text-align:left;background:var(--white);color:var(--ink);border:0;border-top:1px solid var(--line);border-radius:0;
  padding:17px 26px;font-weight:400;box-shadow:none;transition:background .12s ease}
.help .help-rows > .help-row:first-child{border-top:0}
.help .help-row:hover,.help .help-row:focus-visible{background:color-mix(in srgb, var(--accent) 6%, var(--white));outline:none}
.help-row__play{width:46px;height:46px;border-radius:50%;border:2px solid var(--accent-live);color:var(--accent-live);
  display:flex;align-items:center;justify-content:center;transition:background .12s ease,color .12s ease}
.help-row__play svg{width:20px;height:20px;margin-left:3px}
.help .help-row:hover .help-row__play,.help .help-row:focus-visible .help-row__play{background:var(--accent-live);color:var(--white)}
.help-row__words{display:flex;flex-direction:column;gap:3px;min-width:0}
.help-row__words b{font:600 17.5px/1.38 var(--head);color:var(--ink)}
.help-row__words > span:not(.help-row__topic){font-size:15px;line-height:1.45;color:var(--text-2)}
.help-row__topic{font:600 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.help-row__len{font:600 14px/1 var(--mono);color:var(--steel);background:var(--paper);padding:7px 10px;border-radius:6px;white-space:nowrap}
.help mark{background:color-mix(in srgb, var(--accent) 20%, var(--white));color:inherit;border-radius:3px;padding:0 2px}

/* search results: the same rows, in one card */
.help-count{font:700 19px/1.3 var(--head);margin:0 0 14px}
.help-count--also{font-size:16px;color:var(--text-3);margin-top:34px}
.help-rows--card{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-m);overflow:hidden}
.help-rows--quiet{box-shadow:var(--shadow-s)}
.help-back{margin:26px 0 0;font-weight:600}
.help-back a{text-decoration:none}
.help-none{max-width:620px;margin:0 auto;text-align:center;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:34px;box-shadow:var(--shadow-m);font-size:17px}
.help-none b{font:700 20px/1.3 var(--head)}
.help-none p{color:var(--text-2);margin:10px 0 0;line-height:1.6}

/* ---------------------------------------------------------------- player */
body.help-open{overflow:hidden}
.help-player{position:fixed;inset:0;z-index:1000;background:rgba(var(--ink-rgb),.86);
  display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:28px 22px}
.help-player__box{width:100%;max-width:1320px;background:var(--white);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(var(--ink-rgb),.5)}
.help-player__top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 14px 26px;
  border-bottom:1px solid var(--line)}
.help-player__topic{display:inline-flex;align-items:center;gap:9px;font:600 12.5px/1.4 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-live)}
.help-player__topic svg{width:20px;height:20px}
.help-player .help-player__x{background:var(--paper);border:1px solid var(--line);color:var(--ink);
  font-size:15px;padding:9px 16px;box-shadow:none}
.help-player .help-player__x:hover{background:var(--fog);border-color:var(--mist)}
.help-player__body{display:grid;grid-template-columns:minmax(0,1fr) 360px}
.help-player__main{padding:22px 26px 26px}
.help-player video{display:block;width:100%;aspect-ratio:16/9;background:var(--night);border-radius:10px}
.help-player__main h3{font:700 25px/1.3 var(--head);margin:20px 0 8px}
.help-player__answer{font-size:17.5px;line-height:1.5;color:var(--text-2);margin:0 0 20px}
.help-player__nav{display:flex;flex-wrap:wrap;gap:10px}
.help-player__nav button{font-size:15.5px;padding:11px 18px}
.help-player__nav button:disabled{opacity:.4;cursor:default}
.help-player__nav #help-next{margin-left:auto}
.help-player__steps{background:var(--surface-2);border-left:1px solid var(--line);padding:24px 22px;
  max-height:calc(100vh - 140px);overflow-y:auto}
.help-player__hint{margin:4px 0 14px;color:var(--text-3);font-size:14px}
.help-player__steps ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.help-player .help-pstep{display:grid;grid-template-columns:30px 1fr;gap:12px;width:100%;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text-2);
  font-weight:400;font-size:15px;line-height:1.5;box-shadow:none;transition:border-color .12s ease,background .12s ease}
.help-player .help-pstep:hover{background:var(--white);border-color:var(--silver);color:var(--ink)}
.help-pstep__n{width:30px;height:30px;border-radius:50%;background:var(--fog);color:var(--text-2);
  font:700 14px/30px var(--head);text-align:center}
.help-player .help-pstep.done{color:var(--text-3)}
.help-player .help-pstep.done .help-pstep__n{background:var(--mist);color:var(--white)}
.help-player .help-pstep.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, var(--white));color:var(--ink);box-shadow:0 0 0 1px var(--accent)}
.help-player .help-pstep.on .help-pstep__n{background:var(--accent);color:var(--white)}

/* ---------------------------------------------------- the public page at /help */
.help-page{padding:20px 24px 0}
.help-page__top{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.help-page__top img{height:42px;width:auto;display:block}
.help-page__top a.help-page__open{font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--line-strong);
  background:var(--white);color:var(--ink);padding:10px 16px;border-radius:8px;white-space:nowrap}
.help-page__top a.help-page__open:hover{border-color:var(--ink)}

@media (max-width:1000px){
  .help-player__body{grid-template-columns:1fr}
  .help-player__steps{border-left:0;border-top:1px solid var(--line);max-height:none}
}
@media (max-width:860px){
  .help-path{grid-template-columns:1fr;gap:14px}
  .help-path::before{left:31px;right:auto;top:20px;bottom:20px;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,color-mix(in srgb, var(--band-kick) 70%, transparent) 0 8px,transparent 8px 15px)}
  .help-tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .help-ask{margin:14px auto 32px}
  .help-ask h2{font-size:32px}
  .help-ask > p{font-size:16.5px}
  .help .help-search input{font-size:17px;padding:12px 2px}
  .help-start{padding:26px 18px 22px;border-radius:14px}
  .help-tiles{grid-template-columns:1fr}
  .help-shelf > header{padding:18px}
  .help .help-row{grid-template-columns:40px 1fr;padding:15px 18px;gap:14px}
  .help-row__play{width:40px;height:40px}
  .help-row__len{grid-column:2;justify-self:start;margin-top:-4px}
  .help-player{padding:0}
  .help-player__box{border-radius:0}
  .help-player__main{padding:14px 16px 18px}
  .help-player__nav #help-next{margin-left:0}
  .help-page{padding:14px 16px 0}
  .help-page__top img{height:32px}
  .help-page__top a.help-page__open{font-size:14px;padding:9px 12px}
}
.help-ask > p.help-popular{max-width:none;margin:18px 0 0}

/* "Get help" links on each console page (app.js PAGE_HELP). The library itself
   is never shown in the floating root, only its player. */
#help-float > .help{display:none}
.pagehelp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0}
.pagehelp__label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:currentColor;opacity:.72;margin-right:2px}
.pagehelp .pagehelp__vid{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:var(--white);color:var(--ink);border:1px solid var(--line-strong);font-size:13px;font-weight:600;
  line-height:1.2;box-shadow:0 1px 2px rgba(var(--ink-rgb),.06);cursor:pointer}
.pagehelp .pagehelp__vid span{color:var(--accent);font-size:10px}
.pagehelp .pagehelp__vid:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, var(--white))}