/* PDP Translation Agent — calm Foot Locker DAE palette.
   Lifted shell from the Strata reference repo, simplified for the
   upload → trace → download flow. */

:root{
  --ink:#15191f; --ink-2:#1c222b; --ink-line:#2b323c;
  --paper:#f4f1ea; --surface:#ffffff; --surface-2:#faf8f3;
  --line:#e7e1d5; --line-2:#d8d1c2;
  --text:#21262e; --muted:#75787f; --faint:#9a9ca2;
  --teal:#0f6e56; --teal-2:#138a6c; --teal-soft:#e4efe9;
  --breach:#b03524; --breach-soft:#fae9e5;
  --amber:#946012; --amber-soft:#f6eede;
  --gold:#b8893b;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --shadow:0 1px 2px rgba(30,24,12,.04),0 6px 22px rgba(30,24,12,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--sans);color:var(--text);
  background:var(--paper);
  background-image:radial-gradient(circle at 18% -8%,rgba(184,137,59,.06),transparent 40%);
  -webkit-font-smoothing:antialiased;
}
.app{display:grid;grid-template-columns:228px 1fr 328px;height:100vh;overflow:hidden}

/* ---------- sidebar ---------- */
.side{background:var(--ink);color:#d7dae0;display:flex;flex-direction:column;border-right:1px solid var(--ink-line);min-height:0}
.brand{padding:22px 22px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--ink-line)}
.mark{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;
  background:linear-gradient(150deg,var(--teal-2),#0c5e49);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.brand h1{font-family:var(--serif);font-weight:500;font-size:21px;color:#fff;margin:0;letter-spacing:.3px}
.brand .sub{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8b919b;margin-top:2px}
.nav{padding:14px 12px;flex:1}
.nav .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6c727c;padding:0 10px;margin:6px 0 8px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;color:#c3c8d0;
  text-decoration:none;font-size:13.5px;font-weight:500;margin-bottom:2px;transition:.15s}
.nav a svg{width:16px;height:16px;opacity:.8}
.nav a:hover{background:#222933;color:#fff}
.nav a.active{background:#232c37;color:#fff}
.nav a.active svg{opacity:1;color:var(--teal-2)}
.side-foot{padding:16px 18px;border-top:1px solid var(--ink-line);font-size:11.5px;color:#7c828c;line-height:1.5}
.side-foot b{color:#aeb3bb;font-weight:500}
.dotline{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal-2);margin-right:6px;box-shadow:0 0 0 3px rgba(19,138,108,.18)}

/* ---------- main ---------- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 26px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.55);backdrop-filter:blur(4px);flex:none}
.top .ttl{font-family:var(--serif);font-size:18px;font-weight:500}
.top .ttl span{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:400;margin-top:1px}
.ghost{border:1px solid var(--line-2);background:var(--surface);color:var(--muted);font-family:var(--sans);
  font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:9px;cursor:pointer;transition:.15s}
.ghost:hover{border-color:#bcae93;color:var(--text)}

.stream{flex:1 1 auto;overflow-y:auto;padding:26px 26px 22px;scroll-behavior:smooth;min-height:0}
.stream-inner{max-width:840px;margin:0 auto}

/* ---------- hero / upload ---------- */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px 30px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% 8%,rgba(19,138,108,.07),transparent 45%);pointer-events:none}
.hero .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:600}
.hero h2{font-family:var(--serif);font-weight:500;font-size:25px;margin:8px 0 8px;line-height:1.2}
.hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.65;max-width:62ch}
.hero p code{font-size:12px;background:#f1efea;padding:1px 5px;border-radius:4px;color:#374151;font-family:var(--mono)}
.hero .legend{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap}
.hero .legend div{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
.swatch{width:9px;height:9px;border-radius:2px;flex:none}

.dropzone{margin-top:22px;border:1.5px dashed var(--line-2);border-radius:13px;padding:30px 24px;
  display:flex;align-items:center;gap:18px;background:var(--surface-2);cursor:pointer;transition:.18s}
.dropzone:hover,.dropzone.drag{border-color:var(--teal-2);background:#f1f7f3}
.dz-icon{width:46px;height:46px;flex:none;border-radius:11px;background:#eef0ee;color:#5d6058;display:grid;place-items:center}
.dz-icon svg{width:23px;height:23px}
.dropzone.drag .dz-icon{background:var(--teal-soft);color:var(--teal)}
.dz-text b{display:block;font-size:14.5px;color:var(--text)}
.dz-text span{font-size:12.5px;color:var(--muted)}
.dz-text a{color:var(--teal);text-decoration:none;font-weight:500}

.upload-opts{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.upload-opts label{display:flex;flex-direction:column;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;gap:6px}
.upload-opts label.checkbox{flex-direction:row;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px;color:var(--text);margin-top:18px}
.upload-opts input[type=text]{border:1px solid var(--line-2);background:var(--surface);border-radius:9px;padding:8px 11px;font-family:var(--mono);font-size:12.5px;color:var(--text);min-width:200px;outline:none}
.upload-opts input[type=text]:focus{border-color:var(--teal-2);box-shadow:0 0 0 3px rgba(19,138,108,.12)}
.upload-opts input[type=checkbox]{accent-color:var(--teal-2);width:15px;height:15px}

/* Target-language checkbox picker (mirrors the Translate page, collapsible) */
.upload-opts .lang-picker{flex:1 1 100%;margin-top:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.lang-picker-toggle{width:100%;display:flex;align-items:center;gap:10px;padding:9px 14px;background:transparent;border:0;cursor:pointer;text-align:left}
.lang-picker-toggle:hover{background:var(--surface-2)}
.lang-picker-title{font-family:var(--sans);font-weight:600;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto}
.lang-picker-summary{flex:1;font-family:var(--mono);font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-picker-toggle .chev{width:16px;height:16px;color:var(--muted);transition:transform .15s;flex:0 0 auto}
.lang-picker:not(.collapsed) .lang-picker-toggle .chev{transform:rotate(180deg)}
.lang-picker-body{display:grid;gap:8px;padding:0 14px 12px;border-top:1px solid var(--line)}
.lang-picker.collapsed .lang-picker-body{display:none}
.lang-picker-actions{display:flex;gap:4px;align-items:center;font-family:var(--sans);font-weight:500;font-size:12px;color:var(--muted);padding-top:10px}
.lang-picker-actions .sep{color:var(--line-2)}
.lang-picker-actions .link{background:transparent;border:0;padding:2px 4px;color:var(--teal);cursor:pointer;font:inherit}
.lang-picker-actions .link:hover{text-decoration:underline}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 10px}
.lang-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;font:400 13px/1.2 var(--sans);color:var(--text);user-select:none;transition:border-color .15s,background .15s;text-transform:none;letter-spacing:0}
.lang-chip:hover{border-color:var(--line-2)}
.lang-chip input{margin:0;accent-color:var(--teal-2)}
.lang-chip .code{font:600 11px/1 var(--mono);color:var(--muted);background:var(--surface-2);padding:2px 6px;border-radius:4px;margin-left:auto}
.lang-chip:has(input:checked){border-color:var(--teal-2);background:var(--teal-soft)}
.lang-chip:has(input:checked) .code{background:var(--teal-2);color:#fff}
.primary{border:0;background:var(--ink);color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;
  padding:10px 16px;border-radius:9px;cursor:pointer;transition:.15s;margin-top:18px}
.primary:hover:not(:disabled){background:var(--teal-2)}
.primary:disabled{background:#bcc0c5;color:#fff;cursor:not-allowed}
.primary.block{display:block;width:100%;margin-top:12px}

.filechip{margin-top:14px;display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);background:var(--surface-2);
  border-radius:10px;padding:8px 12px;font-family:var(--mono);font-size:12px;color:var(--text)}
.filechip .x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;padding:0 2px}
.filechip .x:hover{color:var(--breach)}

/* ---------- run / trace ---------- */
.run-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:18px 22px;box-shadow:var(--shadow);margin-top:22px;animation:rise .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.run-card .head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.run-card .head .ttl{font-family:var(--serif);font-size:18px;font-weight:500}
.run-card .head .meta{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.run-card .meta b{color:var(--text);font-weight:500}

.statusline{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:4px}
.statusline .pulse{width:7px;height:7px;border-radius:50%;background:var(--teal-2);box-shadow:0 0 0 3px rgba(19,138,108,.18);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.rowlist{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.rowblock{border:1px solid var(--line);border-radius:11px;background:var(--surface-2);overflow:hidden;animation:rise .4s cubic-bezier(.2,.7,.3,1) both}
.rb-head{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.rb-head .badge{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:2px 7px;border-radius:5px}
.rb-head .badge.running{background:var(--amber-soft);color:var(--amber)}
.rb-head .badge.ok{background:var(--teal-soft);color:var(--teal)}
.rb-head .badge.fail{background:var(--breach-soft);color:var(--breach)}
.rb-head .badge.skip{background:#eceee9;color:#6a6d65}
.rb-head .title{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-head .langs{display:flex;gap:5px;flex-wrap:wrap}
.rb-head .langs .l{font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:5px;background:#eceee9;color:#5d6058;border:1px solid var(--line)}
.rb-head .langs .l.ok{background:var(--teal-soft);color:var(--teal);border-color:#bfded2}
.rb-head .langs .l.fail{background:var(--breach-soft);color:var(--breach);border-color:#e9c0b8}
.rb-head .langs .l.warn{background:var(--amber-soft);color:var(--amber);border-color:#e5d0a8}
.rb-head .chev{transition:transform .2s;color:var(--muted)}
.rowblock.open .rb-head .chev{transform:rotate(90deg)}
.rb-body{display:none;padding:10px 12px}
.rowblock.open .rb-body{display:block}
.rb-meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:8px;line-height:1.55}
.rb-meta b{color:var(--text);font-weight:500}

.trace{border:1px solid var(--line);border-radius:11px;background:var(--surface);overflow:hidden}
.trace-h{display:flex;align-items:center;gap:9px;padding:9px 13px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--line);background:#fff}
.steps{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.step{display:flex;gap:11px;align-items:flex-start;padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:9px;animation:rise .35s cubic-bezier(.2,.7,.3,1) both}
.step .ic{width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;margin-top:1px}
.step .ic.info{background:#eef0ee;color:#5d6058}
.step .ic.ok{background:var(--teal-soft);color:var(--teal)}
.step .ic.fail{background:var(--breach-soft);color:var(--breach)}
.step .ic.warn{background:var(--amber-soft);color:var(--amber)}
.step .ic svg{width:13px;height:13px}
.step .body{min-width:0;flex:1}
.step .name{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text)}
.step .name .surf{font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:1px 5px;border-radius:4px;margin-left:8px;vertical-align:middle}
.step .name .surf.glossary{background:#eee9f6;color:#5b4aa0}
.step .name .surf.translate{background:var(--teal-soft);color:var(--teal)}
.step .name .surf.validate{background:var(--amber-soft);color:var(--amber)}
.step .name .surf.workbook{background:#eceee9;color:#5d6058}
.step .name .ms{font-size:10px;color:var(--faint);margin-left:8px;font-weight:400}
.step .io{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5;word-break:break-word}
.step .io .res{color:var(--text)}
.step .io .res.fail{color:var(--breach);font-weight:500}
.step .io .res.ok{color:var(--teal);font-weight:500}
.step .io .res.warn{color:var(--amber);font-weight:500}

.lang-preview{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.lp{border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:9px 12px}
.lp .lp-h{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-bottom:4px}
.lp .lp-h .code{font-family:var(--mono);font-weight:600;font-size:11px;padding:1px 6px;border-radius:5px;background:#eceee9;color:#5d6058}
.lp .lp-h .name{color:var(--text);font-weight:500}
.lp .lp-h .pill{margin-left:auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:5px}
.lp .lp-h .pill.ok{background:var(--teal-soft);color:var(--teal)}
.lp .lp-h .pill.fail{background:var(--breach-soft);color:var(--breach)}
.lp .lp-h .pill.warn{background:var(--amber-soft);color:var(--amber)}
.lp pre{margin:6px 0 0;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:7px;
  font-family:var(--mono);font-size:11px;color:var(--text);max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.lp .issues{margin-top:6px;font-size:11px;color:var(--breach);font-family:var(--mono)}
.lp .issues li{margin-left:14px}

/* ---------- rail ---------- */
.rail{background:var(--surface);border-left:1px solid var(--line);overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:18px;min-height:0}
.card{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);overflow:hidden}
.card-h{padding:13px 15px 11px;border-bottom:1px solid var(--line);background:#fff}
.card-h .t{font-size:13px;font-weight:600}
.card-h .s{font-size:11px;color:var(--muted);margin-top:2px}
.card-b{padding:12px 14px}

.surf-row{padding:8px 0;border-bottom:1px dashed var(--line)}
.surf-row:last-child{border-bottom:0}
.surf-row .h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.surf-row .h .name{font-size:12.5px;font-weight:600}
.surf-row .h .pill{font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:1px 6px;border-radius:5px;margin-left:auto}
.surf-row .h .pill.glossary{background:#eee9f6;color:#5b4aa0}
.surf-row .h .pill.translate{background:var(--teal-soft);color:var(--teal)}
.surf-row .h .pill.validate{background:var(--amber-soft);color:var(--amber)}
.surf-row .h .pill.workbook{background:#eceee9;color:#5d6058}
.surf-row .desc{font-size:11px;color:var(--muted);margin-bottom:5px;line-height:1.4}
.surf-row ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.surf-row li{font-family:var(--mono);font-size:11px;color:var(--text);background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:4px 7px}

.progressbar{background:#f0eee8;height:7px;border-radius:5px;overflow:hidden;margin-bottom:11px}
.pfill{height:100%;background:linear-gradient(90deg,var(--teal-2),var(--gold));transition:width .35s ease;border-radius:5px}
.prow{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px dashed var(--line);font-size:12px}
.prow:last-of-type{border-bottom:0}
.prow span{color:var(--muted)}
.prow b{font-family:var(--mono);font-weight:500;color:var(--text)}

/* ---------- drawer ---------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(15,19,25,.32);opacity:0;pointer-events:none;transition:opacity .25s;z-index:30}
.drawer{position:fixed;top:0;right:0;height:100vh;width:520px;max-width:100vw;background:var(--surface);
  border-left:1px solid var(--line);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,1.2,.4,1);
  z-index:40;display:flex;flex-direction:column;box-shadow:-12px 0 32px rgba(15,19,25,.08)}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer.open{transform:translateX(0)}
.drawer-h{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line)}
.drawer-ttl{font-family:var(--serif);font-size:17px;font-weight:500}
.drawer-x{background:none;border:0;font-size:18px;color:var(--muted);cursor:pointer;padding:4px 8px}
.drawer-x:hover{color:var(--text)}
.drawer-b{flex:1;overflow-y:auto;padding:18px 22px;font-size:13px;line-height:1.6;color:var(--text)}
.drawer-b h3{font-family:var(--serif);font-weight:500;font-size:15px;margin:18px 0 8px}
.drawer-b h3:first-child{margin-top:0}
.drawer-b ul{padding-left:18px;margin:4px 0}
.drawer-b code{font-family:var(--mono);font-size:11.5px;background:#f1efea;padding:1px 5px;border-radius:4px}
.drawer-b .badge-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.drawer-b .badge-row .b{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:6px;background:#eceee9;color:#5d6058;border:1px solid var(--line)}
.drawer-b .badge-row .b.removable{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px}
.drawer-b .badge-row .b.removable .rm{background:none;border:0;color:var(--muted);font-size:13px;line-height:1;cursor:pointer;padding:0 4px;border-radius:4px}
.drawer-b .badge-row .b.removable .rm:hover{color:var(--breach);background:#f4e7e4}
.drawer-b .gloss-add{display:flex;gap:6px;margin:4px 0 8px;align-items:center}
.drawer-b .gloss-add .gloss-input{flex:1;min-width:0;font-family:var(--mono);font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);outline:none}
.drawer-b .gloss-add .gloss-input:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(38,131,131,.18)}
.drawer-b .gloss-add .gloss-input:disabled{opacity:.6;cursor:wait}
.drawer-b .gloss-add .gloss-add-btn{font-family:var(--mono);font-size:11px;padding:6px 12px;border:1px solid var(--teal);background:var(--teal);color:#fff;border-radius:6px;cursor:pointer;letter-spacing:.04em}
.drawer-b .gloss-add .gloss-add-btn:hover{background:#1f6e6e}
.drawer-b .gloss-err{display:none;background:#fbeae6;border:1px solid #e5b5ac;color:#7b2615;font-size:12px;padding:8px 12px;border-radius:6px;margin-bottom:12px}