/* Get started strip (Top 100, Brands and Today). A signed-in beta member who has not
   finished the first steps sees one soft panel: four steps, the next one
   marked, a line saying what to do. Everything is prefixed "gs-".

   The strip never moves the page: a one-line script in the page sets
   html[data-get-started="<steps>"] before first paint, only when this browser
   already knows the member has steps left, and the heights below are fixed so
   the box is the same size before and after the steps are drawn. Without the
   attribute (signed out, finished, hidden) the strip takes no space at all. */
.gs-strip{display:none}
html[data-get-started] .gs-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head close" "steps steps";
  align-content:start;gap:12px 16px;box-sizing:border-box;height:136px;margin:16px 0 12px;padding:16px 20px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--violet) 22%,var(--rule));border-radius:var(--r-lg);
  background:radial-gradient(120% 160% at 100% 0,color-mix(in srgb,var(--violet) 10%,transparent),transparent 60%),var(--pane);
  box-shadow:0 1px 2px rgba(25,24,40,.04)}
.gs-head{grid-area:head;display:flex;align-items:center;gap:6px 12px;min-width:0;height:28px}
.gs-title{margin:0;padding:0;border:0;font:700 17px/28px var(--sans);letter-spacing:-.01em;text-transform:none;color:var(--ink);white-space:nowrap}
.gs-title::before{display:none}
.gs-count{flex:none;padding:3px 10px;border-radius:var(--r-pill);background:var(--violet-soft);color:var(--violet);font:650 13px/18px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.gs-note{flex:1;min-width:0;max-width:none;margin:0;font:400 14px/20px var(--sans);color:var(--ink-2);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.gs-note b{font-weight:650;color:var(--ink)}
.gs-close{grid-area:close;display:inline-grid;place-items:center;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-3);cursor:pointer;position:relative}
.gs-close::after{content:"";position:absolute;inset:-8px}
.gs-close:hover{background:var(--pane-2);color:var(--ink)}
.gs-close:focus-visible,.gs-step-link:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.gs-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.gs-steps{grid-area:steps;display:grid;grid-template-columns:repeat(var(--gs-n,4),minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.gs-step{min-width:0}
.gs-step-body{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:0 10px;box-sizing:border-box;height:60px;padding:0 12px;
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--pane);color:inherit;text-decoration:none;
  transition:border-color .15s ease,box-shadow .2s ease,background-color .15s ease}
.gs-step-link:hover{border-color:color-mix(in srgb,var(--violet) 45%,var(--rule));box-shadow:0 1px 2px rgba(25,24,40,.05),0 0 0 4px color-mix(in srgb,var(--violet) 12%,transparent)}
.gs-step-body.is-wait{border-style:dashed;background:transparent}
.gs-step.is-next .gs-step-body{border-color:color-mix(in srgb,var(--violet) 55%,var(--rule));background:color-mix(in srgb,var(--violet) 7%,var(--pane))}
.gs-ico{--c:var(--violet);display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-md);background:color-mix(in srgb,var(--c) 13%,var(--pane));color:var(--c)}
.gs-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gs-step[data-step="follow"] .gs-ico{--c:var(--strike)}
.gs-step[data-step="discord"] .gs-ico{--c:color-mix(in srgb,#5865F2 72%,var(--ink))}
.gs-step[data-step="forum"] .gs-ico{--c:var(--blue)}
.gs-step.is-done .gs-ico{--c:var(--confirm)}
.gs-step.is-done .gs-ico svg{stroke-width:2.4}
.gs-text{display:flex;flex-direction:column;min-width:0}
.gs-label{font:650 14px/19px var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-step.is-done .gs-label{color:var(--ink-2);font-weight:600}
.gs-state{font:500 12.5px/17px var(--sans);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-step.is-done .gs-state{color:var(--confirm);font-weight:650}
.gs-step.is-next .gs-state{color:var(--violet);font-weight:650}

/* The line a member sees on the brand list right after accepting an invite on
   a phone. It is in the page's HTML and shown by an attribute set before first
   paint, so it never arrives late. */
.gs-welcome{display:none}
html[data-beta-welcome] .gs-welcome{display:flex;align-items:flex-start;gap:10px;max-width:none;margin:16px 0 0;padding:12px 16px;border:1px solid color-mix(in srgb,var(--confirm) 28%,var(--rule));border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--confirm) 7%,var(--pane));font:400 14.5px/21px var(--sans);color:var(--ink-2)}
.gs-welcome svg{flex:none;width:20px;height:20px;margin-top:1px;padding:3px;box-sizing:border-box;border-radius:var(--r-pill);background:color-mix(in srgb,var(--confirm) 16%,var(--pane));fill:none;stroke:var(--confirm);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gs-welcome b{font-weight:650;color:var(--ink)}
/* "Email me the link for my computer": the account's own address, through /api/send-connect-link. */
.gs-welcome-send{display:inline;margin:0;padding:0;border:0;background:none;font:inherit;font-weight:650;color:var(--violet);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.gs-welcome-send:disabled{color:var(--ink-2);text-decoration:none;cursor:default}
.gs-welcome-status{display:block}
.gs-welcome-status:empty{display:none}

/* Narrower than a laptop: the line of help gets its own row, two lines tall. */
@media (max-width:1280px){
  html[data-get-started] .gs-strip{height:184px}
  .gs-head{flex-wrap:wrap;align-content:start;height:76px;margin-right:-44px}
  .gs-note{flex:none;width:100%;height:40px;-webkit-line-clamp:2}
  .gs-step-body{grid-template-columns:28px minmax(0,1fr);gap:0 8px;padding:0 8px}
  .gs-ico{width:28px;height:28px;border-radius:var(--r-sm)}
  .gs-label{font-size:13.5px}
}
/* Tablet and phone: the steps sit two to a row. Three or four steps need two rows. */
@media (max-width:800px){
  html[data-get-started] .gs-strip{height:252px;margin:12px 0 8px;padding:16px}
  html[data-get-started="1"] .gs-strip,html[data-get-started="2"] .gs-strip{height:184px}
  .gs-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media (max-width:520px){
  html[data-get-started] .gs-strip{height:264px;padding:12px}
  html[data-get-started="1"] .gs-strip,html[data-get-started="2"] .gs-strip{height:196px}
  .gs-head{height:96px}
  .gs-note{height:60px;-webkit-line-clamp:3}
  .gs-step-body{grid-template-columns:26px minmax(0,1fr);gap:0 7px;padding:0 7px}
  .gs-ico{width:26px;height:26px;border-radius:var(--r-sm)}
  .gs-ico svg{width:15px;height:15px}
  .gs-label{font-size:12.5px;letter-spacing:-.01em}
  .gs-state{font-size:12px}
}
/* The narrowest phones: the words matter more than the icon. */
@media (max-width:360px){
  .gs-step-body{grid-template-columns:minmax(0,1fr);padding:0 7px}
  .gs-label{font-size:12px}
  .gs-ico{display:none}
}
@media (prefers-reduced-motion:reduce){.gs-step-body{transition:none}}

/* "Already joined? Mark as done" on the Discord step: joining the server
   cannot be seen without connecting Discord, so the member can tick it. */
.gs-step.has-mark{position:relative}
.gs-step.has-mark .gs-step-body{padding-right:40px}
.gs-mark{position:absolute;top:50%;right:8px;z-index:1;display:inline-grid;place-items:center;width:28px;height:28px;margin:-14px 0 0;padding:0;
  border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--pane);color:var(--ink-3);cursor:pointer}
.gs-mark::after{content:"";position:absolute;inset:-8px}
.gs-mark:hover{border-color:color-mix(in srgb,var(--confirm) 45%,var(--rule));color:var(--confirm)}
.gs-mark:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.gs-mark svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:520px){.gs-step.has-mark .gs-step-body{padding-right:36px}.gs-mark{right:6px}}