/* Juicy16 — the plugin's own page, unlisted and reached by URL.

   Built on the terms page's shapes, because it has the same job: someone
   arrives with a question ("what is this, does it run on my Mac"), and the
   answer has to come before the detail that qualifies it. Same split card,
   same reading sizes.

   One thing is different. This page exists to hand over a file, so the
   download is a real primary button in the accent rather than another outline
   pill, and it sits directly under the lede. Everything below it is there for
   the person who wants to know what they just downloaded. */

.wrap { display: grid; gap: 26px; }

#top, #what-title, #bugs { scroll-margin-top: 80px; }
.page-title { margin: 4px 2px 6px; }

/* The answer, then the qualifications. Same as the terms page: white against
   the reading grey is how the site emphasises anything, so no badge. */
.lede {
  color: var(--text); font-size: 16px; line-height: 1.7;
  margin: 4px 2px 0; max-width: 66ch; text-wrap: pretty;
}
.answer { color: var(--white); font-weight: 700; }

/* ── The one card ──
   Only the download is boxed. A card is for the thing you act on; the sections
   below it are reading, and framing those too turned the page into a stack of
   panels with nothing standing out. */
.split { display: grid; grid-template-columns: 1.02fr .98fr; }
.split__col { padding: 24px; min-width: 0; }
.split__col + .split__col { border-left: 1px solid var(--line-soft); }

/* Plain text on the page, aligned to the headers above it rather than inset. */
.block { margin: -6px 2px 0; max-width: 78ch; }

/* ── Reading text ── */
.lead { color: var(--text); font-size: 16px; line-height: 1.7; margin: 0 0 12px; }
.lead:last-child { margin-bottom: 0; }
.caption { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0; }
.caption--spaced { margin-top: 16px; }

.list {
  margin: 12px 0 0 20px; padding: 0;
  color: var(--text); font-size: 16px; line-height: 1.7;
}
.list li { margin: 10px 0; padding-left: 2px; }
.list li::marker { color: var(--muted); }
.list b { color: var(--white); font-weight: 700; }
/* File names and extensions sit inside sentences here, so they need to read as
   literal without becoming a second colour. Weight and a faint plate, no
   border: a bordered chip mid-sentence breaks the line's rhythm. */
.inl {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .88em; color: var(--white);
  background: rgba(255,255,255,.06); border-radius: 6px; padding: 1px 5px;
}

/* ── The download button ──
   The one control on the site that is worth the accent. It is filled rather
   than outlined because every other button on the page is an outline, and a
   page whose entire purpose is one file should not make you hunt for it.
   --on-ring is the token that exists for text on --ring, so the label stays
   legible without hand-picking a colour. */
.btn--go {
  margin-top: 4px; padding: 13px 20px; font-size: 15px;
  border-color: transparent;
  background: var(--ring);
  color: var(--on-ring);
}
.btn--go::before { content: none; }
.btn--go:hover { filter: brightness(1.08); color: var(--on-ring); }
.btn--go .dl {
  flex: 0 0 auto;
  transition: translate var(--mo-quick) var(--mo-out);
}
/* The arrow already points down, so it moves down. Same idea as the outbound
   arrow on .btn--out moving up and to the right. */
.btn--go:hover .dl {
  translate: 0 calc(1.5px * var(--mo-travel));
  transition-timing-function: var(--mo-snap);
}

/* Version, size, architecture. Muted and small: these matter once, at the
   moment you are deciding whether to press the button above them. */
.facts { color: var(--muted); font-size: 13.5px; margin: 12px 0 0; }

/* ── Product shot ──
   Paired with the summary rather than centred on a row of its own, where it
   read as an unplaced object with nothing lining up beside it. Same column
   ratio as the card above, so its left edge sits on the page column and its
   right edge meets the card's divider. Vertically centred against the text:
   the window is nearly square and always the taller of the two.

   The frame is on the figure, not the image, so the radius clips the
   screenshot's square corners. The hairline and the site shadow sit it on the
   page instead of letting its own dark chrome bleed into the background. */
.showcase {
  display: grid; grid-template-columns: 51% 1fr;
  column-gap: 24px; align-items: center; margin: 2px 2px 0;
}
.showcase__text { min-width: 0; }
.showcase__text .page-title { margin-top: 0; }
.showcase .list { margin-top: 14px; }

.shotblock {
  margin: 0; min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.shot { display: block; width: 100%; height: auto; }

.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

/* ── Bug report form ──
   A copy of the contact page's field set, not a shared one: same labels, same
   hover, focus, invalid and submit states, so a form on this site behaves the
   same wherever it is. Edit both. What differs is the content, which asks for
   the four things I would otherwise have to write back for, and a fixed
   subject on a hidden input.

   The form is in a card for the same reason the download is: cards frame the
   things you act on, and the reading sections between them are not boxed. */
.bugcard { padding: 24px; }

.cform { display: flex; flex-direction: column; gap: 16px; }
.cform[hidden] { display: none; }
/* Spacing comes from the column's own gap, not a margin on .cfield: on the
   contact page a `.cfield + .cfield` rule also fired inside the paired rows
   and pushed the second field half a row down. */
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.cfield__label {
  display: block;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  margin: 0 0 6px;
}
.req { color: var(--ring); }

.cform input[type="text"],
.cform input[type="email"],
.cform select,
.cform textarea {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px;
  background: rgba(2,6,23,.32);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text); font: inherit; font-size: 14px; font-weight: 400;
  caret-color: var(--ring);
  transition: background-color var(--mo-quick) var(--mo-out),
              border-color var(--mo-quick) var(--mo-out),
              box-shadow var(--mo-quick) var(--mo-out);
}
/* The chevron and the flat ground come from the gear page's select; the field
   colours here override its --surface fill so it matches the inputs beside
   it. */
