/* Gifted - minimal theme v2 (Nov 2026 redesign)
   Principles: one paper/ink neutral family, one green accent used on purpose,
   two typefaces with different jobs, hairlines instead of cards, converter first. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(./fonts/archivo.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(./fonts/inter.woff2) format('woff2')}

:root{
  --paper:#FAF9F6; --ink:#171512; --ink2:#5C5850; --ink4:#8A867C;
  --accent:#166B4A; --accent-strong:#0F5539; --accent-bg:#EDF3EF;
  --hairline:#E6E3DB;
  --teal:#166B4A; --teal-strong:#0F5539; --teal-bg:#EDF3EF;
  --red:#B3261E; --amber:#6B5A1E; --amber-bg:#F5F0E1;
  --radius:8px;
}
html,body{margin:0;padding:0}
body{background:var(--paper)}
.idspa{margin:0;padding:0 20px 64px;font-family:'Inter',system-ui,sans-serif;color:var(--ink);
  font-size:.95rem;line-height:1.55;background:var(--paper)}
.g-wrap{max-width:640px;margin:0 auto}

/* header */
.g-top{display:flex;align-items:baseline;justify-content:space-between;padding:22px 0 0}
.g-top img{height:22px;width:auto;display:block}
.g-top .g-note{color:var(--ink4);font-size:.8rem}

/* hero: left-aligned, converter leads */
.idspa h1{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.65rem;line-height:1.15;
  letter-spacing:-0.015em;margin:26px 0 8px;text-transform:none}
.idspa .lede{color:var(--ink2);font-size:.98rem;max-width:52ch;margin:0 0 20px}

