/* ── Admin Extensions page, in the poster face ──
 * @file admin-extensions.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The operator's extensions page (design canvas "AIMEAT Admin Extensions"): the list
 *   with what calls each extension, the record a row opens into with its actions and their routes,
 *   and the two sections for installing one that ships with the node or writing a new one. The
 *   sections, the metric rows, the numeral strip, the doors and the slab come from admin.css and
 *   organism.css; only what this page adds lives here.
 * @version-history
 *   2026-09-13 -- Compose the shared compact record title.
 *   v1.1.0 -- 2026-09-13 -- Compose the record action rule and own instance-form layout.
 *   v1.0.0 — 2026-09-12 — Initial, with the page renamed from Services to Extensions.
 */

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

/* ── Find and the filter chips ─────────────────────────────────────────────────────────────── */
.adm-ex-find { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.adm-ex-find .og-field { flex: 0 0 300px; }
.adm-ex-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-ex-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); }
.adm-ex-chip b { font-weight: 500; color: var(--text); margin-left: 6px; }
.adm-ex-chip:hover { border-color: var(--text); color: var(--text); }
.adm-ex-chip.on { background: var(--sun); border-color: var(--text); color: var(--on-sun); box-shadow: 0 2px 0 var(--text); }
.adm-ex-chip.on b { color: var(--on-sun); }
.adm-ex-chip--coral { border-color: var(--accent); color: var(--accent); }
.adm-ex-chip--coral b { color: var(--accent); }

/* ── The list. Each row is its own grid, so a phone can restructure one row alone. ─────────── */
.adm-ex-row { display: grid; grid-template-columns: minmax(0, 1fr) 300px 92px 118px 54px; gap: 0 18px; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.adm-ex-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-ex-row--open { border-bottom: 0; }
.adm-ex-row > div { min-width: 0; }
.adm-ex-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-ex-nm:hover, .adm-ex-nm.is-open { color: var(--accent); }
.adm-ex-desc { display: block; font-size: .78rem; font-weight: 400; line-height: 1.45; color: var(--text-dim); margin-top: 2px; }
.adm-ex-mark { font-family: var(--font-mono); font-size: .64rem; padding: 0 6px; border: 2px solid var(--border); color: var(--text-dim); margin-left: 8px; white-space: nowrap; }
.adm-ex-mark--off { border-color: var(--accent); color: var(--accent); }
.adm-ex-uses { font-size: .8rem; line-height: 1.5; }
.adm-ex-uses button { background: none; border: 0; border-bottom: 2px solid var(--text); padding: 0; cursor: pointer; font-family: inherit; font-size: .8rem; font-weight: 700; color: var(--text); }
.adm-ex-uses button:hover { color: var(--accent); border-bottom-color: var(--accent); }
.adm-ex-uses--none { font-family: var(--font-mono); font-size: .76rem; color: var(--accent); }
.adm-ex-uses--clock { font-family: var(--font-mono); font-size: .76rem; color: var(--text-dim); }
.adm-ex-n { font-family: var(--font-mono); font-size: .8rem; text-align: right; }
.adm-ex-when { font-family: var(--font-mono); font-size: .74rem; color: var(--text-dim); white-space: nowrap; }
.adm-ex-go { text-align: right; }
.adm-ex-go .og-door { font-size: .72rem; }
.adm-ex-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-ex-rec { border: 3px solid var(--text); background: var(--card-bg); box-shadow: 8px 8px 0 var(--sun); padding: 20px 22px 22px; margin: 12px 0 20px; }
.adm-ex-rec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding-bottom: 14px; border-bottom: 3px solid var(--text); }
.adm-ex-rec-h h3 { overflow-wrap: anywhere; }
.adm-ex-rec-sub { display: block; margin-top: 8px; font-size: .9rem; line-height: 1.5; color: var(--text-dim); max-width: 72ch; }
.adm-ex-rec-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.adm-ex-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-ex-rec-chips span.is-live { border-color: var(--success-fg); color: var(--success-fg); }
.adm-ex-rec-chips span.is-off { border-color: var(--border); color: var(--text-dim); }
.adm-ex-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 40px; align-items: start; margin-top: 16px; }
.adm-ex-lbl { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.adm-ex-lbl--gap { margin-top: 20px; }
.adm-ex-act { display: grid; grid-template-columns: 62px minmax(0, 1fr) 96px; gap: 0 14px; align-items: baseline; padding: .42rem 0; border-bottom: 1px solid var(--border); }
.adm-ex-act:last-of-type { border-bottom: 0; }
.adm-ex-act i { font-family: var(--font-mono); font-size: .68rem; font-style: normal; font-weight: 500; color: var(--accent); }
.adm-ex-act code { font-family: var(--font-mono); font-size: .74rem; color: var(--text); overflow-wrap: anywhere; }
.adm-ex-act em { font-style: normal; font-family: var(--font-mono); font-size: .7rem; color: var(--text-dim); text-align: right; overflow: hidden; text-overflow: ellipsis; }
.adm-ex-frow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 18px; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .86rem; }
.adm-ex-frow:last-of-type { border-bottom: 0; }
.adm-ex-frow b { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.adm-ex-frow span { font-weight: 600; min-width: 0; }
.adm-ex-frow 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-ex-box { border: 2px solid var(--text); background: var(--bg-surface); padding: 12px 14px; }
.adm-ex-box-row { display: flex; justify-content: space-between; gap: 12px; min-width: 0; font-size: .84rem; font-weight: 700; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.adm-ex-box-row:last-child { border-bottom: 0; }
.adm-ex-box-row span { font-family: var(--font-mono); font-size: .72rem; font-weight: 400; color: var(--text-dim); flex: none; }
.adm-ex-box-row em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ex-hint { margin: .6rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--text-dim); }
.adm-ex-acts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; }
.adm-ex-acts p { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--text-dim); max-width: 34ch; }

.adm-ex-inst-row { border: 0; padding: 0; }
.adm-ex-inst-actions { padding-top: 12px; }
.adm-ex-inst-field { max-width: 260px; }

/* The instance and script editors keep their own shapes; they only lose the card around them. */
.adm-ex-panel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ── Install and write ─────────────────────────────────────────────────────────────────────── */
.adm-ex-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
/* ── Section 04's form. The fields are the poster face's own; the chips are the list's. ─────── */
.adm-ex-new .og-field { margin-bottom: 14px; }
.adm-ex-new-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.adm-ex-ok { font-size: .84rem; font-weight: 600; color: var(--success-fg); }
.adm-ex-bad { font-size: .84rem; font-weight: 600; color: var(--accent); }

.adm-ex-manual { margin-top: 20px; }
.adm-ex-manual summary { cursor: pointer; }
.adm-ex-manual pre { margin: 10px 0 0; padding: 14px 16px; border: 2px solid var(--text); background: var(--bg-surface); font-family: var(--font-mono); font-size: .74rem; line-height: 1.7; color: var(--text); overflow-x: auto; }
.adm-ex-manual ol, .adm-ex-manual ul { margin: 8px 0 0; padding-left: 22px; font-size: .88rem; line-height: 1.7; }

@media (max-width: 1100px) {
  .adm-ex-grid { grid-template-columns: 1fr; gap: 22px 0; }
  .adm-ex-row { grid-template-columns: minmax(0, 1fr) 92px 118px 54px; }
  .adm-ex-row > .adm-ex-uses { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  .adm-ex-row--head > .adm-ex-uses { display: none; }
}
@media (max-width: 760px) {
  .adm-ex .og-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .adm-ex .og-strip > div { padding: .8rem 0; }
  .adm-ex .og-strip > :nth-child(odd) { border-right: 1px solid var(--border); padding-right: .9rem; }
  .adm-ex .og-strip > :nth-child(even) { border-right: 0; padding-left: .9rem; }
  .adm-ex .og-strip > :nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .adm-ex .adm-mrow { grid-template-columns: minmax(0, 1fr) auto; }
  .adm-ex .adm-mrow .adm-mval { grid-column: 1 / -1; text-align: left; margin-top: 4px; }
  .adm-ex-row { grid-template-columns: minmax(0, 1fr) 92px; }
  .adm-ex-row > .adm-ex-when { grid-column: 1; grid-row: 3; }
  .adm-ex-row > .adm-ex-go { grid-column: 2; grid-row: 3; }
  /* The head keeps the two words that still label something a reader could not guess, the name
     and the action count. A date under a name needs no column word, and moving it into the
     stacked position wrapped the head onto a second line. */
  .adm-ex-row--head > .adm-ex-when { display: none; }
  .adm-ex-rec { padding: 16px 14px 18px; box-shadow: 6px 6px 0 var(--sun); }
  .adm-ex-act { grid-template-columns: 52px minmax(0, 1fr); }
  .adm-ex-act em { grid-column: 1 / -1; text-align: left; }
}