/* =========================================================
   Pickamod Tools: shared UI components for every tool page.
   Loaded after pickamod.css. All classes are prefixed "pk-".
   ========================================================= */

/* page hero */
.pk-hero{padding:34px 0 10px;text-align:center}
.pk-crumb{font-size:13px;color:var(--muted);display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pk-crumb a:hover{color:var(--rose-d)}
.pk-hero .ti{width:74px;height:74px;border-radius:24px;display:grid;place-items:center;margin:22px auto 14px;color:var(--plum)}
.pk-hero h1{font-size:clamp(28px,3.6vw,44px);font-weight:900;line-height:1.4}
.pk-hero p{color:var(--ink2);max-width:620px;margin:10px auto 0;font-size:16px}
.pk-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.pk-badges span{font-size:12.5px;font-weight:600;background:var(--card);border:1px solid var(--line);padding:4px 12px;border-radius:99px;color:var(--ink2)}

/* tool container */
.pk-tool{background:var(--card);border-radius:30px;padding:clamp(22px,4vw,44px);max-width:900px;margin:30px auto 0;box-shadow:0 30px 60px -40px rgba(61,37,50,.35);position:relative}
.pk-tool.wide{max-width:1100px}

/* quiz engine */
.pk-progress{display:flex;align-items:center;gap:14px;margin-bottom:26px;font-size:13px;color:var(--muted);font-weight:600}
.pk-progress .bar{flex:1;height:6px;background:var(--blush);border-radius:99px;overflow:hidden}
.pk-progress .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--rose),var(--plum));border-radius:99px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.pk-q{animation:pkIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes pkIn{from{opacity:0;transform:translateX(-18px)}}
.pk-q h2{font-size:clamp(19px,2.2vw,25px);font-weight:800;line-height:1.6}
.pk-q .hint{color:var(--muted);font-size:14px;margin-top:4px}
.pk-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
.pk-opts.c1{grid-template-columns:1fr}.pk-opts.c3{grid-template-columns:repeat(3,1fr)}.pk-opts.c4{grid-template-columns:repeat(4,1fr)}
.pk-opt{display:flex;align-items:center;gap:14px;text-align:right;padding:16px 18px;border:1.5px solid var(--line);border-radius:18px;background:var(--bg);font-weight:600;font-size:15px;line-height:1.6;transition:.25s;width:100%}
.pk-opt:hover{border-color:var(--rose);background:#fff;transform:translateY(-2px)}
.pk-opt.on{border-color:var(--rose);background:var(--blush);box-shadow:0 0 0 3px rgba(199,107,122,.15)}
.pk-opt .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fff;flex:none;font-size:20px}
.pk-opt .sw{width:44px;height:44px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pk-opt small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.pk-opt.v{flex-direction:column;text-align:center;padding:20px 12px}
.pk-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:10px}
.pk-back{font-size:14px;font-weight:600;color:var(--ink2);display:inline-flex;gap:6px;align-items:center;padding:8px 4px}
.pk-back:hover{color:var(--rose-d)}
.pk-back[disabled]{opacity:.3;pointer-events:none}

/* buttons */
.pk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:99px;background:var(--rose);color:#fff;font-weight:700;font-size:14.5px;transition:.3s}
.pk-btn:hover{background:var(--rose-d);transform:translateY(-2px)}
.pk-btn[disabled]{opacity:.4;pointer-events:none}
.pk-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.pk-btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--rose);color:var(--rose-d)}
.pk-btn.dark{background:var(--plum)}

