/*
 * FLOCSS Lite
 * Foundation: reset, tokens, and element defaults
 * Layout: l-* page structure and flow
 * Component: c-* reusable controls
 * Project: p-* campaign-specific blocks
 * Utility / State: u-* and is-* helpers
 */

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

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

  body {
    min-block-size: 100vh;
    margin: 0;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  img,
  picture,
  svg,
  canvas {
    display: block;
    max-inline-size: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  button {
    border: 0;
    cursor: pointer;
  }

  fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  a {
    color: inherit;
  }

  :focus-visible {
    outline: 3px solid var(--campaign-color-text, #003544);
    outline-offset: 3px;
  }

  [hidden] {
    display: none !important;
  }

  /* Layout */
  .p-form-heading {
    display: block;
    padding: 0 1.25rem;
    text-align: center;
  }

  .p-page-intro .p-page-intro__title--form,
  .p-page-intro--form-heading {
    display: none;
  }

  .p-form-heading__text {
    padding-block: 0 1.875rem;
    color: #b42318;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
  }

  .l-stack {
    display: flex;
    flex-direction: column;
    gap: 1.68rem;
  }

  .l-stack--lg {
    gap: 2.8rem;
  }

  /* Component */
  .c-form-field {
    display: grid;
    gap: 0;
  }

  .c-form-control:focus,
  .c-form-control--select:focus {
    outline: 0;
  }

  .c-form-fieldset {
    display: grid;
    gap: 0;
  }

  .c-file-upload__meta {
    display: grid;
    gap: .28rem;
    color: #666;
    line-height: 1.5;
  }

  /* Utility */
  .u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  .p-receipt-preview {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 600px;
    margin-inline: auto;
    object-fit: contain;
  }

  /* Foundation: campaign tokens and base page surface */
  /*
   * Responsive type, spacing, heading, control, and CTA scale reference:
   * https://github.com/n2p-nonameproduce/iyemoncampaign/blob/981e88eca20ccabd600a36e0d7e592c401b234f8/assets/css/style.css
   */
  :root {
    --campaign-color-text: #003544;
    --campaign-color-heading: #f26fa9;
    --campaign-color-background: #ffe5f3;
    --campaign-color-divider: #fff;
    --campaign-color-error-surface: #003544;
    --campaign-color-button: #ff9ace;
    --campaign-color-button-secondary: #c9c9c9;
    --campaign-color-heading-shadow: #d84f89;
    --campaign-color-secondary-shadow: #a6a6a6;
    --campaign-color-error: #003544;
  }

  html {
    scroll-behavior: auto;
  }

  body {
    background: var(--campaign-color-background);
    color: var(--campaign-color-text);
  }

  /* Project */
  .p-campaign-hero {
    inline-size: 100%;
    max-width: 780px;
    margin: 0 auto;
  }

  .p-campaign-hero__image {
    display: block;
    inline-size: 100%;
    max-inline-size: none;
    block-size: auto;
    box-shadow: none;
    filter: none;
  }

  /* Layout */
  .l-form-shell {
    inline-size: 100%;
    max-width: 780px;
    margin-inline: auto;
    padding-block-end: 8.75rem;
  }

  .l-wizard {
    gap: 0;
  }

  .p-page-intro {
    gap: 0;
    text-align: center;
  }

  .p-page-intro__title {
    display: block;
    inline-size: 100%;
    margin-block: 2.5rem 1.875rem;
    padding-block: 1.25rem;
    border: 4px solid var(--campaign-color-heading);
    border-radius: 5px;
    outline: 2px solid #fff;
    outline-offset: -10px;
    background: var(--campaign-color-heading);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .p-page-intro__text {
    max-inline-size: none;
    margin: 0 0 3.75rem;
    padding: 1.25rem 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
  }

  .p-page-intro__text--left {
    text-align: start;
  }

  .p-page-intro__text--lead {
    margin-block-end: 1.875rem;
    font-weight: 700;
  }

  .p-page-intro .p-page-intro__text--confirm {
    margin-block-end: 0;
  }

  .p-page-intro__text--notes {
    inline-size: 100%;
    max-inline-size: 100%;
    text-align: left;
  }

  .p-media-placeholder {
    display: grid;
    place-items: center;
    min-block-size: 12rem;
    border: 1px solid color-mix(in srgb, var(--campaign-color-text) 35%, transparent);
    border-radius: 4px;
    background: #fff;
    color: color-mix(in srgb, var(--campaign-color-text) 65%, transparent);
    text-align: center;
  }

  .p-media-placeholder--wallpaper {
    inline-size: min(100%, 25rem);
    aspect-ratio: 4 / 5;
    margin-inline: auto;
  }

  .p-project-variable {
    color: var(--campaign-color-error);
    font-weight: 700;
  }

  .l-wizard__step {
    gap: 0;
    padding-inline: 2.5rem;
  }

  /* Project */
  .p-entry-section {
    display: grid;
    gap: 0;
    padding: 0;
    border: 0;
  }

  .p-entry-section__heading {
    margin-block: 5rem 3.75rem;
    padding-block: 1.5rem;
    border-block: 1px solid var(--campaign-color-divider);
    color: var(--campaign-color-heading);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: start;
  }

  .p-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 0;
    margin-block-end: 3.75rem;
    font-size: 1rem;
  }

  .p-field-row__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-block-size: 3.5rem;
    padding-inline-end: 1rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
  }

  /* Component */
  .c-badge {
    display: inline-block;
    flex: 0 0 auto;
    order: -1;
    margin: 0 .625rem 0 0;
    padding: .125rem .5rem;
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .c-badge--required {
    background: var(--campaign-color-heading);
  }

  .c-badge--optional {
    background: #999;
  }

  .c-form-control,
  .c-form-control--select {
    inline-size: 100%;
    block-size: 3.5rem;
    min-block-size: 3.5rem;
    padding-block: 0;
    padding-inline: .625rem;
    border: 1px solid #767676;
    border-radius: 4px;
    background: #fff;
    color: var(--campaign-color-text);
    font-size: 1rem;
  }

  .p-question-list {
    display: grid;
    gap: 0;
  }

  .p-question {
    display: grid;
    gap: 1.75rem;
    min-inline-size: 0;
    margin-block-end: 3.75rem;
    padding: 0;
    border: 0;
    font-size: 1rem;
  }

  .p-question__legend {
    display: flex;
    align-items: flex-start;
    gap: 0;
    inline-size: 100%;
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
  }

  .p-question__legend > .c-badge {
    margin-block-start: .1rem;
  }

  .p-question__note {
    color: var(--campaign-color-text);
    font-size: 1em;
    font-weight: 400;
  }

  .p-question__choices {
    display: grid;
    gap: 1rem;
    margin-block-start: 1.75rem;
    padding-inline-start: 0;
  }

  .c-choice {
    display: inline-flex;
    align-items: flex-start;
    gap: .56rem;
    cursor: pointer;
    line-height: 1.6;
  }

  .c-choice__control {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    min-block-size: 0;
    margin-block-start: .2em;
    padding: 0;
    accent-color: var(--campaign-color-heading);
  }

  .c-choice__control[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    border: 1px solid #767676;
    border-radius: 50%;
    background: #fff;
  }

  .c-choice__control[type="radio"]:checked {
    border-color: var(--campaign-color-heading);
    background-color: var(--campaign-color-heading);
    background-image: radial-gradient(circle, #fff 0 22%, transparent 25%);
  }

  .c-choice__control[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    border: 1px solid #767676;
    border-radius: 2px;
    background: #fff;
  }

  .c-choice__control[type="checkbox"]:checked {
    border-color: var(--campaign-color-heading);
    background-color: var(--campaign-color-heading);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .p-question__detail {
    inline-size: min(100%, 34rem);
    margin-block-start: .5rem;
  }

  [data-other-answer][hidden] {
    display: none;
  }

  .p-note-list {
    margin: 0 2.5rem 3.75rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
  }

  .p-note-list__item {
    margin: 0;
  }

  .p-note-list__item + .p-note-list__item {
    margin-block-start: .625rem;
  }

  .c-file-upload {
    display: grid;
    justify-items: center;
    gap: .84rem;
    min-block-size: 3.5rem;
    padding: 1rem;
    border: .64px dashed #767676;
    border-radius: 4px;
    background: #fff;
    font-size: 1rem;
    text-align: center;
  }

  .c-file-upload__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 3rem;
    padding-inline: .75rem;
    border: 1px solid #767676;
    border-radius: 4px;
    background: #f5f5f5;
    color: var(--campaign-color-text);
    font: inherit;
    font-weight: 400;
    cursor: pointer;
  }

  .c-file-upload__actions {
    display: grid;
    gap: .84rem;
    inline-size: min(100%, 20rem);
  }

  .c-file-upload__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .c-file-upload__button:focus-visible {
    outline: 2px solid var(--campaign-color-text);
    outline-offset: 2px;
  }

  .c-terms {
    max-block-size: 18rem;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-color: #9c9c9c #ededed;
    scrollbar-gutter: stable;
    margin-block-end: 1.25rem;
    padding: 1.25rem;
    border: 1px solid #767676;
    border-radius: 4px;
    background: #fff;
    font-size: 1rem;
    line-height: 1.7;
  }

  .c-terms::-webkit-scrollbar {
    inline-size: .75rem;
  }

  .c-terms::-webkit-scrollbar-track {
    background: #ededed;
  }

  .c-terms::-webkit-scrollbar-thumb {
    border: 2px solid #ededed;
    border-radius: 999px;
    background: #9c9c9c;
  }

  .p-terms-document {
    inline-size: 100%;
    color: var(--campaign-color-text);
    font-weight: 400;
  }

  .p-terms-document__heading {
    margin: 1.5em 0 .35em;
    color: var(--campaign-color-text);
    font: inherit;
    font-weight: 700;
  }

  .p-terms-document__heading:first-child {
    margin-block-start: 0;
  }

  .p-terms-document > p {
    margin: 0 0 .65em;
  }

  .p-terms-document a {
    color: inherit;
    overflow-wrap: anywhere;
  }

  .c-choice--terms-agreement {
    align-items: center;
    justify-content: center;
    gap: .75rem;
    inline-size: min(100%, 22rem);
    min-block-size: 4rem;
    margin: 1.5rem auto 0;
    padding: .875rem 1.5rem;
    background: #fff;
    color: var(--campaign-color-text);
    font-size: 1rem;
    font-weight: 700;
  }

  .c-choice--terms-agreement .c-choice__control {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin: 0;
  }

  /* Layout */
  .l-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    inline-size: 100%;
    margin-block-start: 5rem;
  }

  .c-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    inline-size: min(100%, 18.75rem);
    max-inline-size: 100%;
    min-block-size: 4.375rem;
    padding: .8em 1.5em;
    border: 0;
    border-radius: 60px;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 225ms cubic-bezier(.22, 1, .36, 1), box-shadow 225ms cubic-bezier(.22, 1, .36, 1);
  }

  .c-button--primary {
    background: var(--campaign-color-button);
    box-shadow: 0 5px 0 var(--campaign-color-heading-shadow);
  }

  .c-button--secondary {
    background: var(--campaign-color-button-secondary);
    box-shadow: 0 5px 0 var(--campaign-color-secondary-shadow);
  }

  /* Project */
  .p-entry-summary {
    display: grid;
  }

  .l-wizard > .p-entry-section,
  .l-wizard > .l-actions {
    margin-inline: 2.5rem;
  }

  .l-wizard > .l-actions {
    inline-size: auto;
  }

  .l-wizard > .l-actions--centered {
    inline-size: 100%;
    margin-inline: 0;
  }

  .p-entry-summary__row {
    display: grid;
    grid-template-columns: 35% minmax(0, 1fr);
    gap: .625rem;
    margin-block-end: 3.75rem;
    padding-block-end: 1.25rem;
    border-block-end: 1px solid var(--campaign-color-divider);
    font-size: 1rem;
    line-height: 1.6;
  }

  .p-entry-summary__label {
    font-weight: 700;
  }

  .p-entry-summary__value {
    margin: 0;
    color: var(--campaign-color-text);
  }

  .l-stack--center {
    align-items: center;
    text-align: center;
  }

  .p-wallpaper {
    inline-size: calc(100% - 5rem);
    margin-inline: auto;
    font-size: 1rem;
    line-height: 1.7;
  }

  .p-wallpaper__copy {
    font-weight: 700;
  }

  .p-wallpaper__image {
    display: block;
    inline-size: min(100%, 25rem);
    block-size: auto;
    margin-inline: auto;
  }

  .p-wallpaper__title {
    margin-block: 2.5rem;
    color: var(--campaign-color-heading);
    font-size: 1.375rem;
  }

  /* State */
  .is-invalid.c-form-control,
  .is-invalid.c-form-control--select,
  .is-invalid[type="file"] {
    border-color: var(--campaign-color-error);
    box-shadow: 0 0 0 1px var(--campaign-color-error);
  }

  .c-form-message,
  .c-form-message--error {
    inline-size: fit-content;
    margin: .5rem 0 0;
    padding: .375rem .75rem;
    border-radius: 4px;
    background: var(--campaign-color-error-surface);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
  }

  .c-choice--terms-agreement + .c-form-message {
    margin-inline: auto;
    text-align: center;
  }

  .c-choice:has(.is-invalid) {
    color: var(--campaign-color-text);
  }

  [aria-invalid="true"]:focus-visible {
    outline-color: var(--campaign-color-error);
  }

  /* Responsive */
  @media (hover: hover) {
    .c-button:hover {
      transform: translateY(2px);
      box-shadow: 0 3px 0 var(--campaign-color-heading-shadow);
    }

    .c-button--secondary:hover {
      box-shadow: 0 3px 0 var(--campaign-color-secondary-shadow);
    }
  }

  @media (max-width: 1023.9px) {
    .p-campaign-hero {
      max-width: none;
    }

    .l-form-shell {
      inline-size: 100%;
      max-inline-size: 43.75rem;
      padding: 0 1.25rem 5rem;
    }

    .p-page-intro__title {
      margin-block: 1.25rem 1.875rem;
      padding-block: .625rem;
      outline-offset: -6px;
      font-size: 1.875rem;
    }

    .p-page-intro__text {
      margin-block-end: 2.5rem;
      padding: .9375rem 0;
      font-size: 1rem;
    }

    .p-page-intro__text--lead {
      margin-block-end: 1.25rem;
    }

    .l-wizard__step {
      padding-inline: 0;
    }

    .p-entry-section__heading {
      margin-block: 2.5rem 1.875rem;
      padding-block: .75rem;
      font-size: 1.375rem;
    }

    .p-field-row {
      grid-template-columns: 1fr;
      gap: .375rem;
      margin-block-end: 1.875rem;
      font-size: 1rem;
    }

    .p-field-row__label {
      min-block-size: auto;
      padding: 0;
      font-size: 1rem;
    }

    .c-badge {
      margin: 0 .5rem 0 0;
      padding: .1875rem .5rem;
      font-size: 1rem;
    }

    .c-form-control,
    .c-form-control--select {
      block-size: 3rem;
      min-block-size: 3rem;
      font-size: 1rem;
    }

    .p-question {
      gap: 1.25rem;
      margin-block-end: 1.875rem;
      font-size: 1rem;
    }

    .p-question__legend {
      font-size: 1rem;
    }

    .p-question__legend > .c-badge {
      margin-block-start: .1rem;
    }

    .p-question__choices {
      gap: 1rem;
      margin-block-start: 1.25rem;
      padding-inline-start: 0;
    }

    .c-choice__control {
      inline-size: 1rem;
      block-size: 1rem;
    }

    .c-choice--terms-agreement {
      inline-size: min(100%, 18rem);
      min-block-size: 3.5rem;
      margin-block-start: 1.25rem;
      padding: .75rem 1.25rem;
      font-size: 1rem;
    }

    .c-choice--terms-agreement .c-choice__control {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }

    .p-note-list {
      margin: 0 0 2.5rem;
      font-size: 1rem;
    }

    .c-file-upload {
      min-block-size: 3rem;
      font-size: 1rem;
    }

    .c-terms {
      font-size: 1rem;
    }

    .l-actions {
      flex-direction: column;
      gap: 1.25rem;
      margin-block-start: 2.5rem;
    }

    .c-button {
      inline-size: min(100%, 17.5rem);
      min-block-size: 3.125rem;
      padding: .7em 1.5em;
      border-radius: 30px;
      box-shadow: 0 3px 0 var(--campaign-color-heading-shadow);
      font-size: 1.125rem;
    }

    .c-button--secondary {
      box-shadow: 0 3px 0 var(--campaign-color-secondary-shadow);
    }

    .l-wizard > .p-entry-section,
    .l-wizard > .l-actions {
      margin-inline: 0;
    }

    .p-entry-summary__row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      margin-block-end: 1.875rem;
      padding-block-end: .9375rem;
      font-size: 1rem;
    }

    .p-wallpaper {
      inline-size: 100%;
      font-size: 1rem;
    }

    .p-wallpaper__title {
      margin-block: 1.875rem;
      font-size: 1.375rem;
    }

    .c-form-message,
    .c-form-message--error {
      padding: .3125rem .625rem;
      font-size: 1rem;
    }
  }

  /* Let text grow and wrap without shrinking important explanatory copy. */
  .c-copy-phrase,
  .c-copy-group {
    display: inline-block;
    max-inline-size: 100%;
    vertical-align: top;
  }

  /* Sentence boundaries stay stable; narrow screens wrap between phrases. */
  .c-copy-clause {
    display: block;
    text-wrap: wrap;
  }

  .c-form-field,
  .p-field-row__label,
  .p-question__legend > span,
  .c-choice > span,
  .p-entry-summary__label,
  .p-entry-summary__value {
    min-inline-size: 0;
  }

  .p-entry-summary__value,
  .c-file-upload__meta,
  .c-form-message {
    overflow-wrap: anywhere;
  }

  .p-question__note {
    display: block;
  }

  .p-form-heading__text,
  .p-page-intro__title,
  .p-page-intro__text,
  .p-question__legend,
  .p-wallpaper__title,
  .p-note-list__item {
    text-wrap: balance;
  }

  /* Keep selected breaks on small screens; let wide-screen copy flow. */
  @media (min-width: 768px) {
    .p-form-heading__text,
    .p-page-intro__text,
    .p-note-list__item,
    .p-wallpaper__title {
      text-wrap: wrap;
    }

    .p-form-heading__text .c-copy-clause,
    .p-page-intro__text .c-copy-clause,
    .p-note-list__item .c-copy-clause,
    .p-wallpaper__title .c-copy-clause {
      display: inline;
    }
  }

  @media (max-width: 479.9px) {
    .p-entry-summary__row {
      grid-template-columns: minmax(0, 1fr);
    }
  }