/* HOPE — Public Shell
   ===========================================================================
   The general-public front door. Loads AFTER brand-tokens.css and declares no
   @font-face and no fork of --navy / --gold / --cream. Every colour below is
   either a token or derived from one, per the brand gate.

   WHAT THIS SURFACE IS FOR

   The crisis front door answers "I need help tonight." This one answers a
   quieter question: "what is this, and can it help me?" Most people arriving
   here are not in danger. They are annoyed, confused, or curious — a letter
   they don't understand, a form that won't submit, a neighbour they want to
   help. They need one obvious way in, and proof that the thing is real.

   So: one button. Everything else is smaller than it.

   THE IDENTITY, STATED ONCE

   HOPE is Rhode Island's state motto, adopted 1664, set above an anchor on the
   state seal. The app is named after the promise the state already made. That
   is the whole visual thesis and it is why the hero is an anchor held in a
   harbour light rather than a stock illustration.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.hope-public {
  margin: 0;
  background: var(--cream);
  color: var(--on-cream);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  /* Room for the fixed bottom bar, plus the phone's own home indicator. */
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

.ps-shell { width: min(940px, 100%); margin: 0 auto; }

.ps-skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--gold); color: var(--on-gold);
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0; font-weight: 800;
}
.ps-skip:focus { left: 0; }


/* ===========================================================================
   1 · BRAND BAR
   Slim. The wordmark is a promise, not a logo exercise: anchor, name, and the
   one line that says what the app does.
   =========================================================================== */
.ps-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 13px max(16px, env(safe-area-inset-left)) 13px max(16px, env(safe-area-inset-right));
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}
.ps-mark { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; min-width: 0; }
.ps-mark-anchor {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border: 1.5px solid var(--gold); border-radius: 50%;
  color: var(--gold-ink); background: rgba(232, 178, 58, 0.11);
  font-size: 19px;
}
.ps-mark-text b {
  display: block; font-family: var(--font-display);
  font-size: 19px; font-weight: 800; letter-spacing: 0.2em;
  color: var(--navy); line-height: 1.05;
}
.ps-mark-text small {
  display: block; font-size: 10.5px; letter-spacing: 0.03em;
  color: var(--on-cream-muted); margin-top: 2px;
}
.ps-lang {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 6px 13px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--on-cream-muted);
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.07em;
  cursor: pointer;
}
.ps-lang:hover { border-color: var(--navy); color: var(--navy); }


/* ===========================================================================
   2 · MODE CHOOSER
   Three ways to read the same app. This stays at the top, above everything,
   because a person who needs Crisis should never have to scroll to find it —
   and a person who needs Simple should not have to find a settings menu.
   =========================================================================== */
.ps-modes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px max(16px, env(safe-area-inset-left));
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}
.ps-mode {
  display: grid; gap: 1px; place-items: center;
  min-height: var(--tap-min); padding: 8px 6px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--cream); color: var(--on-cream-muted);
  font: inherit; text-align: center; text-decoration: none; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.ps-mode b { font-size: 13.5px; font-weight: 800; letter-spacing: 0.01em; }
.ps-mode small { font-size: 10px; letter-spacing: 0.02em; opacity: .85; }
.ps-mode:hover { border-color: var(--navy-lift); color: var(--navy); }

