/* FleeceForge chrome: core color tokens. Light is the default; dark applies from the system setting unless the toggle chose light,
   or whenever the toggle chose dark (html[data-theme]). Keep the two dark blocks identical.
   --h* and --fink are the header and footer band, which stays dark in both themes. */
:root{
  color-scheme:light;
  --bg:#f7ecdc;--surface:#fffaf3;--line:#e3cfb3;--ink:#1f1612;--ink-soft:#4f3a2c;
  --accent:#a8410f;--link:#8a3409;--btn:#a8410f;--btn-hover:#8a3409;--on-btn:#fff;--focus:#1f1612;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --hbg:#2a1f19;--hsurface:#3a2c24;--hline:#4a3a2f;--hink:#f7ecdc;--hsoft:#d8c9b6;--hhead:#1f1612;--hrule:#3b2f27;--fink:#d8c9b6;--hlink:#ffb27a;--hfocus:#ffc597;--hfoot:#1f1612;
  --hpeach:#ffb27a;--htag:#e9dccb;
  --flame-ember:#e8743b;--flame-amber:#f2a54a;--flame-light:#ffd09a;--flame-peach:#ffc597;
  --wrap:min(80rem,100% - 2rem);--ff-wrap:min(80rem,100% - 2rem);--radius:1.25rem;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  color-scheme:dark;
  --bg:#1c1714;--surface:#251f1b;--line:#4a3e35;--ink:#efe4d6;--ink-soft:#cdbdab;
  --accent:#e18159;--link:#f3aa86;--btn:#e18159;--btn-hover:#ee966e;--on-btn:#1f1612;--focus:#f7c0a2;
  --hbg:#251f1b;--hsurface:#2f2722;--hline:#4a3e35;--hink:#f7ecdc;--hsoft:#d8c9b6;--hhead:#130f0d;--hrule:#4a3e35;--fink:#d8c9b6;--hlink:#f7c0a2;--hfocus:#f7c0a2;--hfoot:#130f0d;
}}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#1c1714;--surface:#251f1b;--line:#4a3e35;--ink:#efe4d6;--ink-soft:#cdbdab;
  --accent:#e18159;--link:#f3aa86;--btn:#e18159;--btn-hover:#ee966e;--on-btn:#1f1612;--focus:#f7c0a2;
  --hbg:#251f1b;--hsurface:#2f2722;--hline:#4a3e35;--hink:#f7ecdc;--hsoft:#d8c9b6;--hhead:#130f0d;--hrule:#4a3e35;--fink:#d8c9b6;--hlink:#f7c0a2;--hfocus:#f7c0a2;--hfoot:#130f0d;
}

