/* Guided setup: Get started and the six setup steps. Layout only: tokens and components come from ic.css. */

/* Get started */
.gs-steps>li{padding:20px 24px}
.gs-steps>li.gs-current{padding:24px;background:var(--ic-blue-tint);border-bottom-color:var(--ic-blue-line-2)}
.gs-dot{width:32px;height:32px;font-size:14px}
.gs-body{color:var(--ic-ink-2);max-width:620px}
.gs-review{min-height:40px;white-space:nowrap}
.gs-time{white-space:nowrap;padding-top:3px}
.gs-title{color:var(--ic-ink)!important;text-decoration:none!important}
.gs-title:hover{color:var(--ic-blue)!important}
.gs-rail-title{font-size:18px}
.gs-how-num{width:28px;height:28px;border-radius:8px;background:var(--ic-surface-3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.gs-safe{background:var(--ic-green-bg);border-radius:16px;padding:20px;display:flex;gap:12px;align-items:flex-start}
.gs-safe-icon{color:var(--ic-green-ink);margin-top:1px}
.gs-safe-text{color:#1F4B34}
.gs-self-start{align-self:flex-start}
.ic-tip small{color:#B9C8F5}
.gs-tip-close{color:#fff}
.gs-tip-close:hover{background:var(--ic-dark-3);color:#fff}
.gs-tip-title{font-family:var(--ic-display);font-size:20px;font-weight:700;line-height:1.2}
.gs-tip-body{font-size:15px;line-height:1.5;color:#E2E4EA}
.gs-tip-foot{padding-top:4px}
.gs-tip-dot{width:8px;height:8px;border-radius:50%;background:var(--ic-ink-3)}
.gs-tip-dot.on{background:#fff}
.gs-tip-back,.gs-tip-next{height:36px;padding:0 14px;border-radius:8px;font-size:14px;cursor:pointer;font-family:inherit}
.gs-tip-back{border:1px solid var(--ic-ink-3);background:transparent;color:#fff;font-weight:600}
.gs-tip-back:disabled{opacity:.45;cursor:default}
.gs-tip-next{border:none;background:#fff;color:var(--ic-ink);font-weight:700}

/* Step 1 · Your business (s1-). Also the pieces steps 2 and 3 share: rail titles, notes, pills, progress card. */
.s1-sub{max-width:640px}
.s1-rail-title{font-family:var(--ic-display);font-size:18px;font-weight:700;line-height:1.3}
.s1-tip{font-size:14px;line-height:1.5;color:var(--ic-ink-2)}
.s1-ok-icon{color:var(--ic-green);margin-top:1px}
.s1-note{background:var(--ic-surface-3);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:6px}
.s1-pill{padding:4px 10px}
.s1-callout-actions{margin-top:6px}
.s1-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.s1-pick{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;margin:1px;border-radius:14px;border:1px solid var(--ic-line);background:#fff;text-align:left;cursor:pointer;font-family:inherit;color:var(--ic-ink);min-width:0}
.s1-pick:hover{border-color:var(--ic-field)}
.s1-pick.on{margin:0;border:2px solid var(--ic-blue);box-shadow:0 0 0 3px var(--ic-blue-line)}
.s1-pick-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;background:var(--ic-surface-3);color:var(--ic-ink)}
.s1-pick.on .s1-pick-icon{background:var(--ic-blue);color:#fff}
.s1-pick-title{font-size:16px;font-weight:700}
.s1-pick-body{font-size:14px;line-height:1.45;color:var(--ic-ink-3)}
.s1-panel{background:#fff;border:1px solid var(--ic-line);border-radius:14px;padding:16px}
.s1-web{display:flex;gap:10px;align-items:flex-end}
.s1-drop{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;min-height:96px;box-sizing:border-box;padding:12px 16px;background:#fff;border:1.5px dashed #B9B7B0;border-radius:14px;font-size:15px;font-weight:400;color:var(--ic-ink-3);text-align:center;cursor:pointer}
.s1-drop:hover{border-color:var(--ic-blue);background:var(--ic-blue-tint)}
.s1-drop:focus-within{outline:3px solid #86A8FF;outline-offset:2px}
.s1-drop.busy{cursor:progress}
.s1-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.s1-drop.busy .s1-file{cursor:progress}
.s1-choose{pointer-events:none}
.s1-mat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.s1-mat{list-style:none;margin:0;padding:0!important;background:#fff;border:1px solid var(--ic-line);border-radius:14px}
.s1-mat-empty{display:flex;flex-direction:column;gap:4px;padding:20px 18px}
.s1-mat-row{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--ic-line-2)}
.s1-mat-row:last-child{border-bottom:none}
.s1-mat-name{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.s1-tile-file{background:var(--ic-surface-3);color:var(--ic-ink-2);font-size:11px;font-weight:800}
.s1-more{position:relative;flex-shrink:0}
.s1-more-btn{width:40px;height:40px;border:none;background:transparent;border-radius:8px;cursor:pointer;color:var(--ic-ink-3);display:flex;align-items:center;justify-content:center;padding:0}
.s1-more-btn:hover{background:var(--ic-surface-3);color:var(--ic-ink)}
.s1-menu{position:absolute;right:0;top:44px;z-index:12;width:240px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:6px;background:#fff;border:1px solid var(--ic-line);border-radius:12px;box-shadow:var(--ic-pop)}
.s1-menu>p{padding:6px 8px 0}
.s1-menu>.ic-row{padding:0 8px 6px}
.s1-menu-item{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border:none;border-radius:8px;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--ic-ink)!important;text-decoration:none!important;cursor:pointer;text-align:left}
.s1-menu-item:hover{background:var(--ic-surface-2)}
.s1-menu-item.danger{color:var(--ic-red-ink)!important}
.s1-menu:has(.s1-menu-item){gap:0}
.s1-brief-tip>.ic-icon{color:var(--ic-amber-ink)}
.s1-tip-btn{align-self:flex-start;height:40px;padding:0 14px;margin-top:4px;border-radius:10px;border:1px solid #C99A45;background:#fff;color:var(--ic-amber-text);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.s1-tip-btn:hover{background:var(--ic-amber-tint)}
.s1-autosave{white-space:nowrap}
.s1-spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--ic-blue-line);border-top-color:var(--ic-blue);animation:s1-spin .8s linear infinite;flex-shrink:0;box-sizing:border-box}
.s1-spin.sm{width:18px;height:18px;border-width:2.5px}
@keyframes s1-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.s1-spin{animation-duration:2.4s}}
.s1-work-steps{list-style:none;margin:0;padding:0!important;display:flex;flex-direction:column;gap:10px}
.s1-work-steps>li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ic-ink-4)}
.s1-work-steps>li.done{color:var(--ic-ink)}
.s1-work-steps>li.now{color:var(--ic-ink);font-weight:700}
.s1-work-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0;box-sizing:border-box;border:1.5px solid var(--ic-field);display:flex;align-items:center;justify-content:center;color:#fff}
.done>.s1-work-dot{background:var(--ic-green);border:none}
.now>.s1-work-dot{border:6px solid var(--ic-blue)}

/* Step 2 · Check what we learned (s2-). .s2-act, .s2-acts and .s2-fix are reused by step 3. */
.s2-col{gap:28px}
.s2-sub{max-width:660px}
.s2-ink2{color:var(--ic-ink-2)}
.s2-lh{line-height:1.45}
.s2-self-start{align-self:flex-start}
.s2-empty{gap:10px}
.s2-progress{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--ic-line);border-radius:14px;padding:16px 18px}
.ic-progress.s2-bar{height:8px;flex-grow:0}
.s2-warn-dot{width:26px;height:26px;border-radius:50%;background:var(--ic-amber-bg);color:var(--ic-amber-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.s2-conflict{display:flex;flex-direction:column;gap:14px;border-radius:14px;padding:18px;background:var(--ic-amber-tint);border:1px solid var(--ic-amber-line)}
.s2-conflict.settled{background:#fff;border-color:var(--ic-green-line-2)}
.s2-opt,.s2-act{height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--ic-field);background:#fff;color:var(--ic-ink);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;box-sizing:border-box}
.s2-opt:hover,.s2-act:hover{background:var(--ic-surface-2)}
.s2-opt:disabled,.s2-act:disabled{opacity:.5;cursor:not-allowed}
.s2-opt[aria-pressed=true]{border-color:var(--ic-dark);background:var(--ic-dark);color:#fff}
.s2-act.ok[aria-pressed=true]{border-color:var(--ic-green);background:var(--ic-green);color:#fff}
.s2-act.edit[aria-pressed=true]{border-color:var(--ic-blue);background:var(--ic-blue-bg);color:var(--ic-blue-ink)}
.s2-act.skip[aria-pressed=true]{border-color:var(--ic-ink-4);background:#E9E7E1;color:var(--ic-ink)}
.s2-acts{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}
.s2-fact{border-radius:14px;padding:18px;background:#fff;border:1px solid var(--ic-line)}
.s2-fact.ok{background:var(--ic-green-tint);border-color:var(--ic-green-line-2)}
.s2-fact.skip{background:var(--ic-surface-4)}
.s2-fact.skip .s2-fact-main>.ic-stack{opacity:.8}
.s2-fact.edit{border-color:var(--ic-blue)}
.s2-fact-main{display:flex;gap:20px;align-items:flex-start}
.s2-fact-value{font-size:16px;line-height:1.45;font-weight:600;overflow-wrap:anywhere}
.s2-fix{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.s2-fix-label{font-size:13px;color:var(--ic-ink-2)}
.ic-app .s2-fix-input{border-color:var(--ic-blue)}
.s2-gaps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:#fff;border:1px solid var(--ic-line);border-radius:14px;padding:18px}
.s2-gaps .s2-wide{grid-column:1/-1}

/* Step 3 · Approve what emails can say (s3-) */
.s3-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--ic-line);border-radius:14px;padding:16px 18px}
.s3-count{font-family:var(--ic-display);font-size:28px;font-weight:700;line-height:1}
.s3-summary-text{line-height:1.4;color:var(--ic-ink-2)}
.s3-bulk-note{margin-top:-16px}
.s3-claim{border-radius:14px;padding:16px 18px;background:#fff;border:1px solid var(--ic-line)}
.s3-claim.ok{background:var(--ic-green-tint);border-color:var(--ic-green-line-2)}
.s3-claim.wait{border-color:var(--ic-amber-line)}
.s3-claim.skip{background:var(--ic-surface-4)}
.s3-claim.skip .s3-claim-main>.ic-stack{opacity:.8}
.s3-claim-main{display:flex;gap:20px;align-items:center}
.s3-claim-text{font-size:16px;line-height:1.45;font-weight:600;overflow-wrap:anywhere}
.s3-evidence{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.s3-evidence.ic-row{flex-direction:row}
.s3-evidence-row{display:flex;gap:8px}
.s3-files{list-style:none;margin:0;padding:0!important;background:#fff;border:1px solid var(--ic-line);border-radius:14px;overflow:hidden}
.s3-files>li{border-bottom:1px solid var(--ic-line-2)}
.s3-files>li:last-child{border-bottom:none}
.s3-file-row{display:flex;align-items:center;gap:14px;padding:16px 18px}
.s3-file-name{overflow-wrap:anywhere}
.s3-file-note{margin:0 18px 16px}
.s3-share{display:flex;flex-direction:column;gap:12px;margin:0 18px 18px;padding:16px;border-radius:12px;background:var(--ic-surface-2);border:1px solid var(--ic-line-2)}
.s3-share .ic-link{align-self:flex-start}
.s3-questions{list-style:none;margin:0;padding:2px 0 0!important;display:flex;flex-direction:column;gap:8px}
.s3-questions>li{font-size:14px;line-height:1.45;color:var(--ic-ink)}
.s3-questions>li::before{content:"· "}

@media (max-width:720px){
  /* On a phone the three choices are a compact row, so what you pick opens right below it, not behind the
     Continue bar: stacked cards hid the link box at the bottom of an iPhone screen (Khai Jun, 21 Oct 2026). */
  .s1-picks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .s1-pick{align-items:center;text-align:center;padding:12px 6px;gap:4px}
  .s1-pick-icon{width:34px;height:34px;margin-bottom:0}
  .s1-pick-title{font-size:13.5px;line-height:1.25}
  .s1-pick-body{display:none}
  .s1-web{flex-direction:column;align-items:stretch}
  .s1-mat-row{flex-wrap:wrap;gap:10px 14px}
  .s1-mat-row>.ic-stack{flex-basis:calc(100% - 110px)}
  .s1-mat-row>.s1-pill{order:3;margin-left:54px}
  .s1-autosave{display:none}
  .s2-progress,.s3-summary{flex-direction:column;align-items:stretch}
  .s2-fact-main,.s3-claim-main{flex-direction:column;align-items:stretch;gap:12px}
  .s2-gaps{grid-template-columns:minmax(0,1fr)}
  .s3-evidence-row{flex-direction:column}
}