/* Developer tools batch 2 (Lee, 30 Oct 2026: "Build all 20 tools"). On top of projects.css and tools.css; site variables keep light and dark in step. */
.tl-app input[type=email],.tl-app input[type=tel],.tl-app input[type=date]{width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;min-height:44px}
.tl-app input[type=date]{color-scheme:dark}[data-theme="light"] .tl-app input[type=date]{color-scheme:light}
.tl-f-btn{align-content:end}
@media (min-width:700px){.tl-row3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tl-notes{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.tl-notes:empty{display:none}
.tl-notes li{font-size:.86rem;line-height:1.45;padding:.5rem .7rem .5rem 2rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);position:relative;overflow-wrap:anywhere}
.tl-notes li::before{position:absolute;left:.7rem;top:.5rem;font-weight:700}
.tl-notes li.pass::before{content:"✓";color:var(--g)}
.tl-notes li.mid::before{content:"!";color:var(--y)}
.tl-notes li.fail::before{content:"✕";color:var(--r)}
.tl-notes li:not(.pass):not(.mid):not(.fail)::before{content:"·";color:var(--mut)}
[data-theme="light"] .tl-notes li.pass::before{color:#0a7a56}[data-theme="light"] .tl-notes li.mid::before{color:#946200}[data-theme="light"] .tl-notes li.fail::before{color:#c01c43}
.tl-sum{margin:0;font-size:.92rem;font-weight:600;color:var(--ink)}
.tl-sum:empty{display:none}
.tl-sum.pass{color:var(--g)}.tl-sum.fail{color:var(--r)}
[data-theme="light"] .tl-sum.pass{color:#0a7a56}[data-theme="light"] .tl-sum.fail{color:#c01c43}
.tl-badge{display:inline-block;font-size:.74rem;font-weight:700;padding:.12rem .45rem;border-radius:6px;white-space:nowrap;border:1px solid var(--line)}
.tl-badge.pass{color:var(--g);background:color-mix(in srgb,var(--g) 12%,transparent)}
.tl-badge.mid{color:var(--y);background:color-mix(in srgb,var(--y) 12%,transparent)}
.tl-badge.fail{color:var(--r);background:color-mix(in srgb,var(--r) 12%,transparent)}
[data-theme="light"] .tl-badge.pass{color:#0a7a56}[data-theme="light"] .tl-badge.mid{color:#946200}[data-theme="light"] .tl-badge.fail{color:#c01c43}
.tl-credits{font-size:.9rem}
.pb-table td .pass,.pe-cr .pass{color:var(--g)}.pe-cr .fail{color:var(--mut)}
[data-theme="light"] .pe-cr .pass{color:#0a7a56}
/* index: groups and jump links */
.tl-jump{margin:0 0 1.6rem}
.tl-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.tl-jump-a{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-size:.86rem;font-weight:600}
.tl-jump-a:hover{border-color:var(--b)}
.tl-jump-n{font-family:var(--mono);font-size:.72rem;color:var(--mut)}
.tl-group{margin:0 0 2.6rem;scroll-margin-top:84px}
.tl-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;margin:0 0 1rem}
.tl-group-head h2{margin:0;font-family:var(--display);font-size:clamp(1.3rem,3.5vw,1.7rem)}
.tl-group-head p{margin:0;color:var(--mut);font-size:.92rem}
@media (max-width:600px){.tl-card .pc-media{display:none}.tl-group{margin-bottom:2rem}}
/* palette */
.pe-fig{margin:0;display:grid;gap:.3rem}.pe-fig img{width:100%;max-height:260px;object-fit:contain;border-radius:12px;background:var(--bg)}
.pe-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pe-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:.3rem .7rem;align-items:center;padding:.5rem;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.pe-sw{width:52px;height:52px;border-radius:10px;border:1px solid var(--line);grid-row:span 2}
.pe-b{display:grid;font-family:var(--mono);font-size:.86rem}.pe-b small{color:var(--mut);font-family:inherit;font-size:.74rem}
.pe-cr{display:flex;flex-wrap:wrap;gap:.2rem .6rem;font-size:.74rem;grid-column:2/4}
.pe-pair{display:inline-block;padding:.3rem .6rem;border-radius:6px;font-weight:600;font-size:.84rem}
@media (max-width:420px){.pe-item{grid-template-columns:44px minmax(0,1fr)}.pe-sw{width:44px;height:44px}.pe-item .tl-btn{grid-column:2}.pe-cr{grid-column:1/3}}
/* grid & flex */
.gp-stage{min-height:260px;padding:.7rem;border:1px dashed var(--line);border-radius:12px;background:var(--bg);overflow:auto}
.gp-item{font:inherit;font-family:var(--mono);font-weight:700;font-size:.9rem;min-height:56px;padding:.6rem;border-radius:9px;border:1px solid color-mix(in srgb,var(--b) 50%,transparent);background:color-mix(in srgb,var(--b) 16%,var(--card));color:var(--ink);cursor:pointer}
.gp-item.on{background:var(--b);color:#fff;border-color:var(--b)}
/* breakpoints */
.bp-sizes{display:flex;flex-wrap:wrap;gap:.45rem}
.bp-out{display:grid;gap:1.2rem}.bp-out:empty{display:none}
.bp-fig{margin:0;display:grid;gap:.45rem;min-width:0}
.bp-fig figcaption{display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline;font-size:.84rem}
.bp-fig figcaption b{font-family:var(--mono)}.bp-fig figcaption span,.bp-sc{color:var(--mut);font-size:.78rem}
.bp-st{flex-basis:100%;font-size:.8rem;color:var(--mut)}.bp-st.pass{color:var(--g)}.bp-st.fail{color:var(--r);font-weight:700}
[data-theme="light"] .bp-st.pass{color:#0a7a56}[data-theme="light"] .bp-st.fail{color:#c01c43}
.bp-wrap{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff;position:relative}
.bp-wrap iframe,.tt-wrap iframe{border:0;display:block;transform-origin:0 0;background:#fff}
/* font pairing */
.fp-list{display:grid;gap:.45rem}
.fp-pair{display:grid;gap:.1rem;text-align:left;font:inherit;padding:.55rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer;min-height:44px}
.fp-pair b{font-size:.88rem}.fp-pair span{font-size:.76rem;color:var(--mut)}
.fp-pair[aria-pressed=true]{border-color:var(--b);box-shadow:inset 0 0 0 1px var(--b)}
.fp-prev{border-radius:14px;padding:1.3rem;background:#fbfaf7;color:#1f2430;border:1px solid var(--line);display:grid;gap:.8rem;overflow-wrap:anywhere}
.fp-prev.fp-dark{background:#12151d;color:#e9ecf3}
.fp-h{margin:0;font-family:var(--fp-h);font-size:var(--fp-hs);font-weight:var(--fp-hw);line-height:1.12}
.fp-b{margin:0;font-family:var(--fp-b);font-size:var(--fp-bs);line-height:var(--fp-lh)}
@media (max-width:520px){.fp-h{font-size:min(var(--fp-hs),9vw)}}
/* colour vision */
.cb-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.cb-grid:empty{display:none}
.cb-fig{margin:0;display:grid;gap:.35rem}.cb-fig canvas{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.cb-fig figcaption{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center;font-size:.84rem}.cb-fig small{color:var(--mut)}
.cb-btns{display:flex;gap:.35rem;margin-left:auto}
#cb-sevo{font-family:var(--mono);color:var(--mut);font-weight:400}
/* og */
.og-canvas{width:100%;height:auto;aspect-ratio:1200/630;border-radius:12px;border:1px solid var(--line);display:block}
/* clip-path, blobs, dividers */
.cp-box{position:relative;width:min(100%,340px);aspect-ratio:1;justify-self:center;margin:12px}
.cp-stage{position:absolute;inset:0;background:linear-gradient(135deg,var(--b),var(--g))}
.cp-box::before{content:"";position:absolute;inset:0;border:1px dashed var(--line);border-radius:4px}
.cp-handles{position:absolute;inset:0}
.cp-h{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid #fff;background:#111827;color:#fff;font:700 .7rem/1 var(--mono);cursor:grab;touch-action:none;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.cp-h.on{background:var(--b)}.cp-h.drag{cursor:grabbing}
.bl-prev{width:min(100%,300px);height:auto;justify-self:center}
.dv-stage{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);min-height:140px;display:grid;align-content:end}
.dv-prev{width:100%;display:block}.dv-prev.top{align-self:start}
/* easing */
.ea-graph{width:min(100%,280px);height:auto;justify-self:center;overflow:visible;touch-action:none}
.ea-box{stroke:var(--line);stroke-width:1}.ea-diag{stroke:var(--line);stroke-dasharray:4 4}
.ea-curve{stroke:var(--b);stroke-width:3}.ea-arm{stroke:var(--mut);stroke-width:1.5}
.ea-h{fill:var(--g);stroke:#fff;stroke-width:2;cursor:grab}.ea-h2{fill:var(--b)}
.ea-h:focus-visible{outline:none;stroke:var(--ink);stroke-width:4}
.ea-nums{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.ea-val{margin:0;font-family:var(--mono);font-size:.86rem;overflow-wrap:anywhere}
.ea-track{position:relative;height:72px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.ea-ball{position:absolute;left:12px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--b)}
.ea-ball.ea-lin{top:40px;width:20px;height:20px;background:var(--mut);opacity:.7}
.ea-key{display:flex;gap:1rem}.ea-k1::before,.ea-k2::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.35rem;background:var(--b)}.ea-k2::before{background:var(--mut)}
.ea-cardbox{height:120px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.ea-card{padding:1rem 1.6rem;border-radius:12px;background:var(--card);border:1px solid var(--line);font-weight:700}
/* placeholders */
.ph-stage{display:grid;place-items:center;min-height:180px;padding:.8rem;border:1px solid var(--line);border-radius:12px;background:repeating-conic-gradient(color-mix(in srgb,var(--line) 60%,transparent) 0 25%,transparent 0 50%) 0 0/16px 16px}
.ph-prev{max-width:100%;max-height:320px;height:auto;display:block}
.pc-prev{max-height:560px;overflow:auto;padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-size:.92rem;line-height:1.55}
.pc-prev h1{font-size:1.4rem;margin:0 0 .4rem}.pc-prev h2{font-size:1.1rem;margin:1.2rem 0 .4rem}.pc-prev h3{font-size:.98rem;margin:.8rem 0 .2rem}.pc-prev p,.pc-prev ul{margin:0 0 .5rem}
.pc-prev blockquote{margin:.4rem 0;padding:.4rem .8rem;border-left:3px solid var(--y);color:var(--mut)}
/* glass + neumorphism */
.gl-stage{min-height:280px;border-radius:14px;display:grid;place-items:center;padding:2rem 1rem;overflow:hidden}
.gl-bg-aurora{background:radial-gradient(circle at 20% 20%,#ff6ec4 0,transparent 45%),radial-gradient(circle at 80% 30%,#7873f5 0,transparent 50%),radial-gradient(circle at 50% 90%,#2ee6a6 0,transparent 55%),#1b1446}
.gl-bg-sunset{background:linear-gradient(160deg,#f97316,#ec4899 55%,#6d28d9)}
.gl-bg-stripes{background:repeating-linear-gradient(45deg,#111827 0 18px,#f9fafb 18px 36px,#ef4444 36px 54px)}
.gl-bg-night{background:radial-gradient(circle at 70% 20%,#38bdf8 0,transparent 35%),#020617}
.gl-card{width:min(100%,300px);padding:1.3rem;display:grid;gap:.4rem;font-size:.9rem}
.gl-card b{font-size:1.15rem}
.nu-stage{min-height:280px;border-radius:14px;display:grid;place-items:center;padding:2rem}
.nu-card{width:180px;height:180px;display:grid;place-items:center;color:#4b5563}
/* units */
.un-table tr.on{background:color-mix(in srgb,var(--b) 12%,transparent)}
.un-table td:nth-child(2){font-family:var(--mono)}
/* readability */
.rd-scores{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.rd-big{display:grid;gap:.15rem;padding:.8rem;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.rd-big span{font-size:.78rem}.rd-big output{font-family:var(--display);font-size:2.2rem;font-weight:800;line-height:1}.rd-big small{font-size:.76rem;color:var(--mut)}
.rd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem;margin:0}
.rd-stats div{padding:.45rem .6rem;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.rd-stats dt{font-size:.72rem;color:var(--mut)}.rd-stats dd{margin:0;font-family:var(--mono);font-weight:700}
.rd-view{max-height:460px;overflow:auto;padding:.9rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);line-height:1.65;font-size:.94rem}
.rd-view:empty{display:none}
.rd-s{margin:0 0 .5rem;padding:.1rem .4rem;border-radius:6px}
.rd-s.long{background:color-mix(in srgb,var(--y) 16%,transparent)}.rd-s.vlong{background:color-mix(in srgb,var(--r) 16%,transparent)}
.rd-pass,.rd-swap{color:inherit;border-radius:3px;padding:0 .1rem}
.rd-pass{background:color-mix(in srgb,var(--b) 28%,transparent)}.rd-swap{background:none;text-decoration:underline wavy var(--g);text-underline-offset:3px}
.rd-n{margin-left:.4rem;font-family:var(--mono);font-size:.72rem;color:var(--mut)}
.rd-key{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center}
.rd-k-long,.rd-k-vlong{padding:.05rem .4rem;border-radius:5px;background:color-mix(in srgb,var(--y) 16%,transparent)}.rd-k-vlong{background:color-mix(in srgb,var(--r) 16%,transparent)}
/* qr */
.qr-stage{display:grid;place-items:center;padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.qr-prev{width:min(100%,280px);height:auto;image-rendering:pixelated;border-radius:6px}
/* security headers */
.sh-presets,.sh-perm{display:flex;flex-wrap:wrap;gap:.35rem .9rem}
.sh-perm .tl-check{font-family:var(--mono);font-size:.8rem}
.sh-dirs{display:grid;gap:.55rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.sh-dirs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sh-dir label{font-family:var(--mono);font-size:.78rem!important}
.sh-dir input{font-family:var(--mono)!important;font-size:.86rem!important}
.sh-explain{margin:0;display:grid;gap:.5rem}
.sh-x{padding:.5rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.sh-x dt{font-family:var(--mono);font-size:.8rem;font-weight:700}.sh-x dd{margin:.15rem 0 0;font-size:.86rem;color:var(--soft-ink)}
/* tap targets */
.tt-wrap{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}
.tt-table td,.tt-table th{white-space:normal!important;vertical-align:top}
.tt-table tr.bad td:first-child{box-shadow:inset 3px 0 0 var(--r)}
.tt-table small{color:var(--mut)}
/* brief builder */
.bb-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.bb-steps button{font:inherit;font-size:.8rem;font-weight:600;min-height:36px;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--mut);cursor:pointer}
.bb-steps .done button{color:var(--ink)}.bb-steps .on button{background:var(--b);border-color:var(--b);color:#fff}
.bb-form{display:grid;gap:.9rem}
.bb-h{font-size:1.15rem}.bb-h:focus{outline:none}
.bb-set{border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem .8rem;margin:0;display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.bb-set legend{font-size:.86rem;font-weight:600;padding:0 .3rem}
.bb-set.bb-bad{border-color:var(--r)}
.bb-opt{padding:.35rem .2rem}
.bb-nav{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;padding-top:.4rem;border-top:1px solid var(--line)}
.bb-nav #bb-next{margin-left:auto}
#bb-review{display:grid;gap:.85rem}
.bb-store{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}