/* FleeceForge chrome: header band, nav, and the right-side slots (search, actions). The band is always dark. Needs ff-tokens.css. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ff-top-banner{background:var(--hhead);color:var(--hink);border-bottom:1px solid var(--hrule);text-align:center;font-size:.9rem;font-weight:700;padding:.4rem 1rem}
.site-head{--bg:var(--hbg);--surface:var(--hsurface);--line:var(--hline);--ink:var(--hink);--ink-soft:var(--hsoft);--accent:var(--hlink);--focus:var(--hfocus);background:var(--hhead);color:var(--ink);border-bottom:1px solid var(--hrule)}
.site-head .wrap{width:var(--ff-wrap);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-block:.75rem}
/* The banner lockup: logo tile, live wordmark, tagline. The band is dark in both themes, so the peach and cream tokens (--hpeach, --hink, --htag) hold AA contrast in both. */
.site-head .brand{display:flex;align-items:center;gap:.85rem;max-width:100%;min-width:0;border-radius:.9rem;color:var(--hink);text-decoration:none}
.site-head .brand .logo{display:block;flex:none;width:4.25rem;height:4.25rem;padding:.25rem;background:var(--hink);border-radius:.9rem;box-shadow:0 0 0 2px var(--hpeach);transition:filter .15s ease}
.site-head .brand .logo img{display:block;width:100%;height:100%}
.site-head .brand:hover .logo{filter:brightness(1.06)}
.site-head .brand-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow-wrap:anywhere}
.site-head .brand-name{font-size:1.6rem;font-weight:800;letter-spacing:.01em;line-height:1.15;color:var(--hink)}
.site-head .brand-name .forge{color:var(--hpeach)}
.site-head .brand-tag{margin-top:.2rem;padding-left:.6rem;border-left:3px solid var(--hpeach);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1rem;line-height:1.3;color:var(--htag)}
.site-head .ff-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.site-head .nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 0;margin:0;padding:0;list-style:none}
.site-head .nav li+li{position:relative}
.site-head .nav li+li::before{content:"";position:absolute;left:0;top:50%;height:1.5rem;margin-top:-.75rem;border-left:2px solid var(--hsoft);opacity:.65;pointer-events:none}
.site-head .nav a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .85rem;margin:0 .3rem;border-radius:.6rem;color:var(--ink);font-weight:600;text-decoration:none}
.site-head .nav a:hover{background:var(--bg);text-decoration:underline}
/* The highlight and the focus ring stay clear of the pipe dividers: the .3rem side margin is wider than the 3px ring (offset 0) and the 2px pipe. */
.site-head .nav a:focus-visible{outline:3px solid var(--hfocus);outline-offset:0}
/* Phones: the brand and toggle share the first row and the nav takes one row below, so the header stays under 140px tall. */
@media (max-width:30em){.site-head .wrap{gap:.5rem .75rem;padding-block:.5rem}.site-head .brand{flex:1 1 12rem;gap:.7rem}.site-head .brand .logo{width:3.5rem;height:3.5rem}.site-head .brand-name{font-size:1.4rem}
  .site-head .ff-tools{display:contents}.theme-toggle{order:1;margin-left:auto}.site-head .nav{order:2;flex:1 1 auto}.site-head .nav a{padding:0 .5rem;margin:0 .25rem}.ff-actions{order:3;margin-left:auto}}
@media (max-width:23em){.site-head .brand{gap:.55rem}.site-head .brand .logo{width:3rem;height:3rem}.site-head .brand-name{font-size:1.2rem}.site-head .brand-tag{font-size:.875rem;padding-left:.45rem}.site-head .nav a{padding:0 .35rem;margin:0 .25rem;font-size:.9375rem}}