/* form fields */
.pk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pk-grid.c3{grid-template-columns:repeat(3,1fr)}.pk-grid.c4{grid-template-columns:repeat(4,1fr)}
.pk-field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.pk-field input,.pk-field select{width:100%;height:50px;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);padding:0 14px;font:inherit;font-size:15px;color:var(--ink);outline:0;transition:.25s}
.pk-field input:focus,.pk-field select:focus{border-color:var(--rose);background:#fff}
.pk-field .help{font-size:12px;color:var(--muted);margin-top:4px}
.pk-seg{display:inline-flex;background:var(--bg);border-radius:99px;padding:5px;gap:4px;flex-wrap:wrap}
.pk-seg button{padding:9px 18px;border-radius:99px;font-weight:700;font-size:14px;color:var(--ink2);transition:.25s}
.pk-seg button.on{background:#fff;color:var(--ink);box-shadow:0 4px 12px -6px rgba(61,37,50,.4)}

/* results */
.pk-result{animation:pkUp .6s cubic-bezier(.2,.7,.2,1)}
@keyframes pkUp{from{opacity:0;transform:translateY(20px)}}
.pk-rhead{text-align:center;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.pk-rhead .lbl{font-size:13px;font-weight:700;color:var(--rose-d);background:var(--blush);padding:4px 14px;border-radius:99px;display:inline-block}
.pk-rhead h2{font-size:clamp(26px,3.4vw,40px);font-weight:900;margin:12px 0 6px;line-height:1.4}
.pk-rhead p{color:var(--ink2);max-width:600px;margin:auto}
.pk-rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pk-rgrid.c3{grid-template-columns:repeat(3,1fr)}
.pk-rcard{background:var(--bg);border-radius:20px;padding:20px}
.pk-rcard h3{font-size:16px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.pk-rcard h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rose);flex:none}
.pk-rcard p,.pk-rcard li{font-size:14.5px;color:var(--ink2)}
.pk-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.pk-list li{position:relative;padding-right:22px}
.pk-list li::before{content:"✓";position:absolute;right:0;color:var(--rose-d);font-weight:800}
.pk-list.x li::before{content:"✕";color:#b0464f}
.pk-meter{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
.pk-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--rose),var(--plum))}
.pk-bars{display:flex;flex-direction:column;gap:12px}
.pk-bars .row{display:grid;grid-template-columns:110px 1fr 44px;gap:12px;align-items:center;font-size:14px;font-weight:600}
.pk-bars .row b{font-weight:700;color:var(--muted);font-size:13px;text-align:left}

/* swatches */
.pk-swatches{display:flex;flex-wrap:wrap;gap:12px}
.pk-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;font-weight:600;cursor:pointer;background:none;border:0;font-family:inherit;color:var(--ink)}
.pk-swatch i{width:58px;height:58px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:.25s;display:block}
.pk-swatch:hover i{transform:translateY(-3px) scale(1.05)}
.pk-swatch small{color:var(--muted);font-weight:400;direction:ltr}

