/* Entry pages (post-en / post-ar). Kit v2.2.0 tokens only, logical properties only, no hex.
   Layout is driven by the .entry-wrap container, not the viewport, so it survives any shell width.
   Wide  (>= 66rem): prose column | margin (FIG labels) | metadata rail on the inline-END side (opposite the dock).
   Narrow: head, rail as a closed <details class="info"> disclosure, prose, end. */

[hidden] { display: none !important; }
.entry-wrap { container: entry / inline-size; min-inline-size: 0; }
.nw { white-space: nowrap; }
.ui-s { font: var(--jp-typography-weight-ui) var(--ui-s)/var(--jp-lh-label-x) var(--jp-font-ui); }
.entry .no { font-family: var(--jp-typography-family-mono); font-size: var(--jp-typography-scale-01); font-weight: var(--jp-typography-weight-ui); line-height: var(--jp-lh-label-x); color: var(--jp-tx2); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0; } /* the quiet number: Courier, small, secondary, never enlarged */

/* ---- grid ---- */
.entry { --post-fs: var(--jp-typography-scale-03); --ui-s: var(--jp-typography-scale-02); --ui-m: var(--jp-typography-scale-03); --lead: var(--jp-typography-scale-04); --measure: 64ch; --rail-w: 18rem; --rail-k: 5.5rem; --gutter: 4rem; --W: calc(var(--measure) + var(--gutter) + var(--rail-w)); font-size: var(--post-fs); display: grid; gap: var(--jp-size-space-600) var(--jp-size-space-1200); min-inline-size: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rail" "prose" "end"; }
:root[lang="ar"] .entry { --post-fs: calc(var(--jp-typography-scale-03) * 1.125); --measure: 58ch; } /* Arabic keeps its 1.125 ratio at every step (brief 4) */
.entry > * { min-inline-size: 0; }
.entry-head { grid-area: head; display: grid; gap: var(--jp-size-space-400); justify-items: start; }
.entry-head h1 { margin: 0; text-wrap: balance; }
.entry-head .stand { margin: 0; max-inline-size: min(100%, var(--measure)); font-size: var(--lead); line-height: var(--jp-lh-body-x); text-wrap: pretty; }
.filed { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--jp-size-space-100) var(--jp-size-space-600); inline-size: 100%; max-inline-size: var(--measure); margin: 0; color: var(--jp-tx2); }
.filed .kv { white-space: nowrap; }
.filed .no { order: -1; } /* number leads the line, as in the register; at the far end it read as orphaned */
.prose { grid-area: prose; min-inline-size: 0; max-inline-size: var(--measure); }
.entry-end { grid-area: end; display: grid; gap: var(--jp-size-space-1200); max-inline-size: var(--measure); }
.rail { grid-area: rail; min-inline-size: 0; }
@container entry (min-width: 66rem) {
  .entry:not(.entry-wide) { row-gap: var(--jp-size-space-800); column-gap: 0; grid-template-columns: minmax(0, var(--measure)) var(--gutter) var(--rail-w); justify-content: center; grid-template-areas: "head head rail" "prose . rail" "end . rail"; align-items: start; }
  .entry:not(.entry-wide) .rail { position: sticky; inset-block-start: calc(var(--jp-size-space-1600) + var(--jp-size-space-600)); max-block-size: calc(100dvh - var(--jp-size-space-1600) - var(--jp-size-space-1600)); overflow-y: auto; scrollbar-width: thin; padding-inline-end: var(--jp-size-space-100); }
  .entry-head > :is(h1, .stand) { max-inline-size: calc(100% - var(--gutter)); } /* title and standfirst keep the prose-to-rail gutter */
  .entry:not(.entry-wide) .info > summary { display: none; }
  .entry:not(.entry-wide) .info::details-content { content-visibility: visible; }
}

