/* Open Standard publication: a specification-style reading page. */
[hidden] { display: none !important; }
body { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.7; }
.site-header, .toc, .pub-meta, .pending, .site-footer { font-family: var(--font-sans); }

/* Geometry. The publication surface is the full page width (no outer max-width).
   Small: one column (contents above, declaration, publication context below).
   Medium: contents | declaration, with the context below the declaration.
   Wide: contents | declaration | context. The side tracks are `auto` and their elements
   carry the fixed widths, so a hidden contents panel or rail occupies no track at all and the
   declaration (minmax(0, 1fr)) takes every remaining pixel. */
.wrap.pub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; margin: 0; padding: 0; min-height: 50vh; }
main { min-width: 0; padding: 2rem var(--gutter) 1rem; }
.pub-aside { padding: 0 var(--gutter) 2rem; }
@media (min-width: 52rem) {
  .wrap.pub { grid-template-columns: auto minmax(0, 1fr); }
  .toc { grid-column: 1; grid-row: 1 / span 2; }
  main { grid-column: 2; grid-row: 1; }
  .pub-aside { grid-column: 2; grid-row: 2; }
}
@media (min-width: 78rem) {
  .wrap.pub { grid-template-columns: auto minmax(0, 1fr) auto; }
  .toc { grid-row: 1; }
  .pub-aside { grid-column: 3; grid-row: 1; position: sticky; top: 5.5rem; align-self: start; max-height: calc(100vh - 7rem); overflow: auto; padding: 2rem var(--gutter) 1rem 0; }
  .pub-meta { width: 16rem; margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--rule-strong); padding-left: 1rem; }
}
.site-header .wrap, .site-footer .wrap { max-width: none; }
.pub-aside:not(:has(.pub-meta:not([hidden]))) { display: none; }
/* the rail is narrow: label above value, nested lists stay single-column */
.pub-aside .pub-meta dl, .pub-aside .pub-meta dd dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
.pub-aside .pub-meta dd { margin-bottom: 0.8rem; }
.pub-aside .pub-meta dd dd { margin-bottom: 0.3rem; }
.pub-aside .pub-meta dd dl { margin-top: 0.2rem; }
.pub-aside .pub-meta ul { padding-left: 1rem; }

/* contents */
.toc { font-size: 0.86rem; padding: 1rem var(--gutter) 0.5rem; border-bottom: 1px solid var(--rule); }
.toc summary { cursor: pointer; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.74rem; color: var(--ink-2); padding: 0.4rem 0; }
.toc ol { list-style: none; margin: 0.3rem 0 0; padding: 0; border-left: 1px solid var(--rule-strong); }
.toc a { display: block; padding: 0.22rem 0 0.22rem 0.8rem; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 52rem) {
  /* the contents panel is flush with the left edge of the surface and runs the full column height */
  .toc { width: 16rem; align-self: stretch; padding: 2rem 1rem 1rem var(--gutter); border-bottom: 0; border-right: 1px solid var(--rule); }
  .toc details { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; }
  .toc summary { pointer-events: none; list-style: none; }
  .toc summary::-webkit-details-marker { display: none; }
}

/* contents tree */
.toc ol ol { margin: 0 0 0.2rem 0.6rem; border-left: 1px solid var(--rule); }
.toc-row { display: flex; align-items: flex-start; }
.toc-chev { flex: 0 0 1.5rem; width: 1.5rem; height: 1.8rem; border: 0; background: none; padding: 0; margin: 0; color: var(--ink-3); position: relative; }
button.toc-chev { cursor: pointer; }
button.toc-chev:hover { color: var(--ink); }
button.toc-chev::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.42rem; height: 0.42rem; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translate(-65%, -50%) rotate(-45deg); transition: transform 0.12s; }
button.toc-chev[aria-expanded="true"]::before { transform: translate(-50%, -65%) rotate(45deg); }
.toc-row > a { flex: 1; min-width: 0; padding: 0.24rem 0.3rem 0.24rem 0; }
.toc-title > .toc-row > a { font-weight: 600; color: var(--ink); }
.toc .toc-row > a[aria-current="location"] { color: var(--ink); font-weight: 600; background: var(--accent-soft); border-left: 0; margin-left: 0; box-shadow: none; }

