/* =====================================================================
   public/app/onboard.css: Get live and the log-in page in the list system the owner chose (version 3, 14 October 2026)

   The three steps of Get live and the log-in card are soft panels; the inner boxes (the platform picker, the
   connection, the install line) lose their second border and sit on the panel's own tint; buttons and fields have
   10px corners, the main one lit; typing shows a thin lime edge, not a heavy ring. The steps, their order and their
   words are unchanged. Every colour and size is a token. Hover only where a pointer hovers.
   ===================================================================== */

/* ---------- Get live ---------- */
.setup{max-width:820px}
.setup .steps3{gap:14px}
.setup .step3,.setup .live-card,.setup>.card{border:1px solid var(--card-edge);border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift)}
.setup .step3{padding:20px 22px;column-gap:16px}
.setup .step3.now{border-color:var(--hair-2);box-shadow:var(--card-lift),inset 0 0 0 1px var(--focus)}
.setup .step3 .num{width:28px;height:28px;border-color:var(--hair-2)}
.setup .step3.now .num{border-color:transparent;background:var(--lime);color:var(--night)}
.setup .step3 h3{font-weight:600}
.setup .step3 .sd{color:var(--ink-2)}
/* the boxes inside a step: the panel's own tint, no second border */
.setup :is(.plat,.conn,.code){border:0;border-radius:var(--r-btn);background:var(--tint-1);box-shadow:inset 0 0 0 1px var(--hair)}
.setup .plat .conn{background:none;box-shadow:none}
.setup .code{padding:8px 8px 8px 14px;background:var(--code-bg)}
.setup .plat .plat-foot{border-top-color:var(--hair)}
.setup .live-done{padding:40px 24px 32px;margin-bottom:14px}
.setup .live-done .ok-ic{width:56px;height:56px}
/* the buttons and fields */
.setup .btn,.login-card .btn{border-radius:var(--r-btn)}
.setup .btn:not(.btn-primary):not(.btn-ghost):not(.link):not(.code .btn){border:0;background:var(--btn-2);box-shadow:inset 0 1px 0 var(--btn-2-hi),inset 0 0 0 1px var(--btn-2-ring);font-weight:500;color:var(--ink)}
@media (hover:hover){.setup .btn:not(.btn-primary):not(.btn-ghost):not(.link):not(.code .btn):hover{background:var(--btn-2-hover)}}
.setup .btn-primary,.login-card .btn-primary{background:var(--lime);border-color:transparent;box-shadow:var(--edge-primary),var(--glow-btn);color:var(--night)}
@media (hover:hover){.setup .btn-primary:hover,.login-card .btn-primary:hover{background:var(--lime-hover);color:var(--night)}}
.setup .input,.login-card .input{border:1px solid var(--hair-2);border-radius:var(--r-btn);background-color:var(--tint-1)}
.setup .input:focus,.login-card .input:focus{border-color:var(--focus);box-shadow:inset 0 0 0 1px var(--focus)}
.setup .input:focus-visible,.login-card .input:focus-visible{outline:0}

/* ---------- the log-in page ---------- */
.login-card{gap:16px;padding:28px;border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift),inset 0 0 0 1px var(--card-edge)}
.login-card h1{font:600 var(--fs-figure)/1.2 var(--display);letter-spacing:-.02em}
.login-card .input{height:44px}
.login-card .btn-block{height:44px}

@media (max-width:720px){
  .setup .step3{padding:16px}
  .login-card{padding:22px 20px}
}
@media (prefers-reduced-motion:reduce){.setup .step3{transition:none}}