/*
 * SIS portal shell: the design tokens, the page background and the header (brand, top navigation,
 * account menu, phone bottom bar).
 *
 * Loaded on every parent-portal page and on EVERY HR portal page, straight after global.css. The
 * HR pages that have not been moved to the new design yet keep their own styles (they do not load
 * parent-portal.css, which restyles buttons, cards and type across the page) but share this header
 * and background with the ones that have. So nothing in here may style anything but the page
 * background and the header's own classes.
 */

@import url("https://fonts.googleapis.com/css?family=Raleway:500,600,700|Source+Sans+Pro:400,600,700&display=swap");

:root {
    /* Brand: the green of the school's tree logo. */
    --pp-accent: #35685d;
    --pp-accent-strong: #2a5449;
    --pp-accent-soft: #e6efec;
    --pp-accent-soft-2: #d2e3dd;
    --pp-accent-contrast: #ffffff;

    /* Audiences: Students and Staff in the Staff Portal's menus and on /reports. Neither is the
       brand green, which already means "the page you are on". Text colour on its soft is >= 5.9:1. */
    --pp-aud-students: #2f5f8f;
    --pp-aud-students-soft: #e3ecf6;
    --pp-aud-students-wash: #f3f7fb;
    --pp-aud-staff: #6a4a7c;
    --pp-aud-staff-soft: #eee6f2;
    --pp-aud-staff-wash: #f8f4fa;

    /* Warm neutrals. */
    --pp-bg: #f6f4ef;
    --pp-surface: #ffffff;
    --pp-surface-sunken: #efece5;
    --pp-border: #e2ddd3;
    --pp-border-strong: #cfc8bb;
    --pp-text: #1f1d1a;
    --pp-text-2: #55514a;
    --pp-text-muted: #6b665d;

    /* Semantic. */
    --pp-success: #2f7d4f;
    --pp-success-soft: #e3f1e8;
    --pp-warning: #b7791f;
    --pp-warning-soft: #fbf1dd;
    --pp-danger: #b3261e;
    --pp-danger-soft: #f9e5e3;
    --pp-info: var(--pp-accent);
    --pp-info-soft: var(--pp-accent-soft);

    /* Module hues for the dashboard poster tiles (muted, warm). */
    --pp-hue-finance: #35685d;
    --pp-hue-finance-soft: #dfeae6;
    --pp-hue-school: #775a16;
    --pp-hue-school-soft: #f3e9d2;
    --pp-hue-affairs: #8f4a33;
    --pp-hue-affairs-soft: #f6e3dc;
    --pp-hue-transport: #4a5d78;
    --pp-hue-transport-soft: #e1e6ee;

    /* Type. */
    --pp-font-display: "Raleway", "Source Sans Pro", sans-serif;
    --pp-font-body: "Source Sans Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
    --pp-text-xs: 13px;
    --pp-text-sm: 14px;
    --pp-text-base: 16px;
    --pp-text-md: 18px;
    --pp-text-lg: 22px;
    --pp-text-xl: 28px;
    --pp-text-2xl: 36px;

    /* Space, radius, elevation, motion. */
    --pp-space-1: 4px;
    --pp-space-2: 8px;
    --pp-space-3: 12px;
    --pp-space-4: 16px;
    --pp-space-5: 20px;
    --pp-space-6: 24px;
    --pp-space-8: 32px;
    --pp-space-12: 48px;
    --pp-gutter: 16px;
    --pp-container: 1200px;
    --pp-radius-sm: 6px;
    --pp-radius-md: 10px;
    --pp-radius-lg: 14px;
    --pp-radius-pill: 999px;
    --pp-shadow-float: 0 8px 24px rgba(31, 29, 26, 0.12), 0 1px 3px rgba(31, 29, 26, 0.08);
    --pp-duration-fast: 120ms;
    --pp-duration-base: 200ms;
    --pp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --pp-focus-ring: 0 0 0 3px rgba(53, 104, 93, 0.35);
    --pp-header-height: 56px;
    --pp-bottom-nav-height: 60px;

}

