/*
 * painfix.css — site design layer.
 * Loaded after assets/css/styles.css (SB UI Kit Pro). Uses only the kit's own
 * palette: blue #0061f2, purple #6900c7, teal #00ba94, ink #212832, light #f2f6fc.
 * Nothing in styles.css is modified, so the kit can still be updated in place.
 */

:root {
  --pf-ink: #212832;
  --pf-body: #3d4757;
  --pf-muted: #69707a;
  --pf-line: #e2e8f3;
  --pf-light: #f2f6fc;
  --pf-blue: #0061f2;
  --pf-purple: #6900c7;
  --pf-teal: #00ba94;
  /* Teal is too light for text on white; this is the AA-safe reading weight. */
  --pf-teal-ink: #007f68;
  --pf-teal-bright: #6fe3cd;
  --pf-rail: linear-gradient(180deg, var(--pf-teal) 0%, var(--pf-blue) 100%);
}

body {
  color: var(--pf-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- type ---
   The kit ships Metropolis. Everything here is weight, tracking and measure:
   headings tighten, body text opens up. The audience skews older and is often
   reading in discomfort, so nothing drops below 1rem. */

h1, h2, h3, h4, h5, h6, .pf-display {
  color: var(--pf-ink);
  letter-spacing: -0.021em;
}

.pf-display {
  font-weight: 800;
  line-height: 1.06;
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
}

.pf-h2 {
  font-weight: 800;
  line-height: 1.14;
  font-size: clamp(1.85rem, 3.1vw, 2.6rem);
}

.pf-h3 {
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.35rem;
}

.pf-lead {
  font-size: clamp(1.075rem, 1.55vw, 1.28rem);
  line-height: 1.66;
  color: var(--pf-body);
}

.pf-measure { max-width: 40rem; }
.pf-measure-wide { max-width: 52rem; }

/* ------------------------------------------------------------- eyebrow ---
   The site's signature mark: a short gradient rail beside a spaced label.
   It opens every section, so a reader can tell at a glance what kind of block
   they have landed in. Reused on cards, hero, and the article header. */

.pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--pf-teal-ink);
}

.pf-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 1.3em;
  border-radius: 2px;
  background: var(--pf-rail);
}

.pf-eyebrow-light { color: var(--pf-teal-bright); }
.pf-eyebrow-light::before {
  background: linear-gradient(180deg, var(--pf-teal-bright) 0%, #7fb2ff 100%);
}

/* ---------------------------------------------------------------- hero ---
   Full-bleed photograph under a blue-to-purple wash, so the brand gradient is
   still doing the work but over a real image instead of flat colour. */

.pf-hero {
  position: relative;
  isolation: isolate;
  background-color: #0a1836;
}

.pf-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/photos/hero-shoreline-sm.jpg");
  background-size: cover;
  background-position: 50% 46%;
}

@media (min-width: 768px) {
  .pf-hero-media { background-image: url("../img/photos/hero-shoreline.jpg"); }
}

/* Two layers: the brand wash across, plus a dark floor top and bottom so the
   photograph keeps its contrast instead of going milky under the colour. */
.pf-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(6, 12, 30, 0.55) 0%,
      rgba(6, 12, 30, 0.05) 40%,
      rgba(6, 12, 30, 0.45) 100%),
    linear-gradient(100deg,
      rgba(8, 16, 38, 0.94) 0%,
      rgba(10, 28, 78, 0.88) 34%,
      rgba(40, 10, 96, 0.72) 68%,
      rgba(58, 12, 118, 0.56) 100%);
}

.pf-hero-inner {
  padding-top: 9.5rem;
  padding-bottom: 6.5rem;
}

@media (min-width: 992px) {
  .pf-hero-inner {
    padding-top: 12.5rem;
    padding-bottom: 9rem;
  }
}

.pf-hero .pf-display { color: #fff; }

.pf-hero-text {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.075rem, 1.5vw, 1.25rem);
  line-height: 1.66;
}

/* Wayfinding strip along the bottom of the hero: three routes into the site,
   not statistics. Sits on the gradient, above the SVG border. */

