/* /assets/css/guide.css
   Reusable styles for guide pages (load after variables.css and site.css):
   intro, numbered steps, OS-specific tabs, code blocks, copy buttons and tips.
*/

/* =========================
   Layout
   ========================= */
.guide-main {
  /* Content indent under each numbered step title; narrower on phones */
  --guide-indent: var(--space-4);
  --guide-list-indent: var(--space-8);
  width: 100%;
  max-width: var(--width-4xl);
  z-index: 10;
}

.guide-intro {
  margin-bottom: var(--space-12);
  text-align: center;
}

.guide-title {
  margin-bottom: var(--space-6);
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.guide-lede {
  max-width: var(--width-3xl);
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--gray-300);
}

@media (min-width: 481px) {
  .guide-main {
    --guide-indent: var(--space-12);
    --guide-list-indent: var(--space-16);
  }
}

@media (min-width: 768px) {
  .guide-title {
    font-size: var(--text-4xl);
    line-height: var(--leading-4xl);
  }
}

/* =========================
   Steps
   ========================= */
.guide-step {
  margin-bottom: var(--space-14);
}

.guide-step:last-of-type {
  margin-bottom: var(--space-8);
}

.guide-step__title {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  color: var(--color-text);
}

.step-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  margin-right: var(--space-4);
  border: 1px solid var(--gold-base);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--gold-shine);
  box-shadow: inset 0 0 8px rgba(var(--gold-base-rgb), 0.2);
}

.guide-step__text {
  margin-bottom: var(--space-6);
  padding-left: var(--guide-indent);
  color: var(--gray-400);
}

.guide-indent {
  margin-left: var(--guide-indent);
}

.guide-indent--spaced {
  margin-bottom: var(--space-6);
}

.guide-note {
  margin-top: var(--space-3);
  margin-left: var(--guide-indent);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-style: italic;
  color: var(--gray-500);
}

.guide-list {
  margin-left: var(--guide-list-indent);
  list-style: decimal outside;
  color: var(--gray-400);
}

.guide-list > li + li {
  margin-top: var(--space-3);
}

.guide-list > li::marker {
  color: var(--gold-base);
}

.guide-link {
  color: var(--gold-shine);
  transition: color var(--duration-fast) var(--ease-standard);
}

.guide-link:hover,
.guide-link:focus-visible {
  color: var(--color-text-white);
  text-decoration: underline;
}

.ui-label {
  font-weight: 400;
  color: var(--color-text-white);
}

.guide-sub__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-base);
}

.guide-sub__title--spaced {
  margin-bottom: var(--space-3);
}

.guide-sub__text {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--gray-500);
}

.guide-stack {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-8);
}

/* =========================
   Code
   ========================= */
.gold-border {
  border: 1px solid rgba(var(--gold-base-rgb), 0.22);
}

.code-container {
  position: relative;
  padding: var(--space-4);
  background-color: rgba(var(--code-bg-rgb), 0.8);
  border: 1px solid rgba(var(--gold-base-rgb), 0.15);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
}

.code-container.gold-border {
  border-color: rgba(var(--gold-base-rgb), 0.22);
}

.code-container--roomy {
  padding: var(--space-5);
}

/* Command row: code on the left, copy button on the right */
.code-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.code-block {
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--gray-300);
}

.code-block--wrap {
  white-space: pre-wrap;
}

.code-block--break {
  white-space: pre-wrap;
  word-break: break-all;
}

/* Leave room for an overlaid copy button */
.code-block--overlay {
  padding-right: var(--space-8);
}

.syntax-comment { color: var(--gray-500); }
.syntax-keyword { color: var(--gold-shine); }
.syntax-key     { color: var(--gold-base); }

.inline-code {
  padding: var(--space-0-5) var(--space-1-5);
  background-color: rgba(var(--gold-base-rgb), 0.1);
  border: 1px solid rgba(var(--gold-base-rgb), 0.2);
  border-radius: var(--radius-md);
  color: var(--gold-shine);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* =========================
   Copy buttons
   ========================= */
.copy-btn {
  flex-shrink: 0;
  margin-left: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--gold-base);
  transition: color var(--duration-fast) var(--ease-standard);
}

.copy-btn:hover,
.copy-btn:focus-visible {
  color: var(--gold-shine);
}

.copy-btn:focus-visible {
  outline: 2px solid rgba(var(--gold-shine-rgb), 0.35);
  outline-offset: 4px;
}

.copy-btn.is-copied {
  color: var(--color-success);
}

.copy-btn--corner {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  margin-left: 0;
}

.copy-btn--middle {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  margin-left: 0;
  transform: translateY(-50%);
}

.icon {
  width: var(--space-5);
  height: var(--space-5);
}

.icon--sm {
  width: var(--space-4);
  height: var(--space-4);
  margin-right: var(--space-2);
}

/* The copy buttons need JavaScript; hide them when it is unavailable */
.no-js .copy-btn {
  display: none;
}

/* =========================
   OS Tabs
   Without JavaScript every OS panel is shown with a label;
   guide.js swaps .no-js for .js and turns them into tabs.
   ========================= */
.os-tabs {
  overflow: hidden;
  background-color: rgba(var(--code-bg-rgb), 0.4);
  border-radius: var(--radius-sm);
}

.os-tabs--spaced {
  margin-bottom: var(--space-6);
}

.os-tabs__list {
  display: flex;
  padding: 0 var(--space-2);
  background-color: rgba(var(--bg-rgb), 0.8);
  border-bottom: 1px solid rgba(var(--gold-base-rgb), 0.2);
}

.tab-btn {
  flex: 1 1 auto;
  padding: var(--space-3);
  border-bottom: 2px solid transparent;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  letter-spacing: var(--tracking-wider);
  color: rgba(var(--gold-base-rgb), 0.6);
  transition: all 0.3s ease;
}

.tab-btn:hover {
  color: var(--gold-shine);
}

@media (min-width: 641px) {
  .tab-btn {
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-6);
  }
}

.tab-btn:focus-visible {
  outline: 2px solid rgba(var(--gold-shine-rgb), 0.35);
  outline-offset: -2px;
}

.tab-btn.active {
  border-bottom-color: var(--gold-base);
  color: var(--gold-shine);
  text-shadow: 0 0 8px rgba(var(--gold-base-rgb), 0.2);
}

.tab-content {
  padding: var(--space-1);
  animation: fadeIn 0.4s ease-in-out;
}

.tab-label {
  padding: var(--space-3) var(--space-3) var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  letter-spacing: var(--tracking-wider);
  color: var(--gold-shine);
}

.tab-content__note {
  margin-top: var(--space-2);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--gray-500);
}

.no-js .os-tabs__list,
.js .tab-label {
  display: none;
}

.js .tab-content {
  display: none;
}

.js .tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =========================
   Pro tip callout
   ========================= */
.guide-tip {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-10);
  margin-left: var(--guide-indent);
  padding: var(--space-6);
  background-color: rgba(var(--gold-base-rgb), 0.03);
  border: 1px solid rgba(var(--gold-base-rgb), 0.3);
  border-radius: var(--radius-sm);
}

.guide-tip__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--space-1);
  height: 100%;
  background-image: var(--gradient-gold-bar);
}

.guide-tip__title {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold-shine);
}

.guide-tip__text {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--gray-400);
}

/* =========================
   Custom scrollbar for code blocks
   ========================= */
::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(var(--bg-rgb), 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-base-rgb), 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gold-base-rgb), 0.6);
}