/* Page background. "html body" so it also wins over an older page's own body { background }. */
html,
html body {
    background: var(--pp-bg);
}

/* The faded watermark art behind every page is gone. */
.background-art {
    display: none;
}

/* Header. Its container follows the new pages' width whatever global.css says. */
.pp-header .harmony-container {
    max-width: var(--pp-container);
    margin: 0 auto;
    padding-inline: var(--pp-gutter);
}

.pp-header {
    height: var(--pp-header-height);
    background: var(--pp-surface);
    border-bottom: 1px solid var(--pp-border);
    font-family: var(--pp-font-display);
    color: var(--pp-text);
    position: sticky;
    top: 0;
    z-index: 999;
}

.pp-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--pp-space-4);
    line-height: normal;
    color: var(--pp-text);
}

.pp-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pp-text);
    text-decoration: none;
    flex-shrink: 0;
    min-height: 44px;
}

.pp-brand:hover {
    color: var(--pp-text);
    text-decoration: none;
}

.pp-brand .logo {
    width: 34px;
    height: 34px;
    margin: 0;
    float: none;
    object-fit: contain;
}

.pp-brand .logo-span {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    min-width: 0;
    line-height: 1.15;
}

.pp-brand .logo-span small {
    display: block;
    font-family: var(--pp-font-body);
    font-weight: 400;
    font-size: 12px;
    color: var(--pp-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Desktop top navigation (the menu partial). */
.pp-topnav {
    display: none;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.pp-topnav::-webkit-scrollbar {
    display: none;
}

.pp-topnav .scroll-container {
    display: flex;
    height: 100%;
    gap: var(--pp-space-1);
}

.pp-topnav .nav,
.pp-topnav .nav:first-child,
.pp-topnav .nav:last-child {
    float: none;
    margin: 0;
    padding: 0 var(--pp-space-3);
    height: 100%;
    line-height: var(--pp-header-height);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text-2);
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    white-space: nowrap;
    transition: color var(--pp-duration-fast) var(--pp-ease), border-color var(--pp-duration-fast) var(--pp-ease);
}

.pp-topnav .nav ion-icon {
    display: none;
}

.pp-topnav .nav:hover {
    color: var(--pp-accent);
    text-decoration: none;
}

.pp-topnav .nav.active {
    color: var(--pp-accent);
    border-bottom-color: var(--pp-accent);
}

/* Header groups (partials/menu, /assets/pp-topnav.js): the trigger is one button - icon, label,
   chevron - and its menu opens on a click (pinned) or a hover (preview). The menu is
   position: fixed (placed by the script) because the top bar scrolls sideways and would clip it,
   and it is always laid out (visibility, not display) so it animates in AND out. */
.pp-topnav__group {
    display: inline-flex;
    align-items: center;
    height: 100%;
    flex: none;
}

/* Every top-level entry: an underline that grows from the middle on hover; the active page keeps
   its full bar (border-bottom above). */
.pp-topnav .nav {
    position: relative;
}

.pp-topnav .nav::after {
    content: "";
    position: absolute;
    left: var(--pp-space-3);
    right: var(--pp-space-3);
    bottom: -3px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--pp-accent);
    transform: scaleX(0);
    opacity: 0.45;
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity var(--pp-duration-fast) var(--pp-ease);
}

.pp-topnav .nav:hover::after,
.pp-topnav__group.is-open .nav::after {
    transform: scaleX(1);
}

.pp-topnav__group.is-open .nav::after {
    opacity: 1;
}

.pp-topnav .nav.active::after {
    display: none;
}

button.pp-topnav__trigger,
.pp-topnav button.pp-topnav__trigger:first-child,
.pp-topnav button.pp-topnav__trigger:last-child {
    appearance: none;
    background: transparent;
    border-left: 0;
    border-right: 0;
    font-family: inherit;
    cursor: pointer;
    gap: 4px;
}

.pp-topnav__group.is-open .pp-topnav__trigger {
    color: var(--pp-accent);
}

.pp-topnav__trigger:focus {
    outline: none;
}

.pp-topnav__trigger:focus-visible {
    outline: none;
    box-shadow: inset var(--pp-focus-ring, 0 0 0 3px rgba(53, 104, 93, 0.35));
    border-radius: var(--pp-radius-sm);
}

/* The bar hides its icons; the chevron is the exception. */
.pp-topnav .nav ion-icon.pp-topnav__chevron {
    display: inline-block;
    font-size: 13px;
    opacity: 0.7;
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity var(--pp-duration-fast) var(--pp-ease);
}

.pp-topnav__trigger:hover .pp-topnav__chevron {
    opacity: 1;
    transform: translateY(1px);
}

.pp-topnav__group.is-open .pp-topnav__chevron {
    opacity: 1;
    transform: rotate(180deg);
}

/* A group with a page (Reports): the label link sits tight against its arrow button, and the
   active bar runs under both. */
.pp-topnav .nav.pp-topnav__trigger--page {
    padding-inline-end: 4px;
}

.pp-topnav__caret {
    appearance: none;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--pp-space-2) 0 2px;
    margin: 0;
    border: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--pp-text-2);
    cursor: pointer;
    transition: color var(--pp-duration-fast) var(--pp-ease);
}

