/* 21st component ports: see component-credits.html. Slider and scroll timelines are untouched. */
/* Publisher identity and publication date. */
.narrative-scene .ambient-story .research-source{display:flex;align-items:center;gap:10px;margin:0 0 12px;min-width:0}
.narrative-scene .research-source img{width:72px;height:28px;object-fit:contain;object-position:left center;border-radius:0;background:white;padding:3px}
.narrative-scene .research-source b{font-size:11px;color:#19364f;line-height:1.3}
.narrative-scene .research-source time{margin-left:auto;white-space:nowrap;color:#416481;font-size:10px}
.narrative-scene .source-node{width:86px;height:70px;gap:2px;padding:8px 4px;align-content:center}
.narrative-scene .source-node img{width:68px;height:32px;border-radius:0;object-fit:contain}
.narrative-scene .source-node time{font-size:9px;line-height:1.25;white-space:nowrap;color:#416481}
.selected-story .selected-source-date{font-size:11px;line-height:1.4;margin:8px 0 0;color:#416481;text-align:center}
/* Compact avatar/name/title stack adapted from 21st ravikatiyar162/profile-card-1.
   Keep the existing flipper, back face, photos and scroll-driven match state. */
.narrative-scene .voice-card{height:170px;min-height:0;align-self:center}
.narrative-scene .voice-face.voice-front{display:flex;flex-direction:column;align-items:center;padding:18px 12px 42px;gap:0}
.narrative-scene .voice-front .voice-company{display:none}
.narrative-scene .voice-front .person-photo{width:54px;height:54px;margin:0 auto 10px;flex:none}
.narrative-scene .voice-front .profile-detail h3{margin:0 0 4px;font-size:17px;line-height:1.2}
.narrative-scene .voice-front .profile-detail p{font-size:11px;line-height:1.35;margin:0}
.narrative-scene .voice-front:after{height:26px;bottom:10px;font-size:14px}
/* Restore contrast inside the dark distribution card. */
#distribution.benefit-card>h3{color:#f5f9fd}
#distribution.benefit-card>p,#distribution.benefit-card>.benefit-index{color:#d9e9f7}
/* Port of 21st NavListCard: rounded 16px surface, padded title, spaced list rows. */
.component-list{width:100%;border-radius:16px;background:#fff;padding:16px 0 8px;box-shadow:0 0 0 1px #0a0a0a0d,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;color:#182f47}
.component-list-title{padding:0 20px;font-size:16px;font-weight:600;line-height:1.4;margin:0}
.component-list-title>span{display:block;font-size:12px;font-weight:400;line-height:1.5;color:#416481;margin-top:6px}
.component-list ul{list-style:none;margin:16px 0 0;padding:0 8px}
.component-list li{margin:4px 0}
.component-list-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px;border-radius:10px;font-size:14px;line-height:1.4;background:#f4f8fc}
.list-step{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#e2edf7;font-size:11px;color:#264e71}
.list-status{margin-left:auto;padding-left:8px;white-space:nowrap;font-size:11px;color:#416481}
.benefit-card .approval-preview{max-width:410px;margin:35px auto 55px;padding:25px;border:1px solid #c6d6e6;border-radius:17px;box-shadow:0 6px 10px #182f4604,0 24px 40px -20px #1c375233}
.benefit-card .approval-preview ul{padding:0}
.benefit-card .approval-preview .component-list-title{padding:0}
.portal-body .reporting-list{max-width:none;box-shadow:none;padding:0}
.reporting-list .component-list-title{padding:0;font-size:26px;letter-spacing:-.5px}
.reporting-list ul{padding:0;margin-top:24px}
.reporting-list .component-list-row{padding:18px 20px;gap:16px}
.reporting-list strong{font-size:16px;font-weight:600}
.reporting-list .list-detail{display:block;margin-top:4px;color:#416481;font-size:14px;line-height:1.6}
/* Port of 21st brijr/accordion-1: single collapsible column, left-aligned triggers,
   spacious answers. Native details preserves keyboard and no-JS operation. */
.faq .component-accordion{display:flex;flex-direction:column;gap:16px;padding-top:0}
.faq .component-accordion .faq-answer{border:1px solid #c8d9e8;border-radius:12px;background:#fff;padding:0;margin:0;overflow:hidden}
.faq .component-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;min-height:60px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;line-height:1.5;text-align:left}
.faq .component-accordion summary::-webkit-details-marker{display:none}
.faq-chevron{font-size:24px;font-weight:400;line-height:1;flex:none;transition:transform .2s}
.faq details[open] .faq-chevron{transform:rotate(45deg)}
.faq .faq-content{padding:0 20px 22px;max-width:100%}
.faq .faq-content p{font-size:16px;line-height:1.7;color:#355776}
.faq .component-accordion summary:hover{background:#f5f9fc}
@media(min-width:1100px){.faq .faq-content{max-width:85%}}
@media(max-width:900px){
 .narrative-scene .voice-card{height:142px;min-height:0}
 .narrative-scene .voice-face.voice-front{padding:10px 8px 31px}
 .narrative-scene .voice-front .person-photo{width:35px;height:35px;margin-bottom:6px}
 .narrative-scene .voice-front .profile-detail h3{font-size:13px;margin-bottom:3px}
 .narrative-scene .voice-front .profile-detail p{font-size:10px}
 .narrative-scene .voice-front:after{height:21px;bottom:6px;font-size:12px}
 .narrative-scene .source-node{width:65px;height:58px;padding:5px 2px}
 .narrative-scene .source-node img{width:55px;height:27px}
 .narrative-scene .source-node time{font-size:7px}
 .narrative-scene .research-source img{width:49px;height:24px}
 .narrative-scene .research-source b{font-size:10px}
 .narrative-scene .research-source time{font-size:9px}
 .benefit-card .approval-preview{padding:17px;margin:8px auto 35px}
}
@media(max-width:500px){.approval-preview .component-list-row{flex-wrap:wrap;gap:8px}.approval-preview .list-status{padding-left:32px;width:100%;margin:0}.faq .component-accordion summary{padding:18px;font-size:15px}.faq .faq-content{padding:0 18px 20px}}
@media(prefers-reduced-motion:reduce){.faq-chevron{transition:none}.narrative-scene .voice-face.voice-front{display:none}.narrative-scene .voice-card{height:auto;min-height:260px}}
/* ICO supplies a white header mark; give it the same ink tone as other publishers. */
.narrative-scene img[src="assets/sources/ico.svg"]{filter:brightness(0);background:transparent}
.narrative-scene .source-node time{font-size:9px;white-space:normal;text-align:center;letter-spacing:0}
@media(max-width:900px){.narrative-scene .source-node time{font-size:8px;line-height:1.15}}