/* ==========================================================================
   writing-timeline.css – the Writing Timeline page's own pieces (helper 5, Oct 4, 2026)
   1. The hero card: the timeline growing (Graysen, thread 314a8cc6)
   2. Sketches over the three "Your timeline, your call" columns (thread 0361637e)
   3. The Grammarly Authorship comparison and its APA reference (threads 78bff9e3, 238ecf69)
   ========================================================================== */

/* ---- 1. The timeline growing ----
   The chart is drawn the way the product draws it: each shaded band is a writing session, as wide as the
   time spent; time away is squeezed into the small breaks. Its height is five ruled lines, so the card's
   bottom rule is the chart's baseline and every row below stays on the ruling. */
.wtl .d-row .label { white-space: nowrap; }
.wtl .d-row > span:last-child { font-variant-numeric: tabular-nums; }
.wtl__plot { position: relative; height: calc(var(--line) * 5); }
.wtl__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.wtl__bands rect { fill: rgba(39, 102, 155, 0.08); }
.wtl__area { fill: rgba(39, 102, 155, 0.17); }
.wtl__line { fill: none; stroke: var(--blue-500); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wtl__gap { fill: none; stroke: var(--blue-300); stroke-width: 1.5px; stroke-dasharray: 1.5 2.5; vector-effect: non-scaling-stroke; }
.wtl__dot, .wtl__pen { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.wtl__pen { display: none; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #fff; box-shadow: 0 0 0 2px var(--blue-500), 0 0 0 5px rgba(39, 102, 155, 0.18); }
.wtl__days { position: relative; height: var(--line); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--ink-2); }
.wtl__day { position: absolute; top: 0; line-height: var(--line); white-space: nowrap; }
.wtl__day--end { right: 0; }
@media (max-width: 400px) {
  .wtl__day--9 { display: none; }   /* Day 9 and Day 11 would touch on the narrowest phones */
  .wtl .icard__head { font-size: 0.875rem; line-height: 1.15; }   /* a two-line title still sits inside the card's header band */
}
@media (max-width: 359px) { .wtl .d-row { white-space: nowrap; align-items: center; } .wtl .d-row .label { letter-spacing: 0.08em; } }

/* Armed (set inline before first paint, only when motion is allowed): the start of the story */
.wtl--armed .wtl__v { visibility: hidden; }
.wtl--armed.wtl--live .wtl__v { visibility: visible; }
.wtl--armed .wtl__sweep { width: 0; }
.wtl--armed .wtl__dot { transform: scale(0); transition: transform 0.35s var(--ease-out); }
.wtl--armed .wtl__dot.is-on { transform: scale(1); }
.wtl--armed .wtl__day { opacity: 0; transition: opacity 0.4s ease; }
.wtl--armed .wtl__day.is-on { opacity: 1; }
.wtl--armed.wtl--playing .wtl__pen { display: block; }
.wtl--armed .mark { background-color: transparent; transition: background-color 0.6s ease; }
.wtl--armed.wtl--done .mark { background-color: var(--highlight, #ffd266); }

.wtl__replay { font: inherit; color: var(--link); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wtl__replay:hover { color: var(--blue-700); }

/* ---- 2. Sketches over "Your timeline, your call" ----
   Small in-world drawings, one per column, all the same height so the checklists line up. */
.wt-sk { position: relative; height: 9rem; margin: 0.25rem 0 1.25rem; }
.wt-sheet { position: absolute; background: #fff; box-shadow: 0 1px 2px rgba(33, 37, 41, 0.12), 0 14px 26px -16px rgba(33, 37, 41, 0.45); }

/* Just for you: the summary, saved as a PDF */
.wt-sk--pdf .wt-sheet { left: 0.25rem; top: 0.5rem; width: 9.25rem; height: 8.5rem; padding: 0.6rem 0.7rem; transform: rotate(-1.2deg); }
.wt-sk--pdf .wt-sheet::after { content: ""; position: absolute; right: 0; top: 0; width: 1.1rem; height: 1.1rem; background: linear-gradient(225deg, var(--gray-50) 50%, var(--gray-300) 50%); }   /* a folded corner */
.wt-sk__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.6875rem; line-height: 1.2; color: var(--ink); }
.wt-sk__sub { display: block; font-size: 0.5625rem; line-height: 1.3; color: var(--ink-2); margin: 0.15rem 0 0.35rem; }
.wt-sk__mini { display: block; width: 100%; height: 2.6rem; }
.wt-sk__mini .b { fill: rgba(39, 102, 155, 0.09); }
.wt-sk__mini .l { fill: none; stroke: var(--blue-500); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wt-sk__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 0.4rem; margin-top: 0.4rem; font-size: 0.5625rem; line-height: 1.25; color: var(--ink-2); }
.wt-sk__stats b { display: block; font-family: var(--font-display); font-size: 0.75rem; color: var(--ink); }
.wt-sk__file { position: absolute; left: 10.75rem; top: 1.1rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; line-height: 1.45; color: var(--ink-2); }
.wt-sk__file b { display: inline-block; font-weight: 400; background: var(--highlight, #ffd266); color: var(--ink); padding: 0 0.3em; border-radius: 2px; margin-bottom: 0.3rem; }

/* At a school that uses it: the foot of a title page, with the link under the date */
.wt-sk--tp .wt-sheet { left: 0.25rem; right: 2.75rem; top: 1.5rem; bottom: 0.5rem; padding: 0 0.75rem 0.55rem; display: flex; flex-direction: column; justify-content: flex-end; font-family: "Times New Roman", Tinos, Times, serif; color: #000; text-align: center; overflow: hidden; }
.wt-sk--tp .wt-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.75rem; background: linear-gradient(#fff 15%, rgba(255, 255, 255, 0)); }   /* the page carries on above: the title, the name */
.wt-sk--tp .wt-sheet p { margin: 0; font-size: 0.6875rem; line-height: 2.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-sk--tp .wt-sheet .link span { background: var(--highlight, #ffd266); padding: 0.1em 0.25em; }
.wt-sk__panel { position: absolute; right: 0; top: 0; width: 10.5rem; background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 0.45rem 0.6rem 0.5rem; box-shadow: 0 10px 22px -14px rgba(10, 40, 81, 0.5); font-size: 0.6875rem; line-height: 1.3; color: var(--ink); }
.wt-sk__panel b { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.wt-sk__box { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; vertical-align: -0.15rem; margin-right: 0.35rem; background: var(--blue-500) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4.6 10.6l3.4 3.6 7.6-9' stroke='%23ffffff' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; }

/* What it covers: words arriving all at once read as a jump in the line */
.wt-sk--paste .wt-sheet { inset: 0 0 0.5rem 0.25rem; padding: 0.55rem 0.75rem 0.5rem; display: flex; flex-direction: column; }
.wt-sk--paste .wt-sk__head { display: flex; justify-content: space-between; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.wt-sk--paste .wt-sk__chart { position: relative; flex: 1; margin-top: 0.35rem; }
.wt-sk--paste .wt-sk__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wt-sk--paste .wt-sk__chart .b { fill: rgba(39, 102, 155, 0.08); }
.wt-sk--paste .wt-sk__chart .l { fill: none; stroke: var(--blue-500); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wt-sk--paste .wt-sk__chart .j { fill: none; stroke: var(--ink); stroke-width: 1px; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.wt-sk__note { position: absolute; right: 44%; top: 34%; font-size: 0.6875rem; line-height: 1.25; color: var(--ink); white-space: nowrap; }
.wt-sk__note::after { content: ""; display: inline-block; width: 0.6rem; height: 1px; background: var(--ink); vertical-align: 0.3em; margin-left: 0.2rem; }   /* a short leader to the jump */
.wt-sk__note span { background: var(--highlight, #ffd266); padding: 0 0.25em; border-radius: 2px; }
.wt-sk__axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.04em; color: var(--ink-3); margin-top: 0.2rem; }

@media (max-width: 860px) { .wt-sk { max-width: 24rem; } }

/* ---- 3. Grammarly Authorship vs. the Writing Timeline ---- */
.wt-vs { margin-top: 1.75rem; }
.wt-vs .table th:first-child { width: 22%; }
.wt-vs .table th:nth-child(2), .wt-vs .table th:nth-child(3) { width: 39%; }
.wt-judge { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.wt-judge h3 { font-size: var(--text-xl, 1.5rem); margin-bottom: 0.5rem; }
.wt-judge > p { color: var(--ink-2); max-width: 40rem; }
.wt-judge .c-where { margin-top: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; }
.wt-judge .c-where h4 { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.25; margin: 0 0 0.375rem; }
@media (max-width: 720px) { .wt-judge .c-where { grid-template-columns: minmax(0, 1fr); } }

/* The source, set as an APA 7 reference: Times, double spaced, a hanging indent, on a slip of paper */
.wt-refslip { margin-top: clamp(2.5rem, 5vw, 3.5rem); background: #fff; box-shadow: 0 1px 2px rgba(33, 37, 41, 0.1), 0 14px 26px -18px rgba(33, 37, 41, 0.45); padding: 0.75rem 1.5rem 0.9rem; font-family: "Times New Roman", Tinos, Times, serif; font-size: 1rem; line-height: 2; color: #000; max-width: 40rem; }
.wt-refslip .h { margin: 0; text-align: center; font-weight: 700; }
.wt-refslip .ref { margin: 0; padding-left: 2.25em; text-indent: -2.25em; overflow-wrap: anywhere; }
.wt-refslip .ref a { color: inherit; text-decoration: none; }
.wt-refslip .ref a:hover { text-decoration: underline; }
@media (max-width: 480px) { .wt-refslip { padding: 0.6rem 1rem 0.75rem; font-size: 0.9375rem; } }