/*
  style-canvas.css
  Styles specific to The Canvas story page.
  Linked from the-canvas.html — not the master style.css.

  Three line types used in this dialogue:
    p.creator   — the Creator's lines, left-aligned with a left border accent (bright)
    p.ai        — the AI's lines, right-side block with left-aligned text (dim)
    p.direction — stage directions, centered and italic
*/

/* ── Story title and bylines ───────────────────────────────────────────── */

/* Centers the h1 title above the story */
.page-content h1 {
  text-align: center;
  margin-bottom: 8px;   /* tightened — bylines sit close under the title */
}

/* Bylines sit directly under the title as siblings of .story-controls,
   not inside .story. These rules apply to both the static HTML and to
   any bylines rendered inside .story by the versions JS for draft views. */
.story-byline {
  text-align: center;
  font-size: 13px;
  color: #555555;
  font-style: italic;
  margin: 0 0 3px;
}

/* Secondary byline ("co-written with Claude") — slightly dimmer */
.story-byline + .story-byline {
  color: #404040;
  margin-bottom: 0;   /* .story-controls provides the gap below */
}

/* Wraps all dialogue lines on a story page */
.story {
  margin-top: 28px;
}


/* ── Creator lines ─────────────────────────────────────────────────────── */

/* Left-aligned, with a thin vertical accent bar on the left edge.
   The border + padding together create the "indented quote" look.
   Creator is the bright/prominent voice in this layout. */
.story p.creator {
  color: #c0c0c0;
  padding-left: 18px;               /* room between the border and the text */
  border-left: 2px solid #363636;   /* the accent bar — change color to adjust prominence */
  width: 60%;                       /* limits the line width; text wraps within this */
  margin: 0 0 12px;
  line-height: 1.7;
  letter-spacing: 0.02em;           /* subtle letter spacing to make it feel "louder"*/
}

/* ── AI lines ──────────────────────────────────────────────────────────── */

/* Right-side block: margin-left: auto pushes the box to the right edge.
   width controls how far right it sits — smaller = more offset, less text width.
   text-align: left is intentional: right-alignment creates ragged-left edges on
   wrapped lines which are hard to read. At 55% width, the left edge of the text
   sits clearly in the right portion of the content area without feeling centered.

   To experiment further:
     - Reduce width (e.g. 48%) to push it further right
     - Change text-align to "right" for short one-liner lines (harder to read on long ones)
     - Change border-right color to make the accent more or less visible */
.story p.ai {
  color: #707070;
  margin-left: auto;    /* pushes the block to the right */
  width: 55%;           /* narrower than Creator to feel clearly right-side */
  padding-right: 12px;              /* room between the text and the border */
  border-right: 2px solid #363636;  /* right-side accent bar to mirror Creator's left bar */
  text-align: right;     /* left-aligned within the right block — best for readability */
  margin-bottom: 12px;
  line-height: 1.8;
  font-size: 15px;       /* slightly smaller than Creator to feel more "distant" */
}

/* ── Stage directions ──────────────────────────────────────────────────── */

/* Centered and italic — feels like a script note floating between the lines */
.story p.direction {
  text-align: center;
  font-style: italic;
  color: #4e4e4e;
  font-size: 13px;
  letter-spacing: 0.03em;
  margin: 28px 0 16px;  /* extra space above to separate from the dialogue */
}

/* ── Spacing and transitions ───────────────────────────────────────────── */

/* Extra vertical gap whenever the speaker changes — makes the exchange readable */
.story p.ai + p.creator,
.story p.creator + p.ai {
  margin-top: 28px;
}

/* ── Closing elements ──────────────────────────────────────────────────── */

/* The "—" separator between the last dialogue line and the closing prose */
.story p.story-break {
  text-align: center;
  color: #404040;
  font-size: 18px;
  margin: 32px 0 32px;
}

/* The final prose paragraphs after the dialogue ends */
.story p.epilogue {
  text-align: center;
  color: #585858;
  font-style: italic;
  font-size: 15px;
  margin: 0 0 8px;
  line-height: 1.8;
}

/* ── Sticky controls wrapper ───────────────────────────────────────────────── */