/* tool: one quiet surface, hairline, no shadow */
.idspa .tool{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:16px;margin:0}
.idspa .tool h2{font-family:'Archivo',sans-serif;font-size:1rem;font-weight:700;margin:0 0 12px;letter-spacing:0}
.idspa .ip-drop{border:1.5px dashed #CFCBC0;border-radius:var(--radius);background:var(--paper)}
.idspa .ip-drop:hover,.idspa .ip-drop.drag{border-color:var(--accent);background:var(--accent-bg)}
.idspa .btn{border-radius:var(--radius);font-weight:600;font-size:.92rem;min-height:42px}
.idspa .btn-primary,.idspa button.btn-primary{background:var(--accent);color:#fff;border:0;padding:11px 22px}
.idspa .btn-primary:hover{background:var(--accent-strong)}
.idspa .btn-primary:disabled{background:#B9C4BD;cursor:default}
.idspa .btn-secondary,.idspa button.btn-secondary{background:#fff;color:var(--ink);border:1px solid var(--hairline)}
.idspa .btn-secondary:hover{border-color:var(--ink4)}
.idspa .ip-checks li::before{background:var(--accent)}
.idspa .ip-checks li.bad::before{background:var(--red)}
.idspa .privacy-line{color:var(--ink4);font-size:.8rem}
.idspa .ip-error{background:#FBEFED;border-color:#E9C4BF}

/* expandable sections: hairline rows, closed by default */
.g-secs{margin-top:32px;border-top:1px solid var(--hairline)}
.g-secs details{border-bottom:1px solid var(--hairline)}
.g-secs summary{font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;
  padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.g-secs summary::-webkit-details-marker{display:none}
.g-secs summary::after{content:"+";color:var(--ink4);font-family:'Inter';font-weight:400;font-size:1.15rem}
.g-secs details[open] summary::after{content:"\2212"}
.g-secs details>*:not(summary){margin-top:2px}
.g-secs .req-table{margin:4px 0 12px;font-size:.9rem}
.g-secs .req-table th{color:var(--ink2);font-weight:600}
.g-secs ol{padding-left:20px;margin:4px 0 14px}
.g-secs ol li{padding:3px 0}
.g-secs p,.g-secs ul{color:var(--ink2)}
.g-secs p b,.g-secs .q{color:var(--ink);font-weight:600}
.g-secs .checked{color:var(--ink4);font-size:.78rem;margin:10px 0 14px}
.g-secs a{color:var(--accent-strong)}
.g-secs .note{color:var(--ink2);font-size:.88rem;border-left:0;padding:0;margin:8px 0}

/* footer */
.g-foot{margin-top:36px;padding-top:14px;border-top:1px solid var(--hairline);
  color:var(--ink4);font-size:.78rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media (min-width:720px){
  .idspa h1{font-size:2.05rem}
  .idspa .tool{padding:20px}
}

/* step indicator: where you are, what is next */
.ip-steps{display:flex;gap:2px;margin:0 0 14px;font-size:.78rem;color:var(--ink4)}
.ip-step{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;flex:1}
.ip-step .dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;border:1px solid var(--hairline);background:#fff;font-size:.7rem;color:var(--ink4);
  transition:background .3s,color .3s,border-color .3s}
.ip-step.on{color:var(--ink);font-weight:600}
.ip-step.on .dot{background:var(--accent);border-color:var(--accent);color:#fff}
.ip-step.done{color:var(--ink2)}
.ip-step.done .dot{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-strong)}

/* dominant upload CTA with a gentle guiding animation */
.idspa .ip-drop{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 18px;cursor:pointer}
.cta-upload{display:inline-flex;align-items:center;background:var(--accent);color:#fff;
  font-weight:700;font-size:1.05rem;padding:15px 30px;border-radius:var(--radius);
  transition:background .15s ease}
.ip-drop:hover .cta-upload{background:var(--accent-strong)}
.idspa .ip-drop small{color:var(--ink4);font-size:.8rem}

/* result entrance + check states */
.ip-result,.retake{animation:rise .45s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.idspa .ip-checks li.warn{color:var(--amber)}
.idspa .ip-checks li.warn::before{background:#C9A227}
.idspa .ip-checks li.warn::after{content:"!";border:0;color:#fff;left:6px;top:5px;transform:none;font-weight:700;font-size:.72rem;font-style:normal}
.idspa .ip-checks li.bad::after{content:"\00d7";border:0;color:#fff;left:4.5px;top:4px;transform:none;font-weight:700;font-size:.85rem}
.idspa .ip-checks li.sep{padding:10px 0 2px;font-family:'Archivo',sans-serif;font-weight:700;font-size:.85rem;color:var(--ink)}
.idspa .ip-checks li.sep::before,.idspa .ip-checks li.sep::after{content:none}
.retake{margin-top:14px;background:var(--amber-bg);border:1px solid #E3D3A0;border-radius:var(--radius);padding:12px 16px}
.retake-title{font-weight:700;font-size:.92rem;color:var(--amber);margin:0 0 6px}
.retake ul{margin:0;padding-left:18px;font-size:.88rem;color:var(--ink2)}
.retake ul li{padding:2px 0}
.ip-hint{color:var(--ink4);font-size:.8rem;margin:8px 0 0}

@media (prefers-reduced-motion: reduce){
  .ip-result,.retake{animation:none}
  .ip-prog li.active::before{animation:none}
}

/* keep the adjust buttons inside the card on narrow screens */
.idspa .ip-controls .ip-row{flex-wrap:wrap;gap:6px}
.idspa .ip-controls .ip-row .btn{flex:0 0 auto}

/* animated working sequence: each row is a real operation completing */
.ip-progress{padding:8px 2px}
.ip-prog{list-style:none;margin:0;padding:0;font-size:.95rem}
.ip-prog li{padding:8px 0 8px 30px;position:relative;color:var(--ink4);transition:color .3s}
.ip-prog li::before{content:"";position:absolute;left:2px;top:11px;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--hairline);background:#fff}
.ip-prog li.active{color:var(--ink);font-weight:600}
.ip-prog li.active::before{border-color:var(--accent);border-top-color:transparent;animation:spin .8s linear infinite}
.ip-prog li.done{color:var(--ink)}
.ip-prog li.done::before{background:var(--accent);border-color:var(--accent)}
.ip-prog li.done::after{content:"";position:absolute;left:7px;top:15px;width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}
.ip-prog li.bad{color:var(--red)}
.ip-prog li.bad::before{background:var(--red);border-color:var(--red)}
.ip-prog li.bad::after{content:"\00d7";color:#fff;position:absolute;left:6px;top:8px;font-weight:700}
.ip-prog li.active-note{color:var(--ink4)}
.ip-prog li.active-note::before{background:#aab4c0;border-color:#aab4c0}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .ip-prog li.active::before{animation:none}
}

/* expandable detail of every check */
.idspa .ip-checks li.sep-holder{padding:4px 0 4px 0}
.idspa .ip-checks li.sep-holder::before,.idspa .ip-checks li.sep-holder::after{content:none}
.ip-allchecks summary{cursor:pointer;color:var(--accent-strong);font-size:.85rem;font-weight:600;list-style:none}
.ip-allchecks summary::-webkit-details-marker{display:none}
.ip-allchecks summary::before{content:"+ "}
.ip-allchecks[open] summary::before{content:"\2212 "}
.ip-allchecks .ip-checks.sub{margin-top:8px;font-size:.88rem}

/* modern pass (Anthropic frontend-design guidance): stronger type hierarchy,
   crisper surfaces, generous spacing; boldness spent on the headline + CTA only */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent-bg)}
.idspa{font-size:.97rem}
.idspa h1{font-size:1.9rem;font-weight:830;letter-spacing:-0.025em;margin:30px 0 10px}
.idspa .lede{font-size:1rem;margin-bottom:24px}
.idspa .tool{border-radius:12px;padding:20px;border-color:#EAE7DF}
.idspa .tool h2{font-size:1.05rem;margin-bottom:16px}
.idspa .ip-drop{border-radius:12px;padding:40px 20px;transition:border-color .15s ease,background .15s ease}
.cta-upload{border-radius:10px;padding:16px 34px}
.idspa .btn{border-radius:10px}
.ip-steps{margin-bottom:18px;border-bottom:1px solid var(--hairline);padding-bottom:14px}
.ip-step .dot{transition:background .2s ease,color .2s ease,border-color .2s ease}
.idspa .ip-preview{border-radius:10px}
.g-secs summary{padding:16px 0;transition:color .15s ease}
.g-secs summary:hover{color:var(--accent-strong)}
.g-secs details>*:not(summary){padding-bottom:6px}
.idspa .btn:focus-visible,.idspa .ip-drop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:720px){
  .idspa h1{font-size:2.35rem}
  .idspa .tool{padding:26px}
}