/* the hub shared styles: top bar, loading state, error page. Tool pages keep their own styles. */
:root {
  --ph-navy: #3E5A86; --ph-navy-ink: #F4F1EA; --ph-tan: #B5865A;
  --ph-bar-bg: #FFFFFF; --ph-bar-fg: #1F2630; --ph-bar-line: #E2E1DA; --ph-muted: #626A76; --ph-menu-bg: #FFFFFF;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ph-bar-bg: #171A20; --ph-bar-fg: #E7E9EC; --ph-bar-line: #2C323C; --ph-muted: #A0A7B2; --ph-menu-bg: #1F232B; --ph-navy: #8EA9D6; } }
:root[data-theme="dark"] { --ph-bar-bg: #171A20; --ph-bar-fg: #E7E9EC; --ph-bar-line: #2C323C; --ph-muted: #A0A7B2; --ph-menu-bg: #1F232B; --ph-navy: #8EA9D6; }

html.ph-loading body { visibility: hidden; }
html.ph-has-bar { padding-top: calc(52px + env(safe-area-inset-top, 0px)); }
.ph-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-sizing: border-box;
  height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex; align-items: center; gap: 12px; background: var(--ph-bar-bg); color: var(--ph-bar-fg);
  border-bottom: 1px solid var(--ph-bar-line); font: 14px/1.2 "IBM Plex Sans", -apple-system, "Segoe UI", Arial, sans-serif;
}
.ph-brand { display: flex; align-items: baseline; gap: 2px; text-decoration: none; color: var(--ph-navy); white-space: nowrap; }
.ph-the { font: 600 13px Georgia, serif; }
.ph-word { font: 700 21px/1 Georgia, serif; }
.ph-hub { font: 600 11px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-tan); margin-left: 6px; }
.ph-app { font-weight: 600; padding-left: 12px; border-left: 1px solid var(--ph-bar-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ph-sp { flex: 1; }
.ph-right { display: flex; align-items: center; gap: 10px; }
.ph-store { font: inherit; color: inherit; background: transparent; border: 1px solid var(--ph-bar-line); border-radius: 8px; padding: 5px 8px; max-width: 46vw; }
.ph-storename { color: var(--ph-muted); white-space: nowrap; }
.ph-acctwrap { position: relative; }
.ph-acct { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--ph-navy); color: var(--ph-navy-ink); font: 600 14px inherit; cursor: pointer; }
.ph-menu { position: absolute; right: 0; top: 40px; min-width: 210px; background: var(--ph-menu-bg); border: 1px solid var(--ph-bar-line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 6px; display: flex; flex-direction: column; }
.ph-menu[hidden] { display: none; }
.ph-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--ph-bar-line); margin-bottom: 4px; }
.ph-who span { color: var(--ph-muted); font-size: 12px; }
.ph-menu a, .ph-menu button { text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 8px 10px; border-radius: 6px; text-decoration: none; cursor: pointer; }
.ph-menu a:hover, .ph-menu button:hover { background: rgba(127,127,127,.12); }
.ph-bar :focus-visible { outline: 2px solid var(--ph-navy); outline-offset: 2px; }
@media (max-width: 520px) { .ph-the, .ph-hub { display: none; } .ph-app { padding-left: 8px; } }

.ph-fatal { max-width: 560px; margin: 12vh auto; padding: 0 16px; font: 16px/1.6 "IBM Plex Sans", Arial, sans-serif; color: #1F2630; }
.ph-fatal h1 { font: 700 28px Georgia, serif; color: #3E5A86; margin: 0 0 8px; }
html.ph-fatal-mode body > :not(.ph-fatal){display:none !important}