/* The footer on every Porchnote page (src/views/footer.tsx), app and porchnote.guide alike.
   Reads the design system's tokens only; the toggle itself is .pn-toggle from components.css. */
.pn-foot { margin-top: var(--pn-space-12); border-top: var(--pn-hairline) solid var(--pn-stroke-lo); color: var(--pn-fg-muted); font: 400 14px/22px var(--font-sans); }
.pn-foot-in { max-width: 80rem; margin: 0 auto; padding: var(--pn-space-6) clamp(16px, 4vw, 32px) var(--pn-space-8); display: grid; gap: var(--pn-space-4); }
.pn-foot p { margin: 0; }
.pn-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pn-space-3) var(--pn-space-6); }
.pn-foot-brand { display: flex; align-items: center; gap: var(--pn-space-3); color: var(--pn-fg); font-weight: 500; }
.pn-foot-brand img { display: block; flex: none; }
.pn-foot-theme { margin: 0; }
.pn-foot-legal { display: flex; flex-wrap: wrap; gap: var(--pn-space-1) var(--pn-space-6); font-size: 13px; line-height: 20px; }
.pn-foot-legal p:last-child { max-width: 62ch; text-wrap: pretty; }
/* The theme switch: a hairline track with the sun on the light side and the moon on the dark side;
   the knob (the Ink plate, linen at night) slides over the one in use and shows it. It answers the
   pointer like every control (lit hairline) and settles with the system's easing. */
.pn-foot .pn-theme-switch, .pn-foot .pn-theme-switch:hover, .pn-foot .pn-theme-switch:focus-visible, .pn-foot .pn-theme-switch:active {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; transform: none; cursor: pointer;
}
.ts-track { position: relative; display: block; width: 64px; height: 34px; border: var(--pn-hairline) solid var(--pn-stroke-edge); border-radius: 17px; background: var(--pn-plate); transition: border-color var(--pn-dur-settle) linear; }
.pn-theme-switch:hover .ts-track, .pn-theme-switch:focus-visible .ts-track { border-color: var(--pn-stroke-hi); transition-duration: var(--pn-dur-answer); }
.ts-track > svg { position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--pn-fg-muted); }
.ts-track > .ts-sun { left: 8px; }
.ts-track > .ts-moon { right: 8px; }
.ts-knob { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pn-fg); color: var(--pn-bg); transition: transform var(--pn-dur-settle) var(--pn-ease-settle); }
.ts-knob svg { grid-area: 1 / 1; width: 16px; height: 16px; }
.ts-knob .ts-moon { opacity: 0; }
.pn-theme-switch[aria-checked='true'] .ts-knob { transform: translateX(30px); transition-duration: var(--pn-dur-answer); transition-timing-function: var(--pn-ease-answer); }
.pn-theme-switch[aria-checked='true'] .ts-knob .ts-sun { opacity: 0; }
.pn-theme-switch[aria-checked='true'] .ts-knob .ts-moon { opacity: 1; }
.pn-theme-switch:focus-visible { outline: var(--pn-focus-width) solid var(--pn-focus-ring); outline-offset: var(--pn-focus-width); border-radius: 20px; }
@media (prefers-reduced-motion: reduce) { .ts-knob { transition: none; } }

/* Light-only and dark-only images (the lantern here, the lockup in headers), by the page's theme. */
.pn-dark-only { display: none !important; }
[data-theme='dark'] .pn-light-only { display: none !important; }
[data-theme='dark'] .pn-dark-only { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .pn-light-only { display: none !important; }
  :root:not([data-theme]) .pn-dark-only { display: block !important; }
}