/* Bark & Bite article body: every block the article grammar draws
   (functions/src/news_body.ts and public/shared/news-body.js).

   One stylesheet for the two places an article body appears: the public
   article page (with site.css and news.css) and the Pack Desk preview (with
   admin.css). Colours come from whichever page's tokens are present, with the
   site's light palette as the fallback, so the preview is the page. Container
   typography is scoped to .nb-article; components stand on their own class.
   Dark-mode variants are scoped to .news-page, because the preview card is
   always drawn light. */

/* ── Body typography ───────────────────────────────────────────────────── */
.nb-article .nb-lead { font-size: 1.16em; line-height: 1.7; color: var(--ink, #15201E); }
.nb-article .nb-lead::first-letter { float: left; margin: .08em .1em 0 0; color: var(--teal-text, var(--teal-ink, #147F78)); font: 600 4.1em/.78 'Fredoka', sans-serif; }
.nb-article h2 { position: relative; padding-top: .2em; letter-spacing: -.01em; }
.nb-article h2::after { content: ""; display: block; width: 46px; height: 4px; margin-top: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--teal, #1FB6AB), var(--amber, var(--gold, #F2A93B))); }
.nb-article strong { font-weight: 900; color: var(--ink, #15201E); }
.nb-article ul:not([class]), .nb-article ol:not([class]) { padding-left: 1.4em; }
.nb-article ul:not([class]) > li::marker { color: var(--teal, #1FB6AB); }
.nb-article ol:not([class]) > li::marker { color: var(--teal-text, var(--teal-ink, #147F78)); font-family: 'Fredoka', sans-serif; font-weight: 600; }
.nb-cite { line-height: 0; font-size: .68em; font-weight: 900; margin-left: 1px; white-space: nowrap; }
.nb-cite a { color: var(--teal-text, var(--teal-ink, #147F78)); text-decoration: none; padding: 0 1px; border-radius: 4px; }
.nb-cite a:hover, .nb-cite a:focus-visible { text-decoration: underline; text-underline-offset: 2px; background: color-mix(in srgb, var(--teal, #1FB6AB) 12%, transparent); }

/* Blocks stand on their own line, below any artwork floated beside the text. */
.nb-article h2, .nb-article h3, .nb-takeaways, .nb-stats, .nb-dodont, .nb-faq, .nb-table,
.nb-checklist, .nb-quote, .nb-article .fig, .article-callout, .nb-art-center, .nb-art-wide { clear: both; }
.nb-box-title { margin: 0 0 12px; color: var(--ink, #15201E); font: 600 1.1rem/1.3 'Fredoka', sans-serif; }

/* ── Callouts, each with a small illustration ──────────────────────────── */
.article-callout { position: relative; min-height: 76px; padding: 20px 22px 20px 78px; border: 1px solid #BCEAE4; border-left: 6px solid var(--teal, #1FB6AB); border-radius: 18px; background: #F0FBFA; }
.article-callout[data-tone="gold"] { background: #FDF8EE; border-color: #EED6AD; border-left-color: #A5660D; }
.article-callout[data-tone="grape"] { background: #F6F2FE; border-color: #D9CDFB; border-left-color: #6D4BC2; }
.article-callout[data-tone="coral"] { background: #FFF3F3; border-color: #F6CDCD; border-left-color: #BE4B52; }
.article-callout b { display: block; margin-bottom: 5px; font-family: 'Fredoka', sans-serif; }
.article-callout::before { content: ""; position: absolute; left: 18px; top: 18px; width: 42px; height: 42px; background: url('/assets/emoji/1f4a1.webp') center / contain no-repeat; }
.article-callout[data-tone="gold"]::before { background-image: url('/assets/emoji/270b.webp'); }
.article-callout[data-tone="grape"]::before { background-image: url('/assets/emoji/2728.webp'); }
.article-callout[data-tone="coral"]::before { background-image: url('/assets/emoji/1fa7a.webp'); }

/* ── Artwork ───────────────────────────────────────────────────────────── */
.nb-art { margin-left: auto; margin-right: auto; text-align: center; }
.nb-art img { display: block; width: 100%; height: auto; margin: 0 auto; }
.nb-art figcaption { margin-top: 10px; color: var(--sub, #4A5B58); font-size: .84rem; font-weight: 700; line-height: 1.45; }
.nb-art-pose, .nb-art-illustration, .nb-art-badge { width: clamp(150px, 32%, 210px); }
.nb-art-icon { width: 96px; }
.nb-art-icon img { filter: drop-shadow(0 8px 12px rgba(20, 60, 56, .16)); }
.nb-art-screen { width: 210px; }
.nb-art-screen img { border: 1.5px solid var(--line, #E2EFED); border-radius: 22px; box-shadow: 0 18px 50px -18px rgba(20, 60, 56, .25); }
.nb-art-right { float: right; margin: .3em 0 1em 1.8em; }
.nb-art-left { float: left; margin: .3em 1.8em 1em 0; }
.nb-art-center.nb-art-pose, .nb-art-center.nb-art-illustration, .nb-art-center.nb-art-badge { width: 240px; }
.nb-art-center.nb-art-icon { width: 120px; }
.nb-art-center.nb-art-screen { width: 250px; }
.nb-art-center.nb-art-scene { width: 82%; }
.nb-art-wide { width: 100%; }
.nb-art-scene img { border-radius: 22px; box-shadow: 0 18px 50px -18px rgba(20, 60, 56, .25); }
.nb-art-right figcaption, .nb-art-left figcaption { font-size: .8rem; }

/* ── Key points ────────────────────────────────────────────────────────── */
.nb-takeaways { position: relative; padding: 22px 24px 20px; border: 1.5px solid color-mix(in srgb, var(--teal, #1FB6AB) 32%, var(--line, #E2EFED)); border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--teal, #1FB6AB) 9%, var(--card, #fff)), var(--card, #fff) 70%); box-shadow: 0 18px 40px -34px rgba(20, 87, 82, .7); }
.nb-takeaways .nb-box-title { display: flex; align-items: center; gap: 10px; }
.nb-takeaways .nb-box-title::before { content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--teal, #1FB6AB) center / 18px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cellipse cx='6.2' cy='8.6' rx='2.6' ry='3.4'/%3E%3Cellipse cx='11.3' cy='6.2' rx='2.5' ry='3.5'/%3E%3Cellipse cx='16.6' cy='7.6' rx='2.5' ry='3.3'/%3E%3Cellipse cx='20.2' cy='12.2' rx='2.3' ry='2.9'/%3E%3Cpath d='M12.6 12.1c3.2 0 6.1 2.4 6.1 5.1 0 2.2-1.8 3.5-4 3.5-1.1 0-1.6-.4-2.6-.4s-1.5.4-2.6.4c-2.2 0-4-1.3-4-3.5 0-2.7 2.9-5.1 6.1-5.1z'/%3E%3C/svg%3E"); }
.nb-takeaways ul, .nb-checklist ul, .nb-dodont ul { margin: 0; padding: 0; list-style: none; }
.nb-takeaways li { position: relative; padding-left: 30px; font-size: .97em; line-height: 1.6; }
.nb-takeaways li + li { margin-top: .6em; }
.nb-takeaways li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--teal, #1FB6AB) 18%, transparent) center / 12px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23147F78' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* ── Numbers ───────────────────────────────────────────────────────────── */
.nb-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.nb-stats-grid li { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border: 1.5px solid var(--line, #E2EFED); border-radius: 20px; background: var(--card, #fff); box-shadow: 0 16px 34px -30px rgba(20, 60, 56, .55); }
/* Cards in a grid, not lines of a list: no spacing from the body's list rule. */
.nb-stats-grid li + li { margin-top: 0; }
.nb-stats-grid b { color: var(--teal-text, var(--teal-ink, #147F78)); font: 600 clamp(1.9rem, 4vw, 2.35rem)/1 'Fredoka', sans-serif; letter-spacing: -.02em; }
.nb-stats-grid span { color: var(--sub, #4A5B58); font-size: .9rem; font-weight: 700; line-height: 1.45; }

/* ── Pull quote ────────────────────────────────────────────────────────── */
.nb-quote { position: relative; margin-left: 0; margin-right: 0; padding: 6px 0 6px 28px; border-left: 5px solid var(--teal, #1FB6AB); }
.nb-quote blockquote { margin: 0; }
.nb-quote p { color: var(--ink, #15201E); font: 600 clamp(1.25rem, 2.6vw, 1.5rem)/1.4 'Fredoka', sans-serif; letter-spacing: -.01em; }
.nb-quote p::before { content: "\201C"; margin-right: .08em; color: var(--teal-text, var(--teal-ink, #147F78)); }
.nb-quote p::after { content: "\201D"; margin-left: .04em; color: var(--teal-text, var(--teal-ink, #147F78)); }
.nb-quote figcaption { margin-top: 10px; color: var(--sub, #4A5B58); font-size: .86rem; font-weight: 800; }
.nb-quote figcaption::before { content: "\2014\00a0"; }

/* ── Do and don't ──────────────────────────────────────────────────────── */
.nb-dodont-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nb-do, .nb-dont { padding: 16px 18px; border: 1.5px solid; border-radius: 20px; }
.nb-do { border-color: #BCE9D4; background: #F0FBF5; }
.nb-dont { border-color: #F6CDCD; background: #FFF4F3; }
.nb-dodont-head { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font: 600 1rem/1 'Fredoka', sans-serif; }
.nb-do .nb-dodont-head { color: #17784A; }
.nb-dont .nb-dodont-head { color: #B4363F; }
.nb-dodont li { position: relative; padding-left: 26px; font-size: .95em; line-height: 1.55; }
.nb-dodont li + li { margin-top: .55em; }
.nb-dodont li::before { position: absolute; left: 0; top: 0; width: 18px; font-weight: 1000; text-align: center; }
.nb-do li::before { content: "\2713"; color: #1F9A5E; }
.nb-dont li::before { content: "\2715"; color: #C9474F; }

/* ── Questions ─────────────────────────────────────────────────────────── */
.nb-faq details { border-top: 1.5px solid var(--line, #E2EFED); }
.nb-faq details:last-child { border-bottom: 1.5px solid var(--line, #E2EFED); }
.nb-faq summary { position: relative; cursor: pointer; padding: 16px 44px 16px 2px; color: var(--ink, #15201E); font: 600 1.04rem/1.4 'Fredoka', sans-serif; list-style: none; }
.nb-faq summary::-webkit-details-marker { display: none; }
.nb-faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: color-mix(in srgb, var(--teal, #1FB6AB) 12%, transparent); color: var(--teal-text, var(--teal-ink, #147F78)); font: 700 1.25rem/28px 'Fredoka', sans-serif; text-align: center; }
.nb-faq details[open] summary::after { content: "\2212"; }
.nb-faq summary:hover { color: var(--teal-text, var(--teal-ink, #147F78)); }
.nb-faq details p { margin: -4px 0 18px; padding-right: 40px; color: var(--sub, #4A5B58); font-size: .96em; line-height: 1.7; }

/* ── Table ─────────────────────────────────────────────────────────────── */
.nb-table { margin-left: 0; margin-right: 0; }
.nb-table figcaption { margin-bottom: 10px; color: var(--ink, #15201E); font: 600 1.1rem/1.3 'Fredoka', sans-serif; }
.nb-table-scroll { overflow-x: auto; border: 1.5px solid var(--line, #E2EFED); border-radius: 18px; background: var(--card, #fff); }
.nb-table table { width: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.5; }
.nb-table th, .nb-table td { padding: 12px 14px; text-align: left; vertical-align: top; }
.nb-table thead th { background: color-mix(in srgb, var(--teal, #1FB6AB) 12%, var(--card, #fff)); color: var(--ink, #15201E); font: 600 .9rem/1.3 'Fredoka', sans-serif; white-space: nowrap; }
.nb-table tbody th { color: var(--ink, #15201E); font-weight: 900; }
.nb-table tbody tr + tr { border-top: 1.5px solid var(--line, #E2EFED); }
.nb-table tbody td { color: var(--sub, #4A5B58); }

/* ── Checklist ─────────────────────────────────────────────────────────── */
.nb-checklist { padding: 20px 22px; border: 1.5px solid var(--line, #E2EFED); border-radius: 22px; background: var(--cream, #FDF9F2); }
.nb-checklist li { position: relative; padding-left: 34px; line-height: 1.55; }
.nb-checklist li + li { margin-top: .65em; }
.nb-checklist li::before { content: ""; position: absolute; left: 0; top: .2em; width: 19px; height: 19px; border: 2px solid var(--teal, #1FB6AB); border-radius: 6px; background: var(--card, #fff); }

@media (max-width: 640px) {
  .nb-art-right, .nb-art-left { float: none; margin: 1.4em auto; }
  .nb-art-pose, .nb-art-illustration, .nb-art-badge { width: 170px; }
  .nb-art-icon { width: 84px; }
  .nb-art-screen { width: 210px; }
  .nb-art-center.nb-art-scene { width: 100%; }
  .nb-dodont-cols { grid-template-columns: 1fr; }
  .nb-stats-grid { grid-template-columns: 1fr 1fr; }
  .nb-stats-grid li { padding: 14px; }
  .nb-takeaways, .nb-checklist { padding: 18px; }
  .nb-quote { padding-left: 20px; }
  .article-callout { padding-left: 66px; }
  .article-callout::before { left: 14px; width: 36px; height: 36px; }
  /* A table becomes a stack of small cards, one per row. */
  .nb-table-scroll { overflow: visible; border: 0; background: transparent; }
  .nb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nb-table table, .nb-table tbody, .nb-table tr, .nb-table th, .nb-table td { display: block; }
  .nb-table tbody tr { border: 1.5px solid var(--line, #E2EFED) !important; border-radius: 16px; background: var(--card, #fff); padding: 6px 4px; }
  .nb-table tbody tr + tr { margin-top: 10px; }
  .nb-table tbody th { padding: 8px 12px 2px; font-size: 1rem; }
  .nb-table td { padding: 4px 12px 8px; }
  .nb-table td::before { content: attr(data-label); display: block; color: var(--faint, #687673); font-size: .74rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
}
@media (max-width: 380px) {
  .nb-stats-grid { grid-template-columns: 1fr; }
}

/* Dark mode on the public pages only, guarded the same way as site.css: the
   media query yields to an explicit light choice, the attribute wins both ways. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .news-page .article-callout { background: #132D29; border-color: #27544E; }
  :root:not([data-theme="light"]) .news-page .article-callout[data-tone="gold"] { background: #2C2518; border-color: #594923; }
  :root:not([data-theme="light"]) .news-page .article-callout[data-tone="grape"] { background: #251E34; border-color: #483866; }
  :root:not([data-theme="light"]) .news-page .article-callout[data-tone="coral"] { background: #311F21; border-color: #60383C; }
  :root:not([data-theme="light"]) .news-page .nb-do { background: #12291F; border-color: #24533D; }
  :root:not([data-theme="light"]) .news-page .nb-dont { background: #2C1719; border-color: #5B2E33; }
  :root:not([data-theme="light"]) .news-page .nb-do .nb-dodont-head, :root:not([data-theme="light"]) .news-page .nb-do li::before { color: #6FE0A6; }
  :root:not([data-theme="light"]) .news-page .nb-dont .nb-dodont-head, :root:not([data-theme="light"]) .news-page .nb-dont li::before { color: #FF9AA0; }
  :root:not([data-theme="light"]) .news-page .nb-takeaways li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FD8CE' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] .news-page .article-callout { background: #132D29; border-color: #27544E; }
:root[data-theme="dark"] .news-page .article-callout[data-tone="gold"] { background: #2C2518; border-color: #594923; }
:root[data-theme="dark"] .news-page .article-callout[data-tone="grape"] { background: #251E34; border-color: #483866; }
:root[data-theme="dark"] .news-page .article-callout[data-tone="coral"] { background: #311F21; border-color: #60383C; }
:root[data-theme="dark"] .news-page .nb-do { background: #12291F; border-color: #24533D; }
:root[data-theme="dark"] .news-page .nb-dont { background: #2C1719; border-color: #5B2E33; }
:root[data-theme="dark"] .news-page .nb-do .nb-dodont-head, :root[data-theme="dark"] .news-page .nb-do li::before { color: #6FE0A6; }
:root[data-theme="dark"] .news-page .nb-dont .nb-dodont-head, :root[data-theme="dark"] .news-page .nb-dont li::before { color: #FF9AA0; }
:root[data-theme="dark"] .news-page .nb-takeaways li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FD8CE' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }