/*!
 * Work Lawyers: article refresh (loads after main.css and overrides it)
 *
 * CONTENTS
 *  0. Base adjustments
 *  1. Centered article header + full-bleed hero
 *  2. Byline (mobile-only) + retired "lede" style
 *  3. Sidebar layout
 *  4. Side cards: author, consultation, "On this page"
 *  5. Copy-link button
 *  6. Heading copy controls (h2 banners + icon, h3 number chips)
 *  7. Tooltips
 *  8. CTA banner + article bottom
 *  9. Tables
 * 10. Small-screen overflow hardening
 * 11. Back to top
 * 12. Print
 */

/* ------------------------------------------------------------------
   0. BASE ADJUSTMENTS
------------------------------------------------------------------ */
body { line-height: 1.5; }

/* The header's consultation button: main.css's generic nav hover
   color (.nav a:hover) outranks the button's own hover rule, turning
   the label brand-deep on a brand-deep background. Reassert the
   label at higher specificity, for hover and keyboard focus alike. */
.nav a.btn:hover,
.nav a.btn:focus-visible { color: #fff; }

/* ------------------------------------------------------------------
   1. CENTERED ARTICLE HEADER + FULL-BLEED HERO
------------------------------------------------------------------ */
.article-header--centered {
  text-align: center;
  padding-block: var(--s-8) 0;
}
.article-header--centered .wrap { padding-bottom: var(--s-7); }
.article-header--centered h1 {
  font-size: var(--text-3xl);
  max-width: 62rem;
  margin: 0 auto var(--s-4);
  text-wrap: balance;
}
.article-header--centered .dek {
  font-size: var(--text-l);
  color: var(--ink-2);
  max-width: 46rem;
  margin: 0 auto;
  text-wrap: pretty;
}

/* The illustration runs edge to edge; no page cap, no side gaps. */
.article-hero { line-height: 0; }
.article-hero__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   2. BYLINE & LEDE
------------------------------------------------------------------ */
/* The horizontal byline serves narrow screens only; on wide screens
   the same information lives in the sidebar. */
@media (min-width: 72em) {
  .byline--mobile { display: none; }
}
.byline--mobile {
  align-items: center;
  justify-content: space-between;
  row-gap: var(--s-3);
}
.byline--mobile dl { margin: 0; }
.byline--mobile .byline__author { min-width: 0; }

/* The .lede paragraph treatment is retired theme-wide. Old markup can
   keep the class; it now renders as ordinary body copy. */
.prose .lede {
  font-size: inherit;
  color: inherit;
}

/* ------------------------------------------------------------------
   3. SIDEBAR LAYOUT
------------------------------------------------------------------ */
.article-sidebar { display: none; }

@media (min-width: 72em) {
  .article-layout.article-layout--sidebar {
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: var(--s-8);
    /* No align-items: start here. The sidebar column must stretch to
       the full row height; a sticky child can only travel within its
       parent, so a content-height sidebar leaves it nowhere to go. */
  }

  .article-sidebar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-5);
    padding-block: var(--s-6) var(--s-8);
    font-size: var(--text-s);
  }

  /* Prose fills its column instead of floating in the page center;
     the reading measure widens a step now that the sidebar balances
     the line. */
  .article-layout--sidebar .prose { max-width: none; margin-inline: 0; min-width: 0; }
  .article-layout--sidebar .prose > * { max-width: 44rem; margin-inline: 0; }
  .article-layout--sidebar .prose > .breakout { max-width: none; }
  .article-layout--sidebar .prose .toc { max-width: 44rem; margin-inline: 0; }
  .article-layout--sidebar .prose > .references { max-width: 44rem; margin-inline: 0; }
}

/* ------------------------------------------------------------------
   4. SIDE CARDS
------------------------------------------------------------------ */
.side-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-m);
  background: var(--mist);
  padding: var(--s-5);
}

/* Author card: same chrome as the consultation card. */
.side-card--author { text-align: center; }
.side-card__avatar {
  display: block;
  width: 4.75rem;
  height: 4.75rem;
  margin: 0 auto var(--s-3);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}
.side-card__name {
  display: block;
  font-weight: 700;
  font-size: var(--text-m);
  line-height: 1.3;
}
.side-card__name a { color: inherit; text-decoration: none; }
.side-card__name a:hover { color: var(--brand-deep); }
.side-card__role { display: block; color: var(--ink-3); }
.side-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  border-block: 1px solid var(--rule-strong);
  padding-block: var(--s-4);
  margin-block: var(--s-4);
}
.side-meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.side-meta dd { margin: 0; font-weight: 500; }

