/* ── Admin Agents page, in the poster face ──
 * @file admin-agents.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The operator's agents page (design canvas "AIMEAT Admin Agents"): the search and
 *   the five filter chips that are the numeral strip's counts made pressable, the six-column
 *   table that says for the first time what an agent may do, the record a row opens into, and the
 *   owner table that shows one person holding half the node. The sections, the metric rows, the
 *   numeral strip, the doors, the chips and the dashed box come from admin.css and organism.css;
 *   only what this page adds lives here. Every value is a theme.css token, so the page flips with
 *   the theme.
 * @version-history
 *   2026-09-13 -- Compose shared numeral cuts; normalize extra sizes under brief 10.7.
 *   v1.2.0 -- 2026-09-13 -- Compose ink row boundaries from poster.css.
 *   v1.1.0 — 2026-09-13 — Keep fleet-bar appearance in CSS while SVG attributes carry the ratios.
 *   v1.0.0 — 2026-09-12 — Initial.
 */

.adm-ag-lead { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; color: var(--text); max-width: 90ch; }
.adm-ag-note { margin: 12px 0 0; font-size: .78rem; line-height: 1.55; color: var(--text-dim); max-width: 92ch; }
.adm-ag .og-strip small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
.adm-ag .og-box { max-width: 78ch; margin-top: 20px; }

