/* =============================================================
   Dark pattern guides (/dark-pattern-*)
   Each guide draws its pattern as a made-up mock-up of another
   site: a cart, a pop-up, an email. They're HTML, not images, so
   they reflow on phones and the text stays readable. The mock-ups
   use a plain system-font look on purpose, so nobody mistakes them
   for Chill's own pages, and every one is labelled "Made-up example".
   Numbered pins in the mock-up match the notes in its caption.
   ============================================================= */

.dp-mock { margin: var(--space-5) 0 var(--space-6); }
.dp-mock__frame {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: #202124;
}
.dp-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #eef0f3;
  border-bottom: 1px solid #dde1e6;
  font-size: var(--fs-xs);
  color: #5f6368;
}
.dp-mock__bar::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 28px;
  border-radius: 50%;
  background: #c4c9d0;
  box-shadow: 12px 0 0 #c4c9d0, 24px 0 0 #c4c9d0;
}
.dp-mock__url { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.dp-mock__label {
  margin-left: auto;
  flex: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-coral-2);
}
.dp-mock__body { display: grid; gap: 10px; padding: 16px 18px 18px; }
.dp-mock__title { font-size: var(--fs-base); font-weight: 700; }
.dp-mock__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eceff2;
}
.dp-mock__row > :first-child { min-width: 0; }
.dp-mock__price { font-weight: 700; white-space: nowrap; }
.dp-mock__hero { font-size: 2.4rem; font-weight: 800; line-height: 1; color: #137333; }
.dp-mock__was { color: #80868b; text-decoration: line-through; }
.dp-mock__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #d93025;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.dp-mock__fine { font-size: 0.72rem; line-height: 1.4; color: #9aa0a6; }
.dp-mock__muted { color: #5f6368; }
.dp-mock__alarm { color: #c5221f; font-weight: 800; }
.dp-mock__check { display: flex; align-items: flex-start; gap: 8px; }
.dp-mock__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 2px solid #1a73e8;
  border-radius: 3px;
  background: #fff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.dp-mock__box--on { background: #1a73e8; }
.dp-mock__box--on::after { content: "\2713"; }
.dp-mock__switch {
  flex: none;
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: #bdc1c6;
}
.dp-mock__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}
.dp-mock__switch--on { background: #1a73e8; }
.dp-mock__switch--on::after { left: 18px; }
.dp-mock__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dp-mock__btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  background: #1a73e8;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.dp-mock__btn--go { background: #137333; }
.dp-mock__btn--quiet { padding: 6px 4px; background: none; color: #9aa0a6; font-weight: 400; font-size: 0.78rem; text-decoration: underline; }
.dp-mock__total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 2px solid #202124;
  font-size: var(--fs-base);
  font-weight: 800;
}
.dp-mock__banner {
  padding: 8px 12px;
  border-radius: 6px;
  background: #fce8e6;
  color: #a50e0e;
  font-weight: 700;
}
.dp-mock__panel { padding: 12px 14px; border: 1px solid #dadce0; border-radius: 8px; background: #f8f9fa; }
.dp-mock__mailhead { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid #eceff2; }
.dp-mock__modal { max-width: 420px; margin-inline: auto; padding: 16px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); text-align: center; }
.dp-mock__modal .dp-mock__actions { flex-direction: column; }

/* A dashboard's top nav with a bell and a red count (false notifications) */
.dp-mock__nav { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-bottom: 10px; border-bottom: 1px solid #eceff2; color: #5f6368; }
.dp-mock__navitem { display: inline-flex; align-items: center; gap: 4px; }
.dp-mock__navitem--bell { color: #202124; font-weight: 700; }
.dp-mock__bell {
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v4l-2 4h16l-2-4V8a6 6 0 0 0-6-6zm-2 17a2 2 0 0 0 4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v4l-2 4h16l-2-4V8a6 6 0 0 0-6-6zm-2 17a2 2 0 0 0 4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dp-mock__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #d93025;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* The numbered pins and the notes they point to */
.dp-pin {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.45em;
  height: 1.45em;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--color-coral-2);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
  text-decoration: none;
}
.dp-mock figcaption { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }
.prose .dp-notes { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.prose .dp-notes li { display: flex; gap: 0.6rem; margin: 0; color: var(--color-ink-2); }
.dp-notes .dp-pin { margin: 0.1em 0 0; }

/* Phones: let the mock-up run almost edge to edge, like .diagram */
@media (max-width: 560px) {
  .dp-mock__frame { margin-inline: calc(4px - var(--gutter)); border-radius: var(--radius-sm); }
  .dp-mock__body { padding: 14px 12px 16px; }
  .dp-mock__hero { font-size: 2rem; }
}

/* Commons photos on the guides: tall ones (a receipt, an hourglass) are shown
   narrower and centred, so they don't push the text a full screen down. */
.photo--portrait img { width: auto; max-width: min(100%, 380px); margin-inline: auto; }

/* Timelines and charts drawn on a 500-520 wide viewBox: let them grow past
   the 470px .dgm cap so their 15px text stays 15px. */
.dgm.dgm--wide { max-width: 560px; }
/* Phones: rather than shrink a wide drawing's text below ~13px, keep it at
   480px and let the frame scroll sideways, like .table-wrap does for tables. */
@media (max-width: 560px) {
  .diagram--wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .diagram--wide .dgm.dgm--wide { min-width: 480px; }
}