/* THE DARK AGENT SIDE, ONE IMPLEMENTATION (Steven 2026-10-13 night: "The
   agent page was dark, so you could tell"; "it should flip to the agent
   page, the actual agent working page, and that should be the darker one.
   And I don't want those kind of sun-spinning things around the person's
   image"). templates/cards/_agent_side.html draws it inside the one card's
   want face (.tb-card__face--side), on the /home deck and the step page
   alike (one card). Design tokens only.

   THE AGENT FILLS THE SIDE (Steven 2026-10-13 night, on the round portrait
   of Alice in the middle of the black card: "Why is the agent in a circle
   here? It should be full screen."). .tb-side--fill: the agent's tall pose
   loop (else its still, else its own picture) covers the whole face of the
   card that draws the side, from its top edge, edge to edge, behind its
   kicker, the words and its foot; the dark shade over its lower half holds
   the name, the state and the box. The face is the picture's frame (the
   host rules at the end position it and lift its kicker and foot over it).

   THE AGENT CARD (.tb-side--card, below): the same side with the agent's
   whole page scrolling under its first screen, every flip to an agent.

   The field is the step page's night (radial, the dark at the middle). An
   agent with none of those pictures wears its record as a plain disc in a
   round in the middle (no bars, no spin), filling the round. With no agent
   yet, the bench: three rounds of the agents looking at the want. */

.tb-side {
    --tb-side-cyan: var(--color-cyan-500);
    --tb-side-yellow: var(--highlight-yellow);
    --tb-side-green: var(--accent-neon);
    --tb-side-purple: var(--highlight-purple);
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    color: var(--text-inverse);
}

/* ---- the picture: one round, or the bench --------------------------- */
.tb-side__art {
    position: relative;
    flex: 1 1 auto;
    min-height: var(--size-24);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-6);
}
.tb-side__round {
    position: relative;
    display: block;
    height: 100%;
    max-height: calc(var(--size-32) * 2.5);
    width: auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-dark-800);
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.14), 0 18px 48px rgb(0 0 0 / 0.45);
}
.tb-side__bench {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 100%;
}
.tb-side__seat {
    position: relative;
    display: block;
    flex: 0 1 auto;
    width: 30%;
    max-width: var(--size-32);
    aspect-ratio: 1 / 1;
    margin-left: calc(-1 * var(--space-3));
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-dark-800);
    box-shadow: 0 0 0 3px var(--color-dark-900), 0 12px 32px rgb(0 0 0 / 0.4);
}
.tb-side__seat:first-child { margin-left: 0; }
/* the middle seat sits a little forward */
.tb-side__seat:nth-child(2) { width: 36%; max-width: calc(var(--size-32) * 1.2); z-index: 1; }
.tb-side__round > .agent-round,
.tb-side__seat > .agent-round { position: absolute; inset: 0; background: var(--color-dark-800); }

/* The record as a PLAIN disc, the fallback for an agent with no picture at
   all: its ring of level bars and its orbiting arc are gone, nothing spins,
   and the vinyl fills the round (the record's disc is 62% of its square). */
.tb-side__disc { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: var(--radius-full); }
.tb-side__disc svg { display: block; width: 100%; height: 100%; transform: scale(1.6); }
.tb-side .aa-tick { display: none; }
.tb-side .aa-spin { animation: none; }
.tb-side .aa-spin path { display: none; }

/* ---- the picture filling the card ----------------------------------- */
/* Out of the side's flow and over the whole face (the host's frame, its
   containing block); the words then sit at the foot of the side. */
.tb-side--fill .tb-side__art {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    min-height: 0;
    padding: 0;
    pointer-events: none;
}
.tb-side__fill {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--color-dark-900);
}
/* cover-cropped, held at its top edge so the face stays in the card */
.tb-side__media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    object-position: 50% 0%;
}
.tb-side__fill--photo .tb-side__media { object-position: 50% 30%; }
/* the dark shade over its lower half (and a breath of it at the top for
   the kicker), so the name and the state read on any picture */
.tb-side__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-dark-900) 42%, transparent) 0%,
        transparent 16%,
        transparent 40%,
        color-mix(in srgb, var(--color-dark-900) 62%, transparent) 58%,
        color-mix(in srgb, var(--color-dark-900) 92%, transparent) 78%,
        var(--color-dark-900) 100%);
}
.tb-side--fill .tb-side__words {
    position: relative;
    z-index: 1;
    margin-top: auto;
}

