/* ---------- Putzplan-Generator ----------
   Links wird ausgefüllt, rechts hängt der Zettel an der Tür und ändert sich beim Tippen mit.
   Was man sieht, kommt so auch aus dem Drucker. Grundlage: /zettel.css */

.seite.tuer-breit {
  max-width: 1180px;
}

.pp-kopf {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  padding: 40px 0 0;
}

.pp-lead {
  max-width: 30em;
  margin: 0;
  color: var(--subtext);
  font-size: 19px;
  line-height: 1.5;
}

/* Der WGeist aus Blender mit dem Putzplan in der Hand */
.pp-ghost {
  width: clamp(96px, 16vw, 150px);
  height: auto;
  filter: drop-shadow(0 12px 16px rgba(28, 28, 70, 0.22));
  /* Eine Runde unter 5 Sekunden, dann Ruhe (WCAG 2.2.2); endet, wo sie anfängt */
  transform: rotate(8deg);
  animation: float 4.5s ease-in-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .pp-ghost {
    animation: none;
  }
}

/* Werkbank: Formular und Zettel */
.pp-werkbank {
  display: grid;
  gap: 40px;
  margin-top: 36px;
}

/* Sonst drückt die breite Tabelle die Spalte auf und die Seite läuft seitlich über */
.pp-werkbank > * {
  min-width: 0;
}

@media (min-width: 980px) {
  .pp-werkbank {
    grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}

/* ---------- Formular ---------- */

.pp-form {
  display: grid;
  gap: 30px;
}

.pp-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pp-form legend {
  margin: 0 0 12px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pp-form input[type="text"],
.pp-form select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--control);
  border-radius: 10px;
  background: var(--feld);
  color: var(--text);
  /* 16px, sonst zoomt Safari auf dem iPhone beim Antippen hinein */
  font: inherit;
  font-size: 16px;
}

.pp-form input[type="text"]:focus,
.pp-form select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.pp-people {
  display: grid;
  gap: 8px;
}

.pp-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pp-remove {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--subtext);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pp-remove svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.pp-remove:hover {
  background: rgba(32, 34, 79, 0.07);
  color: var(--text);
}

.pp-link {
  margin-top: 6px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--tint);
  font: inherit;
  font-family: var(--schrift-titel);
  font-weight: 700;
  cursor: pointer;
}

/* Aufgaben als Kärtchen zum Antippen; angewählt wie ein gelber Zettel */
.pp-chores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pp-chip {
  display: flex;
  align-items: center;
  border: 1px solid var(--control);
  border-radius: 10px;
  background: var(--feld);
  transition: background-color 0.15s, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}

.pp-chip:active {
  transform: scale(0.98);
}

.pp-chip:has(input:checked) {
  --subtext: #4a4733;
  border-color: var(--tinte);
  background: var(--notiz-gelb);
  color: var(--tinte);
}

.pp-chip:has(input:checked) .pp-remove {
  color: #4a4733;
}

/* Kästchen links, rechts Titel und darunter klein der Rhythmus */
.pp-chip label {
  display: grid;
  flex: 1;
  grid-template-columns: auto 1fr;
  column-gap: 9px;
  align-items: center;
  min-height: 52px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}

.pp-chip input {
  grid-row: 1 / 3;
}

.pp-chip:has(.pp-remove) label {
  padding-right: 0;
}

.pp-chip input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tinte);
}

.pp-chip span {
  font-weight: 600;
  line-height: 1.25;
}

.pp-chip small {
  color: var(--subtext);
  font-size: 13.5px;
  line-height: 1.3;
}

.pp-chip .pp-remove {
  font-size: 20px;
}

