/**
 * Sentiment custom-post-type styles ("What Japan Thinks" series).
 *
 * Loaded conditionally on is_singular('sentiment') from inc/bootstrap.php.
 * Centralizes the styling that used to live as an inline <style> block in
 * each post body.
 *
 * Class namespace: .uj-sa-* (sentiment analysis). The earlier .uj-* class
 * set (uj-verdict, uj-grid, uj-metric, uj-comment, etc.) was retired on
 * 2026-05-03 along with a content migration pass that renamed all
 * existing posts' markup to the new namespace.
 *
 * Related-coverage cards intentionally do NOT live here — sentiment posts
 * use [uj_related_curated urls="..."] which renders the canonical site
 * card pattern (.uj-related__grid / .uj-related__card from
 * single-article.css) so they match the rest of the site.
 */

.uj-sa-wrap * { box-sizing: border-box; }
.uj-sa-wrap {
    width: 100%;
    margin: 0 auto;
    /* Inherit Georgia body font from .uj-article__body; UI elements
       opt into Oswald / system stack via their own classes. */
}

/* Source tweet link */
.uj-sa-source {
    font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1.25rem;
}
.uj-sa-source a { color: #B3421D; text-decoration: none; }
.uj-sa-source a:hover { text-decoration: underline; }

/* Verdict — matches .uj-cta pattern */
.uj-sa-verdict {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #FFF5F0 0%, #FCE9DF 100%);
    border: 1px solid #F0C7B3;
    border-left: 4px solid #B3421D;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(179, 66, 29, 0.06);
    font: 18px/1.7 Georgia, "Times New Roman", serif;
    color: #1f2937;
}
.uj-sa-verdict__eyebrow {
    display: block;
    font: 700 0.6875rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #B3421D;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.625rem;
}
.uj-sa-verdict strong { font-weight: 700; color: #B3421D; }

/* Disclaimer */
.uj-sa-disclaimer {
    font: italic 15px/1.6 Georgia, serif;
    color: #6b7280;
    margin: 0 0 2rem;
    padding: 0.75rem 1rem;
    border-left: 2px solid #e5e7eb;
}

/* Section title — Oswald, brand red, no border */
.uj-sa-section { margin: 0 0 2.25rem; }
.uj-sa-section__title,
h2.uj-sa-section__title,
h3.uj-sa-section__title {
    font: 600 1.375rem/1.2 "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
    color: #B3421D;
    letter-spacing: 0.01em;
    margin: 0 0 1rem;
    text-transform: none;
}
.uj-sa-section__title::before,
.uj-sa-section__title::after {
    content: none !important;
    display: none !important;
}

/* Metrics grid */
.uj-sa-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 2rem;
}
@media (max-width: 600px) {
    .uj-sa-metrics { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}
.uj-sa-metric {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.875rem 1rem;
}
.uj-sa-metric__label {
    font: 700 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #6b7280;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.375rem;
}
.uj-sa-metric__value {
    font: 700 1.5rem/1.1 "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
    color: #1f2937;
    letter-spacing: 0.01em;
}
.uj-sa-metric__sub {
    font: 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* Context box — softer than verdict */
.uj-sa-context {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-left: 4px solid #B3421D;
    border-radius: 4px;
    font: 18px/1.7 Georgia, "Times New Roman", serif;
    color: #1f2937;
}
.uj-sa-context p { margin: 0 0 0.875rem; }
.uj-sa-context p:last-child { margin-bottom: 0; }
.uj-sa-context a { color: #8E331A; text-decoration: underline; }
.uj-sa-context a:hover { color: #B3421D; }

/* Sentiment bars */
.uj-sa-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}
.uj-sa-bar__label {
    width: 200px;
    flex-shrink: 0;
    font: 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: right;
    color: #1f2937;
}
.uj-sa-bar__track {
    flex: 1;
    height: 28px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.uj-sa-bar__fill {
    height: 100%;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding-left: 0.625rem;
    font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: nowrap;
    min-width: 50px;
    transition: width 0.4s ease;
}
@media (max-width: 600px) {
    .uj-sa-bar__label { width: 130px; font-size: 13px; }
}

/* Callout — kept dark for visual punch, with brand-red accent */
.uj-sa-callout {
    background: #1f2937;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
    color: #f9fafb;
}
.uj-sa-callout__stat { text-align: center; min-width: 100px; }
.uj-sa-callout__num {
    font: 700 2.25rem/1 "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
    letter-spacing: 0.01em;
}
.uj-sa-callout__num--orange { color: #FCE9DF; }
.uj-sa-callout__num--muted  { color: #9ca3af; }
.uj-sa-callout__desc {
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #f9fafb;
    margin-top: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.uj-sa-callout__vs {
    font: 600 1.125rem/1 "Oswald", sans-serif;
    color: #6b7280;
    align-self: center;
}
.uj-sa-callout__text {
    flex: 1;
    min-width: 200px;
    font: 16px/1.6 Georgia, "Times New Roman", serif;
    color: #f9fafb;
}

/* Comment cards */
.uj-sa-comment {
    padding: 1rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.uj-sa-comment:last-child { border-bottom: none; }
.uj-sa-comment__pill {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font: 700 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.uj-sa-comment__ja {
    font: italic 16px/1.6 Georgia, "Times New Roman", serif;
    color: #4b5563;
    margin: 0 0 0.375rem;
}
.uj-sa-comment__en {
    font: 18px/1.65 Georgia, "Times New Roman", serif;
    color: #1f2937;
    margin: 0 0 0.5rem;
}
.uj-sa-comment__meta {
    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #6b7280;
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
}

/* Pill color variants — light bg + dark text, brand-aligned */
.uj-sa-pill-orange { background: #FCE9DF; color: #8E331A; }
.uj-sa-pill-amber  { background: #FEF3E2; color: #92400e; }
.uj-sa-pill-blue   { background: #dbeafe; color: #1e40af; }
.uj-sa-pill-green  { background: #dcfce7; color: #166534; }
.uj-sa-pill-gray   { background: #f3f4f6; color: #374151; }
.uj-sa-pill-purple { background: #ede9fe; color: #5b21b6; }
.uj-sa-pill-red    { background: #fee2e2; color: #991b1b; }
.uj-sa-pill-teal   { background: #ccfbf1; color: #115e59; }

/* Theme detail blocks */
.uj-sa-theme {
    margin: 0 0 1.5rem;
    padding: 0;
}
.uj-sa-theme__heading,
h3.uj-sa-theme__heading {
    font: 600 1.125rem/1.3 "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
    color: #B3421D;
    letter-spacing: 0.01em;
    margin: 0 0 0.5rem;
}
.uj-sa-theme__heading .pct {
    color: #6b7280;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}
.uj-sa-theme p {
    font: 18px/1.7 Georgia, "Times New Roman", serif;
    color: #1f2937;
    margin: 0 0 0.75rem;
}

/* Activity timeline */
.uj-sa-timeline {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 80px;
    margin: 0 0 0.75rem;
}
.uj-sa-timeline__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.uj-sa-timeline__bar {
    width: 100%;
    border-radius: 2px 2px 0 0;
}
.uj-sa-timeline__label {
    font: 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #6b7280;
}
.uj-sa-timeline__caption {
    font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #6b7280;
}

/* Divider */
.uj-sa-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2.5rem 0;
}

/* Series backlink rendered by single.php at the bottom of every
   sentiment post — small but unmissable nudge back to the index. */
.uj-sa-series-link {
    margin: 2rem 0 0;
    padding: 0.875rem 1.125rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    text-align: center;
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.uj-sa-series-link a {
    color: #B3421D;
    text-decoration: none;
    letter-spacing: 0.02em;
}
.uj-sa-series-link a:hover { text-decoration: underline; }
.uj-sa-series-link strong {
    font-weight: 700;
    font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
    letter-spacing: 0.02em;
}