/* The reading popup (app.js _openMeasurementPopup / _showBuoyPopup: .buoy-measurement-popup), reimagined in the buoy
   modal's language (buoy_modal.css). Look only: what it shows and does is app.js's, unchanged. Every rule is scoped
   by .buoy-measurement-popup, over the base rules in app.css, which stay as they were.

   - Where: over the buoy modal, by the reading it was opened from (a tile, or a row pinned to the status tile), or by
     Last Transmission's (i) at the modal's foot; a tail points at it (its middle, --bmp-tail-x, and which side,
     data-placement, set by _showBuoyPopup).
   - Look: the panels' glass (app.css --bc-glass-*), ringed dark and shadowed so it lifts off the modal's own glass;
     the header as the modal's: the reading's icon in the tiles' tinted chip, its name in Oxanium over its unit in the
     quiet meta line, a soft glow of the brand blue behind the chip; the description in Manrope; the actions as the
     modal's controls: View Chart the brand's blue button, Add Alert the trough-and-ring of the Profile tab's.
   - Last Transmission's (no reading: no data-field) is the header and description only, its chip sending out the
     status tile's faint signal rings. */

/* ── The box: the glass, a fixed width, and a tail to what it is about ─────────────────────────────────────── */
.buoy-measurement-popup {
    width: 304px;
    min-width: 0;
    max-width: calc(100vw - 16px);
    padding: 14px 16px 16px;
    gap: 12px;
    border-radius: 16px;
    /* the glass, and a soft glow of the brand blue from behind the icon's chip */
    background: radial-gradient(circle at 32px 30px, rgba(46, 142, 255, 0.2), rgba(46, 142, 255, 0) 96px), var(--bc-glass-bg);
    -webkit-backdrop-filter: var(--bc-glass-blur);
    backdrop-filter: var(--bc-glass-blur);
    border: var(--bc-glass-border);
    /* the lit edge, a dark ring to part it from the modal's glass under it, and its float */
    box-shadow: var(--bc-glass-edge), 0 0 0 1px rgba(2, 6, 16, 0.5), 0 18px 44px rgba(0, 8, 22, 0.6), 0 3px 10px rgba(0, 0, 0, 0.35);
    color: #e2e8f0;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    transform-origin: var(--bmp-tail-x, 50%) 100%;
    animation: bmp-in 0.16s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* It rises into place from its tail (drops, when below what it is about). */
.buoy-measurement-popup[data-placement="below"] { transform-origin: var(--bmp-tail-x, 50%) 0; animation-name: bmp-in-below; }
@keyframes bmp-in {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes bmp-in-below {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
/* The tail: a square of the glass turned on its corner, half of it showing past the edge, its edge the box's border.
   Its middle sits a pixel inside the box, so its base covers the box's border there (and the lit top edge, pointing
   up) and the two read as one outline. Under the box when it is above what it is about, over it when below. */
.buoy-measurement-popup::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: var(--bmp-tail-x, 50%);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--bc-glass-bottom);
    border: var(--bc-glass-border);
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}
.buoy-measurement-popup[data-placement="below"]::after {
    top: -5px;
    bottom: auto;
    background: var(--bc-glass-top);
    border-width: 1px 0 0 1px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ── The header: the icon in its chip, beside the name over the unit ───────────────────────────────────────── */
/* Edge to edge over the box's top, so Last Transmission's rings (below) reach the box's edges; ruled off from the
   description by a hairline at the box's padding, as the farm card's header (.oxy-fc-head). */
.buoy-measurement-popup .bmp-header {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 11px;
    row-gap: 1px;
    margin: -14px -16px 0;
    padding: 14px 16px 13px;
    border: 0;
    border-radius: 15px 15px 0 0;
    background: none;
}
.buoy-measurement-popup .bmp-header::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: rgba(148, 163, 184, 0.14);
}
/* The chip: the reading tiles' (buoy_modal.css .buoy-measurement-icon). A reading with no icon of its own shows a
   chart's line in it, so the header keeps its shape. */
.buoy-measurement-popup .bmp-icon {
    grid-row: 1 / span 2;
    align-self: center;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    color: #60a5fa;
    font-size: 14px;
    line-height: 1;
}
.buoy-measurement-popup .bmp-icon:empty::before {
    content: "\f201";   /* fa-chart-line */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
/* The name: Oxanium, as the modal's title, on two lines at most; its unit under it, the modal's meta line. With no
   unit (pH, Last Transmission) the name sits in the chip's middle. */
.buoy-measurement-popup .bmp-name {
    grid-column: 2;
    align-self: end;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    text-transform: none;
    color: #f8fafc;
}
.buoy-measurement-popup .bmp-name:last-child { grid-row: 1 / span 2; align-self: center; }
.buoy-measurement-popup .bmp-uom {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(203, 213, 225, 0.72);
}

/* Last Transmission's: its chip sends out the status tile's signal rings (buoy_modal.css .buoy-status-col), faint,
   across the header. */
.buoy-measurement-popup:not([data-field]) .bmp-header {
    background:
        repeating-radial-gradient(circle at 32px 30px, transparent 0 24px, rgba(96, 165, 250, 0.09) 24px 25px, transparent 25px 42px);
}

/* ── The description ─────────────────────────────────────────────────────────────────────────────────────── */
.buoy-measurement-popup .bmp-desc {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.82);
    text-wrap: pretty;
    /* a long one scrolls in place rather than run the box off the screen */
    max-height: min(40vh, 250px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.buoy-measurement-popup .bmp-desc::-webkit-scrollbar { width: 4px; }
.buoy-measurement-popup .bmp-desc::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }

/* ── The actions: View Chart the brand's blue button, Add Alert the modal's trough-and-ring ────────────────── */
.buoy-measurement-popup .bmp-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
    padding: 0;
    border: 0;
}
/* None of app.css's global button (navy fill, 18 px padding, 15 px type, its own hover). */
.buoy-measurement-popup .bmp-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    overflow: visible;
    isolation: auto;
    border: 0;
    border-radius: 12px;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.buoy-measurement-popup .bmp-action > span:empty { display: none; }   /* the app buttons' empty second span */
.buoy-measurement-popup .bmp-action .text { display: inline-flex; align-items: center; gap: 7px; }
.buoy-measurement-popup .bmp-action i { margin: 0; font-size: 12px; }
.buoy-measurement-popup .bmp-action:focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; }
.buoy-measurement-popup .bmp-action:active { filter: brightness(0.92); }
/* View Chart: the brand's blue (buoy_modal.css .blue-pill-button.alarms-add). */
.buoy-measurement-popup .bmp-action[data-action="view-chart"] {
    background: radial-gradient(circle at 50% 0%, #5aa8ff, #2e8eff 60%, #1f6fd6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 14px rgba(46, 142, 255, 0.24);
    color: #ffffff;
}
.buoy-measurement-popup .bmp-action[data-action="view-chart"]:hover {
    background: radial-gradient(circle at 50% 0%, #74b6ff, #4b9dff 60%, #2e8eff);
}
/* Add Alert: the dark trough and hairline of the modal's controls (the Profile tab's menus), lit by a blue ring on
   hover; its bell in the brand's light blue. */
.buoy-measurement-popup .bmp-action[data-action="add-alert"] {
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
}
.buoy-measurement-popup .bmp-action[data-action="add-alert"] i { color: #60a5fa; }
.buoy-measurement-popup .bmp-action[data-action="add-alert"]:hover {
    background: rgba(46, 142, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5);
    color: #ffffff;
}
/* Ocean stations' wave readings (waves.js about()): their one action, Add to my chart, the brand's blue across the
   row. */
.buoy-measurement-popup .bmp-action[data-action="add-to-chart"] {
    grid-column: 1 / -1;
    background: radial-gradient(circle at 50% 0%, #5aa8ff, #2e8eff 60%, #1f6fd6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 14px rgba(46, 142, 255, 0.24);
    color: #ffffff;
}
.buoy-measurement-popup .bmp-action[data-action="add-to-chart"]:hover {
    background: radial-gradient(circle at 50% 0%, #74b6ff, #4b9dff 60%, #2e8eff);
}

@media (prefers-reduced-motion: reduce) {
    .buoy-measurement-popup,
    .buoy-measurement-popup[data-placement="below"] { animation: none; }
    .buoy-measurement-popup .bmp-action { transition: none; }
}