/* Kellogg: the machine version (/machine/) and the licenses page (/licenses/).
   A reading document on sheet. Kit components do the work; this file only lays them out.
   No JS, no motion: hover states change instantly, and nothing animates. */

/* ---------- Page ---------- */
.mx { min-height: 100svh; }
.mx a { color: inherit; }
.mx :target { scroll-margin-top: var(--m-space-lg); }
.mx, .mx * { transition: none !important; animation: none !important; }
.mx .m-pill:active { transform: none; }

/* Plain links in running copy: underlined, always (it's a document). */
.mx-body a:not(.m-pill), .mx-lede a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: var(--m-rule);
}
.mx-body a:not(.m-pill):hover { text-decoration-color: currentColor; }
/* Kit link-list underline: shown on hover, instantly (no draw-in). */
.mx .m-link::before { transition: none; }

/* Visually hidden, but read. */
.mx-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mx-skip { position: absolute; left: var(--m-layout-edge); top: -100px; z-index: var(--m-z-tooltip); background: var(--m-color-ink); color: var(--m-color-paper) !important; padding: 10px 14px; font-family: var(--m-font-mono); font-size: var(--m-type-label-size); text-transform: uppercase; letter-spacing: 0; text-decoration: none; }
.mx-skip:focus { top: var(--m-layout-edge); }

/* ---------- Top bar: corner wordmark in ink (no blend on sheet) ---------- */
.mx-bar { display: flex; align-items: center; justify-content: space-between; padding-top: var(--m-layout-edge); padding-bottom: var(--m-layout-edge); max-width: none; padding-left: var(--m-layout-edge); padding-right: var(--m-layout-edge); }
.mx-mark { color: var(--m-color-ink); }

/* Human | Machine: plain links, top right (the kit top bar's one control). Static, so it never covers the text. */
.mx-hm {
  display: flex; gap: 2px; padding: 3px; border-radius: var(--m-radius-pill);
  background: var(--m-alpha-frost); -webkit-backdrop-filter: var(--m-effect-frost); backdrop-filter: var(--m-effect-frost);
}
.mx-hm .m-pill { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 9px 14px; }
.mx-hm .m-pill:hover { background: var(--m-alpha-paper-10); }
.mx-hm .m-pill:not([aria-current]) { color: var(--m-color-paper); }   /* paper on frost: ink measured 2.24:1 */
.mx-hm .m-pill[aria-current="page"] { background: var(--m-color-paper); color: var(--m-color-ink); }
.mx-hm .m-pill:focus-visible { outline-color: var(--m-color-signal); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mx-hm { background: var(--m-color-ink); } }

/* ---------- Intro (#top) ---------- */
.mx-intro { padding-top: var(--m-space-xl); padding-bottom: var(--m-space-3xl); }
.mx-meta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m-layout-gutter); row-gap: var(--m-space-sm); margin: 0; padding-top: var(--m-space-sm); border-top: var(--m-border-hairline) var(--m-hairline); }
.mx-meta > div { grid-column: span 3; }
.mx-meta > .mx-meta__also { grid-column: 7 / span 6; }
.mx-meta dt, .mx-meta dd { margin: 0; font-family: var(--m-font-mono); letter-spacing: 0; font-size: var(--m-type-label-size); line-height: 1.5; }
.mx-meta dt { text-transform: uppercase; color: var(--m-muted-small); }
.mx-meta dd { color: var(--m-fg); }
.mx-meta dd:not(:has(a)) { text-transform: uppercase; }
.mx-path { display: inline-block; padding-block: 3px; font-family: var(--m-font-mono); letter-spacing: 0; text-decoration: none; margin-right: 1.1em; white-space: nowrap; }   /* 24px targets (2.5.8) */
/* The Also row wraps to two lines in the fallback mono and one in Plex: reserve two so the font swap doesn't shift the hero. */
.mx-meta__also dd { min-height: calc(2 * (1.5em + 6px)); }
.nobr { white-space: nowrap; }
.mx-path:hover { text-decoration: underline; text-underline-offset: .2em; }
.mx-path::before { content: "→ "; color: var(--m-muted-small); }

.mx-lede { margin: var(--m-space-xl) 0 0; max-width: 34em; font-size: var(--m-type-body-size); line-height: var(--m-type-body-line-height); color: var(--m-fg-secondary); }

.mx-hero { margin-top: var(--m-space-3xl); }
.mx-statement { margin: var(--m-space-md) 0 0; max-width: 13.5em; text-wrap: balance; }
.mx-descriptor { margin: var(--m-space-lg) 0 0; color: var(--m-fg-secondary); }

/* ---------- Sections ---------- */
.mx-section { padding-bottom: var(--m-space-3xl); }
.mx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--m-space-2xs) var(--m-space-md); border-top: var(--m-border-rule) var(--m-fg); padding-top: var(--m-space-sm); margin-bottom: var(--m-space-xl); }
.mx-head h2 { margin: 0; color: var(--m-fg); }
.mx-num { color: var(--m-muted-small); }
.mx-pair { font-family: var(--m-font-mono); letter-spacing: 0; text-transform: uppercase; font-size: var(--m-type-label-size); line-height: 1; color: var(--m-muted-small); text-decoration: none; }
.mx-pair::after { content: " →"; }
.mx-pair:hover, .mx-pair:focus-visible { color: var(--m-fg); text-decoration: underline; text-underline-offset: .25em; }

