/* ============================================================================
   POT Portal — Knowledgebase: cinematic, professional, mobile-first redesign.
   Scoped under .pot-kb so it never leaks into other client-area pages.
   Reuses the portal brand tokens (--pot-*) defined in pot-portal.css.
   ========================================================================== */

.pot-kb { --kb-ease: .24s cubic-bezier(.2,.7,.3,1); color: var(--pot-text); }
.pot-kb *, .pot-kb *::before, .pot-kb *::after { box-sizing: border-box; }

/* ----------------------------------------------------------------- hero --- */
.pot-kb-hero {
    position: relative; overflow: hidden;
    border: 1px solid var(--pot-line-2); border-radius: 24px;
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(255,138,0,.16), transparent 55%),
        radial-gradient(120% 160% at 100% 0%, rgba(123,52,214,.18), transparent 55%),
        linear-gradient(160deg, #140b26, #0d0720);
    padding: 54px 40px 48px; margin-bottom: 30px; text-align: center;
}
.pot-kb-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 46px 46px; -webkit-mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%);
    mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent 75%);
}
.pot-kb-hero > * { position: relative; z-index: 1; }
.pot-kb-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace;
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pot-amber);
    border: 1px solid var(--pot-line-2); background: rgba(255,138,0,.07);
    padding: 7px 15px; border-radius: 999px; margin-bottom: 18px;
}
.pot-kb-hero h1 {
    font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 700;
    font-size: clamp(28px, 4vw, 44px); line-height: 1.08; margin: 0 0 12px; color: var(--pot-text);
}
.pot-kb-hero h1 .grad {
    background: var(--pot-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--pot-amber);
}
.pot-kb-hero p { color: var(--pot-dim); font-size: clamp(14px, 1.6vw, 17px); margin: 0 auto 26px; max-width: 560px; }

/* big search */
.pot-kb-search { max-width: 640px; margin: 0 auto; }
.pot-kb-search .input-group, .pot-kb-search .kb-search { position: relative; display: flex; }
.pot-kb-search .form-control {
    height: 60px; background: rgba(7,3,16,.6) !important; border: 1.5px solid var(--pot-line-2) !important;
    border-radius: 999px 0 0 999px !important; color: var(--pot-text) !important; font-size: 16px !important;
    padding: 0 22px 0 54px !important; box-shadow: none !important; transition: border-color var(--kb-ease), background var(--kb-ease);
}
.pot-kb-search .form-control::placeholder { color: var(--pot-faint) !important; }
.pot-kb-search .form-control:focus { border-color: var(--pot-orange) !important; background: rgba(7,3,16,.8) !important; }
.pot-kb-search .input-group::before {
    content: "\f002"; font-family: "Font Awesome 6 Pro","Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--pot-amber); z-index: 3; font-size: 16px;
}
.pot-kb-search .input-group-append { display: flex; }
.pot-kb-search .btn {
    height: 60px; border: none !important; border-radius: 0 999px 999px 0 !important;
    background: var(--pot-grad) !important; color: #3a1d00 !important; font-weight: 700 !important;
    padding: 0 30px !important; font-size: 15px !important; box-shadow: var(--pot-btn-shadow) !important;
    text-shadow: none !important; transition: transform var(--kb-ease);
}
.pot-kb-search .btn:hover { transform: translateY(-1px); }

/* section heading */
.pot-kb-shead { display: flex; align-items: center; gap: 12px; margin: 36px 0 18px; }
.pot-kb-shead .ic {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px;
    background: rgba(255,138,0,.12); border: 1px solid var(--pot-line-2); color: var(--pot-amber); font-size: 16px;
}
.pot-kb-shead h2 { font-family: 'Space Grotesk',sans-serif; font-weight: 600; font-size: 21px; margin: 0; color: var(--pot-text); }
.pot-kb-shead .sub { color: var(--pot-faint); font-size: 13px; margin-inline-start: auto; }

