/* MojaWallet, the public site - THE TRUST PAGES.
 *
 * usalama, msaada, maswali, masharti, faragha, aml, and only what those six
 * need that the other three do not: the hash-chain diagram, the sticky
 * contents list, the heading permalinks, the jump strip, the complaints
 * stage rail and the FAQ's height transition. Same bargain money.css makes -
 * six pages pay for their own components rather than the sheet all nine
 * load - and it is capped in test/landing.test.ts like every other one.
 *
 * It adds no motion primitive. Entrances are motion.css's `.rise` inside a
 * `.stagger`. The one thing it does add - the LINK between two chain blocks,
 * a pseudo-element neither `.rise` nor motion.js can reach - is written
 * against both of their paths and inside `prefers-reduced-motion:
 * no-preference`, so stillness, print and a dead script all get the finished
 * frame. Nothing here ever starts hidden.
 */

/* jump strip */
/* Four to six section links under a long page's opening: real anchors, so
   they work with no script and can be pasted into a support reply. */
.jump { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-top: 28px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--line2); border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 600; color: var(--tx2); text-decoration: none;
  transition: color var(--tr), background var(--tr), border-color var(--tr);
}
.jump a:hover { color: var(--tx); background: var(--acc-dim); border-color: color-mix(in srgb, var(--acc) 40%, transparent); }

/* heading permalinks */
/* The whole heading is the link, so a clause can be sent to somebody. One tab
   stop per section rather than a second invisible one beside each heading. */
a.ha { color: inherit; text-decoration: none; }
a.ha .hash { color: var(--tx3); font-weight: 400; margin-left: .3em; opacity: 0; transition: opacity var(--tr), color var(--tr); }
a.ha:hover .hash, a.ha:focus-visible .hash { opacity: 1; color: var(--acc); }

/* contents */
/* A legal draft is long on purpose. The list is a plain <ol> of anchors:
   complete before a line of script runs, and only the highlight needs one. */
.legal { display: block; }
.toc { border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--card); padding: 16px 12px 14px; margin-bottom: 34px; }
.toc-k { font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); padding: 0 10px; margin-bottom: 10px; max-width: none; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.toc li { margin: 0; max-width: none; }
.toc a {
  display: block; padding: 8px 12px; border-left: 2px solid transparent;
  border-radius: 4px 10px 10px 4px; font-size: .8125rem; font-weight: 600;
  line-height: 1.35; color: var(--tx2); text-decoration: none;
  transition: color var(--tr), background var(--tr), border-color var(--tr);
}
.toc a:hover { color: var(--tx); background: var(--card2); }
/* a sub-clause people go looking for by name, indented under its own */
.toc .sub a { padding-left: 26px; font-weight: 500; color: var(--tx3); }
.toc .sub a:hover, .toc .sub a[aria-current] { color: var(--tx); }
/* trust.js sets aria-current="location" rather than a class, so what the eye
   is told and what a screen reader is told are the same fact */
.toc a[aria-current] { color: var(--tx); background: var(--acc-dim); border-left-color: var(--acc); }
@media (min-width: 1000px) {
  .legal { display: grid; grid-template-columns: minmax(0, 236px) minmax(0, 1fr); gap: clamp(30px, 4vw, 60px); align-items: start; }
  /* the offset the pinned steps use, and a cap so thirteen clauses scroll
     inside the list rather than off the bottom of a laptop screen */
  .toc { position: sticky; top: calc(var(--nav-h) + 96px); max-height: calc(100vh - var(--nav-h) - 128px); overflow-y: auto; overscroll-behavior: contain; margin-bottom: 0; }
}

/* the pending marker */
/* A field nobody has filled in yet is a STATE, and state is never colour
   alone: the clock and the word carry it, the amber only tints it. */
.pending-k { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; max-width: none; font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--warn); }
.gk { flex: 0 0 auto; stroke-linecap: round; stroke-linejoin: round; }

/* the hash chain */
/* THE DIAGRAM: three transactions, each sealed with a fingerprint computed
   from its own contents and from the fingerprint before it.
 *
 * Built from elements and real bilingual text rather than a picture, for
 * three reasons: the words scale to 200% and reflow at 320px, both languages
 * are in it, and the LINKING is the thing being explained - a flat image
 * cannot draw the link that makes the point. The fingerprint glyph is a row
 * of bars carrying no digits: a plausible-looking hex string on this page
 * would be a number nobody computed. */