/* ---- metadata rail: label/value table, series, Markdown actions ---- */
.rail-t { margin: 0; border-block-start: var(--jp-size-stroke-border) solid var(--jp-line); }
.rail-t > div { display: grid; grid-template-columns: var(--rail-k) minmax(0, 1fr); gap: var(--jp-size-space-300); align-items: baseline; padding-block: var(--jp-size-space-200); border-block-end: var(--jp-size-stroke-border) solid var(--jp-line); font: var(--jp-typography-weight-ui) var(--ui-s)/var(--jp-lh-label-x) var(--jp-font-ui); }
.rail-t dt { margin: 0; color: var(--jp-tx2); }
.rail-t dd { margin: 0; min-inline-size: 0; color: var(--jp-tx); }
.rail-t .lang-v a { color: var(--jp-tx); text-decoration: none; }
.rail-t .lang-v [aria-current] { font-weight: var(--jp-typography-weight-strong); }
.rail-t .lang-v a { display: inline-block; padding: var(--jp-size-space-300) var(--jp-size-space-100); margin: calc(-1 * var(--jp-size-space-300)) calc(-1 * var(--jp-size-space-100)); } /* 44px hit area inside the row's own padding */
@media (hover: hover) { .rail-t .lang-v a:hover { color: var(--jp-color-text-link-default); } }
.rail-series { margin-block-start: var(--jp-size-space-600); }
.rail h2 { margin: 0 0 var(--jp-size-space-200); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-01)/var(--jp-lh-label-x) var(--jp-font-ui); color: var(--jp-tx2); }
.rail-series h2 { display: flex; align-items: center; gap: var(--jp-size-space-200); }
.rail-series h2 .jp-ic { flex: none; }
@media (forced-colors: none) { .rail-series h2 .jp-ic { color: var(--jp-color-icon-accent-default); } } /* D-021: the series glyph is the only accent in the rail; the text stays secondary */
.sl { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--jp-size-space-100); }
.sl a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; gap: var(--jp-size-space-200); padding-block: var(--jp-size-space-100); text-decoration: none; color: var(--jp-tx2); font: var(--jp-typography-weight-regular) var(--ui-s)/var(--jp-lh-body-x) var(--jp-font-body); }
.sl a[aria-current="page"] { font-weight: var(--jp-typography-weight-strong); color: var(--jp-tx); }
@media (hover: hover) { .sl a:not([aria-current]):hover { color: var(--jp-tx); } }
.sl a:focus-visible, .pn a:focus-visible, .rail-t a:focus-visible { outline: var(--jp-size-stroke-focus-ring) solid var(--jp-ring); outline-offset: var(--jp-size-stroke-focus-offset); }
.rail-md { display: grid; justify-items: stretch; gap: var(--jp-size-space-200); margin-block-start: var(--jp-size-space-600); }
.rail-md .jp-btn { justify-content: flex-start; }

/* phone / narrow: the rail is a disclosure under the title (closed by default; entry.js manages [open]) */
.info-s { display: flex; align-items: center; justify-content: space-between; gap: var(--jp-size-space-300); min-block-size: var(--jp-size-control-medium); padding-inline: var(--jp-size-space-400); border-radius: var(--jp-size-radius-200); box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line); color: var(--jp-tx); font: var(--jp-typography-weight-ui) var(--ui-s)/var(--jp-lh-label-x) var(--jp-font-ui); cursor: pointer; list-style: none; }
.info-s::-webkit-details-marker { display: none; }
.info-s:focus-visible { outline: var(--jp-size-stroke-focus-ring) solid var(--jp-ring); outline-offset: var(--jp-size-stroke-focus-offset); }
.info-chev { transition: rotate var(--jp-t-hover); }
.info[open] .info-chev { rotate: 180deg; }
.info-b { padding-block-start: var(--jp-size-space-600); }
@container entry (min-width: 66rem) { .entry:not(.entry-wide) .info-b { padding: 0; } }

