/* Command & Control page — standalone stylesheet (portfolio palette). */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{background:hsl(0,0%,7%);color:hsl(0,0%,84%);font:300 16px/1.6 Poppins,ui-sans-serif,system-ui,sans-serif;min-height:100vh}
a{color:hsl(45,100%,72%);text-decoration:none}
a:hover{color:hsl(0,0%,98%)}
code{font:.9em ui-monospace,SFMono-Regular,Menlo,monospace;background:hsla(0,0%,100%,.08);padding:.1em .4em;border-radius:5px;color:hsl(0,0%,92%)}
img{max-width:100%}

/* Canonical global site header styles — keep in sync with shared/sitenav.css */
.sitenav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:10px 20px;background:hsl(240,2%,13%);border-bottom:1px solid hsl(0,0%,22%);font-family:Poppins,ui-sans-serif,system-ui,sans-serif}
.sitenav-brand{color:hsl(45,100%,72%);font-weight:600;font-size:15px;letter-spacing:.01em;text-decoration:none;display:inline-block}
.sitenav-links{display:flex;flex-wrap:wrap;gap:4px 16px}
.sitenav-links a{color:hsl(0,0%,84%);font-size:14px;text-decoration:none;padding:4px 0;display:inline-block}
.sitenav-links a:hover,.sitenav-links a.is-active{color:hsl(45,100%,72%)}
@media(max-width:580px){.sitenav{padding:8px 12px}.sitenav-links{gap:2px 12px}.sitenav-links a{font-size:13px}}

.wrap{max-width:1120px;margin:0 auto;padding:36px 20px 48px}
.hero h1{color:hsl(0,0%,98%);font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-.01em;line-height:1.2}
.rule{width:40px;height:5px;border-radius:3px;margin:12px 0 16px;background:linear-gradient(to right,hsl(45,100%,72%),hsl(35,100%,68%))}
.lead{max-width:70ch;color:hsl(0,0%,84%)}
.summary{margin-top:12px;font-size:14px;color:hsla(0,0%,84%,.75)}
.summary .ok{color:hsl(120,50%,65%)}
.summary .warn{color:hsl(35,100%,68%)}

.grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{position:relative;z-index:1;padding:22px 22px 20px;border-radius:14px;background:linear-gradient(to bottom right,hsl(0,0%,25%) 0%,hsla(0,0%,25%,0) 50%);box-shadow:0 16px 30px hsla(0,0%,0%,.25);display:flex;flex-direction:column;gap:10px}
.card::before{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;background:linear-gradient(to bottom right,hsla(240,1%,18%,.251) 0%,hsla(240,2%,11%,0) 100%),hsl(240,2%,13%)}
.card-head{display:flex;align-items:center;gap:12px}
.card-head h2{color:hsl(0,0%,98%);font-size:18px;font-weight:500;line-height:1.3}
.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:hsla(45,100%,72%,.08);color:hsl(45,100%,72%);font-size:22px;flex:none}
.icon ion-icon{display:block}
.what{font-size:14px;color:hsl(0,0%,84%)}
.live{font-size:14px;color:hsl(0,0%,98%);font-weight:500;min-height:1.4em}
.live .ok{color:hsl(120,50%,65%)}
.live .warn{color:hsl(35,100%,68%)}
.live .down{color:hsl(0,70%,65%)}
.live .muted{color:hsla(0,0%,84%,.6);font-weight:300}
.badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.badges img{display:inline-block;height:20px}
.hint{font-size:13px;color:hsla(0,0%,84%,.7)}
.actions{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-block;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:500;color:hsl(45,100%,72%);background:linear-gradient(to bottom right,hsl(0,0%,25%) 0%,hsla(0,0%,25%,0) 50%);position:relative;z-index:1;transition:color .2s,transform .2s}
.btn::before{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;background:hsl(240,2%,13%)}
.btn:hover{color:hsl(0,0%,98%);transform:translateY(-1px)}
.btn-ghost{color:hsl(0,0%,84%)}
.foot{margin-top:36px;padding-top:18px;border-top:1px solid hsl(0,0%,22%);font-size:13px;color:hsla(0,0%,84%,.7)}
/* "How to create one" disclosure inside the hop cards */
.how{font-size:13px;color:hsla(0,0%,84%,.85)}
.how summary{cursor:pointer;color:hsl(45,100%,72%);font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:6px;user-select:none}
.how summary::-webkit-details-marker{display:none}
.how summary::before{content:"\25B8";font-size:11px;transition:transform .2s}
.how[open] summary::before{transform:rotate(90deg)}
.how ul{margin:8px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:6px;list-style:disc}
.how li{line-height:1.5}
.how code{word-break:break-all}
.how strong{color:hsl(0,0%,98%);font-weight:500}
.how .hint{margin-top:8px}

.sitenav-links a.nav-btn {
  border: 1px solid hsl(45, 100%, 72%);
  border-radius: 6px;
  padding: 2px 10px;
  color: hsl(45, 100%, 72%);
  margin-left: 4px;
  line-height: 1.2;
}
.sitenav-links a.nav-btn:hover {
  background: hsla(45, 100%, 72%, 0.1);
  color: hsl(0, 0%, 98%);
}
.sitenav-links a.nav-btn-primary {
  background: hsl(45, 100%, 72%);
  color: hsl(0, 0%, 7%);
  font-weight: 500;
}
.sitenav-links a.nav-btn-primary:hover {
  background: hsl(45, 100%, 80%);
  color: hsl(0, 0%, 7%);
}

html {
  scrollbar-gutter: stable;
}
.auth-links {
  display: contents;
}