.family-hub,
.family-hub-login {
    --fh-ink: #233238;
    --fh-muted: #617176;
    --fh-line: #d9e1df;
    --fh-paper: #ffffff;
    --fh-page: #f3f7f5;
    --fh-teal: #176f68;
    --fh-green: #2c7c58;
    --fh-blue: #426d9b;
    --fh-coral: #be5947;
    --fh-yellow: #8a681e;
    color: var(--fh-ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

.family-hub *,
.family-hub-login * {
    box-sizing: border-box;
}

.family-hub {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 24px;
}

.fh-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 6px 2px 24px;
    border-bottom: 1px solid var(--fh-line);
}

.fh-header h1,
.fh-calendar-toolbar h2,
.fh-panel h2 {
    margin: 0;
    color: var(--fh-ink);
    letter-spacing: 0;
}

.fh-header h1 {
    font-size: 30px;
    line-height: 1.12;
}

.fh-kicker {
    margin: 0 0 6px;
    color: var(--fh-teal);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
}

.fh-subtitle,
.fh-calendar-toolbar p,
.fh-panel-copy {
    margin: 7px 0 0;
    color: var(--fh-muted);
    font-size: 14px;
}

.fh-header-date {
    display: grid;
    gap: 3px;
    min-width: 180px;
    text-align: right;
}

.fh-header-date span {
    color: var(--fh-muted);
    font-size: 12px;
}

.fh-header-date strong {
    font-size: 15px;
    font-weight: 650;
    text-transform: capitalize;
}

.fh-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, .9fr);
    align-items: start;
    gap: 20px;
    padding-top: 20px;
}

.fh-main-panel,
.fh-panel {
    border: 1px solid var(--fh-line);
    border-radius: 8px;
    background: var(--fh-paper);
}

.fh-main-panel {
    min-width: 0;
    padding: 20px;
}

.fh-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.fh-calendar-toolbar h2,
.fh-panel h2 {
    font-size: 19px;
    line-height: 1.2;
}

.fh-calendar-controls {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.fh-calendar-controls input[type="date"],
.fh-field input,
.fh-field select {
    min-height: 40px;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid #c8d3d0;
    border-radius: 5px;
    background: #fff;
    color: var(--fh-ink);
    font: inherit;
}

.fh-icon-button,
.fh-text-button,
.fh-primary-button,
.fh-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 5px;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.fh-icon-button {
    width: 40px;
    padding: 0;
    border-color: var(--fh-line);
    background: #fff;
    color: var(--fh-ink);
    font-size: 18px;
}

.fh-text-button {
    padding: 0 10px;
    background: #e8f2ef;
    color: var(--fh-teal);
}

.fh-primary-button,
.fh-secondary-button {
    width: 100%;
    margin-top: 12px;
    padding: 9px 14px;
}

.fh-primary-button {
    background: var(--fh-teal);
    color: #fff;
}

.fh-secondary-button {
    border-color: #b8d5ce;
    background: #edf6f3;
    color: #14594f;
}

.fh-icon-button:hover,
.fh-text-button:hover,
.fh-primary-button:hover,
.fh-secondary-button:hover {
    transform: translateY(-1px);
}

.fh-icon-button:hover { background: #edf3f1; }
.fh-text-button:hover { background: #dcebe6; }
.fh-primary-button:hover { background: #125e58; }
.fh-secondary-button:hover { background: #dcefe9; }

.family-hub button:disabled {
    opacity: .48;
    cursor: not-allowed;
    transform: none;
}

.family-hub button:focus-visible,
.family-hub input:focus-visible,
.family-hub select:focus-visible,
.family-hub summary:focus-visible {
    outline: 3px solid #8ab8d2;
    outline-offset: 2px;
}

.fh-member-filters {
    display: flex;
    gap: 8px 16px;
    flex-wrap: wrap;
    padding: 12px 0 16px;
    border-top: 1px solid #edf1ef;
}

.fh-member-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #394a4f;
    font-size: 13px;
    cursor: pointer;
}

.fh-member-filter input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--fh-teal);
}

.fh-member-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--fh-teal);
}