/* Consultation card (static; the chapter card is the sticky one). */
.side-card--consult { text-align: center; }
.side-card__logo svg,
.side-card__logo img {
  display: block;
  max-width: 10rem;
  height: auto;
  margin-inline: auto;
}
.side-card__hook {
  color: var(--ink-2);
  font-weight: 500;
  margin: var(--s-4) 0;
  padding-block: var(--s-4);
  border-block: 1px solid var(--rule-strong);
  text-wrap: pretty;
}
.side-card__points {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  gap: var(--s-3);
  text-align: left;
}
.side-card__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  line-height: 1.45;
}
.side-card__points svg {
  flex: none;
  color: var(--brand);
  margin-top: 0.1em;
}
.side-card__points em { font-style: italic; font-weight: 700; }
.side-card__cta {
  display: block;
  width: 100%;
  text-align: center;
}

/* "On this page" card: sticky, never taller than the viewport. */
.side-card--toc { padding: var(--s-5) var(--s-4) var(--s-4); }
@media (min-width: 72em) {
  .side-card--toc {
    position: sticky;
    top: calc(var(--header-h) + 1.25rem);
    max-height: calc(100vh - var(--header-h) - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.toc-rail h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 var(--s-3);
  padding-inline: 0.5rem;
}
.toc-rail ol { list-style: none; margin: 0; padding: 0; }
.toc-rail__ch { border-top: 1px solid var(--rule); }
.toc-rail__ch:first-child { border-top: 0; }

/* Grid gives every entry a hanging indent: wrapped title lines align
   under the title's first letter, never under the number. */
.toc-rail a {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 0.35rem;
  align-items: baseline;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-s);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
}
.toc-rail__chlink { font-weight: 500; color: var(--ink); }
.toc-rail__no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brand);
}
.toc-rail a:hover { background: var(--mist-2); color: var(--brand-deep); }
.toc-rail a.is-active {
  background: var(--paper);
  box-shadow: inset 2px 0 0 var(--brand);
  color: var(--brand-deep);
  font-weight: 650;
}
.toc-rail a.is-parent { color: var(--brand-deep); font-weight: 650; }

.toc-rail__secs {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0 0 0 0.65rem;
  display: none;
}
.toc-rail__ch.is-open > .toc-rail__secs { display: block; }
.toc-rail__seclink { padding-block: 0.3rem; }

/* ------------------------------------------------------------------
   5. COPY-LINK BUTTON
------------------------------------------------------------------ */
.copy-link.btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 1.1em;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--brand-deep);
  font: inherit;
  font-size: var(--text-s);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.copy-link.btn-copy:hover { background: var(--wash); }
.copy-link.btn-copy:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
}
.copy-link.btn-copy svg { width: 1em; height: 1em; }
.copy-link.btn-copy.is-copied {
  border-color: var(--ok);
  color: var(--ok);
}
.copy-link.btn-copy.is-copied .btn-copy__label { display: none; }
.copy-link.btn-copy.is-copied::after { content: attr(data-copied); }
.side-card .copy-link.btn-copy { width: 100%; }

/* ------------------------------------------------------------------
   6. HEADING COPY CONTROLS
------------------------------------------------------------------ */
/* Chapters (h2): a link icon, faintly visible at rest. */
.anchor-copy { opacity: 0.4; }
.anchor-copy svg {
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.02em;
}
.prose :is(h2, h3, h4):hover .anchor-copy,
.anchor-copy:hover,
.anchor-copy:focus-visible { opacity: 1; }

/* Chapter titles as banners: a mist band with a brand accent bar.
   Scoped to the class the structure filter adds, so the contents and
   References headings keep their own styling. */
.prose h2.chapter-title {
  background: var(--mist);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: var(--s-4) var(--s-5);
  margin: var(--s-8) 0 var(--s-5);
}
.prose h2.chapter-title::before {
  font-weight: 700;
  margin-bottom: 0.3em;
}

/* Sections (h3): the number chip is the copy control, in its own
   grid column to the left of the title. Wrapped title lines
   hang-indent under the first line of the title, and the chip
   centers vertically against the text. The mono ::before prefix is
   dropped on screen; print keeps it (chips are hidden there) and the
   same grid gives print a hanging indent too. */
@media screen {
  .prose h3::before { content: none; }
}
.prose h3.section-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.6em;
  align-items: center;
}
.prose h3.section-title .section-title__t { min-width: 0; }
.prose h3 .anchor-copy--sec {
  opacity: 1;
  margin: 0;
  padding: 0.45em 0.55em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-s);
  background: var(--mist);
  color: var(--brand-deep);
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.prose h3 .anchor-copy--sec .anchor-copy__no::before {
  content: counter(chapter) "." counter(section) ".";
}
.prose h3 .anchor-copy--sec:hover,
.prose h3 .anchor-copy--sec:focus-visible {
  background: var(--wash);
  border-color: var(--brand);
}
.anchor-copy--sec.is-copied::after { font-size: inherit; }