.mx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m-layout-gutter); row-gap: var(--m-space-lg); }
.mx-headline { grid-column: 1 / span 6; align-self: start; margin: 0; font-size: var(--m-type-h2-size); font-weight: var(--m-type-h2-weight); line-height: var(--m-type-h2-line-height); letter-spacing: var(--m-type-h2-tracking); text-wrap: balance; max-width: 11.5em; }
@media (min-width: 992px) { .mx-headline { position: sticky; top: var(--m-space-lg); } }
.mx-body { grid-column: 7 / span 6; }
.mx-body > * + * { margin-top: var(--m-space-lg); }
.mx-body > .m-body { margin-bottom: 0; }
.mx-body > .m-body:first-child { margin-top: 0; }
.mx-body .m-body { max-width: none; }

/* 02: four deliverables as ruled pairs (2 × 2). */
.mx-deliver { display: grid; grid-template-columns: 1fr 1fr; margin: var(--m-space-lg) 0 0; }
.mx-deliver > div { border-top: var(--m-border-rule) var(--m-rule); padding: var(--m-space-sm) var(--m-space-md) var(--m-space-md) 0; }
.mx-deliver dt { font-family: var(--m-font-mono); letter-spacing: 0; text-transform: uppercase; font-size: var(--m-type-label-size); color: var(--m-muted-small); margin: 0 0 .6em; }
.mx-deliver dd { margin: 0; font-size: var(--m-type-body-size); line-height: 1.35; }

/* 03: the bar, kit numbered rows. */
.mx-numbered { border-top: var(--m-border-rule) var(--m-rule); }
.mx-numbered h3 { letter-spacing: var(--m-tracking-brand); }

/* 04: steps, one line each, the lead word heavier. */
.mx-steps { list-style: none; margin: 0; padding: 0; border-top: var(--m-border-rule) var(--m-rule); }
.mx-steps > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--m-space-sm); padding: 1rem 0; border-bottom: var(--m-border-hairline) var(--m-hairline); }
.mx-steps > li:last-child { border-bottom: var(--m-border-rule) var(--m-rule); }
.mx-steps__num { font-family: var(--m-font-mono); letter-spacing: 0; font-size: var(--m-type-label-size); color: var(--m-muted-small); padding-top: .4em; }
.mx-steps p { margin: 0; font-size: var(--m-type-body-size); line-height: var(--m-type-body-line-height); font-weight: var(--m-weight-regular); color: var(--m-fg-secondary); }
.mx-steps strong { font-weight: var(--m-weight-semibold); color: var(--m-fg); }

/* 05: for / not for, side by side. */
.mx-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m-space-lg); }
.mx-sub { margin: 0 0 var(--m-space-2xs); font-family: var(--m-font-mono); font-weight: var(--m-weight-regular); letter-spacing: 0; text-transform: uppercase; font-size: var(--m-type-label-size); color: var(--m-muted-small); padding-bottom: var(--m-space-2xs); border-bottom: var(--m-border-rule) var(--m-fg); }
.mx-fit .m-list > li { font-size: 1.1rem; line-height: 1.35; }
.mx-fit .m-list > li::before { top: 1.2rem; }
.mx-fit .m-list--no > li::before { top: .5rem; }
.mx-fit .m-list--no > li { color: var(--m-fg-secondary); }

/* 06: the seat, the one tiny live dot. */
.mx-seat { display: inline-flex; align-items: center; gap: .6em; color: var(--m-fg); }
.mx-dot { width: .55em; height: .55em; border-radius: 50%; background: var(--m-color-signal); flex: none; }
.mx-actions { margin-top: var(--m-space-xl) !important; display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-space-sm) var(--m-space-lg); }
.mx-alt { font-family: var(--m-font-mono); letter-spacing: 0; text-transform: uppercase; font-size: var(--m-type-label-size); color: var(--m-muted-small); text-decoration: none !important; }
.mx-alt::before { content: "→ "; }
.mx-alt:hover { color: var(--m-fg); text-decoration: underline !important; text-underline-offset: .25em; }

/* 07: what isn't true, plain. */
.mx-nottrue { border-top: var(--m-border-rule) var(--m-rule); }
.mx-nottrue > li { color: var(--m-fg-secondary); font-weight: var(--m-weight-regular); }

