/* Compact source previews share the existing water-card colors. */
.water-card.water-heads-up-card{display:flex;flex-direction:column;overflow:visible;min-width:0}
.water-heads-up-card>.water-card-main{display:flex;flex-direction:column;flex:1;min-width:0;color:inherit;text-decoration:none;border-radius:inherit;overflow:hidden}
.water-card-main:focus-visible{outline:3px solid #76e7d3;outline-offset:3px}
.water-heads-up{padding:0 18px 12px;min-width:0}
.water-heads-up-trigger{position:relative;display:inline-flex;max-width:100%}
.water-heads-up-badge{display:inline-flex;align-items:center;gap:7px;min-height:44px;max-width:100%;padding:7px 10px;border:1px solid #52777f;border-radius:9px;background:#16323d;color:#d9efed;font:inherit;font-size:12px;line-height:1.4;text-align:left;cursor:pointer}
.water-heads-up-badge svg{flex-shrink:0}.water-heads-up-badge span{overflow-wrap:anywhere}
.water-heads-up-badge.caution{background:#3b3424;border-color:#917a47;color:#ffe1a2}
.water-heads-up-badge.warning{background:#493035;border-color:#a46a73;color:#ffe0e3}
.water-heads-up-badge:focus-visible{outline:3px solid #76e7d3;outline-offset:3px}
.water-heads-up-tip{display:none;position:absolute;top:100%;left:0;z-index:25;width:260px;max-width:calc(100vw - 70px);padding:10px 12px;border:1px solid #52777f;border-radius:9px;background:#08222d;color:#e9f5f4;font-size:12px;line-height:1.5;box-shadow:0 6px 22px #0005;pointer-events:auto}
@media(hover:hover){body:not(.water-heads-up-hide-tip) .water-heads-up-trigger:hover .water-heads-up-tip{display:block}}
body:not(.water-heads-up-hide-tip) .water-heads-up-trigger:focus-within .water-heads-up-tip{display:block}
@media(max-width:600px){
 .water-heads-up-card>.water-card-main{display:grid;grid-template-columns:110px minmax(0,1fr);flex:initial;overflow:hidden}
 .water-heads-up-card .water-card-art{border-top-left-radius:12px;overflow:hidden}
 .water-heads-up{padding:0 13px 11px}
 .water-heads-up-badge{font-size:12px}
}
@media(max-width:359px){.water-heads-up-card>.water-card-main{grid-template-columns:90px minmax(0,1fr)}}

/* Raise the whole card above neighboring transformed cards while its preview is open. */
.water-card.water-heads-up-card{position:relative;z-index:0}
.water-card.water-heads-up-card:hover,.water-card.water-heads-up-card:focus-within{z-index:3}

/* Keep the condition badge top-left and Saved top-right, on the image. */
.water-heads-up{position:absolute;top:8px;left:8px;z-index:2;max-width:calc(100% - 100px);padding:0}
.water-heads-up-badge{box-sizing:border-box;min-height:44px;padding:7px 9px;font-size:11px;box-shadow:0 2px 10px #03141d55;text-decoration:none}
.water-heads-up-badge.neutral{background:#10303aef;color:#e1f4f0;border-color:#8aa9ab}
.water-heads-up-badge.caution{background:#3b3424f5}.water-heads-up-badge.warning{background:#493035f5}
.water-heads-up-label{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.water-heads-up-tip{box-sizing:border-box;width:260px;max-width:calc(100vw - 70px);white-space:normal}
@media(max-width:600px){
 /* Narrow mobile photo columns use an icon with a full accessible link label. */
 .water-heads-up{top:7px;left:7px;max-width:calc(110px - 38px)}
 .water-heads-up-badge{width:36px;min-height:44px;padding:6px;justify-content:center}
 .water-heads-up-badge .water-heads-up-label{display:none}
 .water-heads-up-card .water-card-saved{font-size:0;gap:0;padding:5px;border-radius:999px}
 .water-heads-up-card .water-card-saved svg{width:12px;height:12px}
}
@media(max-width:359px){.water-heads-up{max-width:calc(90px - 38px)}}

/* No generic placeholder or retained alert badge is shown on a water card. */
.water-heads-up[hidden]{display:none!important}