/* ============================================================
   Text banks (/teksty/ on darim, /nusachim/ on yahad).

   One file per brand by necessity - the two wwwroots are separate - but the
   rules below are written to be copy-identical, and they use LOGICAL
   properties throughout (margin-inline, border-inline-start, text-align:
   start) so the same file works unchanged in an RTL page. A physical
   direction here survives review and then breaks silently on the Hebrew
   side: a mis-aligned card still looks deliberate.

   Colours come only from the brand's own variables. No literal colour is
   named in this file, same rule as site.css.
   ============================================================ */

/* A sentence, not a row of chips. This was display:flex at first, which made
   every inline <b> its own flex item and pushed the trailing full stop onto a
   line of its own. Caught by looking at the rendered page. */
.tx-axes {
    margin: 18px 0 26px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper-2, var(--panel));
    font-size: 15px;
}

.tx-axes b { font-weight: 600; }

.tx-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.tx {
    padding: 18px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--accent, var(--glow-hot));
    border-radius: 12px;
    background: var(--paper-2, var(--panel));
}

.tx-body {
    margin: 0 0 12px;
    text-align: start;
}

/* Meta and button share one row, in normal flow. The button used to be
   absolutely positioned at the inline end, and long lines ran underneath it -
   at 1280px, not only on a phone. Flow beats a media query here: there is no
   width at which this can overlap. */
.tx-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    flex-wrap: wrap;
}

.tx-meta {
    margin: 0;
    font-size: 14px;
    opacity: .72;
    text-align: start;
}

.tx-copy {
    flex: none;
    padding: 5px 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: inherit;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s ease, border-color .15s ease;
}

.tx-copy:hover,
.tx-copy:focus-visible { opacity: 1; border-color: var(--accent, var(--glow-hot)); }

.tx-copy[data-copied="1"] { opacity: 1; border-color: var(--accent, var(--glow-hot)); }

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