/* Styles shared by the tutorial pages (loaded after main.css + custom.css —
   aliases the eStartup theme's real variables under the names this file was
   originally written against, plus the handful of base components the
   tutorial pages use that the theme itself doesn't define). */

:root {
  --accent: var(--accent-color);
  --accent-soft: color-mix(in srgb, var(--accent-color), transparent 88%);
  --surface: var(--surface-color);
  --surface-2: color-mix(in srgb, var(--default-color), transparent 96%);
  --border: color-mix(in srgb, var(--default-color), transparent 88%);
  --text: var(--default-color);
  --text-muted: color-mix(in srgb, var(--default-color), transparent 40%);
  --radius: 12px;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

body { background: var(--background-color); color: var(--default-color); font-family: var(--default-font); margin: 0; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--background-color); border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.header-row { display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 22px; font-weight: 800; color: var(--heading-color); }
.auth-nav { display: flex; gap: 10px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 50px;
  font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; transition: .2s;
  font-family: var(--default-font);
}
.btn-primary { background: var(--accent-color); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent-color), black 15%); color: #fff; }
.btn-ghost { border-color: var(--border); color: var(--default-color); }
.btn-ghost:hover { border-color: var(--accent-color); color: var(--accent-color); }

.guide-hero {
  padding: 60px 0 30px;
  text-align: center;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-soft), transparent);
}
.guide-hero h1 { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; margin: 0 0 12px; }
.guide-hero h1 span { color: var(--accent); }
.guide-hero p { color: var(--text-muted); max-width: 640px; margin: 0 auto; font-size: 15px; }

.guide-main { padding: 30px 0 90px; display: flex; flex-direction: column; gap: 22px; }

.guide-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px;
}
.guide-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.guide-step-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.guide-step h2 { margin: 0; font-size: 18px; }
.guide-step p, .guide-step li { font-size: 14.5px; color: var(--text-muted); }
.guide-step p strong, .guide-step li strong { color: var(--text); }
.guide-step ol, .guide-step ul { padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }

.guide-figure {
  margin: 16px 0 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 14px;
  overflow-x: auto;
}
.guide-figure svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.guide-caption { font-size: 12.5px; color: var(--text-muted); text-align: center; margin: 8px 0 0; }

kbd.menu-path {
  font-family: inherit;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.note-box {
  border-right: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--text);
  margin-top: 12px;
}
.note-box.warn { border-right-color: #b8860b; background: rgba(184, 134, 11, 0.1); }

.guide-nav-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Diagram text defaults — English UI mockups stay LTR inside the SVGs */
.ui-svg { direction: ltr; }
.ui-svg text { font-family: "Vazirmatn", system-ui, sans-serif; }