/* ======================================================================
   park-help.css — HELP IN REACH. The crisis pill, for pages that are not
   games. Added 9 August 2026.

   WHAT WAS WRONG. The crisis numbers were already correct, current, dialled
   and on all 49 sitemap pages — verified against lifeline.org.au and
   health.gov.au, as real tel: links, in the static HTML so they survive
   JavaScript being off. None of that is in question and none of it is
   touched here. What was wrong is REACH: measured at 390x844 on this tree
   (commit e032b38), the distance from the top of the document to the first
   dialled crisis link was

       median 3.3 phone screens across all 49, mean 4.6
       worst  16.3 screens  (life/videos.html, y=13,774)
              14.9          (avatar.html)
              14.4          (evidence.html)
              12.5          (home-school/)
               3.3          (park-counselling.html, y=2,766)
               3.3          (park-ndis.html,         y=2,794)

   and only 9 of 49 pages had a dialled number in the first screen — eight of
   them games, which already carry this pill, plus portal.html. Forty pages
   made a person scroll. The two that matter most are the counselling and the
   NDIS clearings: somebody on those pages at 11pm is the exact person this
   organisation exists for, and they were three and a bit screens away from a
   number that dials.

   (For the record, because a review is a dated record: the review that
   commissioned this work measured counselling and NDIS at 2.5 screens each,
   a median of 3.0, and 44 of 49 pages needing a scroll. Re-measured on this
   commit: 3.3 and 3.3, median 3.31, and 40 of 49 — the two clearings grew
   between the readings, counselling by 622px, and the games gained the pill.
   The review's conclusion was right and its arithmetic has moved, in the
   direction that understated its own case. Both numbers are kept, and the
   correction is written beside the claim in tools/help-path-review.md rather
   than over the top of it.)

   WHAT THIS IS DERIVED FROM. game/index.html:335-402 — the same <details>
   pill, the same three numbers, the same reasons. Read the note there; it is
   the original and it is better written than this one. In short: <details>
   is a disclosure widget the BROWSER implements, so the affordance renders
   with scripts off, blocked or broken, is in the tab order for free, toggles
   on Enter for free, and announces itself as a labelled expandable control
   for free. Nothing here is generated, so there is nothing here to fail.
   Charter rule 14 — the park still opens without JavaScript — is the reason
   it is built this way and not as a script.

   WHY IT IS CLOSED. Every page that carries this pill ALREADY states the
   three numbers in its own content, and a screen reader already reads them
   out down there. A second, open copy would be a second announcement of the
   same three numbers on every page of the site. A closed <details> exposes
   exactly one extra thing to the accessibility tree — the summary — and its
   contents are not in the tree at all until somebody opens it. Measured:
   accessible-tree occurrences of "13 11 14" per page, before 1, after 1.
   That is the whole reason it is a disclosure and not a bar.

   WHY IT IS DARK WITH A PALE EDGE, AND NOT A COLOUR. This is not taste, it
   is the only pair that survives every backdrop on this site. A crew this
   same night found the site's contrast derivation had used the CSS sky when
   the real worst backdrop was the 3-D scene clipping to pure white; sampled
   in this pill's own footprint on park-counselling.html at 390x844, the
   brightest real pixel is #FFFFF8, luminance 0.996 — so a light pill would
   vanish there. Sampled at the other end of the same page the darkest is
   #091513, luminance 0.006 — so a dark pill's EDGE would vanish there.
   A UI component's boundary needs 3:1 (WCAG 1.4.11), and one colour cannot
   hold both ends. So the boundary is carried by two colours at once:

       body   #0C1A1C  vs a light backdrop  — 17.79:1 against pure white
       border #E0D9C8  vs a dark  backdrop  — 12.80:1 against #08191C

   Solve for the worst possible backdrop rather than the ones that happen to
   be there today: the two curves cross at backdrop luminance 0.172, where
   both read 3.46:1. So the boundary of this pill is >= 3.46:1 against ANY
   colour a page can ever put behind it, including one nobody has drawn yet.
   Text on the pill: #F4F0E6 on #0C1A1C = 15.64:1, and the numbers
   #F5CE86 = 11.91:1 — AA wants 4.5 and this is the element you least want to
   be squinting at.

   WHERE IT SITS. Every position here was chosen by measuring, on all 38
   pages at 390x844 and 1280x800, what text and what tap target falls inside
   the pill's rectangle at the top of the scroll and at the bottom of the
   scroll. Eleven bottom offsets from 14px to 300px were swept on both sides
   before any of these numbers were chosen.
     - Clearing pages (.ps-help--clearing): right, 132px up. Their bottom-left
       corner is park-ambient.js's #park-sound (12,792, 40x40 at 390) and the
       end of their scroll is .backline, the way out — landing on either is
       forbidden. At 132px the pill sits at y674..712: 32px clear of the
       panel's first line at the top of the scroll, 10px clear of .backline at
       the bottom, and clear of .wren-note at 1280. Verified on all ten.
     - avatar.html and life/map.html (.ps-help--raised): right, 160px up. At
       62 the pill sat on a colour radio on avatar.html at 1280 and on a map
       beacon button on life/map.html at 390 — both are controls, and a
       control is the one thing this may never cover. 160 is the nearest
       offset clear at both widths and both ends.
     - Everything else: right, 62px up. 62 and not 14 because early-access.js
       fixes .pa-early across the bottom (12,792, 366x40 at 390) on thirteen
       of these pages. At 62 the pill sits 10px above it.

   WHAT IT COVERS, STATED HONESTLY, INCLUDING WHERE I WAS WRONG. At the
   bottom of the scroll it covers nothing, anywhere, at either width: the
   fourteen page-viewports that failed that first were given room
   (.ps-help-pad below) and re-measured. At the top of the scroll it covers
   nothing on the ten clearing pages, nothing at all at 1280 on any page, and
   at 390 on fifteen of the twenty-eight document pages it sits over exactly
   one line of running body copy — 147x38 px, 1.7% of a 390x844 screen,
   against the 4.4% that .pa-early, a welcome badge, already covers on
   thirteen of the same pages. Final measurement: 76 page-viewports, 0 that
   cover a target at either end, 0 that cover anything at the bottom.

   The first draft of this note claimed the pill never passes over a link or
   a button at ANY scroll position. A sweep of every page's full scroll in
   50px steps FALSIFIED THAT, and the sweep is kept because of it: on the
   clearing pages the pill passes over the "Call ParkSyde" tel: link and the
   "Send a message" button for roughly 150px of scroll out of 2,500-3,300 —
   about 5% of the page — as the column travels under it. That is true of
   every fixed element on a full-bleed single-column phone page, including
   .wayout and .pa-early, and it cannot be designed away; what CAN be
   guaranteed, and is, is that nothing is covered where a reader actually
   comes to rest. Do not restore the stronger claim.

   And the reason it does not simply move to a clear spot on each page: the
   sweep found NO offset between 14px and 300px that is clear of running text
   at the top of the scroll on chat-bench.html at all, and the offset that is
   clear differs page by page on the rest. A safety control that is in a
   different place on every page is worse than one that occludes a line of
   prose, so it does not move.

   IF YOU ARE HERE TO DELETE IT BECAUSE IT LOOKS HEAVY. It is 147x38 px and
   it is the only thing on most of these pages that puts a dialled crisis
   number in front of somebody without asking them to scroll first. Before
   removing it, re-measure the distance table above on the page you are
   removing it from. If that page still shows 3+ screens, the pill is what is
   standing between a person and the number.

   ======================================================================
   THE GUEST'S OWN SIZE CONTROL. Added 10 August 2026, at the owner's ask:
   "give the guest more controll and a minimise button for the lifeline,
   yarn. If it has to stay up make it smaller."

   READ THE NOTE ABOVE BEFORE YOU TOUCH ANY OF THIS. A MINIMISE IS NOT
   PERMISSION TO DELETE. The pill exists because help was measured a median
   3.3 phone screens out of reach, and 3.3 screens on BOTH
   park-counselling.html and park-ndis.html — the two pages in this whole
   site a person in trouble is most likely to be standing on. Minimised, the
   pill is still fixed, still in the viewport at both ends of every scroll,
   and still ONE TAP from three dialled numbers. Nothing about reach
   changes. Only the resting footprint changes, and only because a guest
   asked for it.

   WHAT WAS ACTUALLY MEASURED, because the brief handed over a number that
   was not the pill (CURATOR.md 3b — verify what you are handed):

     brief said           272 x 44 px
     what that is         ONE of the three tel: links INSIDE the open panel.
                          It is not the pill's resting footprint and never was.
     resting, before      149 x 38 px = 1.72% of a 390x844 screen
     resting, after       149.9 x 38  = 1.73%  (145.9 to 151.4 wide across
                          the 39 pages; it was 145 to 150.6 before)
     open panel, before   300 x 265.5 px = 24.2% of a 390x844 screen
     open panel, after    300 x 320.5 px = 29.2%  — the size control is 44
                          tall plus 11 of margin, and it is only on screen
                          while somebody has the panel open
     minimised, closed    44 x 44 px = 0.59% of a 390x844 screen
                          — 65.3% less than the pill it replaces
     minimised, open      300 x 326.5 px

   So the honest statement of the owner's complaint is: the thing in his way
   is 1.7% of the screen at rest and a quarter of the screen when he opens
   it. Both numbers are in the report; neither is 272x44. And the resting
   pill is 0.9px wider than it was, not smaller: the whole saving is in the
   state the guest chooses, which is the only place a saving can come from
   without taking something away from somebody who did not ask.

   HOW IT IS BUILT, AND WHY IT IS SHAPED LIKE THIS.

   The size control lives at the BOTTOM OF THE OPEN PANEL, after the three
   numbers. It is not a fourth thing bolted to the outside of the closed
   pill, and that was a decision with arithmetic behind it rather than
   taste. A permanently visible control beside the closed pill measures
   ~34px of extra width: the resting pill goes 149x38 -> ~185x38, i.e.
   1.72% -> 2.14% of the screen for every guest who never once touches it,
   and the minimised state becomes circle + control = 78x44 = 1.04%. That
   is a 4% saving against today's 1.72% — which is to say the control
   would have eaten the whole point of the feature. In the panel:

     resting pill    149x38  unchanged, 0% growth
     minimised       44x44   0.59%, a 65% saving
     taps to minimise   2 (open the pill, press the control)
     taps to restore    2 (open the circle, press the control)

   Two and two. The owner asked that putting it back be "as easy as
   minimising it", and putting the control in the same place in both states
   is the only arrangement measured here where those two numbers are equal.
   It also means the control never comes between a person and a number:
   it is the LAST thing in the panel, in the DOM and in the tab order.

   IT IS DRAWN, NOT TYPED, AND IT IS NOT AN EMOJI. Both glyphs are inline
   SVG paths in the markup: four arrowheads pulling inward for smaller,
   outward for bigger. The heart went the same way in the same commit —
   it was U+2665, a font character that renders differently on every
   platform, can be promoted to a colour emoji by the system font, and is
   read from the screen reader's own table. It is now a path. Every control
   here is visually wordless and none of them is nameless: the summary
   carries aria-label in both states, and the size button's aria-label and
   title are set by life/park-help.js and change with the state.

   NO SCRIPT, NO CONTROL, FULL PILL. The button carries the `hidden`
   attribute in the static HTML of all 39 pages and life/park-help.js is the
   only thing that removes it. With scripting off, blocked or broken there
   is no size control, `.ps-help--min` is never applied by anything, and
   what renders is the full pill with three dialled links — charter rule 14.
   The minimised state cannot be reached without script and is therefore
   impossible to be STUCK in without script.

   THE CHOICE IS THE GUEST'S AND NOTHING ELSE'S. There is no auto-minimise,
   no timer, no scroll trigger, no first-visit default, and no page that
   minimises itself. park-counselling.html and park-ndis.html can minimise
   like every other page: the reach guarantee is identical in both states,
   so there is no measurement that would justify withholding the control
   there, and withholding it would say to a counselling reader that they
   are not fit to decide the size of a button. Remembered in sessionStorage,
   so it lasts the visit and is gone by the next one — a person who was fine
   on Tuesday is not assumed to be fine on Friday.

   SAME AT EVERY WIDTH. 44x44 on a phone and 44x44 on a desktop. Measured,
   the resting pill costs 1.73% of a 390x844 screen and 0.56% of a
   1280x800 one, so there is a real argument for treating the two widths
   differently — and it is refused, because the guest's choice would then
   mean two different things depending on what they happened to be holding,
   and 44 is the floor at any width. What DOES differ by width is nothing.

   WHAT THIS DOES NOT COVER, SAID OUT LOUD. The seven game pages
   (game/, arcade/, chess/, amaya/, parksydegg/, parksyderole/, play.html)
   carry the SAME pill from their OWN inline copy of these rules and do not
   link this file, so none of them has a size control. They were left alone
   deliberately — reworking seven inline <style> blocks is a different job in
   different files — but a guest who minimises the pill on a clearing page
   and then walks into the arcade will find it full size again, and that is
   an inconsistency somebody should close. index.html is a separate matter
   entirely: it has no .ps-help at all, it has its own full-width .crisis
   strip along the bottom, and nothing in this commit touches it.
   ====================================================================== */

