/* Learner screens in the learning workspace (learn-a spec, section 5.7). Injected by scripts/build-frontend.mjs after
   official-brand.css. Uses the brand guide role tokens from assets/brand/brand.css, so the light and dark themes follow
   html[data-theme] like the rest of the workspace. Later work packages add their screens here (onboarding steps, notes
   hub, lesson reader, practice session, dashboard). Targets stay at least 44 px, primary actions and fields 48 px, and
   no text box has a fixed height. */
@import url('/assets/learn/targets.css?v=20261022-a9'); /* shared touch targets (learn-a WP-A9) */

/* Login and sign-up: where the learner continues after signing in (learn-routes.js). */
.learn-return-note {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-link);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Learning setup (learn-onboarding.js): the step heading with its progress, the step, and the summary beside it from
   960 px. Selected cards use the soft violet of the brand layer (--rai-soft, light and dark); text on mint uses ink
   (--navy keeps ink in both themes). States always carry a word and an icon as well as a colour. */
.learn-ob{--ob-tint:var(--rai-soft);--ob-on-accent:var(--navy);padding:40px 20px 56px;
  background:var(--color-background);color:var(--color-text-primary)}
.learn-ob-wrap{max-width:1120px;margin:0 auto}
.learn-ob-header-actions{display:flex;align-items:center;gap:16px}
.learn-ob-head{margin:0 0 24px}
.learn-ob-eyebrow{margin:0 0 10px;color:var(--color-link);font:700 13px/1.4 var(--sans);letter-spacing:.08em;
  text-transform:uppercase}
.learn-ob-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.learn-ob h1{margin:0;color:var(--color-text-primary);font:700 clamp(28px,4.2vw,40px)/1.15 var(--heading);
  letter-spacing:-.02em;overflow-wrap:anywhere}
.learn-ob h1:focus,.learn-ob-card h2:focus{outline:none}
.learn-ob-intro{max-width:720px;margin:12px 0 0;color:var(--color-text-secondary);font-size:16px;line-height:1.6}
.learn-ob-icon{width:20px;height:20px}

.learn-ob-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:24px 0 0;padding:0;
  list-style:none}
.learn-ob-steps li{min-width:0;padding-top:8px;border-top:4px solid var(--color-border);
  color:var(--color-text-secondary);font-size:14px;line-height:1.3}
.learn-ob-steps li.is-done,.learn-ob-steps li.is-current{border-top-color:var(--color-action)}
.learn-ob-steps li.is-current{color:var(--color-text-primary);font-weight:700}
.learn-ob-steps a,.learn-ob-step{display:flex;align-items:center;gap:8px;min-height:44px;color:inherit;
  text-decoration:none}
.learn-ob-steps a:hover .learn-ob-step-name{text-decoration:underline}
.learn-ob-step-mark{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;
  border:2px solid currentColor;border-radius:50%;font-size:12px;font-weight:700}
.learn-ob-steps .is-done .learn-ob-step-mark{border-color:var(--color-action);background:var(--color-action);
  color:var(--color-action-text)}
.learn-ob-steps .is-current .learn-ob-step-mark{border-color:var(--color-action);color:var(--color-link)}
.learn-ob-step-mark .learn-ob-icon{width:14px;height:14px}
.learn-ob-step-name{min-width:0;overflow-wrap:anywhere}

.learn-ob-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:0;padding:4px 12px;
  border-radius:999px;background:var(--color-accent);color:var(--ob-on-accent);font-size:14px;font-weight:600;
  line-height:1.3}
.learn-ob-chip .learn-ob-icon{width:16px;height:16px}
.learn-ob-chip.is-info{background:var(--info-bg);color:var(--info-text)}
.learn-ob-chip.is-quiet{min-height:28px;padding:2px 10px;background:var(--ob-tint);color:var(--color-text-primary);
  font-size:13px}

.learn-ob-banner{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;padding:12px 16px;border-radius:12px;
  font-weight:600;line-height:1.5}
.learn-ob-banner.is-info{background:var(--info-bg);color:var(--info-text)}
.learn-ob-banner.is-attention{background:var(--attention-bg);color:var(--attention-text)}
.learn-ob-banner .learn-ob-icon{flex:none;margin-top:2px}
.learn-ob-banner:focus{outline:2px solid var(--color-focus);outline-offset:2px}

.learn-ob-grid{display:grid;gap:24px;align-items:start}
@media (min-width:960px){
  .learn-ob-grid{grid-template-columns:minmax(0,1fr) 300px}
  .learn-ob-grid.is-single{max-width:760px;grid-template-columns:minmax(0,1fr)}
}
.learn-ob-panel{min-width:0;margin:0}
.learn-ob-card{min-width:0;padding:20px;border:1px solid var(--color-border);border-radius:16px;
  background:var(--color-surface);color:var(--color-text-primary)}