.chain { margin: 0; }
.chain-l { list-style: none; display: grid; gap: 40px; padding: 0; margin: 0; }
.chain-i { position: relative; margin: 0; padding: 17px 18px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); max-width: none; }
/* THE LINK: a rule from the block before this one, with a lit node on it */
.chain-i + .chain-i::before, .chain-i + .chain-i::after { content: ""; position: absolute; background: var(--ctl-line); }
.chain-i + .chain-i::before { left: 50%; top: -40px; width: 2px; height: 40px; margin-left: -1px; transform-origin: 50% 0; }
.chain-i + .chain-i::after { left: 50%; top: -25px; width: 10px; height: 10px; margin-left: -5px; border-radius: var(--r-pill); background: var(--acc); }
@media (min-width: 780px) {
  .chain-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(30px, 4vw, 52px); }
  .chain-i + .chain-i::before { left: auto; right: 100%; top: 50%; width: clamp(30px, 4vw, 52px); height: 2px; margin: -1px 0 0; transform-origin: 0 50%; }
  .chain-i + .chain-i::after { left: auto; right: calc(100% + clamp(10px, 1.6vw, 21px)); top: 50%; margin: -5px 0 0; }
}
.chain-k { margin: 0; max-width: none; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.chain-t { margin: 9px 0 0; max-width: none; font-size: .875rem; color: var(--tx2); }
.chain-t strong { color: var(--tx); }
.chain-f { display: flex; align-items: center; gap: 10px; margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--line); max-width: none; font-size: .75rem; font-weight: 600; color: var(--tx3); }
.fp { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.fp i { display: block; width: 3px; height: 12px; border-radius: 2px; background: var(--acc); }
.fp i:nth-child(2n) { height: 7px; }
.fp i:nth-child(3n) { height: 15px; }
.fp i:nth-child(5n) { height: 9px; }
.chain figcaption { margin-top: 28px; font-size: .875rem; color: var(--tx2); max-width: var(--measure); }

/* The link draws itself as the block it points at arrives, on both of
   motion.css's paths, because a pseudo-element is reached by neither
   `.rise`'s keyframes nor motion.js's class swap. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .chain-i + .chain-i::before { animation: mw-linkv linear both; animation-timeline: view(); animation-range: entry 4% cover 24%; }
    .chain-i + .chain-i::after { animation: mw-node linear both; animation-timeline: view(); animation-range: entry 9% cover 27%; }
    @media (min-width: 780px) { .chain-i + .chain-i::before { animation-name: mw-linkh; } }
  }
  /* motion.js's path: the link rides the state of the block it belongs to,
     and inherits that block's --d out of .stagger */
  .chain-i + .chain-i.mw-pre::before { transform: scaleY(0); transition: transform var(--dur-3) var(--ease-io) var(--d, 0s); }
  .chain-i + .chain-i.mw-pre::after { opacity: 0; transform: scale(.3); transition: opacity var(--dur-2) var(--ease-out) var(--d, 0s), transform var(--dur-2) var(--ease-out) var(--d, 0s); }
  .chain-i + .chain-i.mw-pre.in::before, .chain-i + .chain-i.mw-pre.in::after { opacity: 1; transform: none; }
  @media (min-width: 780px) { .chain-i + .chain-i.mw-pre::before { transform: scaleX(0); } }
}
@keyframes mw-linkv { from { transform: scaleY(0); } }
@keyframes mw-linkh { from { transform: scaleX(0); } }
@keyframes mw-node { from { opacity: 0; transform: scale(.3); } }

/* complaints stages */
/* The rail runs from under one dot to the next; the dot is centred on the
   first line of the heading rather than on the block. */
.stage { position: relative; padding-left: 30px; }
.stage::before { content: ""; position: absolute; left: 8px; top: 26px; bottom: -20px; width: 2px; background: var(--line2); }
.stage:last-of-type::before { display: none; }
.stage::after { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: var(--r-pill); background: var(--acc-dim); border: 2px solid var(--acc); }
.stage + .stage { margin-top: 36px; }
/* `* { margin: 0 }` is the reset and only a utility class ever puts it back,
   so these paragraphs had no spacing between them at all */
.stage > p { margin-top: 11px; }

/* the FAQ */
/* details/summary keeps every keyboard and screen-reader behaviour a custom
   accordion re-implements and usually gets wrong. trust.js only smooths the
   height, and takes nothing away if it never runs. */
details.q > summary:focus-visible { outline-offset: -3px; }
details.q > summary > span { min-width: 0; }
details.q .a > .qperma { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .75rem; }
.qperma a { color: var(--tx3); text-decoration: none; font-weight: 600; transition: color var(--tr); }
.qperma a:hover { color: var(--acc); }

/* keys */
/* The thing, then what it means: the two keys this site puts in a browser. */
.keys { list-style: none; display: grid; gap: 10px; padding: 0; }
.keys li { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; margin: 0; max-width: none; }
@media (max-width: 460px) { .keys li { grid-template-columns: minmax(0, 1fr); } }

/* 2.5.8, the block site.css runs: a thumb is about 9mm, and there is no
   hover on one, so the permalink mark is simply present */
@media (pointer: coarse) {
  .jump a, .toc a { min-height: 44px; }
  .toc a { display: flex; align-items: center; }
  a.ha .hash { opacity: 1; }
}

/* A print is a full-height render nobody scrolled, so the link is drawn */
@media print {
  .chain-i + .chain-i::before, .chain-i + .chain-i::after { opacity: 1 !important; transform: none !important; animation: none !important; }
  .toc { display: none; }
  details.q > .a { display: block !important; }
}