/*
  Every rule in this file is deliberately wrong in a specific, named way. The
  demo is the fixture the engines are developed against: if whylayout cannot
  explain a section here, that engine is not finished.
*/

@layer base, theme;

:root {
  --line: #d5d9e0;
  --ink: #14161a;
  --muted: #6b7280;
}

body {
  margin: 0;
  padding: 40px 24px 120px;
  color: var(--ink);
  background: #fbfcfd;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, sans-serif;
}

.page-header,
section {
  max-width: 1100px;
  margin: 0 auto 56px;
}

h2 {
  font-size: 1.15rem;
  margin-bottom: 0.3em;
}

section > p {
  color: var(--muted);
  max-width: 68ch;
}

code {
  font: 13px ui-monospace, Menlo, Consolas, monospace;
  background: #eef1f5;
  padding: 1px 5px;
  border-radius: 4px;
}

button {
  font: inherit;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  cursor: pointer;
}

/* 1. Flex items default to min-width: auto, so the middle card refuses to go
      narrower than that unbreakable URL. Fix: min-width: 0 on .card.

      Note there is deliberately no `width` on .card: with a width specified, the
      automatic minimum size is the smaller of the specified and content
      suggestions, so the specified width would become the floor instead and
      there would be nothing to explain. */
.row {
  display: flex;
  gap: 16px;
  width: 480px;
  max-width: 100%;
  border: 1px dashed var(--line);
}

.card {
  flex: 1 1 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: white;
}

.card__meta {
  font: 12px ui-monospace, Menlo, Consolas, monospace;
  margin: 0;
}

/* 2. Nothing separates .panel from its first child, so the child's top margin
      collapses through and moves the panel. Fix: display: flow-root. */
.panel {
  background: white;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 8px;
}

.panel__title {
  margin-top: 48px;
  padding: 0 16px;
}

.panel p {
  padding: 0 16px 16px;
  color: var(--muted);
}

/* 3. One grid item is wider than the grid, which is what makes the page scroll
      sideways. Its siblings are pushed along but are innocent. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 12px;
}

.tile {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.tile--wide {
  width: 1650px;
}

/* 4. `1fr` is minmax(auto, 1fr). The auto floor is the min-content width, so the
      middle column refuses to shrink and the whole grid overruns. Fix on the
      item: min-width: 0. Fix on the container: minmax(0, 1fr). */
.cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  /* Constrained on purpose. Given a wide container the grid just squeezes the
     other two tracks and nothing overflows - which is the right outcome, and
     means there would be nothing here to explain. */
  width: 420px;
  max-width: 100%;
  border: 1px dashed var(--line);
}

.cell {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

/* 5. .badge has z-index: 9999 and it is honoured - but only inside the stacking
      context .stack created with opacity: 0.99. Fix: remove that opacity. */
.stack {
  position: relative;
  opacity: 0.99;
  display: flex;
  gap: 12px;
  align-items: center;
}

.badge {
  position: relative;
  z-index: 9999;
  background: #4f9cf9;
  color: white;
  padding: 6px 12px;
  border-radius: 999px;
}

.ribbon {
  position: relative;
  z-index: 1;
  margin-left: -40px;
  background: #14161a;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
}

/* 6. transform on .promo makes it the containing block for its fixed
      descendant, so .cta is fixed to .promo and scrolls with it. */
.promo {
  transform: translateZ(0);
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  min-height: 90px;
}

.cta {
  position: fixed;
  top: 12px;
  right: 12px;
  background: #14161a;
  color: white;
  padding: 8px 14px;
  border-radius: 8px;
}

/* 7. max-width always beats width. */
.capped {
  width: 480px;
  max-width: 320px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

/* 8. width does not apply to a non-replaced inline element. */
.inline-width {
  display: inline;
  width: 400px;
  background: #eef1f5;
  padding: 2px 6px;
}

/* 9. align-items: center needs spare room on the cross axis to move anything
      through, and the bar is exactly as tall as its tallest child. The
      declaration is fine; there is simply nothing for it to do until the bar
      has a height. */
.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
}

.bar__icon {
  background: #eef1f5;
  padding: 24px 12px;
}

.bar__label {
  padding: 0 8px;
}

/* 10. Four rules, two layers, one !important. The winner is not the one most
      people predict: for a normal declaration unlayered beats layered, but the
      !important declaration in the EARLIER layer beats the !important in the
      later one. */
@layer base {
  .contested {
    color: rebeccapurple !important;
  }
}

@layer theme {
  h3.contested {
    color: seagreen !important;
  }
}

.contested {
  color: crimson;
}

#contested {
  color: darkorange;
}