/* ── Port Elysium — App Shell (phone + tablet) ── */
/* ══════════════════════════════════════════════════════════════
Port Elysium — App Shell (phone + tablet)
══════════════════════════════════════════════════════════════
Linked by every page that loads app-shell.js — the public and
portal pages, and the admin consoles, which have no styles.css
of their own. One file, one source of truth.
Everything here is gated behind `html.pe-app`, a class that
app-shell.js adds only once it has successfully built the tab
bar. If that script fails to load, none of these rules apply
and the original desktop nav (including its hamburger) keeps
working exactly as before. Navigation must never depend on a
script that might not arrive.
Breakpoint: the app layout runs below 900px — phones and
portrait tablets. Above that the site stays as it is.
══════════════════════════════════════════════════════════════ */
:root {
--pe-tabbar-h: 58px;
--pe-teal: #0aa3bb;
/* Safe-area insets: iPhone home indicator and notch. Zero on
everything else, so these are harmless on Android/desktop. */
--pe-safe-b: env(safe-area-inset-bottom, 0px);
--pe-safe-t: env(safe-area-inset-top, 0px);
}
/* ── The drawn icon set ─────────────────────────────────────────
Each glyph is built from four classes rather than one path, so a
drawing keeps a hierarchy even at 17px:
.F a soft mass behind the shape, at 15%
.S structure, 1.5
.D detail, 1.1 at 75%
.P a solid mark
--hue is set by whatever holds the glyph and falls back to
currentColor, so the same markup serves a coloured tile (the
Explore launcher, the console side nav) and a monochrome one
(the tab bar). Top level, not inside a media query: the console
side nav is a desktop layout and needs these too. */
.pe-ico { width: 100%; height: 100%; display: block; }
.pe-ico .F { fill: var(--hue, currentColor); fill-opacity: 0.15; stroke: none; }
.pe-ico .S { fill: none; stroke: var(--hue, currentColor); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pe-ico .D { fill: none; stroke: var(--hue, currentColor); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.pe-ico .P { fill: var(--hue, currentColor); stroke: none; opacity: 0.85; }
@media (max-width: 899px), (max-width: 1199px) and (pointer: coarse) {
/* ── The old nav gives way to the app shell ──────────────── */
html.pe-app .menu-toggle,
html.pe-app nav .nav-links { display: none !important; }
html.pe-app nav:not(.pe-tabbar):not(.pe-adm-nav):not(.admin-nav) {
padding: 0.7rem 1rem;
padding-top: calc(0.7rem + var(--pe-safe-t));
justify-content: center;
/* The portal pages carry theme-light, whose body is #ffffff, and
the bottom tab bar is rgba(255,255,255,0.94). A navy bar at the
top left the page framed by one light edge and one dark one,
and logo-dark.png (#1d1d1b) was invisible on it. Same decision
as the consoles: the bar matches the page. */
background: rgba(255,255,255,0.94);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(26,29,33,0.08);
}
html.pe-app nav:not(.pe-tabbar):not(.pe-adm-nav):not(.admin-nav) .logo img { height: 38px; }
/* Room for the tab bar so nothing hides behind it. */
html.pe-app body { padding-bottom: calc(var(--pe-tabbar-h) + var(--pe-safe-b)); }
/* ── Bottom tab bar ──────────────────────────────────────── */
.pe-tabbar {
/* The site's global `nav` rule sets top:0; a fixed element with both
top and bottom set is anchored by top, which would strand the bar
at the head of the page. Reset the inherited nav geometry. */
position: fixed; left: 0; right: 0; bottom: 0; top: auto !important;
margin: 0; justify-content: stretch; z-index: 900;
display: flex; align-items: stretch;
height: calc(var(--pe-tabbar-h) + var(--pe-safe-b));
padding-bottom: var(--pe-safe-b);
background: rgba(9,20,36,0.96);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(255,255,255,0.08);
}
.pe-tab {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 3px;
background: none; border: 0; padding: 0;
color: rgba(255,255,255,0.5); text-decoration: none;
font-family: 'Inter', sans-serif; font-size: 0.58rem;
letter-spacing: 0.06em; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: color 0.2s;
}
.pe-tab svg { width: 22px; height: 22px; stroke-width: 1.5; }
.pe-tab.is-active { color: var(--gold); }
.pe-tab:active { color: var(--gold-light); }
/* A hairline over the active tab — the app convention. */
.pe-tab.is-active::before {
content: ''; position: absolute; top: 0; width: 26px; height: 2px;
background: var(--gold); border-radius: 0 0 2px 2px;
}
.pe-tab { position: relative; }
.pe-tab-badge {
position: absolute; top: 6px; left: 50%; margin-left: 4px;
min-width: 8px; height: 8px; border-radius: 50%;
background: #e74c3c; border: 1.5px solid #091424;
}
/* ── Overlays: Explore grid and Account sheet ────────────── */
.pe-overlay {
position: fixed; inset: 0; z-index: 950;
background: rgba(6,14,26,0.72);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.pe-overlay.is-open { opacity: 1; pointer-events: auto; }
.pe-sheet {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 960;
max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
background: #0d1b30;
border-top: 1px solid rgba(201,169,110,0.25);
border-radius: 18px 18px 0 0;
padding: 0.5rem 0 calc(1rem + var(--pe-safe-b));
transform: translateY(101%); transition: transform 0.28s cubic-bezier(.32,.72,0,1);
}
.pe-sheet.is-open { transform: translateY(0); }
/* The grab handle that tells a thumb this panel is dismissible. */
.pe-sheet::before {
content: ''; display: block; width: 38px; height: 4px; margin: 0.5rem auto 0.9rem;
border-radius: 2px; background: rgba(255,255,255,0.22);
}
.pe-sheet .pe-grid { padding: 0 0.9rem 0.6rem; }
.pe-sheet-title {
font-family: 'Inter', sans-serif; font-size: 0.62rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold); padding: 0 1.4rem 0.7rem;
}
/* The sheet is two named groups now — the person's own account, then
administration. The second heading follows a grid, so it needs the
air the first one gets from the sheet's own top padding. */
.pe-sheet-title-2 { padding-top: 0.9rem; }
/* A badge on a dropdown entry ("Action" on an unfinished KYC step, a
count on Marketing) used to be swallowed into the label, which is
how the tile came out reading "Marketing1". It is a badge, so it is
drawn as one, on the tile's top-right corner. */
.pe-appicon { position: relative; }
.pe-appicon-badge {
position: absolute; top: 0.45rem; right: 50%; transform: translateX(31px);
max-width: 4.6rem; overflow: hidden; text-overflow: ellipsis;
min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
background: #c2564f; color: #fff;
font-family: 'Inter', sans-serif; font-size: 0.55rem; font-weight: 500;
letter-spacing: 0.04em; line-height: 17px; text-align: center;
white-space: nowrap; pointer-events: none;
}
.pe-sheet a:not(.pe-appicon), .pe-sheet button.pe-sheet-item {
display: flex; align-items: center; gap: 0.9rem; width: 100%;
padding: 0.95rem 1.4rem; background: none; border: 0;
border-top: 1px solid rgba(255,255,255,0.05);
color: rgba(255,255,255,0.88); text-decoration: none;
font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 300;
text-align: left; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.pe-sheet a:not(.pe-appicon):active, .pe-sheet button.pe-sheet-item:active { background: rgba(255,255,255,0.05); }
.pe-sheet a:not(.pe-appicon) svg, .pe-sheet button:not(.pe-appicon) svg { width: 18px; height: 18px; stroke-width: 1.5; color: var(--gold); flex: none; }
/* ── Explore: the component launcher ─────────────────────── */
.pe-explore {
position: fixed; inset: 0; z-index: 960;
background: linear-gradient(180deg, #0a1628 0%, #0d1f38 100%);
overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: calc(1.2rem + var(--pe-safe-t)) 1rem calc(var(--pe-tabbar-h) + var(--pe-safe-b) + 1.5rem);
transform: translateY(100%); transition: transform 0.3s cubic-bezier(.32,.72,0,1);
}
.pe-explore.is-open { transform: translateY(0); }
.pe-explore-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 1.4rem; padding: 0 0.3rem;
}
.pe-explore-head h2 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.6rem; font-weight: 300; color: #fff; letter-spacing: 0.02em;
}
.pe-explore-close {
background: none; border: 0; color: rgba(255,255,255,0.6);
font-size: 1.6rem; line-height: 1; padding: 0.2rem 0.5rem; cursor: pointer;
}
.pe-explore-section {
/* 0.6rem is 9.6px — smaller than the tile labels it introduces, so
the sections read as a footnote rather than as structure. */
font-family: 'Inter', sans-serif; font-size: 0.74rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold); margin: 1.8rem 0.3rem 0.9rem;
}
.pe-explore-section:first-of-type { margin-top: 0.4rem; }
.pe-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem;
}
@media (max-width: 359px) { .pe-grid { grid-template-columns: repeat(3, 1fr); } }
.pe-appicon {
display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
padding: 0.85rem 0.25rem; text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
/* The icon tile itself — the thing that makes it read as an app. */
.pe-appicon .pe-appicon-tile {
width: 54px; height: 54px; border-radius: 15px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, rgba(201,169,110,0.16), rgba(201,169,110,0.05));
border: 1px solid rgba(201,169,110,0.22);
transition: transform 0.18s, background 0.18s;
}
.pe-appicon:active .pe-appicon-tile {
transform: scale(0.92);
background: linear-gradient(160deg, rgba(201,169,110,0.3), rgba(201,169,110,0.12));
}
.pe-appicon svg { width: 25px; height: 25px; stroke-width: 1.4; color: var(--gold); }
/* ── The drawn icon set ───────────────────────────────────
Each glyph is built from four classes rather than one path, so a
drawing can have a hierarchy at 25px instead of a uniform wire:
.F a soft mass behind the shape, at 15%
.S structure, 1.5
.D detail, 1.1 at 75%
.P a solid mark — nail holes, studs
--hue is set on the tile by app-shell.js and falls back to
currentColor, so the same markup works in a coloured tile and in
a monochrome context like the tab bar. */
/* The drawn set uses a 32-unit box where the old one used 24, so at the
same rendered px the new glyphs sat noticeably smaller inside the
tile. Compared 25 / 30 / 34 / 38px against the 54px tile: 38 starts
to crowd the corners on the wider drawings (Food & Drink,
Equestrian), 34 fills it and keeps the margin. */
.pe-appicon .pe-ico { width: 34px; height: 34px; }
.pe-tab .pe-ico { width: 25px; height: 25px; }
.pe-howto-ico .pe-ico { width: 23px; height: 23px; }
.pe-sheet a:not(.pe-appicon) .pe-ico,
.pe-sheet button:not(.pe-appicon) .pe-ico { width: 21px; height: 21px; }
/* The tile tints to the icon's hue, which is what gives the grid its
colour at a glance. Without a hue it keeps the original gold. */
.pe-appicon .pe-appicon-tile[style*="--hue"] {
background: color-mix(in srgb, var(--hue) 13%, transparent);
border-color: color-mix(in srgb, var(--hue) 24%, transparent);
}
/* Safari 15 and anything else without color-mix keeps the gold tile
and still gets the coloured glyph — a graceful floor, not a break. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
.pe-appicon .pe-appicon-tile[style*="--hue"] {
background: linear-gradient(160deg, rgba(201,169,110,0.16), rgba(201,169,110,0.05));
}
}
/* Furniture stays line-only: a 15% wash muddies a 22px tab glyph and
competes with the active state. */
.pe-tab .pe-ico .F,
.pe-howto-ico .pe-ico .F,
.pe-sheet a:not(.pe-appicon) .pe-ico .F { display: none; }
.pe-tab .pe-ico .D,
.pe-howto-ico .pe-ico .D { opacity: 0.9; }
.pe-appicon span {
font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 300;
color: rgba(255,255,255,0.8); text-align: center; line-height: 1.25;
}
/* ── Data room as an app ─────────────────────────────────
The desktop 320px tree + viewer split is unusable on a phone.
Folders become icon tiles; opening one lets it span the full
width and reveal its files underneath, so navigation is
drill-down rather than a cramped two-column tree. */
html.pe-app #fdr-layout { display: block !important; }
html.pe-app #fdr-tree {
display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0.55rem;
/* Rows sized to their content, and tiles that do not stretch to the
tallest in the row — otherwise one two-line folder name makes the
whole row tall and four rows fill the screen. */
grid-auto-rows: min-content; align-items: start;
max-height: none !important; background: none !important;
border: 0 !important; overflow: visible !important; margin-bottom: 1.2rem;
}
@media (max-width: 359px) { html.pe-app #fdr-tree { grid-template-columns: repeat(2, 1fr); } }
html.pe-app #fdr-tree .fdr-folder { border: 0 !important; }
html.pe-app #fdr-tree .fdr-folder-title {
flex-direction: column; gap: 0.5rem; justify-content: center;
padding: 0.9rem 0.3rem !important; text-align: center;
font-size: 0.58rem !important; letter-spacing: 0.04em !important;
line-height: 1.25; text-transform: none !important;
border-radius: 14px;
background: linear-gradient(160deg, rgba(201,169,110,0.16), rgba(201,169,110,0.05)) !important;
border: 1px solid rgba(201,169,110,0.22);
min-height: 84px;
}
html.pe-app #fdr-tree .pe-dr-ico {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; color: var(--gold);
}
html.pe-app #fdr-tree .pe-dr-ico svg { width: 25px; height: 25px; stroke-width: 1.4; }
html.pe-app #fdr-tree .fdr-caret { display: none !important; }
html.pe-app #fdr-tree .fdr-key .fdr-folder-title {
background: linear-gradient(160deg, rgba(201,169,110,0.34), rgba(201,169,110,0.12)) !important;
border-color: rgba(201,169,110,0.5);
}
html.pe-app #fdr-tree .fdr-key { border-bottom: 0 !important; }
/* An open folder takes the full row and shows its documents. */
html.pe-app #fdr-tree .fdr-folder.open { grid-column: 1 / -1; }
html.pe-app #fdr-tree .fdr-folder.open .fdr-folder-title {
flex-direction: row; gap: 0.7rem; justify-content: flex-start;
text-align: left; min-height: 0; padding: 0.75rem 0.9rem !important;
border-radius: 12px 12px 0 0; font-size: 0.68rem !important;
}
html.pe-app #fdr-tree .fdr-folder.open .fdr-folder-content {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(201,169,110,0.18); border-top: 0;
border-radius: 0 0 12px 12px;
}
/* Files: real tap targets, not 0.78rem rows. */
html.pe-app #fdr-tree .fdr-file {
padding: 0.85rem 1rem !important; font-size: 0.85rem !important;
display: flex; flex-direction: column; gap: 0.15rem;
}
html.pe-app #fdr-tree .fdr-subfolder-title {
padding: 0.7rem 1rem !important; font-size: 0.7rem !important;
}
/* The viewer only earns its space once a document is open. */
html.pe-app #fdr-viewer-pane { min-height: 62vh !important; }
/* ── How-to-install steps (shown inside the account sheet) ── */
.pe-howto { padding: 0.2rem 1.2rem 0.4rem; }
.pe-howto-step {
display: flex; align-items: flex-start; gap: 0.9rem;
padding: 0.85rem 0; border-top: 1px solid rgba(255,255,255,0.06);
}
.pe-howto-step:first-child { border-top: 0; }
.pe-howto-ico {
flex: none; width: 38px; height: 38px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
background: rgba(201,169,110,0.14); border: 1px solid rgba(201,169,110,0.25);
}
.pe-howto-ico svg { width: 20px; height: 20px; stroke-width: 1.5; color: var(--gold); }
.pe-howto-txt {
font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 300;
color: rgba(255,255,255,0.85); line-height: 1.5; padding-top: 0.35rem;
}
.pe-howto-txt em {
font-style: normal; color: var(--gold); font-weight: 500;
margin-right: 0.45rem;
}
.pe-howto-txt strong { font-weight: 500; color: #fff; }
.pe-howto-done {
display: block; width: calc(100% - 2.4rem); margin: 0.4rem 1.2rem 0.2rem;
padding: 0.8rem; border: 0; border-radius: 8px;
background: var(--gold); color: var(--navy);
font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500;
letter-spacing: 0.08em; cursor: pointer;
}
/* ── Install prompt ──────────────────────────────────────── */
.pe-install {
position: fixed; left: 0.8rem; right: 0.8rem;
bottom: calc(var(--pe-tabbar-h) + var(--pe-safe-b) + 0.8rem);
z-index: 940; display: flex; align-items: center; gap: 0.9rem;
padding: 0.85rem 1rem; border-radius: 12px;
background: #12283f; border: 1px solid rgba(201,169,110,0.3);
box-shadow: 0 10px 30px rgba(0,0,0,0.45);
transform: translateY(160%); transition: transform 0.35s cubic-bezier(.32,.72,0,1);
}
.pe-install.is-open { transform: translateY(0); }
.pe-install img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.pe-install-copy { flex: 1; min-width: 0; }
.pe-install-copy strong {
display: block; font-family: 'Inter', sans-serif; font-size: 0.78rem;
font-weight: 500; color: #fff;
}
.pe-install-copy span {
display: block; font-size: 0.68rem; color: rgba(255,255,255,0.6);
font-weight: 300; margin-top: 1px;
}
.pe-install button {
flex: none; padding: 0.5rem 0.9rem; border-radius: 6px;
background: var(--gold); border: 0; color: var(--navy);
font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500;
letter-spacing: 0.06em; cursor: pointer;
}
.pe-install .pe-install-x {
background: none; color: rgba(255,255,255,0.45); padding: 0.4rem;
font-size: 1.1rem; line-height: 1;
}
/* ── Mobile readability pass ─────────────────────────────── */
/* The desktop layout uses 3rem side padding and very large display
type; both are wrong on a 390px screen. These are scoped to
pe-app so they travel with the shell. */
html.pe-app section { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
html.pe-app .container { padding-left: 0 !important; padding-right: 0 !important; }
html.pe-app h1 { font-size: clamp(1.9rem, 8vw, 2.6rem) !important; line-height: 1.15; }
html.pe-app h2, html.pe-app .section-heading { font-size: clamp(1.45rem, 6vw, 2rem) !important; line-height: 1.2; }
html.pe-app .body-text, html.pe-app p { font-size: 0.95rem; line-height: 1.7; }
/* ...except the footer, which styles.css sets to 0.62rem as small
print. Body-copy sizing must not promote it to body copy. */
html.pe-app footer p, html.pe-app .site-footer p { font-size: 0.62rem; line-height: 1.8; }
html.pe-app .two-col { display: block !important; }
html.pe-app .two-col > div + div { margin-top: 1.8rem; }
html.pe-app .card-grid, html.pe-app .card-grid-3 { grid-template-columns: 1fr !important; }
html.pe-app .stats-grid, html.pe-app .stats-grid-6 { grid-template-columns: repeat(2, 1fr) !important; gap: 1.4rem 1rem !important; }
/* Stop a wide image overflowing — but do NOT set height:auto.
`html.pe-app img` outweighs `footer img { height: 28px }` in
styles.css, and height:auto turned the 28px footer logo into a
342px banner on every page. max-width alone never shrinks a
logo that is already small. */
html.pe-app img { max-width: 100%; }
/* Any wide table becomes swipeable rather than breaking the layout. */
html.pe-app table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Tap targets: nothing interactive smaller than a fingertip. */
html.pe-app a, html.pe-app button { -webkit-tap-highlight-color: rgba(201,169,110,0.15); }
/* Standalone (launched from the home screen): no browser chrome,
so the top bar carries the status-bar inset itself. */
html.pe-standalone nav:not(.pe-tabbar):not(.pe-adm-nav):not(.admin-nav) { padding-top: calc(0.7rem + var(--pe-safe-t)); }
}
/* Pointer-driven screens (laptops, desktops): the shell stays out of
the way entirely. A large touch screen still gets the app layout. */
@media (min-width: 1200px), (min-width: 900px) and (pointer: fine) {
.pe-tabbar, .pe-explore, .pe-sheet, .pe-overlay, .pe-install { display: none !important; }
}
/* ══════════════════════════════════════════════════════════════
Admin consoles on phones and tablets
══════════════════════════════════════════════════════════════
admin.html, dataroom-admin.html and kyc-admin.html are built
from wide data tables and a nav bar with eight links in a row.
Neither survives a 390px screen, so on mobile:
· the top nav keeps only the logo; its links move into the
More sheet, mirrored from the nav itself so this file can
never show a console the nav is hiding
· every .investor-table becomes a list of cards. app-shell.js
copies each column's
onto the matching
as
data-label, so the cards label themselves and this works
for any table without knowing its columns
· filters become a scrolling chip strip
· every control clears 44px
All of it is gated behind html.pe-app, so if app-shell.js does
not load the console renders exactly as it does today.
══════════════════════════════════════════════════════════════ */
@media (max-width: 899px), (max-width: 1199px) and (pointer: coarse) {
/* ── Top bar: identity only ──────────────────────────────── */
html.pe-app nav.admin-nav {
padding: 0.6rem 1rem;
padding-top: calc(0.6rem + var(--pe-safe-t));
/* Centred, like the portal header and like an app's title bar.
The console's eight nav links move to the More sheet. */
justify-content: center;
/* The consoles' own :root is already light — --bg and --card are
#ffffff, --text is #1a1d21 — so the only navy left on them was
the shell's furniture: this bar and the tab bar. A white body
between two navy bars reads as broken rather than as a theme. */
background: rgba(255,255,255,0.94);
border-bottom: 1px solid rgba(26,29,33,0.08);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html.pe-app nav.admin-nav .nav-badge { color: #8a6a2c; border-color: rgba(138,106,44,0.4); }
html.pe-app nav.admin-nav .nav-right { display: none; }
html.pe-app nav.admin-nav .nav-left { gap: 0.7rem; }
html.pe-app nav.admin-nav .nav-left img { height: 22px; }
html.pe-app .admin-main {
/* 3.6rem is 57.6px. The bar is 0.6rem top and bottom plus its content
plus env(safe-area-inset-top) — about 95px on a Dynamic Island
iPhone — so the first thing in the console, which is the section
nav, sat behind it and could not be reached. The inset has to be
in this padding, not only in the bar's. */
padding: calc(3.6rem + var(--pe-safe-t)) 0.9rem calc(var(--pe-tabbar-h) + var(--pe-safe-b) + 1.5rem);
}
/* ── Stats: two readable columns, not nine unreadable ones ─ */
html.pe-app .stats-bar {
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-bottom: 1.4rem;
}
html.pe-app .stat-card { padding: 0.55rem 0.7rem; border-radius: 10px; }
html.pe-app .stat-card .stat-number { font-size: 1.3rem; }
html.pe-app .stat-card .stat-label { font-size: 0.5rem; line-height: 1.25; margin-top: 0.15rem; }
/* ── Filters: one scrolling row of chips ─────────────────── */
html.pe-app .filter-bar {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 0.45rem;
margin: 0 -0.9rem 0.9rem;
padding: 0.1rem 0.9rem 0.5rem;
scroll-snap-type: x proximity;
}
html.pe-app .filter-bar::-webkit-scrollbar { display: none; }
html.pe-app .filter-bar .filter-btn {
flex: 0 0 auto;
scroll-snap-align: start;
min-height: 36px;
padding: 0.5rem 0.95rem;
border-radius: 18px;
font-size: 0.66rem;
}
/* The hairline separators between filter groups are noise here. */
html.pe-app .filter-bar > span[style*="width:1px"] { display: none; }
/* Search and category: full width, thumb-sized. */
html.pe-app #search-users,
html.pe-app #filter-category,
html.pe-app .admin-main input[type="text"],
html.pe-app .admin-main input[type="search"],
html.pe-app .admin-main select {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 44px;
font-size: 16px !important; /* under 16px iOS zooms the page on focus */
border-radius: 8px;
}
/* ── Tables become cards ─────────────────────────────────── */
html.pe-app .investor-table.pe-cards,
html.pe-app .leads-table.pe-cards,
html.pe-app .investor-table.pe-cards tbody,
html.pe-app .leads-table.pe-cards tbody{ display: block; }
html.pe-app .investor-table.pe-cards,
html.pe-app .leads-table.pe-cards{
background: none; border: none; border-radius: 0; overflow: visible;
}
html.pe-app .investor-table.pe-cards thead,
html.pe-app .leads-table.pe-cards thead{ display: none; }
/* Name and email lead the card, so it opens with who the record
is about rather than with whatever column the table happens to
put first. Everything else keeps the table's own order. */
html.pe-app .investor-table.pe-cards tbody tr,
html.pe-app .leads-table.pe-cards tbody tr{
display: flex; flex-direction: column;
background: var(--card, #fff);
border: 1px solid var(--border, #e8e8e4);
border-radius: 12px;
padding: 0.85rem 1rem 0.9rem;
margin-bottom: 0.7rem;
}
html.pe-app .investor-table.pe-cards tbody tr:hover td,
html.pe-app .leads-table.pe-cards tbody tr:hover td,
html.pe-app .investor-table.pe-cards tbody tr td,
html.pe-app .leads-table.pe-cards tbody tr td{ background: none; }
html.pe-app .investor-table.pe-cards td,
html.pe-app .leads-table.pe-cards td{
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; padding: 0.28rem 0; border-bottom: none;
font-size: 0.82rem; text-align: right;
}
html.pe-app .investor-table.pe-cards td::before,
html.pe-app .leads-table.pe-cards td::before{
content: attr(data-label);
flex: 0 0 auto; text-align: left;
font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-light, #8a8a8a); white-space: nowrap;
}
/* Cells the row left empty would otherwise print a lonely label. */
html.pe-app .investor-table.pe-cards td.pe-c-blank,
/* Cells the row left empty would otherwise print a lonely label. */
html.pe-app .leads-table.pe-cards td.pe-c-blank{ display: none; }
/* Name and email are the card's identity, so they read as a
heading rather than as two more label/value rows. */
html.pe-app .investor-table.pe-cards td.pe-c-primary,
html.pe-app .leads-table.pe-cards td.pe-c-primary{
display: block; text-align: left;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.15rem; line-height: 1.25; color: #1a1d21;
padding: 0 0 0.1rem;
}
html.pe-app .investor-table.pe-cards td.pe-c-email,
html.pe-app .leads-table.pe-cards td.pe-c-email{
display: block; text-align: left;
font-size: 0.75rem; color: var(--text-light, #888);
word-break: break-word;
padding: 0 0 0.6rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--border, #eee);
}
html.pe-app .investor-table.pe-cards td.pe-c-primary,
html.pe-app .leads-table.pe-cards td.pe-c-primary{ order: -3; }
html.pe-app .investor-table.pe-cards td.pe-c-email,
html.pe-app .leads-table.pe-cards td.pe-c-email{ order: -2; }
html.pe-app .investor-table.pe-cards td.pe-c-actions,
html.pe-app .leads-table.pe-cards td.pe-c-actions{ order: 9; }
html.pe-app .investor-table.pe-cards td.pe-c-primary::before,
html.pe-app .leads-table.pe-cards td.pe-c-primary::before,
html.pe-app .investor-table.pe-cards td.pe-c-email::before,
html.pe-app .leads-table.pe-cards td.pe-c-email::before,
html.pe-app .investor-table.pe-cards td.pe-c-actions::before,
html.pe-app .leads-table.pe-cards td.pe-c-actions::before{ content: none; }
/* ── Row actions: real buttons, not 0.6rem text ──────── */
html.pe-app .investor-table.pe-cards td.pe-c-actions,
html.pe-app .leads-table.pe-cards td.pe-c-actions{
display: flex; flex-wrap: wrap; gap: 0.45rem;
padding: 0.75rem 0 0; margin-top: 0.55rem;
border-top: 1px solid var(--border, #eee);
}
html.pe-app .investor-table.pe-cards td.pe-c-actions .btn-action,
html.pe-app .leads-table.pe-cards td.pe-c-actions .btn-action,
html.pe-app .investor-table.pe-cards td.pe-c-actions button,
html.pe-app .leads-table.pe-cards td.pe-c-actions button,
html.pe-app .investor-table.pe-cards td.pe-c-actions a,
html.pe-app .leads-table.pe-cards td.pe-c-actions a{
flex: 1 1 auto; min-width: 5.5rem;
min-height: 40px; display: inline-flex;
align-items: center; justify-content: center;
padding: 0.5rem 0.8rem; font-size: 0.64rem; border-radius: 8px;
}
/* A "no results" row spans every column; it is not a record. */
html.pe-app .investor-table.pe-cards tbody tr.pe-row-msg,
/* A "no results" row spans every column; it is not a record. */
html.pe-app .leads-table.pe-cards tbody tr.pe-row-msg{
background: none; border: 1px dashed var(--border, #e8e8e4);
text-align: center;
}
html.pe-app .investor-table.pe-cards tbody tr.pe-row-msg td,
html.pe-app .leads-table.pe-cards tbody tr.pe-row-msg td{
display: block; text-align: center;
}
/* ── Profile view ────────────────────────────────────────── */
html.pe-app .profile-header,
html.pe-app .profile-summary { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
html.pe-app .profile-action-bar {
flex-direction: column; align-items: stretch; gap: 0.5rem;
padding: 0.9rem 1rem; border-radius: 12px;
}
html.pe-app .profile-action-bar .btn-action,
html.pe-app .profile-action-bar button {
width: 100%; min-height: 44px; font-size: 0.68rem; border-radius: 8px;
}
html.pe-app .profile-card { padding: 1rem; border-radius: 12px; }
/* ── Modals sit on the thumb, not in the middle ──────────── */
html.pe-app .modal-overlay { align-items: flex-end; }
html.pe-app .modal-box {
width: 100%; max-width: none; max-height: 88vh;
border-radius: 16px 16px 0 0;
padding: 1.4rem 1.1rem calc(1.4rem + var(--pe-safe-b));
}
html.pe-app .modal-box button,
html.pe-app .modal-box input,
html.pe-app .modal-box select,
html.pe-app .modal-box textarea { min-height: 44px; font-size: 16px; }
/* Anything still genuinely wide gets a scroller rather than
bleeding off the side of the screen. */
html.pe-app .admin-main table:not(.pe-cards),
html.pe-app .mkt-main table:not(.pe-cards) { display: block; overflow-x: auto; }
}
/* ── Display cutouts ──────────────────────────────────────────
viewport-fit=cover lets the page use the full screen, which is
what makes an installed app look like an app. The cost is that
fixed furniture can now sit under the notch or the home
indicator, so every fixed element pays the inset back. Content
itself is left full-bleed on purpose: a hero image should reach
the edge. env() is 0 on everything without a cutout. */
@media (max-width: 899px), (max-width: 1199px) and (pointer: coarse) {
.pe-tabbar {
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
.pe-sheet, .pe-explore, .pe-install {
padding-left: max(env(safe-area-inset-left, 0px), 0px);
padding-right: max(env(safe-area-inset-right, 0px), 0px);
}
html.pe-app nav.admin-nav,
html.pe-app nav:not(.pe-tabbar):not(.pe-adm-nav):not(.admin-nav) {
padding-left: max(1rem, env(safe-area-inset-left, 0px));
padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
}
/* The data-room and KYC consoles put their links in