From 271c5e8f2ae4b299eacf473a3f2ba580bbef5dbb Mon Sep 17 00:00:00 2001
From: Greg Soucy <GREG@COMMANDLAYER.ORG>
Date: Mon, 25 May 2026 22:33:30 -0400
Subject: [PATCH] Polish capabilities page hover and focus interactions

---
 public/capabilities.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/capabilities.html b/public/capabilities.html
index da4d325..8523e99 100644
--- a/public/capabilities.html
+++ b/public/capabilities.html
@@ -10,7 +10,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="/css/site.css" />
-  <style>.brand{gap:0}.brand img{height:68px;width:auto;object-fit:contain}.brand span{display:none}.nav-links a.active{color:var(--text);background:var(--surface)}.capability-intro{max-width:860px;margin:0 auto;color:var(--text-2);font-size:1.05rem;line-height:1.75;text-align:center}.build-panel{margin:34px 0 40px;max-width:980px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 26px rgba(99,91,255,.06)}.build-head{display:flex;justify-content:space-between;gap:14px;align-items:center}.build-head h3{margin:0;font-size:1.05rem}.build-head p{color:var(--text-2);font-size:.92rem}.build-items{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;min-height:34px}.build-empty{color:var(--muted);font-size:.9rem}.build-tag{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700;color:var(--text-2)}.build-tag button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-weight:800}.build-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.clear-plan,.build-action{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;font-weight:700;color:var(--text-2);cursor:pointer;text-decoration:none}.build-action.primary{background:var(--gradient);color:#fff;border-color:rgba(99,91,255,.4)}.export-box{display:none;margin-top:14px;background:#0E1322;color:#E2E8F0;border-radius:14px;border:1px solid rgba(30,41,59,.3);padding:14px;overflow:auto;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:left}.export-box.show{display:block}.steps-grid{margin-top:42px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.step-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(99,91,255,.04)}.step-num{width:34px;height:34px;border-radius:999px;background:rgba(82,152,255,.12);color:var(--purple);display:grid;place-items:center;font-weight:800;margin-bottom:12px}.step-card h3{font-size:1rem;margin-bottom:6px}.step-card p{color:var(--text-2);font-size:.95rem;line-height:1.55}.cap-grid{margin-top:42px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.cap-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(99,91,255,.04)}.cap-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}.cap-title{font-size:1.12rem;font-weight:800;letter-spacing:-.02em}.status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;background:rgba(99,91,255,.08);color:var(--purple);white-space:nowrap}.status.live{background:rgba(5,150,105,.1);color:#059669}.cap-desc{color:var(--text-2);font-size:.96rem;line-height:1.6;margin-bottom:16px}.pill-row{display:flex;gap:8px;flex-wrap:wrap}.cap-pill{display:inline-flex;align-items:center;border:1px solid rgba(15,23,42,.1);background:var(--surface);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:650;color:var(--text-2)}.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.mini-badge{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(82,152,255,.08);color:var(--blue);border:1px solid rgba(82,152,255,.18)}.cap-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.cap-action{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:800;color:var(--text-2);text-decoration:none;cursor:pointer}.cap-action.primary{background:var(--gradient);color:#fff;border-color:rgba(99,91,255,.4)}.cap-action.disabled{opacity:.55;cursor:not-allowed}.model-grid{margin-top:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.model-item{position:relative;border:1px solid rgba(82,152,255,.24);background:linear-gradient(180deg,#F7FBFF 0%,#EFF6FF 100%);border-radius:14px;padding:14px;font-weight:700;color:#1E3A8A;font-size:13px;cursor:help;box-shadow:inset 0 0 0 1px rgba(82,152,255,.08);transition:transform .34s ease,box-shadow .34s ease,border-color .34s ease,color .34s ease,background .34s ease}.model-item:hover,.model-item:focus{transform:translateY(-2px);color:#fff;border-color:rgba(255,255,255,.55);background:linear-gradient(135deg,#5298FF 0%,#635BFF 100%);box-shadow:0 0 0 2px rgba(99,91,255,.18),0 11px 26px rgba(99,91,255,.28),inset 0 0 0 1px rgba(255,255,255,.18);outline:none}.model-item::after{content:attr(data-definition);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(5px);width:min(292px,82vw);background:#0B1E3D;color:#EAF3FF;border:1px solid rgba(96,165,250,.48);border-radius:13px;padding:12px 13px;font-weight:650;font-size:12px;line-height:1.45;opacity:0;pointer-events:none;transition:opacity .34s ease,transform .34s ease;z-index:50;box-shadow:0 0 0 2px rgba(37,99,235,.12),0 14px 34px rgba(15,23,42,.26)}.model-item::before{content:"";position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%) translateY(5px);border:8px solid transparent;border-top-color:#0B1E3D;opacity:0;transition:opacity .34s ease,transform .34s ease;z-index:51;filter:drop-shadow(0 1px 0 rgba(96,165,250,.32))}.model-item:hover::after,.model-item:hover::before,.model-item:focus::after,.model-item:focus::before{opacity:1;transform:translateX(-50%) translateY(0)}.toast{position:fixed;right:18px;bottom:18px;background:#0F172A;color:#fff;padding:12px 14px;border-radius:12px;font-weight:700;font-size:13px;opacity:0;transform:translateY(8px);transition:.2s;z-index:999}.toast.show{opacity:1;transform:translateY(0)}footer{border-top:1px solid var(--border);background:#fff}.footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:36px 0}.footer-grid h4{font-size:14px;margin-bottom:10px}.footer-grid a{display:block;color:var(--text-2);margin:8px 0;font-size:14px}@media(max-width:900px){.steps-grid,.cap-grid,.model-grid,.footer-grid{grid-template-columns:1fr}.cap-head,.build-head{flex-direction:column;align-items:flex-start}.hero{padding:72px 0 64px}.model-item::after{left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(5px);width:min(292px,92vw)}.model-item::before{left:50%;transform:translateX(-50%) translateY(5px)}.model-item:hover::after,.model-item:focus::after,.model-item:hover::before,.model-item:focus::before{transform:translateX(-50%) translateY(0)}}.nav-links a:hover,.nav-drop:hover>a,.nav-drop:focus-within>a,.nav-drop>a.active{color:var(--text);background:var(--surface)}.nav-drop{position:relative}.nav-drop>a{display:inline-flex;align-items:center;gap:4px}.nav-drop-menu{position:absolute;top:calc(100% - 1px);left:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 34px rgba(15,23,42,.12);padding:8px;display:none;min-width:260px;z-index:200}.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}.nav-drop-menu a{display:block;white-space:nowrap}.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:grid}@media(max-width:900px){.nav-drop{width:100%}.nav-drop-menu{position:static;display:grid;margin-top:2px;min-width:0;box-shadow:none}}.verb-modal{position:fixed;inset:0;background:rgba(15,23,42,.46);display:none;align-items:center;justify-content:center;padding:18px;z-index:1200}.verb-modal.show{display:flex}.verb-panel{width:min(520px,100%);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 22px 46px rgba(15,23,42,.24);padding:16px 16px 14px}.verb-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}.verb-title{margin:0;font-size:1.02rem;letter-spacing:-.01em}.verb-meta{margin:2px 0 0;color:var(--text-2);font-size:.88rem}.verb-close{border:1px solid var(--border);background:#fff;border-radius:10px;padding:6px 10px;font-weight:800;cursor:pointer}.verb-desc{margin:0 0 12px;color:var(--text-2);font-size:.92rem;line-height:1.55}.verb-actions{display:flex;gap:8px;flex-wrap:wrap}.verb-note{font-size:.88rem;color:var(--muted);margin-top:8px}.cap-pill{cursor:pointer}.cap-pill:focus{outline:2px solid rgba(99,91,255,.45);outline-offset:2px}</style>
+  <style>.brand{gap:0}.brand img{height:68px;width:auto;object-fit:contain}.brand span{display:none}.nav-links a.active{color:var(--text);background:var(--surface)}.capability-intro{max-width:860px;margin:0 auto;color:var(--text-2);font-size:1.05rem;line-height:1.75;text-align:center}.build-panel{margin:34px 0 40px;max-width:980px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 26px rgba(99,91,255,.06)}.build-head{display:flex;justify-content:space-between;gap:14px;align-items:center}.build-head h3{margin:0;font-size:1.05rem}.build-head p{color:var(--text-2);font-size:.92rem}.build-items{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;min-height:34px}.build-empty{color:var(--muted);font-size:.9rem}.build-tag{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700;color:var(--text-2)}.build-tag button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-weight:800}.build-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.clear-plan,.build-action{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;font-weight:700;color:var(--text-2);cursor:pointer;text-decoration:none}.build-action.primary{background:var(--gradient);color:#fff;border-color:rgba(99,91,255,.4)}.export-box{display:none;margin-top:14px;background:#0E1322;color:#E2E8F0;border-radius:14px;border:1px solid rgba(30,41,59,.3);padding:14px;overflow:auto;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:left}.export-box.show{display:block}.steps-grid{margin-top:42px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.step-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(99,91,255,.04)}.step-num{width:34px;height:34px;border-radius:999px;background:rgba(82,152,255,.12);color:var(--purple);display:grid;place-items:center;font-weight:800;margin-bottom:12px}.step-card h3{font-size:1rem;margin-bottom:6px}.step-card p{color:var(--text-2);font-size:.95rem;line-height:1.55}.cap-grid{margin-top:42px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.cap-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(99,91,255,.04)}.cap-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}.cap-title{font-size:1.12rem;font-weight:800;letter-spacing:-.02em}.status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;background:rgba(99,91,255,.08);color:var(--purple);white-space:nowrap}.status.live{background:rgba(5,150,105,.1);color:#059669}.cap-desc{color:var(--text-2);font-size:.96rem;line-height:1.6;margin-bottom:16px}.pill-row{display:flex;gap:8px;flex-wrap:wrap}.cap-pill{display:inline-flex;align-items:center;border:1px solid rgba(15,23,42,.1);background:var(--surface);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:650;color:var(--text-2)}.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.mini-badge{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(82,152,255,.08);color:var(--blue);border:1px solid rgba(82,152,255,.18)}.cap-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.cap-action{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:800;color:var(--text-2);text-decoration:none;cursor:pointer}.cap-action.primary{background:var(--gradient);color:#fff;border-color:rgba(99,91,255,.4)}.cap-action.disabled{opacity:.55;cursor:not-allowed}.model-grid{margin-top:34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.model-item{position:relative;border:1px solid rgba(82,152,255,.24);background:linear-gradient(180deg,#F7FBFF 0%,#EFF6FF 100%);border-radius:14px;padding:14px;font-weight:700;color:#1E3A8A;font-size:13px;cursor:help;box-shadow:inset 0 0 0 1px rgba(82,152,255,.08);transition:transform .34s ease,box-shadow .34s ease,border-color .34s ease,color .34s ease,background .34s ease}.model-item:hover,.model-item:focus{transform:translateY(-2px);color:#fff;border-color:rgba(255,255,255,.55);background:linear-gradient(135deg,#5298FF 0%,#635BFF 100%);box-shadow:0 0 0 2px rgba(99,91,255,.18),0 11px 26px rgba(99,91,255,.28),inset 0 0 0 1px rgba(255,255,255,.18);outline:none}.model-item::after{content:attr(data-definition);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(5px);width:min(292px,82vw);background:#0B1E3D;color:#EAF3FF;border:1px solid rgba(96,165,250,.48);border-radius:13px;padding:12px 13px;font-weight:650;font-size:12px;line-height:1.45;opacity:0;pointer-events:none;transition:opacity .34s ease,transform .34s ease;z-index:50;box-shadow:0 0 0 2px rgba(37,99,235,.12),0 14px 34px rgba(15,23,42,.26)}.model-item::before{content:"";position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%) translateY(5px);border:8px solid transparent;border-top-color:#0B1E3D;opacity:0;transition:opacity .34s ease,transform .34s ease;z-index:51;filter:drop-shadow(0 1px 0 rgba(96,165,250,.32))}.model-item:hover::after,.model-item:hover::before,.model-item:focus::after,.model-item:focus::before{opacity:1;transform:translateX(-50%) translateY(0)}.toast{position:fixed;right:18px;bottom:18px;background:#0F172A;color:#fff;padding:12px 14px;border-radius:12px;font-weight:700;font-size:13px;opacity:0;transform:translateY(8px);transition:.2s;z-index:999}.toast.show{opacity:1;transform:translateY(0)}footer{border-top:1px solid var(--border);background:#fff}.footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:36px 0}.footer-grid h4{font-size:14px;margin-bottom:10px}.footer-grid a{display:block;color:var(--text-2);margin:8px 0;font-size:14px}@media(max-width:900px){.steps-grid,.cap-grid,.model-grid,.footer-grid{grid-template-columns:1fr}.cap-head,.build-head{flex-direction:column;align-items:flex-start}.hero{padding:72px 0 64px}.model-item::after{left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(5px);width:min(292px,92vw)}.model-item::before{left:50%;transform:translateX(-50%) translateY(5px)}.model-item:hover::after,.model-item:focus::after,.model-item:hover::before,.model-item:focus::before{transform:translateX(-50%) translateY(0)}}.nav-links a:hover,.nav-drop:hover>a,.nav-drop:focus-within>a,.nav-drop>a.active{color:var(--text);background:var(--surface)}.nav-drop{position:relative}.nav-drop>a{display:inline-flex;align-items:center;gap:4px}.nav-drop-menu{position:absolute;top:calc(100% - 1px);left:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 34px rgba(15,23,42,.12);padding:8px;display:none;min-width:260px;z-index:200}.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}.nav-drop-menu a{display:block;white-space:nowrap}.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:grid}@media(max-width:900px){.nav-drop{width:100%}.nav-drop-menu{position:static;display:grid;margin-top:2px;min-width:0;box-shadow:none}}.verb-modal{position:fixed;inset:0;background:rgba(15,23,42,.46);display:none;align-items:center;justify-content:center;padding:18px;z-index:1200}.verb-modal.show{display:flex}.verb-panel{width:min(520px,100%);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 22px 46px rgba(15,23,42,.24);padding:16px 16px 14px}.verb-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}.verb-title{margin:0;font-size:1.02rem;letter-spacing:-.01em}.verb-meta{margin:2px 0 0;color:var(--text-2);font-size:.88rem}.verb-close{border:1px solid var(--border);background:#fff;border-radius:10px;padding:6px 10px;font-weight:800;cursor:pointer}.verb-desc{margin:0 0 12px;color:var(--text-2);font-size:.92rem;line-height:1.55}.verb-actions{display:flex;gap:8px;flex-wrap:wrap}.verb-note{font-size:.88rem;color:var(--muted);margin-top:8px}.cap-pill{cursor:pointer}.cap-pill:focus{outline:2px solid rgba(99,91,255,.45);outline-offset:2px}:root{--hover-bg:rgba(37,99,235,.06);--hover-border:rgba(37,99,235,.22);--hover-shadow:0 10px 24px rgba(15,23,42,.08);--focus-ring:0 0 0 3px rgba(37,99,235,.22)}.cap-card,.cap-pill,.clear-plan,.build-action,.cap-action,.verb-close,.btn,a.cap-action{transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease,filter .22s ease,opacity .22s ease}.cap-card:focus-within{background:color-mix(in srgb,#fff 92%,var(--hover-bg));border-color:var(--hover-border);box-shadow:var(--hover-shadow);transform:translateY(-2px)}.cap-pill:hover,.cap-pill:focus-visible{background:var(--hover-bg);border-color:var(--hover-border);color:var(--text)}.clear-plan:hover,.clear-plan:focus-visible,.build-action:hover,.build-action:focus-visible,.cap-action:hover,.cap-action:focus-visible,.verb-close:hover,.verb-close:focus-visible,.btn:hover,.btn:focus-visible,.verb-actions .cap-action:hover,.verb-actions .cap-action:focus-visible{border-color:var(--hover-border);box-shadow:var(--hover-shadow);filter:brightness(1.02)}a.cap-action:hover,a.cap-action:focus-visible{background:var(--hover-bg)}.build-action.primary:hover,.build-action.primary:focus-visible,.cap-action.primary:hover,.cap-action.primary:focus-visible,.btn.btn-primary:hover,.btn.btn-primary:focus-visible{filter:brightness(1.05)}.cap-card a:focus-visible,.cap-pill:focus-visible,.clear-plan:focus-visible,.build-action:focus-visible,.cap-action:focus-visible,.verb-close:focus-visible,.btn:focus-visible{outline:2px solid transparent;box-shadow:var(--focus-ring),var(--hover-shadow)}@media (hover:hover) and (pointer:fine){.cap-card:hover{background:color-mix(in srgb,#fff 92%,var(--hover-bg));border-color:var(--hover-border);box-shadow:var(--hover-shadow);transform:translateY(-2px)}.clear-plan:hover,.build-action:hover,.cap-action:hover,.verb-close:hover,.btn:hover{transform:translateY(-1px)}}</style>
 </head>
 <body>
   <nav>