/* A4: the two questions on the left, the pledge (with Clippy on top) on the right. On .onboarding-commit,
   data-inked means the signature's going on and data-pledged that it's signed. */
@layer sections {
  /* A4's row grows to fit it (the sheet scrolls if it has to), so nothing here gets cut off. */
  .onboarding-row[data-state="active"]:has(.onboarding-commit) {
    min-block-size: max-content;
  }

  .onboarding-commit {
    position: relative;
    block-size: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;

    &[data-pledged] .onboarding-commit__unsigned,
    &:not([data-pledged]) .onboarding-commit__signed {
      display: none;
    }
  }

  .onboarding-commit__questions {
    position: relative;
    min-inline-size: 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 28px;
    border: 1px solid var(--border-header);
    border-radius: 8px;
    background: var(--white);
  }

  .onboarding-commit__question {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 0 26px;

    & + & {
      border-block-start: 1px solid var(--border-grid);
    }

    &:first-child {
      padding-block-start: 24px;
    }
  }


  .onboarding-commit__label {
    font: 700 26px/1.15 var(--font-cell);
    letter-spacing: -0.6px;
  }

  .onboarding-commit__finish {
    min-block-size: 22px;
    font: 16px/22px var(--font-cell);

    &[data-late] {
      color: var(--orange-800);
    }
  }

  /* Chips: outlined until picked, then blue with a tick. The radio underneath is for keyboards and screen
     readers; the chip is what shows. */
  .onboarding-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .onboarding-chip {
    --icon-size: 18px;

    position: relative;
    block-size: 48px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    border: 1px solid var(--grey-600);
    border-radius: 4px;
    background: var(--white);
    font: 500 16px var(--font-chrome);
    color: var(--text-primary);
    white-space: nowrap;
    cursor: pointer;

    &:hover {
      border-color: var(--selection);
    }

    &:has(:checked) {
      border-color: var(--selection);
      background: var(--blue-50);
      box-shadow: inset 0 0 0 1px var(--selection);
      color: var(--blue-700);
    }

    &:has(:focus-visible) {
      outline: 2px solid var(--blue-700);
      outline-offset: 2px;
    }

    &:has(:disabled) {
      cursor: default;

      &:hover:not(:has(:checked)) {
        border-color: var(--grey-600);
      }
    }
  }

  .onboarding-chip__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .onboarding-chip__check {
    .onboarding-chip:not(:has(:checked)) & {
      display: none;
    }
  }


  /* The pledge */

  .onboarding-commit__side {
    position: relative;
    min-inline-size: 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }

  .onboarding-pledge {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 112px 0 0; /* Clippy sits in here */
    border: 1px solid var(--border-header);
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--card-shadow);
  }

  .onboarding-pledge__header {
    block-size: 30px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-block-end: 1px solid var(--border-header);
    border-radius: 8px 8px 0 0;
    background: var(--green-header);
    font: 700 13px var(--font-cell);
  }


  .onboarding-pledge__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 24px 20px;
  }

  .onboarding-pledge__text {
    margin: 0;
    font: 700 30px/1.3 var(--font-cell);
    letter-spacing: -0.6px;
    text-wrap: pretty;
  }

  /* An answer dropped into the sentence, underlined like the named range it is. */
  .onboarding-pledge__blank {
    border-block-end: 3px dotted var(--blue-700);
    color: var(--blue-700);

    &[data-empty] {
      border-color: var(--text-placeholder);
      color: var(--text-placeholder);
    }
  }


  .onboarding-pledge__accountable {
    margin-block-start: -6px;
    font: 14px/1.4 var(--font-chrome);
    color: var(--text-secondary);
  }

  /* Where the pledge's hours will come from: Lapse, or the Hackatime plugin. */
  .onboarding-pledge__tracker {
    margin-block-start: -10px;
    font: 14px/1.4 var(--font-chrome);
    color: var(--text-secondary);
  }

  /* The signature line only shows once there's something on it, but always keeps its room, so the button
     below doesn't move out from under your finger as you hold it. */
  .onboarding-pledge__signature {
    position: relative;
    block-size: 48px;
    border-block-end: 1px solid var(--border-header);

    .onboarding-commit:not([data-inked]) & {
      visibility: hidden;
    }
  }



  /* The ink that runs along the line as you sign; the controller sets how far. */
  .onboarding-pledge__ink {
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 2px;
    background: var(--text-primary);
  }

  .onboarding-pledge__name {
    position: absolute;
    inset-block-end: 2px;
    inset-inline: 2px 0;
    overflow: hidden;
    white-space: nowrap;
    font: 600 42px/1 var(--font-signature);
    color: var(--blue-700);
  }




  /* Clippy, perched on the pledge card, with room for a speech bubble to his left. */
  .onboarding-mascot {
    position: absolute;
    inset-block-start: -112px;
    inset-inline: 0 24px;
    block-size: 112px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    pointer-events: none;

    @media (prefers-reduced-motion: no-preference) {
      transition: translate 160ms cubic-bezier(0.3, 1.5, 0.5, 1);
    }

    &[data-hop] {
      translate: 0 -14px;
    }
  }

  .onboarding-mascot__bubble {
    max-inline-size: 220px;
    margin-block-end: 34px;
    padding: 8px 12px;
    border: 1px solid #e0d68a;
    border-radius: 10px 10px 2px 10px;
    background: #fff8c4;
    box-shadow: 0 1px 3px rgb(60 64 67 / 20%);
    font: 500 14px/1.35 var(--font-chrome);
    color: var(--text-primary);
    text-wrap: pretty;

    &:empty {
      display: none;
    }
  }

  /* One 124×93 frame of Clippy's sprite sheet at a time; mascot/clippy.js sets which (--frame-x, --frame-y). */
  .onboarding-mascot__sprite {
    --frame-x: 0;
    --frame-y: 0;

    flex: none;
    display: block;
    inline-size: 124px;
    block-size: 93px;
    background-repeat: no-repeat;
    background-position: calc(var(--frame-x) * -124px) calc(var(--frame-y) * -93px);
  }

  /* Signing: a wide button you hold down. A darker red fills it from the left; the controller sets how far. */
  .onboarding-commit__unsigned {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .onboarding-hold {
    position: relative;
    inline-size: 100%;
    block-size: 60px;
    justify-content: center;
    gap: 10px;
    padding: 0 28px;
    overflow: hidden;
    border-radius: 30px;
    user-select: none;
    touch-action: none;
    -webkit-touch-callout: none;

    &[data-holding] {
      scale: 0.97;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: scale 120ms;
    }

    > :not(.onboarding-hold__fill) {
      position: relative;
    }
  }

  .onboarding-hold__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    background: #b8233a;
  }

  .onboarding-hold__spinner {
    animation: onboarding-spin 900ms linear infinite;

    :not([data-signing]) > & {
      display: none;
    }
  }

  .onboarding-hold__pen {
    [data-signing] > & {
      display: none;
    }
  }

  .onboarding-commit__form {
    display: contents;
  }

  .onboarding-commit__sign-hint {
    min-block-size: 19px;
    text-align: center;
    font: 14px/1.35 var(--font-cell);
    color: var(--text-secondary);
  }

  .onboarding-commit__error {
    font: 14px/1.45 var(--font-chrome);
    color: var(--red-800);
  }

  .onboarding-commit__signed {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    @media (prefers-reduced-motion: no-preference) {
      animation: onboarding-rise 420ms cubic-bezier(0.2, 0, 0, 1) both;
    }
  }

  .onboarding-commit__title {
    font: 700 40px/1.08 var(--font-cell);
    letter-spacing: -1.2px;
  }

  @keyframes onboarding-rise {
    from {
      opacity: 0;
      translate: 0 12px;
    }
  }

  @keyframes onboarding-spin {
    to {
      rotate: 1turn;
    }
  }
}

/* Phones: the pledge goes under the questions, and type comes down. */
@layer sections {
  @media (width <= 600px) {
    .onboarding-commit {
      block-size: auto;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
    }

    .onboarding-commit__questions {
      padding-inline: 16px;
    }

    .onboarding-commit__label {
      font-size: 20px;
    }

    .onboarding-chip {
      block-size: 40px;
      padding-inline: 12px;
      font-size: 15px;
    }


    .onboarding-pledge__text {
      font-size: 22px;
    }

    .onboarding-commit__title {
      font-size: 30px;
    }
  }
}