/* Learn page: the HTML app mock. Shared tokens and chrome live in ../styles.css. */
.learn__intro { max-width: var(--copy-width); margin: 0 0 var(--space-2); font-size: clamp(1.15rem, 2vw, 1.4rem); }
.learn__lede { max-width: var(--copy-width); margin: 0 0 var(--space-6); color: var(--color-muted); }

.mock { margin: 0; }
.mock__titlebar, .mock__body { border: 1px solid var(--color-border); background: var(--color-surface); }
.mock__titlebar { display: flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-3); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--color-surface-raised); font-size: .85rem; }
.mock__dots { display: inline-flex; gap: .35rem; }
.mock__dots span { width: .65rem; height: .65rem; border-radius: 50%; background: var(--color-border); }
.mock__title { font-weight: 600; letter-spacing: .02em; }
.mock__badge { margin-left: auto; padding: .15rem .55rem; border: 1px solid var(--color-muted); border-radius: 999px; color: var(--color-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.mock__body { display: grid; grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.mock__caption { margin-top: var(--space-2); color: var(--color-muted); font-size: .9rem; }

.mock__rail { margin: 0; padding: var(--space-3) var(--space-2); list-style: none; border-right: 1px solid var(--color-border); background: var(--color-bg); }
.mock__rail li + li { margin-top: .25rem; }
.mock__rail a { display: flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-2); border-left: 3px solid transparent; border-radius: var(--radius-sm); color: var(--color-muted); text-decoration: none; }
.mock__rail a:hover { color: var(--color-text); background: var(--color-surface); }
.mock__rail a:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 1px; color: var(--color-text); }
.mock__rail a[aria-selected="true"] { border-left-color: var(--color-accent); background: var(--color-surface-raised); color: var(--color-text); }
@media (min-width: 768px) {
  .mock:not(.mock--tabs) .mock__rail { position: sticky; top: 0; align-self: start; border-right: 0; }
}

.mock__panes { min-width: 0; padding: var(--space-5) clamp(1rem, 3vw, var(--space-6)); }
.learn-panel { max-width: var(--copy-width); scroll-margin-top: var(--space-4); }
.learn-panel[hidden] { display: none; }
.learn-panel:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: .5rem; }
.mock:not(.mock--tabs) .learn-panel + .learn-panel { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.learn-panel h2 { margin: 0 0 var(--space-3); font: 400 clamp(1.8rem, 3.5vw, 2.6rem)/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
.learn-panel p { margin: 0 0 var(--space-2); line-height: 1.65; }
.learn-panel p:last-of-type { margin-bottom: var(--space-4); }
.learn-shot { margin-top: var(--space-4); min-height: 12rem; padding: var(--space-4); border-radius: var(--radius-sm); text-align: center; font-size: .9rem; }

.learn-table { margin: 0 0 var(--space-4); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.learn-table:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 2px; }
.learn-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9rem; }
.learn-table caption { padding: var(--space-2) var(--space-3); text-align: left; font-weight: 600; }
.learn-table th, .learn-table td { padding: .5rem var(--space-3); border-top: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.learn-table thead th { color: var(--color-muted); font-weight: 600; }
.learn-table tbody th { font-weight: 600; white-space: nowrap; }

@media (max-width: 767px) {
  .mock__body { grid-template-columns: minmax(0, 1fr); }
  .mock__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: var(--space-2); border-right: 0; border-bottom: 1px solid var(--color-border); }
  .mock__rail li + li { margin-top: 0; }
  .mock__rail a { justify-content: center; padding: 0 .25rem; border-left: 0; border-bottom: 3px solid transparent; font-size: .9rem; }
  .mock__rail a[aria-selected="true"] { border-bottom-color: var(--color-accent); }
}
@media (max-width: 420px) {
  .mock__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock__dots { display: none; }
  .mock__title { white-space: nowrap; }
  .mock__badge { letter-spacing: .04em; }
}
@media (forced-colors: active) {
  .mock__rail a[aria-selected="true"] { border-color: Highlight; }
}