/* 08: the seven places, paired to the human anchors. */
.mx-places { list-style: none; margin: var(--m-space-lg) 0 0; padding: 0; border-top: var(--m-border-rule) var(--m-rule); }
.mx-places > li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--m-space-md); padding: 1rem 0; border-bottom: var(--m-border-hairline) var(--m-hairline); }
.mx-places > li:last-child { border-bottom: var(--m-border-rule) var(--m-rule); }
.mx-places a { display: flex; gap: .9em; align-items: baseline; text-decoration: none !important; font-family: var(--m-font-mono); letter-spacing: 0; text-transform: uppercase; font-size: var(--m-type-label-size); line-height: 1.5; padding-top: .2em; }
.mx-places__num { color: var(--m-muted-small); }
.mx-places a:hover .mx-places__name, .mx-places a:focus-visible .mx-places__name { text-decoration: underline; text-underline-offset: .25em; }
.mx-places p { margin: 0; font-size: 1.05rem; line-height: 1.45; font-weight: var(--m-weight-regular); color: var(--m-fg-secondary); }

/* ---------- Close: ink footer ---------- */
.mx-close { padding-top: var(--m-space-lg); }
.mx-footer { padding-bottom: var(--m-space-2xl); row-gap: var(--m-space-lg); align-items: baseline; }
.mx-footer ul { flex-wrap: wrap; row-gap: var(--m-space-xs); }
.mx-footer .m-signoff { margin: 0; font-size: 1.05rem; text-transform: none; }
.mx-footer .m-footer__legal { margin: 0; }
.mx-credit { flex-basis: 100%; margin: 0; max-width: 62em; text-transform: none; font-family: var(--m-font-sans); letter-spacing: var(--m-tracking-brand); font-size: .8125rem; line-height: 1.5; color: var(--m-muted); border-top: var(--m-border-hairline) var(--m-hairline); padding-top: var(--m-space-sm); }

/* ---------- Licenses page (shares this sheet) ---------- */
.mx-doc { padding-top: var(--m-space-xl); padding-bottom: var(--m-space-3xl); }
.mx-doc h1 { margin: var(--m-space-md) 0 0; }
.mx-doc .mx-section { padding-bottom: var(--m-space-2xl); }
.mx-license { margin: 0; padding: var(--m-space-md) 0 0; border-top: var(--m-border-hairline) var(--m-hairline); font-family: var(--m-font-mono); letter-spacing: 0; font-size: .8125rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--m-fg-secondary); max-width: 46em; }
.mx-facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 0; border-top: var(--m-border-rule) var(--m-rule); }
.mx-facts dt, .mx-facts dd { margin: 0; padding: .7rem 0; border-bottom: var(--m-border-hairline) var(--m-hairline); }
.mx-facts dt { padding-right: var(--m-space-lg) !important; font-family: var(--m-font-mono); letter-spacing: 0; text-transform: uppercase; font-size: var(--m-type-label-size); color: var(--m-muted-small); padding-top: .95rem; }
.mx-facts dd { font-size: 1.05rem; line-height: 1.45; font-weight: var(--m-weight-regular); }

/* ---------- Narrow ---------- */
@media (max-width: 991.98px) {
  .mx-headline { grid-column: 1 / -1; max-width: 20em; }
  .mx-body { grid-column: 1 / -1; }
  .mx-meta > div { grid-column: span 6; }
  .mx-meta > .mx-meta__also { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .mx-bar { padding-left: var(--m-layout-edge); padding-right: var(--m-layout-edge); }
  .m-container.mx-intro, .m-container.mx-section, .mx-footer, .mx-doc { padding-left: var(--m-layout-edge); padding-right: var(--m-layout-edge); }
  .mx-grid, .mx-meta { grid-template-columns: minmax(0, 1fr); }
  .mx-meta > div, .mx-meta > .mx-meta__also { grid-column: 1 / -1; }
  .mx-hero { margin-top: var(--m-space-2xl); }
  .mx-intro { padding-bottom: var(--m-space-2xl); }
  .mx-section { padding-bottom: var(--m-space-2xl); }
  .mx-deliver, .mx-fit { grid-template-columns: 1fr; }
  .mx-places > li { grid-template-columns: 1fr; gap: var(--m-space-2xs); }
  .mx-footer ul { flex-direction: column; }
  .mx-facts { grid-template-columns: 1fr; }
  .mx-facts dt { border-bottom: 0; padding-bottom: 0; }
}

/* ---------- Print: the document, without the switch ---------- */
@media print {
  .mx-hm, .mx-skip { display: none; }
  .mx-close { background: none; color: var(--m-color-ink); }
}
.mx-lc { text-transform: none; }
.mx-intro-doc { padding-bottom: var(--m-space-3xl); }
.mx-intro-doc .mx-lede { margin-top: var(--m-space-lg); }
@media (max-width: 767.98px) { .mx-intro-doc { padding-bottom: var(--m-space-2xl); } }
.mx-facts + .mx-license { border-top: 0; padding-top: 0; margin-top: var(--m-space-lg); }
@media (max-width: 767.98px) { .mx-statement { font-size: var(--m-type-statement-size); font-weight: var(--m-type-statement-weight); line-height: var(--m-type-statement-line-height); letter-spacing: var(--m-type-statement-tracking); } }

/* Visually hidden (the kicker's "Meddle": the corner wordmark says it; a mono caps MEDDLE would read as a typed logo). */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* "Meddle" is never typed in caps (only the wordmark is): the legal line and the domains keep their case. */
.nocaps, .m-footer .nocaps { text-transform: none; }