/* Uptime hero: project status and monitors, using the product components. */
.hero.hero-uptime{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 48px;align-items:center;padding-block:22px 56px}
.hero-uptime h1.long{font-size:clamp(40px,3.9vw,56px)}
.uptime-start{display:grid;gap:8px;max-width:620px}
.uptime-start>label{color:var(--hero-ink);font-size:14px;font-weight:600}
.uptime-start-fields{display:flex;gap:10px;align-items:stretch}
.uptime-start-fields .input{min-width:0;flex:1;padding:14px;font-size:16px;border-color:#ffffff65;border-radius:12px}
.uptime-start-fields .btn.cta,.uptime-join-actions .btn.cta{justify-content:center;padding:14px 18px;font-size:15px;border-radius:12px}
.uptime-start-fields .input:focus{box-shadow:0 0 0 3px #ffffff50}
.uptime-start-note{font-size:13px;color:var(--hero-ink2)}
.hero-uptime .hero-foot{margin-top:24px}
.uptime-join-actions{display:grid;gap:12px;justify-items:start}
.uptime-join-actions .existing-account{margin-top:8px;font-size:14px;color:var(--hero-ink2)}

.uhero{display:grid;min-width:0;max-width:600px;width:100%;justify-self:end}
.uhero .tile,.uhero .uh-banner{color:var(--text)}
.uh-card.tile{display:grid;gap:14px;padding:18px;box-shadow:0 1px 2px #1b2b4a14,0 30px 60px -36px #050a3dcc}
:root[data-hero=cobalt] .uh-card.tile{border-color:#ffffff30}

/* page header, as in the app: app icon and name */
.uh-head{display:flex;align-items:center;gap:12px}
.uh-head .appicon{width:34px;height:34px;border-radius:10px}
.uh-title{display:grid;line-height:1.2}
.uh-title b{font-family:var(--font-display);font-weight:700;font-stretch:var(--display-stretch);font-size:19px;letter-spacing:-.015em}
.uh-title span{font-size:13px;color:var(--text2)}
.uh-example{margin-left:auto;font-size:12px;color:var(--text2)}

/* status banner, with its stats on a second row */
.uh-card .uh-banner.banner{grid-template-columns:auto 1fr;gap:10px 16px;padding:12px 14px}
.uh-card .uh-banner h2{font-size:17px}
.uh-card .uh-banner .banner-ic{width:34px;height:34px}
.uh-card .banner-stats{grid-column:1/-1;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--c) 20%,var(--line))}
.uh-card .uh-banner .banner-stats strong{font-size:17px;display:inline-block}
.uh-card .uh-banner .banner-stats>div{padding-left:14px;margin-left:14px}
.uh-card .uh-banner .banner-stats>div:first-child{padding-left:0;margin-left:0}

/* Monitor rows share the outer card. */
.uh-card .uh-mons.tile{box-shadow:none;border:0;padding:0;background:none}
.uh-card .th{margin-bottom:10px}
.uh-card .mons{margin-top:0}
.uh-card .mon{grid-template-columns:minmax(118px,140px) minmax(0,1fr) 66px;gap:14px;padding:9px 8px}
.uh-card .mon>:nth-child(4){display:none}

@media (max-width:1180px){
  .hero.hero-uptime{grid-template-columns:minmax(0,1fr)}
  .uhero{justify-self:start}
}
@media (max-width:560px){
  .uptime-start-fields{flex-direction:column}
  .uh-card .mon{grid-template-columns:minmax(0,1fr) 72px;gap:8px 12px}
  .uh-card .mon .strip{grid-column:1/-1;grid-row:2}
  .uh-card .uh-banner .banner-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;row-gap:0}
  .uh-card .uh-banner .banner-stats>div{padding-left:12px;margin-left:12px}
  .uh-card .uh-banner .banner-stats strong{font-size:16px}
  .uh-card .uh-banner .banner-stats span{font-size:12px}
}