/* Canonical entrypoint for every EventReady documentation and WebMCP utility page.
   One template: one body class, one shell, one sidebar, one content column, one
   title scale. engine/styles.test.mjs asserts every page uses them.

   NOT `layer(product-foundation)`. Putting product.css in a cascade layer sounds
   tidy and is a trap: Tailwind's preflight is unlayered, and an unlayered rule
   beats a layered one whatever its specificity. So every border, margin and list
   padding product.css set was silently dropped on exactly the pages that loaded
   this file — .docs-sidebar lost its right border, .docs-toc its left, headings
   their margins — while index.html, which links product.css directly, kept all of
   them. One stylesheet behaving two ways is what let these pages drift apart. */
@import url('/shared/product.css?v=51');

:root{
  --docs-header-height:7.5rem;
  --docs-sidebar-width:230px;
  --docs-content-width:780px;
  --docs-toc-width:190px;
  /* One frame, shared by the masthead and the shell. The masthead ran full bleed
     while the shells centred themselves inside their own max-width, so on a wide
     screen the wordmark sat against the page edge and the sidebar began roughly
     three hundred pixels further in. --docs-align is the full-bleed centring
     idiom: the element still spans the window, so a rule or a background reaches
     both edges, while its content lines up with the frame. */
  --docs-measure:calc(var(--docs-sidebar-width) + var(--docs-content-width) + var(--docs-toc-width));
  --docs-gutter:clamp(var(--space-4),4vw,3rem);
  --docs-align:max(var(--docs-gutter),calc((100% - var(--docs-measure)) / 2));
  /* The page opener — eyebrow, title, lede — in one rhythm. Three page types had
     grown three of everything: the eyebrow was Plex Sans on two pages and Plex
     Mono on the rest, the gap beneath it was 14, 16 or 22px, the gap beneath the
     title 11 or 19, and the overview alone dropped 4.4rem before its eyebrow. */
  --lockup-eyebrow-gap:var(--space-3);
  --lockup-lede-gap:var(--space-4);
  --lockup-status-gap:var(--space-5);
  --lockup-end-gap:var(--space-10);
}

.docs-body{
  --docs-header:var(--docs-header-height);
  margin:0;
  background:var(--color-surface);
  background-image:none;
  color:var(--color-text);
  font-family:var(--sans);
}

/* --- masthead ------------------------------------------------------------- */
/* border:0 retires the 2px carbon rule ui.css draws across the old masthead. It
   is the same #siteHeader id, so the pages that link ui.css wore a blue stripe
   the pages that do not never had. */
#siteHeader{position:sticky;z-index:50;top:0;min-height:var(--docs-header-height);border:0;background:transparent}
.docs-site-header{display:grid;grid-template-rows:4.5rem 3rem;border-bottom:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 97%,transparent);backdrop-filter:blur(14px)}
.docs-site-topline{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-inline:var(--docs-align)}
.docs-site-header .docs-product-link{display:inline-flex;align-items:center;gap:var(--space-1);min-height:2.5rem;padding-inline:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:var(--type-caption);font-weight:var(--weight-strong);text-decoration:none}
.docs-site-header .docs-product-link span{color:var(--color-brand)}
.docs-site-header .docs-product-link:hover{border-color:var(--color-brand);color:var(--color-brand)}
.docs-site-nav{display:flex;align-items:stretch;gap:var(--space-6);padding-inline:var(--docs-align);border-top:1px solid color-mix(in srgb,var(--color-border) 65%,transparent);overflow-x:auto;scrollbar-width:none}
.docs-site-nav::-webkit-scrollbar{display:none}
.docs-site-nav a{position:relative;display:flex;align-items:center;flex:0 0 auto;color:var(--color-text-muted);font-size:var(--type-caption);font-weight:var(--weight-medium);text-decoration:none}
.docs-site-nav a:hover{color:var(--color-text)}
.docs-site-nav a[aria-current="page"]{color:var(--color-text);font-weight:var(--weight-strong)}
.docs-site-nav a[aria-current="page"]::after{position:absolute;right:0;bottom:-1px;left:0;height:2px;background:var(--color-brand);content:""}

/* --- shell ---------------------------------------------------------------- */
/* One frame, three slots: a fixed sidebar, content that takes whatever is left,
   and a table of contents that occupies width only where a page has one. The
   third track is `auto`, so on a page without a table of contents it collapses
   to nothing and the content flows into it rather than sitting beside a reserved
   strip of dead space. The sidebar and the content's left edge are identical on
   every page either way — only the content's right edge moves. */
