/* The Templates gallery (templates/galleryview.js): its AI search bar, xMap AI's picks, and the layout pieces it shares
   with the block pages (copied here so the app can load this file without the block pages' page-wide rules). Colours are
   the app's tokens, so the gallery follows dark mode inside the app; the public pages are always light. ASCII only. */
.tg-root .bk-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 8px}
.tg-root .bk-count{font-size:13px;margin-left:auto}
.tg-root .bk-empty{text-align:center;padding:40px 0}
.tg-root .bk-group{margin-top:26px}
.tg-root .bk-gh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.tg-root .bk-gh h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0}
.tg-root .bk-gh .muted{font-size:14px;flex:1 1 320px}
.tg-root .bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.tg-root .tp-card{background:var(--surface)}
.tg-ask{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border:1.5px solid var(--accent);border-radius:var(--r,10px);background:var(--surface);box-shadow:0 6px 24px -12px color-mix(in srgb,var(--accent) 55%,transparent);margin:16px 0 8px}
.tg-ask:focus-within{box-shadow:0 0 0 4px var(--accent-soft)}
.tg-ic{display:flex;color:var(--accent)}
.tg-ic svg{width:20px;height:20px}
.tg-ask input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink);height:44px}
.tg-ask .btn{flex:none;height:44px;border-radius:var(--r,10px);gap:8px}
.tg-under{font-size:13px;margin:0 0 14px}
.tg-ai{padding:18px 18px 20px;margin:0 0 18px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--accent-soft)}
.tg-ai .tp-card{background:var(--surface)}
.tg-ai-head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.tg-ai-head h2{font-size:19px;font-weight:600;margin:0 0 4px;letter-spacing:-.01em}
.tg-ai-head p{margin:0;font-size:14px;max-width:62ch}
.tg-ai-acts{display:flex;gap:8px;flex-wrap:wrap}
.tg-why{display:flex;gap:6px;align-items:flex-start;margin:0;font-size:13px;line-height:1.45;color:var(--accent)}
.tg-why svg{width:14px;height:14px;flex:none;margin-top:2px}
.tg-more{display:flex;justify-content:center;margin-top:18px}
.tg-seeall{margin-left:auto}
.tg-acts{display:flex;gap:6px;margin-left:auto}
.tg-empty-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media (max-width:640px){
  .tg-ask{flex-wrap:wrap;padding:10px}
  .tg-ask input{flex:1 1 calc(100% - 40px);height:44px}
  .tg-ask .btn{width:100%;justify-content:center}
  .tg-root .bk-grid{gap:10px}
  .tg-seeall{margin-left:0}
}

/* the card's buttons sit above its stretched title link, so Use it and Details are clicked, not the card */
.tg-root .tg-acts{position:relative;z-index:2}

/* the Industry and Use case pickers (owner, 2026-10-14): a button that opens a short list with its own search box */
.tg-pick{position:relative}
.tg-pick-btn{display:flex;align-items:center;gap:8px;height:var(--ctl-h,38px);padding:0 12px 0 14px;border:1px solid var(--line);border-radius:var(--r,10px);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;min-width:220px;max-width:340px;text-align:left}
.tg-pick-btn:hover,.tg-pick.open .tg-pick-btn{border-color:var(--accent)}
.tg-pick.set .tg-pick-btn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tg-pick-l{font-size:12px;color:var(--muted);flex:none}
.tg-pick-v{font-weight:500;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-chev{flex:none;width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);color:var(--muted);transition:transform .15s}
.tg-pick.open .tg-chev{transform:translateY(2px) rotate(-135deg)}
.tg-pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:340px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r,10px);box-shadow:0 18px 40px -18px rgba(15,28,63,.35);padding:8px}
.tg-pop-s{display:flex;align-items:center;gap:8px;padding:0 10px;height:40px;border:1px solid var(--line);border-radius:var(--r,10px);margin-bottom:6px;color:var(--muted)}
.tg-pop-s:focus-within{border-color:var(--accent)}
.tg-pop-s svg{width:16px;height:16px;flex:none}
.tg-pop-s input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px;color:var(--ink);height:38px}
.tg-pop-l{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.tg-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;font:inherit;font-size:14px;color:var(--ink);background:none;border:0;border-radius:var(--r,10px);padding:9px 10px;cursor:pointer}
.tg-opt:hover,.tg-opt:focus{background:var(--surface-2);outline:0}
.tg-opt.on{background:var(--accent-soft);color:var(--accent);font-weight:500}
.tg-opt[disabled]{opacity:.45;cursor:default}
.tg-opt em{font:500 12px var(--sans,'Nunito Sans',sans-serif);font-style:normal;color:var(--muted);background:var(--surface-2);border-radius:var(--r,10px);padding:2px 8px;flex:none}
.tg-opt.on em{background:var(--accent);color:#fff}
.tg-pop-none{margin:8px 10px;font-size:14px}
@media (max-width:760px){
  .tg-pick{flex:1 1 100%}
  .tg-pick-btn{width:100%;max-width:none;min-width:0;height:var(--ctl-h,38px)}
  .tg-pop{width:100%;max-width:none}
  .tg-pop-s input{font-size:16px}
  .tg-opt{padding:12px 10px}
}
.tg-root .tg-ind{color:var(--accent);font-weight:500;white-space:nowrap}
.tg-root .tp-foot .tg-acts{margin-left:0}
.ty-cardgo svg{width:14px;height:14px}
.tg-root .tp-foot:has(.tg-acts .ty-cardgo + [data-hire]){flex-wrap:wrap}
.tg-root .tp-foot:has(.tg-acts .ty-cardgo + [data-hire]) .tg-acts{flex:1 1 100%;justify-content:flex-end}