/* MYB News v2: the document pages and Community (page builder D).
   About, Contact, Privacy, Terms, Join, Advertise, the WhatsApp status pages, Markets, Dollar to shekel,
   Jewish business news, Share, the 404 page and /community/. Everything is scoped under body.doc2 and only adds
   what /css/myb2.css has no class for. Tokens only, so light, dark, more contrast and solid bars all follow.
   Cache-busted as /css/doc2.css?v=N in each page. */

/* ---------------------------------------------------------------- the title block */
.doc2 .doc .lt{ padding:4px 0 2px; }
.doc2 .doc__lede{ max-width:40ch; }
.doc2 .lt-btns{ margin-top:18px; }
.doc2 .stamp{ display:block; margin:10px 0 0; font:400 13px/18px var(--sans); color:var(--ink-2); }
@media (min-width:1100px){
  .doc2 .doc .lt{ padding-top:40px; }
  .doc2 .doc__lede{ font-size:20px; line-height:29px; }
}

/* ---------------------------------------------------------------- reading card
   Policy and explainer text reads a step smaller than a story, and still follows the reader's text size. */
.doc2 .doc__card .prose{ font-size:calc(var(--read-size) - 2px); line-height:1.58; }
.doc2 .doc__card .prose > h2:first-child{ margin-top:20px; }
.doc2 .doc__card .prose > :last-child{ margin-bottom:14px; }
.doc2 .doc__card .prose li::marker{ color:var(--ink-3); }
.doc2 .doc__card + .doc__card{ margin-top:12px; }
.doc2 .sec > .sec__h{ margin-bottom:8px; }

/* ---------------------------------------------------------------- small text between cards */
.doc2 .lead-in{ margin:0 2px; font:400 16px/23px var(--sans); color:var(--ink-2); text-wrap:pretty; }
.doc2 .after-note{ margin:8px 4px 0; font:400 14px/20px var(--sans); color:var(--ink-2); }
.doc2 .after-note a{ color:var(--red-text); font-weight:600; }
.doc2 .rows .row .chev{ align-self:center; }
.page-about .doc__card .prose > p:first-child strong{ font-weight:500; }

/* numbered steps (.steps), the callout (.callout) and .nw live in /css/myb2.css */

