/* Extreme Personalization: styles for this topic's components only. */
.item.live.on { pointer-events: auto; }

/* The memory field: one frame-sized layer that holds the ribbon. */
.ep-field {
  position: relative;
  width: 1440px;
  height: 1024px;
  pointer-events: none;
}
.item.live.on .ep-field { pointer-events: none; }

/* The ribbon: the paper on a frame-sized canvas. */
.ep-take { position: absolute; inset: 0; }
.ep-take > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.ep-ribbon { pointer-events: auto; cursor: grab; }
.ep-ribbon.held { cursor: grabbing; }
.ep-ribbon.pointing { cursor: pointer; }
/* over a chart of days the pointer is a crosshair, as charting apps show it */
.ep-ribbon.scrubbing { cursor: crosshair; }

/* A place opened in full, over the paper: the ribbon dims and softens behind,
   and the card rises in on the spring. It sits above the sentence of topics. */
.ep-place {
  /* reaching well past the frame, so the dimming has no edge on any window */
  position: absolute;
  inset: -600px;
  z-index: 5;
  display: grid;
  place-items: start center;
  padding-top: 750px;
  background: rgba(10, 9, 8, .38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s .4s;
}
.ep-place.open { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.ep-place-card {
  position: relative;
  width: 600px;
  padding: 36px 40px 40px;
  border-radius: 32px;
  background: #F7F4EF;
  box-shadow: 0 2px 4px rgba(20, 18, 17, .08), 0 30px 80px rgba(20, 18, 17, .28);
  color: #141211;
  transform: translateY(24px) scale(.96);
  transition: transform .6s var(--spring);
}
.ep-place.open .ep-place-card { transform: none; }
.ep-place-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 18, 17, .06);
  cursor: pointer;
}
.ep-place-close svg { width: 18px; height: 18px; fill: none; stroke: #141211; stroke-width: 2.2; stroke-linecap: round; }
.ep-place-head { display: flex; align-items: center; gap: 20px; }
.ep-place-head canvas { width: 88px; height: 88px; flex-shrink: 0; }
.ep-place-visits { margin: 0 0 6px; font-size: 18px; line-height: 22px; font-weight: 550; color: #8A8580; }
.ep-place-head h4 {
  margin: 0;
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  font-variation-settings: "SERF" 50;
  letter-spacing: -0.01em;
}
.ep-place-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 28px 0 0;
}
.ep-place-facts div { padding: 14px 16px; border-radius: 18px; background: #FFFFFF; }
.ep-place-facts dt { font-size: 15px; line-height: 18px; font-weight: 550; color: #8A8580; }
.ep-place-facts dd { margin: 6px 0 0; font-size: 20px; line-height: 24px; font-weight: 600; }
.ep-place-insight {
  margin: 28px 0 0;
  font-size: 26px;
  line-height: 35px;
  font-weight: 550;
  text-wrap: pretty;
}

/* The receipt: Memory on a phone. The ribbon's cream paper laid flat as one
   long sheet in the page's own flow. The paper fades in where it starts and
   out where it ends, so it has no hard top or foot. */
.ep-receipt { padding: 8px 14px calc(env(safe-area-inset-bottom, 0px) + 150px); }
.ep-sheet {
  padding: 60px 20px 96px;
  background-image:
    linear-gradient(rgba(20, 18, 17, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 18, 17, .05) 1px, transparent 1px),
    linear-gradient(rgba(242, 239, 234, 0), #F2EFEA 52px, #F2EFEA calc(100% - 72px), rgba(242, 239, 234, 0));
  background-size: 22px 22px, 22px 22px, 100% 100%;
  color: #141211;
  font-size: 15px;
  line-height: 20px;
  font-weight: 550;
  font-variation-settings: "SERF" 0;
}
:where(.ep-sheet) :where(b) { font-weight: 600; }
:where(.ep-sheet) :where(em) { font-style: normal; }
:where(.ep-sheet) :where(p, ul, h2, h3, h4, h5, h6, figure) { margin: 0; padding: 0; }
:where(.ep-sheet) :where(ul) { list-style: none; }
:where(.ep-sheet) :where(span, em) { color: #8A8580; }
.ep-sans { color: inherit; font-variation-settings: "SERF" 0; }

/* the title page */
.ep-cover h2 {
  font-size: 36px;
  line-height: 38px;
  font-weight: 600;
  font-variation-settings: "SERF" 50;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ep-cover > p { margin-top: 12px; font-size: 16px; color: #8A8580; }
.ep-cover .ep-rows { margin-top: 26px; }
.ep-rows > * { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(20, 18, 17, .1); }
.ep-rows > :first-child { border-top: 0; }
.ep-cover .ep-rows > * { justify-content: space-between; border-top: 1px solid rgba(20, 18, 17, .1); }
.ep-cover .ep-rows b { font-size: 17px; }
.ep-rows p { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

/* each app's section: its name, what was read, its data, and Quest's advice */
.ep-part { margin-top: 64px; }
.ep-part h3 { font-size: 22px; line-height: 26px; font-weight: 600; }
.ep-count { margin: 4px 0 18px; color: #8A8580; }
.ep-part h4 { margin: 22px 0 10px; font-size: 17px; font-weight: 600; }
.ep-part h6 { margin-bottom: 12px; font-size: 15px; font-weight: 550; color: #8A8580; }
.ep-card {
  padding: 4px 16px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 18, 17, .05), 0 8px 22px rgba(20, 18, 17, .06);
}
.ep-card + .ep-card { margin-top: 12px; }
.ep-card:not(.ep-rows) { padding: 16px; }
.ep-advice { margin-top: 16px; }
.ep-advice > span { font-weight: 600; }
.ep-advice p { margin-top: 6px; font-size: 20px; line-height: 27px; font-weight: 600; font-variation-settings: "SERF" 50; text-wrap: pretty; }
.ep-advice .ep-sans { font-size: 19px; }

/* Locations */
.ep-places canvas { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--tone) 14%, transparent); }
.ep-places em { white-space: nowrap; }

/* Gmail */
.ep-mail { display: block !important; }
.ep-mail p { display: block; margin-top: 2px; }
.ep-kept { margin-top: 8px !important; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--tone) 9%, transparent); }
.ep-kept span { display: block; color: var(--tone); font-weight: 600; }

/* Health */
.ep-stats li { justify-content: space-between; }
.ep-stats b { font-size: 18px; }
.ep-workouts i, .ep-projects i, .ep-counts i { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--tone); }
.ep-right { align-items: flex-end; flex: none !important; }
.ep-right svg { width: 60px; height: 24px; overflow: visible; }
.ep-sheet polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease .3s; }
.arrived polyline { stroke-dashoffset: 0; }

/* Calendar */
.ep-day h5 { margin-bottom: 6px; font-size: 17px; font-weight: 600; }
.ep-day li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0 7px 12px; border-left: 3px solid var(--tone); margin-top: 6px; }
.ep-day li span, .ep-day li em { flex-shrink: 0; white-space: nowrap; }
.ep-day li span { width: 64px; }
.ep-day li b { flex: 1; }

/* Mercury */
.ep-balance > * { display: block; }
.ep-balance b { margin-top: 4px; font-size: 32px; line-height: 38px; }
.ep-balance em { color: #1E8E5A; }
.ep-balance svg { width: 100%; height: 70px; margin-top: 12px; }
.ep-balance polyline { stroke: #5266EB; }
.ep-payments li > b { white-space: nowrap; }
.ep-payments .ep-in { color: #1E8E5A; }

/* GitHub */
.ep-squares { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; }
.ep-squares i { aspect-ratio: 1; border-radius: 2px; }
.ep-counts { display: flex; justify-content: space-between; gap: 8px; }
.ep-counts li { display: flex; flex-direction: column; gap: 2px; }
.ep-counts span { display: flex; align-items: center; gap: 6px; }
.ep-counts b { font-size: 24px; line-height: 30px; }
.ep-bars { display: flex; align-items: flex-end; gap: 2px; height: 90px; margin-top: 14px; }
.ep-bars p { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; transform-origin: 50% 100%; scale: 1 .05; transition: scale .7s var(--spring) calc(.2s + var(--i) * 18ms); }
.ep-bars i { display: block; }
.ep-bars i:last-child { border-radius: 2px 2px 0 0; }
.arrived .ep-bars p { scale: 1 1; }

/* YouTube */
.ep-videos li { align-items: flex-start; }
.ep-videos figure { position: relative; width: 132px; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
.ep-videos img { display: block; width: 132px; height: 74px; object-fit: cover; background: #E4E0D9; }
.ep-videos figure b { position: absolute; right: 5px; bottom: 8px; padding: 0 5px; border-radius: 5px; background: rgba(0, 0, 0, .75); color: #FFFFFF; font-size: 15px; line-height: 20px; }
/* how far you watched, in red along the foot of the picture */
.ep-videos figure i { position: absolute; left: 0; bottom: 0; height: 3px; background: #FF0033; }
.ep-videos p b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep-videos .ep-kept { display: block; }

/* Linear */
.ep-cycle h6 { color: #141211; font-size: 17px; font-weight: 600; }
.ep-progress { position: relative; height: 8px; margin-top: 14px; border-radius: 4px; background: #ECE9E4; overflow: hidden; }
.ep-progress i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transform-origin: 0 50%; scale: .02 1; transition: scale 1s var(--spring) .3s; }
.arrived .ep-progress i { scale: 1 1; }
.ep-projects p { flex-direction: row !important; align-items: center; gap: 10px !important; }
.ep-projects li > span, .ep-issues em { white-space: nowrap; }

/* X */
/* a business account on X has a rounded square picture */
.ep-avatar { display: block; flex-shrink: 0; border-radius: 22%; object-fit: cover; }
.ep-verified { display: inline-block; width: 15px; height: 15px; margin-left: 4px; vertical-align: -2px; border-radius: 50%; background: #E2B719 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.1l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ep-profile { padding-top: 0 !important; overflow: hidden; }
/* X shows a profile's banner at 3:1 */
.ep-profile > img:first-child { display: block; width: calc(100% + 32px); height: auto; aspect-ratio: 3; margin: 0 -16px; object-fit: cover; }
.ep-profile .ep-avatar { width: 64px; height: 64px; margin: -32px 0 8px; box-shadow: 0 0 0 3px #FFFFFF; }
.ep-profile p { margin-top: 8px; font-size: 16px; line-height: 22px; }
.ep-profile p:first-of-type { margin-top: 0; font-size: 19px; font-weight: 650; }
.ep-profile span { display: block; color: #536471; }
.ep-post header { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ep-post header .ep-avatar { width: 32px; height: 32px; margin-right: 6px; }
.ep-post header span { margin-left: 4px; color: #536471; }
.ep-post p { margin: 8px 0 12px; font-size: 16px; line-height: 22px; }
.ep-post > img { display: block; width: 100%; height: 170px; object-fit: cover; border-radius: 12px; background: #E4E0D9; }
.ep-post ul { display: flex; justify-content: space-between; margin-top: 12px; color: #536471; }

/* Pinterest */
.ep-boards { display: flex; gap: 6px; overflow: hidden; margin-bottom: 12px; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.ep-boards li { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; background: rgba(20, 18, 17, .06); white-space: nowrap; }
.ep-boards li.on { background: #141211; color: #FFFFFF; }
.ep-pins { columns: 2; column-gap: 8px; }
.ep-pins img { display: block; width: 100%; height: auto; margin-bottom: 8px; border-radius: 14px; background: #E4E0D9; break-inside: avoid; }

/* each section rises in softly the first time it scrolls into view */
.ep-part { opacity: 0; translate: 0 22px; transition: opacity .6s ease, translate .9s var(--spring); }
.ep-part.arrived { opacity: 1; translate: 0 0; }