/* Shared visual language. Brand cyan-mint is sampled from the character and shared with station-icon.svg.
   Authenticated screens share tokens; the borderless animated intro stays independent. */
:root{
  --ps-mint:#00ede8;
  --ps-mint-hover:#00d5d1;
  /* Character mint mixed with white at 12%, 5% and 40%, for backgrounds/borders only. */
  --ps-mint-wash:#f2fefe;
  --ps-mint-line:#99f8f6;
  --ps-action:#006b68;
  --ps-mint-soft:#e0fdfc;
  --ps-on-mint:#102b2c;
  --ps-ink:#172c30;
  --ps-muted:#465d64;
  --ps-line:#beced3;
  --ps-surface:#fff;
  --ps-sidebar:#e3ecef;
  --ps-input:#f5f8fa;
  --ps-inset:#e9f0f3;
  --ps-disabled-bg:#e4ebee;
  --ps-disabled-line:#c5d2d7;
  --ps-disabled-text:#61767c;
  --ps-danger-soft:#fff0f1;
  --ps-danger-line:#ddaab4;
  --ps-danger-ink:#a32036;
  --ps-canvas:#eef3f5;
  --ps-danger:#aa3d3d;
  --ps-control-radius:10px;
  --ps-card-radius:14px;
  --ps-dialog-radius:16px;
  --ps-space-1:4px;
  --ps-space-2:8px;
  --ps-space-3:12px;
  --ps-space-4:16px;
  --ps-space-5:20px;
  --ps-space-6:24px;
  --ps-space-8:32px;
  --ps-section-gap:20px;
  --ps-control-height:40px;
  --ps-body-size:14px;
  --ps-mobile-nav-height:72px;
  --mint:var(--ps-mint);
  --mint-strong:var(--ps-action);
  --purple:var(--ps-action);
  --line:var(--ps-line);
  --muted:var(--ps-muted);
}
body:not(.login-mode){font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;font-size:var(--ps-body-size);line-height:1.6;color:var(--ps-ink);background:var(--ps-canvas)}
body:not(.login-mode) main{padding:var(--ps-space-8) var(--ps-space-8) 64px;background:var(--ps-canvas)}
body:not(.login-mode) h1{font-size:24px;font-weight:750;line-height:1.35;letter-spacing:-.6px}
body:not(.login-mode) h2{font-size:18px;font-weight:700;line-height:1.45}
body:not(.login-mode) h3{font-size:16px;font-weight:650;line-height:1.5}
body:not(.login-mode) .page-head{gap:var(--ps-space-4);margin-bottom:var(--ps-space-6)}
body:not(.login-mode) .page-head p{font-size:14px;line-height:1.6;color:var(--ps-muted)}
body:not(.login-mode) :is(.post p,.detail-body){font-size:14px;line-height:1.75;color:var(--ps-ink)}
body:not(.login-mode) :is(.project-card p,.project-meta,.org-summary,.org-hint,.org-profile small,.task-data){color:var(--ps-muted)}
body:not(.login-mode) :is(.toolbar,.form-actions,.org-search){gap:var(--ps-space-2)}
body:not(.login-mode) :is(.project-grid,.split,.help-grid,.org-layout){gap:var(--ps-space-5)}

