/* Test run guide (/guide). Builds on live.css: same tokens, header, sheets, buttons and footer. */

.g-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.g-body { min-width: 0; max-width: 900px; }

/* contents, sticky beside the sheets */
.g-toc { position: sticky; top: 96px; font-size: 14px; }
.g-toc-h { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.g-toc ol { counter-reset: toc; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--rule); }
.g-toc li { counter-increment: toc; }
.g-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--fg-2); text-decoration: none; line-height: 1.35; }
.g-toc a:hover { color: var(--fg); border-left-color: var(--ink); }

/* hero */
.g-hero h1 { max-width: 20ch; }
.g-kicker { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); margin-bottom: 14px; }
.g-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.g-flow-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--rule-soft); border-radius: 12px; background: var(--row); }
.g-flow-step b { font-size: 16px; font-weight: 750; letter-spacing: -0.01em; }
.g-flow-step span:last-child { font-size: 13.5px; color: var(--fg-2); line-height: 1.45; }
.g-flow-step + .g-flow-step::before { content: ""; position: absolute; left: -12px; top: 28px; width: 12px; height: 2px; background: var(--marker); }
.g-note { margin-top: 20px; font-size: 14.5px; color: var(--fg-2); max-width: 70ch; }

/* section heads */
.g-part { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); margin-bottom: 6px; }
.g-h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }
.g-intro { margin-top: 10px; font-size: 15.5px; color: var(--fg-2); max-width: 70ch; }
.g-h3 { font-size: 16.5px; font-weight: 750; letter-spacing: -0.01em; margin-top: 28px; }
.g-h3 + p { margin-top: 6px; }
.sheet { scroll-margin-top: 96px; }

/* numbered steps */
.g-steps { counter-reset: gstep; margin-top: 24px; display: flex; flex-direction: column; }
.g-steps > li { counter-increment: gstep; position: relative; padding: 0 0 24px 44px; scroll-margin-top: 96px; }
.g-steps > li + li { padding-top: 24px; border-top: 1px solid var(--rule-soft); }
.g-steps > li::before {
  content: counter(gstep); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink-tint); color: var(--ink); font-size: 14px; font-weight: 750;
}
.g-steps > li + li::before { top: 24px; }
.g-steps > li:last-child { padding-bottom: 0; }
.g-steps h3 { font-size: 16.5px; font-weight: 750; letter-spacing: -0.01em; line-height: 28px; }
.g-steps p, .g-steps .g-list, .g-steps .g-tbl { margin-top: 8px; }
.g-steps p { max-width: 70ch; }

.g-tip { margin-top: 12px !important; padding: 10px 14px; background: var(--marker-wash); border-radius: var(--r-ctl); font-size: 14px; max-width: 70ch; }
.sheet > .g-tip { margin-top: 16px !important; }

.g-list { display: flex; flex-direction: column; gap: 8px; max-width: 70ch; }
.g-list li { position: relative; padding-left: 16px; }
.g-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.sheet > .g-list { margin-top: 16px; }

kbd { font-family: var(--mono); font-size: 0.82em; padding: 0.05em 0.4em; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; background: var(--row); }
code { white-space: nowrap; }
.g-tbl td code { white-space: normal; overflow-wrap: anywhere; }

/* glossary */
.g-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 16px; }
.g-words dt { font-weight: 700; font-size: 14.5px; }
.g-words dd { margin: 4px 0 0; font-size: 14px; color: var(--fg-2); }

