/* Shared information panel: header row (icon + title), one-line summary, then structured content.
   Used by the reading guide on /try/ and the verify block on /anchors/. No animation, no network. */
.ipanel { scroll-margin-top: calc(var(--header-h) + 1rem); display: grid; gap: 1.1rem; min-width: 0; padding: clamp(1.25rem, 2.4vw, 1.9rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)), var(--surface-1); box-shadow: var(--elev); }
.ipanel > * { min-width: 0; }
.ipanel__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; row-gap: .3rem; align-items: center; }
.ipanel__head .c-ico { grid-row: 1 / span 2; align-self: start; }
.ipanel__title { grid-column: 2; margin: 0; }
.ipanel__sum { grid-column: 2; margin: 0; color: var(--text-dim); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.ipanel p, .ipanel li { color: var(--text-dim); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.ipanel b { color: var(--text); font-weight: 500; }
.ipanel__foot { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ipanel .code pre { font-size: var(--text-code-size); overflow-x: auto; scrollbar-width: thin; }
.ipanel .code + .code { margin-top: 0; }
.ipanel .table-wrap { margin: 0; }

/* numbered steps with the number badge */
.isteps { display: grid; gap: .85rem; list-style: none; padding: 0; margin: 0; }
.isteps > li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .8rem; align-items: start; }
.isteps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 2.5rem; }
.isteps--code { gap: 1.25rem; }
.isteps--code > li > div { display: grid; gap: .6rem; min-width: 0; }
.num-badge { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--border-hover); background: var(--surface-2); color: var(--text); font: 500 var(--text-code-size) var(--mono); flex: none; }
.isteps li > span > code { color: var(--text-faint); font-size: var(--text-small-size); white-space: nowrap; }

/* what you see / what it means */
.rows2 { display: grid; gap: .75rem; }
.rows2__r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.rows2__r > div { padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(255, 255, 255, .02); display: grid; gap: .35rem; align-content: start; min-width: 0; }
.rows2__r > div:only-child { grid-column: 1 / -1; }
.rows2__lab { text-transform: uppercase; color: var(--text-faint); }
.rows2 p { margin: 0; }

/* key facts as small chips */
.facts-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.facts-chips li { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.facts-chips li b { font: 500 var(--text-code-size) var(--mono); color: var(--text); }
.facts-chips code { font-size: var(--text-small-size); color: var(--text-dim); }

/* calm callout in the notice colour */
.callout { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; border: 1px solid color-mix(in srgb, var(--notice) 38%, transparent); border-left-width: 3px; border-radius: var(--r-control); background: color-mix(in srgb, var(--notice) 7%, transparent); color: var(--text-dim); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.callout .c-ico { flex: none; width: 2rem; height: 2rem; color: var(--notice); border-color: color-mix(in srgb, var(--notice) 38%, transparent); background: transparent; }
.callout .c-ico svg { width: 1.05rem; height: 1.05rem; }
.callout b { color: var(--notice); font-weight: 500; }

@media (max-width: 47.99rem) {
  .isteps--2, .rows2__r { grid-template-columns: minmax(0, 1fr); }
  .isteps li > span > code { white-space: normal; overflow-wrap: anywhere; }
}