/* trademaker theme styles. Colours only from tokens (var(--tm-*)), checked by npm run check:contrast. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--tm-bg);
	color: var(--tm-text);
	font-family: var(--tm-font-body);
	font-size: var(--tm-size-base);
	line-height: var(--tm-line);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--tm-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--tm-accent-strong); }
:focus-visible { outline: 2px solid var(--tm-accent-strong); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--tm-font-mono); font-weight: 600; line-height: 1.25; color: var(--tm-text); overflow-wrap: anywhere; }
h1 { font-size: clamp(1.75rem, 4vw + 0.5rem, var(--tm-size-xl)); margin: 0 0 var(--tm-space-2); }
h2 { font-size: var(--tm-size-large); margin: var(--tm-space-4) 0 var(--tm-space-2); }
h3 { font-size: 1.2rem; margin: var(--tm-space-3) 0 var(--tm-space-1); }
code, kbd, pre { font-family: var(--tm-font-mono); font-size: 0.9em; }
:not(pre) > code { background: var(--tm-surface-2); color: var(--tm-text); padding: 0.1em 0.35em; border-radius: var(--tm-radius); }
pre { background: var(--tm-surface-2); color: var(--tm-text); padding: var(--tm-space-2); overflow-x: auto; border: 1px solid var(--tm-border); border-radius: var(--tm-radius); }
hr, .wp-block-separator { border: 0; border-top: 1px solid var(--tm-border); margin: var(--tm-space-4) 0; }
blockquote, .wp-block-quote { margin: var(--tm-space-3) 0; padding: var(--tm-space-1) var(--tm-space-3); border-left: 3px solid var(--tm-accent); background: var(--tm-surface); color: var(--tm-text); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tm-skip:focus { position: fixed; top: var(--tm-space-1); left: var(--tm-space-1); width: auto; height: auto; clip: auto; z-index: 100; padding: var(--tm-space-1) var(--tm-space-2); background: var(--tm-surface); color: var(--tm-text); }

/* Layout */
.tm-wrap { width: min(100% - 2rem, var(--tm-wide)); margin-inline: auto; }
.tm-main { padding-block: var(--tm-space-4); }
.tm-measure { max-width: var(--tm-measure); }

/* Header */
.tm-header { border-bottom: 1px solid var(--tm-border); background: var(--tm-bg); }
.tm-header__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tm-space-2); padding-block: var(--tm-space-2); }
.tm-logo-wrap { margin: 0; }
.tm-logo { font-family: var(--tm-font-mono); font-weight: 700; font-size: 1.35rem; color: var(--tm-text); text-decoration: none; letter-spacing: -0.01em; }
.tm-logo:hover { color: var(--tm-text); }
.tm-logo__cursor { color: var(--tm-accent); }
.tm-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--tm-space-1) var(--tm-space-3); }
.tm-nav a { font-family: var(--tm-font-mono); font-size: var(--tm-size-small); color: var(--tm-text); text-decoration: none; }
.tm-nav a:hover, .tm-nav .current-menu-item > a { color: var(--tm-accent-strong); text-decoration: underline; }
.tm-search { display: flex; gap: var(--tm-space-1); }
.tm-search input[type="search"] { font: inherit; font-size: var(--tm-size-small); background: var(--tm-surface); color: var(--tm-text); border: 1px solid var(--tm-text-muted); border-radius: var(--tm-radius); padding: 0.35rem 0.6rem; min-width: 0; width: 12rem; }
.tm-search button, .tm-button { font-family: var(--tm-font-mono); font-size: var(--tm-size-small); background: var(--tm-surface-2); color: var(--tm-text); border: 1px solid var(--tm-text-muted); border-radius: var(--tm-radius); padding: 0.35rem 0.75rem; cursor: pointer; }