/* ── The find row: one field and the five counts as chips ─────────────────────────────────── */
.adm-ag-find { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.adm-ag-find .og-field { flex: 0 0 300px; }
.adm-ag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* A chip is a button here, so it carries the button reset the .og-chip rule does not: organism.css
   styles a span. */
.adm-ag-chip { background: none; border: 2px solid var(--border); border-radius: 0; padding: 2px 9px; cursor: pointer; font-family: var(--font-mono); font-weight: 500; font-size: .7rem; line-height: 1.6; color: var(--text-dim); text-transform: none; }
.adm-ag-chip b { font-weight: 500; color: var(--text); margin-left: 6px; }
.adm-ag-chip:hover { border-color: var(--text); color: var(--text); }
.adm-ag-chip.on { background: var(--sun); border-color: var(--text); color: var(--on-sun); box-shadow: 0 2px 0 var(--text); }
.adm-ag-chip.on b { color: var(--on-sun); }
.adm-ag-chip--coral { border-color: var(--accent); color: var(--accent); }
.adm-ag-chip--coral b { color: var(--accent); }

/* ── The table. Every row is its own grid: five of the six columns are a fixed width, so the
 *    columns line up down the page exactly as a single grid would, and a phone can restructure
 *    one row without the rest of the table following it. ──────────────────────────────────── */
.adm-ag-row { display: grid; grid-template-columns: minmax(0, 1fr) 122px 292px 58px 104px 54px; gap: 0 18px; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.adm-ag-row--head { padding: 0 0 .35rem; border-bottom: 0; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.adm-ag-row--open { border-bottom: 0; }
.adm-ag-row > div { min-width: 0; }
.adm-ag-nm { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: inherit; font-size: .95rem; font-weight: 800; line-height: 1.25; color: var(--text); }
.adm-ag-nm:hover { color: var(--accent); }
.adm-ag-nm.is-open { color: var(--accent); }
.adm-ag-addr { display: block; font-family: var(--font-mono); font-size: .7rem; font-weight: 400; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ag-own { background: none; border: 0; border-bottom: 2px solid var(--text); padding: 0; cursor: pointer; font-family: inherit; font-size: .85rem; font-weight: 700; color: var(--text); text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ag-own:hover { color: var(--accent); border-bottom-color: var(--accent); }
.adm-ag-scp { display: flex; flex-wrap: wrap; gap: 5px; }
.adm-ag-scp span { font-family: var(--font-mono); font-size: .66rem; line-height: 1.5; padding: 0 5px; border: 2px solid var(--border); color: var(--text-dim); }
.adm-ag-scp span.adm-ag-scp-more { border-color: transparent; }
.adm-ag-tr { font-family: var(--font-mono); font-size: .8rem; color: var(--text); }
/* The registration default recedes, but it is still a number a reader has to be able to read:
   --border is 1.15:1 against the page and disappears. */
.adm-ag-tr--none { color: var(--text-dim); }
.adm-ag-tr--low { color: var(--accent); font-weight: 500; }
.adm-ag-seen { font-family: var(--font-mono); font-size: .74rem; color: var(--text-dim); white-space: nowrap; }
.adm-ag-seen--now { color: var(--success-fg); }
.adm-ag-go { text-align: right; }
.adm-ag-go .og-door { font-size: .72rem; }
.adm-ag-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 14px; font-family: var(--font-mono); font-size: .74rem; color: var(--text-dim); }

/* ── The record a row opens into ───────────────────────────────────────────────────────────── */
.adm-ag-rec { border: 3px solid var(--text); background: var(--card-bg); box-shadow: 8px 8px 0 var(--sun); padding: 22px 24px 24px; margin: 14px 0 22px; }
.adm-ag-rec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding-bottom: 14px; border-bottom: 3px solid var(--text); }
.adm-ag-rec-h h3 { overflow-wrap: anywhere; }
.adm-ag-rec-addr { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: .74rem; color: var(--text-dim); overflow-wrap: anywhere; }
.adm-ag-rec-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.adm-ag-rec-chips span { font-family: var(--font-mono); font-size: .68rem; line-height: 1.6; padding: 1px 7px; border: 2px solid var(--text); color: var(--text); }
.adm-ag-rec-chips span.is-live { border-color: var(--success-fg); color: var(--success-fg); }
.adm-ag-rec-chips span.is-off { border-color: var(--border); color: var(--text-dim); }
.adm-ag-rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 40px; align-items: start; margin-top: 16px; }
.adm-ag-desc { margin: 0 0 12px; font-size: .95rem; line-height: 1.6; max-width: 62ch; }
.adm-ag-desc--none { color: var(--text-dim); font-style: normal; }
.adm-ag-frow { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 20px; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.adm-ag-frow--last { border-bottom: 0; }
.adm-ag-flbl { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.adm-ag-fval { font-weight: 600; min-width: 0; }
.adm-ag-fval small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: .72rem; font-weight: 400; line-height: 1.5; color: var(--text-dim); overflow-wrap: anywhere; }
.adm-ag-fval-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.adm-ag-fval-row > .og-door { flex: none; }

.adm-ag-trust { border: 2px solid var(--text); background: var(--bg-surface); padding: 15px 17px 17px; }
.adm-ag-trust-h { display: block; margin-bottom: 9px; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.adm-ag-trust-n { margin-right: 0; }
.adm-ag-trust-n span { font-family: var(--font); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text); margin-left: 10px; }
.adm-ag-trow { display: flex; justify-content: space-between; gap: 14px; padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .82rem; font-weight: 600; }
.adm-ag-trow:last-of-type { border-bottom: 0; }
.adm-ag-trow span { font-family: var(--font-mono); font-size: .76rem; font-weight: 400; color: var(--text-dim); }
.adm-ag-trust p { margin: 12px 0 0; font-size: .78rem; line-height: 1.5; color: var(--text-dim); }
.adm-ag-acts { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; }
.adm-ag-acts p { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--text-dim); max-width: 34ch; }

/* ── Whose they are ────────────────────────────────────────────────────────────────────────── */
.adm-ag-orow { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 150px 54px; gap: 0 18px; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.adm-ag-orow--head { padding: 0 0 .35rem; border-bottom: 0; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.adm-ag-onm { font-size: .93rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ag-onm small { font-family: var(--font-mono); font-size: .74rem; font-weight: 400; color: var(--text-dim); margin-left: 8px; }
.adm-ag-onum { margin-right: 0; }
.adm-ag-onum--coral { color: var(--accent); }
.adm-ag-osm { font-family: var(--font-mono); font-size: .74rem; color: var(--text-dim); }
.adm-ag-bar { height: 10px; background: var(--bg-surface); border: 2px solid var(--text); }
.adm-ag-bar svg { display: block; height: 100%; background: var(--text); }

/* ── Narrower than the poster column ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .adm-ag-rec-grid { grid-template-columns: 1fr; gap: 22px 0; }
  .adm-ag-row { grid-template-columns: minmax(0, 1fr) 110px 58px 104px 54px; }
  /* The scopes leave the row of columns and take the line under the name, where there is width
     for them; the other five keep their places. */
  .adm-ag-row > .adm-ag-scp { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
  .adm-ag-row--head > .adm-ag-scp { display: none; }
}
@media (max-width: 900px) {
  .adm-ag-row { grid-template-columns: minmax(0, 1fr) auto; }
  .adm-ag-row > .adm-ag-c-name { grid-column: 1; grid-row: 1; }
  .adm-ag-row > .adm-ag-c-seen { grid-column: 2; grid-row: 1; }
  .adm-ag-row > .adm-ag-c-own { grid-column: 1; grid-row: 2; padding-top: 6px; }
  .adm-ag-row > .adm-ag-c-tr { grid-column: 2; grid-row: 2; text-align: right; }
  .adm-ag-row > .adm-ag-scp { grid-column: 1; grid-row: 3; margin-top: 7px; }
  .adm-ag-row > .adm-ag-go { grid-column: 2; grid-row: 3; align-self: end; }
  .adm-ag-row--head { display: none; }
  .adm-ag-frow { grid-template-columns: 1fr; gap: 4px 0; }
  .adm-ag-orow { grid-template-columns: minmax(0, 1fr) 64px 54px; }
  .adm-ag-orow > .adm-ag-bar,
  .adm-ag-orow > .adm-ag-c-share { display: none; }
}
@media (max-width: 760px) {
  .adm-ag .og-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .adm-ag .og-strip > div { padding: .8rem 0; }
  .adm-ag .og-strip > :nth-child(odd) { border-right: 1px solid var(--border); padding-right: .9rem; }
  .adm-ag .og-strip > :nth-child(even) { border-right: 0; padding-left: .9rem; }
  .adm-ag .og-strip > :nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .adm-ag .adm-mrow { grid-template-columns: minmax(0, 1fr) auto; }
  .adm-ag .adm-mrow .adm-mval { grid-column: 1 / -1; text-align: left; margin-top: 4px; }
  .adm-ag-find .og-field { flex: 1 1 100%; }
  .adm-ag-rec { padding: 18px 16px 20px; box-shadow: 6px 6px 0 var(--sun); }
}