/* The mood chart has its own axes and point/label geometry. */
.coordinate-plot{margin-top:26px;--axis-gutter:25px}
.plot-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 13px var(--axis-gutter);gap:10px}
.plot-top b,.plot-bottom b{font-size:10px;font-weight:600;letter-spacing:1.2px;color:#505c50}
.plot-top>span{font-size:10px;color:#838879}
.plot-row{display:grid;grid-template-columns:var(--axis-gutter) minmax(0,1fr)}
.plot-ticks-y{position:relative;color:#7d8678;font:10px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;user-select:none}
.plot-ticks-y span{position:absolute;right:8px;transform:translateY(-50%)}
.plot-ticks-y span:nth-child(1){top:0}
.plot-ticks-y span:nth-child(2){top:25%}
.plot-ticks-y span:nth-child(3){top:50%;color:#424f42}
.plot-ticks-y span:nth-child(4){top:75%}
.plot-ticks-y span:nth-child(5){top:100%}
.coordinate-plot .mood-map{width:100%;max-width:none;margin:0;aspect-ratio:1;overflow:visible;border:1px solid #ccd1c3;border-radius:3px}
.coordinate-plot .quadrant{opacity:.62}
.coordinate-plot .q-red{background:#ecdbd4}
.coordinate-plot .q-yellow{background:#eee5c6}
.coordinate-plot .q-blue{background:#dce5ec}
.coordinate-plot .q-green{background:#dfe7d6}
.plot-grid{position:absolute;inset:0;background-image:linear-gradient(to right,#65766010 1px,transparent 1px),linear-gradient(to bottom,#65766010 1px,transparent 1px);background-size:25% 25%;pointer-events:none;z-index:1}
.coordinate-plot .cross{background:#83927f70}
.plot-origin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:5px;height:5px;background:#657260;border-radius:50%;z-index:2;pointer-events:none}
.plot-ticks-x{position:relative;height:12px;margin:10px 0 0 var(--axis-gutter);font:10px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;color:#7d8678;user-select:none}
.plot-ticks-x span{position:absolute;transform:translateX(-50%)}
.plot-ticks-x span:nth-child(1){left:0}
.plot-ticks-x span:nth-child(2){left:25%}
.plot-ticks-x span:nth-child(3){left:50%;color:#424f42}
.plot-ticks-x span:nth-child(4){left:75%}
.plot-ticks-x span:nth-child(5){left:100%}
.plot-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px;margin:11px 0 0 var(--axis-gutter)}
.plot-bottom>span{font-size:10px;color:#818777}
.plot-bottom>b{font-size:9px;letter-spacing:1px}
.selection-guide{position:absolute;z-index:2;pointer-events:none;opacity:.6}
.guide-x{height:0;border-top:1px dashed var(--mood)}
.guide-y{width:0;border-left:1px dashed var(--mood)}
.emotion-point{position:absolute;width:5px;height:5px;transform:translate(-50%,-50%);border:1px solid #88917f;border-radius:50%;background:#f5f3ee;z-index:3;pointer-events:none}
.emotion-point.linked{background:#7c8872;border-color:#7c8872}
.emotion-point.selected{background:var(--mood);border-color:var(--mood)}
.coordinate-plot .mood-dot{width:12px;height:12px;border:1px solid var(--mood);z-index:4;box-shadow:0 0 0 3px #f5f3ee70;background:var(--mood)}
.coordinate-plot .emotion{position:absolute;transform:none;padding:5px 6px;min-height:26px;min-width:0;font-size:11px;font-weight:500;letter-spacing:0;border-radius:4px;line-height:16px;z-index:5;white-space:nowrap}
.coordinate-plot .emotion:hover{background:#ffffff90}
.coordinate-plot .emotion[aria-pressed=true]{background:#354334;color:#fff;box-shadow:0 2px 5px #30352f15}
.plot-legend{display:flex;gap:15px;flex-wrap:wrap;margin:18px 0 0 var(--axis-gutter);color:#7b8373;font-size:9px}
.plot-legend>span{display:flex;align-items:center;gap:5px}
.plot-legend i{width:5px;height:5px;border:1px solid #7c8872;border-radius:50%;background:#7c8872}
.plot-legend .pending{background:transparent}
.coordinate-caption{display:block;font-size:8px;letter-spacing:1px;color:#7c8473;margin-bottom:4px}
.coordinate-controls{margin-top:22px}
.coordinate-controls label{font-size:12px}
.coordinate-controls output{font-family:'DM Sans',sans-serif;font-size:12px;color:#52624e}
.current-mood h3{letter-spacing:-.5px;font-size:25px;font-weight:500}
.current-mood div>span{font-size:10px;letter-spacing:0;color:#727d67}
.current-mood>span{font-size:9px;letter-spacing:.1px}
@media(max-width:700px){.coordinate-plot{max-width:440px;margin:24px auto 0}.coordinate-controls{margin-top:25px}.current-mood h3{font-size:25px}}
@media(min-width:600px) and (max-width:820px){.coordinate-plot{--axis-gutter:22px}.plot-top>span{font-size:8px}.plot-bottom>span{font-size:8px}.plot-bottom>b{font-size:8px;letter-spacing:.5px}.plot-legend{gap:9px;font-size:8px}.coordinate-plot .emotion{font-size:10px;padding:4px;min-height:24px;line-height:16px}.coordinate-caption{font-size:7px;letter-spacing:.6px}.current-mood>span{font-size:8px}}
@media(hover:none){.coordinate-plot .emotion{min-height:32px;padding:8px 6px}}