/* ==========================================================================
   Wiki (wiki.html), after the Notion Help Center.
   Notion's structure, kept: a sticky left sidebar of collapsible categories; a
   centred greeting with a pill search and quick chips; Popular topics as cards;
   Browse by role as small tiles; a learning band; What's new; Still have questions.
   The look is this site's, not Notion's: navy type, the blue accent, Plus Jakarta
   headings, --line borders, the cloud surface and 12px cards.
   Unlike Notion's hub, the answers live on this page, one <details> per question,
   so every link resolves and the search filters real text.
   ========================================================================== */
.wk{display:grid;grid-template-columns:232px minmax(0,1fr);gap:48px;max-width:1180px;margin:0 auto;padding:0 24px}

/* ---- sidebar --------------------------------------------------------------- */
.wk-side{position:sticky;top:72px;align-self:start;max-height:calc(100vh - 72px);overflow-y:auto;padding:28px 0 40px;border-right:1px solid var(--line)}
.wk-side h4{margin:0 0 6px;padding:0 8px;font:600 12px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.wk-side h4+.wk-cats{margin-bottom:24px}
.wk-cats{display:flex;flex-direction:column;padding-right:16px}
.wk-cat>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:6px;list-style:none;cursor:pointer;font:500 15px/24px var(--web);color:var(--mute)}
.wk-cat>summary::-webkit-details-marker{display:none}
.wk-cat>summary:after{content:"";flex:0 0 auto;width:6px;height:6px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);transition:transform .15s ease}
.wk-cat[open]>summary:after{transform:rotate(135deg)}
.wk-cat>summary:hover{background:var(--hover);color:var(--navy)}
.wk-cat>summary:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.wk-cat a{display:block;padding:5px 8px 5px 20px;border-radius:6px;font:400 14px/1.45 var(--web);color:var(--mute)}
.wk-cat a:hover{background:var(--hover);color:var(--navy);text-decoration:none}
.wk-links{margin-bottom:24px}
.wk-links a{display:block;padding:6px 8px;border-radius:6px;font:500 15px/24px var(--web);color:var(--mute)}
.wk-links a:hover{background:var(--hover);color:var(--navy);text-decoration:none}

/* ---- main -------------------------------------------------------------------- */
.wk-main{min-width:0;max-width:820px;width:100%;margin:0 auto;padding:56px 0 96px}
.wk-main h2{margin:0 0 20px;font:700 26px/1.25 var(--display);letter-spacing:-.01em;color:var(--navy)}
.wk-block{margin-top:72px}
.wk-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.wk-head h2{margin:0}

/* hero */
.wk-hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.wk-hero h1{margin:0;font:500 clamp(34px,4.2vw,50px)/1.08 var(--display);letter-spacing:-.02em;color:var(--navy)}
.wk-search{position:relative;width:100%;margin-top:28px}
.wk-search input{width:100%;height:56px;padding:0 24px 0 52px;border:1px solid var(--line);border-radius:6px;background:#fff;
  font:400 16px var(--web);color:var(--ink);box-shadow:0 1px 2px rgba(2,37,79,.04)}
.wk-search input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.wk-search:before{content:"";position:absolute;left:22px;top:50%;width:14px;height:14px;margin-top:-9px;border:2px solid var(--t4);border-radius:50%}
.wk-search:after{content:"";position:absolute;left:36px;top:50%;width:7px;height:2px;margin-top:6px;background:var(--t4);transform:rotate(45deg)}
.wk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.wk-chip{padding:4px 14px;border-radius:6px;background:var(--cloud);border:1px solid var(--line);font:500 14px/20px var(--web);color:var(--navy);cursor:pointer}
.wk-chip:hover{background:var(--hover);text-decoration:none}
.wk-count{min-height:20px;margin:14px 0 0;font:400 14px var(--web);color:var(--t4)}
.wk-search,.wk-chips,.wk-count{display:none}
.js .wk-search{display:block}
.js .wk-chips{display:flex}
.js .wk-count{display:block}

/* popular topics: cards */
.wk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wk-card{display:flex;flex-direction:column;gap:6px;min-height:190px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--cloud);color:inherit;transition:border-color .15s ease,box-shadow .15s ease}
.wk-card:hover{text-decoration:none;border-color:var(--rail);box-shadow:0 10px 24px rgba(2,37,79,.08)}
.wk-card b{font:600 17px/1.35 var(--display);color:var(--navy)}
.wk-card span{font:400 14px/1.5 var(--web);color:var(--mute)}
.wk-card img{width:34px;height:34px;margin-top:auto;align-self:flex-end;opacity:.9}

