/* poem-world — polish timeline rail. Pairs with shared/timeline.js. */
.tl-load { padding: 18px 16px; color: var(--ink-faint); font-size: 12.5px; line-height: 1.7; }
.tl-load code { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); }

.tl-head {
  position: sticky; top: 0; z-index: 2;
  padding: 12px 16px 10px; background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
}
.tl-stat { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.tl-stat .k { color: var(--ink-faint); }
.tl-stat b { color: var(--ink); font-weight: 600; margin-right: 8px; }
.spark { display: block; width: 100%; max-width: 260px; height: 34px; margin-top: 6px; overflow: visible; }
.sp-line { fill: none; stroke: var(--sand); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.sp-goal { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.sp-dot { fill: var(--sand); }
.sp-dot.win { fill: #6fbf8f; } .sp-dot.ok { fill: var(--sand); }
.sp-dot.mid { fill: var(--sea); } .sp-dot.low { fill: var(--storm); }

.tl-rounds { padding: 4px 0 28px; }
.rnd { border-bottom: 1px solid var(--line); }
.rnd > summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
  padding: 9px 16px; font-size: 12.5px; user-select: none;
}
.rnd > summary::-webkit-details-marker { display: none; }
.rnd > summary:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rnd .n {
  flex: none; width: 21px; height: 21px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim);
}
.rnd[open] .n { border-color: var(--sand); color: var(--sand); }
.rnd .t { flex: 1 1 auto; color: var(--ink); line-height: 1.45; }
.rnd .sc {
  flex: none; font-family: var(--mono); font-size: 11px; padding: 1px 6px;
  border-radius: 4px; border: 1px solid var(--line); color: var(--ink-dim);
}
.rnd .sc.win { color: #6fbf8f; border-color: #6fbf8f66; }
.rnd .sc.ok  { color: var(--sand); border-color: color-mix(in srgb, var(--sand) 45%, transparent); }
.rnd .sc.mid { color: var(--sea); border-color: color-mix(in srgb, var(--sea) 55%, transparent); }
.rnd .sc.low { color: var(--storm); border-color: color-mix(in srgb, var(--storm) 55%, transparent); }
.rnd .sc.none { color: var(--ink-faint); }

.rnd .body { padding: 2px 16px 16px 46px; font-size: 12.5px; line-height: 1.65; color: var(--ink-dim); }
.rnd .when { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-bottom: 8px; }
.rnd .fld { margin: 0 0 8px; }
.rnd .fld b, .rnd .critic b {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px;
}
.rnd .gap b { color: var(--sand); }
.rnd .noticed { color: var(--ink-faint); }
.rnd .critic {
  margin: 0 0 8px; padding: 8px 11px; border-left: 2px solid var(--sea);
  background: color-mix(in srgb, var(--sea) 8%, transparent); color: var(--ink); border-radius: 0 4px 4px 0;
}
.rnd .fld a { color: var(--sea); }

.rnd .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.rnd .shot { display: block; text-decoration: none; }
.rnd .shot img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  border: 1px solid var(--line); border-radius: 3px; background: var(--bg-sink);
}
.rnd .shot span {
  display: block; font-family: var(--mono); font-size: 9px; color: var(--ink-faint);
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rnd .shot:hover img { border-color: var(--sand); }