/* WCD Ledger panels: Group block styles for breaking up long guides (registered in wcd-ledger.php,
   with ready-made patterns under "Working Capital Days" in the block inserter). Loaded in the
   editor and on the site, so colours carry fallbacks for the editor, where ledger.css isn't loaded.
   Blue (tide) is the one accent besides ledger green: it ties the site to the article images. */

.wp-block-group[class*="is-style-wl-"] { box-sizing: border-box; margin: 28px 0; padding: 20px 24px; border-radius: var(--r-lg, 6px); font-size: 17px; line-height: 28px; }
.wp-block-group[class*="is-style-wl-"] > * { margin-top: 0; margin-bottom: 12px; }
.wp-block-group[class*="is-style-wl-"] > :last-child { margin-bottom: 0; }
.wp-block-group[class*="is-style-wl-"] ul, .wp-block-group[class*="is-style-wl-"] ol { padding-left: 22px; }
.wp-block-group[class*="is-style-wl-"] li { margin: 0 0 6px; }

/* The small capitals label on the first line ("Key point", "Worked example" ...). */
.wl-panel-label { margin: 0 0 8px; font-family: var(--font-sans, "Source Sans 3", system-ui, sans-serif); font-size: 13px; font-weight: 700; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted, #5a6862); }

/* Key point: blue tint. */
.is-style-wl-key { background: var(--tide-soft, #eaf1fa); color: var(--ink-body, #33413a); }
.is-style-wl-key .wl-panel-label { color: var(--tide, #1f5fa6); }

/* Worked example: white sheet with a ruled top, like a page from the accounts. */
.is-style-wl-example { background: var(--paper, #ffffff); border: 1px solid var(--rule, #d7dfdb); border-top: 3px solid var(--ink, #14201b); color: var(--ink-body, #33413a); font-variant-numeric: tabular-nums; }

/* In short: ledger green tint, for a summary or the takeaway at the end of a section. */
.is-style-wl-summary { background: var(--ledger-soft, #e2efe8); color: var(--ink-body, #33413a); }
.is-style-wl-summary .wl-panel-label { color: var(--ledger, #0d5c45); }

/* Watch out: amber tint, for a risk to plan for. */
.is-style-wl-watch { background: var(--caution-soft, #fdf3df); color: var(--ink-body, #33413a); }
.is-style-wl-watch .wl-panel-label { color: var(--caution, #7a4f00); }

/* Plain panel: neutral tint, for an aside. */
.is-style-wl-plain { background: var(--paper-tint, #f4f6f5); color: var(--ink-body, #33413a); }

/* Key figure: one big number and what it means, between rules (no box). */
.wp-block-group.is-style-wl-figure { padding: 16px 0; border-radius: 0; border-top: 2px solid var(--ink, #14201b); border-bottom: 1px solid var(--rule, #d7dfdb); }
.is-style-wl-figure .wl-figure-number { margin: 0 0 4px; font-family: var(--font-sans, "Source Sans 3", system-ui, sans-serif); font-size: 40px; font-weight: 700; line-height: 46px; color: var(--tide, #1f5fa6); font-variant-numeric: tabular-nums lining-nums; }

@media (max-width: 600px) {
  .wp-block-group[class*="is-style-wl-"] { padding: 16px; }
  .wp-block-group.is-style-wl-figure { padding: 14px 0; }
  .is-style-wl-figure .wl-figure-number { font-size: 34px; line-height: 40px; }
}