/* ---- THE TITLE AT THE TOP, ALWAYS (Steven 2026-10-14, the dark Gathering
   side: "I think the title should be at the top as always") ------------
   The want's title (and its words under it) at the top of every dark side
   of a want, the head the front wears (card.css .tb-card__head, its title
   and its words; cards/_agent_side.html _head), at the front's own inset,
   over the picture under the front's fade (the shade's top stops deepen
   when the side wears it); the rounds of the bench and the one round sit
   under it. */
.tb-side__head {
    position: relative;
    z-index: 1;
    padding: var(--space-5) var(--space-5) 0;
    color: var(--text-inverse);
}
.tb-side__head .tb-card__title,
.tb-side__head .tb-card__subtitle { text-shadow: 0 1px 14px rgb(0 0 0 / 0.5); }
@media (max-width: 600px) {
    .hc-slide .tb-side__head { padding-top: var(--space-4); }
}
.tb-side--headed .tb-side__shade {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-dark-900) 62%, transparent) 0%,
        color-mix(in srgb, var(--color-dark-900) 30%, transparent) 18%,
        transparent 32%,
        transparent 40%,
        color-mix(in srgb, var(--color-dark-900) 62%, transparent) 58%,
        color-mix(in srgb, var(--color-dark-900) 92%, transparent) 78%,
        var(--color-dark-900) 100%);
}
.tb-side--fill .tb-side__want { color: rgb(255 255 255 / 0.78); }
.tb-side--fill .tb-side__name { text-shadow: 0 2px 18px rgb(0 0 0 / 0.55); }
.tb-side--fill .tb-side__box {
    background: color-mix(in srgb, var(--color-dark-900) 46%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ---- the words ------------------------------------------------------ */
.tb-side__words { flex: none; padding: 0 var(--space-6); }
/* THE KICKER IN THE WORDS (Steven 2026-10-13 night: the kicker leaves the
   art): "9  AGENT'S TURN", "2  GATHERING", a your-turn back's "2  AGENT",
   over the name; card.css draws the pill and the ring */
.tb-side__kicker { display: flex; align-items: center; margin-bottom: var(--space-3); }
.tb-side__kicker .tb-card__num {
    background: color-mix(in srgb, var(--color-dark-900) 45%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--text-inverse);
}
.tb-side__kicker .tb-card__num[hidden] { display: none; }
.tb-side__want {
    margin: 0 0 var(--space-1);
    color: rgb(255 255 255 / 0.66);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.tb-side__name {
    margin: 0;
    color: var(--text-inverse);
    font-family: var(--font-heading);
    --interface-font: var(--font-heading);
    font-size: var(--size-12);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    text-shadow: none;
}
.tb-side__turn { display: flex; flex-direction: column; }
.tb-side__turn[hidden] { display: none; }
.tb-side__state {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
    color: rgb(255 255 255 / 0.82);
    font-size: var(--text-lg);
}
.tb-side__glass { flex: none; width: var(--size-4); height: var(--size-4); color: var(--tb-side-green); }
.tb-side__pip {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    color: var(--tb-side-cyan);
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}
.tb-side__turn--attention .tb-side__pip { color: var(--color-yellow-500); }
.tb-side__turn--outside .tb-side__pip { color: var(--tb-side-yellow); }
.tb-side__turn--gathering .tb-side__pip,
.tb-side__turn--writing .tb-side__pip { color: var(--tb-side-purple); }
/* THE FINISH LINE (Steven 2026-10-14 ~15:05: "the agent card needs to be
   like a finish line card"; home_cards.finish_line_side): a delivered
   want's back. A green flag in the pip's place, the box ringed in the
   success green, the record line, the delivered piece on its own quiet
   tile (its front, as the card's panel draws it) and the agent's record. */
.tb-side__flag { flex: none; font-size: var(--text-lg); color: var(--tb-side-green); }
.tb-side__box--delivered {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-color: color-mix(in srgb, var(--tb-side-green) 45%, transparent);
}
.tb-side__delivered { font-weight: 600; }
.tb-side__delivered strong { color: var(--tb-side-green); font-weight: 800; }
.tb-side__piece { min-width: 0; color: var(--text-primary); }
.tb-side__piece .tb-card__work { margin: 0; }
.tb-side__recordline { color: color-mix(in srgb, var(--text-inverse) 72%, transparent); font-size: var(--text-sm); }
.tb-side__box {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid color-mix(in srgb, var(--tb-side-cyan) 28%, transparent);
    border-radius: var(--radius-xl);
    background: rgb(255 255 255 / 0.06);
}
.tb-side__lead { margin: 0; color: var(--text-inverse); font-size: var(--text-lg); font-weight: 700; line-height: 1.3; }
.tb-side__lead + .tb-side__task { margin-top: var(--space-2); }
.tb-side__task { margin: 0; color: rgb(255 255 255 / 0.8); font-size: var(--text-base); line-height: 1.45; }
.tb-side__task[hidden] { display: none; }
.tb-side__then { margin: var(--space-3) 0 0; color: var(--tb-side-cyan); font-size: var(--text-base); line-height: 1.4; }
.tb-side__task[hidden] + .tb-side__then { margin-top: var(--space-2); }
/* THE STEP'S DOOR ON THE WAITING SIDE (Steven 2026-10-14, his shot of
   Theo's back on step 9: "if you click this button, Approve the email to
   Grant, it would bring up the details just like you're on the front"): on
   a your-turn card's back the then line is the front's green control
   (cards/_agent_side.html side_turn `go`): it reads as it did and opens the
   step's work over the card; while that comes it says "Opening…" with a
   turning ring before the word (home-cards.js busy), as the front does. */
.tb-side__go,
.tb-side__go:visited {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--tb-side-cyan);
    text-decoration: none;
    cursor: pointer;
}
.tb-side__go:hover { color: var(--tb-side-cyan); text-decoration: underline; text-underline-offset: 0.2em; }
.tb-side__go:focus-visible {
    color: var(--tb-side-cyan);
    outline: calc(var(--tb-hair) * 2) solid var(--tb-side-cyan);
    outline-offset: var(--space-1);
    border-radius: var(--radius-sm);
}
.tb-side__go.is-opening { cursor: progress; text-decoration: none; }
.tb-side__go.is-opening::before {
    content: '';
    flex: none;
    width: var(--size-4);
    height: var(--size-4);
    box-sizing: border-box;
    border: calc(var(--tb-hair) * 2) solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: tb-side-opening calc(var(--duration-slow) * 3) linear infinite;
}
@keyframes tb-side-opening { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .tb-side__go.is-opening::before { animation: none; border-right-color: currentColor; opacity: 0.5; }
}
/* the one quiet control ("See the bids") */
.tb-side__control {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-12);
    margin-top: var(--space-4);
    padding: 0 var(--space-5);
    border: 1px solid rgb(255 255 255 / 0.32);
    border-radius: var(--radius-full);
    background: rgb(255 255 255 / 0.08);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    --interface-font: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    text-decoration: none;
}
.tb-side__control:hover,
.tb-side__control:focus-visible { color: var(--text-inverse); background: rgb(255 255 255 / 0.14); }

/* IT IS WORKING (Steven 2026-10-14, the dark Gathering side: "there needs
   to be an animation on there so you know it's working"; and 2026-10-13:
   "I don't want those kind of sun-spinning things"): a quiet, continuous
   motion, never a spinner, a bar or anything that reads as loading. While
   the agent works, the agents gather or the plan is being written, the pip
   swells and glows in its own colour, slowly; a round that is a still (no
   moving pose: the bench's seats, the one round of an agent with no
   picture) breathes a soft glow in the state's colour. The moving poses
   play as they do everywhere (static/cards/agent-round.js). Under reduced
   motion nothing moves. */
.tb-side--working { --tb-side-glow: var(--tb-side-cyan); }
.tb-side--gathering,
.tb-side--writing { --tb-side-glow: var(--tb-side-purple); }
@media (prefers-reduced-motion: no-preference) {
    .tb-side__turn--working .tb-side__pip,
    .tb-side__turn--gathering .tb-side__pip,
    .tb-side__turn--writing .tb-side__pip { animation: tb-side-pulse calc(var(--duration-slow) * 8) ease-in-out infinite; }
    :is(.tb-side--working, .tb-side--gathering, .tb-side--writing) :is(.tb-side__seat, .tb-side__round):not(:has(video)) {
        animation: tb-side-breathe calc(var(--duration-slow) * 12) ease-in-out infinite;
    }
    .tb-side__seat:nth-child(2) { animation-delay: calc(var(--duration-slow) * -4); }
    .tb-side__seat:nth-child(3) { animation-delay: calc(var(--duration-slow) * -8); }
}
@keyframes tb-side-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 6px currentColor; opacity: 0.72; }
    50% { transform: scale(1.45); box-shadow: 0 0 16px 2px currentColor; opacity: 1; }
}
@keyframes tb-side-breathe {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--tb-side-glow) 55%, transparent)); }
}

