/* Tested-behaviour guide: the guide template (section nav, reading column) with numbered steps. Odoo 20 list-order Plan guide, forked
   from the ADA Title II guide stylesheet, with the step list of the n8n / Spring fall-back guides. The page's one call to action is
   Product's ask at the end, set as a panel; no form, no feed panel. */
article.tzg-guide { max-width: 72rem; margin-inline: auto; }
/* The H1 is two sentences in display type, 87 characters: balanced, three to four lines at desktop. */
article.tzg-guide h1 { max-width: 30ch; font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
/* the intro keeps the reading measure */
article.tzg-guide .results-intro { max-width: none; }
article.tzg-guide .results-intro > [data-article-intro] > * { max-width: var(--cn-reading-max); }
/* the kicker date stays one unit on a phone */
.tzg-guide .results-intro .eyebrow time { white-space: nowrap; }
.tzg-guide .guide-byline { color: var(--wp-muted); margin: 0 0 var(--wp-8); }
.tzg-guide .guide-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--wp-16); margin-top: var(--wp-12); border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.tzg-guide .guide-nav { padding-top: var(--wp-8); }
.tzg-guide .guide-nav ol { list-style: decimal-leading-zero; padding-left: var(--wp-6); margin: 0; }
.tzg-guide .guide-nav li { padding-left: var(--wp-2); margin-bottom: var(--wp-4); }
.tzg-guide .guide-nav li::marker { font-family: var(--wp-font-mono); color: var(--wp-muted); }
.tzg-guide .guide-nav a { display: inline-flex; align-items: center; min-height: var(--wp-tap); line-height: 1.5; }
.tzg-guide .guide-back { margin-top: var(--wp-4); }
.tzg-guide .guide-reading { min-width: 0; }
article.tzg-guide .results-section:first-child { border-top: 0; margin-top: 0; }
article.tzg-guide .results-section { scroll-margin-top: var(--wp-8); }
/* a date (October 29, 2026), a version with its build (20.0-20261015), a three-part word (make-to-order) and a short command are each one unit on a line */
.tzg-guide .tzg-nobreak { white-space: nowrap; }
/* Narrower than 20rem happens only with enlarged text (at 100% the page is at least 320px): there a unit wider than the line wraps inside its own box instead of crossing the screen. */
@container page (max-width: 19.99rem) { .tzg-guide .tzg-nobreak { display: inline-block; max-width: 100%; overflow-wrap: anywhere; text-decoration: inherit; white-space: normal; } }
/* the image digest breaks between any two hex digits rather than push the page wide; a copy is still one string */
.tzg-guide .tzg-hash { word-break: break-all; }
/* the intro: the lede is the answer (20 late from the default list, 0 after one click on Deadline) */
article.tzg-guide .tzg-intro { max-width: 44em; font-size: var(--wp-text-body); line-height: 1.6; margin: 0 0 var(--wp-4); }

/* Odoo's release note, quoted: its words behind a hairline edge, in the body face; the source line follows the bullets as the text has it */
article.tzg-guide .od-quote { margin: var(--wp-6) 0; padding: var(--wp-1) 0 var(--wp-1) var(--wp-5, 1.25rem); border-left: 3px solid var(--wp-ink); max-width: 40em; }
article.tzg-guide .od-quote p { margin: 0; font-size: 1.125rem; line-height: 1.55; }

/* The steps: each a block under a hairline with its number in the mono gutter. The number is drawn by CSS with empty alt text, so a
   screen reader keeps the list's own position and does not read it twice; role="list" keeps the list in Safari. Bold words are the
   labels Odoo shows; a menu path's arrow stays with the label before it (markup). */