.learn-ob-card h2{margin:0 0 10px;color:var(--color-text-primary);font:700 22px/1.3 var(--heading)}
.learn-ob-card h3{margin:18px 0 8px;color:var(--color-text-primary);font:700 17px/1.35 var(--heading)}
.learn-ob-card p{margin:0 0 10px;line-height:1.6}
.learn-ob-loading{color:var(--color-text-secondary)}

.learn-ob-fieldset{min-width:0;margin:0;padding:0;border:0}
.learn-ob-legend{display:block;width:100%;margin:0 0 12px;padding:0;color:var(--color-text-primary);font-size:16px;
  font-weight:700}
.learn-ob-choices{display:grid;gap:12px}
@media (min-width:640px){.learn-ob-choices.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.learn-ob-choice{display:flex;align-items:flex-start;gap:14px;min-width:0;min-height:56px;margin:0;padding:15px;
  border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface);
  color:var(--color-text-primary);line-height:1.45;cursor:pointer}
.learn-ob-choice:hover{border-color:var(--color-link)}
.learn-ob-choice.is-selected,.learn-ob-choice:has(input:checked){border-color:var(--color-action);
  box-shadow:inset 0 0 0 1px var(--color-action);background:var(--ob-tint)}
/* the whole card shows the focus (WebKit does not mark a radio reached with the arrow keys as focus-visible) */
.learn-ob-choice:focus-within,.learn-ob-day:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}
.learn-ob .learn-ob-choice input:focus,.learn-ob .learn-ob-day input:focus{outline:none}
.learn-ob .learn-ob-choice input,.learn-ob .learn-ob-day input{flex:none;width:20px;height:20px;min-height:0;
  margin:2px 0 0;accent-color:var(--color-action)}
.learn-ob-choice-icon{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--ob-tint);color:var(--color-link)}
.learn-ob-choice-icon .learn-ob-icon{width:22px;height:22px}
.learn-ob-choice-text{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}
.learn-ob-choice-text strong{font-size:16px}
.learn-ob-choice-text span{color:var(--color-text-secondary);font-size:14px}
.learn-ob-choice.is-compact{align-items:center;min-height:52px}
.learn-ob-choice.is-option .learn-ob-choice-text{color:var(--color-text-primary);font-size:16px}
.learn-ob-key{flex:none;min-width:1.2em;font-weight:700}

.learn-ob-error{margin:12px 0 0;border-radius:10px;color:var(--error-text);font-weight:600;line-height:1.5}
.learn-ob-error:empty{margin:0}
.learn-ob-error:not(:empty){padding:10px 14px;background:var(--error-bg)}
.learn-ob-hint{margin:8px 0 0;color:var(--color-text-secondary);font-size:14px;line-height:1.5}
.learn-ob-hint[hidden]{display:none}
.learn-ob-hint a{color:var(--color-link)}
@media (min-width:561px){.learn-ob-actions+.learn-ob-hint{text-align:right}}
.learn-ob-count{margin:14px 0 0;color:var(--color-text-secondary);font-size:14px}
.learn-ob-status{margin:16px 0 0;font-weight:600}
.learn-ob-note{color:var(--color-text-secondary);font-size:14px}

.learn-ob-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.learn-ob-actions .learn-ob-primary{margin-left:auto}
.learn-ob .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;
  font-size:15px;font-weight:600;text-decoration:none}
.learn-ob .btn .learn-ob-icon{width:18px;height:18px}
.learn-ob .btn[disabled]{cursor:not-allowed;opacity:.55}
.learn-ob .btn:focus-visible,.learn-ob a:focus-visible,.learn-ob select:focus-visible,.learn-ob-link:focus-visible,
.learn-ob .inp:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.learn-ob-link{min-height:44px;padding:8px 4px;border:0;background:none;color:var(--color-link);font:inherit;
  font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.learn-ob-later{margin:16px 0 0;text-align:center}

.learn-ob-aside{min-width:0;padding:20px;border:1px solid var(--color-border);border-radius:16px;
  background:var(--color-surface)}
.learn-ob-aside h2{margin:0 0 14px;color:var(--color-text-primary);font:700 18px/1.3 var(--heading)}
.learn-ob-summary{display:grid;gap:14px;margin:0}
.learn-ob-summary dt{color:var(--color-text-secondary);font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase}
.learn-ob-summary dd{margin:2px 0 0;overflow-wrap:anywhere}
.learn-ob-aside-note{display:flex;gap:8px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--color-border);
  color:var(--color-text-secondary);font-size:14px;line-height:1.5}
.learn-ob-aside-note .learn-ob-icon{flex:none;width:18px;height:18px;color:var(--color-link)}

.learn-ob-facts{display:grid;gap:10px;margin:6px 0 14px;padding:0;list-style:none}
.learn-ob-facts li{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.learn-ob-facts .learn-ob-icon{flex:none;margin-top:2px;color:var(--color-link)}
.learn-ob-question-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;
  margin-bottom:12px}
.learn-ob-badge{display:inline-flex;align-items:center;min-height:28px;padding:2px 12px;border-radius:999px;
  background:var(--color-accent);color:var(--ob-on-accent);font-size:13px;font-weight:700}
