@import url('tokens.css');   /* the colours it is drawn in */

/* THE SECURITY LINE UNDER START FREE (3 November 2026, Mohsen; site/index.html, shown or not by server.js bkSslLine).
   A soft chip in the site's own green, quieter than the buttons above it: a drawn lock, the words, and the proof - the
   SSL Labs grade as a link, and the day it was tested. On a narrow phone the proof drops to its own row under the words,
   never broken mid-phrase. The dot between words and proof is drawn before each piece and hidden when a piece starts a
   row (trust-clip cuts off the start edge), so no row begins with a dot. Tokens and logical sides only, so the dark look
   and right-to-left need nothing more. */
.trust { align-self: flex-start; display: inline-flex; align-items: center; gap: .6rem; max-width: 100%;
  padding: .5rem .95rem .5rem .75rem; border: 1px solid var(--green-line); border-radius: 12px; background: var(--green-soft);
  color: var(--ink-2); font-size: .9rem; line-height: 1.4; }
.trust-lock { flex: none; width: 1.15rem; height: 1.15rem; color: var(--green); }
.trust-clip { min-width: 0; overflow: hidden; padding-block: 2px; }
.trust-text { display: flex; flex-wrap: wrap; align-items: baseline; margin-inline-start: -1.1rem; }
.trust-say::before, .trust-proof::before { content: "\00b7"; display: inline-block; width: 1.1rem; text-align: center; color: var(--muted); font-weight: 400; }
/* every row of a piece starts after the piece's own room for its dot, so a piece that wraps never begins a row in the
   edge trust-clip hides (5 November: "اعتماد" lost its first letters on the sign-in card) */
.trust-say, .trust-proof { position: relative; padding-inline-start: 1.1rem; }
.trust-say::before, .trust-proof::before { position: absolute; inset-inline-start: 0; top: 0; }
.trust-say { font-weight: 560; color: var(--ink); }
/* each piece of the proof stays whole; where the row is too narrow for both (a sign-in card on a 320px phone,
   5 November) the day drops under the grade */
.trust-proof { white-space: normal; }
.trust-grade, .trust-date { white-space: nowrap; }
.trust-grade { color: var(--green); font-weight: 650; text-decoration: none; }
.trust-grade:hover { text-decoration: underline; }
.trust-grade:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-radius: 3px; }
.trust-date { margin-inline-start: .3rem; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }