/* Mind — core stylesheet. Conventions per dev/PLAN.md §7.1:
   every class .mind-*, every variable --mind-*, px units,
   colors only from theme blocks, dark is the default theme. */

/* ---------- theme-independent scale ---------- */

:root {
    --mind-space-1: 4px;
    --mind-space-2: 8px;
    --mind-space-3: 12px;
    --mind-space-4: 20px;
    --mind-space-5: 32px;
    --mind-radius: 6px;
    --mind-radiusSm: 4px;
    --mind-borderWidth: 1px;
    --mind-fontStack: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mind-fontStackMono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
    --mind-fontSize: 18px;
    --mind-fontSizeSm: 16px;
    --mind-fontSizeLg: 22px;
    --mind-fontSizeXl: 26px;
    --mind-controlHeight: 36px;
    --mind-controlHeightSm: 28px;
    --mind-navbarHeight: 52px;
    --mind-pageMaxWidth: 1100px;
    /* Half the empty space beside the page frame: 0 until the viewport is wider
       than the max width, then it grows so the frame stays centred at exactly
       min(maxWidth, 100%). Used as the left/right of the absolutely-positioned
       .mind-page so the frame's width is the VIEWPORT's, never its content's. */
    --mind-pageSide: max(0px, calc((100% - var(--mind-pageMaxWidth)) / 2));
    --mind-loginCardWidth: 340px;
    --mind-modalWidth: 660px;
    --mind-pmTreeWidth: 320px;
    --mind-space-6: 48px;
    --mind-btnHeightTiny: 24px;
    --mind-focusRingWidth: 2px;
    --mind-emGridGap: 4px;
    --mind-emCellMinHeight: 104px;
    --mind-emCellMinHeightSm: 72px;
    --mind-tmRingSize: 300px;
    --mind-tmRingThickness: 18px;
    --mind-tmClockSize: 60px;
    --mind-tmNodeIndent: 14px;
    --mind-tmColorDotSize: 10px;
    --mind-tmOffOpacity: 0.45;
    --mind-zNavbar: 100;
    --mind-zOverlay: 200;
    --mind-zModal: 300;
    --mind-zPopup: 400;
    /* calendar endless scroller (§12.7). The day/row heights are the single
       source of truth for the virtualizer and are re-set from em.js at build
       (via CSSOM) so the JS row-pitch math and the CSS always agree; the values
       here are fallbacks that keep the grid sane before/without the script. */
    --mind-fontSizeXs: 13px;
    --mind-emGutterWidth: 40px;
    --mind-emRailWidth: 12px;
    --mind-emStripHeight: 120px;
    --mind-emAllDayHeight: 54px;
    --mind-emDayHeadHeight: 22px;
    --mind-emDayPad: 3px;
    --mind-emDayGap: 3px;
    --mind-emWeekRowH: 208px;
    --mind-popupMaxHeight: 300px;
    --mind-emContextWidth: 190px;
    --mind-colorPickerHeight: 148px;
}

/* ---------- themes ---------- */

html.mind-theme-dark, html:not(.mind-theme-light) {
    /* base surfaces — warm near-black, no blue tint */
    --mind-backgroundColor:        #0b0a07;
    --mind-navbarBackgroundColor:  #110f0b;
    --mind-cardBackgroundColor:    #16130e;
    --mind-cardAltBackgroundColor: #1e1a14;
    --mind-inputBackgroundColor:   #0d0c09;
    --mind-hoverColor:             #201c14;
    /* text */
    --mind-foregroundColor:        #e7e7e7;
    --mind-secondaryTextColor:     #a89f8d;
    --mind-mutedTextColor:         #756b59;
    --mind-inactiveColor:          var(--mind-mutedTextColor);
    /* borders */
    --mind-borderColor:            #322c23;
    --mind-borderStrongColor:      #4a4234;
    /* primary accent — amber/gold */
    --mind-accentColor:            #f5c02b;
    --mind-accentHoverColor:       #ffd24d;
    --mind-accentFillColor:        #f5c02b;
    --mind-accentFillHoverColor:   #ffd24d;
    --mind-onAccentColor:          #201702;
    --mind-accentSoftColor:        rgba(245,192,43,.13);
    --mind-accentSoftBorderColor:  rgba(245,192,43,.30);
    /* secondary accent — teal (use sparingly) */
    --mind-secondaryAccentColor:       #45c8bd;
    --mind-secondaryAccentSoftColor:   rgba(69,200,189,.14);
    --mind-secondaryAccentBorderColor: rgba(69,200,189,.30);
    /* links */
    --mind-linkColor:              var(--mind-secondaryAccentColor);
    --mind-linkHoverColor:         #6fded3;
    /* state / actions */
    --mind-selectedColor:          var(--mind-accentColor);
    --mind-selectedSoftColor:      rgba(245,192,43,.12);
    --mind-saveColor:              var(--mind-accentColor);
    --mind-addColor:               var(--mind-secondaryAccentColor);
    --mind-editColor:              var(--mind-secondaryAccentColor);
    /* module accent — PM (grows to EM/TM as they are built, §7.1) */
    --mind-pmAccentColor:          var(--mind-accentColor);
    --mind-emAccentColor:          var(--mind-secondaryAccentColor);
    /* timer runner phases — reuse the semantic palette so both themes track it:
       amber "get ready", green "go/work", red "final countdown" */
    --mind-tmAccentColor:          var(--mind-secondaryAccentColor);
    --mind-tmPrepColor:            var(--mind-accentColor);
    --mind-tmWorkColor:            var(--mind-successColor);
    --mind-tmDangerColor:          var(--mind-warnColor);
    /* calendar event-type default colours — a per-event custom colour overrides
       these via inline style (the one allowed inline-colour exception, §7.1) */
    --mind-emTypeBirthdayColor:    #d98cc9;
    --mind-emTypeHealthColor:      #4fc77a;
    --mind-emTypeHolidayColor:     #e0864a;
    --mind-emTypeSchoolColor:      #6ea8fe;
    --mind-emTypeShoppingColor:    #45c8bd;
    --mind-emTypeSportColor:       #e0584a;
    --mind-emTypeVacationColor:    #b98cf0;
    --mind-emTypeWorkColor:        #8aa0b6;
    --mind-emTypeOtherColor:       #a89f8d;
    --mind-emTodayColor:           var(--mind-accentColor);
    --mind-emWeekendBackgroundColor: #151007;
    --mind-emMonthLabelColor:      var(--mind-accentColor);
    --mind-skeletonBaseColor:      rgba(255,255,255,.045);
    --mind-skeletonHighlightColor: rgba(255,255,255,.11);
    --mind-successColor:           #4fc77a;
    --mind-successSoftColor:       rgba(79,199,122,.14);
    --mind-warnColor:              #e0584a;
    --mind-deleteColor:            var(--mind-warnColor);
    --mind-warnSoftColor:          rgba(224,88,74,.13);
    --mind-warnSoftBorderColor:    rgba(224,88,74,.32);
    /* navbar */
    --mind-navbarBorderColor:      var(--mind-borderColor);
    --mind-navLinkColor:           var(--mind-secondaryTextColor);
    --mind-navLinkHoverColor:      var(--mind-foregroundColor);
    --mind-navLinkActiveColor:     var(--mind-accentColor);
    /* inputs */
    --mind-inputBorderColor:       #38322a;
    --mind-inputTextColor:         var(--mind-foregroundColor);
    --mind-inputLabelColor:        var(--mind-secondaryTextColor);
    --mind-inputFocusBorderColor:  var(--mind-accentColor);
    --mind-inputPlaceholderColor:  var(--mind-mutedTextColor);
    /* tables */
    --mind-tableBorderColor:           rgba(255,255,255,.06);
    --mind-tableHeaderColor:           var(--mind-secondaryTextColor);
    --mind-tableRowHoverColor:         var(--mind-hoverColor);
    /* subtle elevation overlays */
    --mind-stripeColor:            rgba(255,255,255,.02);
    --mind-pillBackgroundColor:    rgba(255,255,255,.07);
    /* custom controls + popups (§12.4) */
    --mind-popupBackgroundColor:   #1b1712;
    --mind-optionHoverColor:       var(--mind-hoverColor);
    --mind-optionActiveColor:      var(--mind-accentSoftColor);
    --mind-switchTrackColor:       #38322a;
    --mind-switchKnobColor:        #b9ad96;
    --mind-switchOnColor:          var(--mind-accentFillColor);
    --mind-switchOnKnobColor:      var(--mind-onAccentColor);
    /* calendar strip + diff highlight (§12.7/§12.9) */
    --mind-gridlineColor:          rgba(255,255,255,.05);
    --mind-nowLineColor:           var(--mind-warnColor);
    --mind-diffChangedColor:       rgba(245,192,43,.16);
    --mind-highlightColor:         rgba(245,192,43,.35);
    /* overlays / shadows / scrollbars */
    --mind-overlayColor:           rgba(8,6,3,.85);
    --mind-shadow:                 0 4px 20px rgba(0,0,0,.5);
    --mind-shadowSm:               0 2px 8px rgba(0,0,0,.4);
    --mind-scrollbarColor:         var(--mind-borderStrongColor);
    --mind-scrollbarHoverColor:    #6a604e;
    --mind-scrollbarTrackColor:    var(--mind-backgroundColor);
}

