/* Get set up (Today). One card: a heading with the count, the selected step's
   sentence and button, and a row of step chips. Everything is prefixed "st-".

   The card never moves the page: a one-line script in today.html sets
   html[data-setup-tour] before first paint, only when this browser already
   remembers an open checklist for this account, and every height below is
   fixed, so the box is the same size before and after it is drawn. Without the
   attribute it takes no space at all. While it is shown, the older get started
   strip stays out of Today (one panel at a time). */
.st-card{display:none}
html[data-setup-tour] .gs-strip,html[data-setup-gone] .gs-strip{display:none}
html[data-setup-tour] .st-card{display:grid;grid-template-rows:28px 44px 60px;row-gap:12px;box-sizing:border-box;height:202px;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);scroll-margin-top:calc(var(--mast-h) + 12px)}
html[data-setup-tour] .st-card:empty{background:var(--pane)}

.st-head{display:flex;align-items:center;gap:12px;min-width:0}
.st-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}
.st-title::before{display:none}
.st-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}
.st-card[data-state="done"] .st-count{background:color-mix(in srgb,var(--confirm) 14%,var(--pane));color:var(--confirm)}
.st-close{display:inline-grid;place-items:center;width:28px;height:28px;margin:0 0 0 auto;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-3);cursor:pointer;position:relative;flex:none}
.st-close::after{content:"";position:absolute;inset:-8px}
.st-close:hover{background:var(--pane-2);color:var(--ink)}
.st-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.st-detail{display:flex;align-items:center;gap:16px;min-width:0}
.st-note{flex:1;min-width:0;max-width:none;margin:0;font:400 14.5px/20px var(--sans);color:var(--ink-2);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.st-note b{font-weight:650;color:var(--ink)}
.st-action{flex:none;display:flex}
.st-action:empty{display:none}
.st-go{min-height:40px;padding:10px 18px;font-size:13.5px;white-space:nowrap}
.st-go[disabled]{opacity:.7;cursor:default;transform:none}

.st-steps{display:grid;grid-template-columns:repeat(var(--st-n,5),minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.st-step{min-width:0}
.st-chip{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:0 10px;box-sizing:border-box;width:100%;height:60px;margin:0;padding:0 12px;text-align:left;font:inherit;
  border:1px solid var(--rule);border-radius:var(--r-md);background:var(--pane);color:inherit;cursor:pointer;
  transition:border-color .15s ease,box-shadow .2s ease,background-color .15s ease}
.st-chip:hover{border-color:color-mix(in srgb,var(--violet) 45%,var(--rule))}
.st-step.is-on .st-chip{border-color:color-mix(in srgb,var(--violet) 60%,var(--rule));background:color-mix(in srgb,var(--violet) 8%,var(--pane));box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 12%,transparent)}
.st-close:focus-visible,.st-chip:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.st-mark{--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)}
.st-mark svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-step.is-done .st-mark{--c:var(--confirm)}
.st-step.is-done .st-mark svg{stroke-width:2.4}
.st-step.is-later .st-mark,.st-step.is-locked .st-mark,.st-step.is-unknown .st-mark{--c:var(--ink-3)}
.st-step.is-waiting .st-mark{--c:var(--blue)}
/* The optional Discord extra: dashed, quieter, and never counted. */
.st-step.is-optional .st-chip{border-style:dashed}
.st-step.is-optional .st-mark{--c:var(--ink-2)}
.st-chip-text{display:flex;flex-direction:column;min-width:0}
.st-short{font:650 14px/19px var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-tiny{display:none}
.st-step.is-done .st-short,.st-step.is-done .st-tiny{color:var(--ink-2);font-weight:600}
.st-state{font:500 12.5px/17px var(--sans);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-step.is-done .st-state{color:var(--confirm);font-weight:650}
.st-step.is-next .st-state{color:var(--violet);font-weight:650}


/* Narrower than a laptop: smaller chips. */
/* Laptop down to tablet: the sentence gets its own three lines and the button
   sits under it; the chips keep their two lines with the one-word label. */
@media (max-width:1100px){
  html[data-setup-tour] .st-card{grid-template-rows:28px 112px 60px;height:270px}
  .st-detail{flex-direction:column;align-items:flex-start;gap:8px}
  .st-note{flex:none;width:100%;height:60px;-webkit-line-clamp:3}
  .st-detail:has(.st-action:empty) .st-note{height:auto;-webkit-line-clamp:5}
  .st-go{min-height:44px}
  .st-chip{grid-template-columns:28px minmax(0,1fr);gap:0 8px;padding:0 8px}
  .st-mark{width:28px;height:28px;border-radius:var(--r-sm)}
  .st-short{display:none}
  .st-tiny{display:block;font:650 13.5px/19px var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Phone: four lines for the sentence, a full-width button, and chips that
   stack an icon over a one-word label. */
@media (max-width:800px){
  html[data-setup-tour] .st-card{grid-template-rows:28px 132px 62px;row-gap:10px;height:272px;margin:12px 0 8px;padding:14px}
  .st-detail{align-items:stretch}
  .st-note{height:80px;-webkit-line-clamp:4}
  .st-detail:has(.st-action:empty) .st-note{-webkit-line-clamp:6}
  .st-go{width:100%;white-space:normal;line-height:1.2}
  .st-steps{gap:6px}
  .st-chip{grid-template-columns:minmax(0,1fr);grid-template-rows:26px 18px;justify-items:center;align-content:center;gap:4px 0;height:62px;padding:0 3px;text-align:center}
  .st-chip-text{width:100%}
  .st-mark{width:26px;height:26px}
  .st-mark svg{width:15px;height:15px}
  .st-tiny{font-size:12px;line-height:18px}
  .st-state{display:none}
}
@media (max-width:800px){
  /* Six chips with the optional Discord one: a touch smaller so every label fits. */
  .st-steps:has(.is-optional) .st-tiny{font-size:10.5px;letter-spacing:-.02em}
}
@media (max-width:360px){
  .st-tiny{font-size:11px;letter-spacing:-.01em}
}
@media (prefers-reduced-motion:reduce){.st-chip{transition:none}}