/* ==========================================================================
   Self-Hosted App — detail page. Studio theme; scoped under .shd-page.
   ========================================================================== */

.shd-page{
  --shd-ok:#0f8f74;    --shd-ok-soft:rgba(77,184,168,.15);
  --shd-warn:#9a6a11;  --shd-warn-soft:rgba(245,215,110,.28);
  --shd-bad:#c0392b;   --shd-bad-soft:rgba(255,107,107,.14);
}

.shd-crumbs{font-family:var(--font-mono); font-size:12px; color:var(--muted); margin:0 0 18px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.shd-crumbs a{color:var(--accent); text-decoration:none}
.shd-crumbs a:hover{text-decoration:underline}

/* ---------- header ---------- */
.shd-head{display:flex; gap:18px; align-items:flex-start; margin-bottom:20px}
.shd-logo{width:66px; height:66px; border-radius:14px; flex:none; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden; box-shadow:var(--shadow-sm)}
.shd-logo img{max-width:78%; max-height:78%; object-fit:contain}
.shd-logo .fb{font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--muted)}
.shd-head__main{flex:1; min-width:0}
.shd-head__top{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.shd-head__top h1{font-family:var(--font-display); font-size:clamp(26px,3.2vw,36px); font-weight:700;
  letter-spacing:-.02em; color:var(--ink); margin:0; line-height:1.1}
.shd-status{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11.5px;
  font-weight:600; padding:5px 11px; border-radius:999px; white-space:nowrap}
.shd-status .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.shd-status--maintained{color:var(--shd-ok); background:var(--shd-ok-soft)}
.shd-status--stale{color:var(--shd-warn); background:var(--shd-warn-soft)}
.shd-status--abandoned{color:var(--shd-bad); background:var(--shd-bad-soft)}
.shd-status--unknown{color:var(--muted); background:color-mix(in srgb, var(--ink) 8%, transparent)}
.shd-tagline{margin:8px 0 10px; color:var(--muted); font-size:16px; line-height:1.5}
.shd-tags{display:flex; flex-wrap:wrap; gap:7px}
.shd-tag{font-family:var(--font-mono); font-size:11px; color:var(--muted); text-decoration:none;
  border:1px solid var(--line); padding:4px 10px; border-radius:999px}
a.shd-tag:hover{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent)}

/* ---------- facts strip ---------- */
.shd-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:8px}
.shd-fact{background:var(--surface); padding:12px 14px}
.shd-fact .k{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.shd-fact .v{font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); margin-top:3px;
  font-variant-numeric:tabular-nums; line-height:1.15}
.shd-fact .v.shd-diff--easy{color:var(--shd-ok)} .shd-fact .v.shd-diff--medium{color:var(--shd-warn)} .shd-fact .v.shd-diff--hard{color:var(--shd-bad)}
.shd-verified{font-family:var(--font-mono); font-size:11px; color:var(--muted); margin:0 0 24px}

/* ---------- body columns ---------- */
/* 300px (was 260px) so the course promo card — designed for a right sidebar —
   has room to breathe. The page widened 5xl->7xl, so the main column still
   gains ~216px of the new space. */
.shd-cols{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start}
.shd-block{margin-bottom:24px}
.shd-block h2{font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); margin:0 0 10px}
.shd-summary{color:var(--ink); font-size:15.5px; line-height:1.65; margin:0}
.shd-replaces{display:flex; flex-wrap:wrap; gap:8px}
.shd-repl{font-family:var(--font-mono); font-size:12.5px; color:var(--accent-strong);
  background:color-mix(in srgb, var(--accent) 9%, transparent); padding:5px 11px; border-radius:8px}
.shd-note{margin:9px 0 0; color:var(--muted); font-size:13px}
.shd-features{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.shd-features li{position:relative; padding-left:22px; color:var(--ink); font-size:14.5px; line-height:1.5}
.shd-features li::before{content:"\2713"; position:absolute; left:0; top:0; color:var(--shd-ok); font-weight:700}
.shd-deploys{display:flex; flex-wrap:wrap; gap:8px}
.shd-deploy{font-family:var(--font-mono); font-size:12px; color:var(--ink); border:1px solid var(--line);
  padding:6px 12px; border-radius:8px; background:var(--surface-2)}

/* ---------- sidebar ---------- */
.shd-side{display:flex; flex-direction:column; gap:14px; position:sticky; top:90px}
.shd-links{display:flex; flex-direction:column; gap:8px}
.shd-link{font-family:var(--font-mono); font-size:13px; text-decoration:none; text-align:center;
  color:var(--ink); border:1px solid var(--line); background:var(--surface); padding:11px 14px; border-radius:10px; transition:.13s}
.shd-link:hover{border-color:var(--sha-line-2,color-mix(in srgb,var(--ink) 22%,transparent)); color:var(--accent)}
.shd-link--primary{color:#fff; background:var(--accent); border-color:var(--accent)}
.shd-link--primary:hover{background:var(--accent-strong); color:#fff}
/* Coolify how-to-self-host guide upsell — warm + distinct, only when a real guide exists */
.shd-link--guide{color:#fff; background:var(--shd-warn); border-color:color-mix(in srgb,var(--shd-warn) 70%,#000)}
.shd-link--guide:hover{filter:brightness(1.06); color:#fff}
/* alt-to cross-links under Replaces */
.shd-altlinks{display:flex; flex-direction:column; gap:6px; margin-top:11px}
.shd-altlinks a{font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--accent); text-decoration:none}
.shd-altlinks a:hover{text-decoration:underline}
.shd-hostbox{border:1px solid var(--line); border-radius:var(--radius); padding:15px; background:var(--surface-2)}
.shd-hostbox__k{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.shd-hostbox p{margin:6px 0 10px; font-size:13px; color:var(--muted); line-height:1.5}
.shd-hostbox a{font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--accent); text-decoration:none}
.shd-hostbox a:hover{text-decoration:underline}

/* ---------- changelog ---------- */
.shd-changelog ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.shd-changelog li{font-family:var(--font-mono); font-size:13px; color:var(--ink); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.shd-changelog .d{color:var(--muted); flex:none}
.shd-changelog .cat{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-strong);
  background:color-mix(in srgb,var(--accent) 9%,transparent); padding:2px 7px; border-radius:5px; flex:none}

/* ---------- alternatives ---------- */
.shd-alts{margin-top:30px; padding-top:24px; border-top:1px solid var(--line)}
.shd-alts h2{font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); margin:0 0 14px}
.shd-alts__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.shd-alt{display:flex; align-items:center; gap:11px; text-decoration:none; border:1px solid var(--line);
  border-radius:var(--radius); padding:12px; background:var(--surface); transition:.13s}
.shd-alt:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent); transform:translateY(-1px)}
.shd-alt__logo{width:36px; height:36px; border-radius:9px; flex:none; background:#fff; border:1px solid var(--line); display:grid; place-items:center; overflow:hidden}
.shd-alt__logo img{max-width:78%; max-height:78%; object-fit:contain}
.shd-alt__logo .fb{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--muted)}
.shd-alt__body{flex:1; min-width:0; display:flex; flex-direction:column}
.shd-alt__body b{font-family:var(--font-display); font-size:14px; color:var(--ink); font-weight:600}
.shd-alt__body span{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shd-alt__stars{font-family:var(--font-mono); font-size:11.5px; color:var(--muted); flex:none}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .shd-cols{grid-template-columns:1fr}
  .shd-side{position:static}
}