/* ============================================================
   65 Before 65 — Public Page Styles
   ============================================================ */

/* --- Custom Properties ------------------------------------ */
:root {
  --bg:          #FEFCF3;
  --coral:       #E8453C;
  --teal:        #00A896;
  --amber:       #FFB703;
  --text:        #000000;
  --muted:       #555555;
  --border:      #DDD8CE;
  --white:       #FFFFFF;
  --entry-bg:    #F7F4EC;
  --serif:       'Playfair Display', Georgia, serif;
  --sans:        'Inter', system-ui, -apple-system, sans-serif;
  --max-w:       800px;
  --radius:      6px;
  --gap:         1.25rem;
  --shadow:      0 1px 4px rgba(0, 0, 0, .07);
  color-scheme:  light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #1c1a14;
    --text:     #e8e3d8;
    --muted:    #8a8478;
    --border:   #3a3628;
    --white:    #252218;
    --entry-bg: #201e16;
    --shadow:   0 1px 4px rgba(0, 0, 0, .35);
  }
}

/* --- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img  { max-width: 100%; display: block; }
ul   { list-style: none; }
button { cursor: pointer; font: inherit; }
a    { color: var(--coral); transition: color .15s; }
a:hover { color: var(--teal); }

/* --- Base ------------------------------------------------- */
body {
  font-family: var(--sans);
  background:   var(--bg);
  color:        var(--text);
  line-height:  1.65;
  font-size:    1rem;
}

/* ============================================================
   SITE HEADER — horizontal: brand left · week center · progress right
   ============================================================ */
.site-header {
  background:    var(--white);
  border-bottom: 2px solid var(--border);
  padding:       .75rem 1.25rem;
  display:       flex;
  align-items:   center;
  gap:           1rem;
}

/* Left: brand block */
.site-header__brand { flex: 1; min-width: 0; }

/* Site title */
.site-title {
  font-family:   var(--serif);
  font-size:     1.45rem;
  font-weight:   700;
  color:         var(--coral);
  line-height:   1.15;
  margin-bottom: .05rem;
}
.site-tagline {
  font-size:  .78rem;
  color:      var(--muted);
  font-style: italic;
  margin:     0;
}

/* Center: week badge */
.week-badge {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  flex-shrink:    0;
}
.week-badge__label {
  font-size:      .6rem;
  font-weight:    600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  -.1rem;
}
.week-badge__number {
  font-family: var(--serif);
  font-size:   2.25rem;
  font-weight: 700;
  color:       var(--amber);
  line-height: 1;
}
.week-badge__sub {
  font-size:  .68rem;
  color:      var(--muted);
  font-style: italic;
  margin-top: .05rem;
}

/* Right: overall progress bar */
.overall-progress {
  flex:      1;
  min-width: 0;
  max-width: 180px;
}
.overall-progress__bar {
  height:        8px;
  background:    var(--border);
  border-radius: 999px;
  overflow:      hidden;
  margin-bottom: .3rem;
}
.overall-progress__fill {
  height:        100%;
  background:    var(--teal);
  border-radius: 999px;
  transition:    width .7s ease;
}
.overall-progress__text {
  font-size: .75rem;
  color:     var(--muted);
  text-align: right;
}

/* ============================================================
   ACTIVITIES LIST
   ============================================================ */
.activities {
  padding: 2rem 0 4rem;
}

.activity {
  background:    var(--white);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  max-width:     var(--max-w);
  margin:        0 auto var(--gap);
  padding:       1.25rem 1.5rem;
  box-shadow:    var(--shadow);
  transition:    box-shadow .2s;
  /* Width of .activity__number min + .activity__header gap — aligns log / progress with title text */
  --activity-label-width: calc(2.2rem + 0.65rem);
}
.activity:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}

/* Completed activities get a teal left accent */
.activity--done {
  border-left: 4px solid var(--teal);
}

/* ============================================================
   ACTIVITY HEADER (number + title + checkbox indicator)
   ============================================================ */
.activity__header {
  display:     flex;
  align-items: baseline;
  gap:         .65rem;
  margin-bottom: .4rem;
}
.activity__number {
  font-family: var(--serif);
  font-size:   1rem;
  font-weight: 700;
  color:       var(--coral);
  min-width:   2.2rem;
  flex-shrink: 0;
}
.activity--done .activity__number {
  color: var(--text);
}
.activity__title {
  font-family: var(--serif);
  font-size:   1.15rem;
  font-weight: 400;
  flex:        1;
  line-height: 1.3;
}
.activity--done .activity__title {
  color: var(--text);
}

/* Numbered-only log goals: match body text in header (incomplete + complete) */
.activity--simple-log .activity__number,
.activity--simple-log.activity--done .activity__number {
  color: var(--text);
}
.activity--simple-log .activity__title,
.activity--simple-log.activity--done .activity__title {
  color: var(--text);
}

