/* transitions-dev snippets; shared tokens are already installed in release.css. */
.t-resize {
  transition:
    width  var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}

@media (prefers-reduced-motion: reduce) {
  .t-resize { transition: none !important; }
}

.t-page-slide {
  position: relative;
}
.t-page-slide .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}
.t-page-slide .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}
.t-page-slide .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition:
    opacity   var(--page-fade-dur)  var(--page-fade-ease),
    transform var(--page-slide-dur) var(--page-slide-ease),
    filter    var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}
.t-page-slide[data-page="1"] .t-page[data-page-id="1"],
.t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}

@media (prefers-reduced-motion: reduce) {
  .t-page-slide .t-page { transition: none !important; }
}

/* Wrapper drives the appear animation; it doesn't own any
   sizing or color so you can drop in any icon. */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
/* overflow: visible keeps the stroke from clipping while it
   draws; display: block kills the inline whitespace under SVGs. */
.t-success-check svg { display: block; overflow: visible; }
/* Stroke-draw setup. Replace 20 with the result of
   path.getTotalLength() for your path; round caps mean any
   sub-pixel overshoot is invisible. */
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}


/* Application layout and the third screen use the installed motion primitives. */
.career-pages[data-page="3"] .t-page[data-page-id="3"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}
.doggyfide-root.careers-page .career-application.application-host { background: white; padding: 32px; border-color: #dce5e5; scroll-margin-top: 32px; }
.doggyfide-root.careers-page #career-form.career-form { display: block; }
.career-form-top { display:flex; justify-content:space-between; gap:16px; font-size:.875rem; font-weight:600; color:#414e50; }
.career-step-count { color:#697578; font-variant-numeric:tabular-nums; white-space:nowrap; }
.career-progress { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; margin:24px 0 32px; list-style:none; gap:8px; }
.career-progress button { display:flex; align-items:center; gap:8px; width:100%; border:0; border-bottom:2px solid #e7ecec; background:transparent; padding:0 0 14px; color:#677375; font-size:.8125rem; font-weight:600; text-align:left; cursor:pointer; }
.career-progress button:disabled { opacity:1; cursor:default; }
.career-progress button[aria-current="step"] { color:#075f6a; border-bottom-color:#008da5; }
.career-progress button[data-complete] { color:#2b6067; border-bottom-color:#a8d6db; }
.career-progress-number { display:grid; place-items:center; width:24px; height:24px; flex-shrink:0; border-radius:50%; background:#f0f3f3; font-size:.75rem; }
.career-progress button[aria-current="step"] .career-progress-number,
.career-progress button[data-complete] .career-progress-number { background:#e2f3f5; color:#006879; }
/* Keep slide clipping outside the controls' focus outlines. The resize
   measurement includes this gutter; negative margins preserve field spacing. */
.career-pages { --career-page-gutter:10px; overflow:hidden; margin:calc(-1 * var(--career-page-gutter)); }
.career-step.t-page { inset:var(--career-page-gutter) var(--career-page-gutter) auto; }
.career-step-heading { margin-bottom:26px; }
.doggyfide-root .career-step-heading h3 { font-size:2rem; line-height:1.2; text-wrap:balance; outline:none; }
.doggyfide-root .career-step-heading p { margin-top:10px; font-size:.9375rem; line-height:1.6; color:#627073; }
.career-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; }
.career-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.career-label { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:.875rem; line-height:1.4; font-weight:600; }
.career-label small { font-size:.75rem; color:#728083; font-weight:400; }
.career-field:has([name="phone"]), .career-field:has([name="availability"]), .career-field:has([name="portfolio_url"]), .career-field:has(textarea), .career-market, .career-driving { grid-column:1/-1; }
.career-field input, .career-field select, .career-field textarea { display:block; width:100%; min-width:0; min-height:48px; padding:12px 14px; border:1px solid #d8e1e1; border-radius:12px; background:#fbfcfc; color:#15292c; font:inherit; font-size:1rem; line-height:1.4; }
.career-field textarea { resize:vertical; min-height:100px; }
.career-field input::placeholder, .career-field textarea::placeholder { color:#8b9698; }
.career-field input:focus-visible, .career-field select:focus-visible, .career-field textarea:focus-visible, .career-choice:focus-within { outline:2px solid #008da5; outline-offset:3px; }
.career-field [aria-invalid="true"] { border-color:#ad463c; }
.career-field-error { font-size:.8125rem; line-height:1.5; color:#a63d35; }
.career-field-error[hidden] { display:none; }
.career-market { min-width:0; margin:0; padding:0; border:0; }
.career-market legend { font-size:.875rem; font-weight:600; line-height:1.4; margin-bottom:12px; }
.career-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.career-choice { display:flex; align-items:center; gap:10px; padding:14px 12px; min-height:54px; border:1px solid #d8e1e1; border-radius:12px; font-size:.875rem; cursor:pointer; }
.career-choice:has(input:checked) { border-color:#008da5; background:#f0f9fa; }
.career-choice input { margin:0; width:16px; height:16px; flex-shrink:0; accent-color:#008da5; }
.career-driving { display:grid; gap:12px; }
.career-driving label, .career-consent { display:flex; align-items:flex-start; gap:10px; font-size:.875rem; line-height:1.5; }
.career-driving input, .career-consent input { width:18px; height:18px; margin:2px 0 0; flex-shrink:0; accent-color:#008da5; }
.career-review { border:1px solid #e5ebeb; border-radius:16px; padding:20px; background:#f8fafa; }
.career-review-group + .career-review-group { border-top:1px solid #dde6e6; margin-top:20px; padding-top:20px; }
.career-review-group > div { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.doggyfide-root .career-review h4 { font:600 .9375rem/1.5 Inter,sans-serif; letter-spacing:0; }
.career-review button { border:0; background:transparent; padding:4px 0; min-height:32px; color:#007383; font-size:.8125rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.career-review dl { display:grid; grid-template-columns:minmax(0,100px) minmax(0,1fr); gap:10px 16px; margin:16px 0 0; font-size:.875rem; line-height:1.5; }
.career-review dt { color:#6c7a7d; }
.career-review dd { margin:0; color:#223a3e; overflow-wrap:anywhere; white-space:pre-wrap; }
.career-consent { margin-top:22px; }
.career-consent a { text-decoration:underline; text-underline-offset:3px; color:#007383; }
.career-status { margin:18px 0 0; font-size:.875rem; line-height:1.5; color:#627073; }
.career-status:empty { display:none; }
.career-status[data-state="error"] { color:#a63d35; }
.career-form-actions { display:flex; align-items:center; justify-content:flex-end; gap:20px; padding-top:28px; margin-top:26px; border-top:1px solid #e5ebeb; }
.career-back { border:0; background:transparent; padding:12px 8px; min-height:48px; font-weight:600; color:#5f7073; cursor:pointer; margin-right:auto; }
.career-back[hidden] { display:none; }
.doggyfide-root .career-next.button { gap:14px; padding:14px 24px; min-height:52px; min-width:170px; background:#133a40; color:white; }
.doggyfide-root .career-next.button:disabled { background:#e5ebeb; color:#627073; cursor:default; opacity:1; }
.career-form-help { text-align:center; font-size:.75rem; line-height:1.5; color:#7d8a8d; margin-top:18px!important; }
.career-success { padding:32px 8px; text-align:center; }
.career-success .t-success-check { background:#e9f7f7; color:#00848f; border-radius:50%; padding:14px; margin-bottom:26px; }
.doggyfide-root .career-success h3 { font-size:2rem; outline:none; }
.doggyfide-root .career-success p { color:#627073; font-size:1rem; line-height:1.6; margin:16px auto 0; max-width:390px; }
.career-reference { display:flex; flex-direction:column; gap:8px; padding:16px; background:#f6f9f9; border-radius:12px; margin:24px 0; font-size:.8125rem; }
.career-reference code { font-size:.8125rem; overflow-wrap:anywhere; }
@container doggyfide (max-width:767px) {
  .doggyfide-root.careers-page .career-application.application-host { padding:24px; }
}
@container doggyfide (max-width:600px) {
  .career-fields { grid-template-columns:1fr; }
  .career-progress { gap:6px; }
  .career-progress button { gap:6px; font-size:.75rem; }
  .career-progress-number { width:22px; height:22px; }
  .career-step-heading h3 { font-size:1.75rem!important; }
  .career-next.button { flex:1; min-width:0!important; }
  .career-review dl { grid-template-columns:1fr; gap:4px; }
  .career-review dd + dt { margin-top:10px; }
}
@container doggyfide (max-width:360px) {
  .career-choice-grid { grid-template-columns:1fr; }
  .career-progress button { flex-direction:column; align-items:flex-start; }
}