/* Guest pages of the platform (sign in, sign up, password reset, choose workspace) dressed like the website
   ("Evergreen & Ember"): a deep aurora panel beside a calm form on alabaster paper, Newsreader headlines, Geist for
   everything else, one ember button. Loaded from app/views/platform/_pg_top.php inside the shared bare layout; every
   rule is scoped to pages that contain .pg, so the app's own sign-in (single installation) keeps its look. Carries its
   own tokens, so it does not depend on app.css. Respects prefers-color-scheme and an explicit data-theme. */
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-400i.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

body:has(.pg) {
  --pg-paper: #F6F4EE; --pg-sheet: #FFFFFF; --pg-ink: #10201A; --pg-ink-2: #3C4D45; --pg-ink-3: #5B6B63; --pg-rule: #E2E0D7; --pg-rule-strong: #C6C8BE;
  --pg-green: #166A4A; --pg-green-hover: #125A3E; --pg-ember: #F25A2B; --pg-ember-hover: #E14E20; --pg-ember-ink: #1A0A04;
  --pg-deep: #0B1F18; --pg-deep-ink: #EEF3EF; --pg-deep-mute: #A8B8AF; --pg-deep-rule: #2E5A49; --pg-mint: #7FE0B0; --pg-ember-on-deep: #FF8A5C;
  --pg-bad: #C83E3E; --pg-bad-bg: #FBE3E0; --pg-ok: #157A4B; --pg-ok-bg: #DFF2E7;
  --pg-glow-a: oklch(62% .13 160 / .55); --pg-glow-b: oklch(70% .19 40 / .45); --pg-glow-c: oklch(78% .12 170 / .35);
  --pg-serif: "Newsreader", "Iowan Old Style", Georgia, serif; --pg-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pg-ease: cubic-bezier(.2, .7, .2, 1); --pg-spring: cubic-bezier(.34, 1.56, .64, 1);
  margin: 0; background: var(--pg-paper); color: var(--pg-ink); font-family: var(--pg-sans); color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:has(.pg) { --pg-paper: #0B1F18; --pg-sheet: #12352A; --pg-ink: #E6EDE8; --pg-ink-2: #BFCCC5; --pg-ink-3: #9AA8A1; --pg-rule: #1F4235; --pg-rule-strong: #2E5A49; --pg-green: #2E9B6E; --pg-green-hover: #3FB07F; --pg-ember: #FF7A4D; --pg-ember-hover: #FF8E66; --pg-deep: #061410; --pg-bad: #FF7B7B; --pg-bad-bg: #3D1C1C; --pg-ok: #7FE0B0; --pg-ok-bg: #16382A; color-scheme: dark; }
}
:root[data-theme="dark"] body:has(.pg) { --pg-paper: #0B1F18; --pg-sheet: #12352A; --pg-ink: #E6EDE8; --pg-ink-2: #BFCCC5; --pg-ink-3: #9AA8A1; --pg-rule: #1F4235; --pg-rule-strong: #2E5A49; --pg-green: #2E9B6E; --pg-green-hover: #3FB07F; --pg-ember: #FF7A4D; --pg-ember-hover: #FF8E66; --pg-deep: #061410; --pg-bad: #FF7B7B; --pg-bad-bg: #3D1C1C; --pg-ok: #7FE0B0; --pg-ok-bg: #16382A; color-scheme: dark; }

/* the bare layout's own split (app look) steps aside */
body:has(.pg) .auth-split { display: block; min-height: 100vh; background: var(--pg-paper); }
body:has(.pg) .auth-side, body:has(.pg) .mobile-brand { display: none !important; }
body:has(.pg) .auth-main { display: block; padding: 0; }
body:has(.pg) .auth-card { max-width: none; }
body:has(.pg) .auth-card > .alert { max-width: 560px; margin: 16px auto 0; }
.pg .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
.pg :focus-visible { outline: 2px solid var(--pg-ember); outline-offset: 3px; border-radius: 4px; }

/* ---- the split ----------------------------------------------------------------------------------------- */
.pg { min-height: 100vh; display: grid; grid-template-columns: 1fr; font: 400 1rem/1.55 var(--pg-sans); color: var(--pg-ink); }
@media (min-width: 980px) { .pg { grid-template-columns: minmax(380px, 44%) minmax(0, 1fr); } .pg-narrow { grid-template-columns: minmax(380px, 40%) minmax(0, 1fr); } }

/* ---- the panel ----------------------------------------------------------------------------------------- */
.pg-panel { position: relative; overflow: hidden; isolation: isolate; background: var(--pg-deep); color: var(--pg-deep-ink); padding: clamp(22px, 3vw, 40px) clamp(20px, 4vw, 56px); display: grid; grid-template-rows: auto 1fr auto; gap: 32px; }
.pg-panel > * { position: relative; z-index: 1; }
@media (min-width: 980px) { .pg-panel { position: sticky; top: 0; height: 100vh; } }
@media (max-width: 979px) { .pg-panel { gap: 18px; padding-bottom: 28px; } .pg-panel .pg-word { display: none; } .pg-narrow .pg-panel-body, .pg-login .pg-lines, .pg-login .pg-note, .pg-panel-foot { display: none; } .pg-narrow .pg-panel { display: none; } }
.aurora-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora-bg .au { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9; will-change: transform; }
.au-1 { width: 70vw; height: 70vw; max-width: 820px; max-height: 820px; left: -24%; top: -26%; background: radial-gradient(circle at 40% 40%, var(--pg-glow-a), transparent 62%); }
.au-2 { width: 56vw; height: 56vw; max-width: 700px; max-height: 700px; right: -30%; top: 20%; background: radial-gradient(circle at 60% 50%, var(--pg-glow-b), transparent 62%); }
.au-3 { width: 50vw; height: 50vw; max-width: 600px; max-height: 600px; left: 10%; bottom: -34%; background: radial-gradient(circle at 50% 50%, var(--pg-glow-c), transparent 62%); }
.grain { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .07; mix-blend-mode: overlay; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .au-1 { animation: pg-au-a 30s ease-in-out infinite alternate; } .au-2 { animation: pg-au-b 36s ease-in-out infinite alternate; } .au-3 { animation: pg-au-c 42s ease-in-out infinite alternate; }
  @keyframes pg-au-a { from { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(12%, 10%, 0) scale(1.12); } to { transform: translate3d(-6%, 16%, 0) scale(.96); } }
  @keyframes pg-au-b { from { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-14%, 12%, 0) scale(1.08); } to { transform: translate3d(6%, -10%, 0) scale(1.16); } }
  @keyframes pg-au-c { from { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(10%, -14%, 0) scale(1.1); } to { transform: translate3d(-12%, -4%, 0) scale(.94); } }
  .pg-panel-body > * { animation: pg-up .8s var(--pg-ease) both; }
  .pg-panel-body > :nth-child(2) { animation-delay: 80ms; } .pg-panel-body > :nth-child(3) { animation-delay: 160ms; }
  .pg-form > * { animation: pg-up .6s var(--pg-ease) both; }
  .pg-form > :nth-child(2) { animation-delay: 60ms; } .pg-form > :nth-child(3) { animation-delay: 120ms; } .pg-form > :nth-child(n+4) { animation-delay: 180ms; }
  @keyframes pg-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
.pg-word { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font: 500 1.5rem/1 var(--pg-serif); letter-spacing: -.01em; justify-self: start; }
.pg-word:hover { color: inherit; }
.pg-mark { width: 32px; height: 32px; border-radius: 9px; transition: transform .4s var(--pg-spring); }
.pg-word:hover .pg-mark { transform: rotate(-6deg) scale(1.05); }
.pg-panel-body { display: grid; gap: 26px; align-content: center; max-width: 520px; }
.pg-pitch { margin: 0; font: 400 clamp(2rem, 1.2rem + 2.6vw, 3.4rem)/1.04 var(--pg-serif); letter-spacing: -.014em; max-width: 14ch; color: #fff; text-wrap: balance; }
.pg-pitch em { font-style: italic; color: var(--pg-ember-on-deep); }
.pg-lines { margin: 0; display: grid; max-width: 440px; }
.pg-lines div { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(238, 243, 239, .14); }
.pg-lines dt { color: var(--pg-deep-mute); white-space: nowrap; }
.pg-lines div::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(238, 243, 239, .24); transform: translateY(-4px); min-width: 12px; }
.pg-lines dd { order: 2; margin: 0; font-weight: 600; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.pg-lines .pg-mint { color: var(--pg-mint); font: 400 1.35rem/1 var(--pg-serif); }
.pg-note { margin: 0; font-size: .875rem; color: var(--pg-deep-mute); }
.pg-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 16px; max-width: 460px; }
.pg-steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 0 12px; color: var(--pg-deep-mute); }
.pg-steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: 400 .9rem/1.6 ui-monospace, "Geist Mono", monospace; color: var(--pg-ember-on-deep); letter-spacing: .04em; }
.pg-steps b { color: #fff; font-weight: 600; }
.pg-promises { margin: 0; padding: 18px 0 0; list-style: none; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(238, 243, 239, .14); font-size: .9375rem; color: var(--pg-deep-ink); }
.pg-promises li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pg-mint); margin-right: 8px; vertical-align: 1px; }
@media (max-width: 520px) { .pg-promises { grid-template-columns: 1fr; } }
.pg-panel-foot { margin: 0; font-size: .8125rem; color: var(--pg-deep-mute); max-width: 60ch; }

