/* == off-canvas == */
.gf-off-canvas { display: inline-block; }
.gf-off-canvas__trigger { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.3rem; font-family: var(--gf-font-body, sans-serif); font-weight: 600; font-size: var(--gf-size-base, 1rem); color: var(--gf-color-ink, #15201a); background: var(--gf-color-surface, #ffffff); border: 1.5px solid var(--gf-color-border-strong, #cfd4c6); border-radius: var(--gf-radius-pill, 999px); cursor: pointer; }
.gf-off-canvas__trigger:hover { border-color: var(--gf-color-brand-strong, #4f7a1f); color: var(--gf-color-brand-strong, #4f7a1f); }
.gf-off-canvas__trigger:focus-visible { outline: 2px solid var(--gf-color-accent, #5fae6e); outline-offset: 2px; }
.gf-off-canvas__trigger-icon { display: inline-flex; }
.gf-off-canvas__trigger-icon svg { width: 1.15rem; height: 1.15rem; }
.gf-off-canvas__backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(21, 32, 26, 0.5); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.gf-off-canvas__panel { position: fixed; top: 0; bottom: 0; z-index: 999; width: min(400px, 86vw); max-width: 100%; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; overflow-y: auto; background: var(--gf-color-surface, #ffffff); color: var(--gf-color-ink-2, #46514a); box-shadow: 0 0 40px rgba(21, 32, 26, 0.25); visibility: hidden; transition: transform .3s ease, visibility .3s ease; }
.gf-off-canvas[data-position="right"] .gf-off-canvas__panel { right: 0; transform: translateX(100%); }
.gf-off-canvas[data-position="left"] .gf-off-canvas__panel { left: 0; transform: translateX(-100%); }
.gf-off-canvas[data-open] .gf-off-canvas__panel { transform: none; visibility: visible; }
.gf-off-canvas[data-open] .gf-off-canvas__backdrop { opacity: 1; visibility: visible; }
.gf-off-canvas__close { align-self: flex-end; appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0.35rem; color: var(--gf-color-muted, #71807a); cursor: pointer; border-radius: var(--gf-radius-sm, 10px); }
.gf-off-canvas__close:hover { color: var(--gf-color-ink, #15201a); }
.gf-off-canvas__close:focus-visible { outline: 2px solid var(--gf-color-accent, #5fae6e); outline-offset: 2px; }
.gf-off-canvas__close svg { width: 1.4rem; height: 1.4rem; }
.gf-off-canvas__body { line-height: 1.7; }
.gf-off-canvas__body > :first-child { margin-top: 0; }
.gf-off-canvas__body > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .gf-off-canvas__panel, .gf-off-canvas__backdrop { transition: none; } }

/* == theme-toggle == */
.gf-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--gf-color-border, #e3e6dc); border-radius: var(--gf-radius-pill, 999px); color: var(--gf-color-ink-2, #46514a); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.gf-theme-toggle:hover { color: var(--gf-color-ink, #15201a); border-color: var(--gf-color-border-strong, #cfd4c6); background: var(--gf-color-surface-2, #f1f3ec); }
.gf-theme-toggle:focus-visible { outline: 2px solid var(--gf-color-accent, #5fae6e); outline-offset: 2px; }
.gf-theme-toggle__icon { display: inline-flex; line-height: 0; }
.gf-theme-toggle__icon--sun { display: none; }
[data-theme="dark"] .gf-theme-toggle__icon--sun { display: inline-flex; }
[data-theme="dark"] .gf-theme-toggle__icon--moon { display: none; }
@media (prefers-reduced-motion: reduce) { .gf-theme-toggle { transition: none; } }