/* ==========================================================================
   US aid explorer, round 3 (src/features/aid/compare.js,
   public/assets/js/aid-compare.js): decade compare and coin jars.
   ========================================================================== */

.dc-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin: 0 0 1.25rem; }
.dc-field { display: grid; gap: 0.3rem; min-width: 8.5rem; }
.dc-field span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dc-field select { padding: 0.5rem 0.6rem; font: inherit; font-size: 1rem; font-family: var(--font-serif); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
.dc-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dc-vs { padding-bottom: 0.55rem; font-family: var(--font-serif); font-style: italic; color: var(--muted); }
.js-dc .dc-go { display: none; }

.dc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); }
.dc-panel { margin: 0; min-width: 0; padding: 1rem; border-radius: 6px; background: #F7F2E6; box-shadow: 0 0 0 1px #E4DCC8, 0 18px 36px -28px rgba(42,27,69,.45); }
.dc-panel[data-slot="a"] { order: 1; }
.dc-panel[data-slot="b"] { order: 2; }
.dc-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; margin-bottom: 0.6rem; }
.dc-dec { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.dc-span { font-size: 0.8rem; color: var(--muted); }
.dc-svg { display: block; width: 100%; height: clamp(120px, 16vw, 180px); border-radius: 3px; }
.dc-land { fill: #ECE5D5; }
.dc-dry { stroke: #C9BB98; stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.dc-obl { fill: #8A64C2; }
.dc-dis { fill: #0F7468; }
.dc-yr { font: 600 11px var(--font); fill: #8C7A55; }
.dc-reveal { clip-path: inset(0 0 0 0); }
.dc-panel.is-pouring .dc-reveal { animation: dc-reveal 1.1s cubic-bezier(.4,.1,.2,1) both; }
@keyframes dc-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.dc-tot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0.8rem 0 0; }
.dc-tot dt { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dc-tot dd { margin: 0.15rem 0 0; font-family: var(--font-serif); font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.dc-sw { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.35rem; border-radius: 2px; vertical-align: -1px; }
.dc-sw-obl { background: #8A64C2; }
.dc-sw-dis { background: #0F7468; }
.dc-note { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--muted); }
.dc-ratio { margin: 1rem 0 0; font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; color: var(--ink); }
@media (max-width: 640px) { .dc-pair { grid-template-columns: minmax(0, 1fr); } .dc-panel { padding: 0.8rem; } }

/* ---- Coin jars ---- */
.cj-pick { align-items: center; }
.cj-scale { margin: 0 0 0 auto; font-size: 0.9rem; color: var(--muted); }
.cj-scale strong { color: var(--ink); }
.cj-stage { position: relative; padding: 1.5rem clamp(0.5rem, 2vw, 1.5rem) 0; border-radius: 6px; background: radial-gradient(120% 90% at 50% 0%, #3D2860 0%, #2A1B45 55%, #1A1030 100%); box-shadow: 0 0 0 1px #3A2A5C, 0 24px 48px -30px rgba(18,10,34,.8); overflow: hidden; }
.cj-jars { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(0.4rem, 1.6vw, 1.25rem); align-items: end; }
.cj-jar { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; height: 100%; }
.cj-glass {
  position: relative; height: calc(clamp(150px, 22vw, 260px) * var(--cj-h)); min-height: 14px; margin: 0 auto; width: min(100%, 120px);
  border: 2px solid rgba(230,224,238,.45); border-top: 0; border-radius: 4px 4px 14px 14px;
  background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 40%, rgba(255,255,255,.12) 85%, rgba(255,255,255,.04));
}
.cj-glass::before { content: ""; position: absolute; left: -5px; right: -5px; top: -6px; height: 6px; border-radius: 3px; background: rgba(230,224,238,.55); }
.cj-fill { position: absolute; inset: 3px 3px 3px; border-radius: 2px 2px 10px 10px; background: repeating-linear-gradient(180deg, #E8C873 0 5px, #B98F3A 5px 6px); opacity: .92; }
.cj.is-live .cj-fill { display: none; }
.cj-label { display: grid; gap: 0.1rem; margin: 0.6rem 0 0; padding: 0.6rem 0 1rem; border-top: 1px solid rgba(255,255,255,.08); text-align: center; color: #E6E0EE; }
.cj-amt { font-family: var(--font-serif); font-size: clamp(1rem, 1.6vw, 1.25rem); color: #fff; font-variant-numeric: lining-nums; }
.cj-name { font-size: 0.78rem; line-height: 1.3; color: #D8D2E0; overflow-wrap: anywhere; }
.cj-n { font-size: 0.7rem; color: #D9B36A; }
.cj-jar.is-other .cj-glass { border-style: dashed; }
.cj-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.cj-note { margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--muted); }
.cj-empty { padding: 1.5rem; border-radius: 6px; background: #F4F2F7; border: 1px dashed var(--line); text-align: center; color: var(--muted); }
.cj-empty .cj-jars { max-width: 520px; margin: 0 auto 1rem; grid-auto-flow: column; grid-template-columns: none; }
.cj-empty .cj-glass { height: 90px; border-color: #C9B8DE; background: none; }
.cj-empty .cj-glass::before { background: #C9B8DE; }
@media (max-width: 640px) {
  .cj-jars { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0.5rem; }
  .cj-glass { height: calc(150px * var(--cj-h)); }
  .cj-scale { margin: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dc-panel.is-pouring .dc-reveal { animation: none; } }