/* ==================================================================
   Postcards from Addis Ababa — interface

   Mobile first, because this arrives as a link in a group chat. The
   card is a canvas at print size scaled by CSS, so nothing here
   changes what gets sent — this file only styles the room it sits in.

   Approved scheme three throughout: 70% white, 20% MSU Green, 10%
   gamboge. Gamboge is the single most important action on any screen
   and nothing else.
   ================================================================== */

@font-face { font-family:'JUST Sans'; src:url('/assets/fonts/JUSTSans-Light.woff2') format('woff2');
             font-weight:300; font-display:swap; }
@font-face { font-family:'JUST Sans'; src:url('/assets/fonts/JUSTSans-Regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }
@font-face { font-family:'JUST Sans'; src:url('/assets/fonts/JUSTSans-SemiBold.woff2') format('woff2');
             font-weight:600; font-display:swap; }
@font-face { font-family:'Shiromeda'; src:url('/assets/fonts/Shiromeda-Regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Shiromeda'; src:url('/assets/fonts/Shiromeda-Bold.woff2') format('woff2');
             font-weight:700; font-display:swap; }

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

/* Every hidden thing, actually hidden.

   `[hidden] { display: none }` is a user-agent rule with the weakest
   specificity there is, so any class that sets display beats it —
   `.step { display: grid }`, `.btn { display: inline-flex }`,
   `fieldset { display: grid }`. The result was that all five steps of
   this form rendered at once, on every screen size, from the first
   build, and the Next button never went away on the last one.

   Nothing caught it for four rounds because the tests read
   `element.hidden`, which was perfectly true, and no browser was ever
   asked what it had actually drawn. This one line is the fix; the
   screenshots in qa/shots are the reason it will not happen again. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ==================================================================
   The shell.

   This was a long page you scrolled. That is the wrong shape for what
   it is: five short questions with a picture that changes as you
   answer them. A page asks somebody to work out where things are; a
   shell tells them — card at the top, one question in the middle,
   Back and Next docked at the bottom under the thumb.

   So the document does not scroll at all. Exactly one element does,
   the question panel, and only when a question is taller than the room
   it has. Everything else is fixed in place, which is what makes the
   difference between a website and something that feels like an app.
   ================================================================== */
html, body { height: 100%; }

body.app {
  height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
  overscroll-behavior: none;
}

/* one screen at a time, filling what the bar leaves */
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:where(a) { color: inherit; }
:where(button, input, textarea) { font: inherit; color: inherit; }
:where(img, canvas) { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* ---------- the bar ---------- */
.bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: var(--s-3) max(var(--s-5), env(safe-area-inset-left))
           var(--s-3) max(var(--s-5), env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
}
.bar__lang { min-height: 38px; }
.bar__brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.bar__brand span { display: grid; line-height: 1.2; }
.bar__brand b { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.bar__brand i { font-style: normal; font-size: 0.68rem; color: var(--ink-faint); }
@media (max-width: 30rem) { .bar__brand i { display: none; } }
.bar__lang {
  min-height: var(--tap); padding: 0 var(--s-4);
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); font-size: 0.9rem; cursor: pointer;
  transition: background var(--m-fast), border-color var(--m-fast);
}
.bar__lang:hover { background: var(--green-050); border-color: var(--msu-green); }

/* ---------- landing ---------- */
/* A breath of green behind the card, so the page has a light and a
   dark side rather than being a sheet of white with things on it. */
.screen.landing {
  background:
    radial-gradient(120% 90% at 88% 40%, var(--green-050) 0%, transparent 62%);
}
.landing {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: var(--s-4) max(var(--s-5), env(safe-area-inset-left))
           calc(var(--s-3) + env(safe-area-inset-bottom))
           max(var(--s-5), env(safe-area-inset-right));
  display: grid; gap: var(--s-4); align-content: center; overflow-y: auto;
}
.landing__text { display: grid; gap: var(--s-3); }
.landing__end { display: grid; justify-items: start; gap: var(--s-3);
                padding-top: var(--s-4); border-top: 1px solid var(--line); }
/* The two marks. Optically balanced rather than matched by pixel
   height: the I-love mark is a stack with a heart in it and reads
   larger than the Commission's horizontal lockup at the same height,
   so the lockup is given a little more room. */
.lockup { display: flex; align-items: center; gap: var(--s-3); margin: 0; }
.lockup__ilove { width: 96px; height: auto; }
.lockup__aatc  { width: 132px; height: auto; }
.lockup__rule  { width: 1px; align-self: stretch; margin: 2px 0;
                 background: var(--line-strong); flex: none; }
@media (max-width: 22rem) {
  .lockup__ilove { width: 78px; } .lockup__aatc { width: 108px; }
}
.done__mark { width: 150px; height: auto; margin: var(--s-4) auto 0; opacity: 0.92; }
.landing__foot { display: grid; gap: 2px; margin: 0;
                 font-size: var(--t-micro); color: var(--ink-faint); }
/* Shiromeda's ascenders run taller than the em box, so at a tight
   line-height the top of the Amharic was being sliced off by the
   scroll container above it. */
.kicker {
  margin: 0; line-height: 1.5; padding-top: 2px;
  font-family: var(--font-eth); font-weight: 700;
  font-size: 1.1rem; color: var(--accent-ink);
}
.landing h1 {
  margin: 0; text-wrap: balance;
  font-weight: 600; font-size: var(--t-hero);
  line-height: var(--lh-tight); letter-spacing: -0.025em; color: var(--msu-green);
}
.lead { margin: 0; max-width: 34ch; font-size: var(--t-lead); color: var(--ink-soft); }
.landing .btn--go { justify-self: start; }
/* The countdown was a grey line of text, which is a strange way to
   treat the one piece of urgency on the page. It is a badge now, and
   it carries the only gold on the screen apart from the button. */
.landing__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
/* Green, not gold. Gold appears exactly once on this screen and it is
   the button — with a second gold thing beside it, neither read as
   the one to press. */
.landing__meta span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px var(--s-4) 6px var(--s-3);
  font-size: var(--t-small); font-weight: 500; color: var(--msu-green);
  background: var(--green-050); border-radius: var(--r-pill);
}
.landing__meta span::before {
  content: ''; width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--gamboge);
}
.landing__do { display: grid; gap: var(--s-3); justify-items: start; }
.landing__do .btn--wide { width: 100%; }
@media (min-width: 30rem) { .landing__do .btn--wide { width: auto; min-width: 15rem; } }

/* The card is presented rather than parked: turned a degree and a half
   off square, with a second one behind it, so the page says postcards
   before anybody has read a word. */
.landing__card { position: relative; }
.landing__card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  transform: rotate(4.5deg) translate(2%, 2%);
  background: var(--sage-100); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--lift-1);
}
.landing__card .card-shell {
  position: relative; z-index: 1;
  transform: rotate(-1.5deg);
  transition: transform var(--m-slow) var(--e-out), opacity 380ms linear;
}
/* the turn: it lifts a degree and fades, the new photograph is drawn
   underneath, and it settles back */
