/* ESNO Signal blue / Kontor navigation, scoped to mail and calendar modules. */
.esno-module {--esno-page:#f8fafc;--esno-quiet:#e5edf4;--esno-brand:#006ca3;--esno-tint:#cce0ee;--esno-line:#acc2d1;--esno-text:#183549;--esno-sub:#516c7d;--esno-button-text:#fff;color:var(--esno-text);background:var(--esno-page);font:400 14px/1.5 'Helvetica Neue',Arial,sans-serif;min-width:0}
[data-theme="dark"] .esno-module {--esno-page:#202932;--esno-quiet:#2c3945;--esno-brand:#9acdec;--esno-tint:#344f64;--esno-line:#526c80;--esno-text:#e0edf7;--esno-sub:#abc3d5;--esno-button-text:#132d3c}
.esno-module *, .esno-module *::before,.esno-module *::after {box-sizing:border-box;min-width:0}
.esno-module .esno-module-header {padding:24px 26px 22px;background:var(--esno-quiet);border-bottom:6px solid var(--esno-brand);width:100%;grid-column:1/-1}
.esno-module .esno-brand-lockup {display:flex;flex-direction:column;align-items:flex-start;gap:0}
.esno-module .esno-brand-lockup img {width:168px;height:auto;background:transparent;border:0;box-shadow:none;border-radius:0}
.esno-module .esno-wordmark {margin-top:-6px;font:700 22px/1 'Helvetica Neue',Arial,sans-serif;letter-spacing:.015em}
.esno-web {color:#0074b6}.esno-mail {color:#ffd503}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) h2 {font:500 32px/1.15 'Helvetica Neue',Arial,sans-serif;letter-spacing:-.9px;color:var(--esno-text)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) h3 {font:500 19px/1.25 'Helvetica Neue',Arial,sans-serif;color:var(--esno-text)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) label {font:500 12px/1.5 'Helvetica Neue',Arial,sans-serif;color:var(--esno-sub);gap:8px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) input:not([type=checkbox]):not([type=radio]),.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) select,.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) textarea {font:400 14px/1.5 'Helvetica Neue',Arial,sans-serif;background:var(--esno-page);color:var(--esno-text);border:1px solid var(--esno-line);border-radius:3px;padding:12px;width:100%;box-shadow:none}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) textarea {resize:vertical}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) button {font:400 14px/1.5 'Helvetica Neue',Arial,sans-serif;border-radius:0;min-height:44px;padding:10px 14px;box-shadow:none;color:var(--esno-text);background:transparent;border:1px solid var(--esno-line)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) button.primary {background:var(--esno-brand);color:var(--esno-button-text);font-weight:500;border-color:var(--esno-brand)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) button:focus-visible,.esno-module input:focus-visible,.esno-module select:focus-visible {outline:2px solid var(--esno-brand);outline-offset:2px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .panel,.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-main,.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-list-panel,.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-detail-panel,.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-compose-panel {background:var(--esno-page);border-color:var(--esno-line);border-radius:0;box-shadow:none}
.app-shell .email-workspace.esno-module {display:grid;grid-template-columns:190px minmax(0,1fr);gap:0;border:1px solid var(--esno-line);border-radius:0;overflow:hidden}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-rail {background:var(--esno-quiet);border:0;border-right:1px solid var(--esno-line);border-radius:0;padding:22px 14px;box-shadow:none}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-toolbar {background:var(--esno-quiet);border-bottom:1px solid var(--esno-line);padding:18px 20px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-folder-button.active {background:var(--esno-tint);border-left:4px solid var(--esno-brand)}
.app-shell .email-settings-dialog.esno-module {width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;scrollbar-gutter:stable;border-radius:0;padding:0;box-shadow:none;border:1px solid var(--esno-line)}
.app-shell .email-settings-dialog.esno-module > .modal-head {background:var(--esno-quiet);padding:0 26px 24px;align-items:flex-start;border-bottom:1px solid var(--esno-line)}
.email-settings-dialog .modal-head > div {flex:1}
.email-settings-dialog .modal-head .esno-module-header {padding-left:0;padding-right:0;margin-bottom:24px}
.email-settings-dialog .modal-head > button {margin-top:24px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-settings-grid {display:grid;grid-template-columns:165px minmax(0,1fr);gap:0;padding:0;align-items:stretch}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-settings-nav {grid-column:1;grid-row:1;background:var(--esno-quiet);padding:22px 0;border-right:1px solid var(--esno-line)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-settings-nav button {display:block;text-align:left;width:100%;padding:12px 18px;border:0;color:var(--esno-sub)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-settings-nav button.active {padding-left:14px;border-left:4px solid var(--esno-brand);background:var(--esno-page);color:var(--esno-brand)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-settings-panel {grid-column:2;grid-row:1;padding:26px;border:0;border-radius:0;background:var(--esno-page)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-settings-panel.esno-panel-inactive {display:none!important}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-settings-panel-head {margin-bottom:28px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-asset-form {gap:20px;margin-top:22px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .rich-editor,.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .rich-toolbar {border-radius:0;border-color:var(--esno-line);background:var(--esno-page);color:var(--esno-text);box-shadow:none}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .rich-toolbar {display:flex;flex-wrap:wrap;gap:6px;background:var(--esno-quiet)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .rich-content {min-height:155px;padding:14px;font:400 14px/1.5 'Helvetica Neue',Arial,sans-serif;color:var(--esno-text)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-asset-list {display:grid;gap:0}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-asset-card {border-radius:0;box-shadow:none;border:0;border-top:2px solid var(--esno-text);border-bottom:1px solid var(--esno-line);padding:18px 0;background:transparent;overflow-wrap:anywhere}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-panel {padding:26px}
.app-shell .calendar-dialog.esno-module {width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;scrollbar-gutter:stable;border-radius:0;padding:0;box-shadow:none}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-modal-head {padding:0 26px 24px;background:var(--esno-quiet);border-bottom:1px solid var(--esno-line)}
.calendar-modal-head .esno-module-header {padding-left:0;padding-right:0;margin-bottom:24px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-scheduler {display:flex;flex-direction:column}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-activity-form {padding:26px;gap:20px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-activity-buttons {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-activity-type-button {display:flex;align-items:center;gap:10px;text-align:left}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-activity-type-button strong {display:block;font-weight:400}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-activity-type-button.active {background:var(--esno-tint);border-color:var(--esno-brand)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-field-row {display:flex;flex-wrap:wrap;gap:20px;align-items:end}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-field-row > label {flex:1 1 150px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-time-separator {display:none}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-title-input {font-size:20px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-day-preview {border:0;border-top:1px solid var(--esno-line);background:var(--esno-quiet);min-height:0;padding:20px 26px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-preview-list {max-height:220px;overflow:auto}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-modal-actions,.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-asset-form .action-row {background:var(--esno-quiet);border-top:1px solid var(--esno-line);padding:18px 20px;display:flex;gap:10px;flex-wrap:wrap;position:static}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-day {border-radius:0;background:var(--esno-page);color:var(--esno-text);padding:8px;min-height:120px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-holiday {display:block;padding:4px 6px;background:var(--esno-tint);color:var(--esno-text);border-left:3px solid var(--esno-brand);font:500 11px/1.4 'Helvetica Neue',Arial,sans-serif;white-space:normal;overflow-wrap:anywhere}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-day.today,.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-day.selected {border-color:var(--esno-brand);background:var(--esno-tint)}
@media(max-width:600px){
.app-shell .email-workspace.esno-module {grid-template-columns:minmax(0,1fr)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-rail {border-right:0;border-bottom:1px solid var(--esno-line)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-module-header {padding:24px 20px 22px}
.esno-module .esno-brand-lockup img {width:144px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-settings-grid {grid-template-columns:minmax(0,1fr)}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-settings-nav {grid-row:1;display:flex;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--esno-line);padding:8px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-settings-nav button {width:auto;flex:1 1 120px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .email-settings-panel {grid-column:1;grid-row:2;padding:20px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-activity-form {padding:20px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-panel {padding:12px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-day {padding:4px;min-height:95px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-holiday {font-size:10px;padding:2px}
}
@media(max-width:380px){
.esno-module .esno-brand-lockup img {width:132px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) h2 {font-size:28px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) input:not([type=checkbox]),.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) select,.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) textarea {font-size:16px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-field-row {flex-direction:column;gap:18px;align-items:stretch}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-field-row > label {flex:0 0 auto}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-title-input {font-size:17px}
}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-scheduler {display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 28px;padding:26px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-calendar-date {grid-column:1;grid-row:1;align-self:start;background:var(--esno-tint);padding:18px 12px;display:flex;flex-direction:column;gap:10px}
.esno-calendar-date strong {font-size:52px;font-weight:600;letter-spacing:-2px;line-height:1}
.esno-calendar-date span {font-size:12px;overflow-wrap:anywhere}
.esno-calendar-date #esnoCalendarTime {font-size:15px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-activity-form {grid-column:2;grid-row:1;padding:0}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-day-preview {grid-column:1/-1;margin-top:26px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-calendar-notes {border-top:1px solid var(--esno-line);border-bottom:1px solid var(--esno-line);padding:14px 0}
.esno-calendar-notes summary {cursor:pointer;min-height:30px;color:var(--esno-brand)}
.esno-calendar-notes[open] label {margin-top:18px}
.esno-team-members {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-top:1px solid var(--esno-line);padding-top:12px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-team-members label {display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-team-members input {width:auto}
@media(max-width:600px){
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-scheduler {grid-template-columns:minmax(0,1fr);padding:20px;gap:20px}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .esno-calendar-date {grid-column:1;grid-row:1;flex-direction:row;align-items:center}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-activity-form {grid-column:1;grid-row:2}
.app-shell :is(.esno-module, #calendarEventModal .esno-module, #emailSettingsModal .esno-module, #view-calendar) .calendar-day-preview {margin-top:0;padding:16px}
}
@media(max-width:380px){.esno-team-members {grid-template-columns:minmax(0,1fr)}}
.app-shell #calendarEventModal .calendar-dialog.esno-module {display:block;height:auto;max-height:calc(100dvh - 32px);overflow:auto;width:min(1040px,calc(100vw - 32px));border-radius:0;background:var(--esno-page);box-shadow:none}
.app-shell #calendarEventModal .calendar-scheduler {height:auto;max-height:none;overflow:visible;background:var(--esno-page);grid-template-columns:110px minmax(0,1fr)}
.app-shell #calendarEventModal .calendar-activity-form {overflow:visible;max-height:none;border:0;background:var(--esno-page);padding:0}
.app-shell #calendarEventModal .calendar-modal-head {display:flex;background:var(--esno-quiet);padding:0 26px 24px}
.app-shell #calendarEventModal .calendar-modal-head > div {flex:1}
.app-shell #calendarEventModal .calendar-modal-head > button {margin-top:24px}
.app-shell #calendarEventModal .modal-eyebrow,.app-shell #calendarEventModal .calendar-linked-line {display:none}
.app-shell #calendarEventModal .calendar-day-preview {display:block;overflow:visible}
.app-shell #calendarEventModal .calendar-activity-type-button {white-space:normal;overflow-wrap:anywhere}
@media(max-width:600px){.app-shell #calendarEventModal .calendar-scheduler {grid-template-columns:minmax(0,1fr)}.app-shell #calendarEventModal .calendar-dialog.esno-module {width:calc(100vw - 16px)}.app-shell #calendarEventModal .calendar-modal-head {padding:0 20px 20px}}
.app-shell #calendarEventModal .calendar-title-input {font:400 20px/1.5 'Helvetica Neue',Arial,sans-serif}
@media(max-width:600px){
.app-shell #calendarEventModal .calendar-modal-head,.app-shell #emailSettingsModal .modal-head {display:block;position:relative}
.app-shell #calendarEventModal .calendar-modal-head > button,.app-shell #emailSettingsModal .modal-head > button {position:absolute;right:20px;top:24px;margin:0;padding:10px}
.app-shell #calendarEventModal .calendar-modal-head > div,.app-shell #emailSettingsModal .modal-head > div {width:100%}
.app-shell #calendarEventModal .calendar-activity-type-button {font-size:12px;padding:8px;gap:6px;text-align:left;justify-content:flex-start}
}
@media(max-width:380px){.app-shell #calendarEventModal .calendar-title-input {font-size:17px}}
@media(max-width:600px){
.app-shell #calendarEventModal .calendar-modal-head > button,.app-shell #emailSettingsModal .modal-head > button {width:auto;min-width:0;max-width:94px;left:auto;flex:none}
.app-shell #calendarEventModal .calendar-activity-type-button {overflow-wrap:normal;word-break:normal;font-size:12px}
}
.app-shell .esno-module .email-asset-row {border-radius:0;box-shadow:none;border:0;border-top:2px solid var(--esno-text);border-bottom:1px solid var(--esno-line);padding:18px 0;background:transparent;overflow-wrap:anywhere}
.esno-module .email-asset-row strong {font-weight:500}
.esno-module #emailSettingsAccountList .email-asset-row > div > span {font-size:19px;font-weight:400}
.app-shell #emailAccountModal .email-account-dialog.esno-module {border-radius:0;box-shadow:none;max-height:calc(100dvh - 32px);overflow:auto;padding:0;background:var(--esno-page)}
.app-shell #emailAccountModal .email-account-dialog > .modal-head,.app-shell #emailAccountModal form {padding:26px;background:var(--esno-page)}
.esno-module .email-asset-row details {font-size:12px;font-weight:400;color:var(--esno-sub)}
.app-shell :is(#emailSettingsModal,#emailAccountModal,#calendarEventModal) .esno-module,.app-shell #view-email .esno-module,.app-shell #view-calendar.esno-module {background:var(--esno-page);color:var(--esno-text);font:400 14px/1.5 'Helvetica Neue',Arial,sans-serif}
/* Cancel inherited Workspace dialog insets; each module owns its spacing. */
.app-shell :is(#emailSettingsModal,#emailAccountModal,#calendarEventModal) .esno-module {padding:0;border-radius:0;box-shadow:none}
.app-shell :is(#emailSettingsModal,#emailAccountModal,#calendarEventModal) .esno-module > .modal-head {margin:0;width:100%;max-width:100%;background:var(--esno-quiet)}
/* One shared header and independent scroll areas for mail and calendar. */
.app-shell.module-focus {height:100dvh;min-height:0;overflow:hidden}
.app-shell.module-focus .workspace {padding:0;min-width:0;min-height:0;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:0;overflow:hidden}
.app-shell.module-focus .topbar {margin:0;padding:16px 24px;min-height:108px;gap:24px;background:var(--panel);border-bottom:4px solid #006ca3;align-items:center}
.app-shell .module-topbar-brand {display:flex;align-items:center;gap:20px;flex-shrink:0}
.app-shell .module-topbar-brand.hidden {display:none}
.app-shell .module-topbar-brand .esno-brand-lockup {display:flex;flex-direction:column;align-items:flex-start;gap:0}
.app-shell .module-topbar-brand img {width:168px;height:auto;display:block}
.app-shell .module-topbar-brand .esno-wordmark {margin-top:-5px;font:700 22px/1 Arial,sans-serif;letter-spacing:.015em}
.app-shell.module-focus .topbar-actions {gap:10px;flex-wrap:wrap;justify-content:flex-end}
.app-shell.module-focus .topbar-actions :is(button,select) {font:500 14px/1.4 Arial,sans-serif;min-height:42px;padding:10px 14px}
.app-shell.module-focus .topbar-actions .user-chip {padding:6px}
.app-shell.module-focus :is(#view-email,#view-calendar).active {margin:0;padding:0;min-height:0;overflow:hidden;height:100%}
.app-shell.module-focus #view-calendar > .esno-module-header,.app-shell.module-focus .email-workspace > .esno-module-header {display:none}
.app-shell.module-focus .email-workspace.esno-module {height:100%;min-height:0;grid-template-rows:minmax(0,1fr);border:0}
.app-shell.module-focus .email-rail {overflow:auto;min-height:0}
.app-shell.module-focus .email-main {min-width:0;min-height:0;height:100%;overflow:hidden}
.app-shell.module-focus .email-list-view {height:100%;display:flex;flex-direction:column;min-height:0}
.app-shell.module-focus .email-list-view.hidden {display:none}
.app-shell.module-focus .email-toolbar {flex:none;flex-wrap:wrap;gap:12px;padding:14px 18px}
.app-shell.module-focus .email-toolbar-right {flex-wrap:wrap;gap:8px}
.app-shell.module-focus .email-list {flex:1;min-height:0;overflow:auto}
.app-shell.module-focus :is(.email-detail-view,.email-compose-view) {height:100%;overflow:auto}
.app-shell .esno-module .email-folder {display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;padding:12px 10px}
.app-shell .esno-module .email-folder strong {font:500 14px/1.4 Arial,sans-serif;flex:1}
.app-shell .esno-module .email-folder em {font:400 12px/1 Arial,sans-serif}
.app-shell .esno-module .email-folder.active {background:var(--esno-tint);box-shadow:inset 3px 0 var(--esno-brand);color:var(--esno-brand)}
.app-shell .esno-module .app-icon {width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round}
.app-shell .esno-module :is(h2,h3,strong) {overflow-wrap:normal;word-break:normal}
.app-shell .esno-module h2 {font-weight:500;letter-spacing:-.025em}
.app-shell.module-focus #view-calendar.active {display:flex;flex-direction:column}
.app-shell.module-focus #view-calendar .calendar-panel {margin:0;border:0;min-height:0;overflow:auto;flex:1;padding:20px 24px}
.app-shell.module-focus #view-calendar .calendar-grid {min-width:630px}
.app-shell.module-focus #view-calendar .calendar-toolbar h2 {font-size:28px;line-height:1.2;margin:0}
.app-shell #leadFormBuilderModal {padding:0}
.app-shell #leadFormBuilderModal .lead-form-builder-dialog {width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none}
.app-shell #leadFormBuilderModal .lead-form-builder-workspace {grid-template-columns:minmax(230px,.85fr) minmax(0,1.6fr) minmax(280px,1fr)}
.app-shell #leadFormBuilderModal :is(.lead-builder-controls,.lead-field-canvas,.lead-form-preview-shell) {min-width:0;min-height:0;overflow:auto}
.app-shell #leadFormBuilderModal :is(.lead-form-builder-head,.lead-form-builder-actions) {padding:14px 20px}
.app-shell #leadFormBuilderModal .lead-builder-section-head {flex-wrap:wrap;gap:12px}
.app-shell #leadFormBuilderModal :is(input,select,textarea) {min-width:0;max-width:100%}
@media(min-width:981px){
.app-shell.module-focus.module-nav-compact {grid-template-columns:64px minmax(0,1fr)}
.app-shell.module-focus.module-nav-compact .sidebar {width:64px;padding:18px 8px;gap:10px}
.app-shell.module-nav-compact .brand {padding:0 0 12px;display:flex;justify-content:center}
.app-shell.module-nav-compact .brand-logo {width:44px;padding:0;border:0}
.app-shell.module-nav-compact :is(.brand-product,.brand-version,.tabs-section-label,.sidebar-meta,.tab-group-toggle > span,.tab > span,.tab-group-chevron) {display:none}
.app-shell.module-nav-compact .tab {width:44px;min-width:44px;padding:12px;justify-content:center;gap:0}
.app-shell.module-nav-compact .tab-group-tabs {padding:0;margin:0;border:0}
.app-shell.module-focus .sidebar {height:100dvh;min-height:0;overflow-y:auto}
}
@media(max-width:1100px){
.app-shell.module-focus .topbar {padding:12px 16px;gap:12px}
.app-shell.module-focus .email-workspace.esno-module {grid-template-columns:165px minmax(0,1fr)}
}
@media(max-width:980px){
.app-shell.module-focus {height:auto;min-height:100dvh;overflow:visible}
.app-shell.module-focus .workspace {height:calc(100dvh - 82px);min-height:400px}
.app-shell #moduleNavToggle {display:none}
.app-shell.module-focus .topbar {min-height:auto;flex-wrap:wrap}
.app-shell.module-focus .topbar-actions {flex:1}
.app-shell #leadFormBuilderModal .lead-form-builder-workspace {grid-template-columns:minmax(200px,.7fr) minmax(0,1fr);overflow:auto}
.app-shell #leadFormBuilderModal .lead-form-preview-shell {grid-column:1/-1}
}
@media(max-width:600px){
.app-shell.module-focus .module-topbar-brand img {width:132px}
.app-shell.module-focus .module-topbar-brand .esno-wordmark {font-size:18px;margin-top:-4px}
.app-shell.module-focus .topbar-actions {justify-content:flex-start}
.app-shell.module-focus .email-workspace.esno-module {grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
.app-shell.module-focus .email-rail {max-height:150px;padding:10px}
.app-shell.module-focus .email-folders {display:flex;flex-wrap:wrap}
.app-shell .esno-module .email-folder {width:auto;padding:8px}
.app-shell.module-focus #view-calendar .calendar-panel {padding:12px}
.app-shell #leadFormBuilderModal .lead-form-builder-workspace {display:block}
.app-shell #leadFormBuilderModal .lead-form-builder-head {flex-wrap:wrap}
.app-shell #leadFormBuilderModal .lead-form-builder-head h2 {font-size:24px}
}
@media(min-width:981px){.app-shell.module-focus .email-workspace.esno-module {grid-template-columns:210px minmax(0,1fr)}}
.app-shell #view-email .email-folder {border:0;border-radius:0;box-shadow:none;padding:10px 8px}
.app-shell #view-email .email-folder.active {box-shadow:inset 3px 0 var(--esno-brand)}
.app-shell #view-email .email-folder strong {overflow:visible;text-overflow:clip;white-space:nowrap;font-weight:500}
.app-shell #view-email .email-toolbar {display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center}
.app-shell #view-email #emailConversationCount {justify-self:end;font:500 13px/1.4 Arial,sans-serif}
.app-shell #view-email .email-toolbar-right {grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center}
.app-shell #view-email #emailSearch {flex:1 1 220px;width:auto;min-width:160px}
.app-shell #view-email .email-toolbar :is(button,.email-menu-button) {white-space:nowrap}
.app-shell #leadFormBuilderModal .lead-page-editor {grid-template-columns:26px minmax(0,1fr)}
.app-shell #leadFormBuilderModal .lead-page-editor-copy {grid-template-columns:repeat(2,minmax(0,1fr))}
.app-shell #leadFormBuilderModal .lead-page-editor .lead-field-editor-actions {grid-column:2;justify-self:end}
.app-shell #leadFormBuilderModal .lead-field-editor {grid-template-columns:26px minmax(0,1.5fr) repeat(2,minmax(0,1fr)) auto}
@media(max-width:600px){.app-shell #leadFormBuilderModal .lead-page-editor-copy {grid-template-columns:minmax(0,1fr)}}
.app-shell #view-email .email-subject {display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.app-shell #view-email .email-subject > strong {flex:0 1 auto;max-width:65%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.app-shell #view-email .email-subject > span {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.app-shell #view-email .email-sender {font-weight:500}
.app-shell #view-email .email-row.unread .email-sender {font-weight:600}
.app-shell #view-email :is(h2,h3) {font-family:'Helvetica Neue',Arial,sans-serif;font-weight:500;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:600px){.app-shell #view-email .email-subject {display:flex;flex-direction:column;align-items:stretch;gap:2px}.app-shell #view-email .email-subject > strong {max-width:100%}}

/* Shared, animated navigation rail on every Workspace page. */
.app-shell .sidebar-collapse-toggle {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:44px;margin-top:8px;padding:10px;border:0;border-radius:8px;background:var(--esno-nav);color:#ffd503;cursor:pointer}
.app-shell .sidebar-collapse-toggle:hover {background:var(--esno-nav-raised)}
.app-shell .sidebar-collapse-toggle:focus-visible {outline:2px solid #ffd503;outline-offset:-2px}
.app-shell .sidebar-collapse-toggle svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px #ffd50399);transition:transform 280ms cubic-bezier(.2,0,0,1)}
.app-shell.module-nav-compact .sidebar-collapse-toggle svg {transform:rotate(180deg)}
.app-shell.module-focus.module-mail .topbar {padding-left:14px}
.app-shell #view-email .email-templates-entry {margin-top:6px}
.app-shell .email-offer-preference {display:flex;align-items:center;gap:8px;margin:10px 0 0;font:400 13px/1.4 Arial,sans-serif}
.app-shell .email-offer-preference input {width:16px;height:16px;min-height:0;margin:0;accent-color:#0074b6}
.app-shell .email-template-fields {display:flex;flex-wrap:wrap;gap:8px;padding:14px;background:var(--esno-tint);border-left:3px solid var(--esno-brand)}
.app-shell .email-template-fields > span,.app-shell .email-template-fields > small {flex-basis:100%}
.app-shell .email-template-fields button {min-height:34px;padding:6px 10px;font-size:13px}
@media(min-width:981px){
.app-shell {--workspace-nav-width:264px;grid-template-columns:var(--workspace-nav-width) minmax(0,1fr);transition:grid-template-columns 280ms cubic-bezier(.2,0,0,1)}
.app-shell.module-nav-compact {--workspace-nav-width:64px;grid-template-columns:var(--workspace-nav-width) minmax(0,1fr)}
.app-shell .sidebar {position:sticky;top:0;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;transition:padding 280ms cubic-bezier(.2,0,0,1)}
.app-shell .sidebar .tabs {flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.app-shell .sidebar .brand {flex-shrink:0}
.app-shell.module-nav-compact .sidebar {padding:18px 8px;gap:10px}
.app-shell.module-nav-compact .brand {padding:0 0 12px;display:flex;justify-content:center}
.app-shell.module-nav-compact .brand-logo {width:44px;padding:0;border:0}
.app-shell.module-nav-compact :is(.brand-product,.brand-version,.tabs-section-label,.sidebar-meta,.tab > span,.tab-chevron) {display:none}
.app-shell.module-nav-compact .tab {width:44px;min-width:44px;padding:12px;justify-content:center;gap:0}
.app-shell.module-nav-compact .subtabs {padding:0;margin:0;border:0}
.app-shell.module-nav-compact .subtab:not(.hidden):not(:has(svg))::before {content:"•";color:#ffd503;font-size:20px}
}
@media(max-width:980px){.app-shell .sidebar-collapse-toggle {display:none}}
@media(max-width:600px){.app-shell.module-focus.module-mail .topbar {padding-left:10px}}
@media(prefers-reduced-motion:reduce){.app-shell,.app-shell .sidebar,.app-shell .sidebar-collapse-toggle svg {transition:none}}

.app-shell #emailOfferAttachment {grid-template-columns:42px minmax(0,1fr)}
.app-shell #emailOfferAttachment :is(strong,small) {display:block;line-height:1.45}
/* Mail typography tools own their sizing instead of inheriting full-width fields. */
.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar {display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px;background:var(--esno-quiet);border-bottom:1px solid var(--esno-line)}
.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar button {width:36px;min-width:36px;height:36px;min-height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:1px solid transparent;background:var(--esno-page)}
.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar button:hover,.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar button:focus-visible {border-color:var(--esno-brand);background:var(--esno-tint)}
.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar [data-command="bold"] {font-weight:700}
.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar [data-command="italic"] {font-style:italic}
.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar [data-command="underline"] {text-decoration:underline}
.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar select {width:140px;min-width:0;height:36px;min-height:36px;flex:0 0 auto;padding:5px 8px;font-size:13px}
.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar .rich-size-control {width:115px}
.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar .rich-color-control {display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;width:auto;height:36px;margin:0;padding:4px 8px;background:var(--esno-page);border:1px solid var(--esno-line);font-size:13px}
.app-shell :is(#view-email,#emailSettingsModal) .rich-toolbar .rich-color-control input[type="color"] {position:static;flex:0 0 28px;max-width:28px;appearance:auto;width:28px;height:26px;min-height:0;padding:0;border:0;opacity:1;cursor:pointer}
.app-shell :is(#view-email,#emailSettingsModal) .rich-content {min-height:240px;padding:18px;font:400 14px/1.6 Arial,sans-serif;color:var(--esno-text);background:var(--esno-page)}
/* An independent, scrollable employee day beside the activity form. */
.app-shell #calendarEventModal .calendar-dialog.esno-module {width:min(1440px,calc(100vw - 32px));max-width:calc(100vw - 32px)}
.app-shell #calendarEventModal .calendar-dialog.esno-module .calendar-scheduler {grid-template-columns:90px minmax(0,1fr) minmax(280px,340px);gap:20px;align-items:start}
.app-shell #calendarEventModal .calendar-dialog.esno-module .calendar-day-preview {display:block;grid-column:auto;margin-top:0;position:sticky;top:calc(var(--calendar-head-height,232px) + 12px);border:1px solid var(--esno-line);padding:12px;overflow:hidden}
.app-shell #calendarEventModal .calendar-preview-head {display:flex;align-items:center;gap:8px;padding:0 0 12px}
.app-shell #calendarEventModal .calendar-preview-head h3 {font-size:15px;margin:0}
.app-shell #calendarEventModal .calendar-preview-head span {font-size:12px}
.app-shell #calendarEventModal .calendar-preview-head button {width:32px;min-width:32px;min-height:32px;height:32px;padding:0}
.app-shell #calendarEventModal .calendar-dialog.esno-module .calendar-preview-list {height:420px;max-height:calc(100dvh - var(--calendar-head-height,232px) - 130px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.calendar-hour-timeline {height:1536px;position:relative}
.calendar-hour-row {height:64px;border-top:1px solid var(--esno-line);box-sizing:border-box}
.calendar-hour-row time {font-size:11px;color:var(--esno-sub);padding:0 4px;position:relative;top:-8px;background:var(--esno-quiet)}
.calendar-hour-events {position:absolute;inset:0 0 0 45px}
.calendar-hour-event {position:absolute;left:0;right:4px;padding:5px 8px;box-sizing:border-box;overflow:hidden;background:var(--esno-tint);border-left:3px solid var(--esno-brand);font-size:12px;line-height:1.35}
.calendar-hour-event strong,.calendar-hour-event span {display:block}
.calendar-hour-event.conflict {border-color:#bd3c35;background:#fff0ec;color:#78271f}
.calendar-collision {padding:10px;border-left:3px solid #bd3c35;background:#fff0ec;color:#78271f;font-size:12px}
@media(max-width:1000px){.app-shell #calendarEventModal .calendar-dialog.esno-module .calendar-scheduler {grid-template-columns:minmax(0,1fr) 280px}.app-shell #calendarEventModal .esno-calendar-date {display:none}}
@media(max-width:700px){.app-shell #calendarEventModal .calendar-dialog.esno-module .calendar-scheduler {grid-template-columns:minmax(0,1fr)}.app-shell #calendarEventModal .calendar-dialog.esno-module .calendar-day-preview {position:static}.app-shell #calendarEventModal .calendar-dialog.esno-module .calendar-preview-list {height:320px}}

.app-shell :is(#view-email,#emailSettingsModal) .checkbox-field {display:flex;align-items:center;gap:8px;flex-direction:row}
.app-shell :is(#view-email,#emailSettingsModal) .checkbox-field input[type="checkbox"] {width:16px;height:16px;min-height:0;margin:0;flex:0 0 auto}

.calendar-hour-event strong {font-size:11px;white-space:nowrap}
.calendar-hour-event span {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.app-shell :is(#view-email,#emailSettingsModal) .rich-color-control input::-webkit-color-swatch-wrapper {padding:2px}
.app-shell :is(#view-email,#emailSettingsModal) .rich-color-control input::-webkit-color-swatch {border:0;border-radius:2px}

/* Bound the actual calendar wrapper, not just its unbounded child panel. */
.app-shell.module-focus #view-calendar .calendar-layout {flex:1;min-height:0;overflow-y:auto;overflow-x:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.app-shell.module-focus #view-calendar .calendar-layout .calendar-panel {overflow:visible;min-height:100%;box-sizing:border-box}

/* Text actions must not inherit the fixed columns used by icon actions. */
.app-shell #emailSettingsModal #emailSettingsAccountList .email-asset-row {grid-template-columns:minmax(0,1fr) max-content;align-items:start;gap:16px;padding:18px 0}
.app-shell #emailSettingsModal .email-account-edit-button {width:auto;min-width:100px;height:auto;white-space:nowrap;word-break:normal;overflow-wrap:normal;padding:10px 14px}
.app-shell #emailSettingsModal .email-asset-row :is(strong,span,small) {white-space:normal;overflow:visible;overflow-wrap:anywhere}
.app-shell #emailSettingsModal .email-settings-dialog.esno-module > .modal-head {position:static;padding:18px 24px;min-height:0;gap:20px;align-items:center;backdrop-filter:none}
.app-shell #emailSettingsModal .modal-head > div {display:grid;grid-template-columns:180px minmax(0,1fr);column-gap:24px;align-items:center;min-width:0}
.app-shell #emailSettingsModal .modal-head .esno-module-header {grid-column:1;grid-row:1 / 3;margin:0;padding:0;border:0}
.app-shell #emailSettingsModal .modal-head h2 {grid-column:2;margin:0;font-size:24px;line-height:1.25}
.app-shell #emailSettingsModal .modal-head p {grid-column:2;margin:6px 0 0;font-size:13px}
.app-shell #emailSettingsModal .modal-head > button {margin:0;flex-shrink:0;white-space:nowrap}
.app-shell #emailSettingsModal .email-settings-panel-head {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.app-shell #emailSettingsModal .email-settings-panel-head h3 {margin:0}
@media(max-width:700px){
 .app-shell #emailSettingsModal .modal-head > div {grid-template-columns:minmax(0,1fr);gap:10px}
 .app-shell #emailSettingsModal .modal-head .esno-module-header {grid-row:auto}
 .app-shell #emailSettingsModal .modal-head :is(h2,p) {grid-column:1}
 .app-shell #emailSettingsModal #emailSettingsAccountList .email-asset-row {grid-template-columns:minmax(0,1fr)}
 .app-shell #emailSettingsModal .email-account-edit-button {justify-self:start}
}

/* Shared mail action icons: centered vector strokes and quiet hit targets. */
.app-shell :is(#view-email,#emailSettingsModal) button.icon-button[aria-label] {display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;line-height:1;color:var(--esno-sub);box-shadow:none;transition:background 150ms,color 150ms}
.app-shell :is(#view-email,#emailSettingsModal) button.icon-button[aria-label]:hover {background:var(--esno-tint);color:var(--esno-brand)}
.app-shell :is(#view-email,#emailSettingsModal) button.icon-button[aria-label]:focus-visible {outline:2px solid var(--esno-brand);outline-offset:2px}
.app-shell :is(#view-email,#emailSettingsModal) button.icon-button[aria-label] .app-icon {display:block;width:18px;height:18px;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round}
.app-shell :is(#view-email,#emailSettingsModal) button.icon-button[aria-label][aria-label$="löschen"]:hover,.app-shell #view-email .icon-button[data-email-account-delete]:hover {background:#fae9e7;color:#b5342e}
.app-shell #view-email .email-account {grid-template-columns:28px minmax(0,1fr);align-items:start;gap:8px;padding:12px 8px;border-radius:6px}
.app-shell #view-email .email-account-actions {grid-column:2;display:flex;justify-content:flex-end;gap:4px}
.app-shell #view-email .email-account > span:first-child {width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.app-shell #view-email .email-account-meta small {white-space:normal;overflow-wrap:anywhere;line-height:1.4;font-size:11px}
.app-shell #view-email .email-add-account {font-size:12px;padding:10px 8px;white-space:normal;line-height:1.4}
.app-shell #emailSettingsModal :is(#emailTemplateList,#emailSignatureList,#emailTeamInboxList) .email-asset-row {grid-template-columns:minmax(0,1fr) 34px 34px}

/* The same compact tools also serve article and package descriptions. */
.app-shell .rich-editor .rich-toolbar {display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px;background:var(--esno-quiet);border-bottom:1px solid var(--esno-line)}
.app-shell .rich-editor .rich-toolbar button {width:36px;min-width:36px;height:36px;min-height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:1px solid transparent;background:var(--esno-page)}
.app-shell .rich-editor .rich-toolbar button:hover,.app-shell .rich-editor .rich-toolbar button:focus-visible {border-color:var(--esno-brand);background:var(--esno-tint)}
.app-shell .rich-editor .rich-toolbar [data-command="bold"] {font-weight:700}
.app-shell .rich-editor .rich-toolbar [data-command="italic"] {font-style:italic}
.app-shell .rich-editor .rich-toolbar [data-command="underline"] {text-decoration:underline}
.app-shell .rich-editor .rich-toolbar select {width:140px;min-width:0;height:36px;min-height:36px;flex:0 0 auto;padding:5px 8px;font-size:13px}
.app-shell .rich-editor .rich-toolbar .rich-size-control {width:115px}
.app-shell .rich-editor .rich-toolbar .rich-color-control {display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;width:auto;height:36px;margin:0;padding:4px 8px;background:var(--esno-page);border:1px solid var(--esno-line);font-size:13px}
.app-shell .rich-editor .rich-toolbar .rich-color-control input[type="color"] {position:static;flex:0 0 28px;max-width:28px;appearance:auto;width:28px;height:26px;min-height:0;padding:0;border:0;opacity:1;cursor:pointer}

.app-shell .rich-editor .rich-color-control span {white-space:nowrap;overflow-wrap:normal}

.offline-workspace-bar {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;background:#edf5fa;border-bottom:1px solid #c9dce9;color:#274c64;font:400 12px/1.4 Arial,sans-serif;flex-shrink:0}
.offline-workspace-bar span {flex:1;min-width:180px}
.offline-workspace-bar button {font:inherit;border:1px solid #a9c6da;background:transparent;color:inherit;border-radius:6px;padding:6px 10px;min-height:32px;cursor:pointer}
.offline-workspace-bar button:disabled {opacity:.6;cursor:wait}
.offline-workspace-bar.has-error {background:#fff1db;color:#784d0c}
[data-theme="dark"] .offline-workspace-bar {background:#203847;color:#dcebf5;border-color:#3b596c}
.offline-workspace-bar button[hidden] {display:none}