/* Make, formats, styles, graphics and record pages. Colours, type and spacing come from tokens.css; layout pieces from landing.css. */
.mk-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-top: var(--space-xl); color: var(--muted); font-size: var(--t-footnote-size); }
.mk-crumbs a { color: var(--ink-2); }
.mk-crumbs a:focus-visible, .mk-more a:focus-visible, .mk-compare a:focus-visible { outline: var(--border-selected) solid var(--accent-ink); outline-offset: 2px; }
.mk-page .lp-hero { padding-block: var(--space-xxxl) var(--space-4xl); }
.mk-page .lp-sec { padding-block: var(--space-4xl); }

/* Text next to a picture */
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: var(--space-xxxl); align-items: center; }
.mk-split.mk-flip { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
.mk-split.mk-flip .mk-text { order: 2; }
.mk-text { display: grid; gap: var(--space-md); color: var(--ink-2); font-size: calc(var(--t-body-size) * 1.1); line-height: 1.6; }
.mk-text h2 { color: var(--ink); }
.mk-text ul { margin: 0; padding-left: var(--space-xl); }
.mk-text li + li { margin-top: var(--space-xs); }
.mk-fig { margin: 0; display: grid; gap: var(--space-sm); justify-items: center; }
.mk-fig figcaption { color: var(--muted); font-size: var(--t-footnote-size); text-align: center; max-width: 18rem; }
.mk-fig .lp-shot { max-width: 18rem; }

/* Chips for filter names and list items */
.mk-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0; margin: 0; list-style: none; }
.mk-chips li { padding: var(--space-xxs) var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--paper-deep); color: var(--ink); font-size: var(--t-subhead-size); font-weight: 600; }
.mk-chips .lp-note { margin: 0; }

/* Plain cards in a grid */
.mk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); padding: 0; margin: 0; list-style: none; }
.mk-cards li { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-xl); border: var(--card-border-width) solid var(--line); border-radius: var(--radius-card); background: var(--card-fill); color: var(--ink-2); }
.mk-cards h3 { color: var(--ink); }

/* Compared with */
.mk-compare { display: grid; gap: var(--space-sm); padding: 0; margin: var(--space-xl) 0 0; list-style: none; max-width: 52rem; }
.mk-compare li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-md); align-items: start; padding: var(--space-lg); border: var(--card-border-width) solid var(--line); border-radius: var(--radius-card); background: var(--card-fill); color: var(--ink-2); }
.mk-compare a { color: var(--accent-ink); font-weight: 600; }
.mk-compare strong { color: var(--ink); }
.mk-more { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); padding: 0; margin: var(--space-xl) 0 0; list-style: none; }
.mk-more a { color: var(--accent-ink); font-weight: 600; }

/* Drawings (not screens): built from boxes and text, hidden from screen readers, named in the caption */
.mk-draw { display: grid; gap: var(--space-md); width: 100%; max-width: 20rem; padding: var(--space-lg); border: 1px solid var(--line-dark); border-radius: var(--radius-panel); background: var(--paper-deep); }
.mk-frame { position: relative; display: grid; align-content: end; gap: var(--space-sm); min-height: 12rem; padding: var(--space-md); border-radius: var(--radius-card); background: var(--ink); color: var(--paper); overflow: hidden; }
.mk-frame small { color: var(--muted-on-ink); font-size: var(--t-footnote-size); }
.mk-gfx { display: grid; gap: var(--space-xxs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--paper); color: var(--ink); }
.mk-gfx b { font-family: var(--sans); font-weight: 700; font-size: var(--t-metric-size); line-height: 1; }
.mk-gfx span { font-size: var(--t-footnote-size); color: var(--ink-2); }
.mk-gfx.mk-lower { border-left: var(--space-xs) solid var(--accent); border-radius: var(--radius-thumb); }
.mk-gfx.mk-step { background: var(--accent); color: var(--on-accent); }
.mk-gfx.mk-step span { color: var(--on-accent); }
.mk-prompt { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-card); background: var(--ink); color: var(--paper); font-size: calc(var(--t-body-size) * 1.15); line-height: 1.5; }
.mk-prompt .mk-dim { color: var(--muted-on-ink); }
.mk-prompt .mk-now { color: var(--accent-on-ink); font-weight: 700; }
.mk-rec { display: flex; align-items: center; gap: var(--space-xs); color: var(--muted); font-size: var(--t-footnote-size); }
.mk-rec::before { content: ""; width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-pill); background: var(--danger); }

@media (max-width: 48rem) {
  .mk-split, .mk-split.mk-flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-xxl); }
  .mk-split.mk-flip .mk-text { order: 0; }
  .mk-cards { grid-template-columns: minmax(0, 1fr); }
  .mk-compare li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .mk-page .lp-sec { padding-block: var(--space-xxxl); }
}
.mk-page .lp-h2 + .mk-cards, .mk-page .lp-h2 + .mk-chips { margin-top: var(--space-xxl); }