/* ============================================
   NAJJAK.COM - shared section page chrome
   Used by every subpage so they read like the
   homepage: h2 bars, timelines, compact lists.
   ============================================ */

/* ---- search + status ---- */

.sec-controls {
    margin: 6px 0 2px;
}

.sec-search {
    background: #fff;
    border: 2px solid;
    border-color: #7fa4d0 #fff #fff #7fa4d0;
    color: #0b1020;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: 12px;
    padding: 4px 6px;
    width: 100%;
}

.sec-search:focus {
    outline: 2px solid #4a7fc4;
    outline-offset: -2px;
}

.sec-status {
    color: #64748b;
    font-size: 10px;
    font-style: italic;
    margin: 3px 0 0;
}

.sec-status:empty { display: none; }
.sec-status.is-error { color: #b91c1c; font-style: normal; font-weight: bold; }

/* ---- lists ---- */

/* numbering comes from the markup, not a CSS counter, so filtering
   rows out never renumbers the badges away from the timeline */
.sec-num li::before { content: attr(data-i); }

.sec-hidden { display: none !important; }

/* single column variant, used where a row expands into a detail card */
.sec-single {
    grid-template-columns: 15px minmax(0, 1fr) auto;
}

.sec-list li[role="button"] {
    cursor: pointer;
}

.sec-list li[role="button"]:focus-visible {
    outline: 1px dotted #1a3f77;
    outline-offset: 1px;
}

/* clickable rows read like the homepage's links */
.sec-list li[role="button"] .sec-title {
    color: #1d4ed8;
    text-decoration: underline;
}

.sec-list li[role="button"]:hover .sec-title,
.sec-list li[role="button"]:focus-visible .sec-title {
    color: #cc0000;
    text-decoration: none;
}

.sec-list li.is-active .sec-title {
    color: #0b1020;
    font-weight: bold;
    text-decoration: none;
}

/* ---- thumbnail lists ---- */

.sec-thumbs {
    grid-template-columns: repeat(2, 96px minmax(0, 1fr) auto);
}

.sec-thumbs li::before { display: none; }

/* shown at the thumbnail's own 96x54 */
.sec-thumb {
    align-self: start;
    background: #0b1020;
    border: 1px solid;
    border-color: #a8c6e8 #1a3f77 #1a3f77 #a8c6e8;
    box-sizing: content-box;
    display: block;
    height: 54px;
    margin-top: 2px;
    width: 96px;
}

.sec-thumb-empty {
    align-items: center;
    color: #8fb5e8;
    display: flex;
    font: 8px "Courier New", monospace;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

/* the opinions grid relies on the homepage's flex rows */
.section-page .op li {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

/* ---- detail row ---- */

.content .sec-list .sec-detail {
    display: block;
    grid-column: 1 / -1;
    margin: 2px 0 6px;
}

.content .sec-list .sec-detail::before {
    content: none;
    display: none;
}

.content .sec-list .sec-detail:empty { display: none; }

/* ---- timeline ---- */

.tl-r i[data-i] { cursor: pointer; }

.tl-r i.is-dimmed,
.tl-r .tl-i.is-dimmed,
.tl-r .tl-e.is-dimmed {
    background: repeating-linear-gradient(-45deg, #d7dfec 0 3px, #eef2f8 3px 6px);
    border-color: #fff #b6c0d1 #b6c0d1 #fff;
    color: #98a3b5;
}

.tl-r i.is-flash {
    animation: sec-flash .9s ease-out;
}

@keyframes sec-flash {
    0%, 40% { background: linear-gradient(180deg, #ffe9a8 0%, #ffc93c 55%, #e0a800 100%); border-color: #fff3cf #8a6400 #8a6400 #fff3cf; color: #4a3600; }
    100% { }
}

.sec-list li.is-flash {
    animation: sec-row-flash .9s ease-out;
}

@keyframes sec-row-flash {
    0%, 40% { background: #ffe9a8; }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .tl-r i.is-flash,
    .sec-list li.is-flash { animation: none; }
}

@media (max-width: 600px) {
    .sec-search { font-size: 16px; }
    .sec-status { font-size: 12px; }
    .sec-single { grid-template-columns: minmax(0, 1fr) auto; }
    .sec-thumbs { grid-template-columns: 96px minmax(0, 1fr) auto; }
    .content .sec-thumbs li { grid-column: span 3; }
    .content .sec-list .sec-detail { grid-column: 1 / -1; }
}

/* ---- the intro, continued (keyframes live in core.css) ---- */

.sec-controls { animation: fly-down .2s var(--ease) .2s both }

.tl { animation: fly-down .2s var(--ease) .23s both }

/* Base delay is the last staggered step, so a timeline or list that
   outgrows the steps below still arrives at the end rather than first. */
.tl-r i { animation: fly-left .095s ease-out both; animation-delay: 0.2675s }

.tl-r i:nth-child(1) { animation-delay: 0.125s }
.tl-r i:nth-child(2) { animation-delay: 0.1325s }
.tl-r i:nth-child(3) { animation-delay: 0.14s }
.tl-r i:nth-child(4) { animation-delay: 0.1475s }
.tl-r i:nth-child(5) { animation-delay: 0.155s }
.tl-r i:nth-child(6) { animation-delay: 0.1625s }
.tl-r i:nth-child(7) { animation-delay: 0.17s }
.tl-r i:nth-child(8) { animation-delay: 0.1775s }
.tl-r i:nth-child(9) { animation-delay: 0.185s }
.tl-r i:nth-child(10) { animation-delay: 0.1925s }
.tl-r i:nth-child(11) { animation-delay: 0.2s }
.tl-r i:nth-child(12) { animation-delay: 0.2075s }
.tl-r i:nth-child(13) { animation-delay: 0.215s }
.tl-r i:nth-child(14) { animation-delay: 0.2225s }
.tl-r i:nth-child(15) { animation-delay: 0.23s }
.tl-r i:nth-child(16) { animation-delay: 0.2375s }
.tl-r i:nth-child(17) { animation-delay: 0.245s }
.tl-r i:nth-child(18) { animation-delay: 0.2525s }
.tl-r i:nth-child(19) { animation-delay: 0.26s }
.tl-r i:nth-child(20) { animation-delay: 0.2675s }

/* Rows cascade on the first paint only: section.js drops the .anim
   class once the intro is over, so filtering never replays it. */
.anim .sec-list li { animation: fly-left .08s ease-out both; animation-delay: 0.326s }

.anim .sec-list li:nth-child(1) { animation-delay: 0.155s }
.anim .sec-list li:nth-child(2) { animation-delay: 0.164s }
.anim .sec-list li:nth-child(3) { animation-delay: 0.173s }
.anim .sec-list li:nth-child(4) { animation-delay: 0.182s }
.anim .sec-list li:nth-child(5) { animation-delay: 0.191s }
.anim .sec-list li:nth-child(6) { animation-delay: 0.2s }
.anim .sec-list li:nth-child(7) { animation-delay: 0.209s }
.anim .sec-list li:nth-child(8) { animation-delay: 0.218s }
.anim .sec-list li:nth-child(9) { animation-delay: 0.227s }
.anim .sec-list li:nth-child(10) { animation-delay: 0.236s }
.anim .sec-list li:nth-child(11) { animation-delay: 0.245s }
.anim .sec-list li:nth-child(12) { animation-delay: 0.254s }
.anim .sec-list li:nth-child(13) { animation-delay: 0.263s }
.anim .sec-list li:nth-child(14) { animation-delay: 0.272s }
.anim .sec-list li:nth-child(15) { animation-delay: 0.281s }
.anim .sec-list li:nth-child(16) { animation-delay: 0.29s }
.anim .sec-list li:nth-child(17) { animation-delay: 0.299s }
.anim .sec-list li:nth-child(18) { animation-delay: 0.308s }
.anim .sec-list li:nth-child(19) { animation-delay: 0.317s }
.anim .sec-list li:nth-child(20) { animation-delay: 0.326s }