.pf-hero-routes {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 3.25rem;
  padding-top: 1.75rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .pf-hero-routes { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.pf-route {
  display: block;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  border-left: 2px solid rgba(255, 255, 255, 0.18);
  padding-left: 1rem;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.pf-route strong {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 1.03rem;
  margin-bottom: 0.2rem;
}

.pf-route span { font-size: 0.92rem; line-height: 1.5; display: block; }

.pf-route:hover,
.pf-route:focus-visible {
  color: rgba(255, 255, 255, 0.95);
  border-left-color: var(--pf-teal-bright);
}

/* --------------------------------------------------------------- cards ---
   One card component for articles, topics and plans. The rail in the body
   grows on hover — the eyebrow mark, animated. */

.pf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: 0.5rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.pf-card:hover,
a.pf-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 1.25rem 2.25rem rgba(33, 40, 50, 0.11);
  border-color: #cbd9f0;
  color: inherit;
}

.pf-card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--pf-light);
}

.pf-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

a.pf-card:hover .pf-card-media img { transform: scale(1.045); }

.pf-card-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1.4rem 1.5rem 1.25rem;
}

.pf-card-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 3px;
  height: 0;
  border-radius: 0 2px 2px 0;
  background: var(--pf-rail);
  transition: height 0.3s ease;
}

a.pf-card:hover .pf-card-body::before,
a.pf-card:focus-visible .pf-card-body::before { height: 2.2rem; }

.pf-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pf-ink);
  margin-bottom: 0.55rem;
}

.pf-card-text {
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--pf-muted);
  margin-bottom: 0;
}

.pf-card-foot {
  padding: 0 1.5rem 1.35rem;
  font-size: 0.8rem;
  color: var(--pf-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The foot of a card that leads somewhere now, rather than carrying a date.
   Larger and in the action colour, because it is the difference between a plan
   you can use and one that is still being written. */
.pf-card-cta {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pf-blue);
}

/* Category badge, sat on the photo */
.pf-badge {
  display: inline-block;
  padding: 0.34rem 0.7rem;
  border-radius: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: rgba(10, 20, 45, 0.82);
  color: #fff;
  backdrop-filter: blur(4px);
}

.pf-badge-on-media {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 1;
}

.pf-badge-quiet {
  background: var(--pf-light);
  color: var(--pf-teal-ink);
}

/* --------------------------------------------------------- page header ---
   Inner pages get a real title band rather than the empty gradient sliver the
   article and index pages used to sit under. */

.pf-page-header {
  position: relative;
  background-color: #0d1c40;
  background-image: linear-gradient(100deg, #0a1838 0%, #131a4e 42%, #2b0a63 100%);
}

.pf-page-header-inner {
  padding-top: 8.5rem;
  padding-bottom: 4rem;
}

@media (min-width: 992px) {
  .pf-page-header-inner { padding-top: 10.5rem; padding-bottom: 5rem; }
}

.pf-page-header h1 {
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(2.05rem, 3.6vw, 3rem);
  margin-bottom: 0.85rem;
}

.pf-page-header p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.06rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ------------------------------------------------------------- article ---
   Reading column. Long-form on a health site earns generous measure and size. */

.pf-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.75);
}

.pf-prose {
  font-size: 1.145rem;
  line-height: 1.78;
  color: var(--pf-body);
}

.pf-prose p { margin-bottom: 1.35rem; }
.pf-prose > *:last-child { margin-bottom: 0; }

.pf-prose h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 2.6rem 0 0.9rem;
}

.pf-prose h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2rem 0 0.7rem;
}

/* Underlined, not colour-only: articles carry a lot of source links and colour
   alone is not enough to mark them. */
