/* THE PRICE CALCULATOR IN STUDIO (29 Sep 2026; assets/pricing.js). On top of app.css and money.css, with their tokens:
   Settings, Pricing (since 21 Oct 2026 an overview of tiles, each opening its part: the price sheet a card a type, each
   expanding open in place, the surcharge sheet, the public holidays by year and every other rate in its group, one Save
   at the foot: roadmap N9) and the Studio's own calculator at /calculator (the event, what the client
   sees, everything behind it, the website's estimates). Prefix .pr-, never .ad- (an ad blocker hides that).

   Money lines up in tabular figures, in the page's own proportional face. Every press is at least 44px on a touch
   screen.

   THE CALCULATOR'S LOOK (2 Nov 2026, the operator: "redesign the entire studio to match the website/calculator style",
   then of five options "go A"). Light and dark both from the app's own roles (app.css, THE STUDIO'S LOOK: CALCULATOR
   CARDS), so one rule answers both themes: a line --pn-line, a small word --pn-muted, a wash --pn-hover, the card that
   is open the picked card (--pn-sh-sel), a count beside a heading the yellow tag, every corner --pn-r (square). */

/* ---------- Settings, Pricing ---------- */
/* the place is a container (21 Oct 2026): what is in it lays out by its own width, below */
.pr-set { display: grid; gap: 0; max-width: none; container-type: inline-size; }
.pr-set > .pr-card:first-of-type { margin-top: 0; }
.pr-state { margin: 0 0 10px; }
.pr-warnline { color: var(--st-warn); }
/* in the light theme too: the light .pn-sub's ink (app.css) won over it there, so a warning such as the weekday work
   hours read as an ordinary line in light and in the warn colour in dark (the UX pass, 3 Nov 2026) */
:root[data-app][data-theme] .pn-sub.pr-warnline { color: var(--st-warn); }
/* each reason a chip, packed along the line, so a long list stays short on a computer */
.pr-blocked { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; padding: 0; list-style: none; }
.pr-blocked > li { max-width: 100%; }
.pr-blocked li { font-size: 13px; line-height: 1.45; }
/* a press chip (app.css .pn-pchip's size: 32px, 44 to a thumb, its square corners, 12px at 500), in the warn tone, whose words may
   wrap to a second line */
.pr-go { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; max-width: 100%; min-height: 32px; padding: 6px 10px;
  border: 1px solid var(--st-warn-line); border-radius: var(--pn-r); background: var(--st-warn-bg); color: var(--st-warn); font: inherit; font-size: 12px; font-weight: 500;
  line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer; }
