/* Seller upgrade + KYC (loop 17). Tokens only (tokens.css). Spec: .zyro/design/kyc-spec.md; DESIGN.md section 4 "Seller upgrade + KYC".
   Loaded by /jadi-penjual.html, /jual.html (status block above the legacy form) and /akun-saya.html (Jualan saya). */

[hidden]{display:none!important}

/* ---------- buttons that only exist here ---------- */
.kbtn-quiet,.kbtn-danger,.kbtn-link{touch-action:manipulation;font-family:var(--font-body);cursor:pointer}
.kbtn-quiet{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);font-weight:700;font-size:.9375rem;line-height:1;text-align:center;transition:background-color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.kbtn-quiet:hover{background:var(--paper-2)}}
.kbtn-quiet:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.kbtn-quiet--inv{color:var(--ink-inv);box-shadow:inset 0 0 0 2px var(--ink-inv-2)}
@media (hover:hover) and (pointer:fine){.kbtn-quiet--inv:hover{background:var(--night-2)}}
.kbtn-quiet--inv:focus-visible{outline-color:var(--orange)}
.kbtn-quiet[aria-disabled="true"]{cursor:progress}
.kbtn-sm{min-height:44px;padding:0 16px}
.kbtn-danger{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);background:var(--rust-text);color:var(--paper);font-weight:700;font-size:.9375rem;line-height:1;text-align:center;transition:transform var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.kbtn-danger:hover{transform:translateY(-2px)}}
.kbtn-danger:active{transform:translateY(1px) scale(.98);transition-duration:var(--t-press)}
.kbtn-danger:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.kbtn-danger[aria-disabled="true"]{cursor:progress;transform:none}
.kbtn-link{justify-self:start;min-height:44px;padding:0 4px;border:0;background:none;color:var(--teal);font-weight:700;font-size:.9375rem;text-decoration:underline;text-underline-offset:3px}
.kbtn-link:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:6px}
.kyc-status .btn,.kyc-panel .btn{touch-action:manipulation}

/* ---------- status block .kyc-status ---------- */
.kyc-status{--focus:var(--ink);display:grid;grid-template-columns:minmax(0,1fr);gap:20px 32px;align-items:start;background:var(--paper);color:var(--ink);border-radius:var(--r-card);padding:20px;max-width:60rem}
.kyc-status>*{min-width:0}
@media (min-width:600px){.kyc-status{padding:24px}}
@media (min-width:720px){.kyc-status{grid-template-columns:minmax(0,1fr) auto}}
.kyc-status--wait{min-height:160px;align-content:center}
.kyc-st-main{display:grid;gap:10px;justify-items:start;min-width:0}
.kyc-st-h{font:800 1.5rem/1.2 var(--font-head);letter-spacing:-.025em;overflow-wrap:anywhere;text-wrap:balance;margin:0}
.kyc-st-h{scroll-margin-top:calc(var(--head-h) + 16px)}
.kyc-st-h:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:4px}
.kyc-st-body{margin:0;max-width:40em;overflow-wrap:anywhere}
.kyc-st-reason strong{font-weight:700}
.kyc-st-meta{margin:0;color:var(--ink-2);font-size:.9375rem;overflow-wrap:anywhere}
.kyc-st-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:719px){.kyc-st-act .btn,.kyc-st-act .kbtn-quiet{width:100%;justify-content:center}}
.kyc-st-notice{grid-column:1 / -1;margin:0}
.kyc-status .ostat{margin:0}
.ostat{display:inline-flex;align-items:center;flex:none;max-width:100%;min-height:28px;padding:4px 10px;border-radius:var(--r-badge);font:700 .8125rem/1.25 var(--font-body);white-space:normal}
.ostat--done{background:var(--mint);color:var(--ink)}
.ostat--wait{background:var(--orange-tint-2);color:var(--ink)}
.ostat--problem{background:var(--rust-text);color:var(--paper)}
.ostat--ended{background:var(--sold);color:var(--ink)}

/* forest variant: the state panel on /jual.html */
.kyc-status--forest{--focus:var(--orange);background:var(--forest-2);color:var(--ink-on-forest)}
.kyc-status--forest .kyc-st-h{color:var(--paper)}
.kyc-status--forest .kyc-st-meta{color:var(--ink-inv-2)}
.kyc-status--forest .btn-soft{background:var(--mint-tint);color:var(--ink)}
.kyc-status--forest .btn-dark{background:var(--night);color:var(--ink-inv)}
.kyc-status--forest .btn:focus-visible,.kyc-status--forest .btn-soft:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.kyc-status--forest .form-errors{--focus:var(--ink)}

