/* GBP Stablecoins theme styles.
   Tokens come from theme.json (--wp--preset--*). Mobile-first; breakpoints
   at 390 / 768 / 1024 / 1440.

   Shared class contract for ACF blocks (keep these names stable):
     .ocm-panel            rail/sidebar container (title via .ocm-panel__title, header row .ocm-panel__head)
     .ocm-stat             headline number card: .ocm-stat__label, .ocm-stat__value, .ocm-stat__delta(.is-up|.is-down), .ocm-stat__note
     .ocm-chip             filter chip; .is-on for selected
     .ocm-btn              primary button; .ocm-btn--secondary outlined
     .ocm-badge-fca        our own FCA seal (text + tick), never the FCA logo; .ocm-status-text plain "Not FCA registered"
     .ocm-table            data table (mono numerals, right-aligned numbers); wrap in .ocm-table__wrap; .ocm-table__src for the source line
     .ocm-signal           sidebar feed item: .ocm-signal__type(.is-warning|.is-critical), .ocm-signal__text, .ocm-signal__time
     .ocm-chart-card       title .ocm-chart-card__title, finding .ocm-chart-card__finding, slot .ocm-chart-card__chart, .ocm-chart-card__source, .ocm-chart-card__actions
     .ocm-coin-icon        30px circle for issuer artwork (img inside, or initials)
     .ocm-eyebrow          mono small caps label
     .ocm-skeleton         loading placeholder block; .ocm-stale (greyed + timestamp); .ocm-unavailable (message); .ocm-thin (thin-data flag)
     .ocm-num              tabular mono numerals
*/

:root {
  --ocm-radius-sm: 6px; --ocm-radius-md: 10px; --ocm-radius-lg: 14px;
  --ocm-dashboard: 1440px; --ocm-sidebar: 336px; --ocm-header-h: 64px;
  --ocm-shadow: 0 1px 2px rgba(19, 38, 26, .06), 0 8px 24px -16px rgba(19, 38, 26, .18);
}
html { scroll-padding-top: calc(var(--ocm-header-h) + 1rem); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.ocm-num, .ocm-table td, .ocm-stat__value, .ocm-stat__delta, .ocm-eyebrow {
  font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums;
}
.ocm-eyebrow { font-size: var(--wp--preset--font-size--xs); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); }
.ocm-eyebrow.is-gold { color: #A07F3C; }
.ocm-muted { color: var(--wp--preset--color--ink-secondary); }
.ocm-wide { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; }
.ocm-dashboard { max-width: var(--ocm-dashboard); margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header */
.ocm-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--wp--preset--color--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--wp--preset--color--line); }
.ocm-header__inner { max-width: var(--ocm-dashboard); margin-inline: auto; min-height: var(--ocm-header-h); display: flex; align-items: center; gap: 1.5rem; padding: .75rem var(--wp--preset--spacing--40); }
.ocm-brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--wp--preset--color--ink); }
.ocm-brand__name { font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; letter-spacing: -0.01em; white-space: nowrap; }
.ocm-mark { flex: none; }
.ocm-nav { display: none; gap: 1.5rem; margin-left: 1rem; }
.ocm-nav a, .ocm-menu nav a { font-size: .875rem; color: var(--wp--preset--color--ink-secondary); text-decoration: none; }
.ocm-nav a:hover { color: var(--wp--preset--color--ink); }
.ocm-section-dashboard .ocm-nav a[data-section="dashboard"], .ocm-section-analytics .ocm-nav a[data-section="analytics"],
.ocm-section-exchanges .ocm-nav a[data-section="exchanges"], .ocm-section-learn .ocm-nav a[data-section="learn"] {
  color: var(--wp--preset--color--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent); padding-bottom: .125rem;
}
.ocm-search { display: none; margin-left: auto; align-items: center; gap: .5rem; background: var(--wp--preset--color--surface-alt); border-radius: 999px; padding: .5rem .875rem; color: var(--wp--preset--color--ink-muted); width: 300px; }
.ocm-search input { all: unset; flex: 1; font: inherit; font-size: .8125rem; color: var(--wp--preset--color--ink); min-width: 0; }
.ocm-search input::placeholder { color: var(--wp--preset--color--ink-muted); }
.ocm-menu { margin-left: auto; position: relative; }
.ocm-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--ocm-radius-sm); color: var(--wp--preset--color--ink); }
.ocm-menu summary::-webkit-details-marker { display: none; }
.ocm-menu[open] summary { background: var(--wp--preset--color--surface-alt); }
.ocm-menu nav { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 240px; display: grid; gap: .25rem; padding: .75rem; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--ocm-radius-md); box-shadow: var(--ocm-shadow); }
.ocm-menu nav a { padding: .5rem .625rem; border-radius: var(--ocm-radius-sm); font-size: 1rem; }
.ocm-menu nav a:hover { background: var(--wp--preset--color--surface-alt); }
.ocm-menu nav form input { width: 100%; box-sizing: border-box; margin-top: .5rem; padding: .5rem .75rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--ocm-radius-sm); font: inherit; font-size: .875rem; }
@media (min-width: 1024px) { .ocm-nav, .ocm-search { display: flex; } .ocm-menu { display: none; } }