/* Calculator h3s sit outside the chapter numbering; no chips there. */
.prose .calc .anchor-copy { display: none; }

/* ------------------------------------------------------------------
   7. TOOLTIPS
   Copy controls explain themselves on hover/focus. The tooltip uses
   ::before; the "Copied" confirmation keeps ::after.
------------------------------------------------------------------ */
[data-tip] { position: relative; }
[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translate(-50%, 2px);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.35;
  white-space: nowrap;
  padding: 0.4em 0.7em;
  border-radius: var(--radius-s);
  box-shadow: 0 2px 10px rgba(12, 24, 33, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s;
  z-index: 40;
}
[data-tip]:hover::before,
[data-tip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* Number chips sit at the line start; anchor their tooltip left so
   it never clips off the edge of the column. */
.anchor-copy--sec[data-tip]::before {
  left: 0;
  right: auto;
  transform: translate(0, 2px);
}
.anchor-copy--sec[data-tip]:hover::before,
.anchor-copy--sec[data-tip]:focus-visible::before { transform: translate(0, 0); }
/* While "Copied" is showing, the tooltip stands down. */
[data-tip].is-copied::before { content: none; }
@media (hover: none) {
  [data-tip]::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-tip]::before { transition: none; }
}

/* Footnote popover: the note itself is the payload, so the "See in
   references" jump link is retired. A tail on the top edge points up
   at the marker that opened it (the popover always opens below the
   marker); the refresh script sets --fn-tail-x to the marker's
   horizontal position within the popover. */
.fn-popover__go { display: none; }
.fn-popover::before,
.fn-popover::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: var(--fn-tail-x, 1.5rem);
  transform: translateX(-50%);
  border: solid transparent;
  border-top: 0;
  pointer-events: none;
}
.fn-popover::before {
  border-width: 0 9px 9px;
  border-bottom-color: var(--rule-strong);
}
.fn-popover::after {
  border-width: 0 8px 8px;
  border-bottom-color: var(--paper);
  bottom: calc(100% - 1px);
}
/* The bubble settles into place from the marker above it. */
.fn-popover { animation: wl-pop-in 0.18s var(--ease); }
@keyframes wl-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fn-popover { animation: none; }
}

/* ------------------------------------------------------------------
   8. CTA BANNER + ARTICLE BOTTOM
------------------------------------------------------------------ */
/* Check marks instead of section signs for the banner bullets. */
.cta-banner li { align-items: flex-start; }
.cta-banner li::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231098f7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Breathing room below the banner, and the article closes with the
   same hairline rule its other dividers use. */
.single .cta-banner { margin-bottom: var(--s-8); }
.single main > article { border-bottom: 1px solid var(--rule); }

/* ------------------------------------------------------------------
   9. TABLES
------------------------------------------------------------------ */
/* Column headings wrap to as many lines as they need, and cell text
   centers, numeric cells included; the table's caption (its main
   heading) keeps the left alignment. */
.prose .table th,
.prose .table td {
  text-align: center;
  vertical-align: middle;
}
.prose .table th { white-space: normal; }
.prose .table [data-num] { text-align: center; }
.prose .table caption { text-align: left; }

/* ------------------------------------------------------------------
   10. SMALL-SCREEN OVERFLOW HARDENING
   Long citation URLs and wide media must never widen the page.
------------------------------------------------------------------ */
html,
body { overflow-x: clip; }
.prose { overflow-wrap: break-word; }
.prose a { overflow-wrap: anywhere; }
.references .fn-text { overflow-wrap: anywhere; min-width: 0; }
.prose img { max-width: 100%; height: auto; }
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fn-popover { max-width: calc(100vw - 24px); }

/* Containment below the sidebar breakpoint: no container in the
   article chain may lay out wider than the screen, and the layout
   grid is pinned to a single safe column, whatever any other rule
   (or a corrupted copy of one) says. */
@media (max-width: 71.99em) {
  main,
  article,
  .article-layout,
  .prose {
    max-width: 100%;
    min-width: 0;
  }
  .article-layout,
  .article-layout.article-layout--sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
  .prose > * {
    width: auto;
    min-width: 0;
    max-width: min(var(--measure), 100%);
  }
  .prose > .breakout { max-width: 100%; }
}

/* ------------------------------------------------------------------
   11. BACK TO TOP
------------------------------------------------------------------ */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--brand-deep);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(12, 24, 33, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover { background: var(--wash); border-color: var(--brand); }
.to-top:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* ------------------------------------------------------------------
   12. PRINT
------------------------------------------------------------------ */
@media print {
  .article-sidebar,
  .to-top,
  .copy-link.btn-copy { display: none !important; }
}