/* Supplement vertical · argument section styles.
   The standard, the ritual, what was left out, what will be published,
   the cost arithmetic table, and the stack builder.
   Disjoint from the engine sheet by class family — see split-css.py.
 */

/* ===========================================================================
   SINGLE-INGREDIENT STANDARD
   =========================================================================== */
.ms-standard {
  border-block: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 42%, var(--background));
}
.ms-standard__grid {
  display: grid; gap: 2.5rem; align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}
@media (min-width: 1024px) { .ms-standard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }}

.ms-standard__copy { order: 2; }
.ms-standard__media { order: 1; }
@media (min-width: 1024px) { .ms-standard__copy { order: 1; } .ms-standard__media { order: 2; }}

.ms-standard__media {
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--elevation-card);
}
.ms-standard__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 1024px) { .ms-standard__media img { aspect-ratio: 3 / 4; }}


.ms-speccard {
  max-width: 24rem; margin-top: 2rem; padding: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card); box-shadow: var(--elevation-whisper);
}
.ms-speccard__head {
  margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.ms-specrows { margin: 0.75rem 0 0; }
.ms-specrows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: 0.5rem; border-top: 1px solid color-mix(in oklab, var(--border-strong) 40%, transparent);
}
.ms-specrows > div:first-child { border-top: none; }
.ms-specrows dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.ms-specrows dd {
  margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--foreground);
}

/* ==========================================================================
   §9 LEFT OUT  ·  §12 WILL PUBLISH
   Two dark data bands. Per the system, a dark band must carry data or a
   photograph — never body copy alone — so both are built around a mono
   key/value list. Ochre carries every value that came off a label or a
   commitment; blue stays reserved for actions.
   ========================================================================== */

.ms-leftout,
.ms-willpub {
  background: var(--band-ink);
  padding-block: clamp(4rem, 8vw, 7rem);

  /* Re-point the ink scale for this band instead of overriding each element.
     `.ms-title` resolves `color: var(--foreground)`, and on the light skin that
     is near-black — so the first version of this section rendered dark type on
     a dark band. Shadowing the same custom properties the .dark scope uses
     fixes every descendant at once (headings, .ms-body, --ink-2/3 consumers)
     and keeps a single source of truth for the values. */
  --foreground: oklch(0.945 0.006 62);
  --ink-2: oklch(0.820 0.012 62);
  --ink-3: oklch(0.680 0.014 62);
  --ink-4: oklch(0.600 0.016 62);
  --border: oklch(1 0 0 / 0.10);
  --border-strong: oklch(1 0 0 / 0.24);
  color: var(--foreground);
}

/* --- §9 two-column: argument left, list right --- */
.ms-leftout__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .ms-leftout__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }}

.ms-leftout__lead { color: var(--ink-3); margin-block: 1rem 1.75rem; max-width: 44ch; }
.ms-leftout__cta { margin-top: .25rem; }

.ms-leftout__list,
.ms-willpub__list { margin: 0; display: grid; gap: 0; }

.ms-leftout__row,
.ms-willpub__row {
  display: grid;
  gap: .35rem 1.5rem;
  padding-block: 1.15rem;
  border-top: 1px solid var(--border);
  grid-template-columns: 1fr;
}
.ms-leftout__row:last-child,
.ms-willpub__row:last-child { border-bottom: 1px solid var(--border); }
@media (min-width: 640px) {
  .ms-leftout__row  { grid-template-columns: minmax(9rem, 14rem) 1fr; }
  .ms-willpub__row  { grid-template-columns: minmax(9rem, 12rem) 1fr; }}


.ms-leftout__k,
.ms-willpub__k {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--data-accent);   /* ochre on dark — 9.54:1 */
  align-self: start;
  padding-top: .15rem;
}
.ms-leftout__v,
.ms-willpub__v { margin: 0; color: var(--ink-2); text-wrap: pretty; }