html.mind-theme-light {
    /* base surfaces — warm paper, inverted from dark */
    --mind-backgroundColor:        #f4f1ea;
    --mind-navbarBackgroundColor:  #fbf8f1;
    --mind-cardBackgroundColor:    #ffffff;
    --mind-cardAltBackgroundColor: #f6f1e6;
    --mind-inputBackgroundColor:   #ffffff;
    --mind-hoverColor:             #ece4d4;
    /* text — warm near-black, high contrast */
    --mind-foregroundColor:        #221f17;
    --mind-secondaryTextColor:     #5c5648;
    --mind-mutedTextColor:         #8a8270;
    --mind-inactiveColor:          var(--mind-mutedTextColor);
    /* borders */
    --mind-borderColor:            #ddd4c2;
    --mind-borderStrongColor:      #c0b69d;
    /* primary accent — amber, darkened as text/border for AA on paper */
    --mind-accentColor:            #856208;
    --mind-accentHoverColor:       #75600a;
    --mind-accentFillColor:        #f0c024;
    --mind-accentFillHoverColor:   #f5cb45;
    --mind-onAccentColor:          #2a1d04;
    --mind-accentSoftColor:        rgba(214,170,30,.16);
    --mind-accentSoftBorderColor:  rgba(214,170,30,.42);
    /* secondary accent — teal, darkened for paper */
    --mind-secondaryAccentColor:       #0b6f64;
    --mind-secondaryAccentSoftColor:   rgba(15,133,122,.12);
    --mind-secondaryAccentBorderColor: rgba(15,133,122,.35);
    /* links */
    --mind-linkColor:              var(--mind-secondaryAccentColor);
    --mind-linkHoverColor:         #0a625a;
    /* state / actions */
    --mind-selectedColor:          var(--mind-accentColor);
    --mind-selectedSoftColor:      rgba(214,170,30,.16);
    --mind-saveColor:              var(--mind-accentColor);
    --mind-addColor:               var(--mind-secondaryAccentColor);
    --mind-editColor:              var(--mind-secondaryAccentColor);
    /* module accent — PM (grows to EM/TM as they are built, §7.1) */
    --mind-pmAccentColor:          var(--mind-accentColor);
    --mind-emAccentColor:          var(--mind-secondaryAccentColor);
    /* timer runner phases — reuse the semantic palette so both themes track it:
       amber "get ready", green "go/work", red "final countdown" */
    --mind-tmAccentColor:          var(--mind-secondaryAccentColor);
    --mind-tmPrepColor:            var(--mind-accentColor);
    --mind-tmWorkColor:            var(--mind-successColor);
    --mind-tmDangerColor:          var(--mind-warnColor);
    /* calendar event-type default colours — darkened for AA on paper; a
       per-event custom colour overrides these via inline style (§7.1) */
    --mind-emTypeBirthdayColor:    #b0409a;
    --mind-emTypeHealthColor:      #277a45;
    --mind-emTypeHolidayColor:     #b5620f;
    --mind-emTypeSchoolColor:      #2f6bd0;
    --mind-emTypeShoppingColor:    #0b6f64;
    --mind-emTypeSportColor:       #c0392b;
    --mind-emTypeVacationColor:    #7b48c0;
    --mind-emTypeWorkColor:        #4a5d72;
    --mind-emTypeOtherColor:       #6b6250;
    --mind-emTodayColor:           var(--mind-accentColor);
    --mind-emWeekendBackgroundColor: #eee6d3;
    --mind-emMonthLabelColor:      var(--mind-accentColor);
    --mind-skeletonBaseColor:      rgba(0,0,0,.055);
    --mind-skeletonHighlightColor: rgba(0,0,0,.015);
    --mind-successColor:           #277a45;
    --mind-successSoftColor:       rgba(46,139,80,.13);
    --mind-warnColor:              #c0392b;
    --mind-deleteColor:            var(--mind-warnColor);
    --mind-warnSoftColor:          rgba(192,57,43,.12);
    --mind-warnSoftBorderColor:    rgba(192,57,43,.32);
    /* navbar */
    --mind-navbarBorderColor:      var(--mind-borderColor);
    --mind-navLinkColor:           var(--mind-secondaryTextColor);
    --mind-navLinkHoverColor:      var(--mind-foregroundColor);
    --mind-navLinkActiveColor:     var(--mind-accentColor);
    /* inputs */
    --mind-inputBorderColor:       #cabfa8;
    --mind-inputTextColor:         var(--mind-foregroundColor);
    --mind-inputLabelColor:        var(--mind-secondaryTextColor);
    --mind-inputFocusBorderColor:  var(--mind-accentColor);
    --mind-inputPlaceholderColor:  var(--mind-mutedTextColor);
    /* tables */
    --mind-tableBorderColor:           rgba(40,30,12,.10);
    --mind-tableHeaderColor:           var(--mind-secondaryTextColor);
    --mind-tableRowHoverColor:         var(--mind-hoverColor);
    /* subtle elevation overlays — dark-tinted for light surfaces */
    --mind-stripeColor:            rgba(40,30,12,.025);
    --mind-pillBackgroundColor:    rgba(40,30,12,.06);
    /* custom controls + popups (§12.4) */
    --mind-popupBackgroundColor:   #ffffff;
    --mind-optionHoverColor:       var(--mind-hoverColor);
    --mind-optionActiveColor:      var(--mind-accentSoftColor);
    --mind-switchTrackColor:       #cabfa8;
    --mind-switchKnobColor:        #ffffff;
    --mind-switchOnColor:          var(--mind-accentFillColor);
    --mind-switchOnKnobColor:      #ffffff;
    /* calendar strip + diff highlight (§12.7/§12.9) */
    --mind-gridlineColor:          rgba(40,30,12,.08);
    --mind-nowLineColor:           var(--mind-warnColor);
    --mind-diffChangedColor:       rgba(214,170,30,.20);
    --mind-highlightColor:         rgba(214,170,30,.45);
    /* overlays / shadows / scrollbars */
    --mind-overlayColor:           rgba(40,34,22,.45);
    --mind-shadow:                 0 4px 18px rgba(60,48,28,.14);
    --mind-shadowSm:               0 2px 6px rgba(60,48,28,.10);
    --mind-scrollbarColor:         #cbc1ac;
    --mind-scrollbarHoverColor:    #a89e84;
    --mind-scrollbarTrackColor:    var(--mind-backgroundColor);
}

/* ---------- element resets (the one allowed unprefixed block) ---------- */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* ---------- base ---------- */

.mind-body {
    min-height: 100vh;
    background: var(--mind-backgroundColor);
    color: var(--mind-foregroundColor);
    font-family: var(--mind-fontStack);
    font-size: var(--mind-fontSize);
    line-height: 1.5;
    scrollbar-color: var(--mind-scrollbarColor) var(--mind-scrollbarTrackColor);
}

.mind-link {
    color: var(--mind-linkColor);
    text-decoration: none;
}

.mind-link:hover {
    color: var(--mind-linkHoverColor);
    text-decoration: underline;
}

/* ---------- cards ---------- */

.mind-card {
    background: var(--mind-cardBackgroundColor);
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    border-radius: var(--mind-radius);
    box-shadow: var(--mind-shadow);
}

/* ---------- forms ---------- */

.mind-field {
    display: flex;
    flex-direction: column;
    gap: var(--mind-space-1);
    margin-bottom: var(--mind-space-3);
}

.mind-label {
    color: var(--mind-inputLabelColor);
    font-size: var(--mind-fontSizeSm);
}

.mind-input {
    height: var(--mind-controlHeight);
    padding: 0 var(--mind-space-3);
    background: var(--mind-inputBackgroundColor);
    color: var(--mind-inputTextColor);
    border: var(--mind-borderWidth) solid var(--mind-inputBorderColor);
    border-radius: var(--mind-radiusSm);
    font-family: var(--mind-fontStack);
    font-size: var(--mind-fontSize);
}

.mind-input::placeholder {
    color: var(--mind-inputPlaceholderColor);
}

.mind-input:focus {
    outline: var(--mind-focusRingWidth) solid var(--mind-inputFocusBorderColor);
    outline-offset: -1px;
    border-color: var(--mind-inputFocusBorderColor);
}

.mind-input[readonly] {
    color: var(--mind-inactiveColor);
}

.mind-btn {
    height: var(--mind-controlHeight);
    padding: 0 var(--mind-space-4);
    border: var(--mind-borderWidth) solid var(--mind-borderStrongColor);
    border-radius: var(--mind-radiusSm);
    background: var(--mind-cardAltBackgroundColor);
    color: var(--mind-foregroundColor);
    font-family: var(--mind-fontStack);
    font-size: var(--mind-fontSize);
    cursor: pointer;
}

.mind-btn:hover {
    background: var(--mind-hoverColor);
}

.mind-btn-primary {
    background: var(--mind-accentFillColor);
    border-color: var(--mind-accentFillColor);
    color: var(--mind-onAccentColor);
    font-weight: 600;
}

.mind-btn-primary:hover {
    background: var(--mind-accentFillHoverColor);
    border-color: var(--mind-accentFillHoverColor);
}

/* ---------- alerts ---------- */

.mind-alert {
    padding: var(--mind-space-2) var(--mind-space-3);
    margin: 0 0 var(--mind-space-3);
    border-radius: var(--mind-radiusSm);
    font-size: var(--mind-fontSizeSm);
}

.mind-alert-warn {
    background: var(--mind-warnSoftColor);
    border: var(--mind-borderWidth) solid var(--mind-warnSoftBorderColor);
    color: var(--mind-warnColor);
}

/* ---------- login page ---------- */

.mind-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mind-space-4);
}

.mind-login-card {
    width: var(--mind-loginCardWidth);
    max-width: 100%;
    padding: var(--mind-space-5);
}

.mind-login-brand {
    display: flex;
    align-items: center;
    gap: var(--mind-space-3);
    margin-bottom: var(--mind-space-4);
}

.mind-login-logo {
    width: 40px;
    height: 40px;
}

.mind-login-title {
    margin: 0;
    font-size: var(--mind-fontSizeXl);
    font-weight: 600;
    letter-spacing: 1px;
}

.mind-login-submit {
    width: 100%;
    margin-top: var(--mind-space-2);
}

.mind-login-recover {
    margin: var(--mind-space-3) 0 0;
    text-align: center;
    font-size: var(--mind-fontSizeSm);
}

/* ---------- navbar ---------- */

.mind-navbar {
    position: sticky;
    top: 0;
    z-index: var(--mind-zNavbar);
    display: flex;
    align-items: center;
    gap: var(--mind-space-4);
    height: var(--mind-navbarHeight);
    padding: 0 var(--mind-space-4);
    background: var(--mind-navbarBackgroundColor);
    border-bottom: var(--mind-borderWidth) solid var(--mind-navbarBorderColor);
}

.mind-navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    text-decoration: none;
    color: var(--mind-foregroundColor);
}

.mind-navbar-logo {
    width: 24px;
    height: 24px;
}

.mind-navbar-title {
    font-size: var(--mind-fontSizeLg);
    font-weight: 600;
    letter-spacing: 1px;
}

.mind-navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--mind-space-3);
    flex: 1;
}

.mind-nav-link {
    color: var(--mind-navLinkColor);
    text-decoration: none;
    padding: var(--mind-space-1) var(--mind-space-2);
    border-radius: var(--mind-radiusSm);
}

a.mind-nav-link:hover {
    color: var(--mind-navLinkHoverColor);
    background: var(--mind-hoverColor);
}

.mind-nav-link-active {
    color: var(--mind-navLinkActiveColor);
}

.mind-nav-link-inactive {
    color: var(--mind-inactiveColor);
    cursor: default;
}

.mind-navbar-right {
    display: flex;
    align-items: center;
    gap: var(--mind-space-3);
}

.mind-navbar-user {
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
}

.mind-theme-toggle {
    width: var(--mind-controlHeightSm);
    height: var(--mind-controlHeightSm);
    padding: 0;
    background: none;
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    border-radius: var(--mind-radiusSm);
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSize);
    cursor: pointer;
}

.mind-theme-toggle:hover {
    color: var(--mind-foregroundColor);
    background: var(--mind-hoverColor);
}

.mind-logout-form {
    margin: 0;
}

/* burger toggle — hidden on the full-width navbar, revealed below 1024px */
.mind-navbar-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--mind-controlHeightSm);
    height: var(--mind-controlHeightSm);
    padding: 0;
    background: none;
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    border-radius: var(--mind-radiusSm);
    color: var(--mind-secondaryTextColor);
    cursor: pointer;
}

