/* THE CARD'S RIGHT COLUMN, BOTTOM ROW, PATH AND ARCHIVES (Steven
   2026-11-09, deck redesign step 4). templates/cards/_card.html (_col,
   _foot with col, _backfoot, _archives_layer), drawn for the deck's cards
   (tb_card(c, col=true)); wiring static/cards/card-col.js. Everything here
   is placing and framing: the card's own fonts, colours, chips and pill
   stay card.css's.

   Only inside the deck shell (.app-shell--deck-shell, the signed-in /home
   deck): the column hangs under the shell's type icon, and the bottom row
   shares the shell's dock tokens (static/css/components/deck-shell.css:
   --ds-dock-h, --ds-dock-bottom, --ds-dock-side, --ds-dock-in,
   --ds-dock-in-b, --ds-dock-gap), so Market, the card's main button and +
   sit on one line at one height and can never drift. Outside the shell (a
   guest's deck) the discs and the path are not drawn. The path is drawn
   only on a card in a pack (section 4). The three dots are
   the card's own (cards/_card.html _col draws them before the column, on
   the card itself): their corner and the title's room are card.css's,
   THE THREE DOTS, inside the shell or out. */

/* ---- outside the shell: nothing of the column ------------------------- */
.tb-card__col { display: contents; }
.tb-card__col > .tb-card__colbtn,
.tb-card__path { display: none; }

/* ---- 1. the right column ---------------------------------------------- */
/* Top to bottom: Market, Save (the heart), Share path, Flip
   (cards/_card.html _col; Steven 2026-11-10: My agent is the deck's bottom
   left button now, Market took its place here; the three dots are at the
   card's top, THE THREE DOTS AT THE TOP below). THE GROUP STANDS CENTRED
   ON THE CARD'S RIGHT EDGE (Steven 2026-11-10): the column runs the card's
   height and its discs sit in its middle; only the discs take a tap. On
   the card's frame, outside its faces: the same discs on the front and the
   back, gone while the card turns. */
.app-shell--deck-shell .tb-card--col > .tb-card__col {
    position: absolute;
    z-index: var(--z-dropdown);
    top: 0;
    bottom: 0;
    right: var(--ds-col-right);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-col-gap);
    width: var(--ds-col);
    pointer-events: none;
}
.app-shell--deck-shell .tb-card--col > .tb-card__col > * { pointer-events: auto; }
.tb-card.is-3d > .tb-card__col { visibility: hidden; }
/* THE COLUMN FLOATS OVER THE CARD (Steven 2026-11-10, his shot of "Your
   friend, in five rhyming lines": "Make the right-hand card be laid out so
   that they are OVERLAY cards. We are changing the orientation for the
   stuff underneath and they are supposed to float over. We need all the
   space we can get."; and of its back, "when you flip the card too, the
   text needs to go full card width"): the discs sit on top, the card's
   words, picture, odds, chart line and the Started / agent / Target row
   run the card's full width under them, front and back, at the card's own
   side inset (--space-5), as if the column were not there. Where a disc
   lands on the chart's target or the row's last words the disc wins and
   the content runs under it; only the discs take a tap (above). Nothing on
   a face pads for the column. --tb-col-w names what the column covers on
   the card's right edge (its inset, a disc and a gap), for a row of
   controls that must stay whole beside it (View agent's tab row and its
   Looking for work choices, css/pages/workspace-cards.css and
   view-agent.css) and the bench card's words (bench-cards.css). */
.app-shell--deck-shell .tb-card--col { --tb-col-w: calc(var(--ds-col-right) + var(--ds-col) + var(--space-2)); }
/* THE FROSTED DISC (Steven 2026-11-10, his reference shot: a pale
   see-through white round over a photo, the share mark dark in it: "I
   want the share, heart and flip to be like this one, and also the
   bottom-left corner for the agent to also be like this"; then, seeing it
   live, "make the lighter buttons more transparent"): Save, Share path and
   Flip are white at 55 percent, the picture showing through it blurred,
   a thin light ring and a soft shadow, the mark in the site's dark ink
   (--text-primary). The shadow keeps the round's edge on a white back, the
   dark mark reads on a picture, a night back or white alike. My agent at
   the deck's bottom left wears the same round (deck-shell.css
   .ds-fab--agent: the same background, ring and ink). Market keeps its own
   white disc with the black line (MARKET, below). */
.app-shell--deck-shell .tb-card__col > .tb-card__colbtn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--ds-col);
    height: var(--ds-col);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-white) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-white) 50%, transparent), 0 2px 10px rgb(0 0 0 / 0.22);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-tap-highlight-color: transparent;
}
/* the deck's line marks draw white by their own name (components/
   _deck_glyphs.html, .ds-glyph--sharepath): on the frosted round they take
   the round's dark ink */
.app-shell--deck-shell .tb-card__col > .tb-card__colbtn > svg { color: inherit; }
.app-shell--deck-shell .tb-card__col > .tb-card__colbtn:hover { background: color-mix(in srgb, var(--color-white) 72%, transparent); }
.tb-card__colbtn:focus-visible { outline: 2px solid var(--interactive-focus-ring, var(--color-yellow-400)); outline-offset: 2px; }
.tb-card__colbtn iconify-icon,
.tb-card--col > .tb-card__menu > .tb-card__menubtn iconify-icon { display: block; width: 24px; height: 24px; font-size: 24px; }
/* MARKET (Steven 2026-11-10): a white disc with a black line, the stack of
   cards in black line work, the drop shadow the deck's Market button
   wore. A market card draws none (_col, kind 'offer'); the Want Market's
   deck never shows one. */
.app-shell--deck-shell .tb-card__col > .tb-card__colbtn--market {
    box-sizing: border-box;
    border: 2px solid var(--color-black);
    background: var(--color-white);
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.28);
    color: var(--color-black);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.app-shell--deck-shell .tb-card__col > .tb-card__colbtn--market:hover { background: var(--color-gray-100); }
.app-shell--deck-shell .tb-card__col > .tb-card__colbtn--market > svg { color: var(--color-black); filter: none; }
[data-hc-market-deck] .tb-card__col > [data-tb-card-market] { display: none; }
/* SAVE (the heart; the disc keeps its bookmark names in the code): only
   where the pack picker is on the page (signed
   in, not a guest: feed/_pack_add.html pack_add_parts, which marks <html>
   tb-pack-add as it is drawn). A class, not body:not(:has([data-pack-add])):
   a body:has() makes every card put in on the deck restyle the whole page
   (lane P, 2026-11-10). */
html .tb-card__col > [data-tb-card-bookmark]:not(.tb-pack-add *) { display: none; }
/* THE THREE DOTS AT THE TOP (Steven 2026-11-10: "The three dots are still
   supposed to be at the top of the card"): on the card itself, before the
   column (cards/_card.html _col), in its top right corner, the 44px tap
   centred where a sheet inside the card draws its X (card.css
   .tb-card__layerx: --space-4 in, --size-10 round); the menu opens down
   from it. The title keeps clear of it (card.css THE THREE DOTS).
   THE THREE DOTS ARE PLAIN DOTS (Steven 2026-11-10): no disc and no ring,
   white with the path's dark edge so they read on a bright picture or a
   white back, still a 44px tap that opens the card's own menu under it */
.app-shell--deck-shell .tb-card--col > .tb-card__menu {
    top: calc(var(--space-4) - var(--space-1) / 2);
    right: calc(var(--space-4) - var(--space-1) / 2);
}
.app-shell--deck-shell .tb-card--col > .tb-card__menu > .tb-card__menubtn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: calc(var(--size-10) + var(--space-1));    /* 44px, the tap */
    height: calc(var(--size-10) + var(--space-1));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    box-shadow: none;
    color: var(--text-inverse);
    cursor: pointer;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-tap-highlight-color: transparent;
}
.app-shell--deck-shell .tb-card--col > .tb-card__menu > .tb-card__menubtn:is(:hover, [aria-expanded="true"]) { background: none; }
.app-shell--deck-shell .tb-card--col > .tb-card__menu > .tb-card__menubtn iconify-icon { filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.9)) drop-shadow(0 0 1px rgb(0 0 0 / 0.6)) drop-shadow(0 1px 4px rgb(0 0 0 / 0.4)); }
/* Share path's "Link copied", to the disc's left */
.tb-card__colbtn[data-copied]::after {
    content: attr(data-copied);
    position: absolute;
    top: 50%;
    right: calc(100% + var(--space-2));
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--surface-primary);
    color: var(--color-gray-950);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    transform: translateY(-50%);
}
/* SHORT ON THE FRONT (Steven 2026-11-09 16:34: "Sometimes the card gets
   squished up ... This needs to be shortened... so it doesnt overlap the
   text and the probability"): the front's title and its words take two
   lines each at most, an ellipsis after, in their own fonts and sizes; the
   whole words stay on the back. The probability keeps its own line. */
