/* Component styling from utiputi_forms, node 2:223.
   Existing form structure and illustrated selector arrangement are retained. */
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/fonts/manrope-semibold.ttf') format('truetype');font-style:normal;font-weight:500 800;font-display:swap}
:root{--success:#a8c96a;--success-ink:#4f6728;--selected:#8fb65a;--selected-paper:#f3f8e9;--link:#5a9fcb;--focus:#a8c96a;--error:#7b4350;--error-line:#f1bbc5;--error-paper:#fffbfb;--button-shadow:0 10px 24px rgb(111 143 66 / 24%)}
body{font-family:Manrope,Arial,sans-serif}
a,.link-button,.edit-link,#editReturn,.photo-link-details>summary{color:var(--link)}
a:hover,.link-button:hover,.edit-link:hover,#editReturn:hover{color:#315f78}
.choice:hover{border-color:#9d9d9d}
.choice:has(input:checked){border-color:var(--success);background:var(--selected-paper);box-shadow:inset 0 0 0 1px var(--success)}
input[type=radio]:checked{border-color:var(--selected)}input[type=radio]:checked::after{background:var(--selected)}
input[type=checkbox]:checked{border-color:var(--selected);background:var(--success)}
input:checked+.switch-track{background:var(--success)}
.switch-track{background:#d8d8d8}
.conditional{border-left-color:#dce9c7}
.step-list button.current{background:var(--selected-paper);border-color:#dce9c7}.current .step-number{background:var(--success)}
.progress-track>span{background:var(--success)}
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=hidden]),textarea,select{border-color:#c2c2c2;border-radius:16px;background:#fff}
input:not([type=radio]):not([type=checkbox]):hover:not(:disabled),textarea:hover:not(:disabled){border-color:#9d9d9d}
input:not([type=radio]):not([type=checkbox]):focus,textarea:focus,select:focus{border-color:var(--success);box-shadow:0 0 0 1px var(--success);outline:none}
input::placeholder,textarea::placeholder{color:#d8d8d8;opacity:1}
/* Field errors are explanatory text, never a second field-shaped card. */
.field-error,.error-message,.form-error,.photo-error{padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--error);font:400 14px/1.5 Manrope,Arial,sans-serif;margin:8px 0 0}
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--error-line)!important;background:var(--error-paper)!important;box-shadow:none!important}
#ageResult{display:block;margin-top:8px;font-size:14px;color:var(--success-ink)}
.requirement{color:var(--selected);font-weight:600}
.age-warning{margin:8px 0 0;color:var(--success-ink);font:400 14px/1.5 Manrope,Arial,sans-serif}
.step-list button:disabled:not(.current){opacity:1;color:rgb(51 51 51 / 60%);cursor:default}
.step-list button:disabled:not(.current) .step-number{color:rgb(51 51 51 / 60%)}
.photo-link-details>summary{list-style:none}.photo-link-details>summary::-webkit-details-marker{display:none}.photo-link-details>summary::marker{content:""}
.calendar-toggle.secondary{width:56px;min-width:56px;flex:0 0 56px;padding:16px;height:56px;min-height:56px;border-radius:16px}
.calendar-toggle img{width:24px;height:24px;max-width:24px}
.calendar-toggle:hover,.calendar-grid button:hover:not(:disabled),.calendar-grid button[aria-pressed=true]{background:var(--selected-paper);border-color:var(--success)}
.primary{background:linear-gradient(180deg,#a8c96a,#8fb65a);color:#fff;box-shadow:var(--button-shadow);font-weight:600}
.primary:hover:not(:disabled){box-shadow:0 12px 28px rgb(111 143 66 / 30%)}
.primary:active:not(:disabled){box-shadow:0 4px 12px rgb(111 143 66 / 22%)}
.primary.final{background:linear-gradient(180deg,#789b3c,#4f7224);box-shadow:0 10px 24px rgb(94 127 45 / 24%)}
.primary:disabled{background:#d9decf;color:#555;box-shadow:none;opacity:1}
.photo-dropzone.dragover,.photo-upload.is-dragover{background:var(--selected-paper);border-color:var(--success)}
.photo-mode-option:has(input:checked){border-color:var(--success);background:var(--selected-paper)}
#roleChoices>.question,#genreChoices>.question{margin-bottom:30px}
#roleChoices .switch-control,#genreChoices .switch-control{margin:4px 0 14px}
#roleChoices.inactive,#genreChoices.inactive{opacity:1}
#roleChoices.inactive .options,#genreChoices.inactive .options{opacity:.5}
@media(max-width:760px){.form-nav{box-shadow:0 -4px 24px rgb(61 61 61 / 10%)}.calendar-toggle.secondary{width:48px;min-width:48px;flex-basis:48px;padding:12px}.step-list button.current{background:transparent!important;border-color:transparent!important;box-shadow:none!important}}
@media(max-width:760px){
  /* On phones the calendar is an overlay, so the month grid cannot be
     clipped by the question/card or hidden behind the fixed navigation. */
  .calendar-panel:not([hidden]){
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(92px + env(safe-area-inset-bottom,0px));
    z-index:70;
    width:auto;
    max-width:none;
    max-height:calc(100dvh - 180px);
    margin:0;
    overflow:auto;
    padding:14px;
    border-radius:20px;
    box-shadow:0 18px 50px rgb(51 51 51 / 24%);
  }
  .calendar-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px}
  .calendar-toolbar select{min-width:0;width:100%;font-size:15px}
  .calendar-toolbar #closeCal{min-width:58px}
  .calendar-grid{gap:3px}
  .calendar-grid button{min-height:40px;font-size:15px}
}

/* Stable mobile layer: one source of truth for the fixed footer, calendar
   overlay, step fireworks and Farmin Aura toast. */
@media(max-width:760px){
  body{padding-bottom:0!important;overscroll-behavior-y:none}
  .layout{margin-bottom:0;padding-bottom:16px}
  .form-card{padding-bottom:calc(var(--mobile-footer-height,112px) + 12px)}
  .form-nav{position:fixed!important;left:0;right:0;bottom:0;z-index:30}
  body.keyboard-open .form-nav{display:none}
  .calendar-panel:not([hidden]){bottom:calc(112px + env(safe-area-inset-bottom,0px));z-index:70}
  .step-list button.level-up{z-index:6;overflow:visible}
  .step-list button.level-up::after{content:""!important;z-index:5;left:-44px;top:-42px;width:124px;height:112px;background:url('assets/ui/step-stars-burst.svg?v=4') center/contain no-repeat;clip-path:circle(0 at 50% 50%);animation:mobile-fireworks 1.25s ease-out both}
  .step-encouragement.is-visible{animation:farmin-fade 4.2s cubic-bezier(.2,.9,.25,1) both,toast-border 3.1s ease-in-out both}
}
@keyframes mobile-fireworks{
  0%{opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(.35) rotate(-12deg)}
  18%{opacity:1}
  58%{opacity:1;clip-path:circle(74% at 50% 50%);transform:scale(1) rotate(3deg)}
  100%{opacity:0;clip-path:circle(84% at 50% 50%);transform:scale(1.08) rotate(9deg)}
}
@keyframes farmin-fade{
  0%{opacity:0;transform:translate(-50%,18px)}
  12%{opacity:1;transform:translate(-50%,0)}
  70%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-8px)}
}
.field-error,.error-message,.form-error,.photo-error{color:#f88b70}
.field-error::before,.error-message::before,.form-error::before,.photo-error::before{content:"⚠";display:inline-block;margin-right:7px;color:#f88b70;font-size:14px;font-weight:700}
.age-warning{color:var(--success-ink)}
.age-warning::before{content:"ⓘ";display:inline-block;margin-right:7px;color:var(--selected);font-weight:700}
.choice-art-placeholder{color:#aaa;font-family:Nunito,Manrope,Arial,sans-serif;font-size:50px;font-weight:800}
.choice-description{display:block;margin:0;color:#666;font-size:12px;line-height:1.45;font-weight:400;text-align:center}
[data-question="graphic_style"] .options{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-question="graphic_style"] .visual-choice{min-height:310px;padding:16px}
[data-question="graphic_style"] .choice-art{width:180px;height:180px}
[data-question="graphic_style"] .choice-label{font-size:16px;font-weight:700}
.legal-consent{margin-top:12px}.legal-consent .option-body{display:block}.legal-consent a{position:relative;z-index:2}
@media(max-width:560px){[data-question="graphic_style"] .options{grid-template-columns:1fr}[data-question="graphic_style"] .visual-choice{min-height:0}[data-question="graphic_style"] .choice-art{width:160px;height:160px}}
.step-number{position:relative;overflow:visible}
.firework-star{position:absolute;left:50%;top:50%;z-index:50;pointer-events:none;line-height:1;font-family:Arial,sans-serif;font-weight:400}
.step-list button:has(.firework-star){z-index:40}
.step-list button.level-up::after{content:none!important}