/* ═══════════════════════════════════════════════════════════
   SENDING A COMIC
   The composer and the reveal. Everything here uses the tokens
   in site.css -- this file adds no colours and no faces of its
   own, because a card that does not look like the site is not
   a card from this site.

   Spec: docs/ECARDS.md.
   ═══════════════════════════════════════════════════════════ */

/* ── the stepped shell ─────────────────────────────────────── */
.send{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(14px,1.8vw,24px) var(--gut) clamp(40px,5vw,70px);
}
.send__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:6px;
}
.send__title{
  margin:0;font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(26px,2.4vw,34px);text-transform:uppercase;letter-spacing:.015em;
}
/* Where you are, in words rather than a progress bar: four steps do not need
   a bar, and a bar implies a length nobody asked about. */
.send__step{
  margin:0;font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
}
.send__note{margin:0 0 26px;font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.send__panel[hidden]{display:none}

.send__foot{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:28px;padding-top:22px;border-top:1px solid var(--line);
}
.send__foot .spacer{flex:1 1 auto}

/* ── step 1: which object ──────────────────────────────────── */
/* Two products, not a checkbox. The physical objects already explain the
   difference, so the cards below say what the object is and let that carry it. */
.pick2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,26px)}
.pick2__opt{
  display:flex;flex-direction:column;gap:12px;text-align:left;
  padding:22px 22px 24px;background:var(--paper-2);
  border:2px solid var(--line-2);border-radius:10px;cursor:pointer;
  transition:border-color .15s,background .15s;font:inherit;color:inherit;
}
.pick2__opt:hover:not(:disabled){border-color:var(--ink)}
.pick2__opt:disabled{cursor:default;opacity:.55}
.pick2__name{
  font-family:var(--display);font-weight:800;font-size:26px;line-height:1;
  text-transform:uppercase;letter-spacing:.01em;
}
.pick2__body{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
/* Said on the choice itself, never in a tooltip: people pick the postcard for
   being simpler and should not discover its openness afterwards. */
.pick2__warn{
  margin:0;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--red);
}
.pick2__soon{
  margin:0;font-family:var(--display);font-weight:800;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}

/* ── step 2: the picker ────────────────────────────────────── */
.pickbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.pickbar input{
  flex:1 1 240px;min-width:0;height:42px;padding:0 14px;
  border:1.5px solid var(--line-2);border-radius:8px;background:var(--paper);
  font:inherit;font-size:16px;color:var(--ink);
}
.pickbar input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.pickbar__count{
  font-family:var(--display);font-weight:700;font-size:13.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}

.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(12px,1.6vw,20px);
}
.grid__item{
  display:flex;flex-direction:column;gap:8px;padding:0;
  background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:left;
}
/* 5:7 and never cropped -- the whole reason the square share cards are the
   thing this feature is meant to improve on. */
.grid__tile{
  display:block;width:100%;height:auto;aspect-ratio:5/7;object-fit:cover;
  border:1.5px solid var(--ink);background:var(--paper-3);
  transition:border-width .12s;
}
.grid__item:hover .grid__tile,
.grid__item:focus-visible .grid__tile{border-width:3px}
.grid__name{
  font-family:var(--display);font-weight:800;font-size:15px;line-height:1.1;
  text-transform:uppercase;letter-spacing:.01em;
}
.grid__empty{margin:26px 0;font-size:16.5px;color:var(--ink-2)}

/* ── step 3: the card itself ───────────────────────────────── */
/* Comic left, message right. The compose screen IS the card -- what is typed
   here is exactly what lands, so there is no preview step to disagree with. */
