/* 1.5.2: a person's activities, the Family map and the Family tree. */

/* activities: tiles like the ID documents, with a coloured band */
.acttiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.acttile{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:0;overflow:hidden;text-align:left;cursor:pointer;font:inherit;color:inherit}
.acttile:hover,.acttile.open{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.acttile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acttile.ended{opacity:.7}
.actband{display:flex;align-items:center;height:64px;padding:0 16px;color:var(--fg);background:color-mix(in srgb,var(--kc,var(--accent)) 22%,var(--surface))}
.actband svg{width:28px;height:28px}
.actt{display:grid;gap:4px;padding:12px 14px 14px;min-width:0}
.actt b{font-weight:650}
.actt small{color:var(--muted);font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actpills{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.actsec{display:grid;gap:6px;padding-top:8px;border-top:1px solid var(--line)}
.actitem{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;margin:0 -10px;border-radius:12px;cursor:pointer}
.actitem:hover{background:var(--surface-2)}
.actitem:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.actitem .go{margin-top:3px;color:var(--muted)}

/* Family: list or map */
.viewswitch{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface);gap:2px}
.viewswitch button{border:0;background:none;border-radius:999px;padding:6px 14px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;min-height:36px}
.viewswitch button[aria-pressed="true"]{background:var(--fg);color:var(--surface)}
/* Family map: a living web (familymap.js) */
.fmw{display:grid;gap:14px}
.fm-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fm-chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:.9rem;font-weight:600;color:var(--fg);cursor:pointer;transition:background .2s,border-color .2s}
.fm-chip:hover{border-color:var(--muted)}
.fm-chip.on{background:var(--fg);color:var(--surface);border-color:var(--fg)}
.fm-chip i{font-style:normal;font-weight:500;opacity:.7}
.fm-body{display:flex;gap:24px;align-items:flex-start}
.fm-stage{position:relative;height:640px;flex:none;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 47%,color-mix(in srgb,var(--accent) 14%,var(--surface)) 0,color-mix(in srgb,var(--accent) 5%,var(--surface)) 40%,var(--surface-2) 75%)}
.fm-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--muted) 35%,transparent) 1px,transparent 1.3px);background-size:24px 24px;-webkit-mask-image:radial-gradient(circle at 50% 47%,#000 10%,transparent 72%);mask-image:radial-gradient(circle at 50% 47%,#000 10%,transparent 72%);opacity:.6;pointer-events:none}
.fm-svg{position:absolute;left:0;top:0;pointer-events:none}
.fm-sp{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-opacity:.3;transition:stroke-opacity .3s,stroke-width .3s}
.fm-sp.rel{stroke-opacity:.8;stroke-width:2.2}
.fm-sp.on{stroke-opacity:1;stroke-width:2.6;stroke-dasharray:6 8;animation:fm-flow 1.1s linear infinite}
.fm-sp.dim{stroke-opacity:.1}
@keyframes fm-flow{to{stroke-dashoffset:-14}}
.fm-sl{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-opacity:0;transition:stroke-opacity .4s}
.fm-sl.on{stroke-opacity:.5}
.fm-arc{fill:none;stroke:var(--warn);stroke-width:2.2;stroke-dasharray:2 7;stroke-linecap:round;stroke-opacity:.45;transition:stroke-opacity .3s}
.fm-arc.on{stroke-opacity:1}
.fm-ring{position:absolute;width:156px;height:156px;margin:-78px 0 0 -78px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 40%,transparent);animation:fm-ring 5s ease-out infinite;pointer-events:none}
.fm-ring.r2{animation-delay:1.7s}.fm-ring.r3{animation-delay:3.3s}
@keyframes fm-ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.5);opacity:0}}
.fm-orbit{position:absolute;width:210px;height:210px;margin:-105px 0 0 -105px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 30%,transparent);animation:fm-spin 36s linear infinite;pointer-events:none}
.fm-orbit span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);left:50%;top:-4px;margin-left:-4px}
.fm-orbit span+span{top:auto;bottom:-4px;background:var(--warn)}
@keyframes fm-spin{to{transform:rotate(360deg)}}
.fm-hub{position:absolute;width:156px;height:156px;margin:-78px 0 0 -78px;border-radius:50%;border:0;background:radial-gradient(circle at 34% 26%,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent) 60%);color:var(--accent-fg);box-shadow:0 20px 44px color-mix(in srgb,var(--accent) 38%,transparent),inset 0 0 0 7px rgba(255,255,255,.14);display:grid;place-content:center;justify-items:center;gap:3px;text-align:center;cursor:pointer;font:inherit;transition:transform .25s}
.fm-hub:hover{transform:scale(1.06)}.fm-hub:active{transform:scale(.97)}
.fm-hub svg{width:26px;height:26px}.fm-hub b{font-size:1.2rem}.fm-hub small{font-size:.8rem;opacity:.85}
.fm-hub em{font-style:normal;font-size:.74rem;font-weight:700;background:var(--warn-soft);color:var(--warn);border-radius:999px;padding:3px 10px;margin-top:3px}
.fm-hub em[hidden]{display:none}
.fm-node{position:absolute;transform:translate(-50%,-50%);transition:opacity .35s,filter .35s}
.fm-node.is-dim{opacity:.38;filter:saturate(.5)}
.fm-node.is-off{opacity:.16;pointer-events:none}
.fm-fl{animation:fm-fl 6.5s ease-in-out infinite}
@keyframes fm-fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.fm-nb{position:relative;border:0;background:none;padding:8px;display:grid;justify-items:center;gap:7px;font:inherit;color:var(--fg);cursor:pointer}
.fm-av{position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:2rem;font-weight:700;color:var(--av-fg);box-shadow:0 8px 20px rgba(0,0,0,.14),0 0 0 5px var(--surface);transition:transform .25s,box-shadow .25s}
.fm-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.fm-nb:hover .fm-av{transform:scale(1.09)}
.is-sel .fm-av{transform:scale(1.14);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 35%,transparent),0 0 0 5px var(--surface),0 0 0 8px var(--accent)}
.fm-name{font-weight:700;font-size:.98rem;line-height:1.1}
.fm-rel{font-size:.76rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.fm-badge{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;box-sizing:border-box;border-radius:12px;display:grid;place-items:center;font-size:.75rem;font-weight:700;background:var(--accent-soft);color:var(--accent);border:2px solid var(--surface)}
.fm-badge[hidden]{display:none}
.fm-badge.warn{background:var(--warn-soft);color:var(--warn);animation:fm-pulse 1.8s ease-in-out infinite}
@keyframes fm-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 50%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.fm-tip{position:absolute;bottom:100%;left:50%;transform:translate(-50%,6px);white-space:nowrap;background:var(--fg);color:var(--surface);font-size:.78rem;padding:7px 11px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.fm-nb:hover .fm-tip,.fm-nb:focus-visible .fm-tip{opacity:1;transform:translate(-50%,0)}
.fm-nb:focus-visible,.fm-sb:focus-visible,.fm-hub:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:16px}
.fm-sat{position:absolute;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.2,1.3,.4,1),opacity .3s}
.fm-sat.vis{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.fm-sb{width:78px;height:78px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);display:grid;place-content:center;justify-items:center;gap:2px;text-align:center;box-shadow:0 8px 18px rgba(0,0,0,.1);font:inherit;color:var(--fg);cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.fm-sb:hover{transform:scale(1.07);border-color:var(--accent)}
.fm-sb b{font-size:1.2rem;line-height:1}.fm-sb small{font-size:.68rem;line-height:1.15;color:var(--muted);max-width:64px;overflow-wrap:anywhere}
.fm-sat.act .fm-sb{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.fm-sat.act .fm-sb small{color:var(--accent-fg);opacity:.85}
.fm-hint{position:absolute;left:24px;bottom:18px;font-size:.82rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.fm-hint i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:fm-blink 2s ease-in-out infinite}
@keyframes fm-blink{0%,100%{opacity:1}50%{opacity:.25}}
.fm-panel{width:340px;height:640px;box-sizing:border-box;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:22px;overflow:auto;display:flex;flex-direction:column;gap:14px;animation:fm-in .35s ease}
@keyframes fm-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.fm-tag{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.fm-tg{padding-bottom:4px}
.fm-h{margin:0;font-size:1.5rem;line-height:1.1;letter-spacing:-.01em}
.fm-head{display:flex;align-items:center;gap:14px}
.fm-x{margin-left:auto;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:1.3rem;line-height:1;color:var(--muted);cursor:pointer;flex:none}
.fm-rels{display:flex;flex-wrap:wrap;gap:8px}
.fm-pill{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:.82rem;font-weight:600;color:var(--fg);cursor:pointer}
.fm-pill:hover{border-color:var(--accent);color:var(--accent)}
.fm-stat{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px}
.fm-stat div{padding:10px 14px;display:grid;gap:1px}.fm-stat div+div{border-left:1px solid var(--line)}
.fm-stat small{font-size:.75rem;color:var(--muted)}.fm-stat b{font-size:1.25rem}
.fm-secs{display:grid;gap:8px}
.fm-sec{border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s}
.fm-sec.open{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.fm-sh{width:100%;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;border:0;background:none;text-align:left;font:inherit;font-size:.92rem;font-weight:600;color:var(--fg);cursor:pointer}
.fm-sq{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:none;color:var(--fg)}
.fm-cnt{margin-left:auto;font-size:.75rem;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:2px 9px}
.fm-it{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 54px;border-top:1px solid var(--line);font-size:.86rem;animation:fm-in .3s ease}
.fm-it small{margin-left:auto;color:var(--muted);white-space:nowrap}
.fm-row{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:6px 4px;border:0;border-top:1px solid var(--line);background:none;text-align:left;font:inherit;font-size:.9rem;color:var(--fg);cursor:pointer}
.fm-row:hover{background:var(--surface-2)}
.fm-row.fm-static{cursor:default}.fm-row.fm-static:hover{background:none}
.fm-row .g{display:grid;flex:1;min-width:0}.fm-row .g small{font-size:.78rem;color:var(--muted)}
.fm-tone{font-size:.75rem;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.fm-tone.warn{background:var(--warn-soft);color:var(--warn)}
.fm-act{margin-top:auto;display:flex}.fm-act .btn{flex:1;justify-content:center}
.fm-foot{margin-top:auto}
@media (max-width:1100px){.fm-body{flex-direction:column}.fm-panel{width:auto;height:auto;max-height:none;align-self:stretch}}
@media (prefers-reduced-motion:reduce){.fm-fl,.fm-ring,.fm-orbit,.fm-sp.on,.fm-badge.warn,.fm-hint i{animation:none}.fm-sat,.fm-sat.vis{transition:opacity .2s}}
@media (max-width:820px){.fmw{display:none}.fmapnote{display:block!important}}
.fmapnote{display:none}

/* Family tree: the centre person and their own line in full size, other families small or folded into one chip */
.ftreecard{padding-bottom:12px}
.ftree{position:relative}
.ftv{position:relative;height:min(72vh,680px);min-height:420px;overflow:hidden;border-radius:var(--r);background:var(--surface-2);touch-action:none;cursor:grab;user-select:none}
.ftv.grab{cursor:grabbing}
.fw{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ftv.grab .fw{transition:none}
.fls{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.fls path{fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;animation:fvln .5s ease}
.fls path.cold{stroke:var(--line)}
.fls path.hot{stroke:var(--accent);stroke-opacity:.55}
.fls path.pair{stroke:#f0a3b6}
@keyframes fvln{from{opacity:0}}
.ftt{position:absolute;left:0;top:0}
.ftk{position:absolute;left:12px;top:12px;display:flex;gap:8px}
.ftk [hidden]{display:none}
.tile{position:absolute;left:0;top:0;width:216px;height:58px;box-sizing:border-box;padding:0 12px;display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:transform .5s cubic-bezier(.2,.7,.2,1),width .4s,height .4s,opacity .35s,border-color .25s,box-shadow .25s,background .25s}
.tile.hide{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.tile.s{padding:0 8px;gap:7px;border-radius:10px}
.tile.s .tph{width:26px;height:26px;font-size:.75rem}
.tile.s .nm b{font-size:.8rem}.tile.s .nm small{display:none}.tile.s .tbadge{display:none}
.tile:hover{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.tile:focus-visible,.tchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile.focus{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent),0 10px 26px rgba(0,0,0,.14)}
.tchip{position:absolute;left:0;top:0;box-sizing:border-box;padding:0 10px;display:flex;align-items:center;gap:9px;border:1px dashed var(--faint);border-radius:12px;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer;animation:fvln .5s ease}
.tchip:hover{border-color:var(--accent);border-style:solid}
.tchip .nm{display:block;min-width:0}.tchip .nm b{display:block;font-size:.84rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tchip .nm small{display:block;margin-top:2px;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpp{display:flex;flex:none}.tpp .tph{width:24px;height:24px;font-size:.7rem;border:2px solid var(--surface)}.tpp .tph+.tph{margin-left:-8px}
/* no gliding on the first draw */
.ftv.nt *{transition:none!important;animation:none!important}
.ftv.nt .fw{transition:none!important}
@media (prefers-reduced-motion:reduce){.fw,.tile,.tchip,.fls path{transition:none;animation:none}}
.tph{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:600;color:#17171a;background:var(--surface-2)}
.tph img{width:100%;height:100%;object-fit:cover;display:block}
.tile.f .tph.u,.tchip .tph.f.u,.tph.big.f.u{background:#f3c9d4}.tile.m .tph.u,.tchip .tph.m.u,.tph.big.m.u{background:#c8d6f2}
.tph.big{width:84px;height:84px;font-size:1.8rem}
.tile.gone .tph{filter:grayscale(.7)}
.tile .nm{display:block;min-width:0}
.tile .nm b{display:block;font-weight:600;font-size:.9rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .nm small{display:block;margin-top:2px;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbadge{margin-left:auto;flex:none;display:grid;place-items:center}
.tbadge i{display:grid;place-items:center;font-style:normal}
.tbadge .tme{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff}
.tbadge .tme svg{width:12px;height:12px}
.tbadge .thm{width:18px;height:18px;color:var(--faint)}
.tbadge .thm svg{width:15px;height:15px}
.fti{position:absolute;left:12px;bottom:12px;display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);max-width:min(340px,calc(100% - 150px))}
.fti div{min-width:0}.fti b{display:block;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fti small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftc{position:absolute;right:12px;bottom:12px;display:flex;gap:2px;padding:4px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.ftc button{border:0;background:none;color:inherit;font:inherit;min-width:34px;height:34px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.ftc button:hover,.ftc button:focus-visible{background:var(--accent-soft);outline:none}
.ftc .zv{min-width:50px;font-variant-numeric:tabular-nums;font-size:.82rem}
.trhead{display:flex;gap:14px;align-items:center}
@media (max-width:560px){.ftv{height:64vh}.fti small{display:none}.fti{max-width:calc(100% - 140px)}}
@media (max-width:820px){.viewswitch{display:none}}

/* ---- One page pattern (pagekit.js): numbers in one slim row, blocks in two columns, long lists cut to 4 rows,
   empty blocks folded into "Not set up yet". Only on pages marked .pk. */
#view.pk{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
#view.pk>*{grid-column:1/-1;min-width:0}
#view.pk .pk-flat{display:contents}
#view.pk .pk-mod{grid-column:auto;min-width:0}
#view.pk .pk-mod.pk-wide,#view.pk .pk-mod.pk-open{grid-column:1/-1}
#view.pk .pk-hide,#view.pk .pk-over,#view.pk .pk-nofind{display:none!important}
#view.pk .pk-mod.card{padding:14px 18px 12px;gap:4px;border-radius:16px;align-content:start}
#view.pk .pk-mod>.sheet-h{border-bottom:0;padding-bottom:4px}
#view.pk .pk-mod>.sheet-h h2{font-size:.98rem}
#view.pk .pk-mod>.sheet-h .cnt{background:var(--surface-2);border-radius:999px;padding:1px 9px;font-size:.78rem;color:var(--muted)}
#view.pk .pk-mod>.sheet-h .btn.small{min-height:34px}
#view.pk .pk-mod .list>.row{border-top:1px solid var(--line);min-height:44px}
#view.pk .pk-mod>p.small.muted{font-size:.82rem}
#view.pk .pk-scroll{max-height:min(60vh,520px);overflow:auto;padding-right:4px}
.pk-more{justify-self:start;border:0;background:none;padding:10px 0 4px;font:inherit;font-weight:600;font-size:.86rem;color:var(--accent);cursor:pointer;min-height:44px}
.pk-more:hover{text-decoration:underline}
.pk-find{max-width:none!important;margin:4px 0 6px}
/* the numbers: one slim row */
#view.pk .insights{grid-auto-columns:minmax(150px,1fr);gap:0;padding:0;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px}
#view.pk .insights .ins{background:var(--surface)!important;box-shadow:none;border-radius:0;border-left:1px solid var(--line);min-height:0;padding:12px 18px;gap:2px;grid-template-rows:none;color:var(--fg)}
#view.pk .insights .ins:first-child{border-left:0}
#view.pk .insights .ins .k{font-weight:600;color:var(--muted);font-size:.78rem}
#view.pk .insights .ins .k>*,#view.pk .insights .ins .from,#view.pk .insights .ins .bar,#view.pk .insights .ins .tl-list{display:none}
#view.pk .insights .ins .v{font-size:1.3rem}
#view.pk .insights .ins .v.txt{font-size:1.05rem}
#view.pk .insights .ins .d{font-size:.78rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* jump bar and search */
.pk-jump{display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:sticky;top:0;z-index:6;padding:8px 0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px)}
.pk-chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px;font:inherit;font-size:.84rem;font-weight:600;color:var(--fg);cursor:pointer;min-height:36px}
.pk-chip i{font-style:normal;font-weight:500;color:var(--muted);margin-left:3px}
.pk-chip:hover{border-color:var(--accent)}
.pk-q{margin-left:auto;max-width:260px!important;flex:1 1 200px!important}
.pk-bar{display:grid;gap:10px;border:1.5px dashed var(--line);border-radius:16px;padding:14px 18px}
.pk-chips{display:flex;flex-wrap:wrap;gap:8px}
.pk-add{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-weight:600;font-size:.88rem;color:var(--fg);cursor:pointer}
.pk-add:hover{border-color:var(--accent)}
.pk-add svg{color:var(--accent)}
@media (max-width:820px){
  #view.pk{grid-template-columns:minmax(0,1fr)}
  .pk-jump{position:static;background:none;backdrop-filter:none;flex-wrap:nowrap;overflow-x:auto}
  .pk-chip{flex:none}
  .pk-q{display:none!important}
}