/* A restrained frame for the role workspaces. Status color remains in the role mark. */
:root {
  --shell-height: 68px;
  --apple-accent: #007aff;
  --md-shell-surface: #f5f5f7;
  --md-shell-ink: #1d1d1f;
  --md-shell-muted: #6e6e73;
}

body {
  color: var(--md-shell-ink);
  background: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

body[data-role="worker"] {
  --role-accent: #14766c;
  --role-soft: #e9f5f2;
  --role-border: #bfded7;
}

body[data-page-banner="app"] #site-banner {
  padding: 7px 16px;
  border-bottom-color: #e5e5e9;
  background: #f5f5f7;
  color: #6e6e73;
  font-size: 12px;
}

.workspace-header {
  min-height: 68px;
  padding-block: 8px;
  gap: 24px;
  border-bottom: 1px solid #e5e5e9;
  background: rgb(255 255 255 / 88%);
  box-shadow: none;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.role-trigger {
  flex-basis: 218px;
  min-height: 50px;
  padding: 5px 10px 5px 6px;
  gap: 10px;
  border: 1px solid #e5e5e9;
  border-radius: 12px;
  background: rgb(255 255 255 / 74%);
  box-shadow: none;
}
.role-trigger:hover { background: #f5f5f7; border-color: #c7c7cc; }
.role-mark { width: 36px; height: 36px; border-radius: 8px; font-size: 16px; }
.role-trigger .eyebrow { color: #86868b; font-size: 11px; letter-spacing: .02em; }
.role-trigger strong { color: #1d1d1f; font-size: 14px; }
.role-chevron { color: #86868b; font-size: 17px; }

.workspace-tabs { align-self: stretch; gap: 22px; }
.workspace-tab {
  min-height: 50px;
  padding-inline: 5px;
  border-bottom-width: 2px;
  color: #6e6e73;
  font-size: 14px;
  font-weight: 600;
}
.workspace-tab[aria-current="page"] { border-bottom-color: var(--apple-accent); color: #1d1d1f; }
.header-tagline { display: none; }
.top-actions, .top-actions .task-auth-account > summary { font-size: 14px; }
.top-actions .task-auth-account > summary {
  min-height: 40px;
  padding: 7px 13px;
  border: 1px solid #d2d2d7;
  border-radius: 10px;
  background: rgb(255 255 255 / 70%);
}
.top-actions .task-auth-account > summary:hover { background: #f5f5f7; }
#portal-frame { background: #f5f5f7; }

.role-picker, .action-dialog, .task-auth-dialog, .task-session-dialog {
  border: 1px solid #e5e5e9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px #1d1d1f24;
}
.role-picker { top: calc(var(--page-banner-height, 0px) + 76px); }
.role-card { min-height: 70px; border: 1px solid #e5e5e9; border-radius: 12px; background: #fff; }
.role-card:hover { border-color: #c7c7cc; background: #f7f7f9; }
.role-card[aria-current="true"] { border-color: #b7d7ff; background: #eef5ff; }
.invitation-note { background: #f5f5f7; }
.task-auth-dialog .task-auth-primary { border-radius: 11px !important; background: var(--apple-accent) !important; }
.task-auth-dialog input:not([type="radio"]):not([type="checkbox"]) { border-radius: 10px; background: #fff; }
.task-auth-dialog input:not([type="radio"]):not([type="checkbox"]):focus { border-color: var(--apple-accent); box-shadow: 0 0 0 4px #007aff20; }
.task-login-methods button[aria-selected="true"], .task-auth-tabs button[aria-selected="true"] { color: var(--apple-accent) !important; border-bottom-color: var(--apple-accent) !important; }
.assets-view { color: #1d1d1f; }
.asset-section { border: 1px solid #e5e5e9; border-radius: 18px; background: #fff; box-shadow: 0 2px 12px #1d1d1f08; }
.asset-metric { border: 1px solid #e9e9ed; border-radius: 12px; background: #f8f8fa; }
.asset-hero { border-radius: 15px; background: #f0f6ff; }
.asset-hero strong { color: #1d1d1f; }
.asset-hero-mark { border-color: #bfdcff; color: var(--apple-accent); }
.assets-head button { border: 1px solid #d2d2d7; border-radius: 10px; background: #fff; color: var(--apple-accent); }
@media (prefers-reduced-transparency: reduce) {
  .workspace-header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 700px) {
  .workspace-header { min-height: 0; padding: 7px 12px; gap: 7px; }
  .role-trigger { flex: 1 1 150px; min-height: 46px; }
  .workspace-tabs { order: 3; width: 100%; gap: 0; border-bottom: 1px solid #e7ebef; }
  .workspace-tab { min-height: 42px; }
  .role-picker { top: auto; border-radius: 16px 16px 0 0; }
  .top-actions .task-auth-account > summary { min-height: 42px; font-size: 0; }
  .top-actions .task-auth-account > summary::after { font-size: 13px; }
}

/* Keep shell controls and the asset page on the same scale as role workspaces. */
:root { --apple-accent: #1769d2; --md-shell-surface: #f6f8fb; --md-shell-ink: #17212f; --md-shell-muted: #66758a; }
body { background: #f6f8fb; color: #17212f; font-size: 17px; }
.workspace-header { border-bottom-color: #e3e9f0; background: #fff; }
.role-trigger { border-color: #e3e9f0; background: #fff; }
.role-trigger .eyebrow { color: #66758a; font-size: 12px; }
.role-trigger strong, .workspace-tab { font-size: 15px; }
.workspace-tab[aria-current="page"] { border-bottom-color: #1769d2; }
#portal-frame { background: #f6f8fb; }
.role-picker, .action-dialog, .task-auth-dialog, .task-session-dialog { border-color: #e3e9f0; border-radius: 16px; }
.role-picker { padding: 22px; }
.role-card { border-color: #e3e9f0; }
.picker-intro { display: none; }
.invitation-note { align-items: center; padding: 12px 14px; background: #f8fafc; }
.invitation-note strong, .invitation-note p { color: #66758a; font-size: 15px; line-height: 1.45; }
.invitation-note p { margin-top: 2px; }
.assets-view { max-width: 1440px; }
.assets-head { align-items: center; margin-bottom: 20px; }
.assets-head h1 { color: #17212f; font-size: clamp(30px, 3vw, 38px); }
.assets-head button { min-height: 42px; border-color: #cbd5e1; border-radius: 10px; color: #1769d2; font-size: 15px; }
.asset-section { padding: 23px; border-color: #e3e9f0; border-radius: 15px; box-shadow: 0 2px 10px #15223808; }
.asset-section-heading .eyebrow { display: none; }
.asset-section-heading h2 { color: #17212f; font-size: 21px; }
.asset-hero { min-height: 130px; padding: 22px 26px; border-radius: 12px; background: #eef5ff; }
.asset-hero strong { font-size: clamp(34px, 4vw, 48px); color: #17212f; }
.asset-hero-mark { width: 74px; height: 74px; font-size: 40px; border-color: #bed6fa; color: #1769d2; }
.asset-metric { border-color: #e3e9f0; background: #f8fafc; }
@media (max-width: 700px) {
  .role-picker { padding: 12px 18px max(22px, env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .assets-head button { width: auto; }
  .asset-section { padding: 17px; }
}