/* ShiftPatch landing page styles. Generated by build/build.py: edit the files in design/ and build/, not this file. */

/* Brand fonts, self-hosted from the design system so no visitor data goes to a font CDN. */
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/PublicSans-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---- shiftpatch-theme.css (from the design canvas) ---- */
/* ShiftPatch semantic tokens as CSS variables, taken from the design system's tokens.json.
   Light is the fallback; wrap a block in data-theme="dark" for dashboard mockups. */
:root, [data-theme="light"] {
  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --navy: #14213d; /* brand Navy: the ink-colored ground for the hero, header and footer bands */

  --surface: #f7f9f8;
  --surface-raised: #ffffff;
  --line: #d9e2e1;
  --control-border: #6b7c86;
  --ink: #14213d;
  --ink-muted: #4a5568;
  --teal: #0f5e63;
  --teal-soft: #e1f0ef;
  --on-teal: #ffffff;
  --amber: #f2a541;
  --amber-hover: #e8962a;
  --amber-soft: #fdf1dc;
  --amber-ink: #8a5a00;
  --on-amber: #14213d;
  --red: #b42318;
  --red-soft: #fde8e7;
  --status-filled: var(--teal);
  --status-open: var(--amber-ink);
  --status-uncovered: var(--red);
  --focus: #0f5e63;
  --shadow-sm: 0 1px 2px #14213d0f, 0 1px 3px #14213d14;
  --shadow-md: 0 4px 8px #14213d0f, 0 12px 24px -4px #14213d1f;
  --focus-ring: 0 0 0 2px #f7f9f8, 0 0 0 4px #0f5e63;
  color-scheme: light;
}

[data-theme="dark"] {
  --surface: #0e1a24;
  --surface-raised: #16252f;
  --line: #2a3b45;
  --control-border: #6f8592;
  --ink: #e8eef0;
  --ink-muted: #9aa9b4;
  --teal: #5fc3be;
  --teal-soft: #12393c;
  --on-teal: #0e1a24;
  --amber-soft: #3a2a10;
  --amber-ink: #f2c27a;
  --red: #f97066;
  --red-soft: #3d1512;
  --status-filled: var(--teal);
  --status-open: var(--amber-ink);
  --status-uncovered: var(--red);
  --focus: #5fc3be;
  --shadow-sm: 0 1px 3px #00000080;
  --shadow-md: 0 12px 24px -4px #000000b3;
  --focus-ring: 0 0 0 2px #0e1a24, 0 0 0 4px #5fc3be;
  color-scheme: dark;
}

/* ---- ds-bundle.css (from the design canvas) ---- */
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 26px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--teal); text-underline-offset: 2px; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Button */
.sp-btn { box-sizing: border-box; font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 20px; height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.sp-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sp-btn:disabled { cursor: not-allowed; opacity: .55; }
.sp-btn-primary { background: var(--amber); color: var(--on-amber); }
.sp-btn-primary:hover:not(:disabled) { background: var(--amber-hover); }
.sp-btn-secondary { background: transparent; color: var(--teal); border-color: var(--teal); }
.sp-btn-secondary:hover:not(:disabled) { background: var(--teal-soft); }
.sp-btn-quiet { background: transparent; color: var(--teal); padding: 0 var(--space-2); }
.sp-btn-quiet:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.sp-btn-lg { height: 52px; font-size: 17px; padding: 0 var(--space-6); }
.sp-btn-block { display: flex; width: 100%; }

/* StatusPill */
.sp-pill { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; font-weight: 600; line-height: 16px; padding: 4px 10px 4px 7px; border-radius: var(--radius-full); white-space: nowrap; }
.sp-pill svg { flex: none; }
.sp-pill-filled { background: var(--teal-soft); color: var(--status-filled); }
.sp-pill-open { background: var(--amber-soft); color: var(--status-open); }
.sp-pill-uncovered { background: var(--red-soft); color: var(--status-uncovered); }

/* Badge */
.sp-badge { display: inline-block; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-full); }
.sp-badge-neutral { background: var(--surface); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }
.sp-badge-teal { background: var(--teal-soft); color: var(--teal); }
.sp-badge-amber { background: var(--amber-soft); color: var(--amber-ink); }

/* Card + ShiftCard */
.sp-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5); box-sizing: border-box; }
.sp-shift { max-width: 340px; }
.sp-shift-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sp-shift-unit { font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 20px; color: var(--ink-muted); }
.sp-shift-role { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; margin: var(--space-2) 0 var(--space-1); color: var(--ink); }
.sp-shift-time { font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 20px; margin: 0; color: var(--ink); }
.sp-shift-note { font-size: 14px; line-height: 20px; margin: var(--space-2) 0 0; color: var(--ink-muted); }
.sp-shift-uncovered { border-color: var(--red); }

/* WaitlistForm */
.sp-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 420px; padding: var(--space-6); align-items: stretch; }
.sp-form > .sp-badge { align-self: flex-start; }
.sp-form-title { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.sp-form-lead { margin: calc(-1 * var(--space-2)) 0 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.sp-form-done { gap: var(--space-3); }
.sp-form-done .sp-pill { align-self: flex-start; }
.sp-form-done .sp-form-lead { margin: 0; }
.sp-field { display: flex; flex-direction: column; gap: var(--space-2); }
.sp-label { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink); }
.sp-input { font: inherit; font-size: 16px; height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--control-border); background: var(--surface-raised); color: var(--ink); box-sizing: border-box; width: 100%; }
.sp-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sp-input:user-invalid { border-color: var(--red); }
.sp-form-privacy { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* preview helpers */
.sp-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-5); }
.sp-stack { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); }