/* Slots. Search sits left of the nav; actions (Sign in, Settings, a Sign out form) sit between the nav and the toggle. */
.ff-search{display:flex;align-items:center}
.ff-search input{min-height:2.75rem;padding:0 .85rem;border:2px solid var(--line);border-radius:.6rem;background:var(--bg);color:var(--ink);font:inherit}
.ff-search input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ff-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}
.ff-actions form{margin:0;display:inline-flex}
.ff-actions a,.ff-actions button{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .85rem;border:0;border-radius:.6rem;background:none;color:var(--ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.ff-actions a:hover,.ff-actions button:hover{background:var(--bg);text-decoration:underline}
/* The Sign In / Manage Forge button: a filled peach button, distinct from the nav links. It reads "Sign In" at rest and "Manage Forge" on hover (hover-capable devices) and keyboard focus; both labels share one grid cell, so the width never changes, and the accessible name is always "Sign In to Manage Forge". On hover and focus, pointed flame tongues in the flame palette rise from the bottom edge inside the button (CSS only, under a second, clipped by the rounded shape, behind the label). Reduced motion gets a static glow. Every flame color keeps the dark label above 4.5:1. */
.ff-actions a:focus-visible,.ff-actions button:focus-visible{outline:3px solid var(--hfocus);outline-offset:3px}
.ff-actions a.ff-manage{position:relative;isolation:isolate;overflow:hidden;min-height:2.75rem;padding:0 calc(1.1rem - 2px);border:2px solid transparent;border-radius:.6rem;background:var(--hpeach);color:var(--hhead);font-weight:700}
.ff-actions a.ff-manage:focus-visible{background:var(--flame-peach)}
.ff-actions a.ff-manage,.ff-actions a.ff-manage:hover,.ff-actions a.ff-manage:focus-visible,.ff-manage .ff-label,.ff-manage .ff-label>span{text-decoration:none}
.ff-manage .ff-label{display:grid}
.ff-manage .ff-label>span{grid-area:1/1;text-align:center}
.ff-manage .ff-hot{opacity:0}
.ff-manage:focus-visible .ff-rest{opacity:0}
.ff-manage:focus-visible .ff-hot{opacity:1}
.ff-manage::before,.ff-manage::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:0;transform-origin:50% 100%}
.ff-manage::before{background:linear-gradient(to top,var(--flame-ember),var(--flame-amber) 80%);clip-path:polygon(1% 100%,3.1% 88%,5.2% 76%,7.1% 64%,8.9% 52%,10.5% 40%,11.9% 28%,13.1% 16%,13.5% 10%,13.7% 16%,14.5% 28%,15.5% 40%,16.7% 52%,18.1% 64%,19.6% 76%,21.3% 88%,23% 100%,38% 100%,39.8% 88%,41.5% 76%,43.1% 64%,44.6% 52%,45.9% 40%,47.1% 28%,48.1% 16%,49% 0%,50.2% 16%,51.4% 28%,52.9% 40%,54.5% 52%,56.2% 64%,58% 76%,60% 88%,62% 100%,77% 100%,78.7% 88%,80.3% 76%,81.8% 64%,83.2% 52%,84.4% 40%,85.4% 28%,86.2% 16%,86.5% 8%,87% 16%,88.2% 28%,89.7% 40%,91.3% 52%,93% 64%,94.9% 76%,96.9% 88%,99% 100%)}
.ff-manage::after{background:linear-gradient(to top,var(--flame-amber),var(--flame-light));clip-path:polygon(21% 100%,22.9% 88%,24.6% 76%,26.2% 64%,27.6% 52%,28.8% 40%,29.8% 28%,30% 22%,30.4% 28%,31.6% 40%,33.1% 52%,34.9% 64%,36.8% 76%,38.8% 88%,41% 100%,59% 100%,61.4% 88%,63.6% 76%,65.7% 64%,67.5% 52%,69.1% 40%,70.2% 28%,70.9% 40%,72.1% 52%,73.5% 64%,75.2% 76%,77% 88%,79% 100%)}
@keyframes ff-fire{
  0%{opacity:0;transform:scaleY(.1)}
  15%{opacity:1}
  55%{opacity:1;transform:scaleY(1.04) skewX(-3deg)}
  80%{opacity:1;transform:scaleY(.94) skewX(2deg)}
  100%{opacity:1;transform:none}
}
@keyframes ff-fire2{
  0%{opacity:0;transform:scaleY(.1)}
  20%{opacity:1}
  60%{opacity:1;transform:scaleY(1.06) skewX(3deg)}
  85%{opacity:1;transform:scaleY(.92) skewX(-2deg)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference){
  .ff-manage:focus-visible::before{animation:ff-fire .65s ease-out forwards}
  .ff-manage:focus-visible::after{animation:ff-fire2 .65s ease-out .15s both}
}
@media (hover:hover){
  .ff-manage:hover .ff-rest{opacity:0}
  .ff-manage:hover .ff-hot{opacity:1}
  .ff-actions a.ff-manage:hover{background:var(--flame-peach)}
  @media (prefers-reduced-motion:no-preference){
    .ff-manage:hover::before{animation:ff-fire .65s ease-out forwards}
    .ff-manage:hover::after{animation:ff-fire2 .65s ease-out .15s both}
  }
}
@media (prefers-reduced-motion:reduce){
  .ff-manage:focus-visible::before{opacity:.55;transform:none}
  .ff-actions a.ff-manage:focus-visible{box-shadow:0 0 .9rem .2rem rgba(242,165,74,.75)}
  @media (hover:hover){
    .ff-manage:hover::before{opacity:.55;transform:none}
    .ff-actions a.ff-manage:hover{box-shadow:0 0 .9rem .2rem rgba(242,165,74,.75)}
  }
}
@media (forced-colors:active){.ff-manage::before,.ff-manage::after{display:none}.ff-actions a.ff-manage{border-color:ButtonText}}
@media (max-width:30em){.ff-search{order:3;flex-basis:100%}.ff-search input{width:100%}}

/* FleeceForge chrome: the theme toggle, a two-position switch. The knob sits under the active theme icon. Hidden until theme.js adds .js to <html>. Needs ff-tokens.css and the .site-head local tokens from ff-header.css. */
.theme-toggle{position:relative;display:inline-flex;align-items:center;padding:.25rem;border:2px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink-soft);cursor:pointer;font:inherit}
html:not(.js) .theme-toggle{display:none}
.theme-toggle svg{position:relative;z-index:1;width:2.25rem;height:2.25rem;padding:.45rem}
.theme-toggle::before{content:"";position:absolute;left:.25rem;top:.25rem;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.theme-toggle.is-ready::before{transition:transform .25s ease}.theme-toggle.is-ready svg{transition:color .2s ease}
.theme-toggle[aria-pressed=true]::before{transform:translateX(2.25rem)}
.theme-toggle[aria-pressed=false] .i-sun,.theme-toggle[aria-pressed=true] .i-moon{color:var(--ink)}
.theme-toggle:focus-visible{border-radius:999px}
@media (forced-colors:active){.theme-toggle::before{border-color:Highlight}}

/* FleeceForge chrome: footer band. Stays dark in both themes. Needs ff-tokens.css. */
.foot{--f-bg:var(--hfoot);--f-ink:var(--hink);--f-soft:var(--fink);--f-head:var(--hlink);--f-rule:var(--hrule);--f-focus:var(--hfocus);--f-tile:var(--hink);
  background:var(--f-bg);color:var(--f-soft);border-top:1px solid var(--f-rule);font-size:.95rem;line-height:1.5;text-align:left}
.foot-in,.foot-base{width:var(--ff-wrap);margin-inline:auto}
.foot-in{display:grid;gap:2rem;padding-block:clamp(2.25rem,5vw,3.25rem) clamp(1.75rem,4vw,2.5rem)}
.foot p,.foot h2,.foot ul{margin:0}
.foot-mark{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.65rem;max-width:100%;min-height:2.75rem;color:var(--f-ink);font-size:1.2rem;font-weight:800;letter-spacing:.01em;text-decoration:none;border-radius:.6rem}
.foot-mark img{width:2.5rem;height:2.5rem;padding:.15rem;background:var(--f-tile);border-radius:.55rem;box-shadow:0 0 0 1.5px var(--f-head)}
.foot-mark .forge{color:var(--f-head)}
.foot-mark > span{min-width:0;overflow-wrap:anywhere}
.foot-tag{margin-top:.4rem;font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--f-soft)}
.foot-nav{display:grid;gap:1.75rem}
.foot-head{margin-bottom:.45rem;font-size:.875rem;font-weight:800;line-height:1.4;letter-spacing:.02em;color:var(--f-head)}
.foot ul{list-style:none;padding:0}
.foot li{display:flex;flex-wrap:wrap;align-items:center;gap:0 .55rem}
.foot-nav a{display:inline-flex;align-items:center;min-height:2.25rem;color:var(--f-ink);text-decoration:none;text-underline-offset:.22em}
.foot-tagged{font-size:.75rem;font-weight:600;line-height:1.4;padding:.05rem .5rem;border:1px solid var(--f-rule);border-radius:999px;color:var(--f-soft)}
.foot a:focus-visible{outline:2px solid var(--f-focus);outline-offset:2px;border-radius:3px}
@media (hover:hover){.foot-nav a:hover{color:var(--f-head);text-decoration:underline}.foot-mark:hover{color:var(--f-ink)}}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem 2rem;padding-block:1.15rem 1.5rem;border-top:1px solid var(--f-rule);font-size:.85rem}
@media (min-width:34em){.foot-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}
@media (min-width:56em){.foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:3rem}}
@media (forced-colors:active){.foot-mark img{box-shadow:none;outline:1px solid CanvasText}}