/* #/export partner application (views/export.js). Copy then form on phones; on desktop the copy (~5/12, sticky)
   sits left of the form (~7/12). Chips and fields follow the cart form's look (css/selection.css) in their own classes. */
.xp{--err:#FF6B6B;padding:32px 16px 56px;display:flex;flex-direction:column;gap:36px}
.xp-copy{display:flex;flex-direction:column;gap:16px;max-width:640px}
.xp-h{font-size:40px;line-height:1;letter-spacing:.01em;overflow-wrap:break-word}
.xp-lede{margin:0;font-size:var(--text);line-height:1.55;color:var(--fg2)}
.xp-lede b{color:var(--fg);font-weight:600;overflow-wrap:anywhere}
.xp-lede b.red{color:var(--red);font-weight:600}
.xp-retail{margin:0;padding:12px 14px;border:1px solid var(--line2);font-size:var(--text-sm);line-height:1.5;color:var(--fg2)}
.xp-retail-a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.xp-retail-a svg{flex:none}
.xp-gets{margin:4px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.xp-gets li{padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--text-sm);font-weight:600;line-height:1.4}

.xp-main{max-width:640px;min-width:0}
.xp-form{display:flex;flex-direction:column;gap:22px}
.xp-fh{margin:0;font:700 18px/1.3 var(--body)}
.xp-prev{margin:0;padding:12px 14px;background:var(--panel);border-left:2px solid var(--red);font-size:var(--text-sm);line-height:1.5;color:var(--fg2)}
.xp-field label,.xp-radios legend{font:500 13px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--fg2)}
.xp-req{color:var(--red)}
.xp-opt{color:var(--muted);font-weight:400}
.xp-field textarea{min-height:96px}
.xp-radios{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.xp-radios legend{padding:0;margin-bottom:6px}
.xp-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.xp-chip{position:relative;display:block;cursor:pointer}
.xp-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.xp-chip span{min-height:48px;padding:0 10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);font-weight:600;font-size:14px;line-height:1.25;text-align:center}
.xp-chip input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.xp-chip input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.xp-chip input[aria-invalid=true]+span,.xp-field input[aria-invalid=true],.xp-field textarea[aria-invalid=true]{border-color:var(--err)}
.xp-err{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--err)}
.xp-err[hidden]{display:none}
.xp-send{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.xp-send .btn{height:58px;font-size:15px}
.xp-fine{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}

.xp-done{display:flex;flex-direction:column;gap:16px;padding:24px 16px;background:var(--panel);border:1px solid var(--line2)}
.xp-dh{font-size:40px;line-height:1}
.xp-nh{margin:8px 0 0;font:700 15px/1.3 var(--body)}
.xp-next{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:var(--text-sm);line-height:1.5;color:var(--fg2)}
.xp-acts{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
.xp-again{align-self:flex-start;min-height:44px;padding:0;background:none;border:0;font-size:var(--text-sm);font-weight:600;color:var(--fg2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* the headline is Latin (lang=en): keep the Anton line height the Thai rule in app.css would loosen */
html[lang=th] .xp .xp-copy h1.xp-h.disp{font-weight:400;line-height:1!important}

@media (hover:hover){
  .xp-chip:hover input:not(:checked)+span{border-color:var(--fg)}
  .xp-again:hover{color:var(--fg)}
}
@media (min-width:1024px){
  .xp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start;padding:72px var(--edge) 96px}
  .xp-copy{position:sticky;top:calc(var(--hdr) + 24px);gap:20px}
  .xp-h{font-size:64px;line-height:.96}
  html[lang=th] .xp .xp-copy h1.xp-h.disp{line-height:.96!important}
  .xp-lede{font-size:17px}
  .xp-main{justify-self:end;width:100%}
  .xp-chips-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xp-chips:not(.xp-chips-5){grid-template-columns:repeat(4,minmax(0,1fr))}
  .xp-send .btn{align-self:flex-start;padding:0 48px}
  .xp-done{padding:40px}
  .xp-dh{font-size:56px}
  .xp-acts{grid-template-columns:1fr 1fr}
}