/*
 * Article template on phones (Pen YzjDf "G · Mobile · Article template", 390 wide).
 * Desktop rules live in d2.css; everything here is scoped by width.
 */

/* Mobile-only pieces stay out of the desktop layout. */
@media (min-width: 761px) {
  .d2-ahead__mcrumb, .d2-mbyline, .d2-mtoc-wrap, .d2-shortlist__col-s { display: none; }
}

/* Between phone and desktop: let the three columns shrink instead of overflowing. */
@media (min-width: 761px) and (max-width: 1340px) {
  .d2-abody { padding-left: 24px; padding-right: 24px; gap: 32px; }
  .d2-toc { width: 180px; }
  .d2-acontent { flex: 1 1 720px; width: auto; min-width: 0; }
  .d2-arail { width: 260px; }
  .d2-ahead { padding-left: 24px; padding-right: 24px; }
  .d2-ahead__inner { width: 100%; max-width: 760px; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .d2-toc { display: none; }
}

@media (max-width: 760px) {
  /* Header (Dpgna) sits inside the body's 16px gutter; the body's 22px gap separates it from the contents. */
  .d2-ahead { padding: 18px 16px 0; box-shadow: none; }
  .d2-ahead__inner { width: 100%; gap: 12px; }
  .d2-ahead__crumbs, .d2-byline { display: none; }
  .d2-ahead__mcrumb { align-self: flex-start; font: 400 10px/13px var(--font-mono); letter-spacing: 1.3px; color: var(--ink-muted); }
  .d2-ahead__title { font-size: 36px; line-height: 38px; letter-spacing: -0.5px; }
  .d2-ahead__answer { font-size: 17px; line-height: 26px; }
  .d2-mbyline { display: flex; align-items: center; gap: 10px; }
  .d2-mbyline__avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--logo-chip); font: 600 12px/16px var(--font-body); color: #fff; }
  .d2-mbyline__text { display: flex; flex-direction: column; gap: 1px; }
  .d2-mbyline__name { font: 600 12px/16px var(--font-body); color: var(--ink); }
  .d2-mbyline__meta { font: 400 10px/13px var(--font-mono); color: var(--ink-muted); }

  /* Body (unG8F): one column, 16px gutter, 22px rhythm. Contents become a dropdown; the live-data rail is dropped (the body's own live blocks carry the numbers). */
  .d2-abody { flex-direction: column; align-items: stretch; gap: 22px; padding: 22px 16px 28px; }
  .d2-toc { display: none; }
  .d2-acontent, .d2-arail { width: auto; position: static; gap: 22px; }
  .d2-arail .d2-ablock:has(.d2-railcard) { display: none; }
  .d2-ablock { gap: 6px; }
  .d2-btag { overflow: hidden; text-overflow: ellipsis; }

  .d2-mtoc { border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
  .d2-mtoc summary { display: flex; justify-content: space-between; align-items: center; height: 41px; padding: 12px 14px; list-style: none; cursor: pointer; }
  .d2-mtoc summary::-webkit-details-marker { display: none; }
  .d2-mtoc__left { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 17px; color: var(--ink); }
  .d2-mtoc[open] summary svg:last-child { transform: rotate(180deg); }
  .d2-mtoc nav { display: flex; flex-direction: column; padding: 0 14px 8px; box-shadow: inset 0 1px 0 var(--line); }
  .d2-mtoc nav a { padding: 10px 0; font-size: 14px; line-height: 18px; color: var(--ink-secondary); }
  .d2-mtoc nav a + a { box-shadow: inset 0 1px 0 var(--line); }

  /* Prose */
  .d2-acontent > h2 { font-size: 26px; line-height: 30px; scroll-margin-top: 80px; }
  .d2-acontent > p, .d2-acontent > ul, .d2-acontent > ol { font-size: 16px; line-height: 26px; }

  /* Key takeaways */
  .d2-takeaways { gap: 10px; padding: 16px; }
  .d2-takeaways__label { font-size: 10px; line-height: 13px; letter-spacing: 1.3px; }
  .d2-takeaways__point { gap: 8px; }
  .d2-takeaways__point svg { width: 15px; height: 15px; }
  .d2-takeaways__point p { font-size: 14px; line-height: 20px; }
  /* Definition */
  .d2-definition { gap: 4px; padding: 12px 14px; }
  .d2-definition__term { font-size: 14px; line-height: 18px; }
  .d2-definition__meaning { font-size: 13px; line-height: 20px; }
  /* Live metric: value and change only */
  .d2-alive { flex-direction: column; align-items: flex-start; gap: 6px; height: auto; padding: 14px; }
  .d2-alive__head { font-size: 9px; line-height: 12px; letter-spacing: 1.1px; }
  .d2-alive__value { gap: 6px; }
  .d2-alive__head { height: 12px; }
  .d2-alive__row { gap: 8px; height: 31px; }
  .d2-alive__v { font-size: 24px; line-height: 31px; letter-spacing: -0.4px; }
  .d2-alive__d { font-size: 11px; line-height: 14px; }
  .d2-alive__spark, .d2-alive__link { display: none; }
  /* Callout */
  .d2-callout { gap: 10px; padding: 14px; }
  .d2-callout > svg { width: 16px; height: 16px; }
  .d2-callout__title { font-size: 13px; line-height: 17px; }
  .d2-callout__body { font-size: 13px; line-height: 20px; }
  /* Expert note */
  .d2-expert { gap: 12px; padding: 16px; }
  .d2-expert__avatar { width: 32px; height: 32px; font-size: 13px; }
  .d2-expert__quote { font-size: 17px; line-height: 25px; }
  /* Data chart */
  .d2-achart { gap: 10px; padding: 14px; }
  .d2-achart__head { height: 17px; }
  .d2-achart__title { gap: 8px; font-size: 13px; line-height: 17px; }
  .d2-achart__title img { width: 16px; height: 16px; }
  .d2-achart__plot, .d2-achart__plot svg { height: 100px; }
  /* Coin cards stack */
  .d2-acoins { flex-direction: column; gap: 10px; }
  .d2-acoin { padding: 14px; }
  /* Comparison table (core/table), stacked (rIUuV): a key row, then each row as a question over three values. */
  .d2-acontent .wp-block-table { gap: 6px; }
  .d2-acontent .wp-block-table table, .d2-acontent .wp-block-table thead, .d2-acontent .wp-block-table tbody { display: block; border: 0; }
  .d2-acontent .wp-block-table table { box-shadow: inset 0 0 0 1px var(--line); }
  .d2-acontent .wp-block-table tr { display: grid; grid-template-columns: 110px 110px 110px; row-gap: 6px; padding: 10px 14px; box-shadow: inset 0 1px 0 var(--line); }
  .d2-acontent .wp-block-table thead tr { padding: 10px 14px; background: var(--surface-alt); box-shadow: none; }
  .d2-acontent .wp-block-table th, .d2-acontent .wp-block-table td { width: auto !important; height: auto; padding: 0; box-shadow: none !important; background: none; }
  .d2-acontent .wp-block-table thead th { height: auto; font: 400 9px/12px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d2-acontent .wp-block-table thead th:first-child { display: none; }
  .d2-acontent .wp-block-table td { font-size: 13px; line-height: 17px; }
  .d2-acontent .wp-block-table tbody :is(td, th):first-child { grid-column: 1 / -1; }
  /* Pen draws three options; two share the width the same way. */
  .d2-acontent .wp-block-table.is-cols-2 tr { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .d2-acontent .wp-block-table.is-cols-2 thead th { white-space: normal; }
  /* Four or more don't fit side by side: each row becomes a card, every value labelled with its column. */
  .d2-acontent .wp-block-table.is-cols-many thead { display: none; }
  .d2-acontent .wp-block-table.is-cols-many tbody tr:first-child { box-shadow: none; }
  .d2-acontent .wp-block-table.is-cols-many tr { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .d2-acontent .wp-block-table.is-cols-many td:not(:first-child) { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
  .d2-acontent .wp-block-table.is-cols-many td:not(:first-child)::before { content: attr(data-label); font: 400 9px/12px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); }
  /* Trade-offs stack */
  .d2-atradeoffs { flex-direction: column; gap: 10px; }
  .d2-atradeoff { padding: 14px; }
  /* Steps */
  .d2-step { gap: 12px; }
  .d2-step__rail { width: 28px; }
  .d2-step__n { width: 28px; height: 28px; font-size: 12px; line-height: 16px; }
  .d2-step__rail i { height: 26px; }
  .d2-step__text { gap: 2px; padding: 3px 0 12px; }
  .d2-step__t { font-size: 15px; line-height: 19px; }
  .d2-step__d { font-size: 13px; line-height: 17px; }
  /* Exchange shortlist */
  .d2-shortlist__head { height: 42px; padding: 12px 14px; }
  .d2-shortlist__t { font-size: 14px; line-height: 18px; }
  .d2-shortlist__col { font-size: 9px; line-height: 12px; letter-spacing: 1px; }
  .d2-shortlist__col-l { display: none; }
  .d2-shortlist__row { gap: 10px; height: 67px; padding: 12px 14px; }
  .d2-shortlist__logo { width: 28px; height: 28px; border-radius: 7px; font-size: 12px; }
  .d2-shortlist__name { font-size: 14px; line-height: 18px; }
  .d2-shortlist__score { display: none; }
  .d2-shortlist__cost { font-size: 16px; line-height: 21px; }
  .d2-shortlist__cta { padding: 8px 12px; font-size: 12px; line-height: 16px; }
  .d2-shortlist__foot { padding: 10px 14px; }
  .d2-shortlist__foot p:not(.d2-btag) { font-size: 11px; line-height: 15px; }
  /* Risk list */
  .d2-riskitem { gap: 12px; padding: 12px 14px; }
  .d2-riskitem__icon { width: 28px; height: 28px; border-radius: 7px; }
  .d2-riskitem__icon svg { width: 14px; height: 14px; }
  .d2-riskitem__text { gap: 2px; }
  .d2-riskitem__k { font-size: 14px; line-height: 18px; }
  .d2-riskitem__m { font-size: 13px; line-height: 17px; }
  .d2-riskitem__a { font-size: 12px; line-height: 17px; }
  /* FAQ: the frame spaces the questions 6px apart */
  .d2-afaq { gap: 6px; }
  .d2-afaq__item { padding: 12px 0; }
  .d2-afaq__item summary { height: auto; min-height: 19px; gap: 12px; font-size: 15px; line-height: 19px; }
  .d2-afaq__item p { margin-top: 6px; font-size: 14px; line-height: 21px; }
  /* Sources */
  .d2-sources__item { font-size: 12px; line-height: 16px; }
  /* Next read */
  .d2-nextread { gap: 12px; padding: 12px; }
  .d2-nextread img { width: 84px; height: 64px; }
  .d2-nextread__text { gap: 3px; }
  .d2-nextread__label { font-size: 9px; line-height: 12px; letter-spacing: 1.1px; }
  .d2-nextread__title { font-size: 18px; line-height: 18px; }
  .d2-nextread__dek { display: none; }
  .d2-nextread > svg { width: 18px; height: 18px; }
  /* Newsletter */
  .d2-newsletter { gap: 10px; padding: 18px; }
  .d2-newsletter__label { font-size: 9px; line-height: 12px; letter-spacing: 1.2px; }
  .d2-newsletter__title { font-size: 20px; line-height: 20px; }
  .d2-newsletter__dek { display: none; }
}