/* SHELF: shared base. Fonts are self-hosted (SIL OFL: Inter, Cormorant Garamond). */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('fonts/cormorant-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('fonts/cormorant-600.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
svg { display: block; }
[hidden] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink, #111); color: var(--paper, #fff); text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

:focus-visible { outline: 2.5px solid var(--ring, #2563eb); outline-offset: 2px; border-radius: 6px; }

/* icon button: 40 px on a mouse, 44 px on touch */
.ib { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--icon, currentColor); transition: background-color .15s, color .15s; }
.ib svg { width: 20px; height: 20px; }
@media (hover: hover) { .ib:hover { background: var(--hover, rgba(0,0,0,.06)); } }
@media (pointer: coarse) { .ib { width: 44px; height: 44px; } }

/* the live dot from _studio/live_server.py must not sit on top of the UI in screenshots */
body > div[style*="2147483647"] { opacity: .5; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 16px; border-radius: 12px; background: #1d1d1f; color: #fff; font-size: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transition: transform .38s cubic-bezier(.2,.9,.3,1.15), opacity .2s; opacity: 0; pointer-events: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast button { padding: 8px 12px; min-height: 36px; border-radius: 8px; background: rgba(255,255,255,.14); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media (pointer: coarse) { .ib.ib--s { width: 44px; height: 44px; } .back { min-height: 44px; } }