/* Arena HUD v8, launch layer (plans/ARENA-LAUNCH.md, phase A): the sign-in block on the last resume step,
   the in-app handoff, the existing-resume choice, the waiting screen and the account additions.
   Loaded after every other Arena stylesheet. */

/* ---------- last step: checks + one action ---------- */
html[data-theme=dark] .main[data-route="resume"] .hx-sub{gap:10px}
html[data-theme=dark] .main[data-route="resume"] .hx-sub .hx-rs-confirm-title{margin-bottom:4px}
/* under the title: who sees the resume (an info line, not a check) */
.hx-sub-note{margin:-6px 0 2px;font-size:13px;font-weight:500;line-height:1.5;color:var(--hx-muted);text-wrap:pretty}
.hx-sub-row{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 16px 0 15px;border-radius:14px;border:1px solid var(--hx-line-2);background:rgba(4,6,10,.42);transition:border-color .18s,background .18s}
.hx-sub-row:hover{border-color:rgba(255,255,255,.24)}
.hx-sub-row:has(input:checked){border-color:rgba(var(--hx-teal-rgb),.48);background:linear-gradient(90deg,rgba(var(--hx-teal-rgb),.1),rgba(var(--hx-teal-rgb),.025))}
.hx-sub-row.is-invalid,.hx-sub-row:has(input[aria-invalid="true"]){border-color:rgba(var(--hx-pink-rgb),.65);background:rgba(var(--hx-pink-rgb),.07)}
.hx-sub-check{display:flex;align-items:center;gap:13px;flex:1 1 auto;min-width:0;min-height:56px;font-size:14.5px;font-weight:700;line-height:1.45;color:var(--hx-ink);cursor:pointer}
label.hx-sub-row.hx-sub-check{min-height:58px}
.hx-sub-error{margin:-4px 0 0;padding-left:4px;font-size:12.5px;font-weight:700;color:#FF8FB4}
.hx-sub-error:empty{display:none}
.hx-sub-go{display:flex}
.hx-sub-go--aside{margin-top:8px}
.hx-sub-go--aside>*{width:100%}
html[data-theme=dark] .main[data-route="resume"] .hx-sub-go--aside .btn-primary{min-height:52px;border-radius:14px;font-size:15px}
html[data-theme=dark] .main[data-route="resume"] .hx-sub--edit{gap:0}
html[data-theme=dark] .main[data-route="resume"] .hx-sub--edit .hx-sub-go--aside{margin-top:0}

/* the 14+ gate before the first match (a judge with no resume): the last step's check in the dialog */
#dialog .hx-gate{display:grid;gap:12px}
/* under the action: what continuing agrees to, with both documents */
.hx-sub-terms{margin:0;font-size:12.5px;font-weight:500;line-height:1.5;color:var(--hx-muted);text-align:center;text-wrap:balance}
.hx-sub-terms a{color:var(--hx-ink-2);font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:3px}
.hx-sub-terms a:hover{color:var(--hx-ink);text-decoration-color:currentColor}
.hx-sub-terms a:focus-visible{outline:2px solid var(--hx-teal);outline-offset:2px;border-radius:4px}

/* Google's button (light theme: #FFFFFF fill, #747775 stroke, #1F1F1F text, the standard G, pill shape) */
html[data-theme=dark] .hx-gsi{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px 0 16px;border:1px solid #747775;border-radius:999px;background:#FFFFFF;color:#1F1F1F;font:500 15px/20px Roboto,'Noto Sans KR',system-ui,sans-serif;letter-spacing:.1px;white-space:nowrap;cursor:pointer;box-shadow:0 10px 28px -14px rgba(255,255,255,.35);transition:background .18s,box-shadow .18s,transform .18s var(--hx-ease)}
html[data-theme=dark] .hx-gsi:hover{background:#F2F2F2;box-shadow:0 1px 2px rgba(60,64,67,.3),0 12px 30px -12px rgba(255,255,255,.4)}
html[data-theme=dark] .hx-gsi:active{background:#E8E8E8;transform:translateY(1px)}
html[data-theme=dark] .hx-gsi:focus-visible{outline:2px solid var(--hx-teal);outline-offset:3px}
html[data-theme=dark] .hx-gsi:disabled{opacity:.62;cursor:progress}
.hx-gsi-logo{display:grid;place-items:center;flex:none;width:20px;height:20px}
.hx-gsi-g{display:block;width:20px;height:20px}
.hx-gsi-text{font-weight:500}

/* in-app browsers: our own button, plus one line on iOS */
html[data-theme=dark] .btn.hx-handoff .icon{width:18px;height:18px;stroke-width:2.2}
.hx-sub-ios{display:flex;align-items:center;justify-content:center;gap:9px;margin:2px 0 0;font-size:13px;font-weight:700;line-height:1.4;color:var(--hx-ink-2)}
.hx-sub-dots{display:inline-flex;align-items:center;justify-content:center;gap:3px;flex:none;width:30px;height:22px;border-radius:7px;border:1px solid var(--hx-line-3);background:rgba(255,255,255,.07)}
.hx-sub-dots i{width:3.5px;height:3.5px;border-radius:50%;background:var(--hx-ink)}
@keyframes hx-sub-nudge{0%,100%{transform:none}25%{transform:translateY(-3px)}50%{transform:none}75%{transform:translateY(-2px)}}
.hx-sub-ios.is-nudge{color:#fff;animation:hx-sub-nudge .8s var(--hx-ease)}
.hx-sub-ios.is-nudge .hx-sub-dots{border-color:var(--hx-teal);box-shadow:0 0 12px rgba(var(--hx-teal-rgb),.6)}

/* one action per layout: the column on desktop, the action bar below 981px */
@media(min-width:981px){
  .hx-sub-go--bar,.hx-sub-ios--bar,.hx-sub-terms--bar{display:none!important}
}
@media(max-width:980px){
  .hx-sub-go--aside,.hx-sub-ios--aside,.hx-sub-terms--aside{display:none!important}
  html[data-theme=dark] .main[data-route="resume"] .form-card .form-footer.hx-sub-bar{flex-wrap:wrap;row-gap:10px}
  html[data-theme=dark] .main[data-route="resume"] .form-footer.hx-sub-bar .save-hint{display:none}
  html[data-theme=dark] .main[data-route="resume"] .form-footer.hx-sub-bar .hx-sub-go--bar{flex:1 1 auto;justify-content:flex-end;min-width:0}
  html[data-theme=dark] .main[data-route="resume"] .form-footer.hx-sub-bar .hx-sub-go--bar>*{width:100%;max-width:380px}
  html[data-theme=dark] .main[data-route="resume"] .form-footer.hx-sub-bar .hx-sub-ios--bar{flex:1 0 100%;margin:0;padding:2px 0 0}
  html[data-theme=dark] .main[data-route="resume"] .form-footer.hx-sub-bar .hx-sub-terms--bar{flex:1 0 100%;margin:-3px 0 0;font-size:12px}
}
@media(max-width:740px){
  html[data-theme=dark] .main[data-route="resume"] .form-footer.hx-sub-bar .hx-gsi{min-height:48px;padding:0 16px 0 14px}
  html[data-theme=dark] .main[data-route="resume"] .form-footer.hx-sub-bar .btn.hx-handoff{padding:0 14px;gap:7px}
  .hx-sub-row{min-height:54px;padding:0 12px 0 13px}
  .hx-sub-check{gap:12px;min-height:52px;font-size:14px}
  label.hx-sub-row.hx-sub-check{min-height:54px;padding-block:9px}
}
@media(max-width:380px){
  html[data-theme=dark] .main[data-route="resume"] .form-footer.hx-sub-bar .btn-ghost{padding:0 6px}
}

/* login screen: the same Google button, full width */
html[data-theme=dark] .hx-login .login-actions .hx-gsi{width:100%;min-height:54px}
.hx-login .hx-sub-ios{margin-top:4px}

/* ---------- the one-time choice: an earlier resume exists ---------- */
.hx-dup{display:grid;gap:12px;margin-top:2px;padding:14px;border-radius:14px;border:1px solid var(--hx-line-2);background:rgba(4,6,10,.42)}
.hx-dup-id{display:flex;align-items:center;gap:12px;min-width:0}
.hx-dup-crest{flex:none;display:block;width:46px;height:46px}
.hx-dup-crest .cr{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.hx-dup-id b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--hx-ink)}
.hx-dup-id small{display:block;margin-top:3px;font-size:12.5px;font-weight:600;color:var(--hx-muted)}
.hx-dup-counts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hx-dup-counts li{display:flex;align-items:center;justify-content:space-between;gap:6px;height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--hx-line);background:rgba(255,255,255,.025)}
.hx-dup-counts span{font-size:12px;color:var(--hx-muted);white-space:nowrap}
.hx-dup-counts b{font:800 14px/1 var(--hx-num);color:var(--hx-ink)}
.hx-dup-counts li.is-empty b{color:var(--hx-faint)}
@media(max-width:740px){
  .hx-dup-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
  #dialog:has(.hx-dup) .dialog-actions{flex-direction:column-reverse}
  html[data-theme=dark] #dialog:has(.hx-dup) .dialog-actions .btn{flex:none;width:100%}
}

/* ---------- waiting screen ---------- */
.hx-wq{display:grid;gap:20px}
#app .hx-wait.hx-wq-hero h1.hx-wq-title{font-size:44px;line-height:1.16}
.hx-wq-title>span{display:block}
.hx-wq-state i{background:var(--hx-teal);box-shadow:0 0 10px var(--hx-teal)}
.hx-wq-state{color:#8FF5DE}
.hx-wq-hero .hx-wait-steps{margin-top:30px}
.hx-wq-dday b{font-size:14px;letter-spacing:.08em;color:#9FF3DF}
.hx-wq-resume{min-width:0}
.hx-wq-resume-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;min-width:0}
#app .hx-wq-resume-head h2{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--hx-ink)}
html[data-theme=dark] .hx-wq-resume-head .btn.hx-wq-edit{margin-left:auto}
.hx-wq-resume-head .btn .icon{width:16px;height:16px}
html[data-theme=dark] .hx-wq-resume .hx-rs-card--published{margin:0}
@media(max-width:1100px){#app .hx-wait.hx-wq-hero h1.hx-wq-title{font-size:38px}}
@media(max-width:740px){
  .hx-wq{gap:14px}
  #app .hx-wait.hx-wq-hero h1.hx-wq-title{font-size:29px;line-height:1.2}
  .hx-wq-hero .hx-wait-body{gap:14px;padding:22px 16px 24px}
  .hx-wq-hero .hx-wait-stage{width:168px;height:168px}
  .hx-wq-hero .hx-stage-ring-label{bottom:-6px}
  #app .hx-wait.hx-wq-hero h1.hx-wq-title{margin-top:12px}
  .hx-wq-hero .hx-wait-steps{margin-top:20px}
  #app .hx-wq-resume-head h2{font-size:18px}
}

/* ---------- account: Google account line, 탈퇴 ---------- */
.hx-acc-google{display:inline-flex;align-items:center;gap:7px;min-width:0;margin-top:1px;font-size:13px;font-weight:600;color:var(--hx-muted);overflow-wrap:anywhere}
.hx-acc-google-g{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:#fff}
.hx-acc-google-g .hx-gsi-g{width:11px;height:11px}
.hx-acc-out{display:flex;justify-content:flex-end;padding:2px 2px 0}
.hx-acc-out-btn{min-height:44px;padding:0 8px;border:0;background:none;color:var(--hx-faint);font-size:13px;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);text-underline-offset:3px;cursor:pointer}
.hx-acc-out-btn:hover{color:#FFB3CC;text-decoration-color:currentColor}
.hx-acc-out-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px}
@media(max-width:740px){.hx-acc-out{justify-content:center}}