.card{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:0;border:2px solid var(--ink);background:var(--paper);
  max-width:940px;
}
.card__art{
  display:block;width:100%;height:auto;aspect-ratio:5/7;object-fit:cover;
  background:var(--paper-3);align-self:start;
}
.card__side{
  display:flex;flex-direction:column;
  padding:clamp(20px,2.4vw,30px);border-left:2px solid var(--ink);
}
.card__to{
  margin:0 0 10px;font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red);min-height:16px;
}
/* Handwriting, because a card has handwriting inside it and a form does not. */
.card__msg{
  flex:1 1 auto;width:100%;border:0;background:none;resize:none;
  font-family:var(--hand);font-weight:600;color:var(--ink);
  line-height:1.28;letter-spacing:.005em;
  font-size:28px;   /* banded by JS: 28 to 80 chars, 22 to 160, 18 to 240 */
  min-height:230px;
}
.card__msg::placeholder{color:var(--ink-2);opacity:.5}
.card__msg:focus{outline:none}
.card__sig{
  margin:14px 0 0;font-family:var(--hand);font-weight:600;font-size:22px;
  color:var(--ink-2);
}
.card__meter{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:12px;border-top:1px solid var(--line);
}
/* Visible the whole time. It sets the expectation, so the hard stop at 240 is
   never a surprise -- which is the whole reason the stop can be hard. */
.card__count{
  font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.card__count.is-full{color:var(--red)}
.card__warn{
  margin:0;font-size:13.5px;font-weight:600;color:var(--red);text-align:right;
}
.card__warn[hidden]{display:none}

@media (max-width:760px){
  /* Two-up is a landscape idea and a phone is not landscape. */
  .card{grid-template-columns:1fr;max-width:520px}
  .card__side{border-left:0;border-top:2px solid var(--ink)}
  .card__msg{min-height:170px}
}

/* ── step 4: how it travels ────────────────────────────────── */
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.route{
  display:flex;flex-direction:column;gap:7px;text-align:left;padding:18px 18px 20px;
  background:var(--paper-2);border:2px solid var(--line-2);border-radius:10px;
  cursor:pointer;font:inherit;color:inherit;transition:border-color .15s;
}
.route:hover:not(:disabled){border-color:var(--ink)}
.route:disabled{cursor:default;opacity:.55}
.route__name{
  font-family:var(--display);font-weight:800;font-size:19px;line-height:1;
  text-transform:uppercase;letter-spacing:.02em;
}
.route__body{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.route__soon{
  margin:0;font-family:var(--display);font-weight:800;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
}

/* ── the finished link ─────────────────────────────────────── */
.done__link{
  display:flex;gap:10px;align-items:stretch;margin:0 0 18px;flex-wrap:wrap;
}
.done__link input{
  flex:1 1 300px;min-width:0;height:46px;padding:0 14px;
  border:1.5px solid var(--line-2);border-radius:8px;background:var(--paper-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;color:var(--ink);
}
.done__note{margin:0 0 22px;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:62ch}

/* ═══════════════════════════════════════════════════════════
   THE REVEAL
   A postcard has no envelope, so it just appears. A sealed card
   gets the beat before it opens -- that pause is what a comic
   runs on, and it is why this is a card and not an image with
   a URL attached.
   ═══════════════════════════════════════════════════════════ */
.open{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(20px,3vw,44px) var(--gut) clamp(40px,5vw,70px);
  display:flex;flex-direction:column;align-items:center;
}
.open__from{
  margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red);text-align:center;
}
.open__title{
  margin:0 0 26px;font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(28px,3vw,40px);text-transform:uppercase;letter-spacing:.01em;
  text-align:center;text-wrap:balance;
}
.open .card{max-width:940px;width:100%}
/* Read, not typed: the textarea becomes a plain block on the reveal. */
.open .card__msg{
  white-space:pre-wrap;overflow-wrap:break-word;min-height:0;
}
.open__after{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px;
}
.open__bad{
  margin:40px 0;font-size:16.5px;line-height:1.55;color:var(--ink-2);
  max-width:52ch;text-align:center;
}

/* Headings that exist for a screen reader and not for the eye: each panel
   needs one so the flow is navigable, but the visible label above already
   says where you are and two of them would be a stutter. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Who it is for, who it is from. Kept out of the 240 -- the message is the
   message, and a name eating eleven of its characters is a bad trade. */
.field{
  flex:0 1 200px;min-width:0;height:42px;padding:0 14px;
  border:1.5px solid var(--line-2);border-radius:8px;background:var(--paper);
  font:inherit;font-size:16px;color:var(--ink);
}
.field:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}