/* ============================================================================
   CURRENT PAGE (page-current.hbs)
   ----------------------------------------------------------------------------
   The page reuses the Reserve product-page system (.reserve-page / .rp-* in
   screen.css). Only Current's own pieces live here, namespaced under
   .current-page so they cannot affect any other template.
   ========================================================================== */

/* The Current status item: two right-aligned rate lines and a health dot,
   drawn in HTML so it stays sharp at every size and follows the bar's ink. */
.current-page .cp-mb-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #f2f2f2;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif;
    font-variant-numeric: tabular-nums;
}

.current-page .rp-mb-item.cp-mb-item { padding: 1px 7px; }

.current-page .cp-rates {
    display: inline-grid;
    justify-items: end;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

.current-page .cp-rates small {
    margin-left: 1px;
    font-size: 0.82em;
    font-weight: 500;
    opacity: 0.8;
}

.current-page .cp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #62c08f;
    box-shadow: 0 0 6px rgba(98, 192, 143, 0.55);
    flex: none;
}

.current-page .cp-dot.is-offline  { background: #f0645a; box-shadow: 0 0 6px rgba(240, 100, 90, 0.55); }
.current-page .cp-dot.is-checking { background: #9a9a9a; box-shadow: none; }

/* Magnified copies in the callout and the gallery. */
.current-page .cp-mb-item-large { gap: 12px; }
.current-page .cp-mb-item-large .cp-rates { font-size: 21px; line-height: 1.08; }
.current-page .cp-mb-item-large .cp-dot { width: 12px; height: 12px; }

.current-page .cp-state-stack .cp-mb-item {
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--rp-menubar);
    box-shadow: 0 2px 6px rgba(28, 25, 23, 0.28);
}

.current-page .cp-state-stack .cp-mb-item .cp-rates { font-size: clamp(14px, 1.5vw, 17px); }

/* The app mark animates once, like Reserve's needle: the arrows settle into place. */
.current-page .cp-mark-down { animation: cp-drop 0.9s cubic-bezier(0.22, 0.75, 0.2, 1) 0.15s both; }
.current-page .cp-mark-up   { animation: cp-rise 0.9s cubic-bezier(0.22, 0.75, 0.2, 1) 0.3s both; }

@keyframes cp-drop { from { transform: translateY(-22px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cp-rise { from { transform: translateY(22px);  opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .current-page .cp-mark-down, .current-page .cp-mark-up { animation: none; }
}

/* The ninth tile in the connections grid is an invitation, so it sits quieter. */
.current-page .cp-provider-note .rp-initial { opacity: 0.6; }
.current-page .cp-provider-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Long paths in code chips wrap on phones instead of widening the page. */
.current-page .rp-code { overflow-wrap: anywhere; }