/**
 * @file open-card.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description One thing of a list opened in place as a card (components/OpenCard.js): the name as a
 *   full-width headline with the ▼ in the sun, the words and the side column under it (on a narrow
 *   screen the side drops under the words), a line between two hairlines, the tabs in labelled
 *   groups, the panel under the sun edge, and the ink rule the card ends in. The heavy rule on top is
 *   poster.css's .poster-row--thing, the headline its .poster-section-title, the line its .poster-row,
 *   the panel its .poster-panel, composed in the markup; this sheet carries only the layout.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.0.0 — 2026-09-26 — Moved out of css/views/agents-poster.css (agp-card, agp-title, agp-caret,
 *     agp-mast, agp-words, agp-id, agp-chips, agp-caps, agp-side, agp-runs, agp-nav, agp-nav-group,
 *     agp-tabs, agp-panel) with their values; the ink rule at the card's foot reads the frame token
 *     (page group G1a).
 */

.open-card { padding: 1.1rem 0 1.5rem; border-bottom: var(--shape-frame) solid var(--shape-rule-colour); margin-bottom: .6rem; }
.open-card-title { overflow-wrap: anywhere; margin-bottom: 1rem; }
.open-card-title--closes, .open-card-mast--closes { cursor: pointer; }
.open-card-caret { font-family: var(--font-showroom-body); font-size: .8rem; color: var(--sun); margin-right: .6rem; vertical-align: middle; }
.open-card-mast { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.open-card-words { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.open-card-id { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.open-card-marks { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
/* A tag field among the marks stands in their row. */
.open-card-marks > .tag-input { display: contents; }
.open-card-marks .tag-input-field { width: 8rem; }
/* What a mark opened (an agent's capabilities): the words' whole width, under the marks. */
.open-card-more { margin-top: .2rem; }
.open-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; flex: none; }
/* A link out in the side column keeps to the column's width (an agent's host). */
.open-card-side > .poster-action { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One line between two hairlines: its label, its words and their way to change them. */
.open-card-line { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; padding: .7rem 0; }
.open-card-line > .poster-label { flex: none; }
.open-card-line-below { flex-basis: 100%; margin: .3rem 0 0; }
/* A notice under the mast. */
.open-card-body > .poster-aside { margin-top: 1rem; }
/* The tabs in three groups; the chosen one on the sun. */
.open-card-tabs { display: flex; gap: 0 2rem; flex-wrap: wrap; margin-top: 1rem; padding-bottom: .2rem; }
.open-card-tab-group { display: flex; flex-direction: column; gap: .5rem; padding: .4rem 0 .6rem; }
.open-card-tab-group .status-dot { margin-left: .35rem; vertical-align: middle; }
.open-card-panel { padding-block: .4rem .6rem; margin-top: .4rem; }

@media (max-width: 1100px) {
  .open-card-mast { flex-wrap: wrap; }
  .open-card-side { align-items: flex-start; }
  .open-card-tabs { gap: 0 1.4rem; }
}