/**
 * @file figure-strip.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description Figures between two heavy ink rules: a number in the poster face, its word, a mono line under it;
 *   two to a row on a phone.
 *   Moved unchanged out of views/organism.css (the og- page kit shared by the Settings & Controls tabs,
 *   the organism pages and the admin), under its own name; the class names stay, because every page
 *   that draws the kit writes them. Corners, frames, shadows and letter case read the shape tokens.
 *   Drawn by components/FigureStrip.js.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.6.1 — 2026-09-27 — .og-strip--free's number at the face's own spacing, as the old .vis-stat-val
 *     (appcat parity, sections-b; the option is appcat's alone).
 *   v1.6.0 — 2026-09-27 — .og-strip--free (FigureStrip `free`): figures without the rules, the word
 *     under the number in coral capitals, the old app catalogue's visitor numbers; additive, appcat.
 *   v1.5.0 — 2026-09-27 — A figure that is a button (a filter or a door: the admin's Overview,
 *     Applications, Owners, Security, CORS and Compliance strips), its rules moved from admin.css
 *     (.adm .og-strip > button) with their values.
 *   v1.4.0 — 2026-09-26 — Drawn by components/FigureStrip.js. The figure colours and places the pages'
 *     own rules carried become its tones and options, each with the look it had: notice, a number in
 *     coral (skills .is-coral, companies .og-coral, access and data wallet .is-low, 4 pages); dim, a
 *     figure not there yet (calibrator, data wallet, wallet .is-dim, 3 pages); long, a long word such
 *     as an address (email .em-strip-addr); wrap, the lines under the figures read whole (access and
 *     data wallet small, white-space normal); flush, no air above (profile.css .pf-aitr-body,
 *     .pf-cmp-body, .pf-aai-model); lead, the strip that opens a tab's content (profile.css
 *     .pf-figures: 0 above, 1.5rem under).
 *   v1.3.0 — 2026-09-26 — The part of a figure that says "of how many" (.og-strip-of: "/4" smaller, in grey), moved unchanged from knowledge-poster.css .kp-of (a move).
 *   v1.2.0 — 2026-09-25 — A third state tone, danger (.og-strip-danger), for a figure that says a loss (UI consolidation phase 5, a unification: the P&L result's red stays a tone).
 *   v1.1.0 — 2026-09-25 — A word in place of a figure (.og-strip-word) and two state tones, warn and fine (UI consolidation phase 5, a unification: a meaning a figure carried stays a tone).
 *   v1.0.0 — 2026-09-25 — Moved out of views/organism.css (UI consolidation phase 5, a move).
 */

/* ── The strip of figures ──────────────────────────────────────────────────────────────────── */
.og-strip { display: flex; margin-top: 1.5rem; border-top: var(--shape-frame-heavy) solid var(--shape-rule-colour); border-bottom: var(--shape-frame-heavy) solid var(--shape-rule-colour); }
.og-strip > div { flex: 1 1 0; box-sizing: border-box; display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; padding: .9rem 1.1rem .9rem 0; border-right: 1px solid var(--border); min-width: 0; }
.og-strip > div + div { padding-left: 1.1rem; }
.og-strip > div:last-child { border-right: 0; }
.og-strip b { font-family: var(--font-poster); font-weight: var(--font-poster-weight); font-size: 2.1rem; line-height: var(--font-poster-leading); letter-spacing: var(--font-poster-tracking); color: var(--text); }
.og-strip b.og-strip-coral { color: var(--accent); font-size: 1.5rem; text-transform: var(--shape-case-heading); }
/* A word where a number would stand ("Verified"), and a figure whose colour says a state: the Status
   colours of attention and fine (Jouni's decision "Status"). */
.og-strip b.og-strip-word { font-size: 1.5rem; text-transform: var(--shape-case-heading); }
.og-strip b.og-strip-warn { color: var(--warn-fg); }
.og-strip b.og-strip-fine { color: var(--success-fg); }
.og-strip b.og-strip-danger { color: var(--danger-fg); }
/* "Of how many": the part of a figure after the slash, smaller and grey (formerly knowledge-poster.css .kp-of). */
.og-strip b .og-strip-of { font-size: 1.1rem; color: var(--text-dim); }
.og-strip span { font-weight: 800; font-size: .9rem; }
.og-strip small { flex-basis: 100%; font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A number in coral, at the figure's size: the one to look at. A figure not there yet, in grey. A long
   word (an address) in a smaller cut that breaks where it must. */
.og-strip b.og-strip-notice { color: var(--accent); }
.og-strip b.og-strip-dim { color: var(--text-dim); }
.og-strip b.og-strip-long { font-size: 1.35rem; overflow-wrap: anywhere; }
/* The lines under the figures read whole. */
.og-strip--wrap small { white-space: normal; overflow: visible; }
/* The strip opens its box; the strip opens a tab's content, with air under it. */
.og-strip--flush { margin-top: 0; }
.og-strip--lead { margin: 0 0 1.5rem; }

/* A figure that is a way on (a filter, a door to its page) keeps the figure's whole anatomy as a
   button; under the pointer its word is underlined (formerly admin.css .adm .og-strip > button). */
.og-strip > button { flex: 1 1 0; box-sizing: border-box; display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; min-width: 0; background: none; border: 0; border-right: 1px solid var(--border); padding: .9rem 1.1rem .9rem 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.og-strip > * + button, .og-strip > button + div { padding-left: 1.1rem; }
.og-strip > button:last-child { border-right: 0; }
.og-strip > button:hover span { text-decoration: underline; text-decoration-thickness: 2px; }

@media (max-width: 1100px) {
  .og-strip { flex-wrap: wrap; }
  .og-strip > div, .og-strip > button { flex-basis: 50%; border-right: 0; }
}

/* Free: the figures stand free inside a section, no rules, each number over its word in the row
   label's coral capitals (the old app catalogue's .vis-stats, .vis-stat-val, .vis-stat-label). */
.og-strip.og-strip--free { flex-wrap: wrap; gap: 18px 36px; margin: 0 0 22px; border: 0; }
.og-strip.og-strip--free > div { flex: 0 0 auto; display: block; padding: 0; border: 0; }
.og-strip.og-strip--free b { display: block; font-size: 1.9rem; line-height: 1; letter-spacing: normal; }
.og-strip.og-strip--free span { display: block; margin-top: 6px; font-size: var(--text-xs, .72rem); font-weight: var(--weight-heavy, 800); color: var(--accent); text-transform: var(--shape-case-label, uppercase); letter-spacing: var(--shape-tracking-label, .1em); }
@media (max-width: 760px) {
  .og-strip.og-strip--free { gap: 16px 24px; }
  .og-strip.og-strip--free b { font-size: 1.5rem; }
}