/* under the mouse its tint doubles */
@media (hover: hover) { .pr-go:hover { box-shadow: inset 0 0 0 999px var(--st-warn-bg); } }
.pr-before { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pn-line); }
.pr-before > .pn-note { margin-top: 0; }
.pr-offer { margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.pr-offer > legend { padding: 0; margin: 0 0 4px; }

/* ---------- Settings, Pricing (21 Oct 2026: the overview's tiles, then one part at a time; assets/pricing.js) ---------- */
/* THE PLACE SIZES WHAT IS IN IT BY ITS OWN WIDTH, not the window's (.pr-set is a container, above), so the side menu beside
   it on a computer counts: its tiles, a type's cards and panel, the steps and the surcharge sheet each lay out by the room
   they have */
/* a part, a panel, a year or a chip shown or not is the hidden attribute, over any display a class gives it */
.pr-set [hidden] { display: none; }
.pr-lead { margin: 0 0 14px; }

/* THE OVERVIEW: a tile a part, three across with room, two, then one; the price sheet and the steps twice as wide */
.pr-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
@container (min-width: 600px) {
  .pr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-tile.pr-twide { grid-column: 1 / -1; }
}
@container (min-width: 900px) {
  .pr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-tile.pr-twide { grid-column: span 2; }
}
/* a tile is the app's card, pressed to open its part */
.pr-tile { display: flex; flex-direction: column; align-items: stretch; gap: 8px; box-sizing: border-box; width: 100%; min-width: 0; min-height: 168px; margin: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pr-tile:focus-visible, .pr-tcard:focus-visible, .pr-yh:focus-visible { outline: 2px solid var(--pn-t-ink); outline-offset: 2px; }
/* figures still placeholders: the warn tone over the card's own face, as the press chip's hover tints */
.pr-tk { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.pr-tk > .pn-hk { margin: 0; }
.pr-tile > .pn-tn { overflow-wrap: anywhere; }
/* NO GLASS UNDER THE TILES (report 242, 27 Oct 2026, of the big line: "fix this font - it looks out of place", then "it
   looks fine when zoomed in, aliaising render issue?"): a card's blur of what is behind it puts its words on a layer
   of their own, drawn without the screen's own smoothing, so the thin display figures came out jagged on Windows. The
   tile is opaque, so the blur showed nothing; without it the words are drawn as the rest of the page's are. */
:root[data-app] .pr-tile, :root[data-app] .pr-tcard { backdrop-filter: none; -webkit-backdrop-filter: none; }
.pr-tsub { font-size: 13px; line-height: 1.45; color: var(--pn-t-soft); }
.pr-tlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; margin-top: 2px; }
@container (min-width: 600px) { .pr-tlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-tlist > span { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 30px; border-top: 1px solid var(--pn-line); font-size: 13px; }
.pr-tln { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-tlv { flex: none; color: var(--pn-t-soft); font-variant-numeric: tabular-nums; }
.pr-tl2 { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; }
.pr-topen { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pn-t-soft); }
.pr-topen .pn-gl { width: 14px; height: 14px; }
/* under the mouse a card is edged in the field edge's colour (2 Nov 2026, go A: the card has no edge of its own, its
   shadow carries it), named as the card's own rule is so it wins */
@media (hover: hover) {
  :root[data-app] .pr-tile:hover, :root[data-app] .pr-tcard:hover { border-color: var(--pn-edge); }
}

/* A PART: the way back to the tiles (the app's back link, as a button) and its title, where the page's heading was */
.pr-back { border: 0; background: none; font: inherit; cursor: pointer; }
.pr-parth { margin-top: 10px; margin-bottom: 14px; }
.pr-parth:focus { outline: none; }
.pr-part > .pr-card:first-of-type { margin-top: 0; }
.pr-cardh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; }
.pr-cardh > h2 { margin: 0; }
/* a card's count beside its heading is the yellow tag, the calculator's .sc-mark (2 Nov 2026, go A) */

/* THE PRICE SHEET: a card a type under its parent's heading; three across with room, two, then one */
.pr-gh { margin: 24px 0 10px; }
.pr-lead + .pr-gh { margin-top: 6px; }
.pr-tcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
/* the panel opens under its group's cards (after them all, across the width) wherever two or more sit side by side, and
   right under its own card where they are one column */
@container (min-width: 600px) {
  .pr-tcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-tcards > .pr-tpanel { order: 1; grid-column: 1 / -1; }
}
@container (min-width: 900px) { .pr-tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr-tcard { display: grid; align-content: start; gap: 8px; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; color: inherit; font: inherit; text-align: left;
  cursor: pointer; }
/* the card whose panel is open is the picked card: a 1.5px ink ring over the calculator's shadow (2 Nov 2026, go A) */
:root[data-app] .pr-tcard.pr-on { border-color: transparent; box-shadow: var(--pn-sh-sel); }
.pr-tct { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.pr-tcn { min-width: 0; overflow-wrap: anywhere; }
.pr-tct > .pn-gl { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--pn-t-soft); transition: transform .15s; }
.pr-tcard[aria-expanded="true"] .pr-tct > .pn-gl { transform: rotate(180deg); }
/* a row's ref: a small tag in tabular figures */
.pr-ref { display: inline-grid; place-items: center; box-sizing: border-box; min-width: 28px; height: 22px; padding: 0 6px; border-radius: var(--pn-r); background: var(--pn-p-hover);
  font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-tfrom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 13px; color: var(--pn-t-soft); }
.pr-big { font: 300 26px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--pn-t-ink); font-variant-numeric: tabular-nums; }
.pr-lens { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-lens > i { height: 22px; padding: 0 7px; border-radius: var(--pn-r); background: var(--pn-p-hover); font-size: 11.5px; font-style: normal; line-height: 22px; color: var(--pn-t-soft);
  font-variant-numeric: tabular-nums; }
.pr-surl, .pr-tkinds { font-size: 12.5px; line-height: 1.45; color: var(--pn-t-soft); }
.pr-tkinds { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-tcb:empty { display: none; }

/* A TYPE'S PANEL: two columns once the place has room (its price, lengths and kinds; its surcharges and steps), one before */
.pr-tcards > .pr-tpanel { margin: 0; }
.pr-tpanel { padding: 18px; }
.pr-tph { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pr-tph > div { min-width: 0; }
.pr-tpk { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; color: var(--pn-t-soft); }
.pr-tph .pn-hs { margin: 0; }
.pr-tph .pn-note { margin-top: 4px; }
.pr-close { flex: none; }
.pr-tpcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 36px; }
@container (min-width: 820px) { .pr-tpcols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.pr-tpcol { min-width: 0; container-type: inline-size; }
.pr-tpanel .pr-h3 { margin: 18px 0 8px; }
.pr-tpanel .pr-h3 > label { cursor: pointer; }
.pr-rcf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 8px; }
.pr-rcfl { display: grid; align-content: start; gap: 4px; min-width: 0; }
.pr-rcfl > span:first-child { font-size: 12px; color: var(--pn-t-soft); }
.pr-rcfl .wa-pwin { min-width: 0; }
/* in a phone's column the floor takes the line, the floor price and the dial side by side under it */
@container (max-width: 419.98px) {
  .pr-rcf { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .pr-rcf > .pr-rcfl:first-child { grid-column: 1 / -1; }
}
/* the kinds take the column's width (a Settings place keeps a lone box at 480px) */
.pr-tpanel .pr-text { max-width: none; }
/* each length a chip: its hours over its figure (or Off), nine across with room, three by three before */
.pr-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
@container (min-width: 540px) { .pr-chips { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.pr-work { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.pr-shared { margin-top: 0; }
/* a line: its name at the left, its box or its Ask and Skip at the right */
.pr-flines { display: grid; }
.pr-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--pn-line);
  font-size: 13px; }
.pr-line:first-child { border-top: 0; }
.pr-line > label { cursor: pointer; }
.pr-line > .mn-cur { flex: 0 0 104px; margin-left: auto; }
.pr-line > .pr-phw { margin-left: auto; }
.pr-line > .pr-phw + .mn-cur { margin-left: 0; }
.pr-xy { display: inline-flex; flex-wrap: wrap; gap: 8px 12px; }
.pr-xyl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--pn-t-soft); }
.pr-xyl .mn-cur { width: 76px; }
.pr-seg.pn-pills { flex-wrap: nowrap; margin-top: 0; }
/* CALCULATOR DATES' LIMITED HOURS (2 Nov 2026): a row's name and its cross on one line, its weekdays a row of toggles that
   wraps on a phone (each 44px to a thumb, app.css), then its from and to */
.pr-limrow .pr-limh { flex: 1 1 auto; margin: 0; }
.pr-days.pn-pills { margin-top: 0; }
.pr-limrow .pr-ticks { margin-top: 4px; }
/* its heading set apart from the blocked days' Add above it; a date range's two days one above the other at every width,
   so each shows its whole date in words ("Thursday 17 December 2026") */
.pr-h3.pr-limhead { margin-top: 26px; }
.pr-two.pr-rdays { grid-template-columns: minmax(0, 1fr); }
.pr-keeprow { margin-top: 10px; }
/* a placeholder's chip and its Keep, beside its box */
.pr-phw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pr-rcf + .pr-phw, .pr-phw + .pr-phw { margin-top: 8px; }
:root[data-app] .pr-keep { border-color: var(--pn-line); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.pr-keep[aria-pressed="true"] { border-color: var(--st-good-line); background: var(--st-good-bg); color: var(--st-good); }

/* the calculator's rules and the Studio's own figures: a line a figure, two columns with room */
.pr-rows { display: grid; gap: 0 28px; }
@container (min-width: 900px) { .pr-rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pr-row { display: grid; align-content: start; gap: 6px; padding: 12px 0 8px; border-top: 1px solid var(--pn-line); min-width: 0; }
.pr-rowh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; line-height: 1.4; }
.pr-rowh > .pr-phw { margin-left: auto; }
.pr-rowh > label { cursor: pointer; }
.pr-rowin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-rowin > .mn-cur { flex: 0 1 240px; min-width: 0; }
.pr-rowin > .wa-pwin, .pr-rowin > .pn-sfold > .wa-pwin { flex: 1 1 240px; min-width: 0; max-width: 480px; }
/* a blocked day's date box as wide as its words ("Saturday 21 November 2026" was cut at 1280, 2 Nov 2026), the cross beside it */
.pr-rowin > .pn-keepday { flex: 1 1 290px; min-width: 0; max-width: 480px; }
.pr-row .pn-note { margin-top: 0; }
.pr-row .pn-check { min-height: 36px; }
.pr-err:empty { display: none; }
.pr-tag { margin-left: 6px; font-style: normal; vertical-align: 1px; }
.pr-wide { max-width: none; }

/* a box with its unit in it, A$ before, % or km or hours after, is money.css's .mn-cur */
.pr-num { text-align: right; font-variant-numeric: tabular-nums; }
/* a rough count of guests is typed as words are, from the left (UI audit, 30 Sep 2026) */
.pr-num[data-prf="guests"] { text-align: start; }

/* the one Save, at the foot of the place, the page's last line: never pinned, no bar of its own (1 Nov 2026, the operator: "It
   looks silly don't pin and just button it at the bottom") */
.pr-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; padding: 0 0 max(12px, env(safe-area-inset-bottom)); }
.pr-savebar > .pn-msg { margin: 0; flex: 1 1 200px; }
/* the tile page's own Save shows only while a part holds a change, or has just saved (it says Saved with its tick) */
.pr-set > .pr-savebar:has(.pn-savebtn:disabled:not(:has(.pn-gl))):has(> .pn-msg:empty) { display: none; }
.pr-savebar > .pn-msg:empty { flex-basis: 0; }

/* ---------- a length's chip, and the surcharge sheet (roadmap N9, 16 Oct 2026), drawn as his sheet ---------- */
/* a chip: its figure while the length is offered, Off and dashed while not; the floor's always on; below it, nothing.
   Square, as the calculator's option rows (2 Nov 2026, go A): offered a solid edge on the card's face, the floor the picked
   look (the soft wash in a 1.5px ink ring), under the mouse the calculator's soft yellow wash */
.pr-cell { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; box-sizing: border-box; width: 100%; min-width: 0; min-height: 50px;
  padding: 4px 8px; border: 1px dashed var(--pn-edge); border-radius: var(--pn-r); background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums;
  text-align: left; cursor: pointer; }
.pr-cl { font-size: 11.5px; line-height: 1.3; color: var(--pn-t-soft); }
.pr-cv { font-size: 13.5px; line-height: 1.3; white-space: nowrap; }
.pr-cell[aria-pressed="false"] .pr-cv { color: var(--pn-t-soft); font-size: 12.5px; }
.pr-cell[aria-pressed="true"] { border-style: solid; border-color: var(--pn-edge); background: var(--pn-face); }
.pr-cell[aria-disabled="true"] { cursor: default; border-color: transparent; background: var(--pn-soft); box-shadow: inset 0 0 0 1.5px var(--pn-ink); }
.pr-cell:disabled { cursor: default; opacity: .35; }
@media (hover: hover) { .pr-cell:not(:disabled):not([aria-disabled="true"]):hover { background: var(--pn-soft); } }
.pr-cell:focus-visible { outline: 2px solid var(--pn-t-ink); outline-offset: 1px; }
/* three by three, each chip a line of its hours and its figure */
@container (max-width: 539.98px) { .pr-cell { flex-direction: row; justify-content: space-between; align-items: center; min-height: 44px; } }
@media (pointer: coarse) { .pr-cell { min-height: 44px; } }
/* the surcharge sheet keeps its columns while the place has room, scrolling sideways inside its own box only while it is
   narrower than they need; with less room each row is a block (below), so the page never scrolls sideways */
.pr-sheetwrap { max-width: 100%; min-width: 0; overflow-x: auto; margin: 12px 0 4px; }
.pr-sheet { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.pr-sheet th, .pr-sheet td { padding: 6px 4px; text-align: left; vertical-align: middle; }
.pr-sheet thead th { font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--pn-muted); border-bottom: 1px solid var(--pn-line); white-space: nowrap; }
.pr-colh > b, .pr-colh > span { display: block; }
.pr-colh > b { font-weight: 500; letter-spacing: .04em; }
.pr-colh > span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.pr-sur .pr-colh > span { white-space: normal; min-width: 7em; }
/* each parent's heading: the card's small capital label */
.pr-parent > th { padding: 16px 4px 6px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--pn-t-kick); }
.pr-sheet tr[data-prurow] > * { border-top: 1px solid var(--pn-line); }
.pr-rhead { width: 3em; }
.pr-rname { min-width: 9em; }
.pr-rname > b { display: block; font-weight: 400; }
.pr-sbox .wa-pwin { min-width: 0; }
.pr-sheet td.pr-sbox { width: 7.5em; }
.pr-sheet .pr-sbox .pr-num { text-align: right; }
.pr-inq { white-space: nowrap; color: var(--pn-muted); }
/* a refusal sits under its row; with none the row under it takes no room */
.pr-errs > td { padding: 0 4px; border: 0; }
.pr-errs .pr-err { margin: 2px 0 6px; }
@container (max-width: 699.98px) {
  .pr-sheetwrap { overflow: visible; }
  .pr-sheet, .pr-sheet tbody, .pr-sheet tr, .pr-sheet th, .pr-sheet td { display: block; }
  .pr-sheet thead { display: none; }
  .pr-parent > th { padding-left: 0; padding-right: 0; }
  /* a row: its ref and name across, then its surcharges three across, each its column's name written in it */
  .pr-sheet tr[data-prurow] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding: 12px 0 4px; border-top: 1px solid var(--pn-line); }
  /* a surcharge a row does not have, and travel (always in the quote, as the card says), take no room on a phone */
  .pr-sheet td:is(.pr-none, .pr-inq) { display: none; }
  .pr-sheet tr[data-prurow] > * { border-top: 0; padding: 0; min-width: 0; }
  .pr-sheet tr > .pr-rhead { grid-column: 1; width: auto; }
  .pr-sheet tr > .pr-rname { grid-column: 2 / -1; min-width: 0; }
  .pr-sheet td.pr-sbox { width: auto; }
  .pr-sheet td[data-c]::before { content: attr(data-c); display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 500; letter-spacing: .1em;
    color: var(--pn-muted); }
  .pr-errs > td { padding: 0; }
}

/* ---------- CALCULATOR STEPS AND PHOTO: a row a type, its steps Ask or Skip, its photo's focus ---------- */
.pr-stepwrap { max-width: 100%; min-width: 0; overflow-x: auto; margin-top: 10px; }
.pr-steps { width: 100%; border-collapse: collapse; font-size: 13px; }
.pr-steps th, .pr-steps td { padding: 10px 12px 10px 0; text-align: left; vertical-align: middle; }
.pr-steps thead th { font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--pn-t-soft); border-bottom: 1px solid var(--pn-line); white-space: nowrap; }
.pr-steps tbody tr:not(.pr-second) > * { border-top: 1px solid var(--pn-line); }
.pr-steps tbody tr:first-child > * { border-top: 0; }
.pr-stype { min-width: 11em; font-weight: 400; }
.pr-stn { display: block; font-size: 14px; }
.pr-stype small { display: block; margin-top: 2px; font-size: 12px; color: var(--pn-t-soft); }
.pr-stype .pr-keepall { margin-top: 8px; }
@container (max-width: 759.98px) {
  .pr-stepwrap { overflow: visible; }
  .pr-steps, .pr-steps tbody, .pr-steps tr, .pr-steps th, .pr-steps td { display: block; }
  .pr-steps thead { display: none; }
  .pr-steps tbody tr { padding: 12px 0 4px; border-top: 1px solid var(--pn-line); }
  .pr-steps tbody tr:first-child, .pr-steps tbody tr.pr-second { border-top: 0; padding-top: 0; }
  .pr-steps tbody tr > * { border-top: 0; padding: 0 0 10px; }
  .pr-steps td[data-c] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 44px; }
  .pr-steps td[data-c]::before { content: attr(data-c); font-size: 13px; color: var(--pn-t-soft); }
}

