button.svelte-1qqzan9:hover {
    transform: translateY(-2px);
  }

  button.svelte-1qqzan9:active {
    transform: translateY(0);
  }

  /* Mobile responsiveness — stack above SMS FAB (bottom 5rem) */
  @media (max-width: 640px) {
    button.svelte-1qqzan9 {
      bottom: 9rem; /* Above SMS (5rem) and Email (1rem) on mobile */
      right: 1rem;
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
    }

    button.svelte-1qqzan9 span:where(.svelte-1qqzan9) {
      display: none;
    }

    button.svelte-1qqzan9::after {
      content: attr(data-count);
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--theme-red-500, #ef4444);
      color: white;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
    }
  }

  button.svelte-1pqbw0f:hover {
    transform: none;
  }

	@keyframes svelte-18xsdqk-spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.animate-spin.svelte-18xsdqk {
		animation: svelte-18xsdqk-spin 1s linear infinite;
	}

	.select-all.svelte-18xsdqk {
		user-select: all;
	}

	@keyframes svelte-ges32y-spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.animate-spin.svelte-ges32y {
		animation: svelte-ges32y-spin 1s linear infinite;
	}

  @keyframes svelte-2p5a7v-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin.svelte-2p5a7v {
    animation: svelte-2p5a7v-spin 1s linear infinite;
  }

  @keyframes svelte-h6yu8p-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin.svelte-h6yu8p {
    animation: svelte-h6yu8p-spin 1s linear infinite;
  }

  @keyframes svelte-1pa3xe1-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin.svelte-1pa3xe1 {
    animation: svelte-1pa3xe1-spin 1s linear infinite;
  }

  @keyframes svelte-1f6jlob-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin.svelte-1f6jlob {
    animation: svelte-1f6jlob-spin 1s linear infinite;
  }

  /* Drag-and-drop visual feedback */
  .cursor-grab.svelte-1f6jlob {
    cursor: grab;
  }

  .cursor-grab.svelte-1f6jlob:active {
    cursor: grabbing;
  }

  /* Folder row styling */
  .folder-row.svelte-1f6jlob {
    user-select: none;
  }

  /* Unfiled section header */
  .unfiled-header.svelte-1f6jlob {
    user-select: none;
  }

  /* Ring inset for drop target highlight */
  .ring-inset.svelte-1f6jlob {
    --tw-ring-inset: inset;
  }

  /* Rotate chevron when folder expanded */
  .rotate-90.svelte-1f6jlob {
    transform: rotate(90deg);
  }

  .vms-hist.svelte-62e7i8 { interpolate-size: allow-keywords; animation: svelte-62e7i8-vms-open 200ms ease-out; overflow: hidden; }
  @keyframes svelte-62e7i8-vms-open { from { height: 0; opacity: 0; } }
  .vms-err.svelte-62e7i8 { animation: svelte-62e7i8-vms-fade 150ms ease-out; }
  @keyframes svelte-62e7i8-vms-fade { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .vms-hist.svelte-62e7i8 { animation: svelte-62e7i8-vms-fade 150ms ease-out; } }

  /* Funnel chevron cells per the approved v3 mockup.
     clip-path CLIPS box-shadow, so elevation/glow lives on the UNclipped .stage-holder wrapper
     as filter: drop-shadow(), which traces the clipped chevron outline.
     Interaction: rest = flex 1 minimal; hover = slight grow (click affordance);
     click = full expand (one at a time) revealing .stage-more content. */
  .stage-holder.svelte-jbl33y {
    flex: 1;
    margin-right: -7px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .stage-holder.svelte-jbl33y:hover:not(.stage-open) {
    flex: 1.25;
  }
  .stage-holder.stage-open.svelte-jbl33y {
    flex: 3.2;
  }
  /* Partial info shows at rest (rows truncate to what fits); expanding simply gives the
     content room, so the "rest" slides into view as the block grows. */
  .stage-more.svelte-jbl33y {
    min-width: 0;
  }
  .stage-holder.svelte-jbl33y:last-child {
    margin-right: 0;
  }
  .stage-breathe.svelte-jbl33y {
    animation: svelte-jbl33y-breatheGlow 2.2s ease-in-out infinite;
  }
  @keyframes svelte-jbl33y-breatheGlow {
    0%, 100% {
      filter: drop-shadow(0 0 3px color-mix(in oklab, var(--theme-teal-500, #14b8a6) 45%, transparent)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    }
    50% {
      filter: drop-shadow(0 0 12px color-mix(in oklab, var(--theme-teal-400, #2dd4bf) 90%, transparent)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    }
  }
  .stage-cell.svelte-jbl33y {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  }
  .stage-first.svelte-jbl33y {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }

  /* Bullhorn JDs are routinely pasted from Word and carry inline styles like
     background-color: var(--theme-amber-100, rgb(255,242,204)) on table cells, plus color: black. In dark mode
     the class above forces all descendants to near-white text, but an inline background
     wins over any class — so pale-yellow cells kept their light fill and the whitened
     text became invisible. Clear those inherited backgrounds in dark mode only; light
     mode keeps the author's intended highlighting. */
  .dark .jd-html.svelte-1dzvdd table,
  .dark .jd-html.svelte-1dzvdd tbody,
  .dark .jd-html.svelte-1dzvdd tr,
  .dark .jd-html.svelte-1dzvdd td,
  .dark .jd-html.svelte-1dzvdd th,
  .dark .jd-html.svelte-1dzvdd span,
  .dark .jd-html.svelte-1dzvdd p,
  .dark .jd-html.svelte-1dzvdd div {
    background-color: transparent !important;
  }

  /* Keep cell edges visible once the fills are gone. */
  .dark .jd-html.svelte-1dzvdd td,
  .dark .jd-html.svelte-1dzvdd th {
    border-color: var(--theme-gray-600, rgb(75 85 99)) !important;
  }

  /* Bullhorn JDs are pasted from Word/Outlook and arrive carrying hard widths —
     `width:472.5pt` on a table, inline styles on cells, and long unbroken URLs or
     ID strings. `.note-content`'s word-break handles prose but cannot shrink a
     table that declares its own width, so in a split pane (~400px of JD column)
     the content ran past the card edge. Force every block to the card's width and
     let tables lay out by available space instead of their declared width. */
  .jd-html.svelte-1dzvdd {
    overflow-wrap: anywhere;
  }
  .jd-html.svelte-1dzvdd table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }
  .jd-html.svelte-1dzvdd td,
  .jd-html.svelte-1dzvdd th {
    width: auto !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  .jd-html.svelte-1dzvdd img,
  .jd-html.svelte-1dzvdd pre {
    max-width: 100%;
  }
  .jd-html.svelte-1dzvdd pre {
    white-space: pre-wrap;
  }

  .note-content {
    white-space: pre-wrap;
    word-break: break-word;
  }
  .note-content p {
    margin-bottom: 0.75rem;
  }
  .note-content p:last-child {
    margin-bottom: 0;
  }

  .jd-format-btn.svelte-1dzvdd {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border: 0;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 650;
    color: #ffffff;
    border-radius: 0.5rem;
    background: linear-gradient(112deg, var(--theme-teal-600, #0d9488) 0%, var(--theme-cyan-600, #0891b2) 55%, var(--theme-indigo-500, #6366f1) 100%);
    box-shadow: 0 1px 3px color-mix(in oklab, var(--theme-teal-600, #0d9488) 40%, transparent);
    transition: box-shadow 0.2s ease, filter 0.2s ease;
  }
  .jd-format-btn.svelte-1dzvdd:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 9px color-mix(in oklab, var(--theme-teal-600, #0d9488) 55%, transparent);
  }
  .jd-format-btn.svelte-1dzvdd .core:where(.svelte-1dzvdd) {
    width: 12px;
    height: 12px;
    display: block;
  }
  /* Sparkles are absolute so they can drift past the chip edge without moving the label. */
  .jd-format-btn.svelte-1dzvdd .sp:where(.svelte-1dzvdd) {
    position: absolute;
    color: #ffffff;
    pointer-events: none;
    opacity: 0;
  }
  /* Durations 2.3/3.1/2.7/4.1s share no common multiple over the time anyone looks
     at a button, and each keyframe set peaks at a different point and drifts a
     different direction — so the sparkles never fall into step. */
  .jd-format-btn.svelte-1dzvdd .d1:where(.svelte-1dzvdd) { width: 5px; height: 5px; top: -1px; left: 3px; animation: svelte-1dzvdd-jdsp1 2.3s ease-in-out 0s infinite; }
  .jd-format-btn.svelte-1dzvdd .d2:where(.svelte-1dzvdd) { width: 4px; height: 4px; bottom: 0; left: 13px; animation: svelte-1dzvdd-jdsp2 3.1s ease-in-out 0.7s infinite; }
  .jd-format-btn.svelte-1dzvdd .d3:where(.svelte-1dzvdd) { width: 4px; height: 4px; top: 1px; right: 6px; animation: svelte-1dzvdd-jdsp3 2.7s ease-in-out 1.9s infinite; }
  .jd-format-btn.svelte-1dzvdd .d4:where(.svelte-1dzvdd) { width: 3px; height: 3px; bottom: 3px; right: 15px; animation: svelte-1dzvdd-jdsp4 4.1s ease-in-out 1.2s infinite; }

  @keyframes svelte-1dzvdd-jdsp1 {
    0%, 62%, 100% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }
    18% { opacity: 1; transform: translate(1px, -2px) scale(1) rotate(35deg); }
    34% { opacity: 0.25; transform: translate(2px, -3px) scale(0.7) rotate(60deg); }
  }
  @keyframes svelte-1dzvdd-jdsp2 {
    0%, 46%, 100% { opacity: 0; transform: translate(0, 0) scale(0.35) rotate(0deg); }
    12% { opacity: 0.5; transform: translate(-1px, 1px) scale(0.8) rotate(-20deg); }
    27% { opacity: 1; transform: translate(-2px, 2px) scale(1.05) rotate(-45deg); }
  }
  @keyframes svelte-1dzvdd-jdsp3 {
    0%, 20%, 78%, 100% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }
    44% { opacity: 1; transform: translate(2px, -1px) scale(1) rotate(50deg); }
    58% { opacity: 0.3; transform: translate(3px, -2px) scale(0.65) rotate(80deg); }
  }
  @keyframes svelte-1dzvdd-jdsp4 {
    0%, 32%, 88%, 100% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
    52% { opacity: 0.9; transform: translate(-1px, -2px) scale(0.95) rotate(-30deg); }
    68% { opacity: 0.2; transform: translate(-1px, -3px) scale(0.6) rotate(-55deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .jd-format-btn.svelte-1dzvdd .sp:where(.svelte-1dzvdd) {
      animation: none;
      opacity: 0.85;
    }
  }

  /* Bold arrival (spec §8): chips spring in, staggered per field and per chip. */
  .chip.svelte-1nuy3uw { animation: svelte-1nuy3uw-chip-in 380ms var(--ease-spring) backwards; }
  @keyframes svelte-1nuy3uw-chip-in { from { opacity: 0; transform: translateY(-8px) scale(0.85); } }
  @keyframes svelte-1nuy3uw-chip-fade { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .chip.svelte-1nuy3uw { animation-name: svelte-1nuy3uw-chip-fade; } }
  html[data-motion-lists='off'] .chip.svelte-1nuy3uw { animation-name: svelte-1nuy3uw-chip-fade; }
  /* One calendar icon (ours): the native indicator is invisible and covers the field, so a click anywhere opens the picker. */
  .date.svelte-1nuy3uw::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }

  /* Cells that carry their own pastel background keep dark text in both modes; unstyled cells follow the mood text colour. */
  .jd-sheet.svelte-mf3s66 td[style*="background"],
  .jd-edit.svelte-mf3s66 .ProseMirror td[style*="background"],
  .jd-edit.svelte-mf3s66 .ProseMirror td[style*="background"] * {
    color: var(--color-gray-900);
  }
  /* !important: the template tables carry their own inline width; the sheet fills its column instead. Display only, the saved html keeps it. */
  .jd-sheet.svelte-mf3s66 table { width: 100% !important; border-collapse: collapse; font-size: 12px; }
  .jd-sheet.svelte-mf3s66 td { border: 1px solid var(--color-gray-900); padding: 4px 6px; vertical-align: top; position: relative; }

  /* G2 — generating: a light runs round each target answer cell; untouched rows dim. */
  @property --jd-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  .jd-sheet.svelte-mf3s66 tr { transition: opacity 250ms var(--ease-snappy); }
  .jd-sheet.svelte-mf3s66 tr.jd-dim { opacity: 0.45; }
  .jd-sheet.svelte-mf3s66 tr.jd-target > td:last-child::after {
    content: '';
    position: absolute;
    inset: 1px;
    padding: 2px;
    border-radius: 2px;
    background: conic-gradient(from var(--jd-ang), transparent 0 70%, var(--mood-accent) 85%, transparent 100%);
    mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    animation: svelte-mf3s66-jd-spin 1.6s linear infinite;
    pointer-events: none;
  }
  @keyframes svelte-mf3s66-jd-spin { to { --jd-ang: 360deg; } }

  /* F3 — result: text wipes in row by row, the cell pops on the spring, a ring fades. */
  .jd-sheet.svelte-mf3s66 tr.jd-changed > td:last-child,
  .jd-sheet.svelte-mf3s66 tr.jd-auto > td:last-child {
    animation:
      svelte-mf3s66-jd-pop 420ms var(--ease-spring) calc(var(--i) * 50ms) both,
      svelte-mf3s66-jd-glow 1500ms ease-out calc(var(--i) * 50ms) both;
  }
  .jd-sheet.svelte-mf3s66 tr.jd-changed .jd-new,
  .jd-sheet.svelte-mf3s66 tr.jd-auto .jd-new {
    display: block;
    animation: svelte-mf3s66-jd-wipe 240ms var(--ease-snappy) calc(var(--i) * 50ms) both;
  }
  .jd-sheet.svelte-mf3s66 tr.jd-changed > td:last-child {
    background-image: linear-gradient(90deg, color-mix(in oklab, var(--mood-accent) 22%, transparent), transparent 70%);
  }
  .jd-sheet.svelte-mf3s66 tr.jd-auto > td:last-child {
    outline: 2px dashed color-mix(in oklab, var(--mood-accent) 60%, transparent);
    outline-offset: -3px;
  }
  @keyframes svelte-mf3s66-jd-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  @keyframes svelte-mf3s66-jd-pop { from { scale: 0.97; } to { scale: 1; } }
  @keyframes svelte-mf3s66-jd-glow {
    from { box-shadow: inset 0 0 0 2px var(--mood-accent), 0 0 0 4px color-mix(in oklab, var(--mood-accent) 35%, transparent); }
    to { box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; }
  }

  @media (prefers-reduced-motion: reduce) {
    .jd-sheet.svelte-mf3s66 tr.jd-target > td:last-child::after { animation: none; background: var(--mood-accent); }
    .jd-sheet.svelte-mf3s66 tr.jd-changed > td:last-child,
    .jd-sheet.svelte-mf3s66 tr.jd-auto > td:last-child { animation: svelte-mf3s66-jd-glow 1500ms ease-out both; }
    .jd-sheet.svelte-mf3s66 tr.jd-changed .jd-new,
    .jd-sheet.svelte-mf3s66 tr.jd-auto .jd-new { animation: svelte-mf3s66-jd-fade 200ms ease-out both; }
  }
  @keyframes svelte-mf3s66-jd-fade { from { opacity: 0; } to { opacity: 1; } }

  /* The sheet base of joborder/jdformat/JdPreview.svelte, so Step 1 shows the template exactly as the Format JD modal does. */
  .jd-sheet.svelte-vyqw3e td[style*="background"] { color: var(--color-gray-900); }
  .jd-sheet.svelte-vyqw3e table { width: 100% !important; border-collapse: collapse; font-size: 12px; }
  .jd-sheet.svelte-vyqw3e td { border: 1px solid var(--color-gray-900); padding: 4px 6px; vertical-align: top; position: relative; }

  .jd-sheet.svelte-vyqw3e td[contenteditable] { cursor: text; outline: none; }
  .jd-sheet.svelte-vyqw3e td[contenteditable]:focus { box-shadow: inset 0 0 0 2px var(--mood-accent); }
  .jd-sheet.svelte-vyqw3e .jd-reset {
    position: absolute;
    right: 4px;
    bottom: 4px;
    border-radius: var(--radius-mood-control);
    border: 1px solid var(--mood-line-2);
    background: var(--mood-surface);
    color: var(--mood-muted);
    padding: 0 6px;
    font-size: 11px;
    font-weight: 500;
  }
  .jd-sheet.svelte-vyqw3e .jd-reset:disabled { display: none; }

  /* The empty step invites the call note first: a faint accent glow (spec §8 Atmosphere). */
  .invite.svelte-15exmp6:not(:focus-visible) { box-shadow: 0 0 24px -6px color-mix(in oklab, var(--mood-accent) 35%, transparent); }

  /* An unanswered required tap group: the danger tint on the group (the tap-group rows have no input to tint). */
  div[role='group'][data-missing].svelte-1f261wv {
    background-color: color-mix(in oklab, var(--mood-danger) 8%, var(--mood-surface));
    box-shadow: 0 0 0 1px var(--mood-danger);
  }
  .seg.svelte-1f261wv { transition: background-color 300ms var(--ease-snappy), box-shadow 300ms var(--ease-snappy); }
  .seg.on.svelte-1f261wv { box-shadow: 0 0 8px color-mix(in oklab, var(--mood-accent) 60%, transparent); }
  @media (prefers-reduced-motion: reduce) { .seg.on.svelte-1f261wv { box-shadow: none; } }

  /* Tailwind preflight strips list markers and spacing; the public template is headings, paragraphs and bullets. */
  .published.svelte-sv7t3r ul { list-style: disc; padding-left: 1.25rem; margin: 0.25rem 0 0.75rem; }
  .published.svelte-sv7t3r p { margin: 0 0 0.75rem; }
  .published.svelte-sv7t3r :is(h1, h2, h3, h4) { font-weight: 600; margin: 0.75rem 0 0.25rem; }

  .ring.svelte-1wi5r9b { transition: stroke-dashoffset 500ms var(--ease-snappy); }
  .check.svelte-1wi5r9b { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 350ms var(--ease-snappy) 100ms; }
  .check.drawn.svelte-1wi5r9b { stroke-dashoffset: 0; }
  @media (prefers-reduced-motion: reduce) { .ring.svelte-1wi5r9b, .check.svelte-1wi5r9b { transition: none; } }

  /* An empty required field: danger tint and border in place of white (mood tokens only). */
  [data-missing] :is(input, select, textarea, [contenteditable]) {
    background-color: color-mix(in oklab, var(--mood-danger) 8%, var(--mood-surface));
    border-color: var(--mood-danger);
  }

  /* Create (Bold, spec §8): the ticket springs .94 -> 1, each check draws with a green flash, the job # rises last. */
  .ticket.svelte-pm4pv3 { animation: svelte-pm4pv3-ticket-in 420ms var(--ease-spring); }
  @keyframes svelte-pm4pv3-ticket-in { from { scale: 0.94; } }
  .check.svelte-pm4pv3 { stroke-dasharray: 14; animation: svelte-pm4pv3-draw 300ms var(--ease-snappy) forwards; stroke-dashoffset: 14; }
  @keyframes svelte-pm4pv3-draw { to { stroke-dashoffset: 0; } }
  .flash.svelte-pm4pv3 { animation: svelte-pm4pv3-flash 700ms ease-out; }
  @keyframes svelte-pm4pv3-flash { from { background-color: color-mix(in oklab, var(--mood-success) 15%, transparent); } }
  .jobno.svelte-pm4pv3 { animation: svelte-pm4pv3-rise 480ms var(--ease-spring) backwards; }
  @keyframes svelte-pm4pv3-rise { from { opacity: 0; translate: 0 28px; } }
  @keyframes svelte-pm4pv3-fade { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .ticket.svelte-pm4pv3, .flash.svelte-pm4pv3 { animation: none; }
    .check.svelte-pm4pv3 { animation: none; stroke-dashoffset: 0; }
    .jobno.svelte-pm4pv3 { animation-name: svelte-pm4pv3-fade; }
  }

  /* Window open: the shell's scale .98 -> 1 + fade, 200ms snappy; fade only under reduced motion (spec §8). */
  .win.svelte-todkc { animation: svelte-todkc-win-in 200ms var(--ease-snappy); }
  @keyframes svelte-todkc-win-in { from { opacity: 0; scale: 0.98; } }
  @keyframes svelte-todkc-fade-in { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .win.svelte-todkc { animation-name: svelte-todkc-fade-in; } }

  /* Step 1 <-> Step 2: the step body slides 24px in the direction of travel, 260ms snappy. Under reduced
     motion these rules drop out and the View Transition's own crossfade runs. */
  .step.svelte-todkc { view-transition-class: newjob-step; }
  @media (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(newjob-forward)::view-transition-old(*.newjob-step) { animation: 260ms var(--ease-snappy) both newjob-out-left; }
    html:active-view-transition-type(newjob-forward)::view-transition-new(*.newjob-step) { animation: 260ms var(--ease-snappy) both newjob-in-right; }
    html:active-view-transition-type(newjob-back)::view-transition-old(*.newjob-step) { animation: 260ms var(--ease-snappy) both newjob-out-right; }
    html:active-view-transition-type(newjob-back)::view-transition-new(*.newjob-step) { animation: 260ms var(--ease-snappy) both newjob-in-left; }
  }
  @keyframes newjob-out-left { to { opacity: 0; translate: -24px 0; } }
  @keyframes newjob-in-right { from { opacity: 0; translate: 24px 0; } }
  @keyframes newjob-out-right { to { opacity: 0; translate: 24px 0; } }
  @keyframes newjob-in-left { from { opacity: 0; translate: -24px 0; } }

	@keyframes svelte-12qhfyh-slideInFadeOut {
		0% {
			transform: translateY(-0.5rem);
			opacity: 0;
		}
		10% {
			transform: translateY(0);
			opacity: 1;
		}
		90% {
			transform: translateY(0);
			opacity: 1;
		}
		100% {
			transform: translateY(-0.5rem);
			opacity: 0;
		}
	}