.mind-navbar-burger:hover {
    color: var(--mind-foregroundColor);
    background: var(--mind-hoverColor);
}

/* three-line glyph from one span + its two pseudo-lines; morphs to an X when
   the menu is open (rules in the compact block below). */
.mind-burger-icon,
.mind-burger-icon::before,
.mind-burger-icon::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}

.mind-burger-icon { position: relative; }
.mind-burger-icon::before { position: absolute; left: 0; top: -6px; }
.mind-burger-icon::after  { position: absolute; left: 0; top: 6px; }

/* backdrop is inert until the compact block turns it into a fixed scrim */
.mind-nav-backdrop { display: none; }

/* ---------- compact navbar: burger + slide-in overlay menu (<1024px) ---------- */
@media (max-width: 1023px) {
    .mind-navbar-burger { display: inline-flex; }
    /* nav leaves the flow (becomes the drawer) so push the user/logout cluster right */
    .mind-navbar-right { margin-left: auto; }

    /* the inline link row becomes a sheet that drops from under the navbar */
    .mind-navbar-nav {
        position: fixed;
        top: var(--mind-navbarHeight);
        left: 0;
        right: 0;
        z-index: var(--mind-zOverlay);
        flex: none;
        flex-direction: column;
        align-items: stretch;
        gap: var(--mind-space-1);
        padding: var(--mind-space-3);
        background: var(--mind-navbarBackgroundColor);
        border-bottom: var(--mind-borderWidth) solid var(--mind-navbarBorderColor);
        box-shadow: var(--mind-shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s;
    }

    body.mind-nav-open .mind-navbar-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        /* overshoot-free "settle" easing on the way in */
        transition: opacity .22s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s;
    }

    /* roomier tap targets; each link eases in just after the sheet lands */
    .mind-navbar-nav .mind-nav-link {
        padding: var(--mind-space-2) var(--mind-space-3);
        border-radius: var(--mind-radiusSm);
        font-size: var(--mind-fontSizeLg);
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .2s ease, transform .2s ease;
    }

    body.mind-nav-open .mind-navbar-nav .mind-nav-link { opacity: 1; transform: none; }
    body.mind-nav-open .mind-navbar-nav .mind-nav-link:nth-child(1) { transition-delay: .06s; }
    body.mind-nav-open .mind-navbar-nav .mind-nav-link:nth-child(2) { transition-delay: .10s; }
    body.mind-nav-open .mind-navbar-nav .mind-nav-link:nth-child(3) { transition-delay: .14s; }
    body.mind-nav-open .mind-navbar-nav .mind-nav-link:nth-child(4) { transition-delay: .18s; }
    body.mind-nav-open .mind-navbar-nav .mind-nav-link:nth-child(5) { transition-delay: .22s; }
    body.mind-nav-open .mind-navbar-nav .mind-nav-link:nth-child(6) { transition-delay: .26s; }

    .mind-navbar-nav .mind-nav-link-active { background: var(--mind-hoverColor); }

    /* dim the page under the sheet; a tap on it closes the menu (wired in app.js) */
    .mind-nav-backdrop {
        display: block;
        position: fixed;
        inset: var(--mind-navbarHeight) 0 0 0;
        z-index: var(--mind-zNavbar);
        background: var(--mind-overlayColor);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, visibility 0s linear .22s;
    }

    body.mind-nav-open .mind-nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .22s ease, visibility 0s;
    }

    /* burger → X */
    body.mind-nav-open .mind-burger-icon { background: transparent; }
    body.mind-nav-open .mind-burger-icon::before { top: 0; transform: rotate(45deg); }
    body.mind-nav-open .mind-burger-icon::after  { top: 0; transform: rotate(-45deg); }

    /* freeze the page behind the sheet (matters at <=720px where the body scrolls) */
    body.mind-nav-open { overflow: hidden; }
}

/* ---------- page scaffold ---------- */

.mind-page {
    max-width: var(--mind-pageMaxWidth);
    margin: 0 auto;
    padding: var(--mind-space-4);
}

.mind-page-title {
    margin: 0 0 var(--mind-space-4);
    font-size: var(--mind-fontSizeXl);
    font-weight: 600;
}

.mind-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--mind-space-4);
    align-items: start;
}

.mind-panel {
    padding: var(--mind-space-4);
}

.mind-panel-highlight {
    border-color: var(--mind-accentSoftBorderColor);
    background: var(--mind-accentSoftColor);
    margin-bottom: var(--mind-space-4);
}

.mind-panel-title {
    margin: 0 0 var(--mind-space-3);
    font-size: var(--mind-fontSizeLg);
    font-weight: 600;
}

.mind-panel-text {
    margin: 0 0 var(--mind-space-3);
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
}

.mind-empty {
    margin: 0;
    color: var(--mind-mutedTextColor);
    font-size: var(--mind-fontSizeSm);
}

/* ---------- tables ---------- */

.mind-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mind-fontSizeSm);
}

.mind-th {
    text-align: left;
    padding: var(--mind-space-1) var(--mind-space-2);
    color: var(--mind-tableHeaderColor);
    font-weight: 500;
    border-bottom: var(--mind-borderWidth) solid var(--mind-tableBorderColor);
}

.mind-td {
    padding: var(--mind-space-2);
    border-bottom: var(--mind-borderWidth) solid var(--mind-tableBorderColor);
    vertical-align: top;
}

.mind-tr:hover {
    background: var(--mind-tableRowHoverColor);
}

.mind-td-time {
    white-space: nowrap;
    color: var(--mind-secondaryTextColor);
}

.mind-td-mono {
    font-family: var(--mind-fontStackMono);
}

.mind-td-muted {
    color: var(--mind-mutedTextColor);
}

/* ---------- pills ---------- */

.mind-pill {
    display: inline-block;
    padding: 1px var(--mind-space-2);
    border-radius: var(--mind-radius);
    background: var(--mind-pillBackgroundColor);
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
}

.mind-pill-success {
    background: var(--mind-successSoftColor);
    color: var(--mind-successColor);
}

.mind-pill-warn {
    background: var(--mind-warnSoftColor);
    color: var(--mind-warnColor);
}

/* ---------- form extras ---------- */

.mind-btn-sm {
    height: var(--mind-controlHeightSm);
    padding: 0 var(--mind-space-3);
    font-size: var(--mind-fontSizeSm);
}

.mind-btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mind-input-mono {
    font-family: var(--mind-fontStackMono);
}

.mind-radio-row {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    margin-bottom: var(--mind-space-2);
    cursor: pointer;
}

.mind-code-block {
    margin: 0;
    padding: var(--mind-space-3);
    background: var(--mind-inputBackgroundColor);
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    border-radius: var(--mind-radiusSm);
    font-family: var(--mind-fontStackMono);
    font-size: var(--mind-fontSize);
    word-break: break-all;
    user-select: all;
}

.mind-alert-success {
    background: var(--mind-successSoftColor);
    border: var(--mind-borderWidth) solid var(--mind-successColor);
    color: var(--mind-successColor);
}

/* ---------- sharing inbox ---------- */

.mind-subheading {
    margin: var(--mind-space-3) 0 var(--mind-space-2);
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mind-transfer-title {
    font-weight: 600;
}

.mind-btn-row {
    display: flex;
    gap: var(--mind-space-2);
}

/* ---------- error page ---------- */

.mind-error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mind-space-4);
}

.mind-error-card {
    width: var(--mind-loginCardWidth);
    max-width: 100%;
    padding: var(--mind-space-5);
    text-align: center;
}

.mind-error-code {
    margin: 0 0 var(--mind-space-2);
    font-size: var(--mind-fontSizeXl);
    color: var(--mind-mutedTextColor);
}

.mind-error-message {
    margin: 0 0 var(--mind-space-3);
    color: var(--mind-secondaryTextColor);
}

/* ---------- password manager ---------- */

.mind-pm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mind-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--mind-space-4);
}

.mind-pm-header .mind-page-title {
    margin: 0;
}

.mind-pm-layout {
    display: grid;
    /* minmax(0,1fr): the detail column takes the remaining width and NEVER grows
       with its content, so the frame stays put when navigating folder<->entry
       (a bare 1fr is minmax(auto,1fr) and would expand to fit wide secrets). */
    grid-template-columns: var(--mind-pmTreeWidth) minmax(0, 1fr);
    gap: var(--mind-space-4);
    align-items: start;
}

@media (max-width: 720px) {
    .mind-pm-layout {
        grid-template-columns: 1fr;
    }
}

.mind-pm-tree-pane {
    padding: var(--mind-space-2);
    max-height: 72vh;
    overflow: auto;
}

