/**
 * Calendar Widget Styles
 *
 * Phase 1: mode picker + premium gating + upgrade modal + mode stubs.
 * Each mode will get its own subsection added below as it's built out.
 */

.calendar-widget-root {
    /* All accents resolve to the fleet "read/look" blue — the calendar is a
       read-the-calendar exercise (design-tokens.css: BLUE = where to read/look).
       The old indigo/teal/green/violet palette read as "a different app". */
    --cal-accent-1: var(--as-read-accent);   /* #2563eb fleet blue */
    --cal-accent-2: var(--as-read-accent);
    --cal-accent-3: var(--as-read-accent);
    --cal-accent-4: var(--as-read-accent);
    --cal-text: var(--as-text);
    --cal-text-muted: var(--as-text-muted);
    --cal-bg: var(--as-surface);
    --cal-bg-soft: var(--as-surface-soft);
    --cal-border: var(--as-border);
    --cal-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --cal-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --cal-radius: 12px;

    font-family: var(--as-font);
    color: var(--cal-text);
    line-height: 1.5;
    max-width: 760px;
    margin: 0 auto;
}

/* ==========================================================================
   Loading
   ========================================================================== */

.calendar-widget-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 16px;
    color: var(--cal-text-muted);
}
.calendar-widget-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--cal-border);
    border-top-color: var(--cal-accent-1);
    border-radius: 50%;
    animation: calendar-spin 0.8s linear infinite;
}
@keyframes calendar-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Mode picker
   ========================================================================== */

.calendar-mode-picker {
    padding: 16px 12px 24px;
}
/* Legacy/fallback only — the live title is the merged header's
   exerciseLabel (universal-header.js createExerciseLayout); this class
   renders only when that script is missing. The old __sub line
   ("Pick a mode to start") moved into the header's instruction slot. */
.calendar-mode-picker__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
    text-align: center;
    color: var(--cal-text);
}
.calendar-mode-picker__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 600px) {
    .calendar-mode-picker__grid {
        grid-template-columns: 1fr;
    }
}

.calendar-mode-tile {
    appearance: none;
    background: var(--cal-bg);
    color: var(--cal-text);
    border: 1px solid var(--cal-border);
    border-left: 4px solid var(--cal-accent-1);   /* subtle fleet-blue left accent */
    border-radius: var(--cal-radius);
    padding: 20px 16px;
    text-align: left;
    text-transform: none;        /* defeat Elementor button capitalize cascade */
    cursor: pointer;
    box-shadow: var(--cal-shadow-sm);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 150px;
    position: relative;
    font-family: inherit;
}
.calendar-mode-tile:hover,
.calendar-mode-tile:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--cal-shadow-md);
    outline: none;
}
.calendar-mode-tile.is-locked {
    background: var(--cal-bg-soft);
    cursor: pointer;
}
.calendar-mode-tile__emoji {
    font-size: 28px;
    line-height: 1;
}
.calendar-mode-tile__label {
    font-size: 17px;
    font-weight: 600;
    color: var(--cal-text);
}
.calendar-mode-tile__desc {
    font-size: 14px;
    color: var(--cal-text-muted);
    line-height: 1.4;
    flex: 1;
}
.calendar-mode-tile__lock,
.calendar-mode-tile__free {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--cal-border);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--cal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.calendar-mode-tile__free {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

/* ==========================================================================
   Mode stub (Phase 1 placeholder for unbuilt modes)
   ========================================================================== */

.calendar-mode-stub {
    padding: 16px 12px;
}
.calendar-mode-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.calendar-mode-header__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--cal-text);
}
.calendar-mode-stub__body {
    background: var(--cal-bg-soft);
    border: 2px dashed currentColor;
    border-radius: var(--cal-radius);
    padding: 32px 24px;
    text-align: center;
}
.calendar-mode-stub__emoji {
    font-size: 48px;
    margin-bottom: 12px;
    line-height: 1;
}
.calendar-mode-stub__heading {
    color: var(--cal-text);
    font-size: 18px;
    margin: 0 0 8px;
}
.calendar-mode-stub__sub {
    color: var(--cal-text-muted);
    margin: 0 0 20px;
    font-size: 14px;
}
.calendar-mode-stub__meta {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--cal-bg);
    border-radius: 8px;
    font-size: 13px;
    color: var(--cal-text-muted);
    display: inline-block;
    text-align: left;
    line-height: 1.8;
    box-shadow: var(--cal-shadow-sm);
}