/* title block */
.pub-head { padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--rule-strong); }
.pub-head h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 1.15; margin: 0 0 0.8rem; font-weight: 600; }
.lede { font-size: 1.2rem; color: var(--ink-2); margin: 0 0 0.8rem; }
.pub-ident { font: 0.85rem var(--font-mono); color: var(--ink-2); margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.pub-status { display: inline-block; font: 600 0.74rem var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; border: 1.5px solid var(--ink-2); color: var(--ink-2); padding: 0.15rem 0.6rem; margin: 0; }

/* the declaration */
.spec { font-size: 1.1rem; }
.spec > h1, .spec > h2, .spec > h3 { font-weight: 600; }
.spec > h2 { font-size: 1.6rem; margin-top: 2.5em; padding-top: 1rem; border-top: 1px solid var(--rule); }
.spec > h1 { font-size: 2rem; }
.spec > h3 { font-size: 1.2rem; }
.spec > :first-child { margin-top: 0; }
.spec > h2:first-child { border-top: 0; padding-top: 0; }

/* publication metadata */
.pub-meta { margin-top: 3.5rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-strong); font-size: 0.88rem; color: var(--ink-2); }
.pub-meta h2 { font: 600 0.74rem var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.8rem; }
.pub-meta dl { margin: 0; display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); gap: 0.4rem 1.2rem; }
.pub-meta dt { font: 0.8rem var(--font-mono); padding-top: 0.1rem; }
.pub-meta dd { margin: 0; overflow-wrap: anywhere; }
.pub-meta dd dl { grid-template-columns: minmax(5rem, auto) minmax(0, 1fr); }
.pub-meta ul { margin: 0; padding-left: 1.1rem; }
@media (max-width: 36rem) { .pub-meta dl { grid-template-columns: 1fr; gap: 0.1rem; } .pub-meta dd { margin-bottom: 0.6rem; } }

/* Publication reading refinements */
.spec { font-size: 1.0625rem; line-height: 1.68; text-wrap: pretty; }
.spec > h1 { font-size: clamp(2rem, 4vw, 2.65rem); line-height: 1.18; letter-spacing: -0.025em; margin-bottom: 1.5rem; }
.spec > h2 { font-size: 1.55rem; line-height: 1.3; letter-spacing: -0.015em; margin-top: 3.5rem; padding-top: 0; border-top: none; }
.spec > h3 { font-size: 1.16rem; line-height: 1.4; margin-top: 2rem; }
.spec p { margin: 0 0 1.2em; }
.spec ul, .spec ol { padding-left: 1.6em; margin: 1.1em 0 1.5em; }
.spec li { padding-left: 0.2em; margin-bottom: 0.4em; }
.spec blockquote { margin: 2rem 0; padding: 0.3rem 0 0.3rem 1.4rem; border-left: 2px solid var(--rule-strong); color: var(--ink-2); }
.spec :not(pre) > code { font-family: var(--font-mono); font-size: 0.86em; overflow-wrap: anywhere; }
.spec pre { overflow-x: auto; padding: 1.2rem 1.4rem; background: var(--surface); border: 1px solid var(--rule); line-height: 1.5; }
.spec table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.5; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--rule); }
.spec th { font-family: var(--font-sans); font-weight: 600; }
/* styling hook only: nothing sets aria-current="location" yet */
.toc a[aria-current="location"] { color: var(--ink); font-weight: 600; border-left: 2px solid currentColor; margin-left: -1px; }

/* On wide screens the contents are always visible: the summary is inert there, so the list
   must not stay collapsed if the window was narrow when the page loaded. */
@media (min-width: 52rem) {
  .toc details > :not(summary) { display: block; }
  .toc details::details-content { content-visibility: visible; display: block; }
}

/* pending notice */
.pending { margin: 2rem 0; padding: 0.9rem 1.1rem; border: 1px solid var(--rule-strong); border-left: 4px solid var(--ink-3); background: var(--surface); color: var(--ink-2); font-size: 0.95rem; }