/* P5 job 6 (HANDOFF §7): the Knowledge base on the P5 frames (frames/kit/p5.css 430-517 and the shared pieces it leans on), every rule under #view-kb.
   Loaded after kb.js's own styles (index.html: next to p1.css). Grid: 2/4/8, type floor 12. */
#view-kb .kb-head{display:flex;align-items:center;gap:var(--s-4);margin:0 0 var(--s-4)}
#view-kb .kb-head h1{margin:0 auto 0 0}
#view-kb .p5-ro{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--pill);background:var(--raised);box-shadow:var(--edge);color:var(--text-2);font:500 var(--fs-2)/1 var(--font)}
#view-kb .p5-ro .i{width:var(--icon-sm);height:var(--icon-sm)}
#view-kb .p5-bar{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4)}
#view-kb .p5-bar .grow{flex:1}
#view-kb .p5-tabs{margin:0}
#view-kb .p5-tabs .subtab{text-decoration:none}
#view-kb .p5-tabs .subtab[aria-disabled=true]{color:var(--text-3);pointer-events:none}   /* the row reads like the frame: grey label, counts «–», not dimmed (BUILD-VS-FRAME-B J2.4) */
#view-kb .p5-kbsrch{width:280px}
#view-kb .p5-kbsrch input::-webkit-search-cancel-button{display:none}
#view-kb .p5-note{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
#view-kb .p5-note .i{width:var(--icon-md);height:var(--icon-md);color:var(--text-3);flex:none}
#view-kb .p5-sub{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
#view-kb .p5-head-r{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
#view-kb .p5-empty{position:relative;isolation:isolate;display:grid;place-items:center;min-height:max(360px,min(520px,calc(100vh - 240px)));padding:var(--s-7) 0}
#view-kb .p5-empty::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--dots) 50% 50%/22px 22px;-webkit-mask-image:radial-gradient(ellipse 42% 52% at 50% 50%,#000 10%,transparent 100%);mask-image:radial-gradient(ellipse 42% 52% at 50% 50%,#000 10%,transparent 100%)}
#view-kb .p5-dbc,.d-body .p5-dbc{display:grid;place-items:center;min-height:100%;padding:var(--s-6)}
/* lessons */
#view-kb .p5-stopln{margin:0 0 var(--s-2)}   /* FIX-ALERT: the wrapper of a CFAlert */
#view-kb .p5-lg{margin:0 0 var(--s-2)}
#view-kb .p5-lgh{display:flex;align-items:center;gap:var(--s-2);height:36px;margin:0;font:600 var(--fs-2)/18px var(--font);color:var(--text)}
#view-kb .p5-lgh .n{color:var(--text-3);font-weight:500;font-variant-numeric:tabular-nums}
#view-kb summary.p5-lgs{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-2);padding-bottom:var(--s-2);border-radius:var(--r-2);cursor:pointer;list-style:none}   /* the folding Stopped group (B2 R2) */
#view-kb summary.p5-lgs::-webkit-details-marker{display:none}
#view-kb summary.p5-lgs > .i{width:var(--icon-sm);height:var(--icon-sm);color:var(--text-3);rotate:-90deg;transition:rotate var(--dur-2) var(--ease)}
#view-kb details[open] > summary.p5-lgs > .i{rotate:0deg}
#view-kb summary.p5-lgs .kb-sline{flex:1 1 100%;margin-top:-6px;color:var(--text-3);font-size:var(--fs-2);line-height:18px}
@media (prefers-reduced-motion:reduce){#view-kb summary.p5-lgs > .i{transition:none}}
#view-kb .p5-lrows,#view-kb .p5-rrows{margin:0;padding:0;list-style:none;border-radius:var(--r-4);border:1px solid var(--line);background:var(--surface);overflow:hidden}
#view-kb .p5-lrow{display:flex;align-items:center;gap:var(--s-4);width:100%;height:64px;padding:0 var(--s-4) 0 var(--s-3);border:0;border-top:1px solid var(--line);background:none;color:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--dur-2) var(--ease)}
#view-kb .p5-lrows > li:first-child > .p5-lrow{border-top:0}
#view-kb .p5-lrow:hover,#view-kb .p5-lrow:focus-visible{background:var(--raised)}
#view-kb .p5-lrow:focus-visible{outline-offset:-2px}
#view-kb .p5-lrow .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#view-kb .p5-lrow .tx b{display:flex;align-items:center;gap:var(--s-2);min-width:0;font:500 var(--fs-3)/20px var(--font);color:var(--text)}
#view-kb .p5-lrow .tx b .t,#view-kb .p5-lrow .tx small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-kb .p5-lrow .tx small{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
#view-kb .p5-lrow > .chev,#view-kb .p5-rrow > .chev{width:16px;height:16px;color:var(--text-3);flex:none}
#view-kb .p5-lrow > .p5-sub{flex:none;min-width:72px;text-align:right}
#view-kb .p5-lrow > .p5-tag{flex:none}
#view-kb .p5-lrow > .si{flex:none}
#view-kb .p5-cov{display:block;flex:none;width:40px;height:54px;border-radius:var(--r-1);background:var(--raised);box-shadow:0 0 0 1px var(--line);overflow:hidden}
#view-kb .p5-cov img{display:block;width:100%;height:100%;object-fit:cover}
#view-kb .p5-lrow .p5-rt{flex:none}
#view-kb .p5-x{flex:none;display:inline-grid;place-items:center;height:20px;padding:0 6px;border-radius:var(--r-1);background:var(--raised);box-shadow:var(--edge-strong);color:var(--text-2);font:500 var(--fs-1)/1 var(--mono)}
#view-kb .p5-lmore{display:flex;justify-content:center;align-items:center;height:36px}
#view-kb .p5-tag{display:inline-flex;align-items:center;height:20px;padding:0 var(--s-2);border-radius:var(--r-1);background:var(--raised);box-shadow:var(--edge-strong);color:var(--text-2);font:500 var(--fs-1)/1 var(--font);vertical-align:1px;margin:0}
#view-kb .p5-tag.warn{color:var(--amber)}
#view-kb .p5-tag.q{color:var(--text-3)}
#view-kb .p5-lrows.skel .p5-lrow{cursor:default}
/* rules */
#view-kb .p5-rrow{display:flex;align-items:center;gap:var(--s-4);width:100%;height:56px;padding:0 var(--s-4) 0 var(--s-3);border:0;border-top:1px solid var(--line);background:none;color:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--dur-2) var(--ease)}
#view-kb .p5-rrows > li:first-child > .p5-rrow{border-top:0}
#view-kb .p5-rrow:hover,#view-kb .p5-rrow:focus-visible{background:var(--raised)}
#view-kb .p5-rrow:focus-visible{outline-offset:-2px}
#view-kb .p5-rrow .tx{flex:1;min-width:0;display:flex;flex-direction:column}
#view-kb .p5-rrow .tx b{font:500 var(--fs-3)/20px var(--font);color:var(--text)}
#view-kb .p5-rrow .tx small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
#view-kb .p5-rt{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-2);background:var(--raised);box-shadow:var(--edge-strong);color:var(--accent)}
#view-kb .p5-rt .i{width:var(--icon-md);height:var(--icon-md)}
/* lesson page and dossier page */
#view-kb .p5-crumbs{display:flex;align-items:center;gap:6px;margin:0 0 var(--s-3);color:var(--text-3);font-size:var(--fs-2);line-height:18px}
#view-kb .p5-crumbs .link{color:var(--text-2);font-size:var(--fs-2)}
#view-kb .p5-crumbs .i{width:var(--icon-sm);height:var(--icon-sm)}
#view-kb .p5-lhead{display:flex;align-items:flex-start;gap:var(--s-6);margin:0 0 var(--s-6)}
#view-kb .p5-lhead > div:first-child{flex:1;min-width:0}
#view-kb h1.p5-lt{margin:0 0 var(--s-2);line-height:40px}
#view-kb .p5-lmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
#view-kb .p5-lmeta .sep{width:1px;height:14px;background:var(--line-strong);margin:0 var(--s-1)}
#view-kb .p5-lpage{display:grid;grid-template-columns:minmax(0,1fr) 496px;gap:var(--s-8);align-items:start}
#view-kb .p5-ltext .kb-case-sec{padding:0 0 var(--s-5);margin:0 0 var(--s-5);border-bottom:1px solid var(--line)}
#view-kb .p5-ltext .kb-case-sec:last-child{border-bottom:0;margin-bottom:0}
#view-kb .p5-ltext h2,#view-kb .p5-dtext h2,#view-kb .p5-dtext h3{margin:0 0 var(--s-2);font:600 var(--fs-4)/20px var(--font);color:var(--text)}
#view-kb .p5-ltext p,#view-kb .p5-dtext p,#view-kb .p5-dtext li{margin:0;color:var(--text-2);font-size:var(--fs-3);line-height:22px;max-width:68ch}
#view-kb .p5-quote{margin:0;padding:var(--s-3) var(--s-4);border:0;border-radius:var(--r-2);background:rgb(var(--p-mist) / .05);color:var(--text);font-size:var(--fs-4);line-height:22px;white-space:pre-wrap;max-width:none}
#view-kb .p5-chg{margin:0;padding:0;list-style:none}
#view-kb .p5-chg li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);min-height:36px;border-top:1px solid var(--line);font-size:var(--fs-3)}
#view-kb .p5-chg li:first-child{border-top:0}
#view-kb .p5-chg .grow{flex:1}
#view-kb .p5-chg .mono{font:400 var(--fs-2)/1 var(--mono);color:var(--text-2)}
#view-kb .p5-chg li.gone > a{text-decoration:line-through;color:var(--text-3)}
#view-kb .p5-chg .why{flex:1 1 100%;margin:0 0 var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
#view-kb .p5-lpics{position:sticky;top:88px}
#view-kb .p5-pics{display:grid;grid-template-columns:240px 240px;gap:var(--s-4)}
#view-kb .p5-lpic{margin:0}
#view-kb .p5-lpic img,#view-kb .p5-hatch{display:block;width:240px;height:320px;border-radius:var(--r-3);object-fit:cover;background:var(--raised);box-shadow:0 0 0 1px var(--line)}
#view-kb .p5-lpic figcaption{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
#view-kb .p5-hatch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);background:var(--hatch),var(--bg);box-shadow:var(--edge-strong);color:var(--text-2);font:500 var(--fs-3)/20px var(--font);text-align:center}
#view-kb .p5-hatch small{color:var(--text-3);font-size:var(--fs-2);line-height:18px}
#view-kb .p5-picf{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4)}
#view-kb .p5-dpage{display:grid;grid-template-columns:270px minmax(0,1fr);gap:var(--s-8);align-items:start}
#view-kb .p5-dslot{width:270px;height:360px;border-radius:var(--r-4);border:1px solid var(--line);background:var(--surface);overflow:hidden}
#view-kb .p5-dgrid{display:grid;grid-template-columns:96px;justify-content:center;align-content:center;gap:var(--s-6);height:100%}
#view-kb .p5-dt{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
#view-kb .p5-dt img{display:block;border-radius:var(--r-sm);object-fit:cover;box-shadow:0 0 0 1px var(--line)}
#view-kb .p5-dt.v img{width:72px;height:96px}
#view-kb .p5-dt.h img{width:96px;height:72px;margin:var(--s-3) 0}
#view-kb .p5-dt figcaption{color:var(--text-2);font-size:var(--fs-1);line-height:16px;text-align:center;white-space:nowrap}
#view-kb .p5-dnone{display:grid;place-items:center;height:100%;padding:0 var(--s-4)}
#view-kb .p5-dnone .stv p{max-width:22ch}
#view-kb .p5-dtext .p5-tabs{margin:0 0 var(--s-5)}
#view-kb .p5-dtext .kb-game-sec{margin:0 0 var(--s-5);padding:0;border:0}
#view-kb .p5-dtext ul:not(.p5-chg){margin:0;padding-left:var(--s-4)}
/* the import dialog (#dlg) */
#dlg.p5-imp{width:520px;max-width:calc(100vw - 32px)}
#dlg.p5-imp .p5-cmd{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-4) 0 0;padding:var(--s-2) var(--s-2) var(--s-2) 14px;border-radius:var(--r-2);background:var(--bg);box-shadow:var(--edge-strong)}
#dlg.p5-imp .p5-cmd code{flex:1;min-width:0;font:400 var(--fs-2)/18px var(--mono);color:var(--text);overflow-wrap:anywhere}
#dlg.p5-imp .p5-fold{margin:var(--s-4) 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
#dlg.p5-imp .p5-fold summary{cursor:pointer;color:var(--text-2);font-weight:500}
#dlg.p5-imp .p5-fold p{margin:var(--s-2) 0 0}
@media (max-width:1180px){#view-kb .p5-lpage{grid-template-columns:minmax(0,1fr) 400px;gap:var(--s-6)}#view-kb .p5-pics{grid-template-columns:192px 192px}#view-kb .p5-lpic img,#view-kb .p5-hatch{width:192px;height:256px}}
/* the Stopped group (B2 R2): folded, last; its line and a Use again beside each row */
#view-kb .p5-lrows > li.kb-gone{display:flex;align-items:center;gap:var(--s-3);border:0;border-top:1px solid var(--line);padding-right:var(--s-4)}
#view-kb .p5-lrows > li.kb-gone:first-child{border-top:0}
#view-kb li.kb-gone > .p5-lrow{flex:1;min-width:0;border-top:0}
#view-kb li.kb-gone > .btn{flex:none}
#view-kb .p5-lrow .kb-reach{flex:none}
#view-kb .p5-rrow > .p5-tag{flex:none}
/* lesson states, the frame kit's colours: learning accent, learned green, the rest quiet */
#view-kb .si.learned{color:var(--green)}
#view-kb .si.learning{color:var(--accent)}
#view-kb .si.once{color:var(--text-2)}
#view-kb .si:is(.cancelled,.stopped){color:var(--text-3)}
#view-kb .p5-lmeta .kb-state::before{content:none}
#view-kb .p5-qby:not([hidden]){display:block;margin-top:var(--s-1);color:var(--text-3);font-size:var(--fs-1);line-height:16px;white-space:normal}

/* fix round 1 (BUILD-VS-FRAME-B J2): the meta separator is the P5 middle dot; History day heads are plain; the version view on the frame's grid */
#view-kb .kb-meta .dot::before{content:"·"}
#view-kb .kb-hday{margin:var(--s-6) 0 var(--s-2);font:600 var(--fs-2)/18px var(--font);letter-spacing:normal;text-transform:none;color:var(--text);height:auto}
#view-kb .kb-facts{padding:var(--s-4) 0 var(--s-5)}
#view-kb .kb-lead{margin-top:var(--s-4);padding-bottom:var(--s-6)}
#view-kb .kb-lead+.kb-md>h2:first-child{margin-top:var(--s-6)}