.learn-ob-card .learn-ob-qcount{margin:0;color:var(--color-text-secondary);font:600 15px/1.4 var(--sans)}
.learn-ob-card .learn-ob-qtopic{color:var(--color-text-secondary);font-size:14px}
.learn-ob-stem{display:block;width:100%;margin:0 0 14px;padding:0;color:var(--color-text-primary);font-size:18px;
  font-weight:600;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.learn-ob .learn-ob-number{width:100%;max-width:360px;font-size:18px}
.learn-ob-card .learn-ob-saved{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;
  color:var(--color-text-secondary);font-size:14px}
.learn-ob-saved .learn-ob-icon{flex:none;width:18px;height:18px;color:var(--color-link)}
.learn-ob-review{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.learn-ob-review li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;
  border:1px solid var(--color-border);border-radius:12px}
.learn-ob-review-text{display:grid;flex:1 1 220px;gap:2px;min-width:0;overflow-wrap:anywhere}
.learn-ob-review-text span{color:var(--color-text-secondary);font-size:14px}
.learn-ob-review-state{font-weight:600}
.learn-ob .learn-ob-review .btn{min-height:44px}

.learn-ob-card .learn-ob-method{padding:12px 14px;border-left:4px solid var(--color-link);border-radius:8px;
  background:var(--ob-tint)}
.learn-ob-topics{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.learn-ob-topics li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;
  padding:10px 14px;border:1px solid var(--color-border);border-radius:12px}
.learn-ob-topic-name{min-width:0;overflow-wrap:anywhere}
.learn-ob-result{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:14px;
  font-weight:600}
.learn-ob-result.is-right{background:var(--success-bg);color:var(--success-text)}
.learn-ob-result.is-gap{background:var(--attention-bg);color:var(--attention-text)}
.learn-ob-result .learn-ob-icon{width:16px;height:16px}
.learn-ob-start{margin:8px 0 0;padding-left:22px;line-height:1.7}

.learn-ob-days{display:flex;flex-wrap:wrap;gap:8px}
.learn-ob-day{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:8px 14px;
  border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);
  color:var(--color-text-primary);cursor:pointer}
.learn-ob-day.is-selected,.learn-ob-day:has(input:checked){border-color:var(--color-action);background:var(--ob-tint)}
.learn-ob .learn-ob-day input{margin:0}
.learn-ob-minutes{max-width:320px;margin:18px 0 0}
.learn-ob-basis{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;color:var(--color-text-secondary);
  line-height:1.55}
.learn-ob-basis .learn-ob-icon{flex:none;margin-top:2px;color:var(--color-link)}
.learn-ob-plan{display:grid;gap:12px;margin:14px 0 0;padding:0;list-style:none}
@media (min-width:640px){.learn-ob-plan{grid-template-columns:repeat(2,minmax(0,1fr))}}
.learn-ob-session{min-width:0;padding:16px;border:1px solid var(--color-border);border-radius:14px;
  background:var(--color-surface)}
.learn-ob-session-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.learn-ob-session h3{margin:0;color:var(--color-text-primary);font:700 17px/1.3 var(--heading)}
.learn-ob-activity{margin:12px 0 2px;font-weight:700}
.learn-ob-topic{margin:0;color:var(--color-text-secondary);overflow-wrap:anywhere}
.learn-ob-access{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:2px 10px;border-radius:999px;
  background:var(--attention-bg);color:var(--attention-text);font-size:14px;font-weight:600}
.learn-ob-access .learn-ob-icon{width:16px;height:16px}

@media (max-width:560px){
  .learn-ob{padding:28px 16px 40px}
  .learn-ob-steps a,.learn-ob-step{flex-direction:column;align-items:flex-start;gap:4px}
  .learn-ob-steps li{font-size:13px}
  .learn-ob-card,.learn-ob-aside{padding:16px}
  .learn-ob-actions .btn{flex:1 1 auto}
  .learn-ob-actions .learn-ob-primary{flex-basis:100%;margin-left:0}
}
@media (prefers-reduced-motion:no-preference){
  .learn-ob-choice,.learn-ob-day{transition:border-color .15s ease,background-color .15s ease}
}

/* Revision notes hub and lesson reader (learn-reader.js, WP-A6): the subject's topics beside the note from 1024 px, a
   disclosure above it on smaller screens. The note keeps the app's own styles; its older side column and section chips
   are replaced by "Parts of this note" and the actions around it. Lines stay readable (at most about 72 characters). */
.learn-notes{--ln-tint:var(--rai-soft);color:var(--color-text-primary)}
.learn-icon{width:18px;height:18px;flex:none}
.learn-notes a:focus-visible,.learn-notes button:focus-visible,.learn-notes summary:focus-visible,
.learn-notes [tabindex="-1"]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.learn-notes-banner{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 16px;border-radius:12px;
  font-weight:600;line-height:1.5}
.learn-notes-banner.is-info{background:var(--info-bg);color:var(--info-text)}
.learn-notes-banner.is-attention{background:var(--attention-bg);color:var(--attention-text)}
.learn-notes-banner .learn-icon{margin-top:2px}