.landing__card .card-shell.is-turning { opacity: 0.12; transform: rotate(-3.5deg) scale(0.985); }
.landing__card .card-shell canvas { box-shadow: var(--lift-2); }
@media (hover: hover) {
  .landing:hover .card-shell { transform: rotate(0deg) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .landing__card .card-shell, .landing:hover .card-shell { transform: none; }
  .landing__card .card-shell.is-turning { opacity: 1; transform: none; }
  .landing__card::before { transform: rotate(3deg); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-6);
  font-size: 1.02rem; font-weight: 600;
  color: var(--ink-invert); background: var(--msu-green);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--m-fast), transform 90ms;
}
.btn:hover { background: #17494B; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: default; }

/* The one gamboge thing on the page. */
.btn--go { background: var(--gamboge); color: var(--green-900); font-size: 1.1rem; padding: 0 var(--s-7); }
.btn--go:hover { background: var(--gamboge-lift); }

.btn--ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }
.btn--ghost:hover { background: var(--green-050); color: var(--ink); }

/* ---------- the card ---------- */
.card-shell {
  position: relative; width: 100%; margin-inline: auto;
  aspect-ratio: 1748 / 1240; perspective: 2200px;
}
.card-shell canvas { width: 100%; height: 100%; border-radius: var(--r-md); }
.card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--lift-2);
  transition: transform var(--m-slow) var(--e-out);
}
.card-face--front { transform: rotateY(0deg); }
.card-face--back  { transform: rotateY(180deg); }
.card-shell.is-flipped .card-face--front { transform: rotateY(-180deg); }
.card-shell.is-flipped .card-face--back  { transform: rotateY(0deg); }
#heroShell canvas { box-shadow: var(--lift-2); }

