/* knowledge.css — Employees → Site knowledge (knowledge.js). Only know-* classes;
   .chip .btn .hint .empty .msg .xbtn come from base.css. Monochrome: colour only
   where it means something — ok for a proven route, warn for one not proven
   yet, bad for one that failed. A signed-in page is drawn dashed, not tinted. */

.know-frame{display:flex;flex:1;min-height:0;min-width:0}
.know-list{width:var(--roster);flex:none;overflow-y:auto;min-height:0;padding:12px 8px 16px;
  border-right:1px solid var(--line);background:color-mix(in srgb,var(--card) 35%,transparent);
  display:flex;flex-direction:column;gap:6px}
.know-list>.empty{padding:var(--s-xxl) 8px;margin:0}
.know-list>.hint{margin:10px 6px 0}
.know-find{flex:none;height:32px;margin:0 0 4px;font-size:13px}
.know-rows{display:flex;flex-direction:column;gap:1px}
.know-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-row);
  background:none;color:inherit;text-align:left;cursor:pointer;font-family:inherit}
.know-row:hover{background:var(--card)}
.know-row[aria-current="true"]{background:var(--card2)}
.know-row:focus-visible{outline:2px solid var(--line2);outline-offset:-2px}
.know-all{margin-bottom:6px}
.know-ico{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:6px;background:var(--card);color:var(--muted)}
.know-rowtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.know-host{font-size:13.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.know-sub{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.know-none{font-size:12.5px;color:var(--faint);padding:8px 10px;line-height:1.45}

/* the little discs: filled = pages, hollow = notes or routes only, green = a proven route */
.know-dot{flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted);background:transparent;box-sizing:border-box}
.know-dot[data-kind="pages"]{background:var(--muted);border-color:var(--muted)}
.know-dot[data-kind="ok"]{background:var(--muted);border-color:var(--ok);box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 22%,transparent)}
.know-dot[data-kind="look"]{background:transparent;border-color:var(--muted)}
.know-dot[data-kind="private"]{background:transparent;border:1.5px dashed var(--text)}
.know-dot[data-kind="hop"]{width:18px;height:0;border-radius:0;border:0;border-top:1.5px solid var(--muted)}

.know-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.know-main>.empty{padding-top:96px}
.know-main>.empty .btn{margin-top:14px}
.know-scroll{flex:1;min-height:0;overflow-y:auto;padding:20px 28px 48px;scrollbar-gutter:stable}
.know-sitehead{max-width:980px;display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.know-titlerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.know-title{margin:0;font-size:20px;font-weight:600;letter-spacing:-.2px;text-wrap:balance;overflow-wrap:anywhere}
.know-lede{margin:0;color:var(--muted);font-size:13.5px;max-width:68ch;line-height:1.5}
.know-chips{display:flex;flex-wrap:wrap;gap:6px}
.know-chips .chip{font-size:12px}
.know-frame .chip[data-kind]{border:1px solid var(--line)}
.know-frame .chip[data-kind="ok"]{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.know-frame .chip[data-kind="warn"]{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.know-frame .chip[data-kind="bad"]{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.know-frame .chip[data-kind="private"]{border:1px dashed var(--muted);color:var(--text)}

.know-sec{max-width:1180px;margin:0 0 26px}
.know-h{margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.know-sec>.hint{margin:-4px 0 10px}

/* ---------------------------------------------------------------- the canvases */
.know-canvas{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--card) 40%,transparent);overflow:hidden;min-width:0;
  touch-action:none;cursor:grab}
.know-canvas:focus-visible{outline:2px solid var(--line2);outline-offset:-2px}
.know-canvas.is-panning{cursor:grabbing}
.know-atlas{max-width:1180px;height:min(68vh,620px)}
.know-svg{display:block;width:100%;height:100%}
/* the little bar in the corner of a map */
.know-maptools{position:absolute;right:8px;top:8px;display:flex;gap:4px;z-index:2}
.know-zoom{height:26px;min-width:26px;padding:0 8px;border:1px solid var(--line2);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--bg) 78%,transparent);color:var(--muted);font-size:12px;line-height:1;
  cursor:pointer;font-family:inherit}
.know-zoom:hover{color:var(--text);background:var(--card2)}
.know-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 2px 0;font-size:12px;color:var(--faint)}
.know-leg{display:inline-flex;align-items:center;gap:7px}