/* Crisis is never a neutral peer. It carries the urgent hue at rest. */
.ps-mode--crisis { border-color: rgba(179, 53, 45, .45); color: var(--urgent); }
.ps-mode--crisis b { color: var(--urgent); }
.ps-mode--crisis:hover { background: var(--urgent); border-color: var(--urgent); color: #fff; }
.ps-mode--crisis:hover b { color: #fff; }

.ps-mode[aria-pressed="true"] {
  background: var(--navy); border-color: var(--navy); color: var(--on-navy);
}
.ps-mode[aria-pressed="true"] b { color: var(--gold-2); }
.ps-mode[aria-pressed="true"] small { color: var(--on-navy-muted); }


/* ===========================================================================
   3 · THE HERO — "the beacon"
   ---------------------------------------------------------------------------
   The one bold thing on the page. A harbour light turning over dark water,
   with the anchor held in it. Everything else on this surface is deliberately
   quiet so that this reads as the single gesture.

   The sweep is a conic-gradient on a slow 24s rotation. It is ambient, not
   attention-seeking; at that speed the eye reads it as light rather than as
   animation. Under prefers-reduced-motion the token file already freezes it,
   and the static state is a plain radial glow that loses nothing.
   =========================================================================== */
.ps-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(46px, 11vw, 92px) max(20px, env(safe-area-inset-left)) clamp(38px, 8vw, 66px);
  background: radial-gradient(120% 96% at 50% 6%, var(--navy-2) 0%, var(--navy) 58%, #08182f 100%);
  color: var(--on-navy);
  text-align: center;
}

/* the turning light */
.ps-beam {
  position: absolute; z-index: -2;
  top: 50%; left: 50%; width: 190vmax; height: 190vmax;
  margin: -95vmax 0 0 -95vmax;
  background: conic-gradient(from 0deg,
    rgba(232, 178, 58, 0)    0deg,
    rgba(232, 178, 58, .13)  16deg,
    rgba(247, 220, 134, .21) 26deg,
    rgba(232, 178, 58, .10)  36deg,
    rgba(232, 178, 58, 0)    58deg,
    rgba(232, 178, 58, 0)   180deg,
    rgba(232, 178, 58, .07) 196deg,
    rgba(232, 178, 58, 0)   224deg,
    rgba(232, 178, 58, 0)   360deg);
  animation: ps-turn 24s linear infinite;
  pointer-events: none;
}
@keyframes ps-turn { to { transform: rotate(360deg); } }

/* the water it turns over: a horizon rule that fades at both ends */
.ps-hero::after {
  content: ""; position: absolute; z-index: -1;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 178, 58, .55) 22%, rgba(232, 178, 58, .55) 78%, transparent);
}

.ps-hero-inner { position: relative; width: min(660px, 100%); margin: 0 auto; }

.ps-anchor {
  width: 74px; height: 74px; margin: 0 auto 20px;
  display: grid; place-items: center;
  border: 2px solid rgba(232, 178, 58, .5); border-radius: 50%;
  background: rgba(13, 31, 60, .55);
  color: var(--gold); font-size: 34px; line-height: 1;
  box-shadow: 0 0 0 9px rgba(232, 178, 58, .07), 0 0 46px rgba(232, 178, 58, .2);
}

.ps-wordmark {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(46px, 13vw, 88px); font-weight: 800;
  letter-spacing: 0.15em; text-indent: 0.15em; /* optical centring for the tracking */
  line-height: .95; color: var(--cream);
}

.ps-motto {
  margin: 14px auto 0; max-width: 30ch;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-lead); line-height: 1.45; color: var(--gold-2);
}
.ps-motto-sub {
  margin: 9px auto 0; max-width: 40ch;
  font-size: 13px; line-height: 1.5; color: var(--on-navy-muted);
}

/* ---- THE BUTTON. The reason the page exists. ---- */
.ps-ask {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(500px, 100%); margin: clamp(30px, 6vw, 44px) auto 0;
  min-height: 82px; padding: 18px 22px 18px 26px;
  border: 0; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 62%, #d9a32c 100%);
  color: var(--on-gold);
  font-family: var(--font-display); font-size: clamp(21px, 4.6vw, 28px);
  font-weight: 800; line-height: 1.15; text-align: left; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 253, 247, .3) inset;
  transition: transform .16s ease, box-shadow .16s ease;
}
.ps-ask:hover, .ps-ask:focus-visible { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 253, 247, .45) inset; }
.ps-ask:active { transform: translateY(0); }
.ps-ask-arrow {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(19, 32, 47, .13); font-size: 22px;
}

.ps-ask-note {
  margin: 14px auto 0; max-width: 42ch;
  font-size: 12.5px; line-height: 1.5; color: var(--on-navy-muted);
}
.ps-ask-note b { color: var(--cream); font-weight: 700; }


