:root { --bg: #eeeeee; --surface: #ffffff; --surface-border: #e5e5e5; --surface-border-bottom: #cccccc; --topbar-border: #e0e0e0; --text: #343a40; --body: #3f444a; --heading: #2e2e2e; --accent: #1976d2; --accent-border: #1976d2; --sidebar-bg: #262b33; --sidebar-border: #22272e; --sidebar-text: #9a9a9a; --sidebar-active-bg: #40464c; --sidebar-active-text: #f5f5f5; --user-line: #808080; --focus: #1565c0; --sidebar-focus: #82c3fa; --thumb-bg: transparent; --thumb-clip: none; --store-clip: none; --content-bg: #fcfcfc; --panel-bg: #f8f8f8; --field-bg: #f5f5f5; --link: #1770c8; --muted: #616161; --action: #587482; --placeholder: #737373; --tab-active: #1976d2; --primary-bg: #1976d2; --primary-text: #ffffff; --btn-dark: #263238; --btn-dark-text: #ffffff; --badge-ok: #2e7d32; --badge-danger: #d32f2f; --badge-neutral: #757575; --badge-warn: #bf5000; --badge-text: #ffffff; --weekend: #d32f2f; --rail-panel-bg: #31373d; --rail-panel-text: #a4a4a4; --flash-ok-bg: #e8f5e9; --flash-ok-text: #1b5e20; --flash-err-bg: #ffebee; --flash-err-text: #b71c1c; color-scheme: light; }
:root[data-theme="dark"] { --bg: #15181c; --surface: #1e2329; --surface-border: #343b43; --surface-border-bottom: #2a3037; --topbar-border: #343b43; --text: #e4e7ea; --body: #e4e7ea; --heading: #f4f6f8; --accent: #82c3fa; --accent-border: #6bb3f0; --sidebar-bg: #262b33; --sidebar-border: #22272e; --sidebar-text: #b9bec4; --sidebar-active-bg: #40464c; --sidebar-active-text: #ffffff; --user-line: #8b929a; --focus: #82c3fa; --sidebar-focus: #82c3fa; --thumb-bg: #ffffff; --thumb-clip: inset(10px 6px round 10px); --store-clip: circle(79px at 50% 50%); --content-bg: #1a1e23; --panel-bg: #242a31; --field-bg: #272d34; --link: #82c3fa; --muted: #aab1b8; --action: #9fb3bd; --placeholder: #8b929a; --tab-active: #82c3fa; --primary-bg: #82c3fa; --primary-text: #0b1d2e; --btn-dark: #587482; --btn-dark-text: #ffffff; --badge-ok: #81c784; --badge-danger: #e57373; --badge-neutral: #b0b0b0; --badge-warn: #ffb74d; --badge-text: #0f1419; --weekend: #ff8a80; --rail-panel-bg: #31373d; --rail-panel-text: #a4a4a4; --flash-ok-bg: #1f3324; --flash-ok-text: #81c784; --flash-err-bg: #3a2124; --flash-err-text: #e57373; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #15181c; --surface: #1e2329; --surface-border: #343b43; --surface-border-bottom: #2a3037; --topbar-border: #343b43; --text: #e4e7ea; --body: #e4e7ea; --heading: #f4f6f8; --accent: #82c3fa; --accent-border: #6bb3f0; --sidebar-bg: #262b33; --sidebar-border: #22272e; --sidebar-text: #b9bec4; --sidebar-active-bg: #40464c; --sidebar-active-text: #ffffff; --user-line: #8b929a; --focus: #82c3fa; --sidebar-focus: #82c3fa; --thumb-bg: #ffffff; --thumb-clip: inset(10px 6px round 10px); --store-clip: circle(79px at 50% 50%); --content-bg: #1a1e23; --panel-bg: #242a31; --field-bg: #272d34; --link: #82c3fa; --muted: #aab1b8; --action: #9fb3bd; --placeholder: #8b929a; --tab-active: #82c3fa; --primary-bg: #82c3fa; --primary-text: #0b1d2e; --btn-dark: #587482; --btn-dark-text: #ffffff; --badge-ok: #81c784; --badge-danger: #e57373; --badge-neutral: #b0b0b0; --badge-warn: #ffb74d; --badge-text: #0f1419; --weekend: #ff8a80; --rail-panel-bg: #31373d; --rail-panel-text: #a4a4a4; --flash-ok-bg: #1f3324; --flash-ok-text: #81c784; --flash-err-bg: #3a2124; --flash-err-text: #e57373; color-scheme: dark; }
}
/* Page shell for apps/vivera. The build prepends themeCss, so every color here is a token variable from packages/theme. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  color: var(--heading);
  line-height: 1.2;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
}

h2 {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
}

h3 {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}

p,
ul,
ol {
  margin: 0 0 1em;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

/* Inline links in running text are exempt from the target size rule (WCAG 2.5.8), so only standalone controls get 44 px. */
.brand,
.site-nav a,
.lang-switch,
.footer-links a,
.button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

button,
input,
select,
textarea {
  font: inherit;
  min-height: 44px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* The one primary button for every page; the global :focus-visible ring above applies, and its 2px offset keeps the blue ring apart from the blue fill. */
.button {
  justify-content: center;
  padding: 0.5rem 1.25rem;
  background: var(--primary-bg);
  border: 1px solid var(--primary-bg);
  border-radius: 6px;
  color: var(--primary-text);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  text-decoration: underline;
}

.button:active {
  transform: translateY(1px);
}

/* quote-form.js disables the submit button while the request is in flight. */
.button:disabled {
  cursor: progress;
  opacity: 0.7;
  transform: none;
}

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: 0.5rem;
  z-index: 10;
  padding-inline: 1rem;
  background: var(--primary-bg);
  color: var(--primary-text);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--topbar-border);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: clamp(1rem, 3vw, 2rem);
  padding-block: 0.25rem;
}

