/* Suomi Magazine article component contract. Loaded after the site shell CSS. */
.article-body{container:article/inline-size;min-width:0}
.article-body,.article-body *{box-sizing:border-box}
.article-body>:where(article,.news-content,.n24-article,.n24-article-content),
.article-body :where(.news-content,.news-grid-wrap,.n24-wrap,.n24-article,.n24-article-content){display:block;width:100%!important;max-width:100%!important;margin-inline:0;padding-inline:0;background:transparent;box-shadow:none}
.article-body :where(p,li,dd,td,th){overflow-wrap:break-word}
.article-body :where(figure,img,video,iframe,embed,object,svg){max-width:100%}
.article-body figure{margin:1.7em 0}
.article-body figcaption{margin-top:.65em;color:var(--muted);font:13px/1.5 var(--sans)}
.article-body :where(pre,code){max-width:100%}
.article-body pre{overflow:auto;padding:18px;background:var(--ink);color:var(--paper);font:14px/1.55 ui-monospace,monospace}

/* Editorial callouts */
.article-body :where(.n24-summary,.n24-snapshot-block,.n24-card,.n24-note,.n24-tip,.n24-warning,.correction,.scl-ref){position:relative;width:100%!important;max-width:100%!important;margin:1.55em 0;padding:20px 22px;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:3px;background:var(--wash);box-shadow:none;color:var(--ink);font:15px/1.65 var(--sans)}
.article-body :where(.n24-tip){background:#eef3e9;border-left-color:#58734d}
.article-body :where(.n24-warning){background:#f4e8df;border-left-color:#a24d36}
.article-body :where(.n24-note){background:#edf1f2;border-left-color:#56717e}
.article-body :where(.n24-note-label,.n24-tip-label,.n24-warning-label,.n24-label,.label){display:block;margin:0 0 8px;color:var(--accent);font:750 11px/1.35 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.article-body :where(.n24-summary,.n24-snapshot-block,.n24-card,.n24-note,.n24-tip,.n24-warning,.correction,.scl-ref)>:first-child{margin-top:0}
.article-body :where(.n24-summary,.n24-snapshot-block,.n24-card,.n24-note,.n24-tip,.n24-warning,.correction,.scl-ref)>:last-child{margin-bottom:0}

/* Grids are restricted to known direct-card containers. */
.article-body :where(.n24-grid,.n24-grid-4,.n24-overview-grid,.n24-clarity-grid,.overview-grid,.n24-columns,.news-grid,.wp-block-columns){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:16px;width:100%!important;max-width:100%!important;margin:1.5em 0!important;padding:0!important}
.article-body :where(.n24-grid,.n24-grid-4)>.n24-grid-item,
.article-body .n24-grid>.n24-grid-card,
.article-body .n24-overview-grid>.n24-overview-item,
.article-body .n24-clarity-grid>*:not(style),
.article-body .overview-grid>.wp-block-column,
.article-body .n24-columns>.n24-column,
.article-body .news-grid>.news-box,
.article-body .wp-block-columns>.wp-block-column{min-width:0;width:auto!important;max-width:none!important;margin:0!important;padding:18px;border:1px solid var(--line);border-radius:3px;background:#fff;font:15px/1.55 var(--sans)}
.article-body :where(.n24-grid-label,.n24-grid-title,.n24-overview-label,.grid-heading,.box-title){display:block;color:var(--accent);font:750 11px/1.35 var(--sans);letter-spacing:.075em;text-transform:uppercase}
.article-body :where(.n24-grid-value,.n24-overview-value){display:block;margin-top:7px;color:var(--ink);font:700 22px/1.2 var(--sans)}
.article-body :where(.n24-grid-text,.news-box-content){margin-top:8px}
.article-body .news-grid-wrap{margin:1.7em 0}
.article-body .news-grid-wrap>.grid-heading{margin-bottom:12px;font-size:13px}
.article-body .news-box-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.article-body .box-num{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font:750 11px var(--sans)}

/* Lists, timelines and comparison modules */
.article-body :where(.n24-list,.n24-ul,.n24-ol,.n24-insights-list,.updates-list,.confirmed-list,.rumor-list){margin:1.2em 0;padding-left:1.35em}
.article-body :where(.n24-timeline,.timeline-list){position:relative;margin:1.6em 0;padding:0 0 0 24px;border-left:2px solid var(--line);list-style:none}
.article-body :where(.n24-timeline-item,.timeline-list>li){position:relative;margin:0 0 22px;padding:0 0 0 8px}
.article-body :where(.n24-timeline-item,.timeline-list>li):before{content:"";position:absolute;left:-33px;top:.55em;width:10px;height:10px;border:3px solid var(--paper);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.article-body :where(.n24-timeline-date,.n24-date){display:block;color:var(--accent);font:750 11px/1.4 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.article-body :where(.n24-comparison,.n24-comparison-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:16px;margin:1.6em 0}
.article-body :where(.n24-comparison-col,.n24-comparison-column){min-width:0;padding:20px;border:1px solid var(--line);background:#fff;font:15px/1.6 var(--sans)}

/* Quotes */
.article-body :where(blockquote,.n24-blockquote){position:relative;width:100%!important;max-width:100%!important;margin:1.6em 0;padding:22px 24px 22px 30px;border:0;border-left:5px solid var(--accent);background:var(--warm);color:var(--ink);font:600 20px/1.55 var(--serif)}
.article-body blockquote>:first-child{margin-top:0}
.article-body blockquote>:last-child{margin-bottom:0}
.article-body blockquote cite{display:block;margin-top:12px;color:var(--muted);font:13px/1.5 var(--sans)}

/* Tables remain semantic and scroll as one keyboard-accessible region. */
.article-body .table-scroll{width:100%!important;max-width:100%!important;margin:1.6em 0;overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid var(--line);border-radius:3px;background:#fff;box-shadow:0 8px 24px rgb(23 44 56/5%);scrollbar-width:thin}
.article-body .table-scroll:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.article-body .table-scroll table{width:max-content!important;min-width:100%;max-width:none!important;margin:0!important;border:0;border-collapse:collapse;background:#fff;font:14px/1.5 var(--sans)}
.article-body .table-scroll :where(th,td){min-width:9rem;padding:13px 14px!important;border:0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left!important}
.article-body .table-scroll th{position:relative;background:var(--wash);color:var(--ink);font-weight:750}
.article-body .table-scroll tr:last-child>td{border-bottom:0}
.article-body .wp-block-table{width:100%;max-width:100%;overflow:visible}

/* Old two-column layout tables become normal reading flow on small screens. */
@container article (max-width:560px){
 .article-body .table-scroll:has(td[style*="50%"]){overflow:visible;border:0;background:transparent;box-shadow:none}
 .article-body .table-scroll:has(td[style*="50%"]) table,
 .article-body .table-scroll:has(td[style*="50%"]) tbody,
 .article-body .table-scroll:has(td[style*="50%"]) tr,
 .article-body .table-scroll:has(td[style*="50%"]) td{display:block;width:100%!important;min-width:0!important}
 .article-body .table-scroll:has(td[style*="50%"]) td{margin-bottom:14px;padding:16px!important;border:1px solid var(--line);background:#fff}
}

/* Native FAQ/details */
.article-body :where(details,.n24-details,.n24-faq-item){width:100%!important;max-width:100%!important;margin:12px 0;border:1px solid var(--line);border-radius:3px;background:#fff;font:15px/1.6 var(--sans)}
.article-body :where(details,.n24-details,.n24-faq-item)>summary{position:relative;min-height:52px;padding:15px 48px 15px 18px;cursor:pointer;color:var(--ink);font-weight:750;list-style:none}
.article-body :where(details,.n24-details,.n24-faq-item)>summary::-webkit-details-marker{display:none}
.article-body :where(details,.n24-details,.n24-faq-item)>summary:after{content:"+";position:absolute;right:18px;top:50%;translate:0 -50%;color:var(--accent);font:700 22px/1 var(--sans)}
.article-body :where(details,.n24-details,.n24-faq-item)[open]>summary:after{content:"–"}
.article-body :where(details,.n24-details,.n24-faq-item)>:not(summary){margin-inline:18px}
.article-body :where(details,.n24-details,.n24-faq-item)>:last-child{margin-bottom:18px}
.article-body .article-toc{margin:0 0 2em;background:var(--wash)}
.article-body .article-toc ol{margin:0 18px 18px;padding-left:1.2em}

/* Legacy charts keep their data widths but cannot escape the article. */
.article-body .graph-container{width:100%!important;max-width:100%!important;margin:1.5em 0;padding:18px;border:1px solid var(--line);background:#fff;font:14px/1.45 var(--sans)}
.article-body .bar-container{display:grid;grid-template-columns:minmax(7rem,34%) minmax(0,1fr);align-items:center;gap:12px;width:100%!important;max-width:100%!important;margin:9px 0}
.article-body .bar{min-width:2px;max-width:100%!important;padding:5px 8px;background:var(--accent);color:#fff;border-radius:2px;font:700 11px/1.3 var(--sans)}

@container article (max-width:460px){
 .article-body :where(.n24-grid,.n24-grid-4,.n24-overview-grid,.n24-clarity-grid,.overview-grid,.n24-columns,.news-grid,.wp-block-columns,.n24-comparison,.n24-comparison-grid){grid-template-columns:1fr}
 .article-body :where(.n24-summary,.n24-snapshot-block,.n24-card,.n24-note,.n24-tip,.n24-warning,.correction,.scl-ref){padding:17px}
 .article-body :where(blockquote,.n24-blockquote){padding:19px 18px 19px 22px;font-size:18px}
 .article-body .bar-container{grid-template-columns:1fr;gap:5px}
}