/* ----------------------------------------------------- category grid --- */
.pot-kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.pot-kb-cat {
    position: relative; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
    border: 1px solid var(--pot-line); border-radius: 18px; padding: 22px 22px 20px;
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    text-decoration: none !important; color: inherit; transition: transform var(--kb-ease), border-color var(--kb-ease), box-shadow var(--kb-ease);
}
.pot-kb-cat::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pot-grad);
    opacity: .55; transition: opacity var(--kb-ease);
}
.pot-kb-cat:hover { transform: translateY(-4px); border-color: var(--pot-line-2); box-shadow: 0 20px 44px rgba(0,0,0,.4); }
.pot-kb-cat:hover::before { opacity: 1; }
.pot-kb-cat-ic {
    width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 14px; font-size: 22px;
    color: var(--pot-amber); background: rgba(255,138,0,.12); border: 1px solid var(--pot-line-2); transition: all var(--kb-ease);
}
.pot-kb-cat:hover .pot-kb-cat-ic { background: var(--pot-grad); color: #3a1d00; border-color: transparent; }
.pot-kb-cat h3 { font-family: 'Space Grotesk',sans-serif; font-weight: 600; font-size: 17px; margin: 0; color: var(--pot-text); }
.pot-kb-cat p { color: var(--pot-dim); font-size: 13.5px; line-height: 1.6; margin: 0; flex: 1 1 auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pot-kb-cat-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.pot-kb-count {
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--pot-faint);
    border: 1px solid var(--pot-line-2); border-radius: 999px; padding: 4px 11px;
}
.pot-kb-go { display: inline-flex; align-items: center; gap: 7px; color: var(--pot-orange-bright); font-weight: 600; font-size: 13.5px; }
.pot-kb-cat:hover .pot-kb-go { gap: 11px; }
.pot-kb-go i { transition: transform var(--kb-ease); }

/* ----------------------------------------------------- article rows --- */
.pot-kb-list { display: flex; flex-direction: column; gap: 10px; }
.pot-kb-row {
    display: flex; align-items: center; gap: 15px; text-decoration: none !important; color: inherit;
    border: 1px solid var(--pot-line); border-radius: 14px; padding: 15px 18px;
    background: var(--pot-glass); transition: transform var(--kb-ease), border-color var(--kb-ease), background var(--kb-ease);
}
.pot-kb-row:hover { transform: translateX(4px); border-color: var(--pot-orange); background: linear-gradient(160deg, rgba(255,138,0,.08), rgba(255,138,0,.02)); }
.pot-kb-row-ic {
    width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 11px; font-size: 16px;
    color: var(--pot-amber); background: rgba(255,138,0,.10); border: 1px solid var(--pot-line-2); transition: all var(--kb-ease);
}
.pot-kb-row:hover .pot-kb-row-ic { background: var(--pot-grad); color: #3a1d00; border-color: transparent; }
.pot-kb-row-tx { min-width: 0; flex: 1 1 auto; }
.pot-kb-row-tx strong { display: block; font-weight: 600; font-size: 15px; color: var(--pot-text); margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pot-kb-row-tx small { color: var(--pot-faint); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pot-kb-row > .chev { color: var(--pot-faint); flex: none; transition: transform var(--kb-ease), color var(--kb-ease); }
.pot-kb-row:hover > .chev { color: var(--pot-orange-bright); transform: translateX(3px); }

/* breadcrumb / back / actions */
.pot-kb-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pot-kb-back {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none !important;
    border: 1px solid var(--pot-line-2); border-radius: 999px; padding: 10px 20px;
    color: var(--pot-dim); font-weight: 600; font-size: 14px; background: var(--pot-glass); transition: all var(--kb-ease);
}
.pot-kb-back:hover { color: var(--pot-text); border-color: var(--pot-orange); transform: translateX(-3px); }
.pot-kb-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--pot-faint); margin-bottom: 18px; }
.pot-kb-crumbs a { color: var(--pot-dim); text-decoration: none; }
.pot-kb-crumbs a:hover { color: var(--pot-orange-bright); }
.pot-kb-crumbs i { font-size: 10px; opacity: .6; }

/* =============================================================== article === */
.pot-kb-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--pot-grad); z-index: 1031; transition: width .1s linear; box-shadow: 0 0 10px rgba(255,138,0,.6); }
.pot-kb-article {
    border: 1px solid var(--pot-line-2); border-radius: 20px; padding: 38px 40px;
    background: linear-gradient(160deg, #140b26, #0d0720); margin-bottom: 22px;
}
.pot-kb-article h1 { font-family: 'Space Grotesk',sans-serif; font-weight: 700; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; margin: 0 0 16px; color: var(--pot-text); }
.pot-kb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding-bottom: 20px; border-bottom: 1px solid var(--pot-line); margin-bottom: 26px; }
.pot-kb-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--pot-dim); }
.pot-kb-chip i { color: var(--pot-amber); }
.pot-kb-tag { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
    color: var(--pot-amber); background: rgba(255,138,0,.10); border: 1px solid var(--pot-line-2); border-radius: 999px; padding: 4px 12px; }
.pot-kb-print { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important;
    border: 1px solid var(--pot-line-2); border-radius: 999px; padding: 8px 16px; color: var(--pot-dim); font-size: 13px; background: var(--pot-glass); transition: all var(--kb-ease); }
.pot-kb-print:hover { color: var(--pot-text); border-color: var(--pot-orange); }

