/* Hallmark · component: learner dropdown · theme: existing warm paper
 * pre-emit critique: P5 H5 E4 S5 R5 V4 */
.learner-nav{position:relative;align-self:center;min-width:0}
.learner-nav summary{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--color-muted);font-size:14px;cursor:pointer;list-style:none;white-space:nowrap;border-radius:var(--radius-sm)}
.learner-nav summary::-webkit-details-marker{display:none}
.learner-stack{display:flex;padding-right:2px}
.learner-stack img{width:24px;height:24px;object-fit:cover;border-radius:50%;border:2px solid var(--color-paper);filter:saturate(.5)}
.learner-stack img+img{margin-left:-9px}
.learner-chevron{display:block;width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 50%}
.learner-nav summary:hover,.learner-nav[open] summary{color:var(--color-ink)}
.learner-nav summary:focus-visible,.learner-panel a:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
.learner-nav[open] .learner-chevron{transform:rotate(180deg)}
.learner-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:420px;max-width:calc(100vw - 40px);padding:12px;background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-md);box-shadow:0 8px 20px var(--color-soft)}
.learner-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.hero-links .learner-option{display:flex;align-items:center;gap:10px;min-height:64px;padding:8px;border-radius:var(--radius-sm);text-decoration:none;min-width:0;color:var(--color-ink)}
.learner-option:hover{background:var(--color-soft)}
.learner-option img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.learner-option span{min-width:0}
.learner-option strong{display:block;font-size:13px;font-weight:600;line-height:1.5}
.learner-option small{display:block;color:var(--color-muted);font-size:11px;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-links .learner-all{display:flex;justify-content:space-between;min-height:44px;padding:8px;margin-top:8px;border-top:1px solid var(--color-rule);font-size:12px;color:var(--color-muted);text-decoration:none;white-space:nowrap}
@media(max-width:47.99rem){.learner-panel{width:min(360px,calc(100vw - 40px))}.learner-options{gap:2px}.hero-links .learner-option{gap:8px;padding:6px}.learner-option small{max-width:105px}}