/* Epílogo overrides on top of the shared case-study styles. Pink, from the
   wireframes, plus the blocks that only exist here. */

:root{
  --accent:#F49AC1;
  --accent-text:#D9186C;
  --accent-soft:#FDEFF5;
}

/* In progress: the design marks this one yellow */
.cs-status-dot{ border-color:#A87700; }
.cs-status-dot::after{ background:#A87700; }

/* Screens attached to one process step. Three per row, so a three-shot set and
   a six-shot set both land on full rows instead of a ragged last one. */
.ep-media-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start;
  max-width:var(--measure-wide); margin:36px auto 0;
}
.ep-media-grid figure{ margin:0; }
.ep-media-grid img{
  width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:#fff;
}
@media (max-width:700px){ .ep-media-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }

/* App screens come in different shapes, so each one sits in the same frame and
   is cropped from the top, where the screen actually starts. */
.ep-media-grid.is-app{ grid-template-columns:repeat(2,1fr); gap:24px; }
.ep-media-grid.is-app img{
  aspect-ratio:16/11; object-fit:cover; object-position:top center;
  border-color:transparent;
}
@media (max-width:700px){ .ep-media-grid.is-app{ grid-template-columns:1fr; } }

/* Profiles run long, so they get a little more air between them */
.cs-findings.is-profiles ul{ gap:20px; }


/* One card per cut, so each decision reads on its own */
.ep-decisions{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  max-width:var(--measure-wide); margin:32px auto 0; text-align:left;
}
.ep-decision{
  border-radius:16px; border:1px solid var(--line); background:#fff; padding:20px 22px;
}
.ep-decision h4{
  margin:0 0 8px; font-size:15.5px; font-weight:600; color:var(--accent-text);
}
.ep-decision p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
@media (max-width:640px){ .ep-decisions{ grid-template-columns:1fr; } }

/* Tall phone frames, so three fit a row without shrinking to nothing */
.ep-wireframes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  max-width:var(--measure-wide); margin:44px auto 0;
}
.ep-wireframes figure{ margin:0; }
.ep-wireframes img{
  width:100%; display:block; border-radius:14px; border:1px solid var(--line); background:#fff;
}
@media (max-width:700px){ .ep-wireframes{ grid-template-columns:repeat(2,1fr); gap:12px; } }


/* Playable prototype of the app, using the app's own tokens */
.epp{
  --epp-black:#1F1F1B; --epp-g800:#292926; --epp-g700:#34342F;
  --epp-g500:#898982; --epp-g400:#95958F; --epp-g300:#ADADA5;
  --epp-white:#F3F3E9; --epp-primary:#F86624;
  width:min(420px,100%); margin:0 auto; border-radius:26px; overflow:hidden;
  background:var(--epp-black); color:var(--epp-white);
  border:1px solid var(--epp-g700); box-shadow:0 18px 50px rgba(20,18,30,.18);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display:flex; flex-direction:column;
}
.epp-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; font-size:14px; font-weight:600;
  border-bottom:1px solid var(--epp-g700); color:var(--epp-white);
}
.epp-topbar-menu{ color:var(--epp-g400); font-size:16px; }
.epp-screen{
  padding:16px; display:flex; flex-direction:column; gap:14px;
  height:560px; overflow-y:auto; scrollbar-width:thin;
}
.epp-screen::-webkit-scrollbar{ width:6px; }
.epp-screen::-webkit-scrollbar-thumb{ background:var(--epp-g700); border-radius:99px; }

.epp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.epp-stat{
  background:var(--epp-g800); border:1px solid var(--epp-g700); border-radius:16px;
  padding:10px; text-align:center;
}
.epp-stat-label{
  display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:#909089; margin-bottom:2px;
}
.epp-stat strong{ font-size:22px; font-weight:800; }

.epp-card{ background:var(--epp-g800); border:1px solid var(--epp-g700); border-radius:16px; padding:14px; }
.epp-month{ margin:0 0 10px; text-align:center; font-size:14px; font-weight:600; text-transform:capitalize; }
.epp-weekdays,
.epp-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.epp-weekdays span{ text-align:center; font-size:11px; color:var(--epp-g500); padding-bottom:4px; }
.epp-day{
  aspect-ratio:1; border:0; border-radius:10px; cursor:pointer;
  background:var(--epp-g700); color:var(--epp-white); font:inherit; font-size:12px;
  transition:background-color .15s ease, transform .15s ease;
}
.epp-day:hover{ transform:translateY(-1px); }
.epp-day.is-read{ background:var(--epp-primary); color:#1F1F1B; font-weight:600; }
.epp-day.is-empty{ background:transparent; cursor:default; }
.epp-legend{
  margin:12px 0 0; display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--epp-g400);
}
.epp-legend-dot{ width:10px; height:10px; border-radius:4px; background:var(--epp-primary); }

