/* Possum guide (/feeding-brushtail-possums/). Loaded after guide.css. Pieces the magpie template
   doesn't have: a two-possum size ruler with tails, tonight's sunset beside the steps, the law
   pair, droppings to scale, the ringtail-or-brushtail table, and the states table.
   Page colour: possum grey (--c). Ringtail rows use boobook brown, close to the ringtail's fur. */

/* Size ruler: 0 to 100 cm, body bar plus a hatched tail */
.pt-ruler { --max: 100; }
.pt-ruler .ru-row { grid-template-columns: 76px minmax(0, 1fr); }
.pt-ruler .ru-axis { margin-left: 76px; }
.ru-bar.ru-tail {
  left: calc(var(--s) / var(--max) * 100%);
  background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1px var(--c); transition-delay: .45s;
}
.ru-bar.pt-rt { background: #5B3A28; }
.pt-ruler .ru-val.in { left: auto; right: calc(100% - var(--v) / var(--max) * 100%); margin: 0 6px 0 0; color: #fff; white-space: nowrap; }
.ru-bar.ru-tail.pt-rt { background: repeating-linear-gradient(135deg, #5B3A28 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px #5B3A28; }

/* Tonight's sunset, under the heading */
.pt-sun { margin: 22px 0 0; display: inline-grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 10px; border-top: 3px solid var(--ink); padding-top: 10px; }
.pt-sun-k { grid-column: 1 / -1; font-stretch: 75%; font-weight: 700; font-size: 14px; color: var(--ink2); }
.pt-sun b { font-stretch: 75%; font-weight: 820; font-size: 52px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pt-sun > span:last-child { font-stretch: 75%; font-weight: 700; font-size: 17px; }

/* The law: DBCA beside the Act */
.pt-law { display: grid; gap: 26px; margin-top: 28px; max-width: 1100px; }
.pt-law > div { border-top: 3px solid var(--ink); padding-top: 10px; }
.pt-law h3 { font-stretch: 112%; font-weight: 820; font-size: 22px; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 8px; }
.pt-law p { font-size: 16.5px; line-height: 1.5; margin: 0 0 12px; max-width: 34em; }
.pt-law a.tel { font-weight: 700; white-space: nowrap; }
@media (min-width: 760px) { .pt-law { grid-template-columns: 1fr 1fr; column-gap: 48px; } }

/* Noises and droppings */
.pt-not { font-size: 17px; line-height: 1.5; max-width: 40em; color: var(--paper-n); margin: 0 0 1em; }
.pt-h3 { font-stretch: 125%; font-weight: 860; font-size: 30px; line-height: 1; letter-spacing: -.025em; margin: 36px 0 14px; }
.pt-h3-top { margin-top: 6px; }
.pt-poo { margin: 0 0 26px; max-width: 760px; }
.pt-poo-row { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.18); }
.pt-poo-lab { font-stretch: 75%; font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--ink2-n); }
.pt-poo-lab b { display: block; font-stretch: 112%; font-weight: 800; font-size: 18px; color: #fff; }
.pt-poo-trk { position: relative; display: flex; align-items: center; min-height: 34px; padding: 6px 0; background: linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%; }
.pt-pellet {
  display: block; width: calc(var(--l) / 3 * 100%); aspect-ratio: 2 / 1;
  transform-origin: 0 50%; border-radius: 999px;
  background: linear-gradient(180deg, #8C8273, #4A4239); transition: transform .7s var(--ease);
}
.pt-p-rat, .pt-p-mou { aspect-ratio: 3 / 1; }
.pt-poo.is-hidden .pt-pellet { transform: scaleX(0); }
.pt-poo-row:nth-child(2) .pt-pellet { transition-delay: .12s; }
.pt-poo-row:nth-child(3) .pt-pellet { transition-delay: .24s; }
.pt-poo-axis { position: relative; height: 22px; margin-left: 128px; border-top: 1px solid rgba(255,255,255,.5); font-stretch: 75%; font-size: 12.5px; font-weight: 650; color: var(--ink2-n); font-variant-numeric: tabular-nums; }
.pt-poo-axis span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.pt-poo-axis span:first-child { transform: none; }
.pt-poo-axis span:last-child { transform: translateX(-100%); }
.pt-poo figcaption { font-stretch: 75%; font-size: 13.5px; color: var(--ink2-n); margin-top: 8px; }

/* Food */
.pt-big { margin: 26px 0 0; }
.pt-feed { font-size: 17px; line-height: 1.5; max-width: 36em; }
.pt-feed strong { font-weight: 750; }
.pt-dont { list-style: none; margin: 18px 0 0; padding: 0; border-top: 3px solid var(--ink); }
.pt-dont li { position: relative; padding: 13px 0 14px 30px; border-bottom: 1px solid var(--hair2); font-size: 16.5px; line-height: 1.45; }
.pt-dont li::before, .pt-dont li::after { content: ""; position: absolute; left: 2px; top: 23px; width: 15px; height: 2.5px; background: var(--red); transform: rotate(45deg); }
.pt-dont li::after { transform: rotate(-45deg); }
.pt-dont li:last-child::before { top: 19px; width: 13px; height: 7px; background: none; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg); }
.pt-dont li:last-child::after { content: none; }
.pt-dont b { font-weight: 750; }

/* Ringtail or brushtail */
.pt-vs { display: grid; gap: 26px; margin-top: 30px; }
.pt-vs-fig { margin: 0; max-width: 340px; }
.pt-vs-fig .ph { aspect-ratio: 4 / 5; }
.pt-vs-fig figcaption { font-stretch: 75%; font-size: 13.5px; color: var(--ink2); padding-top: 8px; }
.pt-vs-tab { border-top: 3px solid var(--ink); align-self: start; }
.pt-vs-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; padding: 11px 0 12px; border-bottom: 1px solid var(--hair2); font-size: 15px; line-height: 1.4; }
.pt-vs-row > span:first-child { font-stretch: 75%; font-weight: 700; font-size: 14px; color: var(--ink2); }
.pt-vs-row > span:nth-child(2) { color: #5B3A28; font-weight: 600; }
.pt-vs-h { font-stretch: 112%; font-weight: 820; font-size: 16px; padding: 9px 0 8px; border-bottom: 1px solid var(--ink); }
.pt-vs-h > span:nth-child(2) { font-weight: 820; }
.pt-vs-src { margin: 10px 0 0; font-stretch: 75%; font-size: 13.5px; color: var(--ink2); }
.pt-rt-list { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--hair2); max-width: 60em; }
.pt-rt-list li { position: relative; padding: 13px 0 14px 26px; border-bottom: 1px solid var(--hair2); font-size: 16.5px; line-height: 1.45; }
.pt-rt-list li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 10px; height: 10px; background: #5B3A28; border-radius: 50%; }
.pt-rt-list b { font-weight: 750; }
@media (min-width: 760px) {
  .pt-vs { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 40px; }
  .pt-vs-fig { max-width: none; }
  .pt-vs-row { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); font-size: 16.5px; column-gap: 16px; }
}

/* Nest box */
.pt-box { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.pt-box li { position: relative; padding: 14px 0 15px 26px; border-bottom: 1px solid var(--hair2); font-size: 16.5px; line-height: 1.45; }
.pt-box li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 11px; height: 11px; border: 2px solid var(--c); }
.pt-box b { font-weight: 750; }

/* States */
.pt-states { margin-top: 28px; border-top: 3px solid var(--ink); max-width: 1000px; }
.pt-st { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding: 12px 0 13px; border-bottom: 1px solid var(--hair2); font-size: 16px; line-height: 1.45; }
.pt-st > span:first-child { font-stretch: 112%; font-weight: 820; font-size: 20px; line-height: 1.15; }
.pt-st b { font-weight: 750; }
.pt-st-h { font-stretch: 75%; font-weight: 700; font-size: 14px; color: var(--ink2); padding: 9px 0 8px; border-bottom: 1px solid var(--ink); }
.pt-st-h > span:first-child { font-size: 14px; font-stretch: 75%; font-weight: 700; }
.pt-st:nth-child(2) > span:first-child { color: var(--blue); }
.pt-st-note { margin-top: 16px; max-width: 46em; }
@media (min-width: 760px) { .pt-st { grid-template-columns: 90px minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .pt-pellet, .ru-bar.ru-tail { transition: none !important; }
}