/* GENERATED by services/directory/tool/build_web.mjs from clinic_v2/src/pages/join.html <style>. Do not edit; rebuild. */

  .join{padding-block:clamp(24px,5vw,56px) 72px}
  .j-grid{display:grid;gap:24px;align-items:start}
  @media (min-width:1000px){.j-grid{grid-template-columns:minmax(0,1fr) 340px}.aside{position:sticky;top:96px}}
  fieldset{border:0;margin:0;padding:0;min-width:0}
  legend{padding:0;font-size:22px;font-weight:700;margin-bottom:4px;display:flex;gap:10px;align-items:center}
  legend .n{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-grid;place-items:center;font-size:16px}
  .fs-hint{color:var(--muted);font-size:15px;margin-bottom:18px}
  .f2{display:grid;gap:16px}
  @media (min-width:720px){.f2{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .days{display:flex;flex-wrap:wrap;gap:8px}
  .days label{min-height:var(--tap);min-width:var(--tap);padding-inline:14px;border-radius:var(--r-md);border:var(--ctl-line);background:var(--surface);display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
  .days input{accent-color:var(--accent);width:20px;height:20px;margin:0}
  .days label:has(input:checked){background:var(--accent-soft);color:var(--accent)}
  .submit-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  .submit-bar .btn{flex:1 1 260px}
  @media (min-width:720px){.submit-bar .btn{flex:0 0 auto}}
  .err-sum{border:2px solid var(--danger);border-radius:var(--r-lg);padding:18px;background:var(--surface)}
  .err-sum h2{font-size:19px;color:var(--danger);display:flex;gap:8px;align-items:center}
  .err-sum ul{margin:10px 0 0;padding-inline-start:22px}
  .err-sum a{color:var(--fg);font-weight:600;display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap)}
  .tl{display:grid;gap:0}
  .tl li{list-style:none;display:grid;grid-template-columns:36px 1fr;gap:12px;padding-bottom:18px;position:relative}
  .tl li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:17px;top:36px;bottom:0;border-inline-start:2px solid var(--border)}
  .tl .dot{width:36px;height:36px;border-radius:50%;border:var(--ctl-line);display:grid;place-items:center;font-weight:700;background:var(--surface)}
  .tl .now .dot{background:var(--accent);color:var(--surface);border-color:var(--accent)}
  .tl h4{margin-top:6px}
  .tl p{font-size:15px;color:var(--fg-2)}
  .spin{width:22px;height:22px;border-radius:50%;border:3px solid color-mix(in oklch,var(--surface) 40%,transparent);border-top-color:var(--surface);animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.spin{animation:none}}
  .ok-ref{font-size:28px;font-weight:700;letter-spacing:.02em}