.docs-shell{display:grid;grid-template-columns:var(--docs-sidebar-width) minmax(0,1fr) auto;justify-content:start;max-width:none;margin-inline:0;padding-inline:var(--docs-align)}

/* --- sidebar -------------------------------------------------------------- */
/* One component. It was two — a hand-written .docs-sidebar on the overview and a
   .docs-reference-nav mounted by script everywhere else — with two sets of rules
   that had already drifted on padding and on the current-item marker. */
.docs-sidebar{position:sticky;top:var(--docs-header-height);align-self:start;display:flex;flex-direction:column;height:calc(100dvh - var(--docs-header-height));padding:var(--space-8) var(--space-5) var(--space-5);border-right:1px solid var(--color-border);background:var(--color-surface)}
.docs-sidebar>nav{display:grid;gap:var(--space-6);padding:0}
.docs-sidebar>nav>div{display:grid;gap:var(--space-1)}
.docs-sidebar>nav>div>span{padding:0 var(--space-3) var(--space-2);color:var(--color-text-soft);font-size:var(--type-label);font-weight:var(--weight-strong);text-transform:uppercase;letter-spacing:.08em}
.docs-sidebar nav a{position:relative;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:var(--type-caption);font-weight:var(--weight-medium);line-height:1.45;text-decoration:none}
.docs-sidebar nav a:hover,.docs-sidebar nav a:focus-visible{background:var(--color-brand-subtle);color:var(--color-brand)}
.docs-sidebar nav a[aria-current]{background:transparent;color:var(--color-text);font-weight:var(--weight-strong)}
.docs-sidebar nav a[aria-current]::before{position:absolute;top:var(--space-2);bottom:var(--space-2);left:calc(-1 * var(--space-5) - 1px);width:2px;background:var(--color-brand);content:""}
.docs-sidebar footer{display:grid;gap:var(--space-2);margin-top:auto;padding:var(--space-4) var(--space-3) 0;border-top:1px solid var(--color-border)}
.docs-sidebar footer>span{padding:0;color:var(--color-text-soft);font-size:var(--type-label);font-weight:var(--weight-strong);text-transform:uppercase;letter-spacing:.08em}
.docs-sidebar footer strong{display:flex;align-items:center;gap:var(--space-2);font-size:var(--type-caption)}
.docs-sidebar footer strong i{width:.45rem;height:.45rem;border-radius:50%;background:var(--color-success)}
.docs-sidebar footer small{color:var(--color-text-muted);font-size:var(--type-label)}

/* --- content -------------------------------------------------------------- */
.docs-content{min-width:0;width:100%;max-width:none;padding:var(--space-10) clamp(var(--space-6),5vw,4rem) 6rem}
/* the overview wraps its sections in <article>; the padding belongs to the column */
.docs-content>article{width:100%;padding:0}
.docs-toc{width:var(--docs-toc-width);top:var(--docs-header-height);height:calc(100dvh - var(--docs-header-height));border-color:var(--color-border);background:var(--color-surface)}
.docs-toc>strong{font-size:var(--type-caption)}
.docs-toc nav a,.docs-edit-link{font-size:var(--type-label);line-height:1.5}
.docs-mobile-nav{top:var(--docs-header-height)}

/* --- page opener ---------------------------------------------------------- */
/* One title scale. The reference pages were a step down from the overview, so a
   heading changed size when you clicked between them. */
.docs-section{scroll-margin-top:calc(var(--docs-header-height) + 1rem)}

/* every eyebrow, whatever the page calls it, is the same stamp — and it is the
   same language as the sidebar's section labels, which are already mono caps */