/* a short screen: the name and the box come in a step */
@media (max-height: 760px) {
    .tb-side__name { font-size: var(--size-10); }
    .tb-side__state { margin-top: var(--space-2); font-size: var(--text-base); }
    .tb-side__box { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); }
    .tb-side__lead { font-size: var(--text-base); }
}

/* ---- THE AGENT CARD: the side with the agent's whole page ------------- */
/* ONE AGENT CARD, ALWAYS DARK (Steven 2026-10-13 night, confirmed after a
   read-back): every flip to an agent (a proposal card, an offer card, a
   plan card, a done want, the your-turn card's back on a signed deal) is
   this side with the agent's whole page under it (.tb-side--card,
   cards/_agent_side.html agent_card): the first screen is the agent, its
   tall pose filling the card from its top with its name (and its state on
   a your-turn back) over the shade; under it, scrolling inside the card,
   the tagline as a quote, the badge, the brain line and By <operator>, the
   record as one quiet line, Every walk, What you give, All receipts, the
   handle small. The card's foot stays outside the scroller. */
.tb-side--card { padding-bottom: 0; }
.tb-side__scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
/* the first screen: the card's height less a peek of the page under it,
   so the quote shows the card scrolls */
.tb-side__first {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: calc(100% - var(--size-12));
    padding-bottom: var(--space-4);
}
.tb-side--card .tb-side__art { flex: 1 1 auto; }
.tb-side--card.tb-side--fill .tb-side__art { position: absolute; inset: 0; }
.tb-side--card .tb-side__words { position: relative; z-index: 1; margin-top: auto; }
/* the agent's page, on the night the shade ends in */
.tb-side__profile {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-6) var(--space-6);
    background: var(--color-dark-900);
}
.tb-side__quote {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 2px solid var(--tb-side-purple);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgb(255 255 255 / 0.06);
}
.tb-side__about { margin: 0; color: var(--text-inverse); font-family: var(--font-serif); --interface-font: var(--font-serif); font-style: italic; font-size: var(--text-lg); line-height: 1.5; overflow-wrap: anywhere; }
.tb-side__certs { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.tb-side__certline { margin: 0; }
.tb-side__certs .cert-line__for { color: rgb(255 255 255 / 0.72); }
.tb-side__stamp { margin: 0; color: rgb(255 255 255 / 0.72); font-size: var(--text-sm); font-weight: 700; }
.tb-side__brain { display: flex; flex-direction: column; gap: var(--space-1); }
.tb-side__model { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; color: var(--text-inverse); font-family: var(--font-heading); --interface-font: var(--font-heading); font-size: var(--text-base); font-weight: 800; }
.tb-side__mark { flex: none; width: 1em; height: 1em; font-size: 1em; color: currentColor; }
.tb-side__runs { font-family: var(--font-body); --interface-font: var(--font-body); font-size: var(--text-sm); font-weight: 400; opacity: 0.72; }
.tb-side__operator { margin: 0; color: rgb(255 255 255 / 0.72); font-size: var(--text-sm); }
.tb-side__operator a { color: var(--text-inverse); text-decoration: underline; text-underline-offset: 2px; }
.tb-side__operator a iconify-icon { margin-left: 0.25em; vertical-align: -0.1em; }
.tb-side__record { margin: 0; color: rgb(255 255 255 / 0.72); font-size: var(--text-sm); font-weight: 600; line-height: 1.45; }
.tb-side__heading { margin: var(--space-2) 0 0; color: var(--text-inverse); font-family: var(--font-heading); --interface-font: var(--font-heading); font-size: var(--text-lg); font-weight: 800; line-height: 1.2; }
.tb-side__walks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tb-side__walk {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
}
.tb-side__walk:first-child { padding-top: 0; }
.tb-side__walktitle { color: var(--text-inverse); font-size: var(--text-base); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.tb-side__walkmeta { color: rgb(255 255 255 / 0.66); font-size: var(--text-sm); }
.tb-side__walkmeta b { font-weight: 800; }
.tb-side__walk--delivered .tb-side__walkmeta b { color: var(--tb-side-green); }
.tb-side__walk--failed .tb-side__walkmeta b { color: var(--status-error); }
.tb-side__more,
.tb-side__none { margin: 0; color: rgb(255 255 255 / 0.66); font-size: var(--text-sm); font-weight: 700; }
.tb-side__list { margin: 0; padding-left: 1.1em; color: rgb(255 255 255 / 0.78); font-size: var(--text-base); line-height: 1.45; }
.tb-side__handle { margin: 0; color: rgb(255 255 255 / 0.55); font-family: var(--font-mono); --interface-font: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }

/* ---- in its hosts ---------------------------------------------------- */
/* The one card (cards/_card.html): a want face drawn as the agent side
   wears the step page's night, its kicker on top and its foot below on
   the dark (static/cards/card.css frames the card). */
.tb-card__face--side {
    position: relative;
    isolation: isolate;
    background: radial-gradient(90% 55% at 50% 32%, var(--color-dark-600) 0%, var(--color-dark-900) 70%);
    color: var(--text-inverse);
}
.tb-card__face--side > .tb-card__foot { position: relative; z-index: 1; flex: none; margin-top: auto; padding: var(--space-3) 0; background: none; border-top: 0; color: rgb(255 255 255 / 0.72); }
.tb-card__face--side .tb-side { padding-bottom: var(--space-2); }
/* THE AGENT CARD as a card's back (.tb-card__face--card): its picture
   reaches the card's top edge and the page scrolls between the top edge
   and the foot. */
.tb-card__face--card .tb-side--card { padding-bottom: 0; }
.tb-card__face--card > .tb-card__foot { border-top: 1px solid rgb(255 255 255 / 0.1); background: var(--color-dark-900); }

/* ---- ALL PREVIOUS WORK (Steven 2026-10-14 morning, the agent card's back
   for Nia: "You don't have to show 'Every walk'. It should be all previous
   work. Make it expand.") ---------------------------------------------------
   cards/_agent_side.html draws the first three rows, then a quiet "Show all
   N" (a <details> summary: no script; card.js never flips on a summary)
   that opens the rest in place, inside the card's own scroller, and reads
   "Show fewer" while open. The control is the sheet language's quiet door
   (step-cards.css .tp-quiet-door__open: a thin-ruled pill, the words at
   their own weight), on the dark: the side's own faint rule and ink. */
.tb-side__allwork { display: block; }
.tb-side__showall {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--size-10);
    padding: 0 var(--space-4);
    border: 1px solid rgb(255 255 255 / 0.28);
    border-radius: var(--radius-full);
    background: rgb(255 255 255 / 0.06);
    color: var(--text-inverse);
    font-size: var(--text-sm);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tb-side__showall::-webkit-details-marker { display: none; }
.tb-side__showall::marker { content: ''; }
.tb-side__showall:focus-visible { outline: 2px solid var(--tb-side-green); outline-offset: 2px; }
.tb-side__showall iconify-icon { flex: none; font-size: var(--text-base); }
.tb-side__showall-less,
.tb-side__allwork[open] .tb-side__showall-more { display: none; }
.tb-side__allwork[open] .tb-side__showall-less { display: inline; }
.tb-side__allwork[open] .tb-side__showall iconify-icon { transform: rotate(180deg); }
/* the opened rows under the control, the first of them with the rows' own
   top padding (it is not the list's first row) */
.tb-side__walks--rest { margin-top: var(--space-2); }
.tb-side__walks--rest > .tb-side__walk:first-child { padding-top: var(--space-2); }
.tb-side__allwork > .tb-side__more { margin-top: var(--space-3); }