/* ============================================================
   Product guides (/boat/guide/, /hashanchor/guide/).
   Loaded after tlay.css and docs.css; adds the illustrated blocks
   tools/guides/build.py emits.
   ============================================================ */

.glede { font-size: 19px !important; color: var(--text) !important; line-height: 1.55 !important; margin-top: 6px !important; max-width: 68ch; }

/* numbered step card */
.gstep { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; margin: 30px 0; position: relative; }
.gstep::before { content: ""; position: absolute; left: 22px; top: 50px; bottom: -30px; width: 2px; background: var(--line); }
.gstep:last-of-type::before { display: none; }
.gstep-n {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 15px; color: #fff; background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-dim); position: relative; z-index: 1;
}
.gstep-b { min-width: 0; padding-top: 8px; }
.docs-body .gstep-t { margin: 0 0 6px; font-family: var(--display); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--text); }
/* guide h2 reads as a section, h3 (FAQ questions) as a plain sub-heading */
.docs-body h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 56px; }
.docs-body > h3 { font-family: var(--display); font-size: 18px; letter-spacing: -0.01em; text-transform: none; color: var(--text); font-weight: 500; }
.gstep-b > p:first-of-type { margin-top: 6px; }

/* terminal window */
.gterm { margin: 22px 0; border: 1px solid var(--line-2); border-radius: 12px; background: #05070a; overflow: hidden; }
.gterm-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.gterm-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.gterm-bar span { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.gterm pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 12.8px; line-height: 1.7; color: var(--text-dim); }
.gterm .p { color: var(--text-faint); }
.gterm .cmd { color: var(--text); }
.gterm .c { color: var(--text-faint); }
.gterm .h { color: var(--accent-2); }
.gterm .ok { color: #5fbf8f; }

/* code block with a label and copy button */
.gcode-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.gcopy { font-family: var(--mono); font-size: 11.5px; color: var(--accent-2); background: none; border: 0; cursor: pointer; padding: 0; }
.gcopy:hover { color: var(--accent); }
.docs-body .gcode pre.code code { color: var(--text); }

/* callouts */
.gnote { margin: 24px 0; max-width: 76ch; border: 1px solid var(--line); border-left: 3px solid var(--gn, var(--accent)); border-radius: 12px; background: var(--surface); padding: 16px 20px; }
.gnote-tip { --gn: #5fbf8f; }
.gnote-warn { --gn: #e0a447; }
.gnote-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gn, var(--accent)); margin-bottom: 6px; }
.docs-body .gnote p { margin: 6px 0 0; font-size: 15.5px; }
.docs-body .gnote p:first-of-type { margin-top: 0; }

/* figures */
.gfig { margin: 30px 0; }
.gfig-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #0a0e14; }
.gfig-scroll > svg { display: block; width: 100%; height: auto; }
/* on a phone the diagrams would shrink below legibility: keep them readable and let them scroll */
@media (max-width: 700px) { .gfig-scroll > svg { min-width: 620px; } }
.gfig figcaption { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--text-faint); max-width: 76ch; }

/* link cards */
.gcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
@media (max-width: 640px) { .gcards { grid-template-columns: 1fr; } }
.docs-body a.gcard { display: block; text-decoration: none; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--surface); transition: border-color .2s, transform .2s; }
.docs-body a.gcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.gcard b { display: block; font-family: var(--display); font-size: 17px; font-weight: 500; color: var(--text); }
.gcard span { display: block; font-size: 14px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.gcard span code { font-size: 12.5px; }

@media (max-width: 560px) {
  .gstep { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .gstep-n { width: 36px; height: 36px; font-size: 13px; box-shadow: 0 0 0 4px var(--accent-dim); }
  .gstep::before { left: 17px; top: 40px; }
}