/* ============================================================
   Morai — Tech Radar  v3
   Inherits Morai CSS variables + reuses .modal-overlay pattern
   ============================================================ */

/* ── Section wrapper ─────────────────────────────────────── */
.radar-section {
    padding: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
}

/* ── Header ──────────────────────────────────────────────── */
.radar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.radar-header-text { display: flex; flex-direction: column; gap: 4px; }
.radar-subtitle {
    font-size: 12px;
    color: var(--grey);
    margin: 0;
}
.radar-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg3);
    border: 1px solid var(--line2);
    border-radius: var(--r);
    color: var(--white);
    font: 600 12px 'Montserrat', system-ui;
    padding: 7px 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.radar-reset-btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }

/* ── Controls ────────────────────────────────────────────── */
.radar-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.radar-search-wrap { position: relative; }
.radar-search-icon {
    position: absolute; left: 13px; top: 50%;
    transform: translateY(-50%); color: var(--grey); pointer-events: none;
}
#radar-search {
    width: 100%;
    background: var(--bg3);
    color: var(--white);
    border: 1px solid var(--line2);
    border-radius: var(--r);
    padding: 9px 14px 9px 38px;
    outline: none;
    font: 500 13px 'Montserrat', system-ui;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
#radar-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
#radar-search::placeholder { color: var(--grey); }

.radar-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.radar-filter-label {
    font: 700 10px 'Montserrat', system-ui;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--grey);
    white-space: nowrap;
    min-width: 64px;
}
/* Chips reuse .country-pill from style.css — no extra CSS needed */

/* ── Canvas outer (always dark island) ───────────────────── */
.radar-canvas-outer {
    position: relative;
    background: #070D1A;
    border-radius: 14px;
    border: 1px solid var(--line);
    overflow: hidden;
    min-height: 560px;
    box-shadow: 0 4px 32px rgba(0,0,0,.25);
}
#radar-canvas {
    display: block;
    width: 100%;
    min-height: 560px;
    cursor: crosshair;
}

/* ── Tooltip ─────────────────────────────────────────────── */
.radar-tooltip {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
    background: #F0F4FF;
    color: #07111F;
    border-radius: 9px;
    padding: 7px 11px;
    min-width: 140px;
    max-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .1s;
    font-size: 12px;
    z-index: 20;
    line-height: 1.45;
}
.radar-tooltip b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.radar-tooltip small { color: #4A5D78; }

/* ── Zoom dock ───────────────────────────────────────────── */
.radar-zoom-dock {
    position: absolute;
    bottom: 56px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10;
}
.radar-zoom-btn {
    width: 32px; height: 32px;
    background: rgba(7,13,26,.78);
    border: 1px solid rgba(201,163,85,.22);
    border-radius: 8px;
    color: #C9A355;
    font: 700 16px 'Montserrat', system-ui;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .13s, border-color .13s;
    backdrop-filter: blur(6px);
    padding: 0;
}
.radar-zoom-btn:hover { background: rgba(201,163,85,.18); border-color: rgba(201,163,85,.55); }

/* ── Legend strip ────────────────────────────────────────── */
#radar-legend-strip {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 10;
    background: rgba(7,13,26,.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(201,163,85,.12);
    border-radius: 9px;
    padding: 6px 11px;
}
.rls-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font: 600 10px 'Montserrat', system-ui;
    color: rgba(232,228,220,.65);
    white-space: nowrap;
}
.rls-item i {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    font-style: normal;
}
.rls-sep { width: 1px; height: 16px; background: rgba(201,163,85,.2); flex-shrink: 0; }
.rls-sym span { font-size: 11px; line-height: 1; color: rgba(232,228,220,.8); }

/* ── Detail modal — reuses .modal-overlay + .modal from style.css ── */
#radar-entry-modal .modal-body { padding-right: 56px; }
#radar-entry-modal .modal-body[dir="rtl"] { padding-right: 28px; padding-left: 56px; }

/* ── rml-* — rich modal layout classes ────────────────────────────── */

/* Year badge in meta row */
.rml-year {
    font: 600 11px 'Montserrat', system-ui;
    color: var(--grey);
    background: var(--bg3);
    border: 1px solid var(--line2);
    border-radius: 5px;
    padding: 2px 7px;
    white-space: nowrap;
}