/* inline confirm box (no modal): orange tint for the destructive ones */
.kyc-confirm{--focus:var(--ink);grid-column:1 / -1;display:grid;gap:10px;justify-items:start;background:var(--orange-tint);color:var(--ink);border-radius:var(--r-tile);padding:20px}
.kyc-cf-h{margin:0;font:700 1.0625rem/1.3 var(--font-head);letter-spacing:-.01em;overflow-wrap:anywhere}
.kyc-cf-h:focus{outline:none}
.kyc-cf-p{margin:0;max-width:36em;overflow-wrap:anywhere}
.kyc-cf-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.kyc-cf-err{margin:0;font-weight:600;color:var(--rust-text);overflow-wrap:anywhere}
.kyc-confirm .kbtn-quiet{color:var(--ink);background:transparent}
@media (max-width:599px){.kyc-cf-act{width:100%;flex-direction:column}.kyc-cf-act>*{width:100%}}

/* error summary / server error */
.form-errors{--focus:var(--ink);background:var(--error-tint);color:var(--ink);border-radius:var(--r-tile);padding:16px 20px;overflow-wrap:anywhere}
.form-errors:focus{outline:3px solid var(--ink);outline-offset:3px}
.form-errors p{margin:0}
.form-errors .btn{margin-top:12px}
.kyc-sum-h{margin:0 0 8px;font:700 1rem/1.3 var(--font-head);letter-spacing:-.01em}
.kyc-sum-list{margin:0;padding-left:20px;display:grid;gap:4px}
.kyc-sum-list a{display:flex;align-items:center;min-height:44px;padding-block:6px;color:var(--rust-text);font-weight:600;text-underline-offset:3px}
.kyc-sum-list a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:4px}

/* ---------- /jadi-penjual.html ---------- */
.kyc-band h1{max-width:20em}
.kyc-band h1:focus{outline:none}
.kyc-lead{margin:12px 0 0;max-width:37.5em;font-size:var(--fs-lead);color:var(--ink-inv-2)}
.kyc-main :is(h1,h2,h3):focus{outline:none}
.kyc-load{margin:0;min-height:160px;color:var(--ink-2);font-weight:600}
.kyc-noscript{margin:0 0 24px;max-width:40em}
.kyc-slot{max-width:60rem}
.kyc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.kyc-grid>*{min-width:0}
@media (min-width:900px){
  .kyc-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
  .kyc-aside{position:sticky;top:calc(var(--head-h) + 24px)}
}
@media (max-width:899px){.kyc-aside{display:none}}
/* six steps: if the aside is taller than the viewport it must not stay stuck */
@media (min-width:900px) and (max-height:760px){.kyc-aside{position:static}}
.kyc-aside .kyc-steps{margin-top:0}
.kyc-steps .otl-tile--next{background:var(--paper);box-shadow:inset 0 0 0 2px var(--line)}
.kyc-steps .otl-step[data-state="next"] .otl-label{color:var(--ink-2)}
.kyc-steplink{padding:0;margin:0;border:0;background:none;text-align:left;cursor:pointer;min-height:44px;display:block;color:var(--ink);text-decoration:underline;text-underline-offset:4px;touch-action:manipulation}
.kyc-steplink:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:6px}
.kyc-why{margin:24px 0 0;max-width:24em;color:var(--ink-2);font-size:.9375rem}
.kyc-why--phone{margin:0}
/* status frame on /jadi-penjual.html (kyc-spec 9.4): card + history rail from 1100px */
.kyc-rail{display:none}
.kyc-trail .otl-tile--next{background:var(--paper);box-shadow:inset 0 0 0 2px var(--line)}
.kyc-trail .otl-step[data-state="next"] .otl-label{color:var(--ink-2)}
.kyc-trail .otl-tile--end-ok{background:var(--mint);box-shadow:none}
.kyc-trail .otl-tile--end-bad{background:var(--rust-text);box-shadow:none}
.kyc-trail .otl-tile--end-off{background:var(--sold);box-shadow:none}
.kyc-trail .otl-tile--end-bad .otl-glyph{filter:invert(1)}
.kyc-trail .otl-tile--end-ok .otl-glyph{filter:brightness(0)}
@media (min-width:1100px){
  .kyc-slot--frame{max-width:none}
  .kyc-stframe{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px;align-items:start}
  .kyc-stframe>*{min-width:0}
  .kyc-rail{display:block;position:sticky;top:calc(var(--head-h) + 24px)}
  .kyc-trail{margin:0 0 24px}
}
@media (min-width:900px){.kyc-why--phone{display:none}}
@media (max-width:899px){.kyc-why{margin-top:0}}