.pf-prose a {
  color: var(--pf-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(0, 97, 242, 0.4);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.pf-prose a:hover,
.pf-prose a:focus-visible {
  color: #0049b8;
  text-decoration-color: currentColor;
}

/* Links that open in a new tab say so. Losing the back button unannounced is
   disorienting, and this readership leans on it. Delete this rule if the
   articles ever stop using target="_blank". */
.pf-prose a[target="_blank"]::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.18em;
  font-size: 0.78em;
  line-height: 1;
  text-decoration: none;
  vertical-align: 0.12em;
  opacity: 0.65;
}

.pf-prose ul, .pf-prose ol { margin-bottom: 1.35rem; padding-left: 1.3rem; }
.pf-prose li { margin-bottom: 0.45rem; }
.pf-prose li::marker { color: var(--pf-teal-ink); }
.pf-prose li > ul, .pf-prose li > ol { margin: 0.5rem 0 0; }

.pf-prose strong { color: var(--pf-ink); font-weight: 700; }

/* Pull quote: the section rail turned on its side and scaled up. Used to lift
   a line the article already makes, not to repeat one. */
.pf-prose blockquote {
  margin: 2.4rem 0;
  padding: 0.35rem 0 0.35rem 1.6rem;
  border-left: 3px solid transparent;
  border-image: var(--pf-rail) 1;
  font-size: 1.28rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--pf-ink);
  letter-spacing: -0.012em;
}

.pf-prose blockquote p { margin-bottom: 0.6rem; }
.pf-prose blockquote > *:last-child { margin-bottom: 0; }

.pf-prose blockquote cite {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.88rem;
  font-weight: 500;
  font-style: normal;
  color: var(--pf-muted);
}

.pf-prose hr {
  margin: 2.8rem 0;
  border: 0;
  border-top: 1px solid var(--pf-line);
  opacity: 1;
}

.pf-prose figure { margin: 2.2rem 0; }
.pf-prose figure img { width: 100%; height: auto; border-radius: 0.4rem; }

.pf-prose figcaption {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--pf-muted);
}

/* Tables scroll inside their own box rather than widening the page. */
.pf-prose .pf-table-scroll {
  overflow-x: auto;
  margin-bottom: 1.6rem;
  -webkit-overflow-scrolling: touch;
}

.pf-prose table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 1rem;
  margin-bottom: 0;
}

.pf-prose th,
.pf-prose td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--pf-line);
  vertical-align: top;
}

.pf-prose th {
  color: var(--pf-ink);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom-width: 2px;
}

/* A row header is a label, not a column heading — the uppercase micro-type above
   would drop it under the 1rem body-copy floor. It also does not wrap: these are
   two or three words naming the row, and breaking "Hands and wrists" over two
   lines beside a half-empty cell reads as damage. Keep row headers short enough
   for that to hold — the table scrolls in its own box either way. */
.pf-prose tbody th {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-bottom-width: 1px;
  white-space: nowrap;
}

/* A callout inside the reading column. Same component as the page-level note. */
.pf-prose .pf-note { margin: 2rem 0; }

/* --------------------------------------------------------- next in series ---
   Foot-of-article link to the next part. The rail again, so a continuation
   reads as the same kind of signpost as a section opener. */

.pf-next {
  display: block;
  margin-top: 2.75rem;
  padding: 0.15rem 0 0.15rem 1.1rem;
  border-left: 3px solid transparent;
  border-image: var(--pf-rail) 1;
  text-decoration: none;
}

.pf-next-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pf-teal-ink);
  margin-bottom: 0.35rem;
}

.pf-next-title {
  display: block;
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pf-ink);
  letter-spacing: -0.015em;
}

.pf-next-title::after {
  content: "→";
  margin-left: 0.4em;
  color: var(--pf-blue);
}

.pf-next:hover .pf-next-title,
.pf-next:focus-visible .pf-next-title {
  color: var(--pf-blue);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Note / disclaimer block — the rail again, turned on its side */
.pf-note {
  border-left: 3px solid transparent;
  border-image: var(--pf-rail) 1;
  background: var(--pf-light);
  padding: 1.15rem 1.35rem;
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--pf-body);
}

.pf-note strong { color: var(--pf-ink); }

/* On a dark band the standard --pf-light panel reads as a white slab. Drop in a
   25% tint of the kit blue instead, so it sits in the section and picks up the
   palette; the body colour still clears 5.5:1 on this. */
