/* ========== ForestStudio — install page (install.qmd) ========== */
:root{
  --fsi-green-50: #F0FDF4;
  --fsi-green-100: #DCFCE7;
  --fsi-amber-50: #FFFBEB;
  --fsi-amber-200: #FDE68A;
  --fsi-amber-700: #B45309;
  --fsi-muted: #485b52;
}

.fsi-page{ max-width: 52rem; min-width: 0; }
.fsi-page code{ overflow-wrap: anywhere; }
.fsi-page pre{ max-width: 100%; overflow-x: auto; }
.fsi-page pre code{ overflow-wrap: normal; }

/* Tabs in the site green instead of Bootstrap blue */
.fsi-page .panel-tabset .nav-link{ color: var(--fsi-muted); font-weight: 600; }
.fsi-page .panel-tabset .nav-link:hover{ color: var(--fs-accent, #0b4f30); }
.fsi-page .panel-tabset .nav-link.active{ color: var(--fs-accent, #0b4f30); border-top: 3px solid var(--fs-accent, #0b4f30); }

/* --- Hero: intro + download button --- */
.fsi-hero{
  background: var(--fsi-green-50);
  border: 1px solid var(--fsi-green-100);
  border-radius: 16px;
  padding: 1.5rem 1.6rem;
  margin: .5rem 0 1.25rem;
}
.fsi-hero p{ font-size: 1.15rem; line-height: 1.55; color: #23352c; margin: 0 0 1rem; }
.fsi-hero .fsi-version{ font-size: .9rem; color: var(--fsi-muted); margin: .75rem 0 0; }
.fsi-hero a.btn-solid{ font-size: 1.05rem; padding: .7rem 1.4rem; }

/* --- Requirements strip --- */
.fsi-reqs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
  margin: 0 0 2rem;
}
.fsi-req{
  background: #fff;
  border: 1px solid var(--fs-border, #e6eaef);
  border-radius: 12px;
  padding: .8rem 1rem;
}
.fsi-req p{ margin: 0; font-size: .92rem; color: var(--fsi-muted); }
.fsi-req p:first-child{ font-weight: 700; color: var(--fs-ink, #0e1b14); font-size: 1rem; }
.fsi-req.is-off{ background: #F9FAFB; }
.fsi-req.is-off p:first-child{ color: #6B7280; }

/* --- Numbered step cards (a plain Markdown ordered list inside .fsi-steps) --- */
.fsi-steps > ol{
  list-style: none;
  counter-reset: fsi-step;
  padding: 0;
  margin: 1rem 0 1.5rem;
}
.fsi-steps > ol > li{
  counter-increment: fsi-step;
  position: relative;
  background: #fff;
  border: 1px solid var(--fs-border, #e6eaef);
  border-radius: 12px;
  padding: .85rem 1rem .85rem 3.4rem;
  margin-bottom: .6rem;
}
.fsi-steps > ol > li::before{
  content: counter(fsi-step);
  position: absolute;
  left: 1rem;
  top: .8rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--fs-accent, #0b4f30);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fsi-steps > ol > li > p{ margin: 0 0 .4rem; }
.fsi-steps > ol > li > :last-child{ margin-bottom: 0; }
.fsi-steps pre{ margin: .5rem 0; }

/* The step where the OS security check blocks the app */
.fsi-steps > ol > li:has(.fsi-blocker-label){
  background: var(--fsi-amber-50);
  border-color: var(--fsi-amber-200);
}
.fsi-steps > ol > li:has(.fsi-blocker-label)::before{ background: var(--fsi-amber-700); }
.fsi-blocker-label{
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--fsi-amber-700);
  margin-bottom: .2rem;
}

/* Screenshots side by side, stacked on phones */
.fsi-shots{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
  margin: .6rem 0 .2rem;
}
.fsi-shots figure{ margin: 0; }
.fsi-shots img{ width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--fs-border, #e6eaef); }
.fsi-shots figcaption{ font-size: .85rem; color: var(--fsi-muted); margin-top: .3rem; }

/* --- Done card --- */
.fsi-done{
  border: 2px solid var(--fs-accent, #0b4f30);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  margin: 2rem 0 1.25rem;
  box-shadow: 0 6px 18px rgba(11,79,48,.10);
}
.fsi-done h2{ margin-top: 0; border: 0; }
.fsi-done img{ width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--fs-border, #e6eaef); margin: .5rem 0 1rem; }

/* --- Help box --- */
.fsi-help{
  background: #F9FAFB;
  border: 1px solid var(--fs-border, #e6eaef);
  border-radius: 12px;
  padding: .9rem 1.1rem;
  color: var(--fsi-muted);
}
.fsi-help p{ margin: 0; }