/*
  Wraps the button row, authorship legend, and version timeline so they all
  stick together as one unit when the reader scrolls down.

  background-color matches the page (#202020) so story text scrolling underneath
  doesn't bleed through. A hairline bottom border lifts it off the content below.

  top: 8px gives a small breathing gap from the viewport edge on desktop.
  On mobile (see media query below) we use top: 0 — the header has scrolled
  away and there's no need for the gap.
*/
.story-controls {
  position: sticky;
  top: 8px;
  z-index: 10;
  background-color: #202020;
  padding: 10px 0 6px;
  margin: 16px 0 0;
  border-bottom: 1px solid #282828;  /* subtle separator between controls and story */
}


/* ── Animation toggle button ───────────────────────────────────────────────── */

/* Sits inside .story-controls; inherits the sticky positioning from its parent. */
.anim-toggle {
  display: block;
  margin: -8px auto 24px;   /* negative top pulls it closer to the title */
  background: none;
  border: 1px solid #2e2e2e;
  color: #444444;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 12px;
}

.anim-toggle:hover {
  color: #888888;
  border-color: #444444;
}

/* ── Controls row (button bar inside .story-controls) ───────────────────── */

/* Sits inside the sticky .story-controls wrapper.
   No negative margin needed — .story-controls handles the outer spacing. */
.controls-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0;
}

/* All buttons in the row share the same baseline style from .anim-toggle */
.controls-row .anim-toggle {
  display: inline-block;
  margin: 0;
}

/* Used when versions mode is active — dims the Animate/Static toggle
   since typewriter animation doesn't apply while scrubbing versions */
.anim-toggle:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}


/* ── Version timeline bar ──────────────────────────────────────────────────── */

/* The bar of six tick buttons; hidden via inline style until versions mode is on.
   Lives inside .story-controls so no margin adjustment needed — just center it.
   flex-wrap lets it collapse to two rows on narrow mobile screens. */
#versions-timeline {
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 8px auto 0;
}

/* Individual tick button — deliberately dim to stay subordinate to the story text */
.versions-tick {
  background: none;
  border: 1px solid #252525;
  color: #333333;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 3px 10px;
  transition: color 0.15s, border-color 0.15s;
}

.versions-tick:hover {
  border-color: #3e3e3e;
  color: #666666;
}

/* The currently selected version tick */
.versions-tick.active {
  border-color: #555555;
  color: #888888;
}


/* ── Authorship toggle active state ─────────────────────────────────────────── */

/*
  When authorship color mode is on, the button gets the .active class.
  Slightly brighter text and border so it reads as "pressed" without being loud.
*/
#authorship-toggle.active {
  color: #888888;
  border-color: #555555;
}


/* ── Authorship legend ───────────────────────────────────────────────────────── */

/*
  Appears inside .story-controls when authorship mode is on — between the
  button row and the version timeline. Inherits sticky from the wrapper.
  A single row: "Shehryar" label — gradient bar — "Claude" label.
*/
#authorship-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px auto 4px;
  max-width: 260px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "claude" and "you" end labels — color set via inline style in JS */
.legend-end {
  white-space: nowrap;
  flex-shrink: 0;
}

/* The gradient bar between the two labels */
.legend-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    hsl(35,  75%, 84%),   /* Shehryar end */
    hsl(0,   0%,  90%),   /* white midpoint */
    hsl(200, 65%, 68%)    /* Claude end */
  );
}


/* ── Mobile overrides ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /*
    On mobile the site header scrolls away quickly, so we don't need the 8px
    breathing gap — stick flush to the top of the viewport instead.
    The controls row wraps to two lines if needed (three buttons at ~390px
    fit on one line, but this ensures it works for smaller devices too).
  */
  .story-controls {
    top: 0;
    padding: 8px 0 4px;
  }

  /*
    Allow the button row to wrap on very narrow screens (<360px).
    At 390px all three short labels fit on one row comfortably.
  */
  .controls-row {
    flex-wrap: wrap;
  }

  /* Narrow the legend bar so it stays within 390px safely */
  #authorship-legend {
    max-width: 220px;
  }

}


/* ── Date colophon — sits far below the story, quiet enough to not distract */
.story-date {
  text-align: center;
  font-family: 'Courier New', monospace;  /* monospace feels archival/understated */
  font-size: 11px;
  color: #333333;
  letter-spacing: 0.08em;
  margin-top: 80px;   /* large gap keeps it well clear of the epilogue */
}