/* THE AGENT ROW IS A LINK (Steven 2026-11-09, his shot of the row under a
   want card's chart: "THis needs to be clickable."). templates/cards/
   _card.html (the row under the chart, the big card's byline at its foot)
   and cards/_agent_side.html (the agent's name on the dark side and the
   agent card) draw the row as one link to the agent's public page when it
   has one. The same look as the words it replaces: no underline, no new
   colour, no new chrome; a focus ring for a keyboard and a tap area at
   least 44px tall that moves nothing. */
.tb-card__agentlink {
    position: relative;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tb-card__agentlink:hover,
.tb-card__agentlink:active,
.tb-card__agentlink:visited { color: inherit; text-decoration: none; }
.tb-card__agentlink:focus { outline: none; }
.tb-card__agentlink:focus-visible {
    outline: 2px solid var(--interactive-focus-ring, var(--color-yellow-400, #f2e841));
    outline-offset: 3px;
    border-radius: var(--radius-sm, 6px);
}
/* the tap area: at least 44px tall around the row, drawn by nothing */
.tb-card__agentlink::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: max(100%, 44px);
    transform: translateY(-50%);
}
/* THE PILL IS THE AGENT DOOR (Steven 2026-11-10, the song want's card: "I
   want you to create an up chevron beside Nia in the image and remove the
   'Agent' above the green button."): on a card whose back is the plan the
   agent pill on the picture opens the agent inside the card, so it wears
   the foot's up chevron beside the name, on the name's line at the pill's
   right edge, in the name's colour; the model's line under it keeps its
   width, so the pill grows by nothing and the model never wraps
   (templates/cards/_card.html _want_art, .tb-card__chart-name). */
.tb-card__chart-name {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    min-width: 0;
}
.tb-card__chart-open {
    flex: none;
    font-size: var(--text-base);
    color: var(--text-inverse);
}