.pp-topnav__caret:hover,
.pp-topnav__group.is-open .pp-topnav__caret,
.pp-topnav__caret.active {
    color: var(--pp-accent);
}

.pp-topnav__caret.active {
    border-bottom-color: var(--pp-accent);
}

.pp-topnav__caret:focus {
    outline: none;
}

.pp-topnav__caret:focus-visible {
    box-shadow: inset var(--pp-focus-ring, 0 0 0 3px rgba(53, 104, 93, 0.35));
    border-radius: var(--pp-radius-sm);
}

.pp-topnav__caret .pp-topnav__chevron {
    font-size: 14px;
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The menu: springs open from under the trigger (scale + rise + fade), its caret pointing at it. */
.pp-topnav__menu {
    --pp-caret-x: 32px;
    position: fixed;
    z-index: 1200;
    min-width: 248px;
    max-width: min(340px, calc(100vw - 16px));
    padding: 6px;
    background: var(--pp-surface, #fff);
    border: 1px solid var(--pp-border, #e2ddd3);
    border-radius: var(--pp-radius-lg, 14px);
    box-shadow: 0 18px 40px -12px rgba(31, 29, 26, 0.28), 0 4px 12px rgba(31, 29, 26, 0.08);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform-origin: var(--pp-caret-x) top;
    transform: translateY(-10px) scale(0.94);
    filter: blur(2px);
    transition:
        opacity 140ms ease-in,
        transform 160ms ease-in,
        filter 160ms ease-in,
        visibility 0s linear 160ms;
}

.pp-topnav__group.is-open .pp-topnav__menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    filter: none;
    transition:
        opacity 180ms var(--pp-ease, ease-out),
        transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 200ms var(--pp-ease, ease-out),
        visibility 0s;
}

/* Caret: a turned square on the top edge, under the middle of the trigger. */
.pp-topnav__menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: calc(var(--pp-caret-x) - 6px);
    width: 10px;
    height: 10px;
    background: var(--pp-surface, #fff);
    border-top: 1px solid var(--pp-border, #e2ddd3);
    border-left: 1px solid var(--pp-border, #e2ddd3);
    transform: rotate(45deg);
}

.pp-topnav__heading {
    display: flex;
    align-items: center;
    gap: var(--pp-space-2);
    padding: 10px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pp-text-muted, #6b665d);
}

.pp-topnav__heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--pp-border, #e2ddd3);
}

.pp-topnav__heading:not(:first-child) {
    margin-top: 4px;
}

/* A Students / Staff set: its own tinted panel with an edge in the audience colour, a heading chip
   with the audience icon, and row tiles in that colour - so the two groups never read as one
   list. Background and border only: no overflow, transform or z-index, which would clip or
   re-stack the family menus that open beside a row. */
.pp-topnav__set {
    --pp-aud: var(--pp-text-2, #55514a);
    --pp-aud-soft: var(--pp-surface-sunken, #efece5);
    --pp-aud-wash: transparent;
    padding: 4px 4px 4px 6px;
    border-left: 3px solid var(--pp-aud);
    border-radius: var(--pp-radius-md, 10px);
    background: var(--pp-aud-wash);
}

.pp-topnav__set + .pp-topnav__set {
    margin-top: 8px;
}

.pp-topnav__set--students {
    --pp-aud: var(--pp-aud-students);
    --pp-aud-soft: var(--pp-aud-students-soft);
    --pp-aud-wash: var(--pp-aud-students-wash);
}

.pp-topnav__set--staff {
    --pp-aud: var(--pp-aud-staff);
    --pp-aud-soft: var(--pp-aud-staff-soft);
    --pp-aud-wash: var(--pp-aud-staff-wash);
}

.pp-topnav__set > .pp-topnav__heading {
    align-self: flex-start;
    display: inline-flex;
    gap: 6px;
    margin: 4px 4px 6px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--pp-radius-pill, 999px);
    background: var(--pp-aud-soft);
    color: var(--pp-aud);
    font-size: 12px;
    letter-spacing: 0.06em;
}

.pp-topnav__set > .pp-topnav__heading::after {
    display: none;
}

.pp-topnav__set > .pp-topnav__heading ion-icon {
    font-size: 15px;
}

.pp-topnav__set .pp-topnav__tile {
    background: var(--pp-aud-soft);
    color: var(--pp-aud);
}

.pp-topnav__set .pp-topnav__link:hover .pp-topnav__tile,
.pp-topnav__set .pp-topnav__link:focus-visible .pp-topnav__tile {
    background: var(--pp-aud);
    color: #fff;
}

/* A row: icon tile, label, and a check on the page you are on. Rows cascade in when it opens. */
.pp-topnav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--pp-space-3);
    min-height: 44px;
    padding: 6px 10px 6px 6px;
    border-radius: var(--pp-radius-md, 10px);
    color: var(--pp-text, #1f1d1a);
    font-family: var(--pp-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        background var(--pp-duration-fast) var(--pp-ease),
        color var(--pp-duration-fast) var(--pp-ease),
        opacity 120ms ease-in,
        transform 120ms ease-in;
}

.pp-topnav__group.is-open .pp-topnav__link {
    opacity: 1;
    transform: none;
    transition:
        background var(--pp-duration-fast) var(--pp-ease),
        color var(--pp-duration-fast) var(--pp-ease),
        opacity 220ms var(--pp-ease) calc(40ms + var(--i, 0) * 35ms),
        transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(40ms + var(--i, 0) * 35ms);
}

.pp-topnav__tile {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--pp-radius-sm, 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pp-surface-sunken, #efece5);
    color: var(--pp-text-2, #55514a);
    font-size: 17px;
    transition: background var(--pp-duration-fast) var(--pp-ease), color var(--pp-duration-fast) var(--pp-ease), transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pp-topnav__tile:empty::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.pp-topnav__label {
    flex: 1;
    min-width: 0;
}

.pp-topnav__check {
    flex: none;
    font-size: 18px;
    color: var(--pp-accent, #35685d);
}

.pp-topnav__link:hover,
.pp-topnav__link:focus-visible {
    background: var(--pp-accent-soft, #e6efec);
    color: var(--pp-accent-strong, #2a5449);
    text-decoration: none;
    outline: none;
}

.pp-topnav__link:hover .pp-topnav__tile,
.pp-topnav__link:focus-visible .pp-topnav__tile {
    background: var(--pp-accent, #35685d);
    color: var(--pp-accent-contrast, #fff);
    transform: scale(1.06) rotate(-4deg);
}

.pp-topnav__link:focus-visible {
    box-shadow: inset var(--pp-focus-ring, 0 0 0 3px rgba(53, 104, 93, 0.35));
}

.pp-topnav__link:active .pp-topnav__tile {
    transform: scale(0.94);
}

.pp-topnav__link.is-current {
    background: var(--pp-accent-soft, #e6efec);
    color: var(--pp-accent-strong, #2a5449);
}

.pp-topnav__link.is-current .pp-topnav__tile {
    background: var(--pp-accent, #35685d);
    color: var(--pp-accent-contrast, #fff);
}

/* The bar never wraps or scrolls, and every item stays in it (pp-topnav.js fit(), the user
   2026-10-08: no "More"). Steps, each only when the one before still does not fit:
   1. --compact: the school's name beside the logo goes (the logo stays);
   2. --tight: less space around each item;
   3. --icons: each item is its icon (the label is kept for screen readers, and is the tooltip). */
.pp-header--compact .pp-brand .logo-span {
    display: none;
}

.pp-header--tight .pp-header__inner {
    gap: var(--pp-space-2);
}

.pp-header--tight .pp-topnav .scroll-container {
    gap: 0;
}

.pp-header--tight .pp-topnav .nav,
.pp-header--tight .pp-topnav .nav:first-child,
.pp-header--tight .pp-topnav .nav:last-child {
    padding-inline: var(--pp-space-2);
    font-size: 13.5px;
}

.pp-header--tight .pp-topnav .nav::after {
    left: var(--pp-space-2);
    right: var(--pp-space-2);
}

.pp-header--icons .pp-topnav .nav ion-icon {
    display: inline-block;
    font-size: 21px;
}

.pp-header--icons .pp-topnav .nav > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pp-header--icons .pp-topnav .nav ion-icon.pp-topnav__chevron {
    font-size: 11px;
    margin-inline-start: -2px;
}

.pp-header--icons .pp-account__button .user-name {
    display: none;
}

/* A second level (partials/menu: a report family's pages, each Looker page its own entry). The row
   is a button that opens a menu beside it; the menu sits in the row's box (absolute), so it moves
   with the main menu, and flips to the left (.is-flipped) when the window has no room. */
.pp-topnav__item {
    position: relative;
}

button.pp-topnav__link {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

button.pp-topnav__link:focus {
    outline: none;
}

.pp-topnav__more {
    flex: none;
    font-size: 16px;
    color: var(--pp-text-muted, #6b665d);
    transition: transform var(--pp-duration-fast) var(--pp-ease), color var(--pp-duration-fast) var(--pp-ease);
}

.pp-topnav__item.is-sub-open > .pp-topnav__link {
    background: var(--pp-accent-soft, #e6efec);
    color: var(--pp-accent-strong, #2a5449);
}

.pp-topnav__item.is-sub-open > .pp-topnav__link .pp-topnav__more {
    color: var(--pp-accent, #35685d);
    transform: translateX(2px);
}

.pp-topnav__sub {
    position: absolute;
    top: -6px;
    left: calc(100% + 10px);
    z-index: 1;
    min-width: 236px;
    max-width: min(320px, calc(100vw - 16px));
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 6px;
    background: var(--pp-surface, #fff);
    border: 1px solid var(--pp-border, #e2ddd3);
    border-radius: var(--pp-radius-lg, 14px);
    box-shadow: 0 18px 40px -12px rgba(31, 29, 26, 0.28), 0 4px 12px rgba(31, 29, 26, 0.08);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 120ms ease-in, transform 140ms ease-in, visibility 0s linear 140ms;
}

.pp-topnav__item.is-flipped > .pp-topnav__sub {
    left: auto;
    right: calc(100% + 10px);
    transform: translateX(6px);
}

/* A bridge over the gap between the row and its menu, so the pointer never "leaves" on the way. */
.pp-topnav__sub::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 12px;
}

.pp-topnav__item.is-flipped > .pp-topnav__sub::before {
    left: auto;
    right: -12px;
}

.pp-topnav__item.is-sub-open > .pp-topnav__sub {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: opacity 160ms var(--pp-ease, ease-out), transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s;
}

.pp-topnav__sub .pp-topnav__heading {
    padding-top: 6px;
}

/* Where the Looker report has a divider between its pages. */
.pp-topnav__divider {
    height: 1px;
    margin: 6px 10px;
    background: var(--pp-border, #e2ddd3);
}

.pp-topnav__sublink {
    display: flex;
    align-items: center;
    gap: var(--pp-space-2);
    min-height: 38px;
    padding: 6px 10px;
    border-radius: var(--pp-radius-md, 10px);
    color: var(--pp-text, #1f1d1a);
    font-family: var(--pp-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background var(--pp-duration-fast) var(--pp-ease), color var(--pp-duration-fast) var(--pp-ease);
}

.pp-topnav__sublink:hover,
.pp-topnav__sublink:focus-visible,
.pp-topnav__sublink.is-current {
    background: var(--pp-accent-soft, #e6efec);
    color: var(--pp-accent-strong, #2a5449);
    text-decoration: none;
    outline: none;
}

.pp-topnav__sublink:focus-visible {
    box-shadow: inset var(--pp-focus-ring, 0 0 0 3px rgba(53, 104, 93, 0.35));
}

@media (prefers-reduced-motion: reduce) {
    .pp-topnav .nav::after,
    .pp-topnav__chevron,
    .pp-topnav__tile,
    .pp-topnav__menu,
    .pp-topnav__group.is-open .pp-topnav__menu,
    .pp-topnav__link,
    .pp-topnav__group.is-open .pp-topnav__link,
    .pp-topnav__sub,
    .pp-topnav__item.is-sub-open > .pp-topnav__sub {
        transition-property: opacity, visibility, background, color !important;
        transition-duration: 120ms !important;
        transition-delay: 0s !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Account menu (hover/tap dropdown kept from global.css, restyled). */
.pp-account {
    margin-inline-start: auto;
    margin-inline-end: 0;
    float: none;
    display: flex;
    align-items: center;
    height: 100%;
}

.pp-account .nav-dropdown {
    height: 100%;
    display: flex;
    align-items: center;
}

.pp-account__button {
    appearance: none;
    border: 1px solid var(--pp-border);
    background: var(--pp-surface);
    border-radius: var(--pp-radius-pill);
    padding: 4px 10px 4px 4px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pp-font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text);
    cursor: pointer;
    transition: border-color var(--pp-duration-fast) var(--pp-ease), background var(--pp-duration-fast) var(--pp-ease);
}

.pp-account__button:hover,
.nav-dropdown:hover .pp-account__button {
    border-color: var(--pp-border-strong);
    background: var(--pp-surface-sunken);
}

.pp-account__button .user-name {
    max-width: 96px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-account__button ion-icon {
    font-size: 16px;
    color: var(--pp-text-muted);
}

.pp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pp-accent-soft);
    flex-shrink: 0;
}

.pp-account .nav-dropdown-content {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 280px;
    max-width: calc(100vw - 2 * var(--pp-gutter));
    background: var(--pp-surface);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    box-shadow: var(--pp-shadow-float);
    padding: var(--pp-space-2);
    z-index: 1000;
}

/* The menu sits 6px clear of the button, and it opens on hovering .nav-dropdown - whose box is the
   button's. Without this the pointer crossed 6px of nothing on the way down, .nav-dropdown stopped
   being :hover and the menu shut before it could be reached. The bridge is part of the menu, so
   the gap counts as hovering the dropdown; it only exists while the menu is open, and it is a
   little taller than the gap so a diagonal path across it still lands on something. */
.pp-account .nav-dropdown-content::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 100%;
    height: 10px;
}

.pp-account .nav-dropdown:hover .nav-dropdown-content,
.pp-account .nav-dropdown:focus-within .nav-dropdown-content {
    display: block;
}

.pp-account__identity {
    display: flex;
    align-items: center;
    gap: var(--pp-space-3);
    padding: var(--pp-space-3);
    border-bottom: 1px solid var(--pp-border);
    margin-bottom: var(--pp-space-2);
}

.pp-account__identity .pp-avatar {
    width: 44px;
    height: 44px;
}

.pp-account__identity strong {
    display: block;
    font-family: var(--pp-font-display);
    font-size: 15px;
    line-height: 1.2;
}

.pp-account__identity span {
    display: block;
    font-size: var(--pp-text-xs);
    color: var(--pp-text-muted);
}

.pp-account__section {
    padding: 6px var(--pp-space-3) 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
}

.pp-account .nav-dropdown-content a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 var(--pp-space-3);
    min-height: 44px;
    line-height: 1.3;
    border-radius: var(--pp-radius-sm);
    font-family: var(--pp-font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--pp-text);
    white-space: normal;
}

.pp-account .nav-dropdown-content a:hover {
    background: var(--pp-surface-sunken);
    color: var(--pp-text);
    text-decoration: none;
}

.pp-account .nav-dropdown-content a ion-icon {
    font-size: 18px;
    color: var(--pp-text-muted);
    flex-shrink: 0;
}

.pp-account .nav-dropdown-content a.pp-account__logout {
    color: var(--pp-danger);
    margin-top: var(--pp-space-1);
    border-top: 1px solid var(--pp-border);
    border-radius: 0 0 var(--pp-radius-sm) var(--pp-radius-sm);
}

/* Mobile bottom navigation (the same menu partial, icons + labels). */
.pp-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 998;
    background: var(--pp-surface);
    border-top: 1px solid var(--pp-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(var(--pp-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

.pp-bottom-nav .nav,
.pp-bottom-nav .nav:first-child,
.pp-bottom-nav .nav:last-child {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 6px 4px 4px;
    height: var(--pp-bottom-nav-height);
    line-height: 1.1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--pp-font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-text-muted);
    border-bottom: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--pp-duration-fast) var(--pp-ease);
}

/* "More" (menu partial, when the bar has more items than room) is a button, not a link. */
.pp-bottom-nav button.nav {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.pp-bottom-nav .nav ion-icon {
    font-size: 24px;
    transition: transform var(--pp-duration-fast) var(--pp-ease);
}

.pp-bottom-nav .nav span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-bottom-nav .nav:hover {
    color: var(--pp-accent);
    text-decoration: none;
}

.pp-bottom-nav .nav.active {
    color: var(--pp-accent);
    border-bottom: 0;
}

.pp-bottom-nav .nav.active ion-icon {
    transform: translateY(-1px);
}

.pp-bottom-nav .nav:active ion-icon {
    transform: scale(0.92);
}

@media screen and (min-width: 768px) {
    .pp-topnav {
        display: block;
    }

    .pp-bottom-nav {
        display: none;
    }

    .pp-brand .logo {
        width: 38px;
        height: 38px;
    }
}

@media screen and (max-width: 767px) {
    .pp-header .harmony-menu,
    .hamburger-menu {
        display: none !important;
    }

    .pp-account__button .user-name {
        display: none;
    }

    .pp-account__button {
        padding: 3px;
        border-radius: 50%;
    }

    .pp-account__button ion-icon {
        display: none;
    }
}

/* Seven HR links fit the phone bar only with short labels and a smaller icon. */
@media screen and (max-width: 420px) {
    .pp-bottom-nav--dense .nav,
    .pp-bottom-nav--dense .nav:first-child,
    .pp-bottom-nav--dense .nav:last-child {
        font-size: 10px;
        padding-inline: 2px;
    }

    .pp-bottom-nav--dense .nav ion-icon {
        font-size: 22px;
    }
}

/* Older HR pages have no .main-container padding under the phone bottom bar; keep their last
   lines clear of it. */
@media screen and (max-width: 767px) {
    body.pp-legacy-page.pp-has-bottom-nav {
        padding-bottom: calc(var(--pp-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }
}

@media print {
    .pp-bottom-nav,
    .pp-header {
        display: none !important;
    }
}