.mind-pm-nodes {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mind-pm-node {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    min-height: var(--mind-controlHeightSm);
    padding: var(--mind-space-1) var(--mind-space-2);
    border-radius: var(--mind-radiusSm);
    cursor: pointer;
    user-select: none;
}

.mind-pm-node:hover {
    background: var(--mind-hoverColor);
}

.mind-pm-node-selected,
.mind-pm-node-selected:hover {
    background: var(--mind-selectedSoftColor);
}

.mind-pm-dragging {
    opacity: 0.45;
}

.mind-pm-drop-before {
    box-shadow: inset 0 2px 0 0 var(--mind-accentColor);
}

.mind-pm-drop-after {
    box-shadow: inset 0 -2px 0 0 var(--mind-accentColor);
}

.mind-pm-drop-inside {
    background: var(--mind-accentSoftColor);
    outline: var(--mind-borderWidth) dashed var(--mind-accentColor);
    outline-offset: -1px;
}

.mind-pm-twisty {
    width: 14px;
    color: var(--mind-secondaryTextColor);
    text-align: center;
    flex-shrink: 0;
}

.mind-pm-node-icon {
    display: inline-flex;
    align-items: center;
    color: var(--mind-pmAccentColor);
    flex-shrink: 0;
}

.mind-pm-node-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mind-pm-badge {
    padding: 0 var(--mind-space-2);
    border-radius: var(--mind-radius);
    background: var(--mind-pillBackgroundColor);
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
    white-space: nowrap;
    flex-shrink: 0;
}

.mind-pm-badge-warn {
    background: var(--mind-warnSoftColor);
    color: var(--mind-warnColor);
}

.mind-pm-shared-head {
    margin: var(--mind-space-3) 0 var(--mind-space-1);
    padding: 0 var(--mind-space-2);
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* detail pane */

.mind-pm-detail {
    padding: var(--mind-space-4);
    min-height: 220px;
}

.mind-pm-detail-head {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--mind-space-4);
}

.mind-pm-detail-title {
    margin: 0;
    font-size: var(--mind-fontSizeLg);
    font-weight: 600;
}

.mind-pm-fields {
    display: flex;
    flex-direction: column;
    gap: var(--mind-space-3);
}

.mind-pm-field {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: var(--mind-space-3);
}

.mind-pm-field:empty {
    display: none;
}

.mind-pm-field-label {
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
}

.mind-pm-field-value {
    word-break: break-word;
}

.mind-pm-value-copy {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    flex-wrap: wrap;
}

.mind-pm-secret {
    font-family: var(--mind-fontStackMono);
}

.mind-pm-secret-shown {
    color: var(--mind-accentColor);
}

.mind-pm-notes {
    margin: 0;
    padding: var(--mind-space-2) var(--mind-space-3);
    background: var(--mind-cardAltBackgroundColor);
    border-radius: var(--mind-radiusSm);
    font-family: var(--mind-fontStack);
    white-space: pre-wrap;
}

.mind-pm-totp-code {
    font-family: var(--mind-fontStackMono);
    font-size: var(--mind-fontSizeLg);
    letter-spacing: 2px;
}

.mind-pm-totp-timer {
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
}

.mind-pm-hibp-ok {
    color: var(--mind-successColor);
}

.mind-pm-hibp-bad {
    color: var(--mind-warnColor);
    font-weight: 600;
}

.mind-pm-hibp-unknown {
    color: var(--mind-mutedTextColor);
}

.mind-pm-actions {
    margin-top: var(--mind-space-4);
    flex-wrap: wrap;
}

/* tiny inline buttons */

.mind-btn-tiny {
    height: var(--mind-btnHeightTiny);
    padding: 0 var(--mind-space-2);
    font-size: var(--mind-fontSizeSm);
    border-radius: var(--mind-radiusSm);
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    background: var(--mind-cardAltBackgroundColor);
    color: var(--mind-foregroundColor);
    cursor: pointer;
}

.mind-btn-tiny:hover {
    background: var(--mind-hoverColor);
}

/* editor */

.mind-pm-editor {
    max-width: 540px;
}

.mind-pm-textarea {
    height: auto;
    padding: var(--mind-space-2) var(--mind-space-3);
    line-height: 1.5;
    resize: vertical;
}

.mind-pm-secret-input {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
}

.mind-pm-secret-input .mind-input {
    flex: 1;
    min-width: 0;
}

.mind-pm-generator {
    margin-bottom: var(--mind-space-3);
}

.mind-pm-generator-body {
    margin-top: var(--mind-space-2);
    padding: var(--mind-space-3);
    background: var(--mind-cardAltBackgroundColor);
    border-radius: var(--mind-radiusSm);
    display: flex;
    flex-direction: column;
    gap: var(--mind-space-2);
}

.mind-pm-gen-row {
    display: flex;
    align-items: center;
    gap: var(--mind-space-3);
    flex-wrap: wrap;
}

.mind-pm-gen-len {
    width: 80px;
}

.mind-pm-gen-opt {
    display: flex;
    align-items: center;
    gap: var(--mind-space-1);
    font-size: var(--mind-fontSizeSm);
    cursor: pointer;
}

/* modal */

.mind-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--mind-zModal);
    background: var(--mind-overlayColor);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--mind-space-6) var(--mind-space-4);
    overflow: auto;
}

.mind-modal-overlay[hidden] {
    display: none;
}

.mind-modal {
    width: var(--mind-modalWidth);
    max-width: 100%;
    padding: 0;
}

.mind-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mind-space-3) var(--mind-space-4);
    border-bottom: var(--mind-borderWidth) solid var(--mind-borderColor);
}

.mind-modal-title {
    margin: 0;
    font-size: var(--mind-fontSizeLg);
    font-weight: 600;
}

.mind-modal-close {
    background: none;
    border: none;
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeLg);
    line-height: 1;
    cursor: pointer;
}

.mind-modal-close:hover {
    color: var(--mind-foregroundColor);
}

.mind-modal-body {
    padding: var(--mind-space-4);
}

/* history browser */

.mind-pm-history {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--mind-space-4);
}

@media (max-width: 620px) {
    .mind-pm-history {
        grid-template-columns: 1fr;
    }
}

.mind-pm-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--mind-space-1);
    max-height: 52vh;
    overflow: auto;
}

.mind-pm-history-item {
    justify-content: flex-start;
    text-align: left;
}

/* share form */

.mind-pm-share-form {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    flex-wrap: wrap;
    margin-top: var(--mind-space-2);
}

.mind-pm-audit-row {
    cursor: pointer;
}

/* toast */

.mind-toast {
    position: fixed;
    bottom: var(--mind-space-4);
    left: 50%;
    z-index: var(--mind-zModal);
    padding: var(--mind-space-2) var(--mind-space-4);
    border-radius: var(--mind-radiusSm);
    background: var(--mind-cardAltBackgroundColor);
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    color: var(--mind-foregroundColor);
    box-shadow: var(--mind-shadow);
    font-size: var(--mind-fontSizeSm);
    opacity: 0;
    transform: translate(-50%, 20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.mind-toast-in {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mind-toast-success {
    border-color: var(--mind-successColor);
}

.mind-toast-warn {
    border-color: var(--mind-warnColor);
}

/* ---------- calendar ---------- */

.mind-em-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mind-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--mind-space-4);
}

.mind-em-header .mind-page-title {
    margin: 0;
}

.mind-em-toolbar {
    display: flex;
    align-items: center;
    gap: var(--mind-space-3);
    flex-wrap: wrap;
}

.mind-em-nav {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
}

.mind-em-title {
    margin: 0 0 0 var(--mind-space-2);
    font-size: var(--mind-fontSizeLg);
    font-weight: 600;
    min-width: 160px;
}

.mind-em-calendar {
    padding: var(--mind-space-2);
}

.mind-em-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--mind-emGridGap);
    margin-bottom: var(--mind-space-1);
}

.mind-em-weekday {
    padding: var(--mind-space-1) var(--mind-space-2);
    color: var(--mind-tableHeaderColor);
    font-size: var(--mind-fontSizeSm);
    font-weight: 500;
}

.mind-em-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(var(--mind-emCellMinHeight), auto);
    gap: var(--mind-emGridGap);
}

.mind-em-cell {
    display: flex;
    flex-direction: column;
    gap: var(--mind-space-1);
    min-height: var(--mind-emCellMinHeight);
    padding: var(--mind-space-1);
    background: var(--mind-cardAltBackgroundColor);
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    border-radius: var(--mind-radiusSm);
    cursor: pointer;
    overflow: hidden;
}

.mind-em-cell:hover {
    border-color: var(--mind-borderStrongColor);
}

.mind-em-cell-out {
    background: var(--mind-backgroundColor);
}

.mind-em-cell-out .mind-em-cell-day {
    color: var(--mind-mutedTextColor);
}

.mind-em-cell-today {
    border-color: var(--mind-emTodayColor);
    box-shadow: inset 0 0 0 1px var(--mind-emTodayColor);
}

.mind-em-cell-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.mind-em-cell-day {
    font-size: var(--mind-fontSizeSm);
    color: var(--mind-secondaryTextColor);
}

.mind-em-cell-today .mind-em-cell-day {
    color: var(--mind-emTodayColor);
    font-weight: 700;
}

.mind-em-cell-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.mind-em-event {
    --mind-emEventColor: var(--mind-emTypeOtherColor);
    display: flex;
    align-items: center;
    gap: var(--mind-space-1);
    width: 100%;
    padding: 1px var(--mind-space-1);
    border: none;
    border-radius: var(--mind-radiusSm);
    background: none;
    color: var(--mind-foregroundColor);
    font-family: var(--mind-fontStack);
    font-size: var(--mind-fontSizeSm);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.mind-em-event-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mind-em-event-recur {
    flex-shrink: 0;
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
}

/* per-type default colour (overridden by an inline --mind-emEventColor, §7.1) */
.mind-em-type-birthday { --mind-emEventColor: var(--mind-emTypeBirthdayColor); }
.mind-em-type-health   { --mind-emEventColor: var(--mind-emTypeHealthColor); }
.mind-em-type-holiday  { --mind-emEventColor: var(--mind-emTypeHolidayColor); }
.mind-em-type-school   { --mind-emEventColor: var(--mind-emTypeSchoolColor); }
.mind-em-type-shopping { --mind-emEventColor: var(--mind-emTypeShoppingColor); }
.mind-em-type-sport    { --mind-emEventColor: var(--mind-emTypeSportColor); }
.mind-em-type-vacation { --mind-emEventColor: var(--mind-emTypeVacationColor); }
.mind-em-type-work     { --mind-emEventColor: var(--mind-emTypeWorkColor); }
.mind-em-type-other    { --mind-emEventColor: var(--mind-emTypeOtherColor); }

/* display styles — a filled box, or a coloured bar on one edge */
.mind-em-style-box {
    background: color-mix(in srgb, var(--mind-emEventColor) 22%, transparent);
    box-shadow: inset 2px 0 0 0 var(--mind-emEventColor);
}

.mind-em-style-box:hover {
    background: color-mix(in srgb, var(--mind-emEventColor) 34%, transparent);
}

.mind-em-style-bar-left   { box-shadow: inset 3px 0 0 0 var(--mind-emEventColor); }
.mind-em-style-bar-right  { box-shadow: inset -3px 0 0 0 var(--mind-emEventColor); }
.mind-em-style-bar-top    { box-shadow: inset 0 3px 0 0 var(--mind-emEventColor); }
.mind-em-style-bar-bottom { box-shadow: inset 0 -3px 0 0 var(--mind-emEventColor); }

.mind-em-event:not(.mind-em-style-box):hover {
    background: var(--mind-hoverColor);
}

/* detail + editor */

.mind-em-detail-head {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--mind-space-4);
}

.mind-em-swatch {
    width: 16px;
    height: 16px;
    border-radius: var(--mind-radiusSm);
    background: var(--mind-emEventColor, var(--mind-emTypeOtherColor));
    flex-shrink: 0;
}

.mind-em-editor {
    max-width: 520px;
}

.mind-em-check {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    font-size: var(--mind-fontSize);
    cursor: pointer;
}

.mind-em-datetime {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    flex-wrap: wrap;
}

.mind-em-date {
    flex: 1;
    min-width: 150px;
}

.mind-em-time {
    width: 120px;
}

.mind-em-color-row {
    display: flex;
    align-items: center;
    gap: var(--mind-space-3);
}

.mind-em-color {
    width: 48px;
    height: var(--mind-controlHeight);
    padding: 2px;
    background: var(--mind-inputBackgroundColor);
    border: var(--mind-borderWidth) solid var(--mind-inputBorderColor);
    border-radius: var(--mind-radiusSm);
    cursor: pointer;
}

.mind-em-color:disabled {
    opacity: 0.4;
    cursor: default;
}

@media (max-width: 720px) {
    .mind-em-cell {
        min-height: var(--mind-emCellMinHeightSm);
    }
}

/* ---------- timers ---------- */

.mind-tm-node {
    align-items: flex-start;
}

.mind-tm-node .mind-pm-node-icon {
    color: var(--mind-tmAccentColor);
    padding-top: 1px;
}

.mind-tm-node-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mind-tm-node-sub {
    color: var(--mind-mutedTextColor);
    font-size: var(--mind-fontSizeSm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mind-tm-tts-note {
    margin: 0 0 var(--mind-space-3);
    padding: var(--mind-space-2) var(--mind-space-3);
    background: var(--mind-accentSoftColor);
    border: var(--mind-borderWidth) solid var(--mind-accentSoftBorderColor);
    border-radius: var(--mind-radiusSm);
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
}

/* program breakdown (detail + history preview) */

.mind-tm-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--mind-space-2);
}

.mind-tm-block-card {
    padding: var(--mind-space-2) var(--mind-space-3);
    background: var(--mind-cardAltBackgroundColor);
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    border-radius: var(--mind-radiusSm);
}

.mind-tm-block-head {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    margin-bottom: var(--mind-space-1);
}

.mind-tm-block-name {
    font-weight: 600;
}

.mind-tm-timer-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mind-space-3);
    padding: 2px 0;
    border-top: var(--mind-borderWidth) solid var(--mind-tableBorderColor);
}

.mind-tm-timer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mind-tm-timer-meta {
    display: flex;
    align-items: baseline;
    gap: var(--mind-space-3);
    flex-shrink: 0;
    font-size: var(--mind-fontSizeSm);
}

.mind-tm-timer-dur {
    font-family: var(--mind-fontStackMono);
    color: var(--mind-tmAccentColor);
}

/* tree additions (§13.5): indented children, colour dots, disabled greying */

.mind-tm-breakdown-children {
    display: flex;
    flex-direction: column;
    margin-left: var(--mind-tmNodeIndent);
}

.mind-tm-breakdown-children .mind-tm-block-card {
    margin-top: var(--mind-space-1);
}

.mind-tm-color-dot {
    display: inline-block;
    flex-shrink: 0;
    width: var(--mind-tmColorDotSize);
    height: var(--mind-tmColorDotSize);
    margin-right: var(--mind-space-1);
    border-radius: 50%;
    vertical-align: baseline;
}

.mind-tm-timer-name {
    display: flex;
    align-items: baseline;
}

.mind-tm-node-off {
    opacity: var(--mind-tmOffOpacity);
}

.mind-tm-node-off .mind-tm-node-off {
    opacity: 1; /* the subtree is already greyed by its topmost disabled node */
}

.mind-tm-pill-off {
    text-transform: uppercase;
}

/* editor (§13.3) — one recursive card per node */

.mind-tm-editor {
    max-width: 100%;
}

.mind-tm-ed-nodes {
    display: flex;
    flex-direction: column;
    gap: var(--mind-space-2);
}

.mind-tm-ed-node {
    padding: var(--mind-space-2);
    box-shadow: none;
    background: var(--mind-inputBackgroundColor);
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    border-radius: var(--mind-radiusSm);
}

.mind-tm-ed-node-repeat {
    background: var(--mind-cardAltBackgroundColor);
}

.mind-tm-ed-node-repeat > .mind-tm-ed-nodes {
    margin-left: var(--mind-tmNodeIndent);
    margin-top: var(--mind-space-2);
}

.mind-tm-ed-node-off {
    opacity: var(--mind-tmOffOpacity);
}

.mind-tm-ed-node-off .mind-tm-ed-node-off {
    opacity: 1;
}

/* the card stays operable while greyed — buttons and the options row at full strength */
.mind-tm-ed-node-off > .mind-tm-ed-node-head > .mind-tm-ed-node-btns,
.mind-tm-ed-node-off > .mind-tm-ed-options {
    opacity: 1;
}

.mind-tm-ed-node-head {
    display: flex;
    align-items: flex-end;
    gap: var(--mind-space-2);
    flex-wrap: wrap;
}

.mind-tm-ed-node-btns {
    display: flex;
    align-items: center;
    gap: var(--mind-space-1);
    align-self: center;
    margin-left: auto;
    flex-shrink: 0;
}

.mind-tm-ed-options {
    display: flex;
    align-items: flex-end;
    gap: var(--mind-space-3);
    flex-wrap: wrap;
    margin-top: var(--mind-space-2);
    padding-top: var(--mind-space-2);
    border-top: var(--mind-borderWidth) solid var(--mind-tableBorderColor);
}

.mind-tm-ed-options[hidden] {
    display: none;
}

.mind-tm-ed-optctl {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
}

.mind-tm-ed-cell-toggle {
    justify-content: flex-end;
    padding-bottom: 4px;
}

.mind-tm-ed-add {
    margin-top: var(--mind-space-2);
    margin-bottom: var(--mind-space-3);
}

.mind-tm-ed-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mind-tm-ed-cell-grow {
    flex: 1;
    min-width: 120px;
}

.mind-tm-ed-hint {
    font-size: var(--mind-fontSizeSm);
    color: var(--mind-mutedTextColor);
}

.mind-tm-ed-dur {
    width: 90px;
    font-family: var(--mind-fontStackMono);
}

.mind-tm-ed-label {
    width: 100%;
}

.mind-tm-ed-del {
    flex-shrink: 0;
    align-self: center;
    color: var(--mind-deleteColor);
}

/* ---------- runner (full-screen) ---------- */

.mind-body.mind-tm-running {
    overflow: hidden;
}

.mind-tm-runner {
    position: fixed;
    inset: 0;
    z-index: var(--mind-zModal);
    --mind-tmPhaseColor: var(--mind-tmWorkColor);
    background: var(--mind-backgroundColor);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mind-space-4);
    overflow: auto;
}

.mind-tm-runner[hidden] {
    display: none;
}

/* --mind-tmRunAccent is set per step from the node's colour (tm.js, CSSOM);
   without one the semantic phase colours apply. The final countdown stays red. */
.mind-tm-phase-prep  { --mind-tmPhaseColor: var(--mind-tmRunAccent, var(--mind-tmPrepColor)); }
.mind-tm-phase-work  { --mind-tmPhaseColor: var(--mind-tmRunAccent, var(--mind-tmWorkColor)); }
.mind-tm-phase-final { --mind-tmPhaseColor: var(--mind-tmDangerColor); }
.mind-tm-phase-done  { --mind-tmPhaseColor: var(--mind-tmAccentColor); }

.mind-tm-runner-inner {
    width: 520px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mind-space-2);
    text-align: center;
}

.mind-tm-runner-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mind-space-3);
}

.mind-tm-runner-prog {
    font-size: var(--mind-fontSizeLg);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mind-tm-runner-context {
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
    text-transform: uppercase;
    letter-spacing: 1px;
    min-height: var(--mind-fontSizeLg);
}

.mind-tm-runner-ring {
    --mind-tmRunPct: 0;
    width: min(var(--mind-tmRingSize), 78vw);
    height: min(var(--mind-tmRingSize), 78vw);
    border-radius: 50%;
    background: conic-gradient(var(--mind-tmPhaseColor) calc(var(--mind-tmRunPct) * 360deg), var(--mind-cardAltBackgroundColor) 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--mind-space-3) 0;
    transition: opacity 0.2s ease;
}

.mind-tm-runner-ring-inner {
    width: calc(100% - var(--mind-tmRingThickness) * 2);
    height: calc(100% - var(--mind-tmRingThickness) * 2);
    border-radius: 50%;
    background: var(--mind-backgroundColor);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mind-space-1);
    padding: var(--mind-space-3);
}

.mind-tm-runner-label {
    font-size: var(--mind-fontSizeXl);
    font-weight: 600;
    color: var(--mind-tmPhaseColor);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
}

.mind-tm-runner-clock {
    font-size: var(--mind-tmClockSize);
    font-weight: 700;
    font-family: var(--mind-fontStackMono);
    line-height: 1;
}

.mind-tm-runner-sub {
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
    min-height: var(--mind-fontSizeSm);
}

.mind-tm-runner-next {
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSize);
    min-height: var(--mind-fontSize);
}

.mind-tm-runner-bar {
    width: 100%;
    height: 6px;
    border-radius: var(--mind-radius);
    background: var(--mind-cardAltBackgroundColor);
    overflow: hidden;
    margin-top: var(--mind-space-2);
}

.mind-tm-runner-bar-fill {
    height: 100%;
    width: 0;
    background: var(--mind-tmPhaseColor);
    transition: width 0.15s linear;
}

.mind-tm-runner-overall {
    color: var(--mind-mutedTextColor);
    font-size: var(--mind-fontSizeSm);
    font-family: var(--mind-fontStackMono);
}

.mind-tm-runner-controls {
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
    margin-top: var(--mind-space-4);
}

.mind-tm-run-toggle {
    min-width: 110px;
}

.mind-tm-paused .mind-tm-runner-ring {
    opacity: 0.5;
}

.mind-tm-phase-final .mind-tm-runner-clock {
    animation: mind-tm-pulse 1s ease-in-out infinite;
}

@keyframes mind-tm-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@media (max-width: 480px) {
    :root {
        --mind-tmClockSize: 48px;
    }
    .mind-tm-ed-timer-fields {
        gap: var(--mind-space-1);
    }
}

/* ---------- admin panel + activity log ---------- */

.mind-admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mind-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--mind-space-4);
}

.mind-admin-head .mind-page-title {
    margin: 0;
}

/* stacked panels on the admin pages (direct children of .mind-page); panels
   inside .mind-panel-grid keep using the grid gap, so this must not hit them */
.mind-page > .mind-panel + .mind-panel {
    margin-top: var(--mind-space-4);
}

/* action cells wrap their buttons instead of overflowing on narrow tables */
.mind-btn-row-wrap {
    flex-wrap: wrap;
    row-gap: var(--mind-space-1);
}

.mind-btn-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mind-space-2);
}

/* danger button — destructive actions (delete) */
.mind-btn-danger {
    border-color: var(--mind-warnSoftBorderColor);
    color: var(--mind-warnColor);
}

.mind-btn-danger:hover {
    background: var(--mind-warnSoftColor);
}

.mind-btn-disabled,
.mind-btn-disabled:hover {
    color: var(--mind-inactiveColor);
    background: var(--mind-cardAltBackgroundColor);
    cursor: default;
}

/* inline forms/inputs align on one baseline row */
.mind-admin-form,
.mind-admin-filters {
    display: flex;
    align-items: flex-end;
    gap: var(--mind-space-3);
    flex-wrap: wrap;
}

.mind-admin-form .mind-field,
.mind-admin-filters .mind-field {
    margin-bottom: 0;
}

select.mind-input {
    cursor: pointer;
    min-width: 160px;
}

/* let wide tables scroll on their own rather than breaking page layout */
.mind-table-scroll {
    overflow-x: auto;
}

.mind-pager {
    display: flex;
    align-items: center;
    gap: var(--mind-space-3);
    margin-top: var(--mind-space-4);
}