/* Ticker: static row of topics that looks like a quote tape. No animation, no real prices. */
.tm-ticker { border-top: 1px solid var(--tm-border); background: var(--tm-surface); overflow-x: auto; scrollbar-width: thin; }
.tm-ticker__list { list-style: none; margin: 0; padding: 0.35rem 0; display: flex; gap: var(--tm-space-3); white-space: nowrap; font-family: var(--tm-font-mono); font-size: var(--tm-size-small); }
.tm-ticker__item a { color: var(--tm-text); text-decoration: none; }
.tm-ticker__item a:hover { color: var(--tm-accent-strong); }
.tm-ticker__sym { color: var(--tm-accent); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Section tag above sections: $ cat file.md */
.tm-tag { font-family: var(--tm-font-mono); font-size: var(--tm-size-small); color: var(--tm-text-muted); margin: 0 0 var(--tm-space-1); }
.tm-tag::before { content: "$ "; color: var(--tm-accent); }

/* Article */
.tm-article__header { margin-bottom: var(--tm-space-3); }
.tm-meta { font-family: var(--tm-font-mono); font-size: var(--tm-size-small); color: var(--tm-text-muted); display: flex; flex-wrap: wrap; gap: var(--tm-space-1) var(--tm-space-3); margin: 0; }
.tm-meta a { color: var(--tm-accent); }
.tm-article__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tm-space-4); }
@media (min-width: 64rem) {
	.tm-article__layout { grid-template-columns: minmax(0, var(--tm-measure)) 18rem; justify-content: space-between; }
	.tm-toc { position: sticky; top: var(--tm-space-3); align-self: start; grid-column: 2; grid-row: 1; }
	.tm-article__body { grid-column: 1; grid-row: 1; }
}
.tm-content > * { max-width: var(--tm-measure); }
.tm-content p, .tm-content ul, .tm-content ol { margin: 0 0 var(--tm-space-2); }
.tm-content li { margin-bottom: 0.3rem; }
.tm-content h2 { scroll-margin-top: var(--tm-space-3); }

/* Affiliate line */
.tm-affiliate { font-size: var(--tm-size-small); color: var(--tm-text-muted); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); background: var(--tm-surface); padding: var(--tm-space-1) var(--tm-space-2); margin: 0 0 var(--tm-space-3); }
.tm-affiliate a { color: var(--tm-accent); }

/* Table of contents as a file tree */
.tm-toc { min-width: 0; font-family: var(--tm-font-mono); font-size: var(--tm-size-small); background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: var(--tm-space-2); }
.tm-toc__title { margin: 0 0 var(--tm-space-1); color: var(--tm-text-muted); font-size: var(--tm-size-small); font-weight: 400; }
.tm-toc__root { color: var(--tm-text); margin: 0; overflow-wrap: anywhere; }
.tm-toc ol { list-style: none; margin: 0; padding: 0; }
.tm-toc li { position: relative; padding-left: 2.2em; margin: 0.15rem 0; line-height: 1.5; }
.tm-toc li::before { content: "├─"; position: absolute; left: 0.4em; color: var(--tm-text-muted); }
.tm-toc li:last-child::before { content: "└─"; }
/* WCAG 2.2 target size (2.5.8): every TOC link is at least 24px tall. */
.tm-toc a { color: var(--tm-text); text-decoration: none; display: inline-block; min-height: 24px; }
.tm-toc a:hover { color: var(--tm-accent-strong); text-decoration: underline; }

/* Panels: points, calculation example, risk warning, sources */
.tm-panel, .tm-pointit, .tm-laskuesimerkki, .tm-lahteet, .tm-riskivaroitus { background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: var(--tm-space-2) var(--tm-space-3); margin: var(--tm-space-3) 0; }
.tm-pointit > :last-child, .tm-laskuesimerkki > :last-child, .tm-lahteet > :last-child, .tm-riskivaroitus > :last-child { margin-bottom: 0; }
.tm-label { font-family: var(--tm-font-mono); font-size: var(--tm-size-small); color: var(--tm-text-muted); margin: 0 0 var(--tm-space-1) !important; }
.tm-pointit { border-left: 3px solid var(--tm-accent); }
.tm-laskuesimerkki { border-left: 3px solid var(--tm-text-muted); }
.tm-laskuesimerkki table { font-family: var(--tm-font-mono); }
.tm-riskivaroitus { border-left: 3px solid var(--tm-down); }
.tm-riskivaroitus__title { font-family: var(--tm-font-mono); color: var(--tm-down); font-weight: 600; margin: 0 0 var(--tm-space-1); font-size: var(--tm-size-small); }
.tm-riskivaroitus p { font-size: 1rem; }
.tm-lahteet h2 { margin-top: 0; font-size: 1.2rem; }
.tm-lahteet li { overflow-wrap: anywhere; }
.tm-disclaimer { font-size: var(--tm-size-small); color: var(--tm-text-muted); border-top: 1px solid var(--tm-border); padding-top: var(--tm-space-2); margin-top: var(--tm-space-4); max-width: var(--tm-measure); }