.flip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); margin: var(--s-4) auto 0; padding: 0 var(--s-5);
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); font-size: 0.9rem; cursor: pointer;
}
.flip:hover { background: var(--green-050); }

/* The arrival page is dark green. The flip was styled for the white
   maker and reused unchanged, so its border was near-black at 26%
   alpha on dark green — invisible — and on hover the background went
   near-white while the text stayed white. It is the only control that
   reveals the message the sender wrote. */
.flip--dark {
  color: var(--ink-invert);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.42);
  backdrop-filter: blur(6px);
}
.flip--dark:hover, .flip--dark:focus-visible {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.70);
  color: var(--ink-invert);
}

/* ---------- the maker ---------- */
/* ==================================================================
   The workbench.

   On a laptop this was three unrelated islands adrift in white — a
   card bottom-left, an input top-right, a stepper in the far corner —
   with nothing sharing an edge with anything else. It is now one
   object: a single panel with the card on the left and the question on
   the right, both starting on the same line, the steps read at the top
   where steps belong, and Back and Next at the foot.

   Nothing inside it scrolls on a laptop. A scrollbar inside a panel
   inside a page is what this looked like before, and there is no
   defending it.
   ================================================================== */
.maker { width: 100%; max-width: var(--wrap); margin: 0 auto; }
.maker__inner { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.maker__stage {
  flex: none; position: relative;
  display: grid; justify-items: center;
  padding: var(--s-3) var(--s-5) 26px;
}
.maker__stage .card-shell { max-width: min(100%, calc(34vh * 1748 / 1240)); }

@media (max-height: 900px) {
  .maker__panel { gap: var(--s-3); }
}
@media (max-height: 720px) {
  .maker__stage { padding-block: var(--s-2) 24px; }
  .maker__stage .card-shell { max-width: min(100%, calc(26vh * 1748 / 1240)); }
  .maker__panel { gap: var(--s-3); }
  .dock { gap: var(--s-2); }
  .step h2 { font-size: 1.2rem; }
}
@media (max-height: 640px) {
  .maker__stage .card-shell { max-width: min(100%, calc(15vh * 1748 / 1240)); }
  .step > .hint:first-of-type { display: none; }   /* the h2 asks the question */
  .maker__panel { gap: var(--s-2); padding-block: var(--s-2) var(--s-3); }
  .opt legend { font-size: 0.68rem; }
}

/* Below the card, not on it. On it, it covered the I love Addis Ababa
   mark in one corner and the adey abeba in the other — a control
   sitting on top of two brand marks is not a control, it is a fault. */
.maker__stage .flip {
  position: absolute; right: calc(var(--s-5) + 4px); bottom: 0; z-index: 2;
  min-height: 40px; padding: 0 var(--s-4); margin: 0;
  font-size: 0.78rem; background: var(--surface); box-shadow: var(--lift-1);
}

/* By the last screen the card has been seen, the two shapes show it
   again, and the finish needs every pixel. */
body[data-step="5"] .maker__stage { display: none; }

/* The one scroller in the whole application, and on a laptop it does
   not scroll at all. */
.maker__panel {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid; align-content: start; gap: var(--s-4);
  padding: var(--s-4) max(var(--s-5), env(safe-area-inset-left)) var(--s-5)
           max(var(--s-5), env(safe-area-inset-right));
}

.dock {
  flex: none; display: grid; gap: var(--s-3);
  border-top: 1px solid var(--line); background: var(--surface);
  padding: var(--s-3) max(var(--s-5), env(safe-area-inset-left))
           calc(var(--s-2) + env(safe-area-inset-bottom))
           max(var(--s-5), env(safe-area-inset-right));
}

/* One question slides in from the side it came from, so moving through
   the five feels like moving rather than like a page redrawing. */
.step { animation: slide-in 260ms var(--e-out); }
body.is-back .step { animation-name: slide-back; }
@keyframes slide-in   { from { opacity: 0; transform: translateX(14px); } }
@keyframes slide-back { from { opacity: 0; transform: translateX(-14px); } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }

/* ---------- arrival ---------- */
.arrive { min-height: 100dvh; display: grid; place-items: center;
          padding: max(var(--s-5), env(safe-area-inset-top)) var(--s-5)
                   calc(var(--s-5) + env(safe-area-inset-bottom));
          background: linear-gradient(160deg, var(--msu-green), var(--green-900)); }
.arrive__inner { width: min(46rem, 100%); text-align: center; color: #fff; }
.arrive__from { margin: 0 0 var(--s-5); font-size: var(--t-h2); font-weight: 300; }
.arrive__from b { font-weight: 600; color: var(--gamboge-lift); }
.arrive .card-shell { margin-bottom: var(--s-5); }
.arrive .btn--go { margin-top: var(--s-2); }
.arrive__small { margin-top: var(--s-5); font-size: var(--t-small); color: rgba(255,255,255,0.6); }
.arrive__small a { color: rgba(255,255,255,0.85); }

/* The envelope: the card is face-down and lifts when you open it.
   One animation, once, because the point is the card and not the
   animation. */
.arrive .card-shell { transform: rotateX(18deg) translateY(14px); opacity: 0;
                      transition: transform 720ms var(--e-out), opacity 480ms linear; }
.arrive.is-open .card-shell { transform: none; opacity: 1; }

/* ---------- wider ---------- */
@media (min-width: 46rem) {
  .landing {
    grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-7);
    align-items: center;
    grid-template-areas: 'text card' 'do card' 'end card';
  }
  .landing__text { grid-area: text; }
  .landing__card { grid-area: card; }
  .landing__do   { grid-area: do; }
  .landing__end  { grid-area: end; align-self: start; }

  /* One panel. Card left, question right, same top line, nothing
     floating on its own. */
  .maker {
    display: grid; min-height: 0; align-content: center;
    padding: var(--s-4) var(--s-5) var(--s-5);
  }
  .maker__inner {
    display: grid; min-height: 0;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0 var(--s-7);
    padding: var(--s-5) var(--s-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--lift-2);
  }
  .maker__stage {
    grid-area: 1 / 1 / 3 / 2; align-self: center; padding: 0 0 26px;
  }
  .maker__stage .card-shell { max-width: 100%; }
  .maker__stage .flip { right: 4px; }
  /* The last screen keeps the card away on a laptop too: the two
     pictures show it twice already, and the finish would rather have
     the whole width than a third copy of the same postcard. */
  body[data-step="5"] .maker__inner { grid-template-columns: minmax(0, 1fr); }
  body[data-step="5"] .maker__panel { grid-area: 1 / 1 / 2 / 2; }
  body[data-step="5"] .dock { grid-area: 2 / 1 / 3 / 2; }

  /* overflow-y: auto, not visible. On a laptop it never actually
     scrolls — the finish fits — but a panel that can grow past its
     row is a panel that pushes the whole shell off the bottom of the
     window, which is exactly how the last screen ended up with a page
     scrollbar behind it. */
  .maker__panel {
    grid-area: 1 / 2 / 2 / 3; padding: 0 var(--s-1) 0 0;
    align-content: start; gap: var(--s-4);
  }
  .dock { grid-area: 2 / 2 / 3 / 3; border: 0; padding: var(--s-5) 0 0; }

  /* The finish has room to be composed rather than to be one long
     column with a scrollbar in it. */
  /* One column of full-width blocks. The two-column split happens
     inside .ready, between the picture and the things you can do with
     it, which is the only place a split means anything. */
  .step--send { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4);
                align-content: start; }
  .ready { grid-template-columns: auto minmax(0, 1fr);
           gap: var(--s-6); align-items: start; }
  .caption { max-width: 46rem; }

  /* The stepper is a unit, not a span. Across thirteen hundred pixels
     the five circles stop reading as a sequence. */
  .steps { max-width: 32rem; }
}

