/* Page-level overrides shared by every screen, on top of the Organic theme in organic.css. */
body{margin:0}
h1,h2,h3,h4,.btn,.card-title{font-family:var(--font-body);font-weight:600;letter-spacing:0}
a{color:var(--color-accent-700)} a:hover{color:var(--color-accent-800)}
[hidden]{display:none !important}

/* Hover states the mockups set per element */
.hover-bg:hover{background:var(--color-neutral-200) !important}
.hover-ink:hover{color:var(--color-accent-700) !important}
.hover-edge:hover{border-color:var(--color-neutral-300) !important}

/* Loading. Each indicator fades in after a short delay, so quick loads don't flicker. */
@keyframes lb-spin { to { transform: rotate(360deg) } }
@keyframes lb-appear { from { opacity: 0 } to { opacity: 1 } }
@keyframes lb-shimmer { from { background-position: 100% 0 } to { background-position: -100% 0 } }
.spinner{display:inline-block;flex:none;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lb-spin .8s linear infinite;vertical-align:-.15em}
.btn .spinner{margin-right:2px}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:48px 0;font-size:15px;color:var(--color-neutral-700);animation:lb-appear .2s ease .3s both}
.skeleton{display:block;border-radius:6px;background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%;animation:lb-shimmer 1.4s ease-in-out infinite}
.is-refreshing{opacity:.45;transition:opacity .15s ease .15s;pointer-events:none}
/* While a page's data loads, its main area waits behind a spinner instead of showing half-filled. */
html.is-loading main{visibility:hidden}
html.is-loading body::after{content:"";position:fixed;top:45%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid var(--color-accent);border-right-color:transparent;border-radius:50%;animation:lb-spin .8s linear infinite,lb-appear .2s ease .3s both}
html.is-loading body:has(#sidebar)::after{left:calc(50% + 116px)}
@media (prefers-reduced-motion: reduce){.spinner,html.is-loading body::after{animation-duration:2.4s,.2s}.skeleton{animation:none}}