/* ---------- Phone and touch fixes (Home, About, Tandm, ClearCalc) ---------- */

/* Words that depend on the device: "Hover"/"Click" with a mouse, "Tap" on touch screens */
.say-tap { display: none; }
@media (hover: none) {
  .say-hover { display: none; }
  .say-tap { display: inline; }
}

/* ---------- Bigger tap areas, same look ----------
   Each link or dot keeps its size on screen; only the invisible area you can tap grows to about 44px. */
@media (pointer: coarse) {
  /* top and footer nav: taller tap area, underline stays where it was */
  .nav a { padding-block: 10px; margin-block: -10px; }
  .nav a::after { bottom: 6px; }
  /* breadcrumbs and the footer email link (inline links, so the padding doesn't move anything) */
  .crumbs a { padding-block: 13px; }
  .closer p a { padding-block: 12px; }
  /* "At a glance" carousel dots */
  .gc-dots button { position: relative; }
  .gc-dots button::before { content: ""; position: absolute; inset: -12px -3px; }
  /* About photo dots */
  .deck-dots button::after { content: ""; position: absolute; inset: -10px -2px; }
  /* ClearCalc prototype: each highlighted spot is easier to hit than it looks */
  .proto-spot::before { content: ""; position: absolute; inset: -12px; border-radius: 10px; }
  .eco-replay { position: relative; }
  .eco-replay::after { content: ""; position: absolute; inset: -12px -6px; }
}

/* ---------- "Tap to enlarge" icon on touch screens ----------
   With a mouse the hint appears on hover; phones have no hover, so a small expand icon sits on
   every image that opens full size. Tiny thumbnails in walls and strips skip it (their caption says "tap any"). */
@media (hover: none) {
  [data-lightbox] { position: relative; }
  [data-lightbox]:not(.wall [data-lightbox]):not(.cc-strip [data-lightbox])::after {
    content: ""; position: absolute; right: 8px; bottom: 8px; z-index: 1; width: 30px; height: 30px; border-radius: 999px;
    background: rgba(20, 22, 26, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 15px no-repeat;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18); pointer-events: none;
  }
  .zoom-hint { display: none !important; }
}

/* ---------- Section bar: soft fade where more chips are hidden ----------
   The script adds fade-l / fade-r only on the sides that can still scroll. */
.toc ol {
  --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
}
.toc ol.fade-l { --fl: 28px; }
.toc ol.fade-r { --fr: 28px; }

/* ---------- Tandm: the snail and marketplace drawings ----------
   They open full size on tap, and on phones the panel padding shrinks so the drawing gets the width. */
/* the drawings are transparent: no white box from the general case-study image style */
.cs section figure.illo img { background: none; }
.cs section figure.illo > button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
@media (max-width: 640px) {
  .cs section figure.illo { padding: 20px 6px; }
}

/* ---------- Full-size view on phones: a long caption stops before Close (with "…") instead of running under it ---------- */
@media (max-width: 640px) {
  dialog.lightbox p { display: block; width: 100%; line-height: 56px; padding: 0 96px 0 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* in a gallery the "1 / 24" counter sits at the left, so the caption starts after it */
  dialog.lightbox.lb-gallery p { padding-left: 64px; }
}