/* ===========================================================================
   4 · THE TWO KEPT THINGS — the floating Corkboard tab and Feedback pill
   ---------------------------------------------------------------------------
   Lifted verbatim from the original front door so they behave identically on
   both surfaces: same paper, same 2.5° rest angle, same 4s sway, same red
   pushpin, same navy pill on the left.

   Two changes only, both forced by this page rather than chosen:

     1. `bottom` is now measured from the new bottom bar and the phone's home
        indicator instead of the old hard-coded 78px, so they sit above the bar
        on a notched device rather than under it.
     2. --paper and --navy-soft were declared in the old page's own :root, which
        this surface does not load. Their literal values are inlined as
        fallbacks so nothing depends on a stylesheet that is not here.

   civic-shell.css hides both of these under body.hope-civic-shell. This page
   deliberately does not take that class — it is the front door, not a
   secondary surface — so they stay.
   =========================================================================== */
#corkBtn {
  position: fixed; right: 12px; z-index: 80;
  bottom: calc(84px + env(safe-area-inset-bottom));
  background: var(--paper, #e8e4d8); color: #1a1a1a;
  border: none; border-radius: 8px;
  padding: 10px 14px 9px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 7px; text-decoration: none;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .4);
  transform: rotate(2.5deg); transform-origin: top center;
  animation: cork-sway 4s ease-in-out infinite;
}
#corkBtn::before { /* the pushpin */
  content: ""; position: absolute; top: -7px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d65, #b5392f);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
#corkBtn .ck { font-size: 14px; line-height: 1; }
#corkBtn:hover { transform: rotate(0deg) translateY(-2px); }
#corkBtn:active { transform: rotate(0deg) scale(.97); }

@keyframes cork-sway {
  0%, 100% { transform: rotate(2.5deg); }
  50%      { transform: rotate(-1.5deg); }
}

#feedbackBtn {
  position: fixed; left: 12px; z-index: 80;
  bottom: calc(84px + env(safe-area-inset-bottom));
  background: var(--navy-soft, #17315a);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: #9fb0c9;
  cursor: pointer; display: flex; align-items: center; gap: 6px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3); transition: .15s;
}
#feedbackBtn:hover { border-color: var(--gold); color: var(--gold); }
#feedbackBtn:active { transform: scale(.97); }

/* Both are standalone controls but deliberately slimmer than the 44px floor,
   exactly as they shipped: they are persistent furniture rather than primary
   actions, and a 44px band on each side of every screen would crowd the one
   button this page exists for. Their hit areas are generous horizontally. */
#corkBtn, #feedbackBtn { min-height: 0; }

/* On short screens the pair would collide with the hero's call to action. */
@media (max-height: 620px) {
  #corkBtn, #feedbackBtn { display: none; }
}


/* ===========================================================================
   5 · WHAT HOPE IS
   Three lines, no illustrations. A person deciding whether to trust this needs
   claims they can check, not adjectives.
   =========================================================================== */
.ps-what { padding: 26px max(16px, env(safe-area-inset-left)) 34px; }
.ps-what-eyebrow {
  margin: 0 0 14px; font-size: var(--t-meta); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-cream-accent);
}
.ps-what-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) { .ps-what-grid { grid-template-columns: 1fr; gap: 10px; } }

.ps-what-item {
  padding: 16px 17px; border-radius: var(--radius);
  background: var(--cream-2); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}
.ps-what-item b { display: block; font-family: var(--font-display); font-size: 17px; color: var(--navy); margin-bottom: 5px; }
.ps-what-item p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--on-cream-muted); }


/* ===========================================================================
   6 · BOTTOM BAR
   Five slots, not seven. Below about 60px per slot a label stops being read
   and starts being decoration, and this app's own brand file spent a release
   removing 179 sub-44px targets — reintroducing them in the one control every
   screen shares would undo that.

   So the four destinations people reach for daily sit on the bar, Crisis is
   lifted out of the row entirely so it can never be mis-tapped or missed, and
   everything role-shaped lives one tap deep behind More.
   =========================================================================== */
.ps-nav {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
  background: rgba(13, 31, 60, .97);
  backdrop-filter: blur(9px);
  border-top: 2px solid var(--gold);
}
.ps-nav a, .ps-nav button {
  display: grid; place-items: center; gap: 3px;
  min-height: 56px; padding: 6px 2px;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--on-navy-muted); font: inherit; font-size: 10.5px; font-weight: 700;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
}
.ps-nav .ni { font-size: 19px; line-height: 1; }
.ps-nav a:hover, .ps-nav button:hover { color: var(--cream); background: rgba(255, 255, 255, .07); }
.ps-nav [aria-current="page"] { color: var(--gold-2); }