.learn-crumb ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 10px;padding:0;list-style:none;font-size:14px}
.learn-crumb li{display:flex;align-items:center;gap:8px;min-width:0;color:var(--color-text-secondary)}
.learn-crumb li+li::before{content:"/";color:var(--color-text-secondary)}
.learn-crumb a{color:var(--color-link);text-underline-offset:3px}
.learn-crumb [aria-current]{overflow-wrap:anywhere}

.learn-notes-head{margin:0 0 20px}
.learn-notes-eyebrow{margin:0 0 10px;color:var(--color-link);font:700 13px/1.4 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;overflow-wrap:anywhere}
.learn-notes-title{margin:0 0 12px;font:700 clamp(26px,3.6vw,34px)/1.2 var(--heading);overflow-wrap:anywhere}
.learn-subjects ul{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.learn-subject-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;
  border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);
  color:var(--color-text-primary);font-weight:600;text-decoration:none}
.learn-subject-link:hover{border-color:var(--color-link)}
.learn-subject-link.is-current{border-color:var(--color-action);background:var(--ln-tint);
  box-shadow:inset 0 0 0 1px var(--color-action)}
.learn-progress{max-width:560px}
.learn-progress-text{margin:0 0 8px;line-height:1.5}
.learn-progress-bar{height:8px;border-radius:999px;background:var(--color-border);overflow:hidden}
.learn-progress-bar i{display:block;height:100%;border-radius:inherit;background:var(--color-action)}
.learn-progress-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;
  color:var(--color-text-secondary);line-height:1.5}
.learn-progress-note.is-attention{padding:10px 14px;border-radius:12px;background:var(--attention-bg);
  color:var(--attention-text);font-weight:600}
.learn-progress-stale{margin:6px 0 0;color:var(--color-text-secondary);font-size:14px}

.learn-notes-grid{display:grid;gap:20px;align-items:start}
.learn-notes-side{display:grid;gap:16px;min-width:0}
.learn-notes-main{min-width:0}
@media (min-width:1024px){
  .learn-notes-grid{grid-template-columns:280px minmax(0,1fr);gap:24px}
  .learn-notes-side{position:sticky;top:calc(var(--top,72px) + 16px);max-height:calc(100vh - var(--top,72px) - 32px);
    overflow:auto;overscroll-behavior:contain}
}

.learn-topics-box{border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface)}
.learn-topics-box summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;
  min-height:48px;padding:12px 16px;cursor:pointer;list-style:none}
.learn-topics-box summary::-webkit-details-marker{display:none}
.learn-topics-box summary::after{content:"";width:9px;height:9px;margin-left:auto;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.learn-topics-box[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.learn-topics-title{font:700 16px/1.35 var(--heading);overflow-wrap:anywhere}
.learn-topics-count{color:var(--color-text-secondary);font-size:14px}
.learn-units{margin:0;padding:0 8px 10px;list-style:none}
.learn-unit-name{margin:10px 8px 4px;color:var(--color-text-secondary);font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}
.learn-topic-list{margin:0;padding:0;list-style:none}
.learn-topic a{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 8px;border-radius:10px;
  color:var(--color-text-primary);text-decoration:none;line-height:1.4}
.learn-topic a:hover{background:var(--ln-tint)}
.learn-topic.is-current a{background:var(--ln-tint);box-shadow:inset 3px 0 0 var(--color-action);font-weight:700}
.learn-topic-num{flex:none;display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;
  border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:12px;font-weight:700}
.learn-topic.is-complete .learn-topic-num{border-color:var(--success-bg);background:var(--success-bg);
  color:var(--success-text)}
.learn-topic-name{flex:1;min-width:0;overflow-wrap:anywhere}
.learn-topic-state{flex:none;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;
  font-size:12px;font-weight:700;white-space:nowrap}
.learn-topic-state .learn-icon{width:14px;height:14px}
.learn-topic-state.is-complete{background:var(--success-bg);color:var(--success-text)}
.learn-topic-state.is-locked{border:1px solid var(--color-border);color:var(--color-text-secondary)}

.learn-sections ul{display:grid;gap:2px;margin:0;padding:8px;border:1px solid var(--color-border);border-radius:16px;
  background:var(--color-surface);list-style:none}
.learn-sections a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-radius:10px;
  color:var(--color-text-primary);text-decoration:none}
.learn-sections a:hover{background:var(--ln-tint)}
.learn-sections a.is-current{background:var(--ln-tint);font-weight:700}
.learn-sections .learn-icon{color:var(--color-link)}
/* below 1024 px the subject's sections are a row of links, so the note starts sooner */
@media (max-width:1023px){
  .learn-sections ul{display:flex;flex-wrap:wrap;gap:8px;padding:0;border:0;background:none}
  .learn-sections a{padding:8px 14px;border:1px solid var(--color-border);border-radius:999px;
    background:var(--color-surface)}
  .learn-sections a.is-current{border-color:var(--color-action);background:var(--ln-tint)}
}

.learn-topic-bar{display:grid;gap:12px;margin:0 0 14px;padding:16px;border:1px solid var(--color-border);
  border-radius:16px;background:var(--color-surface)}
.learn-topic-status{margin:0;line-height:1.7}
.learn-sync{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:2px 10px;border-radius:999px;
  background:var(--attention-bg);color:var(--attention-text);font-size:14px;font-weight:600;vertical-align:middle}
.learn-sync .learn-icon{width:16px;height:16px}
.learn-notes .learn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.learn-notes .learn-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  margin:0;text-decoration:none}
.learn-notes .learn-actions .btn.p{min-height:48px}
.learn-notes .btn[aria-disabled="true"]{cursor:not-allowed;opacity:.55}
.learn-notes .btn[aria-pressed="true"]{border-color:var(--color-action);box-shadow:inset 0 0 0 1px var(--color-action)}
.learn-parts ul{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.learn-parts a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;
  border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);
  color:var(--color-text-primary);font-weight:600;text-decoration:none}
