/* pl-article.css — the ONE article template look for every guide and help page (visual pass,
   public lane C, 2026-10-06). Canon: PL-design/pl-public-site-look-2026-10-06.html, the guide and
   help article frames: hero (mark, H1, meta), "On this page" beside the prose, callouts, tables,
   cards, one filled button per block, light and dark.
   Owner rule: RE-SKIN, NOT REBUILD. The pages keep their markup, copy, ids, anchors and tools; this
   file restyles the classes they already share (article, .crumbs, .byline, .lead, .note,
   .cta-block, .cta-btn, the tool cards) onto the pl-public tokens. pl-system.css, gated on by
   pl-accent.js, already re-points every OG token the pages read (--bg, --ink, --accent, --border
   ...) at the v2 set in light AND dark, so a page-local rule that reads a token follows the theme
   by itself. This file only does what a token cannot: weights, sizes, radii, the reading column,
   and the hard-coded #fff text on filled buttons (white on the dark-mode accent is unreadable).
   Documents shown inside a guide (.inv-paper, .mini-doc, .memo) stay PAPER in both themes.
   Loaded after each page's own <style> blocks, so equal specificity wins here.
   SCREEN ONLY: print keeps the pages exactly as they always printed. */

@media screen {
  body { background: var(--pub-g); color: var(--pub-i1); font-family: var(--pub-body); }
  /* the shared chrome sits inside pages whose own CSS styles bare tags (li, p, a) */
  .pl-pub-header, .pl-pub-footer { line-height: 1.5; }
  .pl-pub-footer li { margin: 0; }

  /* ---------- breadcrumb + reading column ---------- */
  /* FULL-SCREEN (owner 2026-10-07): the page uses the screen (pl-public --pub-max + the fluid
     gutter). Prose keeps a 78ch reading measure; tables, cards, callouts, tools and the sample
     documents take the whole content width. */
  .crumbs { max-width: var(--pub-max); margin: 8px auto 0; padding: 0 var(--pub-pad); font-size: 14px; color: var(--pub-i3); }
  .crumbs a { color: var(--pub-i2); text-decoration: none; }
  .crumbs a:hover { color: var(--pub-aci); text-decoration: underline; }
  article { max-width: var(--pub-max); margin: 0 auto; padding: 8px var(--pub-pad) 88px; }
  article > p, article > ul, article > ol { font-size: 17px; line-height: 1.7; color: var(--pub-i2); }
  article > p, article > ul, article > ol, article > h1, article > h2, article > h3, article > .lead, article > .byline, article > .mins { max-width: var(--pub-measure); }

  /* ---------- "← All guides" / "← Help": the way back out (owner 2026-10-07) ---------- */
  .pl-back-row { max-width: var(--pub-max); margin: 20px auto 0; padding: 0 var(--pub-pad); }
  .pl-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 10px; margin-left: -10px; border-radius: 10px; color: var(--pub-aci); font: 600 14.5px/1.2 var(--pub-body); text-decoration: none; }
  .pl-back:hover { background: var(--pub-act); color: var(--pub-aci); }
  .pl-back:focus-visible { outline: 2px solid var(--pub-ac); outline-offset: 2px; }
  .pl-back-end { margin: 28px 0 0; }
  article > p { margin: 0 0 18px; }
  article > ul > li, article > ol > li { margin-bottom: 8px; }
  article strong { color: var(--pub-i1); }
  article a { color: var(--pub-aci); text-underline-offset: 2px; }

  /* ---------- type scale (pl-public: display 600, -.02em) ---------- */
  article h1, .gwrap h1 { font-family: var(--pub-disp); font-weight: 600; letter-spacing: -.02em; color: var(--pub-i1); text-wrap: balance; }
  article h1 { font-size: 46px; line-height: 1.06; margin: 10px 0 14px; }
  article h2 { font-family: var(--pub-disp); font-weight: 600; letter-spacing: -.02em; font-size: 28px; line-height: 1.15; margin: 48px 0 14px; color: var(--pub-i1); scroll-margin-top: 88px; }
  article h3 { font-family: var(--pub-disp); font-weight: 600; letter-spacing: -.01em; font-size: 19px; line-height: 1.3; margin: 30px 0 10px; color: var(--pub-i1); }
  .gwrap h1 { font-size: 56px; line-height: 1.04; margin: 0 0 14px; max-width: 16ch; }
  .hcard h2, .gcard h3, .gwhere h2, .grate h2, .tb-out h3, .gtool-text h3, .calc-out strong, .memo h3 { font-weight: 600; letter-spacing: -.01em; }
  .gcard h3, .hcard h2, .gtool-text h3, .gwhere h2, .grate h2, .memo h3, .tb-out h3 { line-height: 1.25; }
  .byline, .mins { font-size: 14px; color: var(--pub-i3); }
  article .pl-eyebrow { font: 600 12px/1.4 var(--pub-body); letter-spacing: .12em; text-transform: uppercase; color: var(--pub-aci); }
  .byline { margin: 0 0 28px; }
  .lead { font-size: 19px; line-height: 1.55; color: var(--pub-i1); }
  article > .lead { color: var(--pub-i1); font-size: 19px; }
  @media (max-width: 760px) { article h1 { font-size: 38px; } .gwrap h1 { font-size: 42px; } article h2 { font-size: 25px; } }
  @media (max-width: 480px) {
    article h1 { font-size: 32px; } .gwrap h1 { font-size: 34px; } article h2 { font-size: 23px; margin-top: 40px; }
    .lead, article > .lead { font-size: 17px; } article > p, article > ul, article > ol { font-size: 16px; }
  }

  /* ---------- line breaks (owner 2026-10-07): no one-word last line ----------
     Headings balance so a title never strands a word; running text uses pretty, and the short
     blocks (lead, callouts, card copy) balance because pretty does not rescue a 2-line orphan.
     Longhand text-wrap-style only, so neither rule can undo a white-space: nowrap. */
  article h1, article h2, article h3, .gwrap h1, .gwrap h2, .gwrap h3, .cta-block h2, .gcard h3, .hcard h2, .gtool-text h3, .gwhere h2, .grate h2 { text-wrap-style: balance; }
  article p, article li, .gsub, .gcard p, .hcard p, .step p, .note p, .cta-block p, .gtool-text p, .grate p, .gwhere p { text-wrap-style: pretty; }
  .lead, .byline, .note, .cta-block p, .gcard p, .hcard p, .gtool-text p, .pl-sources { text-wrap-style: balance; }

  /* ---------- the hero mark (one sketch mark, decorative) ---------- */
  /* wide pages: a full-width illustration would stand taller than the screen; card copy keeps the reading measure */
  article > img:not(.pl-art-mark) { max-width: min(100%, 880px) !important; }
  .step p, .note p, .cta-block p, .hcard p { max-width: var(--pub-measure); }
  .pl-art-mark { display: block; width: auto; height: 52px; margin: 12px 0 2px; opacity: .9; }
  .gwrap .pl-art-mark { height: 58px; margin: 10px 0 8px; }

  /* ---------- callouts, cards, the closing CTA ---------- */
  .note { background: var(--pub-act); border: 1px solid var(--pub-act-bd); border-radius: 14px; padding: 18px 22px; margin: 26px 0; font-size: 15.5px; color: var(--pub-i1); }
  .note strong { color: var(--pub-i1); }
  /* the quiet "Sources" line at the end of an article (replaces the dated "Reviewed <month>" box) */
  .pl-sources { max-width: var(--pub-measure); margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--pub-hair); font-size: 13.5px; line-height: 1.6; color: var(--pub-i3); }
  .pl-sources a { color: var(--pub-i2); }
  .cta-block { background: var(--pub-act); border: 1px solid var(--pub-act-bd); border-radius: 20px; padding: 36px 34px; margin: 52px 0 8px; }
  .cta-block h2 { margin: 0 0 10px; }
  .cta-block p { color: var(--pub-i2); }
  @media (max-width: 480px) { .cta-block { padding: 26px 20px; } }
  .gcard, .hcard, .grate, .memo, .money-card, .calc, .tb, .qc, .preflight, .gwhere-panel { border-radius: 16px; border-color: var(--pub-hair); }
  .step, .diag details { border-radius: 12px; border-color: var(--pub-hair); }
  .gcard { transition: border-color .15s, box-shadow .15s; }
  .gcard:hover { border-color: var(--pub-ac); box-shadow: var(--pub-sh); }
  .gmore, .hcard a.go, .gcat-tag { color: var(--pub-aci); }
  .step .n { color: var(--pub-aci); letter-spacing: .12em; }

  /* ---------- filled buttons: the public button, one per block ---------- */
  .cta-btn, .gocta, .grate-btn, .calc button, .tb-copy, .pf-copy, .qc-copy {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px;
    background: var(--pub-btn); color: var(--pub-onbtn); border: 1px solid var(--pub-btn); border-radius: 10px;
    font: 600 15px/1.25 var(--pub-body); text-decoration: none; cursor: pointer;
  }
  .cta-btn:hover, .gocta:hover, .grate-btn:hover, .calc button:hover, .tb-copy:hover, .pf-copy:hover, .qc-copy:hover { background: var(--pub-btnh); border-color: var(--pub-btnh); color: var(--pub-onbtn); }
  .calc button, .tb-copy, .pf-copy, .qc-copy { min-height: 40px; font-size: 14.5px; }
  .cta-btn:focus-visible, .gocta:focus-visible, .grate-btn:focus-visible, .calc button:focus-visible, .tb-copy:focus-visible, .pf-copy:focus-visible, .qc-copy:focus-visible { outline: 2px solid var(--pub-ac); outline-offset: 2px; }
  /* the estimator's secondary buttons stay outlined (they sit inside .calc) */
  .calc .addrow { background: transparent; color: var(--pub-aci); border-color: var(--pub-act-bd); }
  .calc .addrow:hover { background: var(--pub-act); color: var(--pub-aci); border-color: var(--pub-ac); }
  .brow .rm { background: transparent; color: var(--pub-i2); border-color: var(--pub-hair); min-height: 40px; padding: 0; }
  .brow .rm:hover { background: var(--pub-g); color: var(--pub-i1); border-color: var(--pub-ac); }
  .copy-btn { border-radius: 8px; border-color: var(--pub-hair); color: var(--pub-aci); background: var(--pub-pp); }

  /* ---------- tool fields ---------- */
  article input[type="text"], article input[type="number"], article input[type="date"], article select, article textarea { border-color: var(--pub-field-bd); border-radius: 10px; background: var(--pub-g); color: var(--pub-i1); }
  article input[type="text"]:focus-visible, article input[type="number"]:focus-visible, article input[type="date"]:focus-visible, article select:focus-visible, article textarea:focus-visible { outline: 2px solid var(--pub-ac); outline-offset: 1px; }
  /* one control per line, so a tool's button sits under its last field (not beside it) */
  .calc input:not([type="checkbox"]):not([type="radio"]), .calc select { display: block; }
  /* the guides' own .calc rule outlines fields with the page hairline (1.2:1): the shared >= 3:1 outline */
  .calc input:not([type="checkbox"]):not([type="radio"]), .calc select { border-color: var(--pub-field-bd); }
  :root[data-theme="dark"] article :is(input, select, textarea) { color-scheme: dark; }
  .tb-checks label, .qc-pills label, .pf-q .pf-opts label { border-color: var(--pub-hair); border-radius: 99px; background: var(--pub-pp); }
  .tb-days label { border-color: var(--pub-hair); border-radius: 10px; background: var(--pub-pp); }
  .tb-days input { border-radius: 8px; }
  .tb-checks label:has(input:checked), .qc-pills label:has(input:checked), .pf-q .pf-opts label:has(input:checked) { background: var(--pub-act); border-color: var(--pub-act-bd); color: var(--pub-aci); }
  .tb-sec { color: var(--pub-aci); }
  .tb-open { color: var(--pub-ai); }
  .tb-flag { background: var(--pub-abg); border-color: var(--pub-abg); color: var(--pub-i1); }
  .tb-flag.ok { background: var(--pub-gbg); border-color: var(--pub-gbg); }
  .pf-note-wrap .pf-note, .qc-out textarea { background: var(--pub-act); border-color: var(--pub-act-bd); }

  /* ---------- tables ---------- */
  .rate-scroll { border: 1px solid var(--pub-hair); border-radius: 14px; }
  .rate-table { border: 0; border-radius: 0; font-variant-numeric: tabular-nums; }
  .rate-table th { font: 600 12px/1.4 var(--pub-body); letter-spacing: .06em; color: var(--pub-i2); background: var(--pub-g); border-bottom: 1px solid var(--pub-hair); }
  .rate-table td { border-bottom-color: var(--pub-ln); color: var(--pub-i2); }
  .rate-table td:first-child { color: var(--pub-i1); font-weight: 500; }
  .rate-table .dept td { background: var(--pub-act); color: var(--pub-aci); }
  .btable { font-variant-numeric: tabular-nums; }
  .btable th, .btable td { border-top-color: var(--pub-ln); }

  /* ---------- documents stay paper ---------- */
  .inv-paper, .mini-doc, .memo {
    --surface: #FFFFFF; --bg: #F7FAFD; --bg-soft: #EEF3F9; --ink: #14171C; --ink-muted: #5B626C;
    --border: #E7ECF3; --rule: #CBD6E4; --accent: #3E68A3; --highlight: #DCE8F7; --highlight-tint: #EDF3FB;
    --pub-i1: #14171C; --pub-i2: #5B626C; --pub-i3: #6B7380; --pub-aci: #3E68A3; --pub-pp: #FFFFFF; --pub-g: #F7FAFD;
    --pub-hair: #E7ECF3; --pub-ln: #ECF0F5; --pub-act: #EDF3FB; --pub-act-bd: #DCE8F7;
    color: #14171C; color-scheme: light;
  }
  .inv-paper, .mini-doc { border-radius: 6px; box-shadow: var(--pub-sh); }
  /* a phone fits the sample's amount column by letting it wrap (it overflowed by 158px on main) */
  @media (max-width: 480px) { .mini-doc { padding: 18px 16px; } .mini-doc td:last-child { white-space: normal; text-align: right; padding-left: 12px; } }

  /* ---------- guides hub: the card grid grows with the screen (3, then 4 across) ---------- */
  body:has(.gwrap) .crumbs { max-width: var(--pub-max); }
  .gwrap { max-width: var(--pub-max); padding: 6px var(--pub-pad) 88px; }
  .hero-eyebrow { font: 600 12px/1.4 var(--pub-body); letter-spacing: .12em; color: var(--pub-aci); margin: 6px 0 12px; }
  .gsub { font-size: 19px; line-height: 1.55; color: var(--pub-i2); }
  .gtool-card { background: var(--pub-act); color: var(--pub-i1); border: 1px solid var(--pub-act-bd); border-radius: 16px; }
  .gtool-card:hover { background: var(--pub-act); border-color: var(--pub-ac); }
  .gtool-icon { background: var(--pub-pp); color: var(--pub-aci); border: 1px solid var(--pub-act-bd); }
  .gtool-text h3 { color: var(--pub-i1); font-family: var(--pub-disp); }
  .gtool-text p { color: var(--pub-i2); }
  .gtool-arrow { color: var(--pub-aci); }
  .gwhere-opts button { border-color: var(--pub-hair); background: var(--pub-pp); color: var(--pub-i2); font-weight: 500; min-height: 36px; }
  .gwhere-opts button:hover { border-color: var(--pub-ac); color: var(--pub-i1); }
  .gwhere-opts button[aria-pressed="true"] { background: var(--pub-act); border-color: var(--pub-act-bd); color: var(--pub-aci); font-weight: 600; }
  .gcat { color: var(--pub-i3); letter-spacing: .12em; font-weight: 600; }
  .gcat svg { color: var(--pub-aci); }
  /* the guide cards sit three to a row; categories, the tool card and the closing band span it */
  .gwrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--pub-gap); align-items: stretch; }
  .gwrap > * { grid-column: 1 / -1; min-width: 0; }
  .gwrap > .gcard:not(.gcard--feature) { grid-column: auto; display: flex; flex-direction: column; margin-bottom: var(--pub-gap); }
  .gwrap > .gcard:not(.gcard--feature) .gmore { margin-top: auto; padding-top: 6px; }
  .gwrap > .gcard--feature { margin-bottom: var(--pub-gap); }
  @media (min-width: 1400px) { .gwrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 900px) { .gwrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .gwrap { grid-template-columns: minmax(0, 1fr); } }
  .grate { background: var(--pub-act); border-color: var(--pub-act-bd); border-radius: 20px; }

  /* ---------- "On this page" (pl-article.js paints it from the article's own h2s) ---------- */
  .pl-toc-rail, .pl-side-rail { display: none; }
  .pl-toc, .pl-list { background: var(--pub-pp); border: 1px solid var(--pub-hair); border-radius: 14px; padding: 18px 20px; }
  .pl-toc .pl-toc-h, .pl-list .pl-list-h { margin: 0 0 8px; font: 600 12px/1.4 var(--pub-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pub-i3); }
  .pl-toc a, .pl-list a, .pl-toc-m a { display: block; padding: 7px 0; color: var(--pub-i2); text-decoration: none; font-size: 14.5px; line-height: 1.4; text-wrap-style: pretty; }
  .pl-toc a:hover, .pl-list a:hover, .pl-toc-m a:hover { color: var(--pub-i1); }
  .pl-toc a.on, .pl-list a.on, .pl-toc-m a.on { color: var(--pub-aci); font-weight: 600; }
  .pl-toc-m { margin: 0 0 28px; background: var(--pub-pp); border: 1px solid var(--pub-hair); border-radius: 14px; }
  .pl-toc-m summary { list-style: none; cursor: pointer; min-height: 48px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 12px/1.4 var(--pub-body); letter-spacing: .1em; text-transform: uppercase; color: var(--pub-i3); }
  .pl-toc-m summary::-webkit-details-marker { display: none; }
  .pl-toc-m summary::after { content: "+"; font: 500 20px/1 var(--pub-body); color: var(--pub-aci); }
  .pl-toc-m[open] summary::after { content: "\2212"; }
  .pl-toc-m nav { padding: 0 18px 12px; }
  /* ---------- the wide article frame (guides + help articles, `article[data-pl-wide]`) ----------
     >= 1100px: a sticky left rail ("On this page" on a guide, the help list on a help article)
     beside the article; >= 1500px: a sticky right rail too (Start free / Build an invoice free +
     More guides), so a wide screen is used, not padded. The space is reserved by the static
     attribute, so nothing shifts when pl-article.js paints the rails. */
  .pl-rail-r { display: none; }
  .pl-rail-card { background: var(--pub-pp); border: 1px solid var(--pub-hair); border-radius: 14px; padding: 18px 20px; }
  .pl-rail-card + .pl-rail-card { margin-top: 16px; }
  .pl-rail-cta { display: flex; flex-direction: column; gap: 10px; background: var(--pub-act); border-color: var(--pub-act-bd); }
  .pl-rail-cta .pub-b { width: 100%; height: 44px; }
  @media (min-width: 1100px) {
    article[data-pl-wide] { position: relative; padding-left: calc(var(--pub-pad) + 268px); }
    body:has(article[data-pl-wide]) .crumbs, body:has(article[data-pl-wide]) .pl-back-row { padding-left: calc(var(--pub-pad) + 268px); }
    .pl-toc-rail, .pl-side-rail { display: block; position: absolute; left: var(--pub-pad); top: 18px; bottom: 88px; width: 236px; }
    .pl-toc, .pl-side-rail .pl-list { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; }
    .pl-toc-m { display: none; }
  }
  @media (min-width: 1500px) {
    article[data-pl-wide] { padding-right: calc(var(--pub-pad) + 316px); }
    .pl-rail-r { display: block; position: absolute; right: var(--pub-pad); top: 18px; bottom: 88px; width: 284px; }
    .pl-rail-r > div { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; }
  }

  /* ---------- help hub: the four cards sit side by side and grow with the screen ---------- */
  @media (min-width: 760px) {
    article:has(> .hcard) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pub-gap); align-items: stretch; }
    article:has(> .hcard) > * { grid-column: 1 / -1; min-width: 0; }
    article:has(> .hcard) > .hcard:not(#ctx) { grid-column: auto; margin: 0 0 var(--pub-gap); }
  }
  @media (min-width: 1400px) { article:has(> .hcard) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ---------- the future tutorial video (empty today; never renders while empty) ---------- */
  [data-pl-tutorial-slot][hidden], [data-pl-tutorial-slot]:empty { display: none !important; }
  .pl-tutorial-slot { margin: 0 0 28px; border-radius: 14px; overflow: hidden; border: 1px solid var(--pub-hair); background: var(--pub-pp); }

  /* ---------- dark: the line-art mark is black on transparent ---------- */
  :root[data-theme="dark"] .pl-art-mark { filter: invert(1); opacity: .82; }
  :root[data-theme="dark"] .gcard-feat-img, :root[data-theme="dark"] article > img { filter: brightness(.92); }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) article :is(input, select, textarea) { color-scheme: dark; }
  :root:not([data-theme="light"]) .pl-art-mark { filter: invert(1); opacity: .82; }
  :root:not([data-theme="light"]) .gcard-feat-img, :root:not([data-theme="light"]) article > img { filter: brightness(.92); }
}
@media print { .pl-toc-rail, .pl-side-rail, .pl-toc-m, .pl-rail-r, .pl-back-row, .pl-back-end, .pl-art-mark, [data-pl-tutorial-slot] { display: none !important; } }