/* Appearance utilities are independent of the intro's intentionally absent app header. */
.appearance-tools{display:flex;align-items:center;gap:4px;flex:0 0 auto;color:var(--ps-ink,#172c30)}
.appearance-tools>[data-theme-toggle],.appearance-tools .language-control{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--ps-ink,#172c30);cursor:pointer}
.appearance-tools svg{width:20px;height:20px;flex-shrink:0}
.appearance-tools [hidden]{display:none!important}
.appearance-tools .language-control{gap:2px;width:62px;padding:0 5px}
.appearance-tools [data-language-code]{font:650 10px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.appearance-tools .language-picker{position:relative;flex:0 0 auto}
.appearance-tools .language-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:80;display:grid;gap:4px;width:180px;max-width:calc(100vw - 24px);max-height:min(320px,calc(100dvh - 72px));overflow:auto;overscroll-behavior:contain;padding:8px;border:0;border-radius:20px;background:var(--ps-input,#f5f5f5);box-shadow:none;color:var(--ps-ink,#172c30)}
.appearance-tools .language-option{display:block;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:var(--ps-ink,#172c30);font:inherit;text-align:start;white-space:normal;cursor:pointer}
.appearance-tools .language-option:hover,.appearance-tools .language-option[aria-selected=true]{background:var(--ps-inset,#e9e9e9);color:var(--ps-ink,#172c30)}
.appearance-tools button:focus-visible{outline:3px solid var(--ps-action,#006b68);outline-offset:3px}
.appearance-tools>[data-theme-toggle]:hover,.appearance-tools .language-control:hover{background:transparent}
body:not(.login-mode) .intro-appearance{display:none}
body.login-mode .intro-appearance{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:25}
body.login-mode .intro-appearance>[data-theme-toggle],body.login-mode .intro-appearance .language-control{background:transparent}
/* Keep translated labels legible rather than clipping long Thai/Vietnamese text. */
html:not([lang=ko]) .tabs{flex-wrap:wrap;height:auto}
html:not([lang=ko]) .nav-item,html:not([lang=ko]) .dock-label{overflow-wrap:anywhere}
html:not([lang=ko]) .page-head{flex-wrap:wrap}
html:not([lang=ko]) .page-head h1,html:not([lang=ko]) .modal-head h2{overflow-wrap:anywhere}
@media(max-width:760px){
 body:not(.login-mode) header{gap:6px}
 body:not(.login-mode) header .head-tools{margin-left:auto;gap:4px}
 body:not(.login-mode) header .brand{min-width:0;flex:1 1 auto}
 body:not(.login-mode) header .brand b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body:not(.login-mode) header .brand img{width:32px;height:32px}
 body:not(.login-mode) header .head-tools>button[data-nav=notifications]{display:none}
 body:not(.login-mode) header .head-tools .appearance-tools{gap:2px}
 body:not(.login-mode) .app-dock .dock-label{white-space:normal;text-align:center;font-size:11px;line-height:1.25;max-width:72px}
 body:not(.login-mode) .app-dock .dock-item{min-height:68px}
 body:not(.login-mode) header:has(#pwa-controls:not([hidden])) [data-mobile-search]{display:none}
 body.login-mode .intro-appearance{right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top))}
}
@media print{.appearance-tools{display:none!important}}

/* Distinct luminance levels: canvas < sidebar < cards < controls.
   Brand mint never changes; its label colour is always the fixed --ps-on-mint. */
html[data-theme=dark]{
 --ps-canvas:#000000;--ps-sidebar:#121212;--ps-surface:#1c1c1c;--ps-input:#2b2b2b;--ps-inset:#161616;
 --ps-ink:#f5f5f5;--ps-muted:#c7c7c7;--ps-line:#5e5e5e;--ps-action:#69f4ee;
 --ps-mint:#00ede8;--ps-icon-mint:#00ede8;--ps-mint-hover:#35f7f1;--ps-mint-soft:#292929;--ps-mint-wash:#101010;--ps-mint-line:#555555;--ps-on-mint:#102b2c;
 --ps-disabled-bg:#292929;--ps-disabled-line:#555555;--ps-disabled-text:#bdbdbd;
 --ps-danger:#ffb7c4;--ps-danger-soft:#472630;--ps-danger-line:#9b586c;--ps-danger-ink:#ffc0cc;
 --text:var(--ps-ink);--surface:var(--ps-surface);--muted:var(--ps-muted);--line:var(--ps-line);
 color:var(--ps-ink);background:var(--ps-canvas);color-scheme:dark;
}
html[data-theme=dark] body{color:var(--ps-ink);background:var(--ps-canvas)}
html[data-theme=dark] button{background:var(--ps-surface);color:var(--ps-ink);border-color:var(--ps-line)}
html[data-theme=dark] :is(input,select,textarea){background:var(--ps-input);color:var(--ps-ink);border-color:var(--ps-line)}
html[data-theme=dark] :is(input,textarea)::placeholder{color:var(--ps-muted);opacity:1}
html[data-theme=dark] :is(label,small,.muted,.loading,.nav-label,.nav-icon,.empty,.compose-prompt,.source-note,.task-sub,.gantt-track span,.org-no-departments,.org-department small,.org-content-heading small,.org-content h2 span,.org-selection span,.org-profile-detail p,.biz-details dt){color:var(--ps-muted)}
html[data-theme=dark] :is(.empty b,.org-summary b,.message-author,.room-copy strong,.brand,.login-service-name){color:var(--ps-ink)}
html[data-theme=dark] :is(.tabs,.project-detail .tabs,.chat-layout,.bubble,.messenger-layout,.messenger-sidebar,.messenger-title,#messenger-detail,#messenger-search-form,#messenger-send,.messenger-main #messenger-send,.reply-preview,.form-actions,.comment-form,.chat-message-popover,.policy-matrix tbody th,.notification.read){background:var(--ps-surface);color:var(--ps-ink);border-color:var(--ps-line)}
html[data-theme=dark] :is(.messenger-main,.messenger-main[data-theme=lavender],.messenger-main[data-theme=white],.messages){background:var(--ps-canvas);color:var(--ps-ink)}
html[data-theme=dark] .messenger-main[data-theme=blue]{background:var(--ps-canvas)}
html[data-theme=dark] :is(.weekday,.blank,.chat-room-search,.chat-list-filters button,.chat-day-divider span,.chat-pinned,.progress,.file-icon){background:var(--ps-inset);color:var(--ps-muted)}
html[data-theme=dark] :is(.day.today,.biz-route li.current,.chat-list-filters button.active,.messenger-room.selected){background:var(--ps-mint-soft);color:var(--ps-ink)}
html[data-theme=dark] :is(.tabs button,.post-bottom button,.messenger-title small,.messenger-title nav button,.room-copy small,.room-trailing small,.chat-pinned span,.message-meta,.message-meta small,.chat-quote span,.chat-no-messages,.chat-no-messages b,.messenger-compose-tools span,.messenger-compose-tools button[type=button],#messenger-typing,.reply-preview small,.chat-people-picker legend,.chat-small-empty,.messenger-start,.messenger-list-title .chat-read-all){color:var(--ps-muted)}
html[data-theme=dark] :is(.tabs button.active,.notification em,.mention){color:var(--ps-action)}
html[data-theme=dark] :is(.message-bubble,.chat-file,.reaction,.chat-load-more,.message-hover-tools button){background:#303030;color:var(--ps-ink);border-color:var(--ps-line)}
html[data-theme=dark] .mine .message-bubble{background:var(--ps-mint-soft);color:var(--ps-ink)}
html[data-theme=dark] .reaction.mine{background:var(--ps-mint-soft);border-color:var(--ps-mint-line);color:var(--ps-action)}
html[data-theme=dark] .message-bubble.deleted{color:var(--ps-muted)}
html[data-theme=dark] .message-meta b{color:#f5ce89}
html[data-theme=dark] .chat-quote{background:transparent;color:var(--ps-ink)}
html[data-theme=dark] :is(.messenger-layout,.messenger-sidebar,#messenger-detail,.chat-people-picker,.messenger-main #messenger-text){border-color:var(--ps-line)}
html[data-theme=dark] .biz-badge{background:#383838;color:#ededed}
html[data-theme=dark] .biz-badge.good{background:#174536;color:#b6f5d8}
html[data-theme=dark] .biz-badge.bad{background:var(--ps-danger-soft);color:var(--ps-danger-ink)}
html[data-theme=dark] :is(.error,.permissions-page .error){background:var(--ps-danger-soft);color:var(--ps-danger-ink);border-color:var(--ps-danger-line)}
html[data-theme=dark] .app-dock{background:#1c1c1cf5;border-color:var(--ps-line);box-shadow:0 10px 35px #0006}

html[data-theme=dark] .app-dock .dock-label{background:var(--ps-input);color:var(--ps-ink)}
html[data-theme=dark] #toast{background:#303030;color:var(--ps-ink);border:1px solid var(--ps-line)}
html[data-theme=dark] kbd{border-color:var(--ps-line);color:var(--ps-muted)}
html[data-theme=dark] body.search-open header #search-form{background:var(--ps-input);border-color:var(--ps-line)}
html[data-theme=dark] .gantt-track{background:repeating-linear-gradient(to right,transparent 0,transparent calc(100% / 31 - 1px),var(--ps-line) calc(100% / 31 - 1px),var(--ps-line) calc(100% / 31))}
html[data-theme=dark] .status{color:#102b2c}
html[data-theme=dark] .status.s3{color:#fff}
html[data-theme=dark] :is(.room-trailing .unread,.day.today>b){background:var(--ps-mint);color:var(--ps-on-mint)}
html[data-theme=dark] :is(#pwa-update,#pwa-install-dialog #pwa-install){color:var(--ps-on-mint)}
html[data-theme=dark] body.login-mode,html[data-theme=dark] body.login-mode main,html[data-theme=dark] body.login-mode .login{background:var(--ps-canvas);color:var(--ps-ink)}
html[data-theme=dark] body.login-mode :is(.login-service-name,.login-instruction,.intro-security-label){color:var(--ps-ink)}
html[data-theme=dark] .intro-security-scan{background:var(--ps-mint-soft)}
html[data-theme=dark] .appearance-tools>[data-theme-toggle],html[data-theme=dark] .appearance-tools .language-control{background:transparent;color:var(--ps-ink);border-color:transparent}
@media(max-width:760px){html[data-theme=dark] .app-dock .dock-label{background:transparent}html[data-theme=dark] .biz-table td::before{color:var(--ps-muted)}}
/* Keep the organization stylesheet's legacy !important red out of dark mode. */
html[data-theme=dark] body:not(.login-mode) .org-danger{color:var(--ps-danger-ink)!important}

/* Both themes distinguish surfaces by neutral fill rather than decorative frames.
   Border widths stay in place so control geometry does not change. Keep the
   intentional project-colour top edge, table/calendar/Gantt data grid, quote
   indicators, native checkbox/radio affordances and keyboard focus outlines. */
html[data-theme] :is(header,aside,.rail,.app-dock,.mobile-nav,dialog,.modal-head,.tabs,.panel,.post,.stat,.task-card,.table-box,.calendar,.gantt,.member,.composer,.compose-actions,.empty,.org-panel,.org-content,.org-selection,.org-member,.sidebar-footer,.sidebar-menu-group,.menu-order-row,.post-bottom,.comment,.settings-list .row,.biz-doc-head,.biz-details>div,.biz-form-section,.biz-route li,.biz-tags span,.policy-guide,.policy-matrix-scroll,.policy-action-help,.notification,.error,.chat-layout,.chat-rooms,.chat-title,.chat-form,.messenger-layout,.messenger-sidebar,.messenger-main,.messenger-title,.messenger-list-title,.chat-list-filters,.chat-room-search,.chat-pinned,.chat-detail-head,.chat-detail-body hr,.chat-people-picker,.reply-preview,.bubble,.message-bubble,.chat-file,.chat-message-popover,.composer-attachment,.composer-error,.composer-emoji-picker,.chat-read-summary>span),
html[data-theme] :is(#sidebar,#messenger,#messenger-send,#messenger-text,#messenger-search-form,#messenger-detail,#toast){border-color:transparent!important}
html[data-theme] :is(button:not(.chat-quote),input:not([type=checkbox]):not([type=radio]),select,textarea,kbd,.appearance-tools .language-control){border-color:transparent!important}
html[data-theme] .project-card{border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}
html[data-theme] :is(dialog,.app-dock,.project-card,.chat-message-popover,.composer-emoji-picker,.tabs button.active),
html[data-theme] #chat-popup-layer :is(.messenger-sidebar,.messenger-main,#messenger-detail,.chat-popup-minibar button){box-shadow:none}
html[data-theme] body:not(.login-mode)>.app-header,
html[data-theme] body:not(.login-mode)>.app-header :is(#search-form,.header-appearance){border-color:transparent!important;box-shadow:none!important}
html[data-theme] .tabs button.active{background:var(--ps-input)}
html[data-theme] :is(.comment:nth-child(even),.org-member:nth-child(even),.settings-list .row:nth-child(even),.biz-details>div:nth-child(even)){background:var(--ps-inset)}
html[data-theme=dark] #chat-popup-layer .chat-popup-backdrop{background:#0008}
html[data-theme=dark] #chat-popup-layer .messenger-main{background:var(--ps-canvas)}
html[data-theme=dark] #messenger-send #messenger-text{background:var(--ps-input)}
html[data-theme=dark] .composer-attachment.has-error{background:var(--ps-danger-soft)}
/* Only the pictured appearance tools lose their backplates; not other icons. */
html[data-theme=dark] .appearance-tools>[data-theme-toggle],
html[data-theme=dark] .appearance-tools .language-control,
html[data-theme=dark] .appearance-tools>[data-theme-toggle]:hover,
html[data-theme=dark] .appearance-tools .language-control:hover{background:transparent;box-shadow:none}
html[data-theme] #messenger-send .composer-emoji-picker{box-shadow:none}
/* Match only the authenticated header's existing icon group. */
.header-appearance svg{width:20px;height:20px;color:var(--ps-icon-mint)}

html[data-theme] #pwa-status{border-color:transparent!important;box-shadow:none;background:var(--ps-input)}
html[data-theme] #pwa-install-dialog{box-shadow:none}
html[data-theme=dark] #pwa-install-dialog::backdrop{background:#0008}

/* Floating chat uses a transparent positioning grid, not a shared window.
   Keep the night surface rule above on full-page chat and the actual panes;
   otherwise list-only mode paints blank wings and two-window mode fills its gap. */
html[data-theme=dark] #chat-popup-layer .messenger-layout{background:transparent}

/* Legacy entry: persistent language tools have their own reserved row.
   Do not use login-mode, which belongs to the primary workspace shell. */
body.legacy-interface{--legacy-tools-height:calc(64px + env(safe-area-inset-top,0px))}
body.legacy-interface #live{padding-top:var(--legacy-tools-height)}
body.legacy-interface>.intro-appearance{display:flex;position:fixed;inset:0 0 auto 0;height:var(--legacy-tools-height);align-items:center;justify-content:flex-end;padding:calc(8px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));background:var(--ps-surface,#fff);border-bottom:1px solid var(--ps-line,#beced3);z-index:40}
body.legacy-interface #live>header{top:var(--legacy-tools-height)}
body.legacy-interface #live>aside{top:var(--legacy-tools-height)}
@media(max-width:760px){body.legacy-interface #live>aside{top:calc(var(--legacy-tools-height) + 80px)}}