/* Compact reading rhythm; the Pixy interface keeps its own typography. */
@media screen {
html[data-theme] body :is(#taskCards .taskText, .taskText, .solutionText, .theoryContent, .fipiCondition) {
    font-size: 16px !important;
    line-height: 1.65 !important;
    letter-spacing: normal;
}
html[data-theme] body :is(.taskText, .solutionText, .theoryContent) :is(p, li) { line-height: 1.65; margin-block: .55em; }
html[data-theme] body :is(.taskText, .solutionText, .theoryContent) [style*="font-size"]:not(.katex *) { font-size: inherit !important; }
html[data-theme] body .fipiFormula { display: inline; margin: 0; white-space: normal; }
html[data-theme] body .fipiFormula .katex { font-size: 1.05em; }
html[data-theme] body .fipiCondition p:empty { display: none; }
html[data-theme] body .theoryEditorial .theorySectionTitle { font-size: 20px; line-height: 1.45; }
html[data-theme] body :is(.learningHero, .profileHero) { padding-bottom: 26px; }
html[data-theme] body :is(.learningHero, .profileHero) h1 { font-size: clamp(24px, 3vw, 36px); margin-block: 14px; }
html[data-theme] body :is(.learningHero, .studyCalendar, .studyAnalysis, .profilePersonalPanel, .profileSettingCard) p {
    font-size: 13px; line-height: 1.7; max-width: 75ch;
}
html[data-theme] body .studyReadable { font-size: 14px; }
html[data-theme] body :is(.studyAnalysisCard, .profileSettingCard) { padding: clamp(18px, 2vw, 26px); }
html[data-theme] body :is(.studyAnalysisCard, .profileSettingCard) h3 { font-size: 16px; line-height: 1.5; }
/* A fixed overlay must sit above the navigation, without inheriting its layout. */
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) {
    position: fixed !important; inset: 0 !important; z-index: 100100 !important;
    width: 100% !important; height: 100dvh !important; margin: 0 !important;
    padding: 24px !important; box-sizing: border-box; overflow: auto !important;
    background: #170e20a6; backdrop-filter: blur(8px); transform: none !important;
}
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .taskModalBox {
    position: relative; width: min(100%, 1000px) !important; max-width: 1000px !important;
    max-height: none !important; margin: 0 auto !important; padding: 28px !important;
    box-sizing: border-box; overflow: visible; background: var(--note-paper); color: var(--text-main);
    border: 1px solid var(--note-ink); border-radius: 16px; box-shadow: 5px 6px 0 var(--note-shadow);
    transform: none !important;
}
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .closeModal {
    position: sticky; float: right; top: 0; z-index: 10; width: 42px; height: 42px;
    background: var(--workspace-action, #a32365); color: var(--workspace-action-text, #fff);
    border: 1px solid var(--note-ink); border-radius: 10px; font: 28px/1 system-ui;
}
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .modalGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) :is(.taskModalForm, .richEditorWrapper, .modalGrid > *) { min-width: 0; }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .richEditorWrapper { margin-block: 10px 18px; border: 1px solid var(--note-line); border-radius: 10px; overflow: hidden; }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .richToolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; background: var(--note-bar); }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .richToolbar :is(button, select) { font-size: 12px; padding: 7px 9px; min-height: 34px; max-width: 100%; }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .richEditable { min-height: 160px; max-height: 420px; overflow: auto; padding: 16px; font: 16px/1.65 system-ui; background: var(--note-paper); }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .richEditable img { max-width: 100%; }
/* Strong contrast in the light palette, including account actions. */
html[data-theme="light"] body :is(.profileSmallButton, .taskPrimaryButton, .profileSaveButton, .profileSettings button[type="submit"], .profileSettingCard button[type="submit"], .profilePersonalPanel button[type="submit"]) {
    background: #a32365 !important; color: #fff !important; border: 1px solid #85164f !important;
    box-shadow: 0 3px 0 #761244;
}
html[data-theme="light"] body :is(.profileSmallButton, .taskPrimaryButton):hover { background: #86154f !important; }
html[data-theme="light"] body button:disabled { opacity: .6; }
/* A pixel display that follows both the chosen palette and light/dark mode. */
html[data-theme] body .studyCalendar {
    --lcd-ink: var(--text-main); --lcd-bg: var(--note-bar); --lcd-line: var(--note-line);
    --lcd-block: color-mix(in srgb,var(--text-accent) 22%,var(--note-paper));
    --lcd-block-advanced: color-mix(in srgb,var(--text-accent) 12%,var(--note-paper));
    --lcd-block-done: color-mix(in srgb,var(--text-accent) 32%,var(--note-paper));
    background: var(--note-paper); padding: clamp(16px, 2vw, 26px);
}
html[data-theme] body .studyCalendarGrid {
    position: relative; border-radius: 4px; border: 6px solid var(--note-ink);
    outline: 1px solid var(--note-line); outline-offset: 2px;
    background: var(--lcd-bg); color: var(--lcd-ink);
    box-shadow: inset 3px 4px 0 color-mix(in srgb,var(--note-shadow) 40%,transparent),0 5px 0 var(--note-shadow); margin-block: 18px;
    background-image: radial-gradient(color-mix(in srgb,var(--lcd-ink) 7%,transparent) .7px,transparent .7px); background-size: 4px 4px;
}
html[data-theme] body .studyCalendarGrid :is(.studyDay,.studyWeekday) { border-color: var(--lcd-line); }
html[data-theme] body .studyCalendarGrid .studyWeekday { color: var(--text-accent); font-size: 12px; padding-block: 12px; background: color-mix(in srgb,var(--note-paper) 35%,transparent); }
html[data-theme] body .studyCalendarGrid .studyDay { min-height: 100px; padding: 6px; }
html[data-theme] body .studyCalendarGrid .studyDayOutside { background: var(--note-page); color: var(--journal-muted); }
html[data-theme] body .studyCalendarGrid time { font-size: 12px; border-radius: 2px; }
html[data-theme] body .studyCalendarGrid time[aria-current] { background: var(--workspace-action); color: var(--workspace-action-text); box-shadow: 2px 2px 0 var(--note-shadow); }
html[data-theme] body .studyCalendarGrid a.studyEvent {
    border-radius: 2px; background: var(--lcd-block); color: var(--text-main); border: 1px solid var(--text-accent);
    box-shadow: inset -2px -2px 0 color-mix(in srgb,var(--text-accent) 24%,transparent),inset 2px 2px 0 color-mix(in srgb,var(--note-paper) 55%,transparent);
    font-family: inherit; font-size: 10px; line-height: 1.5; padding: 5px;
}
html[data-theme] body .studyCalendarGrid a.studyEventAdvanced { background: var(--lcd-block-advanced); border-style: double; border-width: 3px; padding: 3px; }
html[data-theme] body .studyCalendarGrid a.studyEventDone { background: var(--lcd-block-done); }
html[data-theme] body .studyCalendarGrid a.studyEvent:hover { filter: brightness(1.08); outline: 2px solid var(--text-accent); }
html[data-theme] body .studyCalendarGrid .studyDropTarget { background: var(--lcd-block); outline: 2px dashed var(--text-accent); outline-offset: -4px; }
html[data-theme] body .studyCalendarLegend span { color: var(--text-main); background: var(--lcd-block); border: 1px solid var(--text-accent); border-radius: 2px; }
html[data-theme] body .studyCalendarLegend span:nth-child(2) { background: var(--lcd-block-advanced); border-style: double; }
html[data-theme] body .studyCalendarLegend span:nth-child(3) { background: var(--lcd-block-done); }
/* The focus light follows the insertion point, with a crisp beam instead of a blob. */
html[data-theme] body [data-caret-glow]:focus { background-image: none !important; caret-color: var(--text-accent); }
.caretBeam { position: fixed; z-index: 2147483646; pointer-events: none; width: 2px; border-radius: 2px; background: #ff7eb8; box-shadow: 0 0 5px #ff69b4, 0 0 13px #ff69b488; transition: left 65ms ease-out, top 65ms ease-out; }
.caretBeam::before { content: ''; position: absolute; inset: -7px -11px; background: radial-gradient(ellipse,#ff8dc050,transparent 72%); }
.caretBeam[hidden] { display: none; }
/* A proper silhouette, bright outline and a quiet nameplate. */
html[data-theme] body .feedbackMascot { width: 100px; gap: 0; }
html[data-theme] body .feedbackMascot img { width: 84px; height: 88px; image-rendering: pixelated; filter: drop-shadow(2px 0 0 #ffc1de) drop-shadow(-2px 0 0 #ffc1de) drop-shadow(0 3px 0 #532744) drop-shadow(0 8px 10px #ca448633); }
html[data-theme] body .feedbackMascot span { padding: 7px 9px; color: var(--text-main); background: var(--note-paper); border-color: var(--note-ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--note-shadow); font-size: 10px; }
@media(max-width:650px) {
    html[data-theme] body :is(#taskCards .taskText, .taskText, .solutionText, .theoryContent, .fipiCondition) { font-size: 15px !important; }
    html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) { padding: 10px !important; }
    html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .taskModalBox { padding: 16px !important; }
    html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .modalGrid { grid-template-columns: minmax(0,1fr); }
    html[data-theme] body .studyCalendarGrid .studyDay { min-height: 65px; padding: 2px; }
    html[data-theme] body .studyCalendarGrid .studyWeekday { font-size: 10px; }
    html[data-theme] body .studyCalendarGrid a.studyEvent { padding: 3px 1px; font-size: 8px; flex-wrap: wrap; }
    html[data-theme] body .feedbackMascot { width: 76px; }
    html[data-theme] body .feedbackMascot img { width: 64px; height: 66px; }
}
@media(prefers-reduced-motion:reduce) { .caretBeam { transition: none; } }
}
@media screen {
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) :is(.editorTableTools, .editorTableEdges) { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; font-size: 12px; background: var(--note-bar); }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .editorTableTools :is(button, input, select) { min-height: 32px; padding: 6px 8px; font-size: 11px; max-width: 100%; }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .editorTableTools label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
html[data-theme] body .studyCalendarStatus:empty, html[data-theme] body #studyCalendarStatus:empty { display: none; }
}
@media screen {
html[data-theme] body:has(:is(#taskAdding, #variantAdding, #theoryAdding)[style*="display: block"]) { overflow: hidden; }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .editorTableTools:not(:has(button:enabled)),
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .editorTableEdges[hidden] { display: none !important; }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .richToolbar :is(button, select) { font-size: 14px; }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .taskModalForm > label,
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .modalGrid label { font-size: 14px; }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .modalHeader h2 { font-size: 20px; }
html[data-theme] body :is(#taskAdding, #variantAdding, #theoryAdding) .modalHeader p { font-size: 12px; }
}
@media screen {
html[data-theme] body :is(#variantAdding,#theoryAdding) .taskModalBox { opacity: 1 !important; }
html[data-theme] body #variantAdding .taskModalForm > label { display: block; margin-block: 14px; }
html[data-theme] body #variantAdding :is(.taskSearchResultItem,.selectedTaskItem) { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--note-line); }
html[data-theme] body #variantAdding .selectedTaskSnippet { display: block; min-width: 0; width: 100%; max-height: none; margin-top: 12px; white-space: normal; overflow-wrap: break-word; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; }
html[data-theme] body #variantAdding :is(.addTaskBtn,.removeTaskBtn) { min-height: 40px; padding: 10px; border: 1px solid var(--note-ink); border-radius: 8px; background: var(--workspace-action); color: var(--workspace-action-text); font: inherit; font-size: 12px; }
html[data-theme] body #variantAdding .selectedTaskSnippet img { max-width: 100%; max-height: 160px; display: block; margin: 12px auto; }
html[data-theme] body #variantAdding .taskSearchResults { max-height: min(420px,55dvh); overflow: auto; padding-inline: 4px; }
html[data-theme] body #variantAdding .selectedTasksList { max-height: none; overflow: visible; }
@media(max-width:650px) {
html[data-theme] body #variantAdding :is(.taskSearchResultItem,.selectedTaskItem) { grid-template-columns: minmax(0,1fr); }
html[data-theme] body #variantAdding :is(.addTaskBtn,.removeTaskBtn) { justify-self: start; }
}
}

@media screen {
html[data-theme] body #variantAdding .selectedTaskSnippet { opacity: 1; max-width: 100%; }
}