/* Shared composition for top-level learning, progress and social pages. */
.ma-hub-page{margin:0;background:var(--ma-app-bg);color:var(--ma-text-strong);}
.ma-hub-page>.shell{width:min(1040px,100%);margin:auto;padding:0 20px;}
.ma-hub-main{max-width:900px;margin:24px auto 0;}
.ma-hub-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;}
.ma-hub-header h1{margin:0;font-size:clamp(1.8rem,5vw,2.4rem);line-height:1.15;}
.ma-hub-header p{margin:8px 0 0;color:var(--ma-muted);font-size:.9rem;line-height:1.5;}
.ma-hub-header .ma-hub-eyebrow{margin:0 0 6px;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;}
#maHubContent{display:grid;gap:20px;min-width:0;}
.ma-hub-note{color:var(--ma-muted);font-size:.85rem;line-height:1.6;}

/* Learn uses open sections and whole-row links. The only filled action is the
   suggested session; its recommendation remains owned by the study policy. */
.ma-hub-page[data-ma-hub="learn"] .ma-hub-header{margin-bottom:18px;}
.ma-learn-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:start;}
.ma-learn-suggestion{min-width:0;padding-top:8px;}
.ma-learn-eyebrow{margin:0 0 14px;color:var(--ma-muted);font-size:.7rem;font-weight:750;letter-spacing:.045em;}
.ma-learn-next{--learn-accent:var(--ma-reading);display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:12px 10px;align-items:center;text-decoration:none;color:var(--ma-text-strong);}
.ma-learn-next[data-mode="writing"]{--learn-accent:var(--ma-writing);}
.ma-learn-next__copy{min-width:0;}
.ma-learn-next h2{margin:0;font:800 clamp(1.65rem,3.5vw,2rem)/1.16 var(--ma-font-display);letter-spacing:-.035em;overflow-wrap:normal;}
.ma-learn-next__meta{margin:10px 0 0;color:var(--learn-accent);font-size:.74rem;font-weight:700;line-height:1.5;}
.ma-learn-next__reason{grid-column:1/-1;max-width:38ch;margin:0;color:var(--ma-text-soft);font-size:.82rem;line-height:1.5;}
.ma-learn-next__art{position:relative;display:block;height:90px;color:var(--learn-accent);font:750 4.3rem/1 var(--ma-font-jp);pointer-events:none;}
.ma-learn-next__art>span{position:absolute;}
.ma-learn-next__art>span:first-child{left:-4px;top:9px;transform:rotate(-10deg);}
.ma-learn-next__art>span:last-child{right:-1px;top:-6px;font-size:2.9rem;opacity:.25;transform:rotate(10deg);}
.ma-learn-next__start{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:46px;max-width:100%;margin-top:4px;padding:10px 16px;box-sizing:border-box;border-radius:14px;background:var(--learn-accent);color:var(--ma-app-bg);font-size:.85rem;font-weight:800;line-height:1.25;}
.ma-learn-next__start .ma-icon{flex:none;width:20px;height:20px;}
.ma-learn-library{min-width:0;}
.ma-learn-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-bottom:2px;}
.ma-learn-section-heading h2{margin:0;font:800 1.05rem/1.25 var(--ma-font-display);}
.ma-learn-section-heading>a{display:inline-flex;align-items:center;gap:5px;min-height:44px;color:var(--ma-muted);text-decoration:none;font-size:.75rem;}
.ma-learn-section-heading .ma-icon{width:15px;height:15px;}
.ma-learn-practice{display:grid;}
.ma-learn-row{--learn-accent:var(--ma-words);display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:13px;min-height:68px;box-sizing:border-box;padding:12px 0;color:var(--ma-text-strong);text-decoration:none;border-bottom:1px solid var(--ma-border);}
.ma-learn-row[data-subject="reading"]{--learn-accent:var(--ma-reading);}
.ma-learn-row[data-subject="writing"]{--learn-accent:var(--ma-writing);}
.ma-learn-row[data-subject="results"]{--learn-accent:var(--ma-results);}
.ma-learn-row__mark{display:grid;place-items:center;align-self:center;color:var(--learn-accent);font:700 1.75rem/1 var(--ma-font-jp);}
.ma-learn-row__mark .ma-icon{width:24px;height:24px;}
.ma-learn-row__copy{display:grid;gap:4px;min-width:0;}
.ma-learn-row__copy strong{font-size:1rem;line-height:1.3;font-weight:750;}
.ma-learn-row__copy>span{color:var(--ma-muted);font-size:.8rem;line-height:1.4;}
.ma-learn-row>.ma-icon{width:18px;height:18px;color:var(--ma-muted);}
.ma-learn-branch{margin-top:26px;}
.ma-learn-branch-description{margin:0 0 6px;color:var(--ma-muted);font-size:.78rem;line-height:1.5;}
.ma-learn-branch[data-branch] .ma-learn-section-heading h2,.ma-learn-kana .ma-learn-section-heading h2{font-size:1.2rem;}
.ma-learn-row[data-subject="kanji"],.ma-learn-row[data-subject="kanjiPractice"]{--learn-accent:var(--ma-results);}
.ma-learn-upcoming{padding-top:8px;}
.ma-learn-upcoming summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;color:var(--ma-muted);font-size:.74rem;font-weight:650;list-style:none;}
.ma-learn-upcoming summary::-webkit-details-marker{display:none;}
.ma-learn-upcoming summary::after{content:'＋';font-size:1rem;}
.ma-learn-upcoming[open] summary::after{content:'−';}
.ma-learn-upcoming p{margin:0 0 8px;color:var(--ma-muted);font-size:.75rem;line-height:1.5;}
.ma-learn-layout a:focus-visible,.ma-learn-upcoming summary:focus-visible{outline:3px solid var(--ma-focus-ring);outline-offset:5px;}
.ma-learn-row:active,.ma-learn-section-heading>a:active{background:var(--ma-surface-inset);}
.ma-learn-next:active .ma-learn-next__start{filter:brightness(.88);}
@media(hover:hover){.ma-learn-row:hover .ma-learn-row__copy strong,.ma-learn-section-heading>a:hover{color:var(--learn-accent,var(--ma-text-strong));}.ma-learn-next:hover .ma-learn-next__start{filter:brightness(.94);}}
@media(max-width:760px){
  .ma-learn-layout{grid-template-columns:minmax(0,1fr);gap:12px;}
  .ma-learn-suggestion{padding:0 0 20px;border-bottom:1px solid var(--ma-border);}
  .ma-learn-eyebrow{margin-bottom:10px;}
  .ma-learn-next{grid-template-columns:minmax(0,1fr) 72px;row-gap:10px;}
  .ma-learn-next__art{height:66px;font-size:4rem;}
  .ma-learn-next__art>span:last-child{font-size:2.6rem;}
}
html[data-ma-large-text] .ma-learn-next{grid-template-columns:minmax(0,1fr);}
html[data-ma-large-text] .ma-learn-next__art{display:none;}
html[data-ma-large-text] .ma-learn-section-heading{flex-wrap:wrap;gap:2px 16px;}
html[data-ma-runtime="ios"] .ma-hub-main{margin-top:8px;}
@media(max-width:600px){.ma-hub-page>.shell{padding:0 16px;}.ma-hub-header{margin-bottom:18px;}}