/* ============================================================
   START A CAMPAIGN — the page's own few rules (17 September 2026).

   Everything that can be borrowed is borrowed: login.css draws the fields,
   the errors and the button, setup.css draws the sections, the two-up rows
   and the selects. What is here is only what this page adds — the money
   field, the photographs, and the card on the right.
   ============================================================ */

/* the editor is wider than the profile editor's, because a campaign is
   mostly writing and the card beside it is small */
.st-cols{grid-template-columns:minmax(0, 1fr) 34rem}
@media (max-width:1100px){ .st-cols{grid-template-columns:100%} }

/* ---- the money field: the euro sits inside it, not beside it ---- */
.st-money{position:relative; display:block}
.st-money i{
  position:absolute; left:1.6rem; top:50%; translate:0 -50%;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:600; font-style:normal;
  color:var(--soft); pointer-events:none;
}
.st-money input{padding-left:3.6rem; font-variant-numeric:tabular-nums}
.st-ends{margin:.8rem 0 0}

/* ---- textareas, on the same terms as login.css's inputs ---- */
.st-page textarea{
  width:100%; padding:1.4rem 1.6rem; border:0; border-radius:1.2rem;
  background:var(--lg-fill); color:var(--ink);
  font-family:var(--face-ui); font-size:1.6rem; font-weight:500; line-height:1.5;
  resize:vertical; min-height:12rem;
}
.st-page textarea:hover{background:var(--lg-fill-hi)}
.st-page textarea:focus{outline:none; box-shadow:inset 0 0 0 1.5px var(--ink)}
.st-page textarea[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--lg-err)}

/* ---- the photographs ---- */
.st-photos{display:grid; grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr)); gap:1.2rem}
/* margin:0 is not tidying: a <figure> carries a browser default of
   1em 40px, which ate 80px out of every 120px cell and left the
   photographs as thumbnails the size of the button on top of them */
.st-shot{
  position:relative; margin:0; aspect-ratio:1; border-radius:1.2rem; overflow:hidden;
  background:var(--lg-fill);
}
.st-shot img{display:block; width:100%; height:100%; object-fit:cover}
.st-shot_x,.st-shot_move{
  position:absolute; top:.8rem; display:grid; place-items:center;
  width:3rem; height:3rem; border:0; border-radius:99px; cursor:pointer;
  background:color-mix(in srgb, var(--ground) 86%, transparent); color:var(--ink);
  font-family:var(--face-ui); font-size:1.5rem; font-weight:600; line-height:1;
}
.st-shot_x{right:.8rem}
.st-shot_move{left:.8rem}
.st-shot_x:hover,.st-shot_move:hover{background:var(--ground)}
.st-shot_x:focus-visible,.st-shot_move:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.st-shot_tag{
  position:absolute; left:.8rem; bottom:.8rem; padding:.4rem .8rem; border-radius:99px;
  background:var(--ink); color:var(--ground);
  font-family:var(--face-ui); font-size:1.1rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.st-add{
  display:grid; place-items:center; gap:.4rem; aspect-ratio:1; cursor:pointer;
  border:1.5px dashed color-mix(in srgb, var(--ink) 24%, transparent); border-radius:1.2rem;
  background:none; color:var(--soft); padding:1rem; text-align:center; line-height:1.3;
  font-family:var(--face-ui); font-size:1.3rem; font-weight:600;
}
.st-add:hover{color:var(--ink); border-color:color-mix(in srgb, var(--ink) 44%, transparent)}
.st-add:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* ---- the buttons at the foot ---- */
.st-go{display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem}
.st-go_btn{width:auto; min-width:20rem}
.st-saved{
  margin:0; font-family:var(--face-ui); font-size:1.35rem; font-weight:500; color:var(--soft);
}

/* ---- the card beside it ---- */
.st-side{position:sticky; top:12rem; align-self:start; display:grid; gap:1.2rem}
@media (max-width:1100px){ .st-side{position:static; margin-top:4rem} }
.st-side_k{
  margin:0; font-family:var(--face-ui); font-size:1.2rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--soft);
}
.st-side_say{margin:0; font-family:var(--face-ui); font-size:1.35rem; line-height:1.45; color:var(--soft)}
/* NO PANEL FILL — see the note on .lp-panel in leo.css. */
.st-card{
  padding:1.6rem 0;
}
.st-card_pic{
  display:grid; place-items:center; aspect-ratio:4/5; margin-bottom:1.6rem;
  border-radius:1.2rem; overflow:hidden; background:var(--lg-fill);
}
.st-card_pic img{display:block; width:100%; height:100%; object-fit:cover}
.st-card_none{
  font-family:var(--face-ui); font-size:1.35rem; font-weight:500; color:var(--soft); text-align:center;
}
.st-card_name{
  margin:0 0 .6rem; font-family:var(--face); font-weight:900;
  
  font-size:2.2rem; line-height:1.05; letter-spacing:-0.02em; text-transform:uppercase; color:var(--ink);
}
.st-card_line{margin:0 0 .8rem; font-family:var(--face-ui); font-size:1.45rem; line-height:1.4; color:var(--ink)}
.st-card_meta,.st-card_money{
  margin:0; font-family:var(--face-ui); font-size:1.2rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--soft);
}
.st-card_money{margin-top:.4rem; font-variant-numeric:tabular-nums}

/* the page is hidden until start.js knows who is logged in, so a visitor
   without an account never sees a flash of the form before the redirect */
.st[hidden]{display:none}

/* THE COMMENTS SWITCH (24 September 2026, client: "give people a option when
   making a campaign to turn off the comment section"). The same object as the
   account page's notification toggles, down to the travel of the knob —
   account.css is not loaded here, so the rule is repeated rather than the
   whole sheet pulled in for one control. */
.st-tog{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:0; cursor:pointer;
}
.st-tog span{font-family:var(--face-ui); font-size:1.4rem; font-weight:500; line-height:1.4; color:var(--soft)}
.st-tog b{display:block; font-size:1.6rem; font-weight:600; color:var(--ink)}
.st-tog input{position:absolute; opacity:0; width:1px; height:1px}
.st-tog i{
  flex:none; position:relative; width:4.8rem; height:2.8rem; border-radius:999px;
  background:var(--lg-fill-hi);
  transition:background var(--speed) var(--easing);
}
.st-tog i::after{
  content:""; position:absolute; left:.3rem; top:.3rem; width:2.2rem; height:2.2rem;
  border-radius:50%; background:var(--ground); box-shadow:0 1px 3px rgba(0, 0, 0, .18);
  transition:transform var(--speed) var(--power3-out);
}
.st-tog input:checked + i{background:var(--ink)}
.st-tog input:checked + i::after{transform:translateX(2rem)}
.st-tog input:focus-visible + i{outline:2px solid var(--spark); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .st-tog i,.st-tog i::after{transition:none} }