.kyc-panel{background:var(--paper);border-radius:var(--r-section);padding:40px;min-width:0}
@media (max-width:599px){.kyc-panel{background:none;border-radius:0;padding:0}}
.kyc-step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:20px;max-width:40em;scroll-margin-top:calc(var(--head-h) + 16px)}
.kyc-step>*{min-width:0}
.kyc-progress{margin:0;font:600 .9375rem/1.4 var(--font-body);color:var(--ink-2)}
.kyc-h{margin:0;font:800 1.5rem/1.2 var(--font-head);letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.kyc-h:focus,.kyc-h:focus-visible{outline:none}
.kyc-intro{margin:0;max-width:36em}
.kyc-wa-line{margin:0;overflow-wrap:anywhere}
.kyc-wa-line strong{font-weight:700}
.kyc-wa-link{margin-top:0}
.kyc-note{margin:0;background:var(--orange-tint);color:var(--ink);border-radius:var(--r-tile);padding:12px 16px;overflow-wrap:anywhere}
.kyc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
@media (max-width:599px){.kyc-actions{flex-direction:column}.kyc-actions>*{width:100%}}

.pf-field legend,.kyc-group legend{padding:0}
.kyc-group{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
/* document cards: as many 9.5em columns as fit (KTP SIM Paspor, then KK and Kartu pelajar); yes/no and payout choices: two columns */
.kyc-radios{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:12px}
.kyc-radios--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:479px){.kyc-radios,.kyc-radios--2{grid-template-columns:minmax(0,1fr)}}
/* revealed controls are inserted into these slots; the slot itself draws nothing */
.kyc-slot-x{display:contents}
.kyc-radio{position:relative;display:block;min-width:0;touch-action:manipulation}
.kyc-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.kyc-face{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 16px;line-height:1.3;overflow-wrap:anywhere;background:var(--paper);border-radius:var(--r-tile);box-shadow:inset 0 0 0 2px var(--line);font-weight:700;font-size:1rem;transition:background-color var(--t-fast) var(--ease-out)}
.kyc-dot{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);background:var(--paper)}
@media (hover:hover) and (pointer:fine){.kyc-radio:hover .kyc-face{background:var(--paper-2)}}
.kyc-radio input:checked+.kyc-face{background:var(--mint-tint);box-shadow:inset 0 0 0 2px var(--forest)}
.kyc-radio input:checked+.kyc-face .kyc-dot{background:var(--orange);box-shadow:none}
.kyc-radio input:focus-visible+.kyc-face{outline:3px solid var(--ink);outline-offset:2px}
.kyc-group[aria-invalid="true"] .kyc-face{box-shadow:inset 0 0 0 2px var(--rust-text);background:var(--error-tint)}

.kyc-guide{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:20px;align-items:start}
.kyc-guide-list{margin:0;padding-left:20px;display:grid;gap:6px;font-size:.9375rem}
.kyc-frame{width:200px;height:auto;max-width:100%;color:var(--teal);justify-self:end}
@media (max-width:599px){
  .kyc-guide{grid-template-columns:minmax(0,1fr)}
  .kyc-frame{order:-1;width:100%;height:120px;justify-self:stretch}
}

.kyc-drop{position:relative;display:grid;gap:12px;justify-items:start;padding:20px;border:2px dashed var(--line);border-radius:var(--r-tile);background:var(--paper-2);min-width:0}
.kyc-drop[data-state="empty"],.kyc-drop[data-state="invalid"]{cursor:pointer}
.kyc-drop.is-over{border-color:var(--teal);background:var(--mint-tint)}
.kyc-drop[data-state="invalid"]{border-color:var(--rust-text);background:var(--error-tint)}
.kyc-file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
.kyc-drop-empty{display:grid;gap:10px;justify-items:start}
.kyc-drop-empty .pf-hint{margin:0}
.kyc-pill{cursor:pointer}
.kyc-file:focus-visible~.kyc-drop-empty .kyc-pill{outline:3px solid var(--ink);outline-offset:3px}
.kyc-busy-text{margin:0;font-weight:600}
.kyc-preview{display:grid;gap:12px;justify-items:start;width:100%}
.kyc-preview img{display:block;max-width:100%;max-height:240px;width:auto;height:auto;object-fit:contain;background:var(--paper-2);border-radius:14px}
.kyc-preview-line{margin:0;font-size:.9375rem;overflow-wrap:anywhere}
.kyc-preview-act{display:flex;flex-wrap:wrap;gap:12px}