.ps-help{position:fixed;right:12px;bottom:62px;
  /* Above every overlay on purpose, and the same value the games use: a
     pause screen, a cookie strip or a site banner must never be the thing
     between somebody and Lifeline. */
  z-index:2147483000;
  font-family:-apple-system,BlinkMacSystemFont,"IBM Plex Sans","Segoe UI",Roboto,sans-serif;
  width:max-content;max-width:min(300px,calc(100vw - 24px));
  -webkit-user-select:none;user-select:none}

/* The clearing pages' own furniture is measured in the note above. */
.ps-help--clearing{bottom:132px}
/* avatar.html and life/map.html: at 62 this sat on a control. */
.ps-help--raised{bottom:160px}

@media (min-width:721px){
  .ps-help{right:20px}
  .ps-help--clearing{right:22px}
}

.ps-help>summary{list-style:none;cursor:pointer;
  /* gap 6 and not 7, and the padding 13 and not 14: the drawn heart is a
     12px box where U+2665 set at 13.5px measured about 8.7px wide, so
     swapping the character for a path pushed the closed pill from 149x38
     to 154.9x38 — SIX PIXELS WIDER, on a job whose entire ask was "make it
     smaller". Three pixels came back off the gap and the padding and the
     closed pill measures 149.9x38, inside a pixel of what it was. A change
     that grows the thing it was sent to shrink is a failed change even if
     everything else about it works. */
  display:inline-flex;align-items:center;gap:6px;
  /* 38px closed, and 44px of touch target is the three links inside. The
     summary is 38 for the same reason the games' is 36: it must be small
     enough not to be in the way, and the thing you actually dial is 44. */
  min-height:38px;padding:0 13px;border-radius:999px;
  font-size:13.5px;font-weight:700;letter-spacing:.01em;
  background:#0C1A1C;color:#F4F0E6;border:1.5px solid #E0D9C8;
  box-shadow:0 3px 14px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent}
