/* ---------- Paper & Ink Tokens ---------- */
:root{
  --background:         #F5F3EB; /* warm paper cream */
  --background-hover:   #EFEDE5; /* row hover tint */
  --foreground:         #111111; /* ink */
  --muted-foreground:   #6B6B6B; /* for blurbs/dates */
  --rule:               #D1D5DB; /* left timeline rule */
  --card-white:         #FFFFFF; /* featured cards */
  --card-soft:          #FAFAF7; /* soft card bg */
  --soft-border:        #D4D3CB; /* warm gray-beige */
  --soft-border-hover:  #C0BDAD; /* olive-tan hover */
  --hard-border:        #000000; /* black line work */
}

/* ---------- Base ---------- */
body {
  background: var(--background);
  color: var(--foreground);
  padding-left: 1rem; /* pushes everything right */
}
/* Mobile gutters: small, even on both sides */
@media (max-width: 767px){
  body { padding-inline: 8px; }
}
::selection{ background:#111; color:#fff; }

/* ---------- Links w/ underline emphasis ---------- */
.ink-link{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.ink-link:hover{
  text-decoration-thickness: 2px;
}
.ink-link--active{
  text-decoration-thickness: 3px; /* looks "selected" */
}

/* ---------- Timeline ---------- */
.timeline{
  border-left: 1px solid var(--rule);
  position: relative;
  --line-top-gap: calc(1rem + 0.75rem); /* hide line above first bullet */
}

.timeline::before,
.timeline::after{
  content: "";
  position: absolute;
  left: -1px;
  width: 1px;
  height: 24px;
}

.timeline::before{
  top: 0;
  left: -1px;
  width: 1px;
  height: var(--line-top-gap);
  background: var(--background); /* masks the border-left */
}

.timeline::after{
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--background));
}

.timeline-item{
  position: relative;
}

.timeline-item .bullet{
  position: absolute;
  width: 7px;
  height: 7px;
  background: #111;
  border-radius: 1px;

  /* NEW: aligns exactly with the left border line */
  left: -4px; /* was -42px, now positioned relative to border */

  /* NEW: vertical alignment tweak */
  top: 0.75rem; /* matches padding in cards */

  outline: 2px solid var(--background);
}

/* Dotted line after last bullet (Stage 4) */
.timeline-item:last-child::after {
  content: "";
  position: absolute;
  left: -1px;                 /* exactly over the 1px rule */
  top: calc(0.75rem + 8px);   /* just below the 7px bullet + 1px gap */
  width: 1px;                 /* crisp, no anti-aliasing */
  height: 96px;               /* length of dotted tail; adjust */
  background-color: var(--background); /* hides the solid rule beneath gaps */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rule) 0 4px,        /* 4px dash */
    transparent 4px 12px      /* 8px gap */
  );
  background-repeat: no-repeat;
  background-position: left top;
}

/* ---------- Cards ---------- */
.card{
  background: var(--card-white);
  border: 1px solid var(--hard-border);
  box-shadow: 3px 3px 0 var(--hard-border);
  transition: box-shadow .15s ease-in-out;
}
.card:hover{
  box-shadow: 7px 7px 0 var(--hard-border);
}

.card-soft{
  background: var(--card-soft);
  border: 1px solid var(--soft-border);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.card-soft:hover{
  border-color: var(--soft-border-hover);
  box-shadow: 5px 5px 0 var(--soft-border-hover);
  background: #fff;
}

/* ---------- Muted text helper ---------- */
.text-muted{ color: var(--muted-foreground); }

/* ---------- Footer line ---------- */
.footer-line{ border-top: 1px solid #000; }

/* Permanent inline highlight (looks like selection) */
.ink-mark{
  background:#111;          /* ink */
  color:#fff;               /* paper */
  padding:0 .250rem;        /* small horizontal inset */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; /* keeps background/padding on wrapped lines */
}

/* Mobile */
@media (max-width: 640px) {
  .ink-link {
    text-underline-offset: 5px;
  }
}

/* ---------- Popover for Dashboard ---------- */
.popover{ position: relative; display: inline-block; }
.popover-card{
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  top: 100%;
  background: var(--card-white);
  border: 1px solid var(--hard-border);
  box-shadow: 3px 3px 0 var(--hard-border);
  padding: .5rem .75rem;
  min-width: 16rem;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.popover-title{ font-weight: 600; font-size: .825rem; margin-bottom: .25rem; }
.popover-text{ font-size: .75rem; color: var(--muted-foreground); }
/* .popover:hover .popover-card,
.popover:focus-within .popover-card{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(16px);
} */
/* Hover/focus behavior disabled for Dashboard link popover; we only show when pinned. */
/* @media (hover: hover) and (pointer: fine) {
  .popover:hover .popover-card,
  .popover:focus-within .popover-card{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(16px);
  }
} */
/* small caret */
.popover-card::before{
  content: "";
  position: absolute;
  top: -5.785px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--card-white);
  border-left: 1px solid var(--hard-border);
  border-top: 1px solid var(--hard-border);
  transform: translateX(-50%) rotate(45deg);
}

/* Click-toggle states */
.popover[data-pinned="true"] .popover-card{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(16px);
}
/* Force-hide even if hovered, used momentarily to allow closing while cursor remains */
.popover[data-pinned="false"] .popover-card{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(20px) !important;
}

/* ---------- Star suffix (simple) ---------- */
.star-right{ white-space: nowrap; }
  .star-right::after{
    content: '★';
    display: inline-block;
    margin-left: .4ch;
    font-size: 1.40em; 
    color: #000;
    opacity: 1;
    transform: translateY(-0.25em); /* tiny upward nudge */
  }

/* ---------- Utility classes ---------- */
.offset-underline{
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* Root font bump for homepage (all viewports) */
html:has(.timeline) {
  font-size: 108%;
}

/* Put the CTA link on its own line on mobile */
@media (max-width: 640px) {
  .cta-mobile-block {
    display: block;
    margin-bottom: 0.15rem; /* optional spacing */
  }
}

/* ---------- Dashboard preview (index bottom) ---------- */
.dashboard-preview-wrap{
  margin-top: 1rem;
}
.dashboard-preview-link{ display: block; }
.dashboard-preview-img{
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--hard-border);
  border-bottom: none; /* no bottom border per request */
  border-radius: 12px;
  /* fade out towards the bottom while keeping rounded corners */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 99%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 99%);
  transition: transform .15s ease, filter .15s ease;
}

/* Hover/keyboard focus: make image pop slightly */
.dashboard-preview-link:hover .dashboard-preview-img,
.dashboard-preview-link:focus-visible .dashboard-preview-img{
  transform: translateY(-2px) scale(1.01);
  filter: drop-shadow(3px 3px 0 var(--hard-border));
}

/* Subtle entrance animation */
.fade-in-up{
  opacity: 0;
  transform: translateY(8px);
  animation: fadeInUp 700ms ease-out 120ms forwards;
}
@keyframes fadeInUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}