/* Learning overview follows the approved graphite opening and neutral surfaces. */
body[data-view=learning] .topbar{margin-bottom:0;border-radius:0}
.learning-lead{margin:0 -22px;padding:13px 22px 35px;background:linear-gradient(90deg,#3b383d,#343237 54%,#2e2d31);color:#f5f2f6}
.learning-lead h1{font-size:29px;line-height:1.15;letter-spacing:-1.05px;font-weight:600;margin:0}
.learning-introduction{margin:13px 0 0;max-width:360px;font-size:var(--cabinet-copy-size);line-height:var(--cabinet-copy-leading);font-weight:400;letter-spacing:0;color:#c6bec9}
.learning-access{display:flex;align-items:flex-start;gap:10px;margin-top:20px;padding:14px 15px;border:1px solid #ffffff16;border-radius:17px;background:linear-gradient(120deg,#ffffff09,#ffffff03);font-size:var(--cabinet-copy-size);line-height:var(--cabinet-copy-leading);font-weight:400;letter-spacing:0;color:#d2c8d3}
.learning-access>svg{width:18px;height:18px;stroke-width:1.4;flex:none;margin-top:1px;color:#c69aa7}
.learning-content{position:relative;margin:-12px -22px 0;padding:25px 22px 0;background:var(--page);border-radius:25px 25px 0 0}
.learning-content h2{font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.45px;margin:0 0 18px;color:var(--theme-text)}
.learning-directions{display:grid;gap:11px}
.learning-direction{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:25px minmax(0,1fr) 24px;column-gap:13px;align-items:center;width:100%;min-height:118px;padding:19px 17px;border:1px solid #e2dbe280;border-radius:20px;background:#fff;box-shadow:inset 0 1px 0 #ffffffb3;color:var(--theme-text);text-align:left}
/* The metallic wash stays behind the content, so only the surface animates. */
.learning-direction:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,#ffffff00,#f0e9ee 78%,#e9dfe6);opacity:0}
.learning-direction>*{position:relative;z-index:1}
.learning-direction:nth-child(1){--learning-wash-delay:0s}
.learning-direction:nth-child(2){--learning-wash-delay:3s}
.learning-direction:nth-child(3){--learning-wash-delay:6s}
.learning-direction:nth-child(4){--learning-wash-delay:9s}
.learning-direction:nth-child(5){--learning-wash-delay:12s}
.learning-direction-icon{width:25px;height:25px;stroke-width:1.4;color:var(--theme-accent)}
.learning-direction-copy{min-width:0;display:block}
.learning-direction-title{display:block;font-size:15px;line-height:1.4;font-weight:600;letter-spacing:-.3px;color:var(--theme-text)}
.learning-direction-description{display:block;margin-top:6px;font-size:var(--cabinet-copy-size);font-weight:400;line-height:var(--cabinet-copy-leading);letter-spacing:0;color:var(--theme-muted)}
.learning-direction-arrow{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--theme-arrow);border:1px solid var(--theme-arrow-line);color:var(--theme-arrow-text)}
.learning-direction-arrow svg{width:13px;height:13px;stroke-width:1.5}
.learning-actions{display:grid;gap:8px;margin-top:26px}
.learning-compare{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:50px;padding:14px 18px;border:1px solid #fff;border-radius:100px;background:linear-gradient(115deg,#fff,#fbf8fa 54%,#ece2e7);box-shadow:inset 0 1px 0 #fff,0 3px 10px -5px #826b8052;color:#343237;font-size:12px;line-height:1.5;font-weight:500;text-align:center}
.learning-compare svg{width:17px;height:17px;stroke-width:1.5;color:var(--theme-accent)}
.learning-student{width:100%;min-height:44px;padding:10px 8px;background:none;border:0;border-radius:14px;color:var(--theme-text);font-size:11px;line-height:var(--cabinet-copy-leading);font-weight:500;text-align:center}
[data-color-mode=day] .learning-student{color:#343237}
[data-color-mode=night] .learning-lead{background:transparent}
[data-color-mode=night] .learning-content{background:transparent}
[data-color-mode=night] .learning-direction{background:linear-gradient(130deg,#ffffff06,#ffffff02);border-color:#ffffff13;box-shadow:inset 0 1px 0 #ffffff05}
[data-color-mode=night] .learning-direction:before{background:var(--theme-card)}
[data-color-mode=night] .learning-compare{background:linear-gradient(115deg,#60434f,#40343c);border-color:#b3829455;box-shadow:inset 0 1px 0 #ffffff14;color:#f2eaf0}
[data-color-mode=night] .learning-compare svg{color:#d6b2bf}
@media(min-width:600px){body[data-view=learning] .topbar{border-radius:28px 28px 0 0}.learning-direction{padding:21px 20px}}
@media(max-width:359px){.learning-lead{margin-left:-17px;margin-right:-17px;padding:10px 17px 32px}.learning-lead h1{font-size:26px}.learning-access{padding:13px 12px;gap:9px}.learning-content{margin-left:-17px;margin-right:-17px;padding:23px 17px 0}.learning-direction{grid-template-columns:22px minmax(0,1fr) 24px;column-gap:10px;padding:17px 13px}.learning-direction-icon{width:22px;height:22px}.learning-direction-title{font-size:14px}.learning-actions{margin-top:24px}}
@media(hover:hover){.learning-direction:hover{border-color:#b3829455}.learning-student:hover{background:#ffffff25;border-radius:14px}.learning-compare:hover{transform:translateY(-1px)}}
@media(prefers-reduced-motion:no-preference){.learning-direction{transition:border-color .2s ease,background-color .2s ease}.learning-compare{transition:transform .2s ease}}

/* Five consecutive three-second turns: fade in, hold, return to the base surface. */
@keyframes learning-metal-wash{0%,20%,100%{opacity:0}6%,12%{opacity:1}}
@media(prefers-reduced-motion:no-preference){.learning-direction:before{animation:learning-metal-wash 15s ease-in-out var(--learning-wash-delay) infinite}}