/* Crypto safety: plan for worse (hongdam.net/studio/crypto-safety/, tools/build_crypto.py): the Studio's black room on top,
   then the news with sources, eight steps each worse than the last, five questions, the services, how we work.
   Loaded after studio.css. Words stay in --fg and --mut; the red of each step colours only its border and number. */

.cs-hero h1 { max-width: 16ch }
.cs-hero .s-kicker { padding-right: 5.2rem }
.cs-gloss { display: grid; gap: .45rem; max-width: 40rem; margin: 1.5rem 0 0; padding: 0 }
.cs-gloss div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem }
.cs-gloss dt { padding: .12rem .55rem; border-radius: 999px; background: var(--on); color: var(--room); font-weight: 760; font-size: .95rem }
.cs-gloss dd { margin: 0; color: var(--on); font-size: 1.05rem }

.cs-src { display: inline-block; margin-left: .35rem; font: 600 .78rem/1.4 var(--mono); letter-spacing: .02em; color: var(--mut); white-space: nowrap }
:lang(th) .cs-src, :lang(my) .cs-src { font: 600 .9rem/1.4 var(--s-sans) }
.cs-src:hover { color: var(--fg) }

/* the news */
.cs-today { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; max-width: 46rem }
.cs-today li { padding: .75rem 1rem; border-left: 4px solid var(--fg); background: var(--bg2); font-size: 1.05rem; line-height: 1.5 }

/* eight steps: the border and the number grow redder down the list */
.cs-ladder { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; max-width: 46rem }
.cs-rung { --r: color-mix(in oklch, var(--sig) calc(var(--i) * 12.5%), var(--faint)); display: flex; gap: 1rem; align-items: flex-start;
  padding: .85rem 1rem; border: 1px solid var(--faint); border-left: 6px solid var(--r); border-radius: 6px; background: var(--bg2) }
.cs-n { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 3px solid var(--r);
  font: 800 1.15rem/1 var(--s-sans); color: var(--fg); font-variant-numeric: tabular-nums }
.cs-rung h3 { margin: .15rem 0 .2rem; font: 760 1.2rem/1.25 var(--s-sans); letter-spacing: -.01em; text-transform: none }
:lang(th) .cs-rung h3, :lang(my) .cs-rung h3 { letter-spacing: 0; line-height: 1.45 }
.cs-rung p { margin: 0; color: var(--mut); line-height: 1.5 }

/* the board on Offrampt, and the band on the Studio front page */
.cs-off { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; max-width: 46rem; margin-top: 1.4rem;
  padding: 1rem 1.15rem; border: 2px solid var(--fg); border-radius: 6px; color: var(--fg); text-decoration: none; background: var(--bg2) }
.cs-off span:first-child { flex: 1 1 22rem; color: var(--mut); line-height: 1.5 }
.cs-off b { display: block; margin-bottom: .2rem; color: var(--fg); font-size: 1.15rem }
.cs-off:hover { box-shadow: 0 10px 28px -18px rgba(0, 0, 0, .5) }
.cs-band { margin-top: 2.2rem }
.cs-band .cs-off { margin-top: 0 }

/* five questions */
.cs-qs { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; max-width: 46rem; counter-reset: q }
.cs-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .8rem 1rem;
  border: 1px solid var(--faint); border-radius: 6px; background: var(--bg2); counter-increment: q }
.cs-q p { flex: 1 1 18rem; margin: 0; font-size: 1.05rem; line-height: 1.45 }
.cs-q p::before { content: counter(q) ". "; font-weight: 800 }
.cs-yn { display: flex; gap: .4rem }
.cs-yn button { min-width: 4.4rem; min-height: 2.75rem; padding: .4rem .9rem; border: 2px solid var(--fg); border-radius: 999px; background: var(--bg2);
  color: var(--fg); font: 700 1rem/1 var(--s-sans); cursor: pointer }
.cs-yn button[aria-pressed="true"] { background: var(--fg); color: var(--bg) }
.cs-q.done { border-color: var(--fg) }
.cs-result { max-width: 46rem; margin-top: 1rem; padding: 1rem 1.15rem 1.15rem; border-radius: 6px; background: var(--fg); color: var(--bg) }
.cs-result h3 { margin: 0 0 .5rem; font: 760 1.2rem/1.2 var(--s-sans); text-transform: none }
.cs-result ul { margin: 0 0 .8rem; padding-left: 1.2rem }
.cs-result li { margin: .25rem 0 }
.cs-result a { color: var(--bg); font-weight: 700 }
.cs-result p { margin: 0 0 .8rem }
.cs-again { padding: .5rem 1rem; border: 2px solid var(--bg); border-radius: 999px; background: transparent; color: var(--bg); font: 700 .95rem/1 var(--s-sans); cursor: pointer }
.s-row:target a { box-shadow: inset 0 0 0 2px var(--fg) }

/* how we work */
.cs-how { display: grid; gap: .55rem; margin: 0; padding: 0 0 0 1.2rem; max-width: 46rem; font-size: 1.05rem; line-height: 1.55 }

/* talk */
.cs-talk { margin-top: 4.5rem; padding-block: .5rem 3.4rem }
.cs-talk .s-h { color: var(--on) }
.cs-talk .s-sub { color: var(--on-mut) }