/* ---------- customer guide ----------
   Layered on top of style.css (tokens, .app/.topbar/.content/.btn) and
   gateway.css (.notice). Everything here is prefixed .gd- so it cannot
   collide with the engine panels' own stylesheet, which shares the page
   namespace whenever the proxy serves them. */

.gd { max-width: 940px; padding-bottom: 64px; }

/* ---- the one mistake that breaks most setups: give it real weight ---- */
.gd-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(251,191,36,.10), rgba(248,113,113,.06)),
    var(--surface);
  border: 1px solid rgba(251,191,36,.32);
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
}
.gd-hero-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--amber);
  background: var(--amber-bg);
  border: 1px solid rgba(251,191,36,.3);
}
.gd-hero h2 {
  margin: 2px 0 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.2px;
}
.gd-hero p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 2; }
.gd-hero b { color: var(--text); font-weight: 700; }

/* ---- category groups ----
   A flat run of ten sections reads as one long scroll with numbers on it,
   not as an organised guide. These are the headings that group them - purely
   visual, not interactive. */
.gd-group-title {
  display: flex; align-items: center; gap: 10px;
  margin: 30px 2px 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .2px;
  color: var(--text-dim);
}
.gd-group-title:first-child { margin-top: 0; }
.gd-group-title svg { flex: 0 0 auto; color: var(--accent-1); }
.gd-group-title::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }

/* ---- sections ----
   Native <details>/<summary>: ten fully-written sections at once is a wall of
   text to scroll past to find the one thing that is actually wrong. Closed
   by default except the single most common failure (section 1), which stays
   open the same way it always has. */
.gd-sec {
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
}
.gd-sec > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  cursor: pointer; list-style: none; user-select: none;
}
.gd-sec > summary::-webkit-details-marker,
.gd-sec > summary::marker { display: none; content: ""; }
.gd-sec > summary h3 { margin: 0; }
.gd-chev {
  flex: 0 0 auto; color: var(--text-faint);
  transition: transform .2s var(--ease), color .16s var(--ease);
}
.gd-sec:hover > summary .gd-chev { color: var(--text-dim); }
.gd-sec[open] > summary .gd-chev { transform: rotate(180deg); color: var(--accent-1); }
.gd-sec-body { margin-top: 16px; }
.gd-sec h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.2px;
}
.gd-num {
  flex: 0 0 auto;
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  background: var(--accent-grad);
}
.gd-lead { margin: 0 0 10px; color: var(--text-dim); font-size: 14px; line-height: 2.05; }
.gd-lead b { color: var(--text); font-weight: 700; }
.gd-lead i { font-style: normal; color: var(--accent-1); }

.gd-code-inline {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 2px;
  border-radius: 6px;
  font-family: "SF Mono", ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  color: var(--accent-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---- copyable command blocks ---- */
.gd-cmd { position: relative; margin: 6px 0 4px; }
.gd-cmd pre {
  margin: 0;
  padding: 18px 18px 18px 18px;
  border-radius: var(--radius-md);
  background: var(--code-bg);
  border: 1px solid var(--border);
  color: var(--code-fg);
  font-family: "SF Mono", ui-monospace, Consolas, monospace;
  font-size: 12.8px;
  line-height: 1.95;
  overflow-x: auto;
  text-align: left;
  /* Comments and blank lines carry the explanation, so wrapping long
     lines is better than hiding them behind a scrollbar on mobile. */
  white-space: pre-wrap;
  word-break: break-word;
}
.gd-copy {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  padding: 6px 13px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .18s var(--ease);
}
.gd-copy:hover { color: var(--text); border-color: var(--accent-1); }
.gd-copy.done { color: var(--ink); background: var(--green); border-color: var(--green); }

/* ---- the "password once" flow ---- */
.gd-flow {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 16px;
}
.gd-step {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  text-align: center;
}
.gd-step > span {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  margin-bottom: 8px;
  border-radius: 7px;
  font-size: 11.5px; font-weight: 800;
  color: var(--text-dim);
  background: var(--hover-tint);
  border: 1px solid var(--border);
}
.gd-step b { display: block; font-size: 13.5px; font-weight: 700; }
.gd-step small { display: block; margin-top: 4px; font-size: 11.8px; color: var(--text-faint); line-height: 1.7; }
.gd-step.ok { border-color: rgba(52,211,153,.35); background: var(--green-bg); }
.gd-step.ok > span { color: var(--green); border-color: rgba(52,211,153,.4); }
.gd-arrow { align-self: center; flex: 0 0 auto; color: var(--text-faint); }

/* ---- lists ---- */
.gd-list { margin: 0; padding: 0 18px 0 0; list-style: none; }
.gd-list li {
  position: relative;
  padding: 0 16px 0 0;
  margin-bottom: 11px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 2.05;
}
.gd-list li:last-child { margin-bottom: 0; }
.gd-list li::before {
  content: "";
  position: absolute;
  top: 13px; right: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-1);
  opacity: .75;
}
.gd-list b { color: var(--text); font-weight: 700; }

/* ---- engine chips ---- */
.gd-engines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.gd-engine {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--text);
  transition: all .18s var(--ease);
}
.gd-engine:hover {
  border-color: var(--accent, var(--accent-1));
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px var(--accent, var(--accent-1));
}
.gd-engine b { display: block; font-size: 13.5px; color: var(--accent, var(--text)); }
.gd-engine span { display: block; margin-top: 3px; font-size: 11.8px; color: var(--text-faint); }