/* UKK (details/summary) */
.tm-content details, .wp-block-details { background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: var(--tm-space-1) var(--tm-space-2); margin: 0 0 var(--tm-space-1); }
.tm-content summary { cursor: pointer; font-weight: 600; color: var(--tm-text); }
.tm-content details[open] summary { margin-bottom: var(--tm-space-1); }

/* Tables: trading terminal look */
.tm-content table, .tm-vertailu table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.wp-block-table, .tm-table-scroll { overflow-x: auto; margin: 0 0 var(--tm-space-3); }
.tm-content th, .tm-content td, .tm-vertailu th, .tm-vertailu td { border: 1px solid var(--tm-border); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.tm-content th, .tm-vertailu th { background: var(--tm-surface-2); color: var(--tm-text); font-family: var(--tm-font-mono); font-size: var(--tm-size-small); font-weight: 600; }
.tm-content td, .tm-vertailu td { background: var(--tm-surface); color: var(--tm-text); }
.tm-num, .tm-vertailu td { font-family: var(--tm-font-mono); font-size: var(--tm-size-small); }
.tm-vertailu { margin: var(--tm-space-3) 0; }
.tm-stamp { font-family: var(--tm-font-mono); font-size: var(--tm-size-small); color: var(--tm-text-muted); margin: var(--tm-space-1) 0 0; }

/* Platform card */
.tm-card { background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: var(--tm-space-2) var(--tm-space-3); margin: var(--tm-space-3) 0; }
.tm-card__title { margin: 0 0 var(--tm-space-1); font-size: var(--tm-size-large); }
.tm-card__facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem var(--tm-space-2); margin: 0 0 var(--tm-space-2); font-size: 1rem; }
.tm-card__facts dt { font-family: var(--tm-font-mono); font-size: var(--tm-size-small); color: var(--tm-text-muted); }
.tm-card__facts dd { margin: 0; font-family: var(--tm-font-mono); font-size: var(--tm-size-small); color: var(--tm-text); }
.tm-card__pros-cons { display: grid; gap: var(--tm-space-2); margin-bottom: var(--tm-space-2); }
@media (min-width: 40rem) { .tm-card__pros-cons { grid-template-columns: 1fr 1fr; } }
.tm-card__pros-cons h4 { margin: 0 0 0.25rem; font-size: var(--tm-size-small); }
.tm-card__pros-cons ul { margin: 0; padding-left: 1.2rem; font-size: 1rem; }
.tm-plus { color: var(--tm-accent); }
.tm-minus { color: var(--tm-down); }
@media (max-width: 30rem) { .tm-card__facts { grid-template-columns: 1fr; } .tm-card__facts dd { margin-bottom: 0.35rem; } }

/* CTA */
.tm-cta-wrap { margin: var(--tm-space-2) 0; }
.tm-cta { display: inline-block; font-family: var(--tm-font-mono); font-weight: 700; font-size: 1rem; background: var(--tm-accent); color: var(--tm-bg); border-radius: var(--tm-radius); padding: 0.6rem 1.1rem; text-decoration: none; }
.tm-cta:hover { background: var(--tm-accent-strong); color: var(--tm-bg); }
.tm-cta--disabled { background: var(--tm-surface-2); color: var(--tm-text-muted); border: 1px dashed var(--tm-text-muted); cursor: default; }
.tm-cta--disabled:hover { background: var(--tm-surface-2); color: var(--tm-text-muted); }

/* Placeholders [TARKISTA], [JANIN TARINA: ...], [VILLE PÄÄTTÄÄ: ...] */
.tm-placeholder { background: var(--tm-bg); color: var(--tm-warn); border: 1px dashed var(--tm-warn); border-radius: var(--tm-radius); padding: 0 0.25em; font-family: var(--tm-font-mono); font-size: 0.85em; }

/* Author box */
.tm-author { display: grid; gap: var(--tm-space-1); background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: var(--tm-space-2) var(--tm-space-3); margin: var(--tm-space-4) 0 0; max-width: var(--tm-measure); }
.tm-author__name { font-family: var(--tm-font-mono); font-size: 1.1rem; margin: 0; }
.tm-author p { margin: 0; font-size: 1rem; }

