/* Trend controls, metric charts, hover tooltip, metadata notes. */

  /* ── section control ─────────────────────────────────── */
  .section-head.has-control{ align-items:flex-end; }
  .section-sub{
    margin:10px 0 0;
    font:9px/1.5 var(--font-mono);
    letter-spacing:.11em;
    color:var(--dim);
  }
  .range-control{
    display:flex; align-items:center; gap:14px;
    padding-bottom:5px;
  }
  .range-label{
    font:8px/1 var(--font-mono);
    letter-spacing:.16em;
    color:var(--dim);
  }
  .segmented{
    position:relative;
    display:inline-grid;
    grid-template-columns:1fr 1fr;
    padding:3px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    background:rgba(9,13,24,.55);
    box-shadow:0 1px 0 rgba(255,255,255,.045) inset;
  }
  .segmented-thumb{
    position:absolute; z-index:0;
    left:3px; top:3px; bottom:3px;
    width:calc(50% - 3px);
    border:1px solid rgba(232,192,122,.22);
    border-radius:999px;
    background:linear-gradient(135deg,rgba(232,192,122,.16),rgba(232,192,122,.055));
    box-shadow:0 0 20px rgba(232,192,122,.07);
    transition:transform .48s var(--ease);
    pointer-events:none;
  }
  .segmented[data-mode="cumulative"] .segmented-thumb{ transform:translateX(100%); }
  .segmented button{
    position:relative; z-index:1;
    min-width:92px;
    padding:8px 15px;
    border:0; border-radius:999px;
    background:transparent;
    color:var(--muted);
    font:9px/1.3 var(--font-mono);
    letter-spacing:.05em;
    cursor:pointer;
    transition:color .3s ease;
    white-space:nowrap;
  }
  .segmented button[aria-pressed="true"]{ color:var(--ink); }
  .segmented button:hover{ color:var(--ink); }

  /* ── metric cards ────────────────────────────────────── */
  .metric-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
  }
  .metric-card{
    position:relative;
    overflow:hidden;
    padding:22px 22px 13px;
    border:1px solid rgba(255,255,255,.095);
    border-radius:24px;
    background:
      linear-gradient(158deg,rgba(15,21,38,.79),rgba(6,9,17,.73)),
      radial-gradient(ellipse at 18% 0%,rgba(76,94,150,.09),transparent 56%);
    box-shadow:
      0 30px 80px rgba(0,0,0,.30),
      0 1px 0 rgba(255,255,255,.06) inset;
    isolation:isolate;
  }
  .metric-card::before{
    content:"";
    position:absolute; left:8%; right:8%; top:-1px; height:1px;
    background:linear-gradient(90deg,transparent,rgba(232,192,122,.48),rgba(119,216,208,.20),transparent);
    opacity:.55;
  }
  .metric-card[data-metric="rank"]::before{
    background:linear-gradient(90deg,transparent,rgba(119,216,208,.45),rgba(232,192,122,.16),transparent);
  }
  .metric-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
    min-height:65px;
    padding-bottom:7px;
  }
  .metric-heading{ display:flex; flex-direction:column; gap:8px; min-width:0; }
  .metric-kicker{
    display:flex; align-items:center; gap:8px;
    font:8px/1 var(--font-mono);
    letter-spacing:.18em;
    color:var(--gold);
  }
  .metric-kicker::before{
    content:"";
    width:4px; height:4px; border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 8px rgba(232,192,122,.75);
  }
  .metric-card[data-metric="rank"] .metric-kicker{ color:var(--teal); }
  .metric-card[data-metric="rank"] .metric-kicker::before{
    background:var(--teal);
    box-shadow:0 0 8px rgba(119,216,208,.75);
  }
  .metric-heading h3{
    margin:0;
    font-size:16px; font-weight:500;
    letter-spacing:.09em;
    color:rgba(242,245,250,.94);
  }
  .metric-summary{
    display:flex; flex-direction:column; align-items:flex-end;
    gap:3px;
    text-align:right;
    min-width:0;
  }
  .metric-term{
    font:8px/1.2 var(--font-mono);
    letter-spacing:.10em;
    color:var(--dim);
    white-space:nowrap;
  }
  .metric-value{
    font:400 39px/.92 var(--font-display);
    letter-spacing:-.02em;
    color:rgba(247,241,228,.97);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .metric-value small{
    margin-left:4px;
    font:9px/1 var(--font-mono);
    letter-spacing:.02em;
    color:var(--dim);
  }
  .metric-card[data-metric="rank"] .metric-value{ color:rgba(219,249,245,.97); }
  .metric-card[data-metric="all"] .metric-kicker{ color:var(--violet-2); }
  .metric-card[data-metric="all"] .metric-kicker::before{
    background:var(--violet-2);
    box-shadow:0 0 8px rgba(200,188,255,.72);
  }
  .metric-card[data-metric="all"] .metric-value{ color:rgba(238,233,255,.97); }
  .metric-card[data-metric="all"]::before{
    background:linear-gradient(90deg,transparent,rgba(182,165,255,.42),rgba(119,216,208,.14),transparent);
  }
  .metric-delta{
    font:8.5px/1.3 var(--font-mono);
    letter-spacing:.04em;
    color:rgba(120,131,149,.95);
    white-space:nowrap;
  }
  .metric-delta.is-up{ color:rgba(232,192,122,.78); }
  .metric-delta.is-down{ color:rgba(196,205,220,.68); }
  .metric-card[data-metric="rank"] .metric-delta.is-up{ color:rgba(119,216,208,.78); }
  .metric-card[data-metric="all"] .metric-delta.is-up{ color:rgba(214,204,255,.78); }

  /* ── chart canvas ────────────────────────────────────── */
  .metric-chart{
    position:relative;
    width:100%;
    min-height:292px;
    margin-top:2px;
    border-radius:12px;
    outline:none;
    touch-action:pan-y;
  }
  .metric-chart:focus-visible{ outline:1px solid rgba(232,192,122,.54); outline-offset:4px; }
  .metric-chart svg{
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
  }
  .chart-svg text{
    font-family:var(--font-mono);
    fill:var(--dim);
    font-size:10px;
    letter-spacing:.06em;
  }
  .chart-svg .grid{
    stroke:rgba(255,255,255,.068);
    stroke-width:1;
    shape-rendering:crispEdges;
  }
  .chart-svg .grid.vertical{
    stroke:rgba(255,255,255,.032);
    stroke-dasharray:2 9;
  }
  .chart-svg .grid.baseline{ stroke:rgba(255,255,255,.11); }
  .chart-svg .axis-label{
    fill:#748095;
    font-size:9.5px;
  }
  .chart-svg .x-label{
    fill:rgba(196,205,220,.82);
    font-family:var(--font-sans);
    font-size:10.5px;
    letter-spacing:.06em;
  }
  .chart-svg .series-line{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:2.6;
    vector-effect:non-scaling-stroke;
  }
  .chart-svg .series-line.gpa{
    stroke:var(--gold);
    filter:drop-shadow(0 0 7px rgba(232,192,122,.27));
  }
  .chart-svg .series-line.rank{
    stroke:var(--teal);
    filter:drop-shadow(0 0 7px rgba(119,216,208,.22));
  }
  .chart-svg .series-line.all{
    stroke:var(--violet-2);
    filter:drop-shadow(0 0 7px rgba(182,165,255,.26));
  }
  .chart-svg .series-line.secondary{
    stroke:rgba(205,214,231,.78);
    stroke-width:1.55;
    stroke-dasharray:4 6;
    opacity:0;
    filter:drop-shadow(0 0 5px rgba(205,214,231,.14));
  }
  .chart-svg .area{ opacity:0; }
  .chart-svg .node{ pointer-events:none; opacity:0; }
  .chart-svg .node-inner{
    transform-box:fill-box;
    transform-origin:center;
    transition:transform .28s var(--ease);
  }
  .chart-svg .node-halo{
    fill:rgba(232,192,122,.14);
    opacity:0;
    transition:opacity .25s ease;
  }
  .chart-svg .node.rank .node-halo{ fill:rgba(119,216,208,.14); }
  .chart-svg .node.all .node-halo{ fill:rgba(182,165,255,.14); }
  .chart-svg .node.round .node-halo{ fill:rgba(205,214,231,.12); }
  .chart-svg .node-core{
    fill:var(--gold);
    stroke:#070b13;
    stroke-width:2;
  }
  .chart-svg .node.rank .node-core{ fill:var(--teal); }
  .chart-svg .node.all .node-core{ fill:var(--violet-2); }
  .chart-svg .node.round .node-core{
    fill:#080c16;
    stroke:rgba(205,214,231,.85);
    stroke-width:1.4;
  }
  .chart-svg .node.is-active .node-inner{ transform:scale(1.8); }
  .chart-svg .node.is-active .node-halo{ opacity:1; }
  .chart-svg .hover-g{
    opacity:0;
    transition:opacity .18s ease;
    pointer-events:none;
  }
  .metric-chart.is-hovering .hover-g{ opacity:1; }
  .chart-svg .hover-line{
    stroke:rgba(232,192,122,.28);
    stroke-width:1;
    stroke-dasharray:3 6;
  }
  .chart-svg .hover-cap{
    fill:var(--gold);
    filter:drop-shadow(0 0 5px rgba(232,192,122,.7));
  }
  .metric-chart[data-metric="rank"] .chart-svg .hover-line{ stroke:rgba(119,216,208,.28); }
  .metric-chart[data-metric="rank"] .chart-svg .hover-cap{
    fill:var(--teal);
    filter:drop-shadow(0 0 5px rgba(119,216,208,.7));
  }
  .metric-chart[data-metric="all"] .chart-svg .hover-line{ stroke:rgba(182,165,255,.30); }
  .metric-chart[data-metric="all"] .chart-svg .hover-cap{
    fill:var(--violet-2);
    filter:drop-shadow(0 0 5px rgba(182,165,255,.72));
  }
  .chart-svg .hover-capture{ cursor:crosshair; }

  /* ── tooltip ─────────────────────────────────────────── */
  .chart-tip{
    position:absolute; left:0; top:0; z-index:8;
    width:214px;
    padding:12px 13px 11px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:14px;
    background:rgba(7,11,20,.92);
    box-shadow:0 22px 60px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.07) inset;
    backdrop-filter:blur(20px) saturate(130%);
    -webkit-backdrop-filter:blur(20px) saturate(130%);
    pointer-events:none;
    opacity:0;
    transform:translate3d(0,0,0);
    transition:opacity .18s ease;
    will-change:transform,opacity;
  }
  .chart-tip.is-visible{ opacity:1; }
  .tip-head{
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    padding-bottom:9px;
    border-bottom:1px solid rgba(255,255,255,.075);
  }
  .tip-head b{ font-size:13px; font-weight:500; letter-spacing:.08em; }
  .tip-head span{
    font:8px/1.45 var(--font-mono);
    color:var(--dim);
    letter-spacing:.05em;
    text-align:right;
  }
  .tip-rows{ display:flex; flex-direction:column; gap:6px; padding-top:9px; }
  .tip-row{
    display:grid; grid-template-columns:14px 1fr auto; align-items:center; gap:7px;
    font-size:10px; color:var(--muted); letter-spacing:.035em;
  }
  .tip-row b{
    font:400 12.5px/1 var(--font-display);
    color:rgba(242,245,250,.94);
    letter-spacing:.02em;
    font-variant-numeric:tabular-nums;
  }
  .tip-row b em{
    font:8px/1 var(--font-mono);
    font-style:normal;
    color:var(--dim);
    margin-left:2px;
  }
  .tip-row.is-primary{ color:rgba(242,245,250,.92); }
  .tip-row.is-primary b{ color:var(--gold-2); }
  .chart-tip[data-metric="rank"] .tip-row.is-primary b{ color:var(--teal-2); }
  .chart-tip[data-metric="all"] .tip-row.is-primary b{ color:var(--violet-2); }
  .tip-swatch{
    width:13px; height:0;
    border-top:2px solid var(--gold);
  }
  .tip-swatch.rank{ border-color:var(--teal); }
  .tip-swatch.all{ border-color:var(--violet-2); }
  .tip-swatch.round{ border-color:rgba(205,214,231,.8); border-top-style:dashed; }
  .tip-swatch.cls{ border-color:rgba(190,199,214,.5); border-top-width:1px; }

  /* ── chart footer + metadata ──────────────────────────── */
  .metric-foot{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:5px 12px;
    margin-top:8px;
    padding:10px 2px 0;
    border-top:1px solid rgba(255,255,255,.065);
    font:8px/1.5 var(--font-mono);
    letter-spacing:.06em;
    color:rgba(120,131,149,.92);
  }
  .metric-foot span{
    display:inline-flex; align-items:center; gap:6px;
  }
  .metric-foot i{
    width:3px; height:3px; border-radius:50%;
    background:rgba(232,192,122,.52);
  }
  .metric-card[data-metric="rank"] .metric-foot i{ background:rgba(119,216,208,.52); }
  .metric-card[data-metric="all"] .metric-foot i{ background:rgba(182,165,255,.58); }
  .rank-legend{
    display:inline-flex; align-items:center; gap:5px;
    color:rgba(120,131,149,.9);
    white-space:nowrap;
  }
  .rank-legend .key{
    width:12px; height:0;
    border-top:1.5px solid var(--teal);
    background:none;
    border-radius:0;
  }
  .rank-legend .key.dashed{
    border-top-color:rgba(205,214,231,.8);
    border-top-style:dashed;
  }

  .chart-notes{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap:8px 22px;
    margin-top:16px;
    padding:14px 3px 0;
    border-top:1px solid rgba(255,255,255,.06);
    font:8.5px/1.5 var(--font-mono);
    letter-spacing:.07em;
    color:rgba(120,131,149,.92);
  }
  .chart-notes span{ display:inline-flex; align-items:center; gap:7px; }
  .chart-notes b{
    font-weight:400;
    color:rgba(196,205,220,.86);
  }
  .chart-notes i{
    width:3px; height:3px; border-radius:50%;
    background:rgba(232,192,122,.55);
  }