.app-shell--deck-shell .tb-card--col .tb-card__front .tb-card__head .tb-card__title,
.app-shell--deck-shell .tb-card--col .tb-card__front .tb-card__head .tb-card__subtitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.app-shell--deck-shell .tb-card--col .tb-card__front .tb-card__odds { flex: none; }
/* THE HEADLINE SHOWS WHOLE (Steven 2026-11-10, "why do we have
   concatenation here, it's supposed to have a shortener"; the foreman the
   same night: "never an ellipsis on the headline"). A title longer than
   home_cards.WANT_TITLE_LONG_CHARS wears tb-card__title--long (the offer
   card's own step, card.css): on a phone it is one size smaller and may
   take a third line, so a headline of up to 40 characters shows whole
   ("Toast for brother's graduation" was "Toast for brother's..." at 30px).
   The front, the light card and the dark and gathering side all wear it. */
@media (max-width: 600px) {
    .app-shell--deck-shell .tb-card--col .tb-card__head .tb-card__title.tb-card__title--long {
        font-size: var(--text-2xl);
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    /* a short screen's title is already 24px (below): one size under it */
    @container tb-front (max-width: 592px) and (max-height: 752px) {
        .app-shell--deck-shell .tb-card--col .tb-card__head .tb-card__title.tb-card__title--long { font-size: var(--text-xl); }
    }
}
/* the title and its words clear the column (the shell's type icon pads
   them already; the dark side's own head too) */
.app-shell--deck-shell .tb-card--col .tb-card__art > .tb-card__head > .tb-card__badge { display: none; }

/* ---- 2 and 3. the bottom row: one line, one height --------------------- */
/* The front's main button (the green pill, an offer's Get this) is the last
   thing in the white panel, its foot of flip words gone: the panel ends
   --ds-dock-in-b over the card's bottom edge, the button is --ds-dock-h
   tall, and it gives up the room the shell's Market and + take at its ends
   (their discs sit --ds-dock-in from the card's sides, the panel's own
   inset). The door (Agent, or Details) is directly above it, centred. */
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__front > .tb-card__panel { padding-bottom: var(--ds-dock-in-b); }
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__front > .tb-card__panel > .tb-card__cta {
    box-sizing: border-box;
    min-height: var(--ds-dock-h);
    height: var(--ds-dock-h);
    margin-left: calc(var(--ds-dock-h) + var(--ds-dock-gap));
    margin-right: calc(var(--ds-dock-h) + var(--ds-dock-gap));
}
/* a front with no button: its words stop above the line */
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__front > .tb-card__panel:not(:has(> .tb-card__cta)) {
    padding-bottom: calc(var(--ds-dock-in-b) + var(--ds-dock-h) + var(--ds-dock-gap));
}
/* THE PILL HOLDS THE AGENT DOOR (Steven 2026-11-10, the song want's card:
   "remove the 'Agent' above the green button"): the picture's agent pill
   opens the agent now (cards/_card.html _want_art, its up chevron), so no
   Agent stands over the button and the words come down onto it; the button
   keeps one space above it, so the last line of words stops clear of the
   dock's line instead of sitting on it. */
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__front > .tb-card__panel--pill > .tb-card__cta { margin-top: var(--space-2); }
.tb-card__foot--door { padding: 0; }
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__foot--door { margin-bottom: calc(-1 * var(--space-1)); }
.tb-card__foot--door .tb-card__details { padding: var(--space-1) var(--space-2); }

/* the dark side as the front: its words stand on the card's floor, the
   control ("See the bids") on the line, the door above it */
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__front.tb-card__face--side .tb-side { padding-bottom: var(--ds-dock-in-b); }
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__front.tb-card__face--side .tb-side__words { margin-top: auto; }
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__front.tb-card__face--side .tb-side__words > .tb-side__control {
    box-sizing: border-box;
    min-height: var(--ds-dock-h);
    height: var(--ds-dock-h);
    margin-left: calc(var(--ds-dock-h) + var(--ds-dock-gap) + var(--ds-dock-in) - var(--space-6));
    margin-right: calc(var(--ds-dock-h) + var(--ds-dock-gap) + var(--ds-dock-in) - var(--space-6));
}
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__front.tb-card__face--side:has(> .tb-card__foot--door) .tb-side__words > .tb-side__control { margin-top: calc(var(--space-4) + 34px); }
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__front.tb-card__face--side .tb-side:not(:has(.tb-side__words > .tb-side__control)) {
    padding-bottom: calc(var(--ds-dock-in-b) + var(--ds-dock-h) + var(--ds-dock-gap) + 34px);
}
.app-shell--deck-shell .hc-slide .tb-card--col .tb-card__front.tb-card__face--side > .tb-card__foot--door {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: calc(var(--ds-dock-in-b) + var(--ds-dock-h) + var(--space-1));
    margin: 0;
    padding: 0;
    color: rgb(255 255 255 / 0.72);
}

/* a back's bottom row: the same line, Market and + at its ends, Archives
   between them when the want has history */
.tb-card__backdock { display: none; }
.app-shell--deck-shell .tb-card--col .tb-card__backdock {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    height: var(--ds-dock-h);
    padding: var(--space-2) calc(var(--ds-dock-in) + var(--ds-dock-h) + var(--ds-dock-gap)) var(--ds-dock-in-b);
    background: var(--surface-primary);
    color: var(--text-secondary);
    font-size: var(--text-base);
}
.app-shell--deck-shell .tb-card--col .tb-card__face--side > .tb-card__backdock { background: var(--color-dark-900); color: rgb(255 255 255 / 0.72); }
.app-shell--deck-shell .tb-card--col .tb-card__back--want > .tb-card__backdock { background: var(--tb-card-night); color: rgb(255 255 255 / 0.72); }
.tb-card__archives[hidden] { display: none; }
/* the back keeps the front's places: the want's title top left (on the
   person's turn, over the dark strip), clear of the three dots on the right
   as the front's title is (card.css THE THREE DOTS); the strip's words and
   the Proposals rows run the card's full width under the column (THE
   COLUMN FLOATS OVER THE CARD, above) */
.tb-card__planhead { display: none; }
.app-shell--deck-shell .tb-card--col .tb-card__planhead { display: block; position: static; margin: 0 0 var(--space-3); padding: 0; }
.app-shell--deck-shell .tb-card--col:has(> .tb-card__menu) .tb-card__planturn > .tb-card__planhead { padding-right: calc(var(--size-10) + var(--space-1)); }
.app-shell--deck-shell .tb-card--col .tb-card__planhead .tb-card__title { margin: 0; color: var(--text-inverse); }
.app-shell--deck-shell .tb-card--col .tb-card__planturn .tb-side__kicker { padding-right: 0; }
/* the want's history is the Archives row's now, not the plan's tail */
.tb-card--col [data-tb-card-plan] [data-live-region="history"] { display: none; }
/* THE BACK'S SCROLLER KEEPS THE CARD'S CORNERS (the frame lane's find,
   2026-11-10: a small black triangle outside the top right corner of the
   song want's turned card at 390x844). A back's words scroll in their own
   box (.tb-card__backscroll), which the browser draws on a layer of its own
   once the box holds a video (the agent's moving round); on a turned card
   that layer was not cut by the face's round corner and its square corner
   showed black past the card's outline. The scroller takes the face's own
   corners where it meets them, its top two always and its bottom two when
   it runs to the card's bottom, so it cuts itself. */
.tb-card--col > .tb-card__inner > .tb-card__face > .tb-card__backscroll {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.tb-card--col > .tb-card__inner > .tb-card__face > .tb-card__backscroll:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* ---- 4. the path ------------------------------------------------------- */
/* A chain of marks on the card's left edge over its picture, between the
   title and the odds (card-col.js places it): the marks light gray, the
   card on top lit white at the same size as the others (Steven
   2026-11-10: "highlighted white and not larger"), the joining line light
   gray.
   ONLY ON A PACK (Steven 2026-11-10, of the five clubs down a single
   want's left: "Remove the line of icons in the top left that has the
   start to finish. I don't think it's helpful on a single card; it will be
   for action packs.", packs as against single cards, so a heat pack keeps
   it too; before that, 2026-11-09 22:05: "This needs to be on action packs
   not single cards, because it shows the actual series"): on a card in a
   pack (its slide's data-hc-pack-kind, action or heat) the path is the
   pack, one mark per card in order (the target for a want, the club for a
   card my agent runs, the stack for a market card, a + for the pack's add
   card), the card on top lit. A single card of any kind (a want, an offer,
   an agent card, the lot) and View agent's offer cards (card-col.js
   packSeries) draw none and keep no room for one: the markup stays in
   _col, empty and hidden. Every path
   ends in the stand, the double line, and none ends in a big target: the
   one yellow on a card is the Toll Bench logo in its circle. No disc
   behind the marks: a dark edge of shadow carries them on a bright cover.
   When the band is short the middle marks go first and a faded stub
   stands where they were: the stand always, then the card on top, then
   the rest. An overlay: it never takes a tap. */
.app-shell--deck-shell .tb-card--col {
    --tb-path-target: 52px;     /* the path's column, its centre under the type circle */
    --tb-path-now: 22px;        /* the step the card is on: lit white, never larger (Steven 2026-11-10) */
    --tb-path-step: 22px;       /* every other step */
    --tb-path-gap: 10px;        /* the joining line between two marks */
    --tb-path-stub: 14px;       /* a faded stub where marks are left out */
    --tb-path-stand: 8px;       /* the end of the path: the double line's ink */
    --tb-path-margin: 8px;      /* clear of the title over it, the odds under it */
    --tb-path-gray: rgb(210 210 218 / 0.75);
}
.app-shell--deck-shell .hc-slide[data-hc-pack-kind] .tb-card--col > .tb-card__path:not([hidden]) {
    position: absolute;
    z-index: 2;
    left: var(--ds-col-right);
    display: block;
    width: var(--tb-path-target);
    pointer-events: none;
}
.tb-card.is-flipped > .tb-card__path,
.tb-card.is-3d > .tb-card__path { visibility: hidden; }
.tb-card__pathlist {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tb-path-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tb-card__pathstep {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: var(--tb-path-step);
    height: var(--tb-path-step);
    color: var(--tb-path-gray);
    filter: drop-shadow(0 0 1.5px rgb(0 0 0 / 0.7)) drop-shadow(0 1px 4px rgb(0 0 0 / 0.4));
}
.tb-card__pathstep[hidden] { display: none; }
.tb-card__pathstep + .tb-card__pathstep::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 1px);
    left: calc(50% - 1px);
    width: 2px;
    height: calc(var(--tb-path-gap) - 2px);
    border-radius: 1px;
    background: var(--tb-path-gray);
}
.tb-card__pathstep > svg { display: block; width: 100%; height: 100%; }
.tb-card__pathstep.is-now { width: var(--tb-path-now); height: var(--tb-path-now); color: var(--text-inverse); }
/* marks left out above: the line fades up from the first one shown */
.tb-card__pathstep.is-cut-before { margin-top: var(--tb-path-stub); }
.tb-card__pathstep.is-cut-before::before {
    height: calc(var(--tb-path-stub) - 2px);
    background: linear-gradient(0deg, var(--tb-path-gray), transparent);
}
/* the end: the stand, the double line alone, in the path's light line
   (lit white on the card's last step) */
.tb-card__pathstep--end,
.tb-card__pathstep--end.is-now {
    width: var(--tb-path-step);
    height: var(--tb-path-stand);
    color: var(--tb-path-gray);
}
.tb-card__pathstep--end.is-now { color: var(--text-inverse); }
/* marks left out between the last one shown and the stand: the line
   breaks, fading out and in again */
.tb-card__pathstep--end.is-gap { margin-top: var(--tb-path-stub); }
.tb-card__pathstep--end.is-gap::before {
    height: calc(var(--tb-path-gap) + var(--tb-path-stub) - 2px);
    background: linear-gradient(180deg, var(--tb-path-gray) 0, transparent 38%, transparent 62%, var(--tb-path-gray) 100%);
}
/* only the stand shows: nothing joins it; the shortest card's step joined
   straight to the stand: nothing over it */
.tb-card__pathstep--end.is-alone::before,
.tb-card__pathstep.is-first::before { content: none; }
/* the double line (#ds-g-step-end: its two lines' ink is y 90 to 166 of
   its 256 box), a step wide, its ink filling the stand's height */
.tb-card__pathstep > svg.tb-card__pathline {
    position: absolute;
    top: calc(var(--tb-path-stand) / 2 - var(--tb-path-step) / 2);
    left: 0;
    width: var(--tb-path-step);
    height: var(--tb-path-step);
}

/* THE PICTURE KEEPS THE PATH'S ROOM (Steven 2026-11-09 night: on his phone
   the picture was about 270pt and the path one small club over "82.0%").
   On the front of a want in a pack the odds never come up into
   the room the path needs under the title (--tb-path-room: the stand, the
   card on top joined to it, and the margins; card-col.js sets it for each
   card). A single want keeps no room: it has no path. The chart
   gives up its height first (home-cards.css); then the picture takes what
   it still needs from the white panel, never less than its own words: the
   panel's middle (the step's thing to look at, already a scroller) gets
   shorter and scrolls, while the turn, the heading, the door and the main
   button stay whole and the button stays on the dock's line. */
.app-shell--deck-shell .hc-slide[data-hc-pack-kind] .tb-card--col.tb-card--want {
    --tb-path-room: calc(2 * var(--tb-path-stub) + var(--tb-path-now) + var(--tb-path-gap) + var(--tb-path-stand) + 2 * var(--tb-path-margin));
    --tb-path-room-bare: calc(var(--tb-path-now) + var(--tb-path-gap) + var(--tb-path-stand) + 2 * var(--tb-path-margin));
}
.app-shell--deck-shell .hc-slide .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front > .tb-card__art { min-height: min-content; }
.app-shell--deck-shell .hc-slide[data-hc-pack-kind] .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front > .tb-card__art > .tb-card__over { padding-top: var(--tb-path-room); }
/* THE BAND RUNS THE CARD'S WIDTH UNDER THE COLUMN (THE COLUMN FLOATS OVER
   THE CARD, section 1): the odds, the chart with its target dot and the
   markers with "Target 100%" keep the art's own side inset and nothing
   more, the chart's height cap is card.css's (0.22 of the art's width), so
   its top line stays on the light bar. */
.app-shell--deck-shell .hc-slide .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front > .tb-card__panel { flex-shrink: 1; min-height: 0; }
.app-shell--deck-shell .hc-slide .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front > .tb-card__panel > * { flex-shrink: 0; }
.app-shell--deck-shell .hc-slide .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front > .tb-card__panel > .tb-card__work { flex-shrink: 1; min-height: 0; }
/* the dark side as the front (the agent has the ball) keeps the same room
   under its title: its words give way instead, the box of the agent's
   words getting shorter and scrolling, the turn, the name and the state
   whole */
.app-shell--deck-shell .hc-slide[data-hc-pack-kind] .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front.tb-card__face--side:has(.tb-side__box) .tb-side__head { margin-bottom: var(--tb-path-room); }
.app-shell--deck-shell .hc-slide .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front.tb-card__face--side:has(.tb-side__box) .tb-side__words { display: flex; flex-direction: column; flex-shrink: 1; min-height: 0; }
.app-shell--deck-shell .hc-slide .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front.tb-card__face--side:has(.tb-side__box) .tb-side__words > *,
.app-shell--deck-shell .hc-slide .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front.tb-card__face--side:has(.tb-side__box) .tb-side__turn > * { flex-shrink: 0; }
.app-shell--deck-shell .hc-slide .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front.tb-card__face--side:has(.tb-side__box) .tb-side__words > .tb-side__turn { flex-shrink: 1; min-height: 0; }
.app-shell--deck-shell .hc-slide .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front.tb-card__face--side:has(.tb-side__box) .tb-side__turn > .tb-side__box { flex-shrink: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
/* the chart keeps a readable line on any phone but the shortest; the
   shortest (a card under 600px) keeps the card on top joined straight to
   the stand, no stubs */
@container tb-front (min-height: 600px) {
    .app-shell--deck-shell .hc-slide .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front > .tb-card__art > .tb-card__over > .tb-card__chart { min-height: 40px; }
}
@container tb-front (max-height: 599.98px) {
    .app-shell--deck-shell .hc-slide[data-hc-pack-kind] .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front > .tb-card__art > .tb-card__over { padding-top: var(--tb-path-room-bare); }
    .app-shell--deck-shell .hc-slide[data-hc-pack-kind] .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front.tb-card__face--side:has(.tb-side__box) .tb-side__head { margin-bottom: var(--tb-path-room-bare); }
}

/* THE SHORT CARD IS THE CARD'S HEIGHT, NOT THE SCREEN'S. The short phone's
   rules (home-cards.css and artifact-cards.css, max-height 760px; the
   title's step up at 761px and over) ask the screen, and on an iPhone
   Safari answers with the screen's height with its bars put away (about
   790pt on Steven's 16 Pro) while the deck's card has only the room the
   bars leave (about 620 to 750pt). So on his phone the front kept the
   tall card's 30px title on two lines, the want's words under it, the
   44px number and the agent row under the chart, and the white panel left
   the picture 270pt. The same rules here, asked of the card's own front
   (a size container on the deck, whose card is exactly its slide; the
   screen's 600 x 760 is the card's 592 x 752 inside the slide's 4px). A
   phone's width is still the screen's: a wide screen keeps its own type. */
.app-shell--deck-shell .hc-slide > .tb-card--col.tb-card--want > .tb-card__inner > .tb-card__front { container: tb-front / size; }
@media (max-width: 600px) {
    @container tb-front (max-width: 592px) and (max-height: 752px) {
        .hc-slide .tb-card__number { font-size: 38px; }
        .hc-slide .tb-card__title { font-size: 24px; }
        .hc-slide .tb-card__art { padding: var(--space-3) var(--space-5); }
        .hc-slide .tb-card__over { gap: 4px; }
        .hc-slide .tb-card__caption { font-size: 14px; }
        .hc-slide .tb-card__markers { font-size: 12px; }
        .hc-slide .tb-card__panel { gap: 8px; padding-top: var(--space-3); }
        .hc-slide .tb-card__cta { min-height: 48px; }
        .hc-slide .tb-card__subtitle,
        .hc-slide .tb-card__body { -webkit-line-clamp: 1; line-clamp: 1; }
        .hc-slide .tb-card__heading--step { -webkit-line-clamp: 2; line-clamp: 2; }
        .tb-card__work :is(.sc-art-front__img, .sc-art-front__page, .art-video--front, .art-site__view) { aspect-ratio: auto; height: var(--size-24); }
        .tb-card__work .sc-art-front__para { -webkit-line-clamp: 1; line-clamp: 1; }
        .hc-slide .tb-card--want:has(.tb-card__work) .tb-card__front .tb-card__art :is(.tb-card__markers, .tb-card__subtitle) { display: none; }
        .hc-slide .tb-card--want:has(.tb-card__work) .tb-card__front .tb-card__title { -webkit-line-clamp: 2; line-clamp: 2; }
        /* agent-side.css's short screen, the dark side as the front (that sheet
           is linked again after this one: one step more specific) */
        .tb-card__front .tb-side .tb-side__name { font-size: var(--size-10); }
        .tb-card__front .tb-side .tb-side__state { margin-top: var(--space-2); font-size: var(--text-base); }
        .tb-card__front .tb-side .tb-side__box { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); }
        .tb-card__front .tb-side .tb-side__lead { font-size: var(--text-base); }
    }
}

/* ---- 5. Archives, inside the card -------------------------------------- */
.tb-card__sheet--archives { background: var(--surface-primary); color: var(--text-primary); }
.tb-card__archscroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: var(--space-5) var(--space-5) var(--space-8, 32px);
    -webkit-overflow-scrolling: touch;
}
.tb-card__archscroll > .tb-card__backtitle { margin: 0 0 var(--space-4); padding-right: calc(var(--size-10) + var(--space-2)); }
.tb-card__archbody .want-prior-attempts__title { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tb-card__pathlist { transition: none; }
}