/* public_html/css/index.css - 2026-05-14 - version 15.2 - Defines the MediaJour index stylesheet. */
.index-page { background: var(--panel-soft); color: var(--text); }
.index-shell { display: grid; gap: 18px; margin: 0 auto; max-width: 1040px; min-height: 100vh; min-width: 0; padding: 24px; width: 100%; }
.index-entry { background: var(--panel-warm); border: 1px solid var(--border); box-shadow: 0 10px 26px var(--shadow); display: grid; gap: 18px; min-width: 0; overflow: hidden; padding: 24px; }
.index-entry-copy { display: grid; gap: 12px; min-width: 0; }
.index-entry-wordmark { color: var(--brand); font-size: 1.06rem; font-weight: 800; letter-spacing: 0; line-height: 1.1; margin: 0; min-width: 0; }
.index-entry-heading { color: var(--text); font-size: 2rem; font-weight: 800; letter-spacing: 0; line-height: 1.12; margin: 0; min-width: 0; }
.index-entry-summary { color: var(--text-soft); font-size: 1rem; line-height: 1.6; margin: 0; max-width: 880px; min-width: 0; }
.index-entry-actions { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
.index-entry-action { background: rgba(255, 255, 255, 0.62); border: 1px solid var(--border); color: var(--text); display: grid; gap: 4px; min-height: 92px; min-width: 0; padding: 14px; text-decoration: none; }
.index-entry-action:hover { border-color: var(--brand); color: var(--text); }
.index-entry-action:focus-visible { outline: 3px solid rgba(8, 118, 111, 0.34); outline-offset: 2px; }
.index-entry-action-label { color: var(--brand); font-size: 1rem; font-weight: 800; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.index-entry-action-meta { color: var(--text-soft); font-size: 0.88rem; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.index-search { align-items: end; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 10px 26px var(--shadow); color: var(--text); display: grid; gap: 16px; grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr); min-width: 0; overflow: hidden; padding: 20px 22px; }
.index-search-copy { display: grid; gap: 6px; min-width: 0; }
.index-search-heading { color: var(--text); font-size: 1.12rem; font-weight: 800; letter-spacing: 0; line-height: 1.2; margin: 0; min-width: 0; }
.index-search-intro { color: var(--text-soft); font-size: 0.96rem; line-height: 1.5; margin: 0; min-width: 0; }
.index-search-form { display: grid; gap: 8px; min-width: 0; }
.index-search-label { color: var(--text); font-size: 0.86rem; font-weight: 800; line-height: 1.2; min-width: 0; }
.index-search-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.index-search-input { background: var(--panel); border: 1px solid var(--border); color: var(--text); font: inherit; min-height: 2.9rem; min-width: 0; padding: 0 12px; width: 100%; }
.index-search-input:focus { border-color: var(--brand); outline: 3px solid rgba(8, 118, 111, 0.18); outline-offset: 0; }
.index-search-submit { align-items: center; background: var(--brand); border: 1px solid var(--brand-soft); color: var(--inverse); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; justify-content: center; line-height: 1.25; min-height: 2.9rem; min-width: 0; overflow-wrap: anywhere; padding: 0 1rem; text-align: center; white-space: normal; }
.index-search-submit:focus-visible { outline: 3px solid rgba(8, 118, 111, 0.34); outline-offset: 2px; }
.index-popular { background: var(--panel); border: 1px solid var(--border); box-shadow: 0 10px 26px var(--shadow); color: var(--text); display: grid; gap: 16px; min-width: 0; overflow: hidden; padding: 22px; }
.index-popular-head { display: grid; gap: 6px; min-width: 0; }
.index-popular-heading { color: var(--text); font-size: 1.15rem; font-weight: 800; letter-spacing: 0; line-height: 1.2; margin: 0; min-width: 0; }
.index-popular-intro { color: var(--text-soft); font-size: 0.96rem; line-height: 1.55; margin: 0; min-width: 0; }
.index-popular-terms { align-items: center; display: flex; flex-wrap: wrap; gap: 0.58rem; min-width: 0; }
.index-popular-term-lead { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); display: inline-flex; font-size: 1.18rem; font-weight: 800; gap: 0.48rem; line-height: 1.25; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 0.68rem 1rem; text-decoration: none; white-space: normal; }
.index-popular-term-major { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); display: inline-flex; font-size: 1.02rem; font-weight: 800; gap: 0.48rem; line-height: 1.25; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 0.6rem 0.9rem; text-decoration: none; white-space: normal; }
.index-popular-term-regular { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); display: inline-flex; font-size: 0.94rem; font-weight: 700; gap: 0.48rem; line-height: 1.25; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 0.54rem 0.84rem; text-decoration: none; white-space: normal; }
.index-popular-term-quiet { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); display: inline-flex; font-size: 0.9rem; font-weight: 700; gap: 0.48rem; line-height: 1.25; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 0.47rem 0.76rem; text-decoration: none; white-space: normal; }
.index-popular-term-small { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); display: inline-flex; font-size: 0.82rem; font-weight: 700; gap: 0.48rem; line-height: 1.25; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 0.41rem 0.72rem; text-decoration: none; white-space: normal; }
.index-popular-term-fine { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); display: inline-flex; font-size: 0.76rem; font-weight: 700; gap: 0.48rem; line-height: 1.25; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 0.37rem 0.66rem; text-decoration: none; white-space: normal; }
.index-topic-groups { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.index-topic-group { border-top: 1px solid var(--border); display: grid; gap: 10px; min-width: 0; padding-top: 14px; }
.index-topic-group-heading { color: var(--text); font-size: 0.94rem; font-weight: 800; letter-spacing: 0; line-height: 1.25; margin: 0; min-width: 0; }
.index-topic-list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.index-topic-chip { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); display: inline-flex; font-size: 0.9rem; font-weight: 700; line-height: 1.25; max-width: 100%; min-height: 2.45rem; min-width: 0; overflow-wrap: anywhere; padding: 0.5rem 0.74rem; text-decoration: none; white-space: normal; }
.index-topic-chip:hover { border-color: var(--brand); color: var(--brand); }
.index-topic-chip:focus-visible { outline: 3px solid rgba(8, 118, 111, 0.34); outline-offset: 2px; }
.index-cookie { background: var(--panel); border: 2px solid var(--brand); box-shadow: 0 14px 32px var(--shadow); color: var(--text); display: grid; gap: 16px; min-width: 0; overflow: hidden; padding: 22px; }
.index-cookie-heading { color: var(--text); font-size: 1.15rem; font-weight: 800; letter-spacing: 0; line-height: 1.2; margin: 0; min-width: 0; }
.index-cookie-requirement { color: var(--text-soft); font-size: 1rem; line-height: 1.55; margin: 0; min-width: 0; }
.index-cookie-warning { background: #f8ddda; border: 1px solid #d7a9a4; color: #5a1714; display: grid; gap: 8px; line-height: 1.45; overflow-wrap: anywhere; padding: 14px 16px; }
.index-cookie-form { display: grid; gap: 12px; min-width: 0; }
.index-cookie-consent { display: grid; gap: 10px; grid-template-columns: 2fr 1fr; min-width: 0; }
.index-cookie-accept { align-items: center; background: var(--brand); border: 1px solid var(--brand-soft); color: var(--inverse); cursor: pointer; display: inline-flex; font: inherit; font-size: 1.05rem; font-weight: 800; gap: 8px; justify-content: center; line-height: 1.25; min-height: 3.25rem; min-width: 0; overflow-wrap: anywhere; padding: 0.82rem 1.1rem; text-align: center; white-space: normal; }
.index-cookie-decline { align-items: center; background: var(--panel); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; gap: 8px; justify-content: center; line-height: 1.25; min-height: 2.85rem; min-width: 0; overflow-wrap: anywhere; padding: 0.72rem 1rem; text-align: center; white-space: normal; }
.index-age { background: var(--panel); border: 1px solid var(--border); box-shadow: 0 10px 26px var(--shadow); color: var(--text); display: grid; gap: 16px; min-width: 0; overflow: hidden; padding: 22px; }
.index-age-heading { color: var(--text); font-size: 1.15rem; font-weight: 800; letter-spacing: 0; line-height: 1.2; margin: 0; min-width: 0; }
.index-age-explanation { color: var(--text-soft); font-size: 1rem; line-height: 1.55; margin: 0; min-width: 0; }
.index-age-warning { background: #f8ddda; border: 1px solid #d7a9a4; color: #5a1714; display: grid; gap: 8px; line-height: 1.45; overflow-wrap: anywhere; padding: 14px 16px; }
.index-age-profile { display: grid; gap: 14px; min-width: 0; }
.index-age-value { display: grid; gap: 8px; max-width: 260px; min-width: 0; }
.index-age-value-label { color: var(--text); font-size: 0.92rem; font-weight: 800; line-height: 1.25; }
.index-age-value-input { background: var(--panel); border: 1px solid var(--border); color: var(--text); font: inherit; min-height: 2.9rem; min-width: 0; padding: 0 12px; width: 100%; }
.index-age-filter { align-items: start; color: var(--text-soft); display: grid; gap: 10px; grid-template-columns: auto 1fr; line-height: 1.55; min-width: 0; }
.index-age-skip { align-items: start; color: var(--text-soft); display: grid; gap: 10px; grid-template-columns: auto 1fr; line-height: 1.55; min-width: 0; }
.index-age-save { align-items: center; background: var(--brand); border: 1px solid var(--brand-soft); color: var(--inverse); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; gap: 8px; justify-content: center; justify-self: start; line-height: 1.25; min-height: 2.85rem; min-width: 0; overflow-wrap: anywhere; padding: 0.72rem 1rem; text-align: center; white-space: normal; }
.index-restart { display: grid; justify-items: start; min-width: 0; }
.index-restart-button { align-items: center; background: var(--panel); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; gap: 8px; justify-content: center; line-height: 1.25; min-height: 2.85rem; min-width: 0; overflow-wrap: anywhere; padding: 0.72rem 1rem; text-align: center; white-space: normal; }
.index-access-panel { background: var(--panel); border: 1px solid var(--border); box-shadow: 0 10px 26px var(--shadow); color: var(--text); display: grid; gap: 16px; min-width: 0; overflow: hidden; padding: 22px; }
.index-access-heading { color: var(--text); font-size: 1.15rem; font-weight: 800; letter-spacing: 0; line-height: 1.2; margin: 0; min-width: 0; }
.index-access-explanation { color: var(--text-soft); font-size: 1rem; line-height: 1.55; margin: 0; min-width: 0; }
.index-access-warning { background: #f8ddda; border: 1px solid #d7a9a4; color: #5a1714; display: grid; gap: 8px; line-height: 1.45; overflow-wrap: anywhere; padding: 14px 16px; }
.index-access { display: grid; gap: 14px; min-width: 0; }
.index-access-choices { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; min-width: 0; }
.index-access-read { align-items: center; background: var(--brand); border: 1px solid var(--brand-soft); color: var(--inverse); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; gap: 8px; justify-content: center; line-height: 1.25; min-height: 3.1rem; min-width: 0; overflow-wrap: anywhere; padding: 0.72rem 1rem; text-align: center; white-space: normal; }
.index-access-register { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; gap: 8px; justify-content: center; line-height: 1.25; min-height: 3.1rem; min-width: 0; overflow-wrap: anywhere; padding: 0.72rem 1rem; text-align: center; white-space: normal; }
.index-access-login { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; gap: 8px; justify-content: center; line-height: 1.25; min-height: 3.1rem; min-width: 0; overflow-wrap: anywhere; padding: 0.72rem 1rem; text-align: center; white-space: normal; }
.index-access-temporary { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; gap: 8px; justify-content: center; line-height: 1.25; min-height: 3.1rem; min-width: 0; overflow-wrap: anywhere; padding: 0.72rem 1rem; text-align: center; white-space: normal; }
.index-guest-panel { background: var(--panel); border: 1px solid var(--border); box-shadow: 0 10px 26px var(--shadow); color: var(--text); display: grid; gap: 16px; min-width: 0; overflow: hidden; padding: 22px; }
.index-guest-heading { color: var(--text); font-size: 1.15rem; font-weight: 800; letter-spacing: 0; line-height: 1.2; margin: 0; min-width: 0; }
.index-guest-explanation { color: var(--text-soft); font-size: 1rem; line-height: 1.55; margin: 0; min-width: 0; }
.index-guest-warning { background: #f8ddda; border: 1px solid #d7a9a4; color: #5a1714; display: grid; gap: 8px; line-height: 1.45; overflow-wrap: anywhere; padding: 14px 16px; }
.index-guest { display: grid; gap: 14px; min-width: 0; }
.index-guest-name { display: grid; gap: 8px; min-width: 0; }
.index-guest-name-label { color: var(--text); font-size: 0.92rem; font-weight: 800; line-height: 1.25; }
.index-guest-name-input { background: var(--panel); border: 1px solid var(--border); color: var(--text); font: inherit; min-height: 2.9rem; min-width: 0; padding: 0 12px; width: 100%; }
.index-guest-continue { align-items: center; background: var(--brand); border: 1px solid var(--brand-soft); color: var(--inverse); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; gap: 8px; justify-content: center; justify-self: start; line-height: 1.25; min-height: 2.85rem; min-width: 0; overflow-wrap: anywhere; padding: 0.72rem 1rem; text-align: center; white-space: normal; }
.site-kicker { align-items: center; background: var(--panel-warm); border: 1px solid var(--border); box-shadow: 0 10px 26px var(--shadow); color: var(--text-soft); display: flex; flex-wrap: wrap; font-size: 0.95rem; gap: 10px; justify-content: space-between; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; padding: 12px 16px; }
.site-kicker-link { color: var(--brand); font-weight: 800; text-decoration: none; }
.site-kicker-link:hover { color: var(--accent); }
.site-owner-footer { align-items: center; background: var(--panel-warm); border: 1px solid var(--border); box-shadow: 0 10px 26px var(--shadow); color: var(--text-soft); display: flex; flex-wrap: wrap; font-size: 0.92rem; gap: 8px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; padding: 14px 16px; }
.site-owner-link { color: var(--brand); font-weight: 800; text-decoration: none; }
.site-owner-link:hover { color: var(--accent); }
.site-owner-separator { color: var(--text-faint); }
@media (max-width: 760px) {
.index-shell { padding: 14px; }
.index-entry { padding: 20px; }
.index-entry-heading { font-size: 1.72rem; }
.index-entry-actions { grid-template-columns: 1fr; }
.index-entry-action { min-height: 0; }
.index-search { align-items: stretch; grid-template-columns: 1fr; padding: 18px; }
.index-search-row { grid-template-columns: 1fr; }
.index-search-submit { width: 100%; }
.index-popular-terms { justify-content: center; }
.index-topic-groups { grid-template-columns: 1fr; }
.index-topic-list { align-items: stretch; flex-direction: column; }
.index-topic-chip { width: 100%; }
.index-popular-term-lead { width: 100%; }
.index-popular-term-major { width: 100%; }
.index-popular-term-regular { width: 100%; }
.index-popular-term-quiet { width: 100%; }
.index-popular-term-small { width: 100%; }
.index-popular-term-fine { width: 100%; }
.index-cookie-consent { grid-template-columns: 1fr; }
.index-cookie-accept { width: 100%; }
.index-cookie-decline { width: 100%; }
.index-age-value { max-width: none; }
.index-age-save { width: 100%; }
.index-restart-button { width: 100%; }
.index-access-choices { grid-template-columns: 1fr; }
.index-access-read { width: 100%; }
.index-access-register { width: 100%; }
.index-access-login { width: 100%; }
.index-access-temporary { width: 100%; }
.index-guest-continue { width: 100%; }
.site-kicker { align-items: flex-start; flex-direction: column; }
.site-owner-footer { align-items: flex-start; flex-direction: column; }
}