.learn-parts a:hover{border-color:var(--color-link)}
.learn-note .g-note{grid-template-columns:minmax(0,1fr)}
.learn-note .side-note,.learn-note .mtoc{display:none}
.learn-note .note{max-width:72ch}
/* the note's own controls (text size, save diagram, feedback) get full-size targets in the reader */
.learn-note .btn{min-height:44px}
.learn-note .fsz .btn{min-width:44px;min-height:44px}
.learn-note .note h2{scroll-margin-top:calc(var(--top,72px) + 16px)}
.learn-topic-end{display:grid;gap:12px;margin:16px 0 0;padding:16px;border:1px solid var(--color-border);
  border-radius:16px;background:var(--color-surface)}
.learn-topic-end p{margin:0;line-height:1.5}
.learn-next span{min-width:0;overflow-wrap:anywhere;text-align:left}
.learn-notes-loading{padding:20px;border:1px solid var(--color-border);border-radius:16px;
  background:var(--color-surface)}
.learn-notes-empty h2{margin:0 0 8px;font:700 22px/1.3 var(--heading)}
.learn-notes-empty p{margin:0 0 14px;line-height:1.6}
@media (max-width:560px){
  .learn-notes .learn-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .learn-notes .learn-actions .btn{min-width:0;white-space:normal;text-align:center}
  .learn-notes .learn-actions .learn-complete,.learn-notes .learn-actions .learn-next,
  .learn-notes .learn-actions .btn:only-child{grid-column:1/-1}
  .learn-topic-bar,.learn-topic-end{padding:14px}
}

/* The connection line of the workspace (learn-outbox.js): above the page, outside the area each screen redraws. */
.learn-connection:empty{display:none}
.learn-connection{padding:16px 22px 0;background:var(--rai-soft)}
.learn-connection-line{display:flex;align-items:flex-start;gap:10px;max-width:1200px;margin:0 auto;padding:12px 16px;
  border-radius:12px;font-weight:600;line-height:1.5}
.learn-connection-line.is-attention{background:var(--attention-bg);color:var(--attention-text)}
.learn-connection-line.is-info{background:var(--info-bg);color:var(--info-text)}
.learn-connection-line .learn-icon{margin-top:2px}
@media (max-width:767px){.learn-connection{padding:12px 16px 0}}

/* Dashboard progress row with "Notes completed" and "Saved topics" (learn-dashboard.js): three tiles a row. */
@media (min-width:1024px){.canvas .kpis.learn-k6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.learn-kpi .d a{color:var(--color-link)}
.learn-kpi-retry{margin:6px 0 0}

/* Practice session (learn-practice.js, WP-A7): one question at a time in a column at most 920 px wide, the verdict
   in words with an icon (never colour alone), and the round summary. Options are full-width labels of at least 48 px. */
.learn-practice{--lp-tint:var(--rai-soft);color:var(--color-text-primary)}
/* a narrower column than other workspace pages, centred like them (#appShell .canvas sets 1320 px and
   margin-inline:auto in revision-design.css) */
#appShell .canvas.learn-practice,.canvas.learn-practice{max-width:920px}
.learn-practice a:focus-visible,.learn-practice button:focus-visible,.learn-practice textarea:focus-visible,
.learn-practice [tabindex="-1"]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.learn-practice h2:focus,.learn-practice h3:focus,.learn-practice-hint:focus,.learn-practice-banner:focus{outline:none}
.learn-practice-banner{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 16px;border-radius:12px;
  font-weight:600;line-height:1.5}
.learn-practice-banner.is-info{background:var(--info-bg);color:var(--info-text)}
.learn-practice-banner.is-attention{background:var(--attention-bg);color:var(--attention-text)}
.learn-practice-banner .learn-icon{margin-top:2px}
.learn-practice-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;
  margin:0 0 16px}