.brand {
  color: var(--heading);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
}

.site-nav {
  flex: 1 1 auto;
}

/* Flex children default to min-width: auto and can push past a 390 px viewport. */
.site-header-inner > *,
.site-nav li,
.footer-links > li,
.footer-links li > * {
  min-width: 0;
}

.site-nav ul,
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: clamp(0.75rem, 2.5vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a,
.lang-switch {
  text-decoration: none;
  font-weight: 500;
}

.site-nav a:hover,
.lang-switch:hover,
.brand:hover {
  text-decoration: underline;
}

main {
  display: block;
}

.site-footer {
  background: var(--content-bg);
  border-top: 1px solid var(--surface-border);
  color: var(--muted);
  padding-block: 1rem;
  margin-top: clamp(2rem, 6vw, 4rem);
}

.footer-links li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.4rem;
}

/* Landing page (src/pages/landing.ts). Mobile first; every color is a token variable from themeCss. */

.landing-hero {
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(2rem, 6vw, 3.5rem);
  border-bottom: 1px solid var(--surface-border);
}

.landing-hero h1 {
  max-width: 22ch;
}

.landing-lede {
  max-width: 60ch;
  color: var(--body);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}

/* Flex children default to min-width: auto and can push past a 390 px viewport. */
.landing-actions > * {
  min-width: 0;
}

.landing-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

.landing-section {
  padding-block: clamp(2rem, 6vw, 3.5rem);
}

.landing-section + .landing-section {
  border-top: 1px solid var(--surface-border);
}

.landing-section p {
  max-width: 65ch;
}

.lifecycle {
  display: grid;
  gap: 0.5rem;
  max-width: 44rem;
  margin: 1.5rem 0 0;
  padding-inline-start: 1.75rem;
}

.lifecycle li {
  min-width: 0;
  color: var(--text);
}

.lifecycle li::marker {
  color: var(--muted);
  font-weight: 600;
}

@media (min-width: 48rem) {
  /* Column flow keeps steps 1 to 5 in the first column so the reading order matches the numbers. */
  .lifecycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: 3rem;
  }
}

/* Workshop page. The build prepends themeCss and base.css, so every color here is a token variable from packages/theme. */

.ws-section {
  padding-block: clamp(1.5rem, 5vw, 3rem);
}

.ws-section + .ws-section {
  border-top: 1px solid var(--surface-border);
}

.ws-intro {
  padding-block-start: clamp(2rem, 7vw, 4rem);
}

.ws-section .wrap > p {
  max-width: 65ch;
}

.ws-lead {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
}

/* min(100%, ...) lets a single column shrink below the track size, so 390 px never scrolls sideways. */
.ws-modules,
.ws-batches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-batches > li {
  display: flex;
  min-width: 0;
}

.ws-module,
.ws-card {
  min-width: 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--content-bg);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
}

.ws-module h3,
.ws-card h3 {
  font-size: 1.125rem;
}

.ws-module ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.ws-module li + li {
  margin-top: 0.4rem;
}

.ws-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.ws-facts {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.ws-facts dt {
  color: var(--heading);
  font-weight: 600;
}

.ws-facts dd {
  margin: 0;
}

.ws-sessions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-price {
  font-weight: 600;
  white-space: nowrap;
}

.ws-status-open {
  font-weight: 600;
}

.ws-status-full,
.ws-status-closed {
  color: var(--muted);
}

.ws-card-action {
  margin: auto 0 0;
}

.ws-empty {
  max-width: 65ch;
}

.ws-form {
  display: grid;
  gap: 1rem;
  max-width: 40rem;
}

.ws-form .button {
  justify-self: start;
}

.ws-field {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.ws-field label {
  color: var(--heading);
  font-weight: 600;
}

.ws-optional {
  color: var(--muted);
  font-weight: 400;
}

.ws-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375em;
}

.ws-field input,
.ws-field textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--muted);
  border-radius: 6px;
  color: var(--text);
}

.ws-field textarea {
  min-height: 8rem;
  resize: vertical;
}

.ws-field [aria-invalid="true"] {
  border-color: var(--flash-err-text);
  box-shadow: 0 0 0 1px var(--flash-err-text);
}

.ws-field-error {
  margin: 0;
  color: var(--flash-err-text);
  font-weight: 600;
}

.ws-field-error:empty {
  display: none;
}

/* The live region stays rendered while empty; some screen readers skip updates to a region that was display: none. */
.ws-form-status {
  margin: 0;
}

.cf-turnstile {
  min-height: 65px;
  max-width: 100%;
}

.ws-privacy {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.9375em;
}

/* Thanks and privacy pages. The build prepends themeCss, so every color here is a token variable from packages/theme. */

.legal {
  max-width: 65ch;
  padding-block: clamp(1.5rem, 5vw, 3rem);
}

.legal h2 {
  margin-top: 1.75em;
}

.legal ul {
  padding-inline-start: 1.25rem;
}

.legal-updated {
  color: var(--muted);
  font-size: 0.9375rem;
}

.legal .legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

/* These links stand alone rather than sitting in running text, so they need the 44 px target (WCAG 2.5.8). */
.legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--link);
  font-weight: 600;
}