/* --- §12 single column, centred argument --- */
.ms-willpub__inner { max-width: 60rem; }
.ms-willpub__title { max-width: 22ch; }
.ms-willpub__lead  { color: var(--ink-3); margin-block: 1.25rem 2.5rem; max-width: 58ch; }
.ms-willpub__foot  {
  margin-top: 2rem;
  color: var(--ink-3);
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  max-width: 52ch;
}

/* ==========================================================================
   §7 ARITHMETIC — a real data table in a consumer funnel.
   AG1 puts a 19-row matrix in position 5 of its homepage and it converts;
   the category's fear of tables is unearned. Mono + tabular-nums so the
   decimal points line up, which is the whole reason the column is readable.
   ========================================================================== */
.ms-arith__lead { color: var(--ink-2); max-width: 62ch; margin-block: 1rem 2rem; }

.ms-arith__scroll {
  overflow-x: auto;                 /* the page must never scroll sideways */
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gutter, 1rem) * -1);
  padding-inline: var(--gutter, 1rem);
}
.ms-arith__table {
  width: 100%;
  min-width: 40rem;                 /* below this the columns collide; scroll instead */
  border-collapse: collapse;
  font-size: .9375rem;
}
.ms-arith__table th,
.ms-arith__table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: baseline;
}
.ms-arith__table thead th {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  border-bottom-color: var(--border-strong);
  white-space: nowrap;
}
.ms-arith__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-arith__name { font-weight: 500; }
.ms-arith__name a { color: inherit; text-decoration: none; display: block; }
.ms-arith__name a:hover { color: var(--brand); }
.ms-arith__code {
  display: block;
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--data-accent);
  margin-bottom: .15rem;
}
.ms-arith__per { color: var(--ink-1); font-weight: 600; }

/* The blend row is the argument: same table, no numbers to give. */
.ms-arith__blend th,
.ms-arith__blend td { color: var(--ink-3); background: var(--surface-2); }
.ms-arith__blend .ms-arith__per { color: var(--ink-3); font-weight: 500; font-style: italic; }

.ms-arith__foot {
  margin-top: 1.25rem;
  font-size: .875rem;
  color: var(--ink-3);
  max-width: 68ch;
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
}

/* ==========================================================================
   §11 BUILD YOUR OWN STACK
   Three cards, each a small list of real products. Deliberately NOT styled as
   a bundle/offer block: no combined price, no "save X" badge, no single
   add-to-cart. The argument is that these are separate decisions, so the
   design has to agree with the copy.
   ========================================================================== */
.ms-stack__lead { color: var(--ink-2); max-width: 60ch; margin-block: 1rem 2.25rem; }

.ms-stack__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .ms-stack__grid { grid-template-columns: repeat(2, 1fr); }}

@media (min-width: 1040px) { .ms-stack__grid { grid-template-columns: repeat(3, 1fr); }}


.ms-stackcard {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.4rem 1.4rem 1rem;
  display: flex;
  flex-direction: column;
}
.ms-stackcard__name { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.ms-stackcard__note { margin: .5rem 0 1.1rem; color: var(--ink-3); font-size: .9375rem; line-height: 1.55; }

.ms-stackcard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; margin-top: auto; }
.ms-stackcard__item { border-top: 1px solid var(--border); }
.ms-stackcard__item:first-child { border-top: 0; }

.ms-stackcard__link {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: .85rem;
  align-items: center;
  padding: .7rem 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.ms-stackcard__link:hover .ms-stackcard__title { color: var(--brand); }
.ms-stackcard__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.ms-stackcard__thumb {
  width: 3rem; aspect-ratio: 1; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-2); display: grid; place-items: center;
}
.ms-stack__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ms-stackcard__meta { display: grid; gap: .1rem; min-width: 0; }
.ms-stackcard__code  { font-size: .625rem; letter-spacing: .12em; color: var(--data-accent); }
.ms-stackcard__title { font-size: .9375rem; font-weight: 500; overflow-wrap: anywhere; }
.ms-stackcard__dose  { font-size: .75rem; color: var(--ink-3); }

.ms-stack__foot {
  margin-top: 1.5rem; font-size: .875rem; color: var(--ink-3);
  max-width: 64ch; border-left: 2px solid var(--rule); padding-left: 1rem;
}