.learn-practice-heading{min-width:0;flex:1 1 320px}
.learn-practice-eyebrow{margin:0 0 8px;color:var(--color-link);font:700 13px/1.4 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;overflow-wrap:anywhere}
.learn-practice-title{margin:0;font:700 clamp(26px,3.6vw,34px)/1.2 var(--heading);overflow-wrap:anywhere}
.learn-practice .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;
  text-decoration:none;white-space:normal;text-align:center}
.learn-practice .btn.p{min-height:48px}
.learn-practice .btn[disabled]{cursor:not-allowed;opacity:.55}
.learn-practice-progress{margin:0 0 14px}
.learn-practice-count{margin:0 0 8px;line-height:1.5}
.learn-practice-count span{color:var(--color-text-secondary)}
.learn-practice-card{min-width:0;padding:20px;border:1px solid var(--color-border);border-radius:16px;
  background:var(--color-surface)}
.learn-practice-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;
  margin:0 0 10px}
.learn-practice-qtitle{margin:0;font:700 20px/1.3 var(--heading)}
.learn-practice-type{color:var(--color-text-secondary);font-size:14px;font-weight:600}
.learn-practice-stem{margin:0 0 16px;font-size:18px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}
.learn-practice-form{margin:0}
.learn-practice-options{min-width:0;margin:0;padding:0;border:0}
.learn-practice-options legend{margin:0 0 10px;padding:0;font-weight:700}
.learn-practice-option{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px;min-height:48px;margin:0 0 10px;
  padding:12px 14px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);
  line-height:1.5;cursor:pointer}
.learn-practice-option:hover{border-color:var(--color-link)}
.learn-practice-option:has(input:checked),.learn-practice-option.is-chosen{border-color:var(--color-action);
  background:var(--lp-tint);box-shadow:inset 0 0 0 1px var(--color-action)}
.learn-practice-option:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}
.learn-practice-option input{flex:none;width:20px;height:20px;min-height:0;margin:2px 0 0;accent-color:var(--color-action)}
.learn-practice-option input:focus{outline:none}
.learn-practice-option:has(input:disabled){cursor:default}
.learn-practice-key{flex:none;font-weight:700}
.learn-practice-text{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.learn-practice-mark{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;
  background:var(--info-bg);color:var(--info-text);font-size:14px;font-weight:700}
.learn-practice-mark.is-correct{background:var(--success-bg);color:var(--success-text)}
.learn-practice-mark.is-wrong{background:var(--error-bg);color:var(--error-text)}
.learn-practice-mark .learn-icon{width:16px;height:16px}
.learn-practice-field label{display:block;margin:0 0 8px;font-weight:700}
.learn-practice-field textarea{display:block;width:100%;max-width:100%;min-height:96px;padding:12px;font:inherit;
  font-size:16px;line-height:1.5;resize:vertical}
.learn-practice-help{margin:8px 0 0;color:var(--color-text-secondary);font-size:14px;line-height:1.5}
.learn-practice-offline{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;color:var(--attention-text);
  font-weight:600;line-height:1.5}
.learn-practice-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 0}
.learn-practice-more{padding-top:14px;border-top:1px solid var(--color-border)}
.learn-practice-hint{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;padding:12px 14px;
  border-left:4px solid var(--color-link);border-radius:8px;background:var(--lp-tint);line-height:1.55}
.learn-practice-hint p{margin:0 0 6px}
.learn-practice-hint p:last-child{margin:0}
.learn-practice-hint a{color:var(--color-link)}
.learn-practice-hint .learn-icon{margin-top:2px;color:var(--color-link)}
.learn-practice-feedback{margin:16px 0 0;padding:16px;border:1px solid var(--color-border);border-radius:14px;
  line-height:1.55}
.learn-practice-feedback h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:700 18px/1.3 var(--heading)}
.learn-practice-feedback.is-correct h3{color:var(--success-text)}
.learn-practice-feedback.is-wrong h3{color:var(--error-text)}
.learn-practice-feedback.is-review h3{color:var(--info-text)}
.learn-practice-feedback.is-correct{border-left:4px solid var(--success-text)}
.learn-practice-feedback.is-wrong{border-left:4px solid var(--error-text)}
.learn-practice-feedback.is-review{border-left:4px solid var(--info-text)}
.learn-practice-your{margin:0 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.learn-practice-your span{font-weight:700}
.learn-practice-reference h4{margin:0 0 6px;font:700 15px/1.4 var(--sans)}
.learn-practice-reference p{margin:0 0 10px;white-space:pre-line;overflow-wrap:anywhere}
.learn-practice-note{margin:10px 0 0;color:var(--color-text-secondary);font-size:14px}
.learn-practice-summary h2{margin:0 0 10px;font:700 24px/1.3 var(--heading)}
.learn-practice-score{margin:0 0 14px;font-size:18px;line-height:1.55}
.learn-practice-results{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.learn-practice-results a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;
  min-height:48px;padding:10px 14px;border:1px solid var(--color-border);border-radius:12px;
  color:var(--color-text-primary);text-decoration:none}
.learn-practice-results a:hover{border-color:var(--color-link)}
.learn-practice-state{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:14px;
  font-weight:700}
.learn-practice-state .learn-icon{width:16px;height:16px}
.learn-practice-state.is-correct{background:var(--success-bg);color:var(--success-text)}
.learn-practice-state.is-wrong{background:var(--error-bg);color:var(--error-text)}
.learn-practice-state.is-review,.learn-practice-state.is-open,.learn-practice-state.is-gone{background:var(--info-bg);
  color:var(--info-text)}
.learn-practice-empty h1,.learn-practice-empty h2{margin:0 0 8px;font:700 22px/1.3 var(--heading)}
.learn-practice-empty p{margin:0 0 14px;line-height:1.6}
@media (max-width:560px){
  .learn-practice-card{padding:16px}
  .learn-practice-actions .btn{flex:1 1 auto}
  .learn-practice-stem{font-size:17px}
}

/* "Recommended for you" on the dashboard (learn-dashboard.js, WP-A7): three cards, one column on phones. */
.learn-recs{margin:0 0 24px}
.learn-recs-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;
  margin:0 0 12px}