.bg-dark .pf-note { background: #c0d8fc; }

/* Ad slot — what [ad:N] in an article body renders as. Deliberately unlike the
   editorial furniture around it: no gradient rail, a panel that reads as a
   card rather than a callout, and a Sponsored label that is the first thing
   announced. The whole panel is the link, so the target is the box and not a
   phrase inside it. */
.pf-ad {
  display: block;
  margin: 2.6rem 0;
  padding: 1.3rem 1.45rem;
  background: var(--pf-light);
  border: 1px solid var(--pf-line);
  border-radius: 0.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* .pf-prose a sets a blue underline on every link in the reading column; the
   box is a panel, not a phrase, so it opts out of all of it. */
.pf-prose a.pf-ad,
.pf-prose a.pf-ad:hover,
.pf-prose a.pf-ad:focus-visible {
  color: inherit;
  text-decoration: none;
}

a.pf-ad:hover,
a.pf-ad:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(33, 40, 50, 0.11);
  border-color: #cbd9f0;
}

.pf-ad-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin-bottom: 0.5rem;
}

.pf-ad-title {
  display: block;
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--pf-ink);
  margin-bottom: 0.45rem;
}

/* 1rem is the body-copy floor for this readership, ad copy included. */
.pf-ad-text {
  display: block;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--pf-body);
}

.pf-ad-arrow {
  color: var(--pf-blue);
  white-space: nowrap;
}

a.pf-ad:hover .pf-ad-title,
a.pf-ad:focus-visible .pf-ad-title { color: var(--pf-blue); }

/* The prose rule marks every new-tab link with a trailing ↗. The box carries
   its own arrow in .pf-ad-cta, so it must not get a second one. */
.pf-prose a.pf-ad[target="_blank"]::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .pf-ad { transition: none; }
  a.pf-ad:hover,
  a.pf-ad:focus-visible { transform: none; }
}

/* ------------------------------------------------------- misc / layout ---*/

.pf-section { padding: 5rem 0; }

@media (min-width: 992px) {
  .pf-section { padding: 6.5rem 0; }
}

.pf-section-light { background: var(--pf-light); }

/* The title band already carries the top of the page; the section under it
   does not need a full stack of padding as well. */
.pf-page-header + section.pf-section { padding-top: 4rem; }

@media (min-width: 992px) {
  .pf-page-header + section.pf-section { padding-top: 5rem; }
}

.pf-rule {
  height: 3px;
  width: 3.25rem;
  border-radius: 2px;
  background: var(--pf-rail);
}

/* Two-up card layout wants a shallower crop than the three-up grid. */
.pf-card-wide .pf-card-media { aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------- pager ---*/

/* Sits under the article grid. The targets are deliberately larger than the
   kit's default: the audience skews older and often reads on a phone in
   discomfort, so nothing here goes below 1rem or 44px of tap area. */
.pf-pager {
  margin-top: 3.5rem;
  text-align: center;
}

.pf-pager .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
}

.pf-pager .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--pf-line);
  border-radius: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pf-ink);
  background: #fff;
}

.pf-pager .page-link:hover {
  border-color: var(--pf-blue);
  color: var(--pf-blue);
  background: var(--pf-light);
}

.pf-pager .page-item.active .page-link {
  border-color: var(--pf-blue);
  background: var(--pf-blue);
  color: #fff;
}

.pf-pager .pf-pager-gap .page-link {
  border-color: transparent;
  background: none;
  color: var(--pf-muted);
  min-width: 1.5rem;
  padding-left: 0;
  padding-right: 0;
}

.pf-pager-count {
  margin: 1rem 0 0;
  font-size: 1rem;
  color: var(--pf-muted);
}

.pf-status {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pf-muted);
}

.pf-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pf-teal);
}

.pf-status-planned::before { background: #c3ccdb; }

/* Footer polish over the kit's footer-light */
.footer .pf-footer-brand {
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--pf-ink);
  letter-spacing: -0.02em;
}

.footer .pf-footer-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pf-ink);
  margin-bottom: 1rem;
}

/* Text sitting on the dark bands. White at full strength is too harsh for
   body copy, so these are the two steps down that stay above 4.5:1. */
.pf-on-dark { color: rgba(255, 255, 255, 0.78); }
.pf-on-dark-soft { color: rgba(255, 255, 255, 0.68); }
.pf-ink { color: var(--pf-ink); }

.pf-icon-sm {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}

/* ------------------------------------------------------------ a11y ------*/

