/* LILYJO_PUBLIC_VESSEL_STATUS_STYLE_027N20 */
@import url('/static/css/public-follow-raymarine-v027n18.css?v=0.2.7n20-base');

/* The wind rose is replaced by a public-facing vessel status + position card. */
#pub-ray-dashboard .pub-ray-windrose{display:none!important}

.pub-vessel-status-card{
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:18px;
  min-height:215px;
  box-sizing:border-box;
  border:1px solid #184760;
  border-radius:20px;
  background:
    radial-gradient(circle at 18% 25%,rgba(22,168,231,.14),transparent 34%),
    linear-gradient(145deg,#071c2a 0%,#04121c 58%,#020b12 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 12px 30px rgba(0,0,0,.22);
}
.pub-vessel-status-iconbox{
  width:112px;
  height:112px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#0a2b40,#061a28);
  border:1px solid #276585;
  box-shadow:0 0 24px rgba(23,177,240,.12),inset 0 0 0 1px rgba(255,255,255,.035);
}
.pub-vessel-status-icon{
  width:76px;
  height:76px;
  display:block;
  background:#f4fbff;
  -webkit-mask-image:var(--status-icon);
  mask-image:var(--status-icon);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.08));
}
.pub-vessel-status-copy{min-width:0}
.pub-vessel-kicker{
  display:block;
  color:#86aabd;
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:850;
  margin-bottom:7px;
}
.pub-vessel-status-name{
  display:block;
  color:#f4fbff;
  font-size:32px;
  line-height:1.04;
  font-weight:850;
  letter-spacing:-.02em;
  margin-bottom:14px;
}
.pub-vessel-position{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:3px;
}
.pub-vessel-coordinate{
  border:1px solid #173f56;
  border-radius:11px;
  padding:9px 10px;
  background:rgba(1,10,16,.62);
  min-width:0;
}
.pub-vessel-coordinate small{
  display:block;
  color:#7897a9;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}
.pub-vessel-coordinate strong{
  display:block;
  color:#dff5ff;
  font-size:15px;
  line-height:1.2;
  font-weight:750;
  margin-top:3px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.pub-vessel-status-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.pub-vessel-meta-item{
  border:1px solid #15394e;
  border-radius:11px;
  padding:8px 10px;
  background:#020b12;
}
.pub-vessel-meta-item small{
  display:block;
  color:#7591a3;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.pub-vessel-meta-item strong{
  display:block;
  margin-top:2px;
  color:#cfe6f1;
  font-size:11px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pub-vessel-status-missing .pub-vessel-status-icon{opacity:.35}
.pub-vessel-status-missing .pub-vessel-status-name{color:#91a7b3}

/* The old true/apparent wind explanatory note belongs to the removed wind rose. */
#pub-ray-dashboard .pub-ray-note{display:none!important}

@media(max-width:600px){
  .pub-vessel-status-card{grid-template-columns:88px minmax(0,1fr);gap:13px;padding:14px;min-height:180px}
  .pub-vessel-status-iconbox{width:84px;height:84px;border-radius:18px}
  .pub-vessel-status-icon{width:58px;height:58px}
  .pub-vessel-status-name{font-size:27px;margin-bottom:11px}
  .pub-vessel-coordinate{padding:8px}
  .pub-vessel-coordinate strong{font-size:13px}
  .pub-vessel-status-meta{grid-template-columns:1fr 1fr}
}