.learn-recs-head h2{margin:0;font:700 22px/1.3 var(--heading)}
.learn-recs-head p{margin:0;color:var(--color-text-secondary);font-size:14px}
.learn-recs-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:860px){.learn-recs-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.learn-rec{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border:1px solid var(--color-border);
  border-radius:16px;background:var(--color-surface);color:var(--color-text-primary)}
.learn-rec-kind{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--color-link);font-size:13px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.learn-rec h3{margin:0;font:700 17px/1.35 var(--heading);overflow-wrap:anywhere}
.learn-rec p{margin:0;color:var(--color-text-secondary);font-size:14px;line-height:1.5}
.learn-rec .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:auto 0 0;
  align-self:flex-start;text-decoration:none}
.learn-rec .btn:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.learn-rec.is-loading p{color:var(--color-text-secondary)}
.learn-estimate-note{margin:10px 0 0;color:var(--color-text-secondary);font-size:13px;line-height:1.5}

/* Lesson video (learn-video.js, WP-A8, behind the video switch): the player, then the chapters (beside it from
   1024 px), then the ways on, the transcript and the forms. The frame keeps 16:9 on ink in both themes (--navy is ink
   in both). Chapter rows say "Current chapter" and "Up next" in words, not by colour alone. */
.learn-video-head{margin:0 0 16px}
.learn-video-head .learn-notes-title:focus{outline:none}
.learn-video-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;
  color:var(--color-text-secondary);line-height:1.5}
.learn-video-facts li{display:inline-flex;align-items:center;gap:6px}
.learn-video-facts .learn-icon{color:var(--color-link)}
.learn-video-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.learn-video-stage,.learn-video-main,.learn-video-side{display:grid;gap:16px;min-width:0}
/* from 1024 px the chapters sit beside the player and what follows it; the second row takes any extra height, so the
   player's row stays as tall as the player */
@media (min-width:1024px){
  .learn-video-grid:not(.is-single){grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto 1fr;
    grid-template-areas:"stage side" "main side";gap:16px 24px}
  .learn-video-grid:not(.is-single) .learn-video-stage{grid-area:stage}
  .learn-video-grid:not(.is-single) .learn-video-side{grid-area:side}
  .learn-video-grid:not(.is-single) .learn-video-main{grid-area:main}
  .learn-video-grid.is-single{max-width:960px}
}
.learn-video-figure{margin:0}
.learn-video-frame{overflow:hidden;aspect-ratio:16/9;border-radius:16px;background:var(--navy)}
.learn-video-player{display:block;width:100%;height:100%;background:var(--navy);object-fit:contain}
.learn-video-player:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.learn-video-help{margin:8px 0 0;color:var(--color-text-secondary);font-size:14px;line-height:1.5}
.learn-video-error{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;border-radius:12px;
  background:var(--error-bg);color:var(--error-text);font-weight:600;line-height:1.5}
.learn-video-error p{flex:1 1 240px;margin:0}
.learn-video-box{min-width:0;padding:16px;border:1px solid var(--color-border);border-radius:16px;
  background:var(--color-surface);color:var(--color-text-primary)}
.learn-video-box h2{margin:0 0 10px;font:700 18px/1.35 var(--heading)}
.learn-video-box p{margin:0 0 10px;line-height:1.55}
.learn-video-meta{color:var(--color-text-secondary);font-size:14px;font-weight:400}
.learn-video-chapter-list,.learn-video-more ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.learn-video-chapter button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;width:100%;
  min-height:48px;padding:10px 12px;border:1px solid var(--color-border);border-radius:12px;
  background:var(--color-surface);color:var(--color-text-primary);font:inherit;line-height:1.4;text-align:left;
  cursor:pointer}
.learn-video-chapter button:hover{border-color:var(--color-link)}
.learn-video-chapter.is-current button{border-color:var(--color-action);background:var(--rai-soft);
  box-shadow:inset 3px 0 0 var(--color-action)}
.learn-video-time{grid-row:span 2;align-self:start;min-width:44px;color:var(--color-link);font-weight:700;
  font-variant-numeric:tabular-nums}
