feat(v1.1.1): per-provider model selector, admin polish, docs layout fix

- Settings → AI provider keys: each provider now has a model selector
  showing all available models ordered most-powerful → least, matching
  the provider's default. Selecting a model saves it as an encrypted
  vault secret (env var override); reverting to the default clears the
  override. Covers all 9 providers including Cloudflare Workers AI,
  Anthropic (Fable 5 → Opus → Sonnet → Haiku), OpenAI, Gemini, Groq,
  DeepSeek, Mistral, Together AI, and Cerebras.

- Admin dashboard: simplified sidebar — replaced heavy glyph system
  with clean 4px dot indicators, tightened padding, stat numbers now
  use monospace 600 instead of large serif (cleaner, less AI-generated
  look), nav brand uses Instrument Serif italic, subtler accent usage.

- /docs: fixed layout sizing — content now respects the same max-width
  as the marketing nav, section headings use Instrument Serif italic,
  ToC is styled as pill links instead of border-left markers, pre/code
  blocks use the correct mono stack, responsive breakpoint at 820px.

Author: r8a5

functions/docs/index.js

@@ -360,39 +360,48 @@ export const onRequestGet = async ({ request }) => {
 <meta name="robots" content="index,follow" />
 <link rel="preload" href="/_fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="/_fonts/instrument-serif-400.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="/_fonts/jetbrains-mono-400.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="/marketing.css" />
 <style>
-  .docs-wrap { max-width: 920px; margin: 0 auto; padding: 48px 24px 96px; }
-  .docs-head { text-align: left; margin-bottom: 32px; }
-  .docs-head h1 { font-size: 44px; line-height: 1.1; margin: 0 0 8px; }
-  .docs-head p { color: var(--ink-dim, #6a7484); font-size: 18px; margin: 0; }
-  .docs-grid { display: grid; grid-template-columns: 220px 1fr; gap: 48px; margin-top: 24px; }
-  .docs-toc { position: sticky; top: 24px; align-self: start; font-size: 13px; }
-  .docs-toc strong { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-dim, #6a7484); display: block; margin-bottom: 12px; }
-  .docs-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
-  .docs-toc a { color: var(--ink); text-decoration: none; border-left: 2px solid var(--line, rgba(0,0,0,0.1)); padding: 2px 10px; display: block; }
-  .docs-toc a:hover { color: var(--accent); border-left-color: var(--accent); }
-  .docs-section { margin-bottom: 56px; scroll-margin-top: 24px; }
-  .docs-section h2 { font-size: 28px; margin: 0 0 16px; display: flex; align-items: baseline; gap: 10px; }
-  .docs-section h2 .anchor { color: var(--ink-dim, #6a7484); text-decoration: none; font-size: 0.6em; opacity: 0; transition: opacity .12s; }
+  /* Docs page uses marketing.css for the nav/footer shell. The docs
+     content area is constrained to match the marketing max-width so
+     the text column aligns with the nav's inner padding. */
+  :root { --docs-max: 1100px; }
+  .docs-wrap { max-width: var(--docs-max); margin: 0 auto; padding: 52px max(28px, calc((100vw - var(--docs-max)) / 2 + 28px)) 96px; }
+  .docs-head { margin-bottom: 36px; }
+  .docs-head h1 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin: 0 0 10px; letter-spacing: -0.015em; }
+  .docs-head p { color: var(--muted, #6a7484); font-size: 17px; margin: 0; max-width: 560px; }
+  .docs-grid { display: grid; grid-template-columns: 200px 1fr; gap: 52px; margin-top: 8px; }
+  .docs-toc { position: sticky; top: 80px; align-self: start; font-size: 13px; }
+  .docs-toc strong { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted, #6a7484); display: block; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; }
+  .docs-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
+  .docs-toc a { color: var(--ink); text-decoration: none; font-size: 13px; padding: 5px 10px; display: block; border-radius: 5px; transition: background .12s, color .12s; }
+  .docs-toc a:hover { background: var(--bg-2, #f0ece4); color: var(--ink); }
+  .docs-section { margin-bottom: 60px; scroll-margin-top: 28px; }
+  .docs-section h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; font-size: 26px; margin: 0 0 16px; display: flex; align-items: baseline; gap: 10px; letter-spacing: -0.01em; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); padding-bottom: 10px; }
+  .docs-section h2 .anchor { color: var(--muted, #999); text-decoration: none; font-size: 14px; font-style: normal; font-family: monospace; opacity: 0; transition: opacity .12s; }
   .docs-section h2:hover .anchor { opacity: 1; }
-  .docs-section h3 { font-size: 18px; margin: 28px 0 10px; }
-  .docs-section p, .docs-section li, .docs-section dd { line-height: 1.6; }
-  .docs-section pre { background: var(--bg-2, #f3f1ec); padding: 14px 16px; border-radius: 8px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
-  .docs-section code { font-size: 0.9em; }
-  .docs-section pre code { background: none; padding: 0; }
+  .docs-section h3 { font-size: 16px; font-weight: 600; margin: 28px 0 8px; letter-spacing: -0.01em; }
+  .docs-section p, .docs-section li, .docs-section dd { line-height: 1.65; font-size: 14.5px; color: var(--ink, #131210); }
+  .docs-section pre { background: var(--bg-2, #f0ece4); padding: 14px 16px; border-radius: 8px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; margin: 12px 0; }
+  .docs-section code { font-size: 0.88em; background: var(--bg-2, #f0ece4); padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; }
+  .docs-section pre code { background: none; padding: 0; font-size: inherit; }
   .docs-section ol, .docs-section ul { padding-left: 22px; }
-  .docs-section dl { margin: 12px 0; }
-  .docs-section dt { font-weight: 600; margin-top: 14px; }
-  .docs-section dd { margin: 4px 0 0; color: var(--ink-dim, #4a5060); }
-  .err-dl dt { font-family: var(--font-mono, monospace); font-size: 13px; }
-  .err-dl dt code { font-size: 1em; }
-  .ref-dl dt { font-family: var(--font-mono, monospace); font-size: 13px; }
-  .lede { font-size: 17px; color: var(--ink-dim, #4a5060); }
-  @media (max-width: 760px) {
-    .docs-grid { grid-template-columns: 1fr; }
-    .docs-toc { position: static; }
-    .docs-head h1 { font-size: 32px; }
+  .docs-section ol li, .docs-section ul li { margin-bottom: 6px; }
+  .docs-section dl { margin: 16px 0; }
+  .docs-section dt { font-weight: 600; margin-top: 16px; }
+  .docs-section dd { margin: 4px 0 0; color: var(--muted, #4a5060); }
+  .err-dl dt, .ref-dl dt { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
+  .err-dl dt code, .ref-dl dt code { font-size: 1em; background: none; padding: 0; }
+  .lede { font-size: 16px; color: var(--muted, #4a5060); }
+  .foot { max-width: var(--docs-max); margin: 0 auto; padding: 28px max(28px, calc((100vw - var(--docs-max)) / 2 + 28px)); font-size: 13px; color: var(--muted, #666); border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
+  .foot a { color: var(--muted, #666); text-decoration: none; }
+  .foot a:hover { color: var(--ink); }
+  @media (max-width: 820px) {
+    .docs-wrap { padding: 36px 20px 80px; }
+    .docs-grid { grid-template-columns: 1fr; gap: 28px; }
+    .docs-toc { position: static; background: var(--bg-2, #f0ece4); padding: 16px; border-radius: 8px; }
+    .docs-head h1 { font-size: 2rem; }
   }
 </style>
 </head>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pages-seo",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": false,
   "license": "MIT",
   "type": "module",

public/admin.css

@@ -191,90 +191,73 @@ a:hover{text-decoration:underline}
 .gate-card .err{margin-top:12px;color:var(--bad);font-size:13px;min-height:18px}
 
 /* ── Dash shell ──────────────────────────────────────────────────── */
-/* Base (mobile/tablet): horizontal top bar. Desktop (≥1001px):
-   fixed left sidebar — see the media query below. Markup is shared;
-   only CSS changes between the two. */
 .dash[hidden]{display:none}
 .topbar{
   position:sticky;top:0;z-index:5;
-  display:flex;align-items:center;gap:18px;
-  padding:14px 24px;
-  background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(8px);
-  border-bottom:1px solid var(--line);
+  display:flex;align-items:center;gap:12px;
+  padding:10px 20px;
+  background:var(--bg);border-bottom:1px solid var(--line);
 }
-.topbar .brand{font-family:var(--mono);font-weight:600;color:var(--accent);letter-spacing:.04em;font-size:14px}
-.topbar .tabs{display:flex;gap:4px;margin-left:24px;flex:1}
+.topbar .brand{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink);font-size:16px;letter-spacing:0;white-space:nowrap}
+.topbar .brand::after{content:" · admin";font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.04em;margin-left:4px}
+.topbar .tabs{display:flex;gap:2px;margin-left:12px;flex:1;overflow-x:auto}
 .topbar .tab{
-  background:transparent;border:1px solid transparent;color:var(--ink-dim);
-  padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;
-  transition:color .15s, background .15s, border-color .15s;
+  background:transparent;border:0;border-bottom:2px solid transparent;color:var(--ink-faint);
+  padding:7px 12px;font-size:13px;cursor:pointer;white-space:nowrap;
+  transition:color .12s, border-color .12s;border-radius:0;
 }
 .topbar .tab:hover{color:var(--ink)}
-.topbar .tab[aria-current="page"]{color:var(--ink);background:var(--bg-soft);border-color:var(--line-2)}
-
+.topbar .tab[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
 
-.pages{max-width:1200px;margin:0 auto;padding:28px 24px 80px}
-.page > .card + .card{margin-top:18px}
-
-/* Desktop: proper dashboard chrome — fixed sidebar, content column. */
-/* Geometric glyph per section — keyed off data-tab so admin.js's
-   markup stays untouched. Sidebar-only: inline glyphs wrap badly in
-   the narrow horizontal top bar. */
-@media (min-width:1001px){
-  .topbar .tab::before{
-    font-family:var(--mono);
-    display:inline-block;width:17px;text-align:center;
-    margin-right:7px;color:var(--ink-faint);
-    transition:color .15s;
-  }
-  .topbar .tab[data-tab="overview"]::before{content:"▤"}
-  .topbar .tab[data-tab="blog"]::before{content:"✎"}
-  .topbar .tab[data-tab="brand"]::before{content:"◈"}
-  .topbar .tab[data-tab="covers"]::before{content:"▣"}
-  .topbar .tab[data-tab="seo"]::before{content:"↗"}
-  .topbar .tab[data-tab="status"]::before{content:"◉"}
-  .topbar .tab[data-tab="settings"]::before{content:"⚙"}
-  .topbar .tab:hover::before,
-  .topbar .tab[aria-current="page"]::before{color:var(--accent)}
-}
+.pages{max-width:1240px;margin:0 auto;padding:28px 24px 80px}
+.page > .card + .card{margin-top:16px}
 
 @media (min-width:1001px){
   .topbar{
-    position:fixed;top:0;left:0;bottom:0;width:238px;
-    flex-direction:column;align-items:stretch;gap:6px;
-    padding:22px 14px 16px;
-    background:var(--bg-soft);backdrop-filter:none;
+    position:fixed;top:0;left:0;bottom:0;width:220px;
+    flex-direction:column;align-items:stretch;gap:4px;
+    padding:20px 12px 14px;
+    background:var(--bg-soft);
     border-bottom:none;border-right:1px solid var(--line);
     overflow-y:auto;
   }
   .topbar .brand{
-    font-size:14px;padding:0 10px 16px;margin-bottom:8px;
-    border-bottom:1px solid var(--line);
+    font-size:17px;padding:2px 8px 18px;margin-bottom:4px;
+    border-bottom:1px solid var(--line);letter-spacing:-0.01em;
   }
-  .topbar .tabs{flex-direction:column;gap:2px;margin-left:0;flex:0 0 auto}
+  .topbar .brand::after{display:block;margin-left:0;margin-top:2px}
+  .topbar .tabs{flex-direction:column;gap:1px;margin-left:0;flex:0 0 auto;overflow:visible}
   .topbar .tab{
     display:flex;align-items:center;width:100%;
-    text-align:left;padding:9px 12px;border-radius:8px;font-size:13.5px;
+    text-align:left;padding:8px 10px;border-radius:6px;font-size:13px;
+    border-bottom:0;
+  }
+  .topbar .tab::before{
+    content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
+    background:var(--ink-faint);margin-right:10px;flex-shrink:0;
+    transition:background .12s;
   }
   .topbar .tab[aria-current="page"]{
-    background:var(--accent-soft);border-color:transparent;
-    box-shadow:inset 2px 0 0 var(--accent);
+    background:var(--accent-soft);color:var(--ink);
   }
+  .topbar .tab[aria-current="page"]::before{background:var(--accent)}
+  .topbar .tab:hover{background:rgba(255,255,255,0.04);color:var(--ink)}
+  :root[data-theme="light"] .topbar .tab:hover{background:rgba(0,0,0,0.04)}
   /* Sub-nav nests under its parent tab as an indented column. */
   .topbar .subtabs{
     flex-direction:column;gap:1px;
     background:transparent;border-bottom:none;
-    padding:2px 0 8px 34px;overflow:visible;
+    padding:2px 0 6px 22px;overflow:visible;
   }
-  .topbar .subtab{text-align:left;padding:6px 10px;font-size:12.5px;border-radius:6px}
+  .topbar .subtab{text-align:left;padding:5px 10px;font-size:12px;border-radius:5px}
   /* Tools pin to the sidebar foot. */
   .topbar .topbar-tools{
-    margin-top:auto;flex-direction:column;align-items:stretch;gap:8px;
-    padding-top:14px;border-top:1px solid var(--line);
+    margin-top:auto;flex-direction:column;align-items:stretch;gap:6px;
+    padding-top:12px;border-top:1px solid var(--line);
   }
-  .topbar .topbar-tools .btn{justify-content:center}
+  .topbar .topbar-tools .btn{justify-content:center;font-size:12px}
   .topbar .version-badge{justify-content:center;margin-right:0}
-  .pages{margin-left:238px;max-width:1140px;padding:34px 40px 90px}
+  .pages{margin-left:220px;padding:32px 36px 90px}
 }
 
 .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px}
@@ -285,13 +268,13 @@ a:hover{text-decoration:underline}
   background:var(--bg-card);
 }
 .card-eyebrow{
-  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
-  color:var(--accent);margin-bottom:8px;
+  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
+  color:var(--ink-faint);margin-bottom:6px;
 }
-.card h2{margin:0 0 6px;font-size:18px;font-weight:600;letter-spacing:-0.01em}
+.card h2{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-0.01em}
 .card > p{margin:0 0 16px;color:var(--ink-dim);font-size:14px}
-.card-stat{font-family:var(--serif);font-size:42px;font-weight:400;color:var(--ink);letter-spacing:-0.01em;line-height:1.05}
-.card-sub{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
+.card-stat{font-family:var(--mono);font-size:38px;font-weight:600;color:var(--ink);letter-spacing:-0.04em;line-height:1}
+.card-sub{font-size:12px;color:var(--ink-faint);margin-top:5px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}
 /* "Stuck? Hand off to an AI" card — slightly tinted so it reads as an
    escape hatch rather than a primary control. */
 .ai-help-card{
@@ -617,6 +600,26 @@ em.optional{font-style:normal;color:var(--ink-faint);font-size:11px;letter-spaci
 .provider-del{color:var(--bad)}
 .provider-del:hover{background:rgba(241,103,103,0.08);border-color:var(--bad)}
 
+/* Model selector row inside a provider card */
+.provider-model-row{
+  display:flex;align-items:center;gap:6px;
+  padding-top:4px;border-top:1px solid var(--line);
+  margin-top:2px;
+}
+.provider-model-label{
+  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
+  text-transform:uppercase;color:var(--ink-faint);
+  flex-shrink:0;
+}
+.provider-model-select{
+  flex:1;padding:5px 8px;
+  background:var(--bg);color:var(--ink);
+  border:1px solid var(--line);border-radius:5px;
+  font:inherit;font-size:12px;
+  min-width:0;
+}
+.provider-model-select:focus{outline:none;border-color:var(--accent)}
+
 .filter-results{margin-top:14px}
 .filter-results h4{font-size:13px;color:var(--ink-dim);margin:0 0 8px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}
 .filter-results ul{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:6px;max-height:280px;overflow:auto;background:var(--bg-soft)}