/* tables */
.g-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.g-tbl th, .g-tbl td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--rule-soft); }
.g-tbl th:first-child, .g-tbl td:first-child { padding-left: 0; }
.g-tbl th:last-child, .g-tbl td:last-child { padding-right: 0; }
.g-tbl thead th { font-size: 12.5px; font-weight: 650; color: var(--fg-3); border-bottom-color: var(--rule); }
.g-tbl tbody th { font-weight: 650; }
.g-tbl .num { text-align: right; }
.g-steps .g-tbl { max-width: 640px; }
.g-orders, .g-expect { margin-top: 12px; min-width: 640px; }
.g-orders tbody th, .g-expect tbody th { white-space: nowrap; }
.g-orders td code { font-size: 12.5px; white-space: nowrap; }
.g-opt { display: inline-block; margin-left: 4px; font-size: 11.5px; font-weight: 600; color: var(--fg-3); border: 1px solid var(--rule); border-radius: 99px; padding: 0 7px; }
.g-ok, .g-bad, .g-wait { display: inline-block; font-weight: 650; padding: 1px 8px; border-radius: var(--r-tag); }
.g-ok { background: var(--marker-wash); color: var(--fg); }
.g-bad { background: var(--bad-wash); color: var(--bad-ink); }
.g-wait { background: var(--ink-tint); color: var(--ink); }

/* timeline */
.g-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.g-day { padding: 16px; border: 1px solid var(--rule-soft); border-top: 3px solid var(--ink); border-radius: 12px; }
.g-day-n { font-family: var(--mono); font-size: 12.5px; color: var(--fg-3); }
.g-day h3 { font-size: 16px; font-weight: 750; margin-top: 4px; }
.g-day p:last-child { margin-top: 6px; font-size: 13.5px; color: var(--fg-2); }

/* problems */
.g-faq { display: flex; flex-direction: column; margin-top: 16px; }
.g-faq > div { padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.g-faq > div:first-child { border-top: 0; padding-top: 0; }
.g-faq dt { font-weight: 700; }
.g-faq dd { margin: 4px 0 0; color: var(--fg-2); max-width: 70ch; }

.g-back { margin-top: 24px; }

@media (max-width: 1080px) {
  .g-layout { grid-template-columns: 1fr; gap: 24px; }
  .g-toc { position: static; background: var(--sheet); border: 1px solid var(--rule-soft); border-radius: var(--r-sheet); padding: 20px 24px; }
  .g-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; gap: 0 24px; }
  .g-toc a { padding-left: 0; border-left: 0; }
  .g-body { max-width: none; }
}
@media (max-width: 760px) {
  .g-flow, .g-days, .g-words { grid-template-columns: 1fr; }
  .g-flow-step + .g-flow-step::before { left: 28px; top: -12px; width: 2px; height: 12px; }
}
@media (max-width: 600px) {
  .g-toc { padding: 16px; }
  .g-toc ol { grid-template-columns: 1fr; }
  .g-h2 { font-size: 21px; }
  .g-steps > li { padding-left: 38px; }
  .g-steps .g-tbl tbody th { white-space: normal; }
  .g-flow { margin-top: 24px; }
  /* the order and expectation tables read as one card per row on phones; the header cell is the card's title */
  .g-orders, .g-expect { min-width: 0; display: block; }
  .g-orders thead, .g-expect thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .g-orders tbody, .g-expect tbody { display: flex; flex-direction: column; gap: 12px; }
  .g-orders tr, .g-expect tr { display: block; padding: 14px 16px; border: 1px solid var(--rule-soft); border-radius: var(--r-sheet); background: var(--sheet); }
  .g-orders tbody th, .g-expect tbody th { display: block; padding: 0 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--rule-soft); font-size: 15px; white-space: normal; }
  .g-orders td, .g-expect td { display: block; padding: 8px 0 0; border: 0; }
  .g-orders td:first-child, .g-expect td:first-child { padding-left: 0; }
  .g-orders td:last-child, .g-expect td:last-child { padding-right: 0; }
  .g-orders td::before, .g-expect td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 650; color: var(--fg-3); }
  .g-orders td code { white-space: normal; overflow-wrap: anywhere; }
}
@media print {
  .g-layout { display: block; }
  .g-toc { display: none; }
  .g-orders, .g-expect { min-width: 0; }
}