/* ==== v24: widgets added post-v23 (tabs, accordion, table, code, icon, quote, slider, search-btn) ==== */
.tabs{ display:flex; flex-direction:column;}
.tab-panel{ border:1px solid #2e2e40; background:#12121c;}
.tab-panel:first-child{ border-radius: var(--radius-md) var(--radius-md) 0 0;}
.tab-panel:last-child{ border-radius: 0 0 var(--radius-md) var(--radius-md);}
.tab-panel + .tab-panel{ border-top:0;}
.tab-title{ display:block; padding: 10px 16px; cursor:pointer; font-family: var(--font-heading); text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; color: var(--color-neutral-500); list-style:none;}
.tab-title::-webkit-details-marker{ display:none;}
.tab-panel[open] .tab-title{ color: var(--color-accent-400); text-shadow: 0 0 8px rgba(0, 229, 255, .55); border-bottom:1px solid #2e2e40;}
.tab-body{ padding: var(--space-md) 16px;}
.accordion{ display:flex; flex-direction:column; gap: var(--space-sm);}
.accordion-panel{ border:1px solid #2e2e40; background:#12121c; border-radius: var(--radius-md);}
.accordion-panel[open]{ border-color: var(--color-accent-800); box-shadow: 0 0 12px rgba(0, 229, 255, .15);}
.accordion-title{ padding: 10px 16px; cursor:pointer; font-family: var(--font-heading); font-size:1rem; color:#f0f0f8; list-style:none;}
.accordion-title::-webkit-details-marker{ display:none;}
.accordion-title::after{ content:"+"; float:right; color: var(--color-accent-400); font-weight:700;}
.accordion-panel[open] .accordion-title::after{ content:"\2013";}
.accordion-body{ padding: 0 16px var(--space-md);}
.table-wrap{ overflow-x:auto;}
.data-table{ width:100%; border-collapse: collapse; font-size:.95rem;}
.data-table caption{ text-align:left; font-family: var(--font-heading); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color: var(--color-accent-400); padding: 0 0 var(--space-sm);}
.data-table th{ text-align:left; font-family: var(--font-heading); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; color: var(--color-accent-300); background:#17172a;}
.data-table th, .data-table td{ padding: 10px 14px; border:1px solid #2e2e40;}
.data-table--striped tbody tr:nth-child(even){ background:#0d0d18;}
.data-table tbody tr:hover{ background:#17172a;}
.code-block{ margin: 0 0 var(--space-md); background:#0d0d18; border:1px solid #2e2e40; border-radius: var(--radius-md); overflow:hidden;}
.code-language{ font-family: 'IBM Plex Mono', ui-monospace, monospace; padding: 6px 14px; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color: var(--color-primary-300); background:#17172a; border-bottom:1px solid #2e2e40;}
.code-block pre{ margin:0; padding: var(--space-md); overflow-x:auto;}
.code-block code{ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size:.9rem; color: var(--color-accent-400); background:none;}
.icon{ display:inline-flex; vertical-align:-.2em;}
.icon svg{ width:1.4em; height:1.4em; filter: drop-shadow(0 0 4px rgba(0, 229, 255, .4));}
.icon--sm svg{ width:1em; height:1em;}
.icon--lg svg{ width:2em; height:2em;}
.icon--primary{ color: var(--color-primary-400);}
.icon--accent{ color: var(--color-accent-400);}
.icon--muted{ color: var(--color-neutral-500);}
.quote{ margin: 0 0 var(--space-md); padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--color-primary-500); background: rgba(201, 29, 146, .06); border-radius: 0 var(--radius-md) var(--radius-md) 0;}
.quote-text{ margin:0; font-size:1.1rem; font-style:italic; color:#f0f0f8;}
.quote-attribution{ margin-top: var(--space-sm); font-family: var(--font-heading); text-transform:uppercase; font-size:.8rem; letter-spacing:.08em; color: var(--color-accent-400);}
.quote-attribution img{ width:40px; height:40px; border-radius:50%; margin-right:10px; vertical-align:middle;}
.slider{ position:relative; margin: 0 0 var(--space-md);}
.slider-track{ display:flex; gap: var(--space-md); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom: var(--space-sm); scrollbar-width:thin;}
.slider-slide{ flex: 0 0 80%; scroll-snap-align:center; border:1px solid #2e2e40; border-radius: var(--radius-lg); overflow:hidden; background:#12121c;}
@media (min-width:768px){ .slider-slide{ flex-basis:46%;}}
.slider-slide img{ display:block; width:100%; height:200px; object-fit:cover; border-bottom:1px solid #2e2e40;}
.slider-card{ padding: var(--space-md);}
.slider-dots{ display:flex; gap:10px; justify-content:center; margin-top: var(--space-sm);}
.slider-dot{ width:10px; height:10px; border-radius:50%; background:#2e2e40; transition: background .2s, box-shadow .2s;}
.slider-dot:hover{ background: var(--color-accent-500); box-shadow: 0 0 6px rgba(0, 229, 255, .6);}
.search-form{ display:flex; gap: var(--space-sm); max-width: 480px;}
.search-form button{ background: var(--color-primary-600); color:#ffffff; border:0; border-radius: var(--radius-sm); padding: 8px 18px; font-family: var(--font-heading); text-transform:uppercase; letter-spacing:.06em; cursor:pointer;}
.search-form button:hover{ background: var(--color-primary-700); box-shadow: 0 0 10px rgba(201, 29, 146, .5);}
/* ==== v24.1 linter-compat additions ==== */
.slider--sm .slider-slide img{ height:160px;}
.slider--md .slider-slide img{ height:220px;}
.slider--lg .slider-slide img{ height:320px;}
.card-icon{ display:inline-flex; margin-bottom: var(--space-sm); color: var(--color-accent-400);}
.card-icon svg{ width:1.6em; height:1.6em; filter: drop-shadow(0 0 5px rgba(0, 229, 255, .45));}
/* v25: hero readability — header.html's neon layer sets subtitle to neutral-300,
   but this palette is INVERTED (low number = dark). Go light: neutral-800 (#d4d0e0).
   .site-main prefix wins specificity over the header template's .hero .hero-subtitle. */
.site-main .hero .hero-subtitle{ color: var(--color-neutral-800); text-shadow: 0 1px 10px rgba(0,0,0,.55);}
/* v25b: ticker is decorative (aria-hidden) but wrapping to 2 lines reads as broken */
.ticker-track{ white-space: nowrap; overflow: hidden; text-overflow: clip;}
/* v25b: hero content was flush to viewport edge — give it the standard container width */
.site-main .hero .hero-inner{ max-width: 1200px;}
.table-caption{ text-align:left; font-family: var(--font-heading); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color: var(--color-accent-400); padding: 0 0 var(--space-sm);}