@media (min-width: 64rem) {
  .deck { grid-auto-columns: 30%; }

  /* Wide and short rather than narrow and tall, which is the whole
     difference between reading the last screen and scrolling it. */
  .ready__do .send { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
}
@media (max-width: 22rem) {
  .bar, .landing, .maker, .foot { padding-inline: var(--s-4); }
  .deck { grid-auto-columns: 80%; }
}
@media print { .bar, .nav, .steps, .send, .foot, .flip { display: none; } }


/* ==================================================================
   The maker.

   This used to be a second stylesheet, loaded after this one, and it
   cost three regressions: .chips, .finish and .steps were each edited
   here while the rule that actually applied lived in the other file
   and won on file order. A "fix" would go in, the tests would read the
   source string and pass, and the bug would still be on the screen.

   One file. `qa/static-audit.mjs` now fails the build if any selector
   is declared twice, which is the mechanical version of the same
   lesson.
   ================================================================== */

/* ---------- the stepper ----------
   There is no connecting line. Every version of one needed the inset
   to match the circle's radius in two places at two breakpoints, and
   every version of it drew through the circles on somebody's screen.

   A bar underneath carries the same information — how far along, how
   far to go — in one element that cannot be misaligned, and it gives
   back the vertical space the labels were fighting for on a phone. */
.steps {
  display: flex; list-style: none; margin: 0; padding: 0; gap: var(--s-1);
}
.steps li { flex: 1; display: grid; min-width: 0; }

.steps button {
  display: grid; justify-items: center; gap: 4px;
  min-height: 44px; align-content: center;
  padding: 0; background: none; border: 0; cursor: pointer;
  font-size: var(--t-micro); color: var(--ink-faint);
}
.steps button[disabled] { cursor: default; }

.steps__n {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sage-100); border: 0;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  transition: background var(--m-fast), color var(--m-fast);
}
.steps__t { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.is-done .steps__n {
  background: var(--msu-green); color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}
.is-done .steps__t { color: var(--ink-soft); }
.steps li.is-done button:hover .steps__n { background: var(--green-900); }

.is-now .steps__n { background: var(--gamboge); color: var(--green-900); }
.is-now .steps__t { color: var(--msu-green); font-weight: 600; }
.is-todo .steps__t { opacity: 0.55; }

/* the bar: one element, filled to wherever you are */
.steps__track {
  height: 4px; margin: var(--s-3) 0 0;
  border-radius: 2px; background: var(--sage-200); overflow: hidden;
}
.steps__fill {
  display: block; height: 100%; border-radius: 2px;
  background: var(--msu-green);
  transition: width var(--m-slow) var(--e-out);
}
.steps__now { position: absolute; width: 1px; height: 1px; overflow: hidden;
              clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 24rem) { .steps__t { display: none; } }
@media (prefers-reduced-motion: reduce) { .steps__fill { transition: none; } }

/* ---------- the questions ---------- */
.step { display: grid; gap: var(--s-3); }
.step h2 { margin: 0; font-size: var(--t-h2); font-weight: 600;
           letter-spacing: -0.015em; color: var(--msu-green); }
.hint { margin: 0; font-size: var(--t-small); color: var(--ink-faint);
        min-height: 1.2em; }
.hint--geez { font-family: var(--font-eth); font-weight: 700;
              font-size: 1.15rem; color: var(--ink-soft); }

/* The name, and the way out of it. */
.namely { display: flex; flex-wrap: wrap; align-items: baseline;
          gap: var(--s-2) var(--s-3); margin: 0; }
.namely .hint { min-height: 0; }

input[type=text], textarea {
  width: 100%; min-height: var(--tap); padding: var(--s-3) var(--s-4);
  font-size: 1.05rem; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  resize: vertical;
}
input[type=text]:focus, textarea:focus, .select:focus {
  outline: none; border-color: var(--msu-green);
  box-shadow: 0 0 0 3px rgba(16,56,58,0.12);
}

/* ---------- the card's options ----------
   One question on step four, and it is a choice of one from six —
   which is what a select is for. A row of chips wrapped to three lines
   on a phone and pushed the step off the bottom of the screen. */
.opt { display: grid; gap: var(--s-1); margin: 0; }
.opt__label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-faint);
}
.select {
  width: 100%; min-height: var(--tap); padding: 0 var(--s-6) 0 var(--s-4);
  font-size: 1rem; color: var(--ink); background-color: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310383A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 16px;
}

