/* ==========================================================================
   Striv Hub "suite of apps" look (app-v0.15.0, Conner via Helm 2026-10-08).
   Scoped to the signed-in hub (MainLayout: .hh-main-content / .hh-drawer) and the new sa-* parts.
   POC sites, the Examples gallery and the landing pages use LandingLayout and are not touched.
   Every text/background pair here is WCAG AA (4.5:1+); icons on solid app colors are white (4.5:1+).
   ========================================================================== */

/* ---- Per-app colors: solid (icon bubble / buttons, white text), tint + tint2 (tile wash), ink (text), glow (dark drawer) */
.sa-app-account   { --sa-solid: #4F46E5; --sa-tint: #EEF2FF; --sa-tint2: #E0E7FF; --sa-ink: #312E81; --sa-glow: #A5B4FC; }
.sa-app-lists     { --sa-solid: #0F766E; --sa-tint: #F0FDFA; --sa-tint2: #CCFBF1; --sa-ink: #134E4A; --sa-glow: #5EEAD4; }
.sa-app-calendar  { --sa-solid: #1D4ED8; --sa-tint: #EFF6FF; --sa-tint2: #DBEAFE; --sa-ink: #1E3A8A; --sa-glow: #93C5FD; }
.sa-app-projects  { --sa-solid: #C2410C; --sa-tint: #FFF7ED; --sa-tint2: #FFEDD5; --sa-ink: #7C2D12; --sa-glow: #FDBA74; }
.sa-app-meals     { --sa-solid: #BE123C; --sa-tint: #FFF1F2; --sa-tint2: #FFE4E6; --sa-ink: #881337; --sa-glow: #FDA4AF; }
.sa-app-inventory { --sa-solid: #7E22CE; --sa-tint: #FAF5FF; --sa-tint2: #F3E8FF; --sa-ink: #581C87; --sa-glow: #D8B4FE; }
.sa-app-money     { --sa-solid: #15803D; --sa-tint: #F0FDF4; --sa-tint2: #DCFCE7; --sa-ink: #14532D; --sa-glow: #86EFAC; }
.sa-app-quotes    { --sa-solid: #B45309; --sa-tint: #FFFBEB; --sa-tint2: #FEF3C7; --sa-ink: #78350F; --sa-glow: #FCD34D; }
.sa-app-website   { --sa-solid: #0E7490; --sa-tint: #ECFEFF; --sa-tint2: #CFFAFE; --sa-ink: #164E63; --sa-glow: #67E8F9; }
/* app-v0.17.0 Mileage Tracker: road slate (white on #475569 = 7.6:1, ink on tint ≥ 14:1). */
.sa-app-mileage   { --sa-solid: #475569; --sa-tint: #F8FAFC; --sa-tint2: #E2E8F0; --sa-ink: #1E293B; --sa-glow: #CBD5E1; }
/* app-v0.20.79 Homestead: yard green. White on #3F6212 is about 7.4:1. Ink on tint is darker than 12:1. */
.sa-app-homestead { --sa-solid: #3F6212; --sa-tint: #F7FEE7; --sa-tint2: #ECFCCB; --sa-ink: #1A2E05; --sa-glow: #BEF264; }

.sa-sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Launcher hero ---- */
.sa-hero {
    border-radius: 24px;
    padding: 18px 22px;
    margin-bottom: 14px;
    color: #FFFFFF;
    background:
        radial-gradient(circle at 94% 18%, rgba(255, 255, 255, 0.06) 0 56px, transparent 57px),
        radial-gradient(circle at 82% 120%, rgba(255, 255, 255, 0.05) 0 90px, transparent 91px),
        linear-gradient(135deg, #0A2540 0%, #0B3D5C 55%, #0B5A70 100%);
    box-shadow: 0 10px 24px rgba(11, 61, 92, 0.22);
}
.sa-hero-business {
    background:
        radial-gradient(circle at 94% 18%, rgba(255, 255, 255, 0.06) 0 56px, transparent 57px),
        radial-gradient(circle at 82% 120%, rgba(255, 255, 255, 0.05) 0 90px, transparent 91px),
        linear-gradient(135deg, #1E1B4B 0%, #312E81 55%, #0B5A70 100%);
}
.sa-hero-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #F0F9FF; }
.sa-hero-title { margin: 0.15rem 0 0; font-size: 1.6rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: #FFFFFF; overflow-wrap: anywhere; }
.sa-hero-sub { margin: 0.3rem 0 0; font-size: 0.9rem; color: #F8FAFC; }

/* ---- Launcher ---- */
/* app-v0.17.0: an inline-size container so a lone last tile can span the row when the grid has two columns (1024 with
   the drawer open). position + z-index keep tile tips above the "At a glance" cards that follow. */
.sa-launcher { margin: 0 0 1.25rem; container-type: inline-size; container-name: sa-launcher; position: relative; z-index: 2; }
.sa-launcher-title { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--mud-palette-text-primary, #0F172A); }
.sa-launcher-sub { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--mud-palette-text-secondary, #475569); }
.sa-group-title, .sa-section-title {
    margin: 1.1rem 0 0.6rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mud-palette-text-primary, #0F172A);
}
.sa-group-note { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--mud-palette-text-secondary, #475569); }
.sa-launcher-foot { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--mud-palette-text-secondary, #475569); }

.sa-grid {
    list-style: none; margin: 0; padding: 0;
    /* app-v0.15.1: auto-fit (not auto-fill) so no empty tracks are left on the right; a 300px minimum gives 2 roomy
       columns at 1024 and 3 at 1280 (Sightline polish a/b). */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px;
}
.sa-tile {
    position: relative;
    display: flex; flex-direction: column; min-width: 0;
    background: linear-gradient(160deg, var(--sa-tint) 0%, #FFFFFF 72%);
    border: 2px solid var(--sa-tint2);
    border-radius: 24px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.sa-tile-main {
    display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 8px; align-items: center;
    padding: 18px 18px 8px 18px;
    color: inherit; text-decoration: none; border-radius: 22px 22px 0 0;
}
a.sa-tile-main { cursor: pointer; }
a.sa-tile-main:focus-visible { outline: 3px solid var(--sa-solid); outline-offset: 2px; }
.sa-tile-icon {
    grid-row: 1; width: 56px; height: 56px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sa-solid); color: #FFFFFF;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--sa-solid) 35%, transparent);
}
.sa-tile-icon .mud-icon-root { font-size: 30px; width: 30px; height: 30px; color: #FFFFFF; }
/* Names and descriptions never break mid-word (no "To- / Dos"): words wrap whole, hyphenated words stay together. */
.sa-tile-name, .sa-tile-desc { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; }
.sa-nowrap { white-space: nowrap; }
.sa-tile-name { font-size: 1.08rem; font-weight: 800; line-height: 1.25; color: var(--sa-ink); padding-right: 40px; }
/* The one-liner runs the full tile width under the icon + name, so it stays 2–3 lines instead of 5–7. */
.sa-tile-desc { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.45; color: #334155; }
.sa-tile-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 18px 10px 18px; }
.sa-badge { border-radius: 999px; padding: 3px 9px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.3; text-transform: uppercase; }
.sa-badge-core  { background: #DCFCE7; color: #14532D; }
.sa-badge-addon { background: #E2E8F0; color: #1E293B; }
.sa-badge-soon  { background: #FEF3C7; color: #78350F; }
.sa-badge-owner { background: #E0E7FF; color: #312E81; }
.sa-badge-off   { background: #FFFFFF; color: #1E293B; border: 1.5px dashed #64748B; padding: 2px 8px; }
.sa-tile-stat { font-size: 0.78rem; font-weight: 700; color: #334155; }
.sa-tile-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding: 0 16px 14px 18px; }
.sa-tile-link {
    display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px;
    border: 1.5px solid var(--sa-tint2); border-radius: 999px; background: #FFFFFF;
    font-size: 0.8rem; font-weight: 700; color: var(--sa-ink); text-decoration: none;
}
.sa-tile-link:hover { background: var(--sa-tint2); }
.sa-tile-link:focus-visible { outline: 3px solid var(--sa-solid); outline-offset: 2px; }
.sa-info {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: #FFFFFF; color: var(--sa-ink); cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}
.sa-info:hover { background: var(--sa-tint2); }
.sa-info:focus-visible { outline: 3px solid var(--sa-solid); outline-offset: 2px; }

/* Coming soon: grey bubble, dashed edge, not clickable (tip still works through the info button). */
.sa-tile-soon { background: linear-gradient(160deg, #F8FAFC 0%, #FFFFFF 72%); border-style: dashed; border-color: #CBD5E1; }
.sa-tile-soon .sa-tile-icon { background: #475569; box-shadow: none; }
.sa-tile-soon .sa-tile-name { color: #1E293B; }

/* Tip: real hover (html.sa-hover-armed: the pointer has actually moved since this page loaded), keyboard focus
   (html.sa-kbd + :focus-visible), or the info button (phones). Never on first paint. Esc hides it. (app-v0.15.1) */
.sa-tip {
    position: absolute; left: 12px; right: 12px; top: calc(100% - 8px); z-index: 30;
    padding: 10px 14px; border-radius: 14px;
    background: #0F172A; color: #F8FAFC; font-size: 0.875rem; line-height: 1.45;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}
.sa-tip::before {
    content: ""; position: absolute; top: -6px; right: 24px;
    border: 6px solid transparent; border-top: 0; border-bottom-color: #0F172A;
}
.sa-tile.sa-tip-open .sa-tip { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.sa-tile.sa-tip-open { z-index: 6; }
@media (hover: hover) {
    /* Keyboard focus shows the tip (touch screens use the info button, so a tap never leaves a stuck tip). */
    html.sa-kbd .sa-tile:has(:focus-visible) .sa-tip { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
    html.sa-kbd .sa-tile:has(:focus-visible) { z-index: 6; }
    html.sa-hover-armed .sa-tile:hover { transform: translateY(-2px); border-color: var(--sa-solid); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); z-index: 6; }
    html.sa-hover-armed .sa-tile-soon:hover { transform: none; border-color: #94A3B8; }
    html.sa-hover-armed .sa-tile:hover .sa-tip { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.15s ease 0.35s, visibility 0s linear 0.35s; }
}
@media (hover: hover) {
    /* app-v0.17.0: pointing at the (i) shows the tip right away (no hover delay). */
    html.sa-hover-armed .sa-tile:has(.sa-info:hover) .sa-tip { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
}
.sa-tile.sa-tip-dismissed .sa-tip,
html.sa-tips-off .sa-tip { visibility: hidden !important; opacity: 0 !important; }

/* app-v0.18.1 (Hubprobe C1): a short last row fills the remaining columns at any column count. The grid is
   auto-fit with 300px minimum + 16px gap, so N columns start at a container width of 316N - 16 px. With r tiles in
   the last row, the last tile spans N - r + 1 columns. Only when there is more than one row (auto-fit already
   stretches a single short row). */
@container sa-launcher (min-width: 616px) and (max-width: 931.98px) {
    .sa-grid > .sa-tile:last-child:nth-child(2n+1):nth-child(n+3) { grid-column: span 2; }
}
@container sa-launcher (min-width: 932px) and (max-width: 1247.98px) {
    .sa-grid > .sa-tile:last-child:nth-child(3n+1):nth-child(n+4) { grid-column: span 3; }
    .sa-grid > .sa-tile:last-child:nth-child(3n+2):nth-child(n+4) { grid-column: span 2; }
}
@container sa-launcher (min-width: 1248px) and (max-width: 1563.98px) {
    .sa-grid > .sa-tile:last-child:nth-child(4n+1):nth-child(n+5) { grid-column: span 4; }
    .sa-grid > .sa-tile:last-child:nth-child(4n+2):nth-child(n+5) { grid-column: span 3; }
    .sa-grid > .sa-tile:last-child:nth-child(4n+3):nth-child(n+5) { grid-column: span 2; }
}
@container sa-launcher (min-width: 1564px) and (max-width: 1879.98px) {
    .sa-grid > .sa-tile:last-child:nth-child(5n+1):nth-child(n+6) { grid-column: span 5; }
    .sa-grid > .sa-tile:last-child:nth-child(5n+2):nth-child(n+6) { grid-column: span 4; }
    .sa-grid > .sa-tile:last-child:nth-child(5n+3):nth-child(n+6) { grid-column: span 3; }
    .sa-grid > .sa-tile:last-child:nth-child(5n+4):nth-child(n+6) { grid-column: span 2; }
}
@container sa-launcher (min-width: 1880px) and (max-width: 2195.98px) {
    .sa-grid > .sa-tile:last-child:nth-child(6n+1):nth-child(n+7) { grid-column: span 6; }
    .sa-grid > .sa-tile:last-child:nth-child(6n+2):nth-child(n+7) { grid-column: span 5; }
    .sa-grid > .sa-tile:last-child:nth-child(6n+3):nth-child(n+7) { grid-column: span 4; }
    .sa-grid > .sa-tile:last-child:nth-child(6n+4):nth-child(n+7) { grid-column: span 3; }
    .sa-grid > .sa-tile:last-child:nth-child(6n+5):nth-child(n+7) { grid-column: span 2; }
}
@container sa-launcher (min-width: 2196px) and (max-width: 2511.98px) {
    .sa-grid > .sa-tile:last-child:nth-child(7n+1):nth-child(n+8) { grid-column: span 7; }
    .sa-grid > .sa-tile:last-child:nth-child(7n+2):nth-child(n+8) { grid-column: span 6; }
    .sa-grid > .sa-tile:last-child:nth-child(7n+3):nth-child(n+8) { grid-column: span 5; }
    .sa-grid > .sa-tile:last-child:nth-child(7n+4):nth-child(n+8) { grid-column: span 4; }
    .sa-grid > .sa-tile:last-child:nth-child(7n+5):nth-child(n+8) { grid-column: span 3; }
    .sa-grid > .sa-tile:last-child:nth-child(7n+6):nth-child(n+8) { grid-column: span 2; }
}
@container sa-launcher (min-width: 2512px) {
    .sa-grid > .sa-tile:last-child:nth-child(8n+1):nth-child(n+9) { grid-column: span 8; }
    .sa-grid > .sa-tile:last-child:nth-child(8n+2):nth-child(n+9) { grid-column: span 7; }
    .sa-grid > .sa-tile:last-child:nth-child(8n+3):nth-child(n+9) { grid-column: span 6; }
    .sa-grid > .sa-tile:last-child:nth-child(8n+4):nth-child(n+9) { grid-column: span 5; }
    .sa-grid > .sa-tile:last-child:nth-child(8n+5):nth-child(n+9) { grid-column: span 4; }
    .sa-grid > .sa-tile:last-child:nth-child(8n+6):nth-child(n+9) { grid-column: span 3; }
    .sa-grid > .sa-tile:last-child:nth-child(8n+7):nth-child(n+9) { grid-column: span 2; }
}
    .sa-grid > .sa-tile:last-child:nth-child(6n+2):nth-child(n+7) { grid-column: span 5; }
    .sa-grid > .sa-tile:last-child:nth-child(6n+3):nth-child(n+7) { grid-column: span 4; }
    .sa-grid > .sa-tile:last-child:nth-child(6n+4):nth-child(n+7) { grid-column: span 3; }
    .sa-grid > .sa-tile:last-child:nth-child(6n+5):nth-child(n+7) { grid-column: span 2; }
}

/* Not turned on (opt-in add-on): solid tile, dashed edge, opens the app's "turn it on" page. */
.sa-tile-off { border-style: dashed; border-color: #94A3B8; }

@media (max-width: 600px) {
    .sa-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .sa-tile-main { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding: 16px 14px 6px 14px; }
    .sa-tile-icon { width: 48px; height: 48px; border-radius: 16px; }
    .sa-tile-icon .mud-icon-root { font-size: 26px; width: 26px; height: 26px; }
    .sa-tile-foot { padding: 4px 14px 8px 14px; }
    .sa-tile-links { padding: 0 14px 14px 14px; }
    /* Phones: the tip opens inside the tile, right under the text, so it is always on screen. */
    .sa-tip { position: static; display: none; margin: 0 14px 12px; visibility: visible; opacity: 1; transition: none; box-shadow: none; }
    .sa-tip::before { display: none; }
    .sa-tile.sa-tip-open .sa-tip { display: block; }
    .sa-hero { padding: 16px 18px; border-radius: 22px; }
    .sa-hero-title { font-size: 1.35rem; }
}

/* ---- Per-app header strip on every app page, with "All apps" back to the launcher ---- */
.sa-strip {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 14px; padding: 10px 12px 10px 10px;
    background: linear-gradient(120deg, var(--sa-tint2) 0%, var(--sa-tint) 60%, #FFFFFF 100%);
    border: 2px solid var(--sa-tint2); border-radius: 20px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.sa-strip-icon {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sa-solid); color: #FFFFFF;
}
.sa-strip-icon .mud-icon-root { color: #FFFFFF; }
.sa-strip-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.sa-strip-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sa-ink); }
.sa-strip-name { font-size: 1.05rem; font-weight: 800; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-strip-back {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 8px 14px; border-radius: 999px;
    background: var(--sa-solid); color: #FFFFFF; font-size: 0.875rem; font-weight: 800; text-decoration: none;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--sa-solid) 30%, transparent);
}
.sa-strip-back .mud-icon-root { color: #FFFFFF; }
.sa-strip-back:hover { filter: brightness(0.92); }
.sa-strip-back:focus-visible { outline: 3px solid #0F172A; outline-offset: 2px; }
@media (max-width: 600px) {
    .sa-strip { padding: 8px 8px 8px 8px; gap: 10px; border-radius: 18px; }
    .sa-strip-icon { flex-basis: 38px; width: 38px; height: 38px; border-radius: 12px; }
    .sa-strip-name { font-size: 0.98rem; }
}

/* ---- Drawer: app entries carry their color + icon; info button + inline tip for phones ---- */
.mud-drawer .hh-nav-menu .hh-nav-allapps.mud-nav-link { font-weight: 700 !important; }
.mud-drawer .hh-nav-menu .hh-nav-allapps .mud-icon-root { color: #FDE68A !important; }
.hh-nav-app .hh-nav-group-icon,
.hh-nav-app .hh-nav-group-main .mud-icon-root { color: var(--sa-glow) !important; }
.hh-nav-app.hh-nav-group-active > .hh-nav-group-header { background: color-mix(in srgb, var(--sa-glow) 20%, transparent); }
.hh-nav-app.hh-nav-group-active > .hh-nav-group-header { box-shadow: inset 3px 0 0 var(--sa-glow); }
.hh-nav-pill {
    margin-left: auto; padding: 1px 7px; border-radius: 999px;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: #0F172A; background: var(--sa-glow, #CBD5E1);
}
.hh-nav-group-soon .hh-nav-group-main { cursor: default; }
.hh-nav-group-soon .hh-nav-group-title { color: #CBD5E1; }
.hh-nav-group-info {
    flex: 0 0 28px; width: 28px; height: var(--hh-nav-row, 34px); padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; color: #94A3B8; cursor: pointer;
}
.hh-nav-group-info .mud-icon-root { font-size: 16px !important; width: 16px !important; height: 16px !important; }
.hh-nav-group-info:hover, .hh-nav-group-info:focus-visible { color: #F8FAFC; background: rgba(148, 163, 184, 0.14); }
.hh-nav-group-info:focus-visible, .hh-nav-group-main:focus-visible { outline: 2px solid var(--sa-glow, #5EEAD4); outline-offset: -2px; }
/* Drawer tips (app-v0.15.1): same rules as tiles — real hover, keyboard :focus-visible, or the (i) button; Esc closes;
   one at a time. A floating bubble under the row (no layout shift), kept inside the drawer width. */
.hh-nav-group { position: relative; }
.hh-nav-tip {
    position: absolute; left: 8px; right: 8px; top: calc(var(--hh-nav-row, 34px) + 4px); z-index: 40;
    padding: 8px 10px; border-radius: 12px;
    border-left: 3px solid var(--sa-glow, #94A3B8); background: #0F172A; color: #F1F5F9;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    font-size: 0.78rem; line-height: 1.4; white-space: normal; text-align: left;
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}
.hh-nav-group.hh-nav-tip-open > .hh-nav-tip { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
/* app-v0.17.0 (Hubprobe polish): a tip opened with (i) sits in the menu flow under its row, pushing the next rows down,
   so it never covers the next row's (i). Hover / focus tips still float (they don't take clicks). */
.hh-nav-group.hh-nav-tip-open > .hh-nav-tip { position: static; margin: 2px 8px 6px; }
@media (hover: hover) {
    html.sa-hover-armed .hh-nav-group-header:has(.hh-nav-group-main:hover) + .hh-nav-tip,
    html.sa-hover-armed .hh-nav-group-header:has(.hh-nav-group-info:hover) + .hh-nav-tip {
        visibility: visible; opacity: 1; transition: opacity 0.15s ease 0.35s, visibility 0s linear 0.35s;
    }
    html.sa-kbd .hh-nav-group-header:has(.hh-nav-group-main:focus-visible) + .hh-nav-tip,
    html.sa-kbd .hh-nav-group-header:has(.hh-nav-group-info:focus-visible) + .hh-nav-tip {
        visibility: visible; opacity: 1; transition-delay: 0s;
    }
}
/* One tip at a time: while the pointer is over a tile or drawer row, every OTHER hover/focus/opened tip hides. */
html.sa-hover-armed body:has(.sa-tile:hover) .sa-tile:not(:hover) .sa-tip,
html.sa-hover-armed body:has(.sa-tile:hover) .hh-nav-tip,
html.sa-hover-armed body:has(.hh-nav-group-header:hover) .sa-tip,
html.sa-hover-armed body:has(.hh-nav-group-header:hover) .hh-nav-group:not(:has(> .hh-nav-group-header:hover)) > .hh-nav-tip {
    visibility: hidden !important; opacity: 0 !important;
}
html.sa-tips-off .hh-nav-tip { visibility: hidden !important; opacity: 0 !important; }
body:has(.sa-tile.sa-tip-open) .sa-tile:not(.sa-tip-open) .sa-tip,
body:has(.hh-nav-group.hh-nav-tip-open) .sa-tile .sa-tip,
body:has(.sa-tile.sa-tip-open) .hh-nav-group:not(.hh-nav-tip-open) > .hh-nav-tip,
body:has(.hh-nav-group.hh-nav-tip-open) .hh-nav-group:not(.hh-nav-tip-open) > .hh-nav-tip {
    visibility: hidden !important; opacity: 0 !important;
}

/* ---- Friendlier, bubblier hub chrome (signed-in hub pages only) ---- */
.mud-drawer .hh-nav-menu .mud-nav-link,
.hh-nav-group-header { border-radius: 12px !important; }
.hh-main-content .hh-workspace-banner { border-radius: 20px; }
.hh-main-content .stat-card,
.hh-main-content .chart-card { border-radius: 20px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05); }
.hh-main-content .hh-attention-strip { border-radius: 16px; }
.hh-main-content .hh-disclaimer { border-radius: 16px; }
.hh-main-content .hh-landing-hero { border-radius: 20px; }
.hh-main-content .mud-paper:not(.mud-popover):not(.mud-table):not(.mud-appbar) { border-radius: 18px; }
.hh-main-content .mud-table { border-radius: 18px; overflow: hidden; }
.hh-main-content .mud-alert { border-radius: 14px; }
.hh-main-content .mud-button-root.mud-button { border-radius: 999px; }
.hh-main-content .mud-input-outlined-border { border-radius: 12px !important; }
.hh-main-content .stat-card-icon { border-radius: 14px; }

@media (max-width: 900px) {
    .hh-banner-hubs:has(.sa-allapps-btn) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .sa-tile, .sa-tip, .hh-nav-tip { transition: none !important; }
    .sa-tile:hover { transform: none !important; }
}

/* app-v0.19.1 (Sitewright Mileage P2): "At a glance" stat grids use the launcher's short-row rule. A last row with
   fewer cards than columns no longer leaves orphans at 25% width: the cards in that row grow to share it (a lone card
   spans the row, two orphans in a 4-column row take half each). Full rows are unchanged (their basis already fills). */
.sa-glance > .mud-grid-item { flex-grow: 1; max-width: none; }