/* =====================================================================
   brand-app.css — 学習アプリの紹介 (/brand/app/)
   ---------------------------------------------------------------------
   Loaded by that page only, after css/brand.css. The page is the brand
   center's reference guide (eiken.css: compact hero, 目次 rail, numbered
   chapters); this file adds one part, a feature of the app:

     .app-shot          one feature: the screens, then the copy and files
     .app-shot-media    the computer screen in a plain window, the phone
                        screen in front of its lower right corner
     .app-shot-body     number + who it is for, title, description, the
                        points, the downloads and a copy control

   The screens are the app's own images; the window and the phone are
   drawn here, in the site's neutrals, so nothing is painted over the
   app (the downloads are the bare screens). Sizes are tokens.
   ===================================================================== */

.app-shot {
  margin-top: var(--sp-12);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--border-warm);
}
.eiken-chapter > p + .app-shot { margin-top: var(--sp-10); padding-top: 0; border-top: 0; }

/* ---------- the screens ---------- */
.app-shot-media {
  position: relative;
  padding: var(--sp-6) 26% var(--sp-10) var(--sp-6);   /* the right quarter is the phone's */
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  background: var(--bg-cream);
}
.app-shot-media figure { margin: 0; }
.app-shot-media img { display: block; width: 100%; height: auto; }
.app-shot-media a { display: block; cursor: zoom-in; }
/* The frames clip their screen, so the focus ring goes on the frame. */
.app-shot-media a:focus-visible { outline: none; }
.app-shot-desktop:has(a:focus-visible),
.app-shot-phone:has(a:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.app-shot-desktop:has(a:hover) { box-shadow: var(--shadow-lg); }

/* The computer: a window with three quiet dots. */
.app-shot-desktop {
  overflow: hidden;
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
  background: var(--bg-white);
  box-shadow: var(--shadow-md);
}
.app-shot-desktop::before {
  content: '';
  display: block;
  height: var(--sp-6);
  border-bottom: 1px solid var(--border-warm);
  background:
    radial-gradient(circle, #DED6CC 3.5px, transparent 4px) var(--sp-3) 50% / 12px 12px no-repeat,
    radial-gradient(circle, #DED6CC 3.5px, transparent 4px) calc(var(--sp-3) + 14px) 50% / 12px 12px no-repeat,
    radial-gradient(circle, #DED6CC 3.5px, transparent 4px) calc(var(--sp-3) + 28px) 50% / 12px 12px no-repeat,
    var(--bg-white);
}

/* The phone: in front of the window's lower right corner. */
.app-shot-phone {
  position: absolute;
  right: var(--sp-6);
  bottom: var(--sp-6);
  width: 24%;
  overflow: hidden;
  border: 5px solid #23201C;   /* a phone's bezel, not a brand colour */
  border-radius: 22px;
  background: #23201C;
  box-shadow: var(--shadow-lg);
}
.app-shot-phone img { border-radius: 17px; }

@media (max-width: 600px) {
  .app-shot-media { padding: var(--sp-4) 30% var(--sp-8) var(--sp-4); }
  .app-shot-phone { right: var(--sp-3); bottom: var(--sp-4); width: 31%; border-width: 3px; border-radius: 14px; }
  .app-shot-phone img { border-radius: 11px; }
  .app-shot-desktop::before { height: var(--sp-4); background-size: 8px 8px; }
}

.app-shot-missing {
  display: grid;
  place-items: center;
  aspect-ratio: 1280 / 860;
  margin: 0;
  border: 1px dashed var(--border-warm);
  border-radius: var(--r-md);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--ink-quiet);
}

/* ---------- the copy ---------- */
.app-shot-body { margin-top: var(--sp-6); }
.app-shot-body > p { margin: 0 0 var(--sp-4); }
.app-shot-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
}
.app-shot-num {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--ink-quiet);
}
.app-shot-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
}
.app-shot-files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-5);
}