/* Checkbox square */
.activity__check {
  flex-shrink:     0;
  width:           1.4rem;
  height:          1.4rem;
  border:          2px solid var(--border);
  border-radius:   4px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .9rem;
  color:           transparent;
}
.activity--done .activity__check {
  background:   var(--teal);
  border-color: var(--teal);
  color:        var(--white);
}

/* ============================================================
   PROGRESS BAR (countdown / countup)
   ============================================================ */
.activity__progress {
  margin:       .5rem 0 .6rem;
  padding-left: var(--activity-label-width);
}
.activity__progress-bar {
  height:        6px;
  background:    var(--border);
  border-radius: 999px;
  overflow:      hidden;
  margin-bottom: .3rem;
}
.activity__progress-fill {
  height:        100%;
  background:    var(--teal);
  border-radius: 999px;
  transition:    width .7s ease;
}
.activity__progress-text {
  font-size:   .8rem;
  color:       var(--muted);
  font-weight: 500;
}
.activity--done .activity__progress-text {
  color: var(--muted);
}

/* ============================================================
   SINGLE NOTE
   ============================================================ */
.activity__note {
  font-size:     .9rem;
  color:         var(--muted);
  margin:        .5rem 0 .25rem;
  padding:       .5rem .75rem;
  border-left:   3px solid var(--border);
  background:    var(--bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height:   1.55;
}
.activity--done .activity__note {
  color:             var(--text);
  border-left-color: var(--teal);
}

/* ============================================================
   ACTIVITY-LEVEL IMAGES & ENTRY IMAGES
   ============================================================ */
.activity__gallery,
.entry__gallery {
  margin-top: .75rem;
}

/* ============================================================
   LOG ENTRIES
   ============================================================ */
.log-entries {
  margin-top:    .75rem;
  border-top:    1px solid var(--border);
  padding-top:   .6rem;
}

ol.log-entries {
  list-style:     decimal;
  padding-left:   1.35rem;
  margin-left:    0;
}

ol.log-entries .log-entry {
  padding-left:   0.15rem;
}

ul.log-entries--simple {
  list-style:     none;
  padding-left:   0;
  margin-left:    0;
}
ul.log-entries--simple .log-entry {
  padding-left: 0;
}

.log-entry {
  padding:       .45rem 0;
  border-bottom: 1px solid var(--border);
}
.log-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.log-entry__main {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         .4rem .6rem;
}

.log-entry__date {
  font-size:   .78rem;
  color:       var(--muted);
  white-space: nowrap;
  min-width:   4rem;
  flex-shrink: 0;
}

.log-entry__text {
  font-size: .95rem;
  flex:      1;
  min-width: 0;
}
/* Linked entry text (affiliate link) */
.log-entry__text a {
  color:                  var(--text);
  text-decoration:        underline;
  text-decoration-color:  var(--border);
  text-underline-offset:  2px;
}
.log-entry__text a:hover {
  color:                 var(--coral);
  text-decoration-color: var(--coral);
}

.activity--done .log-entry__date,
.activity--done .log-entry__num,
.activity--done .log-entry__text,
.activity--done .log-entry__text a {
  color: var(--text);
}
.activity--done .log-entry__text a:hover {
  color:                 var(--coral);
  text-decoration-color: var(--coral);
}

/* Public log: latest + expand for full list */
.log-public {
  margin-top:    .75rem;
  border-top:    1px solid var(--border);
  padding-top:   .6rem;
  padding-left:  var(--activity-label-width);
}
.log-public__peek .log-entry--peek {
  border-bottom: none;
  padding-bottom: 0;
}
.log-public__peek .log-entry__reaction {
  margin-left: 2.5rem;
}
.log-entry__num {
  font-size:   .78rem;
  color:       var(--text);
  white-space: nowrap;
  min-width:   2rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.log-list-toggle {
  display: inline-block;
  margin:  .35rem 0 .25rem;
  padding: 0;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--coral);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.log-list-toggle:hover {
  color: var(--text);
}
.log-public__all {
  margin-top: .35rem;
}
/* Collapsed sections: [hidden] alone can be overridden by aggressive resets */
.log-public__all[hidden],
.log-public__peek[hidden] {
  display: none !important;
}
.log-public__all .log-entries {
  margin-top: .35rem;
  border-top: none;
  padding-top: 0;
}
.log-entries--simple .log-entry__reaction {
  margin-left: 2.5rem;
}

/* ============================================================
   SINGLE IMAGE
   ============================================================ */
.img-single {
  width:  100%;
  margin: 0;
}
.img-single__img {
  width:         100%;
  max-height:    380px;
  object-fit:    contain;
  background:    var(--entry-bg);
  border-radius: var(--radius);
  display:       block;
  cursor:        pointer;
  transition:    opacity .15s;
}
.img-single__img:hover { opacity: .92; }
.img-caption {
  font-size:  .82rem;
  color:      var(--muted);
  font-style: italic;
  text-align: center;
  padding:    .3rem 0 0;
}

/* ============================================================
   CAROUSEL — 3-up thumbnail strip
   ============================================================ */
.carousel { width: 100%; }

.carousel__viewport {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--radius);
}

.carousel__track {
  display:    flex;
  gap:        0;
  transition: transform .35s ease;
}

/* Each slide is 1/3 of the track; padding creates visual gap */
.carousel__slide {
  flex:   0 0 33.333%;
  padding: 0 .2rem;
  cursor: pointer;
  margin: 0;
}
/* On mobile show 2 at once */
@media (max-width: 480px) {
  .carousel__slide { flex: 0 0 50%; }
}
.carousel__slide img {
  width:         100%;
  aspect-ratio:  1;
  object-fit:    cover;
  border-radius: var(--radius);
  display:       block;
  transition:    opacity .15s;
}
.carousel__slide img:hover { opacity: .88; }

/* Arrow buttons — sit outside the image strip */
.carousel__btn {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  background:      rgba(0, 0, 0, .5);
  color:           #fff;
  border:          none;
  width:           1.85rem;
  height:          1.85rem;
  border-radius:   50%;
  font-size:       1.2rem;
  line-height:     1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .15s;
  z-index:         1;
}
.carousel__btn:hover       { background: rgba(0, 0, 0, .75); }
.carousel__btn--prev       { left:  .25rem; }
.carousel__btn--next       { right: .25rem; }

/* Dots + caption below */
.carousel__footer {
  padding:    .4rem 0 .1rem;
  text-align: center;
}
.carousel__dots {
  display:         inline-flex;
  gap:             .35rem;
  justify-content: center;
}
.carousel__dot {
  width:         .45rem;
  height:        .45rem;
  border-radius: 50%;
  background:    var(--border);
  border:        none;
  padding:       0;
  cursor:        pointer;
  transition:    background .15s;
}
.carousel__dot.is-active { background: var(--coral); }
.carousel__caption {
  font-size:  .82rem;
  color:      var(--muted);
  font-style: italic;
  margin-top: .2rem;
  min-height: 1.1em;
}

/* ============================================================
   EXPAND / REACTION
   ============================================================ */
.expand-btn {
  background:    none;
  border:        1px solid transparent;
  padding:       .1rem .45rem;
  font-size:     .78rem;
  color:         var(--muted);
  border-radius: var(--radius);
  transition:    background .15s, color .15s, border-color .15s;
  white-space:   nowrap;
}
.expand-btn:hover {
  background:   var(--bg);
  border-color: var(--border);
  color:        var(--text);
}
.expand-btn[aria-expanded="true"] {
  color:        var(--coral);
  border-color: var(--coral);
}
.log-entry__reaction {
  margin-top:    .4rem;
  margin-left:   4.6rem;    /* align with entry text */
  padding:       .55rem .75rem;
  font-size:     .88rem;
  color:         var(--muted);
  font-style:    italic;
  background:    var(--entry-bg);
  border-left:   3px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height:   1.6;
}

.activity--done .log-entry__reaction {
  color: var(--text);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position:         fixed;
  inset:            0;
  background:       rgba(0, 0, 0, .88);
  z-index:          1000;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  padding:          1.5rem;
  gap:              .75rem;
}
.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width:    100%;
  max-height:   80vh;
  border-radius: var(--radius);
  object-fit:   contain;
  box-shadow:   0 8px 40px rgba(0, 0, 0, .5);
}
.lightbox__close {
  position:   absolute;
  top:        .75rem;
  right:      1rem;
  background: none;
  border:     none;
  color:      rgba(255, 255, 255, .75);
  font-size:  2.5rem;
  line-height: 1;
  padding:    .25rem .5rem;
  transition: color .15s;
}
.lightbox__close:hover { color: #fff; }

.lightbox__caption {
  color:      rgba(255, 255, 255, .85);
  font-size:  .875rem;
  font-style: italic;
  text-align: center;
  max-width:  600px;
}

.lightbox__link {
  color:                  rgba(255, 255, 255, .85);
  font-size:              .875rem;
  text-decoration:        underline;
  text-underline-offset:  3px;
}
.lightbox__link:hover { color: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  text-align:  center;
  padding:     2rem 1.25rem;
  border-top:  1px solid var(--border);
  font-size:   .8rem;
  color:       var(--muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  /* On small screens, hide tagline and shrink progress to keep header one line */
  .site-tagline        { display: none; }
  .overall-progress    { max-width: 110px; }
  .week-badge__number  { font-size: 1.75rem; }
  .site-title          { font-size: 1.2rem; }
  .activity            { padding: 1rem 1.1rem; margin: 0 .75rem var(--gap); }
  .log-entry__reaction { margin-left: 0; }
  .activity__header    { align-items: flex-start; }
}

@media (max-width: 400px) {
  .site-title         { font-size: 1.8rem; }
  .week-badge__number { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}