/* Normal action controls share sizing; icon navigation, tabs and status pills keep their meaning. */
body:not(.login-mode) button.primary{min-height:var(--ps-control-height);padding:10px 16px;border:1px solid var(--ps-mint);border-radius:var(--ps-control-radius);background:var(--ps-mint);color:var(--ps-on-mint);font-size:14px;font-weight:700;line-height:1.5}
body:not(.login-mode) button.primary:hover:not(:disabled){background:var(--ps-mint-hover);border-color:var(--ps-mint-hover);color:var(--ps-on-mint)}
body:not(.login-mode) :is(.toolbar>button,.toolbar form>button,.page-head>button,.form-actions>button,.editor>button,.org-search>button,.org-selection>button,.org-chat){min-height:var(--ps-control-height);border-radius:var(--ps-control-radius);font-size:14px;line-height:1.5;padding:10px 16px}
body:not(.login-mode) :is(input,select):not([type=checkbox]):not([type=radio]){min-height:var(--ps-control-height)}
body:not(.login-mode) :is(input,select,textarea):not([type=checkbox]):not([type=radio]){max-width:100%;border-color:var(--ps-line);border-radius:var(--ps-control-radius);font-size:14px;line-height:1.5;background:var(--ps-input);color:var(--ps-ink)}
body:not(.login-mode) :is(input[type=checkbox],input[type=radio]){accent-color:var(--ps-action)}
body:not(.login-mode) header #search-form input{background:transparent;border:0}
body:not(.login-mode) .editor label{gap:var(--ps-space-2);font-size:14px;line-height:1.5;font-weight:600;color:var(--ps-ink)}
body:not(.login-mode) .editor{gap:var(--ps-space-5)}
body:not(.login-mode) :is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--ps-action);outline-offset:3px}
body:not(.login-mode) button:disabled{opacity:.5;cursor:wait}
body:not(.login-mode) :is(.avatar,.chat-avatar){background:var(--ps-mint-soft);color:var(--ps-action)}
body:not(.login-mode) #sidebar .nav-item{border-radius:var(--ps-control-radius);font-size:14px;line-height:1.5}
body:not(.login-mode) #sidebar .nav-item.active{background:var(--ps-mint-soft);color:var(--ps-action)}
body:not(.login-mode) :is(.org-all.selected,.org-tree-row.selected,.messenger-room.selected){background:var(--ps-mint-soft);color:var(--ps-action)}
body:not(.login-mode) :is(.org-all,.org-tree-row){border-radius:var(--ps-control-radius)}

