/* page-info.css: About (#about) and Community guidelines (#guidelines), info.js. Scoped to .inf (instructor.js owns the .ip- prefix); the reading frame
   (.lg, .lg-read, .lg-sec, .lg-toc) is shared with Privacy and Copyright in dibs.css. Tokens only (spec/system.md).
   Brief: spec/page-info-pages.md (references PB, V291, ST458, SU312, L286). */

.inf .lg-sec h3 { font: var(--t-item); color: var(--ink); }
.inf .lg-sec h2 + .inf-lede { margin-top: calc(-1 * var(--s-1)); }
.inf .inf-lede { color: var(--ink-2); }
.inf .inf-fine, .inf .inf-limit { font: var(--t-meta); color: var(--ink-2); }
.inf .lg-read .inf-fine { font: var(--t-meta); color: var(--ink-2); }
.inf .lg-read a { overflow-wrap: anywhere; }

/* At a glance (ST458: a short muted label over a plain value), laid out as a row to save height */
.inf .inf-sec-glance { margin-top: var(--s-6); }
.inf .inf-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.inf .inf-glance dt { font: var(--t-label); font-weight: 400; color: var(--muted); }
.inf .inf-glance dd { margin: 2px 0 0; font: var(--t-meta); color: var(--ink); font-weight: 500; }

/* Before you pick (V291: a numbered marker beside each item heading; the same circle as Copyright's steps) */
.inf .inf-num { list-style: none; counter-reset: ip; margin: 0; padding: 0; }
.inf .inf-num > li { counter-increment: ip; position: relative; padding-left: 36px; }
.inf .inf-num > li + li { margin-top: var(--s-6); }
.inf .inf-num > li::before { content: counter(ip); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font: var(--t-label); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.inf .inf-num h3 { margin: 0 0 var(--s-1); }
.inf .inf-num p { margin: 0; }

/* Second paragraph behind a disclosure (native details: keyboard and screen reader for free) */
.inf .inf-more { margin-top: var(--s-2); }
.inf .inf-more > summary { display: inline-flex; gap: var(--s-1); min-height: 28px; padding: 2px 0; font: var(--t-meta); font-weight: 500; color: var(--ink-2); }
.inf .inf-more > summary::before { width: 14px; height: 14px; background-size: 14px; }
.inf .inf-more > summary::-webkit-details-marker { display: none; }
.inf .inf-more > summary:hover { color: var(--ink); }
.inf .inf-more > p { margin: var(--s-1) 0 0 7px; padding-left: var(--s-3); border-left: 2px solid var(--line-strong); font: var(--t-meta); color: var(--ink-2); }

/* What it does: two by two, no cards (PB: text sits on the page; ruling: no nested panels) */
.inf .inf-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); margin: 0; padding: 0; }
.inf .inf-grid > li { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.inf .inf-grid h3 { margin: 0 0 var(--s-1); }
.inf .inf-grid p { margin: 0; }
.inf .inf-grid .inf-limit { margin-top: var(--s-2); }

/* Ranking: three columns */
.inf .inf-cols { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: 0; padding: 0; }
.inf .inf-cols > li { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.inf .inf-cols h3 { margin: 0 0 var(--s-1); }
.inf .inf-cols p { margin: 0; font: var(--t-meta); color: var(--ink); }

/* Sample note and tag */
.inf .inf-sample { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-3); padding: 10px 12px; border-radius: var(--r-panel); background: var(--surface-2); font: var(--t-meta); color: var(--ink-2); }
.inf .inf-sample > .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.inf .inf-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; vertical-align: 1px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface-2); color: var(--ink-2); font: var(--t-small); }

/* Corpus figures (ST458 label and value rows; tabular numbers, hairlines) */
.inf .inf-figs { margin: 0 0 var(--s-3); border-top: 1px solid var(--line); }
.inf .inf-figs > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.inf .inf-figs dt { font: var(--t-meta); color: var(--ink-2); }
.inf .inf-figs dd { margin: 0; font: var(--t-meta); font-weight: 500; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.inf .inf-figs-sub { margin-left: var(--s-1); font-weight: 400; color: var(--muted); }

/* Limits: bold lead, plain list with hairlines */
.inf .inf-limits { list-style: none; margin: 0 0 var(--s-3); padding: 0; border-top: 1px solid var(--line); }
.inf .inf-limits > li { margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }

/* Link rows (SU312: icon, title, one muted line, chevron; hairlines between rows) */
.inf .inf-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.inf .lg-sec .inf-rows li { margin: 0; }
.inf .inf-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; gap: var(--s-3); align-items: center; min-height: 56px; padding: var(--s-2) var(--s-2); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.inf .inf-row:hover { background: var(--surface-2); text-decoration: none; }
.inf .inf-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.inf .inf-row-ic .icon { width: 18px; height: 18px; color: var(--ink-2); }
.inf .inf-row-t { display: flex; flex-direction: column; min-width: 0; }
.inf .inf-row-h { font: var(--t-body); font-weight: 500; color: var(--ink); }
.inf .inf-row-d { font: var(--t-meta); color: var(--muted); }
.inf .inf-row-chev .icon { width: 16px; height: 16px; color: var(--muted); }
.inf .inf-sec-where { margin-top: var(--s-6); }
.inf .inf-sec-where h2 { font: var(--t-label); color: var(--muted); margin-bottom: var(--s-2); }

/* Class chats: how a room works beside what not to post */
.inf .inf-dodont { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-8); margin-bottom: var(--s-3); }
.inf .inf-dodont h3 { margin: 0 0 var(--s-2); }
.inf .inf-dodont ul { margin-bottom: var(--s-3); }
/* Do not post rows (.inf-never) keep the plain disc of How a room works (.lg-sec ul): the headings tell the lists apart, never an alarm mark (W40a) */

.inf .inf-act { margin-top: var(--s-4); }

@media (max-width: 767px) {
  .inf .inf-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inf .inf-grid, .inf .inf-cols, .inf .inf-dodont { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .inf .inf-dodont { gap: var(--s-2); }
  .inf .inf-row { min-height: 60px; }
  .inf .inf-more > summary { min-height: 44px; }
}
@media (max-width: 359px) {
  .inf .inf-glance { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .inf .inf-num > li { padding-left: 32px; }
}