.know-svg .know-fam{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.know-svg .know-hop{fill:none;stroke:var(--muted);stroke-width:1.4;opacity:.8}
.know-svg .know-redirect{stroke-dasharray:4 3}
.know-svg .know-arrowhead{fill:var(--muted)}
.know-svg .know-arrowhead-route{fill:var(--text)}
.know-svg .know-branch{fill:none;stroke:var(--line2);stroke-width:1}

.know-node{cursor:pointer;outline:none}
.know-node .know-disc{fill:var(--card2);stroke:var(--line2);stroke-width:1.2;transition:fill .15s,stroke .15s}
.know-node[data-kind="pages"] .know-disc,.know-node[data-kind="ok"] .know-disc{fill:color-mix(in srgb,var(--muted) 55%,var(--card2));stroke:var(--muted)}
.know-node .know-ring{fill:none;stroke:var(--ok);stroke-width:1.6}
.know-node .know-label{fill:var(--muted);font-size:11.5px;text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.know-node:hover .know-disc,.know-node:focus-visible .know-disc{fill:var(--text);stroke:var(--text)}
.know-node:hover .know-label,.know-node:focus-visible .know-label{fill:var(--text)}

.know-maprow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:stretch;height:min(62vh,560px)}
.know-tree{height:100%}
.know-page{outline:none}
.know-page[role="button"]{cursor:pointer}
.know-page .know-disc{fill:var(--muted);stroke:var(--muted);stroke-width:1.4}
.know-page[data-kind="look"] .know-disc{fill:var(--bg)}
.know-page[data-kind="private"] .know-disc{fill:var(--bg);stroke:var(--text);stroke-dasharray:2.2 1.8}
.know-page[data-kind="folder"] .know-disc{fill:var(--line2);stroke:none}
.know-page .know-sel{fill:none;stroke:transparent;stroke-width:1.4}
.know-page[aria-current="true"] .know-sel,.know-page:focus-visible .know-sel{stroke:var(--text)}
.know-page[aria-current="true"] .know-disc{fill:var(--text);stroke:var(--text)}
.know-page[data-route="ok"] .know-sel{stroke:var(--ok)}
.know-page[data-route="warn"] .know-sel{stroke:var(--warn)}
.know-page[data-route="bad"] .know-sel{stroke:var(--bad)}
.know-page .know-seg{fill:var(--text);font-size:12px;paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.know-page[data-kind="folder"] .know-seg{fill:var(--faint)}
.know-page .know-ptitle{fill:var(--faint);font-size:10.5px;paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.know-page:hover .know-seg{text-decoration:underline}
.know-page .know-step{fill:var(--text);font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}
.know-svg .know-route{fill:none;stroke-width:2;stroke:var(--text)}
.know-svg .know-route[data-kind="ok"]{stroke:var(--ok)}
.know-svg .know-route[data-kind="warn"]{stroke:var(--warn)}
.know-svg .know-route[data-kind="bad"]{stroke:var(--bad)}

/* the card of the page picked */
.know-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:14px 14px 16px;
  display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;overflow-y:auto}
.know-card-empty{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.know-card-head{display:flex;align-items:flex-start;gap:8px}
.know-card-title{flex:1;min-width:0;font-size:14.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.know-url{font-size:12px;color:var(--muted);overflow-wrap:anywhere;text-decoration:none}
.know-url:hover{color:var(--text);text-decoration:underline}
.know-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--faint);overflow-wrap:anywhere}
button.know-path{background:none;border:0;padding:0;cursor:pointer;text-align:left}
button.know-path:hover{color:var(--text);text-decoration:underline}
.know-facts{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.know-h1{margin:0;font-size:12.5px;color:var(--muted)}
.know-k{margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.know-ctl{display:flex;flex-wrap:wrap;gap:4px}
.know-ctl .chip{font-size:11.5px;height:22px}
.know-more{font-size:11.5px;color:var(--faint);align-self:center}
.know-leads{display:flex;flex-direction:column;gap:1px}
.know-lead{display:flex;align-items:baseline;gap:8px;padding:4px 6px;margin:0 -6px;border:0;border-radius:6px;background:none;
  color:inherit;text-align:left;font-family:inherit;font-size:12.5px;min-width:0}
button.know-lead{cursor:pointer}
button.know-lead:hover{background:var(--card2)}
.know-lead>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.know-lead>i{font-style:normal;font-size:11px;color:var(--faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
.know-went{font-size:12.5px;color:var(--muted);line-height:1.45}
.know-mini{display:flex;align-items:baseline;gap:8px;width:100%;padding:5px 6px;margin:0 -6px;border:0;border-radius:6px;background:none;
  color:var(--text);text-align:left;cursor:pointer;font-family:inherit;font-size:12.5px}
.know-mini:hover{background:var(--card2)}
.know-mini>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.know-mini>i{font-style:normal;font-size:11px;color:var(--faint);white-space:nowrap}

/* ---------------------------------------------------------------- routes */
.know-route-row{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:8px;background:color-mix(in srgb,var(--card) 50%,transparent)}
.know-route-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:0;background:none;color:inherit;
  font-family:inherit;text-align:left;cursor:pointer;border-radius:var(--r-md);flex-wrap:wrap}
.know-route-head:hover{background:var(--card)}
.know-route-head>svg{flex:none;color:var(--faint);transition:transform .15s}
.know-route-name{font-size:13.5px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.know-route-head .chip{height:22px;font-size:11.5px}
.know-route-meta{margin-left:auto;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.know-route-body{padding:2px 14px 14px 33px}
.know-params{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:10px}
.know-params .know-k{margin:0 4px 0 0}
.know-params .chip{height:22px;font-size:11.5px}
.know-flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;counter-reset:step}
.know-stepbox{position:relative;counter-increment:step;display:flex;flex-direction:column;gap:2px;min-width:0;max-width:260px;
  padding:7px 10px 8px 30px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.know-stepbox::before{content:counter(step);position:absolute;left:9px;top:8px;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.know-stepbox:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;width:12px;height:1px;background:var(--line2)}
.know-do{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.know-what{font-size:12.5px;color:var(--text);overflow-wrap:anywhere}

/* ---------------------------------------------------------------- pop-ups and notes */
.know-pop{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.know-pop:last-child{border-bottom:0}
.know-pop-what{color:var(--text);min-width:0;overflow-wrap:anywhere}
.know-pop-how{color:var(--muted)}
.know-pop-how b{font-weight:500;color:var(--text)}
.know-pop .know-path{margin-left:auto}
.know-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:78ch}
.know-notes li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.5;color:var(--muted)}
.know-note{color:var(--text);overflow-wrap:anywhere;white-space:pre-line}
.know-date{color:var(--faint);font-variant-numeric:tabular-nums;font-size:12px;padding-top:1px}

@media (max-width: 980px){
  .know-maprow{grid-template-columns:minmax(0,1fr);height:auto}
  .know-tree{height:min(58vh,440px)}
  .know-atlas{height:min(58vh,440px)}
  .know-card{max-height:none}
}
@media (max-width: 720px){
  .know-frame{flex-direction:column}
  .know-list{width:auto;max-height:38vh;border-right:0;border-bottom:1px solid var(--line)}
  .know-scroll{padding:16px 16px 40px}
  .know-notes li{grid-template-columns:minmax(0,1fr)}
  .know-route-meta{margin-left:0;width:100%}
  .know-route-body{padding-left:14px}
}
/* below 600 px the page takes the whole width and the rail is a menu over it (employee.css does the same for Employees) */
@media (max-width:599px){
  .app:has(.know-frame){grid-template-columns:minmax(0,1fr)}
  .app:has(.know-frame)>aside#rail{position:fixed;z-index:60;top:0;bottom:0;left:0;width:min(var(--rail),86vw);transform:translateX(-100%);visibility:hidden;
    transition:transform .2s ease-in,visibility 0s linear .2s}
  .app[data-emp-rail="open"]:has(.know-frame)>aside#rail{transform:none;visibility:visible;transition:transform .24s ease-out;
    box-shadow:0 0 0 100vmax color-mix(in srgb,var(--bg) 70%,transparent)}
  .page-head.know-head .page-title-row:has(>#emp-head-lead>.emp-railbtn){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:6px;align-content:center}
  .page-head.know-head #emp-head-lead:has(>.emp-railbtn){grid-row:1/span 2}
  .page-head.know-head .head-tools .btn:first-child{display:none}
}
@media (prefers-reduced-motion: reduce){
  .know-node .know-disc,.know-route-head>svg{transition:none}
}