.kyc-checkrow{gap:4px}
.kyc-check{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;min-height:44px;font-size:.9375rem;cursor:pointer}
.kyc-check input{appearance:none;position:relative;width:44px;height:44px;margin:0;border:0;background:transparent;cursor:pointer}
.kyc-check input::before{content:"";position:absolute;left:10px;top:10px;width:24px;height:24px;box-sizing:border-box;border:2px solid var(--line);border-radius:8px;background:var(--paper);transition:background-color var(--t-fast),border-color var(--t-fast)}
.kyc-check input::after{content:"";position:absolute;left:15px;top:15px;width:14px;height:8px;box-sizing:border-box;border:3px solid var(--night);border-top:0;border-right:0;transform:rotate(-45deg) scale(0);transition:transform var(--t-fast) var(--ease-spring)}
.kyc-check input:checked::before{background:var(--orange);border-color:var(--orange)}
.kyc-check input:checked::after{transform:rotate(-45deg) scale(1)}
.kyc-check input:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:12px}
.kyc-check input[aria-invalid="true"]::before{border-color:var(--rust-text);background:var(--error-tint)}
.kyc-check span{min-width:0;overflow-wrap:anywhere}
.kyc-check a{display:inline-block;padding-block:10px;color:var(--teal);font-weight:700;text-underline-offset:3px}

.kyc-review{margin:0;display:grid;gap:16px;background:var(--paper-2);border-radius:14px;padding:20px}
.kyc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:start}
.kyc-row dt{grid-column:1;font-weight:700;font-size:.9375rem;color:var(--ink-2)}
.kyc-row dd{grid-column:1;margin:0;overflow-wrap:anywhere;font-weight:600;display:grid;gap:8px;justify-items:start}
.kyc-row .kbtn-link{grid-column:2;grid-row:1 / span 2;align-self:center}
/* narrow phones: label and Ubah share the first line, the value gets the full row (an 80-character name needs the width) */
@media (max-width:30em){.kyc-row dd{grid-column:1 / -1;grid-row:2}.kyc-row .kbtn-link{grid-row:1;align-self:start;margin-block:-10px -6px}}
.kyc-r-line{font-weight:500;font-size:.9375rem;color:var(--ink-2)}
.kyc-r-img{display:block;height:96px;width:auto;max-width:100%;object-fit:contain;border-radius:8px;background:var(--paper)}
.kyc-consent{background:var(--paper-2);border-radius:14px;padding:20px;font-size:var(--fs-legal);line-height:1.6;max-width:var(--measure-legal);display:grid;gap:12px}
.kyc-consent p{margin:0}
.kyc-consent a{color:var(--teal);font-weight:700;text-underline-offset:3px}
.kyc-checkrow+.kyc-checkrow{margin-top:4px}
.kyc-guard .pf-hint{margin:0}
#kyc-consent-field{margin-top:8px}

.kyc-upload{display:grid;gap:10px;max-width:40em;margin-top:16px;justify-items:start}
.kyc-upload progress{width:100%;height:8px;border:0;border-radius:999px;background:var(--paper-2);overflow:hidden;appearance:none;-webkit-appearance:none;accent-color:var(--teal)}
.kyc-upload progress::-webkit-progress-bar{background:var(--paper-2);border-radius:999px}
.kyc-upload progress::-webkit-progress-value{background:var(--teal);border-radius:999px}
.kyc-upload progress::-moz-progress-bar{background:var(--teal);border-radius:999px}
.kyc-up-text{margin:0;font-weight:600}
#kyc-cancelled{max-width:40em;margin-top:16px}

.kyc-session{max-width:52rem}

/* /jual.html: the status block sits on the forest ground above the legacy form */
.kyc-slot--forest{padding-block:0 clamp(24px,3vw,40px);max-width:none}
.kyc-slot--forest .kyc-status{max-width:none}
/* /akun-saya.html: Jualan saya */
.kyc-slot--acct{margin-top:24px}
.kyc-stop{margin-top:48px;max-width:60rem;display:grid;gap:12px;justify-items:start}
.kyc-stop .kyc-confirm{width:100%}

@media (max-width:300px){
  html body .kyc-status{padding:12px 8px}
  html body .kyc-confirm,html body .form-errors,html body .kyc-review,html body .kyc-consent,html body .kyc-drop{padding:12px 8px}
  html body .kyc-st-h,html body .kyc-h{font-size:1.25rem}
}