/* ---- shiftpatch-motion.css (from the design canvas) ---- */
/* ShiftPatch landing page motion.
   Every animation sits behind prefers-reduced-motion. Scroll reveals only run where the
   browser supports scroll-driven animations; elsewhere the content is simply visible. */

/* Static defaults: the second state of a flipping element stays hidden without motion. */
.sp-flip-b { opacity: 0; }
/* Let ShiftCards fill a wide concept panel. */
.sp-fill .sp-shift { max-width: none; }

@keyframes sp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sp-from-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes sp-from-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes sp-flip-a { 0%, 42% { opacity: 1; transform: none; } 50%, 92% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes sp-flip-b { 0%, 42% { opacity: 0; transform: translateY(6px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes sp-ring-tick { 0%, 42% { stroke-dashoffset: 26.93; } 50%, 92% { stroke-dashoffset: 17.95; } 100% { stroke-dashoffset: 26.93; } }
@keyframes sp-ring-draw { from { stroke-dashoffset: 188.5; } }

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance on load, staggered. */
  .sp-in { animation: sp-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .sp-d1 { animation-delay: 0.1s; }
  .sp-d2 { animation-delay: 0.2s; }
  .sp-d3 { animation-delay: 0.3s; }

  /* The open shift fills, and the coverage ring ticks up with it. Same 8s loop. */
  .sp-flip-a { animation: sp-flip-a 8s ease-in-out infinite; }
  .sp-flip-b { animation: sp-flip-b 8s ease-in-out infinite; }
  .sp-ring-tick { animation: sp-ring-tick 8s ease-in-out infinite; }

  /* Scroll reveals. The ranges end inside "entry", so anything already in view is fully shown. */
  @supports (animation-timeline: view()) {
    .sp-reveal { animation: sp-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .sp-reveal-left { animation: sp-from-left linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .sp-reveal-right { animation: sp-from-right linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .sp-ring-draw { animation: sp-ring-draw linear both; animation-timeline: view(); animation-range: entry 20% entry 100%; }
    .sp-r2 { animation-range: entry 10% entry 80%; }
    .sp-r3 { animation-range: entry 20% entry 90%; }
    .sp-r4 { animation-range: entry 30% entry 100%; }
  }
}

/* ---- shiftpatch-feedback.css (from the design canvas) ---- */
/* ShiftPatch feedback widget and one-question survey.
   Built on the design system's tokens and .sp-btn classes. Amber stays reserved for the signup button. */

/* Answer and topic chips: secondary buttons that can be selected. */
.fb-chip { box-sizing: border-box; height: 44px; padding: 0 16px; border-radius: var(--radius-md); border: 1.5px solid var(--teal); background: var(--surface-raised); color: var(--teal); font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: background-color .15s ease; }
.fb-chip:hover { background: var(--teal-soft); }
.fb-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fb-chip-on, .fb-chip-on:hover { background: var(--teal); color: var(--on-teal); border-color: var(--teal); }

/* Small square icon button (close). */
.fb-icon-btn { box-sizing: border-box; flex: none; width: 36px; height: 36px; margin: -6px -6px 0 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fb-icon-btn:hover { background: var(--surface); color: var(--ink); }
.fb-icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Feedback dock: fixed bottom-right, panel opens above the button. */
.fb-dock { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--font-sans); font-size: 16px; line-height: 26px; color: var(--ink); }
.fb-panel { box-sizing: border-box; width: min(340px, calc(100vw - 32px)); padding: 20px; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
@media (max-width: 600px) {
  .fb-dock { right: 16px; bottom: 16px; }
  .fb-panel { padding: 16px; }
}

/* Feedback trigger, option 1: a small floating button. */
.fb-trigger { box-sizing: border-box; height: 44px; padding: 0 16px 0 14px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); color: var(--teal); box-shadow: var(--shadow-md); font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.fb-trigger:hover { background: var(--teal-soft); }
.fb-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Feedback trigger, option 2: a slim tab on the right edge. */
.fb-tab { box-sizing: border-box; width: 36px; padding: 14px 0; border: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--teal); color: var(--on-teal); box-shadow: var(--shadow-sm); font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fb-tab span { writing-mode: vertical-rl; transform: rotate(180deg); }
.fb-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Text area for feedback. */
.fb-textarea { box-sizing: border-box; width: 100%; min-height: 88px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--control-border); background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; resize: vertical; }
.fb-textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Option 2's survey arrives with a short slide, once. */
@keyframes fb-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .fb-slide-in { animation: fb-slide-up .45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}

/* ---- Site-only additions (not on the canvas) ---- */

/* Component classes set display:flex, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* While the PostHog flag decides the variant: hold a navy band so the hero doesn't flash white. */
body.sp-booting #app { min-height: 100vh; background: var(--navy); }

/* Signup form extras */
.sp-form-error { margin: 0; font-size: 14px; line-height: 20px; color: var(--red); }
.sp-form-done:focus { outline: none; }
.sp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }