/* Modern Calendar 1.0.0 | poetryartonline:modern-calendar | theme-independent runtime asset */
#smfmc-calendar.smfmc-root {
    --smfmc-accent: #1f65a8;
    --smfmc-accent-text: #ffffff;
    --smfmc-surface: #ffffff;
    --smfmc-text: #172033;
    --smfmc-muted: #667085;
    --smfmc-panel: #f7f9fc;
    --smfmc-panel-2: #eef4fb;
    --smfmc-border: rgba(17, 32, 51, 0.12);
    --smfmc-shadow: 0 10px 30px rgba(28, 51, 84, 0.08);
    --smfmc-event: #1683c4;
    --smfmc-birthday: #8b5cf6;
    --smfmc-holiday: #f59e0b;
    --smfmc-success: #21a366;
    color: var(--smfmc-text);
    font: inherit;
    line-height: 1.45;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    isolation: isolate;
    container: smfmc / inline-size;
    overflow-wrap: anywhere;
}

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

#smfmc-calendar .smfmc-skip-link,
#smfmc-event-editor .smfmc-skip-link {
    position: absolute;
    z-index: 1000;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    padding: 8px 12px;
    color: var(--smfmc-accent-text, #fff);
    background: var(--smfmc-accent, #1f65a8);
    border-radius: 7px;
    text-decoration: none;
    transform: translateY(-160%);
}

#smfmc-calendar .smfmc-skip-link:focus,
#smfmc-event-editor .smfmc-skip-link:focus {
    transform: translateY(0);
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

#smfmc-calendar .smfmc-main:focus-visible {
    outline: 2px solid var(--smfmc-accent);
    outline-offset: 4px;
}

#smfmc-calendar .smfmc-month-row {
    display: contents;
}

#smfmc-calendar .smfmc-mini-row {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    min-width: 0;
}

#smfmc-calendar.smfmc-is-dark {
    --smfmc-muted: rgba(255, 255, 255, 0.68);
    --smfmc-panel: rgba(255, 255, 255, 0.045);
    --smfmc-panel-2: rgba(255, 255, 255, 0.075);
    --smfmc-border: rgba(255, 255, 255, 0.12);
    --smfmc-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Theme containment: only Modern Calendar-owned nodes receive structural resets.
   Month, Week and Agenda are now all rendered with modification-owned markup. */
#smfmc-calendar.smfmc-root,
#smfmc-calendar [class^="smfmc-"],
#smfmc-calendar [class*=" smfmc-"] {
    box-sizing: border-box;
}

#smfmc-calendar [class^="smfmc-"]::before,
#smfmc-calendar [class^="smfmc-"]::after,
#smfmc-calendar [class*=" smfmc-"]::before,
#smfmc-calendar [class*=" smfmc-"]::after {
    box-sizing: border-box;
}

#smfmc-calendar .smfmc-post-event,
#smfmc-calendar .smfmc-icon-button,
#smfmc-calendar .smfmc-today-button,
#smfmc-calendar .smfmc-view-tab,
#smfmc-calendar .smfmc-mini-day,
#smfmc-calendar .smfmc-day-number,
#smfmc-calendar .smfmc-day-add,
#smfmc-calendar .smfmc-day-week,
#smfmc-calendar .smfmc-mini-week-jump,
#smfmc-calendar .smfmc-item,
#smfmc-calendar .smfmc-item-action,
#smfmc-calendar .smfmc-upcoming-item,
#smfmc-calendar .smfmc-action-link,
#smfmc-calendar .smfmc-agenda-title,
#smfmc-calendar .smfmc-agenda-actions a {
    color: inherit;
    text-decoration: none;
}

#smfmc-calendar .smfmc-icon {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

/* These probes are siblings of the modern root, not children of it. That lets
   JavaScript sample the active theme before any Modern Calendar CSS applies. */
#smfmc-theme-probes {
    position: fixed !important;
    inset: auto auto 0 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    contain: strict !important;
}

#smfmc-theme-probes > * {
    display: block !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#smfmc-calendar .smfmc-card {
    background: var(--smfmc-surface);
    border: 1px solid var(--smfmc-border);
    border-radius: 12px;
    box-shadow: var(--smfmc-shadow);
}

#smfmc-calendar .smfmc-page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    margin: 0 0 14px;
    overflow: hidden;
}

#smfmc-calendar .smfmc-page-header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--smfmc-accent);
    pointer-events: none;
}

#smfmc-calendar .smfmc-page-title {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 250px;
    flex: 1 1 auto;
}

#smfmc-calendar .smfmc-page-copy {
    min-width: 0;
}

#smfmc-calendar .smfmc-title-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 11px;
    color: var(--smfmc-accent-text);
    background: var(--smfmc-accent);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--smfmc-accent) 22%, transparent);
}

#smfmc-calendar .smfmc-title-icon svg {
    width: 22px;
    height: 22px;
}

#smfmc-calendar .smfmc-page-title h1 {
    margin: 0 0 3px;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

#smfmc-calendar .smfmc-page-title p {
    margin: 0;
    color: var(--smfmc-muted);
    font-size: 0.88rem;
    line-height: 1.4;
}

#smfmc-calendar .smfmc-summary {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

#smfmc-calendar .smfmc-summary-card,
#smfmc-calendar .smfmc-post-event {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 9px 12px;
    border: 1px solid var(--smfmc-border);
    border-radius: 9px;
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-summary-card {
    min-width: 128px;
}

#smfmc-calendar .smfmc-summary-card > svg {
    color: var(--smfmc-accent);
    width: 20px;
    height: 20px;
}

#smfmc-calendar .smfmc-summary-card span,
#smfmc-calendar .smfmc-post-event span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#smfmc-calendar .smfmc-summary-card strong,
#smfmc-calendar .smfmc-post-event strong {
    font-size: 0.96rem;
    line-height: 1.1;
}

#smfmc-calendar .smfmc-summary-card small,
#smfmc-calendar .smfmc-post-event small {
    color: var(--smfmc-muted);
    font-size: 0.7rem;
    line-height: 1.2;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-next-event {
    width: clamp(165px, 16vw, 220px);
}

#smfmc-calendar .smfmc-next-event small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

#smfmc-calendar .smfmc-post-event {
    min-width: 164px;
    color: var(--smfmc-accent-text);
    background: var(--smfmc-accent);
    border-color: transparent;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

#smfmc-calendar .smfmc-post-event:hover,
#smfmc-calendar .smfmc-post-event:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--smfmc-accent) 20%, transparent);
}

#smfmc-calendar .smfmc-post-event small {
    color: currentColor;
    opacity: 0.8;
}

#smfmc-calendar .smfmc-layout {
    display: grid;
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(245px, 285px);
    gap: 14px;
    align-items: start;
}

#smfmc-calendar .smfmc-left,
#smfmc-calendar .smfmc-right,
#smfmc-calendar .smfmc-main {
    min-width: 0;
}

#smfmc-calendar .smfmc-left-inner,
#smfmc-calendar .smfmc-right {
    display: grid;
    gap: 14px;
}

#smfmc-calendar .smfmc-mobile-fold > summary {
    display: none;
}

#smfmc-calendar .smfmc-section-title,
#smfmc-calendar .smfmc-section-heading h2 {
    margin: 0;
    padding: 13px 14px 10px;
    font-size: 0.9rem;
    font-weight: 700;
}

#smfmc-calendar .smfmc-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

#smfmc-calendar .smfmc-mini-stack {
    padding-bottom: 8px;
}

#smfmc-calendar .smfmc-mini-month {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--smfmc-border);
}

#smfmc-calendar .smfmc-mini-month h3 {
    margin: 0 0 8px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
}

#smfmc-calendar .smfmc-mini-weekdays,
#smfmc-calendar .smfmc-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

#smfmc-calendar .smfmc-mini-weekdays span {
    color: var(--smfmc-muted);
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
}

#smfmc-calendar .smfmc-mini-grid > span,
#smfmc-calendar .smfmc-mini-day {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    border-radius: 7px;
    font-size: 0.69rem;
}

#smfmc-calendar .smfmc-mini-day:hover,
#smfmc-calendar .smfmc-mini-day:focus-visible {
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-mini-week-jump {
    position: absolute;
    z-index: 2;
    inset-inline-start: -11px;
    inset-block-start: 50%;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-block-start: -9px;
    border-radius: 50%;
    color: var(--smfmc-muted);
    background: var(--smfmc-surface);
    box-shadow: 0 0 0 1px var(--smfmc-border);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

#smfmc-calendar .smfmc-mini-week-jump .smfmc-icon {
    width: 0.8em;
    height: 0.8em;
}

#smfmc-calendar .smfmc-mini-row:hover .smfmc-mini-week-jump,
#smfmc-calendar .smfmc-mini-row:focus-within .smfmc-mini-week-jump {
    opacity: 0.78;
}

#smfmc-calendar .smfmc-mini-week-jump:hover,
#smfmc-calendar .smfmc-mini-week-jump:focus-visible {
    color: var(--smfmc-accent);
    background: var(--smfmc-panel-2);
    opacity: 1;
}

#smfmc-calendar .smfmc-mini-day.is-today {
    color: var(--smfmc-accent-text);
    background: var(--smfmc-accent);
    font-weight: 800;
}

#smfmc-calendar .smfmc-mini-day i {
    position: absolute;
    bottom: 2px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--smfmc-event);
}

#smfmc-calendar .smfmc-filter-card {
    overflow: hidden;
}

#smfmc-calendar .smfmc-filters {
    display: grid;
    padding: 5px 8px 10px;
}

#smfmc-calendar .smfmc-filter {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    color: inherit;
    font: inherit;
    font-size: 0.76rem;
    text-align: start;
    border: 0;
    border-radius: 7px;
    background: transparent;
    background-image: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

#smfmc-calendar .smfmc-filter:hover,
#smfmc-calendar .smfmc-filter:focus-visible,
#smfmc-calendar .smfmc-filter.is-active {
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-filter strong {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--smfmc-panel);
    text-align: center;
    font-size: 0.67rem;
}

#smfmc-calendar .smfmc-filter-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--smfmc-muted);
}

#smfmc-calendar .smfmc-dot-event { background: var(--smfmc-event); }
#smfmc-calendar .smfmc-dot-birthday { background: var(--smfmc-birthday); }
#smfmc-calendar .smfmc-dot-holiday { background: var(--smfmc-holiday); }
#smfmc-calendar .smfmc-dot-all { background: var(--smfmc-accent); }

#smfmc-calendar .smfmc-main {
    display: grid;
    gap: 14px;
}

#smfmc-calendar .smfmc-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    min-height: 62px;
}

#smfmc-calendar .smfmc-period-controls,
#smfmc-calendar .smfmc-arrow-group,
#smfmc-calendar .smfmc-view-tabs {
    display: flex;
    align-items: center;
}

#smfmc-calendar .smfmc-period-controls {
    justify-content: flex-start;
    gap: 7px;
}

#smfmc-calendar .smfmc-arrow-group {
    gap: 0;
    border: 1px solid var(--smfmc-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-view-tabs {
    justify-content: flex-end;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--smfmc-border);
    border-radius: 9px;
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-icon-button,
#smfmc-calendar .smfmc-today-button,
#smfmc-calendar .smfmc-view-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    background-image: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-icon-button {
    width: 34px;
    padding: 0;
    border-radius: 0;
}

#smfmc-calendar .smfmc-icon-button + .smfmc-icon-button {
    border-inline-start: 1px solid var(--smfmc-border);
}

#smfmc-calendar .smfmc-icon-button:hover,
#smfmc-calendar .smfmc-icon-button:focus-visible,
#smfmc-calendar .smfmc-today-button:hover,
#smfmc-calendar .smfmc-today-button:focus-visible,
#smfmc-calendar .smfmc-view-tab:not(.is-active):hover,
#smfmc-calendar .smfmc-view-tab:not(.is-active):focus-visible {
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-icon-button.is-disabled {
    opacity: 0.38;
}

#smfmc-calendar .smfmc-today-button {
    gap: 6px;
    border: 1px solid var(--smfmc-border);
    background: var(--smfmc-surface);
}

#smfmc-calendar .smfmc-today-button svg {
    width: 14px;
    height: 14px;
}

#smfmc-calendar .smfmc-view-tab {
    gap: 5px;
    min-width: 68px;
}

#smfmc-calendar .smfmc-view-tab svg {
    width: 14px;
    height: 14px;
}

#smfmc-calendar .smfmc-view-tab.is-active {
    color: var(--smfmc-accent-text);
    background: var(--smfmc-accent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--smfmc-accent) 18%, transparent);
}

#smfmc-calendar .smfmc-period-title {
    display: grid;
    gap: 1px;
    min-width: 0;
    text-align: center;
}

#smfmc-calendar .smfmc-period-title > span {
    color: var(--smfmc-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-view-title {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-month-card {
    overflow: hidden;
}

#smfmc-calendar .smfmc-month-weekdays,
#smfmc-calendar .smfmc-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

#smfmc-calendar .smfmc-month-weekdays {
    color: var(--smfmc-accent-text);
    background: var(--smfmc-accent);
}

#smfmc-calendar .smfmc-month-weekdays span {
    padding: 9px 5px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
}

#smfmc-calendar .smfmc-month-weekdays span b {
    display: none;
}

#smfmc-calendar .smfmc-day {
    position: relative;
    min-height: 116px;
    padding: 7px;
    border-inline-end: 1px solid var(--smfmc-border);
    border-bottom: 1px solid var(--smfmc-border);
    background: var(--smfmc-surface);
    overflow: hidden;
}

#smfmc-calendar .smfmc-day:nth-child(7n) {
    border-inline-end: 0;
}

#smfmc-calendar .smfmc-day.is-outside {
    color: var(--smfmc-muted);
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-day.is-selected:not(.is-today) {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--smfmc-accent) 35%, transparent);
    background: color-mix(in srgb, var(--smfmc-accent) 5%, var(--smfmc-surface));
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
    #smfmc-calendar .smfmc-day.is-selected:not(.is-today) {
        box-shadow: inset 0 0 0 2px rgba(31, 101, 168, 0.28);
    }
}

#smfmc-calendar .smfmc-day-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 26px;
}

#smfmc-calendar .smfmc-day-number {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
}

#smfmc-calendar .smfmc-day.is-today .smfmc-day-number {
    color: var(--smfmc-accent-text);
    background: var(--smfmc-accent);
}

#smfmc-calendar .smfmc-day-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

#smfmc-calendar .smfmc-day-add,
#smfmc-calendar .smfmc-day-week {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 6px;
    color: var(--smfmc-muted);
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

#smfmc-calendar .smfmc-day:hover .smfmc-day-add,
#smfmc-calendar .smfmc-day:focus-within .smfmc-day-add,
#smfmc-calendar .smfmc-day:hover .smfmc-day-week,
#smfmc-calendar .smfmc-day:focus-within .smfmc-day-week {
    opacity: 1;
}

#smfmc-calendar .smfmc-day-add:hover,
#smfmc-calendar .smfmc-day-add:focus-visible,
#smfmc-calendar .smfmc-day-week:hover,
#smfmc-calendar .smfmc-day-week:focus-visible {
    color: var(--smfmc-accent);
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-day-items {
    display: grid;
    gap: 4px;
    margin-top: 5px;
}

#smfmc-calendar .smfmc-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 3px;
    min-width: 0;
}

#smfmc-calendar .smfmc-item-row > .smfmc-item {
    min-width: 0;
}

#smfmc-calendar .smfmc-item-actions {
    display: flex;
    gap: 2px;
    padding-top: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

#smfmc-calendar .smfmc-item-row:hover .smfmc-item-actions,
#smfmc-calendar .smfmc-item-row:focus-within .smfmc-item-actions {
    opacity: 1;
}

#smfmc-calendar .smfmc-item-action {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    color: var(--smfmc-muted);
}

#smfmc-calendar .smfmc-item-action:hover,
#smfmc-calendar .smfmc-item-action:focus-visible {
    color: var(--smfmc-accent);
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-item-action svg,
#smfmc-calendar .smfmc-item-location svg {
    width: 12px;
    height: 12px;
}

#smfmc-calendar .smfmc-item {
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    min-width: 0;
    padding: 4px 5px;
    border-radius: 6px;
    font-size: 0.68rem;
    line-height: 1.2;
    transition: background 0.15s ease;
}

#smfmc-calendar a.smfmc-item:hover,
#smfmc-calendar a.smfmc-item:focus-visible {
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-item > i {
    width: 6px;
    height: 6px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--smfmc-event);
}

#smfmc-calendar .smfmc-kind-birthday > i,
#smfmc-calendar .smfmc-kind-birthday .smfmc-kind-label { color: var(--smfmc-birthday); }
#smfmc-calendar .smfmc-kind-birthday > i { background: var(--smfmc-birthday); }
#smfmc-calendar .smfmc-kind-holiday > i,
#smfmc-calendar .smfmc-kind-holiday .smfmc-kind-label { color: var(--smfmc-holiday); }
#smfmc-calendar .smfmc-kind-holiday > i { background: var(--smfmc-holiday); }
#smfmc-calendar .smfmc-kind-event .smfmc-kind-label { color: var(--smfmc-event); }

#smfmc-calendar .smfmc-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

#smfmc-calendar .smfmc-item small {
    display: block;
    margin-top: 1px;
    color: var(--smfmc-muted);
    font-size: 0.61rem;
}

#smfmc-calendar .smfmc-item .smfmc-item-location {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-extra-item {
    display: none;
}

#smfmc-calendar .smfmc-day-items.is-expanded .smfmc-extra-item {
    display: grid;
}

#smfmc-calendar .smfmc-more-button {
    justify-self: start;
    padding: 2px 4px;
    color: var(--smfmc-accent);
    font: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    border: 0;
    background: transparent;
    background-image: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

#smfmc-calendar[data-active-filter="event"] .smfmc-kind-birthday,
#smfmc-calendar[data-active-filter="event"] .smfmc-kind-holiday,
#smfmc-calendar[data-active-filter="birthday"] .smfmc-kind-event,
#smfmc-calendar[data-active-filter="birthday"] .smfmc-kind-holiday,
#smfmc-calendar[data-active-filter="holiday"] .smfmc-kind-event,
#smfmc-calendar[data-active-filter="holiday"] .smfmc-kind-birthday {
    display: none !important;
}

#smfmc-calendar .smfmc-upcoming,
#smfmc-calendar .smfmc-actions {
    overflow: hidden;
}

#smfmc-calendar .smfmc-section-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin: 7px 9px 4px 0;
    padding: 5px 7px;
    border-radius: 7px;
    color: var(--smfmc-accent);
    font-size: 0.62rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-section-link:hover,
#smfmc-calendar .smfmc-section-link:focus-visible {
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-section-link svg {
    width: 11px;
    height: 11px;
}

#smfmc-calendar .smfmc-upcoming-list {
    border-top: 1px solid var(--smfmc-border);
}

#smfmc-calendar .smfmc-upcoming-row {
    margin: 0;
    border-bottom: 1px solid var(--smfmc-border);
}

#smfmc-calendar .smfmc-upcoming-row:last-child {
    border-bottom: 0;
}

#smfmc-calendar .smfmc-upcoming-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 10px 11px;
}

#smfmc-calendar .smfmc-upcoming-item:hover,
#smfmc-calendar .smfmc-upcoming-item:focus-visible {
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-upcoming-item > .smfmc-icon:last-child {
    color: var(--smfmc-muted);
    width: 13px;
    height: 13px;
}

#smfmc-calendar .smfmc-date-badge {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 50px;
    border: 1px solid var(--smfmc-border);
    border-radius: 9px;
    background: var(--smfmc-panel);
    line-height: 1;
}

#smfmc-calendar .smfmc-kind-event .smfmc-date-badge {
    box-shadow: inset 2px 0 0 var(--smfmc-event);
}

#smfmc-calendar .smfmc-kind-birthday .smfmc-date-badge {
    box-shadow: inset 2px 0 0 var(--smfmc-birthday);
}

#smfmc-calendar .smfmc-kind-holiday .smfmc-date-badge {
    box-shadow: inset 2px 0 0 var(--smfmc-holiday);
}

#smfmc-calendar .smfmc-date-badge small {
    color: var(--smfmc-accent);
    font-size: 0.56rem;
    font-weight: 800;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-date-badge strong {
    margin: 2px 0;
    font-size: 1rem;
}

#smfmc-calendar .smfmc-date-badge span {
    color: var(--smfmc-muted);
    font-size: 0.5rem;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-upcoming-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

#smfmc-calendar .smfmc-upcoming-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#smfmc-calendar .smfmc-upcoming-body > strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#smfmc-calendar .smfmc-kind-label {
    color: var(--smfmc-event);
    font-size: 0.57rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#smfmc-calendar .smfmc-kind-birthday .smfmc-kind-label {
    color: var(--smfmc-birthday);
}

#smfmc-calendar .smfmc-kind-holiday .smfmc-kind-label {
    color: var(--smfmc-holiday);
}

#smfmc-calendar .smfmc-relative-label {
    overflow: hidden;
    padding: 2px 5px;
    border-radius: 999px;
    color: var(--smfmc-accent);
    background: var(--smfmc-panel-2);
    font-size: 0.52rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-upcoming-meta,
#smfmc-calendar .smfmc-source-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--smfmc-muted);
    font-size: 0.6rem;
}

#smfmc-calendar .smfmc-upcoming-meta span,
#smfmc-calendar .smfmc-source-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-upcoming-meta svg,
#smfmc-calendar .smfmc-source-chip svg {
    width: 10px;
    height: 10px;
}

#smfmc-calendar .smfmc-source-chip {
    width: max-content;
    max-width: 100%;
    margin-top: 1px;
    padding: 2px 5px;
    border: 1px solid var(--smfmc-border);
    border-radius: 999px;
    background: var(--smfmc-panel);
    font-size: 0.54rem;
}

#smfmc-calendar .smfmc-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 135px;
    padding: 18px;
    color: var(--smfmc-muted);
    text-align: center;
}

#smfmc-calendar .smfmc-empty svg {
    width: 26px;
    height: 26px;
}

#smfmc-calendar .smfmc-empty p {
    margin: 0;
    font-size: 0.74rem;
}

#smfmc-calendar .smfmc-filter-empty[hidden] {
    display: none !important;
}

#smfmc-calendar .smfmc-actions {
    padding-bottom: 7px;
}

#smfmc-calendar .smfmc-action-link,
#smfmc-calendar .smfmc-agenda-title,
#smfmc-calendar .smfmc-agenda-actions a {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    margin: 0 6px 3px;
    border: 1px solid transparent;
    border-radius: 9px;
}

#smfmc-calendar .smfmc-action-link:hover,
#smfmc-calendar .smfmc-action-link:focus-visible {
    border-color: var(--smfmc-border);
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-action-primary {
    margin-bottom: 7px;
    border-color: color-mix(in srgb, var(--smfmc-accent) 22%, var(--smfmc-border));
    background: color-mix(in srgb, var(--smfmc-accent) 7%, var(--smfmc-surface));
}

#smfmc-calendar .smfmc-action-icon {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 9px;
    color: var(--smfmc-accent);
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-action-primary .smfmc-action-icon {
    color: var(--smfmc-accent-text);
    background: var(--smfmc-accent);
}

#smfmc-calendar .smfmc-action-link > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

#smfmc-calendar .smfmc-action-link strong {
    font-size: 0.71rem;
}

#smfmc-calendar .smfmc-action-link small {
    overflow: hidden;
    color: var(--smfmc-muted);
    font-size: 0.57rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-post-event:focus-visible,
#smfmc-calendar .smfmc-icon-button:focus-visible,
#smfmc-calendar .smfmc-today-button:focus-visible,
#smfmc-calendar .smfmc-view-tab:focus-visible,
#smfmc-calendar .smfmc-mini-day:focus-visible,
#smfmc-calendar .smfmc-day-number:focus-visible,
#smfmc-calendar .smfmc-day-add:focus-visible,
#smfmc-calendar .smfmc-day-week:focus-visible,
#smfmc-calendar .smfmc-mini-week-jump:focus-visible,
#smfmc-calendar .smfmc-item:focus-visible,
#smfmc-calendar .smfmc-item-action:focus-visible,
#smfmc-calendar .smfmc-upcoming-item:focus-visible,
#smfmc-calendar .smfmc-action-link:focus-visible,
#smfmc-calendar .smfmc-section-link:focus-visible,
#smfmc-calendar .smfmc-filter:focus-visible,
#smfmc-calendar .smfmc-more-button:focus-visible {
    outline: 2px solid var(--smfmc-accent);
    outline-offset: 2px;
}

@media (max-width: 1220px) {
    #smfmc-calendar .smfmc-layout {
        grid-template-columns: minmax(185px, 215px) minmax(0, 1fr);
    }

    #smfmc-calendar .smfmc-right {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
    }
}

@media (max-width: 980px) {
    #smfmc-calendar .smfmc-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    #smfmc-calendar .smfmc-summary {
        justify-content: flex-start;
        width: 100%;
    }

    #smfmc-calendar .smfmc-layout {
        grid-template-columns: 1fr;
    }

    #smfmc-calendar .smfmc-left,
    #smfmc-calendar .smfmc-right {
        grid-column: auto;
    }

    #smfmc-calendar .smfmc-left-inner {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
    }

    #smfmc-calendar .smfmc-mini-stack > .smfmc-mini-month {
        display: inline-block;
        width: 33.333%;
        vertical-align: top;
        border-top: 1px solid var(--smfmc-border);
    }

    #smfmc-calendar .smfmc-right {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 820px) {
    #smfmc-calendar .smfmc-page-header {
        padding: 16px;
    }

    #smfmc-calendar .smfmc-summary-card {
        flex: 1 1 130px;
    }

    #smfmc-calendar .smfmc-post-event {
        flex: 1 1 100%;
        justify-content: center;
    }

    #smfmc-calendar .smfmc-mobile-fold {
        border: 1px solid var(--smfmc-border);
        border-radius: 10px;
        background: var(--smfmc-surface);
    }

    #smfmc-calendar .smfmc-mobile-fold > summary {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        cursor: pointer;
        font-weight: 700;
    }

    #smfmc-calendar .smfmc-left-inner {
        grid-template-columns: 1fr;
        padding: 0 10px 10px;
    }

    #smfmc-calendar .smfmc-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #smfmc-calendar .smfmc-period-title {
        text-align: end;
    }

    #smfmc-calendar .smfmc-view-title {
        text-align: end;
        font-size: 1.05rem;
    }

    #smfmc-calendar .smfmc-view-tabs {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    #smfmc-calendar .smfmc-view-tab {
        flex: 1 1 0;
    }

    #smfmc-calendar .smfmc-month-card {
        overflow-x: auto;
    }

    #smfmc-calendar .smfmc-month-weekdays,
    #smfmc-calendar .smfmc-month-grid {
        min-width: 690px;
    }

    #smfmc-calendar .smfmc-right {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    #smfmc-calendar .smfmc-page-title {
        align-items: flex-start;
    }

    #smfmc-calendar .smfmc-page-title p {
        font-size: 0.82rem;
    }

    #smfmc-calendar .smfmc-mini-stack > .smfmc-mini-month {
        display: block;
        width: 100%;
    }

    #smfmc-calendar .smfmc-summary-card {
        flex: 1 1 calc(50% - 5px);
    }
}

@media (hover: none), (pointer: coarse) {
    #smfmc-calendar .smfmc-item-actions {
        opacity: 1;
    }
}


/* Logical-direction support. Calendar structure follows the document direction,
   while directional chevrons are mirrored so previous/next/back remain intuitive. */
[dir="rtl"] #smfmc-calendar .smfmc-icon-button .smfmc-icon,
[dir="rtl"] #smfmc-calendar .smfmc-section-link .smfmc-icon,
[dir="rtl"] #smfmc-calendar .smfmc-upcoming-item > .smfmc-icon,
[dir="rtl"] #smfmc-event-editor .smfmc-editor-back .smfmc-icon {
    transform: scaleX(-1);
}

[dir="rtl"] #smfmc-calendar .smfmc-filter.is-active {
    box-shadow: inset -3px 0 0 var(--smfmc-accent);
}

@media (prefers-reduced-motion: reduce) {
    #smfmc-calendar *,
    #smfmc-calendar *::before,
    #smfmc-calendar *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* -------------------------------------------------------------------------
   Phase 4: container-width compatibility.
   -------------------------------------------------------------------------
   Viewport media queries above remain useful as a no-JS fallback. These
   classes are applied from the calendar's ACTUAL rendered width by
   ResizeObserver, so a TinyPortal side column or a narrow third-party theme
   cannot trick a wide desktop viewport into using the three-column layout. */
#smfmc-calendar.smfmc-width-medium .smfmc-layout {
    grid-template-columns: minmax(185px, 215px) minmax(0, 1fr);
}

#smfmc-calendar.smfmc-width-medium .smfmc-right {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
}

#smfmc-calendar.smfmc-width-narrow .smfmc-page-header,
#smfmc-calendar.smfmc-width-compact .smfmc-page-header {
    align-items: flex-start;
    flex-direction: column;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-summary,
#smfmc-calendar.smfmc-width-compact .smfmc-summary {
    justify-content: flex-start;
    width: 100%;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-layout,
#smfmc-calendar.smfmc-width-compact .smfmc-layout {
    grid-template-columns: minmax(0, 1fr);
}

#smfmc-calendar.smfmc-width-narrow .smfmc-left,
#smfmc-calendar.smfmc-width-narrow .smfmc-right,
#smfmc-calendar.smfmc-width-compact .smfmc-left,
#smfmc-calendar.smfmc-width-compact .smfmc-right {
    grid-column: auto;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-left-inner {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
}

#smfmc-calendar.smfmc-width-narrow .smfmc-mini-stack > .smfmc-mini-month {
    display: inline-block;
    width: 33.333%;
    vertical-align: top;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#smfmc-calendar.smfmc-width-compact .smfmc-page-header {
    padding: 16px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-summary-card {
    flex: 1 1 130px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-post-event {
    flex: 1 1 100%;
    justify-content: center;
}

#smfmc-calendar.smfmc-width-compact .smfmc-mobile-fold {
    border: 1px solid var(--smfmc-border);
    border-radius: 10px;
    background: var(--smfmc-surface);
}

#smfmc-calendar.smfmc-width-compact .smfmc-mobile-fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 700;
}

#smfmc-calendar.smfmc-width-compact .smfmc-left-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 10px 10px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-mini-stack > .smfmc-mini-month {
    display: block;
    width: 100%;
}

#smfmc-calendar.smfmc-width-compact .smfmc-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
}

#smfmc-calendar.smfmc-width-compact .smfmc-period-title {
    text-align: end;
}

#smfmc-calendar.smfmc-width-compact .smfmc-view-title {
    text-align: end;
    font-size: 1.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

#smfmc-calendar.smfmc-width-compact .smfmc-view-tabs {
    grid-column: 1 / -1;
    justify-content: stretch;
}

#smfmc-calendar.smfmc-width-compact .smfmc-view-tab {
    flex: 1 1 0;
}

#smfmc-calendar.smfmc-width-compact .smfmc-month-card {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

#smfmc-calendar.smfmc-width-compact .smfmc-month-weekdays,
#smfmc-calendar.smfmc-width-compact .smfmc-month-grid {
    min-width: 690px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-right {
    grid-template-columns: minmax(0, 1fr);
}

/* If JavaScript is blocked, modern browsers can still adapt to a narrow portal
   container using native container queries. The JS width classes remain the
   primary path because they also drive the collapsible sidebar state. */
@supports (container-type: inline-size) {
    @container smfmc (max-width: 1120px) {
        #smfmc-calendar:not(.smfmc-width-wide) .smfmc-layout {
            grid-template-columns: minmax(185px, 215px) minmax(0, 1fr);
        }

        #smfmc-calendar:not(.smfmc-width-wide) .smfmc-right {
            grid-column: 1 / -1;
        }
    }

    @container smfmc (max-width: 900px) {
        #smfmc-calendar:not(.smfmc-width-wide):not(.smfmc-width-medium) .smfmc-layout {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @container smfmc (max-width: 660px) {
        #smfmc-calendar:not(.smfmc-theme-ready) .smfmc-page-header {
            align-items: flex-start;
            flex-direction: column;
        }

        #smfmc-calendar:not(.smfmc-theme-ready) .smfmc-month-card {
            overflow-x: auto;
        }

        #smfmc-calendar:not(.smfmc-theme-ready) .smfmc-month-weekdays,
        #smfmc-calendar:not(.smfmc-theme-ready) .smfmc-month-grid {
            min-width: 690px;
        }
    }
}

/* Dark fallback only before the runtime theme sampler has completed. Once JS
   has read the actual active theme, .smfmc-theme-ready wins. */
@media (prefers-color-scheme: dark) {
    #smfmc-calendar:not(.smfmc-theme-ready) {
        --smfmc-surface: #20242b;
        --smfmc-text: #eef2f7;
        --smfmc-muted: rgba(255, 255, 255, 0.68);
        --smfmc-panel: #272c34;
        --smfmc-panel-2: #303640;
        --smfmc-border: rgba(255, 255, 255, 0.14);
        --smfmc-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
    }
}

/* -------------------------------------------------------------------------
   Phase 6: month-grid and day-cell UX
   ------------------------------------------------------------------------- */
#smfmc-calendar .smfmc-month-weekdays abbr {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

#smfmc-calendar .smfmc-day {
    min-height: 122px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#smfmc-calendar .smfmc-day:not(.is-outside):hover {
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-day:not(.is-outside):focus-within {
    z-index: 1;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--smfmc-accent) 28%, transparent);
}

#smfmc-calendar .smfmc-day.is-selected:not(.is-today) {
    z-index: 1;
    background: color-mix(in srgb, var(--smfmc-accent) 7%, var(--smfmc-surface));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--smfmc-accent) 55%, transparent);
}

#smfmc-calendar .smfmc-day.is-selected.is-today {
    z-index: 1;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--smfmc-accent) 42%, transparent);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
    #smfmc-calendar .smfmc-day:not(.is-outside):focus-within,
    #smfmc-calendar .smfmc-day.is-selected:not(.is-today),
    #smfmc-calendar .smfmc-day.is-selected.is-today {
        box-shadow: inset 0 0 0 2px rgba(31, 101, 168, 0.35);
    }
}

#smfmc-calendar .smfmc-day-heading {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

#smfmc-calendar .smfmc-day-number {
    flex: 0 0 auto;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#smfmc-calendar .smfmc-day:not(.is-today) a.smfmc-day-number:hover,
#smfmc-calendar .smfmc-day:not(.is-today) a.smfmc-day-number:focus-visible {
    color: var(--smfmc-accent);
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-day.is-selected:not(.is-today) .smfmc-day-number {
    color: var(--smfmc-accent);
    background: var(--smfmc-surface);
    box-shadow: inset 0 0 0 1px var(--smfmc-accent);
}

#smfmc-calendar .smfmc-day.is-outside {
    opacity: 0.68;
}

#smfmc-calendar .smfmc-day.is-outside:hover,
#smfmc-calendar .smfmc-day.is-outside:focus-within {
    opacity: 0.9;
}

#smfmc-calendar .smfmc-day.is-outside .smfmc-day-number {
    font-weight: 600;
}

#smfmc-calendar .smfmc-today-chip,
#smfmc-calendar .smfmc-selected-chip {
    max-width: 72px;
    overflow: hidden;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 0.54rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-today-chip {
    color: var(--smfmc-accent);
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-selected-chip {
    color: var(--smfmc-accent);
    border: 1px solid color-mix(in srgb, var(--smfmc-accent) 38%, var(--smfmc-border));
    background: var(--smfmc-surface);
}

#smfmc-calendar .smfmc-day.is-selected .smfmc-day-add,
#smfmc-calendar .smfmc-day.is-today .smfmc-day-add,
#smfmc-calendar .smfmc-day.is-selected .smfmc-day-week,
#smfmc-calendar .smfmc-day.is-today .smfmc-day-week {
    opacity: 0.72;
}

#smfmc-calendar .smfmc-day-items {
    gap: 3px;
    margin-top: 6px;
}

#smfmc-calendar .smfmc-item-row {
    border-radius: 6px;
}

#smfmc-calendar .smfmc-item {
    padding: 4px 5px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--smfmc-event) 7%, transparent);
}

#smfmc-calendar .smfmc-item.smfmc-kind-birthday {
    background: color-mix(in srgb, var(--smfmc-birthday) 7%, transparent);
}

#smfmc-calendar .smfmc-item.smfmc-kind-holiday {
    background: color-mix(in srgb, var(--smfmc-holiday) 8%, transparent);
}

#smfmc-calendar a.smfmc-item:hover,
#smfmc-calendar a.smfmc-item:focus-visible {
    border-color: color-mix(in srgb, currentColor 12%, var(--smfmc-border));
    background: var(--smfmc-panel-2);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
    #smfmc-calendar .smfmc-item { background: rgba(22, 131, 196, 0.07); }
    #smfmc-calendar .smfmc-item.smfmc-kind-birthday { background: rgba(139, 92, 246, 0.07); }
    #smfmc-calendar .smfmc-item.smfmc-kind-holiday { background: rgba(245, 158, 11, 0.08); }
}

#smfmc-calendar .smfmc-item-row.is-multiday .smfmc-item {
    box-shadow: inset 2px 0 0 var(--smfmc-event);
}

#smfmc-calendar .smfmc-item-row.is-continuation .smfmc-item > i,
#smfmc-calendar .smfmc-item-row.is-ending .smfmc-item > i {
    border-radius: 2px;
}

#smfmc-calendar .smfmc-item-copy,
#smfmc-calendar .smfmc-item-title {
    min-width: 0;
}

#smfmc-calendar .smfmc-item-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-weight: 650;
    overflow-wrap: anywhere;
}

#smfmc-calendar .smfmc-item-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-item .smfmc-item-location > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-item-row.is-continuation .smfmc-item-meta,
#smfmc-calendar .smfmc-item-row.is-ending .smfmc-item-meta {
    color: var(--smfmc-accent);
    font-weight: 700;
}

#smfmc-calendar .smfmc-more-button {
    min-height: 22px;
    margin-top: 1px;
    padding: 3px 7px;
    border: 1px solid color-mix(in srgb, var(--smfmc-accent) 24%, var(--smfmc-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--smfmc-accent) 6%, var(--smfmc-surface));
    line-height: 1.15;
}

#smfmc-calendar .smfmc-more-button:hover,
#smfmc-calendar .smfmc-more-button:focus-visible {
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-more-button[hidden] {
    display: none !important;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-today-chip,
#smfmc-calendar.smfmc-width-narrow .smfmc-selected-chip,
#smfmc-calendar.smfmc-width-compact .smfmc-today-chip,
#smfmc-calendar.smfmc-width-compact .smfmc-selected-chip {
    display: none;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-day,
#smfmc-calendar.smfmc-width-compact .smfmc-day {
    min-height: 112px;
}

@media (hover: none), (pointer: coarse) {
    #smfmc-calendar .smfmc-day-add,
    #smfmc-calendar .smfmc-day-week,
    #smfmc-calendar .smfmc-mini-week-jump {
        opacity: 0.7;
    }

    #smfmc-calendar .smfmc-item-actions {
        opacity: 1;
    }
}


/* -------------------------------------------------------------------------
   Phase 7: mini-calendar and filter UX.
   ------------------------------------------------------------------------- */
#smfmc-calendar .smfmc-mini-month.is-current-month {
    background: color-mix(in srgb, var(--smfmc-accent) 5%, var(--smfmc-surface));
    box-shadow: inset 3px 0 0 var(--smfmc-accent);
}

#smfmc-calendar .smfmc-mini-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-height: 24px;
    margin: 0 0 8px;
}

#smfmc-calendar .smfmc-mini-heading h3 {
    margin: 0;
}

#smfmc-calendar .smfmc-current-month-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 1px 6px;
    color: var(--smfmc-accent);
    border: 1px solid color-mix(in srgb, var(--smfmc-accent) 32%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--smfmc-accent) 8%, transparent);
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-mini-day {
    grid-template-rows: minmax(0, 1fr);
    border: 1px solid transparent;
    transition: background-color 0.14s ease, border-color 0.14s ease, opacity 0.14s ease, transform 0.14s ease;
}

#smfmc-calendar .smfmc-mini-day.is-selected:not(.is-today) {
    color: var(--smfmc-accent);
    border-color: color-mix(in srgb, var(--smfmc-accent) 52%, transparent);
    background: color-mix(in srgb, var(--smfmc-accent) 10%, var(--smfmc-surface));
    font-weight: 800;
}

#smfmc-calendar .smfmc-mini-day.is-selected.is-today {
    outline: 2px solid color-mix(in srgb, var(--smfmc-accent-text) 82%, transparent);
    outline-offset: -3px;
}

#smfmc-calendar .smfmc-mini-markers {
    position: absolute;
    inset: auto 2px 2px;
    display: flex;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    pointer-events: none;
}

#smfmc-calendar .smfmc-mini-marker {
    position: static;
    display: block;
    width: 3px;
    height: 3px;
    flex: 0 0 3px;
    border-radius: 50%;
}

#smfmc-calendar .smfmc-mini-day.is-today .smfmc-mini-marker {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--smfmc-accent-text) 70%, transparent);
}

#smfmc-calendar[data-active-filter="event"] .smfmc-mini-marker:not([data-kind="event"]),
#smfmc-calendar[data-active-filter="birthday"] .smfmc-mini-marker:not([data-kind="birthday"]),
#smfmc-calendar[data-active-filter="holiday"] .smfmc-mini-marker:not([data-kind="holiday"]) {
    display: none;
}

#smfmc-calendar[data-active-filter="event"] .smfmc-mini-day.has-items:not(.has-event),
#smfmc-calendar[data-active-filter="birthday"] .smfmc-mini-day.has-items:not(.has-birthday),
#smfmc-calendar[data-active-filter="holiday"] .smfmc-mini-day.has-items:not(.has-holiday) {
    opacity: 0.44;
}

#smfmc-calendar .smfmc-filter {
    position: relative;
}

#smfmc-calendar .smfmc-filter.is-active {
    color: var(--smfmc-text);
    box-shadow: inset 3px 0 0 var(--smfmc-accent);
    font-weight: 700;
}

#smfmc-calendar .smfmc-filter.is-active strong {
    color: var(--smfmc-accent-text);
    background: var(--smfmc-accent);
}

#smfmc-calendar .smfmc-mobile-fold > summary small {
    display: none;
    margin-inline-start: auto;
    color: var(--smfmc-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-mobile-fold {
    border: 1px solid var(--smfmc-border);
    border-radius: 10px;
    background: var(--smfmc-surface);
    overflow: clip;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-mobile-fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 700;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-mobile-fold > summary small,
#smfmc-calendar.smfmc-width-compact .smfmc-mobile-fold > summary small {
    display: inline;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-left-inner {
    padding: 0 10px 10px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-mini-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#smfmc-calendar.smfmc-width-compact .smfmc-mini-stack > .smfmc-section-title {
    grid-column: 1 / -1;
    order: -3;
}

#smfmc-calendar.smfmc-width-compact .smfmc-mini-stack > .smfmc-mini-month {
    display: block;
    width: auto;
    min-width: 0;
    padding-inline: 9px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-mini-stack > .smfmc-mini-month.is-current-month {
    grid-column: 1 / -1;
    order: -2;
}

#smfmc-calendar.smfmc-width-compact .smfmc-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-filter {
    grid-template-columns: 9px minmax(0, 1fr) auto;
    gap: 6px;
    min-height: 38px;
}

@media (max-width: 390px) {
    #smfmc-calendar.smfmc-width-compact .smfmc-mini-stack {
        grid-template-columns: minmax(0, 1fr);
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-mini-stack > .smfmc-section-title,
    #smfmc-calendar.smfmc-width-compact .smfmc-mini-stack > .smfmc-mini-month.is-current-month {
        grid-column: 1;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-filters {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------------
   Phase 9: modern Week view.
   ------------------------------------------------------------------------- */
#smfmc-calendar .smfmc-week-card {
    overflow: hidden;
}

#smfmc-calendar .smfmc-week-days {
    display: grid;
    min-width: 0;
}

#smfmc-calendar .smfmc-week-day {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    min-width: 0;
    border-top: 1px solid var(--smfmc-border);
    background: var(--smfmc-surface);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#smfmc-calendar .smfmc-week-day:first-child {
    border-top: 0;
}

#smfmc-calendar .smfmc-week-day.is-today {
    background: color-mix(in srgb, var(--smfmc-accent) 4%, var(--smfmc-surface));
    box-shadow: inset 3px 0 0 var(--smfmc-accent);
}

#smfmc-calendar .smfmc-week-day.is-selected:not(.is-today) {
    background: color-mix(in srgb, var(--smfmc-accent) 2.5%, var(--smfmc-surface));
}

#smfmc-calendar .smfmc-week-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-width: 0;
    padding: 14px 10px;
    border-inline-end: 1px solid var(--smfmc-border);
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-week-day.is-today .smfmc-week-date {
    background: color-mix(in srgb, var(--smfmc-accent) 8%, var(--smfmc-panel));
}

#smfmc-calendar .smfmc-week-date-link,
#smfmc-calendar .smfmc-week-add {
    color: inherit;
    text-decoration: none;
}

#smfmc-calendar .smfmc-week-date-link {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    justify-content: center;
    gap: 0 5px;
    width: 100%;
    min-width: 0;
    text-align: center;
}

#smfmc-calendar .smfmc-week-date-link > span {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    color: var(--smfmc-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-week-date-link > strong {
    color: var(--smfmc-text);
    font-size: 1.7rem;
    line-height: 1;
}

#smfmc-calendar .smfmc-week-date-link > small {
    color: var(--smfmc-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-week-date-link:hover > strong,
#smfmc-calendar .smfmc-week-date-link:focus-visible > strong {
    color: var(--smfmc-accent);
}

#smfmc-calendar .smfmc-week-date-link:focus-visible,
#smfmc-calendar .smfmc-week-add:focus-visible {
    outline: 2px solid var(--smfmc-accent);
    outline-offset: 2px;
}

#smfmc-calendar .smfmc-week-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 19px;
    padding: 2px 7px;
    overflow: hidden;
    color: var(--smfmc-accent-text);
    border-radius: 999px;
    background: var(--smfmc-accent);
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-week-state.is-selected {
    color: var(--smfmc-accent);
    border: 1px solid color-mix(in srgb, var(--smfmc-accent) 35%, transparent);
    background: color-mix(in srgb, var(--smfmc-accent) 8%, transparent);
}

#smfmc-calendar .smfmc-week-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    min-height: 27px;
    margin-top: auto;
    padding: 4px 7px;
    color: var(--smfmc-accent);
    border: 1px solid color-mix(in srgb, var(--smfmc-accent) 25%, var(--smfmc-border));
    border-radius: 7px;
    background: var(--smfmc-surface);
    font-size: 0.62rem;
    font-weight: 750;
    line-height: 1.15;
}

#smfmc-calendar .smfmc-week-add:hover,
#smfmc-calendar .smfmc-week-add:focus-visible {
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-week-add .smfmc-icon {
    width: 12px;
    height: 12px;
}

#smfmc-calendar .smfmc-week-content {
    min-width: 0;
    padding: 12px 14px 14px;
}

#smfmc-calendar .smfmc-week-content-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 18px;
    margin-bottom: 5px;
}

#smfmc-calendar .smfmc-week-count {
    color: var(--smfmc-muted);
    font-size: 0.63rem;
    font-weight: 650;
}

#smfmc-calendar .smfmc-week-day .smfmc-day-items {
    gap: 6px;
    margin-top: 0;
}

/* Week view has room for a chronological list, so it deliberately shows all
   items. The global category filter still wins because those rules use
   !important on non-matching kinds. */
#smfmc-calendar .smfmc-week-day .smfmc-day-items .smfmc-extra-item {
    display: grid;
}

#smfmc-calendar .smfmc-week-day .smfmc-more-button {
    display: none !important;
}

#smfmc-calendar .smfmc-week-day .smfmc-item {
    min-height: 34px;
    padding: 7px 8px;
    border: 1px solid var(--smfmc-border);
    border-radius: 8px;
    background: var(--smfmc-panel);
    font-size: 0.74rem;
    line-height: 1.3;
}

#smfmc-calendar .smfmc-week-day a.smfmc-item:hover,
#smfmc-calendar .smfmc-week-day a.smfmc-item:focus-visible {
    border-color: color-mix(in srgb, var(--smfmc-accent) 30%, var(--smfmc-border));
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-week-day .smfmc-item small {
    font-size: 0.65rem;
}

#smfmc-calendar .smfmc-week-day-empty {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 10px;
    color: var(--smfmc-muted);
    border: 1px dashed var(--smfmc-border);
    border-radius: 8px;
    background: var(--smfmc-panel);
    font-size: 0.7rem;
}

#smfmc-calendar .smfmc-week-day-empty[hidden] {
    display: none !important;
}

#smfmc-calendar .smfmc-week-day-empty .smfmc-icon {
    width: 15px;
    height: 15px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-week-day,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-day {
    grid-template-columns: 82px minmax(0, 1fr);
}

#smfmc-calendar.smfmc-width-compact .smfmc-week-date,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-date {
    padding: 12px 7px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-week-date-link > strong,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-date-link > strong {
    font-size: 1.45rem;
}

#smfmc-calendar.smfmc-width-compact .smfmc-week-add span,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-add span {
    display: none;
}

#smfmc-calendar.smfmc-width-compact .smfmc-week-add,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-add {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
}

#smfmc-calendar.smfmc-width-compact .smfmc-week-content,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-content {
    padding: 10px;
}

@media (max-width: 420px) {
    #smfmc-calendar.smfmc-width-compact .smfmc-week-day {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-week-date-link {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-week-date-link > span,
    #smfmc-calendar.smfmc-width-compact .smfmc-week-date-link > strong,
    #smfmc-calendar.smfmc-width-compact .smfmc-week-date-link > small {
        grid-column: 1;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-week-state {
        max-width: 54px;
    }
}

/* Phase 10: modern List / Agenda view. */
#smfmc-calendar .smfmc-agenda-card {
    min-width: 0;
    overflow: hidden;
}

#smfmc-calendar .smfmc-agenda-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--smfmc-border);
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-agenda-head > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#smfmc-calendar .smfmc-agenda-head > div:first-child > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    color: var(--smfmc-accent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--smfmc-accent) 10%, transparent);
}

#smfmc-calendar .smfmc-agenda-head small,
#smfmc-calendar .smfmc-agenda-range label span {
    display: block;
    color: var(--smfmc-muted);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-agenda-head h2 {
    margin: 1px 0 0;
    color: var(--smfmc-text);
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

#smfmc-calendar .smfmc-agenda-range {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    margin: 0;
}

#smfmc-calendar .smfmc-agenda-range label {
    min-width: 0;
    margin: 0;
}

#smfmc-calendar .smfmc-agenda-range input,
#smfmc-calendar .smfmc-agenda-range button {
    min-height: 33px;
    margin: 3px 0 0;
    padding: 5px 8px;
    color: var(--smfmc-text);
    border: 1px solid var(--smfmc-border);
    border-radius: 7px;
    background: var(--smfmc-surface);
    font: inherit;
    font-size: 0.7rem;
}

#smfmc-calendar .smfmc-agenda-range button {
    cursor: pointer;
    color: var(--smfmc-accent-text);
    border-color: var(--smfmc-accent);
    background: var(--smfmc-accent);
    font-weight: 750;
}

#smfmc-calendar .smfmc-agenda-range input:focus-visible,
#smfmc-calendar .smfmc-agenda-range button:focus-visible,
#smfmc-calendar .smfmc-agenda-title:focus-visible,
#smfmc-calendar .smfmc-agenda-actions a:focus-visible {
    outline: 2px solid var(--smfmc-accent);
    outline-offset: 2px;
}

#smfmc-calendar .smfmc-agenda-groups {
    display: grid;
}

#smfmc-calendar .smfmc-agenda-group {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    min-width: 0;
    border-top: 1px solid var(--smfmc-border);
}

#smfmc-calendar .smfmc-agenda-group:first-child {
    border-top: 0;
}

#smfmc-calendar .smfmc-agenda-group[hidden] {
    display: none !important;
}

#smfmc-calendar .smfmc-agenda-date {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: start;
    gap: 9px;
    min-width: 0;
    padding: 14px 12px;
    border-inline-end: 1px solid var(--smfmc-border);
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-agenda-date > time {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 48px;
    min-width: 48px;
    padding: 6px 4px;
    color: var(--smfmc-text);
    border: 1px solid var(--smfmc-border);
    border-radius: 9px;
    background: var(--smfmc-surface);
    text-align: center;
}

#smfmc-calendar .smfmc-agenda-date > time > span {
    grid-column: 1 / -1;
    color: var(--smfmc-muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-agenda-date > time > strong {
    font-size: 1.2rem;
    line-height: 1;
}

#smfmc-calendar .smfmc-agenda-date > time > small {
    color: var(--smfmc-muted);
    font-size: 0.62rem;
    font-weight: 750;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-agenda-date > div {
    align-self: center;
    min-width: 0;
}

#smfmc-calendar .smfmc-agenda-date > div strong,
#smfmc-calendar .smfmc-agenda-date > div span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-agenda-date > div strong {
    color: var(--smfmc-text);
    font-size: 0.74rem;
}

#smfmc-calendar .smfmc-agenda-date > div span,
#smfmc-calendar .smfmc-agenda-count {
    color: var(--smfmc-muted);
    font-size: 0.62rem;
}

#smfmc-calendar .smfmc-agenda-count {
    grid-column: 1 / -1;
    display: block;
    margin-top: 3px;
    font-weight: 650;
}

#smfmc-calendar .smfmc-agenda-items {
    display: grid;
    min-width: 0;
    padding: 6px 0;
}

#smfmc-calendar .smfmc-agenda-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 14px;
    border-top: 1px solid color-mix(in srgb, var(--smfmc-border) 70%, transparent);
}

#smfmc-calendar .smfmc-agenda-item:first-child {
    border-top: 0;
}

#smfmc-calendar .smfmc-agenda-kind,
#smfmc-calendar .smfmc-agenda-source,
#smfmc-calendar .smfmc-agenda-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    font-size: 0.62rem;
    font-weight: 750;
}

#smfmc-calendar .smfmc-agenda-kind {
    color: var(--smfmc-muted);
}

#smfmc-calendar .smfmc-agenda-kind .smfmc-icon {
    width: 14px;
    height: 14px;
}

#smfmc-calendar .smfmc-kind-event > .smfmc-agenda-kind { color: var(--smfmc-event); }
#smfmc-calendar .smfmc-kind-birthday > .smfmc-agenda-kind { color: var(--smfmc-birthday); }
#smfmc-calendar .smfmc-kind-holiday > .smfmc-agenda-kind { color: var(--smfmc-holiday); }

#smfmc-calendar .smfmc-agenda-body {
    min-width: 0;
}

#smfmc-calendar .smfmc-agenda-title-row,
#smfmc-calendar .smfmc-agenda-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px;
    min-width: 0;
}

#smfmc-calendar .smfmc-agenda-title {
    min-width: 0;
    max-width: 100%;
    color: var(--smfmc-text);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

#smfmc-calendar a.smfmc-agenda-title:hover,
#smfmc-calendar a.smfmc-agenda-title:focus-visible {
    color: var(--smfmc-accent);
}

#smfmc-calendar .smfmc-agenda-source,
#smfmc-calendar .smfmc-agenda-chip {
    padding: 2px 6px;
    color: var(--smfmc-muted);
    border: 1px solid var(--smfmc-border);
    border-radius: 999px;
    background: var(--smfmc-panel);
    white-space: nowrap;
}

#smfmc-calendar .smfmc-agenda-chip {
    color: var(--smfmc-accent);
    border-color: color-mix(in srgb, var(--smfmc-accent) 25%, var(--smfmc-border));
}

#smfmc-calendar .smfmc-agenda-source .smfmc-icon {
    width: 11px;
    height: 11px;
}

#smfmc-calendar .smfmc-agenda-meta {
    margin-top: 5px;
    color: var(--smfmc-muted);
    font-size: 0.66rem;
}

#smfmc-calendar .smfmc-agenda-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

#smfmc-calendar .smfmc-agenda-meta .smfmc-icon {
    width: 12px;
    height: 12px;
}

#smfmc-calendar .smfmc-agenda-original {
    opacity: 0.82;
}

#smfmc-calendar .smfmc-agenda-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

#smfmc-calendar .smfmc-agenda-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    color: var(--smfmc-muted);
    border: 1px solid var(--smfmc-border);
    border-radius: 7px;
    background: var(--smfmc-surface);
}

#smfmc-calendar .smfmc-agenda-actions a:hover,
#smfmc-calendar .smfmc-agenda-actions a:focus-visible {
    color: var(--smfmc-accent);
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-agenda-day-empty,
#smfmc-calendar .smfmc-agenda-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 72px;
    padding: 16px;
    color: var(--smfmc-muted);
    text-align: center;
}

#smfmc-calendar .smfmc-agenda-day-empty {
    min-height: 48px;
    margin: 4px 10px;
    border: 1px dashed var(--smfmc-border);
    border-radius: 8px;
    background: var(--smfmc-panel);
    font-size: 0.7rem;
}

#smfmc-calendar .smfmc-agenda-day-empty[hidden],
#smfmc-calendar .smfmc-agenda-filter-empty[hidden] {
    display: none !important;
}

#smfmc-calendar .smfmc-agenda-empty .smfmc-icon,
#smfmc-calendar .smfmc-agenda-day-empty .smfmc-icon {
    width: 17px;
    height: 17px;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-agenda-head,
#smfmc-calendar.smfmc-width-compact .smfmc-agenda-head {
    align-items: stretch;
    flex-direction: column;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-agenda-range,
#smfmc-calendar.smfmc-width-compact .smfmc-agenda-range {
    justify-content: flex-start;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-agenda-group,
#smfmc-calendar.smfmc-width-compact .smfmc-agenda-group {
    grid-template-columns: 112px minmax(0, 1fr);
}

#smfmc-calendar.smfmc-width-narrow .smfmc-agenda-date,
#smfmc-calendar.smfmc-width-compact .smfmc-agenda-date {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 10px 8px;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-agenda-date > div,
#smfmc-calendar.smfmc-width-compact .smfmc-agenda-date > div {
    display: none;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-agenda-count,
#smfmc-calendar.smfmc-width-compact .smfmc-agenda-count {
    grid-column: 1 / -1;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-agenda-item,
#smfmc-calendar.smfmc-width-compact .smfmc-agenda-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    padding: 9px 10px;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-agenda-kind,
#smfmc-calendar.smfmc-width-compact .smfmc-agenda-kind {
    grid-column: 1 / -1;
}

#smfmc-calendar.smfmc-width-compact .smfmc-agenda-group {
    grid-template-columns: 76px minmax(0, 1fr);
}

#smfmc-calendar.smfmc-width-compact .smfmc-agenda-date {
    grid-template-columns: 1fr;
    justify-items: center;
}

#smfmc-calendar.smfmc-width-compact .smfmc-agenda-count {
    text-align: center;
}

#smfmc-calendar.smfmc-width-compact .smfmc-agenda-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#smfmc-calendar.smfmc-width-compact .smfmc-agenda-range label,
#smfmc-calendar.smfmc-width-compact .smfmc-agenda-range input {
    width: 100%;
}

#smfmc-calendar.smfmc-width-compact .smfmc-agenda-range button {
    grid-column: 1 / -1;
}

#smfmc-calendar .smfmc-agenda-range label,
#smfmc-calendar .smfmc-agenda-range input,
#smfmc-calendar .smfmc-agenda-range button {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* Phase 11 — native SMF event create/edit presentation wrapper. */
#smfmc-event-editor.smfmc-event-editor-root {
    --smfmc-accent: #1f65a8;
    --smfmc-accent-text: #ffffff;
    --smfmc-surface: #ffffff;
    --smfmc-text: #172033;
    --smfmc-muted: #667085;
    --smfmc-panel: #f7f9fc;
    --smfmc-panel-2: #eef4fb;
    --smfmc-border: rgba(17, 32, 51, 0.12);
    --smfmc-shadow: 0 10px 30px rgba(28, 51, 84, 0.08);
    color: var(--smfmc-text);
    font: inherit;
    line-height: 1.45;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    isolation: isolate;
    container: smfmc-editor / inline-size;
    overflow-wrap: anywhere;
}

#smfmc-event-editor.smfmc-is-dark {
    --smfmc-muted: rgba(255, 255, 255, 0.68);
    --smfmc-panel: rgba(255, 255, 255, 0.045);
    --smfmc-panel-2: rgba(255, 255, 255, 0.075);
    --smfmc-border: rgba(255, 255, 255, 0.12);
    --smfmc-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#smfmc-event-editor,
#smfmc-event-editor *,
#smfmc-event-editor *::before,
#smfmc-event-editor *::after {
    box-sizing: border-box;
}

#smfmc-event-editor .smfmc-icon {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

#smfmc-event-editor .smfmc-editor-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 24px;
    align-items: center;
    padding: 18px 20px;
    margin: 0 0 14px;
    background: var(--smfmc-surface);
    border: 1px solid var(--smfmc-border);
    border-radius: 12px;
    box-shadow: var(--smfmc-shadow);
}

#smfmc-event-editor .smfmc-editor-back {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    max-width: 100%;
    color: var(--smfmc-muted);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 650;
}

#smfmc-event-editor .smfmc-editor-back:hover,
#smfmc-event-editor .smfmc-editor-back:focus-visible,
#smfmc-event-editor .smfmc-editor-footer a:hover,
#smfmc-event-editor .smfmc-editor-footer a:focus-visible {
    color: var(--smfmc-accent);
}

#smfmc-event-editor .smfmc-editor-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

#smfmc-event-editor .smfmc-editor-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    color: var(--smfmc-accent-text);
    background: var(--smfmc-accent);
    flex: 0 0 auto;
}

#smfmc-event-editor .smfmc-editor-heading h1 {
    margin: 0;
    color: var(--smfmc-text);
    font: inherit;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 760;
    line-height: 1.15;
}

#smfmc-event-editor .smfmc-editor-heading p {
    max-width: 720px;
    margin: 5px 0 0;
    color: var(--smfmc-muted);
    font-size: 0.86rem;
}

#smfmc-event-editor .smfmc-editor-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 165px;
    padding: 10px 12px;
    border: 1px solid var(--smfmc-border);
    border-radius: 10px;
    background: var(--smfmc-panel);
}

#smfmc-event-editor .smfmc-editor-summary > span {
    display: grid;
    min-width: 0;
}

#smfmc-event-editor .smfmc-editor-summary small {
    color: var(--smfmc-muted);
    font-size: 0.68rem;
}

#smfmc-event-editor .smfmc-editor-summary strong {
    overflow: hidden;
    color: var(--smfmc-text);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-event-editor .smfmc-editor-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    margin: 0 0 12px;
    color: #8b1e1e;
    border: 1px solid rgba(180, 35, 24, 0.25);
    border-radius: 9px;
    background: rgba(180, 35, 24, 0.07);
}

#smfmc-event-editor.smfmc-is-dark .smfmc-editor-alert {
    color: #ffb4aa;
    background: rgba(255, 110, 95, 0.08);
}

#smfmc-event-editor .smfmc-native-event-form {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--smfmc-border);
    border-radius: 12px;
    background: var(--smfmc-surface);
    box-shadow: var(--smfmc-shadow);
}

/* Keep SMF's native event form and field names, but neutralise theme-specific
   card geometry inside our isolated wrapper. */
#smfmc-event-editor .smfmc-native-event-form form,
#smfmc-event-editor .smfmc-native-event-form #post_event {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

#smfmc-event-editor .smfmc-native-event-form #post_event > .cat_bar {
    display: none;
}

#smfmc-event-editor .smfmc-native-event-form #post_event > .roundframe {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 18px;
    color: var(--smfmc-text);
    border: 0;
    border-radius: 0;
    background: var(--smfmc-surface);
    box-shadow: none;
}

#smfmc-event-editor .smfmc-native-event-form fieldset {
    min-width: 0;
    margin: 0 0 17px;
    padding: 14px;
    border: 1px solid var(--smfmc-border);
    border-radius: 10px;
    background: var(--smfmc-panel);
}

#smfmc-event-editor .smfmc-native-event-form legend {
    padding: 0 7px;
    color: var(--smfmc-text);
    font-weight: 740;
}

#smfmc-event-editor .smfmc-native-event-form .event_options_left,
#smfmc-event-editor .smfmc-native-event-form .event_options_right,
#smfmc-event-editor .smfmc-native-event-form #event_time_input,
#smfmc-event-editor .smfmc-native-event-form #event_time_options {
    min-width: 0;
    max-width: 100%;
}

#smfmc-event-editor .smfmc-native-event-form input[type="text"],
#smfmc-event-editor .smfmc-native-event-form input[type="date"],
#smfmc-event-editor .smfmc-native-event-form input[type="time"],
#smfmc-event-editor .smfmc-native-event-form select,
#smfmc-event-editor .smfmc-native-event-form textarea {
    min-width: 0;
    max-width: 100%;
    min-height: 38px;
    padding: 7px 9px;
    color: var(--smfmc-text);
    border: 1px solid var(--smfmc-border);
    border-radius: 7px;
    background: var(--smfmc-surface);
    font: inherit;
}

#smfmc-event-editor .smfmc-native-event-form #evtitle,
#smfmc-event-editor .smfmc-native-event-form #event_location {
    width: min(100%, 680px);
}

#smfmc-event-editor .smfmc-native-event-form select {
    width: auto;
}

#smfmc-event-editor .smfmc-native-event-form input:focus,
#smfmc-event-editor .smfmc-native-event-form select:focus,
#smfmc-event-editor .smfmc-native-event-form textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--smfmc-accent) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--smfmc-accent);
}

#smfmc-event-editor .smfmc-native-event-form .label {
    color: var(--smfmc-muted);
    font-weight: 650;
}

#smfmc-event-editor .smfmc-native-event-form input.button,
#smfmc-event-editor .smfmc-native-event-form button.button {
    min-height: 38px;
    padding: 8px 14px;
    margin: 0 6px 0 0;
    color: var(--smfmc-accent-text);
    border: 1px solid var(--smfmc-accent);
    border-radius: 8px;
    background: var(--smfmc-accent);
    box-shadow: none;
    font: inherit;
    font-weight: 720;
    cursor: pointer;
}

#smfmc-event-editor .smfmc-native-event-form input.button[name="deleteevent"] {
    color: #a1261e;
    border-color: rgba(180, 35, 24, 0.25);
    background: rgba(180, 35, 24, 0.07);
}

#smfmc-event-editor.smfmc-is-dark .smfmc-native-event-form input.button[name="deleteevent"] {
    color: #ffb4aa;
}

#smfmc-event-editor .smfmc-native-event-form .errorbox {
    margin: 14px 18px 0;
    border-radius: 9px;
}

#smfmc-event-editor .smfmc-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 3px 0;
    color: var(--smfmc-muted);
    font-size: 0.78rem;
}

#smfmc-event-editor .smfmc-editor-footer a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

#smfmc-event-editor.smfmc-width-narrow .smfmc-editor-header,
#smfmc-event-editor.smfmc-width-compact .smfmc-editor-header {
    grid-template-columns: 1fr;
    align-items: stretch;
}

#smfmc-event-editor.smfmc-width-narrow .smfmc-editor-summary,
#smfmc-event-editor.smfmc-width-compact .smfmc-editor-summary {
    width: 100%;
}

#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form #post_event > .roundframe,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form #post_event > .roundframe {
    padding: 12px;
}

#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form fieldset,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form fieldset {
    padding: 11px;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-editor-heading {
    align-items: flex-start;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-editor-icon {
    width: 36px;
    height: 36px;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-editor-footer {
    align-items: flex-start;
    flex-direction: column;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input[type="date"],
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input[type="time"],
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form select,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input.button {
    width: 100%;
    margin: 4px 0;
}

/* -------------------------------------------------------------------------
   Phase 12: responsive and mobile/tablet hardening.
   ------------------------------------------------------------------------- */
#smfmc-calendar.smfmc-root,
#smfmc-event-editor.smfmc-event-editor-root {
    max-inline-size: 100%;
    min-inline-size: 0;
}

#smfmc-calendar .smfmc-card,
#smfmc-calendar .smfmc-layout,
#smfmc-calendar .smfmc-main,
#smfmc-calendar .smfmc-left,
#smfmc-calendar .smfmc-right,
#smfmc-event-editor .smfmc-editor-header,
#smfmc-event-editor .smfmc-native-event-form {
    min-inline-size: 0;
    max-inline-size: 100%;
}

/* Make the month grid the only intentional horizontal scroller on phones.
   This prevents long theme content, event names or portal wrappers from
   widening the document itself. */
#smfmc-calendar.smfmc-width-compact .smfmc-month-card {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
    touch-action: pan-x pan-y;
}

#smfmc-calendar.smfmc-width-compact .smfmc-month-weekdays,
#smfmc-calendar.smfmc-width-compact .smfmc-month-grid {
    min-width: 630px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-day {
    min-height: 104px;
    padding: 6px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-page-header {
    gap: 13px;
    padding: 13px;
    margin-bottom: 10px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-page-title {
    width: 100%;
    min-width: 0;
}

#smfmc-calendar.smfmc-width-compact .smfmc-title-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
    width: 100%;
}

#smfmc-calendar.smfmc-width-compact .smfmc-summary-card,
#smfmc-calendar.smfmc-width-compact .smfmc-next-event {
    width: auto;
    min-width: 0;
}

#smfmc-calendar.smfmc-width-compact .smfmc-post-event {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

#smfmc-calendar.smfmc-width-compact .smfmc-toolbar {
    gap: 8px;
    min-width: 0;
    padding: 8px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-period-controls,
#smfmc-calendar.smfmc-width-compact .smfmc-view-tabs {
    min-width: 0;
}

#smfmc-calendar.smfmc-width-compact .smfmc-view-tab {
    min-width: 0;
    padding-inline: 7px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-view-tab span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#smfmc-calendar.smfmc-width-compact .smfmc-right,
#smfmc-calendar.smfmc-width-compact .smfmc-upcoming,
#smfmc-calendar.smfmc-width-compact .smfmc-actions {
    min-width: 0;
    max-width: 100%;
}

#smfmc-calendar.smfmc-width-compact .smfmc-upcoming-item {
    grid-template-columns: 44px minmax(0, 1fr) 12px;
    gap: 8px;
    padding-inline: 9px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-upcoming-meta span,
#smfmc-calendar.smfmc-width-compact .smfmc-source-chip span,
#smfmc-calendar.smfmc-width-compact .smfmc-action-link small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Phone Agenda becomes a stacked date header + items layout instead of
   sacrificing most of the content width to a permanent date rail. */
@media (max-width: 430px) {
    #smfmc-calendar.smfmc-width-compact .smfmc-agenda-group {
        grid-template-columns: minmax(0, 1fr);
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-agenda-date {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        gap: 8px;
        padding: 8px 10px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--smfmc-border);
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-agenda-count {
        grid-column: 2;
        margin: 0;
        text-align: start;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-agenda-date > time {
        width: 45px;
        min-width: 45px;
        grid-row: 1 / span 2;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-agenda-item {
        padding: 9px;
    }
}

@media (max-width: 380px) {
    #smfmc-calendar.smfmc-width-compact .smfmc-page-header {
        padding: 11px;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-page-title {
        gap: 9px;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-page-title p {
        font-size: 0.78rem;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-summary-card {
        padding-inline: 9px;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-today-button {
        width: 36px;
        padding-inline: 0;
        font-size: 0;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-today-button .smfmc-icon {
        width: 15px;
        height: 15px;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-view-tab {
        gap: 3px;
        padding-inline: 5px;
        font-size: 0.7rem;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-month-weekdays,
    #smfmc-calendar.smfmc-width-compact .smfmc-month-grid {
        min-width: 602px;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-week-day {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-week-date,
    #smfmc-calendar.smfmc-width-compact .smfmc-week-content {
        padding: 8px 7px;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-upcoming-item {
        grid-template-columns: 42px minmax(0, 1fr) 10px;
        gap: 7px;
        padding-inline: 8px;
    }
}

/* Neutralise common float/width assumptions from third-party themes inside
   the native event form once the editor is constrained. */
#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form .event_options_left,
#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form .event_options_right,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form .event_options_left,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form .event_options_right {
    float: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-editor-header {
    gap: 12px;
    padding: 13px;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-editor-heading {
    min-width: 0;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-editor-heading > div:last-child {
    min-width: 0;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-editor-heading h1,
#smfmc-event-editor.smfmc-width-compact .smfmc-editor-heading p {
    overflow-wrap: anywhere;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form #event_time_input > div,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form #event_time_options > div {
    min-width: 0;
    max-width: 100%;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input[type="text"],
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input[type="date"],
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input[type="time"],
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form select,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form textarea,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input.button {
    inline-size: 100%;
    max-inline-size: 100%;
}

/* Touch devices get larger primary controls without forcing the 7-column mini
   calendars to become wider than a small phone. */
@media (hover: none), (pointer: coarse) {
    #smfmc-calendar .smfmc-post-event,
    #smfmc-calendar .smfmc-today-button,
    #smfmc-calendar .smfmc-view-tab,
    #smfmc-calendar .smfmc-action-link,
    #smfmc-calendar .smfmc-section-link,
    #smfmc-calendar .smfmc-filter,
    #smfmc-calendar .smfmc-more-button,
    #smfmc-event-editor .smfmc-editor-back,
    #smfmc-event-editor .smfmc-native-event-form input.button {
        min-height: 44px;
    }

    #smfmc-calendar .smfmc-icon-button,
    #smfmc-calendar .smfmc-item-action,
    #smfmc-calendar .smfmc-agenda-actions a,
    #smfmc-calendar .smfmc-week-add {
        min-width: 40px;
        min-height: 40px;
    }
}

/* Landscape phones are short rather than especially narrow. Keep the header
   economical so the actual calendar appears without excessive scrolling. */
#smfmc-calendar[data-smfmc-orientation="landscape"].smfmc-width-compact .smfmc-page-header {
    padding-block: 10px;
}

#smfmc-calendar[data-smfmc-orientation="landscape"].smfmc-width-compact .smfmc-page-title p {
    display: none;
}

@supports (padding: max(0px)) {
    #smfmc-calendar.smfmc-width-compact,
    #smfmc-event-editor.smfmc-width-compact {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}


/* Windows High Contrast / forced-colours support: retain structure and state
   without relying on theme-derived background colours. */
@media (forced-colors: active) {
    #smfmc-calendar .smfmc-card,
    #smfmc-calendar .smfmc-day,
    #smfmc-calendar .smfmc-week-day,
    #smfmc-calendar .smfmc-agenda-group,
    #smfmc-event-editor .smfmc-editor-header,
    #smfmc-event-editor .smfmc-native-event-form .roundframe {
        border-color: CanvasText;
        box-shadow: none;
    }

    #smfmc-calendar .is-active,
    #smfmc-calendar .is-selected,
    #smfmc-calendar .is-today,
    #smfmc-calendar [aria-current="page"],
    #smfmc-calendar [aria-current="date"] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    #smfmc-calendar .smfmc-filter-dot,
    #smfmc-calendar .smfmc-mini-marker {
        forced-color-adjust: none;
        background: Highlight;
    }

    #smfmc-calendar .smfmc-skip-link,
    #smfmc-event-editor .smfmc-skip-link {
        color: HighlightText;
        background: Highlight;
        forced-color-adjust: none;
    }
}

/* Phase 14 — portal and third-party theme compatibility shield.
   These rules deliberately target only Modern Calendar-owned controls/content.
   They neutralise common global theme assumptions without changing SMF's
   surrounding header, navigation, portal blocks or unrelated forum markup. */
#smfmc-calendar.smfmc-root,
#smfmc-event-editor.smfmc-event-editor-root {
    position: relative;
    float: none !important;
    clear: both;
    inline-size: 100%;
    max-inline-size: 100%;
    margin-inline: 0;
    text-align: start;
    direction: inherit;
}

#smfmc-calendar .smfmc-page-title h1,
#smfmc-calendar .smfmc-page-title p,
#smfmc-calendar .smfmc-section-title,
#smfmc-calendar .smfmc-section-heading h2,
#smfmc-calendar .smfmc-mini-month h3,
#smfmc-calendar .smfmc-period-title,
#smfmc-calendar .smfmc-view-title,
#smfmc-event-editor .smfmc-editor-heading h1,
#smfmc-event-editor .smfmc-editor-heading p,
#smfmc-event-editor .smfmc-native-event-form legend {
    font-family: inherit;
    font-style: normal;
    text-transform: none;
}

#smfmc-calendar button.smfmc-filter,
#smfmc-calendar button.smfmc-more-button,
#smfmc-calendar .smfmc-agenda-range button,
#smfmc-calendar a.smfmc-post-event,
#smfmc-calendar a.smfmc-icon-button,
#smfmc-calendar a.smfmc-today-button,
#smfmc-calendar a.smfmc-view-tab,
#smfmc-calendar a.smfmc-action-link,
#smfmc-calendar a.smfmc-section-link,
#smfmc-calendar a.smfmc-week-add,
#smfmc-calendar a.smfmc-item-action,
#smfmc-calendar .smfmc-agenda-actions a {
    -webkit-appearance: none;
    appearance: none;
    float: none !important;
    max-inline-size: 100%;
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    text-shadow: none;
}

#smfmc-calendar button.smfmc-filter,
#smfmc-calendar button.smfmc-more-button,
#smfmc-calendar .smfmc-agenda-range button {
    cursor: pointer;
}

#smfmc-calendar .smfmc-mobile-fold > summary {
    list-style: none;
    font-family: inherit;
    text-transform: none;
}

#smfmc-calendar .smfmc-mobile-fold > summary::-webkit-details-marker {
    display: none;
}

/* Late or aggressive themes sometimes force links to remain on one line. Only
   the compact toolbar controls should be nowrap; content titles/metadata must
   remain able to wrap inside a portal column. */
#smfmc-calendar .smfmc-upcoming-body > strong,
#smfmc-calendar .smfmc-upcoming-meta,
#smfmc-calendar .smfmc-agenda-title,
#smfmc-calendar .smfmc-agenda-meta,
#smfmc-calendar .smfmc-week-content,
#smfmc-calendar .smfmc-item-location,
#smfmc-calendar .smfmc-action-link small,
#smfmc-calendar .smfmc-section-link {
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Keep hostile global form rules from widening the modern Agenda range form. */
#smfmc-calendar .smfmc-agenda-range,
#smfmc-calendar .smfmc-agenda-range label,
#smfmc-calendar .smfmc-agenda-range input,
#smfmc-calendar .smfmc-agenda-range button {
    float: none !important;
    min-inline-size: 0;
    max-inline-size: 100%;
}

#smfmc-calendar .smfmc-agenda-range input,
#smfmc-event-editor .smfmc-native-event-form input,
#smfmc-event-editor .smfmc-native-event-form select,
#smfmc-event-editor .smfmc-native-event-form textarea,
#smfmc-event-editor .smfmc-native-event-form button {
    font-family: inherit;
}

/* Native event fields keep their names/actions and normal wide-screen SMF
   structure. In constrained portal/theme columns, geometry wins over theme
   floats/fixed widths so the form remains usable. */
#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form .event_options_left,
#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form .event_options_right,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form .event_options_left,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form .event_options_right {
    float: none !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin-inline: 0 !important;
}

#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form input[type="text"],
#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form input[type="date"],
#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form input[type="time"],
#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form select,
#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form textarea,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input[type="text"],
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input[type="date"],
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input[type="time"],
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form select,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form textarea {
    max-inline-size: 100% !important;
}

#smfmc-calendar .smfmc-card,
#smfmc-calendar .smfmc-day,
#smfmc-calendar .smfmc-week-day,
#smfmc-calendar .smfmc-agenda-group,
#smfmc-event-editor .smfmc-editor-header,
#smfmc-event-editor .smfmc-native-event-form {
    background-image: none;
}

/* When a theme itself is image/gradient-backed, JS samples the real painted
   theme surface and writes solid accessible Modern Calendar variables. This
   local solid background prevents inherited theme images from leaking into
   calendar cards and reducing text contrast. */
#smfmc-calendar.smfmc-theme-ready,
#smfmc-event-editor.smfmc-theme-ready {
    background-image: none;
}

@supports not (container-type: inline-size) {
    /* JavaScript width classes remain the compatibility source of truth in
       browsers without container queries. */
    #smfmc-calendar.smfmc-width-narrow .smfmc-layout,
    #smfmc-calendar.smfmc-width-compact .smfmc-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Critical geometry is intentionally important: a small number of commercial
   themes apply global !important box sizing/floats/field widths. Limiting the
   override to Modern Calendar's own root prevents collateral theme changes. */
#smfmc-calendar.smfmc-root,
#smfmc-calendar [class^="smfmc-"],
#smfmc-calendar [class*=" smfmc-"],
#smfmc-event-editor,
#smfmc-event-editor *,
#smfmc-event-editor *::before,
#smfmc-event-editor *::after {
    box-sizing: border-box !important;
}

#smfmc-calendar .smfmc-agenda-range input,
#smfmc-calendar .smfmc-agenda-range button {
    max-inline-size: 100% !important;
}

#smfmc-event-editor .smfmc-native-event-form #post_event > .roundframe {
    float: none !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    margin: 0 !important;
}

/* Raise specificity above portal-wide `#wrapper * { ... !important; }` resets. */
#smfmc-event-editor.smfmc-event-editor-root,
#smfmc-event-editor.smfmc-event-editor-root *,
#smfmc-event-editor.smfmc-event-editor-root *::before,
#smfmc-event-editor.smfmc-event-editor-root *::after {
    box-sizing: border-box !important;
}

#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form input.button,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input.button,
#smfmc-event-editor.smfmc-width-narrow .smfmc-native-event-form button.button,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form button.button {
    max-inline-size: 100% !important;
}

#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form input.button,
#smfmc-event-editor.smfmc-width-compact .smfmc-native-event-form button.button {
    inline-size: 100% !important;
}

/* Phase 20 RC2 — universal-theme geometry fallback.
   A conforming SMF theme should not need these rules, but some third-party
   themes apply broad element-level !important rules. Keep the modification
   measurable and contained without changing anything outside its own roots. */
#smfmc-calendar.smfmc-root,
#smfmc-event-editor.smfmc-event-editor-root {
    display: block !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    overflow: visible !important;
}

#smfmc-calendar [class^="smfmc-"],
#smfmc-calendar [class*=" smfmc-"],
#smfmc-event-editor [class^="smfmc-"],
#smfmc-event-editor [class*=" smfmc-"] {
    min-inline-size: 0;
}

/* Themes occasionally force all links/buttons to inherit floats or fixed
   dimensions. Modern Calendar controls must remain in their own layout flow. */
#smfmc-calendar a[class^="smfmc-"],
#smfmc-calendar a[class*=" smfmc-"],
#smfmc-calendar button[class^="smfmc-"],
#smfmc-calendar button[class*=" smfmc-"] {
    float: none !important;
}

/* Native event form fields remain native SMF controls; only prevent a theme's
   fixed dimensions from exceeding the editor wrapper at any width. */
#smfmc-event-editor .smfmc-native-event-form input,
#smfmc-event-editor .smfmc-native-event-form select,
#smfmc-event-editor .smfmc-native-event-form textarea,
#smfmc-event-editor .smfmc-native-event-form button {
    max-inline-size: 100% !important;
}

/* -------------------------------------------------------------------------
   Phase 15: performance and failure-mode hardening.
   ------------------------------------------------------------------------- */
/* If JavaScript is blocked or fails before initialisation, never hide native
   calendar information behind controls that cannot be operated. The complete
   day remains readable and the client-only filter card is removed. */
#smfmc-calendar:not(.smfmc-js-ready) .smfmc-extra-item {
    display: grid;
}

#smfmc-calendar:not(.smfmc-js-ready) .smfmc-more-button,
#smfmc-calendar:not(.smfmc-js-ready) .smfmc-filter-card {
    display: none !important;
}

/* Large Week/Agenda views can contain hundreds of rows. Let supporting browsers
   skip off-screen layout/paint work while retaining the full DOM and a normal
   fallback in browsers that do not implement content-visibility. */
@supports (content-visibility: auto) {
    #smfmc-calendar .smfmc-week-day,
    #smfmc-calendar .smfmc-agenda-group {
        content-visibility: auto;
        contain-intrinsic-size: auto 112px;
    }
}

/* -------------------------------------------------------------------------
   RC4 live UI polish hotfix 2.
   Derived from real Poetry & Art! Online / TinyPortal rendering at the
   site's constrained desktop content width. These are package-scoped only.
   ------------------------------------------------------------------------- */

/* Give the centre calendar more room in the common portal-width desktop
   layout without forcing the third rail beside the grid. */
#smfmc-calendar.smfmc-width-medium .smfmc-layout {
    grid-template-columns: minmax(168px, 188px) minmax(0, 1fr);
    gap: 12px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-left-inner,
#smfmc-calendar.smfmc-width-medium .smfmc-right {
    gap: 12px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-right {
    grid-template-columns: minmax(0, 1.45fr) minmax(235px, 0.75fr);
}

/* Header: make the information block feel intentional at portal widths,
   rather than allowing three utility cards to wrap at arbitrary points. */
#smfmc-calendar.smfmc-width-medium .smfmc-page-header {
    gap: 16px;
    padding: 15px 16px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-page-title {
    min-width: 215px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-summary {
    display: grid;
    grid-template-columns: minmax(110px, 0.82fr) minmax(165px, 1.18fr);
    gap: 7px;
    width: min(100%, 355px);
    flex: 0 1 355px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-summary-card,
#smfmc-calendar.smfmc-width-medium .smfmc-post-event {
    min-width: 0;
    min-height: 46px;
    padding: 8px 10px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-next-event {
    width: auto;
}

#smfmc-calendar.smfmc-width-medium .smfmc-post-event {
    grid-column: 1 / -1;
    justify-content: center;
}

#smfmc-calendar .smfmc-next-event small {
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* The screenshot showed too much vertical dead space on an empty month.
   Retain enough room for normal event density while shortening the page. */
#smfmc-calendar .smfmc-day {
    min-height: 102px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-day {
    min-height: 92px;
    padding: 6px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-toolbar {
    min-height: 56px;
    padding-block: 7px;
}

/* The blue date circle already identifies Today. Hiding the tiny text chip
   at this intermediate width prevents the visible "To..." truncation. */
#smfmc-calendar.smfmc-width-medium .smfmc-today-chip,
#smfmc-calendar.smfmc-width-medium .smfmc-selected-chip {
    display: none;
}

/* Slightly tighten the mini calendars so the left rail supports the main
   calendar rather than visually competing with it. */
#smfmc-calendar.smfmc-width-medium .smfmc-mini-month {
    padding: 9px 10px 10px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-mini-month h3 {
    margin-bottom: 6px;
}

/* Keep the lower information rail visually aligned and denser. */
#smfmc-calendar.smfmc-width-medium .smfmc-upcoming-item {
    padding-block: 8px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-action-link {
    padding-block: 8px;
}

/* No-JS / viewport fallback for the same desktop portal-width range. */
@media (min-width: 981px) and (max-width: 1220px) {
    #smfmc-calendar:not(.smfmc-width-wide):not(.smfmc-width-narrow):not(.smfmc-width-compact) .smfmc-layout {
        grid-template-columns: minmax(168px, 188px) minmax(0, 1fr);
        gap: 12px;
    }

    #smfmc-calendar:not(.smfmc-width-wide):not(.smfmc-width-narrow):not(.smfmc-width-compact) .smfmc-day {
        min-height: 92px;
    }
}


/* -------------------------------------------------------------------------
   RC4 live UI polish hotfix 3.
   Real-site follow-up: remove the medium-layout dead band beneath the month
   grid and protect the header Post Event foreground from theme <strong>
   colour rules. Package-scoped only; no theme files are modified.
   ------------------------------------------------------------------------- */

/* At the two-column portal width the left rail is often taller than the month
   grid. Previously the lower rail occupied a new full-width grid row, so CSS
   Grid waited for the taller left column and left a conspicuous empty band
   beneath the calendar. Let the left rail span both rows instead, while the
   Coming up / Quick actions rail follows the main calendar immediately. */
#smfmc-calendar.smfmc-width-medium .smfmc-layout {
    grid-template-areas:
        "smfmc-left smfmc-main"
        "smfmc-left smfmc-right";
    align-items: start;
}

#smfmc-calendar.smfmc-width-medium .smfmc-left {
    grid-area: smfmc-left;
}

#smfmc-calendar.smfmc-width-medium .smfmc-main {
    grid-area: smfmc-main;
}

#smfmc-calendar.smfmc-width-medium .smfmc-right {
    grid-area: smfmc-right;
    grid-column: auto;
    align-self: start;
    margin-top: 0;
}

/* A number of SMF themes give strong/link descendants their own foreground
   colour. Keep every part of the package-owned blue CTA on the contrast colour
   already calculated for the active theme. */
#smfmc-calendar a.smfmc-post-event,
#smfmc-calendar a.smfmc-post-event:link,
#smfmc-calendar a.smfmc-post-event:visited,
#smfmc-calendar a.smfmc-post-event:hover,
#smfmc-calendar a.smfmc-post-event:focus-visible,
#smfmc-calendar a.smfmc-post-event strong,
#smfmc-calendar a.smfmc-post-event small,
#smfmc-calendar a.smfmc-post-event svg {
    color: var(--smfmc-accent-text) !important;
}

#smfmc-calendar a.smfmc-post-event {
    text-decoration: none !important;
}

/* No-JS / before-width-class fallback for the same constrained desktop range. */
@media (min-width: 981px) and (max-width: 1220px) {
    #smfmc-calendar:not(.smfmc-width-wide):not(.smfmc-width-medium):not(.smfmc-width-narrow):not(.smfmc-width-compact) .smfmc-layout {
        grid-template-areas:
            "smfmc-left smfmc-main"
            "smfmc-left smfmc-right";
    }

    #smfmc-calendar:not(.smfmc-width-wide):not(.smfmc-width-medium):not(.smfmc-width-narrow):not(.smfmc-width-compact) .smfmc-left {
        grid-area: smfmc-left;
    }

    #smfmc-calendar:not(.smfmc-width-wide):not(.smfmc-width-medium):not(.smfmc-width-narrow):not(.smfmc-width-compact) .smfmc-main {
        grid-area: smfmc-main;
    }

    #smfmc-calendar:not(.smfmc-width-wide):not(.smfmc-width-medium):not(.smfmc-width-narrow):not(.smfmc-width-compact) .smfmc-right {
        grid-area: smfmc-right;
        grid-column: auto;
    }
}

/* -------------------------------------------------------------------------
   Daily View Phase 2: dedicated single-day presentation.
   The data still comes from SMF's native Week context; this section is only
   presentation and remains theme-derived through the existing CSS variables.
   ------------------------------------------------------------------------- */
#smfmc-calendar .smfmc-day-view-card {
    min-width: 0;
    overflow: hidden;
}

#smfmc-calendar .smfmc-day-hero {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    border-bottom: 1px solid var(--smfmc-border);
    background: color-mix(in srgb, var(--smfmc-accent) 3%, var(--smfmc-surface));
}

#smfmc-calendar .smfmc-day-date-badge {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 132px;
    padding: 14px 10px;
    border-inline-end: 1px solid var(--smfmc-border);
    background: color-mix(in srgb, var(--smfmc-accent) 8%, var(--smfmc-panel));
    text-align: center;
}

#smfmc-calendar .smfmc-day-date-badge > span {
    color: var(--smfmc-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1.1;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-day-date-badge > strong {
    margin: 4px 0 2px;
    color: var(--smfmc-text);
    font-size: 2.55rem;
    font-weight: 760;
    line-height: 1;
}

#smfmc-calendar .smfmc-day-date-badge > small {
    max-width: 100%;
    overflow: hidden;
    color: var(--smfmc-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#smfmc-calendar .smfmc-day-hero-copy {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    padding: 18px 20px;
}

#smfmc-calendar .smfmc-day-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--smfmc-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-day-state {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    color: var(--smfmc-accent);
    border: 1px solid color-mix(in srgb, var(--smfmc-accent) 30%, var(--smfmc-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--smfmc-accent) 7%, transparent);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.025em;
}

#smfmc-calendar .smfmc-day-state.is-today {
    color: var(--smfmc-accent-text);
    border-color: var(--smfmc-accent);
    background: var(--smfmc-accent);
}

#smfmc-calendar .smfmc-day-hero-copy h3 {
    min-width: 0;
    margin: 0;
    color: var(--smfmc-text);
    font-size: clamp(1.08rem, 2.2vw, 1.38rem);
    font-weight: 760;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

#smfmc-calendar .smfmc-day-hero-copy > p {
    margin: 0;
    color: var(--smfmc-muted);
    font-size: 0.72rem;
    line-height: 1.4;
}

#smfmc-calendar .smfmc-day-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

#smfmc-calendar .smfmc-day-total {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 4px 8px;
    color: var(--smfmc-muted);
    border: 1px solid var(--smfmc-border);
    border-radius: 999px;
    background: var(--smfmc-panel);
    font-size: 0.63rem;
    line-height: 1;
}

#smfmc-calendar .smfmc-day-total > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--smfmc-event);
}

#smfmc-calendar .smfmc-day-total.is-birthday > i { background: var(--smfmc-birthday); }
#smfmc-calendar .smfmc-day-total.is-holiday > i { background: var(--smfmc-holiday); }

#smfmc-calendar .smfmc-day-total > strong {
    color: var(--smfmc-text);
    font-size: 0.67rem;
}

#smfmc-calendar .smfmc-day-post {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 9px;
    min-width: 156px;
    margin: 16px 16px 16px 0;
    padding: 10px 12px;
    color: var(--smfmc-accent-text);
    border-radius: 9px;
    background: var(--smfmc-accent);
    text-decoration: none;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--smfmc-accent) 18%, transparent);
}

#smfmc-calendar .smfmc-day-post:hover,
#smfmc-calendar .smfmc-day-post:focus-visible {
    color: var(--smfmc-accent-text);
    filter: brightness(1.04);
}

#smfmc-calendar .smfmc-day-post:focus-visible {
    outline: 2px solid var(--smfmc-accent);
    outline-offset: 3px;
}

#smfmc-calendar .smfmc-day-post .smfmc-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