/* ---------- PUBLIC HOLIDAYS: by year, each year a fold, each day a short line of its day, its name and its cross ---------- */
.pr-next { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin: 12px 0 4px; padding: 0 10px; border: 1px solid var(--pn-line); border-radius: var(--pn-r);
  font-size: 13px; }
.pr-next .pn-gl { width: 16px; height: 16px; flex: none; }
.pr-hols { display: grid; margin-top: 8px; }
.pr-yh { display: flex; align-items: baseline; gap: 10px; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 8px 2px; border: 0;
  border-top: 1px solid var(--pn-line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pr-yt { font: 300 19px/1.2 var(--font-display); letter-spacing: -.01em; }
.pr-yh small { font-size: 12.5px; color: var(--pn-t-soft); }
.pr-yh .pn-gl { width: 18px; height: 18px; flex: none; margin-left: auto; align-self: center; color: var(--pn-t-soft); transition: transform .15s; }
.pr-yh[aria-expanded="true"] .pn-gl { transform: rotate(180deg); }
.pr-hlist { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; padding-bottom: 8px; }
@container (min-width: 760px) { .pr-hlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-hol { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid var(--pn-line); }
.pr-hday { font-size: 13px; color: var(--pn-t-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-hol .wa-pwin { min-width: 0; }
/* on a phone the day is a small line over its name, and the name's box has the row less the cross, so a holiday's name
   shows whole ("Royal Queensla" was cut at 375px, the UX pass, 3 Nov 2026, and "The day after Good Friday" and "Royal
   Queensland Show" still were beside a column of the day, the review the same day) */
@container (max-width: 459.98px) {
  .pr-hol { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 8px 0; }
  .pr-hol > .pr-hday { grid-column: 1 / -1; font-size: 12px; }
  .pr-hol > .wa-pwin { padding-left: 12px; padding-right: 12px; }
}
.pr-hol > .pn-glicon { padding: 0; }
.pr-hnew { margin-top: 10px; }
.pr-hnewk { margin: 0 0 4px; font-size: 12px; color: var(--pn-t-soft); }
.pr-hol.pr-holnew { grid-template-columns: minmax(0, 16em) minmax(0, 1fr) auto; padding: 6px 0; }
@container (max-width: 559.98px) {
  .pr-hol.pr-holnew { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-hol.pr-holnew > .pn-datewrap { grid-column: 1 / -1; }
}
:root[data-app][data-theme] :is(.pr-hol > .pn-glicon, .pr-close) { align-self: center; border-color: transparent; background: none; }

/* ---------- the calculator, /calculator ---------- */
/* two columns only once the event's column can hold its rows (seen at 1024 in Edge, 29 Sep 2026: the column was 313px
   and the slots' pickers had no room); below that, one column, the event card the page's width */
.pr-cols { display: grid; gap: 0; }
.pr-col { display: contents; }
.pr-web { order: 9; }
@media (min-width: 1200px) {
  .pr-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 16px; align-items: start; }
  .pr-col { display: grid; align-content: start; }
  .pr-web { order: 0; }
}
.pr-fgroup { display: grid; gap: 8px; margin-top: 12px; }
.pr-fgroup:first-of-type { margin-top: 0; }
.pr-field { max-width: none; margin-top: 10px; }
/* THE EVENT CARD'S ROWS GO BY THE CARD'S OWN WIDTH, not the screen's (a container: app.css does the same for a job's
   editing card), so a narrow column stacks what a wide one sets side by side. The dropdowns' menus live on the body
   (frame.js), so the container holds none of them. */
.pr-event { container-type: inline-size; }
.pr-two { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 340px) { .pr-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
/* the date takes the room its words need ("Wednesday 30 September 2026"), and No date yet sits beside it once there
   is room for both, under it before */
.pr-two.pr-daterow { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 400px) { .pr-two.pr-daterow { grid-template-columns: minmax(0, 1fr) auto; } .pr-daterow > .pr-nodate { padding-right: 4px; } }
.pr-nodate { display: flex; align-items: center; min-height: 44px; margin-top: 10px; }
/* who it is for is the Studio's pills (THE STUDIO'S ORDER, level 3), the chosen one aria-pressed */
.pr-pills.pn-pills { margin-top: 0; }
/* each row of the four kinds fills the card's width, so they wrap as a block and never leave one short pill hanging
   (the UX pass, 3 Nov 2026: 1, 2 and 1 on a phone, two rows of uneven widths on a computer); the pill's own look */
.pr-pills.pn-pills > .pn-pill { flex: 1 1 auto; }
@media (max-width: 560px) { .pr-pills.pn-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pr-venues { display: grid; gap: 8px; }
.pr-venue { display: flex; align-items: center; gap: 8px; }
.pr-venue > .wa-pwin, .pr-venue > .pn-sfold > .wa-pwin { flex: 1 1 auto; min-width: 0; }
.pr-venue > .pn-glicon { flex: none; padding: 0; }
.pr-ticks { margin-top: 10px; }
/* each dropdown keeps its own select out of sight at 1px (frame.js), but WebKit still counts a long option's words
   ("Someone from the team (A$70.00 an hour, default)") as wider than a phone, so the slots hold their selects (the
   position) and clip what spills over, with room left for the focus ring (seen in WebKit at 390, 29 Sep 2026) */
.pr-slots { position: relative; display: grid; gap: 8px; overflow: hidden; overflow: clip; padding: 4px; margin: -4px; }
/* each photographer: the name and the hours on one line, who shoots it under them the card's whole width, so its
   choice ("Someone from the team, A$50.00 an hour") is read whole; one line of three only in a wide card */
.pr-slot { display: grid; gap: 6px 8px; grid-template-columns: minmax(0, 1fr) 8.5em; grid-template-areas: "n hrs" "who who"; align-items: center; }
.pr-slot > .pr-slotn { grid-area: n; }
.pr-slot > .pr-slotwho { grid-area: who; }
.pr-slot > .pr-slothrs { grid-area: hrs; }
@container (min-width: 620px) { .pr-slot { grid-template-columns: 7.5em minmax(0, 1fr) 8.5em; grid-template-areas: "n who hrs"; } }
/* who shoots it is read whole: its words wrap inside the button rather than being cut (a long name, or the default
   rate at a phone's width, seen in WebKit at 390), and the button grows to hold them */
.pr-slot > .pr-slotwho.pn-ddbtn { height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.pr-slot > .pr-slotwho .pn-ddval { white-space: normal; text-overflow: clip; line-height: 1.35; overflow-wrap: anywhere; }
.pr-slotn { font-size: 12px; color: var(--pn-muted); }
/* the estimate kept from the website: the calculator's note, the soft wash on a hairline (2 Nov 2026, go A) */
.pr-keptbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--pn-r);
  background: var(--pn-soft); border: 1px solid var(--pn-line); }
.pr-keptbar > p { margin: 0; flex: 1 1 220px; font-size: 13px; line-height: 1.45; }

/* what the client sees: the website's own breakdown, the amounts on the right in tabular figures */
.pr-est { width: 100%; border-collapse: collapse; font-size: 14px; }
.pr-est th { padding: 9px 12px 9px 0; text-align: left; font-weight: 400; vertical-align: top; }
.pr-est th > b { display: block; font-weight: 500; }
.pr-est th > span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--pn-muted); }
.pr-est td { padding: 9px 0; text-align: right; vertical-align: top; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pr-est tbody tr + tr > * { border-top: 1px solid var(--pn-line); }
.pr-est .pr-total > * { padding-top: 12px; border-top: 1px solid var(--pn-edge); font-size: 16px; font-weight: 600; }
.pr-notes { display: grid; gap: 6px; margin: 12px 0 0; padding: 0 0 0 18px; font-size: 12.5px; line-height: 1.5; color: var(--pn-muted); }
.pr-compare { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--pn-r); background: var(--pn-hover); font-size: 14px; font-variant-numeric: tabular-nums; }
.pr-why { margin-top: 8px; }

/* behind it */
/* its look is level 2 of THE STUDIO'S ORDER (app.css) */
.pr-h3 { margin: 18px 0 8px; }
.pr-behind .pn-sub { margin: 0 0 8px; }
.pr-lines { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pr-lines > li { padding: 10px 0; border-top: 1px solid var(--pn-line); }
.pr-lines > li:first-child { border-top: 0; padding-top: 0; }
.pr-lineh { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 14px; }
.pr-lineh > b { font-weight: 500; flex: 1 1 auto; min-width: 0; }
.pr-amt { flex: none; font-variant-numeric: tabular-nums; }
.pr-lines .pn-note { margin-top: 4px; }
.pr-from { display: grid; gap: 6px; margin: 8px 0 0; padding: 0 0 0 12px; list-style: none; border-left: 2px solid var(--pn-line); font-size: 13px; line-height: 1.45; }
.pr-from .pn-note { display: block; margin-top: 2px; }
.pr-val { font-weight: 500; font-variant-numeric: tabular-nums; }
.pr-list { display: grid; gap: 4px; margin: 0 0 8px; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.pr-warns { margin: 4px 0 0; padding: 0 0 0 16px; color: var(--st-warn); }
.pr-ph { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--pn-r); background: var(--st-warn-bg); border: 1px solid var(--st-warn-line); color: var(--st-warn); font-size: 13px; }
.pr-ph p { margin: 0 0 6px; }
.pr-ph .pr-list { margin-bottom: 4px; }
.pr-ph a { color: inherit; font-weight: 600; }

/* from the website: each a row to press */
.pr-weblist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* a row on the card's face in a hairline, washed under the mouse; the one open is the picked look, the soft wash in a
   1.5px ink ring (2 Nov 2026, go A) */
.pr-webrow { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--pn-line); border-radius: var(--pn-r);
  background: var(--pn-face); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pr-webrow > b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.pr-webrow > span { font-size: 12.5px; color: var(--pn-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .pr-webrow:hover { background: var(--pn-hover); } }
.pr-webrow[aria-current="true"] { border-color: transparent; background: var(--pn-soft); box-shadow: inset 0 0 0 1.5px var(--pn-ink); }

/* start a quote: which job, then the question */
.pr-qback { margin: 0 0 4px; }
.pr-qback > .pn-link { color: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .pr-qback > .pn-link { min-height: 44px; } }
.pr-qlist { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; margin: 10px 0 0; padding: 0; list-style: none; }
.pr-qpick { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--pn-line); border-radius: var(--pn-r);
  background: var(--pn-face); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pr-qpick > b { font-weight: 500; overflow-wrap: anywhere; }
.pr-qpick > span { font-size: 12.5px; color: var(--pn-muted); }
@media (hover: hover) { .pr-qpick:hover { background: var(--pn-hover); } }

@media (pointer: coarse) {
  .pr-go, .pr-row .pn-check, .pr-ticks .pn-check { min-height: 44px; }
}

/* A TICK THAT WOULD CHANGE NOTHING (report 35, 29 Sep 2026): "Keep fewer photographers" while the guests call for no
   more than are picked is greyed, words and all, and does not look pressable */
.pr-page .pn-check input:disabled + span { opacity: .45; }
.pr-page .pn-check:has(input:disabled) { cursor: default; }