/* Impact statement — highlighted blockquote */
.rml-impact {
    font-size: 13px;
    line-height: 1.55;
    color: var(--white);
    border-left: 3px solid var(--accent);
    background: rgba(201,163,85,.07);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    margin: 0 0 16px;
    font-style: italic;
}
.rml-impact.rtl {
    border-left: none;
    border-right: 3px solid var(--accent);
    border-radius: 8px 0 0 8px;
    text-align: right;
}

/* Maturity bar section */
.rml-maturity { margin-bottom: 16px; }
.rml-maturity-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}
.rml-maturity-label {
    font: 700 10px 'Montserrat', system-ui;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--grey);
}
.rml-maturity-val {
    font: 700 15px 'Montserrat', system-ui;
}
.rml-maturity-val small { font-size: 11px; opacity: .7; font-weight: 600; }
.rml-maturity-track {
    height: 6px;
    background: var(--line);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}
.rml-maturity-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s cubic-bezier(.25,.8,.25,1);
}
.rml-ring-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--grey);
    font-style: italic;
    margin: 0;
}
.rml-ring-note.rtl { text-align: right; }

/* Papers / sources section */
.rml-section { margin-bottom: 16px; }
.rml-title {
    font: 700 10px 'Montserrat', system-ui;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--grey);
    margin-bottom: 8px;
}
.rml-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rml-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 12px 'Montserrat', system-ui;
    color: var(--accent);
    background: var(--bg3);
    border: 1px solid var(--line2);
    border-radius: 7px;
    padding: 7px 11px;
    text-decoration: none;
    transition: background .13s, border-color .13s, color .13s;
    word-break: break-word;
}
.rml-link:hover {
    background: rgba(201,163,85,.12);
    border-color: var(--accent);
    color: var(--white);
}
.rml-link svg { flex-shrink: 0; opacity: .6; }
.rml-paper { border-left: 3px solid #4ADE80; }
.rml-source { border-left: 3px solid var(--accent); }

/* Tags */
.rml-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.rml-tag {
    background: var(--accent-dim);
    border: 1px solid var(--line2);
    border-radius: 6px;
    padding: 3px 8px;
    font: 700 10px 'Montserrat', system-ui;
    color: var(--accent);
    text-transform: lowercase;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 800px) {
    .radar-section { overflow: hidden; max-width: 100%; }
    .radar-section .section-title { white-space: normal; }
    .radar-controls { max-width: 100%; }
    .radar-filter-group { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 4px; }
    .radar-filter-group::-webkit-scrollbar { display: none; }
    .country-filter { max-width: 100%; }
}
@media (max-width: 700px) {
    #radar-canvas { min-height: 360px; }
    .radar-canvas-outer { min-height: 360px; }
    #radar-legend-strip { gap: 7px; padding: 5px 8px; }
    .rls-item { font-size: 9px; }
    .radar-filter-group { flex-direction: row; align-items: center; }
}
@media (max-width: 480px) {
    .radar-header { flex-direction: column; }
    .radar-reset-btn { align-self: flex-start; }
    #radar-canvas { min-height: 320px; }
    .radar-canvas-outer { min-height: 320px; }
}

/* ── Light mode: follow the daylight theme (canvas palette set in radar.js) ── */
[data-theme="light"] .radar-canvas-outer { background: #F5F2EC; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
[data-theme="light"] .radar-zoom-btn { background: rgba(255,255,255,.82); border-color: rgba(166,134,43,.3); color: var(--accent); }
[data-theme="light"] .radar-zoom-btn:hover { background: rgba(166,134,43,.14); border-color: rgba(166,134,43,.5); }
[data-theme="light"] #radar-legend-strip { background: rgba(255,255,255,.85); border-color: rgba(166,134,43,.2); }
[data-theme="light"] .rls-item { color: rgba(28,25,23,.7); }
[data-theme="light"] .rls-sym span { color: rgba(28,25,23,.82); }
[data-theme="light"] .radar-tooltip { background: #FFFFFF; color: #1C1917; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
[data-theme="light"] .radar-tooltip small { color: #78716C; }