/* keel.pub — shared shell + components.
   wifuture.co design tokens (owner direction 2026-08-26). Var names kept
   stable for downstream templates. Page-specific styles stay inline in
   their templates; only the shell and genuinely shared components live here. */

:root {
  --paper: #fbf8f2; --cream: #f4efe6; --sand: #eee3c9;
  --ink: #1c1c1a; --stone: #6b6862; --mist: #b7b2a8;
  --dim: #6b6862; --brand: #e4002b; --rule: #1c1c1a1f;
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Dark mode (owner direction 2026-08-27, website only): dark grey ground,
   orange text. Everything downstream reads the same variables. */
html[data-theme="dark"] {
  --paper: #262624; --cream: #2e2e2b; --sand: #3a3a35;
  --ink: #e8963c; --stone: #c9873a; --mist: #7d6136;
  --dim: #c9873a; --brand: #ff5a70; --rule: #e8963c26;
  color-scheme: dark;
}
/* docs diagrams keep a light plate in dark; the home page recolors its own */
html[data-theme="dark"] .docs figure svg { background: #fbf8f2; border-radius: 0.5rem; }
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--ink);
       background: var(--paper); line-height: 1.55;
       /* sticky footer: short pages pin it to the viewport bottom */
       display: flex; flex-direction: column; min-height: 100vh; }
h1, h2, h3 { letter-spacing: -0.025em; }
header.site { display: flex; gap: 1.2rem; align-items: center;
              padding: 1rem 1.6rem; border-bottom: 1px solid var(--rule); }
footer.site { display: flex; gap: 1.2rem; align-items: baseline;
              padding: 1rem 1.6rem; border-top: 1px solid var(--rule);
              color: var(--mist); font-size: 0.78rem; margin-top: auto;
              letter-spacing: 0.025em; }
footer.site a { color: var(--mist); text-decoration: none;
                transition: color 150ms cubic-bezier(0,0,.2,1); }
footer.site a:hover { color: var(--brand); }
footer.site .foot-admin { margin-left: auto; }
footer.site button.theme { background: none; border: none; padding: 0; cursor: pointer;
  color: var(--mist); font-family: var(--sans); font-size: 0.78rem;
  letter-spacing: 0.025em; transition: color 150ms cubic-bezier(0,0,.2,1); }
footer.site button.theme:hover { color: var(--brand); }
.brand { font-weight: 700; color: var(--ink); letter-spacing: 0.05em;
         font-size: 0.85rem; text-decoration: none; }
.brand b { color: var(--brand); }
nav.site { margin-left: auto; }
nav.site a { margin-left: 1.4rem; color: var(--stone); text-decoration: none;
             font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
             letter-spacing: 0.1em; transition: color 150ms cubic-bezier(0,0,.2,1); }
nav.site a:hover { color: var(--brand); }
.pill { border: 1px solid var(--ink); border-radius: 999px; color: var(--ink);
        padding: 0.35rem 1rem; font-size: 0.72rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;
        transition: all 150ms cubic-bezier(0,0,.2,1); white-space: nowrap; }
.pill:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
main { max-width: 62rem; margin: 0 auto; padding: 2rem 1.6rem 3rem;
       width: 100%; }

/* Soft entrance on load (wifuture.co manner): content fades up gently.
   Pages can stagger their own children with the same keyframes. */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  main { animation: fade-up 600ms cubic-bezier(0,0,.2,1) both; }
}
a { color: var(--brand); }
code { background: var(--cream); padding: 0.05rem 0.35rem;
       border-radius: 0.375rem; font-size: 0.9em; font-family: var(--mono); }

/* Secondary nav — shown under the header when signed in to the Yard. */
.subnav { display: flex; gap: 1.4rem; align-items: center;
          padding: 0.55rem 1.6rem; border-bottom: 1px solid var(--rule);
          background: var(--cream); }
.subnav a { color: var(--stone); text-decoration: none; font-size: 0.72rem;
            font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
            transition: color 150ms cubic-bezier(0,0,.2,1); }
.subnav a:hover, .subnav a.active { color: var(--brand); }
.subnav .subnav-user { margin-left: auto; display: flex; gap: 0.9rem;
                       align-items: center; }
.subnav form { margin: 0; display: inline; }
.subnav button { background: none; border: none; padding: 0; cursor: pointer;
                 color: var(--stone); font-family: var(--sans); font-size: 0.72rem;
                 font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
                 transition: color 150ms cubic-bezier(0,0,.2,1); }
.subnav button:hover { color: var(--brand); }
.avatar { display: inline-flex; align-items: center; justify-content: center;
          width: 1.6rem; height: 1.6rem; border-radius: 50%; color: #fff;
          font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
          text-transform: uppercase; flex: none; }

/* Cards, forms, buttons — shared across Yard pages. */
.p-card { background: var(--cream); border: 1px solid var(--rule); border-radius: 0.75rem;
          padding: 1.1rem 1.3rem; margin: 1.1rem 0;
          transition: background 150ms cubic-bezier(0,0,.2,1); }
.p-card:hover { background: var(--sand); }
.p-card h2 { margin: 0 0 0.4rem; font-size: 1.05rem; letter-spacing: -0.025em; }
.p-meta { color: var(--stone); font-size: 0.85rem; }
.p-form { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.p-form input[type=text] { padding: 0.4rem 0.6rem; border: 1px solid var(--rule);
          border-radius: 0.375rem; font-size: 0.9rem; background: var(--paper);
          font-family: var(--sans); }
.p-btn { background: var(--brand); color: #fff; border: none; border-radius: 0.375rem;
         padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
         font-family: var(--sans); text-decoration: none; display: inline-block;
         transition: opacity 150ms cubic-bezier(0,0,.2,1); }
.p-btn:hover { opacity: 0.85; }
.p-btn.quiet { background: var(--ink); }
a.p-open { color: var(--ink); text-decoration: none; font-weight: 700; }
a.p-open:hover { color: var(--brand); }
a.p-open::after { content: " →"; color: var(--brand); }
.role-badge { display: inline-block; border: 1px solid var(--rule); border-radius: 999px;
              padding: 0.05rem 0.55rem; font-size: 0.68rem; font-weight: 700;
              text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone);
              background: var(--paper); vertical-align: middle; }
.role-badge.admin { color: var(--brand); border-color: var(--brand); }