/* ── Site end — the ONE stylesheet for how every page ends (2026-10-04) ──
   Every page on deftbrain.com ends the same way: the page's own content, then
   one band with the ideas box (left) and the newsletter (right), then the
   footer, last.
     • React pages: src/components/SiteEnd.js + Footer.js; public/index.html
       links this file.
     • Static pages: getSiteEndHTML() + getSiteFooterBar() in
       src/seo/chrome.js; public/guides/guide.css @imports this file.
   Footer links come from src/data/siteNav.json. Colors follow
   html[data-theme], set the same way on both kinds of page. */

.site-end { --se-bg: #f2ece1; --se-line: #e8e1d5; --se-head: #1a2e44; --se-body: #5a544a; --se-accent: #9a6420;
  --se-input-bg: #ffffff; --se-input-line: #d8d0c2; --se-input-text: #1a2e44; --se-btn: #1a2e44; --se-btn-text: #ffffff; --se-btn-hover: #165b9a;
  background: var(--se-bg); border-top: 1px solid var(--se-line);
  font-family: Inter, -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; }
:root[data-theme="dark"] .site-end { --se-bg: #09090b; --se-line: #27272a; --se-head: #f4f4f5; --se-body: #a1a1aa; --se-accent: #fb923c;
  --se-input-bg: #18181b; --se-input-line: #3f3f46; --se-input-text: #f4f4f5; --se-btn: #2f6fb0; --se-btn-text: #ffffff; --se-btn-hover: #3b82c4; }

.site-end-inner { max-width: 1280px; margin: 0 auto; padding: 28px 16px; display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 640px) { .site-end-inner { padding-inline: 24px; } }
@media (min-width: 900px) { .site-end-inner { grid-template-columns: 1fr 1fr; gap: 48px; } }
@media (min-width: 1024px) { .site-end-inner { padding-inline: 32px; } }

.site-end-part { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.site-end-kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--se-accent); }
.site-end-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--se-body); }
.site-end-text strong { color: var(--se-head); font-weight: 600; }
.site-end-form { display: flex; gap: 8px; margin: 2px 0 0; }
.site-end-form input { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--se-input-line); background: var(--se-input-bg); color: var(--se-input-text); font: inherit; font-size: 14px; outline: none; }
.site-end-form input:focus { border-color: var(--se-accent); }
.site-end-form button { flex-shrink: 0; padding: 9px 20px; border-radius: 8px; border: 0; background: var(--se-btn); color: var(--se-btn-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.site-end-form button:hover { background: var(--se-btn-hover); }
.site-end-form button:disabled { opacity: .6; cursor: default; }
.site-end-msg { margin: 0; min-height: 0; font-size: 14px; font-weight: 500; color: var(--se-head); }
.site-end-msg:empty { display: none; }
.sr-only-se { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* The same look as a boxed card, for IdeaPrompt (src/components/IdeaPrompt.js)
   where a page asks for a missing tool mid-page (search with no match,
   Tool Finder, 404). accent = the 404's promoted gold frame. */
.site-end.site-end-card { border: 1px solid var(--se-line); border-radius: 12px; padding: 18px 20px; text-align: start; }
.site-end.site-end-card--accent { border-color: var(--se-accent); }

/* BusyNotice (src/components/BusyNotice.js): the site-end card, pinned to the
   bottom of the screen while the site is overloaded (surge mode, 2026-10-05). */
.busy-notice { position: fixed; z-index: 60; inset-inline: 12px; bottom: 12px; display: flex; justify-content: center; pointer-events: none; }
.busy-notice .site-end-card { position: relative; width: 100%; max-width: 30rem; padding-inline-end: 40px; box-shadow: 0 10px 30px rgba(20,42,67,.18); pointer-events: auto; }
.busy-notice-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--se-btn-hover); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.busy-notice-close { position: absolute; top: 8px; inset-inline-end: 10px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--se-body); cursor: pointer; }

/* ── Footer bar ── a port of what src/components/Footer.js used to draw
   (max-w-7xl, brand left, links · copyright right, stacked and centered
   below 640px). `footer.site-footer` beats guide.css's generic footer rule. */
footer.site-footer { display: block; padding: 0; margin: 0; }
.site-footer { --sf-bg: #faf8f5; --sf-line: #e8e1d5; --sf-text: #5a544a; --sf-link: #165b9a; --sf-link-hover: #1a2e44; --sf-deft: #165b9a; --sf-brain: #c8872e;
  background: var(--sf-bg); border-top: 1px solid var(--sf-line);
  font-family: Inter, -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; }
:root[data-theme="dark"] .site-footer { --sf-bg: #18181b; --sf-line: #27272a; --sf-text: #a1a1aa; --sf-link: #d4d4d8; --sf-link-hover: #f4f4f5; --sf-deft: #e4e4e7; --sf-brain: #fb923c; }
.site-footer a, .site-footer a * { text-decoration: none !important; }
.site-footer-inner { max-width: 1280px; margin: 0 auto; padding: 32px 16px 24px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 640px) { .site-footer-inner { flex-direction: row; padding-inline: 24px; } }
@media (min-width: 1024px) { .site-footer-inner { padding-inline: 32px; } }
.site-footer-brand { display: flex; align-items: center; gap: 12px; }
.site-footer-brand img { height: 64px; width: auto; object-fit: contain; }
.site-footer-word { font-size: 14px; font-weight: 600; color: var(--sf-deft); }
.site-footer-word span { color: var(--sf-brain); }
.site-footer-end { display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 14px; color: var(--sf-text); }
@media (min-width: 640px) { .site-footer-end { flex-direction: row; } }
.site-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 16px; row-gap: 0; }
.site-footer-nav a { display: inline-block; padding: 6px 0; color: var(--sf-link); transition: color .15s; }
.site-footer-nav a:hover { color: var(--sf-link-hover); text-decoration: underline !important; text-underline-offset: 4px; }
.site-footer-dot { display: none; }
@media (min-width: 640px) { .site-footer-dot { display: inline; } }
.site-footer :is(a, button, input):focus-visible, .site-end :is(a, button, input):focus-visible { outline: 3px solid #165b9a; outline-offset: 3px; }