.epp-section-title{ margin:0; font-size:12px; color:var(--epp-g300); }
.epp-covers{ display:flex; gap:10px; }
.epp-cover{
  flex:0 0 auto; width:86px; aspect-ratio:2/3; border-radius:10px; padding:7px;
  display:flex; align-items:flex-start; overflow:hidden;
}
.epp-cover span{
  font-size:9px; line-height:1.25; font-weight:600; color:#F3F3E9;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.epp-tabs{ display:flex; gap:18px; border-bottom:1px solid var(--epp-g700); }
.epp-tab{
  background:none; border:0; cursor:pointer; font:inherit; font-size:13px;
  color:var(--epp-g500); padding:0 0 10px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.epp-tab.is-active{ color:var(--epp-white); border-bottom-color:var(--epp-primary); }

.epp-list{ display:flex; flex-direction:column; gap:10px; }
.epp-book{
  display:flex; gap:12px; align-items:center;
  background:var(--epp-g800); border:1px solid var(--epp-g700); border-radius:14px; padding:10px;
}
.epp-book-cover{ width:42px; height:62px; border-radius:8px; flex-shrink:0; overflow:hidden; }
.epp-book-cover span{ display:none; }
.epp-book-copy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.epp-book-copy strong{ font-size:14px; font-weight:600; }
.epp-book-author{ font-size:12px; color:var(--epp-g400); }
.epp-stars{ font-size:12px; color:var(--epp-primary); letter-spacing:1px; }
.epp-stars-off{ color:var(--epp-g700); }
.epp-badge{
  align-self:flex-start; font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--epp-g300); border:1px solid var(--epp-g700); border-radius:999px; padding:2px 8px;
}

.epp-nav{ display:flex; border-top:1px solid var(--epp-g700); }
.epp-nav-item{
  flex:1; background:none; border:0; cursor:pointer; font:inherit; font-size:13px;
  padding:14px 0; color:var(--epp-g500); transition:color .15s ease;
}
.epp-nav-item.is-active{ color:var(--epp-primary); font-weight:600; }

.ep-prototype{ margin:40px auto 0; max-width:var(--measure); }
.ep-prototype-hint{ text-align:center; font-size:13px; color:var(--gray); margin-top:14px; }

/* Prototype: the daily prompt, friends, profile and search */
.epp-cta{
  display:flex; align-items:center; gap:12px;
  background:var(--epp-g800); border:1px solid var(--epp-g700); border-radius:16px; padding:12px;
}
.epp-cta-icon{
  width:34px; height:34px; border-radius:999px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--epp-g700); color:var(--epp-g400); font-size:13px;
}
.epp-cta.is-done .epp-cta-icon{ background:rgba(248,102,36,.2); color:var(--epp-primary); }
.epp-cta-copy{ flex:1; display:flex; flex-direction:column; min-width:0; }
.epp-cta-question{ font-size:12px; color:var(--epp-g400); }
.epp-cta-copy strong{ font-size:14px; font-weight:600; }
.epp-cta-button{
  border-radius:12px; padding:8px 14px; font:inherit; font-size:13px; font-weight:500; cursor:pointer;
  background:var(--epp-primary); border:1px solid #BF4A15; color:#1F1F1B;
  transition:transform .12s ease;
}
.epp-cta-button:active{ transform:scale(.95); }
.epp-cta.is-done .epp-cta-button{
  background:transparent; border-color:var(--epp-g600); color:var(--epp-g400);
}

.epp-friends{ display:flex; gap:8px; flex-wrap:wrap; }
.epp-friend{
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--epp-g400);
  border:1px solid var(--epp-g700); border-radius:999px; padding:5px 11px 5px 5px;
}
.epp-friend.is-read{ color:var(--epp-white); border-color:var(--epp-primary); }
.epp-avatar{
  width:22px; height:22px; border-radius:999px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--epp-primary); color:#1F1F1B; font-size:11px; font-weight:700;
}
.epp-avatar.is-large{ width:52px; height:52px; font-size:20px; }

.epp-profile{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.epp-profile strong{ font-size:15px; margin-top:8px; }
.epp-handle{ font-size:12px; color:var(--epp-g500); }
.epp-bio{ font-size:12px; color:var(--epp-g400); margin-top:4px; }


.epp-search{
  display:flex; align-items:center; gap:8px;
  background:var(--epp-g800); border:1px solid var(--epp-g700); border-radius:12px; padding:9px 12px;
  color:var(--epp-g500);
}
.epp-search input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  font:inherit; font-size:13px; color:var(--epp-white);
}
.epp-search input::placeholder{ color:var(--epp-g500); }
.epp-empty{ margin:0; font-size:12px; color:var(--epp-g500); }