/* KB_NAV2 – navigation redesign (Tools menu, phone tab bar, search palette, My tools, compact category pages).
   Loaded after style.css + ux.css. Logical properties only (RTL-safe). No new colours: brand tokens + each group's colour (--c). */
:root,[style*="--c"]{--kb-tint:color-mix(in srgb,var(--c,#4f46e5) 12%,#fff);--kb-tint2:color-mix(in srgb,var(--c,#4f46e5) 22%,#fff)}
/* ---------- header ---------- */
.nav{background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px);z-index:30}
.nav-in{gap:12px}
.main-nav{justify-content:flex-start;flex:0 1 auto;gap:2px}
.nav-tools{flex:1;justify-content:flex-end}
.nav-tools-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px 0 10px;border:0;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-ink);font:600 .93rem var(--font);cursor:pointer;white-space:nowrap}
.nav-tools-btn:hover,.nav-tools-btn[aria-expanded=true]{background:#e0e7ff}
.nav-tools-btn .chev{transition:transform .18s}.nav-tools-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.nav-tools-btn:focus-visible,.kbm a:focus-visible,.kbm button:focus-visible,.kbt-i:focus-visible,.kb-star:focus-visible,.hub-chips a:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px}
.nav-search{flex:0 1 300px;justify-content:flex-start;min-width:40px;color:var(--muted);background:#f1f5f9;border-color:transparent;border-radius:var(--r-pill);padding:0 8px 0 12px}
.nav-search:hover{background:#e9eef5;border-color:#dbe3ee}
.nav-search .nav-btn-t{flex:1;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
@media (max-width:1040px){.nav-search .nav-btn-t{display:inline}.nav-search .kbd{display:inline}}
@media (min-width:901px){.nav-burger{display:none!important}}
@media (max-width:900px){
  .main-nav,.main-nav.open{display:none!important}
  .nav-search{flex:0 0 auto;background:#fff;border-color:var(--line);padding:0 10px;border-radius:var(--r-sm)}
  .nav-search .nav-btn-t,.nav-search .kbd{display:none}
}
/* ---------- Tools menu: desktop mega-menu, phone sheet ---------- */
.kbm{position:fixed;inset:0;z-index:62;background:rgba(15,23,42,.42);display:flex;justify-content:center;align-items:flex-start;padding:72px 16px 16px;overscroll-behavior:contain}
.kbm-panel{width:min(1080px,100%);max-height:calc(100dvh - 92px);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 60px -20px rgba(15,23,42,.35);padding:18px 20px 16px;overscroll-behavior:contain}
.kbm-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kbm-head h2{font-size:1.15rem;margin:0;flex:1;display:flex;align-items:baseline;gap:8px}
.kbm-total{font-size:.85rem;font-weight:500;color:var(--muted)}
.kbm-search{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#f8fafc;color:var(--muted);font:500 .92rem var(--font);cursor:pointer}
.kbm-x{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#f1f5f9;color:var(--ink);cursor:pointer}
.kbm-x:hover{background:#e2e8f0}
.kbm-sh{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.kbm-mine{margin-bottom:14px}
.kbm-chips{display:flex;flex-wrap:wrap;gap:8px}
.kbm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 14px}
.kbm-g{min-width:0;padding:6px;border-radius:14px}
.kbm-cat{display:flex;align-items:center;gap:10px;padding:6px;border-radius:12px;color:var(--ink);font-weight:700;min-height:44px}
.kbm-cat:hover{background:var(--kb-tint);text-decoration:none}
.kbm-ic{flex:0 0 auto;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#f1f5f9;background:var(--kb-tint2);font-size:1.15rem;line-height:1}
.kbm-name{flex:1;min-width:0;line-height:1.25;overflow-wrap:break-word}
.kbm-n{flex:0 0 auto;font-size:.75rem;font-weight:600;color:var(--muted);background:#f1f5f9;border-radius:var(--r-pill);padding:1px 8px}
.kbm-top{list-style:none;margin:2px 0 0;padding:0 0 0 54px;font-size:.9rem}
[dir=rtl] .kbm-top{padding:0 54px 0 0}
.kbm-top a{display:block;padding:3px 0;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbm-top a:hover{color:var(--brand)}
.kbm-top .kbm-all{color:var(--brand);font-weight:600;font-size:.85rem}
.kbm-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.kbm-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);background:#f8fafc;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.92rem}
.kbm-more a:hover{border-color:#c7d2fe;background:var(--brand-soft);text-decoration:none}
@media (max-width:1000px){.kbm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .kbm{padding:0;align-items:stretch;background:rgba(15,23,42,.3)}
  .kbm-panel{max-height:none;height:100%;border-radius:0;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))}
  .kbm-head{position:sticky;top:-12px;background:#fff;margin:-12px -16px 10px;padding:12px 16px 10px;z-index:1;border-bottom:1px solid #f1f5f9}
  .kbm-search span{display:none}.kbm-search{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .kbm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kbm-g{padding:0;border-radius:16px;background:var(--kb-tint);border:1px solid var(--kb-tint2)}
  .kbm-cat{flex-direction:column;align-items:flex-start;gap:8px;padding:12px;min-height:104px;font-size:.98rem;position:relative}
  .kbm-cat .kbm-ic{background:#fff;width:40px;height:40px}
  .kbm-cat .kbm-n{position:absolute;top:12px;inset-inline-end:12px;background:#fff}
  .kbm-name{font-size:.95rem}
  .kbm-top{display:none}
  .kbm-g:last-child:nth-child(odd){grid-column:1/-1}
  .kbm-g:last-child:nth-child(odd) .kbm-cat{min-height:0;flex-direction:row;align-items:center}
  .kbm-g:last-child:nth-child(odd) .kbm-n{position:static}
  .kbm-more a{flex:1 1 calc(50% - 8px);min-width:0;font-size:.9rem}
}
@media (prefers-reduced-motion:no-preference){.kbm:not([hidden]) .kbm-panel{animation:kbmIn .16s ease-out}}
@keyframes kbmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ---------- My tools chips (menu, palette, home) ---------- */
.mt-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:4px 14px 4px 5px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.92rem}
.mt-chip:hover{border-color:#c7d2fe;background:var(--brand-soft);text-decoration:none}
.mt-chip .badge{min-width:32px;height:32px;border-radius:50%;font-size:.6rem;padding:0 4px}
.mt-chip .mt-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mt-chip .mt-star{color:#d97706;font-size:.85rem}
/* ---------- phone tab bar ---------- */
.kbt{display:none}
@media (max-width:640px){
  :root{--kbt-h:64px} /* KB_TABFIX: tab bar height without the safe area; page padding + camera button use it */
  .kbt{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;inset-inline:0;bottom:0;z-index:57;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));transition:transform .2s ease;box-shadow:0 -6px 20px -14px rgba(15,23,42,.3)}
  .kbt.is-typing{transform:translateY(110%)}
  .kbt-i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:4px 2px;border:0;background:none;border-radius:12px;color:var(--muted);font:600 .7rem/1.15 var(--font);cursor:pointer;text-align:center;min-width:0}
  .kbt-i span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kbt-i:hover{text-decoration:none;color:var(--ink)}
  .kbt-i[aria-current=page],.kbt-i[aria-expanded=true]{color:var(--brand)}
  .kbt-i[aria-current=page] svg,.kbt-i[aria-expanded=true] svg{stroke-width:2.6}
  .kbt-emo{font-size:1.2rem;line-height:22px}
  body.has-kbt{padding-bottom:calc(var(--kbt-h) + env(safe-area-inset-bottom,0px))}
  /* the dark footer reaches down behind the tab bar, so the page padding is never a light strip */
  body.has-kbt .foot{margin-bottom:calc(-1 * (var(--kbt-h) + env(safe-area-inset-bottom,0px)));padding-bottom:calc(20px + var(--kbt-h) + env(safe-area-inset-bottom,0px))}
  /* the tab bar has an "Ask" tab, so the round floating helper button is not needed on phones */
  body.has-kbt.kbt-ask .kb-asst-btn{display:none!important}
  body.has-kbt #kb-consent{bottom:calc(var(--kbt-h) + env(safe-area-inset-bottom,0px))}
  body.modal-open .kbt{display:none}
}
/* ---------- search palette ---------- */
.search-pop{z-index:64}
.search-box{border-radius:20px;padding:10px;box-shadow:0 30px 60px -20px rgba(15,23,42,.4)}
.search-row{border-bottom:1px solid #f1f5f9;margin-bottom:4px}
.sp-empty{padding:4px 6px 8px;overflow:auto;text-align:start}
.sp-sec{margin:10px 0 4px}
.sp-sec h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.sp-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.sp-cats a{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 8px;border-radius:12px;color:var(--ink);font-weight:600;font-size:.9rem;min-width:0}
.sp-cats a:hover{background:var(--kb-tint);text-decoration:none}
.sp-cats .kbm-ic{width:32px;height:32px;border-radius:9px;font-size:1rem}
.sp-cats .sp-l{min-width:0;overflow-wrap:break-word;line-height:1.25}
.sp-tip{font-size:.8rem;color:var(--muted);margin:10px 2px 2px}
.sp-tip .kbd{margin:0 2px}
.search-results li.sr-catrow a{grid-template-areas:"b n g";background:var(--kb-tint)}
.search-results li.sr-catrow .kbm-ic{grid-area:b;width:34px;height:34px;border-radius:9px;font-size:1rem}
@media (max-width:640px){
  .search-pop{padding:0;align-items:stretch;background:#fff}
  .search-box{width:100%;max-height:none;height:100%;border-radius:0;border:0;box-shadow:none;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .search-row .search-input{font-size:1.05rem}
  .search-row [data-search-close]{min-width:44px;min-height:44px}
  .sp-cats{grid-template-columns:1fr 1fr}
  .sp-tip{display:none}
}
/* ---------- home ---------- */
.hero2{padding:36px 0 28px}
.hero2 h1{margin-bottom:.35em}
.hero2 .hero-sub{max-width:640px;margin:0 auto 20px;color:var(--ink-2);font-weight:500;text-align:center}
.hero2 .hero-search .search-input{min-height:56px;font-size:1.1rem;border-radius:18px;border:2px solid #c7d2fe;box-shadow:0 10px 30px -16px rgba(79,70,229,.45)}
.hero2 .hero-search .search-input:focus{border-color:var(--brand)}
.hero-kbd{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);pointer-events:none}
.hero-search:focus-within .hero-kbd{display:none}
@media (max-width:900px){.hero-kbd{display:none}}
.quick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;margin:0 auto 18px;padding:0;list-style:none}
.quick a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:3px 13px 3px 4px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.9rem;white-space:nowrap}
.quick a:hover{border-color:#c7d2fe;background:var(--brand-soft);text-decoration:none}
.quick .badge{min-width:30px;height:30px;border-radius:50%;font-size:.58rem;padding:0 3px}
.hero2 .or-drop{margin:8px 0 10px}
@media (max-width:640px){
  .hero2{padding:22px 0 18px}
  .hero2 h1{font-size:1.7rem}
  .hero2 .hero-sub{font-size:.95rem;margin-bottom:14px}
  .quick{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent)}
  .quick::-webkit-scrollbar{display:none}
  .quick li{flex:0 0 auto}
}
.mine-sec{padding-top:18px;padding-bottom:4px}
.mine-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.mine-head h2{margin:0;font-size:1.2rem;flex:1}
.mine-head .linkish{font-size:.85rem;color:var(--muted)}
#recent-list{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:640px){#recent-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding:2px 20px 6px}#recent-list::-webkit-scrollbar{display:none}#recent-list .mt-chip{flex:0 0 auto;max-width:220px}}
/* category tiles: colour tint + example tools */
.cat-tile{background:var(--kb-tint);border-color:var(--kb-tint2)}
.cat-tile:hover{background:var(--kb-tint2)}
.cat-tile .cat-ic{background:#fff}
.cat-tile[aria-expanded=true]{background:#fff}
.cat-eg{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.8rem;line-height:1.35;color:var(--ink-2);font-weight:400;text-align:start}
@media (max-width:400px){.cat-eg{display:none}}
.about-acc{margin-top:8px}
.about-acc>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-weight:700}
.about-acc>summary::-webkit-details-marker{display:none}
.about-acc>summary::after{content:"";margin-inline-start:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.about-acc[open]>summary::after{transform:rotate(-135deg)}
.about-acc>summary h2{font-size:1.05rem;margin:0}
.about-acc .how,.about-acc .why{padding-top:18px}
/* ---------- category (hub) pages ---------- */
.hub-chips{position:sticky;top:62px;z-index:9;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 20px;margin:0 -20px 6px;background:rgba(248,250,252,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hub-chips::-webkit-scrollbar{display:none}
.hub-chips a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.9rem;white-space:nowrap}
.hub-chips a:hover,.hub-chips a.on{background:var(--ink);border-color:var(--ink);color:#fff;text-decoration:none}
.hub-chips .hc-n{font-size:.75rem;opacity:.7;font-weight:500}
.cat-sub-hub{scroll-margin-top:124px}
.hub-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.hub-list .tile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"b n" "b d";column-gap:12px;row-gap:2px;align-items:center;padding:12px 14px;min-height:72px}
.hub-list .tile .badge{grid-area:b;align-self:center}
.hub-list .tile strong{grid-area:n;font-size:.98rem;line-height:1.25;min-width:0;overflow-wrap:break-word;hyphens:auto}
.hub-list .tile .muted{grid-area:d;font-size:.85rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:900px){.hub-list .tile .muted{-webkit-line-clamp:2}}
@media (max-width:640px){.hub-list{grid-template-columns:1fr;gap:8px}.hub-list .tile{min-height:64px;padding:10px 12px}}
.other-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.other-cats a{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border-radius:14px;background:var(--kb-tint);border:1px solid var(--kb-tint2);color:var(--ink);font-weight:600;min-width:0}
.other-cats a:hover{background:var(--kb-tint2);text-decoration:none}
.other-cats .kbm-ic{background:#fff}
.other-cats .oc-l{flex:1;min-width:0;overflow-wrap:break-word;line-height:1.25}
@media (max-width:640px){.other-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.other-cats a{font-size:.9rem;padding:8px 10px}}
/* ---------- tool page: back + save ---------- */
.tool-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-height:40px}
.tool-top .crumbs{margin:0;flex:1;min-width:0}
.tool-back{display:none;align-items:center;gap:4px;min-height:40px;padding:0 12px 0 8px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.9rem;max-width:70%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tool-back:hover{text-decoration:none;border-color:#c7d2fe}
[dir=rtl] .tool-back svg{transform:scaleX(-1)}
.kb-star{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;margin-inline-start:auto;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--ink-2);font:600 .88rem var(--font);cursor:pointer;white-space:nowrap}
.kb-star:hover{border-color:#fcd34d;background:#fffbeb}
.kb-star[aria-pressed=true]{background:#fffbeb;border-color:#f59e0b;color:#92400e}
.kb-star .st{font-size:1.05rem;line-height:1;color:#d97706}
@media (max-width:640px){
  .tool-top .crumbs{display:none}
  .tool-back{display:inline-flex}
  .kb-star .st-t{display:none}.kb-star{width:44px;height:44px;padding:0;justify-content:center}
}
/* ---------- footer ---------- */
.foot-cats{margin-top:24px}
.foot-cats ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 18px}
.foot-cats li{margin:0}
.foot-cats a{display:flex;align-items:center;gap:10px;min-height:40px;color:#e2e8f0;font-size:.95rem}
.foot-cats .fc-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#1e293b;font-size:.9rem}
.foot-cats .fc-n{margin-inline-start:auto;font-size:.75rem;color:#94a3b8}
/* KB_TABFIX: these links sat inside .foot-cats and got its block/flex style, so each "·" landed alone on its own line */
html{background:#0f172a} /* overscroll past the footer shows the footer colour, not white */
.foot-areas2{margin:12px 0 0;color:#94a3b8;display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-cats .foot-areas2 a{display:inline-flex;align-items:center;min-height:40px;gap:6px;color:#cbd5e1;font-size:.92rem}
.foot-bottom{line-height:2}
.foot-bottom .linkish{padding:0 2px;line-height:inherit;vertical-align:baseline}
.foot-install{margin-top:14px}.foot-install:has(#install-app[hidden]){display:none}
.foot-install .btn{min-height:44px}
@media (max-width:640px){.foot-cats ul{grid-template-columns:1fr}.foot-cats .fc-n{margin-inline-start:6px}}
@media (max-width:640px){.hub-chips{margin-inline:-16px;padding-inline:16px}#recent-list,.quick{margin-inline:-16px;padding-inline:16px}.mine-sec{padding-top:14px}.mine-sec+.cats{padding-top:18px}}