/* browse by role: tiles */
.wk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wk-tile{display:flex;flex-direction:column;gap:18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--rb);background:#fff;color:var(--navy);font:600 15px var(--web)}
.wk-tile:hover{text-decoration:none;background:var(--cloud)}
.wk-tile i{display:block;width:28px;height:28px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.wk-tile span:after{content:" →"}

/* learning band */
.wk-band{display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;padding:40px;border-radius:8px;background:var(--sky)}
.wk-band h2{font-size:34px;margin-bottom:12px}
.wk-band p{margin:0 0 20px;max-width:46ch;font:400 16px/1.6 var(--web);color:var(--mute)}
.wk-faces{position:relative;width:220px;height:170px}
.wk-faces i{position:absolute;width:64px;height:64px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 4px #fff,0 10px 24px rgba(2,37,79,.14)}
.wk-f1{left:0;top:20px}
.wk-faces .wk-f2{left:78px;top:0;width:76px;height:76px}
.wk-f3{left:150px;top:44px}
.wk-f4{left:40px;top:100px}
.wk-f5{left:118px;top:100px}

/* what's new */
.wk-news{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wk-new{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:inherit}
.wk-new:hover{text-decoration:none;box-shadow:0 10px 24px rgba(2,37,79,.08)}
.wk-art{display:grid;place-items:center;height:170px;background:var(--cloud);border-bottom:1px solid var(--line)}
.wk-art img{width:56px;height:56px}
.wk-new div{padding:18px 20px 22px}
.wk-new b{display:block;margin-bottom:6px;font:600 17px/1.35 var(--display);color:var(--navy)}
.wk-new span{font:400 14px/1.55 var(--web);color:var(--mute)}

/* ---- answers ----------------------------------------------------------------- */
.wk-topic{margin-top:56px}
.wk-topic h2{display:flex;align-items:center;gap:12px}
.wk-topic h2 img{width:28px;height:28px;padding:5px;border-radius:6px;background:var(--sky)}
.wk-q{border-bottom:1px solid var(--line)}
.wk-q:first-of-type{border-top:1px solid var(--line)}
.wk-q>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 4px;list-style:none;cursor:pointer;font:600 16px/1.45 var(--web);color:var(--navy)}
.wk-q>summary::-webkit-details-marker{display:none}
.wk-q>summary:after{content:"";flex:0 0 auto;width:14px;height:14px;background:linear-gradient(var(--blue),var(--blue)) center/14px 2px no-repeat,linear-gradient(var(--blue),var(--blue)) center/2px 14px no-repeat}
.wk-q[open]>summary:after{background:linear-gradient(var(--blue),var(--blue)) center/14px 2px no-repeat}
.wk-q>summary:hover{color:var(--btn)}
.wk-q>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.wk-a{padding:0 4px 20px;font:400 15.5px/1.65 var(--web);color:var(--mute)}
.wk-a p{margin:0 0 10px}
.wk-a p:last-child{margin-bottom:0}
.wk-a b{color:var(--ink);font-weight:600}
.wk-a .wk-path{font:500 13.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--navy);background:var(--cloud);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.wk-hide{display:none}
.wk-none{display:none;padding:28px;border:1px dashed var(--rail);border-radius:var(--r);text-align:center;font:400 15px var(--web);color:var(--mute)}
.wk-none.on{display:block}

/* still have questions */
.wk-help{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wk-help a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);color:inherit}
.wk-help a:hover{text-decoration:none;background:var(--cloud)}
.wk-help b{font:600 16px var(--web);color:var(--navy)}
.wk-help span{font:400 14px var(--web);color:var(--mute)}

@media (max-width:991px){
  .wk{grid-template-columns:1fr;gap:0}
  .wk-side{order:2;position:static;max-height:none;overflow:visible;border-right:0;border-top:1px solid var(--line);padding:32px 0 48px}
  .wk-main{padding-bottom:64px}
  .wk-side h4+.wk-cats{margin-bottom:16px}
  .wk-cats{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding-right:0}
  .wk-links{display:flex;flex-wrap:wrap;gap:4px 16px}
  .wk-main{padding-top:40px}
  .wk-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .wk-cats{grid-template-columns:1fr}
  .wk-tiles{grid-template-columns:1fr 1fr}
  .wk-news,.wk-help{grid-template-columns:1fr}
  .wk-band{grid-template-columns:1fr;padding:32px 24px}
  .wk-faces{display:none}
  .wk-block{margin-top:56px}
}
@media (max-width:479px){
  .wk{padding:0 16px}
  .wk-cards,.wk-tiles{grid-template-columns:1fr}
  .wk-card{min-height:0}
  .wk-search input{height:50px;font-size:15px}
  .wk-band h2{font-size:28px}
}