/* article body typography */
.pot-kb-body { color: var(--pot-dim); font-size: 16px; line-height: 1.78; }
.pot-kb-body > *:first-child { margin-top: 0; }
.pot-kb-body h2, .pot-kb-body h3, .pot-kb-body h4 { font-family: 'Space Grotesk',sans-serif; color: var(--pot-text); font-weight: 600; line-height: 1.3; margin: 1.7em 0 .6em; scroll-margin-top: 170px; }
.pot-kb-body h2 { font-size: 23px; } .pot-kb-body h3 { font-size: 19px; } .pot-kb-body h4 { font-size: 16.5px; }
.pot-kb-body p { margin: 0 0 1.1em; }
.pot-kb-body a { color: var(--pot-orange-bright); text-decoration: underline; text-underline-offset: 2px; }
.pot-kb-body a:hover { color: var(--pot-amber); }
.pot-kb-body ul, .pot-kb-body ol { margin: 0 0 1.2em; padding-inline-start: 1.4em; }
.pot-kb-body li { margin: .4em 0; }
.pot-kb-body img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--pot-line); margin: 1em 0; }
.pot-kb-body code { font-family: 'JetBrains Mono', monospace; font-size: .88em; background: rgba(255,138,0,.10); color: var(--pot-amber); padding: 2px 7px; border-radius: 6px; }
.pot-kb-body pre { background: #07030f; border: 1px solid var(--pot-line-2); border-radius: 12px; padding: 16px 18px; overflow-x: auto; margin: 0 0 1.2em; }
.pot-kb-body pre code { background: none; color: var(--pot-text); padding: 0; }
.pot-kb-body blockquote { margin: 0 0 1.2em; padding: 12px 20px; border-inline-start: 3px solid var(--pot-orange); background: rgba(255,138,0,.06); border-radius: 0 12px 12px 0; color: var(--pot-dim); }
.pot-kb-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.3em; font-size: 14.5px; display: block; overflow-x: auto; }
.pot-kb-body th, .pot-kb-body td { border: 1px solid var(--pot-line-2); padding: 9px 13px; text-align: start; }
.pot-kb-body th { background: rgba(255,138,0,.08); color: var(--pot-text); font-weight: 600; }
.pot-kb-body hr { border: 0; border-top: 1px solid var(--pot-line); margin: 1.6em 0; }

/* helpful / voting */
.pot-kb-vote { margin-top: 30px; padding: 24px; border: 1px solid var(--pot-line-2); border-radius: 16px;
    background: radial-gradient(120% 120% at 0% 0%, rgba(255,138,0,.10), transparent 60%), var(--pot-glass); text-align: center; }
.pot-kb-vote h4 { font-family: 'Space Grotesk',sans-serif; color: var(--pot-text); font-weight: 600; font-size: 18px; margin: 0 0 16px; }
.pot-kb-vote-btns { display: inline-flex; gap: 12px; }
.pot-kb-vote .btn {
    display: inline-flex; align-items: center; gap: 9px; border-radius: 999px !important; padding: 12px 26px !important;
    border: 1.5px solid var(--pot-line-2) !important; background: var(--pot-glass) !important; color: var(--pot-text) !important;
    font-weight: 600 !important; font-size: 14px !important; cursor: pointer; transition: all var(--kb-ease) !important;
}
.pot-kb-vote .btn:hover { transform: translateY(-2px); }
.pot-kb-vote .btn-yes:hover { border-color: var(--pot-green) !important; color: var(--pot-green) !important; }
.pot-kb-vote .btn-no:hover { border-color: var(--pot-crimson) !important; color: #ffc2cc !important; }

/* related */
.pot-kb-related { margin-bottom: 22px; }

/* back-to-top */
.pot-kb-top { position: fixed; right: 26px; bottom: 26px; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; background: var(--pot-grad); color: #3a1d00; border: none; cursor: pointer;
    box-shadow: var(--pot-btn-shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--kb-ease); z-index: 1029; }
.pot-kb-top.on { opacity: 1; visibility: visible; transform: translateY(0); }

/* reveal on scroll */
.pot-kb-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.pot-kb-reveal.in { opacity: 1; transform: none; }

/* ----------------------------------------------------------- mobile --- */
@media (max-width: 768px) {
    .pot-kb-hero { padding: 38px 20px 34px; border-radius: 18px; }
    .pot-kb-search .btn { padding: 0 18px !important; }
    .pot-kb-article { padding: 26px 20px; border-radius: 16px; }
    .pot-kb-grid { grid-template-columns: 1fr; }
    .pot-kb-meta .pot-kb-print { margin-inline-start: 0; }
    .pot-kb-body { font-size: 15.5px; }
    .pot-kb-top { right: 16px; bottom: 16px; }
}
@media (max-width: 480px) {
    .pot-kb-search .form-control { font-size: 15px !important; padding-left: 46px !important; }
    .pot-kb-search .input-group::before { left: 18px; }
    .pot-kb-vote-btns { flex-direction: column; }
}