.mind-pager-info {
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
}

/* =====================================================================
   Phase 8 — SPA shell, custom controls, endless calendar, history rework
   (dev/PLAN.md §12). Colours only from theme roles; px units; .mind-* only.
   ===================================================================== */

/* ---------- fixed-viewport desktop shell (§12.3) ---------- */
@media (min-width: 721px) {
    html, body.mind-app { height: 100%; }
    /* Fixed app viewport: the body never scrolls. The navbar sits at the top in
       normal flow; the page is an absolutely-positioned frame filling the rest.
       Its width comes from the VIEWPORT (min(maxWidth, 100%)) via left/right, so
       content — calendar Rail/Legend, a revealed secret — can never resize or
       shift the frame. Inner regions do their own scrolling. */
    body.mind-app { height: 100vh; overflow: hidden; position: relative; }
    .mind-app .mind-navbar { position: static; }
    .mind-app > main.mind-page {
        position: absolute;
        top: var(--mind-navbarHeight);
        bottom: 0;
        left: var(--mind-pageSide);
        right: var(--mind-pageSide);
        max-width: none;
        margin: 0;
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
    /* module pages fill the frame and never scroll as a whole */
    .mind-app > main.mind-pm,
    .mind-app > main.mind-em,
    .mind-app > main.mind-tm { overflow: hidden; display: flex; flex-direction: column; }
    .mind-app > main.mind-em .mind-em-calendar { flex: 1 1 auto; min-height: 0; }

    /* PM / TM: header on top, then a two-pane region that fills the rest. Both
       panes are absolutely positioned inside it (left = tree, right = detail),
       so neither pane's content can ever move the frame — same principle as the
       page frame, one level down. */
    .mind-app > main.mind-pm .mind-pm-layout,
    .mind-app > main.mind-tm .mind-pm-layout {
        flex: 1 1 auto; min-height: 0; position: relative; display: block; gap: 0;
    }
    .mind-app > main.mind-pm .mind-pm-tree-pane,
    .mind-app > main.mind-tm .mind-pm-tree-pane {
        position: absolute; top: 0; bottom: 0; left: 0;
        width: var(--mind-pmTreeWidth); max-height: none; height: auto; overflow: hidden;
    }
    .mind-app > main.mind-pm .mind-pm-detail,
    .mind-app > main.mind-tm .mind-pm-detail {
        position: absolute; top: 0; bottom: 0; right: 0;
        left: calc(var(--mind-pmTreeWidth) + var(--mind-space-4));
        height: auto; overflow: auto; scrollbar-gutter: stable;
    }
}

/* SPA crossfade between fragments (§12.2) */
.mind-page { transition: opacity .18s ease, transform .18s ease; }
.mind-page-leaving  { opacity: 0; transform: translateY(6px); }
.mind-page-entering { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
    .mind-page { transition: none; }
    .mind-page-leaving, .mind-page-entering { opacity: 1; transform: none; }
    /* keep the anti-flash reveal delay, but drop the fade/rise and the shimmer sweep */
    .mind-em-day-skel { animation-duration: .001s; }
    .mind-em-skel-bar, .mind-em-skel-fill { animation: none; }
    /* the compact menu appears/vanishes with no motion */
    .mind-navbar-nav,
    body.mind-nav-open .mind-navbar-nav,
    .mind-navbar-nav .mind-nav-link,
    body.mind-nav-open .mind-navbar-nav .mind-nav-link,
    .mind-nav-backdrop,
    body.mind-nav-open .mind-nav-backdrop,
    .mind-burger-icon,
    .mind-burger-icon::before,
    .mind-burger-icon::after { transition: none; }
}

/* the tree pane is now a fixed search header above a scrolling tree */
.mind-pm-tree-pane { display: flex; flex-direction: column; }
.mind-pm-tree-search { flex: 0 0 auto; padding: 0 0 var(--mind-space-2); }
.mind-pm-search-input { width: 100%; }
.mind-pm-tree { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
.mind-hl { background: var(--mind-highlightColor); color: inherit; border-radius: 2px; }

/* ---------- inline field validation (§12.6) ---------- */
.mind-form-hint { margin: var(--mind-space-1) 0 0; color: var(--mind-mutedTextColor); font-size: var(--mind-fontSizeSm); }
.mind-field-error { margin: var(--mind-space-1) 0 0; color: var(--mind-warnColor); font-size: var(--mind-fontSizeSm); }
.mind-input[aria-invalid="true"] { border-color: var(--mind-warnColor); }
.mind-check-row { display: flex; align-items: center; gap: var(--mind-space-2); margin: var(--mind-space-2) 0; }

/* ---------- history rework + diff (§12.8e/§12.9) ---------- */
.mind-pm-history-item {
    height: auto; white-space: normal; text-align: left; width: 100%;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: var(--mind-space-2) var(--mind-space-3);
}
.mind-pm-history-v { display: flex; align-items: center; gap: var(--mind-space-2); }
.mind-pm-history-meta { color: var(--mind-mutedTextColor); font-size: var(--mind-fontSizeSm); }
.mind-pm-history-live { border-color: var(--mind-accentSoftBorderColor); }
.mind-diff-changed { background: var(--mind-diffChangedColor); border-radius: var(--mind-radiusSm); padding: 0 var(--mind-space-1); }

/* ---------- custom form controls (§12.4) ---------- */
.mind-control { position: relative; }
.mind-input-sm { height: var(--mind-controlHeightSm); font-size: var(--mind-fontSizeSm); }
.mind-field > .mind-select,
.mind-field > .mind-number,
.mind-field > .mind-date,
.mind-field > .mind-time { width: 100%; }

/* Select */
.mind-select { display: inline-flex; min-width: 150px; vertical-align: middle; }
.mind-select-btn, .mind-color-btn {
    display: inline-flex; align-items: center; gap: var(--mind-space-2);
    height: var(--mind-controlHeight); width: 100%; padding: 0 var(--mind-space-3);
    background: var(--mind-inputBackgroundColor); color: var(--mind-inputTextColor);
    border: var(--mind-borderWidth) solid var(--mind-inputBorderColor);
    border-radius: var(--mind-radiusSm); font: inherit; font-size: var(--mind-fontSize);
    cursor: pointer; text-align: left;
}
.mind-select-btn { justify-content: space-between; }
.mind-select-btn:hover, .mind-color-btn:hover { border-color: var(--mind-borderStrongColor); }
.mind-select-btn:focus-visible, .mind-color-btn:focus-visible { outline: var(--mind-focusRingWidth) solid var(--mind-inputFocusBorderColor); outline-offset: -1px; }
.mind-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mind-select-placeholder { color: var(--mind-inputPlaceholderColor); }
.mind-select-caret { color: var(--mind-secondaryTextColor); flex: none; }

/* popup portal */
.mind-portal { position: fixed; inset: 0; z-index: var(--mind-zPopup); pointer-events: none; }
.mind-portal > * { pointer-events: auto; }
.mind-popup {
    position: fixed; z-index: var(--mind-zPopup);
    background: var(--mind-popupBackgroundColor);
    border: var(--mind-borderWidth) solid var(--mind-borderStrongColor);
    border-radius: var(--mind-radiusSm); box-shadow: var(--mind-shadow); padding: var(--mind-space-1);
}
.mind-select-popup { display: flex; flex-direction: column; gap: var(--mind-space-1); min-width: 180px; }
.mind-select-filter { margin-bottom: var(--mind-space-1); }
.mind-select-list { max-height: var(--mind-popupMaxHeight); overflow: auto; }
.mind-select-opt { padding: var(--mind-space-1) var(--mind-space-3); border-radius: var(--mind-radiusSm); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mind-select-opt:hover, .mind-select-opt-active { background: var(--mind-optionHoverColor); }
.mind-select-opt-sel { color: var(--mind-accentColor); }
.mind-select-opt-disabled { color: var(--mind-mutedTextColor); cursor: default; }

/* Number */
.mind-number { display: inline-flex; align-items: stretch; }
.mind-number-input { width: 64px; text-align: center; border-radius: 0; }
.mind-number-btn {
    width: var(--mind-controlHeight); flex: none;
    border: var(--mind-borderWidth) solid var(--mind-inputBorderColor);
    background: var(--mind-cardAltBackgroundColor); color: var(--mind-foregroundColor);
    cursor: pointer; font-size: var(--mind-fontSizeLg); line-height: 1;
}
.mind-number-btn:first-child { border-radius: var(--mind-radiusSm) 0 0 var(--mind-radiusSm); border-right: none; }
.mind-number-btn:last-child { border-radius: 0 var(--mind-radiusSm) var(--mind-radiusSm) 0; border-left: none; }
.mind-number-btn:hover { background: var(--mind-hoverColor); }

/* Color */
.mind-color-dot { width: 18px; height: 18px; border-radius: var(--mind-radiusSm); border: var(--mind-borderWidth) solid var(--mind-borderColor); flex: none; }
.mind-color-hex { font-family: var(--mind-fontStackMono); font-size: var(--mind-fontSizeSm); }
.mind-color-popup { display: flex; flex-direction: column; gap: var(--mind-space-2); padding: var(--mind-space-2); }
.mind-color-presets { display: grid; grid-template-columns: repeat(6, 22px); gap: var(--mind-space-1); }
.mind-color-preset { width: 22px; height: 22px; border-radius: var(--mind-radiusSm); border: var(--mind-borderWidth) solid var(--mind-borderColor); cursor: pointer; }
.mind-color-preset:hover { outline: 2px solid var(--mind-accentColor); }
.mind-control-disabled { opacity: .5; }
.mind-control-disabled .mind-color-btn { cursor: default; }

/* Professional HSV colour picker (saturation/value area + hue slider + hex) */
.mind-colorpicker { display: flex; flex-direction: column; gap: var(--mind-space-2); padding: var(--mind-space-2); width: 236px; }
.mind-colorpicker-body { display: flex; gap: var(--mind-space-2); height: var(--mind-colorPickerHeight); }
.mind-colorpicker-sv {
    position: relative; flex: 1; border-radius: var(--mind-radiusSm);
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    cursor: crosshair; touch-action: none; overflow: hidden;
    background: hsl(0, 100%, 50%);   /* replaced per-hue via CSSOM */
}
.mind-colorpicker-sv-thumb {
    position: absolute; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55);
    transform: translate(-50%, -50%); pointer-events: none;
}
.mind-colorpicker-hue {
    position: relative; width: 16px; flex: none; border-radius: var(--mind-radiusSm);
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    cursor: ns-resize; touch-action: none;
    background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.mind-colorpicker-hue-thumb {
    position: absolute; left: -2px; right: -2px; height: 6px; border-radius: 3px;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55);
    transform: translateY(-50%); pointer-events: none;
}
.mind-colorpicker-sv:focus-visible, .mind-colorpicker-hue:focus-visible { outline: var(--mind-focusRingWidth) solid var(--mind-inputFocusBorderColor); outline-offset: 2px; }
.mind-colorpicker-foot { display: flex; align-items: center; gap: var(--mind-space-2); }
.mind-colorpicker-preview { width: var(--mind-controlHeight); height: var(--mind-controlHeight); flex: none; border-radius: var(--mind-radiusSm); border: var(--mind-borderWidth) solid var(--mind-borderColor); }
.mind-colorpicker-foot .mind-input { flex: 1; min-width: 0; }
.mind-colorpicker .mind-color-presets { grid-template-columns: repeat(9, 1fr); }

/* Toggle / switch / checkbox */
.mind-toggle { display: inline-flex; align-items: center; gap: var(--mind-space-2); cursor: pointer; }
.mind-toggle-label { font-size: var(--mind-fontSize); }
.mind-switch { width: 40px; height: 22px; padding: 2px; border-radius: 999px; border: var(--mind-borderWidth) solid var(--mind-inputBorderColor); background: var(--mind-switchTrackColor); cursor: pointer; display: inline-flex; align-items: center; flex: none; }
.mind-switch-knob { width: 16px; height: 16px; border-radius: 50%; background: var(--mind-switchKnobColor); transition: transform .12s ease; }
.mind-switch.mind-on { background: var(--mind-switchOnColor); border-color: var(--mind-switchOnColor); justify-content: flex-end; }
.mind-switch.mind-on .mind-switch-knob { background: var(--mind-switchOnKnobColor); }
.mind-checkbox { width: 20px; height: 20px; border-radius: var(--mind-radiusSm); border: var(--mind-borderWidth) solid var(--mind-inputBorderColor); background: var(--mind-inputBackgroundColor); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mind-checkbox-tick { width: 10px; height: 10px; border-radius: 2px; background: transparent; }
.mind-checkbox.mind-on { border-color: var(--mind-switchOnColor); background: var(--mind-switchOnColor); }
.mind-checkbox.mind-on .mind-checkbox-tick { background: var(--mind-switchOnKnobColor); }
.mind-switch:focus-visible, .mind-checkbox:focus-visible, .mind-seg-btn:focus-visible { outline: var(--mind-focusRingWidth) solid var(--mind-inputFocusBorderColor); }

/* Segmented control (RadioGroup + Rail|Legend toggle) */
.mind-seg { display: inline-flex; border: var(--mind-borderWidth) solid var(--mind-inputBorderColor); border-radius: var(--mind-radiusSm); overflow: hidden; }
.mind-seg-btn { height: var(--mind-controlHeightSm); padding: 0 var(--mind-space-3); border: none; background: var(--mind-inputBackgroundColor); color: var(--mind-secondaryTextColor); cursor: pointer; font: inherit; font-size: var(--mind-fontSizeSm); }
.mind-seg-btn + .mind-seg-btn { border-left: var(--mind-borderWidth) solid var(--mind-inputBorderColor); }
/* Only inactive buttons get the plain hover fill, and they lift to full-contrast
   text — the active (amber) button darkening its own text on a dark hover fill
   was the dark-on-dark unreadable state. The active button keeps its accent. */
.mind-seg-btn:hover:not(.mind-seg-on) { background: var(--mind-hoverColor); color: var(--mind-foregroundColor); }
.mind-seg-on { background: var(--mind-accentFillColor); color: var(--mind-onAccentColor); font-weight: 600; }
.mind-seg-on:hover { background: var(--mind-accentFillHoverColor); }

/* Date / Time fields */
.mind-date, .mind-time { display: inline-flex; align-items: stretch; }
.mind-date-input, .mind-time-input { flex: 1; min-width: 0; border-radius: var(--mind-radiusSm) 0 0 var(--mind-radiusSm); border-right: none; }
.mind-date-btn { width: var(--mind-controlHeight); flex: none; border: var(--mind-borderWidth) solid var(--mind-inputBorderColor); border-radius: 0 var(--mind-radiusSm) var(--mind-radiusSm) 0; background: var(--mind-cardAltBackgroundColor); color: var(--mind-secondaryTextColor); cursor: pointer; }
.mind-date-btn:hover { background: var(--mind-hoverColor); }

/* month-grid date picker */
.mind-datepick { padding: var(--mind-space-2); width: 248px; }
.mind-datepick-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--mind-space-1); }
.mind-datepick-title { font-weight: 600; }
.mind-datepick-nav { border: none; background: none; color: var(--mind-secondaryTextColor); font-size: var(--mind-fontSizeLg); cursor: pointer; padding: 0 var(--mind-space-2); }
.mind-datepick-nav:hover { color: var(--mind-foregroundColor); }
.mind-datepick-dow, .mind-datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mind-datepick-dow span { text-align: center; color: var(--mind-mutedTextColor); font-size: var(--mind-fontSizeXs); }
.mind-datepick-day { aspect-ratio: 1 / 1; border: none; background: none; color: var(--mind-foregroundColor); border-radius: var(--mind-radiusSm); cursor: pointer; font: inherit; font-size: var(--mind-fontSizeSm); }
.mind-datepick-day:hover { background: var(--mind-hoverColor); }
.mind-datepick-out { color: var(--mind-mutedTextColor); }
.mind-datepick-today { outline: var(--mind-borderWidth) solid var(--mind-accentSoftBorderColor); }
.mind-datepick-sel { background: var(--mind-accentFillColor); color: var(--mind-onAccentColor); }
.mind-datepick-foot { margin-top: var(--mind-space-2); display: flex; justify-content: center; }

/* time picker columns */
.mind-time-cols { display: flex; gap: var(--mind-space-1); }
.mind-time-col { max-height: 200px; overflow: auto; display: flex; flex-direction: column; }
.mind-time-opt { padding: var(--mind-space-1) var(--mind-space-4); border: none; background: none; color: var(--mind-foregroundColor); cursor: pointer; font: inherit; }
.mind-time-opt:hover { background: var(--mind-hoverColor); }
.mind-time-opt-sel { background: var(--mind-accentSoftColor); color: var(--mind-accentColor); }

/* ---------- calendar endless scroller (§12.7) ---------- */
.mind-em-header-left { display: flex; align-items: center; gap: var(--mind-space-3); flex-wrap: wrap; }
.mind-em-header-left .mind-page-title { margin: 0; }
/* Fixed width + truncation: the month/year label is rewritten on every scroll,
   so it must never change its own or the toolbar's geometry (no jumping header). */
.mind-em-context { color: var(--mind-secondaryTextColor); font-size: var(--mind-fontSizeLg); font-weight: 600; width: var(--mind-emContextWidth); flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mind-em-search-wrap { position: relative; }
.mind-em-search-input { width: 220px; max-width: 100%; }
.mind-em-search-results { position: absolute; top: calc(100% + 4px); right: 0; left: auto; width: 300px; max-width: 90vw; max-height: 320px; overflow: auto; z-index: var(--mind-zPopup); background: var(--mind-popupBackgroundColor); border: var(--mind-borderWidth) solid var(--mind-borderStrongColor); border-radius: var(--mind-radiusSm); box-shadow: var(--mind-shadow); }
.mind-em-search-results[hidden] { display: none; }
.mind-em-result { display: flex; align-items: center; gap: var(--mind-space-2); width: 100%; border: none; background: none; color: var(--mind-foregroundColor); font: inherit; padding: var(--mind-space-1) var(--mind-space-3); cursor: pointer; text-align: left; }
.mind-em-result:hover { background: var(--mind-optionHoverColor); }
.mind-em-result-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mind-em-result-date { color: var(--mind-mutedTextColor); font-size: var(--mind-fontSizeSm); }
.mind-em-result-empty { padding: var(--mind-space-2) var(--mind-space-3); color: var(--mind-mutedTextColor); font-size: var(--mind-fontSizeSm); }

.mind-em-calendar { padding: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
/* scrollbar-gutter: stable reserves the scrollbar's width at all times so the 7
   day columns never shift sideways as the scrollbar comes and goes on scroll. */
.mind-em-scroller { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 0 var(--mind-space-2) var(--mind-space-2); }
/* Below the desktop fixed-viewport breakpoint the page scrolls the body, so the
   scroller needs its own definite height to have something to scroll. */
@media (max-width: 720px) { .mind-em-scroller { height: 70vh; } }
.mind-em-head-row { position: sticky; top: 0; z-index: 2; display: flex; gap: var(--mind-emGridGap); background: var(--mind-cardBackgroundColor); border-bottom: var(--mind-borderWidth) solid var(--mind-borderColor); padding: var(--mind-space-1) 0; }
.mind-em-gutter { width: var(--mind-emGutterWidth); flex: none; display: flex; align-items: flex-start; justify-content: center; color: var(--mind-mutedTextColor); font-size: var(--mind-fontSizeXs); padding-top: 2px; }
.mind-em-gutter-head { align-items: center; padding-top: 0; }
.mind-em-head-days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--mind-emGridGap); }
.mind-em-head-day { text-align: center; color: var(--mind-tableHeaderColor); font-size: var(--mind-fontSizeSm); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* virtualized rows: a tall relative canvas holds absolute week rows placed at
   index*pitch; only the visible span + a small buffer live in the DOM (§12.7).
   Every row is exactly --mind-emWeekRowH tall so the offsets stay computable. */
.mind-em-canvas { position: relative; width: 100%; }
.mind-em-week { position: absolute; left: 0; right: 0; height: var(--mind-emWeekRowH); display: flex; gap: var(--mind-emGridGap); }
.mind-em-days { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--mind-emGridGap); }
.mind-em-day { display: flex; flex-direction: column; gap: var(--mind-emDayGap); padding: var(--mind-emDayPad); height: 100%; background: var(--mind-cardAltBackgroundColor); border: var(--mind-borderWidth) solid var(--mind-borderColor); border-radius: var(--mind-radiusSm); min-width: 0; cursor: pointer; overflow: hidden; }
.mind-em-day-today { border-color: var(--mind-emTodayColor); box-shadow: inset 0 0 0 1px var(--mind-emTodayColor); }
.mind-em-day-head { display: flex; align-items: center; justify-content: flex-end; gap: var(--mind-space-1); height: var(--mind-emDayHeadHeight); flex: none; }
.mind-em-day-num { flex: none; font-size: var(--mind-fontSizeSm); color: var(--mind-secondaryTextColor); }
.mind-em-day-today .mind-em-day-num { color: var(--mind-emTodayColor); font-weight: 700; }
/* month tag on the 1st, pinned left (margin-right:auto keeps the number at right) */
.mind-em-day-month { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--mind-fontSizeXs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--mind-emMonthLabelColor); }
/* weekends recede slightly; the 1st of a month gets a faint top accent rule */
.mind-em-day-weekend { background: var(--mind-emWeekendBackgroundColor); }
.mind-em-day-first { box-shadow: inset 0 2px 0 0 var(--mind-accentSoftBorderColor); }
.mind-em-day-today.mind-em-day-first { box-shadow: inset 0 0 0 1px var(--mind-emTodayColor); }