.cform select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
}
.cform select:invalid { color: var(--muted); }
.cform option { color: var(--text); background: var(--panel); }

/* No `[type=...]` in the hover selector, deliberately: an attribute selector
   weighs the same as a class, so a typed hover rule would out-score :focus and
   a field would refuse to light up while the pointer that clicked it rested on
   it. Keep this above the three state rules below. */
.cform input:hover,
.cform select:hover,
.cform textarea:hover {
  border-color: var(--line);
  transition-duration: var(--mo-instant);
}
.cform ::placeholder { color: var(--muted); opacity: .7; }
.cform textarea { resize: vertical; min-height: 130px; }

/* A quiet red border and wash, no shake. Listed before focus so a focused
   invalid field still reads as focused, with the combined rule below putting
   the red back on top. :user-invalid covers modern browsers; the class covers
   engines whose user-validity timing differs. */
.cform input:user-invalid,
.cform textarea:user-invalid,
.cform.was-validated input:invalid,
.cform.was-validated select:invalid,
.cform.was-validated textarea:invalid {
  background-color: var(--error-wash);
  border-color: var(--error-line);
}

/* Fields skip the outline ring, so focus has to be unmistakable without it:
   accent border, a fill warmed toward it, and a halo around the whole field.
   `:focus`, not `:focus-visible` — a select clicked with a mouse does not
   match :focus-visible, which would leave the dropdown dark next to a lit
   text field with no rule the visitor could work out. */
.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  outline: none;
  border-color: var(--focus-line);
  background-color: rgba(16,177,255,.05);
  box-shadow: var(--focus-halo);
  transition-duration: var(--mo-instant);
}
.cform input:user-invalid:focus,
.cform textarea:user-invalid:focus,
.cform.was-validated input:invalid:focus,
.cform.was-validated select:invalid:focus,
.cform.was-validated textarea:invalid:focus {
  border-color: rgba(254,14,14,.62);
  background-color: var(--error-wash);
  box-shadow: var(--error-halo);
}

/* Keep Chrome's forced autofill colours off the dark fields. */
.cform input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-background-clip: text;
  background-clip: text;
}

.cform-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 2px;
}
.cform-req { margin: 0; font-size: 12.5px; color: var(--muted); }
.btn-send {
  background: var(--ring);
  color: var(--on-ring);
  border-color: var(--line-bright);
  font-weight: 800;
  padding: 11px 22px;
}
.btn-send::before { content: none; }
.submit-btn { display: grid; }
.submit-label,
.submit-pending { grid-area: 1 / 1; }
.submit-label { transition: opacity var(--mo-instant) var(--mo-in); }
.submit-pending { opacity: 0; transition: opacity var(--mo-quick) var(--mo-out); }
.cform.is-submitting .submit-label { opacity: 0; }
.cform.is-submitting .submit-pending { opacity: 1; transition-delay: var(--mo-stagger); }
.submit-btn:disabled { cursor: wait; }
/* `.btn` animates translate and scale as separate properties, never transform,
   so a `transform: none` here would match nothing and a button disabled
   mid-submit would still lift under the pointer while it was busy. */
.submit-btn:disabled:hover,
.submit-btn:disabled:active { translate: 0; scale: 1; filter: none; }

.cform-sent {
  color: var(--text); opacity: 0;
  transition: opacity var(--mo-base) var(--mo-out);
}
.cform-sent[hidden] { display: none; }
.cform-sent.is-visible { opacity: 1; }
.cform-sent p { margin: 0; }

/* Leaves the site, and says so. */
.btn--out {
  padding: 10px 15px; font-size: 14px;
  border-color: var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.btn--out::before { content: none; }
.btn--out:hover { background: rgba(255,255,255,.10); color: var(--white); }
.btn--out .ext {
  flex: 0 0 auto; opacity: .55;
  transition: opacity var(--mo-quick) var(--mo-out), translate var(--mo-quick) var(--mo-out);
}
.btn--out:hover .ext {
  opacity: 1;
  translate: calc(1px * var(--mo-travel)) calc(-1px * var(--mo-travel));
  transition-timing-function: var(--mo-snap);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  /* Stacked, the shot goes back to a capped block above the text it
     illustrates, rather than stretching to the full reading width. */
  .showcase { grid-template-columns: 1fr; row-gap: 22px; }
  .shotblock { max-width: 620px; margin-inline: auto; }
  .split__col + .split__col {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
}
@media (max-width: 640px) {
  .split__col, .bugcard { padding: 18px; }
  /* Paired fields stack rather than shrinking to a width nothing readable
     fits in. */
  .cform-row, .cform-row--3 { grid-template-columns: 1fr; gap: 16px; }
  /* Full width at phone size: a download button is the one thing on the page
     that should be impossible to miss or mis-tap. */
  .btn--go { width: 100%; justify-content: center; }
}