.pp-own {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.pp-own input,
.pp-own .pp-add {
  grid-column: 1 / -1;
}

.pp-own .pp-add {
  margin: 0;
  padding: 11px 16px;
}

.pp-own-hint:empty {
  display: none;
}

.pp-own-hint {
  margin: 8px 0 0;
}

.pp-settings {
  display: grid;
  gap: 12px;
}

.pp-settings legend,
.pp-settings .pp-wide {
  grid-column: 1 / -1;
}

.pp-settings label {
  display: grid;
  gap: 4px;
}

.pp-settings label > span {
  color: var(--subtext);
  font-size: 14px;
}

.pp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Zweitknöpfe auf der Tür: mit sichtbarem Rand, sonst wirken sie gesperrt */
.tuer .button.secondary {
  border-color: var(--control);
  background: var(--feld);
}

/* ---------- Der Zettel ---------- */

.pp-sheet {
  padding: 46px 32px 26px;
  transform: rotate(-0.5deg);
  /* Die Hauptsache: gleich da, nur ein kurzes Anlegen */
  animation: pp-anheften 0.38s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* Einmal beim Laden: der Zettel legt sich an die Tür, der Magnet schnappt ein */
@keyframes pp-anheften {
  from {
    opacity: 0;
    transform: translateY(-18px) rotate(-3deg);
  }
}

.pp-magnet {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  animation: pp-schnappen 0.3s cubic-bezier(0.3, 1.6, 0.5, 1) 0.24s both;
}

@keyframes pp-schnappen {
  from {
    transform: scale(1.35) translateY(-6px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-sheet,
  .pp-magnet {
    animation: none;
  }
}

.pp-sheet-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 16px;
}

.pp-sheet-title {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

/* Neu verteilen: ein Würfel am Zettel, dort, wo sich der Plan ändert */
.pp-wuerfel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border: 1.5px solid var(--control-papier);
  border-radius: 999px;
  background: transparent;
  color: var(--kuli);
  font: inherit;
  font-family: var(--schrift-titel);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.15s;
}

.pp-wuerfel svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.pp-wuerfel svg circle {
  fill: currentColor;
  stroke: none;
}

@media (hover: hover) and (pointer: fine) {
  .pp-wuerfel:hover {
    background: color-mix(in srgb, var(--kuli) 8%, transparent);
  }

  .pp-wuerfel:hover svg {
    transform: rotate(-12deg);
  }
}

.pp-wuerfel:active {
  transform: scale(0.97);
}

.pp-wuerfel:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Viele Aufgaben passen auf dem Handy nicht nebeneinander: im Zettel seitlich wischen */
.pp-table-wrap {
  overflow-x: auto;
}

.pp-sheet .pp-table-wrap {
  margin: 0 -32px;
  padding: 0 32px;
}

.pp-table {
  width: 100%;
  min-width: 500px;
  margin: 0;
  border-collapse: collapse;
  font-size: 15px;
}

.pp-table th,
.pp-table td {
  padding: 8px 8px 8px 0;
  border-bottom: 1px dashed rgba(32, 34, 79, 0.22);
  text-align: left;
  vertical-align: middle;
}

.pp-table thead th {
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--tinte);
  font-family: var(--schrift-titel);
  font-weight: 700;
}

.pp-table th small {
  display: block;
  color: var(--tinte-weich);
  font-family: var(--schrift-hand);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.pp-table tbody th {
  min-width: 66px;
  font-family: var(--schrift-titel);
  font-weight: 700;
  white-space: nowrap;
}

.pp-table tbody tr:last-child th,
.pp-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Namen wie mit der Hand eingetragen und mit Textmarker in der Farbe der Person */
.pp-who {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 3px;
  background: linear-gradient(
    transparent 52%,
    color-mix(in srgb, var(--c) 48%, transparent) 52%,
    color-mix(in srgb, var(--c) 48%, transparent) 92%,
    transparent 92%
  );
  font-family: var(--schrift-hand);
  font-size: 16px;
  font-weight: 600;
  /* Namen nie mitten im Wort umbrechen; zu breit wird seitlich gewischt */
  white-space: nowrap;
}

/* Kästchen zum Abhaken auf Papier */
.pp-who::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-left: 7px;
  border: 1.5px solid var(--tinte-weich);
  border-radius: 2px;
}

.pp-free {
  color: var(--tinte-weich);
}

.pp-empty {
  padding: 16px 0;
  color: var(--tinte-weich);
  caption-side: top;
  text-align: left;
}

.pp-points {
  margin: 16px 0 0;
  color: var(--tinte-weich);
  font-size: 15px;
}

.pp-print-note {
  display: none;
}

.pp-actions {
  display: grid;
  gap: 0;
  margin-top: 18px;
}

@media (min-width: 600px) {
  .pp-actions {
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
  }

  .pp-share-note {
    grid-column: 2;
  }
}

.pp-share-note {
  margin: 8px 0 0;
}

/* Kleinere Wege unter den zwei Hauptknöpfen */
.pp-zurueck {
  margin: -10px 0 -10px 6px;
  padding: 10px 4px;
  font-size: inherit;
}

/* Nach dem Export: die App, in Indigo wie überall, wo es um die App geht */
.pp-danach {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 18px 32px -20px rgba(45, 48, 160, 0.75);
}

@media (min-width: 600px) {
  .pp-danach {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
  }
}

.pp-danach p {
  margin: 0;
  color: #fff;
}

.pp-danach .button {
  width: auto;
  margin: 0;
  border-color: #fff;
  background: #fff;
  color: var(--primary);
  white-space: nowrap;
}

.pp-danach:not([hidden]) {
  animation: pp-danach 0.32s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes pp-danach {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-danach:not([hidden]) {
    animation: none;
  }
}

.pp-weitere {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: 6px;
}

@media (min-width: 600px) {
  .pp-weitere {
    grid-column: 1 / -1;
  }

  .pp-share-note {
    grid-column: 1 / -1;
  }
}

.pp-sheet-title:focus {
  outline: none;
}

/* Link zur passenden Anleitung an einer Aufgabe */
.pp-tipp {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -8px;
  color: var(--subtext);
  font-family: var(--schrift-titel);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.pp-tipp::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.pp-tipp:hover {
  color: var(--text);
}

.pp-chip:has(input:checked) .pp-tipp {
  color: #4a4733;
}

/* Am Handy: schwebender Knopf zum Zettel, solange er unter dem Formular liegt */
.pp-zum-zettel {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 10;
  display: grid;
  min-height: 52px;
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--tinte);
  box-shadow: 0 10px 24px -8px rgba(20, 22, 60, 0.55);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transform: translateX(-50%);
}

.pp-zum-zettel strong {
  font-family: var(--schrift-titel);
  font-size: 16px;
}

.pp-zum-zettel span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .pp-zum-zettel {
    background: #e3ded2;
    color: var(--tinte);
  }

  .pp-zum-zettel span {
    color: var(--tinte-weich);
  }
}

@media (min-width: 980px) {
  .pp-zum-zettel {
    display: none !important;
  }
}

/* Druckansicht fürs Putzrad: nur am Bildschirm unsichtbar */
.pp-putzrad-druck {
  display: none;
}

/* ---------- Ratgeber: was sonst noch an der Tür hängt ----------
   Notiz mit Putzrad, Karteikarte mit den Aufgaben, Klebezettel, darunter die Fragen als Stapel
   Papierstreifen. Der Text ist derselbe wie vorher, nur nicht mehr als lose Textseite. */

.pp-guide {
  margin: 88px 0 0;
}

.pp-tuer {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 900px) {
  .pp-tuer {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      "verteilt aufgaben"
      "haelt aufgaben";
    gap: 36px 44px;
  }

  .pp-verteilt { grid-area: verteilt; }
  .pp-aufgaben { grid-area: aufgaben; }
  .pp-haelt { grid-area: haelt; }
}

.pp-tuer h2,
.pp-faq-titel {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.15;
}

.pp-verteilt {
  --dreh: -0.6deg;
  padding: 28px 28px 24px;
  transform: rotate(var(--dreh));
}

.pp-verteilt p {
  margin: 0;
}

/* Kleines Putzrad: außen die Personen, innen die Aufgaben */
.pp-rad {
  display: block;
  width: min(200px, 60%);
  height: auto;
  margin: 6px auto 18px;
}

.pp-rad-aussen path {
  fill: var(--c);
  stroke: var(--papier);
  stroke-width: 3;
}

.pp-rad-scheibe circle {
  fill: var(--papier);
  stroke: var(--tinte);
  stroke-width: 2;
}

.pp-rad-scheibe path {
  stroke: var(--tinte);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.pp-rad-scheibe text {
  fill: var(--tinte);
  font-family: var(--schrift-hand);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
}

.pp-rad-pin {
  fill: #5b5fef;
  stroke: color-mix(in srgb, #5b5fef 70%, #000);
  stroke-width: 2;
}

/* Karteikarte: eine Zeile je Aufgabe, Punkte als ausgemalte Kreise */
.pp-aufgaben {
  --dreh: 0.4deg;
  padding: 28px 28px 22px;
  transform: rotate(var(--dreh));
}

.pp-aufgaben h2 {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--papier-rot);
}

.pp-aufgaben-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-aufgaben-liste li {
  padding: 10px 0;
  border-bottom: 1px solid var(--papier-linie);
}

.pp-aufgabe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.pp-aufgabe-kopf strong {
  margin-right: auto;
  font-family: var(--schrift-titel);
  font-size: 17px;
}

.pp-aufgabe-kopf .hand {
  color: var(--kuli);
  font-size: 15px;
}

.pp-punkte {
  display: inline-flex;
  gap: 4px;
  min-width: 46px;
}

.pp-punkte i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--kuli);
}

.pp-aufgabe-was {
  display: block;
  margin-top: 2px;
  color: var(--tinte-weich);
  font-size: 15px;
  line-height: 1.45;
}

.pp-aufgaben-mehr {
  margin: 16px 0 0;
  font-size: 15px;
}

.pp-haelt {
  --dreh: 1deg;
}

.pp-haelt ul {
  margin: 0;
  padding-left: 20px;
}

.pp-haelt li {
  margin: 6px 0;
}

/* Fragen: ein Stapel Papierstreifen, aufklappbar, mit gezeichnetem Plus statt Dreieck */
.pp-faq-titel {
  margin-top: 72px;
}

.pp-faq {
  display: grid;
  gap: 10px;
  max-width: 780px;
}

.pp-faq details {
  border-radius: 3px;
  background: var(--papier);
  box-shadow: 0 1px 1px rgba(20, 22, 60, 0.06), 0 8px 18px -12px rgba(20, 22, 60, 0.3);
  color: var(--tinte);
}

.pp-faq details:nth-child(odd) {
  transform: rotate(-0.25deg);
}

.pp-faq details:nth-child(even) {
  transform: rotate(0.2deg);
}

.pp-faq summary {
  position: relative;
  padding: 16px 52px 16px 20px;
  font-family: var(--schrift-titel);
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.pp-faq summary::-webkit-details-marker {
  display: none;
}

.pp-faq summary::before,
.pp-faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--kuli);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.pp-faq summary::after {
  transform: rotate(90deg);
}

.pp-faq details[open] summary::after {
  transform: rotate(0deg);
}

.pp-faq summary:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 3px;
}

