/* Quick Scan Kit demo: a simulated Claude Desktop run of the v1.1 kit.
   Shared by index.html and claude-tailored-resume-kit.html.
   Modelled on real Claude Desktop screenshots. Everything is scoped to .qsd. */

.qsd{
  --qsd-gold:#D4AF37;--qsd-maroon:#6B1B2F;
  --cd-bg:#FAFAF8;--cd-line:#E7E5DE;--cd-text:#1F1D19;--cd-muted:#8A877E;--cd-soft:#F3F2EE;
  --cd-user:#EFECE3;--cd-orange:#D97757;
  --cd-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --cd-serif:ui-serif,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --cd-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:#141414;border-radius:10px;padding:28px 20px 22px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:16px;box-sizing:border-box;
}
.qsd *,.qsd *::before,.qsd *::after{box-sizing:border-box}
.qsd svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}

/* header copy above the window */
.qsd-head{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.qsd-kicker{font-family:"DM Mono",monospace;font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--qsd-gold);text-align:center}
.qsd-title{font-family:"DM Sans",sans-serif;font-size:1rem;font-weight:600;color:#e8e8e8;text-align:center;line-height:1.4}
.qsd-sub{font-family:"DM Mono",monospace;font-size:.72rem;color:#6b6b6b;letter-spacing:.05em;text-align:center}

/* progress */
.qsd-prog{width:min(900px,100%);display:flex;flex-direction:column;gap:8px}
.qsd-track{height:2px;background:#2a2a2a;border-radius:2px;overflow:hidden}
.qsd-fill{height:100%;width:0;background:linear-gradient(90deg,var(--qsd-maroon),var(--qsd-gold));transition:width .5s ease}
.qsd-steps{display:flex;gap:3px}
.qsd-step{flex:1;min-width:0;background:none;border:1px solid transparent;border-radius:5px;padding:5px 2px;
  font-family:"DM Mono",monospace;font-size:.52rem;letter-spacing:.05em;text-transform:uppercase;color:#4a4a4a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:all .25s}
.qsd-step:hover{color:#8a8a8a}
.qsd-step.done{color:#5a5a5a;border-color:#262626}
.qsd-step.on{color:var(--qsd-gold);border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.06)}

/* app window */
.qsd-win{width:min(900px,100%);height:620px;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
  background:var(--cd-bg);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
  font-family:var(--cd-sans);color:var(--cd-text);text-align:left}
.qsd-titlebar{height:46px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--cd-bg)}
.qsd-lights{display:flex;gap:7px;flex-shrink:0}
.qsd-lights i{width:11px;height:11px;border-radius:50%;display:block}
.qsd-lights i:nth-child(1){background:#FF5F57}.qsd-lights i:nth-child(2){background:#FEBC2E}.qsd-lights i:nth-child(3){background:#28C840}
.qsd-crumb{font-size:.82rem;margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.qsd-crumb i{font-style:normal;color:#b3b0a6;margin:0 6px}
.qsd-env{position:relative;color:#6b685f;display:flex;align-items:center;gap:6px;flex-shrink:0}
.qsd-env::after{content:"";position:absolute;left:12px;top:-2px;width:6px;height:6px;border-radius:50%;background:#2E9E4F}
.qsd-top-r{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0;color:#4b483f;font-size:.8rem}
.qsd-task{display:flex;align-items:center;gap:6px;white-space:nowrap}
.qsd-task[hidden]{display:none}
.qsd-share{border:1px solid var(--cd-line);border-radius:8px;padding:5px 11px;background:#fff}
.qsd-body{flex:1;display:flex;min-height:0}

/* chat column */
.qsd-main{flex:1;min-width:0;display:flex;flex-direction:column}
.qsd-scroll{flex:1;overflow-y:auto;padding:14px 6% 10px;scroll-behavior:smooth}
.qsd-scroll::-webkit-scrollbar{width:6px}.qsd-scroll::-webkit-scrollbar-thumb{background:#dcd8cc;border-radius:3px}

.qsd-user{display:flex;justify-content:flex-end;margin:6px 0 20px}
.qsd-user div{max-width:80%;background:var(--cd-user);border-radius:16px;padding:10px 14px;font-size:.84rem;line-height:1.5;word-break:break-word}

.qsd-turn{margin:0 0 14px;font-family:var(--cd-serif);font-size:.95rem;line-height:1.6;color:var(--cd-text)}
.qsd-turn p{margin:0 0 12px}
.qsd-turn b{font-weight:600}
.qsd-turn ul{margin:2px 0 14px;padding-left:22px}
.qsd-turn li{margin:4px 0}
.qsd-turn h4{font-family:var(--cd-serif);font-size:1.05rem;font-weight:700;margin:16px 0 8px}

/* progress-update lines, tool lines, collapsed step summary */
.qsd-tool,.qsd-think,.qsd-sum{display:flex;align-items:center;gap:8px;font-family:var(--cd-sans);font-size:.8rem;color:var(--cd-muted);margin:0 0 10px;min-width:0}
.qsd-tool .lb,.qsd-think .lb,.qsd-sum .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.qsd-tool .lb{color:#5d5a52}
.qsd-tool .tm{color:#a3a095;flex-shrink:0;font-variant-numeric:tabular-nums}
.qsd-tool .no{color:#b5563a}
.qsd-chev{flex-shrink:0;color:#a3a095}
.qsd-sum .thumbs{margin-left:auto;display:flex;gap:3px;flex-shrink:0;padding-left:10px}
.qsd-sum .thumbs i{width:15px;height:19px;border:1px solid #d9d6cd;border-radius:2px;background:linear-gradient(#fff 0,#fff 3px,#e9e7e0 3px,#e9e7e0 4px,#fff 4px,#fff 7px,#e9e7e0 7px,#e9e7e0 8px,#fff 8px);display:block}

/* working indicator: three orange dots */
.qsd-dots{display:inline-flex;gap:3px;flex-shrink:0;width:22px}
.qsd-dots i{width:4px;height:4px;border-radius:50%;background:var(--cd-orange);display:block;animation:qsd-bob 1s ease-in-out infinite}
.qsd-dots i:nth-child(2){animation-delay:.15s}.qsd-dots i:nth-child(3){animation-delay:.3s}
@keyframes qsd-bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-3px);opacity:1}}

/* code block */
.qsd-code{position:relative;background:#fff;border:1px solid var(--cd-line);border-radius:12px;margin:4px 0 14px}
.qsd-code .ico{position:absolute;top:9px;right:10px;display:flex;gap:9px;color:#8a877e}
.qsd-code pre{margin:0;padding:14px 16px;font-family:var(--cd-mono);font-size:.66rem;line-height:1.6;color:#2b2925;white-space:pre-wrap;word-break:break-word}

/* table */
.qsd-tblw{border:1px solid var(--cd-line);border-radius:12px;overflow:hidden;margin:4px 0 14px;background:#fff}
.qsd-tbl{width:100%;border-collapse:collapse;font-family:var(--cd-serif);font-size:.8rem;line-height:1.45}
.qsd-tbl th,.qsd-tbl td{border-bottom:1px solid var(--cd-line);padding:8px 10px;text-align:left;vertical-align:top}
.qsd-tbl tr:last-child td{border-bottom:none}
.qsd-tbl th{background:var(--cd-soft);font-weight:600}

/* file cards */
.qsd-files{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px;font-family:var(--cd-sans);max-width:540px}
.qsd-file{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--cd-line);border-radius:12px;padding:10px 12px 10px 14px;cursor:pointer;transition:border-color .2s,box-shadow .2s;min-width:0}
.qsd-file:hover,.qsd-file.on{border-color:#cfcbbf;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.qsd-file .th{width:40px;height:44px;border-radius:6px;background:#E6EEF8;color:#5B7FB4;display:grid;place-items:center;flex-shrink:0}
.qsd-file .nm{min-width:0;flex:1}
.qsd-file .nm div:first-child{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsd-file .nm div:last-child{font-size:.7rem;color:var(--cd-muted);margin-top:2px}
.qsd-file .dl{display:flex;align-items:center;border:1px solid var(--cd-line);border-radius:8px;font-size:.74rem;flex-shrink:0;overflow:hidden}
.qsd-file .dl span{padding:5px 10px}
.qsd-file .dl span+span{border-left:1px solid var(--cd-line);padding:5px 6px;color:#8a877e}
.qsd-dlall{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--cd-line);border-radius:8px;padding:6px 11px;font-size:.76rem;background:#fff;font-family:var(--cd-sans);margin:0 0 12px}
.qsd-acts{display:flex;align-items:center;gap:12px;color:#9d9a90;font-family:var(--cd-sans);font-size:.7rem;margin:2px 0 6px}

/* input */
.qsd-input{flex-shrink:0;padding:6px 6% 10px}
.qsd-box{display:flex;align-items:center;gap:8px;border:1px solid var(--cd-line);background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 1px 6px rgba(0,0,0,.04)}
.qsd-box .tx{flex:1;min-width:0;font-size:.84rem;color:var(--cd-text);word-break:break-all;line-height:1.45}
.qsd-box .tx.ph{color:#a3a095}
.qsd-box .tx .caret{display:inline-block;width:1px;height:1em;background:var(--cd-text);vertical-align:-2px;margin-left:1px;animation:qsd-blink 1s steps(1) infinite}
@keyframes qsd-blink{50%{opacity:0}}
.qsd-box .ret{color:#a3a095;transition:color .2s}
.qsd-box .ret.on{color:var(--cd-orange)}
.qsd-under{display:flex;align-items:center;gap:12px;padding:7px 6px 0;font-size:.7rem;color:#8a877e;font-family:var(--cd-sans)}
.qsd-under .disc{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsd-under .mdl{color:#3d3a33;white-space:nowrap}
.qsd-under .mdl em{font-style:normal;color:#8a877e;margin-right:12px}

/* file viewer side pane */
.qsd-panel{width:0;flex-shrink:0;border-left:1px solid var(--cd-line);background:#ECEAE3;overflow:hidden;transition:width .45s ease;display:flex;flex-direction:column}
.qsd-panel.open{width:44%}
.qsd-panel .ph{height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;border-bottom:1px solid var(--cd-line);background:var(--cd-bg);font-size:.74rem}
.qsd-panel .ph span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qsd-panel .ph em{font-style:normal;color:var(--cd-muted);flex-shrink:0}
.qsd-panel .pg{flex:1;overflow-y:auto;padding:16px}
.qsd-page{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12);padding:22px 22px 26px;font-family:Calibri,Carlito,"Segoe UI",Arial,sans-serif;color:#222;font-size:.6rem;line-height:1.45;position:relative}
.qsd-page .nm{font-size:1.15rem;font-weight:700;letter-spacing:.02em}
.qsd-page .ct{font-size:.56rem;color:#555;margin:2px 0 8px}
.qsd-page .sh{font-size:.66rem;font-weight:700;color:#003366;border-bottom:1px solid #c9d3df;margin:9px 0 4px;padding-bottom:1px;text-transform:uppercase;letter-spacing:.04em}
.qsd-page .rl{display:flex;justify-content:space-between;gap:8px;font-weight:700;margin-top:5px}
.qsd-page .rl span:last-child{font-weight:400;color:#555;white-space:nowrap}
.qsd-page ul{margin:2px 0 0;padding-left:13px}
.qsd-page p{margin:0 0 7px}
.qsd-page .fade{position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(transparent,#fff)}
.qsd-inline{border:1px solid var(--cd-line);border-radius:10px;background:#ECEAE3;padding:10px;margin:0 0 4px}

/* controls */
.qsd-ctrl{width:min(900px,100%);display:flex;align-items:center;justify-content:space-between;gap:10px}
.qsd-ctrl button{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:8px 13px;cursor:pointer;border:1px solid #333;background:transparent;color:#9a9a9a}
.qsd-ctrl button:hover{color:#e8e8e8;border-color:#555}
.qsd-ctrl button.play{background:var(--qsd-maroon);border-color:var(--qsd-maroon);color:#f5edd8}
.qsd-ctrl button:disabled{opacity:.35;cursor:default}
.qsd-ctrl .now{text-align:center;font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--qsd-gold)}
.qsd-ctrl .now div:last-child{color:#7a7a7a;letter-spacing:.04em;text-transform:none;font-family:"DM Sans",sans-serif;font-size:.74rem;margin-top:2px}

/* narrow layouts */
.qsd.narrow .qsd-win{height:580px}
.qsd.narrow .qsd-share,.qsd.narrow .qsd-globe,.qsd.narrow .qsd-under .disc,.qsd.narrow .qsd-sum .thumbs{display:none}
.qsd.narrow .qsd-scroll{padding:12px 14px 8px}
.qsd.narrow .qsd-input{padding:6px 12px 10px}
.qsd.narrow .qsd-turn{font-size:.9rem}
.qsd.narrow .qsd-under .mdl{margin-left:auto}
.qsd.narrow .qsd-step{font-size:0;padding:4px 0}
.qsd.narrow .qsd-step::after{content:attr(data-n);font-size:.56rem}
.qsd.narrow .qsd-ctrl button{padding:7px 10px}

@media (prefers-reduced-motion:reduce){
  .qsd-dots i,.qsd-box .tx .caret{animation:none}
  .qsd-panel,.qsd-fill{transition:none}
}