/* PlanetHeartbeat V3.6 visual clarity beside existing globe layer controls.
 * This CSS never touches the 3D Earth, the stage, WebGL canvas or logos.
 */
.ph-layer-clarity{margin:10px 1px 16px;padding:14px 12px 12px;border-radius:13px;border:1px solid #3c7474;background:linear-gradient(155deg,#102f3b,#0c222f);box-shadow:0 10px 20px #0000001a;color:#e9fff9}
.ph-cl-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.ph-cl-kicker{font:800 9px/1.4 system-ui,sans-serif;letter-spacing:.12em;color:#90dfc9}
.ph-cl-view{font:800 9px/1.4 system-ui,sans-serif;letter-spacing:.055em;color:#edfdf7;padding:5px 7px;border-radius:6px;background:#214c50}
.ph-layer-clarity[data-view=published] .ph-cl-view{color:#b0ffda;background:#215240}
.ph-layer-clarity[data-view=illustrative] .ph-cl-view{color:#cbd0ff;background:#30365f}
.ph-layer-clarity[data-view=clear] .ph-cl-view{color:#ccdee2;background:#263b47}
.ph-cl-description{margin:9px 0 12px;color:#b5d1d7;font-size:10px;line-height:1.6}
.ph-cl-meter{display:flex;align-items:stretch;overflow:hidden;width:100%;height:8px;border-radius:20px;background:#26414c;box-shadow:inset 0 1px 3px #0005}
.ph-cl-meter>span{display:block;height:100%;min-width:0;transition:width .18s ease}
.ph-cl-meter-public{background:linear-gradient(90deg,#ffb27f,#d7a8ee)}
.ph-cl-meter-concept{background:linear-gradient(90deg,#7acddd,#abb4fc)}
.ph-cl-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0}
.ph-cl-stats div{min-width:0}
.ph-cl-stats strong{display:block;font:800 19px/1.2 'Space Grotesk',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#f3fffb}
.ph-cl-stats small{display:block;margin-top:4px;color:#a8c9d0;font:650 9px/1.35 system-ui,sans-serif}
.ph-cl-stats div:first-child strong{color:#ffbb95}
.ph-cl-stats div:last-child strong{color:#b4c5ff}
.ph-cl-explain{min-height:28px;margin:11px 0 7px;color:#d6e8e9;font-size:10px;line-height:1.55}
.ph-cl-mode{margin:0;color:#a2c2c5;font-size:9px;line-height:1.5}
.ph-cl-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px}
.ph-cl-actions button{flex:1 1 auto;min-height:44px;border-radius:9px;border:1px solid #7acbb0;background:#205243;color:#f0fff5;font:800 9px/1.3 system-ui,sans-serif;letter-spacing:.03em;padding:8px}
.ph-cl-actions button:hover:not(:disabled){border-color:#c4ffdf;background:#2a6b53}
.ph-cl-actions button:disabled{opacity:.55;cursor:default}
.ph-cl-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #4d7985;border-radius:9px;padding:8px 9px;color:#caeaf4;text-decoration:none;font:750 9px/1.3 system-ui,sans-serif}
.ph-cl-actions a:hover{border-color:#afe8f0;color:#fff}
.ph-cl-actions :is(button,a):focus-visible{outline:3px solid #fff6ad;outline-offset:2px}
@media(max-width:850px){.ph-layer-clarity{margin:10px 0 15px;padding:14px}.ph-cl-stats{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.ph-layer-clarity{margin:8px 0 13px}}
@media(prefers-reduced-motion:reduce){.ph-cl-meter>span{transition:none}}
body[data-ph-lite=on] .ph-layer-clarity{box-shadow:none;background:#102632}