/* ==========================================================================
   Buttons (shared)
   ========================================================================== */

.calendar-btn {
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;        /* defeat Elementor button capitalize cascade */
    padding: 10px 18px;
    border-radius: 8px;
    transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    line-height: 1;
}
.calendar-btn:hover {
    transform: translateY(-1px);
}
.calendar-btn--ghost {
    background: transparent;
    color: var(--cal-text-muted) !important;
    border: 1px solid var(--cal-border);
}
.calendar-btn--ghost:hover {
    background: var(--cal-bg-soft);
    color: var(--cal-text) !important;
    border-color: var(--cal-border);
}
.calendar-btn--primary {
    background: var(--cal-accent-1);
    color: #fff !important;
}
.calendar-btn--primary:hover {
    background: var(--as-read-text);   /* darker fleet blue (#1e40af) on hover */
    color: #fff !important;
}
.calendar-btn--small {
    font-size: 13px;
    padding: 6px 12px;
    min-height: 36px;
}

/* ==========================================================================
   ⚙ Options panel (merged-header settings dropdown)
   The calendar's one option is "Change mode" → back to the picker. The
   panel renders inside .te-mh-settings from universal-header.css; this
   just lays out + sizes its content (≥44px touch target).
   ========================================================================== */

.calendar-widget-root .calendar-options-panel {
    display: flex;
    justify-content: center;
}

/* Labeled settings row: "Practice mode · 👆 Calendar Skills · [Change mode]"
   — same shape as clock's gear-panel level row, so the gear panel reads as
   real settings rather than a lone floating button. */
.calendar-widget-root .calendar-options-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.calendar-widget-root .calendar-options-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.calendar-widget-root .calendar-options-current {
    font-size: 15px;
    font-weight: 600;
    color: var(--cal-text);
    background: #fff;
    border: 1px solid var(--cal-border);
    border-radius: 999px;
    padding: 8px 14px;
}

.calendar-widget-root .calendar-options-change-mode {
    min-height: 44px;
    padding: 10px 22px;
}

/* ==========================================================================
   Upgrade modal
   ========================================================================== */

.calendar-upgrade-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.calendar-upgrade-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.calendar-upgrade-modal__panel {
    position: relative;
    background: var(--cal-bg);
    border-radius: var(--cal-radius);
    padding: 24px 20px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
}
.calendar-upgrade-modal__panel h3 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--cal-text);
}
.calendar-upgrade-modal__panel p {
    margin: 0 0 20px;
    color: var(--cal-text-muted);
    line-height: 1.55;
}
.calendar-upgrade-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ==========================================================================
   Elementor preview state
   ========================================================================== */

.calendar-widget-root.elementor-preview {
    pointer-events: auto;
}

/* ==========================================================================
   PHASE 2 — Calendar day-view component (shared by modes 1, 2, 3)
   ========================================================================== */

.calendar-day-view {
    --cal-mode-accent: var(--cal-accent-1);
    background: var(--cal-bg);
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius);
    overflow: hidden;
    box-shadow: var(--cal-shadow-sm);
}

/* Week strip — 7 day cells above the day view. Doubles as navigator + tap target.
   `min-width: 0` on cells is critical so grid columns can shrink below content
   intrinsic width (otherwise the strip overflows on narrow Elementor sections). */
.calendar-week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    padding: 8px 8px 6px;
    background: var(--cal-bg);
    border-bottom: 1px solid var(--cal-border);
}
.calendar-week-strip-cell {
    appearance: none;
    background: var(--cal-bg);
    border: 1px solid var(--cal-border);
    border-radius: 7px;
    padding: 5px 2px;
    cursor: pointer;
    font-family: inherit;
    text-transform: none;
    text-align: center;
    color: var(--cal-text) !important;          /* defeat Elementor button color cascade */
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease, box-shadow 0.12s ease, color 0.12s ease;
    min-height: 46px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1;
}
.calendar-week-strip-cell:hover {
    background: var(--cal-bg-soft);
    border-color: var(--cal-mode-accent);
    color: var(--cal-text) !important;          /* hold dark text on hover */
    transform: translateY(-1px);
    box-shadow: var(--cal-shadow-sm);
}
.calendar-week-strip-cell.is-today {
    border-color: var(--cal-mode-accent);
    border-width: 1.5px;
}
.calendar-week-strip-cell.is-current,
.calendar-week-strip-cell.is-current:hover {
    background: var(--cal-mode-accent);
    color: #fff !important;
    border-color: var(--cal-mode-accent);
    box-shadow: var(--cal-shadow-sm);
}

/* "Asked about" day — Mode 2 marks the day a question is anchored to.
   Persistent green ring stays visible even when the user navigates to a
   different day, so they don't lose track of which day to answer about.
   Box-shadow (not outline) so it follows the cell's border-radius cleanly.
   Stacks with .is-current: accent fill + green ring on the same cell when
   the user is currently viewing the asked-about day. */
.calendar-week-strip-cell.is-asked,
.calendar-week-strip-cell.is-asked:hover {
    box-shadow: 0 0 0 3px #10b981, 0 1px 3px rgba(16, 185, 129, 0.25);
    position: relative;
    z-index: 2;
}
.calendar-week-strip-day {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: inherit;
    opacity: 0.85;
}
.calendar-week-strip-date {
    font-size: 15px;
    font-weight: 700;
    color: inherit;
}
.calendar-week-strip-cell.is-today:not(.is-current) .calendar-week-strip-date {
    color: var(--cal-mode-accent);
}

/* Day header (nav buttons + day label + Today button) */
.calendar-day-header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--cal-bg-soft);
    border-bottom: 1px solid var(--cal-border);
}

.calendar-nav-btn,
.calendar-nav-today {
    appearance: none;
    border: 1px solid var(--cal-border);
    background: var(--cal-bg);
    color: var(--cal-text) !important;          /* hold dark text against Elementor cascade */
    cursor: pointer;
    font-family: inherit;
    text-transform: none;
    border-radius: 8px;
    transition: background 0.12s ease, transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    min-height: 40px;
    line-height: 1;
}
.calendar-nav-btn {
    width: 40px;
    font-size: 18px;
    font-weight: 700;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.calendar-nav-today {
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
}
.calendar-nav-btn:hover,
.calendar-nav-today:hover {
    background: var(--cal-bg);
    border-color: var(--cal-mode-accent);
    color: var(--cal-mode-accent) !important;   /* accent on hover, but visible */
    transform: translateY(-1px);
    box-shadow: var(--cal-shadow-sm);
}

.calendar-day-label {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.12s ease;
    font-family: inherit;
    color: var(--cal-text);
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.calendar-day-label:hover {
    background: rgba(0, 0, 0, 0.03);
}
.calendar-day-label-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cal-text);
}
.calendar-day-label-badge {
    display: inline-block;
    background: var(--cal-mode-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.4;
}

/* Hour grid */
.calendar-grid {
    display: grid;
    grid-template-columns: 64px 1fr;
    background: var(--cal-bg);
}
.calendar-hours-col {
    border-right: 1px solid var(--cal-border);
    background: var(--cal-bg-soft);
}
.calendar-hour-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 6px 10px 0 0;
    font-size: 12px;
    color: var(--cal-text-muted);
    font-weight: 500;
    box-sizing: border-box;
}
.calendar-events-col {
    position: relative;
    padding: 0 8px;
    box-sizing: border-box;
}
.calendar-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cal-border);
}
.calendar-day-empty {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--cal-text-muted);
    font-size: 14px;
    pointer-events: none;
}

/* Event tiles — title only (no time, since the hour axis on the left already shows it).
   Clean white bg, accent left border (calendar-app convention).
   Color rules use !important to defeat Elementor's `button:hover { color: white }` cascade. */
.calendar-event-tile {
    appearance: none;
    position: absolute;
    left: 8px;
    right: 8px;
    background: var(--cal-bg);
    border: 1px solid var(--cal-border);
    border-left: 4px solid var(--cal-mode-accent);
    border-radius: 6px;
    padding: 8px 12px 8px 14px;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--cal-shadow-sm);
    transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.12s ease;
    font-family: inherit;
    text-transform: none;
    color: var(--cal-text) !important;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;      /* vertically center the title */
    line-height: 1.3;
}
.calendar-event-tile:hover {
    background: var(--cal-bg-soft);
    color: var(--cal-text) !important;
    border-color: var(--cal-border);
    border-left-color: var(--cal-mode-accent);
    transform: translateY(-1px);
    box-shadow: var(--cal-shadow-md);
}
.calendar-event-tile-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cal-text) !important;
    /* Allow up to 2 lines of wrap for longer titles; ellipsis if even that overflows. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.calendar-event-tile:hover .calendar-event-tile-title { color: var(--cal-text) !important; }

/* ==========================================================================
   Pulse cueing + tap feedback (used by Mode 1)
   ----------------------------------------------------------------------------
   No transform: scale — would make the tile visibly shrink when the
   animation ends, which reads as distracting. Use outline/box-shadow only
   (outline doesn't affect layout, box-shadow doesn't either).
   ========================================================================== */

@keyframes calendar-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }   /* fleet blue */
    70%      { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);   }
}
.calendar-pulse-target {
    animation: calendar-pulse 1.5s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

/* Flash feedback — solid bg + outline, NO box-shadow ring that shrinks.
   Static state held for full feedback duration; React removes the class. */
.calendar-flash-correct {
    background-color: #d1fae5 !important;
    color: #065f46 !important;   /* dark green text — readable on any prior bg (e.g. is-current strip cell) */
    outline: 3px solid #10b981;
    outline-offset: -1px;
    transition: background-color 0.15s ease, outline-color 0.15s ease, color 0.15s ease;
    position: relative;
    z-index: 3;
}
.calendar-flash-correct .calendar-week-strip-day,
.calendar-flash-correct .calendar-week-strip-date,
.calendar-flash-correct .calendar-event-tile-title,
.calendar-flash-correct .calendar-event-tile-time {
    color: #065f46 !important;
}
.calendar-flash-wrong {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    outline: 3px solid #ef4444;
    outline-offset: -1px;
    transition: background-color 0.15s ease, outline-color 0.15s ease, color 0.15s ease;
    position: relative;
    z-index: 3;
}
.calendar-flash-wrong .calendar-week-strip-day,
.calendar-flash-wrong .calendar-week-strip-date,
.calendar-flash-wrong .calendar-event-tile-title,
.calendar-flash-wrong .calendar-event-tile-time {
    color: #991b1b !important;
}

/* ==========================================================================
   PHASE 2 — Mode 1 (Calendar Skills) layout
   ========================================================================== */

.calendar-mode-1 {
    padding: 8px;
    position: relative;          /* SuccessOverlay anchors to this */
}
.calendar-mode-1.is-loading {
    padding: 48px;
    text-align: center;
    color: var(--cal-text-muted);
}

/* Session nav (Back · pips · spacer) now renders via the shared .ex-nav
   component (shared-components.css) at the BOTTOM of modes 1 + 2 — the old
   top calendar-mode-header row (Back left + pips right, lopsided) is gone.
   .calendar-mode-header is still used by sub-screen headers ("Back to modes"). */
.calendar-mode-progress {
    font-size: 12px;
    font-weight: 600;
    color: var(--cal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* "More modes coming soon" footnote under the (trimmed) mode picker grid */
.calendar-mode-picker__coming {
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
    margin: 14px 0 0;
}

/* Instruction banner — the user's focus point. Prominent accent treatment.
   Sticky: the prompt stays visible while the user scrolls the day grid, so
   the question never leaves view (no working-memory tax). Background must be
   SOLID (not rgba) or scrolling content shows through when stuck. */
.calendar-instruction-banner {
    position: sticky;
    top: 8px;
    z-index: 30;
    background: var(--as-read-bg);          /* fleet read/look blue tint */
    border: 2px solid var(--cal-accent-1);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--cal-text);
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

/* ==========================================================================
   PHASE 2 — Mode 1 session summary
   ========================================================================== */

.calendar-mode-summary {
    padding: 32px 24px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}
.calendar-mode-summary-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--cal-text);
}
.calendar-mode-summary-big {
    font-size: 56px;
    font-weight: 700;
    color: var(--cal-accent-1);
    line-height: 1;
    margin: 8px 0 4px;
}
.calendar-mode-summary-sub {
    font-size: 14px;
    color: var(--cal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}
.calendar-mode-summary-cue {
    font-size: 14px;
    color: var(--cal-text-muted);
    margin-bottom: 20px;
    font-style: italic;
}
.calendar-mode-summary-buckets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 20px 0 28px;
}
.calendar-mode-summary-bucket {
    background: var(--cal-bg-soft);
    border: 1px solid var(--cal-border);
    border-radius: 8px;
    padding: 10px 12px;
}
.calendar-mode-summary-bucket-label {
    font-size: 11px;
    color: var(--cal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 4px;
}
.calendar-mode-summary-bucket-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--cal-text);
}
.calendar-mode-summary-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ==========================================================================
   PHASE 3 — Mode 2 (Read the Calendar) layout
   ========================================================================== */

.calendar-mode-2 {
    padding: 8px;
    position: relative;          /* anchors SuccessOverlay (same as Mode 1) */
}
.calendar-mode-2.is-loading {
    padding: 48px;
    text-align: center;
    color: var(--cal-text-muted);
}

/* Mode 2 tiles are read-only — disable the lift on hover and the pointer cursor.
   Pulse + flash classes still fire (those are for the cue / success animation). */
.calendar-mode-2 .calendar-event-tile {
    cursor: default;
}
.calendar-mode-2 .calendar-event-tile:hover {
    transform: none;
    box-shadow: var(--cal-shadow-sm);
}

/* Question card — cyan-accented prompt pinned above the calendar.
   Replaces Mode 1's instruction banner; user reads the calendar and picks
   one of the MC options inside this card. */
.calendar-question-card {
    /* Sticky like mode 1's banner: question + answer options never leave view
       while reading the calendar below. Solid bg so content can't show through. */
    position: sticky;
    top: 8px;
    z-index: 30;
    background: var(--as-read-bg);                  /* fleet read/look blue tint */
    border: 2px solid var(--cal-accent-2);          /* overridden inline to match mode accent */
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}
.calendar-question-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.calendar-question-text {
    flex: 1;
    font-size: 19px;
    font-weight: 700;
    color: var(--cal-text);
    line-height: 1.35;
    text-align: left;
}
.calendar-question-speak-btn {
    appearance: none;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--cal-accent-2);          /* overridden inline */
    background: #fff !important;                     /* defeat Elementor button bg */
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, transform 0.1s ease, box-shadow 0.12s ease;
    font-family: inherit;
    text-transform: none;
    /* Elementor's `.elementor-kit-xxxx button { color: #fff !important }` was
       eating the 🔊 emoji (renders white on white). !important wins it back. */
    color: var(--cal-accent-2) !important;
}
.calendar-question-speak-btn:hover {
    background: rgba(37, 99, 235, 0.08) !important;   /* fleet blue tint */
    color: var(--cal-accent-2) !important;
    transform: translateY(-1px);
    box-shadow: var(--cal-shadow-sm);
}

/* 2x2 MC grid for 4-option questions (default), 1x2 row for binary q07/q08. */
.calendar-question-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.calendar-question-options.is-binary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.calendar-question-option {
    appearance: none;
    background: #fff;
    border: 2px solid var(--cal-accent-2);          /* overridden inline to match mode accent */
    border-radius: 10px;
    padding: 14px 14px;
    font-family: inherit;
    text-transform: none;                            /* defeat Elementor capitalize cascade */
    font-size: 16px;
    font-weight: 600;
    color: var(--cal-text) !important;               /* defeat Elementor button.color: white */
    cursor: pointer;
    min-height: 56px;
    line-height: 1.25;
    transition: background 0.12s ease, transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    word-break: break-word;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.calendar-question-option:hover {
    background: rgba(37, 99, 235, 0.08);   /* fleet blue tint */
    color: var(--cal-text) !important;               /* hold dark text on hover */
    transform: translateY(-1px);
    box-shadow: var(--cal-shadow-sm);
}
.calendar-question-option:focus-visible {
    outline: 3px solid var(--cal-accent-2);
    outline-offset: 2px;
}
.calendar-question-option:disabled {
    cursor: default;
    opacity: 0.75;
}
.calendar-question-option:disabled:hover {
    background: #fff;
    transform: none;
    box-shadow: none;
}

/* Per-button flash on tap — matches the green/red palette used on calendar tiles
   so the visual language is consistent across the widget. */
.calendar-question-option.is-correct,
.calendar-question-option.is-correct:hover {
    background: #d1fae5 !important;
    border-color: #10b981 !important;
    color: #065f46 !important;
    outline: 3px solid #10b981;
    outline-offset: -1px;
}
.calendar-question-option.is-wrong,
.calendar-question-option.is-wrong:hover {
    background: #fee2e2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
    outline: 3px solid #ef4444;
    outline-offset: -1px;
}

/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media (max-width: 600px) {
    .calendar-day-header {
        grid-template-columns: auto 1fr auto auto;
        gap: 4px;
        padding: 6px 8px;
    }
    .calendar-nav-btn {
        width: 36px;
        min-height: 36px;
        font-size: 16px;
    }
    .calendar-nav-today {
        padding: 0 10px;
        font-size: 12px;
        min-height: 36px;
    }
    .calendar-day-label-text {
        font-size: 14px;
    }
    .calendar-day-label-badge {
        font-size: 9px;
        padding: 2px 7px;
    }
    .calendar-week-strip {
        padding: 6px 6px 4px;
        gap: 2px;
    }
    .calendar-week-strip-cell {
        padding: 4px 1px;
        min-height: 42px;
    }
    .calendar-week-strip-day {
        font-size: 9px;
        letter-spacing: 0.04em;
    }
    .calendar-week-strip-date {
        font-size: 13px;
    }
    .calendar-grid {
        grid-template-columns: 48px 1fr;
    }
    .calendar-hour-row {
        font-size: 11px;
        padding-right: 6px;
    }
    .calendar-event-tile {
        left: 4px;
        right: 4px;
        padding: 6px 10px;
    }
    .calendar-event-tile-title {
        font-size: 14px;
    }
    .calendar-event-tile-time {
        font-size: 12px;
    }
    .calendar-instruction-banner {
        font-size: 16px;
        padding: 12px 14px;
        border-width: 2px;
    }
    .calendar-mode-1 {
        padding: 6px;
    }
    .calendar-mode-summary {
        padding: 24px 16px;
    }
    .calendar-mode-summary-big {
        font-size: 44px;
    }
    .calendar-success-overlay__card {
        padding: 18px 24px;
    }
    .calendar-success-overlay__check {
        font-size: 52px;
    }

    /* Mode 2 mobile — tighter card, single-column 4-option grid (2 cols still for binary). */
    .calendar-mode-2 {
        padding: 6px;
    }
    .calendar-question-card {
        padding: 12px 12px;
        margin-bottom: 8px;
    }
    .calendar-question-row {
        gap: 8px;
        margin-bottom: 10px;
    }
    .calendar-question-text {
        font-size: 16px;
    }
    .calendar-question-speak-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .calendar-question-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .calendar-question-options.is-binary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .calendar-question-option {
        padding: 12px 12px;
        min-height: 52px;
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-pulse-target {
        animation: none;
        outline: 3px solid var(--cal-mode-accent);
        outline-offset: 2px;
        box-shadow: none;
    }
    .calendar-flash-correct,
    .calendar-flash-wrong {
        transition: none;
    }
    .calendar-success-overlay__card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Success overlay — pops in during the 1.8s correct-feedback delay so
   users have visible "you got it" confirmation, not just a brief tile flash.
   Anchored to .calendar-mode-1 (position: relative).
   ========================================================================== */

.calendar-success-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
}
.calendar-success-overlay__card {
    background: #fff;
    border: 3px solid #10b981;
    border-radius: 18px;
    padding: 22px 32px;
    box-shadow: 0 14px 36px rgba(16, 185, 129, 0.35), 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    opacity: 0;
    transform: scale(0.6);
    animation: calendar-success-pop 1.8s ease-out forwards;
}
.calendar-success-overlay__check {
    font-size: 64px;
    line-height: 1;
    color: #10b981;
    font-weight: 700;
}
.calendar-success-overlay__msg {
    font-size: 18px;
    font-weight: 700;
    color: #065f46;
    margin-top: 8px;
    letter-spacing: 0.02em;
}

/* Accessibility fallback: manual Next, shown only when auto-advance is off. */
.calendar-fb-next {
    display: block;
    margin: 12px auto 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cal-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 6px 14px;
}
@keyframes calendar-success-pop {
    0%   { opacity: 0; transform: scale(0.55); }
    18%  { opacity: 1; transform: scale(1.08); }
    32%  { opacity: 1; transform: scale(1); }
    82%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); }
}