/* ---------- the shuffle ----------
   A hundred and thirty-nine lines are worth pulling one at a time, so
   the control that pulls them is the largest thing on the step and the
   categories underneath it are secondary. Gold, once, here -- this is
   the twenty per cent of the palette and it is spent on the one action
   the step is for. */
.roll { display: grid; gap: var(--s-2); margin: var(--s-1) 0 0; }
.btn--roll {
  width: 100%; gap: var(--s-3);
  background: var(--gamboge); color: var(--msu-green);
  border: none; font-weight: 600;
}
.btn--roll:hover { background: var(--gamboge-deep); }
.btn--roll:active { transform: translateY(1px); }

/* the adey abeba, drawn in CSS rather than fetched: eight petals and
   a middle, which is all the flower ever is on the card either */
.roll__flower {
  width: 22px; height: 22px; flex: none; position: relative;
  display: inline-block; color: var(--msu-green);
}
.roll__flower::before, .roll__flower::after {   /* eight petals: four, then four turned */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 12%, currentColor 22%, transparent 23%),
    radial-gradient(circle at 50% 88%, currentColor 22%, transparent 23%),
    radial-gradient(circle at 12% 50%, currentColor 22%, transparent 23%),
    radial-gradient(circle at 88% 50%, currentColor 22%, transparent 23%),
    radial-gradient(circle at 50% 50%, currentColor 18%, transparent 19%);
}
.roll__flower::after  { transform: rotate(45deg); }
.btn--roll.is-spun .roll__flower { animation: spin 620ms var(--e-out); }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

