/* The account area (/learn/) in the native frame (plan 4, task 3): the
   copies under src/templates/site/learn/ restyled to the B look - a
   centred card, pill buttons (site.css's own .btn, already loaded by every
   frame page), the same wording the retired archive templates used.
   Site\Frame::learn links this. site.css (always loaded by the frame) is what defines
   the --plum/--wash/--line/--shadow/--pill/etc. custom properties used
   below. */

.jr-learn { max-width: 640px; margin: 0 auto; padding: 8px 0 72px; }

.jr-learn-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 40px; }

.jr-learn-title { margin: 0 0 10px; font-size: clamp(28px, 4vw, 38px); }
.jr-learn-lede { margin: 0 0 24px; color: var(--muted); }

.jr-flash { padding: 12px 16px; border-radius: 10px; margin: 0 0 20px; font-weight: 600; font-size: 15px; }
.jr-flash-ok { background: rgba(31, 122, 77, .1); color: #1f7a4d; }
.jr-flash-bad { background: rgba(163, 35, 43, .08); color: #a3232b; }

.jr-learn-form { margin: 0; }
.jr-learn-form label { display: block; font: 700 14px/1 var(--ui); margin: 0 0 8px; }
.jr-learn-form input {
  display: block; width: 100%; max-width: 360px; font: 500 17px var(--body); color: var(--ink);
  padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px; margin: 0 0 18px; background: #fff;
}
.jr-learn-form input:focus { outline: none; border-color: var(--violet); }
/* "Send me Jean's emails" on the code page (email plan 5a): a tick box
   with its words beside it, not a full-width field. */
.jr-learn-form label.jr-learn-consent { display: flex; gap: 12px; align-items: flex-start; font: 500 15px/1.45 var(--body); margin: 0 0 20px; cursor: pointer; }
.jr-learn-form .jr-learn-consent input { width: 22px; height: 22px; padding: 0; margin: 1px 0 0; flex: none; accent-color: var(--plum); }
/* The rule above every field drops the outline on focus; the box keeps a ring for the keyboard. */
.jr-learn-consent input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.jr-learn-again { margin-top: 16px; }
.jr-link {
  background: none; border: 0; padding: 0; margin: 0; color: var(--plum); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font: inherit;
}
.jr-link:hover { color: var(--violet); }

.jr-learn-or { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: var(--muted); font-size: 14px; }
.jr-learn-or::before, .jr-learn-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.jr-apple-button {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 360px;
  padding: 14px 20px; border-radius: var(--pill); font: 700 15px/1 var(--ui); text-decoration: none !important;
  transition: background .15s, box-shadow .15s; box-sizing: border-box;
  background: #000; color: #fff !important; margin: 0 0 12px;
}
.jr-apple-button:hover { background: #222; }
.jr-google-slot { margin: 0 0 12px; }

.jr-learn-help { margin: 20px 0 0; color: var(--muted); font-size: 14px; }

.jr-learn-box { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px 28px; margin: 0 0 20px; }
.jr-learn-box h2 { margin: 0 0 14px; font-size: 1.15rem; }
.jr-learn-box ul { list-style: none; margin: 0; padding: 0; }
.jr-learn-box li { padding: 10px 0; border-top: 1px solid var(--line); }
.jr-learn-box li:first-child { border-top: 0; padding-top: 0; }
.jr-learn-box p { margin: 0; }
.jr-learn-when { color: var(--muted); font-size: .85rem; }

.jr-learn-out { margin-top: 32px; text-align: center; }

.jr-welcome { max-width: 640px; margin: 0 auto; padding: 8px 0 72px; }
.jr-welcome .btn { display: inline-block; margin: 10px 0 16px; }
.jr-welcome-slow { background: var(--wash); border-radius: 12px; padding: 16px 20px; }
.jr-small { font-size: 14px; color: var(--muted); }

@media (max-width: 640px) {
  .jr-learn-card, .jr-learn-box { padding: 26px 22px; }
}

/* Apple and Google centred under the "or", the same width (Michael, Sept 27). */
.jr-apple-button { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; justify-content: center; box-sizing: border-box; }
.jr-google-slot { display: flex; justify-content: center; }
.jr-learn-help { text-align: center; }
.jr-apple-button { margin-bottom: 18px; }  /* room between Apple and Google (Michael, Sept 27) */