/* The Mercury LMS shell (mercury.lms.4): the frame around a lesson, in vize's editorial layout. Every
   value comes from the token sheet (lms.css, mercury.lms.3); this file only places things. */
html.lms, body.lms { margin: 0; background: rgb(var(--bg-primary)); color: rgb(var(--fg-primary)); font-family: var(--font-primary); }
body.lms { background-image: var(--lms-ground-image); background-size: var(--lms-ground-size); min-height: 100vh; display: flex; flex-direction: column; }
.lms-skip { position: absolute; left: -999px; }
.lms-skip:focus { left: var(--lms-gutter); top: 0.5rem; padding: 0.5rem 0.75rem; background: rgb(var(--bg-primary)); outline: var(--lms-focus-outline-width) solid rgb(var(--lms-accent)); z-index: 2; }
.lms-header { display: flex; align-items: center; gap: 2rem; height: var(--lms-header-height); padding: 0 var(--lms-gutter); border-bottom: var(--lms-rule-width) solid rgb(var(--border-secondary, var(--border-primary))); }
.lms-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: rgb(var(--fg-primary)); text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.lms-nav { display: flex; gap: 1.5rem; font-size: var(--lms-type-nav-size); }
.lms-nav a { color: rgb(var(--lms-nav-fg)); text-decoration: none; }
.lms-nav a[aria-current="page"], .lms-nav a:hover { color: rgb(var(--fg-primary)); text-decoration: underline; text-underline-offset: var(--lms-link-underline-offset); }
.lms-main { flex: 1; width: 100%; max-width: var(--lms-content-max-width); box-sizing: border-box; margin: 0 auto; padding: 3rem var(--lms-gutter) 4rem; }
.lms-eyebrow { margin: 0 0 0.75rem; font-family: var(--font-secondary); font-size: var(--lms-type-mono-label-size); letter-spacing: var(--lms-type-mono-label-tracking); text-transform: uppercase; color: rgb(var(--fg-secondary)); }
.lms-title { margin: 0; font-size: var(--lms-type-h1-size); font-weight: var(--lms-type-h1-weight); letter-spacing: var(--lms-type-h1-tracking); line-height: 1.15; }
.lms-title em { font-style: normal; color: rgb(var(--fg-secondary)); }
.lms-lede { margin: 1rem 0 2rem; max-width: var(--lms-measure); font-size: var(--lms-type-lede-size); line-height: var(--lms-type-lede-leading); color: rgb(var(--fg-secondary)); }
.lms-body { max-width: var(--lms-measure); font-size: var(--lms-type-body-size); line-height: var(--lms-type-body-leading); }
.lms-body h2 { margin: 2.5rem 0 0.75rem; font-size: var(--lms-type-h2-size); font-weight: var(--lms-type-h2-weight); letter-spacing: var(--lms-type-h2-tracking); }
.lms-body a, .lms-lede a, .lms-footer a { color: rgb(var(--fg-primary)); text-decoration: underline; text-underline-offset: var(--lms-link-underline-offset); }
.lms-body code { font-family: var(--font-secondary); font-size: var(--lms-type-code-inline-size); background: rgb(var(--lms-code-inline-bg)); color: rgb(var(--lms-code-inline-fg)); padding: 0.1em 0.3em; }
.lms-body pre { background: rgb(var(--lms-code-bg)); color: rgb(var(--lms-code-fg)); border: var(--lms-rule-width) solid rgb(var(--lms-code-border)); padding: 1rem 1.25rem; overflow-x: auto; font-size: var(--lms-type-code-block-size); line-height: var(--lms-type-code-block-leading); }
.lms-body pre code { background: none; color: inherit; padding: 0; }
.lms-body table { border-collapse: collapse; width: 100%; font-size: var(--lms-type-small-size); }
.lms-body th, .lms-body td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: var(--lms-rule-width) solid rgb(var(--border-primary)); }
.lms-body th { font-family: var(--font-secondary); font-size: var(--lms-type-table-head-size); letter-spacing: var(--lms-type-table-head-tracking); text-transform: uppercase; }
.lms-footer { padding: 1.5rem var(--lms-gutter); border-top: var(--lms-rule-width) solid rgb(var(--border-primary)); font-size: var(--lms-type-small-size); color: rgb(var(--fg-secondary)); }
:focus-visible { outline: var(--lms-focus-outline-width) solid rgb(var(--lms-accent)); outline-offset: var(--lms-focus-outline-offset); }
@media (max-width: 640px) { .lms-header, .lms-main, .lms-footer { padding-left: var(--lms-gutter-mobile); padding-right: var(--lms-gutter-mobile); } .lms-nav { gap: 1rem; } }