/* Add your own CSS overrides here.
   This file is loaded after style.css, so rules here win. */

/* Present the tall iPhone capture as a compact preview of the post. */
article img[src^="/media/tail-fatness-lab/"] {
  display: block;
  width: 100%;
  height: clamp(16rem, 45vw, 24rem);
  object-fit: cover;
  object-position: top;
  border-radius: 0.4rem;
}

article iframe.interactive-embed {
  display: block;
  width: 100%;
  height: min(76svh, 44rem);
  min-height: 32rem;
  margin: 1.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.65rem;
  background: #0d1208;
}

/* Keep the lab controls and the first chart together on a phone screen. */
@media (max-width: 640px) {
  body .lab {
    padding: 18px 0.65rem 36px;
  }

  body .lab header {
    margin-bottom: 12px;
  }

  body .lab .control {
    margin: 14px 0 10px;
    padding: 12px;
    border-radius: 11px;
  }

  body .lab .control .row1 {
    gap: 8px;
  }

  body .lab .nu-val {
    font-size: 15px;
    line-height: 1;
  }

  body .lab .nu-note {
    flex-basis: 100%;
    margin-left: 0;
    font-size: 11px;
  }

  body .lab input[type="range"] {
    margin: 10px 0 2px;
  }

  body .lab .scale {
    font-size: 8px;
  }

  body .lab .presets {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 9px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body .lab .presets::-webkit-scrollbar {
    display: none;
  }

  body .lab .presets button {
    flex: 0 0 auto;
    padding: 4px 9px;
    font-size: 10px;
  }

  body .lab .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 7px 0 9px;
  }

  body .lab .card {
    min-height: 42px;
    padding: 4px 3px;
    border-top-width: 2px;
    border-radius: 7px;
  }

  body .lab .card .name {
    overflow: hidden;
    font-size: 7px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .lab .card.ent .name {
    font-size: 0;
  }

  body .lab .card.ent .name::after {
    content: "Entropy";
    font-size: 7px;
  }

  body .lab .card .formula,
  body .lab .card .status {
    display: none;
  }

  body .lab .card .value {
    margin-top: 2px;
    font-size: 14px;
    line-height: 1;
  }

  body .lab .charts {
    gap: 10px;
  }

  body .lab .chart {
    padding: 11px 10px 7px;
    border-radius: 11px;
  }

  body .lab .chart .cap {
    margin-bottom: 5px;
    font-size: 10.5px;
    line-height: 1.35;
  }
}