/* Footer */
.ocm-footer { background: var(--wp--preset--color--surface-inverse); color: #B7C4B9; margin-top: var(--wp--preset--spacing--80); }
.ocm-footer__inner { max-width: var(--ocm-dashboard); margin-inline: auto; padding: 2.5rem var(--wp--preset--spacing--40) 2rem; display: grid; gap: 1.5rem; }
.ocm-footer__top { display: grid; gap: 1.25rem; }
.ocm-footer__wordmark { font-family: var(--wp--preset--font-family--heading); font-size: 1.375rem; color: var(--wp--preset--color--ink-inverse); text-decoration: none; }
.ocm-footer__links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.ocm-footer__links a { color: #B7C4B9; font-size: .8125rem; text-decoration: none; }
.ocm-footer__links a:hover { color: var(--wp--preset--color--ink-inverse); }
.ocm-footer__disclaimer { font-size: .75rem; color: #8FA393; max-width: 900px; margin: 0; line-height: 1.5; }
.ocm-footer__disclaimer a { color: inherit; }
@media (min-width: 768px) { .ocm-footer__top { grid-template-columns: auto 1fr; align-items: center; } .ocm-footer__links { justify-content: flex-end; } }

/* Page scaffolds */
.ocm-page { padding-top: var(--wp--preset--spacing--50); }
.ocm-page__head { display: grid; gap: .5rem; margin-bottom: var(--wp--preset--spacing--50); }
.ocm-page__head .wp-block-post-title, .ocm-page__head h1 { margin: 0; }
.ocm-lede { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--ink-secondary); max-width: 62ch; margin: 0; }
.ocm-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .75rem; color: var(--wp--preset--color--ink-muted); }
.ocm-grid-2 { display: grid; gap: 1rem; } .ocm-grid-3 { display: grid; gap: 1rem; } .ocm-grid-4 { display: grid; gap: 1rem; }
@media (min-width: 768px) { .ocm-grid-2, .ocm-grid-4 { grid-template-columns: repeat(2, 1fr); } .ocm-grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ocm-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Dashboard: table column + sticky sidebar */
.ocm-dash { display: grid; gap: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--50); }
.ocm-dash__main { min-width: 0; display: grid; gap: var(--wp--preset--spacing--50); align-content: start; }
.ocm-dash__side { display: grid; gap: 1rem; align-content: start; }
.ocm-dash__stats { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) {
  .ocm-dash { grid-template-columns: minmax(0, 1fr) var(--ocm-sidebar); }
  .ocm-dash__side { position: sticky; top: calc(var(--ocm-header-h) + 1rem); max-height: calc(100vh - var(--ocm-header-h) - 2rem); overflow: auto; }
  .ocm-dash__stats { display: none; } /* desktop reads the numbers in the summary sentence; mobile leads with the cards */
}

/* Article and trust pages: 720 column with an "on this page" rail */
.ocm-article, .ocm-trust { display: grid; gap: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--50); }
.ocm-article__body, .ocm-trust__body { max-width: 720px; min-width: 0; }
.ocm-article__body > *, .ocm-trust__body > * { max-width: 720px; }
.ocm-article__body h2, .ocm-trust__body h2 { margin-top: 2.5rem; }
.ocm-article__body p, .ocm-trust__body p { font-size: 1rem; line-height: 1.7; }
.ocm-toc { display: none; }
.ocm-toc ol { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .375rem; border-left: 2px solid var(--wp--preset--color--line); }
.ocm-toc a { display: block; padding: .125rem .75rem; font-size: .8125rem; color: var(--wp--preset--color--ink-secondary); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.ocm-toc a.is-current { color: var(--wp--preset--color--ink); border-left-color: var(--wp--preset--color--accent); }
@media (min-width: 1024px) {
  .ocm-article, .ocm-trust { grid-template-columns: 240px minmax(0, 720px); justify-content: center; column-gap: 4rem; }
  .ocm-toc { display: block; position: sticky; top: calc(var(--ocm-header-h) + 1.5rem); align-self: start; }
}

/* Components */
.ocm-panel { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--ocm-radius-md); padding: 1rem 1.125rem; }
.ocm-panel--inverse { background: var(--wp--preset--color--surface-inverse); color: var(--wp--preset--color--ink-inverse); border-color: transparent; }
.ocm-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.ocm-panel__title { font-family: var(--wp--preset--font-family--heading); font-size: 1.375rem; margin: 0; }
.ocm-panel__link { font-size: .75rem; }
.ocm-stat { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--ocm-radius-md); padding: .875rem 1rem; display: grid; gap: .25rem; }
.ocm-stat__label { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); font-family: var(--wp--preset--font-family--mono); }
.ocm-stat__value { font-size: 1.5rem; line-height: 1.1; color: var(--wp--preset--color--ink); }
.ocm-stat__delta { font-size: .8125rem; color: var(--wp--preset--color--ink-secondary); }
.ocm-stat__delta.is-up { color: var(--wp--preset--color--good); } .ocm-stat__delta.is-down { color: var(--wp--preset--color--critical); }
.ocm-stat__note { font-size: .75rem; color: var(--wp--preset--color--ink-muted); }
.ocm-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); font-size: .8125rem; color: var(--wp--preset--color--ink-secondary); text-decoration: none; cursor: pointer; }
.ocm-chip.is-on { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff; }
.ocm-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ocm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1rem; border-radius: var(--ocm-radius-sm); background: var(--wp--preset--color--accent); color: #fff; font: inherit; font-size: .875rem; font-weight: 500; text-decoration: none; border: 1px solid var(--wp--preset--color--accent); cursor: pointer; }
.ocm-btn:hover { background: #255a35; color: #fff; }
.ocm-btn--secondary { background: transparent; color: var(--wp--preset--color--accent); }
.ocm-btn--secondary:hover { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent); }
.ocm-badge-fca { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 999px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--good); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.ocm-badge-fca::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.ocm-status-text { font-size: .75rem; color: var(--wp--preset--color--ink-muted); white-space: nowrap; }
.ocm-coin-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--wp--preset--color--surface-alt); display: inline-grid; place-items: center; overflow: hidden; font-size: .6875rem; font-weight: 600; color: var(--wp--preset--color--ink-secondary); flex: none; }
.ocm-coin-icon img { width: 100%; height: 100%; object-fit: cover; }