/* Lists of posts */
.tm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tm-space-2); }
.tm-list__item { background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: var(--tm-space-2) var(--tm-space-3); }
.tm-list__item h2 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.tm-list__item h2 a { color: var(--tm-text); text-decoration: none; }
.tm-list__item h2 a:hover { color: var(--tm-accent-strong); text-decoration: underline; }
.tm-list__item p { margin: 0.25rem 0 0; font-size: 1rem; }
.tm-pagination { margin-top: var(--tm-space-3); font-family: var(--tm-font-mono); font-size: var(--tm-size-small); }
.tm-pagination .page-numbers { display: inline-block; padding: 0.2rem 0.5rem; }
.tm-pagination .current { color: var(--tm-text); background: var(--tm-surface-2); border-radius: var(--tm-radius); }

/* Footer */
.tm-footer { border-top: 1px solid var(--tm-border); background: var(--tm-surface); padding-block: var(--tm-space-4); margin-top: var(--tm-space-5); font-size: var(--tm-size-small); color: var(--tm-text-muted); }
.tm-footer p { margin: 0 0 var(--tm-space-1); }
.tm-footer a { color: var(--tm-accent); }
.tm-footer__noadvice { color: var(--tm-text); font-family: var(--tm-font-mono); }
.tm-footer .tm-nav ul { margin-bottom: var(--tm-space-2); }
.tm-footer .tm-nav a { color: var(--tm-accent); }

/* Gutenberg alignment helpers used by core blocks */
.alignwide { max-width: var(--tm-wide); }
.has-text-align-center { text-align: center; }
.tm-list--results { margin-top: var(--tm-space-3); }

/* Front page: latest articles and topic cards (TM-TASK7) */
.tm-list--latest { margin: 0 0 var(--tm-space-3); }
.tm-list__item h3 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.tm-list__item h3 a { color: var(--tm-text); text-decoration: none; }
.tm-list__item h3 a:hover { color: var(--tm-accent-strong); text-decoration: underline; }
.tm-topics { list-style: none; margin: 0 0 var(--tm-space-3); padding: 0; display: grid; gap: var(--tm-space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.tm-content > .tm-topics { max-width: none; }
.tm-topic { background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: var(--tm-space-2); margin: 0; }
.tm-topic__title { margin: 0 0 0.25rem; font-size: 1.1rem; }
.tm-topic__title a { color: var(--tm-text); }
.tm-topic__title a:hover { color: var(--tm-accent-strong); }
.tm-topic p { margin: 0 0 0.25rem; font-size: 1rem; }

/* Cookie banner (inc/consent.php, only with a GA4 ID). Non-modal region fixed to the bottom; both choices look the same. */
.tm-consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; background: var(--tm-surface); color: var(--tm-text); border-top: 1px solid var(--tm-accent); padding-block: var(--tm-space-2); font-size: var(--tm-size-small); }
.tm-consent[hidden] { display: none; }
.tm-consent__inner { display: grid; gap: var(--tm-space-1) var(--tm-space-3); }
.tm-consent__title { margin: 0; font-family: var(--tm-font-mono); font-weight: 700; color: var(--tm-text); }
.tm-consent__text { margin: 0; max-width: var(--tm-measure); }
.tm-consent__text a { color: var(--tm-accent); }
.tm-consent__actions { display: flex; flex-wrap: wrap; gap: var(--tm-space-1); }
.tm-consent__btn { flex: 1 1 12rem; font-family: var(--tm-font-mono); font-size: 1rem; font-weight: 700; background: var(--tm-surface-2); color: var(--tm-text); border: 1px solid var(--tm-accent); border-radius: var(--tm-radius); padding: 0.6rem 1.1rem; min-height: 44px; cursor: pointer; }
.tm-consent__btn:hover, .tm-consent__btn:focus-visible { background: var(--tm-accent); color: var(--tm-bg); }
@media (min-width: 64rem) {
	.tm-consent__inner { grid-template-columns: 1fr auto; align-items: center; }
	.tm-consent__title { grid-column: 1 / -1; }
	.tm-consent__btn { flex: 0 0 auto; }
}
.tm-linkbutton { font: inherit; color: var(--tm-accent); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.tm-linkbutton:hover { color: var(--tm-accent-strong); }

/* Platform card sources and empty comparison cells (spec-tm-task9-10 2.2). */
.tm-card__sources { margin-top: var(--tm-space-1); font-size: var(--tm-size-small); color: var(--tm-text-muted); }
.tm-card__sources-title { margin: 0; font-family: var(--tm-font-mono); color: var(--tm-text-muted); }
.tm-card__sources ul { margin: 0; padding-left: 1.2rem; overflow-wrap: anywhere; }
.tm-card__sources a { color: var(--tm-accent); }
.tm-vertailu td.tm-vertailu__empty { color: var(--tm-text-muted); }