/* ---- prose (brief 7). Block flow on purpose: margins collapse, so "24 between" means 24. ---- */
.prose > :first-child { margin-block-start: 0; }
.prose > :last-child { margin-block-end: 0; }
.prose p { margin-block: var(--jp-size-space-600); text-align: start; text-wrap: pretty; }
.prose h2 { margin-block: var(--jp-size-space-1200) var(--jp-size-space-400); }
.prose h3 { margin-block: var(--jp-size-space-800) var(--jp-size-space-300); }
.prose h4 { margin-block: var(--jp-size-space-600) var(--jp-size-space-200); }
.prose ul, .prose ol { margin-block: var(--jp-size-space-600); padding-inline-start: var(--jp-size-space-600); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li > ul { list-style: circle; }
.prose li + li { margin-block-start: var(--jp-size-space-200); }
.prose li > :is(ul, ol) { margin-block: var(--jp-size-space-200) 0; }
.prose blockquote { margin-block: var(--jp-size-space-800); padding-inline-start: var(--jp-size-space-600); border-inline-start: var(--jp-size-stroke-border-strong) solid var(--jp-tx2); font-style: normal; }
.prose blockquote p { margin: 0; }
.prose hr { margin-block: var(--jp-size-space-1200); }
.prose :is(figure, .code) { margin-block: var(--jp-size-space-800); }
.prose figure { position: relative; margin-inline: 0; }
.prose img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--jp-size-radius-200); background: var(--jp-color-background-default-secondary); box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line); }
.prose figcaption { text-wrap: pretty; margin-block-start: var(--jp-size-space-200); color: var(--jp-tx2); font: var(--jp-typography-weight-ui) var(--ui-s)/var(--jp-lh-label-x) var(--jp-font-ui); text-align: start; }
.prose { counter-reset: fig; }
.prose figcaption::before { counter-increment: fig; content: "[ FIG. " counter(fig, decimal-leading-zero) " ]"; direction: ltr; unicode-bidi: isolate; margin-inline-end: var(--jp-size-space-300); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0; font-family: var(--jp-typography-family-mono); font-size: var(--jp-typography-scale-01); } /* [ FIG. 01 ] without JS (04 §4); LTR brackets inside Arabic */
.prose a { color: var(--jp-color-text-link-default); text-decoration: none; }
@media (hover: hover) { .prose a:hover { color: var(--jp-tx); } }
.prose :is(h2, h3, h4) + * { margin-block-start: 0; } /* first element after a heading has no space above it; must stay after the element rules above */
/* Wide steps (container; ~1600px and ~2250px viewport): body, headings and rail climb the kit scale (16 > 20 > 24px; Arabic x1.125), prose stays ~65-75 characters. The 64px gutter cannot hold an 80px [ FIG. 01 ] label, so below ~1600px the label stays in the caption line; from 1600px the gutter widens to 6rem and the label sits in it. */
@container entry (min-width: 91rem) {
  .entry { --post-fs: var(--jp-typography-scale-04); --ui-s: var(--jp-typography-scale-03); --ui-m: var(--jp-typography-scale-03); --lead: var(--jp-typography-scale-05); --rail-w: 20rem; --rail-k: 6.5rem; --gutter: 6rem; }
  :root[lang="ar"] .entry { --post-fs: calc(var(--jp-typography-scale-04) * 1.125); }
  .entry-head h1 { font-size: var(--jp-typography-scale-08); }
  .prose h2 { font-size: var(--jp-typography-scale-07); } .prose h3 { font-size: var(--jp-typography-scale-06); } .prose h4 { font-size: var(--jp-typography-scale-05); }
  .prose figure:not(.kg-width-wide, .kg-width-full) figcaption::before { position: absolute; inset-block-start: 0; inset-inline-end: calc(-1 * (var(--gutter) - var(--jp-size-space-200))); inline-size: calc(var(--gutter) - var(--jp-size-space-400)); margin: 0; } /* [ FIG. 01 ] sits in the margin */
}
@container entry (min-width: 130rem) {
  .entry { --post-fs: var(--jp-typography-scale-05); --ui-m: var(--jp-typography-scale-04); --lead: var(--jp-typography-scale-06); --rail-w: 22rem; --rail-k: 7rem; }
  :root[lang="ar"] .entry { --post-fs: calc(var(--jp-typography-scale-05) * 1.125); --measure: 52ch; }
  .entry-head h1 { font-size: var(--jp-typography-scale-09); }
  .prose h2 { font-size: var(--jp-typography-scale-08); } .prose h3 { font-size: var(--jp-typography-scale-07); } .prose h4 { font-size: var(--jp-typography-scale-06); }
}

