/*
* Shared chrome for every plain-HTML storyboard and sketch.
*
* This file is copied verbatim into each app's `public/vendor/preview/` by
* `tools/sync-vendor.mjs` — it is never run through Vite's CSS pipeline, so
* every url() here is a plain relative path into the sibling vendor folders,
* NOT an @shared alias. The fonts are still one copy in git; only the
* gitignored build input is duplicated.
*/
@import "./fonts.css";
/* --- minimal reset: mirrors what the hosted artifact wrapper provided, so a
parked page renders identically to the published one ------------------ */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
min-block-size: 100vh;
display: flex;
flex-direction: column;
}
/* each preview's root element is .page — let it own the viewport so no
unstyled body background shows through in either theme */
body > .page { flex: 1 1 auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
a { color: inherit; }
/* --- theme toggle -------------------------------------------------------
The hosted artifacts inherited a theme toggle from claude.ai. Locally there
is none, so this supplies one — otherwise the dark palettes could only be
reviewed by changing OS settings. Sets data-theme on , which every
preview's CSS already honours and lets win over prefers-color-scheme. */
.pvw-theme {
position: fixed;
inset-block-start: 14px;
inset-inline-end: 14px;
z-index: 9999;
border: 1px solid rgba(128, 140, 155, .38);
background: rgba(128, 140, 155, .12);
color: inherit;
border-radius: 999px;
padding: 6px 14px;
font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 12px;
font-weight: 700;
cursor: pointer;
backdrop-filter: blur(8px);
}
.pvw-theme:hover { background: rgba(128, 140, 155, .22); }
.pvw-theme:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
@media print {
.pvw-theme { display: none; }
}