/* alerts */
.pk-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;font-size:14.5px;line-height:1.75}
.pk-alert .ic{font-weight:900;flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:#fff}
.pk-alert.ok{background:#e8f3ec}.pk-alert.ok .ic{background:#3f8f5f}
.pk-alert.warn{background:#fbf0de}.pk-alert.warn .ic{background:#c4892f}
.pk-alert.bad{background:#f8e3e5}.pk-alert.bad .ic{background:#b0464f}
.pk-alert.info{background:#ece7f3}.pk-alert.info .ic{background:#6b5a8c}

/* chips */
.pk-chips{display:flex;flex-wrap:wrap;gap:8px}
.pk-chip{padding:8px 16px;border-radius:99px;border:1.5px solid var(--line);background:var(--bg);font-weight:600;font-size:14px;transition:.2s;font-family:inherit;color:var(--ink);cursor:pointer}
.pk-chip:hover{border-color:var(--rose)}
.pk-chip.on{background:var(--plum);border-color:var(--plum);color:#fff}

/* tables */
.pk-table-wrap{overflow-x:auto;border-radius:18px;border:1px solid var(--line)}
.pk-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:480px}
.pk-table th,.pk-table td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line)}
.pk-table th{background:var(--bg);font-weight:800;font-size:13.5px}
.pk-table tr:last-child td{border-bottom:0}
.pk-table tr.hl td{background:var(--blush);font-weight:800}

/* result actions */
.pk-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.pk-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,40px);background:var(--plum);color:#fff;padding:12px 22px;border-radius:99px;font-size:14px;font-weight:600;opacity:0;transition:.4s;z-index:200;pointer-events:none}
.pk-toast.show{opacity:1;transform:translate(-50%,0)}

/* recommended articles inside a result */
.pk-reads{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pk-read{background:var(--bg);border-radius:16px;padding:16px;font-size:14px;font-weight:700;line-height:1.7;transition:.25s;display:block}
.pk-read:hover{background:var(--blush);color:var(--rose-d)}
.pk-read small{display:block;color:var(--rose-d);font-weight:600;font-size:12px;margin-bottom:4px}

/* SEO article + FAQ below each tool */
.pk-article{max-width:820px;margin:70px auto 0}
.pk-article h2{font-size:clamp(22px,2.4vw,28px);font-weight:900;margin:34px 0 10px;line-height:1.5}
.pk-article h3{font-size:19px;font-weight:800;margin:24px 0 8px}
.pk-article p,.pk-article li{font-size:16px;color:var(--ink2);line-height:2}
.pk-article ul{padding-right:22px;margin:8px 0}
.pk-faq{max-width:820px;margin:40px auto 0}
.pk-faq h2{font-size:clamp(22px,2.4vw,28px);font-weight:900;margin-bottom:16px}
.pk-faq details{background:var(--card);border-radius:18px;margin-bottom:10px;padding:0 20px;transition:.3s}
.pk-faq details[open]{box-shadow:0 14px 30px -24px rgba(61,37,50,.4)}
.pk-faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;display:flex;justify-content:space-between;gap:12px}
.pk-faq summary::-webkit-details-marker{display:none}
.pk-faq summary::after{content:"+";font-size:22px;color:var(--rose);line-height:1;transition:.3s}
.pk-faq details[open] summary::after{transform:rotate(45deg)}
.pk-faq details p{padding-bottom:18px;color:var(--ink2)}

/* other tools strip */
.pk-more{margin-top:70px}

/* hub page */
.pk-hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pk-hubgrid .toolc .tg{font-size:12px;font-weight:700;color:var(--muted)}
.pk-filter{display:flex;justify-content:center;margin:26px 0 30px}

@media (max-width:900px){
  .pk-opts.c3,.pk-opts.c4{grid-template-columns:repeat(2,1fr)}
  .pk-rgrid.c3,.pk-reads{grid-template-columns:1fr 1fr}
  .pk-grid.c3,.pk-grid.c4{grid-template-columns:1fr 1fr}
  .pk-hubgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .pk-opts,.pk-rgrid,.pk-reads,.pk-grid{grid-template-columns:1fr}
  .pk-opts.c4,.pk-opts.c3{grid-template-columns:1fr 1fr}
  .pk-hubgrid{grid-template-columns:1fr}
  .pk-tool{border-radius:24px}
  .pk-bars .row{grid-template-columns:84px 1fr 40px}
}

/* grid safety: long labels never overflow their column */
.pk-opts,.pk-rgrid,.pk-grid,.pk-reads{grid-template-columns:repeat(2,minmax(0,1fr))}
.pk-opts.c1{grid-template-columns:minmax(0,1fr)}
.pk-opts.c3,.pk-rgrid.c3,.pk-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pk-opts.c4,.pk-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pk-reads{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .pk-opts.c3,.pk-opts.c4,.pk-grid.c3,.pk-grid.c4,.pk-rgrid.c3,.pk-reads{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .pk-opts,.pk-rgrid,.pk-rgrid.c3,.pk-reads,.pk-grid,.pk-grid.c3{grid-template-columns:minmax(0,1fr)}
  .pk-opts.c3,.pk-opts.c4,.pk-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* loading state & server result helpers */
.pk-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:220px;color:var(--ink2);font-weight:600;font-size:15px}
.pk-spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--blush);border-top-color:var(--rose);animation:pkSpin .8s linear infinite}
@keyframes pkSpin{to{transform:rotate(360deg)}}
.pk-reads-wrap{margin-top:26px}
.pk-reads-h{font-size:17px;font-weight:900;margin-bottom:12px}
.pk-tool .pk-alert + .pk-alert{margin-top:10px}
.toolc .tg{font-size:12px;font-weight:700;color:var(--muted)}