.ps-help>summary::-webkit-details-marker{display:none}
.ps-help>summary::marker{content:""}
.ps-help>summary:hover{background:#14282A}
/* The heart is a drawn path, not U+2665: a font character is somebody else's
   drawing, differs on every platform, can be promoted to a colour emoji, and
   is announced from the screen reader's own table. It is aria-hidden — the
   summary's aria-label is the name, in both states. */
.ps-help-mark{display:block;flex:0 0 auto;width:12px;height:12px}
.ps-help-mark svg{display:block;width:100%;height:100%;fill:currentColor}
/* The ring is gold on the pill (11.21:1) and carries its own dark halo, so
   it is visible on a paper page as well as over the dawn. */
.ps-help>summary:focus-visible,
.ps-help-body a:focus-visible{outline:3px solid #F0C876;outline-offset:2px;
  box-shadow:0 0 0 6px rgba(8,20,20,.92)}
.ps-help[open]>summary{margin-bottom:8px}

.ps-help-body{background:#0C1A1C;border:1.5px solid #E0D9C8;border-radius:13px;
  padding:12px 13px;box-shadow:0 10px 34px rgba(0,0,0,.55);
  -webkit-user-select:text;user-select:text}
.ps-help-body p{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:#CFC8B6}
.ps-help-body a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:44px;padding:0 11px;border-radius:9px;text-decoration:none;
  color:#F4F0E6;border:1px solid rgba(224,217,200,.45);background:rgba(244,240,230,.06)}
.ps-help-body a+a{margin-top:7px}
.ps-help-body a:hover{background:rgba(244,240,230,.14)}
.ps-help-body .nm{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:#CFC8B6}
.ps-help-body .num{font-size:17px;font-weight:800;white-space:nowrap;color:#F5CE86}
.ps-help-body a.em .num{color:#FFB48A}

/* ---- the guest's size control ----------------------------------------
   Last child of the panel, so it is last in the DOM and last in the tab
   order and can never sit between somebody and a number. Wordless — the
   house style is drawn, not typed — and named by aria-label + title, both
   written by life/park-help.js and both changing with the state. 44x44,
   the site's floor, and round so it never reads as a fourth number.
   `hidden` in every page's static HTML: no script, no control. */
.ps-help-size{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-width:44px;min-height:44px;
  margin:11px 0 0 auto;padding:0;
  -webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;
  border-radius:50%;color:#E0D9C8;
  background:rgba(244,240,230,.06);border:1.5px solid rgba(224,217,200,.55)}
.ps-help-size[hidden]{display:none}
.ps-help-size:hover{background:rgba(244,240,230,.16);border-color:#E0D9C8}
.ps-help-size:focus-visible{outline:3px solid #F0C876;outline-offset:2px;
  box-shadow:0 0 0 6px rgba(8,20,20,.92)}
.ps-help-size svg{display:block;width:19px;height:19px;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* two drawings, one button: pull-in while the pill is full, push-out while
   it is minimised. Swapped by CSS off the state class, so the glyph cannot
   disagree with the state even if a script stalls half way. */
.ps-help-size .ps-i-out{display:none}
.ps-help--min .ps-help-size .ps-i-in{display:none}
.ps-help--min .ps-help-size .ps-i-out{display:block}

/* ---- the minimised pill ------------------------------------------------
   44x44 is the floor and is not negotiable: it is this site's own minimum
   target. Smaller than that is not minimised, it is missable. The circle
   carries the same drawn heart, sits in the same corner, is still fixed,
   is still the <details> summary — so it is still ONE TAP from the three
   numbers, and the numbers below it are byte-identical in both states.
   margin-left:auto keeps the circle on the pill's right edge while the
   panel underneath it is open and 300px wide. */
/* THE SIX PIXELS, AND WHY THE CIRCLE SITS LOWER THAN THE PILL.
   The pill is 38px tall and the circle is 44, because 44 is the floor. The
   box is anchored by its BOTTOM, so a taller box grows UPWARD — and the
   first run of this feature therefore pushed the pill's top edge from 100px
   above the viewport floor to 106px. Six pixels. tools/help-reach-check.js,
   the same run in which it was first taught to look at the minimised state,
   came back RED on EIGHT of the thirty-nine pages at 390:

     life/bright-side-share.html  MIN covers a target at top: <A> tel:139276
     life/library.html            MIN covers <A> ../park-counselling.html
     life/news.html               MIN covers <A> ../park-counselling.html
                                            and <A> ../park-psychology.html
     life/kobes.html              MIN covers <TEXTAREA>, and <A> privacy.html
     life/gallery.html            MIN covers <BUTTON> art-card
     life/bright-side-kit.html    MIN covers <A> ../#contact
     life/games.html              MIN covers <A> privacy.html at the bottom
     life/privacy.html            MIN covers <A> privacy.html at the bottom

   A minimise that lands the crisis control on top of a dialled crisis link
   is a worse outcome than not minimising at all, and on bright-side-share it
   did exactly that — 13YARN. Nobody would have seen it: the pill got
   visibly smaller, which is what everyone was looking for.

   So the minimised state gives back the six pixels at the bottom instead of
   taking them at the top. bottom 62 -> 56, 132 -> 126, 160 -> 154, each one
   the published offset minus (44 - 38). The circle's TOP EDGE is then
   identical to the pill's in every position, every clearance in the note
   above still holds unmodified, and the extra height goes downward into
   space that was already measured clear: .pa-early ends 52px up and the
   circle now starts at 56, so the 10px gap the note describes becomes 4px
   and nothing touches. Re-measured after: 0 of 78 page-viewports cover a
   target in either state. */
.ps-help--min{bottom:56px}
.ps-help--min.ps-help--clearing{bottom:126px}
.ps-help--min.ps-help--raised{bottom:154px}

.ps-help--min>summary{display:flex;justify-content:center;
  width:44px;height:44px;min-height:44px;padding:0;margin-left:auto;
  border-radius:50%;gap:0}
.ps-help--min>summary .ps-help-word{display:none}
.ps-help--min .ps-help-mark{width:20px;height:20px}

/* Print: every page that carries this pill also states the three numbers in
   its own content, and that is what belongs on paper. A floating pill
   printed into the top of page one is not a crisis line, it is a smudge. */
@media print{.ps-help{display:none}}

/* ---- scroll clearance -------------------------------------------------
   The pill occupies the band 62..100px above the bottom edge. At the very
   bottom of a scroll that band IS the last 100px of the document, so any
   page whose last 100px carries anything was given 104px of room rather than
   being sat on. THIRTEEN pages needed it, and thirteen is the second answer,
   not the first. The first pass said twenty-four, because the prober scrolled
   to the bottom once — and license.html and life/videos.html reveal content
   as you scroll and grow the document underneath it, so the prober was
   measuring a position part way down and calling it the end. The check now
   scrolls until scrollY stops moving; eleven pages then measured clean and
   had the padding taken back off again. A short scroll is not the bottom of a
   page. The class goes on the page's OWN last block, never on <body>, so the
   footer's own background carries the extra height and no strip of body
   colour appears under a dark footer.

   Measured before, evidence.html at 390x844 at the true bottom of the scroll:
   the pill rect (227,744,151,38) contained the text "13YARN" and "13 92 76" —
   it would have sat squarely on a dialled crisis line. On avatar.html it
   contained the link tel:000 at 390 and tel:139276 and tel:000 at 1280; on
   home-school/, tel:139276; on license.html, "13 11 14". After: those rects
   contain nothing, at either width.

   !important is not decoration. Three of these pages set the padding of that
   same block in their own <style>, which the browser reads AFTER this file,
   and one sets it in a style attribute; without !important the clearance was
   silently thrown away on exactly the pages that most needed it, and the
   measurement caught it.

   UNCHANGED 10 August 2026, and that is a finding rather than an omission.
   The minimised circle is 44px tall against the pill's 38, so the first cut
   of it stood 6px higher and these two numbers were raised to 110/212 to
   suit. They are back at 104/206 because the circle was moved down by the
   same 6px instead (see THE SIX PIXELS, above): its top edge is now
   identical to the pill's in all three positions, so the clearance that was
   measured for the pill is exactly the clearance the circle needs, and
   thirty-nine pages did not gain six pixels of dead space at the foot for a
   state most guests will never use. tools/help-reach-check.js now runs the
   whole bottom-of-scroll scan a second time with the pill minimised, so if
   anybody changes the circle's height again this goes red instead of
   quietly sitting on a footer link. */
.ps-help-pad{padding-bottom:104px!important}
/* .ps-help--raised sits 160..198px up in both states, so its pages need more. */
.ps-help-pad--raised{padding-bottom:206px!important}
@media print{.ps-help-pad,.ps-help-pad--raised{padding-bottom:0!important}}