.learn-video-chapter-title{min-width:0;font-weight:600;overflow-wrap:anywhere}
.learn-video-chapter-state{color:var(--color-text-secondary);font-size:13px;font-weight:700;letter-spacing:.02em}
.learn-video-chapter-state:empty{display:none}
.learn-video-chapter.is-current .learn-video-chapter-state{color:var(--color-link)}
.learn-video-next{display:grid;gap:6px;margin:0;padding:12px 16px;border:1px solid var(--color-action);
  border-radius:16px;background:var(--rai-soft)}
.learn-video-next-label{color:var(--color-link);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase}
.learn-video-next a,.learn-video-more a{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--color-link);
  font-weight:600;text-underline-offset:3px;overflow-wrap:anywhere}
.learn-video-more a{flex-wrap:wrap}
.learn-video-more a .learn-video-meta{flex-basis:100%;padding-left:26px}
.learn-video-transcript summary,.learn-video-report summary{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:4px 12px;min-height:44px;padding:4px 0;font:700 18px/1.35 var(--heading);cursor:pointer}
.learn-video-transcript[open] summary,.learn-video-report[open] summary{margin:0 0 10px}
.learn-video-transcript-text{max-width:72ch;font-size:17px;line-height:1.7}
.learn-video-transcript-text p{margin:0 0 12px;overflow-wrap:anywhere}
.learn-video-pilot fieldset{min-width:0;margin:0 0 14px;padding:0;border:0}
.learn-video-pilot legend{margin:0 0 8px;padding:0;font-weight:700}
.learn-video-choice{display:flex;align-items:center;gap:10px;min-height:48px;margin:0 0 8px;padding:10px 14px;
  border:1px solid var(--color-border);border-radius:12px;cursor:pointer}
.learn-video-choice:has(input:checked){border-color:var(--color-action);background:var(--rai-soft)}
.learn-video-choice:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}
.learn-video-choice input{flex:none;width:20px;height:20px;min-height:0;margin:0;accent-color:var(--color-action)}
.learn-video-choice input:focus{outline:none}
.learn-video-box label[for]{display:block;margin:0 0 6px;font-weight:700}
.learn-video-box textarea{display:block;width:100%;max-width:100%;min-height:96px;padding:12px;font:inherit;
  font-size:16px;line-height:1.5;resize:vertical}
.learn-video-box textarea:focus-visible,.learn-video summary:focus-visible{outline:2px solid var(--color-focus);
  outline-offset:2px}
.learn-video-status{min-height:1.5em;margin:8px 0;color:var(--color-text-secondary);font-size:14px}
.learn-video-status:empty{margin:0}
.learn-video-loading{display:grid;gap:12px}
.learn-video-loading p{margin:0}
.learn-video-skel{aspect-ratio:16/9;border-radius:16px}
.learn-video-state{margin:0 0 16px}
@media (max-width:560px){
  .learn-video-box{padding:14px}
  .learn-video-frame{border-radius:12px}
}

/* ---------- touch targets of the workspace frame and sign-in pages (learn-a WP-A9, QA-01) ---------- */
#appShell .top .ico, #appShell .mtop .ico { flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
#appShell .avatar { width: 44px; height: 44px; min-width: 44px; }
#appShell .top .srch { height: 44px; }
.btn.sm { min-height: 44px; }
.btn.p { min-height: 48px; }
.rai-quick-heading a, .rai-auth-recovery a { display: inline-flex; align-items: center; min-height: 44px; }
.rai-auth-home { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; }
.learn-crumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.rai-section-heading a, .kpi .d a { display: inline-flex; align-items: center; min-height: 44px; }
/* the invisible hit areas the touch layout adds, for a mouse as well: 44 px without moving anything */
.task .cb { position: relative; }
.task .cb::after { content: ""; position: absolute; inset: -11px; }
#main a.small { position: relative; }
#main a.small::after { content: ""; position: absolute; inset: -14px 0; }
.rai-auth-footer a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.rai-password-toggle { min-height: 44px; min-width: 48px; }
.rai-account-type > summary { min-height: 44px; display: flex; align-items: center; }
/* "Continue learning" (learning-content.js) draws its own canvas above the dashboard: one gap between them, not two */
#main > .canvas:not(:last-child) { padding-bottom: 24px; }
#main > .canvas + .canvas { padding-top: 0; }
/* a 320 px phone: the logo gives way so the four header buttons keep their 44 px */
@media (max-width: 480px) {
  #appShell .mtop { gap: 2px; padding-left: 12px; padding-right: 12px; }
  #appShell .mtop .brand { display: inline-flex; align-items: center; min-height: 44px; }
  #appShell .mtop .brand img { width: 96px; height: auto; }
}

/* the second link of a recommendation card (the marked practice set of the practice card, review fix F14) */
.learn-rec .learn-rec-more{display:inline-flex;align-items:center;min-height:44px;color:var(--color-link);font-size:14px;
  font-weight:600;text-decoration:underline;text-underline-offset:3px}