/* ==========================================================================
   ELEMENTOR SPECIFICITY DEFENSE
   ----------------------------------------------------------------------------
   Elementor sites have global rules like:
       .elementor-kit-15048 button { padding: 12px 24px; font-size: 17px;
                                     border-radius: 999px;
                                     text-transform: capitalize; ... }
   That selector's specificity (0,1,1) beats this file's class-level rules
   (0,1,0), so on mobile the calendar's MC option buttons render at ~28px
   with pill borders, mode picker descriptions title-case to "Read The
   Calendar", and the day header nav arrows become chunky 80px buttons.
   This block prefixes the same selectors with `.calendar-widget-root` (now
   0,2,0, wins specificity) AND adds !important on the properties Elementor
   was overriding. Keep in sync if anything visible above gets new sizing.
   ========================================================================== */

.calendar-widget-root .calendar-mode-picker__grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Grid children inherit min-width: auto, which forbids shrinking below the
       content's intrinsic width. On narrow viewports that causes tiles to overflow
       the column. min-width: 0 lets them shrink to fit. */
    grid-auto-columns: minmax(0, 1fr) !important;
}
.calendar-widget-root .calendar-mode-picker {
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.calendar-widget-root .calendar-mode-tile {
    /* Background + color + border MUST be restated here. Elementor's global
       `.elementor-kit-xxxx button { background-color: <theme-blue>; color: #fff }`
       (specificity 0,1,1) otherwise beats the plain `.calendar-mode-tile` rule
       (0,1,0) and paints the cards as solid blue boxes with white text — the
       "looks like a different app" bug. This selector is 0,2,0 + !important. */
    background: var(--cal-bg) !important;
    color: var(--cal-text) !important;
    border: 1px solid var(--cal-border) !important;
    border-left: 4px solid var(--cal-accent-1) !important;   /* fleet-blue accent */
    text-transform: none !important;
    padding: 20px 16px !important;
    border-radius: var(--cal-radius) !important;
    letter-spacing: normal !important;
    /* The fix for "tiles hang off to the right": box-sizing keeps padding inside
       the declared width, width:100% locks the tile to its grid column, min-width:0
       lets the grid item shrink to fit, and max-width caps absolute overflow. */
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.calendar-widget-root .calendar-mode-tile.is-locked {
    background: var(--cal-bg-soft) !important;
}
.calendar-widget-root .calendar-mode-tile:hover,
.calendar-widget-root .calendar-mode-tile:focus-visible {
    background: var(--cal-bg) !important;
    color: var(--cal-text) !important;
}
.calendar-widget-root .calendar-mode-tile__emoji {
    font-size: 28px !important;
    line-height: 1 !important;
}
.calendar-widget-root .calendar-mode-tile__label {
    text-transform: none !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}
.calendar-widget-root .calendar-mode-tile__desc {
    text-transform: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
}
.calendar-widget-root .calendar-mode-tile__label {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
}

/* Blanket child constraint — flex column items default to min-width: auto
   which prevents shrinking below content's intrinsic width. That's what was
   making the title/description text trail off the right edge of the tile.
   min-width: 0 lets them shrink. width:100% + max-width:100% locks them to
   the tile's content area; white-space: normal defeats any Elementor
   `button { white-space: nowrap }` reset. */
.calendar-widget-root .calendar-mode-tile > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}
.calendar-widget-root .calendar-mode-tile__lock,
.calendar-widget-root .calendar-mode-tile__free {
    text-transform: uppercase !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    letter-spacing: 0.04em !important;
    /* The position:absolute pill — shrink-fit to content so it sits compactly
       in the top-right corner instead of inheriting the > * width:100% rule. */
    width: auto !important;
    max-width: max-content !important;
}

.calendar-widget-root .calendar-question-card {
    border-radius: 12px !important;
    padding: 14px 16px !important;
}
.calendar-widget-root .calendar-question-text {
    font-size: 19px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.35 !important;
}
.calendar-widget-root .calendar-question-speak-btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 22px !important;
    border-radius: 50% !important;
    border-width: 2px !important;
    border-style: solid !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}
