/* Screen-only chrome for the web toolkit. Lives in the wrapper, never in the
   document body, so the PDF source stays untouched. All of this is hidden in print. */

@media screen {

  body { background: #fff; }

  /* Civic Media section palette, for the site chrome only. The document below
     keeps its own system — the bar is the site, the page is the document. */
  :root {
    --site-ink: #0e1c2e;
    --site-amber: #e7a12e;
    --site-muted: #9fb0c4;
    --site-line: rgba(255, 255, 255, 0.14);
    --site-mono: ui-monospace, "IBM Plex Mono", SFMono-Regular, Menlo, monospace;

    /* Main-site brand colours, for the membership banner. */
    --ffc-noir: #111319;
    --ffc-ember: #f57559;

    /* One column for the whole page. The hero, the document and the footer
       all sit in it, which is what makes their left edges agree. 52rem less
       padding leaves a ~48rem measure, matching the document's print width. */
    --col: 52rem;
    --col-pad: clamp(1.25rem, 4vw, 2rem);

    /* The nav spans wider, like every other page in the section. */
    --site-wrap: 73.75rem;
    --site-pad: clamp(1.25rem, 5vw, 4rem);

    --bar-h: 3.875rem;
  }

  .col,
  .hero,
  .shell,
  .site-footer .wrap {
    max-width: var(--col);
    margin-inline: auto;
    padding-inline: var(--col-pad);
  }

  /* The PDF cover duplicates the hero on screen, and a second h1 breaks the
     heading hierarchy. Hidden here rather than removed from the body, so the
     print source stays intact. */
  .cover { display: none; }

  /* ---------- membership banner ---------- */
  /* Ember on noir, matching the banner the main site runs. Deliberately not
     sticky: one fixed bar is enough, and the reader came here for a document. */
  .announce {
    display: flex; align-items: center; justify-content: center;
    gap: 0.6rem; flex-wrap: wrap;
    min-height: 2.5rem; padding: 0.45rem var(--site-pad);
    background: var(--ffc-ember); color: var(--ffc-noir);
    font-family: var(--ui); font-size: 0.82rem; line-height: 1.3;
    text-align: center; text-decoration: none;
  }
  .announce:hover { background: #f88268; }
  .announce-tag {
    flex: none; padding: 0.15rem 0.4rem; border-radius: 2px;
    background: var(--ffc-noir); color: var(--ffc-ember);
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .announce-text { font-weight: 600; }
  .announce-text-sm { display: none; font-weight: 600; }
  .announce-cta { text-decoration: underline; white-space: nowrap; }
  .announce:focus-visible {
    outline: 2px solid var(--ffc-noir); outline-offset: -3px;
  }

  /* The full sentence plus the call to action needs about 1280px to stay on
     one line; below that the banner grows to two or three and starts eating
     the page. Swap to the short form there, not at phone widths. */
  @media (max-width: 80rem) {
    .announce-text { display: none; }
    .announce-text-sm { display: inline; }
  }

  /* ---------- site bar ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(14, 28, 46, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--site-line);
  }
  .nav-inner {
    max-width: var(--site-wrap); margin-inline: auto;
    padding-inline: var(--site-pad); min-height: var(--bar-h);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .brand { display: flex; align-items: center; flex: none; text-decoration: none; }
  .brand-logo { width: clamp(6.5rem, 12vw, 8.75rem); height: auto; display: block; }

  .nav-links { display: flex; align-items: center; gap: 1.15rem; }
  /* Separates the section's own pages from the wider site's. */
  .nav-sep {
    width: 1px; height: 1.1rem; flex: none;
    background: var(--site-line);
  }
  .nav-links a {
    font-family: var(--site-mono); font-size: 0.74rem; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--site-muted); text-decoration: none;
    transition: color 0.15s;
  }
  .nav-links a:hover { color: #fff; }
  /* 7.4:1 on the bar. The muted grey is for the links you are not on. */
  .nav-links a[aria-current="page"] { color: #fff; }

  .menu-btn {
    display: none; background: none; border: 1px solid var(--site-line);
    color: #fff; width: 42px; height: 38px; border-radius: 2px;
    cursor: pointer; font-size: 1.1rem; line-height: 1;
  }

  /* Visible focus on the dark bar, where the document's dark ring vanishes. */
  header.nav a:focus-visible,
  .menu-btn:focus-visible {
    outline: 2px solid var(--site-amber); outline-offset: 3px; border-radius: 2px;
  }

  /* ---------- layout ---------- */
  .shell { display: block; }
  main.wrap { max-width: none; padding: 0; }

  /* Jumping to a section must not park its heading under the sticky bar —
     the reader lands looking at the paragraph after the title they clicked. */
  main.wrap [id] { scroll-margin-top: calc(var(--bar-h) + 1.25rem); }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  .hero { padding-top: 3.25rem; padding-bottom: 0.5rem; }
  /* 41 characters. At 18ch it broke into three ragged lines; 22ch is the
     narrowest measure that still lets it fall as "Exploring Public Tax /
     Collection Mechanisms", and balance evens the two rather than leaving a
     long first line and a short second. */
  .hero h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    max-width: 22ch;
    text-wrap: balance;
  }
  /* Sits between the title and the lede: bigger than body copy, quieter than
     the headline, so the three read as one block rather than three. */
  .hero .subtitle {
    font-family: var(--ui); font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.35; color: var(--muted); max-width: 34ch;
    margin: 0.65rem 0 1.1rem;
  }
  .hero .lede { font-size: 1.08rem; max-width: 60ch; }
  .hero-actions { margin: 1.5rem 0 0; }
  .hero-actions .btn { font-size: 0.9rem; padding: 0.7rem 1.1rem; }
  .hero .source-line { margin-top: 1.1rem; }

  /* ---------- contents rail ---------- */
  /* The rail duplicates the document's own Contents section a few hundred
     pixels away, so it stays out of the way until the reader has scrolled
     past the real one, then fades in as a persistent aid — enhance.js adds
     .is-visible.

     It is positioned rather than given a grid column on purpose. A reserved
     column would hold open an empty 15rem gutter at the top of the page and
     push the document off the hero's left edge, which is what made the page
     look misaligned. Floating it in the margin lets one column run straight
     down the page.

     visibility, not just opacity, so the links leave the tab order while
     hidden. A keyboard user should not tab through an invisible duplicate of
     the contents they just read. */
  .sidenav { display: none; }

  @media (min-width: 82rem) {
    .sidenav {
      display: block;
      position: fixed;
      top: calc(var(--bar-h) + 1.5rem);
      /* Right-aligned to 2rem before the column starts; never off-screen. */
      left: max(1rem, calc(50% - 39rem));
      width: 13rem;
      max-height: calc(100vh - var(--bar-h) - 3rem);
      overflow-y: auto;
      opacity: 0;
      visibility: hidden;
      transform: translateX(-0.5rem);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .sidenav.is-visible {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sidenav,
    .sidenav.is-visible { transition: none; transform: none; }
  }

  .sidenav h2 {
    font-family: var(--ui); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
    margin: 0 0 0.75rem;
  }
  .sidenav ol { list-style: none; margin: 0; padding: 0; }
  .sidenav li { margin: 0; }
  .sidenav a {
    display: block; padding: 0.35rem 0 0.35rem 0.75rem;
    border-left: 2px solid var(--rule);
    font-family: var(--ui); font-size: 0.85rem; line-height: 1.3;
    color: var(--muted); text-decoration: none;
  }
  .sidenav a:hover { color: var(--ink); border-left-color: var(--muted); }
  .sidenav a[aria-current="true"] {
    color: var(--ink); font-weight: 600; border-left-color: var(--indigo);
  }

  /* ---------- buttons ---------- */
  .btn {
    font-family: var(--ui); font-size: 0.82rem; font-weight: 600;
    padding: 0.5rem 0.9rem; border: 1px solid var(--ink); background: #fff;
    color: var(--ink); border-radius: 3px; cursor: pointer; text-decoration: none;
    display: inline-block;
  }
  .btn-primary { background: var(--lime); border-color: var(--lime); }
  .btn:hover { background: var(--paper); }
  .btn-primary:hover { background: #d7f03c; }

  /* Section rules are quieter on screen than in print. */
  .divider { margin-top: 4rem; padding-top: 2rem; }
  .divider .numeral { font-size: 2.2rem; }

  /* The contents page carries an empty numeral ( ) to hold the slot the
     numbered sections use. In print that keeps the pages aligned; on screen it
     is a blank line's worth of gap under the rule. It is aria-hidden and
     decorative, so drop it here only. */
  .contents-page .numeral { display: none; }

  /* ---------- collapsible worksheet steps ---------- */
  .step-toggle {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    font-family: var(--display); font-weight: 700; font-size: 1.35rem;
    color: var(--ink); padding: 0.6rem 0; margin-top: 1.5rem;
    border-top: 1px solid var(--rule);
  }
  .step-toggle .chev {
    flex: none; width: 0.8rem; height: 0.8rem;
    border-right: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo);
    transform: rotate(45deg); transition: transform 0.15s ease;
  }
  .step-toggle[aria-expanded="false"] .chev { transform: rotate(-45deg); }
  .step-body[hidden] { display: none; }

  /* ---------- wide content on narrow screens ---------- */
  .table-scroll { overflow-x: auto; }
  .table-scroll table { min-width: 38rem; }

  /* ---------- compact page tools ---------- */
  /* Bottom-right, out of the text column. The contents sheet is the small
     screen's answer to the side rail; the top button is for everyone, since
     this document runs to twenty-six pages and the reader can be a long way
     down with no way back that does not involve flicking. */
  .page-tools {
    position: fixed; right: clamp(0.75rem, 3vw, 1.5rem);
    bottom: clamp(0.75rem, 3vw, 1.5rem); z-index: 40;
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
  }
  .page-tools-row { display: flex; gap: 0.5rem; }

  /* A display value in a class beats the UA rule for [hidden], so both
     controls would stay on screen while "hidden". Restore it explicitly. */
  .page-tools[hidden],
  .tool-btn[hidden] { display: none; }

  .tool-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: var(--ui); font-size: 0.8rem; font-weight: 600;
    padding: 0.6rem 0.9rem; cursor: pointer;
    color: #fff; background: var(--site-ink);
    border: 1px solid var(--site-ink); border-radius: 999px;
    box-shadow: 0 2px 10px rgba(14, 28, 46, 0.22);
  }
  .tool-btn:hover { background: #17304d; }
  .tool-btn:focus-visible {
    outline: 2px solid var(--indigo); outline-offset: 2px;
  }
  .tool-btn-icon {
    padding: 0.6rem; width: 2.5rem; justify-content: center;
    font-size: 1rem; line-height: 1;
  }

  /* Three stacked bars, drawn rather than shipped as an icon font. */
  .tool-icon {
    width: 0.85rem; height: 0.6rem; flex: none;
    border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
    position: relative;
  }
  .tool-icon::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    margin-top: -1px; border-top: 2px solid currentColor;
  }

  .toc-sheet {
    background: #fff; border: 1px solid var(--rule); border-radius: 8px;
    box-shadow: 0 8px 28px rgba(14, 28, 46, 0.18);
    padding: 0.9rem 1rem; width: min(20rem, calc(100vw - 2rem));
    max-height: min(60vh, 28rem); overflow-y: auto;
  }
  .toc-sheet-title {
    font-family: var(--ui); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
    margin: 0 0 0.5rem;
  }
  .toc-sheet ol { list-style: none; margin: 0; padding: 0; }
  .toc-sheet li { margin: 0; }
  .toc-sheet a {
    display: block; padding: 0.5rem 0; line-height: 1.3;
    font-family: var(--ui); font-size: 0.88rem;
    color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--rule);
  }
  .toc-sheet li:last-child a { border-bottom: none; }
  .toc-sheet a:hover { color: var(--indigo); }

  /* The rail already does this job where it fits, so the sheet button only
     appears where it does not. The top button is not conditional. */
  @media (min-width: 82rem) {
    .page-tools [data-toc-toggle],
    .page-tools .toc-sheet { display: none; }
  }

  .to-top-link { margin-top: 1.5rem; }
  .to-top-link a { font-family: var(--ui); font-size: 0.85rem; color: var(--muted); }

  /* ---------- footer ---------- */
  .site-footer {
    margin-top: 5rem; border-top: 3px solid var(--indigo);
    background: var(--sand);
  }
  .site-footer .wrap { padding-block: 2.5rem 3rem; }
  .site-footer h2 { font-size: 1.4rem; margin-top: 0; }

  /* ---------- the bar on small screens ---------- */
  /* Collapsed only once enhance.js has wired the button. Without JS the links
     stay visible and wrap, rather than hiding behind a control that does
     nothing. */
  @media (max-width: 60rem) {
    header.nav.has-toggle .nav-links {
      display: none;
      position: absolute; left: 0; right: 0; top: 100%;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--site-ink);
      border-bottom: 1px solid var(--site-line);
      padding: 0.25rem var(--site-pad) 1rem;
    }
    header.nav.has-toggle .nav-links.open { display: flex; }
    header.nav.has-toggle .nav-links a { padding: 0.75rem 0; }
    header.nav.has-toggle .nav-cta {
      margin-top: 0.75rem; text-align: center; padding: 0.7em 1em;
    }
    header.nav.has-toggle .menu-btn { display: inline-flex;
      align-items: center; justify-content: center; }
    /* Stacked, the vertical divider becomes a rule between the two groups. */
    header.nav.has-toggle .nav-sep {
      width: auto; height: 1px; align-self: stretch; margin: 0.5rem 0;
    }

    .nav-links { flex-wrap: wrap; gap: 0.5rem 1.1rem; }
  }

  @media (max-width: 40rem) {
    .hero { padding-top: 2.25rem; }
    .divider { margin-top: 2.75rem; padding-top: 1.5rem; }
    /* Full-width so the tap target does not depend on the label's length. */
    .site-footer .btn { display: block; text-align: center; }
  }
}

@media print {
  /* Everything the wrapper adds must disappear. Printing the web page has to
     produce the document, not the page: the hero carries cohort framing and a
     second h1, and the buttons are chrome. Only the injected body survives. */
  .announce,
  header.nav,
  .menu-btn,
  .sidenav,
  .page-tools,
  .site-footer,
  .hero,
  .btn,
  .skip-link { display: none !important; }

  /* The cover is hidden on screen; it must come back in print. */
  .cover { display: block !important; }

  .shell { display: block; }
  .step-body[hidden] { display: block !important; }
  .step-toggle { border: none; }
  .step-toggle .chev { display: none; }
}