/* Fixes page: the upgrade-command generator. Layout + small step styling only;
   everything else reuses the design system in shellproof.css. */

.fix-gen {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 880px) {
  .fix-gen { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.fix-controls { position: sticky; top: calc(var(--nav-h, 60px) + 20px); }
@media (max-width: 880px) {
  .fix-controls { position: static; }
}

.fix-controls .field:last-child { margin-bottom: 0; }
.fix-controls .segmented { display: flex; width: 100%; }

/* Each generated step */
.fix-step { margin: 0 0 22px; }
.fix-step:last-child { margin-bottom: 0; }
.fix-step-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
.fix-step-num {
  flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--fg); color: var(--bg);
  font: 600 12px/22px var(--font-sans); text-align: center;
}
.fix-step-title { font-size: 15px; font-weight: 550; letter-spacing: -0.01em; }
.fix-step .note { margin: 10px 0 0; font-size: 13.5px; }

/* Result group heading (Upgrade / Restart / Verify) */
.fix-result h2 { font-size: 20px; letter-spacing: -0.02em; margin: 34px 0 16px; }
.fix-result > .fix-block:first-child h2 { margin-top: 0; }
.fix-block { margin-bottom: 8px; }

.fix-target {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  font-size: 13px; color: var(--fg-muted);
}
.fix-target strong { color: var(--fg); font-weight: 600; }

.fix-notes { list-style: none; padding: 0; margin: 14px 0 0; }
.fix-notes li {
  position: relative; padding: 6px 0 6px 20px; font-size: 13.5px; color: var(--fg-muted); line-height: 1.5;
}
.fix-notes li::before {
  content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--fg-faint);
}

/* Mitigation + checklist cards */
.mit { margin-bottom: 16px; }
.mit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mit-head h3 { font-size: 16px; font-weight: 550; margin: 0; }
.mit-file { font: 12px/1.4 var(--font-mono); color: var(--fg-muted); overflow-wrap: anywhere; }
.mit .sapi-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 0; }

.after-step { counter-increment: afterc; }
.after-list { counter-reset: afterc; list-style: none; padding: 0; margin: 0; }
.after-list > li { padding: 20px 0; border-bottom: 1px solid var(--border); }
.after-list > li:last-child { border-bottom: 0; }
.after-list h3 {
  font-size: 17px; font-weight: 550; margin: 0 0 8px; display: flex; gap: 12px; align-items: baseline;
}
.after-list h3::before {
  content: counter(afterc); flex: none; width: 26px; height: 26px; border-radius: 7px;
  background: var(--bg-muted); border: 1px solid var(--border); color: var(--fg);
  font: 600 13px/26px var(--font-sans); text-align: center;
}
.after-list p { color: var(--fg-muted); font-size: 14.5px; margin: 0 0 12px; max-width: 70ch; }

.ref-row { margin-top: 10px; font-size: 12.5px; }
.ref-row a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.ref-row a:hover { color: var(--fg); }