/* apps.nexuslanguages.com

   This page uses the app's own surfaces rather than inventing flat ones. The glass overlay, the
   elevation ladder, the inset edge and the conic shimmer rim all live in styles.css and are
   joined here by adding `.apps-card` and `.apps-hero` to those selector lists, so a change to
   the design system reaches this page too, which is the point of having one.

   What is left in this file is only what is particular to a directory: the hero, the grid, and
   the mark on each card. */

.apps-body { min-height: 100vh; }

.apps-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.apps-name { font-size: 17px; letter-spacing: -.02em; }

.apps-main { max-width: 1180px; margin: 0 auto; padding: 26px 18px 76px; }

/* The hero, on the same terms as the course's own. */
.apps-hero {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 30px; padding: clamp(26px, 5vw, 52px); margin-bottom: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 95%, transparent), color-mix(in srgb, var(--accent-2) 9%, var(--panel)));
  overflow: hidden;
}
.apps-hero::after {
  content: ""; position: absolute; inset: auto -120px -240px auto; width: 480px; height: 480px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%);
}
.apps-hero h1 { font-size: clamp(34px, 6vw, 62px); letter-spacing: -.045em; line-height: 1.02; margin: 0 0 10px; }
.apps-lead { margin: 0; color: var(--muted); font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; max-width: 46ch; }
.apps-count { display: inline-flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.apps-count span {
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  background: var(--bg-2); font-size: 12px; font-weight: 750; color: var(--muted);
}

.apps-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px;
}
.apps-card {
  border-radius: 22px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: linear-gradient(160deg, var(--panel), color-mix(in srgb, var(--panel-2) 82%, var(--panel)));
  box-shadow: var(--nx-e2), var(--nx-edge);
  transition: transform .18s ease, box-shadow .18s ease;
}
.apps-card > a {
  display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: start;
  padding: 20px; text-decoration: none; color: inherit; min-height: 100%;
}
/* No card is wider than another. The extension had `grid-column: 1 / -1` and read as the
   headline of the page rather than the sixth item on it. Six equal cards, and the order says
   what is first. */
.apps-card:hover { transform: translateY(-2px); }
.apps-card > a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 22px; }

.apps-art {
  width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  color: #06131e;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 26%, transparent), var(--nx-edge);
}
.apps-art svg { width: 32px; height: 32px; display: block; }
/* Two of the marks take the second accent so the six are told apart at a glance rather than by
   reading them, and EyeSpeak takes the success hue because it is the one that is not a study
   tool. */
.apps-art[data-art="study"], .apps-art[data-art="chartit"] {
  background: linear-gradient(135deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 55%, var(--accent)));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-2) 26%, transparent), var(--nx-edge);
}
.apps-art[data-art="speak"] {
  background: linear-gradient(135deg, var(--success, var(--accent)), color-mix(in srgb, var(--success, var(--accent)) 55%, var(--accent)));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--success, var(--accent)) 26%, transparent), var(--nx-edge);
}

.apps-text { display: grid; gap: 5px; min-width: 0; }
.apps-text b { font-size: 20px; letter-spacing: -.02em; }
.apps-text small {
  /* 12px, not 11.5. It is a monospace label in the directory that tells somebody
     which browsers the extension runs in, and the phone audit's floor is 12. */
  color: var(--accent-text, var(--accent)); font-size: 12px; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.apps-text p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.apps-text code {
  font-size: 12.5px; padding: 1px 6px; border-radius: 6px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text, var(--accent));
}

@media (max-width: 520px) {
  .apps-main { padding: 18px 12px 56px; }
  .apps-hero { border-radius: 24px; }
  .apps-card > a { grid-template-columns: 48px 1fr; gap: 13px; padding: 15px; }
  .apps-art { width: 48px; height: 48px; border-radius: 14px; }
  .apps-art svg { width: 26px; height: 26px; }
  .apps-text b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .apps-card, .apps-card:hover { transform: none; transition: none; } }

/* The extension page. Same cards, but they are three things it does rather than three places
   to go, so nothing here is a link and nothing pretends to be one. */
.ext-card { display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: start; padding: 20px; }
.ext-get { margin-top: 20px; }
.ext-get h2 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.03em; margin: 0 0 10px; }
.ext-download {
  display: inline-block; margin: 14px 0 4px; padding: 13px 20px; border-radius: 14px;
  background: var(--accent); color: #06131e; font-weight: 750; font-size: 15px; text-decoration: none;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 30%, transparent), var(--nx-edge);
}
.ext-download:hover { filter: brightness(1.06); }
.ext-download:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.ext-steps { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 7px; color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 54ch; }
.ext-steps code, .ext-steps b { color: var(--text); }
.ext-steps code { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.ext-note { margin: 18px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 54ch; }
@media (max-width: 520px) { .ext-card { grid-template-columns: 48px 1fr; gap: 13px; padding: 15px; } }

/* Mobile Safari zooms the page in when a field under 16px takes focus, and it
   does not zoom back out. Measured by scripts/phone-audit.mjs at 390x844. */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px; }
}