.fh-dot-1 { --fh-person-color: var(--fh-blue); }
.fh-dot-2 { --fh-person-color: var(--fh-coral); }
.fh-dot-3 { --fh-person-color: var(--fh-green); }
.fh-dot-4 { --fh-person-color: var(--fh-yellow); }
.fh-dot-0 { --fh-person-color: var(--fh-teal); }
.fh-member-filter .fh-dot-0 { background: var(--fh-teal); }
.fh-member-filter .fh-dot-1 { background: var(--fh-blue); }
.fh-member-filter .fh-dot-2 { background: var(--fh-coral); }
.fh-member-filter .fh-dot-3 { background: var(--fh-green); }
.fh-member-filter .fh-dot-4 { background: var(--fh-yellow); }

.fh-month-title {
    padding: 0 0 10px;
    font-size: 16px;
    text-transform: capitalize;
}

.fh-weekdays,
.fh-period-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.fh-weekdays {
    border: 1px solid var(--fh-line);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    background: #f5f8f7;
}

.fh-weekdays span {
    padding: 8px 5px;
    color: var(--fh-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.fh-period-grid {
    overflow: hidden;
    border: 1px solid var(--fh-line);
    border-radius: 0 0 5px 5px;
}

.fh-day {
    min-width: 0;
    min-height: 112px;
    padding: 7px;
    border-right: 1px solid #e4eae8;
    border-bottom: 1px solid #e4eae8;
    background: #fff;
}

.fh-day:nth-child(7n) { border-right: 0; }
.fh-day-empty { background: #f8faf9; }
.fh-day-today { background: #f0f7f5; box-shadow: inset 0 0 0 2px #6ca99d; }

.fh-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-bottom: 5px;
    border-radius: 50%;
    color: #3b4c50;
    font-size: 12px;
    font-weight: 700;
}

.fh-day-number {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.fh-day-today .fh-day-number { background: var(--fh-teal); color: #fff; }
.fh-day-shifts { display: grid; align-content: start; gap: 4px; }

.fh-all-day-grid,
.fh-hour-grid {
    display: grid;
    grid-template-columns: 58px repeat(var(--fh-day-count), minmax(120px, 1fr));
}

.fh-all-day-grid {
    min-width: calc(58px + var(--fh-day-count) * 120px);
    border: 1px solid var(--fh-line);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    background: #f7faf9;
}

.fh-all-day-axis,
.fh-all-day-column { min-height: 56px; padding: 7px; border-right: 1px solid #e4eae8; border-bottom: 1px solid #e4eae8; }
.fh-all-day-axis { align-self: center; color: var(--fh-muted); font-size: 10px; text-align: center; }
.fh-all-day-column { display: grid; align-content: start; gap: 4px; min-width: 0; }
.fh-all-day-column > button { padding: 0 0 5px; border: 0; background: transparent; color: var(--fh-ink); font-size: 12px; font-weight: 750; text-align: left; text-transform: capitalize; cursor: pointer; }
.fh-all-day-empty { color: #9aa8a5; font-size: 12px; }
.fh-timeline-scroll { overflow-x: auto; border: 1px solid var(--fh-line); border-radius: 5px; overscroll-behavior-x: contain; }
.fh-hours-scroll { max-height: 680px; overflow-x: hidden; overflow-y: auto; border-top: 1px solid var(--fh-line); border-radius: 0 0 5px 5px; overscroll-behavior: contain; }
.fh-hour-grid { position: relative; min-width: calc(58px + var(--fh-day-count) * 120px); }
.fh-time-axis,
.fh-hour-column { position: relative; height: 1440px; }
.fh-time-axis { background: #fafcfb; }
.fh-hour-label { position: absolute; right: 7px; z-index: 1; color: var(--fh-muted); font-size: 10px; line-height: 1; transform: translateY(-50%); }
.fh-hour-column { border-left: 1px solid #e4eae8; background: repeating-linear-gradient(to bottom, #e4eae8 0, #e4eae8 1px, transparent 1px, transparent 60px), #fff; }
.fh-time-slot { position: absolute; left: 0; z-index: 0; width: 100%; height: 60px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.fh-time-slot:hover { background: rgb(23 111 104 / 7%); }
.fh-timed-event { position: absolute; z-index: 2; display: flex; flex-direction: column; overflow: hidden; padding: 4px 19px 4px 6px; border-left: 3px solid var(--fh-person-color, var(--fh-teal)); border-radius: 4px; background: color-mix(in srgb, var(--fh-person-color, #176f68) 14%, white); color: #233238; font-size: 11px; line-height: 1.2; }
.fh-timed-event strong { flex: 0 0 auto; font-size: 10px; }
.fh-timed-event span { overflow: hidden; font-weight: 650; text-overflow: ellipsis; }
.fh-timed-event > button { position: absolute; top: 2px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 3px; background: #ffffffc9; color: var(--fh-ink); line-height: 1; cursor: pointer; }
.fh-timed-event > .fh-timed-delete { right: 2px; }
.fh-timed-event > .fh-timed-edit { right: 22px; }
.fh-timed-event > .fh-note-button { right: 42px; }
.fh-entry .fh-note-button { flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid #a9b5a5; border-radius: 50%; background: #fff; color: #395c43; font-size: 12px; font-weight: 800; }
.fh-timed-event { padding-right: 64px; }

.fh-shift {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 3px 5px;
    border-left: 3px solid var(--fh-person-color, var(--fh-teal));
    border-radius: 3px;
    background: #edf5f3;
    color: #27423e;
    font-size: 10px;
    line-height: 1.2;
}

.fh-shift-person { color: var(--fh-person-color, var(--fh-teal)); font-size: 9px; font-weight: 800; }
.fh-shift-afternoon { background: #eef3f9; color: #304b6c; }
.fh-shift-night { background: #e9edf4; color: #394c68; }
.fh-shift-post_night { background: #fbf1e5; color: #745323; }
.fh-shift-rest { background: #edf4ea; color: #46613d; }
.fh-shift-leave { background: #faece8; color: #7f3c32; }
.fh-no-shift { color: #788689; font-size: 10px; }

.fh-calendar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.fh-calendar-footer > span { color: var(--fh-muted); font-size: 12px; }
.fh-calendar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.fh-calendar-actions .fh-secondary-button { width: auto; margin: 0; }
.fh-calendar-actions small { flex-basis: 100%; color: var(--fh-muted); font-size: 11px; text-align: right; }

.fh-side-panel { display: grid; gap: 14px; }
.fh-panel { padding: 17px; }

.fh-shopping-panel { margin-top: 14px; }
.fh-shopping-count { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 5px 11px; border: 1px solid #cfd8c3; border-radius: 20px; background: #edf1e5; color: #405742; }
.fh-shopping-count strong { font-size: 16px; line-height: 1; }
.fh-shopping-count small { color: inherit; font-size: 11px; font-weight: 650; white-space: nowrap; }
.fh-shopping-form { display: grid; grid-template-columns: minmax(145px, 1.15fr) minmax(105px, .72fr) minmax(140px, 1fr) auto; align-items: end; gap: 9px; margin-top: 17px; padding: 14px; border: 1px solid var(--fh-line); border-radius: 6px; background: #f7f8f1; }
.fh-shopping-form .fh-field { min-width: 0; margin: 0; }
.fh-shopping-form .fh-field input { width: 100%; min-width: 0; }
.fh-shopping-form .fh-primary-button { grid-column: auto; width: auto; min-height: 40px; margin: 0; padding: 8px 13px; gap: 7px; white-space: nowrap; }
.fh-shopping-submit > span:first-child { font-size: 19px; font-weight: 400; line-height: 1; }
.fh-shopping-form > small { grid-column: 1 / -1; }
.fh-shopping-items { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.fh-shopping-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 62px; padding: 9px 8px; border-top: 1px solid #e6e7da; transition: background-color .15s ease; }
.fh-shopping-item:last-child { border-bottom: 1px solid #e6e7da; }
.fh-shopping-item:hover { background: #ffffff80; }
.fh-shopping-item > .fh-shopping-check { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.fh-shopping-item input { width: 19px; height: 19px; flex: 0 0 19px; accent-color: var(--fh-green); }
.fh-shopping-copy { display: grid; gap: 3px; min-width: 0; }
.fh-shopping-name { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.fh-shopping-item strong { color: var(--fh-ink); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.fh-shopping-quantity { padding: 2px 7px; border-radius: 10px; background: #edf0e5; color: #53634a; font-size: 10px; font-weight: 650; line-height: 1.4; }
.fh-shopping-copy > small { color: var(--fh-muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.fh-shopping-item.is-purchased .fh-shopping-copy { opacity: .58; }
.fh-shopping-item.is-purchased strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.fh-shopping-item-actions { display: flex; align-items: center; gap: 3px; }
.fh-shopping-item-actions .fh-icon-button { width: 36px; min-height: 36px; flex: 0 0 36px; }
.fh-shopping-heading-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.fh-clear-shopping { min-height: 36px; padding: 5px 10px; border-color: #dcc9c0; color: #814b40; font-size: 11px; }
.fh-clear-shopping:disabled { opacity: .55; cursor: not-allowed; }
.fh-shopping-drag-handle { width: 44px; min-height: 44px; flex: 0 0 44px; border-color: #e3e7d9; border-radius: 5px; background: #f7f8f1; color: #52674d !important; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.fh-shopping-drag-handle:hover { background: #e9ede2; }
.fh-shopping-drag-handle:active { cursor: grabbing; }
.fh-shopping-drag-handle > span { display: block; font-size: 18px; line-height: 1; }
.fh-shopping-delete { border-color: transparent; background: transparent; }
.fh-shopping-delete:hover { border-color: #ead2c9; background: #fbefeb; }
.fh-shopping-item.is-dragging { position: relative; z-index: 2; border: 1px dashed #658169; border-radius: 4px; background: #f4f7ed; box-shadow: 0 5px 14px #19281c24; opacity: .88; }
.fh-shopping-empty { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 9px; border-block: 1px solid #e6e7da; color: var(--fh-ink); }
.fh-shopping-empty > span:last-child { display: grid; gap: 2px; }
.fh-shopping-empty strong { font-size: 13px; }
.fh-shopping-empty-mark { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 50%; background: #eaf0e4; color: #4f6a4d; font-size: 15px; font-weight: 700; }
.fh-shopping-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.fh-shopping-share > span { margin-right: auto; color: var(--fh-muted); font-size: 11px; font-weight: 650; }
.fh-shopping-share .fh-secondary-button { width: auto; min-height: 36px; margin: 0; padding: 6px 12px; font-size: 12px; }

.fh-recurrence { margin: 4px 0 12px; border-top: 1px solid var(--fh-line); border-bottom: 1px solid var(--fh-line); }
.fh-recurrence summary { padding: 10px 0; color: var(--fh-teal); font-size: 13px; font-weight: 700; cursor: pointer; }
.fh-recurrence-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; padding-bottom: 5px; }
.fh-weekday-fields { display: flex; grid-column: 1 / -1; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; flex-wrap: wrap; }
.fh-weekday-fields legend { margin-bottom: 6px; color: #35474b; font-size: 12px; font-weight: 650; }
.fh-weekday-fields label { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid var(--fh-line); border-radius: 4px; color: var(--fh-ink); font-size: 11px; cursor: pointer; }
.fh-weekday-fields[hidden] { display: none; }
.fh-weekday-fields input { accent-color: var(--fh-teal); }
.fh-recurrence-fields input[type="number"] { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #c8d3d0; border-radius: 5px; background: #fff; color: var(--fh-ink); font: inherit; }
.fh-shift-times { margin: 10px 0 12px; padding-top: 8px; border-top: 1px solid #e6ecea; }
.fh-shift-times summary { color: var(--fh-teal); font-size: 13px; font-weight: 700; cursor: pointer; }
.fh-shift-times > p { margin: 7px 0 10px; color: var(--fh-muted); font-size: 11px; }
.fh-shift-time-grid { display: grid; gap: 8px; }
.fh-shift-time-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(72px, .7fr)); align-items: end; gap: 8px; }
.fh-shift-time-row > strong { padding-bottom: 10px; color: var(--fh-ink); font-size: 11px; }
.fh-shift-time-row label { display: grid; gap: 4px; color: var(--fh-muted); font-size: 10px; }
.fh-shift-time-row input { width: 100%; min-height: 36px; padding: 5px; border: 1px solid #c8d3d0; border-radius: 5px; background: #fff; color: var(--fh-ink); font: inherit; }

.fh-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fh-daily-menu { margin: 14px 0 18px; background: #f7f5e8; }
.fh-daily-menu .fh-panel-heading h2 { margin: 0; }
.fh-daily-menu-date { margin: 3px 0 0; color: var(--fh-muted); font-size: 12px; }
.fh-menu-heading-actions { display: flex; align-items: center; gap: 10px; }
.fh-menu-date { display: grid; gap: 4px; color: var(--fh-muted); font-size: 11px; font-weight: 700; }
.fh-menu-date input { min-height: 38px; padding: 6px 9px; border: 1px solid var(--fh-line); border-radius: 4px; background: #fff; color: var(--fh-ink); font: inherit; }
.fh-daily-menu-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fh-menu-meal { min-width: 0; padding: 13px; border: 1px solid #dedac4; border-radius: 5px; background: #fffefa; box-shadow: 0 2px 6px #2634210a; }
.fh-meal-lunch { border-top: 3px solid #63805b; }
.fh-meal-dinner { border-top: 3px solid #c47b4d; }
.fh-meal-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.fh-meal-heading h3 { margin: 0; color: #344a36; font: 700 18px/1.2 "FH Hand", cursive; }
.fh-meal-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #e7efe3; color: #476447; font-size: 10px; font-weight: 800; }
.fh-meal-dinner .fh-meal-icon { background: #f8e9dc; color: #975f3d; }
.fh-daily-menu-fields .fh-field { margin: 0; }
.fh-daily-menu-fields .fh-field textarea { width: 100%; min-height: 72px; padding: 10px; border: 1px solid #d9ddcd; border-radius: 4px; background: #fff; color: var(--fh-ink); font: inherit; line-height: 1.5; resize: vertical; }
.fh-menu-meal-content { min-height: 54px; margin: 0; color: #34463b; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.fh-menu-meal-content > span { color: #858979; font-style: italic; }
.fh-daily-menu-fields .fh-primary-button { grid-column: 1 / -1; justify-self: start; width: auto; min-width: 180px; }
.fh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fh-event-note-dialog { width: min(480px, calc(100% - 28px)); padding: 24px; border: 1px solid var(--fh-line); border-radius: 6px; background: #fffef7; color: var(--fh-ink); box-shadow: 0 18px 60px #17252144; }
.fh-event-note-dialog::backdrop { background: #17252177; }
.fh-event-note-dialog form { display: flex; justify-content: flex-end; margin: -12px -12px 8px 0; }
.fh-event-note-dialog h2 { margin: 0 0 8px; font-size: 20px; }
.fh-event-note-dialog [data-note-body] { margin: 0; color: #3c4d46; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.fh-week-agenda { display: none; }
.fh-week-agenda-day { padding: 12px 0; border-bottom: 1px solid var(--fh-line); }
.fh-week-agenda-day > button { margin: 0 0 8px; padding: 0; border: 0; background: transparent; color: var(--fh-ink); font-size: 15px; font-weight: 750; text-align: left; text-transform: capitalize; }
.fh-week-agenda-entry { margin: 0 0 6px; padding-left: 8px; border-left: 3px solid var(--fh-person-color, var(--fh-teal)); }
.fh-week-agenda-entry .fh-entry { border-left: 0; }
.fh-week-note { margin: 0 0 4px 5px; color: #4b5b54; font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.fh-week-agenda-empty { margin: 0; color: var(--fh-muted); font-size: 12px; }
.fh-day-timeline { display: none; }
.fh-day-agenda { display: grid; gap: 7px; margin: 12px 0 4px; }
.fh-day-agenda-entry { display: grid; grid-template-columns: minmax(82px, 110px) minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid #e1e5da; border-left: 4px solid var(--fh-person-color, var(--fh-teal)); border-radius: 5px; background: #fff; }
.fh-day-agenda-entry > time { padding-top: 3px; color: #3d5844; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.fh-day-agenda-details { min-width: 0; }
.fh-day-agenda-details .fh-entry { min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--fh-ink); }
.fh-day-agenda-details .fh-entry.fh-entry-shift { background: transparent; color: var(--fh-ink); }
.fh-day-agenda-details .fh-entry > span { white-space: normal; overflow-wrap: anywhere; }
.fh-day-note { margin: 5px 0 0; color: #526057; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.fh-day-note strong { margin-right: 4px; color: #354a39; }
.fh-day-agenda-empty { margin: 0; padding: 18px 12px; border: 1px dashed #cdd5ca; border-radius: 5px; color: var(--fh-muted); text-align: center; }
.fh-day-add { justify-self: start; width: auto; margin-top: 5px; }

.fh-cycle-mark {
    display: grid;
    place-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e8f2ef;
    color: var(--fh-teal);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.fh-cycle-mark small { font-size: 8px; font-weight: 650; }
.fh-panel-copy { margin-bottom: 14px; }

.fh-field {
    display: grid;
    gap: 5px;
    margin: 0 0 12px;
    color: #35474b;
    font-size: 13px;
    font-weight: 650;
}

.fh-field small,
.fh-pattern-details > small,
.fh-saved-note,
.fh-first-setup {
    color: var(--fh-muted);
    font-size: 11px;
    font-weight: 400;
}

.fh-field input,
.fh-field select { width: 100%; }
.fh-pattern-details { margin: 4px 0 12px; }
.fh-pattern-details summary { margin-bottom: 10px; color: var(--fh-teal); font-size: 13px; font-weight: 700; cursor: pointer; }
.fh-pattern-grid { display: grid; gap: 0 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fh-saved-note { margin: 10px 0 0; }
.fh-first-setup { margin: 10px 0 0; color: #80582b; }
.fh-exceptions form { margin-top: 14px; }
.fh-exception-list { margin-top: 18px; border-top: 1px solid #e6ecea; }
.fh-exception-list h3 { margin: 12px 0 6px; font-size: 13px; }

.fh-exception-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1ef;
}

.fh-exception-row > span { display: grid; gap: 2px; }
.fh-exception-row strong { font-size: 12px; }
.fh-exception-row small { color: var(--fh-muted); font-size: 11px; }
.fh-remove-exception { width: 32px; min-height: 32px; flex: 0 0 32px; color: var(--fh-coral); font-size: 18px; }

.fh-loading,
.fh-error,
.fh-empty,
.family-hub-login {
    padding: 24px;
    border: 1px solid var(--fh-line);
    border-radius: 8px;
    background: var(--fh-paper);
}

.fh-error { border-color: #d59c92; color: #713c33; }
.fh-toast { position: fixed; right: 20px; bottom: 20px; z-index: 1000; max-width: min(420px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid #b8d5ce; border-radius: 6px; background: #edf6f3; color: #14594f; box-shadow: 0 6px 22px #1a30231f; }
.family-hub-login { max-width: 600px; margin: 24px auto; }
.family-hub-login h2 { margin-top: 0; }
.family-hub-login a { color: var(--fh-teal); font-weight: 700; }
.family-hub-login #fh-login-form { display: grid; gap: 12px; max-width: 420px; margin: 18px 0 12px; }
.family-hub-login #fh-login-form p { display: grid; gap: 5px; margin: 0; color: #35474b; font-size: 13px; font-weight: 650; }
.family-hub-login #fh-login-form input[type="text"],
.family-hub-login #fh-login-form input[type="password"] { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #c8d3d0; border-radius: 5px; background: #fff; color: var(--fh-ink); font: inherit; }
.family-hub-login #fh-login-form input[type="submit"] { min-height: 42px; padding: 8px 12px; border: 0; border-radius: 5px; background: var(--fh-teal); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.family-hub-login #fh-login-form .login-remember { display: flex; align-items: center; gap: 8px; }

@media (max-width: 1020px) {
    .fh-layout { grid-template-columns: minmax(0, 1fr); }
    .fh-side-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 700px) {
    .family-hub { padding: 12px; }
    .fh-header { align-items: flex-start; padding-bottom: 16px; }
    .fh-header h1 { font-size: 25px; }
    .fh-header-date { min-width: auto; }
    .fh-header-date strong { max-width: 130px; font-size: 12px; }
    .fh-layout { gap: 12px; padding-top: 12px; }
    .fh-main-panel { padding: 13px; }
    .fh-calendar-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }
    .fh-calendar-controls { width: 100%; }
    .fh-calendar-controls input[type="date"] { flex: 1; }
    .fh-member-filters { gap: 10px 14px; }
    .fh-weekdays { display: none; }
    .fh-period-grid { display: flex; flex-direction: column; border: 0; gap: 6px; }
    .fh-day-empty { display: none; }
    .fh-view-week .fh-day,
    .fh-view-day .fh-day { min-height: 68px; }
    .fh-day,
    .fh-day:nth-child(7n) {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
        gap: 6px;
        min-height: 52px;
        padding: 7px 4px;
        border: 0;
        border-bottom: 1px solid #e4eae8;
        border-radius: 0;
    }
    .fh-day-number { margin: 1px 0 0; }
    .fh-day-shifts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fh-shift { min-height: 28px; grid-template-columns: 20px minmax(0, 1fr); font-size: 11px; }
    .fh-calendar-footer { align-items: flex-start; flex-direction: column; }
    .fh-calendar-actions { justify-content: flex-start; }
    .fh-calendar-actions small { text-align: left; }
    .fh-shopping-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .fh-shopping-form .fh-shopping-product-field,
    .fh-shopping-form .fh-shopping-submit,
    .fh-shopping-form > small { grid-column: 1 / -1; }
    .fh-shopping-share .fh-secondary-button { flex: 1 1 auto; }
    .fh-recurrence-fields { grid-template-columns: 1fr 1fr; }
    .fh-recurrence-fields .fh-field:nth-child(3) { grid-column: 1 / -1; }
    .fh-all-day-grid { min-width: calc(48px + var(--fh-day-count) * 108px); grid-template-columns: 48px repeat(var(--fh-day-count), minmax(108px, 1fr)); }
    .fh-hour-grid { grid-template-columns: 48px repeat(var(--fh-day-count), minmax(108px, 1fr)); }
    .fh-hour-grid { min-width: calc(48px + var(--fh-day-count) * 108px); }
    .fh-side-panel { grid-template-columns: minmax(0, 1fr); }
}

.fh-main-column { display: grid; align-content: start; gap: 14px; min-width: 0; }
.fh-view-switch { display: inline-flex; padding: 3px; border: 1px solid var(--fh-line); border-radius: 6px; background: #f4f7f6; }
.fh-view-switch button { min-height: 34px; padding: 5px 10px; border: 0; border-radius: 4px; background: transparent; color: #45565a; font: inherit; font-size: 13px; cursor: pointer; }
.fh-view-switch button[aria-pressed="true"] { background: #176f68; color: #fff; }
.fh-calendar-controls { margin: -8px 0 10px; }
.fh-period-heading { margin: 0 0 8px; font-size: 15px; text-transform: capitalize; }
.fh-period-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fh-view-day { grid-template-columns: minmax(0, 1fr); }
.fh-view-day .fh-day { min-height: 260px; }
.fh-view-week .fh-day { min-height: 180px; }
.fh-day-shifts { min-height: 0; }
.fh-entry { display: flex; align-items: center; justify-content: space-between; gap: 3px; min-width: 0; padding: 3px 5px; border-left: 3px solid var(--fh-person-color, var(--fh-teal)); border-radius: 3px; background: #edf5f3; color: #27423e; font-size: 10px; line-height: 1.25; }
.fh-entry > span { min-width: 0; overflow-wrap: anywhere; }
.fh-entry button { flex: 0 0 20px; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: #526267; font: inherit; font-size: 15px; cursor: pointer; }
.fh-entry-shift { background: #edf5f3; }
.fh-entry .fh-dot-0, .fh-dot-0 { --fh-person-color: var(--fh-teal); }
.fh-entry .fh-dot-1, .fh-dot-1 { --fh-person-color: var(--fh-blue); }
.fh-entry .fh-dot-2, .fh-dot-2 { --fh-person-color: var(--fh-coral); }
.fh-entry .fh-dot-3, .fh-dot-3 { --fh-person-color: var(--fh-green); }
.fh-entry .fh-dot-4, .fh-dot-4 { --fh-person-color: var(--fh-yellow); }
.fh-dot-0 { border-color: var(--fh-teal); }
.fh-dot-1 { border-color: var(--fh-blue); }
.fh-dot-2 { border-color: var(--fh-coral); }
.fh-dot-3 { border-color: var(--fh-green); }
.fh-dot-4 { border-color: var(--fh-yellow); }
.fh-more { color: var(--fh-muted); font-size: 10px; }
.fh-focus-day .fh-day-shifts { gap: 7px; }
.fh-focus-day .fh-entry { min-height: 34px; padding: 6px 9px; font-size: 13px; }
.fh-event-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.fh-event-form .fh-field:nth-child(3),
.fh-event-form .fh-field:nth-child(8),
.fh-event-form .fh-recurrence,
.fh-event-form .fh-primary-button { grid-column: 1 / -1; }
.fh-event-form input[type="text"],
.fh-event-form input[type="date"],
.fh-event-form input[type="time"],
.fh-event-form select,
.fh-communication-panel input,
.fh-communication-panel select,
.fh-communication-panel textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #c8d3d0; border-radius: 5px; background: #fff; color: var(--fh-ink); font: inherit; }
.fh-event-form .fh-all-day { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.fh-event-form .fh-all-day input { width: 18px; height: 18px; accent-color: var(--fh-teal); }
.fh-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fh-time-fields[hidden] { display: none; }
.fh-message-list { display: grid; gap: 8px; margin-top: 20px; }
.fh-message-list > h3 { margin: 0 0 3px; font-size: 15px; }
.fh-message { padding: 11px; border: 1px solid var(--fh-line); border-left: 3px solid var(--fh-blue); border-radius: 5px; background: #fff; }
.fh-message-shopping { border-left-color: var(--fh-green); }
.fh-message-issue { border-left-color: var(--fh-coral); }
.fh-message-meta, .fh-message-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fh-muted); font-size: 11px; }
.fh-message h3 { margin: 7px 0 3px; font-size: 14px; }
.fh-message p { margin: 0 0 8px; color: #425258; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fh-message-bottom .fh-text-button { min-height: 30px; }
.fh-status { font-weight: 700; }
.fh-status-open { color: #8c4d24; }
.fh-status-resolved { color: #2c7c58; }
.fh-empty-inline { margin: 0; color: var(--fh-muted); font-size: 13px; }
@media (max-width: 700px) {
    .fh-period-grid { display: flex; flex-direction: column; border: 0; gap: 6px; }
    .fh-calendar-toolbar { align-items: flex-start; }
    .fh-view-switch { width: 100%; }
    .fh-view-switch button { flex: 1; }
    .fh-calendar-controls { margin: 0 0 8px; }
    .fh-event-form { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .fh-event-form .fh-field:nth-child(3), .fh-event-form .fh-field:nth-child(8), .fh-event-form .fh-recurrence, .fh-event-form .fh-primary-button { grid-column: auto; }
    .fh-view-month .fh-day { min-height: 55px; }
    .fh-week-timeline { display: none; }
    .fh-week-agenda { display: block; }
    .fh-daily-menu-fields { grid-template-columns: minmax(0, 1fr); }
    .fh-daily-menu-fields .fh-primary-button { grid-column: 1; width: 100%; }
    .fh-daily-menu .fh-panel-heading { align-items: flex-start; }
    .fh-menu-date input { max-width: 160px; }
    .fh-menu-meal { padding: 12px; }
    .fh-day-agenda-entry { grid-template-columns: minmax(70px, 82px) minmax(0, 1fr); gap: 7px; padding: 10px 8px; }
    .fh-day-agenda-entry > time { font-size: 12px; }
    .fh-day-add { justify-self: stretch; width: 100%; }
    .fh-shopping-item { gap: 5px; }
    .fh-shopping-item > label { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .fh-icon-button,
    .fh-text-button,
    .fh-primary-button,
    .fh-secondary-button { transition: none; }
}