/** * Share row — canonical shared component `.tr-share-row`. * ---------------------------------------------------------------------------- * ONE stylesheet for all consumers. There is no resource-share.css, * glossary-share.css or prompt-share.css and there must not be — the row is * identical on all three pages and only its heading text differs, which is the * post's own title and therefore a PHP concern (see inc/share-row.php). * * TOKEN-PURE. Every colour, space, radius, weight, size and duration below is a * `var()`; there is not one hex literal and not one raw px value. The single * `rgba(var(--color-primary-rgb), …)` is the theme's own established idiom for a * brand tint (compare `--surface-selected` in theme-unified.css). * * WHY THIS DOES NOT USE `.btn`. The shared button component is a 44px control * with a filled or outlined surface, built to be the primary action of a block. * Seven of them in one row reads as seven primary actions and takes two full * lines of 44px height inside a reading column. These are quiet, equal-weight * destination chips — smaller, flatter, and unranked against each other — so * they are their own element rather than a `.btn` fought back down with * overrides. * * DARK AND LIGHT COME FOR FREE, deliberately: nothing here is scoped to * `[data-theme="dark"]`. Every surface resolves through `--surface-*`, * `--border-default` and `--color-text-*`, all of which are already paired in * the token layer, so the row inverts with the page and cannot drift from it. A * theme-scoped block here would be a second place to keep in sync. * * @package TiorAI * @since 1.37.0 */ /* ============================================================================ ROOT ========================================================================== */ /* * No background and no box. The row is a RULE-BOUNDED BAND: one hairline above, * one below, and the same air between each of them and the content. That is the * separator idiom every one of the three reading columns already uses for its * own sections — a hairline with space either side — so the row now reads as a * block of that column rather than as something dropped into it. * * It is deliberately NOT a bordered slab with a surface of its own, which would * compete with the discussions panel directly below it on two of the three * pages. The filled frame still belongs to the button group, which is the * object; these two hairlines only say where the block starts and stops. */ .tr-share-row { /* * THE FRAME, as ONE value used four times: the two hairlines and the two * paddings between them and the content. A consumer re-points the token; it * never sets one side, so the band cannot go asymmetric by construction. * * WHY IT IS NOT ZERO ANY MORE. C-36 set `padding-block: 0` here to kill the * 70px that `theme-unified.css`'s bare `section { padding: 70px 0 }` was * silently supplying — this component's root is a `
` (it has to be: * it is a labelled region with its own heading), and a bare element selector * beats nothing. That fixed the SIZE and left the SHAPE: measured at 1440px, * the row sat in 32px above and 40px below, with a hairline under it on the * Prompt and Glossary singles, none under it on the Resource single, and none * above it anywhere. It was the only block in these columns not carrying the * column's own separator rhythm. * * The C-36 guarantee is unchanged: a class selector (0,1,0) still out-ranks * the bare element rule (0,0,1), so the 70px is still neutralised. The value * is simply no longer zero. * * `padding-block`, not `padding`, so the button group's own inline padding is * untouched. The same landmine is why the shared category nav is called with * `tag => div` on two pages; this component cannot take that way out without * giving up its landmark, so it neutralises the rule instead. */ --tiorai-share-row-frame: var(--space-6); --tiorai-share-row-rule: var(--border-default); padding-block: var(--tiorai-share-row-frame); border-top: 1px solid var(--tiorai-share-row-rule); border-bottom: 1px solid var(--tiorai-share-row-rule); /* * Equal outside as well as inside. A consumer whose column runs a wider * rhythm re-points this in one place; both sides move together, and the block * immediately after the row must not add a separator of its own — the row's * own bottom hairline IS that separator now, and two of them stacked is a 2px * composite rule with a gap in the middle. */ margin-block: var(--space-8); /* Clears the sticky header and, where present, the section nav. */ scroll-margin-top: var(--space-24); } /* * An h2 typeset as a label. Small, semibold, on the primary ink — the same * weight as the row it introduces, so it reads as that group's name rather than * as a section heading competing with the page's real ones. */ .tr-share-row__title { margin: 0 0 var(--space-4); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); color: var(--color-text-primary); /* A full post title can be long; never let one token overflow the column. */ overflow-wrap: anywhere; } /* ============================================================================ BUTTON GROUP ========================================================================== */ /* * The frame. One panel holding all seven controls, which is what makes them * read as a set of alternatives rather than as a row of unrelated links. * * It wraps rather than scrolls: this is a block of equal-weight options, and a * horizontally-scrolled group hides options behind a gesture with no affordance. */ .tr-share-row__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-default); background: var(--surface-raised); } /* * One chip. `` and `