article.tzg-guide ol.gh-steps { list-style: none; counter-reset: gh-step; padding: 0; margin: var(--wp-6) 0 var(--wp-8); border-bottom: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide ol.gh-steps > li { counter-increment: gh-step; position: relative; margin: 0; padding: var(--wp-6) 0 var(--wp-4) 4rem; border-top: var(--wp-rule) solid var(--wp-hair); }
article.tzg-guide ol.gh-steps > li:first-child { border-top: var(--wp-rule-strong) solid var(--wp-ink); }
article.tzg-guide ol.gh-steps > li::before { content: counter(gh-step, decimal-leading-zero); content: counter(gh-step, decimal-leading-zero) / ""; position: absolute; left: 0; top: var(--wp-6); font: 500 1.5rem/1.1 var(--wp-font-mono); letter-spacing: -0.02em; color: var(--wp-ink); }
article.tzg-guide ol.gh-steps > li > p { margin: 0 0 var(--wp-4); max-width: 44em; }
article.tzg-guide ol.gh-steps > li > :last-child { margin-bottom: var(--wp-2); }

/* The "Select all" warning (first-use finding: Select all plans in Odoo's default order): a callout on the panel tint behind a rust
   edge, the flag colour's one job; its bold lead stands on its own line as the callout's head. */
article.tzg-guide .od-warn { margin: var(--wp-6) 0 var(--wp-8); padding: var(--wp-4) var(--wp-4) var(--wp-4) var(--wp-5, 1.25rem); max-width: 44em; background: var(--wp-panel); border-left: 4px solid var(--wp-rust); }
article.tzg-guide .od-warn > strong:first-child { display: block; margin-bottom: var(--wp-2); color: var(--wp-rust); font-size: 1.0625rem; line-height: 1.35; }
/* The screenshot (step 2): Odoo's own screen at its own pixels (440 px wide, never scaled up), in a hairline frame so its white edge
   does not run into the page; the two rust rings are in the image. On a phone it shrinks with the column. */
article.tzg-guide .od-shot { margin: var(--wp-4) 0 var(--wp-6); }
article.tzg-guide .od-shot img { display: block; width: 100%; max-width: 440px; height: auto; border: var(--wp-rule) solid var(--wp-hair); background: #fff; }

/* The ask: Product's words, one paragraph. It closes the page as a panel under the strong rule; its bold question is set as the
   panel's head (display face) and the address is the action, with a 48px hit area that moves no line. */
.tzg-guide .od-ask { margin: var(--wp-12) 0 var(--wp-12); padding: var(--wp-6) var(--wp-6) var(--wp-8); max-width: 44rem; background: var(--wp-panel); border: var(--wp-rule) solid var(--wp-ink); border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.tzg-guide .od-ask-text { margin: 0; max-width: 40em; font-size: var(--wp-text-body); line-height: 1.6; }
.tzg-guide .od-ask-text > strong:first-child { display: block; margin-bottom: var(--wp-3); font: 600 clamp(1.375rem, 1rem + 1.2vw, 1.75rem)/1.12 var(--wp-font-display); letter-spacing: -0.015em; text-wrap: balance; }
.tzg-guide .od-ask-text a { font-weight: 600; text-decoration-thickness: var(--wp-rule-strong); text-underline-offset: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* an inline box's height is its font's content area (about 1.2em), not the line: padding of 24px less 0.6em each side makes it 48px.
   Vertical padding on an inline box moves no line. */
.tzg-guide .od-ask-text a { padding: calc(var(--wp-tap) / 2 - .6em) 4px; margin-inline: -4px; }
.tzg-guide .od-ask-text a:focus-visible { outline-offset: -2px; }

/* one column up to 62.5rem, as on the runtimes guide */
@container page (max-width: 62.5rem) {
  .tzg-guide .guide-body { grid-template-columns: minmax(0, 1fr); gap: var(--wp-8); }
  .tzg-guide .guide-nav { padding-top: var(--wp-6); border-bottom: var(--wp-rule) solid var(--wp-ink); padding-bottom: var(--wp-6); }
  .tzg-guide .guide-nav li { margin-bottom: var(--wp-2); }
  article.tzg-guide .results-section:first-child { padding-top: 0; }
}
@container page (max-width: 43rem) {
  /* two-digit markers need the room on a phone gutter */
  .tzg-guide .guide-nav ol { padding-left: 2.5rem; }
  /* on a phone the step number sits above its lead, so the screenshot keeps the full column */
  article.tzg-guide ol.gh-steps > li { padding-left: 0; padding-top: var(--wp-4); }
  article.tzg-guide ol.gh-steps > li::before { position: static; display: block; margin-bottom: var(--wp-2); font-size: 1.125rem; }
  .tzg-guide .od-ask { padding: var(--wp-5, 1.25rem) var(--wp-4) var(--wp-6); }
  article.tzg-guide .od-quote { padding-left: var(--wp-4); }
  article.tzg-guide .od-quote p { font-size: 1.0625rem; }
}