.calendar-widget-root .calendar-question-option {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 14px 14px !important;
    min-height: 56px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.25 !important;
    border-radius: 10px !important;
    border-width: 2px !important;
    border-style: solid !important;
}

.calendar-widget-root .calendar-nav-btn {
    width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border-width: 1px !important;
    border-style: solid !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}
.calendar-widget-root .calendar-nav-today {
    padding: 0 14px !important;
    min-height: 40px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border-width: 1px !important;
    border-style: solid !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}
.calendar-widget-root .calendar-day-label {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
}
.calendar-widget-root .calendar-day-label-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
}
.calendar-widget-root .calendar-day-label-badge {
    font-size: 10px !important;
    padding: 3px 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1.4 !important;
    border-radius: 999px !important;
}

.calendar-widget-root .calendar-event-tile {
    padding: 8px 12px 8px 14px !important;
    border-radius: 6px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-left-width: 4px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}
.calendar-widget-root .calendar-event-tile-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
}

.calendar-widget-root .calendar-week-strip-cell {
    padding: 5px 2px !important;
    min-height: 46px !important;
    border-radius: 7px !important;
    border-width: 1px !important;
    border-style: solid !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}
.calendar-widget-root .calendar-week-strip-cell.is-today {
    border-width: 1.5px !important;
}
.calendar-widget-root .calendar-week-strip-day {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
}
.calendar-widget-root .calendar-week-strip-date {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}

.calendar-widget-root .calendar-btn {
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    min-height: 44px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    border-radius: 8px !important;
}
.calendar-widget-root .calendar-btn--small {
    font-size: 13px !important;
    padding: 6px 12px !important;
    min-height: 36px !important;
}
.calendar-widget-root .calendar-btn--ghost,
.calendar-widget-root .calendar-btn--primary {
    border-width: 1px !important;
    border-style: solid !important;
}
.calendar-widget-root .calendar-btn--primary {
    border-color: transparent !important;
}

.calendar-widget-root .calendar-mode-progress {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.calendar-widget-root .calendar-instruction-banner {
    font-size: 19px !important;
    font-weight: 700 !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.35 !important;
}

/* Mobile-tuned overrides — same selectors, smaller sizes, all !important. */
@media (max-width: 600px) {
    .calendar-widget-root .calendar-mode-tile {
        padding: 18px 14px !important;
        min-height: 130px !important;
    }
    .calendar-widget-root .calendar-mode-tile__emoji {
        font-size: 26px !important;
    }
    .calendar-widget-root .calendar-mode-tile__label {
        font-size: 16px !important;
    }
    .calendar-widget-root .calendar-mode-tile__desc {
        font-size: 13px !important;
    }

    .calendar-widget-root .calendar-question-card {
        padding: 12px 12px !important;
    }
    .calendar-widget-root .calendar-question-text {
        font-size: 16px !important;
    }
    .calendar-widget-root .calendar-question-speak-btn {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 20px !important;
    }
    .calendar-widget-root .calendar-question-option {
        padding: 12px 12px !important;
        min-height: 52px !important;
        font-size: 15px !important;
    }

    .calendar-widget-root .calendar-nav-btn {
        width: 36px !important;
        min-height: 36px !important;
        font-size: 16px !important;
    }
    .calendar-widget-root .calendar-nav-today {
        padding: 0 10px !important;
        min-height: 36px !important;
        font-size: 12px !important;
    }
    .calendar-widget-root .calendar-day-label-text {
        font-size: 14px !important;
    }
    .calendar-widget-root .calendar-day-label-badge {
        font-size: 9px !important;
        padding: 2px 7px !important;
    }

    .calendar-widget-root .calendar-event-tile {
        padding: 6px 10px !important;
    }
    .calendar-widget-root .calendar-event-tile-title {
        font-size: 14px !important;
    }

    .calendar-widget-root .calendar-week-strip-cell {
        padding: 4px 1px !important;
        min-height: 42px !important;
    }
    .calendar-widget-root .calendar-week-strip-day {
        font-size: 9px !important;
        letter-spacing: 0.04em !important;
    }
    .calendar-widget-root .calendar-week-strip-date {
        font-size: 13px !important;
    }

    .calendar-widget-root .calendar-instruction-banner {
        font-size: 16px !important;
        padding: 12px 14px !important;
    }
}