/* Shared color contract. Component CSS consumes these tokens in every workspace. */
:root {
  color-scheme:light;
  --oc-bg:#f2f5f2; --oc-surface:#ffffff; --oc-soft:#eaf0eb;
  --oc-ink:#17292b; --oc-muted:#4e6460; --oc-border:#c1cec7; --oc-input-border:#7b9188;
  --oc-accent:#d4ef78; --oc-on-accent:#17292b; --oc-green:#23694d;
  --oc-success:#23694d; --oc-success-bg:#e5f2e7;
  --oc-warning:#795016; --oc-warning-bg:#fff2d5; --oc-amber:var(--oc-warning);
  --oc-danger:#a3303d; --oc-danger-bg:#fce9eb;
  --oc-info:#225f87; --oc-info-bg:#e6f0f8;
  --oc-focus:#447317; --oc-action-bg:#244e43;
  --oc-dark:#111e20; --oc-dark-soft:#1a2b2d; --oc-brand-bg:#18352f;
  --oc-on-brand:#f1f7f3; --oc-brand-muted:#b9cdc3;
  --oc-nav-bg:#e6eee8; --oc-nav-text:#304d43; --oc-nav-muted:#516b60;
  --oc-shadow:0 12px 32px #102c2410;
  --oc-line:var(--oc-border);
}
:root[data-theme=dark] {
  color-scheme:dark;
  --oc-bg:#10191c; --oc-surface:#19282c; --oc-soft:#22353a;
  --oc-ink:#e8f1ed; --oc-muted:#afc3be; --oc-border:#40595d; --oc-input-border:#6e898c;
  --oc-accent:#c4e879; --oc-on-accent:#17292b; --oc-green:#8cdbb5;
  --oc-success:#8cdbb5; --oc-success-bg:#203d32;
  --oc-warning:#f1cd86; --oc-warning-bg:#3b3020;
  --oc-danger:#ffafb7; --oc-danger-bg:#41272e;
  --oc-info:#9dcef3; --oc-info-bg:#203748;
  --oc-focus:#c4e879; --oc-action-bg:#285848;
  --oc-brand-bg:#122823; --oc-nav-bg:#121f23; --oc-nav-text:#d0e0da; --oc-nav-muted:#a3beb4;
  --oc-shadow:0 12px 32px #0004;
}
/* System appearance also works when JavaScript is disabled or unavailable. */
@media(prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    color-scheme:dark;
    --oc-bg:#10191c; --oc-surface:#19282c; --oc-soft:#22353a;
    --oc-ink:#e8f1ed; --oc-muted:#afc3be; --oc-border:#40595d; --oc-input-border:#6e898c;
    --oc-accent:#c4e879; --oc-on-accent:#17292b; --oc-green:#8cdbb5;
    --oc-success:#8cdbb5; --oc-success-bg:#203d32;
    --oc-warning:#f1cd86; --oc-warning-bg:#3b3020;
    --oc-danger:#ffafb7; --oc-danger-bg:#41272e;
    --oc-info:#9dcef3; --oc-info-bg:#203748;
    --oc-focus:#c4e879; --oc-action-bg:#285848;
    --oc-brand-bg:#122823; --oc-nav-bg:#121f23; --oc-nav-text:#d0e0da; --oc-nav-muted:#a3beb4;
    --oc-shadow:0 12px 32px #0004;
  }
}
html{background:var(--oc-bg)}
.oc-legal-page{padding-block:24px 48px}
.oc-legal-page .card-body{overflow-wrap:anywhere}
.oc-public{background:var(--oc-bg);color:var(--oc-ink)}
.oc-public p,.oc-public .oc-eyebrow,.oc-hero-tags,.oc-mail-content>.oc-mail-privacy{color:var(--oc-muted)}
.oc .oc-check-list li{color:var(--oc-ink)}
.oc .oc-health :is(p,small){color:var(--oc-brand-muted)}
.oc-public a:hover{color:var(--oc-green)}
.oc .oc-mail-address{color:var(--oc-green)}
.oc .oc-service-card:not(.oc-service-mail),.oc-orbit-tile{color:var(--oc-on-brand)}
.oc .oc-service-card:not(.oc-service-mail) :is(p,.oc-eyebrow,.oc-service-number){color:var(--oc-brand-muted)}
.oc .oc-service-mail,.oc .oc-mail-workspace .oc-panel{color:var(--oc-ink)}
.oc .oc-mail-workspace .oc-panel p{color:var(--oc-muted)}
.oc .oc-sidebar{background:var(--oc-nav-bg);color:var(--oc-nav-text);border-inline-end:1px solid var(--oc-border)}
.oc .oc-sidebar .oc-brand,.oc .oc-sidebar .oc-nav-link{color:var(--oc-nav-text)}
.oc .oc-workspace-label,.oc .oc-sidebar .oc-nav-link>span,.oc .oc-mail-promo small{color:var(--oc-nav-muted)}
.oc .oc-sidebar .oc-nav-link:hover,.oc .oc-mail-promo:hover{background:var(--oc-soft);color:var(--oc-ink)}
.oc .oc-sidebar .oc-nav-link.is-active,.oc .oc-sidebar .oc-nav-link.is-active>span{background:var(--oc-accent);color:var(--oc-on-accent)}
.oc .oc-mail-promo>span:first-child{color:var(--oc-green)}
.oc .oc-brand-dot{color:var(--oc-green)}
.oc :is(button,.btn){color:var(--oc-on-brand)}
.oc :is(button,.btn,.oc-button){transition-property:transform,box-shadow}
.oc .oc-button{color:var(--oc-on-accent)}
.oc .oc-button:hover{color:var(--oc-on-accent);background:var(--oc-accent)}
.oc :is(.oc-button-light,.oc-button-secondary,.oc-icon-button){background:var(--oc-surface);color:var(--oc-ink);border-color:var(--oc-border)}
.oc :is(.oc-button-light,.oc-button-secondary,.oc-icon-button):hover{background:var(--oc-soft);color:var(--oc-ink)}
.oc .oc-server-card .oc-button{color:var(--oc-ink)}
.oc :is(.btn-danger,.oc-danger-zone button){background:#943646!important;color:var(--oc-on-brand)!important}
.oc .oc-section-nav a[aria-current=page],.oc .oc-mail-nav>a[aria-current=page]{background:var(--oc-action-bg);color:var(--oc-on-brand)}
.oc .oc-section-nav a:hover{background:var(--oc-soft);color:var(--oc-ink)}
.oc .oc-mail-folders a[aria-current=page]{background:var(--oc-success-bg);color:var(--oc-success)}
.oc :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea){border-color:var(--oc-input-border)}
.oc :is(input,textarea)::placeholder{color:var(--oc-muted);opacity:1}
.oc input[role=switch]{background:var(--oc-input-border)}
.oc input[role=switch]:checked{background:var(--oc-green)}
.oc input[role=switch]::after{background:var(--oc-on-brand)}
.oc :is(a,button,input,select,textarea,summary):focus-visible{outline-color:var(--oc-focus)}
.oc ::selection{background:var(--oc-accent);color:var(--oc-on-accent)}
.oc .oc-notice :is(p,small,code),.oc .oc-notice-success p,.oc .oc-notice-error p{color:inherit}
.oc .oc-theme-picker{display:inline-flex;align-items:center;gap:2px;margin:0;padding:3px;flex:0 0 auto;isolation:isolate;border:1px solid var(--oc-input-border);border-radius:14px;background:var(--oc-surface);color:var(--oc-muted)}
.oc .oc-theme-picker button{display:grid;place-items:center;width:44px;min-width:44px;height:44px;margin:0;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--oc-muted);cursor:pointer;box-shadow:none}
.oc .oc-theme-picker button:hover{background:var(--oc-soft);color:var(--oc-ink)}
.oc .oc-theme-picker button[aria-pressed=true]{background:var(--oc-accent);color:var(--oc-on-accent);border-color:var(--oc-on-accent)}
.oc .oc-theme-picker button:focus-visible{outline:3px solid var(--oc-focus);outline-offset:3px;position:relative;z-index:1}
.oc .oc-theme-picker svg{display:block;pointer-events:none;flex:none}
.oc-public-header{flex-wrap:wrap;gap:16px}
.oc-public-header nav{flex-wrap:wrap;gap:22px}
.oc .oc-topbar-actions{flex-wrap:wrap;gap:12px;justify-content:flex-end}
/* Existing native/Bootstrap and plugin surfaces share the same color contract. */
html .oc :is(.card,.modal-content,.dropdown-menu,.list-group-item,.popover,.note-editor,.note-editable,.note-toolbar,.select2-dropdown,.select2-selection,.swal2-popup,.bootstrap-datetimepicker-widget){background:var(--oc-surface);color:var(--oc-ink);border-color:var(--oc-border)}
html .oc :is(.card-header,.modal-header,.modal-footer,.note-statusbar,.input-group-text,.page-link,.select2-search__field){background:var(--oc-soft);color:var(--oc-ink);border-color:var(--oc-border)}
html .oc :is(.text-muted,.text-secondary,.select2-selection__placeholder){color:var(--oc-muted)!important}
html .oc :is(.text-dark,.text-body,.select2-selection__rendered,.dropdown-item,.swal2-title,.swal2-html-container){color:var(--oc-ink)!important}
html .oc :is(.bg-white,.bg-light){background:var(--oc-surface)!important;color:var(--oc-ink)}
html .oc :is(.text-danger,.invalid-feedback){color:var(--oc-danger)!important}
html .oc .text-success{color:var(--oc-success)!important}
html .oc .text-warning{color:var(--oc-warning)!important}
html .oc .text-info{color:var(--oc-info)!important}
html .oc :is(.table-striped tbody tr:nth-of-type(odd),.dropdown-item:hover,.list-group-item-action:hover){background:var(--oc-soft);color:var(--oc-ink)}
html .oc :is(.select2-results__option--highlighted,.page-item.active .page-link){background:var(--oc-action-bg)!important;color:var(--oc-on-brand)!important}
html .oc :is(.select2-selection__choice,.alert-info){background:var(--oc-info-bg);color:var(--oc-info);border-color:var(--oc-border)}
html .oc .sh-mod-information,html .oc .sh-mod-information h2{color:var(--oc-ink)}
html .oc .sh-mod-information :is(.sh-mod-brief,.sh-mod-muted,.sh-mod-component-kind,.sh-mod-limits){color:var(--oc-muted)}
html .oc .sh-mod-information .sh-mod-link{color:var(--oc-info)}
html .oc .sh-mod-information :is(.sh-mod-state,.sh-mod-beta){color:var(--oc-warning);background:var(--oc-warning-bg)}
html .oc .sh-mod-information[data-mod-state=verified] .sh-mod-state{color:var(--oc-success);background:var(--oc-success-bg)}
/* TinyMCE UI; editable iframe colors are synchronized by settings.js. */
html .oc .tox :is(.tox-editor-header,.tox-toolbar,.tox-toolbar__primary,.tox-toolbar-overlord,.tox-menubar,.tox-statusbar,.tox-edit-area,.tox-edit-area__iframe,.tox-tbtn,.tox-mbtn){background:var(--oc-surface)!important;color:var(--oc-ink)!important}
html .oc .tox :is(.tox-statusbar a,.tox-statusbar__path-item,.tox-statusbar__wordcount){color:var(--oc-muted)!important}
html .oc .tox .tox-tbtn svg{fill:var(--oc-ink)!important}
html .oc .tox :is(.tox-tbtn:hover,.tox-tbtn--enabled){background:var(--oc-soft)!important}
html .oc .tox :is(.tox-menu,.tox-collection__item,.tox-dialog,.tox-dialog__header,.tox-dialog__footer,.tox-textfield,.tox-textarea,.tox-listboxfield .tox-listbox--select){background:var(--oc-surface)!important;color:var(--oc-ink)!important;border-color:var(--oc-border)!important}
@media(max-width:1050px){.oc-public-header .oc-theme-picker{margin-inline-start:auto}.oc-public-header nav{order:3;width:100%;justify-content:space-between}.oc-topbar{flex-wrap:wrap}.oc-topbar-actions{margin-inline-start:auto}}
@media(max-width:580px){.oc-public-header{padding-inline:18px}.oc-public-header nav{gap:10px}}
@media(forced-colors:active){.oc .oc-theme-picker{border-color:ButtonText}.oc .oc-theme-picker button[aria-pressed=true]{border:2px solid Highlight;color:Highlight}}
@media print{.oc-theme-picker{display:none!important}:root{--oc-bg:#fff;--oc-surface:#fff;--oc-soft:#fff;--oc-ink:#000;--oc-muted:#333;--oc-border:#777;color-scheme:light}}

/* Keep the existing floating orbit; the mascot has separately animated pupils. */
.oc .oc-brand-logo{display:block;width:180px;flex:none}
.oc .oc-brand-logo svg{display:block;width:100%;height:auto}
.oc .oc-brand-logo .oc-brand-logo-dark{display:none}
:root[data-theme=dark] .oc .oc-brand-logo-light{display:none}
:root[data-theme=dark] .oc .oc-brand-logo-dark{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .oc .oc-brand-logo-light{display:none}:root:not([data-theme=light]) .oc .oc-brand-logo-dark{display:block}}
@media(max-width:580px){.oc .oc-brand-logo{width:155px}}
.oc .oc-orbit-mascot{background:transparent;border-color:transparent;box-shadow:none}
.oc .oc-penguin{width:270px;height:270px;max-width:none;overflow:visible;transform:rotate(17deg);filter:drop-shadow(0 18px 24px #0003)}
@media(max-width:580px){.oc .oc-orbit{margin-block:30px 10px}.oc .oc-orbit-label{top:-65px}.oc .tile-game{top:-35px}.oc .tile-mail{bottom:-30px}.oc .oc-orbit-coordinate{bottom:-65px}}