/* THE CARD FRAME (Steven 2026-11-09 19:35, his marker drawing: "I want
   the card to have a 5 px outline, and these curves to show what type of
   card it is"; 19:30: "This is the size and look I want for the top left
   Logo"; 19:35: "Always put the Logo in the top left corner of the card";
   20:55: "a single pixel line that goes around the outside, and then on the
   inside where the curves are, also a single pixel line, so that the purple
   area is actually white, and then the icons can be black").
   Markup: components/_card_frame.html (card_frame, card_frame_mark), which
   also holds the curves and says what each kind wears. No script needed.

   1. the piece: the white band and its two 1px lines all the way round,
      the one white pocket at the top left, the black mark centred in it
      and its number.
      Every size is a custom property; --cf-scale scales them all together
      (a share picture's card, a house page's card);
   2. the deck (the signed-in /home deck shell): every card wears it
      (static/js/shell/card-frame.js puts it on), the tray button holds the
      mark, and the card's title, path, column and bottom line make room. */

/* ---- 1. the piece -------------------------------------------------------- */
:root {
    --cf-scale: 1;
}
.cf-host,
.cf,
.cf-mark,
.has-cf,
.hc-slide[data-hc-pack-kind] {                      /* a pack's strip and layers draw with the frame's lines (heat-stacks.css) */
    --cf-u: calc(1px * var(--cf-scale, 1));
    --cf-line-w: calc(5 * var(--cf-u));                /* the band */
    --cf-hair: calc(1 * var(--cf-u));                  /* its two lines: one pixel */
    --cf-a: calc(37.5 * var(--cf-u));                  /* the pocket's centre from both edges, the card's corner there */
    --cf-r: calc(28 * var(--cf-u));                    /* the other two corners (the deck card's, --radius-hero) */
    --cf-bl: var(--cf-r);                              /* the bottom left: plain, or the circle's round the My agent disc (.cf--myagent) */
    --cf-radius: var(--cf-a) var(--cf-r) var(--cf-a) var(--cf-bl);
    --cf-fill: var(--surface-primary, #fff);           /* the band and the pocket: white (gray on a card's back, section 2) */
    --cf-ink: var(--tb-ink, #030308);                  /* the mark's ink on the card: black line work */
    /* THE LINE COLOUR, one place: the two lines round the card and every
       pocket's curve (Steven 2026-11-10: "Let's make the lines that go
       around the card a dark gray, so it is elegant"): --color-gray-700,
       the dark gray short of black; a turned card's are lighter (section
       2, THE BACK'S LINES ARE A LIGHTER GRAY) */
    --cf-line-ink: var(--color-gray-700, #3f3f46);
    /* the header's logo and its number (components/_toll_mark.html in
       components/_layout_cards_header.html; rail-nav.css .boh-rail__disc,
       --boh-rail-control-size 40px, its rings 85% of it, stroke 2 on 20;
       .boh-rail__badge 20px, var(--space-1) side padding, --text-xs mono
       semibold, hung --space-1 up and --space-2 right of the logo by
       layout-cards-header.css .lc-header__mark .lc-mark__badge) */
    --cf-mark: calc(40 * var(--cf-u));
    --cf-badge: calc(20 * var(--cf-u));
    --cf-badge-pad: calc(4 * var(--cf-u));
    --cf-badge-font: calc(12 * var(--cf-u));
    --cf-badge-up: calc(4 * var(--cf-u));
    --cf-badge-out: calc(8 * var(--cf-u));
    /* the mark centred in the pocket's white (Steven 20:55: "the icon
       should be centered in that circle area"; 2026-11-10: "the white
       space around it has a different distance on the top left than the
       bottom right, the space around should be the same"). The white the
       eye reads runs between the two lines: the outer line is drawn inside
       the card's edge, the inner line outside the pocket's circle (the
       picture's side), so the white is 1 to 75 across, its centre half a
       line past the circle's centre (38, not 37.5). The mark sits on that
       centre, the same white on every side, and on a whole pixel, so it
       rounds with the card and the frame and never half a pixel against
       them. Its number rides its shoulder and may stand out of the pocket
       a little */
    --cf-mark-c: calc(var(--cf-a) + var(--cf-hair) / 2);
    --cf-mark-x: calc(var(--cf-mark-c) - var(--cf-mark) / 2);
    --cf-mark-y: calc(var(--cf-mark-c) - var(--cf-mark) / 2);
    /* the top of the mark's ink, from the card's top: the line the title's
       capitals stand on (section 2, THE TITLE ON THE MARK'S LINE). Every
       line drawing (components/_deck_glyphs.html: the club, the stack, the
       page, the flask, the pack marks) starts its ink 20 in from the top of
       its 256 box, its top stroke centred on 30 at width 20; a mark that
       fills its box (the want's yellow disc, a face) sets this to 0 */
    --cf-mark-ink: calc(var(--cf-mark) * 20 / 256);
    --cf-mark-top: calc(var(--cf-mark-y) + var(--cf-mark-ink));
}
.cf-host { position: relative; border-radius: var(--cf-radius); }
.cf {
    position: absolute;
    inset: 0;
    z-index: 3;
    box-sizing: border-box;
    border: var(--cf-line-w) solid var(--cf-fill);
    border-radius: var(--cf-radius);
    pointer-events: none;
}
/* the outer line, on the card's edge, over the pocket */
.cf::before,
.cf::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}
.cf::before {
    z-index: 2;
    inset: calc(-1 * var(--cf-line-w));
    border: var(--cf-hair) solid var(--cf-line-ink);
    border-radius: var(--cf-radius);
}
/* the inner line along the band's edges and round its corners; in the
   type pocket's corner the pocket draws it round its curve, over this one */
.cf::after {
    z-index: 0;
    inset: 0;
    border: var(--cf-hair) solid var(--cf-line-ink);
    border-radius: calc(var(--cf-a) - var(--cf-line-w)) calc(var(--cf-r) - var(--cf-line-w)) calc(var(--cf-a) - var(--cf-line-w)) calc(var(--cf-bl) - var(--cf-line-w));
}
.cf__pocket {
    position: absolute;
    display: block;
    width: calc(var(--cf-w) * var(--cf-u));
    height: calc(var(--cf-h) * var(--cf-u));
    z-index: 1;
    overflow: visible;
}
.cf__white { fill: var(--cf-fill); }
.cf__inline { fill: none; stroke: var(--cf-line-ink); stroke-width: 1; }
/* the one pocket, drawn for the top left */
.cf__pocket--type { top: calc(-1 * var(--cf-line-w)); left: calc(-1 * var(--cf-line-w)); }
/* THE BAND GOES ALL THE WAY ROUND (Steven 2026-11-10, his pen sketch of
   the frame on grid paper: "the outline goes around the top, and the
   color goes around the bottom right, the left bottom is floating above
   the color, and the white goes all the way around"; then, of the cut
   below the discs live: "Look how the back is going over the white in
   the bottoms here. It's messed up!"): the top left pocket is the only
   one. At the bottom there is no pocket and no cut: the band and its two
   lines run on unbroken along the bottom and up both sides, and the + and
   the My agent disc stand inside the band, over the card's own colour
   (purple on the Passport, white on a white card, dark on a dark one, a
   picture or a film), with that colour round them (deck-shell.css and
   section 2 here, --ds-dock-in). The bottom corners keep the pocket
   circle's curve (--cf-a; --cf-bl with the My agent disc), so the band
   and its inner line turn each corner round its disc at one distance. */
.cf.cf--myagent { --cf-bl: var(--cf-a); }
.cf__mark {
    position: absolute;
    z-index: 3;
    top: calc(var(--cf-mark-y) - var(--cf-line-w));
    left: calc(var(--cf-mark-x) - var(--cf-line-w));
}

/* the mark: the drawing and its number */
.cf-mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--cf-mark);
    height: var(--cf-mark);
    line-height: 0;
}
.cf-mark > *:not(.cf-mark__badge) { grid-area: 1 / 1; }
/* the want: the header's logo as the header draws it */
.cf-mark .lc-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cf-mark);
    height: var(--cf-mark);
    border-radius: 9999px;
    background: var(--color-yellow-400, #f2e841);
    color: var(--text-primary, #0f172a);
}
.cf-mark .lc-mark > svg { width: calc(var(--cf-mark) * 0.85); height: calc(var(--cf-mark) * 0.85); overflow: visible; }
/* every other kind: its drawing at the logo's size, in its colour */
.cf-mark .cf-glyph { display: block; width: var(--cf-mark); height: var(--cf-mark); }
.cf-mark .ds-glyph--agent,
.cf-mark .ds-glyph--market,
.cf-mark .ds-glyph--artifact { color: var(--text-inverse, #fff); }
.cf-mark .ds-glyph--action,
.cf-mark .ds-glyph--heat { color: var(--color-yellow-400, #f2e841); }
/* ON A CARD'S FRAME the mark is black line work on the white (Steven
   20:55: "the purple area is actually white, and then the icons can be
   black"): the same drawings, the logo's rings with no yellow disc, the
   yellow marks black too. The number keeps its purple. A mark standing
   on its own (a page's top left, deck-shell-pages.css) keeps its look. */
.cf .cf-mark .cf-glyph,
.has-cf > .ds-type .cf-mark .cf-glyph { color: var(--cf-ink); }
/* THE HEART IS PURPLE (Steven 2026-11-10, the storybook card's pocket:
   "Make the heart the same as on the button, and you can make it purple"):
   a want made from a market offer wears the saved heart filled, in the
   purple the saved heart and the + disc wear (pack-add.css A SAVED HEART
   IS PURPLE). The one mark on the white that is not black; the number
   keeps its own purple. */
.cf .cf-mark .cf-glyph.ds-glyph--heart-mark,
.has-cf > .ds-type .cf-mark .cf-glyph.ds-glyph--heart-mark { color: var(--color-purple-500); }
/* THE TOLL BENCH LOGO IS YELLOW (Steven 2026-11-09 21:50: "Make the toll
   bench logo yellow ... switch the colors of the logos, it's too much
   color"): on a want the mark in the white pocket is the logo in its own
   look, the one top left on the house and room pages (deck-shell-pages.css
   .ds-page-mark): the yellow disc and its dark rings on a dark round, the
   purple number on its shoulder, centred in the pocket. It is the one
   yellow thing on a card: the club, the bag and the pack marks stay black
   line work, the path's target the path's light line.
   NO BLACK ROUND ON THE DECK (Steven 2026-11-10): the deck card's type
   pocket stays white and the logo sits on it alone, the yellow disc and its
   rings, no dark circle round it. A share picture's frame keeps its round. */
.cf .cf-mark--want { --cf-logo-round: calc(8 * var(--cf-u)); }
.cf .cf-mark--want::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--cf-logo-round));
    border-radius: 9999px;
    background: var(--color-dark-900, #12121a);
    pointer-events: none;
}
.cf .cf-mark .lc-mark,
.has-cf > .ds-type .cf-mark .lc-mark {
    position: relative;
    background: var(--color-yellow-400, #f2e841);
    color: var(--text-primary, #0f172a);
}
/* the number: the header's purple badge on the logo's top right shoulder */
.cf-mark .cf-mark__badge {
    position: absolute;
    top: calc(-1 * var(--cf-badge-up));
    right: calc(-1 * var(--cf-badge-out));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--cf-badge);
    height: var(--cf-badge);
    padding: 0 var(--cf-badge-pad);
    border-radius: 9999px;
    background: var(--indicator-unread, #5534a5);
    box-shadow: none;
    color: var(--color-white, #fff);
    font-family: var(--font-mono);
    font-size: var(--cf-badge-font);
    font-weight: var(--font-semibold, 600);
    font-style: normal;
    line-height: 1;
    pointer-events: none;
}

/* ---- 2. on the deck ------------------------------------------------------ */
/* (html: over deck-shell.css's own dock tokens, which load after this) */
html .app-shell--deck-shell {
    --cf-u: 1px;
    --cf-a: 37.5px;
    --cf-hair: 1px;
    /* the discs stand inside the band, over the card's colour: each one's
       centre on its bottom corner's circle, half a line in like the type
       mark's (section 1) so it lands on a whole pixel, 14 in from the
       card's edges, and the colour between the band's inner line and the
       disc is the same 8 along the bottom, up the side and round the
       corner. The band never passes under either. My agent, the card's
       button and + one height, as before (deck-shell.css --ds-dock-*) */
    --ds-dock-in: calc(var(--cf-a) + var(--cf-hair) / 2 - var(--ds-dock-h) / 2);
    --ds-dock-in-b: calc(var(--cf-a) + var(--cf-hair) / 2 - var(--ds-dock-h) / 2);
    /* the card's button stops this far in from the card's sides, clear of
       the two discs */
    --cf-clear: calc(2 * var(--cf-a) + var(--ds-dock-gap));
}
/* the card's own corners follow the frame: with the My agent disc the
   bottom left is the pocket circle's curve too */
.app-shell--deck-shell .has-cf:has(> .cf--myagent) { --cf-bl: var(--cf-a); }
.app-shell--deck-shell .has-cf,
.app-shell--deck-shell .has-cf > .tb-card__inner,
.app-shell--deck-shell .has-cf > .tb-card__inner > .tb-card__face,
.app-shell--deck-shell .has-cf > .tb-card__layer { border-radius: var(--cf-radius); }
.app-shell--deck-shell .has-cf > .cf { z-index: var(--z-dropdown); }
.has-cf.is-3d > .cf { visibility: hidden; }
/* a slide with no card (the entry card): the frame on the slide's own box */
.app-shell--deck-shell .hc-slide.has-cf > .cf {
    inset: max(var(--ds-slide-pad), env(safe-area-inset-top, 0px)) calc((100% - var(--ds-card-w)) / 2) max(var(--ds-slide-pad), env(safe-area-inset-bottom, 0px));
}
/* the tray button is the type pocket: a tap anywhere in it opens the tray */
.app-shell--deck-shell .has-cf > .ds-type {
    inset: 0 auto auto 0;
    display: block;
    width: calc(2 * var(--cf-a));
    height: calc(2 * var(--cf-a));
    border-radius: var(--radius-full);
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.app-shell--deck-shell .hc-slide.has-cf > .ds-type {
    top: max(var(--ds-slide-pad), env(safe-area-inset-top, 0px));
    left: calc((100% - var(--ds-card-w)) / 2);
}
.app-shell--deck-shell .has-cf > .ds-type:focus-visible { outline-offset: -4px; }
.app-shell--deck-shell .has-cf > .ds-type > .cf-mark {
    position: absolute;
    top: var(--cf-mark-y);
    left: var(--cf-mark-x);
}
.app-shell--deck-shell .has-cf > .ds-type .ds-type__glyph { display: contents; }
.app-shell--deck-shell .has-cf > .ds-type .ds-type__glyph[hidden] { display: none; }

/* the title and its words start right of the type pocket, on its line: a
   front's head, a back's head (the Proposals back's title and the line
   under it, cards/_card.html _proposals_back: the same block, both lines
   moved together; Steven 2026-11-10: "Make sure Proposals scoots over for
   the card design it's being written on"), and a back's title standing
   alone */
.app-shell--deck-shell .has-cf .tb-card__art > .tb-card__head,
.app-shell--deck-shell .has-cf .tb-card__backscroll > .tb-card__head,
.app-shell--deck-shell .has-cf :where(:not(.tb-card__headwords)) > .tb-card__backtitle,
.app-shell--deck-shell .has-cf.tb-card--col .tb-card__planturn > .tb-card__planhead,
.app-shell--deck-shell .has-cf .ac-face > .ac-head { margin-left: calc(2 * var(--cf-a) + var(--space-2) - var(--space-5)); }
.app-shell--deck-shell .has-cf .tb-card__face--side .tb-side__head { padding-left: calc(2 * var(--cf-a) + var(--space-2)); }
/* a back's head reaches at least the pocket's foot from the card's top (its
   scroller's --space-5 above it), so what follows it, the rows or "No
   proposals yet", starts under the pocket */
.app-shell--deck-shell .has-cf .tb-card__backscroll > .tb-card__head { min-height: calc(2 * var(--cf-a) - var(--space-5)); }
/* the left path starts under the pocket (card-col.js places it under the
   title block, so the block is at least as tall as the pocket) */
.app-shell--deck-shell .has-cf .tb-card__front .tb-card__art > .tb-card__head,
.app-shell--deck-shell .has-cf .tb-card__front .tb-side__head { min-height: calc(2 * var(--cf-a) - var(--space-3)); }
/* THE TITLE ON THE MARK'S LINE (Steven 2026-11-10, his shot of the song
   want's back: "The top of the A here should line up with the top of the
   icon on the left"): on either face of a want, the top of the title's
   capitals stands level with the top of the mark drawn in the pocket, at
   every width. The title's first line is cut to its capitals (text-box),
   so its box starts where the capitals do, and the box starts
   --cf-mark-top below the card's top: the art's top inset, the dark
   side's head's, and on the plan's white strip one margin past the
   strip's own --space-5 (card.css .tb-side.tb-card__planturn). Where the
   mark's ink starts (section 1, --cf-mark-ink): a line drawing's top
   stroke; the want's yellow disc and a face fill their box; the heart's
   lobes start 49.3 in (their arc's top, 45.4, less half the stroke, is
   35.4 at full size; the pocket's heart-mark is 0.85 of it about 128). A
   pack's cards keep their own line under the pack's strip
   (heat-stacks.css), and a browser with no text-box keeps the old insets. */
.app-shell--deck-shell .hc-slide[data-ds-kind="want"] > .has-cf,
.app-shell--deck-shell .hc-slide[data-ds-kind="passport"] > .has-cf { --cf-mark-ink: 0px; }
.app-shell--deck-shell .hc-slide[data-ds-kind="heart"] > .has-cf { --cf-mark-ink: calc(var(--cf-mark) * 49.3 / 256); }
@supports (text-box-trim: trim-start) {
    .app-shell--deck-shell .hc-slide:not([data-hc-pack-kind]) > .has-cf.tb-card--want > .tb-card__inner > .tb-card__face > .tb-card__art,
    .app-shell--deck-shell .hc-slide:not([data-hc-pack-kind]) > .has-cf.tb-card--want .tb-card__planscroll > .tb-card__planart,
    .app-shell--deck-shell .hc-slide:not([data-hc-pack-kind]) > .has-cf.tb-card--want > .tb-card__inner > .tb-card__face--side .tb-side__head { padding-top: var(--cf-mark-top); }
    .app-shell--deck-shell .hc-slide:not([data-hc-pack-kind]) > .has-cf.tb-card--col .tb-card__planturn > .tb-card__planhead { margin-top: calc(var(--cf-mark-top) - var(--space-5)); }
    .app-shell--deck-shell .hc-slide:not([data-hc-pack-kind]) > .has-cf.tb-card--want > .tb-card__inner > .tb-card__face > .tb-card__art > .tb-card__head .tb-card__title,
    .app-shell--deck-shell .hc-slide:not([data-hc-pack-kind]) > .has-cf.tb-card--want .tb-card__planscroll > .tb-card__planart > .tb-card__head .tb-card__title,
    .app-shell--deck-shell .hc-slide:not([data-hc-pack-kind]) > .has-cf.tb-card--want > .tb-card__inner > .tb-card__face--side .tb-side__head .tb-card__title,
    .app-shell--deck-shell .hc-slide:not([data-hc-pack-kind]) > .has-cf.tb-card--col .tb-card__planturn > .tb-card__planhead > .tb-card__title {
        text-box-trim: trim-start;
        text-box-edge: cap alphabetic;
    }
}
/* THE BACK'S LINES ARE A LIGHTER GRAY (Steven 2026-11-10: "When you flip
   the card, the exterior outline of the card should be slightly gray";
   then "the back of the cards should also have that gray in the
   outlines, so like surrounding the purple button etc. Not too dark
   though, just enough to make you tell the difference between front and
   back"): a turned card's frame draws every line it has (the outer
   edge, the inner line round the band and past the purple +, the type
   pocket's bite) in --color-gray-400, lighter than the front's
   --color-gray-700 (section 1, --cf-line-ink); the mark keeps its ink.
   AND ITS BAND IS GRAY (Steven 2026-11-10, his pen sketch: "on the back
   of the card that white should be a gray, to represent the back of the
   card. Medium gray"): the band and the type pocket, white on the front,
   are --color-gray-300 on the back. Not gray-400: that is the back's line
   colour, and on a band of it both lines would vanish; gray-300 is the
   one step lighter, the medium gray that still shows them. */
.app-shell--deck-shell .has-cf.is-flipped > .cf {
    --cf-line-ink: var(--color-gray-400, #a1a1aa);
    --cf-fill: var(--color-gray-300, #d4d4d8);
}
/* the right column stands centred on the card's right edge (card-col.css) */
/* the card's button between My agent and the + pocket */
.app-shell--deck-shell .hc-slide .has-cf.tb-card--col .tb-card__front > .tb-card__panel > .tb-card__cta {
    margin-left: calc(var(--cf-clear) - var(--space-5));
    margin-right: calc(var(--cf-clear) - var(--space-5));
}
.app-shell--deck-shell .hc-slide .has-cf.tb-card--col .tb-card__front.tb-card__face--side .tb-side__words > .tb-side__control {
    margin-left: calc(var(--cf-clear) - var(--space-6));
    margin-right: calc(var(--cf-clear) - var(--space-6));
}
.app-shell--deck-shell .has-cf.tb-card--col .tb-card__backdock { padding-left: var(--cf-clear); padding-right: var(--cf-clear); }

/* ---- an agent's card page in the deck (cards/_agent_card_page.html) ----
   Its Back arrow sat in the top left corner, under the type pocket. The
   pocket keeps the corner (Steven 2026-11-09: "Always put the Logo in the
   top left corner of the card"); Back steps right of it, on the pocket's
   centre line, and still stays put while the page scrolls. */
.has-cf[data-agent-card-page] [data-card-back] {
    top: calc(var(--cf-a) - (var(--space-8) + var(--space-1)) / 2);
    left: calc(2 * var(--cf-a) + var(--space-1));
    margin: 0;
}