/* ============================================================
   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; }
}

/* The line that appears under the first text somebody copies. It must not
   read as part of the greeting above it, so it is smaller and quieter, and
   it is separated by a rule rather than by whitespace alone. */
.tx-nudge {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.5;
    text-align: start;
    opacity: .9;
}