/* The buoy deck, "Your buoys" (buoy_deck.js), in the left panel under the date card: the DO Forecast card's glass
   (oxy_forecast.css #oxy_container, itself the farm card's), its Oxanium title and quiet icon buttons (the date card's
   double chevrons). The buoy shown floats in a porthole of water (app.js's buoy image, as its modal has it, scaled
   in), ringed and pinging in its health colour as its marker on the map does; the fleet is a constellation on a
   faint chart grid. Health colours (--tone): healthy the brand blue, warning amber, critical red, no data slate. */
.module-menu--buoy-deck { margin-bottom: 0; }   /* the deck keeps its own gap, and none when it has no buoys */
.bd.glass-panel {
    margin-bottom: 12px;
    padding: 14px 16px 14px;
    border-radius: 14px;
    background: var(--bc-glass-bg);
    -webkit-backdrop-filter: var(--bc-glass-blur);
    backdrop-filter: var(--bc-glass-blur);
    border: var(--bc-glass-border);
    box-shadow: var(--bc-glass-edge);
    color: #e2e8f0;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.45;
}
.bd, .bd .is-healthy { --tone: 46, 142, 255; }
.bd .is-warning { --tone: 251, 191, 36; }
.bd .is-critical { --tone: 239, 68, 68; }
.bd .is-unknown { --tone: 100, 116, 139; }

/* The global <button> (navy fill, padding) is switched off for every button in the deck. */
.bd button { isolation: auto; overflow: visible; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; cursor: pointer; }
.bd button:focus-visible, .bd-buoy:focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; }