/* loading skeleton (a still-fetching day). The skeleton is invisible for a short
   beat, then eases in — so quick sub-second fetches swap in real content before a
   skeleton is ever painted, and scrolling through fresh weeks no longer flashes a
   wall of shimmer. Only a fetch that genuinely outlasts the beat reveals a calm,
   slow, low-contrast shimmer that fades up gently rather than snapping on. */
.mind-em-day-skel {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--mind-space-1);
    opacity: 0;
    animation: mind-em-skel-in .55s ease .45s forwards;
}
@keyframes mind-em-skel-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.mind-em-skel-bar { height: 14px; flex: none; border-radius: 2px; }
.mind-em-skel-narrow { width: 55%; }
.mind-em-skel-fill { flex: 1; min-height: 0; border-radius: var(--mind-radiusSm); }
.mind-em-skel-bar, .mind-em-skel-fill {
    background: linear-gradient(90deg, var(--mind-skeletonBaseColor) 25%, var(--mind-skeletonHighlightColor) 50%, var(--mind-skeletonBaseColor) 75%);
    background-size: 400px 100%;
    animation: mind-em-shimmer 2.2s ease-in-out infinite;
}
@keyframes mind-em-shimmer { 0% { background-position: 200px 0; } 100% { background-position: -200px 0; } }