a:focus-visible,
button:focus-visible,
.pf-card:focus-visible {
  outline: 3px solid var(--pf-teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ------------------------------------------------------------ plan sheet ---
   A plan page is meant to be taken away on paper, so printing it
   is a feature rather than an afterthought. Everything the reader needs on the
   fridge goes inside .pf-sheet; screen-only furniture is marked .pf-no-print.

   The chrome is removed with display:none rather than hidden, because a hidden
   element still takes its space and the sheet would print after a page of
   blank. That means the chrome has to be named: anything added to every page
   from here on needs adding to the list too, or it will turn up on the paper. */

.pf-print-only { display: none; }

.pf-sheet-source {
  font-size: 9pt;
  color: var(--pf-muted);
}

/* Movement diagrams. Line art of one seated figure, drawn inline by the plan
   section so the arm positions are the only thing that varies. The limbs take
   the accent colour and the chair recedes, so what a reader sees first is the
   part that moves. */

.pf-moves {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin: 1.5rem 0 2rem;
}

@media (min-width: 576px) {
  .pf-moves { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.75rem; }
}

/* Beats the 2.2rem `.pf-prose figure` margin — inside the grid the gap does
   that spacing, and doubling the two put a blank band between the rows. */
.pf-prose .pf-move { margin: 0; }

.pf-move svg.pf-tc {
  display: block;
  width: 100%;
  height: auto;
  background: var(--pf-light);
  border-radius: 0.4rem;
  color: var(--pf-ink);
}

.pf-tc-body,
.pf-tc-chair,
.pf-tc-arm,
.pf-tc-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-tc-body { stroke-width: 3; }
.pf-tc-chair { stroke-width: 2; opacity: 0.38; }
.pf-tc-arm { stroke: var(--pf-teal-ink); stroke-width: 4; }
.pf-tc-hand { fill: var(--pf-teal-ink); stroke: none; }

.pf-tc-arrow path { stroke-width: 2.5; opacity: 0.5; }
.pf-tc-arrow polygon { fill: currentColor; opacity: 0.5; }

/* Fill-in worksheet. The printed page is mostly the reader's own writing space,
   so the rules here are really about one thing: a line you can write on with a
   biro, at a height that suits handwriting that is not always steady. Nothing
   below 7mm on paper. */

.pf-fill {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}

@media (min-width: 576px) {
  .pf-fill { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}

.pf-prose .pf-fill-box {
  margin: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--pf-line);
  border-radius: 0.4rem;
}

.pf-prose .pf-fill-box h2 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
}

.pf-prose .pf-fill-prompt {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  color: var(--pf-muted);
}

.pf-fill-lines span {
  display: block;
  height: 2rem;
  border-bottom: 1px solid var(--pf-line);
}

.pf-prose .pf-fill-help {
  margin: 0.9rem 0 0;
  font-size: 1rem;
  color: var(--pf-muted);
}

/* The red flags are the most important sentences on the sheet; they do not get
   the shrunken treatment secondary text elsewhere gets. */
.pf-prose .pf-fill-box ul { margin-bottom: 0.9rem; }

.pf-prose .pf-fill-intro { margin-bottom: 0.5rem; }

.pf-fill-date {
  display: inline-block;
  white-space: nowrap;
  color: var(--pf-muted);
}

.pf-fill-blank {
  display: inline-block;
  width: 9rem;
  border-bottom: 1px solid var(--pf-line);
}

.pf-move figcaption { margin-top: 0.7rem; }

.pf-move figcaption strong {
  display: block;
  color: var(--pf-ink);
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.pf-move-do {
  display: block;
  color: var(--pf-body);
  line-height: 1.55;
}

.pf-prose .pf-move p {
  margin: 0.6rem 0 0;
  font-size: 0.98rem;
  color: var(--pf-muted);
}

@media print {
  @page { margin: 12mm; }

  .navbar,
  .pf-page-header,
  .footer,
  .visually-hidden-focusable,
  .pf-no-print { display: none !important; }

  .pf-print-only { display: block; }

  /* The page tint behind the white sections is a whole sheet of ink if the
     content ever spills onto a second page. */
  html, body { background: #fff !important; }

  /* The sheet is the page, so the section rhythm and the grid that centre it on
     screen are flattened out from around it — the paper margin is @page's job. */
  .pf-section { padding: 0 !important; }
  .container { max-width: none !important; padding: 0 !important; }
  .row { margin: 0 !important; }
  [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }

  .pf-sheet {
    width: 100%;
    max-width: none;
    padding: 0;
    font-size: 10pt;
    line-height: 1.36;
    color: #000;
  }

  .pf-sheet h2 {
    font-size: 11.5pt;
    margin: 0.7em 0 0.25em;
    page-break-after: avoid;
  }

  .pf-sheet p, .pf-sheet li { margin-bottom: 0.22em; }
  .pf-sheet ul, .pf-sheet ol { margin-bottom: 0.5em; padding-left: 1.1em; }
  .pf-sheet .pf-sheet-source { margin-bottom: 0.9em; color: #444; }

  .pf-sheet .pf-table-scroll {
    overflow: visible;
    margin-bottom: 0.6em;
  }

  .pf-sheet table {
    min-width: 0;
    font-size: 9pt;
    page-break-inside: avoid;
  }

  .pf-sheet th, .pf-sheet td {
    padding: 0.12em 0.5em;
    border-bottom: 1px solid #bbb;
  }

  .pf-sheet tbody th { font-size: 9pt; }

  /* Diagrams go three across on paper and lose their tint — the shapes are
     line art, so they cost nothing to print, but a filled panel behind each one
     would put six grey rectangles on the page. Ink beats accent colour here:
     a home printer may well be black and white. */
  .pf-sheet .pf-moves {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 0.7rem;
    margin: 0.4rem 0 0.7rem;
  }

  .pf-move { page-break-inside: avoid; }

  .pf-move svg.pf-tc {
    background: none;
    border-radius: 0;
    color: #000;
  }

  .pf-tc-arm { stroke: #000; }
  .pf-tc-hand { fill: #000; }
  .pf-tc-chair { opacity: 0.5; }

  .pf-sheet .pf-move figcaption { margin-top: 0.15em; }

  .pf-sheet .pf-move figcaption strong {
    font-size: 9.5pt;
    margin-bottom: 0;
  }

  .pf-move-do { font-size: 8.5pt; line-height: 1.3; }

  /* Worksheet. The writing lines are the content, so they keep a generous
     height while everything printed around them tightens up. */
  .pf-sheet .pf-fill {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem 0.7rem;
    margin: 0.5rem 0 0.6rem;
  }

  .pf-fill-box { page-break-inside: avoid; }

  .pf-prose .pf-fill-box {
    padding: 0.35em 0.5em 0.5em;
    border-color: #999;
  }

  .pf-prose .pf-fill-box h2 {
    font-size: 10pt;
    margin: 0 0 0.1em;
  }

  .pf-prose .pf-fill-prompt {
    margin: 0 0 0.3em;
    font-size: 8pt;
    color: #444;
  }

  /* 8.5mm is a shade wider than the 7-8mm of standard ruled paper, which is the
     point — this gets filled in by hand, sometimes by a hand that is having a
     bad day. Do not trim it to win space; trim the prose instead. */
  .pf-fill-lines span {
    height: 8.5mm;
    border-bottom: 1px solid #777;
  }

  .pf-prose .pf-fill-box ul {
    margin: 0 0 0.4em;
    padding-left: 1em;
  }

  .pf-prose .pf-fill-box li {
    font-size: 8.5pt;
    line-height: 1.34;
    margin-bottom: 0.12em;
  }

  .pf-prose .pf-fill-intro { margin-bottom: 0.3em; }
  .pf-fill-blank { border-bottom: 1px solid #777; }

  /* The screen note is a tinted panel; on paper that is a solid block of ink
     for no gain, so it keeps only its rule. */
  .pf-sheet .pf-note {
    margin: 0.8em 0 0;
    padding: 0.4em 0 0.4em 0.7em;
    background: none;
    border-image: none;
    border-left: 2px solid #000;
    font-size: 9.5pt;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  a.pf-card:hover { transform: none; }
  a.pf-card:hover .pf-card-media img { transform: none; }
}