.pp-faq details p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--tinte-weich);
}

@media (prefers-reduced-motion: reduce) {
  .pp-faq summary::after {
    transition: none;
  }
}

/* ---------- Handy ---------- */

@media (max-width: 600px) {
  .pp-sheet {
    padding: 40px 18px 22px;
    transform: rotate(-0.3deg);
  }

  .pp-sheet .pp-table-wrap {
    margin: 0 -18px;
    padding: 0 18px;
  }

  .pp-sheet-title {
    font-size: 26px;
  }
}

/* Am Handy passt die Tabelle nicht nebeneinander: jede Woche wird ein Kärtchen mit
   „Aufgabe … Name“ untereinander. Druck und Bild behalten die Tabelle. */
@media screen and (max-width: 600px) {
  .pp-sheet .pp-table-wrap {
    overflow: visible;
  }

  .pp-table {
    min-width: 0;
  }

  .pp-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pp-table,
  .pp-table tbody,
  .pp-table tr,
  .pp-table th,
  .pp-table td {
    display: block;
  }

  .pp-table tbody tr {
    padding: 14px 0 10px;
    border-bottom: 1px dashed rgba(32, 34, 79, 0.22);
  }

  .pp-table tbody tr:first-child {
    padding-top: 4px;
  }

  .pp-table tbody tr:last-child {
    border-bottom: 0;
  }

  .pp-table th,
  .pp-table td {
    padding: 0;
    border-bottom: 0;
  }

  .pp-table tbody th {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 17px;
  }

  .pp-table tbody th small {
    display: inline;
    font-size: 14px;
  }

  .pp-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
  }

  .pp-table td::before {
    content: attr(data-aufgabe);
    color: var(--tinte-weich);
    font-size: 15px;
  }

  /* Wer nicht dran ist, braucht am Handy keine eigene Zeile */
  .pp-table td.pp-frei {
    display: none;
  }

  .pp-who {
    font-size: 17px;
  }
}