/* ---------------------------------------------------------------- link lists (iOS settings rows) */
.doc2 .boards a.cell:hover b{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.doc2 .boards .cell__main div > span{ display:block; -webkit-line-clamp:none; }
.doc2 .boards .cell{ padding-top:12px; padding-bottom:12px; }

/* ---------------------------------------------------------------- dollar to shekel converter + prices */
.fx{ padding:6px 0 2px; }
.fx .conv{ padding:12px 16px 10px; gap:10px; }
.fx .conv input{ height:54px; font-size:24px; letter-spacing:-.01em; border-radius:14px; }
.fx .conv label span{ display:block; }
.fx .conv .eq{ padding-top:20px; font-size:20px; }
.fx__rate{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0; padding:2px 16px 14px; font:500 14px/19px var(--sans); color:var(--ink-2); }
.fx__rate b{ color:var(--ink); font-weight:600; }
.fx__chg{ white-space:nowrap; }
.doc2 .doc .lt + .box, .doc2 .doc .lt + .boards{ margin-top:16px!important; }
.fx__chips{ display:flex; gap:8px; padding:0 16px 16px; }
.fx__chips button{ flex:1 1 0; min-width:0; height:36px; padding:0 6px; border-radius:999px; background:var(--fill-2); font:600 14px/1 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fx__chips button:hover{ background:var(--fill); }
/* inset like an iOS list: the hairlines start 16px in and run to the right edge */
.amt{ width:calc(100% - 16px); margin-left:16px; border-collapse:collapse; font:400 16px/21px var(--sans); font-variant-numeric:tabular-nums; }
.amt th{ text-align:left; font:500 13px/18px var(--sans); color:var(--ink-2); padding:2px 16px 8px 0; }
.amt td{ padding:12px 16px 12px 0; border-top:.5px solid var(--hair); }
.amt td:last-child, .amt th:last-child{ text-align:right; }
.amt td:last-child{ font-weight:600; }
.prices .cell{ min-height:50px; }
.prices .v{ display:flex; align-items:baseline; gap:10px; }
.prices .v > span{ min-width:72px; text-align:right; }
@media (min-width:768px){
  .prices [data-board-rows]{ display:grid; grid-template-columns:1fr 1fr; column-gap:8px; }
  .prices [data-board-rows] > .cell:nth-child(2)::before{ display:none; }
}
.prices .cell > b{ font:500 16px/21px var(--sans); }
.prices .cell > b small{ display:block; font:400 13px/17px var(--sans); color:var(--ink-2); }
.prices .v b{ font-variant-numeric:tabular-nums; }
.prices .skel{ color:var(--ink-3); }
.box__h .aside.num{ font-variant-numeric:tabular-nums; }
.box .note{ padding-top:2px; }

/* ---------------------------------------------------------------- audience tiles (advertise) */
.aud{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.aud > div{ background:var(--card); border-radius:var(--r-md); box-shadow:var(--card-shadow); padding:13px 14px 14px; display:grid; gap:6px; align-content:start; }
.aud .tile{ width:30px; height:30px; border-radius:8px; }
.aud .tile .i{ width:18px; height:18px; }
.aud b{ font:600 15px/20px var(--sans); }
.aud span:not(.tile){ font:400 14px/19px var(--sans); color:var(--ink-2); }
.aud .tile{ color:#fff; }
@media (min-width:768px){ .aud{ grid-template-columns:repeat(4,1fr); } }

/* ---------------------------------------------------------------- share page */
.share-box{ padding:16px; display:grid; gap:10px; }
.share-box .tabs{ margin:0 0 2px; padding:0; flex-wrap:wrap; overflow:visible; -webkit-mask:none; mask:none; }
.share-box .tab{ background:var(--fill-2); box-shadow:none; }
.share-box .tab[aria-pressed="true"]{ background:var(--ink); color:var(--bg); font-weight:600; }
.share-box label.lbl, .share-box .lbl{ font:500 13px/18px var(--sans); color:var(--ink-2); margin:6px 2px 0; }
.share-box .field{ background:var(--fill-2); }
.share-box .field textarea{ min-height:190px; line-height:24px; }
.share-box .count{ margin:-2px 4px 4px; text-align:right; font:400 13px/18px var(--sans); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.share-box .btns .btn{ flex:1 1 180px; }
.sticker-box{ display:grid; gap:12px; padding:16px; }
.sticker-box h2{ margin:0; font:700 20px/25px var(--display); letter-spacing:-.015em; }
.sticker-box p{ margin:0; font:400 15px/21px var(--sans); color:var(--ink-2); }
/* shown on WhatsApp's own chat paper so the white die-cut edge reads as a sticker; the saved file stays transparent */
.sticker{ width:300px; max-width:100%; height:auto; padding:16px; border-radius:var(--r-md); background:#EFE7DD; }
:root[data-theme="dark"] .sticker{ background:#0B141A; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sticker{ background:#0B141A; } }
@media (min-width:768px){ .sticker-box{ grid-template-columns:1fr 300px; align-items:center; gap:24px; padding:20px 24px; } }

/* ---------------------------------------------------------------- 404 */
.gone{ padding:28px 0 0; }
.gone .box{ max-width:520px; margin:0 auto; }
.gone .empty-state{ padding:34px 22px 24px; gap:10px; }
.gone h1{ margin:0; font:700 30px/36px var(--display); letter-spacing:-.022em; }
.gone .i.big{ width:44px; height:44px; color:var(--ink-3); stroke-width:1.5; }
.gone__acts{ display:grid; gap:10px; width:100%; max-width:280px; margin-top:12px; }
.gone__more{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:4px!important; color:var(--ink-3); }
.gone__more a{ color:var(--red-text); font-weight:500; min-height:44px; display:inline-flex; align-items:center; }
@media (min-width:1100px){ .gone{ padding-top:56px; } }

/* ---------------------------------------------------------------- community */
.cgrid{ display:grid; gap:14px; }
.page-community .lt{ padding-bottom:16px; }
.cgrid > *{ min-width:0; }
.cgrid > aside{ display:grid; gap:14px; align-content:start; }
.soon{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; align-items:start; padding:16px; }
.soon .tile{ width:40px; height:40px; border-radius:11px; grid-row:span 2; }
.soon .tile .i{ width:23px; height:23px; }
.soon h2{ margin:1px 0 0; font:700 18px/23px var(--display); letter-spacing:-.012em; }
.soon p{ margin:0; font:400 15px/21px var(--sans); color:var(--ink-2); }
.soon .btns{ grid-column:2; margin-top:10px; }
.talkbox .box__h{ padding-bottom:8px; }
.talkbox .rows{ background:none; box-shadow:none; border-radius:0; }
.cmain{ display:grid; gap:14px; align-content:start; min-width:0; }
.talkbox .post{ padding:14px 16px 12px; }
.talkbox .post + .post::before{ left:58px; }
.talkbox .post__txt{ margin:6px 0 0 42px; }
.talkbox .post__on{ display:block; margin:8px 0 0 42px; font:500 14px/19px var(--sans); color:var(--red-text); }
.talkbox .post__on:hover{ text-decoration:underline; text-underline-offset:3px; }
.talkbox .post__who small{ display:flex; gap:5px; flex-wrap:wrap; }
/* one heading per story, then its comments */
.talkbox .cthread{ position:relative; }
.talkbox .cthread + .cthread{ margin-top:6px; border-top:.5px solid var(--hair); }
.talkbox .cthread__on{ display:flex; align-items:center; gap:5px; min-height:44px; padding:8px 16px 0; font:600 14px/19px var(--sans); color:var(--red-text); }
.talkbox .cthread__on > span:first-child{ flex:none; color:var(--ink-2); font-weight:500; }
.talkbox .cthread__t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.talkbox .cthread__on .chev{ flex:none; width:15px; height:15px; margin-left:auto; color:var(--ink-3); }
.talkbox .cthread__on:hover .cthread__t{ text-decoration:underline; text-underline-offset:3px; }
.talkbox .cthread .post{ padding-top:8px; }
.talkbox .empty-state{ padding:22px 18px 8px; }
.talkbox .empty-state .i{ width:34px; height:34px; color:var(--ink-3); stroke-width:1.6; }
.starts{ border-top:.5px solid var(--hair); margin-top:14px; }
.starts h3{ margin:0; padding:14px 16px 2px; font:600 13px/18px var(--sans); color:var(--ink-2); }
.starts a{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:11px 14px 12px 16px; position:relative; }
.starts a + a::before{ content:""; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--hair); }
.starts .hl{ font-size:16px; line-height:21px; }
.starts .row__txt{ gap:3px; }
.starts .go{ display:inline-flex; align-items:center; gap:5px; font:600 14px/1 var(--sans); color:var(--red-text); white-space:nowrap; }
.starts .go .i{ width:18px; height:18px; }
.rules ol{ padding:2px 16px 16px 36px; }
.rules ol li::marker{ color:var(--ink-2); font-weight:600; }
.rules .note{ padding:12px 16px 16px; }
.howbox{ padding:15px 16px 16px; display:grid; gap:8px; }
.howbox h2{ margin:0; font:700 20px/25px var(--display); letter-spacing:-.015em; }
.howbox ul{ margin:0; padding:0 0 0 18px; display:grid; gap:6px; font:400 15px/21px var(--sans); }
.howbox li::marker{ color:var(--ink-3); }
@media (min-width:1100px){
  .page-community .lt{ padding-top:30px; }
  .cgrid{ grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; max-width:1080px; margin:0 auto; }
  .cgrid > aside{ position:sticky; top:calc(var(--bar-h) + var(--tick-h) + 16px); }
  .page-community .lt{ max-width:1080px; margin:0 auto; padding-bottom:18px; }
}