/* Console navigation — services bar, Services mega-menu, favorites bar, home directory.
   Loaded after styles.css/pro-theme.css. Replaces the left sidebar with an AWS-style
   top console. Works in the light (pro) and dark themes. */
:root{
  /* Console chrome is derived from the page's own palette so the bar always
     matches the content below it — in every theme (dark, light, pro-light,
     pro-dark). No hardcoded navy: the toolbar reads as an elevated surface of
     the same UI, and its accent is the page accent. */
  --con-bar:var(--card2);
  --con-bar-2:color-mix(in srgb,var(--txt) 7%,var(--card2));
  --con-bar-line:var(--line);
  --con-bar-txt:var(--txt); --con-bar-mut:var(--mut); --con-acc:var(--acc);
  --con-h1:48px; --con-h2:38px;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* group accent colours (dots + left borders) */
.svc-dot{width:8px;height:8px;border-radius:2px;flex:none;background:var(--gc,#8aa0c0);display:inline-block}
[data-color=blue]{--gc:#3b82f6}[data-color=red]{--gc:#ef4444}[data-color=cyan]{--gc:#06b6d4}
[data-color=purple]{--gc:#a855f7}[data-color=green]{--gc:#22c55e}[data-color=orange]{--gc:#f97316}
[data-color=teal]{--gc:#14b8a6}[data-color=yellow]{--gc:#eab308}[data-color=indigo]{--gc:#6366f1}
[data-color=violet]{--gc:#8b5cf6}[data-color=emerald]{--gc:#10b981}[data-color=rose]{--gc:#f43f5e}
[data-color=slate]{--gc:#64748b}

/* ---- shell: stack the console bar above a full-width main ---- */
body.app .hamburger{display:none!important}
body.app .app-shell{display:flex;flex-direction:column;min-height:calc(100vh - var(--topbar-h))}
body.app .app-shell.no-sidebar>.con-wrap{display:block}
body.app #view{max-width:none!important;padding:0!important;margin:0!important}
body.app .app-main{flex:1;min-width:0;padding:20px 26px;z-index:0}
body.app .app-main::before{inset:0!important}
.con-wrap{position:relative;z-index:40}

/* ---- top bars ---- */
.con-top{position:sticky;top:var(--topbar-h);z-index:50}
/* No divider strip between the header and the Services bar: they read as one
   continuous console header, not two stacked bars. */
.con-bar{display:flex;align-items:center;gap:10px;height:var(--con-h1);padding:0 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--con-acc) 5%,var(--con-bar)),var(--con-bar));color:var(--con-bar-txt);border-bottom:1px solid var(--con-bar-line)}
.con-services{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;background:transparent;border:1px solid transparent;border-radius:3px;color:var(--con-bar-txt);font-family:inherit;font-weight:700;font-size:.88rem;cursor:pointer;flex:none}
.con-services:hover,.con-services[aria-expanded=true]{background:var(--con-bar-2);border-color:var(--con-bar-line)}
.con-services[aria-expanded=true] .con-caret{transform:rotate(180deg)}
.con-caret{font-size:.7rem;color:var(--con-bar-mut);transition:transform .15s}
.con-svc-count{font-family:var(--font-mono);font-weight:700;font-size:.62rem;line-height:1;color:var(--con-acc);background:color-mix(in srgb,var(--con-acc) 15%,transparent);border:1px solid color-mix(in srgb,var(--con-acc) 35%,transparent);border-radius:10px;padding:2px 6px}
.con-grid-ic{width:14px;height:14px;flex:none;background:
  linear-gradient(var(--con-acc),var(--con-acc)) 0 0/6px 6px no-repeat,
  linear-gradient(var(--con-bar-txt),var(--con-bar-txt)) 100% 0/6px 6px no-repeat,
  linear-gradient(var(--con-bar-txt),var(--con-bar-txt)) 0 100%/6px 6px no-repeat,
  linear-gradient(var(--con-bar-txt),var(--con-bar-txt)) 100% 100%/6px 6px no-repeat}
.con-search{flex:1;max-width:680px;position:relative;display:flex;align-items:center}
.con-search input{width:100%;height:30px;padding:0 34px 0 12px;background:var(--card);border:1px solid var(--con-bar-line);border-radius:3px;color:var(--con-bar-txt);font:inherit;font-size:.84rem;outline:none}
.con-search input::placeholder{color:var(--con-bar-mut)}
.con-search input:focus{border-color:var(--con-acc);box-shadow:0 0 0 1px var(--con-acc)}
.con-search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;align-items:center;line-height:1;font-family:var(--font-mono);font-weight:600;font-size:.7rem;color:var(--con-bar-mut);border:1px solid var(--con-bar-line);border-radius:3px;padding:3px 6px;pointer-events:none}
/* the pro theme gives every label and input margin-bottom:4px (form spacing); the search bar is a label, so
   that margin made it 34px tall and put the "/" hint 2px below the input centre */
html .con-search.con-search,html .con-search input[id]{margin:0 !important}
.con-quick{display:flex;gap:2px;margin-left:auto}
.con-qbtn{background:transparent;border:0;color:var(--con-bar-mut);font-family:inherit;font-weight:500;font-size:.8rem;padding:8px 10px;border-radius:3px;cursor:pointer}
.con-qbtn:hover{color:var(--con-bar-txt);background:var(--con-bar-2)}

.con-favbar{display:flex;align-items:center;gap:6px;height:var(--con-h2);padding:0 16px;background:var(--con-bar-2);border-bottom:1px solid var(--con-bar-line);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.con-favbar::-webkit-scrollbar{display:none}
.con-favlbl{font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--con-acc);flex:none}
.con-reclbl{margin-left:14px;padding-left:14px;border-left:1px solid var(--con-bar-line);color:var(--con-bar-mut)}
.con-favs{display:flex;gap:6px;flex:none}
/* category rail — every category with a live tool count, click to jump into
   that section of the Services menu. Dense but labelled and scrollable. */
.con-catbar{display:flex;align-items:center;gap:8px;height:var(--con-h2);padding:0 16px;background:var(--con-bar);border-bottom:1px solid var(--con-bar-line);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.con-catbar::-webkit-scrollbar{display:none}
.con-cats{display:flex;gap:3px;flex:none}
.con-catchip{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;border-radius:3px;color:var(--con-bar-txt);font-family:inherit;font-weight:600;font-size:.74rem;padding:5px 8px;cursor:pointer;white-space:nowrap}
.con-catchip:hover{background:var(--con-bar-2);border-color:var(--con-bar-line)}
.con-catchip .svc-dot{width:7px;height:7px}
.con-catn{font-family:var(--font-mono);font-weight:700;font-size:.63rem;line-height:1;color:var(--gc,var(--con-acc));background:color-mix(in srgb,var(--gc,var(--con-acc)) 16%,transparent);border-radius:8px;padding:2px 5px}
.con-chip{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid transparent;border-radius:3px;color:var(--con-bar-txt);font-family:inherit;font-weight:500;font-size:.78rem;padding:6px 9px;cursor:pointer;white-space:nowrap}
.con-chip:hover{background:var(--con-bar);border-color:var(--con-bar-line)}
.con-chip.rec{color:var(--con-bar-mut)}
.con-empty{font-size:.76rem;color:var(--con-bar-mut);font-style:italic}

/* badges inside menu/chips */
.svc-badge{display:inline-flex;align-items:center;line-height:1;font-size:.5rem;font-weight:800;letter-spacing:.05em;padding:2px 4px;border-radius:3px;vertical-align:middle}
.svc-badge.live{background:rgba(34,197,94,.18);color:#16a34a}
.svc-badge.ai{background:rgba(139,92,246,.2);color:#8b5cf6}
.svc-badge.beta{background:rgba(234,179,8,.18);color:#b8860b}
.con-chip .svc-badge{font-size:.46rem}

/* ---- Services mega-menu ---- */
.svc-menu{display:none;position:absolute;left:0;right:0;top:calc(var(--con-h1) + var(--con-h2)*2);height:min(660px,calc(100vh - var(--topbar-h) - var(--con-h1) - var(--con-h2)*2 - 20px));z-index:60;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 20px 44px -14px rgba(0,0,0,.5)}
.svc-menu.open{display:block}
.svc-cols{display:grid;grid-template-columns:264px 1fr;height:100%}
.svc-cats{display:flex;flex-direction:column;padding:10px 0;background:var(--card2);border-right:1px solid var(--line);overflow-y:auto}
.svc-cat{display:flex;align-items:center;gap:8px;text-align:left;background:transparent;border:0;border-left:3px solid transparent;color:var(--txt-2);font-family:inherit;font-weight:500;font-size:.84rem;line-height:1.2;padding:8px 14px 8px 15px;cursor:pointer}
.svc-cat .svc-n{margin-left:auto}
.svc-cat:hover{background:var(--card);color:var(--txt)}
.svc-cat.on{background:var(--card);color:var(--txt);font-weight:700;border-left-color:var(--gc,var(--con-acc))}
.svc-cat-div{height:1px;background:var(--line);margin:8px 14px}
.svc-n{font-family:var(--font-mono);font-weight:600;font-size:.66rem;color:var(--mut);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:2px 7px;flex:none}
.svc-pane{overflow-y:auto;padding:16px 24px 26px}
.svc-hint{font-size:.8rem;color:var(--mut);margin-bottom:12px}
.svc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.svc-list .con-chip{color:var(--txt);text-align:left;border-color:var(--line);background:var(--card2);padding:10px 12px;font-size:.84rem}
.svc-list .con-chip:hover{border-color:var(--con-acc);background:var(--card)}
.svc-list .con-empty{color:var(--mut)}
.svc-group{margin-bottom:20px;border-left:2px solid var(--gc,var(--line));padding-left:14px}
.svc-group[hidden],.svc-card[hidden],.svc-groups[hidden],.svc-list[hidden]{display:none}
.svc-menu .svc-gh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-2);margin:0 0 8px}
.svc-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px 10px}
.svc-card{display:flex;align-items:center;border-radius:3px}
.svc-card:hover{background:var(--card2)}
body.app .svc-menu .svc-card .side-item{flex:1;min-width:0;display:flex;align-items:center;gap:6px;text-align:left;background:transparent!important;border:0!important;border-radius:3px!important;color:var(--txt)!important;font-family:inherit;font-weight:500;font-size:.85rem;padding:7px 8px!important;box-shadow:none!important;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto!important;height:auto!important}
body.app .svc-menu .svc-card .side-item::before,body.app .svc-menu .svc-card .side-item::after{display:none!important}
body.app .svc-menu .svc-card .side-item:hover{color:var(--txt)!important;text-decoration:underline}
body.app .svc-menu .svc-card .side-item.active{color:var(--txt)!important;font-weight:700!important}
.svc-star{flex:none;background:transparent;border:0;color:var(--mut);font-size:1rem;line-height:1;padding:6px 8px;cursor:pointer;opacity:.5}
.svc-card:hover .svc-star,.svc-star.on{opacity:1}
.svc-star.on{color:#f5b041}

/* ---- Home: all-services directory ---- */
.con-dir{margin:26px 0 8px}
.con-dir-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.con-dir-h .pg-h2{margin:0}
.con-dir-h .muted{font-size:.8rem}
.con-dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.con-dir-panel{padding:0;overflow:hidden;border-top:2px solid var(--gc,var(--line))}
.con-dir-ph{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--card2);border-bottom:1px solid var(--line);font-size:.85rem}
.con-dir-ph .svc-n{margin-left:auto}
.con-dir-items{display:flex;flex-direction:column;padding:4px 0}
.con-dir-item{display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;border:0;color:var(--txt-2);font-family:inherit;font-weight:500;font-size:.83rem;line-height:1.2;text-align:left;padding:7px 13px;cursor:pointer}
.con-dir-item>span:first-child{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.con-dir-arrow{color:var(--mut);opacity:0;transition:opacity .12s}
.con-dir-item:hover{background:var(--card2);color:var(--txt)}
.con-dir-item:hover .con-dir-arrow{opacity:1}

@media(max-width:720px){
  .con-bar{padding:0 8px;gap:6px}
  .con-services{padding:0 8px}
  .con-quick,.con-search kbd{display:none}
  /* global mobile/touch input min-height (42–44px) made the box taller than the bar and overhang the topbar */
  .con-search input{min-height:0;height:34px;margin:0}
  .con-favbar,.con-catbar{padding:0 8px}
  body.app .app-main{padding:14px}
  .svc-menu{height:calc(100vh - var(--topbar-h) - var(--con-h1) - var(--con-h2)*2)}
  .svc-cols{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .svc-cats{flex-direction:row;overflow-x:auto;padding:6px;border-right:0;border-bottom:1px solid var(--line)}
  .svc-cat{flex:none;border-left:0;border-bottom:3px solid transparent;padding:8px 10px}
  .svc-cat.on{border-bottom-color:var(--gc,var(--con-acc))}
  .svc-cat-div{display:none}
  .svc-pane{padding:12px}
}
@media print{.con-top,.svc-menu{display:none!important}}

/* ================= Mini-tools engine (js/mini-tools.js) ================= */
.mt-shell{width:100%;margin:0 auto;padding:6px 2px 40px}
.mt-head{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.mt-back{background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--txt-2,var(--mut));font:inherit;font-size:.82rem;padding:6px 12px;cursor:pointer}
.mt-back:hover{border-color:var(--acc);color:var(--txt)}
.mt-crumb{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.mt-title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;color:var(--txt)}
.mt-desc{color:var(--mut);font-size:.92rem;margin:0 0 18px;max-width:70ch;line-height:1.5}
/* plain-English help: what it does, when to use it, a worked example */
.mt-about{display:grid;gap:8px;margin:0 0 16px;max-width:78ch}
.mt-about p{margin:0;font-size:.95rem;line-height:1.55;color:var(--txt)}
.mt-about .mt-when{color:var(--mut)}
.mt-k{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
.mt-ex{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px;margin:0 0 18px}
.mt-ex[hidden]{display:none}
.mt-ex-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.mt-ex-head .mt-k{margin:0}
.mt-ex-try{font:inherit;font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:8px;border:1px solid var(--acc);background:transparent;color:var(--acc);cursor:pointer}
.mt-ex-try:hover{background:color-mix(in srgb,var(--acc) 10%,transparent)}
.mt-ex-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:start}
.mt-ex-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:6px 12px;min-width:0;align-content:start}
.mt-ex-row{display:grid;gap:2px;min-width:0}
.mt-ex-l{font-size:.75rem;color:var(--mut)}
.mt-ex-v,.mt-ex-out{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;background:color-mix(in srgb,var(--txt) 5%,transparent);border-radius:6px;padding:5px 8px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:9.5em;overflow:auto;margin:0;color:var(--txt)}
.mt-ex-arrow{align-self:center;font-size:.75rem;font-weight:600;color:var(--mut)}
@media (max-width:640px){.mt-ex-grid{grid-template-columns:minmax(0,1fr)}.mt-ex-arrow{justify-self:start}}
.mt-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;align-items:start}
[data-style=pro] .mt-shell .mt-body{padding:0!important}
@media(max-width:820px){.mt-body{grid-template-columns:minmax(0,1fr)}}
/* the form is a grid, not a capped column: on a wide pane short fields sit side by side
   instead of stretching into one long line; text areas and the run button take a full row */
.mt-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-content:start;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.mt-field{display:flex;flex-direction:column;gap:6px}
.mt-form>:is(.mt-field:not(.mt-field-row),.mt-actions){grid-column:1/-1}
.mt-field-row{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
.mt-field-row .mt-lbl{min-width:96px;flex:none}
.mt-lbl{font-size:.76rem;font-weight:700;color:var(--txt-2,var(--txt));letter-spacing:.02em}
.mt-in{width:100%;background:var(--bg,var(--card2));border:1px solid var(--line);border-radius:9px;color:var(--txt);font:inherit;font-size:.9rem;padding:9px 11px;outline:none;box-sizing:border-box}
.mt-field-row .mt-in{flex:1;min-width:120px;width:auto}
.mt-field-row .mt-sel,.mt-field-row input[type=number].mt-in{flex:0 1 auto;max-width:100%}
.mt-in:focus{border-color:var(--acc);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent)}
.mt-ta{min-height:120px;resize:vertical;font-family:var(--font-mono,ui-monospace,monospace);font-size:.85rem;line-height:1.5}
.mt-sel{cursor:pointer}
.mt-range{padding:0;accent-color:var(--acc)}
.mt-rangev{font-family:var(--font-mono,monospace);font-size:.82rem;color:var(--acc);min-width:2.5ch;text-align:right}
.mt-check{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--txt);cursor:pointer}
.mt-check input{width:16px;height:16px;accent-color:var(--acc)}
.mt-actions{margin-top:2px}
.mt-run{background:var(--acc);color:var(--on-acc,#fff);border:0;border-radius:9px;font:inherit;font-weight:700;font-size:.88rem;padding:10px 18px;cursor:pointer}
.mt-run:hover{background:color-mix(in srgb,var(--acc) 86%,#000)}
.mt-outwrap{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--card2);overflow:hidden;min-height:180px}
.mt-outbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.mt-copy{background:transparent;border:1px solid var(--line);border-radius:7px;color:var(--txt-2,var(--mut));font:inherit;font-size:.72rem;padding:4px 12px;cursor:pointer}
.mt-copy:hover{border-color:var(--acc);color:var(--txt)}
.mt-out{margin:0;padding:14px;font-family:var(--font-mono,ui-monospace,monospace);font-size:.85rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;overflow:auto;flex:1;color:var(--txt)}
.mt-out.err{color:#ef4444}
.mt-empty{color:var(--mut);text-align:center;padding:40px}

/* ---- Toolbox hub ---- */
.mt-hub{width:100%;max-width:1180px;margin:0 auto;padding:20px 2px 48px}
.mt-hub-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.mt-hub-search{margin-bottom:22px}
.mt-hub-search input{width:100%;max-width:520px;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--txt);font:inherit;font-size:.9rem;padding:11px 14px;outline:none;box-sizing:border-box}
.mt-hub-search input:focus{border-color:var(--acc);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent)}
.mt-hub-cat{margin-bottom:26px}
.mt-hub-cat[hidden]{display:none}
.mt-hub-ch{display:flex;align-items:center;gap:9px;font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2,var(--txt));margin:0 0 12px;padding-left:2px;border-left:3px solid var(--gc,var(--acc));padding:2px 0 2px 10px}
.mt-hub-n{font-family:var(--font-mono,monospace);font-weight:700;font-size:.66rem;color:var(--gc,var(--acc));background:color-mix(in srgb,var(--gc,var(--acc)) 15%,transparent);border-radius:9px;padding:2px 7px}
.mt-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.mt-card{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .12s,transform .12s,box-shadow .12s}
.mt-card[hidden]{display:none}
.mt-card:hover{border-color:var(--acc);transform:translateY(-1px);box-shadow:0 6px 18px -10px color-mix(in srgb,var(--acc) 60%,transparent)}
.mt-card-n{font-weight:700;font-size:.9rem;color:var(--txt)}
.mt-card-lead{color:var(--mut);font-weight:600}
.mt-card-d{font-size:.78rem;color:var(--mut);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Quelvra math engine embedded in the console (/math) */
.qv-embed{margin:-4px 0 0;border:1px solid var(--line, rgba(127,127,127,.25));border-radius:14px;overflow:hidden;background:var(--card, transparent)}
.qv-embed iframe{display:block;width:100%;border:0;min-height:420px;background:transparent}
/* plain-English intro above each console section (auth.js renderIntro, section-help.js) */
.sec-intro{max-width:1100px;margin:0 auto 14px;padding:0 2px}
.sec-intro[hidden]{display:none}
.sec-intro-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:12px;padding:12px 14px}
.sec-intro-body{display:grid;gap:8px;min-width:0;flex:1}
.sec-intro-body p{margin:0;font-size:.92rem;line-height:1.55;color:var(--txt);max-width:90ch}
.sec-intro-body .sec-intro-when{color:var(--mut)}
.sec-intro-note{font-size:.82rem !important;color:var(--mut) !important;font-style:italic}
.sec-intro-x,.sec-intro-show{font:inherit;font-size:.78rem;font-weight:600;border:1px solid var(--line);background:transparent;color:var(--mut);border-radius:8px;padding:5px 10px;cursor:pointer;flex:none}
.sec-intro-x:hover,.sec-intro-show:hover{color:var(--txt);border-color:var(--acc)}
.sec-intro-show{margin:0}
@media (max-width:640px){.sec-intro-card{flex-direction:column}.sec-intro-x{align-self:flex-end}}
/* Toolbox: each category shows its first 8 tools until "Show all"; a search shows every hit. */
.mt-hub-body:not(.q) .mt-hub-cat:not(.all) .mt-card:nth-child(n+9){display:none}
.mt-hub-body.q .mt-more{display:none}
.mt-more{margin-left:auto;font-family:inherit;font-weight:600;font-size:.72rem;line-height:1;letter-spacing:0;text-transform:none;color:var(--acc);background:none;border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer}
.mt-more:hover{border-color:var(--acc)}