/* inline code and code blocks: always LTR, monochrome, surface-secondary (brief 7) */
.prose code { direction: ltr; unicode-bidi: isolate; font-family: var(--jp-typography-family-mono); font-size: .875em; background: var(--jp-color-background-default-secondary); padding: .125em .25em; border-radius: var(--jp-size-radius-100); white-space: nowrap; }
.code { padding: var(--jp-size-space-400) var(--jp-size-space-600); border-radius: var(--jp-size-radius-200); background: var(--jp-color-background-default-secondary); box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line); }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--jp-size-space-300); margin-block-end: var(--jp-size-space-200); } /* follows the article direction: copy button at inline-end (left in Arabic) */
.code-lang { color: var(--jp-tx2); font: var(--jp-typography-weight-ui) var(--ui-s)/var(--jp-lh-label-x) var(--jp-font-ui); }
.code-copy { margin-inline-end: calc(-1 * var(--jp-size-space-300)); }
.code pre { margin: 0; overflow-x: auto; white-space: pre; tab-size: 2; font: var(--jp-typography-weight-ui) var(--ui-s)/1.7 var(--jp-typography-family-mono); }
.code pre code { white-space: inherit; font: inherit; background: none; padding: 0; border-radius: 0; overflow-wrap: normal; }
.code pre:focus-visible, .jp-dt-wrap:focus-visible { outline: var(--jp-size-stroke-focus-ring) solid var(--jp-ring); outline-offset: var(--jp-size-stroke-focus-offset); }

/* newsletter block + prev/next */
.sub-card { font-size: var(--ui-m); }
.sub-card .jp-btn-row { align-items: center; }
.entry .state-ok { display: flex; align-items: flex-start; gap: var(--jp-size-space-200); margin: 0; font: var(--jp-typography-weight-ui) var(--ui-m)/var(--jp-lh-label-x) var(--jp-font-ui); }
.entry .state-ok .jp-ic { color: var(--jp-color-icon-positive-default); margin-block-start: calc((1em * var(--jp-lh-label-x) - var(--jp-size-glyph-medium)) / 2); }
.entry .state-hint { margin: 0; color: var(--jp-tx2); font: var(--jp-typography-weight-ui) var(--ui-s)/var(--jp-lh-label-x) var(--jp-font-ui); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jp-size-space-600); padding-block-start: var(--jp-size-space-600); border-block-start: var(--jp-size-stroke-border) solid var(--jp-line); }
.pn a { display: grid; align-content: start; gap: var(--jp-size-space-100); text-decoration: none; }
.pn .k { color: var(--jp-tx2); }
.pn .t { text-wrap: balance; font: var(--jp-typography-weight-heading) var(--lead)/var(--jp-lh-heading-x) var(--jp-font-heading); }
.pn .pn-next { text-align: end; }
@media (hover: hover) { .pn a:hover .t { color: var(--jp-color-text-link-default); } }

@container entry (max-width: 40rem) { .pn { grid-template-columns: 1fr; } .pn .pn-next { text-align: start; } .code { padding-inline: var(--jp-size-space-400); } .filed { max-inline-size: none; } .entry { row-gap: var(--jp-size-space-600); } .entry-end { gap: var(--jp-size-space-800); } .prose h2 { margin-block-start: var(--jp-size-space-800); } .prose hr { margin-block: var(--jp-size-space-800); } .prose :is(figure, .code), .prose blockquote { margin-block: var(--jp-size-space-600); } } /* phone rhythm: 24 between head items, 32 between sections */
@media (max-width: 640px) { .rail-t .lang-v a { padding-inline: var(--jp-size-space-300); margin-inline: calc(-1 * var(--jp-size-space-200)); } .sl { gap: 0; } .sl a { padding-block: var(--jp-size-space-300); } } /* series links reach the 44px touch size */

/* ---- Wide template (custom-wide.hbs): rail above the prose like the phone; Wide = prose + rail width, Full = whole reading area; prose line length unchanged ---- */
.entry-wide .prose :is(.kg-width-wide, .kg-width-full) { max-inline-size: none; }
@container entry (min-width: 66rem) {
  .entry-wide { grid-template-columns: minmax(0, var(--W)); justify-content: center; }
  .entry-wide :is(.rail, .entry-end) { max-inline-size: var(--measure); }
  .entry-wide .prose .kg-width-wide { inline-size: var(--W); }
  .entry-wide .prose .kg-width-full { inline-size: 100cqi; margin-inline-start: calc((var(--W) - 100cqi) / 2); }
}