/* _content/ETuteApp.UI.Shared/Components/Chatbot/ChatbotWidget.razor.rz.scp.css */
/* Chatbot Widget Styles — Fresh Campus (cyan #06b6d4 / coral #f97316, Sora + Manrope).
   Tokens come from design-tokens.css; literals are fallbacks for contexts where it
   hasn't loaded. Icons render via <RadzenIcon> (Material Symbols, .rzi). */
.chatbot-widget[b-5k51kuo4dt] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: var(--body, 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* Toggle Button */
.chatbot-toggle-btn[b-5k51kuo4dt] {
    width: 60px;
    height: 60px;
    border-radius: var(--r-pill, 999px);
    background: var(--cyan, #06b6d4);
    border: none;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px var(--cyan-ring, rgba(6, 182, 212, .35));
    transition: transform 0.2s var(--ease, ease), background 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chatbot-toggle-btn .rzi[b-5k51kuo4dt] {
    font-size: 28px;
}

.chatbot-toggle-btn:hover[b-5k51kuo4dt] {
    transform: scale(1.05);
    background: var(--cyan-deep, #0891b2);
    box-shadow: 0 10px 26px var(--cyan-ring, rgba(6, 182, 212, .45));
}

.chatbot-toggle-btn.active[b-5k51kuo4dt] {
    background: var(--cyan-deep, #0891b2);
}

.chatbot-badge[b-5k51kuo4dt] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--coral, #f97316);
    color: #fff;
    border-radius: var(--r-pill, 999px);
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(249, 115, 22, .4);
}

/* Chat Popup */
.chatbot-popup[b-5k51kuo4dt] {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 380px;
    height: 600px;
    max-height: calc(100vh - 120px);
    background: var(--surface, #fff);
    border-radius: var(--r-xl, 20px);
    border: 1px solid var(--line, #e3eef2);
    box-shadow: var(--shadow-lg, 0 10px 24px rgba(11, 23, 51, .08), 0 30px 60px rgba(11, 23, 51, .10));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-b-5k51kuo4dt 0.3s var(--ease, ease);
}

@keyframes slideUp-b-5k51kuo4dt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.chatbot-header[b-5k51kuo4dt] {
    background: var(--cyan, #06b6d4);
    color: #fff;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-header-content[b-5k51kuo4dt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chatbot-header-content .rzi[b-5k51kuo4dt] {
    font-size: 26px;
}

.chatbot-header h4[b-5k51kuo4dt] {
    margin: 0;
    font-family: var(--display, 'Sora', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.chatbot-header small[b-5k51kuo4dt] {
    font-size: 12px;
    opacity: 0.9;
}

.chatbot-header-actions[b-5k51kuo4dt] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-5k51kuo4dt] {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-icon .rzi[b-5k51kuo4dt] {
    font-size: 18px;
}

.btn-icon:hover[b-5k51kuo4dt] {
    background: rgba(255, 255, 255, 0.32);
}

/* Messages Container */
.chatbot-messages[b-5k51kuo4dt] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--canvas, #f2fbfd);
    scroll-behavior: smooth;
}

.chatbot-messages[b-5k51kuo4dt]::-webkit-scrollbar {
    width: 6px;
}

.chatbot-messages[b-5k51kuo4dt]::-webkit-scrollbar-thumb {
    background: var(--cyan-wash-2, #cffafe);
    border-radius: 3px;
}

/* Welcome Screen */
.chatbot-welcome[b-5k51kuo4dt] {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted, #64748b);
}

.chatbot-welcome .rzi[b-5k51kuo4dt] {
    color: var(--cyan, #06b6d4);
    margin-bottom: 16px;
}

.chatbot-welcome h5[b-5k51kuo4dt] {
    margin: 16px 0 8px;
    font-family: var(--display, 'Sora', system-ui, sans-serif);
    color: var(--ink, #0b1733);
}

.chatbot-suggestions[b-5k51kuo4dt] {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-suggestion[b-5k51kuo4dt] {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    padding: 10px 16px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    font-size: 13px;
    color: var(--cyan-deep, #0891b2);
    font-weight: 500;
    transition: all 0.2s;
    text-align: left;
}

.btn-suggestion:hover[b-5k51kuo4dt] {
    background: var(--cyan-wash, #ecfeff);
    border-color: var(--cyan, #06b6d4);
}

/* Messages */
.chatbot-message[b-5k51kuo4dt] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    animation: fadeIn-b-5k51kuo4dt 0.3s ease;
}

@keyframes fadeIn-b-5k51kuo4dt {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chatbot-message.user[b-5k51kuo4dt] {
    flex-direction: row-reverse;
}

.message-icon[b-5k51kuo4dt] {
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill, 999px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.message-icon .rzi[b-5k51kuo4dt] {
    font-size: 20px;
}

.chatbot-message.user .message-icon[b-5k51kuo4dt] {
    background: var(--cyan, #06b6d4);
    color: #fff;
}

/* Assistant speaks as Etute — warm coral accent (mirrors the EtAiCard treatment). */
.chatbot-message.assistant .message-icon[b-5k51kuo4dt] {
    background: var(--coral-wash, #fff1e6);
    color: var(--coral, #f97316);
}

.message-content[b-5k51kuo4dt] {
    flex: 1;
    background: var(--surface, #fff);
    padding: 12px 16px;
    border-radius: var(--r-lg, 16px);
    border: 1px solid var(--line, #e3eef2);
    box-shadow: var(--shadow-sm, 0 2px 5px rgba(11, 23, 51, .05));
    position: relative;
}

.chatbot-message.user .message-content[b-5k51kuo4dt] {
    background: var(--cyan, #06b6d4);
    border-color: var(--cyan, #06b6d4);
    color: #fff;
}

.message-content p[b-5k51kuo4dt] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.message-content a[b-5k51kuo4dt] {
    color: var(--cyan-deep, #0891b2);
    font-weight: 600;
}

.chatbot-message.user .message-content a[b-5k51kuo4dt] {
    color: #fff;
    text-decoration: underline;
}

.message-content ul[b-5k51kuo4dt],
.message-content ol[b-5k51kuo4dt] {
    margin: 8px 0;
    padding-left: 20px;
}

.message-content h1[b-5k51kuo4dt], .message-content h2[b-5k51kuo4dt], .message-content h3[b-5k51kuo4dt],
.message-content h4[b-5k51kuo4dt], .message-content h5[b-5k51kuo4dt], .message-content h6[b-5k51kuo4dt] {
    margin: 12px 0 8px;
    font-family: var(--display, 'Sora', system-ui, sans-serif);
    font-size: 15px;
    font-weight: 600;
}

.message-content table[b-5k51kuo4dt] {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
    font-size: 13px;
}

.message-content table th[b-5k51kuo4dt],
.message-content table td[b-5k51kuo4dt] {
    padding: 8px;
    border: 1px solid var(--line, #e3eef2);
    text-align: left;
}

.message-content code[b-5k51kuo4dt] {
    background: var(--cyan-wash, #ecfeff);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.message-time[b-5k51kuo4dt] {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.7;
}

.ai-badge[b-5k51kuo4dt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--coral-wash, #fff1e6);
    color: var(--coral, #f97316);
    padding: 2px 8px;
    border-radius: var(--r-pill, 999px);
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
}

.ai-badge .rzi[b-5k51kuo4dt] {
    font-size: 13px;
}

/* Typing Indicator */
.typing-indicator[b-5k51kuo4dt] {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.typing-indicator span[b-5k51kuo4dt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan, #06b6d4);
    animation: typing-b-5k51kuo4dt 1.4s infinite;
}

.typing-indicator span:nth-child(2)[b-5k51kuo4dt] {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3)[b-5k51kuo4dt] {
    animation-delay: 0.4s;
}

@keyframes typing-b-5k51kuo4dt {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Input Area */
.chatbot-input-area[b-5k51kuo4dt] {
    padding: 16px;
    background: var(--surface, #fff);
    border-top: 1px solid var(--line, #e3eef2);
}

.chatbot-error[b-5k51kuo4dt] {
    background: var(--red-wash, #fdeaef);
    color: var(--red, #e11d48);
    padding: 8px 12px;
    border-radius: var(--r, 12px);
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chatbot-error .rzi[b-5k51kuo4dt] {
    font-size: 18px;
}

.chatbot-input-wrapper[b-5k51kuo4dt] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chatbot-input[b-5k51kuo4dt] {
    flex: 1;
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r-pill, 999px);
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
}

.chatbot-input:focus[b-5k51kuo4dt] {
    border-color: var(--cyan, #06b6d4);
    box-shadow: 0 0 0 3px var(--cyan-ring, rgba(6, 182, 212, .16));
}

.chatbot-input:disabled[b-5k51kuo4dt] {
    background: var(--gray-100, #f1f5f9);
    cursor: not-allowed;
}

.btn-send[b-5k51kuo4dt] {
    background: var(--cyan, #06b6d4);
    border: none;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.btn-send .rzi[b-5k51kuo4dt] {
    font-size: 20px;
}

.btn-send:hover:not(:disabled)[b-5k51kuo4dt] {
    background: var(--cyan-deep, #0891b2);
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--cyan-ring, rgba(6, 182, 212, .35));
}

.btn-send:disabled[b-5k51kuo4dt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.chatbot-hint[b-5k51kuo4dt] {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--placeholder, #94a3b8);
    text-align: center;
}

/* Responsive Design for Mobile/Tablet */
@media (max-width: 768px) {
    .chatbot-widget[b-5k51kuo4dt] {
        bottom: 10px;
        right: 10px;
    }

    .chatbot-toggle-btn[b-5k51kuo4dt] {
        width: 56px;
        height: 56px;
    }

    .chatbot-popup[b-5k51kuo4dt] {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .chatbot-header[b-5k51kuo4dt] {
        padding: 12px 16px;
    }

    .chatbot-messages[b-5k51kuo4dt] {
        padding: 12px;
    }

    .chatbot-input-area[b-5k51kuo4dt] {
        padding: 12px;
    }

    .chatbot-welcome[b-5k51kuo4dt] {
        padding: 30px 16px;
    }

    .message-content[b-5k51kuo4dt] {
        max-width: 85%;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .chatbot-toggle-btn[b-5k51kuo4dt] {
        width: 52px;
        height: 52px;
    }

    .chatbot-header h4[b-5k51kuo4dt] {
        font-size: 15px;
    }

    .chatbot-header small[b-5k51kuo4dt] {
        font-size: 11px;
    }

    .message-content[b-5k51kuo4dt] {
        font-size: 13px;
        padding: 10px 14px;
    }

    .chatbot-input[b-5k51kuo4dt] {
        font-size: 13px;
        padding: 8px 14px;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Common/PhoneInputField.razor.rz.scp.css */
/* Desktop (>=1025px, fine pointer): horizontal, country compact left, number fills remaining width */
.phone-input-field .phone-country[b-l0o68anqvj] {
    width: 120px;
    flex: 0 0 120px;
}

.phone-input-field .phone-number[b-l0o68anqvj] {
    flex: 1 1 auto;
    min-width: 180px;
}

/* Tablet & phone: stack vertically — each control takes the full row width */
@media (pointer: coarse), (max-width: 1024px) {
    .phone-input-field .phone-country[b-l0o68anqvj],
    .phone-input-field .phone-number[b-l0o68anqvj] {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
    }
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtAiCard.razor.rz.scp.css */
.et-aicard[b-471eh9t4cp] {
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--warm-line);
    background: var(--grad-warm);
    border-radius: var(--r-xl);
    padding: 14px 16px;
}

.et-aicard__orb[b-471eh9t4cp] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.et-aicard__orb[b-471eh9t4cp]  i {
    color: #fff;
    font-size: 19px;
}

.et-aicard__body[b-471eh9t4cp] {
    flex: 1;
    min-width: 0;
}

.et-aicard__title[b-471eh9t4cp] {
    font-weight: 700;
    font-size: var(--fs-body);
    color: var(--ink);
}

.et-aicard__sub[b-471eh9t4cp] {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    margin-top: 2px;
}

.et-aicard__act[b-471eh9t4cp] {
    flex: none;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtAskBar.razor.rz.scp.css */
.et-ask[b-n3mg9v4srs] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 7px 8px 7px 10px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}

.et-ask:hover[b-n3mg9v4srs] {
    border-color: var(--cyan-wash-2);
}

.et-ask:focus-visible[b-n3mg9v4srs] {
    outline: none;
    box-shadow: 0 0 0 3px var(--cyan-ring);
}

.et-ask__orb[b-n3mg9v4srs] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cyan);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.et-ask__orb[b-n3mg9v4srs]  i {
    color: #fff;
    font-size: 15px;
}

.et-ask__ph[b-n3mg9v4srs] {
    flex: 1;
    color: var(--muted);
    font-size: var(--fs-ui);
}

.et-ask__kbd[b-n3mg9v4srs] {
    font-size: var(--fs-xs);
    color: var(--placeholder);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 6px;
    flex: none;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtDialogShell.razor.rz.scp.css */
.et-dlg[b-ittoq6kqo1] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Self-cap the shell height so a tall dialog scrolls its body instead of
       overflowing the viewport. Independent of the parent chain — works even
       through the RadzenTemplateForm <form> wrapper that sits between
       .rz-dialog-content and this root. dvh accounts for mobile browser chrome. */
    max-height: 92vh;
    max-height: 92dvh;
}

.et-dlg__hd[b-ittoq6kqo1] {
    padding: 22px 26px 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.et-dlg__title[b-ittoq6kqo1] {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.et-dlg__desc[b-ittoq6kqo1] {
    margin: 5px 0 0;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
}

.et-dlg__bd[b-ittoq6kqo1] {
    padding: 20px 26px;
    flex: 1;
    /* REQUIRED: without min-height:0 a flex item won't shrink below its content
       size, so overflow-y:auto never engages and the body just pushes the
       footer off-screen instead of scrolling. */
    min-height: 0;
    overflow-y: auto;
    /* Dialogs scroll vertically only — never horizontally. Without this, overflow-y:auto
       makes the browser compute overflow-x to 'auto' too, so any content a hair wider than
       the body (a fixed-width field, a flex row that can't shrink) shows a stray horizontal
       scrollbar (e.g. the Add Holiday dialog). Clip it; form content is responsive. */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Radzen form fields fill their own width — don't constrain here */
}

.et-dlg__ft[b-ittoq6kqo1] {
    padding: 12px 26px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtField.razor.rz.scp.css */
.et-fld[b-t4qjbz6q77] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.et-fld__label[b-t4qjbz6q77] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
}

.et-fld__req[b-t4qjbz6q77] {
    color: var(--red);
    margin-left: 2px;
}

.et-fld__help[b-t4qjbz6q77] {
    font-size: 11.5px;
    color: var(--muted);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtFilterChip.razor.rz.scp.css */
.et-chip[b-314ioog2co] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}

.et-chip__ico[b-314ioog2co]  .rz-icon {
    font-size: 15px;
    opacity: .7;
}

.et-chip__caret[b-314ioog2co]  .rz-icon {
    font-size: 15px;
    opacity: .55;
}

.et-chip:hover[b-314ioog2co] {
    border-color: var(--ink);
}

.et-chip.active[b-314ioog2co] {
    background: var(--cyan-wash);
    border-color: var(--cyan);
    color: var(--cyan-deep);
}

.et-chip:focus-visible[b-314ioog2co] {
    outline: none;
    box-shadow: 0 0 0 3px var(--cyan-ring);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtFormSection.razor.rz.scp.css */
.et-fcard[b-qbivhuigov] {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    margin-bottom: 16px;
}

.et-fcard__h[b-qbivhuigov] {
    margin-bottom: 18px;
}

.et-fcard__title[b-qbivhuigov] {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0;
}

.et-fcard__desc[b-qbivhuigov] {
    color: var(--muted);
    font-size: 13px;
    margin: 2px 0 0;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtListCard.razor.rz.scp.css */
/* EtListCard — DESIGN-SYSTEM §5.3 (mock.css .list / .list__head / .list__foot). */

.et-list[b-8vuimekbug] {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.et-list__head[b-8vuimekbug] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
}

.et-list__heading[b-8vuimekbug] {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.et-list__title[b-8vuimekbug] {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}

.et-list__count[b-8vuimekbug] {
  color: var(--muted);
  font-size: 13px;
}

.et-list__filters[b-8vuimekbug] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.et-list__foot[b-8vuimekbug] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtListRow.razor.rz.scp.css */
/* EtListRow — DESIGN-SYSTEM §5.3 (mock.css .row / .rowact). */

.et-row[b-m1wpk3zw7l] {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-top: 1px solid var(--line-2);
  transition: background .15s var(--ease);
  position: relative;
}

.et-row:hover[b-m1wpk3zw7l] {
  background: var(--surface-2);
}

/* Hover-revealed actions — kept keyboard-reachable via focus-within. */
.et-row__act[b-m1wpk3zw7l] {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity .15s var(--ease);
}

.et-row:hover .et-row__act[b-m1wpk3zw7l],
.et-row__act:focus-within[b-m1wpk3zw7l] {
  opacity: 1;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtMetricTile.razor.rz.scp.css */
/* EtMetricTile — DESIGN-SYSTEM §5.2
   Uniform KPI card: fixed min-width so tiles in a row stay the same size
   regardless of value length. Number uses 26px / weight 700 — prominent
   but not overwhelming (matches the --fs-display / body ratio). */

.et-metric[b-zbk0tfhbbx] {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 16px 18px 14px;
    min-width: 130px;
    display: flex;
    flex-direction: column;
}

/* Icon chip */
.et-metric__ico[b-zbk0tfhbbx] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-content: center;
    background: var(--surface-2);
    color: var(--ink-soft);
    flex: none;
}

.et-metric__ico[b-zbk0tfhbbx]  .rz-icon {
    font-size: 18px;
}

/* Number */
.et-metric__num[b-zbk0tfhbbx] {
    font-family: var(--display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-top: 10px;
    color: var(--ink);
}

/* Footer: label + optional delta */
.et-metric__foot[b-zbk0tfhbbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    gap: 6px;
}

.et-metric__label[b-zbk0tfhbbx] {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
}

.et-metric__delta[b-zbk0tfhbbx] {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--green-deep);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

/* Variant colour chips */
.et-metric--green .et-metric__ico[b-zbk0tfhbbx]  { background: var(--green-wash); color: var(--green-deep); }
.et-metric--gold  .et-metric__ico[b-zbk0tfhbbx]  { background: var(--cyan-wash);  color: var(--cyan-deep);  }
.et-metric--red   .et-metric__ico[b-zbk0tfhbbx]  { background: var(--red-wash);   color: var(--red);        }
.et-metric--amber .et-metric__ico[b-zbk0tfhbbx]  { background: var(--amber-wash); color: var(--amber-ink);  }

/* Number colour variants (optional) */
.et-metric--green .et-metric__num[b-zbk0tfhbbx]  { color: var(--green-deep); }
.et-metric--red   .et-metric__num[b-zbk0tfhbbx]  { color: var(--red); }
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtMoneyInput.razor.rz.scp.css */
.et-ingroup[b-suabb76qvm] {
    display: flex;
    align-items: center;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.et-ingroup:focus-within[b-suabb76qvm] {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-ring);
}

.et-ingroup__pfx[b-suabb76qvm] {
    padding: 0 12px;
    color: var(--muted);
    font-weight: 600;
    font-size: 13.5px;
    border-right: 1px solid var(--line);
    align-self: stretch;
    display: flex;
    align-items: center;
    background: var(--surface-2);
    white-space: nowrap;
    flex: none;
}

.et-ingroup__input[b-suabb76qvm] {
    border: 0;
    background: none;
    height: 100%;
    padding: 0 13px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    width: 100%;
    min-width: 0;
}

.et-ingroup__input:focus[b-suabb76qvm] {
    outline: none;
}

.et-ingroup__input[b-suabb76qvm]::placeholder {
    color: #aeb0b6;
}

.et-ingroup__input:disabled[b-suabb76qvm] {
    color: var(--muted);
    cursor: not-allowed;
}

.et-ingroup__input[b-suabb76qvm]::-webkit-outer-spin-button,
.et-ingroup__input[b-suabb76qvm]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.et-ingroup__input[type=number][b-suabb76qvm] {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtPageHeader.razor.rz.scp.css */
/* EtPageHeader — DESIGN-SYSTEM §4.3 (mock.css .head).
   Scoped to this component; these are EtPageHeader's own elements, so plain
   selectors apply (no ::deep needed). */

.et-head[b-1xpoctn664] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.et-head__lead[b-1xpoctn664] {
  min-width: 0;
}

.et-head__titlerow[b-1xpoctn664] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.et-head__title[b-1xpoctn664] {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);   /* 20px mobile → 22px desktop */
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.et-head__sub[b-1xpoctn664] {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: var(--fs-body);      /* 14px — same as body, readable on mobile */
}

.et-head__actions[b-1xpoctn664] {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Mobile/tablet: the shell shows a fixed hamburger FAB top-left (≤1024px).
   Indent the title block so it sits to the RIGHT of the FAB (the standard
   "[≡] Title" app-bar look) instead of underneath it. Actions stay right. */
@media (max-width: 1024px) {
  .et-head__lead[b-1xpoctn664] {
    padding-left: 52px;
    min-height: 40px;            /* match the FAB height so the title centres against it */
  }
  .et-head__titlerow[b-1xpoctn664] {
    min-height: 40px;
    align-items: center;
  }
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtSaveBar.razor.rz.scp.css */
.et-savebar[b-rx26vunmqn] {
    position: sticky;
    top: 0;
    background: rgba(246,245,241,.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 14px clamp(20px,2.6vw,34px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 10;
}

.et-savebar__l[b-rx26vunmqn] {
    color: var(--muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.et-savebar__title[b-rx26vunmqn] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: -.01em;
}

.et-savebar__dot[b-rx26vunmqn] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    flex: none;
}

.et-savebar__r[b-rx26vunmqn] {
    display: flex;
    gap: 10px;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtSearchBox.razor.rz.scp.css */
.et-search[b-i652ncwptu] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.et-search__ico[b-i652ncwptu] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.et-search__ico[b-i652ncwptu]  .rz-icon {
    font-size: 16px;
}

.et-search__input[b-i652ncwptu] {
    height: 38px;
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--r-pill);
    padding: 0 14px 0 38px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}

.et-search__input[b-i652ncwptu]::placeholder {
    color: var(--placeholder);
}

.et-search__input:focus[b-i652ncwptu] {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-ring);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtSectionNav.razor.rz.scp.css */
.et-fnav[b-9u1dyhwini] {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtSectionNavItem.razor.rz.scp.css */
.et-fnav__item[b-uke50m63sn] {
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 11px;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
    text-decoration: none;
    cursor: pointer;
}

.et-fnav__item:hover[b-uke50m63sn] {
    background: var(--surface-2);
    color: var(--ink);
}

.et-fnav__item.on[b-uke50m63sn] {
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--ink);
    font-weight: 600;
}

.et-fnav__n[b-uke50m63sn] {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    flex: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.et-fnav__item.on .et-fnav__n[b-uke50m63sn] {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--ink);
}

.et-fnav__item.done .et-fnav__n[b-uke50m63sn] {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtSegmentedControl.razor.rz.scp.css */
.et-seg[b-g92cet9o64] {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 3px;
}

.et-seg__btn[b-g92cet9o64] {
    height: 32px;
    padding: 0 14px;
    border: 0;
    background: none;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}

.et-seg__btn.on[b-g92cet9o64] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
}

.et-seg__btn:focus-visible[b-g92cet9o64] {
    outline: none;
    box-shadow: 0 0 0 3px var(--cyan-ring);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtStatusPill.razor.rz.scp.css */
.et-status[b-gfm6ak1dn8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 13px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 12.5px;
}

.et-status__dot[b-gfm6ak1dn8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.et-status--pending[b-gfm6ak1dn8] {
    background: var(--amber-wash);
    color: var(--amber-ink);
}

.et-status--pending .et-status__dot[b-gfm6ak1dn8] {
    background: var(--amber);
}

.et-status--done[b-gfm6ak1dn8] {
    background: var(--green-wash);
    color: var(--green-deep);
}

.et-status--done .et-status__dot[b-gfm6ak1dn8] {
    background: var(--green);
}

.et-status--draft[b-gfm6ak1dn8] {
    background: var(--surface-2);
    color: var(--ink-soft);
}

.et-status--draft .et-status__dot[b-gfm6ak1dn8] {
    background: var(--muted);
}

.et-status--void[b-gfm6ak1dn8] {
    background: var(--red-wash);
    color: var(--red);
}

.et-status--void .et-status__dot[b-gfm6ak1dn8] {
    background: var(--red);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtToggle.razor.rz.scp.css */
.et-toggle[b-7v4mjjlqe3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.et-toggle__tk[b-7v4mjjlqe3] {
    width: 40px;
    height: 23px;
    border-radius: 100px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    position: relative;
    transition: background .2s var(--ease);
    flex: none;
    padding: 0;
    cursor: pointer;
}

.et-toggle__tk[b-7v4mjjlqe3]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: left .2s var(--ease);
}

.et-toggle.on .et-toggle__tk[b-7v4mjjlqe3] {
    background: var(--green);
    border-color: var(--green);
}

.et-toggle.on .et-toggle__tk[b-7v4mjjlqe3]::after {
    left: 19px;
}

.et-toggle__label[b-7v4mjjlqe3] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}

.et-toggle__tk:focus-visible[b-7v4mjjlqe3] {
    outline: none;
    box-shadow: 0 0 0 3px var(--cyan-ring);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtUsageBar.razor.rz.scp.css */
/* EtUsageBar — DESIGN-SYSTEM §5.4 (mock.css .usage / .bar / .legend). */

.et-usage[b-5pjhi5sejw] {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.et-usage__top[b-5pjhi5sejw] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}

.et-usage__used[b-5pjhi5sejw] {
  color: var(--ink-soft);
  font-weight: 600;
}

.et-usage__left[b-5pjhi5sejw] {
  color: var(--green-deep);
  font-weight: 700;
}

.et-usage__bar[b-5pjhi5sejw] {
  height: 7px;
  border-radius: 100px;
  background: var(--surface-2);
  overflow: hidden;
  display: flex;
}

.et-usage__seg[b-5pjhi5sejw] {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--c);
}

.et-usage__legend[b-5pjhi5sejw] {
  display: flex;
  gap: 12px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.et-usage__leg[b-5pjhi5sejw] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
}

.et-usage__leg i[b-5pjhi5sejw] {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--c);
  display: inline-block;
  flex: none;
}
/* _content/ETuteApp.UI.Shared/Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   ETute Fresh Campus — MainLayout scoped shell (rail + topbar)
   Ported from Equant360's MainLayout.razor.css (eq-→et-, gold→cyan).
   .et-shell is a display:contents wrapper carrying THIS component's scope, so
   Radzen child roots (.rz-sidebar/.rz-body/.rz-layout) are reached via "::deep".
   Defensive !important on Radzen roots: ETute app.css still paints them navy
   (reconciled fully in Phase-0 Step 2).
   ========================================================================== */

.et-shell[b-x0o0r5ik4y] { display: contents; }

.et-shell[b-x0o0r5ik4y]  .rz-layout { min-height: 100vh; }

/* Overlay rail — fixed drawer, collapsed by default, slides in over content -- */
.et-shell[b-x0o0r5ik4y]  .et-scrim {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(11,23,51,.35);
  animation: et-scrim-in-b-x0o0r5ik4y .18s var(--ease);
}
@keyframes et-scrim-in-b-x0o0r5ik4y { from { opacity: 0; } to { opacity: 1; } }

.et-shell[b-x0o0r5ik4y]  .et-side {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
  width: min(248px, 86vw);
  display: flex; flex-direction: column;
  padding: 18px 14px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .22s var(--ease);
}
.et-shell[b-x0o0r5ik4y]  .et-side.et-side--open {
  transform: translateX(0);
  box-shadow: 0 0 48px rgba(11,23,51,.22);
}

.et-shell[b-x0o0r5ik4y]  .et-side__brand {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 6px 20px;
}
.et-shell[b-x0o0r5ik4y]  .et-side__logo {
  width: 100%; height: auto; max-height: 88px; display: block; object-fit: contain;
}

/* Nav -------------------------------------------------------------------- */
.et-shell[b-x0o0r5ik4y]  .et-nav { display: flex; flex-direction: column; gap: 2px; }

.et-shell[b-x0o0r5ik4y]  .et-nav__item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 10px;
  font-weight: 500; font-size: 13.5px;
  color: var(--ink-soft); cursor: pointer; text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.et-shell[b-x0o0r5ik4y]  .et-nav__item .rz-icon { font-size: 18px; opacity: .8; flex: none; }
.et-shell[b-x0o0r5ik4y]  .et-nav__text { flex: 1; min-width: 0; }
.et-shell[b-x0o0r5ik4y]  .et-nav__caret { margin-left: auto; color: var(--muted); transition: transform .15s var(--ease); }
.et-shell[b-x0o0r5ik4y]  .et-nav__caret.expanded { transform: rotate(180deg); }
.et-shell[b-x0o0r5ik4y]  .et-nav__item:hover { background: var(--surface-2); color: var(--ink); }
.et-shell[b-x0o0r5ik4y]  .et-nav__item.active { background: var(--cyan-wash); color: var(--cyan-deep); font-weight: 600; }
.et-shell[b-x0o0r5ik4y]  .et-nav__item.active .rz-icon { opacity: 1; }

.et-shell[b-x0o0r5ik4y]  .et-nav__sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; }
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px 7px 40px; border-radius: 10px;
  font-weight: 500; font-size: 13px;
  color: var(--ink-soft); cursor: pointer; text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem .rz-icon { font-size: 16px; opacity: .7; flex: none; }
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem:hover { background: var(--surface-2); color: var(--ink); }
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem.active { background: var(--cyan-wash); color: var(--cyan-deep); font-weight: 600; }
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem.active .rz-icon { opacity: 1; }

/* Footer — "me" identity card -------------------------------------------- */
.et-shell[b-x0o0r5ik4y]  .et-side__footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.et-shell[b-x0o0r5ik4y]  .et-side__me {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px;
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-input); text-align: left;
}
.et-shell[b-x0o0r5ik4y]  .et-side__me:hover { background: var(--surface-2); }
.et-shell[b-x0o0r5ik4y]  .et-side__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-mark); color: #fff;
  display: grid; place-content: center;
  font-weight: 700; font-size: 12px; flex: none;
}
.et-shell[b-x0o0r5ik4y]  .et-side__id { flex: 1; min-width: 0; line-height: 1.2; }
.et-shell[b-x0o0r5ik4y]  .et-side__nm {
  font-weight: 600; font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.et-shell[b-x0o0r5ik4y]  .et-side__rl { color: var(--muted); font-size: 11.5px; display: block; }

/* Topbar ----------------------------------------------------------------- */
.et-shell[b-x0o0r5ik4y]  .et-topbar {
  display: flex; align-items: center; gap: 16px;
  height: 60px; flex: none; padding: 0 22px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.et-shell[b-x0o0r5ik4y]  .et-topbar__burger {
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); display: grid; place-content: center; cursor: pointer; flex: none;
}
.et-shell[b-x0o0r5ik4y]  .et-topbar__burger:hover { background: var(--surface-2); color: var(--ink); }
.et-shell[b-x0o0r5ik4y]  .et-topbar__burger .rz-icon { font-size: 20px; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__crumb { font-size: 13px; color: var(--muted); white-space: nowrap; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__crumb b { color: var(--ink); }
.et-shell[b-x0o0r5ik4y]  .et-topbar__spacer { flex: 1; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__ask { flex: 1; display: flex; justify-content: center; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__right { display: flex; align-items: center; gap: 8px; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__icon {
  position: relative;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); display: grid; place-content: center; cursor: pointer; flex: none;
}
.et-shell[b-x0o0r5ik4y]  .et-topbar__icon:hover { background: var(--surface-2); color: var(--ink); }
.et-shell[b-x0o0r5ik4y]  .et-topbar__icon .rz-icon { font-size: 18px; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__badge {
  position: absolute; top: 5px; right: 6px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--coral); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  border: 1.5px solid var(--surface); pointer-events: none;
}

/* Phones: burger + breadcrumb + year switcher + the icon cluster cannot all fit on a
   360px row, so the bar overflowed and clipped the right-hand icons. Tighten the frame
   and drop the breadcrumb — the page's own heading already names the section. */
@media (max-width: 640px) {
  .et-shell[b-x0o0r5ik4y]  .et-topbar { gap: 8px; padding: 0 12px; }
  .et-shell[b-x0o0r5ik4y]  .et-topbar__crumb { display: none; }
  .et-shell[b-x0o0r5ik4y]  .et-topbar__right { gap: 6px; min-width: 0; }
  /* AcademicYearSwitcher carries an inline Style="min-width:180px;max-width:240px",
     and an inline style outranks a stylesheet rule — hence !important here. Without
     overriding min-width the switcher stays 180px wide however small the screen gets. */
  .et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-dropdown { min-width: 0 !important; max-width: 150px !important; }
}
/* Very narrow phones: the academic-year switcher has to give up more width, or the
   profile avatar at the end of the cluster is pushed off the right edge. */
@media (max-width: 430px) {
  .et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-dropdown { max-width: 112px !important; }
}

/* Topbar profile menu — force the global dark RadzenProfileMenu onto the light bar */
.et-shell[b-x0o0r5ik4y]  .et-topbar__right ul.rz-profile-menu,
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-profile-menu .rz-navigation-item,
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-profile-menu .rz-navigation-item-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Scroll model — only the body viewport scrolls -------------------------- */
.et-shell[b-x0o0r5ik4y]  .rz-body,
.et-shell[b-x0o0r5ik4y]  .app-body { overflow-y: auto; }

@media (prefers-reduced-motion: reduce) {
  .et-shell[b-x0o0r5ik4y]  .et-side { transition: none; }
  .et-shell[b-x0o0r5ik4y]  .et-nav__item,
  .et-shell[b-x0o0r5ik4y]  .et-nav__caret { transition: none; }
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtActionCard.razor.rz.scp.css */
.et-action-card[b-joh596x9ja] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--ink);
}

.et-action-card__head[b-joh596x9ja] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.et-action-card__title[b-joh596x9ja] {
    flex: 1;
}

.et-action-card__timer[b-joh596x9ja] {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.et-action-card__meta[b-joh596x9ja] {
    display: flex;
}

.et-action-card__badge[b-joh596x9ja] {
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: var(--line-2);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
}

.et-action-card__preview[b-joh596x9ja] {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-input);
    background: var(--surface);
    color: var(--ink-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.et-action-card__edit[b-joh596x9ja] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-input);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    resize: vertical;
}

.et-action-card__buttons[b-joh596x9ja] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.et-action-card__btn[b-joh596x9ja] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.et-action-card__btn:disabled[b-joh596x9ja] {
    opacity: 0.6;
    cursor: not-allowed;
}

.et-action-card__btn--confirm[b-joh596x9ja] {
    border-color: transparent;
    background: var(--coral);
    color: var(--surface);
    font-weight: 700;
}

.et-action-card__btn--confirm:hover:not(:disabled)[b-joh596x9ja] {
    background: var(--coral-soft);
}

.et-action-card__receipt[b-joh596x9ja] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-input);
    font-weight: 600;
}

.et-action-card__receipt--ok[b-joh596x9ja] {
    background: var(--green-wash);
    color: var(--green-deep);
}

.et-action-card__receipt--fail[b-joh596x9ja] {
    background: var(--red-wash);
    color: var(--red);
}

.et-action-card__receipt--muted[b-joh596x9ja] {
    background: var(--line-2);
    color: var(--muted);
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAnswerCard.razor.rz.scp.css */
/* EtAnswerCard — the four renderable answer shapes (NILI Ask Bar Build Spec §2c). Tokens from
   design-tokens.css; the only literal hex here are the cyan-family bar tints (#67e8f9/#a5f3fc) that
   the spec calls out by exact value and design-tokens.css does not carry (--cyan/--cyan-bright cover
   only the first two of the three). No dark mode. */

.et-answer-card[b-cah1ne8146] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 16px;
    border-radius: var(--r-xl, 20px);
}

.et-answer-card--warm[b-cah1ne8146] {
    background: var(--grad-warm, linear-gradient(120deg, #FFF3E8, #EAFBFD));
    border: 1px solid var(--warm-line, #fbe3cc);
}

.et-answer-card--plain[b-cah1ne8146] {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
}

.et-answer-card__spark[b-cah1ne8146] {
    font-size: 15px;
    line-height: 1.3;
    flex-shrink: 0;
}

.et-answer-card--warm .et-answer-card__spark[b-cah1ne8146] {
    color: var(--coral, #f97316);
}

.et-answer-card--plain .et-answer-card__spark[b-cah1ne8146] {
    color: var(--muted, #64748b);
}

.et-answer-card__body[b-cah1ne8146] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.et-answer-card__head[b-cah1ne8146] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.et-answer-card__tools[b-cah1ne8146] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ---- read-aloud — muted/functional when idle, cyan-deep (same token EtAskInput's submit uses) while
   speaking; coral is reserved for the spark + the card's one primary action, never this button. ---- */

.et-answer-card__readaloud[b-cah1ne8146] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--muted, #64748b);
    cursor: pointer;
    font-size: 16px;
}

.et-answer-card__readaloud:hover[b-cah1ne8146] {
    background: var(--surface, #fff);
}

.et-answer-card__readaloud--speaking[b-cah1ne8146] {
    color: var(--cyan-deep, #0891b2);
}

.et-answer-card__copy[b-cah1ne8146] {
    width: auto;
    min-width: 28px;
    padding: 0 6px;
    gap: 4px;
}

.et-answer-card__copy-label[b-cah1ne8146] {
    font-size: 12px;
    line-height: 1;
}

.et-answer-card__bignum[b-cah1ne8146] {
    font-family: var(--display, 'Sora', sans-serif);
    font-size: var(--fs-display, 22px);
    font-weight: 700;
    color: var(--ink, #0B1733);
}

.et-answer-card__headline[b-cah1ne8146] {
    font-family: var(--display, 'Sora', sans-serif);
    font-size: var(--fs-h3, 15px);
    font-weight: 600;
    color: var(--ink, #0B1733);
    margin: 0;
}

.et-answer-card__sentences[b-cah1ne8146] {
    margin: 0;
    font-size: var(--fs-body, 14px);
    color: var(--ink-soft, #33415c);
    text-wrap: pretty;
}

.et-answer-card__evidence[b-cah1ne8146] {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    overflow-x: auto;
    max-width: 100%;
}

/* ---- Shape B: cyan-family-only bars, never a rainbow series ---- */

.et-answer-card__bars[b-cah1ne8146] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
}

.et-answer-card__bar-row[b-cah1ne8146] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-ui, 13.5px);
    min-width: 220px;
}

.et-answer-card__bar-label[b-cah1ne8146] {
    width: 56px;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--ink, #0B1733);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.et-answer-card__bar-track[b-cah1ne8146] {
    flex: 1;
    height: 10px;
    border-radius: var(--r-pill, 999px);
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    overflow: hidden;
}

.et-answer-card__bar-fill[b-cah1ne8146] {
    height: 100%;
    border-radius: var(--r-pill, 999px);
}

.et-answer-card__bar-fill--0[b-cah1ne8146] { background: var(--cyan, #06b6d4); }
.et-answer-card__bar-fill--1[b-cah1ne8146] { background: #67e8f9; }
.et-answer-card__bar-fill--2[b-cah1ne8146] { background: #a5f3fc; }

.et-answer-card__bar-value[b-cah1ne8146] {
    width: 64px;
    flex-shrink: 0;
    text-align: right;
    font-weight: 600;
    color: var(--ink, #0B1733);
}

/* ---- Shape C: named-people rows, max 3 visible + "see all" ---- */

.et-answer-card__people[b-cah1ne8146] {
    font-size: var(--fs-ui, 13.5px);
}

.et-answer-card__people-row[b-cah1ne8146] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

.et-answer-card__people-name[b-cah1ne8146] {
    font-weight: 600;
    color: var(--ink, #0B1733);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.et-answer-card__people-trailing[b-cah1ne8146] {
    color: var(--muted, #64748b);
    font-weight: 600;
    flex-shrink: 0;
}

.et-answer-card__see-all[b-cah1ne8146] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: var(--surface-2, #f7fcfd);
    color: var(--cyan-deep, #0891b2);
    font-weight: 600;
    font-size: var(--fs-ui, 13.5px);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* ---- Shape B: multi-column data table (>2 columns) — compact density, collapsed to 5 rows ---- */

.et-answer-card__wide-table-scroll[b-cah1ne8146] {
    overflow-x: auto;
    max-width: 100%;
}

.et-answer-card__wide-table-el[b-cah1ne8146] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-ui, 13.5px);
}

.et-answer-card__wide-table-el th[b-cah1ne8146] {
    padding: 6px 10px;
    text-align: left;
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--muted, #64748b);
    border-bottom: 1px solid var(--line, #e3eef2);
    white-space: nowrap;
}

.et-answer-card__wide-table-el td[b-cah1ne8146] {
    padding: 6px 10px;
    color: var(--ink, #0B1733);
    border-bottom: 1px solid var(--line-2, #eef4f6);
    white-space: nowrap;
}

.et-answer-card__wide-table-el tbody tr:nth-child(even)[b-cah1ne8146] {
    background: var(--surface-2, #f7fcfd);
}

.et-answer-card__wide-table-el tbody tr:last-child td[b-cah1ne8146] {
    border-bottom: none;
}

.et-answer-card__wide-cell--numeric[b-cah1ne8146] {
    text-align: right;
    font-weight: 600;
}

/* ---- status pills — icon + colour together, never colour alone ---- */

.et-answer-card__status[b-cah1ne8146] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--r-pill, 999px);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 700;
    flex-shrink: 0;
}

.et-answer-card__status--overdue[b-cah1ne8146],
.et-answer-card__status--error[b-cah1ne8146] {
    background: var(--red-wash, #fdeaef);
    color: var(--red, #e11d48);
}

.et-answer-card__status--partpaid[b-cah1ne8146] {
    background: var(--amber-wash, #fef3e2);
    color: var(--amber-ink, #92400e);
}

.et-answer-card__status--paid[b-cah1ne8146] {
    background: var(--green-wash, #e7f8f0);
    color: var(--green-deep, #047857);
}

.et-answer-card__status--hidden[b-cah1ne8146] {
    background: var(--gray-100, #f1f5f9);
    color: var(--muted, #64748b);
}

/* _content/ETuteApp.UI.Shared/Components/Nili/EtAnswerFeedback.razor.rz.scp.css */
/* EtAnswerFeedback — thumbs + five fixed reasons. Tokens only, no new hex (design-tokens.css). */

.et-answer-feedback[b-7k0ryd6rhs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.et-answer-feedback__thumbs[b-7k0ryd6rhs] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Same action-row style as the Copy / read-aloud buttons in EtAnswerCard. */
.et-answer-feedback__thumb[b-7k0ryd6rhs] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
}

.et-answer-feedback__thumb:hover:not(:disabled)[b-7k0ryd6rhs] {
    background: var(--surface);
}

.et-answer-feedback__thumb[aria-pressed="true"][b-7k0ryd6rhs] {
    background: var(--cyan-wash);
    color: var(--cyan-deep);
}

.et-answer-feedback__thumb:focus-visible[b-7k0ryd6rhs] {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.et-answer-feedback__panel[b-7k0ryd6rhs] {
    max-width: 480px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
}

.et-answer-feedback__hint[b-7k0ryd6rhs] {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: var(--fs-sm, 12.5px);
}

.et-answer-feedback__reasons[b-7k0ryd6rhs] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.et-answer-feedback__reason[b-7k0ryd6rhs] {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

/* Visually hidden but focusable: the native radio group keeps its arrow-key behaviour. */
.et-answer-feedback__radio[b-7k0ryd6rhs] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.et-answer-feedback__pill[b-7k0ryd6rhs] {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill, 999px);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-ui, 13.5px);
}

.et-answer-feedback__radio:checked + .et-answer-feedback__pill[b-7k0ryd6rhs] {
    border-color: var(--cyan);
    color: var(--cyan-deep);
}

.et-answer-feedback__radio:focus-visible + .et-answer-feedback__pill[b-7k0ryd6rhs] {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.et-answer-feedback__submit[b-7k0ryd6rhs] {
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: var(--r);
    background: var(--cyan);
    color: var(--surface);
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.et-answer-feedback__submit:disabled[b-7k0ryd6rhs] {
    opacity: .5;
    cursor: not-allowed;
}

.et-answer-feedback__submit:focus-visible[b-7k0ryd6rhs] {
    outline: 2px solid var(--cyan-deep);
    outline-offset: 2px;
}

.et-answer-feedback__error[b-7k0ryd6rhs] {
    font-size: var(--fs-xs, 11.5px);
    color: var(--danger);
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskBar.razor.rz.scp.css */
/* EtAskBar — topbar "Ask Etute" trigger. Geometry & states per NILI Ask Bar Build Spec §2a. */

.et-ask-bar[b-88lrj4gzbq] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 320px;
    max-width: 520px;
    height: 36px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--line, #e3eef2);
    background: var(--surface-2, #f7fcfd);
    padding: 0 14px;
    cursor: pointer;
    font: inherit;
    transition: background .15s var(--ease, ease), border-color .15s var(--ease, ease);
}

.et-ask-bar:hover[b-88lrj4gzbq] {
    background: #fff;
    border-color: var(--cyan-wash-2, #cffafe);
}

.et-ask-bar:focus-visible[b-88lrj4gzbq] {
    outline: none;
    /* Cyan focus ring per spec — 0.28 alpha, distinct from the shared --cyan-ring token (0.16). */
    box-shadow: 0 0 0 3px rgba(6, 182, 212, .28);
}

.et-ask-bar__spark[b-88lrj4gzbq] {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
    color: var(--coral, #f97316);
}

.et-ask-bar__placeholder[b-88lrj4gzbq] {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: 13.5px;
    color: var(--placeholder, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.et-ask-bar__shortcut[b-88lrj4gzbq] {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted, #64748b);
    border: 1px solid var(--line, #e3eef2);
    background: #fff;
    border-radius: 6px;
    padding: 1px 6px;
}

/* No keyboard on touch devices — the shortcut chip is meaningless there. */
@media (pointer: coarse) {
    .et-ask-bar__shortcut[b-88lrj4gzbq] {
        display: none;
    }
}

/* Collapse to a 36×36 circular ✦ icon-only button below 1100px — same click target, same action. */
@media (max-width: 1100px) {
    .et-ask-bar[b-88lrj4gzbq] {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        padding: 0;
        justify-content: center;
    }

    .et-ask-bar__placeholder[b-88lrj4gzbq],
    .et-ask-bar__shortcut[b-88lrj4gzbq] {
        display: none;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskEmptyState.razor.rz.scp.css */
/* EtAskEmptyState — empty state slotted into EtAskSheet's body. Geometry per NILI Ask Bar Build
   Spec §2b "step 2 — Open, nothing typed". */

.et-ask-empty[b-ab5859oykx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
}

.et-ask-empty__intro[b-ab5859oykx] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--ink-soft, #33415c);
    line-height: 1.4;
}

.et-ask-empty__spark[b-ab5859oykx] {
    color: var(--coral, #f97316);
    font-size: 15px;
    line-height: 1.4;
}

.et-ask-empty__section[b-ab5859oykx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.et-ask-empty__label[b-ab5859oykx] {
    font-size: var(--fs-xs, 11.5px);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted, #64748b);
    font-weight: 700;
}

.et-ask-empty__row[b-ab5859oykx] {
    height: 38px;
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    background: var(--surface-2, #f7fcfd);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #0B1733);
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.et-ask-empty__row:hover[b-ab5859oykx] {
    border-color: var(--cyan, #06b6d4);
}

.et-ask-empty__recent-row[b-ab5859oykx] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-ui, 13.5px);
    color: var(--ink-soft, #33415c);
    background: transparent;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.et-ask-empty__recent-row:hover .et-ask-empty__row-text[b-ab5859oykx] {
    color: var(--cyan-deep, #0891b2);
}

.et-ask-empty__row-icon[b-ab5859oykx] {
    color: var(--cyan-deep, #0891b2);
    font-size: 14px;
    flex-shrink: 0;
}

.et-ask-empty__row-icon--muted[b-ab5859oykx] {
    color: var(--placeholder, #94a3b8);
}

.et-ask-empty__row-text[b-ab5859oykx] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.et-ask-empty__row-hint[b-ab5859oykx] {
    margin-left: auto;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.et-ask-empty__row-when[b-ab5859oykx] {
    margin-left: auto;
    color: var(--muted, #64748b);
    font-size: var(--fs-sm, 12.5px);
    flex-shrink: 0;
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskHistoryDetail.razor.rz.scp.css */
.et-ask-history-detail__status[b-rceez9z59k] {
    color: var(--muted, #64748b);
    font-size: 13px;
    padding: 20px 4px;
    text-align: center;
}

.et-ask-history-detail__header[b-rceez9z59k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px 6px;
    min-width: 0;
}

.et-ask-history-detail__title[b-rceez9z59k] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink, #0B1733);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.et-ask-history-detail__meta[b-rceez9z59k] {
    font-size: 12px;
    color: var(--muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.et-ask-history-detail[b-rceez9z59k] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 4px 10px;
    overflow-y: auto;
}

.et-ask-history-detail__q-row[b-rceez9z59k] {
    display: flex;
    justify-content: flex-end;
}

.et-ask-history-detail__q-bubble[b-rceez9z59k] {
    background: var(--cyan-wash, #ecfeff);
    color: var(--ink, #0B1733);
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 13px;
    border-radius: 14px 14px 4px 14px;
    max-width: 82%;
    white-space: pre-wrap;
}

.et-ask-history-detail__a-row[b-rceez9z59k] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 92%;
}

.et-ask-history-detail__a-spark[b-rceez9z59k] {
    color: var(--coral, #f97316);
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 3px;
}

.et-ask-history-detail__a-body[b-rceez9z59k] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft, #33415c);
    max-width: 100%;
    overflow-x: auto;
}

.et-ask-history-detail__a-body :deep(p)[b-rceez9z59k] {
    margin: 0 0 8px;
}

.et-ask-history-detail__a-body :deep(p:last-child)[b-rceez9z59k] {
    margin-bottom: 0;
}

.et-ask-history-detail__a-body :deep(table)[b-rceez9z59k] {
    border-collapse: collapse;
    font-size: 12.5px;
    width: max-content;
    max-width: 100%;
}

.et-ask-history-detail__a-body :deep(th)[b-rceez9z59k],
.et-ask-history-detail__a-body :deep(td)[b-rceez9z59k] {
    border: 1px solid var(--line, #e3eef2);
    padding: 5px 8px;
    text-align: left;
    white-space: nowrap;
}

.et-ask-history-detail__a-body :deep(.et-ask-history-detail__cell--num)[b-rceez9z59k] {
    text-align: right;
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskHistoryList.razor.rz.scp.css */
.et-ask-history-list[b-xurqethjhn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 4px 10px;
}

.et-ask-history-list__search[b-xurqethjhn] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--r-input);
    padding: 8px 10px;
    font-family: inherit;
    font-size: var(--fs-ui);
    color: var(--ink);
    background: var(--surface);
}

.et-ask-history-list__item[b-xurqethjhn] {
    position: relative;
    display: flex;
    align-items: center;
}

.et-ask-history-list__menu-btn[b-xurqethjhn] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: var(--r);
    padding: 4px 8px;
    cursor: pointer;
    font-size: var(--fs-h2);
    line-height: 1;
}

.et-ask-history-list__menu-btn:hover[b-xurqethjhn],
.et-ask-history-list__menu-btn:focus-visible[b-xurqethjhn] {
    background: var(--surface-2);
    color: var(--ink);
}

.et-ask-history-list__menu[b-xurqethjhn] {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 120px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 4px;
}

.et-ask-history-list__menu-item[b-xurqethjhn] {
    border: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: var(--fs-ui);
    color: var(--ink);
    padding: 7px 10px;
    border-radius: var(--r-input);
    cursor: pointer;
}

.et-ask-history-list__menu-item:hover[b-xurqethjhn],
.et-ask-history-list__menu-item:focus-visible[b-xurqethjhn] {
    background: var(--surface-2);
}

.et-ask-history-list__inline[b-xurqethjhn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    flex-wrap: wrap;
}

.et-ask-history-list__rename-input[b-xurqethjhn] {
    flex: 1 1 140px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-input);
    padding: 6px 8px;
    font-family: inherit;
    font-size: var(--fs-ui);
    color: var(--ink);
}

.et-ask-history-list__prompt[b-xurqethjhn] {
    flex: 1 1 auto;
    font-size: var(--fs-ui);
    color: var(--ink);
}

.et-ask-history-list__action[b-xurqethjhn] {
    border: 1px solid var(--cyan-deep);
    background: var(--cyan-deep);
    color: var(--surface);
    border-radius: var(--r-input);
    padding: 5px 12px;
    font-family: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.et-ask-history-list__action--danger[b-xurqethjhn] {
    border-color: var(--red);
    background: var(--red);
}

.et-ask-history-list__action--quiet[b-xurqethjhn] {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
}

.et-ask-history-list__more[b-xurqethjhn] {
    align-self: center;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--r-pill);
    padding: 6px 16px;
    font-family: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.et-ask-history-list__more:hover[b-xurqethjhn] {
    background: var(--surface-2);
}

.et-ask-history-list__empty[b-xurqethjhn] {
    color: var(--muted, #64748b);
    font-size: 13px;
    padding: 20px 4px;
    text-align: center;
}

.et-ask-history-list__group-label[b-xurqethjhn] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
    padding: 0 6px 6px;
}

.et-ask-history-list__row[b-xurqethjhn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    border-radius: var(--r, 12px);
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.et-ask-history-list__row:hover[b-xurqethjhn],
.et-ask-history-list__row--active[b-xurqethjhn] {
    background: var(--surface-2, #f7fcfd);
}

.et-ask-history-list__row-title[b-xurqethjhn] {
    font-size: 13.5px;
    color: var(--ink, #0B1733);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.et-ask-history-list__row-time[b-xurqethjhn] {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--muted, #64748b);
    font-variant-numeric: tabular-nums;
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskInput.razor.rz.scp.css */
/* EtAskInput — free-text question row inside the ask sheet's empty state. Geometry per NILI Ask
   Bar Build Spec §2b "step 2" header row; submit button is #0891b2, never #06b6d4 (WCAG AA contrast
   for white text on the fill). */

.et-ask-input-row[b-j9w2ik9c98] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

.et-ask-input[b-j9w2ik9c98] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    background: var(--surface-2, #f7fcfd);
    padding: 0 6px 0 12px;
    transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
}

.et-ask-input:focus-within[b-j9w2ik9c98] {
    border-color: var(--cyan-deep, #0891b2);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, .16);
}

.et-ask-input__spark[b-j9w2ik9c98] {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--coral, #f97316);
}

.et-ask-input__field[b-j9w2ik9c98] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink, #0B1733);
}

.et-ask-input__field[b-j9w2ik9c98]::placeholder {
    color: var(--placeholder, #94a3b8);
}

.et-ask-input__field:disabled[b-j9w2ik9c98] {
    color: var(--muted, #64748b);
}

.et-ask-input__mic[b-j9w2ik9c98] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    position: relative;
}

.et-ask-input__mic:hover:not(:disabled)[b-j9w2ik9c98] {
    background: var(--surface-2, #f7fcfd);
    color: var(--ink-soft, #33415c);
}

.et-ask-input__mic:disabled[b-j9w2ik9c98] {
    color: var(--line, #e3eef2);
    cursor: not-allowed;
}

/* Listening: same cyan-deep token the submit button uses, PLUS a filled icon (see .razor markup) and a
   pulse ring — status is never conveyed by color alone. Never coral: that's reserved for the ✦ spark
   and primary create/save actions, not a functional control like the mic. */
.et-ask-input__mic--listening[b-j9w2ik9c98] {
    color: var(--cyan-deep, #0891b2);
    background: rgba(8, 145, 178, .1);
}

.et-ask-input__mic--listening[b-j9w2ik9c98]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: var(--r-pill, 999px);
    border: 1.5px solid var(--cyan-deep, #0891b2);
    animation: et-ask-mic-pulse-b-j9w2ik9c98 1.4s ease-out infinite;
}

@keyframes et-ask-mic-pulse-b-j9w2ik9c98 {
    0% {
        opacity: .7;
        transform: scale(.85);
    }
    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}

.et-ask-input__submit[b-j9w2ik9c98] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: var(--cyan-deep, #0891b2);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

.et-ask-input__submit:hover:not(:disabled)[b-j9w2ik9c98] {
    background: #0e7490;
}

.et-ask-input__submit:disabled[b-j9w2ik9c98] {
    background: var(--line, #e3eef2);
    color: var(--muted, #64748b);
    cursor: not-allowed;
}

/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskSheet.razor.rz.scp.css */
/* EtAskSheet — overlay shell. Geometry per NILI Ask Bar Build Spec §2a "Sheet".
   --grad-warm is reserved for the answer card (a later task) and must never appear here. */

.et-ask-sheet__scrim[b-yd8jlfg5ji] {
    position: fixed;
    inset: 0;
    background: rgba(11, 23, 51, .18);
    z-index: 1300;
}

.et-ask-sheet[b-yd8jlfg5ji] {
    position: fixed;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    box-shadow: var(--shadow-lg, 0 10px 24px rgba(11, 23, 51, .08), 0 30px 60px rgba(11, 23, 51, .10));
    outline: none;
    overflow: hidden;

    /* Desktop: 760px centred panel, 28px below the 60px topbar, own scrolling body. */
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 140px);
    border-radius: var(--r-xl, 20px);

    animation: et-ask-sheet-enter-desktop-b-yd8jlfg5ji .14s var(--ease, cubic-bezier(.32, .72, 0, 1));
}

.et-ask-sheet__handle[b-yd8jlfg5ji] {
    display: none;
}

.et-ask-sheet__body[b-yd8jlfg5ji] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

@keyframes et-ask-sheet-enter-desktop-b-yd8jlfg5ji {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes et-ask-sheet-enter-phone-b-yd8jlfg5ji {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Phone: full-width bottom sheet, drag handle, top corners only. */
@media (max-width: 640px) {
    .et-ask-sheet__scrim[b-yd8jlfg5ji] {
        background: rgba(11, 23, 51, .22);
    }

    .et-ask-sheet[b-yd8jlfg5ji] {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: 84vh;
        border-radius: var(--r-xl, 20px) var(--r-xl, 20px) 0 0;
        animation-name: et-ask-sheet-enter-phone-b-yd8jlfg5ji;
    }

    .et-ask-sheet__handle[b-yd8jlfg5ji] {
        display: block;
        flex-shrink: 0;
        position: relative;
        width: 100%;
        height: 24px;
        touch-action: none;
        cursor: grab;
    }

    .et-ask-sheet__handle[b-yd8jlfg5ji]::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        border-radius: var(--r-pill, 999px);
        background: var(--line, #e3eef2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .et-ask-sheet[b-yd8jlfg5ji] {
        animation: none;
        transition: opacity .14s linear;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskSheetContent.razor.rz.scp.css */
/* EtAskSheetContent — persistent header: New chat (left), History + Close (right), one flex row, one
   owner. History and Close are cascaded/rendered here together so they share the same icon-button size
   and vertical centring — the history icon is a muted/functional control, same treatment as EtAskInput's
   mic button — never coral, that's reserved for the ✦ spark and the one primary create/save action. */
.et-ask-content__header[b-gbf2khdp0h] {
    display: flex;
    align-items: center;
    padding: 6px 6px 0 10px;
}

.et-ask-content__spark[b-gbf2khdp0h] {
    color: var(--coral);
    margin-right: 6px;
}

.et-ask-content__title[b-gbf2khdp0h] {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: var(--fs-h3);
    color: var(--ink);
}

.et-ask-content__beta[b-gbf2khdp0h] {
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid var(--amber);
    border-radius: var(--r-pill);
    background: var(--amber-wash);
    color: var(--amber-ink);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
}

.et-ask-content__header-spacer[b-gbf2khdp0h] {
    flex: 1 1 auto;
}

.et-ask-content__header-right[b-gbf2khdp0h] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.et-ask-content__icon-btn[b-gbf2khdp0h] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

.et-ask-content__icon-btn:hover:not(:disabled)[b-gbf2khdp0h] {
    background: var(--surface-2, #f7fcfd);
    color: var(--ink-soft, #33415c);
}

.et-ask-content__icon-btn:disabled[b-gbf2khdp0h] {
    color: var(--line, #e3eef2);
    cursor: not-allowed;
}

.et-ask-content__newchat[b-gbf2khdp0h] {
    margin-left: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--muted, #64748b);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
}

.et-ask-content__newchat:hover[b-gbf2khdp0h] {
    background: var(--surface-2, #f7fcfd);
    color: var(--ink-soft, #33415c);
}

.et-ask-content__fullpage[b-gbf2khdp0h] {
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--r-pill);
    cursor: pointer;
}

.et-ask-content__fullpage:hover[b-gbf2khdp0h] {
    background: var(--surface-2);
    color: var(--ink-soft);
}

/* ---- FullPage surface: history column + main column (thread above a pinned composer) ----
   Height comes from the parent flex chain only (the /ask page provides a definite-height flex
   container); never 100vh/dvh. */
.et-ask-content--fullpage[b-gbf2khdp0h] {
    --et-ask-fp-pad: 12px;
    position: relative;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    background: var(--canvas);
    font-family: var(--body);
}

.et-ask-content--fullpage:not(.et-ask-content--open)[b-gbf2khdp0h] {
    grid-template-columns: 0 minmax(0, 1fr);
}

.et-ask-content__open-failed[b-gbf2khdp0h] {
    margin: 0 0 12px;
    color: var(--ink-soft);
    font-size: 13px;
}

.et-ask-content__history-col[b-gbf2khdp0h] {
    min-height: 0;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--line);
    outline: none;
}

.et-ask-content--fullpage:not(.et-ask-content--open) .et-ask-content__history-col[b-gbf2khdp0h] {
    display: none;
}

.et-ask-content__history-backdrop[b-gbf2khdp0h] {
    display: none;
}

.et-ask-content__main[b-gbf2khdp0h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding-bottom: calc(var(--et-ask-fp-pad) + env(safe-area-inset-bottom));
}

.et-ask-content__main-body[b-gbf2khdp0h] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.et-ask-content__main-inner[b-gbf2khdp0h] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 840px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0 var(--et-ask-fp-pad);
    box-sizing: border-box;
}

.et-ask-content__main-inner[b-gbf2khdp0h]  > *:not(.et-ask-content__thread) {
    flex-shrink: 0;
}

.et-ask-content--fullpage .et-ask-content__thread[b-gbf2khdp0h] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.et-ask-content--fullpage .et-ask-content__history[b-gbf2khdp0h] {
    padding-left: 0;
    padding-right: 0;
}

.et-ask-content--fullpage .et-ask-content__header[b-gbf2khdp0h] {
    padding: var(--et-ask-fp-pad) var(--et-ask-fp-pad) 0;
}

.et-ask-content--fullpage .et-ask-content__title[b-gbf2khdp0h] {
    font-family: var(--display);
}

/* Narrow: the column becomes a bottom sheet, closed until the toggle opens it. */
@media (max-width: 768px) {
    .et-ask-content--fullpage[b-gbf2khdp0h],
    .et-ask-content--fullpage:not(.et-ask-content--open)[b-gbf2khdp0h] {
        grid-template-columns: minmax(0, 1fr);
    }

    .et-ask-content--fullpage.et-ask-content--open .et-ask-content__history-col[b-gbf2khdp0h] {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 70%;
        z-index: 2;
        border-right: none;
        border-top: 1px solid var(--line);
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        box-shadow: var(--shadow-lg);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .et-ask-content--fullpage.et-ask-content--open .et-ask-content__history-backdrop[b-gbf2khdp0h] {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--scrim);
    }
}

/* ---- live conversation thread ---- */

.et-ask-content__retry[b-gbf2khdp0h] {
    margin-top: 8px;
    border: 1px solid var(--line, #e3eef2);
    background: transparent;
    color: var(--ink-soft, #33415c);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
}

.et-ask-content__retry:hover[b-gbf2khdp0h] {
    background: var(--surface-2, #f7fcfd);
}

.et-ask-content__sr[b-gbf2khdp0h] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    margin: -1px;
    padding: 0;
    border: 0;
}

.et-ask-content__thread[b-gbf2khdp0h] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 4px 10px;
    overflow-y: auto;
}

.et-ask-content__turn[b-gbf2khdp0h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Earlier turns stay visible but recede so the newest answer keeps visual priority — same treatment
   used in the alignment mockup. Kept subtle (opacity only) to stay above accessible contrast. */
.et-ask-content__turn--past[b-gbf2khdp0h] {
    opacity: .85;
}

.et-ask-content__live[b-gbf2khdp0h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.et-ask-content__live-avatar[b-gbf2khdp0h] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill, 999px);
    background: var(--coral-wash);
    color: var(--coral);
    font-size: 15px;
}

.et-ask-content__live-text[b-gbf2khdp0h] {
    flex: 1;
    min-width: 0;
    color: var(--ink);
    font-size: var(--fs-ui, 13.5px);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-bottom: 8px;
}

.et-ask-content__q-row[b-gbf2khdp0h] {
    display: flex;
    justify-content: flex-end;
}

.et-ask-content__q-bubble[b-gbf2khdp0h] {
    background: var(--cyan-wash, #ecfeff);
    color: var(--ink, #0B1733);
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 13px;
    border-radius: 14px 14px 4px 14px;
    max-width: 82%;
}

.et-ask-content__history[b-gbf2khdp0h] {
    padding: 4px 18px 18px;
}

.et-ask-content__history-back[b-gbf2khdp0h] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--muted, #64748b);
    font-family: inherit;
    font-size: 13px;
    padding: 6px 0;
    cursor: pointer;
}

.et-ask-content__history-back:hover[b-gbf2khdp0h] {
    color: var(--ink-soft, #33415c);
}

.et-ask-content__continue-btn[b-gbf2khdp0h] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--cyan-deep, #0e7490);
    border-radius: var(--r-pill, 999px);
    background: var(--cyan-wash, #ecfeff);
    color: var(--cyan-deep, #0e7490);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 8px;
}

.et-ask-content__continue-btn:hover[b-gbf2khdp0h] {
    background: var(--cyan-wash-2, #d7f4fa);
}

.et-ask-content__continue-btn:focus-visible[b-gbf2khdp0h] {
    outline: 2px solid var(--cyan-deep, #0e7490);
    outline-offset: 2px;
}

.et-ask-content__history-placeholder[b-gbf2khdp0h] {
    color: var(--muted, #64748b);
    font-size: 13px;
    margin: 10px 0 0;
}

/* Scope chips — the pills this conversation is scoped to, shown for its whole life.
   Wraps rather than scrolls: three labels can exceed a phone-width sheet, and a horizontal
   scroll inside the sheet is easy to miss and easy to trap a touch in. */
.et-ask-content__scope[b-gbf2khdp0h] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px 0;
}

.et-ask-content__scope-chip[b-gbf2khdp0h] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid var(--nili-pill-border, #e2e8f0);
    border-radius: 999px;
    background: var(--nili-pill-bg, #f8fafc);
    color: var(--muted, #64748b);
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtFollowUpChips.razor.rz.scp.css */
/* EtFollowUpChips — "Then ask" row. Tokens only, no new hex (design-tokens.css). */

.et-follow-up-chips[b-yr1xkqvkco] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.et-follow-up-chips__label[b-yr1xkqvkco] {
    font-size: var(--fs-xs, 11.5px);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted, #64748b);
    font-weight: 700;
}

.et-follow-up-chips__list[b-yr1xkqvkco] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.et-follow-up-chips__chip[b-yr1xkqvkco] {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--line, #e3eef2);
    background: var(--surface, #fff);
    color: var(--ink-soft, #33415c);
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.et-follow-up-chips__chip:hover[b-yr1xkqvkco] {
    border-color: var(--cyan, #06b6d4);
    color: var(--cyan-deep, #0891b2);
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtNiliBetaFooter.razor.rz.scp.css */
.et-nili-beta-footer[b-7zu6zrtg0k] {
    margin: 4px 18px 0;
    padding-bottom: 10px;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--muted);
    text-align: center;
}

/* The global chatbot FAB (ChatbotWidget: fixed, right 10px, up to 56px wide) sits over the footer's right end on phones. */
@media (max-width: 640px) {
    .et-nili-beta-footer[b-7zu6zrtg0k] {
        padding-right: calc(64px + env(safe-area-inset-right, 0px));
    }
}

.et-nili-beta-footer a[b-7zu6zrtg0k] {
    color: var(--cyan-deep);
    text-decoration: underline;
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtThinking.razor.rz.scp.css */
/* EtThinking — ticked step list + shimmer while a turn streams. Geometry follows the same
   design-token file EtAskBar/EtAskSheet/EtAskEmptyState use (design-tokens.css). */

.et-thinking[b-tn68ijv3x5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
}

.et-thinking__steps[b-tn68ijv3x5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.et-thinking__step[b-tn68ijv3x5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-ui, 13.5px);
    color: var(--muted, #64748b);
}

.et-thinking__step--done[b-tn68ijv3x5] {
    color: var(--ink, #0B1733);
}

.et-thinking__mark[b-tn68ijv3x5] {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: var(--fs-sm, 12.5px);
    color: var(--placeholder, #94a3b8);
}

.et-thinking__step--done .et-thinking__mark[b-tn68ijv3x5] {
    color: var(--cyan-deep, #0891b2);
}

.et-thinking__shimmer[b-tn68ijv3x5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.et-thinking__shimmer-line[b-tn68ijv3x5] {
    height: 12px;
    border-radius: var(--r-pill, 999px);
    background: linear-gradient(90deg, var(--surface-2, #f7fcfd) 25%, var(--line, #e3eef2) 50%, var(--surface-2, #f7fcfd) 75%);
    background-size: 200% 100%;
    animation: et-thinking-shimmer-b-tn68ijv3x5 1.4s ease-in-out infinite;
}

.et-thinking__shimmer-line--wide[b-tn68ijv3x5] {
    width: 80%;
}

.et-thinking__shimmer-line--narrow[b-tn68ijv3x5] {
    width: 50%;
}

.et-thinking__still-working[b-tn68ijv3x5] {
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

.et-thinking__cancel[b-tn68ijv3x5] {
    align-self: flex-start;
    height: 30px;
    padding: 0 14px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--line, #e3eef2);
    background: var(--surface, #fff);
    color: var(--ink-soft, #33415c);
    font-size: var(--fs-sm, 12.5px);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.et-thinking__cancel:hover[b-tn68ijv3x5] {
    border-color: var(--coral, #f97316);
    color: var(--coral, #f97316);
}

@keyframes et-thinking-shimmer-b-tn68ijv3x5 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .et-thinking__shimmer-line[b-tn68ijv3x5] {
        animation: none;
        background: var(--line, #e3eef2);
    }
}
/* _content/ETuteApp.UI.Shared/Components/Nili/NiliChartCard.razor.rz.scp.css */
/* Reference-line overlay for horizontal-bar charts (see NiliChartCard.razor.cs comments): a mixed-orientation
   Radzen series doesn't align with a flipped bar axis, so the line is a positioned overlay instead. Uses the
   same --muted/--surface tokens as the rest of the Nili components, so it follows light/dark automatically. */

.nili-chart-plot[b-r25pkqercj] {
    position: relative;
}

.nili-reference-line[b-r25pkqercj] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--muted, #64748b);
    pointer-events: none;
    z-index: 1;
}

.nili-reference-label[b-r25pkqercj] {
    position: absolute;
    top: 0;
    left: 4px;
    white-space: nowrap;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    background: var(--surface, #fff);
    padding: 0 4px;
    border-radius: var(--r, 12px);
}
/* _content/ETuteApp.UI.Shared/Components/Nili/NiliPillPicker.razor.rz.scp.css */
/* NiliPillPicker — inline scope picker (NILI Pills D11/D12). Sizing per /design-tokens: 36px
   compact touch targets, chip-radius pills matching NiliFollowUpChips' nili- look. */

.nili-picker[b-pud6nytjw3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
}

.nili-picker__quick-starts[b-pud6nytjw3],
.nili-picker__grid[b-pud6nytjw3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nili-quick-start[b-pud6nytjw3] {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--cyan-deep, #0891b2);
    border-radius: 999px;
    background: var(--surface-2, #f7fcfd);
    color: var(--cyan-deep, #0891b2);
    font-size: var(--fs-ui, 13.5px);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.nili-quick-start:hover[b-pud6nytjw3] {
    background: var(--cyan-tint, #e0f7fa);
}

.nili-pill[b-pud6nytjw3] {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line, #e3eef2);
    border-radius: 999px;
    background: var(--surface-2, #f7fcfd);
    color: var(--ink, #0B1733);
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s ease, background-color .15s ease, border-color .15s ease;
}

.nili-pill--selected[b-pud6nytjw3] {
    background: var(--coral, #f97316);
    border-color: var(--coral, #f97316);
    color: #fff;
}

.nili-pill--dimmed[b-pud6nytjw3] {
    opacity: .4;
    cursor: default;
}

.nili-picker__confirm[b-pud6nytjw3] {
    align-self: flex-start;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: var(--r, 12px);
    background: var(--coral, #f97316);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.nili-picker__confirm:disabled[b-pud6nytjw3] {
    background: var(--placeholder, #94a3b8);
    cursor: not-allowed;
}
/* _content/ETuteApp.UI.Shared/Components/Pages/ClassScheduler.razor.rz.scp.css */
/* Resume banner and save-state indicator for the transactional timetable wizard.
   Both are plain elements in ClassScheduler's own markup, so scoped CSS reaches them directly --
   no ::deep, which only works through a scoped ancestor and never lands on a child component's
   own tags. */

.tt-resume[b-w9elea1t7t] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--amber, #d97706);
    border-radius: var(--r-card, 12px);
    background: var(--amber-wash, #fef3e2);
}

.tt-resume-icon[b-w9elea1t7t] {
    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
    font-size: 22px;
    line-height: 1;
    color: var(--amber, #d97706);
    flex: 0 0 auto;
}

.tt-resume-copy[b-w9elea1t7t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;      /* lets the text wrap instead of forcing the row wider */
    flex: 1 1 auto;
}

.tt-resume-title[b-w9elea1t7t] {
    font-weight: 600;
    color: var(--ink, #0f172a);
}

.tt-resume-meta[b-w9elea1t7t] {
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

.tt-resume-actions[b-w9elea1t7t] {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* UI.Shared also renders inside the MAUI WebView, so this has to survive a phone width.
   Stack rather than let the actions squeeze the message to one word per line. */
@media (max-width: 640px) {
    .tt-resume[b-w9elea1t7t] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .tt-resume-actions[b-w9elea1t7t] {
        width: 100%;
        justify-content: flex-end;
    }
}

.tt-savestate[b-w9elea1t7t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
    padding: 2px 0 6px;
}

/* A save that did not land is the one thing here worth interrupting for: with no intermediate
   writes, the draft is the only copy of the user's work.

   Rendered as a proper inline alert rather than bare red text. Raw red words floating under the
   header read as a stack trace escaping into the UI; a bordered strip with an icon and the action
   attached looks deliberate and, more usefully, gives the reader the way out. */
.tt-savestate[data-state="failed"][b-w9elea1t7t],
.tt-savestate[data-state="superseded"][b-w9elea1t7t] {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--amber, #d97706);
    border-radius: var(--r-input, 10px);
    background: var(--amber-wash, #fef3e2);
    color: var(--ink, #0f172a);
    font-weight: 500;
}

/* Amber, not red. Neither state has lost anything - the draft is intact and the fix is one click
   away - and red for a recoverable condition spends alarm the next real emergency needs. */
.tt-savestate-icon[b-w9elea1t7t] {
    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
    font-size: 18px;
    line-height: 1;
    color: var(--amber, #d97706);
    flex: 0 0 auto;
}

.tt-savestate-action[b-w9elea1t7t] {
    flex: 0 0 auto;
    margin-left: auto;
    border: 1px solid var(--amber, #d97706);
    background: #fff;
    color: var(--ink, #0f172a);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: var(--fs-sm, 12.5px);
    cursor: pointer;
}

.tt-savestate-action:hover[b-w9elea1t7t] {
    background: var(--amber-wash, #fef3e2);
}

@media (max-width: 640px) {
    .tt-savestate[data-state="failed"][b-w9elea1t7t],
    .tt-savestate[data-state="superseded"][b-w9elea1t7t] {
        flex-wrap: wrap;
    }

    .tt-savestate-action[b-w9elea1t7t] {
        margin-left: 0;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Common/TeacherSchedule.razor.rz.scp.css */
/* One teacher's week, shown in a side dialog.
   Same Fresh Campus token system as the timetable wizard steps, so opening this from step 1 or
   step 3 does not feel like landing in a different product. */

.ts-root[b-j5wf75drdz] {
    font-family: var(--body, inherit);
    color: var(--ink, #0B1733);
}

/* ---------- headline ---------- */
.ts-summary[b-j5wf75drdz] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ts-stat[b-j5wf75drdz] {
    flex: 1 1 140px;
    min-width: 140px;
    padding: 10px 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-left: 3px solid var(--cyan, #06b6d4);
    border-radius: var(--r-input, 10px);
}

.ts-stat--bad[b-j5wf75drdz] {
    border-color: var(--red, #e11d48);
    border-left-color: var(--red, #e11d48);
    background: var(--red-wash, #fdeaef);
}

.ts-stat-value[b-j5wf75drdz] {
    display: block;
    font-family: var(--display, inherit);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ts-stat-label[b-j5wf75drdz] {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.ts-stat--warn[b-j5wf75drdz] {
    border-color: var(--amber, #d97706);
    background: var(--amber-wash, #fef3e2);
}

/* ---------- verdict ---------- */
/* One band carrying the best thing we currently have to say: the AI's reading when it has
   arrived, the plain fact about clashes when it has not. Colour is load-bearing here, so the
   severity word is always spelled out in the chip too. */
.ts-verdict[b-j5wf75drdz] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line, #e3eef2);
    border-left-width: 3px;
    border-radius: var(--r-input, 10px);
    background: var(--surface-2, #f7fcfd);
}

.ts-verdict--action[b-j5wf75drdz] {
    border-color: var(--red, #e11d48);
    background: var(--red-wash, #fdeaef);
}

.ts-verdict--watch[b-j5wf75drdz] {
    border-color: var(--amber, #d97706);
    background: var(--amber-wash, #fef3e2);
}

.ts-verdict--fine[b-j5wf75drdz] {
    border-color: var(--green, #059669);
    background: var(--green-wash, #e8f7f1);
}

.ts-verdict--combined[b-j5wf75drdz] {
    border-color: var(--blue, #2563eb);
    background: var(--blue-wash, #eaf1fd);
}

.ts-verdict--pending[b-j5wf75drdz] {
    border-left-color: var(--line, #e3eef2);
}

.ts-verdict-chip[b-j5wf75drdz] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid currentColor;
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.ts-verdict-body[b-j5wf75drdz] {
    min-width: 0;
}

.ts-verdict-text[b-j5wf75drdz] {
    font-size: var(--fs-ui, 13.5px);
    line-height: 1.45;
}

.ts-verdict--pending .ts-verdict-text[b-j5wf75drdz] {
    color: var(--muted, #64748b);
}

.ts-verdict-note[b-j5wf75drdz] {
    margin-top: 4px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.ts-concerns[b-j5wf75drdz] {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: var(--fs-sm, 12.5px);
    line-height: 1.5;
}

.ts-concerns li + li[b-j5wf75drdz] {
    margin-top: 2px;
}

/* ---------- the week ---------- */
/* Scrolls inside its own container: a wide week must never push the dialog sideways. */
.ts-grid-scroll[b-j5wf75drdz] {
    width: 100%;
    overflow-x: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
}

.ts-grid[b-j5wf75drdz] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm, 12.5px);
}

.ts-grid th[b-j5wf75drdz],
.ts-grid td[b-j5wf75drdz] {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-2, #eef4f6);
    white-space: nowrap;
}

.ts-grid thead th[b-j5wf75drdz] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2, #f7fcfd);
    border-bottom: 1px solid var(--line, #e3eef2);
}

.ts-grid tbody tr:last-child td[b-j5wf75drdz] {
    border-bottom: 0;
}

.ts-slot-name[b-j5wf75drdz] {
    display: block;
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

.ts-slot-time[b-j5wf75drdz] {
    display: block;
    font-size: var(--fs-xs, 11.5px);
    color: var(--placeholder, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.ts-day-head[b-j5wf75drdz],
.ts-day[b-j5wf75drdz] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface, #fff);
    border-right: 1px solid var(--line, #e3eef2);
    font-family: var(--display, inherit);
    font-weight: 600;
}

.ts-day-head[b-j5wf75drdz] {
    z-index: 3;
    background: var(--surface-2, #f7fcfd);
    font-size: var(--fs-xs, 11.5px);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

/* ---------- cells ---------- */
.ts-cell[b-j5wf75drdz] {
    border-left: 3px solid transparent;
}

.ts-cell--teaching[b-j5wf75drdz] {
    background: var(--cyan-wash, #ecfeff);
    border-left-color: var(--cyan, #06b6d4);
}

/* A teacher in two rooms at once is the single most important thing this view can surface -
   UNLESS they meant it. See .ts-cell--combined below. */
.ts-cell--clash[b-j5wf75drdz] {
    background: var(--red-wash, #fdeaef);
    border-left-color: var(--red, #e11d48);
}

/* Two sections taught together, on purpose. Green, not red: nothing is wrong here, and painting a
   deliberate arrangement in alarm colours is how a teacher learns to ignore the colour that means
   they really are double-booked. */
.ts-cell--combined[b-j5wf75drdz] {
    background: var(--green-wash, #ecfdf5);
    border-left-color: var(--green, #047857);
}

.ts-combined-label[b-j5wf75drdz] {
    display: block;
    font-size: var(--fs-xs, 11.5px);
    font-weight: 700;
    color: var(--green, #047857);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ts-cell--break[b-j5wf75drdz],
.ts-break-col[b-j5wf75drdz] {
    background: var(--gray-50, #f8fafc);
}

.ts-room[b-j5wf75drdz] {
    display: block;
    font-weight: 600;
    line-height: 1.3;
}

.ts-subject[b-j5wf75drdz] {
    display: block;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    line-height: 1.3;
}

.ts-clash-count[b-j5wf75drdz] {
    display: block;
    font-size: var(--fs-xs, 11.5px);
    font-weight: 700;
    color: var(--red, #e11d48);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ts-more[b-j5wf75drdz] {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.ts-break[b-j5wf75drdz] {
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    font-style: italic;
}

.ts-free[b-j5wf75drdz] {
    color: var(--placeholder, #94a3b8);
}

/* ---------- workload panel ---------- */
/* Successor to the eight-tile "wellness score". Same presence on the page; every value here is
   calculated, carries a unit, and states its direction in the tooltip. */
.ts-metrics-head[b-j5wf75drdz] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

.ts-metrics-note[b-j5wf75drdz] {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.ts-metrics-grid[b-j5wf75drdz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.ts-metrics[b-j5wf75drdz] {
    padding: 12px 14px;
    border: 1px solid var(--line-2, #eef4f6);
    border-radius: var(--r, 12px);
    background: var(--canvas, #fff);
}

.ts-suggest[b-j5wf75drdz] {
    padding: 12px 14px;
    border: 1px solid var(--line-2, #eef4f6);
    border-radius: var(--r, 12px);
    background: var(--canvas, #fff);
}

.ts-tile[b-j5wf75drdz] {
    padding: 9px 12px;
    background: var(--surface-2, #f7fcfd);
    border: 1px solid var(--line-2, #eef4f6);
    border-radius: var(--r-input, 10px);
}

.ts-tile--alert[b-j5wf75drdz] {
    border-color: var(--amber, #d97706);
    background: var(--amber-wash, #fef3e2);
}

.ts-tile-value[b-j5wf75drdz] {
    display: block;
    font-family: var(--display, inherit);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink, #0f172a);
}

.ts-tile-label[b-j5wf75drdz] {
    display: block;
    margin-top: 1px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.ts-tile-sub[b-j5wf75drdz] {
    display: block;
    margin-top: 1px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    opacity: .8;
}

/* ---------- capacity: where this teacher COULD go ---------- */
/* Two columns because the panel is full width and these two questions are asked together:
   "when is she free" is useless without "what is she allowed to teach". The left column is
   narrower: a week of time chips needs far less room than a list of classes. */
.ts-capacity[b-j5wf75drdz] {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(320px, 3fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .ts-capacity[b-j5wf75drdz] {
        grid-template-columns: 1fr;
    }
}

.ts-capacity-col[b-j5wf75drdz] {
    padding: 12px 14px;
    border: 1px solid var(--line-2, #eef4f6);
    border-radius: var(--r, 12px);
    background: var(--canvas, #fff);
}

.ts-capacity-empty[b-j5wf75drdz] {
    padding: 10px 12px;
    border: 1px dashed var(--line, #e3eef2);
    border-radius: var(--r-input, 10px);
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

.ts-freedays[b-j5wf75drdz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-freeday[b-j5wf75drdz] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ts-freeday[b-j5wf75drdz] {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

.ts-freeday:last-child[b-j5wf75drdz] {
    border-bottom: 0;
    padding-bottom: 0;
}

.ts-freeday-name[b-j5wf75drdz] {
    flex: 0 0 34px;
    font-family: var(--display, inherit);
    font-size: var(--fs-sm, 12.5px);
    font-weight: 600;
    color: var(--muted, #64748b);
}

.ts-freeday-slots[b-j5wf75drdz] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ts-chip[b-j5wf75drdz] {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--cyan-wash, #e8f7fb);
    border: 1px solid var(--line-2, #eef4f6);
    font-size: var(--fs-xs, 11.5px);
    font-variant-numeric: tabular-nums;
}

.ts-eligibility[b-j5wf75drdz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ts-elig-grade[b-j5wf75drdz] {
    padding: 8px 10px;
    border: 1px solid var(--line-2, #eef4f6);
    border-radius: var(--r-input, 10px);
    background: var(--surface-2, #f7fcfd);
}

.ts-elig-grade-head[b-j5wf75drdz] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ts-elig-grade-name[b-j5wf75drdz] {
    font-family: var(--display, inherit);
    font-size: var(--fs-sm, 12.5px);
    font-weight: 600;
}

.ts-badge[b-j5wf75drdz] {
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--line, #e3eef2);
    background: var(--canvas, #fff);
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    white-space: nowrap;
}

.ts-badge--unused[b-j5wf75drdz] {
    border-color: var(--amber, #d97706);
    color: var(--amber, #d97706);
}

.ts-elig-rows[b-j5wf75drdz] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* One pill per section+subject. Reads as a set at a glance, where a stack of full-width rows
   forced you to read every line to find the one that differed. */
.ts-elig-pill[b-j5wf75drdz] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line, #e3eef2);
    background: var(--canvas, #fff);
    font-size: var(--fs-xs, 11.5px);
}

.ts-elig-pill--unused[b-j5wf75drdz] {
    border-style: dashed;
    color: var(--muted, #64748b);
}

.ts-elig-pill-section[b-j5wf75drdz] {
    font-weight: 700;
    font-family: var(--display, inherit);
}

.ts-elig-pill-subject[b-j5wf75drdz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-elig-pill-count[b-j5wf75drdz] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--cyan-deep, #0e7490);
}

.ts-more-link[b-j5wf75drdz] {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cyan-deep, #0e7490);
    font: inherit;
    font-size: var(--fs-sm, 12.5px);
    cursor: pointer;
    text-decoration: underline;
}

/* ---------- suggestions ---------- */
.ts-suggest-grid[b-j5wf75drdz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.ts-suggest-card[b-j5wf75drdz] {
    padding: 10px 12px;
    border: 1px solid var(--cyan, #06b6d4);
    border-left-width: 3px;
    border-radius: var(--r-input, 10px);
    background: var(--cyan-wash, #e8f7fb);
}

.ts-suggest-when[b-j5wf75drdz] {
    font-family: var(--display, inherit);
    font-weight: 700;
    font-size: var(--fs-ui, 13.5px);
    font-variant-numeric: tabular-nums;
}

.ts-suggest-target[b-j5wf75drdz] {
    margin-top: 1px;
    font-size: var(--fs-sm, 12.5px);
}

.ts-suggest-reason[b-j5wf75drdz] {
    margin-top: 4px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.ts-empty-hint[b-j5wf75drdz] {
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

/* ---------- empty state ---------- */
.ts-empty[b-j5wf75drdz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--surface-2, #f7fcfd);
    border: 1px dashed var(--line, #e3eef2);
    border-radius: var(--r, 12px);
}

.ts-empty-title[b-j5wf75drdz] {
    font-family: var(--display, inherit);
    font-weight: 600;
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Design/DesignShowcase.razor.rz.scp.css */
.et-gallery[b-jevln8sxj4] {
    padding: 20px 24px 80px;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--canvas);
    min-height: 100vh;
}

.et-sec[b-jevln8sxj4] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    margin-top: 16px;
}

.et-sec > h3[b-jevln8sxj4] {
    font-family: var(--display);
    font-size: var(--fs-h3);
    color: var(--ink);
    margin: 0 0 14px;
}

.et-sec .row[b-jevln8sxj4] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.et-sec .col[b-jevln8sxj4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tiles[b-jevln8sxj4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.formgrid[b-jevln8sxj4] {
    display: grid;
    grid-template-columns: 196px 1fr;
    gap: 24px;
    align-items: start;
}

.et-demo-input[b-jevln8sxj4] {
    width: 100%;
    font: inherit;
    font-size: var(--fs-ui);
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-input);
    padding: 9px 12px;
}

@media (max-width: 1024px) {
    .tiles[b-jevln8sxj4] { grid-template-columns: repeat(2, 1fr); }
    .formgrid[b-jevln8sxj4] { grid-template-columns: 1fr; }
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Fees/FeeReceiptView.razor.rz.scp.css */
.receipt-body[b-s00x139ukl] {
    position: relative;
}

.receipt-voided[b-s00x139ukl] {
    opacity: 0.75;
}

.receipt-void-stamp[b-s00x139ukl] {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-24deg);
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: 0.5rem;
    color: rgba(211, 47, 47, 0.28);
    border: 6px solid rgba(211, 47, 47, 0.28);
    padding: 0.25rem 1.5rem;
    pointer-events: none;
    z-index: 2;
}

.receipt-void-note[b-s00x139ukl] {
    text-align: center;
    color: #d32f2f;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* A void stamp that vanishes on print is worse than none — the paper is the thing that
   circulates. Force colour rendering so the watermark survives the print stylesheet. */
@media print {
    .receipt-void-stamp[b-s00x139ukl],
    .receipt-void-note[b-s00x139ukl] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Pages/LessonPlanning/LessonPlanning.razor.rz.scp.css */
/* Styles moved to wwwroot/css/app.css */
/* _content/ETuteApp.UI.Shared/Components/Pages/LessonPlanning/LessonPlanTabView.razor.rz.scp.css */
/* Styles moved to wwwroot/css/app.css */
/* _content/ETuteApp.UI.Shared/Components/Pages/Nili/Ask.razor.rz.scp.css */
.nili-ask-page__header[b-osgqt9pnmt] {
    flex: none;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 8px;
}

.nili-ask-page__back[b-osgqt9pnmt] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nili-ask-page[b-osgqt9pnmt]  .et-ask-content {
    flex: 1 1 auto;
    min-height: 0;
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Timetable/StepAssignTeachers.razor.rz.scp.css */
/* Step 1 — teacher coverage matrix.
   ---------------------------------------------------------------------------
   This screen answers two questions and nothing else: WHERE IS THERE NO
   TEACHER, and WHO IS OVER THEIR HOURS. Everything here is arranged so those
   two answers are visible without reading.

   Design notes:
   - Uses the Fresh Campus tokens (--canvas/--ink/--line/--cyan/--green/--amber/
     --red and their washes) rather than the generic --rz-base-* greys. The
     earlier pass boxed every cell in a 1px grey border, which made a status
     report read as a spreadsheet.
   - State is carried by a soft wash plus a 3px left accent, the same language
     step 3 uses for subject colour, so the two screens feel related.
   - Numbers use tabular figures so hour columns line up vertically.
*/

/* ---------- shared panel ---------- */
.wf[b-16hqd3y09q] {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    box-shadow: var(--shadow, 0 2px 5px rgba(11,23,51,.05));
    padding: 14px 16px;
    width: 100%;
    overflow-x: auto;
}

/* ---------- problem banner ---------- */
.problem-banner[b-16hqd3y09q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    border: 1px solid var(--red, #e11d48);
    border-left-width: 3px;
    border-radius: var(--r-input, 10px);
    background: var(--red-wash, #fdeaef);
    color: var(--ink, #0B1733);
    padding: 10px 14px;
    font-size: var(--fs-ui, 13.5px);
}

/* ---------- the matrix ---------- */
.coverage-matrix[b-16hqd3y09q] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--body, inherit);
    font-size: var(--fs-ui, 13.5px);
    font-variant-numeric: tabular-nums;
}

/* Hairlines between rows only. No cell grid: colour carries the state. */
.coverage-matrix th[b-16hqd3y09q],
.coverage-matrix td[b-16hqd3y09q] {
    padding: 9px 12px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

.coverage-matrix th[b-16hqd3y09q] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2, #f7fcfd);
    border-bottom: 1px solid var(--line, #e3eef2);
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
    white-space: nowrap;
}

/* Subject column: the row's anchor, so it stays put on a wide grade. */
/* "Section" prefix on the column heads: present, but subordinate to the letter. */
.coverage-matrix .mx-col-kind[b-16hqd3y09q] {
    opacity: .6;
    font-weight: 500;
}

.coverage-matrix .mx-subject-head[b-16hqd3y09q],
.coverage-matrix td.mx-subject[b-16hqd3y09q] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface, #fff);
    border-right: 1px solid var(--line, #e3eef2);
    font-weight: 600;
    color: var(--ink, #0B1733);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coverage-matrix .mx-subject-head[b-16hqd3y09q] {
    z-index: 3;
    background: var(--surface-2, #f7fcfd);
}

.coverage-matrix tr:last-child td[b-16hqd3y09q] {
    border-bottom: 0;
}

/* ---------- cell states ----------
   Only a cell with NO eligible teacher is interactive. A covered cell already names its
   teacher, so opening an explanation panel on it was pure noise -- and offering a pointer
   cursor on every cell invited a click that had nothing to say. */
.mx-cell[b-16hqd3y09q] {
    border-left: 3px solid transparent;
    transition: background-color .15s var(--ease, ease), border-color .15s var(--ease, ease);
}

.mx-cell--empty[b-16hqd3y09q] {
    cursor: pointer;
}

.mx-cell--empty:hover[b-16hqd3y09q] {
    background: var(--red-wash, #fdeaef);
    filter: brightness(.98);
}

.mx-cell--empty:focus-visible[b-16hqd3y09q] {
    outline: 2px solid var(--red, #e11d48);
    outline-offset: -2px;
}

/* exactly one eligible teacher — settled */
.mx-cell--ok[b-16hqd3y09q] {
    background: var(--green-wash, #e7f8f0);
    border-left-color: var(--green, #059669);
}

/* several eligible — the generator will choose */
.mx-cell--multi[b-16hqd3y09q] {
    background: var(--amber-wash, #fef3e2);
    border-left-color: var(--amber, #d97706);
}

/* Deliberately more than one teacher: the user said "either may take it". A decision, not a
   gap -- so it must not wear the amber that means "you still have to look at this". */
.mx-cell--shared[b-16hqd3y09q] {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
}

/* Switched off: the subject needs no teachers in this timetable.
   Deliberately NOT red -- an unstaffed cell here is an intention, not a problem. The row
   recedes so the eye skips it while scanning for real gaps. Nothing is cleared underneath:
   switching back on restores the row exactly as it was. */
.mx-row-off .mx-subject[b-16hqd3y09q] {
    opacity: .55;
}

.mx-cell--off[b-16hqd3y09q] {
    background: repeating-linear-gradient(
        135deg,
        var(--gray-50, #f8fafc),
        var(--gray-50, #f8fafc) 6px,
        var(--surface, #fff) 6px,
        var(--surface, #fff) 12px);
    cursor: default;
}

.mx-off[b-16hqd3y09q] {
    color: var(--muted, #64748b);
    font-size: var(--fs-xs, 11.5px);
    font-style: italic;
}

/* nobody can teach this subject in this section */
.mx-cell--empty[b-16hqd3y09q] {
    background: var(--red-wash, #fdeaef);
    border-left-color: var(--red, #e11d48);
}

.mx-empty[b-16hqd3y09q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--red, #e11d48);
    font-weight: 700;
    font-size: var(--fs-xs, 11.5px);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mx-teacher[b-16hqd3y09q] {
    display: block;
    font-weight: 600;
    color: var(--ink, #0B1733);
    line-height: 1.3;
}

.mx-hours[b-16hqd3y09q] {
    display: block;
    margin-top: 2px;
    color: var(--muted, #64748b);
    font-size: var(--fs-xs, 11.5px);
    font-variant-numeric: tabular-nums;
}

/* ---------- hours strip ---------- */
.hours-strip[b-16hqd3y09q] {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line, #e3eef2);
}

.hrsbox[b-16hqd3y09q] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-ui, 13.5px);
    font-variant-numeric: tabular-nums;
}

.hrsbox th[b-16hqd3y09q],
.hrsbox td[b-16hqd3y09q] {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

.hrsbox th[b-16hqd3y09q] {
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
    background: var(--surface-2, #f7fcfd);
    white-space: nowrap;
}

.hrsbox tr:last-child td[b-16hqd3y09q] {
    border-bottom: 0;
}

.hrsbox .muted[b-16hqd3y09q] {
    color: var(--muted, #64748b);
    font-size: var(--fs-xs, 11.5px);
}

.hrsbox .bad-t[b-16hqd3y09q] {
    color: var(--red, #e11d48);
    font-weight: 700;
}

/* Second term of the total: hours the teacher already has in other grades. Sits under the
   figure so the arithmetic reads -- this grade + elsewhere = total. */
.hrs-elsewhere[b-16hqd3y09q] {
    display: block;
    margin-top: 1px;
    font-size: var(--fs-xs, 11.5px);
    font-weight: 400;
    color: var(--muted, #64748b);
}

.hrs-row-warn[b-16hqd3y09q] {
    background: var(--red-wash, #fdeaef);
}

.hrs-row-warn td:first-child[b-16hqd3y09q] {
    box-shadow: inset 3px 0 0 var(--red, #e11d48);
}

/* ---------- teacher load rail ---------- */
.teacher-load-rail[b-16hqd3y09q] {
    max-height: 480px;
    overflow-y: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    padding: 4px;
}

.rail-item[b-16hqd3y09q] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: var(--r-input, 10px);
    cursor: pointer;
    border-bottom: 1px solid var(--line-2, #eef4f6);
    transition: background-color .15s var(--ease, ease);
}

.rail-item:last-child[b-16hqd3y09q] {
    border-bottom: 0;
}

.rail-item:hover[b-16hqd3y09q] {
    background: var(--cyan-wash, #ecfeff);
}

.rail-item:focus-visible[b-16hqd3y09q] {
    outline: 2px solid var(--cyan, #06b6d4);
    outline-offset: -2px;
}

/* Over capacity: the one thing on this rail that must not be missable. */
.rail-item--over[b-16hqd3y09q] {
    background: var(--red-wash, #fdeaef);
    box-shadow: inset 3px 0 0 var(--red, #e11d48);
}

.rail-item--over:hover[b-16hqd3y09q] {
    background: var(--red-wash, #fdeaef);
}

.rail-item--over .rail-hours[b-16hqd3y09q] {
    color: var(--red, #e11d48);
    font-weight: 700;
}

/* The capacity meter — the signature device of this screen.
   "Who is over their hours" is the question the rail exists to answer, and a number alone
   makes you read and compare. A bar makes it a glance.

   TWO segments, because there are two different true quantities and one bar showing their sum
   would hide which is which:
     <i>  solid  — hours REALLY on the timetable this week. Does not move when a subject is toggled.
     <b>  ghost  — the projection this screen's selections would reach, an UPPER BOUND. Moves.
   The ghost is drawn first and the solid sits on top of it, so the solid is always readable and
   the ghost reads as the headroom being claimed.

   Both fill toward the WEEKLY capacity (MaxHoursPerDay x teaching days). It used to fill toward
   the DAILY cap while being fed weekly hours, which is how a teacher with nothing scheduled
   showed a full red bar. aria-hidden: the figures beside it carry the values and the row's title
   states both in full, so the bar is pure redundancy for screen readers. */
.rail-meter[b-16hqd3y09q] {
    position: relative;
    flex: 1 1 auto;
    min-width: 40px;
    max-width: 120px;
    height: 6px;
    border-radius: var(--r-pill, 999px);
    background: var(--gray-200, #e2e8f0);
    overflow: hidden;
}

.rail-meter > i[b-16hqd3y09q],
.rail-meter > b[b-16hqd3y09q] {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width .2s var(--ease, ease);
}

/* projection — underneath, deliberately faint: it is what COULD happen, not what has */
.rail-meter > b[b-16hqd3y09q] {
    background: color-mix(in srgb, var(--cyan, #06b6d4) 32%, transparent);
}

/* actually scheduled — on top, full strength */
.rail-meter > i[b-16hqd3y09q] {
    background: var(--cyan, #06b6d4);
}

.rail-item--over .rail-meter[b-16hqd3y09q] {
    background: color-mix(in srgb, var(--red, #e11d48) 18%, transparent);
}

.rail-item--over .rail-meter > b[b-16hqd3y09q] {
    background: color-mix(in srgb, var(--red, #e11d48) 38%, transparent);
}

.rail-item--over .rail-meter > i[b-16hqd3y09q] {
    background: var(--red, #e11d48);
}

.rail-name[b-16hqd3y09q] {
    font-size: var(--fs-ui, 13.5px);
    color: var(--ink, #0B1733);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-hours[b-16hqd3y09q] {
    flex: none;
    font-family: var(--display, inherit);
    font-size: var(--fs-sm, 12.5px);
    font-weight: 600;
    color: var(--ink-soft, #33415c);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The "+2h 30m" that this screen's selections would add. Lighter than the scheduled figure
   beside it, because it is a projection and must never be mistaken for the teacher's real load. */
.rail-planned[b-16hqd3y09q] {
    margin-left: 4px;
    font-weight: 500;
    color: var(--placeholder, #94a3b8);
}

.rail-item--over .rail-planned[b-16hqd3y09q] {
    color: var(--red, #e11d48);
}

@media (prefers-reduced-motion: reduce) {
    .mx-cell[b-16hqd3y09q],
    .rail-item[b-16hqd3y09q],
    .rail-meter > i[b-16hqd3y09q],
    .rail-meter > b[b-16hqd3y09q] {
        transition: none;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Timetable/StepGenerateGrid.razor.rz.scp.css */
/* Step 3 — the generated week grid.
   ---------------------------------------------------------------------------
   Shares its visual language with step 1: Fresh Campus tokens, state carried by
   a soft wash plus a 3px left accent, tabular figures, hairline separators
   instead of a full cell grid.

   Note on ::deep: classes placed on RadzenTable / RadzenTableCell land on a CHILD
   component's rendered markup, which Blazor's CSS isolation does not scope. Those
   selectors need ::deep to apply at all; plain element classes in this component's
   own markup do not.
*/

/* The scope anchor added so the ::deep rules below have an ancestor carrying the scope attribute.
   Explicit width because the parent stack is a flex column with align-items:flex-start, where a
   plain block child shrink-wraps to its content rather than stretching. */
.generate-grid-scope[b-1ni1arkiad] {
    width: 100%;
}

/* ---------- step-3 toolbar ---------- */

/* Holds its height when the cluster inside is empty - a non-admin in view mode has no Edit button,
   and a row that collapses to nothing makes the grid jump up as the mode changes. */
.tt-toolbar-row[b-1ni1arkiad] {
    min-height: 34px;
}


/* The .tt-toolbar ink rules that used to sit here are gone.

   They existed because ButtonStyle.Light renders its label in --rz-base-200 - a near-white grey -
   so Copy from, Auto-fill and Clear read as disabled. That is not a step-3 problem: it is how
   Radzen styles the outlined and text variants of a Light button, which are built for a dark
   surface and are used here on white. Patching it per container is why it was reported four
   separate times, each on whichever Light button had not been patched yet.

   It is now fixed once, for every Light button in the app, in wwwroot/css/app.css - search for
   "ButtonStyle.Light, fixed once". Nothing about it is specific to this component, so nothing
   about it belongs in this file. */

/* ---------- section tabs ---------- */
.tt-tabs[b-1ni1arkiad] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
}

.tt-tab[b-1ni1arkiad] {
    cursor: pointer;
    min-width: 104px;
    padding: 7px 14px;
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r-input, 10px);
    background: var(--surface, #fff);
    transition: background-color .15s var(--ease, ease),
                border-color .15s var(--ease, ease),
                box-shadow .15s var(--ease, ease);
}

.tt-tab:hover[b-1ni1arkiad] {
    border-color: var(--cyan, #06b6d4);
    background: var(--cyan-wash, #ecfeff);
}

.tt-tab:focus-visible[b-1ni1arkiad] {
    outline: 2px solid var(--cyan, #06b6d4);
    outline-offset: 2px;
}

.tt-tab-active[b-1ni1arkiad] {
    border-color: var(--cyan, #06b6d4);
    background: var(--cyan-wash, #ecfeff);
    box-shadow: inset 0 -2px 0 var(--cyan, #06b6d4);
}

.tt-tab-name[b-1ni1arkiad] {
    display: block;
    font-family: var(--display, inherit);
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    color: var(--ink, #0B1733);
    line-height: 1.25;
}

.tt-tab-status[b-1ni1arkiad] {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.tt-tab-status-bad[b-1ni1arkiad] {
    color: var(--red, #e11d48);
    font-weight: 700;
}

.tt-tab-status-ok[b-1ni1arkiad] {
    color: var(--green, #059669);
    font-weight: 700;
}

.tt-tab-status-draft[b-1ni1arkiad] {
    color: var(--amber, #d97706);
    font-weight: 700;
}

/* A section whose only remaining clash is one somebody accepted. Amber, not red: there is
   nothing left to fix, but the double-booking is still true and still worth saying. */
.tt-tab-status-warn[b-1ni1arkiad] {
    color: var(--amber, #d97706);
    font-weight: 700;
}

/* ---------- unsaved indicator ---------- */
.tt-unsaved-dot[b-1ni1arkiad] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--r-pill, 999px);
    background: var(--amber-wash, #fef3e2);
    color: var(--amber-ink, #92400e);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- problem banner ---------- */

/* Amber by default, red only for a real clash.

   An unstaffed period is a vacancy, not a mistake - the wizard deliberately lets you publish over
   one - so dressing it in the same alarm red as a teacher double-booked in two rooms overstates
   it, and having every draft permanently wear a red banner trains the user to ignore the banner
   that actually matters. .tt-problem-banner--blocking is added only when ConflictCount > 0. */
.tt-problem-banner[b-1ni1arkiad] {
    border: 1px solid var(--amber, #d97706);
    border-left-width: 3px;
    border-radius: var(--r-input, 10px);
    background: var(--amber-wash, #fff7ed);
    color: var(--ink, #0B1733);
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: var(--fs-ui, 13.5px);
}

.tt-problem-banner--blocking[b-1ni1arkiad] {
    border-color: var(--red, #e11d48);
    background: var(--red-wash, #fdeaef);
}

/* The reason for whichever cell Jump to next has landed on. Secondary to the counts above it. */
.tt-problem-reason[b-1ni1arkiad] {
    color: var(--ink-soft, #33415c);
    font-size: var(--fs-sm, 12.5px);
}

/* A named-but-ineligible teacher: marked, but not in conflict red. The fix is to pick a different
   teacher, not to resolve a clash. */
[b-1ni1arkiad] .timetable-cell-ineligible {
    box-shadow: inset 3px 0 0 0 var(--amber, #d97706);
    background: var(--amber-wash, #fff7ed);
}

/* ---------- subject legend ---------- */
.subject-legend-chip[b-1ni1arkiad] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 6px;
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r-pill, 999px);
    background: var(--surface, #fff);
    font-size: var(--fs-xs, 11.5px);
    color: var(--ink-soft, #33415c);
    white-space: nowrap;
}

.subject-legend-swatch[b-1ni1arkiad] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex: none;
}

/* .tt-cell-trigger removed with the whole-cell click target it styled. The cell now has three
   distinct targets - subject, teacher, and the gutter icons - so a single hover wash across the
   entire cell would have fought all of them for the same pixels. See THE PERIOD CELL below. */

/* ---------- grid layout ---------- */

/* Plain divs in this component's own markup, so no ::deep - they carry the scope attribute. */
.tt-grid-wrap[b-1ni1arkiad] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;          /* lets the scroller actually shrink inside a flex parent */
}

.tt-grid-scroll[b-1ni1arkiad] {
    width: 100%;
    overflow-x: auto;      /* the table's min-width wins here rather than squeezing the columns */
}

/* ---------- grid cells (child-component markup, needs ::deep) ---------- */
[b-1ni1arkiad] .session-allocation-table {
    font-variant-numeric: tabular-nums;
    /* Fixed layout is what makes "periods share the leftover width equally" work: every column
       that does NOT declare a width gets an equal cut of what Day and Break leave behind. With
       the default auto layout the browser sizes columns by their CONTENT, so a period holding
       "Social Studies-Political Science" would bully its neighbours. */
    table-layout: fixed;
}

/* Day: narrow, and left aligned so the eye has a straight edge to run down the week. A right
   hairline separates it from the week, exactly as .ts-day does in the teacher overlay. */
[b-1ni1arkiad] .session-allocation-table .tt-col-day {
    text-align: left;
    padding-left: 10px !important;
    border-right: 1px solid var(--line, #e3eef2);
    background: var(--surface, #fff);
}

[b-1ni1arkiad] .session-allocation-table thead .tt-col-day {
    background: var(--surface-2, #f7fcfd);
}

/* The header's two lines stack and sit left, like .ts-slot-name over .ts-slot-time. */
[b-1ni1arkiad] .session-allocation-table thead .period-type,
[b-1ni1arkiad] .session-allocation-table thead .period-time {
    display: block;
    line-height: 1.35;
}

[b-1ni1arkiad] .tt-day-name {
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    color: var(--ink-soft, #33415c);
    margin: 0;
}

/* A break earns less room than a lesson - it carries two times and no content. */
[b-1ni1arkiad] .session-allocation-table .tt-col-break .period-type {
    font-size: 10px;
    letter-spacing: .04em;
}

[b-1ni1arkiad] .session-allocation-table .tt-col-break .period-time {
    font-size: 10px;
    line-height: 1.2;
}

[b-1ni1arkiad] .period-type {
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

[b-1ni1arkiad] .period-time {
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    font-variant-numeric: tabular-nums;
}

/* .subject-name / .teacher-name were the step-3 cell's text classes before the redesign; the cell
   now uses .tt-subject / .tt-teacher, styled under THE PERIOD CELL below. These two rules stay
   because the same class names are used by the read-only week rendered elsewhere on this page. */
[b-1ni1arkiad] .subject-name {
    font-weight: 600;
    color: var(--ink, #0B1733);
    line-height: 1.25;
}

[b-1ni1arkiad] .teacher-name {
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

/* A break is structure, not content — recede it. */
[b-1ni1arkiad] .timetable-cell-break {
    background: var(--gray-50, #f8fafc);
}

/* Matches .ts-break in the teacher overlay. */
[b-1ni1arkiad] .tt-break-label {
    display: block;
    padding: 0 10px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    font-style: italic;
}

/* This day simply does not run at this time. Not a gap to fill, not an error --
   read it as "outside the day", so it must not draw the eye like an empty period. */
[b-1ni1arkiad] .timetable-cell-none {
    background: repeating-linear-gradient( 135deg, transparent, transparent 6px, var(--gray-100, #f1f5f9) 6px, var(--gray-100, #f1f5f9) 12px );
    border: none;
}

[b-1ni1arkiad] .timetable-cell-dirty {
    box-shadow: inset 0 0 0 2px var(--amber, #d97706);
}

[b-1ni1arkiad] .timetable-cell-highlighted {
    outline: 2px solid var(--cyan, #06b6d4);
    outline-offset: -2px;
}

/* Now that subjects no longer tint the whole cell, a wash here reads clearly on its own without
   having to shout over thirty other tinted blocks. */
[b-1ni1arkiad] .timetable-cell-unassigned {
    background: var(--red-wash, #fdeaef) !important;
    border: 1px dashed var(--red, #e11d48) !important;
}

/* Hairline separators, so the grid reads as rows of cells rather than a block of colour. */
[b-1ni1arkiad] .timetable-cell {
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

[b-1ni1arkiad] .timetable-cell-conflict {
    box-shadow: inset 3px 0 0 var(--red, #e11d48);
}

/* An ALLOWED clash. Same 3px bar so the eye reads it as the same family of thing, amber so it
   reads as "we know" rather than "fix this". */
[b-1ni1arkiad] .timetable-cell-clash-allowed {
    box-shadow: inset 3px 0 0 var(--amber, #d97706);
}

/* ============================================================================================
   THE PERIOD CELL
   ============================================================================================

   Anchored on .generate-grid-scope, never on the inner class directly. The cell's contents are
   inside RadzenTableCell - a CHILD COMPONENT - and Blazor stamps the b-xxx scope attribute only
   on plain elements in THIS file's own markup. A rule written as `.tt-cell-body ::deep ...`
   compiles to `.tt-cell-body[b-xxx] ...`, matches nothing, and is silently dead. That mistake
   shipped once in this very file, on the toolbar, and cost a round trip to find.

   Two hard rules the geometry has to keep, both learned the hard way:
     1. NOTHING is drawn outside the cell's border box. No negative offsets. A floating chip
        lands on the row above the moment the grid is dense.
     2. NOTHING moves on hover. The gutter is always present at a fixed width; revealing it by
        animating the text column resized the text on every cell the cursor crossed, so sweeping
        the grid set off a wave of columns breathing. Hover changes colour only.
   ============================================================================================ */

.generate-grid-scope[b-1ni1arkiad]  .tt-cell-body {
    display: grid;
    grid-template-columns: 1fr var(--tt-gutter, 0px);
    align-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;              /* the guarantee behind rule 1 */
}

/* Edit mode is the only mode with actions, so it is the only mode that reserves the space. */
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell .tt-cell-body:has(.tt-cell-gutter) {
    --tt-gutter: 56px;
}

/* A clash carries a third icon. Decided by the cell's STATE, fixed for its lifetime - never by
   where the pointer is. An allowed clash keeps that icon -- it is how the allowance is
   withdrawn -- so it reserves the same width. */
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell-conflict .tt-cell-body:has(.tt-cell-gutter),
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell-clash-allowed .tt-cell-body:has(.tt-cell-gutter) {
    --tt-gutter: 80px;
}

/* ---- a period publish refused ------------------------------------------------------------

   The whole cell is one button, so the click target matches the thing the reader is looking at.
   It keeps the grid's geometry exactly (same grid, same height, no gutter reserved) because a
   cell that changes size when it goes into error makes the row jump underneath the cursor.
   Rule 2 still applies: hover changes colour only. */
.generate-grid-scope[b-1ni1arkiad]  .tt-cell-body--blocked {
    --tt-gutter: 0px;
    appearance: none;
    border: 0;
    padding: 0 2px;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-cell-body--blocked:hover {
    background: rgba(220, 38, 38, .08);
}

.generate-grid-scope[b-1ni1arkiad]  .tt-cell-body--blocked:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: -2px;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-subject--blocked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-weight: 600;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-cell-error-icon {
    font-size: 15px;
    line-height: 1;
    color: #dc2626;
    flex: 0 0 auto;
}

/* The section switcher's own warning. Sits with the letter, not the status line, because the
   letter is what the eye lands on first when picking a tab. */
.tt-tab-icon[b-1ni1arkiad] {
    font-size: 15px;
    line-height: 1;
    vertical-align: -2px;
    margin-right: 3px;
}

.tt-tab-icon--bad[b-1ni1arkiad] {
    color: #dc2626;
}

/* Left aligned, matching the teacher overlay's week grid. Centred text gave every column a
   different left edge, so scanning down a day meant re-finding where each subject started. */
.generate-grid-scope[b-1ni1arkiad]  .tt-cell-text {
    min-width: 0;                  /* lets the children ellipsis instead of shoving the gutter out */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 0 4px 0 8px;
    gap: 0;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-subject,
.generate-grid-scope[b-1ni1arkiad]  .tt-teacher {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0 2px;
    margin: 0 -2px;                /* keeps the hover wash off the text's left edge */
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    line-height: 1.3;
    text-align: left;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-subject {
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--ink, #0B1733);
}

.generate-grid-scope[b-1ni1arkiad]  .tt-teacher {
    font-size: var(--fs-sm, 12.5px);
    color: var(--ink-soft, #33415c);
}

.generate-grid-scope[b-1ni1arkiad]  .tt-teacher--empty {
    color: var(--amber, #b45309);
    font-style: italic;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-subject:hover,
.generate-grid-scope[b-1ni1arkiad]  .tt-teacher:hover,
.generate-grid-scope[b-1ni1arkiad]  .tt-subject:focus-visible,
.generate-grid-scope[b-1ni1arkiad]  .tt-teacher:focus-visible {
    background: var(--cyan-wash, #e8f7fb);
    color: var(--cyan-deep, #0e7490);
    text-decoration: underline;
    text-underline-offset: 2px;
    outline: none;
}

/* State carried by the teacher line's colour, alongside the word CellStateSuffix appends. */
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell-ineligible .tt-teacher { color: var(--amber, #b45309); }
 .generate-grid-scope[b-1ni1arkiad]  .timetable-cell-conflict   .tt-teacher { color: var(--red, #be123c); }
 .generate-grid-scope[b-1ni1arkiad]  .timetable-cell-ignore-conflict .tt-teacher { color: var(--green, #047857); }
 .generate-grid-scope[b-1ni1arkiad]  .timetable-cell-clash-allowed .tt-teacher { color: var(--amber-ink, #b45309); }

/* The exclamation mark. Drawn with ::before on the teacher line rather than as an element,
   because rule 1 above forbids anything outside the cell's border box and the 40px row has no
   vertical room for a chip. It rides the text it qualifies, so it can never collide with the
   row above and never changes the cell's geometry. */
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell-clash-allowed .tt-teacher::before {
    content: "\26A0";              /* U+26A0 WARNING SIGN */
    margin-right: 3px;
    font-weight: 700;
    color: var(--amber, #d97706);
}

/* ---------- the gutter ---------- */

.generate-grid-scope[b-1ni1arkiad]  .tt-cell-gutter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 100%;
    padding-right: 5px;
    overflow: hidden;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-ic {
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    line-height: 1;
    color: var(--placeholder, #94a3b8);   /* quiet at rest - thirty cells of these */
    transition: color .1s ease, background-color .1s ease, border-color .1s ease;
}

/* The glyph itself comes from RadzenIcon, so only its SIZE is set here. Declaring a font-family
   was the bug: this app loads "Material Icons Outlined" and a stack naming any other family falls
   back to sans-serif, rendering the ligature as the literal word "edit". */
.generate-grid-scope[b-1ni1arkiad]  .tt-ic .rzi,
.generate-grid-scope[b-1ni1arkiad]  .tt-ic .rz-icon,
.generate-grid-scope[b-1ni1arkiad]  .tt-ic i {
    font-size: 15px;
    line-height: 1;
    width: auto;
    height: auto;
    margin: 0;
    color: inherit;
}

/* Pointing at the cell brings its icons up to readable. Nothing moves. */
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell:hover .tt-ic,
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell:focus-within .tt-ic {
    color: var(--ink-soft, #33415c);
}

.generate-grid-scope[b-1ni1arkiad]  .tt-ic:hover {
    border-color: var(--cyan-deep, #0e7490);
    color: var(--cyan-deep, #0e7490);
    background: var(--cyan-wash, #e8f7fb);
}

.generate-grid-scope[b-1ni1arkiad]  .tt-ic:focus-visible {
    outline: 2px solid var(--cyan-deep, #0e7490);
    outline-offset: 1px;
    color: var(--ink-soft, #33415c);
}

/* An engaged toggle - combined class, or an allowed clash - stays lit whether or not the cursor
   is anywhere near it. It is a state of the timetable, not a hover affordance. */
.generate-grid-scope[b-1ni1arkiad]  .tt-ic--on {
    color: var(--green, #047857);
    border-color: var(--green, #047857);
    background: var(--green-wash, #ecfdf5);
}

.generate-grid-scope[b-1ni1arkiad]  .timetable-cell:hover .tt-ic--on {
    color: var(--green, #047857);
}

/* The subject overview dialog is styled INLINE, in the markup.

   Radzen renders dialogs into a body-level portal, so that markup is outside this component's DOM
   and unreachable from here: ::deep only reaches child components inside this component's own
   subtree, and Blazor scoped CSS has no :global() - a block of :global(...) rules here compiles to
   nothing at all, which is how the dialog first shipped as a stack of unstyled text. The sibling
   cell popover has always been inline for the same reason. */

@media (prefers-reduced-motion: reduce) {
    .tt-tab[b-1ni1arkiad] {
        transition: none;
    }

    .generate-grid-scope[b-1ni1arkiad]  .tt-ic {
        transition: none;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Timetable/StepPeriodTimes.razor.rz.scp.css */
/* Step 2 — the day-shape editor.
   ---------------------------------------------------------------------------
   Two panels: the shape of a school day on the left, which weekday uses which
   shape on the right. Shares the Fresh Campus token system with steps 1 and 3,
   so the three wizard steps read as one screen rather than three.

   Everything here is prefixed `.period-times-stack ::deep` because these classes
   sit on Radzen components (RadzenCard / RadzenStack), whose rendered markup is a
   child component's output and therefore outside this component's CSS isolation
   scope. Without ::deep none of it applies.
*/

/* The scope anchor (see the comment in the .razor). It needs an explicit width: the parent stack
   in ClassScheduler is a flex column with align-items:flex-start, which makes a plain block child
   shrink-wrap to its content instead of stretching. The RadzenStack that used to carry this class
   had width:100% set inline, so the constraint was invisible until the class moved to a real div. */
.period-times-stack[b-kneumkocml] {
    width: 100%;
}

/* ---------- panels ---------- */
.period-times-stack[b-kneumkocml]  .shape-panel,
.period-times-stack[b-kneumkocml]  .day-assign-panel,
.period-times-stack[b-kneumkocml]  .week-preview-panel {
    width: 100%;
    padding: 14px 16px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    box-shadow: var(--shadow, 0 2px 5px rgba(11,23,51,.05));
}

.period-times-stack[b-kneumkocml]  .week-preview-panel {
    margin-top: 12px;
}

.period-times-stack[b-kneumkocml]  .shape-hint {
    margin-left: auto;
    color: var(--muted, #64748b);
    font-size: var(--fs-xs, 11.5px);
}

/* P6 (D11, AC12): informational only, never an error state and never blocking. Same amber
   notice family as the generate-grid step's non-blocking problem banner (--amber / --amber-wash),
   reproduced here because that step's CSS is isolated to its own component and cannot be reused. */
.period-times-stack[b-kneumkocml]  .divergence-note {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 1px solid var(--amber, #d97706);
    border-left-width: 3px;
    border-radius: var(--r-input, 10px);
    background: var(--amber-wash, #fff7ed);
    color: var(--ink, #0B1733);
    font-size: var(--fs-ui, 13.5px);
}

.period-times-stack[b-kneumkocml]  .day-start-row {
    margin: 10px 0 8px;
}

/* ---------- the ordered day shape ---------- */
.period-times-stack[b-kneumkocml]  .shape-rows {
    max-height: 420px;
    overflow-y: auto;
    border-top: 1px solid var(--line-2, #eef4f6);
}

.period-times-stack[b-kneumkocml]  .shape-row {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line-2, #eef4f6);
    background: var(--surface, #fff);
    border-left: 3px solid var(--cyan, #06b6d4);
    transition: background-color .15s var(--ease, ease);
}

.period-times-stack[b-kneumkocml]  .shape-row:hover {
    background: var(--cyan-wash, #ecfeff);
}

/* A break is not a lesson — different accent, receded surface. */
.period-times-stack[b-kneumkocml]  .shape-row-break {
    background: var(--amber-wash, #fef3e2);
    border-left-color: var(--amber, #d97706);
}

.period-times-stack[b-kneumkocml]  .row-label {
    width: 52px;
    font-family: var(--display, inherit);
    font-weight: 600;
    font-size: var(--fs-ui, 13.5px);
    color: var(--ink, #0B1733);
}

.period-times-stack[b-kneumkocml]  .row-time {
    min-width: 46px;
    font-size: var(--fs-ui, 13.5px);
    color: var(--ink-soft, #33415c);
    font-variant-numeric: tabular-nums;
}

.period-times-stack[b-kneumkocml]  .row-dash {
    color: var(--placeholder, #94a3b8);
}

.period-times-stack[b-kneumkocml]  .row-duration {
    min-width: 52px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.period-times-stack[b-kneumkocml]  .row-actions {
    margin-left: auto;
}

/* Radzen's ButtonStyle.Light on a Text variant renders a grey so pale that every one of these
   reads as disabled - which matters most here, because two of them GENUINELY are (move-up on the
   first row, move-down on the last) and there was no way to tell the two states apart. Enabled
   controls take ink; disabled ones fade properly and lose the pointer. */
.period-times-stack[b-kneumkocml]  .row-actions .rz-button {
    width: 28px;
    height: 28px;
    color: var(--ink-soft, #33415c);
}

.period-times-stack[b-kneumkocml]  .row-actions .rz-button:hover:not(:disabled) {
    background: var(--cyan-wash, #e8f7fb);
    color: var(--cyan-deep, #0e7490);
}

.period-times-stack[b-kneumkocml]  .row-actions .rz-button:disabled {
    color: var(--placeholder, #94a3b8);
    opacity: .45;
    cursor: not-allowed;
}

.period-times-stack[b-kneumkocml]  .row-actions .rz-button.rz-danger {
    color: var(--red, #e11d48);
}

.period-times-stack[b-kneumkocml]  .row-actions .rz-button.rz-danger:hover:not(:disabled) {
    background: var(--red-wash, #fdeaef);
    color: var(--red, #e11d48);
}

/* Add period / Add break.
   Plain buttons owned by this stylesheet - see the comment in the .razor. Both are enabled and
   both should look it; the difference between them is which one is the usual next move, carried by
   colour rather than by making one of them look switched off. */
.period-times-stack .add-btn[b-kneumkocml] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: var(--canvas, #fff);
    font: inherit;
    font-size: var(--fs-sm, 12.5px);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s var(--ease, ease);
}

.period-times-stack .add-btn-plus[b-kneumkocml] {
    font-size: 15px;
    line-height: 1;
}

.period-times-stack .add-btn--period[b-kneumkocml] {
    color: var(--cyan-deep, #0e7490);
}

.period-times-stack .add-btn--period:hover[b-kneumkocml] {
    background: var(--cyan-wash, #e8f7fb);
}

.period-times-stack .add-btn--break[b-kneumkocml] {
    color: var(--amber, #d97706);
}

.period-times-stack .add-btn--break:hover[b-kneumkocml] {
    background: var(--amber-wash, #fef3e2);
}

.period-times-stack[b-kneumkocml]  .shape-append-row {
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ---------- summaries ---------- */
/* Neutral, not green. These state what the day and week currently add up to; they are not a
   success message, and two full-width green bands on one screen made the page shout. */
.period-times-stack[b-kneumkocml]  .shape-summary,
.period-times-stack[b-kneumkocml]  .week-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: var(--r-input, 10px);
    background: var(--surface-2, #f7fcfd);
    border: 1px solid var(--line-2, #eef4f6);
    color: var(--ink-soft, #33415c);
    font-size: var(--fs-sm, 12.5px);
    font-variant-numeric: tabular-nums;
}

.period-times-stack[b-kneumkocml]  .sum-item b {
    color: var(--ink, #0B1733);
}

.period-times-stack[b-kneumkocml]  .sum-item--key {
    margin-left: auto;
    color: var(--ink, #0B1733);
}

/* ---------- day → shape assignment ---------- */
.period-times-stack[b-kneumkocml]  .day-assign-title {
    display: block;
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
    margin-bottom: 10px;
}

.period-times-stack[b-kneumkocml]  .day-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: var(--r-input, 10px);
    background: var(--surface-2, #f7fcfd);
    border: 1px solid var(--line-2, #eef4f6);
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.period-times-stack[b-kneumkocml]  .day-row--off {
    background: transparent;
    border-style: dashed;
}

.period-times-stack[b-kneumkocml]  .day-row--off .day-name,
.period-times-stack[b-kneumkocml]  .day-row--off .day-hours {
    color: var(--placeholder, #94a3b8);
}

/* ---------- segmented control ---------- */
/* Three joined options read as one choice. Three separate Radzen buttons per row, times seven
   rows, was twenty-one individually-bordered targets stacked in one narrow column. */
.period-times-stack[b-kneumkocml]  .seg {
    display: inline-flex;
    border: 1px solid var(--line, #e3eef2);
    border-radius: 999px;
    background: var(--canvas, #fff);
    overflow: hidden;
}

.period-times-stack[b-kneumkocml]  .seg-btn {
    padding: 4px 12px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s var(--ease, ease), color .12s var(--ease, ease);
}

.period-times-stack[b-kneumkocml]  .seg-btn + .seg-btn {
    border-left: 1px solid var(--line-2, #eef4f6);
}

.period-times-stack[b-kneumkocml]  .seg-btn:hover {
    background: var(--surface-2, #f7fcfd);
    color: var(--ink, #0B1733);
}

.period-times-stack[b-kneumkocml]  .seg-btn--on {
    background: var(--cyan, #06b6d4);
    color: #fff;
    font-weight: 600;
}

.period-times-stack[b-kneumkocml]  .seg-btn--on:hover {
    background: var(--cyan-deep, #0e7490);
    color: #fff;
}

.period-times-stack[b-kneumkocml]  .day-name {
    width: 44px;
    font-family: var(--display, inherit);
    font-weight: 600;
    color: var(--ink, #0B1733);
}

.period-times-stack[b-kneumkocml]  .day-hours {
    margin-left: auto;
    color: var(--muted, #64748b);
    font-size: var(--fs-xs, 11.5px);
    font-variant-numeric: tabular-nums;
}

/* ---------- week preview ---------- */
.period-times-stack[b-kneumkocml]  .preview-week {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.period-times-stack[b-kneumkocml]  .preview-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.period-times-stack[b-kneumkocml]  .preview-day {
    flex: 0 0 34px;
    font-family: var(--display, inherit);
    font-weight: 600;
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

.period-times-stack[b-kneumkocml]  .preview-track {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    border-radius: var(--r-input, 10px);
    overflow: hidden;
    border: 1px solid var(--line-2, #eef4f6);
}

.period-times-stack[b-kneumkocml]  .preview-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    background: var(--cyan-wash, #e8f7fb);
    border-right: 1px solid var(--canvas, #fff);
    overflow: hidden;
}

.period-times-stack[b-kneumkocml]  .preview-block:last-child {
    border-right: 0;
}

.period-times-stack[b-kneumkocml]  .preview-block--break {
    background: var(--amber-wash, #fef3e2);
}

.period-times-stack[b-kneumkocml]  .preview-block-label {
    font-size: var(--fs-xs, 11.5px);
    color: var(--ink-soft, #33415c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

.period-times-stack[b-kneumkocml]  .preview-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.period-times-stack[b-kneumkocml]  .legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--line, #e3eef2);
}

.period-times-stack[b-kneumkocml]  .legend-swatch--period {
    background: var(--cyan-wash, #e8f7fb);
}

.period-times-stack[b-kneumkocml]  .legend-swatch--break {
    background: var(--amber-wash, #fef3e2);
    margin-left: 8px;
}

.period-times-stack[b-kneumkocml]  .legend-note {
    margin-left: auto;
}

.period-times-stack[b-kneumkocml]  .preview-empty {
    padding: 12px;
    border: 1px dashed var(--line, #e3eef2);
    border-radius: var(--r-input, 10px);
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

@media (max-width: 768px), (pointer: coarse) {
    .period-times-stack[b-kneumkocml]  .row-actions .rz-button {
        width: 32px;
        height: 32px;
    }

    .period-times-stack[b-kneumkocml]  .seg-btn {
        padding: 6px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .period-times-stack[b-kneumkocml]  .shape-row,
    .period-times-stack[b-kneumkocml]  .seg-btn {
        transition: none;
    }
}