/* Consistent surfaces, without flattening project colors, state colors or chat bubbles. */
body:not(.login-mode) :is(.panel,.post,.stat,.project-card,.task-card,.table-box,.composer,.calendar,.gantt,.member,.org-panel,.org-content){border-radius:var(--ps-card-radius);background:var(--ps-surface)}
body:not(.login-mode) :is(.panel,.post,.stat,.task-card,.table-box,.composer,.calendar,.gantt,.member,.org-panel,.org-content){border-color:var(--ps-line)}
body:not(.login-mode) .project-card{border-left-color:var(--ps-line);border-right-color:var(--ps-line);border-bottom-color:var(--ps-line);padding:var(--ps-space-6)}
body:not(.login-mode) :is(.panel,.post,.org-content){padding:var(--ps-space-6)}
body:not(.login-mode) .stat{padding:var(--ps-space-5)}
body:not(.login-mode) .task-card{padding:var(--ps-space-4)}
body:not(.login-mode) .notification-list{padding:0}
body:not(.login-mode) .tabs{margin-left:calc(-1 * var(--ps-space-8));margin-right:calc(-1 * var(--ps-space-8));padding-left:var(--ps-space-8);padding-right:var(--ps-space-8)}
body:not(.login-mode) .tabs button{font-size:14px;line-height:1.5}
body:not(.login-mode) .table-box th{font-size:13px;font-weight:650;color:var(--ps-muted);background:var(--ps-canvas)}
body:not(.login-mode) .table-box td{font-size:14px;line-height:1.6}
body:not(.login-mode) .table-box :is(th,td){border-bottom-color:var(--ps-line)}
body.compact:not(.login-mode) .table-box td{padding-top:8px;padding-bottom:8px}
body:not(.login-mode) #messenger{border-color:var(--ps-line);border-radius:var(--ps-card-radius)}
body:not(.login-mode) .message-bubble{font-size:14px;line-height:1.7}
body:not(.login-mode) .mine .message-bubble{background:var(--ps-mint-soft);color:var(--ps-ink)}
body:not(.login-mode) .room-copy strong{font-size:14px;line-height:1.5}
body:not(.login-mode) .room-copy small{font-size:12px;line-height:1.5;color:var(--ps-muted)}
body:not(.login-mode) dialog{border-color:var(--ps-line);border-radius:var(--ps-dialog-radius);background:var(--ps-surface)}
body:not(.login-mode) .modal-head{padding:var(--ps-space-5) var(--ps-space-6)}
body:not(.login-mode) .modal-body{padding:var(--ps-space-6)}
body:not(.login-mode) .error{color:var(--ps-danger);background:#fff0f1;border-radius:var(--ps-control-radius);line-height:1.6}

/* Phone layouts are full-size interfaces, not scaled desktop pages. */
@media(max-width:760px){
  :root{--ps-body-size:16px;--ps-control-height:44px;--ps-section-gap:16px}
  body:not(.login-mode){overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body:not(.login-mode) main{width:100%;min-width:0;padding:var(--ps-space-6) var(--ps-space-4) calc(var(--ps-mobile-nav-height) + var(--ps-space-6) + env(safe-area-inset-bottom))}
  body:not(.login-mode) h1{font-size:24px;line-height:1.4;overflow-wrap:anywhere}
  body:not(.login-mode) h2{font-size:20px;line-height:1.45}
  body:not(.login-mode) h3{font-size:17px;line-height:1.5}
  body:not(.login-mode) .page-head p{font-size:15px;line-height:1.65}
  body:not(.login-mode) :is(.post p,.detail-body,.message-bubble){font-size:16px;line-height:1.75}
  body:not(.login-mode) :is(.project-card p,.task-data){font-size:14px;line-height:1.65}
  body:not(.login-mode) :is(input,select):not([type=checkbox]):not([type=radio]){min-height:44px}
  body:not(.login-mode) :is(input,select,textarea):not([type=checkbox]):not([type=radio]){min-width:0;font-size:16px;line-height:1.5}
  body:not(.login-mode) :is(.editor input,.editor select,.editor textarea){width:100%}
  body:not(.login-mode) .editor :is(input[type=checkbox],input[type=radio]){width:22px;height:22px;min-height:22px}
  body:not(.login-mode) :is(.check,.org-check){min-height:44px}
  body:not(.login-mode) :is(button.primary,.toolbar>button,.toolbar form>button,.page-head>button,.form-actions>button,.editor>button,.org-search>button,.org-selection>button,.org-chat){min-height:44px;font-size:15px;padding:10px 14px}
  body:not(.login-mode) :is(.form-actions>button,.editor>button.primary){font-size:16px;min-height:48px}
  body:not(.login-mode) :is(.modal-head button,.head-tools button,.org-expand,.org-panel-heading button,.org-content-heading button,.message-hover-tools button){min-width:44px;min-height:44px}
  body:not(.login-mode) :is(.org-department,.org-all,.org-profile){min-height:44px}
  body:not(.login-mode) #sidebar .nav-item{min-height:48px;font-size:16px;line-height:1.5}
  body:not(.login-mode) :is(.project-grid,.split,.help-grid,.org-layout){gap:var(--ps-space-4)}
  body:not(.login-mode) :is(.panel,.post,.project-card,.org-content){padding:var(--ps-space-5)}
  body:not(.login-mode) .notification-list{padding:0}
  body:not(.login-mode) .stat{padding:var(--ps-space-4)}
  body:not(.login-mode) .tabs{margin-left:calc(-1 * var(--ps-space-4));margin-right:calc(-1 * var(--ps-space-4));padding-left:var(--ps-space-4);padding-right:var(--ps-space-4)}
  body:not(.login-mode) .tabs button{font-size:15px;min-height:48px}
  body:not(.login-mode) :is(.table-box,.gantt,.kanban){max-width:100%;overscroll-behavior-x:contain}
  body:not(.login-mode) .table-box{overflow-x:auto}
  body:not(.login-mode) .table-box :is(th,td){font-size:14px;line-height:1.6}
  body:not(.login-mode) .table-box td button{min-height:44px}
  body:not(.login-mode) .calendar .day button{min-height:44px;font-size:12px}
  body:not(.login-mode) .biz-table{background:transparent;border:0;overflow:visible}
  body:not(.login-mode) .biz-table tr{border-radius:var(--ps-card-radius);border-color:var(--ps-line);background:var(--ps-surface)}
  body:not(.login-mode) .biz-table td{font-size:15px;min-width:0;overflow-wrap:anywhere}
  body:not(.login-mode) .mobile-nav{grid-template-columns:repeat(6,minmax(0,1fr));min-height:calc(var(--ps-mobile-nav-height) + env(safe-area-inset-bottom));padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-top-color:var(--ps-line);background:var(--ps-surface)}
  body:not(.login-mode) .mobile-nav button{min-width:0;min-height:60px;padding:4px 0;gap:3px}
  body:not(.login-mode) .mobile-nav button span{font-size:12px;line-height:1.4;letter-spacing:-.3px;white-space:nowrap}
  body:not(.login-mode) .mobile-nav button.active{background:var(--ps-mint-soft);color:var(--ps-action)}
  body:not(.login-mode) dialog{max-width:100%;max-height:calc(100dvh - max(12px,env(safe-area-inset-top)));overflow-y:auto;overscroll-behavior:contain;border-radius:20px 20px 0 0}
  body:not(.login-mode) .modal-head{padding:var(--ps-space-4) var(--ps-space-5);gap:var(--ps-space-2)}
  body:not(.login-mode) .modal-head h2{min-width:0;overflow-wrap:anywhere}
  body:not(.login-mode) .modal-head button{flex-shrink:0}
  body:not(.login-mode) .modal-body{padding:var(--ps-space-5) var(--ps-space-5) calc(var(--ps-space-6) + env(safe-area-inset-bottom))}
  body:not(.login-mode) #sidebar{overflow-y:auto;overscroll-behavior:contain}
  body:not(.login-mode) :is(.chat-list-filters button,.message-reactions button,.messenger-compose-tools button,.messenger-title nav button,.mobile-chat-back){min-width:44px;min-height:44px}
  body:not(.login-mode) .message-content{max-width:calc(100% - 96px);min-width:0}
  body:not(.login-mode) .chat-message.mine .message-content{max-width:calc(100% - 52px)}
  body:not(.login-mode) .message-reactions{flex-wrap:wrap}
  body:not(.login-mode) .messenger-title>div{flex:1;min-width:0}
  body:not(.login-mode) .messenger-title>div>span{flex:1;min-width:0}
  body:not(.login-mode) .messenger-title b{max-width:100%}
  body:not(.login-mode) .messenger-title nav,body:not(.login-mode) .mobile-chat-back{flex-shrink:0}
  body:not(.login-mode) .room-copy strong{font-size:16px}
  body:not(.login-mode) .room-copy small{font-size:14px}
  body.chat-page:not(.login-mode) main{padding:0}
  body.chat-page:not(.login-mode) #messenger{height:calc(100dvh - 58px - var(--ps-mobile-nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0;border:0;border-radius:0}
  body:not(.login-mode) #toast{bottom:calc(var(--ps-mobile-nav-height) + var(--ps-space-3) + env(safe-area-inset-bottom))}
}

/* Card stacks need a vertical gutter as well as the gap inside each grid.
   Scope this to block-flow section containers: table cells, list rows, tree rows,
   calendar cells and the connected messenger panes intentionally remain joined. */
body:not(.login-mode) :is(#main,.workspace-body,.modal-body,.biz-document)>:is(.panel,.post,.stats,.split,.project-grid,.table-box,.kanban,.gantt,.calendar,.member-grid,.help-grid,.composer,.empty,.org-layout,.member,form.editor){margin-top:0;margin-bottom:0}
body:not(.login-mode) :is(#main,.workspace-body,.modal-body,.biz-document)>:is(.panel,.post,.stats,.split,.project-grid,.table-box,.kanban,.gantt,.calendar,.member-grid,.help-grid,.composer,.empty,.org-layout,.member,form.editor)+:is(.panel,.post,.stats,.split,.project-grid,.table-box,.kanban,.gantt,.calendar,.member-grid,.help-grid,.composer,.empty,.org-layout,.member,form.editor){margin-top:var(--ps-section-gap)}
body:not(.login-mode) :is(.project-grid,.split,.help-grid,.member-grid,.org-layout,.stats,.kanban){gap:var(--ps-section-gap)}
body:not(.login-mode) form.editor{gap:var(--ps-section-gap)}
body:not(.login-mode) .editor .two{gap:var(--ps-space-4)}
body:not(.login-mode) form.editor>:is(.panel,.post,.stats,.split,.table-box,.member,.biz-net){margin-top:0;margin-bottom:0}
body:not(.login-mode) .biz-route{gap:var(--ps-space-3)}
@media(max-width:760px){
  body:not(.login-mode) .biz-table tbody>tr{margin-top:0;margin-bottom:0}
  body:not(.login-mode) .biz-table tbody>tr+tr{margin-top:var(--ps-space-3)}
}

/* The permission editor uses the same visual language without flattening its
   intentionally scrollable, sticky-column policy matrix into unreadable cards. */
body:not(.login-mode) .permissions-page :is(.policy-guide,.policy-matrix-scroll,.policy-action-help){border-color:var(--ps-line);border-radius:var(--ps-card-radius);background:var(--ps-surface)}
body:not(.login-mode) .permissions-page .policy-guide{padding:var(--ps-space-5);background:var(--ps-mint-soft)}
body:not(.login-mode) .permissions-page :is(.policy-tabs,.policy-selectors){gap:var(--ps-space-3)}
body:not(.login-mode) .permissions-page :is(.policy-tabs button,.policy-save-bar button){min-height:40px;padding:10px 14px;font-size:14px;border-radius:var(--ps-control-radius)}
body:not(.login-mode) .permissions-page .policy-tabs [aria-selected=true]{background:var(--ps-mint-soft);color:var(--ps-action);border-color:var(--ps-action)}
body:not(.login-mode) .permissions-page .policy-matrix thead th{background:var(--ps-mint-soft)}
body:not(.login-mode) .permissions-page .policy-action-help{margin-top:var(--ps-section-gap);padding:var(--ps-space-4)}
body:not(.login-mode) .permissions-page .policy-save-bar{gap:var(--ps-space-3);padding:var(--ps-space-5) 0}
body:not(.login-mode) .permissions-page .policy-matrix-scroll{max-width:100%;overscroll-behavior:contain}
@media(max-width:760px){
 body:not(.login-mode) .permissions-page :is(.policy-tabs button,.policy-save-bar button){min-height:44px;font-size:15px}
 body:not(.login-mode) .permissions-page .policy-save-bar button{min-height:48px;font-size:16px}
 body:not(.login-mode) .permissions-page :is(.policy-guide p,.policy-preview-note,.policy-save-note,.policy-action-help,.policy-matrix small){font-size:13px;line-height:1.65}
 body:not(.login-mode) .permissions-page .policy-matrix :is(th,td){font-size:14px;line-height:1.6}
 body:not(.login-mode) .permissions-page .policy-matrix select{min-height:44px;font-size:16px}
 body:not(.login-mode) .permissions-page .policy-action-help summary{min-height:44px;line-height:1.6;padding:10px 0}
}

/* Crisp contrast: solid character mint for ordinary actions, not navigation rows.
   Approval/status colours, destructive controls and user project colours stay distinct. */
body:not(.login-mode) :is(h1,h2,h3,.brand,.post-title,.project-card h3,.org-profile b,.room-copy strong,.message-author,.biz-title){color:var(--ps-ink)}
body:not(.login-mode) :is(.page-head p,.project-card p,.project-meta,.task-data,.org-summary,.org-hint,.org-profile small,.room-copy small,.source-note){color:var(--ps-muted)}
body:not(.login-mode) :is(.post p,.detail-body,.policy-guide p,.policy-action-help){color:var(--ps-ink)}
body:not(.login-mode) :is(.nav-icon svg,.dock-icon svg,.head-tools svg,.rail svg){stroke-width:2}
body:not(.login-mode) :is(#sidebar .nav-item.active .nav-icon,.app-dock .active .dock-icon,.compose-actions span){color:var(--ps-mint)}
body:not(.login-mode) :is(.notification-dot,.progress>div){background:var(--ps-mint)}
body:not(.login-mode) :is(input[type=checkbox],input[type=radio]){accent-color:var(--ps-mint)}
body:not(.login-mode) button:not(:where(header button,.rail button,.app-dock button,.nav-item,.tabs button,.policy-tabs button,.star,.notification,.biz-title,.org-profile,.org-department,.org-all,.org-expand,.org-select-member,.messenger-room,.chat-list-filters button,.messenger-title button,.message-hover-tools button,.chat-message-popover button,.reaction,.chat-quote,.chat-pinned,.mobile-chat-back,.modal-head button,.sidebar-close,.folder-add,[data-mobile-search],.danger,.org-danger,[data-delete],[data-resource-delete],[data-member-remove],[data-chat-delete],[data-chat-remove],[name=decision][value=reject])){background:var(--ps-mint);border-color:var(--ps-mint);color:var(--ps-on-mint);font-weight:650}
body:not(.login-mode) button:not(:where(header button,.rail button,.app-dock button,.nav-item,.tabs button,.policy-tabs button,.star,.notification,.biz-title,.org-profile,.org-department,.org-all,.org-expand,.messenger-room,.chat-list-filters button,.messenger-title button,.message-hover-tools button,.chat-message-popover button,.reaction,.chat-quote,.chat-pinned,.mobile-chat-back,.modal-head button,.sidebar-close,.folder-add,.danger,.org-danger,[data-delete],[data-resource-delete],[data-member-remove],[data-chat-delete],[data-chat-remove],[name=decision][value=reject])):hover:not(:disabled){background:var(--ps-mint-hover);border-color:var(--ps-mint-hover)}
body:not(.login-mode) :is(.danger,.org-danger,button[data-delete],button[data-resource-delete],button[data-member-remove],button[data-chat-delete],button[data-chat-remove],button[name=decision][value=reject]){background:var(--ps-danger-soft);border-color:var(--ps-danger-line);color:var(--ps-danger-ink)!important}
body:not(.login-mode) button:disabled{opacity:1;background:var(--ps-disabled-bg)!important;border-color:var(--ps-disabled-line)!important;color:var(--ps-disabled-text)!important;cursor:not-allowed}
body:not(.login-mode) :is(.nav-item,.rail button,.head-tools button,.dock-item){color:var(--ps-muted)}
body:not(.login-mode) :is(.nav-item.active,.app-dock .dock-item.active){color:var(--ps-ink)}

/* Clear surface levels, rather than tinting the whole workspace mint. */
body:not(.login-mode) #sidebar{background:var(--ps-sidebar);border-right:1px solid var(--ps-line)}
body:not(.login-mode) :is(header,.rail,.empty,.modal-head,.modal-body){background:var(--ps-surface)}
body:not(.login-mode) .empty{border-color:var(--ps-line)}
body:not(.login-mode) :is(.table-box th,.biz-table th,.kanban-column,.chat-room-search){background:var(--ps-inset)}
body:not(.login-mode) :is(.editor input,.editor select,.editor textarea,.org-search input,header #search-form){background:var(--ps-input)}

body:not(.login-mode) .room-trailing .unread{background:var(--ps-mint);color:var(--ps-on-mint)}
body:not(.login-mode) :is(small,.muted,.nav-label,.project-meta,.room-trailing small,.message-meta,.message-meta small,.notification.read em,.source-note){color:var(--ps-muted)}
body:not(.login-mode) :is(.nav-label,.room-trailing small,.message-meta,.message-meta small,.source-note,.policy-matrix small){font-size:12px;line-height:1.5}
body:not(.login-mode) :is(input,textarea)::placeholder{color:var(--ps-muted);opacity:1}
body:not(.login-mode) .chat-day-divider span{background:var(--ps-inset);color:var(--ps-muted);font-size:12px}
@media(max-width:760px){body:not(.login-mode) :is(.nav-label,.room-trailing small,.message-meta,.message-meta small,.source-note){font-size:13px}}
body:not(.login-mode) :is(.empty,.loading,.compose-prompt,.chat-no-messages,.chat-small-empty,.messenger-start,.message-bubble.deleted,kbd){color:var(--ps-muted)}

/* Keep five semantic task fills; use readable ink on their bright backgrounds. */
body:not(.login-mode) .status{color:var(--ps-on-mint)}
body:not(.login-mode) .status.s3{color:#fff}