/* OshiDiary — /testandroid (Android closed-beta onboarding).

   Layered on top of styles.css, which already supplies the palette tokens,
   dark mode, .wrap / .nav / .foot / .btn / .langswitch / .eyebrow / .reveal.
   Everything here is only what that base does not cover, and it is all built
   from the same tokens — which is why there is no dark-mode block below: the
   tokens flip themselves.

   Page-local classes are prefixed t- so they can never collide with the
   landing page's own classes in the shared stylesheet.

   The accent wash below is the same 12% mix .tag uses; that ratio is the one
   documented as 4.7:1 against --accent-deep, so don't deepen it casually. */

/* ─── hero ─── */
.t-hero { text-align: center; }
.t-hero__in { position: relative; }
.t-hero__icon {
  width: 88px; height: 88px; border-radius: 22px;
  margin: 0 auto 22px; box-shadow: var(--shadow-md);
}
.t-hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: 14px; }
.t-hero .lede { margin-bottom: 28px; }
.t-hero .btn { margin-inline: auto; }

/* ─── generic section rhythm ─── */
/* Narrower than the landing page's --wrap: this page is mostly prose, and
   1120px-wide paragraphs are tiring to read. */
.t-sec.wrap { max-width: 940px; }
.t-sec { padding-block: clamp(40px, 6vw, 72px); }
.t-sec > h2 { margin-bottom: 10px; }
.t-sec > .lede { margin-bottom: 28px; }

/* ─── "why we need testers" note ─── */
.t-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-deep);
  border-radius: var(--r-sm);
  padding: clamp(20px, 3vw, 28px);
  display: grid; gap: 14px;
}
.t-note strong { color: var(--accent-deep); }

/* ─── the two shortcut cards ─── */
.t-picks { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 720px) { .t-picks { grid-template-columns: 1fr 1fr; } }
.t-pick {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 22px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.t-pick:hover {
  border-color: color-mix(in srgb, var(--accent-deep) 55%, transparent);
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
/* The card's three lines are spans inside the <a>, so they need to be told to
   stack — .tag from styles.css is already inline-block. */
.t-pick__title { display: block; font-weight: 700; font-size: 1.1rem; margin: 6px 0 5px; }
.t-pick__url { display: block; font-size: .82rem; color: var(--text-faint); word-break: break-all; }

/* ─── the seven steps ─── */
.t-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 18px; }
.t-step {
  counter-increment: step;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: clamp(20px, 3vw, 28px);
  display: grid; gap: 16px; align-items: start;
}
/* Three layouts, because a tall phone screenshot behaves very differently at
   each width: stacked on a phone; number beside the text once there is room;
   and on a wide screen the screenshot moves alongside the instructions rather
   than leaving half the card empty and tripling the page's length. */
@media (min-width: 620px) { .t-step { grid-template-columns: 52px 1fr; } }
@media (min-width: 900px) { .t-step { grid-template-columns: 52px 1fr 232px; column-gap: 26px; } }
.t-step::before {
  content: counter(step, decimal-leading-zero);
  width: 52px; height: 52px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.t-step h3 { margin-bottom: 6px; }
.t-step p { color: var(--text-muted); font-size: .96rem; }
.t-step__link {
  display: inline-block; margin-top: 13px; padding: 9px 16px;
  border-radius: 10px; font-size: .85rem; font-weight: 600;
  text-decoration: none; word-break: break-all;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transition: background .18s ease;
}
.t-step__link:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ─── polaroid screenshot frames ───
   Echoes the cheki album look inside the app. The tilt alternates so a column
   of them does not read as a stack of identical cards. */
.t-shot {
  margin: 4px auto 0; max-width: 250px;
  background: var(--bg); border: 1px solid var(--border);
  padding: 11px 11px 40px; border-radius: 5px;
  box-shadow: var(--shadow-md);
  transform: rotate(-1.3deg); position: relative;
  transition: transform .25s ease;
}
.t-step:nth-of-type(even) .t-shot { transform: rotate(1.5deg); }
.t-shot:hover { transform: rotate(0deg); }
.t-shot figcaption {
  position: absolute; inset: auto 8px 12px; text-align: center;
  font-size: .78rem; color: var(--text-faint);
}

/* Reserve the screenshot's space before it loads, so nothing jumps. The ratio
   is the phone captures' own 780x1688. */
.t-shot__frame {
  aspect-ratio: 780 / 1688; overflow: hidden; border-radius: 2px;
  background: var(--surface-2);
  /* faint diagonal hatch, visible only while the frame is empty */
  background-image: repeating-linear-gradient(
    45deg, transparent 0 7px, color-mix(in srgb, var(--text-faint) 12%, transparent) 7px 8px);
  display: grid; place-items: center;
}
.t-shot__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Set by copy.js when the screenshot 404s, so the seven slots read as
   "artwork still to come" instead of seven broken-image icons. Removing the
   class is not needed — dropping the real file in makes it never apply. */
.t-shot__frame.is-empty img { display: none; }   /* else the alt text and a broken-image icon show through */
.t-shot__frame.is-empty::after {
  content: attr(data-pending);
  font-size: .78rem; color: var(--text-faint); text-align: center; padding: 0 10px;
}

@media (min-width: 620px) and (max-width: 899.98px) {
  /* keep the shot under the text, not under the step number */
  .t-shot { grid-column: 2; }
}
@media (min-width: 900px) { .t-shot { margin: 0; max-width: 232px; } }

@media (prefers-reduced-motion: reduce) {
  .t-shot, .t-shot:hover, .t-step:nth-of-type(even) .t-shot { transform: none; transition: none; }
  .t-pick:hover { transform: none; }
}