/* ==========================================================================
   Upload screen. Same riso language as everything else.
   ========================================================================== */

/* ---- Source chips ------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 5px; }

.chip {
  position: relative;
  padding: 6px 10px 5px;
  border: 2px solid var(--ink);
  background: transparent;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--d-fast), transform var(--d-fast) var(--ease);
}
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed='true'] {
  background: var(--riso-pink, #ff2d87);
  color: #fff;
  box-shadow: 2px 2px 0 var(--ink);
}
/* An honest badge: this route takes days, and hiding that just moves the
   drop-off somewhere worse. */
.chip__slow {
  font-style: normal;
  margin-left: 5px;
  padding: 1px 4px;
  background: var(--ink);
  color: var(--paper);
  font-size: 8px;
  letter-spacing: 0.1em;
}
.chip[aria-pressed='true'] .chip__slow { background: var(--paper); color: var(--ink); }

/* ---- Instructions panel ------------------------------------------------- */

.guide__head {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.guide__os {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fade);
  vertical-align: middle;
  margin-left: 4px;
}

.wait {
  display: inline-block;
  margin-block: var(--s-2);
  padding: 3px 8px 2px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wait--now  { background: var(--riso-yellow, #ffe800); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.wait--slow { background: var(--ink); color: var(--paper); }

.guide__steps {
  counter-reset: step;
  display: grid;
  gap: var(--s-2);
  margin-block: var(--s-3);
}
.guide__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s-2);
  font-family: var(--f-display);
  font-variation-settings: 'wght' 500;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.guide__steps li::before {
  content: counter(step);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--riso-blue, #0a7cff);
  padding-top: 4px;
}

.guide__caveat {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 2px solid var(--riso-blue, #0a7cff);
  padding-left: var(--s-2);
}
.guide__accepts {
  margin-top: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fade);
}

/* ---- Drop zone ---------------------------------------------------------- */

.drop {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: var(--s-4) var(--s-3);
  border: 2px dashed var(--ink);
  text-align: center;
  cursor: pointer;
  transition: background var(--d-fast), transform var(--d-fast) var(--ease);
}
.drop:hover { background: var(--rule-fine); }
.drop.is-over {
  background: var(--riso-yellow, #ffe800);
  border-style: solid;
  transform: scale(1.01);
}
.drop__big {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 1.375rem;
  line-height: 1;
  text-transform: uppercase;
}
.drop__small {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fade);
}
.drop input { display: none; }

.drop-status {
  margin-top: var(--s-2);
  padding: var(--s-2);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.4;
}

.privacy-line {
  margin-top: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--fade);
}

/* Desktop-only is a different constraint from slow — it is not a wait, it is a
   device you may not have to hand. Own badge. */
.wait--desk { background: var(--riso-blue, #0a7cff); color: #fff; box-shadow: 2px 2px 0 var(--ink); }

/* The panel needs to breathe away from the chip grid above it. */
#guide-panel { margin-top: var(--s-3); }
.guide__head { margin-bottom: 2px; }

/* An unlabelled headline number on the landing page reads as if we already know
   something about you — which is the opposite of this product's promise. Label
   the demo as a demo. */
.sample-tag {
  display: inline-block;
  padding: 3px 8px 2px;
  border: 2px solid var(--ink);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-1.4deg);
  margin-bottom: var(--s-2);
}

/* ---- The hook: a question about YOU, not a stat about someone else ------- */

.hook__eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fade);
}
.hook {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 118, 'wght' 900;
  /* Size is set by fitHook() in js/upload.js — it measures rather than guesses,
     because each hook has a different longest word. This is only the pre-fit
     default for the first paint. */
  font-size: 2.75rem;
  /* Must be >= 1. Below that the line box is smaller than the glyphs and the
     ascenders/descenders spill outside the element — which reads as clipping. */
  line-height: 1;
  /* Room for the 3px misregistration shadow and font-metric overshoot. */
  padding-block: 3px 5px;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-block: var(--s-2) var(--s-2);
  text-shadow: 3px 3px 0 var(--riso-pink, #ff2d87);
}
.hook em {
  font-style: normal;
  color: var(--riso-pink, #ff2d87);
  text-shadow: 3px 3px 0 var(--ink);
}
.hook__sub {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 500;
  font-size: 1.0625rem;
  line-height: 1.35;
  max-width: 30ch;
}
.hook__reroll {
  margin-top: var(--s-2);
  padding: 4px 9px 3px;
  border: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background var(--d-fast), border-color var(--d-fast);
}
.hook__reroll:hover { background: var(--riso-yellow, #ffe800); border-color: var(--ink); }

/* ---- Teasers: what you get, without faking a stat about a stranger ------ */

.teasers { display: grid; gap: var(--s-2); }
.teasers li {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: var(--s-2);
  align-items: baseline;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule-fine);
}
.teasers li:last-child { border-bottom: 0; padding-bottom: 0; }
.teasers b {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.teasers span {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Reroll transition. Opacity + lift only — never clip-path, which shears any
   inline <em> that wraps across a line break. */
@keyframes hook-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #hook { animation: none !important; }
}

/* Persistent escape hatch. Fixed, thumb-reachable, out of the receipt's way. */
.home {
  position: fixed;
  left: 50%;
  bottom: var(--s-3);
  translate: -50% 0;
  z-index: 10;
  padding: 7px 14px 6px;
  background: var(--paper, #fbf6e9);
  color: var(--ink, #14100c);
  border: 2px solid var(--ink, #14100c);
  box-shadow: 3px 3px 0 var(--riso-pink, #ff2d87);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform var(--d-fast) var(--ease);
}
.home:hover  { transform: translate(-50%, -2px); }
.home:active { transform: translate(-50%, 1px); box-shadow: 1px 1px 0 var(--riso-pink, #ff2d87); }
.home[hidden] { display: none; }

.drop-status.is-warn {
  background: var(--riso-pink, #ff2d87);
  color: #fff;
}

/* The screenshot route is the only one that uploads. Say it where the choice
   is made, not in a caveat further down. */
.uploads-note {
  margin-block: var(--s-2);
  padding: var(--s-2);
  border: 2px solid var(--ink);
  background: var(--riso-yellow, #ffe800);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  line-height: 1.5;
  font-weight: 700;
}

/* ---- Mode switch: decides which report gets built ----------------------- */

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.mode {
  display: grid;
  gap: 2px;
  padding: var(--s-2);
  border: 2px solid var(--ink);
  text-align: left;
  transition: background var(--d-fast), transform var(--d-fast) var(--ease);
}
.mode:hover { transform: translateY(-2px); }
.mode[aria-pressed='true'] {
  background: var(--riso-pink, #ff2d87);
  color: #fff;
  box-shadow: 3px 3px 0 var(--ink);
}
.mode__big {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 110, 'wght' 800;
  font-size: 1.0625rem;
  text-transform: uppercase;
  line-height: 1;
}
.mode__sub {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  line-height: 1.35;
  opacity: 0.75;
}