.roll__meta { margin: 0; min-height: 1em;
              font-size: var(--t-micro); letter-spacing: 0.06em;
              text-transform: uppercase; color: var(--ink-faint); }
/* One row that scrolls, not four rows that wrap. Wrapped, these eight
   chips were 150 pixels tall and pushed the message box — the thing
   the step is actually for — clean off the bottom of a phone. */
.chips.chips--pools {   /* two classes, because .chips comes later in this file */
  flex-wrap: nowrap; overflow-x: auto; gap: 6px;
  scrollbar-width: none; padding-bottom: 2px;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.chips.chips--pools::-webkit-scrollbar { display: none; }
.chips.chips--pools .chip {
  flex: none; min-height: 40px; padding: 0 var(--s-3);
  font-size: 0.8rem; white-space: nowrap; scroll-snap-align: start;
}

/* the message arriving, rather than appearing */
textarea.is-fresh { animation: freshen 520ms var(--e-out); }
@keyframes freshen {
  0%   { background: var(--gamboge-050); transform: translateY(-3px); }
  100% { background: var(--surface); transform: none; }
}

.hint--row { display: flex; justify-content: space-between; align-items: center;
             gap: var(--s-3); }
.linkish { display: inline-flex; align-items: center; min-height: 40px;
           background: none; border: none; padding: 0; cursor: pointer;
           font-size: var(--t-small); color: var(--ink-faint);
           text-decoration: underline; text-underline-offset: 2px; }
.linkish:hover { color: var(--msu-green); }

@media (prefers-reduced-motion: reduce) {
  .btn--roll.is-spun .roll__flower, textarea.is-fresh { animation: none; }
}

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 40px; padding: 0 var(--s-4);
  font-size: 0.85rem; color: var(--msu-green);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--m-fast), border-color var(--m-fast);
}
.chip:hover { background: var(--green-050); }
.chip.is-on { background: var(--msu-green); border-color: var(--msu-green); color: var(--ink-invert); }