.docs-path,.harness-intro>p:first-child,.docs-body .kicker,.judge-hero>div>p:first-child{
  margin:0 0 var(--lockup-eyebrow-gap)!important;
  color:var(--color-text-soft);
  font-family:var(--mono);
  font-size:var(--type-label)!important;
  font-weight:var(--weight-medium);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.docs-intro,.harness-intro,.docs-body .sheethead,.judge-hero>div{padding-top:0}
.docs-intro,.harness-intro,.docs-body .sheethead{margin-bottom:var(--lockup-end-gap)}
.docs-intro h1,.harness-intro h1,.judge-hero h1,.docs-body .sheethead h1{margin:0 0 var(--lockup-lede-gap);font-family:var(--display);font-size:var(--type-title-1);font-weight:590;line-height:var(--leading-tight);letter-spacing:-.035em;max-width:none}
.docs-lede,.harness-intro>p:last-child,.docs-body .lede,.judge-hero>div>span{margin:0!important}
.docs-section h2,.judge-path h2,.judge-proof h2,.judge-evidence h2,.judge-trust h2{font-family:var(--display);font-size:var(--type-title-2);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.docs-section>p,.docs-lede,.harness-intro>p:last-child,.docs-body .lede{max-width:var(--content-measure);color:var(--color-text-muted);font-size:var(--type-body);line-height:var(--leading-body)}
.docs-path,.harness-intro>p:first-child{font-size:var(--type-label)!important}
.docs-lede,.harness-intro>p:last-child{font-size:var(--type-lede)!important}
/* The page's own facts, under the lede. Four pages used to carry them above the
   title instead, on a ruled band beside a sheet number — 02, 03, 05, with no 01
   and no 04, left over from the docket this was before it was documentation. The
   numbers never matched the order the sidebar lists these pages in. */
.docs-status-line{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--lockup-status-gap);padding-top:var(--space-4);border-top:1px solid var(--color-border);color:var(--color-text-soft)}
.docs-status-line span{display:flex;align-items:center;gap:var(--space-2)}
.docs-status-line i{width:.45rem;height:.45rem;border-radius:50%;background:var(--color-success)}
.docs-status-line a{margin-left:auto;color:var(--color-brand);font-weight:var(--weight-strong);text-decoration:none}
.docs-status-line a:hover{text-decoration:underline}
.docs-status-line,.docs-summary dd,.architecture-flow span,.docs-steps li>span,.docs-steps p,.tool-table-head,.tool-kind,.docs-section pre{font-size:var(--type-label)}
.architecture-flow strong,.architecture-flow>b,.docs-note strong,.docs-note p,.docs-steps strong,.tool-table code,.tool-table p,.docs-caption,.state-rules strong,.state-rules p,.docs-checklist strong,.docs-checklist span,.verification-grid strong,.verification-grid span,.docs-resources dt,.docs-resources dd{font-size:var(--type-caption)!important;line-height:1.55}

/* --- page-specific components, all inside the one body class -------------- */
.harness-output{top:calc(var(--docs-header-height) + var(--space-5))}
.harness-tools,.harness-output,.docs-body .chit{border-color:var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.harness-panel-head,.docs-body .chit-head{background:var(--color-surface-subtle)}
.harness-panel-head>div>span,.harness-panel-head>span,.docs-body .toolsum-note,.docs-body .toolsum .btn,.harness-output .readout,.docs-body .chit-note{font-size:var(--type-label)}
.harness-panel-head h2{font-size:var(--type-body)}
.harness-page-picker>span,.harness-page-picker .field,.docs-body .tool-name,.docs-body .toolbody>p,.docs-body .chit-title{font-size:var(--type-caption)!important;line-height:1.55}
.docs-body .toolsum{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(7.5rem,auto) auto;align-items:center;column-gap:var(--space-3)}
.docs-body .toolsum-note{justify-self:end;text-align:right}
.docs-body .toolsum .btn{justify-self:end;margin-left:0}
.docs-body .field{min-height:var(--control-height);border-color:var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text)}

/* --- judge: no sidebar, same frame ---------------------------------------- */
.judge-view{max-width:none;margin:0;padding-block:var(--space-10) 6rem;padding-inline:var(--docs-align)}

@media(max-width:767px){
  :root{--docs-header-height:7rem}
  .docs-site-header{grid-template-rows:4rem 3rem}
  .docs-site-topline,.docs-site-nav{padding-inline:var(--space-4)}
  .site-brand{gap:var(--space-2)}
  .site-brand strong{font-size:1.05rem}
  .site-brand small{font-size:var(--type-label)}
  .docs-site-header .docs-product-link{min-height:2.25rem;padding-inline:var(--space-2)}
  .docs-site-nav{gap:var(--space-5)}
  .docs-mobile-nav{top:var(--docs-header-height)}
  .docs-section{scroll-margin-top:calc(var(--docs-header-height) + 3rem)}
  .docs-lede,.harness-intro>p:last-child{font-size:var(--type-body)!important}
  .docs-body .toolsum{grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--space-2)}
  .docs-body .toolsum-note{grid-column:2;justify-self:start;text-align:left}
  .docs-body .toolsum .btn{grid-column:3;grid-row:1/3}
  .docs-shell{display:block;padding-inline:0}
  .docs-sidebar{display:none}
  .docs-content{padding:var(--space-8) var(--space-4) 4rem}
  .judge-view{padding-inline:var(--space-4)}
}