/* The title, the count, previous and next. */
.bd-head { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.bd-title { margin: 0 auto 0 0; font-family: Oxanium, Manrope, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; color: #f8fafc; white-space: nowrap; }
.bd-count { margin-right: 2px; font-size: 12px; font-weight: 700; color: rgba(203, 213, 225, 0.6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd .bd-nav { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px 0; border-radius: 8px; color: rgba(226, 232, 240, 0.65); transition: background-color 0.15s ease, color 0.15s ease; }
.bd .bd-nav:last-child { margin-right: -6px; }
.bd .bd-nav:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.bd-nav i { font-size: 13px; line-height: 1; }

/* The buoy shown: one button (to it on the map), its porthole beside its words. */
.bd-buoy {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 12px -8px 0;
    padding: 8px 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.bd-buoy:hover { background: rgba(96, 165, 250, 0.08); }

/* The porthole: the buoy's image (buildBuoyImageCol: the buoy bobbing at its waterline) scaled into a round window of
   water, ringed in its health colour; a ring pings out from it; its health in a pill over the window's foot. */
.bd-port-wrap { position: relative; width: 92px; height: 92px; }
.bd-port {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 38%, rgba(46, 142, 255, 0.22), rgba(2, 10, 24, 0.85) 72%);
    box-shadow: inset 0 0 0 2px rgba(var(--tone), 0.85), inset 0 0 0 4px rgba(2, 10, 24, 0.6), 0 0 16px rgba(var(--tone), 0.3);
    isolation: isolate;
}
.bd-port .buoy-image-col {
    position: absolute;
    left: 50%;
    top: -4px;
    width: 160px;
    height: 175px;
    margin-left: -80px;
    border-radius: 0;
    transform: scale(0.575);
    transform-origin: 50% 0;
}
.bd-port .buoy-image-col img { width: 160px; border-radius: 0; }
.bd-port .buoy-image-name { display: none; }
.bd-port .buoy-water-gradient { border-radius: 0; }
.bd-ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(var(--tone), 0.55);
    animation: bd-ping 2.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
    pointer-events: none;
}
@keyframes bd-ping {
    0% { transform: scale(1); opacity: 0.9; }
    70%, 100% { transform: scale(1.22); opacity: 0; }
}
.bd-status {
    position: absolute;
    left: 50%;
    bottom: -9px;
    z-index: 2;
    transform: translateX(-50%);
    padding: 2px 8px 3px;
    border-radius: 999px;
    background: rgba(46, 142, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35), 0 2px 8px rgba(2, 10, 24, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #bfdbfe;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    white-space: nowrap;
}
.bd-buoy.is-warning .bd-status,
.bd-buoy.is-critical .bd-status { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(2, 10, 24, 0.5); color: #f8fafc; }
.bd-buoy.is-warning .bd-status { background: #8f6d15; }
.bd-buoy.is-critical .bd-status { background: #b91c1c; }
.bd-buoy.is-unknown .bd-status { background: rgba(100, 116, 139, 0.35); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35), 0 2px 8px rgba(2, 10, 24, 0.5); color: #cbd5e1; }

/* Its words: the name (Oxanium, as the farm names), where it is, then "Show on map": brand-blue text, not a pill (the
   health pill is a label, and this mustn't look like one), lighter and its arrow nudging on with the button's hover. */
.bd-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.bd-name, .bd-place { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-name { font-family: Oxanium, Manrope, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; color: #f8fafc; }
.bd-place { font-size: 12px; font-weight: 600; color: rgba(226, 232, 240, 0.78); }
.bd-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #60a5fa;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.bd-go i { font-size: 10px; transition: transform 0.15s ease; }
.bd-buoy:hover .bd-go { color: #93c5fd; }
.bd-buoy:hover .bd-go i { transform: translateX(3px); }

/* The fleet: a dot per buoy where it lies relative to the others (x east, y north, left/top from JS), on a faint chart
   grid marked N, each in its health colour; the one shown ringed in white and pinging; a dot lifts on hover. */
.bd-fleet {
    position: relative;
    height: 58px;
    margin-top: 6px;
    border-radius: 10px;
    background:
        linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px) 0 0 / 100% 25%,
        linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px) 0 0 / 12.5% 100%,
        radial-gradient(ellipse at 50% 60%, rgba(46, 142, 255, 0.1), transparent 70%),
        rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}
.bd-fleet::before {   /* north */
    content: "N";
    position: absolute;
    top: 11px;
    right: 8px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1;
    color: rgba(148, 163, 184, 0.55);
}
.bd-fleet::after {
    content: "";   /* its arrow, over the N */
    position: absolute;
    top: 5px;
    right: 9.5px;
    width: 0;
    height: 0;
    border-left: 2.5px solid transparent;
    border-right: 2.5px solid transparent;
    border-bottom: 4px solid rgba(148, 163, 184, 0.55);
}
.bd .bd-dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; }
.bd-dot::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: rgb(var(--tone));
    box-shadow: 0 0 6px rgba(var(--tone), 0.7);
    transition: transform 0.15s ease;
}
@media (hover: hover) { .bd .bd-dot:hover::before { transform: scale(1.4); } }
.bd .bd-dot.is-on::before {
    inset: 4px;
    box-shadow: 0 0 0 2px rgba(3, 15, 32, 0.95), 0 0 0 3.5px #f8fafc, 0 0 12px rgba(var(--tone), 0.9);
    animation: bd-dot-ping 2.6s ease-out infinite;
}
@keyframes bd-dot-ping {
    0%   { box-shadow: 0 0 0 2px rgba(3, 15, 32, 0.95), 0 0 0 3.5px #f8fafc, 0 0 12px rgba(var(--tone), 0.9), 0 0 0 3.5px rgba(var(--tone), 0.6); }
    70%, 100% { box-shadow: 0 0 0 2px rgba(3, 15, 32, 0.95), 0 0 0 3.5px #f8fafc, 0 0 12px rgba(var(--tone), 0.9), 0 0 0 12px rgba(var(--tone), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .bd-ping, .bd .bd-dot.is-on::before, .bd-port .buoy-image-col img, .bd-port .buoy-back-waves use, .bd-port .buoy-front-wave use { animation: none; }
    .bd-buoy, .bd-go, .bd-go i, .bd .bd-nav, .bd-dot::before { transition: none; }
}