/* Complete indexes and reader continuations (Ahrefs site audit, 17 October 2026).
   Written by the server (design/cms/seo_render.py) into articles.html, daily.html, videos.html, ask.html and
   forum.html (.tsl-index), after a Daily or article reader (.ar-continue, the design's own .ed-reader-next and
   .ar-related components) and after a film's detail (.tsl-film-next). Light by intent: the site's tokens and
   type roles (internal-type-v33.css), its rules and its footer's fold rows; nothing animates. */

.tsl-index{--tsl-index-ui:var(--ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif);margin:56px 0 0;padding-top:26px;border-top:1px solid var(--line);color:var(--ink);font-family:var(--tsl-index-ui)}
.tsl-index-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin:0 0 14px}
.tsl-index-kicker{flex-basis:100%;margin:0;font:500 var(--inside-label,13px)/1.5 var(--tsl-index-ui);letter-spacing:.025em;color:var(--muted)}
.tsl-index-head h2{margin:0;font:600 var(--inside-card,28px)/1.2 var(--tsl-index-ui);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.tsl-index-count{margin:0;font:400 var(--inside-meta,14px)/1.5 var(--tsl-index-ui);color:var(--muted)}
.tsl-index-folds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;align-items:start}
.tsl-index-fold{border-bottom:1px solid var(--line)}
.tsl-index-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;cursor:pointer;list-style:none;font:500 16px/1.4 var(--tsl-index-ui);color:var(--ink)}
.tsl-index-fold>summary::-webkit-details-marker{display:none}
.tsl-index-fold>summary>span{flex:none;font-size:21px;font-weight:400;line-height:1;color:var(--muted)}
.tsl-index-fold[open]>summary>span{transform:rotate(45deg)}
.tsl-index-fold>summary:hover{color:var(--accent)}
.tsl-index-fold>summary:focus-visible,.tsl-index-list a:focus-visible,.tsl-film-next a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tsl-index-list{list-style:none;margin:0;padding:0 0 12px}
.tsl-index>.tsl-index-list{border-top:1px solid var(--line);padding:0}
.tsl-index-list li{display:flex;align-items:baseline;justify-content:space-between;gap:4px 18px;padding:10px 0;border-top:1px solid var(--line);font:400 16px/1.45 var(--tsl-index-ui)}
.tsl-index-list li:first-child{border-top:0}
.tsl-index>.tsl-index-list li:first-child{border-top:0}
.tsl-index-list a{color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.tsl-index-list a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.tsl-index-meta{flex:none;font:400 var(--inside-meta,14px)/1.5 var(--tsl-index-ui);color:var(--muted);white-space:nowrap}

/* After a Daily or an article: the same width and gutters as #published-content.article-reader (article-reader.css),
   without its top padding. The script shows its own previous/next inside the reader for a Daily; this copy then steps aside. */
.article-reader.ar-continue{max-width:1188px;margin:0 auto;padding:0 44px 40px;background:transparent;color:var(--ink);font-size:18px}
.article-reader.ar-continue>.ed-reader-next{margin-top:8px}
.article-reader.ar-continue .ar-related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
main:has(#published-content .ed-reader-next:not([hidden])) .ar-continue>.ed-reader-next{display:none}

/* After a film's detail (video.html): the previous and next film, the library between (as .ed-reader-next). */
.tsl-film-next{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:28px;margin:8px 0 48px;border-top:1px solid var(--line);padding-top:28px;font-family:var(--ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif)}
.tsl-film-next>*{min-width:0}
.tsl-film-next a{text-decoration:none;min-height:44px}
.tsl-film-neighbour{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.tsl-film-neighbour>span{font:400 16px/1.5 var(--ui,sans-serif);color:var(--muted)}
.tsl-film-neighbour>strong{font:500 22px/1.3 var(--ui,sans-serif);letter-spacing:-.025em;color:var(--ink);max-width:29ch;overflow-wrap:break-word}
.tsl-film-neighbour:last-child{text-align:right;align-items:flex-end}
.tsl-film-index{display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--accent);border-inline:1px solid var(--line)}
.tsl-film-next a:hover :is(strong,span){color:var(--accent)}

@media(max-width:900px){.article-reader.ar-continue{padding:0 44px 38px}}
@media(max-width:700px){
  .tsl-index{margin-top:40px;padding-top:22px}
  .tsl-index-folds{grid-template-columns:1fr}
  .tsl-index-list li{flex-direction:column;align-items:flex-start;padding:11px 0}
  .tsl-index-meta{white-space:normal}
  .article-reader.ar-continue{padding:0 22px 35px}
  .article-reader.ar-continue .ar-related-grid{grid-template-columns:1fr}
  .tsl-film-next{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  .tsl-film-index{grid-column:1/-1;grid-row:2;justify-content:flex-start;border:0;border-top:1px solid var(--line);padding-top:16px}
  .tsl-film-neighbour>strong{font-size:21px}
}
@media(max-width:360px){.tsl-film-neighbour>strong{font-size:19px}}
@media print{.tsl-index,.ar-continue,.tsl-film-next{display:none!important}}