/* thin indeterminate loading bar across the top of the calendar card. It fades
   in only after a short delay (set in em.js) so quick, sub-second fetches never
   flash it — and fades out rather than vanishing. */
.mind-em-loadbar { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; z-index: 5; background: var(--mind-accentSoftColor); pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.mind-em-loadbar-show { opacity: 1; }
.mind-em-loadbar-fill { position: absolute; top: 0; height: 100%; width: 40%; background: var(--mind-accentColor); border-radius: 2px; }
.mind-em-loadbar-show .mind-em-loadbar-fill { animation: mind-em-loadslide 1.1s ease-in-out infinite; }
@keyframes mind-em-loadslide { 0% { left: -40%; } 100% { left: 100%; } }

/* floating "scroll to today" button, shown only when today is off-screen */
.mind-em-home {
    position: absolute; right: var(--mind-space-4); bottom: var(--mind-space-4); z-index: 6;
    display: inline-flex; align-items: center; gap: var(--mind-space-2);
    height: var(--mind-controlHeight); padding: 0 var(--mind-space-4);
    border: var(--mind-borderWidth) solid var(--mind-accentSoftBorderColor); border-radius: 999px;
    background: var(--mind-accentFillColor); color: var(--mind-onAccentColor);
    font: inherit; font-size: var(--mind-fontSizeSm); font-weight: 600; cursor: pointer;
    box-shadow: var(--mind-shadow);
}
.mind-em-home[hidden] { display: none; }
.mind-em-home:hover { background: var(--mind-accentFillHoverColor); }
.mind-em-home:focus-visible { outline: var(--mind-focusRingWidth) solid var(--mind-inputFocusBorderColor); outline-offset: 2px; }
.mind-em-home-icon { font-size: var(--mind-fontSizeLg); line-height: 1; }

.mind-em-allday { display: flex; flex-direction: column; gap: 1px; height: var(--mind-emAllDayHeight); flex: none; overflow: hidden; }
.mind-em-bar { --mind-emEventColor: var(--mind-emTypeOtherColor); display: flex; align-items: center; gap: 2px; height: 16px; padding: 0 var(--mind-space-1); border: none; background: color-mix(in srgb, var(--mind-emEventColor) 26%, transparent); box-shadow: inset 2px 0 0 0 var(--mind-emEventColor); color: var(--mind-foregroundColor); font: inherit; font-size: var(--mind-fontSizeXs); cursor: pointer; text-align: left; border-radius: 2px; overflow: hidden; }
.mind-em-bar:not(.mind-em-bar-start) { box-shadow: none; }
.mind-em-bar-start { border-top-left-radius: var(--mind-radiusSm); border-bottom-left-radius: var(--mind-radiusSm); }
.mind-em-bar-end { border-top-right-radius: var(--mind-radiusSm); border-bottom-right-radius: var(--mind-radiusSm); }
.mind-em-bar:hover { background: color-mix(in srgb, var(--mind-emEventColor) 40%, transparent); }
.mind-em-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mind-em-more { align-self: flex-start; border: none; background: none; color: var(--mind-linkColor); font: inherit; font-size: var(--mind-fontSizeXs); cursor: pointer; padding: 0 var(--mind-space-1); }

.mind-em-strip { position: relative; width: 100%; height: var(--mind-emStripHeight); flex: none; overflow: hidden; }
.mind-em-strip-grid { position: absolute; inset: 0; }
.mind-em-hourline { position: absolute; left: 0; right: 0; border-top: var(--mind-borderWidth) solid var(--mind-gridlineColor); }
.mind-em-noontick { position: absolute; left: 0; right: 0; border-top: var(--mind-borderWidth) dashed var(--mind-gridlineColor); }
.mind-em-band { --mind-emEventColor: var(--mind-emTypeOtherColor); position: absolute; border: none; border-radius: 2px; background: color-mix(in srgb, var(--mind-emEventColor) 55%, transparent); box-shadow: inset 2px 0 0 0 var(--mind-emEventColor); cursor: pointer; padding: 0; }
.mind-em-band:hover { background: color-mix(in srgb, var(--mind-emEventColor) 72%, transparent); }
.mind-em-nowline { position: absolute; left: 0; right: 0; border-top: 2px solid var(--mind-nowLineColor); z-index: 3; }

.mind-em-railwrap { display: flex; gap: var(--mind-space-1); height: var(--mind-emStripHeight); flex: none; }
.mind-em-strip-rail { width: var(--mind-emRailWidth); flex: none; }
.mind-em-rail-titles { position: relative; flex: 1; min-width: 0; }
.mind-em-rail-line { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 2px; border: none; background: none; color: var(--mind-foregroundColor); font: inherit; font-size: var(--mind-fontSizeXs); cursor: pointer; text-align: left; overflow: hidden; white-space: nowrap; padding: 0; }
.mind-em-legend { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1px; padding: 1px 2px; pointer-events: none; }
.mind-em-legend-line { pointer-events: auto; display: flex; align-items: center; gap: 3px; border: none; background: none; color: var(--mind-foregroundColor); font: inherit; font-size: var(--mind-fontSizeXs); cursor: pointer; text-align: left; overflow: hidden; white-space: nowrap; padding: 0; }
.mind-em-legend-count { color: var(--mind-mutedTextColor); font-size: var(--mind-fontSizeXs); padding: 1px 2px; }
.mind-em-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mind-emEventColor, var(--mind-emTypeOtherColor)); flex: none; }
.mind-em-legend-text { overflow: hidden; text-overflow: ellipsis; }

.mind-em-tooltip { position: fixed; z-index: var(--mind-zPopup); max-width: 280px; padding: var(--mind-space-2) var(--mind-space-3); pointer-events: none; }
.mind-em-tooltip-title { font-weight: 600; }
.mind-em-tooltip-when, .mind-em-tooltip-type { color: var(--mind-secondaryTextColor); font-size: var(--mind-fontSizeSm); }

.mind-em-daylist { display: flex; flex-direction: column; gap: var(--mind-space-1); }
.mind-em-daylist-item { display: flex; align-items: center; gap: var(--mind-space-2); border: none; background: none; color: var(--mind-foregroundColor); font: inherit; padding: var(--mind-space-1); cursor: pointer; text-align: left; border-radius: var(--mind-radiusSm); }
.mind-em-daylist-item:hover { background: var(--mind-hoverColor); }

/* editor date/time rows reuse .mind-em-datetime */
.mind-em-datetime .mind-date { flex: 1; min-width: 150px; }
.mind-em-datetime .mind-time { width: 130px; }

/* ---------- navbar: idle-logout countdown + icon buttons ---------- */

.mind-idle-timer {
    min-width: 44px;
    color: var(--mind-mutedTextColor);
    font-family: var(--mind-fontStackMono);
    font-size: var(--mind-fontSizeSm);
    text-align: right;
}

.mind-idle-timer-warn {
    color: var(--mind-warnColor);
    font-weight: 600;
}

.mind-logout-btn {
    width: var(--mind-controlHeightSm);
    padding: 0;
}

/* ---------- pm: copy-on-label + eye reveal ---------- */

/* label cell hosting text + the eye toggle, right-aligned in the label column */
.mind-pm-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mind-space-2);
}

.mind-pm-label-copy {
    cursor: pointer;
}

.mind-pm-label-copy:hover {
    color: var(--mind-foregroundColor);
    text-decoration: underline dotted;
}

/* icon-only reveal toggle; the revealed state inverts it */
.mind-pm-eye {
    width: 24px;
    height: 24px;
    padding: 0;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--mind-borderWidth) solid var(--mind-borderColor);
    border-radius: var(--mind-radiusSm);
    background: none;
    color: var(--mind-secondaryTextColor);
    font-size: var(--mind-fontSizeSm);
    cursor: pointer;
}

.mind-pm-eye:hover {
    color: var(--mind-foregroundColor);
    background: var(--mind-hoverColor);
}

.mind-pm-eye-on,
.mind-pm-eye-on:hover {
    background: var(--mind-foregroundColor);
    border-color: var(--mind-foregroundColor);
    color: var(--mind-backgroundColor);
}

/* pm tree + toolbar icons (Font Awesome) */
.mind-pm-node-icon .fa-solid {
    font-size: 13px;
}

.mind-btn .fa-solid {
    margin-right: var(--mind-space-1);
}

.mind-btn-icon-only .fa-solid {
    margin-right: 0;
}

/* ---------- pm: icon action buttons in the detail head ---------- */

.mind-pm-head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--mind-space-2);
}

.mind-btn-icon {
    width: var(--mind-controlHeightSm);
    padding: 0;
}

.mind-btn-icon .fa-solid {
    margin-right: 0;
}

.mind-btn-icon-danger:hover {
    color: var(--mind-warnColor);
    border-color: var(--mind-warnColor);
}

/* ---------- shared dialog overlay (controls.js dialog()) ---------- */

.mind-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--mind-zPopup);
    background: var(--mind-overlayColor);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mind-space-4);
}

.mind-dialog {
    width: 440px;
    max-width: 100%;
    padding: var(--mind-space-4);
}

.mind-dialog-title {
    margin: 0 0 var(--mind-space-2);
    font-size: var(--mind-fontSizeLg);
    font-weight: 600;
}

.mind-dialog-message {
    margin: 0 0 var(--mind-space-4);
    color: var(--mind-secondaryTextColor);
    white-space: pre-line;
    word-break: break-word;
}

.mind-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--mind-space-2);
}

/* custom file-pick trigger (the native input stays hidden) */
.mind-file-hidden {
    display: none;
}