/* jpgtopdf — tool pages (generated by build_tools.py) and the tools hub. Builds on /site-chrome.css tokens. */

.tool-page { max-width: 820px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
.tool-hero { text-align: center; margin: 0 0 1.5rem; }
.tool-hero h1 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.035em; margin: 0 0 .6rem; }
.tool-hero p { font-size: 1.08rem; color: var(--muted); margin: 0 auto; max-width: 40rem; }
.tool-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.tool-badges li { font-size: .78rem; font-weight: 600; color: var(--ok); background: var(--ok-50); border-radius: 999px; padding: .25rem .65rem; }

/* ---------- tool card ---------- */
.tk-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 1.25rem; min-height: 260px;
}
.tk-card > * + * { margin-top: 1rem; }
#tool > * + * { margin-top: 1rem; }
.tk-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 2rem 1rem; border: 2px dashed #c7d2fe; border-radius: var(--radius); cursor: pointer;
    background: radial-gradient(120% 80% at 50% 0%, rgba(59, 130, 246, .07) 0%, rgba(255, 255, 255, 0) 70%), #fbfcff;
    transition: border-color .2s, box-shadow .2s;
}
.tk-drop:hover, .tk-drop.dragover { border-color: var(--brand); box-shadow: 0 0 0 6px rgba(37, 99, 235, .08); }
.tk-drop-ico { width: 40px; height: 40px; color: var(--brand); margin-bottom: .5rem; }
.tk-drop-title { font-weight: 700; color: var(--ink); font-size: 1.08rem; margin: 0; }
.tk-drop-sub { color: var(--muted); font-size: .9rem; margin: .2rem 0 1rem; }