/* ---- the form column ------------------------------------------------------------------------------------- */
.pg-main { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; padding: 0 clamp(16px, 4vw, 56px); }
@media (max-width: 979px) { .pg-main { min-height: 0; } }
.pg-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 72px; padding: 10px 0; }
.pg-word-s { color: var(--pg-ink); font-size: 1.4rem; }
.pg-word-s .pg-mark { width: 28px; height: 28px; }
@media (min-width: 980px) { .pg-word-s { display: none; } .pg-top { justify-content: flex-end; } }
.pg-alt { margin: 0; font-size: .9375rem; color: var(--pg-ink-2); }
.pg-alt a { color: var(--pg-green); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; padding-bottom: 2px; transition: background-size .3s var(--pg-ease); }
.pg-alt a:hover { background-size: 100% 2px; }
.pg-grid { width: 100%; display: grid; justify-content: center; align-content: center; padding: clamp(16px, 4vw, 48px) 0 56px; }
.pg-form { width: 100%; max-width: 460px; justify-self: center; }
.pg-signup .pg-form { max-width: 520px; }
.pg-eyebrow { margin: 0 0 10px; font: 600 .8125rem/1.3 var(--pg-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pg-green); display: inline-flex; align-items: center; gap: 10px; }
.pg-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--pg-ember); border-radius: 1px; }
.pg-form h1 { font: 400 clamp(2.3rem, 1.7rem + 2.2vw, 3.3rem)/1.02 var(--pg-serif); letter-spacing: -.014em; margin: 0 0 10px; color: var(--pg-ink); text-wrap: balance; }
.pg-form h1 em { font-style: italic; color: var(--pg-green); }
.pg-form .lede { font-size: 1.0625rem; color: var(--pg-ink-2); margin: 0 0 22px; }
.pg-form form { display: block; }
.pg-form label { display: block; font: 600 .9rem/1.3 var(--pg-sans); color: var(--pg-ink-2); margin: 16px 0 6px; }
.pg-form .muted { color: var(--pg-ink-3); font-weight: 400; }
.pg-form input:not([type="checkbox"]):not([type="radio"]), .pg-form select { width: 100%; font: 500 1.0625rem/1.2 var(--pg-sans); padding: 12px 13px; border-radius: 10px; border: 1px solid var(--pg-rule-strong); background: var(--pg-sheet); color: var(--pg-ink); box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.pg-form input:not([type="checkbox"]):not([type="radio"]):focus-visible, .pg-form select:focus-visible { outline: none; border-color: var(--pg-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pg-green) 22%, transparent); }
.pg-form .pw-wrap { position: relative; }
.pg-form .pw-wrap input { padding-right: 48px; }
.pg-form .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--pg-ink-3); border-radius: 8px; cursor: pointer; }
.pg-form .pw-toggle:hover { background: color-mix(in srgb, var(--pg-ink) 7%, transparent); color: var(--pg-ink); }
.pg-form .pw-toggle .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pg-form .caps-hint { margin-top: 6px; font-size: .875rem; color: var(--pg-bad); }
.pg-form .caps-hint[hidden] { display: none; }
.pg-form .help { font-size: .875rem; color: var(--pg-ink-3); margin-top: 6px; line-height: 1.45; }
.pg-form .help a { color: var(--pg-green); }
.pg-form label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--pg-ink); cursor: pointer; margin: 16px 0 0; line-height: 1.45; }
.pg-form label.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pg-green); flex: none; }
.pg-form label.check small.help { display: block; font-weight: 400; margin-top: 2px; }
.pg-form .alert { padding: 12px 14px; border-radius: 10px; margin: 0 0 16px; font-size: .9375rem; background: var(--pg-sheet); border: 1px solid var(--pg-rule); color: var(--pg-ink); }
.pg-form .alert.error { background: var(--pg-bad-bg); border-color: transparent; color: var(--pg-ink); border-left: 4px solid var(--pg-bad); }
.pg-form .alert ul { margin: 0; padding-left: 1.2em; }
.pg-form .form-actions { margin-top: 22px; }
.pg-form .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1.0625rem/1.2 var(--pg-sans); padding: 14px 22px; min-height: 50px; border-radius: 999px; border: 1px solid var(--pg-rule-strong); background: var(--pg-sheet); color: var(--pg-ink); text-decoration: none; cursor: pointer; box-shadow: none; transition: background-color .18s, border-color .18s, transform .35s var(--pg-spring), box-shadow .25s; }
.pg-form .btn:hover { border-color: var(--pg-ink); background: var(--pg-sheet); transform: translateY(-1px); }
.pg-form .btn:active { transform: translateY(1px); }
.pg-form .btn.block { width: 100%; }
.pg-form .btn.primary, .pg-form a.btn.primary { background: var(--pg-ember); border-color: var(--pg-ember); color: var(--pg-ember-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 22px -10px rgba(242, 90, 43, .7); }
.pg-form .btn.primary:hover { background: var(--pg-ember-hover); border-color: var(--pg-ember-hover); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 28px -10px rgba(242, 90, 43, .85); }
.pg-form > p.help { font-size: .9375rem; margin-top: 8px; }
.pg-form > form + p.help { margin-top: 18px; }
.pg-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pg-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.pg-set legend, .pg .plan-pick legend { font: 400 1.5rem/1.2 var(--pg-serif); color: var(--pg-ink); padding: 0; margin: 10px 0 0; }
.pg .plan-pick { border: 0; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.pg .plan-pick legend { margin-bottom: 10px; }
.pg .plan-pick label.check { margin: 0; padding: 12px 14px; border: 1px solid var(--pg-rule-strong); border-radius: 12px; background: var(--pg-sheet); transition: border-color .15s, box-shadow .15s, transform .2s var(--pg-spring); }
.pg .plan-pick label.check:hover { border-color: var(--pg-ink-2); transform: translateY(-1px); }
.pg .plan-pick label.check:has(input:checked) { border-color: var(--pg-green); box-shadow: inset 0 0 0 1px var(--pg-green), 0 0 0 3px color-mix(in srgb, var(--pg-green) 14%, transparent); }
.pg .plan-pick b { color: var(--pg-ink); }
.pg .ws-pick { margin-top: 10px; }
.pg .ws-pick .btn { justify-content: space-between; text-align: left; }
.pg .ws-pick .btn::after { content: "\2192"; color: var(--pg-green); transition: transform .3s var(--pg-spring); }
.pg .ws-pick .btn:hover::after { transform: translateX(4px); }

.pg-foot { padding: 22px 0 28px; border-top: 1px solid var(--pg-rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .875rem; color: var(--pg-ink-3); }
.pg-foot p { margin: 0; }
.pg-foot a { color: var(--pg-ink-2); margin-right: 14px; text-decoration: none; }
.pg-foot a:hover { color: var(--pg-ink); text-decoration: underline; }
@media (min-width: 980px) { .pg-foot > p:first-child { display: none; } }
@media (prefers-reduced-motion: reduce) { .pg *, .pg *::before, .pg *::after { animation: none !important; transition: none !important; } }