.ocm-table__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--wp--preset--color--line); border-radius: var(--ocm-radius-md); background: var(--wp--preset--color--surface); }
.ocm-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ocm-table caption { caption-side: bottom; text-align: left; padding: .75rem 1rem; font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; color: var(--wp--preset--color--ink-muted); }
.ocm-table th, .ocm-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--wp--preset--color--line); text-align: right; white-space: nowrap; vertical-align: middle; }
.ocm-table th:first-child, .ocm-table td:first-child { text-align: left; }
.ocm-table thead th { font-family: var(--wp--preset--font-family--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--wp--preset--color--ink-muted); background: var(--wp--preset--color--surface-alt); }
.ocm-table tbody tr:last-child td { border-bottom: 0; }
.ocm-table tbody tr:hover td { background: color-mix(in srgb, var(--wp--preset--color--surface-alt) 60%, transparent); }
.ocm-table .is-up { color: var(--wp--preset--color--good); } .ocm-table .is-down { color: var(--wp--preset--color--critical); }
.ocm-table__coin { display: inline-flex; align-items: center; gap: .625rem; }
.ocm-table__coin b { font-weight: 500; display: block; } .ocm-table__coin small { display: block; font-size: .75rem; color: var(--wp--preset--color--ink-muted); font-family: var(--wp--preset--font-family--mono); }
.ocm-table__src { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; color: var(--wp--preset--color--ink-muted); border-top: 1px solid var(--wp--preset--color--line); }

.ocm-signal { display: grid; grid-template-columns: auto 1fr; gap: .25rem .625rem; padding: .625rem 0; border-bottom: 1px solid var(--wp--preset--color--line); font-size: .8125rem; }
.ocm-signal:last-child { border-bottom: 0; }
.ocm-signal__type { font-family: var(--wp--preset--font-family--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--accent); padding-top: .2rem; }
.ocm-signal__type.is-warning { color: var(--wp--preset--color--warning); } .ocm-signal__type.is-critical { color: var(--wp--preset--color--critical); }
.ocm-signal__text { color: var(--wp--preset--color--ink); }
.ocm-signal__time { grid-column: 2; font-family: var(--wp--preset--font-family--mono); font-size: .625rem; color: var(--wp--preset--color--ink-muted); }
.ocm-live { display: inline-flex; align-items: center; gap: .375rem; font-family: var(--wp--preset--font-family--mono); font-size: .625rem; letter-spacing: .08em; color: var(--wp--preset--color--good); }
.ocm-live::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }

.ocm-chart-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--ocm-radius-md); padding: 1rem 1.125rem; display: grid; gap: .75rem; }
.ocm-chart-card__title { font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; margin: 0; }
.ocm-chart-card__finding { font-size: .875rem; color: var(--wp--preset--color--ink-secondary); margin: 0; }
.ocm-chart-card__chart { min-height: 220px; border-radius: var(--ocm-radius-sm); background: var(--wp--preset--color--surface-alt); }
.ocm-chart-card__source { font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; color: var(--wp--preset--color--ink-muted); }
.ocm-chart-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ocm-chart-card__actions a, .ocm-chart-card__actions button { font: inherit; font-size: .75rem; padding: .375rem .625rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--line); background: none; color: var(--wp--preset--color--ink-secondary); cursor: pointer; text-decoration: none; }

/* States */
.ocm-skeleton { background: linear-gradient(90deg, var(--wp--preset--color--surface-alt) 25%, #E9EDE6 50%, var(--wp--preset--color--surface-alt) 75%); background-size: 200% 100%; animation: ocm-shimmer 1.4s infinite; border-radius: var(--ocm-radius-sm); min-height: 1em; color: transparent; }
@keyframes ocm-shimmer { to { background-position: -200% 0; } }
.ocm-stale { color: var(--wp--preset--color--ink-muted); }
.ocm-stale__stamp { font-family: var(--wp--preset--font-family--mono); font-size: .6875rem; color: var(--wp--preset--color--warning); }
.ocm-unavailable, .ocm-empty { padding: 1rem; border: 1px dashed var(--wp--preset--color--line); border-radius: var(--ocm-radius-md); color: var(--wp--preset--color--ink-muted); font-size: .875rem; }
.ocm-thin { display: inline-flex; align-items: center; gap: .25rem; font-family: var(--wp--preset--font-family--mono); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--warning); }
@media (prefers-reduced-motion: reduce) { .ocm-skeleton { animation: none; } }

/* Notices kept for the existing blocks */
.ocm-notice { padding: .75rem 1rem; border-left: 3px solid var(--wp--preset--color--ink-muted); background: var(--wp--preset--color--surface-alt); font-size: var(--wp--preset--font-size--small); border-radius: 0 var(--ocm-radius-sm) var(--ocm-radius-sm) 0; }
.ocm-notice--risk { border-left-color: var(--wp--preset--color--warning); }
.ocm-offer { border: 1px solid var(--wp--preset--color--line); border-radius: var(--ocm-radius-md); padding: 1rem; display: grid; gap: .5rem; background: var(--wp--preset--color--surface); }
.ocm-offer__cta { justify-self: start; }

/* Learn cards */
.ocm-learn { display: grid; gap: 1rem; }
.ocm-learn__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ocm-learn__head h2 { margin: 0; }
.ocm-card { display: grid; gap: .5rem; text-decoration: none; color: inherit; }
.ocm-card__media { aspect-ratio: 4/3; border-radius: var(--ocm-radius-md); background: var(--wp--preset--color--surface-alt); overflow: hidden; }
.ocm-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ocm-card__title { font-family: var(--wp--preset--font-family--heading); font-size: 1.3125rem; margin: 0; line-height: 1.2; }
.ocm-card__dek { font-size: .8125rem; color: var(--wp--preset--color--ink-secondary); margin: 0; }
.wp-block-post-template.ocm-grid-4 { padding: 0; }
.wp-block-post-template.ocm-grid-4 > li { margin: 0; list-style: none; }

/* 404 */
.ocm-404 { padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40); max-width: 640px; margin-inline: auto; display: grid; gap: 1.25rem; text-align: center; }
.ocm-404 h1 { font-size: var(--wp--preset--font-size--hero); margin: 0; }
.ocm-404 .ocm-chips { justify-content: center; }
.ocm-404 form { display: flex; gap: .5rem; } .ocm-404 input[type="search"] { flex: 1; padding: .625rem .875rem; border: 1px solid var(--wp--preset--color--line); border-radius: var(--ocm-radius-sm); font: inherit; }

/* Consent banner: Accept and Reject identical, side by side */
.ocm-consent { position: fixed; inset: auto 0 0 0; z-index: 50; padding: var(--wp--preset--spacing--40); }
.ocm-consent__inner { max-width: 760px; margin-inline: auto; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--ocm-radius-lg); box-shadow: var(--ocm-shadow); padding: 1rem 1.125rem; display: grid; gap: 1rem; }
.ocm-consent__title { font-weight: 600; margin: 0 0 .25rem; }
.ocm-consent__text p:last-child { margin: 0; font-size: .8125rem; color: var(--wp--preset--color--ink-secondary); }
.ocm-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (min-width: 768px) { .ocm-consent__inner { grid-template-columns: 1fr auto; align-items: center; } .ocm-consent__actions { grid-template-columns: auto auto; } }

/* Search results */
.ocm-results { display: grid; gap: 1.5rem; }
.ocm-results h2 { font-size: var(--wp--preset--font-size--large); margin: 0 0 .5rem; }