.tk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font: 600 .95rem/1.2 var(--font); color: #fff; background: var(--brand);
    border: 0; border-radius: 12px; padding: .75rem 1.25rem; cursor: pointer; text-decoration: none;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .6); transition: background-color .15s, transform .15s;
}
.tk-btn:hover { background: var(--brand-600); }
.tk-btn:active { transform: translateY(1px); }
.tk-btn[disabled] { background: #94a3b8; box-shadow: none; cursor: not-allowed; }
.tk-btn-lg { width: 100%; padding: 1rem 1.25rem; font-size: 1.05rem; }
.tk-btn-sm { padding: .5rem .9rem; font-size: .88rem; }
.tk-btn-ghost { background: #fff; color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }
.tk-btn-ghost:hover { background: var(--bg-soft); }
.tk-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.tk-btns .tk-btn-lg { flex: 1 1 100%; }
.tk-filebtn { cursor: pointer; }

.tk-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.tk-field { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 150px; min-width: 0; text-align: left; }
.tk-field.tk-grow { flex: 1 1 100%; }
.tk-field > span { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.tk-field > span em { font-weight: 400; color: var(--muted); font-style: normal; }
.tk-field input, .tk-field select, .tk-field textarea, .tk-out {
    font: 400 1rem/1.4 var(--font); color: var(--ink); background: #fff; width: 100%;
    border: 1px solid #d5dbe5; border-radius: 10px; padding: .65rem .75rem;
}
.tk-field input[type="color"] { padding: .2rem; height: 44px; }
.tk-field input[type="range"] { padding: 0; border: 0; }
.tk-field input:focus, .tk-field select:focus, .tk-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.tk-out { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; min-height: 200px; }
.tk-check { display: flex; gap: .5rem; align-items: center; font-size: .92rem; color: var(--ink-2); text-align: left; }
.tk-check input { width: 18px; height: 18px; accent-color: var(--brand); }
.tk-hint { font-size: .88rem; color: var(--muted); margin: 0; text-align: left; }

.tk-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.tk-chip {
    font: 600 .88rem/1 var(--font); color: var(--ink-2); background: var(--bg-soft);
    border: 1px solid var(--line); border-radius: 999px; padding: .55rem .85rem; cursor: pointer;
}
.tk-chip:hover { border-color: #cbd5e1; }
.tk-chip.on { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); }

.tk-adv { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; text-align: left; }
.tk-adv summary { cursor: pointer; font-weight: 600; color: var(--ink-2); font-size: .92rem; }
.tk-adv[open] > * + * { margin-top: .75rem; }

.tk-progress { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.tk-progress > div { height: 100%; width: 0; background: linear-gradient(90deg, #3b82f6, #6d28d9); transition: width .2s; }
.tk-status { font-size: .95rem; color: var(--ink-2); margin: 0; text-align: left; }
.tk-status.ok { color: var(--ok); font-weight: 600; }
.tk-status.err { color: #b91c1c; font-weight: 600; }
.tk-info { display: flex; flex-direction: column; background: var(--bg-soft); border-radius: 12px; padding: .75rem 1rem; font-size: .92rem; text-align: left; }
.tk-pass { background: var(--ok-50); border: 1px solid #a7f3d0; color: var(--ink-2); border-radius: 12px; padding: .75rem 1rem; margin: 0; text-align: left; }
.tk-pass strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem; color: var(--ok); letter-spacing: .04em; }

.tk-results { display: grid; gap: .6rem; }
.tk-results:empty { display: none; }
.tk-result {
    display: flex; align-items: center; gap: .8rem; text-align: left;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .75rem;
}
.tk-result.warn { border-color: #fca5a5; }
.tk-thumb { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--bg-soft); flex-shrink: 0; }
.tk-thumb-ico { display: grid; place-items: center; font: 800 .75rem/1 var(--font); color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); }
.tk-result-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tk-result-meta strong { color: var(--ink); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-result-meta span { color: var(--muted); font-size: .82rem; }

.tk-stage { background: repeating-conic-gradient(#f1f5f9 0 25%, #fff 0 50%) 0 0 / 20px 20px; border-radius: 12px; padding: .75rem; text-align: center; }
.tk-stage canvas { max-width: 100%; height: auto; max-height: 420px; box-shadow: var(--shadow); }

.tk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.tk-list:empty { display: none; }
.tk-item { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: 10px; padding: .4rem .5rem; }
.tk-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.tk-item-name { flex: 1; min-width: 0; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.tk-item button { width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; }

/* organize pdf */
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }
.org-grid:empty { display: none; }
.org-card { border: 1px solid var(--line); border-radius: 12px; padding: .5rem; background: #fff; cursor: grab; text-align: center; }
.org-card.dragging { opacity: .4; }
.org-card.del { opacity: .45; border-style: dashed; }
.org-thumb { height: 140px; display: grid; place-items: center; overflow: hidden; }
.org-thumb img { max-width: 100%; max-height: 130px; box-shadow: var(--shadow-sm); transition: transform .2s; }
.org-n { display: block; font-size: .78rem; color: var(--muted); margin: .3rem 0; }
.org-btns { display: flex; justify-content: center; gap: .25rem; }
.org-btns button { width: 28px; height: 28px; border: 1px solid var(--line); background: #fff; border-radius: 7px; cursor: pointer; font-size: .8rem; }

/* passport crop */
.pp-crop { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.pp-frame { position: relative; max-width: 100%; touch-action: none; }
.pp-canvas { display: block; cursor: grab; border-radius: 4px; box-shadow: var(--shadow); max-width: 100%; }
.pp-guide { position: absolute; inset: 0; pointer-events: none; }
.pp-guide::before { /* face oval */
    content: ""; position: absolute; left: 22%; right: 22%; top: 12%; bottom: 22%;
    border: 2px dashed rgba(37, 99, 235, .75); border-radius: 50%;
}
.pp-guide::after { /* top-of-head line */
    content: ""; position: absolute; left: 10%; right: 10%; top: 8%; border-top: 1px dashed rgba(37, 99, 235, .6);
}
.pp-zoom-f { width: 300px; max-width: 100%; flex: none; }

/* ---------- content below the tool ---------- */
.tool-content { max-width: 780px; margin: 0 auto; }
.tool-content h2 { font-size: clamp(1.4rem, 3vw, 1.7rem); font-weight: 800; margin: 2.75rem 0 .9rem; }
.tool-content h3 { font-size: 1.08rem; font-weight: 700; margin: 1.4rem 0 .4rem; }
.tool-content p, .tool-content li { color: var(--text); }
.tool-content table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: .93rem; }
.tool-content th, .tool-content td { padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tool-content th { background: var(--bg-soft); color: var(--ink); font-weight: 700; }
.tool-content tr:last-child td { border-bottom: 0; }
.tool-content .table-scroll { overflow-x: auto; }
.tool-faq details { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.1rem; margin: 0 0 .6rem; background: #fff; }
.tool-faq summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.tool-faq details p { margin: .6rem 0 0; }
.tool-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: .8rem 1rem; font-size: .93rem; }

.tool-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; padding: 0; margin: 0; list-style: none; }

/* ---------- tool tiles (hub, related, homepage) ---------- */
.tool-tile {
    display: flex; flex-direction: column; gap: .2rem; height: 100%;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1rem;
    text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tool-tile:hover { border-color: #bfdbfe; box-shadow: var(--shadow); transform: translateY(-2px); }
.tool-tile strong { color: var(--ink); font-size: .98rem; }
.tool-tile span { font-size: .86rem; color: var(--muted); line-height: 1.45; }
.tools-hub { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.tools-hub h2 { font-size: 1.35rem; font-weight: 800; margin: 2.25rem 0 .9rem; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; list-style: none; padding: 0; margin: 0; }

@media (max-width: 520px) {
    .tool-page { padding-top: 1.25rem; }
    .tk-card { padding: 1rem; border-radius: var(--radius); }
    .tk-drop { padding: 1.5rem .75rem; }
}

/* ==========================================================================
   v2: per-page themed layout, matching the hand-built Aadhaar / PAN pages.
   Each tool page sets --tk / --tk2 (gradient), --tk-soft (tint) and --tk-line (tint border) on <main>.
   ========================================================================== */
.tool-page { --tk: var(--brand); --tk2: #6d28d9; --tk-soft: #f5f8ff; --tk-line: #c7d2fe; }
.tool-top { max-width: 600px; margin: 0 auto; text-align: center; }
.tool-head {
    background: linear-gradient(135deg, var(--tk) 0%, var(--tk2) 100%); color: #fff;
    padding: 2rem 1.5rem; border-radius: 12px; margin: 0 0 1.5rem;
    box-shadow: 0 14px 30px -18px var(--tk);
}
.tool-head h1 { color: #fff; font-size: clamp(1.8rem, 5vw, 2.2rem); font-weight: 800; margin: 0; letter-spacing: -0.03em; }
.tool-head p { color: rgba(255, 255, 255, .92); margin: .6rem auto 0; font-size: 1rem; max-width: 34rem; }
.tool-head .tool-badges { margin-top: 1rem; }
.tool-head .tool-badges li { background: rgba(255, 255, 255, .18); color: #fff; }

.tool-page .tk-card { box-shadow: none; border: 0; padding: 0; background: transparent; min-height: 220px; }
.tool-page .tk-drop { border-color: var(--tk); background: var(--tk-soft); border-radius: 12px; padding: 2.5rem 1.25rem; }
.tool-page .tk-drop:hover, .tool-page .tk-drop.dragover { border-color: var(--tk2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tk) 12%, transparent); }
.tool-page .tk-drop-ico { color: var(--tk); width: 48px; height: 48px; }
.tool-page .tk-btn { background: var(--tk); box-shadow: 0 6px 16px -8px var(--tk); }
.tool-page .tk-btn:hover { background: var(--tk2); }
.tool-page .tk-btn[disabled] { background: #94a3b8; box-shadow: none; }
.tool-page .tk-btn-ghost { background: #fff; color: var(--ink-2); box-shadow: none; }
.tool-page .tk-btn-ghost:hover { background: var(--tk-soft); }
.tool-page .tk-camera, .tool-page .tk-camera:hover { background: #10b981; box-shadow: 0 6px 16px -8px #10b981; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; display: flex; }
.tool-page .tk-camera:hover { background: #059669; }
.tool-page .tk-chip.on { background: var(--tk-soft); border-color: var(--tk); color: var(--ink); }
.tool-page .tk-progress > div { background: linear-gradient(90deg, var(--tk), var(--tk2)); }

.tool-perfect { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 1.4rem 1.5rem; margin: 2rem 0 0; text-align: left; }
.tool-perfect h3, .tool-perfect h2 { color: #1f2937; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .75rem; }
.tool-perfect ul { list-style: none; padding: 0; margin: 0; }
.tool-perfect li { display: flex; align-items: center; gap: .75rem; margin: .65rem 0; font-size: .95rem; color: #374151; }
.tool-perfect svg { width: 20px; height: 20px; flex-shrink: 0; }

.tool-figure { margin: 2rem 0 0; }
.tool-figure img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow); aspect-ratio: 3 / 2; object-fit: cover; background: var(--tk-soft); }
.tool-figure figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; text-align: center; }

.tool-content .tick-list, .tool-content .use-list { list-style: none; padding-left: 0; }
.tool-content .tick-list li, .tool-content .use-list li { margin: .45rem 0; color: #4b5563; }
.tool-content .tick-list li::before { content: "✓"; color: var(--ok); font-weight: 800; margin-right: .55rem; }
.tool-content ol.how-list { padding-left: 1.4rem; color: #4b5563; }
.tool-content ol.how-list li { margin: .45rem 0; }

.tool-compare { margin-top: 3rem; }
.tool-compare .lead { text-align: center; color: var(--muted); margin: -.25rem 0 1.25rem; }
.tool-compare table { min-width: 460px; border: 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); border-radius: 12px; }
.tool-compare thead tr { background: linear-gradient(135deg, var(--tk) 0%, var(--tk2) 100%); }
.tool-compare th { color: #fff; background: transparent; font-size: .9rem; }
.tool-compare th.us { background: #10b981; text-align: center; }
.tool-compare th.them { text-align: center; }
.tool-compare td { font-size: .9rem; }
.tool-compare td.us { text-align: center; color: #059669; font-weight: 600; }
.tool-compare td.them { text-align: center; color: #b91c1c; font-weight: 600; }
.tool-compare tbody tr:nth-child(even) { background: var(--tk-soft); }
.tool-trophy { text-align: center; margin: 1.25rem 0 0; }
.tool-trophy strong { display: block; color: var(--tk); font-size: 1.08rem; }
.tool-trophy span { color: var(--muted); }

.tool-faq .faq-card { background: var(--tk-soft); border: 1px solid var(--tk-line); border-radius: .75rem; padding: 1.3rem 1.4rem; margin: 0 0 1rem; }
.tool-faq .faq-card h3 { font-size: 1.08rem; font-weight: 650; color: #1f2937; margin: 0 0 .6rem; }
.tool-faq .faq-card p { color: #4b5563; line-height: 1.6; margin: 0; }

@media (max-width: 768px) {
    .tool-head { padding: 1.5rem 1.1rem; }
    .tool-compare table th, .tool-compare table td { padding: .5rem .35rem; font-size: .8rem; }
}
.tool-page .answer-box { background: linear-gradient(180deg, var(--tk-soft), #fff); border-color: var(--tk-line); }
.tool-page .answer-box::before, .tool-page .aeo-steps li::before { background: var(--tk); }
.tool-page .answer-box .label { color: var(--tk); }
.tool-page .tool-content a { color: var(--tk); }
.tool-page .tool-tile:hover { border-color: var(--tk-line); }
.tool-sources { font-size: .85rem; color: var(--muted); margin-top: 2rem; } .tool-sources a { color: var(--muted); }