/* contents.css — the education contents on aijanitor.si (toc-w6). Every selector under .toc (module-standard); colours only from
   /tokens.css custom properties, with fallbacks. Look = owner-OK'd storyboard of option A (specimen index), ported from
   docs/mockups/splash-to-contents/options/{shared/toc.css, A-specimen-index/index.html}; theme = matrix-unit explainer (owner "beautiful").
   toc-f4: architectures list is one column below 900 px. */
.toc { --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color-scheme: inherit; }
.toc__rule { height: 1px; background: var(--amber, #F2A900); transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); margin: 0 0 1.6rem; }
.toc__plate { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: .6rem 3rem; border-top: 1px solid var(--edge, rgba(242,169,0,.45)); padding: 1.4rem 0 1.6rem; opacity: 0; transform: translateY(14px); transition: opacity .6s ease var(--d, 0s), transform .6s ease var(--d, 0s); }
.toc__num { font: 700 5.2rem/.8 var(--serif); color: transparent; -webkit-text-stroke: 1.5px var(--amber, #F2A900); letter-spacing: -.05em; }
.toc__gname { font: italic 700 1.9rem/1.05 var(--serif); color: var(--lime, #e8ff72); margin: .7rem 0 .3rem; }
.toc__gsub { font: .95rem/1.5 var(--serif); color: var(--muted, #b8c1a6); margin: 0; }
.toc__gcount { font-size: .7rem; letter-spacing: .16em; color: var(--muted, #b8c1a6); text-transform: uppercase; margin-top: .6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: e; }
.toc li { border-top: 1px solid var(--line, rgba(242,169,0,.25)); padding: .7rem 0; display: grid; grid-template-columns: 2.4rem minmax(0,1fr) auto; gap: .2rem 1rem; align-items: baseline; counter-increment: e; }
.toc li:first-child { border-top: 0; }
.toc li::before { content: counter(e, decimal-leading-zero); font: italic .95rem var(--serif); color: var(--amber, #F2A900); }
.toc__t { font: 1.15rem/1.3 var(--serif); color: var(--text, #f4f8e9); text-decoration: none; }
a.toc__t:hover .toc__short { color: var(--lime, #e8ff72); }
a.toc__t:focus-visible { outline: 3px solid var(--focus, #fff); outline-offset: 4px; }
.toc__short { font-weight: 700; }
.toc__rest { color: var(--muted, #b8c1a6); }
.toc__one { grid-column: 2 / 3; font-size: .78rem; line-height: 1.45; color: var(--muted, #b8c1a6); }
.toc__badge { grid-column: 3; grid-row: 1; display: inline-block; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; padding: .15rem .45rem; border: 1px dashed var(--edge, rgba(242,169,0,.45)); color: var(--muted, #b8c1a6); white-space: nowrap; }
.toc__badge--live { border: 1px solid var(--lime, #e8ff72); color: var(--lime, #e8ff72); }
.toc__soon { opacity: .62; }
.toc li.is-read .toc__t::after { content: "  · read"; font: italic .8rem var(--serif); color: var(--muted, #b8c1a6); }
.toc__plate--arch ol { columns: 2; column-gap: 2.4rem; }
.toc__plate--arch li { break-inside: avoid; }
/* phases (render(state).phase) */
.toc--contents .toc__rule { transform: scaleX(1); }
.toc--contents .toc__plate { opacity: 1; transform: none; }
.toc--handoff .toc__rule { transform: scaleX(.62); transition: none; }
.toc--handoff .toc__plate:nth-of-type(-n+2) { opacity: 1; transform: none; transition: none; }
.toc--handoff .toc__plate:nth-of-type(n+3) { opacity: .28; transform: translateY(10px); transition: none; }
.toc--waiting { opacity: 0; }
@media (max-width: 900px) { .toc__plate--arch ol { columns: 1; } }
@media (max-width: 760px) {
  .toc__plate { grid-template-columns: 1fr; }
  .toc__num { font-size: 3.6rem; }
  .toc li { grid-template-columns: 2rem minmax(0,1fr); }
  .toc__badge { grid-column: 2; grid-row: auto; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .toc *, .toc { transition-duration: .001ms !important; animation-duration: .001ms !important; } }