/* Shared component colors: dark is the default even if a preference script is
   unavailable. Keep the magazine surfaces and imagery; repair legacy fallbacks. */
:root{--panel:#20282b;--text:#f2eee6;--card:#1c2427;--field:#121a20;--link:#ffb675}
html[data-theme="light"]{--panel:#f2f3ed;--text:#26322d;--card:#fffdf8;--field:#fffefa;--link:#91420f}

/* Older server-rendered panels must not mix a pale surface with dark-mode text. */
html:not([data-theme="light"]) :is(.hero,.about-panel,.siem-profile,.siem-server-host){background:var(--panel);color:var(--ink)}
html:not([data-theme="light"]) :is(.hero-copy>p,.about-panel p,.siem-profile p,.siem-server-host p){color:#c1c7bf}
html[data-theme="light"] :is(.hero,.about-panel){background:#f1efe6;color:var(--ink)}
html[data-theme="light"] :is(.hero-copy>p,.about-panel p){color:#52615b}
.hero-label{color:#27362c}

/* The card, label and private newsroom components use the same paired tokens. */
.image-disclosure{background:var(--panel);color:var(--text)}
html[data-theme="light"] :is(.newsroom-stats strong,.desk-person){color:#91420f}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input,textarea,select{max-width:100%}
select option{background:var(--field);color:var(--ink)}

/* Sharing must stay a full-width field followed by usable wrapping actions. */
.article-tools{flex-wrap:wrap;min-width:0;align-items:center}
.article-tools :is(.share-link-label,.share-link){flex:1 0 100%;min-width:0;max-width:100%}
.article-tools .share-link-label{margin:0}
.article-tools .share-link{width:100%;overflow:hidden;text-overflow:ellipsis}
.article-tools .button{white-space:normal}
.article-tools input:focus-visible{overflow:auto;text-overflow:clip}

/* Logical alignment keeps the same layout readable in Arabic. */
html[dir="rtl"] .article-tools{text-align:start}
html[dir="rtl"] :is(.source-box ol,.source-box ul){padding-left:0;padding-inline-start:1.6em}
html[dir="rtl"] .follow-note{border-left:0;border-inline-start:3px solid var(--orange);border-radius:12px 0 0 12px}
html[dir="rtl"] .reader-invite,html[dir="rtl"] .article .body{text-align:start}
@media(forced-colors:active){.theme-toggle,.article-tools .button,.intl-languages summary{border:1px solid ButtonText}.image-disclosure{background:Canvas;color:CanvasText}}

/* Small phones and folded windows: secondary text stays legible in WebKit too. */
@media(max-width:760px){
 body{font-size:16px}
 .topline,.follow-btn,.theme-toggle,.theme-label,.intro-line,.intro-line strong,.eyebrow,
 .welcome-copy .eyebrow,.welcome-copy .text-link,.hero-small,.editor-note,.robot-caption,
 .section-head>a,.section-head .text-link,.feature-overlay .tag,.feature-overlay>span,
 .feature-overlay>span:last-child,.stack-item span,.stack-item .eyebrow,
 .editor-byline .editor-names,.editor-byline .editor-role,.editor-byline .editor-credit-label,
 .news-latest .editor-names,.news-latest .editor-role,.news-latest .editor-credit-label,
 .news-host>span,.news-intro .news-host>span,.news-copy .fine,
 .home-aside .eyebrow,.home-aside .text-link,.robot-persona,.redactie-caption,
 .redactie-hero-image figcaption,.world-strip .eyebrow,.world-strip>a span,
 .newsletter .eyebrow,.fine,.publication-date,.coverage-label,.article-photo figcaption,
 .source-box p,.ai-image-badge,.image-disclosure,.card .eyebrow,.card .article-meta,
 footer .fine,footer>div:nth-child(2){font-size:12px;line-height:1.6}
 .welcome-copy p,.feature-overlay p,.news-copy p,.news-latest p,.card p,
 .home-aside p,.category-card p,.newsletter p,.content-block p,.reader-invite p,
 footer p{font-size:16px;line-height:1.7}
 .welcome-copy .actions{flex-wrap:wrap}
 input[type="search"],input[type="email"],input[type="text"],textarea,select{font-size:16px}
}
@media(max-width:760px){
 .welcome-compact .welcome-copy .eyebrow,.site-nav .rubric-menu-links a,
 :is(.newsletter,.longread-invite,.home-aside,.welcome-copy) .text-link{font-size:12px;line-height:1.6}
}