/* ==========================================================================
   PLOP! — the activity sheet.

   It is drawn as a photocopied worksheet: a big sheet of paper, a heavy rule
   under the heading, labels in the label voice, and inputs that are ruled lines
   rather than boxes.

   The playfulness stops exactly where usability starts. Labels are above every
   field and always visible; hints sit under the label, not inside the input;
   the required mark is decorative and the real signal is aria-required; errors
   are visible text tied to their input with aria-errormessage; the focus ring
   is the ordinary one and nothing here removes an outline.
   ========================================================================== */

.plan__sheet {
  position: relative;
  background: #fff;
  padding: clamp(1.4rem, 4vw, 3.2rem);
  box-shadow: var(--lift-photo);
  rotate: -.4deg;
  /* the punched holes down the left margin */
  background-image:
    radial-gradient(circle 7px at 1.6rem 4rem, var(--table-now) 98%, transparent),
    radial-gradient(circle 7px at 1.6rem 11rem, var(--table-now) 98%, transparent),
    radial-gradient(circle 7px at 1.6rem 18rem, var(--table-now) 98%, transparent);
  padding-left: clamp(2.6rem, 6vw, 4.4rem);
}
.plan__headline { max-width: 12ch; }
.plan__intro { margin: .9rem 0 1.8rem; }

.plan__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 1.8rem);
}
.field--wide { grid-column: 1 / -1; }

.field__label { display: block; color: var(--ink-soft); }
.field__req { color: var(--tomato); margin-left: .25rem; }
.field__hint { font-size: var(--t-tiny); color: var(--ink-soft); margin-top: .15rem; }

/* a ruled line, not a box */
.field__input {
  width: 100%;
  margin-top: .35rem;
  padding: .55rem .2rem;
  border: 0;
  border-bottom: 2px solid rgba(23, 23, 23, .35);
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.05rem;          /* 16px+ so iOS does not zoom the page on focus */
  border-radius: 0;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.field__input:focus {
  outline: none;
  border-bottom-color: var(--cobalt);
  background: rgba(21, 87, 213, .05);
}
.field__input:focus-visible { outline: var(--focus); outline-offset: 2px; }
textarea.field__input { border: 2px solid rgba(23, 23, 23, .28); padding: .6rem; resize: vertical; }

.field__input[aria-invalid="true"] { border-bottom-color: var(--tomato); background: rgba(240, 79, 61, .07); }
.field__error { color: var(--tomato); font-size: var(--t-small); margin-top: .3rem; font-weight: 600; }

.plan__errors {
  margin-bottom: 1.2rem;
  padding: .8rem 1rem;
  background: var(--tomato);
  color: #fff;
  font-weight: 600;
  rotate: -.6deg;
}

/* --- what sounds fun: paper chips ---------------------------------------- */
.plan__interests { border: 0; padding: 0; margin: clamp(1.4rem, 4vw, 2.2rem) 0 0; }
.plan__interests legend { color: var(--ink-soft); padding: 0; }
.plan__hint { font-size: var(--t-tiny); color: var(--ink-soft); margin-top: .15rem; }
.plan__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }

.chip {
  display: inline-block;
  padding: .55rem 1rem;
  background: var(--paper);
  border: 2px solid rgba(23, 23, 23, .28);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: var(--track-label);
  cursor: pointer;
  rotate: var(--tilt, 0deg);
  transition: transform var(--t-fast) var(--snap), background-color var(--t-fast);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.chip:hover { transform: translateY(-2px); }
.chip__input:checked + .chip {
  background: var(--c);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--lift-scrap);
  transform: translateY(-2px);
}
.chip__input:focus-visible + .chip { outline: var(--focus); outline-offset: 3px; }

.plan__send {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}
.plan__sent {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--grass);
  color: #fff;
  rotate: .5deg;
  max-width: 46ch;
}

@media (max-width: 899px) {
  .plan__fields { grid-template-columns: 1fr; }
  .plan__sheet { background-image: none; padding-left: clamp(1.4rem, 4vw, 3.2rem); rotate: 0deg; }
}