/**
 * @file facts.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description Facts: named values in two columns, the name (the row label, .poster-label) on the left
 *   and its value on the right, with an optional grey line under the value; one column on a phone.
 *   The look most Settings & Controls tabs already draw (skills, extensions, capabilities, libraries,
 *   packages: identical copies), taken as the one look for this kind (UI consolidation phase 5).
 *   Drawn by components/Facts.js: <dl class="facts"><dt class="facts-k poster-label">…</dt><dd class="facts-v">…</dd></dl>.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.5.1 — 2026-09-27 — The readout's names read var(--shape-case-label) instead of a literal
 *     uppercase (the AIMEAT value, so AIMEAT is unchanged; a theme reaches them). check:shape-tokens.
 *   v1.5.0 — 2026-09-27 — .facts--readout (Facts `readout`): the old app catalogue's .mk-sees, appcat
 *     parity (sections-c); additive.
 *   v1.4.0 — 2026-09-27 — .facts--tiles and .facts-tile (Facts `tiles`): the old app catalogue's About
 *     facts, appcat parity (sections-a); additive.
 *   v1.3.0 — 2026-09-26 — Drawn by components/Facts.js. The meanings the pages' own rules carried become
 *     the component's options, each with the look it had: flush (formerly appdev .ad-kv, apps .ap-kv,
 *     knowledge .kp-kv margin-top 0, and extensions .ex-kv--wide .2rem), missing (a value not known:
 *     contacts .ct-dim and AI .is-unset grey, 2 pages; companies .facts-v.miss grey italic takes it),
 *     pre (memory .mp-value .facts-v), controls (knowledge .kp-orgshare), the action after a value
 *     (agent tasks .facts-v > .poster-action), the actions under a value (contacts and portfolio
 *     .facts-v .og-doors .3rem, 2 pages; the AI tab's .6rem takes it), the coral grey line
 *     (extensions small.is-coral), and a meter inside a value (AI .ai-bar margin-top .5rem).
 *   v1.2.0 — 2026-09-26 — The value's warn tone, .facts-v--warn: a figure that needs a look in the Status's attention colour (formerly agents-detail.css .pf-agd-warning-text), a meaning.
 *   v1.1.0 — 2026-09-25 — The Settings facts move onto it (a unification: the look most tabs use). The
 *     grey line under a value leaves a Form message (small.form-message) to its own look, as the AI
 *     tab's copy did.
 *   v1.0.0 — 2026-09-25 — Initial, with the values of the copies in the Settings tabs (sk-kv, ex-kv,
 *     cp-kv, lb-kv, pk-kv and their keys and values).
 */

.facts { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); gap: .7rem 1.2rem; align-items: start; margin: .8rem 0 0; }
/* The wide cut: a longer name column and more air above (an AI's rule, an opened panel's facts). */
.facts--wide { grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); margin-top: 1rem; }
.facts-k { margin: 0; padding-top: .25rem; }
.facts-v { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
/* The warn tone: a value that needs a look (policy issues above zero), in the attention colour. */
.facts-v--warn { color: var(--warn-fg); }
.facts-v small:where(:not(.form-message)) { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.45; color: var(--text-dim); }
.facts-v .og-crumb-link { font-size: inherit; }
/* The top cut: the facts open their box, no air above. */
.facts--flush { margin-top: 0; }
/* A value that is not known or not set ("unknown", "the model's default"): grey. */
.facts-v--missing { color: var(--text-dim); }
/* A value that keeps its own line breaks (a record's text). */
.facts-v--pre { white-space: pre-wrap; }
/* A value that is controls in a row: a picker and its action. */
.facts-v--controls { display: flex; align-items: center; gap: 1rem; }
.facts-v--controls .select-field { width: auto; }
/* One action after the value, on its line. */
.facts-after { margin-left: .6rem; }
/* A grey line in coral: something about the value needs a look. */
.facts-v small.facts-sub--notice { color: var(--accent); }
/* The row of actions under a value, and a meter inside one. */
.facts-v .og-doors { margin-top: .3rem; }
.facts-v .meter { margin-top: .5rem; }

@media (max-width: 860px) {
  .facts, .facts--wide { grid-template-columns: 1fr; gap: .3rem 0; }
  .facts-k { padding-top: .6rem; }
}

/* The tiles (Facts `tiles`, appcat): each name over its value in a tile, as many tiles on a line as it
   holds at 180px or more, on a phone too (the old app catalogue's About facts, .dtl-meta-grid and
   .dtl-meta-item: the coral label, the value bold in ink). */
.facts.facts--tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 24px; margin: 0; line-height: normal; }
.facts--tiles > .facts-tile { min-width: 0; }
.facts--tiles .facts-k.poster-label { padding: 0; font-size: .72rem; letter-spacing: .1em; font-weight: 800; line-height: normal; }
.facts--tiles .facts-v { font-family: var(--font-body); font-size: .9rem; font-weight: 700; line-height: normal; word-break: break-word; }

/* The readout (Facts `readout`, appcat sections-c): what a system observed, the names in small grey
   typewriter capitals in a 220px column, the values bold; one column under 900px (the old app
   catalogue's .mk-sees; its --text-dim is the site's --text-muted). */
.facts.facts--readout { grid-template-columns: 220px minmax(0, 1fr); gap: 6px 24px; margin: 0 0 8px; font-size: .92rem; line-height: 1.5; }
.facts--readout .facts-k.poster-label {
  padding: 3px 0 0; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; line-height: 1.5;
  letter-spacing: .06em; text-transform: var(--shape-case-label); color: var(--text-muted);
}
.facts--readout .facts-v { font-size: inherit; font-weight: 600; line-height: inherit; }
@media (max-width: 900px) {
  .facts.facts--readout { grid-template-columns: minmax(0, 1fr); gap: 6px 24px; }
  .facts--readout .facts-k.poster-label { padding-top: 3px; }
}