/* Getting started (js/views/setup.js): a progress rail and the chosen step. Shares the help page's
   article card, kicker, lead, buttons and pager (help.css). */
.setup-page{display:grid;grid-template-columns:18rem minmax(0,1fr);gap:var(--space-4) calc(1.5rem * var(--dz));align-items:start;max-width:78rem;margin:0 auto;width:100%}
.setup-rail{position:sticky;top:0;max-height:calc(100dvh - var(--bar-h) - 2rem);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--fs-sm)}
.setup-rail-head h2{margin:0;font-size:var(--fs-xl);color:var(--ink)}
.setup-rail .help-kicker{margin-bottom:var(--space-1)}
.setup-meter{display:flex;flex-direction:column;gap:calc(0.25rem * var(--dz))}
.setup-meter-head{display:flex;justify-content:space-between;font-weight:var(--fw-semibold);color:var(--ink)}
.setup-meter small{color:var(--muted);font-size:var(--fs-xs)}
.setup-list{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column;gap:calc(0.0625rem * var(--dz))}
.setup-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2);padding:calc(0.375rem * var(--dz)) var(--space-2);border-radius:var(--control-radius);color:var(--ink-2);text-decoration:none}
.setup-link:hover{background:var(--grid);color:var(--ink)}
.setup-link[aria-current="step"]{background:var(--accent-wash);color:var(--ink);font-weight:var(--fw-bold)}
.setup-name small{display:inline-block;min-width:1.25rem;color:var(--muted);font-variant-numeric:tabular-nums}
.setup-pct{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.setup-state svg,.setup-card svg,.setup-notice svg,.setup-done svg,.setup-actions svg{width:var(--icon);height:var(--icon);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.setup-state{display:grid;color:var(--muted)}
.setup-link.is-done .setup-state,.setup-card.is-done .setup-card-state{color:var(--pos)}
.setup-link.is-part .setup-state,.setup-card.is-part .setup-card-state{color:var(--accent-ink)}
.setup-link.is-lock{opacity:.7}

.setup-main{background:var(--card-bg);border:var(--card-border);border-bottom:var(--card-border-b);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:calc(1.75rem * var(--dz)) calc(2.25rem * var(--dz)) calc(1.5rem * var(--dz));min-width:0;color:var(--ink-2);font-size:var(--fs-lg);line-height:1.55}
.setup-head{display:flex;align-items:flex-start;gap:calc(1.5rem * var(--dz))}
.setup-head > div{flex:1;min-width:0}
.setup-head h1{margin:0;font-family:var(--font-display);font-size:var(--fs-display-sm);line-height:1.15;color:var(--ink);font-weight:var(--fw-bold)}
.setup-art{flex:none;width:clamp(7rem,14vw,11rem)}
.setup-art:empty{display:none}
.setup-art svg{display:block;width:100%;height:auto}
.setup-notice{display:flex;gap:var(--space-2);align-items:flex-start;margin:var(--space-3) 0 0;padding:var(--space-2) var(--space-3);border-radius:var(--control-radius);background:var(--demo-wash);color:var(--ink);font-size:var(--fs-md)}
.setup-notice.is-lock{background:var(--grid)}
.setup-notice a{color:var(--accent-ink)}
.setup-progress{margin:var(--space-4) 0 var(--space-2)}
.setup-progress p{margin:var(--space-1) 0 0;font-size:var(--fs-md)}
.setup-progress .meter,.setup-meter .meter{height:.5rem}
.setup-why{margin:var(--space-3) 0}
.setup-actions{display:flex;flex-wrap:wrap;gap:0;margin:var(--space-3) 0}
.setup-actions .help-btn[aria-pressed="true"]{border-color:var(--pos);color:var(--pos)}
.setup-todo{margin:var(--space-4) 0 0}
.setup-todo h3{display:flex;align-items:baseline;gap:var(--space-2);margin:0 0 var(--space-2);font-size:var(--fs-lg);color:var(--ink)}
.setup-todo h3 small{font-size:var(--fs-sm);color:var(--muted);font-weight:var(--fw-medium)}
.setup-todo ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--line)}
.setup-item{all:unset;box-sizing:border-box;display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);width:100%;padding:calc(0.5rem * var(--dz)) var(--space-2);border-bottom:1px solid var(--line);cursor:pointer;font-size:var(--fs-md);color:var(--ink);text-decoration:none}
.setup-item:hover,.setup-item:focus-visible{background:var(--grid)}
.setup-item:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.setup-item small{flex:none;font-size:var(--fs-xs);color:var(--muted)}
.setup-todo.is-soft .setup-item{color:var(--ink-2)}
.setup-done{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-4) 0 0;color:var(--pos);font-weight:var(--fw-semibold)}

/* Overview */
.setup-bars{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:var(--space-4) 0}
.setup-bars section{padding:var(--space-3) var(--space-4);border-radius:var(--control-radius);background:var(--grid);font-size:var(--fs-md)}
.setup-bars h3{display:flex;justify-content:space-between;margin:0 0 var(--space-1);font-size:var(--fs-lg);color:var(--ink)}
.setup-bars p{margin:0}
.setup-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:var(--space-2)}
.setup-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:start;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--control-radius);color:var(--ink);text-decoration:none;font-size:var(--fs-md);line-height:1.4}
.setup-card:hover{border-color:var(--accent);background:var(--accent-wash)}
.setup-card > svg{margin-top:.15em;color:var(--accent-ink)}
.setup-card span{display:flex;flex-direction:column}
.setup-card small{color:var(--muted);font-size:var(--fs-sm)}
.setup-card-state{flex-direction:row !important;align-items:center;gap:var(--space-1);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.setup-card.is-lock{opacity:.7}

@media (max-width:56.25em){
  .setup-page{grid-template-columns:1fr}
  .setup-rail{position:static;max-height:none}
  .setup-list{display:none}
  .setup-main{padding:var(--space-4)}
  .setup-bars{grid-template-columns:1fr}
  .setup-art{display:none}
}