:root {
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;

    --charcoal-950: #1d2023;
    --charcoal-900: #232629;
    --charcoal-850: #2a2d30;

    --page-grey: #e7e8ea;
    --section-grey: #f1f2f3;
    --section-white: #ffffff;

    --gold-700: #9e6906;
    --gold-600: #bd8109;
    --gold-500: #d7a313;

    --purple-800: #43206f;
    --purple-700: #512886;
    --purple-600: #623a96;

    --text: #202124;
    --muted: #5f6368;
    --white: #ffffff;

    --divider: #d2d4d7;
    --dark-divider: rgba(255, 255, 255, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--charcoal-950);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: var(--charcoal-950);
    font-family:
        Arial,
        Helvetica,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.app-shell {
    width: min(100%, 620px);
    min-height: 100vh;
    margin: 0 auto;
    background: var(--page-grey);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding:
        calc(var(--space-2) + env(safe-area-inset-top))
        var(--space-2)
        var(--space-2);
    border-bottom: 1px solid var(--dark-divider);
    background: rgba(35, 38, 41, 0.98);
    backdrop-filter: blur(18px);
}

.brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-logo {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    object-fit: contain;
}

.brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.brand-name {
    color: var(--gold-500);
    font-size: clamp(23px, 6vw, 29px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.brand-tagline {
    overflow: hidden;
    margin-top: 5px;
    color: var(--white);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.icon-button {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.notification-button svg {
    width: 30px;
    height: 30px;
    overflow: visible;
    fill: none;
    stroke: var(--white);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.notification-button circle {
    fill: var(--purple-600);
    stroke: var(--charcoal-900);
    stroke-width: 1.5;
}

.app-content {
    padding: 0 0 calc(88px + env(safe-area-inset-bottom));
    background: var(--page-grey);
}

.section-band {
    width: 100%;
    border-bottom: 1px solid var(--divider);
}

.section-band-light {
    background: var(--section-grey);
}

.section-band-white {
    background: var(--section-white);
}

.section-inner {
    width: 100%;
    padding: var(--space-4) var(--space-3);
}

.week-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: var(--space-2);
    align-items: center;
}

.week-copy {
    min-width: 0;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gold-700);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.label-line {
    width: 48px;
    height: 1px;
    background: var(--gold-500);
}

.week-section h1 {
    margin: var(--space-2) 0 var(--space-1);
    font-size: clamp(34px, 9vw, 48px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.06;
}

.week-dates {
    margin: 0;
    color: var(--muted);
    font-size: clamp(17px, 4.5vw, 20px);
    line-height: 1.4;
}

.week-illustration {
    display: block;
    width: 160px;
    height: 160px;
    max-width: 100%;
    justify-self: end;
    object-fit: contain;
}

.button {
    display: grid;
    min-height: 56px;
    align-items: center;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 120ms ease,
        filter 120ms ease;
}

.button:active {
    transform: scale(0.985);
    filter: brightness(0.97);
}

.button-jw {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 64px;
    margin-top: var(--space-3);
    padding: 8px 14px;
    background: linear-gradient(
        135deg,
        var(--purple-600),
        var(--purple-800)
    );
    color: var(--white);
}

.jw-mark {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 4px;
    background: var(--white);
    color: var(--purple-700);
    font-size: 15px;
    font-weight: 700;
}

.button-jw svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.empty-state {
    padding: var(--space-3) var(--space-1);
    text-align: center;
}

.empty-state-illustration {
    width: 128px;
    height: 128px;
    object-fit: contain;
}

.empty-state h2 {
    max-width: 380px;
    margin: var(--space-1) auto var(--space-1);
    font-size: clamp(24px, 6.5vw, 30px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.empty-state p {
    max-width: 360px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.button-gold {
    display: flex;
    min-height: 64px;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border: 1px solid var(--gold-700);
    background: linear-gradient(
        135deg,
        #e7b417,
        #c98504
    );
    color: var(--white);
}

.button-gold img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.info-row,
.encouragement-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
    text-decoration: none;
}

.info-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.info-copy strong {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.info-copy > span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.info-illustration {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.chevron {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--text);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.text-link {
    color: var(--purple-700);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.encouragement-row {
    padding-top: var(--space-2);
    border-top: 1px solid var(--divider);
}

.bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(100%, 620px);
    margin: 0 auto;
    padding:
        8px
        10px
        calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--dark-divider);
    background: rgba(35, 38, 41, 0.98);
    backdrop-filter: blur(20px);
}

.nav-item {
    display: flex;
    min-height: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.nav-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.nav-item.is-active {
    color: var(--gold-500);
}

.nav-item.is-active::after {
    width: 28px;
    height: 2px;
    background: var(--gold-500);
    content: "";
}

@media (max-width: 430px) {
    .section-inner {
        padding: var(--space-3) var(--space-2);
    }

    .week-main {
        grid-template-columns: minmax(0, 1fr) 120px;
        gap: var(--space-1);
    }

    .week-illustration {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 350px) {
    .brand-tagline {
        display: none;
    }

    .week-main {
        grid-template-columns: 1fr;
    }

    .week-illustration {
        display: none;
    }

    .info-row,
    .encouragement-row {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        gap: var(--space-1);
    }

    .info-illustration {
        width: 56px;
        height: 56px;
    }
}

@media (min-width: 621px) {
    body {
        padding: var(--space-3) 0;
    }

    .app-shell {
        overflow: hidden;
        min-height: calc(100vh - 48px);
        border: 1px solid var(--dark-divider);
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
    }

    .bottom-nav {
        bottom: var(--space-3);
        border: 1px solid var(--dark-divider);
    }
}

/* Family Gems official icon pack — v0.2.2 */

.brand-logo,
.notification-button img,
.week-illustration,
.empty-state-illustration,
.button-gold img,
.info-illustration,
.nav-item img {
    background: transparent;
    object-fit: contain;
}

.brand-logo {
    color: var(--gold-500);
    filter: drop-shadow(0 0 8px rgba(215, 163, 19, 0.22));
}

.notification-button img {
    width: 30px;
    height: 30px;
    color: #f2f3f4;
}

.week-illustration {
    color: var(--gold-600);
    filter: drop-shadow(0 6px 8px rgba(158, 105, 6, 0.13));
}

.empty-state-illustration,
.button-gold img {
    color: var(--gold-600);
}

.info-illustration {
    color: var(--purple-700);
}

.nav-item img {
    color: #c7c9cc;
    opacity: 0.92;
}

.nav-item.is-active img {
    color: var(--gold-500);
    opacity: 1;
}

.brand-logo,
.notification-button img,
.week-illustration,
.empty-state-illustration,
.button-gold img,
.info-illustration,
.nav-item img {
    stroke: currentColor;
}


/* Family Gems v0.3.0 — inline SVG icon system */

.app-icon {
    display: block;
    width: 1em;
    height: 1em;
    overflow: visible;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 3.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.app-icon path,
.app-icon circle,
.app-icon rect {
    fill: none;
    stroke: currentColor;
}

.app-icon .icon-accent {
    color: var(--gold-500);
    stroke: currentColor;
}

.app-icon .icon-fill {
    fill: currentColor;
}

.brand-symbol {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(215, 163, 19, 0.34);
    background: rgba(215, 163, 19, 0.08);
}

.app-icon-brand {
    width: 38px;
    height: 38px;
    color: var(--gold-500);
    filter: drop-shadow(0 0 8px rgba(215, 163, 19, 0.2));
}

.app-icon-header {
    width: 30px;
    height: 30px;
    color: #f6f7f8;
}

.hero-symbol {
    display: grid;
    width: 160px;
    height: 160px;
    justify-self: end;
    place-items: center;
    color: var(--gold-600);
}

.hero-icon {
    width: 138px;
    height: 138px;
    filter: drop-shadow(0 8px 12px rgba(158, 105, 6, 0.16));
}

.empty-symbol {
    display: grid;
    width: 128px;
    height: 128px;
    margin: 0 auto;
    place-items: center;
    color: var(--gold-600);
}

.empty-icon {
    width: 112px;
    height: 112px;
    filter: drop-shadow(0 8px 12px rgba(158, 105, 6, 0.16));
}

.button-icon {
    width: 25px;
    height: 25px;
    color: currentColor;
}

.button-icon-gold {
    width: 34px;
    height: 34px;
    color: #ffffff;
}

.info-symbol {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: var(--purple-700);
}

.info-icon {
    width: 52px;
    height: 52px;
}

.chevron-icon {
    width: 24px;
    height: 24px;
    color: var(--text);
}

.nav-icon {
    width: 31px;
    height: 31px;
    color: #d8dadd;
}

.nav-item.is-active .nav-icon {
    color: var(--gold-500);
}

.nav-item:hover .nav-icon,
.nav-item:focus-visible .nav-icon {
    color: #ffffff;
}

@media (max-width: 430px) {
    .hero-symbol {
        width: 120px;
        height: 120px;
    }

    .hero-icon {
        width: 108px;
        height: 108px;
    }
}

@media (max-width: 350px) {
    .hero-symbol {
        display: none;
    }

    .info-symbol {
        width: 56px;
        height: 56px;
    }

    .info-icon {
        width: 46px;
        height: 46px;
    }
}

/* Family Gems v0.3.2 transparent GIF icon system */

.brand-symbol img,
.notification-button img,
.hero-symbol img,
.empty-symbol img,
.button-image,
.info-symbol img,
.nav-icon {
    display: block;
    background: transparent !important;
    border: 0;
    object-fit: contain;
    image-rendering: auto;
}

.brand-symbol img {
    width: 42px;
    height: 42px;
}

.notification-button img {
    width: 32px;
    height: 32px;
}

.hero-symbol img {
    width: 142px;
    height: 142px;
}

.empty-symbol img {
    width: 114px;
    height: 114px;
}

.info-symbol img {
    width: 54px;
    height: 54px;
}

.button-image {
    width: 34px;
    height: 34px;
}

.nav-icon {
    width: 33px;
    height: 33px;
}

@media (max-width: 430px) {
    .hero-symbol img {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 350px) {
    .info-symbol img {
        width: 48px;
        height: 48px;
    }
}

/* Premium Icon Pack */

.app-icon path,
.app-icon circle,
.app-icon rect{
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}

.icon-accent{
stroke:#C7A64B;
fill:none;
}

.icon-fill{
fill:#C7A64B;
stroke:#C7A64B;
}

/* Family Gems v0.3.4 — refined symbol language */
.app-icon {
    --icon-accent: #b89342;
    display: block;
    flex: 0 0 auto;
    overflow: visible;
    shape-rendering: geometricPrecision;
}

.app-icon path,
.app-icon circle,
.app-icon rect,
.app-icon line,
.app-icon polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.app-icon .icon-accent {
    color: var(--icon-accent);
    stroke: currentColor;
}

.app-icon .icon-fill {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.35;
}

.app-icon .icon-spark {
    stroke-width: 1.55;
}

.app-icon-brand,
.hero-icon,
.empty-icon {
    stroke-width: 1.85;
}

.app-icon-header,
.nav-icon,
.button-icon,
.chevron-icon {
    stroke-width: 1.9;
}

.nav-item.is-active .nav-icon,
.button-gold .button-icon,
.button-jw .button-icon {
    --icon-accent: currentColor;
}

@media (max-width: 480px) {
    .app-icon path,
    .app-icon circle,
    .app-icon rect,
    .app-icon line,
    .app-icon polyline {
        stroke-width: 1.85;
    }
}

/* Family Gems v0.3.5 — thin branding and illuminated active navigation */

/* Brand mark: finer linework with more breathing room */
.app-icon-brand {
    width: 31px;
    height: 31px;
    transform: scale(.91);
    transform-origin: center;
}

.app-icon-brand path,
.app-icon-brand circle,
.app-icon-brand rect,
.app-icon-brand line,
.app-icon-brand polyline {
    stroke-width: 1.38 !important;
}

.app-icon-brand .icon-accent {
    stroke-width: 1.2 !important;
}

/* Header notification symbol */
.app-icon-header {
    width: 23px;
    height: 23px;
    transform: scale(.88);
    transform-origin: center;
}

.app-icon-header path,
.app-icon-header circle,
.app-icon-header rect,
.app-icon-header line,
.app-icon-header polyline {
    stroke-width: 1.32 !important;
}

.app-icon-header .icon-fill {
    stroke-width: 1.05 !important;
}

/* Navigation symbols: ultra-clean inactive state */
.nav-icon {
    position: relative;
    z-index: 2;
    width: 23px;
    height: 23px;
    transform: scale(.9);
    transform-origin: center;
    transition:
        color 180ms ease,
        transform 180ms ease,
        filter 180ms ease;
}

.nav-icon path,
.nav-icon circle,
.nav-icon rect,
.nav-icon line,
.nav-icon polyline {
    stroke-width: 1.28 !important;
}

.nav-icon .icon-accent {
    stroke-width: 1.12 !important;
}

/*
 * Soft "gold coin" active state.
 * The halo is attached to the navigation item rather than embedded into
 * the SVG, so every symbol receives the same visual treatment.
 */
.nav-item {
    position: relative;
    isolation: isolate;
}

.nav-item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transform: translateX(-50%) scale(.78);
    background:
        radial-gradient(
            circle at 38% 32%,
            rgba(255, 250, 225, .98) 0%,
            rgba(232, 205, 126, .88) 40%,
            rgba(183, 146, 63, .46) 72%,
            rgba(183, 146, 63, 0) 100%
        );
    border: 1px solid rgba(183, 146, 63, .28);
    box-shadow:
        0 5px 14px rgba(70, 56, 23, .16),
        inset 0 1px 0 rgba(255, 255, 255, .72);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.nav-item.is-active::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.nav-item.is-active .nav-icon {
    color: #5f491c;
    transform: scale(.92);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .42));
}

.nav-item:not(.is-active) .nav-icon {
    color: #7f8588;
}

.nav-item:hover::before,
.nav-item:focus-visible::before {
    opacity: .55;
    transform: translateX(-50%) scale(.92);
}

.nav-item:hover .nav-icon,
.nav-item:focus-visible .nav-icon {
    transform: scale(.94);
}

/* Preserve legibility for the active label */
.nav-item.is-active {
    color: #725821;
}

/* Thinner action and directional symbols */
.button-icon path,
.button-icon circle,
.button-icon rect,
.button-icon line,
.button-icon polyline {
    stroke-width: 1.35 !important;
}

.chevron-icon path,
.chevron-icon circle,
.chevron-icon rect {
    stroke-width: 1.48 !important;
}

/* Small-screen optical corrections */
@media (max-width: 480px) {
    .app-icon-brand {
        transform: scale(.88);
    }

    .nav-icon {
        width: 22px;
        height: 22px;
        transform: scale(.88);
    }

    .nav-item::before {
        top: 4px;
        width: 36px;
        height: 36px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .nav-icon,
    .nav-item::before {
        transition: none;
    }
}

/* ==========================================================================
   Family Gems Design System v1.0
   Cohesive colour, spacing, type, navigation, cards and controls
   ========================================================================== */

:root {
    --fg-charcoal-950: #202326;
    --fg-charcoal-900: #282c2f;
    --fg-charcoal-800: #34393d;
    --fg-grey-700: #62696d;
    --fg-grey-600: #757c80;
    --fg-grey-500: #90969a;
    --fg-grey-300: #d7dbdd;
    --fg-grey-200: #e7e9ea;
    --fg-grey-100: #f2f3f3;
    --fg-warm-white: #fffdf8;
    --fg-white: #ffffff;

    --fg-gold-700: #866722;
    --fg-gold-600: #9e7a2d;
    --fg-gold-500: #b8923f;
    --fg-gold-400: #c9a657;
    --fg-gold-200: #eadbae;
    --fg-gold-100: #f7f0dc;

    --fg-jw-purple: #6654a3;
    --fg-jw-purple-hover: #59488f;

    --fg-radius-sm: 10px;
    --fg-radius-md: 16px;
    --fg-radius-lg: 22px;
    --fg-radius-pill: 999px;

    --fg-space-1: 4px;
    --fg-space-2: 8px;
    --fg-space-3: 12px;
    --fg-space-4: 16px;
    --fg-space-5: 20px;
    --fg-space-6: 24px;
    --fg-space-7: 28px;
    --fg-space-8: 32px;

    --fg-shadow-sm: 0 1px 2px rgba(25, 28, 30, .06);
    --fg-shadow-md: 0 8px 24px rgba(25, 28, 30, .08);
    --fg-shadow-button: 0 4px 12px rgba(25, 28, 30, .10);

    --fg-transition: 180ms ease;
}

/* Base canvas and typography */
html {
    background: var(--fg-grey-100);
}

body {
    background: var(--fg-grey-100);
    color: var(--fg-charcoal-950);
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.app-shell {
    background: var(--fg-grey-100);
}

h1,
h2,
h3,
strong,
.brand-name {
    color: var(--fg-charcoal-950);
    letter-spacing: -.025em;
}

p,
.info-copy span,
.week-dates,
.brand-tagline {
    color: var(--fg-grey-700);
    line-height: 1.55;
}

/* Header */
.app-header {
    min-height: 72px;
    padding:
        max(var(--fg-space-3), env(safe-area-inset-top))
        var(--fg-space-5)
        var(--fg-space-3);
    background: var(--fg-charcoal-950);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 3px 14px rgba(0, 0, 0, .12);
}

.brand {
    gap: var(--fg-space-3);
}

.brand-symbol {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
}

.app-icon-brand {
    width: 32px !important;
    height: 32px !important;
    transform: none !important;
    color: var(--fg-gold-400);
}

.app-icon-brand path,
.app-icon-brand circle,
.app-icon-brand rect,
.app-icon-brand line,
.app-icon-brand polyline {
    stroke-width: 1.42 !important;
}

.brand-name {
    color: var(--fg-white);
    font-size: 1.08rem;
    font-weight: 700;
}

.brand-tagline {
    color: rgba(255, 255, 255, .66);
    font-size: .74rem;
    letter-spacing: .01em;
}

.icon-button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .055);
    box-shadow: none;
    transition:
        background var(--fg-transition),
        border-color var(--fg-transition),
        transform var(--fg-transition);
}

.icon-button:hover,
.icon-button:focus-visible {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .18);
    transform: translateY(-1px);
}

.app-icon-header {
    width: 27px !important;
    height: 27px !important;
    transform: none !important;
    color: var(--fg-white);
}

.app-icon-header path,
.app-icon-header circle,
.app-icon-header rect,
.app-icon-header line,
.app-icon-header polyline {
    stroke-width: 1.4 !important;
}

/* Section rhythm */
.app-content {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

.section-band {
    margin: 0;
    border: 0;
}

.section-inner {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: var(--fg-space-8) var(--fg-space-5);
}

.section-band-light {
    background: var(--fg-gold-100);
}

.section-band-white {
    background: var(--fg-warm-white);
}

.section-label {
    margin-bottom: var(--fg-space-4);
    gap: var(--fg-space-3);
    color: var(--fg-gold-700);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: none;
}

.label-line {
    background: linear-gradient(
        90deg,
        rgba(184, 146, 63, .55),
        rgba(184, 146, 63, 0)
    );
}

.week-main {
    gap: var(--fg-space-6);
}

.week-copy h1 {
    margin: 0 0 var(--fg-space-2);
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.05;
    font-weight: 750;
}

.week-dates {
    margin: 0;
    font-size: .98rem;
}

.hero-symbol,
.empty-symbol,
.info-symbol {
    display: grid;
    place-items: center;
}

.hero-icon {
    width: 68px;
    height: 68px;
    color: var(--fg-charcoal-900);
}

.empty-icon {
    width: 60px;
    height: 60px;
    color: var(--fg-gold-600);
}

/* Cards and rows */
.empty-state {
    padding: var(--fg-space-8) var(--fg-space-6);
    border: 1px solid rgba(134, 103, 34, .13);
    border-radius: var(--fg-radius-lg);
    background: rgba(255, 255, 255, .62);
    box-shadow: var(--fg-shadow-sm);
}

.empty-state h2 {
    margin-top: var(--fg-space-5);
    margin-bottom: var(--fg-space-3);
    font-size: clamp(1.25rem, 5vw, 1.55rem);
    line-height: 1.22;
}

.empty-state p {
    max-width: 34rem;
    margin-inline: auto;
}

.info-row {
    gap: var(--fg-space-4);
    border-radius: var(--fg-radius-lg);
    transition:
        background var(--fg-transition),
        transform var(--fg-transition);
}

.info-row:hover,
.info-row:focus-visible {
    background: rgba(255, 255, 255, .45);
    transform: translateY(-1px);
}

.info-icon {
    width: 34px;
    height: 34px;
    color: var(--fg-gold-600);
}

.info-copy {
    gap: var(--fg-space-1);
}

.info-copy strong {
    font-size: 1rem;
}

/* Buttons */
.button {
    min-height: 50px;
    gap: var(--fg-space-3);
    padding: 0 var(--fg-space-5);
    border-radius: var(--fg-radius-md);
    font-weight: 700;
    letter-spacing: -.01em;
    box-shadow: var(--fg-shadow-button);
    transition:
        transform var(--fg-transition),
        box-shadow var(--fg-transition),
        background var(--fg-transition),
        border-color var(--fg-transition);
}

.button:hover,
.button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(25, 28, 30, .13);
}

.button:active {
    transform: translateY(0);
}

.button-gold {
    color: var(--fg-white);
    background: linear-gradient(180deg, var(--fg-gold-500), var(--fg-gold-600));
    border: 1px solid rgba(102, 78, 24, .22);
}

.button-gold:hover,
.button-gold:focus-visible {
    background: linear-gradient(180deg, var(--fg-gold-400), var(--fg-gold-600));
}

.button-jw {
    color: var(--fg-white);
    background: var(--fg-jw-purple);
    border: 1px solid rgba(48, 37, 91, .2);
}

.button-jw:hover,
.button-jw:focus-visible {
    background: var(--fg-jw-purple-hover);
}

.jw-mark {
    border-radius: 6px;
    background: rgba(255, 255, 255, .16);
}

.button-icon {
    width: 23px;
    height: 23px;
}

.button-icon path,
.button-icon circle,
.button-icon rect,
.button-icon line,
.button-icon polyline {
    stroke-width: 1.38 !important;
}

.chevron-icon {
    width: 19px;
    height: 19px;
    color: var(--fg-grey-500);
}

/* Bottom navigation: no halo, larger header-sized icons */
.nav-item::before,
.nav-item::after {
    content: none !important;
    display: none !important;
}

.app-nav,
.bottom-nav,
nav[aria-label="Primary"] {
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--fg-grey-200);
    box-shadow: 0 -5px 20px rgba(25, 28, 30, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nav-item {
    min-height: 68px;
    padding: var(--fg-space-2) var(--fg-space-2)
        max(var(--fg-space-2), env(safe-area-inset-bottom));
    gap: 5px;
    color: var(--fg-grey-600);
    background: transparent !important;
    border-radius: 0;
    transition:
        color var(--fg-transition),
        transform var(--fg-transition);
}

.nav-icon {
    width: 27px !important;
    height: 27px !important;
    transform: none !important;
    color: currentColor;
    filter: none !important;
}

.nav-icon path,
.nav-icon circle,
.nav-icon rect,
.nav-icon line,
.nav-icon polyline {
    stroke-width: 1.4 !important;
}

.nav-icon .icon-accent {
    stroke-width: 1.22 !important;
}

.nav-item span:not(.nav-icon),
.nav-item .nav-label {
    font-size: .72rem;
    font-weight: 620;
    letter-spacing: -.005em;
}

.nav-item.is-active {
    color: var(--fg-gold-600) !important;
    background: transparent !important;
}

.nav-item.is-active .nav-icon {
    color: var(--fg-gold-600) !important;
    transform: scale(1.045) !important;
}

.nav-item:hover,
.nav-item:focus-visible {
    color: var(--fg-charcoal-900);
    background: transparent !important;
}

.nav-item:hover .nav-icon,
.nav-item:focus-visible .nav-icon {
    transform: scale(1.025) !important;
}

/* Accessibility */
:focus-visible {
    outline: 3px solid rgba(102, 84, 163, .34);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .app-header {
        padding-inline: var(--fg-space-4);
    }

    .section-inner {
        padding: var(--fg-space-7) var(--fg-space-4);
    }

    .app-icon-brand {
        width: 31px !important;
        height: 31px !important;
    }

    .app-icon-header,
    .nav-icon {
        width: 26px !important;
        height: 26px !important;
    }

    .empty-state {
        padding: var(--fg-space-7) var(--fg-space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   Family Gems v1.1 — polished homepage layout
   ========================================================================== */

:root {
    --fg-jw-library-purple: #5b3c88;
    --fg-jw-library-purple-dark: #4f3478;
}

.fg-page-width {
    width: min(100%, 980px);
    margin: 0 auto;
    padding-inline: 20px;
}

.fg-week-card-section {
    padding: 28px 0 22px;
    background: #f2f3f3;
}

.fg-week-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    overflow: hidden;
    min-height: 172px;
    padding: 28px 30px 28px 38px;
    border: 1px solid rgba(184, 146, 63, .18);
    border-radius: 22px;
    background:
        linear-gradient(
            110deg,
            rgba(255, 253, 248, .98),
            rgba(250, 239, 207, .82)
        );
    box-shadow: 0 10px 30px rgba(38, 40, 42, .07);
}

.fg-week-card-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 14px;
    background: linear-gradient(180deg, #cda64d, #e1bb5a);
}

.fg-week-reading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 24px;
}

.fg-week-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.fg-week-bible-icon {
    width: 76px;
    height: 76px;
    color: #202b38;
}

.fg-week-copy {
    min-width: 0;
}

.fg-week-label {
    margin-bottom: 6px;
    color: #202b38;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.fg-week-copy h1 {
    margin: 0;
    color: #202b38;
    font-size: clamp(1.05rem, 2.4vw, 1.6rem);
    font-weight: 520;
    line-height: 1.2;
    letter-spacing: -.025em;
    white-space: nowrap;
}

.fg-week-copy p {
    margin: 8px 0 0;
    color: #70777c;
    font-size: .92rem;
}

.fg-jw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 66px;
    padding: 8px 18px 8px 8px;
    border: 1px solid rgba(56, 35, 88, .22);
    border-radius: 17px;
    color: #fff;
    background: var(--fg-jw-library-purple);
    box-shadow: 0 8px 20px rgba(91, 60, 136, .2);
    font-size: 1.08rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.fg-jw-button:hover,
.fg-jw-button:focus-visible {
    color: #fff;
    background: var(--fg-jw-library-purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(91, 60, 136, .26);
}

.fg-jw-logo {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 10px;
}

.fg-jw-external {
    width: 22px;
    height: 22px;
}

.fg-jw-external path {
    stroke-width: 1.55 !important;
}

.fg-gems-section {
    padding: 12px 0 22px;
    background: #fff;
}

.fg-section-heading {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 18px 0 8px;
}

.fg-section-heading-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: #a9812d;
}

.fg-section-heading-icon .app-icon {
    width: 46px;
    height: 46px;
}

.fg-section-heading h2 {
    margin: 0;
    color: #202b38;
    font-size: clamp(1.65rem, 4vw, 2.4rem);
    font-weight: 730;
    line-height: 1;
    letter-spacing: -.04em;
}

.fg-section-heading-line {
    height: 1px;
    margin-left: 8px;
    background: linear-gradient(
        90deg,
        rgba(184, 146, 63, .9),
        rgba(184, 146, 63, .18)
    );
}

.fg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 24px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
}

.fg-empty-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: #8a9199;
}

.fg-empty-icon .app-icon {
    width: 58px;
    height: 58px;
}

.fg-empty-state h3 {
    margin: 16px 0 8px;
    color: #303b4c;
    font-size: clamp(1.1rem, 3vw, 1.42rem);
    font-weight: 600;
    letter-spacing: -.02em;
}

.fg-empty-state p {
    max-width: 34rem;
    margin: 0;
    color: #727a82;
    font-size: .96rem;
}

.fg-share-button {
    margin-top: 22px;
}

.fg-encouragement-section {
    padding: 0 0 28px;
    background: #fff;
}

.fg-encouragement-card {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 16px;
    min-height: 92px;
    padding: 20px 24px;
    border: 1px solid rgba(184, 146, 63, .16);
    border-radius: 20px;
    color: #202b38;
    background:
        linear-gradient(
            110deg,
            rgba(255, 253, 248, .98),
            rgba(250, 239, 207, .72)
        );
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(38, 40, 42, .06);
}

.fg-encouragement-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: #202b38;
}

.fg-encouragement-icon .app-icon {
    width: 48px;
    height: 48px;
}

.fg-encouragement-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fg-encouragement-copy strong {
    color: #202b38;
    font-size: 1.32rem;
    letter-spacing: -.025em;
}

.fg-encouragement-copy span {
    color: #737a80;
    font-size: .88rem;
}

.fg-encouragement-line {
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(184, 146, 63, .82),
        rgba(184, 146, 63, .12)
    );
}

@media (max-width: 760px) {
    .fg-week-card {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 26px 20px 22px 30px;
    }

    .fg-jw-button {
        width: 100%;
    }

    .fg-week-bible-icon {
        width: 62px;
        height: 62px;
    }

    .fg-week-copy h1 {
        font-size: clamp(.98rem, 4.5vw, 1.28rem);
    }
}

@media (max-width: 430px) {
    .fg-page-width {
        padding-inline: 14px;
    }

    .fg-week-card-section {
        padding-top: 18px;
    }

    .fg-week-card {
        border-radius: 18px;
        padding-left: 24px;
    }

    .fg-week-reading {
        gap: 14px;
    }

    .fg-week-bible-icon {
        width: 50px;
        height: 50px;
    }

    .fg-week-label {
        font-size: 1.32rem;
    }

    .fg-week-copy h1 {
        font-size: .98rem;
    }

    .fg-jw-button {
        min-height: 60px;
        font-size: 1rem;
    }

    .fg-jw-logo {
        width: 46px;
        height: 46px;
    }

    .fg-section-heading {
        gap: 10px;
    }

    .fg-section-heading-icon,
    .fg-section-heading-icon .app-icon {
        width: 40px;
        height: 40px;
    }

    .fg-section-heading h2 {
        font-size: 1.55rem;
    }

    .fg-encouragement-card {
        grid-template-columns: auto 1fr auto;
    }

    .fg-encouragement-line {
        display: none;
    }
}

/* ==========================================================================
   Family Gems v1.2 — square, full-width visual system
   No rounded containers or buttons anywhere in the application
   ========================================================================== */

:root {
    --fg-radius-sm: 0;
    --fg-radius-md: 0;
    --fg-radius-lg: 0;
    --fg-radius-pill: 0;
}

/* Remove rounded corners globally from interface elements */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

button,
.button,
.icon-button,
input,
textarea,
select,
a[class*="button"],
[class*="card"],
[class*="panel"],
[class*="box"],
[class*="state"] {
    border-radius: 0 !important;
}

/* Full-width section bands */
.fg-page-width,
.section-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: clamp(16px, 4vw, 42px) !important;
}

.fg-week-card-section,
.fg-gems-section,
.fg-encouragement-section,
.section-band {
    width: 100%;
}

/* This Week becomes a full-width rectangular band */
.fg-week-card-section {
    padding: 0 !important;
}

.fg-week-card {
    width: 100%;
    min-height: 164px;
    margin: 0;
    padding:
        28px clamp(16px, 4vw, 42px)
        28px clamp(28px, 5vw, 54px);
    border-left: 0;
    border-right: 0;
    border-radius: 0 !important;
    box-shadow: 0 5px 18px rgba(38, 40, 42, .06);
}

.fg-week-card-accent {
    width: 12px;
    border-radius: 0 !important;
}

/* JW Library action: square corners and intrinsic width */
.fg-jw-button {
    width: auto !important;
    max-width: 100%;
    min-height: 62px;
    justify-self: end;
    padding: 7px 18px 7px 7px;
    border-radius: 0 !important;
}

.fg-jw-logo {
    border-radius: 0 !important;
}

/* Family Gems area: no enclosing box */
.fg-gems-section {
    padding: 0;
}

.fg-section-heading {
    padding-top: 26px;
}

.fg-empty-state,
.empty-state {
    width: 100%;
    padding: 30px 16px 28px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Encouragement becomes another full-width rectangular band */
.fg-encouragement-section {
    padding: 0;
}

.fg-encouragement-section .fg-page-width {
    padding-inline: 0 !important;
}

.fg-encouragement-card {
    width: 100%;
    min-height: 96px;
    padding: 20px clamp(16px, 4vw, 42px);
    border-left: 0;
    border-right: 0;
    border-radius: 0 !important;
    box-shadow: 0 4px 16px rgba(38, 40, 42, .05);
}

/* All ordinary buttons stay compact rather than full width */
.button,
.button-gold,
.button-jw,
.fg-share-button {
    width: auto !important;
    max-width: 100%;
    align-self: center;
    justify-self: center;
    border-radius: 0 !important;
}

/* Header notification control is square */
.icon-button {
    border-radius: 0 !important;
}

/* Navigation remains full width with square geometry */
.app-nav,
.bottom-nav,
nav[aria-label="Primary"],
.nav-item {
    border-radius: 0 !important;
}

/* Remove any decorative circular or pill backgrounds */
.brand-symbol,
.hero-symbol,
.empty-symbol,
.info-symbol,
.fg-week-icon,
.fg-section-heading-icon,
.fg-empty-icon,
.fg-encouragement-icon {
    border-radius: 0 !important;
    background: transparent !important;
}

/* Square focus treatment */
:focus-visible {
    border-radius: 0 !important;
}

/* Mobile: preserve full-width bands while keeping readable padding */
@media (max-width: 760px) {
    .fg-week-card {
        grid-template-columns: 1fr;
        padding:
            24px 16px
            22px 28px;
    }

    .fg-jw-button {
        width: auto !important;
        justify-self: start;
    }

    .fg-page-width,
    .section-inner {
        padding-inline: 16px !important;
    }

    .fg-encouragement-section .fg-page-width {
        padding-inline: 0 !important;
    }

    .fg-encouragement-card {
        padding-inline: 16px;
    }
}

@media (max-width: 430px) {
    .fg-week-card {
        padding-left: 24px;
    }

    .fg-jw-button {
        min-height: 58px;
        padding-right: 14px;
    }
}

/* Family Gems v1.2.1 — open This Week layout and aligned actions */

/* Remove the This Week container completely */
.fg-week-card-section {
    padding: 0 !important;
    background: var(--fg-grey-100, #f2f3f3) !important;
}

.fg-week-card {
    display: grid;
    grid-template-columns: 1fr !important;
    justify-items: stretch;
    width: 100%;
    min-height: 0;
    padding:
        30px clamp(16px, 4vw, 42px)
        28px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fg-week-card-accent {
    display: none !important;
}

/* Keep the reading information on the light-grey page background */
.fg-week-reading {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}

/* Make both principal buttons identical and centrally aligned */
.fg-jw-button,
.fg-share-button {
    box-sizing: border-box;
    width: 260px !important;
    min-width: 260px;
    max-width: calc(100vw - 32px);
    min-height: 62px;
    margin: 24px auto 0 !important;
    padding: 7px 16px !important;
    align-self: center !important;
    justify-self: center !important;
    justify-content: center !important;
    text-align: center;
}

/* Balance the JW button contents while preserving its logo */
.fg-jw-button {
    display: grid;
    grid-template-columns: 48px 1fr 22px;
    gap: 12px;
}

.fg-jw-logo {
    width: 48px;
    height: 48px;
}

.fg-jw-button > span {
    text-align: center;
    white-space: nowrap;
}

/* Share button uses the same centred internal alignment */
.fg-share-button {
    display: inline-flex !important;
    gap: 12px;
}

.fg-share-button .button-icon {
    width: 24px;
    height: 24px;
}

/* Remove inherited positioning that could offset either button */
.fg-empty-state .fg-share-button {
    margin-inline: auto !important;
}

/* Mobile adjustment */
@media (max-width: 430px) {
    .fg-week-card {
        padding: 24px 16px !important;
    }

    .fg-jw-button,
    .fg-share-button {
        width: 244px !important;
        min-width: 244px;
        min-height: 60px;
    }

    .fg-jw-button {
        grid-template-columns: 46px 1fr 20px;
        gap: 10px;
    }

    .fg-jw-logo {
        width: 46px;
        height: 46px;
    }
}


/* Family Gems v1.3 — unified section system */

.fg-clean-section {
    width: 100%;
    border: 0;
    background: var(--fg-grey-100, #f2f3f3);
}

.fg-clean-section + .fg-clean-section {
    border-top: 1px solid rgba(32, 43, 56, .08);
}

.fg-clean-section-gems {
    background: #fff;
}

.fg-clean-section-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 28px clamp(16px, 4vw, 42px) 34px;
}

.fg-unified-heading {
    display: grid;
    grid-template-columns: auto auto minmax(40px, 1fr);
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 0 24px;
}

.fg-unified-heading-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--fg-gold-600, #9e7a2d);
}

.fg-unified-heading-icon .app-icon {
    width: 44px;
    height: 44px;
}

.fg-unified-heading h2 {
    margin: 0;
    color: var(--fg-charcoal-950, #202326);
    font-size: clamp(1.65rem, 4vw, 2.2rem);
    font-weight: 730;
    line-height: 1;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.fg-unified-heading-line {
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(184, 146, 63, .9),
        rgba(184, 146, 63, .18)
    );
}

.fg-week-content,
.fg-empty-copy {
    width: 100%;
    text-align: center;
}

.fg-week-content h1 {
    margin: 0;
    color: var(--fg-charcoal-950, #202326);
    font-size: clamp(1.45rem, 4vw, 2rem);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.03em;
    white-space: nowrap;
}

.fg-week-content p {
    margin: 8px 0 0;
    color: var(--fg-grey-700, #62696d);
    font-size: .95rem;
}

.fg-empty-copy h3 {
    margin: 0;
    color: var(--fg-charcoal-900, #282c2f);
    font-size: clamp(1.1rem, 3vw, 1.35rem);
    font-weight: 620;
    letter-spacing: -.02em;
}

.fg-empty-copy p {
    max-width: 38rem;
    margin: 8px auto 0;
    color: var(--fg-grey-700, #62696d);
    font-size: .95rem;
    line-height: 1.55;
}

.fg-action-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 24px;
}

.fg-action-button {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    width: 260px;
    min-height: 62px;
    padding: 7px 14px 7px 7px;
    border: 1px solid transparent;
    border-radius: 0 !important;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
    transition: transform 180ms ease, background 180ms ease;
}

.fg-action-button:hover,
.fg-action-button:focus-visible {
    color: #fff;
    transform: translateY(-1px);
}

.fg-action-button > span {
    text-align: center;
    white-space: nowrap;
}

.fg-action-button-image {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0 !important;
}

.fg-action-button-icon {
    width: 26px;
    height: 26px;
    justify-self: center;
}

.fg-action-button-trailing {
    width: 22px;
    height: 22px;
    justify-self: end;
}

.fg-action-button-jw {
    background: #5b3c88;
    border-color: rgba(56, 35, 88, .28);
}

.fg-action-button-jw:hover,
.fg-action-button-jw:focus-visible {
    background: #4f3478;
}

.fg-action-button-gold {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    padding-inline: 14px;
    background: linear-gradient(180deg, #b8923f, #9e7a2d);
    border-color: rgba(102, 78, 24, .24);
}

.fg-action-button-gold::after {
    content: "";
    width: 34px;
    height: 1px;
}

.fg-action-button-gold:hover,
.fg-action-button-gold:focus-visible {
    background: linear-gradient(180deg, #c9a657, #9e7a2d);
}

@media (max-width: 480px) {
    .fg-clean-section-inner {
        padding: 24px 16px 30px;
    }

    .fg-unified-heading {
        gap: 10px;
        margin-bottom: 22px;
    }

    .fg-unified-heading-icon,
    .fg-unified-heading-icon .app-icon {
        width: 38px;
        height: 38px;
    }

    .fg-unified-heading h2 {
        font-size: 1.5rem;
    }

    .fg-action-button {
        width: 244px;
        min-height: 60px;
    }

    .fg-action-button-image {
        width: 46px;
        height: 46px;
    }

    .fg-week-content h1 {
        font-size: 1.35rem;
    }
}

/* ==========================================================================
   Family Gems v1.4 — weekly gems functionality
   ========================================================================== */

.fg-gem-list,
.fg-encouragement-list {
    display: grid;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.fg-gem-entry {
    padding: 22px 0;
    border-bottom: 1px solid rgba(32, 43, 56, .12);
}

.fg-gem-entry:first-child {
    padding-top: 0;
}

.fg-gem-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.fg-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(158, 122, 45, .38);
    background: #f7f0dc;
    color: #866722;
    font-weight: 750;
}

.fg-gem-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fg-gem-author strong,
.fg-encouragement-entry strong {
    color: var(--fg-charcoal-950, #202326);
}

.fg-gem-author span {
    color: var(--fg-gold-700, #866722);
    font-size: .86rem;
    font-weight: 650;
}

.fg-gem-body {
    margin: 16px 0 0;
    color: var(--fg-charcoal-900, #282c2f);
    font-size: 1rem;
    line-height: 1.65;
    white-space: pre-wrap;
}

.fg-text-action {
    color: var(--fg-gold-700, #866722);
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
}

.fg-comment-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding-left: 54px;
}

.fg-comment {
    padding: 10px 12px;
    border-left: 3px solid rgba(184, 146, 63, .45);
    background: rgba(247, 240, 220, .42);
}

.fg-comment strong {
    display: block;
    margin-bottom: 3px;
    font-size: .82rem;
}

.fg-comment span {
    color: var(--fg-grey-700, #62696d);
    font-size: .9rem;
    line-height: 1.45;
}

.fg-gem-footer {
    margin-top: 16px;
}

.fg-comment-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--fg-grey-700, #62696d);
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
}

.fg-comment-link .app-icon {
    width: 20px;
    height: 20px;
}

.fg-encouragement-entry {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(32, 43, 56, .11);
}

.fg-encouragement-entry:first-child {
    padding-top: 0;
}

.fg-encouragement-entry p {
    margin: 4px 0 0;
    color: var(--fg-grey-700, #62696d);
    line-height: 1.55;
}

.fg-form-section {
    min-height: calc(100vh - 150px);
    background: var(--fg-grey-100, #f2f3f3);
}

.fg-form-inner {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 30px 18px 42px;
}

.fg-form-context {
    margin: -10px 0 24px;
    color: var(--fg-grey-700, #62696d);
    text-align: center;
}

.fg-form {
    display: grid;
    gap: 22px;
}

.fg-field {
    display: grid;
    gap: 8px;
}

.fg-field label {
    color: var(--fg-charcoal-950, #202326);
    font-weight: 700;
}

.fg-field input,
.fg-field textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #cfd3d5;
    border-radius: 0 !important;
    background: #fff;
    color: var(--fg-charcoal-950, #202326);
    font: inherit;
}

.fg-field textarea {
    resize: vertical;
}

.fg-field input:focus,
.fg-field textarea:focus {
    border-color: var(--fg-jw-purple, #6654a3);
    outline: 3px solid rgba(102, 84, 163, .16);
}

.fg-field-error {
    color: #a33535;
    font-size: .85rem;
}

.fg-form-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 4px;
}

.fg-primary-button,
.fg-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 0 !important;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.fg-primary-button {
    border: 1px solid #866722;
    background: #9e7a2d;
    color: #fff;
}

.fg-secondary-button {
    border: 1px solid #bfc4c6;
    background: #fff;
    color: var(--fg-charcoal-900, #282c2f);
}

.fg-comment-context {
    margin: 0 0 24px;
    padding: 16px;
    border-left: 4px solid var(--fg-gold-500, #b8923f);
    background: rgba(255, 255, 255, .65);
}

.fg-comment-context strong,
.fg-comment-context span {
    display: block;
}

.fg-comment-context span {
    margin-top: 3px;
    color: var(--fg-gold-700, #866722);
    font-size: .86rem;
}

.fg-comment-context p {
    margin: 12px 0 0;
}

@media (max-width: 480px) {
    .fg-comment-list {
        padding-left: 0;
    }

    .fg-form-actions {
        flex-direction: column-reverse;
    }

    .fg-primary-button,
    .fg-secondary-button {
        width: 100%;
    }
}

/* Family Gems v1.4.1 — authentication */

.fg-checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: var(--fg-charcoal-900, #282c2f);
    font-weight: 600;
    cursor: pointer;
}

.fg-checkbox-field input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--fg-gold-600, #9e7a2d);
}


/* Family Gems v1.5 — passwordless invites */
.fg-admin-inner {
    width: min(100%, 880px);
    margin: 0 auto;
    padding: 30px 18px 44px;
}
.fg-admin-invite-form {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 14px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(32,43,56,.12);
}
.fg-admin-members { margin-top: 28px; }
.fg-admin-member {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(32,43,56,.11);
}
.fg-admin-member > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fg-admin-member span {
    color: var(--fg-grey-700, #62696d);
    font-size: .86rem;
}
.fg-admin-member-actions {
    display: flex;
    gap: 8px;
}
.fg-admin-member-actions form { margin: 0; }
.fg-danger-button {
    min-width: 92px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #973f3f;
    border-radius: 0 !important;
    background: #fff;
    color: #8a3030;
    font: inherit;
    font-weight: 700;
}
.fg-invite-result {
    display: grid;
    gap: 14px;
    max-width: 680px;
    margin: 0 auto;
}
.fg-invite-result input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #c7ccce;
    border-radius: 0 !important;
    background: #fff;
    font: inherit;
}
.fg-invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.fg-whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid #197b4b;
    background: #218c59;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.fg-invite-warning {
    padding-left: 12px;
    border-left: 3px solid var(--fg-gold-500, #b8923f);
    color: var(--fg-grey-700, #62696d);
    font-size: .88rem;
}
@media (max-width: 620px) {
    .fg-admin-invite-form,
    .fg-admin-member { grid-template-columns: 1fr; }
    .fg-admin-invite-form .fg-primary-button { width: 100%; }
    .fg-invite-actions { flex-direction: column; }
    .fg-invite-actions > * { width: 100%; }
}
/* Family Gems v1.6 — Meeting Ready */
.fg-speaking-meter{display:grid;gap:8px;margin-top:4px}.fg-speaking-meter-summary{display:flex;justify-content:space-between;gap:14px;font-size:.86rem}.fg-speaking-meter-summary span{color:var(--fg-grey-700,#62696d);text-align:right}.fg-speaking-meter-track{width:100%;height:5px;overflow:hidden;background:#d9dddf}.fg-speaking-meter-track span{display:block;width:0;height:100%;background:#8a9195;transition:width 160ms ease,background 160ms ease}.fg-speaking-meter[data-state="brief"] .fg-speaking-meter-track span{background:#768e9c}.fg-speaking-meter[data-state="ready"] .fg-speaking-meter-track span{background:#55815e}.fg-speaking-meter[data-state="long"] .fg-speaking-meter-track span{background:#b48735}.fg-speaking-meter[data-state="over"] .fg-speaking-meter-track span{background:#a44646}.fg-speaking-meter[data-state="ready"] [data-meter-status]{color:#356b40}.fg-speaking-meter[data-state="long"] [data-meter-status]{color:#8a641f}.fg-speaking-meter[data-state="over"] [data-meter-status]{color:#913838}.fg-speaking-meter>p{margin:0;color:var(--fg-grey-700,#62696d);font-size:.8rem}.fg-meeting-ready{display:grid;gap:16px;padding:22px 0;border-top:1px solid rgba(32,43,56,.12);border-bottom:1px solid rgba(32,43,56,.12)}.fg-meeting-ready-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}.fg-meeting-ready-heading>div{display:flex;flex-direction:column;gap:3px}.fg-meeting-ready-heading span{color:var(--fg-grey-700,#62696d);font-size:.84rem}.fg-ai-button{min-height:44px;padding:0 15px;border:1px solid #5b3c88;border-radius:0!important;background:#5b3c88;color:#fff;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}.fg-ai-button:disabled{cursor:wait;opacity:.68}.fg-ai-message{padding:11px 12px;border-left:3px solid #5b3c88;background:rgba(91,60,136,.07);font-size:.87rem;line-height:1.45}.fg-ai-message.is-success{border-left-color:#55815e;background:rgba(85,129,94,.08)}.fg-ai-message.is-error{border-left-color:#a44646;background:rgba(164,70,70,.08);color:#873838}.fg-ai-note{margin:0;color:var(--fg-grey-700,#62696d);font-size:.8rem}.fg-meeting-version{margin-top:18px;padding:14px 0;border-top:1px solid rgba(184,146,63,.25);border-bottom:1px solid rgba(184,146,63,.25)}.fg-meeting-version summary{display:flex;justify-content:space-between;gap:14px;color:var(--fg-gold-700,#866722);font-size:.86rem;font-weight:700;cursor:pointer}.fg-meeting-version p{margin:14px 0;line-height:1.6;white-space:pre-wrap}.fg-copy-meeting-version{min-height:38px;padding:0 12px;border:1px solid var(--fg-gold-600,#9e7a2d);border-radius:0!important;background:transparent;color:var(--fg-gold-700,#866722);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}@media(max-width:580px){.fg-meeting-ready-heading{align-items:stretch;flex-direction:column}.fg-ai-button{width:100%}.fg-speaking-meter-summary{align-items:flex-start;flex-direction:column;gap:3px}.fg-speaking-meter-summary span{text-align:left}}

/* Family Gems v1.6.1 — simplified Gemify */
.fg-meeting-ready { display: none !important; }
.fg-gemify-prompt {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-top: 16px;
  text-align: center;
}
.fg-gemify-prompt[hidden],
.fg-gemify-modal[hidden] { display: none !important; }
.fg-gemify-prompt p {
  max-width: 34rem;
  margin: 0;
  color: #873838;
  line-height: 1.5;
}
.fg-gemify-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 18px;
}
.fg-gemify-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24,27,30,.72);
}
.fg-gemify-dialog {
  position: relative;
  z-index: 1;
  width: min(100%,620px);
  padding: 22px;
  border: 1px solid #cfd3d5;
  border-radius: 0 !important;
  background: #fff;
}
.fg-gemify-dialog-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #ddd;
}
.fg-gemify-dialog-heading h2 { margin-top: 0; }
.fg-gemify-close {
  width: 38px;
  height: 38px;
  border: 1px solid #ccc;
  border-radius: 0 !important;
  background: #fff;
  font-size: 1.5rem;
}
.fg-gemify-result {
  margin: 20px 0 10px;
  font-size: 1.05rem;
  line-height: 1.7;
}
.fg-gemify-result-meta {
  color: var(--fg-grey-700,#62696d);
}
.fg-gemify-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
body.fg-modal-open { overflow: hidden; }

/* Family Gems v1.6.2 — collapsed homepage comments */

.fg-comments-disclosure {
    width: 100%;
}

.fg-comments-disclosure summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--fg-grey-700, #62696d);
    font-size: .86rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.fg-comments-disclosure summary::-webkit-details-marker {
    display: none;
}

.fg-comments-disclosure summary::after {
    content: "▾";
    margin-left: 2px;
    font-size: .72rem;
    transition: transform 160ms ease;
}

.fg-comments-disclosure[open] summary::after {
    transform: rotate(180deg);
}

.fg-comments-disclosure summary .app-icon {
    width: 20px;
    height: 20px;
}

.fg-comments-disclosure .fg-comment-list {
    margin-top: 14px;
    padding-left: 0;
}

.fg-add-comment-link {
    display: inline-block;
    margin-top: 4px;
    color: var(--fg-gold-700, #866722);
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
}


/* Family Gems v1.7 — personal meeting-day settings */
.fg-settings-intro {
    margin-bottom: 24px;
    text-align: center;
}
.fg-settings-intro h3 { margin: 0; }
.fg-settings-intro p {
    max-width: 40rem;
    margin: 8px auto 0;
    color: var(--fg-grey-700, #62696d);
    line-height: 1.55;
}
.fg-settings-form {
    display: grid;
    gap: 22px;
}
.fg-meeting-day-options {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(32, 43, 56, .16);
}
.fg-meeting-day-options legend {
    padding: 0 8px;
    color: var(--fg-charcoal-950, #202326);
    font-weight: 700;
}
.fg-meeting-day-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(32, 43, 56, .10);
    background: #fff;
    cursor: pointer;
}
.fg-meeting-day-option:last-child { border-bottom: 0; }
.fg-meeting-day-option:has(input:checked) {
    background: var(--fg-gold-100, #f7f0dc);
    color: var(--fg-gold-700, #866722);
    font-weight: 700;
}
.fg-meeting-day-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--fg-gold-600, #9e7a2d);
}
@media (max-width: 480px) {
    .fg-settings-intro { text-align: left; }
}

/* Family Gems v1.8 — compact editable comments */

.fg-comments-disclosure {
    width: 100%;
}

.fg-comments-disclosure > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--fg-grey-700, #62696d);
    font-size: .86rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.fg-comments-disclosure > summary::-webkit-details-marker {
    display: none;
}

.fg-comments-disclosure > summary::after {
    content: "▾";
    margin-left: 3px;
    font-size: .72rem;
    transition: transform 160ms ease;
}

.fg-comments-disclosure[open] > summary::after {
    transform: rotate(180deg);
}

.fg-comments-disclosure > summary .app-icon {
    width: 20px;
    height: 20px;
}

.fg-comments-disclosure .fg-comment-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding-left: 0;
}

.fg-comment-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.fg-comment-heading strong {
    margin: 0;
}

.fg-comment-edit-link,
.fg-add-comment-link {
    color: var(--fg-gold-700, #866722);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.fg-add-comment-link {
    width: fit-content;
    margin-top: 3px;
}

.fg-no-comments {
    margin: 0;
    color: var(--fg-grey-700, #62696d);
    font-size: .86rem;
    font-style: italic;
}

/* Family Gems v2.0 */
.fg-dashboard-section { background:#fff; border-top:1px solid rgba(32,43,56,.08); }
.fg-personal-entry { width:min(100%,760px); margin:0 auto; padding:18px 0; border-top:1px solid rgba(32,43,56,.1); border-bottom:1px solid rgba(32,43,56,.1); }
.fg-personal-entry-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.fg-personal-entry p { margin:14px 0 0; line-height:1.65; white-space:pre-wrap; }
.fg-personal-entry-meta { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:12px; color:var(--fg-grey-700,#62696d); font-size:.82rem; }
.fg-family-gems-banner-section { width:100%; background:var(--fg-grey-100,#f2f3f3); padding:0 0 28px; }
.fg-family-gems-banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; width:100%; padding:22px clamp(16px,4vw,42px); border-top:1px solid rgba(158,122,45,.28); border-bottom:1px solid rgba(158,122,45,.28); background:var(--fg-gold-100,#f7f0dc); color:var(--fg-charcoal-950,#202326); text-decoration:none; }
.fg-family-gems-banner-icon { display:grid; place-items:center; width:48px; height:48px; color:var(--fg-gold-600,#9e7a2d); }
.fg-family-gems-banner-icon .app-icon { width:48px; height:48px; }
.fg-family-gems-banner-copy { display:flex; flex-direction:column; gap:4px; }
.fg-family-gems-banner-copy strong { font-size:1.12rem; }
.fg-family-gems-banner-copy span { color:var(--fg-grey-700,#62696d); font-size:.86rem; }
.fg-family-page { min-height:calc(100vh - 150px); }
.fg-participation-summary { width:min(100%,760px); margin:0 auto 26px; }
.fg-participation-summary>div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:9px; }
.fg-participation-summary span { color:var(--fg-grey-700,#62696d); font-size:.84rem; }
.fg-participation-track { width:100%; height:7px; background:#dfe2e3; }
.fg-participation-track span { display:block; height:100%; background:var(--fg-gold-500,#b8923f); }
.fg-button-nav { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:8px 10px max(8px,env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--fg-grey-200,#e7e9ea); }
.fg-button-nav .fg-nav-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:58px; padding:7px 8px; border:1px solid transparent; background:var(--fg-grey-100,#f2f3f3)!important; color:var(--fg-grey-700,#62696d)!important; text-decoration:none; }
.fg-button-nav .fg-nav-button:hover,.fg-button-nav .fg-nav-button:focus-visible { border-color:rgba(158,122,45,.35); background:var(--fg-gold-100,#f7f0dc)!important; color:var(--fg-gold-700,#866722)!important; }
.fg-button-nav .fg-nav-button.is-active { border-color:var(--fg-gold-600,#9e7a2d)!important; background:var(--fg-gold-500,#b8923f)!important; color:#fff!important; box-shadow:0 3px 10px rgba(134,103,34,.18); }
.fg-button-nav .fg-nav-button.is-active .nav-icon { color:#fff!important; transform:none!important; }
.fg-button-nav .nav-icon { width:25px!important; height:25px!important; }
.fg-button-nav .nav-label { color:inherit; font-size:.7rem; font-weight:700; white-space:nowrap; }
@media(max-width:480px){.fg-family-gems-banner{gap:12px;padding-inline:16px}.fg-button-nav{gap:6px;padding-inline:7px}.fg-button-nav .fg-nav-button{min-height:56px;padding-inline:4px}}

/* Family Gems v2.0.3 — fixed viewport navigation */

.app-shell > nav.fg-button-nav {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 2147483647 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.app-content {
    padding-bottom:
        calc(
            var(--fg-fixed-nav-height, 88px)
            + 24px
            + env(safe-area-inset-bottom)
        ) !important;
}



/* ==========================================================================
   Family Gems v2.1 — Native UI Refresh
   ========================================================================== */

:root {
    --fg-shell-charcoal: var(--fg-charcoal-950, #232629);
    --fg-shell-charcoal-soft: #2d3135;
    --fg-nav-inactive: #d3d7da;
    --fg-nav-active: var(--fg-gold-500, #b8923f);
    --fg-native-transition: 180ms ease;
}

/* Header and navigation now share one visual shell */
.app-header {
    background: var(--fg-shell-charcoal) !important;
}

.app-shell > nav.fg-button-nav,
.app-shell > .app-nav.fg-button-nav {
    min-height: 76px !important;
    padding:
        8px 10px
        max(10px, env(safe-area-inset-bottom)) !important;

    background: var(--fg-shell-charcoal) !important;
    border-top: 0 !important;
    box-shadow:
        0 -8px 24px rgba(0, 0, 0, .24),
        0 -1px 0 rgba(255, 255, 255, .05) !important;
}

/* Navigation tabs behave like proper app buttons */
.app-shell > .fg-button-nav .fg-nav-button {
    min-height: 58px !important;
    padding: 8px 7px !important;

    border: 1px solid transparent !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: var(--fg-nav-inactive) !important;

    transition:
        background var(--fg-native-transition),
        color var(--fg-native-transition),
        border-color var(--fg-native-transition),
        transform 120ms ease,
        box-shadow var(--fg-native-transition) !important;

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.app-shell > .fg-button-nav .fg-nav-button .nav-icon,
.app-shell > .fg-button-nav .fg-nav-button .nav-label {
    color: inherit !important;
}

.app-shell > .fg-button-nav .fg-nav-button .nav-icon {
    width: 29px !important;
    height: 29px !important;
}

.app-shell > .fg-button-nav .fg-nav-button .nav-label {
    font-size: .72rem !important;
    font-weight: 730 !important;
    letter-spacing: .005em;
}

.app-shell > .fg-button-nav .fg-nav-button:hover,
.app-shell > .fg-button-nav .fg-nav-button:focus-visible {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

.app-shell > .fg-button-nav .fg-nav-button:active {
    transform: scale(.97);
}

.app-shell > .fg-button-nav .fg-nav-button.is-active {
    background: var(--fg-nav-active) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

.app-shell > .fg-button-nav .fg-nav-button.is-active:active {
    transform: scale(.985);
}

/* Keep page content clear of the slightly taller bar */
.app-content {
    padding-bottom:
        calc(var(--fg-fixed-nav-height, 92px) + 26px + env(safe-area-inset-bottom))
        !important;
}

/* Standardised action controls */
.fg-action-button,
.fg-primary-button,
.fg-secondary-button,
.fg-danger-button,
.fg-ai-button,
.fg-whatsapp-button,
.fg-copy-meeting-version {
    min-height: 50px;
    border-radius: 0 !important;
    transition:
        transform 120ms ease,
        filter var(--fg-native-transition),
        background var(--fg-native-transition),
        border-color var(--fg-native-transition),
        color var(--fg-native-transition),
        box-shadow var(--fg-native-transition) !important;

    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.fg-action-button:active,
.fg-primary-button:active,
.fg-secondary-button:active,
.fg-danger-button:active,
.fg-ai-button:active,
.fg-whatsapp-button:active,
.fg-copy-meeting-version:active {
    transform: scale(.985);
}

.fg-primary-button,
.fg-action-button-gold {
    box-shadow: 0 3px 10px rgba(134, 103, 34, .14);
}

.fg-primary-button:hover,
.fg-action-button-gold:hover {
    filter: brightness(1.04);
}

.fg-secondary-button:hover {
    background: #f6f7f7;
    border-color: #aeb4b7;
}

.fg-danger-button:hover {
    background: rgba(151, 63, 63, .06);
}

/* Refined spacing and hierarchy */
.fg-clean-section-inner,
.fg-form-inner,
.fg-admin-inner {
    padding-top: 30px;
    padding-bottom: 38px;
}

.fg-unified-heading {
    margin-bottom: 26px;
}

.fg-personal-entry,
.fg-gem-entry,
.fg-encouragement-entry {
    scroll-margin-top: 18px;
}

/* Smoother comments interaction */
.fg-comments-disclosure > summary {
    transition:
        color var(--fg-native-transition),
        opacity var(--fg-native-transition);
}

.fg-comments-disclosure > summary:hover {
    color: var(--fg-gold-700, #866722);
}

.fg-comments-disclosure[open] .fg-comment-list {
    animation: fg-comments-reveal 180ms ease both;
}

@keyframes fg-comments-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Banner feels more like an app destination */
.fg-family-gems-banner {
    transition:
        background var(--fg-native-transition),
        transform 120ms ease,
        box-shadow var(--fg-native-transition);
}

.fg-family-gems-banner:hover,
.fg-family-gems-banner:focus-visible {
    background: #f2e7c7;
    box-shadow: inset 0 0 0 1px rgba(158, 122, 45, .12);
}

.fg-family-gems-banner:active {
    transform: scale(.995);
}

/* Slightly stronger brand presence */
.app-icon-brand {
    width: 43px !important;
    height: 43px !important;
}

.brand-name {
    letter-spacing: -.025em;
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 480px) {
    .app-shell > nav.fg-button-nav,
    .app-shell > .app-nav.fg-button-nav {
        min-height: 78px !important;
        padding:
            7px
            7px
            max(11px, env(safe-area-inset-bottom)) !important;
    }

    .app-shell > .fg-button-nav .fg-nav-button {
        min-height: 59px !important;
        padding-inline: 4px !important;
    }

    .app-shell > .fg-button-nav .fg-nav-button .nav-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .fg-clean-section-inner,
    .fg-form-inner,
    .fg-admin-inner {
        padding-top: 26px;
        padding-bottom: 34px;
    }

    .app-content {
        padding-bottom:
            calc(var(--fg-fixed-nav-height, 94px) + 24px + env(safe-area-inset-bottom))
            !important;
    }
}

/* Family Gems v2.2 — notification centre */
.notification-button{position:relative;text-decoration:none}
.notification-badge{position:absolute;top:-5px;right:-7px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border:2px solid var(--fg-charcoal-950,#232629);background:#b94242;color:#fff;font-size:.66rem;font-weight:800}
.fg-notification-toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:24px}
.fg-notification-toolbar form{margin:0}
.fg-notification-list{display:grid;width:min(100%,760px);margin:0 auto}
.fg-notification-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid rgba(32,43,56,.11)}
.fg-notification-item.is-unread{background:linear-gradient(90deg,rgba(184,146,63,.12),transparent 75%)}
.fg-notification-icon{display:grid;place-items:center;width:42px;height:42px;color:var(--fg-gold-700,#866722)}
.fg-notification-icon .app-icon{width:30px;height:30px}
.fg-notification-copy{display:grid;gap:4px}
.fg-notification-copy p{margin:0;color:var(--fg-grey-700,#62696d);font-size:.9rem;line-height:1.45}
.fg-notification-copy>span{color:var(--fg-grey-600,#747b7f);font-size:.75rem}
.fg-notification-open{min-height:40px;padding:0 12px;border:1px solid var(--fg-gold-600,#9e7a2d);border-radius:0;background:transparent;color:var(--fg-gold-700,#866722);font:inherit;font-size:.8rem;font-weight:750}
.fg-notification-options{display:grid;border:1px solid rgba(32,43,56,.15)}
.fg-notification-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-height:72px;padding:12px 14px;border-bottom:1px solid rgba(32,43,56,.1);background:#fff}
.fg-notification-option:last-child{border-bottom:0}
.fg-notification-option input{width:20px;height:20px;margin:0;accent-color:var(--fg-gold-600,#9e7a2d)}
.fg-notification-option span{display:grid;gap:4px}
.fg-notification-option small{color:var(--fg-grey-700,#62696d);line-height:1.4}
.fg-settings-destination{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;margin-bottom:24px;padding:12px 14px;border:1px solid rgba(32,43,56,.15);background:#fff;color:var(--fg-charcoal-950,#202326);text-decoration:none}
.fg-settings-destination>span:first-child{display:grid;gap:4px}
.fg-settings-destination small{color:var(--fg-grey-700,#62696d)}
@media(max-width:560px){.fg-notification-toolbar{flex-direction:column}.fg-notification-toolbar>*,.fg-notification-toolbar button{width:100%}.fg-notification-item{grid-template-columns:auto minmax(0,1fr)}.fg-notification-item form{grid-column:2}}

/* Family Gems v2.3 — focused production polish */
.fg-avatar {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--fg-gold-100, #f7f0dc);
    color: var(--fg-gold-700, #866722);
    font-weight: 800;
    line-height: 1;
}
.fg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fg-avatar-small { width: 32px; height: 32px; font-size: .82rem; }
.fg-avatar-medium { width: 42px; height: 42px; font-size: 1rem; }
.fg-avatar-large {
    width: 84px;
    height: 84px;
    border: 3px solid rgba(184, 146, 63, .28);
    font-size: 1.8rem;
}
.fg-profile-photo-settings {
    display: grid;
    gap: 18px;
    margin-bottom: 28px;
    padding: 20px;
    border: 1px solid rgba(32, 43, 56, .12);
    background: #fff;
}
.fg-profile-photo-preview {
    display: flex;
    align-items: center;
    gap: 16px;
}
.fg-profile-photo-preview h3,
.fg-profile-photo-preview p { margin: 0; }
.fg-profile-photo-preview p {
    margin-top: 5px;
    color: var(--fg-grey-700, #62696d);
    line-height: 1.45;
}
.fg-profile-photo-form {
    display: grid;
    gap: 12px;
}
.fg-file-field {
    display: grid;
    gap: 7px;
    font-weight: 700;
}
.fg-file-field input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(32, 43, 56, .16);
    background: var(--fg-grey-100, #f2f3f3);
}
.fg-remove-photo,
.fg-author-with-avatar {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.fg-app-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px 10px;
    color: var(--fg-grey-600, #747b7f);
    font-size: .76rem;
}
.fg-error-page {
    display: grid;
    min-height: 60vh;
    padding: 28px 18px;
    place-items: center;
}
.fg-error-card {
    max-width: 34rem;
    padding: 34px 24px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(32, 43, 56, .12);
}
.fg-error-code {
    display: block;
    margin-bottom: 6px;
    color: var(--fg-gold-600, #9e7a2d);
    font-size: 2.4rem;
    font-weight: 850;
}
.fg-error-card h1 { margin: 0; }
.fg-error-card p {
    margin: 10px auto 22px;
    color: var(--fg-grey-700, #62696d);
    line-height: 1.5;
}

/* v2.3 avatar rendering fix */
.fg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}

.fg-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fg-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* v2.3.1 — retain dark navigation after fixed-nav relocation */
body > nav.fg-button-nav,
body > .app-nav.fg-button-nav,
.app-shell > nav.fg-button-nav,
.app-shell > .app-nav.fg-button-nav {
    background: var(--fg-shell-charcoal, #232629) !important;
    border-top: 0 !important;
    box-shadow:
        0 -8px 24px rgba(0, 0, 0, .28),
        0 -1px 0 rgba(255, 255, 255, .06) !important;
}

body > .fg-button-nav .fg-nav-button,
.app-shell > .fg-button-nav .fg-nav-button {
    background: transparent !important;
    color: var(--fg-nav-inactive, rgba(255, 255, 255, .72)) !important;
}

body > .fg-button-nav .fg-nav-button:hover,
body > .fg-button-nav .fg-nav-button:focus-visible,
.app-shell > .fg-button-nav .fg-nav-button:hover,
.app-shell > .fg-button-nav .fg-nav-button:focus-visible {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

body > .fg-button-nav .fg-nav-button.is-active,
.app-shell > .fg-button-nav .fg-nav-button.is-active {
    background: var(--fg-nav-active, #b8923f) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

body > .fg-button-nav .fg-nav-button .nav-icon,
body > .fg-button-nav .fg-nav-button .nav-label,
.app-shell > .fg-button-nav .fg-nav-button .nav-icon,
.app-shell > .fg-button-nav .fg-nav-button .nav-label {
    color: inherit !important;
}

/* v2.3.1 — standardised full-width content buttons */
.app-content .fg-action-button,
.app-content .fg-primary-button,
.app-content .fg-secondary-button,
.app-content .fg-danger-button,
.app-content .fg-ai-button,
.app-content .fg-whatsapp-button,
.app-content .fg-copy-meeting-version {
    display: flex;
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    text-align: center;
}

.app-content .fg-action-row,
.app-content .fg-form-actions {
    width: 100%;
}

.app-content .fg-action-row > *,
.app-content .fg-form-actions > * {
    flex: 1 1 100%;
}

/* v2.3.2 — scripture gem quotation styling */

.fg-gem-body {
    position: relative;
    line-height: 1.75;
    padding: 0.2rem 1.4rem;
}

.fg-gem-body::before {
    content: "“";
    position: absolute;
    left: 0;
    top: -0.25rem;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--fg-gold-500, #b8923f);
    opacity: 0.65;
    font-family: Georgia, serif;
}

.fg-gem-body::after {
    content: "”";
    position: absolute;
    right: 0;
    bottom: -0.65rem;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--fg-gold-500, #b8923f);
    opacity: 0.65;
    font-family: Georgia, serif;
}