/* ---- error reference ---- */
.gd-faq { display: grid; gap: 10px; }
.gd-faq > div {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.gd-faq b {
  display: block;
  font-size: 13.2px;
  font-weight: 700;
  color: var(--red);
  font-family: "SF Mono", ui-monospace, Consolas, monospace;
}
.gd-faq b:not([dir]) { font-family: var(--font); color: var(--amber); }
.gd-faq p { margin: 6px 0 0; font-size: 13.4px; color: var(--text-dim); line-height: 1.95; }

/* ---- narrow screens ---- */
@media (max-width: 780px) {
  .gd { padding: 20px 16px 48px; }
  .gd-hero { padding: 18px; gap: 13px; }
  .gd-hero h2 { font-size: 17px; }
  .gd-sec { padding: 18px 16px; }
  /* Three side-by-side steps become unreadable slivers; stack them and
     drop the arrows, which only make sense horizontally. */
  .gd-flow { flex-direction: column; }
  .gd-arrow { display: none; }
  .gd-cmd pre { font-size: 12px; padding: 16px 14px; }
  .gd-copy { top: 8px; left: 8px; padding: 5px 11px; font-size: 11.5px; }
}

/* ---- numbered walkthrough (Cloudflare token) ----
   An ordered list rather than .gd-list: these are steps that must be followed
   in sequence, and the customer needs to be able to say "I'm stuck on 5". */
.gd-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gdstep;
}
.gd-steps > li {
  position: relative;
  counter-increment: gdstep;
  padding: 0 34px 0 0;
  margin-bottom: 13px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 2;
}
.gd-steps > li:last-child { margin-bottom: 0; }
.gd-steps > li::before {
  content: counter(gdstep);
  position: absolute;
  top: 4px; right: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-1);
  background: rgba(110, 168, 254, .1);
  border: 1px solid rgba(110, 168, 254, .28);
}
.gd-steps b { color: var(--text); font-weight: 700; }

/* Cloudflare permission rows, laid out like the dashboard's own three columns
   so they can be matched by eye instead of by reading prose. */
.gd-perm {
  display: grid;
  gap: 7px;
  margin: 10px 0;
}
.gd-perm > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 7px;
  direction: ltr;
}
.gd-perm span, .gd-perm b {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
}
.gd-perm b {
  color: var(--green);
  font-weight: 700;
  background: var(--green-bg);
  border-color: rgba(52, 211, 153, .3);
}

@media (max-width: 780px) {
  .gd-steps > li { padding-right: 30px; font-size: 13.5px; }
  .gd-perm > div { gap: 5px; }
  .gd-perm span, .gd-perm b { padding: 7px 6px; font-size: 11.5px; }
}

/* ---- trust / FAQ accordion ----
   Each question is its own <details> inside the section - a customer
   deciding whether to trust us with root passwords should be able to open
   exactly the one question they have, not read five answers to find it. */
.gd-qa { display: grid; gap: 8px; }
.gd-qa-item {
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
.gd-qa-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  cursor: pointer; list-style: none; user-select: none;
  font-size: 13.8px; font-weight: 700; color: var(--text);
}
.gd-qa-item > summary::-webkit-details-marker,
.gd-qa-item > summary::marker { display: none; content: ""; }
.gd-qa-item .gd-chev { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-faint); transition: transform .2s var(--ease); }
.gd-qa-item[open] .gd-chev { transform: rotate(180deg); color: var(--accent-1); }
.gd-qa-item[open] > summary { border-bottom: 1px solid var(--border-soft); }
.gd-qa-item p {
  margin: 0; padding: 13px 16px 15px;
  font-size: 13.3px; line-height: 2; color: var(--text-dim);
}
.gd-qa-item p b { color: var(--text); font-weight: 700; }

/* ---- trust badges strip ---- */
.gd-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.gd-trust > div {
  padding: 14px 15px; border-radius: var(--radius-md);
  background: var(--green-bg); border: 1px solid rgba(52,211,153,.26);
  text-align: center;
}
.gd-trust svg { color: var(--green); margin-bottom: 7px; }
.gd-trust b { display: block; font-size: 12.5px; font-weight: 700; }
.gd-trust span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-faint); line-height: 1.7; }

@media (max-width: 780px) {
  .gd-trust { grid-template-columns: 1fr; }
}