/* ---------- Drucken: nur der Zettel, A4 quer, immer hell ---------- */

@media print {
  @page {
    size: A4 landscape;
    margin: 12mm;
  }

  /* Beim Putzrad nur das Rad, auf A4 hochkant */
  body.drucke-putzrad .seite > header,
  body.drucke-putzrad .seite > footer,
  body.drucke-putzrad main > *:not(.pp-putzrad-druck) {
    display: none !important;
  }

  body.drucke-putzrad .pp-putzrad-druck {
    display: block;
    /* Genau eine Seite, sonst druckt Chrome gern eine leere zweite */
    height: 297mm;
    overflow: hidden;
  }

  body.drucke-putzrad .pp-putzrad-druck svg {
    display: block;
    width: 210mm;
    height: 297mm;
  }

  :root {
    --bg: #fff;
    --card: #fff;
    --text: #1c1c28;
    --subtext: #6b6b7b;
    --papier: #fff;
    --tinte: #1c1c28;
    --tinte-weich: #6b6b7b;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    padding: 0;
  }

  .seite.tuer-breit {
    max-width: none;
  }

  .no-print,
  .pp-guide,
  .pp-magnet,
  noscript {
    display: none !important;
  }

  .pp-werkbank {
    display: block;
    margin: 0;
  }

  .pp-sheet {
    padding: 0;
    transform: none;
    animation: none;
  }

  .pp-sheet-title {
    margin-bottom: 6pt;
    font-size: 20pt;
  }

  .pp-sheet .pp-table-wrap {
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  /* 12 Wochen passen so auf eine Seite */
  .pp-table {
    min-width: 0;
    font-size: 10.5pt;
    line-height: 1.25;
  }

  .pp-table th,
  .pp-table td {
    padding: 3.5pt 6pt 3.5pt 0;
  }

  .pp-table thead th {
    padding-bottom: 4pt;
  }

  .pp-who {
    font-size: 11pt;
  }

  .pp-table tr {
    break-inside: avoid;
  }

  .pp-points {
    margin-top: 8pt;
    font-size: 9pt;
  }

  .pp-print-note {
    display: block;
    margin: 4pt 0 0;
    color: #6b6b7b;
    font-size: 9pt;
  }
}