/* Crisis: lifted, gold, and the only round thing on the bar. Shape does the
   work when colour is stripped by forced-colours or a broken stylesheet. */
.ps-nav-crisis {
  position: relative;
  align-self: start; margin-top: -20px;
}
.ps-nav .ps-nav-crisis {
  background: var(--urgent); color: #fff;
  border-radius: 999px; min-height: 62px;
  box-shadow: 0 6px 20px rgba(179, 53, 45, .5), 0 0 0 4px var(--navy);
  font-weight: 900; letter-spacing: .04em;
}
.ps-nav .ps-nav-crisis:hover { background: #c93d34; color: #fff; }


/* ===========================================================================
   7 · MORE SHEET
   =========================================================================== */
.ps-sheet {
  position: fixed; inset: 0; z-index: 40;
  display: grid; align-items: end;
  background: rgba(8, 24, 47, .62);
  padding: 0;
}
.ps-sheet[hidden] { display: none; }
.ps-sheet-card {
  width: min(560px, 100%); margin: 0 auto;
  padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  background: var(--cream-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-top: 3px solid var(--gold);
  max-height: 86vh; overflow-y: auto;
  animation: ps-rise .2s ease-out;
}
@keyframes ps-rise { from { transform: translateY(14px); opacity: 0; } }
.ps-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ps-sheet-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--t-title); color: var(--navy); }
.ps-sheet-close {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent;
  color: var(--on-cream-muted); font-size: 21px; cursor: pointer;
}
.ps-sheet-grid { display: grid; gap: 9px; }
.ps-sheet-action {
  display: flex; align-items: center; gap: 13px;
  min-height: 60px; padding: 12px 15px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--cream); color: inherit; text-decoration: none;
}
.ps-sheet-action:hover { border-color: var(--navy-lift); background: var(--cream-2); }
.ps-sheet-action i { font-style: normal; font-size: 21px; flex: 0 0 auto; }
.ps-sheet-action b { display: block; font-size: 14px; font-weight: 800; color: var(--navy); }
.ps-sheet-action small { display: block; font-size: 12px; color: var(--on-cream-muted); }
.ps-sheet-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--on-cream-muted); }


/* ===========================================================================
   8 · DIRECTORY (directory.html)
   =========================================================================== */
.ps-page-head {
  padding: 30px max(20px, env(safe-area-inset-left)) 26px;
  background: var(--navy); color: var(--on-navy);
  border-bottom: 3px solid var(--gold);
}
.ps-page-head .ps-shell { text-align: left; }
.ps-page-eyebrow {
  margin: 0 0 7px; font-size: var(--t-meta); font-weight: 800;
  letter-spacing: .17em; text-transform: uppercase; color: var(--on-navy-accent);
}
.ps-page-head h1 { margin: 0; font-family: var(--font-display); font-size: var(--t-display); line-height: 1.1; color: var(--cream); }
.ps-page-head p { margin: 10px 0 0; max-width: 56ch; font-size: var(--t-lead); color: var(--on-navy-muted); }

.ps-search-wrap { padding: 18px max(16px, env(safe-area-inset-left)) 4px; }
.ps-search {
  width: 100%; min-height: 54px; padding: 14px 17px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--cream-2); color: var(--on-cream);
  font: inherit; font-size: 16px; /* 16px stops iOS zooming the viewport on focus */
}
.ps-search::placeholder { color: var(--on-cream-muted); }
.ps-search:focus { border-color: var(--navy-lift); outline: none; }
.ps-search-count { margin: 8px 2px 0; font-size: 12px; color: var(--on-cream-muted); }

.ps-dir { padding: 12px max(16px, env(safe-area-inset-left)) 34px; display: grid; gap: 22px; }
.ps-dir-group > h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 11px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--t-title); color: var(--navy);
}
.ps-dir-group > h2 i { font-style: normal; font-size: 21px; }
.ps-dir-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }

.ps-dir-item {
  display: grid; gap: 6px; padding: 14px 15px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--cream-2);
}
.ps-dir-item h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--navy); }
.ps-dir-item p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--on-cream-muted); }
.ps-dir-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.ps-dir-link {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 38px; padding: 7px 12px;
  border: 1.5px solid var(--navy); border-radius: 999px;
  background: transparent; color: var(--navy);
  font-size: 12px; font-weight: 800; text-decoration: none;
}
.ps-dir-link:hover { background: var(--navy); color: var(--cream); }
.ps-dir-link.is-phone { border-color: var(--settled); color: var(--settled); }
.ps-dir-link.is-phone:hover { background: var(--settled); color: #fff; }

/* The journey action. Filled gold, so in a row of outlined links the eye lands
   on the one that keeps the thread rather than the one that opens a website.
   Dark ink on gold is the only correct pairing — white measures 1.93:1. */
.ps-dir-link.is-journey {
  background: var(--gold); border-color: var(--gold); color: var(--on-gold);
}
.ps-dir-link.is-journey::after { content: " →"; }
.ps-dir-link.is-journey:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--on-gold); }

.ps-dir-empty {
  padding: 30px 18px; text-align: center;
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  color: var(--on-cream-muted); font-size: 13.5px;
}
.ps-dir-empty b { display: block; color: var(--navy); font-size: 15px; margin-bottom: 5px; }


/* ===========================================================================
   8b · JOURNEY PICKER
   =========================================================================== */
.ps-journey-note { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--on-cream-muted); max-width: 62ch; }
.ps-journey-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }

.ps-journey {
  display: grid; gap: 3px; align-content: start;
  padding: 14px 15px; min-height: 104px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--cream-2); color: inherit; text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ps-journey:hover { border-color: var(--navy-lift); transform: translateY(-2px); box-shadow: var(--shadow); }
.ps-journey b { font-family: var(--font-display); font-size: 16px; color: var(--navy); line-height: 1.2; }
.ps-journey small { font-size: 11.5px; color: var(--on-cream-muted); }
.ps-journey em { font-style: normal; font-size: 11px; color: var(--on-cream-muted); font-family: var(--font-data); }

/* The grade badge. A filled gold chip means the engine will actually judge the
   documents; an outline means it will only keep your place. The difference is
   the whole promise of the thing, so it is stated on the card rather than
   buried in a tooltip. */
.ps-journey-grade {
  justify-self: start; margin-bottom: 4px;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-cream-muted);
}
.ps-journey-grade.is-verified { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }

@media (forced-colors: active) { .ps-journey, .ps-journey-grade { border: 2px solid CanvasText; } }

/* ===========================================================================
   9 · MOTION AND FORCED COLOURS
   brand-tokens.css already neutralises animation globally under
   prefers-reduced-motion. These rules give the frozen state something worth
   looking at rather than an absence.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ps-beam {
    animation: none;
    background: radial-gradient(closest-side, rgba(232, 178, 58, .17), transparent 70%);
    width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  }
  .ps-cork { animation: none; transform: rotate(-2deg); }
  .ps-sheet-card { animation: none; }
}

@media (forced-colors: active) {
  .ps-beam { display: none; }
  .ps-ask, .ps-tile, .ps-mode, .ps-dir-item, .ps-sheet-action { border: 2px solid CanvasText; }
  .ps-nav { border-top: 2px solid CanvasText; }
  .ps-nav .ps-nav-crisis { border: 3px solid CanvasText; }
}

/* ===========================================================================
   10 · WIDE SCREENS
   The bar and the bottom nav keep their full-bleed grounds — a floating pill
   would read as a widget rather than as the chrome of the app — but their
   contents stop stretching past a comfortable measure.
   =========================================================================== */
@media (min-width: 720px) {
  .ps-modes {
    padding-left: max(calc((100% - 640px) / 2), 16px);
    padding-right: max(calc((100% - 640px) / 2), 16px);
  }
  .ps-nav {
    padding-left: max(calc((100% - 620px) / 2), 12px);
    padding-right: max(calc((100% - 620px) / 2), 12px);
  }
  .ps-bar {
    padding-left: max(calc((100% - 900px) / 2), 16px);
    padding-right: max(calc((100% - 900px) / 2), 16px);
  }
}

@media print {
  .ps-nav, .ps-sheet, .ps-beam, .ps-modes { display: none !important; }
  .ps-hero { background: none !important; color: #000 !important; }
  .ps-wordmark, .ps-motto, .ps-ask-note, .ps-motto-sub { color: #000 !important; }
}

.ps-sheet-open { overflow: hidden; }

.ps-full-row { grid-column: 1 / -1; }