@layer components {
  html[data-route="/learn"] .learn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
  html[data-route="/learn"] .learn-card{background:var(--black-card);border:1px solid var(--gray-border);border-radius:12px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;text-decoration:none;}
  html[data-route="/learn"] .learn-card:hover{border-color:var(--red-primary);}
  html[data-route="/learn"] .learn-thumb{height:80px;display:flex;align-items:center;justify-content:center;font-size:36px;background:linear-gradient(135deg,var(--black-soft),var(--bg-surface-2));}
  /* AUD-38: swap raw emoji thumbnails for a masked-SVG icon (same technique
     as the sidebar's .ic-* set, which is defined sitewide in core.css and
     supplies the --ic custom prop per icon). Uses a page-scoped .lrn-ic base
     class rather than the shared .nav-ic — chrome.js applies an unscoped
     ".nav-ic{width:0!important;height:0!important;...}" reset intended only
     for the sidebar, which would zero out any other page's use of that class. */
  html[data-route="/learn"] .learn-thumb .lrn-ic{width:32px;height:32px;display:inline-block;flex:0 0 32px;background:currentColor;color:var(--red-primary);-webkit-mask:var(--ic,none) center/contain no-repeat;mask:var(--ic,none) center/contain no-repeat;}
  html[data-route="/learn"] .learn-body{padding:14px 16px;flex:1;display:flex;flex-direction:column;gap:6px;}
  html[data-route="/learn"] .learn-cat{font-size:16px;font-family:var(--f-display);letter-spacing:.14em;color:var(--red-primary);}
  html[data-route="/learn"] .learn-title{font-size:16px;font-weight:700;color:var(--white-bright);line-height:1.35;}
  html[data-route="/learn"] .learn-sub{font-size:16px;color:var(--gray-light);flex:1;}
  html[data-route="/learn"] .learn-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
  html[data-route="/learn"] .learn-time{font-size:16px;color:var(--gray-light);}
  html[data-route="/learn"] .cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
  html[data-route="/learn"] .cat-tab{padding:7px 14px;border-radius:7px;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--bg-surface-2);border:1px solid var(--gray-border);color:var(--gray-light);cursor:pointer;font-family:var(--f-body);transition:all .15s;}
  html[data-route="/learn"] .cat-tab.active,html[data-route="/learn"] .cat-tab:hover{color:var(--white-bright);}
  html[data-route="/learn"] .cat-tab.active{background:rgba(255,26,26,.15);border-color:var(--red-primary);}
  html[data-route="/learn"] .nav-sub-label{display:block;padding:6px 32px 2px;font-size:16px;letter-spacing:1.5px;color:#888;font-weight:700;text-transform:uppercase;}
  @media(max-width:480px){html[data-route="/learn"] .learn-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:359px){html[data-route="/learn"] .learn-grid{grid-template-columns:1fr;}}
  /* AUD-38: .cat-tab (padding 7px 14px, ~32px tall) falls below the 44px
     touch-target minimum at mobile widths. */
  @media(max-width:600px){html[data-route="/learn"] .cat-tab{min-height:44px;display:inline-flex;align-items:center;}}
}