/* ---------- the photographs ----------
   Eighteen tiles, all of them there. The rail this replaces had six
   separate affordances telling you it moved and people still could
   not tell. */
.deck {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 30rem) { .deck { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 46rem) { .deck { grid-template-columns: repeat(3, minmax(0, 1fr));
                                    gap: var(--s-3); } }
@media (min-width: 64rem) { .deck { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.shot {
  position: relative; padding: 0; border: 0; background: var(--sage-100);
  border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  aspect-ratio: 1748 / 1240;
  outline: 3px solid transparent; outline-offset: -3px;
  transition: outline-color var(--m-fast), transform var(--m-fast);
}
.shot:hover { transform: translateY(-2px); }
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  /* an <img> is draggable by default, so dragging the grid used to
     pick the photograph up instead of scrolling */
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.shot__cap {
  position: absolute; inset: auto 0 0 0; padding: var(--s-5) 6px 5px;
  font-size: 0.62rem; line-height: 1.2; text-align: left; color: #fff;
  background: linear-gradient(180deg, rgba(10,36,38,0) 0%, rgba(10,36,38,0.9) 62%);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 46rem) { .shot__cap { font-size: 0.7rem; padding-bottom: 7px; } }

.shot[aria-pressed="true"] { outline-color: var(--gamboge); }
.shot[aria-pressed="true"]::after {
  content: ''; position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gamboge) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310383A' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px;
  box-shadow: 0 1px 5px rgba(10,36,38,0.35);
}
@media (prefers-reduced-motion: reduce) { .shot:hover { transform: none; } }

/* The card must not be transparent: the panel scrolls underneath it,
   and without a background the question scrolled up through the
   photograph on a phone. */
.maker__stage { background: var(--surface); }

/* ---------- more, tucked away ----------
   Every option here is a nice-to-have. Behind a summary, because the
   thirty-second journey cannot afford five fieldsets in its path. */
.more { border-top: 1px solid var(--line); padding-top: var(--s-3); }
.more summary {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); cursor: pointer; list-style: none;
  font-size: 0.92rem; font-weight: 600; color: var(--msu-green);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before {
  content: ''; width: 8px; height: 8px; flex: none;
  border: 2px solid currentColor; border-left: 0; border-top: 0;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--m-fast);
}
.more[open] summary::before { transform: rotate(225deg) translate(-2px, -2px); }
.more__body { display: grid; gap: var(--s-4); padding-top: var(--s-4); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
legend { padding: 0; font-size: 0.78rem; font-weight: 600;
         letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-faint); }

/* justify-self: start, or a two-option toggle stretches the whole
   width of the panel with On and Off huddled in the left corner. */
.segmented { display: inline-flex; justify-self: start;
             border: 1px solid var(--line-strong);
             border-radius: var(--r-pill); overflow: hidden; }
.segmented--wrap { flex-wrap: wrap; border-radius: var(--r-md); }
.segmented button {
  min-height: 42px; padding: 0 var(--s-4); font-size: 0.85rem;
  background: transparent; border: 0; cursor: pointer; color: var(--ink-soft);
}
.segmented button.is-on { background: var(--msu-green); color: var(--ink-invert); }

/* ---------- the last screen ----------
   One picture with a shape switch over it, one primary action, one row
   of platforms, one download menu behind a summary. There were four
   download controls before, and share buttons that only downloaded. */
.ready { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.ready__art { display: grid; gap: var(--s-3); justify-items: start; }
.ready__do  { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.ready__do .sub:first-of-type { margin-top: var(--s-3); }

.preview { display: grid; justify-items: start; }
.preview canvas {
  display: block; border-radius: 12px; box-shadow: var(--lift-2);
  background: var(--sage-100);
}

#shapePick { font-size: 0.82rem; }
#shapePick button { min-height: 40px; padding: 0 var(--s-4); }

.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: 0.82rem; }

.caption { display: grid; gap: var(--s-2); min-width: 0; }
.caption__head { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--s-3); flex-wrap: wrap; }
.caption__head .sub { margin: 0; }
.caption textarea { min-height: 5rem; height: auto; font-size: 0.78rem;
                    line-height: 1.45; padding: var(--s-3); resize: none; overflow: hidden; }

.more--dl { margin-top: var(--s-2); }
.more--dl .more__body { gap: var(--s-2); }

/* The ending. Nothing used to happen when you pressed WhatsApp. */
.done {
  margin-top: var(--s-4); padding: var(--s-5);
  text-align: center; border-radius: var(--r-md);
  background: var(--msu-green); color: var(--ink-invert);
}
.done__title { margin: 0; font-size: var(--t-h2); font-weight: 600; }
.done__body { margin: var(--s-2) auto var(--s-4); max-width: 34ch;
              font-size: var(--t-small); color: rgba(255,255,255,0.78); }

/* ---------- send ---------- */
/* minmax(0, 1fr), not 1fr: a grid track's minimum is its content by
   default, so two share buttons whose labels will not wrap pushed the
   whole tinted panel off the right edge of a phone. */
.send { display: grid; gap: var(--s-2); margin-bottom: var(--s-2);
        grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.send .btn { width: 100%; }
.send .btn--wide { grid-column: 1 / -1; }

/* Each platform wears its own mark. These were coloured squares,
   which asked people to read ten labels; a mark is recognised without
   reading anything, and on a share sheet that is the whole job. The
   buttons themselves stay white and green, so ten brand palettes
   arrive as ten small objects rather than as ten backgrounds. */
.btn--share {
  justify-content: flex-start; gap: var(--s-2);
  padding: 0 var(--s-3); min-height: var(--tap);
  font-size: 0.9rem; font-weight: 500;
  color: var(--msu-green); background: var(--surface);
  border: 1px solid var(--line-strong);
}
.btn--share:hover { background: var(--green-050); border-color: var(--msu-green); }
.btn--share .mk { flex: none; width: 20px; height: 20px; }
.btn--share .btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the sub-heads that separate sending from posting */
.sub { margin: var(--s-5) 0 var(--s-1); font-size: var(--t-micro);
       font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
       color: var(--ink-soft); }
.step--send .sub:first-of-type { margin-top: var(--s-3); }
.more--caption { margin: var(--s-3) 0 0; }
.more--caption textarea { min-height: 9rem; font-size: 0.92rem; line-height: 1.55; }
.more--caption .btn { margin-top: var(--s-3); }

/* Back and Next are the two things a thumb reaches for, so they keep
   clear of the gesture bar as well. */
.nav { display: flex; gap: var(--s-3); }
.nav .btn { flex: 1; min-width: 0; padding-inline: var(--s-4); white-space: nowrap;
            font-size: clamp(0.9rem, 0.78rem + 0.5vw, 1.02rem); }