#smfmc-calendar .smfmc-day-post > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

#smfmc-calendar .smfmc-day-post strong {
    font-size: 0.73rem;
    line-height: 1.2;
}

#smfmc-calendar .smfmc-day-post small {
    opacity: 0.82;
    font-size: 0.6rem;
    line-height: 1.25;
}

#smfmc-calendar .smfmc-day-schedule {
    min-width: 0;
    padding: 14px 16px 17px;
    background: var(--smfmc-surface);
}

#smfmc-calendar .smfmc-day-schedule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin-bottom: 10px;
}

#smfmc-calendar .smfmc-day-schedule-head > div {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

#smfmc-calendar .smfmc-day-schedule-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    color: var(--smfmc-accent);
    border: 1px solid color-mix(in srgb, var(--smfmc-accent) 20%, var(--smfmc-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--smfmc-accent) 6%, var(--smfmc-panel));
}

#smfmc-calendar .smfmc-day-schedule-icon .smfmc-icon {
    width: 15px;
    height: 15px;
}

#smfmc-calendar .smfmc-day-schedule-head > div > div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

#smfmc-calendar .smfmc-day-schedule-head > div > div > span {
    color: var(--smfmc-muted);
    font-size: 0.59rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

#smfmc-calendar .smfmc-day-schedule-head h4 {
    margin: 0;
    color: var(--smfmc-text);
    font-size: 0.88rem;
    line-height: 1.2;
}

#smfmc-calendar .smfmc-day-count {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid var(--smfmc-border);
    border-radius: 999px;
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-day-schedule .smfmc-day-items {
    gap: 7px;
    margin-top: 0;
}

#smfmc-calendar .smfmc-day-schedule .smfmc-day-items .smfmc-extra-item {
    display: grid;
}

#smfmc-calendar .smfmc-day-schedule .smfmc-more-button {
    display: none !important;
}

#smfmc-calendar .smfmc-day-schedule .smfmc-item-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
}

#smfmc-calendar .smfmc-day-schedule .smfmc-item {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--smfmc-border);
    border-radius: 9px;
    background: var(--smfmc-panel);
    font-size: 0.76rem;
    line-height: 1.3;
}

#smfmc-calendar .smfmc-day-schedule a.smfmc-item:hover,
#smfmc-calendar .smfmc-day-schedule a.smfmc-item:focus-visible {
    border-color: color-mix(in srgb, var(--smfmc-accent) 30%, var(--smfmc-border));
    background: var(--smfmc-panel-2);
}

#smfmc-calendar .smfmc-day-schedule .smfmc-item small {
    margin-top: 2px;
    font-size: 0.66rem;
}

#smfmc-calendar .smfmc-day-schedule .smfmc-item-actions {
    padding-top: 10px;
}

#smfmc-calendar .smfmc-day-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    padding: 22px;
    color: var(--smfmc-muted);
    background: var(--smfmc-surface);
    text-align: left;
}

#smfmc-calendar .smfmc-day-empty-state.is-inline {
    justify-content: flex-start;
    min-height: 76px;
    padding: 14px;
    border: 1px dashed var(--smfmc-border);
    border-radius: 9px;
    background: var(--smfmc-panel);
}

#smfmc-calendar .smfmc-day-empty-state[hidden] {
    display: none !important;
}

#smfmc-calendar .smfmc-day-empty-state > .smfmc-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--smfmc-accent);
}

#smfmc-calendar .smfmc-day-empty-state > div {
    display: grid;
    gap: 2px;
}

#smfmc-calendar .smfmc-day-empty-state strong {
    color: var(--smfmc-text);
    font-size: 0.78rem;
}

#smfmc-calendar .smfmc-day-empty-state span {
    font-size: 0.68rem;
    line-height: 1.35;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-day-hero,
#smfmc-calendar.smfmc-width-compact .smfmc-day-hero {
    grid-template-columns: 86px minmax(0, 1fr);
}

#smfmc-calendar.smfmc-width-narrow .smfmc-day-date-badge,
#smfmc-calendar.smfmc-width-compact .smfmc-day-date-badge {
    min-height: 116px;
    padding-inline: 7px;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-day-date-badge > strong,
#smfmc-calendar.smfmc-width-compact .smfmc-day-date-badge > strong {
    font-size: 2.15rem;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-day-hero-copy,
#smfmc-calendar.smfmc-width-compact .smfmc-day-hero-copy {
    padding: 14px 13px;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-day-post,
#smfmc-calendar.smfmc-width-compact .smfmc-day-post {
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 9px 12px;
    border-radius: 0;
    box-shadow: none;
}

#smfmc-calendar.smfmc-width-narrow .smfmc-day-post small,
#smfmc-calendar.smfmc-width-compact .smfmc-day-post small {
    display: none;
}

#smfmc-calendar.smfmc-width-compact .smfmc-day-totals {
    gap: 4px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-day-total {
    padding-inline: 6px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-day-total > span {
    display: none;
}

#smfmc-calendar.smfmc-width-compact .smfmc-day-schedule {
    padding: 11px 9px 13px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-day-schedule-head {
    align-items: flex-start;
}

@media (max-width: 420px) {
    #smfmc-calendar.smfmc-width-compact .smfmc-day-hero {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-day-date-badge > strong {
        font-size: 1.9rem;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-day-hero-copy {
        padding: 12px 10px;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-day-schedule-head {
        gap: 7px;
    }

    #smfmc-calendar.smfmc-width-compact .smfmc-day-count {
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* -------------------------------------------------------------------------
   Phase 12 live toolbar polish.
   Gives Month / Week / Day / List controls clear breathing room without
   changing the compact/mobile collapse behaviour.
   ------------------------------------------------------------------------- */
#smfmc-calendar .smfmc-toolbar {
    gap: 16px;
    padding: 10px 12px;
}

#smfmc-calendar .smfmc-period-controls {
    gap: 10px;
}

#smfmc-calendar .smfmc-view-tabs {
    gap: 5px;
    padding: 4px;
}

#smfmc-calendar .smfmc-view-tab {
    gap: 7px;
    min-width: 78px;
    padding-inline: 12px;
}

#smfmc-calendar .smfmc-view-tab svg {
    flex: 0 0 auto;
}

#smfmc-calendar.smfmc-width-medium .smfmc-toolbar {
    gap: 12px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-view-tabs {
    gap: 3px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-view-tab {
    min-width: 72px;
    padding-inline: 9px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-toolbar,
#smfmc-calendar.smfmc-width-narrow .smfmc-toolbar {
    gap: 8px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-view-tabs,
#smfmc-calendar.smfmc-width-narrow .smfmc-view-tabs {
    gap: 2px;
    padding: 3px;
}

/* -------------------------------------------------------------------------
   Phase 14 live calendar geometry pass.
   The real PAO portal width is narrower than a full desktop canvas. Keep the
   toolbar on one useful row whenever it genuinely fits, but let the period
   title own the flexible middle column instead of allowing the view switcher
   to collide with it. Empty Month/Week/Day states are also slightly denser;
   populated content still expands naturally.
   ------------------------------------------------------------------------- */
#smfmc-calendar .smfmc-toolbar {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 9px;
    min-height: 54px;
    padding: 7px 9px;
}

#smfmc-calendar .smfmc-period-controls {
    gap: 6px;
}

#smfmc-calendar .smfmc-period-title {
    min-width: 0;
    overflow: hidden;
}

#smfmc-calendar .smfmc-view-title {
    min-width: 0;
    overflow: hidden;
    font-size: 1.06rem;
    text-overflow: ellipsis;
}

#smfmc-calendar .smfmc-view-tabs {
    gap: 2px;
    padding: 3px;
}

#smfmc-calendar .smfmc-view-tab {
    gap: 5px;
    min-width: 0;
    padding: 6px 8px;
}

/* PAO's common desktop portal width. The short Month/Week/Day/List labels
   preserve a single-row toolbar while retaining enough space for long dates. */
#smfmc-calendar.smfmc-width-medium .smfmc-toolbar,
#smfmc-calendar.smfmc-width-narrow .smfmc-toolbar {
    grid-template-columns: max-content minmax(110px, 1fr) max-content;
    gap: 7px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-view-tab,
#smfmc-calendar.smfmc-width-narrow .smfmc-view-tab {
    min-width: 0;
    padding-inline: 7px;
    font-size: 0.71rem;
}

#smfmc-calendar.smfmc-width-medium .smfmc-view-title,
#smfmc-calendar.smfmc-width-narrow .smfmc-view-title {
    font-size: 0.98rem;
}

/* Month: the narrow portal layout previously inherited a taller historical
   day-cell rule. Ninety-four pixels remains useful for real events while
   removing empty vertical padding from quiet months. */
#smfmc-calendar.smfmc-width-narrow .smfmc-day {
    min-height: 94px;
}

/* Week: empty days do not need the same vertical allowance as busy days.
   Event rows still make their parent day grow automatically when populated. */
#smfmc-calendar.smfmc-width-medium .smfmc-week-date,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-date {
    gap: 5px;
    padding: 10px 8px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-week-content,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-content {
    padding: 8px 10px 9px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-week-content-head,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-content-head {
    min-height: 14px;
    margin-bottom: 3px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-week-day-empty,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-day-empty {
    min-height: 34px;
    padding: 6px 8px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-week-date-link > strong,
#smfmc-calendar.smfmc-width-narrow .smfmc-week-date-link > strong {
    font-size: 1.5rem;
}

/* Day: keep the useful overview, but avoid a large empty hero/schedule when
   there is nothing scheduled. */
#smfmc-calendar.smfmc-width-medium .smfmc-day-date-badge,
#smfmc-calendar.smfmc-width-narrow .smfmc-day-date-badge {
    min-height: 104px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-day-hero-copy,
#smfmc-calendar.smfmc-width-narrow .smfmc-day-hero-copy {
    padding-block: 12px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-day-schedule,
#smfmc-calendar.smfmc-width-narrow .smfmc-day-schedule {
    padding: 11px 12px 13px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-day-empty-state.is-inline,
#smfmc-calendar.smfmc-width-narrow .smfmc-day-empty-state.is-inline {
    min-height: 58px;
    padding: 10px 12px;
}

/* Compact remains deliberately two-row: at phone width this is denser than
   forcing four tabs and a date title to fight for one line. */
#smfmc-calendar.smfmc-width-compact .smfmc-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-view-tabs {
    grid-column: 1 / -1;
}

/* -------------------------------------------------------------------------
   Phase 15 — cross-view density and responsive acceptance polish.
   Keep quiet calendars compact without imposing fixed heights: populated
   Month, Week and Day content can still grow naturally. The toolbar keeps one
   row while there is real room, then intentionally uses a second tab row at
   smaller container widths instead of allowing the title and view controls to
   collide.
   ------------------------------------------------------------------------- */
#smfmc-calendar .smfmc-day {
    min-height: 102px;
}

#smfmc-calendar .smfmc-week-date {
    gap: 6px;
    padding: 11px 9px;
}

#smfmc-calendar .smfmc-week-content {
    padding: 9px 11px 10px;
}

#smfmc-calendar .smfmc-week-content-head {
    min-height: 15px;
    margin-bottom: 3px;
}

#smfmc-calendar .smfmc-week-day-empty {
    min-height: 36px;
    padding: 7px 8px;
}

#smfmc-calendar .smfmc-day-date-badge {
    min-height: 118px;
    padding-block: 12px;
}

#smfmc-calendar .smfmc-day-hero-copy {
    padding: 15px 17px;
}

#smfmc-calendar .smfmc-day-post {
    margin: 13px 13px 13px 0;
}

#smfmc-calendar .smfmc-day-schedule {
    padding: 12px 14px 14px;
}

#smfmc-calendar .smfmc-day-empty-state.is-inline {
    min-height: 62px;
    padding: 11px 12px;
}

/* Retain the denser portal-width values from Phase 14. */
#smfmc-calendar.smfmc-width-narrow .smfmc-day {
    min-height: 94px;
}

#smfmc-calendar.smfmc-width-compact .smfmc-day {
    min-height: 96px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-day-date-badge,
#smfmc-calendar.smfmc-width-narrow .smfmc-day-date-badge {
    min-height: 104px;
}

#smfmc-calendar.smfmc-width-medium .smfmc-day-empty-state.is-inline,
#smfmc-calendar.smfmc-width-narrow .smfmc-day-empty-state.is-inline {
    min-height: 58px;
}

/* Root width is the reliable cross-theme measurement. Around 800px the view
   switcher is more readable as a deliberate second row than as a compressed or
   overlapping first row. Wider containers remain single-row. */
@container smfmc (max-width: 800px) {
    #smfmc-calendar .smfmc-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 7px;
    }

    #smfmc-calendar .smfmc-period-title {
        text-align: end;
    }

    #smfmc-calendar .smfmc-view-tabs {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: stretch;
    }

    #smfmc-calendar .smfmc-view-tab {
        flex: 1 1 0;
    }
}

/* -------------------------------------------------------------------------
   PAO corrective Phase 19: Day-view Post Event CTA foreground parity.
   Some SMF themes colour nested strong/small elements independently of the
   parent link. Keep the Day-view CTA text on the same contrast foreground as
   the already-correct header Post Event CTA. No geometry or layout changes.
   ------------------------------------------------------------------------- */
#smfmc-calendar a.smfmc-day-post,
#smfmc-calendar a.smfmc-day-post:link,
#smfmc-calendar a.smfmc-day-post:visited,
#smfmc-calendar a.smfmc-day-post:hover,
#smfmc-calendar a.smfmc-day-post:focus-visible,
#smfmc-calendar a.smfmc-day-post strong,
#smfmc-calendar a.smfmc-day-post small {
    color: var(--smfmc-accent-text) !important;
}